:root{
      --orange:#f6641d;
      --green:#34a969;
      --lime:#b8ef43;
      --blue:#2e92cd;
      --white:#ffffff;
      --text:#151515;
      --muted:#666c78;
      --bg:#fcfdff;
      --bg-soft:#f5f9fd;
      --border:#e7edf5;
      --shadow:0 16px 40px rgba(34,58,89,.09);
      --radius:24px;
      --navH:86px;
    }

    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }

    html{
      scroll-behavior:smooth;
    }

    body{
      font-family:'Poppins', sans-serif;
      background:var(--bg);
      color:var(--text);
      overflow-x:hidden;
    }

    img{
      max-width:100%;
      display:block;
      height:auto;
    }

    a{
      text-decoration:none;
    }

    .container{
      max-width:1240px;
    }

    /* =========================
       NAVBAR
    ========================= */
    .bmh-navbar{
      position:fixed;
      top:0;
      left:0;
      width:100%;
      z-index:1050;
      background:rgba(255,255,255,.93);
      backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);
      border-bottom:1px solid rgba(46,146,205,.10);
      transition:.3s ease;
    }

    .bmh-navbar.scrolled{
      box-shadow:0 8px 24px rgba(0,0,0,.06);
    }

    .navbar-inner{
      min-height:var(--navH);
    }

    .brand-wrap{
      display:flex;
      align-items:center;
      gap:12px;
    }

    .brand-wrap img{
      height:58px;
      width:auto;
      object-fit:contain;
      display:block;
    }

    .desktop-nav{
      display:flex;
      align-items:center;
      gap:24px;
    }

    .desktop-nav .nav-link{
      color:var(--text);
      font-weight:600;
      font-size:.95rem;
      padding:0;
      position:relative;
    }

    .desktop-nav .nav-link::after{
      content:"";
      position:absolute;
      left:0;
      bottom:-8px;
      width:0;
      height:2px;
      border-radius:20px;
      background:linear-gradient(135deg,var(--orange),var(--blue));
      transition:.3s ease;
    }

    .desktop-nav .nav-link:hover::after,
    .desktop-nav .nav-link.active::after{
      width:100%;
    }

    .desktop-actions{
      display:flex;
      align-items:center;
      gap:10px;
      margin-left:22px;
    }

    .nav-cta{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:12px 20px;
      border:none;
      border-radius:999px;
      color:#fff;
      font-weight:700;
      background:linear-gradient(135deg,var(--orange),var(--green));
      box-shadow:0 12px 26px rgba(52,169,105,.20);
      transition:.3s ease;
    }

    .nav-cta:hover{
      transform:translateY(-2px);
      color:#fff;
    }

    .mobile-toggle{
      width:46px;
      height:46px;
      border-radius:14px;
      border:1px solid var(--border);
      background:#fff;
      color:var(--blue);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:1.35rem;
    }

    /* =========================
       TOGGLES
    ========================= */
    .toggle-group{
      display:flex;
      align-items:center;
      gap:8px;
    }

    .switch-toggle{
      display:inline-flex;
      align-items:center;
      background:#fff;
      border:1px solid var(--border);
      border-radius:999px;
      padding:4px;
      gap:4px;
      box-shadow:0 8px 20px rgba(0,0,0,.04);
    }

    .toggle-btn{
      border:none;
      background:transparent;
      color:var(--text);
      font-size:.82rem;
      font-weight:600;
      padding:9px 14px;
      border-radius:999px;
      transition:all .3s ease;
      white-space:nowrap;
    }

    .toggle-btn.active{
      background:linear-gradient(135deg,var(--blue),var(--green));
      color:#fff;
      box-shadow:0 10px 20px rgba(46,146,205,.18);
    }

    .toggle-btn:hover{
      color:var(--blue);
      background:#f2f8fd;
    }

    .toggle-btn.active:hover{
      color:#fff;
      background:linear-gradient(135deg,var(--blue),var(--green));
    }

    /* =========================
       MOBILE MENU
    ========================= */
    .offcanvas.bmh-offcanvas{
      width:310px;
      background:#fff;
      border-right:1px solid var(--border);
    }

    .bmh-offcanvas .offcanvas-header{
      padding:20px 20px 10px;
    }

    .bmh-offcanvas .offcanvas-body{
      padding:10px 20px 24px;
    }

    .mobile-brand img{
      height:48px;
      width:auto;
    }

    .mobile-menu-links{
      display:flex;
      flex-direction:column;
      gap:10px;
      margin-top:14px;
    }

    .mobile-menu-links a{
      padding:12px 14px;
      border:1px solid var(--border);
      border-radius:14px;
      color:var(--text);
      font-weight:600;
      background:#fff;
      transition:.3s ease;
    }

    .mobile-menu-links a:hover{
      background:#f4f9fd;
      color:var(--blue);
    }

    .mobile-utility{
      display:grid;
      gap:12px;
      margin-top:20px;
    }

    /* =========================
       HERO
    ========================= */
    .hero-section{
      position:relative;
      min-height:100vh;
      display:flex;
      align-items:center;
      padding-top:calc(var(--navH) + 24px);
      overflow:hidden;
      background:
        radial-gradient(circle at top right, rgba(46,146,205,.10), transparent 25%),
        radial-gradient(circle at left bottom, rgba(184,239,67,.10), transparent 22%),
        linear-gradient(180deg,#ffffff 0%, #f8fbff 100%);
    }

    .hero-shape-1,
    .hero-shape-2{
      position:absolute;
      border-radius:50%;
      filter:blur(90px);
      z-index:0;
    }

    .hero-shape-1{
      width:320px;
      height:320px;
      top:10%;
      right:-100px;
      background:rgba(46,146,205,.18);
    }

    .hero-shape-2{
      width:280px;
      height:280px;
      bottom:-60px;
      left:-60px;
      background:rgba(246,100,29,.12);
    }

    .hero-content{
      position:relative;
      z-index:2;
      max-width:710px;
      padding:70px 0 80px;
    }

    .hero-badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:9px 16px;
      border-radius:999px;
      background:#eef7fd;
      color:var(--blue);
      font-size:.88rem;
      font-weight:700;
      margin-bottom:20px;
    }

    .hero-title{
      font-size:clamp(2.3rem, 5vw, 4.7rem);
      line-height:1.04;
      font-weight:800;
      letter-spacing:-.04em;
      margin-bottom:18px;
    }

    .hero-title span{
      background:linear-gradient(135deg,var(--orange),var(--green),var(--blue));
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      background-clip:text;
    }

    .hero-text{
      color:var(--muted);
      font-size:1.04rem;
      line-height:1.95;
      margin-bottom:28px;
      max-width:670px;
    }

    .hero-btns{
      display:flex;
      flex-wrap:wrap;
      gap:14px;
      margin-bottom:30px;
    }

    .btn-main{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:15px 24px;
      border-radius:999px;
      border:none;
      color:#fff;
      font-weight:700;
      background:linear-gradient(135deg,var(--orange),var(--green));
      box-shadow:0 14px 30px rgba(52,169,105,.18);
      transition:.3s ease;
    }

    .btn-main:hover{
      transform:translateY(-3px);
      color:#fff;
    }

    .btn-outline-custom{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:15px 24px;
      border-radius:999px;
      border:1px solid var(--border);
      background:#fff;
      color:var(--text);
      font-weight:700;
      transition:.3s ease;
      box-shadow:0 10px 24px rgba(0,0,0,.04);
    }

    .btn-outline-custom:hover{
      transform:translateY(-3px);
      color:var(--blue);
      border-color:rgba(46,146,205,.30);
    }

    .hero-points{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:12px;
      max-width:700px;
    }

    .hero-point{
      display:flex;
      align-items:flex-start;
      gap:10px;
      padding:14px 16px;
      background:#fff;
      border:1px solid var(--border);
      border-radius:18px;
      box-shadow:var(--shadow);
      color:var(--text);
      font-weight:600;
      line-height:1.6;
    }

    .hero-point i{
      color:var(--green);
      margin-top:2px;
      flex-shrink:0;
    }

    .hero-image{
      position:relative;
      z-index:2;
      border-radius:34px;
      overflow:hidden;
      min-height:560px;
      box-shadow:0 22px 60px rgba(0,0,0,.10);
      background:#fff;
    }

    .hero-image img{
      width:100%;
      height:100%;
      object-fit:cover;
    }

    /* =========================
       COMMON
    ========================= */
    .section-pad{
      padding:92px 0;
    }

    .section-soft{
      background:var(--bg-soft);
    }

    .section-light{
      background:#fff;
    }

    .sec-badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 14px;
      border-radius:999px;
      background:#eef7fd;
      color:var(--blue);
      font-weight:700;
      font-size:.86rem;
      margin-bottom:16px;
    }

    .sec-title{
      font-size:clamp(1.9rem, 3.8vw, 3rem);
      font-weight:800;
      line-height:1.14;
      letter-spacing:-.02em;
      margin-bottom:16px;
    }

    .sec-desc{
      color:var(--muted);
      font-size:1.03rem;
      line-height:1.9;
      max-width:760px;
    }

    .title-wrap{
      margin-bottom:48px;
    }

    .content-card{
      background:#fff;
      border:1px solid var(--border);
      border-radius:28px;
      padding:34px;
      box-shadow:var(--shadow);
      height:100%;
    }

    .content-img{
      border-radius:28px;
      overflow:hidden;
      min-height:430px;
      height:100%;
      box-shadow:var(--shadow);
    }

    .content-img img{
      width:100%;
      height:100%;
      object-fit:cover;
    }

    .highlight-box{
      margin-top:24px;
      background:linear-gradient(180deg,#fff,#f6fbff);
      border-left:4px solid var(--blue);
      border-radius:18px;
      padding:20px 20px 20px 16px;
    }

    .highlight-box p{
      margin:0;
      color:var(--text);
      font-weight:600;
      line-height:1.8;
    }

    .custom-list{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:12px;
    }

    .custom-list li{
      display:flex;
      align-items:flex-start;
      gap:10px;
      color:var(--muted);
      line-height:1.8;
      font-weight:500;
    }

    .custom-list i{
      color:var(--green);
      margin-top:5px;
      flex-shrink:0;
    }

    /* =========================
       INFO CARDS
    ========================= */
    .info-card{
      background:#fff;
      border:1px solid var(--border);
      border-radius:24px;
      padding:28px 24px;
      height:100%;
      box-shadow:var(--shadow);
      transition:.35s ease;
    }

    .info-card:hover{
      transform:translateY(-8px);
      border-color:rgba(46,146,205,.25);
    }

    .info-icon{
      width:66px;
      height:66px;
      border-radius:18px;
      display:flex;
      align-items:center;
      justify-content:center;
      margin-bottom:18px;
      background:linear-gradient(135deg,#eef7fd,#fff);
      color:var(--blue);
      font-size:1.55rem;
      box-shadow:0 10px 24px rgba(46,146,205,.10);
    }

    .info-card h4{
      font-size:1.15rem;
      font-weight:800;
      margin-bottom:12px;
    }

    .info-card p{
      margin:0;
      color:var(--muted);
      line-height:1.8;
    }

    /* =========================
       FOCUS CARDS
    ========================= */
    .focus-card{
      background:#fff;
      border:1px solid var(--border);
      border-radius:24px;
      padding:28px 24px;
      height:100%;
      box-shadow:var(--shadow);
      transition:.35s ease;
    }

    .focus-card:hover{
      transform:translateY(-8px);
    }

    .focus-no{
      width:48px;
      height:48px;
      border-radius:14px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:linear-gradient(135deg,var(--orange),var(--green));
      color:#fff;
      font-weight:800;
      margin-bottom:16px;
      box-shadow:0 10px 22px rgba(246,100,29,.18);
    }

    .focus-card h5{
      font-size:1.08rem;
      font-weight:800;
      margin-bottom:10px;
    }

    .focus-card p{
      margin:0;
      color:var(--muted);
      line-height:1.8;
    }

    /* =========================
       PROGRAM CARDS
    ========================= */
    .program-card{
      background:#fff;
      border:1px solid var(--border);
      border-radius:24px;
      padding:28px 24px;
      height:100%;
      box-shadow:var(--shadow);
      transition:.35s ease;
    }

    .program-card:hover{
      transform:translateY(-8px);
    }

    .program-icon{
      width:62px;
      height:62px;
      border-radius:18px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:linear-gradient(135deg,#fdf3ec,#fff);
      color:var(--orange);
      font-size:1.45rem;
      margin-bottom:16px;
    }

    .program-card h4{
      font-size:1.12rem;
      font-weight:800;
      margin-bottom:10px;
    }

    .program-card p{
      margin:0;
      color:var(--muted);
      line-height:1.8;
    }

    /* =========================
       EXPECT BOX
    ========================= */
    .expect-box{
      background:linear-gradient(135deg,#f7fbff,#ffffff);
      border:1px solid var(--border);
      border-radius:30px;
      padding:42px 34px;
      box-shadow:var(--shadow);
    }

    /* =========================
       CTA
    ========================= */
    .cta-band{
      background:linear-gradient(135deg,var(--blue),var(--green));
      border-radius:32px;
      padding:42px 34px;
      box-shadow:0 18px 44px rgba(46,146,205,.18);
      color:#fff;
    }

    .cta-band h3{
      font-size:clamp(1.7rem, 3vw, 2.5rem);
      font-weight:800;
      margin-bottom:12px;
    }

    .cta-band p{
      color:rgba(255,255,255,.90);
      line-height:1.8;
      margin-bottom:24px;
    }

    /* =========================
       FOOTER
    ========================= */
    .footer{
      background:#0f1724;
      color:#fff;
      padding:80px 0 24px;
      overflow:hidden;
    }

    .footer-brand img{
      max-height:58px;
      width:auto;
      display:block;
      margin-bottom:16px;
    }

    .footer-brand p{
      color:rgba(255,255,255,.74);
      line-height:1.8;
      max-width:430px;
    }

    .footer-title{
      font-size:1.03rem;
      font-weight:800;
      margin-bottom:18px;
      color:#fff;
    }

    .footer-card{
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      border-radius:22px;
      padding:22px;
      height:100%;
    }

    .footer-card p,
    .footer-card a{
      color:rgba(255,255,255,.76);
      line-height:1.9;
      margin:0;
    }

    .footer-links{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:12px;
    }

    .footer-links a{
      color:rgba(255,255,255,.76);
      font-weight:500;
    }

    .footer-links a:hover{
      color:#fff;
    }

    .social-links{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:18px;
    }

    .social-links a{
      width:42px;
      height:42px;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      color:#fff;
      transition:.3s ease;
    }

    .social-links a:hover{
      background:var(--green);
      transform:translateY(-3px);
      color:#fff;
    }

    .newsletter-form{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:14px;
    }

    .newsletter-form input{
      flex:1;
      min-width:220px;
      height:50px;
      border:none;
      outline:none;
      border-radius:14px;
      padding:0 16px;
      background:#fff;
    }

    .newsletter-form button{
      height:50px;
      border:none;
      border-radius:14px;
      background:linear-gradient(135deg,var(--orange),var(--green));
      color:#fff;
      padding:0 20px;
      font-weight:700;
    }

    .footer-bottom{
      margin-top:36px;
      padding-top:18px;
      border-top:1px solid rgba(255,255,255,.08);
      text-align:center;
      color:rgba(255,255,255,.62);
      font-size:.94rem;
    }

    /* =========================
       REVEAL
    ========================= */
    .reveal{
      opacity:0;
      transform:translateY(40px);
      transition:all .8s ease;
      will-change:transform, opacity;
    }

    .reveal.active{
      opacity:1;
      transform:translateY(0);
    }

    /* =========================
       RESPONSIVE
    ========================= */
    @media (max-width:1199.98px){
      .desktop-nav{
        gap:18px;
      }

      .desktop-actions{
        margin-left:16px;
        gap:8px;
      }

      .toggle-btn{
        padding:8px 11px;
        font-size:.78rem;
      }
    }

    @media (max-width:991.98px){
      :root{
        --navH:78px;
      }

      .hero-section{
        min-height:auto;
      }

      .hero-content{
        padding:56px 0 42px;
      }

      .hero-image{
        min-height:420px;
      }

      .hero-points{
        grid-template-columns:1fr;
      }

      .section-pad{
        padding:76px 0;
      }

      .content-img{
        min-height:320px;
        margin-top:20px;
      }
    }

    @media (max-width:767.98px){
      .brand-wrap img{
        height:46px;
      }

      .hero-title{
        font-size:2.25rem;
      }

      .hero-text,
      .sec-desc{
        font-size:1rem;
      }

      .hero-btns{
        flex-direction:column;
        align-items:stretch;
      }

      .btn-main,
      .btn-outline-custom{
        width:100%;
      }

      .hero-image{
        min-height:340px;
      }

      .section-pad{
        padding:64px 0;
      }

      .content-card,
      .expect-box,
      .cta-band{
        padding:24px 20px;
      }

      .info-card,
      .focus-card,
      .program-card{
        padding:24px 20px;
      }

      .newsletter-form{
        flex-direction:column;
      }

      .newsletter-form input,
      .newsletter-form button{
        width:100%;
      }

      .toggle-group{
        width:100%;
        justify-content:space-between;
      }

      .switch-toggle{
        flex:1;
        justify-content:space-between;
      }

      .toggle-btn{
        flex:1;
        text-align:center;
      }

      .footer{
        padding:64px 0 24px;
      }
    }











        /* =============== COURSES SECTION =============== */
    .courses-section{
      padding: 70px 0 80px;
    }

    .courses-heading-wrap{
      max-width: 780px;
      margin: 0 auto 32px;
      text-align: center;
    }
    .courses-kicker{
      font-size: .78rem;
      text-transform: uppercase;
      letter-spacing: .22em;
      color: var(--ew-text-muted);
      margin-bottom: .4rem;
    }
    .courses-title{
      font-size: 2.2rem;
      font-weight: 600;
      margin-bottom: .35rem;
    }
    .courses-subtitle{
      font-size: .95rem;
      color: var(--ew-text-muted);
    }

    /* Filter pills */
    .course-filters{
      display:flex;
      justify-content:center;
      flex-wrap:wrap;
      gap:10px;
      margin-bottom: 30px;
    }
    .course-filter-btn{
      border-radius: 999px;
      border: 1px solid var(--ew-border-soft);
      background:#fff;
      padding: 7px 16px;
      font-size:.86rem;
      color: var(--ew-text-muted);
      display:inline-flex;
      align-items:center;
      gap:6px;
      cursor:pointer;
      transition: all .18s ease;
    }
    .course-filter-btn i{
      font-size:.9rem;
    }
    .course-filter-btn.active{
      background: #000;
      color:#fff;
      border-color: #000;
      box-shadow: 0 10px 22px rgba(15,23,42,.18);
    }

    /* Course cards */
.course-card{
  background:#fff;
  border-radius: 22px;
  box-shadow: 0 22px 45px rgba(15,23,42,.10);
  overflow:hidden;
  border: 1px solid #e5e7eb;
  display:flex;
  flex-direction:column;
  height:100%;
}
    .course-card.in-view{
      opacity:1;
      transform: translateY(0);
    }

    .course-thumb{
      position:relative;
      padding-top: 56%; /* 16:9 */
      overflow:hidden;
    }
    .course-thumb::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(135deg, rgba(15,23,42,.35), transparent 55%),
        radial-gradient(circle at top left, rgba(245,185,65,.28), transparent 60%);
      mix-blend-mode:multiply;
    }
    .course-thumb img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
    }

    .course-badge{
      position:absolute;
      left:14px;
      top:14px;
      background: rgba(5,8,20,.92);
      color:#fff;
      border-radius:999px;
      padding:4px 10px;
      font-size:.72rem;
      display:inline-flex;
      align-items:center;
      gap:6px;
    }
    .course-badge i{
      color: var(--ew-accent);
      font-size:.9rem;
    }

    .course-body{
      padding: 16px 18px 14px;
      flex:1;
      display:flex;
      flex-direction:column;
    }

    .course-type-label{
      font-size:.78rem;
      text-transform: uppercase;
      letter-spacing:.14em;
      color: var(--ew-text-muted);
      margin-bottom:4px;
    }

    .course-title{
      font-size:1rem;
      font-weight:600;
      margin-bottom:4px;
    }

    .course-desc{
      font-size:.86rem;
      color: var(--ew-text-muted);
      margin-bottom:8px;
    }

    .course-meta{
      font-size:.8rem;
      color: var(--ew-text-muted);
      margin-bottom:10px;
    }
    .course-meta i{
      color: var(--ew-accent);
    }

    .course-footer{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      margin-top:auto;
      padding-top:10px;
      border-top: 1px dashed #e5e7eb;
    }

    .course-price{
      font-weight:600;
      font-size:.98rem;
    }
    .course-price small{
      font-weight:400;
      font-size:.78rem;
      color: var(--ew-text-muted);
    }

    .course-actions{
      display:flex;
      gap:6px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

    .btn-course-primary{
      border-radius:999px;
      border:none;
      padding: 6px 14px;
      font-size:.8rem;
      font-weight:500;
      background: #000;
      color:#fff;
      display:inline-flex;
      align-items:center;
      gap:6px;
      white-space:nowrap;
    }
    .btn-course-primary i{
      font-size:.95rem;
    }
    .btn-course-primary:hover{
      color:#fff;
      filter:brightness(1.05);
    }

    .btn-course-ghost{
      border-radius:999px;
      border:1px solid #d1d5db;
      padding: 6px 12px;
      font-size:.78rem;
      background:#fff;
      display:inline-flex;
      align-items:center;
      gap:6px;
      color:#111827;
      white-space:nowrap;
    }
    .btn-course-ghost i{
      font-size:.9rem;
    }
    .btn-course-ghost:hover{
      border-color: var(--ew-accent);
      color: var(--ew-accent);
    }

    /* small pill chips for features (optional) */
    .course-chips{
      display:flex;
      gap:6px;
      flex-wrap:wrap;
      margin-bottom: 8px;
    }
    .course-chip{
      font-size:.72rem;
      padding:3px 8px;
      border-radius:999px;
      background: #f3f4f6;
      color:#4b5563;
    }

    /* Responsive */
    @media (max-width: 991.98px){
      .courses-section{
        padding: 60px 0 70px;
      }
      .courses-title{
        font-size:1.8rem;
      }
    }

    @media (max-width: 575.98px){
      .courses-section{
        padding: 50px 0 60px;
      }
      .course-footer{
        flex-direction:column;
        align-items:flex-start;
      }
      .course-actions{
        width:100%;
        justify-content:flex-start;
        flex-wrap:wrap;
      }
    }