body {
    overflow-x: hidden;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif !important;
}

.header {    
    padding: 0 !important;
    color: white;
    /*font-family: Verdana, Geneva, Tahoma, sans-serif, 'Times New Roman', Times, serif;*/
    width: 100% !important;
    background: url('../imagenes/moksha-fondo-principal.jpg') no-repeat center center fixed;
    height: 70vh;  
    background-size: cover;
    font-size: 16px;
}

@media (max-width: 768px) {
    .header {
        height: auto; /* En móviles, la altura será automática */
        padding-top: 20px; /* Puedes ajustar el padding si es necesario */
        padding-bottom: 60px;
    }
}

.header-sobre-nosotros {    
    padding: 0 !important;
    color: white;
    /*font-family: Verdana, Geneva, Tahoma, sans-serif, 'Times New Roman', Times, serif;*/
    width: 100% !important;
    background-color: #383634 !important;
    height: 40vh;  
    background-size: cover;
    font-size: 16px;
}

@media (max-width: 768px) {
    .header-sobre-nosotros {
        height: auto; /* En móviles, la altura será automática */
        padding-top: 20px; /* Puedes ajustar el padding si es necesario */
        padding-bottom: 60px;
    }
}

.header-servicios {    
    padding: 0 !important;
    color: white;
    /*font-family: Verdana, Geneva, Tahoma, sans-serif, 'Times New Roman', Times, serif;*/
    width: 100% !important;
    background-color: #81B29A !important;
    height: 40vh;  
    background-size: cover;
    font-size: 16px;
}

@media (max-width: 768px) {
    .header-servicios {
        height: auto; /* En móviles, la altura será automática */
        padding-top: 20px; /* Puedes ajustar el padding si es necesario */
        padding-bottom: 60px;
    }
}

.header-contactos {    
    padding: 0 !important;
    color: white;
    /*font-family: Verdana, Geneva, Tahoma, sans-serif, 'Times New Roman', Times, serif;*/
    width: 100% !important;
    background-color: #383634 !important;
    height: 40vh;  
    background-size: cover;
    font-size: 16px;
}

@media (max-width: 768px) {
    .header-contactos {
        height: auto; /* En móviles, la altura será automática */
        padding-top: 20px; /* Puedes ajustar el padding si es necesario */
        padding-bottom: 60px;
    }
}

.encabezado-derecha {
    padding-right: 40px !important;
}

i {
    font-size: 24px !important;
}

.bi-telephone-fill {
    font-size: 16px !important;
}

.titulo-banner {
    color: white;
    /*font-family: 'Poppins', sans-serif;*/
    /*font-size: 40px !important;*/
    margin-top: 10% !important;
}

.titulo-banner-internas {
    color: white;
    /*font-family: 'Poppins', sans-serif;*/
    /*font-size: 40px !important;*/
    margin-top: 6% !important;
}

.titulo-primario {
    padding-top: 80px;
    padding-left: 4px;
    padding-right: 4px;
    padding-bottom: 40px;
}

.titulo-secundario {
    padding-top: 50px;
    padding-left: 4px;
    padding-right: 4px;
    padding-bottom: 80px;
}

.logo-custom-padding {
    padding-top: 10px;
    padding-bottom: 10px;
}

.agendar a {    
    color: lightgray !important; /* Azul */
    text-decoration: none; /* Sin subrayado */
    }

    /* Color cuando el enlace ha sido visitado */
    a:visited {
    color: lightgray !important;
    }

    /* Color cuando el mouse pasa sobre el enlace */
    a:hover {
    color: #25d366 !important; /* Rojo */
    text-decoration: none; /* Subrayado */
    }

    /* Color cuando el enlace está activo (presionado) */
    a:active {
    color: #25d366 !important; /* Verde */
    }

.agendar {
    font-size: 18px !important;
}

.galeria-fotos {
    width: auto;
    height: 300px !important;
}

.separador {
    padding-top: 100px;
    padding-bottom: 100px;
}

.img-container img {
    height: 340px !important; /* La imagen tomará el 100% de la altura del contenedor */
    width: auto !important; /* El ancho se ajustará automáticamente según la proporción de la imagen */
    object-fit: contain; /* La imagen se ajustará dentro del contenedor sin recortarse ni distorsionarse */
    padding: 10px;
}

.suscribite-img2 {    
    /*width: 100% !important;*/
    object-fit: contain;    
    background: #fff0 url(../imagenes/moksha-suscribite.png) no-repeat scroll center top;
    padding: 0px !important;    
}

.suscribite-img {
    min-width: 100px;
    min-height: 100px;
    /*padding: 0 0 0 0;*/
    border: 0 none #000;
    -moz-border-radius: 0 0 0 0;
    -webkit-border-radius: 0 0 0 0;
    border-radius: 0 0 0 0;
    background: #fff0 url(../imagenes/moksha-suscribite.png) repeat scroll center top;
    background-size: cover;
    opacity: 1;
    justify-items: stretch;
    align-items: flex-start;
    justify-content: center;
    align-content: flex-start;
    flex-wrap: nowrap;
    text-shadow: none;
    box-shadow: none;
    padding-top: -100px !important;
}

@media (max-width: 768px) {
    .suscribite-img {
        min-width: 100%;
        min-height: 400px;
        /*padding: 0 0 0 0;*/
        border: 0 none #000;
        -moz-border-radius: 0 0 0 0;
        -webkit-border-radius: 0 0 0 0;
        border-radius: 0 0 0 0;
        background: #fff0 url(../imagenes/moksha-suscribite.png) repeat scroll center top;
        background-size: cover;
        opacity: 1;
        justify-items: stretch;
        align-items: flex-start;
        justify-content: center;
        align-content: flex-start;
        flex-wrap: nowrap;
        text-shadow: none;
        box-shadow: none;
        padding-top: -100px !important;
    }
}

.suscribite-form {
    background-color: #383634;
    padding: 100px 100px 100px 100px !important;
}

.footer {
    background-color: #B2A59C;
    padding: 40px;
    font-size: 20px;
}

.footer-titulo {
    color: #242424;
    font-size: 22px;
}

.experiencia-img {
    min-width: 100px;
    min-height: 500px;
    /*padding: 0 0 0 0;*/
    border: 0 none #000;
    -moz-border-radius: 0 0 0 0;
    -webkit-border-radius: 0 0 0 0;
    border-radius: 0 0 0 0;
    background: #fff0 url(../imagenes/experiencia.jpeg) repeat scroll center center;
    background-size: cover;
    opacity: 1;
    justify-items: stretch;
    align-items: flex-start;
    justify-content: center;
    align-content: flex-start;
    flex-wrap: nowrap;
    text-shadow: none;
    box-shadow: none;
}

.bienestar-img {
    min-width: 100px;
    min-height: 500px;
    /*padding: 0 0 0 0;*/
    border: 0 none #000;
    -moz-border-radius: 0 0 0 0;
    -webkit-border-radius: 0 0 0 0;
    border-radius: 0 0 0 0;
    background: #fff0 url(../imagenes/bienestar.png) repeat scroll center center;
    background-size: cover;
    opacity: 1;
    justify-items: stretch;
    align-items: flex-start;
    justify-content: center;
    align-content: flex-start;
    flex-wrap: nowrap;
    text-shadow: none;
    box-shadow: none;
}

/* Estilo para el enlace en su estado normal */
.redes {
    color: #ffffff !important; /* Color normal */
    text-decoration: none !important; /* Eliminar subrayado */
    /*transition: color 0.3s !important; /* Transición suave para el color */
}

/* Estilo para el enlace cuando ha sido visitado */
.redes:visited {
    color: #ffffff !important; /* Color cuando el enlace ha sido visitado */
}

/* Estilo para el enlace cuando el usuario pasa el cursor sobre él (hover) */
.redes:hover {
    color: #ff6347 !important; /* Color al pasar el cursor (hover) */
}

/* Estilo para el enlace cuando está activo (cuando se hace clic) */
.redes:active {
    color: #000000 !important; /* Color cuando se hace clic en el enlace */
}