/* =====================================================
   TABLE OF CONTENTS
   1. CSS Variables / Reset
   2. Base Typography
   3. Layout Utilities
   4. Buttons
   5. Header / Navigation
   6. Hero Section
   7. Section Heading (shared)
   8. About Section
   9. Services Section
   10. Courses Section
   11. Skills Section
   12. Experience Timeline
   13. Portfolio Section
   14. Certifications Section
   15. Achievements / Counters
   16. Testimonials Section
   17. Gallery Section
   18. FAQ Section
   19. Contact Section
   20. Footer
   ===================================================== */

/* -----------------------------------------------------
   1. CSS Variables / Reset
----------------------------------------------------- */
:root {
  /* Colors */
  --color-primary: #1e293b;
  --color-secondary: #2563EB;
  --color-accent: #38BDF8;
  --color-bg: #F8FAFC;
  --color-card: #FFFFFF;
  --color-text: #1E293B;
  --color-text-light: #64748B;
  --color-border: #E2E8F0;
  --color-success: #22C55E;

  --gradient-primary: linear-gradient(135deg, #2563EB 0%, #38BDF8 100%);
  --gradient-dark: linear-gradient(135deg, #0F172A 0%, #1E3A8A 100%);

  /* Typography */
  --font-display: 'Poppins', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Radius / Shadows */
  --radius: 18px;
  --radius-sm: 10px;
  --radius-full: 999px;
  --shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.12);
  --shadow-glow: 0 8px 30px rgba(37, 99, 235, 0.25);

  /* Spacing */
  --section-padding: 70px;
  --container-width: 1240px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-display);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; }

:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 3px;
}

/* -----------------------------------------------------
   2. Base Typography
----------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--color-primary);
  font-weight: 700;
  line-height: 1.2;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-secondary);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--gradient-primary);
  display: inline-block;
  border-radius: 2px;
}

/* -----------------------------------------------------
   3. Layout Utilities
----------------------------------------------------- */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 32px;
}

section { padding: var(--section-padding) 0; position: relative; }

.grid { display: grid; }

.text-center { text-align: center; }

.bg-dark {
  background: var(--gradient-dark);
  color: #E2E8F0;
}
.bg-dark h1, .bg-dark h2, .bg-dark h3 { color: #FFFFFF; }

/* -----------------------------------------------------
   4. Buttons
----------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.35s cubic-bezier(.2,.8,.2,1);
  white-space: nowrap;
}

.btn-primary {
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.35);
}

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-border);
}
.btn-outline:hover {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
  transform: translateY(-3px);
}

.btn-light {
  background: #fff;
  color: var(--color-primary);
}
.btn-light:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.btn-sm { padding: 10px 22px; font-size: 0.85rem; }
.btn-block { width: 100%; justify-content: center; }

/* -----------------------------------------------------
   5. Header / Navigation
----------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 20px 0;
  transition: all 0.35s ease;
  background: rgba(248, 250, 252, 0.65);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}

.site-header.scrolled {
  padding: 12px 0;
  box-shadow: var(--shadow-sm);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.logo span { color: var(--color-secondary); }
.logo .logo-mark {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--gradient-primary);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem; font-weight: 800;
  box-shadow: var(--shadow-glow);
}

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

.nav-links a {
  padding: 10px 16px;
  border-radius: var(--radius-full);
  font-weight: 500;
  font-size: 0.94rem;
  color: var(--color-text);
  position: relative;
  transition: all 0.25s ease;
}
.nav-links a:hover, .nav-links a.active {
  color: var(--color-secondary);
  background: rgba(37, 99, 235, 0.08);
}

.nav-actions { display: flex; align-items: center; gap: 12px; }

.nav-actions .btn-call {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--color-border);
  color: var(--color-primary);
  transition: all 0.25s ease;
}
.nav-actions .btn-call:hover {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
  transform: translateY(-2px);
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 30px;
  z-index: 1100;
}
.hamburger span {
  height: 2.5px;
  width: 100%;
  background: var(--color-primary);
  border-radius: 3px;
  transition: all 0.3s ease;
}
.hamburger.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* -----------------------------------------------------
   6. Hero Section
----------------------------------------------------- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 140px;
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
}

.hero-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  z-index: 0;
  opacity: 0.55;
}
.hero-shape.one {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(56,189,248,0.35), transparent 70%);
  top: -120px; right: -100px;
}
.hero-shape.two {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(37,99,235,0.25), transparent 70%);
  bottom: -100px; left: -80px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero-content h1 {
  font-size: clamp(2.4rem, 4.4vw, 3.8rem);
  margin: 18px 0 20px;
  letter-spacing: -0.02em;
}
.hero-content h1 .highlight {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--color-secondary);
  margin-bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.hero-sub span::after { content: '/'; margin-left: 14px; color: var(--color-accent); }
.hero-sub span:last-child::after { content: ''; }

.hero-text {
  color: var(--color-text-light);
  font-size: 1.05rem;
  max-width: 540px;
  margin-bottom: 34px;
}

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 56px; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  border-top: 1px solid var(--color-border);
  padding-top: 30px;
}
.hero-stats .stat-num {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--color-primary);
}
.hero-stats .stat-num span { color: var(--color-secondary); }
.hero-stats .stat-label {
  font-size: 0.82rem;
  color: var(--color-text-light);
  margin-top: 4px;
}

/* Hero visual: photo + terminal signature element */
.hero-visual { position: relative; }

.hero-photo-frame {
  width: 100%;
  aspect-ratio: 4/4.6;
  border-radius: 28px;
  overflow: hidden;
  background: var(--gradient-dark);
  box-shadow: var(--shadow-lg);
  position: relative;
}
.hero-photo-frame img {
  width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: normal;
}

.hero-terminal {
  position: absolute;
  bottom: -36px;
  left: -50px;
  width: 300px;
  background: var(--color-primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
.hero-terminal .term-bar {
  display: flex;
  gap: 6px;
  padding: 12px 14px;
  background: #2f3849;
}
.hero-terminal .term-bar span {
  width: 10px; height: 10px; border-radius: 50%;
}
.hero-terminal .term-bar span:nth-child(1) { background: #F87171; }
.hero-terminal .term-bar span:nth-child(2) { background: #FBBF24; }
.hero-terminal .term-bar span:nth-child(3) { background: #34D399; }

.hero-terminal .term-body {
  padding: 18px 16px 22px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: #A5F3FC;
  min-height: 110px;
}
.hero-terminal .term-body .prompt { color: #38BDF8; }
.hero-terminal .term-body .cursor {
  display: inline-block;
  width: 7px; height: 1em;
  background: #38BDF8;
  vertical-align: text-bottom;
  animation: blink 1s steps(1) infinite;
}

.hero-badge {
  position: absolute;
  top: -22px;
  right: -20px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-badge .badge-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--gradient-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.hero-badge .badge-num { font-weight: 800; font-size: 1.1rem; color: var(--color-primary); }
.hero-badge .badge-label { font-size: 0.72rem; color: var(--color-text-light); }

/* -----------------------------------------------------
   7. Section Heading (shared)
----------------------------------------------------- */
.section-head {
  max-width: 640px;
  margin: 0 auto 64px;
  text-align: center;
}
.section-head h2 {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  margin-top: 16px;
  letter-spacing: -0.01em;
}
.section-head p {
  color: var(--color-text-light);
  margin-top: 16px;
  font-size: 1.02rem;
}
.section-head.align-left { text-align: left; margin: 0 0 56px; }

.page-hero {
  padding: 170px 0 90px;
  background: var(--gradient-dark);
  color: #E2E8F0;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(56,189,248,0.25), transparent 70%);
  top: -180px; right: -120px;
  border-radius: 50%;
}
.page-hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); margin-top: 16px; }
.page-hero .breadcrumb {
  margin-top: 18px;
  font-size: 0.9rem;
  color: var(--color-accent);
  display: flex; gap: 8px; align-items: center;
}
.page-hero .breadcrumb a { color: #CBD5E1; }
.page-hero .breadcrumb a:hover { color: #fff; }

/* -----------------------------------------------------
   8. About Section
----------------------------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 70px;
  align-items: start;
}

.about-photo-wrap { position: relative; }
.about-photo {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 3/3.6;
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; }

.about-exp-card {
  position: absolute;
  bottom: -28px;
  right: -28px;
  background: #fff;
  padding: 20px 24px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.about-exp-card .num { font-size: 2rem; font-weight: 800; color: var(--color-secondary); }
.about-exp-card .label { font-size: 0.78rem; color: var(--color-text-light); }

.about-tabs { display: flex; gap: 10px; margin: 30px 0 20px; flex-wrap: wrap; }
.about-tab-btn {
  padding: 10px 20px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-text-light);
  transition: all 0.25s ease;
}
.about-tab-btn.active, .about-tab-btn:hover {
  background: var(--gradient-primary);
  color: #fff;
  border-color: transparent;
}
.about-tab-panel { display: none; }
.about-tab-panel.active { display: block; }

.mission-vision {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 26px;
}
.mv-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-sm);
  border-left: 3px solid var(--color-secondary);
}
.mv-card i { color: var(--color-secondary); font-size: 1.4rem; margin-bottom: 12px; }
.mv-card h4 { font-size: 1.05rem; margin-bottom: 8px; }
.mv-card p { color: var(--color-text-light); font-size: 0.92rem; }

.timeline-edu {
  margin-top: 20px;
  border-left: 2px solid var(--color-border);
  padding-left: 28px;
}
.timeline-edu .edu-item { position: relative; padding-bottom: 26px; }
.timeline-edu .edu-item:last-child { padding-bottom: 0; }
.timeline-edu .edu-item::before {
  content: '';
  position: absolute;
  left: -34px; top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--gradient-primary);
  box-shadow: 0 0 0 4px rgba(37,99,235,0.15);
}
.timeline-edu .edu-year { font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-secondary); }
.timeline-edu h4 { margin: 4px 0; font-size: 1rem; }
.timeline-edu p { color: var(--color-text-light); font-size: 0.9rem; }

.skills-bars { margin-top: 20px; }
.skill-bar-item { margin-bottom: 18px; }
.skill-bar-top { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.9rem; font-weight: 600; }
.skill-bar-track {
  width: 100%; height: 8px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.skill-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  width: 0;
  transition: width 1.4s cubic-bezier(.2,.8,.2,1);
}


/* -----------------------------------------------------
   13b. Publications Section
----------------------------------------------------- */
.pub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px;
}

.pub-card {
  background: var(--color-card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: 0;
  transition: all 0.35s cubic-bezier(.2,.8,.2,1);
  border: 1px solid var(--color-border);
}
.pub-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.pub-cover {
  width: 40%;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.pub-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.pub-card:hover .pub-cover img { transform: scale(1.06); }

.pub-body {
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pub-category {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary);
  background: rgba(37,99,235,0.08);
  padding: 5px 12px;
  border-radius: var(--radius-full);
  display: inline-flex;
  width: fit-content;
  margin-bottom: 14px;
}
.pub-body h3 { font-size: 1.08rem; margin-bottom: 10px; line-height: 1.35; }
.pub-body p { color: var(--color-text-light); font-size: 0.88rem; margin-bottom: 16px; flex-grow: 1; }
.pub-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.8rem;
  color: var(--color-text-light);
  margin-bottom: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}
.pub-meta span { display: flex; align-items: center; gap: 6px; }
.pub-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pub-actions .btn { padding: 11px 18px; font-size: 0.82rem; }

/* -----------------------------------------------------
   9. Services Section
----------------------------------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.service-card {
  background: var(--color-card);
  border-radius: var(--radius);
  padding: 38px 30px;
  box-shadow: var(--shadow-sm);
  transition: all 0.4s cubic-bezier(.2,.8,.2,1);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}
.service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}
.service-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
}
.service-card:hover::after { opacity: 1; }
.service-card > * { position: relative; z-index: 1; }

.service-icon {
  width: 60px; height: 60px;
  border-radius: 16px;
  background: rgba(37,99,235,0.08);
  color: var(--color-secondary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 22px;
  transition: all 0.35s ease;
}
.service-card:hover .service-icon {
  background: rgba(255,255,255,0.18);
  color: #fff;
}

.service-card h3 { font-size: 1.15rem; margin-bottom: 12px; transition: color 0.35s ease; }
.service-card:hover h3 { color: #fff; }
.service-card p { color: var(--color-text-light); font-size: 0.92rem; transition: color 0.35s ease; }
.service-card:hover p { color: rgba(255,255,255,0.88); }

.service-card .service-num {
  position: absolute;
  top: 28px; right: 30px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-border);
  z-index: 1;
}
.service-card:hover .service-num { color: rgba(255,255,255,0.5); }

/* -----------------------------------------------------
   10. Courses Section
----------------------------------------------------- */
.filter-bar {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 50px;
}
.filter-btn {
  padding: 10px 22px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--color-text-light);
  transition: all 0.25s ease;
}
.filter-btn.active, .filter-btn:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.courses-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.course-card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.35s ease;
}
.course-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }

.course-thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.course-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.course-card:hover .course-thumb img { transform: scale(1.08); }
.course-level {
  position: absolute; top: 14px; left: 14px;
  background: rgba(15,23,42,0.75);
  color: #fff;
  font-size: 0.72rem;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  backdrop-filter: blur(4px);
}

.course-body { padding: 24px; }
.course-body h3 { font-size: 1.08rem; margin-bottom: 10px; }
.course-meta { display: flex; gap: 16px; font-size: 0.82rem; color: var(--color-text-light); margin-bottom: 16px; }
.course-meta span { display: flex; align-items: center; gap: 6px; }
.course-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--color-border); }
.course-price { font-weight: 800; color: var(--color-primary); font-size: 1.05rem; }
.course-price span { font-size: 0.78rem; color: var(--color-text-light); font-weight: 400; }

/* -----------------------------------------------------
   11. Skills Section (standalone, index page)
----------------------------------------------------- */
.skills-section { background: #fff; }
.skills-grid-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 60px;
}

/* -----------------------------------------------------
   12. Experience Timeline
----------------------------------------------------- */
.timeline {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--color-border);
  transform: translateX(-50%);
}
.timeline-item {
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  gap: 0;
  margin-bottom: 50px;
}
.timeline-item .tl-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-sm);
}
.timeline-item .tl-year { font-family: var(--font-mono); color: var(--color-secondary); font-size: 0.8rem; }
.timeline-item h4 { margin: 6px 0; }
.timeline-item .tl-company { color: var(--color-text-light); font-size: 0.85rem; margin-bottom: 10px; }
.timeline-item p { color: var(--color-text-light); font-size: 0.9rem; }
.timeline-dot {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--gradient-primary);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 0 0 6px #F8FAFC, var(--shadow-glow);
  z-index: 2;
}
.timeline-item:nth-child(odd) .tl-card { grid-column: 1; text-align: right; }
.timeline-item:nth-child(odd) .tl-spacer { grid-column: 3; }
.timeline-item:nth-child(even) .tl-card { grid-column: 3; }
.timeline-item:nth-child(even) .tl-spacer-left { grid-column: 1; }
.timeline-item:nth-child(even) .tl-year, .timeline-item:nth-child(even) .tl-company { text-align: left; }

/* -----------------------------------------------------
   13. Portfolio Section
----------------------------------------------------- */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.portfolio-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/3.2;
  box-shadow: var(--shadow-sm);
}
.portfolio-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.portfolio-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(15,23,42,0.92), rgba(15,23,42,0.1) 60%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 26px;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.portfolio-item:hover .portfolio-overlay { opacity: 1; }
.portfolio-item:hover img { transform: scale(1.1); }
.portfolio-overlay .tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.portfolio-overlay h4 { color: #fff; font-size: 1.1rem; margin-bottom: 14px; }
.portfolio-overlay .view-btn {
  width: fit-content;
  font-size: 0.82rem;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
  padding: 8px 18px;
  border-radius: var(--radius-full);
  display: flex; align-items: center; gap: 8px;
}
.portfolio-overlay .view-btn:hover { background: #fff; color: var(--color-primary); }

/* -----------------------------------------------------
   14. Certifications Section
----------------------------------------------------- */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.cert-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: all 0.35s ease;
}
.cert-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.cert-logo {
  width: 68px; height: 68px;
  margin: 0 auto 20px;
  border-radius: 16px;
  background: var(--color-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem;
  color: var(--color-secondary);
}
.cert-card h4 { font-size: 1.02rem; margin-bottom: 8px; }
.cert-card p { color: var(--color-text-light); font-size: 0.85rem; }
.cert-card .cert-issuer { font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-accent); text-transform: uppercase; margin-top: 12px; }

/* -----------------------------------------------------
   15. Achievements / Counters
----------------------------------------------------- */
.achievements-section {
  background: var(--gradient-dark);
  color: #fff;
}
.counters-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}
.counter-item .counter-num {
  font-size: 2.6rem;
  font-weight: 800;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.counter-item .counter-label {
  color: #94A3B8;
  font-size: 0.9rem;
  margin-top: 8px;
}

/* -----------------------------------------------------
   16. Testimonials Section
----------------------------------------------------- */
.testimonial-slider {
  max-width: 780px;
  margin: 0 auto;
  position: relative;
}
.testimonial-track { overflow: hidden; }
.testimonial-slides { display: flex; transition: transform 0.5s cubic-bezier(.2,.8,.2,1); }
.testimonial-slide { min-width: 100%; padding: 10px; }
.testimonial-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 44px;
  box-shadow: var(--shadow-md);
  text-align: center;
}
.testimonial-card .stars { color: #FBBF24; margin-bottom: 18px; font-size: 0.95rem; }
.testimonial-card p.quote { font-size: 1.08rem; color: var(--color-text); font-style: italic; margin-bottom: 26px; }
.testimonial-person { display: flex; align-items: center; justify-content: center; gap: 14px; }
.testimonial-person img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.testimonial-person h5 { font-size: 0.98rem; }
.testimonial-person span { font-size: 0.8rem; color: var(--color-text-light); }

.slider-nav { display: flex; justify-content: center; gap: 14px; margin-top: 34px; }
.slider-nav button {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s ease;
}
.slider-nav button:hover { background: var(--gradient-primary); color: #fff; border-color: transparent; }

.slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.slider-dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-border);
  transition: all 0.3s ease;
}
.slider-dots span.active { width: 26px; border-radius: var(--radius-full); background: var(--gradient-primary); }

/* -----------------------------------------------------
   17. Gallery Section
----------------------------------------------------- */
.gallery-masonry {
  column-count: 3;
  column-gap: 22px;
}
.gallery-item {
  break-inside: avoid;
  margin-bottom: 22px;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-sm);
}
.gallery-item img { width: 100%; display: block; transition: transform 0.5s ease; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-caption {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(15,23,42,0.85), transparent 55%);
  display: flex; align-items: flex-end;
  padding: 18px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gallery-item:hover .gallery-caption { opacity: 1; }
.gallery-caption span { color: #fff; font-size: 0.9rem; font-weight: 600; }



/* -----------------------------------------------------
   18. FAQ Section
----------------------------------------------------- */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item {
  background: #fff;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq-question {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 26px;
  font-weight: 600;
  font-size: 1rem;
}
.faq-question i { color: var(--color-secondary); transition: transform 0.3s ease; }
.faq-item.active .faq-question i { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.faq-answer p { padding: 0 26px 22px; color: var(--color-text-light); font-size: 0.92rem; }
.faq-item.active .faq-answer { max-height: 300px; }

/* -----------------------------------------------------
   19. Contact Section
----------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 50px;
}
.contact-info-card {
  background: var(--gradient-dark);
  border-radius: var(--radius);
  padding: 44px 36px;
  color: #E2E8F0;
}
.contact-info-card h3 { color: #fff; margin-bottom: 14px; }
.contact-info-card > p { color: #94A3B8; margin-bottom: 34px; font-size: 0.94rem; }
.contact-info-item {
  display: flex; gap: 16px; align-items: flex-start;
  margin-bottom: 26px;
}
.contact-info-item .ci-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: rgba(56,189,248,0.12);
  color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-info-item h5 { color: #fff; font-size: 0.92rem; margin-bottom: 4px; }
.contact-info-item p, .contact-info-item a { color: #94A3B8; font-size: 0.88rem; }
.contact-social { display: flex; gap: 12px; margin-top: 30px; }
.contact-social a {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  color: #E2E8F0;
  transition: all 0.25s ease;
}
.contact-social a:hover { background: var(--gradient-primary); border-color: transparent; transform: translateY(-3px); }

.contact-form-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 44px;
  box-shadow: var(--shadow-md);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 8px; }
.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  padding: 14px 18px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  transition: border-color 0.25s ease;
  background: var(--color-bg);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  border-color: var(--color-secondary);
  outline: none;
  background: #fff;
}
.form-group textarea { resize: vertical; min-height: 130px; }
.form-note { font-size: 0.82rem; color: var(--color-text-light); margin-top: 14px; text-align: center; }

.map-embed {
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 60px;
  box-shadow: var(--shadow-sm);
  height: 380px;
  background: var(--color-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-light);
  flex-direction: column;
  gap: 10px;
}
.map-embed i { font-size: 2rem; color: var(--color-secondary); }

/* -----------------------------------------------------
   20. Footer
----------------------------------------------------- */
.site-footer {
  background: var(--color-primary);
  color: #94A3B8;
  padding-top: 90px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr 1.2fr;
  gap: 50px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand .logo { color: #fff; }
.footer-brand p { margin: 18px 0 22px; font-size: 0.92rem; line-height: 1.7; max-width: 320px; text-align: left; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  color: #E2E8F0;
  transition: all 0.25s ease;
}
.footer-social a:hover { background: var(--gradient-primary); transform: translateY(-3px); }

.footer-col h4 { color: #fff; font-size: 1rem; margin-bottom: 22px; }
.footer-col ul li { margin-bottom: 14px; text-align: left; }
.footer-col ul li a { font-size: 0.9rem; transition: color 0.25s ease; }
.footer-col ul li a:hover { color: var(--color-accent); }

.footer-newsletter p { font-size: 0.9rem; margin-bottom: 18px; }
.newsletter-form { display: flex; gap: 10px; }
.newsletter-form input {
  flex: 1;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: #fff;
  font-size: 0.88rem;
}
.newsletter-form input::placeholder { color: #64748B; }
.newsletter-form button {
  background: var(--gradient-primary);
  color: #fff;
  width: 46px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
}

.footer-bottom {
  padding: 26px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}
.footer-bottom a { color: var(--color-accent); }

.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-glow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.35s ease;
  z-index: 900;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { transform: translateY(-4px); }

/* -----------------------------------------------------
   Shared: page CTA banner
----------------------------------------------------- */
.cta-banner {
  background: var(--gradient-primary);
  border-radius: 28px;
  padding: 64px;
  text-align: center;
  color: #fff;
  margin: 0 32px;
  position: relative;
  overflow: hidden;
}
.cta-banner h2 { color: #fff; margin-bottom: 16px; }
.cta-banner p { color: rgba(255,255,255,0.85); max-width: 520px; margin: 0 auto 30px; }
.cta-banner .btn-light:hover { color: var(--color-secondary); }


/* MERGED FROM SECONDARY */
/* ====================================================================
   STYLE.CSS — Main Stylesheet
   ====================================================================
   This file controls ALL the colors, fonts, spacing, and design of
   your website's Gallery page (and can be reused for other pages
   too, since it's linked from all of them).

   HOW THIS FILE IS ORGANISED (scroll down to find what you need):
     1. COLOR & FONT VARIABLES   -> change your whole color scheme here
     2. RESET                    -> basic browser cleanup, don't touch
     3. GENERAL / BODY STYLES    -> base text styles
     4. NAVIGATION BAR
     5. MOBILE MENU BUTTON
     6. GALLERY HERO SECTION
     7. ALBUMS GRID + CARDS
     8. BUTTONS
     9. FOOTER
    10. SMALL ANIMATIONS

   TIP: Every section below starts with a big comment banner like
   the ones you see here, so you can use Ctrl+F (Find) and search
   for words like "NAVIGATION" or "ALBUM CARDS" to jump straight
   to the part you want to change.
   ==================================================================== */


/* ====================================================================
   1. COLOR & FONT VARIABLES
   ====================================================================
   These are like "settings" for your whole website. If you want to
   change a color everywhere on the site, you only need to change it
   ONCE here, and it will update everywhere it's used.

   >>> EDIT HERE: Change the color codes (the #xxxxxx values) to
   update your color scheme.
   ==================================================================== */
:root {
    /* Main brand colors (navy / blue / sky) */
    --color-navy: #0F172A;         /* Darkest color - used for headings, header background on some pages */
    --color-blue: #2563EB;         /* Primary blue - buttons, links, highlights */
    --color-sky: #4FA8DE;          /* Lighter accent blue - hover states, badges */

    /* Background & neutral colors */
    --color-bg-light: #F4F8FB;     /* Very light blue-grey background for sections */
    --color-white: #FFFFFF;

    /* Text colors */
    --color-text-dark: #1A2B3C;    /* Main body text color */
    --color-text-gray: #5A6B7B;    /* Softer/secondary text color */

    /* Borders & shadows */
    --color-border: #E3EAF2;
    --shadow-soft: 0 10px 30px rgba(10, 37, 64, 0.08);
    --shadow-hover: 0 18px 40px rgba(10, 37, 64, 0.14);

    /* Fonts */
    --font-main: 'Poppins', sans-serif;       /* Used for all headings and body text */
    --font-mono: 'JetBrains Mono', monospace; /* Used for small labels like years, photo counts */

    /* Spacing helper (used for consistent page padding) */
    --container-width: 1200px;
}


/* ====================================================================
   2. RESET
   ====================================================================
   This removes default browser spacing so our own spacing rules
   below work consistently in every browser. You normally don't
   need to touch this section.
   ==================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth; /* smooth scrolling when jumping to sections */
}


/* ====================================================================
   3. GENERAL / BODY STYLES
   ====================================================================
   Base styles that apply to the whole page.
   ==================================================================== */
body {
    font-family: var(--font-main);
    color: var(--color-text-dark);
    background-color: var(--color-white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--font-main);
    font-weight: 700;
    color: var(--color-navy);
    line-height: 1.3;
}

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

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

ul {
    list-style: none;
}


/* ====================================================================
   4. NAVIGATION BAR
   ====================================================================
   The top menu bar with your logo and page links.
   >>> EDIT HERE: Change background color, logo color, or spacing.
   ==================================================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 20px 0;
    transition: all 0.35s ease;
    background: rgba(248, 250, 252, 0.65);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}

.navbar {
    max-width: var(--container-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 30px;
}

.logo {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-navy);
    letter-spacing: 0.3px;
}

.logo span {
    color: var(--color-blue);
}

.nav-links {
    display: flex;
    gap: 34px;
}

.nav-links a {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-dark);
    padding: 6px 2px;
    position: relative;
    transition: color 0.3s ease;
}

/* Small underline animation on hover */
.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0%;
    height: 2px;
    background-color: var(--color-blue);
    transition: width 0.3s ease;
}

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

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}


/* ====================================================================
   5. MOBILE MENU BUTTON
   ====================================================================
   The hamburger (three lines) icon button that appears on small
   screens/phones. Hidden on desktop by default.
   ==================================================================== */
.menu-toggle {
    display: none;          /* hidden on desktop, responsive.css turns it on for mobile */
    background: none;
    border: none;
    font-size: 24px;
    color: var(--color-navy);
    cursor: pointer;
}


/* ====================================================================
   6. GALLERY HERO SECTION
   ====================================================================
   The introduction area at the top of the Gallery page with the
   big title and short description text.
   >>> EDIT HERE: Adjust colors, spacing, or text alignment.
   ==================================================================== */
.gallery-hero {
    text-align: center;
    padding: 90px 20px 60px;
    background: linear-gradient(180deg, var(--color-bg-light) 0%, var(--color-white) 100%);
}

.section-eyebrow {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-blue);
    margin-bottom: 14px;
    font-weight: 500;
}

.gallery-hero h1 {
    font-size: 42px;
    margin-bottom: 18px;
}

.hero-subtext {
    max-width: 600px;
    margin: 0 auto;
    color: var(--color-text-gray);
    font-size: 16px;
}


/* ====================================================================
   7. ALBUMS GRID + CARDS
   ====================================================================
   This controls how the album boxes look and how they line up
   on the page (the grid). Each album is one ".album-card".
   >>> EDIT HERE: Change spacing, rounding, or shadow of the cards.
   ==================================================================== */
.albums-section {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 40px 30px 120px;
}

.albums-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 cards per row on desktop */
    gap: 40px;
}

.album-card {
    background-color: var(--color-white);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Lift the card slightly and add a bigger shadow when hovered */
.album-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
}

/* Cover photo area */
.album-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;      /* keeps a consistent photo shape for every card */
    overflow: hidden;
}

.album-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* crops the photo neatly to fill the box */
    transition: transform 0.5s ease;
}

/* Zoom the cover photo slightly when the card is hovered */
.album-card:hover .album-cover img {
    transform: scale(1.08);
}

/* Year badge shown on top of the cover photo */
.album-year {
    position: absolute;
    top: 14px;
    right: 14px;
    background-color: rgba(10, 37, 64, 0.75);
    color: var(--color-white);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 20px;
    backdrop-filter: blur(4px); /* soft glass effect, matches the rest of the site */
}

/* Text area below the cover photo */
.album-info {
    padding: 22px 22px 26px;
}

.album-info h3 {
    font-size: 19px;
    margin-bottom: 8px;
}

.album-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-gray);
    font-size: 14px;
    margin-bottom: 18px;
}

.album-meta i {
    color: var(--color-sky);
}

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


/* ====================================================================
   8. BUTTONS
   ====================================================================
   Shared button style used for "View Album" and any other buttons
   across the site.
   >>> EDIT HERE: Change button color, roundness, or hover effect.
   ==================================================================== */
.view-album-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--color-blue);
    color: var(--color-white);
    font-size: 14px;
    font-weight: 500;
    padding: 11px 20px;
    border-radius: 30px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.view-album-btn:hover {
    background-color: var(--color-navy);
    transform: translateX(3px);
}

.view-album-btn i {
    font-size: 13px;
    transition: transform 0.3s ease;
}

.view-album-btn:hover i {
    transform: translateX(3px);
}


/* ====================================================================
   9. FOOTER
   ====================================================================
   Simple footer strip at the bottom of the page.
   >>> EDIT HERE: Change background color or text color.
   ==================================================================== */
.site-footer {
    background-color: var(--color-navy);
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    font-size: 14px;
    padding: 26px 20px;
}


/* ====================================================================
   11. ALBUM PAGE: BREADCRUMB
   ====================================================================
   The small "Gallery > Album Name" trail shown at the top of every
   individual album page (e.g. album-delhi-2026.html).
   >>> EDIT HERE: Change spacing or colors of the breadcrumb trail.
   ==================================================================== */
.breadcrumb {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 24px 30px 0;
    font-size: 14px;
    color: var(--color-text-gray);
}

.breadcrumb a {
    color: var(--color-blue);
    transition: color 0.3s ease;
}

.breadcrumb a:hover {
    color: var(--color-navy);
    text-decoration: underline;
}

.breadcrumb .separator {
    margin: 0 8px;
    color: var(--color-border);
}

/* Album page header — title + photo count, similar to the gallery-hero
   but a bit shorter since this page's real content is the photo grid */
.album-page-header {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 20px 30px 10px;
}

.album-page-header h1 {
    font-size: 34px;
    margin-bottom: 10px;
}

.album-page-header .album-page-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-gray);
    font-size: 15px;
}

.album-page-header .album-page-meta i {
    color: var(--color-sky);
}

.album-page-meta .photo-count {
    font-family: var(--font-mono);
}


/* ====================================================================
   12. PHOTO GRID (inside an album page)
   ====================================================================
   This is the grid of individual photos shown inside an album,
   e.g. all 100 Delhi Batch 2026 photos.
   >>> EDIT HERE: Change how many columns show, spacing, or rounding.
   ==================================================================== */
.photo-grid-section {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 30px 30px 120px;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 photos per row on desktop */
    gap: 16px;
}

.photo-item {
    aspect-ratio: 1 / 1;         /* keeps every photo thumbnail a neat square */
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;              /* shows a "hand" cursor so people know it's clickable */
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: var(--color-bg-light); /* shows while the photo is still loading */
}

.photo-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.photo-item:hover img {
    transform: scale(1.06);
}

/* Small "back to gallery" button at the top of the album page */
.back-to-gallery {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-blue);
}

.back-to-gallery:hover {
    color: var(--color-navy);
}


/* ====================================================================
   13. FULLSCREEN LIGHTBOX POPUP
   ====================================================================
   This is the fullscreen popup that opens when someone clicks a
   photo. It shows one large photo at a time, with Previous / Next
   / Close controls.
   >>> EDIT HERE: Change the dark overlay color or button styling.
   ==================================================================== */

/* The dark fullscreen background overlay */
.lightbox-overlay {
    display: none;                 /* hidden by default — JavaScript shows it on click */
    position: fixed;
    inset: 0;                      /* covers the entire screen (top/right/bottom/left = 0) */
    background-color: rgba(10, 15, 25, 0.94);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

/* This class is added by JavaScript to actually display the popup */
.lightbox-overlay.open {
    display: flex;
}

/* The large photo shown inside the popup */
.lightbox-image {
    max-width: 88%;
    max-height: 85vh;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: fadeInUp 0.3s ease both;
}

/* Close (X) button — top right corner */
.lightbox-close {
    position: absolute;
    top: 26px;
    right: 34px;
    font-size: 30px;
    color: var(--color-white);
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.lightbox-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

/* Previous / Next arrow buttons */
.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 26px;
    color: var(--color-white);
    background-color: rgba(255, 255, 255, 0.12);
    border: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

.lightbox-prev {
    left: 24px;
}

.lightbox-next {
    right: 24px;
}

/* Small counter text, e.g. "4 / 100", shown at the bottom of the popup */
.lightbox-counter {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--font-mono);
    font-size: 14px;
}


/* ====================================================================
   14. SMALL ANIMATIONS
   ====================================================================
   A gentle fade-and-rise animation used when album cards first
   appear on the page. Purely decorative — safe to leave alone.
   ==================================================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.album-card {
    animation: fadeInUp 0.6s ease both;
}

/* Give each card a tiny extra delay so they appear one after another */
.albums-grid .album-card:nth-child(1) { animation-delay: 0.05s; }
.albums-grid .album-card:nth-child(2) { animation-delay: 0.1s; }
.albums-grid .album-card:nth-child(3) { animation-delay: 0.15s; }
.albums-grid .album-card:nth-child(4) { animation-delay: 0.2s; }
.albums-grid .album-card:nth-child(5) { animation-delay: 0.25s; }
.albums-grid .album-card:nth-child(6) { animation-delay: 0.3s; }
.albums-grid .album-card:nth-child(7) { animation-delay: 0.35s; }