/* ===== Vidasa Gems Main Styles ===== */
:root{
  --primary-blue:#0a2463;
  --secondary-blue:#1e40af;
  --accent-gold:#d4af37;
  --accent-ruby:#e0115f;
  --light-bg:#f8fafc;
  --dark-text:#1e293b;
  --light-text:#64748b;
  --white:#ffffff;
  --shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);
  --radius:8px;
  --green-primary:#2e7d32;
  --green-dark:#1b5e20;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;}
body{background-color:var(--light-bg);color:var(--dark-text);line-height:1.6;}
.container{width:90%;max-width:1200px;margin:0 auto;padding:0 15px;}
h1,h2,h3,h4{color:var(--primary-blue);margin-bottom:1rem;}
h1{font-size:2.5rem;font-weight:700;}
h2{font-size:2rem;font-weight:600;position:relative;padding-bottom:10px;}
h2:after{content:'';position:absolute;bottom:0;left:0;width:60px;height:3px;background:var(--accent-gold);}
p{margin-bottom:1rem;color:var(--light-text);}
.btn{display:inline-block;padding:12px 28px;background-color:var(--accent-gold);color:var(--primary-blue);border:none;border-radius:var(--radius);font-weight:600;text-decoration:none;cursor:pointer;transition:all .3s ease;text-align:center;}
.btn:hover{background-color:var(--primary-blue);color:var(--white);transform:translateY(-2px);}
.btn-secondary{background-color:var(--primary-blue);color:var(--white);}
.btn-secondary:hover{background-color:var(--secondary-blue);}
.btn-green{background-color:var(--green-primary);color:var(--white);border:none;display:inline-block;padding:12px 28px;border-radius:var(--radius);font-weight:600;text-decoration:none;cursor:pointer;transition:all .3s ease;text-align:center;}
.btn-green:hover{background-color:var(--green-dark);transform:translateY(-2px);}
.section-padding{padding:80px 0;}
.text-center{text-align:center;}
.text-center h2:after{left:50%;transform:translateX(-50%);}

/* ── Overlay (global, top-level) ── */
.nav-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  z-index:1040;
}
.nav-overlay.open{display:block;}

/* ── Header ── */
header{background-color:var(--white);box-shadow:var(--shadow);position:sticky;top:0;z-index:1000;}
.header-container{display:flex;justify-content:space-between;align-items:center;padding:20px 0;}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;}
.logo-icon{color:var(--accent-gold);font-size:2rem;}
.logo-text{font-size:1.8rem;font-weight:700;color:var(--primary-blue);}
.logo-text span{color:var(--accent-ruby);}
.mobile-menu-btn{display:none;background:none;border:none;font-size:1.5rem;color:var(--primary-blue);cursor:pointer;padding:5px;z-index:1100;}

/* ── Nav (desktop: normal flow; mobile: fixed off-canvas) ── */
nav{background:var(--white);}
nav ul{display:flex;list-style:none;gap:30px;}
nav a{text-decoration:none;color:var(--dark-text);font-weight:600;font-size:1rem;transition:color .3s;padding:5px 0;position:relative;}
nav a:hover{color:var(--accent-gold);}
nav a.active{color:var(--accent-gold);}
nav a.active:after{content:'';position:absolute;bottom:-5px;left:0;width:100%;height:2px;background:var(--accent-gold);}

/* ── Hero ── */
.hero{background-size:cover;background-position:center;background-repeat:no-repeat;color:var(--white);padding:120px 0;text-align:center;}
.hero h1{color:var(--white);font-size:3.5rem;margin-bottom:20px;text-shadow:2px 2px 4px rgba(0,0,0,.3);}
.hero p{color:rgba(255,255,255,.95);font-size:1.2rem;max-width:700px;margin:0 auto 40px;text-shadow:1px 1px 3px rgba(0,0,0,.2);}
.hero-btns{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;}
.hero .btn,.hero .btn-green{min-width:180px;}

/* ── Value props ── */
.value-props{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px;margin-top:-50px;position:relative;z-index:10;}
.prop-card{background-color:var(--white);padding:30px;border-radius:var(--radius);box-shadow:var(--shadow);text-align:center;transition:transform .3s ease;}
.prop-card:hover{transform:translateY(-10px);}
.prop-icon{font-size:2.5rem;color:var(--accent-gold);margin-bottom:20px;}
.prop-card h3{margin-bottom:15px;font-size:1.3rem;}

/* ── Categories ── */
.categories{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;margin-top:40px;}
.category-card{background-color:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:all .3s ease;text-align:center;text-decoration:none;color:var(--dark-text);display:flex;flex-direction:column;}
.category-card:hover{transform:translateY(-5px);box-shadow:0 10px 15px -3px rgba(0,0,0,.1);}
.category-image{height:150px;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;position:relative;}
.category-image-overlay{position:absolute;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;color:white;font-size:2.5rem;}
.category-content{padding:20px;flex-grow:1;}
.category-content h3{font-size:1.1rem;margin-bottom:5px;}

/* ── Gem background section ── */
.gem-background-section{
  background:linear-gradient(rgba(10,36,99,.85),rgba(10,36,99,.85)),
  url('https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80');
  background-size:cover;background-position:center;background-attachment:fixed;color:var(--white);padding:80px 0;
}
.gem-background-section h2,.gem-background-section h3,.gem-background-section p{color:var(--white)!important;}
.gem-background-section h2:after{background-color:var(--accent-gold);}
.why-choose-icon{font-size:2.5rem;color:var(--accent-gold);margin-bottom:20px;}

/* ── Steps ── */
.steps{display:flex;justify-content:space-between;margin-top:50px;flex-wrap:wrap;gap:20px;}
.step{flex:1;min-width:250px;text-align:center;padding:20px;}
.step-number{width:50px;height:50px;background-color:var(--accent-gold);color:var(--primary-blue);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;margin:0 auto 20px;}

/* ── Trusted section ── */
.trusted-section{background:linear-gradient(135deg,#3a1c71 0%,#d76d77 50%,#ffaf7b 100%);color:var(--white);padding:80px 0;}
.trusted-section h2{color:var(--white);}
.trusted-section h2:after{background-color:var(--accent-gold);}
.trusted-section p{color:rgba(255,255,255,.9);}
.trusted-logos{display:flex;justify-content:center;flex-wrap:wrap;gap:40px;margin-top:40px;}
.trusted-item{text-align:center;}
.trusted-icon{font-size:2.5rem;margin-bottom:10px;}

/* ══════════════════════════
   TABLET
══════════════════════════ */
@media (max-width:992px){
  h1{font-size:2.5rem;}
  .hero h1{font-size:2.8rem;}
}

/* ══════════════════════════
   MOBILE ≤ 768px
══════════════════════════ */
@media (max-width:768px){

  /* Show hamburger */
  .mobile-menu-btn{display:block;}

  /* Nav: fixed panel slides in from RIGHT */
  nav{
    position:fixed;
    top:0;
    right:0;
    width:260px;
    height:100vh;
    background:var(--white);
    box-shadow:-6px 0 24px rgba(0,0,0,.25);
    transform:translateX(100%);
    transition:transform .3s ease;
    z-index:1050;
    padding:80px 28px 30px;
    overflow-y:auto;
  }
  nav.open{transform:translateX(0);}
  nav ul{flex-direction:column;gap:20px;}
  nav a{font-size:1.1rem;display:block;padding:6px 0;}

  /* Hero buttons row */
  .hero-btns{gap:10px;}
  .hero .btn,.hero .btn-secondary,.hero .btn-green{
    min-width:0;flex:1;max-width:140px;
    padding:10px 10px;font-size:.85rem;
  }

  /* Value props 2-col */
  .value-props{
    grid-template-columns:repeat(2,1fr)!important;
    gap:12px;
    margin-top:-30px;
  }
  .prop-card{padding:18px 10px;}
  .prop-icon{font-size:2rem;margin-bottom:10px;}
  .prop-card h3{font-size:.95rem;margin-bottom:0;}
  .prop-card p{display:none!important;}

  /* Steps 2-col */
  .steps{
    display:grid!important;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin-top:24px;
  }
  .step{min-width:unset;padding:14px 8px;}
  .step h3{font-size:.9rem;margin-bottom:0;}
  .step p{display:none!important;}
  .why-choose-icon{font-size:2rem;margin-bottom:10px;}
  .step-number{width:38px;height:38px;font-size:1.1rem;margin-bottom:10px;}
  .steps>.step:last-child:nth-child(odd){grid-column:1/-1;max-width:180px;margin:0 auto;}

  /* Trusted row */
  .trusted-logos{gap:16px;margin-top:20px;}
  .trusted-item{flex:0 0 calc(33.33% - 12px);}
  .trusted-icon{font-size:1.8rem;}
  .trusted-item p{display:none!important;}

  /* Categories 2-col on mobile */
  .categories{grid-template-columns:repeat(2,1fr);gap:12px;}
  .category-image{height:110px;}
  .category-content{padding:12px 8px;}
  .category-content h3{font-size:.9rem;margin-bottom:0;}
  .category-content p{display:none!important;}

  /* Section padding tighter */
  .section-padding{padding:50px 0;}
  .hero{padding:70px 0;}
  .hero h1{font-size:2rem;}
  .hero p{font-size:1rem;}
}