/*Laptop And Bigger Screens*/




@media(min-width:1001px) and (max-width:3000px) {
    



    html,body{
        
        margin: 0;
        padding: 0;
        scroll-behavior: smooth;
        
        
    }




    .grid-container{
        
        
        display: grid;
        

    }


    .section-one{
        display: grid;
        grid-template-columns: repeat(4,25%);
        grid-template-rows: repeat(2,33%);

        

    }


    .dream-img{

        grid-row: 1 / 4;
        grid-column: 1 / 5;
        width:100%;
        height: 100%;
        
        
        
    }



    







    .nav-bar{

        display: grid;
        grid-template-columns: repeat(2,50%);
        grid-template-rows: repeat(2, 50%);
        align-items: center;
        grid-column: 2/4;
        grid-row: 1/2;
        background:black;
        width: 100%;
        height: 20%;
        border-radius: 90px;
        border: 1px solid purple;
    
    
    
    }


    

    .Logo-img{
        grid-column:1/1;
        grid-row: 1/2;
        width: 63%;
        height: 100%;
        margin-top: -25%;

    }



    .barbutton-one{
        display:flex;
        grid-column: 1/2;
        grid-row: 1/2;
        justify-content: center;
        align-items: center;
        width: 30%;
        height: 70%;
        margin-top: 16%;
        margin-left: 95%;
        border-radius: 60px;
        background-color: white;
        z-index: 1;
        position: relative;
        cursor: pointer;
            

    }


    .barbutton-one::after {
        content: "";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        background-color:white;
        border-radius: 60px;

    }


    .barbutton-one::before{
        content: "";
        background: linear-gradient(-5deg, cyan,purple);
        position: absolute;
        background-size: 600%;
        z-index: -1;
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        filter: blur(8px);
        animation: glowing 20s linear infinite;
        transition: opacity .3s ease;
        border-radius: 60px;
        opacity: 1;

    }

    @keyframes glowing {

        0% {background-position: 0 0;}
        50% {background-position: 400% 0;}
        100% {background-position: 0 0;} 
        
    }



    .barbutton-two{
        display:flex;
        grid-column: 3/2;
        grid-row: 1/2;
        justify-content: center;
        align-items: center;
        width: 30%;
        height: 70%;
        margin-left: 30%;
        margin-top: 16% ;
        border-radius: 60px;
        background-color: white;
        z-index: 1;
        position: relative;
        cursor: pointer;
    }


    .barbutton-two::after {
        content: "";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        background-color:white;
        border-radius: 60px;

    }




    .barbutton-two::before{
        content: "";
        background: linear-gradient(-5deg, cyan,purple);
        position: absolute;
        background-size: 600%;
        z-index: -1;
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        filter: blur(8px);
        animation: glowing 20s linear infinite;
        transition: opacity .3s ease;
        border-radius: 60px;
        opacity: 1;

    }


    .barbutton-three{
        display:flex;
        grid-column: 3/2;
        grid-row: 1/2;
        justify-content: center;
        align-items: center;
        width: 30%;
        height: 70%;
        margin-left: 65%;
        margin-top: 16%;
        border-radius: 60px;
        background-color: white;
        z-index: 1;
        position: relative;
        cursor: pointer;
    }


    .barbutton-three::after {
        content: "";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        background-color:white;
        border-radius: 60px;

    }
    
    
    .barbutton-three::before{
        content: "";
        background: linear-gradient(-5deg, cyan,purple);
        position: absolute;
        background-size: 600%;
        z-index: -1;
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        filter: blur(8px);
        animation: glowing 20s linear infinite;
        transition: opacity .3s ease;
        border-radius: 60px;
        opacity: 1;

    }




    a{
        font-size: clamp(7px,1vw,20px);
    }





    /* Burger Icon */
    .burger {
        width: 30px;
        margin-top: 60px;
        margin-left: 40px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        cursor: pointer;
        z-index: 10000;
        grid-column: 4/4;
        grid-row: 1/1;
        display: none;
    }

    .burger span {
        width: 100%;
        height: 3px;
        background: white;
        
        
    }

    /* Sidebar */
    .sidebar {
        position: fixed;
        top: 0;
        left: -250px; /* hidden by default */
        width: 250px;
        height: 100vh;
        background: #1a1a1a;
        display: flex;
        flex-direction: column;
        padding: 80px 30px;
        gap: 25px;
        transition: 0.4s ease;
        z-index: 9999;
        display: none;
        
    }

    .sidebar.active {
        left: 0; /* slides in */
        
    }

    /* Links */
    .sidebar a {
        text-decoration: none;
        color: white;
        font-size: 18px;

    }


    /* Close Button */
    .close-btn {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 24px;
        color: white;
        cursor: pointer;

    }








    .footer-box{
        display: flex;
        justify-content: space-between;
        align-items: end;
        grid-column: 1 / 5;
        grid-row: 3 / 3;
        width: 99%;
        padding-top: 25%;
        height: 50%;
        text-align: center;
        color: white;
        font-size: clamp(10px,2vw,20px);
        font-family: Josefin Slab;

        
        
    }



    .text-one{

        line-height: 0.5;
        
    }





    #about-me{
        display:grid;
        background-color: black;
        grid-template-columns: 50% 50% ;
        grid-template-rows: 120% 120% ;
        padding-bottom: 60%;
        
        
        
        
    }


    .righttext-box{
        grid-column: 2/ 3;
        grid-row: 1 / 3;
        margin-left: 15%;
        width: 80%;
        height: 90%;
        margin-top: 30%;
    

    }



    .right-sectiontext{
        text-align: center;
        color: white;
        font-size: clamp(15px,3vw,60px);
        line-height: 1.8;
        height: 50%;
        font-family: Josefin Slab;
    }




    .carousel{

        
        


        display: none;



    }





    .bento-section{
        grid-column: 1 / 1;
        grid-row: 1 / 3;
        margin-top: 30%;
        display: flex;
        justify-content: flex-start;
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: 10% 16% 10% ;



    }











    .Zillow-img{

       grid-column: 1/3;
       grid-row:1/2 ;
       width: 100%;
       height: 100%;

    }



    .zlogo-img{
        grid-column: 2/4;
        grid-row: 1/2;
        width: 9%;
        height: 7%;
        margin-top: 65%;
        padding-left: 13%;
        z-index: 1;
        position: relative;
        
        
    }


    .z-text{

        color: white;
        grid-column:2/4 ;
        grid-row: 1/1;
        margin-top:23%;
        margin-left: -26%;
        font-size: clamp(15px,1vw,30px);
        z-index: 1;
        font-family: Gruppo;
        
    }

    .ztext{
        color: white;
        grid-column:2/4 ;
        grid-row: 1/1;
        margin-top: 58%;
        margin-left: -9%;
        font-size: clamp(10px,2vw,40px);
        z-index: 1;
        font-family: Gruppo;
        
    }


    .z-button{
        color: white;
        grid-column: 1/4;
        grid-row: 1/2;
        z-index: 1;
        display: flex;
        flex-direction: row;
        gap: 7%;
        padding-top: 48%;
        margin-left:9% ;
        height: 19%;
        font-family: Josefin Slab;
        
        

    }



    .barbutton-one{
        color: black;
        text-decoration: none;
    }

    .barbutton-two{
        color: black;
        text-decoration: none;
    }
    .barbutton-three{
        color: black;
        text-decoration: none;
    }



    .btn-b{
        border-radius: 50px;
        background: linear-gradient(rgba(73, 73, 6, 0.418),rgb(104, 90, 14));
        width: 16%;
        height: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 5px solid white;
        font-size: clamp(5px,1vw,20px);
        

    }






    .btn-s{
        border-radius: 50px;
        background: linear-gradient(rgba(73, 73, 6, 0.418),rgb(104, 90, 14));
        width: 16%;
        height: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 5px solid white;
        font-size: clamp(5px,1vw,20px);
        

    }




    .btn-r{
        border-radius: 50px;
        background: linear-gradient(rgba(73, 73, 6, 0.418),rgb(104, 90, 14));
        width: 16%;
        height: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 5px solid white;
        font-size: clamp(5px,1vw,20px);
        

    }



    .btn-f{
        border-radius: 50px;
        background: linear-gradient(rgba(73, 73, 6, 0.418),rgb(104, 90, 14));
        width: 16%;
        height: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 5px solid white;
        font-size: clamp(5px,1vw,20px);
        

    }


    .me-img{
        grid-column: 1/2;
        grid-row: 2/2;
        width:95%;
        height: 60%;
        border-radius: 70%;
        left: 6%;
        margin-top: 10%;
        

    }









    .h-logo{
        
        grid-column: 2/ 3;
        grid-row: 2 / 3;
        margin-top:125%;
        margin-left: 9%;
        width: 10%;
        height: 6%;
        z-index: 1;
        

        
    }

    .p-logo{
        grid-column: 2/ 3;
        grid-row: 2 / 3;
        margin-top:123%;
        margin-left: 33%;
        width: 13%;
        height: 8%;
        z-index: 1;
        

        
    }

    .s-logo{
        grid-column: 2/ 3;
        grid-row: 2 / 3;
        margin-top:123%;
        margin-left:57%;
        width: 13%;
        height: 8%;
        z-index: 1;
        

        
    }

    .m-logo{
        grid-column: 2/ 3;
        grid-row: 2 / 3;
        margin-top:125%;
        margin-left:85%;
        width: 10%;
        height: 5%;
        z-index: 1;
        

        
    }

    .gucci-text{

        display:flex;
        flex-direction: row;
        justify-content: space-around;
        color: #fff;
        grid-column: 2/ 3;
        grid-row: 3 / 3;
        z-index: 1;
        margin-top:-52%;
        margin-left:2%;
        font-family: Kapakana;
        font-size: clamp(3px,1.6vw,30px);
        cursor: pointer;
        
    }

    .Gucci-img{
        grid-column: 2/ 3;
        grid-row: 2 / 2;
        width: 100%;
        height: 75%;
        border-radius: 40px;
        margin-top: 10%;
        
        

    }


    .glogo-img{

        grid-column: 2/3;
        grid-row: 2/3;
        width:90%;
        height: 30%;
        margin-top: 40%;
        margin-left: 5%;
        z-index: 1;
        
        
    }



    .Logo2-img{

        grid-column: 2/ 1;
        grid-row: 2/2 ;
        margin-top: 140%;
        width: 90%;
        margin-left: 35%;
        height: 30%;
        
    }


    .Coffee-img{


        grid-column: 1/3;
        grid-row:3/3;
        width: 100%;
        height: 100%;
        

    }



    .coffee-text{


        grid-column: 1/3;
        grid-row:3/3;
        display: flex;
        justify-content: center;
        flex-direction: row;
        gap:40%;
        margin-top: 25%;
        margin-right: -50%;
        color: #fff;
        font-size: clamp(15px,2vw,30px);
        font-family: Italianno;
        
    }


    .coffee-txt{

        
        grid-column: 1/3;
        grid-row:3/3;
        display: flex;
        justify-content: center;
        flex-direction: row;
        gap:40%;
        margin-top: 15%;
        margin-right: -30%;
        color: #fff;
        font-size: clamp(5px,2vw,30px);
        font-family: Italianno;
        
    }


    .coffee-btn{
        
        display:flex;
        justify-content: center;
        align-items: center;
        grid-column: 1/ 3 ;
        grid-row: 3/3 ;
        background:linear-gradient(rgb(51, 21, 21)-20%,rgb(112, 68, 26));
        margin-left: 40% ;
        margin-top:50%;
        width: 20%;
        height: 10%;
        border-radius: 50px;
        border:3px solid white;
        z-index: 1;
        color: white;
        font-size: clamp(5px,1.5vw,33px);
        font-family: Italianno;
        
    }


    .footer{
        position: relative;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        text-align: center;
        background-color: black;
        padding-bottom: 5% ;
        font-family: Josefin Slab;
        
        
    }



    .sec2text-one{
        color: white;
        font-size: clamp(60%,2vw,20px);

    }


    .sec2text-two{
        color: white;
        font-size: clamp(60%,2vw,20px);
        line-height: 0.9;

    }




    .sec2text-three{
        color: white;
        font-size: clamp(60%,2vw,20px);
        line-height: 0.9;

    }




    .fivestar-img{
        width: 40%;
        height: 50%;
    }



    .whitelogo-img{
        width: 40%;
        height: 20%;
    }


    .clock-img{
        width:20%;
        height: 10%;
    }









    #about-us{

        background-color: white;
        padding-bottom: 100%;
        max-width: 100%;

    }

    .sectionthree-grid{

        
        display:grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: 37% 37%  ;




    }

    .gradient-background{

        position: relative;
        grid-column: 1 /  3;
        grid-row: 2 / 4;
        max-width: 45%;
        max-height: 90%;
        top: -30%;
        left: 2%;
        border-radius: 20px;
        background:linear-gradient( rgb(233, 67, 95), orange);
    }


    .gradient-text{
        color: white;
        font-size: clamp(12px, 3vw, 70px);
        line-height: 1.5;
        font-family: Kreon;
        
    
    }



    .space-img{
        position: relative;
        top: -35%;
        left:-6%;
        grid-column: 2 / 4;
        grid-row: 2 / 5;
        max-height: 100%;
        max-width: 60%;
        border-radius: 47%;
        transform: rotate(-15deg);
    }


    .question-img{

        position: relative;
        grid-column: 2/ 4;
        grid-row: 2 / 4;
        max-height: 100%;
        width: 50%;
        left: 40%;
        top: -35%;
        transform: rotate(10deg);

    } 





    .nebula-img{

        position: relative;
        grid-column: 2 / 2;
        grid-row: 3 / 3;
        height:90%;
        max-width: 90%;
        right: -2%;
        top: -120%;
        transform: rotate(-5deg);

    }




    .history-img{
        
        
        position: relative;
        top: -30%;
        right: -8%;
        grid-column:2 / 3;
        grid-row: 3/ 3;
        width: 80%;
        height: 70%;
        transform: rotate(4deg);
        
    }



    .vogue-img{

        position: relative;
        grid-column: 2/3;
        grid-row: 6/7;
        max-height: 130%;
        max-width: 70%;
        border-radius: 10%;
        top: -230%;
        left:-50%;
        transform: rotate(15deg);
    }




    .jazzmin-img{

        position: relative;
        grid-column: 3/1;
        grid-row: 5/5;
        top: -170%;
        left: 5%;
        width: 25%;
        transform: rotate(-14deg);
    }













    #contact-us{

        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: 50% 50% 50%;
        padding-bottom:10%;
        
        
        
    }



    .wood-img{

        grid-column: 1/3;
        grid-row: 1/2;
        width: 100%;
        height: 350%;
        
    }



    #contact-us form{
        grid-column: 1/2;
        grid-row: 1/1;
        width: 110%;
        height: 130%;
        margin-left: 50%;
        margin-top: 20%;
        display: flex;
        justify-content: center;
        border-radius: 2%;
        background: rgb(255, 255, 255,0.1);
        backdrop-filter: blur(120px);
        flex-wrap: wrap;
    }


    


    #contact-us form input{
        width: 50%;
        height: 10%;
        outline: none;
        border: none;
        background: none;
        font-size: 20px;
        color: white;
        border-bottom: 2px solid white;
        
    }


    #contact-us #button{
        border: none;
        background: white;
        border-radius: 70px;
        color: black;
        cursor: pointer;
        

    }
    

    #contact-us form input::placeholder{
        color: white;
    }





    .cont-icon img{
        position: absolute;
        max-width: 26%;
        max-height: 15%;
        margin-top: 51%;
        margin-left: 5%;
        
    }




    .email-icon img{
        position: absolute;
        max-width: 26%;
        max-height: 15%;
        margin-top: 73%;
        margin-left: -45%;
        

    }




    .ig-icon img{
        position: absolute; 
        max-width:26%;
        max-height: 15%;
        margin-top: 42%;
        margin-left: 5%;
    }

    

    .phone-img{

        position: absolute;
        max-width: 26%;
        max-height: 15%;
        margin-top: 101%;
        margin-left: 5%;
        display: none;
        
    }



    .phone-text{

        display: inline-block;
        position: absolute;
        background: linear-gradient(900deg,lime,orange);
        font-size: clamp(15px, 3vw, 80px);
        font-family: Josefin Slab;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-top:105%;
        padding-left:50% ;
        
    }








    .email-img{
        
        position: absolute;
        max-width: 26%;
        max-height: 15%;
        margin-top: 123%;
        margin-left: 5%;
        display: none;
        

    }



    .email-text{

        display: inline-block;
        position: absolute;
        background: linear-gradient(900deg,lime,orange);
        font-size: clamp(10px, 4vw, 90px);
        font-family: Josefin Slab;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        padding-left: 50%;
        margin-top: 125%;
        
    }









    .ig-img{

        position: absolute; 
        max-width:26%;
        max-height: 15%;
        margin-top: 142%;
        margin-left: 5%;
        display: none;
    }



    .ig-text{

        display: inline-block;
        position: absolute;
        background: linear-gradient(900deg,lime,orange);
        font-size: clamp(10px, 4vw, 80px);
        font-family: Josefin Slab;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        padding-left: 50%;
        margin-top: 145%;
    }






}





















































































































@media (min-width:360px) and (max-width:1000px) {


    



    
    html,body{
    
     margin: 0;
     padding: 0;
     scroll-behavior: smooth;

    
    }

        



    .grid-container{
        
        
        display: grid;
        

    }


    .section-one{
        display: grid;
        grid-template-columns: repeat(4,25%);
        grid-template-rows: repeat(2,33%);

        

    }


    .dream-img{

        grid-row: 1 / 4;
        grid-column: 1 / 5;
        width:100%;
        height: 100%;
        
        
        
    }



    



    * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
    }

    body {
     font-family: Arial, sans-serif;
     background: #111;
    }

    /* Burger Icon */
    .burger {
     width: 30px;
     margin-top: 40px;
     margin-left: 40px;
     display: flex;
     flex-direction: column;
     gap: 6px;
     cursor: pointer;
     z-index: 10000;
     grid-column: 4/4;
     grid-row: 1/1;
    }

    .burger span {
     width: 100%;
     height: 3px;
     background: white;
     
    }

    /* Sidebar */
    .sidebar {
     position: fixed;
     top: 0;
     left: -250px; /* hidden by default */
     width: 250px;
     height: 100vh;
     background: #1a1a1a;
     display: flex;
     flex-direction: column;
     padding: 80px 30px;
     gap: 25px;
     transition: 0.4s ease;
     z-index: 9999;
    }

    .sidebar.active {
     left: 0; /* slides in */
    }

    /* Links */
    .sidebar a {
     text-decoration: none;
     color: white;
     font-size: 18px;
    }

    /* Close Button */
    .close-btn {
     position: absolute;
     top: 20px;
     right: 20px;
     font-size: 24px;
     color: white;
     cursor: pointer;
    }




    .nav-bar{

        display: grid;
        grid-template-columns: repeat(2,50%);
        grid-template-rows: repeat(2, 50%);
        align-items: center;
        grid-column: 2/4;
        grid-row: 1/2;
        background-color:black;
        width: 100%;
        height: 40%;
        border-radius: 70px;
        display: none;
        


    }

    .Logo-img{
        grid-column:1/1;
        grid-row: 1/2;
        width: 80rem;
        height: 150%;
        margin-top: 3%;
        z-index: 1;

    }



    .barbutton-one{
        display:flex;
        grid-column: 1/2;
        grid-row: 1/2;
        justify-content: center;
        align-items: center;
        width: 30%;
        height: 70%;
        margin-top: 16%;
        margin-left: 95%;
        border-radius: 30px;
        background-color: white;
        z-index: 1;
        position: relative;
        cursor: pointer;
            

    }


    .barbutton-one::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px; 

        background: linear-gradient(60deg, cyan, purple);

        -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
                mask-composite: exclude;

        filter: drop-shadow(0 0 6px cyan)
                drop-shadow(0 0 6px purple);

    }



    .barbutton-two{
        display:flex;
        grid-column: 3/2;
        grid-row: 1/2;
        justify-content: center;
        align-items: center;
        width: 30%;
        height: 70%;
        margin-left: 30%;
        margin-top: 16% ;
        border-radius: 30px;
        background-color: white;
        z-index: 1;
        position: relative;
        cursor: pointer;
    }


    .barbutton-two::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px; 

        background: linear-gradient(60deg, cyan, purple);

        -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
                mask-composite: exclude;

        filter: drop-shadow(0 0 6px cyan)
                drop-shadow(0 0 6px purple);

    }



    .barbutton-three{
        display:flex;
        grid-column: 3/2;
        grid-row: 1/2;
        justify-content: center;
        align-items: center;
        width: 30%;
        height: 70%;
        margin-left: 65%;
        margin-top: 16%;
        border-radius: 30px;
        background-color: white;
        z-index: 1;
        position: relative;
        cursor: pointer;
    }


    .barbutton-three::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px; 

        background: linear-gradient(60deg, cyan, purple);

        -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
                mask-composite: exclude;

        filter: drop-shadow(0 0 6px cyan)
                drop-shadow(0 0 6px purple);

    }



    a{
        font-size: clamp(7px,1vw,20px);
    }

    .welcome-box{
        grid-column: 1/3;
        grid-row: 2/2;
        left: 40%;
        width: 198%;
        height: 40%;
        font-size: clamp(5px,2vw,20px);
    }


    .welcome-text{
       color: white;
       padding-left: 44%;    
    }



    .footer-box{
        display: flex;
        justify-content: space-between;
        align-items: end;
        grid-column: 1 / 5;
        grid-row: 3 / 3;
        width: 99%;

        padding-top: 20%;
        height: 99%;
        text-align: center;
        color: white;
        font-size: clamp(10px,2vw,20px);
        
        font-family: Josefin Slab;

        
        
    }



    .text-one{

        line-height: 1.2;
        
    }





    #about-me{
        display:grid;
        background-color: black;
        grid-template-columns: 100%;
        grid-template-rows: 90% 60% ;
        padding-bottom: 150%;
        
        
        
        
    }


    .righttext-box{
        grid-column: 1/ 1;
        grid-row: 1 / 1;
        margin-left: 0%;
        width: 98%;
        max-height: 60%;
        margin-top: 30%;
    
    }



    .right-sectiontext{
        text-align: center;
        color: white;
        font-size: clamp(16px,5vw,40px);
        line-height: 2.2;
        height: 50%;
        font-family: Josefin Slab;
    }



    .bento-section{
        display: none;
    }



    .carousel{
    
       
        
        display:grid;
        grid-auto-flow: column;
        grid-auto-columns: 63%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        grid-row:2/2 ;
        align-items: center;
        




    }








    .card-img{

        background-color: #1a1a1a;
        padding: var(--size-3);
        background: var(--surface-2);
        border-radius: var(--radius-2) ;
        position: relative;
        
    }




    .card-img > img{

        inline-size: 100%;
        aspect-ratio: 35/29;
        margin: 5%;
        padding-left: 5%;
        object-fit: cover;
    }


    
    


    


    


    


        
        
    



    .card-img .zlogo-img{
        position:absolute;
        width:12%;
        height: 8%;
        margin-top:-32%;
        margin-left:62%;
        

        
    }


    .card-img h1{

        color: white;
        position: absolute;
        margin-top: -68%;
        margin-left:37%;
        font-size: clamp(10px,2vw,20px);
        font-family: Josefin Slab;
        
    }

    .card-img h2{
        color: white;
        position: absolute;
        margin-top: -30%;
        margin-left: 55%;
        font-size: clamp(10px,2vw,40px);
        font-family: Josefin Slab;
        
    }


    .z-button{
        color: white;
        position: absolute;
        width: 80%;
        height: 19%;
        grid-row: 1/2;
        z-index: 1;
        display: flex;
        flex-direction: row;
        padding-top: 57%;
        margin-right:15% ;
        display: none;
        

    }






    .btn-b{
        border-radius: 30px;
        background: linear-gradient(rgba(73, 73, 6, 0.418),rgb(104, 90, 14));
        width: 16%;
        height: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 5px solid white;
        font-size: clamp(15px,1vw,20px);
        display: none;

    }






    .btn-s{
        border-radius: 30px;
        background: linear-gradient(rgba(73, 73, 6, 0.418),rgb(104, 90, 14));
        width: 16%;
        height: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 5px solid white;
        font-size: clamp(15px,1vw,20px);
        display: none;

    }




    .btn-r{
        border-radius: 30px;
        background: linear-gradient(rgba(73, 73, 6, 0.418),rgb(104, 90, 14));
        width: 16%;
        height: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 5px solid white;
        font-size: clamp(15px,1vw,20px);
        display: none;

    }



    .card-img .btn-f{

        position: absolute;
        color: white;
        border-radius: 30px;
        background: linear-gradient(rgba(73, 73, 6, 0.418),rgb(104, 90, 14));
        width: 26%;
        height: 10%;
        margin-left: 47%;
        margin-top: -19%;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 3px solid white;
        font-size: clamp(7px,2vw,20px);
        cursor: pointer;
        font-family: Josefin Slab;
    
    }


    .me-img{
        grid-column: 1/ 3;
        width: 69%;
        max-height: 85%;
        border-radius: 70%;
        left: 6%;
        margin-top: 10%;
        display: none;
    }



    .gucci-buttons{
        grid-column: 1/2 ;
        grid-row: 2/2;
        width: 10%;
        height: 8%;
        padding-top: 105%;
        margin-left: 10%;
        color: white;
        z-index: 1;
        
        display: none;
    }

    

    .gucci-text{
     display:flex;
     flex-direction: row;
     justify-content: space-between;
     color: #fff;
     grid-column: 2/ 3;
     grid-row: 3 / 3;
     z-index: 1;
     margin-top:-30%;
     margin-left:2%;
     font-family: Kapakana;
     font-size: clamp(5px,1.5vw,30px);
     display: none;
    }


    
    .h-btn{
        font-size: 80%;
        left: 14%;
        display: none;
        
    }


    .card-img .h-logo{
        position: absolute;
        margin-top: -18%;
        margin-left: 15%;
        width: 15%;
        height: 9%;
        z-index: 1;
        cursor: pointer;
        
        
    }


    .p-btn{
        font-size: 80%;
        left: 35%;
        display:none;
    }




    .card-img .p-logo{
    
    
        position: absolute;
        margin-top: -18%;
        margin-left: 35%;
        width: 17%;
        height: 9%;
        z-index: 1;
        cursor:pointer;
        
        
    }



    .s-btn{
        font-size: 70%;
        left: 58%;
        display: none;
    }


    .card-img .s-logo{

       
        position: absolute;
        margin-top: -17%;
        margin-left: 58%;
        width: 20%;
        height: 9%;
        z-index: 1;
        cursor: pointer;
        
    }


    .m-btn{
        font-size: 80%;
        left: 80%;
        display:none;
    }


    .card-img .m-logo{
      
            
        position: absolute;
        margin-top: -18%;
        margin-left: 85%;
        width: 12%;
        height: 9%;
        z-index: 1;
        cursor: pointer;
    }


    


    .card-img .glogo-img{
      
        position:absolute;
        margin-left:36%;
        margin-top: -35%;
        width: 40%;
        height: 20%;

    }



    

    .Logo2-img{

        grid-column: 4 / 1;
        grid-row: 4/4;
        margin-right: 42%;
        margin-top: 5%;
        width: 60%;
        height: 97%;
        display: none;  
    }


    

    .card-img h3{

     
     position: absolute;
     margin-top:-65%;
     margin-left: 62%;
     color: #fff;
     font-size: clamp(15px,3vw,40px);
     font-family: Italianno;

     
     
    }



    .card-img h4{


     position: absolute;
     margin-top:-55%;
     margin-left: 72%;
     color: #fff;
     font-size: clamp(15px,3vw,40px);
     font-family: Italianno;

     
    }


    .card-img .coffee-btn{

        position: absolute;
        
        display:flex;
        justify-content: center;
        align-items: center;
        background:linear-gradient(rgb(51, 21, 21)-20%,rgb(112, 68, 26));
        margin-left:40% ;
        margin-top:-18%;
        width: 35%;
        height: 10%;
        border-radius: 50px;
        border:3px solid white;
        color: white;
        font-size: clamp(5px, 2vw, 20px);
        cursor: pointer;
        font-family: Italianno;

    
    }


    .footer{
        position: relative;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        text-align: center;
        background-color: black;
        padding-bottom: 5% ;
        
        
    }



    .sec2text-one{
        color: white;
        font-size: clamp(60%,2vw,20px);
         font-family: Josefin Slab;

    }


    .sec2text-two{
        color: white;
        font-size: clamp(60%,2vw,20px);
        line-height: 1.5;
        font-family: Josefin Slab;

    }




    .sec2text-three{
        color: white;
        font-size: clamp(60%,2vw,20px);
        line-height: 1.5;
        font-family: Josefin Slab;

    }




    .fivestar-img{
        width: 40%;
        height: 50%;
    }



    .whitelogo-img{
        width: 40%;
        height: 20%;
    }


    .clock-img{
        width:20%;
        height: 10%;
    }









    #about-us{
        background:linear-gradient( rgb(236, 150, 22)30%, rgb(197, 14, 127), white 70%);
        padding-bottom: 100%;
        
    }

    .sectionthree-grid{

        display:grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: repeat(6,30%) ;


    }

    .gradient-background{

        
        grid-column: 1/3;
        grid-row: 1/ 3;
        max-width:95%;
        top: 15%;
        left: 2%;
        background:none;
    }


    .gradient-text{
        color: white;
        font-size: clamp(13px, 5vw, 50px);
        line-height: 1.5;
        direction: ltr;
        font-family: Kreon;
        
        
    
    }



    .space-img{
        
        
        
        grid-column: 1/1;
        grid-row: 4/ 4;
        left: 30%;
        margin-top: -20%;
        height: 55%;
        width: 70%;
        border-radius: 47%;
        transform: rotate(-15deg);
        display: none;
    }


    .question-img{


        grid-column: 2/ 2;
        grid-row: 4/4;
        height: 39%;
        width: 75%;
        left: -5%;
        transform: rotate(10deg);
        display: none;
        
        

    } 





    .nebula-img{

        
        grid-column: 2 / 1;
        grid-row: 4/4;
        margin-top: -120%;
        left: 20%;
        height:130%;
        width: 90%;
        transform: rotate(-13deg);
        display: none;
        
    

    }




    .history-img{
        
        
        
        
        grid-column:2 / 2;
        grid-row: 4/4;
        left: 20%;
        margin-top: -160%;
        width: 70%;
        height: 130%;
        transform: rotate(3deg);
        
        display: none;
        
    }



    .vogue-img{

        
        grid-column: 1/3;
        grid-row: 3/3;
        max-height: 150%;
        width: 50%;
        border-radius: 10%;
        top: -30%;
        left:-5%;
        transform: rotate(-5deg);
        display: none;

    }




    .jazzmin-img{

        
        grid-column: 1/3;
        grid-row: 4/3;
        top: -110%;
        left:65%;
        width: 35%;
        border-radius: 50px;
        transform: rotate(0deg);
        display: none;
        
    }




   











    #contact-us{

        
        background-color: black;
        padding-bottom: 90%;
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: 70% 70% 70% ;
        
        
        
    }



    .wood-img{

        grid-column: 1/3;
        grid-row: 1/2;
        width: 100%;
        height: 350%;
        
    }



    #contact-us form{
        grid-column: 1/2;
        grid-row: 1/1;
        width: 130%;
        height: 130%;
        margin-left:40%;
        margin-top: 20%;
        display: flex;
        justify-content: center;
        border-radius: 2%;
        background: rgb(255, 255, 255,0.1);
        backdrop-filter: blur(120px);
        flex-wrap: wrap;
    }


    


    #contact-us form input{
        width: 80%;
        height: 10%;
        outline: none;
        border: none;
        background: none;
        font-size: clamp(15px,1vw,20px);
        color: white;
        border-bottom: 2px solid white;
        
    }


    #contact-us #button{
        border: none;
        background: white;
        border-radius: 70px;
        color: black;
        cursor: pointer;
        

    }
    

    #contact-us form input::placeholder{
        color: white;
    }





    .cont-icon img{
        position: absolute;
        max-width: 26%;
        max-height: 15%;
        margin-top: 51%;
        margin-left: 5%;
        display: none;   
    }


    
    .email-icon img{
        position: absolute;
        max-width: 26%;
        max-height: 15%;
        margin-top: 73%;
        margin-left: -45%;
        display: none;
        

    }



    
    .ig-icon img{
        position: absolute; 
        max-width:26%;
        max-height: 15%;
        margin-top: 42%;
        margin-left: 5%;
        display: none;
    }



    .phone-img{


        max-width: 20%;
        max-height: 15%;
        margin-top: 120%;
        margin-left: 5%;
        position: absolute;
        display: none;
    }



    .container {
     display: flex;
     justify-content: center;
     align-items: center;
    }

    .phone-text {
     background: linear-gradient(90deg, cyan, rgb(206, 14, 206), orange);
     font-size: clamp(110%, 5vw, 700%);
     font-family: 'Josefin Slab', serif;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     position: relative;
     top: 80%;
     left: 69%;
     display: none;
    }






    .email-img{
        
        position: absolute;
        max-width: 20%;
        max-height: 15%;
        margin-top: 160%;
        margin-left: 5%;
        
        

    }



    .email-text{

        display: inline-block;
        background: linear-gradient(900deg,cyan, rgb(206, 14, 206),orange);
        font-size: clamp(120%, 5vw, 700%);
        font-family: Josefin Slab;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        padding-left: 35%;
        margin-top: 167%;
        position: absolute;
    }









    .ig-img{

        position: absolute;
        max-width: 20%;
        max-height: 15%;
        margin-top:200%;
        margin-left: 5%;
    }



    .ig-text{

        display: inline-block;
        background: linear-gradient(900deg,cyan, rgb(206, 14, 206),orange);
        font-size: clamp(120%, 5vw, 700%);
        font-family: Josefien Slab;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        padding-left: 40%;
        margin-top:207%;
        position: absolute;
    }

















    
}