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

:root{
    --black:#0A0A0A;
    --section:#121212;
    --gold:#C9A24B;
    --white:#FFFFFF;
    --gray:#A9A9A9;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Roboto',sans-serif;
    background:var(--black);
    color:var(--white);
}

h1,h2,h3,h4{
    font-family:'Playfair Display',serif;
}


/* =========================
        LUXURY HEADER
========================= */


.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    background:transparent;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px 8%;

    transition:.5s;

}


.header.scrolled{

    background:#080808;

    box-shadow:0 10px 30px rgba(0,0,0,.6);

    padding:15px 8%;

    border-bottom:1px solid #222;

}



.header-right{

    display:flex;

    align-items:center;

    gap:35px;

}



.logo{

    width:160px;

}



.header-links{

    display:flex;

    gap:35px;

    align-items:center;

}



.header-links a{

    color:#fff;

    text-decoration:none;

    font-size:15px;

    letter-spacing:1px;

    transition:.3s;

}



.header-links a:hover{

    color:#B89B5E;

}



/* MAIN BUTTON */

button{

    background:#B89B5E;

    color:#080808;

    border:none;

    padding:15px 40px;

    border-radius:50px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    letter-spacing:.5px;

    transition:.4s;

}



button:hover{

    background:#d4b06a;

    transform:translateY(-4px);

    box-shadow:0 15px 30px rgba(184,155,94,.35);

}

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


.hero{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:150px 8%;

    background:
    linear-gradient(
    rgba(0,0,0,.65),
    rgba(0,0,0,.8)
    ),
    url("Images/home-hero.jpg");

    background-size:cover;

    background-position:center;

}



.hero h1{

    color:#B89B5E;

    font-size:80px;

    font-family:'Playfair Display',serif;

    line-height:1.1;

}



.hero p{

    color:#ddd;

    font-size:22px;

    max-width:700px;

    margin:30px auto;

    line-height:1.8;

}

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

.about{

    background:#080808;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:90px;

    padding:150px 8%;

}


.about-image{

    position:relative;

}


.about-image img{

    width:100%;

    height:650px;

    object-fit:cover;

    border-radius:25px;

    border:1px solid #222;

}


/* gold detail */

.about-image::after{

    content:"";

    position:absolute;

    width:80px;

    height:80px;

    border-right:2px solid #B89B5E;

    border-bottom:2px solid #B89B5E;

    right:-20px;

    bottom:-20px;

}



.about-content{

    max-width:600px;

}


.section-subtitle{

    color:#B89B5E;

    letter-spacing:5px;

    font-size:14px;

    margin-bottom:25px;

}



.about-content h2{

    color:#B89B5E;

    font-family:'Playfair Display',serif;

    font-size:55px;

    line-height:1.2;

    margin-bottom:35px;

}



.about-content p{

    color:#ccc;

    font-size:18px;

    line-height:1.9;

    margin-bottom:20px;

}



.gold-btn{

    display:inline-block;

    margin-top:25px;

    padding:17px 45px;

    border:1px solid #B89B5E;

    color:white;

    text-decoration:none;

    transition:.4s;

}



.gold-btn:hover{

    background:#B89B5E;

    color:#080808;

}
/* ===== FEATURES ===== */

.features{

    padding:100px 8%;

    background:#111;

    text-align:center;

}

.features h2{

    font-size:45px;

    color:#B89B5E;

    margin-bottom:60px;

}

.features-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.feature{

    background:#1a1a1a;

    padding:40px;

    border-radius:20px;

    transition:.3s;

    border:1px solid #2b2b2b;

}

.feature:hover{

    transform:translateY(-10px);

    border-color:#B89B5E;

}

.feature h3{

    color:#B89B5E;

    margin-bottom:20px;

    font-size:24px;

}

.feature p{

    color:#d0d0d0;

    line-height:1.8;

}

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


.services-page{

    padding:180px 8% 120px;

    background:#080808;

    text-align:center;

}

.services-hero{

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding-top:100px;

    box-sizing:border-box;

}

.services-hero-content{

    transform:translateY(50px);

}


.section-subtitle{

    color:#B89B5E;

    letter-spacing:5px;

    font-size:14px;

    margin-bottom:20px;

}
.services-page h1{

    color:#B89B5E;

    font-size:55px;

    margin-bottom:60px;

}


.services{

    text-align:center;

    padding:120px 8%;

}


.services h2{

    color:#B89B5E;

    font-family:'Playfair Display', serif;

    font-size:50px;

    margin-top:20px;

}



.services-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}



.service-card{

    background:#121212;

    padding:40px 25px;

    border-radius:20px;

    border:1px solid #222;

    transition:.4s;

}



.service-card:hover{

    transform:translateY(-12px);

    border-color:#B89B5E;

}



.service-card h3{

    color:#B89B5E;

    font-size:24px;

    margin-bottom:20px;

}



.service-card p{

    color:#cccccc;

    line-height:1.7;

}



/* MOBILE */

@media(max-width:900px){

    .services-grid{

        grid-template-columns:1fr;

    }

}

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


.gallery{

    padding:120px 8%;

    background:#111;

    text-align:center;

}



.gallery h2{

    font-size:50px;

    margin-bottom:60px;

}



.gallery-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}



.gallery-item{

    overflow:hidden;

    border-radius:20px;

}



.gallery-item img{

    width:100%;

    height:350px;
    
    display: block;

    object-fit:cover;

    transition:.5s;

}



.gallery-item img:hover{

    transform:scale(1.08);

}



/* MOBILE */

@media(max-width:900px){

    .gallery-grid{

        grid-template-columns:1fr;

    }

}


/* ===== REVIEWS ===== */


.reviews{

    padding:120px 8%;

    background:#080808;

    text-align:center;

}



.reviews h2{

    font-size:50px;

    margin-bottom:60px;

}



.reviews-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}



.review-card{

    background:#121212;

    padding:40px;

    border-radius:20px;

    border:1px solid #222;

}



.review-card p{

    color:#dddddd;

    font-size:18px;

    line-height:1.8;

    font-style:italic;

    margin-bottom:25px;

}



.review-card h3{

    color:#B89B5E;

}



/* MOBILE */

@media(max-width:900px){

    .reviews-grid{

        grid-template-columns:1fr;

    }

}

/* ===== APPOINTMENT ===== */


.appointment{

    padding:120px 8%;

    background:

    linear-gradient(
    rgba(0,0,0,.75),
    rgba(0,0,0,.75)
    ),

    url("Images/appointment.jpg");

    background-size:cover;

    background-position:center;

    text-align:center;

}



.appointment-content{

    max-width:800px;

    margin:auto;

}



.appointment h2{

    font-size:55px;

    margin:25px 0;

}



.appointment p{

    color:#dddddd;

    font-size:20px;

    line-height:1.8;

}



.appointment-buttons{

    margin-top:40px;

    display:flex;

    justify-content:center;

    gap:20px;

}



.outline-btn{

    background:transparent;

    color:#B89B5E;

    border:1px solid #B89B5E;

}



.outline-btn:hover{

    background:#B89B5E;

    color:black;

}



/* MOBILE */

@media(max-width:900px){

    .appointment-buttons{

        flex-direction:column;

    }

}

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


.footer{

    background:#050505;

    padding:80px 8% 30px;

    border-top:1px solid #B89B5E;

}



.footer-container{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:50px;

}



.footer h2{

    color:#B89B5E;

    font-size:35px;

    margin-bottom:20px;

}



.footer h3{

    color:#B89B5E;

    margin-bottom:20px;

}



.footer p{

    color:#cccccc;

    line-height:1.8;

}



.footer-links{

    display:flex;

    flex-direction:column;

    gap:12px;

}



.footer-links a{

    color:#cccccc;

    text-decoration:none;

}



.footer-links a:hover{

    color:#B89B5E;

}



.footer-bottom{

    margin-top:50px;

    padding-top:20px;

    border-top:1px solid #222;

    text-align:center;

    color:#777;

}



/* MOBILE */

@media(max-width:900px){

    .footer-container{

        grid-template-columns:1fr;

    }

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


.whatsapp{

    position:fixed;

    bottom:30px;

    right:30px;

    display:flex;

    align-items:center;

    gap:10px;

    background:#25D366;

    color:white;

    padding:15px 25px;

    border-radius:50px;

    text-decoration:none;

    font-weight:bold;

    font-size:16px;

    box-shadow:0 10px 30px rgba(0,0,0,.4);

    z-index:2000;

    animation:pulse 2s infinite;

    transition:.3s;

}



.whatsapp:hover{

    transform:translateY(-5px) scale(1.05);

}



.whatsapp-icon{

    font-size:22px;

}



/* floating animation */

@keyframes pulse{


    0%{

        box-shadow:0 0 0 0 rgba(37,211,102,.7);

    }


    70%{

        box-shadow:0 0 0 15px rgba(37,211,102,0);

    }


    100%{

        box-shadow:0 0 0 0 rgba(37,211,102,0);

    }

}

#language{

    background:transparent;

    color:#B89B5E;

    border:1px solid #B89B5E;

    padding:8px 15px;

    font-size:14px;

}


#language:hover{

    background:#B89B5E;

    color:black;

}


.appointment{

    background:
    linear-gradient(rgba(0,0,0,.75), rgba(0,0,0,.75)),
    url("Images/consultation.jpg");

    background-size:cover;
    background-position:center;
    background-attachment:fixed;

    padding:140px 8%;
    text-align:center;

}

.gallery-description{

    max-width:700px;

    margin:20px auto 60px;

    color:#cccccc;

    font-size:18px;

    line-height:1.8;

}

/* LIGHTBOX */

.lightbox{

    display:none;

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.9);

    justify-content:center;

    align-items:center;

    z-index:3000;

}


.lightbox img{

    max-width:85%;

    max-height:85%;

    border-radius:20px;

}


.close-lightbox{

    position:absolute;

    top:30px;

    right:50px;

    color:white;

    font-size:50px;

    cursor:pointer;

}

/* SERVICES PAGE */


.services-page{

    padding:150px 8% 100px;

    background:#080808;

    text-align:center;

}


.services-page h1{

    color:#B89B5E;

    font-size:55px;

    margin-bottom:60px;

}



.services-list{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:50px;

    max-width:1100px;

    margin:auto;

}



.service-category{

    background:#121212;

    border:1px solid #222;

    border-radius:20px;

   padding:50px 40px;

    text-align:center;

    transition:.3s;

}



.service-category:hover{

    border-color:#B89B5E;

    transform:translateY(-5px);

}



.service-category h2{

    color:#B89B5E;

    margin-bottom:25px;

}




@media(max-width:768px){

    .services-list{

        grid-template-columns:1fr;

    }


    .services-page h1{

        font-size:40px;

    }

}

.service-category ul{

    list-style:none;

    padding:0;

}

.service-category li{

     padding:14px 0;

    border-bottom:1px solid #1d1d1d;

    color:#dddddd;

    font-size:17px;

}

.services-hero{

    height:55vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:0 10%;

    background:#080808;

}


.services-hero h1{

    font-size:60px;

    color:#B89B5E;

    margin:20px 0;

}


.services-hero p{

    max-width:700px;

    margin:auto;

    color:#cccccc;

    line-height:1.8;

}

.service-category h2 i{

    color:#B89B5E;

    margin-right:12px;

    font-size:24px;

}

.service-category li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

    border-bottom:1px solid #252525;

    font-size:17px;

    color:#dddddd;

    transition:.3s;

}


.service-category li:hover{

    color:#B89B5E;

    padding-left:10px;

}

.contact-info{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    padding:80px 8%;

}


.contact-card{

    background:#121212;

    border:1px solid #222;

    border-radius:20px;

    padding:45px;

    text-align:center;

    transition:.4s;

}


.contact-card:hover{

    transform:translateY(-8px);

    border-color:#B89B5E;

}


.contact-card i{

    font-size:40px;

    color:#B89B5E;

    margin-bottom:20px;

}


.contact-card h3{

    margin-bottom:15px;

}


.contact-card p{

    color:#cfcfcf;

}

.consultation{

    padding:100px 8%;

    text-align:center;

}


.consultation h2{

    font-size:50px;

    color:#B89B5E;

    margin:20px 0;

}


.consultation p{

    max-width:700px;

    margin:auto;

    color:#cccccc;

    line-height:1.8;

}


.consultation-btn{

    display:inline-block;

    margin-top:40px;

    background:#B89B5E;

    color:#080808;

    text-decoration:none;

    padding:18px 45px;

    border-radius:50px;

    font-weight:bold;

    transition:.4s;

}


.consultation-btn:hover{

    background:white;

    transform:translateY(-5px);

}

.contact-info{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    margin:80px auto;

    width:90%;

    max-width:1200px;

}

.contact-card{

    background:#111;

    border:1px solid #222;

    border-radius:20px;

    padding:40px;

    text-align:center;

    transition:.3s;

}

.contact-card:hover{

    transform:translateY(-8px);

    border-color:#B89B5E;

    box-shadow:0 15px 40px rgba(184,155,94,.15);

}

.contact-card h3{

    color:#B89B5E;

    margin-bottom:15px;

}

.contact-card p{

    color:#ddd;

    line-height:1.7;

}

.consultation{

    text-align:center;

    max-width:850px;

    margin:120px auto;

    padding:0 20px;

}

.consultation h2{

    font-size:48px;

    margin:20px 0;

}

.consultation-btn{

    display:inline-block;

    margin-top:35px;

    background:#B89B5E;

    color:#000;

    padding:18px 40px;

    border-radius:50px;

    text-decoration:none;

    font-weight:bold;

    transition:.3s;

}

.consultation-btn:hover{

    background:#d4b06a;

    transform:translateY(-4px);

}
/* =================================
        LUXURY GALLERY PAGE
================================= */


.gallery-banner{

    min-height:60vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:150px 8% 100px;

    background:#080808;

}


.gallery-banner h1{

    color:#B89B5E;

    font-size:70px;

    margin-bottom:30px;

}


.gallery-banner p{

    color:#ddd;

    font-size:20px;

    line-height:1.8;

}


/* FEATURED IMAGE */

.featured-work{

    padding:80px 8%;

    background:#080808;

}


.featured-work img{

    width:100%;

    height:650px;

    object-fit:cover;

    border-radius:20px;

    border:1px solid #222;

}



/* GALLERY GRID */

.transformation-grid{

    background:#080808;

    padding:80px 8%;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:40px;

}



.transformation-grid div{

    background:#121212;

    border:1px solid #222;

    border-radius:20px;

    overflow:hidden;

    transition:.3s;

}



.transformation-grid div:hover{

    border-color:#B89B5E;

    transform:translateY(-8px);

}



.transformation-grid img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}



.transformation-grid img:hover{

    transform:scale(1.05);

}



.large{

    height:850px;

}



.wide{

    grid-column:span 2;

    height:550px;

}



.transformation-grid div:not(.large):not(.wide){

    height:450px;

}



/* CTA */

.cta-section{

    background:#121212;

    text-align:center;

    padding:120px 8%;

    border-top:1px solid #222;

}


.cta-section h2{

    color:#B89B5E;

    font-size:55px;

}



.gold-btn{

    display:inline-block;

    margin-top:40px;

    padding:18px 45px;

    color:white;

    border:1px solid #B89B5E;

    text-decoration:none;

    transition:.3s;

}



.gold-btn:hover{

    background:#B89B5E;

    color:#080808;

}

@media(max-width:900px){

.transformation-grid{

grid-template-columns:1fr;

}

.large,
.wide,
.transformation-grid div{

height:350px;

grid-column:auto;

grid-row:auto;

}

.featured-work img{

height:400px;

}

.cta-section h2{

font-size:2.5rem;

}

}


/* Gallery opening animation */

.gallery-banner-content,
.featured-work,
.transformation-grid,
.cta-section {

    animation: fadeUp 1.2s ease forwards;

}


@keyframes fadeUp {

    from {

        opacity:0;
        transform:translateY(40px);

    }


    to {

        opacity:1;
        transform:translateY(0);

    }

}

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


/* HERO */

.about-hero{

    min-height:70vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:150px 8% 100px;

    background:#080808;

}


.about-hero-content{

    max-width:900px;

}


.about-hero h1{

    color:#B89B5E;

    font-family:'Playfair Display',serif;

    font-size:75px;

    line-height:1.15;

    margin:30px 0;

}


.about-hero p{

    color:#ddd;

    font-size:20px;

    line-height:1.8;

}


/* STORY SECTION */


.about-story{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

    padding:150px 8%;

    background:#080808;

}



.story-image img{

    width:100%;

    height:650px;

    object-fit:cover;

    border-radius:25px;

    border:1px solid #222;

}



.story-content h2{

    color:#B89B5E;

    font-family:'Playfair Display',serif;

    font-size:55px;

    line-height:1.2;

    margin:25px 0 35px;

}



.story-content p{

    color:#ccc;

    font-size:18px;

    line-height:1.9;

    margin-bottom:20px;

}



/* VALUES */


.values{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:40px;

    padding:100px 8% 150px;

    background:#121212;

}



.value-card{

    background:#080808;

    border:1px solid #222;

    border-radius:20px;

    padding:50px 35px;

    text-align:center;

    transition:.4s;

}



.value-card:hover{

    border-color:#B89B5E;

    transform:translateY(-8px);

}



.value-card h3{

    color:#B89B5E;

    font-family:'Playfair Display',serif;

    font-size:30px;

    margin-bottom:20px;

}



.value-card p{

    color:#bbb;

    line-height:1.8;

}

@media(max-width:900px){

    .about-hero h1{

        font-size:45px;

    }


    .about-story{

        grid-template-columns:1fr;

    }


    .story-image img{

        height:450px;

    }


    .story-content h2{

        font-size:38px;

    }


    .values{

        grid-template-columns:1fr;

    }

}

@media (max-width: 768px) {

    .header {
        flex-direction: column;
        padding: 15px;
        gap: 15px;
    }

    .header-right {
        flex-direction: column;
        gap: 15px;
        width: 100%;
    }

    .header-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    .header-links a {
        font-size: 14px;
    }

    button {
        width: 100%;
        max-width: 250px;
    }

    .hero h1,
    .services-hero h1,
    .gallery-banner h1,
    .about-hero h1 {
        font-size: 42px;
    }

    .hero p,
    .services-hero p,
    .gallery-banner p,
    .about-hero p {
        font-size: 16px;
    }

    .contact-info,
    .services-list,
    .features-grid,
    .values {
        grid-template-columns: 1fr;
    }

    .logo {
        width: 110px;
    }

    .whatsapp {
        right: 15px;
        bottom: 15px;
        padding: 12px 18px;
        font-size: 14px;
    }
}

@media (max-width: 768px) {

    body {
        overflow-x: hidden;
    }

    .features {
        padding: 60px 20px;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .feature {
        width: 100%;
        padding: 30px 20px;
    }

    .feature h3 {
        font-size: 32px;
    }

    .feature p {
        font-size: 18px;
    }

}
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

* {
    outline: 1px solid red !important;
}