:root {
    --purple: #6C3EF3;
    --purple-2: #9A6BFF;
    --purple-light: #F5EEFF;
    --ink: #0f172a;
    --muted: #475569;
    --card: #ffffff;
    --grad: linear-gradient(135deg, var(--purple), var(--purple-2));
  }

  /* Video */
  /* This class is no longer used by the new embed, but is kept for other videos */
  .ratio-16x9 {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border-radius: 16px;
    overflow: hidden
  }

  .ratio-16x9 iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0
  }

  /* GRID: responsive — 1 card on phones, 2 on wider screens */
  .two-col-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    /* << FIX */
    gap: 16px;
    align-items: start;
    margin-top: 16px;
  }

  @media (max-width:480px) {
    .two-col-grid {
      gap: 12px
    }
  }

  /* Card */
  .edu-course.course-style-15 .inner {
    background: var(--card);
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .06);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* Thumbnail + price badge */
  .edu-course.course-style-15 .thumbnail {
    position: relative;
    margin: 0 !important
  }

  .edu-course.course-style-15 .thumbnail img {
    width: 100%;
    height: auto;
    aspect-ratio: 3/4;
    /* portrait by default */
    object-fit: cover;
    border-radius: 10px;
    display: block;
    max-height: 280px;
    /* prevents crazy tall image on phones */
  }

  /* --- MODIFIED CODE BLOCK --- */
  .price-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--grad);
    color: #fff;
    padding: 8px 14px; /* INCREASED PADDING */
    border-radius: 8px;
    font-weight: 800;
    font-size: 16px; /* INCREASED FONT SIZE */
    border: none;
  }
  /* --- END OF MODIFIED CODE --- */

  /* Title + validity */
  .course-title {
    margin: 10px 0 0 0;
    font-size: 16px;
    line-height: 1.32;
    font-weight: 800;
    color: var(--ink)
  }

  .validity-pill {
    display: inline-flex;
    align-items: center;
    background: #EFE6FF;
    color: var(--purple);
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(108, 62, 243, .20);
    font-size: 13px;
    margin: 6px 0 2px 0;
  }

  /* Meta */
  .course-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 6px 0 8px 0;
    padding: 0
  }

  .course-meta li {
    list-style: none;
    background: #f3f4f6;
    border-radius: 16px;
    padding: 6px 10px;
    font-weight: 600;
    font-size: 13px;
    color: #111
  }

  /* Copy */
  .edu-course.course-style-15 .content p {
    color: var(--muted);
    margin: 0
  }

  /* Buttons: always one line, equal width */
  .cta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 8px
  }

  .btn-edu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: .65rem 1rem;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none
  }

  .btn-primary-edu {
    background: var(--grad);
    color: #fff
  }

  .btn-outline-edu {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .15);
    color: #111
  }

  /* -------- BASIC (LEFT) -------- */
  #syllabus-basic {
    margin-top: 10px
  }

  #syllabus-basic details {
    border: 1px solid rgba(108, 62, 243, .20);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 8px;
    background: transparent;
  }

  #syllabus-basic summary {
    position: relative;
    cursor: pointer;
    padding: .72rem .9rem .72rem 1.1rem;
    background: #F7F4FF;
    color: #111;
    font-weight: 400;
  }

  #syllabus-basic summary::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--grad);
  }

  #syllabus-basic summary .ch-num {
    font-weight: 800
  }

  #syllabus-basic summary .ch-text {
    font-weight: 400
  }

  #syllabus-basic details[open]>summary {
    background: #EDE6FF;
    border-bottom: 1px solid rgba(108, 62, 243, .22);
  }

  #syllabus-basic .chapter {
    padding: .65rem .9rem;
    border-top: 1px solid rgba(108, 62, 243, .22);
    background: #fff;
    color: #111;
    margin: 0;
  }

  /* -------- ADVANCE (RIGHT) -------- */
  #syllabus-advance {
    margin-top: 10px
  }

  #syllabus-advance details {
    background: #fff;
    border: 1px solid rgba(108, 62, 243, .25);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 8px;
  }

  #syllabus-advance summary {
    position: relative;
    cursor: pointer;
    padding: .8rem 1rem .8rem 1.1rem;
    font-weight: 800;
    color: #4b1dbb;
    background: #fbf9ff;
  }

  #syllabus-advance summary::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--grad);
  }

  #syllabus-advance details[open]>summary {
    background: var(--grad);
    color: #fff;
  }

  #syllabus-advance .chapter {
    padding: .65rem 1rem;
    border-top: 1px solid rgba(108, 62, 243, .15);
    background: #fff;
    color: #111;
    margin: 0;
  }

  #syllabus-advance summary .ch-num {
    font-weight: 800
  }

  #syllabus-advance summary .ch-text {
    font-weight: 400
  }

  /* ==============================
     DESKTOP TUNING (>= 1200px)
     ============================== */
  @media (min-width:1200px) {
    .edu-course.course-style-15 .thumbnail img {
      aspect-ratio: auto;
      max-height: 340px;
      /* shorter image on desktop */
    }

    .course-title {
      font-size: 20px;
      line-height: 1.35
    }

    .validity-pill {
      font-size: 14px;
      padding: 7px 12px
    }

    .course-meta li {
      font-size: 14px;
      padding: 7px 12px;
      border-radius: 18px
    }

    .edu-course.course-style-15 .content p {
      font-size: 15.5px;
      line-height: 1.6
    }

    .btn-edu {
      padding: .8rem 1.1rem;
      font-size: 15px
    }
  }



  .swiper-testimonial-slider-wrapper {
    position: relative;
    /* Add some padding on the sides so buttons don't overlap content */
    padding-left: 45px;
    padding-right: 45px;
  }

  /* Basic styles for the buttons */
  .swiper-testimonial-slider-wrapper .swiper-button-prev,
  .swiper-testimonial-slider-wrapper .swiper-button-next {
    position: absolute;
    top: 50%; /* Center vertically */
    transform: translateY(-50%);
    z-index: 10; /* Make sure they are on top */
    cursor: pointer;

    /* Appearance */
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: #111; /* Arrow color */
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);

    /* Center the arrow icon */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Position the prev/next buttons */
  .swiper-testimonial-slider-wrapper .swiper-button-prev {
    left: 10px; /* Position on the left */
  }

  .swiper-testimonial-slider-wrapper .swiper-button-next {
    right: 10px; /* Position on the right */
  }

  /* Style the arrow icon inside */
  .swiper-testimonial-slider-wrapper .swiper-button-prev::after,
  .swiper-testimonial-slider-wrapper .swiper-button-next::after {
    font-size: 18px; /* Make the arrow smaller */
    font-weight: bold;
  }
  
  /* Style for when a button is disabled (e.g., at the start/end) */
  .swiper-testimonial-slider-wrapper .swiper-button-disabled {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
  }



  /* Section Background */
  .image-gallery-area {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(180deg, #eef6f6 0%, #f5f9ff 100%);
  }
  /* Make sure the swiper has width/height */
  .image-gallery-activation.swiper { width: 100%; }
  .image-gallery-activation .swiper-slide { height: auto; }

  /* Make the whole card linkable */
  .gallery-card-item a.glightbox {
    text-decoration: none;
    display: block;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .07);
    padding: 15px;
    border: 1px solid #f0f0f0;
    transition: transform .3s ease, box-shadow .3s ease;
  }
  .gallery-card-item a.glightbox:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
  }

  .gallery-thumb {
    position: relative;
    width: 100%;
    padding-top: 100%;  /* 1:1 aspect ratio */
    border-radius: 8px;
    overflow: hidden;
    background: #f0f0f0;
  }
  .gallery-thumb img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; object-fit: cover;
  }

  .gallery-caption { text-align: center; padding: 15px 0 5px; }
  .gallery-caption .title { font-size: 18px; font-weight: 700; color: #111; margin: 0 0 4px; }
  .gallery-caption .subtitle { font-size: 14px; color: #64748b; }
  
  /* --- STYLES FOR PLAY ICONS --- */
  .play-icon {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 50px; height: 50px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-style: normal; color: #111;
    transition: all .3s ease;
    opacity: 0;
    z-index: 2;
  }
  .gallery-card-item a:hover .play-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }

  .play-icon.video-icon::before {
    content: '▶';
    font-size: 18px; line-height: 1; margin-left: 3px;
  }
  .play-icon.image-icon::before {
    content: '+';
    font-size: 28px; line-height: 1; font-weight: 300;
  }
  
  /* Theme nav buttons */
  .swiper-navigation { display: flex; gap: 15px; margin-top: 20px; }
  .swiper-navigation .swiper-btn-nxt,
  .swiper-navigation .swiper-btn-prv {
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #e0e0e0; color: #111; cursor: pointer;
    transition: all .3s ease;
  }
  .swiper-navigation .swiper-btn-nxt:hover,
  .swiper-navigation .swiper-btn-prv:hover {
    background: #6C3EF3; color: #fff; border-color: #6C3EF3;
  }

  /* ===== Force GLightbox close button visible & styled ===== */
  .glightbox-clean .gclose,
  .glightbox .gclose {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 14px;
    top: 14px;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: rgba(17,17,17,0.85);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    z-index: 999999 !important;
    opacity: 1 !important;
    transition: transform .2s ease, background .2s ease, opacity .2s ease;
  }
  .glightbox .gclose:hover { transform: scale(1.06); background: rgba(17,17,17,0.95); }
  .glightbox .gclose svg { width: 20px; height: 20px; display: block; }
/* Generated from inline styles */
.inl-001 { backface-visibility: hidden; pointer-events: none; transform: translate3d(0px, 0px, 0px) rotate(0.0001deg); transform-style: preserve-3d; }
.inl-002 { backface-visibility: hidden; display: block; left: 0px; position: relative; top: 0px; transform: translate3d(0px, 0px, 0px); transform-style: preserve-3d; }
.inl-003 { font-size: 24px; }
.inl-004 { margin-bottom: 12px; }
.inl-005 { border-radius: 16px; height: 0; left: 0; overflow: hidden; padding-bottom: 56.25%; position: relative; width: 100%; }
.inl-006 { border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.inl-007 { aspect-ratio: 9/16 !important; background: #000 !important; border-radius: 14px !important; margin-bottom: 20px !important; max-width: 230px !important; overflow: hidden !important; pointer-events: auto !important; position: relative !important; touch-action: manipulation !important; width: 100% !important; z-index: 3 !important; }
.inl-008 { background: #000 !important; display: block !important; height: 100% !important; object-fit: cover !important; width: 100% !important; }
.inl-009 { padding-bottom: 70px; }