/* Define Custom Colors */
        :root {
            --charcoal: #8b4343;
            --gold: #9e512d;
            --cream: #d8d3c9;
            --slate: #737a83;
            --white: #FFFFFF;
        }
      
      
      /* Base styles */
        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--cream);
            color: var(--slate);
            overflow-x: hidden;
        }

        /* Global Fade-In Animation on scroll setup */
        .fade-in {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .fade-in.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Glowing Button Effect */
        .glow-cta {
            position: relative;
            z-index: 1;
            box-shadow: 0 0 15px rgba(213, 163, 83, 0.4); /* Soft gold shadow */
            transition: box-shadow 0.3s ease;
        }
        .glow-cta:hover {
            box-shadow: 0 0 25px rgba(213, 163, 83, 0.7);
        }

        /* Glassmorphism Card Style */
        .glass-card {
            background-color: rgba(255, 255, 255, 0.1); /* Soft White Background */
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }
        .glass-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(213, 163, 83, 0.2); /* Lift and gold glow */
        }

        /* Timeline Step Glow */
        .timeline-step-icon {
            box-shadow: 0 0 15px rgba(213, 163, 83, 0.4);
            border: 3px solid var(--gold);
        }
        
        /* Custom curve transition for sections */
        .curved-top {
            clip-path: ellipse(100% 10% at 50% 0%);
        }
        .curved-bottom {
            clip-path: ellipse(100% 10% at 50% 100%);
        }
        /* Marquee Animation */
.marquee-text {
  animation: marquee 15s linear infinite;
}

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

/* Fade & Slide Text Animation */
.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1.2s ease-out forwards;
}
.fade-delay { animation-delay: 0.6s; }
.fade-delay-2 { animation-delay: 1.2s; }

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Title Slide-In Effect */
.animated-title {
  opacity: 0;
  animation: slideText 1.4s ease-out forwards;
}

@keyframes slideText {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Marquee Animation */
.marquee-about {
  animation: marqueeAbout 16s linear infinite;
}

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

/* Fade In */
.fade-in {
  opacity: 0;
  animation: fadeIn 1.2s ease-out forwards;
}

@keyframes fadeIn {
  to { opacity: 1; }
}
.modal-content.scale-100 {
    transform: scale(1);
    opacity: 1;
}
.modal-content {
    transform: scale(0.9);
    opacity: 0;
}