@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..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&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
/*remove margin*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*add css variable */
:root{
    --primary-font: 'Inter', sans-serif;
    --primary-bg: #2e2a27;
    --primary-text-color: #e8e2da;
}
/* add dark theme class */
.dark-theme{
    --primary-bg: #e8e2da;
    --primary-text-color:#2e2a27;
}
.darker-theme{
    background-color: black;
    color: white;
}
body{
    height: 100%;
    font-family: var(--primary-font);
    background-color: var(--primary-bg);
    font-optical-sizing: auto;
    color: var(--primary-text-color);
    transition: all 0.3s  ease-in-out;
}
a{
    text-decoration: none;
    color: inherit;
}

/* cover image style */
.cover-image{
    width: 100%;
    height: 100vh;
    background-image: url(assests/cover_images/ChatGPT\ Image\ Jan\ 31\,\ 2026\,\ 09_53_57\ PM.png);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    color: white;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.cover-image h1{
    transform: scale(1);
    font-size: 8vw;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.is--nav{
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--primary-bg);
}
/* add header style */
#site-header{
    width: 100%;
    z-index: 10;
    text-align: center;
    color: white;
    background-color: var(--primary-bg);
    
    & .site-nav{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2rem 0rem;
        border-bottom: var(--primary-text-color) 1px solid;
        color:var(--primary-text-color);
        margin: 0rem 2rem;
        
        & ul{
            display: flex;
            gap: 1rem;
            list-style: none;

            & li{
                font-size: 1.6vw;
                font-weight: 500;
                cursor: pointer;
                transition: all 0.3s ease-in-out;
                text-transform: uppercase;
                &:hover{
                    color: grey;
                }
            }
        }
        /* copy right styling  */
        & .copy-right{
            text-transform:uppercase ;
            font: 1.6vw;
            font-weight: 500;
        }
    }
}
/* site title style */
.site-title{
    font-size:1.8vw;
    font-weight: 700;
    letter-spacing: -1px;
}
/* main styling  */
#site-main{
    /* Discover section  */
    & #discover{
        display: flex;
        justify-content: center;
        
        & .container{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top:8.79rem;
        text-align: center;

        & .slide {
            width: 60vw;
            max-width: 60vw;
            margin: 2px;
            overflow: hidden;
        }

        & .slide > h1{
            display:  block;
            font-size: 13.8vw;
            font-weight: 700;
            color: var(--primary-text-color);
            letter-spacing: -10px;
            line-height:0.8;

            &.lightWidth{
                font-weight: 300;
                font-style: italic;
            }
        }
    }
    }

    /* image section styling  */
    & #image-section{
        & .cover{
            position: relative;
            height: 130vh;

            
            & img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                position: absolute;
                top: -8%;
                left: 0;
                overflow: hidden;
                clip-path: circle(20% at 50% 50%);
            }
        }
    }

    /* tag section styling  */
    #tag-section{
        display: flex;
        justify-content: center;
        margin-top: 5rem;

        & .container{
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 1rem;
            align-items: center;
            width: 100rem;



            & >span{
                font-size: clamp(1.5rem,3vw,4rem);
                font-weight: 700;
                letter-spacing: -1px;
                color: var(--primary-text-color);
                margin-bottom: 1rem;
                border: 1px solid var(--primary-text-color);
                padding: 1rem 4rem;
                border-radius: 100vw;
                cursor: pointer;

            }
        }
    }
    /* furniture section styling */

    & .furniture-section{
        min-height: 100vh;
        position: relative;
        margin: 0 2rem ;


        & .container{
           
            & .furniture-title{
                bottom: 0;
                height: 50vh;
                font-size: 14vw ;
                font-weight: 700;
                letter-spacing: -5px ;
                color: var(--primary-text-color);
                margin-bottom: 1rem ;
            }

            & .grid-wrapper{
                width: 100%;
                height: 100vh ;
                margin-bottom: 15rem;
                padding: 20rem 0;
                & .grid-items{
                    margin-top: 0;
                    display: flex;
                    justify-content: space-between;
                    align-items: end;
                    gap: 8vw;

                    /* select all images */
                    & .box > img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                    & > *{
                        flex:1;
                        width: 100%;
                        height: auto;
                        object-fit: contain;
                    }

                    & .box:nth-child(1){
                        aspect-ratio: 1/1.8;
                        flex-basis: 120px;
                        transform: translateY(40%);
                    }
                    & .box:nth-child(2){
                        aspect-ratio: 1/1.2;
                        flex-basis: 100px;
                        transform: translateY(40%);
                    }
                    & .box:nth-child(3){
                        aspect-ratio: 1/1;
                        transform: translateY(-120%);
                    }
                    & .box:nth-child(4){
                        aspect-ratio: 1/1.4;
                        flex-basis: 200px;
                        transform: translateY(60%);
                    }
                }
            }
        }
    }
}