/* styles.css — Medical Rescue Shared stylesheet for all 5 pages (Avaleht, Koolitused, Broneerimine, Meist & Arvustused, Kontakt). One file, edited once, used everywhere. Design tokens (colors/fonts/spacing) live in :root at the top — change a value there and it updates across the whole site. Everything below the token block is built only from those variables, never raw hex codes. Sections: 1) Tokens & reset 2) Typography 3) Layout helpers 4) Buttons 5) Top info bar 6) Header / nav 7) Footer 8) Reusable components 9) Page-specific blocks 10) Animations 11) Responsive breakpoints */ /* ===================== 1. DESIGN TOKENS & RESET ===================== */ :root { /* Navy scale (darkest → lightest) */ --navy-900: #04204a; --navy-800: #062e66; --navy-700: #083c85; --navy-600: #0a4fb0; --blue-500: #1463f3; /* primary blue */ --blue-400: #3b82f6; --blue-300: #93b8fb; --blue-200: #c2d6fc; --blue-100: #dbe7fb; --blue-50: #eff4fe; /* lightest background */ /* Emergency-red accents — use sparingly, for "112" cues & key highlights */ --red: #d8232a; --red-dark: #b01217; /* Surfaces */ --white: #ffffff; /* Fonts (loaded via Google Fonts in each page's ) */ --font-display: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace; /* Semantic aliases — the rest of this file only ever references these */ --color-bg: var(--white); --color-bg-alt: var(--blue-50); --color-heading: var(--navy-900); --color-body: #44546b; --color-body-on-navy: var(--blue-100); --color-border: var(--blue-100); --color-primary: var(--blue-500); --color-primary-hover: var(--navy-600); --color-emergency: var(--red); --color-emergency-hover: var(--red-dark); /* Shape & elevation */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-full: 999px; --shadow-sm: 0 1px 3px rgba(4, 32, 74, 0.07), 0 1px 2px rgba(4, 32, 74, 0.09); --shadow-md: 0 10px 28px rgba(4, 32, 74, 0.10); --shadow-lg: 0 26px 54px rgba(4, 32, 74, 0.15); --transition: 0.2s ease; --container-width: 1200px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 110px; } body { font-family: var(--font-body); color: var(--color-body); background: var(--color-bg); line-height: 1.65; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; } /* ===================== 2. TYPOGRAPHY ===================== */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; color: var(--color-heading); letter-spacing: -0.01em; } h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); } h2 { font-size: clamp(1.8rem, 3.1vw, 2.5rem); } h3 { font-size: 1.3rem; } h4 { font-size: 1.05rem; } p { color: var(--color-body); } .mono { font-family: var(--font-mono); } .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 0.9rem; } .section-heading { max-width: 700px; margin-bottom: 2.5rem; } .section-heading p { margin-top: 0.85rem; font-size: 1.05rem; } .section-heading.center { margin-left: auto; margin-right: auto; text-align: center; } /* ===================== 3. LAYOUT HELPERS ===================== */ .container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 24px; } .section { padding: 5rem 0; } .section--alt { background: var(--color-bg-alt); } .section--navy { background: var(--navy-900); } .section--navy h2, .section--navy h3, .section--navy h4 { color: var(--white); } .section--navy p { color: var(--color-body-on-navy); } .grid { display: grid; gap: 2rem; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .text-center { text-align: center; } .mt-lg { margin-top: 3rem; } /* ===================== 4. BUTTONS ===================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.85rem 1.8rem; border-radius: var(--radius-full); font-weight: 600; font-size: 0.97rem; border: 2px solid transparent; transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition); white-space: nowrap; } .btn-primary { background: var(--color-primary); color: var(--white); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--color-primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-outline { background: transparent; border-color: var(--navy-900); color: var(--navy-900); } .btn-outline:hover { background: var(--navy-900); color: var(--white); transform: translateY(-2px); } .btn-outline-light { background: transparent; border-color: rgba(255, 255, 255, 0.5); color: var(--white); } .btn-outline-light:hover { background: var(--white); color: var(--navy-900); border-color: var(--white); transform: translateY(-2px); } .btn-emergency { background: var(--color-emergency); color: var(--white); } .btn-emergency:hover { background: var(--color-emergency-hover); transform: translateY(-2px); } .btn-sm { padding: 0.6rem 1.35rem; font-size: 0.9rem; } .btn-block { width: 100%; } /* ===================== 5. TOP INFO BAR ===================== */ .top-bar { background: var(--navy-900); color: var(--blue-100); } .top-bar .container { display: flex; align-items: center; justify-content: space-between; height: 40px; font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.02em; } .top-bar .top-bar-right { display: flex; align-items: center; gap: 0.4rem; color: var(--blue-200); } /* ===================== 6. HEADER / NAV ===================== */ .site-header { position: sticky; top: 0; z-index: 1000; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); transition: box-shadow var(--transition); } .site-header.is-scrolled { box-shadow: var(--shadow-sm); } .navbar { display: flex; align-items: center; justify-content: space-between; height: 76px; } .brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--navy-900); } .brand-mark { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .brand-mark svg { width: 20px; height: 20px; } .brand-name span { display: block; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; color: var(--color-body); letter-spacing: 0.04em; text-transform: uppercase; } .nav-links { display: flex; align-items: center; gap: 2.1rem; } .nav-links a { font-weight: 600; font-size: 0.95rem; color: var(--navy-900); position: relative; padding: 0.4rem 0; transition: color var(--transition); } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--color-primary); transition: width var(--transition); } .nav-links a:hover { color: var(--color-primary); } .nav-links a:hover::after { width: 100%; } .nav-links a.active { color: var(--color-primary); } .nav-links a.active::after { width: 100%; } .nav-cta { display: flex; align-items: center; gap: 1.5rem; } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; background: transparent; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); } .nav-toggle span { display: block; width: 20px; height: 2px; margin: 0 auto; background: var(--navy-900); transition: transform var(--transition), opacity var(--transition); } .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-nav { display: none; } /* ===================== 7. FOOTER ===================== */ .site-footer { background: var(--navy-900); color: var(--blue-100); padding: 4rem 0 0; } .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .footer-brand .brand { color: var(--white); margin-bottom: 1rem; } .footer-brand p { color: var(--blue-100); font-size: 0.92rem; max-width: 280px; } .footer-emergency { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.1rem; padding: 0.5rem 0.9rem; border: 1px solid rgba(216, 35, 42, 0.4); background: rgba(216, 35, 42, 0.12); border-radius: var(--radius-full); font-size: 0.8rem; font-weight: 600; color: #ffb3b3; } .footer-emergency .mono { color: var(--white); font-weight: 700; } .footer-col h4 { color: var(--white); font-size: 0.95rem; margin-bottom: 1.1rem; letter-spacing: 0.02em; } .footer-col ul li { margin-bottom: 0.7rem; } .footer-col ul li a, .footer-col ul li { font-size: 0.92rem; color: var(--blue-100); transition: color var(--transition); } .footer-col ul li a:hover { color: var(--blue-300); } .newsletter-form { display: flex; gap: 0.5rem; margin-top: 0.75rem; } .newsletter-form input[type="email"] { flex: 1; min-width: 0; padding: 0.65rem 0.9rem; border-radius: var(--radius-sm); border: 1.5px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: var(--white); font-size: 0.88rem; } .newsletter-form input[type="email"]::placeholder { color: #8aa0c2; } .newsletter-form button { flex-shrink: 0; padding: 0.65rem 1.1rem; border-radius: var(--radius-sm); border: none; background: var(--color-primary); color: var(--white); font-weight: 600; font-size: 0.88rem; transition: background var(--transition); } .newsletter-form button:hover { background: var(--blue-400); } .newsletter-note { display: none; margin-top: 0.6rem; font-size: 0.8rem; color: var(--blue-300); } .newsletter-note.visible { display: block; } .footer-bottom { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 0; font-size: 0.85rem; color: #7f96bd; } /* ===================== 8. REUSABLE COMPONENTS ===================== */ /* Image / video placeholder block — visually obvious, labeled, offline-safe */ .img-placeholder { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; text-align: center; background: var(--color-bg-alt); border: 2px dashed var(--blue-200); border-radius: var(--radius-md); color: var(--color-body); padding: 2rem 1.25rem; min-height: 240px; } .img-placeholder svg { width: 38px; height: 38px; color: var(--blue-300); } .img-placeholder .ph-label { font-family: var(--font-mono); font-weight: 600; font-size: 0.8rem; color: var(--navy-900); text-transform: uppercase; letter-spacing: 0.03em; } .img-placeholder .ph-desc { font-size: 0.85rem; max-width: 340px; color: var(--color-body); } .img-placeholder .ph-dims { font-family: var(--font-mono); font-size: 0.72rem; color: var(--blue-400); } .img-placeholder--tall { min-height: 380px; } .img-placeholder--short { min-height: 160px; } .img-placeholder--square { min-height: 280px; aspect-ratio: 1/1; } .video-placeholder { position: relative; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--navy-900), var(--navy-700)); border: 1px solid var(--navy-700); min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; color: var(--blue-100); text-align: center; padding: 2rem; } .video-placeholder .play-btn { width: 72px; height: 72px; border-radius: 50%; background: var(--white); color: var(--navy-900); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); transition: transform var(--transition); } .video-placeholder:hover .play-btn { transform: scale(1.08); } .video-placeholder .play-btn svg { width: 26px; height: 26px; } .video-placeholder .ph-label { font-family: var(--font-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--white); font-weight: 600; } .video-placeholder .ph-desc { color: var(--blue-200); font-size: 0.88rem; max-width: 420px; } /* Cards */ .card { background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .card-icon { width: 52px; height: 52px; border-radius: var(--radius-sm); background: var(--blue-50); color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; } .card-icon svg { width: 26px; height: 26px; } .card h3 { margin-bottom: 0.6rem; } .card p { font-size: 0.95rem; margin-bottom: 1.25rem; } .card-link { font-weight: 700; color: var(--color-primary); font-size: 0.92rem; display: inline-flex; align-items: center; gap: 0.35rem; transition: gap var(--transition); } .card-link:hover { gap: 0.6rem; } /* Stat / rating chips (hero) */ .hero-meta { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: 2rem; } .hero-meta-item { display: flex; align-items: center; gap: 0.6rem; } .hero-meta-item .stars { color: #f59e0b; font-size: 0.95rem; } .hero-meta-item .value { font-family: var(--font-mono); font-weight: 700; color: var(--navy-900); font-size: 0.95rem; } .hero-meta-item .label { font-size: 0.82rem; color: var(--color-body); } /* Emergency callout — sparing use of red */ .emergency-callout { display: flex; align-items: flex-start; gap: 1rem; background: #fdecec; border: 1px solid #f6c5c5; border-radius: var(--radius-md); padding: 1.25rem 1.5rem; } .emergency-callout .icon { width: 38px; height: 38px; border-radius: 50%; background: var(--color-emergency); color: var(--white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font-mono); font-weight: 700; font-size: 0.8rem; } .emergency-callout p { color: var(--navy-900); font-size: 0.92rem; margin: 0; } .emergency-callout strong { color: var(--red-dark); } /* Checklist ("Mida sa õpid") */ .checklist { display: grid; gap: 0.75rem; margin: 1.5rem 0; } .checklist li { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.95rem; color: var(--color-body); } .checklist li svg { width: 20px; height: 20px; color: var(--color-primary); flex-shrink: 0; margin-top: 0.1rem; } /* Stats bar */ .stats-bar { background: var(--navy-900); padding: 3rem 0; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; } .stat-number { font-family: var(--font-mono); font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; color: var(--white); } .stat-label { margin-top: 0.4rem; font-size: 0.9rem; color: var(--blue-100); } /* ===================== 9. PAGE-SPECIFIC BLOCKS ===================== */ /* Hero */ .hero { padding: 3.5rem 0 5rem; background: linear-gradient(180deg, #ffffff 0%, var(--blue-50) 100%); } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; align-items: center; } .hero h1 { margin-bottom: 1.25rem; } .hero .lead { font-size: 1.15rem; max-width: 540px; margin-bottom: 2rem; } .hero-actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } /* Page header (non-home pages) */ .page-header { background: var(--navy-900); padding: 3.5rem 0; text-align: center; } .page-header .eyebrow { color: var(--blue-300); justify-content: center; } .page-header h1 { color: var(--white); margin-bottom: 0.75rem; } .page-header p { color: var(--blue-100); max-width: 640px; margin: 0 auto; } /* Business band (Ettevõttele & Autokoolile, Avaleht) */ .business-band { background: linear-gradient(135deg, var(--navy-900), var(--navy-700)); border-radius: var(--radius-lg); padding: 3rem; display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.5rem; align-items: center; } .business-band h2 { color: var(--white); } .business-band p { color: var(--blue-100); } .business-band-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; } /* Courses page */ .course-block { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; padding: 3.5rem 0; border-bottom: 1px solid var(--color-border); } .course-block:last-of-type { border-bottom: none; } .course-block.is-reversed .course-text { order: 2; } .course-block.is-reversed .course-media { order: 1; } .course-meta { display: flex; gap: 1.75rem; margin: 1.5rem 0; flex-wrap: wrap; } .course-meta-item { display: flex; flex-direction: column; gap: 0.2rem; } .course-meta-item .label { font-family: var(--font-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-body); font-weight: 600; } .course-meta-item .value { font-weight: 700; color: var(--navy-900); font-size: 1rem; } .course-meta-item .value.price { color: var(--color-primary); } .course-callout { background: var(--color-bg-alt); border-left: 4px solid var(--color-primary); border-radius: var(--radius-sm); padding: 1rem 1.25rem; font-size: 0.92rem; color: var(--navy-900); margin-bottom: 1.5rem; } .course-callout strong { color: var(--navy-900); } /* Booking page */ .booking-tabs { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin: -1.5rem 0 0; position: relative; top: -1.5rem; } .booking-tabs a { background: var(--white); border: 1.5px solid var(--color-border); border-radius: var(--radius-full); padding: 0.7rem 1.4rem; font-weight: 600; font-size: 0.92rem; box-shadow: var(--shadow-sm); transition: border-color var(--transition), color var(--transition), transform var(--transition); } .booking-tabs a:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); } .booking-section { padding: 4rem 0; border-bottom: 1px solid var(--color-border); } .booking-section:last-of-type { border-bottom: none; } .booking-section-head { max-width: 700px; margin: 0 auto 2rem; text-align: center; } .booking-cap-badge { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--blue-50); color: var(--navy-600); font-family: var(--font-mono); font-weight: 600; font-size: 0.8rem; padding: 0.4rem 0.9rem; border-radius: var(--radius-full); margin-top: 1rem; } /* Cal.com inline embed mount point (booking calendars on broneerimine.html, and the routing-form contact embed on kontakt.html). Cal.com's script replaces the contents with a real iframe once it loads; the dashed border + background only show briefly, or if JS fails to load. */ .cal-inline-embed { max-width: 900px; margin: 0 auto; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--color-bg-alt); border: 2px dashed var(--blue-200); display: flex; align-items: center; justify-content: center; } /* About page */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; } .about-grid p + p { margin-top: 1rem; } .lead-quote { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--navy-900); line-height: 1.4; margin-bottom: 1.25rem; } .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; margin-top: 2.5rem; } /* Reviews */ .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } .review-card { background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.75rem; box-shadow: var(--shadow-sm); } .stars { color: #f59e0b; font-size: 1rem; letter-spacing: 0.1em; margin-bottom: 0.85rem; } .review-text { font-size: 0.94rem; color: var(--navy-900); margin-bottom: 1.25rem; } .review-meta { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--color-border); padding-top: 1rem; } .review-name { font-weight: 700; color: var(--navy-900); font-size: 0.92rem; } .review-date { font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-body); } /* Contact page */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; } .contact-info-card { background: var(--navy-900); color: var(--white); border-radius: var(--radius-lg); padding: 2.5rem; } .contact-info-card h3 { color: var(--white); } .contact-info-row { display: flex; gap: 1rem; align-items: flex-start; margin-top: 1.5rem; } .contact-info-row .icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-info-row .icon svg { width: 18px; height: 18px; color: var(--blue-300); } .contact-info-row .label { font-family: var(--font-mono); font-size: 0.76rem; color: var(--blue-200); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.15rem; } .contact-info-row .value { font-weight: 600; font-size: 0.98rem; } .locations-list { display: flex; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; } .location-chip { background: rgba(255, 255, 255, 0.1); border-radius: var(--radius-full); padding: 0.45rem 1rem; font-size: 0.85rem; font-weight: 600; } .map-placeholder { margin-top: 2rem; height: 260px; border-radius: var(--radius-md); background: var(--color-bg-alt); border: 2px dashed var(--blue-200); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; color: var(--color-body); text-align: center; padding: 1.5rem; } .contact-form-card { background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 2.5rem; box-shadow: var(--shadow-md); } /* ===================== 10. ANIMATIONS ===================== */ [data-animate] { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; } [data-animate].is-visible { opacity: 1; transform: translateY(0); } /* ===================== 11. RESPONSIVE ===================== */ @media (max-width: 1024px) { .hero-grid, .about-grid, .contact-grid, .business-band { grid-template-columns: 1fr; } .hero-grid .hero-media { order: -1; } .footer-grid { grid-template-columns: 1fr 1fr; } .grid-3, .reviews-grid, .values-grid { grid-template-columns: repeat(2, 1fr); } .course-block, .course-block.is-reversed { grid-template-columns: 1fr; } .course-block .course-text, .course-block.is-reversed .course-text, .course-block.is-reversed .course-media { order: 0; } } @media (max-width: 768px) { .top-bar .container { flex-direction: column; height: auto; padding: 0.5rem 24px; gap: 0.2rem; } .nav-links, .nav-cta .btn { display: none; } .nav-toggle { display: flex; } .nav-cta { gap: 0.75rem; } .mobile-nav { display: none; flex-direction: column; background: var(--white); border-top: 1px solid var(--color-border); padding: 1.25rem 24px 1.75rem; gap: 1.1rem; } .mobile-nav.is-open { display: flex; } .mobile-nav a { font-weight: 600; font-size: 1rem; color: var(--navy-900); } .mobile-nav a.active { color: var(--color-primary); } .mobile-nav .btn { margin-top: 0.5rem; } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; } .footer-grid { grid-template-columns: 1fr; gap: 2rem; } .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; } .business-band { padding: 2rem; } .section { padding: 3.5rem 0; } } @media (max-width: 640px) { .grid-3, .grid-2, .reviews-grid, .values-grid { grid-template-columns: 1fr; } .hero { padding: 2.5rem 0 3rem; } .hero-actions { flex-direction: column; align-items: flex-start; gap: 1rem; } .hero-meta { flex-direction: column; gap: 0.85rem; } .booking-tabs { flex-direction: column; align-items: stretch; top: 0; margin-top: 1.5rem; } .booking-tabs a { text-align: center; } .newsletter-form { flex-direction: column; } }