/* ============================================================
   iPlus Madrasah — UI & Motion Layer (ipm-ui.css)
   Design system: .claude/skills/islamic-ui-pro/SKILL.md
   Animates existing page-builder blocks + custom pages by class.
   Progressive enhancement: nothing here hides content without JS.
   ============================================================ */

:root{
  --ipm-green:#0f3d2c; --ipm-green2:#15653f; --ipm-gold:#d4a437; --ipm-gold2:#f4d23f;
  --ipm-yellow:#e9ee8f; --ipm-cream:#f6f1e5; --ipm-line:#e9e0cc; --ipm-ink:#14261d; --ipm-muted:#5a6a60;
  --ipm-ease:cubic-bezier(.22,.61,.36,1); --ipm-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- global feel ---------- */
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }

/* ---------- smooth page-to-page navigation ----------
   Same-origin MPA view transitions: the browser cross-fades from the old
   page to the new one instead of flashing white between them (the source
   of the "blink" when navigating Home/Courses/Classes/Quiz). Progressive
   enhancement - browsers without support just navigate normally. */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation-duration:.16s}
  ::view-transition-new(root){animation-duration:.16s}
}
a,button,.ipm-faq-q,.ipm-bottnav a{-webkit-tap-highlight-color:transparent}

/* Double-scrollbar fix: the theme's own frontend_style.css sets
   #content-area{overflow-x:hidden} with no overflow-y specified — per the
   CSS overflow spec, having one axis non-visible forces the other to
   auto-promote to "auto". On any sufficiently tall page (the homepage, once
   all its blocks were added) #content-area's own box ends up a bit shorter
   than its content, so it independently scrolls a small residual range in
   addition to the page's normal scroll — a second, short scrollbar thumb
   next to the real one ("bada + chota scroll"). Restoring normal flow here
   removes that nested scroll box (body already clips horizontal overflow
   sitewide, so #content-area's own clip was redundant anyway). */
#content-area{overflow:visible !important}

/* header elevates once scrolled (JS toggles .ipm-scrolled) */
header.ipm-scrolled, .ipm-scrolled header{box-shadow:0 6px 24px -12px rgba(15,61,44,.28)}
header{transition:box-shadow .3s var(--ipm-ease)}

/* ---------- scroll-reveal system (AOS-style, JS adds classes) ---------- */
.ipm-reveal{opacity:0;transform:translateY(22px);
  transition:opacity .6s var(--ipm-ease) var(--ipm-d,0ms),transform .6s var(--ipm-ease) var(--ipm-d,0ms)}
.ipm-reveal.ipm-in{opacity:1;transform:none}

/* ---------- hero entrance + ambient motion ---------- */
@media (prefers-reduced-motion: no-preference){
  /* Entrance is transform-only: content paints at full opacity immediately,
     so the browser records LCP at first paint. An opacity:0 start made
     Lighthouse wait for the animation before counting LCP (12s+ on mobile). */
  .ipm-hero .ipm-hero-kick,.ipm-hero h1,.ipm-hero .ipm-hero-p{animation:ipmUpSolid .7s var(--ipm-ease)}
  .ipm-hero h1{animation-delay:.06s;animation-fill-mode:backwards}
  .ipm-hero .ipm-hero-p{animation-delay:.12s;animation-fill-mode:backwards}
  .ipm-hero .ipm-hero-logo{animation:ipmFloat 7s ease-in-out 1.2s infinite}
  .ipm-hero .ipm-hero-beta{animation:ipmPulse 2.8s ease-in-out 1.4s infinite}
}
@keyframes ipmUpSolid{from{transform:translateY(18px)}to{transform:none}}
@keyframes ipmUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes ipmScaleIn{from{opacity:0;transform:scale(.93) translateY(14px)}to{opacity:1;transform:none}}
@keyframes ipmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes ipmPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

/* ---------- gold ornament divider under section headings ---------- */
.ipm-mh .ipm-sec-head h2::after,
.ipm-faq .ipm-faq-phead h2::after,
.ipm-teachers .ipm-eyebrow + h2::after{
  content:"";display:block;width:120px;height:12px;margin:16px auto 0;opacity:.95;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cline x1='0' y1='6' x2='44' y2='6' stroke='%23d4a437' stroke-width='1' opacity='.5'/%3E%3Cline x1='76' y1='6' x2='120' y2='6' stroke='%23d4a437' stroke-width='1' opacity='.5'/%3E%3Cpath d='M60 1l1.6 3.4L65 6l-3.4 1.6L60 11l-1.6-3.4L55 6l3.4-1.6z' fill='%23d4a437'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- mihrab arch on scholar portraits ---------- */
.ipm-home-teachers img,
.ipm-tcard img, .ipm-member img, .ipm-teacher img, .ipm-principal-photo img{
  border-radius:48% 48% 14px 14px / 32% 32% 14px 14px !important;
  transition:transform .35s var(--ipm-ease), box-shadow .35s var(--ipm-ease);
}

/* card lift + gold edge on hover (desktop) */
@media (hover:hover){
  .ipm-home-teachers .col-6>div:hover, .ipm-home-teachers [class*="col-"]>div:hover,
  .ipm-tcard:hover, .ipm-member:hover, .ipm-teacher:hover, .ipm-card:hover,
  .ipm-mh-fcard:hover, .ipm-mh-lcard:hover, .ipm-mh-step:hover{
    border-color:var(--ipm-gold) !important;
  }
  .ipm-home-teachers [class*="col-"]>div:hover img,
  .ipm-tcard:hover img, .ipm-member:hover img{transform:scale(1.03)}
}
.ipm-tcard,.ipm-member,.ipm-teacher,.ipm-card{transition:transform .3s var(--ipm-ease),box-shadow .3s var(--ipm-ease),border-color .3s var(--ipm-ease)}
.ipm-home-teachers [class*="col-"]>div{transition:transform .3s var(--ipm-ease),box-shadow .3s var(--ipm-ease),border-color .3s var(--ipm-ease)}

/* ---------- buttons: sheen sweep + press ---------- */
.ipm-hero-btn,.ipm-enroll,.ipm-submit,.ipm-faq-video a,.ipm-btn,.ipm-wa-btn{position:relative;overflow:hidden}
.ipm-hero-btn::before,.ipm-enroll::before,.ipm-submit::before,.ipm-faq-video a::before,.ipm-btn.primary::before{
  content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .65s ease;pointer-events:none;
}
@media (hover:hover){
  .ipm-hero-btn:hover::before,.ipm-enroll:hover::before,.ipm-submit:hover::before,
  .ipm-faq-video a:hover::before,.ipm-btn.primary:hover::before{left:130%}
}

/* ---------- form focus (contact page) ---------- */
.ipm-field input:focus,.ipm-field textarea:focus,.ipm-field select:focus{
  border-color:var(--ipm-green2) !important;
  box-shadow:0 0 0 4px rgba(21,101,63,.12) !important;outline:none;
  transition:border-color .2s,box-shadow .2s;
}

/* ---------- FAQ micro-polish ---------- */
.ipm-faq .ipm-faq-chev{transition:transform .35s var(--ipm-spring),margin .35s var(--ipm-spring)}
.ipm-faq .ipm-faq-qn{transition:background .25s,color .25s}

/* ============================================================
   MOBILE APP FEEL  (<992px)
   ============================================================ */
@media (max-width:991.98px){

  /* native press "squish" on every interactive surface */
  .ipm-hero-btn:active,.ipm-enroll:active,.ipm-submit:active,.ipm-btn:active,
  .ipm-faq-q:active,.ipm-faq-video a:active,.ipm-wa-btn:active,
  .ipm-mh-fcard:active,.ipm-mh-lcard:active,.ipm-mh-step:active,.ipm-mh-qa:active,
  .ipm-tcard:active,.ipm-member:active,.ipm-teacher:active,.ipm-card:active,
  .ipm-home-teachers [class*="col-"]>div:active,
  .ipm-bottnav a:active{transform:scale(.96);transition:transform .12s ease}

  /* overflow guard: theme page-builder rows run ~24px wide on phones.
     IMPORTANT: the theme's own frontend_style.css already sets
     body{overflow-x:hidden} sitewide (unconditional, every page). Adding
     overflow-x to html AS WELL (even mobile-only) breaks the normal
     html/body overflow-propagation exemption and makes body become its OWN
     independent scroll box nested inside the viewport's scroll box — i.e.
     two stacked scrollbars ("bada + chota scroll"). So: don't touch html's
     or body's overflow-x here at all; fix the actual overflowing element. */
  [data-type="container-content"]{max-width:100% !important;min-width:0 !important}

  /* comfy tap targets */
  .ipm-faq-q{min-height:52px}
}

/* ---------- glass bottom tab bar (injected by ipm-app.js) ---------- */
.ipm-bottnav{display:none}
@media (max-width:991.98px){
  .ipm-bottnav{
    position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));
    z-index:99990;display:flex;justify-content:space-around;align-items:stretch;
    background:rgba(13,42,29,.93);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    border:1px solid rgba(212,164,55,.28);border-radius:22px;padding:8px 6px;
    box-shadow:0 18px 40px -16px rgba(0,0,0,.55);
    animation:ipmNavIn .5s var(--ipm-ease) .15s both;
  }
  .ipm-bottnav a{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    color:#b9cdc1;text-decoration:none;font-family:Inter,system-ui,sans-serif;
    font-size:10.5px;font-weight:600;letter-spacing:.3px;padding:6px 2px;border-radius:14px;
    transition:color .2s;
  }
  .ipm-bottnav a i{font-size:17px;transition:transform .25s var(--ipm-spring)}
  .ipm-bottnav a.active{color:var(--ipm-gold2)}
  .ipm-bottnav a.active i{transform:translateY(-2px)}
  body.ipm-has-bottnav{padding-bottom:calc(86px + env(safe-area-inset-bottom))}
}
@keyframes ipmNavIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ---------- accessibility: motion off ---------- */
@media (prefers-reduced-motion: reduce){
  .ipm-reveal,.ipm-hero .ipm-hero-kick,.ipm-hero h1,.ipm-hero .ipm-hero-p,.ipm-hero .ipm-hero-r{
    opacity:1 !important;transform:none !important;animation:none !important;
  }
  .ipm-hero .ipm-hero-logo,.ipm-hero .ipm-hero-beta,.ipm-bottnav{animation:none !important}
  html{scroll-behavior:auto}
}

/* ============================================================
   THEME RESKIN — premium Islamic identity (site-wide)
   Transforms the stock LMS look: dark-green glass header,
   warm paper canvas, gold accents, premium cards & footer.
   ============================================================ */

/* ---------- canvas & typography ---------- */
body{background:#faf7ef}
h1,h2{font-family:"Playfair Display",Georgia,serif !important;letter-spacing:-.3px}
::selection{background:var(--ipm-gold);color:#fff}
/* custom scrollbar: desktop/mouse only — on touch devices this rendered as a
   second, always-on green bar next to the OS's own overlay scrollbar */
@media (min-width:992px) and (hover:hover){
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:#efe9da}
  ::-webkit-scrollbar-thumb{background:#15653f;border-radius:8px;border:2px solid #efe9da}
  ::-webkit-scrollbar-thumb:hover{background:#0f3d2c}
}

/* ---------- HEADER: deep-green glass ---------- */
#sticky-header.header_area{
  background:linear-gradient(180deg,#0d3524 0%,#0f3d2c 100%) !important;
  border-bottom:1px solid rgba(212,164,55,.25);
  box-shadow:0 12px 34px -22px rgba(0,0,0,.6);
}
.header_area .logo_img img{filter:brightness(0) invert(1)}
.header_area .main_menu .menu_dropdown>ul>li>a{color:#e7efe9 !important;font-weight:600}
.header_area .main_menu .menu_dropdown>ul>li>a:hover{color:var(--ipm-gold2) !important}
.header_area .main_menu .menu_dropdown>ul>li.active_menu_item>a{color:var(--ipm-gold2) !important}
/* dropdown panels stay light with dark links */
.header_area .menu_dropdown ul ul a,
.header_area .single_menu_dropdown a,
.header_area .single_menu_dropdown h4{color:#14261d !important}
/* search pill */
.header_area .theme_search_field{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:15px;overflow:hidden}
.header_area .theme_search_field .form-control{background:transparent !important;color:#fff !important;border:none !important}
.header_area .theme_search_field .form-control::placeholder{color:#9fb7aa}
.header_area .theme_search_field .btn{background:transparent}
.header_area .theme_search_field svg path{fill:#cfdcd4}
/* icons / toggles on dark bar */
.header_area .translator-switch,.header_area .translator-switch *{color:#e7efe9 !important}
.header_area #mobileSearchToggle,.header_area #mobileSearchToggle *{color:#e7efe9}
.header_area #mobileSearchToggle svg path{fill:#e7efe9}
.header_area .mobile_menu i,.header_area .mobile_menu button{color:#f1f6f2}
.header_area .mobile_menu span{background:#f1f6f2}
/* gold Sign In pill (after global button rules, still wins by specificity) */
.header_area .header__right .theme_btn{
  background:linear-gradient(135deg,var(--ipm-gold2),var(--ipm-gold)) !important;
  color:#20240a !important;border:none !important;border-radius:30px !important;font-weight:700;
}

/* ---------- BUTTONS: pill everywhere ---------- */
.theme_btn{border-radius:30px !important;font-weight:600;transition:transform .2s var(--ipm-ease),box-shadow .2s,background .25s}
.theme_btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(15,61,44,.6)}
.theme_btn_outline{border-radius:30px !important}

/* ---------- COURSE / QUIZ / BLOG CARDS ---------- */
.course-item{border-radius:20px !important;border:1px solid #eadfc6;background:#fff;overflow:hidden;
  box-shadow:0 20px 44px -34px rgba(15,61,44,.45);transition:transform .3s var(--ipm-ease),box-shadow .3s,border-color .3s}
.course-item:hover{transform:translateY(-6px);border-color:var(--ipm-gold);box-shadow:0 26px 54px -30px rgba(15,61,44,.55)}
.course-item-img{border-radius:14px;overflow:hidden}
.course-item-title{font-weight:700}
.course-item-title a{color:#14261d}
.course-item-title a:hover{color:#15653f}
.course-tag{background:rgba(212,164,55,.16) !important;color:#8a6a10 !important;border-radius:20px;font-weight:600}
.blog-single{border-radius:20px !important;border:1px solid #eadfc6;overflow:hidden;
  box-shadow:0 20px 44px -34px rgba(15,61,44,.4);transition:transform .3s var(--ipm-ease),border-color .3s}
.blog-single:hover{transform:translateY(-5px);border-color:var(--ipm-gold)}

/* ---------- APK / mobile-app band: deep green ---------- */
.apk{background:radial-gradient(120% 130% at 18% 20%,#164a33 0%,#0b2c1d 100%) !important;
  border-radius:26px;overflow:hidden}
.apk .apk-content h1,.apk .apk-content h2,.apk .apk-content h3{color:#fff !important}
.apk .apk-content h1 span,.apk .apk-content h2 span,.apk .apk-content h3 span{color:var(--ipm-gold2) !important}
.apk .apk-content p{color:#cfe0d6 !important}

/* ---------- COOKIE BANNER: match the theme ---------- */
.cookie_type{background:#fffdf6 !important;border:1px solid #eadfc6 !important;border-radius:20px !important;
  box-shadow:0 24px 60px -30px rgba(15,61,44,.4) !important}
.cookie_type p,.cookie_type div{color:#3d4c43}
.cookie_btn{background:#15653f !important;color:#fff !important;border-radius:26px !important;border:none !important;font-weight:600}
.cookie_btn.cookeSettingModalBtn{background:transparent !important;color:#15653f !important;border:1.5px solid #15653f !important}

/* ---------- FOOTER: deep green + gold ---------- */
.footer_top_area{background:#0b2c1d !important;border-top:1px solid rgba(212,164,55,.28);position:relative}
.footer_top_area::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23d4a437' stroke-opacity='0.05'%3E%3Cpath d='M36 0l36 36-36 36L0 36z'/%3E%3Ccircle cx='36' cy='36' r='17'/%3E%3C/g%3E%3C/svg%3E")}
.footer_top_area>*{position:relative}
.footer_title{color:var(--ipm-gold2) !important;font-family:"Playfair Display",Georgia,serif !important}
.copyright_area{background:#0b2c1d !important;border-top:1px solid rgba(212,164,55,.28)}
.footer_links a:hover,.footer-legal-links a:hover{color:var(--ipm-gold2) !important}

/* ---------- forms & pagination ---------- */
input.form-control:focus,textarea.form-control:focus,select.form-control:focus{
  border-color:#15653f !important;box-shadow:0 0 0 4px rgba(21,101,63,.1) !important}
.pagination .page-link{color:#15653f;border-radius:10px;margin:0 3px}
.pagination .page-item.active .page-link{background:#15653f !important;border-color:#15653f !important;color:#fff}

/* ---------- mobile header comfort ---------- */
@media (max-width:991.98px){
  #sticky-header.header_area{border-radius:0 0 18px 18px}
}

/* ---------- reskin fixes: specificity + real cookie wrapper ---------- */
#sticky-header.header_area .main_menu .menu_dropdown>ul>li>a{color:#e7efe9 !important}
#sticky-header.header_area .main_menu .menu_dropdown>ul>li>a:hover,
#sticky-header.header_area .main_menu .menu_dropdown>ul>li.active_menu_item>a{color:var(--ipm-gold2) !important}
#sticky-header.header_area .main_menu .menu_dropdown ul ul a{color:#14261d !important}
#sticky-header.header_area .main_menu .menu_dropdown ul ul a:hover{color:#15653f !important}

.theme_cookies{background:#fffdf6 !important;border:1px solid #eadfc6 !important;border-radius:20px !important;
  box-shadow:0 24px 60px -30px rgba(15,61,44,.45) !important}
.theme_cookies p,.theme_cookies .theme_cookies_info p{color:#3d4c43 !important}

/* ---------- reskin fixes r2: the visible top menu is .main_menu ul (not .menu_dropdown) ---------- */
#sticky-header.header_area .main_menu ul li a{color:#e7efe9 !important}
#sticky-header.header_area .main_menu ul li:hover>a,
#sticky-header.header_area .main_menu ul li a.active,
#sticky-header.header_area .main_menu ul li.active_menu_item>a{color:var(--ipm-gold2) !important}
/* dropdown/mega panels keep dark text on white (placed after broad rule so they win the tie) */
#sticky-header.header_area .main_menu ul li .submenu li a{color:#14261d !important}
#sticky-header.header_area .main_menu ul li .submenu li a:hover,
#sticky-header.header_area .main_menu ul li .submenu li a.active{color:#15653f !important}
#sticky-header.header_area .menu_dropdown ul li a{color:#202e3b !important}
#sticky-header.header_area .menu_dropdown ul li a:hover{color:#15653f !important}
#sticky-header.header_area .menu_dropdown_iner .single_menu_dropdown h4{color:#0f3d2c !important}
/* categories toggle + misc header text */
.header_area .categories_menu,.header_area .categories_menu *{color:#e7efe9 !important}

/* ---------- reskin fixes r3: slicknav hamburger on dark header ---------- */
.header_area .mobile_menu span{background:transparent}
.header_area .slicknav_menu,.header_area .slicknav_btn{background:transparent !important}
.header_area .mobile_menu .slicknav_icon-bar{background:#f1f6f2 !important}

/* ============================================================
   HOMEPAGE POLISH v2 — professional pass
   Fixes unstyled .ipm-mh-ic icons + elevates every block card.
   ============================================================ */

/* --- premium icon chips (gold-cream squircle, deep-green glyph) --- */
.ipm-mh .ipm-mh-ic{
  width:58px;height:58px;border-radius:17px;display:inline-flex;align-items:center;justify-content:center;
  font-size:22px;color:#15653f;
  background:linear-gradient(135deg,#faf5e6,#f0e4c8);
  border:1px solid #eadfc6;
  box-shadow:0 10px 22px -14px rgba(15,61,44,.35),inset 0 1px 0 rgba(255,255,255,.85);
}
.ipm-mh .ipm-mh-stage .ipm-mh-ic{width:68px;height:68px;font-size:26px;border-radius:20px}
.ipm-mh .ipm-mh-lcard .ipm-mh-ic{width:54px;height:54px;font-size:20px}

/* --- feature & learn cards: gold top-accent sweep on hover --- */
.ipm-mh .ipm-mh-fcard,.ipm-mh .ipm-mh-lcard{position:relative;overflow:hidden;border-radius:18px !important}
.ipm-mh .ipm-mh-fcard::after,.ipm-mh .ipm-mh-lcard::after{
  content:"";position:absolute;left:0;top:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--ipm-gold),var(--ipm-gold2),var(--ipm-gold));
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ipm-ease);
}
.ipm-mh .ipm-mh-fcard:hover::after,.ipm-mh .ipm-mh-lcard:hover::after{transform:scaleX(1)}
.ipm-mh .ipm-mh-fcard{box-shadow:0 16px 34px -26px rgba(15,61,44,.4) !important;padding:26px 24px !important}
.ipm-mh .ipm-mh-fcard h4{font-size:18.5px;margin-top:18px !important}
.ipm-mh .ipm-mh-fcard p{font-size:14.5px !important;line-height:1.65}
.ipm-mh .ipm-mh-lcard{padding:28px 20px !important}

/* --- curriculum stage cards: green crest line + depth --- */
.ipm-mh .ipm-mh-stage{border-radius:20px !important;padding:36px 24px 30px !important;
  box-shadow:0 22px 44px -30px rgba(15,61,44,.5) !important;position:relative;overflow:hidden}
.ipm-mh .ipm-mh-stage::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,#0f3d2c,#15653f,#0f3d2c)}
.ipm-mh .ipm-mh-stage h4{font-size:24px;margin-top:18px !important}

/* --- ornament under the dark "why" band heading (matches other sections) --- */
.ipm-mh .ipm-why h2::after{
  content:"";display:block;width:120px;height:12px;margin:16px auto 0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cline x1='0' y1='6' x2='44' y2='6' stroke='%23d4a437' stroke-width='1' opacity='.6'/%3E%3Cline x1='76' y1='6' x2='120' y2='6' stroke='%23d4a437' stroke-width='1' opacity='.6'/%3E%3Cpath d='M60 1l1.6 3.4L65 6l-3.4 1.6L60 11l-1.6-3.4L55 6l3.4-1.6z' fill='%23d4a437'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* --- big benefit cards (Recognition / Fast Track) --- */
.ipm-mh .ipm-bigcard{border-radius:24px !important;box-shadow:0 28px 56px -36px rgba(0,0,0,.55)}

/* --- "kya yeh aap ke liye" ticks in gold coins --- */
.ipm-mh .ipm-you-list li i{
  width:27px;height:27px;flex:0 0 27px;background:rgba(212,164,55,.2);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;margin-top:0 !important;
}

/* --- QA cards: gradient question coin --- */
.ipm-mh .ipm-mh-q i{background:linear-gradient(135deg,#15653f,#0f3d2c) !important}

/* --- step numbers: gold glow --- */
.ipm-mh .ipm-mh-num{box-shadow:0 12px 24px -10px rgba(212,164,55,.75)}
.ipm-mh .ipm-mh-step{border-radius:18px !important}

/* --- teachers grid: gold halo around arch portraits, softer cards --- */
.ipm-home-teachers img{box-shadow:0 0 0 5px rgba(212,164,55,.16),0 16px 30px -20px rgba(15,61,44,.5) !important}
.ipm-home-teachers [class*="col-"]>div{border-radius:18px !important;
  box-shadow:0 18px 38px -30px rgba(15,61,44,.45) !important;padding:16px 14px 18px !important}
.ipm-home-teachers p{letter-spacing:.2px}

/* --- FAQ: softer container radius --- */
.ipm-faq .ipm-faq-item{border-radius:16px !important}
.ipm-faq .ipm-faq-lang{box-shadow:0 12px 26px -20px rgba(15,61,44,.4)}

/* --- kick pills: tighter craft --- */
.ipm-mh .ipm-kick,.ipm-faq .ipm-kick{letter-spacing:2.5px;font-size:11.5px}

/* --- trust band buttons breathing room --- */
.ipm-mh .ipm-btns{gap:18px}

/* --- FA5 fallback: fa-house-user is FA6-only, map to fa-home glyph --- */
.fa-house-user::before{content:"\f015"}

/* ============================================================
   CRAFT PASS v3 — iPlus logo, scalloped dividers, icon pop
   ============================================================ */

/* --- header: natural-colour iPlus Madrasah logo (kills earlier white filter) --- */
.header_area .logo_img img{filter:none !important;height:54px;width:auto !important;padding:2px !important}
@media (max-width:575.98px){ .header_area .logo_img img{height:46px} }

/* --- footer logo: crisp on deep green --- */
.footer_logo img{width:96px !important;filter:drop-shadow(0 6px 16px rgba(0,0,0,.35))}

/* --- scalloped arch dividers where dark bands meet cream (Islamic craft) --- */
.ipm-mh .ipm-why,.ipm-mh .ipm-you,.ipm-mh .ipm-trust{position:relative}
.ipm-mh .ipm-why{border-top:1px solid rgba(212,164,55,.18)}
.ipm-mh .ipm-why::after,.ipm-mh .ipm-you::after,.ipm-mh .ipm-trust::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:16px;pointer-events:none;
  background-image:radial-gradient(circle at 50% 100%,#faf7ef 9px,transparent 10px);
  background-size:32px 16px;background-repeat:repeat-x;background-position:center bottom;
}
.ipm-mh .ipm-you::before,.ipm-mh .ipm-trust::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:16px;pointer-events:none;
  background-image:radial-gradient(circle at 50% 0,#faf7ef 9px,transparent 10px);
  background-size:32px 16px;background-repeat:repeat-x;background-position:center top;
}

/* --- icon chips pop in with a spring after their card reveals --- */
@media (prefers-reduced-motion: no-preference){
  .ipm-reveal .ipm-mh-ic{transform:scale(.55);opacity:0;
    transition:transform .55s var(--ipm-spring) calc(var(--ipm-d,0ms) + 160ms),opacity .3s ease calc(var(--ipm-d,0ms) + 140ms)}
  .ipm-reveal.ipm-in .ipm-mh-ic{transform:scale(1);opacity:1}
}

/* --- theme section headings (Hamare Asaatizah, Articles & News...) --- */
.section-title h2{letter-spacing:-.3px}
.section-title p{color:#5a6a60}

/* --- copyright line refinement --- */
.copyright_text p{letter-spacing:.2px}

/* ============================================================
   CRAFT PASS v4 — Marcellus display type, textures, refinements
   ============================================================ */

/* --- display type: Marcellus (carved, monumental, Islamic-classic) --- */
h1,h2{font-family:'Marcellus',Georgia,serif !important;font-weight:400 !important;letter-spacing:.4px}
.ipm-mh h2,.ipm-mh h3,.ipm-faq h2,.ipm-mh .ipm-mh-stage h4{font-family:'Marcellus',Georgia,serif !important;font-weight:400 !important;letter-spacing:.4px}
.ipm-mh .ipm-sec-head h2{font-size:clamp(30px,4.4vw,46px) !important}
.ipm-mh .ipm-why h2{font-size:clamp(30px,4.6vw,48px) !important}
.ipm-faq .ipm-faq-phead h2{font-size:clamp(28px,4vw,42px) !important}
.section-title h2{font-size:clamp(28px,3.6vw,40px)}

/* --- hide header search (temporary, re-enable by deleting this rule) --- */
.header_area .category_search,.header_area .mobile-search,
.header_area .mobile-search-box-toggler,#mobileSearchToggle{display:none !important}

/* --- textures: fine gold star lattice breathing through every section --- */
body{background:#faf7ef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23b98a17' stroke-opacity='0.05'%3E%3Cpath d='M48 8l11 29 29 11-29 11-11 29-11-29-29-11 29-11z'/%3E%3Ccircle cx='48' cy='48' r='7'/%3E%3C/g%3E%3C/svg%3E")}
.ipm-mh .ipm-feat,.ipm-mh .ipm-steps{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23b98a17' stroke-opacity='0.07'%3E%3Cpath d='M48 8l11 29 29 11-29 11-11 29-11-29-29-11 29-11z'/%3E%3Ccircle cx='48' cy='48' r='7'/%3E%3C/g%3E%3C/svg%3E") #f5efdf !important}
.ipm-faq{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23b98a17' stroke-opacity='0.07'%3E%3Cpath d='M48 8l11 29 29 11-29 11-11 29-11-29-29-11 29-11z'/%3E%3Ccircle cx='48' cy='48' r='7'/%3E%3C/g%3E%3C/svg%3E") #f6f1e5 !important}
.ipm-mh .ipm-you{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23d4a437' stroke-opacity='0.10'%3E%3Cpath d='M48 8l11 29 29 11-29 11-11 29-11-29-29-11 29-11z'/%3E%3Ccircle cx='48' cy='48' r='7'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(135deg,#0e3626,#124a33) !important}
.ipm-mh .ipm-trust{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23d4a437' stroke-opacity='0.10'%3E%3Cpath d='M48 8l11 29 29 11-29 11-11 29-11-29-29-11 29-11z'/%3E%3Ccircle cx='48' cy='48' r='7'/%3E%3C/g%3E%3C/svg%3E"),radial-gradient(circle at 85% 15%,#17472f,#0b2c1d) !important}
.apk{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23d4a437' stroke-opacity='0.10'%3E%3Cpath d='M48 8l11 29 29 11-29 11-11 29-11-29-29-11 29-11z'/%3E%3Ccircle cx='48' cy='48' r='7'/%3E%3C/g%3E%3C/svg%3E"),radial-gradient(120% 130% at 18% 20%,#164a33 0%,#0b2c1d 100%) !important}

/* --- remove the thick gold left-borders on Q&A cards (cleaner) --- */
.ipm-mh .ipm-mh-qa{border-left:1px solid #e9e0cc !important;border-radius:14px !important}
.lg-section{border-left:none !important}

/* --- APK section: launching soon (hide store badges until launch) --- */
.apk .apk-content > .d-flex{display:none !important}

/* --- FAQ launch-video button: proper play chip --- */
.ipm-faq .ipm-faq-video a{background:linear-gradient(135deg,#15653f,#0f3d2c) !important;
  padding:15px 34px !important;font-size:15.5px !important;border-radius:40px !important;
  box-shadow:0 16px 34px -16px rgba(15,61,44,.65)}
.ipm-faq .ipm-faq-play{font-size:0 !important;width:34px !important;height:34px !important;flex:0 0 34px;
  background:#fff !important;color:#15653f !important;border-radius:50% !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important}
.ipm-faq .ipm-faq-play::before{content:"\f04b";font-family:"Font Awesome 6 Free","Font Awesome 5 Free";
  font-weight:900;font-size:12px;color:#15653f;line-height:1;margin-left:2px}

/* --- newsletter band: stop the reward card overlapping it --- */
.reward{margin-bottom:36px !important}
.footer_top_area .footer__cta{margin-top:0 !important;padding:48px 0 !important;position:relative;z-index:2}
.footer__cta .thumb{display:none !important}
.footer__cta .info h1,.footer__cta .info h2,.footer__cta .info h3,.footer__cta .info h4{color:#fff !important}
.footer__cta .subcribe-form .form-control{border-radius:14px 0 0 14px !important}
.footer__cta .subcribe-form button,.footer__cta .subcribe-form .theme_btn{border-radius:0 14px 14px 0 !important}

/* ============================================================
   CURRICULUM JOURNEY v5 — 8-saala nisab (marhala ba marhala)
   Premium connected-milestone timeline. Overrides earlier stage rules.
   ============================================================ */
.ipm-mh .ipm-stages{display:flex !important;flex-wrap:nowrap;align-items:stretch;justify-content:center;gap:0 !important;margin-top:30px !important}
.ipm-mh .ipm-mh-stage{position:relative;flex:1 1 0;max-width:310px;min-width:0;
  background:linear-gradient(180deg,#ffffff,#fcfaf2) !important;
  border:1px solid #ece0c6 !important;border-radius:22px !important;
  padding:28px 24px 26px !important;text-align:center;overflow:visible !important;
  box-shadow:0 26px 52px -34px rgba(15,61,44,.55) !important;
  transition:transform .35s var(--ipm-ease),box-shadow .35s var(--ipm-ease),border-color .35s var(--ipm-ease)}
.ipm-mh .ipm-mh-stage::before{display:none !important}
@media (hover:hover){ .ipm-mh .ipm-mh-stage:hover{transform:translateY(-8px);border-color:var(--ipm-gold) !important;box-shadow:0 36px 62px -30px rgba(15,61,44,.55) !important} }
/* marhala badge */
.ipm-mh .ipm-stage-badge{display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#b98a17;
  background:rgba(212,164,55,.12);border:1px solid rgba(212,164,55,.32);
  padding:5px 15px;border-radius:30px;margin-bottom:18px}
/* mihrab-arch icon medallion (matches hero) */
.ipm-mh .ipm-mh-stage .ipm-mh-ic{width:76px !important;height:82px !important;font-size:29px !important;
  border-radius:50% 50% 16px 16px / 46% 46% 16px 16px !important;
  background:linear-gradient(162deg,#fbf4e0,#efdcb4) !important;color:#0f3d2c !important;
  border:1px solid #e7d3a4 !important;position:relative;
  box-shadow:0 16px 28px -14px rgba(15,61,44,.5),inset 0 1px 0 rgba(255,255,255,.9) !important}
.ipm-mh .ipm-mh-stage .ipm-mh-ic::after{content:"";position:absolute;inset:7px;border-radius:44% 44% 12px 12px / 40% 40% 12px 12px;border:1px dashed rgba(15,61,44,.18)}
.ipm-mh .ipm-mh-stage h4{font-size:23px !important;margin:18px 0 2px !important;color:#0f3d2c}
.ipm-mh .ipm-stage-cap{display:block;font-size:11.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ipm-gold);margin-bottom:12px}
.ipm-mh .ipm-stage-desc{font-size:13.5px;line-height:1.6;color:#5f6f65;margin:0 auto 20px;max-width:230px}
/* duration ribbon */
.ipm-mh .ipm-mh-stage .ipm-mh-dur{display:inline-flex !important;align-items:center;gap:7px;
  background:linear-gradient(135deg,#15653f,#0f3d2c) !important;color:#fff !important;
  font-weight:600;font-size:13.5px;padding:9px 22px !important;border-radius:30px !important;
  box-shadow:0 12px 22px -10px rgba(15,61,44,.6)}
.ipm-mh .ipm-mh-stage .ipm-mh-dur i{color:var(--ipm-gold2);font-size:12px}
/* connectors between stages */
.ipm-mh .ipm-stage-link{flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:0 10px;align-self:center}
.ipm-mh .ipm-stage-line{width:30px;height:2px;background:repeating-linear-gradient(90deg,var(--ipm-gold) 0 5px,transparent 5px 11px);opacity:.7}
.ipm-mh .ipm-stage-arrow{width:30px;height:30px;flex:0 0 30px;border-radius:50%;margin-left:-1px;
  background:#fff;border:1.5px solid rgba(212,164,55,.55);color:var(--ipm-green2);
  display:flex;align-items:center;justify-content:center;font-size:11px;
  box-shadow:0 8px 16px -8px rgba(15,61,44,.4)}
/* final (summit) card */
.ipm-mh .ipm-mh-stage.ipm-stage-last{border-color:rgba(212,164,55,.6) !important;
  background:linear-gradient(180deg,#fffdf5,#faf2dc) !important;
  box-shadow:0 30px 56px -32px rgba(184,135,31,.55) !important}
.ipm-mh .ipm-mh-stage.ipm-stage-last .ipm-stage-badge{background:linear-gradient(135deg,var(--ipm-gold2),var(--ipm-gold));color:#241a02;border-color:transparent}
/* summary stat banner */
.ipm-mh .ipm-stage-sum{display:flex;align-items:center;width:fit-content;margin:40px auto 0;
  background:linear-gradient(180deg,#ffffff,#fbf7ec);border:1px solid #ece0c6;border-radius:20px;
  padding:16px 8px;box-shadow:0 24px 46px -32px rgba(15,61,44,.5)}
.ipm-mh .ipm-stage-stat{padding:2px 30px;text-align:center;line-height:1.1}
.ipm-mh .ipm-stage-stat b{display:block;font-family:'Marcellus',Georgia,serif;font-size:28px;color:#0f3d2c;letter-spacing:.3px}
.ipm-mh .ipm-stage-stat span{font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;color:#93a399;font-weight:600}
.ipm-mh .ipm-stage-sep{width:1px;height:38px;background:linear-gradient(180deg,transparent,#e2d6bb,transparent)}
@media(max-width:991px){
  .ipm-mh .ipm-stages{flex-direction:column !important;align-items:center;gap:0 !important;margin-top:22px !important}
  .ipm-mh .ipm-mh-stage{width:100%;max-width:360px;flex:0 0 auto}
  .ipm-mh .ipm-stage-link{flex-direction:column;padding:8px 0}
  .ipm-mh .ipm-stage-line{width:2px;height:16px;background:repeating-linear-gradient(180deg,var(--ipm-gold) 0 5px,transparent 5px 11px)}
  .ipm-mh .ipm-stage-arrow{transform:rotate(90deg);margin:-1px 0 0}
}
@media(max-width:479px){
  .ipm-mh .ipm-stage-sum{width:100%;max-width:340px;justify-content:space-around}
  .ipm-mh .ipm-stage-stat{padding:2px 8px}
  .ipm-mh .ipm-stage-stat b{font-size:24px}
}

/* ============================================================
   CRAFT PASS v6 — navbar logo align, hero ultra-premium extras,
   unified mihrab-arch icon medallions, centered cards, app-style
   horizontal snap-scroll on mobile.
   ============================================================ */

/* ---------- NAVBAR: logo perfectly centred, no dead space ---------- */
.header_area .header__wrapper{align-items:center !important}
.header_area .header__left{align-items:center !important}
.header_area .logo_img{display:flex !important;align-items:center !important;line-height:0}
.header_area .logo_img img{display:block !important;height:58px !important;width:auto !important;padding:0 !important;margin:0 !important}
@media (max-width:575.98px){ .header_area .logo_img img{height:46px !important} }

/* (corner ornaments removed per feedback) */

/* ---------- HERO: arcade arch divider along the bottom edge (home hero ONLY —
   scoping to a bare .ipm-hero leaked onto teachers/shura/contact's own hero
   bands and rendered as a stray horizontal line there) ---------- */
#ipm-hero-root.ipm-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;pointer-events:none;opacity:.35;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='14'%3E%3Cpath d='M2 14Q18 -6 34 14' fill='none' stroke='%23d4a437' stroke-width='1.4'/%3E%3C/svg%3E") repeat-x bottom}

/* ---------- HERO: living gold shimmer on the accent line ---------- */
@media (prefers-reduced-motion: no-preference){
  .ipm-hero h1 .g{background-size:220% 100% !important;animation:ipmGoldShine 7s ease-in-out infinite}
}
@keyframes ipmGoldShine{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
/* soft outer halo ring around the logo orbit */
.ipm-hero .ipm-hero-ring{box-shadow:0 0 0 26px rgba(212,164,55,.05)}

/* ---------- UNIFIED mihrab-arch icon medallions (features + learn) ---------- */
.ipm-mh .ipm-mh-ic{width:64px !important;height:70px !important;font-size:25px !important;
  border-radius:50% 50% 15px 15px / 45% 45% 13px 13px !important;
  background:linear-gradient(162deg,#fbf4e0,#efdcb4) !important;color:#0f3d2c !important;
  border:1px solid #e7d3a4 !important;position:relative;
  box-shadow:0 14px 26px -14px rgba(15,61,44,.45),inset 0 1px 0 rgba(255,255,255,.9) !important}
.ipm-mh .ipm-mh-ic::after{content:"";position:absolute;inset:6px;
  border-radius:44% 44% 11px 11px / 40% 40% 10px 10px;border:1px dashed rgba(15,61,44,.16)}
/* stages keep their larger medallion */
.ipm-mh .ipm-mh-stage .ipm-mh-ic{width:76px !important;height:82px !important;font-size:29px !important}
/* marhala badge centred above its medallion */
.ipm-mh .ipm-stage-badge{display:table;margin:0 auto 16px}

/* ---------- FEATURE CARDS: centred, taller, calmer ---------- */
.ipm-mh .ipm-mh-fcard{text-align:center;padding:30px 22px 26px !important;border-radius:20px !important;
  transition:transform .3s var(--ipm-ease),box-shadow .3s var(--ipm-ease),border-color .3s var(--ipm-ease)}
.ipm-mh .ipm-mh-fcard h4{font-size:19px;margin-top:16px !important}
.ipm-mh .ipm-mh-fcard p{max-width:270px;margin-left:auto !important;margin-right:auto !important}
.ipm-mh .ipm-mh-lcard{border-radius:20px !important;transition:transform .3s var(--ipm-ease),box-shadow .3s var(--ipm-ease),border-color .3s var(--ipm-ease)}
@media (hover:hover){
  .ipm-mh .ipm-mh-fcard:hover,.ipm-mh .ipm-mh-lcard:hover{transform:translateY(-6px);box-shadow:0 26px 48px -28px rgba(15,61,44,.5) !important}
}

/* ---------- STEP CARDS: gold coin numbers + lift ---------- */
.ipm-mh .ipm-mh-step{border-radius:20px !important;border:1px solid #ece0c6 !important;padding:32px 22px 28px !important;
  transition:transform .3s var(--ipm-ease),box-shadow .3s var(--ipm-ease),border-color .3s var(--ipm-ease)}
.ipm-mh .ipm-mh-num{width:52px !important;height:52px !important;font-size:20px !important;
  background:linear-gradient(135deg,var(--ipm-gold2),#c3921f) !important;color:#241a02 !important;
  box-shadow:0 12px 24px -10px rgba(184,135,31,.65),inset 0 1px 0 rgba(255,255,255,.6) !important;
  outline:4px solid rgba(212,164,55,.16);outline-offset:4px}
.ipm-mh .ipm-mh-step h4{font-size:18.5px;margin-top:20px !important}
@media (hover:hover){
  .ipm-mh .ipm-mh-step:hover{transform:translateY(-6px);border-color:var(--ipm-gold) !important;box-shadow:0 26px 48px -28px rgba(15,61,44,.5) !important}
}

/* ---------- MOBILE: plain stacked cards (removed) ----------
   A horizontal scroll-snap-type:x deck was here for an "app carousel" feel,
   but nested horizontal snap containers intercept vertical swipes on real
   touch devices — the page-scroll would stall on the first swipe and only
   continue on a second try. Reverted to normal stacking; smooth vertical
   scroll takes priority over the carousel look. */
@media (max-width:767.98px){
  .ipm-mh .ipm-grid,.ipm-mh .ipm-learn-grid,.ipm-mh .ipm-steps-grid{grid-template-columns:1fr !important}
}

/* ============================================================
   CRAFT PASS v7 — you-grid cards, chat-style Q&A, animated steps,
   matched section-bar fonts, premium newsletter.
   ============================================================ */

/* hero: no scroll cue (element removed; guard for cached markup) */
.ipm-hero .ipm-hero-scroll{display:none !important}

/* ---------- section title bars (Top Online Courses / Articles & News) ---------- */
.section-subtitle h3{font-family:'Marcellus',Georgia,serif !important;font-weight:400 !important;letter-spacing:.5px;font-size:26px !important}

/* ---------- "Kya Yeh Aap Ke Liye Hai?" — scenario cards grid ---------- */
.ipm-mh .ipm-you-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.ipm-mh .ipm-you-card{position:relative;background:rgba(255,255,255,.055);border:1px solid rgba(212,164,55,.28);
  border-radius:18px;padding:24px 22px 22px;display:flex;flex-direction:column;gap:14px;text-align:left;
  transition:transform .3s var(--ipm-ease),border-color .3s,background .3s}
@media (hover:hover){ .ipm-mh .ipm-you-card:hover{transform:translateY(-5px);border-color:rgba(244,210,63,.7);background:rgba(255,255,255,.09)} }
.ipm-mh .ipm-you-ic{width:46px;height:46px;flex:0 0 auto;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;
  font-size:18px;background:rgba(212,164,55,.16);color:var(--ipm-gold2);border:1px solid rgba(212,164,55,.32)}
.ipm-mh .ipm-you-card p{margin:0;color:#dfe9e1;font-size:15px;line-height:1.6;flex:1}
.ipm-mh .ipm-you-tick{position:absolute;top:20px;right:20px;color:rgba(244,210,63,.75);font-size:16px}
/* gold conclusion card */
.ipm-mh .ipm-you-final{background:linear-gradient(135deg,var(--ipm-gold2),#c99a24) !important;border-color:transparent !important}
.ipm-mh .ipm-you-final p{color:#241a02;font-weight:700;font-size:16.5px}
.ipm-mh .ipm-you-ic.f{background:rgba(0,0,0,.15);color:#241a02;border-color:rgba(0,0,0,.12)}
.ipm-mh .ipm-you-go{display:inline-flex;align-items:center;gap:8px;background:#0f3d2c;color:#fff;font-weight:700;font-size:14px;
  padding:11px 22px;border-radius:26px;text-decoration:none;width:fit-content;transition:transform .2s,box-shadow .2s}
.ipm-mh .ipm-you-go:hover{transform:translateY(-2px);color:#fff;box-shadow:0 12px 24px -12px rgba(0,0,0,.6)}
@media (max-width:991.98px){ .ipm-mh .ipm-you-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:639.98px){ .ipm-mh .ipm-you-grid{grid-template-columns:1fr} }

/* ---------- "Agar Aap Soch Rahe Hain..." — chat-style exchanges ---------- */
.ipm-mh .ipm-mh-qa{background:#fff !important;border:1px solid #ece0c6 !important;border-radius:18px !important;
  padding:18px !important;display:flex;flex-direction:column;gap:12px}
.ipm-mh .ipm-qa-row{display:flex;align-items:flex-end;gap:10px}
.ipm-mh .ipm-qa-row p{margin:0 !important;font-size:14.5px;line-height:1.55;padding:12px 16px;max-width:82%}
.ipm-mh .ipm-qa-row.u{justify-content:flex-end}
.ipm-mh .ipm-qa-row.u p{background:#f6f1e5;color:#4a4433;border-radius:16px 16px 4px 16px;font-weight:600;font-style:italic}
.ipm-mh .ipm-qa-row.m p{background:linear-gradient(135deg,#15653f,#0f3d2c);color:#eef5ef;border-radius:16px 16px 16px 4px}
.ipm-mh .ipm-qa-av{width:32px;height:32px;flex:0 0 32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;background:#efe7d4;color:#7c6a3f}
.ipm-mh .ipm-qa-av.g{background:linear-gradient(135deg,var(--ipm-gold2),#c3921f);color:#241a02}

/* ---------- 4 Steps — living stepper ---------- */
.ipm-mh .ipm-steps-grid{position:relative}
.ipm-mh .ipm-mh-step{position:relative;overflow:visible !important}
/* flowing dotted connector between cards */
.ipm-mh .ipm-mh-step:not(:last-child)::after{content:"";position:absolute;top:56px;right:-23px;width:24px;height:2px;
  background:repeating-linear-gradient(90deg,var(--ipm-gold) 0 6px,transparent 6px 12px)}
@media (prefers-reduced-motion: no-preference){
  .ipm-mh .ipm-mh-step:not(:last-child)::after{animation:ipmFlow 1.1s linear infinite}
}
@keyframes ipmFlow{to{background-position:12px 0}}
/* radar ping around the number coins (staggered) */
.ipm-mh .ipm-mh-num{position:relative}
.ipm-mh .ipm-mh-num::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(212,164,55,.55);opacity:0}
@media (prefers-reduced-motion: no-preference){
  .ipm-mh .ipm-mh-num::after{animation:ipmPing 3.2s ease-out infinite}
  .ipm-mh .ipm-mh-step:nth-child(2) .ipm-mh-num::after{animation-delay:.5s}
  .ipm-mh .ipm-mh-step:nth-child(3) .ipm-mh-num::after{animation-delay:1s}
  .ipm-mh .ipm-mh-step:nth-child(4) .ipm-mh-num::after{animation-delay:1.5s}
}
@keyframes ipmPing{0%{transform:scale(.85);opacity:.8}60%{transform:scale(1.6);opacity:0}100%{opacity:0}}
@media (max-width:767.98px){ .ipm-mh .ipm-mh-step:not(:last-child)::after{display:none} }

/* ---------- newsletter: one premium glass card ---------- */
.footer_top_area>.container>.row{align-items:center;margin:0;
  background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(212,164,55,.32);border-radius:24px;padding:28px 26px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 26px 50px -34px rgba(0,0,0,.7)}
.footer_top_area .footer__cta{padding:6px 0 !important;margin:0 !important}
.footer__cta .cta_content h3{font-family:'Marcellus',Georgia,serif !important;font-weight:400 !important;color:#fff !important;font-size:27px !important;letter-spacing:.4px}
.footer__cta .cta_content h3::before{content:"\f0e0";font-family:"Font Awesome 6 Free","Font Awesome 5 Free";font-weight:900;
  color:var(--ipm-gold2);margin-right:12px;font-size:20px;vertical-align:1px}
.footer__cta .cta_content p{color:#b9cdc1 !important;margin-top:6px}
.footer_top_area .subcribe-form .form-control{height:56px;border-radius:16px 0 0 16px !important;
  border:1px solid rgba(212,164,55,.4) !important;border-right:none !important;background:#fffdf6 !important;padding-left:20px;font-size:15px}
.footer_top_area .subcribe-form button,.footer_top_area .subcribe-form .theme_btn{height:56px;
  border-radius:0 16px 16px 0 !important;background:linear-gradient(135deg,var(--ipm-gold2),#c3921f) !important;
  color:#241a02 !important;font-weight:700 !important;border:none !important;padding:0 30px !important}
@media (max-width:767.98px){
  .footer_top_area>.container>.row{padding:22px 16px}
}

/* ============================================================
   CRAFT PASS v8 — breadcrumbs, inner-page heroes, mobile fixes,
   login page, dedups.
   ============================================================ */

/* ---------- breadcrumb banners (Courses/Classes/Quiz/Blogs): theme green ---------- */
.breadcrumb_area{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23d4a437' stroke-opacity='0.08'%3E%3Cpath d='M48 8l11 29 29 11-29 11-11 29-11-29-29-11 29-11z'/%3E%3Ccircle cx='48' cy='48' r='7'/%3E%3C/g%3E%3C/svg%3E"),
  radial-gradient(130% 120% at 18% 25%,#175035 0%,#0c3020 48%,#06190f 100%) !important;
  border-bottom:1px solid rgba(212,164,55,.25)}
.breadcam_wrap h3{font-family:'Marcellus',Georgia,serif !important;font-weight:400 !important;letter-spacing:.5px;color:#f4f8f4 !important}
.breadcam_wrap p{color:#cdb46a !important;font-weight:600;letter-spacing:.6px}

/* ---------- app store buttons hidden site-wide (app launching soon) ---------- */
.ipm-store{display:none !important}

/* ---------- inner-page heroes (teachers/shura/contact/about): match home ---------- */
.ipm-teach .ipm-hero,.ipm-shura .ipm-hero,.ipm-contact .ipm-hero,.ipm-about .ipm-hero{
  background:
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23d4a437' stroke-opacity='0.07'%3E%3Cpath d='M48 8l11 29 29 11-29 11-11 29-11-29-29-11 29-11z'/%3E%3Ccircle cx='48' cy='48' r='7'/%3E%3C/g%3E%3C/svg%3E"),
   radial-gradient(85% 120% at 84% 20%,rgba(212,164,55,.15) 0%,transparent 45%),
   radial-gradient(130% 120% at 18% 25%,#175035 0%,#0c3020 48%,#06190f 100%) !important;
  border-bottom:1px solid rgba(212,164,55,.2)}
.ipm-teach .ipm-hero h1,.ipm-shura .ipm-hero h1,.ipm-about .ipm-hero h1,.ipm-contact .ipm-hero-title{
  font-family:'Marcellus',Georgia,serif !important;font-weight:400 !important;letter-spacing:.5px}
/* eyebrows -> gold kick pills (like home) */
.ipm-eyebrow{display:inline-block !important;letter-spacing:2.5px !important;font-size:11.5px !important;font-weight:700 !important;
  text-transform:uppercase;color:var(--ipm-gold) !important;background:rgba(212,164,55,.14);
  padding:7px 16px;border-radius:30px;margin-bottom:14px}
/* trust/CTA bands on inner pages -> home-trust style */
.ipm-cta{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23d4a437' stroke-opacity='0.10'%3E%3Cpath d='M48 8l11 29 29 11-29 11-11 29-11-29-29-11 29-11z'/%3E%3Ccircle cx='48' cy='48' r='7'/%3E%3C/g%3E%3C/svg%3E"),
  radial-gradient(circle at 85% 15%,#17472f,#0b2c1d) !important;
  border:1px solid rgba(212,164,55,.28) !important;border-radius:26px !important}
.ipm-cta h3{font-family:'Marcellus',Georgia,serif !important;font-weight:400 !important}
/* "Every Teacher Works Under Scholarly Supervision" — proper solid, textured band
   (previous glass override was near-invisible on the page's cream background) */
.ipm-superv{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23d4a437' stroke-opacity='0.09'%3E%3Cpath d='M48 8l11 29 29 11-29 11-11 29-11-29-29-11 29-11z'/%3E%3Ccircle cx='48' cy='48' r='7'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(120% 160% at 12% 0%,#175035 0%,#0e3626 55%,#0b2c1d 100%) !important;
  border:1px solid rgba(212,164,55,.3) !important;border-radius:20px !important;
  box-shadow:0 26px 50px -32px rgba(15,61,44,.55) !important;
  position:relative;overflow:hidden}
.ipm-superv::before{
  content:"\f3ed";font-family:"Font Awesome 6 Free","Font Awesome 5 Free";font-weight:900;
  flex:0 0 52px;width:52px;height:52px;border-radius:14px;font-size:20px;
  background:linear-gradient(135deg,var(--ipm-gold2),#c3921f);color:#241a02;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 22px -10px rgba(184,135,31,.6),inset 0 1px 0 rgba(255,255,255,.55)}
.ipm-superv > div{flex:1;min-width:260px}
.ipm-superv h4{font-family:'Marcellus',Georgia,serif !important;font-weight:400 !important;font-size:22px !important}
.ipm-superv a{
  display:inline-flex !important;align-items:center;gap:8px;flex:0 0 auto;
  background:rgba(255,255,255,.08);border:1px solid rgba(212,164,55,.45);
  padding:11px 22px;border-radius:30px;white-space:nowrap;
  transition:background .2s,border-color .2s,transform .2s}
.ipm-superv a:hover{background:rgba(212,164,55,.16);border-color:var(--ipm-gold2);transform:translateY(-2px);text-decoration:none !important}
@media (max-width:575.98px){ .ipm-superv > div{min-width:0} }

/* ---------- contact: single centred form (reach column removed) ---------- */
.ipm-contact .ipm-main{grid-template-columns:1fr !important;max-width:820px;margin-left:auto !important;margin-right:auto !important}

/* ---------- MOBILE: header break fix ---------- */
@media (max-width:991.98px){
  #sticky-header.header_area{border-radius:0 !important}
  /* overflow-x is intentionally NOT touched here — the theme's own
     frontend_style.css already guards it on body; see the note above the
     other mobile block for why doubling up on html breaks vertical scroll. */
}

/* ---------- MOBILE: smooth scroll (disable heavy paint work) ---------- */
@media (max-width:991.98px){
  .ipm-hero .ipm-hero-tex{animation:none !important}
  .ipm-hero .ipm-hero-beam{display:none !important}
  .ipm-hero .ipm-tw{display:none !important}
  .ipm-hero .ipm-hero-logowrap::after{animation:none !important;filter:none !important;opacity:.3}
  .ipm-hero .ipm-hero-ring{animation:none !important}
  .ipm-hero h1 .g{animation:none !important}
  .footer_top_area .footer__cta,.ipm-bottnav{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
}

/* ---------- LOGIN / REGISTER: Islamic panel ---------- */
.login_wrapper_right{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23d4a437' stroke-opacity='0.08'%3E%3Cpath d='M48 8l11 29 29 11-29 11-11 29-11-29-29-11 29-11z'/%3E%3Ccircle cx='48' cy='48' r='7'/%3E%3C/g%3E%3C/svg%3E"),
  radial-gradient(130% 120% at 20% 25%,#175035 0%,#0c3020 50%,#06190f 100%) !important}
.login_wrapper_right h4,.login_wrapper_right h3{color:#f4f8f4 !important;font-family:'Marcellus',Georgia,serif !important;font-weight:400 !important}
.login_wrapper_right p,.login_wrapper_right li,.login_wrapper_right span{color:#c2d4c8 !important}
.login_wrapper_right img{max-width:300px !important;width:64% !important;height:auto;
  filter:drop-shadow(0 24px 46px rgba(0,0,0,.5)) drop-shadow(0 0 30px rgba(233,214,120,.18))}
@media (prefers-reduced-motion: no-preference){
  .login_wrapper_right img{animation:ipmFloat2 8s ease-in-out infinite}
}
.login_wrapper_left{background:#faf7ef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23b98a17' stroke-opacity='0.05'%3E%3Cpath d='M48 8l11 29 29 11-29 11-11 29-11-29-29-11 29-11z'/%3E%3C/g%3E%3C/svg%3E") !important}