/* ============================================================
   Shivaji English Medium School — public site styles.
   Tokens & component language ported from the SEM Design System.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Mulish:wght@400;500;600;700;800&family=Kalam:wght@400;700&display=swap");

:root {
  /* Brand: blue */
  --blue-50:#e8f4fb; --blue-100:#c6e2f4; --blue-200:#8ec6e9; --blue-300:#4ea7dc;
  --blue-400:#1d8fd0; --blue-500:#0078c0; --blue-600:#0063a3; --blue-700:#005086;
  --blue-800:#013d67; --blue-900:#04263f;
  /* Gold */
  --gold-50:#fff7e0; --gold-100:#ffe9ab; --gold-300:#ffd25e; --gold-500:#f5b400;
  --gold-600:#d99700; --gold-700:#a86f00;
  /* Magenta / Green / Coral */
  --magenta-100:#f6d9ee; --magenta-300:#d56cb6; --magenta-500:#a0288c; --magenta-700:#76215f;
  --green-100:#e2f3cf; --green-300:#9bd065; --green-500:#5fae2e; --green-700:#41801c;
  --coral-100:#fdded6; --coral-300:#f6917c; --coral-500:#e8503a; --coral-700:#b13420;
  /* Neutrals */
  --white:#ffffff; --grey-50:#f6f8fa; --grey-100:#eef1f5; --grey-200:#e0e5ec;
  --grey-300:#cdd5df; --grey-400:#9aa6b6; --grey-500:#6b7787; --grey-600:#4d5765;
  --grey-700:#353d49; --grey-800:#222831; --grey-900:#141920;

  --brand:var(--blue-500); --brand-strong:var(--blue-700); --brand-soft:var(--blue-50);
  --accent-gold:var(--gold-500); --accent-magenta:var(--magenta-500);
  --accent-green:var(--green-500); --accent-coral:var(--coral-500);

  --text-strong:var(--grey-900); --text-body:var(--grey-700); --text-muted:var(--grey-500);
  --text-inverse:var(--white); --text-link:var(--blue-600);
  --surface-page:var(--grey-50); --surface-card:var(--white); --surface-sunken:var(--grey-100);
  --surface-brand:var(--blue-500); --surface-brand-deep:var(--blue-800); --surface-soft:var(--blue-50);
  --border:var(--grey-200); --border-strong:var(--grey-300); --border-brand:var(--blue-200);
  --success:#51991f; --warning:var(--gold-600); --danger:var(--coral-500); --info:var(--blue-500);
  --focus-ring:0 0 0 3px rgba(0,120,192,0.35);

  /* Type */
  --font-display:"Poppins","Segoe UI",system-ui,sans-serif;
  --font-body:"Mulish","Segoe UI",system-ui,sans-serif;
  --font-accent:"Kalam","Comic Sans MS",cursive;
  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem;
  --text-xl:1.375rem; --text-2xl:1.75rem; --text-3xl:2.25rem; --text-4xl:3rem; --text-5xl:3.75rem;
  --leading-tight:1.15; --leading-snug:1.3; --leading-normal:1.55; --leading-relaxed:1.7;
  --tracking-caps:.12em;

  /* Spacing / layout */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem;
  --container:1200px; --container-narrow:760px; --gutter:1.5rem;

  --radius-sm:6px; --radius-md:12px; --radius-lg:18px; --radius-xl:28px; --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(4,38,63,.06); --shadow-sm:0 2px 6px rgba(4,38,63,.08);
  --shadow-md:0 6px 18px rgba(4,38,63,.10); --shadow-lg:0 16px 40px rgba(4,38,63,.14);
  --shadow-brand:0 10px 28px rgba(0,120,192,.28);
  --ease-out:cubic-bezier(.22,1,.36,1); --dur-base:220ms;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font-body); font-size:var(--text-base);
  line-height:var(--leading-normal); color:var(--text-body);
  background:var(--surface-page); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5{font-family:var(--font-display); font-weight:700; color:var(--text-strong);
  line-height:var(--leading-tight); margin:0 0 var(--space-3); text-wrap:balance}
p{margin:0 0 var(--space-4); text-wrap:pretty}
a{color:var(--text-link); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}
:focus-visible{outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-sm)}

/* ---- Layout helpers ---- */
.container{max-width:var(--container); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter)}
.narrow{max-width:var(--container-narrow); margin:0 auto}
.section{padding-top:var(--space-9); padding-bottom:var(--space-9)}
.section-sm{padding-top:var(--space-8); padding-bottom:var(--space-8)}
.bg-soft{background:var(--surface-soft)}
.bg-deep{background:var(--surface-brand-deep); color:#fff}
.text-center{text-align:center}
.grid{display:grid; gap:var(--space-5)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.tagline{font-family:var(--font-accent); font-weight:700; color:var(--accent-magenta)}
.eyebrow{font-family:var(--font-display); font-weight:600; font-size:var(--text-sm);
  letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--brand); display:inline-block}

.section-heading{margin-bottom:var(--space-6)}
.section-heading.center{text-align:center}
.section-heading h2{font-size:var(--text-3xl); margin:8px 0 6px}
.section-heading .lead{font-size:var(--text-lg); color:var(--text-body); max-width:620px; margin:0}
.section-heading.center .lead{margin-left:auto; margin-right:auto}

/* ---- Buttons ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-display); font-weight:600; font-size:15px; line-height:1;
  padding:12px 22px; border-radius:var(--radius-pill); border:1.5px solid transparent;
  cursor:pointer; transition:transform var(--dur-base) var(--ease-out),
  box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
  text-decoration:none}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-lg{padding:15px 28px; font-size:16px}
.btn-sm{padding:9px 16px; font-size:14px}
.btn-block{width:100%}
.btn-primary{background:var(--brand); color:#fff; box-shadow:var(--shadow-brand)}
.btn-primary:hover{background:var(--blue-400); color:#fff}
.btn-secondary{background:#fff; color:var(--brand-strong); border-color:var(--border-brand)}
.btn-secondary:hover{background:var(--blue-50)}
.btn-gold{background:var(--accent-gold); color:var(--blue-900); box-shadow:0 10px 24px rgba(245,180,0,.32)}
.btn-gold:hover{background:var(--gold-300)}
.btn-ghost{background:transparent; color:var(--brand); padding-left:12px; padding-right:12px}
.btn-ghost:hover{background:var(--blue-50)}
.btn-on-deep{background:transparent; color:#fff; border-color:rgba(255,255,255,.6)}
.btn-on-deep:hover{background:rgba(255,255,255,.12)}

/* ---- Badges ---- */
.badge{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-display);
  font-weight:700; font-size:12px; padding:5px 12px; border-radius:var(--radius-pill);
  letter-spacing:.02em}
.badge .dot{font-size:10px; line-height:1}
.badge-blue{background:var(--blue-50); color:var(--blue-700)}
.badge-gold{background:var(--gold-50); color:var(--gold-700)}
.badge-green{background:var(--green-100); color:var(--green-700)}
.badge-magenta{background:var(--magenta-100); color:var(--magenta-700)}
.badge-coral{background:var(--coral-100); color:var(--coral-700)}
.badge-neutral{background:var(--grey-100); color:var(--grey-600)}
.badge-solid.badge-blue{background:var(--blue-500); color:#fff}
.badge-solid.badge-gold{background:var(--gold-500); color:var(--blue-900)}
.badge-solid.badge-green{background:var(--green-500); color:#fff}
.badge-solid.badge-magenta{background:var(--magenta-500); color:#fff}
.badge-solid.badge-coral{background:var(--coral-500); color:#fff}

/* ---- Cards ---- */
.card{position:relative; background:var(--surface-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:var(--space-5); overflow:hidden}
.card.pad-0{padding:0}
.card-accent::before{content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--brand)}
.card-accent.accent-gold::before{background:var(--accent-gold)}
.card-accent.accent-green::before{background:var(--accent-green)}
.card-accent.accent-magenta::before{background:var(--accent-magenta)}
.card-accent.accent-coral::before{background:var(--accent-coral)}
.card-interactive{transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)}
.card-interactive:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}

.icon-chip{width:48px; height:48px; border-radius:var(--radius-md); background:var(--blue-50);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px; color:var(--brand)}
.icon-chip.round{border-radius:var(--radius-pill)}
.icon-chip svg{width:24px; height:24px}

/* ---- Stat ---- */
.stat{text-align:center}
.stat .value{font-family:var(--font-display); font-weight:800; font-size:var(--text-4xl); line-height:1; color:var(--brand)}
.stat.tone-green .value{color:var(--accent-green)}
.stat.tone-gold .value{color:var(--accent-gold)}
.stat.tone-magenta .value{color:var(--accent-magenta)}
.stat.tone-coral .value{color:var(--accent-coral)}
.stat .label{margin-top:6px; font-size:14px; color:var(--text-muted); font-weight:600}

/* ---- Forms ---- */
.field{margin-bottom:var(--space-4)}
.field label{display:block; font-size:var(--text-sm); font-weight:700; color:var(--text-strong); margin-bottom:8px}
.input, .textarea, .select{width:100%; font-family:var(--font-body); font-size:15px; color:var(--text-strong);
  background:#fff; border:1.5px solid var(--border-strong); border-radius:var(--radius-md);
  padding:11px 14px; transition:border-color var(--dur-base), box-shadow var(--dur-base)}
.input:focus, .textarea:focus, .select:focus{outline:none; border-color:var(--brand); box-shadow:var(--focus-ring)}
.textarea{min-height:110px; resize:vertical}
.chip-row{display:flex; flex-wrap:wrap; gap:8px}
.chip{font-family:var(--font-body); font-weight:600; font-size:14px; cursor:pointer;
  padding:8px 14px; border-radius:var(--radius-pill); border:1.5px solid var(--border-strong);
  background:#fff; color:var(--text-body); transition:all var(--dur-base)}
.chip input{position:absolute; opacity:0; pointer-events:none}
.chip:has(input:checked){border-color:var(--brand); background:var(--blue-50); color:var(--brand-strong)}

/* ---- Header ---- */
.topbar{background:var(--surface-brand-deep); color:#fff; font-size:13.5px}
.topbar .container{display:flex; align-items:center; gap:var(--space-3); padding-top:8px; padding-bottom:8px; flex-wrap:nowrap; white-space:nowrap}
.topbar a{color:var(--blue-100)}
.topbar .tb-item{display:inline-flex; align-items:center; gap:7px; color:var(--blue-100)}
.topbar .tb-item svg{width:15px; height:15px; color:var(--gold-300)}
.topbar .spacer{margin-left:auto}
.topbar .socials{display:inline-flex; gap:12px}
.topbar .socials a{display:inline-flex}
.topbar .socials svg{width:16px; height:16px; color:#fff}
/* Quick-link pills in the top bar (Admission Enquiry, Pay, Visitor, apps) */
.topbar .quick-links{display:inline-flex; align-items:center; gap:7px; flex-wrap:nowrap}
.topbar .quick-links .ql-btn{display:inline-flex; align-items:center; gap:5px; padding:4px 10px;
  border-radius:var(--radius-pill); font-size:12px; font-weight:700; line-height:1; color:#fff; white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.18); transition:filter var(--dur-base) var(--ease-out)}
.topbar .quick-links .ql-btn svg{width:14px; height:14px; color:currentColor}
.topbar .quick-links .ql-btn:hover{filter:brightness(1.08); text-decoration:none}
.topbar .quick-links .ql-enquire{background:var(--gold-500); color:var(--blue-900)}
.topbar .quick-links .ql-pay{background:var(--green-500)}
.topbar .quick-links .ql-visitor{background:var(--magenta-500)}
.topbar .quick-links .ql-android{background:var(--coral-500)}
.topbar .quick-links .ql-ios{background:#fff; color:var(--blue-900)}

.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--border)}
.site-header .container{display:flex; align-items:center; gap:var(--space-3); padding-top:10px; padding-bottom:10px}
.brand{display:flex; align-items:center; gap:10px; flex:none}
.brand img{width:46px; height:46px; flex:none}
.brand .name{font-family:var(--font-display); font-weight:800; font-size:15.5px; color:var(--brand-strong); line-height:1.2; display:block; white-space:nowrap}
.brand .sub{font-family:var(--font-accent); font-size:13px; color:var(--accent-magenta); display:block}
.main-nav{margin-left:auto; display:flex; align-items:center; gap:2px}
.main-nav .nav-item{position:relative}
.main-nav > .nav-item > a{display:inline-flex; align-items:center; gap:4px; font-family:var(--font-display);
  font-weight:600; font-size:13.5px; color:var(--text-body); padding:7px 9px; border-radius:var(--radius-pill); white-space:nowrap}
.main-nav > .nav-item > a:hover{background:var(--blue-50); color:var(--brand); text-decoration:none}
.main-nav > .nav-item.active > a{color:var(--brand); background:var(--blue-50)}
.main-nav .caret{width:14px; height:14px}
.dropdown{position:absolute; top:calc(100% + 6px); left:0; min-width:230px; background:#fff;
  border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-lg);
  padding:8px; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:all var(--dur-base) var(--ease-out); z-index:60}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown{opacity:1; visibility:visible; transform:translateY(0)}
.dropdown a{display:block; padding:9px 12px; border-radius:var(--radius-sm); font-size:14px;
  color:var(--text-body); font-weight:600}
.dropdown a:hover{background:var(--blue-50); color:var(--brand); text-decoration:none}
.header-cta{display:inline-flex; flex:none; white-space:nowrap; padding:10px 18px; font-size:14px}
.nav-toggle{display:none; margin-left:auto; background:none; border:none; cursor:pointer; padding:8px; color:var(--brand-strong)}
.nav-toggle svg{width:28px; height:28px}

/* ---- Footer ---- */
.site-footer{background:var(--surface-brand-deep); color:#fff; margin-top:var(--space-9)}
.site-footer .cols{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:var(--space-7);
  padding-top:var(--space-8); padding-bottom:var(--space-6)}
.site-footer h4{color:#fff; font-size:14px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px}
.site-footer a{color:var(--blue-100); font-size:14px; display:block; margin-bottom:8px}
.site-footer a:hover{color:#fff}
.site-footer p{color:var(--blue-100); font-size:14px}
.site-footer .brand .name{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); padding:16px var(--gutter); text-align:center;
  color:var(--blue-200); font-size:13px}

/* ---- Hero ---- */
.hero{position:relative; overflow:hidden; background:linear-gradient(160deg,var(--blue-50) 0%,#fff 60%)}
.hero .glow{position:absolute; top:-120px; right:-120px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle,rgba(245,180,0,.18),transparent 70%)}
.hero .container{display:grid; grid-template-columns:1.1fr .9fr; gap:var(--space-8); align-items:center;
  padding-top:var(--space-9); padding-bottom:var(--space-9); position:relative}
.hero h1{font-size:var(--text-5xl); font-weight:800; line-height:1.04; margin:0 0 18px}
.hero h1 .accent{color:var(--brand)}
.hero .lead{font-size:var(--text-lg); color:var(--text-body); max-width:480px; margin-bottom:28px}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap}
.hero-card{background:var(--surface-brand); border-radius:var(--radius-xl); padding:var(--space-7);
  box-shadow:var(--shadow-lg); color:#fff}
.hero-card img{width:92px; height:92px; margin-bottom:16px; filter:drop-shadow(0 6px 14px rgba(0,0,0,.25))}
.hero-card .tag{font-family:var(--font-accent); font-size:26px; color:var(--gold-300); margin:0 0 6px}
.hero-card .meta{color:var(--blue-100); font-size:15px; margin:0}
.hero-card .stat-row{display:flex; gap:22px; margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,255,255,.18)}
.hero-card .stat-row .n{font-family:var(--font-display); font-weight:800; font-size:26px}
.hero-card .stat-row .l{font-size:12px; color:var(--blue-100)}

/* ---- Info strip ---- */
.info-strip{background:var(--surface-brand-deep)}
.info-strip .container{display:flex; gap:var(--space-7); flex-wrap:wrap; justify-content:center;
  padding-top:18px; padding-bottom:18px}
.info-strip .item{display:inline-flex; align-items:center; gap:10px; color:#fff; font-size:14px; font-weight:600}
.info-strip .item svg{width:18px; height:18px; color:var(--gold-300)}

/* ---- Page head (interior pages) ---- */
.page-head{background:linear-gradient(160deg,var(--blue-50),#fff)}
.page-head .container{padding-top:var(--space-8); padding-bottom:var(--space-7); text-align:center}
.page-head h1{font-size:var(--text-4xl); font-weight:800; margin:10px 0 14px}
.page-head .lead{font-size:var(--text-lg); color:var(--text-body); max-width:680px; margin:0 auto}
.breadcrumb{font-size:13px; color:var(--text-muted); margin-bottom:6px}
.breadcrumb a{color:var(--text-muted)}

/* ---- Programme / news cards ---- */
.prog-age{font-size:13px; font-weight:700; color:var(--accent-magenta); margin-bottom:8px}
.news-media{height:170px; position:relative; display:flex; align-items:flex-end; padding:14px;
  background:linear-gradient(135deg,var(--blue-300),var(--blue-600)); background-size:cover; background-position:center}
.news-media .date{position:absolute; top:12px; right:12px; background:#fff; border-radius:var(--radius-sm);
  padding:4px 8px; font-size:12px; font-weight:800; color:var(--brand-strong)}
.news-body{padding:var(--space-5)}
.news-body h3{font-size:18px; margin:0 0 8px; line-height:1.25}
.muted{color:var(--text-muted)}

/* ---- CTA band ---- */
.cta-band{background:linear-gradient(120deg,var(--brand) 0%,var(--blue-700) 100%);
  border-radius:var(--radius-xl); padding:var(--space-8); text-align:center; color:#fff; box-shadow:var(--shadow-brand)}
.cta-band h2{color:#fff; font-size:var(--text-3xl); margin:0 0 10px}
.cta-band p{color:var(--blue-100); font-size:var(--text-lg); max-width:520px; margin:0 auto 26px}
.cta-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* ---- Prose (CMS page bodies) ---- */
.prose{font-size:16px; color:var(--text-body); line-height:var(--leading-relaxed)}
.prose h2{font-size:var(--text-2xl); margin:var(--space-6) 0 var(--space-3)}
.prose h3{font-size:var(--text-xl); margin:var(--space-5) 0 var(--space-2)}
.prose ul,.prose ol{padding-left:22px; margin:0 0 var(--space-4)}
.prose li{margin-bottom:6px}
.prose img{border-radius:var(--radius-lg); margin:var(--space-4) 0}
.prose a{color:var(--text-link); text-decoration:underline}

/* ---- Gallery ---- */
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4)}
.gallery-grid img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); transition:transform var(--dur-base) var(--ease-out)}
.gallery-grid a:hover img{transform:scale(1.03)}
.gallery-filter{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:var(--space-6)}

/* ---- Simple data rows ---- */
.feature-row{display:flex; align-items:center; gap:14px; background:var(--surface-card);
  border:1px solid var(--border); border-radius:var(--radius-md); padding:16px 18px}
.feature-row svg{width:22px; height:22px; color:var(--accent-magenta); flex:none}
.feature-row .label{font-weight:600; color:var(--text-strong)}

.list-card{border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface-card)}
.list-card .row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 22px; border-top:1px solid var(--border)}
.list-card .row:first-child{border-top:none}

.contact-line{display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px dashed var(--border)}
.contact-line:last-child{border-bottom:none}
.contact-line svg{width:18px; height:18px; color:var(--brand); flex:none}
.contact-line span{font-size:14px; color:var(--text-body); font-weight:600}

/* ---- Alerts ---- */
.alert{border-radius:var(--radius-md); padding:14px 18px; margin-bottom:var(--space-5); font-weight:600}
.alert-success{background:var(--green-100); color:var(--green-700)}
.alert-error{background:var(--coral-100); color:var(--coral-700)}

/* ---- Staff ---- */
.staff-card{text-align:center}
.staff-photo{width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--radius-lg); margin-bottom:12px;
  background:linear-gradient(135deg,var(--blue-400),var(--magenta-500))}
.staff-card .role{font-size:13px; color:var(--accent-magenta); font-weight:700}

/* ---- Responsive ---- */
@media (max-width:960px){
  .hero .container{grid-template-columns:1fr; gap:var(--space-6)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .site-footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  :root{--text-5xl:2.6rem; --text-4xl:2.1rem; --text-3xl:1.8rem}
  .grid-2,.grid-3,.grid-4,.gallery-grid{grid-template-columns:1fr}
  .nav-toggle{display:inline-flex}
  .main-nav{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    align-items:stretch; gap:0; background:#fff; border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-md); padding:8px}
  .main-nav.open{display:flex}
  .main-nav > .nav-item > a{border-radius:var(--radius-sm)}
  .dropdown{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:none; padding:0 0 0 16px; min-width:0}
  .header-cta{display:none}
  .site-footer .cols{grid-template-columns:1fr}
  .topbar .socials{display:none}
  .topbar .container{flex-wrap:wrap}
  .topbar .quick-links .ql-label{display:none}
  .topbar .quick-links .ql-btn{padding:5px 9px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important; scroll-behavior:auto}
}