/* Estilos para la imagen de inicio */
        .splash-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('img/Olneya_inicio_(1920 x 1080 px).png') center/contain no-repeat, #090A26;
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: fadeOut 1s ease-in-out forwards;
            animation-delay: 1.25s;
        }
        
        /* Animación de difuminado */
        @keyframes fadeOut {
            0% {
                opacity: 1;
                filter: blur(0px);
            }
            100% {
                opacity: 0;
                filter: blur(10px);
                visibility: hidden;
            }
        }
        
        /* Ocultar scroll durante la animación inicial */
        body.splash-active {
            overflow: hidden;
        }

.redes{
    padding: 15px 8px;
    display: inline;
    position: relative;
    margin-top: 10px !important;
}
.row {
    
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
}
.col-md-6 {
    z-index: 100;
}
.subir
{
    position: relative;
    top: -50px;
    display: flex;
}
.corte{
    width: 100%;
  height: 140px;
  background-color:#1C228C;
  -ms-transform: skewY(6deg); /* IE 9 */
  transform: skewY(6deg);
  margin: 0px;
  position: relative;
    top: -80px;;
}
.corte2{
    width: 100%;
  height: 600px;
  background-color: #1C228C;
  -ms-transform: skewY(6deg); /* IE 9 */
  transform: skewY(6deg);
  margin: 0px;
  position: relative;
  margin-top: -600px;
  top: -100px;
}
img.foto {
    position: relative;
    top: -190px;
}
.pr
{
    width: 100%;
}
.pad {
    padding: 20px 30px;
}
.pad .col-md-3 {
    padding: 30px 10px;
}
h2.title1 {
    font-size: 50px !important;
}
.carousel-caption {
    bottom: 30%;
}

li.nav-item a {
    transition: 0.5s;
}
 li.nav-item a:hover {
    background:#1C228C;
    color: rgb(0, 0, 0)55 !important;
}

li.nav-item {
    padding: 5px 25px;
}

* { 
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: #ffffff;
    color: #000000;
    font-size: 20px;
    font-family: 'Rajdhani', sans-serif;
}

a{
    color: #ffffff;
    text-decoration: none;
}

b{
    color: #000000;
    text-decoration: none;
    cursor: pointer;
}

ul{
    list-style: none;
}
.container{
font-family: 'Rajdhani', sans-serif;
width: 90%;
margin: auto; 
}

/*NAVEGACIÓN*/

.nav-main {
    font-size: 20px;
    font-weight:bold;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    height: 70px;
    padding: 0px 0px;
    margin: 30px 0;
}

.nav-brand{
    width:  145px;
    }

/* NAV LEFT */

.nav-main ul{
display: flex;
}
.nav-main ul li {
    display: flex;
    gap: 10px;
    padding: 30px;
    }
.nav-main ul li a {
        padding: 2px;      
      }
.nav-main ul li a:hover {
    
    background:   #000000 ;
    color: #000000;
    font-size: 20px; 
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s; 
    padding: 5px;  
    }

.nav-main ul.nav-menu{
        flex: 1;
        margin-left: 10px;
  }

/* SHOW CASE */


.showcase{
    font-family:'Rajdhani', sans-serif;
        height: 550px;
        background: url('img/Slider Proyecto ejecutivo de ing.jpg') no-repeat center center/cover;
        align-items: center;
        text-align: center;
        justify-content: flex;
        padding: 50px;
        margin-bottom: 30px ;
    }
    .showcase .title1{
        justify-content: space-between;
       width:800px;
        display: flex ;
        flex-direction: row;
        align-items: top;
        text-align: center;
        justify-content: center;
   }
   .izquierda{
    cursor: pointer; 
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    }

.fa-chevron-left,.fa-chevron-right{
font-size:35px;
}
.derecha{
    cursor: pointer; 
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}
   
.btn{
    cursor: pointer; 
    display: inline-block;
    border: 10px ;
    font-weight: bold;
    padding: 10px 20px;
    background:   #ffffff ;
    color: #000000;
    font-size: 17px;
    border: 2px solid #000000;
    margin-top: 1.5rem;
    border-radius: 0.1rem;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    justify-content: center;
    animation: parpadear 1.5s infinite
    }

@keyframes parpadear {
  0% { opacity: 1; }   /* Totalmente visible */
  50% { opacity: 0.3; } /* Casi transparente */
  100% { opacity: 1; } /* Volvemos a ser visible */
}

.container3{
    font-weight:bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 100px;   
            } 

.btn:hover{
    animation: none;
    transform: scale(1.05)
    } 
.izquierda:hover{
    opacity: 70%;
    cursor: pointer; 
    display: inline-block;
    border: 10px ;
    font-weight: bold;
    padding: 10px 20px;
    background:   #000000 ;
    color: #262626;
    font-size: 17px;
    border: 2px solid #000000;
    margin-top: 1.5rem;
    border-radius: 0.1rem;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
} 

.showcase h2{
    font-size: 50px !important;
             margin-bottom: 10px;
}
.showcase h2,
.showcase p{
             margin-bottom: 10px;
}

/* SHOW CASE */

.contenido{
    display: flex;
    align-items: top;
    grid-template-columns: 1fr 1fr 1fr 1fr;  
    justify-content: space-between;
    gap:7%;
    margin-left: 30px;
    margin-right: 30px;
    height:400px;
    }

.contenido img{
    width: 100%;
    height: 180px;
}

.tex1:hover{
    cursor: pointer; 
    
    
}
.contenido p{
    font-size: 10px;
    
}
.contenido a{
    padding: 10px 0;
    color: rgb(0, 0, 0);
    text-transform: uppercase;
    display: inline-block;
    font-weight: bold;
    cursor: pointer; 
}

/*  BANNER */
.banner,
.banner2{
    width: 100%;
    height: auto;
    background: #ffffff;
    text-align: center;
    color: rgb(0, 0, 0);
    padding: 60px 30px;
    margin: 0px;
    }

    .banner p{
    color:#1C228C;
}

.banner a:hover{
    text-decoration: underline;
}

.banner a{
    font-size: 10px;
    color:#1C228C;
    margin: 10px 0;
}



.banner .content{
    width: 100%;
    padding: 30px 0 0 30px;
    color: #1C228C;
}

  .footer {
    background: #000000;
    color: #1C228C;
    font-size: 12px;
    align-items: baseline;
    height: 100px;
    display: flex;
  }

  @media (min-width: 900px){
    header{
        position: fixed;
        z-index: 1000;
        width: 100%;
    }
    

}

  @media (max-width: 700px){
      .contenido{
        grid-template-columns: repeat(2,1fr);
      }
      .banner .content,
      .banner2 .content{
          width: 80%;
      }
      .d-none {
        display: block !important;
    }
    h1 {
        font-size: 30px !important;
        font-weight: 700;
    }
    .btn{
        margin: 0px !important;
    }
    .carousel-caption {
        bottom: 10% !important;
    }
      

  }


  h1{
      font-size: 60px;
      font-weight: 700;
  }

  h2{
    font-size: 45px !important;
    font-weight: 700 !important;
}
footer{
    text-align: center;

}
footer .redes{
    transition: .5s;
    margin: 5px;
}
footer .redes:hover{
    color: rgb(0, 0, 0) ;
    border: 1px solid rgb(0, 0, 0);
    margin: 15px;
    width: 100px;
    height: 30px;
    padding: 10px 13px;
    border-radius: 100px;
    
}

.bg-dark {
    background-color: #ada5a5!important;
}

.navbar-brand {
    margin-right: 0;
}





/* ZOOM IN IMAGENES DE CARRUSEL */

.image-container {
            
        }
        
        .image-container img {
            object-fit: cover;
            transition: transform 3s ease-in-out;
        }
        
        /* Efecto de zoom automático */
        .image-container.auto-zoom img {
            animation: autoZoom 3s infinite alternate ease-in-out;
        }
        
        @keyframes autoZoom {
            0% {
                transform: scale(1);
            }
            100% {
                transform: scale(1.2);
            }
        }