@font-face {
  font-family: 'PP Formula';
  src: url('/fonts/PP Formula/PPFormula-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Formula';
  src: url('/fonts/PP Formula/PPFormula-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Formula';
  src: url('/fonts/PP Formula/PPFormula-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'PP Formula';
  src: url('/fonts/PP Formula/PPFormula-Extrabold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-pp: 'PP Formula', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}



html, body {
  font-family: var(--font-pp);
  overflow-x: hidden;
}



*, *::before, *::after, button, input, select, textarea {
  font-family: inherit;
}


    .animate-gradient {
      background-size: 200% 200%;
      animation: gradientMove 6s ease infinite;
    }

    /* * { font-family: 'Inter', sans-serif; scroll-behavior: smooth; } */
    /* Dropdown Styles */
    .mobile-dropdown-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.mobile-dropdown-btn {
  transition: all 0.3s ease;
}

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

.mobile-dropdown-btn.active .mobile-dropdown-arrow {
  transform: rotate(180deg);
}

.dropdown-parent:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu {
  transform: translateY(-10px);
}

.dropdown-parent:hover .dropdown-arrow {
  transform: rotate(180deg);
}



/* Mobile Menu Styles */
#mobileMenuBtn.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

#mobileMenuBtn.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

#mobileMenuBtn.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

#mobileMenu.active {
  transform: translateY(0);
  opacity: 1;
}



    .gradient-text {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .gradient-logo {
      background: linear-gradient(135deg, #667eea 0%, #29064b 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

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

    .card-hover:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 40px rgba(102, 126, 234, 0.15);
    }

    .animate-fade-in {
      animation: fadeIn 0.6s ease-out forwards;
      opacity: 0;
    }

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

      from {
        opacity: 0;
        transform: translateY(20px);
      }
    }

    .nav-link {
      position: relative;
      transition: color 0.3s;
    }

    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 2px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      transition: width 0.3s;
    }

    .nav-link:hover::after {
      width: 100%;
    }

    .section-pattern {
      background-image:
        linear-gradient(rgba(102, 126, 234, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57, 93, 252, 0.1) 1px, transparent 1px);
      background-size: 50px 50px;
    }

    .counter {
      font-variant-numeric: tabular-nums;
    }

    .testimonial-card opacity-0 {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
      backdrop-filter: blur(10px);
    }


    .logo-card {
      /* opacity: 0; */
      transform: translateY(30px);
    }

    .company-logo {
      /* filter: grayscale(100%); */
      opacity: 1;
      transition: all 0.4s ease;
    }

    .company-logo:hover {
      /* filter: grayscale(0%); */
      opacity: 1;
      transform: scale(1.05);
    }

    .logo-scroll-row {
      display: flex;
      width: max-content;
    }



    .program-card {
      position: relative;
      overflow: hidden;
      opacity: 0;
      transform: translateY(50px);
      /* transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); */
      transform-style: preserve-3d;
    }

    .glare {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      pointer-events: none;
      opacity: 0;
      mix-blend-mode: overlay;
    }

    .card-content {
      position: relative;
      z-index: 1;
    }

    .card-number {
      position: relative;
      font-size: 5rem;
      font-weight: 900;
      line-height: 1;
    }

    .icon-container {
      width: 80px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 20px;
      position: relative;
      overflow: hidden;
    }

    .tag {
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .feature-list li {
      position: relative;
      padding-left: 24px;
      transition: all 0.3s ease;
    }

    .feature-list li::before {
      content: '→';
      position: absolute;
      left: 0;
      color: #667eea;
      font-weight: bold;
      transition: all 0.3s ease;
    }

    /* Card background gradients */
    .card-bg-1 {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .card-bg-2 {
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }

    .card-bg-3 {
      background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    }

    .card-bg-4 {
      background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
    }

    .card-bg-5 {
      background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    }

    .card-bg-6 {
      background: linear-gradient(135deg, #ff9a56 0%, #ff6a88 100%);
    }

    .card-bg-7 {
      background: linear-gradient(135deg, #17ead9 0%, #6078ea 100%);
    }

   .card-bg-8 {
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }

    /* Mobile Menu Animations */
    #mobileMenuBtn {
      position: relative;
      z-index: 60;
    }

    #mobileMenu {
      z-index: 55;
    }