/* Base Styles */
:root {
--color-primary: rgb(62, 198, 227); /* Main accent */
--color-secondary: rgb(86, 161, 187); /* Secondary accent */
--color-bg-light: #fff; /* Main background */
--color-bg-highlight: rgb(238, 252, 255); /* Light highlight */
--color-bg-card: rgb(222, 255, 242); /* Card backgrounds */
--color-text-main: rgb(23, 56, 71); /* Main text */
--color-text-dark: #000; /* Black text */
--color-text-light: #fff; /* White text */
--color-light-blue: #F5FBFF; /* Lighter section backgrounds */
--color-dark-blue: #002D4C; /* Dark text and accents */
--color-medium-blue: #4A90E2; /* Softer blue for buttons */
--color-sky-blue: #EDF7FF; /* Very light blue for highlights */
--color-soft-gray: #FAFBFC; /* Even lighter gray for cards */
--color-border-gray: #E9ECEF; /* Subtle borders */
--color-white: #FFFFFF; /* Pure white backgrounds */
--color-muted-text: #7F8C9A; /* Gentle muted text */
--color-pastel-yellow: #FFFDF5; /* Very light yellow */
--color-peach: #FFF5F0; /* Very light peach */
--color-mint-green: #F0FFF9; /* Very light mint */
/* Update existing variable mappings */
--primary-color: var(--color-medium-blue);
--secondary-color: var(--color-dark-blue);
--accent-color: var(--color-sky-blue);
--text-dark: var(--color-dark-text);
--text-muted: var(--color-muted-text);
--text-light: var(--color-white);
--gray-light: var(--color-soft-gray);
--gray-medium: var(--color-border-gray);
--success-color: #4CAF50; /* Keeping success color for visibility */
--error-color: #dc3545; /* Keeping error color for visibility */
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--section-padding: 6rem 0;
--container-padding: 2rem;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Poppins', sans-serif;
line-height: 1.6;
color: var(--color-text-main);
background-color: var(--color-bg-light);
overflow-x: hidden;
/* padding-top: 120px; */
/* Added to account for fixed header */
}
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
line-height: 1.3;
margin-bottom: 1rem;
color: var(--color-text-main);
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.5rem;
}
p {
margin-bottom: 1rem;
}
a {
text-decoration: none;
color: var(--color-primary);
transition: var(--transition);
}
a:hover {
color: var(--color-secondary);
}
ul {
list-style: none;
}
img {
max-width: 100%;
height: auto;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
section {
padding: var(--section-padding);
position: relative;
background: var(--color-bg-light);
}
/* Updated to create alternating section colors */
section:nth-child(even) {
background: var(--color-bg-highlight);
}
section:nth-child(odd) {
background-color: var(--color-white);
}
/* Button Styles */
.primary-btn {
display: inline-block;
background-color: var(--color-primary);
color: var(--color-text-light);
padding: 12px 30px;
border-radius: 5px;
font-weight: 500;
transition: var(--transition);
border: none;
cursor: pointer;
text-align: center;
position: relative;
overflow: hidden;
z-index: 1;
}
.primary-btn:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: var(--color-secondary);
transition: all 0.5s ease;
z-index: -1;
border-radius: 5px;
}
.primary-btn:hover {
background-color: var(--color-secondary);
color: var(--color-text-light);
transform: translateY(-3px);
border-color: var(--color-secondary);
box-shadow: var(--shadow);
}
.primary-btn:hover:before {
width: 100%;
}
.secondary-btn {
display: inline-block;
background-color: transparent;
color: var(--color-primary);
padding: 12px 30px;
border-radius: 5px;
border: 2px solid var(--color-primary);
font-weight: 500;
transition: var(--transition);
cursor: pointer;
text-align: center;
position: relative;
overflow: hidden;
z-index: 1;
}
.secondary-btn:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: var(--color-primary);
transition: all 0.5s ease;
z-index: -1;
border-radius: 5px;
}
.secondary-btn:hover {
background-color: var(--color-primary);
color: var(--color-text-light);
transform: translateY(-3px);
box-shadow: var(--shadow);
}
.secondary-btn:hover:before {
width: 100%;
}
.text-center {
text-align: center;
}
/* Section Header - Improved consistency */
.section-header {
text-align: center;
margin-bottom: 50px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.section-header h2 {
position: relative;
display: inline-block;
margin-bottom: 15px;
color: var(--color-primary);
padding-bottom: 10px;
}
.section-header h2::after {
content: '';
position: absolute;
width: 60px;
height: 3px;
background-color: var(--accent-color);
bottom: -10px;
left: 50%;
transform: translateX(-50%);
}
.section-header p {
color: var(--color-text-muted);
max-width: 600px;
margin: 0 auto;
font-size: 1.1rem;
}
/* Header Styles */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background-color: transparent;
transition: all 0.3s ease;
}
.scrolled {
background-color: var(--color-text-light);
box-shadow: var(--shadow);
}
/* Top Bar Styles */
.top-bar {
background-color: var(--color-primary);
color: var(--color-text-light);
padding: 8px 0;
font-size: 0.9rem;
position: relative;
z-index: 1001;
width: 100vw;
left: 0;
margin: 0;
}
.top-bar .container {
width: 100vw;
max-width: 100vw;
margin: 0;
padding: 0 30px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
box-sizing: border-box;
}
.contact-info {
display: flex;
align-items: center;
gap: 30px;
white-space: nowrap;
overflow: hidden;
flex: 1;
flex-direction: row;
justify-content: flex-start;
}
.contact-info span {
display: flex;
align-items: center;
gap: 5px;
font-size: 1rem;
}
.contact-info i {
font-size: 1rem;
}
.social-links {
display: flex;
align-items: center;
gap: 15px;
margin-left: 20px;
flex-shrink: 0;
}
.social-links a {
color: var(--color-text-light);
font-size: 1.1rem;
transition: all 0.3s ease;
}
.social-links a:hover {
color: var(--accent-color);
transform: translateY(-2px);
}
/* Navbar Styles */
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
position: relative;
z-index: 1002;
}
.logo {
display: flex;
align-items: center;
gap: 15px;
min-width: 200px;
}
.logo img {
height: 50px;
width: auto;
}
.company-name {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-text-light);
line-height: 1.2;
white-space: nowrap;
transition: var(--transition);
}
.scrolled .company-name {
color: var(--color-primary);
}
.company-name span {
display: block;
font-size: 0.8rem;
color: var(--color-text-light);
transition: var(--transition);
white-space: normal;
max-width: 200px;
}
.scrolled .company-name span {
color: var(--color-dark-blue);
}
.nav-menu {
display: flex;
align-items: center;
gap: 25px;
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu li {
position: relative;
}
.nav-menu a {
color: var(--color-text-main);
font-weight: 500;
padding: 8px 0;
display: block;
position: relative;
white-space: nowrap;
transition: var(--transition);
}
.scrolled .nav-menu a {
color: var(--color-text-main);
}
.nav-menu a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background-color: var(--color-primary);
transition: var(--transition);
}
.nav-menu a:hover,
.nav-menu a.active {
color: var(--color-primary);
}
.nav-menu a:hover::after,
.nav-menu a.active::after {
width: 100%;
}
.nav-menu a.cta-btn {
background-color: var(--color-medium-blue);
color: var(--color-text-light) !important;
padding: 8px 20px;
border-radius: 5px;
margin-left: 10px;
}
.nav-menu a.cta-btn:hover {
background-color: var(--color-primary);
transform: translateY(-3px);
}
.menu-toggle {
display: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--color-primary);
}
/* Responsive Design */
@media (max-width: 1200px) {
.nav-menu {
gap: 10px;
}
.nav-menu a {
font-size: 0.95rem;
}
}
@media (max-width: 992px) {
.top-bar .container {
flex-direction: column;
align-items: flex-start;
padding: 0 10px;
}
.contact-info {
flex-wrap: wrap;
gap: 10px;
justify-content: flex-start;
width: 100%;
}
.social-links {
margin-left: 0;
margin-top: 5px;
}
.menu-toggle {
display: block;
}
.nav-menu {
position: fixed;
top: 0;
right: -100%;
width: 280px;
height: 100vh;
background-color: var(--color-text-light);
flex-direction: column;
align-items: flex-start;
padding: 80px 30px 30px;
transition: 0.5s;
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
z-index: 999;
}
.nav-menu.active {
right: 0;
}
.nav-menu li {
color: var(--color-text-main);
width: 100%;
margin: 10px 0;
}
.nav-menu a {
padding: 10px 0;
width: 100%;
}
.nav-menu a.cta-btn {
margin: 10px 0;
text-align: center;
}
}
@media (max-width: 768px) {
.top-bar {
padding: 10px 0;
}
.contact-info {
flex-direction: column;
align-items: flex-start;
gap: 5px;
white-space: normal;
}
.top-bar .container {
flex-direction: column;
align-items: flex-start;
padding: 0 5px;
}
.contact-info span {
font-size: 0.85rem;
}
.social-links {
gap: 10px;
}
.social-links a {
font-size: 1rem;
}
.logo {
min-width: 150px;
}
.company-name {
font-size: 1.2rem;
}
.company-name span {
white-space: normal;
max-width: 150px;
line-height: 1.2;
}
}
@media (max-width: 480px) {
.top-bar {
padding: 8px 0;
}
.contact-info span {
font-size: 0.8rem;
}
.logo img {
height: 40px;
}
.company-name {
font-size: 1.1rem;
}
.company-name span {
max-width: 120px;
font-size: 0.7rem;
}
.nav-menu {
width: 100%;
}
}
/* HERO/SLIDER SECTION FIXES */
.hero{
padding-top: 0%;
}
.hero, .slider-container {
height: 60vh;
min-height: 320px;
max-height: 500px;
position: relative;
}
/* Add dark overlay for desktop */
@media (min-width: 769px) {
.slide::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* Adjust opacity as needed */
z-index: 1;
}
.slide-content {
position: relative;
z-index: 2;
}
}
.slide-content {
padding: 32px 18px;
max-width: 90vw;
}
.slide-content h2 {
font-size: 2.2rem;
margin-bottom: 16px;
color: #fff;
text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
.slide-content p {
font-size: 1.1rem;
margin-bottom: 24px;
color: #ffffff;
text-shadow: 0 2px 8px rgba(0,0,0,0.9);
}
@media (max-width: 768px) {
.hero, .slider-container {
height: 60vh;
min-height: 180px;
max-height: 100vw;
margin: 0 !important;
padding: 0 !important;
display: flex;
align-items: stretch;
}
.slide {
min-height: 180px;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
.slide .container {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0 2vw;
}
.slide-content {
background: rgba(0,0,0,0.55);
border-radius: 10px;
padding: 7vw 4vw;
max-width: 98vw;
width: 100%;
text-align: center;
box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
.slide-content h2 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 10px;
color: #fff;
text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.slide-content p {
font-size: 1rem;
color: #fff;
text-shadow: 0 2px 8px rgba(0,0,0,0.5);
margin-bottom: 16px;
}
}
@media (max-width: 480px) {
.hero, .slider-container {
height: 48vh;
min-height: 120px;
max-height: 100vw;
}
.slide-content {
padding: 8vw 2vw;
max-width: 99vw;
border-radius: 8px;
}
.slide-content h2 {
font-size: 1rem;
margin-bottom: 6px;
}
.slide-content p {
font-size: 0.92rem;
margin-bottom: 8px;
}
}
/* GENERAL MOBILE FONT IMPROVEMENTS */
@media (max-width: 768px) {
body, p, li, input, select, textarea {
font-size: 1rem;
}
h1 {
font-size: 1.5rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
}
@media (max-width: 480px) {
body, p, li, input, select, textarea {
font-size: 0.98rem;
}
h1 {
font-size: 1.1rem;
}
h2 {
font-size: 1rem;
}
h3 {
font-size: 0.98rem;
}
}
/* Services Section Styles */
.services {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-medium-blue) 100%);
padding: 80px 0;
color: white;
}
.services .section-header {
text-align: center;
margin-bottom: 50px;
}
.services .section-header h2 {
color: white;
font-size: 2.5rem;
margin-bottom: 20px;
}
.services .intro-text {
max-width: 800px;
margin: 0 auto 40px;
text-align: center;
}
.services .intro-text p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.1rem;
line-height: 1.8;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
padding: 20px;
}
.service-card {
background: var(--color-bg-card);
border-radius: 15px;
overflow: hidden;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--color-text-main);
}
.service-card.featured {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
align-items: center;
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
background: rgba(255, 255, 255, 0.15);
}
.service-image {
height: 250px;
overflow: hidden;
}
.service-card.featured .service-image {
height: 400px;
}
.service-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.service-card:hover .service-image img {
transform: scale(1.1);
}
.service-content {
padding: 25px;
}
.service-content h3 {
color: white;
font-size: 1.5rem;
margin-bottom: 15px;
}
.service-content p {
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
margin: 0;
}
@media (max-width: 992px) {
.service-card.featured {
grid-template-columns: 1fr;
}
.service-card.featured .service-image {
height: 250px;
}
}
@media (max-width: 768px) {
.services-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
padding: 10px;
}
.service-image {
height: 200px;
}
.service-content {
padding: 20px;
}
.service-content h3 {
font-size: 1.3rem;
}
}
/* Hospital Section - Fixed layout and spacing */
.hospitals {
position: relative;
}
.hospital-logos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.hospital-logo {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: var(--shadow);
text-align: center;
transition: var(--transition);
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--color-bg-card);
color: var(--color-text-main);
}
.hospital-logo:hover {
transform: translateY(-5px);
}
.hospital-logo img {
height: 120px;
object-fit: contain;
margin-bottom: 15px;
}
.hospital-logo h4 {
margin-top: 15px;
margin-bottom: 0;
}
/* How It Works Section */
.how-it-works {
padding: 4rem 0;
background-color: var(--gray-light);
text-align: center;
}
.how-it-works-content {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 2rem;
align-items: center;
justify-content: center;
max-width: 900px;
margin: 0 auto;
}
.steps-container {
display: flex;
flex-direction: column;
position: relative;
align-items: center;
max-width: 500px;
margin: 0 auto;
}
.step {
display: flex;
gap: 1rem;
align-items: center;
padding: 0.75rem 0;
position: relative;
width: 100%;
justify-content: center;
background: var(--color-bg-card);
color: var(--color-text-main);
}
/* Add vertical dash line */
.steps-container::before {
content: '';
position: absolute;
left: 17.5px; /* Half of step-number width */
top: 35px; /* Start from first step's bottom */
bottom: 35px; /* End at last step's top */
width: 2px;
background-image: linear-gradient(to bottom, var(--color-primary) 50%, transparent 50%);
background-size: 2px 20px;
background-repeat: repeat-y;
}
.step-number {
background-color: var(--color-primary);
color: white;
width: 35px;
height: 35px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1rem;
flex-shrink: 0;
position: relative;
z-index: 1;
}
.step-content {
padding-top: 0.25rem;
text-align: left;
}
.step-content h3 {
font-size: 1rem;
margin-bottom: 0.25rem;
}
.step-content p {
font-size: 0.85rem;
line-height: 1.4;
}
.video-container {
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: var(--shadow);
height: 350px; /* Reduced from 400px */
width: 200px; /* Reduced from 240px */
margin: 0 auto;
}
.video-container video {
width: 100%;
height: 100%;
object-fit: cover;
}
.services-list {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8));
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.service-item {
color: var(--color-text-main);
padding: 0.5rem 1rem;
border-radius: 5px;
font-size: 0.85rem;
opacity: 0.7;
transition: var(--transition);
}
.service-item.active {
background-color: var(--color-primary);
opacity: 1;
}
@media (max-width: 992px) {
.how-it-works-content {
grid-template-columns: 1fr;
gap: 1.5rem;
max-width: 500px;
}
.video-container {
display: none;
/* max-width: 400px;
height: 300px;
width: 100%; */
}
}
.steps-container{
max-width: 100%;
}
.step {
display: flex;
align-items: flex-start;
gap: 2rem;
margin-bottom: 2rem;
}
.step-content-wrapper {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.step-video {
display: none;
}
@media (max-width: 768px) {
.how-it-works {
padding: 3rem 0;
}
.step {
flex-direction: column;
gap: 1rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
margin-bottom: 1.5rem;
}
.step-video {
display: block;
width: 100%;
border-radius: 8px;
overflow: hidden;
}
.step-video video {
width: 100%;
height: auto;
border-radius: 8px;
object-fit:fill;
}
.steps-container::before {
left: 16px;
}
.step-number {
width: 32px;
height: 32px;
font-size: 1rem;
}
.step-content h3 {
font-size: 1rem;
}
.step-content p {
font-size: 0.85rem;
}
.video-container {
height: 300px;
}
.services-list {
padding: 1rem;
}
.service-item {
font-size: 0.8rem;
padding: 0.4rem 0.75rem;
}
}
/* Why Choose Us Section */
.why-choose-us {
position: relative;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}
.benefits-slider {
position: relative;
max-width: 1200px;
margin: 0 auto;
padding: 40px 0;
overflow: hidden;
}
.benefits-track {
display: flex;
transition: transform 0.5s ease;
gap: 30px;
}
.benefit-card {
flex: 0 0 calc(33.333% - 20px);
min-width: calc(33.333% - 20px);
background: var(--color-bg-card);
border-radius: 15px;
padding: 30px;
box-shadow: var(--shadow);
text-align: center;
transition: all 0.3s ease;
transform: scale(0.85);
opacity: 0.7;
color: var(--color-text-main);
}
.benefit-card.active {
transform: scale(1);
opacity: 1;
}
@media (max-width: 768px) {
.benefits-track {
gap: 0;
}
.benefit-card {
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.5s ease;
}
}
.slider-controls {
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
gap: 20px;
}
.prev-btn, .next-btn {
background: var(--color-primary);
color: white;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
z-index: 2;
}
.prev-btn:hover, .next-btn:hover {
background: var(--color-secondary);
}
.slider-dots {
display: flex;
gap: 8px;
}
.dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #ddd;
cursor: pointer;
transition: all 0.3s ease;
}
.dot.active {
background: var(--color-primary);
transform: scale(1.2);
}
@media (max-width: 768px) {
.benefit-card {
flex: 0 0 100%;
min-width: 100%;
}
}
.benefit-icon {
width: 60px;
height: 60px;
background-color: var(--gray-light);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
transition: all 0.3s ease;
}
.benefit-card:hover .benefit-icon {
background-color: var(--color-primary);
}
.benefit-icon i {
font-size: 1.5rem;
color: var(--color-primary);
transition: all 0.3s ease;
}
.benefit-card:hover .benefit-icon i {
color: white;
}
.benefit-card h3 {
margin-bottom: 15px;
}
/* Testimonial Section - Fixed layout and spacing */
.testimonials {
position: relative;
}
.testimonial-slider {
position: relative;
max-width: 800px;
margin: 0 auto;
overflow: hidden;
}
.testimonial-slide {
display: none;
animation: fadeIn 0.8s ease forwards;
}
.testimonial-slide.active {
display: block;
}
.testimonial-content {
background-color: white;
padding: 40px;
border-radius: 10px;
box-shadow: var(--shadow);
margin-bottom: 30px;
position: relative;
}
.quote-icon {
position: absolute;
top: 20px;
left: 20px;
color: var(--gray-light);
font-size: 2rem;
}
.testimonial-content p {
margin: 20px 0;
font-style: italic;
}
.testimonial-author {
display: flex;
align-items: center;
margin-top: 20px;
}
.author-image {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
margin-right: 15px;
}
.author-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.author-info h4 {
margin-bottom: 5px;
}
.author-info p {
color: var(--gray-medium);
margin-bottom: 0;
font-style: normal;
}
.testimonial-nav {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.testimonial-nav button {
background: transparent;
border: none;
font-size: 1.2rem;
color: var(--color-primary);
cursor: pointer;
padding: 10px;
transition: all 0.3s ease;
}
.testimonial-nav button:hover {
color: var(--accent-color);
transform: scale(1.1);
}
.dots {
display: flex;
justify-content: center;
margin: 0 15px;
}
.dot {
width: 10px;
height: 10px;
background-color: var(--gray-light);
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
transition: all 0.3s ease;
}
.dot.active {
background-color: var(--color-primary);
transform: scale(1.2);
}
/* CTA Section Styles */
.cta {
padding: 100px 0;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('Images/cta-bg.jpg') center/cover no-repeat fixed;
position: relative;
overflow: hidden;
}
.cta::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--accent-color) 100%);
opacity: 0.9;
}
.cta-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 800px;
margin: 0 auto;
color: var(--color-text-light);
}
.cta h2 {
font-size: 2.8rem;
margin-bottom: 20px;
color: var(--color-text-light);
}
.cta p {
font-size: 1.2rem;
margin-bottom: 40px;
opacity: 0.9;
}
.cta-buttons {
display: flex;
justify-content: center;
gap: 20px;
}
.cta-buttons .primary-btn,
.cta-buttons .secondary-btn {
padding: 15px 35px;
font-size: 1.1rem;
border-radius: 50px;
}
.cta-buttons .secondary-btn {
background: transparent;
border: 2px solid var(--color-text-light);
color: var(--color-text-light);
}
.cta-buttons .secondary-btn:hover {
background: var(--color-text-light);
color: var(--color-text-light);
}
/* Footer Styles */
.footer {
position: relative;
z-index: 2;
background-color: rgb(23, 56, 71);
color: #fff;
padding: 4rem 0 2rem;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.footer-section h4 {
color: #fff;
margin-bottom: 1.5rem;
font-size: 1.1rem;
}
.footer-logo {
margin-bottom: 1.5rem;
}
.footer-logo img {
width: 60px;
margin-bottom: 1rem;
}
.footer-logo h3 {
color: #fff;
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
.footer-logo span {
color: #fff;
}
.footer-contact p {
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--gray-medium);
}
.footer-contact p a {
color: var(--gray-medium);
text-decoration: none;
display: flex;
align-items: center;
gap: 0.5rem;
transition: color 0.3s ease;
}
.footer-contact p a:hover {
color: var(--color-primary);
}
.footer-description {
margin-top: 1rem;
}
.footer-description p {
color: var(--gray-medium);
font-size: 0.9rem;
line-height: 1.6;
max-width: 280px;
}
.footer-section ul li {
margin-bottom: 0.75rem;
}
.footer-section ul li a {
color: #fff;
transition: color 0.3s ease;
}
.footer-section ul li a:hover {
color: var(--color-primary);
}
.footer-bottom {
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
}
.social-links {
margin-bottom: 1.5rem;
justify-content: center;
}
.social-links a {
color: #fff;
margin: 0 0.5rem;
font-size: 1.2rem;
transition: color 0.3s ease;
}
.social-links a:hover {
color: var(--color-primary);
}
.copyright {
color: #e0e0e0;
font-size: 0.9rem;
}
/* Responsive Footer */
@media (max-width: 768px) {
.footer-content {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.footer-section:first-child {
grid-column: 1 / -1;
}
}
/* WhatsApp Float Button */
.whatsapp-float {
position: fixed;
width: 60px;
height: 60px;
bottom: 40px;
right: 30px;
background-color: #25d366;
color: white;
border-radius: 50px;
text-align: center;
font-size: 30px;
box-shadow: 2px 2px 3px #999;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.whatsapp-float:hover {
background-color: #128C7E;
color: white;
transform: scale(1.1);
}
/* Back to Top Button */
.back-to-top {
position: fixed;
bottom: 40px;
left: 30px;
width: 50px;
height: 50px;
background-color: var(--color-primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all 0.5s ease;
z-index: 99;
border: none;
}
.back-to-top.show {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
background-color: var(--accent-color);
transform: translateY(-5px);
}
/* Animation */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* About Us Section Styles */
.about-us {
position: relative;
height: 100vh;
overflow: hidden;
z-index: 1;
}
.about-video-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
.about-us .container {
padding-top: 5rem;
position: relative;
z-index: 2;
}
.about-us::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 1;
}
.about-us h2,
.about-us p {
color: var(--color-text-light);
}
.about-us .container {
position: relative;
z-index: 1;
}
.about-content {
max-width: 800px;
margin: 0 auto;
text-align: center;
color: white;
}
.about-content h2 {
font-size: 3rem;
margin-bottom: 30px;
color: white;
}
.about-text {
font-size: 1.5rem;
line-height: 1.8;
margin-bottom: 40px;
}
.about-text p {
margin-bottom: 20px;
}
.about-us .primary-btn {
background: white;
color: var(--color-primary);
border: 2px solid white;
transition: all 0.3s ease;
}
.about-us .primary-btn:hover {
background: var(--color-primary);
color: var(--color-medium-blue);
}
@media (max-width: 768px) {
.about-content h2 {
font-size: 2rem;
}
.about-us{
height: 550px;
}
.about-video-bg{
height: 550px;
}
.about-text {
font-size: 1rem;
padding: 0 20px;
}
}
/* Doctors Section */
.doctors-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
margin-top: 40px;
}
.doctor-card {
background: #fff;
border-radius: 16px;
box-shadow: 0 4px 18px rgba(62,198,227,0.10);
border: 2px solid #e6f2fa;
display: flex;
flex-direction: column;
align-items: center;
transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
padding: 0;
max-width: 260px;
min-width: 0;
min-height: 420px;
height: 420px;
margin: 0 auto;
}
.doctor-card:hover {
box-shadow: 0 8px 32px rgba(62,198,227,0.18);
border-color: var(--color-primary);
transform: translateY(-6px) scale(1.03);
}
.doctor-image {
width: 100%;
height: 180px;
border-radius: 14px 14px 0 0;
overflow: hidden;
background: #f8fdff;
display: flex;
align-items: center;
justify-content: center;
}
.doctor-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 14px 14px 0 0;
display: block;
}
.doctor-card-content {
padding: 18px 14px 14px 14px;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
flex: 1 1 auto;
}
.doctor-name {
font-size: 1.08rem;
font-weight: 700;
color: var(--color-text-main);
margin-bottom: 0.5rem;
text-align: center;
min-height: 2.4em;
max-height: 2.4em;
line-height: 1.2;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
.doctor-specialty {
font-size: 0.95rem;
color: #7F8C9A;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 0.4rem;
text-align: center;
}
.doctor-hospital {
font-size: 0.95rem;
color: #8ca0b3;
margin-bottom: 0.8rem;
text-align: center;
}
.doctor-exp {
font-size: 1.01rem;
font-weight: 600;
color: var(--color-dark-blue);
margin-bottom: 1.1rem;
text-align: center;
}
.doctor-btn {
display: block;
width: 100%;
background: #fff;
color: var(--color-medium-blue);
border: 2px solid var(--color-medium-blue);
border-radius: 10px;
padding: 10px 0;
font-size: 1rem;
font-weight: 600;
text-align: center;
transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
margin-top: auto;
margin-bottom: 0;
box-shadow: none;
}
.doctor-btn:hover {
background: var(--color-medium-blue);
color: #fff;
border-color: var(--color-primary);
transform: translateY(-2px) scale(1.02);
}
/* Remove old doctor-info and doctor-buttons styles for this page */
body.doctors-page .doctor-info, body.doctors-page .doctor-buttons {
display: none !important;
}
@media (max-width: 1200px) {
.doctors-grid {
grid-template-columns: repeat(2, 1fr);
}
.doctor-card {
max-width: 320px;
height: 420px;
}
}
@media (max-width: 700px) {
.doctors-grid {
grid-template-columns: 1fr;
gap: 22px;
}
.doctor-card {
max-width: 98vw;
height: 400px;
}
.doctor-image {
height: 140px;
}
}
/* Responsive Design */
@media screen and (max-width: 992px) {
.hero h1 {
font-size: 2.5rem;
}
.hero p {
font-size: 1.1rem;
}
}
@media screen and (max-width: 768px) {
section {
padding: 60px 0;
}
body {
padding-top: 100px;
}
.top-bar {
flex-direction: column;
padding: 8px 0;
}
.contact-info {
margin-bottom: 10px;
}
.menu-toggle {
display: block;
}
.nav-menu {
position: fixed;
top: 0;
right: -100%;
width: 70%;
height: 100vh;
background-color: white;
flex-direction: column;
align-items: flex-start;
padding: 80px 30px 30px;
transition: 0.5s;
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
z-index: 999;
}
.nav-menu.active {
right: 0;
}
.nav-menu li {
margin: 15px 0;
width: 100%;
}
.hero {
height: auto;
min-height: 500px;
}
.hero h1 {
font-size: 2rem;
}
.hero-buttons,
.cta-buttons {
flex-direction: column;
gap: 15px;
}
.section-header h2 {
font-size: 1.8rem;
}
}
@media screen and (max-width: 576px) {
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.7rem;
}
.hero h1 {
font-size: 1.8rem;
}
.top-bar {
padding: 10px;
}
.contact-info span {
display: block;
margin: 5px 0;
}
.testimonial-content {
padding: 30px 20px;
}
.footer-content {
grid-template-columns: 1fr;
}
.whatsapp-float {
width: 50px;
height: 50px;
font-size: 24px;
bottom: 20px;
right: 20px;
}
.back-to-top {
width: 40px;
height: 40px;
bottom: 20px;
left: 20px;
}
}
/* Additional responsive fixes */
@media screen and (max-width: 480px) {
.section-header h2 {
font-size: 1.5rem;
}
.section-header p {
font-size: 1rem;
}
section {
padding: 50px 0;
}
.service-card, .benefit-card, .step, .hospital-logo {
padding: 20px;
}
}
@media (max-width: 768px) {
.doctor-image {
height: 250px;
}
}
/* Contact Section Styles */
.contact {
padding: 80px 0;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--accent-color) 100%);
position: relative;
overflow: hidden;
}
.contact::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,') center/cover no-repeat;
opacity: 0.1;
animation: rotate 60s linear infinite;
}
.contact .section-header {
text-align: center;
margin-bottom: 50px;
position: relative;
z-index: 1;
}
.contact .section-header h2 {
color: var(--color-medium-blue);
font-size: 2.5rem;
margin-bottom: 20px;
}
.contact .section-header p {
color: var(--color-dark-blue);
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto;
}
.contact-wrapper {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 40px;
position: relative;
z-index: 2;
}
.contact-form {
background: rgba(255, 255, 255, 0.95);
padding: 40px;
border-radius: 20px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
}
.form-group {
margin-bottom: 25px;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 15px;
border: 2px solid var(--color-secondary);
border-radius: 12px;
font-size: 1rem;
transition: all 0.3s ease;
background: var(--color-bg-highlight);
font-family: inherit;
color: var(--color-text-main);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 4px rgba(26, 75, 140, 0.1);
outline: none;
}
.form-group select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23333' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
padding-right: 40px;
}
.contact-info {
display: flex;
flex-direction: column;
gap: 30px;
}
.info-item {
background: rgba(255, 255, 255, 0.95);
width: 70%;
padding: 30px;
border-radius: 20px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
}
.info-item h3 {
color: var(--color-primary);
font-size: 1.4rem;
margin-bottom: 20px;
position: relative;
}
.info-item h3::after {
content: '';
position: absolute;
left: 0;
bottom: -8px;
width: 40px;
height: 3px;
background: var(--accent-color);
}
.info-item ul {
list-style: none;
padding: 0;
margin: 0;
}
.info-item ul li {
padding: 10px 0;
color: var(--color-text-main);
position: relative;
padding-left: 25px;
}
.info-item ul li::before {
content: '→';
position: absolute;
left: 0;
color: var(--color-primary);
}
.whatsapp-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: #25D366;
color: white;
padding: 12px 25px;
border-radius: 50px;
font-weight: 500;
margin-top: 15px;
transition: all 0.3s ease;
text-decoration: none;
}
.whatsapp-btn:hover {
background: #128C7E;
transform: translateY(-2px);
}
.social-links {
display: flex;
gap: 15px;
margin-top: 20px;
}
.social-links a {
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-primary);
color: white;
border-radius: 50%;
transition: all 0.3s ease;
font-size: 1.2rem;
}
.social-links a:hover {
background: var(--accent-color);
transform: translateY(-3px) rotate(8deg);
}
/* Responsive Design */
@media (max-width: 992px) {
.contact-wrapper {
grid-template-columns: 1fr;
gap: 30px;
}
.contact .section-header h2 {
font-size: 2rem;
}
.cta h2 {
font-size: 2.2rem;
}
}
@media (max-width: 768px) {
.contact {
padding: 60px 0;
}
.contact-form,
.info-item {
padding: 25px;
}
/* Make info-item full width in mobile view to match contact form */
.info-item {
width: 100%;
}
.contact .section-header h2 {
font-size: 1.8rem;
}
.form-group input,
.form-group select,
.form-group textarea {
padding: 12px;
}
/* Make social icons perfectly circular in mobile view */
.social-links a {
width: 40px;
height: 40px;
font-size: 1.1rem;
border-radius: 50%;
}
.cta {
padding: 80px 0;
}
.cta h2 {
font-size: 2rem;
}
.cta p {
font-size: 1.1rem;
}
.cta-buttons {
flex-direction: column;
gap: 15px;
}
.cta-buttons .primary-btn,
.cta-buttons .secondary-btn {
width: 100%;
text-align: center;
}
}
@media (max-width: 480px) {
.contact {
padding: 50px 0;
}
.contact .section-header {
margin-bottom: 30px;
}
.contact .section-header h2 {
font-size: 1.6rem;
}
.info-item h3 {
font-size: 1.2rem;
}
.cta {
padding: 60px 0;
}
.cta h2 {
font-size: 1.8rem;
}
.cta p {
font-size: 1rem;
}
}
.slider {
position: relative;
width: 100%;
height: 100%;
}
.slide {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
transition: opacity 0.5s;
opacity: 0;
z-index: 1;
}
.slide.active {
display: block;
opacity: 1;
position: relative;
z-index: 2;
}
/* Themed backgrounds for key sections */
.doctors, .hospitals, .how-it-works, .why-choose-us {
background: linear-gradient(135deg, var(--color-sky-blue) 0%, #dbeafe 100%);
/* fallback for old browsers */
background-color: var(--color-bg-highlight);
}
.doctors .section-header h2,
.hospitals .section-header h2,
.how-it-works .section-header h2,
.why-choose-us .section-header h2 {
color: var(--color-primary);
}
.doctors .section-header p,
.hospitals .section-header p,
.how-it-works .section-header p,
.why-choose-us .section-header p {
color: var(--color-text-main);
}
.card {
background-color: var(--color-bg-card);
border: 1px solid var(--color-secondary);
}
.card:hover {
border-color: var(--color-primary);
}
@media screen and (max-width: 768px) {
body {
padding-top: 0px;
}
.nav-menu a{
color: var(--color-text-main);
}
}
.departments-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 2.2rem 2.2rem;
justify-items: center;
margin-bottom: 2rem;
}
.department-cell {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.department-item {
display: flex;
align-items: center;
justify-content: center;
width: 110px;
height: 110px;
background: #fff;
border: 2px solid #e0e0e0;
border-radius: 50%;
font-size: 1.05rem;
color: var(--color-primary);
font-weight: 600;
box-shadow: 0 2px 12px rgba(62,198,227,0.07);
text-align: center;
transition: border-color 0.2s, box-shadow 0.2s, color 0.2s, background 0.2s;
margin-bottom: 0.7rem;
cursor: pointer;
padding: 0;
user-select: none;
position: relative;
}
.department-item .dept-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
}
.department-item .dept-icon i {
font-size: 2.1rem;
color: #3ec6e3;
transition: color 0.2s;
}
.department-item:hover {
border-color: var(--color-primary);
color: var(--color-secondary);
background: var(--color-bg-highlight);
box-shadow: 0 4px 16px rgba(62,198,227,0.15);
}
.department-item:hover .dept-icon i {
color: var(--color-secondary);
}
.department-name {
font-size: 0.98rem;
color: var(--color-text-main);
font-weight: 500;
margin-top: 0.3rem;
margin-bottom: 0;
display: block;
white-space: normal;
text-align: center;
line-height: 1.2;
}
.department-item.hidden-row, .department-name.hidden-row {
display: none;
}
.departments-toggle {
margin-top: 1.5rem;
}
.departments-toggle .primary-btn {
font-size: 1rem;
padding: 0.5em 2em;
border-radius: 30px;
}
@media (max-width: 1100px) {
.departments-grid {
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem 1.5rem;
}
}
@media (max-width: 800px) {
.departments-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.2rem 1.2rem;
}
.department-item {
width: 90px;
height: 90px;
font-size: 0.95rem;
}
.department-item .dept-icon {
width: 32px;
height: 32px;
}
.department-item .dept-icon i {
font-size: 1.3rem;
}
}
@media (max-width: 500px) {
.departments-grid {
grid-template-columns: repeat(1, 1fr);
}
}
/* Modal styles */
.dept-modal {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
overflow: auto;
background: rgba(23,56,71,0.25);
align-items: center;
justify-content: center;
}
.dept-modal[style*="flex"] {
display: flex !important;
}
.dept-modal-content {
background: #fff;
margin: auto;
padding: 2.2rem 2.5rem 2rem 2.5rem;
border-radius: 18px;
max-width: 480px;
width: 95vw;
box-shadow: 0 8px 32px rgba(62,198,227,0.18);
position: relative;
text-align: left;
color: var(--color-text-main);
display: flex;
flex-direction: column;
align-items: flex-start;
}
.dept-modal-close {
position: absolute;
top: 18px;
right: 22px;
font-size: 2rem;
color: #888;
cursor: pointer;
font-weight: 700;
transition: color 0.2s;
}
.dept-modal-close:hover {
color: var(--color-primary);
}
#deptModalTitle {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1.1rem;
color: var(--color-primary);
}
#deptModalDesc {
font-size: 1.08rem;
margin-bottom: 2rem;
color: var(--color-text-main);
}
.dept-modal-btn {
font-size: 1.1rem;
padding: 0.7em 2.2em;
border-radius: 30px;
font-weight: 600;
}
@media (max-width: 900px) {
.departments-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.departments-grid {
grid-template-columns: repeat(1, 1fr);
}
.department-item {
width: 90px;
height: 90px;
font-size: 0.95rem;
}
.dept-modal-content {
padding: 1.2rem 0.7rem 1.2rem 0.7rem;
}
}
/* Treatment Plan Section Styles */
.treatment-plan {
padding: 4rem 0;
background: #fff;
}
/* Department Selection Styles */
.department-selection {
display: flex;
gap: 2rem;
justify-content: center;
margin-bottom: 3rem;
}
.dept-choice-btn {
background: linear-gradient(135deg, #ffffff 0%, #f8fdff 100%);
border: 2px solid rgba(62, 198, 227, 0.15);
border-radius: 20px;
padding: 2.5rem 2rem;
text-align: center;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 8px 32px rgba(62, 198, 227, 0.1);
position: relative;
overflow: hidden;
max-width: 300px;
flex: 1;
}
.dept-choice-btn:hover {
transform: translateY(-8px);
box-shadow: 0 16px 48px rgba(62, 198, 227, 0.2);
border-color: rgba(62, 198, 227, 0.3);
}
.dept-choice-icon {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
color: white;
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
margin: 0 auto 1.5rem;
box-shadow: 0 8px 24px rgba(62, 198, 227, 0.3);
transition: all 0.3s ease;
}
.dept-choice-btn:hover .dept-choice-icon {
transform: scale(1.1);
box-shadow: 0 12px 32px rgba(62, 198, 227, 0.4);
}
.dept-choice-btn h3 {
font-size: 1.8rem;
font-weight: 700;
color: var(--color-text-main);
margin-bottom: 1rem;
}
.dept-choice-btn p {
color: var(--color-dark-text);
font-size: 1rem;
line-height: 1.6;
}
.back-to-selection {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
color: white;
border: none;
padding: 0.8rem 1.5rem;
border-radius: 12px;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
}
.back-to-selection:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(62, 198, 227, 0.3);
}
@media (max-width: 768px) {
.department-selection {
flex-direction: column;
gap: 1.5rem;
}
.dept-choice-btn {
max-width: none;
padding: 2rem 1.5rem;
}
.dept-choice-icon {
width: 60px;
height: 60px;
font-size: 2rem;
}
.dept-choice-btn h3 {
font-size: 1.5rem;
}
}
.treatment-department {
background: linear-gradient(135deg, #f8fdff 0%, #ffffff 100%);
border-radius: 24px;
padding: 3rem;
margin-bottom: 3rem;
box-shadow: 0 12px 40px rgba(62, 198, 227, 0.12);
border: 1px solid rgba(62, 198, 227, 0.08);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.treatment-department::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 50%, #4CAF50 100%);
opacity: 0.8;
}
.treatment-department:nth-child(even)::before {
background: linear-gradient(90deg, #FF6B6B 0%, var(--color-primary) 50%, var(--color-secondary) 100%);
}
.treatment-department:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(62, 198, 227, 0.15);
}
.treatment-department:last-child {
margin-bottom: 0;
}
.department-header {
display: flex;
align-items: center;
gap: 2rem;
margin-bottom: 2.5rem;
padding-bottom: 1.5rem;
border-bottom: 2px solid rgba(62, 198, 227, 0.1);
}
.dept-icon-large {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
color: white;
width: 80px;
height: 80px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
box-shadow: 0 8px 24px rgba(62, 198, 227, 0.3);
}
.department-header h3 {
font-size: 2.5rem;
font-weight: 700;
color: var(--color-text-main);
margin: 0;
}
.treatment-content h4 {
font-size: 1.8rem;
font-weight: 600;
color: var(--color-text-main);
margin-bottom: 2rem;
text-align: center;
position: relative;
padding-bottom: 1rem;
}
.treatment-content h4::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
border-radius: 2px;
}
.treatment-department:nth-child(even) .treatment-content h4::after {
background: linear-gradient(90deg, #FF6B6B 0%, var(--color-primary) 100%);
}
.treatment-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
margin-bottom: 3rem;
position: relative;
padding: 1rem 0;
}
.treatment-list::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent 0%, rgba(62, 198, 227, 0.2) 20%, rgba(62, 198, 227, 0.4) 50%, rgba(62, 198, 227, 0.2) 80%, transparent 100%);
border-radius: 1px;
}
.treatment-column {
position: relative;
padding: 1rem;
background: rgba(255, 255, 255, 0.5);
border-radius: 20px;
backdrop-filter: blur(10px);
}
.treatment-column ul {
list-style: none;
padding: 0;
margin: 0;
}
.treatment-column:first-child {
border-right: 1px solid rgba(62, 198, 227, 0.1);
}
.treatment-column::before {
content: '';
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 4px;
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
border-radius: 2px;
opacity: 0.6;
}
.treatment-column li {
background: linear-gradient(135deg, #ffffff 0%, #f8fdff 100%);
padding: 1.2rem 1.8rem 1.2rem 3rem;
margin-bottom: 1rem;
border-radius: 16px;
border: 1px solid rgba(62, 198, 227, 0.12);
box-shadow: 0 4px 12px rgba(62, 198, 227, 0.08);
font-size: 1.1rem;
color: var(--color-text-main);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
font-weight: 500;
line-height: 1.5;
}
.treatment-column li::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-secondary) 100%);
transition: width 0.4s ease;
}
.treatment-column li:hover {
transform: translateX(8px) translateY(-2px);
box-shadow: 0 8px 24px rgba(62, 198, 227, 0.18);
background: linear-gradient(135deg, #ffffff 0%, #edf9ff 100%);
border-color: rgba(62, 198, 227, 0.25);
}
.treatment-column li:hover::after {
width: 6px;
}
.treatment-column li::before {
content: "✓";
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
color: white;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
font-weight: bold;
box-shadow: 0 2px 8px rgba(62, 198, 227, 0.3);
transition: all 0.3s ease;
}
.treatment-column li:hover::before {
transform: translateY(-50%) scale(1.1);
box-shadow: 0 4px 12px rgba(62, 198, 227, 0.4);
}
/* Special styling for different treatment types */
.treatment-column li:nth-child(odd) {
background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
}
.treatment-column li:nth-child(even) {
background: linear-gradient(135deg, #ffffff 0%, #f8fdff 100%);
}
.treatment-column li:nth-child(3n) {
background: linear-gradient(135deg, #ffffff 0%, #f5fbff 100%);
}
.treatment-column li:nth-child(3n)::after {
background: linear-gradient(180deg, #4CAF50 0%, #45a049 100%);
}
.treatment-column li:nth-child(3n)::before {
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
}
.treatment-column li:nth-child(5n)::after {
background: linear-gradient(180deg, #FF6B6B 0%, #ee5a52 100%);
}
.treatment-column li:nth-child(5n)::before {
background: linear-gradient(135deg, #FF6B6B 0%, #ee5a52 100%);
}
.treatment-buttons {
display: flex;
gap: 1.5rem;
justify-content: center;
flex-wrap: wrap;
}
.treatment-buttons .primary-btn,
.treatment-buttons .secondary-btn {
padding: 1rem 2.5rem;
font-size: 1.1rem;
font-weight: 600;
border-radius: 12px;
transition: all 0.3s ease;
}
.treatment-buttons .primary-btn {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
box-shadow: 0 6px 20px rgba(62, 198, 227, 0.3);
}
.treatment-buttons .primary-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(62, 198, 227, 0.4);
}
.treatment-buttons .secondary-btn {
background: white;
color: var(--color-primary);
border: 2px solid var(--color-primary);
box-shadow: 0 4px 16px rgba(62, 198, 227, 0.1);
}
.treatment-buttons .secondary-btn:hover {
background: var(--color-primary);
color: white;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(62, 198, 227, 0.3);
}
/* Responsive Design for Treatment Plan */
@media (max-width: 1100px) {
.treatment-department {
padding: 2.5rem;
}
.department-header {
gap: 1.5rem;
}
.dept-icon-large {
width: 70px;
height: 70px;
font-size: 2.2rem;
}
.department-header h3 {
font-size: 2.2rem;
}
}
@media (max-width: 900px) {
.treatment-list {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.treatment-list::before {
display: none;
}
.treatment-column:first-child {
border-right: none;
border-bottom: 1px solid rgba(62, 198, 227, 0.1);
margin-bottom: 1rem;
padding-bottom: 2rem;
}
.treatment-department {
padding: 2rem;
}
.department-header {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.department-header h3 {
font-size: 2rem;
}
.treatment-content h4 {
font-size: 1.6rem;
}
.treatment-buttons {
flex-direction: column;
align-items: center;
}
.treatment-buttons .primary-btn,
.treatment-buttons .secondary-btn {
width: 100%;
max-width: 300px;
}
}
@media (max-width: 600px) {
.treatment-plan {
padding: 2rem 0;
}
.treatment-department {
padding: 1.5rem;
margin-bottom: 2rem;
}
.dept-icon-large {
width: 60px;
height: 60px;
font-size: 2rem;
}
.department-header h3 {
font-size: 1.8rem;
}
.treatment-content h4 {
font-size: 1.4rem;
}
.treatment-column {
padding: 0.8rem;
}
.treatment-column li {
padding: 1rem 1.2rem 1rem 2.5rem;
font-size: 1rem;
}
.treatment-column li::before {
width: 20px;
height: 20px;
left: 0.8rem;
font-size: 0.8rem;
}
.treatment-buttons .primary-btn,
.treatment-buttons .secondary-btn {
padding: 0.8rem 2rem;
font-size: 1rem;
}
}
.what-we-offer {
padding: 3rem 0 2rem 0;
background: #fff;
}
.offer-title {
text-align: center;
font-size: 2.3rem;
font-weight: 700;
color: var(--color-text-main);
margin-bottom: 2.5rem;
}
.offer-cards {
display: flex;
justify-content: center;
gap: 2.5rem;
flex-wrap: wrap;
}
.offer-card {
background: #f8fdff;
border-radius: 18px;
box-shadow: 0 4px 16px rgba(62,198,227,0.4);
width: 320px;
min-height: 340px;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 2rem;
transition: box-shadow 0.2s, transform 0.2s;
}
.offer-card:hover {
box-shadow: 0 8px 32px rgba(62,198,227,0.5);
transform: translateY(-6px) scale(1.03);
}
.offer-card .offer-icon {
margin-top: 2.2rem;
margin-bottom: 1.5rem;
font-size: 4.2rem;
color: var(--color-primary);
}
.offer-card-content {
background: #fff;
width: 100%;
border-radius: 0 0 18px 18px;
padding: 1.2rem 1.5rem 1.5rem 1.5rem;
text-align: left;
min-height: 120px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.offer-card-content h3 {
font-size: 1.35rem;
font-weight: 600;
color: var(--color-text-main);
margin-bottom: 0.5rem;
}
.offer-card-content p {
color: #888;
font-size: 1.05rem;
margin: 0;
}
.offer-card.offer-abroad {
background: #eafdff;
}
.offer-card.offer-opinion {
background: #edfff7;
}
.offer-card.offer-cost {
background: #f4f4ff;
}
@media (max-width: 1100px) {
.offer-cards {
gap: 1.2rem;
}
.offer-card {
width: 270px;
min-height: 300px;
}
}
@media (max-width: 900px) {
.offer-cards {
flex-direction: column;
align-items: center;
}
.offer-card {
width: 90%;
min-width: 220px;
max-width: 400px;
}
}
.offer-img {
margin-top: 2.2rem;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
width: 90px;
height: 90px;
border-radius: 18px;
overflow: hidden;
background: #fff;
box-shadow: 0 2px 8px rgba(62,198,227,0.07);
}
.offer-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.second-opinion-section {
background: #fff;
padding: 4rem 0 3rem 0;
}
.second-opinion-flex {
display: flex;
align-items: center;
justify-content: center;
gap: 3rem;
max-width: 1200px;
}
.second-opinion-img {
flex: 1 1 45%;
display: flex;
align-items: center;
justify-content: center;
}
.second-opinion-img img {
max-width: 100%;
width: 420px;
border-radius: 12px;
box-shadow: 0 4px 24px rgba(62,198,227,0.10);
background: #f8fdff;
}
.second-opinion-content {
flex: 1 1 55%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 1rem 0;
}
.second-opinion-content h2 {
font-size: 2.8rem;
font-weight: 600;
color: var(--color-text-main);
margin-bottom: 2rem;
}
.second-opinion-list {
margin-bottom: 2.5rem;
}
.second-opinion-item {
display: flex;
align-items: flex-start;
gap: 1rem;
font-size: 1.18rem;
color: var(--color-text-main);
margin-bottom: 1.3rem;
}
.second-opinion-item .emoji {
font-size: 1.7rem;
margin-top: 0.1em;
}
.second-opinion-btn {
display: inline-block;
background: #4caf50;
color: #fff;
font-size: 1.4rem;
font-weight: 700;
padding: 0.9em 2.8em;
border-radius: 50px;
text-decoration: none;
margin-top: 0.5rem;
transition: background 0.2s, transform 0.2s;
box-shadow: 0 4px 24px rgba(76,175,80,0.15);
letter-spacing: 0.5px;
}
.second-opinion-btn:hover {
background: #43a047;
transform: translateY(-2px) scale(1.03);
}
@media (max-width: 900px) {
.second-opinion-flex {
flex-direction: column;
gap: 2rem;
align-items: stretch;
}
.second-opinion-img img {
width: 100%;
max-width: 100%;
}
.second-opinion-content h2 {
font-size: 2rem;
}
}
/* Doctors page: solid navbar background */
body.doctors-page header {
background-color: var(--color-text-light) !important;
box-shadow: var(--shadow);
}
body.doctors-page .company-name {
color: var(--color-medium-blue) !important;
}
body.doctors-page .company-name span{
color: var(--color-dark-blue);
}
body.doctors-page .doctors-list-section{
padding-top: 7rem;
}
/* Packages Page Styles */
.packages-list-section {
padding: 5rem 0 3rem 0;
background: #fff;
}
.packages-title {
text-align: center;
font-size: 2.3rem;
font-weight: 700;
color: var(--color-text-main);
padding-top: 3rem;
margin-bottom: 2.5rem;
}
.packages-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2.5rem;
justify-content: center;
}
.package-card {
background: #f8fdff;
border-radius: 18px;
box-shadow: 0 4px 16px rgba(62,198,227,0.10);
border: 2px solid #e6f2fa;
display: flex;
flex-direction: column;
align-items: center;
transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
padding: 0;
max-width: 320px;
margin: 0 auto;
}
.package-card:hover {
box-shadow: 0 8px 32px rgba(62,198,227,0.18);
border-color: var(--color-primary);
transform: translateY(-6px) scale(1.03);
}
.package-image {
width: 100%;
height: 180px;
border-radius: 16px 16px 0 0;
overflow: hidden;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.package-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 16px 16px 0 0;
display: block;
}
.package-card-content {
padding: 28px 20px 20px 20px;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.package-name {
font-size: 1.18rem;
font-weight: 700;
color: var(--color-text-main);
margin-bottom: 0.7rem;
text-align: center;
}
.package-price {
font-size: 1.05rem;
color: var(--color-primary);
margin-bottom: 1.1rem;
text-align: center;
}
.package-price span {
font-weight: 700;
color: var(--color-dark-blue);
}
.package-features {
list-style: none;
padding: 0;
margin: 0 0 1.5rem 0;
width: 100%;
}
.package-features li {
font-size: 0.98rem;
color: #7F8C9A;
margin-bottom: 0.7rem;
text-align: left;
}
.package-btn {
display: block;
width: 100%;
background: #fff;
color: var(--color-medium-blue);
border: 2px solid var(--color-medium-blue);
border-radius: 12px;
padding: 12px 0;
font-size: 1.08rem;
font-weight: 600;
text-align: center;
transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
margin-top: auto;
margin-bottom: 0;
box-shadow: none;
}
.package-btn:hover {
background: var(--color-medium-blue);
color: #fff;
border-color: var(--color-primary);
transform: translateY(-2px) scale(1.02);
}
@media (max-width: 1200px) {
.packages-grid {
grid-template-columns: repeat(2, 1fr);
}
.package-card {
max-width: 98vw;
}
}
@media (max-width: 700px) {
.packages-grid {
grid-template-columns: 1fr;
gap: 1.2rem;
}
.package-card {
max-width: 98vw;
}
.package-image {
height: 120px;
}
}
body.packages-page header {
background-color: var(--color-text-light) !important;
box-shadow: var(--shadow);
}
body.packages-page .company-name {
color: var(--color-medium-blue) !important;
}
body.packages-page .company-name span{
color: var(--color-dark-blue);
}
/* Explore Packages Home Section */
.explore-packages-section {
background: linear-gradient(135deg, #f8fdff 60%, #eafdff 100%);
padding: 4rem 0 4rem 0;
position: relative;
overflow: visible;
margin-bottom: 5.5rem;
box-shadow: 0 16px 32px -12px rgba(62,198,227,0.10);
border-radius: 0 0 36px 36px;
}
@media (max-width: 700px) {
.explore-packages-section {
margin-bottom: 3.5rem;
border-radius: 0 0 18px 18px;
}
}
.explore-packages-cards {
position: relative;
width: 100%;
min-height: 320px;
max-width: 900px;
margin: 0 auto;
display: flex;
align-items: flex-end;
justify-content: center;
}
.explore-package-card {
position: absolute;
width: 260px;
height: 320px;
border-radius: 18px;
box-shadow: 0 4px 24px rgba(62,198,227,0.13);
overflow: hidden;
background: #fff;
transition: box-shadow 0.2s, transform 0.2s;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
.explore-package-card.main {
position: relative;
z-index: 2;
left: 0;
top: 0;
box-shadow: 0 8px 32px rgba(62,198,227,0.18);
border: 2px solid var(--color-primary);
background: #fff;
transform: scale(1.08);
}
.explore-package-card img {
width: 100%;
height: 170px;
object-fit: cover;
border-radius: 18px 18px 0 0;
display: block;
}
.explore-package-info {
padding: 1.3rem 1.2rem 1.2rem 1.2rem;
text-align: left;
width: 100%;
}
.explore-package-info h3 {
font-size: 1.18rem;
font-weight: 700;
color: var(--color-dark-blue);
margin-bottom: 0.4rem;
}
.explore-package-info p {
font-size: 1.01rem;
color: #222e3a;
margin-bottom: 0.2rem;
}
.explore-package-info .desc {
color: #2a3b4d;
font-size: 0.98rem;
margin-bottom: 0;
}
.explore-package-card.blurred {
filter: blur(2.5px) brightness(0.7);
opacity: 0.7;
pointer-events: none;
box-shadow: 0 2px 12px rgba(62,198,227,0.10);
border: 2px solid #e6f2fa;
background: #e6f2fa;
}
.explore-packages-btn {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 10;
background: var(--color-medium-blue);
color: #fff;
font-size: 1.35rem;
font-weight: 700;
padding: 1.1em 3.5em;
border-radius: 50px;
text-decoration: none;
box-shadow: 0 4px 24px rgba(62,198,227,0.18);
transition: background 0.2s, transform 0.2s;
border: none;
letter-spacing: 0.5px;
}
.explore-packages-btn:hover {
background: var(--color-primary);
color: #fff;
transform: translate(-50%, -54%) scale(1.04);
}
@media (max-width: 1100px) {
.explore-packages-cards {
min-height: 260px;
max-width: 98vw;
}
.explore-package-card, .explore-package-card.main {
width: 200px;
height: 240px;
}
.explore-package-card img {
height: 110px;
}
}
@media (max-width: 700px) {
.explore-packages-cards {
min-height: 180px;
}
.explore-package-card, .explore-package-card.main {
width: 120px;
height: 140px;
}
.explore-package-card img {
height: 60px;
}
.explore-package-info {
padding: 0.5rem 0.3rem 0.3rem 0.3rem;
}
.explore-packages-btn {
font-size: 1rem;
padding: 0.7em 1.5em;
}
}
/* Testimonials Videos Section */
.testimonials-videos-section {
background: var(--color-dark-blue) !important;
color: #fff !important;
padding: 4rem 0 4rem 0;
}
.testimonials-header {
text-align: center;
margin-bottom: 2.5rem;
}
.testimonials-header h2 {
color: #fff;
font-size: 2.2rem;
margin-bottom: 0.7rem;
}
.testimonials-header p {
color: #e0e8f0;
font-size: 1.1rem;
}
.testimonials-videos-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
justify-content: center;
}
.testimonial-video-card {
background: rgba(255,255,255,0.07);
border-radius: 18px;
box-shadow: 0 4px 18px rgba(0,0,0,0.10);
padding: 2rem 1.2rem 1.2rem 1.2rem;
display: flex;
flex-direction: column;
align-items: center;
min-height: 320px;
position: relative;
transition: box-shadow 0.2s, transform 0.2s;
}
.testimonial-video-card:hover {
box-shadow: 0 8px 32px rgba(62,198,227,0.18);
transform: translateY(-6px) scale(1.03);
}
.testimonial-video-placeholder {
width: 100%;
height: 180px;
background: rgba(0,0,0,0.18);
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 1.2rem;
position: relative;
}
.video-icon {
font-size: 3.2rem;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.video-text {
color: #fff;
font-size: 1.08rem;
font-weight: 500;
opacity: 0.85;
}
.testimonial-quote {
color: #fff;
font-size: 1.08rem;
text-align: center;
margin-top: auto;
font-style: italic;
opacity: 0.95;
}
@media (max-width: 1100px) {
.testimonials-videos-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.testimonial-video-card {
min-height: 220px;
padding: 1.2rem 0.7rem 0.7rem 0.7rem;
}
.testimonial-video-placeholder {
height: 110px;
}
}
/* Packages Preview Section */
.packages-preview-section {
background: #f8fdff;
padding: 4rem 0 3.5rem 0;
position: relative;
margin-bottom: 0;
box-shadow: 0 8px 24px -8px rgba(62,198,227,0.07);
border-radius: 0 0 32px 32px;
}
.packages-preview-title {
text-align: center;
font-size: 2.1rem;
font-weight: 700;
color: var(--color-dark-blue);
margin-bottom: 2.2rem;
}
.packages-preview-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2.2rem;
justify-content: center;
}
.package-preview-card {
background: #fff;
border-radius: 16px;
box-shadow: 0 2px 12px rgba(62,198,227,0.08);
border: 2px solid #e6f2fa;
display: flex;
flex-direction: column;
align-items: center;
transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
padding: 0 0 1.2rem 0;
max-width: 260px;
margin: 0 auto;
}
.package-preview-card:hover {
box-shadow: 0 8px 32px rgba(62,198,227,0.13);
border-color: var(--color-primary);
transform: translateY(-6px) scale(1.03);
}
.package-preview-card img {
width: 100%;
height: 140px;
object-fit: cover;
border-radius: 16px 16px 0 0;
display: block;
}
.package-preview-info {
padding: 1.1rem 1.1rem 0 1.1rem;
text-align: center;
width: 100%;
}
.package-preview-info h3 {
font-size: 1.08rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0.4rem;
}
.package-preview-price {
font-size: 1.01rem;
color: var(--color-dark-blue);
margin-bottom: 0.5rem;
}
.package-preview-feature {
color: #7F8C9A;
font-size: 0.97rem;
margin-bottom: 0;
}
@media (max-width: 1100px) {
.packages-preview-grid {
grid-template-columns: repeat(2, 1fr);
}
.package-preview-card {
max-width: 98vw;
}
}
@media (max-width: 700px) {
.packages-preview-grid {
grid-template-columns: 1fr;
gap: 1.2rem;
}
.package-preview-card {
max-width: 98vw;
}
.package-preview-card img {
height: 90px;
}
}
/* Explore Packages CTA Section (button only) */
.explore-packages-section {
background: transparent;
box-shadow: none;
border-radius: 0;
padding: 0 0 4rem 0;
margin-bottom: 5.5rem;
text-align: center;
}
.explore-packages-cta {
display: flex;
justify-content: center;
align-items: center;
min-height: 120px;
}
.explore-packages-btn {
background: var(--color-medium-blue);
color: #fff;
font-size: 1.35rem;
font-weight: 700;
padding: 1.1em 3.5em;
border-radius: 50px;
text-decoration: none;
box-shadow: 0 4px 24px rgba(62,198,227,0.18);
transition: background 0.2s, transform 0.2s;
border: none;
letter-spacing: 0.5px;
display: inline-block;
}
.explore-packages-btn:hover {
background: var(--color-primary);
color: #fff;
transform: scale(1.04);
}
/* --- Doctors Page Redesign --- */
.doctor-hero-section {
background: linear-gradient(135deg, #f8fdff 0%, #ffffff 50%, #edf9ff 100%);
padding: 3rem 0 2rem 0;
position: relative;
overflow: hidden;
}
.doctor-hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
pointer-events: none;
}
.doctor-hero-section::after {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(62, 198, 227, 0.1) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.doctor-hero-container {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1100px;
margin: 0 auto;
gap: 2.5rem;
flex-wrap: wrap;
position: relative;
z-index: 1;
}
.doctor-hero-text {
flex: 1 1 340px;
}
.doctor-hero-text h1 {
font-size: 2.5rem;
font-weight: 700;
color: #173847;
margin-bottom: 1rem;
line-height: 1.2;
}
.doctor-hero-text p {
font-size: 1.2rem;
color: #333;
margin-bottom: 0;
}
.doctor-hero-image {
flex: 1 1 320px;
display: flex;
justify-content: flex-end;
}
.doctor-hero-image img {
max-width: 340px;
width: 100%;
border-radius: 1.5rem;
box-shadow: 0 4px 24px rgba(23,56,71,0.10);
}
.doctor-features-section {
background: linear-gradient(180deg, #ffffff 0%, #f8fdff 100%);
padding: 2.5rem 0 3rem 0;
position: relative;
}
.doctor-features-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent 0%, var(--color-primary) 50%, transparent 100%);
}
.doctor-features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2.5rem;
max-width: 1100px;
margin: 0 auto 2.5rem auto;
}
.doctor-feature-block {
background: #f7fafc;
border-radius: 1.5rem;
box-shadow: 0 2px 12px rgba(23,56,71,0.07);
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem 1.5rem 1.5rem 1.5rem;
min-height: 370px;
}
.doctor-feature-image {
width: 110px;
height: 110px;
border-radius: 1rem;
overflow: hidden;
margin-bottom: 1.2rem;
box-shadow: 0 2px 8px rgba(23,56,71,0.10);
}
.doctor-feature-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.doctor-feature-content h2 {
font-size: 1.25rem;
font-weight: 600;
color: #173847;
margin-bottom: 0.5rem;
text-align: center;
}
.doctor-feature-content p {
font-size: 1.05rem;
color: #333;
text-align: center;
}
.doctor-contact-btn-wrapper {
display: flex;
justify-content: center;
}
.doctor-contact-btn {
background: #1976d2;
color: #fff;
font-size: 1.15rem;
font-weight: 600;
padding: 0.8em 2.5em;
border-radius: 30px;
text-decoration: none;
box-shadow: 0 2px 12px rgba(25,118,210,0.10);
transition: background 0.2s;
border: none;
display: inline-block;
}
.doctor-contact-btn:hover {
background: #12508a;
}
@media (max-width: 900px) {
.doctor-hero-container {
margin-top: 30px;
flex-direction: column-reverse;
align-items: center;
text-align: center;
gap: 1rem;
padding: 0 1rem;
}
.doctor-hero-image {
justify-content: center;
margin-bottom: 0.5rem;
}
}
/* --- Hospitals Page Redesign --- */
.hospital-hero-section {
background: linear-gradient(135deg, #f8fdff 0%, #ffffff 50%, #edf9ff 100%);
padding: 3rem 0 2rem 0;
position: relative;
overflow: hidden;
}
.hospital-hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
pointer-events: none;
}
.hospital-hero-section::after {
content: '';
position: absolute;
top: -50%;
left: -10%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(62, 198, 227, 0.1) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.hospital-hero-container {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1100px;
margin: 0 auto;
gap: 2.5rem;
flex-wrap: wrap;
position: relative;
z-index: 1;
}
.hospital-hero-text {
flex: 1 1 340px;
}
.hospital-hero-text h1 {
font-size: 2.5rem;
font-weight: 700;
color: #173847;
margin-bottom: 1rem;
line-height: 1.2;
}
.hospital-hero-text p {
font-size: 1.2rem;
color: #333;
margin-bottom: 0;
}
.hospital-hero-image {
flex: 1 1 320px;
display: flex;
justify-content: flex-end;
}
.hospital-hero-image img {
max-width: 340px;
width: 100%;
border-radius: 1.5rem;
box-shadow: 0 4px 24px rgba(23,56,71,0.10);
}
.hospital-features-section {
background: linear-gradient(180deg, #ffffff 0%, #f8fdff 100%);
padding: 2.5rem 0 3rem 0;
position: relative;
}
.hospital-features-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent 0%, var(--color-primary) 50%, transparent 100%);
}
.hospital-features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2.5rem;
max-width: 1100px;
margin: 0 auto 2.5rem auto;
}
.hospital-feature-block {
background: #f7fafc;
border-radius: 1.5rem;
box-shadow: 0 2px 12px rgba(23,56,71,0.07);
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem 1.5rem 1.5rem 1.5rem;
min-height: 370px;
}
.hospital-feature-image {
width: 110px;
height: 110px;
border-radius: 1rem;
overflow: hidden;
margin-bottom: 1.2rem;
box-shadow: 0 2px 8px rgba(23,56,71,0.10);
display: flex;
gap: 0.5rem;
justify-content: center;
align-items: center;
}
.hospital-feature-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 1rem;
}
.hospital-feature-content h2 {
font-size: 1.25rem;
font-weight: 600;
color: #173847;
margin-bottom: 0.5rem;
text-align: center;
}
.hospital-feature-content p {
font-size: 1.05rem;
color: #333;
text-align: center;
}
.hospital-contact-btn-wrapper {
display: flex;
justify-content: center;
}
.hospital-contact-btn {
background: #1976d2;
color: #fff;
font-size: 1.15rem;
font-weight: 600;
padding: 0.8em 2.5em;
border-radius: 30px;
text-decoration: none;
box-shadow: 0 2px 12px rgba(25,118,210,0.10);
transition: background 0.2s;
border: none;
display: inline-block;
margin-top: 1.5rem;
}
.hospital-contact-btn:hover {
background: #12508a;
}
.hospital-partners-section {
background: linear-gradient(180deg, #ffffff 0%, #f8fdff 100%);
padding: 2.5rem 0 3rem 0;
position: relative;
}
.hospital-partners-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent 0%, var(--color-primary) 50%, transparent 100%);
}
.partners-title {
text-align: center;
font-size: 2rem;
font-weight: 600;
color: #173847;
margin-bottom: 2rem;
}
.partners-grid {
display: flex;
flex-wrap: wrap;
gap: 2.5rem;
justify-content: center;
align-items: center;
}
.partner-item {
background: #fff;
border-radius: 1.2rem;
box-shadow: 0 2px 12px rgba(23,56,71,0.07);
padding: 1.2rem 2rem 1rem 2rem;
display: flex;
flex-direction: column;
align-items: center;
min-width: 180px;
max-width: 220px;
}
.partner-item img {
width: 80px;
height: 80px;
object-fit: contain;
margin-bottom: 0.7rem;
}
.partner-item span {
font-size: 1.1rem;
color: #173847;
font-weight: 500;
text-align: center;
}
@media (max-width: 900px) {
.hospital-hero-container {
flex-direction: column-reverse;
align-items: center;
text-align: center;
gap: 1rem;
padding: 0 1rem;
}
.hospital-hero-image {
justify-content: center;
margin-bottom: 0.5rem;
}
.partners-grid {
gap: 1.2rem;
}
}
/* --- Hospitals Page Feature Rows --- */
.hospital-features-list {
display: flex;
flex-direction: column;
gap: 3.5rem;
max-width: 1100px;
margin: 0 auto 2.5rem auto;
}
.hospital-feature-row {
display: flex;
align-items: center;
gap: 2.5rem;
justify-content: space-between;
}
.hospital-feature-row-reverse {
flex-direction: row-reverse;
}
.hospital-feature-img-col {
flex: 1 1 420px;
display: flex;
justify-content: center;
align-items: center;
}
.hospital-feature-img-col img {
width: 95%;
max-width: 480px;
min-width: 260px;
border-radius: 1.5rem;
box-shadow: 0 4px 24px rgba(23,56,71,0.10);
object-fit: cover;
}
/* Remove background styling and reduce size for NABH-JCI image */
.hospital-feature-img-col img[src*="nabh-jci"] {
border-radius: 0;
box-shadow: none;
background: transparent;
width: 100%;
max-width: 350px;
}
.hospital-feature-text-col {
flex: 1 1 340px;
padding: 1.5rem 0;
}
.hospital-feature-text-col h2 {
font-size: 1.5rem;
font-weight: 600;
color: #173847;
margin-bottom: 0.7rem;
}
.hospital-feature-text-col p {
font-size: 1.1rem;
color: #333;
margin-bottom: 0;
}
@media (max-width: 1100px) {
.hospital-feature-img-col img {
max-width: 340px;
}
}
@media (max-width: 900px) {
.hospital-feature-row, .hospital-feature-row-reverse {
flex-direction: column !important;
gap: 0.3rem;
text-align: center;
margin-bottom: 0.5rem;
}
.hospital-feature-img-col img {
max-width: 100%;
min-width: 0;
margin-bottom: 0.2rem;
}
.hospital-feature-text-col {
padding: 0;
margin-top: 0;
}
.hospital-feature-text-col h2 {
margin-bottom: 0.3rem;
margin-top: 0;
}
.hospital-feature-text-col p {
margin-bottom: 0.2rem;
}
}
/* Always white navbar background for hospitals page */
.hospitals-page header {
background: #fff !important;
box-shadow: 0 2px 12px rgba(23,56,71,0.04);
}
.hospitals-page .nav-menu {
background: #fff !important;
}
.hospitals-page nav {
background: #fff !important;
}
body.scrolled-navbar main, body.scrolled-navbar .main-content, body.scrolled-navbar > section:first-of-type {
margin-top: 90px;
}
@media (max-width: 900px) {
body.scrolled-navbar main, body.scrolled-navbar .main-content, body.scrolled-navbar > section:first-of-type {
margin-top: 80px;
}
}
/* Specific top spacing for doctor and hospital pages */
.doctors-page main,
.hospitals-page main {
margin-top: 70px;
}
@media (max-width: 900px) {
.doctors-page main,
.hospitals-page main {
margin-top: 80px;
}
}
@media (max-width: 600px) {
.doctors-page main,
.hospitals-page main {
margin-top: 75px;
}
}
@media (max-width: 900px) {
.hospital-features-list {
gap: 0.8rem;
margin-bottom: 0.5rem;
}
.hospital-feature-row, .hospital-feature-row-reverse {
gap: 0.5rem;
padding-bottom: 0.2rem;
padding-top: 0.2rem;
}
.hospital-hero-section {
padding: 0.5rem 0 0.2rem 0;
}
.hospital-partners-section {
padding: 0.8rem 0;
}
}
/* --- Hospital Page Additions --- */
.hospital-intro-section {
background: linear-gradient(145deg, #ffffff 0%, #f0f9ff 100%);
padding: 2rem 0 1.5rem 0;
text-align: center;
position: relative;
}
.hospital-intro-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.5;
pointer-events: none;
}
@media (max-width: 900px) {
.hospital-intro-section {
padding: 0.8rem 0 0.5rem 0;
}
}
@media (max-width: 600px) {
.hospital-intro-section {
padding: 0.5rem 0 0.3rem 0;
}
}
.hospital-intro-section h2 {
color: #173847;
font-size: 2rem;
margin-bottom: 0.7rem;
}
.hospital-intro-section p {
color: #333;
font-size: 1.1rem;
max-width: 800px;
margin: 0 auto;
}
.hospital-support-section {
background: #fff;
padding: 2.5rem 0 2rem 0;
}
.hospital-support-grid {
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: center;
margin-top: 1.5rem;
}
.hospital-support-item {
background: #f7fafc;
border-radius: 1.2rem;
box-shadow: 0 2px 12px rgba(23,56,71,0.07);
padding: 1.5rem 1.2rem;
min-width: 220px;
max-width: 300px;
flex: 1 1 220px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.hospital-support-item i {
font-size: 2.2rem;
color: #1976d2;
margin-bottom: 0.7rem;
}
.hospital-support-item h3 {
font-size: 1.1rem;
color: #173847;
margin-bottom: 0.5rem;
}
.hospital-support-item p {
color: #333;
font-size: 1rem;
}
.hospital-international-section {
background: linear-gradient(145deg, #f8fdff 0%, #edf9ff 100%);
padding: 2rem 0 1.5rem 0;
text-align: center;
position: relative;
}
.hospital-international-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.4;
pointer-events: none;
}
.hospital-international-section h2 {
color: #173847;
font-size: 2rem;
margin-bottom: 0.7rem;
}
.hospital-international-section p {
color: #333;
font-size: 1.1rem;
max-width: 800px;
margin: 0 auto;
}
.hospital-testimonials-section {
background: #fff;
padding: 2.5rem 0 2rem 0;
text-align: center;
}
.hospital-testimonials-section h2 {
color: #173847;
font-size: 2rem;
margin-bottom: 1.2rem;
}
.hospital-testimonials-slider {
display: flex;
flex-direction: row;
gap: 2rem;
justify-content: center;
flex-wrap: wrap;
}
.hospital-testimonial-slide {
background: #f7fafc;
border-radius: 1.2rem;
box-shadow: 0 2px 12px rgba(23,56,71,0.07);
padding: 1.5rem 1.2rem;
min-width: 220px;
max-width: 340px;
flex: 1 1 220px;
text-align: left;
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 1rem;
}
.hospital-testimonial-slide p {
color: #173847;
font-size: 1.05rem;
margin-bottom: 0.7rem;
}
.hospital-testimonial-slide span {
color: #1976d2;
font-size: 0.98rem;
font-weight: 500;
}
@media (max-width: 900px) {
.hospital-support-grid, .hospital-testimonials-slider {
flex-direction: column;
gap: 1.2rem;
align-items: center;
}
.hospital-support-item, .hospital-testimonial-slide {
max-width: 100%;
min-width: 0;
}
}
/* --- Doctor Page Alternating Layout --- */
.doctor-features-list {
display: flex;
flex-direction: column;
gap: 3rem;
max-width: 1100px;
margin: 0 auto 2.5rem auto;
}
.doctor-feature-row {
display: flex;
align-items: center;
gap: 2.5rem;
justify-content: space-between;
}
.doctor-feature-row-reverse {
flex-direction: row-reverse;
}
.doctor-feature-img-col {
flex: 1 1 420px;
display: flex;
justify-content: center;
align-items: center;
}
.doctor-feature-img-col img {
width: 95%;
max-width: 420px;
min-width: 220px;
border-radius: 1.5rem;
box-shadow: 0 4px 24px rgba(23,56,71,0.10);
object-fit: cover;
}
.doctor-feature-text-col {
flex: 1 1 340px;
padding: 1.5rem 0;
}
.doctor-feature-text-col h2 {
font-size: 1.5rem;
font-weight: 600;
color: #173847;
margin-bottom: 0.7rem;
}
.doctor-feature-text-col p {
font-size: 1.1rem;
color: #333;
margin-bottom: 0;
}
@media (max-width: 1100px) {
.doctor-feature-img-col img {
max-width: 320px;
}
}
@media (max-width: 900px) {
.doctor-feature-row, .doctor-feature-row-reverse {
flex-direction: column !important;
gap: 0.3rem;
text-align: center;
margin-bottom: 0.5rem;
}
.doctor-feature-img-col img {
max-width: 100%;
min-width: 0;
margin-bottom: 0.2rem;
}
.doctor-feature-text-col {
padding: 0;
margin-top: 0;
}
.doctor-feature-text-col h2 {
margin-bottom: 0.3rem;
margin-top: 0;
}
.doctor-feature-text-col p {
margin-bottom: 0.2rem;
}
}
/* Doctor hero image: remove background and border */
.doctor-hero-image img {
background: none !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Doctor hero image: larger size */
.doctor-hero-image img {
background: none !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
width: 420px;
max-width: 95vw;
height: auto;
}
/* Doctor feature images: slightly smaller */
.doctor-feature-img-col img {
width: 80%;
max-width: 300px;
min-width: 160px;
}
@media (max-width: 900px) {
.doctor-hero-image img {
width: 75vw;
max-width: 300px;
height: 280px;
object-fit: cover;
object-position: center top;
}
.doctor-feature-img-col img {
max-width: 280px;
width: 70vw;
height: 200px;
object-fit: cover;
}
/* Reduce spacing for mobile */
.doctor-hero-section {
padding: 1rem 0 0.2rem 0;
margin-top: 0.5rem;
}
.doctor-features-list {
gap: 0.8rem;
margin-bottom: 0.5rem;
}
.doctor-feature-row, .doctor-feature-row-reverse {
gap: 0.2rem;
}
.doctor-intro-section,
.doctor-philosophy-section {
padding: 0.8rem 0 0.5rem 0;
}
.doctor-features-section,
.doctor-testimonials-section {
padding: 0.8rem 0;
}
.doctor-contact-btn-wrapper {
margin-top: 0.5rem;
}
}
@media (max-width: 600px) {
.doctor-hero-image img {
width: 70vw;
max-width: 250px;
height: 240px;
object-fit: cover;
object-position: center top;
}
.doctor-feature-img-col img {
max-width: 240px;
width: 65vw;
height: 180px;
object-fit: cover;
}
/* Further reduce spacing for smaller screens */
.doctor-hero-section {
padding: 0.8rem 0;
margin-top: 0.3rem;
}
.doctor-features-list {
gap: 0.3rem;
}
.doctor-intro-section,
.doctor-philosophy-section {
padding: 0.5rem 0 0.3rem 0;
}
.doctor-features-section,
.doctor-testimonials-section {
padding: 0.5rem 0;
}
.doctor-feature-row, .doctor-feature-row-reverse {
gap: 0.1rem;
margin-bottom: 0.3rem;
}
.doctor-feature-text-col h2 {
margin-bottom: 0.2rem;
margin-top: 0;
}
.doctor-feature-text-col p {
margin-bottom: 0.1rem;
}
}
/* --- Doctor Page Additions --- */
.doctor-intro-section {
background: linear-gradient(145deg, #ffffff 0%, #f0f9ff 100%);
padding: 2rem 0 1.5rem 0;
text-align: center;
position: relative;
}
.doctor-intro-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.5;
pointer-events: none;
}
@media (max-width: 900px) {
.doctor-intro-section {
padding: 0.8rem 0 0.5rem 0;
}
}
@media (max-width: 600px) {
.doctor-intro-section {
padding: 0.5rem 0 0.3rem 0;
}
}
.doctor-intro-section h2 {
color: #173847;
font-size: 2rem;
margin-bottom: 0.7rem;
}
.doctor-intro-section p {
color: #333;
font-size: 1.1rem;
max-width: 800px;
margin: 0 auto;
}
.doctor-expertise-section {
background: #fff;
padding: 2.5rem 0 2rem 0;
text-align: center;
}
.doctor-expertise-section h2 {
color: #173847;
font-size: 2rem;
margin-bottom: 1.2rem;
}
.doctor-expertise-list {
display: flex;
flex-wrap: wrap;
gap: 1.2rem 2.5rem;
justify-content: center;
max-width: 900px;
margin: 0 auto;
padding: 0;
}
.doctor-expertise-list li {
background: #f7fafc;
border-radius: 1.2rem;
box-shadow: 0 2px 12px rgba(23,56,71,0.07);
padding: 0.8rem 1.5rem;
font-size: 1.05rem;
color: #173847;
min-width: 200px;
flex: 1 1 200px;
text-align: center;
}
.doctor-philosophy-section {
background: linear-gradient(145deg, #f8fdff 0%, #edf9ff 100%);
padding: 2rem 0 1.5rem 0;
text-align: center;
position: relative;
}
.doctor-philosophy-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.4;
pointer-events: none;
}
.doctor-philosophy-section h2 {
color: #173847;
font-size: 2rem;
margin-bottom: 0.7rem;
}
.doctor-philosophy-section p {
color: #333;
font-size: 1.1rem;
max-width: 800px;
margin: 0 auto;
}
.doctor-testimonials-section {
background: linear-gradient(180deg, #ffffff 0%, #f8fdff 100%);
padding: 2.5rem 0 2rem 0;
text-align: center;
position: relative;
}
.doctor-testimonials-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent 0%, var(--color-primary) 50%, transparent 100%);
}
.doctor-testimonials-section h2 {
color: #173847;
font-size: 2rem;
margin-bottom: 1.2rem;
}
.doctor-testimonials-slider {
display: flex;
flex-direction: row;
gap: 2rem;
justify-content: center;
flex-wrap: wrap;
}
.doctor-testimonial-slide {
background: #f7fafc;
border-radius: 1.2rem;
box-shadow: 0 2px 12px rgba(23,56,71,0.07);
padding: 1.5rem 1.2rem;
min-width: 220px;
max-width: 340px;
flex: 1 1 220px;
text-align: left;
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 1rem;
}
.doctor-testimonial-slide p {
color: #173847;
font-size: 1.05rem;
margin-bottom: 0.7rem;
}
.doctor-testimonial-slide span {
color: #1976d2;
font-size: 0.98rem;
font-weight: 500;
}
@media (max-width: 900px) {
.doctor-expertise-list, .doctor-testimonials-slider {
flex-direction: column;
gap: 1.2rem;
align-items: center;
}
.doctor-expertise-list li, .doctor-testimonial-slide {
max-width: 100%;
min-width: 0;
}
/* Optimize hospital mobile spacing */
.hospital-hero-section {
padding: 1rem 0 0.2rem 0;
margin-top: 0.5rem;
}
.hospital-features-list {
gap: 0.8rem;
margin-bottom: 0.5rem;
}
.hospital-feature-row, .hospital-feature-row-reverse {
gap: 0.2rem;
padding-bottom: 0.1rem;
padding-top: 0.1rem;
}
.hospital-intro-section,
.hospital-international-section {
padding: 0.8rem 0 0.5rem 0;
}
.hospital-features-section {
padding: 0.8rem 0;
}
.hospital-partners-section {
padding: 0.8rem 0;
}
.hospital-feature-img-col img {
max-width: 280px;
width: 70vw;
height: 200px;
object-fit: cover;
}
.hospital-hero-image img {
width: 75vw;
max-width: 300px;
height: 220px;
object-fit: cover;
}
}
@media (max-width: 600px) {
/* Further optimize hospital mobile spacing */
.hospital-hero-section {
padding: 0.8rem 0;
margin-top: 0.3rem;
}
.hospital-features-list {
gap: 0.3rem;
}
.hospital-intro-section,
.hospital-international-section {
padding: 0.5rem 0 0.3rem 0;
}
.hospital-features-section {
padding: 0.5rem 0;
}
.hospital-partners-section {
padding: 0.5rem 0;
}
.hospital-feature-img-col img {
max-width: 240px;
width: 65vw;
height: 180px;
object-fit: cover;
}
.hospital-hero-image img {
width: 70vw;
max-width: 250px;
height: 200px;
object-fit: cover;
}
.hospital-feature-row, .hospital-feature-row-reverse {
gap: 0.1rem;
margin-bottom: 0.3rem;
}
.hospital-feature-text-col h2 {
margin-bottom: 0.2rem;
margin-top: 0;
}
.hospital-feature-text-col p {
margin-bottom: 0.1rem;
}
}