/* =========================================================
       GLOBAL STYLES
    ========================================================= */

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

    :root{
      --primary:#2F3538;
      --secondary:#D4AF37;
      --white:#ffffff;
      --light:#F8F9FA;
      --text:#666;
      --transition:0.4s ease;
      --shadow:0 10px 30px rgba(0,0,0,0.08);
      --radius:16px;
    }

    body{
      font-family:'Inter', sans-serif;
      background:var(--light);
      color:var(--primary);
      overflow-x:hidden;
      line-height:1.7;
    }

    a{
      text-decoration:none;
      color:inherit;
    }

    img{
      width:100%;
      display:block;
    }

    .container{
      width:90%;
      max-width:1300px;
      margin:auto;
    }

    section{
      padding:90px 0;
    }

    .section-header{
      text-align:center;
      margin-bottom:60px;
    }

    .section-header span{
      color:var(--secondary);
      text-transform:uppercase;
      letter-spacing:2px;
      font-size:14px;
      font-weight:700;
    }

    .section-header h2{
      font-size:48px;
      margin-top:15px;
      margin-bottom:20px;
      line-height:1.2;
    }

    .section-header p{
      max-width:760px;
      margin:auto;
      color:var(--text);
      font-size:17px;
    }

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

    header{
      width:100%;
      background:rgba(47,53,56,0.97);
      position:sticky;
      top:0;
      z-index:1000;
      backdrop-filter:blur(10px);
    }

    nav{
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:22px 0;
    }

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

    .logo img{
      width:58px;
    }

    .logo h1{
      color:white;
      font-size:22px;
      line-height:1.1;
    }

    .logo span{
      color:var(--secondary);
      font-size:13px;
      letter-spacing:1px;
      font-weight:500;
    }

    .nav-links{
      display:flex;
      gap:35px;
      align-items:center;
    }

    .nav-links a{
      color:white;
      font-size:15px;
      font-weight:500;
      transition:var(--transition);
    }

    .nav-links a:hover,
    .nav-links a.active{
      color:var(--secondary);
    }

    .nav-btn{
      padding:12px 22px;
      background:var(--secondary);
      color:var(--primary) !important;
      border-radius:50px;
      font-weight:700 !important;
    }

/* =========================================================
CASE STUDY HERO
========================================================= */

.case-hero{

position:relative;
height:80vh;

overflow:hidden;

display:flex;
align-items:center;

}

.case-hero img{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

object-fit:cover;

}

.case-hero .overlay{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:
linear-gradient(
to right,
rgba(15,15,15,0.85),
rgba(15,15,15,0.45)
);

}

.case-hero-content{

position:relative;

z-index:2;

max-width:800px;

padding:0 7%;

color:#fff;

}

.case-hero-content span{

display:inline-block;

padding:12px 22px;

background:rgba(255,255,255,0.08);

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

border-radius:40px;

font-size:13px;

letter-spacing:1px;

color:#D4AF37;

margin-bottom:25px;

}

.case-hero-content h1{

font-size:72px;

font-weight:800;

line-height:1.1;

margin-bottom:25px;

}

.case-hero-content p{

font-size:20px;

line-height:1.8;

color:#E0E4E7;

max-width:650px;

}

/* =========================================================
PROJECT METRICS
========================================================= */

.project-metrics{

padding:80px 0;

background:#fff;

}

.metrics-grid{

display:grid;

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

gap:30px;

}

.metric{

text-align:center;

padding:35px;

background:#F8F9FA;

border-radius:12px;

transition:.3s;

}

.metric:hover{

transform:translateY(-8px);

}

.metric h3{

font-size:28px;

font-weight:800;

color:#D4AF37;

margin-bottom:10px;

}

.metric p{

color:#666;

font-size:15px;

}

.metric{
    opacity:0;
    transform:translateY(40px);
    transition:all 0.8s ease;
}

.metric.show{
    opacity:1;
    transform:translateY(0);
}


/* =========================================================
CONTENT SECTIONS
========================================================= */

.case-section{

padding:90px 0;


}

.case-section h2{

      font-size:48px;
      margin-top:15px;
      margin-bottom:20px;
      line-height:1.2;

}

.case-section p{

      max-width:760px;
      margin:auto;
      color:var(--text);
      font-size:17px;

}

.case-section ul{

padding-left:25px;

}

.case-section ul li{

      max-width:760px;
      margin:auto;
      color:var(--text);
      font-size:17px;

}

.case-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.case-grid img{

width:100%;

border-radius:14px;

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

}

/* =========================================================
STRATEGY CARDS
========================================================= */

.strategy-grid{

display:grid;

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

gap:30px;

margin-top:50px;

}

.strategy-card{

background:#fff;

padding:35px;

border-radius:12px;

box-shadow:
0 8px 25px rgba(0,0,0,.06);

transition:.35s ease;

}

.strategy-card:hover{

transform:translateY(-10px);

}

.strategy-card h3{

margin-bottom:15px;

font-size:24px;

color:#2F3538;

}

.strategy-card p{

margin:0;

}

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

.gallery-grid{

display:grid;

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

gap:25px;

margin-top:40px;

}

.gallery-grid img{

width:100%;

height:300px;

object-fit:cover;

border-radius:12px;

transition:.4s ease;

cursor:pointer;

}

.gallery-grid img:hover{

transform:scale(1.05);

}

    /* =========================================================
       CTA SECTION
    ========================================================= */

    .cta-section{
      background:var(--primary);
      color:white;
      text-align:center;
      border-radius:30px;
      padding:70px 50px;
    }

    .cta-section h2{
      font-size:48px;
      margin-bottom:20px;
    }

    .cta-section p{
      color:#ccc;
      max-width:700px;
      margin:auto auto 35px;
    }

    .cta-buttons{
      display:flex;
      justify-content:center;
      gap:20px;
      flex-wrap:wrap;
    }

    .primary-btn{
      background:var(--secondary);
      color:var(--primary);
      padding:16px 30px;
      border-radius:50px;
      font-weight:700;
      transition:var(--transition);
    }

    .primary-btn:hover{
      transform:translateY(-4px);
    }

    .secondary-btn{
      border:1px solid rgba(255,255,255,0.2);
      padding:16px 30px;
      border-radius:50px;
      font-weight:600;
      color:white;
      transition:var(--transition);
    }

    .secondary-btn:hover{
      background:white;
      color:var(--primary);
    }


/* =========================================================
LIGHTBOX
========================================================= */

.lightbox{

display:none;

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

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

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

z-index:9999;

}

.lightbox img{

max-width:90%;
max-height:90%;

border-radius:8px;

}

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

    footer{
      background:#1F2426;
      color:white;
      padding:80px 0 30px;
      margin-top:90px;
    }

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

    .footer-logo{
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom:20px;
    }

    .footer-logo img{
      width:52px;
    }

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

    .footer-about p{
      color:#bbb;
      font-size:15px;
    }

    .footer-links h4,
    .footer-contact h4,
    .footer-social h4{
      margin-bottom:22px;
      color:var(--secondary);
    }

    .footer-links a,
    .footer-contact p{
      display:block;
      margin-bottom:12px;
      color:#bbb;
      transition:var(--transition);
    }

    .footer-links a:hover{
      color:var(--secondary);
    }

    .social-icons{
      display:flex;
      gap:15px;
      margin-top:20px;
    }

    .social-icons a{
      width:42px;
      height:42px;
      background:rgba(255,255,255,0.08);
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:50%;
      transition:var(--transition);
    }

    .social-icons a:hover{
      background:var(--secondary);
      color:var(--primary);
    }

    .footer-bottom{
      border-top:1px solid rgba(255,255,255,0.08);
      padding-top:25px;
      text-align:center;
      color:#888;
      font-size:14px;
    }

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

.footer-legal{

text-align:center;
flex-wrap:wrap;

gap:18px;

margin-top:25px;

}

.footer-legal a{

color:#B7BEC3;

font-size:14px;

transition:0.3s;

}

.footer-legal a:hover{

color:#D4AF37;

}

.floating-action-wrapper{

position:fixed;

right:25px;
bottom:25px;

z-index:9999;

display:flex;
flex-direction:column;
align-items:center;

transition:
opacity 0.35s ease,
transform 0.35s ease;

}

/* HIDE ON SCROLL */

.floating-action-wrapper.hide{

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

pointer-events:none;

}

/* MAIN BUTTON */

.main-fab{

width:68px;
height:68px;

border-radius:50%;

border:none;

cursor:pointer;

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

color:#2F3538;

font-size:36px;
font-weight:700;

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

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

transition:0.4s ease;

}

.main-fab:hover{

transform:scale(1.08);

}

/* ICON ROTATION */

.main-fab.active #fabIcon{

transform:rotate(45deg);

display:inline-block;

transition:0.3s ease;

}

/* ACTIONS */

.fab-actions{

display:flex;
flex-direction:column;

gap:14px;

margin-bottom:18px;

opacity:0;
visibility:hidden;

transform:translateY(20px);

transition:0.35s ease;

}

/* SHOW */

.fab-actions.show{

opacity:1;
visibility:visible;

transform:translateY(0);

}

/* SMALL BUTTONS */

.fab-btn{

width:56px;
height:56px;

border-radius:50%;

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

color:#fff;

text-decoration:none;

box-shadow:
0 8px 20px rgba(0,0,0,0.18);

transition:0.3s ease;

}

.fab-btn:hover{

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

}

/* BUTTON COLORS */

.whatsapp-btn{

background:#25D366;

}

.call-btn{

background:#2F3538;

}

.email-btn{

background:#D4AF37;

color:#2F3538;

}

/* MOBILE */

@media(max-width:768px){

.main-fab{

width:60px;
height:60px;

font-size:32px;

}

.fab-btn{

width:50px;
height:50px;

}

}


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

@media(max-width:992px){

.metrics-grid,
.strategy-grid,
.gallery-grid,
.case-grid{

grid-template-columns:1fr;

}

.case-hero-content h1{

font-size:52px;

}

}

@media(max-width:768px){

.case-hero{

height:70vh;

}

.case-hero-content h1{

font-size:40px;

}

.case-hero-content p{

font-size:16px;

}

.case-section{

padding:80px 0;

}

.case-study-cta h2{

font-size:36px;

}

}

    @media(max-width:1100px){

      .footer-grid{
        grid-template-columns:repeat(2,1fr);
      }
    }

    @media(max-width:900px){

      .nav-links{
        display:none;
      }

    }

    @media(max-width:768px){

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

    }

/* =========================================================
MOBILE HAMBURGER MENU
Add to style.css
========================================================= */

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

.mobile-menu{

    display:none;

    font-size:28px;

    color:#FFFFFF;

    cursor:pointer;

    transition:0.3s ease;

}

.mobile-menu:hover{

    color:#D4AF37;

}

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

@media(max-width:900px){

    .mobile-menu{

        display:block;

    }

    .nav-links{

        position:absolute;

        top:100%;
        left:0;

        width:100%;

        background:#2F3538;

        flex-direction:column;

        align-items:flex-start;

        padding:25px;

        gap:20px;

        display:none;

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

        box-shadow:
        0 15px 30px rgba(0,0,0,0.18);

        animation:slideDown 0.35s ease;

    }

    .nav-links.active{

        display:flex;

    }

    .nav-links a{

        width:100%;

        padding:12px 0;

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

    }

    .nav-btn{

        width:100%;

        text-align:center;

        margin-top:10px;

    }

}

/* =========================================================
SLIDE DOWN ANIMATION
========================================================= */

@keyframes slideDown{

    from{

        opacity:0;
        transform:translateY(-10px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}