/* ========================================================================== Sri Sri Ayurveda Panchkarma — stylesheet Light/Dark theming via [data-theme] on . Palette ported from the original MUI theme (theme.ts). ========================================================================== */ :root, [data-theme="light"] { --primary: #35734A; /* fresher, brighter healing green */ --primary-light: #5E9E71; --primary-dark: #245038; --secondary: #BE8A28; /* rich, solid gold — clearly visible */ --secondary-light:#E7B93F; /* bright gold for accent text on green */ --secondary-dark: #8A6216; --bg: #FFFFFF; /* clean white base */ --paper: #FFFFFF; --tint: #F4F9F5; /* barely-there green wash */ --tint-strong: #E7F1EA; --text: #23302A; --text-2: #5A6B60; --divider: #E4EDE7; --chip-bg: #EEF6F0; --shadow-sm: 0 2px 8px rgba(53,115,74,0.05); --shadow-md: 0 8px 28px rgba(53,115,74,0.08); --shadow-lg: 0 18px 44px rgba(53,115,74,0.12); --nav-bg: rgba(255,255,255,0.88); } [data-theme="dark"] { --primary: #6FB985; /* soft, luminous green on dark */ --primary-light: #8FCE9F; --primary-dark: #3F7A52; --secondary: #E8C462; /* brighter solid gold on dark */ --secondary-light:#F0D488; --secondary-dark: #C6A24A; --bg: #18211C; /* comfortable charcoal-green, not black */ --paper: #212D26; /* lifted card surface */ --tint: #1E2922; --tint-strong: #26332B; --text: #EAF1EC; --text-2: #AEBDB2; --divider: #33453A; --chip-bg: #26342C; --shadow-sm: 0 2px 8px rgba(0,0,0,0.22); --shadow-md: 0 8px 30px rgba(0,0,0,0.28); --shadow-lg: 0 16px 40px rgba(0,0,0,0.36); --nav-bg: rgba(24,33,28,0.88); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: "Inter", "Helvetica", Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background .3s ease, color .3s ease; } h1, h2, h3, h4, h5, h6 { font-family: "Poppins", "Segoe UI", "Helvetica Neue", Arial, sans-serif; letter-spacing: -0.015em; line-height: 1.3; color: var(--text); margin: 0 0 .5em; } a { color: inherit; } img { max-width: 100%; display: block; } .material-symbols-outlined { font-size: 20px; line-height: 1; vertical-align: middle; } /* ---- Layout helpers ---------------------------------------------------- */ .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; } .container--md { max-width: 960px; } .container--lg { max-width: 1120px; } .section { padding: 80px 0; } .section--tint { background: var(--tint-strong); border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); } .section--sm { padding: 48px 0; } .text-center { text-align: center; } .site-main { display: block; flex: 1 0 auto; } .grid { display: grid; gap: 24px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } .section-head { text-align: center; max-width: 680px; margin: 0 auto 44px; } .section-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; margin-bottom: 12px; } .section-head p { color: var(--text-2); font-size: 1.05rem; margin: 0 auto; } /* ---- Chips ------------------------------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: 6px; background: var(--chip-bg); color: var(--primary); font-size: .78rem; font-weight: 600; letter-spacing: .3px; padding: 6px 12px; border-radius: 8px; margin: 3px; } .chip--primary { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); } .chip--secondary { background: color-mix(in srgb, var(--secondary) 10%, transparent); color: var(--secondary); } .chip--solid-secondary { background: var(--secondary); color: #fff; } .chip--upper { text-transform: uppercase; letter-spacing: 1px; } .chip--outline { background: var(--bg); border: 1px solid var(--divider); color: var(--text); font-weight: 500; } /* ---- Buttons ----------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-weight: 600; font-size: .95rem; letter-spacing: .02em; padding: 12px 28px; border-radius: 30px; border: 1.5px solid transparent; cursor: pointer; text-decoration: none; transition: all .25s ease; white-space: nowrap; } .btn--primary { background: var(--primary); color: #fff; } .btn--primary:hover { background: var(--primary-dark); box-shadow: 0 4px 12px rgba(47,82,51,.2); } .btn--secondary { background: var(--secondary); color: #fff; } .btn--secondary:hover { background: var(--secondary-dark); box-shadow: 0 4px 12px rgba(138,109,59,.2); } .btn--outline { background: transparent; border-color: var(--primary); color: var(--primary); } .btn--outline:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); } .btn--outline-gold { background: transparent; border-color: var(--secondary); color: var(--secondary); } .btn--outline-gold:hover { background: color-mix(in srgb, var(--secondary) 6%, transparent); } .btn--outline-white { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; } .btn--outline-white:hover { border-color: #fff; background: rgba(255,255,255,.1); } .btn--lg { padding: 15px 34px; font-size: 1rem; } .btn--block { width: 100%; } /* ---- Paper / cards ----------------------------------------------------- */ .paper { background: var(--paper); border: 1px solid var(--divider); border-radius: 16px; padding: 28px; } .paper--tint { background: var(--tint-strong); } .card { background: var(--paper); border: 1px solid var(--divider); border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .card:hover { transform: translateY(-6px); border-color: var(--secondary); box-shadow: var(--shadow-lg); } .card__img { width: 100%; height: 190px; object-fit: cover; object-position: center; background: var(--tint); border-bottom: 1px solid var(--divider); } .card__img--banner { height: 190px; object-fit: contain; object-position: center; background: var(--tint); } /* Department cards: container matches the 3:2 banner artwork exactly — full image, no crop, all cards aligned */ .card__img--dept { height: auto; aspect-ratio: 1050 / 694; object-fit: cover; object-position: center; background: var(--tint); } .card__body { padding: 24px; flex: 1; display: flex; flex-direction: column; } .card__title { color: var(--primary); font-weight: 700; font-size: 1.25rem; margin-bottom: 12px; } .card__desc { color: var(--text-2); font-size: .92rem; margin-bottom: 20px; } .card__foot { margin-top: auto; } .hr { border: none; border-top: 1px solid var(--divider); margin: 16px 0; } /* ========================================================================== TOP BAR + NAVBAR ========================================================================== */ .topbar { background: var(--primary-dark); color: #eee; font-size: .78rem; } .topbar__inner { max-width: 1280px; margin: 0 auto; padding: 6px 24px; display: flex; align-items: center; justify-content: space-between; } .topbar__contact { display: flex; align-items: center; gap: 8px; color: #f0f0f0; } .topbar__contact .material-symbols-outlined { font-size: 15px; color: var(--secondary-light); } .topbar__panels { color: #cfcfcf; } @media (max-width: 768px) { .topbar { display: none; } } .navbar { position: sticky; top: 0; z-index: 100; background: var(--nav-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--divider); } .navbar__inner { max-width: 1280px; margin: 0 auto; padding: 8px 24px; min-height: 82px; display: flex; align-items: center; gap: 14px; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; min-width: 0; max-width: 250px; flex: 0 1 250px; } .brand__mark { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, #2e7d32 0%, #43a047 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(46,125,50,.4); } .brand__mark .material-symbols-outlined { color: #fff; font-size: 24px; } .brand__text { display: flex; flex-direction: column; line-height: 1.1; } .brand__name { font-family: "Poppins", "Segoe UI", sans-serif; font-weight: 800; color: var(--primary); font-size: 1rem; } .brand__sub { color: var(--secondary); font-weight: 600; font-size: .68rem; letter-spacing: 1.5px; } @media (max-width: 480px) { .brand__text { display: none; } } .brand__logo { display: block; width: 100%; height: 56px; flex: 0 1 100%; background-image: var(--brand-logo-light); background-repeat: no-repeat; background-position: left center; background-size: contain; } html[data-theme="light"] .brand__logo { background-image: var(--brand-logo-light); } html[data-theme="dark"] .brand__logo { background-image: var(--brand-logo-dark); } @media (max-width: 1024px) { .navbar__inner { min-height: 76px; } .brand { max-width: 185px; flex-basis: 185px; } .brand__logo { height: 50px; } } @media (max-width: 480px) { .navbar__inner { min-height: 70px; padding-inline: 18px; } .brand { max-width: 150px; flex-basis: 150px; } .brand__logo { height: 42px; } } .nav-desktop { display: flex; align-items: center; gap: 2px; } .nav-link { display: inline-flex; align-items: center; gap: 2px; font-size: .78rem; font-weight: 600; color: var(--text); text-decoration: none; padding: 8px 12px; border-radius: 8px; background: none; border: none; cursor: pointer; font-family: inherit; transition: color .2s, background .2s; } .nav-link:hover, .nav-link.is-active { color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, transparent); } .nav-link .material-symbols-outlined { font-size: 18px; } .nav-dropdown { position: relative; } .nav-dropdown__menu { position: absolute; top: 100%; left: 0; margin-top: 8px; min-width: 270px; background: var(--paper); border: 1px solid color-mix(in srgb, var(--primary) 15%, transparent); border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.15); padding: 6px; max-height: 70vh; overflow: auto; opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .2s ease; z-index: 120; } .nav-dropdown.is-open .nav-dropdown__menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown__menu a { display: block; padding: 10px 14px; font-size: .85rem; color: var(--text); text-decoration: none; border-radius: 8px; } .nav-dropdown__menu a:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); color: var(--primary); } .navbar__actions { display: flex; align-items: center; gap: 8px; } .theme-toggle { width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; background: color-mix(in srgb, var(--primary) 10%, transparent); display: flex; align-items: center; justify-content: center; color: var(--primary); } .theme-toggle:hover { background: color-mix(in srgb, var(--primary) 20%, transparent); } .theme-toggle .icon-light { display: none; } [data-theme="dark"] .theme-toggle .icon-dark { display: none; } [data-theme="dark"] .theme-toggle .icon-light { display: inline-flex; color: var(--secondary); } .menu-btn { display: none; width: 40px; height: 40px; border: none; background: none; color: var(--primary); cursor: pointer; } @media (max-width: 1024px) { .nav-desktop { display: none; } .menu-btn { display: inline-flex; align-items: center; justify-content: center; } } /* ---- Mobile drawer ----------------------------------------------------- */ .drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 200; opacity: 0; visibility: hidden; transition: opacity .25s ease; } .drawer-overlay.is-open { opacity: 1; visibility: visible; } .drawer { position: fixed; top: 0; right: 0; height: 100%; width: 300px; max-width: 85vw; background: var(--paper); z-index: 210; transform: translateX(100%); transition: transform .3s ease; overflow-y: auto; box-shadow: -8px 0 30px rgba(0,0,0,.2); } .drawer.is-open { transform: translateX(0); } .drawer__head { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-bottom: 1px solid var(--divider); color: var(--primary); } .drawer__head strong { font-family: "Poppins", "Segoe UI", sans-serif; font-size: 1.1rem; } .drawer__close { margin-left: auto; background: none; border: none; color: var(--text); cursor: pointer; } .drawer__nav { display: flex; flex-direction: column; padding: 8px 0; } .drawer__nav > a, .drawer__group { text-align: left; padding: 12px 20px; font-size: .85rem; font-weight: 600; color: var(--text); text-decoration: none; background: none; border: none; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: space-between; } .drawer__nav > a:hover, .drawer__group:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); } .drawer__sub { display: none; flex-direction: column; background: color-mix(in srgb, var(--primary) 4%, transparent); } .drawer__sub.is-open { display: flex; } .drawer__sub a { padding: 10px 20px 10px 36px; font-size: .8rem; color: var(--text-2); text-decoration: none; } .drawer__sub a:hover { color: var(--primary); } .drawer__group .material-symbols-outlined { transition: transform .2s ease; } .drawer__group.is-open .material-symbols-outlined { transform: rotate(180deg); } /* ========================================================================== HERO ========================================================================== */ .hero { position: relative; display: flex; align-items: center; overflow: hidden; background: var(--primary-dark); } .hero--tall { min-height: 620px; padding: 64px 0; } .hero--mid { min-height: 320px; padding: 48px 0; } .hero--sm { min-height: 260px; padding: 40px 0; } .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(120deg, rgba(36,80,56,.82) 0%, rgba(53,115,74,.62) 55%, rgba(36,80,56,.7) 100%); } [data-theme="dark"] .hero__overlay { background: linear-gradient(120deg, rgba(24,33,28,.9) 0%, rgba(40,66,48,.72) 55%, rgba(24,33,28,.86) 100%); } .hero .container { position: relative; z-index: 2; } .hero h1 { color: #F3F7F3; font-weight: 600; font-size: clamp(2.1rem, 4.6vw, 3.3rem); line-height: 1.22; letter-spacing: -0.01em; text-shadow: 0 1px 10px rgba(0,0,0,.18); margin-bottom: 16px; } .hero__lead { color: rgba(255,255,255,.9); font-size: 1.14rem; font-weight: 400; line-height: 1.7; max-width: 620px; margin-bottom: 20px; } .hero__text { color: rgba(255,255,255,.72); max-width: 580px; margin-bottom: 32px; font-size: .95rem; font-weight: 400; line-height: 1.7; } .hero__accent { color: var(--secondary-light); font-style: italic; } .hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .hero__grid img { height: 180px; width: 100%; object-fit: cover; object-position: center; background: rgba(255,255,255,.1); border-radius: 12px; border: 1px solid rgba(255,255,255,.2); box-shadow: 0 12px 30px rgba(0,0,0,.25); } .hero__cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; } @media (max-width: 900px) { .hero__cols { grid-template-columns: 1fr; } .hero__grid { display: none; } } .hero__actions { display: flex; gap: 16px; flex-wrap: wrap; } /* ---- Home hero: solid green + captioned feature grid ---- */ .hero--home { background: linear-gradient(150deg, #1d4531 0%, #24503c 55%, #2c5a41 100%); min-height: 620px; padding: 72px 0; } .hero--home::before { content: ""; position: absolute; top: -160px; right: -120px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(198,166,106,.14), transparent 65%); z-index: 1; } .hero--home .hero__cols { grid-template-columns: 1.05fr 1.1fr; gap: 44px; } .hero__feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .hero-feat { position: relative; margin: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,.28); } .hero-feat img { width: 100%; height: 232px; object-fit: cover; object-position: center; display: block; background: var(--tint); } .hero-feat figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; background: rgba(255,255,255,.94); backdrop-filter: blur(4px); border-radius: 12px; padding: 11px 13px; display: flex; align-items: center; gap: 11px; } .hero-feat__ic { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; } .hero-feat__ic .material-symbols-outlined { font-size: 20px; } .hero-feat__txt b { display: block; font-family: "Poppins", "Segoe UI", sans-serif; color: var(--primary-dark); font-size: .92rem; font-weight: 600; line-height: 1.2; } .hero-feat__txt small { display: block; color: #5A6B60; font-size: .76rem; margin-top: 2px; } [data-theme="dark"] .hero-feat figcaption { background: rgba(33,45,38,.94); } [data-theme="dark"] .hero-feat__txt b { color: #EAF1EC; } [data-theme="dark"] .hero-feat__txt small { color: #AEBDB2; } @media (max-width: 900px) { .hero--home .hero__cols { grid-template-columns: 1fr; } .hero__feature-grid { display: grid; } .hero-feat img { height: 190px; } } @media (max-width: 480px) { .hero__feature-grid { grid-template-columns: 1fr; } .hero-feat img { height: 210px; } } /* ========================================================================== HOME-SPECIFIC ========================================================================== */ .trust-strip { background: var(--tint-strong); padding: 24px 0; border-bottom: 1px solid var(--divider); } .trust-strip__row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .trust-strip__label { font-weight: 700; color: var(--primary); font-size: 1.05rem; } .trust-badges { display: flex; gap: 14px; flex-wrap: wrap; } .trust-badge { display: flex; align-items: center; gap: 8px; background: var(--paper); border: 1px solid var(--divider); border-radius: 10px; padding: 8px 16px; box-shadow: var(--shadow-sm); } .trust-badge .material-symbols-outlined { color: var(--secondary); font-size: 18px; } .trust-badge span:last-child { font-size: .72rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } .about-media { position: relative; display: flex; justify-content: center; } .about-media__main { width: 90%; border-radius: 18px; box-shadow: var(--shadow-md); border: 1px solid var(--divider); } .about-media__badge { position: absolute; bottom: -30px; right: 0; width: 220px; height: 220px; border-radius: 18px; object-fit: cover; object-position: center; background: var(--tint); border: 6px solid var(--paper); box-shadow: 0 16px 40px rgba(0,0,0,.12); } @media (max-width: 600px) { .about-media__badge { display: none; } } .about-cols { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; } @media (max-width: 900px) { .about-cols { grid-template-columns: 1fr; gap: 56px; } } .checks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 24px 0; } @media (max-width: 500px) { .checks { grid-template-columns: 1fr; } } .checks div { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .9rem; } .checks .material-symbols-outlined { color: var(--secondary); font-size: 22px; } .step-card { background: var(--paper); border: 1px solid var(--divider); border-radius: 14px; padding: 32px; height: 100%; transition: transform .25s ease; } .step-card:hover { transform: translateY(-4px); } .step-card__num { font-family: "Poppins", "Segoe UI", sans-serif; font-weight: 800; font-size: 3rem; line-height: 1; color: var(--secondary); opacity: .55; margin-bottom: 12px; } [data-theme="dark"] .step-card__num { color: var(--secondary); opacity: .85; } .step-card__title { color: var(--primary); font-weight: 700; font-size: 1.1rem; margin-bottom: 10px; } .step-card__desc { color: var(--text-2); font-size: .9rem; } .stats { background: var(--primary); padding: 44px 0; } .stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } @media (max-width: 600px) { .stats__grid { grid-template-columns: repeat(2, 1fr); } } .stat { text-align: center; color: #fff; } .stat .material-symbols-outlined { font-size: 28px; color: var(--secondary-light); margin-bottom: 6px; } .stat__value { font-family: "Poppins", "Segoe UI", sans-serif; font-weight: 800; font-size: clamp(1.75rem, 3vw, 2.5rem); } .stat__label { color: rgba(255,255,255,.85); font-size: .9rem; } .svc-card__sanskrit { color: var(--secondary); font-weight: 600; margin-bottom: 10px; } .svc-card__meta { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-size: .78rem; font-weight: 700; margin-bottom: 14px; } .svc-card__meta .material-symbols-outlined { font-size: 16px; } .svc-card__more { display: flex; align-items: center; gap: 4px; color: var(--primary); font-weight: 700; font-size: .85rem; margin-top: auto; } .masonry-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; } @media (max-width: 900px) { .masonry-strip { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 500px) { .masonry-strip { grid-template-columns: repeat(2, 1fr); } } .masonry-strip img { height: 180px; width: 100%; object-fit: cover; object-position: center; background: var(--tint); border-radius: 12px; box-shadow: var(--shadow-sm); transition: box-shadow .3s ease; } .masonry-strip img:hover { box-shadow: var(--shadow-md); } .testimonial { background: var(--paper); border: 1px solid var(--divider); border-radius: 14px; padding: 32px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--shadow-sm); } .testimonial__stars { color: #E8A81C; font-size: 1.15rem; letter-spacing: 3px; line-height: 1; margin-bottom: 14px; } .testimonial__text { font-style: italic; margin-bottom: 22px; line-height: 1.7; } .testimonial__foot { border-top: 1px solid var(--divider); padding-top: 14px; } .testimonial__name { font-weight: 700; } .testimonial__tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } /* ---- Accordion (FAQ) --------------------------------------------------- */ .accordion { max-width: 850px; margin: 0 auto; } .acc-item { border-bottom: 1px solid var(--divider); margin-bottom: 4px; } .acc-item.acc--boxed { border: 1px solid var(--divider); border-radius: 12px; margin-bottom: 12px; background: var(--paper); } .acc-item.acc--boxed.is-open { border-color: var(--primary); } .acc-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 12px; color: var(--primary); font-weight: 700; font-size: 1.02rem; } .acc-q .material-symbols-outlined { color: var(--primary); transition: transform .25s ease; flex-shrink: 0; } .acc-item.is-open .acc-q .material-symbols-outlined { transform: rotate(180deg); } .acc-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .acc-a__inner { padding: 0 12px 20px; color: var(--text-2); line-height: 1.7; font-size: .96rem; } /* ---- Map / location ---------------------------------------------------- */ .map-box { border-radius: 16px; overflow: hidden; border: 1px solid var(--divider); height: 350px; box-shadow: var(--shadow-sm); } .map-box iframe { width: 100%; height: 100%; border: 0; } .loc-cols { display: grid; grid-template-columns: 1fr 1.3fr; gap: 32px; align-items: center; } @media (max-width: 900px) { .loc-cols { grid-template-columns: 1fr; } } /* ---- CTA banner -------------------------------------------------------- */ .cta-banner { background: linear-gradient(135deg, #35734A 0%, #245038 100%); color: #fff; text-align: center; padding: 72px 0; } .cta-banner h2 { color: #fff; font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 16px; } .cta-banner p { color: rgba(255,255,255,.85); max-width: 600px; margin: 0 auto 32px; } .cta-banner .material-symbols-outlined.cta-icon { font-size: 44px; color: var(--secondary-light); margin-bottom: 12px; } .cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* ========================================================================== DETAIL PAGES (department / service) + SIDEBAR ========================================================================== */ .detail-layout { display: grid; grid-template-columns: 1fr 340px; gap: 40px; padding: 40px 0; } @media (max-width: 1024px) { .detail-layout { grid-template-columns: 1fr; } } .breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: .85rem; margin-bottom: 24px; color: var(--text-2); } .breadcrumbs a { color: var(--text-2); text-decoration: none; } .breadcrumbs a:hover { text-decoration: underline; } .breadcrumbs .sep { opacity: .5; } .breadcrumbs .current { color: var(--primary); font-weight: 600; } .breadcrumbs .current--gold { color: var(--secondary); } .detail-title { color: var(--primary); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 24px; } .detail-banner { width: 100%; height: auto; display: block; border-radius: 14px; margin-bottom: 32px; box-shadow: var(--shadow-md); border: 1px solid var(--divider); } .detail-hero { position: relative; border-radius: 14px; overflow: hidden; margin-bottom: 32px; box-shadow: var(--shadow-md); background: var(--tint); } .detail-hero img { width: 100%; height: 380px; object-fit: cover; object-position: center; display: block; } @media (max-width: 600px) { .detail-hero img { height: 240px; } } .detail-hero__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px; background: linear-gradient(transparent, rgba(0,0,0,.85)); } .detail-hero__cap h1 { color: #fff; font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0; } .detail-hero__cap p { color: rgba(255,255,255,.95); margin: 6px 0 0; font-size: .95rem; } .detail-hero__cap .sanskrit { color: var(--secondary-light); font-weight: 600; font-size: 1.15rem; } .badge-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; } .rich-block { margin-bottom: 34px; } .rich-block h3, .rich-block h2 { color: var(--primary); font-weight: 700; font-size: 1.4rem; margin-bottom: 18px; } .rich-block--gold h3, .rich-block--gold h2 { color: var(--secondary); } .rich-block p { color: var(--text-2); line-height: 1.9; font-size: 1.02rem; margin: 0 0 16px; } .bullet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 600px) { .bullet-grid { grid-template-columns: 1fr; } } .bullet-card { display: flex; align-items: center; gap: 12px; background: var(--paper); border: 1px solid var(--divider); border-radius: 12px; padding: 16px; transition: transform .2s ease, border-color .2s ease; } .bullet-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--secondary) 40%, transparent); } .bullet-card .material-symbols-outlined { color: var(--secondary); font-size: 18px; flex-shrink: 0; } .bullet-card span:last-child { font-size: .92rem; font-weight: 500; } .treat-item { background: var(--paper); border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent); border-radius: 14px; padding: 24px; margin-bottom: 18px; display: flex; gap: 16px; transition: all .25s ease; } .treat-item:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: var(--shadow-sm); } .rich-block--gold .treat-item { border-color: color-mix(in srgb, var(--secondary) 15%, transparent); } .rich-block--gold .treat-item:hover { border-color: var(--secondary); } .treat-num { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); } .rich-block--gold .treat-num { background: color-mix(in srgb, var(--secondary) 10%, transparent); color: var(--secondary); } .treat-item h4, .treat-item h3 { color: var(--primary); font-weight: 700; font-size: 1.05rem; margin: 0 0 6px; } .rich-block--gold .treat-item h4, .rich-block--gold .treat-item h3 { color: var(--secondary); } .treat-item p { margin: 0; color: var(--text-2); font-size: .92rem; line-height: 1.7; } .detail-cta { background: linear-gradient(135deg, #35734A 0%, #245038 100%); color: #fff; border-radius: 14px; padding: 36px; text-align: center; margin: 20px 0 34px; } .detail-cta h3, .detail-cta h2 { color: #fff; font-weight: 700; font-size: 1.5rem; margin-bottom: 10px; } .detail-cta p { color: rgba(255,255,255,.85); max-width: 600px; margin: 0 auto 24px; } .prevnext { display: flex; justify-content: space-between; gap: 16px; } .prevnext .btn { flex: 1; } .prevnext .spacer { flex: 1; } /* two-image row + info paper lists (fallback / legacy render) */ .img-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 32px; } @media (max-width: 600px) { .img-duo { grid-template-columns: 1fr; } } .img-duo img { width: 100%; height: 240px; object-fit: cover; object-position: center; background: var(--tint); border-radius: 14px; border: 1px solid var(--divider); } .info-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px; } @media (max-width: 700px) { .info-duo { grid-template-columns: 1fr; } } .info-list { list-style: none; padding: 0; margin: 0; } .info-list li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; font-size: .95rem; } .info-list .material-symbols-outlined { color: var(--secondary); font-size: 18px; flex-shrink: 0; margin-top: 2px; } /* ---- Sidebar ----------------------------------------------------------- */ .sidebar { display: flex; flex-direction: column; gap: 24px; } .sidebar__cta { background: linear-gradient(135deg, #2e7d32 0%, #43a047 100%); border-radius: 14px; padding: 22px; text-align: center; color: #fff; } .sidebar__cta .material-symbols-outlined { font-size: 32px; margin-bottom: 6px; } .sidebar__cta-title { font-family: "Poppins", "Segoe UI", sans-serif; font-weight: 700; font-size: 1.1rem; } .sidebar__cta-sub { color: rgba(255,255,255,.85); font-size: .9rem; margin-bottom: 8px; } .sidebar__cta-num { color: #ffeb3b; font-weight: 800; font-size: 1.2rem; } .sidebar__cta-hours { color: rgba(255,255,255,.7); font-size: .75rem; margin-top: 4px; } .sidebar__panel { border: 1px solid var(--divider); border-radius: 14px; overflow: hidden; } .sidebar__panel-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; color: #fff; font-weight: 700; font-size: .82rem; letter-spacing: .5px; } .sidebar__panel-head .material-symbols-outlined { font-size: 18px; } .sidebar__panel-head--green { background: linear-gradient(135deg, #2e7d32 0%, #43a047 100%); } .sidebar__panel-head--gold { background: linear-gradient(135deg, var(--secondary) 0%, #ffb04c 100%); } .sidebar__list { list-style: none; margin: 0; padding: 0; } .sidebar__list li { border-bottom: 1px solid var(--divider); } .sidebar__list li:last-child { border-bottom: none; } .sidebar__list a { display: block; padding: 10px 16px; font-size: .82rem; color: var(--text); text-decoration: none; } .sidebar__list a:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); } .sidebar__list a.is-active { background: color-mix(in srgb, var(--primary) 12%, transparent); border-right: 3px solid var(--primary); color: var(--primary); font-weight: 700; } .sidebar__list--gold a:hover { background: color-mix(in srgb, var(--secondary) 6%, transparent); } .sidebar__list--gold a.is-active { background: color-mix(in srgb, var(--secondary) 10%, transparent); border-right-color: var(--secondary); color: var(--secondary); } .sidebar__accred { border: 1px solid var(--divider); border-radius: 14px; padding: 20px; text-align: center; } .sidebar__accred-title { font-weight: 700; color: var(--primary); font-size: .82rem; margin-bottom: 10px; } /* ========================================================================== ABOUT / CONTACT / CGHS / GALLERY ========================================================================== */ .value-card { text-align: center; padding: 32px; border: 1px solid var(--divider); border-radius: 14px; background: var(--paper); height: 100%; transition: all .25s ease; } .value-card:hover { transform: translateY(-4px); border-color: var(--primary); } .value-card .material-symbols-outlined { font-size: 36px; color: var(--secondary); margin-bottom: 14px; } .value-card h3 { color: var(--primary); font-weight: 700; font-size: 1.15rem; margin-bottom: 10px; } .value-card p { color: var(--text-2); font-size: .9rem; } .team-card { border: 1px solid var(--divider); border-radius: 14px; overflow: hidden; background: var(--paper); } .team-card img { width: 100%; height: 280px; object-fit: cover; object-position: center; background: var(--tint); } .team-card__body { padding: 24px; } .team-card__name { font-weight: 700; font-size: 1.25rem; margin-bottom: 6px; } .team-card__role { color: var(--primary); font-weight: 700; font-size: .9rem; margin-bottom: 6px; } .team-card__exp { color: var(--text-2); font-size: .8rem; font-weight: 500; display: block; margin-bottom: 12px; } .about-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .about-photos img { width: 100%; height: 180px; object-fit: cover; object-position: center; background: var(--tint); border-radius: 12px; border: 1px solid var(--divider); } /* contact */ .contact-cols { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; } @media (max-width: 900px) { .contact-cols { grid-template-columns: 1fr; } } .contact-card { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border: 1px solid var(--divider); border-radius: 14px; background: var(--paper); } .contact-card__icon { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); } .contact-card__label { color: var(--text-2); font-weight: 700; letter-spacing: 1px; font-size: .72rem; } .contact-card p { margin: 4px 0 0; font-size: .9rem; } .contact-card p.strong { font-weight: 600; color: var(--text); } .contact-list { display: grid; gap: 16px; margin-bottom: 24px; } .nabh-banner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 24px; border-radius: 14px; background: var(--tint); border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent); margin-bottom: 48px; } .nabh-banner .material-symbols-outlined { color: var(--secondary); font-size: 32px; } .nabh-banner strong { font-weight: 700; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } } .form-grid .full { grid-column: 1 / -1; } .field-label { font-weight: 700; color: var(--text-2); font-size: .78rem; display: block; margin-bottom: 6px; } .input, .textarea { width: 100%; font-family: inherit; font-size: .95rem; color: var(--text); background: var(--bg); border: 1px solid var(--divider); border-radius: 10px; padding: 13px 14px; transition: border-color .2s; } .input:focus, .textarea:focus { outline: none; border-color: var(--primary); } .textarea { resize: vertical; min-height: 130px; } .field-help { font-size: .78rem; color: var(--text-2); margin-top: 6px; } .form-alert { display: none; align-items: center; gap: 10px; background: #e7f4e8; color: #1b5e20; border: 1px solid #b7dbb9; border-radius: 10px; padding: 14px 18px; font-weight: 600; margin-bottom: 20px; } .form-alert.is-visible { display: flex; } [data-theme="dark"] .form-alert { background: #14301a; color: #b6e2ba; border-color: #285c30; } .form-alert.is-error { background: #fdecea; color: #b71c1c; border-color: #f5c6cb; } [data-theme="dark"] .form-alert.is-error { background: #3a1513; color: #f3b6b1; border-color: #6b2b27; } /* cghs */ .cghs-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; } @media (max-width: 900px) { .cghs-cols { grid-template-columns: 1fr; } } .badge-card { text-align: center; padding: 32px; border-radius: 14px; background: var(--paper); border: 1.5px solid var(--divider); height: 100%; transition: all .25s ease; } .badge-card:hover { transform: translateY(-4px); } .badge-card .material-symbols-outlined { font-size: 36px; margin-bottom: 14px; } .badge-card h3 { font-weight: 700; font-size: 1.15rem; margin-bottom: 10px; } .badge-card p { color: var(--text-2); font-size: .9rem; } .steps-paper { padding: 32px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--primary) 15%, transparent); background: var(--tint); margin-bottom: 40px; } .step-row { display: flex; gap: 18px; margin-bottom: 20px; } .step-row:last-child { margin-bottom: 0; } .step-row__num { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .8rem; font-weight: 700; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); } .step-row p { margin: 0; font-size: .95rem; font-weight: 500; } /* gallery */ .gallery-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; } .filter-chip { cursor: pointer; border: none; font-family: inherit; font-weight: 600; font-size: .85rem; padding: 8px 18px; border-radius: 20px; background: color-mix(in srgb, var(--primary) 8%, transparent); color: var(--primary); } .filter-chip.is-active { background: var(--primary); color: #fff; } .gallery-grid { columns: 4; column-gap: 14px; } @media (max-width: 900px) { .gallery-grid { columns: 2; } } @media (max-width: 560px) { .gallery-grid { columns: 1; } } .gallery-item { position: relative; break-inside: avoid; margin-bottom: 14px; border-radius: 10px; overflow: hidden; cursor: pointer; } .gallery-item img { width: 100%; display: block; transition: filter .3s ease; } .gallery-item:hover img { filter: brightness(1.04); } .gallery-item__bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: linear-gradient(transparent, rgba(0,0,0,.75)); } .gallery-item__bar .t { color: #fff; font-weight: 600; font-size: .85rem; } .gallery-item__bar .c { color: #fff; background: rgba(245,127,23,.85); font-size: .7rem; font-weight: 600; padding: 3px 8px; border-radius: 12px; } /* Utility spacing */ .mb-0 { margin-bottom: 0; } .mt-4 { margin-top: 32px; } .lead { color: var(--text-2); line-height: 1.8; font-size: 1.02rem; margin-bottom: 20px; } .stack-list { list-style: none; padding: 0; margin: 0; } .stack-list li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; color: var(--text-2); font-size: .95rem; } .stack-list .material-symbols-outlined { color: var(--secondary); font-size: 18px; flex-shrink: 0; margin-top: 2px; } /* ========================================================================== FOOTER ========================================================================== */ .footer { margin-top: auto; color: #fff; background: linear-gradient(180deg, #35734A 0%, #245038 100%); padding-top: 56px; } [data-theme="dark"] .footer { background: linear-gradient(180deg, #212D26 0%, #18211C 100%); } .footer__grid { max-width: 1280px; margin: 0 auto; padding: 0 24px 40px; display: grid; grid-template-columns: 1.4fr 1fr 1.4fr 1.6fr; gap: 32px; } @media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; gap: 28px; } } .footer__col { min-width: 0; } .footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .footer__mark { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--secondary) 0%, #ffb04c 100%); display: flex; align-items: center; justify-content: center; } .footer__mark .material-symbols-outlined { color: #fff; font-size: 22px; } .footer__name { font-family: "Poppins", "Segoe UI", sans-serif; font-weight: 700; color: #fff; line-height: 1.1; } .footer__sub { color: var(--secondary); font-weight: 600; font-size: .72rem; letter-spacing: 1px; } .footer__desc { color: rgba(255,255,255,.75); font-size: .9rem; line-height: 1.7; margin: 0 0 18px; } .footer__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .footer__contact li { display: flex; align-items: flex-start; gap: 10px; color: rgba(255,255,255,.72); font-size: .8rem; line-height: 1.5; } .footer__contact .material-symbols-outlined { color: var(--secondary); font-size: 16px; flex-shrink: 0; margin-top: 2px; } .footer__contact em { color: var(--secondary); font-style: normal; } .footer__title { color: var(--secondary); font-weight: 700; font-size: .95rem; letter-spacing: 1px; text-transform: uppercase; margin: 0 0 16px; font-family: "Inter", sans-serif; } .footer__link { display: block; color: rgba(255,255,255,.72); text-decoration: none; font-size: .82rem; margin-bottom: 8px; transition: color .2s; } .footer__link:hover { color: var(--secondary); } /* Footer clinic locations row */ .footer__branches { border-top: 1px solid rgba(255,255,255,.15); padding: 30px 24px 10px; max-width: 1280px; margin: 0 auto; } .footer__title--center { text-align: center; margin-bottom: 22px; } .footer__branch-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; align-items: stretch; } .footer__branch { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 2px 30px; border-right: 1px solid rgba(255,255,255,.14); } .footer__branch:first-child { padding-left: 0; } .footer__branch:last-child { border-right: none; padding-right: 0; } .footer__branch-name { display: flex; align-items: center; gap: 8px; color: #fff; font-family: "Poppins", "Segoe UI", sans-serif; font-weight: 600; font-size: 1rem; margin-bottom: 8px; min-height: 26px; } .footer__branch-name .material-symbols-outlined { color: var(--secondary-light); font-size: 20px; flex-shrink: 0; } .footer__branch-addr { color: rgba(255,255,255,.72); font-size: .86rem; line-height: 1.6; margin: 0 0 14px; } .footer__branch-map { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; color: var(--secondary-light); font-size: .84rem; font-weight: 600; text-decoration: none; } .footer__branch-map .material-symbols-outlined { font-size: 18px; } .footer__branch-map:hover { color: #fff; text-decoration: underline; } @media (max-width: 760px) { .footer__branch-row { grid-template-columns: 1fr; gap: 0; } .footer__branch { border-right: none; border-bottom: 1px solid rgba(255,255,255,.14); padding: 18px 0; } .footer__branch:first-child { padding-top: 0; } .footer__branch:last-child { border-bottom: none; padding-bottom: 0; } } .footer__bar { border-top: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.2); padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .footer__bar span { color: rgba(255,255,255,.55); font-size: .78rem; } @media (max-width: 560px) { .footer__bar { flex-direction: column; text-align: center; } } /* ========================================================================== FLOATING WHATSAPP BUTTON ========================================================================== */ .whatsapp-fab { position: fixed; bottom: 24px; right: 24px; z-index: 1000; width: 56px; height: 56px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(37,211,102,.4); transition: background .2s, transform .2s; } .whatsapp-fab:hover { background: #20BA5A; transform: translateY(-2px); } .whatsapp-fab svg { width: 28px; height: 28px; fill: #fff; } @media (max-width: 560px) { .whatsapp-fab { width: 52px; height: 52px; bottom: 18px; right: 18px; } } /* Floating CALL button (sits above WhatsApp) */ .call-fab { position: fixed; bottom: 90px; right: 24px; z-index: 1000; width: 56px; height: 56px; border-radius: 50%; background: var(--secondary); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(166,128,63,.4); transition: background .2s, transform .2s; color: #fff; text-decoration: none; } .call-fab:hover { background: var(--secondary-light); transform: translateY(-2px); } .call-fab .material-symbols-outlined { font-size: 26px; } @media (max-width: 560px) { .call-fab { width: 52px; height: 52px; bottom: 80px; right: 18px; } } /* ========================================================================== QUICK-GLANCE CONVERSION BAR ========================================================================== */ .quickbar { background: var(--primary); } [data-theme="dark"] .quickbar { background: #24503c; } [data-theme="dark"] .quickbar__item--gold { background: #7a5f2e; } .quickbar__grid { display: grid; grid-template-columns: repeat(4, 1fr); } .quickbar__item { text-align: center; padding: 18px 12px; border-right: 1px solid rgba(255,255,255,.15); } .quickbar__item:last-child { border-right: 0; } .quickbar__item--gold { background: var(--secondary); } .quickbar__num { display: block; font-family: "Poppins", "Segoe UI", sans-serif; font-weight: 700; font-size: 1.5rem; color: #fff; line-height: 1.1; } .quickbar__lbl { display: block; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.85); margin-top: 3px; } @media (max-width: 560px) { .quickbar__grid { grid-template-columns: repeat(2, 1fr); } .quickbar__item { border-bottom: 1px solid rgba(255,255,255,.15); } .quickbar__num { font-size: 1.25rem; } .quickbar__lbl { font-size: .72rem; } } /* ========================================================================== CASHLESS 3-STEP STRIP ========================================================================== */ .cashless-strip { background: var(--tint); padding: 64px 0; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); } .cashless-strip__head { text-align: center; max-width: 640px; margin: 0 auto 40px; } .cashless-strip__head h2 { margin: 10px 0 12px; } .cashless-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .cashless-step { background: var(--paper); border: 1px solid var(--divider); border-radius: 14px; padding: 28px 24px; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; } .cashless-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .cashless-step__num { width: 46px; height: 46px; border-radius: 50%; background: var(--primary); color: #fff; font-family: "Poppins", "Segoe UI", sans-serif; font-weight: 700; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } [data-theme="dark"] .cashless-step__num { background: var(--primary-dark); color: var(--secondary); } .cashless-step h3 { color: var(--primary); font-size: 1.2rem; margin-bottom: 8px; } .cashless-step p { color: var(--text-2); font-size: .96rem; line-height: 1.6; margin: 0; } .cashless-strip__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 36px; } @media (max-width: 760px) { .cashless-steps { grid-template-columns: 1fr; } }