:root {
  --heading-font: "Unbounded", cursive;
  --body-font: "Plus Jakarta Sans", sans-serif;
  --primary-color: #2e7d32;
  --secondary-color: #ffd700;
  --border-color: #e5e5e5;
  --hover-bg: #f8f9fa;
  --green-primary: #2e7d32;
  --green-light: #4caf50;
  --yellow-primary: #ffd700;
  --yellow-light: #ffe033;
  --dark: #1e280a;
  --white: #ffffff;
}

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

body {
  font-family: var(--body-font);
  line-height: 1.5;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Core Layout */

/* Enhanced Top Banner with Animated Gradients */
.top-banner {
  background-color: var(--primary-color);
  color: white;
  padding: 12px 0;
  font-size: 15px;
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.top-banner::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  background: radial-gradient(
      circle at 50% 50%,
      rgba(255, 215, 0, 0.15),
      transparent 50%
    ),
    radial-gradient(
      circle at 100% 100%,
      rgba(255, 255, 255, 0.1),
      transparent 40%
    ),
    radial-gradient(circle at 0% 0%, rgba(255, 215, 0, 0.15), transparent 30%),
    radial-gradient(
      circle at 100% 0%,
      rgba(255, 255, 255, 0.1),
      transparent 50%
    ),
    radial-gradient(circle at 0% 100%, rgba(255, 215, 0, 0.15), transparent 40%);
  animation: gradientMove 15s ease infinite;
  z-index: 1;
}

.top-banner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    rgba(46, 125, 50, 0.97) 0%,
    rgba(46, 125, 50, 0.95) 50%,
    rgba(46, 125, 50, 0.97) 100%
  );
  z-index: 2;
}

@keyframes gradientMove {
  0% {
    transform: scale(1) rotate(0deg);
  }
  33% {
    transform: scale(1.2) rotate(120deg);
  }
  66% {
    transform: scale(1.1) rotate(240deg);
  }
  100% {
    transform: scale(1) rotate(360deg);
  }
}

.top-banner .container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
}

.top-banner__text {
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.top-banner__link {
  color: var(--secondary-color);
  text-decoration: none;
  font-weight: 600;
  margin-left: 16px;
  padding: 6px 18px;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 215, 0, 0.3);
  display: inline-flex;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.top-banner__link:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 215, 0, 0.5);
}

.top-banner__link::after {
  content: "→";
  margin-left: 8px;
  transition: transform 0.3s ease;
  font-size: 1.1em;
}

.top-banner__link:hover::after {
  transform: translateX(4px);
}

/* Mobile Styles */
@media screen and (max-width: 768px) {
  .top-banner {
    padding: 10px 0;
  }

  .top-banner__text {
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .top-banner__link {
    margin-left: 0;
    padding: 5px 16px;
    font-size: 14px;
  }
}

@media screen and (max-width: 480px) {
  .top-banner {
    font-size: 13px;
  }

  .top-banner__text {
    padding: 0 12px;
  }

  .top-banner__link {
    padding: 4px 14px;
  }
}

/* Hero Section */
.hero {
  min-height: calc(100vh - 70px);
  background: linear-gradient(135deg, #1e280a 0%, #243311 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  padding: 60px 0;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(
      rgba(30, 40, 10, 0.9),
      rgba(30, 40, 10, 0.9)
    ),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.4;
  z-index: 1;
}

.hero__visual-elements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 2;
}

.hero__circle {
  position: absolute;
  border: 2px solid rgba(255, 215, 0, 0.1);
  border-radius: 50%;
}

.hero__circle-1 {
  width: 300px;
  height: 300px;
  top: -150px;
  right: -150px;
  animation: rotate 30s linear infinite;
}

.hero__circle-2 {
  width: 200px;
  height: 200px;
  bottom: -100px;
  left: -100px;
  animation: rotate 20s linear infinite reverse;
}

.hero__line {
  position: absolute;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 215, 0, 0.1),
    transparent
  );
  height: 1px;
  width: 100%;
}

.hero__line-1 {
  top: 20%;
  animation: slideLine 15s linear infinite;
}

.hero__line-2 {
  bottom: 30%;
  animation: slideLine 15s linear infinite reverse;
}

.hero__shape-1 {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFD700' fill-opacity='0.1' d='M45.3,-59.1C58.9,-51.1,70.3,-37.4,74.3,-21.7C78.3,-6,74.9,11.7,67.8,27.5C60.7,43.3,49.9,57.2,35.8,64.8C21.7,72.4,4.3,73.7,-12.4,70.9C-29.1,68.1,-45.1,61.2,-57.4,49.2C-69.7,37.2,-78.3,20.1,-78.7,2.7C-79.1,-14.7,-71.3,-32.4,-58.7,-40.4C-46.1,-48.4,-28.7,-46.7,-13.5,-48.1C1.7,-49.5,31.7,-67.1,45.3,-59.1Z' transform='translate(100 100)'/%3E%3C/svg%3E")
    no-repeat center center;
  background-size: contain;
}

.hero__shape-2 {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%232E7D32' fill-opacity='0.1' d='M42.7,-62.9C50.9,-53.7,50.1,-35.6,51.7,-20.5C53.3,-5.4,57.3,6.7,56.6,19.9C55.9,33.1,50.4,47.4,39.8,56.3C29.2,65.2,13.6,68.7,-2.4,71.8C-18.4,74.9,-36.8,77.6,-48.4,69.4C-60,61.2,-64.8,42.1,-69.7,23.7C-74.6,5.3,-79.5,-12.4,-74.1,-27.2C-68.7,-42,-52.9,-53.8,-37.8,-60.1C-22.7,-66.4,-8.3,-67.1,5.9,-65.1C20.1,-63.1,34.5,-72.1,42.7,-62.9Z' transform='translate(100 100)'/%3E%3C/svg%3E")
    no-repeat center center;
  background-size: contain;
}

.hero__shape-3 {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFFFFF' fill-opacity='0.05' d='M47.7,-67.1C62.9,-59.6,77,-46.8,82.4,-31.1C87.8,-15.4,84.4,3.2,77.8,19.9C71.1,36.6,61.1,51.5,47.3,60.7C33.5,69.9,16.8,73.5,0.2,73.2C-16.4,72.9,-32.7,68.7,-46.6,59.6C-60.4,50.5,-71.7,36.5,-76.9,20.1C-82.1,3.7,-81.2,-15,-73.1,-29.7C-65,-44.3,-49.8,-54.9,-35,-61.9C-20.2,-68.9,-5.9,-72.3,6.9,-71.8C19.7,-71.3,32.5,-74.6,47.7,-67.1Z' transform='translate(100 100)'/%3E%3C/svg%3E")
    no-repeat center center;
  background-size: contain;
}

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

@keyframes slideLine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.hero .container {
  position: relative;
  z-index: 3;
}

.hero__content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.hero__title {
  font-family: var(--heading-font);
  font-size: 4.5rem;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  font-weight: normal;
  background: linear-gradient(
    45deg,
    #ffffff 0%,
    var(--secondary-color) 50%,
    #ffffff 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient 8s ease infinite;
  text-shadow: 0 0 30px rgba(255, 215, 0, 0.2);
}

.hero__title-highlight {
  display: block;
  font-size: 4.5rem;
  font-weight: normal;
  background: linear-gradient(
    45deg,
    var(--secondary-color) 0%,
    #ffffff 50%,
    var(--secondary-color) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5rem;
  animation: gradient 8s ease infinite reverse;
  text-shadow: 0 0 30px rgba(255, 215, 0, 0.2);
}

.hero__description {
  font-size: 1.25rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 2.5rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease forwards 0.3s;
}

.hero__cta {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 2rem;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease forwards 0.6s;
}

.btn {
  padding: 1.2rem 2.5rem;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 4;
}

.btn--primary {
  background: linear-gradient(45deg, var(--secondary-color), #ffe033);
  color: #1e280a;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.btn--primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 25px rgba(255, 215, 0, 0.4);
}

.btn--secondary {
  background: rgba(255, 255, 255, 0.05);
  color: var(--secondary-color);
  border: 1.5px solid var(--secondary-color);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn--secondary:hover {
  background: var(--secondary-color);
  color: #1e280a;
  transform: translateY(-3px) scale(1.02);
}

.btn-arrow {
  transition: transform 0.3s ease;
}

.btn:hover .btn-arrow {
  transform: translateX(4px);
}

/* Enhanced Background Elements */
.hero__background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.hero__shape-1 {
  background: radial-gradient(
    circle,
    var(--secondary-color) 0%,
    rgba(255, 215, 0, 0) 70%
  );
  width: 600px;
  height: 600px;
  top: -200px;
  left: -200px;
  opacity: 0.15;
  animation: floatSlow 20s ease-in-out infinite;
}

.hero__shape-2 {
  background: radial-gradient(
    circle,
    var(--primary-color) 0%,
    rgba(46, 125, 50, 0) 70%
  );
  width: 500px;
  height: 500px;
  top: 40%;
  right: -100px;
  opacity: 0.12;
  animation: floatSlow 15s ease-in-out infinite reverse;
}

.hero__shape-3 {
  background: linear-gradient(
    45deg,
    var(--secondary-color),
    var(--primary-color)
  );
  width: 300px;
  height: 300px;
  bottom: -100px;
  left: 20%;
  opacity: 0.1;
  animation: floatSlow 18s ease-in-out infinite;
}

.hero__shape-4 {
  background: radial-gradient(circle, #ffffff 0%, rgba(255, 255, 255, 0) 70%);
  width: 400px;
  height: 400px;
  top: 20%;
  left: 30%;
  opacity: 0.05;
  animation: pulse 10s ease-in-out infinite;
}

/* Add a subtle grain texture */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
  opacity: 0.15;
  pointer-events: none;
  z-index: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero__title,
  .hero__title-highlight {
    font-size: 2.8rem;
    line-height: 1.2;
  }

  .hero__description {
    font-size: 1.1rem;
    padding: 0 20px;
    max-width: 100%;
    margin-bottom: 2rem;
  }

  .hero__cta {
    flex-direction: column;
    padding: 0 20px;
    gap: 1rem;
    width: 90%;
    margin: 0 auto;
  }

  /* Adjust floating icons for mobile */
  .floating-icon {
    width: 30px;
    height: 30px;
  }

  .heart-icon {
    top: 10%;
    right: 10%;
  }

  .hands-icon {
    bottom: 15%;
    left: 10%;
  }

  .earth-icon {
    top: 20%;
    left: 15%;
  }

  /* Optimize particles for mobile */
  .particles {
    opacity: 0.5;
  }

  .particle {
    width: 4px;
    height: 4px;
  }

  /* Adjust wave animation */
  .wave {
    height: 50px;
    background-size: 720px 50px;
  }

  /* Enhance button styles for mobile */
  .btn {
    padding: 1rem 1.8rem;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    font-size: 1rem;
  }

  /* Adjust background shapes */
  .hero__shape-1,
  .hero__shape-2,
  .hero__shape-3,
  .hero__shape-4 {
    opacity: 0.08;
    transform: scale(0.7);
  }
}

@media (max-width: 480px) {
  .hero__title,
  .hero__title-highlight {
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }

  .hero__description {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
  }

  /* Further optimize visual elements */
  .floating-icon {
    width: 24px;
    height: 24px;
  }

  /* Adjust animations for better performance */
  @keyframes floatIcon {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  /* Reduce particle count for better performance */
  .particles .particle:nth-child(odd) {
    display: none;
  }
}

/* Enhanced animations for better performance */
@keyframes smoothFloat {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.6;
  }
  50% {
    transform: translate(0, -15px) rotate(2deg);
    opacity: 0.8;
  }
}

@keyframes gentlePulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

/* Apply optimized animations */
.floating-icon {
  animation: smoothFloat 4s ease-in-out infinite;
}

.floating-icon svg {
  animation: gentlePulse 3s ease-in-out infinite;
}

/* Add smooth transitions */
.hero__content {
  transition: all 0.3s ease-out;
}

.btn {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Optimize container padding */
.hero .container {
  padding: 40px 20px;
}

/* Add touch-friendly hover states */
@media (hover: hover) {
  .btn:hover {
    transform: translateY(-2px);
  }
}

/* Improve loading performance */
.hero {
  content-visibility: auto;
  contain: layout style paint;
}

/* Add smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Optimize animations for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .floating-icon,
  .particle,
  .sparkle,
  .wave {
    animation: none;
  }

  .btn:hover {
    transform: none;
  }
}

/* Enhanced Button Styles */
.btn {
  padding: 1.2rem 2.5rem;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  letter-spacing: 0.5px;
}

.btn--primary {
  background: linear-gradient(45deg, var(--secondary-color), #ffe033);
  color: #1e280a;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.btn--primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 25px rgba(255, 215, 0, 0.4);
}

.btn--secondary {
  background: rgba(255, 255, 255, 0.05);
  color: var(--secondary-color);
  border: 1.5px solid var(--secondary-color);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn--secondary:hover {
  background: var(--secondary-color);
  color: #1e280a;
  transform: translateY(-3px) scale(1.02);
}

/* Enhanced Animations */
@keyframes floatSlow {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(20px, -20px) rotate(5deg);
  }
  50% {
    transform: translate(-10px, 20px) rotate(-5deg);
  }
  75% {
    transform: translate(-20px, -10px) rotate(3deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 0.05;
  }
  50% {
    transform: scale(1.2) rotate(180deg);
    opacity: 0.08;
  }
  100% {
    transform: scale(1) rotate(360deg);
    opacity: 0.05;
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

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

/* Add a subtle grain texture */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
  opacity: 0.15;
  pointer-events: none;
  z-index: 1;
}

/* Add scroll reveal animation */
.reveal-text,
.reveal-buttons {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease;
}

.reveal-text.active,
.reveal-buttons.active {
  opacity: 1;
  transform: translateY(0);
}

/* Ensure buttons are visible */
.hero__cta {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 2rem;
}

.btn {
  position: relative;
  z-index: 4;
}

/* NGO-themed animated elements */
.floating-icon {
  position: absolute;
  z-index: 2;
  color: var(--secondary-color);
  opacity: 0.6;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.3));
}

.heart-icon {
  top: 20%;
  right: 15%;
  animation: floatIcon 6s ease-in-out infinite;
}

.hands-icon {
  bottom: 25%;
  left: 10%;
  animation: floatIcon 8s ease-in-out infinite reverse;
}

.earth-icon {
  top: 30%;
  left: 20%;
  animation: floatIcon 7s ease-in-out infinite;
}

/* Pulse effect for icons */
.floating-icon svg {
  animation: pulse 2s ease-in-out infinite;
}

/* Add animated particles */
.particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--secondary-color);
  border-radius: 50%;
  opacity: 0.3;
}

/* Add animated wave */
.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23FFD700' fill-opacity='0.1' d='M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E")
    repeat-x;
  background-size: 1440px 100px;
  animation: waveMove 20s linear infinite;
}

/* Animation keyframes */
@keyframes floatIcon {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

@keyframes waveMove {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 1440px;
  }
}

/* Add sparkle effect */
.sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: white;
  opacity: 0;
  pointer-events: none;
}

.sparkle-animation {
  animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: scale(1) rotate(180deg);
    opacity: 0.8;
  }
  100% {
    transform: scale(0) rotate(360deg);
    opacity: 0;
  }
}

/* Add this JavaScript to create particles and sparkles */

.logo-animation {
  padding: 3rem 0;
  background: #fff;
  max-width: 100%;
  overflow: hidden;
}

.logo-animation__title {
  text-align: center;
  margin-bottom: 3rem;
  font-size: 2rem;
  color: #333;
}

.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #fff;
  padding: 1rem 0;
}

.marquee-content {
  display: flex;
  animation: scroll 40s linear infinite;
  gap: 3rem;
  align-items: center;
}

.logo-wrapper {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 8px;
  padding: 1rem;
  /* Adjusted dimensions */
  width: 180px;
  height: 90px;
  transition: transform 0.3s ease;
}

.logo-wrapper:hover {
  transform: scale(1.05);
}

.logo-animation__logo {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(0%); /* Remove grayscale for colored logos */
}

/* Responsive adjustments */
@media (min-width: 1400px) {
  .logo-wrapper {
    width: 220px;
    height: 110px;
  }
}

@media (max-width: 1200px) {
  .logo-wrapper {
    width: 160px;
    height: 80px;
  }
}

@media (max-width: 768px) {
  .logo-wrapper {
    width: 140px;
    height: 70px;
  }

  .marquee-content {
    gap: 2rem;
  }
}

@media (max-width: 576px) {
  .logo-wrapper {
    width: 120px;
    height: 60px;
  }

  .marquee-content {
    gap: 1.5rem;
  }
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100% - 3rem)); /* Adjusted for gap */
  }
}

/* Optional: Pause animation on hover */
.marquee:hover .marquee-content {
  animation-play-state: paused;
}

/* Add smooth shadow effect */
.logo-wrapper {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.about {
  padding: 120px 40px;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

/* Decorative elements */
.about::before {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  background: linear-gradient(45deg, var(--primary-color), transparent);
  border-radius: 50%;
  top: -250px;
  left: -250px;
  opacity: 0.05;
}

.about__header {
  max-width: 1200px;
  margin: 0 auto 80px;
  position: relative;
}

.about__title {
  font-family: var(--heading-font);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.2;
  margin-bottom: 30px;
  color: #2c3e50;
  font-weight: normal;
}

.about__title-small {
  display: block;
  font-size: 1.2rem;
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 15px;
  font-weight: 500;
}

.about__button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(46, 125, 50, 0.2);
}

.about__button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(46, 125, 50, 0.3);
}

.about__button i {
  transition: transform 0.3s ease;
}

.about__button:hover i {
  transform: translateX(5px);
}

.about__media-container {
  max-width: 1200px;
  margin: 0 auto 24px;
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.about__image {
  width: 100%;
  height: 600px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.about__media-container:hover .about__image {
  transform: scale(1.02);
}

.about__media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
}

.about__media-caption {
  position: absolute;
  bottom: 30px;
  left: 30px;
  color: white;
  font-size: 1.2rem;
  font-weight: 500;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.about__content {
  max-width: 1200px;
  margin: 0 auto;
}

.about__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-bottom: 60px;
}

.stat-item {
  text-align: center;
  padding: 30px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

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

.stat-number {
  display: block;
  font-size: 3rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 10px;
}

.stat-label {
  font-size: 1.1rem;
  color: #666;
}

.about__description {
  font-size: 1.6rem;
  line-height: 1.8;
  color: #555;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  padding: 0 20px;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
  .about {
    padding: 60px 20px;
  }

  .about__image {
    height: 400px;
  }

  .about__stats {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .stat-item {
    padding: 20px;
  }

  .about__description {
    font-size: 1.1rem;
  }
}

/* Add this to your JavaScript */
@keyframes countUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.projects {
  padding: 100px 40px;
  background: #0a0a0a;
  position: relative;
}

.projects__header {
  max-width: 1200px;
  margin: 0 auto 80px;
  text-align: left;
}

.projects__subtitle {
  color: #4caf50;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 20px;
  font-weight: 500;
  display: block;
}

.projects__title {
  font-size: 3.5rem;
  font-weight: normal;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 30px;
  font-family: var(--heading-font);
}

.projects__wrapper {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding: 20px;
}

.project__card {
  background: linear-gradient(145deg, #151515, #0a0a0a);
  border-radius: 30px;
  padding: 3px;
  position: relative;
  transition: all 0.4s ease;
  overflow: hidden;
}

.project__card-inner {
  background: #0a0a0a;
  border-radius: 28px;
  overflow: hidden;
  height: 100%;
}

.project__image-wrapper {
  height: 280px;
  position: relative;
  overflow: hidden;
}

.project__image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}

.project__card:hover .project__image-wrapper img {
  transform: scale(1.1);
}

.project__content {
  padding: 35px;
  position: relative;
}

.project__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(76, 175, 80, 0.1);
  color: #4caf50;
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 25px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(76, 175, 80, 0.2);
}

.project__tag i {
  font-size: 1rem;
}

.project__title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
  line-height: 1.3;
  background: linear-gradient(45deg, #fff, #a0a0a0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.project__description {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 30px;
}

.project__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.stat {
  background: rgba(255, 255, 255, 0.03);
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 0.3s ease;
}

.stat:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.05);
}

.stat__number {
  font-size: 2rem;
  font-weight: 700;
  color: #4caf50;
  line-height: 1;
  margin-bottom: 8px;
  background: linear-gradient(45deg, #4caf50, #81c784);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat__label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.project__link {
  color: #4caf50;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  background: rgba(76, 175, 80, 0.1);
  border-radius: 100px;
  transition: all 0.3s ease;
  border: 1px solid rgba(76, 175, 80, 0.2);
}

.project__link:hover {
  background: rgba(76, 175, 80, 0.15);
  gap: 15px;
}

.project__link i {
  font-size: 1.2rem;
}

/* Card hover effects */
.project__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(225deg, #4caf50, transparent 50%);
  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: 30px;
}

.project__card:hover::before {
  opacity: 0.1;
}

.project__card:hover {
  transform: translateY(-10px);
}

/* Image overlay */
.project__image-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.8) 100%
  );
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.project__card:hover .project__image-wrapper::after {
  opacity: 0.7;
}

@media (max-width: 1200px) {
  .projects__wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .projects {
    padding: 60px 20px;
  }

  .projects__wrapper {
    grid-template-columns: 1fr;
    max-width: 500px;
  }

  .projects__title {
    font-size: 2.5rem;
  }

  .project__content {
    padding: 25px;
  }

  .project__title {
    font-size: 1.5rem;
  }

  .project__image-wrapper {
    height: 240px;
  }

  .stat__number {
    font-size: 1.8rem;
  }

  .project__stats {
    gap: 15px;
  }

  .stat {
    padding: 15px;
  }
}

/* Tabs Section */
.tabs {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  padding: 100px 40px;
  position: relative;
  overflow: hidden;
}

.tabs::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    rgba(76, 175, 80, 0.05) 0%,
    transparent 70%
  );
  top: -200px;
  right: -200px;
  border-radius: 50%;
}

/* Section Header */
.tabs__heading {
  text-align: left;
  max-width: 1200px;
  margin: 0 auto 60px;
}

.tabs__heading h2 {
  font-size: clamp(3.5rem, 5vw, 3.2rem);
  color: var(--dark);
  margin-bottom: 20px;
  line-height: 1.2;
  background: linear-gradient(45deg, var(--primary-color), var(--green-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tabs__heading p {
  font-size: 1.1rem;
  color: #666;
  line-height: 1.6;
}

/* Tab Navigation */
.tabs__header {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 50px;
  position: relative;
  padding: 5px;
  background: rgba(76, 175, 80, 0.05);
  border-radius: 100px;
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.tab__button {
  padding: 12px 24px;
  background: transparent;
  border: none;
  color: #666;
  font-weight: 600;
  font-size: 0.95rem;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 100px;
}

/* Remove the underline effect */
.tab__button::after {
  display: none;
}

.tab__button:hover {
  color: var(--primary-color);
  background: rgba(76, 175, 80, 0.05);
}

.tab__button.active {
  color: white;
  background: var(--primary-color);
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.2);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .tabs__header {
    gap: 10px;
    padding: 4px;
  }

  .tab__button {
    padding: 10px 20px;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .tab__button {
    padding: 8px 16px;
    font-size: 0.7rem;
  }
}

/* Content Container */
.tabs__content {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.tab__panel {
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.tab__panel.active {
  display: block;
  opacity: 1;
}

/* Card Container */
.tab__cards {
  display: flex;
  gap: 25px;
  padding: 20px 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

/* Card Design */
.tab__card {
  min-width: 320px;
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  scroll-snap-align: start;
}

.tab__card-media {
  height: 200px;
  position: relative;
  overflow: hidden;
}

.tab__card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.2) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tab__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.tab__card-content {
  padding: 25px;
}

.tab__card-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(76, 175, 80, 0.08);
  color: var(--primary-color);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 15px;
}

.tab__card-title {
  font-size: 1.3rem;
  color: var(--dark);
  margin-bottom: 10px;
  line-height: 1.3;
}

.tab__card-description {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tab__card-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: transparent;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  text-decoration: none;
}

/* Enhanced Hover Effects */
.tab__card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.tab__card:hover .tab__card-media img {
  transform: scale(1.08);
}

.tab__card:hover .tab__card-media::after {
  opacity: 1;
}

.tab__card:hover .tab__card-button {
  background: var(--primary-color);
  color: white;
}

/* Responsive Design */
@media (max-width: 992px) {
  .tabs {
    padding: 80px 30px;
  }
}

@media (max-width: 768px) {
  .tabs {
    padding: 60px 20px;
  }

  .tabs__content {
    padding: 0 30px;
  }

  .tab__card {
    min-width: 280px;
  }

  .tab__card-media {
    height: 180px;
  }

  .tab__card-content {
    padding: 20px;
  }

  .tabs__header {
    gap: 20px;
  }

  .tab__button {
    padding: 12px 20px;
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .tabs__content {
    padding: 0 20px;
  }

  .tab__card {
    min-width: 260px;
  }

  .tab__card-title {
    font-size: 1.2rem;
  }
}

/* Scroll Indicators */
.scroll-indicator {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  z-index: 10;
  border: 1px solid rgba(76, 175, 80, 0.1);
}

.scroll-indicator i {
  color: var(--primary-color);
  font-size: 1rem;
  transition: all 0.3s ease;
}

.scroll-left {
  left: -22px;
  padding-right: 3px;
}

.scroll-right {
  right: -22px;
  padding-left: 3px;
}

.scroll-indicator:hover {
  background: var(--primary-color);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 8px 20px rgba(76, 175, 80, 0.2);
}

.scroll-indicator:hover i {
  color: white;
}

/* Mobile Styles */
@media (max-width: 768px) {
  .scroll-indicator {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
  }

  .scroll-left {
    left: 5px;
  }

  .scroll-right {
    right: 5px;
  }

  .scroll-indicator i {
    font-size: 0.9rem;
  }
}

/* Help Us Section */
.help-us {
  padding: 80px 40px;
  background: linear-gradient(
      -45deg,
      rgba(30, 40, 10, 0.98),
      rgba(26, 35, 8, 0.95)
    ),
    url("https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?q=80")
      center/cover fixed;
  position: relative;
  overflow: hidden;
}

.help-us::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("assets/images/pattern.svg") repeat;
  opacity: 0.05;
  animation: floatBackground 20s linear infinite;
}

.help-us__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  position: relative;
  padding-top: 0;
  margin-top: 0;
}

.help-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.03)
  );
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border-radius: 30px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.help-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.help-card__content {
  padding: 40px;
}

.help-card__icon {
  width: 60px;
  height: 60px;
  background: #a3ff12;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  animation: pulse 2s infinite;
}

.help-card__icon i {
  font-size: 24px;
  color: #1e280a;
}

.help-card h2 {
  font-family: "Unbounded", sans-serif;
  font-size: 32px;
  margin-bottom: 20px;
  background: linear-gradient(45deg, #fff, #a3ff12);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.help-card p {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 30px;
  line-height: 1.6;
}

.help-card__stats {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
}

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

.help-stat__number {
  display: block;
  font-family: "Unbounded", sans-serif;
  font-size: 2rem;
  color: #a3ff12;
  margin-bottom: 5px;
}

.help-stat__label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
}

.help-card__button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  background: linear-gradient(45deg, var(--primary-light), var(--accent-green));
  color: #b5d476;
  text-decoration: none;
  border-radius: 30px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  transition: transform 0.3s ease;
  box-shadow: 0 4px 15px rgba(163, 255, 18, 0.2);
}

.help-card__button:hover {
  transform: translateX(5px);
}

.help-card__button i {
  transition: transform 0.3s ease;
}

.help-card__button:hover i {
  transform: translateX(5px);
}

.help-card__image {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.help-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.help-card:hover .help-card__image img {
  transform: scale(1.1);
}

/* Responsive Design */
@media (max-width: 992px) {
  .help-us__grid {
    grid-template-columns: 1fr;
  }

  .help-card h2 {
    font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .help-us {
    padding: 60px 20px;
  }

  .help-card__content {
    padding: 30px;
  }

  .help-card__image {
    height: 200px;
  }
}

@keyframes floatBackground {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 100%;
  }
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  border-radius: 20px;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Fix overflow issues */
body {
  overflow-x: hidden;
  width: 100%;
}

section {
  width: 100%;
  overflow: hidden;
}

/* Add these responsive adjustments */
@media (max-width: 768px) {
  /* Adjust grid layouts */
  .help-us__grid,
  .partner-us__grid,
  .testimonials__grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0;
  }

  /* Adjust timeline layout */
  .ourjourney__timeline__item {
    flex-direction: column;
    gap: 15px;
    padding-left: 15px;
  }

  .ourjourney__timeline__item__date {
    width: 100%;
    text-align: left;
  }

  /* Adjust padding */
  .help-card__content,
  .partner-us__form-container,
  .testimonial__card {
    padding: 20px;
  }

  /* Adjust section padding */
  .ourjourney__container,
  .help-us,
  .partner-us,
  .ourjourney__testimonials,
  .ourjourney__faq {
    padding: 60px 0;
  }

  /* Fix image heights */
  .help-card__image,
  .partner-us__image {
    height: 200px;
  }
}

/* Fix grid gaps */
.help-us__grid,
.partner-us__grid,
.testimonials__grid {
  gap: clamp(20px, 3vw, 40px);
}

/* Fix image containers */
img {
  height: auto;
  display: block;
}

/* Add these to prevent overflow */
* {
  max-width: 100vw;
  box-sizing: border-box;
}

section {
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
}

.video-wrapper {
  max-width: 100%;
}

/* Fix form elements */
input,
textarea,
button {
  max-width: 100%;
}

/* Fix grid items */
.help-card,
.testimonial__card,
.partner-us__form-container {
  width: 100%;
  max-width: 100%;
}

.help-us__heading {
  display: none;
}

.help-us__heading h2 {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  margin-bottom: 20px;
  background: linear-gradient(45deg, #fff, #a3ff12);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--heading-font);
}

.help-us__heading p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .help-us__heading {
    margin-bottom: 40px;
  }

  .help-us__heading h2 {
    font-size: 2.2rem;
  }

  .help-us__heading p {
    font-size: 1rem;
  }
}

/* Stats Section */
.stats {
  padding: 100px 0;
  background: #f8f9fa;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.stats__heading {
  /* max-width: 600px; */
  margin-bottom: 0; /* Remove bottom margin since we're using gap */
}

.stats__heading h2 {
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 20px;
}

.stats__heading p {
  font-size: 1.2rem;
  color: #666;
  line-height: 1.6;
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  width: 100%;
}

.stat-card {
  display: flex;
  align-items: center;
  background: white;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

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

.stat-card__icon {
  width: 80px;
  height: 80px;
  background: var(--primary-color);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 30px;
}

.stat-card__icon i {
  font-size: 32px;
  color: white;
}

.stat-card__content {
  flex: 1;
}

.stat-card__number {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 5px;
  line-height: 1;
}

.stat-card__label {
  font-size: 1.1rem;
  color: #666;
  font-weight: 500;
  margin-left: 8px;
}

@media (max-width: 992px) {
  .stats__grid {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin: 0 auto;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .stats {
    padding: 60px 0;
  }

  .container {
    padding: 0 20px;
  }

  .stats__heading {
    margin-bottom: 40px;
  }

  .stats__heading h2 {
    font-size: 2.5rem;
  }

  .stat-card {
    padding: 20px;
  }

  .stat-card__icon {
    width: 60px;
    height: 60px;
    margin-right: 20px;
  }

  .stat-card__icon i {
    font-size: 24px;
  }

  .stat-card__number {
    font-size: 2.2rem;
  }

  .stat-card__label {
    font-size: 1rem;
  }
}

/* Featured Stories Section */
.featured-stories {
  padding: 120px 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  position: relative;
}

.featured-stories__heading {
  text-align: left;
  margin-bottom: 80px;
}

.featured-stories__heading h2 {
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 20px;
}

.featured-stories__heading p {
  font-size: 1.2rem;
  color: #666;
  max-width: 600px;
  line-height: 1.6;
}

.featured-stories__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.story-card {
  background: white;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  height: 500px; /* Fixed height for consistent look */
}

.story-card:hover {
  transform: translateY(-15px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
}

.story-card__image {
  position: relative;
  height: 60%;
  overflow: hidden;
}

.story-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.story-card:hover .story-card__image img {
  transform: scale(1.1);
}

.story-card__tag {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--primary-color);
  border-radius: 30px;
  font-size: 0.9rem;
  font-weight: 600;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.story-card__content {
  padding: 30px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  transform: translateY(45%);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.story-card:hover .story-card__content {
  transform: translateY(0);
}

.story-card__content h3 {
  font-size: 1.4rem;
  color: var(--dark);
  margin-bottom: 15px;
  line-height: 1.4;
}

.story-card__content p {
  font-size: 1rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 25px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease 0.1s;
}

.story-card:hover .story-card__content p {
  opacity: 1;
  transform: translateY(0);
}

.story-card__buttons {
  display: flex;
  gap: 15px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease 0.2s;
}

.story-card:hover .story-card__buttons {
  opacity: 1;
  transform: translateY(0);
}

.story-card__button {
  padding: 12px 25px;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.story-card__button--primary {
  background: var(--primary-color);
  color: white;
}

.story-card__button--secondary {
  background: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

.story-card__button:hover {
  transform: translateY(-3px);
}

.story-card__button--primary:hover {
  background: var(--primary-dark);
}

.story-card__button--secondary:hover {
  background: rgba(76, 175, 80, 0.1);
}

@media (max-width: 1200px) {
  .featured-stories__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .featured-stories {
    padding: 80px 0;
  }

  .featured-stories__heading {
    margin-bottom: 40px;
    padding: 0 20px;
  }

  .featured-stories__heading h2 {
    font-size: 2.5rem;
  }

  .featured-stories__grid {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 0 20px;
    max-width: 500px;
    margin: 0 auto;
  }

  .story-card {
    height: 450px;
  }

  .story-card__content {
    transform: translateY(55%);
  }
}

/* Testimonials Section */
.testimonials {
  padding: 120px 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

/* Visual Elements */
.testimonials::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234caf50' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.5;
}

.testimonials::after {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    rgba(76, 175, 80, 0.05) 0%,
    transparent 70%
  );
  top: -200px;
  right: -200px;
  border-radius: 50%;
  animation: float 15s infinite;
}

.testimonial-card__media {
  flex: 0 0 45%;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16/9;
  cursor: pointer;
}

.testimonial-card__media iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: none; /* Disable iframe interaction by default */
}

.testimonial-card__media.active iframe {
  pointer-events: all; /* Enable iframe interaction when active */
}

.testimonial-card__play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: all 0.3s ease;
  cursor: pointer;
}

.testimonial-card__play-button i {
  color: var(--primary-color);
  font-size: 30px;
  transition: all 0.3s ease;
}

/* Change icon when playing */
.testimonial-card__media.active .testimonial-card__play-button i {
  content: "\f04c"; /* Font Awesome pause icon */
}

/* Remove this style that was hiding the button */
.testimonial-card__media.active .testimonial-card__play-button {
  opacity: 1;
  pointer-events: all;
}

/* Animation */
@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-30px) rotate(5deg);
  }
}

.testimonials__heading {
  text-align: center;
  margin-bottom: 100px;
}

.testimonials__heading h2 {
  font-size: 3.5rem;
  color: var(--dark);
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
}

.testimonials__heading h2::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: var(--primary-color);
  border-radius: 2px;
}

.testimonials__heading p {
  font-size: 1.2rem;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
}

.testimonials__grid {
  display: flex;
  flex-direction: column;
  gap: 100px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.testimonial-card {
  display: flex;
  gap: 100px;
  background: white;
  border-radius: 0;
  position: relative;
  padding: 60px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.testimonial-card__media {
  flex: 0 0 45%;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16/9; /* Maintain video aspect ratio */
}

.testimonial-card__media iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Update responsive styles */
@media (max-width: 992px) {
  .testimonial-card__media {
    width: 100%;
    aspect-ratio: 16/9;
  }
}

.testimonial-card__media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, rgba(46, 125, 50, 0.2), transparent 60%);
  z-index: 1;
}

/* Hover effects */
.testimonial-card:hover .testimonial-card__media video {
  opacity: 1;
}

/* Remove the image transform effect since we're using video */
.testimonial-card:hover .testimonial-card__media img {
  transform: none;
}

.testimonial-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding-right: 40px;
}

.testimonial-card__quote {
  font-size: 180px;
  color: var(--primary-color);
  opacity: 0.08;
  position: absolute;
  top: -60px;
  left: -40px;
  font-family: serif;
  line-height: 1;
}

.testimonial-card h3 {
  font-size: 2.4rem;
  color: var(--dark);
  margin-bottom: 30px;
  line-height: 1.3;
  position: relative;
  font-weight: 600;
}

.testimonial-card p {
  font-size: 1.2rem;
  color: #666;
  line-height: 1.8;
  margin-bottom: 40px;
  position: relative;
  font-style: italic;
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 25px;
  position: relative;
  margin-top: 20px;
  padding-top: 30px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.testimonial-card__author-image {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid white;
  outline: 1px solid rgba(0, 0, 0, 0.1);
}

.testimonial-card__author-info h4 {
  font-size: 1.3rem;
  color: var(--dark);
  margin-bottom: 8px;
  font-weight: 600;
}

.testimonial-card__author-info span {
  font-size: 1rem;
  color: var(--primary-color);
  font-weight: 500;
}

.testimonial-card--reversed {
  flex-direction: row-reverse;
}

.testimonial-card--reversed .testimonial-card__content {
  padding-right: 0;
  padding-left: 40px;
}

/* Hover Effects */
.testimonial-card:hover .testimonial-card__media img {
  transform: scale(1.08);
}

/* Responsive Design */
@media (max-width: 1200px) {
  .testimonial-card {
    gap: 60px;
    padding: 40px;
  }
}

@media (max-width: 992px) {
  .testimonial-card {
    flex-direction: column;
    max-width: 600px;
    margin: 0 auto;
    padding: 30px;
  }

  .testimonial-card--reversed {
    flex-direction: column;
  }

  .testimonial-card__media {
    height: 350px;
  }

  .testimonial-card__media video {
    height: 100%;
  }

  .testimonial-card__content {
    padding: 40px 0 0 0;
  }

  .testimonial-card--reversed .testimonial-card__content {
    padding: 40px 0 0 0;
  }

  .testimonial-card h3 {
    font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .testimonials {
    padding: 80px 0;
  }

  .testimonials__grid {
    gap: 60px;
  }

  .testimonial-card__media {
    height: 300px;
  }

  .testimonial-card h3 {
    font-size: 1.8rem;
    margin-bottom: 20px;
  }

  .testimonial-card p {
    font-size: 1.1rem;
    margin-bottom: 30px;
  }

  .testimonial-card__quote {
    font-size: 120px;
    top: -30px;
    left: -20px;
  }
}

/* Responsive Design Improvements */
@media (max-width: 1200px) {
  .testimonial-card {
    gap: 50px;
    padding: 40px;
  }

  .testimonial-card h3 {
    font-size: 2rem;
  }

  .testimonial-card p {
    font-size: 1.1rem;
    margin-bottom: 30px;
  }
}

@media (max-width: 992px) {
  .testimonials {
    padding: 80px 0;
  }

  .testimonials__heading h2 {
    font-size: 2.8rem;
  }

  .testimonials__grid {
    gap: 60px;
    padding: 0 20px;
  }

  .testimonial-card {
    flex-direction: column;
    gap: 40px;
    max-width: 650px;
    margin: 0 auto;
    padding: 30px;
    border-radius: 20px;
  }

  .testimonial-card--reversed {
    flex-direction: column;
  }

  .testimonial-card__media {
    width: 100%;
    height: 300px;
  }

  .testimonial-card__content {
    padding: 0;
    text-align: center;
  }

  .testimonial-card__quote {
    font-size: 120px;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
  }

  .testimonial-card__author {
    justify-content: center;
  }

  .testimonial-card--reversed .testimonial-card__content {
    padding: 0;
  }
}

@media (max-width: 768px) {
  .testimonials {
    padding: 60px 0;
  }

  .testimonials__heading {
    margin-bottom: 60px;
  }

  .testimonials__heading h2 {
    font-size: 2.4rem;
  }

  .testimonials__heading p {
    font-size: 1rem;
    padding: 0 20px;
  }

  .testimonials__grid {
    gap: 40px;
    padding: 0 15px;
  }

  .testimonial-card {
    padding: 20px;
    gap: 30px;
  }

  .testimonial-card__media {
    height: 220px;
    border-radius: 15px;
  }

  .testimonial-card h3 {
    font-size: 1.6rem;
    margin-bottom: 15px;
  }

  .testimonial-card p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 25px;
  }

  .testimonial-card__quote {
    font-size: 100px;
    top: -30px;
  }

  .testimonial-card__author {
    gap: 15px;
    padding-top: 20px;
  }

  .testimonial-card__author h4 {
    font-size: 1.1rem;
    margin-bottom: 5px;
  }

  .testimonial-card__author span {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .testimonials__heading h2 {
    font-size: 2rem;
  }

  .testimonial-card {
    padding: 15px;
  }

  .testimonial-card__media {
    height: 200px;
  }

  .testimonial-card h3 {
    font-size: 1.4rem;
  }

  .testimonial-card__quote {
    font-size: 80px;
    top: -20px;
  }
}

/* Video Carousel Section */
.video-carousel {
  padding: 6rem 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

/* Decorative Background Elements */
.video-carousel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234CAF50' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.5;
}

.video-carousel__heading {
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
}

.video-carousel__heading h2 {
  font-size: 3.5rem;
  background: linear-gradient(45deg, #2e7d32, #4caf50);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1.5rem;
  font-weight: 700;
}

.video-carousel__heading p {
  color: #666;
  font-size: 1.2rem;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.video-carousel__container {
  position: relative;
  overflow: hidden;
  padding: 3rem 80px;
  margin: 2rem auto;
  max-width: 1400px;
}

.video-carousel__track {
  display: flex;
  transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
  gap: 40px;
}

.video-card {
  flex: 0 0 calc(33.333% - 27px);
  max-width: calc(33.333% - 27px);
  border-radius: 20px;
  overflow: hidden;
  background: white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
}

.video-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  background: #000;
  overflow: hidden;
}

.video-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent);
  z-index: 1;
  pointer-events: none;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  transition: transform 0.6s ease;
}

.video-card:hover .video-wrapper iframe {
  transform: scale(1.05);
}

.video-card__content {
  padding: 2rem;
  background: white;
  position: relative;
}

.video-card__content h3 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  color: #333;
  font-weight: 600;
  line-height: 1.3;
}

.video-card__content p {
  font-size: 1rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* Enhanced Navigation Controls */
.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: white;
  border: none;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-nav:hover {
  background: #4caf50;
  transform: translateY(-50%) scale(1.1);
}

.carousel-nav:hover i {
  color: white;
}

.carousel-nav i {
  font-size: 1.4rem;
  color: #4caf50;
  transition: color 0.3s ease;
}

.carousel-nav.prev {
  left: 20px;
}

.carousel-nav.next {
  right: 20px;
}

/* Enhanced Progress and Pagination */
.carousel-controls {
  margin-top: 3rem;
  padding: 0 2rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.carousel-progress {
  height: 6px;
  background: rgba(76, 175, 80, 0.1);
  border-radius: 3px;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #2e7d32, #4caf50);
  width: 0;
  transition: width 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.carousel-pagination {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.pagination-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(76, 175, 80, 0.2);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.pagination-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.pagination-dot:hover {
  background: rgba(76, 175, 80, 0.4);
}

.pagination-dot.active {
  background: #4caf50;
  transform: scale(1.2);
}

.pagination-dot.active::after {
  border-color: rgba(76, 175, 80, 0.2);
}

/* Video Card Hover Effects */
.video-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, rgba(76, 175, 80, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
  pointer-events: none;
}

.video-card:hover::before {
  opacity: 1;
}

/* Responsive Design */
@media (max-width: 1400px) {
  .video-card {
    flex: 0 0 calc(50% - 20px);
    max-width: calc(50% - 20px);
  }
}

@media (max-width: 992px) {
  .video-carousel__heading h2 {
    font-size: 2.8rem;
  }

  .video-carousel__container {
    padding: 2rem 60px;
  }

  .carousel-nav {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 768px) {
  .video-carousel {
    padding: 4rem 0;
  }

  .video-carousel__container {
    padding: 1.5rem 50px;
  }

  .video-card {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .video-carousel__heading h2 {
    font-size: 2.4rem;
  }

  .carousel-nav {
    width: 45px;
    height: 45px;
  }

  .carousel-nav i {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .video-carousel__heading h2 {
    font-size: 2rem;
  }

  .video-carousel__container {
    padding: 1rem 40px;
  }

  .carousel-nav {
    width: 40px;
    height: 40px;
  }

  .video-card__content {
    padding: 1.5rem;
  }

  .video-card__content h3 {
    font-size: 1.2rem;
  }
}

/* Loading Animation */
.video-carousel__track.loading {
  animation: shimmer 1.5s infinite;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Smooth Scroll Behavior */
.video-carousel {
  scroll-behavior: smooth;
}

/* Focus States */
.carousel-nav:focus,
.pagination-dot:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.3);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .video-carousel__track,
  .video-card,
  .carousel-nav,
  .pagination-dot {
    transition: none;
  }
}

/* End CTA Section */
.end-cta {
  padding: 120px 0;
  background: linear-gradient(135deg, var(--primary-color) 0%, #1a5928 100%);
  position: relative;
  overflow: hidden;
  color: white;
}

.end-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.1;
}

.end-cta__content {
  position: relative;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.end-cta__content h2 {
  font-size: 3.5rem;
  margin-bottom: 20px;
  font-weight: 700;
}

.end-cta__content p {
  font-size: 1.2rem;
  margin-bottom: 40px;
  opacity: 0.9;
}

.end-cta__buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 60px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 30px;
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn--primary {
  background: white;
  color: var(--primary-color);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.btn--secondary {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn--secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.end-cta__stats {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-top: 40px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 1rem;
  opacity: 0.8;
}

/* Responsive Design */
@media (max-width: 768px) {
  .end-cta {
    padding: 80px 0;
  }

  .end-cta__content h2 {
    font-size: 2.8rem;
  }

  .end-cta__buttons {
    flex-direction: column;
    gap: 15px;
  }

  .end-cta__stats {
    gap: 30px;
  }

  .stat-number {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .end-cta__content h2 {
    font-size: 2.2rem;
  }

  .end-cta__stats {
    flex-direction: column;
    gap: 20px;
  }
}

/* Partner Us Section */
.partner-us {
  padding: 100px 0;
  background: linear-gradient(
      135deg,
      rgba(26, 93, 26, 0.97),
      rgba(26, 93, 26, 0.93)
    ),
    url("https://images.unsplash.com/photo-1522071820081-009f0129c71c?q=80")
      center/cover fixed;
  position: relative;
  overflow: hidden;
}

/* Content Grid */
.partner-us__grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 60px;
  align-items: center;
}

/* Left Side Content */
.partner-us__content {
  color: white;
  position: relative;
  z-index: 2;
}

.partner-us__content h2 {
  font-size: clamp(2.5rem, 4vw, 3.2rem);
  margin-bottom: 25px;
  font-family: "Unbounded", sans-serif;
  background: linear-gradient(45deg, #fff, #e0e0e0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
  animation: gradientFlow 8s linear infinite;
}

.partner-us__description {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
  margin-bottom: 40px;
  max-width: 600px;
}

/* Partner Image */
.partner-us__image {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  aspect-ratio: 4/3;
  transform: perspective(1000px) rotateY(-5deg);
  transition: all 0.5s ease;
}

.partner-us__image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.4)
  );
  z-index: 1;
}

.partner-us__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Stats */
.partner-us__stats {
  display: flex;
  gap: 50px;
  margin-top: 50px;
}

.partner-stat {
  position: relative;
}

.partner-stat__number {
  display: block;
  font-size: 3rem;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 10px;
  font-family: "Unbounded", sans-serif;
  line-height: 1;
}

.partner-stat__label {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

/* Hover Effects */
.partner-us__image:hover {
  transform: perspective(1000px) rotateY(0deg);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.partner-us__image:hover img {
  transform: scale(1.1);
}

/* Background Pattern */
.partner-us::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
    repeat;
  opacity: 0.1;
  pointer-events: none;
}

/* Responsive Design */
@media (max-width: 992px) {
  .partner-us__grid {
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 600px;
    margin: 0 auto;
  }

  .partner-us__content {
    text-align: center;
    order: -1;
  }

  .partner-us__description {
    margin: 0 auto 30px;
  }

  .partner-us__stats {
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
  }

  .partner-us__form-container {
    margin-top: 20px;
  }
}

@media (max-width: 768px) {
  .partner-us {
    padding: 60px 0;
  }

  .partner-us__content h2 {
    font-size: 2rem;
    margin-bottom: 20px;
  }

  .partner-us__description {
    font-size: 1rem;
    padding: 0 20px;
  }

  .partner-us__form-container {
    padding: 25px;
    margin: 0 20px;
  }

  .partner-us__form-container h3 {
    font-size: 1.5rem;
  }

  #partner-form {
    gap: 15px;
  }

  #partner-form input,
  #partner-form textarea {
    padding: 12px;
    font-size: 0.95rem;
  }

  .partner-stat {
    width: 100%;
    text-align: center;
  }

  .partner-stat__number {
    font-size: 2.2rem;
  }

  .partner-stat__label {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .partner-us {
    padding: 40px 0;
  }

  .partner-us__content h2 {
    font-size: 1.8rem;
  }

  .partner-us__form-container {
    padding: 20px;
  }

  .partner-us__stats {
    flex-direction: column;
    gap: 20px;
  }

  #partner-form button {
    width: 100%;
    padding: 14px;
    font-size: 0.95rem;
  }
}

/* Form Container */
.partner-us__form-container {
  background: rgba(255, 255, 255, 0.1);
  padding: 40px;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.partner-us__form-container h3 {
  font-size: 1.8rem;
  color: white;
  margin-bottom: 30px;
  text-align: center;
  font-family: "Unbounded", sans-serif;
}

/* Form Elements */
#partner-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#partner-form input,
#partner-form textarea {
  width: 100%;
  padding: 15px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  color: white;
  font-size: 1rem;
  transition: all 0.3s ease;
}

#partner-form input:focus,
#partner-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.15);
}

#partner-form input::placeholder,
#partner-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

#partner-form textarea {
  height: 120px;
  resize: vertical;
  min-height: 120px;
}

#partner-form button {
  padding: 16px 32px;
  background: var(--accent);
  color: var(--primary);
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(255, 196, 54, 0.2);
}

#partner-form button i {
  transition: transform 0.3s ease;
}

#partner-form button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(255, 196, 54, 0.3);
}

#partner-form button:hover i {
  transform: translateX(5px);
}

/* Responsive Adjustments */
@media (max-width: 992px) {
  .partner-us__form-container {
    max-width: 600px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .partner-us__form-container {
    padding: 30px 20px;
  }

  .partner-us__form-container h3 {
    font-size: 1.6rem;
  }

  #partner-form button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .partner-us__form-container {
    padding: 25px 15px;
  }

  #partner-form input,
  #partner-form textarea {
    padding: 12px;
    font-size: 0.95rem;
  }
}

/* Footer Styles */
/* footer {
  background: linear-gradient(
    to bottom,
    rgba(30, 40, 10, 0.98),
    rgba(26, 35, 8, 0.95)
  );
  padding: 80px 0 40px;
  position: relative;
  overflow: hidden;
}

footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("assets/images/pattern.svg") repeat;
  opacity: 0.03;
  animation: floatBackground 30s linear infinite;
}

.footer__container {
  width: min(100% - 32px, 1200px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  position: relative;
}

.footer__logo {
  display: flex;
  align-items: center;
}

.footer__logo img {
  max-width: 150px;
  height: auto;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 15px;
  color: #fff;
}

.footer__links a {
  color: var(--text-light);
  text-decoration: none;
  font-size: var(--fs-sm);
  transition: color 0.3s ease;
  position: relative;
  width: fit-content;
}

.footer__links a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary-light);
  transition: width 0.3s ease;
}

.footer__links a:hover {
  color: var(--primary-light);
}

.footer__links a:hover::after {
  width: 100%;
}

.footer__social {
  display: flex;
  gap: 20px;
  align-items: center;
}

.footer__social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid var(--glass-border);
}

.footer__social a:hover {
  transform: translateY(-3px);
  background: var(--primary-light);
  color: var(--primary-dark);
}

.footer__social i {
  font-size: 1.2rem;
}

.footer__copyright {
  grid-column: 1 / -1;
  text-align: center;
  padding-top: 40px;
  border-top: 1px solid var(--glass-border);
  margin-top: 20px;
}

.footer__copyright p {
  color: var(--text-muted);
  font-size: var(--fs-sm);
} */

/* Responsive Footer */
/* @media (max-width: 768px) {
  footer {
    padding: 60px 0 30px;
  }

  .footer__container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 30px;
  }

  .footer__logo {
    justify-content: center;
  }

  .footer__links {
    align-items: center;
  }

  .footer__social {
    justify-content: center;
  }

  .footer__copyright {
    margin-top: 30px;
    padding-top: 30px;
  }
} */

/* Add hover animation for social icons */
/* @keyframes socialPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(163, 255, 18, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(163, 255, 18, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(163, 255, 18, 0);
  }
}

.footer__social a:hover {
  animation: socialPulse 1.5s infinite;
} */

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
}

.play-button-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  transition: background 0.3s ease;
}

.play-button-overlay i {
  color: white;
  font-size: 48px;
  transition: transform 0.3s ease;
}

.play-button-overlay:hover {
  background: rgba(0, 0, 0, 0.5);
}

.play-button-overlay:hover i {
  transform: scale(1.2);
}

.video-container.playing .play-button-overlay {
  display: none;
}

.testimonial-card {
  display: flex;
  gap: 2rem;
  margin-bottom: 3rem;
  align-items: center;
}

.testimonial-card--reversed {
  flex-direction: row-reverse;
}

.testimonial-card__media {
  flex: 1;
  min-width: 300px;
}

.testimonial-card__content {
  flex: 1;
  padding: 2rem;
}

@media (max-width: 768px) {
  .testimonial-card,
  .testimonial-card--reversed {
    flex-direction: column;
  }

  .testimonial-card__media {
    min-width: 100%;
  }
}

.video-carousel__container {
  position: relative;
  overflow: hidden;
  padding: 0 40px;
}

.video-carousel__track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  gap: 20px;
}

.video-card {
  flex: 0 0 calc(33.333% - 20px); /* Show 3 cards at once */
  max-width: calc(33.333% - 20px);
}

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: white;
  cursor: pointer;
  z-index: 10;
  transition: background 0.3s ease;
}

.carousel-nav:hover {
  background: rgba(0, 0, 0, 0.8);
}

.carousel-nav.prev {
  left: 0;
}

.carousel-nav.next {
  right: 0;
}

.carousel-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.pagination-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  transition: background 0.3s ease;
}

.pagination-dot.active {
  background: #333;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .video-card {
    flex: 0 0 calc(50% - 20px);
    max-width: calc(50% - 20px);
  }
}

@media (max-width: 768px) {
  .video-card {
    flex: 0 0 calc(100% - 20px);
    max-width: calc(100% - 20px);
  }
}