@font-face {
    font-family: 'Whyte Book';
    src: local('Whyte Book'), local('Whyte-Book'),
        url('../fonts/Whyte-Book.woff2') format('woff2'),
        url('../fonts/Whyte-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Whyte';
    src: local('Whyte Regular'), local('Whyte-Regular'),
        url('../fonts/Whyte-Regular.woff2') format('woff2'),
        url('../fonts/Whyte-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Whyte';
    src: local('Whyte Heavy'), local('Whyte-Heavy'),
        url('../fonts/Whyte-Heavy.woff2') format('woff2'),
        url('../fonts/Whyte-Heavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Whyte';
    src: local('Whyte Bold'), local('Whyte-Bold'),
        url('../fonts/Whyte-Bold.woff2') format('woff2'),
        url('../fonts/Whyte-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Whyte';
    src: local('Whyte Black'), local('Whyte-Black'),
        url('../fonts/Whyte-Black.woff2') format('woff2'),
        url('../fonts/Whyte-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Whyte';
    src: local('Whyte Medium'), local('Whyte-Medium'),
        url('../fonts/Whyte-Medium.woff2') format('woff2'),
        url('../fonts/Whyte-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Canela';
    src: url('../fonts/Canela-Bold.woff2') format('woff2'),
        url('../fonts/Canela-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

html{
    margin: 0;
}

body{
    font-family: 'Whyte';
}

p{
    font-size: 1.1rem;
}

h1{
    font-size: 3.5rem;
}

h1,h2,h3,h4,h5,h6{
    font-family: 'Canela'!important;
}

.padding{
    padding: 0 8rem;
}

nav{
    background-color: transparent;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 100;
}

.navbar-menu{
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 8rem;
}

.logo{
    width: 100%;
}

.nav-item{
    padding: 1rem 2rem;
}

.nav-link{
    color: #fff;
    font-size: 1.1rem;
    font-weight: 500;
}

.nav-link:hover{
    color: rgb(202, 202, 202);
    text-decoration: none;
    transition: 0.3s ease-in;
}

.menu-hamburguesa{
    display: flex;
    align-items: center;
}

.menu-hamburguesa>div{
    width: fit-content;
    cursor: pointer;
}

.menu-hamburguesa>div>div:nth-child(1),.menu-hamburguesa>div>div:nth-child(2){
    width: 40px;
    background-color: #fff;
    height: 2px;
    margin: 0.6rem 0;
    border-radius: 5px;
    transition: 1s ease-in-out;
}

.menu-hamburguesa>div>div:nth-child(3){
    width: 20px;
    background-color: #fff;
    height: 2px;
    margin: 0.6rem 0;
    border-radius: 5px;
    transition: 1s ease-in-out;
}

.change>div:nth-child(1){
    transform: translatex(-15rem);
    transition: 1.5s all ease-in-out!important;
}

.change>div:nth-child(2){
    transform: translatex(-15rem);
    transition: 1s all ease-in-out!important;
}

.change>div:nth-child(3){
    opacity: 0;
    transform: translateX(-15rem);
    transition: 0.5s all ease-in-out!important;
}

.menu{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    height: 101vh;
    background-color: rgba(0, 0, 0, 0.6);
}

.menu>div>div{
    width: 30vw;
    background-color: #2e5551;
    height: 101vh;
}

#btn-cerrar-menu{
    cursor: pointer;
    width: fit-content;
    padding: 1rem 0;
}

#btn-cerrar-menu:hover{
    transform: scale(0.8);
    transition-duration: 0.3s;
}

#btn-cerrar-menu>div:nth-child(1){
    width: 40px;
    background-color: #fff;
    height: 2px;
    margin: 0.6rem 0;
    border-radius: 5px;
    transform: translatey(12px) rotate(45deg);
}

#btn-cerrar-menu>div:nth-child(2){
    width: 40px;
    background-color: #fff;
    height: 2px;
    margin: 0.6rem 0;
    border-radius: 5px;
    transform: rotate(-45deg);
}

#btn-cerrar-menu.change{
    opacity: 0;
    transform: scale(0.9);
    transition: 1s all ease;
}

.menu-fijo {
	position: fixed!important;
	width: 100%;
	z-index: 9999;
	top: 0;
	-webkit-box-shadow: 3px 11px 26px -20px rgba(0,0,0,0.91);
	-moz-box-shadow: 3px 11px 26px -20px rgba(0,0,0,0.91);
	box-shadow: 3px 11px 26px -20px rgba(0,0,0,0.91);
  transition-duration: 0.1s;
    background-color: #2e5551!important;
}

.sombreado-barra{
    -webkit-box-shadow: 3px 15px 26px -20px rgba(0,0,0,0.91);
  -moz-box-shadow: 3px 15px 26px -20px rgba(0,0,0,0.91);
  box-shadow: 3px 15px 26px -20px rgba(0,0,0,0.91);
}

.hero {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    color: white;
    text-align: center;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.hero-video.mobile {
    display: none;
}


@media (max-width: 768px) {
    .hero-video.desktop {
        display: none;
    }
    .hero-video.mobile {
        display: block;
    }
}

.boton-modal-mobile {
    position: relative;
    z-index: 1; /* Asegura que el botón esté por encima del video */
}

/* Elimina el contenido del texto */
.banner-principal .col-md-12.col-lg-6:first-child {
    display: none;
}

/* Elimina el formulario */
.banner-principal .col-md-12.col-lg-6.formulario {
    display: none;
}

@media (max-width: 768px) {
    #background-video {
        display: none; /* Oculta el video en dispositivos móviles */
    }

    .banner-principal {
        background-color: black; /* Fondo de color negro para móviles */
    }
}

.boton-modal-mobile {
    position: relative;
    z-index: 1; /* Asegura que el botón esté por encima del video */
}

.white{
    color: #fff;
}

/* Elimina el contenido del texto */
.banner-principal .col-md-12.col-lg-6:first-child {
    display: none;
}

/* Elimina el formulario */
.banner-principal .col-md-12.col-lg-6.formulario {
    display: none;
}

.form-banner-principal>div{
    margin: 1.5rem 0;
}

.form-banner-principal>div>input,.form-banner-principal>div>textarea{
    width: 100%;
    border: none;
    border-bottom: 2px solid #c6d1d0;
    color: #000;
}

.form-banner-principal>div>input:focus,.form-banner-principal>div>textarea:focus{
    outline: none;
}

.form-banner-principal>div>input::placeholder,.form-banner-principal>div>textarea::placeholder{
    color: #fb8c66;
    font-weight: bold;
}

.boton-form{
    background-color: #fb8c66;
    color: #fff;
    font-weight: bold;
    text-align: center;
    font-size: 1.3rem;
    padding: 0.5rem 2rem;
    width: 50%;
    border:1px #fb8c66 solid;
    border-radius: 5px;
}

.boton-form:hover{
    background-color: #d37251;
    border:1px #d37251 solid;
    transition: 0.3s ease-in;
}

.boton-modal-mobile{
    display: none;
}

.img-form{
    position: absolute;
    right: 7.8vw;
}

.img-home-izq{
    position: absolute;
    top: -2rem;
    left: 0;
    z-index: 11;
}

.img-home-der{
    position: absolute;
    top: -1rem;
    left: 70vw;
    z-index: -2;
    height: 30px;
}

.owl-carousel{
    z-index: 10;
}

.borde-carousel{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 11;
}

.owl-dots{
    position: absolute;
    bottom: 11vw;
    left: 0;
    right: 0;
}

.img-borde-carousel{
    position: absolute;
    z-index: 11;
    bottom: 5vw;
    left: 5vw;
}

.expandio {
    background-color: #2e5551;
    padding: 6rem 8rem;
    animation: fadeIn 2s ease-in forwards; /* Asegúrate de tener esta línea */
}

.img-experiencias-top{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.titulo-experiencias h1{
    margin: 15rem 0 0 0;
    padding: 0 8rem;
    color: #2e5551;
}

.titulo-experiencias>h1 span{
    color: #fcaf93;
}

.experiencias{
    padding: 0 8rem;
    margin: 8rem 0;
}

.info-experiencias{
    padding: 0 2rem;
}

.info-experiencias img{
    margin: 2rem 0;
}

.info-experiencias h5,.info-experiencias p{
    margin: 1rem 0;
    color: #2e5551;
}

.titulo-ubicacion{
    margin: 4rem 0;
    color: #dbd273;
}

.img-der-ubicacion{
    position: absolute;
    right: 0;
    top: 0;

}

.mapa{
    padding: 0 2rem;
    margin: 4rem 0;
}

.info-ubicacion{
    padding: 0 2rem;
    margin: 4rem 0;
}

.info-ubicacion>div:nth-child(1)>img{
    margin: 0 0.5rem 4rem 0;
}

.info-ubicacion>div:nth-child(1)>h3{
    margin: 0 0 4rem 0.5rem;
    color: #ffbe6d;
}

.info-ubicacion p{
    width: 50%;
    color: #2c5350;
}

.servicios{
    background-color: #dbd273;
}

.servicios>div>div>div{
    margin: 2rem 0;
}

.servicios>div>div>div p{
    margin: 0 1rem;
}

.triple-impacto{
    text-align: center;
}

.triple-impacto p{
    width: 50%;
}

.triple-impacto p,.triple-impacto h1,.triple-impacto img{
    margin: 2rem 0;
}

.img-triple-impacto{
    position: absolute;
    left: 0;
}

.footer{
    background-color: #fafafa;
}

.telefono{
    color: #2c554f;
    font-size: 1.5rem;
    font-family: 'Whyte';
    font-weight: 900;
}

.telefono:hover{
    color: #23443f;
    text-decoration: none;
    transition: 0.3s ease-in-out;
}

.modal-content{
    height: 70vh;
}

.modal-header{
    border: none;
}

.close {
    color: #fb8c66;
    opacity: 1;
}

#form-modal>div>label{
    color: #fb8c66;
    font-weight: bold;
}

@media (max-width: 1366px){
    
    h1 {
        font-size: 2.5rem;
    }

    p {
        font-size: 1rem;
    }
    
    .nav-item {
        padding: 1rem 0rem;
    }

    .padding-nav{
        padding: 0 4rem 0 4rem;
    }

    .form-banner-principal {
        width: 70%;
        padding: 2rem 2rem;
    }

    .img-form{
        right: 5vw;
    }

}

@media (max-width: 991px){

.navbar-menu{
    padding: 0 2rem;
}    

.formulario{
    display: none!important;
}

.boton-modal-mobile{
    display: block;
}

.padding{
    padding: 0 2rem;
}    

.nav-destock{
    display: none!important;
}

.nav-logo{
    order: 2;
    justify-content: flex-end!important;
}

.menu-hamburguesa{
    order: 1;
    display: block!important;
}

.navbar-menu{
    padding: 0 2rem;
}

h1 {
    font-size: 1.5rem;
}

p {
    font-size: 0.8rem;
}

.form-banner-principal>div {
    margin: 0.5rem 0;
}

.form-banner-principal{
    width: 100%;
    padding: 1rem;
}

/* #form-modal>div>input{
    height: 45px;
} */

.boton-form {
    font-size: 1rem;
    padding: 0.5rem 2rem;
    width: 80%;
}

.img-home-izq img,.img-home-der img,.img-borde-carousel img,.img-der-ubicacion img,.img-triple-impacto img{
    width: 60%;
}

.img-home-izq{
    top: -1rem;
}

.borde-carousel{
    bottom: -1px;
}

.img-der-ubicacion{
    display: flex;
    justify-content: flex-end;
}

.img-triple-impacto{
    display: flex;
    justify-content: flex-start;
}

.expandio {
    padding: 4rem 2rem;
}    

.expandio>div>div:nth-child(1){
    order: 2;
    margin: 2rem 0;
}

.expandio>div>div:nth-child(2){
    order: 1;
}

.expandio>div>div:nth-child(2) img{
    width: 50%;
}

.titulo-experiencias h1{
    margin: 6rem 0;
    padding: 0 2rem;
}

.experiencias{
    padding: 0 8rem;
    margin: 4rem 0;
}

.img-experiencias-top{
    top: -1px;
}

.mapa,.info-ubicacion{
    align-items: center!important;
}

.mapa>img{
    width: 80%!important;
}

.info-ubicacion>div:nth-child(1){
    justify-content: center;
}

.top-servicios{
    margin-bottom: -1px;
}

.bot-servicios{
    margin-top: -1px;
}

.footer>div>div:nth-child(2){
    justify-content: flex-end!important;
}

.footer>div>div:nth-child(3){
    justify-content: center!important;
}

}

@media ( max-width: 576px){

    .nav-logo{
        max-width: 50%!important;
    }

    .menu-hamburguesa{
        max-width: 50%!important;
    }

    .experiencias{
        padding: 0 2rem;
    }

    .footer>div>div:nth-child(1),.footer>div>div:nth-child(2),.footer>div>div:nth-child(3){
        justify-content: center!important;
        margin: 1rem 0;
    }

    .img-home-der img, .img-borde-carousel img, .img-der-ubicacion img, .img-triple-impacto img{
        width: 40%;
    }

    .img-home-der {
        top: -2rem;
        right: 0;
    }

    .triple-impacto p {
        width: 80%;
    }

    .triple-impacto>img{
        width: 40%!important;
    }


}
#background-video {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .video-text {
        display: flex;
        justify-content: space-around;
        text-align: center;
        width: 100%;
        background-color: #3C544F; /* Color de fondo con opacidad */
        color: white; /* Color de texto blanco */
        padding: 10px 0;
        margin: 0; /* Eliminar margen */
        border-radius: 10px;
    }
    .video-text > div {
        flex: 1; /* Hacer que las columnas ocupen todo el ancho */
        margin: 0; /* Eliminar margen */
    }
    .video-container {
        bottom: 80px;
        z-index: -9;
    }
    .text-center {
        width: 100%;
        text-align: center;
    }
    #ubicacion{
        margin-top: 130px!important;
    }
    .mobile-overlay h3 {
        margin: 0;
    }
    .mobile-overlay h3 strong {
        display: block; /* Colocar "mismo camino." en una nueva línea */
    }
    .mobile-image {
        width: 100%;
        display: block;
        margin: 20px 0 0 0;
    }
    .mobile-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        width: 100%;
        color: white;
        z-index: 2;
        opacity: 0;
        animation: fadeIn 3s forwards; /* Añadir animación de aparición */
    }
    @keyframes fadeIn {
        to {
            opacity: 1;
        }
    }
    .mobile-button {
        position: relative;
        bottom: 70px;
        display: inline-block;
        padding: 10px 20px;
        font-size: 16px;
        color: white;
        background-color: #2B544F;
        border: none;
        border-radius: 50px;
        text-decoration: none;
        transition: background-color 0.3s;
    }
.mobile-button3 {
    position: relative;
    bottom: 0px;
    display: inline-block;
    padding: 12px 25px;
    font-size: 18px;
    color: white;
    background-color: #f0910bee;
    border: none;
    border-radius: 50px;
    text-decoration: none;
    width: 40%;
    transition: all 0.3s ease-in-out;
    text-align: center;
    font-weight: bold;
}
.mobile-button3:hover {
    background-color: #d37251;
    transform: scale(1.1);
    box-shadow: 0px 0px 15px rgba(255, 145, 11, 0.6);
}
    .mobile-button:hover {
        background-color: #ef900a6e;
        color: white;;
    }
    #videomapa{
        border-bottom-left-radius: 10px; /* Ajusta el valor según el radio deseado */
        border-bottom-right-radius: 10px;

    }

    .imgna2{
        height: 100%;
        width: 100%!important;
        border-radius: 30px;
    }
    .img-home-der{
        display: none;
    }


}
.video-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
video {
    width: 100%;
    height: auto;
}
.video-title {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 24px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

@media (min-width: 769px) {
    #ubicacion {
        background-image: url('../images/testeofondo.png');
        background-size: contain; /* Ajusta el tamaño de la imagen para cubrir todo el contenedor */
        background-position: center ; /* Centra la imagen de fondo */
        background-repeat: no-repeat; /* Evita que la imagen se repita */
        padding: 60px; /* Ajusta el padding según sea necesario */
        overflow: hidden; /* Asegura que el contenido adicional no se desborde */
    }
    #videomapa{
        width: 40%!important;
        max-height: 50%;
        border-radius: 31px;
    }
    .desktop-overlay {
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        color: white;
        z-index: 2;
        opacity: 0;
        animation: fadeIn 2s forwards; /* Añadir animación de aparición */
    }
    .desktop-overlay h3 {
        margin: 0;
    }
    .desktop-overlay h3 strong {
        display: block; /* Colocar "mismo camino." en una nueva línea */
    }
    .desktop-image {
        width: 100%;
        display: block;
        margin: 20px 0 10px 0;
    }
    .desktop-button {
        display: inline-block;
        padding: 10px 20px;
        font-size: 16px;
        color: white;
        background-color: #007bff;
        border: none;
        border-radius: 50px;
        text-decoration: none;
        transition: background-color 0.3s;
    }
    .desktop-button:hover {
        background-color: #0056b3;
    }
    .video-text {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        text-align: left;
        width: 100%;
        padding: 10px 20px;
        position: absolute;
        left: 20%;
        font-size: 1.5rem;
        top: 125%
    }
    .video-text h3{
        font-size: 3rem;
        flex-direction: column;
        justify-content: flex-start;
        text-align: left;
    }
    .video-text > div {
        margin-bottom: 10px;
    }
    .textte {
        width: 35%;
        color: white;
    }
    .textte h3{
        color: white;
    }
    .row {
        display: flex;
        align-items: center;
    }
    .imgna2{
        height: 100%;
        width: 100%!important;
    }
    .mobile-button3{
        position: relative;
        bottom: 0px;
        display: inline-block;
        padding: 10px 20px;
        font-size: 16px;
        color: white;
        background-color: #f0910bee;
        border: none;
        border-radius: 50px;
        text-decoration: none;
        width: 40%;
        transition: background-color 0.3s;
    }
    .mobile-button:hover {
        background-color: #ef900a6e;
        color: white;;
    }
}

.section-footer {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
}

.section-footer img {
    max-width: 100%;
    height: auto;
    position: relative;
    top: 10px;
}

@media (min-width: 1600px) {

    .mobile-button3{
        width: 35%;
    }

}

@media (max-width: 768px) {
    .gif-once {
        content: url('../images/videomapa.gif');
        display: block;
        animation: none; /* Desactiva cualquier animación que pueda estar aplicada */
    }
}

/* Asegúrate de que el gif no se repita */
.gif-once {
    content: url('../images/videomapa.gif');
    animation: play-once 1s 1; /* Reproduce una vez */
}

@keyframes play-once {
    from {
        visibility: visible;
    }
    to {
        visibility: visible;
    }
}