/* =====================================================================
   InstoPedia — Vibrant Trend Refresh
   Loaded LAST so it wins over theme.min.css / instopedia-home.css /
   instopedia-color-boost.css / instopedia-inner.css without editing them.
   Font system: Funnel Display everywhere on the public frontend.
   Palette stays true to the brand (Ink Blue #22335C + Ember Orange #ED7226)
   and layers in a lively accent trio (Teal #0d9488, Violet #7c3aed,
   Pink #ec4899) already seeded in instopedia-color-boost.css so the whole
   site reads as one energetic, trending, multi-colour system rather than
   a flat two-tone brochure.
===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300;400;500;600;700;800&family=Noto+Sans+Gujarati:wght@400;500;600;700;800&display=swap');

:root{
  --heading-font:'Funnel Display','Noto Sans Gujarati',sans-serif !important;
  --body-font:'Funnel Display','Noto Sans Gujarati',sans-serif !important;
  --ip-teal:#0d9488;
  --ip-violet:#7c3aed;
  --ip-pink:#ec4899;
  --ip-sun:#F5943F;
  --ip-glow:0 20px 45px rgba(34,51,92,.16);
  --ip-radius-lg:26px;
  --ip-radius-md:18px;
  --ip-radius-sm:12px;
}

html{scroll-behavior:smooth}

*, body, h1,h2,h3,h4,h5,h6, .btn, .nav-link, .form-label, .badge,
input, select, textarea, button{
  font-family:'Funnel Display','Noto Sans Gujarati',sans-serif !important;
}

/* Slightly tighter tracking reads better on Funnel Display's wide display cut */
h1,h2,h3,h4,h5,h6{letter-spacing:-.02em}

/* ---------- Colourful scrollbar (progressive enhancement) ---------- */
::-webkit-scrollbar{height:10px;width:10px}
::-webkit-scrollbar-track{background:#f1f5f9}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--ip-orange),var(--ip-blue));border-radius:99px}

/* ---------- Selection colour ---------- */
::selection{background:rgba(237,114,38,.25);color:#1B2740}

/* =====================================================================
   HERO — animated multicolour aurora + glassy search + gradient headline
===================================================================== */
.ip-hero{
  background:
    radial-gradient(circle at 85% 8%,rgba(124,58,237,.16),transparent 34%),
    radial-gradient(circle at 78% 55%,rgba(237,114,38,.20),transparent 38%),
    radial-gradient(circle at 6% 78%,rgba(13,148,136,.15),transparent 36%),
    radial-gradient(circle at 15% 10%,rgba(236,72,153,.10),transparent 30%),
    linear-gradient(135deg,#f7f9ff 0%,#eef4ff 48%,#fff6ee 100%) !important;
}
.ip-hero::before,.ip-hero::after{
  content:"";position:absolute;border-radius:50%;filter:blur(6px);pointer-events:none;
  background:conic-gradient(from 90deg,var(--ip-orange),var(--ip-pink),var(--ip-violet),var(--ip-blue),var(--ip-teal),var(--ip-orange));
  opacity:.10;animation:ipAuroraSpin 22s linear infinite;
}
.ip-hero::before{width:420px;height:420px;right:-160px;top:-160px}
.ip-hero::after{width:280px;height:280px;left:-120px;bottom:-120px;animation-duration:28s;animation-direction:reverse}
@keyframes ipAuroraSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.ip-hero::before,.ip-hero::after{animation:none}}

.ip-eyebrow{
  background:linear-gradient(135deg,#fff,#f3f7ff) !important;
  border:1px solid #dfe8f7 !important;
  box-shadow:0 8px 20px rgba(34,51,92,.08) !important;
}
.ip-trend-chip{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  background:linear-gradient(135deg,var(--ip-orange),var(--ip-pink)) !important;
  color:#fff !important;font-weight:800;font-size:12px;letter-spacing:.04em;
  box-shadow:0 10px 24px rgba(236,72,153,.28);
  animation:ipPulseChip 2.6s ease-in-out infinite;
}
@keyframes ipPulseChip{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}

.ip-hero h1{animation:ipFadeUp .7s cubic-bezier(.22,.85,.32,1) both}
.ip-hero h1 span{
  background:linear-gradient(100deg,var(--ip-blue) 10%,var(--ip-violet) 45%,var(--ip-orange) 75%,var(--ip-pink) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.ip-caret{color:var(--ip-orange)}
.ip-hero-copy{animation:ipFadeUp .7s .08s cubic-bezier(.22,.85,.32,1) both}
.ip-search{animation:ipFadeUp .7s .16s cubic-bezier(.22,.85,.32,1) both}
.ip-hero-actions,.ip-trust-row{animation:ipFadeUp .7s .22s cubic-bezier(.22,.85,.32,1) both}
@keyframes ipFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

.ip-search{
  border:1px solid #e3ecfa !important;
  box-shadow:0 26px 60px rgba(34,51,92,.14),0 0 0 1px rgba(255,255,255,.6) inset !important;
  border-radius:22px !important;
}
.ip-search .form-control,.ip-search .form-select{
  background:#f7f9fd !important;transition:box-shadow .2s ease,background .2s ease;
}
.ip-search .form-control:focus,.ip-search .form-select:focus{
  background:#fff !important;box-shadow:0 0 0 4px rgba(237,114,38,.16) !important;
}
.ip-search .btn{
  background:linear-gradient(135deg,var(--ip-orange),var(--ip-pink)) !important;
  box-shadow:0 14px 30px rgba(236,72,153,.28) !important;
}

.ip-btn-orange{
  background:linear-gradient(135deg,var(--ip-orange),var(--ip-pink)) !important;
  box-shadow:0 16px 34px rgba(236,72,153,.28) !important;
}
.btn-primary{
  background:linear-gradient(135deg,var(--ip-blue),var(--ip-violet)) !important;
  border-color:transparent !important;
  box-shadow:0 16px 32px rgba(124,58,237,.22) !important;
  position:relative;overflow:hidden;
}
.btn-primary,.ip-btn-orange,.btn-admin{transition:transform .22s ease,box-shadow .22s ease !important}
.btn-primary:hover,.ip-btn-orange:hover,.btn-admin:hover{transform:translateY(-3px) scale(1.015)}

.ip-visual-card{animation:ipFadeUp .8s .1s cubic-bezier(.22,.85,.32,1) both}
.ip-float{animation:ipDrift 5s ease-in-out infinite}
.ip-float-two{animation-delay:.6s}.ip-float-three{animation-delay:1.2s}
@keyframes ipDrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.ip-float i{
  background:linear-gradient(135deg,var(--ip-orange),var(--ip-pink)) !important;
  color:#fff !important;
}
.ip-float-one i{background:linear-gradient(135deg,var(--ip-blue),var(--ip-violet)) !important}
.ip-float-three i{background:linear-gradient(135deg,var(--ip-teal),#14b8a6) !important}

/* =====================================================================
   SECTION KICKERS — gradient text treatment used site-wide
===================================================================== */
.ip-kicker{
  background:linear-gradient(90deg,var(--ip-orange),var(--ip-pink)) !important;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  font-weight:900 !important;
}
.ip-city-section .ip-kicker{background:linear-gradient(90deg,var(--ip-teal),#14b8a6) !important;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ip-section.ip-section-soft .ip-kicker{background:linear-gradient(90deg,var(--ip-violet),#9b6bf0) !important;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* =====================================================================
   CARDS — colourful glow border on hover, everywhere
===================================================================== */
.ip-course-card,.ip-why-card,.ip-review-card,.ip-info-card{
  border-radius:var(--ip-radius-md) !important;
  transition:transform .28s cubic-bezier(.22,.85,.32,1),box-shadow .28s ease,border-color .28s ease !important;
}
.ip-course-card:hover,.ip-why-card:hover,.ip-review-card:hover,.ip-info-card:hover{
  transform:translateY(-8px) !important;
  box-shadow:0 26px 55px rgba(34,51,92,.16) !important;
}
.ip-course-icon,.ip-why-icon,.ip-avatar,.ip-info-icon{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.ip-course-card:hover .ip-course-icon,.ip-why-card:hover .ip-why-icon,.ip-info-card:hover .ip-info-icon{
  transform:rotate(-6deg) scale(1.08);
}

.ip-course-count{
  background:linear-gradient(135deg,#fff3ea,#ffe1c2) !important;color:var(--ip-orange) !important;font-weight:900 !important;
}
.ip-course-count-new{background:linear-gradient(135deg,var(--ip-teal),#14b8a6) !important;color:#fff !important}

/* View-all / outline buttons get a friendlier gradient-on-hover fill */
.btn-outline-primary{border-width:2px !important;font-weight:800 !important;transition:.25s !important}
.btn-outline-primary:hover{
  background:linear-gradient(135deg,var(--ip-blue),var(--ip-violet)) !important;
  border-color:transparent !important;color:#fff !important;transform:translateY(-2px);
}

/* Swiper arrows / pagination — brand gradient */
.ipCourseSwiper .swiper-button-next,.ipCourseSwiper .swiper-button-prev,
.ip-swiper-nav .swiper-button-next,.ip-swiper-nav .swiper-button-prev,
.swiper-button-next,.swiper-button-prev{
  background:linear-gradient(135deg,var(--ip-blue),var(--ip-violet)) !important;
  box-shadow:0 10px 22px rgba(124,58,237,.28) !important;
}
.swiper-pagination-bullet-active{
  background:linear-gradient(135deg,var(--ip-orange),var(--ip-pink)) !important;
}

/* =====================================================================
   BADGES / CHIPS
===================================================================== */
.ip-feature-badge{
  background:linear-gradient(135deg,var(--ip-orange),var(--ip-pink)) !important;
  color:#fff !important;border-color:transparent !important;font-weight:800 !important;
}
.ip-about-badge{
  background:linear-gradient(135deg,#fff3ea,#ffe6f2) !important;
  border-color:#ffd4e6 !important;color:var(--ip-pink) !important;
}

/* =====================================================================
   FORMS — used inside popups, list-institute modal, contact, inquiry
===================================================================== */
.form-control,.form-select{
  border-radius:var(--ip-radius-sm) !important;
  border:1.5px solid #e2e8f0 !important;
  padding-top:.65rem !important;padding-bottom:.65rem !important;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease !important;
}
.form-control:focus,.form-select:focus{
  border-color:var(--ip-orange) !important;
  box-shadow:0 0 0 4px rgba(237,114,38,.14) !important;
}
.form-label{font-weight:800 !important;color:#1B2740}
.form-check-input:checked{background-color:var(--ip-orange) !important;border-color:var(--ip-orange) !important}

/* =====================================================================
   MODALS / POPUPS — registration popup, student auth, list-institute
===================================================================== */
.modal-content{
  border-radius:var(--ip-radius-lg) !important;
  border:0 !important;
  box-shadow:0 40px 100px rgba(15,23,42,.35) !important;
  overflow:hidden;
  animation:ipModalPop .35s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes ipModalPop{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-content::before{
  content:"";display:block;height:6px;width:100%;
  background:linear-gradient(90deg,var(--ip-blue),var(--ip-violet),var(--ip-pink),var(--ip-orange),var(--ip-teal));
}
.modal-backdrop.show{opacity:.62 !important;background:#0b1220 !important}

/* Registration popup — align its bespoke inline styles to the brand palette */
.edu-popup-badge{
  background:linear-gradient(135deg,#fff3ea,#ffe6f2) !important;color:var(--ip-pink) !important;
}
.edu-popup-title span{color:var(--ip-orange) !important}
.edu-popup-input:focus{border-color:var(--ip-orange) !important;box-shadow:0 0 0 4px rgba(237,114,38,.14) !important}
.edu-popup-btn{
  background:linear-gradient(135deg,var(--ip-orange),var(--ip-pink)) !important;
  box-shadow:0 16px 34px rgba(236,72,153,.28) !important;
}
.edu-popup-btn:hover{background:linear-gradient(135deg,#D9611A,var(--ip-violet)) !important}

/* Student auth modal tabs */
.ip-auth-tabs .nav-link{border-radius:999px !important;font-weight:800 !important;transition:.2s}
.ip-auth-tabs .nav-link.active{
  background:linear-gradient(135deg,var(--ip-blue),var(--ip-violet)) !important;color:#fff !important;
  box-shadow:0 10px 22px rgba(124,58,237,.24);
}
.ip-modal-brand{background:linear-gradient(135deg,#eaf2ff,#f5edff) !important}

/* =====================================================================
   INNER PAGES (About / FAQ / Contact / Pricing) — richer accent wash
===================================================================== */
.ip-inner-hero{
  background:
    radial-gradient(circle at 88% 12%,rgba(236,72,153,.12),transparent 32%),
    radial-gradient(circle at 82% 55%,rgba(237,114,38,.14),transparent 34%),
    radial-gradient(circle at 4% 90%,rgba(13,148,136,.10),transparent 36%),
    linear-gradient(135deg,#f7f9ff,#fff 65%) !important;
}
.ip-about-visual{
  background:linear-gradient(150deg,#141D33,#22335C 45%,var(--ip-violet) 78%,var(--ip-pink)) !important;
}
.ip-info-card::before{background:linear-gradient(90deg,var(--ip-orange),var(--ip-violet)) !important}

/* =====================================================================
   FOOTER — colourful top border + social hover glow
===================================================================== */
.ip-footer{position:relative}
.ip-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--ip-blue),var(--ip-violet),var(--ip-pink),var(--ip-orange),var(--ip-teal));
}
.ip-footer-socials a{transition:transform .25s ease,box-shadow .25s ease}
.ip-footer-socials a:hover{
  background:linear-gradient(135deg,var(--ip-orange),var(--ip-pink)) !important;
  color:#fff !important;transform:translateY(-3px) scale(1.05);
  box-shadow:0 10px 22px rgba(236,72,153,.3);
}
.ip-footer-cta{
  background:linear-gradient(135deg,#25D366,#0d9488) !important;
  box-shadow:0 14px 30px rgba(13,148,136,.28) !important;
}

/* =====================================================================
   Accessibility — visible focus ring kept colourful but clear
===================================================================== */
a:focus-visible,button:focus-visible,.btn:focus-visible{
  outline:3px solid var(--ip-orange) !important;outline-offset:2px;
}