/* ===== Base (no :root) ===== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/* ==== FIX: kill horizontal scroll globally (safe) ==== */
html,
body {
    overflow-x: hidden;
}

body {
    color: #999;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    text-align: left;
    font-family: Rubik, sans-serif !important;
}
.trainer-topbar a,
.trainer-header a,
.trainer-home a {
    text-decoration: none;
}
/* ================= TOPBAR ================= */
.trainer-topbar {
    background: #2f3237;
    color: #ffffff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    z-index: 100;
}

.trainer-topbar-row {
    height: 40px;
    max-width: 1200px;
    margin: auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.trainer-topbar-left,
.trainer-topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
}

.trainer-topbar-sep {
    color: #aaa;
}

.trainer-topbar-sico {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: #ffffff;
    font-size: 14px;
    transition: transform 0.2s ease;
}

.trainer-topbar-sico:hover {
    transform: scale(1.1);
}

/* Social brand colors */
.trainer-topbar-sico.yt {
    background: #ff0000;
}
.trainer-topbar-sico.li {
    background: #0077b5;
}

.phone a,
.email a {
    color: inherit;
    text-decoration: none;
}

.phone a:hover,
.email a:hover {
    text-decoration: underline;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .trainer-topbar-right {
        display: none;
    }
    .trainer-topbar-left {
        width: 100%;
        justify-content: center;
        font-size: 15px;
        gap: 10px;
    }
    .trainer-topbar-left .trainer-topbar-sep {
        display: none;
    }
}

/* ================= Header ================= */



.trainer-header {
    position: fixed;
    top: 40px;
    left: 0;
    right: 0;
    z-index: 90;
    background: #ffffff;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
}
.trainer-header-navbar {
    height: 72px;
    max-width: 1200px;
    margin: auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.trainer-header-brand img {
    height: 60px;
    max-width: 180px;
    object-fit: contain;
    display: block;
}

/* Desktop nav */
.trainer-header-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}
.trainer-header-nav a {
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 600;
    color: #0f172a;
    text-decoration: none;
    transition: all 0.25s ease;
}
.trainer-header-nav a:hover {
    background: #f3f4f6;
    color: #ec4899;
}
.trainer-header-nav a.active {
    color: #ec4899;
}

/* CTA Button (YouTube) */
.trainer-header-yt-cta {
    display: inline-grid;
    place-items: center;
    width: 60px;
    height: 40px;
    border-radius: 10px;
    background: #ff0000;
    color: #fff !important;
    font-size: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}
.trainer-header-yt-cta:hover {
    background: #e60000 !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(255, 0, 0, 0.4);
    transform: translateY(-2px);
}

/* ============ Hamburger ============ */
.trainer-header-hamb {
    display: none;
    place-items: center;
    width: 42px;
    height: 38px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    background: #fff;
    position: relative;
}
.trainer-header-hamb i,
.trainer-header-hamb i::before,
.trainer-header-hamb i::after {
    content: "";
    display: block;
    width: 22px;
    height: 2px;
    background: #111827;
    border-radius: 2px;
    position: relative;
    transition: transform 0.3s ease, background 0.25s ease;
}
.trainer-header-hamb i::before {
    position: absolute;
    top: -7px;
    left: 0;
}
.trainer-header-hamb i::after {
    position: absolute;
    top: 7px;
    left: 0;
}

/* Morph into X when active */
.trainer-header-hamb.active i {
    background: transparent;
}
.trainer-header-hamb.active i::before {
    transform: translateY(7px) rotate(45deg);
}
.trainer-header-hamb.active i::after {
    transform: translateY(-7px) rotate(-45deg);
}

/* ================= Mobile Menu ================= */
.trainer-header-menu-panel {
    position: fixed;
    left: 0;
    right: 0;
    top: 112px;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    background: #fff;
    overflow: hidden;
    transition: max-height 0.45s ease, opacity 0.3s ease;
    z-index: 89;
}
.trainer-header-menu-panel.open {
    max-height: 90vh;
    opacity: 1;
    pointer-events: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.trainer-header-menu-panel-inner {
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
.trainer-header-menu-panel-inner a {
    display: block;
    padding: 14px 16px;
    color: #111827;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.25s ease;
}
.trainer-header-menu-panel-inner a + a {
    border-top: 1px solid #f1f5f9;
}
.trainer-header-menu-panel-inner a:hover {
    background: #f9fafb;
}

/* Backdrop */
.trainer-header-menu-backdrop {
    position: fixed;
    left: 0;
    right: 0;
    top: 112px;
    bottom: 0;
    background: rgba(2, 6, 23, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.trainer-header-menu-panel.open .trainer-header-menu-backdrop {
    opacity: 0.5;
    pointer-events: auto;
}

/* mobile panel upar rahe, aur backdrop links ke neeche rahe */
.trainer-header-menu-panel{ z-index: 1000; }
.trainer-header-menu-panel-inner{ position: relative; z-index: 2; }
.trainer-header-menu-backdrop{ z-index: 1; }


/* CLICKABLE YouTube badge — mobile only */
.yt-badge-santosh-youtube{
  top: 10px;
  left: 10px;
  display: none;              /* hidden by default (desktop/tablet) */
  padding: 6px 10px;
  background: #FF0000;
  color: #fff !important;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .2px;
  box-shadow: 0 6px 14px rgba(255,0,0,.25);
  align-items: center;
  gap: 6px;
  text-decoration: none;
  z-index: 10;                /* above iframe & overlays */
  pointer-events: auto;       /* ✅ make it clickable */
}

.yt-badge-santosh-youtube i{
  font-size: 14px;
  line-height: 1;
}

/* show only on mobile */
@media (max-width: 767.98px){
  .yt-badge-santosh-youtube{ display: inline-flex; }
}


/* Responsive */
@media (max-width: 900px) {
    .trainer-header-nav {
        display: none;
    }
    .trainer-header-hamb {
        display: inline-grid;
    }
}
@media (min-width: 901px) {
    .trainer-header-menu-panel {
        display: none !important;
    }
}

/* ================= HERO ================= */
.trainer-home-hero-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Background wrapper */
.trainer-home-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

/* Background image */
.trainer-home-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Gradient overlay */
.trainer-home-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(8, 12, 24, 0.75),
        rgba(8, 12, 24, 0.55)
    );
}

/* Content wrapper */
.trainer-home-hero {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 102px 20px 40px; /* top + bottom padding */
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trainer-home-content {
    max-width: 800px;
    width: 100%;
    color: #ffffff;
}

/* Headings & text */
.trainer-home-hero h1 {
    margin: 10px 0;
    font-size: clamp(26px, 5vw, 44px);
    line-height: 1.2;
    font-weight: 700;
}

.trainer-home-lead {
    font-size: clamp(18px, 3vw, 28px);
    opacity: 0.95;
    line-height: 1.3;
    font-weight: 600;
    margin-bottom: 15px;
}

.trainer-home-para {
    font-size: clamp(14px, 2vw, 18px);
    opacity: 0.95;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* CTA Button */
.trainer-home-btn {
    display: inline-block;
    margin: 10px 8px 0;
    padding: 12px 22px;
    border-radius: 999px;
    text-decoration: none;
    background: #ec4899;
    color: #ffffff;
    font-weight: 700;
    transition: 0.3s ease;
}
.trainer-home-btn:hover {
    background: #c2185b;
}

/* Responsive */
@media (max-width: 768px) {
    .trainer-home-hero {
        padding: 102px 15px 30px;
    }
    .trainer-home-content {
        max-width: 100%;
    }
    .trainer-home-btn {
        width: 100%;
        margin: 12px 0;
    }
}



/* ==========WhatsAppp=============== */
/* Wrapper */
.whatsapp-float-wrapper {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}

/* Button styling */
.whatsapp-float-btn {
    width: 60px;
    height: 60px;
    background: #25d366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

/* Hover effect */
.whatsapp-float-btn:hover {
    background: #1ebe5d;
    transform: scale(1.1) rotate(6deg);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}
/* ======WhatsAppppp=============== */

/* <!--==================================================-->
<!-- Start Introduction Section -->
<!--==================================================--> */

/* ===== Introduction (trainer) ===== */

/* Section wrapper */
.intro-section-trainer {
    max-width: 1160px;
    margin: 0 auto;
    padding: clamp(40px, 6vw, 92px) 20px;
    color: #0f172a; /* ink */
    background: radial-gradient(
            760px 280px at 105% -10%,
            color-mix(in srgb, #ec4899 12%, transparent) 0,
            transparent 60%
        ),
        radial-gradient(
            660px 260px at -10% 110%,
            color-mix(in srgb, #ec4899 8%, transparent) 0,
            transparent 60%
        ),
        radial-gradient(circle at 1px 1px, #eef2f9 1px, transparent 1px) 0 0/18px
            18px,
        #fff;
}

/* Top text */
.intro-kicker-trainer {
    margin: 0 auto 12px;
    font-size: 12px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #64748b;
    text-align: center;
}
.intro-section-trainer h2 {
    margin: 0 0 12px;
    font-weight: 900;
    font-size: clamp(24px, 3.2vw, 36px);
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-align: center;
}
.section-lead-trainer {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
    color: #475569; /* muted */
    line-height: 1.75;
    font-size: 15.5px;
}
/* animated underline on hover */
.intro-section-trainer h2 span {
    position: relative;
    display: inline-block;
}
.intro-section-trainer h2 span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 4px;
    background: #ec4899; /* accent */
    transform: scaleX(0.35);
    transform-origin: left;
    transition: transform 0.35s ease;
}
.intro-section-trainer h2:hover span::after {
    transform: scaleX(1);
}

/* ===== Layout (image + info) ===== */
.intro-wrap-trainer {
    max-width: 980px;
    margin: clamp(28px, 4.5vw, 52px) auto 0;
    display: grid;
    grid-template-columns: minmax(220px, 280px) 1fr;
    gap: clamp(18px, 3.2vw, 36px);
    align-items: start;
}
@media (max-width: 820px) {
    .intro-wrap-trainer {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
}

/* Photo with accent rail */
.photo-wrap-trainer {
    position: relative;
    width: 100%;
    display: grid;
    place-items: center;
}
.photo-accent-trainer {
    position: absolute;
    left: 0;
    top: 6%;
    bottom: 6%;
    width: 10px;
    background: #ec4899;
    opacity: 0.9;
}
.photo-glow-trainer {
    position: absolute;
    inset: -12% -18%;
    background: radial-gradient(
        50% 50% at 50% 50%,
        color-mix(in srgb, #ec4899 18%, transparent) 0,
        transparent 70%
    );
    filter: blur(24px);
    z-index: 0;
}
.intro-profile-trainer img {
    position: relative;
    z-index: 1;
    width: clamp(200px, 30vw, 260px);
    height: clamp(240px, 34vw, 300px);
    object-fit: cover;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    outline: 6px solid #fff;
    box-shadow: 0 12px 30px rgba(2, 6, 23, 0.14);
}

/* Info */
.profile-info-trainer {
    width: 100%;
}
.profile-info-trainer h3 {
    margin: 0 0 6px;
    font-weight: 900;
    font-size: clamp(18px, 2.2vw, 24px);
    letter-spacing: 0.2px;
    color: #0b1220;
}
.role-trainer {
    display: inline-block;
    margin: 6px 0 14px;
    color: #6b7280;
    font-size: 13.5px;
}
.name-underline-trainer {
    width: 80px;
    height: 3px;
    background: #ec4899;
    margin: 10px 0 14px;
}
.profile-info-trainer p {
    margin: 0 0 18px;
    color: #374151;
    line-height: 1.75;
    font-size: 15px;
}

/* Socials */
.social-icons-trainer {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.social-icons-trainer a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #111;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease,
        border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
    font-weight: 700;
    gap: 8px;
}
.social-icons-trainer a i {
    font-size: 16px;
}
.social-icons-trainer a:hover {
    transform: translateY(-2px);
    background: #ec4899;
    border-color: #ec4899;
    color: #fff;
    box-shadow: 0 10px 20px rgba(236, 72, 153, 0.28);
}

/* Align when stacked */
@media (max-width: 820px) {
    .name-underline-trainer {
        margin-left: auto;
        margin-right: auto;
    }
    .social-icons-trainer {
        justify-content: center;
    }
}

/* Focus & reduced motion */
.intro-section-trainer a:focus {
    outline: 2px solid color-mix(in srgb, #ec4899 50%, #f1a7c6);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .intro-section-trainer h2 span::after,
    .social-icons-trainer a {
        transition: none;
    }
}

/* <!--==================================================-->
<!--  End Introduction Section -->
<!--==================================================--> */
/* <!--==================================================-->
<!--  Start Course Section -->
<!--==================================================--> */
/* ===== Scoped wrapper ===== */
.sap-course-body {
    background: #f9fafb;
    color: #0f172a;
}

/* ===== Section head ===== */
.sap-course-section-head .sap-course-kicker {
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #475569;
    font-size: 12px;
    margin-bottom: 6px;
}
/* Container ko center rakhna ho to (optional) */
.sap-course-section-head{
  text-align: center;
}

/* Heading + underline */
.sap-course-section-head h2{
  position: relative;          /* ::after anchor */
  display: inline-block;       /* underline = text width */
  margin: 0 0 14px;            /* space for underline */
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.2;            /* optional: clean line height */
}

/* Gradient underline */
.sap-course-section-head h2::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, rgb(236,72,153), rgb(37,99,235));
  transform-origin: center;
  transform: scaleX(0.45);     /* initial shorter bar */
  transition: transform .35s ease;
}

/* Hover par expand (chahe to hata bhi sakte ho) */
.sap-course-section-head h2:hover::after{
  transform: scaleX(1);
}
.sap-course-section-head p {
    color: #475569;
    margin: 8px 0 0;
}

/* ===== Wider space between LEFT (card) and RIGHT (image) ===== */
.row.sap-wide-gx {
    --bs-gutter-x: 2.25rem;
    display: flex; /* equal height ke liye */
    align-items: stretch; /* dono ko same height pe kheenchta hai */
}
@media (min-width: 992px) {
    .row.sap-wide-gx {
        --bs-gutter-x: 2.75rem;
    }
}

/* ===== Card with 15px outer frame ===== */
.sap-course-course-card {
    outline: 1px solid #e5e7eb;
    outline-offset: 15px;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease,
        border-color 0.18s ease, outline-color 0.18s ease;
    height: 100%; /* equal height fix */
    display: flex;
    flex-direction: column;
    border-radius: 0;
    overflow: hidden;
    position: relative;
}
.sap-course-course-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.16);
    border-color: #e9e9ef;
    outline-color: #e9e9ef;
}

/* top accent + shimmer */
.sap-course-card-accent {
    position: absolute;
    left: -1px;
    right: -1px;
    top: -1px;
    height: 6px;
    background: #ec4899;
    overflow: hidden;
}
.sap-course-card-accent::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        #fff3 0 22%,
        transparent 55%,
        #fff3 78% 100%
    );
    transform: translateX(-100%);
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sap-course-course-card:hover .sap-course-card-accent::after {
    transform: translateX(100%);
}

/* media (reduced height) */
.sap-course-thumb-wrap {
    position: relative;
    border-bottom: 1px solid #e5e7eb;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
}
@media (max-width: 576px) {
    .sap-course-thumb-wrap {
        height: auto;
    }
}
@media (min-width: 1200px) {
    .sap-course-thumb-wrap {
        height: 300px;
    }
}

.sap-course-thumb-wrap img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0;
    transform: scale(1);
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sap-course-course-card:hover .sap-course-thumb-wrap img {
    transform: scale(1.05);
}

/* chip */
.sap-course-chip-off {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #fff;
    color: #111;
    border: 1px solid #e5e7eb;
    padding: 0.35rem 0.55rem;
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    border-radius: 0;
    box-shadow: 0 6px 12px rgba(236, 72, 153, 0.18);
}
.sap-course-chip-off i {
    color: #ec4899;
    margin-right: 0.3rem;
}

/* body */
.sap-course-card-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}
.sap-course-instructor {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #475569;
    font-size: 0.93rem;
    margin-bottom: 0.2rem;
}
.sap-course-instructor img {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border: 1px solid #e5e7eb;
    border-radius: 0;
}
.sap-course-rating {
    margin-left: auto;
    color: #f4c430;
    font-weight: 700;
    font-size: 0.95rem;
}

.sap-course-course-title {
    margin: 0.15rem 0 0.25rem;
}
.sap-course-course-title a {
    color: #0f172a;
    text-decoration: none;
    font-weight: 900;
    font-size: 1.05rem;
    line-height: 1.3;
}
.sap-course-course-title a:hover {
    color: #ec4899;
}

.sap-course-discount-line {
    color: #16a34a;
    font-size: 0.92rem;
}

.sap-course-price-now {
    font-size: 1.22rem;
    font-weight: 900;
    color: #0f172a;
}
.sap-course-price-was {
    margin-left: 0.5rem;
    text-decoration: line-through;
    color: #64748b;
    font-size: 0.95rem;
}
.sap-course-price-note {
    color: #64748b;
    font-size: 0.85rem;
}

.sap-course-actions {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 0.6rem;
}
.sap-course-btn-outline-ghost {
    flex: 1;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #0f172a;
    font-weight: 800;
    border-radius: 0;
    text-decoration: none;
    text-align: center;
    padding: 0.55rem 1rem;
}
.sap-course-btn-outline-ghost:hover {
    border-color: #ec4899;
    color: #ec4899;
    background: #fff;
}
.sap-course-btn-accent {
    flex: 1;
    background: #ec4899;
    border: 1px solid #ec4899;
    color: #fff;
    font-weight: 900;
    border-radius: 0;
    text-decoration: none;
    text-align: center;
    padding: 0.55rem 1rem;
}
.sap-course-btn-accent:hover {
    filter: brightness(1.05);
}

/* ===== Left/Right row inside card (title/price) ===== */
.sap-course-meta-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    margin: 0.25rem 0 0.35rem;
}
.sap-course-meta-left {
    flex: 1 1 auto;
    min-width: 0;
}
.sap-course-meta-right {
    flex: 0 0 auto;
    text-align: right;
    margin-left: auto;
    padding-left: 1.25rem;
    border-left: 1px dashed #e5e7eb;
}
.sap-course-price-block {
    display: inline-block;
    text-align: right;
}
.sap-course-price-block .sap-course-price-now + .sap-course-price-now {
    margin-left: 0.1rem;
}

@media (max-width: 576px) {
    .sap-course-meta-row {
        flex-direction: column;
        gap: 0.5rem;
    }
    .sap-course-meta-right {
        text-align: left;
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }
    .sap-course-price-block {
        text-align: left;
    }
}

/* ===== Right-side standalone image ===== */
/* .sap-course-side-figure {
    position: relative;
    height: 100%;            
    border: 1px solid #e5e7eb;
    background: #fff;
    outline: 1px solid #e5e7eb;
    outline-offset: 15px;
    display: flex;
    align-items: stretch;
    flex: 1;
}
.sap-course-side-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
} */

.sap-course-side-figure {
    position: relative;
    border: 1px solid #e5e7eb;
    background: #fff;
    outline: 1px solid #e5e7eb;
    outline-offset: 15px;
    display: flex;
    align-items: center; /* image ko center karo */
    justify-content: center;
    flex: 1;
    padding: 8px; /* thoda safe gap taaki responsive me cut na ho */
}

.sap-course-side-image {
    width: 100%;
    height: auto; /* auto height, cut nahi hoga */
    max-height: 100%; /* container ke andar fit rahe */
    object-fit: contain; /* scale hoke pura image visible rahe */
    display: block;
}

/* Responsive min-height taaki mobile/tablet me bhi visible rahe */
@media (max-width: 768px) {
    .sap-course-side-image {
        min-height: 240px;
    }
}
@media (max-width: 576px) {
    .sap-course-side-image {
        min-height: 200px;
    }
}

/* a11y + motion */
.sap-course-section a:focus-visible,
.sap-course-section .btn:focus-visible {
    outline: 2px solid color-mix(in srgb, #ec4899 60%, #ffcfe5);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .sap-course-course-card,
    .sap-course-thumb-wrap img,
    .sap-course-card-accent::after {
        transition: none !important;
    }
}

/* <!--==================================================-->
<!-- End Course Section -->
<!--==================================================--> */

/* <!--==================================================-->
<!-- Start Features Section -->
<!--==================================================--> */

/* =========================================================
       Wrapper (no body styles used)
       ========================================================= */
.sap-feature-body {
    color: #0f172a;
    background: #ffffff;
}

/* =========================================================
       Section Wrapper
       ========================================================= */
.sap-features-wrap {
    padding: 72px 20px;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    background: radial-gradient(
            700px 280px at 105% -10%,
            rgba(236, 72, 153, 0.08),
            transparent 60%
        ),
        radial-gradient(
            620px 240px at -10% 110%,
            rgba(37, 99, 235, 0.08),
            transparent 60%
        ),
        radial-gradient(circle at 1px 1px, #ecf0f8 1px, transparent 1px) 0 0/18px
            18px,
        #fff;
}
.container-sap-feature {
    max-width: 1180px;
    margin: 0 auto;
}

/* =========================================================
       Header
       ========================================================= */
.head-sap-feature {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 34px;
}
.kicker-sap-feature {
    margin: 0 0 6px;
    font-size: 12px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #64748b;
}
.title-sap-feature {
    margin: 0;
    font-weight: 900;
    letter-spacing: -0.02em;
    font-size: clamp(24px, 3.6vw, 36px);
    line-height: 1.15;
    color: #0b1220;
    position: relative;
    display: inline-block;
}
.title-sap-feature::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 4px;
    background: linear-gradient(90deg, #ec4899, #2563eb);
    transform: scaleX(0.4);
    transform-origin: left;
    transition: transform 0.35s ease;
}
.head-sap-feature:hover .title-sap-feature::after {
    transform: scaleX(1);
}
.subtitle-sap-feature {
    margin: 0;
    color: #475569;
    line-height: 1.65;
    font-size: clamp(14px, 2vw, 16px);
}

@media (max-width: 560px) {
    .head-sap-feature {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================================
       Grid
       ========================================================= */
.grid-sap-feature {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 980px) {
    .grid-sap-feature {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 560px) {
    .grid-sap-feature {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
       Card
       ========================================================= */
.card-sap-feature {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1.6px solid #e5e7eb;
    padding: 22px 24px 22px 68px; /* left strip space */
    transition: transform 0.22s ease, box-shadow 0.22s ease,
        border-color 0.22s ease, background-color 0.22s ease;
}
/* default strip gradient (pink → blue) */
.card-sap-feature::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: linear-gradient(180deg, #ec4899, #2563eb);
    transform: translateX(-8px);
    transition: transform 0.22s ease;
}
/* corner texture */
.card-sap-feature::after {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 140px;
    height: 140px;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(2, 6, 23, 0.06) 0 8px,
        transparent 8px 16px
    );
    opacity: 0.3;
    clip-path: polygon(40% 0, 100% 0, 100% 60%);
    transition: opacity 0.22s ease;
}
.card-sap-feature:hover,
.card-sap-feature:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(2, 6, 23, 0.14);
    border-color: #cdd5e6;
    background-color: #fcfcff;
}
.card-sap-feature:hover::before {
    transform: translateX(0);
}
.card-sap-feature:hover::after {
    opacity: 0.5;
}

/* header row inside card */
.meta-row-sap-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.chip-sap-feature {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #0b1220;
    background: linear-gradient(0deg, #f8fafc, #fff);
    border: 1px solid #e5e7eb;
    padding: 6px 10px;
    letter-spacing: 0.2px;
}
.chip-sap-feature svg {
    width: 14px;
    height: 14px;
    color: #0f172a;
    opacity: 0.8;
}

.numchip-sap-feature {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 12px;
    color: #0b1220;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    padding: 6px 10px;
    letter-spacing: 0.4px;
}
.numchip-sap-feature svg {
    width: 14px;
    height: 14px;
    opacity: 0.85;
    transform: translateX(-4px);
    transition: transform 0.2s ease;
}
.card-sap-feature:hover .numchip-sap-feature svg {
    transform: translateX(0);
}

.card-sap-feature h3 {
    margin: 0 0 8px;
    font-weight: 900;
    font-size: 18px;
    color: #0f172a;
    letter-spacing: 0.2px;
}
.card-sap-feature p {
    margin: 0;
    color: #475569;
    font-size: 15px;
    line-height: 1.7;
}

.rule-sap-feature {
    margin-top: 14px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
}

/* =========================================================
       Per-card accent themes (override strip gradient)
       ========================================================= */
.card-sap-feature.a1-sap-feature::before {
    background: linear-gradient(180deg, #ef4444, #f97316);
} /* red→orange */
.card-sap-feature.a2-sap-feature::before {
    background: linear-gradient(180deg, #06b6d4, #2563eb);
} /* cyan→blue */
.card-sap-feature.a3-sap-feature::before {
    background: linear-gradient(180deg, #a855f7, #6366f1);
} /* purple→indigo */
.card-sap-feature.a4-sap-feature::before {
    background: linear-gradient(180deg, #f59e0b, #10b981);
} /* amber→green */
.card-sap-feature.a5-sap-feature::before {
    background: linear-gradient(180deg, #ec4899, #8b5cf6);
} /* pink→violet */
.card-sap-feature.a6-sap-feature::before {
    background: linear-gradient(180deg, #22c55e, #0ea5e9);
} /* green→sky */

/* =========================================================
       Reduced Motion
       ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .card-sap-feature,
    .card-sap-feature::before,
    .numchip-sap-feature svg,
    .title-sap-feature::after {
        transition: none;
    }
}

/* <!--==================================================-->
<!-- End Freatures Section -->
<!--==================================================--> */

/* <!--==================================================-->
<!-- Start Certificate Section -->
<!--==================================================--> */

/* ===== Certificate Section - White BG with Subtle Design - santoshmm ===== */
.cert-section-santoshmm{
  --accent:#0b1324;              /* dark ink */
  --dot:#eef2f7;                 /* dotted color */
  background:#ffffff;
  padding:70px 0;
  color:#1f2937;
   font-family: Rubik, sans-serif; 
  position:relative;
  overflow:hidden;                /* hide bg shapes overflow */
}

/* ---------- BACKGROUND DESIGN ---------- */
/* Soft radial glow (top-right) */
.cert-section-santoshmm::before{
  content:"";
  position:absolute;
  right:-18%;
  top:-22%;
  width:820px; height:820px;
  pointer-events:none;
  background:
    radial-gradient( circle at 60% 60%,
      rgba(15,23,42,.08), rgba(15,23,42,0) 60% );
  filter: blur(2px);
}
/* Soft radial glow (bottom-left) */
.cert-section-santoshmm::after{
  content:"";
  position:absolute;
  left:-20%;
  bottom:-28%;
  width:860px; height:860px;
  pointer-events:none;
  background:
    radial-gradient( circle at 40% 40%,
      rgba(2,6,23,.06), rgba(2,6,23,0) 62% );
  filter: blur(2px);
}

/* Corner dotted pattern (very light) */
.cert-container-santoshmm{ position:relative; z-index:1; }
.cert-container-santoshmm::before,
.cert-container-santoshmm::after{
  content:"";
  position:absolute;
  width:260px; height:220px;
  pointer-events:none;
  background-image:
    radial-gradient(var(--dot) 1px, transparent 1.5px);
  background-size:22px 22px;
  opacity:.9;
  mask-image: linear-gradient(to bottom right, rgba(0,0,0,.95), transparent 70%);
}
.cert-container-santoshmm::before{ /* top-left */
  left:-8px; top:-8px;
}
.cert-container-santoshmm::after{  /* bottom-right */
  right:-8px; bottom:-8px;
  transform: rotate(180deg);
  opacity:.8;
}

/* ---------- LAYOUT (simple & professional) ---------- */
.cert-container-santoshmm{
  width:min(1200px, 92%);
  margin-inline:auto;
}
.cert-grid-santoshmm{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:50px;
  align-items:center;
}

/* Text side */
.cert-title-santoshmm{
  font-size:26px; font-weight:700; margin:0 0 12px;
}
.cert-subtitle-santoshmm{
  font-size:18px; color:#4b5563; margin:0 0 20px;
  font-family: sans-serif;
      font-weight: 500;
}
.cert-list-santoshmm{
  list-style:none; padding:0; margin:0; display:grid; gap:12px;
}
.cert-list-santoshmm li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:16px; line-height:1.55;
    font-family: sans-serif;
}
.cert-list-santoshmm i{
  color:#059669; font-size:18px; margin-top:2px;
}

/* Image side */
.cert-img-santoshmm img{
  width:100%; height:auto;
  border:1px solid #e5e7eb;
  box-shadow: 0 10px 28px rgba(2,6,23,.06);
}

/* Responsive */
@media (max-width: 991px){
  .cert-grid-santoshmm{ grid-template-columns:1fr; }
  .cert-img-santoshmm{ order:-1; margin-bottom:24px; }
}


/* <!--==================================================-->
<!-- End Certificate Section -->
<!--==================================================--> */



/* <!--==================================================-->
<!-- End Youtube Section -->
<!--==================================================--> */

.youtube-section {
    /* section ke upar-neeche professional spacing */
    padding: clamp(32px, 6vw, 88px) 0;
    border-top: 1px solid rgb(229, 231, 235);
    border-bottom: 1px solid rgb(229, 231, 235);
    background: radial-gradient(
            700px 280px at 105% -10%,
            rgba(236, 72, 153, 0.08),
            transparent 60%
        ),
        radial-gradient(
            620px 240px at -10% 110%,
            rgba(37, 99, 235, 0.08),
            transparent 60%
        ),
        radial-gradient(
                circle at 1px 1px,
                rgb(236, 240, 248) 1px,
                transparent 1px
            )
            0px 0px / 18px 18px,
        rgb(255, 255, 255);
}

/* ===== Heading (underline matches text width) ===== */
.title-santosh-youtube {
    /* center + neat wrap */
    margin: 0 auto clamp(20px, 3vw, 32px);

    /* ✅ important for underline */
    position: relative;
    display: block;
    width: fit-content; /* element shrinks to text width */
    max-width: 900px; /* long headings wrap nicely */
    /* font */
    font-weight: 800;
    font-size: 28px;
    line-height: 1.15;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial,
        sans-serif;
    color: #0f172a;
    letter-spacing: 0.3px;
}

/* underline */
.title-santosh-youtube::after {
    content: "";
    position: absolute;
    left: 0; /* span equals the text width now */
    bottom: -10px;
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, rgb(236, 72, 153), rgb(37, 99, 235));
    transform-origin: center; /* center se animate */
    transform: scaleX(0.4); /* initial shorter bar */
    transition: transform 0.35s ease;
}

/* optional: hover pe full expand */
.title-santosh-youtube:hover::after {
    transform: scaleX(1);
}

/* responsive font sizes if chahiye */
@media (min-width: 768px) {
    .title-santosh-youtube {
        font-size: 32px;
    }
}
@media (min-width: 1200px) {
    .title-santosh-youtube {
        font-size: 36px;
    }
}

/* ===== Layout (mobile-first) ===== */
.grid-santosh-youtube {
    display: grid;
    gap: 28px;
    align-items: stretch;
    grid-template-columns: 1fr; /* Mobile: 1 column */
}
@media (min-width: 768px) {
    /* Tablet: 2 columns */
    .grid-santosh-youtube {
        grid-template-columns: 2fr 1fr;
        gap: 24px;
    }
    .title-santosh-youtube {
        font-size: 28px;
    }
}
@media (min-width: 1200px) {
    /* Desktop: spacing thoda bada */
    .grid-santosh-youtube {
        gap: 28px;
    }
    .title-santosh-youtube {
        font-size: 36px;
    }
}

/* ===== Slider (LEFT) base ===== */
.slider-santosh-youtube {
    position: relative;
    overflow: hidden;
    background: radial-gradient(1200px 500px at 10% 0%, #0b1220 0%, #000 55%);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
    height: 100%;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* ===== Equal height by device (LEFT = RIGHT) ===== */
/* Tablet */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .slider-santosh-youtube,
    .poster-santosh-youtube {
        min-height: 360px;
    } /* <- yahan tablet height change karo */
}
/* Desktop */
@media (min-width: 1200px) {
    .slider-santosh-youtube,
    .poster-santosh-youtube {
        min-height: 350px;
    } /* <- yahan desktop height change karo */
}

/* ===== Mobile: outer black bars fix (16:9 lock) ===== */
@media (max-width: 767.98px) {
    .slider-santosh-youtube {
        aspect-ratio: 16 / 9;
        height: auto;
        min-height: 0;
    }
    .slides-santosh-youtube,
    .slide-santosh-youtube {
        height: 100%;
    }
}

/* ===== Slides ===== */
.slides-santosh-youtube {
    display: flex;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: transform;
}
.slide-santosh-youtube {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: #000;
    overflow: hidden;
}

/* ===== Thumbnail ===== */
.thumb-santosh-youtube {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.9);
    transition: filter 0.2s ease;
}
.slide-santosh-youtube:hover .thumb-santosh-youtube {
    filter: brightness(0.82);
}

/* ===== Inner letterbox crop (light zoom) ===== */
.slide-santosh-youtube .player-santosh-youtube {
    position: absolute;
    left: 0;
    width: 100%;
    top: -6%;
    height: 112%; /* ~12% zoom; adjust if needed */
}
.slide-santosh-youtube .thumb-santosh-youtube {
    background-size: 100% auto; /* thumb ko thoda zoom */
}
@media (max-width: 576px) {
    .slide-santosh-youtube .player-santosh-youtube {
        top: -5%;
        height: 110%;
    }
    .slide-santosh-youtube .thumb-santosh-youtube {
        background-size: 108% auto;
    }
}

/* ===== Caption ===== */
.caption-santosh-youtube {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 30px;
    color: #fff;
    font-weight: 700;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65);
    font-size: clamp(14px, 1.6vw, 18px);
    letter-spacing: 0.2px;
    pointer-events: none;
}

/* ===== Play button ===== */
.play-btn-santosh-youtube {
    position: relative;
    z-index: 2;
    display: inline-grid;
    place-items: center;
    width: 68px;
    height: 48px;
    border-radius: 10px;
    border: 0;
    background: #ff0000;
    cursor: pointer;
    outline: none;
    transition: transform 0.1s ease, background 0.15s ease;
}
.play-btn-santosh-youtube:hover {
    background: #e60000;
}
.play-btn-santosh-youtube:active {
    transform: scale(0.96);
    background: #cc0000;
}
.play-btn-santosh-youtube:after {
    content: "";
    display: block;
    margin-left: 6px;
    width: 0;
    height: 0;
    border-left: 24px solid #fff;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}
.play-btn-santosh-youtube:focus-visible {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px #ff0000;
}

/* ===== Player base ===== */
.player-santosh-youtube {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: none;
}
.slide-santosh-youtube.playing-santosh-youtube .player-santosh-youtube {
    display: block;
}
.slide-santosh-youtube.playing-santosh-youtube .thumb-santosh-youtube,
.slide-santosh-youtube.playing-santosh-youtube .play-btn-santosh-youtube,
.slide-santosh-youtube.playing-santosh-youtube .caption-santosh-youtube {
    display: none;
}

/* ===== Arrows + dots + progress ===== */
.arrows-santosh-youtube {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    padding: 0 10px;
}
.arrow-santosh-youtube {
    pointer-events: auto;
    width: 40px;
    height: 40px;
    border: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    outline: none;
}
.arrow-santosh-youtube:hover {
    background: rgba(0, 0, 0, 0.65);
}
.arrow-santosh-youtube:active {
    transform: scale(0.96);
}

.controls-santosh-youtube {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    z-index: 3;
}
.dot-santosh-youtube {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: transform 0.15s, background 0.15s;
}
.dot-santosh-youtube.active-santosh-youtube {
    background: #fff;
    transform: scale(1.15);
}

.progress-santosh-youtube {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    overflow: hidden;
}
.progress-bar-santosh-youtube {
    height: 100%;
    width: 0%;
    background: #fff;
    transition: width linear;
}

/* RIGHT poster (desktop/tablet): full cover, no gaps */
.poster-santosh-youtube {
    position: relative; /* for absolute child */
    overflow: hidden;
    background: #f8fafc;
    height: 100%; /* fill row height to match LEFT */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    display: block;
}

.poster-img-santosh-youtube {
    position: absolute;
    /* 1px overscan to avoid hairline gaps on zoom */
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    object-fit: cover; /* fill fully (may crop a bit) */
    object-position: center;
    display: block;
    image-rendering: auto;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* MOBILE: no 16:9, no fixed height — natural flow */
@media (max-width: 767.98px) {
    .poster-santosh-youtube {
        aspect-ratio: auto !important; /* ✅ remove 16:9 */
        height: auto; /* container grows with image */
        min-height: 0;
    }
    .poster-img-santosh-youtube {
        position: static; /* come back to normal flow */
        width: 100%;
        height: auto; /* keep image ratio */
        object-fit: cover; /* fill width, no side gaps */
        transform: none; /* reset */
    }
}

/* ===== Reduce motion ===== */
@media (prefers-reduced-motion: reduce) {
    .slides-santosh-youtube {
        transition: none;
    }
    .progress-bar-santosh-youtube {
        transition: none;
    }
}

/* <!--==================================================-->
<!-- End Youtube Section -->
<!--==================================================--> */

/* <!--==================================================-->
<!-- Start  FAQ  Section  -->
<!--==================================================--> */

.course-faq-section {
    padding: 105px 0 60px;
    background: url(../images/resource/faq-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
    z-index: 1;
}
.course-faq-section-title {
    margin-bottom: 3rem;
}

/* container ko center align karo */
.course-faq-section-title {
    text-align: center;
}

/* Title */
.course-faq-section-title h2 {
    position: relative; /* ::after ke liye anchor */
    display: inline-block; /* width = text width (underline match) */
    margin: 0 0 14px; /* neeche thoda space underline ke liye */
    font-size: 32px;
    line-height: 1.2; /* 57px ki jagah cleaner ratio */
    font-weight: 700;
    color: inherit;
}

/* Underline */
.course-faq-section-title h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    height: 4px;
    width: 100%; /* exactly text width */
    background: linear-gradient(90deg, rgb(236, 72, 153), rgb(37, 99, 235));
    transform-origin: center;
    transform: scaleX(0.4); /* initial shorter line */
    transition: transform 0.35s ease;
}

/* Hover → full expand */
.course-faq-section-title h2:hover::after {
    transform: scaleX(1);
}

ul.course-faq-accordion {
    padding: 0 10px 60px;
    border-radius: 10px;
    position: relative;
    z-index: 1;
}

ul.course-faq-accordion:before {
    position: absolute;
    content: "";
    top: 0;
    left: 20px;
    height: 1px;
    width: 97%;
    background: #000000;
    opacity: 0.102;
}

.course-faq-accordion li {
    list-style: none;
    padding: 2px 0px 15px;
    position: relative;
    z-index: 1;
}

.course-faq-accordion li h3 {
    flex-shrink: 0;
}

.course-faq-accordion li:before {
    position: absolute;
    content: "";
    bottom: 0;
    left: 10px;
    height: 1px;
    width: 100%;
    background: #000000;
    opacity: 0.102;
}

.course-faq-accordion li h3 {
    position: relative;
    width: 100%;
    display: block;
    cursor: pointer;
    padding: 14px 50px 14px 30px;
    border-radius: 5px;
    z-index: 1;
    font-size: 18px;
    line-height: 24px;
    color: #353535;
    font-weight: 700;
    transition: 0.5s;
    margin: 0;
    transition: height 0.3s ease-in-out, color 0.5s;
}

.course-faq-accordion li h3:hover {
    color: #ec4899 !important;
}

.course-faq-accordion li p {
    padding: 5px 20px 0px 30px;
    margin: 0;
    backdrop-filter: blur(1.9px);
    overflow: hidden;
    border-radius: 0 0 5px 5px;
    font-size: 16px;
    color: #525252;
    font-weight: 400;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.5s ease, padding 0.5s ease;
}

.course-faq-accordion li p.show {
    max-height: 500px;
    opacity: 1;
    padding: 5px 20px 5px 30px;
}

.course-faq-accordion h3::before {
    content: "";
    position: absolute;
    width: 3px;
    height: 12px;
    background: #070707;
    right: 32px;
    top: 22px;
    transition: background 0.2s ease-in-out;
}

.course-faq-accordion h3::after {
    content: "";
    position: absolute;
    width: 13px;
    height: 3px;
    background: #070707;
    right: 27px;
    top: 26px;
    transition: background 0.2s ease-in-out;
}

.course-faq-accordion h3:hover::before,
.course-faq-accordion h3:hover::after {
    background: #ec4899;
}

.course-faq-accordion h3.active::before {
    height: 0;
}

.course-faq-section.up {
    background: #fff;
    padding: 105px 0 0;
}

.course-faq-accordion h3::before {
    right: 25px; /* adjust if needed */
}

.course-faq-accordion h3::after {
    right: 20px; /* adjust if needed */
}

/* <!--==================================================-->
<!-- End  FAQ  Section  -->
<!--==================================================--> */

/* <!--==================================================-->
<!-- Start Footer Section -->
<!--==================================================--> */

.trainer-footer-section {
    background: #0d0b16;
    color: #eef0f6;
    border-top: 1px solid #232230;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.trainer-footer-logo img {
    max-height: 46px;
    width: auto;
    display: block;
}

.trainer-footer-widget-description p {
    color: #b8bfcc;
    line-height: 1.8;
    font-size: 15px;
    margin: 0;
}

.trainer-footer-title {
    font-weight: 900;
    font-size: 18px;
    color: #f6f7fb;
    margin-bottom: 12px;
    position: relative;
    display: inline-block;
}
.trainer-footer-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    height: 3px;
    width: 72px;
    background: #e91e63;
}

/* remove underline */
.trainer-footer-links a,
.trainer-footer-links span a,
.trainer-footer-social-list a {
    text-decoration: none !important;
    border: none !important;
}

.trainer-footer-links {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}
.trainer-footer-links li {
    margin-bottom: 18px;
}
.trainer-footer-links a,
.trainer-footer-links span {
    color: #eef0f6;
    font-size: 15px;
    line-height: 1.65;
    transition: color 0.2s ease, transform 0.2s ease;
}
.trainer-footer-links a:hover {
    color: #e91e63 !important;
    transform: translateX(2px);
}

.trainer-footer-links i {
    margin-right: 0.5rem;
    color: #8c90a2;
}

/* contact info */
.trainer-footer-contact-item {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    color: #eef0f6;
}
.trainer-footer-contact-item i {
    width: 20px;
    min-width: 20px;
    text-align: center;
    margin-top: 0.2rem;
    color: #eef0f6;
}

/* social tiles */
.trainer-footer-social-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.trainer-footer-social-list a {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: #ffffff;
    border: 1px solid #ececf3;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease,
        border 0.2s ease;
}
.trainer-footer-social-list a:hover {
    background: #e91e63 !important;
    border-color: #e91e63 !important;
    box-shadow: 0 10px 20px rgba(236, 72, 153, 0.35);
}
.trainer-footer-social-list a:hover i,
.trainer-footer-social-list a:hover svg {
    color: #fff !important;
}

/* brand colors (scoped) */
.trainer-footer-body .fa-whatsapp {
    color: #25d366;
}
.trainer-footer-body .bi-youtube {
    color: #ff0000;
}
.trainer-footer-body .fa-linkedin {
    color: #0a66c2;
}
.trainer-footer-body .fa-telegram {
    color: #229ed9;
}
.trainer-footer-body .fa-instagram {
    color: #e4405f;
}
.trainer-footer-body .fa-facebook-f {
    color: #1877f2;
}
.trainer-footer-twitter svg {
    height: 22px;
    width: auto;
    color: #000000;
}

.trainer-footer-bottom {
    border-top: 1px solid #232230;
}
.trainer-footer-bottom p {
    color: #c7cbd6;
    font-size: 14px;
    margin: 0;
    padding: 18px 0 26px;
}

/* <!--==================================================-->
<!-- End Footer Section -->
<!--==================================================--> */