.apartment-title-container {

    width: 100%;

    height: 432px;

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

    border-bottom-left-radius: 32px;

    border-bottom-right-radius: 32px;

    z-index: 10;

    position: relative;

    box-shadow: 0px 0px 6px 0px hsla(0, 0%, 0%, 0.2);

    padding: 120px 88px 32px 88px;

    display: flex;

    justify-content: flex-start;

    align-items: center;

    flex-direction: column;

}



.apartment-details-container {

    width: 100%;

    height: 900px;

    background-color: var(--white);

    margin-top: -32px;

}



.previous-page-path-container {

    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-items: flex-start;

    gap: 16px;

}



.path-container {

    display: flex;

    justify-content: flex-start;

    align-items: center;

    gap: 12px;

}



.path-arrow {

    transform: rotate(180deg);

}



.previous-page {

    font-size: 14px;

    line-height: 20px;

    font-weight: var(--medium);

    text-decoration: none;

}



.current-page {

    font-size: 14px;

    line-height: 20px;

    font-weight: var(--bold);

    text-decoration: none;

}



.apartment-name {

    font-size: 48px;

    line-height: 60px;

    letter-spacing: 0.5px;

    font-weight: var(--extraBold);

    margin-top: 32px;

}



.line-separator {

    width: 80px;

    height: 1px;

    background-color: var(--border-secondary);

    margin: 16px 0px;

}



.apartment-floor-entry {

    font-size: 20px;

    line-height: 24px;

    font-weight: var(--semiBold);

    color: var(--secondary);

}



.apartment-floor-entry-container {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

}



.dot-separator {

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background-color: var(--tertirary);

}



.apartment-status-title {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    margin-top: 16px;

}





.status-dot {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background-color: var(--tertirary);

}



    .status-dot.open {

        background-color: var(--success);

    }



    .status-dot.sold {

        background-color: var(--error);

    }



    .status-dot.reserved {

        background-color: var(--yellow-02);

    }





.status-text-title {

    font-size: 16px;

    line-height: 24px;

    font-weight: var(--bold);

}





.apartment-details-image-container {

    display: flex;

    justify-content: center;

    align-items: flex-start;

    padding: 48px 90px 80px 90px;

    background-color: var(--white);

    gap: 32px;

}



.apartment-details-photo {

    width: 650px;

    height: 750px;

    border-radius: 32px;

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

}



.apartment-full-details-container {

    width: 546px;

    height: 424px;

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

    border-radius: 32px;

    padding: 32px;

    display: flex;

    justify-content: flex-start;

    align-items: flex-start;

    flex-direction: column;

}



.details-title {

    font-size: 24px;

    line-height: 28px;

    font-weight: var(--extraBold);

}



.details-info-single-apartment {

    display: grid;

    grid-template-rows: auto;

    grid-template-columns: repeat(3, 1fr);

    width: max-content;

    height: auto;

    margin-top: 24px;

    gap: 24px;

    align-items: flex-start;

    justify-content: flex-start;

}



    .details-info-single-apartment.second {

        margin-top: 24px;

    }



.detail-info-container {

    display: flex;

    justify-content: flex-start;

    align-items: flex-start;

    gap: 8px;

    padding: 8px;

    width: auto;

    height: 64px;

    flex-direction: column;

    width: max-content;

}



.detail-info-type {

    font-size: 14px;

    line-height: 20px;

    font-weight: var(--semiBold);

    color: var(--quertanary);

}



.detail-info-input {

    font-size: 14px;

    line-height: 20px;

    font-weight: var(--semiBold);

    color: var(--primary);

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px

}



.sun-details-icon {

    width: 20px;

    height: 20px;

    filter: var(--filter-primary);

}



.details-line-separator {

    width: 100%;

    height: 2px;

    background-color: var(--border-primary);

    margin: 24px 0px;

}





.details-single-status-container {

    width: 100%;

    height: 44px;

    padding: 8px 10px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.details-status-text {

    font-size: 16px;

    line-height: 24px;

    font-weight: var(--semiBold);

    color: var(--secondary);

}





.single-details-status {

    text-align: center;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 14px;

    line-height: 20px;

    font-weight: var(--semiBold);

    border-radius: 10px;

    padding: 4px 14px;

}



    .single-details-status.open {

        background-color: rgba(41, 163, 104, 0.2);

        color: var(--success);

    }



    .single-details-status.sold {

        background-color: rgba(185, 44, 49, 0.25);

        color: var(--error);

    }



    .single-details-status.reserved {

        background-color: rgba(178, 143, 0, 0.25);

        color: var(--yellow-03);

    }





.single-apartment-detail-button-container {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 100%;

    gap: 16px;

    margin-top: 24px;

}













@media (width < 1250px) {







    .apartment-details-photo{

        width: 450px;

        height: 550px;

        border-radius: 32px;

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

    }







}



@media (width < 1050px) {









    .apartment-details-image-container{



        padding: 48px 48px 80px 48px;

        gap: 24px;

    }



    .apartment-details-photo{

        width: 380px;

        height: 450px;

        border-radius: 32px;

    }



    .apartment-full-details-container{

        width: 500px;

        height: 400px;

        padding: 24px;



    }







}





@media (width < 950px) {







    .apartment-details-image-container{

        display: flex;

        justify-content: center;

        align-items: center;

        padding: 48px 90px 80px 90px;

        background-color: var(--white);

        gap: 32px;

        flex-direction: column;

    }



    .apartment-details-photo{

        width: 650px;

        height: 750px;

        border-radius: 32px;

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

    }



    .apartment-full-details-container{

        width: 546px;

        height: 424px;

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

        border-radius: 32px;

        padding: 32px;



        display: flex;

        justify-content: flex-start;

        align-items: flex-start;

        flex-direction: column;

    }







}





@media (width < 700px) {

    .apartment-title-container {

        height: 390px;

        padding: 100px 24px 32px 24px;



    }



    .previous-page-path-container {

        width: 100%;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        gap: 0px;

    }



    .apartment-name{

        font-size: 28px;

        line-height: 32px;

        text-align: center;

    }



    .apartment-floor-entry{

        font-size: 16px;

        line-height: 24px;



    }

    .path-container{

        display: none;

    }



    .apartment-details-image-container{

        display: flex;

        justify-content: center;

        align-items: center;

        padding: 48px 24px 80px 24px;

        background-color: var(--white);

        gap: 32px;

        flex-direction: column;

    }



    .apartment-details-photo{

        max-width: 450px;

        width: 100%;

        height: auto;

        max-height: 450px;

        border-radius: 32px;

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

    }



    .apartment-full-details-container{

        max-width: 450px;

        width: 100%;

        height: auto;

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

        border-radius: 32px;

        padding: 32px;



        display: flex;

        justify-content: flex-start;

        align-items: flex-start;

        flex-direction: column;

    }



    .single-apartment-detail-button-container {

        display: flex;

        justify-content: center;

        align-items: center;

        flex-direction: column;

        width: 100%;

        gap: 16px;

        margin-top: 24px;

    }





    .details-info-single-apartment {

        display: grid;

        grid-template-rows: auto;

        grid-template-columns: repeat(2, 1fr);

        width: max-content;

        height: auto;

        margin-top: 24px;

        gap: 24px;

        align-items: flex-start;

        justify-content: flex-start;

    }



}





@media (width < 420px) {



    .details-info-single-apartment {

        display: grid;

        grid-template-rows: auto;

        grid-template-columns: repeat(2, 120px);

        width: max-content;

        height: auto;

        margin-top: 24px;

        gap: 12px;

        align-items: flex-start;

        justify-content: flex-start;

    }

    

    .detail-info-container{

        max-width: 120px;

    }

}





@media (width < 370px) {

    .details-title {

        font-size: 24px;

        line-height: 28px;

        font-weight: var(--extraBold);

        justify-self: center;

        align-self: center;

    }



    .details-info-single-apartment {

        display: grid;

        grid-template-rows: auto;

        grid-template-columns: repeat(1, 200px);

        width: max-content;

        height: auto;

        margin-top: 24px;

        gap: 24px;



    }

}