/* ----------------------------------------
Styles for products 
---------------------------------------- */
/* @import url('https://fonts.googleapis.com/css2?family=Amaranth:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Zain:wght@200;300;400;700;800;900&display=swap'); */


@font-face {
    font-family: 'Amaranth';
    src: url('../fonts/Amaranth/Amaranth-Bold.ttf') format('truetype');
    /* Agrega más variantes (como bold o italic) si las tienes */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Roboto", sans-serif;    
    src: url('../fonts/Roboto/Roboto-Regular.ttf') format('truetype');
    /* Otros formatos (woff, woff2) también pueden ser necesarios para una mejor compatibilidad */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Amaranth", sans-serif;
    src: url('../fonts/Zain/Zain-Bold.ttf') format('truetype');
    /* Otros formatos (woff, woff2) también pueden ser necesarios para una mejor compatibilidad */
    font-weight: normal;
    font-style: normal;
}
/* Estilos para el contenedor principal */
.section-banners {
    margin: 100px 0 30px; /* Ajusta los márgenes según tus necesidades */
    position: relative; /* Importante para posicionar la máscara */
    max-height: 500px;
    overflow: hidden;
}

/* Estilos para la imagen de fondo */
.section-banners img {
    width: 100%;
    height: 500px; /* Ajusta la altura automáticamente según el ancho */
    display: block; /* Elimina el espacio extra debajo de la imagen */
}

/* Estilos para la máscara */
.section-banners .mask {
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 50%; /* Centra verticalmente */
    left: 50%; /* Centra horizontalmente */
    transform: translate(-50%, -50%); /* Centra exactamente */
    padding: 20px; /* Espacio interno para el contenido */
    width: 100%; /* Ajusta el ancho según tus necesidades */
    height: 100%;
    text-align: center; /* Centra el texto horizontalmente */
}

.section-banners h1{
    font-family: "Amaranth", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 6rem
  }
/* Estilos para el texto dentro de la máscara */
.section-banners .mask .text-white {
    /* Ajusta los estilos de fuente, tamaño, etc., según tus preferencias */
}

/* Estilos para el botón */
.section-banners .mask .btn {
    /* Ajusta los estilos del botón según tus preferencias */
}

.section-banners .mask .btn:hover{
    background-color: #9ac94d;
}

.section-banners .mask-c {   
    position: absolute;
    top: 50%; /* Centra verticalmente */
    left: 50%; /* Centra horizontalmente */
    transform: translate(-50%, -50%); /* Centra exactamente */
    padding: 20px; /* Espacio interno para el contenido */
    width: 100%; /* Ajusta el ancho según tus necesidades */
    height: 100%;
    text-align: center; /* Centra el texto horizontalmente */
}
/* ----------------------------------------
Nosotros
---------------------------------------- */
.section-about-us{
    background-color: white;
     padding-bottom: 50px;
}
.section-about-us-2{
    background: #f3f5fa;
    padding: 50px;
}

.section-about-us h1, .section-about-us-2 h1{
    font-size: 1.0rem;
    line-height: 3rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 600;
    color: #5b627d;
    font-family: "LL Circular",sans-serif;
    padding-bottom: 20px;
}
  
.section-about-us h2, .section-about-us-2 h2{
    font-size: 1.8rem;
    font-family: "Roboto", sans-serif; 
    color: #232938;
}

.section-about-us p, .section-about-us-2 p{
    font-family: "LL Circular",sans-serif;
    font-size: 16px;
    white-space: pre-line;
    color: #5b627d;

}

.sec-rute{
    margin-top: 140px;
}

/* ----------------------------------------
Info producto
---------------------------------------- */
/* ----------------------------------------
Info producto
---------------------------------------- */
/* Estilos para el contenedor principal */
.sec-infoproduct {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 50px;
}

/* Estilos para la imagen de fondo */
.sec-infoproduct img {
    width: 100%;
    height: auto;
    display: block;
}

/* Estilos para el texto */
.sec-infoproduct .title {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 20px;
    max-width: 80%;
    border-radius: 5px; /* Opcional, para bordes redondeados */
}


/* Estilos para .info */
.info {
    position: absolute;
    bottom: 50px;
}

.info .info-item{
    margin-bottom: 50px;
}

.info .info-item p{
    margin-top: 10px
}





/* ----------------------------------------
Estilos para el menú en dispositivos móviles
---------------------------------------- */
@media (max-width: 768px) {
    .section-banners img {
    height: 300px; 
    }
    .section-banners h1{
        font-weight: 500;
        font-size: 2rem
    }
    .section-banners h4{
        font-weight: 400;
        font-size: 1.5rem
    }
}