/* =====================================================================
   SONAK COMPANY LIMITED - MASTER STYLESHEET

   DESIGN SYSTEM

   Light Mode = Warm White + White + Navy + SONAK Gold
   Dark Mode  = Navy + Charcoal + Gold

   FILE MAP

   1.  Fonts + CSS Variables
   2.  Base / Reset
   3.  Typography
   4.  Layout helpers / Section spacing
   5.  Navbar
   6.  Hero + Carousel
   7.  Grid Pulse
   8.  Buttons
   9.  Cards
   10. Stats / Counters
   11. Trusted brands strip
   12. Timeline
   13. Filters
   14. Forms
   15. Footer
   16. Scroll-reveal animation classes
   17. Responsive
   ===================================================================== */


/* =====================================================================
   1. CSS VARIABLES
===================================================================== */

:root{

  /* ---------------------------------------------------------------
     SONAK BRAND COLORS
  --------------------------------------------------------------- */

  --primary-color: #C89432;
  --primary-color-strong: #A97620;
  --secondary-color: #182333;
  --accent-color: #E4B65A;
  --pulse-color: #D9A441;


  /* ---------------------------------------------------------------
     TEXT COLORS
  --------------------------------------------------------------- */

  --text-color: #182333;
  --text-muted: #687383;


  /* ---------------------------------------------------------------
     BACKGROUNDS
  --------------------------------------------------------------- */

  --bg-color: #FAFAF7;
  --card-bg: #FFFFFF;


  /* ---------------------------------------------------------------
     BORDERS
  --------------------------------------------------------------- */

  --border-color: #E4E7EB;


  /* ---------------------------------------------------------------
     NAVBAR
  --------------------------------------------------------------- */

  --nv-bg: rgba(255,255,255,0.94);


  /* ---------------------------------------------------------------
     HERO OVERLAYS
  --------------------------------------------------------------- */

  --overlay-strong: rgba(24,35,51,0.48);
  --overlay-soft: rgba(24,35,51,0.16);


/* ---------------------------------------------------------------
   TYPOGRAPHY
--------------------------------------------------------------- */

--font-display: 'Open Sans', sans-serif;
--font-body: 'Open Sans', sans-serif;
--font-mono: 'Open Sans', sans-serif;



  /* ---------------------------------------------------------------
     SHADOWS
  --------------------------------------------------------------- */

  --shadow-sm:
    0 4px 12px rgba(24,35,51,0.07);

  --shadow-md:
    0 12px 30px rgba(24,35,51,0.10);

  --shadow-lg:
    0 25px 70px rgba(24,35,51,0.14);


  /* ---------------------------------------------------------------
     RADIUS
  --------------------------------------------------------------- */

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;


  /* ---------------------------------------------------------------
     TRANSITIONS
  --------------------------------------------------------------- */

  --transition-fast: .2s ease;
  --transition-med: .4s cubic-bezier(.22,.61,.36,1);


  /* ---------------------------------------------------------------
     GOLD GRADIENT
  --------------------------------------------------------------- */

  --gold-gradient:
    linear-gradient(
      135deg,
      #B98224 0%,
      #C89432 45%,
      #E4B65A 100%
    );

}


/* =====================================================================
   DARK MODE
===================================================================== */

[data-theme="dark"]{

  /* Brand */

  --primary-color: #D6A13D;
  --primary-color-strong: #E4B65A;
  --secondary-color: #182333;
  --accent-color: #F2C56B;
  --pulse-color: #E8B24A;


  /* Text */

  --text-color: #F4F6F8;
  --text-muted: #AAB3BF;


  /* Backgrounds */

  --bg-color: #101823;
  --card-bg: #1B2635;


  /* Borders */

  --border-color: #344254;


  /* Navbar */

  --nv-bg: rgba(16,24,35,0.94);


  /* Overlays */

  --overlay-strong: rgba(8,14,22,0.58);
  --overlay-soft: rgba(8,14,22,0.24);


  /* Shadows */

  --shadow-sm:
    0 4px 14px rgba(0,0,0,0.22);

  --shadow-md:
    0 12px 32px rgba(0,0,0,0.32);

  --shadow-lg:
    0 25px 70px rgba(0,0,0,0.42);

}


/* =====================================================================
   2. BASE / RESET
===================================================================== */

*{
  box-sizing:border-box;
}


html{
  scroll-behavior:smooth;
}


body{
  font-family:var(--font-body);
  background-color:var(--bg-color);
  color:var(--text-color);

  transition:
    background-color var(--transition-med),
    color var(--transition-med);

  overflow-x:hidden;
}


img{
  max-width:100%;
  height:auto;
}


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


button,
input,
textarea,
select{
  font-family:inherit;
}


::selection{
  background:var(--primary-color);
  color:#fff;
}


/* Reduced Motion */

@media (prefers-reduced-motion: reduce){

  *,
  *::before,
  *::after{

    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;

  }

}


/* Keyboard Focus */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{

  outline:2px solid var(--pulse-color);
  outline-offset:3px;

}


/* Page Load */

body.pre-load{
  opacity:0;
}


body.loaded{

  opacity:1;

  transition:
    opacity .5s ease;

}


/* =====================================================================
   3. TYPOGRAPHY
===================================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.font-display{

  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--text-color);

}


.kicker{

  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--primary-color);

  display:inline-flex;
  align-items:center;
  gap:.6rem;

  margin-bottom:1rem;

}


.kicker::before{

  content:"";
  width:28px;
  height:1px;

  background:var(--primary-color);

  display:inline-block;

}


.section-heading{

  font-size:
    clamp(1.9rem,3.2vw,2.75rem);

  margin-bottom:1rem;

}


.text-muted-custom{
  color:var(--text-muted) !important;
}


.font-mono{
  font-family:var(--font-mono);
}


.eyebrow-divider{

  width:60px;
  height:3px;

  background:var(--accent-color);

  margin-bottom:1.25rem;

  border-radius:2px;

}


/* =====================================================================
   4. LAYOUT / SECTION SPACING
===================================================================== */

.section{
  padding:5.5rem 0;
}


.section-sm{
  padding:3.25rem 0;
}


.bg-surface{
  background:var(--card-bg);
}


.bg-deep{

  background:var(--secondary-color);
  color:#F4F6F8;

}


.bg-deep .text-muted-custom{
  color:#B4BFCC !important;
}


.container-narrow{
  max-width:760px;
}


/* Alternating soft section */

.section-soft{
  background:#F3F4F1;
}


[data-theme="dark"] .section-soft{
  background:#141E2B;
}


/* Gold accent section */

.section-gold{

  background:
    linear-gradient(
      135deg,
      rgba(200,148,50,.08),
      rgba(228,182,90,.03)
    );

}


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

.site-navbar{

  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;

  padding:1.35rem 0;

  background:var(--nv-bg);

  backdrop-filter:
    blur(14px)
    saturate(140%);

  -webkit-backdrop-filter:
    blur(14px)
    saturate(140%);

  border-bottom:
    1px solid transparent;

  transition:
    padding var(--transition-med),
    background var(--transition-med),
    border-color var(--transition-med),
    box-shadow var(--transition-med);

}


.site-navbar.scrolled{

  padding:.65rem 0;

  border-bottom-color:var(--border-color);

  box-shadow:var(--shadow-sm);

}


/* Brand */

.brand{

  font-family:var(--font-display);
  font-weight:700;
  font-size:1.2rem;

  display:flex;
  align-items:center;

  color:var(--text-color) !important;

  text-decoration:none;
  flex-shrink:0;

}


/* Logo */

.brand .site-logo{

  display:block;

  width:auto;
  height:48px;
  max-width:220px;

  object-fit:contain;
  object-position:left center;

  transition:
    height var(--transition-med),
    width var(--transition-med);

}


.site-navbar.scrolled .brand .site-logo{
  height:40px;
}


/* Navigation */

.nav-link-custom{

  font-size:.92rem;
  font-weight:500;

  margin:0 .1rem;

  padding:.5rem .95rem !important;

  color:var(--text-color) !important;

  position:relative;

  border-radius:var(--radius-sm);

  transition:
    color var(--transition-fast),
    background var(--transition-fast);

}


.nav-link-custom::after{

  content:"";

  position:absolute;

  left:.95rem;
  right:.95rem;
  bottom:.3rem;

  height:2px;

  background:var(--primary-color);

  transform:scaleX(0);

  transform-origin:left;

  transition:
    transform var(--transition-fast);

}


.nav-link-custom:hover::after,
.nav-link-custom.active::after{

  transform:scaleX(1);

}


.nav-link-custom:hover{
  color:var(--primary-color) !important;
}


.nav-link-custom.active{
  color:var(--primary-color) !important;
}


/* Theme Toggle */

.theme-toggle-btn{

  width:40px;
  height:40px;

  border-radius:50%;

  border:1px solid var(--border-color);

  background:var(--card-bg);

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

  cursor:pointer;

  transition:all var(--transition-fast);

  color:var(--text-color);

}


.theme-toggle-btn:hover{

  border-color:var(--primary-color);

  color:var(--primary-color);

  transform:rotate(20deg);

}


.theme-toggle-btn .bi-moon-stars-fill{
  display:none;
}


[data-theme="dark"]
.theme-toggle-btn
.bi-sun-fill{

  display:none;

}


[data-theme="dark"]
.theme-toggle-btn
.bi-moon-stars-fill{

  display:inline-block;

}

/* ---------------------------------------------------------
   Navbar Team dropdown — matches existing gold/navy navbar
   styling, uses existing tokens only.
   --------------------------------------------------------- */
.dropdown-menu-custom {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 0.6rem;
  padding: 0.5rem;
  min-width: 240px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.dropdown-item-custom {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.4rem;
  color: var(--text-color);
}

.dropdown-item-custom:hover,
.dropdown-item-custom:focus-visible {
  background-color: var(--bg-color);
  color: var(--primary-color);
}

.dropdown-item-title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
}

.dropdown-item-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
}




/* Mobile Toggle */

.navbar-toggler-custom{

  border:1px solid var(--border-color);

  border-radius:var(--radius-sm);

  padding:.4rem .6rem;

  background:var(--card-bg);

  color:var(--text-color);

}


.navbar-toggler-custom:hover{

  border-color:var(--primary-color);

  color:var(--primary-color);

}


.navbar-toggler-custom:focus{
  box-shadow:none;
}


/* =====================================================================
   6. HERO + CAROUSEL
===================================================================== */

.hero-carousel{

  height:92vh;
  min-height:560px;
  max-height:920px;

}


.hero-carousel .carousel-inner,
.hero-carousel .carousel-item{
  height:100%;
}


.hero-slide{

  height:100%;

  position:relative;

  display:flex;

  align-items:center;

  background-size:cover;

  background-position:center;

}


.hero-slide-media{

  position:absolute;

  inset:0;

  background-size:cover;

  background-position:center;

  animation:
    kenburns 12s ease-in-out infinite alternate;

}


@keyframes kenburns{

  0%{

    transform:
      scale(1)
      translate(0,0);

  }

  100%{

    transform:
      scale(1.12)
      translate(-1%,-1%);

  }

}


/* Hero Overlay */

.hero-overlay{

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      90deg,
      var(--overlay-strong)
      0%,
      rgba(24,35,51,.22)
      48%,
      rgba(24,35,51,.05)
      100%
    );

}


/* Hero Content */

.hero-content{

  position:relative;

  z-index:2;

  color:#fff;

  padding-top:4rem;

}


.hero-content .kicker{
  color:var(--accent-color);
}


.hero-content .kicker::before{
  background:var(--accent-color);
}


.hero-headline{

  font-size:
    clamp(2.3rem,5.2vw,4.2rem);

  line-height:1.06;

  color:#fff;

  margin-bottom:1.1rem;

}


.hero-desc{

  font-size:1.08rem;

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

  max-width:560px;

  margin-bottom:2rem;

}


.hero-cta-group{

  display:flex;

  gap:1rem;

  flex-wrap:wrap;

}


/* Hero Text Animation */

.carousel-item
.hero-content
.kicker,

.carousel-item
.hero-content
.hero-headline,

.carousel-item
.hero-content
.hero-desc,

.carousel-item
.hero-content
.hero-cta-group{

  opacity:0;

  transform:translateY(24px);

}


.carousel-item.active
.hero-content
.kicker{

  animation:
    heroUp .7s .15s ease forwards;

}


.carousel-item.active
.hero-content
.hero-headline{

  animation:
    heroUp .7s .3s ease forwards;

}


.carousel-item.active
.hero-content
.hero-desc{

  animation:
    heroUp .7s .45s ease forwards;

}


.carousel-item.active
.hero-content
.hero-cta-group{

  animation:
    heroUp .7s .6s ease forwards;

}


@keyframes heroUp{

  to{

    opacity:1;

    transform:translateY(0);

  }

}


/* Hero Controls */

.hero-carousel
.carousel-control-prev,

.hero-carousel
.carousel-control-next{

  width:5%;

  opacity:0;

  transition:
    opacity var(--transition-fast);

}


.hero-carousel:hover
.carousel-control-prev,

.hero-carousel:hover
.carousel-control-next{

  opacity:.85;

}


.hero-carousel
.carousel-control-prev-icon,

.hero-carousel
.carousel-control-next-icon{

  width:2.4rem;

  height:2.4rem;

  background-size:1.1rem;

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

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

  border-radius:50%;

  backdrop-filter:blur(6px);

}


/* Indicators */

.hero-carousel
.carousel-indicators{

  margin-bottom:2rem;

}


.hero-carousel
.carousel-indicators
[data-bs-target]{

  width:34px;

  height:3px;

  border-radius:2px;

  background-color:
    rgba(255,255,255,.4);

  opacity:1;

  border:0;

}


.hero-carousel
.carousel-indicators
.active{

  background-color:
    var(--accent-color);

}


/* Scroll Cue */

.hero-scroll-cue{

  position:absolute;

  bottom:1.6rem;

  left:50%;

  transform:translateX(-50%);

  z-index:2;

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

  font-size:.72rem;

  font-family:var(--font-mono);

  letter-spacing:.18em;

  text-transform:uppercase;

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:.5rem;

}


.hero-scroll-cue .line{

  width:1px;

  height:34px;

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

  overflow:hidden;

  position:relative;

}


.hero-scroll-cue
.line::after{

  content:"";

  position:absolute;

  top:-100%;

  left:0;

  width:100%;

  height:100%;

  background:
    var(--accent-color);

  animation:
    scrollLine 1.8s ease-in-out infinite;

}


@keyframes scrollLine{

  50%{
    top:100%;
  }

  100%{
    top:100%;
  }

}


/* Inner Hero */

.hero-carousel.hero-inner{

  height:78vh;

  min-height:480px;

}


/* =====================================================================
   7. GRID PULSE
===================================================================== */

.grid-pulse{

  width:100%;

  height:46px;

  overflow:hidden;

  position:relative;

  background:var(--bg-color);

}


.grid-pulse svg{

  width:100%;

  height:100%;

  display:block;

}


.grid-pulse
.pulse-line{

  fill:none;

  stroke:var(--border-color);

  stroke-width:1.5;

}


.grid-pulse
.pulse-flow{

  fill:none;

  stroke:var(--pulse-color);

  stroke-width:2;

  stroke-dasharray:
    60 900;

  stroke-linecap:round;

  animation:
    pulseFlow 5.5s linear infinite;

  filter:
    drop-shadow(
      0 0 4px
      rgba(217,164,65,.45)
    );

}


@keyframes pulseFlow{

  0%{
    stroke-dashoffset:960;
  }

  100%{
    stroke-dashoffset:0;
  }

}


.grid-pulse
.pulse-node{

  fill:var(--pulse-color);

  opacity:.85;

}


.hero-content
.grid-pulse-mini{

  width:120px;

  height:2px;

  position:relative;

  overflow:visible;

  margin:1.75rem 0 0;

}


/* =====================================================================
   8. BUTTONS
===================================================================== */


/* Primary Gold Button */

.btn-energy{

  position:relative;

  overflow:hidden;

  font-family:var(--font-body);

  font-weight:600;

  font-size:.92rem;

  padding:.85rem 1.75rem;

  border-radius:var(--radius-sm);

  border:
    1px solid
    var(--primary-color);

  background:
    var(--primary-color);

  color:#fff;

  display:inline-flex;

  align-items:center;

  gap:.55rem;

  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast);

}


.btn-energy:hover{

  background:
    var(--primary-color-strong);

  color:#fff;

  transform:translateY(-2px);

  box-shadow:
    var(--shadow-md);

}


.btn-energy i,

.btn-energy .bi{

  transition:
    transform var(--transition-fast);

}


.btn-energy:hover i,

.btn-energy:hover .bi{

  transform:translateX(4px);

}


/* Outline Button */

.btn-energy-outline{

  position:relative;

  overflow:hidden;

  font-weight:600;

  font-size:.92rem;

  padding:.82rem 1.7rem;

  border-radius:var(--radius-sm);

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

  background:transparent;

  color:#fff;

  display:inline-flex;

  align-items:center;

  gap:.55rem;

  transition:all var(--transition-fast);

}


.btn-energy-outline:hover{

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

  color:#fff;

  border-color:#fff;

  transform:translateY(-2px);

}


/* Dark Button */

.btn-energy-dark{

  border:
    1px solid
    var(--secondary-color);

  background:
    var(--secondary-color);

  color:#fff;

  font-weight:600;

  font-size:.92rem;

  padding:.85rem 1.75rem;

  border-radius:var(--radius-sm);

  display:inline-flex;

  align-items:center;

  gap:.55rem;

  transition:all var(--transition-fast);

}


.btn-energy-dark:hover{

  background:#24344A;

  color:#fff;

  transform:translateY(-2px);

  box-shadow:
    var(--shadow-md);

}


/* Arrow Link */

.btn-link-arrow{

  font-weight:600;

  font-size:.9rem;

  color:var(--primary-color);

  display:inline-flex;

  align-items:center;

  gap:.4rem;

  border-bottom:
    1px solid transparent;

}


.btn-link-arrow:hover{

  color:
    var(--primary-color-strong);

  border-color:
    currentColor;

}


.btn-link-arrow i{

  transition:
    transform var(--transition-fast);

}


.btn-link-arrow:hover i{

  transform:
    translateX(5px);

}


/* Ripple */

.ripple-container{

  position:relative;

  overflow:hidden;

}


span.ripple-el{

  position:absolute;

  border-radius:50%;

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

  transform:scale(0);

  animation:
    rippleAnim .6s ease-out;

  pointer-events:none;

}


[data-theme="dark"]

span.ripple-el{

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

}


@keyframes rippleAnim{

  to{

    transform:scale(2.6);

    opacity:0;

  }

}


/* =====================================================================
   9. CARDS
===================================================================== */

.card-energy{

  background:
    var(--card-bg);

  border:
    1px solid
    var(--border-color);

  border-radius:
    var(--radius-md);

  overflow:hidden;

  transition:
    transform var(--transition-med),
    box-shadow var(--transition-med),
    border-color var(--transition-med);

  height:100%;

}


.card-energy:hover{

  transform:
    translateY(-8px);

  box-shadow:
    var(--shadow-lg);

  border-color:
    var(--primary-color);

}


.card-media{

  position:relative;

  overflow:hidden;

  aspect-ratio:4/3;

}


.card-media img{

  width:100%;

  height:100%;

  object-fit:cover;

  transition:
    transform .6s ease;

}


.card-energy:hover
.card-media img{

  transform:
    scale(1.08);

}


.card-category{

  position:absolute;

  top:.9rem;

  left:.9rem;

  background:
    rgba(24,35,51,.86);

  color:#fff;

  font-family:var(--font-mono);

  font-size:.68rem;

  letter-spacing:.08em;

  text-transform:uppercase;

  padding:.32rem .7rem;

  border-radius:20px;

  backdrop-filter:blur(8px);

}


.card-icon-badge{

  width:52px;

  height:52px;

  border-radius:12px;

  background:
    color-mix(
      in srgb,
      var(--primary-color) 12%,
      transparent
    );

  color:
    var(--primary-color);

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:1.4rem;

  margin-bottom:1.1rem;

}


.card-body-energy{

  padding:1.6rem;

}


.card-title-energy{

  font-size:1.15rem;

  margin-bottom:.6rem;

}


.card-text-energy{

  color:
    var(--text-muted);

  font-size:.94rem;

  margin-bottom:1.1rem;

}


/* Value Cards */

.value-card{

  padding:2rem 1.6rem;

  border:
    1px solid
    var(--border-color);

  border-radius:
    var(--radius-md);

  background:
    var(--card-bg);

  height:100%;

  transition:
    all var(--transition-med);

}


.value-card:hover{

  border-color:
    var(--primary-color);

  transform:
    translateY(-6px);

  box-shadow:
    var(--shadow-md);

}


/* Mission / Vision */

.mv-card{

  border-radius:
    var(--radius-lg);

  padding:2.6rem;

  background:
    var(--secondary-color);

  color:#fff;

  height:100%;

  position:relative;

  overflow:hidden;

}


.mv-card::after{

  content:"";

  position:absolute;

  right:-40px;

  bottom:-40px;

  width:180px;

  height:180px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(228,182,90,.28),
      transparent 70%
    );

}


.mv-icon{

  width:58px;

  height:58px;

  border-radius:14px;

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

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

  display:flex;

  align-items:center;

  justify-content:center;

  color:
    var(--accent-color);

  font-size:1.5rem;

  margin-bottom:1.4rem;

}


/* Job Cards */

.job-card{

  border:
    1px solid
    var(--border-color);

  border-radius:
    var(--radius-md);

  padding:1.75rem;

  background:
    var(--card-bg);

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:1.5rem;

  flex-wrap:wrap;

  transition:
    all var(--transition-fast);

}


.job-card:hover{

  border-color:
    var(--primary-color);

  box-shadow:
    var(--shadow-sm);

}


.job-meta{

  display:flex;

  gap:1rem;

  flex-wrap:wrap;

  font-size:.84rem;

  color:
    var(--text-muted);

  margin-top:.5rem;

}


.job-meta span{

  display:inline-flex;

  align-items:center;

  gap:.35rem;

}


/* Why Join Cards */

.why-card{

  text-align:center;

  padding:2.2rem 1.4rem;

}


.why-card
.card-icon-badge{

  margin-left:auto;

  margin-right:auto;

}


/* News */

.news-date-badge{

  font-family:var(--font-mono);

  font-size:.72rem;

  letter-spacing:.06em;

  color:
    var(--text-muted);

  text-transform:uppercase;

}


/* =====================================================================
   10. STATS / COUNTERS
===================================================================== */

.stats-strip{

  background:
    var(--secondary-color);

  color:#fff;

  padding:3.5rem 0;

  position:relative;

}


.stat-item{

  text-align:center;

  padding:0 1rem;

}


.stat-number{

  font-family:var(--font-display);

  font-weight:700;

  font-size:
    clamp(2.1rem,4vw,3rem);

  color:
    var(--accent-color);

  display:flex;

  align-items:baseline;

  justify-content:center;

  gap:.15rem;

}


.stat-label{

  font-family:var(--font-mono);

  font-size:.76rem;

  letter-spacing:.1em;

  text-transform:uppercase;

  color:#B4BFCC;

  margin-top:.5rem;

}


/* =====================================================================
   11. TRUSTED BRANDS
===================================================================== */

.brand-logo-item{

  filter:
    grayscale(1)
    opacity(.55);

  transition:
    all var(--transition-fast);

  font-family:
    var(--font-display);

  font-weight:700;

  font-size:1.15rem;

  color:
    var(--text-muted);

  text-align:center;

  padding:1rem;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:.5rem;

}


.brand-logo-item:hover{

  filter:
    grayscale(0)
    opacity(1);

  color:
    var(--primary-color);

  transform:
    translateY(-3px);

}


/* Trusted Brand Logos */

.brand-logo-item{

  display:flex;

  align-items:center;

  justify-content:center;

  text-align:center;

  width:100%;

  margin:0 auto;

}


.brand-logo-item img{

  display:block;

  margin:0 auto;

  object-fit:contain;

  object-position:center;

}


/* =====================================================================
   12. TIMELINE
===================================================================== */

.timeline{

  position:relative;

  padding-left:2.5rem;

}


.timeline::before{

  content:"";

  position:absolute;

  left:6px;

  top:6px;

  bottom:6px;

  width:2px;

  background:
    linear-gradient(
      var(--primary-color),
      var(--pulse-color)
    );

}


.timeline-item{

  position:relative;

  padding-bottom:2.6rem;

}


.timeline-item:last-child{

  padding-bottom:0;

}


.timeline-item::before{

  content:"";

  position:absolute;

  left:-2.5rem;

  top:4px;

  width:14px;

  height:14px;

  border-radius:50%;

  background:
    var(--bg-color);

  border:
    3px solid

    var(--primary-color);

}


.timeline-year{

  font-family:
    var(--font-mono);

  color:
    var(--primary-color);

  font-weight:600;

  letter-spacing:.05em;

}


/* =====================================================================
   13. FILTERS
===================================================================== */

.filter-bar{

  display:flex;

  flex-wrap:wrap;

  gap:.6rem;

  margin-bottom:2.75rem;

}


.filter-btn{

  font-family:
    var(--font-mono);

  font-size:.78rem;

  letter-spacing:.05em;

  text-transform:uppercase;

  padding:.55rem 1.1rem;

  border-radius:30px;

  border:
    1px solid
    var(--border-color);

  background:
    var(--card-bg);

  color:
    var(--text-muted);

  cursor:pointer;

  transition:
    all var(--transition-fast);

}


.filter-btn:hover{

  border-color:
    var(--primary-color);

  color:
    var(--primary-color);

}


.filter-btn.active{

  background:
    var(--primary-color);

  border-color:
    var(--primary-color);

  color:#fff;

}


.filter-item{

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

}


.filter-item.hide{
  display:none;
}


/* =====================================================================
   14. FORMS
===================================================================== */

.form-control-energy{

  background:
    var(--card-bg);

  border:
    1px solid
    var(--border-color);

  color:
    var(--text-color);

  border-radius:
    var(--radius-sm);

  padding:.85rem 1rem;

  font-size:.94rem;

  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);

}


.form-control-energy:focus{

  border-color:
    var(--primary-color);

  outline:none;

  box-shadow:
    0 0 0 4px
    rgba(200,148,50,.14);

  background:
    var(--card-bg);

  color:
    var(--text-color);

}


.form-control-energy::placeholder{

  color:
    var(--text-muted);

  opacity:.75;

}


.form-label-energy{

  font-family:
    var(--font-mono);

  font-size:.74rem;

  letter-spacing:.06em;

  text-transform:uppercase;

  color:
    var(--text-muted);

  margin-bottom:.45rem;

  display:block;

}


.invalid-feedback-energy{

  color:#E5484D;

  font-size:.8rem;

  margin-top:.35rem;

  display:none;

}


.was-validated-energy
.invalid-feedback-energy.show{

  display:block;

}


.form-control-energy.is-invalid{

  border-color:#E5484D;

}


.form-success-box{

  border:
    1px solid
    var(--primary-color);

  background:
    color-mix(
      in srgb,
      var(--primary-color) 10%,
      transparent
    );

  border-radius:
    var(--radius-md);

  padding:1.2rem 1.4rem;

  display:none;

  align-items:center;

  gap:.75rem;

}


.form-success-box.show{
  display:flex;
}


/* Contact */

.contact-info-card{

  background:
    var(--secondary-color);

  color:#fff;

  border-radius:
    var(--radius-lg);

  padding:2.6rem;

}


.contact-info-row{

  display:flex;

  gap:1rem;

  padding:1.35rem 0;

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

}


.contact-info-row:last-of-type{

  border-bottom:0;

}


.contact-info-icon{

  width:44px;

  height:44px;

  border-radius:10px;

  flex-shrink:0;

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

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

  display:flex;

  align-items:center;

  justify-content:center;

  color:
    var(--accent-color);

}


/* Social Icons */

.social-icon-link{

  width:42px;

  height:42px;

  border-radius:50%;

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

  display:flex;

  align-items:center;

  justify-content:center;

  color:#fff;

  transition:
    all var(--transition-fast);

  position:relative;

}


.social-icon-link:hover{
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #dadadc;      /* au rangi nyeusi/giza thabiti badala ya --secondary-color */
  transform: translateY(-3px);
}




/* =====================================================================
   15. FOOTER
===================================================================== */

.site-footer{

  background:
    var(--secondary-color);

  color:#D5DCE4;

  padding:4.5rem 0 0;

}


.site-footer h6{

  font-family:
    var(--font-mono);

  font-size:.76rem;

  letter-spacing:.1em;

  text-transform:uppercase;

  color:#fff;

  margin-bottom:1.4rem;

}


.site-footer a{

  color:#AEB8C5;

  transition:
    color var(--transition-fast),
    padding-left var(--transition-fast);

}


.site-footer a:hover{

  color:
    var(--accent-color);

  padding-left:3px;

}


.footer-bottom{

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

  margin-top:3rem;

  padding:1.5rem 0;

  font-size:.85rem;

  color:#8F9BA9;

}


/* =====================================================================
   16. SCROLL REVEAL
===================================================================== */

.reveal{

  opacity:0;

  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.22,.61,.36,1);

}


.reveal-up{

  transform:
    translateY(36px);

}


.reveal-left{

  transform:
    translateX(-36px);

}


.reveal-right{

  transform:
    translateX(36px);

}


.reveal-scale{

  transform:
    scale(.94);

}


.reveal.in-view{

  opacity:1;

  transform:
    translate(0,0)
    scale(1);

}


/* Additional Reveal Effects */

.reveal-blur{

  opacity:0;

  filter:blur(12px);

  transform:
    translateY(20px);

  transition:
    opacity .8s ease,
    filter .8s ease,
    transform .8s ease;

}


.reveal-blur.in-view{

  opacity:1;

  filter:blur(0);

  transform:
    translateY(0);

}


.reveal-zoom{

  opacity:0;

  transform:
    scale(1.08);

  transition:
    opacity .9s ease,
    transform 1s cubic-bezier(.22,.61,.36,1);

}


.reveal-zoom.in-view{

  opacity:1;

  transform:
    scale(1);

}


/* Mask Reveal */

.reveal-mask{

  clip-path:
    inset(0 100% 0 0);

  transition:
    clip-path 1s cubic-bezier(.77,0,.18,1);

}


.reveal-mask.in-view{

  clip-path:
    inset(0 0 0 0);

}


/* =====================================================================
   17. UTILITY / BRAND EFFECTS
===================================================================== */


/* Gold text */

.text-gold{

  color:
    var(--primary-color) !important;

}


/* Gold gradient text */

.text-gold-gradient{

  background:
    var(--gold-gradient);

  -webkit-background-clip:text;

  background-clip:text;

  -webkit-text-fill-color:transparent;

  color:transparent;

}


/* Gold line */

.gold-line{

  width:60px;

  height:3px;

  background:
    var(--gold-gradient);

  border-radius:20px;

}


/* Gold glow */

.gold-glow{

  box-shadow:
    0 0 30px
    rgba(200,148,50,.22);

}


/* Soft card */

.soft-card{

  background:
    var(--card-bg);

  border:
    1px solid
    var(--border-color);

  border-radius:
    var(--radius-md);

  box-shadow:
    var(--shadow-sm);

}


/* Glass card */

.glass-card{

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

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

  backdrop-filter:
    blur(14px);

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

  box-shadow:
    var(--shadow-md);

}


[data-theme="dark"]
.glass-card{

  background:
    rgba(27,38,53,.72);

  border-color:
    rgba(255,255,255,.08);

}


/* Image overlay */

.image-overlay{

  position:relative;

}


.image-overlay::after{

  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      180deg,
      transparent 35%,
      rgba(24,35,51,.55) 100%
    );

  pointer-events:none;

}



/* =========================================================
   TRANSPARENT NAVIGATION BAR
   ========================================================= */

.site-navbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;

  padding:1.15rem 0;

  /* Transparent glass effect */
  background:rgba(255,255,255,0.04);

  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);

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

  transition:
    padding var(--transition-med),
    background var(--transition-med),
    border-color var(--transition-med),
    box-shadow var(--transition-med);
}

/* Navbar for scroll */
.site-navbar.scrolled{
  padding:.65rem 0;

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

  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);

  border-bottom:1px solid rgba(0,0,0,0.08);

  box-shadow:0 8px 30px rgba(0,0,0,0.08);
}

/* Dark mode */
[data-theme="dark"] .site-navbar{
  background:rgba(15,18,22,0.12);

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

  box-shadow:none;
}

[data-theme="dark"] .site-navbar.scrolled{
  background:rgba(15,18,22,0.72);

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

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

/* Light mode */
[data-theme="light"] .site-navbar{
  background:rgba(255,255,255,0.10);

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

[data-theme="light"] .site-navbar.scrolled{
  background:rgba(255,255,255,0.78);

  border-bottom:1px solid rgba(20,25,30,0.08);

  box-shadow:0 8px 30px rgba(20,25,30,0.08);
}


     


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

@media (max-width:991.98px){

  .brand .site-logo{

    height:42px;

    max-width:190px;

  }
  

  .site-navbar{
  background:transparent !important;
  border-bottom:1px solid transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}



 .site-navbar.scrolled{
  background:rgba(255,255,255,0.78) !important;
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid rgba(0,0,0,0.08);
  box-shadow:0 8px 30px rgba(0,0,0,0.08);
}

[data-theme="dark"] .site-navbar.scrolled{
  background:rgba(20,24,30,0.72) !important;
  border-bottom-color:rgba(255,255,255,0.10);
}

  .navbar-collapse{

    background:
      var(--card-bg);

    border-radius:
      var(--radius-md);

    margin-top:1rem;

    padding:1rem 1.25rem;

    border:
      1px solid
      var(--border-color);

    box-shadow:
      var(--shadow-md);

  }


  .nav-link-custom::after{

    display:none;

  }


  .nav-link-custom{

    padding:
      .7rem .75rem !important;

  }


  .contact-info-card{

    margin-bottom:2rem;

  }

}


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

@media (max-width:991.98px){

  .hero-carousel{

    height:82vh;

  }


  .section{

    padding:4rem 0;

  }


  .hero-headline{

    font-size:
      clamp(
        2.2rem,
        6vw,
        3.5rem
      );

  }

}


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

@media (max-width:767.98px){

  .hero-carousel{

    height:74vh;

    min-height:520px;

  }


  .hero-desc{

    font-size:1rem;

  }


  .stat-item{

    padding:1rem;

  }


  .job-card{

    flex-direction:column;

    align-items:flex-start;

  }


  .hero-content{

    padding-top:3rem;

  }


  .hero-headline{

    font-size:
      clamp(
        2rem,
        9vw,
        3rem
      );

  }


  .hero-cta-group{

    gap:.7rem;

  }


  .hero-cta-group
  .btn-energy,

  .hero-cta-group
  .btn-energy-outline{

    width:100%;

    justify-content:center;

  }


  .section{

    padding:3.5rem 0;

  }


  .section-heading{

    font-size:2rem;

  }

}


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

@media (max-width:575.98px){

  .brand .site-logo{

    height:38px;

    max-width:165px;

  }


  .site-navbar.scrolled
  .brand .site-logo{

    height:34px;

  }


  .hero-carousel{

    min-height:540px;

  }


  .hero-content{

    padding-left:.25rem;

    padding-right:.25rem;

  }


  .hero-headline{

    font-size:
      clamp(
        1.9rem,
        10vw,
        2.6rem
      );

  }


  .hero-desc{

    font-size:.95rem;

  }


  .card-body-energy{

    padding:1.35rem;

  }


  .mv-card{

    padding:2rem;

  }

  .contact-info-card{

    padding:2rem;

  }

}




/* =========================================================
   MOBILE NAVBAR FIX
   ---------------------------------------------------------
   Fixes:
   - Hamburger/toggle kufichwa juu ya hero
   - Navbar kubaki visible bila kuscroll
   - Transparent navbar kwenye hero
   - Toggle icon kuonekana vizuri kwenye light/dark mode
   - Dropdown kubaki ndogo na chini ya toggle/navbar
   - Works on small phones, tablets and desktop
   ========================================================= */


/* ---------------------------------------------------------
   1. NAVBAR ALWAYS ABOVE HERO CONTENT
   --------------------------------------------------------- */

.site-navbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999 !important;
}


/* Navbar itself must create a stacking layer */
.site-navbar,
.site-navbar .container,
.site-navbar .navbar-brand,
.site-navbar .navbar-toggler,
.site-navbar .navbar-collapse {
  position: relative;
  z-index: 10000;
}


/* ---------------------------------------------------------
   2. KEEP HERO BELOW NAVBAR
   --------------------------------------------------------- */

.hero-carousel,
.hero-slide,
.hero-slide-media,
.hero-overlay {
  position: relative;
}

.hero-carousel {
  z-index: 1;
}

.hero-slide-media,
.hero-overlay {
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 5;
}


/* ---------------------------------------------------------
   3. MOBILE NAVBAR
   --------------------------------------------------------- */

@media (max-width: 991.98px) {

  .site-navbar {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;

    width: 100%;
    min-height: 70px;

    z-index: 99999 !important;

    /* transparent */
    background: transparent !important;

    /* prevent clipping */
    overflow: visible !important;
  }


  .site-navbar .container {
    position: relative;
    z-index: 100000;

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

    min-height: 70px;

    overflow: visible !important;
  }


  /* -------------------------------------------------------
     4. LOGO
     ------------------------------------------------------- */

  .site-navbar .navbar-brand {
    position: relative;
    z-index: 100001;

    display: flex;
    align-items: center;

    max-width: 170px;
  }

  .site-navbar .site-logo {
    max-width: 150px;
    height: auto;
    display: block;
  }


  /* -------------------------------------------------------
     5. HAMBURGER / TOGGLE BUTTON
     ------------------------------------------------------- */

  .navbar-toggler-custom {
    position: relative !important;

    z-index: 100005 !important;

    display: flex !important;

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

    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    margin-left: auto;

    padding: 0;

    border: 1px solid rgba(255,255,255,0.45) !important;

    border-radius: 10px;

    background: rgba(10, 14, 18, 0.65) !important;

    color: #ffffff !important;

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

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

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
  }


  .navbar-toggler-custom i {
    display: block !important;

    font-size: 1.55rem !important;
    line-height: 1;

    color: #ffffff !important;

    opacity: 1 !important;
    visibility: visible !important;
  }


  .navbar-toggler-custom:focus {
    box-shadow:
      0 0 0 3px rgba(214,161,61,0.25);
  }


  .navbar-toggler-custom:hover {
    background: rgba(10,14,18,0.85) !important;
  }


  /* -------------------------------------------------------
     6. MOBILE COLLAPSE
     ------------------------------------------------------- */

  .site-navbar .navbar-collapse {
    position: absolute !important;

    top: calc(100% + 8px);
    right: 0;

    left: auto !important;

    width: min(250px, calc(100vw - 30px));

    margin: 0;

    padding: 10px;

    z-index: 100004 !important;

    background: rgba(10,14,18,0.92) !important;

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

    border-radius: 14px;

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

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

    overflow: visible !important;
  }


  /* -------------------------------------------------------
     7. NAV LINKS INSIDE MOBILE MENU
     ------------------------------------------------------- */

  .site-navbar .navbar-nav {
    width: 100%;

    display: flex;
    flex-direction: column;

    align-items: stretch !important;

    gap: 2px !important;
  }


  .site-navbar .nav-item {
    width: 100%;
  }


  .site-navbar .nav-link,
  .site-navbar .nav-link-custom {
    display: flex;

    align-items: center;

    width: 100%;

    min-height: 42px;

    padding: 10px 13px !important;

    border-radius: 8px;

    color: #ffffff !important;

    font-size: 0.92rem;

    font-weight: 500;

    text-decoration: none;
  }


  .site-navbar .nav-link:hover,
  .site-navbar .nav-link:focus,
  .site-navbar .nav-link.active {
    background: rgba(214,161,61,0.16);

    color: #ffffff !important;
  }


  /* -------------------------------------------------------
     8. TEAM DROPDOWN ON MOBILE
     ------------------------------------------------------- */

  .site-navbar .dropdown-menu {
    position: static !important;

    width: 100%;

    margin: 4px 0 4px 0 !important;

    padding: 5px;

    background: rgba(255,255,255,0.07) !important;

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

    border-radius: 9px;

    box-shadow: none !important;
  }


  .site-navbar .dropdown-item {
    color: #ffffff !important;

    padding: 9px 11px;

    border-radius: 7px;

    font-size: 0.88rem;
  }


  .site-navbar .dropdown-item:hover,
  .site-navbar .dropdown-item:focus {
    background: rgba(214,161,61,0.18);

    color: #ffffff !important;
  }


  /* -------------------------------------------------------
     9. THEME TOGGLE
     ------------------------------------------------------- */

  .site-navbar .theme-toggle-btn {
    position: relative;

    z-index: 100006;

    width: 40px;
    height: 40px;

    display: flex;

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

    margin: 5px 0 2px auto;

    border-radius: 50%;

    background: rgba(255,255,255,0.92) !important;

    color: #111418 !important;

    border: 1px solid rgba(0,0,0,0.10);

    box-shadow: 0 5px 18px rgba(0,0,0,0.20);
  }


  .site-navbar .theme-toggle-btn i {
    color: #111418 !important;
  }


  /* -------------------------------------------------------
     10. LIGHT MODE
     Navbar still readable over hero image
     ------------------------------------------------------- */

  [data-theme="light"] .site-navbar .navbar-toggler-custom {
    background: rgba(255,255,255,0.88) !important;

    border-color: rgba(0,0,0,0.18) !important;

    color: #111418 !important;
  }


  [data-theme="light"] .site-navbar .navbar-toggler-custom i {
    color: #111418 !important;
  }


  [data-theme="light"] .site-navbar .navbar-collapse {
    background: rgba(255,255,255,0.94) !important;

    border-color: rgba(0,0,0,0.10);
  }


  [data-theme="light"] .site-navbar .nav-link,
  [data-theme="light"] .site-navbar .nav-link-custom {
    color: #111418 !important;
  }


  [data-theme="light"] .site-navbar .nav-link:hover,
  [data-theme="light"] .site-navbar .nav-link:focus,
  [data-theme="light"] .site-navbar .nav-link.active {
    color: #111418 !important;

    background: rgba(214,161,61,0.18);
  }


  [data-theme="light"] .site-navbar .dropdown-menu {
    background: rgba(255,255,255,0.96) !important;

    border-color: rgba(0,0,0,0.10);
  }


  [data-theme="light"] .site-navbar .dropdown-item {
    color: #111418 !important;
  }


  [data-theme="light"] .site-navbar .dropdown-item:hover,
  [data-theme="light"] .site-navbar .dropdown-item:focus {
    background: rgba(214,161,61,0.15);

    color: #111418 !important;
  }


  /* -------------------------------------------------------
     11. SMALL PHONES
     ------------------------------------------------------- */

  @media (max-width: 575.98px) {

    .site-navbar {
      min-height: 62px;
    }

    .site-navbar .container {
      min-height: 62px;

      padding-left: 14px;
      padding-right: 14px;
    }

    .site-navbar .site-logo {
      max-width: 125px;
    }

    .navbar-toggler-custom {
      width: 42px;
      height: 42px;

      flex-basis: 42px;

      border-radius: 9px;
    }

    .navbar-toggler-custom i {
      font-size: 1.35rem !important;
    }

    .site-navbar .navbar-collapse {
      top: calc(100% + 6px);

      width: min(230px, calc(100vw - 24px));

      right: 12px;

      padding: 8px;

      border-radius: 12px;
    }

    .site-navbar .nav-link,
    .site-navbar .nav-link-custom {
      min-height: 40px;

      padding: 9px 11px !important;

      font-size: 0.88rem;
    }
  }


  /* -------------------------------------------------------
     12. VERY SMALL PHONES
     ------------------------------------------------------- */

  @media (max-width: 360px) {

    .site-navbar .container {
      padding-left: 10px;
      padding-right: 10px;
    }

    .site-navbar .site-logo {
      max-width: 110px;
    }

    .navbar-toggler-custom {
      width: 40px;
      height: 40px;

      flex-basis: 40px;
    }

    .site-navbar .navbar-collapse {
      right: 10px;

      width: calc(100vw - 20px);

      max-width: 220px;
    }
  }
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 992px) {

  .site-navbar {
    position: absolute !important;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 99999 !important;

    background: transparent !important;
  }

}


/* =========================================================
   HERO IMAGE + MOBILE NAVBAR FINAL FIX
   ========================================================= */

/* Hero itself */
.hero-carousel {
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden;
}


/* Bootstrap carousel */
.hero-carousel .carousel,
.hero-carousel .carousel-inner,
.hero-carousel .carousel-item {
    position: relative;
    width: 100%;
    height: 100%;
}


/* Hero slide */
.hero-slide {
    position: relative !important;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    overflow: hidden;
}


/* HERO IMAGE
   Important: do NOT give this a problematic z-index */
.hero-slide-media {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;

    z-index: 0 !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}


/* Hero overlay stays ABOVE image */
.hero-overlay {
    position: absolute !important;

    inset: 0 !important;

    width: 100%;
    height: 100%;

    z-index: 1 !important;
}


/* Hero text stays above image + overlay */
.hero-content {
    position: relative !important;
    z-index: 2 !important;
}


/* Hero controls */
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next,
.hero-carousel .carousel-indicators {
    z-index: 10 !important;
}


/* =========================================================
   NAVBAR MUST BE ABOVE HERO
   ========================================================= */

.site-navbar {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    z-index: 9999 !important;

    background: transparent !important;

    overflow: visible !important;
}


/* Navbar container */
.site-navbar .container {
    position: relative !important;
    z-index: 10000 !important;

    overflow: visible !important;
}


/* Logo */
.site-navbar .navbar-brand {
    position: relative !important;
    z-index: 10001 !important;
}


/* Hamburger */
.navbar-toggler-custom {
    position: relative !important;

    z-index: 10005 !important;

    opacity: 1 !important;
    visibility: visible !important;
}


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

@media (max-width: 991.98px) {

    .site-navbar {
        position: absolute !important;
        top: 0 !important;

        z-index: 99999 !important;

        background: transparent !important;
    }


    .hero-carousel {
        position: relative !important;
        z-index: 1 !important;

        min-height: 100vh;
    }


    .hero-slide {
        min-height: 100vh !important;
    }


    /* Make sure mobile hero image is visible */
    .hero-slide-media {
        position: absolute !important;

        inset: 0 !important;

        display: block !important;

        visibility: visible !important;

        opacity: 1 !important;

        z-index: 0 !important;

        background-size: cover !important;

        background-position: center center !important;
    }


    /* Overlay above image */
    .hero-overlay {
        z-index: 1 !important;
    }


    /* Text above overlay */
    .hero-content {
        position: relative !important;

        z-index: 2 !important;
    }


    /* Hamburger above EVERYTHING */
    .navbar-toggler-custom {
        position: relative !important;

        z-index: 100000 !important;

        display: flex !important;

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

        visibility: visible !important;
        opacity: 1 !important;
    }


    /* Mobile dropdown */
    .site-navbar .navbar-collapse {
        position: absolute !important;

        top: calc(100% + 8px) !important;

        right: 12px !important;
        left: auto !important;

        width: min(240px, calc(100vw - 24px)) !important;

        z-index: 100001 !important;

        overflow: visible !important;
    }

}


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

@media (max-width: 575.98px) {

    .hero-slide {
        min-height: 100svh !important;
    }

    .hero-slide-media {
        min-height: 100svh !important;

        background-size: cover !important;
        background-position: center center !important;
    }

    .navbar-toggler-custom {
        width: 42px !important;
        height: 42px !important;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {

    .hero-slide,
    .hero-slide-media {
        min-height: 100svh !important;
    }

    .site-navbar .navbar-collapse {
        right: 10px !important;

        width: calc(100vw - 20px) !important;

        max-width: 220px !important;
    }

}


/* =========================================================
   TRUSTED BRANDS
   LARGE STANDALONE LOGOS
   NO BOX / NO CARD
   ========================================================= */

.trusted-brands-section .brand-logo-item {
  width: 100%;
  min-height: 130px;

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

  padding: 12px;

  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  overflow: visible;
}


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

.trusted-brands-section .brand-logo-item img {
  display: block;

  width: auto;
  height: auto;

  max-width: 190px;
  max-height: 95px;

  object-fit: contain;
  object-position: center;

  opacity: 1 !important;

  transition:
    transform .3s ease,
    opacity .3s ease;
}


/* Subtle hover */
.trusted-brands-section .brand-logo-item:hover img {
  transform: scale(1.07);
}


/* =========================================================
   DARK MODE
   Give dark logos a subtle light presentation area
   WITHOUT creating a visible box/card.
   ========================================================= */

[data-theme="dark"] .trusted-brands-section .brand-logo-item img {
  background: rgba(255, 255, 255, 0.94);

  padding: 8px 12px;

  border-radius: 6px;

  box-sizing: border-box;
}


/* =========================================================
   LIGHT MODE
   ========================================================= */

[data-theme="light"] .trusted-brands-section .brand-logo-item img {
  background: transparent;

  padding: 0;

  border-radius: 0;
}


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

@media (max-width: 991.98px) {

  .trusted-brands-section .brand-logo-item {
    min-height: 115px;
  }

  .trusted-brands-section .brand-logo-item img {
    max-width: 170px;
    max-height: 85px;
  }

}


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

@media (max-width: 575.98px) {

  .trusted-brands-section .brand-logo-item {
    min-height: 105px;
    padding: 8px;
  }

  .trusted-brands-section .brand-logo-item img {
    max-width: 150px;
    max-height: 75px;
  }

}



/* =========================================================
   NAVBAR — ALWAYS VISIBLE ON SCROLL
   ========================================================= */

.site-navbar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;

  width: 100%;

  z-index: 9999 !important;

  /* Transparent initially */
  background: rgba(10, 14, 18, 0.18) !important;

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

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

  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}


/* =========================================================
   WHEN USER SCROLLS
   ========================================================= */

.site-navbar.scrolled {
  background: rgba(12, 17, 22, 0.92) !important;

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

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

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


/* =========================================================
   NAVBAR LINKS — DARK / TRANSPARENT NAVBAR
   ========================================================= */

.site-navbar .nav-link,
.site-navbar .nav-link-custom {
  color: #ffffff !important;

  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.35);
}


/* Hover */
.site-navbar .nav-link:hover,
.site-navbar .nav-link-custom:hover {
  color: var(--accent-color) !important;
}


/* Active */
.site-navbar .nav-link.active,
.site-navbar .nav-link-custom.active {
  color: var(--primary-color) !important;
}


/* =========================================================
   LIGHT MODE
   ========================================================= */

[data-theme="light"] .site-navbar {
  background: rgba(255, 255, 255, 0.72) !important;

  border-bottom: 1px solid rgba(17, 20, 24, 0.10);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}


/* Scrolled light navbar */
[data-theme="light"] .site-navbar.scrolled {
  background: rgba(255, 255, 255, 0.96) !important;

  border-bottom: 1px solid rgba(17, 20, 24, 0.12);

  box-shadow:
    0 8px 25px rgba(17, 20, 24, 0.10);
}


/* Light mode links */
[data-theme="light"] .site-navbar .nav-link,
[data-theme="light"] .site-navbar .nav-link-custom {
  color: #18202a !important;

  text-shadow: none;
}


/* Light mode hover */
[data-theme="light"] .site-navbar .nav-link:hover,
[data-theme="light"] .site-navbar .nav-link-custom:hover {
  color: var(--primary-color) !important;
}


/* Light mode active */
[data-theme="light"] .site-navbar .nav-link.active,
[data-theme="light"] .site-navbar .nav-link-custom.active {
  color: var(--primary-color) !important;
}


/* =========================================================
   TEAM DROPDOWN
   ========================================================= */

.site-navbar .dropdown-menu {
  z-index: 10000 !important;
}


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

@media (max-width: 991.98px) {

  .site-navbar {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;

    width: 100%;

    z-index: 9999 !important;
  }

  .site-navbar .navbar-collapse {
    position: absolute;

    top: calc(100% + 8px);
    right: 12px;

    width: min(260px, calc(100vw - 24px));

    max-height: calc(100vh - 90px);

    overflow-y: auto;

    border-radius: 12px;

    background: rgba(15, 20, 25, 0.94);

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

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

    box-shadow:
      0 18px 45px rgba(0, 0, 0, 0.28);

    padding: 10px;

    z-index: 10000;
  }


  /* Light mobile menu */
  [data-theme="light"] .site-navbar .navbar-collapse {
    background: rgba(255, 255, 255, 0.96);

    border: 1px solid rgba(17, 20, 24, 0.10);

    box-shadow:
      0 18px 45px rgba(17, 20, 24, 0.15);
  }


  .site-navbar .nav-link {
    padding: 10px 12px !important;
  }

}


/* =========================================================
   BODY OFFSET
   Prevent fixed navbar from covering normal content
   ========================================================= */

body {
  --navbar-height: 76px;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .site-navbar {
    transition: none !important;
  }

}


/* =========================================================
  SONAK PROJECT MAP
   ========================================================= */

.project-locations {
    padding: 80px 20px;
    text-align: center;
}

.project-locations h2 {
    margin-bottom: 15px;
}

.project-locations p {
    max-width: 650px;
    margin: 0 auto 30px;
}


/* =========================================
   MAP BUTTON
   ========================================= */

.map-btn {
    border: none;
    padding: 14px 28px;

    background: #B57833;
    color: #ffffff;

    border-radius: 50px;

    font-size: 16px;
    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;
}

.map-btn:hover {
    transform: translateY(-3px);
}


/* =========================================
   MAP MODAL
   ========================================= */

.map-modal {

    display: none;

    position: fixed;

    inset: 0;

    z-index: 9999;

    background: rgba(0, 0, 0, 0.75);

    padding: 25px;
}


/* When opened */

.map-modal.active {

    display: flex;

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

}


/* =========================================
   MAP CONTAINER
   ========================================= */

.map-container {

    width: 100%;
    max-width: 1100px;

    background: #ffffff;

    border-radius: 20px;

    overflow: hidden;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.25);

}


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

.map-header {

    display: flex;

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

    padding: 18px 25px;

}


.map-header h3 {

    margin: 0;

}


/* =========================================
   CLOSE BUTTON
   ========================================= */

.map-close {

    border: none;

    background: transparent;

    font-size: 32px;

    cursor: pointer;

}


/* =========================================
   GOOGLE MAP
   ========================================= */

#project-map {

    width: 100%;

    height: 600px;

}


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

@media (max-width: 768px) {

    .map-modal {

        padding: 10px;

    }

    #project-map {

        height: 500px;

    }

    .map-header {

        padding: 15px;

    }

}


/* =====================================================================
   END OF SONAK MASTER STYLESHEET
===================================================================== */