/* ========================================================= PERFORMANCE FIX (KEEP YOUR COMMENT STYLE) --------------------------------------------------------- ❗ Best practice: don’t use @import for Google Fonts in CSS because it blocks rendering. Put the font in . Recommended in HTML : If you MUST keep @import, it will still work—just slower. ========================================================= */ /* @import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;1,600&display=swap"); */ /* ========================================================= PACIFIC MAIDS — style.css PURPOSE: One master stylesheet for the website (ordered sections). WHAT'S INSIDE THIS FILE (TABLE OF CONTENTS / PRESENTATION) ---------------------------------------------------------------- 0) CSS Variables + Global Base - Brand colors, shadows, radius, typography defaults - Base resets (box-sizing, body, images, links) - List behavior (Bootstrap-safe), headings, spacing - Accessibility focus styles + reduced motion 1) Preloader - Fullscreen loading spinner + hide utility 2) Navbar + Logo (Big Logo / Short Navbar) - Desktop navbar sizing + big logo overflow rules - Tablet + mobile navbar sizing - Collapsed menu overlay (prevents mixing with page content) - Dropdown hover on desktop + dropdown styling - Scrollable collapse panel (max-height) 3) Hero - Headline typography - Hero image styling + hover effects - Responsive sizing 4) Buttons - Primary CTA button - Footer quote button variants + focus styles 5) Why Book With Us - Badge, cards, list bullets (scoped) - Responsive typography tweaks 6) Services - Service cards, icon hover effects - Responsive title sizing 7) Residential CTA - Badge, checklist, trust pills, CTA card - Responsive spacing and typography 8) Testimonials - Carousel styling - Title underline hover effect 9) Cookie Notice - Fixed bottom cookie bar + responsive layout 10) Footer - Footer grid, links, social icons, legal bar 11) Scroll To Top - Floating button (fixed position) 12) Chat Popup - Floating chat toggle + chat window UI 13) Bullets in "content" areas - Scoped ul/ol styles for blog/article blocks ---------------------------------------------------------------- NOTES / RULES: - Keep sections ordered for easier maintenance. - Avoid global list-style removal (Bootstrap depends on lists). - Prefer editing only variables + "EDIT HERE" comments for layout. ========================================================= */ /* ========================================================= 0) CSS VARIABLES + GLOBAL BASE (CLEAN + CONSISTENT) NOTES: - These variables power colors, shadows, and spacing across the site. - The navbar/logo variables below are kept for compatibility, even if you also use the "EDIT HERE" values in Section 2. ========================================================= */ :root{ --text: #3b4045; --muted: #6c757d; --heading: #1d3557; --brand: #f9a743; --brand-dark: #d7560b; --primary: #4a6fa5; --success: #198754; --bg: #ffffff; --bg-soft: #f7f9fc; --border: rgba(0,0,0,0.08); --shadow-sm: 0 6px 14px rgba(0,0,0,0.06); --shadow-md: 0 12px 28px rgba(0,0,0,0.10); --shadow-lg: 0 18px 50px rgba(0,0,0,0.22); --radius-sm: 12px; --radius-md: 16px; --radius-lg: 18px; /* NAVBAR stays short (layout height) */ --nav-height-desktop: 93px; --nav-height-tablet: 85px; --nav-height-mobile: 77px; /* LOGO can be ANY size you want (visual height) */ --logo-height-desktop: 160px; /* change freely */ --logo-height-tablet: 150px; /* change freely */ --logo-height-mobile: 140px; /* change freely */ /* Where the logo sits inside the short navbar */ --logo-offset-top-desktop: -18px; /* negative = hang out above */ --logo-offset-top-tablet: -14px; --logo-offset-top-mobile: -10px; } /* ================== Original code (kept as comment) ====== FIXED: Your old comment block had nested comment tokens inside another comment block, which BREAKS the CSS. If you ever want to revert, here are the original values (as text): NAVBAR stays short (layout height) - --nav-height-desktop: 92px; - --nav-height-tablet: 84px; - --nav-height-mobile: 76px; LOGO can be ANY size you want (visual height) - --logo-height-desktop: 160px; (change freely) - --logo-height-tablet: 150px; (change freely) - --logo-height-mobile: 140px; (change freely) Where the logo sits inside the short navbar - --logo-offset-top-desktop: -18px; (negative = hang out above) - --logo-offset-top-tablet: -14px; - --logo-offset-top-mobile: -10px; ========================================================= */ html{ overflow-x: hidden; } *, *::before, *::after{ box-sizing: border-box; } body{ margin: 0; color: var(--text); font-family: "Josefin Sans", sans-serif; font-size: 16px; line-height: 1.6; font-weight: 300; background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img{ max-width: 100%; height: auto; display: block; } /* Links NOTES: - Keep transitions light for a clean feel. */ a{ transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease; } /* Keep underline removed, but DO NOT wipe focus state */ a, a:active{ text-decoration: none; } /* IMPORTANT FIX: Do NOT remove bullets globally. Bootstrap uses lists. Keep default browser padding/margins, then style only where needed. */ ul,ol{ margin: 0 0 1rem; padding-left: 1.25rem; } /* Default headings */ h1,h2,h3,h4,h5,h6{ margin: 0; font-weight: 700; color: var(--heading); } h1,.h1{ font-size: clamp(2.1rem, 4vw, 2.75rem); line-height: 1.15; } h2,.h2{ font-size: clamp(1.6rem, 3vw, 2rem); line-height: 1.2; } h3,.h3{ font-size: 1.35rem; line-height: 1.25; } h4,.h4{ font-size: 1.15rem; line-height: 1.3; font-weight: 600; } p{ margin: 0 0 1rem; font-size: 1rem; line-height: 1.7; color: var(--text); } /* Your theme section spacing */ .section{ padding: 100px 0; } /* Accessibility: visible focus NOTES: - Keep :focus-visible for keyboard users. */ :focus-visible{ outline: 3px solid rgba(74,111,165,0.35); outline-offset: 3px; } /* Keep Bootstrap button focus usable */ .btn:focus, .btn:active:focus{ box-shadow: 0 0 0 .2rem rgba(74,111,165,0.25); } /* WOW */ .wow{ visibility: hidden; } /* Reduce motion NOTES: - Disables animations/transitions for users who prefer reduced motion. */ @media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ========================================================= 1) PRELOADER NOTES: - Use .preloader.hidden to hide it after page load. ========================================================= */ .preloader{ position: fixed; inset: 0; background-color: #ffffff; z-index: 9999; display: flex; align-items: center; justify-content: center; pointer-events: none; } .preloader.hidden{ display: none; } .preloader::after{ content: ""; width: 50px; height: 50px; border: 6px solid #ccc; border-top-color: #0d6efd; border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin{ to{ transform: rotate(360deg); } } /* ========================================================= 2) NAVBAR + LOGO (EDITABLE HEIGHT + SPACE UNDER LOGO) ========================================================= */ /* Header wrapper must sit above page content */ header.navigation{ position: relative; z-index: 1050; background: #fff; } /* ========================================================= EDIT HERE (DESKTOP) FIXED: The original had BOTH variables AND hard-coded heights. To prevent mismatch bugs, we now use the variables everywhere. ========================================================= */ .navigation .navbar{ display: flex; align-items: center; padding: 0; height: var(--nav-height-desktop); min-height: var(--nav-height-desktop); position: relative; overflow: visible; background: #fff; } /* Container spacing */ .navigation .navbar .container, .navigation .navbar .container-fluid{ padding-top: 0; padding-bottom: 0; } /* Brand slot must match navbar height */ .navigation .navbar-brand{ position: relative; height: var(--nav-height-desktop); display: flex; align-items: center; padding: 0 !important; margin: 0; line-height: 1; overflow: visible; flex: 0 0 auto; min-width: 240px; /* keep menu from overlapping logo */ } /* Logo is absolute so it won't change navbar height */ .navigation .logo-img{ position: absolute; left: 0; top: var(--logo-offset-top-desktop); height: var(--logo-height-desktop); width: auto; max-width: 100%; object-fit: contain; display: block; pointer-events: none; } /* Fallback if image doesn't have .logo-img */ .navigation .navbar-brand img:not(.logo-img){ position: absolute; left: 0; top: var(--logo-offset-top-desktop); height: var(--logo-height-desktop); width: auto; max-width: 100%; object-fit: contain; display: block; pointer-events: none; } /* Toggler */ .navigation .navbar-toggler{ margin-left: auto; flex: 0 0 auto; z-index: 1060; } /* Nav links */ .navigation .nav-link{ font-size: 19px; font-weight: 600; padding: 10px 20px !important; } .navigation .navbar-light .navbar-nav .nav-link{ color: #030303; } .navigation .navbar-light .navbar-nav .nav-link:hover, .navigation .navbar-light .navbar-nav .nav-link.active{ color: var(--brand); } /* Dropdown menus */ .navigation .dropdown-menu{ padding: 0; border: 0; border-radius: 0; background-color: #f5f5f5; } /* Desktop hover dropdown */ @media (min-width: 992px){ .navigation .dropdown-menu{ transition: opacity 0.2s ease, visibility 0s linear 0.2s, transform 0.2s linear; display: block; visibility: hidden; opacity: 0; min-width: 200px; margin-top: 8px; } .navigation .dropdown:hover > .dropdown-menu{ visibility: visible; opacity: 1; transition: opacity 0.25s ease; } .navigation .navbar-collapse{ justify-content: flex-end; } } /* ========================================================= EDIT HERE (TABLET <= 991px) ========================================================= */ @media (max-width: 991px){ .navigation .navbar{ height: var(--nav-height-tablet); min-height: var(--nav-height-tablet); } .navigation .navbar-brand{ height: var(--nav-height-tablet); min-width: 200px; max-width: calc(100% - 72px); } .navigation .logo-img{ top: var(--logo-offset-top-tablet); height: var(--logo-height-tablet); } .navigation .navbar-brand img:not(.logo-img){ top: var(--logo-offset-top-tablet); height: var(--logo-height-tablet); } .navigation .navbar-toggler{ position: absolute; right: 12px; top: 50%; transform: translateY(-50%); } .navigation .navbar-collapse{ position: absolute; top: 100%; left: 0; right: 0; background: #fff; z-index: 1055; box-shadow: 0 14px 30px rgba(0,0,0,0.12); border-top: 1px solid rgba(0,0,0,0.08); padding: 12px 16px 16px; } .navigation .dropdown-menu{ text-align: center; float: none !important; width: 100%; margin: 0; background: #f5f5f5; } } /* ========================================================= EDIT HERE (PHONES <= 576px) ========================================================= */ @media (max-width: 576px){ .navigation .navbar{ height: var(--nav-height-mobile); min-height: var(--nav-height-mobile); } .navigation .navbar-brand{ height: var(--nav-height-mobile); min-width: 180px; } .navigation .logo-img{ top: var(--logo-offset-top-mobile); height: var(--logo-height-mobile); } .navigation .navbar-brand img:not(.logo-img){ top: var(--logo-offset-top-mobile); height: var(--logo-height-mobile); } .navigation .navbar-collapse{ padding: 10px 14px 14px; } } /* Dropdown item */ .navigation .dropdown-item{ color: #444; padding: 0.6rem 1rem 0.35rem; font-weight: 700; font-size: 15px; } .navigation .dropdown-item:hover, .navigation .dropdown-item.active{ background: var(--brand); color: #fff; } /* Scrolling inside collapse FIXED: Use variables so it never goes out-of-sync. */ .navigation .navbar-collapse.show{ overflow-y: auto; overflow-x: hidden; max-height: calc(100vh - var(--nav-height-desktop)); } @media (max-width: 991px){ .navigation .navbar-collapse.show{ max-height: calc(100vh - var(--nav-height-tablet)); } } @media (max-width: 576px){ .navigation .navbar-collapse.show{ max-height: calc(100vh - var(--nav-height-mobile)); } } /* ========================================================= 3) HERO FIXED: Removed duplicate selector overlap. ========================================================= */ .hero-content{ max-width: 700px; } .hero-first{ font-size: 3.75rem; font-weight: 800; line-height: 1.1; color: var(--heading); margin: 0 0 0.75rem; } .hero-two{ font-size: 1.6rem; font-weight: 300; line-height: 1.5; color: var(--text); margin: 0 0 1.25rem; } @media (max-width: 991px){ .hero-first{ font-size: 3.0rem; } .hero-two{ font-size: 1.5rem; } } @media (max-width: 576px){ .hero-first{ font-size: 2.4rem; } .hero-two{ font-size: 1.4rem; } } @media (max-width: 400px){ .hero-first{ font-size: 2.2rem; } .hero-two{ font-size: 1.4rem; } } /* If your hero image also uses .img-fluid, no problem—this targets both. If you want ONLY specific images, keep only .faded-image. */ .hero .img-fluid, .faded-image{ border-radius: 10px; box-shadow: 0 0 40px rgba(255,255,255,0.6); transition: transform 0.3s ease, box-shadow 0.3s ease; } .hero .img-fluid:hover, .faded-image:hover{ transform: translateY(-2px); box-shadow: 0 12px 36px rgba(0,0,0,0.12); } .hero-image{ background-image: linear-gradient(rgba(0,0,0,0.10), rgba(0,0,0,0.10)), url("../../images/maid02.png"); height: 70vh; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; filter: saturate(1.4) contrast(1.2) brightness(1.1); overflow: hidden; } .hero .hero-btn{ font-size: 16px; font-weight: 700; padding: 10px 16px; border-radius: 20px; line-height: 1.2; } /* ========================================================= 4) BUTTONS ========================================================= */ .btn{ text-decoration: none !important; } .btn-main{ color: #fff; border-radius: 30px; font-size: 18px; padding: 15px 40px; display: inline-block; background-color: var(--brand); box-shadow: 0 15px 40px rgba(249,167,68,0.5); background-image: linear-gradient( to top, rgba(255,239,206,0) 0%, rgba(255,239,206,0.25) 100% ); } .btn-main:hover, .btn-main:focus{ background-color: var(--brand); color: #fff; filter: brightness(0.98); } .btn-main-sm{ padding: 12px 35px; text-transform: uppercase; font-size: 14px; font-weight: 800; } .footer-quote-btn{ background: #3f4c58 !important; color: #f3f4f5 !important; border: 1px solid rgba(255,255,255,0.25) !important; font-weight: 700; letter-spacing: 0.2px; transition: background-color .2s ease, border-color .2s ease, transform .1s ease; } .footer-quote-btn--sm{ padding: .44rem 1rem !important; font-size: .9rem !important; line-height: 1.2; } .footer-quote-btn--narrow{ width: auto !important; display: inline-flex !important; align-items: center; justify-content: center; white-space: nowrap; } .footer-quote-btn:hover, .footer-quote-btn:focus{ background: #2f3943 !important; color: #ffffff !important; border-color: rgba(255,255,255,0.35) !important; transform: translateY(-1px); } .footer-quote-btn:focus-visible{ outline: none; box-shadow: 0 0 0 .2rem rgba(63,76,88,0.35); } /* ========================================================= 5) WHY BOOK WITH US ========================================================= */ .why-book-section{ padding: 90px 0; background: #ffffff; } .why-book-section .why-badge{ display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; border-radius: 999px; padding: 10px 14px; color: var(--heading); background: rgba(249,167,67,0.18); border: 1px solid rgba(249,167,67,0.35); } .why-book-section h2{ font-size: 40px; line-height: 1.2; font-weight: 800; color: var(--heading); margin-bottom: 12px; } .why-book-section p{ font-size: 1.05rem; line-height: 1.7; color: #495057; font-weight: 300; } /* WHY BOOK buttons */ .why-book-section .btn.why-btn{ font-size: 16px !important; font-weight: 700 !important; padding: 10px 16px !important; border-radius: 20px !important; line-height: 1.2 !important; } @media (max-width: 576px){ .why-book-section .btn.why-btn{ font-size: 15px !important; padding: 9px 14px !important; } } .why-book-section .btn-outline-secondary{ border-width: 2px; } /* Bullets only inside WHY section */ .why-book-section ul{ list-style: disc; padding-left: 18px; margin: 0; font-size: 18px; font-weight: 300; } .why-book-section li{ margin-bottom: 8px; } .why-book-section .why-card{ border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: 0 10px 24px rgba(0,0,0,0.08); transition: transform 0.2s ease, box-shadow 0.2s ease; background: #fff; } .why-book-section .why-card:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,0.12); } .why-book-section .why-card-icon{ color: #c3c4bf !important; font-size: 28px !important; line-height: 1 !important; display: inline-block; margin-bottom: 8px; } .why-book-section .why-card i:not(.why-card-icon){ color: var(--primary); font-size: 26px; line-height: 1; display: inline-block; margin-bottom: 8px; } .why-book-section .why-card-title, .why-book-section .why-card h5{ font-size: 19px; line-height: 1.25; font-weight: 800; color: var(--heading); margin-bottom: 8px; } .why-book-section .why-card-text{ font-size: 17px; line-height: 1.55; font-weight: 300; color: #495057; margin: 0; } .why-book-section .why-requests-box{ background: #f8f9fa; border-radius: 18px; border: 1px solid var(--border); box-shadow: 0 10px 24px rgba(0,0,0,0.06); } .why-book-section .why-requests-title{ display: flex; align-items: center; gap: 10px; margin: 0 0 10px; } .why-book-section .why-requests-title-text{ font-size: 19px; font-weight: 800; color: var(--heading); line-height: 1.2; } .why-book-section .why-requests-icon{ color: #f9a743 !important; font-size: 20px !important; line-height: 1 !important; display: inline-block; } .why-book-section .why-requests-list{ list-style: disc; padding-left: 18px; margin: 0; font-size: 17px; font-weight: 300; } .why-book-section .why-requests-item{ font-size: 17px; font-weight: 300; color: #495057; line-height: 1.6; margin-bottom: 8px; } .why-book-section .why-requests-item:last-child{ margin-bottom: 0; } @media (max-width: 991px){ .why-book-section{ padding: 70px 0; } .why-book-section h2{ font-size: 32px; } .why-book-section ul{ font-size: 17px; } .why-book-section .why-card-title{ font-size: 19px !important; } .why-book-section .why-card-text{ font-size: 17px !important; } .why-book-section .why-card-icon{ font-size: 24px !important; } .why-book-section .why-requests-title-text{ font-size: 17px; } .why-book-section .why-requests-item{ font-size: 16px; } } @media (max-width: 576px){ .why-book-section .why-card-title{ font-size: 19px !important; } .why-book-section .why-card-text{ font-size: 17px !important; } .why-book-section .why-card-icon{ font-size: 22px !important; } .why-book-section .why-requests-title-text{ font-size: 16.5px; } .why-book-section .why-requests-item{ font-size: 16px; } } /* ========================================================= 6) SERVICES ========================================================= */ .home-services .service-heading{ font-size: 1.2rem; font-weight: 800; margin-top: 0.75rem; margin-bottom: 0.5rem; color: #333; } .home-services .service-title{ font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 900; color: var(--brand-dark); } .home-services .service-title span{ color: var(--brand-dark); } .service-box{ background: #fff; border-radius: 12px; padding: 2rem 1.5rem; box-shadow: 0 6px 15px rgba(0,0,0,0.05); text-align: center; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; transition: transform 0.3s ease, box-shadow 0.3s ease; } .icon-service{ color: #cacac9; } /* Hover */ .service-box:hover{ transform: translateY(-6px); box-shadow: 0 10px 25px rgba(0,0,0,0.08); } .service-box i{ transition: transform 0.3s ease; } .service-box:hover i{ transform: scale(1.15); } .service-p{ font-size: 1.05rem; color: #555; margin: 0 auto; max-width: 90%; line-height: 1.6; } /* ========================================================= 7) RESIDENTIAL CTA ========================================================= */ .residential-cta-section{ padding: 100px 0; background: linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%); } .residential-cta-section .cta-badge{ display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; font-size: 17px; font-weight: 800; color: var(--heading); background: rgba(249,167,67,0.18); border: 1px solid rgba(249,167,67,0.35); } .residential-cta-section .cta-badge i{ color: var(--brand-dark); } .residential-cta-section .cta-title{ font-size: 40px; line-height: 1.2; font-weight: 800; color: var(--heading); margin: 14px 0 10px; } .residential-cta-section .cta-subtitle{ font-size: 1.3rem; line-height: 1.6; color: #495057; margin-bottom: 18px; max-width: 62ch; font-weight: 300; } .residential-cta-section .cta-checklist{ list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .residential-cta-section .cta-checklist li{ display: flex; align-items: flex-start; gap: 10px; font-size: 18px; line-height: 26px; color: var(--text); background: rgba(25,135,84,0.06); border: 1px solid rgba(25,135,84,0.12); padding: 12px 14px; border-radius: 12px; } .residential-cta-section .cta-checklist li i{ color: var(--success); margin-top: 3px; font-size: 18px; } .residential-cta-section .cta-trust{ display: flex; flex-wrap: wrap; gap: 12px; } .residential-cta-section .cta-trust .trust-item{ display: inline-flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-sm); font-size: 16px; font-weight: 800; color: var(--heading); } .residential-cta-section .cta-trust .trust-item i{ color: var(--primary); font-size: 16px; } .residential-cta-section .cta-mini-note{ font-size: 1rem; color: var(--muted); } .residential-cta-section .cta-card{ background: #ffffff; border-radius: 18px; padding: 26px; border: 1px solid var(--border); box-shadow: var(--shadow-md); transition: transform 0.2s ease, box-shadow 0.2s ease; } .residential-cta-section .cta-card-title{ font-size: 24px; font-weight: 900; color: var(--heading); } .residential-cta-section .cta-card-row{ display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.07); } .residential-cta-section .cta-card-row:last-child{ border-bottom: none; } .residential-cta-section .cta-card-label{ font-size: 18px; font-weight: 900; color: var(--heading); } .residential-cta-section .cta-card-value{ font-size: 16px; font-weight: 600; color: var(--muted); text-align: right; } .residential-cta-section .cta-card-footer p{ font-size: 1rem; line-height: 1.6; color: #495057; } .residential-cta-section .cta-card:hover{ transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0,0,0,0.12); } @media (max-width: 991px){ .residential-cta-section{ padding: 80px 0; } .residential-cta-section .cta-title{ font-size: 32px; } } @media (max-width: 576px){ .residential-cta-section .cta-title{ font-size: 28px; } .residential-cta-section .cta-checklist li{ font-size: 17px; } .residential-cta-section .cta-card{ padding: 20px; } } /* ========================================================= 8) TESTIMONIALS ========================================================= */ .testimonials{ padding: 4rem 1rem; background-color: #f9f9f9; text-align: center; } .testimonials .carousel-inner{ background-color: #fff; padding: 2rem 0; } .testimonials .carousel-item{ text-align: center; } .testimonials .carousel-item figure{ margin: 0 auto; display: flex; flex-direction: column; align-items: center; } .testimonials .carousel-item img{ border: 3px solid #e97308; display: block; margin-left: auto; margin-right: auto; } .testimonials .carousel-item h5{ font-weight: 700; color: #80817f; font-size: 1.35rem; margin: 0; } .testimonials .blockquote-footer{ font-size: 1.05rem; margin-top: 0.5rem; } .testimonials .carousel-control-prev-icon, .testimonials .carousel-control-next-icon{ background-color: #ddd9d9; border-radius: 50%; padding: 10px; } .testimonials .testimonial-title{ font-size: 2.5rem; font-weight: 900; color: var(--heading); position: relative; display: inline-block; padding-bottom: 0.5rem; } .testimonials .testimonial-title span{ color: #e76f51; } .testimonials .testimonial-title::after{ content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 60%; background-color: #e76f51; border-radius: 2px; transition: width 0.3s ease; } .testimonials .testimonial-title:hover::after{ width: 100%; } /* ========================================================= 9) COOKIE NOTICE ========================================================= */ .cookie-container{ position: fixed; bottom: 0; left: 0; right: 0; width: 100%; background-color: #f9f9f9; color: #333; padding: 10px 20px; font-size: 0.95rem; border-top: 1px solid #ddd; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); z-index: 10000; display: none; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; } .cookie-container a{ color: #0d6efd; text-decoration: underline; } .cookie-container p{ margin: 0; flex: 1 1 auto; max-width: 80%; } .cookie-container .cookie-actions{ display: flex; gap: 10px; align-items: center; } .cookie-container .cookie-actions .btn{ white-space: nowrap; } @media (max-width: 576px){ .cookie-container{ flex-direction: column; align-items: flex-start; text-align: left; } .cookie-container p{ max-width: 100%; } .cookie-container .cookie-actions{ width: 100%; justify-content: flex-end; } } /* ========================================================= 10) FOOTER ========================================================= */ .footer-section{ background-color: #f4f4f4; color: #333; font-size: 0.95rem; padding-top: 0; padding-bottom: 0; } .footer-logo{ font-size: 1.5rem; font-weight: 900; margin-bottom: 0.5rem; color: #89898a; } .footer-title{ font-weight: 800; color: var(--brand-dark); margin-bottom: 0.75rem; } .footer-links li{ margin-bottom: 0.5rem; } .footer-links a{ color: #333; text-decoration: none; transition: color 0.2s ease; } .footer-links a:hover{ color: var(--brand-dark); } .footer-section h6{ font-size: 1rem; font-weight: 900; color: var(--heading); margin-bottom: 0.5rem; } .footer-section .row.g-3{ align-items: flex-start; --bs-gutter-x: 1.75rem; --bs-gutter-y: 1rem; } .footer-section ul.text-muted li{ font-size: 0.95rem; line-height: 1.45; margin-bottom: 0.35rem; } .social-icons .social{ display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; color: #fff; background-color: var(--brand-dark); width: 32px; height: 32px; border-radius: 50%; transition: background 0.2s ease; } .social-icons .social:hover{ background-color: #0d6efd; } .footer-legal{ text-align: center; font-size: 0.9rem; color: #999; margin-top: 0.5rem; padding-bottom: 0.5rem; } .footer-legal a{ color: #999; text-decoration: none; margin: 0 4px; transition: color 0.2s ease; font-size: 1rem; } .footer-legal a:hover{ color: #555; text-decoration: underline; } .footer-bottom{ margin-top: 0.5rem; padding-top: 0.1rem; padding-bottom: 0.5rem; } .footer-bottom p{ margin: 0; font-size: 1.05rem; color: #777; } /* ========================================================= 11) SCROLL TO TOP ========================================================= */ #scrollToTopBtn{ position: fixed; right: 30px; bottom: 140px; z-index: 10001; background-color: var(--success); color: #fff; border: none; padding: 12px 15px; border-radius: 50%; cursor: pointer; display: none; box-shadow: 0 4px 8px rgba(0,0,0,0.2); transition: opacity 0.3s ease, transform 0.2s ease, background-color 0.2s ease; } #scrollToTopBtn:hover{ background-color: #407dee; transform: translateY(-2px); } @media (max-width: 480px){ #scrollToTopBtn{ bottom: 110px; right: 14px; } } /* ========================================================= 12) CHAT POPUP ========================================================= */ #chatToggle.chat-toggle{ position: fixed; right: 18px; bottom: 200px; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; z-index: 99999; background: #28a745; color: #fff; box-shadow: 0 14px 28px rgba(0,0,0,0.18); transition: transform 0.2s ease, box-shadow 0.2s ease; } #chatToggle.chat-toggle:hover{ transform: translateY(-2px); box-shadow: 0 18px 34px rgba(0,0,0,0.22); } #chatToggle.chat-toggle:focus-visible{ outline: 3px solid rgba(40,167,69,0.35); outline-offset: 4px; } #chat-popup.chat-popup{ position: fixed; right: 18px; bottom: 90px; width: 340px; max-width: calc(100vw - 36px); height: 440px; background: #fff; border-radius: 16px; overflow: hidden; display: none; flex-direction: column; z-index: 100000; box-shadow: var(--shadow-lg); border: 1px solid var(--border); } #chat-popup.chat-popup.open{ display: flex; } #chat-popup .chat-header{ display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: #2c3e50; color: #fff; } #chat-popup .agent-name{ font-weight: 800; font-size: 0.95rem; } #chat-popup .close-chat{ background: transparent; border: none; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; } #chat-popup .chat-body{ flex: 1; overflow-y: auto; padding: 12px; background: #f7f8fa; } #chat-popup .bot-message, #chat-popup .user-message{ max-width: 85%; padding: 10px 12px; border-radius: 14px; margin: 8px 0; font-size: 0.95rem; line-height: 1.4; } #chat-popup .bot-message{ background: #ffffff; border: 1px solid rgba(0,0,0,0.06); color: #2f3b48; align-self: flex-start; } #chat-popup .user-message{ background: rgba(40,167,69,0.12); border: 1px solid rgba(40,167,69,0.18); color: #1f2a20; align-self: flex-end; margin-left: auto; } #chat-popup .chat-input{ display: flex; gap: 8px; padding: 10px; background: #fff; border-top: 1px solid rgba(0,0,0,0.08); } #chat-popup .chat-input input{ flex: 1; border: 1px solid rgba(0,0,0,0.12); border-radius: 12px; padding: 10px 12px; font-size: 0.95rem; outline: none; } #chat-popup .chat-input input:focus{ border-color: rgba(40,167,69,0.55); box-shadow: 0 0 0 3px rgba(40,167,69,0.18); } #chat-popup .chat-input button{ border: none; background: #28a745; color: #fff; border-radius: 12px; padding: 10px 14px; font-weight: 800; cursor: pointer; } #chat-popup .chat-input button:hover{ filter: brightness(0.95); } @media (max-width: 480px){ #chat-popup.chat-popup{ width: calc(100vw - 36px); height: 420px; } } /* ========================================================= 13) BULLETS IN “content” AREAS FIXED: - Removed duplicate rules (ul.content/ol.content + .content ul/ol) - Keeps your intended look for content blocks ========================================================= */ .content ul{ list-style: disc; padding-left: 18px; margin: 0 0 16px; } .content ol{ list-style: decimal; padding-left: 18px; margin: 0 0 16px; } .content li{ margin-bottom: 8px; }