:root {
  --red: #B22D38;
  --darkred: #8F1F28;
  --cream: #FBF4EA;
  --beige: #F4E8D8;
  --gold: #D8A64D;
  --dark: #222;
  --white: #fff;
  --muted: #666;
  --bg: var(--cream);
  --text: var(--dark);
  --card-bg: var(--white);
}

/* Mobile footer center enforcement and small-screen tweaks */
@media (max-width: 768px) {
  footer .footer-content {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 18px;
    padding-bottom: 20px;
  }
  footer .footer-content .footer-section {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
  }
  footer .footer-bottom { text-align:center !important; }
}

@media (max-width: 480px) {
  footer .footer-content { padding-bottom: 12px; }
  footer .footer-content .footer-section h3,
  footer .footer-content .footer-section h4 { margin:0 0 6px 0; }
  footer .footer-bottom p { font-size:14px; margin-top:8px; }
}

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

/* fallback when AOS is missing – keep elements visible instead of invisible */
[data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* original animation rules (these will take effect once aos.js adds the class) */
[data-aos] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

[data-aos].aos-animate {
  opacity: 1;
  transform: translateY(0);
}

/* Text reveal animations */
header h1, header h2, header h3, header h4, header h5, header h6,
header p, header li, header span, header a,
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
footer p, footer li, footer span, footer a {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

h1, h2, h3, h4, h5, h6 {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

p, li, span, a {
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.aos-animate h1, .aos-animate h2, .aos-animate h3,
.aos-animate h4, .aos-animate h5, .aos-animate h6,
.aos-animate p, .aos-animate li, .aos-animate span, .aos-animate a,
[data-aos].aos-animate h1, [data-aos].aos-animate h2, [data-aos].aos-animate h3,
[data-aos].aos-animate h4, [data-aos].aos-animate h5, [data-aos].aos-animate h6,
[data-aos].aos-animate p, [data-aos].aos-animate li, [data-aos].aos-animate span, [data-aos].aos-animate a {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered text animation */
.aos-animate h3 { transition-delay: 0.1s; }
.aos-animate p { transition-delay: 0.2s; }
.aos-animate li { transition-delay: 0.15s; }

/* Section titles */
.title h2 {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.title.aos-animate h2,
[data-aos].aos-animate .title h2 {
  opacity: 1;
  transform: translateY(0) scale(1);
}


html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Libre Baskerville', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  transition: background 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
  opacity: 0;
}

body.loaded {
  opacity: 1;
  animation: fadeIn 0.6s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

body.dark {
  --bg: #000;
  --text: #e6eef6;
  --card-bg: #111111;
  --beige: #000;
  --muted: #a0aec0;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  z-index: 9999;
}

h1, h2, h3 {
  font-family: 'Playfair Display', serif;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
header {
  background: var(--beige);
  padding: 15px 6%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

header.scrolled {
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  padding: 12px 6%;
}

.logo {
  font-size: 22px;
  font-weight: 700;
  color: var(--red);
  cursor: pointer;
}

nav {
  display: flex;
  gap: 25px;
}

nav a {
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
  position: relative;
  transition: color 0.3s ease;
}

nav a::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width 0.3s ease;
}

nav a:hover {
  color: var(--red);
}

nav a:hover::after {
  width: 100%;
}

.controls {
  display: flex;
  gap: 15px;
  align-items: center;
}

.lang-toggle {
  display: flex;
  background: rgba(0,0,0,0.05);
  border-radius: 8px;
  padding: 3px;
  position: relative;
}

.lang-toggle button {
  background: transparent;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--text);
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.lang-toggle button.active {
  background: var(--gold);
  color: white;
  box-shadow: 0 2px 8px rgba(216,166,77,0.3);
}

.theme-toggle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 2px solid rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.theme-toggle:hover {
  border-color: var(--gold);
  transform: scale(1.05);
}

.theme-toggle i {
  position: absolute;
  font-size: 20px;
  transition: all 0.3s ease;
}

.theme-toggle .fa-sun {
  color: #f39c12;
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.theme-toggle .fa-moon {
  color: #34495e;
  opacity: 0;
  transform: rotate(180deg) scale(0);
}

body.dark .theme-toggle {
  background: #2c3e50;
  border-color: rgba(255,255,255,0.2);
}

body.dark .theme-toggle .fa-sun {
  opacity: 0;
  transform: rotate(-180deg) scale(0);
}

body.dark .theme-toggle .fa-moon {
  color: #f1c40f;
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.mobile-menu {
  display: none;
  background: transparent;
  border: none;
  font-size: 24px;
  color: var(--text);
  cursor: pointer;
}

/* Hero Section */
.hero {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--red) 0%, var(--darkred) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  padding: 100px 20px 80px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.hero::before {
  content: '';
  position: absolute;
  width: 150%;
  height: 150%;
  background: linear-gradient(45deg, transparent 30%, rgba(216,166,77,0.1) 50%, transparent 70%);
  top: -50%;
  left: -50%;
  animation: diagonal-move 20s linear infinite;
}

.hero::after {
  content: '';
  position: absolute;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
  border-radius: 50%;
  bottom: -300px;
  right: -300px;
  animation: pulse 15s ease-in-out infinite;
}

@keyframes diagonal-move {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(50%, 50%) rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.2); opacity: 0.5; }
}

.hero-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  opacity: 0.7;
  box-shadow: 0 0 10px var(--gold);
  animation: float-particle 15s infinite;
}

.particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 12s; }
.particle:nth-child(2) { left: 20%; animation-delay: 2s; animation-duration: 14s; }
.particle:nth-child(3) { left: 30%; animation-delay: 4s; animation-duration: 16s; }
.particle:nth-child(4) { left: 50%; animation-delay: 1s; animation-duration: 13s; }
.particle:nth-child(5) { left: 60%; animation-delay: 3s; animation-duration: 15s; }
.particle:nth-child(6) { left: 70%; animation-delay: 5s; animation-duration: 17s; }
.particle:nth-child(7) { left: 80%; animation-delay: 2.5s; animation-duration: 14s; }
.particle:nth-child(8) { left: 90%; animation-delay: 4.5s; animation-duration: 16s; }

@keyframes float-particle {
  0% { transform: translateY(100vh) scale(0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.7; }
  90% { opacity: 0.7; }
  100% { transform: translateY(-100vh) scale(1.5) rotate(360deg); opacity: 0; }
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1));
  backdrop-filter: blur(15px);
  padding: 12px 30px;
  border-radius: 50px;
  margin-bottom: 30px;
  border: 2px solid rgba(255,255,255,0.3);
  animation: fadeInUp 1s ease 0.1s backwards, glow 3s ease-in-out infinite;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

@keyframes glow {
  0%, 100% { box-shadow: 0 8px 32px rgba(0,0,0,0.1), 0 0 20px rgba(216,166,77,0.3); }
  50% { box-shadow: 0 8px 32px rgba(0,0,0,0.1), 0 0 40px rgba(216,166,77,0.5); }
}

.hero-badge i {
  color: var(--gold);
  font-size: 18px;
  animation: spin 10s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.hero-badge span {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.hero h1 {
  font-size: 64px;
  margin-bottom: 20px;
  line-height: 1.2;
  animation: fadeInUp 1s ease;
  text-shadow: 0 4px 20px rgba(0,0,0,0.3);
  font-weight: 700;
}

.hero h1 span {
  background: linear-gradient(135deg, var(--gold), #ffe28a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3); }
}

.hero p {
  font-size: 18px;
  max-width: 700px;
  margin: 0 auto 40px;
  opacity: 0.95;
  animation: fadeInUp 1s ease 0.2s backwards;
}

.hero-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeInUp 1s ease 0.3s backwards;
}

.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.8);
  font-size: 28px;
  animation: bounce 2s infinite;
  cursor: pointer;
  z-index: 2;
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.5));
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-10px); }
  60% { transform: translateX(-50%) translateY(-5px); }
}

.cta-btn {
  padding: 15px 40px;
  border: none;
  background: var(--gold);
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(216,166,77,0.3);
  animation: fadeInUp 1s ease 0.4s backwards;
}

.cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(216,166,77,0.4);
  background: #e6b85c;
}

.cta-btn.secondary {
  background: transparent;
  border: 2px solid var(--gold);
  color: white;
}

.cta-btn.secondary:hover {
  background: var(--gold);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Journey Section */
.journey-section {
  padding: 100px 20px;
  background: var(--beige);
  position: relative;
  z-index: 2;
}

.journey-timeline {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  padding: 40px 0;
}

.timeline-path {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--gold), var(--red));
  transform: translateX(-50%);
}

.timeline-milestone {
  position: relative;
  margin-bottom: 80px;
  display: flex;
  align-items: center;
}

.timeline-milestone:nth-child(even) {
  flex-direction: row-reverse;
}

.timeline-milestone:last-child {
  margin-bottom: 0;
}

.milestone-dot {
  width: 24px;
  height: 24px;
  background: var(--gold);
  border-radius: 50%;
  border: 4px solid var(--beige);
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scale(0);
  z-index: 2;
  box-shadow: 0 0 0 8px rgba(216,166,77,0.2);
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  opacity: 0;
}

.timeline-milestone.aos-animate .milestone-dot {
  transform: translateX(-50%) scale(1);
  opacity: 1;
}

.timeline-milestone:hover .milestone-dot {
  transform: translateX(-50%) scale(1.3);
  box-shadow: 0 0 0 12px rgba(216,166,77,0.3);
}

.milestone-content {
  width: 45%;
  background: var(--card-bg);
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  border: 2px solid transparent;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform: scale(0.9);
}

.timeline-milestone.aos-animate .milestone-content {
  opacity: 1;
  transform: scale(1);
}

.timeline-milestone:nth-child(odd) .milestone-content {
  margin-right: auto;
  margin-left: 0;
}

.timeline-milestone:nth-child(even) .milestone-content {
  margin-left: auto;
  margin-right: 0;
}

.milestone-content:hover {
  border-color: var(--gold);
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.milestone-year {
  display: inline-block;
  background: linear-gradient(135deg, var(--gold), #e6b85c);
  color: white;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 15px;
  font-family: 'Playfair Display', serif;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.5s ease 0.2s;
}

.timeline-milestone.aos-animate .milestone-year {
  opacity: 1;
  transform: translateY(0);
}

.milestone-content h3,
.milestone-content p {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease;
}

.timeline-milestone.aos-animate .milestone-content h3 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

.timeline-milestone.aos-animate .milestone-content p {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

.milestone-content h3 {
  color: var(--red);
  margin-bottom: 10px;
  font-size: 22px;
}

body.dark .milestone-content h3 {
  color: var(--gold);
}

.milestone-content p {
  color: var(--muted);
  line-height: 1.6;
}

/* Title */
.title {
  text-align: center;
  margin-bottom: 50px;
}

.title h2 {
  font-size: 42px;
  color: var(--darkred);
  position: relative;
  display: inline-block;
}

body.dark .title h2 {
  color: var(--gold);
}

/* Stats Section */
.stats {
  background: linear-gradient(135deg, var(--darkred), var(--red));
  color: white;
  padding: 80px 20px;
  position: relative;
  z-index: 2;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  text-align: center;
}

.stat-item {
  padding: 30px;
  transition: all 0.3s ease;
  opacity: 0;
  transform: scale(0.8);
}

.stat-item.aos-animate {
  opacity: 1;
  transform: scale(1);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stat-item:hover {
  transform: translateY(-5px) scale(1.05);
}

.stat-item h2 {
  font-size: 52px;
  background: linear-gradient(135deg, var(--gold), #ffe28a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 10px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
}

.stat-item.aos-animate h2 {
  opacity: 1;
  transform: translateY(0);
}

.stat-item p {
  font-size: 16px;
  color: rgba(255,255,255,0.9);
  font-weight: 500;
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.6s ease 0.4s;
}

.stat-item.aos-animate p {
  opacity: 1;
  transform: translateY(0);
}

/* Projects Section */
.projects {
  padding: 80px 20px;
  background: var(--bg);
  position: relative;
  z-index: 2;
}

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

.project-card, .work-card, .value-card, .mv-card {
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-card.visible, .work-card.visible, .value-card.visible, .mv-card.visible,
.project-card.aos-animate, .work-card.aos-animate, .value-card.aos-animate, .mv-card.aos-animate {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.project-card h3, .work-card h3, .value-card h3 {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s ease 0.2s;
}

.project-card.aos-animate h3, .work-card.aos-animate h3, .value-card.aos-animate h3 {
  opacity: 1;
  transform: translateY(0);
}

.project-card p, .work-card p, .value-card p {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s ease 0.3s;
}

.project-card.aos-animate p, .work-card.aos-animate p, .value-card.aos-animate p {
  opacity: 1;
  transform: translateY(0);
}

.project-card {
  background: var(--card-bg);
  padding: 40px 30px;
  border-radius: 16px;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}

.project-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--gold), var(--red));
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.project-card:hover::before {
  transform: scaleX(1);
}

.project-card:hover {
  transform: translateY(-15px) scale(1.02);
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
  border-color: var(--gold);
}

.project-card i, .work-card i, .value-card i {
  font-size: 56px;
  color: var(--gold);
  margin-bottom: 25px;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: 0;
  transform: scale(0) rotate(-180deg);
}

.project-card.aos-animate i, .work-card.aos-animate i, .value-card.aos-animate i {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.project-card:hover i {
  transform: scale(1.1) rotate(5deg);
}

.project-card h3 {
  color: var(--red);
  margin-bottom: 12px;
}

body.dark .project-card h3 {
  color: var(--gold);
}

/* About Section */
.about {
  padding: 80px 20px;
  background: var(--beige);
  position: relative;
  z-index: 2;
}

.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.about-text p {
  margin-bottom: 20px;
  line-height: 1.8;
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.6s ease;
}

.about-text[data-aos].aos-animate p:nth-child(1) { transition-delay: 0.1s; }
.about-text[data-aos].aos-animate p:nth-child(2) { transition-delay: 0.2s; }
.about-text[data-aos].aos-animate p:nth-child(3) { transition-delay: 0.3s; }

.about-text.aos-animate p,
[data-aos].aos-animate .about-text p {
  opacity: 1;
  transform: translateX(0);
}

.about-values {
  display: flex;
  gap: 30px;
  margin-top: 30px;
}

.value-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.value-item i {
  font-size: 32px;
  color: var(--gold);
}

.value-item span {
  font-weight: 600;
}

.about-image {
  display: flex;
  justify-content: center;
}

.image-placeholder {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1;
  background: var(--card-bg);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--gold);
  opacity: 0;
  transform: scale(0.8) rotate(-5deg);
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.about-image[data-aos].aos-animate .image-placeholder {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.image-placeholder i {
  font-size: 120px;
  color: var(--gold);
  opacity: 0.3;
}

/* Our Work Section */
.our-work {
  padding: 80px 20px;
  background: var(--bg);
  position: relative;
  z-index: 2;
}

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

.work-card {
  background: var(--card-bg);
  padding: 45px 35px;
  border-radius: 16px;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 2px solid transparent;
}

.work-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.12);
  border-color: var(--gold);
}

.work-icon {
  width: 90px;
  height: 90px;
  background: linear-gradient(135deg, var(--gold), #e6b85c);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 25px;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(216,166,77,0.3);
}

.work-card:hover .work-icon {
  transform: rotate(360deg) scale(1.1);
}

.work-icon i {
  font-size: 36px;
  color: white;
}

.work-card h3 {
  color: var(--red);
  margin-bottom: 15px;
}

body.dark .work-card h3 {
  color: var(--gold);
}

/* Gallery Section */
.gallery {
  padding: 80px 20px;
  background: var(--beige);
  position: relative;
  z-index: 2;
}

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

/* Gallery tabs */
.gallery-tabs {
  display:flex;
  gap:10px;
  justify-content:center;
  margin-bottom:24px;
  flex-wrap:wrap;
}
.gallery-tabs .tab-button{
  background:transparent;
  border:2px solid rgba(0,0,0,0.06);
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
  font-weight:600;
  transition:all .25s ease;
  color: var(--text);
}

body.dark .gallery-tabs .tab-button {
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.8);
}

.gallery-tabs .tab-button.active{
  background:var(--gold);
  color:#fff;
  box-shadow:0 8px 20px rgba(216,166,77,0.18);
  transform:translateY(-2px);
}
.gallery-item.hidden{opacity:0;transform:scale(.98);transition:opacity .22s ease,transform .22s ease}

.gallery-item {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 0;
  transform: scale(0.9);
}

.gallery-item.aos-animate {
  opacity: 1;
  transform: scale(1);
}

.gallery-item:hover {
  transform: scale(1.08) rotate(2deg);
  box-shadow: 0 15px 40px rgba(0,0,0,0.2);
  z-index: 10;
}

.gallery-placeholder {
  width: 100%;
  height: 100%;
  background: var(--card-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  border: 2px solid rgba(0,0,0,0.05);
}

.gallery-placeholder i {
  font-size: 48px;
  color: var(--gold);
  opacity: 0.5;
}

.gallery-placeholder p {
  font-weight: 500;
  color: var(--muted);
}

body.dark .gallery-placeholder p {
  color: rgba(255,255,255,0.7);
}

/* Campaign Section */
.campaign {
  padding: 100px 20px;
  background: linear-gradient(135deg, var(--darkred), var(--red));
  color: white;
  position: relative;
  z-index: 2;
}

.campaign h2 {
  font-size: 48px;
  margin-bottom: 20px;
  text-align: center;
  color: var(--gold);
}

.campaign p {
  font-size: 18px;
  margin-bottom: 40px;
  text-align: center;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.95;
}

.campaign-form {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.campaign-form input,
.campaign-form select,
.campaign-form textarea {
  padding: 15px;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 8px;
  font-family: 'Poppins', sans-serif;
  background: rgba(255,255,255,0.1);
  color: white;
  transition: all 0.3s ease;
  font-size: 15px;
}

.campaign-form input::placeholder,
.campaign-form select::placeholder,
.campaign-form textarea::placeholder {
  color: rgba(255,255,255,0.7);
}

.campaign-form input:focus,
.campaign-form select:focus,
.campaign-form textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255,255,255,0.15);
}

.campaign-form select {
  cursor: pointer;
}

.campaign-form select option {
  background: var(--darkred);
  color: white;
}

.campaign-form button {
  width: fit-content;
  margin: 10px auto 0;
}

/* Contact Section */
.contact {
  padding: 80px 20px;
  background: var(--bg);
  position: relative;
  z-index: 2;
}

.contact-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.contact-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.contact-item i {
  font-size: 28px;
  color: var(--gold);
  margin-top: 5px;
}

.contact-item h4 {
  color: var(--red);
  margin-bottom: 5px;
}

body.dark .contact-item h4 {
  color: var(--gold);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-form input,
.contact-form textarea {
  padding: 15px;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px;
  font-family: 'Poppins', sans-serif;
  background: var(--card-bg);
  color: var(--text);
  transition: border-color 0.3s ease, transform 0.6s ease, opacity 0.6s ease;
  opacity: 0;
  transform: translateX(20px);
}

.contact-form[data-aos].aos-animate input,
.contact-form[data-aos].aos-animate textarea {
  opacity: 1;
  transform: translateX(0);
}

.contact-form[data-aos].aos-animate input:nth-child(1) { transition-delay: 0.1s; }
.contact-form[data-aos].aos-animate input:nth-child(2) { transition-delay: 0.2s; }
.contact-form[data-aos].aos-animate input:nth-child(3) { transition-delay: 0.3s; }
.contact-form[data-aos].aos-animate textarea { transition-delay: 0.4s; }
.contact-form[data-aos].aos-animate button { transition-delay: 0.5s; }

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--gold);
}

/* Social Media Section */
.social-media {
  padding: 80px 20px;
  background: var(--bg);
  text-align: center;
  position: relative;
  z-index: 2;
}

.social-media h3 {
  font-size: 32px;
  margin-bottom: 40px;
  color: var(--red);
}

body.dark .social-media h3 {
  color: var(--gold);
}

.social-links {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.social-links a {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--darkred);
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  border: 2px solid transparent;
}

.social-links a:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  border-color: var(--gold);
}

.social-links a i {
  font-size: 24px;
}

body.dark .social-links a {
  color: var(--gold);
}

/* Page Hero */
.page-hero {
  background: linear-gradient(135deg, var(--red), var(--darkred));
  color: white;
  text-align: center;
  padding: 100px 20px 80px;
  margin-top: 0;
  position: relative;
  z-index: 1;
}

.page-hero h1 {
  font-size: 48px;
  margin-bottom: 15px;
}

.page-hero p {
  font-size: 18px;
  opacity: 0.95;
}

/* Values Section */
.values-section {
  padding: 80px 20px;
  background: var(--bg);
  position: relative;
  z-index: 2;
}

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

.value-card {
  background: var(--card-bg);
  padding: 40px 30px;
  border-radius: 12px;
  text-align: center;
  border: 1px solid rgba(0,0,0,0.05);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.value-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.value-card i {
  font-size: 48px;
  color: var(--gold);
  margin-bottom: 20px;
}

.value-card h3 {
  color: var(--red);
  margin-bottom: 15px;
}

body.dark .value-card h3 {
  color: var(--gold);
}

/* Mission Vision */
.mission-vision {
  padding: 80px 20px;
  background: var(--beige);
  position: relative;
  z-index: 2;
}

.mv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.mv-card {
  background: var(--card-bg);
  padding: 50px 40px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.05);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mv-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 50px rgba(0,0,0,0.12);
  border-color: var(--gold);
}

.mv-card i {
  font-size: 48px;
  color: var(--gold);
  margin-bottom: 20px;
}

.mv-card h2 {
  color: var(--red);
  margin-bottom: 20px;
  font-size: 32px;
}

body.dark .mv-card h2 {
  color: var(--gold);
}

.mv-card p {
  line-height: 1.8;
}

/* Contact Page Specific */
.contact-social {
  margin-top: 30px;
}

.contact-social h4 {
  color: var(--red);
  margin-bottom: 15px;
}

body.dark .contact-social h4 {
  color: var(--gold);
}

.contact-social .social-links {
  justify-content: flex-start;
}

/* FAQ */
/* Personal profile box on about page */
.person-profile {
  background: var(--card-bg);
  padding: 20px 24px;
  border-radius: 8px;
  margin-top: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease 0.4s;
}

[data-aos].aos-animate .person-profile {
  opacity: 1;
  transform: translateY(0);
}

.person-profile h3 {
  margin-bottom: 12px;
  color: var(--red);
}
.person-profile ul {
  list-style-type: disc;
  padding-left: 20px;
  color: var(--text);
}

.person-profile li {
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.4s ease;
}

[data-aos].aos-animate .person-profile li:nth-child(1) { transition-delay: 0.5s; }
[data-aos].aos-animate .person-profile li:nth-child(2) { transition-delay: 0.6s; }
[data-aos].aos-animate .person-profile li:nth-child(3) { transition-delay: 0.7s; }

[data-aos].aos-animate .person-profile li {
  opacity: 1;
  transform: translateX(0);
}

.faq {
  background: var(--beige);
  padding: 60px 0;
}
.faq .faq-list details {
  background: var(--card-bg);
  border: 1px solid var(--muted);
  border-radius: 6px;
  margin-bottom: 12px;
  padding: 12px 16px;
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.5s ease;
}

.faq-list[data-aos].aos-animate details {
  opacity: 1;
  transform: translateX(0);
}

.faq-list[data-aos].aos-animate details:nth-child(1) { transition-delay: 0.1s; }
.faq-list[data-aos].aos-animate details:nth-child(2) { transition-delay: 0.2s; }
.faq-list[data-aos].aos-animate details:nth-child(3) { transition-delay: 0.3s; }
.faq .faq-list summary {
  cursor: pointer;
  font-weight: 600;
  position: relative;
  list-style: none;
}
.faq .faq-list summary::marker { display: none; }
.faq .faq-list summary::after {
  content: '+';
  position: absolute;
  right: 0;
  font-size: 18px;
}
.faq .faq-list details[open] summary::after { content: '–'; }
.faq .faq-list p {
  margin-top: 8px;
  line-height: 1.5;
}

/* Footer */
footer {
  background: linear-gradient(135deg, var(--darkred), #6d1820);
  color: white;
  padding: 60px 20px 20px;
  position: relative;
  z-index: 2;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.footer-section h3 {
  color: var(--gold);
  margin-bottom: 15px;
  font-size: 24px;
}

.footer-section h4 {
  color: var(--gold);
  margin-bottom: 15px;
  font-size: 18px;
}

.footer-section p {
  opacity: 0.9;
  margin-bottom: 10px;
}

.footer-section a {
  display: block;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  margin-bottom: 8px;
  transition: color 0.3s ease;
}

.footer-section a:hover {
  color: var(--gold);
}

.footer-bottom {
  text-align: center;
  padding-top: 30px;
}

.footer-bottom p {
  opacity: 0.8;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .about-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  nav {
    position: fixed;
    inset: 70px 0 0 0;
    left: 0;
    width: 100%;
    height: calc(100vh - 70px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(0,0,0,0.04), rgba(244,232,216,0.95));
    backdrop-filter: blur(6px);
    transform: translateY(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 320ms ease, transform 320ms ease;
    z-index: 999;
    flex-direction: column;
    padding: 40px 20px;
    gap: 18px;
  }

  nav.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .mobile-menu {
    display: block;
  }

  /* Centered large links with staggered entrance */
  nav a {
    font-size: 22px;
    padding: 12px 0;
    opacity: 0;
    transform: translateY(12px) scale(.995);
    transition: opacity .36s ease, transform .36s ease;
    color: var(--dark);
  }

  nav.active a { opacity: 1; transform: none; }
  nav.active a:nth-child(1){ transition-delay: 0.06s }
  nav.active a:nth-child(2){ transition-delay: 0.12s }
  nav.active a:nth-child(3){ transition-delay: 0.18s }
  nav.active a:nth-child(4){ transition-delay: 0.24s }

  .hero h1 { font-size: 36px; }
  .hero p { font-size: 16px; }

/* Hamburger open state */
.mobile-menu { transition: transform .28s ease, box-shadow .28s ease; }
.mobile-menu.open { transform: rotate(6deg) scale(1.04); box-shadow: 0 12px 30px rgba(0,0,0,0.14); }

/* Prevent background scroll when menu open */
body.menu-open { overflow: hidden; }
  
  .title h2 {
    font-size: 32px;
  }
  

  
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .projects-grid {
    grid-template-columns: 1fr;
  }
  
  .work-grid {
    grid-template-columns: 1fr;
  }
  
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .contact-content {
    grid-template-columns: 1fr;
  }
  
  .campaign h2 {
    font-size: 32px;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .footer-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .values-grid {
    grid-template-columns: 1fr;
  }
  
  .mv-grid {
    grid-template-columns: 1fr;
  }
  
  .page-hero h1 {
    font-size: 36px;
  }
}

@media (max-width: 480px) {
  header {
    padding: 12px 4%;
  }
  
  .logo {
    font-size: 18px;
  }
  
  .controls {
    gap: 10px;
  }
  
  .lang-toggle button {
    padding: 6px 10px;
    font-size: 14px;
  }
  
  .hero {
    padding: 80px 15px 60px;
  }
  
  .hero h1 {
    font-size: 28px;
  }
  
  .hero-badge {
    font-size: 13px;
    padding: 8px 20px;
  }
  
  .hero-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .hero-actions .cta-btn {
    width: 100%;
    max-width: 300px;
  }
  
  .journey-section {
    padding: 60px 15px;
  }
  
  .journey-timeline {
    padding: 20px 0;
  }
  
  .timeline-path {
    left: 30px;
  }
  
  .timeline-milestone {
    flex-direction: column !important;
    align-items: flex-start;
    padding-left: 60px;
    margin-bottom: 60px;
  }
  
  .milestone-dot {
    left: 30px;
  }
  
  .milestone-content {
    width: 100%;
    margin: 0 !important;
  }
  
  .title h2 {
    font-size: 26px;
  }
  
  .gallery-grid {
    grid-template-columns: 1fr;
  }
  
  .about-values {
    flex-direction: column;
    gap: 20px;
  }
  
  .campaign-actions {
    flex-direction: column;
  }
  
  .campaign-actions .cta-btn {
    width: 100%;
  }
  
  .page-hero h1 {
    font-size: 28px;
  }
  
  .page-hero {
    padding: 80px 15px 60px;
  }
}