/* ---------- Reset & base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#060608; --muted:#9aa3ad; --gold-1:#f8d47a; --gold-2:#d9a441; --glass: rgba(255,255,255,0.04);
}
html,body{height:100%}
body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial;color:#e6e6e6;background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5}

/* ---------- container & nav ---------- */
.container{width:92%;max-width:1200px;margin:0 auto}
.nav{position:fixed;left:0;right:0;top:12px;z-index:60;display:flex;justify-content:center;pointer-events:none}
.nav-inner{width:92%;max-width:1200px;background:linear-gradient(180deg, rgba(0, 0, 0, 0.7),rgba(0,0,0,1));backdrop-filter:blur(6px);border-radius:10px;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 10px 30px rgba(0,0,0,0.6);pointer-events:auto}
.brand{display:flex;flex-direction:column}
.logo{font-weight:800;font-size:18px;color:var(--gold-1)}
.tag{font-size:12px;color:var(--muted);margin-top:2px}
.links{display:flex;gap:18px;align-items:center}
.links a{color:var(--muted);text-decoration:none;font-weight:600;padding:8px 10px;border-radius:8px;transition:.18s}
.links a:hover{color:#fff;background:rgba(255,255,255,0.03)}
.cta{background:linear-gradient(90deg,var(--gold-1),var(--gold-2));color:#091018;padding:8px 14px;border-radius:10px}
.nav-toggle{display:none}
.links .cta{color: black;}
/* ---------- MISSION (letter by letter) ---------- */
.mission{
  height:72vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin-top:18px;
  background-image:linear-gradient(180deg, rgba(2,6,23,0.55), rgba(2,6,23,0.25)), url('img3.jpg');
  background-size:cover;background-position:center;color:#fff;
}
.bg-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.5),rgba(0,0,0,0.15))}
.mission-inner{position:relative;z-index:2;text-align:center;max-width:1000px;padding:0 20px}
.mission-heading{font-family:'Playfair Display', serif;font-weight:800;font-size:2rem;line-height:1.12;letter-spacing:-0.2px;margin:auto;color:var(--gold-1)}
@media(min-width:900px){ .mission-heading{font-size:2.6rem} }

/* letter spans */
.reveal-text h1, .reveal-text h2, .reveal-text h3, .reveal-text p {display:block}
.reveal-text h1 span, .reveal-text h2 span, .reveal-text h3 span, .reveal-text p span{
  display:inline-block; opacity:0; transform:translateY(18px); will-change:transform,opacity;
  animation:letterIn .55s forwards cubic-bezier(.2,.9,.2,1);
}
@keyframes letterIn{ to { opacity:1; transform:translateY(0); } }

/* ---------- Split sections ---------- */
.split-section{padding:80px 0}
.split-row{display:flex;gap:40px;align-items:center}
.split-row.reverse{flex-direction:row-reverse}
.split-left{flex:1;max-width:640px}
.split-right{flex:1}
.split-right img{width:100%;border-radius:12px;box-shadow:0 22px 50px rgba(0,0,0,0.6)}

/* headings & bullets */
.split-left h2{font-size:1.5rem;margin-bottom:12px;color:var(--gold-1)}
.split-left p{color:var(--muted);margin-bottom:18px}
.bullets{margin-top:14px;list-style:none;display:flex;flex-direction:column;gap:10px}
.bullets li{padding-left:18px;position:relative;color:#eaeaea}
.bullets li:before{content:"•";position:absolute;left:0;color:var(--gold-1)}

/* ---------- Fax section ---------- */
.fax-section{padding:80px 0;background:linear-gradient(180deg,#070709,#0f1113)}
.fax-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.fax-copy h2{font-size:1.6rem;margin-bottom:10px;color:var(--gold-1)}
.fax-copy p{color:var(--muted);margin-bottom:16px}
.small-features{list-style:none;display:flex;gap:12px;color:var(--muted);flex-wrap:wrap}
.small-features li{background:rgba(255,255,255,0.03);padding:8px 12px;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,0.6);color:#ddd}

/* mail animation stage */
.fax-stage{display:flex;align-items:center;justify-content:center;position:relative;height:340px}
.mail-stack{position:relative;width:380px;height:260px}
.doc{position:absolute;left:-420px;top:50%;transform:translateY(-50%);width:280px;border-radius:12px;overflow:hidden;background:#0b0b0c;box-shadow:0 18px 40px rgba(0,0,0,0.6);border:1px solid rgba(255,215,120,0.06)}
.doc img{width:100%;height:100%;object-fit:cover;opacity:0.98}
.doc-1{animation:docSlide 6.5s infinite ease-in-out}
.doc-2{animation:docSlide 6.5s infinite ease-in-out 1.6s}
.doc-3{animation:docSlide 6.5s infinite ease-in-out 3.1s}
/* small info panel */
.panel{position:absolute;right:-20px;bottom:-20px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));padding:12px 14px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.6);color:#fff}
.panel-row{display:flex;justify-content:space-between;font-weight:700;color:#fff}
.panel-row.small{font-weight:600;color:var(--muted);font-size:13px;margin-top:6px}

/* mail keyframes */
@keyframes docSlide {
  0% { left:-420px; opacity:0; transform:translateY(-50%) scale(.98) rotate(-2deg) }
  18% { left:50%; transform:translate(-50%,-50%) scale(1); opacity:1; rotate:0 }
  56% { left:50%; transform:translate(-50%,-50%) scale(1); opacity:1 }
  78% { left:120%; opacity:0; transform:translateY(-50%) scale(.98) rotate(2deg) }
  100% { left:120%; opacity:0 }
}

/* ---------- Cards ---------- */
.cards{padding:80px 0}
.section-title{font-size:1.6rem;margin-bottom:20px;color:var(--gold-1)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,0.6);transition:transform .35s ease,box-shadow .35s;cursor:pointer;border:1px solid rgba(255,215,120,0.03)}
.card img{width:100%;height:140px;object-fit:cover}
.card .card-body{padding:14px}
.card h3{font-size:1.05rem;margin-bottom:8px;color:#fff}
.card p{color:var(--muted);font-size:0.95rem}
.card:hover{transform:translateY(-8px) scale(1.03);box-shadow:0 28px 60px rgba(0,0,0,0.7);border-color:rgba(255,215,120,0.18)}

/* ---------- GOLD ULTRA CTA (black + gold) ---------- */
.gold-ultra-section {
  position: relative;
  padding: 120px 20px;
  text-align: center;
  overflow: hidden;
  color: var(--gold-1);
  background: #050506;
  z-index: 1;
  border-top: 1px solid rgba(255,215,120,0.03);
  border-bottom: 1px solid rgba(255,215,120,0.03);
}

/* background image dim */
.gold-ultra-section:before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("https://images.unsplash.com/photo-1485827404703-89b55fcc595e?q=80&w=1800&auto=format&fit=crop") center/cover no-repeat;
  opacity: 0.12;
  filter: brightness(0.35) contrast(1.05);
  z-index: 1;
}

/* DIAGONAL SPLIT BLACK/GOLD subtle */
.diagonal-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, rgba(2,2,2,0.75) 55%, rgba(255,210,100,0.06) 100%);
  z-index: 2;
}

/* GOLD PARTICLES (container) */
#goldParticles { position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; }

/* SVG border frame */
.luxury-frame { position:absolute; inset:0; width:100%; height:100%; z-index:6; pointer-events:none; opacity:0.9; filter: drop-shadow(0 10px 30px rgba(0,0,0,0.6)); }

/* content */
.gold-ultra-content {
  position: relative;
  z-index: 10;
  max-width: 820px;
  margin: auto;
  padding: 0 12px;
}

.gold-ultra-content h2 {
  font-size: 2.4rem;
  font-weight: 800;
  margin-bottom: 12px;
  background: linear-gradient(90deg, var(--gold-1), var(--gold-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-ultra-content p {
  font-size: 1.05rem;
  opacity: 0.95;
  color: #f4d98f;
  margin-bottom: 26px;
}

/* gold button */
.gold-ultra-btn {
  padding: 12px 36px;
  font-weight: 800;
  font-size: 1rem;
  color: #071018;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
  border-radius: 40px;
  text-decoration: none;
  box-shadow: 0 8px 30px rgba(255,215,95,0.16);
  position: relative;
  overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease;
}

.gold-ultra-btn:hover { transform: scale(1.07); box-shadow: 0 14px 60px rgba(255,215,95,0.30); }

/* particle style */
.gold-particle { position:absolute; width:6px; height:6px; border-radius:50%; background:radial-gradient(circle,#ffdf8f,#bb8d28); opacity:0.9; }

/* ---------- Footer ---------- */
.footer{padding:24px 0;background:#040507;color:#9fb0c9;font-size:14px;text-align:center}

/* ---------- Reveal base ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.reveal.show{opacity:1;transform:translateY(0)}

/* tilt hint */
[data-tilt]{transform-style:preserve-3d;will-change:transform}

/* ---------- Responsive ---------- */
@media(max-width:1000px){ .split-row{flex-direction:column} .split-right img{width:100%} .fax-grid{grid-template-columns:1fr} .gold-ultra-content{padding:8px} .nav-inner{padding:8px} }
@media(max-width:700px){ .mission-heading{font-size:1.4rem} .links{display:none} .nav-toggle{display:block} .gold-ultra-content h2{font-size:1.6rem} }
/* ================================
   GOLD SECTION 2 — Sliding Layer
================================ */

.gold-slide-section {
  position: relative;
  padding: 120px 20px;
  overflow: hidden;
  background: #050506;
  color: var(--gold-1);
  border-top: 1px solid rgba(255,215,120,0.08);
  border-bottom: 1px solid rgba(255,215,120,0.08);
}

.gold-slide-bg {
  position: absolute;
  top: 0; left: -60%;
  width: 60%;
  height: 100%;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
  opacity: 0.15;
  transform: skewX(-20deg);
  animation: slideInGold 1.6s ease forwards;
}

@keyframes slideInGold {
  0% { left: -80%; }
  100% { left: 0; }
}

.gold-slide-content {
  position: relative;
  z-index: 3;
  max-width: 760px;
  margin: auto;
  text-align: center;
}

.gold-slide-content h2 {
  font-size: 2.2rem;
  margin-bottom: 10px;
  background: linear-gradient(90deg,var(--gold-1),var(--gold-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-slide-content p {
  color: #e8d9a1;
  opacity: 0.9;
  max-width: 620px;
  margin: auto;
  margin-bottom: 28px;
}

.gold-slide-btn {
  display: inline-block;
  padding: 12px 36px;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
  color: #071018;
  font-weight: 700;
  border-radius: 40px;
  text-decoration: none;
  transition: .3s ease;
  box-shadow: 0px 10px 30px rgba(255,215,120,0.2);
}

.gold-slide-btn:hover {
  transform: scale(1.07);
  box-shadow: 0px 16px 40px rgba(255,215,120,0.35);
}

/* ================================
   GOLD SECTION 3 — Floating Bars 
================================ */

.gold-bars-section {
  position: relative;
  padding: 140px 20px;
  background: #040405;
  color: var(--gold-1);
  overflow: hidden;
}

.gold-bars-wrapper {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.gold-bar {
  position: absolute;
  width: 160%;
  height: 14px;
  background: linear-gradient(90deg, var(--gold-1), var(--gold-2));
  opacity: 0.13;
  transform: rotate(-12deg);
  left: -20%;
  animation: barFloat 5s ease-in-out infinite alternate;
}

.bar1 { top: 30%; animation-delay: 0s; }
.bar2 { top: 55%; animation-delay: 1.2s; }
.bar3 { top: 78%; animation-delay: 2.5s; }

@keyframes barFloat {
  0% { transform: translateX(-6%) rotate(-12deg); }
  100% { transform: translateX(6%) rotate(-12deg); }
}

.gold-bars-content {
  position: relative;
  z-index: 10;
  max-width: 820px;
  text-align: center;
  margin: auto;
}

.gold-bars-content h2 {
  font-size: 2.3rem;
  font-weight: 800;
  margin-bottom: 15px;
  background: linear-gradient(90deg,var(--gold-1),var(--gold-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-bars-content p {
  max-width: 650px;
  margin: auto;
  margin-bottom: 32px;
  color: #e6d7a1;
  opacity: 0.95;
}

.gold-bars-btn {
  padding: 12px 36px;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
  color: #071018;
  border-radius: 40px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 34px rgba(255,215,120,0.25);
  transition: .25s;
}

.gold-bars-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 16px 50px rgba(255,215,120,0.45);
}
/* =========================================
   HUMAN-CENTERED ENGINEERING — Light Theme
========================================= */

.light-circle-section {
  padding: 120px 0;
  background: #f6f8fb; /* very light grey */
  border-top: 1px solid rgba(255,215,120,0.06);
  border-bottom: 1px solid rgba(255,215,120,0.06);
}

.light-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

.light-left {
  flex: 1;
}

.light-left h2 {
  font-size: 2rem;
  color: #1a1a1a;
  margin-bottom: 12px;
  font-weight: 700;
}

.light-left p {
  color: #555;
  font-size: 1.1rem;
  margin-bottom: 20px;
}

.light-left .bullets li {
  color: #333;
}
.light-left .bullets li::before {
  color: #d9a441; /* gold bullets */
}

/* RIGHT SIDE IMAGES */
.light-right {
  flex: 1;
  position: relative;
  height: 420px;
}

/* Main circle image */
.circle-img {
  width: 330px;
  height: 330px;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 30px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
  border: 4px solid rgba(255, 215, 120, 0.3);
  transition: .45s ease;
}

.circle-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* HOVER EFFECT */
.circle-img:hover {
  transform: scale(1.08) rotate(2deg);
  box-shadow: 0 28px 70px rgba(0,0,0,0.3);
  border-color: rgba(255, 215, 120, 0.6);
}

/* Floating animated small image */
.float-img {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 20px;
  overflow: hidden;
  left: 0;
  bottom: 0;
  box-shadow: 0 14px 40px rgba(0,0,0,0.2);
  animation: floatUpDown 4s ease-in-out infinite;
  border: 3px solid rgba(255, 215, 120, 0.3);
}

.float-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* subtle floating animation */
@keyframes floatUpDown {
  0% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-14px) rotate(1deg); }
  100% { transform: translateY(0) rotate(-2deg); }
}

/* Responsive */
@media (max-width: 900px) {
  .light-row {
    flex-direction: column;
    text-align: center;
  }

  .light-right {
    height: auto;
  }

  .circle-img {
    position: static;
    margin: auto;
  }

  .float-img {
    display: none; /* optional */
  }
}

/* =========================================
   AUTOMATION BUILT FOR SCALE — Light Theme
========================================= */

.auto-light-section {
  padding: 120px 0;
  background: #f4f6fa; /* soft clean light background */
  border-top: 1px solid rgba(255,215,120,0.08);
  border-bottom: 1px solid rgba(255,215,120,0.08);
}

.auto-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

/* LEFT TEXT */
.auto-left {
  flex: 1;
}

.auto-left h2 {
  font-size: 2rem;
  color: #1a1a1a;
  margin-bottom: 14px;
  font-weight: 700;
}

.auto-left p {
  color: #555;
  font-size: 1.1rem;
  max-width: 560px;
  margin-bottom: 30px;
}

.auto-btn {
  padding: 12px 34px;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
  color: #071018;
  font-weight: 700;
  border-radius: 40px;
  text-decoration: none;
  transition: .3s;
  box-shadow: 0 12px 30px rgba(255,215,120,0.25);
}

.auto-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 18px 40px rgba(255,215,120,0.45);
}

/* RIGHT IMAGES — animation layout */
.auto-right {
  flex: 1;
  position: relative;
  height: 420px;
}

/* Base image styling */
.auto-img {
  position: absolute;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.2);
  transition: transform .35s ease;
  border: 4px solid rgba(255,215,120,0.25);
}

.auto-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Main center image */
.main-img {
  width: 340px;
  height: 240px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: bounceMain 5s ease-in-out infinite;
  z-index: 3;
}

/* Left floating small image */
.float-left-img {
  width: 180px;
  height: 140px;
  left: -40px;
  top: 40px;
  animation: floatLeft 6s ease-in-out infinite;
  z-index: 2;
}

/* Right floating small image */
.float-right-img {
  width: 200px;
  height: 150px;
  right: -30px;
  bottom: 40px;
  animation: floatRight 7s ease-in-out infinite;
  z-index: 2;
}

/* Animations */
@keyframes bounceMain {
  0% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-12px); }
  100% { transform: translate(-50%, -50%) translateY(0); }
}

@keyframes floatLeft {
  0% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-16px) rotate(2deg); }
  100% { transform: translateY(0) rotate(-2deg); }
}

@keyframes floatRight {
  0% { transform: translateY(0) rotate(1deg); }
  50% { transform: translateY(14px) rotate(-1deg); }
  100% { transform: translateY(0) rotate(1deg); }
}

/* Hover scale effect on all images */
.auto-img:hover {
  transform: scale(1.05);
  box-shadow: 0 26px 60px rgba(0,0,0,0.3);
  border-color: rgba(255,215,120,0.45);
}

/* Responsive */
@media (max-width: 900px) {
  .auto-row {
    flex-direction: column;
    text-align: center;
  }

  .auto-right {
    height: 380px;
    margin-top: 30px;
  }

  .float-left-img,
  .float-right-img {
    display: none; /* optional toggle */
  }

  .main-img {
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
    animation: bounceMainMobile 4s ease-in-out infinite;
  }

  @keyframes bounceMainMobile {
    0% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-10px); }
    100% { transform: translateX(-50%) translateY(0); }
  }
}


/* ---------- CAPABILITIES SECTION (FULL WIDTH GOLD) ---------- */
#capabilities {
  width: 100%;
  background: #d9a441;    /* FULL WIDTH GOLD BACKGROUND */
  padding: 100px 0;
  margin-top: 60px;
}

/* Make container normal inside */
#capabilities .container {
  max-width: 1200px;
  margin: auto;
  width: 92%;
}

/* Title black */
#capabilities .section-title {
  font-size: 2rem;
  margin-bottom: 30px;
  color: #000 !important;
  text-align: center;
  font-weight: 800;
}

/* Card Grid */
#capabilities .card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}

/* Black cards */
#capabilities .card {
  background: #000 !important;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.08);
  transition: transform .35s ease, box-shadow .35s ease, border-color .25s ease;
  box-shadow: 0 12px 35px rgba(0,0,0,0.5);
  cursor: pointer;
}

/* Card Image */
#capabilities .card img {
  width: 100%;
  height: 170px;
  object-fit: cover;
}

/* Card Content */
#capabilities .card-body {
  padding: 18px;
}

#capabilities .card h3 {
  color: #fff;
  margin-bottom: 8px;
  font-size: 1.15rem;
}

#capabilities .card p {
  color: #dcdcdc;
  font-size: 0.95rem;
}

/* Hover: Gold Glow + Lift + Border Shine */
#capabilities .card:hover {
  transform: translateY(-10px) scale(1.03);
  border-color: rgba(255,255,255,0.3);
  box-shadow: 0 22px 80px rgba(0,0,0,0.7),
              0 0 25px rgba(255,255,255,0.2) inset;
}

/* Tilt support */
#capabilities .card[data-tilt] {
  cursor: grab;
}
#capabilities.container {
  width: 100% !important;
  max-width: 100% !important;
  padding: 70px 40px; /* optional inner spacing */
}


/* ===========================================
   RIGHT-SIDE VERTICAL GOLD WAVE LINES
=========================================== */

.vertical-waves {
  position: absolute;
  top: 0;
  right: 0;
  width: 160px;
  height: 100%;
  overflow: hidden;
  z-index: 4; /* above backgrounds, below text */
  pointer-events: none;
}

.wave-line {
  position: absolute;
  width: 3px;
  height: 160px;
  background: linear-gradient(
    to bottom,
    rgba(248,212,122,0) 0%,
    rgba(248,212,122,0.8) 50%,
    rgba(248,212,122,0) 100%
  );
  border-radius: 4px;
  filter: blur(1px);
  opacity: 0.7;
  animation: waveMoveVertical 4s linear infinite;
}

/* different positions + speeds */
.wave1 { right: 30px; animation-duration: 5s; }
.wave2 { right: 60px; animation-duration: 6s; opacity: 0.5; }
.wave3 { right: 90px; animation-duration: 7s; opacity: 0.35; }

/* floating vertical movement */
@keyframes waveMoveVertical {
  0% { top: -180px; }
  100% { top: 110%; }
}


/* ===========================
   PREMIUM GALLERY SECTION
=========================== */

.gallery-section {
  padding: 80px 0;
  background: #08090b;
}

.gallery-title {
  text-align: center;
  font-size: 2rem;
  color: var(--gold-1);
  margin-bottom: 10px;
  font-weight: 800;
}

.gallery-subtitle {
  text-align: center;
  color: #cfcfcf;
  max-width: 600px;
  margin: 0 auto 40px;
}

/* Masonry Grid */
.masonry-grid {
  column-count: 3;
  column-gap: 18px;
}

.masonry-item {
  position: relative;
  break-inside: avoid;
  margin-bottom: 18px;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
  transform: translateY(20px);
  opacity: 0;
  animation: galleryFadeIn 0.8s forwards ease;
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
}

/* Fade-in animation */
@keyframes galleryFadeIn {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.masonry-item img,
.masonry-item video {
  width: 100%;
  display: block;
  border-radius: 12px;
  transition: transform .4s ease, filter .4s ease;
}

/* Hover animation */
.masonry-item:hover img,
.masonry-item:hover video {
  transform: scale(1.07);
  filter: brightness(1.2);
}

/* Video overlay */
.video-item {
  position: relative;
}

.video-item video {
  object-fit: cover;
}

.video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-weight: 700;
  font-size: 1.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: .3s ease;
}

.video-item:hover .video-overlay {
  opacity: 1;
}

/* RESPONSIVE */
@media(max-width: 900px) { .masonry-grid { column-count: 2; } }
@media(max-width: 600px) { .masonry-grid { column-count: 1; } }

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

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 999;
  justify-content: center;
  align-items: center;
}

.lightbox-content {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
  animation: zoomIn .3s ease;
}

@keyframes zoomIn {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Close */
.close-lightbox {
  position: absolute;
  top: 22px;
  right: 32px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
  transition: .3s;
}

.close-lightbox:hover {
  color: var(--gold-1);
}

/* ===========================
   FULL SCREEN VIDEO SECTION
=========================== */

.full-video-section {
  position: relative;
  width: 100%;
  height: 80vh;
  overflow: hidden;
}

.bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* Dark gradient overlay for readability */
.video-dark-layer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(0,0,0,0.4),
    rgba(0,0,0,0.6)
  );
  z-index: 2;
}

/* Center text */
.video-overlay-content {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
}

.video-overlay-content h2 {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 10px;
  background: linear-gradient(90deg, var(--gold-1), var(--gold-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.video-overlay-content p {
  font-size: 1.2rem;
  opacity: 0.9;
}

@media(max-width:768px) {
  .video-overlay-content h2 {
    font-size: 2rem;
  }
  .video-overlay-content p {
    font-size: 1rem;
  }
}


/* Wrap text + image side by side */
.gold-slide-wrapper {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  max-width: 1000px;
  margin: auto;
}

/* Right-side image carousel container */
.kerala-carousel {
  position: relative;
  width: 420px;
  height: 280px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,0.4);
}

/* Each image */
.carousel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 1s ease, transform 1.5s ease;
}

/* Visible image */
.carousel-img.active {
  opacity: 1;
  transform: scale(1);
}

/* Responsive */
@media(max-width: 900px) {
  .gold-slide-wrapper {
    flex-direction: column;
    text-align: center;
  }

  .kerala-carousel {
    width: 100%;
    max-width: 460px;
    height: 260px;
  }
}
@keyframes floatParticle {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-40vh) translateX(12px) scale(1.2);
    opacity: 0.9;
  }
  100% {
    transform: translateY(-80vh) translateX(0) scale(0.9);
    opacity: 0.1;
  }
}