@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Exo:ital,wght@0,100..900;1,100..900&family=Major+Mono+Display&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Red Hat Display", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

html {
    scroll-behavior: smooth;
}

:root {
    /* colors */
    --blue-100: hsl(229, 100%, 95%);
    --blue-150: hsl(229, 100%, 90%); 
    --blue-750: hsl(229, 100%, 75%);

    /* font sizes */
    --heading-2-size: clamp(1.4rem, calc(7vw + 1rem), 3.5rem);
    --para-size: clamp(0.55rem, calc(4.5vw + 0.45rem), 1rem);

    /* font weights */
    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;

    /* letter spaces */
    --letter-spacing-one: 0.05rem;
    --letter-spacing-two: 0.06rem;

    /* line height */
    --heading-2-line-height: clamp(1.4rem, calc(8vw + 1rem), 4.2rem);

    /* transitions */
    --transition-duration-one: 0.25s;
    --transition-duration-two: 0.3s;
    --transition-ease-out: ease-out;

    /* blurness */
    --blur-1: blur(1rem);
}

/* Reusable styles classes */
.btn {
    padding: 1rem 1.1rem;
    background-color: var(--blue-150);

    font-size: 1rem;
    font-weight: var(--fw-600);
    color: hsl(229, 100%, 8%);
    letter-spacing: var(--letter-spacing-one);
    cursor: pointer;
    
    border: none;
    border-radius: 0.8rem;

    transition: var(--transition-duration-one) var(--transition-ease-out);
}
.btn:hover {
    background-color: hsl(229, 100%, 85%);
}


/* Header */
/* Navbar */
header > .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
    padding: 0.6rem 2rem 0.65rem 2rem;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;

    transition: var(--transition-duration-one) var(--transition-ease-out);
}
.navbar.change {
    background-color: hsla(229, 100%, 5%, 0.5);
    backdrop-filter: var(--blur-1);
} 

/* reusable logo class */
.logo  {
    text-decoration: none;
    font-size: 2.4rem;
    font-weight: var(--fw-400);
    color: var(--blue-150);
    font-family: "Cinzel Decorative", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    transition: var(--transition-duration-one) var(--transition-ease-out);
}

.navbar > ul {
    display: flex;
    align-items: center;
    gap: 2.5rem;        

    list-style-type: none;
}

.navbar > ul > li > a {
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: var(--fw-400);
    color: var(--blue-150);
    letter-spacing: var(--letter-spacing-one);

    transition: var(--transition-duration-one) var(--transition-ease-out);
}
.navbar > ul > li > a:hover {
    color: var(--blue-750);
}
.navbar > ul > li > a.active {
    font-weight: var(--fw-600);
    color: var(--blue-750);
}

.navbar > ul > #hamburgerClose, .ul-btn, .navbar > #hamburgerOpen {
    display: none;
}

.navbar > ul > #hamburgerClose, .navbar > #hamburgerOpen {
    background-color: transparent;
    border: none;
}

.navbar > .nav-btn {    
    padding: 0.9rem 1.05rem;
}


/* Hero Section */
main > #home {
    max-width: 100%;
    background-image: url("./images/home.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 12.4rem 3rem 14rem 3rem;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 11rem;

    transition: var(--transition-duration-two) var(--transition-ease-out);
}

#home > #hero-text {
    text-align: center;
    color: var(--blue-100);
    
    width: 56rem;
    max-width: 100%;
    margin-top: 3rem;
}

#hero-text > p {
    font-size: var(--para-size);
    font-weight: var(--fw-400);
    letter-spacing: var(--letter-spacing-two);

    margin-bottom: 0.5rem;

    transition: var(--transition-duration-two) var(--transition-ease-out);
}

#hero-text > h1 {
    font-size: clamp(1.8rem, calc(7vw + 1rem), 4.2rem);
    line-height: clamp(1.8rem, calc(8vw + 1rem), 4.8rem);
    font-weight: var(--fw-500);

    margin-bottom: 2.6rem;

    transition: var(--transition-duration-two) var(--transition-ease-out);
}

#hero-text > h1 > span,
#about-center > #about-center-text > h2 > span, 
#residence-head > h2 > span, 
#inclusions-text > h2 > span {
    font-style: oblique;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

#hero-text > .hero-btn {
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;

    padding: 1rem 1.6rem;

    transition: all var(--transition-duration-one) var(--transition-ease-out);
}


/* About Section */
main > #about {
    display: flex;
    justify-content: center;

    min-height: 33rem;
    padding-top: 6rem;
}

#about > #about-left, #about-right {
    background-size: cover;
    background-position: center;
    transition: var(--transition-duration-two) var(--transition-ease-out);
}

#about > #about-left {
    flex: 0.3;
    align-self: flex-start;

    min-height: 20rem;
    background-image: url("./images/about/about_img_1.jpg");
    border-radius: 0 3.3rem 3.3rem 0;
}

#about > #about-center {
    flex: 0.4;
    align-self: center;

    text-align: center;
    color: hsl(229, 100%, 5%);

    display: flex;
    align-items: center;
    flex-direction: column;

    padding: 0 4.15rem;
}

#about-center > img {
    object-fit: cover;
    object-position: center;

    margin-bottom: 0.8rem;
}

#about-center > #about-center-text > h2 {
    font-size: var(--heading-2-size);
    line-height: var(--heading-2-line-height);
    font-weight: var(--fw-500);

    margin-bottom: 1.2rem;
}

#about-center > #about-center-text > p {    
    font-size: var(--para-size);
    font-weight: var(--fw-600);
    letter-spacing: 0.03rem;
    
    margin-bottom: 2rem;
}

#about-center > #about-center-text > .about-btn {
    padding: 1rem 1.6rem;
    background-color: hsl(229, 100%, 10%);

    color: var(--blue-100);
    font-weight: var(--fw-400);
} 
#about-center > #about-center-text > .about-btn:hover {
    background-color: hsl(229, 100%, 5%);
    scale: 1.05;
} 

#about > #about-right {
    flex: 0.3;
    align-self: flex-end;
    
    min-height: 20rem;
    background-image: url("./images/about/about_img_2.jpg");
    border-radius: 3.3rem 0 0 3.3rem;

    margin-top: 12rem;
}


/* Residences */
main > #residences {
    padding: 6rem 3.5rem 0 3.5rem;
}

#residences > #residence-head {
    text-align: center;
    margin-bottom: 3.5rem;
}

#residence-head > h2 {
    font-size: var(--heading-2-size);
    line-height: var(--heading-2-line-height);
    font-weight: var(--fw-500);

    margin-bottom: 1.2rem;
}

#residence-head > p {
    font-size: var(--para-size);
    font-weight: var(--fw-600);
    letter-spacing: 0.03rem;
}

#residences > #slider {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none; /* For IE and Edge */
}
#residences > #slider::-webkit-scrollbar {
    display: none;
}

#residences > #slider > #residences-list {
    columns: 4;
    column-gap: 1.05rem;
    break-inside: avoid;

    list-style-type: none;
}

#residences-list > #list-item {
    position: relative;
    width: 100%;

    margin-bottom: 1.1rem;
    cursor: pointer;
    
    transition: var(--transition-duration-two) var(--transition-ease-out);
}
#list-item:hover {
    transform: scale(0.95);
}

#residences-list > #list-item > img {
    max-width: 100%;
    height: auto;
    object-fit: cover;

    border: 1px solid hsla(229, 100%, 10%, 0.2);
    border-radius: 1.3rem;

    transition: var(--transition-duration-two) var(--transition-ease-out);
}

#residences-list > #list-item > p {
    position: absolute;
    bottom: 6px;
    left: 0;
    right: 0;

    font-size: clamp(0.65rem, calc(5.5vw + 0.55rem), 1.05rem);
    font-weight: var(--fw-400);
    letter-spacing: var(--letter-spacing-one);
    color: var(--blue-100);
    text-align: center;
    
    background: linear-gradient(to top, hsl(229, 100%, 3.5%), hsla(229, 100%, 3.5%, 0.6), transparent);
    border-radius: 0 0 1.3rem 1.3rem;
    padding: 1rem;

    transition: var(--transition-duration-two) var(--transition-ease-out);
}


/* Inclusions */
main > #inclusions {
    padding: 6rem 5rem 0 5rem;

    transition: var(--transition-duration-two) var(--transition-ease-out);
}

#inclusions > #inclusions-content {
    position: relative;
    
    width: 100%;
    height: 30rem;
    border-radius: 2.8rem;
}

#inclusions-content > img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    border-radius: 2.8rem;
}

#inclusions-content > #inclusions-text {
    position: absolute;
    top: 0;
    bottom: 0;

    color: var(--blue-100);

    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;

    max-width: 85%;
    background: linear-gradient(to right, hsl(229, 100%, 3.5%), transparent);
    padding: 0 14rem 0 5rem;
    border-radius: 2.8rem 0 0 2.8rem;

    transition: var(--transition-duration-two) var(--transition-ease-out);
}

#inclusions-text > h2 {
    font-size: var(--heading-2-size);
    line-height: var(--heading-2-line-height);
    font-weight: var(--fw-500);

    margin-bottom: 1.2rem;
}

#inclusions-text > p {
    font-size: var(--para-size);
    font-weight: var(--fw-400);
    letter-spacing: var(--letter-spacing-one);
    
    margin-bottom: 2rem;
}

#inclusions-text > .inclusions-btn:hover {
    scale: 1.05;
} 


/* Footer */
footer {
    padding: 6rem 3.5rem 1.8rem 3.5rem;
    transition: var(--transition-duration-two) var(--transition-ease-out);
}

footer > #footer-content {
    color: var(--blue-100);

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    justify-items: center;
    gap: 6rem;
    
    max-width: 100%;
    height: fit-content;
    background-color: hsl(229, 100%, 6%);
    padding: 5rem;
    border-radius: 2.5rem;

    transition: var(--transition-duration-two) var(--transition-ease-out);
}

#footer-content > #info {
    grid-column: 1 / 3;
}

#info > p {
    font-size: 1.03rem;
    font-weight: 300;
    letter-spacing: var(--letter-spacing-two);

    margin-top: 0.8rem;
}

#footer-content > #links, #get-in-touch, #social-links {
    list-style-type: none;
}

#links > li > .link,
#get-in-touch > .git > p,
#social-links > li > .social-link {
    text-decoration: none;
    color: var(--blue-100);
    font-size: 1rem;
    font-weight: var(--fw-400);
    letter-spacing: var(--letter-spacing-two);

    transition: var(--transition-duration-two) var(--transition-ease-out);
}

#get-in-touch > .git, 
#social-links > li > .social-link {    
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

#get-in-touch > .git:first-child > img {
    align-self: self-start;
} 

#links > li, #get-in-touch > .git, #social-links > li {
    margin-bottom: 1.7rem;
}

#links > li:last-child, #get-in-touch > .git:last-child, #social-links > li:last-child {
    margin-bottom: 0rem;
}

#links > li > .link:hover, #social-links > li > .social-link:hover {
    color: var(--blue-750);
} 

#social-links > li > .social-link {
    gap: 0.55rem;
}

.git > img {
    width: 35px;
    height: 35px;
}

.social-link > img {
    width: 22px;
    height: 22px;
}




/* Scroll-top-btn */
.scroll-top-btn {
    position: fixed;
    bottom: 1.7rem;
    right: 1.7rem;
    /* z-index: 20; */
    width: 50px;
    height: 50px;
    border: 1px solid hsla(229, 100%, 90%, 0.3);
    border-radius: 50%;
    background-color: hsla(229, 100%, 5%, 0.8);
    backdrop-filter: blur(0.3rem);
    color: var(--blue-100);
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    visibility: hidden; /* Hidden initially */
    opacity: 0;
    transition: visibility var(--transition-duration-two) ease-in-out, opacity var(--transition-duration-two) ease-in-out;
}

.scroll-top-btn.show {
    visibility: visible;
    opacity: 1;
}




/* Responsiveness */
@media (min-width: 1700px) {
    #residences > #slider > #residences-list {
        columns: 5;
    }
}

@media (max-width: 1154px) {
    /* Footer */
    footer > #footer-content {
        gap: 5.5rem;
    }
}

@media (max-width: 1130px) {
    /* Footer */
    footer > #footer-content {
        grid-template-columns: repeat(4, 1fr);
        row-gap: 4.5rem;
    }

    #footer-content > #social-links {
        justify-self: left;
    }
}

@media (max-width: 1099px) {
    #residences > #slider > #residences-list {
        columns: 3;
    }
}

@media (max-width: 949px) {
    /* Footer */
    footer > #footer-content {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 5.5rem;
    }

    #footer-content > #get-in-touch {
        justify-self: left;
    }

    #footer-content > #social-links {
        justify-self: center;
    }
}

@media (max-width: 914px) {
    /* About */
    main > #about {
        flex-direction: column;
        gap: 4rem;    
    }
    
    #about > #about-left {
        max-width: 100%;
        flex: 1;
        align-self: auto;

        margin-right: 2rem;
    }

    #about > #about-center {
        flex: 1;
        padding-inline: 3rem;
    }

    #about > #about-right {
        max-width: 100%;
        flex: 1;
        align-self: auto;

        margin-left: 2rem;
        margin-top: 0; 
    }
}

@media (max-width: 899px) {
    /* Residences */
    main > #residences, footer {
        padding-inline: 2.5rem;
    }
    

    /* Inclusions */
    main > #inclusions {
        padding-inline: 3.5rem;
    }

    #inclusions-content > #inclusions-text {
        max-width: 100%;
        padding-inline: 4rem;
    }
}

@media (max-width: 859px) {
    #residences > #slider > #residences-list {
        columns: 2;
    }
}

@media (max-width: 829px) {
    /* Footer */
    footer > #footer-content {
        padding: 4rem;
    }
}

@media (max-width: 794px) {
    /* Footer */
    footer > #footer-content {
        padding: 3.3rem;
    }
}

@media (max-width: 768px) {
    /* Navbar */
    .navbar > ul {
        all: unset;
        position: fixed;
        top: 0;
        right: -100%;
        z-index: 10;
        
        list-style-type: none;
    
        display: flex;
        flex-direction: column;
        align-items:end;
        justify-content: center;
        gap: 3rem;
    
        min-height: 100dvh;
        background-color: hsl(229, 100%, 5%, 0.98);
        backdrop-filter: var(--blur-1);
        padding: 0 2rem 0 3.5rem;
        border-left: 1px solid hsla(229, 100%, 90%, 0.3);

        transition: 0.6s;
    }

    .navbar > ul.open {
        right: 0;
    }
    
    .navbar > ul > li > a {
        font-size: 1.35rem;
    }

    .navbar > ul > #hamburgerClose, .ul-btn, .navbar > #hamburgerOpen {
        display: block;
    }

    .navbar > ul > #hamburgerClose {
        margin-bottom: 1rem;
    }

    .navbar > ul > .ul-btn {
        padding: 1.05rem 1.7rem;

        font-size: 1.15rem;
    }

    .navbar > .nav-btn {    
        display: none;
    }


    /* Footer */
    footer > #footer-content {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 5rem;
    }
    
    #footer-content > #links, #get-in-touch, #social-links  {
        justify-self: left;
        grid-row: 2;
    }

    #links > li > .link,
    #get-in-touch > .git > p,
    #social-links > li > .social-link {
        font-size: 0.96rem;
    }
}

@media (max-width: 735px) {
    /* Footer */
    #footer-content >  #social-links {
        margin-right: auto;
        grid-row: 3;
    }
}

@media (max-width: 640px) {
    /* Navbar */
    header > .navbar {
        padding-inline: 1.5rem;
    }

    
    /* About */
    #about > #about-left {
        margin-right: 1.5rem;
    }

    #about > #about-center {
        padding-inline: 2rem;
        
    }

    #about > #about-right {
        margin-left: 1.5rem;
    }


    /* Residences */
    main > #residences, footer {
        padding-inline: 1.5rem;
    }

    
    /* Inclusions */
    main > #inclusions {
        padding-inline: 2.5rem;
    }

    #inclusions-content > #inclusions-text {
        padding-inline: 3rem;
    }
}

@media (max-width: 549px) {
    /* Residences */
    #residences > #slider > #residences-list {
        column-gap: 0.75rem;
    }

    #residences-list > #list-item {
        margin-bottom: 0.7rem;
    }
}

@media (max-width: 535px) {
    /* Footer */
    footer > #footer-content {
        grid-template-columns: repeat(1, 1fr);
        row-gap: 4.5rem;
    }
    
    #footer-content >  #get-in-touch {
        grid-row: 3;
    }

    #footer-content >  #social-links {
        grid-row: 4;
    }
}

@media (max-width: 515px) {
    /* Residences */
    #residences > #slider > #residences-list {
        columns: 1;
    }
}

@media (max-width: 440px) {
    /* Navbar */
    header > .navbar {
        padding-inline: 1.2rem;
    }

    
    /* About */
    #about > #about-left {
        margin-right: 1rem;
    }

    #about > #about-center {
        padding-inline: 1.4rem;
        
    }

    #about > #about-right {
        margin-left: 1rem;
    }
    

    /* Residences */
    main > #residences, footer {
        padding-inline: 1rem;
    }
    

    /* Inclusions */
    main > #inclusions {
        padding-inline: 1.6rem;
    }

    #inclusions-content > #inclusions-text {
        padding-inline: 2.1rem;
    }
}

@media (max-width: 405px) {
     /* Footer */
    footer > #footer-content {
        padding: 2.7rem;
    }

    #info > a {
        font-size: 2.3rem;
    }

    #links > li > .link,
    #get-in-touch > .git > p,
    #social-links > li > .social-link {
        font-size: 0.9rem;
    }
}

@media (max-width: 385px) {
    /* Footer */
    footer > #footer-content {
        padding: 2.4rem 2.2rem;
    }
}

@media (max-width: 369px) {
    /* Footer */
    footer > #footer-content {
        padding: 2.2rem 1.8rem;            
    }
}

@media (max-width: 355px) {
    /* Footer */
    #footer-content > #info > p {
        padding-right: 2.5rem;
    }
}


@media (max-width: 351px) {
    /* Navbar */
    header > .navbar {
        padding-inline: 1rem;
    }


    /* Inclusions */
    main > #inclusions {
        padding-inline: 1.4rem;
    }

    #inclusions-content > #inclusions-text {
        padding-inline: 1.8rem;
    }
}