/* ---------------- Design tokens ---------------- */
   :root {
       --accent: #ef652fb6;
       --accent-600: #d9541e;
       --bg: #f5f7fb;
       --card-radius: 12px;
       --muted: #6b6f76;
       --text: #0f172a;
       --glass: rgba(255, 255, 255, 0.06);
   }

   /* ---------- Reset & base ---------- */
   *,
   *::before,
   *::after {
       box-sizing: border-box;

   }

   html,
   body {
       height: 100%
   }

   body {
       margin: 0;
       font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
       background: var(--bg);
       color: var(--text);
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
       line-height: 1.5;
   }

   .container {
       max-width: 1100px;
       margin: 0 auto;
       padding: 0 18px;
   }

   /* ---------- KEEP ORIGINAL HERO H4 EXACT STYLE ---------- */
   /* The user requested: keep the "Apprenticeship Program in Lucknow & Noida" section EXACT as original.
       So we DO NOT override the inline style used originally on that h4 (border-left:4px solid #ef662f;padding-left:10px). */

   /* ---------- Inner Head (slightly tuned) ---------- */


   /* ---------- Hero (we keep markup & inline h4 intact) ---------- */
   .course-hero {
       padding: 28px 0
   }

   .course-hero .lead {
       font-size: 15.6px;
       color: #333;
       text-align: justify
   }

   .lead-text p {
       font-size: 14px;
       line-height: 1.8;
       color: #666;
       margin-bottom: 10px;
       text-align: justify;
       border-left: 3px solid #ef662f;
       padding: 10px;
       transition: 0.2s ease;
   }

   .lead-text p:hover {
       transform: translateY(-5px);
   }

   .hero-points {
       margin-top: 16px
   }

   .hero-point {
       display: flex;
       align-items: center;
       gap: 10px;
       color: #344054;
       padding: 6px 0;
       font-weight: 600
   }

   .hero-point i {
       color: var(--accent)
   }

   .hero-actions {
       margin-top: 16px
   }

   .btn.btn-softpro {
       background-color: #ef662f;
       color: #fff !important;
       padding: 15px 35px;
       border-radius: 50px;
       font-weight: 700;
       border: none;
       transition: all 0.3s;
       box-shadow: 0 8px 20px rgba(239, 102, 47, 0.2);
   }

   .btn.btn-softpro:hover {
       transform: translateY(-2px);
       box-shadow: 0 10px 30px rgba(217, 84, 30, 0.12)
   }

   .contact-box {
       background: #fff;
       border-radius: 10px;
       padding: 12px;
       border: 1px solid #eef2f6;
       display: flex;
       gap: 12px;
       align-items: center;
       justify-content: space-between;
   }

   .contact-box .card-box {
       margin: 0;
       color: #222;
       font-size: 15px
   }

   .contact-box i.fa-location {
       color: var(--accent)
   }

   /* ---------- Section blocks: odd are accent (glass) ---------- */
   .section-block {
       padding: 52px 0
   }

   .section-block:nth-of-type(odd) {
       background: linear-gradient(135deg, var(--accent-600), var(--accent));
       color: #fff;
   }

   .section-block:nth-of-type(odd) .clean-card {
       background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
       border: 1px solid rgba(255, 255, 255, 0.10);
       color: #fff;
       box-shadow: none;
   }

   .section-block:nth-of-type(odd) .clean-list li {
       border-color: rgba(255, 255, 255, 0.06);
       color: rgba(255, 255, 255, 0.95)
   }

   .section-block:nth-of-type(odd) h4,
   .section-block:nth-of-type(odd) p,
   .section-block:nth-of-type(odd) li {
       color: #fff
   }

   .section-block:nth-of-type(even) {
       background: #fff;
       color: var(--text)
   }

   /* ---------- Feature cards (Problem/Solution/Objective) ---------- */
   .cards-row {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 18px;
       margin: 18px 0 26px
   }

   .feature-card {
       border-radius: 12px;
       padding: 18px;
       background: #fff;
       border: 1px solid #eef2f6;
       box-shadow: 0 8px 22px rgba(16, 24, 40, 0.06);
       transition: transform .28s, box-shadow .28s;
       min-height: 170px;
       display: flex;
       flex-direction: column;
       gap: 12px;
   }

   .feature-card:hover {
       transform: translateY(-6px);
       box-shadow: 0 28px 50px rgba(16, 24, 40, 0.12)
   }

   .feature-card .icon {
       width: 48px;
       height: 48px;
       border-radius: 10px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       background: linear-gradient(135deg, rgba(239, 102, 47, 0.10), rgba(217, 84, 30, 0.04));
       color: var(--accent);
       font-size: 18px;
       border: 1px solid rgba(239, 102, 47, 0.10)
   }

   .feature-card h3 {
       font-family: "Poppins";
       font-size: 17px;
       margin: 0;
       color: var(--text)
   }

   .feature-card p {
       margin: 0;
       color: var(--muted);
       flex: 1;
       font-size: 14px
   }

   /* inside accent section: invert look */
   .section-block:nth-of-type(odd) .feature-card {
       background: rgba(255, 255, 255, 0.04);
       border: 1px solid rgba(255, 255, 255, 0.08);
       color: #fff;
       box-shadow: none;
       text-align: center;
   }

   .section-block:nth-of-type(odd) .feature-card h3 {
       color: #fff
   }

   .section-block:nth-of-type(odd) .feature-card p {
       color: rgba(255, 255, 255, 0.92)
   }

   .section-block:nth-of-type(odd) .feature-card .icon {
       /* background: rgba(255, 255, 255, 0.06); */
       color: #fff;
       text-align: center;
       width: 100%;

       /* border-color: rgba(255, 255, 255, 0.08) */
   }

   .section-block:nth-of-type(odd) .feature-card .icon i {
       font-size: 50px;
   }

   /* ---------- Why grid ---------- */
   .why-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 14px;
       margin-top: 12px
   }

   .why-card {
       border-radius: 10px;
       padding: 14px;
       background: #fff;
       border: 1px solid #f1f5f9;
       box-shadow: 0 6px 22px rgba(16, 24, 40, 0.04);
       display: flex;
       gap: 12px;
       font-family: "Poppins", sans-serif;
       align-items: flex-start;
   }

   .why-card i {
       font-size: 18px;
       color: var(--accent);
       min-width: 32px;
       margin-top: 6px
   }

   .why-card h5 {
       margin: 0;
       font-size: 15px;
       color: var(--text);
       font-weight: 700
   }

   .why-card p {
       margin: 4px 0 0 0;
       color: var(--muted);
       font-size: 13px
   }

   .section-block:nth-of-type(odd) .why-card {
       background: rgba(255, 255, 255, 0.03);
       border: 1px solid rgba(255, 255, 255, 0.08);
       box-shadow: none
   }

   .section-block:nth-of-type(odd) .why-card h5 {
       color: #fff
   }

   .section-block:nth-of-type(odd) .why-card p {
       color: rgba(255, 255, 255, 0.88)
   }

   .section-block:nth-of-type(odd) .why-card i {
       color: rgba(255, 255, 255, 0.95)
   }

   /* ---------- Eligibility bar ---------- */
   .eligibility-bar {
       display: flex;
       justify-content: space-between;
       align-items: center;
       gap: 12px;
       padding: 14px;
       border-radius: 10px;
       background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
       border: 1px solid rgba(0, 0, 0, 0.04);
       margin-top: 16px;
   }

   .elig-tags {
       display: flex;
       gap: 10px;
       flex-wrap: wrap
   }

   .elig-tag {
       padding: 8px 12px;
       border-radius: 999px;
       background: rgba(0, 0, 0, 0.06);
       font-weight: 700;
       color: var(--text);
       border: 1px solid rgba(0, 0, 0, 0.04)
   }

   .section-block:nth-of-type(odd) .elig-tag {
       background: rgba(255, 255, 255, 0.08);
       color: #fff;
       border: 1px solid rgba(255, 255, 255, 0.08)
   }

   /* ---------- Gallery (compact) ---------- */
   .gallery-wrap {

       padding: 14px;
       border-radius: 10px;
       /* box-shadow: 0 10px 30px rgba(16, 24, 40, 0.06) */
   }

   .gallery-head {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 10px
   }

   .gallery-title {
       font-weight: 700;
       font-size: 25px;
       color: #fff
   }

   .gallery-sub {
       color: #fff;
       font-size: 13px
   }

   /* Swiper compact card */
   .swiper-container.gallery-swiper {
       padding-bottom: 18px
   }

   .swiper-wrapper {
       align-items: stretch
   }

   .swiper-slide {
       display: flex;
       justify-content: center;
       align-items: flex-start
   }

   .card-slide {
       width: 100%;
       /* max-width: 260px; */
       border-radius: 12px;
       overflow: hidden;
       background: #fff;
       box-shadow: 0 8px 28px rgba(16, 24, 40, 0.06);
       transition: transform .28s;
       display: flex;
       flex-direction: column;
       border: 1px solid #f1f5f9;
   }

   .card-slide:hover {
       transform: translateY(-6px);
       box-shadow: 0 24px 48px rgba(16, 24, 40, 0.12)
   }

   .card-media {
       position: relative;
       overflow: hidden;
       background: #f1f1f1
   }

   .card-media img {
       /* width: 100%; */
       height: 250px;
       object-fit: center !important;
       /* border: 2px dashed #fff; */
       /* padding: 7px; */
       display: block;
       transition: transform .5s
   }

   .card-slide:hover .card-media img {
       transform: scale(1.04)
   }

   .badge-top {
       position: absolute;
       left: 10px;
       top: 10px;
       background: rgba(0, 0, 0, 0.55);
       color: #fff;
       padding: 6px 10px;
       border-radius: 999px;
       font-weight: 600;
       font-size: 12px
   }

   .view-btn {
       position: absolute;
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
       background: rgba(0, 0, 0, 0.48);
       color: #fff;
       padding: 8px 12px;
       border-radius: 999px;
       opacity: 0;
       transition: opacity .18s
   }

   .card-slide:hover .view-btn {
       opacity: 1
   }

   .card-caption {
       padding: 12px 14px;
       text-align: left;
       background: linear-gradient(180deg, #fff, #fbfbfb)
   }

   .card-caption .title {
       font-weight: 700;
       font-size: 14px;
       color: var(--accent)
   }

   .card-caption .meta {
       color: var(--muted);
       font-size: 13px;
       margin-top: 6px
   }

   .section-block:nth-of-type(odd) .card-slide {
       background: rgba(255, 255, 255, 0.04);
       border: 1px solid rgba(255, 255, 255, 0.06)
   }

   .section-block:nth-of-type(odd) .card-caption {
       background: #fff;
       color: #000;
   }

   .section-block:nth-of-type(odd) .card-caption .title {
       color: #000000
   }

   .section-block:nth-of-type(odd) .card-caption .meta {
       color: rgba(0, 0, 0, 0.9)
   }

   .section-block:nth-of-type(odd) .badge-top {
       background: rgba(0, 0, 0, 0.5)
   }

   /* ---------- small helpers ---------- */
   .clean-card {
       background: #fff;
       border-radius: 10px;
       padding: 18px;
       box-shadow: 0 6px 20px rgba(16, 24, 40, 0.04)
   }

   .clean-list li {
       padding: 10px 0;
       border-bottom: 1px solid #f1f5f9
   }

   .clean-list li i {
       color: var(--accent)
   }

   /* ---------- Responsive ---------- */
   @media (max-width: 992px) {
       .cards-row {
           grid-template-columns: 1fr
       }

       .why-grid {
           grid-template-columns: 1fr 1fr;
           gap: 12px
       }

       .card-slide {
           max-width: 320px
       }
   }

   @media (max-width: 768px) {
       .why-grid {
           grid-template-columns: 1fr
       }

       .contact-box {
           flex-direction: column;
           align-items: flex-start;
           gap: 10px
       }

       .course-hero {
           padding-bottom: 12px
       }

       .card-media img {
           height: 140px
       }
   }

   @media (max-width:480px) {
       .card-media img {
           height: 120px
       }
   }

   .dual-tech-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 10px;
       margin-top: 20px;
   }

   .course-card {
       background: #fff;
       border-radius: 14px;
       overflow: hidden;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
       transition: all .35s ease;
   }

   .course-card:hover {
       transform: translateY(-8px);
       box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
   }

   .course-img {
       height: 200px;
       overflow: hidden;
       padding: 13px;
   }

   .course-img img {
       width: 100%;
       height: 100%;
       object-fit: center;
   }

   .course-body {
       padding: 22px;
       text-align: center;
   }

   .course-title {
       font-size: 20px;
       font-weight: 700;
       margin-bottom: 6px;
       color: #111;
   }

   .course-meta {
       color: #777;
       font-size: 14px;
       margin-bottom: 18px;
   }

   .btn-course {
       background: #ef662f;
       color: #fff;
       padding: 10px 20px;
       border-radius: 30px;
       font-weight: 600;
       display: inline-block;
       text-decoration: none;
       transition: .3s;
   }

   .btn-course:hover {
       background: #d9541e;
       color: #fff;
   }

   @media(max-width:768px) {

       .dual-tech-grid {
           grid-template-columns: 1fr;
       }

   }

   .section-title {
       font-size: 30px;
       font-weight: 800;
       margin-bottom: 25px;
       margin-top: 15px;
   }

   .tech-section .card {
       background: #fff4ec;
       border: 2px dashed #ff934b;
       border-radius: 0;
       box-shadow: none;
       height: 100%;
       transition: 0.3s ease;
   }

   .tech-section .card:hover {
       transform: translateY(-4px);
       background: #ffefe4;
   }

   .tech-section .card-header {
       background: transparent;
       border-bottom: 1px solid rgba(255, 143, 68, 0.35);
       color: #ff8945;
       font-size: 21px;
       font-weight: 700;
       line-height: 1.4;
       padding: 22px 22px 14px;
       /* min-height: 88px; */
       display: flex;
       align-items: center;
   }

   .tech-section .card-body {
       padding: 18px 22px 24px;
       color: #4a372b;
       font-size: 15.5px;
       line-height: 1.9;
   }

   .tech-section .tech-stack {
       display: block;
       font-weight: 700;
       color: #a54b18;
       margin-bottom: 10px;
       font-size: 15px;
       line-height: 1.8;
   }

   @media (max-width: 991px) {

       .tech-section .col-lg-3,
       .tech-section .col-md-6 {
           margin-bottom: 20px;
       }

       .tech-section .card-header {
           min-height: auto;
           font-size: 18px;
           padding: 18px 18px 12px;
       }

       .tech-section .card-body {
           padding: 14px 18px 18px;
           font-size: 15px;
       }
   }

   .tech-section {
       display: flex;
       flex-wrap: wrap;
   }

   .tech-section>[class*="col-"] {
       display: flex;
       margin-bottom: 24px;
   }

   .tech-section .card {
       background: #fff4ec;
       border: 2px dashed #c96a2b;
       border-radius: 0;
       box-shadow: none;
       width: 100%;
       display: flex;
       flex-direction: column;
       height: 100%;
   }

   .tech-section .card-header {
       background: transparent;
       border-bottom: 1px solid rgba(201, 106, 43, 0.35);
       color: #f07a2f;
       font-size: 20px;
       font-weight: 700;
       line-height: 1.4;
       padding: 22px 22px 16px;
       min-height: 96px;
       display: flex;
       align-items: center;
   }

   .tech-section .card-body {
       padding: 18px 22px 24px;
       color: #4a372b;
       font-size: 15.5px;
       line-height: 1.9;
       flex: 1;
   }

   .tech-section .tech-stack {
       display: block;
       font-weight: 700;
       color: #a54b18;
       margin-bottom: 10px;
       font-size: 15px;
       line-height: 1.8;
       min-height: 60px;
   }

   @media (max-width: 991px) {
       .tech-section .card-header {
           min-height: 80px;
           font-size: 18px;
           padding: 18px 18px 12px;
       }

       .tech-section .card-body {
           padding: 14px 18px 18px;
           font-size: 15px;
       }

       .tech-section .tech-stack {
           min-height: auto;
       }
   }