:root {
--brand-teal: #67c5b7;
--brand-green: #13c9a7;
--brand-dark: #135d6e;
--text-dark: #2c3e50;
--text-light: #ffffff;
--bg-light: #f4f9f8;
--font-main: 'Poppins', Arial, Helvetica, sans-serif;
--gradient-primary: linear-gradient(135deg, #135d6e 0%, #13c9a7 100%);
--shadow-sm: 0 4px 15px rgba(19, 93, 110, 0.08);
--shadow-md: 0 10px 30px rgba(19, 93, 110, 0.12);
--shadow-lg: 0 20px 40px rgba(19, 93, 110, 0.15);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; min-height: 100%; background: #ffffff; color: var(--text-dark); font-family: var(--font-main); overflow-x: hidden; scroll-behavior: smooth; }
.visually-hidden { display: none !important; }
.section-padding { padding: 60px 5%; }
.text-muted { color: #6c7a89; line-height: 1.8; font-size: 16px; }
.section-header { text-align: center; max-width: 800px; margin: 0 auto 50px; }
.section-subtitle { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; background: rgba(19, 201, 167, 0.1); border-radius: 50px; color: var(--brand-dark); font-weight: 600; font-size: 14px; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; }
.section-title { font-size: clamp(32px, 4vw, 42px); color: var(--text-dark); font-weight: 700; margin-bottom: 20px; line-height: 1.2; }
.section-title span { color: var(--brand-green); }
.glass-effect {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: var(--shadow-md);
}
/* ==========================================================================
2. MOTION & SCROLL ANIMATIONS
========================================================================== */
.fade-up { opacity: 0; transform: translateY(40px) scale(0.98); transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); will-change: transform, opacity; }
.slide-left { opacity: 0; transform: translateX(50px); transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); will-change: transform, opacity; }
.slide-right { opacity: 0; transform: translateX(-50px); transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); will-change: transform, opacity; }
.reveal-active { opacity: 1 !important; transform: translate(0) scale(1) !important; }
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.bounce-effect { animation: floatBounce 4s ease-in-out infinite; }
@keyframes floatBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
/* ==========================================================================
3. FLOATING GLASS SMART NAVBAR (FIXED OVERLAP BUG)
========================================================================== */
.header-container {
position: fixed; top: 10px; left: 0; width: 100%; z-index: 9999;
display: flex; justify-content: center; pointer-events: none;
}
/* Notice: overflow is NOT hidden, so dropdowns can break out of the box */
.glass-header {
pointer-events: auto;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
border-radius: 50px; padding: 1px 5px;
display: flex; align-items: center; justify-content: space-between; gap: 10px;
width: 100%; max-width: 1200px;
transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.glass-header.collapsed {
width: auto; padding: 8px 20px; background: rgba(255, 255, 255, 0.411);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.37);
}
.brand-logo { height: 58px; transition: 0.4s ease;}
.glass-header.collapsed .brand-logo { height: 40px; transform: scale(1.05); }
.nav-links { display: flex; gap: 11px; align-items: center; pointer-events: auto; }
.nav-links a { color: var(--text-dark); text-decoration: none; font-weight: 600; font-size: 14.5px; transition: 0.3s; }
.nav-links a:hover { color: var(--brand-green); }
.btn-primary { background: var(--gradient-primary); color: #fff !important; padding: 10px 24px; border-radius: 30px; font-weight: 600; box-shadow: var(--shadow-sm); transition: 0.3s; display: inline-block; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* Drodown Fixes */
.nav-dropdown { position: relative; }
.nav-dropdown > a { display: flex; align-items: center; gap: 6px; }
.dropdown-menu {
position: absolute; top: 100%; left: 0; transform: translateY(15px);
min-width: 240px; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); border-radius: 16px;
padding: 15px; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; pointer-events: none;
transition: all .3s ease; z-index: 10000; display: flex; flex-direction: column; gap: 5px; border: 1px solid rgba(0,0,0,0.05);
}
.nav-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.dropdown-menu a { padding: 10px 15px; border-radius: 8px; font-size: 14px; white-space: normal;}
.dropdown-menu a:hover { background: rgba(19, 201, 167, 0.1); color: var(--brand-green); transform: translateX(5px); }
/* Emergency Pill inside Navbar */
.header-actions { display: flex; align-items: center; gap: 15px; }
.emergency-pill {
display: flex; align-items: center; gap: 8px;
background: rgba(231, 76, 60, 0.1); color: #e74c3c;
padding: 8px 18px; border-radius: 50px; font-weight: 700; font-size: 14px;
text-decoration: none; transition: 0.3s; animation: pulse-red-subtle 2s infinite; white-space: nowrap;
}
.emergency-pill:hover { background: #e74c3c; color: #fff; }
@keyframes pulse-red-subtle { 0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4); } 70% { box-shadow: 0 0 0 8px rgba(231, 76, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); } }
/* Mobile Overlay & Menu Toggle */
.menu-toggle { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 6px; z-index: 10001; }
.menu-toggle span { display: block; width: 28px; height: 3px; background-color: var(--brand-dark); border-radius: 2px; transition: 0.3s; }
.mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(5px); z-index: 9998; opacity: 0; transition: 0.3s; }
.mobile-overlay.active { display: block; opacity: 1; }
/* ==========================================================================
4. USER'S HERO SECTION (STRICTLY UNTOUCHED HTML/CSS)
========================================================================== */
.hero-banner {
width: 100%; height: min(calc(100vw * 0.43), calc(100vh - 132px)); min-height: 420px;
background-image: url("img/hero-home.jpeg"); background-position: center bottom;
background-repeat: no-repeat; background-size: 100% auto; position: relative; overflow: hidden; transition: background-image 0.4s ease-in-out;
}
.hero-banner {
width: 100%;
height: min(calc(100vw * 0.43), calc(100vh - 132px));
min-height: 420px;
background-position: center bottom;
background-repeat: no-repeat;
background-size: 100% auto;
position: relative;
overflow: hidden;
/* This line ensures the image fades smoothly instead of snapping abruptly */
transition: background-image 0.8s ease-in-out;
}
/* Mobile Override */
@media (max-width: 768px) {
.hero-hotspot,
.hover-card {
display: none !important;
}
.hero-banner {
height: 50vh !important;
min-height: 350px;
background-position: center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
}
.hero-hotspot { position: absolute; display: block; border: 0; background: transparent; cursor: pointer; appearance: none; isolation: isolate; text-decoration: none; padding: 0; font: inherit; z-index: 4; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.hero-hotspot::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(19, 201, 168, 0) 0%, rgba(103, 197, 183, 0) 40%, rgba(103, 197, 183, 0) 70%, transparent 100%); opacity: 0; transition: opacity 0.35s ease; }
.hero-hotspot::after { content: ""; position: absolute; inset: -3px; border: 3px solid rgba(255, 255, 255, 0); opacity: 0; transition: opacity 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; }
.hero-hotspot:hover, .hero-hotspot.active { transform: scale(1.06); z-index: 6; }
.hero-hotspot:hover::before, .hero-hotspot.active::before { opacity: 1; }
.hotspot-left { left: 31%; top: 24%; width: 19%; height: 34%; border-radius: 999px 0 0 999px; transform-origin: right center; }
.hotspot-left::before, .hotspot-left::after { border-radius: 999px 0 0 999px; }
.hotspot-right { left: 51%; top: 23%; width: 19%; height: 34%; border-radius: 0 999px 999px 0; transform-origin: left center; }
.hotspot-right::before, .hotspot-right::after { border-radius: 0 999px 999px 0; }
.hotspot-bottom { left: 43.2%; top: 44%; width: 15%; height: 38%; clip-path: polygon(50% 0, 100% 32%, 100% 72%, 85% 100%, 15% 100%, 0 72%, 0 32%); transform-origin: center top; }
.hotspot-bottom::before, .hotspot-bottom::after { clip-path: polygon(50% 0, 100% 32%, 100% 72%, 85% 100%, 15% 100%, 0 72%, 0 32%); }
.hover-card { position: absolute; color: var(--text-light); opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity 0.35s ease, transform 0.35s ease; z-index: 8; }
.hover-card h2 { font-size: clamp(16px, 1.6vw, 26px); font-weight: 700; line-height: 1.2; margin-bottom: -18px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); }
.hover-card p { color: rgba(255, 255, 255, 0.92); font-size: clamp(12px, 1.1vw, 18px); font-weight: 400; line-height: 4.3; letter-spacing: 1px; }
.callout-arrow { position: absolute; width: 120px; height: 92px; fill: none; stroke: #ffffff; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
.card-left { left: 10%; top: 49%; text-align: right; width: 280px; }
.card-right { right: 8%; bottom: 35%; text-align: left; width: 320px; }
.card-bottom { left: 13%; bottom: 8%; text-align: right; width: 380px; }
.hotspot-left:hover ~ .card-left, .hotspot-left.active ~ .card-left, .hotspot-right:hover ~ .card-right, .hotspot-right.active ~ .card-right, .hotspot-bottom:hover ~ .card-bottom, .hotspot-bottom.active ~ .card-bottom { opacity: 1; transform: translateY(0); }
/* ==========================================================================
5. PAGE SECTIONS
========================================================================== */
/* Quick Actions */
.quick-actions-wrapper { background: #ffffff; padding: 40px 5%; position: relative; z-index: 10; margin-top: -15px; border-radius: 25px 25px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,0.05); }
.quick-actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; max-width: 1200px; margin: 0 auto; }
.qa-card { display: flex; align-items: center; gap: 15px; padding: 20px; border-radius: 16px; text-decoration: none; color: var(--text-dark); transition: 0.3s; border: 1px solid rgba(0,0,0,0.05); }
.qa-card:hover { border-color: var(--brand-green); transform: translateY(-5px); box-shadow: var(--shadow-md); background: #ffffff; }
.qa-icon { width: 45px; height: 45px; background: rgba(19, 201, 167, 0.1); color: var(--brand-dark); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 18px; transition: 0.3s; }
.qa-card:hover .qa-icon { background: var(--brand-green); color: #fff; transform: rotateY(180deg); }
.qa-text h4 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.qa-text p { font-size: 12px; color: #7f8c8d; }
/* About Section */
.about-section { background: url('data:image/svg+xml;utf8,') right center/500px no-repeat, var(--bg-light); }
.about-container { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; max-width: 1300px; margin: 0 auto; }
.about-content h2 { font-size: clamp(32px, 3vw, 42px); line-height: 1.3; color: var(--text-dark); margin-bottom: 20px; }
.about-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 30px; }
.stat-item { padding: 25px; border-radius: 16px; border-left: 4px solid var(--brand-green); transition: transform 0.3s; }
.stat-item:hover { transform: translateY(-5px); }
.stat-number { font-size: 36px; color: var(--brand-dark); font-weight: 800; }
.about-img-wrap { position: relative; }
.about-img { width: 100%; border-radius: 20px; box-shadow: var(--shadow-lg); }
.accreditation-badge { position: absolute; bottom: -20px; right: -20px; background: #fff; padding: 15px 25px; border-radius: 12px; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 15px; font-weight: 700; color: var(--brand-dark); z-index: 5;}
/* Find a Doctor Section */
.find-doctor-section { background: var(--brand-dark); color: #fff; padding: 100px 5%; position: relative; overflow: hidden; }
.find-doctor-bg { position: absolute; top: -50%; right: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); border-radius: 50%; animation: floatBounce 8s infinite alternate;}
.fd-container { max-width: 1000px; margin: 0 auto; position: relative; z-index: 2; text-align: center; }
.fd-container h2 { font-size: 36px; margin-bottom: 15px; }
.fd-search-box { display: flex; padding: 10px; border-radius: 50px; margin-top: 30px; }
.fd-search-box select, .fd-search-box input { border: none; padding: 15px 25px; font-size: 16px; outline: none; background: transparent; font-family: inherit; }
.fd-search-box select { width: 30%; border-right: 1px solid rgba(0,0,0,0.1); color: var(--brand-dark); cursor: pointer; font-weight: 500;}
.fd-search-box input { width: 50%; color: var(--brand-dark); font-weight: 500;}
.fd-btn { width: 20%; background: var(--brand-green); border: none; border-radius: 50px; color: #fff; font-weight: 600; font-size: 16px; cursor: pointer; transition: 0.3s; box-shadow: 0 4px 15px rgba(19, 201, 167, 0.4);}
.fd-btn:hover { background: #10a88b; transform: scale(1.02); }
.doctor-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 40px; text-align: left; }
.doctor-card { background: rgba(255,255,255,0.95); color: var(--text-dark); border-radius: 16px; padding: 20px; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 15px; transition: transform 0.3s; cursor: pointer;}
.doctor-card:hover { transform: translateY(-5px) scale(1.02); }
.doctor-card img { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; border: 2px solid var(--brand-green); }
.doctor-info h4 { font-size: 18px; margin-bottom: 5px; color: var(--brand-dark); }
.doctor-info p { font-size: 13px; color: #7f8c8d; margin-bottom: 3px; }
.doctor-info .spec { display: inline-block; background: rgba(19, 201, 167, 0.15); color: var(--brand-dark); padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; margin-top: 5px; text-transform: capitalize; }
.no-results { grid-column: 1 / -1; text-align: center; color: #fff; font-size: 18px; padding: 20px; background: rgba(255,255,255,0.1); border-radius: 12px; }
/*
COMPACT ULTRA-PREMIUM CENTRES OF EXCELLENCE (LIVE HOVER ICONS)
*/
.coe-section {
background: #fcfcfc;
}
.coe-grid {
display: grid;
/* Reduced minmax from 320px to 260px to fit 4 cards per row */
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px; /* Tighter gap between cards */
max-width: 1300px;
margin: 0 auto;
}
.coe-card {
position: relative;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 20px; /* Slightly tighter curves */
padding: 25px 20px; /* Greatly reduced padding for a compact size */
text-decoration: none;
display: flex;
flex-direction: column;
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03);
}
.coe-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px; /* Thinner top line */
background: var(--brand-green);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
border-radius: 20px 20px 0 0;
}
/* CARD HOVER PHYSICS */
.coe-card:hover {
transform: translateY(-5px); /* Shorter, tighter lift */
box-shadow: 0 15px 35px rgba(19, 201, 167, 0.08);
border-color: rgba(19, 201, 167, 0.2);
}
.coe-card:hover::before {
transform: scaleX(1);
}
/* ─── SCALED DOWN ICON BOX ─── */
.coe-icon-box {
width: 90px; /* Scaled down from 75px */
height: 90px;
border-radius: 16px;
background: rgba(19, 201, 167, 0.08);
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 15px; /* Tighter margin */
transition: all 0.4s ease;
}
.coe-card:hover .coe-icon-box {
background: var(--brand-green);
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(19, 201, 167, 0.25);
}
/* ─── SCALED SVG ICON ─── */
.live-icon {
width: 50px; /* Scaled down from 40px */
height: auto;
transition: all 0.4s ease;
transform: translateZ(0);
}
.coe-card:hover .live-icon {
filter: brightness(0) invert(1);
animation: compactLiveFloat 2s ease-in-out infinite;
}
@keyframes compactLiveFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); } /* Smaller, tighter bounce */
}
/* ─── SCALED TYPOGRAPHY & ARROW ─── */
.coe-card h3 {
font-size: 17px; /* Reduced heading size */
font-weight: 700;
color: var(--brand-dark);
margin-bottom: 8px;
line-height: 1.3;
transition: color 0.3s;
}
.coe-card:hover h3 {
color: var(--brand-green);
}
.coe-card p {
font-size: 13px; /* Reduced paragraph text */
color: #6c7a89;
line-height: 1.5;
margin-bottom: 15px;
flex-grow: 1;
}
.coe-arrow {
font-size: 16px; /* Smaller arrow */
color: var(--brand-green);
opacity: 0;
transform: translateX(-10px);
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.coe-card:hover .coe-arrow {
opacity: 1;
transform: translateX(0);
}
/* ─── MOBILE ADJUSTMENTS ─── */
@media (max-width: 768px) {
.coe-grid {
grid-template-columns: 1fr;
gap: 15px;
padding: 0 15px;
}
.coe-card {
padding: 20px 20px;
}
.coe-arrow {
opacity: 1;
transform: translateX(0);
}
}
/* ==========================================================================
ULTRA-PREMIUM FOOTER
========================================================================== */
.main-footer {
position: relative;
background: linear-gradient(135deg, #0a0a0a 0%, #0a252b 100%);
color: #fff;
padding: 80px 5% 0;
overflow: hidden;
font-family: var(--font-main);
}
/* Subtle background tech grid for depth */
.footer-bg-overlay {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.02) 1px, transparent 3px),
linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
background-size: 30px 30px;
z-index: 0;
pointer-events: none;
}
.footer-grid {
position: relative;
z-index: 1;
display: grid;
/* Perfectly balances the 4 columns */
grid-template-columns: 1.2fr 1.5fr 1fr 1fr;
gap: 50px;
max-width: 1300px;
margin: 0 auto 60px;
}
.footer-col {
display: flex;
flex-direction: column;
}
.footer-logo {
width: 200px;
margin-bottom: 25px;
filter: brightness(0) invert(1); /* Forces logo to be white if it's dark */
}
.footer-text {
font-size: 15px;
color: rgba(255, 255, 255, 0.6);
line-height: 1.8;
margin-bottom: 25px;
}
/* Social Media Circles */
.footer-socials {
display: flex;
gap: 15px;
}
.footer-socials a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #fff;
border-radius: 50%;
font-size: 16px;
transition: all 0.3s ease;
}
.footer-socials a:hover {
background: var(--brand-green);
border-color: var(--brand-green);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(19, 201, 168, 0.952);
}
.footer-heading {
font-size: 18px;
font-weight: 700;
color: #fff;
margin-bottom: 25px;
position: relative;
padding-bottom: 10px;
}
/* Tiny green underline under headings */
.footer-heading::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 2px;
background: var(--brand-green);
}
/* ─── QUICK LINKS (SPLIT INTO 2 COLUMNS) ─── */
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links.split-list {
column-count: 2; /* Magically splits the 10 items into 2 aligned columns */
column-gap: 20px;
}
.footer-links li {
margin-bottom: 12px;
break-inside: avoid;
}
.footer-links a {
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
font-size: 15px;
transition: all 0.3s ease;
display: inline-block;
}
.footer-links a:hover {
color: var(--brand-green);
transform: translateX(5px); /* Slides right playfully */
}
/* ─── LOCATIONS ─── */
.footer-locations {
list-style: none;
padding: 0;
margin: 0;
}
.footer-locations li {
display: flex;
align-items: flex-start;
gap: 15px;
margin-bottom: 20px;
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
line-height: 1.6;
}
.loc-icon {
color: var(--brand-green);
font-size: 18px;
margin-top: 3px;
}
.loc-text strong {
color: #fff;
font-weight: 600;
font-size: 15px;
}
/* ─── EMERGENCY CONTACT CARD ─── */
.emergency-glass-card {
background: rgba(231, 76, 60, 0.05);
border: 1px solid rgba(231, 76, 60, 0.2);
border-radius: 16px;
padding: 25px 20px;
text-align: center;
position: relative;
overflow: hidden;
backdrop-filter: blur(10px);
}
.emergency-pulse-icon {
font-size: 30px;
color: #e74c3c;
margin-bottom: 15px;
animation: pulseIcon 2s infinite;
}
@keyframes pulseIcon {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.emergency-glass-card p {
font-size: 14px;
font-weight: 600;
color: #fff;
margin-bottom: 15px;
}
.emergency-call-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
background: #e74c3c;
color: #fff;
font-size: 14px;
font-weight: 700;
text-decoration: none;
padding: 12px 25px;
border-radius: 50px;
width: 100%;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
}
.emergency-call-btn:hover {
background: #c0392b;
box-shadow: 0 6px 20px rgba(231, 76, 60, 0.5);
transform: translateY(-2px);
}
/* ─── FOOTER BOTTOM LEGAL BAR ─── */
.footer-bottom {
position: relative;
z-index: 1;
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: 25px 0;
}
.footer-bottom-content {
max-width: 1300px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
color: rgba(255, 255, 255, 0.5);
}
.footer-legal-links a {
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
transition: 0.3s;
}
.footer-legal-links a:hover {
color: #fff;
}
.footer-legal-links .divider {
margin: 0 10px;
opacity: 0.3;
}
/* ─── MOBILE RESPONSIVENESS ─── */
@media (max-width: 1024px) {
.footer-grid {
grid-template-columns: 1fr 1fr; /* 2x2 Grid on Tablets */
gap: 40px;
}
}
@media (max-width: 768px) {
.main-footer {
padding: 60px 5% 0;
}
.footer-grid {
grid-template-columns: 1fr; /* Stacks vertically on phones */
gap: 40px;
}
.footer-links.split-list {
column-count: 2; /* Keeps 2 columns on mobile so it doesn't get too long */
}
.footer-bottom-content {
flex-direction: column;
gap: 15px;
text-align: center;
}
}
/* ==========================================================================
6. MOBILE STICKY BOTTOM NAV
========================================================================== */
.mobile-bottom-nav {
display: none; position: fixed; bottom: 0; left: 0; width: 100%; height: 68px;
background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border-top: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
z-index: 10000; grid-template-columns: repeat(5, 1fr); align-items: center; justify-items: center; padding: 0 4px;
}
.mobile-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: #555555; font-size: 10px; font-weight: 500; width: 100%; height: 100%; gap: 4px; transition: color 0.2s ease; }
.mobile-nav-item svg { width: 22px; height: 22px; fill: none; stroke: #555555; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.2s ease; }
.mobile-nav-item.center-btn { position: relative; transform: translateY(-14px); background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-dark) 100%); width: 58px; height: 58px; border-radius: 50%; box-shadow: 0 4px 16px rgba(19, 201, 167, 0.45); border: 4px solid #ffffff; }
.mobile-nav-item.center-btn svg { stroke: #ffffff; width: 24px; height: 24px; }
.mobile-nav-item:active { color: var(--brand-dark); }
.mobile-nav-item:active svg { stroke: var(--brand-dark); }
.mobile-nav-item.whatsapp-item svg { stroke: none; fill: #25D366; }
/* ==========================================================================
7. RESPONSIVE MEDIA QUERIES
========================================================================== */
@media(max-width: 991px) {
/* Mobile Drawer */
.nav-links {
position: fixed; top: 0; right: -300px; width: 280px; height: 100vh; background: #fff;
flex-direction: column; align-items: flex-start; padding: 80px 30px;
box-shadow: -5px 0 20px rgba(0,0,0,0.1); transition: right 0.4s ease; z-index: 9999;
}
.nav-links.active { right: 0; }
/* Reset Collapsible Logic for Mobile Drawer */
.hide-on-scroll { max-width: none !important; opacity: 1 !important; pointer-events: auto !important; }
.hide-on-scroll .btn-primary { display: none; }
.glass-header, .glass-header.collapsed { width: 95%; max-width: 100%; justify-content: space-between; padding: 10px 20px; }
.nav-dropdown > a { pointer-events: none; }
.dropdown-menu { position: static; box-shadow: none; padding: 10px 0 0 15px; opacity: 1; visibility: visible; transform: none; display: flex; background: transparent; border: none;}
.menu-toggle { display: flex; }
.menu-toggle.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
.about-container { grid-template-columns: 1fr; }
.fd-search-box { flex-direction: column; border-radius: 12px; background: transparent; box-shadow: none; gap: 10px; }
.fd-search-box select, .fd-search-box input, .fd-btn { width: 100%; border-radius: 12px; background: #fff; padding: 15px; border: none; }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media(max-width: 768px) {
.hero-banner { height: 45vh; min-height: 350px; background-size: cover; }
.hero-hotspot, .hover-card { display: none !important; }
.pill-text { display: none; } /* Hide emergency number text on small screens, show only phone icon */
.emergency-pill { padding: 10px; border-radius: 50%; }
.mobile-bottom-nav { display: grid; }
body { padding-bottom: 68px; }
.footer-grid { grid-template-columns: 1fr; }
.accreditation-badge { position: relative; bottom: 0; right: 0; margin-top: 20px; justify-content: center; }
}
/* ==========================================================================
8. ENHANCED ABOUT PAGE STYLES
========================================================================== */
.bg-light { background: var(--bg-light); }
.mt-3 { margin-top: 25px; }
/* ─── ABOUT HERO BANNER ─── */
.about-hero {
position: relative; width: 100%; height: 60vh; min-height: 500px;
background: url('../img/About-banner.jpg') center/cover no-repeat;
display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 5%;
}
.about-hero .hero-subtitle {
display: inline-block; padding: 8px 20px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px);
border-radius: 50px; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px;
}
.about-hero .hero-title { font-size: clamp(36px, 5vw, 56px); font-weight: 800; line-height: 1.2; margin-bottom: 20px; }
.about-hero .hero-title span { color: #d1f2eb; }
/* Quick Trust Strip inside Hero */
.hero-trust-strip {
position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px); border-top: 1px solid rgba(255,255,255,0.2);
display: flex; justify-content: center; gap: 40px; padding: 20px 5%; z-index: 3;
}
.trust-item { color: #fff; font-weight: 500; font-size: 15px; display: flex; align-items: center; gap: 10px; }
.trust-item i { color: #d1f2eb; font-size: 18px; }
/* ─── STORY SECTION ENHANCEMENTS ─── */
.story-container { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; max-width: 1300px; margin: 0 auto; }
.story-image-wrap { position: relative; }
.story-img { width: 100%; border-radius: 20px; box-shadow: var(--shadow-lg); object-fit: cover; height: 550px;}
.mission-vision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mv-card { padding: 25px; border-radius: 16px; border: 1px solid rgba(0,0,0,0.05); }
.mv-icon { width: 45px; height: 45px; background: rgba(19, 201, 167, 0.1); color: var(--brand-green); display: flex; justify-content: center; align-items: center; border-radius: 10px; font-size: 20px; margin-bottom: 15px; }
.mv-card h4 { color: var(--brand-dark); margin-bottom: 10px; font-size: 18px; }
.mv-card p { color: #6c7a89; font-size: 13px; line-height: 1.6; }
.ceo-message-box {
position: absolute; bottom: -40px; left: -40px; background: rgba(255,255,255,0.95);
padding: 30px; border-radius: 20px; max-width: 350px; box-shadow: var(--shadow-lg);
border-left: 5px solid var(--brand-green); z-index: 5;
}
.quote-icon { font-size: 30px; color: rgba(19, 201, 167, 0.3); margin-bottom: 10px; }
.ceo-message-box p { font-style: italic; font-size: 14px; color: var(--text-dark); margin-bottom: 15px; line-height: 1.6; }
.ceo-signature strong { display: block; color: var(--brand-dark); font-size: 16px; }
.ceo-signature span { font-size: 12px; color: var(--brand-green); font-weight: 600; }
/* ─── ANIMATED MILESTONE TIMELINE ─── */
.timeline {
position: relative;
max-width: 900px;
margin: 0 auto;
padding-left: 50px;
}
/* Faded Background Line */
.timeline::before {
content: '';
position: absolute; left: 9px; top: 0;
width: 4px; height: 100%;
background: rgba(19, 201, 167, 0.2);
border-radius: 5px;
}
/* Scroll-Animated Green Line */
.timeline-line {
position: absolute; left: 9px; top: 0;
width: 4px; height: 0%; /* JS will control this */
background: var(--brand-green);
border-radius: 5px;
transition: height 0.3s ease-out;
z-index: 1;
}
/* Timeline Items Hide Initially */
.timeline-item {
position: relative; margin-bottom: 50px;
opacity: 0; transform: translateY(30px);
transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.timeline-item.active { opacity: 1; transform: translateY(0); }
.timeline-item:last-child { margin-bottom: 0; }
/* Timeline Dot animations */
.timeline-dot {
position: absolute; left: -50px; top: 20px;
width: 22px; height: 22px;
background: #fff; border-radius: 50%;
border: 4px solid var(--brand-green);
box-shadow: 0 0 0 4px rgba(19, 201, 167, 0.2);
z-index: 2;
transition: all 0.4s ease;
transform: scale(0); /* Hide initially */
}
/* Pop in and start pulsing when active */
.timeline-item.active .timeline-dot {
transform: scale(1);
animation: pulse-dot 2s infinite 1s;
}
@keyframes pulse-dot {
0% { box-shadow: 0 0 0 0 rgba(19, 201, 167, 0.6); }
70% { box-shadow: 0 0 0 15px rgba(19, 201, 167, 0); }
100% { box-shadow: 0 0 0 0 rgba(19, 201, 167, 0); }
}
/* Timeline Content Box Hover Effects */
.timeline-content {
padding: 30px; border-radius: 16px;
border: 1px solid rgba(0,0,0,0.05);
transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
position: relative;
}
.timeline-content::before {
content: ''; position: absolute; left: -10px; top: 25px;
border-style: solid; border-width: 10px 10px 10px 0;
border-color: transparent rgba(255,255,255,0.9) transparent transparent;
}
/* Magnetic Hover Interaction */
.timeline-item:hover .timeline-content {
transform: translateX(10px);
box-shadow: var(--shadow-lg);
border-color: var(--brand-green);
}
.timeline-item:hover .timeline-dot {
background: var(--brand-green);
border-color: #fff;
transform: scale(1.3);
animation: none; /* Stop pulsing on hover so scale stays fixed */
box-shadow: 0 0 15px rgba(19, 201, 167, 0.8);
}
.timeline-year {
display: inline-block; background: var(--brand-dark); color: #fff;
padding: 6px 16px; border-radius: 20px; font-size: 14px;
font-weight: 700; margin-bottom: 15px; letter-spacing: 1px; box-shadow: var(--shadow-sm);
}
.timeline-content h3 { color: var(--brand-dark); font-size: 22px; margin-bottom: 10px; }
.timeline-content p { color: #6c7a89; font-size: 15px; line-height: 1.6; }
/* Timeline Mobile Optimization */
@media(max-width: 768px) {
.timeline { padding-left: 30px; }
.timeline::before, .timeline-line { left: 9px; }
.timeline-dot { left: -29px; width: 18px; height: 18px; }
.timeline-content::before { display: none; }
}
/* ─── NEW: INFRASTRUCTURE GRID ─── */
.infra-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; max-width: 1300px; margin: 0 auto; }
.infra-card { position: relative; border-radius: 20px; overflow: hidden; height: 350px; cursor: pointer; }
.infra-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.infra-overlay {
position: absolute; inset: 0; background: linear-gradient(to top, rgba(19, 93, 110, 0.9) 0%, transparent 100%);
display: flex; flex-direction: column; justify-content: flex-end; padding: 30px; transition: 0.4s;
}
.infra-card:hover img { transform: scale(1.1); }
.infra-overlay h4 { color: #fff; font-size: 22px; margin-bottom: 5px; transform: translateY(20px); transition: 0.4s; }
.infra-overlay p { color: rgba(255,255,255,0.8); font-size: 14px; opacity: 0; transform: translateY(20px); transition: 0.4s; }
.infra-card:hover .infra-overlay h4, .infra-card:hover .infra-overlay p { transform: translateY(0); opacity: 1; }
/* ─── CORE VALUES GRID ─── */
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; max-width: 1300px; margin: 0 auto; }
.value-card { padding: 40px 30px; border-radius: 20px; text-align: center; transition: transform 0.4s ease; border: 1px solid rgba(0,0,0,0.03); }
.value-card:hover { transform: translateY(-10px); border-bottom: 4px solid var(--brand-green); }
.value-icon { width: 70px; height: 70px; margin: 0 auto 20px; background: var(--gradient-primary); color: #fff; font-size: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; box-shadow: 0 10px 20px rgba(19, 201, 167, 0.3); transition: 0.4s; }
.value-card:hover .value-icon { transform: rotateY(180deg); }
.value-card h3 { color: var(--brand-dark); font-size: 20px; margin-bottom: 15px; }
.value-card p { color: #6c7a89; font-size: 14px; line-height: 1.6; }
/* ─── RESPONSIVE FOR ABOUT PAGE ─── */
@media(max-width: 991px) {
.story-container { grid-template-columns: 1fr; }
.ceo-message-box { left: 50%; transform: translateX(-50%); bottom: -80px; width: 90%; max-width: 500px; }
.hero-trust-strip { flex-direction: column; gap: 15px; align-items: center; }
}
@media(max-width: 768px) {
.about-hero { height: auto; padding: 120px 5% 60px; }
.timeline { padding-left: 20px; }
.timeline-dot { left: -29px; }
}
/* ==========================================================================
9. SPECIALITIES PAGE SPECIFIC STYLES
========================================================================== */
/* ─── HERO SECTION ─── */
.spec-hero {
position: relative; width: 100%; height: 55vh; min-height: 400px;
background: url('https://images.unsplash.com/photo-1551076805-e18690c5e561?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 5%;
}
.spec-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(19, 93, 110, 0.9), rgba(19, 201, 167, 0.75)); z-index: 1; }
.spec-hero-content { position: relative; z-index: 2; color: #fff; max-width: 800px; margin-top: 40px;}
.spec-hero .hero-subtitle {
display: inline-block; padding: 8px 20px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px);
border-radius: 50px; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px;
}
.spec-hero .hero-title { font-size: clamp(36px, 5vw, 56px); font-weight: 800; line-height: 1.2; margin-bottom: 20px; }
.spec-hero .hero-title span { color: #d1f2eb; }
/* ─── GRID SECTION WITH GLOWING ORBS ─── */
.spec-grid-section { position: relative; background: #ffffff; overflow: hidden; }
/* Background Glow Effects */
.bg-glow-orb { position: absolute; border-radius: 50%; filter: blur(80px); z-index: 0; opacity: 0.5; animation: floatOrb 10s infinite alternate; }
.orb-1 { width: 400px; height: 400px; background: rgba(19, 201, 167, 0.15); top: -100px; left: -100px; }
.orb-2 { width: 500px; height: 500px; background: rgba(19, 93, 110, 0.1); bottom: -150px; right: -150px; animation-delay: -5s; }
@keyframes floatOrb { 0% { transform: translateY(0) scale(1); } 100% { transform: translateY(50px) scale(1.1); } }
/* Department Grid Layout */
.spec-full-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; max-width: 1300px; margin: 0 auto; position: relative; z-index: 2; }
/* Enhanced Detail Card */
.spec-detail-card {
background: rgba(255,255,255,0.85);
border: 1px solid rgba(0,0,0,0.05);
border-top: 4px solid var(--brand-green);
border-radius: 16px; padding: 35px 30px;
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
display: flex; flex-direction: column;
}
.spec-detail-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); background: #ffffff; }
.spec-icon-wrap {
width: 65px; height: 65px; border-radius: 14px;
background: var(--gradient-primary); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 30px; margin-bottom: 25px; transition: 0.4s;
box-shadow: 0 8px 20px rgba(19, 201, 167, 0.3);
}
.spec-detail-card:hover .spec-icon-wrap { transform: rotateY(180deg) scale(1.05); }
.spec-detail-card h3 { color: var(--brand-dark); font-size: 22px; margin-bottom: 15px; }
.spec-detail-card p { font-size: 14.5px; margin-bottom: 20px; flex-grow: 1; }
.spec-features { list-style: none; margin-bottom: 25px; padding: 0; }
.spec-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: #555; margin-bottom: 10px; }
.spec-features i { color: var(--brand-green); margin-top: 3px; font-size: 12px;}
.spec-btn {
display: inline-flex; align-items: center; gap: 8px;
color: var(--brand-green); font-weight: 700; text-decoration: none;
font-size: 15px; transition: 0.3s; margin-top: auto;
}
.spec-btn:hover { color: var(--brand-dark); gap: 12px; }
/* ─── FEATURED SPECIALITY SECTION ─── */
.featured-spec-container {
display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
align-items: center; max-width: 1200px; margin: 0 auto;
}
.fs-image { position: relative; }
.fs-image img { width: 100%; border-radius: 20px; box-shadow: var(--shadow-lg); }
.fs-floating-badge {
position: absolute; bottom: 30px; right: -30px;
background: #ffffff; padding: 15px 25px; border-radius: 12px;
box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px;
font-weight: 700; color: var(--brand-dark); border-left: 4px solid var(--brand-green);
}
.fs-floating-badge i { color: #e74c3c; font-size: 24px; }
.fs-content h3 { font-size: 28px; color: var(--brand-dark); margin-bottom: 20px; }
.fs-metrics { display: flex; gap: 30px; margin-top: 30px; padding-top: 25px; border-top: 1px solid rgba(0,0,0,0.1); }
.fs-metric-box h4 { font-size: 36px; color: var(--brand-green); display: inline-block; margin-bottom: 5px; }
.fs-metric-box span { font-size: 16px; color: var(--brand-dark); font-weight: 700; margin-left: 5px; }
.fs-metric-box p { font-size: 13px; color: #7f8c8d; text-transform: uppercase; letter-spacing: 1px; }
/* ─── CALL TO ACTION BANNER ─── */
.cta-banner {
background: var(--gradient-primary); padding: 80px 5%;
text-align: center; color: #fff; position: relative; overflow: hidden;
}
.cta-banner::before {
content: ''; position: absolute; inset: 0;
background: url('data:image/svg+xml;utf8,') center/400px repeat;
}
.cta-content { position: relative; z-index: 2; max-width: 700px; margin: 0 auto; }
.cta-content h2 { font-size: 36px; margin-bottom: 15px; }
.cta-content p { font-size: 16px; opacity: 0.9; margin-bottom: 30px; }
.cta-buttons { display: flex; justify-content: center; gap: 20px; }
.btn-outline {
border: 2px solid #fff; color: #fff; padding: 10px 24px;
border-radius: 50px; font-weight: 600; text-decoration: none; transition: 0.3s;
display: inline-flex; align-items: center; gap: 8px;
}
.btn-outline:hover { background: #fff; color: var(--brand-dark); }
/* ─── RESPONSIVE RULES ─── */
@media(max-width: 991px) {
.featured-spec-container { grid-template-columns: 1fr; }
.fs-floating-badge { right: 20px; bottom: -20px; }
}
@media(max-width: 768px) {
.spec-hero { height: auto; padding: 120px 5% 60px; }
.spec-full-grid { grid-template-columns: 1fr; }
.cta-buttons { flex-direction: column; }
}
/* ==========================================================================
11. NEW SECTIONS (PACKAGES, INSURANCE, FAQ)
========================================================================== */
/* ─── HEALTH PACKAGES ─── */
.health-pkg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto; align-items: center; }
.pkg-card { padding: 40px 30px; border-radius: 20px; background: #fff; border: 1px solid rgba(0,0,0,0.05); text-align: center; transition: 0.4s; position: relative; }
.pkg-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); border-color: var(--brand-green); }
.premium-pkg { background: var(--gradient-primary); color: #fff; transform: scale(1.05); border: none; box-shadow: 0 15px 35px rgba(19, 93, 110, 0.2); }
.premium-pkg:hover { transform: translateY(-10px) scale(1.05); box-shadow: 0 20px 40px rgba(19, 93, 110, 0.3); }
.pkg-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: #e74c3c; color: #fff; padding: 5px 20px; border-radius: 50px; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.pkg-header h3 { font-size: 24px; margin-bottom: 10px; color: inherit; }
.pkg-card:not(.premium-pkg) .pkg-header h3 { color: var(--brand-dark); }
.pkg-price { font-size: 40px; font-weight: 800; margin-bottom: 10px; color: inherit; }
.pkg-card:not(.premium-pkg) .pkg-price { color: var(--brand-green); }
.pkg-header p { font-size: 14px; opacity: 0.8; margin-bottom: 30px; }
.pkg-features { list-style: none; padding: 0; margin-bottom: 35px; text-align: left; }
.pkg-features li { padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.05); font-size: 14.5px; display: flex; align-items: flex-start; gap: 10px; }
.premium-pkg .pkg-features li { border-bottom: 1px solid rgba(255,255,255,0.1); }
.pkg-features li i { color: var(--brand-green); margin-top: 4px; }
.premium-pkg .pkg-features li i { color: #d1f2eb; }
.btn-outline-green { display: block; border: 2px solid var(--brand-green); color: var(--brand-green); padding: 12px 24px; border-radius: 50px; font-weight: 600; text-decoration: none; transition: 0.3s; }
.btn-outline-green:hover { background: var(--brand-green); color: #fff; }
/* ─── INSURANCE GRID ─── */
.insurance-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; max-width: 1000px; margin: 0 auto; }
.ins-box { padding: 15px 25px; border-radius: 12px; background: #fff; border: 1px solid rgba(0,0,0,0.05); font-weight: 600; color: #7f8c8d; font-size: 16px; display: flex; align-items: center; gap: 10px; transition: 0.3s; box-shadow: var(--shadow-sm); cursor: default; }
.ins-box i { font-size: 20px; color: var(--brand-dark); transition: 0.3s; }
.ins-box:hover { color: var(--brand-dark); transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(19, 201, 167, 0.3); }
.ins-box:hover i { color: var(--brand-green); }
/* ─── FAQ ACCORDIONS ─── */
.faq-container { max-width: 800px; margin: 0 auto; }
.faq-box { margin-bottom: 15px; border-radius: 12px; background: #fff; border: 1px solid rgba(0,0,0,0.05); box-shadow: var(--shadow-sm); overflow: hidden; transition: 0.3s; }
.faq-box[open] { border-left: 4px solid var(--brand-green); box-shadow: var(--shadow-md); }
.faq-box summary { padding: 20px 25px; font-weight: 600; font-size: 16px; color: var(--brand-dark); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; outline: none; }
.faq-box summary::-webkit-details-marker { display: none; }
.faq-box summary::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--brand-green); transition: transform 0.3s ease; }
.faq-box[open] summary::after { transform: rotate(180deg); }
.faq-content { padding: 0 25px 25px; color: #6c7a89; font-size: 15px; line-height: 1.7; border-top: 1px solid rgba(0,0,0,0.03); margin-top: 10px; padding-top: 20px; }
/* ─── RESPONSIVE ─── */
@media(max-width: 991px) {
.premium-pkg { transform: scale(1); }
.premium-pkg:hover { transform: translateY(-5px) scale(1); }
}
@media(max-width: 768px) {
.faq-box summary { font-size: 14.5px; padding: 15px 20px; }
.ins-box { flex-basis: calc(50% - 10px); justify-content: center; font-size: 14px; }
}
/* ==========================================================================
10. COMPACT 25+ SPECIALITIES GRID PAGE
========================================================================== */
.compact-spec-section {
background: var(--bg-light);
position: relative;
padding-top: 50px;
}
/* Specialities Search Bar */
.spec-filter-wrapper {
max-width: 600px;
margin: 0 auto 50px;
position: relative;
z-index: 5;
}
.spec-search-box {
display: flex;
align-items: center;
background: #fff;
border-radius: 50px;
padding: 5px 25px;
border: 1px solid rgba(0,0,0,0.05);
}
.spec-search-box i {
color: var(--brand-green);
font-size: 18px;
margin-right: 15px;
}
.spec-search-box input {
border: none;
outline: none;
padding: 15px 0;
width: 100%;
font-family: var(--font-main);
font-size: 16px;
color: var(--text-dark);
background: transparent;
}
/* Compact Grid Layout */
.compact-coe-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px;
max-width: 1300px;
margin: 0 auto;
}
.compact-coe-card {
background: #ffffff;
border: 1px solid rgba(0,0,0,0.04);
border-radius: 16px;
padding: 25px 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}
.compact-coe-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-md);
border-color: rgba(19, 201, 167, 0.3);
}
.compact-icon {
width: 60px;
height: 60px;
background: rgba(19, 201, 167, 0.1);
color: var(--brand-dark);
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
font-size: 24px;
margin-bottom: 15px;
transition: all 0.3s ease;
}
.compact-coe-card:hover .compact-icon {
background: var(--brand-green);
color: #ffffff;
transform: scale(1.1);
}
.compact-coe-card h3 {
font-size: 15px;
color: var(--brand-dark);
font-weight: 600;
line-height: 1.4;
transition: color 0.3s;
}
.compact-coe-card:hover h3 {
color: var(--brand-green);
}
/* Responsive Rules for Compact Grid */
@media(max-width: 768px) {
.compact-coe-grid {
grid-template-columns: repeat(2, 1fr); /* 2 Columns on Mobile */
gap: 15px;
}
.compact-coe-card {
padding: 20px 10px;
}
.compact-icon {
width: 50px;
height: 50px;
font-size: 20px;
margin-bottom: 10px;
}
.compact-coe-card h3 {
font-size: 13px;
}
.spec-filter-wrapper {
margin-bottom: 30px;
}
.spec-search-box input {
font-size: 14px;
}
}
@media(max-width: 480px) {
}
/* ==========================================================================
FUTURISTIC DOCTOR PORTAL LAYOUT
========================================================================== */
.doc-portal-hero {
position: relative; width: 100%; height: 45vh; min-height: 350px;
background: url('https://images.unsplash.com/photo-1631553127988-34858564f9bf?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 5%;
}
.portal-hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(19, 93, 110, 0.95), rgba(44, 62, 80, 0.8)); z-index: 1; }
.portal-hero-content { position: relative; z-index: 2; color: #fff; max-width: 800px; margin-top: 40px; }
/* Filter Panel Styling */
.filter-deck-section { background: var(--bg-light); padding: 0 5%; position: relative; z-index: 10; margin-top: -40px; }
.filter-glass-panel {
max-width: 1200px; margin: 0 auto; padding: 30px; border-radius: 24px;
display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 25px;
border: 1px solid rgba(255,255,255,0.7); box-shadow: var(--shadow-md); background: rgba(255, 255, 255, 0.9);
}
.filter-control { display: flex; flex-direction: column; gap: 8px; }
.filter-control label { font-size: 13px; font-weight: 700; color: var(--brand-dark); text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 6px; }
.filter-control select, .search-field-wrapper input {
width: 100%; padding: 14px 20px; font-size: 14.5px; border-radius: 50px;
border: 1px solid rgba(19, 93, 110, 0.15); background: #fff; outline: none;
font-family: inherit; color: var(--text-dark); transition: all 0.3s;
}
.filter-control select:focus, .search-field-wrapper input:focus { border-color: var(--brand-green); box-shadow: 0 0 10px rgba(19, 201, 167, 0.2); }
.search-field-wrapper { position: relative; }
.search-inline-icon { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--brand-teal); font-size: 16px; }
/* Active Counter Strip */
.results-counter-strip { max-width: 1200px; margin: 30px auto 0; padding: 0 10px; font-size: 14px; font-weight: 600; color: var(--brand-dark); }
#activeCountLabel { color: var(--brand-green); font-weight: 800; font-size: 16px; }
/* Holographic Matrix Grid */
.doctor-matrix-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto; min-height: 200px; padding-top: 20px;}
/* Futuristic Card Item */
.cyber-doc-card {
background: #ffffff; border-radius: 20px; border: 1px solid rgba(0,0,0,0.04);
padding: 25px; display: flex; flex-direction: column; align-items: center; text-align: center;
position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
box-shadow: var(--shadow-sm);
}
.cyber-doc-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: rgba(19, 201, 167, 0.3); }
/* Glowing Live Status Indicator */
.card-status-pulse {
position: absolute; top: 15px; right: 15px; background: rgba(19, 201, 167, 0.15);
color: var(--brand-green); font-size: 10px; font-weight: 700; padding: 4px 12px;
border-radius: 50px; text-transform: uppercase; letter-spacing: 0.5px;
}
.avatar-wrapper { position: relative; margin: 15px 0 20px; }
.cyber-avatar { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.08); position: relative; z-index: 2;}
.avatar-glow-ring { position: absolute; inset: -4px; border: 2px dashed var(--brand-green); border-radius: 50%; animation: rotateRing 15s linear infinite; z-index: 1;}
@keyframes rotateRing { 100% { transform: rotate(360deg); } }
.profile-details h3 { font-size: 19px; color: var(--brand-dark); font-weight: 700; margin-bottom: 4px; }
.profile-details .doc-degree { font-size: 12px; color: #7f8c8d; font-weight: 500; text-transform: uppercase; }
.profile-details .doc-spec-tag { display: inline-block; background: var(--bg-light); color: var(--brand-dark); font-size: 12px; font-weight: 600; padding: 4px 14px; border-radius: 20px; margin: 12px 0 6px; text-transform: capitalize; }
.profile-details .doc-loc { font-size: 13px; color: #7f8c8d; display: flex; align-items: center; justify-content: center; gap: 5px; }
/* Card Interactive Buttons */
.card-action-block { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(0,0,0,0.04); }
.btn-card-secondary { background: var(--bg-light); color: var(--brand-dark); text-decoration: none; padding: 10px; border-radius: 50px; font-size: 12.5px; font-weight: 600; transition: 0.3s; border: none; cursor: pointer; display: flex; justify-content: center; align-items: center;}
.btn-card-secondary:hover { background: var(--brand-dark); color: #fff; }
.btn-card-primary { background: var(--gradient-primary); color: #fff; text-decoration: none; padding: 10px; border-radius: 50px; font-size: 12.5px; font-weight: 600; transition: 0.3s; border: none; cursor: pointer; box-shadow: 0 4px 10px rgba(19, 201, 167, 0.2); }
.btn-card-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 15px rgba(19, 201, 167, 0.3); }
/* Responsive Grid Rules */
@media(max-width: 991px) {
.filter-glass-panel { grid-template-columns: 1fr; gap: 15px; padding: 20px; }
}
@media(max-width: 768px) {
.doctor-matrix-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
.cyber-doc-card { padding: 15px; }
.card-action-block { grid-template-columns: 1fr; }
.card-status-pulse { display: none; }
}
/* ==========================================================================
VIEW MORE PAGINATION BUTTON
========================================================================== */
.view-more-container {
display: flex;
justify-content: center;
width: 100%;
padding-top: 20px;
}
.view-more-container .btn-primary {
padding: 14px 40px;
font-size: 15px;
letter-spacing: 0.5px;
transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s;
display: inline-flex;
align-items: center;
gap: 10px;
}
.view-more-container .btn-primary i {
transition: transform 0.3s;
}
.view-more-container .btn-primary:hover i {
transform: translateY(3px); /* Bounces the arrow down on hover */
}
/* ==========================================================================
14. DEDICATED CLINICAL DOCTOR PROFILE ARCHITECTURE
========================================================================== */
.profile-layout-container {
display: grid;
grid-template-columns: 360px 1fr;
gap: 40px;
max-width: 1300px;
margin: 0 auto;
align-items: start;
}
/* Sidebar Profile Block Card Layout */
.profile-sidebar-card {
background: #ffffff; border-radius: 24px; padding: 40px 30px;
border: 1px solid rgba(255,255,255,0.7); box-shadow: var(--shadow-md);
display: flex; flex-direction: column; align-items: center; text-align: center;
position: relative;
}
.verified-badge {
position: absolute; top: 20px; left: 20px; font-size: 11px; font-weight: 700;
color: var(--brand-green); background: rgba(19, 201, 167, 0.12); padding: 5px 14px;
border-radius: 50px; text-transform: uppercase; letter-spacing: 0.5px;
}
.profile-avatar-block { position: relative; margin: 20px 0; }
.profile-master-avatar { width: 260px; height: 260px; border-radius: 24%; object-fit: cover; border: 4px solid #fff; box-shadow: var(--shadow-sm); position: relative; z-index: 2;}
.profile-meta-header h2 { font-size: 25px; color: var(--brand-green); font-weight: 700; margin-bottom: 8px; }
.meta-deg { font-size: 5px; color: #7f8c8d; font-weight: 500; }
.meta-faculty-tag { display: inline-block; background: var(--bg-light); color: var(--text-dark); font-size: 12px; font-weight: 800; padding: 5px 16px; border-radius: 50px; margin-top: 10px; }
/* Vertical Expertise List Styling */
.expertise-list-vertical {
list-style: none;
padding: 0;
margin: 0;
}
.expertise-list-vertical li {
padding: 10px 0;
border-bottom: 1px dashed var(--border-color);
color: var(--text-main);
display: flex;
align-items: center;
gap: 12px;
font-size: 0.95rem;
}
.expertise-list-vertical li:last-child {
border-bottom: none; /* Removes the line under the last item */
}
.expertise-list-vertical li i {
color: var(--primary-color);
font-size: 1.1rem;
}
/* Sidebar Numeric Stat Strip */
.meta-stats-strip {
display: grid; grid-template-columns: 1fr 1fr; gap: 15px; width: 100%;
margin: 25px 0; padding: 15px 0; border-top: 1px solid rgba(0,0,0,0.05); border-bottom: 1px solid rgba(0,0,0,0.05);
}
.meta-stat-box strong { font-size: 18px; color: var(--brand-green); font-weight: 800; display: block; }
.meta-stat-box p { font-size: 12px; color: #7f8c8d; font-weight: 600; text-transform: uppercase; }
.meta-list-info { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 12px; margin-bottom: 25px; }
.info-row { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--text-dark); }
.info-row i { color: var(--brand-dark); margin-top: 3px; font-size: 16px; }
.appointment-cta-btn { width: 100%; padding: 14px; border-radius: 50px; font-size: 14px; text-align: center; font-weight: 700; }
/* Main Right Content Section Blocks */
.profile-main-content { display: flex; flex-direction: column; gap: 30px; }
.content-block-card { background: #ffffff; padding: 35px; border-radius: 24px; border: 1px solid rgba(0,0,0,0.03); }
.block-title { font-size: 20px; color: var(--brand-dark); font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.block-title i { color: var(--brand-green); }
/* Expertise Faculty Tag cloud */
.expertise-tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.expertise-tag { background: rgba(19, 93, 110, 0.05); color: var(--brand-dark); border: 1px solid rgba(19, 93, 110, 0.08); font-size: 13.5px; font-weight: 600; padding: 8px 18px; border-radius: 50px; transition: all 0.3s; }
.expertise-tag:hover { background: var(--brand-green); color: #fff; border-color: var(--brand-green); transform: scale(1.03); }
/* OPD Matrix Table Grid */
.schedule-table-wrapper { width: 100%; overflow-x: auto; border-radius: 12px; border: 1px solid rgba(0,0,0,0.06); }
.opd-schedule-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14.5px; }
.opd-schedule-table th { background: var(--bg-light); color: var(--brand-dark); font-weight: 700; padding: 14px 20px; border-bottom: 2px solid rgba(0,0,0,0.05); }
.opd-schedule-table td { padding: 14px 20px; border-bottom: 1px solid rgba(0,0,0,0.04); color: var(--text-dark); }
.opd-schedule-table tr:last-child td { border-bottom: none; }
/* Academic Progression Timeline */
.academic-timeline { list-style: none; position: relative; padding-left: 20px; }
.academic-timeline::before { content: ''; position: absolute; left: 0; top: 5px; width: 2px; height: 90%; background: rgba(19, 201, 167, 0.25); }
.academic-timeline li { position: relative; margin-bottom: 20px; }
.academic-timeline li::before { content: ''; position: absolute; left: -24px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-green); border: 2px solid #fff; box-shadow: 0 0 5px rgba(0,0,0,0.1); }
.academic-timeline li:last-child { margin-bottom: 0; }
.academic-timeline li strong { color: var(--brand-dark); font-size: 15px; }
.academic-timeline li p { font-size: 13.5px; color: #7f8c8d; margin-top: 2px; }
/* Responsive Adaptability Breaks */
@media(max-width: 1024px) {
.profile-layout-container { grid-template-columns: 1fr; gap: 30px; }
.profile-sidebar-card { width: 100%; max-width: none; }
}
@media(max-width: 576px) {
.content-block-card { padding: 25px 20px; }
.opd-schedule-table th, .opd-schedule-table td { padding: 12px 15px; font-size: 13px; }
}
/* ==========================================================================
DEPARTMENT HERO BANNER STYLES
========================================================================== */
.dept-premium-hero {
position: relative;
width: 100%;
height: 50vh; /* Adjust this to make the banner taller or shorter */
min-height: 400px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
}
/* The Image Layer */
.dept-hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.dept-hero-bg img {
width: 100%;
height: 100%;
object-fit: cover; /* Ensures the image doesn't stretch or warp */
object-position: center;
}
/* The Dark Gradient Overlay */
.dept-hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Creates a sleek dark fade from left to right */
background: linear-gradient(90deg, rgba(10, 31, 36, 0.85) 0%, rgba(10, 31, 36, 0.6) 100%);
z-index: 2;
}
/* The Text Content */
.dept-hero-content {
position: relative;
z-index: 3; /* Keeps text above the image and overlay */
padding: 0 20px;
max-width: 900px;
}
.dept-hero-content .hero-title {
font-size: 56px;
font-weight: 800;
color: #ffffff;
margin-bottom: 15px;
line-height: 1.2;
letter-spacing: -1px;
}
.dept-hero-content .hero-title span {
color: #13c9a7; /* Your brand green color */
}
.dept-hero-content .hero-subtitle {
font-size: 20px;
color: #cbd5e1;
font-weight: 500;
margin: 0;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
.dept-premium-hero {
height: 40vh;
min-height: 350px;
}
.dept-hero-content .hero-title {
font-size: 36px;
}
.dept-hero-content .hero-subtitle {
font-size: 16px;
}
}
.dept-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(19, 93, 110, 0.9), rgba(19, 201, 168, 0)); z-index: 1; }
.dept-hero-content { position: relative; z-index: 2; color: #fff; max-width: 800px; margin-top: 30px; }
.dept-hero-content .hero-subtitle {
display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px;
background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px);
border-radius: 50px; font-size: 14px; font-weight: 600; text-transform: uppercase;
letter-spacing: 2px; margin-bottom: 20px;
}
.dept-hero-content .hero-title { font-size: clamp(36px, 5vw, 56px); font-weight: 800; line-height: 1.2; align-items: left; margin-bottom: 20px; }
.dept-hero-content .hero-title span { color: #0cf0be; }
.dept-hero-content p { font-size: 16px; opacity: 0.9; line-height: 1.6; max-width: 700px; margin: 0 auto; }
/* Overlapping Statistics Bar */
.dept-overlap-stats {
display: grid; grid-template-columns: repeat(4, 1fr);
max-width: 1100px; margin: -50px auto 0; position: relative; z-index: 10;
border-radius: 20px; padding: 30px; text-align: center;
border-top: 4px solid var(--brand-green);
}
.stat-block { border-right: 1px solid rgba(0,0,0,0.1); }
.stat-block:last-child { border-right: none; }
.stat-block h3 { font-size: 32px; color: var(--brand-green); font-weight: 800; margin-bottom: 5px; }
.stat-block p { font-size: 13px; color: var(--brand-dark); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;}
/* Reusable Outline Button */
.btn-outline-green {
display: inline-block; border: 2px solid var(--brand-green); color: var(--brand-green);
padding: 12px 30px; border-radius: 50px; font-weight: 600; text-decoration: none; transition: 0.3s;
}
.btn-outline-green:hover { background: var(--brand-green); color: #fff; }
/* Responsive adjustments for Dept Pages */
@media(max-width: 991px) {
.dept-overlap-stats { grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 20px; width: 90%; margin-top: -30px;}
.stat-block:nth-child(2) { border-right: none; }
.stat-block:nth-child(1), .stat-block:nth-child(2) { border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 20px; }
}
@media(max-width: 576px) {
.dept-premium-hero { height: auto; padding: 120px 5% 80px; }
.dept-overlap-stats { grid-template-columns: 1fr; gap: 15px; }
.stat-block { border-right: none !important; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 15px; }
.stat-block:last-child { border-bottom: none; padding-bottom: 0; }
}
/* ==========================================================================
ABOUT STATS HORIZONTAL LAYOUT
========================================================================== */
.about-stats {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
margin-top: 40px;
}
.about-stats .stat-item {
flex: 1 1 calc(25% - 20px);
min-width: 120px;
text-align: center;
padding: 20px 15px;
border-radius: 16px;
border: 1px solid rgba(0,0,0,0.05);
}
.about-stats .stat-number {
font-size: 32px;
color: var(--brand-green);
font-weight: 800;
display: inline-block;
}
.about-stats span {
font-size: 24px;
color: var(--brand-green);
font-weight: 800;
}
/* ==========================================================================
MISSION & VISION SECTION
========================================================================== */
.mv-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
max-width: 1100px;
margin: 0 auto;
}
.mv-card {
padding: 40px;
border-radius: 24px;
text-align: center;
border: 1px solid rgba(0,0,0,0.04);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mv-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(19, 201, 167, 0.1);
}
.mv-icon {
width: 70px;
height: 70px;
background: rgba(19, 201, 167, 0.1);
color: var(--brand-green);
font-size: 30px;
display: flex; justify-content: center; align-items: center;
border-radius: 50%;
margin: 0 auto 25px;
transition: 0.3s ease;
}
.mv-card:hover .mv-icon {
background: var(--brand-green);
color: #fff;
transform: scale(1.1);
}
/* ==========================================================================
MANAGEMENT DESK SECTION
========================================================================== */
/* --- Base Container --- */
.modern-leadership-section {
padding: 80px 20px;
background-color: #fafbfc; /* Extremely light grey/blue for a modern, clean background */
font-family: 'Inter', sans-serif; /* Assumes a modern sans-serif font */
}
.leadership-container {
max-width: 1200px;
margin: 0 auto;
}
/* --- Clean Header --- */
.leadership-header {
text-align: center;
margin-bottom: 60px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.modern-subtitle {
display: inline-block;
background: rgba(0, 86, 179, 0.1);
color: var(--brand-dark, #0056b3);
padding: 6px 16px;
border-radius: 20px;
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 15px;
}
.modern-title {
font-size: 36px;
font-weight: 800;
color: #1a1a1a;
line-height: 1.2;
margin-bottom: 15px;
}
.modern-title span {
color: var(--brand-dark, #0056b3);
}
/* --- The Compact Grid --- */
.modern-leadership-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); /* Very compact */
gap: 25px; /* Clean spacing */
}
/* --- Modern Hover Cards --- */
.modern-card {
background: #ffffff;
border-radius: 20px; /* Modern rounded corners */
padding: 30px 20px 25px;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); /* Ultra-soft, diffused shadow */
border: 1px solid rgba(0, 0, 0, 0.02);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
display: flex;
flex-direction: column;
align-items: center;
}
.modern-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 86, 179, 0.1); /* Subtle brand-colored glow on hover */
}
/* --- Circular Avatars --- */
.modern-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
margin-bottom: 20px;
border: 4px solid #ffffff;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* Makes the image "pop" off the card */
overflow: hidden;
flex-shrink: 0;
background-color: #f0f0f0;
}
.modern-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
/* --- Pill Badges for Titles --- */
.modern-badge {
background-color: #f0f5ff; /* Soft blue background */
color: var(--brand-dark, #0056b3);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
padding: 5px 12px;
border-radius: 50px;
letter-spacing: 0.5px;
margin-bottom: 12px;
}
/* --- Typography --- */
.modern-name {
font-size: 18px;
font-weight: 700;
color: #222;
margin: 0 0 10px 0;
}
.modern-desc {
font-size: 13px;
line-height: 1.6;
color: #666;
margin: 0;
/* Keeps all text identically sized by cutting off after 4 lines */
display: -webkit-box;
line-clamp: 4;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* --- Responsive Layout --- */
@media (max-width: 768px) {
.modern-leadership-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
}
@media (max-width: 480px) {
.modern-leadership-grid {
grid-template-columns: 1fr;
}
.modern-card {
padding: 25px 20px;
}
}
/* ==========================================================================
MOBILE RESPONSIVENESS OVERRIDES
========================================================================== */
@media (max-width: 991px) {
.management-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.quote-badge {
top: -15px;
left: -15px;
width: 60px;
height: 60px;
font-size: 24px;
}
}
@media (max-width: 768px) {
.about-stats {
gap: 15px;
}
.about-stats .stat-item {
flex: 1 1 calc(50% - 15px); /* 2 columns on tablet */
}
.management-quote {
font-size: 15px;
padding-left: 15px;
}
}
@media (max-width: 480px) {
.about-stats .stat-item {
flex: 1 1 100%; /* 1 column on small mobile */
}
}
/* ==========================================================================
ULTRA-PREMIUM DARK STATS STRIP
========================================================================== */
.premium-stats-strip {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 1250px;
margin: 60px auto 0;
padding: 40px 50px;
border-radius: 24px;
/* Deep Rich Gradient Background */
background: linear-gradient(135deg, var(--brand-dark) 0%, #0d2e36 100%);
box-shadow: 0 20px 50px rgba(10, 31, 36, 0.2);
border: 1px solid rgba(255, 255, 255, 0.08);
position: relative;
overflow: hidden;
}
/* Subtle Animated Shine Effect across the strip */
.premium-stats-strip::before {
content: '';
position: absolute;
top: 0; left: -150%;
width: 50%; height: 100%;
background: linear-gradient(to right, transparent, rgba(255,255,255,0.05), transparent);
transform: skewX(-25deg);
animation: premiumShine 6s infinite;
}
@keyframes premiumShine {
0% { left: -150%; }
20% { left: 200%; }
100% { left: 200%; }
}
.premium-stat-box {
display: flex;
align-items: center;
gap: 20px;
flex: 1;
position: relative;
}
/* Add subtle dividers between items, except the last one */
.premium-stat-box:not(:last-child)::after {
content: '';
position: absolute;
right: 20px;
top: 10%;
height: 80%;
width: 1px;
background: rgba(255, 255, 255, 0.1);
}
.p-stat-icon {
width: 60px;
height: 60px;
border-radius: 16px;
background: rgba(19, 201, 167, 0.15); /* Glowing Teal Background */
color: var(--brand-green);
display: flex;
justify-content: center;
align-items: center;
font-size: 26px;
box-shadow: inset 0 0 10px rgba(19, 201, 167, 0.1);
}
.p-stat-data {
display: flex;
flex-direction: column;
}
.p-stat-value {
display: flex;
align-items: baseline;
gap: 2px;
}
.p-stat-value .stat-number {
font-size: 42px;
font-weight: 800;
color: #ffffff;
line-height: 1;
letter-spacing: -1px;
}
.p-stat-value .p-plus {
font-size: 28px;
font-weight: 800;
color: var(--brand-green);
}
.p-stat-data p {
font-size: 13px;
color: rgba(255, 255, 255, 0.7); /* Professional muted gray/white */
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
margin-top: 6px;
}
/* Mobile Breakpoints */
@media (max-width: 1024px) {
.premium-stats-strip {
padding: 30px;
}
.p-stat-value .stat-number { font-size: 36px; }
.p-stat-icon { width: 50px; height: 50px; font-size: 22px; }
}
@media (max-width: 768px) {
.premium-stats-strip {
flex-wrap: wrap;
gap: 30px 10px;
padding: 30px 20px;
}
.premium-stat-box {
flex: 1 1 calc(50% - 10px); /* 2x2 Grid on Mobile */
}
.premium-stat-box:not(:last-child)::after {
display: none; /* Hide dividers on mobile for a cleaner look */
}
.p-stat-data p {
font-size: 11px;
}
}
@media (max-width: 480px) {
.premium-stat-box {
flex: 1 1 100%; /* Stacks vertically on very small screens */
justify-content: flex-start;
padding-left: 10%;
}
}
/* ==========================================================================
MOBILE HERO BANNER OVERRIDE
========================================================================== */
@media (max-width: 768px) {
/* Hide the interactive hotspots and floating cards on mobile */
.hero-hotspot,
.hover-card {
display: none !important;
}
/* Set the hero banner to display properly without interactions */
.hero-banner {
/* You can adjust the height for mobile here if needed */
height: 50vh !important;
min-height: 350px;
background-position: center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
}
/* ==========================================================================
ULTRA-PREMIUM MISSION & VISION GRID
========================================================================== */
.mv-premium-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
max-width: 1250px;
margin: 0 auto;
padding-top: 20px;
/* Extra padding at the bottom to account for the shifted cards */
padding-bottom: 60px;
}
/* Base Card Styling */
.mv-premium-card {
position: relative;
padding: 50px 40px 40px;
border-radius: 24px;
background: #ffffff;
border: 1px solid rgba(0,0,0,0.04);
border-top: 4px solid transparent; /* Hidden top border for hover effect */
transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
z-index: 1;
overflow: hidden;
box-shadow: var(--shadow-sm);
}
/* Hover Physics */
.mv-premium-card:hover {
box-shadow: 0 25px 50px rgba(19, 201, 167, 0.12);
border-top-color: var(--brand-green); /* Green line appears at top */
}
/* The Cascading "Stair-Step" Effect (Desktop Only) */
@media (min-width: 992px) {
.shifted-card-1 { transform: translateY(30px); }
.shifted-card-2 { transform: translateY(60px); }
/* Ensure the cards still 'lift' properly when hovered, overriding the shift */
.mv-premium-card:nth-child(1):hover { transform: translateY(-15px); }
.shifted-card-1:hover { transform: translateY(15px); }
.shifted-card-2:hover { transform: translateY(45px); }
}
/* Giant Background Watermark Icon */
.mv-watermark {
position: absolute;
bottom: -20px;
right: -20px;
font-size: 150px;
color: rgba(19, 201, 167, 0.04);
z-index: -1;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), color 0.6s;
}
/* Animate the watermark subtly on hover */
.mv-premium-card:hover .mv-watermark {
transform: scale(1.1) rotate(-15deg);
color: rgba(19, 201, 167, 0.08);
}
/* The Icon Box */
.mv-icon-wrapper {
width: 70px;
height: 70px;
border-radius: 20px;
background: rgba(19, 201, 167, 0.1);
color: var(--brand-green);
display: flex;
justify-content: center;
align-items: center;
font-size: 28px;
margin-bottom: 25px;
position: relative;
transition: all 0.4s ease;
}
/* Hidden dashed ring that appears on hover */
.mv-icon-wrapper::after {
content: '';
position: absolute;
inset: -6px;
border: 2px dashed var(--brand-green);
border-radius: 24px;
opacity: 0;
transition: all 0.4s ease;
}
/* Fill the icon box with color on hover */
.mv-premium-card:hover .mv-icon-wrapper {
background: var(--brand-green);
color: #ffffff;
transform: scale(1.05);
}
/* Reveal and spin the dashed ring on hover */
.mv-premium-card:hover .mv-icon-wrapper::after {
opacity: 1;
animation: rotateDashedRing 12s linear infinite;
}
@keyframes rotateDashedRing {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Typography Overrides */
.mv-premium-card h3 {
font-size: 24px;
font-weight: 800;
color: var(--brand-dark);
margin-bottom: 15px;
}
.mv-premium-card p {
font-size: 15px;
color: #6c7a89;
line-height: 1.7;
}
/* Mobile Breakpoints */
@media (max-width: 991px) {
.mv-premium-grid {
grid-template-columns: 1fr;
gap: 25px;
padding-bottom: 0; /* Remove extra bottom padding on mobile */
}
.mv-premium-card {
padding: 35px 30px;
}
.mv-premium-card:hover {
transform: translateY(-8px); /* Less aggressive lift on mobile */
}
}
/* ─── BLOG GRID LAYOUT ─── */
.blog-grid {
display: grid;
/* This creates a responsive grid that automatically adjusts columns based on screen size */
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 30px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
/* ─── CARD WRAPPER (CLICKABLE AREA) ─── */
.blog-card-link-wrapper {
text-decoration: none !important;
color: inherit;
display: block;
border-radius: 12px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%; /* Forces all cards in a row to be the same height */
}
.blog-card-link-wrapper:hover {
transform: translateY(-5px);
box-shadow: 0 12px 25px rgba(0, 128, 128, 0.15); /* Teal glow */
}
/* ─── CARD STRUCTURE ─── */
.blog-card {
background: #ffffff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,0,0,0.06);
height: 100%;
display: flex;
flex-direction: column;
}
/* Slider Wrapper Layout */
.blog-slider-wrapper {
position: relative;
max-width: 1250px;
margin: 40px auto 0;
padding: 0 50px; /* Space for the navigation arrows */
}
/* Hides the overflow so only the active cards show */
.blog-slider-viewport {
overflow: hidden;
width: 100%;
}
/* The horizontal track that actually moves */
.blog-slider-track {
display: flex;
gap: 20px;
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
/* Ensures the track items align properly without stretching */
align-items: stretch;
}
/* Forces the injected blog cards to have a specific width */
.blog-slider-track > * {
/* Shows 3 cards at a time on desktop */
flex: 0 0 calc(33.333% - 14px);
box-sizing: border-box;
}
/* Slider Navigation Buttons */
.blog-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 45px;
height: 45px;
border-radius: 50%;
background: #ffffff;
border: 1px solid #cbd5e1;
color: var(--primary-blue, #0056b3);
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
transition: all 0.3s ease;
z-index: 10;
}
.blog-nav-btn:hover {
background: var(--primary-blue, #0056b3);
color: #ffffff;
border-color: var(--primary-blue, #0056b3);
}
.blog-nav-btn.prev { left: 0; }
.blog-nav-btn.next { right: 0; }
/* Responsive adjustments */
@media (max-width: 991px) {
/* Shows 2 cards on Tablets */
.blog-slider-track > * { flex: 0 0 calc(50% - 10px); }
.blog-slider-wrapper { padding: 0 40px; }
}
@media (max-width: 767px) {
/* Shows 1 card on Mobile */
.blog-slider-track > * { flex: 0 0 100%; }
.blog-slider-wrapper { padding: 0 35px; }
}
/* ─── IMAGE FIX ─── */
.card-img-container {
position: relative;
height: 220px; /* Fixed height for uniformity */
width: 100%;
background-color: #f8f9fa; /* Light grey placeholder background */
}
.card-img-container img {
width: 100%;
height: 100%;
object-fit: cover; /* Prevents images from stretching or breaking layout */
display: block;
}
.category-badge {
position: absolute;
top: 15px;
left: 15px;
background: #008080;
color: white;
padding: 6px 14px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
z-index: 2;
}
/* ─── TEXT CONTENT & ALIGNMENT ─── */
.card-text-content {
padding: 24px;
display: flex;
flex-direction: column;
flex-grow: 1; /* Pushes the 'Read More' link to the absolute bottom */
}
.card-meta {
font-size: 0.85rem;
color: #6c757d;
margin-bottom: 12px;
display: flex;
gap: 15px;
}
.card-title {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.4;
margin-bottom: 10px;
color: #1a1a1a;
transition: color 0.3s ease;
}
.blog-card-link-wrapper:hover .card-title {
color: #008080;
}
.card-excerpt {
font-size: 0.95rem;
color: #555;
line-height: 1.6;
margin-bottom: 20px;
/* Truncates text after 3 lines if it gets too long */
display: -webkit-box;
line-clamp: 3;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ─── READ MORE BUTTON FIX ─── */
.pseudo-read-more {
margin-top: auto; /* Aligns to bottom */
font-weight: 600;
font-size: 0.9rem;
color: #008080;
display: flex;
align-items: center;
gap: 8px;
}
.pseudo-read-more i {
transition: transform 0.3s ease;
}
.blog-card-link-wrapper:hover .pseudo-read-more i {
transform: translateX(6px);
}
/* ==========================================================================
YOUTUBE VIDEO GALLERY & POP-UP
========================================================================== */
.video-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
max-width: 1250px;
margin: 0 auto;
}
.video-card {
border-radius: 20px;
overflow: hidden;
background: #fff;
border: 1px solid rgba(0,0,0,0.05);
cursor: pointer;
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.video-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(231, 76, 60, 0.15); /* Red shadow for YouTube */
}
.video-thumbnail-wrap {
position: relative;
width: 100%;
height: 220px;
}
.video-thumbnail {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.8);
transition: filter 0.4s;
}
.video-card:hover .video-thumbnail {
filter: brightness(0.6);
}
.video-play-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 60px;
color: #fff;
opacity: 0.9;
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
}
.video-card:hover .video-play-overlay {
color: #13c9a7; /* YouTube Red */
transform: translate(-50%, -50%) scale(1.15);
opacity: 1;
}
.video-info {
padding: 20px 25px;
}
.video-info h3 {
font-size: 18px;
color: var(--brand-dark);
font-weight: 700;
margin-bottom: 8px;
line-height: 1.3;
}
.video-info p {
font-size: 14px;
color: #6c7a89;
}
/* Video Pop-up Modal */
.video-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 100000;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: 0.3s ease;
padding: 20px;
}
.video-modal-overlay.active {
opacity: 1;
visibility: visible;
}
.video-modal-container {
width: 100%;
max-width: 900px;
position: relative;
transform: scale(0.95);
transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.video-modal-overlay.active .video-modal-container {
transform: scale(1);
}
.close-video-btn {
position: absolute;
top: -40px;
right: 0;
background: none;
border: none;
color: #fff;
font-size: 30px;
cursor: pointer;
transition: color 0.3s;
}
.close-video-btn:hover {
color: #e74c3c;
}
.iframe-wrapper {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
background: #000;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.iframe-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
/* ==========================================================================
VIDEO POP-UP MODAL (CINEMATIC)
========================================================================== */
/* The dark blurred background overlay */
.video-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 9999; /* Ensures it sits on top of EVERYTHING including navbars */
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
}
/* When JS adds the .active class, the modal fades in */
.video-modal-overlay.active {
opacity: 1;
pointer-events: all;
}
/* The box holding the video */
.video-modal-container {
width: 90%;
max-width: 1000px; /* Max size for ultra-wide monitors */
position: relative;
transform: scale(0.95);
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.video-modal-overlay.active .video-modal-container {
transform: scale(1); /* Smooth zoom-in effect */
}
/* Forces perfect 16:9 Widescreen Ratio */
.iframe-wrapper {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
background: #000;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 25px 50px rgba(0,0,0,0.5);
border: 1px solid rgba(255,255,255,0.1);
}
.iframe-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
/* The X Button */
.close-video-btn {
position: absolute;
top: -45px;
right: 0;
background: transparent;
color: #fff;
border: none;
font-size: 32px;
cursor: pointer;
transition: color 0.3s, transform 0.3s ease;
}
.close-video-btn:hover {
color: var(--brand-green);
transform: rotate(90deg); /* Playful spin on hover */
}
/* ==========================================================================
VIEW MORE (OUTLINE) BUTTONS
========================================================================== */
.btn-outline-primary {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 40px;
border: 2px solid var(--brand-green);
color: var(--brand-dark);
border-radius: 50px;
font-size: 16px;
font-weight: 700;
text-decoration: none;
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
background: transparent;
}
.btn-outline-primary i {
transition: transform 0.3s ease;
}
.btn-outline-primary:hover {
background: var(--brand-green);
color: #fff;
transform: translateY(-4px);
box-shadow: 0 15px 30px rgba(19, 201, 167, 0.2);
}
.btn-outline-primary:hover i {
transform: translateX(6px);
}
/* ==========================================================================
COMPACT IMAGE-BASED BLOGS HERO & INTERACTIVE SEARCH
========================================================================== */
.blogs-hero {
position: relative;
width: 100%;
/* Reduced padding to make the block smaller and more compact */
padding: 150px 5% 50px;
/* High-quality medical/research background image */
background-image: url('https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?auto=format&fit=crop&w=1920&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed; /* Creates a premium parallax scrolling effect */
text-align: center;
overflow: hidden;
z-index: 1;
}
/* Deep glassmorphism overlay to make the white text and search bar pop */
.blogs-hero::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(10, 31, 36, 0.92) 0%, rgba(19, 201, 167, 0.4) 100%);
z-index: -1;
}
/* Subtle Medical Grid Overlay over the image for a modern tech feel */
.blogs-hero::after {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 40px 40px;
z-index: -1;
opacity: 0.6;
}
.blogs-hero-content {
position: relative;
z-index: 5;
}
/* ─── SLEEK GLASS SEARCH BAR ─── */
.blog-search-dock {
display: flex;
align-items: center;
max-width: 650px;
margin: 30px auto 0;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50px;
padding: 8px 8px 8px 30px;
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}
.blog-search-dock:focus-within {
box-shadow: 0 0 30px rgba(19, 201, 167, 0.4), 0 15px 35px rgba(0,0,0,0.3);
border-color: rgba(19, 201, 167, 0.8);
transform: translateY(-3px) scale(1.02);
background: rgba(255, 255, 255, 0.15);
}
.blog-search-input {
flex: 1;
background: transparent;
border: none;
color: #fff;
font-size: 16px;
outline: none;
font-family: var(--font-main);
}
.blog-search-input::placeholder {
color: rgba(255, 255, 255, 0.6);
font-weight: 400;
}
.blog-search-btn {
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--brand-green);
color: #fff;
border: none;
font-size: 18px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
}
.blog-search-btn:hover {
transform: scale(1.08) rotate(5deg);
box-shadow: 0 5px 15px rgba(19, 201, 167, 0.4);
}
/* ─── APPLE-STYLE CATEGORY FILTER DOCK ─── */
.blog-filters {
display: inline-flex;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 40px; /* Reduced margin to keep section compact */
position: relative;
z-index: 5;
background: rgba(0, 0, 0, 0.4);
padding: 8px;
border-radius: 50px;
border: 1px solid rgba(255,255,255,0.1);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
}
.filter-pill {
padding: 10px 24px;
border-radius: 50px;
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.7);
font-family: var(--font-main);
font-weight: 600;
font-size: 14px;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.4s ease;
}
.filter-pill:hover {
color: #fff;
}
.filter-pill.active {
background: #fff;
color: var(--brand-dark);
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
/* ─── MOBILE RESPONSIVENESS ─── */
@media (max-width: 768px) {
.blogs-hero {
padding: 120px 5% 40px; /* Even smaller on mobile */
background-attachment: scroll; /* Disables parallax on mobile for better performance */
}
.blog-search-dock {
padding: 6px 6px 6px 20px;
margin-top: 25px;
}
.blog-search-btn {
width: 45px;
height: 45px;
font-size: 16px;
}
.blog-filters {
display: flex;
justify-content: flex-start;
flex-wrap: nowrap;
overflow-x: auto;
padding: 8px;
margin: 30px 5% 0;
border-radius: 20px;
scrollbar-width: none;
-ms-overflow-style: none;
}
.blog-filters::-webkit-scrollbar {
display: none;
}
.filter-pill {
padding: 10px 20px;
font-size: 13px;
white-space: nowrap;
}
}
/* ==========================================================================
MOBILE HERO BANNER FIX (PREVENT IMAGE CROPPING)
========================================================================== */
@media (max-width: 768px) {
.hero-banner {
/* Forces the entire image to fit inside the container without cutting */
background-size: contain !important;
background-position: top center !important;
background-repeat: no-repeat !important;
/* Adjust height to match the image aspect ratio so there's no empty space */
height: 50vw !important;
min-height: 250px !important;
}
}
@media (max-width: 768px) {
.hero-banner {
/* Keeps the image full width but centers it perfectly */
background-size: cover !important;
background-position: center center !important;
/* Gives it a standard mobile height */
height: 60vh !important;
min-height: 350px !important;
}
}
/* ==========================================================================
MIMS PALWAL - COMPLETE ZERO-LAG CINEMATIC UI (2026)
========================================================================== */
/* ─── 1. AMBIENT BACKGROUND & SCROLL ANIMATIONS ─── */
.immersive-body { background-color: #f0f4f8; position: relative; }
.ambient-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; transform: translateZ(0); }
.glow-orb { position: absolute; border-radius: 50%; animation: floatOrb 25s infinite alternate ease-in-out; transform: translateZ(0); will-change: transform; }
.orb-teal { width: 600px; height: 600px; background: radial-gradient(circle, rgba(19, 201, 167, 0.25) 0%, transparent 60%); top: -100px; left: -100px; }
.orb-blue { width: 700px; height: 700px; background: radial-gradient(circle, rgba(30, 58, 138, 0.25) 0%, transparent 60%); bottom: -200px; right: -100px; animation-delay: -5s; }
.orb-green { width: 500px; height: 500px; background: radial-gradient(circle, rgba(52, 211, 153, 0.25) 0%, transparent 60%); top: 40%; left: 50%; animation-delay: -10s; }
@keyframes floatOrb { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(150px, 100px, 0) scale(1.2); } }
/* Universal Scroll Reveal Classes */
.reveal-up, .fade-up { opacity: 0; transform: translateY(40px) translateZ(0); transition: opacity 0.8s ease, transform 0.8s ease; will-change: opacity, transform; }
.reveal-up.active, .fade-up.active { opacity: 1; transform: translateY(0) translateZ(0); }
.delay-1 { transition-delay: 0.1s; } .delay-2 { transition-delay: 0.2s; } .delay-3 { transition-delay: 0.3s; }
/* ─── 2. CINEMATIC HERO & MARQUEE ─── */
.cinematic-hero {
position: absolute;
width: 100%;
min-height: 85vh;
display: flex;
align-items: center;
padding: 0 5%;
overflow: hidden;
}
.hero-bg-layer {
position: absolute;
inset: 0;
background-size: cover;
background-position: center 50%;
transform: scale(1.05) translateZ(0);
}
.hero-vignette {
position: absolute;
inset: 0;
background: radial-gradient(circle at center, transparent 20%, rgba(10,31,36,0.85) 100%), linear-gradient(to right, rgba(10,31,36,0.9) 0%, rgba(10,31,36,0.2) 60%, transparent 100%);
}
.ch-container {
max-width: 1300px;
width: 100%;
margin: 80px auto 0;
position: relative;
z-index: 5;
}
.ch-glass-panel {
padding: 10px 50px;
max-width: 450px;
transform: translateZ(0);
}
.ch-title {
font-size: 60px;
font-weight: 900;
line-height: 1.05;
color: #fff;
margin-bottom: 30px;
letter-spacing: -2px;
}
.ch-desc {
font-size: 17px;
color: rgba(255,255,255,0.85);
line-height: 1.7;
margin-bottom: 80px;
}
.ch-actions {
display: flex;
gap: 15px;
margin-bottom: 15px;
}
.ch-stats {
display: flex;
gap: 50px;
border-top: 1px solid rgba(255,255,255,0.2);
padding-top: 30px; /* Fixed negative padding here to a positive value */
}
.ch-stat strong {
display: block;
font-size: 32px;
font-weight: 800;
color: var(--brand-green);
}
.ch-stat span {
font-size: 13px;
color: rgba(255,255,255,0.7);
text-transform: uppercase;
}
/* MARQUEE */
.premium-ticker {
background: var(--brand-dark);
color: #fff;
padding: 15px 0;
overflow: hidden;
position: relative;
z-index: 10;
}
.ticker-track {
display: flex;
width: max-content;
animation: scrollTicker 30s linear infinite;
transform: translateZ(0);
will-change: transform;
}
.ticker-track span {
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
margin: 0 40px;
display: flex;
align-items: center;
gap: 10px;
}
.ticker-track span i {
color: var(--brand-green);
font-size: 12px;
}
@keyframes scrollTicker {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-50%, 0, 0); }
}
/* ==========================================================================
MOBILE RESPONSIVENESS OVERRIDES
========================================================================== */
@media (max-width: 768px) {
.cinematic-hero {
position: relative; /* Absolute heroes can break on mobile if content overflows */
min-height: auto;
padding: 120px 5% 60px; /* Extra top padding to clear mobile headers */
}
.ch-glass-panel {
padding: 20px 15px; /* Reduced from 50px to save screen real estate */
max-width: 100%;
}
.ch-title {
font-size: 42px; /* Scaled down for smaller screens */
margin-bottom: 20px;
}
.ch-desc {
font-size: 15px;
margin-bottom: 40px; /* Reduced gap */
}
.ch-actions {
flex-direction: column; /* Stack buttons vertically */
width: 100%;
}
.ch-actions a {
text-align: center;
width: 100%;
justify-content: center;
}
.ch-stats {
gap: 25px; /* Reduced from 50px */
flex-wrap: wrap; /* Allows stats to drop to the next line if needed */
justify-content: space-between;
}
.ch-stat {
flex: 1 1 45%; /* Creates a neat 2-column grid for the stats on mobile */
}
.ch-stat strong {
font-size: 26px;
}
/* Marquee Adjustments */
.premium-ticker {
padding: 10px 0;
}
.ticker-track span {
font-size: 13px;
margin: 0 20px; /* Reduced margin to keep more items on screen */
}
}
@media (max-width: 480px) {
.ch-title {
font-size: 34px;
}
}
/* ==========================================================================
TEXT-OVER-IMAGE PROFESSIONAL SLIDER
========================================================================== */
.pro-slider-wrapper {
position: relative;
max-width: 1300px;
margin: 40px auto 0;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
background: #000;
}
.pro-slider-track {
display: flex;
overflow-x: auto;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
-ms-overflow-style: none;
scrollbar-width: none;
}
.pro-slider-track::-webkit-scrollbar { display: none; }
/* ─── SLIDE STYLING ─── */
.pro-slide {
position: relative;
width: 100%;
flex-shrink: 0;
scroll-snap-align: center;
overflow: hidden;
height: 600px; /* Cinematic height */
}
/* ─── BACKGROUND IMAGE & LIVE ANIMATION ─── */
.pro-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
animation: liveKenBurns 25s infinite alternate ease-in-out;
will-change: transform;
}
@keyframes liveKenBurns {
0% { transform: scale(1) translate(0, 0); }
50% { transform: scale(1.08) translate(-1.5%, 1.5%); }
100% { transform: scale(1.05) translate(1.5%, -1.5%); }
}
/* ─── CORPORATE OVERLAY & TEXT (LEFT-MID ALIGNED) ─── */
.pro-slide-overlay {
position: absolute;
inset: 0;
/* Changed gradient to darken the left side instead of the bottom */
background: linear-gradient(to right, rgba(10, 31, 36, 0.95) 0%, rgba(10, 31, 36, 0.4) 55%, transparent 100%);
display: flex;
flex-direction: column;
justify-content: center; /* This moves the text vertically to the middle */
padding: 0 80px; /* Adjusts padding for middle alignment */
}
.pro-slide-content {
max-width: 700px; /* Slightly narrower so it doesn't cross into the bright side of the image */
transform: translateX(-30px); /* Slides in from the left */
opacity: 0;
transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.pro-slide.active-slide .pro-slide-content {
transform: translateX(0); /* Settles perfectly in place */
opacity: 1;
}
.pro-slide-content h4 {
color: #ffffff;
font-size: 38px;
font-weight: 800;
margin-bottom: 15px;
letter-spacing: -0.5px;
line-height: 1.2;
}
.pro-slide-content p {
color: rgba(255, 255, 255, 0.85);
font-size: 16px;
line-height: 1.7;
margin-bottom: 30px;
}
/* ─── DOTS & ARROWS (ADJUSTED FOR LEFT ALIGNMENT) ─── */
.pro-slider-dots {
position: absolute;
bottom: 40px;
left: 80px; /* Aligns the dots perfectly with the left-side text */
width: auto;
display: flex;
gap: 10px;
z-index: 10;
}
/* Mobile Adjustments for Left-Mid layout */
@media (max-width: 768px) {
.pro-slide { height: 500px; }
.pro-slide-overlay {
padding: 0 30px;
/* On mobile, we make the gradient cover more area so text stays readable */
background: linear-gradient(to right, rgba(10, 31, 36, 0.95) 0%, rgba(10, 31, 36, 0.7) 80%, transparent 100%);
}
.pro-slide-content h4 { font-size: 28px; }
.pro-slider-dots { left: 30px; bottom: 25px; } /* Aligns dots to mobile padding */
}
/* High-Tech Viewfinder Corners */
.tech-corner { position: absolute; width: 40px; height: 40px; border: 3px solid rgba(255,255,255,0.6); z-index: 3; transition: all 0.5s ease; }
.tech-corner.top-left { top: 30px; left: 30px; border-right: none; border-bottom: none; }
.tech-corner.bottom-right { bottom: 30px; right: 30px; border-left: none; border-top: none; }
.robotic-card:hover .tech-corner { width: 60px; height: 60px; border-color: var(--brand-green); }
.has-bg-img .bento-content { position: relative; z-index: 2; color: #fff; height: 100%; display: flex; flex-direction: column; }
.has-bg-img h3 { color: #fff; font-size: 38px; font-weight: 800; margin-bottom: 12px; letter-spacing: -1px; }
.has-bg-img p { color: rgba(255,255,255,0.85); font-size: 16px; max-width: 85%; line-height: 1.6; }
/* -- Icon Boxes -- */
.icon-glow-box {
width: 65px; height: 65px; border-radius: 20px; display: flex; justify-content: center; align-items: center;
font-size: 26px; margin-bottom: auto; position: relative; z-index: 2; transition: all 0.4s ease; transform: translateZ(0);
}
.dark-mode { background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(10px); }
.light-mode { background: #fff; color: var(--brand-green); box-shadow: 0 15px 30px rgba(19,201,167,0.15); }
.bento-item:hover .icon-glow-box { transform: scale(1.1) rotate(5deg); }
/* -- Interactive Glass Cards (The Upgrade) -- */
.interactive-card {
background: rgba(255, 255, 255, 0.7) !important;
border: 1px solid rgba(255,255,255,0.9) !important;
box-shadow: inset 0 0 20px rgba(255,255,255,0.5), 0 15px 35px rgba(0,0,0,0.03);
}
.interactive-card .bento-content { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; }
.card-text-wrap h3 { font-size: 22px; font-weight: 800; color: var(--brand-dark); margin-bottom: 8px; }
.card-text-wrap p { font-size: 15px; color: #64748b; line-height: 1.5; margin: 0; }
/* Internal Glowing Orbs */
.card-ambient-glow {
position: absolute; bottom: -50px; right: -50px; width: 150px; height: 150px;
border-radius: 50%; filter: blur(40px); z-index: 1; opacity: 0.5;
transition: all 0.6s ease; transform: translateZ(0);
}
.glow-blue { background: #3b82f6; }
.glow-green { background: #10b981; }
.interactive-card:hover .card-ambient-glow { transform: scale(1.5); opacity: 0.8; }
/* Slide-in Arrow */
.card-slide-arrow {
position: absolute; bottom: 0; right: 0; width: 45px; height: 45px;
background: var(--brand-green); color: #fff; border-radius: 50%;
display: flex; justify-content: center; align-items: center; font-size: 18px;
opacity: 0; transform: translate(20px, 20px); transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.interactive-card:hover .card-slide-arrow { opacity: 1; transform: translate(0, 0); box-shadow: 0 10px 20px rgba(19,201,167,0.4); }
/* -- Emergency Wide Card -- */
.emergency-card { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); color: #fff; justify-content: center; position: relative; }
.ekg-bg-line {
position: absolute; inset: 0; z-index: 1; opacity: 0.1;
background-image: url('data:image/svg+xml;utf8,');
background-size: 200px 200px; animation: slideEKG 5s linear infinite;
}
@keyframes slideEKG { from { background-position: 0 0; } to { background-position: 200px 0; } }
.emergency-badge { display: inline-block; background: rgba(231,76,60,0.15); color: #ff4d4d; padding: 6px 14px; border-radius: 50px; font-size: 13px; font-weight: 700; text-transform: uppercase; margin-bottom: 18px; border: 1px solid rgba(231,76,60,0.3); }
.emergency-card h3 { font-size: 28px; font-weight: 800; margin-bottom: 8px;}
.emergency-card p { color: rgba(255,255,255,0.7); font-size: 15px; margin: 0;}
.flex-row { display: flex; justify-content: space-between; align-items: center; width: 100%; position: relative; z-index: 2; }
.emergency-pulse-ring { width: 75px; height: 75px; border-radius: 50%; background: #e74c3c; color: #fff; display: flex; justify-content: center; align-items: center; font-size: 26px; box-shadow: 0 0 0 0 rgba(231,76,60,0.6); animation: pulseRed 2s infinite; transition: transform 0.3s; transform: translateZ(0); }
.emergency-pulse-ring:hover { transform: scale(1.1); background: #ff3333; }
/* ─── 4. ULTRA-GLASSMORPHISM (Applies to Doctors, COEs, Videos) ─── */
.ultra-glass-card {
background: rgba(255, 255, 255, 0.6) !important;
backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important;
border: 1px solid rgba(255,255,255,0.8) !important;
box-shadow: 0 15px 35px rgba(0,0,0,0.03); transform: translateZ(0);
}
.ultra-glass-card:hover {
background: rgba(255, 255, 255, 0.85) !important;
border-color: #fff !important;
box-shadow: 0 25px 50px rgba(19, 201, 167, 0.15);
}
/* ─── 5. DOCTORS ─── */
.elite-doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; max-width: 1200px; margin: 40px auto 0; padding: 0 5%; }
.elite-doc-card { padding: 0 !important; border-radius: 54px; overflow: hidden; display: flex; flex-direction: column; }
.doc-img-wrapper { position: relative; height: 320px; width: 100%; overflow: hidden; background: #e2e8f0; }
.doc-img-wrapper img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.6s ease; display: block; }
.elite-doc-card:hover .doc-img-wrapper img { transform: scale(1.08); }
.doc-badge { position: absolute; bottom: 15px; left: 15px; background: rgba(10,31,36,0.85); backdrop-filter: blur(10px); color: var(--brand-green); padding: 6px 15px; border-radius: 50px; font-size: 12px; font-weight: 700; text-transform: uppercase; border: 1px solid rgba(19,201,167,0.3); }
.doc-info { padding: 30px 25px; flex-grow: 1; display: flex; flex-direction: column; }
.doc-info h3 { font-size: 22px; font-weight: 800; color: var(--brand-dark); margin-bottom: 5px; }
.doc-degree { font-size: 13px; color: #64748b; margin-bottom: 15px; font-weight: 600; }
.doc-exp { font-size: 14px; color: var(--brand-green); font-weight: 600; margin-bottom: 25px; }
.doc-book-btn { margin-top: auto; display: flex; justify-content: space-between; align-items: center; background: rgba(19,201,167,0.1); color: var(--brand-green); padding: 14px 20px; border-radius: 12px; font-weight: 700; font-size: 14px; text-decoration: none; transition: all 0.3s ease; }
.elite-doc-card:hover .doc-book-btn { background: var(--brand-green); color: #fff; box-shadow: 0 10px 20px rgba(19,201,167,0.3); }
/* ─── 6. CENTRES OF EXCELLENCE ─── */
.coe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; max-width: 1300px; margin: 0 auto; position: relative; z-index: 2; padding: 0 5%; }
.coe-card { position: relative; border-radius: 24px; padding: 30px 25px; text-decoration: none; display: flex; flex-direction: column; transition: transform 0.4s ease; transform: translateZ(0); }
.coe-card:hover { transform: translateY(-5px); }
.coe-icon-box { width: 65px; height: 65px; border-radius: 18px; background: rgba(19,201,167,0.1); display: flex; justify-content: center; align-items: center; margin-bottom: 20px; transition: all 0.4s ease; }
.coe-card:hover .coe-icon-box { background: var(--brand-green); transform: scale(1.05); box-shadow: 0 10px 20px rgba(19,201,167,0.3); }
.live-icon { width: 35px; height: auto; transition: all 0.4s ease; transform: translateZ(0); will-change: transform, filter; }
.coe-card:hover .live-icon { filter: brightness(0) invert(1); animation: liveFloat 2s ease-in-out infinite; }
.coe-card h3 { font-size: 19px; font-weight: 700; color: var(--brand-dark); margin-bottom: 10px; transition: color 0.3s; }
.coe-card:hover h3 { color: var(--brand-green); }
.coe-card p { font-size: 14px; color: #6c7a89; line-height: 1.6; margin-bottom: 20px; flex-grow: 1; }
.coe-arrow { font-size: 18px; color: var(--brand-green); opacity: 0; transform: translateX(-15px); transition: all 0.4s ease; }
.coe-card:hover .coe-arrow { opacity: 1; transform: translateX(0); }
/* ─── 7. RECOVERY VIDEOS ─── */
.recovery-video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto; padding: 0 5%; }
.recovery-video-card { padding: 0 !important; cursor: pointer; border-radius: 24px; overflow: hidden; }
.rv-thumb-box { position: relative; height: 260px; width: 100%; overflow: hidden; background: #000; }
.rv-thumb { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.8; transition: all 0.5s ease; }
.recovery-video-card:hover .rv-thumb { transform: scale(1.05); opacity: 0.5; }
.rv-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 65px; height: 65px; background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); border: 2px solid #fff; border-radius: 50%; color: #fff; display: flex; justify-content: center; align-items: center; font-size: 22px; padding-left: 4px; transition: all 0.4s ease; }
.recovery-video-card:hover .rv-play-btn { background: #ff0000; border-color: #ff0000; transform: translate(-50%, -50%) scale(1.15); box-shadow: 0 10px 30px rgba(255,0,0,0.5); }
.rv-info { padding: 25px; }
.rv-info h4 { font-size: 20px; font-weight: 800; color: var(--brand-dark); margin-bottom: 8px; transition: color 0.3s;}
.recovery-video-card:hover h4 { color: var(--brand-green); }
.rv-info p { font-size: 14px; color: #64748b; margin: 0; line-height: 1.6;}
/* ─── 9. FLOATING MAP ─── */
.floating-map-section { position: relative; width: 100%; height: 60vh; min-height: 500px; margin-top: 60px; z-index: 2; transform: translateZ(0); }
.map-background { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-background iframe { width: 100%; height: 100%; filter: grayscale(0.1) contrast(1.05); }
.map-contact-card { position: absolute; top: 50%; left: 8%; transform: translate3d(0, -50%, 0); padding: 40px; border-radius: 32px; width: 100%; max-width: 400px; }
/* ─── 10. VIDEO MODAL POPUP ─── */
.video-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); backdrop-filter: blur(10px); z-index: 9999; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
.video-modal-overlay.active { opacity: 1; pointer-events: all; }
.video-modal-container { width: 90%; max-width: 1000px; position: relative; transform: scale(0.95); transition: transform 0.4s ease; }
.video-modal-overlay.active .video-modal-container { transform: scale(1); }
.iframe-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; background: #000; border-radius: 16px; overflow: hidden; box-shadow: 0 25px 50px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); }
.iframe-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.close-video-btn { position: absolute; top: -45px; right: 0; background: transparent; color: #fff; border: none; font-size: 32px; cursor: pointer; transition: all 0.3s; }
.close-video-btn:hover { color: var(--brand-green); transform: rotate(90deg); }
/* ─── 11. MOBILE RESPONSIVENESS ─── */
@media (max-width: 1024px) {
.ch-title { font-size: 55px; }
.bento-premium-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; }
.item-large { grid-column: span 2; }
}
@media (max-width: 768px) {
.cinematic-hero { min-height: auto; padding: 120px 5% 60px; }
.hero-vignette { background: rgba(10,31,36,0.7); }
.ch-glass-panel { padding: 30px 20px; border-radius: 24px; text-align: center; }
.ch-title { font-size: 42px; }
.ch-actions { flex-direction: column; }
.ch-stats { justify-content: space-between; gap: 10px; }
.ch-stat strong { font-size: 24px; }
.bento-premium-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
.item-large, .item-wide { grid-column: span 1; grid-row: span 1; }
.has-bg-img { min-height: 350px; }
.bento-item { padding: 25px; border-radius: 24px; }
.has-bg-img h3 { font-size: 28px; }
.emergency-pulse-ring { width: 55px; height: 55px; font-size: 20px; }
.recovery-video-grid { grid-template-columns: 1fr; }
.cinematic-cta-section { padding: 80px 5%; background-attachment: scroll; }
.cta-glass-box { padding: 40px 25px; border-radius: 24px; }
.cta-glass-box h2 { font-size: 36px; }
.cta-buttons { flex-direction: column; display: flex; gap: 15px; }
.cta-buttons a { width: 100%; text-align: center; }
.map-contact-card { left: 5%; right: 5%; max-width: 90%; padding: 30px; transform: translate3d(0, -50%, 0); }
.coe-arrow { opacity: 1; transform: translateX(0); }
}
/* ==========================================================================
ULTRA-PROFESSIONAL CORPORATE MEDIA HUB
========================================================================== */
/* ─── BASE CORPORATE RESET ─── */
.pro-body {
background-color: #f8fafc; /* Crisp, clinical cool-white */
color: #334155;
font-family: 'Plus Jakarta Sans', sans-serif;
-webkit-font-smoothing: antialiased;
}
/* ─── CORPORATE NAVBAR ─── */
.pro-header {
background: #ffffff;
border-bottom: 1px solid #e2e8f0;
padding: 15px 5%;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
}
.nav-wrapper {
max-width: 1350px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-links .active-link {
color: var(--brand-green);
position: relative;
}
.nav-links .active-link::after {
content: ''; position: absolute; left: 0; bottom: -5px;
width: 100%; height: 2px; background: var(--brand-green);
}
/* ─── EXECUTIVE DARK SLATE HERO ─── */
.pro-gallery-hero {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); /* Deep authoritative slate */
padding: 160px 5% 100px;
text-align: center;
position: relative;
overflow: hidden;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 800px;
margin: 0 auto;
}
.pro-kicker {
display: inline-block;
color: #38bdf8; /* Medical Trust Blue */
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 20px;
background: rgba(56, 189, 248, 0.1);
padding: 6px 16px;
border-radius: 50px;
border: 1px solid rgba(56, 189, 248, 0.2);
}
.pro-hero-title {
color: #ffffff;
font-size: 56px;
font-weight: 800;
line-height: 1.1;
letter-spacing: -1px;
margin-bottom: 20px;
}
.pro-hero-desc {
color: #94a3b8;
font-size: 18px;
line-height: 1.6;
}
/* Subtle dot pattern for texture without being distracting */
.pro-hero-pattern {
position: absolute; inset: 0; z-index: 1; opacity: 0.15;
background-image: radial-gradient(#ffffff 1px, transparent 1px);
background-size: 30px 30px;
}
/* ─── ENTERPRISE FILTER BAR ─── */
.pro-filter-section {
max-width: 1350px;
margin: -40px auto 40px; /* Pulls it up to overlap the hero slightly */
padding: 0 5%;
position: relative;
z-index: 5;
}
.pro-filter-bar {
background: #ffffff;
padding: 15px;
border-radius: 16px;
display: flex;
gap: 15px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
border: 1px solid #e2e8f0;
}
.pro-search-wrap, .pro-select-wrap {
position: relative;
flex: 1;
}
.pro-select-wrap { flex: 0.4; } /* Dropdown is slightly smaller than search */
.pro-search-wrap i {
position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
color: #94a3b8; font-size: 16px;
}
.pro-search-wrap input, .pro-select-wrap select {
width: 100%;
background: #f8fafc;
border: 1px solid #cbd5e1;
padding: 14px 20px 14px 45px;
border-radius: 10px;
font-size: 15px;
color: #0f172a;
font-weight: 500;
transition: all 0.2s ease;
outline: none;
}
.pro-select-wrap select { padding: 14px 40px 14px 20px; cursor: pointer; appearance: none; }
.pro-search-wrap input:focus, .pro-select-wrap select:focus {
background: #ffffff;
border-color: var(--brand-green);
box-shadow: 0 0 0 4px rgba(19, 201, 167, 0.1);
}
.pro-arrow {
position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
color: #64748b; font-size: 14px; pointer-events: none;
}
/* ─── STRUCTURED CLINICAL GRID ─── */
.pro-grid-section {
padding: 0 5% 80px;
max-width: 1350px;
margin: 0 auto;
}
.pro-video-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 30px;
}
/* ─── PROFESSIONAL VIDEO CARDS ─── */
/* The CSS classes below use the exact names your JS outputs (.gallery-video-card) */
.gallery-video-card {
background: #ffffff;
border-radius: 16px;
border: 1px solid #e2e8f0;
overflow: hidden;
display: flex;
flex-direction: column;
cursor: pointer;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); /* Extremely subtle, clean shadow */
transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.gallery-video-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
border-color: #cbd5e1;
}
/* Thumbnail Section */
.gv-thumb-box {
position: relative;
width: 100%;
aspect-ratio: 16 / 9; /* Perfect mathematical HD crop */
background: #0f172a;
overflow: hidden;
}
.gv-thumb {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.6s ease, opacity 0.3s;
display: block;
}
.gallery-video-card:hover .gv-thumb { transform: scale(1.05); opacity: 0.8; }
/* Minimalist Clean Play Button */
.gv-play-btn {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 55px; height: 55px;
background: #ffffff;
border-radius: 50%;
display: flex; justify-content: center; align-items: center;
color: var(--brand-dark); font-size: 18px; padding-left: 4px;
box-shadow: 0 10px 15px rgba(0,0,0,0.2);
transition: all 0.3s ease;
}
.gallery-video-card:hover .gv-play-btn {
background: var(--brand-green); color: #ffffff;
transform: translate(-50%, -50%) scale(1.1);
}
/* Information Section */
.gv-info { padding: 25px; display: flex; flex-direction: column; flex-grow: 1; }
.gv-card-badges { display: flex; gap: 8px; margin-bottom: 15px; }
.gv-badge {
background: #f1f5f9; color: #475569;
padding: 4px 10px; border-radius: 6px;
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.5px; border: 1px solid #e2e8f0;
}
.gv-badge.doc-badge { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.gv-info h4 {
font-size: 18px; font-weight: 700; color: #0f172a;
margin-bottom: 10px; line-height: 1.4;
}
.gv-info p {
font-size: 14px; color: #64748b; line-height: 1.6; margin: 0;
display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* ─── NO RESULTS STATE ─── */
.pro-no-results { text-align: center; padding: 60px 20px; background: #ffffff; border: 1px dashed #e2e8f0; border-radius: 16px; color: #64748b; }
.pro-no-results i { font-size: 40px; color: #cbd5e1; margin-bottom: 15px; }
.pro-no-results h3 { font-size: 20px; color: #0f172a; margin-bottom: 5px; font-weight: 700; }
/* ─── FOOTER ─── */
.pro-footer { background: #0f172a; padding: 30px 0; text-align: center; border-top: 4px solid var(--brand-green); }
.pro-footer p { color: #94a3b8; font-size: 14px; margin: 0; }
/* ─── MOBILE RESPONSIVENESS ─── */
@media (max-width: 768px) {
.pro-gallery-hero { padding: 140px 5% 80px; }
.pro-hero-title { font-size: 40px; }
.pro-filter-bar { flex-direction: column; padding: 20px; gap: 15px; }
.pro-select-wrap { width: 100%; }
.pro-grid-section { padding: 0 5% 60px; }
.pro-video-grid { grid-template-columns: 1fr; }
}
/* ==========================================================================
HOVER-TO-PLAY PREVIEW (NETFLIX STYLE)
========================================================================== */
.hover-player {
position: absolute;
top: -20%; /* Scaled up to hide the YouTube title bar */
left: -20%;
width: 140%;
height: 140%;
pointer-events: none; /* Ensures the user can still click the card to open the popup */
z-index: 2;
opacity: 0;
/* Delays the fade-in by 0.4s so it doesn't trigger if the user just swipes their mouse across the screen quickly */
animation: fadeInPreview 0.5s ease 0.4s forwards;
}
@keyframes fadeInPreview {
to { opacity: 1; }
}
/* Hide the thumbnail image slightly when video is playing */
.card-playing .gv-thumb,
.card-playing .rv-thumb {
opacity: 0;
}
/* Hide the white play button when preview is playing */
.card-playing .gv-play-btn,
.card-playing .rv-play-btn {
opacity: 0 !important;
transform: translate(-50%, -50%) scale(0.8) !important;
}
/* ==========================================================================
SPLIT-SCREEN PROFESSIONAL SLIDER
========================================================================== */
.pro-slider-wrapper {
position: relative;
max-width: 1300px;
margin: 40px auto 0;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
background: #0f172a; /* Deep corporate slate background */
}
.pro-slider-track {
display: flex;
overflow-x: auto;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
-ms-overflow-style: none;
scrollbar-width: none;
}
.pro-slider-track::-webkit-scrollbar { display: none; }
/* ─── SPLIT LAYOUT STRUCTURE ─── */
.pro-slide.split-layout {
position: relative;
width: 100%;
flex-shrink: 0;
scroll-snap-align: center;
overflow: hidden;
display: flex;
height: 520px; /* Cinematic widescreen height */
}
/* ─── LEFT PANEL (TEXT & BUTTON) ─── */
.pro-slide-left-panel {
flex: 0 0 42%; /* Takes up 42% of width */
display: flex;
flex-direction: column;
justify-content: center;
padding: 60px 50px;
position: relative;
z-index: 2;
background: #0f172a;
border-right: 3px solid var(--brand-green);
}
.pro-slide-content {
transform: translateX(-30px);
opacity: 0;
transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.pro-slide.active-slide .pro-slide-content {
transform: translateX(0);
opacity: 1;
}
.pro-slide-content h4 {
color: #ffffff;
font-size: 34px;
font-weight: 800;
margin-bottom: 15px;
letter-spacing: -0.5px;
line-height: 1.2;
}
.pro-slide-content p {
color: rgba(255, 255, 255, 0.75);
font-size: 16px;
line-height: 1.7;
margin-bottom: 35px; /* Spacing above the button */
}
/* ─── "VIEW MORE" BUTTON STYLING ─── */
.slide-view-more-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 28px;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50px;
color: #ffffff;
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
width: max-content;
}
.slide-view-more-btn:hover {
background: var(--brand-green);
border-color: var(--brand-green);
box-shadow: 0 8px 20px rgba(19, 201, 167, 0.3);
}
.slide-view-more-btn i {
transition: transform 0.3s ease;
}
.slide-view-more-btn:hover i {
transform: translateX(5px);
}
/* ─── RIGHT PANEL (IMAGE & LIVE ANIMATION) ─── */
.pro-slide-right-panel {
flex: 1;
position: relative;
overflow: hidden;
}
.pro-slide-right-panel img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
animation: liveKenBurns 25s infinite alternate ease-in-out;
will-change: transform;
}
@keyframes liveKenBurns {
0% { transform: scale(1) translate(0, 0); }
50% { transform: scale(1.08) translate(-1.5%, 1.5%); }
100% { transform: scale(1.05) translate(1.5%, -1.5%); }
}
/* ─── LIVE BADGE ─── */
.live-status-badge {
position: absolute;
top: 25px;
right: 30px;
background: rgba(10, 31, 36, 0.6);
backdrop-filter: blur(10px);
color: #ffffff;
padding: 8px 16px;
border-radius: 50px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 8px;
z-index: 5;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.pulse-dot {
width: 8px; height: 8px; background-color: #ff3333; border-radius: 50%;
box-shadow: 0 0 0 0 rgba(255, 51, 51, 0.7);
animation: livePulseRing 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
}
@keyframes livePulseRing { to { box-shadow: 0 0 0 12px rgba(255, 51, 51, 0); } }
/* ─── DOTS & ARROWS ─── */
.pro-nav-btn {
position: absolute; top: 50%; transform: translateY(-50%);
width: 50px; height: 50px; background: rgba(255, 255, 255, 0.9);
border: none; border-radius: 50%; color: var(--brand-dark); font-size: 18px;
cursor: pointer; z-index: 10; display: flex; justify-content: center; align-items: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s; opacity: 0;
}
.pro-slider-wrapper:hover .pro-nav-btn { opacity: 1; }
.pro-nav-btn:hover { background: var(--brand-green); color: #ffffff; }
.prev-btn { left: 20px; } .next-btn { right: 20px; }
.pro-slider-dots {
position: absolute; bottom: 25px; left: 42%; /* Aligns dots under the image */
transform: translateX(20px); display: flex; gap: 10px; z-index: 10;
}
.pro-dot {
width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.4);
border: none; cursor: pointer; transition: all 0.3s;
}
.pro-dot.active-dot { background: var(--brand-green); width: 30px; border-radius: 10px; }
/* ─── MOBILE RESPONSIVENESS ─── */
@media (max-width: 768px) {
.pro-slide.split-layout { flex-direction: column-reverse; height: auto; }
.pro-slide-left-panel { flex: none; padding: 40px 25px 70px; border-right: none; border-top: 3px solid var(--brand-green); }
.pro-slide-right-panel { height: 300px; flex: none; }
.pro-slide-content h4 { font-size: 26px; }
.pro-nav-btn { display: none; }
.pro-slider-dots { left: 0; width: 100%; justify-content: center; transform: translateX(0); bottom: 20px; }
}
/* ==========================================================================
PROFESSIONAL CENTRES OF EXCELLENCE (COE)
========================================================================== */
.pro-coe-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
max-width: 1300px;
margin: 0 auto;
padding: 0 5%;
}
/* ─── THE CLINICAL CARD ─── */
.pro-coe-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 35px 30px;
text-decoration: none;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
transform: translateZ(0); /* Hardware acceleration */
}
.pro-coe-card:hover {
transform: translateY(-8px);
border-color: #cbd5e1;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
}
/* Add a very subtle green highlight bar at the top on hover */
.pro-coe-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--brand-green);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.pro-coe-card:hover::before {
transform: scaleX(1);
}
/* ─── ICON BOX ─── */
.pro-coe-icon-box {
width: 65px;
height: 65px;
border-radius: 14px;
background: #f1f5f9;
border: 1px solid #e2e8f0;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 25px;
transition: all 0.4s ease;
}
.pro-live-icon {
width: 35px;
height: auto;
transition: all 0.4s ease;
}
.pro-coe-card:hover .pro-coe-icon-box {
background: var(--brand-green);
border-color: var(--brand-green);
box-shadow: 0 10px 20px rgba(19, 201, 167, 0.2);
transform: scale(1.05);
}
/* Flips the SVG icon to white when the box turns green */
.pro-coe-card:hover .pro-live-icon {
filter: brightness(0) invert(1);
}
/* ─── TEXT STYLING ─── */
.pro-coe-text {
flex-grow: 1;
}
.pro-coe-text h3 {
font-size: 20px;
font-weight: 800;
color: var(--brand-dark);
margin-bottom: 12px;
letter-spacing: -0.5px;
transition: color 0.3s ease;
}
.pro-coe-card:hover .pro-coe-text h3 {
color: var(--brand-green);
}
.pro-coe-text p {
font-size: 15px;
color: #64748b;
line-height: 1.6;
margin: 0;
}
/* ─── SLEEK ARROW ─── */
.pro-coe-arrow {
position: absolute;
bottom: 35px;
right: 30px;
width: 35px;
height: 35px;
border-radius: 50%;
background: #f8fafc;
color: #94a3b8;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
opacity: 0;
transform: translateX(-15px);
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.pro-coe-card:hover .pro-coe-arrow {
opacity: 1;
transform: translateX(0);
background: rgba(19, 201, 167, 0.1);
color: var(--brand-green);
}
/* ─── VIEW MORE BUTTON ─── */
.pro-view-more-btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 36px;
border: 2px solid #cbd5e1;
border-radius: 50px;
color: var(--brand-dark);
font-size: 16px;
font-weight: 700;
text-decoration: none;
background: transparent;
transition: all 0.3s ease;
}
.pro-view-more-btn i {
transition: transform 0.3s ease;
}
.pro-view-more-btn:hover {
background: var(--brand-green);
border-color: var(--brand-green);
color: #ffffff;
box-shadow: 0 10px 20px rgba(19, 201, 167, 0.2);
}
.pro-view-more-btn:hover i {
transform: translateX(5px);
}
/* Mobile Adjustments */
@media (max-width: 768px) {
.pro-coe-grid { grid-template-columns: 1fr; }
.pro-coe-arrow { opacity: 1; transform: translateX(0); background: #f8fafc; } /* Always show arrow on mobile */
}
.cinematic-hero-slider { position: relative; height: 90vh; overflow: hidden; }
.hero-slider-bg { position: absolute; inset: 0; z-index: -1; }
.hero-slide {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1.5s ease-in-out;
}
.hero-slide.active { opacity: 1; }
/* Keyframe for subtle zoom animation */
@keyframes zoomEffect {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}
.hero-slide { animation: zoomEffect 10s infinite alternate; }
/* ==========================================================================
MODERN FLOATING HERO
========================================================================== */
.modern-hero-section {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
padding: 120px 5% 60px;
overflow: hidden;
}
.mh-background {
position: absolute; inset: 0;
background-size: cover; background-position: center 30%;
z-index: -2;
}
/* Elegant diagonal overlay. Keeps text perfectly readable while showing the image on the right */
.mh-overlay {
position: absolute; inset: 0;
background: linear-gradient(110deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%);
z-index: -1;
}
.mh-container {
max-width: 1350px; width: 100%; margin: 0 auto;
display: flex; justify-content: space-between; align-items: center; gap: 40px;
}
.mh-content {
max-width: 650px;
}
.mh-badge {
display: inline-block; background: #ffffff; color: var(--brand-dark);
padding: 8px 18px; border-radius: 50px; font-size: 13px; font-weight: 700;
margin-bottom: 25px; border: 1px solid #e2e8f0;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.mh-badge i { color: var(--brand-green); margin-right: 5px; }
.mh-title {
font-size: 72px; font-weight: 800; color: var(--brand-dark);
line-height: 1.05; margin-bottom: 25px; letter-spacing: -2px;
}
.mh-title span { color: var(--brand-green); }
.mh-desc {
font-size: 18px; color: #475569; line-height: 1.7; margin-bottom: 40px;
}
.mh-actions { display: flex; gap: 20px; align-items: center; }
.mh-btn-emergency {
display: flex; align-items: center; gap: 10px; color: #ef4444; font-weight: 700;
text-decoration: none; padding: 14px 28px; border-radius: 50px;
background: rgba(239, 68, 68, 0.1); transition: 0.3s;
}
.mh-btn-emergency:hover {
background: #ef4444; color: #fff; box-shadow: 0 10px 20px rgba(239, 68, 68, 0.2);
}
/* Floating Glass Cards */
.mh-floating-grid {
display: flex; flex-direction: column; gap: 20px;
}
.mh-float-card {
background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.9); box-shadow: 0 15px 35px rgba(0,0,0,0.08);
padding: 20px 30px; border-radius: 20px; display: flex; align-items: center; gap: 20px;
transform: translateX(0); transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
width: 280px;
}
.mh-float-card:hover {
transform: translateX(-15px); box-shadow: 0 25px 50px rgba(19,201,167,0.15); border-color: var(--brand-green);
}
.mh-float-card i {
font-size: 24px; color: var(--brand-green); width: 55px; height: 55px; flex-shrink: 0;
background: rgba(19, 201, 167, 0.1); border-radius: 14px;
display: flex; justify-content: center; align-items: center;
}
.mh-float-card strong { display: block; font-size: 26px; font-weight: 800; color: var(--brand-dark); line-height: 1; margin-bottom: 4px;}
.mh-float-card span { font-size: 13px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;}
/* ==========================================================================
SIMPLE MINIMALIST FAQS
========================================================================== */
.simple-faq-container {
max-width: 800px;
margin: 30px auto 0;
}
.simple-faq-item {
border-bottom: 1px solid #e2e8f0;
transition: all 0.3s ease;
}
.simple-faq-item:last-child {
border-bottom: none; /* Keeps the bottom edge clean */
}
.simple-faq-item summary {
padding: 25px 0;
font-size: 18px;
font-weight: 600;
color: var(--brand-dark);
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
transition: color 0.3s ease;
}
/* Remove default browser arrow */
.simple-faq-item summary::-webkit-details-marker {
display: none;
}
/* Elegant Plus/Minus Icon */
.simple-faq-item summary::after {
content: '+';
font-size: 26px;
font-weight: 300;
color: #94a3b8;
transition: transform 0.3s ease, color 0.3s ease;
}
.simple-faq-item:hover summary {
color: var(--brand-green);
}
.simple-faq-item:hover summary::after {
color: var(--brand-green);
}
.simple-faq-item[open] summary::after {
content: '−'; /* Perfect mathematical minus sign */
color: var(--brand-green);
transform: rotate(180deg);
}
.simple-faq-content {
padding: 0 0 25px 0;
font-size: 16px;
color: #64748b;
line-height: 1.8;
animation: simpleFadeDown 0.4s ease forwards;
}
@keyframes simpleFadeDown {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ─── MOBILE RESPONSIVENESS ─── */
@media (max-width: 1024px) {
.mh-container { flex-direction: column; align-items: flex-start; }
.mh-title { font-size: 55px; }
.mh-floating-grid { flex-direction: row; flex-wrap: wrap; width: 100%; justify-content: flex-start; }
.mh-overlay { background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.85) 100%); }
}
@media (max-width: 768px) {
.mh-title { font-size: 42px; }
.mh-actions { flex-direction: column; align-items: stretch; }
.mh-btn-emergency { justify-content: center; }
.mh-float-card { width: 100%; }
.simple-faq-item summary { font-size: 16px; padding: 20px 0; }
.simple-faq-content { font-size: 15px; }
}
/* ─── 3. DIRECTORY STYLE SPECIALITIES ─── */
.directory-list-container {
max-width: 1000px;
margin: 40px auto 0;
display: flex;
flex-direction: column;
}
.directory-row {
display: flex;
align-items: center;
gap: 30px;
padding: 30px 20px;
border-bottom: 1px solid #e2e8f0;
transition: all 0.4s ease;
cursor: pointer;
}
.directory-row:hover {
background: #ffffff;
box-shadow: 0 15px 30px rgba(0,0,0,0.04);
border-radius: 16px;
border-bottom-color: transparent;
transform: scale(1.02);
}
.directory-row .d-icon {
width: 70px; height: 70px; border-radius: 50%;
background: #f1f5f9; color: var(--brand-dark);
display: flex; justify-content: center; align-items: center; font-size: 26px; flex-shrink: 0;
transition: all 0.4s ease;
}
.directory-row:hover .d-icon {
background: var(--brand-green); color: #ffffff;
box-shadow: 0 10px 20px rgba(19,201,167,0.3);
}
.directory-row .d-content h4 {
font-size: 22px; font-weight: 800; color: var(--brand-dark); margin-bottom: 6px; transition: color 0.3s;
}
.directory-row:hover .d-content h4 { color: var(--brand-green); }
.directory-row .d-content p {
font-size: 15px; color: #64748b; margin: 0; line-height: 1.6; max-width: 90%;
}
/* ─── MOBILE RESPONSIVENESS ─── */
@media (max-width: 1024px) {
.branch-hero-section { flex-direction: column; height: auto; }
.branch-hero-left { flex: none; padding: 60px 5%; }
.branch-hero-right { flex: none; height: 400px; clip-path: none; }
.hero-image-overlay { background: linear-gradient(to top, #0a1f24 0%, transparent 40%); }
.sticky-scroll-container { flex-direction: column; gap: 40px; }
.sticky-left-panel { position: relative; top: 0; flex: none; }
.directory-row { flex-direction: column; align-items: flex-start; gap: 15px; }
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:'Roboto',sans-serif;
background:#ffffff;
}
.about-section{
padding:60px 0;
}
.container{
width:90%;
max-width:1200px;
margin:auto;
display:flex;
align-items:flex-start;
justify-content:center;
gap:55px;
}
/* Left Image */
.about-image{
flex:0 0 42%;
}
.about-image img{
width:100%;
display:block;
border-radius:30px;
}
/* Right Content */
.about-content{
flex:0 0 58%;
}
.about-content h2{
color:#135d6e;
font-size:34px;
font-weight:700;
margin-bottom:18px;
}
.about-content p{
color:#4c4c4c;
font-size:18px;
line-height:1.9;
margin-bottom:22px;
text-align:justify;
}
.about-content strong{
color:#333;
}
/* Responsive */
@media(max-width:991px){
.container{
flex-direction:column;
}
.about-image,
.about-content{
flex:100%;
}
.about-image img{
width:100%;
}
.about-content h2{
margin-top:25px;
}
}
@media(max-width:576px){
.about-section{
padding:40px 20px;
}
.about-content h2{
font-size:28px;
}
.about-content p{
font-size:16px;
line-height:1.8;
}
.about-image img{
border-radius:20px;
}
}
.specialities-section{
padding:20px 0;
background:
radial-gradient(circle at top right,#dff4ff 0%,transparent 50%),
radial-gradient(circle at bottom left,#eef9ff 0%,transparent 55%),
#f8fcff;
}
.container{
width:90%;
max-width:1250px;
margin:auto;
}
.section-title{
text-align:center;
margin-bottom:30px;
}
.speciality-wrapper{
background:rgba(#13c9a7);
backdrop-filter:blur(20px);
border-radius:1px;
padding:25px;
border:1px solid rgba(#13c9a7);
box-shadow:
0 15px 40px rgba(#13c9a7),
0 5px 15px rgba(#13c9a7);
position:relative;
}
.speciality-wrapper::before{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:8px;
background:linear-gradient(180deg,#13c9a7);
border-radius:10px 0 0 10px;
}
.speciality-wrapper p{
position:relative;
padding-left:28px;
margin-bottom:28px;
color:#135d6e;
font-size:17px;
line-height:2;
text-align:justify;
}
.speciality-wrapper p:last-child{
margin-bottom:0;
}
.speciality-wrapper p::before{
content:"";
position:absolute;
left:0;
top:14px;
width:10px;
height:10px;
border-radius:50%;
background:#13c9a7;
box-shadow:0 0 0 5px rgba(0,169,244,.15);
}
.speciality-wrapper span{
color:#13c9a7;
font-weight:700;
font-size:19px;
}
.speciality-wrapper strong{
color:#13c9a7;
font-weight:700;
}
@media(max-width:992px){
.speciality-wrapper{
padding:35px;
}
.section-title h2{
font-size:34px;
}
}
@media(max-width:768px){
.speciality-wrapper{
padding:25px;
border-radius:20px;
}
.speciality-wrapper::before{
width:5px;
}
.speciality-wrapper p{
font-size:16px;
line-height:1.9;
padding-left:22px;
}
.speciality-wrapper span{
display:block;
margin-bottom:8px;
font-size:18px;
}
.section-title h2{
font-size:30px;
}
}
/* ==========================================================================
MEDICHECK NIT 1 SPECIFIC STYLES
========================================================================== */
/* ─── ENTERPRISE OVERLAPPING HERO ─── */
.enterprise-hero { position: relative; width: 100%; background-color: #f8fafc; padding-bottom: 50px; }
.enterprise-bg { position: relative; width: 100%; height: 65vh; min-height: 500px; overflow: hidden; }
.enterprise-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.enterprise-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10, 31, 36, 0.85) 0%, rgba(10, 31, 36, 0.3) 60%, transparent 100%); }
.enterprise-container { max-width: 1350px; margin: 0 auto; padding: 0 5%; position: relative; z-index: 10; }
.enterprise-titles { position: absolute; top: -42vh; left: 5%; }
.e-badge { display: inline-block; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); color: #ffffff; padding: 8px 16px; border-radius: 50px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; border: 1px solid rgba(255, 255, 255, 0.3); }
.enterprise-titles h2 { font-size: 45px; font-weight: 900; color: #ffffff; line-height: 1.1; letter-spacing: -1.5px; }
.enterprise-titles h2 span { color: var(--brand-green); }
.enterprise-overlap-card { background: #ffffff; border-radius: 20px; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08); margin-top: -80px; position: relative; overflow: hidden; border: 1px solid #e2e8f0; }
.overlap-grid { display: flex; flex-wrap: wrap; }
.overlap-content { flex: 1.5; padding: 60px; }
.overlap-heading { font-size: 32px; font-weight: 800; color: var(--brand-dark); margin-bottom: 20px; line-height: 1.2; }
.overlap-heading span { color: var(--brand-green); }
.overlap-desc { font-size: 16px; color: #64748b; line-height: 1.7; margin-bottom: 15px; }
.overlap-actions { display: flex; gap: 15px; }
.btn-outline-dark { display: inline-block; padding: 12px 28px; border: 2px solid #cbd5e1; color: var(--brand-dark); border-radius: 50px; font-weight: 700; text-decoration: none; transition: 0.3s; }
.btn-outline-dark:hover { border-color: var(--brand-dark); background: var(--brand-dark); color: #ffffff; }
.overlap-stats { flex: 1; background: #f8fafc; padding: 60px 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; border-left: 1px solid #e2e8f0; }
.stat-box { text-align: center; }
.s-icon { width: 50px; height: 50px; background: rgba(19, 201, 167, 0.15); color: var(--brand-green); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 20px; margin: 0 auto 15px; }
.stat-box h3 { font-size: 28px; font-weight: 800; color: var(--brand-dark); margin-bottom: 5px; }
.stat-box p { font-size: 13px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; }
/* ─── HIGHLIGHT LIST ─── */
.highlight-grid { max-width: 1000px; margin: 40px auto 0; background: #fff; padding: 40px; border-radius: 16px; border: 1px solid #e2e8f0; box-shadow: 0 10px 30px rgba(0,0,0,0.03); }
.two-col-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; list-style: none; padding: 0; }
.two-col-list li { display: flex; align-items: center; gap: 15px; font-size: 16px; color: var(--text-dark); font-weight: 500; }
.two-col-list li i { color: var(--brand-green); font-size: 20px; }
/* ─── DETAILED SPECIALITIES GRID ─── */
.detailed-spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; max-width: 1350px; margin: 40px auto 0; }
.spec-detail-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 35px 30px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; overflow: hidden; }
.spec-detail-card::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--brand-green); transform: scaleY(0); transition: transform 0.4s ease; transform-origin: bottom; }
.spec-detail-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); border-color: transparent; }
.spec-detail-card:hover::before { transform: scaleY(1); }
.spec-card-header { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.spec-card-header .spec-icon { width: 60px; height: 60px; background: rgba(19, 201, 167, 0.1); color: var(--brand-green); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; transition: 0.3s; }
.spec-detail-card:hover .spec-card-header .spec-icon { background: var(--brand-green); color: #ffffff; box-shadow: 0 10px 20px rgba(19, 201, 167, 0.3); }
.spec-card-header h4 { font-size: 20px; font-weight: 800; color: var(--brand-dark); line-height: 1.3; margin: 0; }
.spec-detail-card p { font-size: 15px; color: #64748b; line-height: 1.7; margin: 0; }
/* ─── DIAGNOSTIC GRID ─── */
.diagnostic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.diag-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 25px 15px; text-align: center; transition: 0.3s; }
.diag-card:hover { background: rgba(19, 201, 167, 0.15); border-color: var(--brand-green); transform: translateY(-5px); }
.diag-card i { font-size: 30px; color: var(--brand-green); margin-bottom: 15px; display: block; }
.diag-card span { color: #fff; font-size: 14px; font-weight: 600; }
/* ─── MOBILE RESPONSIVENESS ─── */
@media (max-width: 1024px) {
.overlap-grid { flex-direction: column; }
.overlap-stats { border-left: none; border-top: 1px solid #e2e8f0; }
.enterprise-titles { top: -35vh; }
.enterprise-titles h1 { font-size: 45px; }
.diagnostic-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.enterprise-overlap-card { margin-top: -60px; }
.overlap-content { padding: 40px 25px; }
.overlap-stats { padding: 40px 25px; gap: 20px; }
.overlap-actions { flex-direction: column; }
.btn-outline-dark { text-align: center; }
.two-col-list { grid-template-columns: 1fr; }
.detailed-spec-grid { grid-template-columns: 1fr; }
}
.content-section{
background:#f8fbfd;
padding:10px 0;
}
.content-wrapper{
max-width:1050px;
margin:auto;
background:#fff;
padding:60px;
border-radius:18px;
box-shadow:0 15px 45px rgba(0,0,0,.06);
}
.section-label{
display:inline-block;
background:#e7f7f5;
color:#009688;
padding:8px 20px;
border-radius:30px;
font-size:14px;
font-weight:600;
letter-spacing:1px;
text-transform:uppercase;
margin-bottom:20px;
}
.content-wrapper h2{
font-size:34px;
color:#063b5b;
font-weight:700;
margin-bottom:20px;
position:relative;
padding-bottom:15px;
}
.content-wrapper h2::after{
content:'';
position:absolute;
left:0;
bottom:0;
width:70px;
height:4px;
background:#00A99D;
border-radius:20px;
}
.content-wrapper p{
font-size:17px;
line-height:1.9;
color:#5b6470;
margin-bottom:20px;
text-align:justify;
}
.content-list{
margin:30px 0;
padding:0;
list-style:none;
}
.content-list li{
position:relative;
padding-left:35px;
margin-bottom:18px;
color:#444;
font-size:17px;
line-height:1.8;
}
.content-list li::before{
content:'✓';
position:absolute;
left:0;
top:2px;
width:24px;
height:24px;
background:#00A99D;
color:#fff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
font-weight:700;
}
.content-wrapper hr{
border:none;
height:1px;
background:#e6e6e6;
margin:50px 0;
}
@media(max-width:768px){
.content-wrapper{
padding:35px 25px;
}
.content-wrapper h2{
font-size:28px;
}
.content-wrapper p,
.content-list li{
font-size:16px;
}
}
/* Share Profile Styling */
.share-profile-wrapper {
margin-top: 15px;
padding-top: 10px;
border-top: 1px solid var(--border-color);
}
.share-text {
font-size: 0.85rem;
color: var(--text-muted);
margin-bottom: 12px;
font-weight: 500;
}
.share-icons-flex {
display: flex;
justify-content: center;
gap: 15px;
}
.share-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
color: white;
font-size: 1.1rem;
border: none;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
}
.share-btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0,0,0,0.15);
color: white;
}
/* Brand Colors */
.whatsapp { background-color: #25D366; }
.facebook { background-color: #1877F2; }
.instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.copy-link { background-color: var(--brand-green); }
/* Success state for copy link */
.copy-success { background-color: #10b981 !important; }
.service-list{
list-style:none;
padding:0;
margin-top:20px;
}
.service-list li{
display:flex;
align-items:center;
gap:12px;
padding:12px 0;
border-bottom:1px dashed #ececec;
font-weight:500;
transition:.3s;
}
.service-list li:last-child{
border:none;
}
.service-list li i{
color:#b51f58;
font-size:18px;
}
.service-list li:hover{
padding-left:10px;
color:#b51f58;
}
.service-card{
opacity:0;
transform:translateY(40px);
animation:fadeUp .8s forwards;
}
.service-card:nth-child(2){animation-delay:.15s;}
.service-card:nth-child(3){animation-delay:.3s;}
.service-card:nth-child(4){animation-delay:.45s;}
.service-card:nth-child(5){animation-delay:.6s;}
.service-card:nth-child(6){animation-delay:.75s;}
@keyframes fadeUp{
0%{
opacity:0;
transform:translateY(40px);
}
100%{
opacity:1;
transform:translateY(0);
}
}
.animated-item{
margin-bottom:15px;
padding:18px;
background:#fff;
border-radius:12px;
box-shadow:0 8px 25px rgba(0,0,0,.08);
opacity:0;
transform:translateY(40px);
animation:fadeUp .7s ease forwards;
transition:.3s;
}
.animated-item:hover{
transform:translateY(-5px) scale(1.02);
box-shadow:0 15px 35px rgba(0,0,0,.15);
}
.animated-item:nth-child(1){animation-delay:.2s;}
.animated-item:nth-child(2){animation-delay:.4s;}
.animated-item:nth-child(3){animation-delay:.6s;}
.animated-item:nth-child(4){animation-delay:.8s;}
@keyframes fadeUp{
from{
opacity:0;
transform:translateY(40px);
}
to{
opacity:1;
transform:translateY(0);
}
}
/* ==========================================================================
MODERN ARTICLE SPECIFIC STYLES
========================================================================== */
/* Layout & Alignment (FIXED CONTAINER) */
.modern-article-body { background-color: #f8fafc; font-family: 'Plus Jakarta Sans', sans-serif; color: #334155; margin: 0; padding: 0; }
.article-container {
max-width: 1100px;
width: 100%;
margin: 0 auto;
padding: 0 20px;
display: block; /* Prevents global flexbox row conflicts */
}
/* Header Grid */
.modern-header { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 100px; padding: 100px 0 20px; border-bottom: 1px solid #e2e8f0; }
/* Hero Text */
.category-pill { display: inline-block; background: #e0f2fe; color: #0284c7; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.main-heading { font-size: 46px; font-weight: 800; line-height: 1.15; margin: 20px 0; color: #0f172a; letter-spacing: -1px; }
.excerpt { font-size: 18px; color: #64748b; line-height: 1.6; margin-bottom: 30px; }
/* Author Box */
.author-profile { display: flex; align-items: center; gap: 15px; }
.author-profile img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.author-details .name { font-weight: 700; color: #0f172a; margin: 0; font-size: 15px; }
.author-details .date { color: #64748b; margin: 0; font-size: 14px; }
/* Hero Image */
.header-visual img { width: 100%; height: 450px; object-fit: cover; border-radius: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.08); display: block; }
/* Article Body Wrapper */
.article-wrapper { display: flex; gap: 60px; margin-top: 40px; padding-bottom: 80px; align-items: flex-start; }
/* Sticky Sidebar */
.sticky-sidebar { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 15px; }
.share-btn { width: 45px; height: 45px; border-radius: 50%; border: 1px solid #e2e8f0; background: #fff; cursor: pointer; transition: 0.3s; color: #64748b; font-size: 16px; }
.share-btn:hover { background: #13c9a7; color: white; border-color: #13c9a7; transform: translateY(-3px); }
/* Typography */
.prose-content { max-width: 720px; font-size: 19px; line-height: 1.8; color: #334155; width: 100%; }
.prose-content p { margin-bottom: 25px; }
.drop-cap { float: left; font-size: 75px; line-height: 0.8; font-weight: 800; color: #13c9a7; margin-right: 12px; margin-top: 8px; }
.prose-content h2 { font-size: 32px; font-weight: 800; color: #0f172a; margin: 50px 0 20px; line-height: 1.3; }
/* Lists & Tags */
.check-list { list-style: none; padding: 0; margin: 0 0 30px 0; }
.check-list li { position: relative; padding-left: 35px; margin-bottom: 12px; font-weight: 500; }
.check-list li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: 2px; color: #13c9a7; font-size: 16px; }
.speciality-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.speciality-tags span { background: #ffffff; border: 1px solid #cbd5e1; padding: 8px 16px; border-radius: 50px; font-size: 14px; font-weight: 600; color: #475569; }
/* Images & Quotes */
.large-image-frame { margin: 40px 0; }
.large-image-frame img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); display: block; }
.large-image-frame figcaption { text-align: center; font-size: 14px; color: #94a3b8; margin-top: 12px; font-style: italic; }
blockquote { font-size: 24px; font-weight: 600; color: #0f172a; line-height: 1.6; margin: 50px 0; padding-left: 30px; border-left: 4px solid #13c9a7; font-style: italic; }
.article-divider { border: 0; height: 1px; background: #e2e8f0; margin: 50px 0; }
/* Article FAQ styling */
.article-faq-container { margin-bottom: 40px; }
.article-faq-item { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 15px; overflow: hidden; }
.article-faq-item summary { padding: 20px; font-weight: 700; color: #0f172a; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.article-faq-item summary::-webkit-details-marker { display: none; }
.article-faq-item summary::after { content: '\f067'; font-family: "Font Awesome 6 Free"; font-weight: 900; color: #13c9a7; }
.article-faq-item[open] summary::after { content: '\f068'; }
.article-faq-content { padding: 0 20px 20px; color: #64748b; font-size: 17px; line-height: 1.6; }
/* Final Call to Action Box */
.article-cta-box { background: rgba(19, 201, 167, 0.1); border-left: 4px solid #13c9a7; padding: 30px; border-radius: 0 12px 12px 0; }
.article-cta-box p { margin: 0; font-weight: 600; color: #0a1f24; }
/* Progress Bar */
.reading-progress-bar { position: fixed; top: 0; left: 0; height: 4px; background: #13c9a7; z-index: 9999; width: 0%; transition: width 0.1s ease; }
/* Mobile Fixes */
@media (max-width: 992px) {
.modern-header { grid-template-columns: 1fr; gap: 30px; padding: 40px 0 20px; }
.header-visual img { height: 350px; }
.article-wrapper { flex-direction: column; gap: 30px; }
.sticky-sidebar { position: relative; top: 0; flex-direction: row; justify-content: center; width: 100%; border-bottom: 1px solid #e2e8f0; padding-bottom: 20px; }
}
@media (max-width: 768px) {
.main-heading { font-size: 34px; }
.prose-content { font-size: 17px; }
.drop-cap { font-size: 60px; }
}
.article-slider {
width: 100%;
height: 400px;
overflow: hidden;
border-radius: 20px;
margin: 10px 0;
position: relative;
}
.slider-track {
display: flex;
width: 500%; /* 100% * 5 slides */
height: 100%;
animation: autoSlide 20s infinite linear;
}
.slide {
width: 20%; /* Each slide is 1/5th of the track */
height: 100%;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
@keyframes autoSlide {
0% { transform: translateX(0); }
20% { transform: translateX(0); } /* Pause for 4 seconds */
25% { transform: translateX(-20%); } /* Slide to 2nd */
45% { transform: translateX(-20%); }
50% { transform: translateX(-40%); } /* Slide to 3rd */
70% { transform: translateX(-40%); }
75% { transform: translateX(-60%); } /* Slide to 4th */
95% { transform: translateX(-60%); }
100% { transform: translateX(-80%); } /* Return to start */
}
.blog-card{
cursor:pointer;
}
.blog-card{
cursor:pointer;
transition:.3s ease;
}
.blog-card:hover{
transform:translateY(-8px);
}
.doctorSwiper{
width:100%;
padding:10px 5px 55px;
overflow:hidden;
}
.doctorSwiper .swiper-slide{
height:auto;
display:flex;
}
.doctorSwiper .cyber-doc-card{
width:100%;
}
.doctorSwiper .swiper-pagination{
bottom:0;
}
@media(max-width:768px){
.doctorSwiper{
padding-bottom:45px;
}
}
/* --- ENHANCED DROPDOWN STYLING --- */
/* Parent Container */
.nav-dropdown {
position: relative;
display: inline-block;
}
/* Chevron Animation */
.nav-dropdown .chevron-icon {
font-size: 10px;
margin-left: 5px;
transition: transform 0.3s ease;
}
.nav-dropdown:hover .chevron-icon {
transform: rotate(180deg);
}
/* Base Dropdown Menu (Glassmorphism & Shadows) */
.nav-links .dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
min-width: 240px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
border-radius: 12px;
padding: 10px 0;
border: 1px solid rgba(255, 255, 255, 0.4);
/* Animation initial state */
opacity: 0;
visibility: hidden;
transform: translateY(15px);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
z-index: 1000;
}
/* Show Dropdown on Hover */
.nav-dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Individual Dropdown Links */
.nav-links .dropdown-menu a {
display: flex;
align-items: center;
gap: 12px;
color: #2c3e50; /* Dark slate for readability */
padding: 12px 20px;
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: all 0.2s ease;
border-left: 3px solid transparent;
}
/* Link Hover Effect (Nudge and Color Change) */
.nav-links .dropdown-menu a:hover {
background-color: rgba(231, 76, 60, 0.05); /* Very light tint of brand red */
color: #e74c3c; /* Brand color */
padding-left: 25px; /* Attractive right-nudge effect */
border-left: 3px solid #e74c3c;
}
/* Dropdown Icons */
.nav-links .dropdown-menu a i {
font-size: 16px;
color: inherit; /* Inherits the hover color */
width: 20px;
text-align: center;
}
/* --- MEGA MENU SPECIALITIES GRID (2x2 Layout) --- */
.nav-links .dropdown-menu.mega-menu {
min-width: 500px; /* Perfect width for 2 columns */
padding: 15px;
left: 50%;
transform: translateX(-50%) translateY(15px);
}
.nav-dropdown:hover .dropdown-menu.mega-menu {
transform: translateX(-50%) translateY(0);
}
.mega-menu-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
max-height: 450px;
overflow-y: auto;
padding-right: 5px;
}
/* Custom Scrollbar (Slider) Styling */
.mega-menu-grid::-webkit-scrollbar {
width: 6px;
}
.mega-menu-grid::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.05);
border-radius: 10px;
}
.mega-menu-grid::-webkit-scrollbar-thumb {
background: rgba(231, 76, 60, 0.4); /* Brand red tint */
border-radius: 10px;
}
.mega-menu-grid::-webkit-scrollbar-thumb:hover {
background: rgba(231, 76, 60, 0.8);
}
/* Responsive fix for Mega Menu on smaller laptops */
@media (max-width: 1024px) {
.nav-links .dropdown-menu.mega-menu {
min-width: 450px;
left: 0;
transform: translateX(-20%) translateY(15px);
}
.nav-dropdown:hover .dropdown-menu.mega-menu {
transform: translateX(-20%) translateY(0);
}
}
/* =========================================
DOCTORS HERO & BREADCRUMB SECTION
========================================= */
.doc-portal-hero {
position: relative;
min-height: 55vh; /* Slightly shorter, perfect for a breadcrumb page header */
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
/* Background Properties */
background-color: #1e3c72; /* Fallback color while image loads */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
/* Optional: background-attachment: fixed; creates a nice parallax scrolling effect */
overflow: hidden;
font-family: 'Poppins', sans-serif;
}
/* Glassmorphism Content Box */
.portal-hero-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 800px;
padding: 40px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}
/* --- Text & Subtitle Styling --- */
.hero-subtitle {
display: inline-block;
color: #48dbfb;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 15px;
}
.hero-subtitle i {
margin-right: 5px;
}
.hero-title {
font-size: 46px;
font-weight: 800;
color: #ffffff;
line-height: 1.2;
margin-bottom: 15px;
letter-spacing: -0.5px;
}
.hero-title span {
background: linear-gradient(135deg, #13c9a7 100%, #e74c3c 100%); /* Brand Red */
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
.portal-hero-content p {
font-size: 16px;
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
margin: 0 auto;
max-width: 600px;
}
/* Animation */
.fade-up {
animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
opacity: 0;
transform: translateY(30px);
}
@keyframes heroFadeUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
.portal-hero-content {
padding: 30px 20px;
}
.hero-title {
font-size: 34px;
}
.portal-hero-content p {
font-size: 14px;
}
}
/* ==========================================================================
CONTACT HUB SECTION
========================================================================== */
.contact-hub-section {
background: url('data:image/svg+xml;utf8,') center/600px repeat, var(--bg-light);
}
.contact-hub-container {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.5fr;
background: #ffffff;
border-radius: 24px;
box-shadow: var(--shadow-lg);
overflow: hidden;
border: 1px solid rgba(0,0,0,0.05);
}
/* Info Panel Styling */
.contact-info-panel {
background: var(--brand-dark);
color: #ffffff;
padding: 50px 40px;
position: relative;
overflow: hidden;
}
.contact-info-panel h3 {
font-size: 26px;
font-weight: 700;
margin-bottom: 15px;
position: relative;
z-index: 2;
}
.contact-info-panel .text-muted {
color: rgba(255, 255, 255, 0.7);
margin-bottom: 40px;
position: relative;
z-index: 2;
}
.contact-methods {
list-style: none;
padding: 0;
margin: 0;
position: relative;
z-index: 2;
}
.contact-methods li {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 30px;
}
.cm-icon {
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(19, 201, 167, 0.2);
color: var(--brand-green);
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
transition: 0.3s;
}
.contact-methods li:hover .cm-icon {
background: var(--brand-green);
color: #ffffff;
transform: scale(1.1);
}
.cm-text {
display: flex;
flex-direction: column;
}
.cm-text span {
font-size: 13px;
color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.cm-text strong {
font-size: 16px;
font-weight: 600;
color: #ffffff;
}
.contact-circle-bg {
position: absolute;
bottom: -100px;
right: -100px;
width: 300px;
height: 300px;
border-radius: 50%;
background: radial-gradient(circle, rgba(19, 201, 167, 0.15) 0%, transparent 70%);
z-index: 1;
}
/* Form Panel Styling */
.contact-form-panel {
padding: 50px 40px;
background: #ffffff;
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
}
.input-group.full-width {
grid-column: 1 / -1;
}
.input-group label {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--brand-dark);
margin-bottom: 8px;
}
.input-group input,
.input-group textarea {
width: 100%;
padding: 15px 20px;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #f8fafc;
font-family: var(--font-main);
font-size: 15px;
color: var(--text-dark);
transition: all 0.3s ease;
outline: none;
}
.input-group input:focus,
.input-group textarea:focus {
background: #ffffff;
border-color: var(--brand-green);
box-shadow: 0 0 0 4px rgba(19, 201, 167, 0.1);
}
.form-submit-row {
margin-top: 30px;
display: flex;
align-items: center;
gap: 20px;
}
.form-submit-btn {
border: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
font-size: 16px;
}
.form-message {
font-size: 14px;
font-weight: 600;
opacity: 0;
transition: opacity 0.3s;
}
.form-message.success {
color: var(--brand-green);
opacity: 1;
}
.form-message.error {
color: #e74c3c;
opacity: 1;
}
/* Mobile Responsiveness */
@media (max-width: 991px) {
.contact-hub-container {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.form-grid {
grid-template-columns: 1fr;
}
.contact-info-panel, .contact-form-panel {
padding: 40px 25px;
}
.form-submit-row {
flex-direction: column;
align-items: flex-start;
}
}
.input-group input,
.input-group textarea,
.input-group select {
width: 100%;
padding: 15px 20px;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #f8fafc;
font-family: var(--font-main);
font-size: 15px;
color: var(--text-dark);
transition: all 0.3s ease;
outline: none;
appearance: none; /* Removes the ugly default browser arrow */
}
/* Adds a custom, brand-colored dropdown arrow */
.input-group select {
cursor: pointer;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position-x: 95%;
background-position-y: 50%;
}
.input-group input:focus,
.input-group textarea:focus,
.input-group select:focus {
background: #ffffff;
border-color: var(--brand-green);
box-shadow: 0 0 0 4px rgba(19, 201, 167, 0.1);
}/* ==========================================================================
PREMIUM CARD CONTACT SECTION
========================================================================== */
.premium-card-contact {
/* Soft background to make the white cards pop */
background: #f4f9f8;
padding: 80px 5%;
}
.contact-cards-container {
max-width: 1250px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.2fr; /* Map is slightly smaller than Form */
gap: 40px; /* The space between the two cards */
align-items: stretch;
}
/* Base styling for both cards */
.contact-card {
background: #ffffff;
border-radius: 24px;
box-shadow: 0 15px 40px rgba(19, 93, 110, 0.08);
border: 1px solid rgba(0,0,0,0.03);
transition: transform 0.4s ease, box-shadow 0.4s ease;
overflow: hidden;
position: relative;
}
.contact-card:hover {
transform: translateY(-8px);
box-shadow: 0 25px 50px rgba(19, 93, 110, 0.12);
}
/* Left Card: Map Details */
.map-card {
min-height: 500px;
padding: 10px; /* Acts like a polaroid frame around the map */
}
.map-card iframe {
width: 100%;
height: 100%;
border-radius: 16px;
border: none;
filter: contrast(1.05);
transition: opacity 0.4s ease;
}
.map-floating-badge {
position: absolute;
top: 30px;
left: 30px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 12px 24px;
border-radius: 50px;
font-weight: 800;
font-size: 14px;
color: var(--brand-dark);
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
display: flex;
align-items: center;
gap: 10px;
border: 1px solid rgba(19, 201, 167, 0.2);
}
.map-floating-badge i {
color: var(--brand-green);
font-size: 18px;
}
/* Right Card: Form Details */
.form-card {
padding: 50px;
}
.form-card .form-title {
font-size: 28px;
font-weight: 800;
color: var(--brand-dark);
margin-bottom: 5px;
}
.form-card .form-subtitle {
font-size: 14px;
color: #64748b;
margin-bottom: 30px;
}
/* Form Inputs */
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.input-group.full-width {
grid-column: 1 / -1;
}
.input-group label {
display: block;
font-size: 13px;
font-weight: 700;
color: var(--brand-dark);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.input-group input,
.input-group textarea,
.input-group select {
width: 100%;
padding: 15px 20px;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #f8fafc; /* Soft clinical gray */
font-family: var(--font-main);
font-size: 15px;
color: var(--text-dark);
transition: all 0.3s ease;
outline: none;
appearance: none;
}
/* Custom Dropdown Arrow */
.input-group select {
cursor: pointer;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position-x: 95%;
background-position-y: 50%;
}
.input-group input:focus,
.input-group textarea:focus,
.input-group select:focus {
background: #ffffff;
border-color: var(--brand-green);
box-shadow: 0 0 0 4px rgba(19, 201, 167, 0.1);
}
.form-submit-row {
margin-top: 30px;
display: flex;
align-items: center;
gap: 20px;
}
/* Mobile Responsiveness */
@media (max-width: 991px) {
.contact-cards-container {
grid-template-columns: 1fr; /* Stacks cards on mobile */
gap: 30px;
}
.map-card {
min-height: 350px;
}
.form-card {
padding: 40px 30px;
}
}
@media (max-width: 768px) {
.form-grid { grid-template-columns: 1fr; }
}
/* ==========================================================================
CINEMATIC VIDEO HERO SECTION
========================================================================== */
.modern-video-hero {
position: relative;
width: 100%;
height: 55vh;
min-height: 450px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.hero-bg-image {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
z-index: 1;
transform: scale(1.05); /* Slight zoom for premium feel */
}
/* Deep clinical gradient overlay so text remains readable */
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(10, 31, 36, 0.9) 0%, rgba(19, 201, 167, 0.6) 100%);
z-index: 2;
}
.hero-content-wrapper {
position: relative;
z-index: 3;
max-width: 800px;
padding: 0 20px;
color: #ffffff;
}
.hero-kicker {
display: inline-block;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
padding: 8px 20px;
border-radius: 50px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 20px;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.hero-main-title {
font-size: 52px;
font-weight: 800;
line-height: 1.1;
margin-bottom: 20px;
letter-spacing: -1px;
}
.hero-main-title span {
color: #d1f2eb; /* Soft brand teal */
}
.hero-description {
font-size: 18px;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
}
/* ==========================================================================
INTERACTIVE FILTER BAR
========================================================================== */
.filter-section {
background: #ffffff;
padding: 20px 5%;
border-bottom: 1px solid #e2e8f0;
position: sticky;
top: 60px; /* Sticks to the top below the navbar when scrolling */
z-index: 99;
box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}
.filter-container {
max-width: 1250px;
margin: 0 auto;
overflow-x: auto; /* Allows horizontal scrolling on mobile */
scrollbar-width: none; /* Hides scrollbar on Firefox */
}
.filter-container::-webkit-scrollbar {
display: none; /* Hides scrollbar on Chrome/Safari */
}
.filter-pill-group {
display: flex;
justify-content: center;
gap: 12px;
min-width: max-content;
}
.filter-pill {
background: #f8fafc;
border: 1px solid #e2e8f0;
color: #475569;
padding: 10px 24px;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
font-family: var(--font-main);
}
.filter-pill:hover {
background: rgba(19, 201, 167, 0.1);
color: var(--brand-green);
border-color: var(--brand-green);
}
/* Active State for the selected filter */
.filter-pill.active {
background: var(--brand-green);
color: #ffffff;
border-color: var(--brand-green);
box-shadow: 0 4px 15px rgba(19, 201, 167, 0.3);
}
/* No Results Message Styling */
.no-results-msg {
text-align: center;
padding: 60px 20px;
color: #64748b;
}
.no-results-msg i {
font-size: 45px;
color: #cbd5e1;
margin-bottom: 15px;
}
.no-results-msg h3 {
font-size: 22px;
color: var(--brand-dark);
margin-bottom: 8px;
}
/* Smooth fade for cards when filtering */
.video-card {
transition: transform 0.4s ease, opacity 0.4s ease, box-shadow 0.4s ease;
}
/* Mobile Adjustments */
@media (max-width: 768px) {
.hero-main-title { font-size: 38px; }
.filter-pill-group { justify-content: flex-start; } /* Aligns left on mobile for scrolling */
}
/* ==========================================
APPOINTMENT BOOKING PAGE UI
========================================== */
.booking-page-section { background: #f4f9f8; min-height: 80vh; }
.booking-container { max-width: 900px; margin: 0 auto; padding: 0 20px; }
.booking-step-card {
background: #ffffff;
border-radius: 20px;
padding: 40px;
box-shadow: 0 10px 30px rgba(19, 93, 110, 0.05);
position: relative;
border: 1px solid rgba(0,0,0,0.03);
}
.step-badge {
position: absolute;
top: -15px;
left: 40px;
background: var(--brand-green);
color: #fff;
padding: 5px 20px;
border-radius: 20px;
font-weight: 700;
font-size: 14px;
box-shadow: 0 4px 10px rgba(19, 201, 167, 0.3);
}
.selection-grid { display: grid; grid-template-columns: 1fr 50px 1fr; gap: 20px; }
.custom-select { width: 100%; padding: 15px 20px; border: 2px solid #e2e8f0; border-radius: 12px; background: #f8fafc; font-size: 16px; outline: none; cursor: pointer; transition: 0.3s; }
.custom-select:focus { border-color: var(--brand-green); background: #fff; }
.location-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 20px; }
.loc-select-card {
border: 2px solid #e2e8f0;
border-radius: 16px;
padding: 25px 15px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
background: #fff;
}
.loc-select-card .loc-icon { font-size: 35px; color: #94a3b8; margin-bottom: 15px; transition: 0.3s; }
.loc-select-card h4 { font-size: 15px; color: var(--brand-dark); font-weight: 700; margin: 0; }
/* Active State for Location Cards */
.loc-select-card.active {
border-color: var(--brand-green);
background: rgba(19, 201, 167, 0.05);
box-shadow: 0 10px 20px rgba(19, 201, 167, 0.1);
transform: translateY(-5px);
}
.loc-select-card.active .loc-icon { color: var(--brand-green); }
.btn-large { padding: 18px 40px; font-size: 18px; border-radius: 50px; }
.mt-4 { margin-top: 30px; } .mt-5 { margin-top: 50px; }
.error-msg-hidden { display: none; color: #e74c3c; text-align: center; margin-top: 20px; font-weight: 600; font-size: 15px; }
/* ==========================================
POP-UP MODAL STYLING
========================================== */
.appointment-modal-overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(10, 31, 36, 0.8); backdrop-filter: blur(5px);
z-index: 99999; display: flex; justify-content: center; align-items: center;
opacity: 0; pointer-events: none; transition: 0.4s ease;
}
.appointment-modal-overlay.active { opacity: 1; pointer-events: all; }
.appointment-modal-box {
background: #ffffff; width: 90%; max-width: 500px;
border-radius: 24px; padding: 40px; position: relative;
transform: translateY(30px) scale(0.95); transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
box-shadow: 0 25px 50px rgba(0,0,0,0.2);
}
.appointment-modal-overlay.active .appointment-modal-box { transform: translateY(0) scale(1); }
.close-modal-btn {
position: absolute; top: 20px; right: 20px;
background: #f1f5f9; border: none; width: 35px; height: 35px;
border-radius: 50%; color: #64748b; font-size: 18px; cursor: pointer; transition: 0.3s;
}
.close-modal-btn:hover { background: #e2e8f0; color: #e74c3c; transform: rotate(90deg); }
.modal-header { margin-bottom: 25px; border-bottom: 1px solid #e2e8f0; padding-bottom: 20px; }
.modal-header h3 { font-size: 24px; color: var(--brand-dark); margin-bottom: 5px; }
.booking-summary-text { font-size: 14px; color: var(--brand-green); font-weight: 600; padding: 10px; background: rgba(19, 201, 167, 0.1); border-radius: 8px; }
@media (max-width: 768px) {
.selection-grid { grid-template-columns: 1fr; gap: 10px; }
.selection-grid .text-center { margin: 10px 0; }
.booking-step-card, .appointment-modal-box { padding: 30px 20px; }
.step-badge { left: 20px; }
}
/* ─── STATIC HERO BANNER ─── */
.static-article-hero {
position: relative;
width: 100%;
min-height: 55vh; /* Gives it a nice, expansive height */
display: flex;
align-items: flex-end; /* Aligns text towards the bottom */
padding-bottom: 60px;
margin-top: 70px; /* Adjust based on your header height */
overflow: hidden;
}
.hero-bg {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-size: cover;
background-position: center 30%; /* Focuses slightly above the center of the image */
z-index: 1;
}
.hero-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
/* Dark gradient that is heavier at the bottom to make white text pop */
background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,30,40,0.85) 100%);
z-index: 2;
}
.hero-content-wrapper {
position: relative;
z-index: 3;
max-width: 900px; /* Keeps line length readable */
width: 100%;
}
.category-pill-solid {
background-color: #008080; /* Corporate Teal */
color: #ffffff;
padding: 6px 16px;
border-radius: 4px;
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
display: inline-block;
margin-bottom: 20px;
}
.article-h1 {
color: #ffffff;
font-size: 3.2rem;
font-weight: 800;
line-height: 1.2;
margin-bottom: 20px;
text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.article-meta-info {
display: flex;
align-items: center;
gap: 15px;
color: rgba(255, 255, 255, 0.9);
font-size: 0.95rem;
font-weight: 500;
}
.meta-divider {
color: rgba(255, 255, 255, 0.5);
}
/* ─── ARTICLE CONTENT STYLING ─── */
.text-teal {
color: #008080;
margin-right: 10px;
}
.custom-bullet-list {
list-style: none;
padding-left: 0;
margin: 20px 0;
}
.custom-bullet-list li {
font-size: 1.1rem;
color: #444;
margin-bottom: 12px;
display: flex;
align-items: center;
}
/* ─── MODERN BLOCKQUOTE ─── */
.modern-quote {
background: #f4fbfb;
border-left: 5px solid #008080;
padding: 30px;
border-radius: 0 12px 12px 0;
margin: 40px 0;
position: relative;
}
.quote-icon {
font-size: 2rem;
color: rgba(0, 128, 128, 0.15);
position: absolute;
top: 20px;
left: 20px;
}
.modern-quote p {
font-size: 1.25rem;
font-weight: 600;
color: #2c3e50;
margin: 0;
line-height: 1.6;
position: relative;
z-index: 2;
}
/* ─── SHARE BAR ─── */
.share-bar-horizontal {
display: flex;
align-items: center;
gap: 15px;
padding: 20px 0;
border-bottom: 1px solid #eee;
margin-bottom: 30px;
}
.share-label {
font-weight: 600;
color: #777;
font-size: 0.9rem;
}
.share-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
color: #fff;
text-decoration: none;
transition: transform 0.2s ease;
}
.share-icon:hover { transform: translateY(-3px); }
.share-icon.whatsapp { background: #25D366; }
.share-icon.facebook { background: #3b5998; }
.share-icon.linkedin { background: #0077b5; }
.share-icon.copy { background: #6c757d; }
/* ─── CONCLUSION BOX ─── */
.article-conclusion {
background: #ffffff;
border: 1px solid #eee;
padding: 30px;
border-radius: 12px;
margin-top: 40px;
box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}
.article-conclusion h3 {
color: #008080;
margin-bottom: 15px;
}
/* ─── SIDEBAR CALL TO ACTION ─── */
.modern-cta-widget {
background: linear-gradient(135deg, #008080, #005959);
color: white;
padding: 30px;
border-radius: 16px;
text-align: center;
box-shadow: 0 10px 20px rgba(0, 128, 128, 0.2);
}
.cta-icon {
font-size: 2.5rem;
margin-bottom: 15px;
color: #008080;
}
.modern-cta-widget h3 { color: white; margin-bottom: 10px; }
.modern-cta-widget p { color: rgba(255, 255, 255, 0.9); margin-bottom: 20px; font-size: 0.95rem; }
.modern-cta-widget .btn-primary {
background: white;
color: #008080;
}
.modern-cta-widget .btn-primary:hover {
background: #f0f0f0;
}
/* Dark Overlay with Blur Effect */
.popup-overlay {
display: none; /* Hidden by default */
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(4px); /* Modern frosted glass effect */
z-index: 99999;
justify-content: center;
align-items: center;
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
/* Premium Widget Box */
.popup-widget {
position: relative;
background: #ffffff;
border-radius: 12px;
width: 90%;
max-width: 400px;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
overflow: hidden;
border-top: 5px solid var(--primary-blue, #0056b3); /* Accent Line */
}
/* Header Styling */
.popup-header {
padding: 25px 25px 15px;
text-align: center;
border-bottom: 1px solid #f1f5f9;
}
.popup-header .widget-title {
margin: 0;
font-size: 22px;
font-weight: 700;
color: var(--primary-blue, #0056b3);
}
.popup-header .widget-subtitle {
margin: 8px 0 0;
font-size: 13px;
color: #64748b;
}
/* Close Button */
.close-btn {
position: absolute;
top: 12px; right: 18px;
font-size: 24px;
font-weight: bold;
color: #94a3b8;
cursor: pointer;
line-height: 1;
transition: color 0.2s;
}
.close-btn:hover { color: #0f172a; }
/* Form Layout */
.pro-form {
padding: 20px 25px 25px;
text-align: left;
}
.form-group {
margin-bottom: 16px;
}
.form-group label {
display: block;
font-weight: 600;
margin-bottom: 6px;
font-size: 13px;
color: #334155;
}
/* Input Fields Styling */
.pro-form input[type="text"],
.pro-form input[type="email"],
.pro-form textarea {
width: 100%;
padding: 11px 12px;
border: 1px solid #cbd5e1;
border-radius: 6px;
box-sizing: border-box;
font-family: inherit;
font-size: 14px;
background-color: #f8fafc;
color: #0f172a;
transition: all 0.3s ease;
}
/* Smooth Glow on Focus */
.pro-form input:focus,
.pro-form textarea:focus {
outline: none;
border-color: var(--brand-green, #0056b3);
background-color: #ffffff;
box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.15);
}
.pro-form textarea {
height: 80px;
resize: vertical;
}
/* Mobile Input Specifics */
.mobile-input-group {
display: flex;
border: 1px solid #cbd5e1;
border-radius: 6px;
background: #f8fafc;
overflow: hidden;
transition: all 0.3s ease;
}
.mobile-input-group:focus-within {
border-color: var(--brand-green, #0056b3);
box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.15);
background: #ffffff;
}
.country-code {
display: flex; align-items: center; gap: 6px;
background: #f1f5f9; padding: 0 12px;
border-right: 1px solid #cbd5e1;
font-size: 13px; font-weight: bold; color: #475569;
user-select: none;
}
.country-code img { width: 18px; height: 12px; object-fit: cover; border: 1px solid #e2e8f0; border-radius: 2px;}
.mobile-input-group input { border: none !important; background: transparent !important; box-shadow: none !important; }
/* Submit Button */
.submit-btn {
width: 100%;
padding: 13px;
margin-top: 5px;
background-color: var(--brand-dark, #0056b3);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 700;
font-size: 15px;
letter-spacing: 0.5px;
transition: all 0.2s ease;
}
.submit-btn:hover {
background-color: #004494; /* Slightly darker on hover */
box-shadow: 0 4px 12px rgba(0, 86, 179, 0.3);
}
.submit-btn:active { transform: translateY(1px); }
/* Status Text */
.status-message {
margin-top: 12px;
font-weight: 600;
text-align: center;
font-size: 13px;
min-height: 20px;
}
/* Slide Down Animation */
@keyframes slideDown {
from { transform: translateY(-30px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}