/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
color: #333;
overflow-x: hidden;
}
/* Global heading styles */
h3 {
font-family: 'Playfair Display', serif;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Hero Section with Banner Carousel */
.hero {
background: #E6D9CC;
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
color: white;
}
/* Single banner hero (no carousel) */
.hero-single .hero-container {
position: relative;
width: 100%;
}
.banner-carousel {
width: 100%;
height: 100%;
position: relative;
}
.banner-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transform: translateX(100%);
/* transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s ease; */
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
will-change: transform, opacity;
display: flex;
align-items: center;
}
.banner-slide.active {
opacity: 1;
transform: translateX(0);
}
.banner-slide.prev {
transform: translateX(-100%);
}
.arrow-btn {
width: 50px;
height: 50px;
border: 2px solid transparent;
background: transparent;
color: white;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.3s ease, transform 0.3s ease;
backdrop-filter: none;
font-size: 18px;
}
/* Specific styling for the nextBanner button */
#nextBanner {
background: #2c5aa0 !important;
border-radius: 50%;
}
/* Add border radius to any divs within the button */
#nextBanner div {
border-radius: 50%;
}
/* Specific styling for the prevBanner button */
#prevBanner {
background: #2c5aa0 !important;
border-radius: 50%;
}
/* Add border radius to any divs within the button */
#prevBanner div {
border-radius: 50%;
}
.side-arrow {
position: absolute;
top: 70%;
transform: translateY(-50%);
z-index: 15;
}
@media (min-width: 769px) and (max-width: 1024px) {
.side-arrow {
top: 80%;
}
}
@media (min-width: 1025px) {
.side-arrow {
top: 80%;
}
}
.arrow-btn:hover {
color: rgba(255, 255, 255, 0.8);
}
.left-arrow {
left: 30px;
}
.right-arrow {
right: 30px;
}
/* Banner Image Styles */
.banner-image-container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
border-radius: 20px;
overflow: visible;
}
.banner-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
position: relative;
z-index: 2;
}
/* Fix for banner 2 because it appears smaller than the other two banners*/
.banner-slide[data-banner="2"] .banner-image-container {
transform: scale(1.02); /* Scale up the entire container by 10% */
transform-origin: center;
}
/* Decorative Shapes */
.banner-image-container::before {
content: '';
position: absolute;
top: -20px;
left: -20px;
width: 80px;
height: 80px;
background: linear-gradient(135deg, #2c5aa0, #4a90e2);
border-radius: 50%;
z-index: 1;
}
.banner-image-container::after {
content: '';
position: absolute;
bottom: -15px;
right: -15px;
width: 60px;
height: 60px;
background: linear-gradient(135deg, #e74c3c, #f39c12);
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
z-index: 1;
}
/* Additional decorative elements */
.banner-image-container {
background:
radial-gradient(circle at 20% 80%, rgba(44, 90, 160, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(231, 76, 60, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(243, 156, 18, 0.05) 0%, transparent 50%);
}
/* ------------------- Request a Callback Section ---------------- */
.callback-section {
background: #E6D9CC;
padding: 10px 0;
color: #5a6c7d;
}
.callback-content {
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.callback-header h2 {
font-size: 1.2rem;
font-weight: 400;
margin-bottom: 12px;
opacity: 0.9;
}
.callback-header h1 {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 20px;
color: #2c5aa0;
text-align: center;
}
.callback-form {
max-width: 800px;
margin: 0 auto;
}
.form-row {
display: flex;
gap: 15px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 20px;
}
.form-group {
position: relative;
flex: 1;
min-width: 200px;
}
.submit-container {
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
}
.callback-form input,
.callback-form textarea,
.callback-form select {
width: 100%;
padding: 16px 20px;
border: 2px solid #A58F76;
border-radius: 12px;
background: rgba(255, 255, 255, 0.1);
color: #1e3a8a;
font-size: 1rem;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
min-height: 56px;
box-sizing: border-box;
}
/* Make select appearance consistent with inputs across browsers */
.callback-form select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: rgba(255, 255, 255, 0.1);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 16px;
padding-right: 44px; /* space for caret */
}
.callback-form input::placeholder,
.callback-form textarea::placeholder {
color: #2c5aa0; /* blue */
}
.callback-form select option {
background: #027E92;
color: #ffffff;
padding: 8px;
}
.callback-form select option:first-child {
color: rgba(255, 255, 255, 0.7);
}
.callback-form input:focus,
.callback-form textarea:focus,
.callback-form select:focus {
outline: none;
border-color: #F4D03F;
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 0 0 3px rgba(244, 208, 63, 0.2);
}
.submit-btn {
background: linear-gradient(135deg, rgb(44, 90, 160) 0%, rgb(30, 58, 138) 100%);
color: white;
border: none;
padding: 18px 32px;
border-radius: 12px;
font-weight: 700;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.3s ease;
min-width: 140px;
white-space: nowrap;
}
.submit-btn:hover {
background: #F7DC6F;
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(244, 208, 63, 0.4);
}
/* Responsive adjustments for Callback */
/* Large tablets and small desktops */
@media (max-width: 1024px) {
.callback-section {
padding: 60px 20px;
}
.callback-content {
max-width: 900px;
}
.callback-header h1 {
font-size: 2.5rem;
margin-bottom: 40px;
}
.callback-header h2 {
font-size: 1.1rem;
margin-bottom: 15px;
}
.form-group {
min-width: 180px;
}
.callback-form input,
.callback-form textarea,
.callback-form select {
padding: 15px 18px;
font-size: 1rem;
}
}
/* Tablets */
@media (max-width: 768px) {
.callback-section {
padding: 50px 15px;
}
.callback-content {
max-width: 100%;
}
.callback-header h1 {
font-size: 2.2rem;
margin-bottom: 35px;
line-height: 1.2;
}
.callback-header h2 {
font-size: 1rem;
margin-bottom: 12px;
}
.form-row {
flex-direction: column;
gap: 18px;
margin-bottom: 25px;
}
.form-group {
min-width: unset;
}
.callback-form input,
.callback-form textarea,
.callback-form select {
padding: 16px 20px;
font-size: 1rem;
border-radius: 10px;
}
.submit-container {
margin-top: 25px;
}
.submit-btn {
padding: 16px 40px;
font-size: 1.05rem;
min-width: 160px;
border-radius: 10px;
}
}
/* Mobile devices */
@media (max-width: 480px) {
.callback-section {
padding: 40px 15px;
}
.callback-header h1 {
font-size: 1.9rem;
margin-bottom: 30px;
line-height: 1.3;
}
.callback-header h2 {
font-size: 0.95rem;
margin-bottom: 10px;
line-height: 1.4;
}
.form-row {
gap: 20px;
margin-bottom: 30px;
}
.callback-form input,
.callback-form textarea,
.callback-form select {
padding: 18px 20px;
font-size: 1rem;
border-radius: 12px;
border-width: 2px;
}
.submit-container {
margin-top: 30px;
}
.submit-btn {
padding: 18px 32px;
font-size: 1.1rem;
width: 100%;
max-width: 300px;
border-radius: 12px;
min-height: 56px; /* Better touch target */
}
}
/* Extra small devices */
@media (max-width: 360px) {
.callback-section {
padding: 35px 12px;
}
.callback-header h1 {
font-size: 1.7rem;
margin-bottom: 25px;
}
.callback-header h2 {
font-size: 0.9rem;
margin-bottom: 8px;
}
.callback-form input,
.callback-form textarea,
.callback-form select {
padding: 16px 18px;
font-size: 0.95rem;
}
.submit-btn {
padding: 16px 28px;
font-size: 1rem;
min-height: 52px;
}
}
/* Tablet landscape optimization */
@media (max-width: 1024px) and (orientation: landscape) {
.callback-section {
padding: 40px 20px;
}
.callback-header h1 {
font-size: 2.3rem;
margin-bottom: 30px;
}
.form-row {
max-width: 800px;
margin: 0 auto 20px auto;
}
.submit-container {
margin-top: 15px;
}
}
/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
.callback-form input,
.callback-form textarea,
.callback-form select {
min-height: 48px; /* Minimum touch target size */
font-size: 16px; /* Prevents zoom on iOS */
}
.submit-btn {
min-height: 48px;
min-width: 120px;
}
/* Larger touch targets for tablets */
@media (min-width: 481px) {
.callback-form input,
.callback-form textarea,
.callback-form select {
min-height: 52px;
}
.submit-btn {
min-height: 52px;
}
}
}
.hero-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
min-height: 100vh;
box-sizing: border-box;
background: #E6D9CC;
/* Testing control for vertical positioning */
--hero-vertical-offset: -100px; /* Adjust this value to move content up/down */
--hero-content-padding-top: 0px; /* Alternative: adjust top padding of content */
--hero-content-padding-bottom: 0px; /* Alternative: adjust bottom padding of content */
/* transform: translateY(var(--hero-vertical-offset)); */
}
.hero-content {
z-index: 2;
padding-top: var(--hero-content-padding-top);
padding-bottom: var(--hero-content-padding-bottom);
}
.hero-title {
font-size: 3.5rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 1.5rem;
color: #2c5aa0;
font-family: 'Playfair Display', serif;
}
.highlight {
color: #d4a574;
position: relative;
}
.hero-description {
/* margin-bottom: 2.5rem; */
font-size: 1.1rem;
color: rgb(90, 108, 125);
max-width: 900px;
line-height: 1.6;
margin: 0px auto 50px;
/* font-size: 1.2rem; */
/* color: #5a6c7d; */
/* text-align: center; */
/* line-height: 1.6; */
}
.hero-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.btn {
padding: 1rem 2rem;
border: none;
border-radius: 50px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
text-align: center;
}
.btn-primary {
background: linear-gradient(135deg, #2c5aa0 0%, #1e3a8a 100%);
color: white;
box-shadow: 0 4px 15px rgba(44, 90, 160, 0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(44, 90, 160, 0.4);
}
.btn-secondary {
background: transparent;
color: #2c5aa0;
border: 2px solid #2c5aa0;
}
.btn-secondary:hover {
background: #2c5aa0;
color: white;
transform: translateY(-2px);
}
/* Hero Image/Illustration */
.hero-image {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 500px;
}
.doctor-illustration {
position: relative;
width: 400px;
height: 400px;
}
.doctor-coat {
position: absolute;
top: 50px;
left: 50px;
width: 300px;
height: 350px;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 20px 20px 0 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.doctor-coat::before {
content: '';
position: absolute;
top: 20px;
left: 20px;
right: 20px;
height: 40px;
background: #2c5aa0;
border-radius: 10px;
}
.doctor-hand {
position: absolute;
bottom: 100px;
right: 20px;
width: 80px;
height: 120px;
background: #fdbcb4;
border-radius: 40px 40px 20px 20px;
transform: rotate(-15deg);
}
.stethoscope {
position: absolute;
top: 150px;
right: 10px;
z-index: 10;
}
.stethoscope-head {
width: 60px;
height: 60px;
background: #e74c3c;
border-radius: 50%;
position: relative;
box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
}
.stethoscope-head::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
background: #c0392b;
border-radius: 50%;
}
.stethoscope-tube {
position: absolute;
top: 30px;
left: -5px;
width: 10px;
height: 200px;
background: #e74c3c;
border-radius: 5px;
transform: rotate(-20deg);
}
/* Hero Wave */
.hero-wave {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.hero-wave svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 120px;
}
.hero-wave .shape-fill {
fill: #ffffff;
}
/* Sections */
.section-header {
text-align: center;
margin-bottom: 4rem;
}
.section-header h2 {
font-size: 2.5rem;
color: #2c5aa0;
margin-bottom: 1rem;
font-weight: 700;
}
.section-header p {
font-size: 1.2rem;
color: #666;
max-width: 600px;
margin: 0 auto;
}
/* Services Section */
.services {
padding: 6rem 0;
background: #f8f9fa;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.service-card {
background: white;
padding: 2.5rem;
border-radius: 15px;
text-align: center;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease;
}
.service-card:hover {
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.service-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #2c5aa0 0%, #1e3a8a 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
}
.service-icon i {
font-size: 2rem;
color: white;
}
.service-card h3 {
font-size: 1.5rem;
color: #2c5aa0;
margin-bottom: 1rem;
font-weight: 600;
}
.service-card p {
color: #666;
line-height: 1.6;
}
/* Doctors Section */
.doctors {
padding: 6rem 0;
background: white;
}
.doctors-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
.doctor-card {
background: #f8f9fa;
border-radius: 15px;
padding: 2rem;
text-align: center;
}
.doctor-image {
margin-bottom: 1.5rem;
}
.doctor-avatar {
width: 120px;
height: 120px;
background: linear-gradient(135deg, #2c5aa0 0%, #1e3a8a 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.doctor-avatar i {
font-size: 3rem;
color: white;
}
.doctor-info h3 {
font-size: 1.3rem;
color: #2c5aa0;
margin-bottom: 0.5rem;
font-weight: 600;
}
.specialty {
color: #d4a574;
font-weight: 500;
margin-bottom: 0.5rem;
}
.experience {
color: #666;
font-size: 0.9rem;
}
/* Contact Section */
.contact {
padding: 6rem 0;
background: #f8f9fa;
}
.contact-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
}
.contact-info {
display: flex;
flex-direction: column;
gap: 2rem;
}
.contact-item {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.contact-item i {
font-size: 1.5rem;
color: #2c5aa0;
margin-top: 0.2rem;
}
.contact-item h4 {
color: #2c5aa0;
margin-bottom: 0.5rem;
font-weight: 600;
}
.contact-item p {
color: #666;
margin: 0;
}
.contact-form {
background: white;
padding: 2.5rem;
border-radius: 15px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 1rem;
border: 2px solid #A58F76;
border-radius: 10px;
font-size: 1rem;
transition: border-color 0.3s ease;
font-family: inherit;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: #2c5aa0;
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
/* Footer */
.footer {
background: #1a1a1a;
color: white;
padding: 3rem 0 1rem;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.footer-section h4 {
color: #2c5aa0;
margin-bottom: 1rem;
font-weight: 600;
}
.footer-section p {
color: #ccc;
line-height: 1.6;
margin-bottom: 1rem;
}
.footer-section ul {
list-style: none;
}
.footer-section ul li {
margin-bottom: 0.5rem;
}
.footer-section ul li a {
color: #ccc;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-section ul li a:hover {
color: #2c5aa0;
}
.social-links {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.social-links a {
width: 40px;
height: 40px;
background: #2c5aa0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
transition: background 0.3s ease;
}
.social-links a:hover {
background: #1e3a8a;
}
.emergency-number {
font-size: 1.5rem;
color: #e74c3c;
font-weight: 700;
margin: 0.5rem 0;
}
.footer-bottom {
border-top: 1px solid #333;
padding-top: 1rem;
text-align: center;
color: #ccc;
}
/* Tablet Design */
@media (max-width: 1024px) {
.hero-container {
gap: 1.5rem;
padding: 1.5rem;
transform: translateY(-190px); /* Move container up by 50px */
}
.hero-title {
font-size: 2.8rem;
line-height: 1.2;
}
.hero-description {
font-size: 1rem;
margin-bottom: 1.5rem;
}
.hero-image {
height: 350px;
}
.banner-image-container {
padding: 10px;
}
.banner-image {
width: 100%;
height: 100%;
border-radius: 20px;
}
.banner-image-container::before {
width: 60px;
height: 60px;
top: -15px;
left: -15px;
}
.banner-image-container::after {
width: 45px;
height: 45px;
bottom: -10px;
right: -10px;
}
}
/* Mobile Design */
@media (max-width: 768px) {
/* Keep mobile navigation behavior */
.hamburger { display: flex; }
.nav-menu {
position: fixed;
left: -100%;
top: 70px;
flex-direction: column;
background-color: white;
width: 100%;
text-align: center;
transition: 0.3s;
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
padding: 2rem 0;
}
.nav-menu.active { left: 0; }
.nav-menu li { margin: 1rem 0; }
.hamburger.active .bar:nth-child(2) { opacity: 0; }
.hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
/* Mobile banner: show actual image element (same as desktop) and stack layout */
.banner-slide[data-banner="1"],
.banner-slide[data-banner="2"],
.banner-slide[data-banner="3"] {
background: none !important;
background-image: none !important;
background-size: auto !important;
background-position: initial !important;
background-repeat: initial !important;
}
.hero-container {
grid-template-columns: 1fr;
text-align: center;
gap: 0.8rem;
padding: 0.75rem 0.75rem;
min-height: auto;
align-items: center;
justify-content: center;
box-sizing: border-box;
transform: translate(3.8px); /* Move container right 10px and up 50px */
}
.hero-content {
order: 1;
padding: 0.6rem 0;
display: block;
background: transparent;
border-radius: 0;
box-shadow: none;
backdrop-filter: none;
}
.hero-image { display: flex; height: 240px; }
/* Keep carousel arrows as-is (hidden on mobile) */
.arrow-btn,
.side-arrow,
.left-arrow,
.right-arrow { display: none !important; }
.hero-title {
font-size: 1.8rem;
line-height: 1.25;
margin-bottom: 0.6rem;
color: #2c5aa0;
font-family: 'Playfair Display', serif;
}
.hero-description {
font-size: 0.9rem;
line-height: 1.45;
margin-bottom: 0.8rem;
padding: 0 0.2rem;
color: #5a6c7d;
}
.hero-buttons {
justify-content: center;
gap: 0.8rem;
flex-direction: column;
align-items: center;
}
.btn {
padding: 0.7rem 1.1rem;
font-size: 0.9rem;
width: 100%;
max-width: 260px;
}
.doctor-illustration { width: 250px; height: 250px; }
.doctor-coat { width: 200px; height: 250px; }
.contact-content { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 480px) {
/* Mobile banner: use same image element as desktop, remove slide backgrounds */
.banner-slide[data-banner="1"],
.banner-slide[data-banner="2"],
.banner-slide[data-banner="3"] {
background: none !important;
background-image: none !important;
background-size: auto !important;
background-position: initial !important;
background-repeat: initial !important;
}
.hero-container {
grid-template-columns: 1fr;
text-align: center;
gap: 0.8rem;
padding: 0.75rem 0.75rem;
min-height: auto;
align-items: center;
justify-content: center;
box-sizing: border-box;
transform: translateY(-35px); /* Move container up by 50px */
}
.hero-content {
padding: 0.6rem 0;
display: block;
background: transparent;
border-radius: 0;
box-shadow: none;
backdrop-filter: none;
}
.hero-title {
font-size: 1.8rem;
line-height: 1.3;
margin-bottom: 0.8rem;
color: #2c5aa0;
}
.hero-description {
font-size: 0.95rem;
line-height: 1.5;
margin-bottom: 1rem;
padding: 0 0.25rem;
color: #5a6c7d;
}
.hero-image { display: flex; height: 240px; }
.hero-buttons {
justify-content: center;
gap: 0.8rem;
flex-direction: column;
align-items: center;
}
.btn { padding: 0.7rem 1.2rem; font-size: 0.9rem; width: 100%; max-width: 260px; }
.section-header h2 { font-size: 2rem; }
.service-card, .doctor-card { padding: 1.5rem; }
.contact-form { padding: 1.5rem; }
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;
}
/* Doctor Illustration */
.doctor-illustration {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
}
.stethoscope {
position: absolute;
top: 50px;
left: 50px;
z-index: 3;
}
.stethoscope-head {
width: 40px;
height: 40px;
background: #e74c3c;
border-radius: 50%;
position: relative;
}
.stethoscope-head::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background: #c0392b;
border-radius: 50%;
}
.stethoscope-tube {
width: 4px;
height: 150px;
background: #34495e;
margin: 0 auto;
border-radius: 2px;
position: relative;
}
.stethoscope-tube::before {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 20px;
background: #5a6c7d;
border-radius: 50%;
}
.doctor-coat {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 250px;
background: linear-gradient(to bottom, #ecf0f1 0%, #bdc3c7 100%);
border-radius: 100px 100px 0 0;
z-index: 1;
}
.doctor-coat::before {
content: '';
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: 160px;
height: 200px;
background: white;
border-radius: 80px 80px 0 0;
}
.doctor-hand {
position: absolute;
top: 120px;
right: 30px;
width: 60px;
height: 80px;
background: #f4d1ae;
border-radius: 30px;
z-index: 2;
}
.doctor-hand::before {
content: '';
position: absolute;
top: -10px;
left: 10px;
width: 40px;
height: 40px;
background: #f4d1ae;
border-radius: 50%;
}
/* Department Illustration */
.department-illustration {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.medical-cross {
position: relative;
width: 120px;
height: 120px;
z-index: 2;
}
.cross-vertical, .cross-horizontal {
position: absolute;
background: #e74c3c;
border-radius: 10px;
}
.cross-vertical {
width: 30px;
height: 120px;
left: 50%;
transform: translateX(-50%);
}
.cross-horizontal {
width: 120px;
height: 30px;
top: 50%;
transform: translateY(-50%);
}
.department-icons {
position: absolute;
width: 100%;
height: 100%;
}
.dept-icon {
position: absolute;
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.dept-icon.heart {
top: 20px;
left: 20px;
color: #e74c3c;
}
.dept-icon.brain {
top: 20px;
right: 20px;
color: #9b59b6;
}
.dept-icon.bone {
bottom: 20px;
left: 20px;
color: #f39c12;
}
.dept-icon.baby {
bottom: 20px;
right: 20px;
color: #3498db;
}
/* Doctors Illustration */
.doctors-illustration {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.doctor-team {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
.doctor-avatar {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
color: #5a6c7d;
position: relative;
}
.doctor-avatar.doc1 {
color: #3498db;
}
.doctor-avatar.doc2 {
color: #e74c3c;
transform: translateY(-20px);
}
.doctor-avatar.doc3 {
color: #27ae60;
}
.medical-badge {
position: absolute;
top: 20px;
right: 20px;
width: 60px;
height: 60px;
background: #f1c40f;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
color: white;
}
/* Hover effects */
/* ===== CLINICAL EXCELLENCE SECTION ===== */
.clinical-excellence {
padding: 80px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
overflow: hidden;
}
.clinical-excellence::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.3;
z-index: 1;
}
.clinical-excellence .container {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.section-title {
font-size: 2.8rem;
font-weight: 700;
color: #2c5aa0;
text-align: center;
margin-bottom: 20px;
line-height: 1.2;
position: relative;
font-family: 'Playfair Display', serif;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
border-radius: 2px;
}
.section-description {
/* font-size: 1.1rem; */
/* color: #5a6c7d; */
text-align: center;
/* max-width: 800px; */
/* margin: 0 auto 50px; */
/* line-height: 1.6; */
font-size: 1.1rem;
color: rgb(90, 108, 125);
max-width: 900px;
line-height: 1.6;
margin: 0px auto 50px;
}
/* Specialty Tabs */
.specialty-tabs {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 40px;
padding: 0 20px;
}
.tab-btn {
background: white;
border: 2px solid #e1e8ed;
color: #5a6c7d;
padding: 12px 24px;
border-radius: 25px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
text-align: center;
white-space: nowrap;
}
.tab-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, #3498db, #2980b9);
transition: left 0.3s ease;
z-index: -1;
}
.tab-btn:hover {
color: white;
border-color: #3498db;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}
.tab-btn:hover::before {
left: 0;
}
.tab-btn.active {
background: linear-gradient(90deg, #3498db, #2980b9);
color: white;
border-color: #3498db;
box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}
/* Content Area */
.content-area {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
margin-top: 40px;
}
.content-left {
position: relative;
}
.tab-content {
display: none;
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease;
}
.tab-content.active {
display: block;
opacity: 1;
transform: translateY(0);
}
.tab-content h2 {
font-size: 2.2rem;
font-weight: 700;
/* color: #5a6c7d; */
margin-bottom: 20px;
position: relative;
color: #2c5aa0;
}
.tab-content h2::before {
content: '';
position: absolute;
left: -20px;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 40px;
background: linear-gradient(180deg, #3498db, #2980b9);
border-radius: 2px;
}
.tab-content p {
font-size: 1.1rem;
/* color: #5a6c7d; */
/* line-height: 1.7; */
text-align: justify;
/* font-size: 1.1rem; */
color: rgb(90, 108, 125);
max-width: 900px;
line-height: 1.6;
margin: 0px auto 50px;
}
/* Content Right */
.content-right {
position: relative;
}
.image-container {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.image-container:hover {
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}
.specialty-image {
width: 100%;
height: 400px;
object-fit: cover;
}
/* Navigation Arrows */
.nav-arrows {
position: absolute;
bottom: 20px;
right: 20px;
display: flex;
gap: 10px;
}
.nav-arrow {
width: 45px;
height: 45px;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
color: #3498db;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.nav-arrow:hover {
background: #3498db;
color: white;
box-shadow: 0 8px 20px rgba(52, 152, 219, 0.3);
}
/* Responsive Design */
/* Tablets (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
.tab-btn {
font-size: 0.8rem;
padding: 0px 0px !important;
/* min-width: auto !important; */
/* text-align: center;
white-space: nowrap; */
}
.tab-content {
height: 300px;
display: flex;
flex-direction: column;
}
.tab-content h2 {
height: 40px;
flex-shrink: 0;
}
.tab-content p {
height: 254px;
overflow-y: auto;
}
.specialty-image {
height: 300px;
}
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Hero Section with Banner Carousel */
.hero {
background: #E6D9CC;
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
color: white;
}
/* Single banner hero (no carousel) */
.hero-single .hero-container {
position: relative;
width: 100%;
}
.banner-carousel {
width: 100%;
height: 100%;
position: relative;
}
.banner-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transform: translateX(100%);
/* transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s ease; */
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
will-change: transform, opacity;
display: flex;
align-items: center;
}
.banner-slide.active {
opacity: 1;
transform: translateX(0);
}
.banner-slide.prev {
transform: translateX(-100%);
}
.arrow-btn {
width: 50px;
height: 50px;
border: 2px solid transparent;
background: transparent;
color: white;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.3s ease, transform 0.3s ease;
backdrop-filter: none;
font-size: 18px;
}
/* Specific styling for the nextBanner button */
#nextBanner {
background: #2c5aa0 !important;
border-radius: 50%;
}
/* Add border radius to any divs within the button */
#nextBanner div {
border-radius: 50%;
}
/* Specific styling for the prevBanner button */
#prevBanner {
background: #2c5aa0 !important;
border-radius: 50%;
}
/* Add border radius to any divs within the button */
#prevBanner div {
border-radius: 50%;
}
.side-arrow {
position: absolute;
top: 70%;
transform: translateY(-50%);
z-index: 15;
}
@media (min-width: 769px) and (max-width: 1024px) {
.side-arrow {
top: 80%;
}
}
@media (min-width: 1025px) {
.side-arrow {
top: 80%;
}
}
.arrow-btn:hover {
color: rgba(255, 255, 255, 0.8);
}
.left-arrow {
left: 30px;
}
.right-arrow {
right: 30px;
}
/* Banner Image Styles */
.banner-image-container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
border-radius: 20px;
overflow: visible;
}
.banner-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
position: relative;
z-index: 2;
}
/* Fix for banner 2 because it appears smaller than the other two banners*/
.banner-slide[data-banner="2"] .banner-image-container {
transform: scale(1.02); /* Scale up the entire container by 10% */
transform-origin: center;
}
/* Decorative Shapes */
.banner-image-container::before {
content: '';
position: absolute;
top: -20px;
left: -20px;
width: 80px;
height: 80px;
background: linear-gradient(135deg, #2c5aa0, #4a90e2);
border-radius: 50%;
z-index: 1;
}
.banner-image-container::after {
content: '';
position: absolute;
bottom: -15px;
right: -15px;
width: 60px;
height: 60px;
background: linear-gradient(135deg, #e74c3c, #f39c12);
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
z-index: 1;
}
/* Additional decorative elements */
.banner-image-container {
background:
radial-gradient(circle at 20% 80%, rgba(44, 90, 160, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(231, 76, 60, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(243, 156, 18, 0.05) 0%, transparent 50%);
}
/* ------------------- Request a Callback Section ---------------- */
.callback-section {
background: #E6D9CC;
padding: 10px 0;
color: #5a6c7d;
}
.callback-content {
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.callback-header h2 {
font-size: 1.2rem;
font-weight: 400;
margin-bottom: 12px;
opacity: 0.9;
}
.callback-header h1 {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 20px;
color: #2c5aa0;
text-align: center;
}
.callback-form {
max-width: 800px;
margin: 0 auto;
}
.form-row {
display: flex;
gap: 15px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 20px;
}
.form-group {
position: relative;
flex: 1;
min-width: 200px;
}
.submit-container {
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
}
.callback-form input,
.callback-form textarea,
.callback-form select {
width: 100%;
padding: 16px 20px;
border: 2px solid #A58F76;
border-radius: 12px;
background: rgba(255, 255, 255, 0.1);
color: #1e3a8a;
font-size: 1rem;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
min-height: 56px;
box-sizing: border-box;
}
/* Make select appearance consistent with inputs across browsers */
.callback-form select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: rgba(255, 255, 255, 0.1);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 16px;
padding-right: 44px; /* space for caret */
}
.callback-form input::placeholder,
.callback-form textarea::placeholder {
color: #2c5aa0; /* blue */
}
.callback-form select option {
background: #027E92;
color: #ffffff;
padding: 8px;
}
.callback-form select option:first-child {
color: rgba(255, 255, 255, 0.7);
}
.callback-form input:focus,
.callback-form textarea:focus,
.callback-form select:focus {
outline: none;
border-color: #F4D03F;
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 0 0 3px rgba(244, 208, 63, 0.2);
}
.submit-btn {
background: linear-gradient(135deg, rgb(44, 90, 160) 0%, rgb(30, 58, 138) 100%);
color: white;
border: none;
padding: 18px 32px;
border-radius: 12px;
font-weight: 700;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.3s ease;
min-width: 140px;
white-space: nowrap;
}
.submit-btn:hover {
background: #F7DC6F;
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(244, 208, 63, 0.4);
}
/* Responsive adjustments for Callback */
/* Large tablets and small desktops */
@media (max-width: 1024px) {
.callback-section {
padding: 60px 20px;
}
.callback-content {
max-width: 900px;
}
.callback-header h1 {
font-size: 2.5rem;
margin-bottom: 40px;
}
.callback-header h2 {
font-size: 1.1rem;
margin-bottom: 15px;
}
.form-group {
min-width: 180px;
}
.callback-form input,
.callback-form textarea,
.callback-form select {
padding: 15px 18px;
font-size: 1rem;
}
}
/* Tablets */
@media (max-width: 768px) {
.callback-section {
padding: 50px 15px;
}
.callback-content {
max-width: 100%;
}
.callback-header h1 {
font-size: 2.2rem;
margin-bottom: 35px;
line-height: 1.2;
}
.callback-header h2 {
font-size: 1rem;
margin-bottom: 12px;
}
.form-row {
flex-direction: column;
gap: 18px;
margin-bottom: 25px;
}
.form-group {
min-width: unset;
}
.callback-form input,
.callback-form textarea,
.callback-form select {
padding: 16px 20px;
font-size: 1rem;
border-radius: 10px;
}
.submit-container {
margin-top: 25px;
}
.submit-btn {
padding: 16px 40px;
font-size: 1.05rem;
min-width: 160px;
border-radius: 10px;
}
}
/* Mobile devices */
@media (max-width: 480px) {
.callback-section {
padding: 40px 15px;
}
.callback-header h1 {
font-size: 1.9rem;
margin-bottom: 30px;
line-height: 1.3;
}
.callback-header h2 {
font-size: 0.95rem;
margin-bottom: 10px;
line-height: 1.4;
}
.form-row {
gap: 20px;
margin-bottom: 30px;
}
.callback-form input,
.callback-form textarea,
.callback-form select {
padding: 18px 20px;
font-size: 1rem;
border-radius: 12px;
border-width: 2px;
}
.submit-container {
margin-top: 30px;
}
.submit-btn {
padding: 18px 32px;
font-size: 1.1rem;
width: 100%;
max-width: 300px;
border-radius: 12px;
min-height: 56px; /* Better touch target */
}
}
/* Extra small devices */
@media (max-width: 360px) {
.callback-section {
padding: 35px 12px;
}
.callback-header h1 {
font-size: 1.7rem;
margin-bottom: 25px;
}
.callback-header h2 {
font-size: 0.9rem;
margin-bottom: 8px;
}
.callback-form input,
.callback-form textarea,
.callback-form select {
padding: 16px 18px;
font-size: 0.95rem;
}
.submit-btn {
padding: 16px 28px;
font-size: 1rem;
min-height: 52px;
}
}
/* Tablet landscape optimization */
@media (max-width: 1024px) and (orientation: landscape) {
.callback-section {
padding: 40px 20px;
}
.callback-header h1 {
font-size: 2.3rem;
margin-bottom: 30px;
}
.form-row {
max-width: 800px;
margin: 0 auto 20px auto;
}
.submit-container {
margin-top: 15px;
}
}
/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
.callback-form input,
.callback-form textarea,
.callback-form select {
min-height: 48px; /* Minimum touch target size */
font-size: 16px; /* Prevents zoom on iOS */
}
.submit-btn {
min-height: 48px;
min-width: 120px;
}
/* Larger touch targets for tablets */
@media (min-width: 481px) {
.callback-form input,
.callback-form textarea,
.callback-form select {
min-height: 52px;
}
.submit-btn {
min-height: 52px;
}
}
}
.hero-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
min-height: 100vh;
box-sizing: border-box;
background: #E6D9CC;
/* Testing control for vertical positioning */
--hero-vertical-offset: -100px; /* Adjust this value to move content up/down */
--hero-content-padding-top: 0px; /* Alternative: adjust top padding of content */
--hero-content-padding-bottom: 0px; /* Alternative: adjust bottom padding of content */
transform: translateY(var(--hero-vertical-offset));
}
.hero-content {
z-index: 2;
padding-top: var(--hero-content-padding-top);
padding-bottom: var(--hero-content-padding-bottom);
}
.hero-title {
font-size: 3.5rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 1.5rem;
color: #2c5aa0;
font-family: 'Playfair Display', serif;
}
.highlight {
color: #d4a574;
position: relative;
}
.hero-description {
/* margin-bottom: 2.5rem; */
font-size: 1.1rem;
color: rgb(90, 108, 125);
max-width: 900px;
line-height: 1.6;
margin: 0px auto 50px;
/* font-size: 1.2rem; */
/* color: #5a6c7d; */
/* text-align: center; */
/* line-height: 1.6; */
}
.hero-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.btn {
padding: 1rem 2rem;
border: none;
border-radius: 50px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
text-align: center;
}
.btn-primary {
background: linear-gradient(135deg, #2c5aa0 0%, #1e3a8a 100%);
color: white;
box-shadow: 0 4px 15px rgba(44, 90, 160, 0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(44, 90, 160, 0.4);
}
.btn-secondary {
background: transparent;
color: #2c5aa0;
border: 2px solid #2c5aa0;
}
.btn-secondary:hover {
background: #2c5aa0;
color: white;
transform: translateY(-2px);
}
/* Hero Image/Illustration */
.hero-image {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 500px;
}
.doctor-illustration {
position: relative;
width: 400px;
height: 400px;
}
.doctor-coat {
position: absolute;
top: 50px;
left: 50px;
width: 300px;
height: 350px;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 20px 20px 0 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.doctor-coat::before {
content: '';
position: absolute;
top: 20px;
left: 20px;
right: 20px;
height: 40px;
background: #2c5aa0;
border-radius: 10px;
}
.doctor-hand {
position: absolute;
bottom: 100px;
right: 20px;
width: 80px;
height: 120px;
background: #fdbcb4;
border-radius: 40px 40px 20px 20px;
transform: rotate(-15deg);
}
.stethoscope {
position: absolute;
top: 150px;
right: 10px;
z-index: 10;
}
.stethoscope-head {
width: 60px;
height: 60px;
background: #e74c3c;
border-radius: 50%;
position: relative;
box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
}
.stethoscope-head::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
background: #c0392b;
border-radius: 50%;
}
.stethoscope-tube {
position: absolute;
top: 30px;
left: -5px;
width: 10px;
height: 200px;
background: #e74c3c;
border-radius: 5px;
transform: rotate(-20deg);
}
/* Hero Wave */
.hero-wave {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.hero-wave svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 120px;
}
.hero-wave .shape-fill {
fill: #ffffff;
}
/* Sections */
.section-header {
text-align: center;
margin-bottom: 4rem;
}
.section-header h2 {
font-size: 2.5rem;
color: #2c5aa0;
margin-bottom: 1rem;
font-weight: 700;
}
.section-header p {
font-size: 1.2rem;
color: #666;
max-width: 600px;
margin: 0 auto;
}
/* Services Section */
.services {
padding: 6rem 0;
background: #f8f9fa;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.service-card {
background: white;
padding: 2.5rem;
border-radius: 15px;
text-align: center;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease;
}
.service-card:hover {
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.service-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #2c5aa0 0%, #1e3a8a 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
}
.service-icon i {
font-size: 2rem;
color: white;
}
.service-card h3 {
font-size: 1.5rem;
color: #2c5aa0;
margin-bottom: 1rem;
font-weight: 600;
}
.service-card p {
color: #666;
line-height: 1.6;
}
/* Doctors Section */
.doctors {
padding: 6rem 0;
background: white;
}
.doctors-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
.doctor-card {
background: #f8f9fa;
border-radius: 15px;
padding: 2rem;
text-align: center;
}
.doctor-image {
margin-bottom: 1.5rem;
}
.doctor-avatar {
width: 120px;
height: 120px;
background: linear-gradient(135deg, #2c5aa0 0%, #1e3a8a 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.doctor-avatar i {
font-size: 3rem;
color: white;
}
.doctor-info h3 {
font-size: 1.3rem;
color: #2c5aa0;
margin-bottom: 0.5rem;
font-weight: 600;
}
.specialty {
color: #d4a574;
font-weight: 500;
margin-bottom: 0.5rem;
}
.experience {
color: #666;
font-size: 0.9rem;
}
/* Contact Section */
.contact {
padding: 6rem 0;
background: #f8f9fa;
}
.contact-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
}
.contact-info {
display: flex;
flex-direction: column;
gap: 2rem;
}
.contact-item {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.contact-item i {
font-size: 1.5rem;
color: #2c5aa0;
margin-top: 0.2rem;
}
.contact-item h4 {
color: #2c5aa0;
margin-bottom: 0.5rem;
font-weight: 600;
}
.contact-item p {
color: #666;
margin: 0;
}
.contact-form {
background: white;
padding: 2.5rem;
border-radius: 15px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 1rem;
border: 2px solid #A58F76;
border-radius: 10px;
font-size: 1rem;
transition: border-color 0.3s ease;
font-family: inherit;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: #2c5aa0;
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
/* Footer */
.footer {
background: #1a1a1a;
color: white;
padding: 3rem 0 1rem;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.footer-section h4 {
color: #2c5aa0;
margin-bottom: 1rem;
font-weight: 600;
}
.footer-section p {
color: #ccc;
line-height: 1.6;
margin-bottom: 1rem;
}
.footer-section ul {
list-style: none;
}
.footer-section ul li {
margin-bottom: 0.5rem;
}
.footer-section ul li a {
color: #ccc;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-section ul li a:hover {
color: #2c5aa0;
}
.social-links {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.social-links a {
width: 40px;
height: 40px;
background: #2c5aa0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
transition: background 0.3s ease;
}
.social-links a:hover {
background: #1e3a8a;
}
.emergency-number {
font-size: 1.5rem;
color: #e74c3c;
font-weight: 700;
margin: 0.5rem 0;
}
.footer-bottom {
border-top: 1px solid #333;
padding-top: 1rem;
text-align: center;
color: #ccc;
}
/* Tablet Design */
@media (max-width: 1024px) {
.hero-container {
gap: 1.5rem;
padding: 1.5rem;
transform: translateY(-50px); /* Move container up by 50px */
}
.hero-title {
font-size: 2.8rem;
line-height: 1.2;
}
.hero-description {
font-size: 1rem;
margin-bottom: 1.5rem;
}
.hero-image {
height: 350px;
}
.banner-image-container {
padding: 10px;
}
.banner-image {
width: 100%;
height: 100%;
border-radius: 20px;
}
.banner-image-container::before {
width: 60px;
height: 60px;
top: -15px;
left: -15px;
}
.banner-image-container::after {
width: 45px;
height: 45px;
bottom: -10px;
right: -10px;
}
}
/* Mobile Design */
@media (max-width: 768px) {
/* Keep mobile navigation behavior */
.hamburger { display: flex; }
.nav-menu {
position: fixed;
left: -100%;
top: 70px;
flex-direction: column;
background-color: white;
width: 100%;
text-align: center;
transition: 0.3s;
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
padding: 2rem 0;
}
.nav-menu.active { left: 0; }
.nav-menu li { margin: 1rem 0; }
.hamburger.active .bar:nth-child(2) { opacity: 0; }
.hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
/* Mobile banner: show actual image element (same as desktop) and stack layout */
.banner-slide[data-banner="1"],
.banner-slide[data-banner="2"],
.banner-slide[data-banner="3"] {
background: none !important;
background-image: none !important;
background-size: auto !important;
background-position: initial !important;
background-repeat: initial !important;
}
.hero-container {
grid-template-columns: 1fr;
text-align: center;
gap: 0.8rem;
padding: 0.75rem 0.75rem;
min-height: auto;
align-items: center;
justify-content: center;
box-sizing: border-box;
transform: translate(3.8px); /* Move container right 10px and up 50px */
}
.hero-content {
order: 1;
padding: 0.6rem 0;
display: block;
background: transparent;
border-radius: 0;
box-shadow: none;
backdrop-filter: none;
}
.hero-image { display: flex; height: 240px; }
/* Keep carousel arrows as-is (hidden on mobile) */
.arrow-btn,
.side-arrow,
.left-arrow,
.right-arrow { display: none !important; }
.hero-title {
font-size: 1.8rem;
line-height: 1.25;
margin-bottom: 0.6rem;
color: #2c5aa0;
font-family: 'Playfair Display', serif;
}
.hero-description {
font-size: 0.9rem;
line-height: 1.45;
margin-bottom: 0.8rem;
padding: 0 0.2rem;
color: #5a6c7d;
}
.hero-buttons {
justify-content: center;
gap: 0.8rem;
flex-direction: column;
align-items: center;
}
.btn {
padding: 0.7rem 1.1rem;
font-size: 0.9rem;
width: 100%;
max-width: 260px;
}
.doctor-illustration { width: 250px; height: 250px; }
.doctor-coat { width: 200px; height: 250px; }
.contact-content { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 480px) {
/* Mobile banner: use same image element as desktop, remove slide backgrounds */
.banner-slide[data-banner="1"],
.banner-slide[data-banner="2"],
.banner-slide[data-banner="3"] {
background: none !important;
background-image: none !important;
background-size: auto !important;
background-position: initial !important;
background-repeat: initial !important;
}
.hero-container {
grid-template-columns: 1fr;
text-align: center;
gap: 0.8rem;
padding: 0.75rem 0.75rem;
min-height: auto;
align-items: center;
justify-content: center;
box-sizing: border-box;
transform: translateY(-35px); /* Move container up by 50px */
}
.hero-content {
padding: 0.6rem 0;
display: block;
background: transparent;
border-radius: 0;
box-shadow: none;
backdrop-filter: none;
}
.hero-title {
font-size: 1.8rem;
line-height: 1.3;
margin-bottom: 0.8rem;
color: #2c5aa0;
}
.hero-description {
font-size: 0.95rem;
line-height: 1.5;
margin-bottom: 1rem;
padding: 0 0.25rem;
color: #5a6c7d;
}
.hero-image { display: flex; height: 240px; }
.hero-buttons {
justify-content: center;
gap: 0.8rem;
flex-direction: column;
align-items: center;
}
.btn { padding: 0.7rem 1.2rem; font-size: 0.9rem; width: 100%; max-width: 260px; }
.section-header h2 { font-size: 2rem; }
.service-card, .doctor-card { padding: 1.5rem; }
.contact-form { padding: 1.5rem; }
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;
}
/* Doctor Illustration */
.doctor-illustration {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
}
.stethoscope {
position: absolute;
top: 50px;
left: 50px;
z-index: 3;
}
.stethoscope-head {
width: 40px;
height: 40px;
background: #e74c3c;
border-radius: 50%;
position: relative;
}
.stethoscope-head::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background: #c0392b;
border-radius: 50%;
}
.stethoscope-tube {
width: 4px;
height: 150px;
background: #34495e;
margin: 0 auto;
border-radius: 2px;
position: relative;
}
.stethoscope-tube::before {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 20px;
background: #5a6c7d;
border-radius: 50%;
}
.doctor-coat {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 250px;
background: linear-gradient(to bottom, #ecf0f1 0%, #bdc3c7 100%);
border-radius: 100px 100px 0 0;
z-index: 1;
}
.doctor-coat::before {
content: '';
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: 160px;
height: 200px;
background: white;
border-radius: 80px 80px 0 0;
}
.doctor-hand {
position: absolute;
top: 120px;
right: 30px;
width: 60px;
height: 80px;
background: #f4d1ae;
border-radius: 30px;
z-index: 2;
}
.doctor-hand::before {
content: '';
position: absolute;
top: -10px;
left: 10px;
width: 40px;
height: 40px;
background: #f4d1ae;
border-radius: 50%;
}
/* Department Illustration */
.department-illustration {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.medical-cross {
position: relative;
width: 120px;
height: 120px;
z-index: 2;
}
.cross-vertical, .cross-horizontal {
position: absolute;
background: #e74c3c;
border-radius: 10px;
}
.cross-vertical {
width: 30px;
height: 120px;
left: 50%;
transform: translateX(-50%);
}
.cross-horizontal {
width: 120px;
height: 30px;
top: 50%;
transform: translateY(-50%);
}
.department-icons {
position: absolute;
width: 100%;
height: 100%;
}
.dept-icon {
position: absolute;
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.dept-icon.heart {
top: 20px;
left: 20px;
color: #e74c3c;
}
.dept-icon.brain {
top: 20px;
right: 20px;
color: #9b59b6;
}
.dept-icon.bone {
bottom: 20px;
left: 20px;
color: #f39c12;
}
.dept-icon.baby {
bottom: 20px;
right: 20px;
color: #3498db;
}
/* Doctors Illustration */
.doctors-illustration {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.doctor-team {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
.doctor-avatar {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
color: #5a6c7d;
position: relative;
}
.doctor-avatar.doc1 {
color: #3498db;
}
.doctor-avatar.doc2 {
color: #e74c3c;
transform: translateY(-20px);
}
.doctor-avatar.doc3 {
color: #27ae60;
}
.medical-badge {
position: absolute;
top: 20px;
right: 20px;
width: 60px;
height: 60px;
background: #f1c40f;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
color: white;
}
/* Hover effects */
/* ===== CLINICAL EXCELLENCE SECTION ===== */
.clinical-excellence {
padding: 80px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
overflow: hidden;
}
.clinical-excellence::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.3;
z-index: 1;
}
.clinical-excellence .container {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.section-title {
font-size: 2.8rem;
font-weight: 700;
color: #2c5aa0;
text-align: center;
margin-bottom: 20px;
line-height: 1.2;
position: relative;
font-family: 'Playfair Display', serif;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
border-radius: 2px;
}
.section-description {
/* font-size: 1.1rem; */
/* color: #5a6c7d; */
text-align: center;
/* max-width: 800px; */
/* margin: 0 auto 50px; */
/* line-height: 1.6; */
font-size: 1.1rem;
color: rgb(90, 108, 125);
max-width: 900px;
line-height: 1.6;
margin: 0px auto 50px;
}
/* Specialty Tabs */
.specialty-tabs {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 40px;
padding: 0 20px;
}
.tab-btn {
background: white;
border: 2px solid #e1e8ed;
color: #5a6c7d;
padding: 12px 24px;
border-radius: 25px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
text-align: center;
white-space: nowrap;
}
.tab-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, #3498db, #2980b9);
transition: left 0.3s ease;
z-index: -1;
}
.tab-btn:hover {
color: white;
border-color: #3498db;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}
.tab-btn:hover::before {
left: 0;
}
.tab-btn.active {
background: linear-gradient(90deg, #3498db, #2980b9);
color: white;
border-color: #3498db;
box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}
/* Content Area */
.content-area {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
margin-top: 40px;
}
.content-left {
position: relative;
}
.tab-content {
display: none;
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease;
}
.tab-content.active {
display: block;
opacity: 1;
transform: translateY(0);
}
.tab-content h2 {
font-size: 2.2rem;
font-weight: 700;
/* color: #5a6c7d; */
margin-bottom: 20px;
position: relative;
color: #2c5aa0;
}
.tab-content h2::before {
content: '';
position: absolute;
left: -20px;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 40px;
background: linear-gradient(180deg, #3498db, #2980b9);
border-radius: 2px;
}
.tab-content p {
font-size: 1.1rem;
/* color: #5a6c7d; */
/* line-height: 1.7; */
text-align: justify;
/* font-size: 1.1rem; */
color: rgb(90, 108, 125);
max-width: 900px;
line-height: 1.6;
margin: 0px auto 50px;
}
/* Content Right */
.content-right {
position: relative;
}
.image-container {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.image-container:hover {
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}
.specialty-image {
width: 100%;
height: 400px;
object-fit: cover;
}
/* Navigation Arrows */
.nav-arrows {
position: absolute;
bottom: 20px;
right: 20px;
display: flex;
gap: 10px;
}
.nav-arrow {
width: 45px;
height: 45px;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
color: #3498db;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.nav-arrow:hover {
background: #3498db;
color: white;
box-shadow: 0 8px 20px rgba(52, 152, 219, 0.3);
}
/* Responsive Design */
/* Tablets (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
.tab-btn {
font-size: 0.8rem;
padding: 0px 0px !important;
/* min-width: auto !important; */
/* text-align: center;
white-space: nowrap; */
}
.tab-content {
height: 300px;
display: flex;
flex-direction: column;
}
.tab-content h2 {
height: 46px;
flex-shrink: 0;
}
.tab-content p {
height: 254px;
overflow-y: auto;
}
.specialty-image {
height: 300px;
}
}
/* Tablet and Large Phones (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
.hero-container {
transform: translateY(-40px); /* Move container up */
}
}
@media (max-width: 768px) {
.clinical-excellence {
padding: 60px 0;
}
.section-title {
font-size: 2.2rem;
margin-bottom: 15px;
}
.section-description {
font-size: 1rem;
margin-bottom: 40px;
padding: 0 10px;
}
.specialty-tabs {
flex-direction: column;
align-items: center;
gap: 8px;
}
.tab-btn {
width: 100%;
max-width: 280px;
padding: 14px 20px;
font-size: 0.85rem;
}
.content-area {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}
.tab-content h2 {
font-size: 1.8rem;
margin-bottom: 15px;
}
.tab-content h2::before {
display: none;
}
.tab-content p {
font-size: 1rem;
text-align: left;
}
.specialty-image {
height: 300px;
}
.nav-arrows {
bottom: 15px;
right: 15px;
}
.nav-arrow {
width: 40px;
height: 40px;
font-size: 16px;
}
}
@media (max-width: 480px) {
.clinical-excellence {
padding: 40px 0;
}
.section-title {
font-size: 1.8rem;
}
.section-description {
font-size: 0.95rem;
}
.tab-btn {
padding: 12px 16px;
font-size: 0.8rem;
}
.tab-content h2 {
font-size: 1.5rem;
}
.tab-content p {
font-size: 0.95rem;
}
.specialty-image {
height: 250px;
}
}
/* -------------------section-2 ---------------- */
/* Clinical Excellence Section */
.clinical-excellence {
background: #E6D9CC;
padding: 80px 0;
margin-top: 100px;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.clinical-excellence .section-title {
font-size: 2.5rem;
color: #2c5aa0;
text-align: center;
margin-bottom: 20px;
font-weight: 700;
line-height: 1.2;
font-family: 'Playfair Display', serif;
}
.section-description {
font-size: 1.1rem;
color: #5a6c7d;
text-align: center;
max-width: 900px;
margin: 0 auto 50px;
line-height: 1.6;
}
/* Specialty Tabs */
.specialty-tabs {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 50px;
scroll-behavior: smooth;
width: 100%;
max-width: 900px;
overflow-x: auto;
flex-wrap: nowrap;
padding: 10px 0;
margin: 0 auto 50px auto;
}
.tab-btn {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border: 2px solid #027E92;
color: #027E92;
padding: 14px 28px;
border-radius: 30px;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px rgba(97, 81, 51, 0.1);
text-transform: uppercase;
letter-spacing: 0.5px;
min-width: 140px;
text-align: center;
font-family: 'Playfair Display';
}
.tab-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
transition: left 0.6s ease;
}
.tab-btn:hover::before {
left: 100%;
}
.tab-btn:hover {
background: linear-gradient(135deg, #027E92 0%, #035a6b 100%);
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(2, 126, 146, 0.3);
border-color: #035a6b;
}
.tab-btn.active {
background: linear-gradient(135deg, rgb(44, 90, 160) 0%, rgb(30, 58, 138) 100%);
color: white;
box-shadow: 0 6px 20px rgba(2, 126, 146, 0.4);
transform: translateY(-1px);
border-color: #035a6b;
font-family: 'Playfair Display';
}
.tab-btn:active {
transform: translateY(0);
box-shadow: 0 2px 10px rgba(2, 126, 146, 0.2);
}
/* Content Area */
.content-area {
display: flex;
gap: 40px;
align-items: stretch;
width: 100%;
max-width: 850px;
justify-content: space-between;
}
.content-left {
flex: 1;
max-width: 400px;
display: flex;
flex-direction: column;
}
.content-right {
flex: 1;
position: relative;
max-width: 400px;
display: flex;
flex-direction: column;
align-items: center;
}
.tab-content {
display: none;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.tab-content.active {
display: block;
opacity: 1;
}
.tab-content h2 {
font-size: 2rem;
color: #2c5aa0;
margin-bottom: 20px;
font-weight: 600;
font-family: 'Playfair Display', serif;
}
.tab-content p {
font-size: 1.1rem;
color: #5a6c7d;
line-height: 1.6;
margin-bottom: 30px;
}
/* Image Container */
.image-container {
position: relative;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.specialty-image {
width: 100%;
height: 400px;
object-fit: cover;
display: block;
transition: opacity 0.3s ease-in-out;
}
/* Navigation Arrows */
.nav-arrows {
position: absolute;
bottom: 20px;
right: 20px;
display: flex;
gap: 10px;
}
.nav-arrow {
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
border: none;
font-size: 1.5rem;
color: #027E92;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.nav-arrow:hover {
background: #027E92;
color: white;
}
/* Responsive Design */
/* Large tablets and small desktops */
@media (max-width: 1024px) {
.clinical-excellence {
padding: 70px 0;
}
.container {
padding: 0 30px;
max-width: 800px;
}
.section-title {
font-size: 2.2rem;
}
.content-area {
gap: 30px;
max-width: 750px;
}
.content-left {
max-width: 350px;
}
.content-right {
max-width: 350px;
}
.tab-content h2 {
font-size: 1.8rem;
}
.specialty-image {
height: 300px;
}
}
/* Tablets */
@media (max-width: 768px) {
.clinical-excellence {
padding: 60px 0;
margin-top: 80px;
}
.container {
padding: 0 20px;
max-width: 100%;
}
.section-title {
font-size: 2rem;
margin-bottom: 15px;
}
.section-description {
font-size: 1rem;
margin-bottom: 40px;
}
.specialty-tabs {
justify-content: flex-start;
overflow-x: auto;
padding: 10px 0 15px 0;
margin-bottom: 40px;
scrollbar-width: none;
-ms-overflow-style: none;
max-width: 100%;
flex-wrap: nowrap;
gap: 12px;
}
.specialty-tabs::-webkit-scrollbar {
display: none;
}
.tab-btn {
font-size: 0.75rem;
padding: 12px 22px;
flex-shrink: 0;
min-width: 120px;
border-radius: 25px;
font-weight: 600;
}
.content-area {
flex-direction: column;
gap: 30px;
max-width: 100%;
align-items: center;
}
.content-left,
.content-right {
max-width: 100%;
width: 100%;
}
.tab-content h2 {
font-size: 1.6rem;
margin-bottom: 15px;
}
.tab-content p {
font-size: 1rem;
margin-bottom: 25px;
}
.specialty-image {
height: 280px;
width: 100%;
}
.nav-arrows {
bottom: 15px;
right: 15px;
}
.nav-arrow {
width: 45px;
height: 45px;
font-size: 1.3rem;
}
}
/* Mobile devices */
@media (max-width: 480px) {
.clinical-excellence {
padding: 50px 0;
margin-top: 70px;
}
.container {
padding: 0 15px;
max-width: 100%;
}
.section-title {
font-size: 1.8rem;
line-height: 1.3;
margin-bottom: 12px;
text-align: center;
}
.section-description {
font-size: 0.95rem;
line-height: 1.5;
margin-bottom: 35px;
text-align: center;
}
.specialty-tabs {
gap: 10px;
margin-bottom: 35px;
padding: 8px 0 12px 0;
max-width: 100%;
justify-content: flex-start;
overflow-x: auto;
flex-wrap: nowrap;
scrollbar-width: none;
-ms-overflow-style: none;
}
.specialty-tabs::-webkit-scrollbar {
display: none;
}
.tab-btn {
font-size: 0.7rem;
padding: 10px 18px;
border-radius: 22px;
white-space: nowrap;
min-width: 100px;
font-weight: 600;
letter-spacing: 0.3px;
}
.content-area {
gap: 25px;
flex-direction: column;
align-items: center;
max-width: 100%;
}
.content-left,
.content-right {
max-width: 100%;
width: 100%;
}
.tab-content h2 {
font-size: 1.4rem;
margin-bottom: 12px;
}
.tab-content p {
font-size: 0.95rem;
line-height: 1.5;
margin-bottom: 20px;
}
.specialty-image {
height: 220px;
border-radius: 12px;
width: 100%;
}
.nav-arrows {
bottom: 12px;
right: 12px;
gap: 8px;
}
.nav-arrow {
width: 38px;
height: 38px;
font-size: 1.1rem;
}
}
/* Extra small devices */
@media (max-width: 360px) {
.clinical-excellence {
padding: 40px 0;
}
.container {
padding: 0 12px;
max-width: 100%;
}
.section-title {
font-size: 1.6rem;
text-align: center;
}
.section-description {
font-size: 0.9rem;
text-align: center;
}
.specialty-tabs {
max-width: 100%;
}
.tab-btn {
font-size: 0.65rem;
padding: 8px 16px;
border-radius: 20px;
min-width: 90px;
font-weight: 600;
letter-spacing: 0.2px;
}
.content-area {
max-width: 100%;
}
.tab-content h2 {
font-size: 1.3rem;
}
.tab-content p {
font-size: 0.9rem;
}
.specialty-image {
height: 200px;
width: 100%;
}
.nav-arrow {
width: 35px;
height: 35px;
font-size: 1rem;
}
}
/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
.tab-btn {
padding: 14px 24px;
min-height: 44px;
}
.nav-arrow {
min-width: 44px;
min-height: 44px;
}
}
/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
.clinical-excellence {
padding: 40px 0;
}
.content-area {
flex-direction: row;
gap: 30px;
}
.content-left {
flex: 1.2;
}
.content-right {
flex: 0.8;
}
.specialty-image {
height: 200px;
}
}
/* Arrow positioning: anchor to section container, not content columns */
.clinical-excellence .content-area {
position: static; /* ensure arrows anchor to the container above */
}
.clinical-excellence .nav-arrows {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: block;
gap: 0; /* override previous gap */
bottom: auto; /* override previous bottom positioning */
right: auto; /* override previous right positioning */
pointer-events: none; /* allow clicks only on buttons */
}
.clinical-excellence .nav-arrow {
position: absolute;
z-index: 3;
pointer-events: auto;
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
font-size: 18px;
background: #2c5aa0;
}
.clinical-excellence .nav-arrow.prev-arrow {
left: -540px;
}
.clinical-excellence .nav-arrow.next-arrow {
right: -500px;
}
/* Large Tablets (910px - 1024px) */
@media (min-width: 910px) and (max-width: 1024px) {
.clinical-excellence .nav-arrow.prev-arrow {
left: -465px;
}
.clinical-excellence .nav-arrow.next-arrow {
right: -420px;
}
}
@media (max-width: 768px) {
.clinical-excellence .nav-arrow {
width: 45px;
height: 45px;
font-size: 1.3rem;
}
}
@media (max-width: 480px) {
.clinical-excellence .nav-arrow {
width: 38px;
height: 38px;
font-size: 1.1rem;
}
.clinical-excellence .nav-arrow.prev-arrow {
left: 8px;
}
.clinical-excellence .nav-arrow.next-arrow {
right: 8px;
}
}
/* Mobile UX improvements for Clinical Excellence */
@media (max-width: 768px) {
.clinical-excellence .container {
padding: 0 12px;
}
.clinical-excellence .specialty-tabs {
overflow-x: auto;
scroll-snap-type: x mandatory;
-ms-overflow-style: none;
scrollbar-width: none;
gap: 12px;
padding-bottom: 6px;
}
.clinical-excellence .specialty-tabs::-webkit-scrollbar {
display: none;
}
.clinical-excellence .tab-btn {
flex: 0 0 auto;
scroll-snap-align: start;
min-width: 120px;
}
.clinical-excellence .content-area {
display: flex;
flex-direction: column;
gap: 20px;
text-align: center;
}
.clinical-excellence .tab-content h2 {
font-size: 1.6rem;
margin-bottom: 12px;
}
.clinical-excellence .tab-content p {
font-size: 0.95rem;
line-height: 1.55;
margin-bottom: 18px;
}
/* Place arrows below image to avoid overlap */
.clinical-excellence .nav-arrows {
position: static;
transform: none;
display: flex;
justify-content: space-between;
gap: 16px;
margin-top: 8px;
pointer-events: auto;
}
.clinical-excellence .nav-arrow {
position: static;
}
}
@media (max-width: 480px) {
.clinical-excellence .container {
padding: 0 10px;
}
.clinical-excellence .specialty-tabs {
gap: 10px;
padding-bottom: 4px;
}
.clinical-excellence .tab-btn {
min-width: 100px;
}
.clinical-excellence .tab-content h2 {
font-size: 1.4rem;
}
.clinical-excellence .tab-content p {
font-size: 0.92rem;
margin-bottom: 16px;
}
.clinical-excellence .specialty-image {
height: 220px;
border-radius: 12px;
}
.clinical-excellence .nav-arrows {
margin-top: 6px;
gap: 12px;
}
}
/* Fixed header offset for hero and anchor scrolling */
:root {
--header-height: 72px;
}
/* Ensure in-page anchor targets are not hidden under the fixed header */
section,
header,
footer {
scroll-margin-top: var(--header-height);
}
@media (max-width: 768px) {
:root { --header-height: 64px; }
}
@media (max-width: 480px) {
:root { --header-height: 60px; }
}
/* ------------------- Why Choose Our Hospital ---------------- */
.why-choose {
background: #E6D9CC;
padding: 80px 0;
}
.why-choose .section-title {
font-size: 2.5rem;
color: #2c5aa0;
text-align: center;
margin-bottom: 20px;
font-weight: 700;
line-height: 1.2;
font-family: 'Playfair Display', serif;
}
.features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
width: 100%;
max-width: 1000px;
}
.feature-card {
background: linear-gradient(120deg, #eee7e2 0%, #e1d7cf 50%, #d6c8bb 100%);
border: 1px solid rgba(2, 126, 146, 0.15);
border-radius: 14px;
padding: 22px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
transition: transform 0.25s ease, box-shadow 0.25s ease;
will-change: transform, box-shadow;
}
.feature-card:hover {
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
.feature-icon {
width: 64px;
height: 64px;
border-radius: 16px; /* rounded square badge to match screenshot */
display: flex;
align-items: center;
justify-content: center;
background: #d3b78f; /* warm badge backdrop similar to screenshot */
border: 3px solid #000000; /* bold dark border like screenshot */
color: #027E92;
margin-bottom: 14px;
box-shadow: 0 4px 12px rgba(2,126,146,0.15);
}
.feature-icon img {
width: 80%;
height: 80%;
object-fit: contain;
display: block;
}
.feature-card h3 {
font-size: 1.1rem;
color: #2c5aa0;
margin-bottom: 8px;
}
.feature-card p {
font-size: 0.98rem;
color: #f8f9fa;
line-height: 1.6;
}
/* Custom card styling per card in Why Choose section */
.why-choose .features-grid {
grid-template-columns: repeat(4, minmax(0, 255px));
justify-content: center;
justify-items: center;
margin-left: 0;
gap: 20px;
}
.why-choose .feature-card {
width: 100%;
max-width: 255px;
min-height: 250px;
background: linear-gradient(120deg, #eee7e2 0%, #e1d7cf 50%, #d6c8bb 100%);
border: 2px solid #b2a99e;
border-radius: 15px;
padding: 25px;
box-sizing: border-box;
text-align: left;
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
transition: 0.3s ease-in-out;
cursor: pointer;
flex-shrink: 0;
}
.why-choose .features-grid .feature-card:nth-child(2) { background: linear-gradient(120deg, #d6c8bb 0%, #e1d7cf 50%, #eee7e2 100%); }
.why-choose .features-grid .feature-card:nth-child(3) { background: linear-gradient(120deg, #eee7e2 0%, #e1d7cf 50%, #d6c8bb 100%); }
.why-choose .features-grid .feature-card:nth-child(4) { background: linear-gradient(120deg, #d6c8bb 0%, #e1d7cf 50%, #eee7e2 100%); }
/* Ensure text contrast on light card backgrounds */
.why-choose .feature-card p { color: rgb(90, 108, 125); }
/* ------------------- Hospital Highlights (New) ---------------- */
.hospital-highlights {
background: #E6D9CC;
padding: 80px 0;
}
.hospital-highlights .section-title {
font-size: 2.5rem;
color: #2c5aa0;
text-align: center;
margin-bottom: 20px;
font-weight: 700;
line-height: 1.2;
font-family: 'Playfair Display', serif;
}
.highlights-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
width: 100%;
max-width: 1000px;
}
.highlight-card {
background: linear-gradient(120deg, #eee7e2 0%, #e1d7cf 50%, #d6c8bb 100%);
border: 2px solid #b2a99e;
border-radius: 15px;
box-shadow: 0 8px 14px rgba(0, 0, 0, 0.2);
padding: 25px;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
will-change: transform, box-shadow;
cursor: pointer;
}
.highlight-card:hover {
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
.highlight-card h3 {
font-size: 1.15rem;
color: #2c5aa0;
margin-bottom: 8px;
}
.highlight-card p {
font-size: 0.98rem;
color: #5a6c7d;
line-height: 1.6;
}
.hospital-highlights .highlights-grid .highlight-card:nth-child(2) { background: linear-gradient(120deg, #d6c8bb 0%, #e1d7cf 50%, #eee7e2 100%); }
/* Fix for screens between 993px-1150px where 4 cards overflow */
@media (max-width: 1150px) {
.why-choose .features-grid {
grid-template-columns: repeat(2, minmax(0, 420px));
justify-items: center;
gap: 20px;
}
.why-choose .feature-card {
width: 100%;
max-width: 420px;
}
}
@media (max-width: 992px) {
.features-grid { grid-template-columns: repeat(3, 1fr); }
/* Ensure Why Choose grid adapts properly on tablets */
.why-choose .features-grid { grid-template-columns: repeat(2, 1fr); justify-items: center; }
.why-choose .feature-card { width: 100%; max-width: 420px; }
}
@media (max-width: 768px) {
.why-choose { padding: 64px 0; }
.hospital-highlights { padding: 64px 0; }
.features-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.highlights-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 480px) {
.why-choose { padding: 48px 0; }
.hospital-highlights { padding: 48px 0; }
.features-grid { grid-template-columns: 1fr; gap: 16px; justify-items: center; }
.highlights-grid { grid-template-columns: 1fr; gap: 16px; justify-items: center; }
.feature-card, .highlight-card { width: 100%; max-width: 360px; text-align: center; }
.section-title, .section-description { max-width: 360px; margin-left: auto; margin-right: auto; text-align: center; }
.features-grid, .highlights-grid { place-items: center; }
}
/* ------------------- Patient Testimonials ---------------- */
.testimonials .section-title {
font-size: 2.5rem;
color: #2c5aa0;
text-align: center;
margin-bottom: 20px;
font-weight: 700;
line-height: 1.2;
font-family: 'Playfair Display', serif;
}
.testimonials {
background: #E6D9CC;
padding: 80px 0;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
width: 100%;
max-width: 1000px;
}
.testimonial-card {
border: 2px solid #b2a99e;
border-radius: 15px;
overflow: hidden;
background-color: #eee7e2;
box-shadow: 0 8px 14px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
will-change: transform, box-shadow;
contain: content;
flex: 0 0 320px; /* fixed card width for marquee rows */
}
.testimonial-card.text {
background-color: #eee7e2;
color: #5a6c7d;
padding: 25px;
}
.testimonial-card.text h3 {
font-size: 1.1rem;
color: #193C43;
margin-bottom: 8px;
}
.testimonial-card.text p {
font-size: 0.98rem;
line-height: 1.6;
}
.testimonial-card.media {
background-color: #eee7e2;
}
.media-thumb {
position: relative;
width: 100%;
height: 220px;
overflow: hidden;
background: #ffffff;
}
.media-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.play-badge {
display: none;
position: absolute;
bottom: 12px;
left: 12px;
background: rgba(2, 126, 146, 0.9);
color: #fff;
border-radius: 50px;
padding: 6px 10px;
font-weight: 600;
font-size: 0.9rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
/* Fine-tune small tablet breakpoint */
@media (max-width: 640px) {
.why-choose .features-grid { grid-template-columns: 1fr; }
.why-choose .feature-card { max-width: 420px; width: 100%; }
.why-choose .section-title { font-size: 2.1rem; }
.why-choose .section-description { font-size: 1rem; }
}
/* Very small devices */
@media (max-width: 360px) {
.why-choose .section-title { font-size: 1.9rem; }
.feature-card, .highlight-card { max-width: 300px; padding: 20px; }
.feature-card h3 { font-size: 1rem; }
.feature-card p { font-size: 0.94rem; }
}
.testimonial-card:hover {
transform: translateY(-3px);
}
/* Marquee layout for Testimonials */
.testimonials-marquee {
display: grid;
grid-template-rows: auto auto;
gap: 18px;
overflow: hidden;
}
.marquee-row {
overflow: hidden;
}
.marquee-track {
display: flex;
gap: 18px;
align-items: stretch;
will-change: transform;
}
/* Testimonials Scrolling Animations */
@keyframes scrollLeftToRight {
0% {
transform: translateX(-50%);
}
100% {
transform: translateX(0%);
}
}
@keyframes scrollRightToLeft {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-50%);
}
}
.marquee-left .marquee-track {
animation: scrollLeftToRight 35s linear infinite;
}
.marquee-right .marquee-track {
animation: scrollRightToLeft 38s linear infinite;
}
/* Pause scrolling on hover */
.testimonial-card:hover .marquee-track,
.marquee-track:hover,
.marquee-row:hover .marquee-track {
animation-play-state: paused;
}
.testimonials .testimonial-card:nth-child(even) { background-color: #dfd3c5; }
/* Responsive adjustments for Testimonials */
@media (max-width: 992px) {
.testimonials-grid { grid-template-columns: repeat(2, 1fr); }
.testimonial-card { flex-basis: 300px; }
}
@media (max-width: 768px) {
.testimonials { padding: 64px 0; }
.testimonials-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.testimonial-card { flex-basis: 280px; }
}
@media (max-width: 480px) {
.testimonials { padding: 48px 0; }
.testimonials-grid { grid-template-columns: 1fr; gap: 16px; justify-items: center; }
.testimonial-card { width: 100%; max-width: 320px; }
.section-title, .section-description { max-width: 320px; margin-left: auto; margin-right: auto; text-align: center; }
.testimonials-marquee { gap: 14px; }
.marquee-track { gap: 14px; }
/* Mobile animation removed */
}
/* ===== HERO VERTICAL POSITIONING TESTING CONTROLS ===== */
/*
To move the hero content up or down, modify these CSS custom properties:
METHOD 1 - Move entire container:
Change --hero-vertical-offset in .hero-container:
- To move UP: use negative values like -50px, -100px, -150px
- To move DOWN: use positive values like 50px, 100px, 150px
- Example: --hero-vertical-offset: -80px; (moves content up by 80px)
METHOD 2 - Adjust content padding:
Change --hero-content-padding-top and --hero-content-padding-bottom:
- To reduce top space: --hero-content-padding-top: -20px;
- To reduce bottom space: --hero-content-padding-bottom: -20px;
- Example: --hero-content-padding-top: -40px; (reduces top space)
METHOD 3 - Change alignment (alternative approach):
Replace align-items: center with:
- align-items: flex-start; (content at top)
- align-items: flex-end; (content at bottom)
- align-items: flex-start; + padding-top: 100px; (custom positioning)
QUICK TEST VALUES:
- Move up 60px: --hero-vertical-offset: -60px;
- Move up 100px: --hero-vertical-offset: -100px;
- Move up 150px: --hero-vertical-offset: -150px;
- Reduce top padding: --hero-content-padding-top: -30px;
- Reduce bottom padding: --hero-content-padding-bottom: -30px;
*/
/* Uncomment and modify these lines for quick testing: */
.hero-container {
--hero-vertical-offset: -50px; /* Move content up by 80px */
--hero-content-padding-top: 0px; /*Reduce top padding */
--hero-content-padding-bottom: 0px;/* Reduce bottom padding */
}
/* Tablet and Large Phones (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
.hero-container {
transform: translateY(-40px); /* Move container up */
}
}
@media (max-width: 768px) {
.clinical-excellence {
padding: 60px 0;
}
.section-title {
font-size: 2.2rem;
margin-bottom: 15px;
}
.section-description {
font-size: 1rem;
margin-bottom: 40px;
padding: 0 10px;
}
.specialty-tabs {
flex-direction: column;
align-items: center;
gap: 8px;
}
.tab-btn {
width: 100%;
max-width: 280px;
padding: 14px 20px;
font-size: 0.85rem;
}
.content-area {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}
.tab-content h2 {
font-size: 1.8rem;
margin-bottom: 15px;
}
.tab-content h2::before {
display: none;
}
.tab-content p {
font-size: 1rem;
text-align: left;
}
.specialty-image {
height: 300px;
}
.nav-arrows {
bottom: 15px;
right: 15px;
}
.nav-arrow {
width: 40px;
height: 40px;
font-size: 16px;
}
}
@media (max-width: 480px) {
.clinical-excellence {
padding: 40px 0;
}
.section-title {
font-size: 1.8rem;
}
.section-description {
font-size: 0.95rem;
}
.tab-btn {
padding: 12px 16px;
font-size: 0.8rem;
}
.tab-content h2 {
font-size: 1.5rem;
}
.tab-content p {
font-size: 0.95rem;
}
.specialty-image {
height: 250px;
}
}
/* -------------------section-2 ---------------- */
/* Clinical Excellence Section */
.clinical-excellence {
background: #E6D9CC;
padding: 80px 0;
margin-top: 100px;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.clinical-excellence .section-title {
font-size: 2.5rem;
color: #2c5aa0;
text-align: center;
margin-bottom: 20px;
font-weight: 700;
line-height: 1.2;
font-family: 'Playfair Display', serif;
}
.section-description {
font-size: 1.1rem;
color: #5a6c7d;
text-align: center;
max-width: 900px;
margin: 0 auto 50px;
line-height: 1.6;
}
/* Specialty Tabs */
.specialty-tabs {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 50px;
scroll-behavior: smooth;
width: 100%;
max-width: 900px;
overflow-x: auto;
flex-wrap: nowrap;
padding: 10px 0;
margin: 0 auto 50px auto;
}
.tab-btn {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border: 2px solid #027E92;
color: #027E92;
padding: 14px 28px;
border-radius: 30px;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px rgba(97, 81, 51, 0.1);
text-transform: uppercase;
letter-spacing: 0.5px;
min-width: 140px;
text-align: center;
font-family: 'Playfair Display';
}
.tab-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
transition: left 0.6s ease;
}
.tab-btn:hover::before {
left: 100%;
}
.tab-btn:hover {
background: linear-gradient(135deg, #027E92 0%, #035a6b 100%);
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(2, 126, 146, 0.3);
border-color: #035a6b;
}
.tab-btn.active {
background: linear-gradient(135deg, rgb(44, 90, 160) 0%, rgb(30, 58, 138) 100%);
color: white;
box-shadow: 0 6px 20px rgba(2, 126, 146, 0.4);
transform: translateY(-1px);
border-color: #035a6b;
font-family: 'Playfair Display';
}
.tab-btn:active {
transform: translateY(0);
box-shadow: 0 2px 10px rgba(2, 126, 146, 0.2);
}
/* Content Area */
.content-area {
display: flex;
gap: 40px;
align-items: stretch;
width: 100%;
max-width: 850px;
justify-content: space-between;
}
.content-left {
flex: 1;
max-width: 400px;
display: flex;
flex-direction: column;
}
.content-right {
flex: 1;
position: relative;
max-width: 400px;
display: flex;
flex-direction: column;
align-items: center;
}
.tab-content {
display: none;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.tab-content.active {
display: block;
opacity: 1;
}
.tab-content h2 {
font-size: 2rem;
color: #2c5aa0;
margin-bottom: 20px;
font-weight: 600;
font-family: 'Playfair Display', serif;
}
.tab-content p {
font-size: 1.1rem;
color: #5a6c7d;
line-height: 1.6;
margin-bottom: 30px;
}
/* Image Container */
.image-container {
position: relative;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.specialty-image {
width: 100%;
height: 400px;
object-fit: cover;
display: block;
transition: opacity 0.3s ease-in-out;
}
/* Navigation Arrows */
.nav-arrows {
position: absolute;
bottom: 20px;
right: 20px;
display: flex;
gap: 10px;
}
.nav-arrow {
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
border: none;
font-size: 1.5rem;
color: #027E92;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.nav-arrow:hover {
background: #027E92;
color: white;
}
/* Responsive Design */
/* Large tablets and small desktops */
@media (max-width: 1024px) {
.clinical-excellence {
padding: 70px 0;
}
.container {
padding: 0 30px;
max-width: 800px;
}
.section-title {
font-size: 2.2rem;
}
.content-area {
gap: 30px;
max-width: 750px;
}
.content-left {
max-width: 350px;
}
.content-right {
max-width: 350px;
}
.tab-content h2 {
font-size: 1.8rem;
}
.specialty-image {
height: 300px;
}
}
/* Tablets */
@media (max-width: 768px) {
.clinical-excellence {
padding: 60px 0;
margin-top: 80px;
}
.container {
padding: 0 20px;
max-width: 100%;
}
.section-title {
font-size: 2rem;
margin-bottom: 15px;
}
.section-description {
font-size: 1rem;
margin-bottom: 40px;
}
.specialty-tabs {
justify-content: flex-start;
overflow-x: auto;
padding: 10px 0 15px 0;
margin-bottom: 40px;
scrollbar-width: none;
-ms-overflow-style: none;
max-width: 100%;
flex-wrap: nowrap;
gap: 12px;
}
.specialty-tabs::-webkit-scrollbar {
display: none;
}
.tab-btn {
font-size: 0.75rem;
padding: 12px 22px;
flex-shrink: 0;
min-width: 120px;
border-radius: 25px;
font-weight: 600;
}
.content-area {
flex-direction: column;
gap: 30px;
max-width: 100%;
align-items: center;
}
.content-left,
.content-right {
max-width: 100%;
width: 100%;
}
.tab-content h2 {
font-size: 1.6rem;
margin-bottom: 15px;
}
.tab-content p {
font-size: 1rem;
margin-bottom: 25px;
}
.specialty-image {
height: 280px;
width: 100%;
}
.nav-arrows {
bottom: 15px;
right: 15px;
}
.nav-arrow {
width: 45px;
height: 45px;
font-size: 1.3rem;
}
}
/* Mobile devices */
@media (max-width: 480px) {
.clinical-excellence {
padding: 50px 0;
margin-top: 70px;
}
.container {
padding: 0 15px;
max-width: 100%;
}
.section-title {
font-size: 1.8rem;
line-height: 1.3;
margin-bottom: 12px;
text-align: center;
}
.section-description {
font-size: 0.95rem;
line-height: 1.5;
margin-bottom: 35px;
text-align: center;
}
.specialty-tabs {
gap: 10px;
margin-bottom: 35px;
padding: 8px 0 12px 0;
max-width: 100%;
justify-content: flex-start;
overflow-x: auto;
flex-wrap: nowrap;
scrollbar-width: none;
-ms-overflow-style: none;
}
.specialty-tabs::-webkit-scrollbar {
display: none;
}
.tab-btn {
font-size: 0.7rem;
padding: 10px 18px;
border-radius: 22px;
white-space: nowrap;
min-width: 100px;
font-weight: 600;
letter-spacing: 0.3px;
}
.content-area {
gap: 25px;
flex-direction: column;
align-items: center;
max-width: 100%;
}
.content-left,
.content-right {
max-width: 100%;
width: 100%;
}
.tab-content h2 {
font-size: 1.4rem;
margin-bottom: 12px;
}
.tab-content p {
font-size: 0.95rem;
line-height: 1.5;
margin-bottom: 20px;
}
.specialty-image {
height: 220px;
border-radius: 12px;
width: 100%;
}
.nav-arrows {
bottom: 12px;
right: 12px;
gap: 8px;
}
.nav-arrow {
width: 38px;
height: 38px;
font-size: 1.1rem;
}
}
/* Extra small devices */
@media (max-width: 360px) {
.clinical-excellence {
padding: 40px 0;
}
.container {
padding: 0 12px;
max-width: 100%;
}
.section-title {
font-size: 1.6rem;
text-align: center;
}
.section-description {
font-size: 0.9rem;
text-align: center;
}
.specialty-tabs {
max-width: 100%;
}
.tab-btn {
font-size: 0.65rem;
padding: 8px 16px;
border-radius: 20px;
min-width: 90px;
font-weight: 600;
letter-spacing: 0.2px;
}
.content-area {
max-width: 100%;
}
.tab-content h2 {
font-size: 1.3rem;
}
.tab-content p {
font-size: 0.9rem;
}
.specialty-image {
height: 200px;
width: 100%;
}
.nav-arrow {
width: 35px;
height: 35px;
font-size: 1rem;
}
}
/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
.tab-btn {
padding: 14px 24px;
min-height: 44px;
}
.nav-arrow {
min-width: 44px;
min-height: 44px;
}
}
/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
.clinical-excellence {
padding: 40px 0;
}
.content-area {
flex-direction: row;
gap: 30px;
}
.content-left {
flex: 1.2;
}
.content-right {
flex: 0.8;
}
.specialty-image {
height: 200px;
}
}
/* Arrow positioning: anchor to section container, not content columns */
.clinical-excellence .content-area {
position: static; /* ensure arrows anchor to the container above */
}
.clinical-excellence .nav-arrows {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: block;
gap: 0; /* override previous gap */
bottom: auto; /* override previous bottom positioning */
right: auto; /* override previous right positioning */
pointer-events: none; /* allow clicks only on buttons */
}
.clinical-excellence .nav-arrow {
position: absolute;
z-index: 3;
pointer-events: auto;
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
font-size: 18px;
background: #2c5aa0;
}
@media (max-width: 768px) {
.clinical-excellence .nav-arrow {
width: 45px;
height: 45px;
font-size: 1.3rem;
}
}
@media (max-width: 480px) {
.clinical-excellence .nav-arrow {
width: 38px;
height: 38px;
font-size: 1.1rem;
}
.clinical-excellence .nav-arrow.prev-arrow {
left: 8px;
}
.clinical-excellence .nav-arrow.next-arrow {
right: 8px;
}
}
/* Mobile UX improvements for Clinical Excellence */
@media (max-width: 768px) {
.clinical-excellence .container {
padding: 0 12px;
}
.clinical-excellence .specialty-tabs {
overflow-x: auto;
scroll-snap-type: x mandatory;
-ms-overflow-style: none;
scrollbar-width: none;
gap: 12px;
padding-bottom: 6px;
}
.clinical-excellence .specialty-tabs::-webkit-scrollbar {
display: none;
}
.clinical-excellence .tab-btn {
flex: 0 0 auto;
scroll-snap-align: start;
min-width: 120px;
}
.clinical-excellence .content-area {
display: flex;
flex-direction: column;
gap: 20px;
text-align: center;
}
.clinical-excellence .tab-content h2 {
font-size: 1.6rem;
margin-bottom: 12px;
}
.clinical-excellence .tab-content p {
font-size: 0.95rem;
line-height: 1.55;
margin-bottom: 18px;
}
/* Place arrows below image to avoid overlap */
.clinical-excellence .nav-arrows {
position: static;
transform: none;
display: flex;
justify-content: space-between;
gap: 16px;
margin-top: 8px;
pointer-events: auto;
}
.clinical-excellence .nav-arrow {
position: static;
}
}
@media (max-width: 480px) {
.clinical-excellence .container {
padding: 0 10px;
}
.clinical-excellence .specialty-tabs {
gap: 10px;
padding-bottom: 4px;
}
.clinical-excellence .tab-btn {
min-width: 100px;
}
.clinical-excellence .tab-content h2 {
font-size: 1.4rem;
}
.clinical-excellence .tab-content p {
font-size: 0.92rem;
margin-bottom: 16px;
}
.clinical-excellence .specialty-image {
height: 220px;
border-radius: 12px;
}
.clinical-excellence .nav-arrows {
margin-top: 6px;
gap: 12px;
}
}
/* Fixed header offset for hero and anchor scrolling */
:root {
--header-height: 72px;
}
/* Ensure in-page anchor targets are not hidden under the fixed header */
section,
header,
footer {
scroll-margin-top: var(--header-height);
}
@media (max-width: 768px) {
:root { --header-height: 64px; }
}
@media (max-width: 480px) {
:root { --header-height: 60px; }
}
/* ------------------- Why Choose Our Hospital ---------------- */
.why-choose {
background: #E6D9CC;
padding: 80px 0;
}
.why-choose .section-title {
font-size: 2.5rem;
color: #2c5aa0;
text-align: center;
margin-bottom: 20px;
font-weight: 700;
line-height: 1.2;
font-family: 'Playfair Display', serif;
}
.features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
width: 100%;
max-width: 1000px;
}
.feature-card {
background: #A58F76;
border: 1px solid rgba(2, 126, 146, 0.15);
border-radius: 14px;
padding: 22px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
transition: transform 0.25s ease, box-shadow 0.25s ease;
will-change: transform, box-shadow;
}
.feature-card:hover {
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
.feature-icon {
width: 64px;
height: 64px;
border-radius: 16px; /* rounded square badge to match screenshot */
display: flex;
align-items: center;
justify-content: center;
background: #d3b78f; /* warm badge backdrop similar to screenshot */
border: 3px solid #000000; /* bold dark border like screenshot */
color: #027E92;
margin-bottom: 14px;
box-shadow: 0 4px 12px rgba(2,126,146,0.15);
}
.feature-icon img {
width: 80%;
height: 80%;
object-fit: contain;
display: block;
}
.feature-card h3 {
font-size: 1.1rem;
color: #2c5aa0;
margin-bottom: 8px;
}
.feature-card p {
font-size: 0.98rem;
color: #f8f9fa;
line-height: 1.6;
}
/* Custom card styling per card in Why Choose section */
.why-choose .features-grid {
grid-template-columns: repeat(4, minmax(0, 255px));
justify-content: center;
justify-items: center;
margin-left: 0;
gap: 20px;
}
.why-choose .feature-card {
width: 100%;
max-width: 255px;
min-height: 250px;
background-color: #eee7e2;
border: 2px solid #b2a99e;
box-shadow: 0 8px 14px rgba(0, 0, 0, 0.2);
border-radius: 15px;
padding: 25px;
box-sizing: border-box;
text-align: left;
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
transition: 0.3s ease-in-out;
cursor: pointer;
flex-shrink: 0;
}
.why-choose .features-grid .feature-card:nth-child(2) { background-color: #dfd3c5; }
.why-choose .features-grid .feature-card:nth-child(3) { background-color: #eee7e2; }
.why-choose .features-grid .feature-card:nth-child(4) { background-color: #dcd0c2; }
/* Ensure text contrast on light card backgrounds */
.why-choose .feature-card p { color: rgb(90, 108, 125); }
/* ------------------- Hospital Highlights (New) ---------------- */
.hospital-highlights {
background: #E6D9CC;
padding: 80px 0;
}
.hospital-highlights .section-title {
font-size: 2.5rem;
color: #2c5aa0;
text-align: center;
margin-bottom: 20px;
font-weight: 700;
line-height: 1.2;
font-family: 'Playfair Display', serif;
}
.highlights-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
width: 100%;
max-width: 1000px;
}
.highlight-card {
background-color: #eee7e2;
border: 2px solid #b2a99e;
border-radius: 15px;
padding: 25px;
box-shadow: 0 8px 14px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
will-change: transform, box-shadow;
cursor: pointer;
}
.highlight-card:hover {
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
.highlight-card h3 {
font-size: 1.15rem;
color: #2c5aa0;
margin-bottom: 8px;
}
.highlight-card p {
font-size: 0.98rem;
color: #5a6c7d;
line-height: 1.6;
}
.hospital-highlights .highlights-grid .highlight-card:nth-child(2) { background-color: #dfd3c5; }
/* Fix for screens between 993px-1150px where 4 cards overflow */
@media (max-width: 1150px) {
.why-choose .features-grid {
grid-template-columns: repeat(2, minmax(0, 420px));
justify-items: center;
gap: 20px;
}
.why-choose .feature-card {
width: 100%;
max-width: 420px;
}
}
@media (max-width: 992px) {
.features-grid { grid-template-columns: repeat(3, 1fr); }
/* Ensure Why Choose grid adapts properly on tablets */
.why-choose .features-grid { grid-template-columns: repeat(2, 1fr); justify-items: center; }
.why-choose .feature-card { width: 100%; max-width: 420px; }
}
@media (max-width: 768px) {
.why-choose { padding: 64px 0; }
.hospital-highlights { padding: 64px 0; }
.features-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.highlights-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 480px) {
.why-choose { padding: 48px 0; }
.hospital-highlights { padding: 48px 0; }
.features-grid { grid-template-columns: 1fr; gap: 16px; justify-items: center; }
.highlights-grid { grid-template-columns: 1fr; gap: 16px; justify-items: center; }
.feature-card, .highlight-card { width: 100%; max-width: 360px; text-align: center; }
.section-title, .section-description { max-width: 360px; margin-left: auto; margin-right: auto; text-align: center; }
.features-grid, .highlights-grid { place-items: center; }
}
/* ------------------- Patient Testimonials ---------------- */
.testimonials .section-title {
font-size: 2.5rem;
color: #2c5aa0;
text-align: center;
margin-bottom: 20px;
font-weight: 700;
line-height: 1.2;
font-family: 'Playfair Display', serif;
}
.testimonials {
background: #E6D9CC;
padding: 80px 0;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
width: 100%;
max-width: 1000px;
}
.testimonial-card {
background: linear-gradient(120deg, #eee7e2 0%, #e1d7cf 50%, #d6c8bb 100%);
border-radius: 15px;
overflow: hidden;
background-color: #eee7e2;
box-shadow: 0 8px 14px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
will-change: transform, box-shadow;
contain: content;
flex: 0 0 320px; /* fixed card width for marquee rows */
}
.testimonial-card.text {
background: linear-gradient(120deg, #eee7e2 0%, #e1d7cf 50%, #d6c8bb 100%);
color: #5a6c7d;
padding: 25px;
}
.testimonial-card.text h3 {
font-size: 1.1rem;
color: #193C43;
margin-bottom: 8px;
}
.testimonial-card.text p {
font-size: 0.98rem;
line-height: 1.6;
}
.testimonial-card.media {
background: linear-gradient(120deg, #eee7e2 0%, #e1d7cf 50%, #d6c8bb 100%);
}
.media-thumb {
position: relative;
width: 100%;
height: 220px;
overflow: hidden;
background: #ffffff;
}
.media-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.play-badge {
display: none;
position: absolute;
bottom: 12px;
left: 12px;
background: rgba(2, 126, 146, 0.9);
color: #fff;
border-radius: 50px;
padding: 6px 10px;
font-weight: 600;
font-size: 0.9rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
/* Fine-tune small tablet breakpoint */
@media (max-width: 640px) {
.why-choose .features-grid { grid-template-columns: 1fr; }
.why-choose .feature-card { max-width: 420px; width: 100%; }
.why-choose .section-title { font-size: 2.1rem; }
.why-choose .section-description { font-size: 1rem; }
}
/* Very small devices */
@media (max-width: 360px) {
.why-choose .section-title { font-size: 1.9rem; }
.feature-card, .highlight-card { max-width: 300px; padding: 20px; }
.feature-card h3 { font-size: 1rem; }
.feature-card p { font-size: 0.94rem; }
}
.testimonial-card:hover {
transform: translateY(-3px);
}
/* Marquee layout for Testimonials */
.testimonials-marquee {
display: grid;
grid-template-rows: auto auto;
gap: 18px;
overflow: hidden;
}
.marquee-row {
overflow: hidden;
}
.marquee-track {
display: flex;
gap: 18px;
align-items: stretch;
will-change: transform;
}
/* Testimonials Scrolling Animations */
@keyframes scrollLeftToRight {
0% {
transform: translateX(-50%);
}
100% {
transform: translateX(0%);
}
}
@keyframes scrollRightToLeft {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-50%);
}
}
.marquee-left .marquee-track {
animation: scrollLeftToRight 35s linear infinite;
}
.marquee-right .marquee-track {
animation: scrollRightToLeft 38s linear infinite;
}
/* Pause scrolling on hover */
.testimonial-card:hover .marquee-track,
.marquee-track:hover,
.marquee-row:hover .marquee-track {
animation-play-state: paused;
}
.testimonials .testimonial-card:nth-child(even) { background-color: #dfd3c5; }
/* Responsive adjustments for Testimonials */
@media (max-width: 992px) {
.testimonials-grid { grid-template-columns: repeat(2, 1fr); }
.testimonial-card { flex-basis: 300px; }
}
@media (max-width: 768px) {
.testimonials { padding: 64px 0; }
.testimonials-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.testimonial-card { flex-basis: 280px; }
}
@media (max-width: 480px) {
.testimonials { padding: 48px 0; }
.testimonials-grid { grid-template-columns: 1fr; gap: 16px; justify-items: center; }
.testimonial-card { width: 100%; max-width: 320px; }
.section-title, .section-description { max-width: 320px; margin-left: auto; margin-right: auto; text-align: center; }
.testimonials-marquee { gap: 14px; }
.marquee-track { gap: 14px; }
/* Mobile animation removed */
}
/* ===== HERO VERTICAL POSITIONING TESTING CONTROLS ===== */
/*
To move the hero content up or down, modify these CSS custom properties:
METHOD 1 - Move entire container:
Change --hero-vertical-offset in .hero-container:
- To move UP: use negative values like -50px, -100px, -150px
- To move DOWN: use positive values like 50px, 100px, 150px
- Example: --hero-vertical-offset: -80px; (moves content up by 80px)
METHOD 2 - Adjust content padding:
Change --hero-content-padding-top and --hero-content-padding-bottom:
- To reduce top space: --hero-content-padding-top: -20px;
- To reduce bottom space: --hero-content-padding-bottom: -20px;
- Example: --hero-content-padding-top: -40px; (reduces top space)
METHOD 3 - Change alignment (alternative approach):
Replace align-items: center with:
- align-items: flex-start; (content at top)
- align-items: flex-end; (content at bottom)
- align-items: flex-start; + padding-top: 100px; (custom positioning)
QUICK TEST VALUES:
- Move up 60px: --hero-vertical-offset: -60px;
- Move up 100px: --hero-vertical-offset: -100px;
- Move up 150px: --hero-vertical-offset: -150px;
- Reduce top padding: --hero-content-padding-top: -30px;
- Reduce bottom padding: --hero-content-padding-bottom: -30px;
*/
/* Uncomment and modify these lines for quick testing: */
.hero-container {
--hero-vertical-offset: -50px; /* Move content up by 80px */
--hero-content-padding-top: 0px; /*Reduce top padding */
--hero-content-padding-bottom: 0px;/* Reduce bottom padding */
}