:root > * {
    --md-typeset-a-color: #006494;
}
.md-header, .md-tabs{
    background-color: #004D74 !important;
}
.md-tabs{
    background-color: #FFFFFF !important;
    color: #004D74 !important;
}
.md-nav__item .md-nav__link--active{
    color: #1B98E0 !important;
}
h2{
    margin-top: 3em !important;

}

.img-index-principal{
    margin-right: auto;
    margin-top: auto;

}


h3, h4{
    margin-top: 2,4em !important;
}

p {
    font-size: 16px;
}

.PageDescription, .page-description{
    font-size: 18px;
    font-weight: 300;
}
.home-card{
    width: 44%; float: left; margin: 0 3%;
    font-size: 16px;
    font-weight: 300
}
.home-card a{
    font-weight: 400
}
.home-slider{
    position:absolute;
    top: 10%;
    right: 0;
    z-index: 0;
}

.home-teaser{
    margin: 5% 0 30%;
    font-size: 18px;
    font-weight: 300;
    position:relative; z-index:1
}
.home-teaser-inner{
    width: 40%;
    margin-top: -30px
}
.color-grid{
    display: flex;
}
.color-grid_swatch{
    float: left;
    width: 18%;
    padding: 20px 10px;
}
.color-grid_swatch span{
    display: grid;
    font-size: small;
}
.text-white{
    color: #ffffff;
}
.icon {
    height: 28px;
    width: 28px;
    image-rendering: auto;
  }
.image {
    height: auto;
    width: auto;
    text-align: center;
}

@media only screen
    and (max-width: 900px) {

    .home-slider{
        top: 15%;
    }
    .home-teaser{
        margin: 0% 0 40%;
        font-size: 18px;
        font-weight: 300;
    }
}


@media only screen
    and (max-width: 600px) {

    .home-slider{
        position:absolute; top: 22%; z-index: 0;
    }
    .home-teaser-inner{
        width: 80%;
    }
    .color-grid_swatch{
        width: 20%;
    }
}


/* ESEC Implementation CSS */

/* Estilo para el contenedor principal donde se alojaran las tarjetas*/
.container {
    display: flex; /* Utiliza el modelo de caja flexible */
    justify-content: space-between; /* Distribuye el espacio entre los divs */
}

/* Estilo para las tarjetas dentro del contenedor */
.home-card-margin {
    width: calc(33.33% - 20px); /* Divide el ancho del contenedor en tres partes */
    margin-right: 0px; /* Margen entre los divs */
    border: 1px solid #ccc; /* Añade un borde para visualización */
    border-radius: 10px; /* Agrega bordes redondeados */
    padding: 20px 30px; /* Ajusta el espacio interno en todos los lados "top right bottom left"  */
    display: flex; /* Utiliza el modelo de caja flexible */
    flex-direction: column; /* Alinea los elementos verticalmente */
}

/* Estilo para el título (h3) dentro de las tarjetas del Home */
.home-card-margin h3 {
    margin-top: 0,5em; !important;/* Agrega un margen superior al enlace */
    display: block; /* Permite que el margen superior afecte al enlace */
    font-size: 17px; !important;/* Tamaño de letra para el h3 */

}

/* Estilo para el texto dentro de las tarjetas del Home */
.home-card-margin-text {
    font-size: 14px; /* Tamaño de fuente más pequeño para el párrafo */
}

/* Estilo para el enlace "Conozca más" dentro de los elementos .home-card-margin */
.home-card-margin a {
    margin-top: 25px; /* Agrega un margen superior al enlace */
    margin-bottom: 25px; /* Agrega un margen inferior al enlace */
    display: block; /* Permite que el margen superior afecte al enlace */
    font-size: 14px; /* Tamaño de fuente más pequeño para el texto */
}

/* Separación entre contenedores aplicados al Responsive*/
@media only screen and (max-width: 600px) {
    .divider {
        display: none; /* Oculta la división en dispositivos móviles */
    }
}

/* Responsive Adicional */
@media (max-width: 770px) {
    .container {
        display: flex; /* Utiliza el modelo de caja flexible */
        flex-wrap: wrap; /* Permite que los elementos se ajusten a diferentes tamaños de pantalla */
        justify-content: center; /* Centra los elementos en pantallas más pequeñas */
        padding: 0px; /* Añade un espacio interno */
    }
    .home-card-margin {
        width: calc(100% - 5px); /* En pantallas más pequeñas, ocupa el ancho completo */
        margin-right: 0; /* Elimina el margen entre los divs */
        margin-bottom: 20px; /* Añade un espacio entre las tarjetas */
    }
}

@media (min-width: 771px) {
    .home-card-margin {
        margin-bottom: 0; /* Elimina el espacio entre las tarjetas */
        margin-right: 4px; /* Elimina el margen entre los divs */
    }
}