/* ===========================
   LAXMI NAMKEEN - Main CSS
   =========================== */

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

:root {
  --orange:      #f97316;
  --orange-dark: #ea580c;
  --red:         #dc2626;
  --yellow:      #fbbf24;
  --bg:          #fff7ed;
  --text:        #1c1a18;
  --muted:       #6b5e52;
  --card-bg:     #ffffff;
  --border:      #fed7aa;
  --radius:      0.75rem;
  --shadow:      0 2px 12px rgba(0,0,0,.08);
  --shadow-lg:   0 8px 32px rgba(0,0,0,.14);
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* ---- UTILS ---- */
.container      { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; }
.text-center    { text-align: center; }
.mt-4           { margin-top: 1rem; }
.mt-8           { margin-top: 2rem; }
.mt-12          { margin-top: 3rem; }
.bg-light       { background: #fff7ed; }
.gujarati       { font-family: 'Noto Sans Gujarati', 'Segoe UI', sans-serif; }

/* ---- HEADER ---- */
.site-header {
  position: sticky; top: 0; z-index: 999;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 8px rgba(0,0,0,.07);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.logo            { display: flex; align-items: center; gap: .6rem; }
.logo-img        { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid #fed7aa; box-shadow: var(--shadow); transition: transform .2s; }
.logo:hover .logo-img { transform: scale(1.06); }
.logo-fallback   { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg,var(--orange),var(--red)); color: #fff; font-size: 1.25rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.logo-text       { display: flex; flex-direction: column; }
.logo-name       { color: var(--orange); font-weight: 800; font-size: 1.05rem; line-height: 1.1; letter-spacing: .05em; }
.logo-sub        { color: #d97706; font-size: .65rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.main-nav        { display: flex; align-items: center; gap: .25rem; }
.main-nav a      { padding: .45rem 1rem; border-radius: .6rem; font-size: .88rem; font-weight: 500; color: #374151; transition: all .18s; }
.main-nav a:hover,.main-nav a.active { background: var(--orange); color: #fff; }
.btn-order       { margin-left: .5rem; background: linear-gradient(135deg,var(--orange),var(--red)) !important; color: #fff !important; border-radius: 999px !important; padding: .5rem 1.2rem !important; font-weight: 700 !important; box-shadow: 0 2px 8px rgba(249,115,22,.3); }
.hamburger       { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: .5rem; }
.hamburger span  { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; }
@media(max-width:768px) {
  .hamburger { display: flex; }
  .main-nav  { display: none; position: absolute; top: 64px; left: 0; right: 0; background: #fff; flex-direction: column; padding: .75rem 1rem 1rem; border-top: 1px solid var(--border); box-shadow: 0 6px 20px rgba(0,0,0,.1); gap: .25rem; }
  .main-nav.open { display: flex; }
  .main-nav a { border-radius: .6rem; }
}

/* ---- BUTTONS ---- */
.btn { display: inline-block; padding: .75rem 1.8rem; border-radius: 999px; font-weight: 600; font-size: .9rem; cursor: pointer; border: none; transition: all .2s; }
.btn-primary  { background: linear-gradient(135deg,var(--orange),var(--red)); color: #fff; box-shadow: 0 3px 14px rgba(249,115,22,.35); }
.btn-primary:hover { box-shadow: 0 5px 20px rgba(249,115,22,.45); transform: scale(1.03); }
.btn-secondary{ background: rgba(255,255,255,.2); color: #fff; border: 1.5px solid rgba(255,255,255,.4); backdrop-filter: blur(6px); }
.btn-secondary:hover { background: rgba(255,255,255,.3); }
.btn-yellow   { background: var(--yellow); color: #78350f; }
.btn-yellow:hover { background: #fcd34d; transform: scale(1.03); }
.btn-white    { background: #fff; color: var(--orange); font-weight: 700; box-shadow: 0 3px 14px rgba(0,0,0,.12); }
.btn-white:hover { transform: scale(1.03); }
.btn-full     { width: 100%; text-align: center; display: block; }

/* ---- HERO ---- */
.hero          { position: relative; background: linear-gradient(135deg,#f97316,#ea580c,#dc2626); color: #fff; padding: 5rem 0 6rem; text-align: center; overflow: hidden; }
.hero-overlay  { position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%,rgba(253,224,71,.15),transparent 60%),radial-gradient(circle at 80% 70%,rgba(239,68,68,.2),transparent 60%); pointer-events: none; }
.hero-content  { position: relative; z-index: 1; }
.hero-badge    { display: inline-block; background: rgba(255,255,255,.2); color: #fff; font-size: .75rem; font-weight: 600; padding: .35rem 1.1rem; border-radius: 999px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.25rem; }
.hero h1       { font-size: clamp(2rem,5vw,3.5rem); font-weight: 800; line-height: 1.15; margin-bottom: .75rem; }
.highlight     { color: #fde68a; }
.hero > .container > p { color: rgba(255,255,255,.85); font-size: 1.05rem; }
.gujarati-tagline { font-family: 'Noto Sans Gujarati',sans-serif; font-size: 1.8rem; font-weight: 700; color: #fde68a; margin: .6rem 0 1.8rem; }
.hero-btns     { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* ---- FEATURES STRIP ---- */
.features-strip  { background: #fffbeb; border-top: 1px solid #fde68a; border-bottom: 1px solid #fde68a; padding: 1.4rem 0; }
.features-grid   { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; text-align: center; }
.feature-item    { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.feature-icon    { font-size: 1.75rem; }
.feature-item strong { font-size: .875rem; color: var(--text); }
.feature-item small  { font-size: .75rem; color: var(--muted); }
@media(max-width:600px){ .features-grid { grid-template-columns: repeat(2,1fr); } }

/* ---- SECTION ---- */
.section        { padding: 4rem 0; }
.section-header { text-align: center; margin-bottom: 2.5rem; }
.section-label  { color: var(--orange); font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.section-header h2 { font-size: clamp(1.5rem,3vw,2rem); font-weight: 800; color: var(--text); margin-top: .35rem; }
.section-header p  { color: var(--muted); font-size: .9rem; margin-top: .4rem; }

/* ---- PRODUCT GRID ---- */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap: 1.4rem; }
.product-card  { background: var(--card-bg); border-radius: 1.1rem; box-shadow: var(--shadow); border: 1px solid #fff4e6; overflow: hidden; position: relative; transition: box-shadow .25s, transform .25s; display: flex; flex-direction: column; }
.product-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.badge-popular { position: absolute; top: .7rem; left: .7rem; background: var(--red); color: #fff; font-size: .7rem; font-weight: 700; padding: .2rem .65rem; border-radius: 999px; z-index: 2; }
.badge-cat     { position: absolute; top: .7rem; right: .7rem; background: rgba(255,246,235,.9); color: #92400e; font-size: .68rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; z-index: 2; }
.product-img   { height: 200px; overflow: hidden; background: linear-gradient(135deg,#fff7ed,#fef9c3); display: flex; align-items: center; justify-content: center; }
.product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.product-card:hover .product-img img { transform: scale(1.06); }
.img-fallback  { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3.5rem; font-weight: 800; color: var(--orange); background: linear-gradient(135deg,#fff7ed,#fef9c3); }
.product-body  { padding: 1.1rem; display: flex; flex-direction: column; flex: 1; }
.product-body h3 { font-size: 1.45rem; color: var(--orange); line-height: 1.2; }
.product-en    { font-size: .8rem; color: var(--muted); margin-top: .15rem; }
.product-desc  { font-size: .8rem; color: #6b7280; margin: .65rem 0; line-height: 1.5; flex: 1; }
.product-footer{ display: flex; align-items: center; justify-content: space-between; margin-bottom: .85rem; }
.product-price { font-size: 1.3rem; font-weight: 800; color: var(--orange); }
.product-price small { font-size: .72rem; color: var(--muted); font-weight: 400; }
.qty-control   { display: flex; align-items: center; gap: .35rem; background: #fff7ed; border-radius: 999px; padding: .2rem .45rem; }
.qty-btn       { width: 22px; height: 22px; border-radius: 50%; background: none; border: none; color: var(--orange); font-weight: 800; font-size: .9rem; cursor: pointer; transition: background .15s; line-height: 1; }
.qty-btn:hover { background: #fed7aa; }
.qty-val       { min-width: 18px; text-align: center; font-size: .85rem; font-weight: 700; color: #92400e; }
.btn-order-card{ width: 100%; padding: .7rem; background: linear-gradient(135deg,var(--orange),var(--red)); color: #fff; border: none; border-radius: .75rem; font-size: .88rem; font-weight: 700; cursor: pointer; transition: all .2s; }
.btn-order-card:hover { box-shadow: 0 4px 14px rgba(249,115,22,.4); transform: scale(1.01); }
.btn-order-card:active { transform: scale(.98); }

/* ---- FILTER BAR ---- */
.filter-bar    { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 1.4rem; }
.search-wrap   { position: relative; flex: 1; min-width: 200px; }
.search-icon   { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); font-size: .9rem; }
.search-wrap input { width: 100%; padding: .6rem .9rem .6rem 2.4rem; border: 1.5px solid var(--border); border-radius: 999px; font-size: .88rem; background: #fff; outline: none; font-family: inherit; }
.search-wrap input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(249,115,22,.12); }
.cat-filters   { display: flex; flex-wrap: wrap; gap: .5rem; }
.cat-btn       { padding: .42rem 1rem; border-radius: 999px; font-size: .78rem; font-weight: 600; border: 1.5px solid var(--border); background: #fff; color: #374151; cursor: pointer; transition: all .18s; }
.cat-btn:hover { border-color: var(--orange); color: var(--orange); }
.cat-btn.active{ background: var(--orange); color: #fff; border-color: var(--orange); transform: scale(1.04); }
.product-count { font-size: .85rem; color: var(--muted); margin-bottom: 1.2rem; }
.no-results    { text-align: center; padding: 4rem 0; color: var(--muted); }
.no-results span { font-size: 3.5rem; display: block; margin-bottom: .75rem; }

/* ---- ABOUT BANNER ---- */
.about-banner      { background: linear-gradient(135deg,#7c2d12,#991b1b); color: #fff; padding: 3.5rem 0; }
.about-banner-inner{ display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.about-banner-text h2 { font-size: 1.8rem; font-weight: 800; margin-bottom: .75rem; }
.about-banner-text p  { color: rgba(255,255,255,.8); margin-bottom: 1.25rem; max-width: 480px; }
.about-banner-icon    { font-size: 5rem; }

/* ---- TESTIMONIALS ---- */
.testimonials-grid{ display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 1.25rem; }
.review-card      { background: var(--card-bg); border-radius: 1rem; padding: 1.4rem; box-shadow: var(--shadow); border: 1px solid #fff4e6; transition: box-shadow .2s; }
.review-card:hover{ box-shadow: var(--shadow-lg); }
.stars            { color: #fbbf24; font-size: 1.1rem; margin-bottom: .65rem; }
.review-card > p  { color: #6b7280; font-size: .85rem; line-height: 1.55; margin-bottom: 1rem; }
.reviewer         { display: flex; align-items: center; gap: .65rem; }
.reviewer-avatar  { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg,var(--orange),var(--red)); color: #fff; font-size: .9rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.reviewer strong  { display: block; font-size: .88rem; }
.reviewer small   { color: var(--muted); font-size: .75rem; }

/* ---- MODAL ---- */
.modal-overlay    { position: fixed; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal-box        { background: #fff; border-radius: 1.5rem; box-shadow: var(--shadow-lg); max-width: 380px; width: 100%; padding: 2rem; text-align: center; animation: pop .25s ease; }
@keyframes pop    { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }
.modal-success-icon { width: 72px; height: 72px; background: linear-gradient(135deg,#10b981,#059669); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #fff; margin: 0 auto 1rem; font-weight: 800; box-shadow: 0 4px 16px rgba(16,185,129,.3); }
.modal-box h2     { font-size: 1.5rem; font-weight: 800; }
.modal-subtitle   { color: var(--muted); font-size: .85rem; margin-top: .25rem; }
.modal-divider    { border: none; border-top: 1.5px dashed #fed7aa; margin: 1rem 0; }
.modal-details    { background: #fff7ed; border-radius: .9rem; padding: 1rem; text-align: left; }
.modal-row        { display: flex; justify-content: space-between; align-items: flex-start; padding: .35rem 0; font-size: .85rem; }
.modal-row span   { color: var(--muted); }
.modal-row strong { text-align: right; max-width: 55%; }
.modal-row.total  { border-top: 1px solid #fed7aa; margin-top: .5rem; padding-top: .75rem; font-weight: 700; }
.modal-row.total span  { font-size: .9rem; color: var(--text); }
.modal-row.total strong{ font-size: 1.1rem; color: var(--orange); }
.modal-note       { font-size: .75rem; color: #9ca3af; margin: .9rem 0; }

/* ---- PAGE HERO ---- */
.page-hero        { background: linear-gradient(135deg,#f97316,#ea580c,#dc2626); color: #fff; padding: 3.5rem 0; text-align: center; }
.page-hero-content h1 { font-size: clamp(1.8rem,4vw,2.8rem); font-weight: 800; margin: .4rem 0 .5rem; }
.page-hero-content p  { color: rgba(255,255,255,.8); font-size: .9rem; max-width: 440px; margin: 0 auto; }

/* ---- ABOUT PAGE ---- */
.about-story      { display: flex; align-items: center; gap: 3rem; flex-wrap: wrap; margin-bottom: 2rem; }
.about-story-text { flex: 1; min-width: 280px; }
.about-story-text h2 { font-size: 1.7rem; font-weight: 800; margin: .5rem 0 1rem; }
.about-story-text p  { color: #4b5563; margin-bottom: .9rem; font-size: .9rem; line-height: 1.7; }
.about-story-icon    { font-size: 6rem; flex-shrink: 0; }
.values-grid      { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap: 1.2rem; }
.value-card       { background: var(--card-bg); border-radius: 1rem; padding: 1.4rem; box-shadow: var(--shadow); border: 1px solid #fff4e6; }
.value-icon       { font-size: 1.8rem; display: block; margin-bottom: .65rem; }
.value-card h3    { font-weight: 700; margin-bottom: .4rem; }
.value-card p     { font-size: .83rem; color: #6b7280; line-height: 1.5; }
.timeline         { position: relative; padding-left: 2.5rem; }
.timeline::before { content:''; position: absolute; left: .85rem; top: 0; bottom: 0; width: 2px; background: #fed7aa; }
.timeline-item    { position: relative; margin-bottom: 1.5rem; display: flex; gap: 1.2rem; }
.timeline-dot     { position: absolute; left: -2.5rem; width: 36px; height: 36px; background: linear-gradient(135deg,var(--orange),var(--red)); border-radius: 50%; color: #fff; font-size: .7rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(249,115,22,.3); }
.timeline-content { background: var(--card-bg); border-radius: .9rem; padding: 1rem 1.2rem; box-shadow: var(--shadow); border: 1px solid #fff4e6; flex: 1; }
.timeline-year    { font-size: .75rem; color: var(--orange); font-weight: 600; }
.timeline-content h3 { font-weight: 700; margin: .2rem 0 .3rem; }
.timeline-content p  { font-size: .83rem; color: #6b7280; }
.cta-banner       { background: linear-gradient(135deg,var(--orange),var(--red)); color: #fff; border-radius: 1.5rem; padding: 2.5rem; text-align: center; box-shadow: 0 8px 32px rgba(249,115,22,.25); }
.cta-banner h3    { font-size: 1.6rem; font-weight: 800; margin-bottom: .65rem; }
.cta-banner p     { color: rgba(255,255,255,.85); margin-bottom: 1.4rem; max-width: 400px; margin-left: auto; margin-right: auto; }

/* ---- CONTACT PAGE ---- */
.contact-grid     { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
@media(max-width:768px){ .contact-grid { grid-template-columns: 1fr; gap: 2rem; } }
.contact-info h2,.contact-form-wrap h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 1.2rem; }
.info-card        { display: flex; gap: 1rem; background: var(--card-bg); border-radius: .9rem; padding: 1rem; box-shadow: var(--shadow); border: 1px solid #fff4e6; margin-bottom: .9rem; align-items: flex-start; }
.info-icon        { width: 44px; height: 44px; background: #fff7ed; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.info-card strong { display: block; font-weight: 700; margin-bottom: .2rem; }
.info-card a      { color: var(--orange); font-size: .85rem; }
.info-card a:hover{ color: var(--orange-dark); }
.info-card p,.info-card small { font-size: .83rem; color: #6b7280; line-height: 1.55; }
.map-placeholder  { background: #fff7ed; border-radius: .9rem; padding: 2rem; text-align: center; border: 1px solid #fde68a; margin-top: .5rem; }
.map-placeholder span  { font-size: 2.5rem; }
.map-placeholder p     { font-weight: 600; margin: .5rem 0 .2rem; }
.map-placeholder small { color: var(--muted); font-size: .8rem; }
.contact-form     { background: var(--card-bg); border-radius: 1rem; padding: 1.5rem; box-shadow: var(--shadow); border: 1px solid #fff4e6; }
.form-group       { margin-bottom: 1.1rem; }
.form-group label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: .4rem; }
.required         { color: var(--red); }
.form-group input,.form-group textarea { width: 100%; padding: .7rem 1rem; border: 1.5px solid var(--border); border-radius: .65rem; font-size: .88rem; font-family: inherit; outline: none; transition: border-color .18s, box-shadow .18s; }
.form-group input:focus,.form-group textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(249,115,22,.1); }
.input-error { border-color: #ef4444 !important; background: #fef2f2 !important; }
.form-note        { font-size: .75rem; color: #9ca3af; font-style: italic; margin-bottom: 1rem; }
.form-errors      { background: #fef2f2; border: 1px solid #fecaca; border-radius: .65rem; padding: .8rem 1rem; margin-bottom: 1rem; }
.form-errors p    { color: #dc2626; font-size: .83rem; }
.success-card     { background: var(--card-bg); border-radius: 1rem; padding: 2.5rem; text-align: center; box-shadow: var(--shadow); border: 1px solid #d1fae5; }
.success-icon     { font-size: 2.5rem; margin-bottom: .9rem; }
.success-card h3  { font-size: 1.3rem; font-weight: 800; margin-bottom: .5rem; }
.success-card p   { color: #6b7280; font-size: .88rem; margin-bottom: .35rem; }
.success-card small { color: #9ca3af; font-size: .78rem; }

/* ---- ORDER SUCCESS PAGE ---- */
.order-success-icon{ width: 96px; height: 96px; background: linear-gradient(135deg,#10b981,#059669); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: #fff; margin: 0 auto 1.5rem; font-weight: 800; box-shadow: 0 6px 24px rgba(16,185,129,.3); }
.order-success-icon{ display:flex; align-items:center; justify-content:center; }
h1.order-success-title{ font-size: 2rem; }
.order-success-sub { color: var(--muted); margin: .5rem 0 1.25rem; }
.order-success-id  { display: inline-block; background: #fff7ed; border: 1.5px solid #fed7aa; border-radius: .65rem; padding: .6rem 1.4rem; font-size: 1.05rem; color: var(--orange); font-weight: 700; margin-bottom: .75rem; }
.order-success-note{ font-size: .8rem; color: #9ca3af; margin-bottom: 1.75rem; }
.order-success-btns{ display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

/* ---- FOOTER ---- */
.site-footer      { background: linear-gradient(135deg,#7c2d12,#991b1b,#7c2d12); color: #fde8d5; padding: 3rem 0 0; }
.footer-grid      { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 2rem; padding-bottom: 2.5rem; }
@media(max-width:768px){ .footer-grid { grid-template-columns: 1fr; } }
.footer-brand p   { font-size: .85rem; color: #fca87a; line-height: 1.65; margin-top: .75rem; }
.footer-logo      { display: flex; align-items: center; gap: .65rem; }
.footer-logo-img  { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.2); }
.footer-logo-name { color: #fed7aa; font-weight: 800; font-size: 1rem; }
.footer-logo-sub  { color: #f97316; font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; }
.footer-links h3,.footer-contact h3 { color: #fed7aa; font-weight: 600; margin-bottom: 1rem; font-size: .95rem; letter-spacing: .04em; }
.footer-links ul  { list-style: none; }
.footer-links li  { margin-bottom: .5rem; }
.footer-links a   { color: #fca87a; font-size: .85rem; transition: color .15s; }
.footer-links a:hover { color: #fde68a; }
.footer-contact p { font-size: .83rem; color: #fca87a; margin-bottom: .65rem; line-height: 1.55; }
.footer-contact a { color: #fca87a; }
.footer-contact a:hover { color: #fde68a; }
.footer-bottom    { border-top: 1px solid rgba(255,255,255,.1); padding: 1rem 0; }
.footer-bottom-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.footer-bottom p  { font-size: .78rem; color: #f87171; }

/* ---- RESPONSIVE ---- */
@media(max-width:640px){
  .hero { padding: 3rem 0 4rem; }
  .hero h1 { font-size: 1.9rem; }
  .about-banner-inner { flex-direction: column; text-align: center; }
}