/* =========================
    GOOGLE FONTS
========================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* =========================
    RESET
========================= */

*{
     margin:0;
     padding:0;
     box-sizing:border-box;
     font-family:'Poppins',sans-serif;
     scroll-behavior:smooth;
}

body{
     background:#000;
     color:white;
     overflow-x:hidden;
}

/* =========================
    NAVBAR
========================= */

header{
     position:fixed;
     top:0;
     left:0;
     width:100%;
     padding:20px 8%;
     display:flex;
     justify-content:space-between;
     align-items:center;
     background:rgba(0,0,0,0.85);
     backdrop-filter:blur(10px);
     z-index:999;
}

.logo{
     font-size:1.8rem;
     font-weight:700;
     color:#d4af37;
}

nav ul{
     display:flex;
     list-style:none;
     gap:35px;
}

nav ul li a{
     text-decoration:none;
     color:white;
     transition:0.3s;
}

nav ul li a:hover{
     color:#d4af37;
}

/* =========================
    HERO SECTION
========================= */

.hero{
    min-height:100vh;
    background:#000;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
}

/* Logo Watermark */

.logo-bg{
     position:absolute;
     top:50%;
     left:50%;
     transform:translate(-50%,-50%);

     width:900px;
     height:900px;

     background:url("images/logo.png");
     background-repeat:no-repeat;
     background-position:center;
     background-size:contain;

     opacity:0.12
     ;

     z-index:1;
}

/* Hero Layout */

.hero-content{
     width:90%;
     margin:auto;

     display:flex;
     align-items:center;
     justify-content:space-between;

     position:relative;
     z-index:2;
}

.hero-text{
     width:55%;
}

.tagline{
     color:#d4af37;
     letter-spacing:4px;
     margin-bottom:20px;
     font-size:1rem;
}

.hero h1{
     font-size:6rem;
     line-height:1;
     margin-bottom:15px;
}

.hero h1 span{
     color:#d4af37;
}

.hero h2{
     color:#d4af37;
     margin-bottom:20px;
}

.intro{
     color:#d0d0d0;
     line-height:1.8;
     max-width:650px;
}

.btn{
     display:inline-block;
     margin-top:35px;
     padding:14px 35px;
     background:#d4af37;
     color:black;
     text-decoration:none;
     font-weight:600;
     border-radius:50px;
     transition:0.3s;
}

.btn:hover{
     transform:translateY(-4px);
}

/* Hero Image */

.hero-image{
     width:40%;
}

.hero-image img{
     width:100%;
     border-radius:20px;

     box-shadow:
     0 0 30px rgba(212,175,55,0.3),
     0 0 60px rgba(212,175,55,0.15);

     transition:0.4s;
}

.hero-image img:hover{
     transform:scale(1.02);
}

/* =========================
    ABOUT MADHU
========================= */

.about-owner{
     padding:120px 10%;
     background:#090909;
}

.owner-container{
     display:flex;
     align-items:center;
     gap:70px;
}

.owner-image{
     flex:1;
}

.owner-image img{
     width:100%;
     border-radius:20px;
     box-shadow:0 0 25px rgba(212,175,55,0.2);
}

.owner-text{
     flex:1;
}

.owner-text h2{
     font-size:3rem;
     margin-bottom:20px;
     color:#d4af37;
}

.owner-text p{
     color:#d0d0d0;
     line-height:2;
}

/* =========================
    PORTFOLIO
========================= */

.portfolio{
     padding:120px 10%;
     background:black;
}

.section-title{
     text-align:center;
     font-size:3rem;
     color:#d4af37;
     margin-bottom:60px;
}

.gallery{
     display:grid;
     grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
     gap:25px;
}

.gallery img{
     width:100%;
     border-radius:15px;
     transition:0.4s;
     cursor:pointer;
}

.gallery img:hover{
     transform:scale(1.05);
}

/* =========================
    SERVICES
========================= */

.services{
     padding:120px 10%;
     background:#080808;
}

.service-grid{
     display:grid;
     grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
     gap:25px;
}

.service-card{
     background:#111;
     padding:30px;
     border-radius:15px;
     transition:0.3s;
}

.service-card:hover{
     transform:translateY(-10px);
     border:1px solid #d4af37;
}

.service-card h3{
     color:#d4af37;
     margin-bottom:15px;
}

.service-card p{
     color:#d0d0d0;
}

/* =========================
    CONTACT
========================= */

.contact{
     padding:120px 10%;
     background:black;
     text-align:center;
}

.contact h2{
     color:#d4af37;
     margin-bottom:20px;
     font-size:3rem;
}

.contact p{
     color:#d0d0d0;
}

/* =========================
    FOOTER
========================= */

footer{
     background:#050505;
     text-align:center;
     padding:30px;
     color:#777;
}

/* =========================
    WHATSAPP BUTTON
========================= */

.whatsapp{
     position:fixed;
     bottom:25px;
     right:25px;

     width:60px;
     height:60px;

     background:#25d366;
     color:white;

     display:flex;
     justify-content:center;
     align-items:center;

     border-radius:50%;
     text-decoration:none;
     font-size:28px;

     z-index:999;
}

/* =========================
    SCROLL ANIMATION
========================= */

.fade-in{
     opacity:0;
     transform:translateY(40px);
     transition:1s;
}

.fade-in.show{
     opacity:1;
     transform:translateY(0);
}

/* =========================
    MOBILE RESPONSIVE
========================= */

@media(max-width:900px){

     .hero-content{
          flex-direction:column-reverse;
          text-align:center;
     }

     .hero-text{
          width:100%;
          margin-top:40px;
     }

     .hero-image{
          width:80%;
     }

     .hero h1{
          font-size:4rem;
     }

     .owner-container{
          flex-direction:column;
     }

     nav ul{
          gap:15px;
     }
}
```css
/* ==========================
   WHATSAPP + INSTAGRAM BUTTONS
========================== */

.btn{
    display:inline-block;
    margin-top:20px;
}

.insta-btn{
    margin-left:15px;
}

/* ==========================
   LOGO WATERMARK
========================== */

.logo-bg{
    opacity:0.18 !important;
}

/* ==========================
   CONTACT LINKS
========================== */

.contact a{
    color:#d4af37;
    text-decoration:none;
    font-weight:600;
}

.contact a:hover{
    text-decoration:underline;
}

/* ==========================
   PORTFOLIO IMAGE EFFECTS
========================== */

.gallery img{
    transition:0.4s ease;
    cursor:pointer;
}

.gallery img:hover{
    transform:scale(1.04);
}

/* ==========================
   MOBILE RESPONSIVE
========================== */

@media (max-width:768px){

    .hero-content{
        flex-direction:column;
        text-align:center;
    }

    .hero-image img{
        width:90%;
        max-width:350px;
    }

    .owner-container{
        flex-direction:column;
        text-align:center;
    }

   
.gallery img{
    width:100%;
    height:320px;
    object-fit:cover;

    border-radius:12px;

    transition:0.4s ease;

    cursor:pointer;
}

.gallery img:hover{
    transform:scale(1.03);
}



    nav ul{
        gap:15px;
    }
}
.whatsapp{
    position:fixed;
    bottom:25px;
    right:25px;

    width:65px;
    height:65px;

    background:#25D366;
    color:white;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    text-decoration:none;

    font-size:28px;

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

    z-index:9999;

    transition:0.3s;
}

.whatsapp:hover{
    transform:scale(1.1);
}
```css
/* ==========================
   BOOKING SECTION
========================== */

.booking-section{
    text-align:center;
    padding:80px 20px;
    background:rgba(255,255,255,0.03);
}

.booking-section h2{
    font-size:2rem;
    margin-bottom:20px;
}

.booking-section p{
    max-width:700px;
    margin:auto;
    margin-bottom:30px;
}
```