/* ============================================================ CONSOLIDATED STYLE.CSS All styles merged & deduplicated from all pages ============================================================ */ /* ── GOOGLE FONTS (add to HTML ) ── */ /* ── CSS VARIABLES ── */ :root { --navy: #0d1f3c; --blue-mid: #1a4a7a; --blue-accent: #0b57d0; --blue-light: #6bb8d4; --teal: #1a6b7a; --bg-pale: #eef1fb; --bg-soft: #f0f5fc; --white: #ffffff; --text: #0d1f3c; --muted: #5a7080; --border: #d0e5f0; --gradient-1: linear-gradient(135deg, #0d1f3c 0%, #1a4a7a 100%); --gradient-2: linear-gradient(135deg, #0b57d0 0%, #6bb8d4 100%); --shadow-soft: 0 8px 32px rgba(13,31,60,0.08); --shadow-med: 0 16px 48px rgba(13,31,60,0.12); --shadow-strong: 0 24px 64px rgba(13,31,60,0.16); } /* ── RESET ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Outfit', sans-serif; color: var(--text); background: #fff; overflow-x: hidden; } /* ============================================================ NAVBAR ============================================================ */ .navbar { background: rgba(255,255,255,0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); padding: .7rem 0; position: sticky; top: 0; z-index: 9999; transition: box-shadow .3s; } .navbar.scrolled { box-shadow: 0 4px 24px rgba(13,31,60,.08); } .navbar-brand { font-size: 1.35rem; font-weight: 900; color: var(--navy) !important; letter-spacing: -0.5px; font-family: 'Outfit', sans-serif; } .navbar-brand span { color: var(--blue-accent); } .navbar-brand img, .footer-logo img { max-height: 40px; } .nav-link { font-weight: 500; font-size: .87rem; color: var(--navy) !important; padding: .45rem 1rem !important; transition: color .2s; } .nav-link:hover { color: var(--blue-accent) !important; } .nav-link.active-page { color: var(--blue-accent) !important; font-weight: 700; } .btn-nav { background: var(--blue-accent); color: #fff !important; border-radius: 8px; padding: .5rem 1.3rem !important; font-weight: 600; font-size: .85rem; transition: background .2s;white-space: nowrap; } p:empty{ display:none; } .menu-main-menu-container{width:100%;display:flex;} .btn-nav:hover { background: var(--blue-mid); color: #fff !important; } .navbar-toggler { border: none; box-shadow: none; outline: none; } .navbar-toggler:focus { box-shadow: none; } /* ============================================================ BREADCRUMB ============================================================ */ .breadcrumb-bar { background: var(--bg-pale); padding: .85rem 0; border-bottom: 1px solid var(--border); } .breadcrumb { margin: 0; font-size: .8rem; } .breadcrumb-item a { color: var(--blue-accent); text-decoration: none; font-weight: 500; } .breadcrumb-item a:hover { text-decoration: underline; } .breadcrumb-item.active { color: var(--muted); } .breadcrumb-item + .breadcrumb-item::before { color: var(--muted); } /* ============================================================ HERO SLIDER (Homepage) ============================================================ */ .hero-slider { position: relative; overflow: hidden; } .hero-slide { min-height: 88vh; display: none; align-items: center; position: relative; overflow: hidden; } .hero-slide.active { display: flex; } .slide-1 { background: linear-gradient(135deg, #eef6fb 0%, #d8eef8 60%, #c8e4f5 100%); } .slide-2 { background: linear-gradient(135deg, #eaf4f0 0%, #d0ecf4 60%, #bee5f0 100%); } .slide-3 { background: linear-gradient(135deg, #f0edf8 0%, #dce8f8 60%, #c8daf8 100%); } .slide-4 { background: linear-gradient(135deg, #eef6fb 0%, #d8eef8 60%, #c8e4f5 100%); } .slide-deco { position: absolute; left: -20px; top: 50%; transform: translateY(-50%); font-size: 28vw; font-weight: 900; color: rgba(74,158,190,.08); line-height: 1; pointer-events: none; user-select: none; font-family: 'Outfit', sans-serif; } .slide-tag { font-size: .75rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--blue-mid); margin-bottom: 1.2rem; } .hero-slide h1 { font-family: 'DM Serif Display', serif; font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 400; color: var(--navy); line-height: 1.15; margin-bottom: 1.2rem; } .hero-slide h1 span { color: var(--blue-accent); font-style: italic; } .hero-slide p { font-size: 1rem; line-height: 1.75; color: var(--muted); max-width: 500px; margin-bottom: 2rem; } .slide-content { animation: slideIn .6s ease both; } @keyframes slideIn { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } } /* Slider controls */ .slider-controls { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; z-index: 10; } .slider-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(13,31,60,.25); cursor: pointer; transition: all .3s; border: none; padding:6px; } .slider-dot.active { width: 28px; border-radius: 4px; background: var(--blue-accent); } .slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.9); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; box-shadow: 0 4px 16px rgba(0,0,0,.1); transition: all .2s; font-size: 1.1rem; color: var(--blue-accent); } .slider-arrow:hover { background: var(--blue-accent); color: #fff; } .slider-arrow.prev { left: 1.5rem; } .slider-arrow.next { right: 1.5rem; } /* Hero image frame */ .hero-img-frame { border-radius: 24px; overflow: hidden; max-width: 460px; width: 100%; box-shadow: 0 30px 80px rgba(13,31,60,.15); } .hero-img-frame img { width: 100%; display: block; height: 420px; object-fit: cover; } /* Hero floating badges */ .hero-badge-float { position: absolute; background: #fff; border-radius: 14px; padding: .9rem 1.2rem; box-shadow: 0 12px 40px rgba(13,31,60,.12); display: flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 600; color: var(--navy); z-index: 2; } .hero-badge-float.bl { bottom: -10px; left: -30px; } .hero-badge-float.tr { top: 20px; left: -40px; } .badge-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; } /* ============================================================ TRUST BAR ============================================================ */ .trust-bar { background: var(--navy); padding: .85rem 0; } .trust-item { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.8); font-size: .82rem; font-weight: 500; } /* ============================================================ BUTTONS (Global) ============================================================ */ .btn-dark-pill { background: var(--blue-accent); color: #fff; border-radius: 8px; padding: .75rem 1.8rem; font-weight: 700; font-size: .88rem; border: none; cursor: pointer; text-decoration: none; display: inline-block; transition: background .2s, transform .2s; } .btn-dark-pill:hover { background: var(--blue-mid); transform: translateY(-2px); color: #fff; } .btn-outline-pill { background: transparent; color: var(--blue-accent); border: 1.5px solid var(--blue-accent); border-radius: 8px; padding: .75rem 1.8rem; font-weight: 600; font-size: .88rem; text-decoration: none; display: inline-block; transition: all .2s; } .btn-outline-pill:hover { background: var(--blue-accent); color: #fff; } .btn-primary-pc { background: var(--blue-accent); color: #fff; border-radius: 8px; padding: .75rem 1.8rem; font-weight: 700; font-size: .88rem; border: none; cursor: pointer; text-decoration: none; display: inline-block; transition: background .2s, transform .2s; font-family: 'Outfit', sans-serif; } .btn-primary-pc:hover { background: var(--blue-mid); transform: translateY(-2px); color: #fff; } .btn-white { background: #fff; color: var(--navy); border-radius: 8px; padding: .8rem 2rem; font-weight: 700; font-size: .9rem; text-decoration: none; display: inline-block; transition: all .2s; } .btn-white:hover { background: var(--bg-pale); color: var(--blue-accent); transform: translateY(-2px); } .btn-outline-wht { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.4); border-radius: 8px; padding: .8rem 2rem; font-weight: 600; font-size: .9rem; text-decoration: none; display: inline-block; transition: all .2s; } .btn-outline-wht:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; } .btn-white-pill { background: #fff; color: var(--navy); border-radius: 8px; padding: 10px 20px; font-weight: 700; font-size: .9rem; text-decoration: none; display: inline-block; transition: all .2s; border: none; } .btn-white-pill:hover { background: var(--bg-pale); color: var(--blue-accent); transform: translateY(-2px); } .btn-outline-white { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.4); border-radius: 8px; padding: 10px 20px; font-weight: 600; font-size: .9rem; text-decoration: none; display: inline-block; transition: all .2s; } .btn-outline-white:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; } /* Hero CTA buttons */ .btn-hero-fill { background: var(--blue-accent); color: #fff; border-radius: 8px; padding: .78rem 1.8rem; font-weight: 700; font-size: .9rem; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; transition: all .2s; font-family: 'Outfit', sans-serif; } .btn-hero-fill:hover { background: var(--blue-mid); color: #fff; transform: translateY(-2px); } .btn-hero-out { background: transparent; color: rgba(255,255,255,.8); border: 1.5px solid rgba(255,255,255,.3); border-radius: 8px; padding: .78rem 1.8rem; font-weight: 600; font-size: .9rem; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; transition: all .2s; font-family: 'Outfit', sans-serif; } .btn-hero-out:hover { border-color: #fff; color: #fff; } /* CTA buttons */ .btn-cta-fill { background: var(--blue-accent); color: #fff; border-radius: 8px; padding: .8rem 2rem; font-weight: 700; font-size: .9rem; text-decoration: none; display: inline-block; transition: all .2s; } .btn-cta-fill:hover { background: var(--blue-mid); color: #fff; transform: translateY(-2px); } .btn-cta-ghost { background: transparent; color: rgba(255,255,255,.75); border: 1.5px solid rgba(255,255,255,.3); border-radius: 8px; padding: .8rem 2rem; font-weight: 600; font-size: .9rem; text-decoration: none; display: inline-block; transition: all .2s; } .btn-cta-ghost:hover { border-color: #fff; color: #fff; } .btn-cta-primary { background: #fff; color: var(--navy); padding: 10px 20px; border-radius: 12px; font-weight: 600; font-size: .92rem; text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; transition: all .2s ease; border: none; } .btn-cta-primary:hover { background: var(--bg-pale); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.2); } .btn-cta-outline { background: transparent; color: #fff; padding: 10px 20px; border-radius: 12px; font-weight: 600; font-size: .92rem; text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; border: 2px solid rgba(255,255,255,.3); transition: all .2s ease; } .btn-cta-outline:hover { border-color: #fff; background: rgba(255,255,255,.1); transform: translateY(-3px); } /* Service buttons */ .btn-svc-dark { background: var(--blue-accent); color: #fff; border-radius: 7px; padding: .55rem 1.2rem; font-weight: 600; font-size: .8rem; text-decoration: none; transition: background .2s; display: inline-block; } .btn-svc-dark:hover { background: var(--blue-mid); color: #fff; } .btn-svc-outline { background: transparent; color: var(--blue-accent); border: 1.5px solid var(--blue-accent); border-radius: 7px; padding: .55rem 1.2rem; font-weight: 600; font-size: .8rem; text-decoration: none; transition: all .2s; display: inline-block; } .btn-svc-outline:hover { background: var(--blue-accent); color: #fff; } /* Map button */ .map-btn { background: var(--blue-accent); color: #fff; border: none; border-radius: 7px; padding: .6rem 1.4rem; font-size: .82rem; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; font-family: 'Outfit', sans-serif; } .map-btn:hover { background: var(--blue-mid); color: #fff; } /* ============================================================ SECTION HELPERS / TYPOGRAPHY ============================================================ */ .sec-tag { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-accent); margin-bottom: .7rem; display: block; } .sec-tag-sm { font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--blue-accent); display: block; margin-bottom: .7rem; } .sec-title { font-family: 'DM Serif Display', serif; font-size: clamp(1.7rem, 3.5vw, 2.6rem); font-weight: 400; color: var(--navy); line-height: 1.2; } .sec-title span { color: var(--blue-accent); font-style: italic; } .sec-h2 { font-family: 'DM Serif Display', serif; font-weight: 400; color: var(--navy); line-height: 1.2; } .sec-h2 span { color: var(--blue-accent); font-style: italic; } .sec-lead { font-size: .97rem; color: var(--muted); line-height: 1.75; } /* Fade animation */ .fade-up { opacity: 0; transform: translateY(28px); transition: opacity .55s ease, transform .55s ease; } .fade-up.visible { opacity: 1; transform: translateY(0); } /* ::::::::::::featured-branches::::::::::: */ .services-section img.wp-smiley, .services-section img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 0.07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; color: rgba(74,158,190,.08); line-height: 1; user-select: none; pointer-events: none; opacity: 0.3; width: 70px!important; height: 66px!important; margin: 0px !important; vertical-align: inherit !important; } .featured-branches { background: var(--bg-pale); padding: 5rem 0; } .fb-header { text-align: center; margin-bottom: 2.5rem; } .fb-header .sec-tag-sm { font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--blue-accent); display: block; margin-bottom: .7rem; } .fb-header h2 { font-family: 'DM Serif Display', serif; font-size: clamp(2rem, 4.5vw, 2.8rem); font-weight: 400; color: var(--navy); line-height: 1.2; } .fb-header h2 span { color: var(--blue-accent); font-style: italic; } .fb-header p { font-size: .95rem; color: var(--muted); margin-top: .65rem; max-width:800px; margin-inline: auto; line-height: 1.75; } .fb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } @media(max-width: 991px){ .fb-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } } .fb-card { background: #fff; border: 1px solid var(--border); border-radius: 20px; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: all .35s; position: relative; } .fb-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--blue-accent), var(--blue-light)); transform: scaleX(0); transform-origin: left; transition: transform .35s; } .fb-card:hover { box-shadow: 0 20px 60px rgba(13,31,60,.13); transform: translateY(-6px); } .fb-card:hover::after { transform: scaleX(1); } .fb-img-wrap { position: relative; height: 200px; overflow: hidden; } .fb-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; } .fb-card:hover .fb-img-wrap img { transform: scale(1.04); } .fb-img-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(13,31,60,.55) 100%); } .fb-city-badge { position: absolute; bottom: 1rem; left: 1.1rem; background: var(--blue-accent); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .26rem .75rem; border-radius: 50px; display: flex; align-items: center; gap: 5px; } .fb-body { padding: 1.5rem 1.6rem; flex: 1; display: flex; flex-direction: column;text-align:left } .fb-name { font-weight: 900; font-size: 1.05rem; color: var(--navy); margin-bottom: .55rem; line-height: 1.25; } .fb-addr { font-size: .95rem; color: var(--muted); line-height: 1.65; margin-bottom: .8rem; display: flex; align-items: flex-start; gap: 6px; } .fb-addr i { color: var(--blue-accent); flex-shrink: 0; margin-top: .15rem; } .fb-phone { font-size: .95rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; text-decoration: none; margin-bottom: 1rem; transition: color .2s; } .fb-phone i { color: var(--blue-accent); font-size: .78rem; } .fb-phone:hover { color: var(--blue-accent); } .fb-hours-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.1rem; } .fb-hour-chip { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 50px; padding: .22rem .75rem; font-size: .72rem; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 4px; } .fb-hour-chip i { color: var(--blue-accent); font-size: .7rem; } .fb-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1.3rem; } .fb-tag { background: rgba(11,87,208,.07); border: 1px solid rgba(11,87,208,.15); color: var(--blue-mid); font-size: .68rem; font-weight: 700; padding: .2rem .6rem; border-radius: 20px; } .fb-ctas { display: flex; gap: .6rem; margin-top: auto; } .btn-fb-fill { flex: 1; background: var(--blue-accent); color: #fff; border-radius: 8px; padding: .6rem 1rem; font-weight: 700; font-size: .8rem; text-decoration: none; text-align: center; transition: background .2s; font-family: 'Outfit', sans-serif; display: inline-block; } .btn-fb-fill:hover { background: var(--blue-mid); color: #fff; } .btn-fb-out { width: 40px; background: transparent; color: var(--blue-accent); border: 1.5px solid rgba(11,87,208,.3); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; text-decoration: none; transition: all .2s; flex-shrink: 0; } .btn-fb-out:hover { background: var(--blue-accent); color: #fff; border-color: var(--blue-accent); } .fb-all-link { text-align: center; margin-top: 2.5rem; } .fb-all-link a { font-weight: 700; font-size: .88rem; color: var(--blue-accent); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap .2s; } .fb-all-link a:hover { gap: 10px; color: var(--blue-mid); } /* ============================================================ WELCOME SECTION ============================================================ */ .welcome-section { background: var(--white); padding: 5rem 0; position: relative; overflow: hidden; } .welcome-section::before { content: ''; position: absolute; top: -80px; right: -80px; width: 340px; height: 340px; border-radius: 50%; background: var(--bg-pale); } .welcome-num { font-size: 1.75rem; font-weight: 800; color: var(--blue-accent); line-height: 1; } .welcome-card { background: var(--bg-soft); border-radius: 20px; padding: 2rem; border: 1px solid var(--border); height: 100%; transition: all .3s; } .welcome-card:hover { box-shadow: 0 12px 40px rgba(74,158,190,.15); transform: translateY(-4px); } .welcome-card i { font-size: 2rem; color: var(--blue-accent); margin-bottom: 1rem; display: block; } .welcome-card h5 { font-weight: 700; font-size: .95rem; color: var(--navy); margin-bottom: .4rem; } .welcome-card p { font-size: .82rem; color: var(--muted); line-height: 1.6; } /* ============================================================ SERVICES SLIDER (Homepage) ============================================================ */ .services-section { background: var(--bg-pale); padding: 5rem 0; } .services-track-wrap { overflow: hidden; position: relative; } .services-track { display: flex; gap: 1.5rem; transition: transform .4s cubic-bezier(.4,0,.2,1); will-change: transform; } .svc-card { flex: 0 0 calc(33.333% - 1rem); min-width: 280px; background: #fff; border-radius: 20px; overflow: hidden; border: 1px solid var(--border); transition: all .3s; cursor: pointer; } .svc-card:hover { box-shadow: 0 16px 50px rgba(13,31,60,.12); transform: translateY(-5px); } .svc-card-top { padding: 2rem 2rem 1.5rem; position: relative; overflow: hidden; } .svc-bg-letter { position: absolute; right: -10px; top: -10px; font-size: 5rem; font-weight: 900; color: rgba(74,158,190,.08); line-height: 1; user-select: none; pointer-events: none; } .svc-tag { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-accent); margin-bottom: .6rem; } .svc-card h4 { font-weight: 800; font-size: 1.1rem; color: var(--navy); line-height: 1.3; margin-bottom: .5rem; } .svc-card h4 span { color: var(--blue-accent); } .svc-card p { font-size: .82rem; color: var(--muted); line-height: 1.65; } .svc-card-btns { padding: 1.2rem 2rem 1.8rem; border-top: 1px solid var(--border); display: flex; gap: .75rem; flex-wrap: wrap; } .svc-nav { display: flex; align-items: center; gap: 1rem; } .svc-arrow { width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--blue-accent); transition: all .2s; font-size: 1rem; flex-shrink: 0; } .svc-arrow:hover { background: var(--blue-accent); color: #fff; border-color: var(--blue-accent); } .svc-dots { display: flex; gap: 8px; flex-wrap: wrap; } .svc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); cursor: pointer; transition: all .3s; border: none; padding: 0; } .svc-dot.active { width: 24px; border-radius: 4px; background: var(--blue-accent); } /* Service page grid */ .svc-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; } .svc-emoji { font-size: 1.8rem; display: block; margin-bottom: .8rem; } .svc-card h5 { font-weight: 800; font-size: .9rem; color: var(--navy); margin-bottom: .35rem; } /* Services page accordion cards */ .svc-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--blue-accent), var(--blue-light)); transform: scaleX(0); transform-origin: left; transition: transform .3s; } .svc-card:hover::after { transform: scaleX(1); } .svc-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 1rem; font-size: .8rem; font-weight: 600; color: var(--blue-accent); } .svc-link i { transition: transform .2s; font-size: .85rem; } .svc-card:hover .svc-link i { transform: translateX(4px); } /* ============================================================ POPULAR SECTION ============================================================ */ .popular-section { background: url(images/pat.jpg) repeat; padding: 5rem 0; } .pop-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.2rem; } .pop-item { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem; transition: all .3s; cursor: pointer; position: relative; overflow: hidden; } .pop-item::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--blue-accent), var(--blue-light)); transform: scaleX(0); transform-origin: left; transition: transform .3s; } .pop-item:hover { background: #fff; box-shadow: 0 10px 30px rgba(74,158,190,.12); transform: translateY(-3px); } .pop-item:hover::after { transform: scaleX(1); } .pop-item-icon { font-size: 2rem; margin-bottom: .8rem; } .pop-item h6 { font-weight: 700; font-size: .9rem; color: var(--navy); margin-bottom: .3rem; } .pop-item p { font-size: .78rem; color: var(--muted); line-height: 1.55; margin: 0; } .pop-item .arr { color: var(--blue-accent); font-size: .8rem; font-weight: 600; margin-top: .8rem; display: block; text-decoration: none; } /* ============================================================ TESTIMONIALS ============================================================ */ .testimonials-section { background: var(--navy); padding: 5rem 0; } .testi-section { background: var(--navy); padding: 5rem 0; } .testi-track-wrap { overflow: hidden; } .testi-track { display: flex; gap: 1.5rem; transition: transform .4s cubic-bezier(.4,0,.2,1); will-change: transform; } .testi-card { flex: 0 0 calc(50% - .75rem); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 2rem; } .testi-stars { color: #f0c040; font-size: .85rem; margin-bottom: .8rem; } .testi-quote { font-size: 2.5rem; color: var(--blue-accent); font-weight: 900; line-height: .8; margin-bottom: .5rem; font-family: 'DM Serif Display', serif; } .testi-card p { color: rgba(255,255,255,.85); font-size: .9rem; line-height: 1.75; font-style: italic; margin-bottom: 1.5rem; } .testi-author { display: flex; align-items: center; gap: 12px; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.1); } .testi-av { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--blue-accent), #1a6ba0); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: .9rem; flex-shrink: 0; } .testi-name { font-weight: 600; font-size: .88rem; color: #fff; } .testi-loc { font-size: .75rem; color: rgba(255,255,255,.45); } .testi-nav { display: flex; gap: 10px; margin-top: 2rem; } .testi-nav-btn { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; font-size: .95rem; transition: all .2s; } .testi-nav-btn:hover { background: var(--blue-accent); border-color: var(--blue-accent); } /* ============================================================ NHS SECTION ============================================================ */ .nhs-section { background: var(--bg-pale); padding: 5rem 0; } .nhs-card { background: linear-gradient(135deg, #dbeef8 0%, #c8e2f5 100%); border-radius: 24px; overflow: hidden; border: 1px solid var(--border); } .nhs-label { display: inline-flex; align-items: center; gap: 8px; background: #005eb8; color: #fff; font-weight: 700; font-size: .75rem; padding: .3rem .9rem; border-radius: 6px; letter-spacing: .05em; margin-bottom: 1rem; } /* ============================================================ ABOUT SECTION ============================================================ */ .about-section { background: #fff; padding: 5rem 0; } .about-stat { border-left: 3px solid var(--blue-accent); padding-left: 1.2rem; } .about-stat .num { font-family: 'DM Serif Display', serif; font-size: 1.6rem; color: var(--navy); line-height: 1; } .about-stat .num span { color: var(--blue-accent); } .about-stat .lbl { font-size: .8rem; color: var(--muted); margin-top: 2px; } .pillar { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 14px; padding: 1.3rem; transition: all .3s; } .pillar:hover { box-shadow: 0 8px 24px rgba(74,158,190,.12); } .pillar i { color: var(--blue-accent); font-size: 1.4rem; margin-bottom: .6rem; display: block; } .pillar h6 { font-weight: 700; font-size: .88rem; color: var(--navy); margin-bottom: .3rem; } .pillar p { font-size: .78rem; color: var(--muted); line-height: 1.55; margin: 0; } /* About page blocks */ .about-block { margin-bottom: 2rem; } .about-block h3 { font-family: 'DM Serif Display', serif; font-size: 1.6rem; font-weight: 400; color: var(--blue-accent); margin-bottom: .7rem; } .about-block p { font-size: .92rem; color: var(--muted); line-height: 1.78; } .about-block p strong { color: var(--navy); } .about-img { border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px rgba(13,31,60,.12); } .about-img img { width: 100%; height: 380px; object-fit: cover; display: block; } /* ============================================================ APPOINTMENT SECTION ============================================================ */ .appt-section { background: linear-gradient(135deg, var(--navy) 0%, #1a3a6a 100%); padding: 5rem 0; } .appt-form-card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; padding: 2rem; } .appt-form-card .form-control, .appt-form-card select { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; border-radius: 8px; padding: .7rem 1rem; font-size: .87rem; font-family: 'Outfit', sans-serif; } .appt-form-card .form-control::placeholder { color: rgba(255,255,255,.4); } .appt-form-card .form-control:focus, .appt-form-card select:focus { background: rgba(255,255,255,.15); border-color: var(--blue-accent); box-shadow: 0 0 0 3px rgba(74,158,190,.2); color: #fff; outline: none; } .appt-form-card .form-label { color: rgba(255,255,255,.65); font-size: .8rem; font-weight: 500; margin-bottom: .35rem; } .appt-form-card select option { color: #000; background: #fff; } .appt-form-card input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.5); cursor: pointer; } /* ============================================================ FAQ SECTION ============================================================ */ .faq-section { background: var(--bg-pale); padding: 5rem 0; } .accordion-item { border: 1px solid var(--border) !important; border-radius: 12px !important; overflow: hidden; margin-bottom: .75rem; } .accordion-button { font-weight: 600; font-size: .9rem; color: var(--navy) !important; background: #fff !important; font-family: 'Outfit', sans-serif; } .accordion-button:not(.collapsed) { color: var(--blue-mid) !important; background: var(--bg-soft) !important; box-shadow: none !important; } .accordion-body { font-size: .86rem; color: var(--muted); line-height: 1.7; background: #fff; } /* ============================================================ PAGE HERO - INNER PAGES (light version) ============================================================ */ .page-hero { background: linear-gradient(160deg, var(--navy) 0%, var(--blue-mid) 50%, var(--blue-accent) 100%); padding: 4.5rem 0 3.5rem; position: relative; overflow: hidden; } .page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(11,87,208,.15) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(107,184,212,.1) 0%, transparent 40%); pointer-events: none; } .page-hero .sec-tag { font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--blue-light); margin-bottom: .8rem; display: block; } .page-hero h1 { font-family: 'DM Serif Display', serif; font-weight: 400; color: #fff; line-height: 1.15; margin-bottom: 1rem; } .page-hero h1 span { color: #90b8f6; font-style: italic; } .page-hero p { font-size: 1rem; color: rgba(255,255,255,.65); line-height: 1.75; max-width: 520px; } /* Page hero wavy bottom variant */ .page-hero.wave-bottom::after { content: ''; position: absolute; bottom: -2px; left: -5px; width: 105%; right: 0; height: 80px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80'%3E%3Cpath fill='%23eef1fb' d='M0,40 C480,80 960,0 1440,40 L1440,80 L0,80 Z'/%3E%3C/svg%3E") no-repeat center bottom; background-size: cover; } /* Hero badge (pill) variant */ .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); padding: .5rem 1.2rem; border-radius: 50px; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.9); margin-bottom: 1.5rem; } .hero-badge i { color: var(--blue-light); } /* Hero stats */ .hero-stats { display: flex; flex-wrap: wrap; gap: 2rem; } .hero-stat .num { font-family: 'DM Serif Display', serif; font-size: 1.5rem; color: #fff; line-height: 1; } .hero-stat .num span { color: #90b8f6; } .hero-stat .lbl { font-size: .8rem; color: rgba(255,255,255,.5); margin-top: .2rem; } .hero-stat-num { font-size: 2.2rem; font-weight: 800; color: #fff; line-height: 1; display: flex; align-items: baseline; gap: 2px; } .hero-stat-num span { font-size: 1.2rem; color: var(--blue-light); } .hero-stat-label { font-size: .8rem; color: rgba(255,255,255,0.6); margin-top: .3rem; font-weight: 500; } /* Floating shapes */ .hero-shapes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .hero-shape { position: absolute; border-radius: 50%; background: rgba(255,255,255,.03); animation: float 20s ease-in-out infinite; } .hero-shape:nth-child(1) { width: 300px; height: 300px; left: -50px; top: -50px; animation-delay: 0s; } .hero-shape:nth-child(2) { width: 200px; height: 200px; right: -30px; top: 15%; animation-delay: -5s; } .hero-shape:nth-child(3) { width: 150px; height: 150px; left: 25%; bottom: -30px; animation-delay: -10s; } @keyframes float { 0%, 100% { transform: translate(0,0) rotate(0deg); } 25% { transform: translate(15px,-20px) rotate(5deg); } 50% { transform: translate(-10px,15px) rotate(-5deg); } 75% { transform: translate(20px,8px) rotate(3deg); } } /* ============================================================ ABOUT HERO (About Page) ============================================================ */ .about-hero { background: linear-gradient(135deg, #1a5068 0%, #0d3a52 50%, #0a2a40 100%); padding: 5rem 0 4rem; position: relative; overflow: hidden; } .about-hero::before { content: ''; position: absolute; right: -120px; top: -120px; width: 500px; height: 500px; border-radius: 50%; background: rgba(255,255,255,.04); } .about-hero::after { content: ''; position: absolute; left: -80px; bottom: -80px; width: 300px; height: 300px; border-radius: 50%; background: rgba(107,184,212,.07); } .about-hero .sec-tag { color: var(--blue-light); } .about-hero h1 { font-family: 'DM Serif Display', serif; font-weight: 400; color: #fff; line-height: 1.1; margin-bottom: 1.2rem; } .about-hero h1 span { color: #90b8f6; font-style: italic; } .about-hero .hero-lead { font-size: 1.05rem; color: rgba(255,255,255,.7); line-height: 1.8; max-width: 560px; margin-bottom: 2.5rem; } .hero-img-wrap { border-radius: 20px; overflow: hidden; box-shadow: 0 32px 80px rgba(0,0,0,.3); position: relative; } .hero-img-wrap img { width: 100%; height: 460px; object-fit: cover; display: block; } .svc-hero .hero-img-wrap img { width: 100%; height: 340px; object-fit: cover; display: block; } .hero-img-badge { position: absolute; bottom: 1.5rem; left: 1.5rem; background: #fff; border-radius: 14px; padding: 1rem 1.2rem; box-shadow: 0 12px 36px rgba(0,0,0,.15); display: flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 600; color: var(--navy); } .hero-img-badge .b-icon { width: 36px; height: 36px; border-radius: 10px; background: #e9f9f0; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; } /* ============================================================ INTRO SECTION (About Page) ============================================================ */ .intro-section { background: #fff; padding: 5rem 0; } .intro-block { margin-bottom: 2.5rem; } .intro-block h3 { font-family: 'DM Serif Display', serif; font-size: 1.7rem; font-weight: 400; color: var(--blue-accent); margin-bottom: .9rem; line-height: 1.25; } .intro-block p { font-size: .95rem; color: var(--muted); line-height: 1.8; } .intro-block p strong { color: var(--navy); font-weight: 700; } .intro-img { border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px rgba(13,31,60,.12); } .intro-img img { width: 100%; height: 420px; object-fit: cover; display: block; } /* ============================================================ VALUES SECTION ============================================================ */ .values-section { background: var(--bg-pale); padding: 5rem 0; } .value-card { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 2rem; height: 100%; transition: all .3s; position: relative; overflow: hidden; } .value-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--blue-accent), var(--blue-light)); transform: scaleX(0); transform-origin: left; transition: transform .35s; } .value-card:hover { box-shadow: 0 16px 48px rgba(13,31,60,.1); transform: translateY(-5px); } .value-card:hover::before { transform: scaleX(1); } .value-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--bg-soft); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 1.2rem; } .value-card h5 { font-weight: 800; font-size: 1rem; color: var(--navy); margin-bottom: .5rem; } .value-card p { font-size: .84rem; color: var(--muted); line-height: 1.68; margin: 0; } /* ============================================================ HOW IT WORKS ============================================================ */ .hiw-section { background: #fff; padding: 5rem 0; } .hiw-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; position: relative; } .hiw-steps::before { content: ''; position: absolute; top: 36px; left: calc(12.5% + 36px); right: calc(12.5% + 36px); height: 2px; background: linear-gradient(90deg, var(--blue-accent), var(--blue-light), var(--blue-accent)); z-index: 0; } .hiw-step { text-align: center; position: relative; z-index: 1; } .step-circle { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--blue-accent), var(--blue-mid)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto 1.2rem; box-shadow: 0 8px 28px rgba(11,87,208,.25); position: relative; transition: transform .3s; } .hiw-step:hover .step-circle { transform: scale(1.08); } .step-num { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; background: #fff; border: 2px solid var(--blue-accent); border-radius: 50%; font-size: .68rem; font-weight: 800; color: var(--blue-accent); display: flex; align-items: center; justify-content: center; } .hiw-step h5 { font-weight: 800; font-size: .95rem; color: var(--navy); margin-bottom: .4rem; } .hiw-step p { font-size: .82rem; color: var(--muted); line-height: 1.6; margin: 0; } /* How it works (Prescriptions page) */ .how-it-works-section { background: #fff; padding: 0 0 3.5rem; } .steps-container { display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem; margin-top: 3rem; } .step-card { text-align: center; padding: 1.5rem; position: relative; } .step-number { width: 48px; height: 48px; margin: 0 auto 1rem; background: linear-gradient(135deg, var(--blue-accent) 0%, var(--blue-mid) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 800; color: #fff; box-shadow: 0 4px 16px rgba(11,87,208,.3); } .step-card h4 { font-weight: 700; font-size: 1.05rem; color: var(--navy); margin-bottom: .75rem; } .step-card p { font-size: .85rem; color: var(--muted); line-height: 1.7; } /* ============================================================ TEAM SECTION ============================================================ */ .team-section { background: var(--bg-pale); padding: 5rem 0; } .team-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.2rem; } .team-card { background: #fff; border: 1px solid var(--border); border-radius: 20px; overflow: hidden; transition: all .3s; } .team-card:hover { box-shadow: 0 16px 48px rgba(13,31,60,.1); transform: translateY(-4px); } .team-img { width: 100%; height: 200px; object-fit: cover; object-position: top; display: block; } .team-body { padding: 1.3rem; } .team-body h6 { font-weight: 800; font-size: .95rem; color: var(--navy); margin-bottom: .2rem; } .team-body .role { font-size: .78rem; font-weight: 600; color: var(--blue-accent); margin-bottom: .5rem; } .team-body p { font-size: .78rem; color: var(--muted); line-height: 1.6; margin: 0; } .team-social { display: flex; gap: .4rem; margin-top: .8rem; } .team-social a { width: 28px; height: 28px; border-radius: 7px; background: var(--bg-soft); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: .75rem; text-decoration: none; transition: all .2s; } .team-social a:hover { background: var(--blue-accent); color: #fff; border-color: var(--blue-accent); } /* ============================================================ CONFIDENCE / ACCREDITATIONS ============================================================ */ .confidence-section { background: #fff; padding: 5rem 0; } .conf-card { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 18px; padding: 1.8rem; display: flex; align-items: flex-start; gap: 1.2rem; transition: all .3s; height: 100%; } .conf-card:hover { box-shadow: 0 10px 32px rgba(13,31,60,.08); transform: translateY(-3px); } .conf-icon-wrap { width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; } .conf-card h6 { font-weight: 800; font-size: .95rem; color: var(--navy); margin-bottom: .4rem; } .conf-card p { font-size: .82rem; color: var(--muted); line-height: 1.65; margin: 0; } .accred-logos { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 2.5rem; } .accred-logo { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: .8rem 1.4rem; display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700; color: var(--navy); } .accred-logo i { color: var(--blue-accent); font-size: 1.1rem; } /* ============================================================ TIMELINE SECTION ============================================================ */ .timeline-section { background: var(--bg-pale); padding: 5rem 0; } .timeline { position: relative; padding-left: 2rem; } .timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--blue-accent), var(--blue-light)); border-radius: 2px; } .tl-item { position: relative; padding: 0 0 2.5rem 2rem; } .tl-item:last-child { padding-bottom: 0; } .tl-dot { position: absolute; left: -2rem; top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--blue-accent); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--blue-accent); transform: translateX(-6px); } .tl-year { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-accent); margin-bottom: .3rem; } .tl-item h5 { font-weight: 800; font-size: .95rem; color: var(--navy); margin-bottom: .3rem; } .tl-item p { font-size: .84rem; color: var(--muted); line-height: 1.65; margin: 0; } /* ============================================================ CTA SECTIONS ============================================================ */ .cta-section { background: linear-gradient(135deg, var(--navy) 0%, #1a3a6a 100%); padding: 5rem 0; text-align: center; position: relative; overflow: hidden; } .cta-section::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(ellipse, rgba(107,184,212,.06) 0%, transparent 65%); pointer-events: none; } .cta-section h2 { font-family: 'DM Serif Display', serif; font-weight: 400; color: #fff; margin-bottom: .75rem; } .cta-section h2 span { color: #90b8f6; font-style: italic; } .cta-section p { font-size: .97rem; color: rgba(255,255,255,.55); line-height: 1.75; max-width: 440px; margin: 0 auto 2rem; } .cta-buttons { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; } .cta-strip { background: linear-gradient(135deg, var(--navy) 0%, #1a3a6a 100%); padding: 3.5rem 0; text-align: center; } .cta-strip h2 { font-family: 'DM Serif Display', serif; font-size: clamp(1.6rem,3.5vw,2.2rem); font-weight: 400; color: #fff; margin-bottom: .75rem; } .cta-strip h2 span { color: #90b8f6; font-style: italic; } .cta-strip p { font-size: .95rem; color: rgba(255,255,255,.65); line-height: 1.7; max-width: 460px; margin: 0 auto 1.8rem; } .cta-content { position: relative; text-align: center; } .cta-content h2 { font-family: 'DM Serif Display', serif; font-weight: 400; color: #fff; margin-bottom: 1rem; } .cta-content h2 span { color: var(--blue-light); font-style: italic; } .cta-content p { font-size: 1rem; color: rgba(255,255,255,.7); line-height: 1.8; max-width: 520px; margin: 0 auto 2rem; } /* ============================================================ BRANCH HERO ============================================================ */ .branch-hero { background: linear-gradient(135deg, #1a5068 0%, #0d3a52 50%, #0a2a40 100%); padding: 5rem 0 4rem; position: relative; overflow: hidden; } .branch-hero::before { content: ''; position: absolute; right: -120px; top: -120px; width: 500px; height: 500px; border-radius: 50%; background: rgba(255,255,255,.04); } .branch-hero::after { content: ''; position: absolute; left: -80px; bottom: -80px; width: 300px; height: 300px; border-radius: 50%; background: rgba(107,184,212,.07); } .branch-tag { font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--blue-light); margin-bottom: .9rem; display: flex; align-items: center; gap: 6px; } .branch-hero h1 {max-width:500px; font-family: 'DM Serif Display', serif; font-weight: 400; color: #fff; line-height: 1.1; margin-bottom: 1rem; } .branch-hero h1 span { color: #90b8f6; font-style: italic; } .branch-hero .hero-sub { font-size: 1rem; color: rgba(255,255,255,.6); line-height: 1.75; max-width: 480px; margin-bottom:20px; } .hero-ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2.5rem; } .hero-pills { display: flex; flex-wrap: wrap; gap: .6rem; } .hpill { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 50px; padding: .35rem 1rem; font-size: .78rem; color: rgba(255,255,255,.7); display: flex; align-items: center; gap: 6px; } .hpill i { color: var(--blue-light); } .hero-card { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 72px rgba(0,0,0,.25); position: relative; } .hero-card img { width: 100%; height: 300px; object-fit: cover; display: block; } .hero-card-body { padding: 1.4rem 1.6rem; } .open-badge { display: inline-flex; align-items: center; gap: 6px; background: #e8f7ee; border: 1px solid #b8e4c8; color: #1a7a3a; border-radius: 50px; padding: .3rem .85rem; font-size: .75rem; font-weight: 700; margin-bottom: .8rem; } .open-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #2ecc71; } .hero-card-body h5 { font-weight: 800; font-size: 1rem; color: var(--navy); margin-bottom: .3rem; } .hero-card-body p { font-size: .82rem; color: var(--muted); line-height: 1.55; margin: 0; } .hero-card-link { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 600; color: var(--blue-accent); text-decoration: none; margin-top: .8rem; transition: gap .2s; } .hero-card-link:hover { gap: 9px; color: var(--blue-mid); } /* ============================================================ INFO SECTION (Branch page) ============================================================ */ .info-section { background: var(--bg-pale); padding: 3rem 0; } .info-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; } .info-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem; display: flex; align-items: flex-start; gap: 12px; transition: all .3s; } .info-card:hover { box-shadow: 0 8px 28px rgba(13,31,60,.08); transform: translateY(-2px); } .info-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; } .info-card h6 { font-weight: 800; font-size: .82rem; color: var(--navy); margin-bottom: .25rem; } .info-card p { font-size: .8rem; color: var(--muted); line-height: 1.55; margin: 0; } .info-card a { font-size: .8rem; color: var(--blue-accent); text-decoration: none; font-weight: 600; } .info-card a:hover { color: var(--blue-mid); } /* ============================================================ OPENING HOURS ============================================================ */ .hours-section { background: #fff; padding: 4rem 0; } .hours-table { width: 100%; border-collapse: collapse; } .hours-table tr { border-bottom: 1px solid var(--border); } .hours-table tr:last-child { border-bottom: none; } .hours-table td { padding: .85rem .5rem; font-size: .88rem; vertical-align: middle; } .hours-table td:first-child { font-weight: 700; color: var(--navy); width: 140px; } .hours-table td:last-child { color: var(--muted); } .open-pill { background: #e8f7ee; border: 1px solid #b8e4c8; color: #1a7a3a; border-radius: 50px; padding: .2rem .65rem; font-size: .7rem; font-weight: 700; margin-left: .6rem; } .closed-pill { background: #fff0f0; border: 1px solid #f5c6c6; color: #c0392b; border-radius: 50px; padding: .2rem .65rem; font-size: .7rem; font-weight: 700; margin-left: .6rem; } /* ============================================================ MAP SECTIONS ============================================================ */ .map-section { background: var(--bg-pale); padding: 3rem 0; } .map-outer { border-radius: 20px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 16px 56px rgba(13,31,60,.1); } .map-bar { background: #fff; border-bottom: 1px solid var(--border); padding: .55rem 1rem; display: flex; align-items: center; gap: .75rem; } .map-bar span { font-weight: 700; font-size: .85rem; color: var(--navy); } .map-bar a { margin-left: auto; font-size: .78rem; font-weight: 600; color: var(--blue-accent); text-decoration: none; display: flex; align-items: center; gap: 4px; } .map-bar a:hover { color: var(--blue-mid); } .map-iframe { width: 100%; height: 380px; border: none; display: block; } .map-wrap { width: 100%; height: 380px; background: linear-gradient(135deg,#d8eef8,#c0daf0); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .map-wrap::before { content: ''; position: absolute; inset: 0; background: url('https://images.unsplash.com/photo-1524661135-423995f22d0b?w=1400&q=60') center/cover no-repeat; opacity: .25; } .map-overlay { background: rgba(255,255,255,.95); border-radius: 16px; padding: 1.5rem 2rem; text-align: center; position: relative; z-index: 1; box-shadow: 0 16px 48px rgba(13,31,60,.15); } .map-overlay i { font-size: 2rem; color: var(--blue-accent); display: block; margin-bottom: .5rem; } .map-overlay h5 { font-weight: 700; color: var(--navy); margin-bottom: .3rem; font-size: .95rem; } .map-overlay p { font-size: .83rem; color: var(--muted); margin: 0 0 1rem; } /* Map wrapper (Branches page) */ .map-wrapper { background: var(--bg-pale); padding: 24px 0; } .map-container { background: #fff; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-med); border: 1px solid var(--border); } .map-header { background: var(--gradient-1); padding: 10px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .map-title { color: #fff; font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; gap: .6rem; } .map-title i { color: #6bb8d4; } .map-controls { display: flex; gap: .5rem; } .map-btn-ctrl { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 0.5rem 1rem; border-radius: 8px; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: .4rem; } .map-btn-ctrl:hover, .map-btn-ctrl.active { background: #fff; color: var(--navy); } .map-frame { height: 450px; background: linear-gradient(135deg,#e8f4fc 0%,#d4e8f5 100%); position: relative; overflow: hidden; } .map-bg { width: 100%; height: 100%; background-image: linear-gradient(rgba(11,87,208,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(11,87,208,.08) 1px, transparent 1px); background-size: 50px 50px; } .map-pins-container { position: absolute; inset: 0; pointer-events: none; } .map-pin { position: absolute; display: flex; flex-direction: column; align-items: center; cursor: pointer; pointer-events: all; transform: translateX(-50%); transition: all .3s; } .map-pin:hover { transform: translateX(-50%) scale(1.15); z-index: 10; } .pin-marker { width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 24px solid var(--blue-accent); position: relative; filter: drop-shadow(0 4px 8px rgba(0,0,0,.25)); } .pin-marker::after { content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 10px; height: 10px; background: #fff; border-radius: 50%; } .pin-name { background: #fff; border-radius: 6px; padding: .3rem .7rem; font-size: .72rem; font-weight: 700; color: var(--navy); box-shadow: 0 3px 12px rgba(0,0,0,.15); white-space: nowrap; margin-top: 6px; opacity: 0; transform: translateY(-6px); transition: all .25s; } .map-pin:hover .pin-name { opacity: 1; transform: translateY(0); } .map-legend { padding: 1rem 1.5rem; background: var(--bg-soft); border-top: 1px solid var(--border); display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; } .legend-item { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--muted); } .legend-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--blue-accent); } /* ============================================================ BRANCHES / ACCORDION (Branches Page) ============================================================ */ .branches-section { background: var(--bg-soft); padding: 30px 0; } .section-header { text-align: center; margin-bottom: 24px; } .section-label { display: inline-flex; align-items: center; gap: .5rem; background: rgba(11,87,208,0.1); color: var(--blue-accent); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .5rem 1.2rem; border-radius: 50px; margin-bottom: 1rem; } .section-title { font-family: 'DM Serif Display', serif; font-weight: 400; color: var(--navy); margin-bottom: .8rem; } .section-title span { color: var(--blue-accent); font-style: italic; } .section-subtitle { color: var(--muted); font-size: .95rem; max-width: 480px; margin: 0 auto; } .accordion-wrapper { max-width: 900px; margin: 0 auto; } .accordion-item { background: #fff; border-radius: 16px; margin-bottom: 1rem; overflow: hidden; box-shadow: 0 2px 12px rgba(13,31,60,.06); border: 1px solid var(--border); transition: all .3s ease; } .accordion-item:hover { box-shadow: 0 4px 20px rgba(13,31,60,.1); } .accordion-item.active { box-shadow: 0 8px 32px rgba(13,31,60,.12); border-color: var(--blue-accent); } .accordion-header { display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 1.6rem; cursor: pointer; transition: background .3s; gap: 1rem; } .accordion-header:hover { background: var(--bg-pale); } .accordion-item.active .accordion-header { background: linear-gradient(135deg,rgba(11,87,208,.05) 0%,rgba(107,184,212,.08) 100%); } .accordion-left { display: flex; align-items: center; gap: 1rem; flex: 1; } .accordion-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--gradient-2); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.2rem; flex-shrink: 0; transition: transform .3s; } .accordion-item.active .accordion-icon { transform: rotate(180deg); } .accordion-title-group { flex: 1; } .accordion-branch-name { font-weight: 700; font-size: 1.1rem; color: var(--navy); margin-bottom: .25rem; } .accordion-branch-location { font-size: .82rem; color: var(--muted); display: flex; align-items: center; gap: .4rem; } .accordion-branch-location i { color: var(--blue-accent); font-size: .75rem; } .accordion-status { display: flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 20px; font-size: .75rem; font-weight: 600; white-space: nowrap; } .status-open { background: rgba(37,211,102,.12); color: #16a34a; } .status-closed { background: rgba(239,68,68,.12); color: #dc2626; } .accordion-toggle { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-pale); display: flex; align-items: center; justify-content: center; color: var(--blue-accent); font-size: 1rem; transition: all .3s; } .accordion-item.active .accordion-toggle { background: var(--blue-accent); color: #fff; transform: rotate(45deg); } .accordion-content { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.4,0,.2,1); } .accordion-item.active .accordion-content { max-height: 1000px; } .accordion-inner { padding: 0 1.6rem 1.6rem; } .accordion-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; margin-top: 1rem; } .info-box { background: var(--bg-pale); border-radius: 12px; padding: 1.1rem; } .info-box-title { font-size: .72rem; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .7rem; display: flex; align-items: center; gap: .5rem; } .info-box-title i { color: var(--blue-accent); } .info-box-content { font-size: .85rem; color: var(--muted); line-height: 1.8; } .info-box-content strong { color: var(--navy); } .hours-list { font-size: .8rem; } .hours-list-item { display: flex; justify-content: space-between; padding: .3rem 0; border-bottom: 1px dashed var(--border); } .hours-list-item:last-child { border-bottom: none; } .hours-day-name { font-weight: 600; color: var(--navy); } .hours-time-val { color: var(--muted); } .services-list { display: flex; flex-wrap: wrap; gap: .5rem; } .service-badge { background: rgba(11,87,208,.08); color: var(--blue-accent); font-size: .72rem; font-weight: 600; padding: .4rem .75rem; border-radius: 6px; display: inline-flex; align-items: center; gap: .35rem; } .service-badge i { font-size: .65rem; } .team-section-acc { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); } .team-title { font-size: .75rem; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .8rem; } .team-members { display: flex; gap: .8rem; flex-wrap: wrap; } .team-member { display: flex; align-items: center; gap: .5rem; background: #fff; padding: .4rem .7rem; border-radius: 8px; border: 1px solid var(--border); font-size: .8rem; color: var(--navy); } .team-member-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--gradient-2); display: flex; align-items: center; justify-content: center; color: #fff; font-size: .7rem; font-weight: 700; } .action-buttons { display: flex; gap: .7rem; margin-top: 1.2rem; flex-wrap: wrap; } .btn-action { flex: 1; min-width: 140px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 1rem; border-radius: 10px; font-size: .82rem; font-weight: 600; text-decoration: none; transition: all .2s; } .btn-action-primary { background: var(--gradient-2); color: #fff; box-shadow: 0 4px 12px rgba(11,87,208,.25); } .btn-action-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(11,87,208,.35); color: #fff; } .btn-action-outline { background: #fff; color: var(--navy); border: 1.5px solid var(--border); } .btn-action-outline:hover { border-color: var(--blue-accent); color: var(--blue-accent); background: var(--bg-pale); } .no-results { text-align: center; padding: 4rem 2rem; display: none; } .no-results-icon { width: 80px; height: 80px; border-radius: 50%; background: var(--bg-pale); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; color: var(--muted); font-size: 2rem; } .no-results h3 { font-weight: 700; color: var(--navy); margin-bottom: .5rem; } .no-results p { color: var(--muted); margin-bottom: 1.5rem; } .clear-btn { color: var(--blue-accent); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; } .clear-btn:hover { text-decoration: underline; } /* ============================================================ BRANCH CARDS (Branches Page) ============================================================ */ .branch-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 1.8rem; transition: all .3s; height: 100%; } .branch-card:hover { box-shadow: 0 10px 30px rgba(13,31,60,.08); transform: translateY(-3px); } .branch-card h5 { font-weight: 700; font-size: 1rem; color: var(--navy); margin-bottom: .3rem; display: flex; align-items: center; gap: 8px; } .branch-card h5 i { color: var(--blue-accent); font-size: .9rem; } .branch-detail { font-size: .83rem; color: var(--muted); line-height: 1.75; margin-bottom: .4rem; display: flex; align-items: flex-start; gap: 6px; } .branch-detail i { color: var(--blue-accent); font-size: .82rem; margin-top: 2px; flex-shrink: 0; } .hours-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem .8rem; margin-top: .8rem; } .hours-row { font-size: .78rem; color: var(--muted); } .hours-row .day { font-weight: 600; color: var(--navy); } .branch-badge { display: inline-block; background: var(--bg-soft); border: 1px solid var(--border); color: var(--blue-accent); font-size: .72rem; font-weight: 700; padding: .2rem .7rem; border-radius: 20px; margin-top: .8rem; } /* Nearby section */ .nearby-section { background: #fff; padding: 4rem 0; } .nearby-card { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 16px; padding: 1.4rem; display: flex; gap: 14px; align-items: flex-start; transition: all .3s; text-decoration: none; } .nearby-card:hover { box-shadow: 0 10px 30px rgba(13,31,60,.08); transform: translateY(-2px); } .nc-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--blue-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; font-size: 1.1rem; } .nearby-card h6 { font-weight: 800; font-size: .88rem; color: var(--navy); margin-bottom: .15rem; } .nearby-card p { font-size: .77rem; color: var(--muted); line-height: 1.5; margin: 0; } .nearby-card .link-arr { font-size: .75rem; font-weight: 600; color: var(--blue-accent); margin-top: .5rem; display: inline-flex; align-items: center; gap: 4px; } /* ============================================================ CONTACT PAGE ============================================================ */ .contact-info-bar { background: var(--bg-pale); padding: 3rem 0; border-bottom: 1px solid var(--border); } .cinfo-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 1.8rem; display: flex; align-items: flex-start; gap: 1.2rem; transition: all .3s; height: 100%; } .cinfo-card:hover { box-shadow: 0 10px 30px rgba(13,31,60,.08); transform: translateY(-3px); } .cinfo-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--bg-soft); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; border: 1px solid var(--border); } .cinfo-card h6 { font-weight: 700; font-size: .85rem; color: var(--navy); margin-bottom: .3rem; } .cinfo-card p, .cinfo-card a { font-size: .84rem; color: var(--muted); line-height: 1.65; text-decoration: none; margin: 0; } .cinfo-card a:hover { color: var(--blue-accent); } .contact-form-section { padding: 5rem 0; background: #fff; } .form-card { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 20px; padding: 2.5rem; } .form-card h2 { font-family: 'DM Serif Display', serif; font-size: 1.9rem; font-weight: 400; color: var(--navy); margin-bottom: .5rem; } .form-card h2 span { color: var(--blue-accent); font-style: italic; } .form-card .sub { font-size: .9rem; color: var(--muted); margin-bottom: 2rem; line-height: 1.65; } .form-card .form-label { font-size: .82rem; font-weight: 600; color: var(--navy); margin-bottom: .35rem; } .form-card .form-control, .form-card select, .form-card textarea { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: .75rem 1rem; font-size: .87rem; font-family: 'Outfit', sans-serif; color: var(--text); width: 100%; transition: border-color .2s, box-shadow .2s; } .form-card .form-control:focus, .form-card select:focus, .form-card textarea:focus { border-color: var(--blue-accent); box-shadow: 0 0 0 3px rgba(11,87,208,.1); outline: none; } .form-card .form-control::placeholder, .form-card textarea::placeholder { color: #b0bec5; } .form-card textarea { resize: vertical; min-height: 130px; } .submit-btn { background: var(--blue-accent); color: #fff; border: none; border-radius: 8px; padding: .85rem 2rem; font-weight: 700; font-size: .9rem; font-family: 'Outfit', sans-serif; cursor: pointer; transition: background .2s, transform .2s; display: inline-flex; align-items: center; gap: 8px; } .submit-btn:hover { background: var(--blue-mid); transform: translateY(-2px); } .form-note { font-size: .78rem; color: var(--muted); margin-top: 1rem; display: flex; align-items: center; gap: 6px; } .toast-wrap { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(80px); z-index: 2000; transition: transform .4s ease; pointer-events: none; } .toast-wrap.show { transform: translateX(-50%) translateY(0); } .toast-inner { background: var(--navy); color: #fff; border-radius: 12px; padding: 1rem 1.5rem; display: flex; align-items: center; gap: 10px; font-size: .88rem; font-weight: 500; box-shadow: 0 12px 36px rgba(0,0,0,.25); } .toast-inner i { color: #4caf50; font-size: 1.1rem; } /* ============================================================ SERVICES CATEGORIES PAGE (Accordion) ============================================================ */ .services-main { padding: 4rem 0 0; margin-top: -2rem; position: relative; z-index: 10; background: linear-gradient(180deg, #eef1fb 0%, #fff 33%); } .quick-nav { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; } .quick-nav-btn { display: inline-flex; align-items: center; gap: 8px; padding: .7rem 1.4rem; background: #fff; border: 2px solid var(--border); border-radius: 50px; font-size: .85rem; font-weight: 600; color: var(--navy); text-decoration: none; transition: all .3s; cursor: pointer; } .quick-nav-btn i { font-size: 1rem; color: var(--blue-accent); } .quick-nav-btn:hover, .quick-nav-btn.active { background: var(--blue-accent); border-color: var(--blue-accent); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(11,87,208,.25); } .quick-nav-btn:hover i, .quick-nav-btn.active i { color: #fff; } .category-accordion { max-width: 1100px; margin: 0 auto; } .cat-acc-item { background: #fff; border-radius: 20px; margin-bottom: 1.25rem; overflow: hidden; box-shadow: 0 4px 20px rgba(13,31,60,.06); border: 1px solid rgba(208,229,240,.6); transition: all .4s; } .cat-acc-item:hover { box-shadow: 0 8px 32px rgba(13,31,60,.1); } .cat-acc-item.expanded { box-shadow: 0 12px 48px rgba(13,31,60,.12); } .cat-acc-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 2rem; cursor: pointer; position: relative; transition: all .3s; } .cat-acc-header:hover { background: var(--bg-soft); } .cat-acc-left { display: flex; align-items: center; gap: 1.2rem; } .cat-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; } .cat-icon.jabs { background: linear-gradient(135deg,#e3f0ff 0%,#c8e4f5 100%); color: var(--blue-accent); } .cat-icon.tests { background: linear-gradient(135deg,#ffe4e4 0%,#ffcaca 100%); color: #d94444; } .cat-icon.clinics { background: linear-gradient(135deg,#e8f5e3 0%,#c8eac0 100%); color: #38a832; } .cat-icon.health { background: linear-gradient(135deg,#fff3e0 0%,#ffe0b8 100%); color: #e68a00; } .cat-icon.nhs { background: linear-gradient(135deg,#e8e3ff 0%,#d0c8ff 100%); color: #6b4eff; } .cat-info h3 { font-family: 'DM Serif Display', serif; font-size: 1.4rem; font-weight: 400; color: var(--navy); margin: 0 0 .3rem; } .cat-info p { font-size: .85rem; color: var(--muted); margin: 0; } .cat-count { background: var(--bg-soft); padding: .3rem .8rem; border-radius: 20px; font-size: .75rem; font-weight: 700; color: var(--blue-mid); margin-left: 1rem; } .cat-acc-toggle { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-soft); display: flex; align-items: center; justify-content: center; transition: all .3s; } .cat-acc-toggle i { font-size: 1.2rem; color: var(--blue-accent); transition: transform .4s; } .cat-acc-item.expanded .cat-acc-toggle { background: var(--blue-accent); } .cat-acc-item.expanded .cat-acc-toggle i { color: #fff; transform: rotate(180deg); } .cat-acc-body { max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.4,0,.2,1), padding .3s; } .cat-acc-item.expanded .cat-acc-body { max-height: 2000px; } .cat-acc-content { padding: 2rem 2rem; border-top: 1px solid var(--border); } .svc-row { display: grid; gap: 1rem; padding-top: 1.5rem; } .svc-row-3 { grid-template-columns: repeat(3,1fr); } .svc-row-4 { grid-template-columns: repeat(4,1fr); } .svc-row-2 { grid-template-columns: repeat(2,1fr); } .featured-banner { background: var(--gradient-2); border-radius: 20px; padding: 2.5rem; margin-top: 3rem; display: flex; align-items: center; gap: 2.5rem; flex-wrap: wrap; position: relative; overflow: hidden; } .featured-banner::before { content: ''; position: absolute; top: -50%; right: -10%; width: 50%; height: 200%; background: radial-gradient(ellipse,rgba(255,255,255,.1) 0%,transparent 60%); pointer-events: none; } .featured-icon { width: 90px; height: 90px; background: rgba(255,255,255,.15); border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; flex-shrink: 0; } .featured-content { flex: 1; min-width: 250px; } .featured-content h3 { font-family: 'DM Serif Display', serif; font-size: 1.6rem; color: #fff; margin-bottom: .5rem; } .featured-content p { color: rgba(255,255,255,.8); font-size: .9rem; line-height: 1.7; margin: 0; } .featured-btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--navy); padding: .85rem 1.8rem; border-radius: 10px; font-weight: 700; font-size: .9rem; text-decoration: none; transition: all .3s; flex-shrink: 0; } .featured-btn:hover { background: var(--navy); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.3); } /* ============================================================ SERVICE HERO (Individual Service Page) ============================================================ */ .svc-hero { background: linear-gradient(135deg,#eef6fb 0%,#d8eef8 60%,#c8e4f5 100%); padding: 3.5rem 0; position: relative; overflow: hidden; } .svc-hero::before { content: ''; position: absolute; right: -60px; top: -60px; width: 380px; height: 380px; border-radius: 50%; background: rgba(74,158,190,.08); } .hero-tag { font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--blue-mid); margin-bottom: .8rem; display: flex; align-items: center; gap: 6px; } .svc-hero h1 { font-family: 'DM Serif Display', serif; font-size: clamp(2rem,5vw,3rem); font-weight: 400; color: var(--navy); line-height: 1.15; margin-bottom: 1rem; } .svc-hero h1 span { color: var(--blue-accent); font-style: italic; } .svc-hero .hero-desc { font-size: 1rem; color: var(--muted); line-height: 1.75; max-width: 480px; margin-bottom: 1.8rem; } .free-badge { display: inline-flex; align-items: center; gap: 8px; background: #e9f9f0; border: 1px solid #b2e5cc; color: #1e7e4e; border-radius: 8px; padding: .5rem 1rem; font-size: .82rem; font-weight: 600; margin-bottom: 1.5rem; } .info-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 2rem; height: 100%; } .info-card h3 { font-family: 'DM Serif Display', serif; font-size: 1.45rem; font-weight: 600; color: var(--navy); margin-bottom: 1rem; } .info-card p { font-size: .95rem; color: var(--muted); line-height: 1.75; } .info-card ul { padding-left: 0; list-style: none; margin: 0; } .info-card ul li { font-size: .88rem; color: var(--muted); line-height: 1.7; padding: .3rem 0; padding-left: 1.4rem; position: relative; } .info-card ul li::before { content: '•'; position: absolute; left: 0; color: var(--blue-accent); font-weight: 700; } .schedule-section { background: var(--bg-pale); padding: 4rem 0; } .schedule-card {font-size: .95rem; background: #fff;padding: 2rem; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; } .schedule-card h3 { font-family: 'DM Serif Display', serif; font-size: 1.45rem; font-weight: 600; color: var(--navy); margin: 0; margin-bottom:10px;} .schedule-card p { font-size: .95rem; color: var(--muted); line-height: 1.75; } .sch-row { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; padding: 1.2rem 2rem; border-bottom: 1px solid var(--border); align-items: start; } .sch-row:last-child { border-bottom: none; } .sch-row:nth-child(even) { background: var(--bg-soft); } .sch-label { font-weight: 700; font-size: .82rem; color: var(--navy); } .sch-val { font-size: .85rem; color: var(--muted); line-height: 1.6; } .booking-card { background: linear-gradient(135deg, var(--navy) 0%, #1a3a6a 100%); border-radius: 20px; padding: 2rem; position: sticky; top: 88px; } .booking-card h4 { font-family: 'DM Serif Display', serif; font-size: 1.3rem; font-weight: 400; color: #fff; margin-bottom: .5rem; } .booking-card p { font-size: .84rem; color: rgba(255,255,255,.65); line-height: 1.65; margin-bottom: 1.5rem; } .booking-card .form-control, .booking-card select { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; border-radius: 8px; padding: .7rem 1rem; font-size: .85rem; font-family: 'Outfit', sans-serif; margin-bottom: .75rem; width: 100%; } .booking-card .form-control::placeholder { color: rgba(255,255,255,.4); } .booking-card .form-control:focus, .booking-card select:focus { background: rgba(255,255,255,.15); border-color: var(--blue-accent); box-shadow: 0 0 0 3px rgba(74,158,190,.2); color: #fff; outline: none; } .booking-card select option { color: #000; background: #fff; } .booking-card input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.4); cursor: pointer; } .booking-card .form-label { color: rgba(255,255,255,.6); font-size: .78rem; font-weight: 500; display: block; margin-bottom: .3rem; } .booking-card .divider { border-top: 1px solid rgba(255,255,255,.1); margin: 1.2rem 0; } .booking-card .contact-link { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.7); font-size: .82rem; text-decoration: none; margin-top: .5rem; transition: color .2s; } .booking-card .contact-link:hover { color: var(--blue-light); } .booking-card .contact-link i { color: var(--blue-light); font-size: 1rem; flex-shrink: 0; } .related-section { background: #fff; padding: 4rem 0; } .related-card { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; transition: all .3s; text-decoration: none; display: block; } .related-card:hover { box-shadow: 0 10px 30px rgba(13,31,60,.1); transform: translateY(-3px); background: #fff; } .related-card .icon { font-size: 1.8rem; margin-bottom: .7rem; } .related-card h6 { font-weight: 700; font-size: .9rem; color: var(--navy); margin-bottom: .3rem; } .related-card p { font-size: .8rem; color: var(--muted); line-height: 1.55; margin: 0; } .related-card .arr { color: var(--blue-accent); font-size: .78rem; font-weight: 600; margin-top: .7rem; display: block; } /* ============================================================ PRESCRIPTIONS / ORDER METHODS PAGE ============================================================ */ .order-methods-section { background: linear-gradient(180deg, var(--bg-soft) 0%, #fff 100%); padding: 5rem 0 4rem; } .methods-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; justify-content:center; max-width:1100px; margin:0 auto;} .method-card { background: #fff; border: 1.5px solid var(--border); border-radius: 20px; padding: 2rem 1.5rem; text-align: center; transition: all .3s ease; position: relative; overflow: hidden; } .method-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--blue-accent), var(--blue-light)); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; } .method-card:hover { box-shadow: 0 16px 48px rgba(13,31,60,.12); transform: translateY(-6px); border-color: var(--blue-light); } .method-card:hover::before { transform: scaleX(1); } .method-icon { width: 72px; height: 72px; margin: 0 auto 1.25rem; background: linear-gradient(135deg, var(--bg-soft) 0%, var(--bg-pale) 100%); border-radius: 20px; display: flex; align-items: center; justify-content: center; transition: all .3s ease; } .method-card:hover .method-icon { background: linear-gradient(135deg, var(--blue-accent) 0%, var(--blue-mid) 100%); } .method-icon i { font-size: 1.8rem; color: var(--blue-accent); transition: color .3s ease; } .method-card:hover .method-icon i { color: #fff; } .method-card h4 { font-weight: 700; font-size: 1.05rem; color: var(--navy); margin-bottom: .75rem; } .method-card p { font-size: .85rem; color: var(--muted); line-height: 1.7; margin-bottom: 1.25rem; } .method-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .65rem 1.25rem; background: linear-gradient(135deg, var(--blue-accent) 0%, var(--blue-mid) 100%); color: #fff; font-size: .82rem; font-weight: 600; border-radius: 10px; text-decoration: none; transition: all .2s ease; } .method-btn:hover { background: linear-gradient(135deg, var(--blue-mid) 0%, var(--navy) 100%); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(11,87,208,.3); } .benefits-section { background: linear-gradient(180deg, var(--bg-pale) 0%, var(--bg-soft) 100%); padding: 5rem 0; } .benefits-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; margin-top: 3rem; } .benefit-card { background: #fff; border-radius: 16px; padding: 1.75rem; border: 1px solid var(--border); transition: all .3s ease; } .benefit-card:hover { box-shadow: 0 12px 40px rgba(13,31,60,.1); transform: translateY(-4px); } .benefit-icon { width: 52px; height: 52px; background: linear-gradient(135deg, var(--bg-soft) 0%, var(--bg-pale) 100%); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; } .benefit-icon i { font-size: 1.4rem; color: var(--blue-accent); } .benefit-card h4 { font-weight: 700; font-size: 1.05rem; color: var(--navy); margin-bottom: .65rem; } .benefit-card p { font-size: .85rem; color: var(--muted); line-height: 1.7; } .faq-container { max-width: 800px; margin: 0 auto; } .faq-item { background: #fff; border: 1.5px solid var(--border); border-radius: 16px; margin-bottom: 1rem; overflow: hidden; transition: all .3s ease; } .faq-item:hover { box-shadow: 0 8px 32px rgba(13,31,60,.08); border-color: var(--blue-light); } .faq-header { background: linear-gradient(135deg,#fff 0%,var(--bg-soft) 100%); border: none; padding: 1.25rem 1.5rem; width: 100%; text-align: left; font-weight: 600; font-size: 1.05rem; color: var(--navy); display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; transition: all .3s ease; } .faq-header:hover { background: linear-gradient(135deg, var(--bg-soft) 0%, var(--bg-pale) 100%); color: var(--blue-accent); } .faq-header .faq-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--bg-soft); display: flex; align-items: center; justify-content: center; transition: all .3s ease; flex-shrink: 0; } .faq-item.active .faq-header .faq-icon { background: var(--blue-accent); } .faq-header .faq-icon i { color: var(--blue-accent); font-size: .9rem; transition: all .3s ease; } .faq-item.active .faq-header .faq-icon i { color: #fff; transform: rotate(180deg); } .faq-body { padding: 0 1.5rem; max-height: 0; overflow: hidden; transition: max-height .4s ease, padding .4s ease; } .faq-item.active .faq-body { max-height: 400px; padding: 0 1.5rem 1.5rem; } .faq-body p { font-size: .88rem; color: var(--muted); line-height: 1.8; } /* ============================================================ SEARCH BAR ============================================================ */ .search-section { background: #fff; padding: 5px 0; border-bottom: 1px solid var(--border); position: sticky; top: 65px; z-index: 100; box-shadow: 0 4px 20px rgba(0,0,0,.04); } .search-container { max-width: 600px; margin: 0 auto; position: relative; } .search-input-wrapper { position: relative; display: flex; align-items: center; } .search-input-wrapper i { position: absolute; left: 1.3rem; color: var(--muted); font-size: 1.1rem; pointer-events: none; } .search-input { width: 100%; background: var(--bg-pale); border: 2px solid transparent; border-radius: 50px; padding: 1rem 1.3rem 1rem 3.2rem; font-size: .95rem; font-family: 'Outfit', sans-serif; color: var(--text); transition: all .3s; } .search-input:focus { outline: none; border-color: var(--blue-accent); background: #fff; box-shadow: 0 0 0 4px rgba(11,87,208,.1); } .search-input::placeholder { color: #a0b4c8; } .search-bar { max-width: 420px; margin: 0 auto 2.5rem; position: relative; } .search-bar input { width: 100%; background: #fff; border: 1.5px solid var(--border); border-radius: 50px; padding: .75rem 1.2rem .75rem 2.8rem; font-size: .87rem; font-family: 'Outfit', sans-serif; color: var(--text); transition: border-color .2s, box-shadow .2s; } .search-bar input:focus { outline: none; border-color: var(--blue-accent); box-shadow: 0 0 0 3px rgba(11,87,208,.1); } .search-bar input::placeholder { color: #b0bec5; } .search-bar i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .9rem; pointer-events: none; } /* ============================================================ FOOTER ============================================================ */ footer { position: relative; background: #060f1a; color: #c9d6e3; overflow: hidden; } /* Gradient mesh orbs */ .footer-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .footer-bg .orb { position: absolute; border-radius: 50%; filter: blur(100px); opacity: .08; } .footer-bg .orb-1 { width: 500px; height: 500px; background: #00d2ff; top: -100px; left: 50%; transform: translateX(-50%); animation: orbPulse 8s ease-in-out infinite alternate; } .footer-bg .orb-2 { width: 400px; height: 400px; background: #7b2ff7; bottom: -80px; left: 10%; animation: orbPulse 10s ease-in-out infinite alternate-reverse; } .footer-bg .orb-3 { width: 350px; height: 350px; background: #00d2ff; bottom: -60px; right: 5%; animation: orbPulse 12s ease-in-out infinite alternate; } @keyframes orbPulse { 0% { transform: scale(1); opacity: .06; } 100% { transform: scale(1.3); opacity: .12; } } .sparkle-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* Footer content */ .footer-content { position: relative; z-index: 1; margin: 0 auto; padding: 64px 24px 0; text-align: center; } .footer-brand { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 36px; } .footer-logo { max-height: 42px; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #fff; position: relative; } .footer-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.1) 30%, rgba(255,255,255,.1) 70%, transparent); margin: 8px 0 36px; } .footer-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 20px; } .footer-nav a { color: rgba(255,255,255,.5); text-decoration: none; font-size: .88rem; font-weight: 500; padding: 8px 18px; border-radius: 100px; border: 1px solid transparent; transition: all .3s ease; position: relative; } .footer-nav a:hover { color: #fff; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.2); } .footer-contact { display: flex; justify-content: center; align-items: center; gap: 0; margin-bottom: 20px; } .footer-contact .mee { margin-left: 10px; margin-right: 10px; } .contact-item { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; color: rgba(255,255,255,.55); text-decoration: none; font-size: 1rem; padding: 10px 22px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); transition: all .3s ease; } .contact-item i { font-size: 24px; color: rgba(255,255,255,.55); transition: transform .3s; } .contact-item h5 { font-size: 16px; margin: 0; color: rgba(255,255,255,.95); } .contact-item:hover { color: #fff; background: rgba(255,255,255,.07); border-color: rgba(0,210,255,.2); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.15); } .contact-item:hover i { transform: scale(1.2); } /* Newsletter */ .footer-newsletter { max-width: 440px; margin: 0 auto 30px; } .footer-newsletter p { font-size: .85rem; color: rgba(255,255,255,.35); margin-bottom: 14px;display: flex; } .nl-wrap { display: flex; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); transition: border-color .3s, box-shadow .3s; } .nl-wrap p{ display: flex;margin-bottom:0px} .nl-wrap:focus-within { border-color: rgba(0,210,255,.35); box-shadow: 0 0 0 3px rgba(0,210,255,.08); } .nl-wrap #nlEmail { flex: 1; border: none; outline: none; padding: 14px 18px; font-size: .88rem; background: transparent; color: #fff; font-family: inherit; min-width: 0; max-width: 336px;} .nl-wrap #nlEmail::placeholder { color: rgba(255,255,255,.25); } .nl-wrap #nlBtn { border: none; padding: 14px 22px; background: var(--blue-accent); color: #fff; cursor: pointer; transition: opacity .3s, transform .3s; display: flex; align-items: center; gap: 6px; font-family: inherit; font-weight: 600; font-size: .85rem; } .nl-wrap #nlBtn:hover { opacity: .88; } .nl-note { font-size: .72rem; color: rgba(255,255,255,.25); margin-top: 10px; transition: color .3s; } .footer-divider-2 { height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.08) 30%, rgba(255,255,255,.08) 70%, transparent); margin-bottom: 32px; } /* Social icons */ .footer-social { display: flex; justify-content: center; gap: 12px; margin-bottom: 36px; } .footer-social a { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); color: rgba(255,255,255,.45); font-size: 1.15rem; text-decoration: none; transition: all .35s cubic-bezier(.4,0,.2,1); } .footer-social a:hover { color: #fff; border-color: transparent; transform: translateY(-4px) scale(1.05); } .footer-social a:nth-child(1):hover { background: linear-gradient(135deg,#1877f2,#0d5bbf); box-shadow: 0 8px 24px rgba(24,119,242,.3); } .footer-social a:nth-child(2):hover { background: linear-gradient(135deg,#f77737,#e1306c,#c13584); box-shadow: 0 8px 24px rgba(225,48,108,.3); } .footer-social a:nth-child(3):hover { background: linear-gradient(135deg,#333,#111); box-shadow: 0 8px 24px rgba(0,0,0,.4); } .footer-social a:nth-child(4):hover { background: linear-gradient(135deg,#0a66c2,#004182); box-shadow: 0 8px 24px rgba(10,102,194,.3); } /* Footer bottom bar */ .footer-bottom { position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,.05); padding: 20px 24px; } .footer-bottom-inner { margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; } .footer-bottom p { font-size: .75rem; color: rgba(255,255,255,.52); } .footer-bottom-links { display: flex; gap: 18px; } .footer-bottom-links a { font-size: .75rem; color: rgba(255,255,255,.55); text-decoration: none; transition: color .25s; } .footer-bottom-links a:hover { color: var(--blue-accent); } /* Footer ticker */ .footer-ticker { background: rgba(255,255,255,.04); border-top: 1px solid rgba(255,255,255,.07); overflow: hidden; padding: .75rem 0; white-space: nowrap; } .ticker-inner { display: inline-flex; gap: 4rem; animation: ticker 30s linear infinite; } .ticker-inner span { font-size: .8rem; color: rgba(255,255,255,.4); flex-shrink: 0; } .ticker-inner span i { color: #f0c040; margin-right: 4px; } @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ============================================================ FLOATING WHATSAPP CHAT BUTTON ============================================================ */ .chat-btn { position: fixed; bottom: 2rem; right: 2rem; width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; box-shadow: 0 8px 28px rgba(13,31,60,.3); cursor: pointer; z-index: 999; transition: transform .2s; text-decoration: none; } .chat-btn:hover { transform: scale(1.1); color: #fff; } /* ============================================================ RESPONSIVE BREAKPOINTS ============================================================ */ .cat-icon.vaccinations-jabs { background: linear-gradient(135deg,#e3f0ff 0%,#c8e4f5 100%); color: var(--blue-accent); } .cat-icon.health-testing { background: linear-gradient(135deg,#ffe4e4 0%,#ffcaca 100%); color:#d94444; } .cat-icon.specialist-clinics { background: linear-gradient(135deg,#e8f5e3 0%,#c8eac0 100%); color:#38a832; } .cat-icon.your-health-wellbeing { background: linear-gradient(135deg,#fff3e0 0%,#ffe0b8 100%); color:#e68a00; } .cat-icon.nhs-services { background: linear-gradient(135deg,#e8e3ff 0%,#d0c8ff 100%); color:#6b4eff; } /* ≤1100px */ @media(max-width:1100px) { .methods-grid { grid-template-columns: repeat(2,1fr); } } /* ≤991px */ @media(max-width:991px) { .hero-slide { min-height: auto; padding: 4rem 0 5rem; } .hero-img-side { display: none; } .hero-img-wrap { margin-top: 2.5rem; } .hero-img-wrap img { height: 320px; } .hero-img-badge { display: none; } .hiw-steps { grid-template-columns: repeat(2,1fr); } .hiw-steps::before { display: none; } .svc-card { flex: 0 0 calc(50% - .75rem); } .pop-grid { grid-template-columns: repeat(2,1fr); } .team-grid { grid-template-columns: repeat(2,1fr); } .info-grid { grid-template-columns: repeat(2,1fr); } .svc-grid { grid-template-columns: repeat(2,1fr); } .accordion-grid { grid-template-columns: 1fr; } .accordion-header { flex-wrap: wrap; } .accordion-status { order: 3; width: 100%; justify-content: flex-start; margin-top: .5rem; } .booking-card { position: static; margin-top: 2rem; } .hero-card { margin-top: 2.5rem; } .svc-row-3, .svc-row-4 { grid-template-columns: repeat(2,1fr); } .steps-container { grid-template-columns: repeat(2,1fr); } .benefits-grid { grid-template-columns: repeat(2,1fr); } } .info-card h4 { font-family: 'DM Serif Display', serif; font-size: 1.25rem; font-weight: 400; color: var(--navy); margin-bottom: 0.55rem;margin-top: 1rem; } .schedule-card h4 { font-family: 'DM Serif Display', serif; font-size: 1.25rem; font-weight: 400; color: var(--navy); margin-bottom: 1rem; } /* Wrapper */ .inform-wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 1.0rem auto 0; max-width: 1100px; } .inform-content h4 { font-size: 15px; font-weight: 600; color: var(--blue-accent); margin: 0; line-height: 1.3; } .inform-content p{margin:0px!important;font-size: .90rem; color: var(--muted); line-height: 1.75;} /* Card */ .inform-card { display: flex; align-items: center; gap: 8px; background: #EEF1FB; border: 1.5px solid #7794F6; border-radius: 8px; padding: 12px 16px; flex: 1 1 23%; max-width: 260px; text-align:center; }.inform-content{width:100%} .inform-icon{display:none} .inform-card i{font-size:28px; color:#04cc57} /* Tablet */ @media (max-width: 768px) { .inform-card { flex: 1 1 48%; max-width: 48%; } .inform-icon{display:none} .inform-card i{font-size:28px; color:#04cc57} } /* Mobile (👉 50% each = 2 per row) */ @media (max-width: 480px) { .inform-card { flex: 1 1 48%; max-width: 48%; } .inform-content h4 { font-size: 13px; } .inform-content p { font-size: 11px; } } /* ≤900px */ @media(max-width:900px) { .steps-container { grid-template-columns: repeat(2,1fr); } .benefits-grid { grid-template-columns: repeat(2,1fr); }.form-card{margin-bottom:15px;} } .logininner_main{padding:40px 0!important} /* ≤768px */ @media(max-width:768px) { .logininner_main{padding:30px 0!important} .accordion-grid { grid-template-columns: 1fr; } .cat-acc-header { padding: 1.2rem; } .cat-acc-content { padding: 0 1.2rem 1.5rem; } .cat-icon { width: 46px; height: 46px; font-size: 1.2rem; } .cat-info h3 { font-size: 1.1rem; } .cat-count { display: none; } .featured-banner { padding: 1.8rem; gap: 1.5rem; } .featured-icon { width: 70px; height: 70px; font-size: 2rem; } .quick-nav { gap: .6rem; } .quick-nav-btn { padding: .55rem 1rem; font-size: .78rem; } .sch-row { grid-template-columns: 1fr; gap: .3rem; } .map-frame { height: 350px; } .form-card { padding: 1.5rem; } .contact-form-section { padding: 3rem 0; } .hours-grid { grid-template-columns: 1fr; } .map-wrap { height: 260px; } .testi-card { flex: 0 0 85vw; } .intro-img img { height: 280px; } .hero-card img, .about-img img { height: 220px; } .team-grid { grid-template-columns: 1fr 1fr; } } /* ≤767px */ @media(max-width:767px) { .navbar { padding: 0 0 .57rem 0; } .navbar-brand img, .footer-logo img { max-height: 28px; } .hero-badge-float { display: none; } .slider-arrow { display: none; } .nhs-card .col-lg-6:last-child img { border-radius: 0 0 24px 24px !important; height: 220px !important; } } /* ≤600px */ @media(max-width:600px) { .footer-content { padding: 48px 16px 0; } .footer-nav a { font-size: .82rem; padding: 7px 14px; } .contact-item { font-size: .82rem; padding: 9px 16px; } .footer-bottom-inner { flex-direction: column; text-align: center; } } /* ≤580px */ @media(max-width:580px) { .hero-stats { flex-wrap: unset; } .hero-stat-num { font-size: 1.2rem; } .cat-acc-toggle { width: 40px; height: 32px; } .svc-row-3, .svc-row-4, .svc-row-2 { grid-template-columns: 1fr; } .methods-grid { grid-template-columns: 1fr; } .steps-container { grid-template-columns: 1fr; } .benefits-grid { grid-template-columns: 1fr; } .pop-grid { grid-template-columns: 1fr 1fr; display: block;} .pop-item{margin:6px 0} } /* ≤576px */ @media(max-width:576px) { .appt-form-card { padding: 1.5rem; } .welcome-section { padding: 1.5rem 0; text-align: center; } .mb-5 { margin-bottom: 0 !important; } .g-5, .gy-5 { --bs-gutter-y: 1.5rem; } .btn-dark-pill { padding: .60rem .8rem; font-weight: 600; } .btn-outline-pill { padding: .60rem .8rem; font-weight: 600; } .welcome-num { font-size: 1.50rem; } .slide-tag { margin-bottom: .25rem; } .hero-slide h1 { margin-bottom: .25rem; } .hero-slide p { margin-bottom: .75rem; } .slide-content { text-align: center; } .slide-content .flex-wrap { justify-content: center; } .svc-card-btns { padding: 0.85rem 5px; gap: .25rem; justify-content: center; } .testi-name, .testi-loc { text-align: left; } .pop-item, .testimonials-section, .about-section, .nhs-section { text-align: center; } .testi-author { justify-content: center; } .services-section { text-align: center; } .services-section .d-flex div { width: 100%; } .services-section, .popular-section, .testimonials-section, .nhs-section, .about-section, .appt-section, .faq-section { padding: 1.5rem 0; } .info-section { padding: 1.2rem 0; } .info-card { padding: .75rem; display: block; } .info-icon { margin-bottom: 6px; } .branch-hero { padding: 30px 0 24px; } .btn-hero-fill { padding: .08rem .8rem; gap: 0; } .btn-cta-ghost { padding: .8rem 10px; font-weight: 600; font-size: .85rem; } .btn-cta-fill { padding: .8rem 10px; } .about-section, .dext, .svc-card { text-align: center; } .g-5, .gx-5 { --bs-gutter-x: 0; } .g-5, .gy-5 { --bs-gutter-y: 0; } .hiw-steps { grid-template-columns: 1fr; } } /* ≤480px */ @media(max-width:480px) { .pop-grid { grid-template-columns: 1fr 1fr; } .team-grid { grid-template-columns: 1fr 1fr; } .svc-grid { grid-template-columns: 1fr 1fr; } .info-grid { grid-template-columns: 1fr 1fr; } .team-grid { grid-template-columns: 1fr; } } @media(max-width:640px) { .nl-wrap #nlEmail { max-width: 234px; } .about-hero{padding:24px 15px;text-align:center!important} .hero-img-wrap, .hero-card {margin-top: 0rem;}.hero-tag{display:none}p{margin-bottom:10px} .about-hero .hero-lead, .svc-hero .hero-desc, .svc-hero .hero-desc p{margin-bottom:10px} .intro-section,.svc-hero, .values-section, .hiw-section, .timeline-section, .page-hero,.cta-section, .order-methods-section, .featured-branches, .benefits-section {padding: 24px 0;text-align:center;}.services-main{padding: 24px 0;} .tl-item { padding: 0 0 2.5rem 0rem;}.timeline{text-align:left} .intro-section h3{font-size:1.35rem;margin-bottom:5px} .intro-block {margin-bottom: 0.05rem;} .schedule-card {padding: 0.75rem;} .btn-cta-primary, .btn-outline-white, .btn-white-pill, .btn-cta-outline {padding: 5px 10px;} .value-icon, .benefit-icon, .featured-icon, .featured-btn { margin: 0 auto;margin-bottom:10px;}.featured-banner, .benefit-card{text-align:center} h1, h2{font-size: clamp(1.7rem, 3.5vw, 2.6rem)!important;} .info-card h3, .schedule-card h3 {font-size: 1.25rem;}} .book--btn { display: none; } /* Mobile view */ @media (max-width: 768px) { .book--btn { position: fixed; bottom: -80px; /* hidden initially */ left: 50%; transform: translateX(-50%); width: 90%; text-align: center; background: #0d6efd; color: #fff !important; padding: 12px; border-radius: 50px; z-index: 9999; transition: all 0.4s ease; display: block; } /* Show on scroll */ .book--btn.show--btn { bottom: 15px; } } .footer-branches { } /* Grid spacing fix */ .footer-branches .row { row-gap: 20px; } /* =============================== FULL CLICKABLE LINK ================================ */ .footer-branches .branch-card-link { display: block; height: 100%; text-decoration: none; color: inherit; } /* =============================== CARD DESIGN ================================ */ .footer-branches .branch-card { background: rgba(255, 255, 255, 0.04); border-radius: 14px; padding: 22px; height: 100%; transition: all 0.3s ease; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.06); backdrop-filter: blur(6px); } /* Hover effect */ .footer-branches .branch-card-link:hover .branch-card { transform: translateY(-6px); background: rgba(255, 255, 255, 0.07); border-color: rgba(59,130,246,0.4); } /* =============================== TITLE ================================ */ .footer-branches .branch-card h5 { font-size: 18px; font-weight: 600; color: #ffffff; margin-bottom: 15px; position: relative; } /* Optional underline */ .footer-branches .branch-card h5::after { content: ''; width: 30px; height: 2px; background: #3b82f6; display: block; margin-top: 6px; } /* =============================== TEXT / DETAILS ================================ */ .footer-branches .branch-card p { font-size: 14px; color: #cbd5e1; margin-bottom: 8px; display: flex; align-items: flex-start; line-height: 1.5; } /* Icons */ .footer-branches .branch-card p i { color: #3b82f6; margin-right: 8px; font-size: 16px; margin-top: 2px; } /* Prevent nested clicks */ .footer-branches .branch-card p, .footer-branches .branch-card span { pointer-events: none; } /* =============================== OPENING HOURS ================================ */ .footer-branches .branch-time { margin-top: 12px;text-align:left; } .footer-branches .branch-time i{color: #3b82f6;} .footer-branches .branch-time span { display: inline-block; font-size: 12px; color: #ffffff; background: rgba(255,255,255,0.08); padding: 6px 10px; border-radius: 20px; margin: 4px 6px 0 0; white-space: nowrap; } /* Closed state (if needed later) */ .footer-branches .branch-time span.closed { background: rgba(239,68,68,0.2); color: #fca5a5; } /* =============================== HOVER ICON (OPTIONAL) ================================ */ .footer-branches .branch-card::after { content: "\f285"; /* Bootstrap arrow icon */ font-family: "bootstrap-icons"; position: absolute; right: 15px; bottom: 15px; font-size: 18px; color: rgba(255,255,255,0.3); transition: 0.3s; } .footer-branches .branch-card-link:hover .branch-card::after { color: #3b82f6; transform: translateX(3px); } /* =============================== RESPONSIVE ================================ */ @media (max-width: 767px) { .footer-branches .branch-card { padding: 18px; } .footer-branches .branch-card h5 { font-size: 16px; } .footer-branches .branch-card p { font-size: 13px; } .footer-branches .branch-time span { font-size: 11px; padding: 5px 8px; } } /* Scroll Button */ #scrollTopBtn { position: fixed; bottom: 25px; right: 25px; width: 55px; height: 55px; background: linear-gradient(135deg, #0ea5e9, #22c55e); /* medical theme */ border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; z-index: 9999; transition: all 0.3s ease; box-shadow: 0 8px 25px rgba(0,0,0,0.25); } /* Show */ #scrollTopBtn.show { opacity: 1; visibility: visible; } /* SVG */ #scrollTopBtn svg { width: 26px; height: 26px; } /* Hover */ #scrollTopBtn:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 12px 30px rgba(0,0,0,0.35); } /* Pulse ring (medical feel) */ #scrollTopBtn::before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; background: rgba(34,197,94,0.4); animation: medicalPulse 2s infinite; z-index: -1; } @keyframes medicalPulse { 0% { transform: scale(1); opacity: 0.6; } 70% { transform: scale(1.7); opacity: 0; } 100% { opacity: 0; } } /* Mobile */ @media (max-width: 767px) { #scrollTopBtn { width: 48px; height: 48px; bottom: 10px; right: 10px; } }