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

html{
    font-size:16px;
}

@media(max-width:1200px){
    html{
        font-size:15px;
    }
}

@media(max-width:768px){
    html{
        font-size:14px;
    }
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins', sans-serif;
    background:#111111;
    color:#f5f5f5;
    line-height:1.7;
}
body{
    -webkit-font-smoothing:antialiased;
}
img{
    max-width:100%;
    height:auto;
    display:block;
}

/* ================= HEADINGS ================= */
h1,h2,h3,h4{
    font-family:'Playfair Display', serif;
    letter-spacing:1px;
}

h1{
    font-size:clamp(28px, 5vw, 58px);
}

h2{ font-size:clamp(22px, 3vw, 40px); }
h3{ font-size:24px; }

p{
    color:#bbbbbb;
    font-size:16px;
}

/* ================= LINKS ================= */
a{
    text-decoration:none;
    color:inherit;
    transition:0.3s ease;
}

/* ================= CONTAINER ================= */
.container{
    max-width:1300px;
    width: 100%;
    margin:auto;
    padding:0 6%;
}

@media(max-width:768px){
    .container{
        padding:0 5%;
    }
}




/* ================= BUTTON ================= */
.btn-gold{
    display:inline-block;
    padding:14px 32px;
    background:#c6a75e;
    color:#111;
    font-weight:600;
    border-radius:4px;
    transition:0.3s ease;
}

.btn-gold:hover{
    background:#e0c178;
}

@media(max-width:480px){
    .btn-gold,
    .btn-outline{
        width:100%;
        text-align:center;
    }
}




/* ================= HEADER BASE ================= */
.header{
    background:#1a1a1a;
    padding:22px 0;
    position:sticky;
    top:0;
    z-index:999;
    border-bottom:1px solid rgba(255,255,255,0.05);
}

.header-flex{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.header{
    min-height:80px;
}


/* Dummy Logo Style */
/* ===== HEADER LOGO LAYOUT FIX ===== */

.logo{
    display:flex;
    align-items:center;
    gap:15px;
}

.logo-img{
    height:80px;        /* fills header height properly */
    width:auto;
    object-fit:contain;
}

/* .tagline{
    font-size:11px;
    color:#bbbbbb;
    white-space:nowrap;
} */

.header-flex{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
@media(max-width:768px){
    .logo-img{
        height:55px;
    }

    
}
/* ================= NAVIGATION ================= */

.nav{
    display:flex;
    /* gap:55px;              luxury spacing */
    align-items:center;
    /* justify-content:flex-end;   push links right */

}
.nav{
    gap:55px;
}

@media(max-width:1200px){
    .nav{
        gap:30px;
    }
}


.nav a{
    font-size:16px;
    font-weight:500;
    letter-spacing:1px;
    padding:8px 0;
    color:#f5f5f5;
    position:relative;
    transition:0.3s ease;
}

.nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:0%;
    height:2px;
    background:#c6a75e;
    transition:0.3s ease;
}

.nav a:hover{
    color:#c6a75e;
}

.nav a:hover::after{
    width:100%;
}
@media(max-width:768px){

    .header-flex{
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
    }

    .nav{
        position:fixed;
        top:0;
        right:-100%;
        height:100vh;
        width:260px;
        background:#141414;
        flex-direction:column;
        padding:100px 30px;
        gap:30px;
        transition:0.4s ease;
        border-left:1px solid #2a2a2a;
        overflow-y: auto;
    }

    .nav.active{
        right:0;
    }

    .menu-toggle{
        display:block;
        z-index:1001;
    }
}



/* ================= FOOTER BASE ================= */
.footer{
    background:#1a1a1a;
    padding:70px 0 30px 0;
    border-top:1px solid rgba(255,255,255,0.05);
}

.footer p{
    font-size:14px;
    color:#888;
}

/* ================= WHATSAPP BUTTON ================= */
.whatsapp{
    position:fixed;
    bottom:25px;
    right:25px;
    width:55px;
    height:55px;
    background:#25d366;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    color:#fff;
    box-shadow:0 8px 20px rgba(0,0,0,0.4);
    z-index:999;
    transition:0.3s ease;
}

.whatsapp:hover{
    transform:scale(1.1);
}
@media(max-width:600px){
    .whatsapp{
        width:48px;
        height:48px;
        font-size:22px;
        bottom:18px;
        right:18px;
    }
}



/* ================= RESPONSIVE BASE ================= */

@media(max-width:992px){
    

    .nav{
        gap:20px;
    }
}



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

.hero{
    min-height:100vh;
    padding:120px 0;
    display:flex;
    align-items:center;
    position:relative;
    background:linear-gradient(rgba(0,0,0,0.85),rgba(0,0,0,0.85)),
    url('https://images.unsplash.com/photo-1503387762-592deb58ef4e') center/cover no-repeat;
}

.hero h1{
    font-size:58px;
    margin-bottom:25px;
    line-height:1.2;
}

.hero p{
    font-size:18px;
    max-width:650px;
    margin-bottom:35px;
    color:#cccccc;
}

@media(max-width:1200px){
    .hero h1{
        font-size:48px;
    }
}

@media(max-width:992px){
    .hero h1{
        font-size:42px;
    }

    .hero p{
        font-size:17px;
        max-width:100%;
    }
}

@media(max-width:768px){
    .hero h1{
        font-size:34px;
    }

    .hero p{
        font-size:16px;
    }
}

@media(max-width:480px){
    .hero h1{
        font-size:28px;
        line-height:1.3;
    }
}
@media(max-width:768px){
    .hero{
        padding:100px 0;
        min-height:auto;
    }
}
@media(max-width:480px){
    .hero{
        padding:80px 0;
    }
}





/* Outline Button */
.btn-outline{
    display:inline-block;
    padding:14px 32px;
    border:1px solid #c6a75e;
    color:#c6a75e;
    font-weight:600;
    border-radius:4px;
    transition:0.3s ease;
}

.btn-outline:hover{
    background:#c6a75e;
    color:#111;
}




section{
    scroll-margin-top:100px;
}





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

.about-section{
    background:#1a1a1a;
}

.about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

.about-image img{
    width:100%;
    border-radius:10px;
}

.about-content{
    max-width:600px;
}

.about-content h2{
    margin-bottom:25px;
    color:#c6a75e;
    font-size:40px;
}

.about-content p{
    margin-bottom:28px;
}


/* Responsive */
@media(max-width:992px){
    .about-grid{
        grid-template-columns:1fr;
        gap:40px;
    }
}

@media(max-width:1200px){
    .about-grid{
        gap:50px;
    }
}

@media(max-width:768px){
    .about-content{
        max-width:100%;
    }
}


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

.section-title{
    position:relative;
    text-align:center;
    margin-bottom:80px;
    font-size:40px;
    color:#c6a75e;
}
@media(max-width:768px){
    .section-title{
        font-size:28px;
    }
}


.section-title::after{
    content:"";
    width:90px;
    height:3px;
    background:#c6a75e;
    display:block;
    margin:18px auto 0 auto;
}

.services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:50px;
}

.service-card{
    background:#1a1a1a;
    padding:50px 40px;
    border:1px solid #2a2a2a;
    transition:0.4s ease;
}

.service-card:hover{
    border-color:#c6a75e;
    transform:translateY(-10px);
}

.service-card h3{
    margin-bottom:22px;
    font-size:26px;
}

.service-card p{
    max-width:100%;
}

/* Responsive */
.section{
    padding:120px 0;
}

@media(max-width:992px){
    .section{
        padding:90px 0;
    }
}
@media(max-width:992px){
    .services-grid{
        grid-template-columns:1fr;
    }
}


@media(max-width:576px){
    .section{
        padding:70px 0;
    }
}



/* ================= PACKAGES ================= */

.packages-section{
    background:#141414;
}

.packages-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:40px;
}

.package-card{
    background:#1a1a1a;
    padding:55px 35px;
    border:1px solid #2a2a2a;
    text-align:center;
    transition:0.4s ease;
}

.package-card:hover{
    border-color:#c6a75e;
    transform:translateY(-10px);   /* zoom effect */
}

.package-card h3{
    font-size:26px;
    margin-bottom:20px;
}

.package-card h4{
    margin:18px 0 25px 0;
    color:#c6a75e;
    font-weight:600;
    font-size:20px;
}

.package-card p{
    max-width:100%;
}

/* Premium Special Styling */
.package-card.premium{
    background:linear-gradient(145deg,#1a1a1a,#161616);
}

/* Premium hover stronger */
.package-card.premium:hover{
    border-color:#c6a75e;
    transform:translateY(-12px);
}
@media(max-width:1200px){
    .packages-grid{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:768px){
    .packages-grid{
        grid-template-columns:1fr;
    }
}

.quote-btn{
display:inline-block;
margin-top:20px;
padding:10px 22px;
background:#c6a875;
color:#000;
font-weight:600;
text-decoration:none;
border-radius:6px;
transition:0.3s ease;
}

.quote-btn:hover{
background:#fff;
color:#000;
transform:translateY(-2px);
}


/* ================= PROJECTS ================= */

.projects-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.projects-grid img{
    width:100%;
    height:280px;
    object-fit:cover;
    transition:0.4s ease;
    border-radius:6px;
}



@media(max-width:992px){
    .projects-grid img{
        height:220px;
    }
}

@media(max-width:600px){
    .projects-grid img{
        height:200px;
    }
}
@media(max-width:1200px){
    .projects-grid{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:600px){
    .projects-grid{
        grid-template-columns:1fr;
    }
}


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

.contact-section{
    background:#1a1a1a;
}

.contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:center;
}

/* Responsive */
@media(max-width:768px){
    .contact-grid{
        grid-template-columns:1fr;
    }
}

/* ================= MOBILE CSS ================= */
.menu-toggle{
    display:none;
    font-size:28px;
    cursor:pointer;
}




.fade-in{
    opacity:0;
    transform:translateY(30px);
    transition:0.8s ease;
}

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



.scroll-down{
    position:absolute;
    bottom:30px;
    left:50%;
    transform:translateX(-50%);
    animation: bounce 2s infinite;
    color:#c6a75e;
    font-size:20px;
}

@keyframes bounce{
    0%,100%{ transform:translate(-50%,0); }
    50%{ transform:translate(-50%,10px); }
}


.no-scroll{
    overflow:hidden;
}











/* ================= TESTIMONIALS ================= */

.testimonials-section{
    background:#141414;
}

.testimonials-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
}

.testimonial-card{
    background:#1a1a1a;
    padding:40px;
    border:1px solid #2a2a2a;
    transition:0.4s ease;
}

.testimonial-card:hover{
    border-color:#c6a75e;
    transform:translateY(-8px);
}

.stars{
    color:#c6a75e;
    margin-bottom:15px;
    font-size:18px;
}

.testimonial-card h4{
    margin-top:20px;
    font-size:15px;
    color:#888;
}

/* ===== Responsive Testimonials ===== */

@media(max-width:1200px){
    .testimonials-grid{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:768px){
    .testimonials-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .testimonial-card{
        padding:30px;
    }
}

@media(max-width:480px){
    .testimonial-card{
        padding:25px;
    }
}


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

.footer-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
}

.footer-links{
    display:flex;
    flex-wrap:wrap;
}

.footer-links span{
    margin-left:20px;
    cursor:pointer;
    color:#bbbbbb;
    font-size:14px;
    transition:0.3s ease;
}

.footer-links span:hover{
    color:#c6a75e;
}

/* ===== Responsive Footer ===== */

@media(max-width:600px){

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

    .footer-links{
        justify-content:center;
    }

    .footer-links span{
        margin:0 10px;
    }
}


/* ================= POLICY POPUP ================= */

.policy-popup{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.85);
    backdrop-filter:blur(4px);
    display:none;
    justify-content:center;
    align-items:center;
    padding:20px;
    z-index:2000;
    overflow-y:auto;
}

.policy-content{
    background:#1a1a1a;
    width:75%;
    max-width:900px;
    padding:50px;
    border-radius:8px;
    position:relative;
    max-height:85vh;
    overflow-y:auto;
    box-shadow:0 15px 40px rgba(0,0,0,0.6);
}

/* Title */
.policy-content h2{
    margin-bottom:25px;
    color:#c6a75e;
}

/* Paragraph spacing */
.policy-content p{
    margin-bottom:18px;
    line-height:1.7;
}

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

/* ===== Responsive Popup ===== */

@media(max-width:1200px){
    .policy-content{
        width:85%;
    }
}

@media(max-width:768px){
    .policy-content{
        width:95%;
        padding:35px;
    }
}

@media(max-width:480px){
    .policy-content{
        padding:25px;
    }
}


/* ================= SAFETY FIXES ================= */

/* Prevent horizontal scroll */
body{
    overflow-x:hidden;
}

/* Make images safe everywhere */
img{
    max-width:100%;
    height:auto;
    display:block;
}


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

.footer{
    background:#1a1a1a;
    padding:80px 0 40px 0;
    border-top:1px solid rgba(255,255,255,0.05);
}

.footer-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:60px;
    flex-wrap:wrap;
}

/* Left Column */
.footer-left h3{
    margin-bottom:20px;
    color:#c6a75e;
}

.footer-left p{
    margin-bottom:10px;
    color:#bbbbbb;
    font-size:15px;
}

/* Right Column */
.footer-right h3{
    margin-bottom:20px;
    color:#c6a75e;
}

.footer-right span{
    cursor:pointer;
    color:#bbbbbb;
    font-size:15px;
    transition:0.3s ease;
}

.footer-right span:hover{
    color:#c6a75e;
}

/* Divider */
.footer-divider{
    height:1px;
    background:#2a2a2a;
    margin:40px 0;
}

/* Social Icons */
.footer-social{
    text-align:center;
    margin-bottom:20px;
}

.footer-social a{
    margin:0 15px;
    font-size:20px;
    color:#bbbbbb;
    transition:0.3s ease;
}

.footer-social a:hover{
    color:#c6a75e;
}

/* Bottom Copyright */
.footer-bottom{
    text-align:center;
    font-size:14px;
    color:#888;
}

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

@media(max-width:768px){

    .footer-top{
        flex-direction:column;
        gap:40px;
    }

    .footer-left,
    .footer-right{
        width:100%;
    }

    .footer-right{
        margin-top:20px;
    }

}

/* ================= GALLERY ================= */

.gallery-grid,
.video-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

/* ===== IMAGES ===== */

.gallery-grid img{
    width:100%;
    aspect-ratio: 4 / 3;   /* clean consistent ratio */
    object-fit:cover;
    border-radius:6px;
    transition:0.4s ease;
}

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

/* ===== VIDEOS (MATCH IMAGE SIZE EXACTLY) ===== */

.video-grid video{
    width:100%;
    aspect-ratio: 4 / 3;   /* SAME AS IMAGES */
    object-fit:cover;
    border-radius:6px;
    background:#000;
    transition:0.4s ease;
}

.video-grid video:hover{
    transform:scale(1.05);
}

/* Hide extra items */
.hidden-img,
.hidden-video{
    display:none;
}

/* View More Arrow */
.gallery-down{
    text-align:center;
    margin-top:40px;
    cursor:pointer;
    color:#c6a75e;
    font-size:26px;
    transition:0.4s ease;
    animation: bounceArrow 2s infinite;
}

.gallery-down:hover{
    transform:scale(1.2);
}

.gallery-down i{
    transition:0.4s ease;
}

@keyframes bounceArrow{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(8px); }
}

/* Responsive */
@media(max-width:1200px){
    .gallery-grid,
    .video-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:600px){
    .gallery-grid,
    .video-grid{
        grid-template-columns:1fr;
    }
}



/* ===== Improve Header on Mobile ===== */

@media(max-width:768px){

    .logo-img{
        height:45px;
    }

    .tagline{
        display:none;   /* hides tagline on small devices */
    }

    .hero h1{
        line-height:1.3;
    }

    .hero-buttons{
        display:flex;
        flex-direction:column;
        gap:15px;
    }

    .hero-buttons a{
        width:100%;
        text-align:center;
    }
}

/* ================= MOBILE MENU FIX ================= */

/* Menu Icon */
.menu-toggle{
    display:none;
    font-size:28px;
    color:#f5f5f5;
    cursor:pointer;
    z-index:1002;
}

/* Mobile Navigation */
@media(max-width:768px){

    .menu-toggle{
        display:block;
    }

    .nav{
        position:fixed;
        top:0;
        right:-100%;
        height:100vh;
        width:260px;
        background:#141414;
        flex-direction:column;
        padding:100px 30px;
        gap:30px;
        transition:0.4s ease;
        border-left:1px solid #2a2a2a;
        overflow-y:auto;
        z-index:1001;
    }

    .nav.active{
        right:0;
    }

    .nav a{
        font-size:18px;
    }

}

/* ===== Improve Tablet Spacing ===== */

@media(max-width:992px){

    .gallery-grid img{
        height:220px;
    }

    .video-grid iframe{
        height:220px;
    }
}

/* ===== Fix Large Desktop Scaling ===== */

@media(min-width:1600px){

    .container{
        max-width:1400px;
    }

    .hero h1{
        font-size:64px;
    }
}