:root {

      --primary: #1E3A8A;

      --secondary: #003343ed;

      --accent: #F59E0B;

      --background: #F8FAFC;

      --text-dark: #0F172A;

      --text-light: #475569;

  }



  * {

      margin: 0;

      padding: 0;

      box-sizing: border-box;

  }



  body {

      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;

      background-color: var(--background);

      color: var(--text-dark);

  }



  @keyframes float {



      0%,

      100% {

          transform: translateY(0px);

      }



      50% {

          transform: translateY(-10px);

      }

  }



  .nav-link {

      position: relative;

      color: var(--text-dark);

  }



  .nav-link::after {

      content: '';

      position: absolute;

      bottom: 8px;

      left: 50%;

      width: 0;

      height: 3px;

      background-color: var(--accent);

      border-radius: 2px;

      transition: all 0.3s ease;

      transform: translateX(-50%);

  }



  .nav-link:hover::after {

      width: calc(100% - 32px);

  }



  .nav-link.active {

      background-color: rgba(30, 58, 138, 0.1);

  }



  .nav-link.active::after {

      width: calc(100% - 32px);

  }



  .mobile-nav.active {

      background-color: rgba(30, 58, 138, 0.1);

  }



  .btn-primary {

      transition: all 0.3s ease;

  }



  .btn-primary:hover {

      background-color: #1e3a8a;

      transform: translateY(-2px);

      box-shadow: 0 10px 25px rgba(30, 58, 138, 0.3);

  }



  .btn-secondary {

      border: 2px solid var(--primary);

      color: var(--primary);

      background-color: transparent;

      transition: all 0.3s ease;

  }



  .btn-secondary:hover {

      background-color: var(--primary);

      color: white;

      transform: translateY(-2px);

  }



  .accent-text {

      color: var(--accent);

  }



  .feature-icon {

      width: 24px;

      height: 24px;

      display: flex;

      align-items: center;

      justify-content: center;

      background-color: var(--accent);

      color: white;

      border-radius: 50%;

      font-weight: bold;

      font-size: 14px;

  }



  .hero-image {

      border-radius: 20px;

      overflow: hidden;

      box-shadow: 0 20px 50px rgba(30, 58, 138, 0.15);

  }



  .fade-in {

      animation: fadeIn 0.8s ease-in-out;

  }



  @keyframes fadeIn {

      from {

          opacity: 0;

          transform: translateY(20px);

      }



      to {

          opacity: 1;

          transform: translateY(0);

      }

  }



  .slide-in-left {

      animation: slideInLeft 0.8s ease-in-out;

  }



  @keyframes slideInLeft {

      from {

          opacity: 0;

          transform: translateX(-40px);

      }



      to {

          opacity: 1;

          transform: translateX(0);

      }

  }



  .slide-in-right {

      animation: slideInRight 0.8s ease-in-out;

  }



  @keyframes slideInRight {

      from {

          opacity: 0;

          transform: translateX(40px);

      }



      to {

          opacity: 1;

          transform: translateX(0);

      }

  }



  @media (max-width: 768px) {

      .hero-headline {

          font-size: 32px;

      }

  }





  .step-active .bg-white {

      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);

  }



  /* active number highlight */

  .step-number-active {

      box-shadow: 0 0 0 4px rgba(245, 183, 11, 0.966);

      transform: scale(1.05);

      transition: all 0.25s ease;

  }



  .footer-link {

      position: relative;

      color: var(--text-light);

      transition: all 0.3s ease;

  }



  .footer-link::before {

      content: '';

      position: absolute;

      left: 0;

      bottom: -2px;

      width: 0;

      height: 2px;

      background-color: var(--accent);

      transition: width 0.3s ease;

  }



  .footer-link:hover::before {

      width: 100%;

  }



  .footer-link.active {

      color: var(--primary);

      font-weight: 600;

  }



  .footer-link.active::before {

      width: 100%;

  }



  .hover\:accent-text:hover {

      color: var(--accent) !important;

  }











  /* Section Wrapper */

  .hero-form-section {

      padding: 4rem 1rem;

      background-image: url(assets/images/form-bg.webp);

      background-size: cover;

      background-position: center;

      position: relative;

      background-blend-mode: overlay;

      background-color: #000000b0;

      background-attachment: fixed;

  }



  /* Overlay for readability */

  .hero-form-section::before {

      content: "";

      position: absolute;

      inset: 0;

      z-index: 0;

  }



  /* Container */

  .hero-form-container {

      position: relative;

      z-index: 1;

      max-width: 900px;

      margin: 0 auto;

      text-align: center;

  }



  /* Heading */

  .hero-form-heading {

      font-size: 1.75rem;

      font-weight: 700;

      color: white;

  }



  /* Divider Line */

  .hero-form-divider {

      width: 70px;

      height: 4px;

      background: var(--accent);

      margin: 0.75rem auto 2rem;

      border-radius: 2px;

  }



  /* Form Card */

  .hero-form {

      background: #ffffff;

      border-radius: 20px;

      padding: 1.5rem;

      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);

      width: 106% !important;

  }



  /* Layout */

  .hero-form-inner {

      display: flex;

      gap: 1rem;

      align-items: stretch;

  }



  /* Inputs */

  .hero-input {

      flex: 1;

      padding: 1rem 1.1rem;

      border-radius: 14px;

      border: 2px solid #e5e7eb;

      font-size: 0.95rem;

      transition: all 0.25s ease;

  }



  .hero-input:focus {

      outline: none;

      border-color: var(--accent);

      box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);

  }



  /* Button */

  .hero-submit {

      padding: 0 1.75rem;

      border-radius: 14px;

      font-weight: 600;

      background: linear-gradient(135deg, #f59e0b, #fbbf24);

      color: #111827;

      box-shadow: 0 14px 30px rgba(245, 158, 11, 0.4);

      transition: all 0.25s ease;

      white-space: nowrap;

  }



  .hero-submit:hover {

      transform: translateY(-2px);

      box-shadow: 0 20px 40px rgba(245, 158, 11, 0.55);

  }



  /* Mobile */

  @media (max-width: 768px) {

      .hero-form-inner {

          flex-direction: column;

      }



      .hero-submit {

          padding: 1rem;

      }



      .hero-form {

          width: 100% !important;

      }

  }

  #faqContainer::-webkit-scrollbar {
      width: 10px;
  }
  #faqContainer::-webkit-scrollbar-track {
      background: rgba(245, 158, 11, 0.08);
      border-radius: 10px;
  }
  #faqContainer::-webkit-scrollbar-thumb {
      background: var(--accent);

      border-radius: 10px;

      transition: background 0.3s ease;
  }
  #faqContainer::-webkit-scrollbar-thumb:hover {
      background: rgba(245, 158, 11, 0.9);
  }
  /* Firefox scrollbar styling */
  #faqContainer {

      scrollbar-color: var(--accent) rgba(245, 158, 11, 0.08);

      scrollbar-width: thin;

  }

  .faq-item.open .faq-answer {

      max-height: 500px;

  }

  .faq-question:hover {

      opacity: 0.8;

  }