/* ==========================================
   BF Hair Salon
   Premium Luxury Website
   style.css
========================================== */

/* ==========================================
   1. RESET
========================================== */

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

html{
    scroll-behavior:smooth;
}

/* ==========================================
   2. GLOBAL
========================================== */

body{

    font-family:'Poppins',sans-serif;

    background:#111;

    color:#fff;

    line-height:1.6;

    overflow-x:hidden;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}

/* ==========================================
   3. SCROLLBAR
========================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:#D4AF37;

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:#FFD700;

}

/* ==========================================
   4. HEADER
========================================== */

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    background:#000;

    z-index:1000;

    transition:.35s;

}

/* ==========================================
   5. NAVBAR
========================================== */

.navbar{

    max-width:1200px;

    margin:auto;

    padding:18px 30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

/* ==========================================
   6. LOGO
========================================== */

.logo h2{

    color:#D4AF37;

    font-size:30px;

    letter-spacing:1px;

    text-shadow:

    0 0 10px rgba(212,175,55,.35);

}

/* ==========================================
   7. MENU
========================================== */

.menu{

    display:flex;

    gap:35px;

}

.menu a{

    color:#fff;

    position:relative;

    transition:.3s;

}

.menu a:hover{

    color:#D4AF37;

}

.menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:#D4AF37;

    transition:.3s;

}

.menu a:hover::after,

.menu a.active::after{

    width:100%;

}

.menu a.active{

    color:#D4AF37;

}

/* ==========================================
   8. MOBILE MENU
========================================== */

.menu-toggle{

    display:none;

    color:#D4AF37;

    font-size:30px;

    cursor:pointer;

}

/* ==========================================
   9. HERO
========================================== */

.hero{

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:

    linear-gradient(

    rgba(0,0,0,.60),

    rgba(0,0,0,.60)

    ),

    url("...")

    center/cover;

}

.hero-content{

    max-width:900px;

}

.hero-content h1{

    font-size:62px;

    color:#D4AF37;

    margin-bottom:20px;

}

.hero-content p{

    font-size:20px;

    margin-bottom:35px;

}

/* ==========================================
   10. BUTTON
========================================== */

.btn{

    display:inline-block;

    padding:15px 40px;

    background:#D4AF37;

    color:#111;

    border-radius:50px;

    font-weight:bold;

    transition:.35s;

    box-shadow:

    0 10px 25px rgba(212,175,55,.30);

    position:relative;

    overflow:hidden;

}

.btn:hover{

    background:#fff;

    transform:translateY(-4px);

}

.btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

    background:

    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.5),

    transparent

    );

    transition:.7s;

}

.btn:hover::before{

    left:120%;

}

/* ==========================================
   11. LOADER
========================================== */

#loader{

    position:fixed;

    inset:0;

    background:#000;

    display:flex;

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

    z-index:99999;

}

.loader-logo{

    font-size:70px;

    font-weight:bold;

    color:#D4AF37;

    animation:pulse 1.5s infinite;

}

@keyframes pulse{

0%{transform:scale(1);}
50%{transform:scale(1.15);}
100%{transform:scale(1);}

}

/* ==========================================
   12. PROGRESS BAR
========================================== */

#progress-bar{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:#D4AF37;

    z-index:999999;

}

/* ==========================================
   13. THEME BUTTON
========================================== */

#theme-toggle{

    position:fixed;

    top:90px;

    right:20px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:#D4AF37;

    color:#111;

    font-size:24px;

    cursor:pointer;

    z-index:9999;

    transition:.3s;

}

#theme-toggle:hover{

    transform:scale(1.1);

}
/* ==========================================
   14. SECTION
========================================== */

section{

    padding:100px 10%;

}

section h2{

    text-align:center;

    color:#D4AF37;

    font-size:42px;

    margin-bottom:60px;

    position:relative;

}

section h2::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-15px;

    transform:translateX(-50%);

    width:80px;

    height:3px;

    background:#D4AF37;

}

/* ==========================================
   15. ABOUT
========================================== */

.about{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:60px;

}

.about-text{

    flex:1;

}

.about-text p{

    color:#ccc;

    font-size:18px;

    line-height:1.9;

}

.about-image{

    flex:1;

}

.about-image img{

    border-radius:20px;

    box-shadow:0 15px 35px rgba(212,175,55,.25);

}

/* ==========================================
   16. SERVICES
========================================== */

.services{

    text-align:center;

}

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

}

.card{

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.1);

    padding:35px;

    border-radius:20px;

    transition:.35s;

}

.card:hover{

    transform:translateY(-10px);

    box-shadow:0 15px 35px rgba(212,175,55,.30);

}

/* ==========================================
   17. GALLERY
========================================== */

.gallery{

    text-align:center;

}

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:20px;

    margin-top:40px;

}

.gallery-item{

    overflow:hidden;

    border-radius:20px;

    position:relative;

}

.gallery-item img{

    width:100%;

    transition:.5s;

}

.gallery-item:hover img{

    transform:scale(1.08);

}

.overlay{

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

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

    color:#fff;

    padding:20px;

    transform:translateY(100%);

    transition:.4s;

}

.gallery-item:hover .overlay{

    transform:translateY(0);

}

/* ==========================================
   18. COUNTER
========================================== */

.counter{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(30px,1fr));

    gap:30px;

    text-align:center;

    background:#181818;

    border-radius:20px;

    padding:40px;

}

.counter-box h2{

    color:#D4AF37;

    font-size:46px;

}

.counter-box p{

    margin-top:10px;

    color:#ccc;

}

/* ==========================================
   19. TEAM
========================================== */

.team{

    text-align:center;

}

.team-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

}

.member{

    background:#1c1c1c;

    padding:35px;

    border-radius:20px;

    transition:.35s;

}

.member:hover{

    transform:translateY(-10px);

}

.member img{

    width:180px;

    height:180px;

    margin:auto;

    border-radius:50%;

    object-fit:cover;

    border:4px solid #D4AF37;

}

.member h3{

    margin-top:20px;

}

.member p{

    color:#bbb;

}

/* ==========================================
   20. BEFORE & AFTER
========================================== */

.before-after{

    text-align:center;

}

.compare{

    display:grid;

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

    gap:25px;

}

.compare img{

    border-radius:20px;

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

}

/* ==========================================
   21. STATS
========================================== */

.stats{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:25px;

}

.stat-box{

    background:#1f1f1f;

    border-radius:20px;

    padding:35px;

    border:1px solid #333;

}

.stat-box h2{

    color:#D4AF37;

    font-size:48px;

}

.stat-box p{

    color:#ccc;
margin-top:10px;

}

/* ==========================================
   22. AWARDS
========================================== */

.awards{

    text-align:center;

}

.award-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:25px;

}

.award-card{

    background:#1d1d1d;

    padding:35px;

    border-radius:20px;

    transition:.35s;

}

.award-card:hover{

    transform:translateY(-10px);

    box-shadow:0 15px 30px rgba(212,175,55,.25);

}
/* ==========================================
   23. PRICE LIST
========================================== */

.price{

    text-align:center;

}

.price-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}

.price-card{

    background:#1a1a1a;

    padding:35px;

    border-radius:20px;

    border:1px solid #333;

    transition:.35s;

}

.price-card:hover{

    transform:translateY(-10px);

    border-color:#D4AF37;

    box-shadow:0 15px 35px rgba(212,175,55,.25);

}

.price-card h3{

    color:#D4AF37;

    margin-bottom:15px;

}

.price-card span{

    display:block;

    margin-top:20px;

    font-size:24px;

    font-weight:bold;

}

/* ==========================================
   24. PROMOTION
========================================== */

.promotion{

    text-align:center;

    background:linear-gradient(135deg,#D4AF37,#b68d1f);

    color:#111;

    border-radius:20px;

}

.promotion h2{

    color:#111;

}

.promotion h3{

    margin:20px 0;

    font-size:32px;

}

/* ==========================================
   25. PACKAGE
========================================== */

.package{

    text-align:center;

}

.package-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}

.package-card{

    background:#111;

    border:2px solid #D4AF37;

    border-radius:20px;

    padding:40px;

    transition:.35s;

}

.package-card:hover{

    transform:translateY(-10px);

}

.package-card ul{

    margin-top:20px;

}

.package-card li{

    margin:12px 0;

    color:#ddd;

}

/* ==========================================
   26. VIP MEMBERSHIP
========================================== */

.membership{

    text-align:center;

}

.membership p{

    max-width:700px;

    margin:20px auto 40px;

    color:#ccc;

}

.vip-benefits{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

}

.benefit{

    background:#1d1d1d;

    padding:25px;

    border-radius:15px;

    border:1px solid #333;

    transition:.35s;

}

.benefit:hover{

    transform:translateY(-8px);

    border-color:#D4AF37;

}

/* ==========================================
   27. BOOKING
========================================== */

.booking{

    text-align:center;

}

.booking form{

    max-width:600px;

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:20px;

}

.booking input,
.booking select{

    padding:15px;

    border:none;

    border-radius:12px;

    font-size:16px;

}

.booking button{

    cursor:pointer;

}

/* ==========================================
   28. REVIEWS
========================================== */

.reviews{

    text-align:center;

}

.review-card{

    max-width:650px;

    margin:25px auto;

    background:#1d1d1d;

    padding:35px;

    border-radius:20px;

    transition:.35s;

}

.review-card:hover{

    transform:translateY(-8px);

}

/* ==========================================
   29. CONTACT
========================================== */

.contact{

    text-align:center;

}

.contact p{

    margin:12px 0;

    font-size:18px;

}

.map{

    margin-top:40px;

    overflow:hidden;

    border-radius:20px;

}

.map iframe{

    width:100%;

    height:400px;

    border:0;

}

/* ==========================================
   30. NEWSLETTER
========================================== */

.newsletter{

    background:#181818;

    text-align:center;

}

.newsletter-form{

    max-width:550px;

    margin:auto;

    display:flex;

    gap:15px;

}

.newsletter-form input{

    flex:1;

    padding:15px;

    border:none;

    border-radius:10px;

}

/* ==========================================
   31. INSTAGRAM
========================================== */

.instagram{

    text-align:center;

}

.instagram-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));

    gap:20px;

}

.instagram-grid img{

    border-radius:15px;

    transition:.35s;

}

.instagram-grid img:hover{

    transform:scale(1.05);

}
/* ==========================================
   32. FOOTER
========================================== */

footer{

    background:linear-gradient(180deg,#111,#000);

    border-top:1px solid rgba(212,175,55,.25);

    padding:50px 10%;

}

.footer-container{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:30px;

}

footer h3,
footer h4{

    color:#D4AF37;

    margin-bottom:15px;

}

footer p{

    color:#bbb;

    margin:8px 0;

}

footer a{

    display:block;

    color:#ccc;

    margin:8px 0;

    transition:.3s;

}

footer a:hover{

    color:#D4AF37;

    padding-left:6px;

}
/* ==========================================
   33. LIGHTBOX
========================================== */

.lightbox{

    position:fixed;

    inset:0;

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

    display:none;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.lightbox img{

    max-width:90%;

    max-height:90%;

    border-radius:15px;

    animation:zoom .35s ease;

}

.close{

    position:absolute;

    top:30px;

    right:40px;

    font-size:50px;

    color:#fff;

    cursor:pointer;

}

@keyframes zoom{

    from{

        transform:scale(.7);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

/* ==========================================
   34. BACK TO TOP
========================================== */

#topButton{

    position:fixed;

    right:25px;

    bottom:25px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:#D4AF37;

    color:#111;

    font-size:22px;

    cursor:pointer;

    display:none;

    z-index:999;

    transition:.3s;

    box-shadow:0 10px 25px rgba(0,0,0,.35);

}

#topButton:hover{

    transform:scale(1.1);

    background:#fff;

}

/* ==========================================
   35. FLOATING BUTTONS
========================================== */

.call-btn,
.messenger-btn{

    position:fixed;

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    text-decoration:none;

    z-index:999;

    transition:.3s;

    animation:floatIcon 2.5s ease-in-out infinite;

}

.call-btn{

    left:20px;

    bottom:20px;

    background:#D4AF37;

    color:#111;

}

.messenger-btn{

    right:20px;

    bottom:95px;

    background:#0084FF;

    color:#fff;

}

.call-btn:hover,
.messenger-btn:hover{

    transform:scale(1.12);

}

@keyframes floatIcon{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

/* ==========================================
   36. CURSOR GLOW
========================================== */

#cursor-glow{

    position:fixed;

    width:22px;

    height:22px;

    border-radius:50%;

    background:rgba(212,175,55,.45);

    pointer-events:none;

    transform:translate(-50%,-50%);

    filter:blur(10px);

    z-index:99999;

}

/* ==========================================
   37. REVEAL ANIMATION
========================================== */

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:1s;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

.hidden{

    opacity:0;

    transform:translateY(40px);

}

.show{

    opacity:1;

    transform:translateY(0);

    transition:.8s;

}

/* ==========================================
   38. SCROLL INDICATOR
========================================== */

.scroll-indicator{

    position:absolute;

    bottom:30px;

    left:50%;

    transform:translateX(-50%);

    color:#D4AF37;

    letter-spacing:2px;

    animation:bounce 2s infinite;

}

@keyframes bounce{

    0%,100%{

        transform:translate(-50%,0);

    }

    50%{

        transform:translate(-50%,10px);

    }

}

/* ==========================================
   39. LIGHT MODE
========================================== */

body.light-mode{

    background:#f8f8f8;

    color:#222;

}

body.light-mode header{

    background:#fff;

}

body.light-mode .hero{

    background:

    linear-gradient(

    rgba(255,255,255,.35),

    rgba(255,255,255,.35)

    ),

    url("../images/hero.jpg")

    center/cover;

}

body.light-mode .card,
body.light-mode .member,
body.light-mode .review-card,
body.light-mode .benefit,
body.light-mode .price-card,
body.light-mode .package-card,
body.light-mode .award-card,
body.light-mode .stat-box{

    background:#fff;

    color:#222;

    border:1px solid #ddd;

}

body.light-mode p{

    color:#444;

}

body.light-mode h1,
body.light-mode h2,
body.light-mode h3{

    color:#D4AF37;

}
/* ==========================================
   40. RESPONSIVE
========================================== */

@media(max-width:768px){

.navbar{

flex-direction:column;

padding:20px;

}

.menu{

display:none;

flex-direction:column;

width:100%;

margin-top:20px;

text-align:center;

gap:15px;

}

.menu.active{

display:flex;

}

.menu-toggle{

display:block;

}

.hero{

height:90vh;

padding:20px;

}

.hero-content h1{

font-size:38px;

}

.hero-content p{

font-size:17px;

}

.about{

flex-direction:column;

}

.compare{

grid-template-columns:1fr;

}

.newsletter-form{

flex-direction:column;

}

.instagram-grid{

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

}

.footer-container{

grid-template-columns:1fr;

text-align:center;

}

.call-btn,
.messenger-btn{

width:55px;

height:55px;

font-size:24px;

}

}

.logo {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.logo span {
    font-size: 30px;
    font-weight: 700;
}


.logo strong {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    white-space: nowrap;
}

.loader-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.loader-logo span {
    font-size: 58px;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1;
    margin: 8px 0;
}

.loader-logo small {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
}