/*HERO SECTION*/









.hero-container {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    margin-top: 88px;

}



.landing-container {

    margin: 48px 88px 0px 88px;

    width: 1264px;

    height: 560px;

    border-radius: 24px;

    background-image: url('../images/Images/Desktop/hero-image-desktop.jpg');

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    z-index: 1;

}





.landing-left {

    margin-top: 80px;

    margin-left: 64px;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-items: flex-start;

    gap: 16px;

}





.landing-title {

    font-size: 56px;

    line-height: 60px;

    letter-spacing: 0.5px;

    font-weight: var(--bold);

    color: var(--white);

}



.landing-secondary-title {

    font-size: 18px;

    line-height: 24px;

    letter-spacing: 0px;

    font-weight: var(--regular);

    color: var(--white);

}







.landing-right {

    margin-top: 40px;

    margin-right: 40px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    align-items: flex-end;

}



.question-mark-container {

    width: 48px;

    height: 48px;

    border-radius: 50%;

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

    display: flex;

    justify-content: center;

    align-items: center;

    background-color: rgba(255, 255, 255, 0.4);

}





.question {

    filter: var(--filter-inverse);

}





.question-mark-container:is(:hover, :focus-visible, :focus-within) .question-info-container {

    display: flex;

}



.question-info-container {

    width: 260px;

    height: 128px;

    background-color: rgba(255, 255, 255, 0.4);

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

    border-radius: 8px;

    margin-top: 32px;

    padding: 16px;

    display: none;

    flex-direction: column;

    justify-content: flex-start;

    align-items: flex-start;

    gap: 16px;

}



.single-question-info {

    width: 100%;

    display: flex;

    justify-content: flex-start;

    align-items: flex-start;

    gap: 20px;

}





.single-question-text {

    font-size: 14px;

    line-height: 20px;

    font-weight: var(--medium);

    color: var(--white);

}









/* FILTERS_LANDING_PAGE */









.hero-filters {

    margin-top: -126px;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-items: flex-start;

    z-index: 10;

}





.filters-container {

    width: 1056px;

    height: 184px;

    border-radius: 16px;

    border-top-left-radius: 0px;

    background-color: var(--neutral-01);

    box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.2);

}



.type-filter-buttons-container {

    display: flex;

}



.type-filter-buton {

    width: 248px;

    height: 48px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    background-color: var(--neutral-19);

    text-decoration: none;

}



    .type-filter-buton.left {

        border-top-left-radius: 16px;

    }



    .type-filter-buton.right {

        border-top-right-radius: 16px;

    }



    .type-filter-buton:is(:hover, :focus-visible) {

        cursor: pointer;

    }



    .type-filter-buton.active {

        background-color: var(--neutral-01);

    }



.filter-icon {

    filter: var(--filter-inverse);

}



.filter-type-btn-text {

    font-size: 14px;

    line-height: 20px;

    font-weight: var(--medium);

    color: var(--inverse);

}





.type-filter-buton.active .filter-icon {

    filter: var(--filter-primary);

}



.type-filter-buton.active .filter-type-btn-text {

    color: var(--neutral-20);

}







/* SLIDER FILTERS START */



.forward-mobile{

    display: none;

}





/* General Container */

.range-slider-container {

    display: flex;

    justify-content: flex-start;

    align-items: flex-start;

    gap: 32px;

    font-family: Arial, sans-serif;

}



.slider-group {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}



.filter-title {

    font-size: 14px;

    font-weight: var(--medium);

    line-height: 22px;

    color: var(--tertirary);

}



.range-slider {

    position: relative;

    width: 230px;

    height: 4px;

    background: var(--border-secondary);

    border-radius: 2px;

    margin-top: 24px;

}



/* Styling both sliders */

input[type="range"] {

    -webkit-appearance: none;

    appearance: none;

    position: absolute;

    width: 100%;

    height: 4px;

    background: none;

    pointer-events: none;

}



    /* Adjust thumb position */

    input[type="range"]::-webkit-slider-thumb {

        -webkit-appearance: none;

        appearance: none;

        width: 16px;

        height: 16px;

        background: var(--icons-primary);

        border: solid 1px var(--neutral-06);

        border-radius: 50%;

        pointer-events: auto;

        cursor: pointer;

        transform: translateY(0);

        position: relative;

        z-index: 1;

    }





/* Values Display */

.slider-values {

    margin-top: 16px;

    display: flex;

    justify-content: space-between;

    width: 100%;

    font-size: 12px;

    font-weight: bold;

}



.slider-value {

    font-size: 14px;

    font-weight: var(--semiBold);

    line-height: 20px;

    color: var(--primary);

}



/* SLIDER FILTERS END */







.filters-container {

    display: flex;

    justify-content: flex-start;

    align-items: flex-start;

    gap: 32px;

    padding: 48px 40px 48px 40px;

}





.rooms-filter-cotainer {

    height: auto;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-items: flex-start;

    gap: 12px;

}





.rooms-counter-container {

    display: flex;

    justify-content: center;

    align-items: flex-start;

    gap: 12px;

}



.rooms-counter {

    width: 36px;

    height: 36px;

    border: solid 1px var(--border-secondary);

    border-radius: 8px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 14px;

    line-height: 20px;

    color: var(--black);

    font-weight: var(--regular);

}





    .rooms-counter.active {

        background-color: var(--neutral-19);

        color: var(--inverse);

    }





    .rooms-counter:is(:hover, :focus-visible) {

        cursor: pointer;

    }





.show-available-only {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    align-self: center;

}



.available-checkbox {

    width: 32px;

    height: 32px;

    border-radius: 50%;

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

    display: flex;

    justify-content: center;

    align-items: center;

}





    .available-checkbox:is(:hover, :focus-visible) {

        cursor: pointer;

    }



    .available-checkbox.active .checkmark-icon {

        display: block;

    }



.checkmark-icon {

    display: none;

}



.available-text {

    font-size: 14px;

    line-height: 16px;

    font-weight: var(--medium);

    letter-spacing: 1px;

    color: #656565;

}







.label-apartment-counter {

    font-size: 14px;

    line-height: 20px;

    font-weight: var(--medium);

    color: var(--tertirary);

}





.results-container {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    align-self: end;

    margin-right: 40px;

    margin-top: -46px

}





/* END FILTERS_LANDING_PAGE */





/* MAP START */



.map-container {

    width: 100%;

    height: 1000px;

    margin-top: -300px;

    background-image: url('../images/Images/Desktop/map-desktop.jpg');

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

    z-index: 0;

}





.find-location-button-container {

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 16px 18px 16px 18px;

    background-color: var(--neutral-01);

    border-radius: 18px;

    box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.2);

    position: absolute;

    z-index: 1000;

}



.find-location-link {

    text-decoration: none;

}





/* MAP END */



/*HERO SECTION END*/









/*APARTMENT CARDS SECTION*/



.apratments-container {

    display: flex;

    justify-content: flex-start;

    align-items: center;

    flex-direction: column;

    margin-top: -300px;

    z-index: 10;

}



.apartments-title {

    font-size: 40px;

    line-height: 48px;

    font-weight: var(--extraBold);

    z-index: 10;

}



.apartments-secondary-title {

    margin-top: 12px;

    font-size: 24px;

    line-height: 32px;

    letter-spacing: 0.5px;

    font-weight: var(--semiBold);

    color: var(--tertirary);

    z-index: 10;

}



.apartment-cards-container {

    margin-top: 32px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 32px;

    z-index: 10;

}



.apartment-card {

    width: 320px;

    height: 470px;

    background-color: #000000;

    border-radius: 16px;

    /* Background image */

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.2);

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-items: center;

    padding: 24px;

    /* Positioning for pseudo-element */

    position: relative;

    overflow: hidden; /* Ensure the pseudo-element stays within the card */

}



    .apartment-card::before {

        content: '';

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));

        opacity: 0.7;

        z-index: 1;

        pointer-events: none;

    }





    .apartment-card > * {

        position: relative;

        z-index: 2;

    }







    /* Hover effect */

    .apartment-card:hover::before {

        position: absolute;

        left: 0;

        width: 100%;

        height: 100%;

        opacity: 1;

        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 1, 1, 1));

        pointer-events: none; /* Ensure it doesn�t interfere with interactions */





        transition: top 0.7s ease-in, opacity 0.3s ease;

    }





    .apartment-card:hover .apartment-info-container {

        display: none;

    }



    .apartment-card:hover .view-apartments-btn {

        display: flex;

    }



.view-apartments-btn {

    display: none;

    padding: 14px;

    margin-top: 140px;

}





















.price-container {

    margin-left: auto;

    align-self: flex-start;

    justify-self: end;

    width: 144px;

    height: 52px;

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

    border-radius: 26px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    background-color: rgba(255, 255, 255, 0.4);

    font-size: 12px;

    line-height: 16px;

    letter-spacing: 0.5px;

    color: var(--inverse);

    font-weight: var(--medium);

}





.starting-price {

    font-size: 14px;

    line-height: 16px;

    letter-spacing: 0.5px;

    color: var(--white);

    font-weight: var(--bold);

}



.apartment-info-container {

    width: 100%;

    margin-top: auto;

    display: block;

}



.apartments-type-title {

    font-size: 18px;

    line-height: 24px;

    font-weight: var(--bold);

    color: var(--inverse);

}



.apartments-size-range {

    font-size: 16px;

    line-height: 16px;

    letter-spacing: 0.5px;

    color: var(--neutral-06);

    width: 100%;

    margin-top: 12px;

}



.available-apartments-btn {

    margin-top: 40px;

    margin-bottom: 64px;

}







/* ABOUT SECTION */









.about-section {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

}





.about-container {

    margin-top: 64px;

    width: 1120px;

    max-width: 1120px;

    display: flex;

    justify-content: flex-start;

    align-items: flex-start;

    flex-direction: column;

    gap: 40px;

}





.about-title-container {

    display: flex;

    justify-content: flex-start;

    align-items: center;

    gap: 48px;

}





.about-title {

    font-size: 48px;

    line-height: 60px;

    letter-spacing: 1px;

    font-weight: var(--extraBold);

}



.about-img {

    width: 240px;

    height: 320px;

    border-radius: 20px;

}





.about-info-container {

    display: flex;

    justify-content: flex-start;

    align-items: flex-start;

    gap: 200px;

}



.about-info-text {

    font-size: 18px;

    line-height: 24px;

    color: var(--primary);

    font-weight: var(--medium);

}



.about-information {

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-items: flex-start;

    gap: 24px;

}





.about-info-widgets {

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-items: flex-start;

    gap: 24px;

}





.about-info-widget {

    display: flex;

    justify-content: flex-start;

    align-items: center;

    position: relative;

}



.widget-icon-container {

    width: 56px;

    height: 56px;

    border-radius: 50%;

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

    display: flex;

    justify-content: center;

    align-items: center;

}



.about-widget-counter {

    margin-left: 12px;

    font-size: 32px;

    line-height: 40px;

    font-weight: var(--extraBold);

    color: var(--primary)

}



.about-widget-text {

    margin-left: 8px;

    font-size: 18px;

    line-height: 24px;

    color: var(--tertirary);

    font-weight: var(--semiBold);

}



.look-more-about {

    margin-left: 8px;

    font-size: 18px;

    line-height: 24px;

    color: var(--primary);

    font-weight: var(--semiBold);

    display: none;

}





.about-info-widget:is(:hover, :focus-visible) {

    cursor: pointer;

    transition: 0.7s ease-in;

}





    .about-info-widget:is(:hover, :focus-visible) .widget-icon-container {

        background-color: var(--primary);

        border: none;

    }





        .about-info-widget:is(:hover, :focus-visible) .widget-icon-container .widget-icon-about {

            filter: var(--filter-inverse);

        }



    .about-info-widget:is(:hover, :focus-visible) .look-more-about {

        display: block;

    }





    .about-info-widget:is(:hover, :focus-visible) .about-widget-text {

        color: var(--primary);

    }







    .about-info-widget:is(:hover, :focus-visible)::after {

        content: "";

        position: absolute;

        bottom: -8px;

        left: 0;

        width: 100%;

        height: 2px;

        background-color: var(--primary);

    }



    .about-info-widget:is(:hover, :focus-visible)::before {

        content: "";

        position: absolute;

        bottom: -14px;

        right: -8px;

        width: 0;

        height: 0;

        border-top: 7px solid transparent;

        border-bottom: 7px solid transparent;

        border-left: 14px solid var(--primary);

    }













/* 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);

}





/* CONTACT SECTION */







.contact-section {

    height: 744px;

    width: 100%;

    background-color: var(--white);

}



.contact-background {

    width: 100%;

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

}



.contact-section-left {

    width: 100%;

    height: 100%;

}



.contact-section-right {

    min-width: 696px !important;

    height: 744px;

    background-image: url('../images/Images/Desktop/building-cutout-contact-us-desktop.jpg');

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

    border-top-left-radius: 24px;

}



.content-front-container {

    position: relative;

    margin-top: -800px;

    z-index: 100;

    height: 800px;

    padding: 56px 52px 80px 52px;

    display: flex;

    justify-content: flex-start;

    align-items: flex-start;

}





.contact-us-form-container {

    width: 1110px;

    height: 716px;

    background-color: var(--white);

    border-radius: 24px;

    /* box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);  */

    padding: 24px 0px;

    display: flex;

    justify-content: flex-start;

    align-items: flex-start;

}





.contact-us-business-container {

    width: 424px;

    height: 560px;

    margin-left: 88px;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-items: flex-start;

    gap: 32px;

}



.contact-title {

    font-size: 48px;

    line-height: 60px;

    letter-spacing: 0.5px;

    font-weight: var(--extraBold);

    color: var(--primary);

}





.contect-secondary-title {

    font-size: 18px;

    line-height: 24px;

    font-weight: var(--medium);

    color: var(--primary);

    letter-spacing: 0px;

}





.contact-info-container {

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-items: flex-start;

    gap: 24px;

}



.contact-single-info-container {

    display: flex;

    justify-content: flex-start;

    align-items: center;

    padding: 24px;

    background-color: var(--neutral-01);

    border-radius: 16px;

    width: 100%;

    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);

    gap: 8px;

}



.contact-info-link {

    text-decoration: none;

    font-size: 14px;

    line-height: 24px;

    font-weight: var(--semiBold);

    color: var(--primary);

}





.contact-single-info-phone {

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-items: flex-start;

}



.contact-us-newsletter-form {

    margin-left: 112px;

    padding-top: 8px;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-items: flex-start;

    gap: 32px;

}





.input-container {

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-items: flex-start;

    gap: 8px;

}



.input-label {

    font-size: 14px;

    line-height: 20px;

    color: var(--tertirary);

    font-weight: var(--semiBold);

}



.input-contact {

    width: 440px;

    background-color: var(--neutral-01);

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

    border-radius: 18px;

    height: 40px;

    padding: 10px;

    font-size: 14px;

    line-height: 20px;

    font-weight: var(--medium);

    color: var(--primary);

}



    .input-contact.message {

        height: 88px; /* Adjust height as needed */

        resize: none; /* Prevent resizing by the user (optional) */

        display: block;

    }







.terms-checkbox {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    font-size: 14px;

    line-height: 20px;

    font-weight: var(--semiBold);

    color: var(--tertirary);

}





.checkbox-box {

    width: 24px;

    height: 24px;

    border-radius: 50%;

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

}





.show-available-only {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    align-self: center;

}



.available-checkbox-contact {

    width: 32px;

    height: 32px;

    border-radius: 50%;

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

    display: flex;

    justify-content: center;

    align-items: center;

}





    .available-checkbox-contact:is(:hover, :focus-visible) {

        cursor: pointer;

    }



    .available-checkbox-contact.active .checkmark-icon {

        display: block;

    }



.checkmark-icon {

    display: none;

}



.available-text {

    font-size: 14px;

    line-height: 16px;

    font-weight: var(--medium);

    letter-spacing: 1px;

    color: #656565;

}











@media (width < 1280px) {



    .landing-container{



        width: 1120px;





    }

}



@media (width < 1140px) {



    .landing-container{



        width: 800px;

        height: 440px;

    }





    .landing-title{

        font-size: 40px;

        line-height: 48px;

    }







    .question-mark-container{

        width: 36px;

        height: 36px;



    }





    /* FILTERS_LANDING_PAGE */







    .filters-container{



        width: 840px;





    }



    .type-filter-buttons-container{

        display: flex;

    }





    .range-slider {



        width: 160px;



    }



    .map-container {

        height: 800px;



    }











    /* ABOUT SECTION */







    .about-container{

        width: 800px !important;

        max-width: 800px !important;



    }





    .about-title-container{



        gap: 32px;

    }





    .about-title{

        font-size: 36px;

        line-height: 48px;

        letter-spacing: 1px;

        font-weight: var(--extraBold);

    }



    .about-img{

        width: 240px;

        height: 320px;

        border-radius: 20px;





    }





    .about-info-container{

        gap: 100px;

    }



    .about-info-text{

        font-size: 18px;

        line-height: 24px;

        color: var(--primary);

        font-weight: var(--medium);



    }





    /* CONTACT SECTION */







    .contact-section{

        height: 1500px;

        width: 100%;

        background-color: var(--white);



    }



    .contact-background{

        width: 100%;

        height: 100%;

        display: flex;

        justify-content: center;

        align-items: center;

        flex-direction: column;

    }



    .contact-section-left{

        width: 100%;

        height: 400px;

    }



    .contact-section-right{

        width: 100%;

        height: 1100px;



        border-top-left-radius: 0px;

    }



    .content-front-container{

        position: relative;

        margin-top: -1100px;

        z-index: 100;

        height: auto;

        padding: 56px 52px 80px 52px;

        display: flex;

        justify-content: center;

        align-items: center;

    }





    .contact-us-form-container{

        width: 1110px;

        height: 608px;

        background-color: var(--white);



        display: flex;

        justify-content: center;

        align-items: center;

        flex-direction: column;

        background-color: transparent;



    }





    .contact-us-business-container{

        width: 520px;

        height: auto;

        margin-left: 0px;



    }













    .contact-single-info-container{

        display: flex;

        justify-content: flex-start;

        align-items: flex-start;

        flex-direction: column;

        width: 100%;

        min-height: 108px;

        box-shadow: 2px 4px 2px 2px rgba(0, 0, 0, 0.2);



    }











    .contact-us-newsletter-form{

        margin-left: 0px;

        padding-top: 8px;

        margin-top: 48px;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        background-color: var(--neutral-01);

        gap: 32px;

        padding: 40px 24px;

        border-radius: 24px;

        box-shadow: 0px 4px 6px 6px rgba(0, 0, 0, 0.5);







    }





    .input-container{



        width: 100%;

    }



    .input-label{

        font-size: 14px;

        line-height: 20px;

        color: var(--tertirary);

        font-weight: var(--semiBold);

    }



    .input-contact{

        width: 100%;



    }















}







@media (width < 1040px) {





    /*APARTMENT CARDS SECTION*/







    .apartment-card {

        width: 260px;

        height: 400px;



    }



}







@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;



    }







}

@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 < 850px) {







    .hero-container{

        display: flex;

        justify-content: center;

        align-items: center;

        flex-direction: column;



        margin-top: 88px;



    }



    .landing-container{

        margin: 48px 88px 0px 88px;

        width: 560px;

        height: 560px;



    }







    /* FILTERS_LANDING_PAGE */









    .hero-filters{

        margin-top: 0px;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        z-index: 10;

    }





    .filters-container{



        display: none;



    }



    .type-filter-buttons-container{

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        margin-top: -48px;



    }



    .results-container{

        display: none;

    }



    .type-filter-buton{

        width: 320px;

        height: 48px;

        display: flex;

        justify-content: flex-start;

        align-items: center;

        gap: 8px;

        background-color: var(--neutral-01);

        padding: 16px;



    }



    .type-filter-buton.left{

        border-top-left-radius: 16px;

        border-top-right-radius: 16px;

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



    }

    .type-filter-buton.right{

        border-top-right-radius: 0px;



        border-bottom-left-radius: 16px;

        border-bottom-right-radius: 16px;

    }



    .filter-icon-border{

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

        border-radius: 50%;

        width: 24px;

        height: 24px;

        display: flex;

        justify-content: center;

        align-items: center;

    }

    .type-filter-buton:is(:hover, :focus-visible){

        cursor: pointer;

    }



    .type-filter-buton.active{

        background-color: var(--neutral-01);



    }



    .filter-icon{

        filter: var(--filter-primary);

        width: 16px;

        height: 16px;



    }



    .filter-type-btn-text{

        font-size: 14px;

        line-height: 20px;

        font-weight: var(--semiBold);

        color: var(--neutral-20);

    }





    .forward-mobile{

        display: block;

    }









    .find-location-button-container {



        padding: 12px;



    }









    /*APARTMENT CARDS SECTION*/









    /*APARTMENT CARDS SECTION*/

    .apartment-cards-section {

        width: 100%;

        overflow: hidden;

        position: relative;

        display: flex;

        flex-direction: column;

        justify-content: flex-start;

        align-items: center;

        height: auto;

        margin-top: -300px;

    }



    .apartment-cards-container {

        display: flex;

        gap: 24px;

        overflow-x: auto;

        white-space: nowrap;

        scroll-snap-type: x mandatory;

        scroll-padding-left: 16px;

        padding: 0px 24px;

        justify-content: flex-start;

        max-width: 100vw;

        height: 100%;

    }



    .apratments-container{

        margin-top: 0px;

    }





    .apartment-cards-container::-webkit-scrollbar {

        display: none;

    }

    .apartment-cards-container {

        -ms-overflow-style: none;

        scrollbar-width: none;

    }



    .apartment-card {

        width: 320px;

        height: 470px !important;

        flex: none;

        scroll-snap-align: start;

        background-size: cover;

        background-position: center;

        border-radius: 16px;



        overflow: hidden;

    }







    /* Ensure no body overflow */

    html, body {

        overflow-x: hidden;

    }













}













@media (width < 800px) {





    /* ABOUT SECTION */









    .about-section{

        display: flex;

        justify-content: center;

        align-items: center;

        flex-direction: column;

    }





    .about-container{

        margin-top: 64px;

        width: 100% !important;

        max-width: 100% !important;

        display: flex;

        justify-content: flex-start;

        align-items: flex-start;

        flex-direction: column;

        gap: 40px;



        padding: 0px 24px;

    }





    .about-title-container{

        display: flex;

        justify-content: center;

        align-items: flex-start;

        gap: 16px;

        flex-direction: column;

    }





    .about-title{

        font-size: 32px;

        line-height: 40px;

        letter-spacing: 1px;

        font-weight: var(--extraBold);

    }



    .about-img{

        width: 240px;

        height: 320px;

        border-radius: 20px;

        align-self: center;





    }





    .about-info-container{

        display: flex;

        justify-content: flex-start;

        align-items: flex-start;

        flex-direction: column;

        gap: 32px;

    }



    .about-info-text{

        font-size: 14px;

        line-height: 20px;

        color: var(--primary);

        font-weight: var(--medium);



    }



    .about-information{

        display: flex;

        flex-direction: column;

        justify-content: flex-start;

        align-items: flex-start;

        gap: 24px;

    }





    .about-info-widgets{

        display: flex;

        flex-direction: column;

        justify-content: flex-start;

        align-items: flex-start;

        gap: 24px;

    }





    .about-info-widget{

        display: flex;

        justify-content: flex-start;

        align-items: center;

        position: relative;

    }



    .widget-icon-container{

        width: 56px;

        height: 56px;

        border-radius: 50%;

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



        display: flex;

        justify-content: center;

        align-items: center;

    }



    .about-widget-counter{

        margin-left: 12px;

        font-size: 32px;

        line-height: 40px;

        font-weight: var(--extraBold);

        color: var(--primary)

    }



    .about-widget-text{

        margin-left: 8px;

        font-size: 18px;

        line-height: 24px;

        color: var(--tertirary);

        font-weight: var(--semiBold);

    }



    .look-more-about{

        margin-left: 8px;

        font-size: 18px;

        line-height: 24px;

        color: var(--primary);

        font-weight: var(--semiBold);

        display: none;



    }





    .about-info-widget:is(:hover, :focus-visible){

        cursor: pointer;

        transition: 0.7s ease-in;





    }





    .about-info-widget:is(:hover, :focus-visible) .widget-icon-container{

        background-color: var(--primary);

        border: none;



    }





    .about-info-widget:is(:hover, :focus-visible) .widget-icon-container .widget-icon-about{

        filter: var(--filter-inverse);



    }



    .about-info-widget:is(:hover, :focus-visible) .look-more-about{

        display: block;



    }





    .about-info-widget:is(:hover, :focus-visible) .about-widget-text{

        color: var(--primary);



    }







    .about-info-widget:is(:hover, :focus-visible)::after {

        content: "";

        position: absolute;

        bottom: -8px;

        left: 0;

        width: 100%;

        height: 2px;

        background-color: var(--primary);

    }



    .about-info-widget:is(:hover, :focus-visible)::before {

        content: "";

        position: absolute;

        bottom: -14px;

        right: -8px;

        width: 0;

        height: 0;

        border-top: 7px solid transparent;

        border-bottom: 7px solid transparent;

        border-left: 14px solid var(--primary);

    }













}



@media (width < 700px) {





    /* BENEFITS SECTION */











    .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;

    }





    /* CONTACT SECTION */



    .contact-title{

        font-size: 32px;

        line-height: 40px;

        letter-spacing: 0px;



    }





    .contect-secondary-title{

        font-size: 14px;

        line-height: 20px;





    }



    .contact-section{

        height: 1500px;

        width: 100%;

        background-color: var(--white);



    }



    .contact-background{

        width: 100%;

        height: 100%;

        display: flex;

        justify-content: flex-end;

        align-items: center;

        flex-direction: column;

    }



    .contact-section-left{

        width: 100%;

        height: 400px;

    }



    .contact-section-right{

        width: 100% !important;

        height: auto !important;

        min-height: 1020px;

        border-top-left-radius: 0px;

        min-width: unset !important;

    }



    .content-front-container{



        padding: 56px 24px 80px 24px;



    }





    .contact-us-form-container{

        width: 100%;

        height: 608px;

        background-color: var(--white);



        display: flex;

        justify-content: center;

        align-items: center;

        flex-direction: column;

        background-color: transparent;



    }





    .contact-us-business-container{

        width: 100%;

        max-width: 450px;

        height: auto;

        margin: 0px 24px;



    }













    .contact-single-info-container{

        display: flex;

        justify-content: flex-start;

        align-items: flex-start;

        flex-direction: column;

        width: 100%;

        min-height: 108px;

        box-shadow: 2px 4px 2px 2px rgba(0, 0, 0, 0.2);



    }











    .contact-us-newsletter-form{

        margin-left: 0px;

        padding-top: 8px;

        margin-top: 48px;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        background-color: var(--neutral-01);

        gap: 32px;

        padding: 40px 24px;

        border-radius: 24px;

        box-shadow: 0px 4px 6px 6px rgba(0, 0, 0, 0.5);







    }





    .input-container{



        width: 100%;

    }



    .input-label{

        font-size: 14px;

        line-height: 20px;

        color: var(--tertirary);

        font-weight: var(--semiBold);

    }



    .input-contact{

        width: 100%;



    }





    .available-checkbox-contact {

        width: 24px !important;

        height: 24px !important;

    }









    .show-available-only{

        display: flex;

        justify-content: center;

        align-items: center;

        height: auto;

        width: auto;

        align-self: center;

    }



    .terms-checkbox {

        display: flex;

        justify-content: center;

        align-items: center;

        font-size: 12px;

        line-height: 18px;

        font-weight: var(--semiBold);

        color: var(--tertirary);

        width: auto;

    }











}







@media (width < 600px) {







    .landing-container{

        margin: 48px 24px 0px 24px !important;

        width: 100%;

        max-width: 350px ;



        height: 560px;

        flex-direction: column-reverse;

        justify-content: flex-end;



    }







    .hero-container{

        display: flex;

        justify-content: center;

        align-items: center;

        flex-direction: column;



        margin-top: 88px;

        width: 100%;



    }









    .landing-left{

        margin-top: 40px;

        margin-left: 24px;

        margin-right: 24px;





        gap: 8px;

    }





    .landing-title{

        font-size: 40px;

        line-height: 48px;

        letter-spacing: 0.5px;



    }



    .landing-secondary-title{

        font-size: 14px;

        line-height: 20px;



    }







    .landing-right{

        margin-top: 24px;

        margin-left: 24px;



        margin-right: 0px;

        justify-content: flex-start;

        align-items: flex-start;



    }



    .question-mark-container{

        width: 40px;

        height: 40px;

    }





    .question{

        filter: var(--filter-inverse);

    }





    .question-mark-container:is(:hover, :focus-visible, :focus-within) .question-info-container{

        display: flex;



    }



    .question-info-container{

        width: 260px;

        height: 128px;

        background-color: rgba(102, 102, 102, 0.6);

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

        border-radius: 8px;

        margin-top: 24px;

        padding: 16px;

        display: none;

        flex-direction: column;

        justify-content: flex-start;

        align-items: flex-start;

        gap: 16px;

    }



    .single-question-info{

        width: 100%;

        display: flex;

        justify-content: flex-start;

        align-items: flex-start;

        gap: 16px;

    }





    .single-question-text{

        font-size: 12px;

        line-height: 20px;

        font-weight: var(--medium);

        color: var(--white);

    }





    .apartments-title{

        font-size: 28px;

        line-height: 32px;





    }



    .apartments-secondary-title{

        font-size: 18px;

        line-height: 24px;



    }



}





@media (width < 500px) {

    .apartment-card {

        width: 250px;

        height: 370px !important;

        flex: none;

        scroll-snap-align: start;

        background-size: cover;

        background-position: center;

        border-radius: 16px;



        overflow: hidden;

    }



    .apartment-cards-container {

        gap: 16px;



    }









    .apartment-card:hover .apartment-info-container{

        display: none;

    }



    .apartment-card:hover .view-apartments-btn{

        display: flex;

    }



    .view-apartments-btn{

        display: none;

        padding: 14px;

        margin-top: 100px;

    }









    .price-container{

        margin-left: auto;

        align-self: center;



    }





}





@media (width < 400px) {

    .apartment-card {

        width: 200px;

        height: 320px !important;

        flex: none;

        scroll-snap-align: start;

        background-size: cover;

        background-position: center;

        border-radius: 16px;



        overflow: hidden;

    }



    .apartment-cards-container {

        gap: 16px;



    }





}



@media (width < 380px) {







    .landing-container{



        max-width: 320px ;



        height: 500px;





    }

    .landing-title{

        font-size: 32px;

        line-height: 40px;

        letter-spacing: 0.5px;



    }



    .type-filter-buton {

        width: 300px;

        height: 48px;





    }







}



@media (width < 330px) {







    .landing-container{



        max-width: 280px ;



        height: 460px;





    }



    .type-filter-buton {

        width: 280px;

        height: 48px;





    }





}