:root {
  --border: rgb(254, 178, 124);
}

.container{
  max-width: 95%;
  width: 100%;
}
.courses-full-slider{
  padding-left: 2.5rem;
}
.video-courses-box{
  padding-right: 1.5rem;
}
.courses-full-slider h1 {
  font-size: 48px !important;
  line-height: 1.2 !important;
  margin-bottom: 0.4rem !important;
}
/* .courses-full-slider h1 span {
  font-size: 28px !important;
} */

.courses-full-slider h4 {
  /* color: #4648D4; */
  margin-bottom: 0.6rem;
  font-size: 26px !important;
}

.courses-full-slider .list-view {
  position: relative;
}

.courses-full-slider .list-view ul{
  margin-bottom: 0px;
}
.courses-full-slider .list-view ul li {
  margin-bottom: 0.8rem;
  font-weight: 500;
  padding-left: 0;
  padding-right: 0;
  line-height: 1.4;
  display: flex;
  font-size: 14px;
}

.courses-full-slider .list-view .bi {
  font-size: 18px;
  color: #22C55E;
  font-weight: 600;
  /* position: absolute;
  margin-left: -1.5rem; */
}

.courses-full-slider .btn-blue {
  background: linear-gradient(107.82deg, #4648D4 0%, #6063EE 100%) !important;
  border-radius: 8px;
}

.courses-full-slider .btn-gray {
  background: #E2E7FF !important;
  border: 1px solid #C7C4D7 !important;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  color: #000 !important;
}

.course-card{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(70, 72, 212, 0.1);
  backdrop-filter: blur(6px);
  /* Note: backdrop-filter has minimal browser support */
  border-radius: 12px;
}
.course-card span{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  width: 56px;
  height: 56px;
  background: rgba(70, 72, 212, 0.1);
  border-radius: 15px;
  margin-bottom: 16px;
  font-size: 20px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
}
.text-blue{
  color: #4648D4;
}
.course-card h3{
  font-size: 20px !important;
  font-weight: 800 !important;
}
.course-card ul li{
  position: relative;
  padding-left: 0;
  margin-bottom: 0.8rem;
  line-height: 1.4;
  display: flex;
  flex-shrink: 0;
  font-size: 15px;
}
.course-card ul li .bi{
  color: #22C55E;
  font-size:18px;
  padding-right: 0.5rem;
}
/* .course-card ul li::after{
  font-family: "bootstrap-icons";
  content: "\F272";
  position: absolute;
  left: 0rem;
  top: 0px;
  color: #22C55E;
  font-size:22px
} */
.bestfor{
  border-top:solid 1px #edecf3;
  padding-top: 10px;
  margin-top: 2rem;
  font-weight: 500;
}
.course-card .btn{
  border: solid 2px #4648D4;
  color: #4648D4;
  padding: 0.6rem 0;
}
.course-card .btn:hover{
  border: solid 2px #4648D4;
  background: #4648D4;
  color: #FFF;
}

 :root {
    --bg-page:   #0F1323;
    --bg-pages:     #EEEEF8;
    --bg-card:   #181D31;
    --border:    rgba(255,255,255,.09);
    --brand-h:   #4338CA;
    --text-wh:   #FFFFFF;
    --text-dim:  rgba(255,255,255,.55);
    --text-xdim: rgba(255,255,255,.35);
    --strike:    rgba(255,255,255,.38);
    --accent:    #FBBF24;
    --green:     rgba(255,255,255,.7);
    --bg-cards:     #FFFFFF;
    --brand: #4F46E5;
    --brand-light: #EEF2FF;
    --brand-mid: #6366F1;
    --green: #16A34A;
    --teal:        #0E9D9D;
    --teal-light:  #E6F7F7;
    --green-light: #F0FDF4;
    --amber: #D97706;
    --amber-light: #FFFBEB;
    --red: #DC2626;
    --red-light: #FEE2E2;
    --text-dark: #111827;
    --text-body: #374151;
    --radius-card: 18px;
    --radius-btn: 10px;
    --radius-icon: 12px;
    --shadow-card: 0 2px 8px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
    --shadow-hover: 0 12px 36px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);

    --primary-purple: #6366f1;
    --light-purple: #e0e7ff;
    --light-green: #f0fdf4;
    --green-text: #16a34a;
    --bg-color: #f8f9fc;

    --bg-lavender: #e8eaff;
    --accent-purple: #4f46e5;
    --icon-bg: #dcfce7;
    --icon-green: #16a34a;
    }

    .pricing-box{
      background: var(--bg-page);
    }

  .text-green{
    color: var(--icon-green);
  }
  .text-teal{
    color: var(--teal);
  }

/* ── Featured / Ecosystem card ── */
.ecosystem-card {
  /* background: linear-gradient(135deg, #3730A3 0%, #4F46E5 45%, #6366F1 100%); */
  background: var(--gradient);
  border-radius: var(--radius-card);
  padding: 32px 28px;
  color: #fff;
  position: relative;
  overflow: hidden;
  height: 100%;
  box-shadow: 0 12px 40px rgba(79,70,229,.35);
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease;
  border-radius: 12px;
}
.ecosystem-card::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(255,255,255,.12) 0%, transparent 70%);
  border-radius: 50%;
}
.ecosystem-card::after {
  content: '';
  position: absolute;
  bottom: -40px; left: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(255,255,255,.07) 0%, transparent 70%);
  border-radius: 50%;
}
.ecosystem-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 60px rgba(79,70,229,.45);
}

.bestseller-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 50px;
  margin-bottom: 14px;
  backdrop-filter: blur(4px);
}
.bestseller-badge::before {
  content: '';
  width: 6px; height: 6px;
  background: #FCD34D;
  border-radius: 50%;
  display: inline-block;
}

.eco-module-badge {
  font-size: .72rem;
  font-weight: 700;
  /* color: rgba(255,255,255,.7); */
  letter-spacing: 0.4px;
  margin-bottom: 10px;
}

.ecosystem-title {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 10px;
}

.ecosystem-desc {
  font-size: 18px;
  color: rgba(255,255,255,.78);
  line-height: 1.4;
  margin-bottom: 22px;
  font-weight: 400;
}

.eco-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin-bottom: 22px;
}
.eco-feature {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,.88);
  line-height: 1.4;
}
.eco-feature .eco-check {
  width: 18px; height: 18px; min-width: 18px;
  background: rgba(255,255,255,.18);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem;
  margin-top: 1px;
}

.eco-best-for {
  font-size: 14px;
  color: rgba(255,255,255,.6);
  margin-bottom: 20px;
  line-height: 1.6;
}
.eco-best-for strong { color: rgba(255,255,255,.85); }

.eco-image-wrap {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
  margin-top: -7rem;
}
.eco-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.btn-enroll-eco {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  /* background: #fff; */
  /* color: var(--brand); */
  border: none;
  border-radius: var(--radius-btn);
  font-weight: 800;
  cursor: pointer;
  transition: all .22s ease;
  text-decoration: none;
  width: auto !important;
  -webkit-border-radius: var(--radius-btn);
  -moz-border-radius: var(--radius-btn);
  -ms-border-radius: var(--radius-btn);
  -o-border-radius: var(--radius-btn);
  margin-top: 0px !important;
}
/* .btn-enroll-eco:hover {
  background: #F5F3FF;
  color: #3730A3;
  transform: scale(1.02);
} */
.btn-enroll-eco i { transition: transform .22s ease; }
.btn-enroll-eco:hover i { transform: translateX(4px); }

/* ── Heading ── */
    .pricing-heading {
      /* font-family: 'Manrope', sans-serif; */
      font-size: clamp(1.6rem, 4.5vw, 3rem);
      font-weight: 900;
      color: var(--text-wh);
      line-height: 1.3;
      letter-spacing: -.02em;
    }
    .pricing-sub {
      /* font-family: 'Manrope', sans-serif; */
      font-size: clamp(.95rem, 2vw, 1.15rem);
      font-weight: 700;
      color: rgba(255,255,255,.72);
      margin-top: 14px;
    }

    /* ── Card ── */
    .price-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-card);
      padding: 40px 36px 32px;
      position: relative;
      overflow: hidden;
      /* subtle top glow */
      box-shadow: 0 0 0 1px rgba(255,255,255,.05),
                  0 32px 80px rgba(0,0,0,.5),
                  inset 0 1px 0 rgba(255,255,255,.06);
    }
    /* ambient top-center glow */
    .price-card::before {
      content: '';
      position: absolute;
      top: -80px; left: 50%;
      transform: translateX(-50%);
      width: 380px; height: 180px;
      background: radial-gradient(ellipse, rgba(79,70,229,.22) 0%, transparent 70%);
      pointer-events: none;
    }

    /* ── Feature grid ── */
    .pricing-box .feature-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px 20px;
      margin-bottom: 32px;
    }
    .pricing-box .feature-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: .88rem;
      color: rgba(255,255,255,.82);
      font-weight: 500;
    }
    .pricing-box .feature-item .fcheck {
      width: 22px; height: 22px; min-width: 22px;
      border: 1.5px solid rgba(255,255,255,.25);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,.7);
      font-size: .7rem;
      flex-shrink: 0;
    }

    .pricing-box .feature-item .fcheck .bi{
      position: relative;
      top: 2px;
    }

    /* divider */
    .pricing-box .price-divider {
      border: none;
      border-top: 1px solid var(--border);
      margin: 0 0 28px;
    }

    .pricing-box .feature-item::before{
      display: none;
    }

    /* ── Price display ── */
    .original-price {
      font-size: .95rem;
      color: var(--strike);
      text-decoration: line-through;
      text-decoration-color: var(--strike);
      font-weight: 500;
      margin-bottom: 2px;
    }
    .main-price {
      /* font-family: 'Manrope', sans-serif; */
      font-size: clamp(3rem, 8vw, 4.5rem);
      font-weight: 900;
      color: var(--text-wh);
      letter-spacing: -.03em;
      line-height: 1;
    }
    .price-period {
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .12em;
      color: rgba(255,255,255,.45);
      text-transform: uppercase;
      vertical-align: middle;
      margin-left: 4px;
    }

    /* ── Enroll button ── */
    .btn-enroll {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      padding: 17px 24px;
      /* background: var(--brand); */
      color: #fff;
      border: none;
      border-radius: var(--radius-btn);
      /* font-family: 'Manrope', sans-serif; */
      font-size: 24px;
      font-weight: 800;
      cursor: pointer;
      text-decoration: none;
      transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
      box-shadow: 0 4px 20px rgba(79,70,229,.45);
      position: relative;
      overflow: hidden;
      margin-top: 24px;
      margin-bottom: 20px;
    }
    .btn-enroll::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 60%);
      pointer-events: none;
    }
    .btn-enroll:hover {
      background: var(--brand-h);
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(79,70,229,.6);
      color: #fff;
    }
    .btn-enroll:active { transform: translateY(0); }

    /* shimmer sweep */
    @keyframes shimmer {
      0%   { background-position: -200% center; }
      100% { background-position: 200% center; }
    }
    .btn-enroll {
      /* background-image: linear-gradient(90deg,
        transparent 25%,
        rgba(255,255,255,.12) 50%,
        transparent 75%
      ), linear-gradient(var(--brand), var(--brand)); */
      background-size: 200% 100%, 100% 100%;
      background-position: 200% center, center;
      animation: shimmer 3.5s linear infinite;
    }
    .btn-enroll:hover {
      background-image: none;
      background: var(--brand-h);
    }

    /* ── Trust strip ── */
    .trust-strip {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 28px;
      flex-wrap: wrap;
    }
    .trust-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: .75rem;
      color: var(--text-xdim);
      font-weight: 500;
    }
    .trust-item i { font-size: .9rem; color: rgba(255,255,255,.3); }

    /* ── Countdown badge ── */
    .offer-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(251,191,36,.12);
      border: 1px solid rgba(251,191,36,.3);
      color: var(--accent);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: 5px 14px;
      border-radius: 50px;
      margin-bottom: 18px;
    }

    /* ── Fade-in animation ── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .fade-in-1 { animation: fadeUp .6s cubic-bezier(.22,1,.36,1) .05s both; }
    .fade-in-2 { animation: fadeUp .6s cubic-bezier(.22,1,.36,1) .2s  both; }
    .fade-in-3 { animation: fadeUp .6s cubic-bezier(.22,1,.36,1) .35s both; }

    /* ── Savings pill ── */
    .savings-pill {
      display: inline-block;
      background: rgba(34,197,94,.15);
      border: 1px solid rgba(34,197,94,.3);
      color: #4ADE80;
      font-size: .72rem;
      font-weight: 700;
      padding: 3px 11px;
      border-radius: 50px;
      margin-left: 10px;
      vertical-align: middle;
    }

    .text-gradient {
      color: transparent;
      background-image: var(--gradient3);
      -webkit-background-clip: text;
      background-clip: text;
    }

 /* ── Section header ── */
    .section-heading {
      /* font-family: 'Manrope', sans-serif; */
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 900;
      /* color: var(--text-dark); */
      letter-spacing: -.03em;
      line-height: 1.15;
      margin-bottom: 10px;
    }
    .section-sub-brand {
      font-size: clamp(1rem, 1.6vw, 1.6rem);
      font-weight: 700;
      color: var(--color-dark);
      margin-bottom: 5px;
    }
    .section-desc {
      font-size: clamp(.88rem, 1.6vw, 1rem);
      color: var(--text-muted);
      line-height: 1.7;
      max-width: 640px;
      margin: 0 auto;
    }

    /* ── Audience card ── */
    .audience-card {
      background: var(--bg-cards);
      border-radius: var(--radius-card);
      box-shadow: var(--shadow);
      padding: 30px 28px 28px;
      height: 100%;
      position: relative;
      overflow: hidden;
      transition: transform .3s cubic-bezier(.34,1.56,.64,1),
                  box-shadow .3s ease;
    }
    .audience-card::before {
      /* top-left corner accent line */
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 0; height: 3px;
      border-radius: 0 3px 3px 0;
      transition: width .35s ease;
    }
    .audience-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
    .audience-card:hover::before { width: 100%; }

    /* Colour variants */
    .card-purple .audience-icon-box { background: var(--brand-light); color: var(--brand); }
    .card-purple::before             { background: var(--brand); }

    .card-teal .audience-icon-box   { background: var(--teal-light); color: var(--teal); }
    .card-teal::before               { background: var(--teal); }

    .card-red .audience-icon-box    { background: var(--red-light); color: var(--red); }
    .card-red::before                { background: var(--red); }

    /* Icon box */
    .audience-icon-box {
      width: 58px; height: 58px;
      border-radius: var(--radius-icon);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.5rem;
      margin-bottom: 22px;
      flex-shrink: 0;
      transition: transform .3s cubic-bezier(.34,1.56,.64,1);
    }
    .audience-card:hover .audience-icon-box { transform: rotate(-8deg) scale(1.1); }

    /* Card text */
    .audience-title {
      /* font-family: 'Manrope', sans-serif; */
      font-size: 22px;
      font-weight: 800 !important;
      /* color: var(--text-dark); */
      margin-bottom: 10px;
    }
    .audience-body {
      font-size: .875rem;
      color: var(--text-muted);
      line-height: 1.7;
      margin: 0;
    }

    /* ── Footer tagline ── */
    .tagline {
      font-size: clamp(.88rem, 1.6vw, 1rem);
      color: var(--text-muted);
      font-weight: 500;
    }
    .tagline-brand { color: var(--brand); font-weight: 600; }

    /* ── Fade-up animation ── */
    .fade-up {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .55s cubic-bezier(.22,1,.36,1),
                  transform .55s cubic-bezier(.22,1,.36,1);
    }
    .fade-up.visible { opacity: 1; transform: translateY(0); }

    .delay-0 { transition-delay: 0s; }
    .delay-1 { transition-delay: .08s; }
    .delay-2 { transition-delay: .16s; }
    .delay-3 { transition-delay: .24s; }
    .delay-4 { transition-delay: .32s; }
    .delay-5 { transition-delay: .40s; }

    .bg-gray-one{
      /* background: var(--bg-pages); */
      position: relative;
    }
    .bg-gray-one::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url(../img/shape/04.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      z-index: -1;
    }

    .section-title {
        font-weight: 700;
        color: #1e293b;
    }

    .subtitle {
        color: var(--color-dark);
        font-size: clamp(1rem, 2.6vw, 1.6rem);
        font-weight: 600;
    }

    .feature-card {
        background: white;
        border-radius: 16px;
        padding: 1.5rem;
        border: none;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        transition: transform 0.2s ease;
        height: 100%;
    }

    .feature-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    .icon-wrapper {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
        background: var(--gradient);
    }

    .icon-wrapper svg {
        width: 24px;
        height: 24px;
        color: var(--bg-pages);
    }

    .feature-title {
        font-size: 0.95rem;
        font-weight: 600;
        color: #000;
        line-height: 1.4;
        margin: 0;
    }

    .guarantee-section {
        background-color: var(--light-green);
        border-radius: 24px;
        padding: 2.5rem;
        margin-top: 3rem;
    }

    .guarantee-icon-circle {
        width: 150px;
        height: 150px;
        background-color: #dcfce7;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.5rem;
    }

    .guarantee-icon-circle svg {
        width: 32px;
        height: 32px;
        color: var(--green-text);
    }

    .guarantee-title {
        font-weight: 700;
        /* color: #1e293b; */
        font-size: 2.3rem;
    }

    .guarantee-text {
        color: #475569;
        font-size: 1rem;
        line-height: 1.6;
    }

    .guarantee-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--green-text);
        font-weight: 600;
        font-size: 0.875rem;
    }

    .guarantee-badge svg {
        width: 18px;
        height: 18px;
    }

    .certificate-section {
        padding: 4rem 0 2rem 0;
    }

    .section-heading {
        font-size: clamp(2rem, 2.6vw, 2.8rem);
        font-weight: 700;
        /* color: var(--text-dark); */
        line-height: 1.15;
        letter-spacing: -0.02em;
    }

    .section-description {
        font-size: 1.125rem;
        color: var(--text-muted);
        line-height: 1.7;
        max-width: 480px;
    }

    .divider {
        border-top: 1px solid #c7d2fe;
        opacity: 0.6;
    }

    .delivery-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.875rem;
        padding: 0.75rem 0;
    }

    .icon-circle {
        width: 40px;
        height: 40px;
        background-color: var(--icon-bg);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .icon-circle svg {
        width: 20px;
        height: 20px;
        color: var(--icon-green);
    }

    .badge-text {
        font-weight: 600;
        color: var(--text-dark);
        font-size: 0.95rem;
    }

    .image-wrapper {
        /* background: white; */
        border-radius: 20px;
        padding: 1.25rem;
        /* box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08); */
        transform: rotate(2deg);
        transition: transform 0.3s ease;
    }

    .image-wrapper:hover {
        transform: rotate(0deg);
    }

    .certificate-img {
        width: 100%;
        border-radius: 12px;
        display: block;
    }

    .image-caption {
        text-align: center;
        margin-top: 1.25rem;
        font-weight: 600;
        color: var(--accent-purple);
        font-size: 1rem;
    }

    .certificate-bg {
        background-color: var(--bg-lavender);
    }
    
    .video-wrap{
      height: 200px !important;
    }
    .video-content{
      border-radius: 20px !important;
      -webkit-border-radius: 20px !important;
      -moz-border-radius: 20px !important;
      -ms-border-radius: 20px !important;
      -o-border-radius: 20px !important;
    }

    .video-couses{
      height: 480px !important;
    }


    /* ── FAQ ── */
  .accordion-button { font-weight: 600; font-size: .95rem; background: #e3e4f9;
    border: solid 1px #ebecf9; }
  .accordion-button:not(.collapsed) { color: var(--brand); background: #eff6ff; }
  .accordion-item { border: 1px solid var(--border); border-radius: 10px !important; margin-bottom: 10px; overflow: hidden; }
    
  .courses-full-area h5{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffe3c1;
    border: 1px solid var(--border);
    border-radius: 50px;
    padding: 6px 16px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--theme-color2);
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  .courses-full-area h2{
    font-size: clamp(1.8rem, 3.3vw, 3.3rem) !important;
    font-weight: 700 !important;
  }
  .courses-full-area h4{
    font-size: 23px !important;
    font-weight: 700 !important;
    margin-bottom: 0.6rem !important;
  }

  .bg-teal{
    background: #ecfaff !important;
  }
  .bg-red{
    background: #fef3f4 !important;
  }
  .bg-blue{
    background: #ebebfb !important;
  }




  .pricing-section {
    background: linear-gradient(135deg, #d1e8e4 0%, #e8e0f0 50%, #f0e8e8 100%);
    padding: 4rem 0;
  }
  .pricing-section .section-title {
      font-weight: 800;
      font-size: clamp(1.85rem, 4.5vw, 3rem);
      color: var(--brand-dark);
      letter-spacing: -0.02em;
      line-height: 1.1;
    }
    .pricing-section h4{
      font-size: clamp(.95rem, 2vw, 1.3rem);
      font-weight: 700;
      margin-top: 14px;
    }

    .pricing-section .pricing-card {
      background: #FFFFFF;
      border-radius: 1rem;
      box-shadow: 0 20px 60px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
      padding: 2.25rem 2rem 1.75rem;
      max-width: 680px;
      width: 100%;
      margin: 0 auto;
      -webkit-border-radius: 1rem;
      -moz-border-radius: 1rem;
      -ms-border-radius: 1rem;
      -o-border-radius: 1rem;
}

    .pricing-section .feature-item {
      display: flex;
      align-items: flex-start;
      gap: 0.6rem;
      font-size: 0.95rem;
      color: var(--brand-dark);
      font-weight: 500;
      line-height: 1.4;
      margin-bottom: 0.75rem;
    }

    .pricing-section .feature-item svg {
      flex-shrink: 0;
      margin-top: -1px;
      color: var(--brand);
      /* stroke-width: 2.5px; */
      width: 22px !important;
      height: 22px !important;
    }

    .pricing-section .price-strike {
      font-size: 1.1rem;
      color: var(--brand-strike);
      text-decoration: line-through;
      letter-spacing: 0.01em;
    }

    .pricing-section .price-main {
      font-weight: 800;
      font-size: clamp(2.6rem, 10vw, 3.5rem);
      color: var(--brand-dark);
      letter-spacing: -0.03em;
      line-height: 1;
    }

    .pricing-section .price-period {
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--brand-indigo);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      align-self: flex-end;
      padding-bottom: 0.5rem;
    }

    .pricing-section .enroll-btn {
      display: block;
      width: 100%;
      background: var(--brand);
      color: #fff;
      font-weight: 700;
      font-size: clamp(0.92rem, 3vw, 1.5rem);
      border: none;
      border-radius: 0.75rem;
      padding: 1rem 1.5rem;
      cursor: pointer;
      transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
      box-shadow: 0 4px 20px rgba(67, 56, 202, 0.35);
      text-align: center;
      text-decoration: none;
      letter-spacing: -0.01em;
    }

    .pricing-section .enroll-btn:hover {
      background: var(--brand-indigo-hover);
      transform: translateY(-1px);
      box-shadow: 0 6px 28px rgba(67, 56, 202, 0.45);
      color: #fff;
    }

    .pricing-section .enroll-btn:active {
      transform: translateY(0);
    }

    .pricing-section .trust-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.5rem 1.5rem;
      margin-top: 1.25rem;
    }

    .pricing-section .trust-item {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.8rem;
      color: var(--brand-strike);
      font-weight: 500;
    }

    .pricing-section .trust-item svg {
      flex-shrink: 0;
      opacity: 0.7;
    }

    .pricing-section .divider {
      border: none;
      border-top: 1px solid #E5E7EB;
      margin: 1.5rem 0 1.25rem;
    }

    .box-5{
      background: #f7f5fe; 
      padding: 50px 0; 
      margin-top: 30px;
    }

  @media (max-width: 767px) {
      .eco-features{
        grid-template-columns: 1fr;
      }
      .guarantee-section {
          padding: 1.5rem;
          text-align: center;
      }
      .box-5{
        padding: 25px 0; 
        margin-top: 10px;
      }
      .btn-enroll{
        font-size: 15px;
        padding: 17px 5px;
      }
      .guarantee-title {
          font-size: 1.4rem;
      }
      
      .feature-card {
          padding: 1.25rem;
      }
      .courses-full-slider h1 {
          font-size: 30px !important;
      }
      .courses-full-slider h4{
        font-size: 22px !important;
      }
      .hero-section .hero-single .hero-content p{
        font-size: 16px;
        line-height: 27px;
      }
      .courses-full-area h2 {
        font-size: 27px !important;
        font-weight: 700 !important;
      }
      .courses-full-area h4 {
        font-size: 20px !important;
      }
      .course-card{
        padding: 24px;
      }
      .section-heading{
        font-size: 25px !important;
        margin-bottom: 10px !important;
      }
      .hs-1 .hero-single {
        padding-bottom: 2rem;
      }
      .courses-full-area{
        padding-top: 2rem;
      }
      .section-title {
        font-size: 27px;
      }

      .video-couses{
        height: 200px !important;
      }

      .courses-full-slider{
        padding-left: 0rem;
      }
      .video-courses-box{
        padding-right: 0rem;
      }
      .eco-image-wrap {
        margin-top: 0;
      }
      .pricing-box{
        padding: 2rem 0 !important;
      }
      .price-card{
        padding: 20px 22px 22px;
      }
      .trust-strip{
        gap: 10px;
      }
      .certificate-section {
        padding: 1.6rem 0 0rem 0;
      }
  }