@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* ============================================================
   CAMPUS THEME — clean edtech/course-card style, based on a
   reference screenshot (Coursera's app). Built as an ORIGINAL
   implementation of the same genre: white cards, colorful
   circular icon badges, soft-pastel panels + one bold accent
   CTA color, generous rounding/whitespace, friendly rounded
   type. No copied illustrations, brand colors, or layouts —
   this is the pattern, not the product.
   ============================================================ */

:root{
  --bg:#fafafa;--bg2:#f2f2f5;--card:#ffffff;
  --sage:#268a5f;--sage2:#1c6c48;--sage-pal:#e3f5ec;
  --blush:#f4a6c1;--blush2:#e0759f;--blush-pal:#fdeaf1;
  --ink:#1c1c28;--ink2:#3d3d4d;--muted:#767686;
  --border:rgba(28,28,40,.08);--border2:rgba(47,158,110,.25);
  --shadow:0 2px 8px rgba(28,28,40,.05),0 8px 24px rgba(28,28,40,.07);
  --shadow2:0 6px 16px rgba(28,28,40,.08),0 18px 40px rgba(28,28,40,.12);
  --footer-bg:#15151f;--footer-text:rgba(250,250,250,.6);--footer-head:rgba(255,209,102,.9);--footer-link:rgba(250,250,250,.78);
  --navbar-bg:rgba(250,250,250,.94);
  --disp:'Poppins',sans-serif;--sans:'Poppins',system-ui,sans-serif;--r:20px;
  --navbar-text:var(--ink);--navbar-text-muted:var(--muted);
  --campus-cta:#FFD166;--campus-cta-ink:#1c1c28;
}
[data-theme="dark"]{
  --bg:#131318;--bg2:#1a1a21;--card:#1e1e26;
  --sage:#2fa876;--sage2:#6fdcae;--sage-pal:#1d3329;
  --blush:#f4a6c1;--blush2:#f7c2d6;--blush-pal:#3a2530;
  --ink:#f2f2f6;--ink2:#d6d6e0;--muted:#94949f;
  --border:rgba(255,255,255,.09);--border2:rgba(76,199,148,.3);
  --shadow:0 2px 8px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  --shadow2:0 6px 16px rgba(0,0,0,.35),0 18px 40px rgba(0,0,0,.45);
  --footer-bg:#0c0c11;--footer-text:rgba(242,242,246,.55);--footer-head:rgba(255,209,102,.9);--footer-link:rgba(242,242,246,.75);
  --navbar-bg:rgba(19,19,24,.94);
  --campus-cta:#FFD166;--campus-cta-ink:#1c1c28;
}

body{font-weight:400}

/* Cards — soft, rounded, generous whitespace, subtle shadow instead
   of a hard border. This is the whole visual foundation of the style. */
.svc-card,.case-card,.testi-card,.proj-card,.tool-card,.blog-card,.post-card,
.why-card,.cert-card,.achieve-card,.stat-box,.stats-card,.tl-card,.price-card,
.case-big,.proj-item,.feat-card,.tool-big-card,.val-card,.form-card,.form-outer,
.skills-panel,.svc-big,.post-author-box,.sidebar-widget,.sw-card,.pc,.pc2,
.cs-card,.cs-kpi-card,.svc-dash-card,.svc-info-card,.svc-stat-card,.faq-item{
  background:var(--card) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r) !important;
  box-shadow:var(--shadow) !important;
  transition:transform .25s ease,box-shadow .25s ease !important;
}
.svc-card:hover,.case-card:hover,.testi-card:hover,.proj-card:hover,.tool-card:hover,
.blog-card:hover,.post-card:hover,.stat-box:hover,.stats-card:hover,.tl-card:hover,
.price-card:hover,.case-big:hover,.proj-item:hover,.tool-big-card:hover,.val-card:hover,
.form-card:hover,.skills-panel:hover,.svc-big:hover,.sidebar-widget:hover,
.sw-card:hover,.pc:hover,.pc2:hover,.cs-card:hover{
  box-shadow:var(--shadow2) !important;
  transform:translateY(-5px) !important;
}
.sw-thumb,.pc-thumb,.pc2-thumb,.cs-card-thumb,.feat-img{border-radius:var(--r) var(--r) 0 0 !important}

/* Colorful circular icon badges — the signature element of this
   style. Every icon-wrapper across the site cycles through a small
   palette of bold, saturated colors instead of one flat brand tint,
   with a white icon on top and a soft shadow to lift it off the card. */
.sw-icon,.mega-link-icon,.mega-cta-icon,.cert-icon,.fun-icon,.val-icon,
.why-icon,.achieve-icon,.tool-big-icon,.contact-ico,.metric-icon,.footer-soc{
  border-radius:50% !important;
  display:flex !important;align-items:center;justify-content:center;
  box-shadow:0 4px 10px rgba(28,28,40,.18) !important;
  color:#fff !important;border:none !important;
}
.sw-icon i,.mega-link-icon i,.mega-cta-icon i,.cert-icon i,.fun-icon i,.val-icon i,
.why-icon i,.achieve-icon i,.tool-big-icon i,.contact-ico i,.metric-icon i,.footer-soc i{color:#fff !important}
.sw-icon:nth-of-type(5n+1),.mega-link-icon:nth-of-type(5n+1),.cert-icon:nth-of-type(5n+1),
.val-icon:nth-of-type(5n+1),.why-icon:nth-of-type(5n+1),.achieve-icon:nth-of-type(5n+1){background:#EF6C5C !important}
.sw-icon:nth-of-type(5n+2),.mega-link-icon:nth-of-type(5n+2),.cert-icon:nth-of-type(5n+2),
.val-icon:nth-of-type(5n+2),.why-icon:nth-of-type(5n+2),.achieve-icon:nth-of-type(5n+2){background:#FFB648 !important}
.sw-icon:nth-of-type(5n+3),.mega-link-icon:nth-of-type(5n+3),.cert-icon:nth-of-type(5n+3),
.val-icon:nth-of-type(5n+3),.why-icon:nth-of-type(5n+3),.achieve-icon:nth-of-type(5n+3){background:#2F9E6E !important}
.sw-icon:nth-of-type(5n+4),.mega-link-icon:nth-of-type(5n+4),.cert-icon:nth-of-type(5n+4),
.val-icon:nth-of-type(5n+4),.why-icon:nth-of-type(5n+4),.achieve-icon:nth-of-type(5n+4){background:#4C8FE8 !important}
.sw-icon:nth-of-type(5n),.mega-link-icon:nth-of-type(5n),.cert-icon:nth-of-type(5n),
.val-icon:nth-of-type(5n),.why-icon:nth-of-type(5n),.achieve-icon:nth-of-type(5n){background:#9B6FE0 !important}
.footer-soc{background:rgba(255,255,255,.1) !important}

/* Soft pastel hero/panel backgrounds, replacing any dark gradient
   with the warm blush panel from the reference. The featured-post
   card is the one component that goes from a dark background to a
   light one, so its text hierarchy needs remapping by design intent
   (heading vs. secondary vs. accent-link), not a blanket override —
   a single `* { color }` rule would flatten that hierarchy and turn
   the "Read Guide" link into indistinguishable plain text. */
.page-hero-bg,.about-hero-bg,.svc-hero-bg{background:var(--blush-pal) !important;opacity:1 !important}
.feat-card.feat-card-dark{background:linear-gradient(135deg,#FDEAF1 0%,#FCE0EC 100%) !important;border:1px solid var(--border) !important}
.feat-card.feat-card-dark::after{background:linear-gradient(180deg,rgba(253,234,241,0) 0%,rgba(253,234,241,.4) 55%,rgba(253,234,241,.92) 100%) !important}
.feat-card.feat-card-dark h2{color:var(--ink) !important}
.feat-card.feat-card-dark p{color:var(--muted) !important}
.feat-card.feat-card-dark [style*="color:#fff"]{color:var(--ink) !important}
.feat-card.feat-card-dark [style*="rgba(255,255,255,.6)"],
.feat-card.feat-card-dark [style*="rgba(255,255,255,.5)"],
.feat-card.feat-card-dark [style*="rgba(255,255,255,.45)"]{color:var(--muted) !important}
.feat-card.feat-card-dark [style*="rgba(255,255,255,.1)"]{border-top-color:var(--border) !important}
.feat-card.feat-card-dark [style*="#F0B8CC"]{color:var(--sage2) !important}
[data-theme="dark"] .feat-card.feat-card-dark{background:linear-gradient(135deg,#3a2530 0%,#2e1f28 100%) !important}

/* Buttons — the reference's bold yellow SUBSCRIBE-style CTA: fully
   rounded (pill), high-contrast dark text on a bright fill, no
   border, confident weight. */
.btn{border-radius:50px !important;font-weight:600 !important;border:none !important}
.btn-dark{background:var(--campus-cta) !important;color:var(--campus-cta-ink) !important;box-shadow:0 4px 14px rgba(255,209,102,.5) !important}
.btn-dark:hover{background:#ffc846 !important;transform:translateY(-2px) !important}
.btn-sage{background:var(--sage) !important;color:#fff !important;box-shadow:0 4px 14px rgba(47,158,110,.35) !important}
.btn-sage:hover{background:var(--sage2) !important;transform:translateY(-2px) !important}
.btn-white{background:#fff !important;color:var(--ink) !important;border:1.5px solid var(--border) !important}

/* Tags / badges — soft pastel pill, not a hard-edged sticker */
.tag,.svc-tag,.hero-chip,.sw-tag,.pc-cat,.pc2-cat,.post-tag,.cs-card-cat,.tag-label,
.svc-badge,.tool-badge,.avail-badge{
  border-radius:50px !important;border:none !important;font-weight:600 !important;
  background:var(--sage-pal) !important;color:var(--sage2) !important;
}

/* Nav + footer */
#navbar{border-bottom:1px solid var(--border) !important;box-shadow:none !important}
.n-box{border-radius:12px !important}

/* FAQ items — the base site renders these as a flat list separated
   only by a thin border-bottom, with zero margin between them. That's
   fine for a plain list, but once each item becomes its own rounded
   card (above), that same zero-margin layout makes them look like
   they're touching, with a stray divider line cutting across the
   rounded corners. Give them real breathing room and drop the
   now-redundant border. */
.faq-item{margin-bottom:14px !important;border-bottom:none !important;padding:0 26px !important}
.faq-item:last-child{margin-bottom:0 !important}

/* Card grids — bump the gap between repeating cards for the airier,
   more generous whitespace this style calls for. Scoped to grids that
   repeat content cards specifically, not structural layout splits
   (hero/intro two-column grids keep their own spacing untouched). */
.svc-grid,.cases-grid,.case-proof-grid,.cs-card-grid,.post-grid-all,
.post-grid-showcase,.sw-grid,.achieve-grid,.certs-grid,.values-grid,
.why-grid,.fun-card-grid,.tools-grid,.pricing-grid,.metrics-grid,.score-grid{
  gap:2rem !important;
}
input,textarea,select{background:var(--bg2) !important;border:1.5px solid transparent !important;border-radius:14px !important}
input:focus,textarea:focus,select:focus{border-color:var(--sage) !important;background:#fff !important;box-shadow:0 0 0 4px var(--sage-pal) !important;outline:none !important}

@media(max-width:640px){
  .sw-icon,.mega-link-icon,.cert-icon,.val-icon,.why-icon,.achieve-icon{box-shadow:0 2px 6px rgba(28,28,40,.15) !important}
}