* {
    box-sizing: border-box;
    overflow-x: none;
}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
  --verde: #005357;
  --verde-oscuro: rgb(0 62 65);
  --naranja: #E84621;
  --naranja-oscuro: rgb(174 53 25);
  --gris: #D4D8DA;
  --gris-claro: #eeeeee;
  --blanco: #FBFBFB;
  --negro: #2E2D2C;
  --rounded: 0.5rem;
}

.banner-servicios {
    max-width: 100%;
    height: 40rem;
    padding: 6rem;
    background-color: var(--gris);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.banner-sustrato {
    background-image: url('../img/banner2.webp');
    background-size: cover;
    background-position: center center;
}

.banner-impermeabilizacion {
    background-image: url('../img/banner4.webp');
    background-size: cover;
    background-position: center center;
}

.banner-anticorrosion {
    background-image: url('../img/banner8.jpg');
    background-size: cover;
    background-position: center center;
}


.content-banner {
    width: 56rem;
    display: grid;
    grid-template-columns: repeat(2,50%);
    text-align: left;
}

.main-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.main-header>a {width: 100%; margin-top: 3rem;}
.main-header>h3, .main-header>h1, .main-header>p {margin: 0; padding: 0;}

.main-header>h3 {
    font-weight: 400;
}

.info-servicio {
    width: 56rem;
    margin: 3rem auto 2rem;
    display: grid;
    grid-template-columns: 45% 50%;
    gap: 5%;
}

.detalle-servicio {
    padding: 2rem 0rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.detalle-servicio>div>h3, .detalle-servicio>div>h4 {margin: 0; padding: 0;}

.detalle-servicio>div>h4 {margin-top: 4rem;}

.beneficios {
    height: fit-content;
    border-radius: var(--rounded);
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    gap: 2rem;


    background-image: url('../img/slider5.1.jpg');
    background-size: cover;
    background-position: center right;


    position: relative; 
    overflow: hidden;
    isolation: isolate;
    z-index: 0;
}

.beneficios::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.8) 100%);
    z-index: -1;
    backdrop-filter: blur(30px);
}

.beneficios-content {
    padding: 2.5rem 2.5rem 1rem;
}

.beneficios>h2, .beneficio>p {margin: 0; padding: 0;}

.beneficios>a>.btn-naranja {
    height: 3rem;
}

.detalle-beneficios {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.detalle-beneficios2 {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.beneficio2 {
    width: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.beneficio2>p {
    text-align: left;
    margin: 0;
}

.icon-beneficios2 {
    margin: auto;
    min-width: 1.15rem;
    min-height: 1.15rem;
    background-image: url('../img/check-icon.svg');
    background-color: var(--cyan2);
    border-radius: 50%;
    box-shadow: var(--cyan) 0px 0px 6px 0px;
}

.beneficio {
    display: flex;
    flex-direction: row;
    gap: 1.1rem;
}

.icon-beneficios {
    margin: auto;
    min-width: 1.75rem;
    height: 1.75rem;
    background-image: url('../img/check-icon.svg');
    background-color: var(--cyan2);
    border-radius: 50%;
    box-shadow: var(--cyan) 0px 0px 6px 0px;
}

.imgs-servicio {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rem 0rem;
}

.sustrato-img {
    height: fit-content;
    /* background-image: url('../img/img-sustrato.jpg');
    background-size: cover;
    background-position: center center; */

    background-color: transparent;
}


.imgs-servicio {
    position: relative; 
    overflow: hidden;
    isolation: isolate;
    z-index: 0;
}


.imgs-servicio::before {
    content: '';

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(10px);
}

.content-img-servicio {
    width: 56rem;
    position: relative; 
    overflow: hidden;
    isolation: isolate;
    z-index: 0;
}

.slider-container {
    margin: 0;
}

.text-img-servicio {
    width: 70%;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: auto;
    margin-bottom: 2rem;
}

.text-img-servicio>h6 {
    margin-bottom: 0px;
}

.text-img-servicio>p {margin-top: 2.5rem;}


.form-section-2 {
    background-color: var(--gris-claro);
    display: flex;
    justify-content: center;
    background-image: url('../img/slider5.1.jpg');
    background-size: cover;
    background-position: center center;
    /* backdrop-filter: ; */


    position: relative;
    isolation: isolate;
    z-index: 0;
}

.form-section-2::before {
    content: '';
    position: absolute;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    z-index: -1;
}

.form-tittles-servicio {
    isolation: isolate;
}


.form-tittles-servicio {
    padding: 5rem 0rem 3rem;
    width: 30rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.form-tittles-servicio>div>h2 {margin: 0; padding: 0;}

.form-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-container {
    position: relative;
    top: 0rem;
}

@media (max-width: 992px) {
    .banner-servicios {
    max-width: 100%;
    height: 20rem;
    padding: 3rem 0rem;
    background-color: var(--gris);
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

    .content-banner, .main-header, .info-servicio  {
        text-align: center;
    }


    .content-banner {
    width: 90%;
    display: flex;
    flex-direction: column;
}

    .main-header {
    width: 100%;
    display: flex;
    gap: 1rem;
}

    .main-header>a, .main-header>p {display: none;}
    .main-header>h3 {display: none;}
    .main-header>h1 {font-size: 1.7rem; font-weight: 700;}

    .info-servicio {
    width: 100%;
    margin: 3rem auto 0rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

    .detalle-servicio {
        margin: auto;
        width: 90%;
        padding: 0rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
}

    .detalle-servicio>div>h3 {font-weight: 700; font-size: 1.7rem;}

    .beneficios {
        width: 100%;
        border-radius: 0px;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);

        display: flex;
        flex-direction: column;
        gap: 2.5rem;
}

    .beneficios-content {
        padding: 2rem 2rem 0rem;
    }

    .detalle-beneficios {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
}

    .beneficios>h2 {font-weight: 700;}

    .beneficio {
        display: flex;
        flex-direction: column;
        justify-content: left;
        align-items: left;
    }

    .beneficio>p {
        font-size: 1rem;
    }

    .icon-beneficios {
        margin: auto;
        min-width: 1.75rem;
        height: 1.75rem;
        background-color: var(--cyan2);
}

    .imgs-servicio {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 0;
}

    
    .content-img-servicio {
        width: 100%;
        display: flex;
        flex-direction: column;

}

    .text-img-servicio {
        width: 90%;
        display: flex;
        flex-direction: column;
}

    .text-img-servicio>h6 {
        font-size: 1.5rem;
        margin-bottom: -2rem;
    }

    .text-img-servicio>p {
        margin-top: 0rem;
        margin-bottom: 5rem;
    }

    .form-section-2 {
        width: 100%;
        background-color: var(--gris-claro);
        display: flex;
        justify-content: center;
        padding: 0rem 0rem 0rem;
        background-image: url('../img/slider5.1.jpg');
        background-size: cover;
        background-position: center center;
}

    .form-tittles-servicio {
        padding-bottom: 0rem;
    }

    .form-tittles-servicio>div {width: 90%; margin: auto;}

}