/* =====================================================
   JOYAZ BEAUTY SALON – HEADER ONLY CSS
   Black & Gold Luxury Theme
   ===================================================== */

/* ROOT COLORS */
:root{
    --black:#0e0e0e;
    --gold:#c9a24d;
    --gold-light:#e6c97a;
    --white:#ffffff;
}

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

body{
    font-family:'Poppins',sans-serif;
}

/* ================= HEADER ================= */
.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:rgba(14,14,14,0.95);
    z-index:1000;
    transition:all 0.4s ease;
    border-bottom:1px solid rgba(201,162,77,0.2);
}

/* SCROLLED HEADER */
.header.scrolled{
    background:#000;
    box-shadow:0 8px 30px rgba(0,0,0,0.6);
}

/* INNER WRAPPER */
.header-inner{
    max-width:1300px;
    margin:auto;
    padding:14px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

/* ================= LOGO ================= */
.logo img{
    height:55px;
    transition:transform 0.4s ease;
}

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

/* ================= NAV ================= */
.nav{
    display:flex;
    align-items:center;
    gap:28px;
}

/* LINKS */
.nav a{
    color:var(--white);
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    letter-spacing:0.5px;
    position:relative;
    transition:color 0.3s ease;
}

/* GOLD UNDERLINE */
.nav a::after{
    content:'';
    position:absolute;
    bottom:-6px;
    left:0;
    width:0;
    height:2px;
    background:linear-gradient(90deg,var(--gold),var(--gold-light));
    transition:width 0.3s ease;
}

.nav a:hover{
    color:var(--gold);
}

.nav a:hover::after{
    width:100%;
}

/* ================= BUTTON LINKS ================= */
.btn-nav{
    padding:10px 18px;
    border:1px solid var(--gold);
    border-radius:30px;
    color:var(--gold) !important;
    font-size:13px;
    font-weight:500;
    transition:all 0.4s ease;
}

.btn-nav:hover{
    background:linear-gradient(135deg,var(--gold),var(--gold-light));
    color:#000 !important;
    box-shadow:0 6px 20px rgba(201,162,77,0.5);
}

/* ================= DROPDOWN ================= */
.dropdown{
    position:relative;
}

.dropbtn{
    cursor:pointer;
}

/* DROPDOWN BOX */
.dropdown-content{
    position:absolute;
    top:130%;
    left:0;
    min-width:200px;
    background:#000;
    border:1px solid rgba(201,162,77,0.3);
    border-radius:10px;
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:all 0.35s ease;
    box-shadow:0 10px 40px rgba(0,0,0,0.7);
}

/* SHOW DROPDOWN */
.dropdown:hover .dropdown-content{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* DROPDOWN LINKS */
.dropdown-content a{
    display:block;
    padding:12px 18px;
    font-size:13px;
    color:#ddd;
}

.dropdown-content a:hover{
    background:rgba(201,162,77,0.15);
    color:var(--gold);
}

/* ================= MOBILE MENU ================= */
.menu-toggle{
    display:none;
    font-size:26px;
    color:var(--gold);
    cursor:pointer;
}

/* ================= RESPONSIVE ================= */
@media(max-width:992px){

    .menu-toggle{
        display:block;
    }

    .nav{
        position:absolute;
        top:100%;
        right:0;
        background:#000;
        width:100%;
        flex-direction:column;
        gap:18px;
        padding:25px 0;
        border-top:1px solid rgba(201,162,77,0.3);
        display:none;
    }

    .nav.active{
        display:flex;
    }

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

    .dropdown-content{
        position:static;
        transform:none;
        opacity:1;
        visibility:visible;
        background:transparent;
        border:none;
        box-shadow:none;
    }

    .dropdown-content a{
        padding:8px 0;
    }
}
/* =====================================================
   HOME PAGE – INDEX SECTIONS CSS
   Black & Gold Luxury Theme
   ===================================================== */

/* ================= HERO ================= */
.hero{
    height:100vh;
    background:url("../images/logo.PNG") center/cover no-repeat;
    position:relative;
    display:flex;
    align-items:center;
    padding-top:90px; /* header space */
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to right,
        rgba(0,0,0,0.85),
        rgba(0,0,0,0.5)
    );
}

.hero-content{
    position:relative;
    max-width:700px;
    padding:0 60px;
    color:#fff;
}

.hero-tag{
    display:inline-block;
    color:var(--gold);
    letter-spacing:2px;
    font-size:13px;
    margin-bottom:15px;
}

.hero h1{
    font-family:'Playfair Display',serif;
    font-size:58px;
    line-height:1.15;
    margin-bottom:20px;
}

.hero h1 span{
    color:var(--gold);
}

.hero p{
    font-size:16px;
    line-height:1.8;
    opacity:0.9;
}

.hero-buttons{
    margin-top:30px;
    display:flex;
    gap:18px;
}

/* BUTTONS */
.btn-primary,
.btn-secondary{
    padding:14px 30px;
    border-radius:40px;
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    transition:all 0.4s ease;
}

.btn-primary{
    background:linear-gradient(135deg,var(--gold),var(--gold-light));
    color:#000;
}

.btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(201,162,77,0.5);
}

.btn-secondary{
    border:1px solid var(--gold);
    color:var(--gold);
}

.btn-secondary:hover{
    background:var(--gold);
    color:#000;
}

/* ================= FEATURES ================= */
.features{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    background:#000;
    color:#fff;
    padding:70px 80px;
    gap:30px;
}

.feature-box{
    text-align:center;
    border:1px solid rgba(201,162,77,0.3);
    padding:30px 20px;
    border-radius:14px;
    transition:all 0.4s ease;
}

.feature-box h3{
    font-size:28px;
    color:var(--gold);
}

.feature-box p{
    margin-top:8px;
    font-size:14px;
    opacity:0.85;
}

.feature-box:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 40px rgba(0,0,0,0.6);
}

/* ================= ABOUT ================= */
.about{
    padding:100px 80px;
    background:#0c0c0c;
    color:#fff;
}

.about-container{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.about h2{
    font-family:'Playfair Display',serif;
    font-size:42px;
    margin-bottom:20px;
}

.about p{
    font-size:15px;
    line-height:1.9;
    opacity:0.9;
    margin-bottom:15px;
}

.about-image img{
    width:100%;
    border-radius:20px;
    box-shadow:0 20px 50px rgba(0,0,0,0.8);
}

/* ================= SERVICES ================= */
.services-section{
    padding:100px 80px;
    background:#000;
    color:#fff;
}

.section-title{
    text-align:center;
    font-family:'Playfair Display',serif;
    font-size:40px;
    margin-bottom:60px;
    color:var(--gold);
}

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

.luxury-card{
    padding:35px 25px;
    background:#0f0f0f;
    border-radius:18px;
    border:1px solid rgba(201,162,77,0.3);
    transition:all 0.4s ease;
}

.luxury-card h3{
    color:var(--gold);
    margin-bottom:12px;
}

.luxury-card p{
    font-size:14px;
    opacity:0.85;
}

.luxury-card:hover{
    transform:translateY(-10px);
    box-shadow:0 18px 50px rgba(201,162,77,0.25);
}

/* ================= WHY US ================= */
.why-us{
    padding:90px 80px;
    background:#0c0c0c;
    color:#fff;
}

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

.why-box{
    padding:22px;
    border-left:4px solid var(--gold);
    background:#111;
    font-size:15px;
}

/* ================= TESTIMONIALS ================= */
.testimonials{
    padding:100px 80px;
    background:#000;
    color:#fff;
    text-align:center;
}

.testimonial{
    max-width:700px;
    margin:30px auto;
    opacity:0.85;
}

.testimonial p{
    font-style:italic;
    font-size:18px;
}

.testimonial h4{
    margin-top:15px;
    color:var(--gold);
}

/* ================= CTA ================= */
.cta{
    padding:90px 40px;
    background:linear-gradient(
        135deg,
        #000,
        #1a1a1a
    );
    text-align:center;
    color:#fff;
}

.cta h2{
    font-family:'Playfair Display',serif;
    font-size:42px;
    margin-bottom:15px;
}

.cta p{
    font-size:15px;
    opacity:0.9;
    margin-bottom:25px;
}

/* ================= RESPONSIVE ================= */
@media(max-width:900px){

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

    .hero-content{
        padding:0 30px;
    }

    .about-container{
        grid-template-columns:1fr;
    }

    .features,
    .services-section,
    .about,
    .why-us,
    .testimonials{
        padding:70px 30px;
    }
}
/* =====================================================
   FOOTER CSS – MATCHING PROVIDED HTML
   Black & Gold Luxury Theme
   ===================================================== */

.footer{
    background:#000;
    color:#fff;
    padding:90px 70px 30px;
    border-top:1px solid rgba(201,162,77,0.3);
}

/* GRID */
.footer-container{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:45px;
}

/* FOOTER BOX */
.footer-box h3{
    font-family:'Playfair Display',serif;
    font-size:26px;
    margin-bottom:18px;
    color:var(--gold);
}

.footer-box h4{
    font-size:18px;
    margin-bottom:16px;
    color:var(--gold);
}

.footer-box p{
    font-size:14px;
    line-height:1.8;
    opacity:0.85;
    margin-bottom:10px;
}

/* LINKS */
.footer-box a{
    display:block;
    color:#ddd;
    text-decoration:none;
    font-size:14px;
    margin-bottom:10px;
    transition:all 0.35s ease;
}

.footer-box a:hover{
    color:var(--gold);
    padding-left:6px;
}

/* FOOTER BOTTOM */
.footer-bottom{
    text-align:center;
    margin-top:60px;
    padding-top:22px;
    border-top:1px solid rgba(201,162,77,0.25);
    font-size:13px;
    opacity:0.75;
}

.footer-bottom strong{
    color:var(--gold);
}

/* =====================================================
   WHATSAPP FLOAT BUTTON – LUXURY STYLE
   ===================================================== */

.whatsapp-float{
    position:fixed;
    right:22px;
    bottom:22px;
    display:flex;
    align-items:center;
    gap:10px;
    background:#25D366;
    color:#fff;
    padding:12px 18px;
    border-radius:50px;
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    box-shadow:0 12px 30px rgba(0,0,0,0.6);
    z-index:999;
    transition:all 0.4s ease;
}

.whatsapp-float img{
    width:22px;
    height:22px;
}

.whatsapp-float:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 40px rgba(37,211,102,0.6);
}

/* HIDE TEXT ON SMALL SCREENS */
@media(max-width:600px){
    .whatsapp-float span{
        display:none;
    }
    .whatsapp-float{
        padding:14px;
    }
}

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

@media(max-width:768px){

    .footer{
        padding:70px 30px 25px;
    }

    .footer-container{
        gap:35px;
    }

    .footer-box h3{
        font-size:22px;
    }
}

/* =====================================================
   SERVICES PAGE CSS – BLACK & GOLD LUXURY
   ===================================================== */

section{
    background:#000;
    padding:120px 80px;
    color:#fff;
}

/* SECTION TITLE */
.section-title{
    text-align:center;
    margin-bottom:70px;
}

.section-title h2{
    font-family:'Playfair Display',serif;
    font-size:42px;
    color:var(--gold);
    letter-spacing:1px;
    position:relative;
}

/* GOLD LINE UNDER TITLE */
.section-title h2::after{
    content:'';
    width:90px;
    height:3px;
    background:linear-gradient(90deg,var(--gold),var(--gold-light));
    display:block;
    margin:18px auto 0;
    border-radius:2px;
}

/* SERVICES GRID */
.services{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:35px;
}

/* SERVICE BOX */
.service-box{
    background:#0f0f0f;
    padding:40px 30px;
    border-radius:20px;
    border:1px solid rgba(201,162,77,0.3);
    text-align:center;
    transition:all 0.4s ease;
}

/* SERVICE TITLE */
.service-box h3{
    color:var(--gold);
    font-size:22px;
    margin-bottom:12px;
}

/* SERVICE DESCRIPTION */
.service-box p{
    font-size:14px;
    opacity:0.85;
    line-height:1.7;
}

/* HOVER EFFECT */
.service-box:hover{
    transform:translateY(-10px);
    box-shadow:0 18px 45px rgba(201,162,77,0.25);
    border-color:var(--gold);
}

/* ================= RESPONSIVE ================= */
@media(max-width:768px){

    section{
        padding:90px 30px;
    }

    .section-title h2{
        font-size:34px;
    }

    .service-box{
        padding:32px 22px;
    }
}
/* =====================================================
   CONTACT US PAGE CSS – BLACK & GOLD LUXURY
   ===================================================== */

.contact{
    background:#000;
    padding:120px 80px;
    color:#fff;
}

/* SECTION TITLE */
.contact .section-title{
    text-align:center;
    margin-bottom:70px;
}

.contact .section-title h2{
    font-family:'Playfair Display',serif;
    font-size:42px;
    color:var(--gold);
    letter-spacing:1px;
}

/* GRID */
.contact-container{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
}

/* ================= CONTACT INFO ================= */
.contact-info{
    background:#0f0f0f;
    padding:40px 35px;
    border-radius:20px;
    border:1px solid rgba(201,162,77,0.3);
}

.contact-info h3{
    color:var(--gold);
    margin-bottom:20px;
    font-size:24px;
}

.contact-info p{
    font-size:14px;
    margin-bottom:14px;
    line-height:1.8;
    opacity:0.85;
}

/* ================= CONTACT FORM ================= */
.contact-form{
    background:#0f0f0f;
    padding:40px 35px;
    border-radius:20px;
    border:1px solid rgba(201,162,77,0.3);
}

.contact-form h3{
    color:var(--gold);
    margin-bottom:20px;
    font-size:24px;
}

/* INPUTS */
.contact-form input,
.contact-form textarea{
    width:100%;
    padding:14px 16px;
    margin-bottom:16px;
    border-radius:12px;
    border:1px solid rgba(201,162,77,0.4);
    background:#111;
    color:#fff;
    font-size:14px;
    outline:none;
    transition:border 0.3s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
    color:#aaa;
}

/* FOCUS */
.contact-form input:focus,
.contact-form textarea:focus{
    border-color:var(--gold);
}

/* BUTTON */
.contact-form button{
    padding:14px 32px;
    border-radius:30px;
    border:none;
    background:linear-gradient(135deg,var(--gold),var(--gold-light));
    color:#000;
    font-size:14px;
    font-weight:500;
    cursor:pointer;
    transition:all 0.4s ease;
}

.contact-form button:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 35px rgba(201,162,77,0.5);
}

/* ================= MAP ================= */
.contact-map{
    margin-top:60px;
    border-radius:20px;
    overflow:hidden;
    border:1px solid rgba(201,162,77,0.3);
}

.contact-map iframe{
    width:100%;
    height:350px;
    border:none;
    filter:grayscale(100%) brightness(80%);
}

/* ================= RESPONSIVE ================= */
@media(max-width:900px){

    .contact{
        padding:90px 30px;
    }

    .contact-container{
        grid-template-columns:1fr;
    }

}/* =====================================================
   CONTACT PAGE – SOCIAL ICONS (BLACK & GOLD)
   ===================================================== */

.contact-social{
    display:flex;
    gap:14px;
    margin:25px 0 35px;
}

.contact-social a{
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#0f0f0f;
    border:1px solid rgba(201,162,77,0.4);
    color:var(--gold);
    font-size:18px;
    transition:all 0.4s ease;
}

/* HOVER EFFECT */
.contact-social a:hover{
    background:linear-gradient(135deg,var(--gold),var(--gold-light));
    color:#000;
    transform:translateY(-4px);
    box-shadow:0 12px 30px rgba(201,162,77,0.6);
}

/* MOBILE CENTER */
@media(max-width:768px){
    .contact-social{
        justify-content:center;
    }
}

/* =====================================================
   GALLERY PAGE (UPDATED) – BLACK & GOLD LUXURY
   ===================================================== */

/* ================= GALLERY HERO ================= */
.hero{
    position:relative;
    background:url("../images/Header.jpg") center/cover no-repeat;
    display:flex;
    align-items:center;
    padding-top:90px; /* header space */
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to right,
        rgba(0,0,0,0.85),
        rgba(0,0,0,0.55)
    );
}

.hero-content{
    position:relative;
    max-width:800px;
    padding:0 60px;
    color:#fff;
}

.hero-content h1{
    font-family:'Playfair Display',serif;
    font-size:52px;
    color:var(--gold);
    margin-bottom:10px;
}

.hero-content p{
    font-size:15px;
    opacity:0.9;
}

/* ================= GALLERY SECTION ================= */
.gallery-section{
    background:#000;
    padding:110px 80px;
    color:#fff;
}

/* SECTION TITLE */
.gallery-section .section-title{
    text-align:center;
    font-family:'Playfair Display',serif;
    font-size:40px;
    margin-bottom:60px;
    color:var(--gold);
}

/* GALLERY GRID */
.gallery-grid{
    max-width:1300px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:28px;
}

/* GALLERY ITEM */
.gallery-item{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    border:1px solid rgba(201,162,77,0.3);
    background:#111;
    transition:all 0.4s ease;
}

/* IMAGE */
.gallery-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform 0.6s ease;
}

/* HOVER EFFECT */
.gallery-item:hover img{
    transform:scale(1.1);
}

.gallery-item:hover{
    box-shadow:0 18px 45px rgba(201,162,77,0.35);
    border-color:var(--gold);
}

/* ================= RESPONSIVE ================= */
@media(max-width:900px){

    .hero-content h1{
        font-size:38px;
    }

    .hero-content{
        padding:0 30px;
    }

    .gallery-section{
        padding:80px 30px;
    }

    .gallery-section .section-title{
        font-size:32px;
    }
}
/* =====================================================
   PRICE LIST PAGE CSS – BLACK & GOLD LUXURY
   ===================================================== */

/* ================= PRICE SECTION ================= */
.price-section{
    background:#000;
    padding:110px 80px;
    color:#fff;
}

/* CATEGORY */
.price-category{
    max-width:900px;
    margin:0 auto 70px;
}

.price-category h2{
    font-family:'Playfair Display',serif;
    font-size:34px;
    color:var(--gold);
    margin-bottom:25px;
    text-align:center;
}

/* PRICE CARD */
.price-card{
    background:#0f0f0f;
    border-radius:22px;
    border:1px solid rgba(201,162,77,0.3);
    padding:35px 40px;
    box-shadow:0 15px 40px rgba(0,0,0,0.6);
}

/* ROW */
.price-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 0;
    font-size:15px;
    border-bottom:1px dashed rgba(201,162,77,0.25);
}

/* LAST ROW */
.price-row:last-child{
    border-bottom:none;
}

/* TEXT */
.price-row span:first-child{
    opacity:0.9;
}

.price-row span:last-child{
    color:var(--gold);
    font-weight:500;
}

/* HOVER EFFECT */
.price-row:hover{
    color:var(--gold);
}

/* ================= CTA REUSE ================= */
.luxury-cta{
    background:linear-gradient(135deg,#000,#1a1a1a);
    text-align:center;
    padding:90px 40px;
}

/* ================= RESPONSIVE ================= */
@media(max-width:900px){

    .price-section{
        padding:80px 30px;
    }

    .price-card{
        padding:28px 22px;
    }

    .price-category h2{
        font-size:28px;
    }
}
/* =====================================================
   DEALS / PACKAGES PAGE CSS – BLACK & GOLD LUXURY
   ===================================================== */

/* ================= DEALS SECTION ================= */
.deals-section{
    background:#000;
    padding:110px 80px;
    color:#fff;
}

/* SECTION TITLE */
.deals-section .section-title{
    text-align:center;
    font-family:'Playfair Display',serif;
    font-size:40px;
    margin-bottom:70px;
    color:var(--gold);
}

/* GRID */
.deals-grid{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:35px;
}

/* DEAL CARD */
.deal-card{
    background:#0f0f0f;
    border-radius:22px;
    border:1px solid rgba(201,162,77,0.3);
    padding:40px 30px;
    text-align:center;
    position:relative;
    transition:all 0.4s ease;
}

/* GOLD TOP LINE */
.deal-card::before{
    content:'';
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:60%;
    height:3px;
    background:linear-gradient(90deg,var(--gold),var(--gold-light));
}

/* TITLE */
.deal-card h3{
    font-size:24px;
    color:var(--gold);
    margin-bottom:15px;
}

/* DESCRIPTION */
.deal-card p{
    font-size:14px;
    line-height:1.7;
    opacity:0.85;
    margin-bottom:18px;
}

/* PRICE */
.deal-price{
    font-size:26px;
    font-weight:600;
    color:var(--gold);
    margin-bottom:20px;
}

/* OLD PRICE */
.deal-old-price{
    font-size:14px;
    color:#999;
    text-decoration:line-through;
    margin-bottom:10px;
}

/* BUTTON */
.deal-card .btn-primary{
    display:inline-block;
    margin-top:10px;
}

/* HOVER EFFECT */
.deal-card:hover{
    transform:translateY(-12px);
    box-shadow:0 20px 50px rgba(201,162,77,0.35);
    border-color:var(--gold);
}

/* FEATURED DEAL */
.deal-card.featured{
    background:linear-gradient(135deg,#111,#000);
    border:2px solid var(--gold);
}

/* FEATURED BADGE */
.deal-card.featured::after{
    content:'Best Value';
    position:absolute;
    top:15px;
    right:-35px;
    background:var(--gold);
    color:#000;
    padding:6px 40px;
    font-size:12px;
    font-weight:600;
    transform:rotate(45deg);
}

/* ================= CTA REUSE ================= */
.luxury-cta{
    background:linear-gradient(135deg,#000,#1a1a1a);
    text-align:center;
    padding:90px 40px;
}

/* ================= RESPONSIVE ================= */
@media(max-width:900px){

    .deals-section{
        padding:80px 30px;
    }

    .deal-card{
        padding:32px 22px;
    }

    .deal-card h3{
        font-size:21px;
    }
}
/* =====================================================
   APPOINTMENT PAGE (PHP FORM) CSS – BLACK & GOLD
   ===================================================== */

/* ================= BOOKING SECTION ================= */
.booking-section{
    background:#000;
    padding:110px 80px;
    color:#fff;
}

/* CARD */
.booking-card{
    max-width:520px;
    margin:auto;
    background:#0f0f0f;
    padding:45px 40px;
    border-radius:22px;
    border:1px solid rgba(201,162,77,0.3);
    box-shadow:0 18px 45px rgba(0,0,0,0.7);
    text-align:center;
}

/* TITLE */
.booking-card h2{
    font-family:'Playfair Display',serif;
    font-size:30px;
    color:var(--gold);
    margin-bottom:25px;
}

/* SUCCESS MESSAGE */
.success-msg{
    background:rgba(39,174,96,0.15);
    border:1px solid rgba(39,174,96,0.5);
    color:#9effc2;
    padding:14px 16px;
    border-radius:12px;
    font-size:14px;
    margin-bottom:22px;
}

/* FORM */
.booking-card form{
    display:grid;
    gap:15px;
}

/* INPUTS */
.booking-card input,
.booking-card select{
    width:100%;
    padding:14px 16px;
    border-radius:14px;
    border:1px solid rgba(201,162,77,0.4);
    background:#111;
    color:#fff;
    font-size:14px;
    outline:none;
    transition:all 0.3s ease;
}

/* PLACEHOLDER */
.booking-card input::placeholder{
    color:#aaa;
}

/* FOCUS */
.booking-card input:focus,
.booking-card select:focus{
    border-color:var(--gold);
    box-shadow:0 0 0 2px rgba(201,162,77,0.15);
}

/* DATE & TIME */
.booking-card input[type="date"],
.booking-card input[type="time"]{
    color-scheme:dark;
}

/* BUTTON */
.booking-card button{
    margin-top:10px;
    padding:14px;
    border-radius:35px;
    border:none;
    cursor:pointer;
    font-size:15px;
    font-weight:500;
    transition:all 0.4s ease;
}

/* ================= RESPONSIVE ================= */
@media(max-width:768px){

    .booking-section{
        padding:80px 30px;
    }

    .booking-card{
        padding:35px 25px;
    }

    .booking-card h2{
        font-size:26px;
    }
}
/* =====================================================
   MAP SECTION – BLACK & GOLD LUXURY
   ===================================================== */

.map-section{
    background:#000;
    padding:90px 80px;
    border-top:1px solid rgba(201,162,77,0.25);
}

/* MAP FRAME */
.map-section iframe{
    width:100%;
    height:380px;
    border:none;
    border-radius:24px;
    border:1px solid rgba(201,162,77,0.35);
    box-shadow:0 20px 50px rgba(0,0,0,0.7);
    filter:grayscale(100%) brightness(85%);
    transition:all 0.4s ease;
}

/* HOVER EFFECT */
.map-section iframe:hover{
    filter:grayscale(0%) brightness(100%);
    box-shadow:0 25px 60px rgba(201,162,77,0.45);
}

/* ================= RESPONSIVE ================= */
@media(max-width:768px){

    .map-section{
        padding:70px 30px;
    }

    .map-section iframe{
        height:300px;
        border-radius:18px;
    }
}