html, body {
  overflow-x: hidden;
}

body {
      margin: 0;
      font-family: 'Poppins', sans-serif;
  }

  .navbar {
      background: #ffffff;
      transition: box-shadow 0.3s ease;
  }

  .navbar-brand {
      letter-spacing: 1px;
  }

  .navbar-brand img {
      width: 190px;
  }

  .navbar .nav-link {
      font-weight: 500;
      color: #003c9e;
  }

  .navbar .nav-link:hover {
      color: #ff7a00;
  }

  @media (min-width: 992px) {
      .dropdown:hover .dropdown-menu {
          display: block;
          margin-top: 0;
      }
  }

  .dropdown-menu {
      padding: 10px 0;
      border-radius: 10px;
      border: none;
      background: #ffffff;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
      min-width: 220px;
  }

  .dropdown-item {
      padding: 10px 20px;
      font-weight: 500;
      color: #003c9e;
      transition: all 0.25s ease;
  }

  .dropdown-item:hover {
      background: linear-gradient(90deg, #003c9e, #007bff);
      color: #ffffff;
      padding-left: 26px;
      /* subtle slide feel */
  }




  /* Background */


  .corner-image {
      position: absolute;
      bottom: 0;
      max-height: 320px;
      z-index: 1;
      pointer-events: none;
  }

  /* Left bottom – Doctor */
  .doctor-img {
      left: 0;
  }

  /* Right bottom – Engineer */
  .engineer-img {
      right: 0;
  }

  /* Ensure content stays above images */
  .hero .container {
      position: relative;
      z-index: 2;
  }

  /* Hide images on small screens (clean mobile view) */
  @media (max-width: 768px) {
      .corner-image {
          display: none;
      }
  }

  .from-text {
      font-family: 'Great Vibes', cursive;
      font-size: 1.4rem;
      font-weight: 400;
      letter-spacing: 1.5px;
      opacity: 0.95;
  }

  .hero {
      position: relative;
      min-height: 75vh;
      padding-top: 120px;
      /* space for navbar */
      padding-bottom: 50px;
      background:
          radial-gradient(circle at top right,
              rgba(255, 255, 255, 0.12),
              transparent 45%),
          radial-gradient(circle at bottom left,
              rgba(0, 0, 0, 0.25),
              transparent 50%),
          linear-gradient(135deg, #003c9e, #007bff);
      display: flex;
      align-items: center;
      color: #fff;
  }

  .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' fill='none'/%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(255,255,255,0.04)'/%3E%3C/svg%3E");
      opacity: 0.25;
      pointer-events: none;
  }

  /* Top badge */
  .top-badge {
      background: #ff7a00;
      color: #fff;
      padding: 8px 22px;
      border-radius: 30px;
      font-weight: 600;
      display: inline-block;
      margin-bottom: 25px;
      font-size: 15px;
  }


  .feature-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 1.15rem;
      font-weight: 500;
      color: #ffffff;
  }

  .feature-item i {
      color: #fff;
      font-size: 1.2rem;
  }


  /* Headings */
  .main-title {
      font-size: 3.5rem;
      font-weight: 800;
      line-height: 1.2;
  }

  .highlight {
      color: #ffb000;
      font-style: italic;
  }

  .divider {
      width: 80px;
      height: 2px;
      background: rgba(255, 255, 255, 0.5);
      margin: 20px auto;
  }

  /* Sub text */
  .subtitle {
      font-size: 1.1rem;
      margin-bottom: 15px;
  }

  .features {
      font-size: 1.05rem;
      margin-bottom: 25px;
  }

  .features span {
      color: #fff;
      margin: 0 8px;
  }

  .tagline {
      font-size: 1.2rem;
      font-style: italic;
      margin-bottom: 35px;
  }

  .tagline strong {
      color: #ffb000;
  }

  .main-title {
      letter-spacing: -0.5px;
  }

  /* Buttons */
  .btn-orange {
      background: #ff7a00;
      color: #fff;
      font-weight: 600;
      padding: 14px 30px;
      border-radius: 6px;
      border: none;
  }

  .btn-orange:hover {
      background: #e96f00;
      color: #fff;
  }

  .btn-outline-white {
      border: 2px solid #fff;
      color: #fff;
      font-weight: 600;
      padding: 14px 30px;
      border-radius: 6px;
      background: transparent;
  }

  .btn-outline-white:hover {
      background: #fff;
      color: #0056b3;
  }

  /* Responsive */
  @media (max-width: 768px) {
      .main-title {
          font-size: 2.3rem;
      }

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

  .subtitle-pill {
      background: rgba(255, 255, 255, 0.15);
      padding: 6px 16px;
      border-radius: 20px;
      font-weight: 600;
      color: #fff;
      white-space: nowrap;
  }

  .subtitle-arrow {
      color: rgba(255, 255, 255, 0.7);
      font-size: 1.1rem;
  }






  /* Counseling Form Styling */
  .counseling-form {
      max-width: 420px;
      margin: auto;
  }

  .counseling-form .form-label {
      font-weight: 600;
      color: #003c9e;
      margin-bottom: 6px;
  }

  .counseling-form .form-control,
  .counseling-form .form-select {
      border-radius: 6px;
      border: 1px solid #dfe6f1;
      font-size: 0.95rem;
      height: 34px;
  }

  .counseling-form .form-control:focus,
  .counseling-form .form-select:focus {
      border-color: #007bff;
      box-shadow: 0 0 0 0.15rem rgba(0, 123, 255, 0.15);
  }

  .counseling-form p.text-muted {
      font-size: 0.9rem;
  }

  /* Fade placeholder text */
  .counseling-form ::placeholder {
      color: rgba(0, 0, 0, 0.4);
  }

  .counseling-form :-ms-input-placeholder {
      color: rgba(0, 0, 0, 0.4);
  }

  .counseling-form ::-ms-input-placeholder {
      color: rgba(0, 0, 0, 0.4);
  }


  /*2nd section----------------------*/

  /* WHAT WE DO Section */
  .what-we-do {
      padding: 50px 0;
      background: #f7f9fd;
  }

  .section-badge {
      display: inline-block;
      background: rgba(0, 60, 158, 0.1);
      color: #003c9e;
      padding: 6px 16px;
      border-radius: 20px;
      font-weight: 600;
      font-size: 0.8rem;
      margin-bottom: 12px;
  }

  .section-title {
      font-weight: 700;
      color: #003c9e;
      margin-bottom: 10px;
  }

  .section-subtitle {
      color: #6c757d;
      font-size: 0.95rem;
  }

  .what-card {
      background: #ffffff;
      border-radius: 14px;
      padding: 30px 25px;
      height: 100%;
      text-align: center;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .what-card i {
      font-size: 2rem;
      color: #007bff;
      margin-bottom: 18px;
  }

  .what-card h5 {
      font-weight: 600;
      color: #003c9e;
      margin-bottom: 10px;
  }

  .what-card p {
      font-size: 0.9rem;
      color: #6c757d;
      margin-bottom: 0;
  }

  .what-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
  }


  /*exam-----------------------------------*/


  /* EXAMS WE ASSESS Section */
  .exams-we-assess {
      padding: 50px 0;
      background: linear-gradient(135deg, #ffffff, #f3f6ff);
  }

  .exam-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 25px;
      max-width: 900px;
      margin: auto;
  }

  .exam-pill {
      display: flex;
      align-items: center;
      gap: 14px;
      background: #ffffff;
      border-radius: 50px;
      padding: 18px 26px;
      font-weight: 600;
      color: #003c9e;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
      transition: all 0.3s ease;
      justify-content: center;
  }

  .exam-pill i {
      font-size: 1.3rem;
      color: #007bff;
  }

  .exam-pill:hover {
      background: linear-gradient(90deg, #003c9e, #007bff);
      color: #ffffff;
      transform: translateY(-4px);
  }

  .exam-pill:hover i {
      color: #ffffff;
  }

  .exams-we-assess .btn-orange {
      font-weight: 600;
      border-radius: 30px;
  }


  .btn-arrow {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.3s ease;
  }

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

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



  /*shape future-----------------*/

  .future-hero-wrap {
      position: relative;
      padding: 50px 0;
      background:
          radial-gradient(circle at top, rgba(255, 176, 0, 0.18), transparent 40%),
          linear-gradient(135deg, #003c9e, #007bff);
      color: #ffffff;
      overflow: hidden;
      display: flex;
      align-items: center;
  }

  .future-hero-overlay {
      position: absolute;
      inset: 0;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 60%);
      opacity: 0.6;
  }

  .future-hero-content {
      position: relative;
      z-index: 2;
  }

  /* Headings */
  .future-hero-title {
      font-size: 3.2rem;
      font-weight: 800;
      line-height: 1.2;
      color: #ffffff;
  }

  .future-hero-title span {
      display: block;
      font-size: 2.1rem;
      font-weight: 600;
      color: #ffb000;
  }

  /* Subtitle */
  .future-hero-subtitle {
      margin-top: 18px;
      font-size: 1.15rem;
      color: #6c757d;
  }

  /* Value line */
  .future-hero-values {
      margin: 22px 0;
      font-weight: 600;
      letter-spacing: 1px;
      color: #ff7a00;
  }

  .platform {
      font-size: 24px;
      font-weight: 500;
  }

  .future-hero-values span {
      margin: 0 8px;
      color: rgb(3 29 70);
  }

  /* Feature boxes */
  .future-hero-features {
      margin-top: 35px;
      display: flex;
      justify-content: center;
      gap: 28px;
      flex-wrap: wrap;
  }

  .future-feature-box {
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgb(244 243 239 / 40%);
      padding: 16px 18px;
      border-radius: 12px;
      width: 170px;
      text-align: center;
      backdrop-filter: blur(6px);
  }

  .future-feature-box i {
      font-size: 1.6rem;
      color: #ffb000;
      margin-bottom: 8px;
  }

  .future-feature-box p {
      font-weight: 600;
      margin: 0;
      color: #ffffff;
  }

  .future-feature-box small {
      font-size: 0.75rem;
      opacity: 0.85;
  }

  /* CTA */
  .future-hero-cta {
      display: inline-block;
      margin-top: 40px;
      padding: 16px 38px;
      background: linear-gradient(90deg, #ffb000, #ff7a00);
      color: #ffffff;
      font-weight: 700;
      border-radius: 50px;
      text-decoration: none;
      box-shadow: 0 10px 30px rgba(255, 122, 0, 0.45);
  }

  .future-hero-cta:hover {
      background: linear-gradient(90deg, #ff7a00, #ffb000);
      transform: translateY(-2px);
  }

  /* Side Images */
  .future-hero-img {
      position: absolute;
      bottom: 0;
      max-height: 360px;
      z-index: 1;
  }

  .future-left-img {
      left: 30px;
  }

  .future-right-img {
      right: 30px;
  }

  /* Mobile */
  @media (max-width: 768px) {
      .future-hero-title {
          font-size: 2.2rem;
      }

      .future-hero-title span {
          font-size: 1.5rem;
      }

      .future-hero-img {
          display: none;
      }
  }



  /*process---------------------------*/

  .process-steps-section {
      background: #f4f6fa;
      padding: 50px 0;
  }

  .process-badge {
      display: inline-block;
      background: rgba(255, 122, 0, 0.1);
      color: #ff7a00;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 13px;
      margin-bottom: 10px;
  }

  .process-title {
      font-size: 2rem;
      font-weight: 700;
      color: #003c9e;
  }

  .process-subtitle {
      max-width: 600px;
      margin: 12px auto 0;
      color: #555;
  }

  .process-steps-wrapper {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 24px;
      margin-top: 60px;
  }

  .process-step {
      background: #ffffff;
      border-radius: 16px;
      padding: 30px 20px;
      text-align: center;
      position: relative;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
  }

  .step-number {
      position: absolute;
      top: -15px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(135deg, #ffb000, #ff7a00);
      color: #fff;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .step-icon {
      font-size: 2.2rem;
      color: #003c9e;
      margin-bottom: 15px;
  }

  .process-step h5 {
      font-weight: 500;
      color: #003c9e;
      margin-bottom: 6px;
  }

  .process-step p {
      font-size: 0.9rem;
      color: #666;
  }

  /* Responsive */
  @media (max-width: 992px) {
      .process-steps-wrapper {
          grid-template-columns: repeat(3, 1fr);
      }
  }

  @media (max-width: 576px) {
      .process-steps-wrapper {
          grid-template-columns: 1fr;
      }
  }

  /*trust----------------------------------------------*/

  .trust-assessment-section {
      background: #ffffff;
      padding: 50px 0;
  }

  .trust-main-title {
      font-size: 2rem;
      font-weight: 700;
      color: #003c9e;
  }

  .trust-subtitle {
      font-size: 1.1rem;
      margin-top: 10px;
      color: #555;
  }

  .trust-stats-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 24px;
      margin-top: 50px;
  }

  .trust-card {
      background: #f8f9fc;
      border-radius: 16px;
      padding: 30px 20px;
      text-align: center;
      transition: all 0.3s ease;
      border: 1px solid #eef0f6;
  }

  .trust-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 14px 30px rgba(0, 60, 158, 0.12);
  }

  .trust-icon {
      width: 60px;
      height: 60px;
      margin: 0 auto 16px;
      border-radius: 50%;
      background: linear-gradient(135deg, #ffb000, #ff7a00);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 1.5rem;
  }

  .trust-card h4 {
      font-weight: 500;
      color: #003c9e;
      margin-bottom: 4px;
      font-size: 1.3rem;
  }

  .trust-card p {
      margin: 0;
      font-size: 0.95rem;
      color: #666;
  }

  /* Responsive */
  @media (max-width: 992px) {
      .trust-stats-grid {
          grid-template-columns: repeat(3, 1fr);
      }
  }

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

      .trust-main-title {
          font-size: 2rem;
      }
  }

  /*faq---------------------*/

  /* SECTION */
  .faq-pro-section {
      background:
          radial-gradient(circle at top left, rgba(255, 122, 0, 0.08), transparent 40%),
          radial-gradient(circle at bottom right, rgba(0, 60, 158, 0.08), transparent 45%),
          #ffffff;
      padding: 50px 0 90px 0;
  }

  /* HEADER */
  .faq-badge {
      display: inline-block;
      background: rgba(255, 122, 0, 0.12);
      color: #ff7a00;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 30px;
      font-size: 13px;
  }

  .faq-title {
      font-size: 2rem;
      font-weight: 700;
      color: #003c9e;
      margin-top: 10px;
  }

  .faq-subtitle {
      max-width: 600px;
      margin: 10px auto 0;
      color: #555;
  }

  /* FAQ LIST */
  .faq-list {
      max-width: 850px;
      margin: auto;
      display: flex;
      flex-direction: column;
      gap: 18px;
  }


  .faq-item.hidden-faq {
      display: none;
  }

  /* ITEM */
  .faq-item {
      background: #ffffff;
      border-radius: 18px;
      box-shadow: 0 14px 35px rgba(0, 60, 158, 0.08);
      overflow: hidden;
      transition: box-shadow 0.3s ease;
  }

  .faq-item.active {
      box-shadow: 0 20px 45px rgba(0, 60, 158, 0.18);
  }

  /* QUESTION */
  .faq-question {
      width: 100%;
      background: transparent;
      border: none;
      padding: 22px 26px;
      font-size: 1.05rem;
      font-weight: 700;
      color: #003c9e;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
  }

  /* ICON */
  .faq-icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: linear-gradient(135deg, #ffb000, #ff7a00);
      position: relative;
  }

  .faq-icon::before,
  .faq-icon::after {
      content: "";
      position: absolute;
      background: #ffffff;
      border-radius: 2px;
  }

  .faq-icon::before {
      width: 14px;
      height: 2px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }

  .faq-icon::after {
      width: 2px;
      height: 14px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: opacity 0.3s ease;
  }

  .faq-item.active .faq-icon::after {
      opacity: 0;
  }

  /* CONTENT (SMOOTH ANIMATION) */
  .faq-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.45s ease, opacity 0.3s ease;
      opacity: 0;
  }

  .faq-item.active .faq-content {
      max-height: 200px;
      opacity: 1;
  }

  .faq-content p {
      padding: 0 26px 22px;
      color: #555;
      font-size: 0.95rem;
  }

  /* MOBILE */
  @media (max-width: 576px) {
      .faq-title {
          font-size: 2rem;
      }
  }

  /*brand----------------------*/

  .trusted-institutes-section {
      padding: 50px 0;
      background: linear-gradient(135deg, #003c9e, #005ad1, #007bff);
  }

  .trusted-title {
      color: #ffffff;
      font-size: 2.4rem;
      font-weight: 800;
  }

  /* GRID WITH 4 ROWS */
  .institutes-grid-4rows {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      /* 5 logos per row */
      grid-template-rows: repeat(4, auto);
      /* FORCE 4 rows */
      gap: 22px;
      padding-bottom: 0 !important;

      background: rgba(255, 255, 255, 0.08);
      padding: 40px;
      border-radius: 20px;
      backdrop-filter: blur(6px);
  }

  /* LOGO CARD */
  .logo-card {
      background: #ffffff;
      border-radius: 14px;
      padding: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.35s ease;
  }

  .logo-card img {
      max-height: 46px;
      max-width: 100%;
      object-fit: contain;
      filter: grayscale(100%);
      opacity: 0.9;
  }

  .logo-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
  }

  .logo-card:hover img {
      filter: grayscale(0);
      opacity: 1;
  }

  /* RESPONSIVE */
  @media (max-width: 1200px) {
      .institutes-grid-4rows {
          grid-template-columns: repeat(4, 1fr);
          grid-template-rows: auto;
      }
  }

  @media (max-width: 768px) {
      .institutes-grid-4rows {
          grid-template-columns: repeat(3, 1fr);
          padding: 30px;
      }
  }

  @media (max-width: 480px) {
      .institutes-grid-4rows {
          grid-template-columns: repeat(2, 1fr);
      }

      .trusted-title {
          font-size: 2rem;
      }
  }

  /*trusted new section-----------------*/

  .okb-truststats-white {
      padding: 70px 0;
      background: #ffffff;
  }

  .okb-truststats-white-heading {
      text-align: center;
      font-size: 1.35rem;
      font-weight: 600;
      color: #003c9e;
      margin-bottom: 45px;
  }

  .okb-truststats-white-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
  }

  .okb-truststats-white-card {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 22px 20px;
      border-radius: 14px;
      background: #f2f7fd;
      border: 1px solid #e4ecf7;
      transition: all 0.3s ease;
  }

  .okb-truststats-white-card:hover {
      box-shadow: 0 12px 30px rgba(0, 60, 158, 0.12);
      transform: translateY(-4px);
  }

  .okb-truststats-white-icon {
      width: 56px;
      height: 56px;
      border-radius: 12px;
      background: linear-gradient(135deg, #ff9f1c, #ffb703);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 24px;
      flex-shrink: 0;
  }

  .okb-truststats-white-text h3 {
      margin: 0;
      font-size: 1.6rem;
      font-weight: 800;
      color: #003c9e;
  }

  .okb-truststats-white-text p {
      margin: 2px 0 0;
      font-size: 0.9rem;
      color: #5f6f8a;
  }

  /* Responsive */
  @media (max-width: 992px) {
      .okb-truststats-white-grid {
          grid-template-columns: repeat(2, 1fr);
      }
  }

  @media (max-width: 480px) {
      .okb-truststats-white-grid {
           grid-template-columns: repeat(2, 1fr);
      }
  }

  /*testimonial section---------------*/




  .testimonials-section {
      background: #f7f9fd;
  }

  .testimonial-card {
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 12px 30px rgba(0, 60, 158, 0.08);
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .testimonial-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 30px rgba(0, 60, 158, 0.12);
  }

  .testimonial-icon {
      font-size: 2rem;
      color: #ffb000;
  }

  .testimonial-text {
      font-size: 0.95rem;
      color: #555;
      margin-bottom: 18px;
      line-height: 1.5;
  }

  .testimonial-name {
      font-weight: 600;
      color: #003c9e;
      margin-bottom: 2px;
  }

  .testimonial-course {
      font-size: 0.85rem;
      color: #777;
  }

  /* Responsive */
  @media (max-width: 768px) {
      .testimonial-card {
          padding: 20px;
      }
  }

  .carousel-indicators button {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: none;
      margin: 0 4px;
      opacity: 0.7;
  }

  .carousel-indicators .active {
      opacity: 1;
  }

  @media (max-width: 768px) {
      .testimonial-card {
          max-width: 90% !important;
      }
  }



  /*exam new section start------------------------------------*/


  .exam-modern-section {
      background: linear-gradient(180deg, #f8fbff, #ffffff);
  }

  .exam-left-panel {
      background: #003c9e;
      color: #fff;
      padding: 60px 40px;
      border-radius: 30px;
      position: relative;
      overflow: hidden;
  }

  .exam-left-panel::after {
      content: "";
      position: absolute;
      width: 180px;
      height: 180px;
      background: rgb(0 189 255 / 20%);
      border-radius: 50%;
      top: -40px;
      right: -40px;
  }

  .exam-badge {
      background: rgba(255, 255, 255, 0.15);
      padding: 8px 16px;
      font-size: 0.95rem;
      letter-spacing: 1px;
  }

  .exam-title {
      font-size: 2.4rem;
      font-weight: 800;
      line-height: 1.2;
  }

  .exam-title span {
      color: #ff7a00;
  }

  .exam-desc {
      margin-top: 15px;
      color: #dbe6ff;
      line-height: 1.6;
  }

  .exam-card {
      background: #fff;
      border-radius: 18px;
      padding: 30px 20px;
      text-align: center;
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
      height: 100%;
  }

  .exam-card:hover {
      transform: translateY(-6px);
  }

  .exam-card h6 {
      margin-top: 14px;
      font-weight: 600;
      color: #003c9e;
  }

  .icon-box {
      width: 60px;
      height: 60px;
      margin: auto;
      background: linear-gradient(135deg, #003c9e, #007bff);
      color: #fff;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
  }

  @media (max-width: 991px) {
      .exam-left-panel {
          text-align: center;
      }
  }


  .program-pill {
      display: flex;
      max-width: 900px;
      margin: 12px auto;
      background: linear-gradient(90deg, #0056b1, #ff8c2b);
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 10px 25px rgba(255, 122, 24, 0.25);
  }

  .pill-item {
      flex: 1;
      text-align: center;
      padding: 12px 10px;
      font-size: 1.2rem;
      font-weight: 600;
      color: #ffffff;
      position: relative;
  }

  /* Divider line */
  .pill-item:not(:last-child)::after {
      content: "";
      position: absolute;
      right: 0;
      top: 15%;
      height: 70%;
      width: 1px;
      background: rgba(255, 255, 255, 0.4);
  }

  /* Hover effect */
  .pill-item:hover {
      background: rgba(255, 255, 255, 0.1);
      cursor: pointer;
  }

  /* Responsive */
  @media (max-width: 576px) {
      .program-pill {
          flex-direction: row;
          border-radius: 20px;
      }

      .pill-item:not(:last-child)::after {
          display: none;
      }

      .pill-item {
          padding: 14px;
          font-size: 1.05rem;
      }
  }


  /*process new design--------------------------*/






  /*process arrow design----------------------------*/
  .process-clean {
      background: #f8fbff;
  }

  .process-badge {
      background: #ffe7cf;
      color: #ff7a00;
      padding: 8px 18px;
      border-radius: 50px;
      font-weight: 600;
  }

  .process-title {
      font-size: 2rem;
      font-weight: 700;
      color: #003c9e;
  }

  .process-subtitle {
      color: #6b7280;
      margin-top: 8px;
  }

  /* LAYOUT */
  .process-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
  }

  /* STEP */
  .process-step {
      width: 190px;
      text-align: center;
  }

  .process-step.down {
      margin-top: 70px;
  }

  .step-circle {
      display: inline-flex;
      width: 36px;
      height: 36px;
      background: #ff7a00;
      color: #fff;
      border-radius: 50%;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      margin-bottom: 10px;
  }

  .process-step i {
      font-size: 2.3rem;
      color: #003c9e;
      margin: 10px 0;
  }

  .process-step h6 {
      font-weight: 700;
      color: #003c9e;
  }

  .process-step p {
      font-size: 0.9rem;
      color: #6b7280;
  }

  /* SVG ARROWS */
  .process-arrow svg {
      width: 110px;
      height: 55px;
  }

  .process-arrow path {
      fill: none;
      stroke: #ff7a00;
      stroke-width: 3;
  }

  .process-arrow polygon {
      fill: #ff7a00;
  }

  .process-arrow.flip {
      transform: rotate(319deg);
  }

  /* MOBILE */
  @media (max-width: 992px) {
      .process-row {
          flex-direction: column;
      }

      .process-arrow {
          display: none;
      }

      .process-step.down {
          margin-top: 0;
      }
  }

  /* Mobile layout fix */
  @media (max-width: 768px) {

      .process-row {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          /* 2 cards per row */
          gap: 20px;
          align-items: stretch;
      }

      /* Hide arrows on mobile (they break layout) */
      .process-arrow {
          display: none;
      }

      /* Normalize step alignment */
      .process-step,
      .process-step.down {
          transform: none;
      }

      .process-step {
          padding: 18px 14px;
          border-radius: 14px;
      }

      .step-circle {
          margin-bottom: 8px;
      }
  }



  /*price---------------------------*/


  .pricing-section {
      background: #f8fbff;
  }

  .pricing-title {
      font-size: 2rem;
      font-weight: 700;
      color: #003c9e;
  }

  .pricing-subtitle {
      color: #6b7280;
      margin-top: 10px;
  }

  /* CARD */
  .pricing-card {
      background: #ffffff;
      padding: 35px 30px;
      border-radius: 20px;
      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);
      position: relative;
      height: 100%;
  }

  .pricing-card.featured {
      border: 2px solid #ff7a00;
      transform: translateY(10px);
  }

  .pricing-card.institute {
      background: linear-gradient(180deg, #003c9e, #002b73);
      color: #fff;
  }

  .plan-name {
      font-weight: 700;
      font-size: 1.3rem;
      margin-bottom: 15px;
  }

  .plan-price {
      font-size: 2.2rem;
      font-weight: 800;
      color: #ff7a00;
      margin-bottom: 20px;
  }

  .plan-price span {
      font-size: 1rem;
      color: #6b7280;
  }

  .institute .plan-price span,
  .institute .plan-name {
      color: #fff;
  }

  /* FEATURES */
  .plan-features {
      list-style: none;
      padding: 0;
      margin-bottom: 25px;
  }

  .plan-features li {
      margin-bottom: 12px;
      font-size: 0.95rem;
  }

  .plan-features i {
      color: #ff7a00;
      margin-right: 8px;
  }

  /* BADGE */
  .best-badge {
      position: absolute;
      top: -11px;
      left: 50%;
      transform: translateX(-50%);
      background: #ff7a00;
      color: #fff;
      padding: 6px 16px;
      font-size: 0.8rem;
      border-radius: 30px;
      font-weight: 600;
  }

  /* BUTTONS */
  .btn-warning {
      background: #ff7a00;
      border: none;
      color: #fff;
  }

  .btn-warning:hover {
      background: #e56b00;
  }

  .pricing-note {
      font-size: 0.95rem;
      color: #374151;
  }



  /*footer ------------------------------------*/
  /* FOOTER BASE */
  .footer-section {
      background: #003c9e;
  }

  .footer-logo {
      width: 160px;
  }

  .footer-text {
      color: #cfd8e3;
      font-size: 0.95rem;
      line-height: 1.6;
  }

  /* HEADINGS */
  .footer-heading {
      font-weight: 700;
      margin-bottom: 18px;
      font-size: 1.1rem;
  }

  /* LINKS */
  .footer-links {
      list-style: none;
      padding: 0;
  }

  .footer-links li {
      margin-bottom: 10px;
  }

  .footer-links a {
      color: #cfd8e3;
      text-decoration: none;
      transition: 0.3s;
  }

  .footer-links a:hover {
      color: #ff7a00;
  }

  /* CONTACT */
  .footer-section p i {
      color: #ff7a00;
      margin-right: 8px;
  }

  /* SOCIAL */
  .footer-social {
      display: flex;
      gap: 14px;
  }

  .footer-social a {
      width: 40px;
      height: 40px;
      background: rgba(255, 255, 255, 0.12);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      color: #fff;
      transition: 0.3s;
  }

  .footer-social a:hover {
      background: #ff7a00;
  }

  /* SUBSCRIBE (SINGLE UNIT) */
  .footer-subscribe {
      display: flex;
      background: #ffffff;
      border-radius: 10px;
      overflow: hidden;
  }

  .footer-subscribe input {
      flex: 1;
      border: none;
      padding: 12px 8px;
      font-size: 0.9rem;
      outline: none;
  }

  .footer-subscribe button {
      background: #ff7a00;
      color: #fff;
      border: none;
      padding: 0 22px;
      font-weight: 600;
      cursor: pointer;
      transition: 0.3s;
  }

  .footer-subscribe button:hover {
      background: #e56b00;
  }

  /* DIVIDER */
  .footer-divider {
      margin: 40px 0 20px;
      border-color: rgba(255, 255, 255, 0.15);
  }

  /* BOTTOM */
  .footer-bottom {
      font-size: 0.9rem;
      color: #cfd8e3;
  }

  /* MOBILE */
  @media (max-width: 576px) {
      .footer-subscribe {
          flex-direction: column;
      }

      .footer-subscribe button {
          width: 100%;
          padding: 12px;
      }
  }

  /*counseling price----------------------------------*/

  /* ===================== Counseling Section ===================== */
  .counseling-section {
      background: linear-gradient(180deg, #f7faff, #ffffff);
      padding: 50px 0;
      font-family: 'Poppins', sans-serif;
  }

  /* ===================== Section Titles ===================== */
  .section-title {
      font-weight: 700;
      font-size: 2rem;
      color: #0b3c8a;
      margin-bottom: 8px;
      letter-spacing: 0.5px;
  }

  .section-subtitle {
      color: #6c757d;
      font-size: 1.1rem;
      margin-bottom: 40px;
      line-height: 1.6;
  }

  /* ===================== Counseling Cards ===================== */
  .counsel-card {
      position: relative;
      /* Ensure badge can position relative to the card */
      background: #fff;
      border-radius: 12px;
      padding: 30px 20px 20px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .counsel-card {
      height: 100%;
      display: flex;
      flex-direction: column;
  }

  .counsel-card ul {
      flex-grow: 1;
  }

  .counsel-card a.btn {
      margin-top: auto;
  }

  .counsel-card.featured {
      border: 2px solid #ff7a00;
      /* Highlight featured card */
      transform: translateY(-10px);
  }

  .badge-best {
      position: absolute;
      top: -10px;
      /* Pull it above the card */
      right: -10px;
      background: #ff7a00;
      /* Orange badge for visibility */
      color: #fff;
      font-size: 0.8rem;
      font-weight: 600;
      padding: 5px 12px;
      border-radius: 8px;
      z-index: 10;
      /* Ensure it's on top */
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }

  .counsel-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
  }

  .counsel-card h5 {
      font-weight: 700;
      margin-bottom: 12px;
      font-size: 1.25rem;
      color: #0b3c8a;
  }

  .price {
      font-size: 2.2rem;
      font-weight: 800;
      color: #ff8c00;
      margin-bottom: 20px;
      letter-spacing: 0.5px;
  }

  .counsel-card ul {
      padding-left: 0;
      list-style: none;
      margin-bottom: 20px;
  }

  .counsel-card ul li {
      padding-left: 28px;
      position: relative;
      margin-bottom: 12px;
      color: #555;
      font-size: 0.97rem;
  }

  .counsel-card ul li::before {
      content: "✔";
      position: absolute;
      left: 0;
      color: #ff8c00;
      font-weight: 700;
      font-size: 1rem;
      top: 0;
  }

  /* ===================== Featured Card ===================== */
  .featured {
      border: 2px solid #ff8c00;
      position: relative;
      z-index: 1;
  }

  .badge-best {
      position: absolute;
      top: -14px;
      right: 20px;
      background: #ff8c00;
      color: #fff;
      padding: 6px 16px;
      border-radius: 25px;
      font-size: 0.85rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }

  /* ===================== Buttons ===================== */
  .btn-theme {
      background: #ff8c00;
      color: #fff;
      border-radius: 12px;
      padding: 10px 28px;
      font-weight: 600;
      transition: all 0.3s ease;
  }

  .btn-theme:hover {
      background: #e67600;
      color: #fff;
      transform: translateY(-2px);
  }

  .btn-outline-theme {
      border: 2px solid #ff8c00;
      color: #ff8c00;
      border-radius: 12px;
      padding: 10px 28px;
      font-weight: 600;
      transition: all 0.3s ease;
  }

  .btn-outline-theme:hover {
      background: #ff8c00;
      color: #fff;
      transform: translateY(-2px);
  }

  .btn-whatsapp {
      background: #25d366;
      color: #fff;
      border-radius: 12px;
      padding: 10px 28px;
      font-weight: 600;
      transition: all 0.3s ease;
  }

  .btn-whatsapp:hover {
      background: #1ebe5d;
      color: #fff;
      transform: translateY(-2px);
  }

  /* ===================== Responsive Improvements ===================== */
  @media (max-width: 991px) {
      .counsel-card {
          padding: 25px 20px;
      }

      .price {
          font-size: 1.8rem;
      }
  }

  @media (max-width: 575px) {
      .section-title {
          font-size: 1.8rem;
      }

      .section-subtitle {
          font-size: 1rem;
      }
  }

  /*add design----------------------------------*/

  /* ===== TOP SERVICES ===== */
  .service-card {
      border-radius: 16px;
      padding: 30px;
      color: #fff;
      height: 100%;
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  }

  .service-card h4 {
      font-weight: 600;
      margin-bottom: 15px;
  }

  .service-card ul {
      list-style: none;
      padding: 0;
  }

  .service-card ul li {
      margin-bottom: 10px;
      font-size: 15px;
  }

  .service-card ul li::before {
      content: "✔";
      color: #ffd35a;
      margin-right: 8px;
      font-weight: 700;
  }

  .btn-orange2 {
      background: #ff6a00;
      color: #fff;
      font-weight: 600;
      border-radius: 30px;
      padding: 8px 22px;
  }

  .btn-orange2:hover {
      background: #e55f00;
      color: #fff;
  }

  .btn-blue {
      background: #0d47a1;
      color: #fff;
      font-weight: 600;
      border-radius: 30px;
      padding: 8px 22px;
  }

  .btn-blue:hover {
      background: #08306b;
      color: #fff;
  }

  /* ===== CAREER CARDS ===== */
  .career-card {
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  }

  .career-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(13, 43, 91, 0.9), rgba(13, 43, 91, 0.6));
      padding: 40px;
      color: #fff;
  }

  .career-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .career-overlay h3 {
      font-weight: 700;
      margin-bottom: 10px;
  }

  .career-overlay p {
      font-size: 15px;
      margin-bottom: 20px;
  }

  @media (max-width: 768px) {
      .career-overlay {
          padding: 25px;
      }
  }

  /*admission section---------------------------*/

  /* ===== SECTION ===== */
  .admission-section {
      background: linear-gradient(135deg, #0d47a1 0%, #1565c0 60%);
      color: #ffffff;
      padding: 50px 0;
  }

  /* ===== HEADINGS ===== */
  .admission-section h1 {
      font-weight: 700;
      font-size: 42px;
      color: #ffffff;
  }

  .admission-section h1 span {
      color: #ffb300;
  }

  .admission-section p {
      color: #e3f2fd;
      font-size: 17px;
      max-width: 932px;
      margin: auto;
  }

  /* ===== CARDS ===== */
  .admission-card {
      background: #fff;
      border-radius: 18px;
      padding: 4px;
      height: 100%;
      box-shadow: 0 12px 35px rgba(13, 71, 161, .25);
      transition: .3s ease;
  }


  .admission-card:hover {
      transform: translateY(-6px);
  }

  .admission-img {
      width: 100%;
      height: 160px;
      object-fit: cover;
      border-radius: 14px;
      margin-bottom: 18px;
  }

  .admission-card h4 {
      font-weight: 600;
      color: #0d47a1;
      margin-bottom: 10px;
  }

  .admission-card p {
      font-size: 14.5px;
      color: #444;
      padding: 0 20px 30px 20px;
  }




  /* ===== LOGO STRIP ===== */
  .logo-strip {
      background: #ffffff;
      border-radius: 12px;
      padding: 16px;
      margin: 40px auto;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
  }

  .logo-strip img {
      height: 60px;
      object-fit: contain;
  }

  /* ===== CTA BUTTON ===== */
  .btn-admission {
      background: linear-gradient(135deg, #ff9800, #ff6f00);
      border: none;
      color: #fff;
      font-weight: 600;
      padding: 14px 38px;
      border-radius: 40px;
      box-shadow: 0 10px 30px rgba(255, 143, 0, .45);
  }

  .btn-admission:hover {
      background: #ff6f00;
  }

  /* ===== RESPONSIVE ===== */
  @media(max-width:768px) {
      .admission-section h1 {
          font-size: 30px;
      }
  }

  @media(max-width:768px) {
      .admission-img {
          height: 140px;
      }
  }


  /*nino section--------------------*/

  .nio-save-year {
      background: linear-gradient(135deg, #0d47a1, #1565c0);
      padding: 70px 0;
  }

  .nio-card {
      background: #ffffff;
      border-radius: 16px;
      padding: 30px;
      height: 100%;
      text-align: center;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .nio-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  }

  .nio-card-img {
      width: 100%;
      height: 160px;
      object-fit: cover;
      border-radius: 14px;
      margin-bottom: 18px;
  }

  .nio-card h5 {
      font-weight: 600;
      margin-top: 15px;
      color: #0d47a1;
  }

  .nio-card p {
      font-size: 15px;
      color: #555;
      margin-top: 10px;
  }

  .nio-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 26px;
      margin-bottom: 10px;
  }








  /* ===============================
   NWAC NIOS SAVE YEAR SECTION
================================ */

  .nio-save-year {
      background: linear-gradient(135deg, #0d47a1, #1565c0);
      padding: 70px 0;
  }

  .nio-card {
      background: #ffffff;
      border-radius: 16px;
      padding: 30px;
      height: 100%;
      text-align: center;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      transition: 0.3s ease;
  }

  .nio-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  }

  .nio-card h5 {
      font-weight: 600;
      margin-top: 15px;
      color: #0d47a1;
  }

  .nio-card p {
      font-size: 15px;
      color: #555;
      margin-top: 10px;
  }

  .nio-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;

  }


  /*floating whatsapp--------------*/

  /* ==============================
   Floating Call & WhatsApp Button
============================== */

  .floating-contact {
      position: fixed;
      right: 20px;
      bottom: 20px;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      gap: 14px;
  }

  .float-btn {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 24px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      text-decoration: none;
  }

  .float-btn:hover {
      transform: scale(1.1);
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  }

  /* Call Button */
  .call-btn {
      background: #ff7a00;
      /* Orange */
  }

  /* WhatsApp Button */
  .whatsapp-btn {
      background: #25D366;
      /* WhatsApp Green */
  }

  /* Mobile adjustment */
  @media (max-width: 576px) {
      .floating-contact {
          right: 14px;
          bottom: 14px;
      }
  }

.js-card-slider {
  position: relative;
}

.slider-container{position: relative;}

.slider-viewport {
  overflow: hidden;
}

.slider-wrapper {
  display: flex;
  transition: transform 0.4s ease;
}

.slider-item {
  flex: 0 0 100%;
/*  padding: 0 12px;*/
}

/* Desktop view = normal cards */
@media (min-width: 769px) {
  .slider-wrapper {
    transform: none !important;
    gap: 24px;
    justify-content: center;
  }

  .slider-item {
    flex: 0 0 32.333%;
  }

  .slider-arrow {
    display: none !important;
  }
}

/* Mobile arrows */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #000;
  color: #fff;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  z-index: 10;
}

.arrow-left { left: 10px; }
.arrow-right { right: 10px; }