: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;

  }

  }

}