/* ==========================================================
   KAMARIA SPARKLE EVENTS
   Version 3.0
   Luxury Theme
========================================================== */

/* ==========================================================
   GOOGLE FONT
========================================================== */

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

/* ==========================================================
   ROOT VARIABLES
========================================================== */

:root{

    --primary:#C8A95A;

    --secondary:#F8F5F0;

    --accent:#E8D9C5;

    --dark:#2F2F2F;

    --light:#FFFFFF;

    --text:#666666;

    --border:#ECECEC;

    --shadow:0 15px 35px rgba(0,0,0,.08);

    --radius:18px;

    --transition:.35s ease;

}

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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

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

    background:var(--secondary);

    color:var(--dark);

    line-height:1.7;

    overflow-x:hidden;

}

img{

    width:100%;

    display:block;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

.container{

    width:min(1200px,90%);

    margin:auto;

}

/* ==========================================================
   SECTION TITLES
========================================================== */

.section-header{

    text-align:center;

    margin-bottom:60px;

}

.section-header h2{

    font-size:2.5rem;

    color:var(--dark);

    margin-bottom:15px;

    font-weight:700;

}

.section-header p{

    max-width:700px;

    margin:auto;

    color:var(--text);

    font-size:1.05rem;

}
/* ==========================================================
   HEADER
========================================================== */

#header{

    position:fixed;

    top:18px;

    left:50%;

    transform:translateX(-50%);

    width:min(1280px,95%);

    z-index:9999;

    transition:all .35s ease;

}

#header.scrolled{

    top:10px;

}

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

.navbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:82px;

    padding:0 30px;

    background:rgba(18,18,18,.96);

    backdrop-filter:blur(18px);

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

    border-radius:22px;

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

    box-shadow:0 18px 40px rgba(0,0,0,.18);

    transition:all .35s ease;

}

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

.logo{

    display:flex;

    align-items:center;

    flex-shrink:0;

}

.logo img{

    width:150px;

    transition:all .35s ease;

}

.logo:hover img{

    transform:scale(1.04);

}

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

.nav-links{

    display:flex;

    align-items:center;

    gap:48px;

}

.nav-links li{

    list-style:none;

}

.nav-links a{

    position:relative;

    display:flex;

    align-items:center;

    gap:10px;

    color:#FFFFFF;

    font-size:.96rem;

    font-weight:500;

    transition:all .35s ease;

}

.nav-links a span{

    transition:all .35s ease;

}

/* ==========================================================
   ICONS
========================================================== */

.nav-links a i{

    color:var(--primary);

    font-size:16px;

    transition:all .35s ease;

}

/* ==========================================================
   HOVER
========================================================== */

.nav-links a:hover{

    color:var(--primary);

}

.nav-links a:hover i{

    color:#FFD979;

    transform:translateY(-2px) scale(1.08);

}

/* ==========================================================
   ACTIVE MENU
========================================================== */

.nav-links a.active{

    color:#FFFFFF;

}

.nav-links a.active i{

    color:#FFD979;

}

/* ==========================================================
   UNDERLINE ANIMATION
========================================================== */

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:0;

    height:2px;

    background:var(--primary);

    border-radius:20px;

    transition:all .35s ease;

}

.nav-links a:hover::after,

.nav-links a.active::after{

    width:100%;

}
/* ==========================================================
   RIGHT SIDE
========================================================== */

.nav-right{

    display:flex;

    align-items:center;

    gap:18px;

}

/* ==========================================================
   BOOK NOW BUTTON
========================================================== */

.nav-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    background:var(--primary);

    color:#FFFFFF;

    padding:14px 32px;

    border-radius:50px;

    font-size:.95rem;

    font-weight:600;

    box-shadow:0 12px 28px rgba(200,169,90,.30);

    transition:all .35s ease;

}

.nav-btn i{

    font-size:18px;

}

.nav-btn:hover{

    background:#D6B05C;

    color:#FFFFFF;

    transform:translateY(-3px);

    box-shadow:0 18px 38px rgba(200,169,90,.45);

}

/* ==========================================================
   MOBILE MENU BUTTON
========================================================== */

.menu-toggle{

    display:none;

    align-items:center;

    justify-content:center;

    width:48px;

    height:48px;

    border:none;

    background:transparent;

    color:#FFFFFF;

    border-radius:12px;

    cursor:pointer;

    transition:all .35s ease;

}

.menu-toggle i{

    font-size:24px;

}

.menu-toggle:hover{

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

}

/* ==========================================================
   TABLET
========================================================== */

@media(max-width:1100px){

    .navbar{

        padding:0 22px;

    }

    .nav-links{

        gap:30px;

    }

}



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

@media(max-width:992px){

    .menu-toggle{

        display:flex;

    }

    .nav-btn{

        display:none;

    }

    .nav-links{

        position:absolute;

        top:95px;

        left:50%;

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

        width:95%;

        z-index:10000;

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        gap:0;

        padding:18px 0;

        background:#181818;

        border-radius:22px;

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

        box-shadow:0 18px 40px rgba(0,0,0,.28);

        opacity:0;

        visibility:hidden;

        pointer-events:none;

        transition:
         opacity .35s ease,
         transform .35s ease,
         visibility .35s ease;

    }

    .nav-links.active{

        opacity:1;

        visibility:visible;

        pointer-events:auto;
        transform:translate(-50%,0);
        z-index:10000;

    }

    .nav-links li{

        width:100%;

    }

    .nav-links a{

        width:100%;

        justify-content:flex-start;

        padding:16px 28px;

    }

    .nav-links a:hover{

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

    }

    .nav-links a::after{

        display:none;

    }

}

/* ==========================================================
   SMALL TABLETS
========================================================== */

@media(max-width:768px){

    #header{

        width:96%;

        top:10px;

    }

    .navbar{

        min-height:76px;

    }

    .logo img{

        width:135px;

    }

}

/* ==========================================================
   PHONES
========================================================== */

@media(max-width:480px){

    .navbar{

        padding:0 18px;

    }

    .logo img{

        width:120px;

    }

    .nav-links{

        width:96%;

    }

}

/* ==========================================================
   SMOOTH TRANSITIONS
========================================================== */

.logo,
.nav-links a,
.nav-btn,
.menu-toggle{

    transition:all .35s ease;

}
/* ==========================================================
   GLOBAL BUTTONS
========================================================== */

.btn-primary{

    display:inline-block;

    background:var(--primary);

    color:white;

    padding:15px 34px;

    border-radius:50px;

    font-weight:600;

    transition:var(--transition);

    box-shadow:var(--shadow);

}

.btn-primary:hover{

    transform:translateY(-4px);

}

.btn-secondary{

    display:inline-block;

    padding:15px 34px;

    border:2px solid var(--primary);

    border-radius:50px;

    background:white;

    color:var(--primary);

    font-weight:600;

    transition:var(--transition);

}

.btn-secondary:hover{

    background:var(--primary);

    color:white;

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

#hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background: url("../images/hero/hero-bg.jpg") center center / cover no-repeat;

}

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

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,0,0,.58),
        rgba(0,0,0,.58)
    );

    z-index:1;

}

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

.hero-container{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    min-height:100vh;

}

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

.hero-content{

    max-width:920px;

    margin:auto;

    padding-top:110px;

}

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

.hero-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 24px;

    margin-bottom:28px;

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

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

    backdrop-filter:blur(8px);

    border-radius:50px;

    color:#FFD979;

    font-size:.95rem;

    font-weight:600;

    letter-spacing:.4px;

}

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

.hero-content h1{

    font-size:5rem;

    line-height:1.05;

    font-weight:700;

    color:#FFFFFF;

    margin-bottom:20px;

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

}

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

.hero-content h2{

    display:inline-block;

    margin:35px auto;

    padding:14px 28px;

    border:1px solid rgba(200,169,90,.35);

    border-radius:50px;

    background:rgba(200,169,90,.10);

    color:#F4D06F;

    font-size:1.15rem;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    text-shadow:0 0 12px rgba(244,208,111,.30);

    backdrop-filter:blur(8px);

}

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

.hero-content p{

    max-width:760px;

    margin:auto;

    color:rgba(255,255,255,.92);

    font-size:1.15rem;

    line-height:1.9;

}

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

.hero-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:22px;

    margin-top:45px;

    flex-wrap:wrap;

}

.hero-buttons .btn-primary,

.hero-buttons .btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-width:240px;

    height:60px;

    border-radius:50px;

    font-size:1rem;

    font-weight:600;

    transition:all .35s ease;

}

.hero-buttons .btn-primary{

    background:var(--primary);

    color:#FFFFFF;

    box-shadow:0 15px 35px rgba(200,169,90,.35);

}

.hero-buttons .btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 22px 45px rgba(200,169,90,.45);

}

.hero-buttons .btn-secondary{

    background:transparent;

    color:#FFFFFF;

    border:2px solid rgba(255,255,255,.75);

}

.hero-buttons .btn-secondary:hover{

    background:#FFFFFF;

    color:var(--dark);

}

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

.hero-features{

    display:flex;

    justify-content:center;

    gap:45px;

    margin-top:45px;

    flex-wrap:wrap;

}
.hero-features div{

    display:flex;

    align-items:center;

    gap:10px;

    color:#ffffff;

    font-weight:500;

    font-size:.98rem;

}
.hero-features i{

    color:#F4D06F;

    font-size:1rem;

}
/* ==========================================================
   SCROLL INDICATOR
========================================================== */

.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:30px;

    transform:translateX(-50%);

    z-index:3;

}

.scroll-indicator a{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;

    color:#FFFFFF;

    font-size:.9rem;

    transition:.35s;

}

.scroll-indicator a:hover{

    color:var(--primary);

}

.scroll-indicator i{

    font-size:18px;

    animation:bounce 2s infinite;

}

@keyframes bounce{

    0%,20%,50%,80%,100%{

        transform:translateY(0);

    }

    40%{

        transform:translateY(8px);

    }

    60%{

        transform:translateY(4px);

    }

}

/* ==========================================================
   LUXURY INFORMATION BAR
========================================================== */

.hero-bar{

    background:#111111;

    padding:20px 0;

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

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

}

.hero-bar-content{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:22px;

    color:#FFFFFF;

    font-size:.95rem;

    font-weight:500;

}

.hero-bar-content span{

    width:6px;

    height:6px;

    background:var(--primary);

    border-radius:50%;

}

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

@media(max-width:992px){

    .hero-content{

        padding-top:90px;

    }

    .hero-content h1{

        font-size:3.9rem;

    }

    .hero-content h2{

        font-size:1.25rem;

    }

}

@media(max-width:768px){

    #hero{

        min-height:88vh;

    }

    .hero-content{

        padding-top:80px;

    }

    .hero-content h1{

        font-size:3rem;

    }

    .hero-content h2{

        font-size:1.1rem;

    }

    .hero-content p{

        font-size:1rem;

    }

    .hero-features{

        flex-direction:column;

        gap:16px;

    }

    .hero-buttons{

        flex-direction:column;

        width:100%;

    }

    .hero-buttons .btn-primary,

    .hero-buttons .btn-secondary{

        width:100%;

        max-width:320px;

    }

}

@media(max-width:480px){

    .hero-tag{

        font-size:.82rem;

        padding:9px 18px;

    }

    .hero-content h1{

        font-size:2.4rem;

    }

    .hero-content h2{

        font-size:1rem;

    }

    .hero-bar-content{

        flex-direction:column;

        gap:14px;

    }

    .hero-bar-content span{

        display:none;

    }

}
/*==========================================================
  PLAN MY EVENT
==========================================================*/

.plan-section{

    padding:100px 0;

    background:#F8F6F2;

}

.plan-section .container{

    max-width:1400px;

    margin:auto;

    padding:0 40px;

}

/*----------------------------------------------------------
SECTION INTRO
----------------------------------------------------------*/

.section-tag{

    display:inline-block;

    padding:12px 26px;

    border-radius:50px;

    background:rgba(200,169,90,.12);

    border:1px solid rgba(200,169,90,.25);

    color:var(--primary);

    font-size:.95rem;

    font-weight:600;

    letter-spacing:1px;

    margin-bottom:25px;

}

.section-title{

    font-size:3rem;

    font-weight:800;

    color:var(--dark);

    margin-bottom:20px;

}

.section-description{

    max-width:720px;

    margin:0 auto 70px;

    color:#666;

    line-height:1.9;

    font-size:1.08rem;

}

/*----------------------------------------------------------
GRID
----------------------------------------------------------*/

.plan-grid{

    display:grid;

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

    gap:35px;

}
/*----------------------------------------------------------
PLAN CARDS
----------------------------------------------------------*/

.plan-card{

    background:#ffffff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:all .45s ease;

    position:relative;

    border:1px solid transparent;

}

.plan-card:hover{

    transform:translateY(-12px);

    border-color:rgba(200,169,90,.45);

    box-shadow:0 25px 60px rgba(0,0,0,.15);

}

.plan-card img{

    width:100%;

    height:260px;

    display:block;

    object-fit:cover;

    transition:transform .6s ease;

}

.plan-card:hover img{

    transform:scale(1.08);

}

.plan-content{

    padding:35px 30px;

}

.plan-content i{

    font-size:2rem;

    color:var(--primary);

    margin-bottom:18px;

}

.plan-content h3{

    font-size:1.6rem;

    color:var(--dark);

    margin-bottom:15px;

    font-weight:700;

}

.plan-content p{

    color:#666;

    line-height:1.8;

    margin-bottom:28px;

    min-height:85px;

}

.plan-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--primary);

    font-weight:700;

    text-decoration:none;

    transition:all .3s ease;

}

.plan-link i{

    font-size:.9rem;

    margin:0;

    transition:transform .3s ease;

}

.plan-link:hover{

    color:#000;

}

.plan-link:hover i{

    transform:translateX(6px);

}

/*----------------------------------------------------------
RESPONSIVE
----------------------------------------------------------*/

@media(max-width:1100px){

    .plan-grid{

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

    }

}

@media(max-width:768px){

    .plan-section{

        padding:80px 20px;

    }

    .section-title{

        font-size:2.2rem;

    }

    .section-description{

        margin-bottom:50px;

    }

    .plan-grid{

        grid-template-columns:1fr;

        gap:30px;

    }

    .plan-card img{

        height:240px;

    }

}
/*==========================================================
STATISTICS
==========================================================*/

.stats{

    padding:90px 0;

    background:linear-gradient(180deg,#fffdf9 0%,#f8f4ec 100%);

}

.stats .container{

    max-width:1400px;

    margin:auto;

    padding:0 40px;

}

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

.stats-header{

    text-align:center;

    max-width:850px;

    margin:0 auto 55px;

}

.stats-header .section-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 28px;

    border-radius:40px;

    background:rgba(209,170,73,.08);

    border:1px solid rgba(209,170,73,.2);

    color:var(--gold);

    font-weight:700;

    margin-bottom:25px;

}

.stats-header h2{

    font-size:clamp(2.2rem,4vw,3.3rem);

    color:var(--dark);

    margin-bottom:20px;

    line-height:1.15;

}

.stats-header p{

    font-size:1.08rem;

    color:#666;

    line-height:1.8;

}

/*================ GRID ================*/

.stats-grid{

    display:grid;

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

    gap:25px;

}

/*================ CARD ================*/

.stat-card{

    background:#fff;

    border-radius:22px;

    padding:20px;

    text-align:center;

    border:1px solid rgba(209,170,73,.15);

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.stat-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:3px;

    background:linear-gradient(90deg,#D1AA49,#F7D978);

}

.stat-card:hover{

    transform:translateY(-10px);

    box-shadow:0 28px 55px rgba(0,0,0,.14);

    border-color:rgba(209,170,73,.35);

}

/*================ ICON ================*/

.stat-icon{

    width:62px;

    height:62px;

    margin:0 auto 15px;

    border-radius:50%;

    background:#D1AA49;

    display:flex;

    align-items:center;

    justify-content:center;

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

    transition:.35s;

}

.stat-icon i{

    color:#fff;

    font-size:24px;

}

.stat-card:hover .stat-icon{

    transform:translateY(-3px) scale(1.08);

}

/*================ NUMBER ================*/

.stat-card h3{

    font-size:2.35rem;

    color:var(--dark);

    margin-bottom:8px;

    line-height:1;

    font-weight:800;

    transition:.3s;

}

.stat-card:hover h3{

    color:var(--gold);

}

/*================ TEXT ================*/

.stat-card p{

    margin:0;

    color:#555;

    font-size:1rem;

    font-weight:600;

    line-height:1.45;

}

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

@media(max-width:1200px){

    .stats-grid{

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

    }

}

@media(max-width:768px){

    .stats{

        padding:70px 20px;

    }

    .stats-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .stats-header{

        margin-bottom:45px;

    }

}
/* ==========================================================
   HIRE COLLECTION
========================================================== */

.hire{

    padding:100px 0;

    background:var(--secondary);

}

.hire-grid{

    display:grid;

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

    gap:35px;

}

.hire-card{

    background:var(--light);

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.hire-card:hover{

    transform:translateY(-10px);

}

.hire-card img{

    height:250px;

    object-fit:cover;

}

.hire-content{

    padding:30px;

}

.hire-content h3{

    font-size:1.5rem;

    color:var(--dark);

    margin-bottom:15px;

}

.hire-content p{

    color:var(--text);

    margin-bottom:25px;

    min-height:90px;

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

.portfolio{
    padding:110px 0;
    background:#faf7f2;
    position:relative;
}

.portfolio .container{
    max-width:1400px;
    margin:auto;
    padding:0 40px;
}

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

.portfolio-header{
    max-width:850px;
    margin:0 auto 70px;
    text-align:center;
}

.portfolio-header .section-tag{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 28px;
    border-radius:50px;
    background:rgba(209,170,73,.08);
    border:1px solid rgba(209,170,73,.18);
    color:var(--gold);
    font-weight:700;
    margin-bottom:25px;
}

.portfolio-header h2{
    font-size:clamp(2.4rem,4vw,3.7rem);
    color:var(--dark);
    line-height:1.15;
    margin-bottom:20px;
}

.portfolio-header p{
    max-width:760px;
    margin:auto;
    color:#666;
    line-height:1.8;
    font-size:1.08rem;
}

/*==========================================================
GRID
==========================================================*/

.portfolio-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

/* Featured Image */

.portfolio-item.featured{
    grid-column:1 / -1;
    height:520px;
}

/* Normal Images */

.portfolio-item{
    position:relative;
    display:block;
    height:320px;
    overflow:hidden;
    border-radius:26px;
    text-decoration:none;
    background:#eee;
}

/* Images */

.portfolio-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.8s ease;
}

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

.portfolio-footer{
    margin-top:55px;
    text-align:center;
}

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

@media(max-width:992px){

    .portfolio-grid{
        grid-template-columns:1fr;
    }

    .portfolio-item.featured{
        height:400px;
    }

    .portfolio-item{
        height:280px;
    }

}

@media(max-width:768px){

    .portfolio{

        padding:80px 20px;

    }

    .portfolio-header{

        margin-bottom:50px;

    }

    .portfolio-header h2{

        font-size:2.3rem;

    }

    .portfolio-item.featured{

        height:300px;

    }

    .portfolio-item{

        height:240px;

    }

}
/*==========================================================
PORTFOLIO OVERLAY
==========================================================*/

.portfolio-overlay{

    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    padding:35px;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.78) 0%,
        rgba(0,0,0,.45) 35%,
        rgba(0,0,0,.10) 70%,
        rgba(0,0,0,0) 100%
    );

    transition:.45s ease;
}

/* Category */

.portfolio-overlay span{

    display:inline-block;
    width:fit-content;

    padding:7px 16px;

    margin-bottom:15px;

    border-radius:40px;

    background:rgba(209,170,73,.95);

    color:#fff;

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.8px;

    text-transform:uppercase;

    box-shadow:0 10px 25px rgba(209,170,73,.30);

}

/* Title */

.portfolio-overlay h3{

    color:#fff;

    font-size:2rem;

    font-weight:800;

    line-height:1.2;

    max-width:75%;

    margin:0;

    text-shadow:0 4px 20px rgba(0,0,0,.40);

}

/*==========================================================
HOVER
==========================================================*/

.portfolio-item{

    transition:.45s ease;

}

.portfolio-item:hover{

    transform:translateY(-8px);

    box-shadow:0 30px 60px rgba(0,0,0,.18);

}

.portfolio-item:hover img{

    transform:scale(1.08);

}

.portfolio-item:hover .portfolio-overlay{

    background:linear-gradient(
        to top,
        rgba(0,0,0,.90) 0%,
        rgba(0,0,0,.55) 40%,
        rgba(0,0,0,.15) 75%,
        rgba(0,0,0,0) 100%
    );

}

.portfolio-item:hover span{

    background:#fff;

    color:var(--gold);

}

.portfolio-item:hover h3{

    transform:translateY(-4px);

}

/*==========================================================
VIEW GALLERY BUTTON
==========================================================*/

.btn-outline{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:16px 34px;

    border:2px solid var(--gold);

    border-radius:60px;

    color:var(--gold);

    font-weight:700;

    text-decoration:none;

    transition:.35s ease;

}

.btn-outline:hover{

    background:var(--gold);

    color:#fff;

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(209,170,73,.35);

}

.btn-outline i{

    transition:.35s;

}

.btn-outline:hover i{

    transform:translateX(5px);

}

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

@media(max-width:992px){

    .portfolio-overlay{

        padding:25px;

    }

    .portfolio-overlay h3{

        font-size:1.55rem;

        max-width:100%;

    }

}

@media(max-width:768px){

    .portfolio-overlay{

        padding:20px;

    }

    .portfolio-overlay span{

        font-size:.72rem;

        padding:6px 14px;

    }

    .portfolio-overlay h3{

        font-size:1.3rem;

    }

}
/* ==========================================================
   WHY CHOOSE US
========================================================== */

.why-us{

    padding:100px 0;

    background:white;

}

.why-grid{

    display:grid;

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

    gap:35px;

}

.why-card{

    background:var(--light);

    padding:40px 30px;

    border-radius:var(--radius);

    text-align:center;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.why-card:hover{

    transform:translateY(-10px);

}

.why-card h3{

    color:var(--primary);

    margin-bottom:18px;

    font-size:1.45rem;

}

.why-card p{

    color:var(--text);

    line-height:1.8;

}

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

.reviews{

    padding:100px 0;

    background:var(--secondary);

}

.review-grid{

    display:grid;

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

    gap:35px;

}

.review-card{

    background:white;

    padding:35px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.review-card:hover{

    transform:translateY(-10px);

}

.stars{

    color:#FFD700;

    font-size:1.3rem;

    margin-bottom:20px;

}

.review-card p{

    color:var(--text);

    font-style:italic;

    margin-bottom:25px;

    line-height:1.9;

}

.review-card h4{

    color:var(--primary);

    font-weight:600;

}

/* ==========================================================
   COMMON SECTION SPACING
========================================================== */

.gallery,

.why-us,

.reviews{

    scroll-margin-top:100px;

}
/* ==========================================================
   CALL TO ACTION
========================================================== */

.cta{

    padding:100px 0;

    background:linear-gradient(135deg,var(--primary),#b8943e);

    color:white;

    text-align:center;

}

.cta h2{

    font-size:2.8rem;

    margin-bottom:20px;

}

.cta p{

    max-width:700px;

    margin:0 auto 40px;

    font-size:1.1rem;

    line-height:1.8;

}

.cta .btn-secondary{

    background:white;

    color:var(--primary);

    border:2px solid white;

}

.cta .btn-secondary:hover{

    background:transparent;

    color:white;

}

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

footer{

    background:#1f1f1f;

    color:#d9d9d9;

    padding:70px 0 0;

}

.footer-container{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:50px;

    align-items:flex-start;

}

.footer-logo img{

    width:180px;

    margin-bottom:20px;

}

.footer-logo p{

    line-height:1.8;

    color:#bdbdbd;

}

.footer-links h3,

.footer-contact h3{

    color:white;

    margin-bottom:20px;

}

.footer-links ul{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.footer-links a{

    transition:var(--transition);

}

.footer-links a:hover{

    color:var(--primary);

}

.footer-contact p{

    margin-bottom:12px;

}

.footer-contact .btn-primary{

    margin-top:20px;

}

.footer-bottom{

    margin-top:60px;

    padding:25px;

    text-align:center;

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

    font-size:.95rem;

}

/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.hero-content,

.stat-card,

.hire-card,

.style-card,

.gallery-item,

.why-card,

.review-card{

    animation:fadeUp .8s ease both;

}

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

@media(max-width:992px){

    .navbar{

        flex-wrap:wrap;

    }

    .nav-links{

        gap:20px;

    }

    .hero-content h1{

        font-size:3rem;

    }

    .footer-container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-logo img{

        margin:0 auto 20px;

    }

}

@media(max-width:768px){

    .menu-toggle{

        display:block;

    }

    .nav-links{

        display:flex;

    }

    .nav-btn{

        display:none;

    }

    .hero{

        padding:140px 20px 90px;

    }

    .hero-content h1{

        font-size:2.4rem;

    }

    .hero-content p{

        font-size:1rem;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .btn-primary,

    .btn-secondary{

        width:100%;

        text-align:center;

    }

    .section-header h2{

        font-size:2rem;

    }

}

@media(max-width:480px){

    .container{

        width:92%;

    }

    .hero-content h1{

        font-size:2rem;

    }

    .stat-card h2{

        font-size:2rem;

    }

    .hire-grid,

    .styling-grid,

    .gallery-grid,

    .why-grid,

    .review-grid{

        grid-template-columns:1fr;

    }

}
/*==========================================================
SCROLL REVEAL ANIMATIONS
==========================================================*/

.reveal{

    opacity:0;

    transform:translateY(50px);

    transition:all .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/* Elegant stagger */

.plan-card:nth-child(1){

    transition-delay:.05s;

}

.plan-card:nth-child(2){

    transition-delay:.12s;

}

.plan-card:nth-child(3){

    transition-delay:.19s;

}

.plan-card:nth-child(4){

    transition-delay:.26s;

}

.plan-card:nth-child(5){

    transition-delay:.33s;

}

.plan-card:nth-child(6){
]
    transition-delay:.40s;

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

.floating-whatsapp{
    position:fixed;
    right:24px;
    bottom:24px;

    width:62px;
    height:62px;

    border-radius:50%;

    background:#25D366;

    color:#fff;

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

    font-size:30px;

    text-decoration:none;

    box-shadow:0 12px 30px rgba(0,0,0,.25);

    z-index:999;

    transition:.3s;
}

.floating-whatsapp:hover{
    transform:translateY(-6px) scale(1.08);
}

@media(max-width:768px){

    .floating-whatsapp{

        width:58px;
        height:58px;

        right:18px;
        bottom:18px;

        font-size:28px;

    }

}