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

/* -------------------------------------------- common class ----------------------------------------------- */
.section_padding {
    padding: 150px 0;
}


/* --------------------------- commmon element --------------------------------- */
ul{
    list-style: none;
}
a{
    text-decoration: none;
    color: white;
    color: #C9C9C9;
}


h1 {
    font-size: 170px;
    position: absolute;
    bottom: -20px;
    text-align: end;
    color: #e7e6e6;
    font-family: "Poppins", sans-serif;
}

h1::before {
    content: "";
    height: 2px;
    width: 100px;
    display: flex;
    position: absolute;
    bottom: 25%;
    background-color: lightgrey;

}


/* ------------------------------------------- banner --------------------------------------------------------*/
.banner {
    height: 100vh;
    background-image: url('../images/Mask\ group.png');
    background-position: right;
    background-repeat: no-repeat;
    position: relative;
}

.banner p {
    font-size: 16px;
    font-family: "Lato", sans-serif;
    color: #898989;
    position: absolute;
    top: 260px;
}

.banner span {
    font-size: 16px;
    font-family: "Lato", sans-serif;
    color: #898989;
    position: absolute;
    right: -15px;
    bottom: 10px;
}

/* ------------------------------------------ brand-story ----------------------------------------------------- */
.brand_story>span {
    font-family: "Poppins", sans-serif;
    font-size: 32px;
}

.brand_story p {
    font-family: "Poppins", sans-serif;
    font-size: 64px;
    text-align: center;
    justify-content: center;
}

.grey_text {
    color: #5F5F5F;
}

/* ---------------------------------------------- mission ----------------------------------------------------- */
.mission {
    background-image: url("../images/img2.png");
    height: 100vh;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.mission_content p {
    color: #A5A5A5;
    font-size: 20px;
    font-family: "Lato", sans-serif;
    display: inline-block;
}

/* ---------------------------------------------- sustainability ------------------------------------------------*/
.sustainability h2 {
    display: inline-block;
    font-family: "Poppins", sans-serif;
    font-size: 120px;
    font-weight: 400;
    color: #C9C9C9;
    margin-bottom: 40px;
    
}

.right::before {
    content: "";
    height: 2px;
    width: 400px;
    display: flex;
    background-color: lightgrey;
    position: absolute;
    top: 4.5%;
    right: 45%;
}
.eco_castelli{
    position: relative;
}


/* -------------------------------------- gallery ---------------------------------------------------- */
.text p{
    color: #A5A5A5;
    font-size: 20px;
    font-family: "Lato", sans-serif;
}

.text a{
    color: #A5A5A5;
    font-size: 20px;
    font-family: "Lato", sans-serif;
    

}
.text a i{
    transform: rotate(-40deg);
    margin-left: 5px;
}
.text a::after{
    content: "";
    height: 2px;
    width: 94px;
    display: flex;
    background-color: lightgrey;
    margin-top: 5px;
}
.gallery{
    position: relative;
}
.gallery h2{
    display: inline-block;
    font-family: "Poppins", sans-serif;
    font-size: 120px;
    font-weight: 400;
    
    margin-bottom: 40px;
    
}

.gallery .right::before {
    content: "";
    height: 2px;
    width: 400px;
    display: flex;
    background-color: lightgrey;
    position: absolute;
    top: 46%;
    right: 40%;
}

/* ------------------------------------------------ footer ------------------------------------------------- */
.footer_left a i{
    transform: rotate(-40deg);
    margin-left: 63%;

    align-self: self-end;
}
.footer_left a::after{
    content: "";
    height: 2px;
    width: 500px;
    display: flex;
    background-color: lightgrey;
    margin-top: 5px;
}
footer h3{
    font-size: 220px;
    font-family: "Poppins", sans-serif;
    font-weight: lighter;
    letter-spacing: 28px;
}
/* ======================== Responsive Styles ============================ */
@media (max-width: 1200px) {
    h1 {
        font-size: 120px;
    }

    .sustainability h2,
    .gallery h2 {
        font-size: 80px;
    }

    footer h3 {
        font-size: 150px;
    }

    .footer_left a::after {
        width: 300px;
    }

    .gallery .right::before,
    .right::before {
        width: 200px;
        right: 30%;
    }
}

@media (max-width: 992px) {
    .banner {
        background-position: center;
        text-align: center;
    }

    .banner h1 {
        position: static;
        font-size: 100px;
        margin-top: 20px;
    }

    .banner p,
    .banner span {
        position: static;
        text-align: center;
        margin: 10px auto;
    }

    .brand_story p {
        font-size: 40px;
        width: 100%;
    }

    .mission {
        height: auto;
        padding: 100px 0;
    }

    .mission_content p {
        width: 90%;
    }

    .sustainability,
    .gallery {
        flex-direction: column;
        text-align: center;
    }

    .sustainability h2,
    .gallery h2 {
        font-size: 60px;
    }

    .sustainability hr,
    .gallery hr {
        display: none;
    }

    .footer_right {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer_right ul {
        padding: 0;
    }

    .footer_left p {
        width: 100%;
    }

    footer h3 {
        font-size: 100px;
        letter-spacing: 10px;
    }

    .foot-end {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
}

@media (max-width: 768px) {
    .section_padding {
        padding: 80px 0;
    }

    .gallery .right::before,
    .right::before {
        display: none;
    }

    .footer_left a::after {
        width: 200px;
    }

    h1 {
        font-size: 80px;
    }

    .brand_story span {
        font-size: 24px;
    }

    .brand_story p {
        font-size: 30px;
    }
}

@media (max-width: 576px) {
    h1 {
        font-size: 60px;
    }

    .banner {
        height: auto;
        padding: 50px 0;
    }

    .sustainability h2,
    .gallery h2 {
        font-size: 40px;
    }

    footer h3 {
        font-size: 70px;
        letter-spacing: 5px;
    }

    .footer_left a i {
        margin-left: 10px;
    }

    .footer_left a::after {
        width: 150px;
    }

    .text a::after {
        width: 60px;
    }

    .gallery img,
    .sustainability img {
        width: 100%;
        height: auto;
    }

    .text p,
    .text a {
        font-size: 16px;
    }
}