body {
      font-family: 'Segoe UI', sans-serif;
      background: #fff;
      margin: 0;
      padding: 0;
    }

    /* Hero Section */
    .hero {
      background: #fff;
      padding: 40px 0 60px;
    }

    /* Top Logos */
    .top-logos {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }
    .top-logos img {
      height: 50px;
      max-width: 140px;
    }

    /* Blue Box */
    .blue-box {
      background: #004080;
      color: #fff;
      padding: 30px 20px;
      border-top-left-radius: 20px;
      border-bottom-right-radius: 20px;
      display: inline-block;
    }
    .blue-box h2 {
      font-size: 1.6rem;
      font-weight: 700;
      margin: 0;
      line-height: 1.4;
    }

    /* Orange Circle */
    .orange-circle {
      margin-top: 40px;
      text-align: center;
    }
    .orange-circle .circle {
      width: 180px;
      height: 180px;
      border-radius: 50%;
      border: 4px dashed #ff6600;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: auto;
      padding: 10px;
    }
    .orange-circle h3 {
      color: #ff6600;
      font-weight: 700;
      font-size: 1rem;
      text-transform: uppercase;
      text-align: center;
      line-height: 1.4;
      letter-spacing: 1px;
    }
    .orange-circle h3 span {
      display: block;
      font-size: 1.2rem;
    }

    /* Student Image */
    .hero-img {
      text-align: center;
    }
    .hero-img img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
    }

    /* Responsive Fix */
    @media (max-width: 768px) {
      .blue-box {
        display: block;
        margin: auto;
        text-align: center;
      }
      .blue-box h2 {
        font-size: 1.3rem;
      }
      .orange-circle {
        margin-top: 25px;
      }
      .orange-circle .circle {
        width: 150px;
        height: 150px;
      }
      .orange-circle h3 {
        font-size: 0.9rem;
      }
      .orange-circle h3 span {
        font-size: 1.1rem;
      }
      .top-logos {
        justify-content: center;
        gap: 15px;
      }
      .top-logos img {
        height: 40px;
        max-width: 100px;
      }
    }

/* step-1-end */

 /* About Section */
    .about-section {
      background: #fff;
      padding: 80px 20px;
    }

    /* Top Header (Circle + Icons) */
    .about-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: 50px;
    }
    .about-orange-circle {
      width: 130px;
      height: 130px;
      border-radius: 50%;
      border: 4px dashed #ff6600;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #ff6600;
      font-weight: 800;
      font-size: 0.9rem;
      text-align: center;
      line-height: 1.4;
      background: #fff;
    }
    .about-icons {
      display: flex;
      gap: 20px;
      align-items: center;
      flex-wrap: wrap;
    }
    .about-icons img { height: 55px; }
    .about-icons .labels {
      display: flex;
      flex-direction: column;
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.3;
    }
    .about-icons .labels span:nth-child(1) { color: #004080; }
    .about-icons .labels span:nth-child(2) { color: #ff6600; }
    .about-icons .labels span:nth-child(3) { color: #28a745; }

    /* Section Titles */
    .section-title {
      font-size: 1.6rem;
      font-weight: 800;
      color: #004080;
      margin-bottom: 25px;
      position: relative;
      display: inline-block;
    }
    .section-title span { color: #ff6600; }
    .section-title::after {
      content: "";
      display: block;
      width: 70%;
      height: 3px;
      background: #ff6600;
      margin-top: 8px;
    }

    /* Paragraphs */
    .about-text {
      font-size: 1rem;
      line-height: 1.7;
      margin-bottom: 20px;
      color: #333;
    }
    .about-text strong { color: #004080; }
    .about-text .highlight { color: #ff6600; font-weight: 600; }

    /* Program Objective Box */
    .objective-box {
      background: #fdfdfd;
      border-left: 6px solid #ff6600;
      box-shadow: 0 3px 12px rgba(0,0,0,0.08);
      padding: 20px 25px;
      border-radius: 8px;
      margin-bottom: 30px;
    }
    .objective-box h5 {
      font-weight: 700;
      color: #004080;
      margin-bottom: 10px;
    }
    .objective-box p { margin: 0; font-size: 0.95rem; }

    /* Speech Bubble */
    .speech-box {
      position: relative;
      background: #ff6600;
      color: #fff;
      font-weight: 700;
      padding: 20px;
      border-radius: 6px;
      margin-bottom: 25px;
      text-align: center;
      font-size: 1rem;
      line-height: 1.5;
      box-shadow: 0 4px 10px rgba(0,0,0,0.15);
      transform: rotate(-2deg);
    }
    .speech-box::after {
      content: "";
      position: absolute;
      bottom: -15px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 15px 15px 0;
      border-style: solid;
      border-color: #ff6600 transparent transparent;
    }
    .speech-box span {
      display: block;
      font-size: 1.05rem;
      text-transform: uppercase;
    }

    /* Side Image */
    .side-image img {
      max-width: 100%;
      border-radius: 8px;
      box-shadow: 0 3px 12px rgba(0,0,0,0.1);
    }

    /* Responsive */
    @media (max-width: 768px) {
      .about-header { justify-content: center; gap: 20px; }
      .section-title::after { margin: auto; }
      .speech-box { transform: rotate(0); }
    }


    /* step-2-end */


    .success-section {
      padding: 80px 0;
      text-align: center;
    }
    .success-section h2 {
      font-weight: 800;
      margin-bottom: 50px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: #0a2342;
      position: relative;
    }
    .success-section h2::after {
      content: '';
      display: block;
      width: 80px;
      height: 4px;
      background: #ff7f11;
      margin: 10px auto 0;
      border-radius: 2px;
    }
    .story-card {
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.1);
      padding: 40px 30px;
      max-width: 700px;
      margin: 0 auto;
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .story-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    }
    .story-img {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      border: 6px solid #ff7f11;
      margin-bottom: 20px;
      object-fit: cover;
    }
    .story-name {
      font-weight: 700;
      font-size: 1.25rem;
      color: #0a2342;
    }
    .story-role {
      font-size: 1rem;
      color: #ff7f11;
      margin-bottom: 15px;
    }
    .story-text {
      font-size: 1rem;
      line-height: 1.7;
      color: #444;
      font-style: italic;
    }
    /* Carousel Controls */
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      background-color: #0a2342;
      border-radius: 50%;
      padding: 15px;
    }
    .carousel-indicators [data-bs-target] {
      background-color: #ff7f11;
    }
    .carousel-indicators {
      bottom: -40px;
    }

    /* step-3-end */



     /* Section Heading */
    .section-heading {
      font-size: 32px;
      font-weight: 700;
      color: #004080;
      text-transform: uppercase;
      margin-bottom: 40px;
      border-bottom: 3px solid #ff6600;
      display: inline-block;
      padding-bottom: 6px;
    }

    /* Criteria Box */
    .criteria-box h5 {
      font-weight: 700;
      color: #ff6600;
      margin-bottom: 20px;
    }
    .criteria-box ul {
      list-style: none;
      padding: 0;
      margin: 0 0 25px 0;
    }
    .criteria-box ul li {
      font-size: 16px;
      margin-bottom: 12px;
      color: #333;
      position: relative;
      padding-left: 28px;
    }
    .criteria-box ul li::before {
      content: "✔";
      color: #28a745;
      position: absolute;
      left: 0;
      top: 0;
      font-weight: bold;
    }

    /* Highlight Bars */
    .highlight-bar {
      display: inline-block;
      padding: 7px 16px;
      margin: 10px 0;
      font-weight: 600;
      border-radius: 6px;
      color: #fff;
      font-size: 15px;
    }
    .bar-orange { background: #ff6600; }
    .bar-blue { background: #004080; }
    .bar-green { background: #28a745; }

    /* Assured Placement */
    .assured {
      font-size: 28px;
      font-weight: 800;
      color: #e60000;
      margin-top: 25px;
      margin-bottom: 8px;
    }
    .small-note {
      font-size: 14px;
      color: #666;
    }

    /* Placement Box */
    .placement-box {
      background: #fff;
      border: 2px solid #004080;
      border-radius: 16px;
      padding: 25px;
      text-align: center;
      box-shadow: 0 8px 25px rgba(0,0,0,0.12);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
    }
    .placement-logo {
      max-width: 150px;
    }
    .placement-text {
      font-size: 15px;
      color: #444;
    }
    .placement-img {
      max-width: 100%;
      border-radius: 12px;
      margin-top: 10px;
    }

    /* Responsive */
    @media (max-width: 992px) {
      .section-heading { font-size: 28px; margin-bottom: 30px; }
      .criteria-box ul li { font-size: 15px; }
      .highlight-bar { font-size: 14px; padding: 6px 14px; }
      .assured { font-size: 24px; }
      .placement-text { font-size: 14px; }
    }
    @media (max-width: 576px) {
      .section-heading { font-size: 24px; }
      .criteria-box ul li { font-size: 14px; }
      .highlight-bar { font-size: 13px; padding: 5px 12px; }
      .assured { font-size: 22px; }
      .placement-text { font-size: 13px; }
      .placement-box { padding: 20px; }
    }




    /* step-4-end */


    .section-header {
      text-align: center;
      margin-bottom: 50px;
    }
    .section-header h2 {
      font-weight: bold;
      color: #023e8a;
    }
    .card-box {
      background: #fff;
      border-radius: 12px;
      padding: 30px 20px;
      min-height: 280px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      box-shadow: 0px 6px 20px rgba(0,0,0,0.08);
      border: 4px solid transparent;
      background-image: linear-gradient(#fff, #fff), 
                        linear-gradient(to right, #0077b6 50%, #ff6b35 50%);
      background-origin: border-box;
      background-clip: content-box, border-box;
      transition: all 0.4s ease-in-out;
    }
    .card-box:hover {
      transform: translateY(-8px);
      box-shadow: 0px 10px 25px rgba(0,0,0,0.15);
    }
    .card-box h4 {
      font-size: 20px;
      color: #0077b6;
      font-weight: bold;
      margin-bottom: 15px;
    }
    .card-box p {
      font-size: 15px;
      color: #444;
      margin: 0;
    }
    .highlight-text {
      color: #ff6b35;
      font-weight: bold;
      font-size: 20px;
    }
    .advantage-section {
      background: #023e8a;
      color: white;
      border-radius: 12px;
      padding: 50px 20px;
      margin-top: 50px;
    }
    .advantage-section h3 {
      font-weight: bold;
      margin-bottom: 25px;
    }
    .advantage-list li {
      margin-bottom: 12px;
      font-size: 16px;
    }
    .apply-btn {
      background: linear-gradient(90deg, #0077b6, #ff6b35);
      border: none;
      padding: 14px 32px;
      color: white;
      font-size: 18px;
      border-radius: 8px;
      margin-top: 25px;
      font-weight: bold;
      transition: 0.3s;
    }
    .apply-btn:hover {
      opacity: 0.9;
      transform: scale(1.05);
    }










     /* Heading */
    .program-section h3 {
      font-weight: 800;
      font-size: 32px;
      margin-bottom: 35px;
      text-transform: uppercase;
      color: #003566; /* Solid blue color */
      letter-spacing: 1.2px;
    }

    /* Divider */
    .divider {
      width: 80px;
      height: 4px;
      background: #003566;
      margin: 20px auto 40px auto;
      border-radius: 10px;
    }
/* Logo Slider */
.logo-slider {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100px;
  margin-bottom: 50px;
}

.logo-track {
  display: flex;
  width: calc(220px * 12);   /* desktop calculation */
  animation: scroll 22s linear infinite;
}

.logo {
  height: 100px;
  min-width: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.logo img {
  width: 150px;
  height: auto;
  object-fit: contain;
  filter: none;
  opacity: 1;
}

.logo:hover img {
  transform: scale(1.15);
  filter: grayscale(0%) brightness(1.1);
}

/* Infinite scroll animation */
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-220px * 6)); }
}

/* 📱 Responsive Fix */
@media (max-width: 768px) {
  .logo-track {
    width: calc(150px * 12);   /* smaller width for tablet */
  }
  .logo {
    min-width: 150px;
    height: 80px;
    padding: 8px;
  }
  .logo img {
    width: 100px;
  }
}

@media (max-width: 480px) {
  .logo-track {
    width: calc(120px * 12);   /* smaller width for mobile */
  }
  .logo {
    min-width: 120px;
    height: 70px;
    padding: 6px;
  }
  .logo img {
    width: 80px;
  }
}

    /* Glassmorphism Contact Box */
    .contact-box {
      margin-top: 40px;
      padding: 20px 30px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.25);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      display: inline-block;
      animation: floatBox 4s ease-in-out infinite;
      text-align: center;
    }
    .contact-box p {
      margin: 0;
      font-size: 18px;
      font-weight: 500;
      color: #003566;
    }
    .contact-box strong {
      color: #ff6600;
      font-size: 20px;
    }

    @keyframes floatBox {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }

    /* Training Centers */
    .training-centers {
      margin-top: 40px;
      font-size: 16px;
      line-height: 1.9;
      color: #333;
      font-weight: 500;
      text-align: center;
    }
    .training-centers strong {
      color: #003566;
      font-size: 18px;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .program-section h3 {
        font-size: 28px;
      }
      .logo-slider { height: 80px; }
      .logo { min-width: 180px; }
      .logo img { max-height: 60px; }
    }
    @media (max-width: 576px) {
      .program-section h3 {
        font-size: 24px;
      }
      .logo-slider { height: 60px; }
      .logo { min-width: 140px; }
      .logo img { max-height: 50px; }
    }













    
    .section-header { text-align: center; margin-bottom: 50px; }
    .section-header h2 { font-weight: bold; color: #023e8a; }
    .highlight-text { color: #ff6b35; font-weight: bold; font-size: 20px; }

    .card-box {
      background: #fff; border-radius: 12px; padding: 30px 20px; min-height: 280px;
      display: flex; flex-direction: column; justify-content: center; align-items: center;
      text-align: center; box-shadow: 0px 6px 20px rgba(0,0,0,0.08);
      border: 4px solid transparent;
      background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #0077b6 50%, #ff6b35 50%);
      background-origin: border-box;
      background-clip: content-box, border-box;
      transition: all 0.4s ease-in-out;
    }
    .card-box:hover { transform: translateY(-8px); box-shadow: 0px 10px 25px rgba(0,0,0,0.15); }
    .card-box h4 { font-size: 20px; color: #0077b6; font-weight: bold; margin-bottom: 15px; }
    .card-box p { font-size: 15px; color: #444; margin: 0; }

    .advantage-section {
      background: #023e8a; color: white; border-radius: 12px; padding: 50px 20px; margin-top: 50px;
    }
    .advantage-section h3 { font-weight: bold; margin-bottom: 25px; }
    .advantage-list li { margin-bottom: 12px; font-size: 16px; }
    .apply-btn {
      background: linear-gradient(90deg, #0077b6, #ff6b35);
      border: none; padding: 14px 32px; color: white; font-size: 18px; border-radius: 8px;
      margin-top: 25px; font-weight: bold; transition: 0.3s;
    }
    .apply-btn:hover { opacity: 0.9; transform: scale(1.05); }

    /* Modal / Popup Form */
    .modal-bg {
      display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(0,0,0,0.6); justify-content: center; align-items: center; z-index: 9999;
    }
    .modal-content {
      background: #fff; padding: 30px; border-radius: 12px; max-width: 500px; width: 95%;
      position: relative; animation: popUp 0.4s ease-in-out;
    }
    @keyframes popUp {
      0% { transform: scale(0.8); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
    }
    .modal-content h4 { text-align: center; margin-bottom: 20px; color: #0077b6; font-weight: 700; }
    .modal-content input, .modal-content select {
      width: 100%; padding: 12px 14px; margin-bottom: 15px; border-radius: 8px; border: 1px solid #ccc;
      font-size: 15px; transition: 0.3s;
    }
    .modal-content input:focus, .modal-content select:focus { border-color: #0077b6; outline: none; }
    .modal-content button {
      background: #0077b6; color: white; border: none; padding: 12px 25px; font-weight: bold;
      border-radius: 8px; width: 100%; font-size: 16px; cursor: pointer; transition: 0.3s;
    }
    .modal-content button:hover { background: #005fa3; transform: scale(1.05); }

    .close-btn {
      position: absolute; top: 15px; right: 20px; font-size: 22px; font-weight: bold; color: #333; cursor: pointer;
    }
    #formMessage { margin-top: 10px; text-align: center; color: green; font-weight: 600; }

    @media (max-width: 576px) {
      .modal-content { padding: 20px; }
      .card-box { padding: 20px; min-height: 250px; }
    }







    .section-title {
      color: #004080;
      font-weight: 700;
      margin-bottom: 10px;
    }
    .section-sub {
      color: #555;
      margin-bottom: 40px;
    }
    .info-card {
      background: #fff;
      border-radius: 15px;
      padding: 25px;
      box-shadow: 0 8px 22px rgba(0,0,0,0.08);
      margin-bottom: 30px;
      border-top: 5px solid #ff6600;
      transition: 0.3s;
    }
    .info-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 28px rgba(0,0,0,0.12);
    }
    .info-card h4 {
      color: #004080;
      font-weight: 600;
      margin-bottom: 15px;
    }
    .info-card ul {
      margin: 0;
      padding-left: 18px;
    }
    .info-card ul li {
      margin-bottom: 6px;
    }
    .btn-custom-orange {
      background: #ff6600;
      color: #fff;
      font-weight: 600;
      border-radius: 30px;
      padding: 12px 28px;
    }
    .btn-custom-orange:hover {
      background: #e65c00;
    }
    .btn-custom-blue {
      background: #004080;
      color: #fff;
      font-weight: 600;
      border-radius: 30px;
      padding: 12px 28px;
    }
    .btn-custom-blue:hover {
      background: #003366;
    }
    /* Inside card text alignment */
    .info-card .row > div {
      padding: 8px 15px;
    }
    @media (max-width: 768px) {
      .info-card .row > div {
        border-right: none;
        padding: 8px 0;
      }
    }




    .footer-section h5 {
  font-size: 1.1rem;
}

.footer-section p {
  font-size: 0.95rem;
}

.footer-section a.social-icon {
  font-size: 1.5rem;
  transition: transform 0.3s, color 0.3s;
}

.footer-section a.social-icon:hover {
  color: #ffd700; /* golden hover */
  transform: scale(1.2);
}

@media (max-width: 767px) {
  .footer-section .text-md-start {
    text-align: center !important;
  }

  .footer-section .col-md-4,
  .footer-section .col-md-5,
  .footer-section .col-md-3 {
    margin-bottom: 1.5rem;
  }
}