@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');


body{
    font-family: 'Montserrat', sans-serif;
    background: linear-gradient(to bottom, black 70%, white 30%) !important;

}

section{
    font-family: 'Montserrat', sans-serif;

}

/* Ajustar el título */
.h1-style {
    margin-bottom: 6rem; /* Aumenta el espacio debajo del título */
    font-size: 2rem;
    font-weight: bold;
    background: linear-gradient(to right, #0080ff, #ff8000); /* Ajusta los colores aquí */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-style{
    hyphens: auto;
}

.p-style {
    margin-left: 10rem;
    max-width: 30rem;
    text-align: justify;
}

.scroll-wrapper {
    overflow: auto; /* Habilita el desplazamiento */
    scrollbar-color: #888 transparent; /* Color de la barra y fondo transparente */
    scrollbar-width: thin; /* Cambia el ancho de la barra de desplazamiento */
}

.scroll-wrapper::-webkit-scrollbar {
    display: none; /* Oculta la barra de desplazamiento en navegadores basados en WebKit (Chrome, Safari, etc.) */
}


/* ---- CHFGLASS SECTION ---- */
#CHFGLASS {
    display: flex;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    height: 100vh;
}

/*Carrusel de imagenes*/
#backgroundCarousel {
    z-index: -1; /* Envía el carrusel al fondo */
}
.carousel-control-prev{
    z-index: 2;
}

.carousel-indicators{
    z-index: 2;
    color: white;
}

.carousel-item img {
    position: relative;
    height: 100vh; /* Asegúrate de que ocupe toda la altura */
    object-fit: cover; /* Ajusta la imagen al contenedor */
}

.carousel-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.7));
    z-index: 1;
    pointer-events: none; /* Permite que los controles del carrusel sigan funcionando */
}

#CHFGLASS .title-container{
    width: 70%;
    margin-left: 0rem;
    margin-bottom: 10rem !important;
}

#CHFGLASS h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 5rem; /* Ajusta el tamaño del texto */
    margin: 0rem; /* Elimina márgenes adicionales */
    text-align: start;
    -webkit-text-stroke: 3px white; /* Borde blanco de 2px */
    margin-left: 1rem;
}

#CHFGLASS h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 7rem !important; /* Ajusta el tamaño del texto */
    margin: 0rem; /* Elimina márgenes adicionales */
    text-align: start;
    max-width: 80% !important;
    -webkit-text-stroke: 4px white; /* Borde blanco de 2px */
}

#CHFGLASS .title-style {
    margin-left: 10rem;
    padding-right: 20rem;
    margin-top: 1rem;
    margin-bottom: 7rem;
}




/* ---- ABOUT US SECTION ---- */
#aboutUs {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
    background-size: cover;
    background-attachment: local;
    background-repeat: no-repeat;
    background-position: center;
    justify-content: center;
    margin-top: 5%;
    margin-bottom: 10%;
}


/* ---- LAST PROJECTS ---- */
#lastProjects {
    width: 100%;
    height: 100vh;
    font-family: 'Montserrat', sans-serif;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
    background-size: cover;
    background-attachment: local;
    background-repeat: no-repeat;
    background-position: center;
}

#lastProjects .card-style{
    width: 100%;
    height: 65vh;
    border-radius: 0px;
    background-image: url("media/background/img2.jpg");
    background-size: cover;
    z-index: 1;
}
#lastProjects .card-style::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* Fondo negro semitransparente */
    z-index: 1; /* Asegura que el overlay esté encima de la imagen */
}
#lastProjects .card-style .card-img-overlay {
    z-index: 3; /* Coloca el texto por encima del overlay */
}

#lastProjects .card:hover {
    -webkit-overflow-scrolling: touch;
    overflow-y: hidden;
    transform: scale(1.06); /* Aumenta el tamaño al 110% */
    transition: transform 0.3s ease; /* Suaviza la transición */
    z-index: 2; /* Asegura que el overlay esté encima de la imagen */
    opacity: 1;
}

#lastProjects .card-text{
    letter-spacing: 2px;
    z-index: 3;
}

#lastProjects .card-1 {
    background-image: url('/media/chf-glass-img/escaparates/Escaparate-Generali-0.jpg'); /* Ruta de la imagen */
    background-size: cover; /* Asegura que la imagen cubra todo el contenedor */
    background-position: center; /* Centra la imagen */
}

#lastProjects .card-2 {
    background-image: url('media/chf-glass-img/barandillas-de-cristal/Barandilla-9.jpg');
    background-size: cover;
    background-position: center;
}

#lastProjects .card-3 {
    background-image: url('/media/chf-glass-img/separaciones-y-cerramientos/Cerramiento-0.jpg');
    background-size: cover;
    background-position: center;
}

#lastProjects .card-4 {
    background-image: url('/media/chf-glass-img/cocina/Frontal-cocina-D.jpg');
    background-size: cover;
    background-position: center;
}

#lastProjects .card-5 {
    background-image: url('/media/chf-glass-img/espejos/Espejo-0.jpg');
    background-size: cover;
    background-position: center;
}

#lastProjects .card-6 {
    background-image: url('/media/chf-glass-img/mamparas/Mampara-bano-corredera-D.jpg');
    background-size: cover;
    background-position: center;
}

/* ---- OUR SERVICES ---- */
#ourServices {
    width: 100%;
    height: auto;
    font-family: 'Montserrat', sans-serif;
    background: linear-gradient(to bottom, black 80%, white 20%);
    background-size: cover;
    background-attachment: local;
    background-repeat: no-repeat;
    background-position: center;
}
#ourServices .h1-style {
    margin-bottom: 0rem; /* Aumenta el espacio debajo del título */
}
#ourServices .main-image {
    width: 50%;
    height: 40vh;
    object-fit: cover;
    border-radius: 10px;
}
#ourServices .thumbnail {
    width: 13.5rem;
    height: 20rem;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 2rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8); /* Sombra para dar profundidad */
}

#ourServices .thumbnail.selected {
    border: 2px solid blue;
}

/*-- Card Style -- */
#ourServices .card{
    width: 80%;
    background-color: white;
    border-radius: 2.5rem;
    overflow: hidden; /* Asegura que el contenido respete el borde redondeado */
    background-size: cover;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6); /* Sombra para dar profundidad */
}

#ourServices .card-body {
    margin-left: 4rem;
}

#ourServices .card-title {
    width: 95%;
    font-size: 3rem;
    font-weight: bold;
    color:black;
    text-align: start; /* Centra el texto */
    margin-top: 3.5rem; /* Espacio superior */
}

#ourServices .card-text {
    margin-top: 2rem;
}

#ourServices .horizontal-bar {
    width: 100%; /* Ocupa todo el ancho */
    height: 0.1rem; /* Altura de la barra */
    background: linear-gradient(to right, white, #868687, white); /* Degradado de colores */
    margin-top: 2rem; /* Espaciado superior */
    border-radius: 1rem;
    margin-left: 0;
}

#ourServices .miniCards-style{
    padding-left: 30rem;
}
/*-- Col Style -- */
#ourServices .col-style{
    width: 35vw;
    height: 85vh;
}

#ourServices .col-style img{
    width: 100%;
    height: 85vh;
}


/* ---- PHILOSOPHY ---- */
#philosophy{
    width: 100%;
    height: auto;
    font-family: 'Montserrat', sans-serif;
    background-color: white;
    background-size: cover;
    background-attachment: local;
    background-repeat: no-repeat;
    background-position: center;
}

#philosophy .title-style  {
    font-size: 3rem;
    color: #4E6E7B;
}

#philosophy .text-style  {
    max-width: 80%;
}

#philosophy .extra-margin{
    margin-bottom: 5rem ;
}




/* ---- RESPONSIVE ---- */

@media (max-width: 1600px) {

    body{
        background: linear-gradient(to bottom, black 60%, white 40%) !important;
    }

    #CHFGLASS h1 {
        font-family: 'Montserrat', sans-serif;
        font-size:4rem; /* Ajusta el tamaño del texto */
        margin: 0rem; /* Elimina márgenes adicionales */
        max-width: 20rem;
        text-align: start;
        -webkit-text-stroke: 4px white; /* Borde blanco de 2px */
        margin-left: 1rem;
    }
    #CHFGLASS h2 {
        font-family: 'Montserrat', sans-serif;
        font-size: 5rem !important; /* Ajusta el tamaño del texto */
        margin: 0rem; /* Elimina márgenes adicionales */
        text-align: start;
        -webkit-text-stroke: 2px white; /* Borde blanco de 2px */
    }

    /* ------ SOBRE NOTROS ------ */
    .p-style {
        max-width: 20rem;
        text-align: justify;
    }
    #aboutUs h2{
        font-size: 25px;
    }
    #aboutUs h3{
        font-size: 20px;
    }

    /*ULTIMOS PROYECTOS*/
    #lastProjects .card-text{
        font-size: 12px;
    }
    #lastProjects .card-title{
        font-size: 25px;
    }


    /* ------SERVICIOS ------ */
    #ourServices .card-title {
        width: 95%;
        font-size: 2rem;
    }
    #ourServices .card-text {
        font-size: 0.8rem;
    }
    #ourServices .btn {
        font-size: 0.8rem;
    }
    #ourServices .miniCards-style {
        padding-left: 20rem; /* Ajustar el padding para pantallas más pequeñas */
    }
    #ourServices .thumbnail {
        width: 10.5rem;
        height: 15rem;
        cursor: pointer;
        border: 2px solid transparent;
        border-radius: 2rem;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8); /* Sombra para dar profundidad */
    }

    /* ------PHYLOSOFY ------ */
    #philosophy .title-style  {
        font-size: 2rem;
    }
    #philosophy .text-style  {
        max-width: 90%;
    }
    #philosophy .imagen-responsive{
        width: 80%;
    }

}

/* Responsive para móviles */
@media (max-width: 968px) {
    body {
        width: 100%; /* Asegura que el contenido ocupe todo el ancho */
        margin: 0; /* Elimina márgenes */
        padding: 0; /* Elimina padding */
    }
    .aviso-cookies {
        flex-direction: column; /* Cambia la disposición a columna */
        text-align: center; /* Centra el texto */
    }

    .aviso-cookies .boton {
        margin: 0.5rem 0; /* Agrega espacio entre botones */
    }

    /*CHF GLASS*/
    #CHFGLASS {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }

    #CHFGLASS .title-container{
        padding: 0rem;
    }
    #CHFGLASS h2 {
        text-align: center !important;
        max-width: 100% !important;
        font-size: 1.65rem !important;
        hyphens: auto;
    }
    #CHFGLASS h1 {
        text-align: center !important;
        font-size: 2rem;
        padding-left: 0rem;
        margin-left: 0rem;
        -webkit-text-stroke: 1px white; /* Borde blanco de 2px */
    }

    #CHFGLASS p {
        text-align: center !important;
        font-size: 0.75rem;
    }

    /* El carrusel de fondo ocupará el 100% del espacio de la sección */
    #backgroundCarousel {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        /* Detrás del contenido */
    }

    /* Los elementos del carrusel (imágenes) se ajustan */
    #backgroundCarousel .carousel-item,
    #backgroundCarousel img {
        width: 100%;
        height: 100vh;
        object-fit: cover;
    }

    /* El contenido de la sección se muestra por encima del fondo */
    #CHFGLASS .container-fluid {
        position: relative;
        justify-content: center!important;
        align-items: center!important;
        z-index: 2;
    }

    /*ABOUT US*/
    #aboutUs .h1-style {
        margin-bottom: 1rem;
    }
    #aboutUs .p-style {
        max-width: 90%; /* Ajusta el ancho del texto */
        font-size: 0.8rem;
        margin-left: auto;
    }

    /*LAST PROJECTS*/
    #lastProjects .card-style {
        width: 100%;
        height: 65vh;
        border-radius: 0px;
        background-size: cover;
        z-index: 1;
    }
    #lastProjects .card-style::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3); /* Fondo negro semitransparente */
        z-index: 1; /* Asegura que el overlay esté encima de la imagen */
    }
    #lastProjects .card-style .card-img-overlay {
        z-index: 3; /* Coloca el texto por encima del overlay */
    }
    #lastProjects .card:hover {
        transform: scale(1.1); /* Aumenta el tamaño al 110% */
        transition: transform 0.3s ease; /* Suaviza la transición */
        z-index: 2; /* Asegura que el overlay esté encima de la imagen */
        opacity: 1;
    }
    #lastProjects .card-title {
        font-size: 1rem; /* Reduce el tamaño del título */
    }

    /*---------- OUR SERVICE ---------- */
    #ourServices .card {
        width: 100%; /* Asegura que las tarjetas ocupen todo el ancho */
        margin: 1rem 0; /* Agrega espacio entre tarjetas */
    }
    #ourServices .col-style {
        width: 100%; /* Asegura que las columnas ocupen todo el ancho */
        height: auto; /* Ajusta la altura automáticamente */
    }
    #ourServices .card-body {
        margin-left: 2rem;
    }
    #ourServices .card-title {
        width: 95%;
        font-size: 1.5rem;
        margin-top: 5rem;
    }

    #ourServices .card-text {
        font-size: 0.7rem;
    }

    #ourServices .col-style img{
        height: 70vh;
    }
    #ourServices .miniCards-style {
        padding-left: 0; /* Elimina el padding */
        padding-right: 0;
        justify-content: center; /* Centra las miniaturas */
        margin-top: 4rem !important;
    }
    #ourServices .thumbnail {
        width: 5rem; /* Ajusta el tamaño de las miniaturas */
        height: 6.5rem;
    }

    /* PHYLOSOPHY*/
    #philosophy .title-style {
        font-size: 1.5rem;
        text-align: center;
    }
    #philosophy .text-style {
        font-size: 0.8rem; /* Reduce el tamaño del título */
        max-width: 100%; /* Asegura que el texto ocupe todo el ancho */
        padding: 0 1rem; /* Agrega un pequeño padding */
        text-align: center;
    }
    #philosophy .imagen-responsive {
        width: 100%; /* Asegura que la imagen ocupe todo el ancho */
        height: auto; /* Ajusta la altura automáticamente */
    }
    #philosophy .img-fluid-sponsor{
        width: 80%;
    }
}