/* =========================================================================
   STYLIN ACADEMY — DESIGN SYSTEM
   Palette sampled directly from the official logo:
     Gold   #FFD403   (swirl "S" + butterfly)
     Navy   #0E2260   (deepened from sampled #01267E for AA text contrast)
     Ink    #1B1B1B   (sampled tagline)
   Display face: Fraunces (soft-contrast serif — warmth + editorial polish)
   Body/UI face: Manrope (clean, slightly rounded terminals)
   Signature motif: an angled "reveal" panel + thin gold arc, echoing the
   swirl of the "S" and the transformation idea at the heart of the brand
   (portfolios are literally before/after — the whole product is about
   visible transformation).
   ========================================================================= */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces.ttf') format('truetype-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Brand tokens (Super Admin can override these via Settings > Branding,
     which rewrites this block server-side — see admin/settings/branding) ---- */
  --navy: #0E2260;
  --navy-deep: #081746;
  --navy-light: #1B3A94;
  --gold: #FFD403;
  --gold-deep: #C99400;
  --gold-soft: #FFE9A8;
  --ink: #1B1B1B;
  --ink-soft: #5B5B66;
  --paper: #FFFBF0;
  --white: #FFFFFF;
  --line: #EDE7D6;
  --success: #1E8E5A;
  --danger: #C23A3A;
  --warning: #B8790C;
  --info: #1B6FB8;

  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Manrope', 'Segoe UI', sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --shadow-soft: 0 8px 30px rgba(14, 34, 96, 0.08);
  --shadow-card: 0 2px 14px rgba(14, 34, 96, 0.07);

  /* Bootstrap 5 variable overrides */
  --bs-primary: var(--navy);
  --bs-primary-rgb: 14, 34, 96;
  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--ink);
  --bs-link-color: var(--navy);
  --bs-border-radius: var(--radius-sm);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  font-optical-sizing: auto;
}
h1, h2, h3, h4, .display-font {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy);
}
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--navy-light); }
:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--gold-deep);
}

/* ---- Buttons ---- */
.btn { border-radius: 999px; font-weight: 600; padding: 0.65rem 1.5rem; transition: transform .15s ease, box-shadow .15s ease; }
.btn:active { transform: translateY(1px); }
.btn-gold { background: var(--gold); color: var(--navy-deep); border: none; }
.btn-gold:hover { background: var(--gold-deep); color: var(--white); }
.btn-navy { background: var(--navy); color: var(--white); border: none; }
.btn-navy:hover { background: var(--navy-light); color: var(--white); }
.btn-outline-navy { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }
.btn-outline-navy:hover { background: var(--navy); color: var(--white); }
.btn-ghost-white { background: rgba(255,255,255,0.12); color: var(--white); border: 1.5px solid rgba(255,255,255,0.5); }
.btn-ghost-white:hover { background: var(--white); color: var(--navy); }

/* ---- Top info bar ---- */
.topbar { background: var(--navy-deep); color: rgba(255,255,255,.85); font-size: .82rem; }
.topbar a { color: rgba(255,255,255,.85); }
.topbar a:hover { color: var(--gold); }

/* ---- Header / nav ---- */
.site-header { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1030; }
.site-header .navbar-brand img { height: 42px; width: auto; }
.site-header .nav-link { color: var(--ink); font-weight: 600; font-size: .95rem; }
.site-header .nav-link:hover, .site-header .nav-link.active { color: var(--navy); }
.site-header .nav-link.active { position: relative; }
.site-header .nav-link.active::after {
  content: ''; position: absolute; left: 0.5rem; right: 0.5rem; bottom: -2px; height: 3px;
  background: var(--gold); border-radius: 3px;
}

/* ---- Signature hero: angled navy panel + gold arc ---- */
.hero {
  position: relative;
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-light) 100%);
  color: var(--white);
  overflow: hidden;
  padding: 5.5rem 0 7rem;
}
.hero::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 90px;
  background: var(--white);
  clip-path: polygon(0 100%, 100% 100%, 100% 40%, 0 100%);
}
.hero .gold-arc {
  position: absolute; top: -60px; right: -60px; width: 420px; height: 420px;
  border: 3px solid var(--gold); border-radius: 50%;
  opacity: 0.35;
  border-right-color: transparent; border-bottom-color: transparent;
  transform: rotate(35deg);
}
.hero h1 { color: var(--white); font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height: 1.08; }
.hero .lead { color: rgba(255,255,255,.82); font-size: 1.15rem; max-width: 46ch; }
.hero .eyebrow { color: var(--gold); }
.badge-eyebrow {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,212,3,.14); border: 1px solid rgba(255,212,3,.35); color: var(--gold);
  font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .4rem .9rem; border-radius: 999px; margin-bottom: 1.1rem;
}

.stat-strip { display: flex; gap: 2.5rem; flex-wrap: wrap; margin-top: 2.5rem; }
.stat-strip .num { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--gold); display: block; }
.stat-strip .lbl { font-size: .82rem; color: rgba(255,255,255,.75); }

/* ---- Sections ---- */
.section { padding: 4.5rem 0; }
.section-alt { background: var(--paper); }
.section-title { margin-bottom: 2.5rem; }
.section-title h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
.section-title p { color: var(--ink-soft); max-width: 60ch; }

/* ---- Cards ---- */
.card { border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.course-card { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); transition: transform .2s ease, box-shadow .2s ease; height: 100%; background: var(--white); }
.course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.course-card .thumb { aspect-ratio: 4/3; background: var(--paper); overflow: hidden; position: relative; }
.course-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.badge-type { position: absolute; top: .75rem; left: .75rem; padding: .3rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.badge-type.online { background: var(--navy); color: var(--white); }
.badge-type.offline { background: var(--gold); color: var(--navy-deep); }
.course-card .body { padding: 1.1rem 1.2rem 1.3rem; }
.course-card .price { font-family: var(--font-display); font-weight: 700; color: var(--navy); font-size: 1.2rem; }
.course-card .price del { color: var(--ink-soft); font-weight: 400; font-size: .9rem; margin-right: .4rem; }

.trainer-card { text-align: center; }
.trainer-card img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 4px solid var(--gold-soft); }

/* Before/after transformation block — the site's recurring signature device */
.transform-frame { position: relative; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-soft); }
.transform-frame .split { display: grid; grid-template-columns: 1fr 1fr; }
.transform-frame img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.transform-frame .tag { position: absolute; top: .75rem; padding: .3rem .8rem; border-radius: 999px; font-size: .72rem; font-weight: 700; color: var(--white); background: rgba(14,34,96,.75); backdrop-filter: blur(2px); }
.transform-frame .tag.before { left: .75rem; }
.transform-frame .tag.after { right: .75rem; background: var(--gold-deep); }

.testimonial-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.6rem; height: 100%; }
.testimonial-card .stars { color: var(--gold-deep); letter-spacing: 2px; }
.quote-mark { font-family: var(--font-display); font-size: 3rem; color: var(--gold-soft); line-height: .5; }

.faq-item summary { cursor: pointer; font-weight: 700; padding: 1rem 0; border-bottom: 1px solid var(--line); list-style: none; display:flex; justify-content:space-between; align-items:center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary { color: var(--navy); }
.faq-item p { color: var(--ink-soft); padding-bottom: 1rem; }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
.gallery-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); }
.gallery-item { position: relative; border-radius: var(--radius-sm); overflow: hidden; }
.gallery-item .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: .5rem .7rem; font-size: .78rem; color: #fff; background: linear-gradient(transparent, rgba(8,23,70,.85)); }

.site-footer { background: var(--navy-deep); color: rgba(255,255,255,.75); padding: 4rem 0 1.5rem; }
.site-footer h6 { color: var(--white); font-family: var(--font-display); letter-spacing: .02em; margin-bottom: 1rem; }
.site-footer a { color: rgba(255,255,255,.72); }
.site-footer a:hover { color: var(--gold); }
.site-footer .socials a { display:inline-flex; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.25); align-items:center; justify-content:center; margin-right:.5rem; }
.site-footer .socials a:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.5rem; padding-top: 1.5rem; font-size: .82rem; }

.whatsapp-fab {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1040;
  width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-soft);
  font-size: 1.6rem;
}
.whatsapp-fab:hover { transform: scale(1.06); color: #fff; }

/* ---- Forms ---- */
.form-control, .form-select { border-radius: var(--radius-sm); border-color: var(--line); padding: .65rem .9rem; }
.form-control:focus, .form-select:focus { border-color: var(--navy-light); box-shadow: 0 0 0 .2rem rgba(14,34,96,.12); }
label.form-label { font-weight: 600; font-size: .88rem; color: var(--navy); }
.form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-card); }

.badge-status { padding: .35rem .7rem; border-radius: 999px; font-size: .74rem; font-weight: 700; text-transform: capitalize; }
.badge-status.pending, .badge-status.draft, .badge-status.new { background: #FFF3D6; color: var(--warning); }
.badge-status.approved, .badge-status.active, .badge-status.valid, .badge-status.paid, .badge-status.verified, .badge-status.converted, .badge-status.completed, .badge-status.resolved { background: #E1F5EC; color: var(--success); }
.badge-status.rejected, .badge-status.cancelled, .badge-status.overdue, .badge-status.revoked, .badge-status.lost { background: #FBE4E4; color: var(--danger); }
.badge-status.under_review, .badge-status.follow_up, .badge-status.on_hold, .badge-status.suspended { background: #E4EEFB; color: var(--info); }

.print-only { display: none; }
@media print {
  .no-print { display: none !important; }
  .print-only { display: block !important; }
  body { background: #fff; }
}

@media (max-width: 767.98px) {
  .stat-strip { gap: 1.4rem; }
  .hero { padding: 3.5rem 0 5rem; }
}
.stat-strip .lbl {
    color: #1f2937 !important;
    opacity: 1 !important;
    font-weight: 600;
}

.stat-strip .num {
    color: #f4c400 !important;
}
/* ===== STYLIN HERO SLIDER ===== */

.stylin-hero{
    position:relative;
    min-height:620px;
    overflow:hidden;
    display:flex;
    align-items:center;
    background:#071d4f;
}

.stylin-hero-slider{
    position:absolute;
    inset:0;
    z-index:0;
}

.hero-slide{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:0;
    transform:scale(1.05);
    transition:opacity 1.2s ease, transform 6s ease;
}

.hero-slide.active{
    opacity:1;
    transform:scale(1);
}

.stylin-hero-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(
        90deg,
        rgba(5,20,58,.95) 0%,
        rgba(5,20,58,.82) 38%,
        rgba(5,20,58,.40) 68%,
        rgba(5,20,58,.10) 100%
    );
}

.stylin-hero-content{
    position:relative;
    z-index:2;
    color:#fff;
    padding-top:90px;
    padding-bottom:130px;
}

.hero-small-title{
    color:#f4c400;
    font-size:15px;
    font-weight:800;
    letter-spacing:2px;
    margin-bottom:18px;
}

.stylin-hero h1{
    color:#fff;
    font-size:clamp(42px,5vw,70px);
    line-height:1.08;
    font-weight:800;
    margin-bottom:22px;
}

.stylin-hero h1 span{
    color:#f4c400;
}

.stylin-hero p{
    max-width:620px;
    font-size:18px;
    line-height:1.7;
    color:rgba(255,255,255,.90);
}

.stylin-primary-btn,
.stylin-outline-btn{
    min-height:54px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:0 28px;
    border-radius:8px;
    font-weight:700;
    text-decoration:none;
    transition:.25s ease;
}

.stylin-primary-btn{
    background:#f4c400;
    color:#071d4f;
    border:2px solid #f4c400;
}

.stylin-outline-btn{
    border:2px solid #fff;
    color:#fff;
}

.stylin-primary-btn:hover{
    transform:translateY(-2px);
    color:#071d4f;
}

.stylin-outline-btn:hover{
    background:#fff;
    color:#071d4f;
}

@media(max-width:767px){
    .stylin-hero{
        min-height:580px;
    }

    .stylin-hero-overlay{
        background:rgba(5,20,58,.76);
    }

    .stylin-hero-content{
        padding-top:70px;
        padding-bottom:90px;
    }

    .stylin-hero h1{
        font-size:40px;
    }
}
/* ===== STYLIN BENEFIT CARDS FIX ===== */

.stylin-benefits-wrap{
    position:relative;
    margin-top:-70px;
    z-index:20;
    padding-bottom:60px;
}

.stylin-benefits-wrap .container{
    position:relative;
    z-index:21;
}

.stylin-benefits{
    background:#fff;
    border-radius:16px;
    box-shadow:0 20px 60px rgba(0,0,0,.14);
    padding:32px 34px;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:28px;
}

.stylin-benefit-item{
    display:flex !important;
    align-items:flex-start;
    gap:16px;
    min-width:0;
}

.benefit-icon{
    width:56px;
    height:56px;
    min-width:56px;
    border-radius:14px;
    display:flex !important;
    align-items:center;
    justify-content:center;
    background:#fff6cc;
    color:#d4a900;
    font-size:25px;
}

.stylin-benefit-item h4{
    margin:0 0 7px;
    font-size:20px;
    font-weight:700;
    color:#071d4f;
}

.stylin-benefit-item p{
    margin:0;
    color:#667085;
    line-height:1.6;
    font-size:15px;
}

@media(max-width:991px){
    .stylin-benefits{
        grid-template-columns:1fr !important;
    }

    .stylin-benefits-wrap{
        margin-top:-35px;
    }
}
.home-person-card{
    text-align:center;
}

.home-person-photo{
    width:140px;
    height:140px;
    margin:0 auto 12px;
    border-radius:50%;
    overflow:hidden;
    border:3px solid #f4c400;
    background:#fff;
}

.home-person-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.home-person-name{
    font-size:18px;
    font-weight:600;
    color:#111;
    line-height:1.2;
}

.home-person-role{
    margin-top:4px;
    font-size:14px;
    color:#777;
}
/* =========================
   HOME EVENTS & WORKSHOPS
========================= */

.home-events-section{
    background:#07122f;
    padding:70px 0 80px;
}

.home-events-heading{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:20px;
    margin-bottom:28px;
}

.home-events-heading .eyebrow{
    color:#f4c400;
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}

.home-events-heading h2{
    color:#fff;
    font-size:42px;
    margin:5px 0 0;
    font-weight:700;
}

.home-events-all{
    color:#f4c400;
    border:1px solid #f4c400;
    padding:8px 15px;
    border-radius:5px;
    text-decoration:none;
    font-size:14px;
}

.home-events-all:hover{
    background:#f4c400;
    color:#07122f;
}


/* CARD */

.home-event-card{
    height:100%;
    background:#0d1a3e;
    border:1px solid rgba(244,196,0,.35);
    border-radius:16px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.home-event-image{
    position:relative;
    display:block;
    height:280px;
    overflow:hidden;
    background:#111b38;
}

.home-event-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .35s ease;
}

.home-event-card:hover .home-event-image img{
    transform:scale(1.04);
}


/* DATE BADGE */

.home-event-date{
    position:absolute;
    top:16px;
    left:16px;
    width:66px;
    min-height:66px;
    background:#091532;
    border:1px solid rgba(244,196,0,.5);
    border-radius:10px;
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    z-index:2;
    box-shadow:0 8px 20px rgba(0,0,0,.2);
}

.home-event-date strong{
    color:#f4c400;
    font-size:24px;
    line-height:1;
}

.home-event-date span{
    margin-top:5px;
    font-size:10px;
    color:#ddd;
}


/* CATEGORY */

.home-event-category{
    position:absolute;
    right:15px;
    top:15px;
    background:#f4c400;
    color:#07122f;
    font-size:12px;
    font-weight:700;
    padding:6px 12px;
    border-radius:999px;
}


/* BODY */

.home-event-body{
    padding:22px;
    display:flex;
    flex-direction:column;
    flex-grow:1;
}

.home-event-body h3{
    margin:0 0 16px;
    font-size:24px;
    line-height:1.2;
}

.home-event-body h3 a{
    color:#fff;
    text-decoration:none;
}

.home-event-body h3 a:hover{
    color:#f4c400;
}

.home-event-meta{
    display:flex;
    flex-direction:column;
    gap:8px;
    color:#aeb8d1;
    font-size:14px;
}

.home-event-meta div{
    display:flex;
    gap:8px;
    align-items:center;
}

.home-event-meta i{
    color:#f4c400;
}


/* DIVIDER */

.home-event-divider{
    border-top:1px dashed rgba(244,196,0,.55);
    margin:22px 0 16px;
}


/* BOTTOM */

.home-event-bottom{
    margin-top:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
}

.home-event-price{
    color:#f4c400;
}

.home-event-price small{
    display:block;
    color:#aeb8d1;
    font-size:11px;
    margin-bottom:2px;
}

.home-event-price strong{
    font-size:18px;
}


/* BUTTONS */

.home-event-actions{
    display:flex;
    gap:8px;
}

.event-details-btn,
.event-register-btn{
    padding:9px 13px;
    border-radius:5px;
    font-size:13px;
    text-decoration:none;
    font-weight:600;
}

.event-details-btn{
    color:#f4c400;
    border:1px solid #f4c400;
}

.event-details-btn:hover{
    background:#f4c400;
    color:#07122f;
}

.event-register-btn{
    background:#f4c400;
    color:#07122f;
    border:1px solid #f4c400;
}

.event-register-btn:hover{
    background:#ffd633;
    color:#07122f;
}


/* RESPONSIVE */

@media (max-width:991px){
    .home-events-heading h2{
        font-size:34px;
    }

    .home-event-image{
        height:250px;
    }
}

@media (max-width:767px){
    .home-events-section{
        padding:50px 0;
    }

    .home-events-heading{
        align-items:flex-start;
        flex-direction:column;
    }

    .home-events-heading h2{
        font-size:30px;
    }

    .home-event-image{
        height:260px;
    }
}
/* Home Events section - white background + centered heading */

.home-events-section{
    background:#ffffff !important;
    padding:70px 0 80px;
}

.home-events-heading{
    position:relative;
    display:block;
    text-align:center;
    margin-bottom:35px;
}

.home-events-heading .eyebrow{
    color:#d6a900;
}

.home-events-heading h2{
    color:#082a6b;
    text-align:center;
    margin-top:6px;
}

/* All Events button right side */
.home-events-all{
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
}

/* Keep cards centered when only 1 or 2 events exist */
.home-events-section .row{
    justify-content:center;
}
/* EVENT CARD - MATCH COURSE CARD STYLE */

.home-event-card{
    background:#fff !important;
    border:1px solid #eadfbf !important;
    border-radius:14px !important;
    overflow:hidden;
    box-shadow:none !important;
    height:100%;
}

.home-event-image{
    height:260px;
    background:#f8f5ed;
    display:block;
    position:relative;
    overflow:hidden;
}

.home-event-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.home-event-category{
    position:absolute;
    top:14px;
    left:14px;
    right:auto;
    background:#ffcc00;
    color:#082a6b;
    font-size:12px;
    font-weight:600;
    padding:6px 12px;
    border-radius:20px;
}

.home-event-date{
    display:none !important;
}

.home-event-body{
    background:#fff !important;
    padding:18px !important;
}

.home-event-body h3{
    margin:2px 0 8px;
    font-size:19px;
    line-height:1.25;
}

.home-event-body h3 a{
    color:#082a6b !important;
    text-decoration:none;
    font-weight:500;
}

.home-event-body h3::before{
    content:"Event";
    display:block;
    font-size:13px;
    font-weight:400;
    color:#082a6b;
    margin-bottom:2px;
}

.home-event-meta{
    color:#667085 !important;
    font-size:13px;
    gap:5px;
}

.home-event-meta i{
    color:#667085 !important;
}

.home-event-divider{
    display:none;
}

.home-event-bottom{
    margin-top:14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.home-event-price{
    color:#082a6b !important;
}

.home-event-price small{
    display:none;
}

.home-event-price strong{
    font-size:16px;
    color:#082a6b !important;
}

.home-event-actions{
    display:flex;
    gap:6px;
}

.event-details-btn{
    background:transparent !important;
    border:0 !important;
    color:#667085 !important;
    padding:4px 6px !important;
    font-size:12px;
}

.event-register-btn{
    background:transparent !important;
    border:0 !important;
    color:#082a6b !important;
    padding:4px 6px !important;
    font-size:12px;
}
.course-card .thumb{
    height:220px;
    position:relative;
    overflow:hidden;
    background:#f8f5ed;
}

.course-card .thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.course-card .thumb .badge-type{
    position:absolute;
    top:14px;
    left:14px;
    z-index:2;
}
.course-card .thumb{
    width:100% !important;
    height:260px;
    position:relative;
    overflow:hidden;
    background:#f8f5ed;
}

.course-card .thumb img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block;
}

.course-card{
    overflow:hidden;
}
/* ==============================
   HOME SUCCESS STORIES SLIDER
============================== */

.home-success-stories{
    background:#fff;
    padding:80px 0 95px;
}

.home-success-stories .eyebrow{
    color:#d6a800;
    letter-spacing:2px;
    font-size:12px;
    font-weight:600;
}

.home-success-stories h2{
    color:#082a6b;
    font-size:40px;
    margin-top:8px;
}

.success-slider-wrap{
    position:relative;
    max-width:760px;
    margin:0 auto;
    display:flex;
    align-items:center;
    gap:20px;
}

.success-slider-track{
    width:100%;
    overflow:hidden;
}

.success-slide{
    display:none;
}

.success-slide.active{
    display:block;
}

.success-story-card{
    background:#fff;
    border:1px solid #eadfbd;
    border-radius:14px;
    padding:32px;
    min-height:210px;
    box-shadow:0 8px 24px rgba(0,0,0,.03);
}

.success-quote{
    color:#f3d77a;
    font-size:42px;
    line-height:.7;
    margin-bottom:18px;
}

.success-story-text{
    color:#222;
    font-size:16px;
    line-height:1.6;
    margin-bottom:22px;
}

.success-story-person{
    display:flex;
    align-items:center;
    gap:12px;
}

.success-avatar{
    width:34px;
    height:34px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#082a6b;
    font-weight:600;
    font-size:16px;
}

.success-name{
    color:#111;
    font-size:15px;
    font-weight:600;
}

.success-role{
    color:#6d7480;
    font-size:13px;
    margin-top:2px;
}

.success-slider-btn{
    flex:0 0 48px;
    width:48px;
    height:48px;
    border-radius:50%;
    border:1px solid #ddd;
    background:#fff;
    color:#082a6b;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.2s ease;
}

.success-slider-btn:hover{
    background:#082a6b;
    color:#fff;
    border-color:#082a6b;
}

@media (max-width:767px){
    .home-success-stories{
        padding:60px 0 70px;
    }

    .home-success-stories h2{
        font-size:32px;
    }

    .success-slider-wrap{
        gap:10px;
    }

    .success-slider-btn{
        width:40px;
        height:40px;
        flex-basis:40px;
    }

    .success-story-card{
        padding:24px;
    }
}
/* FINAL SUCCESS STORIES - 3 CARDS AUTO SLIDER */

.success-slider-wrap{
    width:100%;
    max-width:1300px;
    margin:0 auto;
    overflow:hidden;
    display:block;
}

.success-slider-track{
    display:flex;
    gap:24px;
    width:100%;
    transition:transform .65s ease;
    will-change:transform;
}

.success-slide{
    display:block !important;
    flex:0 0 calc((100% - 48px) / 3);
    min-width:0;
}

/* REMOVE ALL ARROWS */
.success-slider-btn{
    display:none !important;
}

.success-story-card{
    height:100%;
    min-height:190px;
}

/* TABLET - 2 CARDS */
@media (max-width:991px){
    .success-slide{
        flex:0 0 calc((100% - 24px) / 2);
    }
}

/* MOBILE - 1 CARD */
@media (max-width:767px){
    .success-slide{
        flex:0 0 100%;
    }
}