.more-building-container {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    padding: 152px 88px 54px 88px;

    border-bottom: solid 1px var(--border-subtle);

}



.more-building-title {

    font-size: 48px;

    line-height: 60px;

    font-weight: var(--extraBold);

}



.more-building-banner-container {

    margin-top: 56px;

    width: 1264px;

    height: 198px;

    border-radius: 24px;

    background-image: url('/assets/Website/images/Images/Desktop/about-project-header-desktop.jpg');

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

}



.build-on-container {

    margin-top: 56px;

    width: 340px;

    height: 136px;

    display: flex;

    justify-content: flex-start;

    align-items: center;

    flex-direction: column;

    padding: 12px 44px;

    border-top: solid 1px var(--border-primary);

    border-bottom: solid 1px var(--border-primary);

}



.build-on-text {

    font-size: 20px;

    line-height: 24px;

    font-weight: var(--bold);

    color: var(--quertanary);

}



.build-on-square-meters {

    font-size: 40px;

    line-height: 48px;

    font-weight: var(--extraBold);

}



.build-on-text2 {

    margin-top: 16px;

    font-size: 20px;

    line-height: 24px;

    font-weight: var(--bold);

    color: var(--secondary);

}





.build-badges-container {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 24px;

    height: 56px;

    margin-top: 56px;

}





.build-badge {

    display: flex;

    justify-content: flex-start;

    align-items: center;

}



.icon-container-badge {

    width: 56px;

    height: 56px;

    background-color: var(--primary);

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

}



.icon-badge {

    filter: var(--filter-inverse);

}



.badge-counter {

    margin-left: 12px;

    font-size: 32px;

    line-height: 40px;

    font-weight: var(--extraBold);

    color: #393939

}



.badge-text {

    margin-left: 8px;

    font-size: 18px;

    line-height: 24px;

    font-weight: var(--semiBold);

    color: var(--tertirary);

}



.more-building-description {

    margin-top: 48px;

    max-width: 1062px;

    font-size: 16px;

    line-height: 24px;

    font-weight: var(--medium);

    text-align: center;

}







/* MATERIALS SECTION */

.technology-materials-container {

    padding: 64px 160px;

    display: flex;

    justify-content: flex-start;

    align-items: flex-start;

    flex-direction: column;

    gap: 40px;

}



.technology-materials-title {

    font-size: 48px;

    line-height: 60px;

    letter-spacing: 0.5px;

    font-weight: var(--extraBold);

}



.materials-technology-description-container {

    display: flex;

    justify-content: flex-start;

    align-items: flex-start;

    gap: 56px;

}



.description-container-technology {

    width: 494px;

    height: 312px;

    display: flex;

    justify-content: flex-start;

    align-items: flex-start;

    flex-direction: column;

    gap: 12px;

}





.images-container-materials {

    display: flex;

    justify-content: center;

    align-items: flex-start;

    gap: 8px;

}







.tech-dot {

    width: 4px;

    height: 4px;

    background-color: var(--primary);

    border-radius: 50%;

}



.tech-description-container {

    display: flex;

    justify-content: flex-start;

    align-items: flex-start;

    gap: 8px;

    position: relative; /* Needed for correct positioning */

}



.tech-description {

    font-size: 16px;

    line-height: 24px;

    font-weight: var(--medium);

    padding-left: 16px; /* Ensures space for the bullet */

    position: relative;

}



.about-project-images {

    border-radius: 32px;

}





.tech-description::before {

    content: "•"; /* Unicode bullet point */

    font-size: 24px; /* Adjust the size if needed */

    color: var(--primary); /* Your primary theme color */

    position: absolute;

    left: 0;

    top: 0;

}





.about-project-images.left{

    width: 350px;

    height: 465px;

    border-radius: 24px;

}



.about-project-images.right{

    width: 240px;

    height: 320px;

    border-radius: 24px;

}













/* TIMELINE */



/* Timeline Container */



.about-timeline{

    margin-top: 64px;

    width: 100%;

}



.time-line-image{

    width: 100%;

    height: auto;

}



.about-timeline::-webkit-scrollbar {

    display: none;

}



.about-timeline {

    -ms-overflow-style: none;

    scrollbar-width: none;

}







/* BENEFITS SECTION */







.transition-section {

    width: 100%;

    height: 110px;

    background: linear-gradient(to bottom, var(--neutral-04), var(--neutral-01));

}



.benefits-section {

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 64px 160px 64px 160px;

}





.benefits-container {

    width: 1120px;

    display: flex;

    align-items: flex-start;

    justify-content: center;

    flex-direction: column;

    gap: 24px;

}



.benefits-explain-text {

    max-width: 665px;

    font-size: 18px;

    line-height: 24px;

    color: var(--primary);

}



.benefits-photos-container {

    display: flex;

    justify-content: flex-start;

    align-items: flex-start;

    gap: 20px;

    height: 515px;

}



.double-photo {

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    align-items: flex-start;

    gap: 20px;

    height: 515px;

}



.img-container {

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    width: 300px;

    height: 300px;

    border-radius: 16px;

    padding: 18px 24px 18px 24px;

    display: flex;

    justify-content: flex-end;

    align-items: flex-start;

    flex-direction: column;

}



    .img-container.small {

        height: 195px;

    }



    .img-container.big {

        height: 515px;

    }



.benefits-img-text-container {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    gap: 12px;

}



.more-benefits-text {

    font-size: 18px;

    line-height: 20px;

    letter-spacing: 0.5px;

    font-weight: var(--regular);

}



.benefit-explained-container {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 12px;

}



.benefit-icon {

    width: 20px;

    height: 20px;

}



.benefit-text {

    font-size: 18px;

    line-height: 20px;

    letter-spacing: 0.5px;

    font-weight: var(--regular);

}





.image-benefit-title {

    font-size: 16px;

    line-height: 20px;

    font-weight: var(--semiBold);

    letter-spacing: 0px;

    color: var(--inverse);

}



.image-benefit-secondary-title {

    font-size: 16px;

    line-height: 20px;

    font-weight: var(--regular);

    letter-spacing: 0px;

    color: var(--inverse);

}









.benefits-title {

    font-size: 48px;

    line-height: 60px;

    font-weight: var(--extraBold);

    letter-spacing: 0.5px;

}



.about-title {

    font-size: 48px;

    line-height: 60px;

    letter-spacing: 1px;

    font-weight: var(--extraBold);

}









@media (width < 1320px) {



    .more-building-banner-container{

        margin-top: 56px;

        width: 1000px;

        height: 200px;

        border-radius: 24px;

        background-image: url('/assets/Website/images/Images/Tablet/about-project-header-tablet.png');

        background-position: center;

        background-repeat: no-repeat;

        background-size: cover;

    }



    .materials-technology-description-container{

        flex-direction: column;

    }



}





@media (width < 1050px) {



    .more-building-banner-container{

        margin-top: 56px;

        width: 740px;

        height: 200px;



    }







}











@media (width < 960px) {







    .benefits-section{



        padding: 64px 48px 64px 48px;

    }





    .benefits-container{

        width: 700px;



    }



    .benefits-explain-text{

        max-width: 600px;



    }



    .benefits-photos-container{



        height: 400px;

    }



    .double-photo{



        height: 400px;

    }



    .img-container{





        width: 200px;

        height: 200px;



    }



    .img-container.small{

        height: 200px;



    }



    .img-container.big{

        height: 400px;



    }













    /* MATERIALS SECTION */

    .technology-materials-container{

        padding: 64px 32px;

        display: flex;

        justify-content: flex-start;

        align-items: flex-start;

        flex-direction: column;

        gap: 40px;

    }



    .technology-materials-title{

        font-size: 48px;

        line-height: 60px;

        letter-spacing: 0.5px;

        font-weight: var(--extraBold);

    }









    .description-container-technology{

        width: 100%;

        height: 312px;

        gap: 12px;

    }













}





@media (max-width: 900px) {

    .about-timeline {

        overflow-x: auto;

        white-space: nowrap;

        scroll-snap-type: x mandatory;

        display: flex;

        justify-content: flex-start;

        -webkit-overflow-scrolling: touch;

    }



    .time-line-image {

        width: 1400px;

        height: auto;

        flex-shrink: 0;

    }

}





@media (width < 760px) {

    .more-building-banner-container{

        margin-top: 56px;

        width: 500px;

        height: 400px;

        border-radius: 24px;

        background-image: url('/assets/Website/images/Images/Mobile/about-project-header-mobile.jpg');

        background-position: center;

        background-repeat: no-repeat;

        background-size: cover;

    }



    .build-badges-container {

        display: flex;

        justify-content: center;

        align-items: center;

        flex-direction: column;

        gap: 24px;

        height: auto;

        margin-top: 56px;

    }



    .build-badge{

        width: 100%;

    }



    .more-building-container {

        display: flex;

        justify-content: center;

        align-items: center;

        flex-direction: column;

        padding: 152px 24px 54px 24px;

        border-bottom: solid 1px var(--border-subtle);

    }

}







@media (width < 700px) {





    .benefits-section{



        padding: 48px 24px 48px 24px;

        height: auto;

    }





    .benefits-container{

        width: 700px;

        height: auto;



    }



    .benefits-explain-text{

        max-width: 600px;



    }



    .benefits-photos-container{

        flex-direction: column;

        height: auto;

    }



    .double-photo{

        width: 100%;

        height: auto;

        flex-direction: row;

        justify-content: space-between;

    }



    .double-photo.text{

        width: 100%;

        height: auto;

        flex-direction: column-reverse;

        justify-content: space-between;

    }



    .img-container{





        width: 100%;

        height: auto;

        min-height: 200px;

        padding: 16px;



    }



    .image-benefit-title{

        font-size: 14px;

    }



    .img-container.small{

        height: 200px;



    }



    .img-container.big{

        height: auto !important;

        min-height: 400px;

        width: 100%;



    }



    .benefits-explain-text{

        font-size: 14px;

    }





    .about-title {

        font-size: 32px;

        line-height: 40px;

        letter-spacing: 1px;

        font-weight: var(--extraBold);

    }



}







@media (width < 660px) {



    .more-building-title {

        font-size: 32px;

        line-height: 40px;

        font-weight: var(--extraBold);

        text-align: center;

    }



    .about-project-images.left{

        width: 240px;

        height: 360px;

        border-radius: 24px;

    }



    .about-project-images.right{

        width: 180px;

        height: 280px;

        border-radius: 24px;

    }





    .technology-materials-title {

        font-size: 32px;

        line-height: 40px;



    }



    .description-container-technology {



        height: auto;



    }

}









@media (width < 550px) {



    .more-building-container{

        padding: 108px 32px;



    }

    .more-building-banner-container{

        margin-top: 56px;

        width: 350px;

        height: 274px;

    }



    .about-project-images.left{

        width: 200px;

        height: 270px;

        border-radius: 24px;

    }



    .about-project-images.right{

        width: 120px;

        height: 160px;

        border-radius: 24px;

    }



}





@media (width < 380px) {





    .build-on-container {

        margin-top: 56px;

        width: 320px;



    }



    .build-on-square-meters {

        font-size: 28px;

        line-height: 32px;

        font-weight: var(--extraBold);

    }



    .build-on-text2{

        font-size: 18px;

        line-height: 24px;

        font-weight: var(--extraBold);

    }

}





@media (width < 370px) {





    .about-project-images.left{

        width: 160px;

        height: 180px;

        border-radius: 24px;

    }



    .about-project-images.right{

        width: 120px;

        height: 140px;

        border-radius: 24px;

    }





    .more-building-banner-container{

        margin-top: 56px;

        width: 300px;

        height: 240px;



    }

}





@media (width < 340px) {





    .about-project-images.left{

        width: 150px;

        height: 180px;

        border-radius: 24px;

    }



    .about-project-images.right{

        width: 100px;

        height: 140px;

        border-radius: 24px;

    }





    .build-on-container {

        width: 300px;



    }

}