@charset "UTF-8"; /* ============================================================ * components.css - Extracted from inline style blocks * All below-fold component styles. Loaded deferred (non-blocking). * Critical above-fold CSS remains inline in . * ============================================================ */ /* -- Unified Floating CTA Group ------------ */ .float-cta-group { position: fixed; right: 22px; bottom: 38px; z-index: 999999; display: flex; flex-direction: column; align-items: flex-end; gap: 11px; } .float-cta-btn { display: flex; align-items: center; cursor: pointer; text-decoration: none; background: none; border: none; padding: 0; } .float-cta-label { color: #fff; padding: 0; border-radius: 50px 0 0 50px; font-weight: 700; font-size: 0.8rem; white-space: nowrap; overflow: hidden; max-width: 0; opacity: 0; transition: max-width 0.38s ease, opacity 0.28s ease, padding 0.38s ease; margin-right: -26px; z-index: 1; font-family: 'Poppins', sans-serif; box-shadow: 0 4px 12px rgba(0,0,0,0.12); } .float-cta-btn:hover .float-cta-label, .float-cta-btn:focus .float-cta-label { max-width: 200px; opacity: 1; padding: 10px 36px 10px 18px; } .float-wa .float-cta-label { background: #25D366; } .float-call .float-cta-label { background: #c5a059; } .float-book .float-cta-label { background: #DD1C71; } .float-cta-icon { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,0.22); z-index: 2; position: relative; flex-shrink: 0; transition: transform 0.2s ease, box-shadow 0.2s ease; } .float-cta-btn:hover .float-cta-icon { transform: scale(1.1); box-shadow: 0 8px 24px rgba(0,0,0,0.28); } .float-wa .float-cta-icon { background: #25D366; animation: pulse-green 2.2s infinite; } .float-call .float-cta-icon { background: #c5a059; } .float-book .float-cta-icon { background: #DD1C71; } .float-cta-icon i { color: #fff; font-size: 22px; } .float-cta-icon svg { display: block; } @keyframes pulse-green { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.7); } 70% { box-shadow: 0 0 0 14px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } } /* Spinner fallback for INP loader (Boxicons bx-spin uses this) */ @keyframes bx-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Hide on mobile -- sticky bottom bar covers these 3 actions */ @media (max-width: 767.98px) { .float-cta-group { display: none !important; } } .shimmer { position: relative; overflow: hidden; } .shimmer::before { content: ''; position: absolute; top: 0; left: -150%; height: 100%; width: 150%; background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%); animation: shimmer 2s infinite; } @keyframes shimmer { 0% { left: -150%; } 100% { left: 100%; } } /* ══════════════════════════════════════════════════════════════════════ HEADER & NAVIGATION — Canonical Styles Single source of truth for index.html, smile.html, contact.html. Edit here to update the navbar/header across the entire site. ══════════════════════════════════════════════════════════════════════ */ /* ── Skip Link (accessibility) ── */ .skip-link { position: absolute; left: -9999px; top: 4px; z-index: 99999; background: #DD1C71; color: #fff !important; padding: 10px 20px; border-radius: 0 0 10px 0; font-weight: 700; font-size: 0.9rem; text-decoration: none; transition: left 0.2s; } .skip-link:focus { left: 0; } /* ── Header base ── */ header { position: sticky; top: 0; z-index: 1030; background: #fff !important; box-shadow: 0 2px 12px rgba(0,0,0,0.08); transition: box-shadow 0.3s ease; border-top: 3px solid transparent !important; background-clip: padding-box !important; } header::before { content: ''; display: block; height: 3px; background: linear-gradient(90deg, #DD1C71 0%, #c5a059 50%, #DD1C71 100%); margin-top: -3px; } header.scrolled { box-shadow: 0 4px 28px rgba(221,28,113,0.12) !important; background: rgba(255,255,255,0.97) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } header.scrolled .navbar { padding: 6px 24px !important; } header.scrolled .navbar-brand img { max-height: 36px !important; } /* ── Navbar layout ── */ .navbar { padding: 10px 24px !important; align-items: center !important; background: #fff !important; } .navbar-brand { position: static !important; transform: none !important; margin: 0 12px 0 0 !important; flex-shrink: 0; display: flex !important; align-items: center; } .navbar-brand img { max-height: 44px !important; width: auto; transition: opacity 0.2s ease, transform 0.2s ease; } .navbar-brand:hover img { opacity: 0.88; transform: scale(1.02); } /* ── Nav links — underline-slide on hover ── */ .navbar-nav > .nav-item > .nav-link { font-weight: 600 !important; font-size: 0.88rem !important; color: #2a2a2a !important; padding: 8px 11px !important; letter-spacing: 0.1px !important; transition: color 0.2s !important; position: relative !important; } .navbar-nav > .nav-item > .nav-link::after { content: ''; position: absolute; bottom: 2px; left: 11px; right: 11px; height: 2px; background: linear-gradient(90deg, #DD1C71, #c5a059); border-radius: 2px; transform: scaleX(0); transition: transform 0.22s ease; } .navbar-nav > .nav-item > .nav-link:hover { color: #DD1C71 !important; } .navbar-nav > .nav-item > .nav-link:hover::after { transform: scaleX(1); } .navbar-nav > .nav-item.active > .nav-link, .navbar-nav > .nav-item.nav-item-active > .nav-link { color: #DD1C71 !important; font-weight: 700 !important; } .navbar-nav > .nav-item.active > .nav-link::after, .navbar-nav > .nav-item.nav-item-active > .nav-link::after { transform: scaleX(1); } /* ── Dropdown menus — card style ── */ .dropdown-menu { border: 1px solid rgba(221,28,113,0.1) !important; border-radius: 14px !important; box-shadow: 0 10px 36px rgba(0,0,0,0.11) !important; padding: 8px 6px !important; min-width: 195px !important; background: #fff !important; } .dropdown-menu .dropdown-item { border-radius: 8px !important; padding: 8px 12px !important; font-size: 0.87rem !important; font-weight: 500 !important; color: #333 !important; transition: background 0.15s, color 0.15s, padding-left 0.15s !important; } .dropdown-menu .dropdown-item:hover { background: #fce8f3 !important; color: #DD1C71 !important; padding-left: 16px !important; } .dropdown-submenu { position: relative; } .dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-top: -1px; display: none; border-radius: 12px !important; box-shadow: 0 8px 28px rgba(0,0,0,0.1) !important; padding: 6px !important; } .dropdown-submenu .dropdown-toggle::after { content: ' \25B8'; float: right; } .dropdown-submenu .dropdown-menu.show { display: block; } @media (min-width: 992px) { .dropdown-submenu:hover > .dropdown-menu { display: block; } .navbar-nav > .nav-item:hover > .dropdown-menu { display: block; animation: hdrDropIn 0.18s ease; } @keyframes hdrDropIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } } /* ── Hamburger — branded pink ── */ .navbar-toggler { border: 1.5px solid rgba(221,28,113,0.4) !important; background: rgba(221,28,113,0.06) !important; border-radius: 9px !important; padding: 7px 10px !important; transition: background 0.2s, border-color 0.2s !important; min-width: 44px; min-height: 40px; display: flex !important; align-items: center; justify-content: center; } .navbar-toggler:hover, .navbar-toggler:focus { background: rgba(221,28,113,0.13) !important; border-color: #DD1C71 !important; box-shadow: none !important; outline: none !important; } .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23DD1C71' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; width: 22px !important; height: 22px !important; } /* ── Mobile collapse — premium card ── */ @media (max-width: 991px) { .navbar { padding: 8px 14px !important; min-height: 60px; } .navbar-brand img { max-height: 40px !important; } .navbar-collapse { background: #fff !important; padding: 8px 12px 16px !important; border-radius: 0 0 18px 18px !important; box-shadow: 0 16px 32px rgba(0,0,0,0.1) !important; margin-top: 8px !important; border-top: 2px solid rgba(221,28,113,0.12) !important; } .navbar-nav .nav-link { padding: 10px 10px !important; border-bottom: 1px solid #f5f5f5 !important; font-size: 0.92rem !important; border-radius: 6px !important; } .navbar-nav .nav-link:hover { background: #fff5f9; } .dropdown-menu { border: none !important; box-shadow: none !important; border-radius: 0 !important; padding-left: 14px !important; background: transparent !important; } } /* ── Phone CTAs ── */ .navbar-phone-mobile { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: #DD1C71; color: #fff !important; border-radius: 50%; font-size: 20px; text-decoration: none; transition: background 0.2s; flex-shrink: 0; } .navbar-phone-mobile:hover { background: #a50d4a; color: #fff !important; } .navbar-phone-desktop { background: linear-gradient(135deg, #DD1C71, #a50d4a) !important; color: #fff !important; border-radius: 25px; padding: 8px 18px; font-size: 0.9rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: transform 0.2s, box-shadow 0.2s !important; flex-shrink: 0; box-shadow: 0 3px 14px rgba(221,28,113,0.3) !important; } .navbar-phone-desktop:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(221,28,113,0.45) !important; background: linear-gradient(135deg, #a50d4a, #DD1C71) !important; color: #fff !important; } .navbar-phone-desktop i { font-size: 1rem; vertical-align: middle; } /* ── Announcement bar ── */ .announcement-bar { background: linear-gradient(90deg, #8a0735 0%, #DD1C71 45%, #c5a059 100%); color: #fff; padding: 9px 20px; font-size: 0.84rem; text-align: center; position: relative; z-index: 1100; } .announcement-bar strong { color: #fff9e6; } .ann-star { color: #ffdc77; vertical-align: middle; margin-right: 4px; } .ann-book-btn { display: inline-block; background: rgba(255,255,255,0.18); color: #fff !important; padding: 3px 14px; border-radius: 20px; text-decoration: none; font-weight: 600; border: 1px solid rgba(255,255,255,0.5); transition: background 0.2s; font-size: 0.82rem; white-space: nowrap; } .ann-book-btn:hover { background: rgba(255,255,255,0.35); color: #fff !important; } .ann-close { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: none; color: rgba(255,255,255,0.7); font-size: 20px; cursor: pointer; line-height: 1; padding: 0; transition: color 0.2s; } .ann-close:hover { color: #fff; } @media (max-width: 600px) { .announcement-bar { font-size: 0.76rem; padding: 8px 36px 8px 10px; } .announcement-bar .container, .announcement-bar > .container { flex-direction: column !important; flex-wrap: nowrap !important; gap: 6px !important; padding-left: 0 !important; padding-right: 0 !important; align-items: center !important; } .announcement-bar span { line-height: 1.4; text-align: center; } .ann-book-btn { font-size: 0.76rem !important; padding: 4px 14px !important; margin-top: 2px; } } /* ── Mobile Sticky Bar ── */ .sticky-buttons { display: none; transition: opacity 0.3s ease, transform 0.3s ease; will-change: transform, opacity; } .sticky-buttons.footer-visible { opacity: 0; pointer-events: none; transform: translateY(30px); } @media (max-width: 767.98px) { .sticky-buttons { display: flex; flex-direction: row; position: fixed; bottom: 0; left: 0; right: 0; padding: 8px 12px 10px; gap: 8px; background: #fff; border-top: 1px solid #e5e5e5; box-shadow: 0 -4px 16px rgba(0,0,0,0.10); z-index: 1040; } .sticky-buttons .btn { flex: 1 1 0; height: 46px; font-size: 0.88rem; font-weight: 600; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; white-space: nowrap; box-shadow: 0 4px 8px rgba(0,0,0,0.2); transition: transform 0.2s ease; } .sticky-buttons .btn:hover { transform: scale(1.05); } } @media (min-width: 768px) { .sticky-buttons { display: none; } } @media (max-width: 400px) { .sticky-buttons .btn { font-size: 0.78rem; gap: 4px; } } /* ── Back to Top button ── */ #backToTop { position: fixed; bottom: 38px; left: 22px; z-index: 99998; width: 44px; height: 44px; border-radius: 50%; background: #DD1C71; color: #fff; border: none; font-size: 1.2rem; cursor: pointer; box-shadow: 0 4px 14px rgba(221,28,113,0.35); display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(12px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; } #backToTop.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } #backToTop:hover { background: #a50d4a; transform: translateY(-2px); } @media (max-width: 767.98px) { #backToTop { display: none; } } /* ── Active nav item highlight ── */ .nav-item-active > .nav-link { color: #DD1C71 !important; font-weight: 700; } .nav-item-active > .nav-link::after { transform: scaleX(1) !important; } /* ── Breadcrumb bar (below header) ── */ .breadcrumb-bar { background: #f8f9fa; padding: 8px 0; border-bottom: 1px solid #eee; font-size: 0.85rem; } .breadcrumb-bar .breadcrumb-item a { color: #DD1C71; text-decoration: none; } .breadcrumb-bar .breadcrumb-item a:hover { text-decoration: underline; } .breadcrumb-bar .breadcrumb-item.active { color: #666; } .breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before { color: #aaa; } /* ══ END: HEADER & NAVIGATION ══════════════════════════════════════════ */ :root { --primary-blue: #0056b3; --secondary-teal: #00a8cc; --dark-grey: #333; --light-bg: #f4f9ff; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { background-color: var(--white); color: var(--dark-grey); line-height: 1.6; } .welcome-text { text-align: center; margin-bottom: 50px; } /* Features/Why Choose Us Grid */ .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 25px; margin-top: 40px; } .feature-card { background: var(--light-bg); padding: 30px; border-radius: 12px; border-bottom: 4px solid var(--secondary-teal); transition: transform 0.3s ease; } .feature-card:hover { transform: translateY(-10px); } .feature-card h3 { color: var(--primary-blue); margin-bottom: 15px; font-size: 1.2rem; } .urdu-text { display: block; font-size: 1.3rem; margin-bottom: 10px; color: var(--dark-grey); font-weight: 700; } /* Pricing Badge */ .price-tag { display: inline-block; background: var(--secondary-teal); color: white; padding: 5px 15px; border-radius: 20px; font-weight: 600; margin-top: 10px; } /* CTA Button */ .cta-btn { display: inline-block; background: #ffcc00; color: #333; padding: 15px 40px; text-decoration: none; border-radius: 30px; font-weight: 700; margin-top: 30px; transition: 0.3s; } .cta-btn:hover { background: #e6b800; transform: scale(1.05); } @media (max-width: 768px) { h2 { font-size: 1.8rem; } } /* --- Keep all your old code above this line --- */ @media (max-width: 768px) { /* Stack non-flex containers */ .sidebar, .content { width: 100% !important; float: none !important; } /* Keep .row as flex so Bootstrap grid works */ .row { width: 100% !important; display: flex !important; flex-wrap: wrap !important; } /* Stop images from breaking the layout */ img { max-width: 100%; height: auto; } h1 { font-size: 1.5rem; } } :root { --primary-blue: #e71f94; --secondary-gold: #c5a059; --text-dark: #333; --light-bg: #f8f9fa; } .hero-section { background: linear-gradient(135deg, #fff5f9 0%, #ffffff 60%, #fffbf5 100%); padding: 70px 0 60px; text-align: left; overflow: hidden; position: relative; } .container { max-width: 1000px; margin: 0 auto; } h1 { color: var(--primary-blue); font-size: 1.2rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; } h2 { font-size: 2.5rem; color: #222; margin-bottom: 25px; line-height: 1.2; } .highlight { color: var(--secondary-gold); } .intro-text { font-size: 1.1rem; max-width: 800px; margin: 0 auto 30px; } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 40px; } .service-tag { background: white; padding: 10px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); font-weight: 600; color: var(--primary-blue); border-left: 4px solid var(--secondary-gold); } .cta-button { display: inline-block; background-color: var(--primary-blue); color: white; padding: 15px 35px; text-decoration: none; border-radius: 50px; font-weight: bold; margin-top: 20px; transition: transform 0.3s ease; } .cta-button:hover { transform: translateY(-3px); background-color: #a50d4a; color: #ffffff; } @media (max-width: 768px) { h2 { font-size: 1.8rem; } } /* Updated styles for your brand colors */ .container h2 { text-align: center; color: #DD1C71; /* Brand Pink */ margin-bottom: 30px; } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 20px; margin-top: 20px; } .feature-card { background: #ffffff; padding: 20px; border-radius: 12px; box-shadow: 0 10px 20px rgba(221, 28, 113, 0.1); /* Subtle pink shadow */ border-bottom: 4px solid #c5a059; /* Brand Gold accent */ transition: transform 0.3s ease; } .feature-card:hover { transform: translateY(-5px); } .feature-card img { width: 100%; height: 180px; object-fit: cover; border-radius: 8px; margin-bottom: 15px; display: block; border: 1px solid #fceef4; /* Very light pink border */ } .feature-card h3 { color: #DD1C71; /* Brand Pink */ margin-top: 10px; margin-bottom: 10px; } .urdu-text { display: block; color: #c5a059; /* Brand Gold for Urdu text accent */ font-size: 0.9rem; font-weight: 600; margin-bottom: 5px; } .price-tag { display: inline-block; background-color: #fceef4; /* Light pink background */ color: #DD1C71; /* Pink text */ padding: 5px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 700; margin-top: 8px; margin-right: 5px; border: 1px solid #DD1C71; } /* ===== WHY CHOOSE SECTION -- Image-free Infographic Cards ===== */ .why-choose-section { padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, #faf8fc 100%); } .wc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 40px; } .wc-card { background: #fff; border-radius: 20px; padding: 30px 24px 26px; box-shadow: 0 4px 28px rgba(0,0,0,0.06); position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; } .wc-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #DD1C71, #c5a059); } .wc-card:hover { transform: translateY(-7px); box-shadow: 0 16px 44px rgba(221,28,113,0.14); } .wc-icon-wrap { width: 58px; height: 58px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; margin-bottom: 18px; flex-shrink: 0; } .wc-stat { font-size: 2.2rem; font-weight: 900; line-height: 1.1; margin-bottom: 7px; background: linear-gradient(135deg, #DD1C71 0%, #c5a059 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .wc-card h3 { font-size: 1rem; font-weight: 700; color: #1a1a2e; margin: 0 0 10px; line-height: 1.35; } .wc-card p { font-size: 0.86rem; color: #6b7280; line-height: 1.68; margin: 0 0 0; flex: 1; } .wc-urdu { display: block; font-size: 0.8rem; color: #c5a059; font-weight: 700; margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(197,160,89,0.35); } .wc-price-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(197,160,89,0.35); } /* Force correct pink style -- overrides the old teal .price-tag from line ~1060 */ .wc-price-tags .price-tag { background: #fceef4 !important; color: #DD1C71 !important; border: 1px solid rgba(221,28,113,0.28) !important; font-size: 0.78rem !important; font-weight: 700 !important; padding: 4px 10px !important; border-radius: 20px !important; display: inline-block !important; margin: 0 !important; white-space: nowrap !important; line-height: 1.5 !important; } /* Two-column on tablet */ @media (max-width: 991px) { .wc-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } } /* Two-column on mobile */ @media (max-width: 480px) { .why-choose-section { padding: 52px 0; } .wc-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .wc-card { padding: 20px 15px 18px; border-radius: 14px; } .wc-stat { font-size: 1.75rem; } .wc-icon-wrap { width: 48px; height: 48px; font-size: 1.4rem; border-radius: 12px; margin-bottom: 12px; } .wc-card h3 { font-size: 0.88rem; } .wc-card p { font-size: 0.78rem; } .wc-urdu { font-size: 0.72rem; } .price-tag { font-size: 0.72rem !important; padding: 3px 8px !important; } } @media (max-width: 360px) { .wc-grid { grid-template-columns: 1fr; } } .services-section { background-color: #fff; padding: 60px 0; } .section-title { text-align: center; margin-bottom: 40px; color: var(--primary-blue); } .services-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px; } .service-item { border: 1px solid #eee; padding: 25px; border-radius: 10px; transition: all 0.3s ease; background: #fff; } .service-item:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.05); border-color: var(--secondary-teal); } .service-item h3 { font-size: 1.1rem; color: var(--primary-blue); margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; } .service-item ul { list-style: none; padding-left: 0; margin-top: 10px; } .service-item li { font-size: 0.9rem; margin-bottom: 5px; position: relative; padding-left: 15px; } .service-item li::before { content: "\2022"; color: var(--secondary-teal); position: absolute; left: 0; } .urdu-inline { font-family: 'Noto Nastaliq Urdu', serif; /* Optional: adds a more traditional look */ font-size: 0.95rem; color: var(--secondary-teal); font-weight: 600; } /* Specialist Section */ .specialists-box { background: #de4f99; color: white; padding: 40px; border-radius: 15px; margin-top: 60px; } .specialist-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 15px; margin-top: 20px; } .specialist-tag { background: rgba(255,255,255,0.1); padding: 10px; border-radius: 5px; font-size: 0.9rem; border-left: 3px solid #ffcc00; } .urdu-footer { text-align: center; margin-top: 30px; font-size: 1.2rem; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 20px; } /* Standardizes images within service and specialist sections */ .service-item img { width: 100%; height: 160px; object-fit: cover; border-radius: 8px; margin-bottom: 15px; /* Updated border to soft pink tint */ border: 1px solid #fceef4; } /* Updated section title color */ .section-title { color: #DD1C71; text-align: center; margin-bottom: 40px; font-size: 2.2rem; } .services-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px; } .service-item { background: #ffffff; padding: 20px; border-radius: 12px; /* Subtle pink glow for shadow */ box-shadow: 0 10px 20px rgba(221, 28, 113, 0.08); border-bottom: 3px solid #fceef4; transition: 0.3s; } .service-item:hover { /* Hover accent using Gold */ border-bottom-color: #c5a059; transform: translateY(-5px); } .service-item h3 { /* Titles changed to Brand Pink */ color: #DD1C71; margin-bottom: 10px; font-size: 1.3rem; } .urdu-inline { color: #c5a059; /* Urdu accents in Gold */ font-size: 0.9rem; } .service-item p, .service-item ul { color: #555; font-size: 0.95rem; line-height: 1.5; } .service-item ul { padding-left: 20px; } .specialists-container { display: flex; flex-wrap: wrap; gap: 30px; align-items: center; margin-top: 50px; } .specialist-image-side { flex: 1; min-width: 300px; } .specialist-image-side img { width: 100%; border-radius: 12px; /* Shadow tinted with Brand Pink */ box-shadow: 0 10px 25px rgba(221, 28, 113, 0.2); border: 2px solid #ffffff; } .specialist-info-side { flex: 1.5; min-width: 300px; } /* Override for Emergency Card */ .emergency-card { /* Keep emergency high contrast but aligned with palette */ border: 2px solid #DD1C71 !important; } .emergency-title { color: #DD1C71 !important; font-weight: bold; } /* --- Base Container --- */ .container { max-width: 1100px; margin: 0 auto; padding: 20px; font-family: sans-serif; } /* Specialists Section */ .specialists-box { background: #de4f99; color: white; padding: 40px; border-radius: 15px; margin-top: 40px; } .specialists-container { display: flex; flex-wrap: wrap; gap: 30px; align-items: center; } .specialist-info-side { flex: 1.5; min-width: 300px; } .specialist-image-side { flex: 1; min-width: 300px; text-align: center; } .specialist-image-side img { width: 100%; max-width: 400px; border-radius: 12px; } .specialist-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; margin-top: 20px; } .specialist-tag { background: rgba(255,255,255,0.15); padding: 12px; border-radius: 8px; border-left: 4px solid #ffcc00; font-size: 0.95rem; } /* Reviews Section */ .reviews-container { padding: 60px 20px; background-color: #fcfdfe; } .review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .review-card { background: white; padding: 25px; border-radius: 15px; border: 1px solid #eee; box-shadow: 0 5px 15px rgba(0,0,0,0.05); } /* Pricing Table */ .pricing-section { padding: 60px 20px; } .pricing-table-wrapper { overflow-x: auto; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } .pricing-table { width: 100%; border-collapse: collapse; background: white; min-width: 500px; } .pricing-table th { background: #0056b3; color: white; padding: 15px; text-align: left; } .pricing-table td { padding: 15px; border-bottom: 1px solid #eee; color: #444; } /* Locations Section */ .locations-section { background: #f4f9ff; padding: 60px 20px; border-radius: 20px; margin: 40px 0; } .location-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .info-card { background: white; padding: 25px; border-radius: 15px; } .phone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } .brand-closing { text-align: center; padding: 80px 20px; background-color: #000000; color: white; border-radius: 20px; } /* --- ENHANCED MOBILE RESPONSIVE (The "Good" Part) --- */ @media (max-width: 768px) { .container { padding: 15px; } /* Stack Specialists */ .specialists-box { padding: 30px 20px; margin-top: 20px; } .specialists-container { flex-direction: column-reverse; text-align: center; gap: 20px; } .specialist-info-side, .specialist-image-side { min-width: 100%; } .specialist-list { grid-template-columns: 1fr; } /* Single column tags */ .specialist-tag { text-align: left; font-size: 0.9rem; } /* Adjust Text Sizes */ h2 { font-size: 1.6rem !important; margin-bottom: 15px; } /* Spacing adjustments */ .reviews-container, .pricing-section, .locations-section { padding: 40px 10px; } /* Grid Adjustments */ .review-grid, .location-grid { grid-template-columns: 1fr; } .phone-grid { grid-template-columns: 1fr; gap: 5px; } /* Stack phone numbers */ .brand-closing { padding: 50px 20px; } .brand-closing h3 { font-size: 1.4rem !important; } .brand-closing p { font-size: 1rem !important; } } .reviews-section { padding: 60px 20px; max-width: 1000px; margin: 0 auto; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .reviews-section h2 { text-align: center; color: #DD1C71; /* Brand Pink */ margin-bottom: 30px; font-size: 2rem; } /* Carousel Wrapper */ .review-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 20px; padding: 20px 10px; scrollbar-width: none; /* Hide scrollbar for Firefox */ -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */ } .review-carousel::-webkit-scrollbar { display: none; /* Hide scrollbar for Chrome/Safari */ } /* Review Card */ .review-card { flex: 0 0 100%; /* Default 1 card per view on mobile */ scroll-snap-align: center; background: #ffffff; padding: 40px 30px; border-radius: 15px; box-shadow: 0 10px 25px rgba(221, 28, 113, 0.1); border-top: 5px solid #c5a059; /* Brand Gold */ text-align: center; box-sizing: border-box; } .review-card p { color: #555; font-style: italic; line-height: 1.6; margin-bottom: 20px; font-size: 1.1rem; } .review-card strong { color: #DD1C71; /* Brand Pink */ display: block; font-size: 1.2rem; margin-top: 10px; } /* Visual Indicators (Dots) */ .carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; } .dot { width: 10px; height: 10px; background: #fceef4; border-radius: 50%; display: inline-block; } .dot.active { background: #DD1C71; width: 25px; border-radius: 10px; transition: 0.3s; } /* Desktop Adjustments */ @media (min-width: 768px) { .review-card { flex: 0 0 calc(50% - 10px); /* 2 cards on tablet */ } } @media (min-width: 1024px) { .review-card { flex: 0 0 calc(33.333% - 14px); /* 3 cards on desktop */ } .carousel-dots { display: none; } /* Hide dots if all cards fit */ } * { box-sizing: border-box; } body { font-family: Arial, sans-serif; margin: 0; padding: 0; background: #f8f9fa; } .od-pt-review-carousel-wrapper { position: relative; padding: 40px 20px; max-width: 1200px; margin: auto; } .partners-heading-wrapper { text-align: center; margin-bottom: 30px; } .partner-heading { font-size: 26px; color: #232426; font-weight: 600; } .love-us { color: #DD4F8E; } .partner-tag-line { font-size: 16px; color: #555; margin-top: 8px; } .od-pt-review-carousel { display: flex; overflow-x: auto; scroll-behavior: smooth; gap: 16px; padding-bottom: 20px; } .od-pt-review-carousel::-webkit-scrollbar { display: none; } .pt-review-card { flex: 0 0 auto; background: #fff; border-radius: 20px; box-shadow: 0px 2px 12px rgba(102, 102, 102, 0.1); padding: 24px; width: 300px; text-align: center; } .reviewer-wrapper { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 10px; } .reviewer-img { border: 3px solid #FF9E15; border-radius: 50%; overflow: hidden; width: 58px; height: 58px; } .reviewer-img img { width: 100%; height: 100%; object-fit: cover; } .reviewer-name { font-weight: 600; color: #DD4F8E; } .review-stars { display: flex; justify-content: center; gap: 4px; background: rgba(255, 158, 21, 0.2); padding: 4px 6px; border-radius: 8px; margin-top: 10px; margin-bottom: 10px; } .review-stars svg { width: 16px; height: 16px; fill: #FF9E15; } q { display: block; font-style: italic; margin: 0 0 16px 0; color: #333; } .od-pt-review-btns-arrows { display: flex; justify-content: space-between; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); padding: 0 10px; pointer-events: none; } .od-pt-review-arrow { background: #fff; border: 1px solid #ccc; border-radius: 50%; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); pointer-events: auto; } .od-pt-review-arrow svg { width: 24px; height: 24px; fill: #333; } @media (max-width: 991px) { .od-pt-review-btns-arrows { display: none; } } /* 1. Desktop & General Styles */ .pricing-section { padding: 60px 20px; max-width: 900px; margin: 0 auto; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .pricing-header { text-align: center; margin-bottom: 30px; } /* Changed color to Pink (#DD1C71) */ .pricing-header h2 { color: #DD1C71; margin-bottom: 10px; } /* The Container */ .pricing-list { background: #ffffff; border-radius: 12px; box-shadow: 0 10px 30px rgba(221, 28, 113, 0.1); overflow: hidden; border: 1px solid #fceef4; } /* Table Rows */ .pricing-row { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; border-bottom: 1px solid #fceef4; transition: background 0.3s ease; } .pricing-row:last-child { border-bottom: none; } /* Hover changed to a soft pink tint */ .pricing-row:hover { background: #fff5f9; } /* Column Styles */ .service-name { font-weight: 600; color: #333; flex: 1; } .service-price { font-weight: 700; /* Changed color to Pink (#DD1C71) */ color: #DD1C71; text-align: right; padding-left: 15px; } /* Locations Section */ /* Changed color to Pink (#DD1C71) */ .locations-section h2 { text-align: center; color: #DD1C71; } .info-card h4 { /* Changed text to Pink (#DD1C71) and border to Gold (#c5a059) */ color: #DD1C71 !important; border-left: 4px solid #c5a059 !important; padding-left: 10px; margin: 0 0 15px 0; } .brand-closing { text-align: center; padding: 40px; /* Background changed to Pink (#DD1C71) */ background-color: #DD1C71; color: #ffffff; border-radius: 12px; margin-top: 30px; } /* 2. THE PROPER MOBILE FIX */ @media (max-width: 600px) { .pricing-section { padding: 40px 15px; } .pricing-row { padding: 15px; flex-wrap: nowrap; } .service-name { font-size: 0.95rem; line-height: 1.3; } .service-price { font-size: 0.95rem; white-space: nowrap; /* Changed color to Gold (#c5a059) for mobile contrast */ color: #c5a059; } .pricing-header h2 { font-size: 1.5rem; } } .faq-section { padding: 60px 20px; max-width: 800px; margin: 0 auto; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .faq-container { margin-top: 30px; } .faq-item { margin-bottom: 15px; /* Updated border color to a soft pink tint */ border: 1px solid #fceef4; border-radius: 8px; overflow: hidden; transition: 0.3s; background-color: #ffffff; } .faq-question { width: 100%; padding: 20px; background: #ffffff; border: none; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: 600; font-size: 1.05rem; /* Updated to Brand Pink */ color: #DD1C71; text-align: left; } .faq-question:hover { /* Updated to a very light pink hover state */ background-color: #fff5f9; } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; background-color: #ffffff; } .faq-answer p { padding: 0 20px 20px 20px; color: #555; line-height: 1.6; } /* Icon for the accordion */ .faq-question::after { content: '+'; font-size: 1.5rem; /* Updated to Brand Gold */ color: #c5a059; font-weight: bold; } .faq-item.active { /* Border turns Pink when active */ border-color: #DD1C71; } .faq-item.active .faq-question::after { content: "-"; } .faq-item.active .faq-answer { max-height: 300px; } /* 1. Reset body to ensure no white gaps on the sides */ body { margin: 0; padding: 0; overflow-x: hidden; /* Prevents unwanted horizontal scrolling */ } /* 2. Footer Wrapper - Full Width Background */ .footer-area { width: 100vw; /* Viewport Width: forces it to be as wide as the screen */ position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; background-color: #000000; /* Light Grey background */ padding-top: 80px; padding-bottom: 50px; border-top: 1px solid #e1e8ed; } /* 3. Copyright Wrapper - Full Width Background */ .copyright-area { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; background-color: #000000; color: #ffffff; padding: 20px 0; } /* Keep content inside the grid center */ .container { max-width: 1200px; margin: 0 auto; padding: 0 15px; } .single-footer-widget h2 a { color: #ffffff; text-decoration: none; font-weight: bold; font-size: 24px; } .single-footer-widget h3 { font-size: 20px; margin-bottom: 20px; color: #ffffff; position: relative; padding-bottom: 10px; } .single-footer-widget h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 50px; height: 2px; background-color: #c5a059; /* Gold accent */ } .quick-links { list-style: none; padding: 0; } .quick-links li { margin-bottom: 12px; } .quick-links a { color: #bbb; text-decoration: none; transition: all 0.3s; } .quick-links a:hover { color: #DD1C71; padding-left: 8px; } .footer-contact-info b { color: #ffffff; display: block; margin-top: 10px; } .copyright-area-content { text-align: center; } .copyright-area-content p { margin: 0; font-size: 14px; } /* Responsive Grid */ .footer-row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .footer-col { flex: 0 0 25%; max-width: 25%; padding: 0 15px; } @media (max-width: 991px) { .footer-col { flex: 0 0 50%; max-width: 50%; margin-bottom: 30px; } } @media (max-width: 575px) { .footer-col { flex: 0 0 100%; max-width: 100%; } } /* -- Header: top gradient accent line -- */ header { border-top: 3px solid transparent !important; background-clip: padding-box !important; background-image: none !important; } header::before { content: ''; display: block; height: 3px; background: linear-gradient(90deg, #DD1C71 0%, #c5a059 50%, #DD1C71 100%); margin-top: -3px; } /* -- Navbar refined layout -- */ .navbar { padding: 10px 24px !important; align-items: center !important; } header.scrolled .navbar { padding: 6px 24px !important; } header.scrolled .navbar-brand img { max-height: 36px !important; } /* -- Nav links: clean underline-slide effect -- */ .navbar-nav > .nav-item > .nav-link { font-weight: 600 !important; font-size: 0.88rem !important; color: #2a2a2a !important; padding: 8px 11px !important; letter-spacing: 0.1px !important; transition: color 0.2s !important; } .navbar-nav > .nav-item > .nav-link::after { left: 11px !important; right: 11px !important; bottom: 0 !important; } .navbar-nav > .nav-item > .nav-link:hover { color: #DD1C71 !important; } .navbar-nav > .nav-item.nav-item-active > .nav-link { color: #DD1C71 !important; font-weight: 700 !important; } /* -- Dropdowns: card style with animation -- */ @media (min-width: 992px) { .navbar-nav > .nav-item:hover > .dropdown-menu { display: block; animation: hdrDropIn 0.18s ease; } @keyframes hdrDropIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } } .dropdown-menu { border: 1px solid rgba(221,28,113,0.1) !important; border-radius: 14px !important; box-shadow: 0 10px 36px rgba(0,0,0,0.11) !important; padding: 8px 6px !important; min-width: 195px !important; background: #fff !important; } .dropdown-menu .dropdown-item { border-radius: 8px !important; padding: 8px 12px !important; font-size: 0.87rem !important; font-weight: 500 !important; color: #333 !important; transition: background 0.15s, color 0.15s, padding-left 0.15s !important; } .dropdown-menu .dropdown-item:hover { background: #fce8f3 !important; color: #DD1C71 !important; padding-left: 16px !important; } /* Sub-menu */ .dropdown-submenu .dropdown-menu { border-radius: 12px !important; box-shadow: 0 8px 28px rgba(0,0,0,0.1) !important; padding: 6px !important; } /* -- Hamburger: branded pink style -- */ .navbar-toggler { border: 1.5px solid rgba(221,28,113,0.4) !important; background: rgba(221,28,113,0.06) !important; border-radius: 9px !important; padding: 7px 10px !important; transition: background 0.2s, border-color 0.2s !important; min-width: 44px; min-height: 40px; display: flex !important; align-items: center; justify-content: center; } .navbar-toggler:hover, .navbar-toggler:focus { background: rgba(221,28,113,0.13) !important; border-color: #DD1C71 !important; box-shadow: none !important; outline: none !important; } .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23DD1C71' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; width: 22px !important; height: 22px !important; } /* -- Mobile collapse: premium card -- */ @media (max-width: 991px) { .navbar-collapse { background: #fff !important; padding: 8px 12px 16px !important; border-radius: 0 0 18px 18px !important; box-shadow: 0 16px 32px rgba(0,0,0,0.1) !important; margin-top: 8px !important; border-top: 2px solid rgba(221,28,113,0.12) !important; } .navbar-nav .nav-link { padding: 10px 10px !important; border-bottom: 1px solid #f5f5f5 !important; font-size: 0.92rem !important; border-radius: 6px !important; margin-bottom: 2px; } .navbar-nav .nav-link:hover { background: #fff5f9; } .dropdown-menu { border: none !important; box-shadow: none !important; border-radius: 0 !important; padding-left: 14px !important; background: transparent !important; } .dropdown-menu .dropdown-item:hover { padding-left: 18px !important; } } /* -- Phone CTA pill -- desktop & mobile -- */ .navbar-phone-desktop { background: linear-gradient(135deg, #DD1C71, #a50d4a) !important; box-shadow: 0 3px 14px rgba(221,28,113,0.3) !important; transition: transform 0.2s, box-shadow 0.2s !important; } .navbar-phone-desktop:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(221,28,113,0.45) !important; background: linear-gradient(135deg, #a50d4a, #DD1C71) !important; color: #fff !important; } /* -- Scrolled state: frosted glass + stronger shadow -- */ header.scrolled { box-shadow: 0 4px 28px rgba(221,28,113,0.12) !important; background: rgba(255,255,255,0.97) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } /* -- Mobile header height consistency -- */ @media (max-width: 991px) { .navbar { padding: 8px 14px !important; min-height: 60px; } .navbar-brand img { max-height: 40px !important; } } /* ===== COMPREHENSIVE UX IMPROVEMENTS ===== */ /* Breadcrumb bar */ .breadcrumb-bar { background: #f8f9fa; padding: 8px 0; border-bottom: 1px solid #eee; font-size: 0.85rem; } .breadcrumb-bar .breadcrumb-item a { color: #DD1C71; text-decoration: none; } .breadcrumb-bar .breadcrumb-item a:hover { text-decoration: underline; } .breadcrumb-bar .breadcrumb-item.active { color: #666; } .breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before { color: #aaa; } /* Hero label -- replaces old misused h1 */ .hero-label { font-size: 0.8rem !important; text-transform: uppercase; letter-spacing: 3px; color: #DD1C71; font-weight: 600; margin-bottom: 12px; } /* Hero h1 -- now the proper page headline */ .hero-section h1 { font-size: 2.6rem !important; font-weight: 700 !important; color: #222 !important; line-height: 1.25 !important; text-transform: none !important; letter-spacing: normal !important; margin-bottom: 20px !important; } /* Service tags are now links -- style them properly */ a.service-tag { text-decoration: none; display: block; transition: all 0.25s ease; } a.service-tag:hover { background: #DD1C71; color: #fff; border-left-color: #fff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(221, 28, 113, 0.25); } /* 1. Metric-compatible fallback: prevents CLS when Poppins swaps in from deferred load */ @font-face { font-family: 'PoppinsFallback'; src: local('Arial'); ascent-override: 105%; descent-override: 35%; line-gap-override: 0%; size-adjust: 94%; } body, h1, h2, h3, h4, h5, h6, p, a, li, button, input, textarea, select, label { font-family: 'Poppins', 'PoppinsFallback', sans-serif !important; } /* 2. Mobile: footer copyright padding handles sticky bar clearance -- no body padding needed */ /* 3. Navbar -- sticky, with shadow and smooth shrink on scroll */ header { position: sticky; top: 0; z-index: 1030; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); background: #fff !important; transition: box-shadow 0.3s ease, padding 0.3s ease; } header.scrolled .navbar { padding-top: 6px !important; padding-bottom: 6px !important; } header.scrolled .navbar-brand img { max-height: 38px !important; } /* -- Logo: left-aligned natural Bootstrap flow --- */ .navbar-brand { position: static !important; transform: none !important; left: auto !important; pointer-events: auto !important; margin: 0 12px 0 0 !important; flex-shrink: 0; z-index: auto !important; display: flex !important; align-items: center; } .navbar-brand img { pointer-events: auto !important; cursor: pointer !important; max-height: 44px !important; width: auto; transition: opacity 0.2s ease, transform 0.2s ease; } .navbar-brand:hover img { opacity: 0.88; transform: scale(1.02); } /* Desktop: logo | nav (mx-auto centered) | phone-cta */ @media (min-width: 992px) { .navbar { position: relative; } .navbar-nav .nav-item { position: relative; z-index: 3; } .navbar-phone-desktop { position: relative; z-index: 3; } .dropdown-menu { z-index: 1050 !important; } } /* Mobile: logo left, controls right -- natural Bootstrap flow */ @media (max-width: 991.98px) { .navbar > .container-fluid { position: relative; } .navbar .d-flex.d-lg-none { position: relative; z-index: 5; margin-left: auto; } } /* 4. Mobile nav: give collapsed menu a card-like appearance */ @media (max-width: 991px) { .navbar-collapse { background: #fff; padding: 10px 15px 15px; border-radius: 0 0 12px 12px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1); margin-top: 6px; } .navbar-nav .nav-link { padding: 9px 5px !important; border-bottom: 1px solid #f3f3f3; font-size: 0.95rem; } .dropdown-menu { border: none !important; padding-left: 15px; box-shadow: none !important; } } /* 5. Hero section -- better vertical rhythm on all screen sizes */ .hero-section { min-height: 55vh; display: flex; align-items: center; justify-content: center; padding: 80px 20px !important; } @media (max-width: 768px) { .hero-section { padding: 60px 15px !important; min-height: auto; } .hero-section h2 { font-size: 1.8rem !important; } } @media (max-width: 480px) { .hero-section { padding: 45px 12px !important; } .hero-section h2 { font-size: 1.5rem !important; line-height: 1.3 !important; } .hero-section .intro-text { font-size: 0.95rem !important; } } /* 6. Services grid -- prevent overflow on very small screens */ @media (max-width: 480px) { .services-grid { grid-template-columns: 1fr 1fr !important; } .service-tag { font-size: 0.8rem; padding: 8px 6px; } } /* 7. Fix CTA button -- ensure text is always visible on hover (additional safety) */ .cta-button { background-color: #DD1C71 !important; color: #fff !important; font-size: 1rem; letter-spacing: 0.3px; transition: all 0.3s ease !important; } .cta-button:hover { background-color: #a50d4a !important; color: #fff !important; transform: translateY(-3px) !important; box-shadow: 0 6px 18px rgba(221, 28, 113, 0.4); } /* 8. Feature cards -- consistent image height */ .feature-card img { height: 200px !important; object-fit: cover; } /* 9. Service item cards -- consistent image height */ .service-item img { height: 180px !important; object-fit: cover; } /* 10. Appointment form submit button hover */ .form-container .btn[type="submit"], .form-container button[type="submit"] { transition: all 0.3s ease; font-size: 1rem; letter-spacing: 0.3px; padding: 12px; } .form-container .btn[type="submit"]:hover, .form-container button[type="submit"]:hover { background-color: #a50d4a !important; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(221, 28, 113, 0.35); } /* 11. Pricing rows -- subtle slide on hover */ .pricing-row { transition: background 0.25s ease, transform 0.2s ease !important; } .pricing-row:hover { background: #fff5f9 !important; transform: translateX(4px); } /* 12. Locations section -- softer gradient background */ .locations-section { background: linear-gradient(135deg, #f4f9ff, #fef0f7) !important; border-radius: 16px; margin: 20px; padding: 50px 20px; } .info-card { border-radius: 12px; padding: 25px; transition: box-shadow 0.3s ease; } .info-card:hover { box-shadow: 0 8px 22px rgba(221, 28, 113, 0.12); } /* 13. Brand closing section */ .brand-closing { background: linear-gradient(135deg, #DD1C71, #a50d4a) !important; padding: 60px 20px !important; margin: 20px; border-radius: 16px; } .brand-closing h3 { font-size: 2rem; font-weight: 700; } @media (max-width: 768px) { .brand-closing { margin: 10px; padding: 40px 15px !important; } .brand-closing h3 { font-size: 1.5rem !important; } } /* 14. Review carousel -- smooth snap scrolling on mobile */ .od-pt-review-carousel { scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch; } .pt-review-card { scroll-snap-align: start; } /* 15. Specialists box gradient */ .specialists-box { background: linear-gradient(135deg, #de4f99, #a50d4a) !important; } /* 16. Footer improvements */ .footer-area { background: #0d0d0d !important; } .single-footer-widget p { color: #999; line-height: 1.8; font-size: 0.92rem; } .footer-contact-info span { display: block; color: #999; margin-bottom: 4px; font-size: 0.88rem; } .footer-contact-info a { color: #DD1C71 !important; text-decoration: none; } .footer-contact-info a:hover { color: #c5a059 !important; } .copyright-area-content a { color: #DD1C71 !important; } .copyright-area-content p { color: #777; } /* 17. WhatsApp widget -- lift above sticky buttons on mobile */ @media (max-width: 768px) { .wa-widget-container { bottom: 100px !important; } } /* 19. Section spacing consistency */ .services-section { padding: 60px 0 !important; } .specialists-box { margin-top: 30px; } .faq-section { padding: 50px 20px !important; } /* 20. FAQ active item smooth open */ .faq-item.active .faq-answer { max-height: 400px !important; } /* 21. Appointment info section */ .appointment-info { height: 100%; border-radius: 8px; } .appointment-info h2 { font-size: 1.5rem !important; line-height: 1.4; } @media (max-width: 767px) { .appointment-info { margin-top: 20px; } } /* 22. Section title underline accent */ .section-title { position: relative; padding-bottom: 15px; display: inline-block; left: 50%; transform: translateX(-50%); } .section-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: linear-gradient(90deg, #DD1C71, #c5a059); border-radius: 2px; } /* ===== NEW COMPONENT STYLES ===== */ /* Navbar phone CTA -- mobile round pill */ .navbar-phone-mobile { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: #DD1C71; color: #fff !important; border-radius: 50%; font-size: 20px; text-decoration: none; transition: background 0.2s; flex-shrink: 0; } .navbar-phone-mobile:hover { background: #a50d4a; color: #fff !important; } /* Navbar phone CTA -- desktop pill */ .navbar-phone-desktop { background: #DD1C71; color: #fff !important; border-radius: 25px; padding: 8px 18px; font-size: 0.9rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background 0.2s; flex-shrink: 0; } .navbar-phone-desktop:hover { background: #a50d4a; color: #fff !important; } .navbar-phone-desktop i { font-size: 1rem; vertical-align: middle; } /* Trust Stats Bar */ .trust-stats-bar { background: linear-gradient(135deg, #DD1C71 0%, #a50d4a 100%); padding: 22px 0; } .trust-stats-row { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 15px; } .trust-stat { text-align: center; color: #fff; } .stat-number { display: block; font-size: 1.8rem; font-weight: 700; line-height: 1.1; } .stat-label { font-size: 0.78rem; opacity: 0.9; text-transform: uppercase; letter-spacing: 1px; } @media (max-width: 576px) { .trust-stats-row { justify-content: center; gap: 20px 30px; } .trust-stat { min-width: calc(50% - 30px); } .stat-number { font-size: 1.4rem; } } /* Doctor profiles section */ .dentists-section { background: #f8f9fa; } .dentists-intro { color: #555; max-width: 700px; margin: 0 auto 10px; display: block; } .dentists-note { color: #555; max-width: 650px; margin: 0 auto; } .doctor-profile-card { display: flex; gap: 20px; align-items: flex-start; background: #fff; border-radius: 12px; padding: 25px; box-shadow: 0 4px 20px rgba(221, 28, 113, 0.08); border-top: 4px solid #DD1C71; height: 100%; } .doctor-avatar { width: 90px; height: 90px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 3px solid #fceef4; background: #fceef4; display: flex; align-items: center; justify-content: center; } .doctor-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; } .doctor-avatar-icon i { font-size: 60px; color: #DD1C71; } .doctor-details h3 { color: #DD1C71; font-size: 1.15rem; margin-bottom: 3px; } .doctor-qual { color: #555; font-size: 0.88rem; margin-bottom: 5px; } .doctor-location { color: #888; font-size: 0.83rem; margin-bottom: 10px; } .doctor-location i { color: #DD1C71; } .doctor-spec-list { list-style: none; padding: 0; margin: 0; } .doctor-spec-list li { font-size: 0.88rem; color: #555; padding: 2px 0 2px 16px; position: relative; } .doctor-spec-list li::before { content: "\2713"; position: absolute; left: 0; color: #DD1C71; font-weight: bold; font-size: 0.8rem; } @media (max-width: 480px) { .doctor-profile-card { flex-direction: column; align-items: center; text-align: center; } .doctor-spec-list li { padding-left: 0; } .doctor-spec-list li::before { display: none; } } /* Locations -- map directions button */ .map-directions-btn { display: inline-flex; align-items: center; gap: 5px; background: #DD1C71; color: #fff !important; padding: 7px 16px; border-radius: 20px; font-size: 0.85rem; text-decoration: none; margin-top: 10px; transition: background 0.2s; } .map-directions-btn:hover { background: #a50d4a; } .locations-section .info-card p { color: #555; margin-bottom: 6px; font-size: 0.92rem; } .locations-section h2 { margin-bottom: 30px; } /* Footer -- new phone grid layout */ .footer-branch p { margin-bottom: 0; } .footer-branch strong { color: #ccc; font-size: 0.9rem; } .footer-addr { color: #999 !important; font-size: 0.85rem; line-height: 1.5; margin-top: 3px !important; } .footer-hours { color: #999; font-size: 0.85rem; margin-top: 12px; } .footer-hours i { color: #DD1C71; margin-right: 4px; } .footer-phone-group .footer-branch-label { color: #c5a059; font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; } .footer-phone-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; } .f-ph-dept { color: #666; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; } .footer-phone-grid a { color: #DD1C71 !important; font-size: 0.85rem; text-decoration: none; } .footer-phone-grid a:hover { color: #c5a059 !important; } /* Footer -- social icons */ .footer-social-links { display: flex; gap: 8px; margin-top: 15px; flex-wrap: wrap; } .footer-social-links a { width: 36px; height: 36px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #bbb !important; font-size: 18px; transition: all 0.3s; text-decoration: none; } .footer-social-links a:hover { background: #DD1C71; color: #fff !important; } /* ====================================================== DESIGN OVERHAUL -- Announcement Bar, Header, Form, Footer ====================================================== */ /* --- Announcement Bar --- */ .announcement-bar { background: linear-gradient(90deg, #8a0735 0%, #DD1C71 45%, #c5a059 100%); color: #fff; padding: 9px 20px; font-size: 0.84rem; text-align: center; position: relative; z-index: 1100; } .announcement-bar strong { color: #fff9e6; } .ann-star { color: #ffdc77; vertical-align: middle; margin-right: 4px; } .ann-book-btn { display: inline-block; background: rgba(255,255,255,0.18); color: #fff !important; padding: 3px 14px; border-radius: 20px; text-decoration: none; font-weight: 600; border: 1px solid rgba(255,255,255,0.5); transition: background 0.2s; font-size: 0.82rem; white-space: nowrap; } .ann-book-btn:hover { background: rgba(255,255,255,0.35); color: #fff !important; } .ann-close { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: none; color: rgba(255,255,255,0.7); font-size: 20px; cursor: pointer; line-height: 1; padding: 0; transition: color 0.2s; } .ann-close:hover { color: #fff; } @media (max-width: 480px) { .announcement-bar { font-size: 0.76rem; padding: 8px 36px 8px 10px; } } /* --- Header: scrolled state glow (merged into header.scrolled) --- */ header.scrolled { box-shadow: 0 4px 30px rgba(221, 28, 113, 0.15) !important; background: rgba(255,255,255,0.98) !important; backdrop-filter: blur(10px); } /* Nav links: elegant centre-out underline on hover */ .navbar-nav > .nav-item > .nav-link { position: relative; font-weight: 500 !important; font-size: 0.92rem !important; color: #333 !important; letter-spacing: 0.15px; padding-bottom: 6px !important; transition: color 0.2s !important; } .navbar-nav > .nav-item > .nav-link::after { content: ''; position: absolute; bottom: 0; left: 50%; right: 50%; height: 2px; background: linear-gradient(90deg, #DD1C71, #c5a059); border-radius: 2px; transition: left 0.25s ease, right 0.25s ease; } .navbar-nav > .nav-item > .nav-link:hover { color: #DD1C71 !important; } .navbar-nav > .nav-item > .nav-link:hover::after { left: 0; right: 0; } .navbar-nav > .nav-item.active > .nav-link { color: #DD1C71 !important; } .navbar-nav > .nav-item.active > .nav-link::after { left: 0; right: 0; } /* --- Booking Toast (inside form panel) --- */ #booking-toast { display: none; background: linear-gradient(135deg, #1a9c42, #14a83b); color: #fff; padding: 14px 18px; border-radius: 10px; margin-bottom: 18px; animation: toastIn 0.4s ease; align-items: flex-start; gap: 12px; border-left: 4px solid #0d7a2e; } #booking-toast i { font-size: 26px; flex-shrink: 0; margin-top: 2px; } #booking-toast div { display: flex; flex-direction: column; gap: 3px; } #booking-toast strong { font-size: 0.95rem; font-weight: 700; display: block; } #booking-toast span { font-size: 0.83rem; opacity: 0.9; } @keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* --- Book Appointment Section --- */ .book-appt-section { margin: 50px 0; overflow: hidden; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.1); max-width: 1100px; margin-left: auto; margin-right: auto; } .book-appt-inner { display: flex; min-height: 620px; } /* Form panel */ .book-form-panel { flex: 1 1 50%; padding: 50px 48px; background: #fff; } .book-form-eyebrow { display: inline-block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 2px; color: #c5a059; font-weight: 700; margin-bottom: 8px; } .book-form-header h2 { font-size: 1.85rem !important; font-weight: 800 !important; color: #1a1a1a !important; margin-bottom: 6px !important; line-height: 1.2 !important; letter-spacing: -0.3px !important; } .book-form-header p { color: #888; font-size: 0.9rem; margin-bottom: 28px; } /* Form rows */ .bf-row { display: flex; gap: 14px; } .bf-row .bf-field { flex: 1; } .bf-field { position: relative; margin-bottom: 14px; } .bf-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #DD1C71; font-size: 17px; pointer-events: none; z-index: 1; } .bf-field-textarea .bf-icon { top: 14px; transform: none; } .bf-select-arrow { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #aaa; font-size: 16px; pointer-events: none; } .bf-field input, .bf-field select, .bf-field textarea { width: 100%; padding: 13px 14px 13px 42px; border: 1.5px solid #eee; border-radius: 10px; font-size: 0.93rem; font-family: 'Poppins', sans-serif !important; color: #333; background: #fafafa; transition: border-color 0.22s, box-shadow 0.22s, background 0.22s; outline: none; -webkit-appearance: none; appearance: none; } .bf-field input::placeholder, .bf-field textarea::placeholder { color: #bbb; } .bf-field input:focus, .bf-field select:focus, .bf-field textarea:focus { border-color: #DD1C71; box-shadow: 0 0 0 4px rgba(222,82,143,0.1); background: #fff; } .bf-field textarea { resize: none; } /* Submit button */ .bf-submit-btn { width: 100%; padding: 15px; background: linear-gradient(135deg, #DD1C71 0%, #a50d4a 100%); color: #fff; border: none; border-radius: 10px; font-size: 1rem; font-weight: 700; font-family: 'Poppins', sans-serif !important; cursor: pointer; transition: all 0.3s; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; letter-spacing: 0.2px; box-shadow: 0 4px 20px rgba(181,21,94,0.3); } .bf-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(181,21,94,0.45); } .bf-submit-btn:active { transform: translateY(0); } /* Divider */ .bf-divider { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; color: #ccc; font-size: 0.8rem; } .bf-divider::before, .bf-divider::after { content: ''; flex: 1; height: 1px; background: #eee; } /* WhatsApp button */ .bf-whatsapp-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; background: #25d366; color: #fff !important; border-radius: 10px; font-size: 0.95rem; font-weight: 600; font-family: 'Poppins', sans-serif !important; text-decoration: none; transition: all 0.3s; box-shadow: 0 4px 16px rgba(37,211,102,0.3); } .bf-whatsapp-btn:hover { background: #1ab854; transform: translateY(-2px); box-shadow: 0 6px 22px rgba(37,211,102,0.45); color: #fff !important; } .bf-whatsapp-btn i { font-size: 21px; } /* Info panel */ .book-info-panel { flex: 1 1 45%; background: linear-gradient(150deg, #c51262 0%, #7c003b 50%, #3d0020 100%); padding: 50px 45px; color: #fff; display: flex; align-items: center; position: relative; overflow: hidden; } .book-info-panel::before { content: ''; position: absolute; top: -80px; right: -80px; width: 280px; height: 280px; background: rgba(255,255,255,0.04); border-radius: 50%; } .book-info-panel::after { content: ''; position: absolute; bottom: -60px; left: -60px; width: 200px; height: 200px; background: rgba(255,255,255,0.03); border-radius: 50%; } .book-info-content { position: relative; z-index: 1; } .book-info-badge { display: inline-block; background: rgba(255,220,119,0.15); border: 1px solid rgba(255,220,119,0.4); color: #ffdc77; padding: 5px 16px; border-radius: 20px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 18px; font-weight: 600; } .book-info-panel h3 { font-size: 1.55rem; font-weight: 700; margin-bottom: 22px; line-height: 1.35; color: #fff; } .book-reasons { list-style: none; padding: 0; margin: 0 0 24px; } .book-reasons li { padding: 7px 0; font-size: 0.91rem; opacity: 0.95; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,0.07); } .book-reasons li:last-child { border-bottom: none; } .book-reasons i { font-size: 17px; color: #ffdc77; flex-shrink: 0; } .book-info-stats { display: flex; gap: 0; margin-bottom: 22px; background: rgba(255,255,255,0.08); border-radius: 12px; overflow: hidden; } .bi-stat { flex: 1; text-align: center; padding: 14px 8px; border-right: 1px solid rgba(255,255,255,0.1); } .bi-stat:last-child { border-right: none; } .bi-stat span { display: block; font-size: 1.35rem; font-weight: 800; color: #ffdc77; line-height: 1; margin-bottom: 4px; } .bi-stat small { font-size: 0.68rem; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.5px; } .book-contact-chips { display: flex; flex-direction: column; gap: 8px; } .book-contact-chips a { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.1); color: #fff !important; padding: 9px 16px; border-radius: 8px; font-size: 0.88rem; text-decoration: none; border: 1px solid rgba(255,255,255,0.15); transition: background 0.2s; font-weight: 500; } .book-contact-chips a:hover { background: rgba(255,255,255,0.22); } .book-contact-chips i { color: #ffdc77; font-size: 16px; } /* Responsive form */ @media (max-width: 900px) { .book-appt-inner { flex-direction: column; } .book-form-panel { padding: 35px 25px; } .book-info-panel { padding: 35px 25px; } .bf-row { flex-direction: column; gap: 0; } .book-appt-section { border-radius: 0; margin: 30px 0; } } @media (max-width: 480px) { .book-form-panel { padding: 25px 16px; } .book-form-header h2 { font-size: 1.5rem !important; } } /* --- Pre-Footer CTA --- */ .footer-precta { background: linear-gradient(135deg, #DD1C71 0%, #9c0e45 100%); padding: 45px 0; width: 100vw !important; position: relative; left: 50%; right: 50%; margin-left: -50vw !important; margin-right: -50vw !important; box-sizing: border-box; } .footer-precta-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .fp-text h3 { color: #fff; font-size: 1.55rem; font-weight: 700; margin-bottom: 6px; line-height: 1.25; } .fp-text p { color: rgba(255,255,255,0.8); font-size: 0.95rem; margin: 0; } .fp-actions { display: flex; gap: 12px; flex-wrap: wrap; } .fp-call-btn, .fp-book-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; border-radius: 50px; font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: all 0.3s; white-space: nowrap; } .fp-call-btn { background: #fff; color: #DD1C71 !important; box-shadow: 0 4px 15px rgba(0,0,0,0.15); } .fp-call-btn:hover { background: #fceef4; transform: translateY(-2px); box-shadow: 0 6px 22px rgba(0,0,0,0.2); color: #DD1C71 !important; } .fp-book-btn { background: transparent; color: #fff !important; border: 2px solid rgba(255,255,255,0.65); } .fp-book-btn:hover { background: rgba(255,255,255,0.15); transform: translateY(-2px); border-color: #fff; } @media (max-width: 767px) { .footer-precta-inner { text-align: center; justify-content: center; } .fp-text h3 { font-size: 1.25rem; } } /* ============================================= FTX FOOTER ============================================= */ .ftx-footer { background: #000; border-top: 3px solid transparent; border-image: linear-gradient(90deg, #DD1C71 0%, #c5a059 50%, #DD1C71 100%) 1; padding: 60px 0 40px; width: 100vw !important; position: relative; left: 50%; right: 50%; margin-left: -50vw !important; margin-right: -50vw !important; box-sizing: border-box; } /* Top row: brand + tagline + social */ .ftx-top-row { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding-bottom: 36px; margin-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,0.07); } .ftx-brand-block { max-width: 460px; } .ftx-brand-logo { display: inline-block; margin-bottom: 16px; text-decoration: none; background: #ffffff; border-radius: 12px; padding: 10px 22px; box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.06); transition: box-shadow 0.25s ease, transform 0.25s ease; } .ftx-brand-logo:hover { box-shadow: 0 6px 32px rgba(221,28,113,0.3), 0 2px 0 rgba(255,255,255,0.1); transform: translateY(-2px); } .ftx-logo-img { max-height: 52px; width: auto; display: block; } .ftx-tagline { color: #6b7280; font-size: 0.86rem; line-height: 1.7; margin: 0 0 18px; } .ftx-social { display: flex; gap: 10px; flex-wrap: wrap; } .ftx-social a { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; color: #888; font-size: 18px; text-decoration: none; transition: all 0.25s; } .ftx-social a:hover { background: linear-gradient(135deg, #DD1C71, #c5a059); color: #fff; border-color: transparent; transform: translateY(-3px); box-shadow: 0 6px 18px rgba(221,28,113,0.35); } /* 4-column grid */ .ftx-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .ftx-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 22px 20px; height: 100%; transition: border-color 0.25s; } .ftx-card:hover { border-color: rgba(221,28,113,0.25); } /* Column heading */ .ftx-col-heading { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 1.8px; color: #ecf0f1; font-weight: 700; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, #c5a059, #DD1C71) 1; display: flex; align-items: center; gap: 8px; } .ftx-col-heading i { color: #c5a059; font-size: 16px; } /* Links list */ .ftx-links { list-style: none; padding: 0; margin: 0; } .ftx-links li { margin-bottom: 9px; } .ftx-links a { color: #6b7280; font-size: 0.87rem; text-decoration: none; display: flex; align-items: center; gap: 6px; transition: all 0.2s; } .ftx-links a::before { content: "\203A"; color: #c5a059; font-size: 1.1rem; flex-shrink: 0; transition: transform 0.2s; } .ftx-links a:hover { color: #DD1C71; padding-left: 4px; } .ftx-links a:hover::before { transform: translateX(3px); } /* Branch info */ .ftx-branch { margin-bottom: 14px; } .ftx-branch-name { display: block; font-weight: 700; color: #c5a059; font-size: 0.9rem; margin-bottom: 5px; } .ftx-branch p { color: #6b7280; font-size: 0.82rem; line-height: 1.6; margin: 2px 0; } .ftx-branch p a { color: #bdc3c7; text-decoration: none; font-size: 0.82rem; } .ftx-branch p a:hover { color: #DD1C71; } .ftx-ph-icon { color: #c5a059; margin-right: 4px; font-size: 13px; } .ftx-hours { color: #555; font-size: 0.8rem; line-height: 1.7; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.05); } .ftx-hours i { color: #c5a059; margin-right: 4px; } /* Phone list */ .ftx-branch-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: #c5a059; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.06); } .ftx-phone-list { margin-bottom: 6px; } .ftx-phone-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 0.83rem; } .ftx-phone-row:last-child { border-bottom: none; } .ftx-phone-row span { color: #555; } .ftx-phone-row a { color: #bdc3c7; text-decoration: none; font-weight: 500; transition: color 0.2s; } .ftx-phone-row a:hover { color: #DD1C71; } /* Copyright bar */ .ftx-copyright { background: #233140; padding: 14px 0; width: 100vw !important; position: relative; left: 50%; right: 50%; margin-left: -50vw !important; margin-right: -50vw !important; box-sizing: border-box; } .ftx-copyright-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .ftx-copyright p { color: #6b7280; font-size: 0.8rem; margin: 0; } .ftx-copyright a { color: #DD1C71; text-decoration: none; } .ftx-copyright a:hover { text-decoration: underline; } .ftx-made { color: #c5a059; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.5px; } /* Footer responsive */ @media (max-width: 1024px) { .ftx-cols { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .ftx-cols { grid-template-columns: 1fr; } .ftx-footer { padding: 40px 0 24px; } .ftx-top-row { padding-bottom: 24px; margin-bottom: 24px; } .ftx-copyright-inner { flex-direction: column; text-align: center; } } @media (max-width: 768px) { /* Add bottom padding so copyright text clears the fixed sticky bar (~64px tall) */ .ftx-copyright { padding-bottom: 70px; } } /* ---------------------------------------------- ROOT FIX: earlier code forces display:block on .row which kills Bootstrap flexbox grid. Restore it here so col-md-* columns work. ---------------------------------------------- */ @media (max-width: 768px) { .row { display: flex !important; flex-wrap: wrap !important; } } /* ---------------------------------------------- ANNOUNCEMENT BAR ---------------------------------------------- */ @media (max-width: 600px) { .announcement-bar { padding: 9px 38px 9px 10px !important; font-size: 0.78rem !important; } /* Override Bootstrap d-flex flex-wrap on the inner container */ .announcement-bar .container, .announcement-bar > .container { flex-direction: column !important; flex-wrap: nowrap !important; gap: 6px !important; padding-left: 0 !important; padding-right: 0 !important; align-items: center !important; } .announcement-bar span { line-height: 1.4; text-align: center; } .ann-book-btn { font-size: 0.76rem !important; padding: 4px 14px !important; margin-top: 2px; } .ann-star { font-size: 10px !important; } } /* ---------------------------------------------- NAVBAR ---------------------------------------------- */ @media (max-width: 991px) { .navbar-brand img { max-height: 40px !important; } .navbar-phone-mobile { width: 40px !important; height: 40px !important; font-size: 19px !important; border-radius: 50% !important; flex-shrink: 0; } } @media (max-width: 991px) { .navbar-nav .nav-link { padding: 10px 6px !important; min-height: 44px; display: flex; align-items: center; } } /* ---------------------------------------------- HERO SECTION (h1 + .intro-text + .cta-button) ---------------------------------------------- */ @media (max-width: 576px) { .hero-section { padding: 46px 15px 36px !important; } .hero-section h1 { font-size: 1.5rem !important; line-height: 1.3 !important; margin-bottom: 14px; } .hero-section .intro-text { font-size: 0.9rem !important; margin-bottom: 22px; } .hero-section .cta-button { display: block !important; width: 100% !important; max-width: 300px !important; margin: 16px auto 0 !important; padding: 14px 20px !important; font-size: 0.95rem !important; text-align: center; } .hero-section .services-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-top: 22px; } .hero-section .service-tag { font-size: 0.78rem !important; padding: 9px 8px !important; text-align: center; } } /* ---------------------------------------------- TRUST STATS BAR -- 2x2 on mobile ---------------------------------------------- */ @media (max-width: 576px) { .trust-stats-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; } .trust-stat { padding: 14px 10px !important; border-right: 1px solid rgba(0,0,0,0.07); border-bottom: 1px solid rgba(0,0,0,0.07); } .trust-stat:nth-child(2n) { border-right: none; } .trust-stat:nth-child(3), .trust-stat:nth-child(4) { border-bottom: none; } .stat-number { font-size: 1.3rem !important; } .stat-label { font-size: 0.7rem !important; } } /* ---------------------------------------------- SPECIALISTS BOX -- already has CSS, reinforce ---------------------------------------------- */ @media (max-width: 576px) { .specialists-box { padding: 28px 15px !important; margin: 0 !important; border-radius: 0 !important; } .specialists-container { flex-direction: column-reverse !important; gap: 16px !important; } .specialist-image-side img { width: 100%; max-width: 280px; margin: 0 auto; display: block; } .specialist-list { grid-template-columns: 1fr 1fr !important; gap: 8px; } .specialist-tag { font-size: 0.82rem !important; padding: 7px 10px !important; text-align: left; } } /* ---------------------------------------------- DOCTOR PROFILE CARDS (.col-md-6 uses .row) ---------------------------------------------- */ @media (max-width: 576px) { .dentists-section .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; } .doctor-profile-card { flex-direction: column !important; align-items: center !important; text-align: center; padding: 20px 16px !important; gap: 14px !important; } .doctor-avatar img { width: 80px !important; height: 80px !important; } .doctor-spec-list { text-align: left; } } /* ---------------------------------------------- PRICING LIST (flex rows, no table) ---------------------------------------------- */ @media (max-width: 480px) { .pricing-section { padding: 36px 12px !important; } .pricing-header h2 { font-size: 1.35rem !important; } .pricing-row { padding: 12px 14px !important; } .service-name { font-size: 0.88rem !important; } .service-price { font-size: 0.88rem !important; white-space: nowrap; } } /* ---------------------------------------------- REVIEWS CAROUSEL ---------------------------------------------- */ @media (max-width: 768px) { .od-pt-review-btns-arrows { display: none !important; } .pt-review-card { min-width: 82vw !important; max-width: 82vw !important; padding: 20px 16px !important; font-size: 0.88rem; } .od-pt-review-carousel { padding-bottom: 6px; gap: 12px !important; } } /* ---------------------------------------------- FAQ ---------------------------------------------- */ @media (max-width: 576px) { .faq-section { padding: 36px 12px !important; } .faq-question { padding: 14px 12px !important; font-size: 0.9rem !important; min-height: 52px; line-height: 1.4; } .faq-answer { padding: 10px 12px 14px !important; font-size: 0.87rem !important; line-height: 1.7; } } /* ---------------------------------------------- LOCATIONS SECTION -- remove side margin ---------------------------------------------- */ @media (max-width: 768px) { .locations-section { margin: 8px 0 !important; border-radius: 0 !important; padding: 36px 14px !important; } .location-grid { grid-template-columns: 1fr !important; gap: 16px; } .info-card { padding: 18px 14px !important; } } /* ---------------------------------------------- APPOINTMENT FORM ---------------------------------------------- */ @media (max-width: 768px) { .book-appt-section { margin: 24px 0 !important; border-radius: 0 !important; } .book-form-panel { padding: 28px 16px !important; } .book-form-header h2 { font-size: 1.4rem !important; } .book-info-panel { padding: 28px 16px !important; } /* Prevent iOS zoom on input focus */ .bf-field input, .bf-field select, .bf-field textarea { font-size: 16px !important; } .bf-submit-btn, .bf-whatsapp-btn { min-height: 48px !important; font-size: 0.92rem !important; } } /* ---------------------------------------------- BRAND CLOSING CTA -- remove side margin ---------------------------------------------- */ @media (max-width: 768px) { .brand-closing { margin: 0 !important; border-radius: 0 !important; padding: 38px 16px !important; } .brand-closing h3 { font-size: 1.35rem !important; } .brand-closing .cta-button, .brand-closing .cta-btn { display: block !important; width: 100% !important; max-width: 280px !important; margin: 16px auto 0 !important; text-align: center; min-height: 48px; line-height: 48px; padding: 0 20px !important; } } /* ---------------------------------------------- PRE-FOOTER CTA ---------------------------------------------- */ @media (max-width: 576px) { .footer-precta-inner { flex-direction: column !important; text-align: center; gap: 16px; } .fp-actions { flex-direction: column !important; align-items: center; gap: 10px; width: 100%; } .fp-call-btn, .fp-book-btn { width: 100% !important; max-width: 270px !important; justify-content: center !important; min-height: 48px !important; } } /* ---------------------------------------------- FOOTER CARDS ---------------------------------------------- */ @media (max-width: 480px) { .ftx-card { padding: 16px 12px; } .ftx-logo-img { max-height: 40px; } .ftx-brand-logo { padding: 8px 16px; border-radius: 10px; } .ftx-social a { width: 34px; height: 34px; font-size: 15px; } .ftx-phone-row { font-size: 0.79rem; } .ftx-branch p { font-size: 0.79rem; } } /* ---------------------------------------------- WHATSAPP WIDGET -- above sticky bar ---------------------------------------------- */ @media (max-width: 768px) { .wa-widget-container { bottom: 82px !important; right: 12px !important; } } /* ---------------------------------------------- REVIEW CAROUSEL -- touch/swipe ---------------------------------------------- */ .od-pt-review-carousel { touch-action: pan-x !important; -webkit-overflow-scrolling: touch; } @media (max-width: 768px) { .pt-review-card { width: 82vw !important; min-width: 82vw !important; } } /* ---------------------------------------------- SPECIALISTS BOX -- remove overflow margin ---------------------------------------------- */ @media (max-width: 768px) { .specialists-box { margin-top: 20px !important; margin-left: 0 !important; margin-right: 0 !important; border-radius: 12px !important; padding: 28px 16px !important; } } /* ---------------------------------------------- SERVICES SECTION -- single column on mobile ---------------------------------------------- */ @media (max-width: 576px) { .services-container { grid-template-columns: 1fr !important; } .features-grid { grid-template-columns: 1fr !important; } .specialist-list { grid-template-columns: 1fr 1fr !important; } } /* ---------------------------------------------- VIDEO SECTION ---------------------------------------------- */ .video-section { padding: 70px 0; background: #f8fafc; } .section-header-center { text-align: center; margin-bottom: 40px; } .section-badge { display: inline-block; background: rgba(221,28,113,0.1); color: #DD1C71; font-size: 0.75rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 14px; border-radius: 50px; margin-bottom: 10px; } .section-title-main { font-size: 2rem; font-weight: 800; color: #1a1a2e; line-height: 1.25; margin-bottom: 10px; } .highlight-pink { color: #DD1C71; } .section-sub { color: #6b7280; font-size: 0.95rem; max-width: 600px; margin: 0 auto; } .video-carousel-wrapper { position: relative; } .video-carousel { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 8px 4px 20px; scrollbar-width: none; } .video-carousel::-webkit-scrollbar { display: none; } .video-card { flex: 0 0 300px; scroll-snap-align: start; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 18px rgba(0,0,0,0.08); transition: transform 0.25s ease, box-shadow 0.25s ease; } .video-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(221,28,113,0.15); } .video-thumb-wrap { position: relative; cursor: pointer; overflow: hidden; aspect-ratio: 16/9; background: #000; } .video-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.2s; } .video-thumb-wrap:hover .video-thumb-img { opacity: 0.8; } .video-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; background: rgba(221,28,113,0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.6rem; transition: transform 0.2s, background 0.2s; pointer-events: none; } .video-thumb-wrap:hover .video-play-btn { transform: translate(-50%, -50%) scale(1.1); background: #DD1C71; } .video-duration-badge { position: absolute; bottom: 8px; left: 10px; background: rgba(0,0,0,0.7); color: #fff; font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: 4px; } .video-iframe-wrap { width: 100%; aspect-ratio: 16/9; } .video-iframe-wrap iframe { width: 100%; height: 100%; border: none; display: block; } .video-card-info { padding: 16px; } .video-card-title { font-size: 0.95rem; font-weight: 700; color: #1a1a2e; margin: 0 0 6px; line-height: 1.35; } .video-card-desc { font-size: 0.82rem; color: #6b7280; margin: 0; line-height: 1.5; } .video-arrow, .blog-arrow { position: absolute; top: 50%; transform: translateY(-60%); width: 42px; height: 42px; border-radius: 50%; border: 2px solid #DD1C71; background: #fff; color: #DD1C71; font-size: 1.6rem; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; z-index: 10; transition: background 0.2s, color 0.2s; } .video-arrow:hover { background: #DD1C71; color: #fff; } .video-arrow-prev { left: -16px; } .video-arrow-next { right: -16px; } .blog-arrow { border-color: #c5a059; color: #c5a059; } .blog-arrow:hover { background: #c5a059; color: #fff; } .blog-arrow-prev { left: -16px; } .blog-arrow-next { right: -16px; } /* ---------------------------------------------- BLOG SECTION ---------------------------------------------- */ .blog-section { padding: 70px 0; background: #fff; } .blog-carousel-wrapper { position: relative; } .blog-carousel { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 8px 4px 20px; scrollbar-width: none; } .blog-carousel::-webkit-scrollbar { display: none; } .blog-card { flex: 0 0 300px; scroll-snap-align: start; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 18px rgba(0,0,0,0.07); border: 1px solid #f0f0f0; transition: transform 0.25s ease, box-shadow 0.25s ease; display: flex; flex-direction: column; } .blog-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(221,28,113,0.12); } .blog-card-img-wrap { position: relative; height: 160px; overflow: hidden; } .blog-card-img-placeholder { width: 100%; height: 100%; } .blog-img-1 { background: linear-gradient(135deg, #DD1C71 0%, #f06292 100%); } .blog-img-2 { background: linear-gradient(135deg, #c5a059 0%, #e8c97c 100%); } .blog-img-3 { background: linear-gradient(135deg, #1a237e 0%, #3949ab 100%); } .blog-img-4 { background: linear-gradient(135deg, #00695c 0%, #26a69a 100%); } .blog-img-5 { background: linear-gradient(135deg, #b71c1c 0%, #ef5350 100%); } .blog-img-6 { background: linear-gradient(135deg, #7b1fa2 0%, #ba68c8 100%); } .blog-category-badge { position: absolute; top: 12px; left: 12px; background: rgba(0,0,0,0.55); color: #fff; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 3px 10px; border-radius: 20px; backdrop-filter: blur(4px); } .blog-card-body { padding: 18px 16px 20px; display: flex; flex-direction: column; flex: 1; } .blog-date { font-size: 0.75rem; color: #9ca3af; margin-bottom: 7px; display: block; } .blog-title { font-size: 0.95rem; font-weight: 700; color: #1a1a2e; line-height: 1.4; margin: 0 0 8px; } .blog-excerpt { font-size: 0.82rem; color: #6b7280; line-height: 1.55; margin: 0 0 14px; flex: 1; } .blog-read-more { display: inline-block; color: #DD1C71; font-size: 0.84rem; font-weight: 700; text-decoration: none; align-self: flex-start; transition: color 0.2s; } .blog-read-more:hover { color: #a50d4a; } .blog-read-more.blog-emergency { color: #b71c1c; } @media (max-width: 768px) { .video-section, .blog-section { padding: 46px 0; } .section-title-main { font-size: 1.45rem; } .video-card { flex: 0 0 82vw; } .blog-card { flex: 0 0 82vw; } .video-arrow, .blog-arrow { display: none; } } /* ---------------------------------------------- SMOOTH SCROLL + BACK TO TOP ---------------------------------------------- */ html { scroll-behavior: smooth; } #backToTop { position: fixed; bottom: 38px; left: 22px; right: auto; z-index: 99998; width: 44px; height: 44px; border-radius: 50%; background: #DD1C71; color: #fff; border: none; font-size: 1.2rem; cursor: pointer; box-shadow: 0 4px 14px rgba(221,28,113,0.35); display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(12px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; } #backToTop.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } #backToTop:hover { background: #a50d4a; transform: translateY(-2px); } /* Hide back-to-top on mobile -- sticky buttons already handle this */ @media (max-width: 767.98px) { #backToTop { display: none; } } /* ---------------------------------------------- HERO DUAL CTA ---------------------------------------------- */ .hero-cta-group { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .cta-button-secondary { display: inline-flex; align-items: center; gap: 7px; padding: 14px 28px; border: 2px solid #DD1C71; color: #DD1C71; background: rgba(221,28,113,0.06); border-radius: 50px; font-weight: 700; font-size: 1rem; text-decoration: none; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; white-space: nowrap; box-shadow: 0 2px 10px rgba(221,28,113,0.15); } .cta-button-secondary:hover { background: #DD1C71; color: #fff; box-shadow: 0 4px 18px rgba(221,28,113,0.4); } @media (max-width: 576px) { .hero-cta-group { flex-direction: column; align-items: stretch; } .cta-button-secondary { justify-content: center; font-size: 0.95rem; padding: 13px 20px; } } /* ---------------------------------------------- ACTIVE NAV ITEM ---------------------------------------------- */ .nav-item-active > .nav-link { color: #DD1C71 !important; font-weight: 700; position: relative; } .nav-item-active > .nav-link::after { content: ''; position: absolute; bottom: -2px; left: 8px; right: 8px; height: 2px; background: #DD1C71; border-radius: 2px; } /* ---------------------------------------------- GLOBAL MOBILE POLISH ---------------------------------------------- */ @media (max-width: 768px) { /* Prevent iOS double-tap zoom */ a, button { -webkit-tap-highlight-color: rgba(221,28,113,0.12); } /* Prevent iOS zoom on input focus */ input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; } /* No horizontal overflow */ html, body { overflow-x: hidden !important; } /* Stop flex children from pushing outside the container */ .container, .row, section, .ftx-footer, .ftx-copyright { min-width: 0; } /* Consistent container padding */ .container { padding-left: 14px !important; padding-right: 14px !important; } } /* ---------------------------------------------- CWV -- CLS PREVENTION: reserve space for images that load inside fixed-size CSS containers ---------------------------------------------- */ .reviewer-img img { width: 58px; height: 58px; object-fit: cover; } /* aspect-ratio on hero image prevents CLS while loading */ .hero-visual-img { aspect-ratio: 360 / 440; } /* INP: remove costly transition on elements that animate constantly */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* content-visibility: auto defers rendering of off-screen sections, improving LCP by freeing main-thread time for above-fold paint */ .pricing-section, .faq-section, .blog-section, .eeat-section, .deep-content-section, .od-pt-review-carousel-wrapper { content-visibility: auto; contain-intrinsic-size: 0 600px; } /* ---------------------------------------------- DEEP CONTENT -- Long-form SEO section ---------------------------------------------- */ .deep-content-section { padding: 70px 0; background: #fff; border-top: 1px solid #f0f0f0; } .deep-content-grid { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; } .dc-heading { font-size: 1.65rem; font-weight: 800; color: #1a1a2e; margin-bottom: 18px; line-height: 1.3; } .dc-main > h3 { font-size: 1.1rem; font-weight: 700; color: #DD1C71; margin: 28px 0 10px; padding-left: 14px; border-left: 4px solid #c5a059; } .dc-main > p { color: #444; font-size: 0.94rem; line-height: 1.8; margin-bottom: 14px; } .dc-list { list-style: none; padding: 0; margin: 10px 0 24px; border: 1px solid #f5f5f5; border-radius: 12px; overflow: hidden; } .dc-list li { padding: 10px 16px 10px 38px; position: relative; font-size: 0.92rem; color: #444; border-bottom: 1px solid #f5f5f5; line-height: 1.5; } .dc-list li:last-child { border-bottom: none; } .dc-list li::before { content: ''; position: absolute; left: 14px; top: 18px; width: 8px; height: 8px; background: #DD1C71; border-radius: 50%; } .dc-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 80px; } .dc-card { background: #fff; border-radius: 16px; padding: 22px 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.07); border: 1px solid rgba(221,28,113,0.08); } .dc-card h4 { font-size: 0.95rem; font-weight: 700; color: #DD1C71; margin: 0 0 14px; display: flex; align-items: center; gap: 6px; } .dc-card h4 i { font-size: 1.1rem; } .dc-loc-item { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #f0f0f0; } .dc-loc-item:last-of-type { margin-bottom: 0; padding-bottom: 0; border: none; } .dc-loc-item strong { display: block; font-size: 0.9rem; color: #1a1a2e; margin-bottom: 3px; } .dc-loc-item span { display: block; font-size: 0.8rem; color: #6b7280; line-height: 1.45; margin-bottom: 6px; } .dc-loc-item a { display: inline-flex; align-items: center; gap: 5px; font-size: 0.82rem; font-weight: 700; color: #DD1C71; text-decoration: none; } .dc-hours-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 0.84rem; border-bottom: 1px solid #f0f0f0; } .dc-hours-row:last-of-type { border-bottom: none; } .dc-hours-row span:first-child { font-weight: 600; color: #1a1a2e; } .dc-hours-row span:last-child { color: #6b7280; text-align: right; } .dc-book-btn { display: flex; align-items: center; justify-content: center; gap: 7px; background: #DD1C71; color: #fff; border-radius: 10px; padding: 12px 16px; font-size: 0.88rem; font-weight: 700; text-decoration: none; margin-top: 14px; transition: background 0.2s; } .dc-book-btn:hover { background: #a50d4a; color: #fff; } .dc-kw-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; } .dc-kw-chip { background: #f8fafc; border: 1px solid #e8eaed; border-radius: 50px; padding: 4px 12px; font-size: 0.78rem; color: #555; font-weight: 500; } @media (max-width: 991px) { .deep-content-grid { grid-template-columns: 1fr; gap: 32px; } .dc-sidebar { position: static; } .deep-content-section { padding: 46px 0; } .dc-heading { font-size: 1.35rem; } } /* ---------------------------------------------- HERO SPLIT LAYOUT -- Visual hero with doctor image ---------------------------------------------- */ .hero-split { display: flex; align-items: center; gap: 48px; } .hero-content { flex: 1; min-width: 0; } .hero-visual { flex: 0 0 400px; position: relative; display: flex; align-items: center; justify-content: center; } .hero-visual-bg { position: absolute; width: 380px; height: 380px; background: radial-gradient(circle, rgba(221,28,113,0.1) 0%, rgba(197,160,89,0.05) 60%, transparent 80%); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; } .hero-visual-img { position: relative; z-index: 1; width: 100%; max-width: 360px; border-radius: 24px; box-shadow: 0 24px 64px rgba(221,28,113,0.18); display: block; object-fit: cover; object-position: top; } .hero-badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .hero-badge { display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 1.5px solid rgba(221,28,113,0.22); border-radius: 50px; padding: 5px 13px; font-size: 0.76rem; font-weight: 700; color: #DD1C71; box-shadow: 0 2px 8px rgba(221,28,113,0.08); } .hero-badge .badge-icon { font-size: 0.9rem; } .hero-float-card { position: absolute; background: #fff; border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,0.13); padding: 10px 14px; display: flex; align-items: center; gap: 10px; z-index: 2; min-width: 170px; } .hero-float-card.fc-rating { bottom: 28%; right: -18px; } .hero-float-card.fc-patients{ bottom: 4%; left: -18px; } .hero-float-card .fc-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; } .fc-rating .fc-icon { background: #fff7e6; color: #f5a623; } .fc-patients .fc-icon { background: #fce8f3; color: #DD1C71; } .hero-float-card .fc-value { font-size: 1rem; font-weight: 800; color: #1a1a2e; line-height: 1.1; } .hero-float-card .fc-label { font-size: 0.7rem; color: #9ca3af; line-height: 1.3; margin-top: 2px; } /* Override hero intro-text margin for left-aligned layout */ .hero-content .intro-text { margin: 0 0 24px; text-align: left; } .hero-content .services-grid { text-align: left; } @media (max-width: 991px) { .hero-split { flex-direction: column-reverse; gap: 28px; } .hero-visual { flex: none; width: 100%; max-width: 360px; margin: 0 auto; } .hero-content { text-align: center; } .hero-badge-row { justify-content: center; } .hero-cta-group { justify-content: center; } .hero-content .intro-text { text-align: center; margin: 0 auto 24px; } } @media (max-width: 576px) { .hero-float-card { display: none; } .hero-visual { max-width: 260px; } .hero-visual-bg { width: 240px; height: 240px; } } /* ---------------------------------------------- HERO SLIDER ---------------------------------------------- */ /* override global .hero-section rules that break slider layout */ .hero-slider-section { position: relative; overflow: hidden; padding: 0 !important; display: block !important; min-height: unset !important; align-items: unset !important; justify-content: unset !important; } .hs-slide { display: none; } .hs-slide.active { display: block; animation: hs-fadein 0.55s ease; } .hs-slide-1 { background: linear-gradient(135deg, #fff5f9 0%, #ffffff 60%, #fffbf5 100%); padding: 70px 0 60px; } .hs-slide-2 { background: linear-gradient(135deg, #0f0c29 0%, #302b63 60%, #24243e 100%); padding: 70px 0 60px; } .hs-slide-3 { background: linear-gradient(135deg, #0d0820 0%, #1e0d45 50%, #0d0820 100%); padding: 70px 0 60px; } @keyframes hs-fadein { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } /* -- Slide 2 -- */ .hs2-inner { text-align: center; max-width: 860px; margin: 0 auto; } .hs2-eyebrow { color: rgba(255,255,255,0.6); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 14px; } .hs2-title { color: #fff; font-size: clamp(1.7rem,3.5vw,2.7rem); font-weight: 900; line-height: 1.2; margin-bottom: 14px; } .hs2-gold { color: #c5a059; } .hs2-sub { color: rgba(255,255,255,0.78); font-size: 1rem; margin-bottom: 36px; max-width: 600px; margin-left: auto; margin-right: auto; } .hs2-services { display: grid; grid-template-columns: repeat(6,1fr); gap: 14px; margin-bottom: 36px; } .hs2-svc { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 22px 10px 18px; text-align: center; text-decoration: none; transition: background 0.25s ease, transform 0.25s ease; display: flex; flex-direction: column; align-items: center; gap: 10px; } .hs2-svc:hover { background: rgba(255,255,255,0.15); transform: translateY(-5px); } .hs2-svc-icon { font-size: 2rem; color: #c5a059; line-height: 1; } .hs2-svc-name { color: #fff; font-size: 0.75rem; font-weight: 600; line-height: 1.3; } .hs2-cta-btn-primary { display: inline-block; background: linear-gradient(135deg,#c5a059,#a07830); color: #fff; padding: 14px 32px; border-radius: 50px; font-weight: 800; font-size: 1rem; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 4px 18px rgba(197,160,89,0.4); } .hs2-cta-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(197,160,89,0.5); color: #fff; } .hs2-cta-btn-secondary { display: inline-flex; align-items: center; gap: 7px; padding: 13px 26px; border: 2px solid rgba(255,255,255,0.85); color: #fff; background: rgba(255,255,255,0.08); border-radius: 50px; font-weight: 700; font-size: 1rem; text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease; } .hs2-cta-btn-secondary:hover { background: rgba(255,255,255,0.2); border-color: #fff; color: #fff; } /* -- Slide 3 -- */ .hs3-inner { text-align: center; max-width: 680px; margin: 0 auto; } .hs3-offer-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.18); color: #fff; border: 1px solid rgba(255,255,255,0.35); border-radius: 50px; padding: 7px 20px; font-size: 0.85rem; font-weight: 700; margin-bottom: 22px; letter-spacing: 0.3px; } .hs3-title { color: #fff; font-size: clamp(1.8rem,4vw,2.8rem); font-weight: 900; line-height: 1.2; margin-bottom: 18px; } .hs3-gold { color: #ffe08a; } .hs3-sub { color: rgba(255,255,255,0.88); font-size: 1rem; line-height: 1.7; margin-bottom: 28px; max-width: 540px; margin-left: auto; margin-right: auto; } .hs3-trust-row { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; } .hs3-chip { color: #fff; font-weight: 600; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22); padding: 6px 14px; border-radius: 50px; } .hs3-chip i { color: #ffe08a; font-size: 0.95rem; } .hs3-cta-btn-primary { display: inline-block; background: linear-gradient(135deg, #DD1C71, #c5a059); color: #fff; padding: 14px 32px; border-radius: 50px; font-weight: 800; font-size: 1rem; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 4px 24px rgba(221,28,113,0.5); } .hs3-cta-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(221,28,113,0.65); color: #fff; } .hs3-cta-btn-secondary { display: inline-flex; align-items: center; gap: 7px; padding: 13px 26px; border: 2px solid rgba(255,255,255,0.85); color: #fff; background: rgba(255,255,255,0.08); border-radius: 50px; font-weight: 700; font-size: 1rem; text-decoration: none; transition: background 0.2s ease; } .hs3-cta-btn-secondary:hover { background: rgba(255,255,255,0.22); color: #fff; } /* -- Slider Arrows -- */ .hs-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; width: 46px; height: 46px; border-radius: 50%; background: rgba(0,0,0,0.28); border: 1.5px solid rgba(255,255,255,0.3); color: #fff; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .hs-arrow:hover { background: #DD1C71; border-color: #DD1C71; transform: translateY(-50%) scale(1.08); } .hs-prev { left: 14px; } .hs-next { right: 14px; } @media (max-width: 575px) { .hs-arrow { width: 36px; height: 36px; font-size: 1.15rem; } .hs-prev { left: 8px; } .hs-next { right: 8px; } } /* -- Slider Dots -- */ .hs-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 20; } .hs-dot { width: 8px; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.4); border: none; cursor: pointer; padding: 0; transition: background 0.25s ease, width 0.25s ease; } .hs-dot.active { background: #DD1C71; width: 26px; } /* -- Slider responsive -- */ @media (max-width: 991px) { .hs2-services { grid-template-columns: repeat(3,1fr); } .hs-slide-2, .hs-slide-3 { padding: 60px 0 50px; } } @media (max-width: 575px) { .hs-slide-1 { padding: 46px 0 36px; } .hs-slide-2, .hs-slide-3 { padding: 46px 0 40px; } .hs2-services { grid-template-columns: repeat(3,1fr); gap: 10px; } .hs2-svc { padding: 16px 8px; border-radius: 12px; } .hs2-svc-icon { font-size: 1.6rem; } .hs3-inner { padding: 0 4px; } } /* ---------------------------------------------- EEAT TRUST SECTION ---------------------------------------------- */ .eeat-section { padding: 70px 0; background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); } .eeat-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; margin: 36px 0 32px; } .eeat-pillar { background: #fff; border-radius: 16px; padding: 26px 22px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); border-bottom: 3px solid transparent; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; } .eeat-pillar:hover { transform: translateY(-5px); box-shadow: 0 10px 32px rgba(221,28,113,0.13); border-bottom-color: #DD1C71; } .eeat-pillar-icon { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 14px; } .eeat-pillar h3 { font-size: 1rem; font-weight: 700; color: #1a1a2e; margin: 0 0 8px; } .eeat-pillar p { font-size: 0.86rem; color: #6b7280; line-height: 1.6; margin: 0; } .eeat-credentials { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 28px 0; } .eeat-cred-badge { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 2px solid rgba(221,28,113,0.18); border-radius: 50px; padding: 8px 16px; font-size: 0.82rem; font-weight: 700; color: #333; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } .eeat-cred-badge i { color: #DD1C71; font-size: 1rem; } .eeat-milestones { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 36px; background: #fff; border-radius: 16px; padding: 28px 32px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); border: 1px solid rgba(221,28,113,0.08); } .eeat-milestone { text-align: center; padding: 0 20px; } .milestone-year { display: block; font-size: 1.6rem; font-weight: 800; color: #DD1C71; line-height: 1; margin-bottom: 6px; } .milestone-event { display: block; font-size: 0.78rem; color: #6b7280; font-weight: 500; max-width: 110px; } .eeat-milestone-divider { flex: 1; min-width: 24px; height: 2px; background: linear-gradient(90deg, rgba(221,28,113,0.3), rgba(197,160,89,0.3)); border-radius: 2px; } @media (max-width: 768px) { .eeat-section { padding: 46px 0; } .eeat-milestone-divider { display: none; } .eeat-milestone { padding: 8px 14px; } .eeat-milestones { padding: 20px 14px; gap: 0; flex-direction: row; flex-wrap: wrap; justify-content: space-around; } } /* ============================================================ INDEX.HTML -- Body style blocks extracted (Session H) Moved here to eliminate 7x CSSOM recalculation hits. ============================================================ */ /* --- Block 2 (originally at line 1015) --- */ /* -- Welcome Hero -- */ .welcome-hero { background: linear-gradient(135deg, #fff9fc 0%, #fff 55%, #fffdf5 100%); padding: 70px 0 52px; overflow: hidden; position: relative; } .welcome-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #DD1C71 0%, #c5a059 50%, #DD1C71 100%); } .wh-eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2.8px; color: #c5a059; padding: 5px 16px; border-radius: 20px; border: 1px solid rgba(197,160,89,0.35); background: rgba(197,160,89,0.07); margin-bottom: 18px; } .wh-title { font-size: clamp(1.8rem, 3.2vw, 2.75rem); font-weight: 800; color: #1a1a2e; line-height: 1.22; margin-bottom: 20px; } .wh-title em { font-style: normal; color: #DD1C71; } .wh-desc { font-size: 1.02rem; color: #555; line-height: 1.82; margin-bottom: 28px; max-width: 520px; } .wh-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; } .wh-badge { display: flex; align-items: center; gap: 7px; background: #fff; border: 1px solid rgba(221,28,113,0.14); border-radius: 30px; padding: 7px 14px; font-size: 0.81rem; font-weight: 600; color: #333; box-shadow: 0 2px 8px rgba(0,0,0,0.05); white-space: nowrap; } .wh-badge i { color: #DD1C71; font-size: 1rem; } .wh-btns { display: flex; flex-wrap: wrap; gap: 12px; } .wh-btn-primary { background: linear-gradient(135deg, #DD1C71, #a50d4a); color: #fff !important; border: none; padding: 13px 28px; border-radius: 28px; font-size: 0.95rem; font-weight: 700; box-shadow: 0 5px 18px rgba(221,28,113,0.35); text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; display: inline-flex; align-items: center; gap: 8px; } .wh-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(221,28,113,0.5); } .wh-btn-secondary { background: #fff; color: #DD1C71 !important; border: 2px solid #DD1C71; padding: 11px 26px; border-radius: 28px; font-size: 0.95rem; font-weight: 700; text-decoration: none; transition: all 0.2s; display: inline-flex; align-items: center; gap: 8px; } .wh-btn-secondary:hover { background: #DD1C71; color: #fff !important; } .wh-img-wrap { position: relative; border-radius: 24px; overflow: hidden; box-shadow: 0 24px 64px rgba(221,28,113,0.14); } .wh-img-wrap img { width: 100%; height: auto; display: block; border-radius: 24px; } .wh-float-badge { position: absolute; bottom: 22px; left: 22px; background: rgba(255,255,255,0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 16px; padding: 14px 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.14); display: flex; align-items: center; gap: 12px; } .wh-float-badge-icon { width: 44px; height: 44px; background: linear-gradient(135deg, #DD1C71, #c5a059); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.4rem; flex-shrink: 0; } .wh-float-badge-text { line-height: 1.2; } .wh-float-badge-text strong { font-size: 1.18rem; font-weight: 800; color: #1a1a2e; display: block; } .wh-float-badge-text span { font-size: 0.7rem; color: #777; } /* Stats Bar */ .wh-stats-bar { background: linear-gradient(135deg, #1a1a2e 0%, #2d1438 100%); padding: 30px 0; } .wh-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; text-align: center; } .wh-stat { padding: 12px 16px; border-right: 1px solid rgba(255,255,255,0.1); } .wh-stat:last-child { border-right: none; } .wh-stat-num { font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 800; color: #fff; line-height: 1; display: block; margin-bottom: 6px; } .wh-stat-num em { font-style: normal; color: #c5a059; } .wh-stat-lbl { font-size: 0.77rem; color: rgba(255,255,255,0.6); font-weight: 500; text-transform: uppercase; letter-spacing: 0.8px; } @media (max-width: 991px) { .welcome-hero { padding: 46px 0 36px; } .wh-desc { max-width: 100%; font-size: 0.96rem; } .wh-img-wrap { margin-top: 40px; } } @media (max-width: 575px) { .wh-stats-grid { grid-template-columns: repeat(2, 1fr); } .wh-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); } .wh-stat:nth-child(2n) { } .wh-stat:last-child, .wh-stat:nth-last-child(2) { border-bottom: none; } .wh-badges { gap: 8px; } .wh-badge { font-size: 0.77rem; padding: 5px 11px; } } /* -- Trust Features -- */ .trust-features { background: #fff; padding: 60px 0 52px; border-bottom: 1px solid rgba(0,0,0,0.06); } .tf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .tf-card { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 20px; padding: 32px 26px; transition: transform 0.25s, box-shadow 0.25s; position: relative; overflow: hidden; } .tf-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 20px 20px 0 0; } .tf-card-1::before { background: linear-gradient(90deg, #DD1C71, #f06fa0); } .tf-card-2::before { background: linear-gradient(90deg, #c5a059, #f0d090); } .tf-card-3::before { background: linear-gradient(90deg, #1a6fb3, #5ab4f5); } .tf-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(0,0,0,0.10); } .tf-icon { width: 62px; height: 62px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 20px; flex-shrink: 0; } .tf-card-1 .tf-icon { background: rgba(221,28,113,0.09); color: #DD1C71; } .tf-card-2 .tf-icon { background: rgba(197,160,89,0.12); color: #b8922a; } .tf-card-3 .tf-icon { background: rgba(26,111,179,0.10); color: #1a6fb3; } .tf-title { font-size: 1.08rem; font-weight: 700; color: #1a1a2e; margin-bottom: 10px; } .tf-desc { font-size: 0.87rem; color: #666; line-height: 1.78; } .tf-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; } .tf-chip { font-size: 0.77rem; font-weight: 700; padding: 4px 12px; border-radius: 20px; } .tf-card-1 .tf-chip { background: rgba(221,28,113,0.07); color: #b5105a; } .tf-card-2 .tf-chip { background: rgba(197,160,89,0.1); color: #9b7520; } .tf-card-3 .tf-chip { background: rgba(26,111,179,0.08); color: #1a6fb3; } @media (max-width: 767px) { .tf-grid { grid-template-columns: 1fr; gap: 16px; } } /* -- Services Section -- */ .services-new { background: #f8f9fc; padding: 72px 0 64px; } .sn-head { text-align: center; margin-bottom: 48px; } .sn-eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; color: #DD1C71; padding: 5px 16px; border-radius: 20px; background: rgba(221,28,113,0.07); margin-bottom: 12px; } .sn-title { font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 800; color: #1a1a2e; margin-bottom: 10px; } .sn-sub { color: #666; font-size: 0.93rem; max-width: 600px; margin: 0 auto; line-height: 1.75; } .sn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .sn-card { background: #fff; border-radius: 20px; border: 1px solid rgba(0,0,0,0.07); overflow: hidden; transition: transform 0.25s, box-shadow 0.25s; display: flex; flex-direction: column; } .sn-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(0,0,0,0.10); } .sn-card-img { position: relative; overflow: hidden; aspect-ratio: 16 / 10; } .sn-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; } .sn-card:hover .sn-card-img img { transform: scale(1.05); } .sn-badge { position: absolute; top: 12px; left: 12px; background: rgba(221,28,113,0.88); backdrop-filter: blur(4px); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; } .sn-body { padding: 22px 22px 20px; flex: 1; display: flex; flex-direction: column; } .sn-card-title { font-size: 1rem; font-weight: 700; color: #1a1a2e; margin-bottom: 8px; } .sn-card-title a { color: inherit; text-decoration: none; } .sn-card-title a:hover { color: #DD1C71; } .sn-card-desc { font-size: 0.83rem; color: #666; line-height: 1.75; flex: 1; margin-bottom: 16px; } .sn-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 0.83rem; font-weight: 700; color: #DD1C71; text-decoration: none; transition: gap 0.2s; } .sn-cta:hover { gap: 10px; color: #a50d4a; } @media (max-width: 991px) { .sn-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .sn-grid { grid-template-columns: 1fr; } } /* -- Mission & Vision -- */ .mv-band { background: linear-gradient(135deg, #1a1a2e 0%, #2d1438 100%); padding: 84px 0; position: relative; overflow: hidden; } .mv-band::after { content: ''; position: absolute; top: -35%; right: -8%; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(221,28,113,0.14) 0%, transparent 65%); pointer-events: none; } .mv-eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; color: #c5a059; padding: 4px 14px; border-radius: 20px; border: 1px solid rgba(197,160,89,0.4); margin-bottom: 14px; } .mv-title { font-size: clamp(1.55rem, 2.8vw, 2.25rem); font-weight: 800; color: #fff; margin-bottom: 20px; line-height: 1.25; } .mv-title em { font-style: normal; color: #DD1C71; } .mv-desc { font-size: 0.95rem; color: rgba(255,255,255,0.7); line-height: 1.85; margin-bottom: 8px; } .mv-list { list-style: none; padding: 0; margin: 22px 0 34px; } .mv-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.87rem; color: rgba(255,255,255,0.8); margin-bottom: 12px; line-height: 1.55; } .mv-list li i { color: #c5a059; font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; } .mv-btn { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #DD1C71, #a50d4a); color: #fff !important; padding: 13px 28px; border-radius: 28px; font-size: 0.93rem; font-weight: 700; text-decoration: none; box-shadow: 0 5px 18px rgba(221,28,113,0.4); transition: transform 0.2s; } .mv-btn:hover { transform: translateY(-2px); } .mv-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .mv-info-card { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.11); border-radius: 16px; padding: 22px 18px; transition: background 0.2s; } .mv-info-card:hover { background: rgba(255,255,255,0.11); } .mv-info-icon { font-size: 1.75rem; color: #c5a059; display: block; margin-bottom: 10px; } .mv-info-title { font-size: 0.94rem; font-weight: 700; color: #fff; margin-bottom: 6px; } .mv-info-text { font-size: 0.79rem; color: rgba(255,255,255,0.58); line-height: 1.6; } @media (max-width: 991px) { .mv-band { padding: 56px 0; } .mv-cards-grid { margin-top: 40px; } } @media (max-width: 575px) { .mv-cards-grid { grid-template-columns: 1fr; gap: 12px; } } /* -- Celebrity Testimonials -- */ .celeb-section { background: linear-gradient(180deg, #fff9fc 0%, #fff 100%); padding: 72px 0 64px; border-top: 1px solid rgba(221,28,113,0.05); } .celeb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; } .celeb-card { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 18px; padding: 24px 20px; position: relative; overflow: hidden; transition: transform 0.25s, box-shadow 0.25s; } .celeb-card::before { content: '\201C'; position: absolute; top: 8px; right: 16px; font-size: 5.5rem; line-height: 1; color: rgba(221,28,113,0.06); font-family: Georgia, serif; font-weight: 900; pointer-events: none; } .celeb-card:hover { transform: translateY(-4px); box-shadow: 0 16px 44px rgba(221,28,113,0.09); } .celeb-avatar-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .celeb-av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(221,28,113,0.18); flex-shrink: 0; } .celeb-name { font-size: 0.9rem; font-weight: 700; color: #1a1a2e; margin-bottom: 2px; } .celeb-role { font-size: 0.74rem; color: #DD1C71; font-weight: 600; } .celeb-stars { display: flex; gap: 2px; margin-bottom: 10px; } .celeb-stars i { color: #f59e0b; font-size: 0.84rem; } .celeb-text { font-size: 0.83rem; color: #555; line-height: 1.8; font-style: italic; } .celeb-tag { display: inline-block; margin-top: 14px; background: rgba(221,28,113,0.07); color: #b5105a; font-size: 0.71rem; font-weight: 700; padding: 3px 10px; border-radius: 12px; } @media (max-width: 991px) { .celeb-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .celeb-grid { grid-template-columns: 1fr; gap: 14px; } } /* -- Results / Before-After -- */ .results-section { background: #fff; padding: 72px 0 64px; border-top: 1px solid rgba(0,0,0,0.06); } .results-banner { border-radius: 20px; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,0.10); margin-bottom: 40px; } .results-banner img { width: 100%; height: auto; display: block; } .results-gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; } .results-gallery-item { border-radius: 12px; overflow: hidden; aspect-ratio: 1; } .results-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; display: block; } .results-gallery-item:hover img { transform: scale(1.06); } @media (max-width: 575px) { .results-gallery { grid-template-columns: repeat(3, 1fr); } } /* --- Block 3 (originally at line 1673) --- */ /* --- Book Appointment Split Panel (index.html) --- Exact same design system as smile.html for cross-page consistency */ .book-appt-section { margin: 60px auto; overflow: hidden; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.1); max-width: 1100px; } .book-appt-inner { display: flex; min-height: 640px; } /* -- Form panel (white) -- */ .book-form-panel { flex: 1 1 55%; padding: 50px 48px; background: #fff; } .book-form-eyebrow { display: inline-block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 2px; color: #c5a059; font-weight: 700; margin-bottom: 8px; } .book-form-header h2 { font-size: 1.85rem !important; font-weight: 800 !important; color: #1a1a1a !important; margin-bottom: 6px !important; line-height: 1.2 !important; letter-spacing: -0.3px !important; } .book-form-header p { color: #888; font-size: 0.9rem; margin-bottom: 28px; } /* -- Fields -- */ .bf-row { display: flex; gap: 14px; } .bf-row .bf-field { flex: 1; } .bf-field { position: relative; margin-bottom: 14px; } .bf-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #DD1C71; font-size: 17px; pointer-events: none; z-index: 1; } .bf-field-textarea .bf-icon { top: 14px; transform: none; } .bf-select-arrow { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #aaa; font-size: 16px; pointer-events: none; } .bf-field input, .bf-field select, .bf-field textarea { width: 100%; padding: 13px 14px 13px 42px; border: 1.5px solid #eee; border-radius: 10px; font-size: 0.93rem; font-family: 'Poppins', sans-serif !important; color: #333; background: #fafafa; transition: border-color 0.22s, box-shadow 0.22s, background 0.22s; outline: none; -webkit-appearance: none; appearance: none; } .bf-field input::placeholder, .bf-field textarea::placeholder { color: #bbb; } .bf-field input:focus, .bf-field select:focus, .bf-field textarea:focus { border-color: #DD1C71; box-shadow: 0 0 0 4px rgba(221,28,113,0.1); background: #fff; } .bf-field textarea { resize: none; } /* -- Primary submit button -- */ .bf-submit-btn { width: 100%; padding: 15px; background: linear-gradient(135deg, #DD1C71 0%, #a50d4a 100%); color: #fff; border: none; border-radius: 10px; font-size: 1rem; font-weight: 700; font-family: 'Poppins', sans-serif !important; cursor: pointer; transition: all 0.3s; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; letter-spacing: 0.2px; box-shadow: 0 4px 20px rgba(181,21,94,0.3); } .bf-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(181,21,94,0.45); } .bf-submit-btn:active { transform: translateY(0); } /* -- "or" divider -- */ .bf-divider { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; color: #ccc; font-size: 0.8rem; } .bf-divider::before,.bf-divider::after { content:''; flex:1; height:1px; background:#eee; } /* -- WhatsApp quick-book -- */ .bf-whatsapp-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; background: #25d366; color: #fff !important; border-radius: 10px; font-size: 0.95rem; font-weight: 600; font-family: 'Poppins', sans-serif !important; text-decoration: none; transition: all 0.3s; box-shadow: 0 4px 16px rgba(37,211,102,0.3); } .bf-whatsapp-btn:hover { background:#1ab854; transform:translateY(-2px); box-shadow:0 6px 22px rgba(37,211,102,0.45); color:#fff !important; } .bf-whatsapp-btn i { font-size: 21px; } /* -- Info panel (crimson gradient -- same as smile.html) -- */ .book-info-panel { flex: 1 1 45%; background: linear-gradient(150deg, #c51262 0%, #7c003b 50%, #3d0020 100%); padding: 50px 45px; color: #fff; display: flex; align-items: center; position: relative; overflow: hidden; } .book-info-panel::before { content:''; position:absolute; top:-80px; right:-80px; width:280px; height:280px; background:rgba(255,255,255,0.04); border-radius:50%; } .book-info-panel::after { content:''; position:absolute; bottom:-60px; left:-60px; width:200px; height:200px; background:rgba(255,255,255,0.03); border-radius:50%; } .book-info-content { position: relative; z-index: 1; } .book-info-badge { display:inline-block; background:rgba(255,220,119,0.15); border:1px solid rgba(255,220,119,0.4); color:#ffdc77; padding:5px 16px; border-radius:20px; font-size:0.72rem; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:18px; font-weight:600; } .book-info-panel h3 { font-size:1.55rem; font-weight:700; margin-bottom:22px; line-height:1.35; color:#fff; } .book-reasons { list-style:none; padding:0; margin:0 0 24px; } .book-reasons li { padding:7px 0; font-size:0.91rem; opacity:0.95; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,0.07); } .book-reasons li:last-child { border-bottom:none; } .book-reasons i { font-size:17px; color:#ffdc77; flex-shrink:0; } .book-info-stats { display:flex; gap:0; margin-bottom:22px; background:rgba(255,255,255,0.08); border-radius:12px; overflow:hidden; } .bi-stat { flex:1; text-align:center; padding:14px 8px; border-right:1px solid rgba(255,255,255,0.1); } .bi-stat:last-child { border-right:none; } .bi-stat span { display:block; font-size:1.35rem; font-weight:800; color:#ffdc77; line-height:1; margin-bottom:4px; } .bi-stat small { font-size:0.68rem; opacity:0.75; text-transform:uppercase; letter-spacing:0.5px; } .book-contact-chips { display:flex; flex-direction:column; gap:8px; } .book-contact-chips a { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.1); color:#fff !important; padding:9px 16px; border-radius:8px; font-size:0.88rem; text-decoration:none; border:1px solid rgba(255,255,255,0.15); transition:background 0.2s; font-weight:500; } .book-contact-chips a:hover { background:rgba(255,255,255,0.22); } .book-contact-chips i { color:#ffdc77; font-size:16px; } /* -- Toast / Error alerts -- */ #booking-toast-idx { display:none; background:linear-gradient(135deg,#1a9c42,#14a83b); color:#fff; padding:14px 18px; border-radius:10px; margin-bottom:18px; animation:toastIn 0.4s ease; align-items:flex-start; gap:12px; border-left:4px solid #0d7a2e; } #booking-toast-idx i { font-size:26px; flex-shrink:0; margin-top:2px; } #booking-toast-idx div { display:flex; flex-direction:column; gap:3px; } #booking-toast-idx strong { font-size:0.95rem; font-weight:700; display:block; } #booking-toast-idx span { font-size:0.83rem; opacity:0.9; } #booking-error-idx { display:none; background:linear-gradient(135deg,#b91c1c,#991b1b); color:#fff; padding:14px 18px; border-radius:12px; margin-bottom:16px; align-items:center; gap:12px; border-left:4px solid #fca5a5; } #booking-error-idx i { font-size:22px; flex-shrink:0; } @keyframes toastIn { from{opacity:0;transform:translateY(-8px);} to{opacity:1;transform:translateY(0);} } /* -- Responsive -- */ @media (max-width:900px) { .book-appt-inner { flex-direction:column; } .book-form-panel { padding:35px 25px; } .book-info-panel { padding:35px 25px; } .bf-row { flex-direction:column; gap:0; } .book-appt-section { border-radius:0; margin:30px 0; } } @media (max-width:480px) { .book-form-panel { padding:25px 16px; } .book-form-header h2 { font-size:1.5rem !important; } } /* --- Block 4 (originally at line 2069) --- */ /* -- Specialties Section -- */ .specialties-section { background: #fff; padding: 52px 0 56px; border-top: 1px solid rgba(0,0,0,0.06); } .spec-eyebrow { display: inline-block; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; color: #DD1C71; background: rgba(221,28,113,0.07); padding: 5px 16px; border-radius: 20px; margin-bottom: 12px; } .spec-section-title { font-size: clamp(1.55rem, 2.8vw, 2.1rem); font-weight: 800; color: #1a1a2e; margin: 0 0 10px; line-height: 1.25; } .spec-section-title em { font-style: normal; color: #DD1C71; } .spec-section-sub { color: #666; font-size: 0.93rem; max-width: 680px; margin: 0 auto 28px; line-height: 1.75; } /* Grid */ .spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } /* Card */ .spec-card { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 18px; padding: 28px 22px 22px; position: relative; overflow: hidden; transition: transform 0.28s, box-shadow 0.28s, border-color 0.28s; display: flex; flex-direction: column; } .spec-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 18px 18px 0 0; } .spec-card:hover { transform: translateY(-5px); box-shadow: 0 16px 44px rgba(0,0,0,0.10); border-color: transparent; } /* Accent lines per specialty */ .sc-hair::after { background: linear-gradient(90deg, #c5a059, #f0d090); } .sc-skin::after { background: linear-gradient(90deg, #DD1C71, #f06fa0); } .sc-dental::after { background: linear-gradient(90deg, #1a6fb3, #5ab4f5); } .sc-ortho::after { background: linear-gradient(90deg, #6d28d9, #a78bfa); } .sc-regen::after { background: linear-gradient(90deg, #0891b2, #67e8f9); } .sc-whitening::after { background: linear-gradient(90deg, #e879f9, #f0abfc); } .sc-weightloss::after { background: linear-gradient(90deg, #059669, #6ee7b7); } .sc-autism::after { background: linear-gradient(90deg, #d97706, #fcd34d); } .sc-ed::after { background: linear-gradient(90deg, #dc2626, #fca5a5); } /* Icon wrap */ .spec-icon-wrap { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 16px; flex-shrink: 0; } .spec-icon-wrap svg { width: 28px; height: 28px; display: block; } .spec-icon-wrap i { font-size: 28px; line-height: 1; display: block; } .spec-doc-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .sc-hair .spec-icon-wrap { background: rgba(197,160,89,0.12); color: #c5a059; } .sc-skin .spec-icon-wrap { background: rgba(221,28,113,0.10); color: #DD1C71; } .sc-dental .spec-icon-wrap { background: rgba(26,111,179,0.10); color: #1a6fb3; } .sc-ortho .spec-icon-wrap { background: rgba(109,40,217,0.10); color: #6d28d9; } .sc-regen .spec-icon-wrap { background: rgba(8,145,178,0.10); color: #0891b2; } .sc-whitening .spec-icon-wrap { background: rgba(232,121,249,0.10);color: #c026d3; } .sc-weightloss .spec-icon-wrap{ background: rgba(5,150,105,0.10); color: #059669; } .sc-autism .spec-icon-wrap { background: rgba(217,119,6,0.10); color: #d97706; } .sc-ed .spec-icon-wrap { background: rgba(220,38,38,0.10); color: #dc2626; } /* Text */ .spec-title { font-size: 1.05rem; font-weight: 800; color: #1a1a2e; margin: 0 0 8px; line-height: 1.3; display: block; text-decoration: none; } .spec-title:hover { color: #DD1C71; } .spec-desc { color: #555; font-size: 0.85rem; line-height: 1.65; margin: 0 0 14px; flex: 1; } /* Treatment pills */ .spec-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 16px; } .spec-pill { font-size: 0.7rem; font-weight: 600; padding: 3px 10px; border-radius: 12px; text-decoration: none; transition: all 0.2s; border: 1px solid; white-space: nowrap; } .sc-hair .spec-pill { color: #8a6a20; border-color: rgba(197,160,89,0.4); background: rgba(197,160,89,0.07); } .sc-hair .spec-pill:hover { background: #c5a059; color: #fff; border-color: #c5a059; } .sc-skin .spec-pill { color: #a50d4a; border-color: rgba(221,28,113,0.3); background: rgba(221,28,113,0.06); } .sc-skin .spec-pill:hover { background: #DD1C71; color: #fff; border-color: #DD1C71; } .sc-dental .spec-pill { color: #0d4a7a; border-color: rgba(26,111,179,0.3); background: rgba(26,111,179,0.06); } .sc-dental .spec-pill:hover { background: #1a6fb3; color: #fff; border-color: #1a6fb3; } .sc-ortho .spec-pill { color: #4c1d95; border-color: rgba(109,40,217,0.3); background: rgba(109,40,217,0.06); } .sc-ortho .spec-pill:hover { background: #6d28d9; color: #fff; border-color: #6d28d9; } .sc-regen .spec-pill { color: #0c4a6e; border-color: rgba(8,145,178,0.3); background: rgba(8,145,178,0.06); } .sc-regen .spec-pill:hover { background: #0891b2; color: #fff; border-color: #0891b2; } .sc-whitening .spec-pill { color: #86198f; border-color: rgba(232,121,249,0.3); background: rgba(232,121,249,0.06); } .sc-whitening .spec-pill:hover { background: #c026d3; color: #fff; border-color: #c026d3; } .sc-weightloss .spec-pill { color: #065f46; border-color: rgba(5,150,105,0.3); background: rgba(5,150,105,0.06); } .sc-weightloss .spec-pill:hover { background: #059669; color: #fff; border-color: #059669; } .sc-autism .spec-pill { color: #92400e; border-color: rgba(217,119,6,0.3); background: rgba(217,119,6,0.06); } .sc-autism .spec-pill:hover { background: #d97706; color: #fff; border-color: #d97706; } .sc-ed .spec-pill { color: #991b1b; border-color: rgba(220,38,38,0.3); background: rgba(220,38,38,0.06); } .sc-ed .spec-pill:hover { background: #dc2626; color: #fff; border-color: #dc2626; } /* Doctor attribution */ .spec-doctor-attr { display: flex; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,0.06); margin-top: auto; } .spec-doc-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 800; color: #fff; flex-shrink: 0; } .sc-hair .spec-doc-avatar { background: linear-gradient(135deg,#c5a059,#8a6a20); } .sc-skin .spec-doc-avatar { background: linear-gradient(135deg,#DD1C71,#a50d4a); } .sc-dental .spec-doc-avatar { background: linear-gradient(135deg,#1a6fb3,#0d4a7a); } .sc-ortho .spec-doc-avatar { background: linear-gradient(135deg,#6d28d9,#4c1d95); } .sc-regen .spec-doc-avatar { background: linear-gradient(135deg,#0891b2,#0c4a6e); } .sc-whitening .spec-doc-avatar { background: linear-gradient(135deg,#c026d3,#86198f); } .sc-weightloss .spec-doc-avatar { background: linear-gradient(135deg,#059669,#047857); } .sc-autism .spec-doc-avatar { background: linear-gradient(135deg,#d97706,#92400e); } .sc-ed .spec-doc-avatar { background: linear-gradient(135deg,#dc2626,#991b1b); } .spec-doc-info { flex: 1; min-width: 0; } .spec-doc-name { font-size: 0.75rem; font-weight: 700; color: #1a1a2e; display: block; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .spec-doc-qual { font-size: 0.68rem; color: #888; display: block; } .spec-cta { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 700; text-decoration: none; margin-top: 10px; transition: gap 0.2s; } .spec-cta:hover { gap: 8px; } .sc-hair .spec-cta { color: #c5a059; } .sc-skin .spec-cta { color: #DD1C71; } .sc-dental .spec-cta { color: #1a6fb3; } .sc-ortho .spec-cta { color: #6d28d9; } .sc-regen .spec-cta { color: #0891b2; } .sc-whitening .spec-cta { color: #c026d3; } .sc-weightloss .spec-cta { color: #059669; } .sc-autism .spec-cta { color: #d97706; } .sc-ed .spec-cta { color: #dc2626; } /* Responsive */ @media (max-width: 1024px) { .spec-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } } @media (max-width: 600px) { .spec-grid { grid-template-columns: 1fr; gap: 14px; } .specialties-section { padding: 48px 0 40px; } } /* --- Block 5 (originally at line 2413) --- */ /* -- Doctors Section -- */ .doctors-section { background: #fff; padding: 64px 0 56px; border-top: 1px solid rgba(0,0,0,0.06); } .doctors-section .container { max-width: 1280px; } /* Section header */ .docs-eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; color: #c5a059; background: rgba(197,160,89,0.1); padding: 6px 16px; border-radius: 20px; margin-bottom: 12px; } .docs-section-title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: #1a1a2e; margin: 0 0 10px; line-height: 1.2; } .docs-section-title span { color: #DD1C71; } .docs-section-sub { color: #666; font-size: 0.93rem; max-width: 640px; margin: 0 auto 24px; line-height: 1.7; } /* -- Tab filter bar -- */ .docs-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 36px; } .docs-tab-btn { padding: 8px 20px; border-radius: 30px; border: 1.5px solid rgba(0,0,0,0.12); background: #f7f7f7; color: #444; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap; font-family: inherit; } .docs-tab-btn:hover { border-color: #DD1C71; color: #DD1C71; background: rgba(221,28,113,0.05); } .docs-tab-btn.active { background: #DD1C71; color: #fff; border-color: #DD1C71; box-shadow: 0 4px 14px rgba(221,28,113,0.30); } /* -- New unified card grid -- */ .docs-grid-new { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .doc-card-new { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 16px; padding: 24px 16px 18px; text-align: center; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; position: relative; overflow: hidden; } .doc-card-new::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 16px 16px 0 0; opacity: 0; transition: opacity 0.25s; } .doc-card-new:hover { transform: translateY(-5px); box-shadow: 0 14px 36px rgba(0,0,0,0.10); border-color: rgba(221,28,113,0.12); } .doc-card-new:hover::after { opacity: 1; } /* Square photo with rounded corners */ .doc-photo-wrap { width: 100px; height: 100px; border-radius: 14px; overflow: hidden; margin: 0 auto 14px; box-shadow: 0 6px 18px rgba(0,0,0,0.12); display: flex; align-items: center; justify-content: center; } .doc-photo-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } .doc-name-new { font-size: 0.88rem; font-weight: 700; color: #1a1a2e; margin: 0 0 5px; line-height: 1.3; } .doc-badge { font-size: 0.68rem; font-weight: 600; padding: 3px 11px; border-radius: 12px; display: inline-block; margin-bottom: 8px; } .doc-creds-new { font-size: 0.68rem; color: #777; line-height: 1.55; margin: 0; } /* Accent stripe per dept */ .dcn-hair::after { background: linear-gradient(90deg,#c5a059,#f0d090); } .dcn-skin::after { background: linear-gradient(90deg,#DD1C71,#f06fa0); } .dcn-dental::after { background: linear-gradient(90deg,#1a6fb3,#5ab4f5); } .dcn-ortho::after { background: linear-gradient(90deg,#6d28d9,#a78bfa); } .dcn-nutrition::after { background: linear-gradient(90deg,#059669,#6ee7b7); } /* Photo block bg (initials fallback) */ .ph-hair { background: linear-gradient(135deg,#c5a059,#8a6a20); } .ph-skin { background: linear-gradient(135deg,#DD1C71,#a50d4a); } .ph-dental { background: linear-gradient(135deg,#1a6fb3,#0d4a7a); } .ph-ortho { background: linear-gradient(135deg,#6d28d9,#4c1d95); } .ph-nutrition { background: linear-gradient(135deg,#059669,#047857); } /* Badge colors */ .db-hair { background: rgba(197,160,89,0.12); color: #8a6a20; } .db-skin { background: rgba(221,28,113,0.10); color: #a50d4a; } .db-dental { background: rgba(26,111,179,0.10); color: #0d4a7a; } .db-ortho { background: rgba(109,40,217,0.10); color: #4c1d95; } .db-nutrition { background: rgba(5,150,105,0.10); color: #047857; } /* Hidden for tab filtering */ .doc-card-new[hidden] { display: none !important; } /* Department group */ .docs-dept-group { margin-bottom: 40px; } .docs-dept-heading { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.8px; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 2px solid transparent; } .docs-dept-heading::after { content: ''; flex: 1; height: 1px; background: rgba(0,0,0,0.08); } .docs-dept-heading i { font-size: 18px; } .dept-hair { color: #c5a059; border-image: linear-gradient(90deg,#c5a059,transparent) 1; } .dept-skin { color: #DD1C71; border-image: linear-gradient(90deg,#DD1C71,transparent) 1; } .dept-dental { color: #1a6fb3; border-image: linear-gradient(90deg,#1a6fb3,transparent) 1; } .dept-ortho { color: #6d28d9; border-image: linear-gradient(90deg,#6d28d9,transparent) 1; } .dept-nutrition { color: #059669; border-image: linear-gradient(90deg,#059669,transparent) 1; } /* Doctor cards grid */ .docs-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } .docs-grid-4 { grid-template-columns: repeat(4, 1fr); } .docs-grid-3 { grid-template-columns: repeat(3, 1fr); } .docs-grid-2 { grid-template-columns: repeat(2, 1fr); } .doc-card { background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 14px; padding: 18px 14px; text-align: center; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; position: relative; overflow: hidden; } .doc-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; opacity: 0; transition: opacity 0.25s; } .doc-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.10); border-color: rgba(221,28,113,0.15); } .doc-card:hover::before { opacity: 1; } /* Avatar circle */ .doc-avatar { width: 68px; height: 68px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 800; color: #fff; margin: 0 auto 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.15); letter-spacing: -0.5px; position: relative; z-index: 1; } .doc-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } /* Avatar color per specialty */ .av-hair { background: linear-gradient(135deg, #c5a059, #8a6a20); } .av-skin { background: linear-gradient(135deg, #DD1C71, #a50d4a); } .av-dental { background: linear-gradient(135deg, #1a6fb3, #0d4a7a); } .av-ortho { background: linear-gradient(135deg, #6d28d9, #4c1d95); } .av-nutrition { background: linear-gradient(135deg, #059669, #047857); } /* Card content */ .doc-name { font-size: 0.9rem; font-weight: 700; color: #1a1a2e; margin: 0 0 4px; line-height: 1.25; } .doc-specialty { font-size: 0.7rem; font-weight: 600; padding: 2px 10px; border-radius: 12px; display: inline-block; margin-bottom: 6px; } .sp-hair { background: rgba(197,160,89,0.12); color: #8a6a20; } .sp-skin { background: rgba(221,28,113,0.10); color: #a50d4a; } .sp-dental { background: rgba(26,111,179,0.10); color: #0d4a7a; } .sp-ortho { background: rgba(109,40,217,0.10); color: #4c1d95; } .sp-nutrition { background: rgba(5,150,105,0.10); color: #047857; } .doc-creds { font-size: 0.7rem; color: #666; line-height: 1.5; margin: 0; } /* Card top-border colors */ .doc-card.hair::before { background: linear-gradient(90deg,#c5a059,#a07832); } .doc-card.skin::before { background: linear-gradient(90deg,#DD1C71,#a50d4a); } .doc-card.dental::before { background: linear-gradient(90deg,#1a6fb3,#0d4a7a); } .doc-card.ortho::before { background: linear-gradient(90deg,#6d28d9,#4c1d95); } .doc-card.nutrition::before { background: linear-gradient(90deg,#059669,#047857); } /* Responsive -- new grid */ @media (max-width: 1100px) { .docs-grid-new { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .docs-grid-new { grid-template-columns: repeat(2, 1fr); gap: 14px; } .doc-photo-wrap { width: 80px; height: 80px; border-radius: 10px; } } @media (max-width: 400px) { .doctors-section { padding: 44px 0 36px; } .docs-tab-btn { padding: 6px 14px; font-size: 0.75rem; } } /* --- Block 6 (originally at line 2796) --- */ /* -- Trust Stats Bar (matches smile.html) -- */ .trust-stats-bar { background: linear-gradient(135deg, #DD1C71 0%, #a50d4a 100%); padding: 22px 0; } .trust-stats-row { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 15px; } .trust-stat { text-align: center; color: #fff; } .stat-number { display: block; font-size: 1.8rem; font-weight: 700; line-height: 1.1; } .stat-label { font-size: 0.78rem; opacity: 0.9; text-transform: uppercase; letter-spacing: 1px; } @media (max-width: 576px) { .trust-stats-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; } .trust-stat { padding: 14px 10px !important; border-right: 1px solid rgba(0,0,0,0.07); border-bottom: 1px solid rgba(0,0,0,0.07); } .trust-stat:nth-child(2n) { border-right: none; } .trust-stat:nth-child(3), .trust-stat:nth-child(4) { border-bottom: none; } .stat-number { font-size: 1.3rem !important; } .stat-label { font-size: 0.7rem !important; } } /* -- Back to Top -- */ #backToTop { position: fixed; left: 22px; bottom: 38px; z-index: 9999; width: 44px; height: 44px; border-radius: 50%; background: #DD1C71; color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: 0 4px 14px rgba(221,28,113,0.35); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.3s ease, visibility 0.3s, transform 0.3s ease; } #backToTop.visible { opacity: 1; visibility: visible; transform: translateY(0); } #backToTop:hover { background: #a50d4a; transform: translateY(-2px) !important; } @media (max-width: 767.98px) { #backToTop { display: none; } } /* -- FTX Footer -- */ .ftx-footer { background: #000; border-top: 3px solid transparent; border-image: linear-gradient(90deg, #DD1C71 0%, #c5a059 50%, #DD1C71 100%) 1; padding: 60px 0 40px; width: 100vw !important; position: relative; left: 50%; right: 50%; margin-left: -50vw !important; margin-right: -50vw !important; box-sizing: border-box; } .ftx-top-row { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding-bottom: 36px; margin-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,0.07); } .ftx-brand-block { max-width: 500px; } .ftx-brand-logo { display: inline-block; background: #fff; border-radius: 12px; padding: 10px 22px; margin-bottom: 18px; text-decoration: none; } .ftx-logo-img { max-height: 48px; width: auto; display: block; opacity: 0.95; } .ftx-tagline { color: #6b7280; font-size: 0.86rem; line-height: 1.7; margin: 0 0 18px; } .ftx-social { display: flex; gap: 10px; flex-wrap: wrap; } .ftx-social a { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; color: #888; font-size: 18px; text-decoration: none; transition: all 0.25s; } .ftx-social a:hover { background: linear-gradient(135deg, #DD1C71, #c5a059); color: #fff; border-color: transparent; transform: translateY(-3px); box-shadow: 0 6px 18px rgba(221,28,113,0.35); } .ftx-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .ftx-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 22px 20px; height: 100%; transition: border-color 0.25s; } .ftx-card:hover { border-color: rgba(221,28,113,0.25); } .ftx-col-heading { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 1.8px; color: #ecf0f1; font-weight: 700; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, #c5a059, #DD1C71) 1; display: flex; align-items: center; gap: 8px; } .ftx-col-heading i { color: #c5a059; font-size: 16px; } .ftx-links { list-style: none; padding: 0; margin: 0; } .ftx-links li { margin-bottom: 9px; } .ftx-links a { color: #6b7280; font-size: 0.87rem; text-decoration: none; display: flex; align-items: center; gap: 6px; transition: all 0.2s; } .ftx-links a::before { content: '\203A'; color: #c5a059; font-size: 1.1rem; flex-shrink: 0; transition: transform 0.2s; } .ftx-links a:hover { color: #DD1C71; padding-left: 4px; } .ftx-links a:hover::before { transform: translateX(3px); } .ftx-branch { margin-bottom: 14px; } .ftx-branch-name { display: block; font-weight: 700; color: #c5a059; font-size: 0.9rem; margin-bottom: 5px; } .ftx-branch p { color: #6b7280; font-size: 0.82rem; line-height: 1.6; margin: 2px 0; } .ftx-branch p a { color: #bdc3c7; text-decoration: none; font-size: 0.82rem; } .ftx-branch p a:hover { color: #DD1C71; } .ftx-ph-icon { color: #c5a059; margin-right: 4px; font-size: 13px; } .ftx-hours { color: #555; font-size: 0.8rem; line-height: 1.7; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.05); } .ftx-hours i { color: #c5a059; margin-right: 4px; } .ftx-branch-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: #c5a059; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.06); } .ftx-phone-list { margin-bottom: 6px; } .ftx-phone-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 0.83rem; } .ftx-phone-row:last-child { border-bottom: none; } .ftx-phone-row span { color: #555; } .ftx-phone-row a { color: #bdc3c7; text-decoration: none; font-weight: 500; transition: color 0.2s; } .ftx-phone-row a:hover { color: #DD1C71; } .ftx-copyright { background: #233140; padding: 14px 0; width: 100vw !important; position: relative; left: 50%; right: 50%; margin-left: -50vw !important; margin-right: -50vw !important; box-sizing: border-box; } .ftx-copyright-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .ftx-copyright p { color: #6b7280; font-size: 0.8rem; margin: 0; } .ftx-copyright a { color: #DD1C71; text-decoration: none; } .ftx-copyright a:hover { text-decoration: underline; } .ftx-made { color: #c5a059; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.5px; } @media (max-width: 1024px) { .ftx-cols { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .ftx-cols { grid-template-columns: 1fr; } .ftx-footer { padding: 40px 0 24px; } .ftx-top-row { padding-bottom: 24px; margin-bottom: 24px; } .ftx-copyright-inner { flex-direction: column; text-align: center; } } @media (max-width: 768px) { .ftx-copyright { padding-bottom: 70px; } } /* --- Block 7 (originally at line 2940) --- */ .loc-branches-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:880px; margin:0 auto; } @media (max-width:640px) { .loc-branches-grid { grid-template-columns:1fr; } } /* --- Block 8 (originally at line 3054) --- */ /* FAQ Section */ .faq-section { background: #f8f9fc; padding: 76px 0 80px; border-top: 1px solid rgba(0,0,0,0.06); } .faq-eyebrow { display: inline-block; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; color: #DD1C71; background: rgba(221,28,113,0.07); padding: 5px 16px; border-radius: 20px; margin-bottom: 12px; } .faq-title { font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 800; color: #DD1C71; margin: 0 0 10px; line-height: 1.25; } .faq-title em { font-style: normal; color: #c5a059; } .faq-sub { color: #666; font-size: 0.93rem; max-width: 600px; margin: 0 auto 48px; line-height: 1.75; } .faq-accordion { max-width: 860px; margin: 0 auto; } .faq-item { background: #fff; border: 1px solid #fceef4; border-radius: 8px; margin-bottom: 15px; overflow: hidden; transition: border-color 0.3s, box-shadow 0.2s; } .faq-item:hover { box-shadow: 0 4px 20px rgba(221,28,113,0.08); } .faq-item.open { border-color: #DD1C71; box-shadow: 0 4px 20px rgba(221,28,113,0.1); } .faq-question { width: 100%; background: #fff; border: none; text-align: left; padding: 20px 52px 20px 22px; font-size: 1.02rem; font-weight: 600; color: #DD1C71; cursor: pointer; position: relative; line-height: 1.45; display: flex; align-items: center; transition: background 0.2s; } .faq-question:hover { background-color: #fff5f9; } .faq-item.open .faq-question { background-color: #fff5f9; } .faq-q-icon { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: rgba(221,28,113,0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s, transform 0.3s; } .faq-q-icon i { font-size: 1.1rem; color: #DD1C71; transition: transform 0.3s; } .faq-item.open .faq-q-icon i { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.2s; padding: 0 22px; } .faq-item.open .faq-answer { max-height: 400px; padding: 0 22px 20px; } .faq-answer p { color: #555; font-size: 0.9rem; line-height: 1.8; margin: 0; } .faq-answer a { color: #DD1C71; font-weight: 600; text-decoration: none; } .faq-answer a:hover { text-decoration: underline; } .faq-cta-row { margin-top: 44px; } .faq-cta-btn { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #DD1C71, #c5147f); color: #fff; font-size: 0.95rem; font-weight: 700; padding: 14px 30px; border-radius: 50px; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 16px rgba(221,28,113,0.3); } .faq-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(221,28,113,0.4); color: #fff; } /* ══ AREAS WE SERVE — Smile Page ══ */ .areas-section { padding: 70px 0; background: linear-gradient(180deg, #fff 0%, #faf8fc 100%); } .areas-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 36px 0 24px; } .area-card { background: #fff; border-radius: 14px; padding: 22px 18px; box-shadow: 0 4px 18px rgba(0,0,0,0.06); border-top: 3px solid #DD1C71; transition: transform 0.25s ease, box-shadow 0.25s ease; text-align: center; } .area-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(221,28,113,0.14); } .area-icon { font-size: 1.8rem; color: #DD1C71; margin-bottom: 10px; display: block; } .area-card h3 { font-size: 0.98rem; font-weight: 700; color: #1a1a2e; margin: 0 0 8px; } .area-card p { font-size: 0.8rem; color: #6b7280; line-height: 1.55; margin: 0 0 12px; } .area-card a { display: inline-block; font-size: 0.8rem; font-weight: 700; color: #DD1C71; text-decoration: none; border: 1.5px solid rgba(221,28,113,0.3); border-radius: 20px; padding: 4px 14px; transition: background 0.2s, color 0.2s; } .area-card a:hover { background: #DD1C71; color: #fff; } .areas-note { text-align: center; color: #6b7280; font-size: 0.88rem; margin-top: 8px; } @media (max-width: 991px) { .areas-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .areas-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .area-card { padding: 16px 12px; } } /* ══ END: AREAS WE SERVE ══ */ /* ══ PATIENT REVIEWS CAROUSEL (pkr) — Smile Page Styles for the pkr-section reviews carousel. ══ */ .pkr-section { padding:64px 0 52px; } .pkr-header { text-align:center; margin-bottom:36px; padding:0 20px; } .pkr-eyebrow { display:inline-block; font-size:0.72rem; text-transform:uppercase; letter-spacing:2.5px; color:#c5a059; font-weight:700; margin-bottom:8px; } .pkr-gold-line { display:block; width:44px; height:3px; background:linear-gradient(90deg,#DD1C71,#c5a059); border-radius:2px; margin:4px auto 14px; } .pkr-title { font-size:clamp(1.4rem,3vw,1.9rem); font-weight:800; color:#1a1a2e; margin-bottom:6px; } .pkr-title span { color:#DD1C71; } .pkr-sub { font-size:0.92rem; color:#777; max-width:560px; margin:0 auto; } .pkr-outer { max-width:1200px; margin:0 auto; padding:0 64px; position:relative; } .pkr-track-wrap { overflow:hidden; } .pkr-track { display:flex; gap:20px; transition:transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94); will-change:transform; } .pkr-slide { flex:0 0 calc((100% - 40px) / 3); min-width:0; } .pkr-card { background:#fff; border-radius:14px; padding:22px 24px; border-left:4px solid #DD1C71; box-shadow:0 2px 14px rgba(0,0,0,0.07); height:100%; transition:box-shadow 0.25s,transform 0.25s; display:flex; flex-direction:column; } .pkr-card:hover { box-shadow:0 8px 28px rgba(221,28,113,0.13); transform:translateY(-3px); } .pkr-card.pkr-gold { border-left-color:#c5a059; } .pkr-card.pkr-gold:hover { box-shadow:0 8px 28px rgba(197,160,89,0.18); } .pkr-card.pkr-green { border-left-color:#25D366; } .pkr-card.pkr-green:hover { box-shadow:0 8px 28px rgba(37,211,102,0.13); } .pkr-stars { color:#f5a623; font-size:0.9rem; letter-spacing:1.5px; margin-bottom:10px; } .pkr-text { font-size:0.84rem; color:#444; line-height:1.75; margin:0 0 14px; font-style:italic; flex:1; } .pkr-author { font-size:0.76rem; font-weight:700; color:#1a1a2e; margin:0; } .pkr-author span { font-weight:400; color:#999; } .pkr-badge { display:inline-block; font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; background:#fce8f3; color:#DD1C71; border-radius:20px; padding:3px 10px; margin-top:10px; align-self:flex-start; } .pkr-card.pkr-gold .pkr-badge { background:#fff8e6; color:#c5a059; } .pkr-card.pkr-green .pkr-badge { background:#e6faf0; color:#1db954; } .pkr-arrow { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:#fff; border:2px solid #e8e8e8; color:#1a1a2e; font-size:1.3rem; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s; z-index:2; box-shadow:0 2px 10px rgba(0,0,0,0.1); } .pkr-arrow:hover { background:#DD1C71; border-color:#DD1C71; color:#fff; box-shadow:0 4px 16px rgba(221,28,113,0.3); } .pkr-prev { left:0; } .pkr-next { right:0; } .pkr-dots { display:flex; justify-content:center; gap:8px; margin-top:28px; } .pkr-dot { width:8px; height:8px; border-radius:50%; background:#ddd; cursor:pointer; transition:background 0.25s,transform 0.25s; border:none; padding:0; flex-shrink:0; } .pkr-dot.active { background:#DD1C71; transform:scale(1.35); } .pkr-rating-bar { margin-top:32px; text-align:center; } .pkr-rating-inner { display:inline-flex; align-items:center; gap:18px; background:#fff; border-radius:50px; padding:14px 32px; box-shadow:0 4px 20px rgba(0,0,0,0.08); flex-wrap:wrap; justify-content:center; } .pkr-google-btn { display:inline-flex; align-items:center; gap:6px; background:#DD1C71; color:#fff; padding:9px 20px; border-radius:25px; font-size:0.84rem; font-weight:700; text-decoration:none; transition:background 0.2s; } .pkr-google-btn:hover { background:#a50d4a; color:#fff; text-decoration:none; } @media (max-width:991px) { .pkr-slide { flex:0 0 calc((100% - 20px) / 2); } .pkr-outer { padding:0 52px; } } @media (max-width:575px) { .pkr-slide { flex:0 0 100%; } .pkr-outer { padding:0 44px; } .pkr-arrow { width:36px; height:36px; font-size:1.05rem; } } /* ══ END: PATIENT REVIEWS CAROUSEL ══ */