/* ========================================= HERO: Base (shared across viewports) ========================================= */ /* Height & image behavior */ #hero { min-height: 100vh; /* 🔧 CHANGED (was 80vh) */ } #hero .carousel, #hero .carousel-inner, #hero .carousel-item, #hero .hero-img { height: 100vh; } @media (min-width: 992px) { #hero, #hero .hero-img { height: 100vh; /* 🔧 CHANGED (was 92vh) */ min-height: 100vh; /* 🔧 CHANGED (was 92vh) */ } } #hero .hero-img { object-fit: cover; } /* Dark overlay above each slide image */ .hero-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35)); z-index: 1; display: block; } .text-section { color: #58b9c9; } /* Center captions vertically and keep above overlay */ .carousel-caption.hero-caption { top: 35%; left: 50%; bottom: auto; width: min(1100px, 92vw); transform: translate(-50%, -50%); z-index: 2; text-align: center; } /* Headline sizes (mobile → desktop) */ .hero-title { /* defaults; can be overridden with .font-unbounded */ letter-spacing: 0.3px; line-height: 0.8; } @media (min-width: 576px) { .hero-title { font-size: 2.6rem; } } @media (min-width: 992px) { .hero-title { font-size: 3.2rem; } } .section-title { /* defaults; can be overridden with .font-unbounded */ letter-spacing: 0.3px; font-size: 1.7rem; line-height: 1.1; } @media (min-width: 576px) { .section-title { font-size: 2.6rem; } } @media (min-width: 992px) { .section-title { font-size: 4rem; } } /* Accent color */ .text-accent { color: #046d7e; } /* Font helpers (you've loaded these in ) */ .font-unbounded { font-family: "Unbounded", sans-serif; } .font-dmsans { font-family: "DM Sans", sans-serif; } .font-poppins { font-family: "Poppins", sans-serif; } .font-inter { font-family: "Inter", sans-serif; } /* Brand filled button */ .btn-helply-primary { background: #2596be; border-color: #2c7c8a; color: #fff; } .btn-helply-primary:hover { background: #8c5780; border-color: #8c5780; color: #fff; } /* Keep outline pills readable on dark bg */ .btn-outline-light { --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(255, 255, 255, 0.12); } /* Comfortable touch size on phones */ .btn { min-height: 48px; } .background-color { background-color: #23697f; } /* ========================================= Small tablets (optional polish, unchanged desktop) ========================================= */ @media (min-width: 576px) and (max-width: 767.98px) { .carousel-caption.hero-caption { width: 85vw; } .hero-title { font-size: 2rem; line-height: 1.2; } .hero-caption p { font-size: 1.05rem; } } /* ========================================= Mobile-only tweaks (phones < 576px) ========================================= */ @media (max-width: 767.98px) { /* Fill the screen and keep image nicely cropped */ #hero, #hero .carousel, #hero .carousel-inner, #hero .carousel-item, #hero .hero-img { height: 100dvh; min-height: 100dvh; } /* Reposition caption for readability on small screens */ .carousel-caption.hero-caption { width: 92vw; left: 50%; top: auto; /* stop vertical centering */ bottom: 8%; /* sit above indicators */ transform: translateX(-50%); text-align: center; padding: 0 8px; } #hero .hero-img { min-height: 100vh; object-fit: cover; } .hero-caption h2 { line-height: 1.3; margin-bottom: 0.5rem !important; } .hero-title { font-size: 1.45rem; /* ~23px */ line-height: 1.25; word-break: break-word; hyphens: auto; } .hero-caption p { font-size: 0.95rem; line-height: 1.5; margin-top: 0.5rem; } .no-hover:hover { background-color: inherit !important; color: inherit !important; box-shadow: inherit !important; } .hero-caption .btn { width: 100%; min-width: 0 !important; padding: 0.85rem 1rem; font-size: 1rem; } .text-justify { text-align: justify; } .hero-caption .gap-3 { gap: 0.95rem !important; } .hero-caption .mt-3 { margin-top: 0.75rem !important; } .hero-caption .mt-4, .hero-caption .mt-5 { margin-top: 1rem !important; } /* Indicators smaller; hide arrows on tiny screens (remove these 2 rules if you prefer arrows) */ .carousel-indicators [data-bs-target] { width: 8px; height: 8px; } .carousel-control-prev, .carousel-control-next { display: none; } } @media (max-width: 576px) { .why-helply-section .container { padding-left: 1.5rem; padding-right: 1.5rem; text-align: center; } .why-helply-section h2, .why-helply-section h5, .why-helply-section p { margin-left: auto; margin-right: auto; } } @media (min-width: 768px) and (max-width: 991.98px) { /* ---------- NAVBAR ---------- */ /* make search usable on tablet without cramping buttons */ .navbar .search-form-container { width: 100%; margin-top: .5rem; } .navbar .search-container { position: static !important; width: 100%; } .navbar .search-container input { width: 100%; } .navbar .btn.btn-lg { padding: .5rem .9rem; font-size: 1rem; } /* ---------- HERO / CAROUSEL ---------- */ /* slightly reduce typography & ensure image covers nicely */ #hero .carousel-caption.hero-caption { bottom: 18%; } #hero .hero-title { line-height: 1.2; } #hero .display-5 { font-size: 2rem; } /* down from desktop size */ #hero .display-6 { font-size: 1.35rem; } /* make slide images shorter so caption + CTAs fit comfortably */ #hero .hero-img { min-height: 70vh !important; object-fit: cover; } /* 3 small buttons under headline → 2 per row on tablet */ #hero .row .col-md-3 { flex: 0 0 50%; max-width: 50%; } #hero .row .col-md-3:nth-child(3) { flex-basis: 100%; max-width: 100%; } /* desktop-only store CTA sits a bit high on smaller tablets */ #hero .store-cta { bottom: 8rem !important; } /* ---------- "WHY HELPLY" (intro paragraph) ---------- */ /* ---------- FEATURE CIRCLES (teal section) ---------- */ /* reduce giant circles (inline width:316px) for tablet */ .bg-third-section .ratio { width: 240px !important; } /* show 2 cards per row, last one full width & centered */ .bg-third-section .row > .col { flex: 0 0 50%; max-width: 50%; } .bg-third-section .row > .col:nth-child(3) { flex-basis: 100%; max-width: 100%; } /* tidy text sizes inside the teal cards */ .bg-third-section h5.fs-3 { font-size: 1.375rem !important; } .bg-third-section .font-dmsans.fs-4 { font-size: 1.125rem !important; } /* iPad / tablet only (portrait iPad Pro 1024px included) */ @media (min-width: 992px) and (max-width: 1199.98px) { /* show 2 cards per row; the 3rd wraps (keeps mobile & desktop untouched) */ .bg-third-section .row.row-cols-md-3 > * { flex: 0 0 50%; max-width: 50%; } /* tighten card padding a bit for tablet */ .bg-third-section .col .h-100 { padding: 1.5rem !important; /* overrides p-4 only at this breakpoint */ } /* scale down the circle image so three cards don't feel cramped when wrapping */ .bg-third-section .ratio.rounded-circle[style*="width: 316px"] { width: 260px !important; /* was 316px */ } /* slight type tweaks for headings and subtext inside this section only */ .bg-third-section h5.fs-3 { font-size: 1.5rem; } /* ~24px */ .bg-third-section .fs-4 { font-size: 1.125rem; } /* ~18px */ /* ensure wrapped last card stays centered nicely */ .bg-third-section .row.justify-content-center { justify-content: center !important; } } /* Tablet-only (iPad Mini, Air, Pro portrait/landscape) */ @media (min-width: 992px) and (max-width: 1199.98px) { /* Switch to 2-column grid instead of 3 cramped cards */ .row.row-cols-md-3 > * { flex: 0 0 50%; max-width: 50%; } /* Make the illustration images smaller so they breathe */ .row.row-cols-md-3 img { width: 260px !important; height: 210px !important; } /* Slightly smaller heading text */ .row.row-cols-md-3 h5.fs-3 { font-size: 1.5rem; /* ~24px */ } /* Slightly smaller paragraph text */ .row.row-cols-md-3 p.fs-4 { font-size: 1.125rem; /* ~18px */ line-height: 1.6; } /* Keep the 3rd card centered when it wraps to next row */ .row.justify-content-center { justify-content: center !important; } } /* ---------- "HOW IT WORKS" (3 steps with SVGs) ---------- */ /* shrink the big illustrations (inline 324×266) */ section .row .col article img[style*="width: 324px"] { width: 240px !important; height: auto !important; } section .row .col article h5.fs-3 { font-size: 1.375rem !important; } section .row .col article p.fs-4 { font-size: 1.125rem !important; } /* ---------- SPECIALIZED SUPPORT (cards) ---------- */ /* keep paragraphs readable without feeling oversized */ .card .font-dmsans.fs-4 { font-size: 1.125rem !important; } /* ---------- METRICS (24/7 / Confidential / 5★) ---------- */ .font-poppins.fs-6 { font-size: .95rem !important; } /* ========= TABLETS: iPad Mini/Air/Pro (992–1199.98px) ========= */ @media (min-width: 992px) and (max-width: 1199.98px) { /* soften heading sizes a bit for tablets */ .bg-seventh-section h2.display-5 { font-size: 2.25rem; } /* ~36px */ .bg-seventh-section p.fs-4 { font-size: 1.125rem; } /* ~18px */ /* tighten side padding inside the inner wrapper */ .bg-seventh-section > .px-5 { padding-left: 2rem !important; padding-right: 2rem !important; } /* card-like accordion items with breathing room */ #faqAccordion2 .accordion-item { border-radius: 14px; background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.06); overflow: hidden; } #faqAccordion2 .accordion-item + .accordion-item { margin-top: 1rem; } /* larger tap targets & balanced layout */ #faqAccordion2 .accordion-button { padding: 1.1rem 1.25rem; font-size: 1.125rem; /* ~18px */ line-height: 1.4; } #faqAccordion2 .accordion-body { padding: 0 1.25rem 1.1rem; font-size: 1rem; /* ~16px */ } /* nicer indicator icons (override Bootstrap’s arrow) */ #faqAccordion2 .accordion-button::after { background-image: none; content: "+"; font-weight: 700; transform: none !important; width: auto; height: auto; margin-left: auto; margin-right: 0; } #faqAccordion2 .accordion-button:not(.collapsed)::after { content: "–"; } /* keep the button background clean when expanded */ #faqAccordion2 .accordion-button:not(.collapsed) { background-color: #f7fbfc; /* subtle */ box-shadow: none; } } /* ========= MOBILE: up to 991.98px ========= */ @media (max-width: 991.98px) { /* scale down headings a touch to avoid wrapping */ .bg-seventh-section h2.display-5 { font-size: 2rem; } /* ~32px */ .bg-seventh-section p.fs-4 { font-size: 1.0625rem; } /* ~17px */ /* reduce inner horizontal padding for small screens */ .bg-seventh-section > .px-5 { padding-left: 1rem !important; padding-right: 1rem !important; } /* friendly, tappable accordion */ #faqAccordion2 .accordion-item { border-radius: 12px; background: #ffffff; box-shadow: 0 4px 14px rgba(0,0,0,0.06); overflow: hidden; margin-bottom: 0.75rem; } #faqAccordion2 .accordion-button { padding: 1rem 1rem; font-size: 1.0625rem; /* ~17px */ } #faqAccordion2 .accordion-body { padding: 0 1rem 1rem; font-size: 0.984rem; /* ~15.75px */ line-height: 1.6; } /* same + / – indicator as tablet */ #faqAccordion2 .accordion-button::after { background-image: none; content: "+"; font-weight: 700; transform: none !important; width: auto; height: auto; margin-left: auto; margin-right: 0; } #faqAccordion2 .accordion-button:not(.collapsed)::after { content: "–"; } #faqAccordion2 .accordion-button:not(.collapsed) { background-color: #f7fbfc; box-shadow: none; } } /* ======== DESKTOP (≥1200px) — NO CHANGES APPLIED ======== */ /* Intentionally left empty so your web/desktop view stays the same */ /* ---------- FAQ heading/body minor tighten ---------- */ .accordion-button.fs-5 { font-size: 1.05rem !important; } .accordion-body.font-inter { font-size: .98rem !important; } /* ===== iPad / Tablet only (Mini/Air/Pro) ===== */ @media (min-width: 992px) and (max-width: 1199.98px) { .footer-helply .row { text-align: center; /* center text */ justify-content: center !important; /* center columns */ } .footer-helply .row > div { flex: 0 0 100% !important; /* each section full-width */ max-width: 100% !important; } /* brand + badges centered */ .footer-helply h2, .footer-helply p, .footer-helply .d-flex.flex-wrap { justify-content: center !important; } /* lists centered */ .footer-helply ul { display: inline-block; /* shrink to fit content */ text-align: left; /* keep list items aligned neatly */ } /* social icons centered in a row */ .footer-helply .d-flex.flex-nowrap { justify-content: center !important; gap: 1rem; } } /* ===== Tablets: iPad Mini, Air, Pro (768–1199.98px) ===== */ @media (min-width: 768px) and (max-width: 1199.98px) { .footer-helply .row { text-align: center; justify-content: center !important; } .footer-helply .row > div { flex: 0 0 100% !important; max-width: 100% !important; } /* brand + badges centered */ .footer-helply h2, .footer-helply p, .footer-helply .d-flex.flex-wrap { justify-content: center !important; } /* lists centered as a block, but keep items left-aligned */ .footer-helply ul { display: inline-block; text-align: left; } /* social icons centered */ .footer-helply .d-flex.flex-nowrap { justify-content: center !important; gap: 1rem; } } }