/**
* SN Gastro Theme - Main Stylesheet
*
* @package SN_Gastro
* @author Grved Digital
* @version 1.0.0
*/
/* ============================================
CSS Variables & Design System
============================================ */
:root {
/* Color Palette - Based on Logo Colors */
--color-primary: #1A52A3; /* Logo Primary Blue */
--color-primary-light: #2d6bc4; /* Lighter shade of primary blue */
--color-primary-dark: #143d7a; /* Darker shade of primary blue */
--color-accent-red: #E41E26; /* Logo Red */
--color-accent-green: #3CB371; /* Logo Green */
--color-gradient-a: linear-gradient(135deg, #1A52A3 0%, #2d6bc4 100%);
--color-gradient-b: linear-gradient(135deg, #143d7a 0%, #1A52A3 100%);
--color-white: #ffffff;
--color-black: #000000;
--color-light-bg: #f7f9fb;
--color-light-bg-alt: #f1f5f9;
--color-text: #333333;
--color-text-light: #666666;
--color-text-muted: #999999;
/* Section Spacing */
--section-padding: 6rem 0;
--section-padding-md: 5rem 0;
--section-padding-sm: 4rem 0;
/* Typography */
--font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Spacing */
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 2rem;
--spacing-lg: 3rem;
--spacing-xl: 4rem;
--spacing-xxl: 6rem;
/* Layout */
--container-width: 1200px;
--container-padding: 1.5rem;
/* Shadows & Depth */
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
--shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.2);
/* Transitions */
--transition-base: 0.3s ease;
--transition-fast: 0.15s ease;
--transition-slow: 0.5s ease;
/* Border Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-round: 50%;
/* Navigation */
--menu-link-color: #1f2744;
--menu-link-hover: var(--color-primary);
--menu-link-active: var(--color-primary-dark);
--menu-background: rgba(255, 255, 255, 0.92);
--menu-border: rgba(26, 82, 163, 0.08);
--submenu-background: #ffffff;
--submenu-shadow: 0 24px 45px -24px rgba(20, 61, 122, 0.45);
--submenu-border: rgba(26, 82, 163, 0.08);
--submenu-link-color: #253152;
}
/* ============================================
Reset & Base Styles
============================================ */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: auto; /* Let Lenis handle smooth scroll */
overflow-x: hidden;
width: 100%;
max-width: 100%;
height: 100%;
-webkit-overflow-scrolling: touch;
}
html.lenis {
height: auto;
}
html.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
html.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
html.lenis.lenis-stopped {
overflow: hidden;
}
html.lenis.lenis-scrolling iframe {
pointer-events: none;
}
/* Prevent horizontal scroll */
img, video, iframe, embed, object {
max-width: 100%;
height: auto;
}
/* Ensure containers don't overflow */
.container, .container-fluid, .row {
max-width: 100%;
overflow-x: hidden;
}
body {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.6;
color: var(--color-text);
background-color: var(--color-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow: hidden;
overflow-x: hidden;
width: 100%;
max-width: 100%;
position: relative;
height: 100%;
}
body.lenis {
height: auto;
overflow: hidden;
}
body.lenis.lenis-smooth {
overflow: hidden;
}
body.lenis.lenis-stopped {
overflow: hidden;
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 600;
line-height: 1.2;
color: var(--color-text);
margin-bottom: var(--spacing-sm);
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }
p {
margin-bottom: var(--spacing-sm);
}
a {
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition-base);
}
/* a:hover,
a:focus {
color: var(--color-primary-end);
outline: 2px solid var(--color-primary-end);
outline-offset: 2px;
} */
img {
max-width: 100%;
height: auto;
display: block;
}
/* ============================================
Clinic-Specific Styles
============================================ */
/* ============================================
Header Styles
============================================ */
/* Admin Bar Fix */
body.admin-bar .site-header {
top: 32px;
}
@media screen and (max-width: 782px) {
body.admin-bar .site-header {
top: 46px;
}
}
/* Top Bar */
.top-bar-wrapper {
position: relative;
z-index: 1000;
}
body.admin-bar .top-bar-wrapper {
margin-top: 32px;
}
@media screen and (max-width: 782px) {
body.admin-bar .top-bar-wrapper {
margin-top: 46px;
}
}
.top-bar {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
font-size: 0.875rem;
}
.top-bar-link {
color: #333 !important;
transition: color 0.3s ease;
text-decoration: none !important;
}
.top-bar-link:hover {
color: var(--color-primary) !important;
}
.top-bar-social-link {
color: #666 !important;
font-size: 1.1rem;
transition: all 0.3s ease;
text-decoration: none !important;
}
.top-bar-social-link:hover {
color: var(--color-primary) !important;
transform: translateY(-2px);
}
/* Main Header - Fixed Horizontal Scroll */
.site-header {
background: #ffffff !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
padding: 1rem 0;
transition: all 0.3s ease;
overflow-x: hidden;
width: 100%;
max-width: 100%;
position: relative;
}
.site-header.scrolled {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
padding: 0.75rem 0;
}
.navbar {
padding: 0;
overflow-x: hidden;
width: 100%;
max-width: 100%;
}
.navbar .container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
max-width: 100%;
overflow-x: hidden;
width: 100%;
}
/* Logo & Doctor Info Section */
.header-logo-section {
flex-shrink: 0;
min-width: auto;
max-width: 250px;
overflow: hidden;
}
.header-logo-link {
display: flex;
align-items: center;
text-decoration: none;
margin-right: 1.5rem;
}
.header-logo {
max-height: 60px;
width: auto;
height: auto;
transition: transform 0.3s ease;
object-fit: contain;
}
.header-logo-link:hover .header-logo {
transform: scale(1.05);
}
.header-doctor-info {
display: flex;
flex-direction: column;
}
.doctor-name {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-primary);
margin: 0;
line-height: 1.3;
font-family: var(--font-heading);
}
.doctor-qualifications {
font-size: 0.75rem;
color: #666666;
line-height: 1.4;
margin: 0;
font-family: var(--font-body);
}
.navbar-collapse {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: space-between;
max-width: 100%;
width: 100%;
}
@media (min-width: 992px) {
.navbar-collapse {
display: flex !important;
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
}
}
/* Header CTA Button Container */
.header-cta {
margin-left: 1rem;
flex-shrink: 0;
white-space: nowrap;
}
@media (max-width: 991px) {
.header-logo-section {
min-width: auto;
}
.header-cta {
margin-left: 0;
margin-top: 1rem;
width: 100%;
}
.header-cta .btn {
width: 100%;
}
}
/* --------------------------------------------------------------
* Primary Navigation
* -------------------------------------------------------------- */
.site-header {
background-color: var(--menu-background);
backdrop-filter: saturate(160%) blur(12px);
border-bottom: 1px solid var(--menu-border);
box-shadow: 0 10px 30px -24px rgba(20, 61, 122, 0.35);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
position: relative;
z-index: 9998;
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
}
.site-header .navbar {
padding: 1rem 0;
position: relative;
z-index: inherit;
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
}
.site-header .navbar .container {
display: flex;
align-items: center;
gap: 1.5rem;
position: relative;
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
}
#primary-menu {
margin-left: auto;
position: relative;
z-index: 9998;
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
}
.sn-main-menu {
display: flex;
align-items: center;
gap: 2.25rem;
margin: 0;
padding: 0;
list-style: none;
position: relative;
z-index: 9998;
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
}
.sn-main-menu > li {
position: relative;
z-index: 9998;
}
.sn-main-menu > li::after {
content: '';
position: absolute;
left: -1rem;
right: -1rem;
top: 100%;
height: 1.25rem;
pointer-events: auto;
background: transparent;
z-index: 0;
}
.sn-menu-link {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0;
font-size: 1rem;
font-weight: 500;
color: var(--menu-link-color);
text-decoration: none;
transition: color 0.25s ease;
}
.sn-menu-link::before {
content: '';
position: absolute;
left: 0;
bottom: -0.45rem;
height: 2px;
width: 100%;
background: linear-gradient(90deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.3s ease;
}
.sn-menu-item:hover > .sn-menu-link,
.sn-menu-item:focus-within > .sn-menu-link {
color: var(--menu-link-hover);
}
.sn-menu-item:hover > .sn-menu-link::before,
.sn-menu-item:focus-within > .sn-menu-link::before,
.sn-menu-item.current-menu-item > .sn-menu-link::before,
.sn-menu-link[aria-current="page"]::before {
transform: scaleX(1);
}
.sn-menu-item.current-menu-item > .sn-menu-link,
.sn-menu-link[aria-current="page"] {
color: var(--menu-link-active);
font-weight: 600;
}
.sn-menu-link:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 3px;
border-radius: 6px;
}
.sn-main-menu > li.menu-item-has-children > .sn-menu-link {
padding-right: 1.75rem;
}
.sn-main-menu > li.menu-item-has-children > .sn-menu-link::after,
.sn-main-menu .sub-menu > li.menu-item-has-children > .sn-menu-link::after {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 0.55rem;
height: 0.55rem;
border: 2px solid currentColor;
border-left: 0;
border-top: 0;
transform: translateY(-50%) rotate(45deg);
transition: transform 0.3s ease, color 0.3s ease;
}
.sn-main-menu > li.menu-item-has-children:hover > .sn-menu-link::after,
.sn-main-menu > li.menu-item-has-children:focus-within > .sn-menu-link::after,
.sn-main-menu .sub-menu > li.menu-item-has-children:hover > .sn-menu-link::after,
.sn-main-menu .sub-menu > li.menu-item-has-children:focus-within > .sn-menu-link::after {
color: var(--menu-link-hover);
}
.sn-main-menu .sub-menu > li.menu-item-has-children > .sn-menu-link::after {
transform: translateY(-50%) rotate(-45deg);
}
.sn-main-menu > li.menu-item-has-children:hover > .sn-menu-link::after,
.sn-main-menu > li.menu-item-has-children:focus-within > .sn-menu-link::after {
transform: translateY(-50%) rotate(-135deg);
}
.sn-main-menu .sub-menu {
position: absolute;
top: calc(100% + 0.25rem);
left: 50%;
transform: translate3d(-50%, 10px, 0);
min-width: 220px;
background-color: var(--submenu-background);
border-radius: 16px;
padding: 1rem 1.15rem;
box-shadow: var(--submenu-shadow);
border: 1px solid var(--submenu-border);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
z-index: 99999 !important;
}
.sn-main-menu .sub-menu li {
position: relative;
list-style: none;
}
.sn-main-menu .sub-menu .sn-menu-link {
position: relative;
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.65rem 0.85rem;
font-size: 0.95rem;
font-weight: 500;
color: var(--submenu-link-color);
border-radius: 12px;
line-height: 1.35;
background: transparent;
transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.sn-main-menu .sub-menu .sn-menu-link::before {
content: '';
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%) scale(0);
width: 6px;
height: 6px;
border-radius: var(--radius-round);
background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
transition: transform 0.2s ease;
}
.sn-main-menu .sub-menu .sn-menu-link:hover,
.sn-main-menu .sub-menu .sn-menu-link:focus-visible,
.sn-main-menu .sub-menu .sn-menu-link.active,
.sn-main-menu .sub-menu .current-menu-item > .sn-menu-link,
.sn-main-menu .sub-menu .current_page_item > .sn-menu-link {
color: #ffffff;
background: linear-gradient(135deg, rgba(20, 61, 122, 0.95) 0%, rgba(26, 82, 163, 0.95) 50%, rgba(45, 107, 196, 0.92) 100%);
box-shadow: 0 12px 25px -16px rgba(20, 61, 122, 0.7);
transform: translateX(4px);
}
.sn-main-menu .sub-menu .sn-menu-link:hover::before,
.sn-main-menu .sub-menu .sn-menu-link:focus-visible::before,
.sn-main-menu .sub-menu .sn-menu-link.active::before,
.sn-main-menu .sub-menu .current-menu-item > .sn-menu-link::before,
.sn-main-menu .sub-menu .current_page_item > .sn-menu-link::before {
transform: translateY(-50%) scale(1);
}
.sn-main-menu .sub-menu .sn-menu-link:focus-visible {
outline: 2px solid rgba(26, 82, 163, 0.35);
outline-offset: 0;
}
.sn-main-menu > li:hover > .sub-menu,
.sn-main-menu > li:focus-within > .sub-menu {
opacity: 1;
visibility: visible;
transform: translate3d(-50%, 0, 0);
pointer-events: auto;
}
.sn-main-menu .sub-menu .sub-menu {
top: -0.75rem;
left: calc(100% + 0.75rem);
transform: translate3d(12px, 0, 0);
}
.sn-main-menu .sub-menu > li:hover > .sub-menu,
.sn-main-menu .sub-menu > li:focus-within > .sub-menu {
opacity: 1;
visibility: visible;
transform: translate3d(0, 0, 0);
pointer-events: auto;
}
.submenu-toggle {
display: none;
}
@media (max-width: 1199.98px) {
.sn-main-menu {
gap: 1.75rem;
}
}
@media (max-width: 991.98px) {
.site-header .navbar {
padding: 0.5rem 0;
}
#primary-menu {
width: 100%;
margin: 0;
padding: 0;
}
.sn-main-menu {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.sn-main-menu > li {
border-bottom: 1px solid rgba(31, 39, 68, 0.08);
padding: 0;
}
.sn-main-menu > li:last-child {
border-bottom: none;
}
.sn-main-menu > li.menu-item-has-children > .sn-menu-link::after,
.sn-main-menu .sub-menu > li.menu-item-has-children > .sn-menu-link::after {
display: none;
}
.sn-menu-link {
padding: 0.85rem 0;
width: 100%;
justify-content: space-between;
}
.sn-menu-link::before {
display: none;
}
.submenu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: auto;
width: 2.5rem;
height: 2.5rem;
border: none;
background: none;
color: inherit;
cursor: pointer;
transition: transform 0.3s ease;
}
.submenu-toggle:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
border-radius: 50%;
}
.submenu-toggle-icon {
width: 0.5rem;
height: 0.5rem;
border: 2px solid currentColor;
border-top: 0;
border-left: 0;
transform: rotate(45deg);
transition: transform 0.3s ease;
}
.menu-item-has-children.submenu-open > .submenu-toggle .submenu-toggle-icon {
transform: rotate(-135deg);
}
.sn-main-menu .sub-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
border: none;
box-shadow: none;
background: transparent;
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.menu-item-has-children.submenu-open > .sub-menu {
padding: 0.25rem 0 0.65rem;
}
.sn-main-menu .sub-menu .sn-menu-link {
padding: 0.55rem 0;
font-size: 0.95rem;
}
.sn-main-menu .sub-menu .sub-menu {
padding-left: 1.25rem;
}
.menu-item-has-children.submenu-open > .sub-menu {
max-height: 1000px;
}
}
/* Appointment Button */
.btn-appointment {
background: var(--color-gradient-a);
border: none;
color: #ffffff;
font-weight: 600;
font-size: 1.05rem;
padding: 0.875rem 2rem;
border-radius: 15px;
box-shadow: 0 4px 15px rgba(26, 82, 163, 0.3);
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
line-height: 1.5;
white-space: nowrap;
position: relative;
overflow: hidden;
}
.btn-appointment::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.btn-appointment:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 8px 25px rgba(26, 82, 163, 0.5);
color: #ffffff;
background: var(--color-gradient-b);
}
.btn-appointment:hover::before {
left: 100%;
}
.btn-appointment:active {
transform: translateY(-1px) scale(0.98);
box-shadow: 0 4px 15px rgba(26, 82, 163, 0.4);
}
.btn-appointment:focus {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Hero Section - New Design */
.hero-section-new {
position: relative;
overflow: hidden;
min-height: 650px;
display: flex;
align-items: center;
padding: 5rem 0;
z-index: 0;
}
.hero-background-new {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #ffffff 0%, #e8f4f8 30%, #d1e9f1 60%, #b8dde8 100%);
z-index: 0;
overflow: hidden;
}
/* Decorative Circles with Brand Colors */
.hero-background-new::before {
content: '';
position: absolute;
top: -30%;
right: -20%;
width: 800px;
height: 800px;
background: radial-gradient(circle, rgba(26, 82, 163, 0.12) 0%, rgba(26, 82, 163, 0.06) 40%, transparent 70%);
border-radius: 50%;
animation: float-circle 20s ease-in-out infinite;
}
.hero-background-new::after {
content: '';
position: absolute;
bottom: -30%;
left: -15%;
width: 700px;
height: 700px;
background: radial-gradient(circle, rgba(60, 179, 113, 0.1) 0%, rgba(60, 179, 113, 0.05) 40%, transparent 70%);
border-radius: 50%;
animation: float-circle 25s ease-in-out infinite reverse;
}
/* Subtle Pattern Overlay */
.hero-background-new {
background-image:
radial-gradient(circle at 20% 50%, rgba(26, 82, 163, 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(60, 179, 113, 0.03) 0%, transparent 50%),
linear-gradient(135deg, #ffffff 0%, #e8f4f8 30%, #d1e9f1 60%, #b8dde8 100%);
}
/* Animated Floating Shapes */
.hero-background-new::before {
box-shadow:
0 0 100px rgba(26, 82, 163, 0.1),
inset 0 0 100px rgba(26, 82, 163, 0.05);
}
.hero-background-new::after {
box-shadow:
0 0 100px rgba(60, 179, 113, 0.08),
inset 0 0 100px rgba(60, 179, 113, 0.04);
}
@keyframes float-circle {
0%, 100% {
transform: translate(0, 0) scale(1);
opacity: 0.8;
}
50% {
transform: translate(30px, -30px) scale(1.1);
opacity: 1;
}
}
/* Additional Decorative Elements */
.hero-section-new::before {
content: '';
position: absolute;
top: 10%;
right: 10%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(26, 82, 163, 0.05) 0%, transparent 70%);
border-radius: 50%;
z-index: 0;
animation: pulse 4s ease-in-out infinite;
}
.hero-section-new::after {
content: '';
position: absolute;
bottom: 15%;
right: 5%;
width: 150px;
height: 150px;
background: radial-gradient(circle, rgba(60, 179, 113, 0.04) 0%, transparent 70%);
border-radius: 50%;
z-index: 0;
animation: pulse 5s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.2);
opacity: 0.8;
}
}
.hero-content-new {
position: relative;
z-index: 1;
}
.hero-title-new {
font-family: 'Poppins', serif;
font-size: 3rem;
font-weight: 700;
color: var(--color-primary);
line-height: 1.2;
margin-bottom: 1.5rem;
letter-spacing: -0.5px;
}
.hero-description-new {
font-size: 1.125rem;
line-height: 1.8;
color: #333333;
margin-bottom: 2rem;
}
.hero-description-new p {
margin-bottom: 1rem;
}
.hero-description-new strong {
color: var(--color-primary);
font-weight: 600;
}
.hero-cta-buttons {
margin-top: 2rem;
}
.hero-cta-primary {
background: var(--color-gradient-a);
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 1.1rem;
box-shadow: 0 4px 15px rgba(26, 82, 163, 0.3);
transition: all 0.3s ease;
}
.hero-cta-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(26, 82, 163, 0.4);
background: var(--color-gradient-b);
}
.hero-video-btn {
text-decoration: none;
color: var(--color-primary);
font-weight: 600;
font-size: 1.1rem;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.75rem;
}
.hero-video-btn:hover {
color: var(--color-primary-dark);
transform: scale(1.05);
}
.hero-video-icon {
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.hero-video-btn:hover .hero-video-icon {
transform: scale(1.1);
}
.hero-video-text {
font-weight: 600;
}
.hero-image-wrapper-new {
position: relative;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
}
.hero-image-circle {
position: relative;
width: 500px;
height: 500px;
border-radius: 20px;
background: linear-gradient(135deg, rgba(26, 82, 163, 0.1) 0%, rgba(26, 82, 163, 0.05) 50%, rgba(60, 179, 113, 0.05) 100%);
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 20px 60px rgba(26, 82, 163, 0.15),
0 0 0 8px rgba(255, 255, 255, 0.8),
0 0 0 12px rgba(26, 82, 163, 0.1),
inset 0 2px 10px rgba(255, 255, 255, 0.2);
overflow: hidden;
padding: 0;
}
.hero-doctor-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 20px;
position: relative;
z-index: 2;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
display: block;
opacity: 1 !important;
}
@media (max-width: 991.98px) {
.hero-section-new {
min-height: auto;
padding: 3rem 0;
}
.hero-title-new {
font-size: 2.25rem;
}
.hero-image-circle {
width: 400px;
height: 400px;
margin: 2rem auto 0;
padding: 15px;
}
}
@media (max-width: 575.98px) {
.hero-title-new {
font-size: 1.75rem;
}
.hero-description-new {
font-size: 1rem;
}
.hero-image-circle {
width: 300px;
height: 300px;
padding: 0;
}
.hero-cta-buttons {
flex-direction: column;
align-items: flex-start !important;
}
.hero-cta-primary,
.hero-video-btn {
width: 100%;
justify-content: center;
}
}
/* Old Hero Section (keeping for backward compatibility) */
.hero-section {
position: relative;
overflow: hidden;
min-height: 600px;
display: flex;
align-items: center;
padding: 5rem 0;
}
.hero-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #dbeafe 100%);
z-index: 0;
}
.hero-background::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(26, 82, 163, 0.1) 0%, transparent 70%);
border-radius: 50%;
}
.hero-background::after {
content: '';
position: absolute;
bottom: -30%;
left: -10%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(60, 179, 113, 0.1) 0%, transparent 70%);
border-radius: 50%;
}
.hero-content {
position: relative;
z-index: 1;
}
.hero-title {
color: var(--color-primary);
line-height: 1.2;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.hero-image-wrapper {
position: relative;
z-index: 1;
}
.hero-image {
position: relative;
}
.hero-img-3d {
border-radius: 20px;
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
transition: transform 0.5s ease;
animation: float 6s ease-in-out infinite;
}
.hero-image:hover .hero-img-3d {
transform: perspective(1000px) rotateY(-8deg) rotateX(2deg) scale(1.02);
}
@keyframes float {
0%, 100% {
transform: perspective(1000px) rotateY(-5deg) rotateX(2deg) translateY(0px);
}
50% {
transform: perspective(1000px) rotateY(-5deg) rotateX(2deg) translateY(-20px);
}
}
/* Services Section */
.services-section {
position: relative;
overflow: visible;
}
.services-section .container {
overflow: visible;
}
.services-section .row {
overflow: visible;
}
.services-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
z-index: 0;
}
/* Service Cards */
.service-card {
background: white;
border: 1px solid rgba(0, 0, 0, 0.05);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
box-shadow:
0 4px 6px rgba(0, 0, 0, 0.05),
0 1px 3px rgba(0, 0, 0, 0.1);
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(26, 82, 163, 0.05), transparent);
transition: left 0.6s ease;
}
.service-card:hover::before {
left: 100%;
}
.service-card:hover {
transform: translateY(-12px) scale(1.02);
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(26, 82, 163, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
border-color: var(--color-primary);
}
.service-image {
overflow: hidden;
border-radius: 12px;
}
.service-image img {
transition: transform 0.4s ease;
}
.service-card:hover .service-image img {
transform: scale(1.1);
}
/* Doctor Cards */
.doctor-card {
background: white;
border: 1px solid rgba(0, 0, 0, 0.05);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow:
0 4px 6px rgba(0, 0, 0, 0.05),
0 1px 3px rgba(0, 0, 0, 0.1);
}
.doctor-card:hover {
transform: translateY(-12px) scale(1.02);
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(26, 82, 163, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.doctor-photo {
width: 200px;
height: 200px;
object-fit: cover;
transition: all 0.4s ease;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.15),
0 0 0 4px rgba(255, 255, 255, 0.8),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.doctor-card:hover .doctor-photo {
transform: scale(1.08);
box-shadow:
0 15px 40px rgba(26, 82, 163, 0.25),
0 0 0 4px rgba(255, 255, 255, 0.9),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
/* Testimonials Section */
.testimonials-section {
position: relative;
overflow: visible;
}
.testimonials-section .container {
overflow: visible;
}
.testimonials-section .row {
overflow: visible;
}
.testimonials-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #dbeafe 100%);
z-index: 0;
}
/* Testimonial Cards */
.testimonial-card {
background: white;
border: 1px solid rgba(0, 0, 0, 0.05);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
box-shadow:
0 4px 6px rgba(0, 0, 0, 0.05),
0 1px 3px rgba(0, 0, 0, 0.1);
}
.testimonial-card::before {
content: '"';
position: absolute;
top: -10px;
left: 20px;
font-size: 80px;
color: var(--color-primary);
opacity: 0.1;
font-family: Georgia, serif;
line-height: 1;
}
.testimonial-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(26, 82, 163, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.testimonial-avatar {
width: 50px;
height: 50px;
object-fit: cover;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Contact Section */
.contact-card {
background: white;
border: 1px solid rgba(0, 0, 0, 0.05);
position: relative;
}
.contact-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--color-gradient-a);
border-radius: 4px 4px 0 0;
}
/* Footer - Premium 3D Design with Brand Colors */
.site-footer {
background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-primary-dark) 100%);
color: rgba(255, 255, 255, 0.95);
position: relative;
overflow: hidden;
padding: 4rem 0 2rem;
}
.footer-links a {
transition: all 0.3s ease;
display: inline-block;
}
.footer-links a:hover {
color: var(--color-accent-green) !important;
padding-left: 5px;
}
.footer-social a {
transition: all 0.3s ease;
}
.footer-social a:hover {
transform: translateY(-3px) scale(1.1);
color: var(--color-accent-green) !important;
}
/* Floating Contact Buttons */
.floating-contacts {
z-index: 1050;
}
.floating-btn {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.floating-btn:hover {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
/* Buttons */
.btn-primary {
background: var(--color-gradient-a) !important;
border: none;
box-shadow: 0 4px 15px rgba(26, 82, 163, 0.3);
transition: all 0.3s ease;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(26, 82, 163, 0.4);
background: var(--color-gradient-a) !important;
}
.btn-outline-primary {
border: 2px solid var(--color-primary);
color: var(--color-primary);
transition: all 0.3s ease;
}
.btn-outline-primary:hover {
background: var(--color-gradient-a);
border-color: transparent;
color: white;
transform: translateX(5px);
}
/* Shadows */
.shadow-md {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}
.shadow-lg {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}
/* Responsive */
@media (max-width: 768px) {
.hero-section {
min-height: auto;
padding: 3rem 0 !important;
}
.hero-image {
margin-top: 2rem;
}
.service-card,
.doctor-card,
.testimonial-card {
margin-bottom: 1.5rem;
}
.floating-contacts {
bottom: 20px !important;
right: 20px !important;
}
.floating-btn {
width: 50px !important;
height: 50px !important;
}
}
/* Smooth Scroll */
html {
scroll-behavior: smooth;
}
/* Loading Animation */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in-up {
animation: fadeInUp 0.6s ease-out;
}
/* Section Spacing */
section {
padding: 5rem 0;
}
/* About Section - New Design */
.about-section-new {
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}
.about-title-new {
font-family: 'Poppins', serif;
font-size: 2.5rem;
font-weight: 700;
color: var(--color-primary);
line-height: 1.2;
margin-bottom: 1.5rem;
}
.about-description-new {
font-size: 1.125rem;
line-height: 1.8;
color: #333333;
margin-bottom: 2rem;
}
.about-description-new p {
margin-bottom: 1rem;
}
.about-features {
margin-top: 2rem;
}
.feature-item {
transition: transform 0.3s ease;
}
.feature-item:hover {
transform: translateX(5px);
}
.feature-icon {
flex-shrink: 0;
margin-top: 2px;
}
.feature-text {
font-size: 1.05rem;
color: #333333;
line-height: 1.6;
}
/* Awards & Achievements Section */
.awards-section {
position: relative;
overflow: visible;
}
section .container {
overflow: visible;
}
section .row {
overflow: visible;
}
.awards-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 50%, #bbf7d0 100%);
z-index: 0;
}
.awards-title-new {
font-family: 'Poppins', serif;
font-size: 3rem;
font-weight: 700;
color: var(--color-primary);
line-height: 1.2;
letter-spacing: 1px;
text-transform: uppercase;
}
.awards-list {
position: relative;
z-index: 1;
}
.award-item {
transition: all 0.3s ease;
padding: 1rem;
border-radius: 8px;
}
.award-item:hover {
background: rgba(255, 255, 255, 0.5);
transform: translateX(5px);
}
.award-icon {
flex-shrink: 0;
margin-top: 4px;
transition: transform 0.3s ease;
}
.award-item:hover .award-icon {
transform: scale(1.1) rotate(5deg);
}
.award-text {
font-size: 1.05rem;
color: #333333;
line-height: 1.7;
font-weight: 400;
}
@media (max-width: 991.98px) {
.awards-title-new {
font-size: 2.25rem;
text-align: center;
}
.awards-list {
margin-top: 2rem;
}
}
@media (max-width: 575.98px) {
.awards-title-new {
font-size: 1.75rem;
}
.award-text {
font-size: 0.95rem;
}
}
/* Highlights Section */
.highlights-section {
position: relative;
overflow: visible;
padding: 5rem 0;
}
.highlights-section .container {
overflow: visible;
}
.highlights-section .row {
overflow: visible;
}
.highlights-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e8f4f8 100%);
z-index: 0;
opacity: 0.6;
}
.highlights-background::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 800px;
height: 800px;
background: radial-gradient(circle, rgba(26, 82, 163, 0.05) 0%, transparent 70%);
border-radius: 50%;
animation: float-circle 20s ease-in-out infinite;
}
.highlights-background::after {
content: '';
position: absolute;
bottom: -30%;
left: -15%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(60, 179, 113, 0.04) 0%, transparent 70%);
border-radius: 50%;
animation: float-circle 25s ease-in-out infinite reverse;
}
.highlight-card {
background: var(--color-gradient-a);
border-radius: 20px;
padding: 2.5rem;
color: #ffffff;
position: relative;
overflow: hidden;
box-shadow:
0 10px 30px rgba(26, 82, 163, 0.2),
0 4px 15px rgba(0, 0, 0, 0.1);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
min-height: 320px;
display: flex;
flex-direction: column;
z-index: 1;
margin: 15px;
will-change: transform;
}
/* 3D Animated Background Icons for Each Card */
.highlight-card-1::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
transform: translate(-50%, -50%) rotate(0deg);
animation: rotate-3d-icon-1 20s linear infinite;
z-index: 0;
opacity: 0.4;
pointer-events: none;
}
.highlight-card-2::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 180px;
height: 180px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
transform: translate(-50%, -50%) rotate(0deg);
animation: rotate-3d-icon-2 25s linear infinite reverse;
z-index: 0;
opacity: 0.4;
pointer-events: none;
}
.highlight-card-3::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 190px;
height: 190px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
transform: translate(-50%, -50%) rotate(0deg);
animation: rotate-3d-icon-3 30s linear infinite;
z-index: 0;
opacity: 0.4;
pointer-events: none;
}
/* 3D Rotation Animations */
@keyframes rotate-3d-icon-1 {
0% {
transform: translate(-50%, -50%) rotate(0deg) scale(1);
opacity: 0.4;
}
50% {
transform: translate(-50%, -50%) rotate(180deg) scale(1.1);
opacity: 0.5;
}
100% {
transform: translate(-50%, -50%) rotate(360deg) scale(1);
opacity: 0.4;
}
}
@keyframes rotate-3d-icon-2 {
0% {
transform: translate(-50%, -50%) rotate(0deg) scale(1);
opacity: 0.4;
}
50% {
transform: translate(-50%, -50%) rotate(-180deg) scale(1.1);
opacity: 0.5;
}
100% {
transform: translate(-50%, -50%) rotate(-360deg) scale(1);
opacity: 0.4;
}
}
@keyframes rotate-3d-icon-3 {
0% {
transform: translate(-50%, -50%) rotate(0deg) scale(1);
opacity: 0.4;
}
50% {
transform: translate(-50%, -50%) rotate(180deg) scale(1.1);
opacity: 0.5;
}
100% {
transform: translate(-50%, -50%) rotate(360deg) scale(1);
opacity: 0.4;
}
}
/* Hover effects for 3D icons */
.highlight-card-1:hover::before {
animation: rotate-3d-icon-1 10s linear infinite;
opacity: 0.6;
transform: translate(-50%, -50%) rotate(0deg) scale(1.15);
}
.highlight-card-2:hover::before {
animation: rotate-3d-icon-2 12s linear infinite reverse;
opacity: 0.6;
transform: translate(-50%, -50%) rotate(0deg) scale(1.15);
}
.highlight-card-3:hover::before {
animation: rotate-3d-icon-3 15s linear infinite;
opacity: 0.6;
transform: translate(-50%, -50%) rotate(0deg) scale(1.15);
}
/* Background gradients for cards */
.highlight-card-1 {
background: linear-gradient(135deg, #1A52A3 0%, #2d6bc4 100%);
}
.highlight-card-2 {
background: linear-gradient(135deg, #1A52A3 0%, #2d6bc4 100%);
}
.highlight-card-3 {
background: linear-gradient(135deg, #1A52A3 0%, #2d6bc4 100%);
}
/* Overlay gradient on hover - Removed duplicate, using shine effect instead */
.highlight-card:hover {
transform: translateY(-10px) scale(1.01);
box-shadow:
0 20px 50px rgba(26, 82, 163, 0.35),
0 8px 25px rgba(0, 0, 0, 0.15);
z-index: 10;
}
/* Hover states with darker gradient */
.highlight-card-1:hover {
background: linear-gradient(135deg, #143d7a 0%, #1A52A3 100%);
}
.highlight-card-2:hover {
background: linear-gradient(135deg, #143d7a 0%, #1A52A3 100%);
}
.highlight-card-3:hover {
background: linear-gradient(135deg, #143d7a 0%, #1A52A3 100%);
}
.highlight-pre-title {
font-size: 0.875rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 0.5rem;
position: relative;
z-index: 2;
opacity: 0.9;
}
.highlight-title {
font-size: 2rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 1rem;
line-height: 1.2;
position: relative;
z-index: 2;
font-family: 'Poppins', serif;
}
.highlight-description {
font-size: 1rem;
color: rgba(255, 255, 255, 0.95);
line-height: 1.7;
margin-bottom: 1.5rem;
position: relative;
z-index: 2;
flex-grow: 1;
}
.highlight-hours {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1.5rem;
position: relative;
z-index: 2;
flex-grow: 1;
}
.hours-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.hours-item:last-child {
border-bottom: none;
}
.hours-day {
font-size: 1rem;
color: rgba(255, 255, 255, 0.95);
font-weight: 500;
}
.hours-time {
font-size: 1rem;
color: #ffffff;
font-weight: 700;
}
.highlight-icon {
position: absolute;
bottom: -20px;
right: -20px;
width: 180px;
height: 180px;
opacity: 0.15;
z-index: 0;
transition: all 0.5s ease;
pointer-events: none;
}
.highlight-icon svg {
width: 100%;
height: 100%;
fill: rgba(255, 255, 255, 0.3);
stroke: rgba(255, 255, 255, 0.2);
}
.highlight-card:hover .highlight-icon {
transform: scale(1.1) rotate(5deg);
opacity: 0.2;
animation: icon-pulse 2s ease-in-out infinite;
}
@keyframes icon-pulse {
0%, 100% {
transform: scale(1.1) rotate(5deg);
opacity: 0.2;
}
50% {
transform: scale(1.15) rotate(8deg);
opacity: 0.25;
}
}
/* Shine Effect on Hover - Fixed to prevent overflow and scrollbars */
.highlight-card::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%);
transform: skewX(-20deg);
transition: left 0.6s ease;
z-index: 2;
pointer-events: none;
opacity: 0;
}
.highlight-card:hover::after {
left: 100%;
opacity: 1;
}
@media (max-width: 991.98px) {
.highlight-card {
min-height: 280px;
padding: 2rem;
}
.highlight-title {
font-size: 1.75rem;
}
.highlight-icon {
width: 150px;
height: 150px;
}
}
@media (max-width: 767.98px) {
.highlights-section {
padding: 3rem 0;
}
.highlight-card {
min-height: 260px;
padding: 1.75rem;
margin-bottom: 1.5rem;
}
.highlight-title {
font-size: 1.5rem;
}
.highlight-description {
font-size: 0.95rem;
}
.highlight-icon {
width: 120px;
height: 120px;
bottom: -15px;
right: -15px;
}
}
/* About Dr. Sushil Narang Section - Modern Creative Design */
.about-doctor-section {
position: relative;
overflow: visible;
padding: 6rem 0;
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%);
}
.about-doctor-section .container {
overflow: visible;
position: relative;
z-index: 2;
}
.about-doctor-section .row {
overflow: visible;
align-items: center;
}
.about-doctor-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent;
z-index: 0;
opacity: 1;
}
.about-doctor-background::before {
content: '';
position: absolute;
top: -20%;
right: -5%;
width: 700px;
height: 700px;
background: radial-gradient(circle, rgba(26, 82, 163, 0.08) 0%, transparent 70%);
border-radius: 50%;
animation: float-circle 20s ease-in-out infinite;
}
.about-doctor-background::after {
content: '';
position: absolute;
bottom: -15%;
left: -5%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(60, 179, 113, 0.06) 0%, transparent 70%);
border-radius: 50%;
animation: float-circle 25s ease-in-out infinite reverse;
}
.about-doctor-title {
font-family: 'Poppins', sans-serif;
font-size: 3rem;
font-weight: 800;
color: #1a1a1a;
line-height: 1.2;
letter-spacing: -1px;
position: relative;
z-index: 1;
margin-bottom: 1.5rem;
background: linear-gradient(135deg, #1a52a3 0%, #3cb371 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.about-doctor-separator {
width: 100px;
height: 4px;
background: linear-gradient(90deg, var(--color-primary), var(--color-accent-green));
border-radius: 4px;
position: relative;
z-index: 1;
margin-bottom: 2.5rem;
box-shadow: 0 2px 10px rgba(26, 82, 163, 0.3);
}
.about-doctor-separator::after {
content: '';
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 10px solid var(--color-accent-green);
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
.about-doctor-biography {
font-size: 1.125rem;
color: #4a5568;
line-height: 1.9;
position: relative;
z-index: 1;
font-weight: 400;
}
.about-doctor-biography p {
margin-bottom: 1.5rem;
}
.about-doctor-biography p:last-child {
margin-bottom: 0;
}
.about-doctor-biography strong {
color: #1a52a3;
font-weight: 700;
font-size: 1.15rem;
}
.about-doctor-image-wrapper {
position: relative;
border-radius: 30px;
overflow: hidden;
box-shadow:
0 30px 80px rgba(26, 82, 163, 0.2),
0 15px 40px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 1;
background: linear-gradient(135deg, rgba(26, 82, 163, 0.05) 0%, rgba(60, 179, 113, 0.05) 100%);
padding: 8px;
}
.about-doctor-image-wrapper::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.6s ease;
z-index: 1;
pointer-events: none;
}
.about-doctor-image-wrapper:hover::before {
opacity: 1;
}
.about-doctor-image-wrapper:hover {
transform: translateY(-15px) scale(1.03);
box-shadow:
0 40px 100px rgba(26, 82, 163, 0.3),
0 20px 50px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.about-doctor-image {
width: 100%;
height: auto;
display: block;
border-radius: 24px;
transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
z-index: 2;
object-fit: cover;
min-height: 500px;
}
.about-doctor-image-wrapper:hover .about-doctor-image {
transform: scale(1.08);
}
/* Decorative Elements */
.about-doctor-content-wrapper {
position: relative;
padding: 2rem 0;
}
.about-doctor-content-wrapper::before {
content: '';
position: absolute;
left: -30px;
top: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, var(--color-primary), var(--color-accent-green));
border-radius: 2px;
opacity: 0.3;
}
/* Stats Cards for About Section */
.about-doctor-stats {
display: flex;
gap: 2rem;
margin-top: 3rem;
flex-wrap: wrap;
}
.about-doctor-stat-card {
flex: 1;
min-width: 150px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
padding: 1.5rem;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(26, 82, 163, 0.1);
transition: all 0.4s ease;
border: 1px solid rgba(26, 82, 163, 0.1);
}
.about-doctor-stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(26, 82, 163, 0.2);
}
.about-doctor-stat-number {
font-size: 2.5rem;
font-weight: 800;
background: linear-gradient(135deg, #1a52a3 0%, #3cb371 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
margin-bottom: 0.5rem;
}
.about-doctor-stat-label {
font-size: 0.95rem;
color: #64748b;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Responsive Design for About Doctor Section */
@media (max-width: 991px) {
.about-doctor-section {
padding: 4rem 0;
}
.about-doctor-title {
font-size: 2.25rem;
}
.about-doctor-biography {
font-size: 1.05rem;
line-height: 1.8;
}
.about-doctor-image {
min-height: 400px;
}
.about-doctor-stats {
gap: 1.5rem;
margin-top: 2rem;
}
.about-doctor-stat-card {
min-width: 120px;
padding: 1.25rem;
}
.about-doctor-stat-number {
font-size: 2rem;
}
.about-doctor-content-wrapper::before {
display: none;
}
}
@media (max-width: 767px) {
.about-doctor-section {
padding: 3rem 0;
}
.about-doctor-title {
font-size: 1.875rem;
margin-bottom: 1rem;
}
.about-doctor-separator {
width: 80px;
height: 3px;
margin-bottom: 2rem;
}
.about-doctor-biography {
font-size: 1rem;
line-height: 1.75;
margin-bottom: 2rem;
}
.about-doctor-biography strong {
font-size: 1.05rem;
}
.about-doctor-image-wrapper {
margin-top: 2rem;
padding: 6px;
border-radius: 24px;
}
.about-doctor-image {
border-radius: 20px;
min-height: 350px;
}
.about-doctor-stats {
flex-direction: column;
gap: 1rem;
margin-top: 2rem;
}
.about-doctor-stat-card {
width: 100%;
min-width: auto;
}
.about-doctor-stat-number {
font-size: 2rem;
}
}
/* Conferences & Events Section - New Layout */
.conferences-section-new {
position: relative;
overflow: visible;
padding: 6rem 0;
background: var(--color-white);
}
.conferences-section-new .container {
overflow: visible;
}
.conferences-section-new .row {
overflow: visible;
}
.conferences-bg-new {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
linear-gradient(135deg, rgba(26, 82, 163, 0.02) 0%, rgba(60, 179, 113, 0.02) 100%),
radial-gradient(circle at 10% 20%, rgba(26, 82, 163, 0.05) 0%, transparent 50%),
radial-gradient(circle at 90% 80%, rgba(60, 179, 113, 0.05) 0%, transparent 50%);
z-index: 0;
}
.conferences-title-new {
font-size: 2.5rem;
font-weight: 700;
color: var(--color-primary);
line-height: 1.3;
letter-spacing: -0.5px;
position: relative;
z-index: 1;
margin-bottom: 1.5rem;
}
.conferences-desc-new {
font-size: 1.1rem;
color: var(--color-text);
line-height: 1.8;
position: relative;
z-index: 1;
max-width: 800px;
margin: 0 auto;
}
.conference-card-new {
position: relative;
background: var(--color-white);
border-radius: 16px;
padding: 2rem;
box-shadow:
0 4px 20px rgba(26, 82, 163, 0.08),
0 2px 8px rgba(26, 82, 163, 0.04);
border: 1px solid rgba(26, 82, 163, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: flex-start;
gap: 1.25rem;
height: 100%;
overflow: hidden;
}
.conference-card-new::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-accent-green) 100%);
transition: width 0.4s ease;
}
.conference-card-new:hover {
transform: translateY(-5px);
box-shadow:
0 8px 30px rgba(26, 82, 163, 0.15),
0 4px 12px rgba(26, 82, 163, 0.08);
border-color: var(--color-primary);
}
.conference-card-new:hover::before {
width: 6px;
}
.conference-card-icon-new {
flex-shrink: 0;
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-green) 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
box-shadow:
0 4px 12px rgba(26, 82, 163, 0.25),
inset 0 2px 4px rgba(255, 255, 255, 0.2);
transition: all 0.4s ease;
position: relative;
z-index: 1;
}
.conference-card-new:hover .conference-card-icon-new {
transform: scale(1.1) rotate(5deg);
box-shadow:
0 6px 18px rgba(26, 82, 163, 0.35),
inset 0 2px 4px rgba(255, 255, 255, 0.3);
}
.conference-card-icon-new svg {
width: 20px;
height: 20px;
}
.conference-card-content-new {
flex: 1;
position: relative;
z-index: 1;
}
.conference-card-text-new {
font-size: 1.05rem;
color: var(--color-text);
line-height: 1.7;
margin: 0;
transition: color 0.4s ease;
}
.conference-card-new:hover .conference-card-text-new {
color: var(--color-primary);
}
/* Responsive Design for New Conferences Section */
@media (max-width: 991px) {
.conferences-title-new {
font-size: 2.25rem;
}
.conferences-section-new {
padding: 5rem 0;
}
.conference-card-new {
padding: 1.75rem;
}
}
@media (max-width: 767px) {
.conferences-section-new {
padding: 4rem 0;
}
.conferences-title-new {
font-size: 2rem;
}
.conferences-desc-new {
font-size: 1rem;
line-height: 1.7;
}
.conference-card-new {
padding: 1.5rem;
gap: 1rem;
}
.conference-card-icon-new {
width: 40px;
height: 40px;
}
.conference-card-icon-new svg {
width: 18px;
height: 18px;
}
.conference-card-text-new {
font-size: 0.95rem;
line-height: 1.6;
}
}
/* Statistics Section - Creative 3D Design */
.statistics-section {
position: relative;
overflow: visible;
padding: 6rem 0;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}
.statistics-section .container {
overflow: visible;
}
.statistics-section .row {
overflow: visible;
}
.statistics-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(60, 179, 113, 0.15) 0%, transparent 50%);
z-index: 0;
animation: stat-bg-pulse 8s ease-in-out infinite;
}
@keyframes stat-bg-pulse {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.1);
}
}
.stat-card {
position: relative;
background: rgba(255, 255, 255, 0.95);
border-radius: 24px;
padding: 3rem 2rem;
text-align: center;
box-shadow:
0 10px 40px rgba(0, 0, 0, 0.2),
0 4px 15px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
transform-style: preserve-3d;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
margin: 15px;
will-change: transform;
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.5s ease;
z-index: 0;
pointer-events: none;
}
.stat-card:hover::before {
opacity: 1;
animation: stat-shine 2s ease-in-out infinite;
}
@keyframes stat-shine {
0%, 100% {
transform: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.1);
opacity: 0.8;
}
}
.stat-card:hover {
transform: translateY(-10px) rotateX(3deg) rotateY(-1deg) scale(1.02);
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.3),
0 8px 25px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 1);
z-index: 10;
}
.stat-icon-wrapper {
position: relative;
width: 80px;
height: 80px;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
z-index: 1;
transition: all 0.5s ease;
}
.stat-card::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background: radial-gradient(circle, rgba(26, 82, 163, 0.1) 0%, transparent 70%);
border-radius: 50%;
opacity: 0;
transition: all 0.5s ease;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.stat-card:hover::after {
width: 150px;
height: 150px;
opacity: 1;
animation: stat-ripple 2s ease-out infinite;
}
@keyframes stat-ripple {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.5;
}
100% {
transform: translate(-50%, -50%) scale(1.5);
opacity: 0;
}
}
.stat-card:hover .stat-icon-wrapper {
transform: scale(1.15) rotateY(15deg);
color: var(--color-accent-green);
filter: drop-shadow(0 8px 16px rgba(26, 82, 163, 0.3));
}
.stat-icon-wrapper svg {
width: 100%;
height: 100%;
filter: drop-shadow(0 4px 8px rgba(26, 82, 163, 0.2));
transition: all 0.5s ease;
}
.stat-card:hover .stat-icon-wrapper svg {
filter: drop-shadow(0 8px 20px rgba(26, 82, 163, 0.4));
}
.stat-number {
font-size: 3.5rem;
font-weight: 800;
color: var(--color-primary);
line-height: 1.2;
margin-bottom: 1rem;
position: relative;
z-index: 1;
text-shadow:
0 2px 10px rgba(26, 82, 163, 0.2),
0 1px 3px rgba(0, 0, 0, 0.1);
transition: all 0.5s ease;
letter-spacing: -1px;
}
.stat-card:hover .stat-number {
transform: scale(1.1);
color: var(--color-accent-green);
text-shadow:
0 4px 20px rgba(26, 82, 163, 0.3),
0 2px 8px rgba(0, 0, 0, 0.15);
}
.stat-label {
font-size: 1.1rem;
font-weight: 600;
color: var(--color-text);
line-height: 1.4;
position: relative;
z-index: 1;
transition: all 0.5s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.stat-card:hover .stat-label {
color: var(--color-primary);
transform: translateY(-3px);
}
/* Individual Card Variations */
.stat-card-1:hover {
transform: translateY(-10px) rotateX(3deg) rotateY(-1deg) scale(1.02);
}
.stat-card-2:hover {
transform: translateY(-10px) rotateX(3deg) rotateY(1deg) scale(1.02);
}
.stat-card-3:hover {
transform: translateY(-10px) rotateX(-3deg) rotateY(-1deg) scale(1.02);
}
.stat-card-4:hover {
transform: translateY(-10px) rotateX(-3deg) rotateY(1deg) scale(1.02);
}
/* Responsive Design for Statistics Section */
@media (max-width: 991px) {
.statistics-section {
padding: 5rem 0;
}
.stat-card {
padding: 2.5rem 1.5rem;
margin: 10px;
margin-bottom: 1.5rem;
}
.stat-number {
font-size: 3rem;
}
.stat-icon-wrapper {
width: 70px;
height: 70px;
}
}
@media (max-width: 767px) {
.statistics-section {
padding: 4rem 0;
}
.stat-card {
padding: 2rem 1.5rem;
border-radius: 20px;
margin: 10px;
}
.stat-number {
font-size: 2.5rem;
}
.stat-label {
font-size: 1rem;
}
.stat-icon-wrapper {
width: 60px;
height: 60px;
margin-bottom: 1.25rem;
}
.stat-card:hover {
transform: translateY(-10px) scale(1.03);
}
}
/* Emergency Medical Care Section - Creative 3D Design */
.emergency-section {
position: relative;
overflow: hidden;
padding: 6rem 0;
background: linear-gradient(135deg, rgba(26, 82, 163, 0.05) 0%, rgba(60, 179, 113, 0.05) 50%, rgba(26, 82, 163, 0.08) 100%);
}
.emergency-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(26, 82, 163, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(60, 179, 113, 0.08) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
z-index: 0;
animation: emergency-bg-pulse 10s ease-in-out infinite;
}
@keyframes emergency-bg-pulse {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.9;
transform: scale(1.05);
}
}
.emergency-card {
position: relative;
background: rgba(255, 255, 255, 0.98);
border-radius: 32px;
padding: 4rem 3rem;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.25),
0 8px 30px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 1);
backdrop-filter: blur(20px);
border: 2px solid rgba(255, 255, 255, 0.4);
transform-style: preserve-3d;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
z-index: 1;
}
.emergency-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(26, 82, 163, 0.1) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.6s ease;
z-index: 0;
animation: emergency-shine 3s ease-in-out infinite;
}
@keyframes emergency-shine {
0%, 100% {
transform: rotate(0deg) translate(-50%, -50%);
opacity: 0;
}
50% {
transform: rotate(180deg) translate(-50%, -50%);
opacity: 0.3;
}
}
.emergency-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(26, 82, 163, 0.05) 0%, rgba(60, 179, 113, 0.05) 100%);
opacity: 0;
transition: opacity 0.6s ease;
z-index: 0;
border-radius: 32px;
}
.emergency-card:hover {
transform: translateY(-10px) rotateX(2deg) scale(1.02);
box-shadow:
0 30px 80px rgba(0, 0, 0, 0.3),
0 12px 40px rgba(0, 0, 0, 0.2),
0 0 0 2px rgba(255, 255, 255, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 1);
}
.emergency-card:hover::after {
opacity: 1;
}
.emergency-headline {
font-size: 2.5rem;
font-weight: 800;
color: var(--color-primary);
line-height: 1.3;
letter-spacing: -0.5px;
position: relative;
z-index: 1;
text-shadow: 0 2px 10px rgba(26, 82, 163, 0.15);
margin-bottom: 1rem;
transition: all 0.5s ease;
}
.emergency-card:hover .emergency-headline {
transform: scale(1.02);
color: var(--color-accent-green);
text-shadow: 0 4px 20px rgba(26, 82, 163, 0.25);
}
.emergency-phone {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-primary);
line-height: 1.4;
position: relative;
z-index: 1;
letter-spacing: 0.5px;
transition: all 0.5s ease;
}
.emergency-card:hover .emergency-phone {
color: var(--color-accent-green);
transform: translateY(-2px);
}
.emergency-description {
font-size: 1.1rem;
color: var(--color-text);
line-height: 1.8;
position: relative;
z-index: 1;
transition: all 0.5s ease;
}
.emergency-card:hover .emergency-description {
color: var(--color-text);
transform: translateY(-2px);
}
.emergency-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 1.25rem 3rem;
background: var(--color-white);
color: var(--color-primary);
font-size: 1.15rem;
font-weight: 700;
text-decoration: none;
border-radius: 50px;
box-shadow:
0 8px 25px rgba(26, 82, 163, 0.3),
0 4px 12px rgba(26, 82, 163, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 1);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
z-index: 1;
overflow: hidden;
transform-style: preserve-3d;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.emergency-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;
z-index: 0;
}
.emergency-btn:hover::before {
left: 100%;
}
.emergency-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
background: radial-gradient(circle, rgba(26, 82, 163, 0.2) 0%, transparent 70%);
border-radius: 50%;
transition: all 0.6s ease;
z-index: 0;
}
.emergency-btn:hover::after {
width: 300px;
height: 300px;
animation: emergency-btn-ripple 1s ease-out;
}
@keyframes emergency-btn-ripple {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 0.8;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0;
}
}
.emergency-btn:hover {
transform: translateY(-5px) scale(1.05) rotateX(5deg);
box-shadow:
0 15px 40px rgba(26, 82, 163, 0.4),
0 8px 20px rgba(26, 82, 163, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 1);
color: var(--color-accent-green);
background: linear-gradient(135deg, var(--color-white) 0%, rgba(255, 255, 255, 0.95) 100%);
}
.emergency-btn-text {
position: relative;
z-index: 1;
transition: all 0.5s ease;
}
.emergency-btn-icon {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s ease;
}
.emergency-btn:hover .emergency-btn-icon {
transform: translateX(5px) rotate(5deg);
}
.emergency-btn-icon svg {
width: 20px;
height: 20px;
transition: all 0.5s ease;
}
.emergency-btn:hover .emergency-btn-icon svg {
transform: scale(1.2);
}
/* Responsive Design for Emergency Section */
@media (max-width: 991px) {
.emergency-section {
padding: 5rem 0;
}
.emergency-card {
padding: 3rem 2.5rem;
border-radius: 28px;
}
.emergency-headline {
font-size: 2.25rem;
}
.emergency-phone {
font-size: 1.35rem;
}
}
@media (max-width: 767px) {
.emergency-section {
padding: 4rem 0;
}
.emergency-card {
padding: 2.5rem 2rem;
border-radius: 24px;
}
.emergency-headline {
font-size: 2rem;
margin-bottom: 0.75rem;
}
.emergency-phone {
font-size: 1.2rem;
margin-bottom: 1.5rem;
}
.emergency-description {
font-size: 1rem;
line-height: 1.7;
margin-bottom: 2rem;
}
.emergency-btn {
padding: 1rem 2.5rem;
font-size: 1rem;
}
.emergency-card:hover {
transform: translateY(-5px) scale(1.01);
}
}
/* Services Section - Creative 3D Design */
.services-section-new {
position: relative;
overflow: visible;
padding: 6rem 0;
background: var(--color-white);
}
.services-section-new .container {
overflow: visible;
}
.services-section-new .row {
overflow: visible;
}
.services-bg-new {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
linear-gradient(135deg, rgba(26, 82, 163, 0.02) 0%, rgba(60, 179, 113, 0.02) 100%),
radial-gradient(circle at 10% 20%, rgba(26, 82, 163, 0.05) 0%, transparent 50%),
radial-gradient(circle at 90% 80%, rgba(60, 179, 113, 0.05) 0%, transparent 50%);
z-index: 0;
}
.services-title-new {
font-size: 2.5rem;
font-weight: 700;
color: var(--color-primary);
line-height: 1.3;
letter-spacing: -0.5px;
position: relative;
z-index: 1;
}
.services-separator-new {
position: relative;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
height: 4px;
margin-bottom: 2rem;
}
.services-separator-new::before {
content: '';
position: absolute;
width: 120px;
height: 3px;
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent-green) 100%);
border-radius: 2px;
box-shadow: 0 2px 8px rgba(26, 82, 163, 0.3);
}
.service-card-new {
position: relative;
background: var(--color-white);
border-radius: 20px;
padding: 2.5rem;
box-shadow:
0 8px 30px rgba(26, 82, 163, 0.1),
0 4px 15px rgba(26, 82, 163, 0.05);
border: 1px solid rgba(26, 82, 163, 0.1);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
transform-style: preserve-3d;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
margin: 15px;
will-change: transform;
}
.service-card-new::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-accent-green) 100%);
transition: width 0.5s ease;
}
.service-card-new:hover {
transform: translateY(-8px) rotateX(2deg) scale(1.01);
box-shadow:
0 15px 50px rgba(26, 82, 163, 0.2),
0 8px 25px rgba(26, 82, 163, 0.1);
border-color: var(--color-primary);
z-index: 10;
}
.service-card-new:hover::before {
width: 6px;
}
.service-card-title-new {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1.25rem;
position: relative;
z-index: 1;
transition: all 0.5s ease;
}
.service-card-new:hover .service-card-title-new {
color: var(--color-accent-green);
transform: translateX(5px);
}
.service-card-description-new {
font-size: 1.05rem;
color: var(--color-text);
line-height: 1.8;
position: relative;
z-index: 1;
transition: all 0.5s ease;
}
.service-card-new:hover .service-card-description-new {
color: var(--color-text);
}
/* Blog Section - Creative 3D Design */
.blog-section-new {
position: relative;
overflow: visible;
padding: 6rem 0;
background: var(--color-white);
}
.blog-section-new .container {
overflow: visible;
}
.blog-section-new .row {
overflow: visible;
}
.blog-bg-new {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
linear-gradient(135deg, rgba(26, 82, 163, 0.02) 0%, rgba(60, 179, 113, 0.02) 100%),
radial-gradient(circle at 10% 20%, rgba(26, 82, 163, 0.05) 0%, transparent 50%),
radial-gradient(circle at 90% 80%, rgba(60, 179, 113, 0.05) 0%, transparent 50%);
z-index: 0;
}
.blog-title-new {
font-size: 2.5rem;
font-weight: 700;
color: var(--color-primary);
line-height: 1.3;
letter-spacing: -0.5px;
position: relative;
z-index: 1;
}
.blog-separator-new {
position: relative;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
height: 4px;
margin-bottom: 2rem;
}
.blog-separator-new::before {
content: '';
position: absolute;
width: 120px;
height: 3px;
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent-green) 100%);
border-radius: 2px;
box-shadow: 0 2px 8px rgba(26, 82, 163, 0.3);
}
.blog-card-new {
display: block;
position: relative;
background: var(--color-white);
border-radius: 20px;
overflow: hidden;
box-shadow:
0 8px 30px rgba(26, 82, 163, 0.1),
0 4px 15px rgba(26, 82, 163, 0.05);
border: 1px solid rgba(26, 82, 163, 0.1);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
transform-style: preserve-3d;
text-decoration: none;
height: 100%;
display: flex;
flex-direction: column;
margin: 15px;
will-change: transform;
}
.blog-card-new:hover {
transform: translateY(-8px) rotateX(2deg) scale(1.01);
box-shadow:
0 20px 60px rgba(26, 82, 163, 0.2),
0 10px 30px rgba(26, 82, 163, 0.1);
border-color: var(--color-primary);
text-decoration: none;
z-index: 10;
}
.blog-card-image-wrapper {
position: relative;
width: 100%;
height: 250px;
overflow: hidden;
background: linear-gradient(135deg, rgba(26, 82, 163, 0.05) 0%, rgba(60, 179, 113, 0.05) 100%);
}
.blog-card-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.6s ease;
}
.blog-card-new:hover .blog-card-image {
transform: scale(1.1);
}
.blog-card-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
opacity: 0.3;
}
.blog-card-date {
position: absolute;
bottom: 15px;
left: 15px;
background: var(--color-primary);
color: var(--color-white);
padding: 0.5rem 1rem;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 600;
z-index: 2;
box-shadow: 0 4px 12px rgba(26, 82, 163, 0.3);
transition: all 0.5s ease;
}
.blog-card-new:hover .blog-card-date {
background: var(--color-accent-green);
transform: scale(1.05);
}
.blog-card-content {
padding: 2rem;
flex: 1;
display: flex;
flex-direction: column;
}
.blog-card-title {
font-size: 1.3rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1rem;
line-height: 1.4;
transition: all 0.5s ease;
}
.blog-card-excerpt {
font-size: 1rem;
color: var(--color-text);
line-height: 1.7;
margin: 0;
transition: all 0.5s ease;
}
.blog-btn-new {
display: inline-block;
padding: 1rem 3rem;
background: var(--color-primary);
color: var(--color-white);
font-size: 1.1rem;
font-weight: 700;
text-decoration: none;
border-radius: 50px;
box-shadow:
0 8px 25px rgba(26, 82, 163, 0.3),
0 4px 12px rgba(26, 82, 163, 0.2);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
text-transform: uppercase;
letter-spacing: 0.5px;
position: relative;
overflow: hidden;
}
.blog-btn-new::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s ease;
}
.blog-btn-new:hover::before {
left: 100%;
}
.blog-btn-new:hover {
transform: translateY(-5px) scale(1.05);
box-shadow:
0 12px 35px rgba(26, 82, 163, 0.4),
0 6px 18px rgba(26, 82, 163, 0.3);
background: var(--color-accent-green);
text-decoration: none;
color: var(--color-white);
}
/* Contact Section - Creative 3D Design */
.contact-section-new {
position: relative;
overflow: visible;
padding: 6rem 0;
background: var(--color-white);
}
.contact-section-new .container {
overflow: visible;
}
.contact-section-new .row {
overflow: visible;
}
.contact-bg-new {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
linear-gradient(135deg, rgba(26, 82, 163, 0.02) 0%, rgba(60, 179, 113, 0.02) 100%),
radial-gradient(circle at 10% 20%, rgba(26, 82, 163, 0.05) 0%, transparent 50%),
radial-gradient(circle at 90% 80%, rgba(60, 179, 113, 0.05) 0%, transparent 50%);
z-index: 0;
}
.contact-form-wrapper-new {
position: relative;
z-index: 1;
width: 100%;
padding: 0;
margin: 0;
}
.contact-title-new {
font-size: 2.25rem;
font-weight: 700;
color: var(--color-primary);
line-height: 1.3;
letter-spacing: -0.5px;
margin-bottom: 1rem;
}
.contact-separator-new {
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
height: 4px;
margin-bottom: 2rem;
}
.contact-separator-new::before {
content: '';
position: absolute;
width: 100px;
height: 3px;
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent-green) 100%);
border-radius: 2px;
box-shadow: 0 2px 8px rgba(26, 82, 163, 0.3);
}
/* Contact Form 7 Styling - Professional 3D Design */
.contact-form-new {
position: relative;
z-index: 1;
width: 100%;
}
.contact-form-new .wpcf7-form {
position: relative;
display: block;
width: 100%;
margin: 0;
padding: 0;
}
.contact-form-new .wpcf7-form::after {
content: '';
display: table;
clear: both;
}
.contact-form-new .wpcf7-form-control-wrap {
position: relative;
margin-bottom: 1.5rem;
display: block;
width: 100%;
box-sizing: border-box;
}
/* Form paragraph styling - all fields in one paragraph */
.contact-form-new .wpcf7-form > p {
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
display: block;
position: relative;
}
.contact-form-new .wpcf7-form > p::after {
content: '';
display: table;
clear: both;
}
/* Name and Email fields - side by side */
.contact-form-new .wpcf7-form-control-wrap[data-name="your-name"],
.contact-form-new .wpcf7-form-control-wrap[data-name="your-email"] {
width: calc(50% - 0.75rem) !important;
max-width: calc(50% - 0.75rem) !important;
display: block !important;
margin-bottom: 1.5rem;
float: left;
}
.contact-form-new .wpcf7-form-control-wrap[data-name="your-name"] {
margin-right: 1.5rem !important;
}
.contact-form-new .wpcf7-form-control-wrap[data-name="your-email"] {
margin-right: 0 !important;
}
/* Subject field - full width */
.contact-form-new .wpcf7-form-control-wrap[data-name="your-subject"] {
width: 100% !important;
max-width: 100% !important;
display: block !important;
clear: both !important;
margin-bottom: 1.5rem;
}
/* Clear float after subject field (br tag handling) */
.contact-form-new .wpcf7-form > p br {
display: none;
}
/* Message textarea - full width */
.contact-form-new .wpcf7-form-control-wrap[data-name="your-message"] {
width: 100% !important;
max-width: 100% !important;
display: block !important;
clear: both;
margin-bottom: 1.5rem;
}
/* Submit button styling within paragraph */
.contact-form-new .wpcf7-form > p input[type="submit"],
.contact-form-new .wpcf7-form > p .wpcf7-submit {
margin-top: 0.5rem;
margin-bottom: 0;
clear: both;
display: block;
}
/* Spinner styling */
.contact-form-new .wpcf7-spinner {
display: inline-block;
margin-left: 0.5rem;
vertical-align: middle;
}
.contact-form-new label {
display: block;
font-size: 1rem;
font-weight: 600;
color: var(--color-primary);
margin-bottom: 0.75rem;
letter-spacing: 0.3px;
transition: all 0.3s ease;
width: 100%;
}
.contact-form-new label:hover {
color: var(--color-accent-green);
}
.contact-form-new input[type="text"],
.contact-form-new input[type="email"],
.contact-form-new input[type="tel"],
.contact-form-new input[type="url"],
.contact-form-new input[type="number"],
.contact-form-new textarea {
width: 100% !important;
padding: 1rem 1.25rem;
font-size: 1rem;
font-family: var(--font-body);
color: var(--color-text);
background: var(--color-white);
border: 2px solid rgba(26, 82, 163, 0.15);
border-radius: 12px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 2px 8px rgba(26, 82, 163, 0.08),
inset 0 1px 2px rgba(255, 255, 255, 0.8);
outline: none;
position: relative;
z-index: 1;
box-sizing: border-box;
display: block;
}
.contact-form-new input[type="text"]:focus,
.contact-form-new input[type="email"]:focus,
.contact-form-new input[type="tel"]:focus,
.contact-form-new input[type="url"]:focus,
.contact-form-new input[type="number"]:focus,
.contact-form-new textarea:focus {
border-color: var(--color-primary);
box-shadow:
0 4px 16px rgba(26, 82, 163, 0.15),
0 0 0 4px rgba(26, 82, 163, 0.1),
inset 0 1px 2px rgba(255, 255, 255, 0.9);
transform: translateY(-2px);
background: var(--color-white);
}
.contact-form-new input[type="text"]:hover,
.contact-form-new input[type="email"]:hover,
.contact-form-new input[type="tel"]:hover,
.contact-form-new input[type="url"]:hover,
.contact-form-new input[type="number"]:hover,
.contact-form-new textarea:hover {
border-color: rgba(26, 82, 163, 0.3);
box-shadow:
0 3px 12px rgba(26, 82, 163, 0.12),
inset 0 1px 2px rgba(255, 255, 255, 0.85);
}
.contact-form-new textarea {
min-height: 140px;
resize: vertical;
font-family: var(--font-body);
line-height: 1.6;
}
.contact-form-new input[type="text"]::placeholder,
.contact-form-new input[type="email"]::placeholder,
.contact-form-new input[type="tel"]::placeholder,
.contact-form-new input[type="url"]::placeholder,
.contact-form-new input[type="number"]::placeholder,
.contact-form-new textarea::placeholder {
color: var(--color-text-muted);
opacity: 0.6;
font-style: italic;
}
/* Submit Button - Professional 3D Design */
.contact-form-new input[type="submit"],
.contact-form-new .wpcf7-submit {
width: 100% !important;
padding: 1.1rem 2.5rem;
font-size: 1.1rem;
font-weight: 700;
font-family: var(--font-heading);
color: var(--color-white);
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
border: none;
border-radius: 12px;
cursor: pointer;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 8px 25px rgba(26, 82, 163, 0.3),
0 4px 12px rgba(26, 82, 163, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
text-transform: uppercase;
letter-spacing: 0.5px;
position: relative;
overflow: hidden;
transform-style: preserve-3d;
box-sizing: border-box;
display: block;
margin-top: 0.5rem;
}
.contact-form-new input[type="submit"]::before,
.contact-form-new .wpcf7-submit::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s ease;
z-index: 1;
}
.contact-form-new input[type="submit"]:hover::before,
.contact-form-new .wpcf7-submit:hover::before {
left: 100%;
}
.contact-form-new input[type="submit"]:hover,
.contact-form-new .wpcf7-submit:hover {
background: linear-gradient(135deg, var(--color-accent-green) 0%, #4dd084 100%);
box-shadow:
0 12px 35px rgba(60, 179, 113, 0.4),
0 6px 18px rgba(60, 179, 113, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
transform: translateY(-3px) scale(1.02);
color: var(--color-white);
}
.contact-form-new input[type="submit"]:active,
.contact-form-new .wpcf7-submit:active {
transform: translateY(-1px) scale(0.98);
box-shadow:
0 6px 18px rgba(60, 179, 113, 0.3),
0 3px 9px rgba(60, 179, 113, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.contact-form-new input[type="submit"]:focus,
.contact-form-new .wpcf7-submit:focus {
outline: none;
box-shadow:
0 8px 25px rgba(26, 82, 163, 0.3),
0 4px 12px rgba(26, 82, 163, 0.2),
0 0 0 4px rgba(26, 82, 163, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
/* Form Validation Messages */
.contact-form-new .wpcf7-validation-errors,
.contact-form-new .wpcf7-mail-sent-ok,
.contact-form-new .wpcf7-mail-sent-ng,
.contact-form-new .wpcf7-spam,
.contact-form-new .wpcf7-not-valid-tip {
font-size: 0.9rem;
padding: 0.75rem 1rem;
border-radius: 8px;
margin-top: 0.5rem;
font-weight: 500;
line-height: 1.5;
}
.contact-form-new .wpcf7-validation-errors {
background: rgba(228, 30, 38, 0.1);
border: 2px solid var(--color-accent-red);
color: var(--color-accent-red);
}
.contact-form-new .wpcf7-mail-sent-ok {
background: rgba(60, 179, 113, 0.1);
border: 2px solid var(--color-accent-green);
color: var(--color-accent-green);
}
.contact-form-new .wpcf7-mail-sent-ng {
background: rgba(228, 30, 38, 0.1);
border: 2px solid var(--color-accent-red);
color: var(--color-accent-red);
}
.contact-form-new .wpcf7-spam {
background: rgba(255, 193, 7, 0.1);
border: 2px solid #ffc107;
color: #856404;
}
.contact-form-new .wpcf7-not-valid-tip {
background: rgba(228, 30, 38, 0.1);
border: 1px solid var(--color-accent-red);
color: var(--color-accent-red);
font-size: 0.85rem;
padding: 0.5rem 0.75rem;
margin-top: 0.25rem;
border-radius: 6px;
display: inline-block;
}
/* Form Field Error States */
.contact-form-new .wpcf7-not-valid {
border-color: var(--color-accent-red) !important;
background: rgba(228, 30, 38, 0.05) !important;
box-shadow:
0 4px 16px rgba(228, 30, 38, 0.15),
0 0 0 4px rgba(228, 30, 38, 0.1) !important;
}
.contact-form-new .wpcf7-not-valid:focus {
border-color: var(--color-accent-red) !important;
box-shadow:
0 4px 16px rgba(228, 30, 38, 0.2),
0 0 0 4px rgba(228, 30, 38, 0.15) !important;
}
/* Form Loading State */
.contact-form-new .wpcf7-form.sending input[type="submit"],
.contact-form-new .wpcf7-form.sending .wpcf7-submit {
opacity: 0.7;
cursor: not-allowed;
pointer-events: none;
position: relative;
}
.contact-form-new .wpcf7-form.sending input[type="submit"]::after,
.contact-form-new .wpcf7-form.sending .wpcf7-submit::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-top-color: var(--color-white);
border-radius: 50%;
animation: contact-form-spin 0.8s linear infinite;
}
@keyframes contact-form-spin {
to {
transform: rotate(360deg);
}
}
/* Responsive Design for Contact Form */
@media (max-width: 991px) {
/* Stack name and email fields vertically on tablet and mobile */
.contact-form-new .wpcf7-form-control-wrap[data-name="your-name"],
.contact-form-new .wpcf7-form-control-wrap[data-name="your-email"] {
width: 100% !important;
max-width: 100% !important;
display: block !important;
margin-right: 0 !important;
margin-left: 0 !important;
margin-bottom: 1.5rem !important;
float: none !important;
clear: both !important;
}
}
@media (max-width: 767px) {
.contact-form-wrapper-new {
padding: 0;
}
.contact-title-new {
font-size: 1.75rem;
}
.contact-form-new .wpcf7-form > p {
margin-bottom: 1.25rem;
}
.contact-form-new input[type="text"],
.contact-form-new input[type="email"],
.contact-form-new input[type="tel"],
.contact-form-new input[type="url"],
.contact-form-new input[type="number"],
.contact-form-new textarea {
padding: 0.875rem 1rem;
font-size: 0.95rem;
border-radius: 10px;
}
.contact-form-new label {
font-size: 0.95rem;
margin-bottom: 0.5rem;
}
.contact-form-new textarea {
min-height: 120px;
}
.contact-form-new input[type="submit"],
.contact-form-new .wpcf7-submit {
padding: 1rem 2rem;
font-size: 1rem;
border-radius: 10px;
}
}
.contact-image-wrapper-new {
position: relative;
z-index: 1;
border-radius: 24px;
overflow: hidden;
box-shadow:
0 15px 50px rgba(26, 82, 163, 0.15),
0 8px 25px rgba(26, 82, 163, 0.1);
transition: all 0.5s ease;
}
.contact-image-wrapper-new:hover {
transform: translateY(-5px) scale(1.02);
box-shadow:
0 20px 60px rgba(26, 82, 163, 0.2),
0 10px 30px rgba(26, 82, 163, 0.15);
}
.contact-image-new {
width: 100%;
height: auto;
display: block;
transition: all 0.6s ease;
}
.contact-image-wrapper-new:hover .contact-image-new {
transform: scale(1.05);
}
.contact-image-placeholder-new {
width: 100%;
min-height: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(26, 82, 163, 0.05) 0%, rgba(60, 179, 113, 0.05) 100%);
color: var(--color-primary);
padding: 3rem;
text-align: center;
}
.contact-image-placeholder-new svg {
margin-bottom: 1rem;
opacity: 0.5;
}
.contact-image-placeholder-new p {
font-size: 1rem;
color: var(--color-text);
margin: 0;
}
/* Responsive Design for Services Section */
@media (max-width: 991px) {
.services-section-new {
padding: 5rem 0;
}
.services-title-new {
font-size: 2.25rem;
}
.service-card-new {
padding: 2rem;
margin-bottom: 1.5rem;
}
}
@media (max-width: 767px) {
.services-section-new {
padding: 4rem 0;
}
.services-title-new {
font-size: 2rem;
}
.service-card-new {
padding: 1.75rem;
border-radius: 16px;
}
.service-card-title-new {
font-size: 1.35rem;
}
.service-card-description-new {
font-size: 1rem;
}
}
/* Responsive Design for Blog Section */
@media (max-width: 991px) {
.blog-section-new {
padding: 5rem 0;
}
.blog-title-new {
font-size: 2.25rem;
}
.blog-card-image-wrapper {
height: 220px;
}
}
@media (max-width: 767px) {
.blog-section-new {
padding: 4rem 0;
}
.blog-title-new {
font-size: 2rem;
}
.blog-card-image-wrapper {
height: 200px;
}
.blog-card-content {
padding: 1.5rem;
}
.blog-card-title {
font-size: 1.2rem;
}
.blog-card-excerpt {
font-size: 0.95rem;
}
.blog-btn-new {
padding: 0.875rem 2.5rem;
font-size: 1rem;
}
}
/* Responsive Design for Contact Section */
@media (max-width: 991px) {
.contact-section-new {
padding: 5rem 0;
}
.contact-title-new {
font-size: 2rem;
}
.contact-image-wrapper-new {
margin-top: 2rem;
}
}
@media (max-width: 767px) {
.contact-section-new {
padding: 4rem 0;
}
.contact-title-new {
font-size: 1.75rem;
}
.contact-image-wrapper-new {
margin-top: 2rem;
}
}
/* ============================================
Professional Section Order & Spacing
============================================ */
/* Section Spacing Consistency */
section {
position: relative;
overflow: visible;
}
section .container {
overflow: visible;
}
section .row {
overflow: visible;
}
/* Alternating Backgrounds for Section Differentiation */
.hero-section-new {
background: linear-gradient(135deg, rgba(26, 82, 163, 0.03) 0%, rgba(60, 179, 113, 0.03) 100%);
}
.highlights-section {
background: var(--color-white);
}
.statistics-section {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}
.services-section-new {
background: var(--color-white);
}
.about-doctor-section {
padding: var(--section-padding);
}
.empowering-section {
padding: var(--section-padding);
}
.testimonials-section {
padding: var(--section-padding);
}
.conferences-section-new {
padding: var(--section-padding);
}
.blog-section-new {
padding: var(--section-padding);
}
.emergency-section {
padding: var(--section-padding);
}
.contact-section-new {
padding: var(--section-padding);
}
/* Responsive Section Spacing */
@media (max-width: 991px) {
:root {
--section-padding: 5rem 0;
--section-padding-md: 4rem 0;
--section-padding-sm: 3rem 0;
}
.hero-section-new {
padding: 6rem 0 5rem;
}
}
@media (max-width: 767px) {
:root {
--section-padding: 4rem 0;
--section-padding-md: 3rem 0;
--section-padding-sm: 2.5rem 0;
}
.hero-section-new {
padding: 5rem 0 4rem;
}
}
/* ============================================
PREMIUM 3D REDESIGN - GLASSMORPHISM & ANIMATIONS
============================================ */
/* Premium Glassmorphism Mixin */
.glassmorphism {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.glassmorphism-dark {
background: rgba(26, 82, 163, 0.15);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* Premium 3D Floating Animation */
@keyframes premium-float {
0%, 100% {
transform: translateY(0px) rotateX(0deg) rotateY(0deg);
}
25% {
transform: translateY(-10px) rotateX(2deg) rotateY(-1deg);
}
50% {
transform: translateY(-20px) rotateX(0deg) rotateY(0deg);
}
75% {
transform: translateY(-10px) rotateX(-2deg) rotateY(1deg);
}
}
@keyframes premium-glow {
0%, 100% {
box-shadow:
0 0 20px rgba(26, 82, 163, 0.3),
0 0 40px rgba(26, 82, 163, 0.2),
0 0 60px rgba(26, 82, 163, 0.1);
}
50% {
box-shadow:
0 0 30px rgba(26, 82, 163, 0.5),
0 0 60px rgba(26, 82, 163, 0.3),
0 0 90px rgba(26, 82, 163, 0.2);
}
}
@keyframes premium-shimmer {
0% {
background-position: -200% center;
}
100% {
background-position: 200% center;
}
}
@keyframes counter-up {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Premium Hero Section - 3D Waves & Motion Glow */
.hero-section-new {
position: relative;
overflow: hidden;
background: linear-gradient(135deg,
rgba(26, 82, 163, 0.05) 0%,
rgba(60, 179, 113, 0.05) 50%,
rgba(26, 82, 163, 0.08) 100%);
}
.hero-background-new {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(26, 82, 163, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(60, 179, 113, 0.1) 0%, transparent 50%),
linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
z-index: 0;
animation: premium-float 20s ease-in-out infinite;
}
/* 3D Abstract Medical Shapes */
.hero-background-new::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 600px;
height: 600px;
background:
radial-gradient(circle, rgba(26, 82, 163, 0.15) 0%, transparent 70%),
url('data:image/svg+xml;utf8,');
border-radius: 50%;
z-index: 0;
animation: premium-float 25s ease-in-out infinite reverse;
filter: blur(40px);
}
.hero-background-new::after {
content: '';
position: absolute;
bottom: -30%;
left: -10%;
width: 500px;
height: 500px;
background:
radial-gradient(circle, rgba(60, 179, 113, 0.12) 0%, transparent 70%),
url('data:image/svg+xml;utf8,');
border-radius: 50%;
z-index: 0;
animation: premium-float 30s ease-in-out infinite;
filter: blur(50px);
}
/* Doctor Photo with Motion Glow */
.hero-image-wrapper-new {
position: relative;
z-index: 2;
}
/* Premium Hero Image Circle - Updated for proper image display */
.hero-image-circle {
position: relative;
width: 500px;
height: 500px;
border-radius: 24px;
overflow: hidden;
background: linear-gradient(135deg, rgba(26, 82, 163, 0.1) 0%, rgba(26, 82, 163, 0.05) 50%, rgba(60, 179, 113, 0.05) 100%);
padding: 0;
box-shadow:
0 25px 60px rgba(26, 82, 163, 0.3),
0 10px 30px rgba(26, 82, 163, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
animation: premium-glow 4s ease-in-out infinite;
transform-style: preserve-3d;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
}
.hero-image-circle:hover {
transform: translateY(-10px) rotateX(5deg) rotateY(-5deg) scale(1.05);
animation: premium-glow 2s ease-in-out infinite;
box-shadow:
0 35px 80px rgba(26, 82, 163, 0.4),
0 15px 40px rgba(26, 82, 163, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.hero-doctor-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
border-radius: 24px;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
z-index: 2;
opacity: 1 !important;
}
.hero-image-circle:hover .hero-doctor-image {
transform: scale(1.05);
}
/* Premium Hero Title */
.hero-title-new {
font-family: 'Poppins', sans-serif;
font-size: 3.2rem;
font-weight: 800;
color: var(--color-primary);
line-height: 1.2;
margin-bottom: 1.5rem;
letter-spacing: -1px;
text-shadow:
0 2px 10px rgba(26, 82, 163, 0.1),
0 4px 20px rgba(26, 82, 163, 0.05);
position: relative;
z-index: 1;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-green) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: premium-shimmer 3s linear infinite;
background-size: 200% auto;
}
/* Premium CTA Button with Gradient Hover */
.hero-cta-primary {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
border: none;
border-radius: 16px;
font-weight: 700;
font-size: 1.2rem;
padding: 1.2rem 3rem;
box-shadow:
0 10px 30px rgba(26, 82, 163, 0.4),
0 5px 15px rgba(26, 82, 163, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
transform-style: preserve-3d;
text-transform: uppercase;
letter-spacing: 1px;
}
.hero-cta-primary::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;
z-index: 1;
}
.hero-cta-primary:hover::before {
left: 100%;
}
.hero-cta-primary:hover {
background: linear-gradient(135deg, var(--color-accent-green) 0%, #4dd084 100%);
transform: translateY(-5px) scale(1.05);
box-shadow:
0 15px 40px rgba(60, 179, 113, 0.5),
0 8px 20px rgba(60, 179, 113, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.hero-cta-primary::after {
content: '';
position: absolute;
right: 1.5rem;
top: 50%;
transform: translateY(-50%);
font-size: 1.5rem;
transition: transform 0.3s ease;
z-index: 2;
}
.hero-cta-primary:hover::after {
transform: translateY(-50%) translateX(5px);
}
/* Premium Statistics Section - Circular Counters with Glowing Borders */
.statistics-section {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
padding: 8rem 0;
}
.statistics-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 60%, rgba(60, 179, 113, 0.1) 0%, transparent 50%);
z-index: 0;
animation: premium-float 25s ease-in-out infinite;
}
.statistics-card {
position: relative;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 24px;
padding: 3rem 2rem;
text-align: center;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.2),
0 8px 25px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
border: 2px solid rgba(255, 255, 255, 0.3);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transform-style: preserve-3d;
z-index: 1;
}
.statistics-card::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg, var(--color-primary), var(--color-accent-green), var(--color-primary));
border-radius: 24px;
z-index: -1;
opacity: 0;
transition: opacity 0.6s ease;
animation: premium-glow 3s ease-in-out infinite;
}
.statistics-card:hover::before {
opacity: 1;
}
.statistics-card:hover {
transform: translateY(-15px) rotateX(5deg) scale(1.05);
box-shadow:
0 30px 80px rgba(0, 0, 0, 0.3),
0 15px 40px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.statistics-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-green) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 10px 30px rgba(26, 82, 163, 0.4),
0 0 0 8px rgba(26, 82, 163, 0.1),
0 0 0 16px rgba(26, 82, 163, 0.05);
animation: premium-glow 3s ease-in-out infinite;
transition: all 0.6s ease;
}
.statistics-card:hover .statistics-icon {
transform: scale(1.2) rotate(360deg);
box-shadow:
0 15px 40px rgba(26, 82, 163, 0.5),
0 0 0 10px rgba(26, 82, 163, 0.15),
0 0 0 20px rgba(26, 82, 163, 0.08);
}
.statistics-number {
font-size: 3.5rem;
font-weight: 800;
color: var(--color-primary);
margin-bottom: 0.5rem;
font-family: 'Poppins', sans-serif;
line-height: 1;
animation: counter-up 1s ease-out;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-green) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.statistics-label {
font-size: 1.1rem;
font-weight: 600;
color: var(--color-text);
text-transform: uppercase;
letter-spacing: 1px;
}
/* Premium Services Section - 3D Icon Cards */
.services-section-new {
position: relative;
overflow: hidden;
background: var(--color-white);
}
.service-card-new {
position: relative;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 24px;
padding: 3rem 2.5rem;
box-shadow:
0 15px 50px rgba(26, 82, 163, 0.15),
0 8px 25px rgba(26, 82, 163, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
border: 2px solid rgba(26, 82, 163, 0.1);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transform-style: preserve-3d;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.service-card-new::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 6px;
height: 100%;
background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-accent-green) 100%);
transition: width 0.6s ease;
border-radius: 24px 0 0 24px;
}
.service-card-new::after {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(26, 82, 163, 0.1) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.6s ease;
z-index: 0;
}
.service-card-new:hover::after {
opacity: 1;
}
.service-card-new:hover {
transform: translateY(-20px) rotateX(5deg) scale(1.03);
box-shadow:
0 25px 70px rgba(26, 82, 163, 0.25),
0 12px 35px rgba(26, 82, 163, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
border-color: var(--color-primary);
}
.service-card-new:hover::before {
width: 8px;
}
.service-card-title-new {
font-size: 1.75rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1.5rem;
position: relative;
z-index: 1;
transition: all 0.6s ease;
}
.service-card-new:hover .service-card-title-new {
color: var(--color-accent-green);
transform: translateX(8px);
}
/* Premium About Section - Glassmorphic Box */
.about-doctor-section {
position: relative;
overflow: hidden;
background: linear-gradient(135deg,
rgba(26, 82, 163, 0.03) 0%,
rgba(60, 179, 113, 0.03) 50%,
rgba(26, 82, 163, 0.05) 100%);
}
.about-doctor-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(26, 82, 163, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(60, 179, 113, 0.08) 0%, transparent 50%);
z-index: 0;
animation: premium-float 30s ease-in-out infinite;
}
.about-doctor-image {
border-radius: 24px;
box-shadow:
0 25px 60px rgba(26, 82, 163, 0.3),
0 10px 30px rgba(26, 82, 163, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
animation: premium-float 8s ease-in-out infinite;
}
.about-doctor-image:hover {
transform: translateY(-10px) rotateX(5deg) rotateY(-5deg) scale(1.05);
box-shadow:
0 35px 80px rgba(26, 82, 163, 0.4),
0 15px 40px rgba(26, 82, 163, 0.3);
}
.about-doctor-content {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
border-radius: 24px;
padding: 3rem;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.1),
0 8px 25px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
border: 1px solid rgba(255, 255, 255, 0.3);
position: relative;
z-index: 1;
}
/* Premium Testimonials Section - Swiper with 3D Quote Bubbles */
.testimonials-section {
position: relative;
overflow: hidden;
background: linear-gradient(135deg,
rgba(26, 82, 163, 0.05) 0%,
rgba(60, 179, 113, 0.05) 50%,
rgba(26, 82, 163, 0.08) 100%);
padding: 8rem 0;
}
.testimonials-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 30% 40%, rgba(26, 82, 163, 0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 60%, rgba(60, 179, 113, 0.1) 0%, transparent 50%);
z-index: 0;
animation: premium-float 25s ease-in-out infinite;
}
.testimonial-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 24px;
padding: 3rem;
box-shadow:
0 20px 60px rgba(26, 82, 163, 0.2),
0 8px 25px rgba(26, 82, 163, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
border: 2px solid rgba(255, 255, 255, 0.3);
position: relative;
transform-style: preserve-3d;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
height: 100%;
}
.testimonial-card::before {
content: '"';
position: absolute;
top: -20px;
left: 30px;
font-size: 8rem;
font-weight: 800;
color: var(--color-primary);
opacity: 0.1;
font-family: 'Georgia', serif;
line-height: 1;
z-index: 0;
}
.testimonial-card:hover {
transform: translateY(-15px) rotateX(5deg) scale(1.03);
box-shadow:
0 30px 80px rgba(26, 82, 163, 0.3),
0 15px 40px rgba(26, 82, 163, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* Premium Blog Section - Animated Cards with Gradient Overlay */
.blog-card-new {
display: block;
position: relative;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 24px;
overflow: hidden;
box-shadow:
0 15px 50px rgba(26, 82, 163, 0.15),
0 8px 25px rgba(26, 82, 163, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
border: 2px solid rgba(255, 255, 255, 0.3);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transform-style: preserve-3d;
text-decoration: none;
height: 100%;
display: flex;
flex-direction: column;
}
.blog-card-new::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(26, 82, 163, 0.8) 0%,
rgba(60, 179, 113, 0.8) 100%);
opacity: 0;
transition: opacity 0.6s ease;
z-index: 1;
}
.blog-card-new:hover::after {
opacity: 0.9;
}
.blog-card-new:hover {
transform: translateY(-20px) rotateX(5deg) scale(1.05);
box-shadow:
0 30px 80px rgba(26, 82, 163, 0.3),
0 15px 40px rgba(26, 82, 163, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
text-decoration: none;
}
.blog-card-image {
width: 100%;
height: 250px;
object-fit: cover;
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
z-index: 0;
}
.blog-card-new:hover .blog-card-image {
transform: scale(1.15);
}
.blog-card-content {
padding: 2rem;
flex: 1;
display: flex;
flex-direction: column;
position: relative;
z-index: 2;
}
.blog-card-title {
font-size: 1.4rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1rem;
line-height: 1.4;
transition: all 0.6s ease;
}
.blog-card-new:hover .blog-card-title {
color: white;
transform: translateX(5px);
}
.blog-card-excerpt {
font-size: 1rem;
color: var(--color-text);
line-height: 1.7;
margin: 0;
transition: all 0.6s ease;
}
.blog-card-new:hover .blog-card-excerpt {
color: rgba(255, 255, 255, 0.9);
}
/* Premium Contact Section - 3D Form Fields */
.contact-form-new input[type="text"]:focus,
.contact-form-new input[type="email"]:focus,
.contact-form-new input[type="tel"]:focus,
.contact-form-new input[type="url"]:focus,
.contact-form-new input[type="number"]:focus,
.contact-form-new textarea:focus {
border-color: var(--color-primary);
box-shadow:
0 8px 25px rgba(26, 82, 163, 0.2),
0 0 0 6px rgba(26, 82, 163, 0.15),
inset 0 1px 2px rgba(255, 255, 255, 0.9);
transform: translateY(-4px) scale(1.02);
background: rgba(255, 255, 255, 0.98);
}
.contact-image-wrapper-new {
position: relative;
z-index: 1;
border-radius: 24px;
overflow: hidden;
box-shadow:
0 25px 60px rgba(26, 82, 163, 0.25),
0 10px 30px rgba(26, 82, 163, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
animation: premium-float 10s ease-in-out infinite;
}
.contact-image-wrapper-new:hover {
transform: translateY(-15px) rotateX(5deg) rotateY(-5deg) scale(1.05);
box-shadow:
0 35px 80px rgba(26, 82, 163, 0.35),
0 15px 40px rgba(26, 82, 163, 0.25);
}
/* Premium Footer - Creative 3D Design with Brand Colors & Live Moments */
.site-footer {
background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-primary-dark) 100%);
color: rgba(255, 255, 255, 0.95);
position: relative;
overflow: hidden;
padding: 4rem 0 2rem;
}
/* Animated Background with 3D Floating Elements */
.site-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(60, 179, 113, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(26, 82, 163, 0.2) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
animation: footer-bg-float 20s ease-in-out infinite;
z-index: 0;
}
.site-footer::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background:
radial-gradient(circle at 30% 40%, rgba(60, 179, 113, 0.1) 0%, transparent 40%),
radial-gradient(circle at 70% 60%, rgba(26, 82, 163, 0.15) 0%, transparent 40%);
animation: footer-bg-rotate 30s linear infinite;
z-index: 0;
pointer-events: none;
}
@keyframes footer-bg-float {
0%, 100% {
transform: translateY(0) scale(1);
opacity: 1;
}
50% {
transform: translateY(-20px) scale(1.1);
opacity: 0.8;
}
}
@keyframes footer-bg-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Footer Content Positioning */
.site-footer .container {
position: relative;
z-index: 1;
}
.site-footer .row {
position: relative;
z-index: 1;
}
/* Footer Logo with 3D Effect */
.footer-logo {
position: relative;
display: inline-block;
transition: all 0.5s ease;
}
.footer-logo img {
transition: all 0.5s ease;
filter: drop-shadow(0 4px 12px rgba(255, 255, 255, 0.2));
}
.footer-logo:hover {
transform: translateY(-5px) scale(1.05);
}
.footer-logo:hover img {
filter: drop-shadow(0 8px 20px rgba(255, 255, 255, 0.4));
}
/* Footer Description */
.footer-description {
color: rgba(255, 255, 255, 0.85);
line-height: 1.7;
font-size: 0.95rem;
position: relative;
z-index: 1;
}
/* Footer Titles with Gradient Effect */
.footer-title {
color: #ffffff;
font-weight: 700;
font-size: 1.25rem;
margin-bottom: 1.5rem;
position: relative;
display: inline-block;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
.footer-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 50px;
height: 3px;
background: linear-gradient(90deg, var(--color-accent-green) 0%, var(--color-primary) 100%);
border-radius: 2px;
box-shadow: 0 2px 8px rgba(60, 179, 113, 0.5);
animation: footer-title-underline 2s ease-in-out infinite;
}
@keyframes footer-title-underline {
0%, 100% {
width: 50px;
opacity: 1;
}
50% {
width: 80px;
opacity: 0.8;
}
}
.footer-title:hover {
color: var(--color-accent-green);
transform: translateX(5px);
}
/* Footer Links with 3D Hover Effect */
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 0.75rem;
position: relative;
transition: all 0.3s ease;
}
.footer-links a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: all 0.3s ease;
display: inline-block;
position: relative;
padding-left: 0;
}
.footer-links a::before {
content: '';
position: absolute;
left: -15px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 2px;
background: var(--color-accent-green);
transition: width 0.3s ease;
border-radius: 1px;
}
.footer-links a:hover {
color: var(--color-accent-green);
padding-left: 15px;
transform: translateX(5px);
text-shadow: 0 0 10px rgba(60, 179, 113, 0.5);
}
.footer-links a:hover::before {
width: 8px;
}
/* Footer Social Icons with 3D Glow Effect - Fixed Overflow */
.footer-social {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
overflow: visible;
padding: 10px 0;
position: relative;
z-index: 1;
}
.footer-social a {
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 50%;
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
border: 2px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
flex-shrink: 0;
overflow: hidden;
}
.footer-social a i,
.footer-social a svg {
color: rgba(255, 255, 255, 0.9);
transition: all 0.4s ease;
position: relative;
z-index: 1;
}
.footer-social a::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
background: radial-gradient(circle, rgba(60, 179, 113, 0.3) 0%, transparent 70%);
border-radius: 50%;
transition: all 0.4s ease;
z-index: -1;
pointer-events: none;
overflow: hidden;
}
.footer-social a:hover {
transform: translateY(-5px) scale(1.1) rotate(5deg);
background: var(--color-accent-green);
color: #ffffff !important;
border-color: var(--color-accent-green);
box-shadow:
0 8px 25px rgba(60, 179, 113, 0.5),
0 0 30px rgba(60, 179, 113, 0.3),
inset 0 2px 5px rgba(255, 255, 255, 0.3);
z-index: 10;
}
.footer-social a:hover i,
.footer-social a:hover svg {
color: #ffffff !important;
transform: scale(1.1);
filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.5));
}
.footer-social a:hover::before {
width: 80px;
height: 80px;
animation: footer-icon-pulse 1.5s ease-out infinite;
}
@keyframes footer-icon-pulse {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.5;
}
100% {
transform: translate(-50%, -50%) scale(1.3);
opacity: 0;
}
}
/* Footer Contact Items with 3D Effect */
.footer-contact {
position: relative;
z-index: 1;
}
.contact-item {
position: relative;
padding-left: 2rem;
margin-bottom: 1rem;
transition: all 0.3s ease;
}
.contact-item i {
color: var(--color-accent-green);
font-size: 1.2rem;
position: absolute;
left: 0;
top: 0.25rem;
transition: all 0.3s ease;
filter: drop-shadow(0 2px 8px rgba(60, 179, 113, 0.4));
}
.contact-item:hover {
transform: translateX(5px);
}
.contact-item:hover i {
transform: scale(1.2) rotate(10deg);
color: #ffffff;
filter: drop-shadow(0 4px 12px rgba(60, 179, 113, 0.6));
}
.contact-text {
color: rgba(255, 255, 255, 0.85);
transition: all 0.3s ease;
}
.contact-item:hover .contact-text {
color: #ffffff;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
/* Footer Bottom with Gradient Border - Fixed Overflow */
.footer-bottom {
border-top: 2px solid rgba(255, 255, 255, 0.1) !important;
padding-top: 2rem;
margin-top: 3rem;
position: relative;
z-index: 1;
overflow: visible;
}
.footer-bottom .row {
overflow: visible;
}
.footer-bottom::before {
content: '';
position: absolute;
top: -2px;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
var(--color-accent-green) 25%,
var(--color-primary) 50%,
var(--color-accent-green) 75%,
transparent 100%);
animation: footer-border-shine 3s ease-in-out infinite;
}
@keyframes footer-border-shine {
0%, 100% {
opacity: 0.5;
}
50% {
opacity: 1;
}
}
.copyright {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
transition: all 0.3s ease;
}
.copyright:hover {
color: rgba(255, 255, 255, 0.95);
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
.footer-bottom-links {
display: inline-flex;
gap: 1rem;
align-items: center;
overflow: visible;
padding: 5px 0;
position: relative;
z-index: 1;
}
.footer-bottom-links a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: all 0.3s ease;
position: relative;
display: inline-block;
white-space: nowrap;
padding: 2px 0;
overflow: visible;
}
.footer-bottom-links a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: var(--color-accent-green);
transition: width 0.3s ease;
border-radius: 1px;
pointer-events: none;
overflow: hidden;
}
.footer-bottom-links a:hover {
color: var(--color-accent-green);
text-shadow: 0 0 8px rgba(60, 179, 113, 0.4);
transform: translateY(-1px);
}
.footer-bottom-links a:hover::after {
width: 100%;
}
/* Responsive Footer */
@media (max-width: 991px) {
.site-footer {
padding: 3rem 0 1.5rem;
}
.footer-title {
font-size: 1.1rem;
}
.footer-social a {
width: 40px;
height: 40px;
}
}
@media (max-width: 767px) {
.site-footer {
padding: 2.5rem 0 1rem;
}
.footer-bottom {
text-align: center;
}
.footer-bottom-links {
justify-content: center;
margin-top: 1rem;
}
}
/* Smooth Entrance Animations */
@keyframes fade-up {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes zoom-in {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
.fade-up-animate {
animation: fade-up 0.8s ease-out;
}
.zoom-in-animate {
animation: zoom-in 0.8s ease-out;
}
/* Responsive Adjustments */
@media (max-width: 991px) {
.hero-title-new {
font-size: 2.5rem;
}
.statistics-number {
font-size: 2.5rem;
}
.service-card-new,
.testimonial-card,
.blog-card-new {
margin-bottom: 2rem;
}
}
@media (max-width: 767px) {
.hero-title-new {
font-size: 2rem;
}
.statistics-number {
font-size: 2rem;
}
.hero-cta-primary {
padding: 1rem 2rem;
font-size: 1rem;
}
}
/* Old Conferences Section - Keep for reference */
.conferences-section {
position: relative;
overflow: hidden;
padding: 6rem 0;
background: linear-gradient(135deg, rgba(26, 82, 163, 0.03) 0%, rgba(60, 179, 113, 0.03) 50%, rgba(26, 82, 163, 0.05) 100%);
}
.conferences-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(26, 82, 163, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(60, 179, 113, 0.08) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(228, 30, 38, 0.05) 0%, transparent 50%);
z-index: 0;
animation: float-background 20s ease-in-out infinite;
}
.conferences-background::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background:
radial-gradient(circle at 30% 40%, rgba(26, 82, 163, 0.06) 0%, transparent 40%),
radial-gradient(circle at 70% 60%, rgba(60, 179, 113, 0.06) 0%, transparent 40%);
animation: rotate-gradient 30s linear infinite;
z-index: 0;
}
@keyframes float-background {
0%, 100% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(-20px) scale(1.05);
}
}
@keyframes rotate-gradient {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.conferences-title {
font-size: 2.75rem;
font-weight: 700;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-green) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.3;
letter-spacing: -0.5px;
position: relative;
z-index: 1;
text-shadow: 0 2px 10px rgba(26, 82, 163, 0.1);
color: var(--color-primary);
}
.conferences-separator {
position: relative;
z-index: 1;
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 2rem;
height: 4px;
}
.conferences-separator::before {
content: '';
position: absolute;
left: 0;
width: 100px;
height: 4px;
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent-green) 100%);
border-radius: 2px;
box-shadow: 0 2px 8px rgba(26, 82, 163, 0.3);
animation: separator-glow 2s ease-in-out infinite;
}
.conferences-separator::after {
content: '';
position: absolute;
left: 110px;
width: 8px;
height: 8px;
background: var(--color-primary);
border-radius: 50%;
box-shadow: 0 0 10px var(--color-primary);
animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes separator-glow {
0%, 100% {
box-shadow: 0 2px 8px var(--color-primary);
}
50% {
box-shadow: 0 2px 15px var(--color-primary);
}
}
@keyframes pulse-dot {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.3);
opacity: 0.7;
}
}
.conferences-description {
font-size: 1.1rem;
color: var(--color-text);
line-height: 1.9;
position: relative;
z-index: 1;
max-width: 900px;
font-weight: 400;
}
.conferences-list {
list-style: none;
padding: 0;
margin: 0;
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 1rem;
}
.conferences-item {
font-size: 1.05rem;
color: var(--color-text);
line-height: 1.7;
padding: 1.25rem 1.5rem 1.25rem 3.5rem;
position: relative;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
background: var(--color-white);
border-radius: 12px;
border-left: 4px solid var(--color-primary);
box-shadow:
0 2px 8px rgba(26, 82, 163, 0.1),
0 1px 3px rgba(26, 82, 163, 0.05);
backdrop-filter: blur(10px);
overflow: hidden;
}
.conferences-item::before {
content: '';
position: absolute;
left: 1.25rem;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-green) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 4px 12px var(--color-primary),
inset 0 2px 4px var(--color-white);
z-index: 2;
transition: all 0.4s ease;
}
.conferences-item::after {
content: '';
position: absolute;
left: 1.35rem;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 6px solid var(--color-white);
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
z-index: 3;
transition: all 0.4s ease;
}
.conferences-item:hover {
color: var(--color-primary);
transform: translateX(8px) translateY(-2px);
box-shadow:
0 8px 20px var(--color-primary),
0 4px 8px rgba(26, 82, 163, 0.15);
border-left-color: var(--color-accent-green);
background: var(--color-white);
}
.conferences-item:hover::before {
transform: translateY(-50%) scale(1.15);
box-shadow:
0 6px 18px var(--color-accent-green),
inset 0 2px 4px var(--color-white);
background: linear-gradient(135deg, var(--color-accent-green) 0%, var(--color-primary) 100%);
}
.conferences-item:hover::after {
transform: translateY(-50%) scale(1.1);
}
/* Animated background pattern for items */
.conferences-item {
position: relative;
}
.conferences-item::before {
animation: icon-pulse 2s ease-in-out infinite;
}
@keyframes icon-pulse {
0%, 100% {
box-shadow:
0 4px 12px var(--color-primary),
inset 0 2px 4px var(--color-white);
}
50% {
box-shadow:
0 6px 18px var(--color-accent-green),
inset 0 2px 4px var(--color-white);
}
}
/* Responsive Design for Conferences Section */
@media (max-width: 991px) {
.conferences-title {
font-size: 2.25rem;
}
.conferences-section {
padding: 5rem 0;
}
.conferences-item {
padding: 1.1rem 1.3rem 1.1rem 3rem;
}
}
@media (max-width: 767px) {
.conferences-section {
padding: 4rem 0;
}
.conferences-title {
font-size: 2rem;
}
.conferences-description {
font-size: 1rem;
line-height: 1.8;
}
.conferences-item {
font-size: 0.95rem;
padding: 1rem 1.2rem 1rem 2.8rem;
line-height: 1.6;
}
.conferences-item::before {
width: 20px;
height: 20px;
left: 1rem;
}
.conferences-item::after {
left: 1.08rem;
border-left-width: 5px;
border-top-width: 3px;
border-bottom-width: 3px;
}
.conferences-separator::before {
width: 80px;
}
}
/* Our Treatment Section */
.treatments-section {
background: #ffffff;
padding: 5rem 0;
}
.treatments-title-new {
font-family: 'Poppins', serif;
font-size: 3rem;
font-weight: 700;
color: var(--color-primary);
line-height: 1.2;
letter-spacing: -0.5px;
}
.treatments-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1.5rem;
margin-top: 3rem;
}
.treatment-card {
background: #F0F8FF;
border-radius: 12px;
padding: 2rem 1.5rem;
transition: all 0.3s ease;
text-align: center;
position: relative;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.treatment-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(26, 82, 163, 0.1), transparent);
transition: left 0.5s ease;
}
.treatment-card:hover::before {
left: 100%;
}
.treatment-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 8px 25px rgba(26, 82, 163, 0.15);
background: linear-gradient(135deg, #F0F8FF 0%, #e8f4f8 100%);
}
.treatment-card-link {
text-decoration: none;
color: inherit;
display: block;
}
.treatment-icon-wrapper {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 1rem;
min-height: 80px;
}
.treatment-icon {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
}
.treatment-icon svg {
width: 100%;
height: 100%;
color: #333333;
transition: transform 0.3s ease;
}
.treatment-card:hover .treatment-icon svg {
transform: scale(1.1);
color: var(--color-primary);
}
.treatment-icon-placeholder {
width: 64px;
height: 64px;
opacity: 0.3;
}
.treatment-title {
font-size: 1rem;
font-weight: 600;
color: #333333;
line-height: 1.4;
transition: color 0.3s ease;
}
.treatment-card:hover .treatment-title {
color: var(--color-primary);
}
@media (max-width: 1200px) {
.treatments-grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 992px) {
.treatments-grid {
grid-template-columns: repeat(3, 1fr);
}
.treatments-title-new {
font-size: 2.25rem;
}
}
@media (max-width: 768px) {
.treatments-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.treatment-card {
padding: 1.5rem 1rem;
}
.treatments-title-new {
font-size: 1.75rem;
}
}
@media (max-width: 576px) {
.treatments-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.treatment-card {
padding: 1.25rem 0.75rem;
}
.treatment-icon-wrapper {
min-height: 60px;
margin-bottom: 0.75rem;
}
.treatment-icon {
width: 48px;
height: 48px;
}
.treatment-title {
font-size: 0.875rem;
}
}
.about-section {
background: #ffffff;
}
.doctors-section {
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}
@media (max-width: 768px) {
section {
padding: 3rem 0;
}
.hero-section {
min-height: auto;
padding: 3rem 0 !important;
}
.hero-img-3d {
transform: perspective(1000px) rotateY(-3deg) rotateX(1deg) !important;
}
}
a.btn.btn-primary.btn-appointment {
padding: 14px 24px;
border-radius: 30px;
}
/* ============================================
Empowering Digestive Health Section
============================================ */
.empowering-section {
position: relative;
overflow: visible;
padding: 5rem 0;
}
.empowering-section .container {
overflow: visible;
}
.empowering-section .row {
overflow: visible;
}
.empowering-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e8f4f8 100%);
z-index: 0;
opacity: 0.6;
}
.empowering-background::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 800px;
height: 800px;
background: radial-gradient(circle, rgba(26, 82, 163, 0.05) 0%, transparent 70%);
border-radius: 50%;
animation: float-circle 20s ease-in-out infinite;
}
.empowering-background::after {
content: '';
position: absolute;
bottom: -30%;
left: -15%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(60, 179, 113, 0.04) 0%, transparent 70%);
border-radius: 50%;
animation: float-circle 25s ease-in-out infinite reverse;
}
.empowering-title {
font-size: 2.5rem;
font-weight: 700;
color: #1a1a1a;
line-height: 1.3;
letter-spacing: -0.5px;
position: relative;
z-index: 1;
}
.empowering-separator {
position: relative;
z-index: 1;
}
.separator-line {
display: inline-block;
width: 80px;
height: 4px;
background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
position: relative;
margin: 0 10px;
}
.separator-line::before,
.separator-line::after {
content: '';
position: absolute;
top: 50%;
width: 8px;
height: 8px;
background: var(--color-primary);
border-radius: 50%;
transform: translateY(-50%);
}
.separator-line::before {
left: -4px;
}
.separator-line::after {
right: -4px;
}
.empowering-description {
font-size: 1.1rem;
color: #666;
line-height: 1.8;
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 1;
}
/* Empowering Cards - Similar to Highlights but Different Structure */
.empowering-card {
background: linear-gradient(135deg, #1A52A3 0%, #2d6bc4 100%);
border-radius: 20px;
padding: 1.5rem 2.5rem 2.5rem;
color: #ffffff;
position: relative;
overflow: hidden;
box-shadow:
0 10px 30px rgba(26, 82, 163, 0.2),
0 4px 15px rgba(0, 0, 0, 0.1);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
min-height: 320px;
display: flex;
flex-direction: column;
z-index: 1;
height: 100%;
}
.empowering-card {
margin: 15px;
will-change: transform;
}
.empowering-card:hover {
transform: translateY(-8px) scale(1.01);
box-shadow:
0 20px 50px rgba(26, 82, 163, 0.35),
0 8px 25px rgba(0, 0, 0, 0.15);
background: linear-gradient(135deg, #143d7a 0%, #1A52A3 100%);
z-index: 10;
}
/* 3D Animated Background Icons for Each Card - Content Based Icons at Bottom Right */
.empowering-card-1::before {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 180px;
height: 180px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
background-position: bottom right;
transform-origin: bottom right;
transform: rotate(0deg);
animation: rotate-3d-icon-1 20s linear infinite;
z-index: 0;
opacity: 0.4;
pointer-events: none;
}
.empowering-card-2::before {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 180px;
height: 180px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
background-position: bottom right;
transform-origin: bottom right;
transform: rotate(0deg);
animation: rotate-3d-icon-2 25s linear infinite reverse;
z-index: 0;
opacity: 0.4;
pointer-events: none;
}
.empowering-card-3::before {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 180px;
height: 180px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
background-position: bottom right;
transform-origin: bottom right;
transform: rotate(0deg);
animation: rotate-3d-icon-3 30s linear infinite;
z-index: 0;
opacity: 0.4;
pointer-events: none;
}
.empowering-card-1:hover::before {
opacity: 0.6;
animation: rotate-3d-icon-1 10s linear infinite;
transform: scale(1.1);
transform-origin: bottom right;
}
.empowering-card-2:hover::before {
opacity: 0.6;
animation: rotate-3d-icon-2 12s linear infinite reverse;
transform: scale(1.1);
}
.empowering-card-3:hover::before {
opacity: 0.6;
animation: rotate-3d-icon-3 15s linear infinite;
transform: scale(1.1);
transform-origin: bottom right;
}
/* Card Titles - Similar to Highlights */
.empowering-card-title {
font-size: 1.5rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 1rem;
position: relative;
z-index: 2;
transition: all 0.3s ease;
flex-grow: 0;
line-height: 1.3;
}
.empowering-card:hover .empowering-card-title {
color: #ffffff;
transform: translateY(-2px);
}
/* Card Descriptions - Similar to Highlights */
.empowering-card-description {
font-size: 1rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.7;
position: relative;
z-index: 2;
transition: all 0.3s ease;
flex-grow: 1;
}
.empowering-card:hover .empowering-card-description {
color: rgba(255, 255, 255, 0.95);
}
/* Shine effect on hover - Similar to Highlights */
.empowering-card::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
transform: rotate(45deg);
transition: left 0.6s ease;
z-index: 2;
pointer-events: none;
}
.empowering-card:hover::after {
left: 100%;
}
/* Override ::after for card 2 - positioned at bottom right */
.empowering-card-2::after {
content: '';
position: absolute;
bottom: 0 !important;
right: 0 !important;
top: auto !important;
left: auto !important;
width: 180px !important;
height: 180px !important;
background-image: url('data:image/svg+xml;utf8,') !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: bottom right !important;
transform-origin: bottom right !important;
z-index: 0;
opacity: 0.3;
pointer-events: none;
transform: none !important;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.empowering-card-2:hover::after {
opacity: 0.5;
transform: scale(1.05) !important;
}
/* Responsive Design */
@media (max-width: 991px) {
.empowering-title {
font-size: 2rem;
}
.empowering-card {
margin-bottom: 30px;
min-height: 360px;
}
.empowering-icon-wrapper {
width: 100px;
height: 100px;
}
}
@media (max-width: 767px) {
.empowering-section {
padding: 60px 0;
}
.empowering-title {
font-size: 1.75rem;
}
.empowering-description {
font-size: 1rem;
}
.empowering-card {
padding: 30px 20px;
min-height: 340px;
}
.empowering-card-title {
font-size: 1.25rem;
}
.empowering-icon-wrapper {
width: 90px;
height: 90px;
}
}
/* ============================================
Research & Publications Page Styles
============================================ */
/* Hero Banner Section */
.research-hero-banner {
position: relative;
overflow: visible;
padding: 5rem 0 4rem;
background: linear-gradient(135deg, rgba(26, 82, 163, 0.08) 0%, rgba(60, 179, 113, 0.08) 100%);
min-height: 300px;
display: flex;
align-items: center;
}
.research-hero-banner-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(26, 82, 163, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(60, 179, 113, 0.1) 0%, transparent 50%);
z-index: 0;
}
.research-hero-banner-title {
font-family: var(--font-heading);
font-size: 3.5rem;
font-weight: 700;
color: var(--color-primary);
line-height: 1.2;
margin-bottom: 0.5rem;
letter-spacing: -0.5px;
position: relative;
z-index: 1;
}
/* Breadcrumbs - Universal Design */
.sn-breadcrumbs,
.research-breadcrumbs,
.training-breadcrumbs {
position: relative;
z-index: 1;
}
.sn-breadcrumbs .breadcrumb,
.research-breadcrumbs .breadcrumb,
.training-breadcrumbs .breadcrumb {
background: transparent;
padding: 0;
margin: 0;
}
.sn-breadcrumbs .breadcrumb-item,
.research-breadcrumbs .breadcrumb-item,
.training-breadcrumbs .breadcrumb-item {
font-family: var(--font-body);
font-size: 1rem;
color: var(--color-primary);
}
.sn-breadcrumbs .breadcrumb-item a,
.research-breadcrumbs .breadcrumb-item a,
.training-breadcrumbs .breadcrumb-item a {
color: var(--color-primary);
text-decoration: none;
opacity: 0.9;
transition: opacity var(--transition-base);
}
.sn-breadcrumbs .breadcrumb-item a:hover,
.research-breadcrumbs .breadcrumb-item a:hover,
.training-breadcrumbs .breadcrumb-item a:hover {
opacity: 1;
}
.sn-breadcrumbs .breadcrumb-item.active,
.research-breadcrumbs .breadcrumb-item.active,
.training-breadcrumbs .breadcrumb-item.active {
color: var(--color-primary-dark);
opacity: 0.85;
}
.sn-breadcrumbs .breadcrumb-item + .breadcrumb-item::before,
.research-breadcrumbs .breadcrumb-item + .breadcrumb-item::before,
.training-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
content: ">";
color: var(--color-primary);
opacity: 0.7;
padding: 0 0.5rem;
}
/* Image Carousel Section */
.research-image-carousel {
position: relative;
overflow: visible;
padding: 4rem 0;
background: var(--color-white);
}
.research-image-carousel-wrapper {
position: relative;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow:
0 10px 40px rgba(26, 82, 163, 0.15),
0 5px 20px rgba(26, 82, 163, 0.1);
transition: all var(--transition-slow);
}
.research-image-carousel-wrapper:hover {
transform: translateY(-5px);
box-shadow:
0 15px 50px rgba(26, 82, 163, 0.2),
0 8px 25px rgba(26, 82, 163, 0.15);
}
.research-carousel-image {
width: 100%;
height: auto;
display: block;
transition: all var(--transition-slow);
}
.research-image-carousel-wrapper:hover .research-carousel-image {
transform: scale(1.02);
}
/* Research/Thesis Section */
.research-thesis-section {
position: relative;
overflow: visible;
padding: 5rem 0;
background: var(--color-white);
}
.research-thesis-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
linear-gradient(135deg, rgba(26, 82, 163, 0.02) 0%, rgba(60, 179, 113, 0.02) 100%);
z-index: 0;
}
.research-thesis-section-title {
font-family: var(--font-heading);
font-size: 2.5rem;
font-weight: 700;
color: var(--color-text);
line-height: 1.3;
letter-spacing: -0.5px;
position: relative;
z-index: 1;
margin-bottom: 2rem;
}
.research-thesis-list {
position: relative;
z-index: 1;
}
.research-thesis-item {
background: var(--color-white);
border-left: 4px solid var(--color-primary);
border-radius: var(--radius-md);
padding: 2rem;
margin-bottom: 1.5rem;
box-shadow:
0 2px 10px rgba(26, 82, 163, 0.08),
0 1px 5px rgba(26, 82, 163, 0.05);
transition: all var(--transition-base);
}
.research-thesis-item:hover {
transform: translateX(5px);
box-shadow:
0 4px 20px rgba(26, 82, 163, 0.12),
0 2px 10px rgba(26, 82, 163, 0.08);
border-left-color: var(--color-accent-green);
}
.research-thesis-title {
font-family: var(--font-body);
font-size: 1.1rem;
font-weight: 600;
color: var(--color-text);
line-height: 1.6;
margin-bottom: 0.75rem;
}
.research-thesis-meta {
font-family: var(--font-body);
font-size: 1rem;
color: var(--color-text-light);
line-height: 1.6;
}
.research-thesis-university {
font-weight: 600;
color: var(--color-primary);
}
.research-thesis-date {
color: var(--color-text-muted);
}
/* Statistics Section */
.research-statistics-section {
position: relative;
overflow: visible;
padding: 6rem 0;
background: var(--color-white);
}
.research-statistics-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
linear-gradient(135deg, rgba(26, 82, 163, 0.02) 0%, rgba(60, 179, 113, 0.02) 100%),
radial-gradient(circle at 50% 50%, rgba(26, 82, 163, 0.05) 0%, transparent 70%);
z-index: 0;
}
.research-statistics-title {
font-family: var(--font-heading);
font-size: 2.75rem;
font-weight: 700;
color: var(--color-primary);
line-height: 1.3;
letter-spacing: -0.5px;
position: relative;
z-index: 1;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-green) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.research-statistics-separator {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 4px;
margin-bottom: 2rem;
}
.research-statistics-separator::before {
content: '';
position: absolute;
width: 100px;
height: 3px;
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent-green) 100%);
border-radius: 2px;
box-shadow: 0 2px 8px rgba(26, 82, 163, 0.3);
}
.research-stat-card {
background: var(--color-white);
border-radius: 20px;
padding: 2.5rem;
box-shadow:
0 4px 20px rgba(26, 82, 163, 0.08),
0 2px 10px rgba(26, 82, 163, 0.05);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-align: center;
position: relative;
overflow: hidden;
}
.research-stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent-green) 100%);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.research-stat-card:hover::before {
transform: scaleX(1);
}
.research-stat-card:hover {
transform: translateY(-8px);
box-shadow:
0 12px 40px rgba(26, 82, 163, 0.15),
0 6px 20px rgba(26, 82, 163, 0.1);
}
.research-stat-icon-wrapper {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
color: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
}
.research-stat-card:hover .research-stat-icon-wrapper {
transform: scale(1.1) rotate(5deg);
color: var(--color-accent-green);
}
.research-stat-number {
font-family: var(--font-heading);
font-size: 3rem;
font-weight: 800;
color: var(--color-primary);
line-height: 1;
margin-bottom: 0.5rem;
transition: all 0.4s ease;
}
.research-stat-card:hover .research-stat-number {
color: var(--color-accent-green);
transform: scale(1.05);
}
.research-stat-label {
font-family: var(--font-body);
font-size: 1.1rem;
font-weight: 600;
color: var(--color-text);
line-height: 1.4;
}
/* Publications Premium Section */
.research-publications-premium-section {
position: relative;
overflow: visible;
padding: 6rem 0;
background: var(--color-white);
}
.research-publications-premium-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(26, 82, 163, 0.04) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(60, 179, 113, 0.04) 0%, transparent 50%),
linear-gradient(135deg, rgba(26, 82, 163, 0.01) 0%, rgba(60, 179, 113, 0.01) 100%);
z-index: 0;
}
.research-publications-premium-title {
font-family: var(--font-heading);
font-size: 3rem;
font-weight: 700;
color: var(--color-text);
line-height: 1.2;
letter-spacing: -0.5px;
position: relative;
z-index: 1;
margin-bottom: 1rem;
}
.research-publications-premium-separator {
width: 100px;
height: 4px;
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent-green) 100%);
border-radius: 2px;
margin: 0 auto 2rem;
position: relative;
z-index: 1;
box-shadow: 0 2px 8px rgba(26, 82, 163, 0.3);
}
.research-publications-premium-description {
font-family: var(--font-body);
font-size: 1.15rem;
color: var(--color-text-light);
line-height: 1.8;
position: relative;
z-index: 1;
max-width: 800px;
margin: 0 auto;
}
/* Premium Publication Card */
.research-publication-premium-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 24px;
padding: 2.5rem;
box-shadow:
0 15px 50px rgba(26, 82, 163, 0.12),
0 8px 25px rgba(26, 82, 163, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
border: 2px solid rgba(255, 255, 255, 0.3);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transform-style: preserve-3d;
position: relative;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
will-change: transform;
}
.research-publication-premium-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(26, 82, 163, 0.05) 0%,
rgba(60, 179, 113, 0.05) 100%);
opacity: 0;
transition: opacity 0.6s ease;
z-index: 0;
}
.research-publication-premium-card:hover::before {
opacity: 1;
}
.research-publication-premium-card:hover {
transform: translateY(-15px) rotateX(3deg) scale(1.02);
box-shadow:
0 30px 80px rgba(26, 82, 163, 0.2),
0 15px 40px rgba(26, 82, 163, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
border-color: var(--color-primary);
}
.research-publication-premium-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, rgba(26, 82, 163, 0.1) 0%, rgba(60, 179, 113, 0.1) 100%);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
color: var(--color-primary);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
z-index: 1;
box-shadow: 0 8px 20px rgba(26, 82, 163, 0.15);
}
.research-publication-premium-card:hover .research-publication-premium-icon {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-green) 100%);
color: var(--color-white);
transform: scale(1.15) rotate(10deg);
box-shadow: 0 12px 30px rgba(26, 82, 163, 0.3);
}
.research-publication-premium-icon svg {
width: 40px;
height: 40px;
}
.research-publication-premium-badge {
position: absolute;
top: 2rem;
right: 2rem;
z-index: 2;
}
.research-publication-premium-year {
display: inline-block;
padding: 0.5rem 1.25rem;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
color: var(--color-white);
font-family: var(--font-heading);
font-size: 0.9rem;
font-weight: 700;
border-radius: 20px;
letter-spacing: 0.5px;
text-transform: uppercase;
box-shadow: 0 4px 15px rgba(26, 82, 163, 0.3);
transition: all 0.4s ease;
}
.research-publication-premium-card:hover .research-publication-premium-year {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(26, 82, 163, 0.4);
}
.research-publication-premium-content {
position: relative;
z-index: 1;
flex: 1;
display: flex;
flex-direction: column;
gap: 1rem;
}
.research-publication-premium-journal {
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 600;
color: var(--color-accent-green);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 0.5rem;
opacity: 0.9;
}
.research-publication-premium-title {
font-family: var(--font-heading);
font-size: 1.4rem;
font-weight: 700;
color: var(--color-text);
line-height: 1.4;
margin: 0 0 1rem 0;
transition: color 0.4s ease;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.research-publication-premium-card:hover .research-publication-premium-title {
color: var(--color-primary);
}
.research-publication-premium-authors {
font-family: var(--font-body);
font-size: 0.95rem;
color: var(--color-text-light);
line-height: 1.6;
margin: 0 0 1rem 0;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.research-publication-premium-meta {
margin-top: auto;
padding-top: 1.5rem;
border-top: 1px solid rgba(26, 82, 163, 0.1);
}
.research-publication-premium-meta-item {
display: flex;
align-items: center;
gap: 0.75rem;
font-family: var(--font-body);
font-size: 0.9rem;
color: var(--color-text-muted);
margin-bottom: 1.25rem;
}
.research-publication-premium-volume,
.research-publication-premium-pages {
font-weight: 500;
}
.research-publication-premium-separator {
color: var(--color-primary);
font-weight: bold;
opacity: 0.5;
}
.research-publication-premium-link {
display: inline-flex;
align-items: center;
gap: 0.75rem;
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 600;
color: var(--color-white);
text-decoration: none;
transition: all 0.4s ease;
padding: 1rem 2rem;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-green) 100%);
border-radius: 16px;
box-shadow: 0 6px 20px rgba(26, 82, 163, 0.3);
position: relative;
overflow: hidden;
}
.research-publication-premium-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s ease;
}
.research-publication-premium-link:hover::before {
left: 100%;
}
.research-publication-premium-link:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(26, 82, 163, 0.4);
}
.research-publication-premium-link svg {
transition: transform 0.4s ease;
flex-shrink: 0;
}
.research-publication-premium-link:hover svg {
transform: translateX(5px);
}
/* Card Variations with Different Background Gradients */
.research-publication-premium-card-1::after {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(26, 82, 163, 0.1) 0%, transparent 70%);
border-radius: 50%;
opacity: 0;
transition: opacity 0.6s ease;
z-index: 0;
}
.research-publication-premium-card-1:hover::after {
opacity: 1;
}
.research-publication-premium-card-2::after {
content: '';
position: absolute;
bottom: -30%;
left: -15%;
width: 180px;
height: 180px;
background: radial-gradient(circle, rgba(60, 179, 113, 0.1) 0%, transparent 70%);
border-radius: 50%;
opacity: 0;
transition: opacity 0.6s ease;
z-index: 0;
}
.research-publication-premium-card-2:hover::after {
opacity: 1;
}
.research-publication-premium-card-3::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: 150px;
background: radial-gradient(circle, rgba(26, 82, 163, 0.08) 0%, rgba(60, 179, 113, 0.08) 50%, transparent 70%);
border-radius: 50%;
opacity: 0;
transition: opacity 0.6s ease;
z-index: 0;
}
.research-publication-premium-card-3:hover::after {
opacity: 1;
}
/* ============================================
Training & Learning Page Styles
============================================ */
/* Hero Banner Section */
.training-hero-banner {
position: relative;
overflow: visible;
padding: 5rem 0 4rem;
background: linear-gradient(135deg, rgba(26, 82, 163, 0.08) 0%, rgba(60, 179, 113, 0.08) 100%);
min-height: 300px;
display: flex;
align-items: center;
}
.training-hero-banner-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(26, 82, 163, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(60, 179, 113, 0.1) 0%, transparent 50%);
z-index: 0;
}
.training-hero-banner-title {
font-family: var(--font-heading);
font-size: 3.5rem;
font-weight: 700;
color: var(--color-primary);
line-height: 1.2;
margin-bottom: 0.5rem;
letter-spacing: -0.5px;
position: relative;
z-index: 1;
}
/* Breadcrumbs */
.training-breadcrumbs {
position: relative;
z-index: 1;
}
.training-breadcrumbs .breadcrumb {
background: transparent;
padding: 0;
margin: 0;
}
.training-breadcrumbs .breadcrumb-item {
font-family: var(--font-body);
font-size: 1rem;
color: var(--color-primary);
}
.training-breadcrumbs .breadcrumb-item a {
color: var(--color-primary);
text-decoration: none;
opacity: 0.9;
transition: opacity var(--transition-base);
}
.training-breadcrumbs .breadcrumb-item a:hover {
opacity: 1;
}
.training-breadcrumbs .breadcrumb-item.active {
color: var(--color-primary-dark);
opacity: 0.85;
}
.training-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
content: ">";
color: var(--color-primary);
opacity: 0.7;
padding: 0 0.5rem;
}
/* Image Carousel Section */
.training-image-carousel {
position: relative;
overflow: visible;
padding: 4rem 0;
background: linear-gradient(135deg, rgba(26, 82, 163, 0.12) 0%, rgba(60, 179, 113, 0.12) 100%);
}
.training-image-carousel::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.25) 0%, transparent 70%);
pointer-events: none;
}
.training-image-carousel-wrapper {
position: relative;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow:
0 10px 40px rgba(26, 82, 163, 0.15),
0 5px 20px rgba(26, 82, 163, 0.1);
transition: all var(--transition-slow);
}
.training-image-carousel-wrapper:hover {
transform: translateY(-5px);
box-shadow:
0 15px 50px rgba(26, 82, 163, 0.2),
0 8px 25px rgba(26, 82, 163, 0.15);
}
.training-carousel-image {
width: 100%;
height: auto;
display: block;
transition: all var(--transition-slow);
}
.training-image-carousel-wrapper:hover .training-carousel-image {
transform: scale(1.02);
}
/* Education Section */
.training-education-section {
position: relative;
overflow: visible;
padding: 6rem 0;
background: linear-gradient(135deg, rgba(26, 82, 163, 0.08) 0%, rgba(60, 179, 113, 0.08) 100%);
}
.training-education-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 15% 25%, rgba(26, 82, 163, 0.18) 0%, transparent 55%),
radial-gradient(circle at 85% 75%, rgba(60, 179, 113, 0.18) 0%, transparent 55%),
linear-gradient(135deg, rgba(26, 82, 163, 0.06) 0%, rgba(60, 179, 113, 0.06) 100%);
z-index: 0;
}
.training-education-title {
font-family: var(--font-heading);
font-size: 3rem;
font-weight: 700;
color: var(--color-text);
line-height: 1.2;
letter-spacing: -0.5px;
position: relative;
z-index: 1;
margin-bottom: 1rem;
}
.training-education-separator {
width: 100px;
height: 4px;
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent-green) 100%);
border-radius: 2px;
margin: 0 auto 2rem;
position: relative;
z-index: 1;
box-shadow: 0 2px 8px rgba(26, 82, 163, 0.3);
}
/* Education Card */
.training-education-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 24px;
padding: 3rem 2.5rem;
box-shadow:
0 15px 50px rgba(26, 82, 163, 0.12),
0 8px 25px rgba(26, 82, 163, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
border: 2px solid rgba(255, 255, 255, 0.3);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transform-style: preserve-3d;
position: relative;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
will-change: transform;
}
.training-education-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(26, 82, 163, 0.05) 0%,
rgba(60, 179, 113, 0.05) 100%);
opacity: 0;
transition: opacity 0.6s ease;
z-index: 0;
}
.training-education-card:hover::before {
opacity: 1;
}
.training-education-card:hover {
transform: translateY(-15px) rotateX(3deg) scale(1.02);
box-shadow:
0 30px 80px rgba(26, 82, 163, 0.2),
0 15px 40px rgba(26, 82, 163, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
border-color: var(--color-primary);
}
.training-education-icon {
width: 100px;
height: 100px;
background: linear-gradient(135deg, rgba(26, 82, 163, 0.1) 0%, rgba(60, 179, 113, 0.1) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2rem;
color: var(--color-primary);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
z-index: 1;
box-shadow: 0 8px 20px rgba(26, 82, 163, 0.15);
}
.training-education-card:hover .training-education-icon {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-green) 100%);
color: var(--color-white);
transform: scale(1.15) rotate(10deg);
box-shadow: 0 12px 30px rgba(26, 82, 163, 0.3);
}
.training-education-icon svg {
width: 50px;
height: 50px;
}
.training-education-degree {
font-family: var(--font-heading);
font-size: 1.75rem;
font-weight: 700;
color: var(--color-primary);
line-height: 1.3;
margin-bottom: 1.5rem;
transition: color 0.4s ease;
position: relative;
z-index: 1;
}
.training-education-card:hover .training-education-degree {
color: var(--color-primary-dark);
transform: scale(1.05);
}
.training-education-institution {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
font-family: var(--font-body);
font-size: 1.1rem;
font-weight: 600;
color: var(--color-text);
line-height: 1.6;
margin-bottom: 1.25rem;
position: relative;
z-index: 1;
}
.training-education-institution svg {
flex-shrink: 0;
color: var(--color-accent-green);
opacity: 0.8;
}
.training-education-year {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 500;
color: var(--color-text-muted);
position: relative;
z-index: 1;
padding: 0.5rem 1.25rem;
background: rgba(26, 82, 163, 0.05);
border-radius: 20px;
}
.training-education-year svg {
flex-shrink: 0;
color: var(--color-primary);
opacity: 0.7;
}
/* Card Variations with Different Background Gradients */
.training-education-card-1::after {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(26, 82, 163, 0.1) 0%, transparent 70%);
border-radius: 50%;
opacity: 0;
transition: opacity 0.6s ease;
z-index: 0;
}
.training-education-card-1:hover::after {
opacity: 1;
}
.training-education-card-2::after {
content: '';
position: absolute;
bottom: -30%;
left: -15%;
width: 180px;
height: 180px;
background: radial-gradient(circle, rgba(60, 179, 113, 0.1) 0%, transparent 70%);
border-radius: 50%;
opacity: 0;
transition: opacity 0.6s ease;
z-index: 0;
}
.training-education-card-2:hover::after {
opacity: 1;
}
.training-education-card-3::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: 150px;
background: radial-gradient(circle, rgba(26, 82, 163, 0.08) 0%, rgba(60, 179, 113, 0.08) 50%, transparent 70%);
border-radius: 50%;
opacity: 0;
transition: opacity 0.6s ease;
z-index: 0;
}
.training-education-card-3:hover::after {
opacity: 1;
}
/* Responsive Design for Training & Learning Page */
@media (max-width: 991px) {
.training-hero-banner-title {
font-size: 2.5rem;
}
.training-education-title {
font-size: 2rem;
}
.training-education-card {
padding: 2.5rem 2rem;
}
.training-education-icon {
width: 90px;
height: 90px;
margin-bottom: 1.5rem;
}
.training-education-icon svg {
width: 45px;
height: 45px;
}
.training-education-degree {
font-size: 1.5rem;
}
}
@media (max-width: 767px) {
.training-hero-banner {
padding: 2rem 0;
min-height: auto;
}
.training-hero-banner-title {
font-size: 2rem;
}
.training-breadcrumbs .breadcrumb-item {
font-size: 0.9rem;
}
.training-image-carousel {
padding: 3rem 0;
}
.training-education-section {
padding: 3rem 0;
}
.training-education-title {
font-size: 1.75rem;
}
.training-education-card {
padding: 2rem 1.75rem;
}
.training-education-icon {
width: 80px;
height: 80px;
margin-bottom: 1.25rem;
}
.training-education-icon svg {
width: 40px;
height: 40px;
}
.training-education-degree {
font-size: 1.35rem;
}
.training-education-institution {
font-size: 1rem;
}
.training-education-year {
font-size: 0.85rem;
padding: 0.4rem 1rem;
}
}
/* ============================================
About Doctor Page Styles
============================================ */
/* Hero Section */
.about-doctor-hero {
position: relative;
overflow: visible;
padding: 4rem 0;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
min-height: 250px;
display: flex;
align-items: center;
}
.about-doctor-hero-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
z-index: 0;
}
.about-doctor-hero-title {
font-family: var(--font-heading);
font-size: 3.5rem;
font-weight: 700;
color: var(--color-white);
line-height: 1.2;
letter-spacing: -0.5px;
position: relative;
z-index: 1;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
/* Main Content Section */
.about-doctor-main {
position: relative;
overflow: visible;
padding: 6rem 0;
background: var(--color-white);
}
.about-doctor-main-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(26, 82, 163, 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(60, 179, 113, 0.03) 0%, transparent 50%);
z-index: 0;
}
.about-doctor-main-images {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.about-doctor-main-image-primary {
grid-column: 1 / -1;
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 10px 40px rgba(26, 82, 163, 0.15);
}
.about-doctor-main-image-secondary {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 8px 30px rgba(26, 82, 163, 0.12);
}
.about-doctor-image {
width: 100%;
height: auto;
display: block;
transition: transform var(--transition-slow);
}
.about-doctor-main-image-primary:hover .about-doctor-image,
.about-doctor-main-image-secondary:hover .about-doctor-image {
transform: scale(1.05);
}
.about-doctor-image-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(180deg, transparent 0%, rgba(26, 82, 163, 0.9) 100%);
padding: 2rem;
z-index: 1;
}
.about-doctor-consult-btn {
display: inline-block;
padding: 0.75rem 2rem;
background: var(--color-white);
color: var(--color-primary);
font-family: var(--font-heading);
font-size: 0.95rem;
font-weight: 600;
text-decoration: none;
border-radius: var(--radius-md);
transition: all var(--transition-base);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.about-doctor-consult-btn:hover {
background: var(--color-accent-green);
color: var(--color-white);
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.about-doctor-main-heading {
font-family: var(--font-heading);
font-size: 2.5rem;
font-weight: 700;
color: var(--color-text);
line-height: 1.3;
letter-spacing: -0.5px;
position: relative;
z-index: 1;
}
.about-doctor-main-description {
font-family: var(--font-body);
font-size: 1.1rem;
color: var(--color-text-light);
line-height: 1.8;
position: relative;
z-index: 1;
}
.about-doctor-features {
position: relative;
z-index: 1;
}
.about-doctor-feature-item {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1rem;
font-family: var(--font-body);
font-size: 1rem;
color: var(--color-text);
line-height: 1.6;
}
.about-doctor-feature-item svg {
flex-shrink: 0;
margin-top: 2px;
color: var(--color-primary);
width: 24px;
height: 24px;
}
.about-doctor-sub-heading {
font-family: var(--font-heading);
font-size: 2rem;
font-weight: 700;
color: var(--color-primary);
line-height: 1.3;
position: relative;
z-index: 1;
margin-top: 2rem;
}
.about-doctor-solutions {
position: relative;
z-index: 1;
}
.about-doctor-solution-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 0.75rem;
font-family: var(--font-body);
font-size: 0.95rem;
color: var(--color-text-light);
line-height: 1.6;
}
.about-doctor-solution-item svg {
flex-shrink: 0;
margin-top: 3px;
color: var(--color-accent-green);
width: 20px;
height: 20px;
}
/* The Team Section */
.about-doctor-team {
position: relative;
overflow: visible;
padding: 6rem 0;
background: var(--color-light-bg);
}
.about-doctor-team-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
linear-gradient(135deg, rgba(26, 82, 163, 0.02) 0%, rgba(60, 179, 113, 0.02) 100%);
z-index: 0;
}
.about-doctor-team-title {
font-family: var(--font-heading);
font-size: 2.75rem;
font-weight: 700;
color: var(--color-text);
line-height: 1.2;
letter-spacing: -0.5px;
position: relative;
z-index: 1;
}
.about-doctor-team-description {
font-family: var(--font-body);
font-size: 1.1rem;
color: var(--color-text-light);
line-height: 1.8;
position: relative;
z-index: 1;
}
.about-doctor-card {
background: var(--color-white);
border-radius: var(--radius-lg);
padding: 2rem;
box-shadow:
0 15px 50px rgba(26, 82, 163, 0.12),
0 8px 25px rgba(26, 82, 163, 0.08);
transition: all var(--transition-base);
position: relative;
overflow: hidden;
}
.about-doctor-card:hover {
transform: translateY(-8px);
box-shadow:
0 25px 60px rgba(26, 82, 163, 0.18),
0 12px 30px rgba(26, 82, 163, 0.12);
}
.about-doctor-card-image {
margin-bottom: 1.5rem;
border-radius: var(--radius-md);
overflow: hidden;
}
.about-doctor-photo {
width: 100%;
height: auto;
display: block;
transition: transform var(--transition-slow);
}
.about-doctor-card:hover .about-doctor-photo {
transform: scale(1.05);
}
.about-doctor-name {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 700;
color: var(--color-primary);
line-height: 1.3;
margin-bottom: 0.5rem;
text-align: center;
}
.about-doctor-qualification {
font-family: var(--font-body);
font-size: 1rem;
color: var(--color-text-light);
line-height: 1.6;
text-align: center;
}
/* Our Hospitals Section */
.about-doctor-hospitals {
position: relative;
overflow: visible;
padding: 6rem 0;
background: linear-gradient(135deg, rgba(26, 82, 163, 0.03) 0%, rgba(60, 179, 113, 0.03) 100%);
}
.about-doctor-hospitals-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(26, 82, 163, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(60, 179, 113, 0.05) 0%, transparent 50%);
z-index: 0;
}
.about-doctor-hospitals-title {
font-family: var(--font-heading);
font-size: 3rem;
font-weight: 700;
color: var(--color-text);
line-height: 1.2;
letter-spacing: -0.5px;
position: relative;
z-index: 1;
}
.about-doctor-hospitals-separator {
width: 100px;
height: 4px;
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent-green) 100%);
border-radius: 2px;
margin: 0 auto 2rem;
position: relative;
z-index: 1;
box-shadow: 0 2px 8px rgba(26, 82, 163, 0.3);
}
.about-doctor-hospital-card {
background: var(--color-white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow:
0 15px 50px rgba(26, 82, 163, 0.12),
0 8px 25px rgba(26, 82, 163, 0.08);
transition: all var(--transition-base);
position: relative;
overflow: hidden;
}
.about-doctor-hospital-card:hover {
transform: translateY(-10px);
box-shadow:
0 25px 60px rgba(26, 82, 163, 0.18),
0 12px 30px rgba(26, 82, 163, 0.12);
}
.about-doctor-hospital-image {
position: relative;
overflow: hidden;
height: 250px;
}
.about-doctor-hospital-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.about-doctor-hospital-card:hover .about-doctor-hospital-img {
transform: scale(1.1);
}
.about-doctor-hospital-content {
padding: 2rem;
text-align: center;
}
.about-doctor-hospital-name {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 700;
color: var(--color-primary);
line-height: 1.3;
margin-bottom: 0.75rem;
}
.about-doctor-hospital-location {
font-family: var(--font-body);
font-size: 1rem;
color: var(--color-text-light);
line-height: 1.6;
margin-bottom: 0.5rem;
}
.about-doctor-hospital-beds {
font-family: var(--font-body);
font-size: 0.95rem;
color: var(--color-text-muted);
font-weight: 600;
}
/* Gastro Care Excellence Section */
.about-doctor-excellence {
position: relative;
overflow: visible;
padding: 6rem 0;
background: var(--color-white);
}
.about-doctor-excellence-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(26, 82, 163, 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(60, 179, 113, 0.03) 0%, transparent 50%);
z-index: 0;
}
.about-doctor-excellence-title {
font-family: var(--font-heading);
font-size: 2.75rem;
font-weight: 700;
color: var(--color-text);
line-height: 1.2;
letter-spacing: -0.5px;
position: relative;
z-index: 1;
}
.about-doctor-excellence-description {
font-family: var(--font-body);
font-size: 1.1rem;
color: var(--color-text-light);
line-height: 1.8;
position: relative;
z-index: 1;
}
.about-doctor-excellence-features {
position: relative;
z-index: 1;
}
.about-doctor-excellence-feature-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 0.75rem;
font-family: var(--font-body);
font-size: 1rem;
color: var(--color-text);
line-height: 1.6;
}
.about-doctor-excellence-feature-item svg {
flex-shrink: 0;
margin-top: 3px;
color: var(--color-accent-green);
width: 20px;
height: 20px;
}
.about-doctor-excellence-btn {
display: inline-block;
padding: 1rem 2.5rem;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-green) 100%);
color: var(--color-white);
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 600;
text-decoration: none;
border-radius: var(--radius-md);
transition: all var(--transition-base);
box-shadow: 0 6px 20px rgba(26, 82, 163, 0.3);
position: relative;
z-index: 1;
margin-top: 1.5rem;
}
.about-doctor-excellence-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(26, 82, 163, 0.4);
}
.about-doctor-stat-card {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
border-radius: var(--radius-lg);
padding: 2.5rem 2rem;
text-align: center;
box-shadow:
0 15px 50px rgba(26, 82, 163, 0.15),
0 8px 25px rgba(26, 82, 163, 0.1);
transition: all var(--transition-base);
position: relative;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.about-doctor-stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(60, 179, 113, 0.1) 0%, rgba(26, 82, 163, 0.1) 100%);
opacity: 0;
transition: opacity var(--transition-base);
}
.about-doctor-stat-card:hover::before {
opacity: 1;
}
.about-doctor-stat-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow:
0 25px 60px rgba(26, 82, 163, 0.2),
0 12px 30px rgba(26, 82, 163, 0.15);
background: linear-gradient(135deg, var(--color-accent-green) 0%, var(--color-primary) 100%);
}
.about-doctor-stat-icon {
color: var(--color-white);
margin-bottom: 1rem;
opacity: 0.9;
transition: all var(--transition-base);
position: relative;
z-index: 1;
}
.about-doctor-stat-card:hover .about-doctor-stat-icon {
transform: scale(1.1) rotate(5deg);
opacity: 1;
}
.about-doctor-stat-number {
font-family: var(--font-heading);
font-size: 2.5rem;
font-weight: 800;
color: var(--color-white);
line-height: 1;
margin-bottom: 0.5rem;
position: relative;
z-index: 1;
}
.about-doctor-stat-label {
font-family: var(--font-body);
font-size: 1rem;
font-weight: 600;
color: var(--color-white);
line-height: 1.4;
opacity: 0.95;
position: relative;
z-index: 1;
}
/* Awards Section */
.about-doctor-awards {
position: relative;
overflow: visible;
padding: 6rem 0;
background: var(--color-light-bg);
}
.about-doctor-awards-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
linear-gradient(135deg, rgba(26, 82, 163, 0.02) 0%, rgba(60, 179, 113, 0.02) 100%);
z-index: 0;
}
.about-doctor-awards-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
position: relative;
z-index: 1;
}
.about-doctor-award-item {
background: var(--color-white);
border-radius: var(--radius-lg);
padding: 1.5rem;
box-shadow:
0 10px 40px rgba(26, 82, 163, 0.12),
0 5px 20px rgba(26, 82, 163, 0.08);
transition: all var(--transition-base);
overflow: hidden;
}
.about-doctor-award-item:hover {
transform: translateY(-8px);
box-shadow:
0 20px 50px rgba(26, 82, 163, 0.18),
0 10px 30px rgba(26, 82, 163, 0.12);
}
.about-doctor-award-image {
width: 100%;
height: auto;
display: block;
border-radius: var(--radius-md);
transition: transform var(--transition-slow);
}
.about-doctor-award-item:hover .about-doctor-award-image {
transform: scale(1.05);
}
.about-doctor-awards-btn {
display: inline-block;
padding: 1rem 2.5rem;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-green) 100%);
color: var(--color-white);
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 600;
text-decoration: none;
border-radius: var(--radius-md);
transition: all var(--transition-base);
box-shadow: 0 6px 20px rgba(26, 82, 163, 0.3);
position: relative;
z-index: 1;
}
.about-doctor-awards-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(26, 82, 163, 0.4);
}
/* A Passionate Educator Section */
.about-doctor-educator {
position: relative;
overflow: visible;
padding: 6rem 0;
background: var(--color-white);
}
.about-doctor-educator-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(26, 82, 163, 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(60, 179, 113, 0.03) 0%, transparent 50%);
z-index: 0;
}
.about-doctor-educator-image-wrapper {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow:
0 15px 50px rgba(26, 82, 163, 0.15),
0 8px 25px rgba(26, 82, 163, 0.1);
transition: all var(--transition-base);
}
.about-doctor-educator-image-wrapper:hover {
transform: translateY(-8px);
box-shadow:
0 25px 60px rgba(26, 82, 163, 0.2),
0 12px 30px rgba(26, 82, 163, 0.15);
}
.about-doctor-educator-image {
width: 100%;
height: auto;
display: block;
transition: transform var(--transition-slow);
}
.about-doctor-educator-image-wrapper:hover .about-doctor-educator-image {
transform: scale(1.05);
}
.about-doctor-educator-title {
font-family: var(--font-heading);
font-size: 2.75rem;
font-weight: 700;
color: var(--color-text);
line-height: 1.2;
letter-spacing: -0.5px;
position: relative;
z-index: 1;
margin-bottom: 1.5rem;
}
.about-doctor-educator-description {
font-family: var(--font-body);
font-size: 1.1rem;
color: var(--color-text-light);
line-height: 1.8;
position: relative;
z-index: 1;
}
/* Happy Healing Story Section */
.about-doctor-testimonials {
position: relative;
overflow: visible;
padding: 6rem 0;
background: var(--color-light-bg);
}
.about-doctor-testimonials-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(26, 82, 163, 0.04) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(60, 179, 113, 0.04) 0%, transparent 50%);
z-index: 0;
}
.about-doctor-testimonials-title {
font-family: var(--font-heading);
font-size: 2.75rem;
font-weight: 700;
color: var(--color-text);
line-height: 1.2;
letter-spacing: -0.5px;
position: relative;
z-index: 1;
margin-bottom: 1.5rem;
}
.about-doctor-testimonials-description {
font-family: var(--font-body);
font-size: 1.1rem;
color: var(--color-text-light);
line-height: 1.8;
position: relative;
z-index: 1;
margin-bottom: 2rem;
}
.about-doctor-testimonials-btn {
display: inline-block;
padding: 1rem 2.5rem;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-green) 100%);
color: var(--color-white);
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 600;
text-decoration: none;
border-radius: var(--radius-md);
transition: all var(--transition-base);
box-shadow: 0 6px 20px rgba(26, 82, 163, 0.3);
position: relative;
z-index: 1;
}
.about-doctor-testimonials-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(26, 82, 163, 0.4);
}
.about-doctor-testimonials-list {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 2rem;
}
.about-doctor-testimonial-item {
background: var(--color-white);
border-radius: var(--radius-lg);
padding: 2.5rem;
box-shadow:
0 10px 40px rgba(26, 82, 163, 0.12),
0 5px 20px rgba(26, 82, 163, 0.08);
transition: all var(--transition-base);
position: relative;
overflow: hidden;
border-left: 4px solid var(--color-primary);
}
.about-doctor-testimonial-item:hover {
transform: translateX(8px);
box-shadow:
0 15px 50px rgba(26, 82, 163, 0.15),
0 8px 25px rgba(26, 82, 163, 0.1);
border-left-color: var(--color-accent-green);
}
.about-doctor-testimonial-quote {
font-family: var(--font-body);
font-size: 1.1rem;
color: var(--color-text);
line-height: 1.8;
margin-bottom: 1.5rem;
font-style: italic;
position: relative;
}
.about-doctor-testimonial-quote::before {
content: '"';
position: absolute;
top: -10px;
left: -20px;
font-size: 4rem;
color: var(--color-primary);
opacity: 0.2;
font-family: Georgia, serif;
line-height: 1;
}
.about-doctor-testimonial-meta {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.about-doctor-testimonial-name {
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 600;
color: var(--color-primary);
}
.about-doctor-testimonial-condition {
font-family: var(--font-body);
font-size: 0.9rem;
color: var(--color-text-muted);
}
/* CTA Section */
.about-doctor-cta {
position: relative;
overflow: visible;
padding: 6rem 0;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}
.about-doctor-cta-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
z-index: 0;
}
.about-doctor-cta-title {
font-family: var(--font-heading);
font-size: 3rem;
font-weight: 700;
color: var(--color-white);
line-height: 1.2;
letter-spacing: -0.5px;
position: relative;
z-index: 1;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.about-doctor-cta-btn {
display: inline-block;
padding: 1.25rem 3rem;
background: var(--color-white);
color: var(--color-primary);
font-family: var(--font-heading);
font-size: 1.2rem;
font-weight: 700;
text-decoration: none;
border-radius: var(--radius-md);
transition: all var(--transition-base);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 1;
text-transform: uppercase;
letter-spacing: 1px;
}
.about-doctor-cta-btn:hover {
background: var(--color-accent-green);
color: var(--color-white);
transform: translateY(-5px);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
}
/* Responsive Design for About Doctor Page */
@media (max-width: 991px) {
.about-doctor-hero-title {
font-size: 2.5rem;
}
.about-doctor-main-heading {
font-size: 2rem;
}
.about-doctor-team-title,
.about-doctor-hospitals-title,
.about-doctor-excellence-title,
.about-doctor-educator-title,
.about-doctor-testimonials-title {
font-size: 2.25rem;
}
.about-doctor-main-images {
grid-template-columns: 1fr;
margin-bottom: 2rem;
}
.about-doctor-stat-card {
padding: 2rem 1.5rem;
}
.about-doctor-stat-number {
font-size: 2rem;
}
}
@media (max-width: 767px) {
.about-doctor-hero {
padding: 3rem 0;
min-height: auto;
}
.about-doctor-hero-title {
font-size: 2rem;
}
.about-doctor-main,
.about-doctor-team,
.about-doctor-hospitals,
.about-doctor-excellence,
.about-doctor-awards,
.about-doctor-educator,
.about-doctor-testimonials,
.about-doctor-cta {
padding: 4rem 0;
}
.about-doctor-main-heading {
font-size: 1.75rem;
}
.about-doctor-sub-heading {
font-size: 1.5rem;
}
.about-doctor-team-title,
.about-doctor-hospitals-title,
.about-doctor-excellence-title,
.about-doctor-educator-title,
.about-doctor-testimonials-title {
font-size: 1.75rem;
}
.about-doctor-cta-title {
font-size: 2rem;
}
.about-doctor-cta-btn {
font-size: 1rem;
padding: 1rem 2rem;
}
.about-doctor-awards-gallery {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1.5rem;
}
.about-doctor-stat-number {
font-size: 1.75rem;
}
.about-doctor-stat-label {
font-size: 0.9rem;
}
}
/* Call to Action Section */
.research-cta-section {
position: relative;
overflow: visible;
padding: 6rem 0;
background: var(--color-white);
}
.research-cta-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
linear-gradient(135deg, rgba(26, 82, 163, 0.05) 0%, rgba(60, 179, 113, 0.05) 100%),
radial-gradient(circle at 50% 50%, rgba(26, 82, 163, 0.08) 0%, transparent 70%);
z-index: 0;
}
.research-cta-card {
background: var(--color-white);
border-radius: var(--radius-xl);
padding: 4rem 3rem;
box-shadow:
0 8px 30px rgba(26, 82, 163, 0.12),
0 4px 15px rgba(26, 82, 163, 0.08);
position: relative;
z-index: 1;
transition: all var(--transition-base);
}
.research-cta-card:hover {
transform: translateY(-5px);
box-shadow:
0 12px 40px rgba(26, 82, 163, 0.15),
0 6px 20px rgba(26, 82, 163, 0.1);
}
.research-cta-title {
font-family: var(--font-heading);
font-size: 2.5rem;
font-weight: 700;
color: var(--color-primary);
line-height: 1.3;
margin-bottom: 1rem;
}
.research-cta-description {
font-family: var(--font-body);
font-size: 1.1rem;
color: var(--color-text-light);
line-height: 1.8;
}
.research-cta-button {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1.2rem 3rem;
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 700;
color: var(--color-white);
background: var(--color-gradient-a);
border: none;
border-radius: var(--radius-xl);
cursor: pointer;
text-decoration: none;
transition: all var(--transition-slow);
box-shadow:
0 10px 30px rgba(26, 82, 163, 0.4),
0 5px 15px rgba(26, 82, 163, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
position: relative;
overflow: hidden;
transform-style: preserve-3d;
text-transform: uppercase;
letter-spacing: 1px;
}
.research-cta-button::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 var(--transition-slow);
z-index: 1;
}
.research-cta-button:hover::before {
left: 100%;
}
.research-cta-button:hover {
background: linear-gradient(135deg, var(--color-accent-green) 0%, rgba(60, 179, 113, 0.8) 100%);
transform: translateY(-5px) scale(1.05);
box-shadow:
0 15px 40px rgba(60, 179, 113, 0.5),
0 8px 20px rgba(60, 179, 113, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.research-cta-button-icon {
display: inline-flex;
align-items: center;
transition: transform var(--transition-base);
z-index: 2;
position: relative;
}
.research-cta-button:hover .research-cta-button-icon {
transform: translateX(5px);
}
.research-cta-button-text {
z-index: 2;
position: relative;
}
/* Responsive Design for Research & Publications Page */
@media (max-width: 991px) {
.research-hero-banner-title {
font-size: 2.5rem;
}
.research-thesis-section-title,
.research-publications-premium-title {
font-size: 2rem;
}
.research-thesis-item {
padding: 1.5rem;
padding-left: 2.5rem;
}
.research-publication-premium-card {
padding: 2rem;
}
.research-publication-premium-icon {
width: 70px;
height: 70px;
margin-bottom: 1.25rem;
}
.research-publication-premium-icon svg {
width: 35px;
height: 35px;
}
}
@media (max-width: 767px) {
.research-hero-banner {
padding: 2rem 0;
min-height: auto;
}
.research-hero-banner-title {
font-size: 2rem;
}
.research-breadcrumbs .breadcrumb-item {
font-size: 0.9rem;
}
.research-image-carousel {
padding: 3rem 0;
}
.research-thesis-section,
.research-publications-premium-section {
padding: 3rem 0;
}
.research-thesis-section-title,
.research-publications-premium-title {
font-size: 1.75rem;
}
.research-thesis-item {
padding: 1.25rem;
padding-left: 2rem;
}
.research-thesis-title {
font-size: 1rem;
}
.research-thesis-meta {
font-size: 0.9rem;
}
.research-publication-premium-card {
padding: 1.75rem;
}
.research-publication-premium-icon {
width: 60px;
height: 60px;
margin-bottom: 1rem;
}
.research-publication-premium-icon svg {
width: 30px;
height: 30px;
}
.research-publication-premium-title {
font-size: 1.2rem;
}
.research-publication-premium-authors {
font-size: 0.85rem;
}
.research-publication-premium-link {
font-size: 0.9rem;
padding: 0.85rem 1.5rem;
width: 100%;
justify-content: center;
}
}
/* ============================================
Services Page Styles
============================================ */
/* Hero Section */
.services-hero-section {
position: relative;
padding: 5rem 0 4rem;
background: linear-gradient(135deg, rgba(26, 82, 163, 0.05) 0%, rgba(60, 179, 113, 0.05) 100%);
min-height: 300px;
display: flex;
align-items: center;
}
.services-hero-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(26, 82, 163, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(60, 179, 113, 0.08) 0%, transparent 50%);
z-index: 0;
}
.services-breadcrumb {
font-size: 0.95rem;
color: var(--color-text-light);
font-weight: 500;
position: relative;
z-index: 1;
}
.services-hero-title {
font-family: var(--font-heading);
font-size: 4rem;
font-weight: 700;
color: var(--color-primary);
line-height: 1.2;
letter-spacing: -1px;
position: relative;
z-index: 1;
}
/* Departments Section */
.services-departments-section {
padding: 6rem 0;
background: var(--color-white);
}
.services-section-subtitle {
font-size: 1rem;
font-weight: 600;
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 0.5rem;
}
.services-section-title {
font-family: var(--font-heading);
font-size: 2.75rem;
font-weight: 700;
color: var(--color-primary);
line-height: 1.2;
margin-bottom: 3rem;
}
.services-department-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2.5rem 1.5rem;
background: linear-gradient(135deg, rgba(26, 82, 163, 0.05) 0%, rgba(26, 82, 163, 0.1) 100%);
border-radius: var(--radius-lg);
text-decoration: none;
transition: all var(--transition-base);
box-shadow: 0 4px 15px rgba(26, 82, 163, 0.1);
height: 100%;
min-height: 200px;
position: relative;
overflow: hidden;
}
.services-department-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-green) 100%);
opacity: 0;
transition: opacity var(--transition-base);
z-index: 0;
}
.services-department-card:hover {
transform: translateY(-8px);
box-shadow: 0 8px 30px rgba(26, 82, 163, 0.25);
}
.services-department-card:hover::before {
opacity: 0.1;
}
.services-department-icon {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
color: var(--color-primary);
position: relative;
z-index: 1;
transition: all var(--transition-base);
}
.services-department-card:hover .services-department-icon {
color: var(--color-primary-dark);
transform: scale(1.1);
}
.services-department-icon svg {
width: 100%;
height: 100%;
}
.services-department-name {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 600;
color: var(--color-primary);
text-align: center;
margin: 0;
position: relative;
z-index: 1;
transition: color var(--transition-base);
}
.services-department-card:hover .services-department-name {
color: var(--color-primary-dark);
}
/* Hospitals Section */
.services-hospitals-section {
padding: 6rem 0;
background: var(--color-light-bg);
position: relative;
}
.services-hospitals-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 10% 20%, rgba(26, 82, 163, 0.05) 0%, transparent 50%),
radial-gradient(circle at 90% 80%, rgba(60, 179, 113, 0.05) 0%, transparent 50%);
z-index: 0;
}
.services-hospital-card {
background: var(--color-white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transition: all var(--transition-base);
height: 100%;
display: flex;
flex-direction: column;
}
.services-hospital-card:hover {
transform: translateY(-8px);
box-shadow: 0 8px 35px rgba(26, 82, 163, 0.2);
}
.services-hospital-image {
position: relative;
width: 100%;
height: 250px;
overflow: hidden;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-green) 100%);
}
.services-hospital-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.services-hospital-card:hover .services-hospital-img {
transform: scale(1.1);
}
.services-hospital-content {
padding: 2rem;
flex: 1;
display: flex;
flex-direction: column;
}
.services-hospital-name {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1rem;
line-height: 1.3;
}
.services-hospital-location {
font-size: 1rem;
color: var(--color-text-light);
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0;
}
.services-hospital-location svg {
width: 16px;
height: 16px;
color: var(--color-primary);
flex-shrink: 0;
}
/* Testimonials Section */
.services-testimonials-section {
padding: 6rem 0;
background: var(--color-white);
}
.services-testimonials-description {
font-size: 1.125rem;
line-height: 1.8;
color: var(--color-text);
margin-bottom: 2rem;
}
.services-testimonials-description p {
margin-bottom: 1rem;
}
.services-testimonials-btn {
display: inline-block;
padding: 1rem 2.5rem;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
color: var(--color-white);
font-weight: 600;
font-size: 1.1rem;
border-radius: var(--radius-md);
text-decoration: none;
transition: all var(--transition-base);
box-shadow: 0 4px 15px rgba(26, 82, 163, 0.3);
}
.services-testimonials-btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(26, 82, 163, 0.4);
background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
color: var(--color-white);
}
.services-testimonials-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
.services-testimonial-card {
background: var(--color-white);
padding: 2rem;
border-radius: var(--radius-lg);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all var(--transition-base);
border-left: 4px solid var(--color-primary);
}
.services-testimonial-card:hover {
transform: translateX(8px);
box-shadow: 0 6px 30px rgba(26, 82, 163, 0.15);
}
.services-testimonial-quote {
font-size: 1rem;
line-height: 1.8;
color: var(--color-text);
margin-bottom: 1.5rem;
font-style: italic;
}
.services-testimonial-name {
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 600;
color: var(--color-primary);
margin: 0;
}
/* Appointment Section */
.services-appointment-section {
padding: 6rem 0;
background: linear-gradient(135deg, rgba(26, 82, 163, 0.05) 0%, rgba(60, 179, 113, 0.05) 100%);
position: relative;
}
.services-appointment-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 30% 40%, rgba(26, 82, 163, 0.08) 0%, transparent 60%),
radial-gradient(circle at 70% 60%, rgba(60, 179, 113, 0.08) 0%, transparent 60%);
z-index: 0;
}
.services-appointment-form-wrapper {
background: var(--color-white);
padding: 3rem;
border-radius: var(--radius-xl);
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 1;
}
/* Services Appointment Form 7 Styling */
.services-appointment-form-wrapper .wpcf7-form {
position: relative;
display: block;
width: 100%;
margin: 0;
padding: 0;
}
.services-appointment-form-wrapper .wpcf7-form::after {
content: '';
display: table;
clear: both;
}
.services-appointment-form-wrapper .wpcf7-form > p {
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
display: block;
position: relative;
}
.services-appointment-form-wrapper .wpcf7-form > p::after {
content: '';
display: table;
clear: both;
}
.services-appointment-form-wrapper .wpcf7-form-control-wrap {
position: relative;
margin-bottom: 1.5rem;
display: block;
width: 100%;
box-sizing: border-box;
}
/* Name and Email fields - side by side */
.services-appointment-form-wrapper .wpcf7-form-control-wrap[data-name="your-name"],
.services-appointment-form-wrapper .wpcf7-form-control-wrap[data-name="your-email"] {
width: calc(50% - 0.75rem) !important;
max-width: calc(50% - 0.75rem) !important;
display: block !important;
margin-bottom: 1.5rem;
float: left;
}
.services-appointment-form-wrapper .wpcf7-form-control-wrap[data-name="your-name"] {
margin-right: 1.5rem !important;
}
.services-appointment-form-wrapper .wpcf7-form-control-wrap[data-name="your-email"] {
margin-right: 0 !important;
}
/* Subject field - full width */
.services-appointment-form-wrapper .wpcf7-form-control-wrap[data-name="your-subject"] {
width: 100% !important;
max-width: 100% !important;
display: block !important;
clear: both;
margin-bottom: 1.5rem;
}
/* Message textarea - full width */
.services-appointment-form-wrapper .wpcf7-form-control-wrap[data-name="your-message"] {
width: 100% !important;
max-width: 100% !important;
display: block !important;
clear: both;
margin-bottom: 1.5rem;
}
/* Clear float after message field */
.services-appointment-form-wrapper .wpcf7-form > p br {
display: none;
}
/* Form Inputs Styling */
.services-appointment-form-wrapper .wpcf7-form-control {
width: 100% !important;
padding: 1rem 1.25rem;
font-size: 1rem;
font-family: var(--font-body);
color: var(--color-text);
background: var(--color-white);
border: 2px solid rgba(26, 82, 163, 0.15);
border-radius: 12px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 2px 8px rgba(26, 82, 163, 0.08),
inset 0 1px 2px rgba(255, 255, 255, 0.8);
outline: none;
position: relative;
z-index: 1;
box-sizing: border-box;
display: block;
}
.services-appointment-form-wrapper .wpcf7-form-control:focus {
border-color: var(--color-primary);
box-shadow:
0 4px 16px rgba(26, 82, 163, 0.15),
0 0 0 4px rgba(26, 82, 163, 0.1),
inset 0 1px 2px rgba(255, 255, 255, 0.9);
transform: translateY(-2px);
background: var(--color-white);
}
.services-appointment-form-wrapper .wpcf7-form-control:hover {
border-color: rgba(26, 82, 163, 0.3);
box-shadow:
0 3px 12px rgba(26, 82, 163, 0.12),
inset 0 1px 2px rgba(255, 255, 255, 0.85);
}
.services-appointment-form-wrapper .wpcf7-textarea {
min-height: 140px;
resize: vertical;
font-family: var(--font-body);
line-height: 1.6;
}
.services-appointment-form-wrapper .wpcf7-form-control::placeholder {
color: var(--color-text-muted);
opacity: 0.6;
font-style: italic;
}
/* Submit Button */
.services-appointment-form-wrapper .wpcf7-submit {
width: 100% !important;
padding: 1.1rem 2.5rem;
font-size: 1.1rem;
font-weight: 700;
font-family: var(--font-heading);
color: var(--color-white);
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
border: none;
border-radius: 12px;
cursor: pointer;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 8px 25px rgba(26, 82, 163, 0.3),
0 4px 12px rgba(26, 82, 163, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
text-transform: uppercase;
letter-spacing: 0.5px;
position: relative;
overflow: hidden;
transform-style: preserve-3d;
box-sizing: border-box;
display: block;
margin-top: 0.5rem;
clear: both;
}
.services-appointment-form-wrapper .wpcf7-submit::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s ease;
z-index: 1;
}
.services-appointment-form-wrapper .wpcf7-submit:hover::before {
left: 100%;
}
.services-appointment-form-wrapper .wpcf7-submit:hover {
background: linear-gradient(135deg, var(--color-accent-green) 0%, #4dd084 100%);
box-shadow:
0 12px 35px rgba(60, 179, 113, 0.4),
0 6px 18px rgba(60, 179, 113, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
transform: translateY(-3px) scale(1.02);
color: var(--color-white);
}
.services-appointment-form-wrapper .wpcf7-submit:active {
transform: translateY(-1px) scale(0.98);
box-shadow:
0 6px 18px rgba(60, 179, 113, 0.3),
0 3px 9px rgba(60, 179, 113, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.services-appointment-form-wrapper .wpcf7-submit:focus {
outline: none;
box-shadow:
0 8px 25px rgba(26, 82, 163, 0.3),
0 4px 12px rgba(26, 82, 163, 0.2),
0 0 0 4px rgba(26, 82, 163, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
/* Spinner */
.services-appointment-form-wrapper .wpcf7-spinner {
display: inline-block;
margin-left: 0.5rem;
vertical-align: middle;
}
/* Form Validation Messages */
.services-appointment-form-wrapper .wpcf7-response-output {
font-size: 0.9rem;
padding: 0.75rem 1rem;
border-radius: 8px;
margin-top: 1rem;
font-weight: 500;
line-height: 1.5;
}
.services-appointment-form-wrapper .wpcf7-validation-errors {
background: rgba(228, 30, 38, 0.1);
border: 2px solid var(--color-accent-red);
color: var(--color-accent-red);
}
.services-appointment-form-wrapper .wpcf7-mail-sent-ok {
background: rgba(60, 179, 113, 0.1);
border: 2px solid var(--color-accent-green);
color: var(--color-accent-green);
}
.services-appointment-form-wrapper .wpcf7-mail-sent-ng {
background: rgba(228, 30, 38, 0.1);
border: 2px solid var(--color-accent-red);
color: var(--color-accent-red);
}
.services-appointment-form-wrapper .wpcf7-not-valid-tip {
font-size: 0.85rem;
color: var(--color-accent-red);
margin-top: 0.5rem;
display: block;
}
/* Services Page Responsive */
@media (max-width: 991px) {
.services-hero-title {
font-size: 3rem;
}
.services-section-title {
font-size: 2.25rem;
}
.services-department-card {
min-height: 180px;
padding: 2rem 1.25rem;
}
.services-department-icon {
width: 70px;
height: 70px;
margin-bottom: 1.25rem;
}
}
@media (max-width: 767px) {
.services-hero-section {
padding: 3rem 0 2.5rem;
min-height: auto;
}
.services-hero-title {
font-size: 2.5rem;
}
.services-departments-section,
.services-hospitals-section,
.services-testimonials-section,
.services-appointment-section {
padding: 4rem 0;
}
.services-section-title {
font-size: 2rem;
margin-bottom: 2rem;
}
.services-department-card {
min-height: 160px;
padding: 1.75rem 1rem;
}
.services-department-icon {
width: 60px;
height: 60px;
margin-bottom: 1rem;
}
.services-department-name {
font-size: 1.1rem;
}
.services-hospital-image {
height: 200px;
}
.services-hospital-content {
padding: 1.5rem;
}
.services-appointment-form-wrapper {
padding: 2rem 1.5rem;
}
/* Services Appointment Form Responsive */
.services-appointment-form-wrapper .wpcf7-form-control-wrap[data-name="your-name"],
.services-appointment-form-wrapper .wpcf7-form-control-wrap[data-name="your-email"] {
width: 100% !important;
max-width: 100% !important;
margin-right: 0 !important;
float: none;
}
.services-appointment-form-wrapper .wpcf7-form-control {
padding: 0.875rem 1rem;
font-size: 0.95rem;
}
.services-appointment-form-wrapper .wpcf7-submit {
padding: 1rem 2rem;
font-size: 1rem;
}
.services-testimonials-description {
font-size: 1rem;
margin-bottom: 1.5rem;
}
}
/* ============================================
Accreditation Page Styles
============================================ */
.accreditation-hero-section {
position: relative;
padding: 5rem 0 4rem;
background: linear-gradient(135deg, rgba(26, 82, 163, 0.08) 0%, rgba(60, 179, 113, 0.08) 100%);
min-height: 300px;
display: flex;
align-items: center;
}
.accreditation-hero-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(26, 82, 163, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(60, 179, 113, 0.1) 0%, transparent 50%);
z-index: 0;
}
.accreditation-breadcrumb {
font-size: 0.95rem;
color: var(--color-text-light);
font-weight: 500;
position: relative;
z-index: 1;
}
.accreditation-hero-title {
font-family: var(--font-heading);
font-size: 4rem;
font-weight: 700;
color: var(--color-primary);
line-height: 1.2;
letter-spacing: -1px;
position: relative;
z-index: 1;
}
.accreditation-intro-section {
padding: 5rem 0;
background: var(--color-white);
}
.accreditation-section-title {
font-family: var(--font-heading);
font-size: 2.75rem;
font-weight: 700;
color: var(--color-primary);
line-height: 1.2;
margin-bottom: 3rem;
}
.accreditation-intro-description {
font-size: 1.125rem;
line-height: 1.8;
color: var(--color-text);
}
.accreditation-section-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 10% 20%, rgba(26, 82, 163, 0.05) 0%, transparent 50%),
radial-gradient(circle at 90% 80%, rgba(60, 179, 113, 0.05) 0%, transparent 50%);
z-index: 0;
}
.accreditation-certifications-section,
.accreditation-awards-section {
padding: 6rem 0;
background: var(--color-light-bg);
position: relative;
}
.accreditation-memberships-section {
padding: 6rem 0;
background: var(--color-white);
}
.accreditation-certification-card,
.accreditation-award-card {
background: var(--color-white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transition: all var(--transition-base);
height: 100%;
display: flex;
flex-direction: column;
}
.accreditation-certification-card:hover,
.accreditation-award-card:hover {
transform: translateY(-8px);
box-shadow: 0 8px 35px rgba(26, 82, 163, 0.2);
}
.accreditation-cert-image,
.accreditation-award-image {
position: relative;
width: 100%;
height: 250px;
overflow: hidden;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-green) 100%);
}
.accreditation-cert-img,
.accreditation-award-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.accreditation-certification-card:hover .accreditation-cert-img,
.accreditation-award-card:hover .accreditation-award-img {
transform: scale(1.1);
}
.accreditation-cert-content,
.accreditation-award-content {
padding: 2rem;
flex: 1;
display: flex;
flex-direction: column;
}
.accreditation-cert-title,
.accreditation-award-title {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0.75rem;
line-height: 1.3;
}
.accreditation-cert-issuer,
.accreditation-award-org {
font-size: 1rem;
color: var(--color-text-light);
margin-bottom: 0.5rem;
}
.accreditation-cert-year,
.accreditation-award-year {
display: inline-block;
padding: 0.5rem 1rem;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
color: var(--color-white);
font-weight: 600;
font-size: 0.9rem;
border-radius: var(--radius-md);
margin-bottom: 1rem;
width: fit-content;
}
.accreditation-cert-description,
.accreditation-award-description {
font-size: 0.95rem;
line-height: 1.7;
color: var(--color-text);
margin-top: auto;
}
.accreditation-membership-card {
background: var(--color-white);
border-radius: var(--radius-lg);
padding: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transition: all var(--transition-base);
text-align: center;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.accreditation-membership-card:hover {
transform: translateY(-8px);
box-shadow: 0 8px 35px rgba(26, 82, 163, 0.2);
}
.accreditation-membership-logo {
width: 120px;
height: 120px;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(26, 82, 163, 0.05) 0%, rgba(60, 179, 113, 0.05) 100%);
border-radius: var(--radius-lg);
padding: 1rem;
}
.accreditation-membership-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.accreditation-membership-content {
flex: 1;
display: flex;
flex-direction: column;
}
.accreditation-membership-name {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.accreditation-membership-org {
font-size: 0.95rem;
color: var(--color-text-light);
margin-bottom: 0.75rem;
}
.accreditation-membership-year {
font-size: 0.9rem;
color: var(--color-primary);
font-weight: 600;
margin-top: auto;
}
/* ============================================
Contact Us Page Styles
============================================ */
.contact-hero-section {
position: relative;
padding: 5rem 0 4rem;
background: linear-gradient(135deg, rgba(26, 82, 163, 0.05) 0%, rgba(60, 179, 113, 0.05) 100%);
min-height: 300px;
display: flex;
align-items: center;
}
.contact-hero-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(26, 82, 163, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(60, 179, 113, 0.08) 0%, transparent 50%);
z-index: 0;
}
.contact-breadcrumb {
font-size: 0.95rem;
color: var(--color-primary);
font-weight: 500;
position: relative;
z-index: 1;
text-align: center;
}
.contact-breadcrumb a {
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition-base);
}
.contact-breadcrumb a:hover {
color: var(--color-primary-dark);
}
.contact-hero-title {
font-family: var(--font-heading);
font-size: 4rem;
font-weight: 700;
color: var(--color-primary);
line-height: 1.2;
letter-spacing: -1px;
position: relative;
z-index: 1;
}
.contact-main-section {
padding: 6rem 0;
background: var(--color-white);
}
.contact-info-card {
background: linear-gradient(135deg, rgba(26, 82, 163, 0.05) 0%, rgba(60, 179, 113, 0.05) 100%);
border-radius: var(--radius-xl);
padding: 2.5rem;
box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1);
height: 100%;
}
.contact-info-item {
display: flex;
gap: 1.5rem;
margin-bottom: 2.5rem;
align-items: flex-start;
}
.contact-info-item:last-child {
margin-bottom: 0;
}
.contact-info-icon {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
border-radius: var(--radius-md);
color: var(--color-white);
flex-shrink: 0;
}
.contact-info-content {
flex: 1;
}
.contact-info-label {
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 600;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.contact-info-value {
font-size: 1rem;
color: var(--color-text);
line-height: 1.6;
margin: 0;
}
.contact-info-value a {
color: var(--color-text);
text-decoration: none;
transition: color var(--transition-base);
}
.contact-info-value a:hover {
color: var(--color-primary);
}
.contact-info-hours {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.contact-hours-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 0;
border-bottom: 1px solid rgba(26, 82, 163, 0.1);
}
.contact-hours-item:last-child {
border-bottom: none;
}
.contact-hours-day {
font-weight: 600;
color: var(--color-primary);
}
.contact-hours-time {
color: var(--color-text);
}
.contact-form-card {
background: var(--color-white);
border-radius: var(--radius-xl);
padding: 3rem;
box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1);
}
.contact-form-title {
font-family: var(--font-heading);
font-size: 2rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 2rem;
}
.contact-form-wrapper {
position: relative;
}
/* Contact Form 7 Styling */
.contact-form-wrapper .wpcf7-form {
position: relative;
display: block;
width: 100%;
margin: 0;
padding: 0;
}
.contact-form-wrapper .wpcf7-form::after {
content: '';
display: table;
clear: both;
}
.contact-form-wrapper .wpcf7-form > p {
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
display: block;
position: relative;
}
.contact-form-wrapper .wpcf7-form > p::after {
content: '';
display: table;
clear: both;
}
.contact-form-wrapper .wpcf7-form-control-wrap {
position: relative;
margin-bottom: 1.5rem;
display: block;
width: 100%;
box-sizing: border-box;
}
/* Name and Phone fields - side by side */
.contact-form-wrapper .wpcf7-form-control-wrap[data-name="your-name"],
.contact-form-wrapper .wpcf7-form-control-wrap[data-name="text-303"] {
width: calc(50% - 0.75rem) !important;
max-width: calc(50% - 0.75rem) !important;
display: block !important;
margin-bottom: 1.5rem;
float: left;
}
.contact-form-wrapper .wpcf7-form-control-wrap[data-name="your-name"] {
margin-right: 1.5rem !important;
}
.contact-form-wrapper .wpcf7-form-control-wrap[data-name="text-303"] {
margin-right: 0 !important;
}
/* Email and Subject fields - side by side */
.contact-form-wrapper .wpcf7-form-control-wrap[data-name="your-email"],
.contact-form-wrapper .wpcf7-form-control-wrap[data-name="your-subject"] {
width: calc(50% - 0.75rem) !important;
max-width: calc(50% - 0.75rem) !important;
display: block !important;
margin-bottom: 1.5rem;
float: left;
}
.contact-form-wrapper .wpcf7-form-control-wrap[data-name="your-email"] {
margin-right: 1.5rem !important;
clear: both;
}
.contact-form-wrapper .wpcf7-form-control-wrap[data-name="your-subject"] {
margin-right: 0 !important;
}
/* Message textarea - full width */
.contact-form-wrapper .wpcf7-form-control-wrap[data-name="your-message"] {
width: 100% !important;
max-width: 100% !important;
display: block !important;
clear: both;
margin-bottom: 1.5rem;
}
/* Clear float after message field */
.contact-form-wrapper .wpcf7-form > p br {
display: none;
}
/* Form Inputs Styling */
.contact-form-wrapper .wpcf7-form-control {
width: 100% !important;
padding: 1rem 1.25rem;
font-size: 1rem;
font-family: var(--font-body);
color: var(--color-text);
background: var(--color-white);
border: 2px solid rgba(26, 82, 163, 0.15);
border-radius: 12px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 2px 8px rgba(26, 82, 163, 0.08),
inset 0 1px 2px rgba(255, 255, 255, 0.8);
outline: none;
position: relative;
z-index: 1;
box-sizing: border-box;
display: block;
}
.contact-form-wrapper .wpcf7-form-control:focus {
border-color: var(--color-primary);
box-shadow:
0 4px 16px rgba(26, 82, 163, 0.15),
0 0 0 4px rgba(26, 82, 163, 0.1),
inset 0 1px 2px rgba(255, 255, 255, 0.9);
transform: translateY(-2px);
background: var(--color-white);
}
.contact-form-wrapper .wpcf7-form-control:hover {
border-color: rgba(26, 82, 163, 0.3);
box-shadow:
0 3px 12px rgba(26, 82, 163, 0.12),
inset 0 1px 2px rgba(255, 255, 255, 0.85);
}
.contact-form-wrapper .wpcf7-textarea {
min-height: 140px;
resize: vertical;
font-family: var(--font-body);
line-height: 1.6;
}
.contact-form-wrapper .wpcf7-form-control::placeholder {
color: var(--color-text-muted);
opacity: 0.6;
font-style: italic;
}
/* Submit Button */
.contact-form-wrapper .wpcf7-submit {
width: 100% !important;
padding: 1.1rem 2.5rem;
font-size: 1.1rem;
font-weight: 700;
font-family: var(--font-heading);
color: var(--color-white);
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
border: none;
border-radius: 12px;
cursor: pointer;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 8px 25px rgba(26, 82, 163, 0.3),
0 4px 12px rgba(26, 82, 163, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
text-transform: uppercase;
letter-spacing: 0.5px;
position: relative;
overflow: hidden;
transform-style: preserve-3d;
box-sizing: border-box;
display: block;
margin-top: 0.5rem;
clear: both;
}
.contact-form-wrapper .wpcf7-submit::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s ease;
z-index: 1;
}
.contact-form-wrapper .wpcf7-submit:hover::before {
left: 100%;
}
.contact-form-wrapper .wpcf7-submit:hover {
background: linear-gradient(135deg, var(--color-accent-green) 0%, #4dd084 100%);
box-shadow:
0 12px 35px rgba(60, 179, 113, 0.4),
0 6px 18px rgba(60, 179, 113, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
transform: translateY(-3px) scale(1.02);
color: var(--color-white);
}
.contact-form-wrapper .wpcf7-submit:active {
transform: translateY(-1px) scale(0.98);
box-shadow:
0 6px 18px rgba(60, 179, 113, 0.3),
0 3px 9px rgba(60, 179, 113, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.contact-form-wrapper .wpcf7-submit:focus {
outline: none;
box-shadow:
0 8px 25px rgba(26, 82, 163, 0.3),
0 4px 12px rgba(26, 82, 163, 0.2),
0 0 0 4px rgba(26, 82, 163, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
/* Spinner */
.contact-form-wrapper .wpcf7-spinner {
display: inline-block;
margin-left: 0.5rem;
vertical-align: middle;
}
/* Form Validation Messages */
.contact-form-wrapper .wpcf7-response-output {
font-size: 0.9rem;
padding: 0.75rem 1rem;
border-radius: 8px;
margin-top: 1rem;
font-weight: 500;
line-height: 1.5;
}
.contact-form-wrapper .wpcf7-validation-errors {
background: rgba(228, 30, 38, 0.1);
border: 2px solid var(--color-accent-red);
color: var(--color-accent-red);
}
.contact-form-wrapper .wpcf7-mail-sent-ok {
background: rgba(60, 179, 113, 0.1);
border: 2px solid var(--color-accent-green);
color: var(--color-accent-green);
}
.contact-form-wrapper .wpcf7-mail-sent-ng {
background: rgba(228, 30, 38, 0.1);
border: 2px solid var(--color-accent-red);
color: var(--color-accent-red);
}
.contact-form-wrapper .wpcf7-not-valid-tip {
font-size: 0.85rem;
color: var(--color-accent-red);
margin-top: 0.5rem;
display: block;
}
.contact-map-section {
padding: 6rem 0;
background: var(--color-light-bg);
position: relative;
}
.contact-map-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 30% 40%, rgba(26, 82, 163, 0.05) 0%, transparent 60%),
radial-gradient(circle at 70% 60%, rgba(60, 179, 113, 0.05) 0%, transparent 60%);
z-index: 0;
}
.contact-map-title {
font-family: var(--font-heading);
font-size: 2.75rem;
font-weight: 700;
color: var(--color-primary);
line-height: 1.2;
}
.contact-map-wrapper {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 4px 25px rgba(0, 0, 0, 0.15);
position: relative;
z-index: 1;
}
.contact-map-wrapper iframe {
width: 100%;
height: 500px;
border: none;
display: block;
}
/* ============================================
Blog Archive Page Styles
============================================ */
.blog-hero-section {
position: relative;
padding: 5rem 0 4rem;
background: linear-gradient(135deg, rgba(26, 82, 163, 0.08) 0%, rgba(60, 179, 113, 0.08) 100%);
min-height: 300px;
display: flex;
align-items: center;
}
.blog-hero-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(26, 82, 163, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(60, 179, 113, 0.1) 0%, transparent 50%);
z-index: 0;
}
.blog-hero-title {
font-family: var(--font-heading);
font-size: 4rem;
font-weight: 700;
color: var(--color-primary);
line-height: 1.2;
letter-spacing: -1px;
position: relative;
z-index: 1;
}
.blog-hero-description {
font-size: 1.125rem;
line-height: 1.8;
color: var(--color-text);
position: relative;
z-index: 1;
}
.blog-posts-section {
padding: 6rem 0;
background: var(--color-white);
}
.blog-post-card {
background: var(--color-white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transition: all var(--transition-base);
height: 100%;
display: flex;
flex-direction: column;
}
.blog-post-card:hover {
transform: translateY(-8px);
box-shadow: 0 8px 35px rgba(26, 82, 163, 0.2);
}
.blog-post-image-link {
display: block;
position: relative;
width: 100%;
height: 250px;
overflow: hidden;
}
.blog-post-image {
position: relative;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-green) 100%);
}
.blog-post-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.blog-post-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(26, 82, 163, 0.3) 0%, rgba(60, 179, 113, 0.3) 100%);
opacity: 0;
transition: opacity var(--transition-base);
}
.blog-post-card:hover .blog-post-overlay {
opacity: 1;
}
.blog-post-card:hover .blog-post-img {
transform: scale(1.1);
}
.blog-post-content {
padding: 2rem;
flex: 1;
display: flex;
flex-direction: column;
}
.blog-post-meta {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.blog-post-category {
display: inline-block;
padding: 0.4rem 1rem;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
color: var(--color-white);
font-size: 0.85rem;
font-weight: 600;
border-radius: var(--radius-md);
}
.blog-post-date {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
color: var(--color-text-light);
}
.blog-post-date svg {
width: 16px;
height: 16px;
color: var(--color-primary);
}
.blog-post-title {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1rem;
line-height: 1.3;
}
.blog-post-title a {
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition-base);
}
.blog-post-title a:hover {
color: var(--color-primary-dark);
}
.blog-post-excerpt {
font-size: 1rem;
line-height: 1.7;
color: var(--color-text);
margin-bottom: 1.5rem;
flex: 1;
}
.blog-post-read-more {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--color-primary);
font-weight: 600;
text-decoration: none;
transition: all var(--transition-base);
margin-top: auto;
}
.blog-post-read-more:hover {
color: var(--color-primary-dark);
gap: 0.75rem;
}
.blog-post-read-more svg {
width: 20px;
height: 20px;
transition: transform var(--transition-base);
}
.blog-post-read-more:hover svg {
transform: translateX(5px);
}
.blog-pagination {
margin-top: 3rem;
}
.blog-pagination .page-numbers {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.blog-pagination .page-numbers li {
list-style: none;
}
.blog-pagination .page-numbers a,
.blog-pagination .page-numbers span {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: var(--color-white);
color: var(--color-primary);
border: 2px solid var(--color-primary);
border-radius: var(--radius-md);
text-decoration: none;
font-weight: 600;
transition: all var(--transition-base);
}
.blog-pagination .page-numbers a:hover,
.blog-pagination .page-numbers .current {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
color: var(--color-white);
border-color: var(--color-primary);
}
.blog-no-posts {
padding: 4rem 2rem;
text-align: center;
}
.blog-no-posts h2 {
color: var(--color-primary);
margin-bottom: 1rem;
}
.blog-no-posts p {
color: var(--color-text-light);
font-size: 1.125rem;
}
/* ============================================
Single Post Page Styles
============================================ */
.single-post-hero-section {
position: relative;
padding: 4rem 0 3rem;
background: linear-gradient(135deg, rgba(26, 82, 163, 0.05) 0%, rgba(60, 179, 113, 0.05) 100%);
overflow: hidden;
}
.single-post-hero-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(26, 82, 163, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(60, 179, 113, 0.08) 0%, transparent 50%);
z-index: 0;
}
.single-post-hero-card {
position: relative;
z-index: 1;
background: var(--color-white);
border-radius: 20px;
padding: 2.5rem;
box-shadow: 0 10px 40px rgba(20, 61, 122, 0.12);
transition: box-shadow 0.3s ease;
}
.single-post-hero-card:hover {
box-shadow: 0 15px 50px rgba(20, 61, 122, 0.18);
}
.single-post-hero-media {
position: relative;
width: 100%;
}
.single-post-hero-image {
position: relative;
width: 100%;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.single-post-hero-image:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
.single-post-hero-img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.single-post-hero-badge {
position: absolute;
top: 1.25rem;
left: 1.25rem;
background: linear-gradient(135deg, rgba(26, 82, 163, 0.95) 0%, rgba(45, 107, 196, 0.95) 100%);
color: var(--color-white);
padding: 0.5rem 1rem;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 4px 15px rgba(26, 82, 163, 0.4);
z-index: 2;
}
.single-post-hero-placeholder {
width: 100%;
aspect-ratio: 4 / 3;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(26, 82, 163, 0.08) 0%, rgba(60, 179, 113, 0.08) 100%);
border-radius: 16px;
border: 2px dashed rgba(26, 82, 163, 0.2);
color: var(--color-primary);
}
.single-post-hero-content {
position: relative;
}
.single-post-category-link {
display: inline-block;
padding: 0.5rem 1.25rem;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
color: var(--color-white);
font-size: 0.9rem;
font-weight: 600;
border-radius: 8px;
text-decoration: none;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 4px 15px rgba(26, 82, 163, 0.3);
}
.single-post-category-link:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(26, 82, 163, 0.4);
color: var(--color-white);
}
.single-post-breadcrumb {
font-size: 0.95rem;
color: var(--color-primary);
font-weight: 500;
position: relative;
z-index: 1;
text-align: center;
}
.single-post-breadcrumb a {
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition-base);
}
.single-post-breadcrumb a:hover {
color: var(--color-primary-dark);
}
.single-post-featured-image {
position: relative;
width: 100%;
height: 400px;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
.single-post-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.single-post-header {
position: relative;
z-index: 1;
}
.single-post-meta {
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
margin-bottom: 1.5rem;
}
.single-post-meta-item {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.95rem;
color: var(--color-text-light);
font-weight: 500;
}
.single-post-meta-item svg {
width: 16px;
height: 16px;
color: var(--color-primary);
flex-shrink: 0;
}
.single-post-excerpt {
font-size: 1.125rem;
line-height: 1.8;
color: var(--color-text-light);
margin-bottom: 1.5rem;
}
.single-post-share {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
padding-top: 1.5rem;
border-top: 1px solid rgba(26, 82, 163, 0.1);
}
.single-post-share-label {
font-size: 0.95rem;
font-weight: 600;
color: var(--color-text);
}
.single-post-share-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: var(--color-light-bg);
color: var(--color-primary);
text-decoration: none;
transition: all 0.3s ease;
border: 1px solid rgba(26, 82, 163, 0.15);
}
.single-post-share-btn:hover {
background: var(--color-primary);
color: var(--color-white);
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(26, 82, 163, 0.3);
border-color: var(--color-primary);
}
.single-post-share-btn svg {
width: 16px;
height: 16px;
}
.single-post-date,
.single-post-author {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.95rem;
color: var(--color-text-light);
}
.single-post-date svg,
.single-post-author svg {
width: 16px;
height: 16px;
color: var(--color-primary);
}
.single-post-title {
font-family: var(--font-heading);
font-size: 2.75rem;
font-weight: 700;
color: var(--color-primary);
line-height: 1.3;
margin: 0 0 1rem 0;
letter-spacing: -0.5px;
}
.single-post-content-section {
padding: 6rem 0;
background: var(--color-white);
position: relative;
}
.single-post-content-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 10% 20%, rgba(26, 82, 163, 0.03) 0%, transparent 50%),
radial-gradient(circle at 90% 80%, rgba(60, 179, 113, 0.03) 0%, transparent 50%);
z-index: 0;
}
.single-post-article {
background: var(--color-white);
border-radius: var(--radius-lg);
padding: 3rem;
box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
position: relative;
z-index: 1;
}
.single-post-content {
font-size: 1.125rem;
line-height: 1.9;
color: var(--color-text);
}
.single-post-content h2,
.single-post-content h3,
.single-post-content h4 {
font-family: var(--font-heading);
color: var(--color-primary);
margin-top: 2rem;
margin-bottom: 1rem;
}
.single-post-content h2 {
font-size: 2rem;
}
.single-post-content h3 {
font-size: 1.75rem;
}
.single-post-content h4 {
font-size: 1.5rem;
}
.single-post-content p {
margin-bottom: 1.5rem;
}
.single-post-content ul,
.single-post-content ol {
margin-bottom: 1.5rem;
padding-left: 2rem;
}
.single-post-content li {
margin-bottom: 0.75rem;
}
.single-post-content a {
color: var(--color-primary);
text-decoration: underline;
transition: color var(--transition-base);
}
.single-post-content a:hover {
color: var(--color-primary-dark);
}
.single-post-content img {
max-width: 100%;
height: auto;
border-radius: var(--radius-md);
margin: 2rem 0;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.single-post-tags {
margin-top: 3rem;
padding-top: 2rem;
border-top: 2px solid rgba(26, 82, 163, 0.1);
}
.single-post-tags-title {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 600;
color: var(--color-primary);
margin-bottom: 1rem;
}
.single-post-tags-list {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.single-post-tags-list a {
display: inline-block;
padding: 0.5rem 1rem;
background: linear-gradient(135deg, rgba(26, 82, 163, 0.1) 0%, rgba(60, 179, 113, 0.1) 100%);
color: var(--color-primary);
font-size: 0.9rem;
font-weight: 600;
border-radius: var(--radius-md);
text-decoration: none;
transition: all var(--transition-base);
}
.single-post-tags-list a:hover {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
color: var(--color-white);
transform: translateY(-2px);
}
.single-post-pagination {
margin-top: 2rem;
padding-top: 2rem;
border-top: 2px solid rgba(26, 82, 163, 0.1);
}
.single-post-pages {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.single-post-pages a,
.single-post-pages span {
display: inline-block;
padding: 0.5rem 1rem;
background: var(--color-white);
color: var(--color-primary);
border: 2px solid var(--color-primary);
border-radius: var(--radius-md);
text-decoration: none;
font-weight: 600;
transition: all var(--transition-base);
}
.single-post-pages a:hover,
.single-post-pages .current {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
color: var(--color-white);
border-color: var(--color-primary);
}
.single-post-navigation {
margin-top: 3rem;
}
.single-post-nav-link {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
background: linear-gradient(135deg, rgba(26, 82, 163, 0.05) 0%, rgba(60, 179, 113, 0.05) 100%);
border-radius: var(--radius-lg);
text-decoration: none;
transition: all var(--transition-base);
height: 100%;
}
.single-post-nav-link:hover {
background: linear-gradient(135deg, rgba(26, 82, 163, 0.1) 0%, rgba(60, 179, 113, 0.1) 100%);
transform: translateX(5px);
}
.single-post-nav-prev:hover {
transform: translateX(-5px);
}
.single-post-nav-link svg {
width: 24px;
height: 24px;
color: var(--color-primary);
flex-shrink: 0;
}
.single-post-nav-content {
flex: 1;
}
.single-post-nav-label {
display: block;
font-size: 0.85rem;
color: var(--color-text-light);
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.single-post-nav-title {
display: block;
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 600;
color: var(--color-primary);
line-height: 1.4;
}
.single-post-sidebar {
position: sticky;
top: 2rem;
}
.single-post-widget {
background: var(--color-white);
border-radius: var(--radius-lg);
padding: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
margin-bottom: 2rem;
}
.single-post-widget:last-child {
margin-bottom: 0;
}
.single-post-widget-title {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid rgba(26, 82, 163, 0.1);
}
.single-post-widget-list {
list-style: none;
padding: 0;
margin: 0;
}
.single-post-widget-list li {
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(26, 82, 163, 0.1);
}
.single-post-widget-list li:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.single-post-widget-list a {
color: var(--color-text);
text-decoration: none;
transition: all var(--transition-base);
display: flex;
justify-content: space-between;
align-items: center;
}
.single-post-widget-list a:hover {
color: var(--color-primary);
padding-left: 0.5rem;
}
.single-post-widget-list a span {
color: var(--color-text-light);
font-size: 0.9rem;
}
/* Responsive Styles for All Pages */
@media (max-width: 991px) {
.accreditation-hero-title,
.contact-hero-title,
.blog-hero-title {
font-size: 3rem;
}
.accreditation-section-title,
.contact-map-title {
font-size: 2.25rem;
}
.single-post-title {
font-size: 2.5rem;
}
.contact-form-card {
padding: 2rem;
}
}
@media (max-width: 767px) {
.accreditation-hero-section,
.contact-hero-section,
.blog-hero-section,
.single-post-hero-section {
padding: 3rem 0 2.5rem;
min-height: auto;
}
.single-post-hero-card {
padding: 1.75rem;
border-radius: 16px;
}
.single-post-hero-content {
margin-top: 2rem;
}
.single-post-title {
font-size: 2rem;
line-height: 1.3;
}
.single-post-excerpt {
font-size: 1rem;
line-height: 1.7;
}
.single-post-meta {
gap: 1rem;
font-size: 0.9rem;
}
.single-post-meta-item {
font-size: 0.9rem;
}
.single-post-share {
padding-top: 1.25rem;
gap: 0.75rem;
}
.single-post-share-btn {
width: 2.25rem;
height: 2.25rem;
}
.single-post-share-btn svg {
width: 14px;
height: 14px;
}
.accreditation-hero-title,
.contact-hero-title,
.blog-hero-title {
font-size: 2.5rem;
}
.accreditation-intro-section,
.accreditation-certifications-section,
.accreditation-memberships-section,
.accreditation-awards-section,
.contact-main-section,
.contact-map-section,
.blog-posts-section,
.single-post-content-section {
padding: 4rem 0;
}
.accreditation-section-title,
.contact-map-title {
font-size: 2rem;
margin-bottom: 2rem;
}
.single-post-article {
padding: 2rem 1.5rem;
}
.single-post-featured-image {
height: 250px;
}
.contact-info-card {
padding: 2rem 1.5rem;
margin-bottom: 2rem;
}
.contact-form-card {
padding: 2rem 1.5rem;
}
/* Contact Form Responsive */
.contact-form-wrapper .wpcf7-form-control-wrap[data-name="your-name"],
.contact-form-wrapper .wpcf7-form-control-wrap[data-name="text-303"],
.contact-form-wrapper .wpcf7-form-control-wrap[data-name="your-email"],
.contact-form-wrapper .wpcf7-form-control-wrap[data-name="your-subject"] {
width: 100% !important;
max-width: 100% !important;
margin-right: 0 !important;
float: none;
}
.contact-form-wrapper .wpcf7-form-control {
padding: 0.875rem 1rem;
font-size: 0.95rem;
}
.contact-form-wrapper .wpcf7-submit {
padding: 1rem 2rem;
font-size: 1rem;
}
.contact-map-wrapper iframe {
height: 350px;
}
.single-post-sidebar {
position: static;
margin-top: 3rem;
}
}
/* ============================================
Single Service Page Styles
============================================ */
.single-service-hero-section {
position: relative;
padding: 5rem 0 3rem;
background: linear-gradient(135deg, rgba(26, 82, 163, 0.05) 0%, rgba(60, 179, 113, 0.05) 100%);
}
.single-service-hero-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(26, 82, 163, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(60, 179, 113, 0.08) 0%, transparent 50%);
z-index: 0;
}
.single-service-breadcrumb {
font-size: 0.95rem;
color: var(--color-text-light);
font-weight: 500;
position: relative;
z-index: 1;
}
.single-service-breadcrumb a {
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition-base);
}
.single-service-breadcrumb a:hover {
color: var(--color-primary-dark);
}
.single-service-header {
position: relative;
z-index: 1;
text-align: center;
}
.single-service-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
color: var(--color-primary);
margin: 0 auto;
}
.single-service-icon svg {
width: 100%;
height: 100%;
}
.single-service-title {
font-family: var(--font-heading);
font-size: 3rem;
font-weight: 700;
color: var(--color-primary);
line-height: 1.2;
margin-bottom: 1.5rem;
}
.single-service-short-description {
font-size: 1.25rem;
line-height: 1.8;
color: var(--color-text);
max-width: 800px;
margin: 0 auto;
}
.single-service-content-section {
padding: 6rem 0;
background: var(--color-white);
position: relative;
}
.single-service-content-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 10% 20%, rgba(26, 82, 163, 0.03) 0%, transparent 50%),
radial-gradient(circle at 90% 80%, rgba(60, 179, 113, 0.03) 0%, transparent 50%);
z-index: 0;
}
.single-service-article {
background: var(--color-white);
border-radius: var(--radius-lg);
padding: 3rem;
box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
position: relative;
z-index: 1;
}
.single-service-featured-image {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.single-service-img {
width: 100%;
height: auto;
display: block;
}
.single-service-content {
font-size: 1.125rem;
line-height: 1.9;
color: var(--color-text);
}
.single-service-content h2,
.single-service-content h3,
.single-service-content h4 {
font-family: var(--font-heading);
color: var(--color-primary);
margin-top: 2rem;
margin-bottom: 1rem;
}
.single-service-content h2 {
font-size: 2rem;
}
.single-service-content h3 {
font-size: 1.75rem;
}
.single-service-content h4 {
font-size: 1.5rem;
}
.single-service-content p {
margin-bottom: 1.5rem;
}
.single-service-content ul,
.single-service-content ol {
margin-bottom: 1.5rem;
padding-left: 2rem;
}
.single-service-content li {
margin-bottom: 0.75rem;
}
.single-service-content a {
color: var(--color-primary);
text-decoration: underline;
transition: color var(--transition-base);
}
.single-service-content a:hover {
color: var(--color-primary-dark);
}
.single-service-content img {
max-width: 100%;
height: auto;
border-radius: var(--radius-md);
margin: 2rem 0;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.single-service-features {
margin-top: 3rem;
padding-top: 2rem;
border-top: 2px solid rgba(26, 82, 163, 0.1);
}
.single-service-features-title {
font-family: var(--font-heading);
font-size: 1.75rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1.5rem;
}
.single-service-features-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
.single-service-features-list li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 1rem;
background: linear-gradient(135deg, rgba(26, 82, 163, 0.05) 0%, rgba(60, 179, 113, 0.05) 100%);
border-radius: var(--radius-md);
transition: all var(--transition-base);
}
.single-service-features-list li:hover {
background: linear-gradient(135deg, rgba(26, 82, 163, 0.1) 0%, rgba(60, 179, 113, 0.1) 100%);
transform: translateX(5px);
}
.single-service-features-list li svg {
color: var(--color-primary);
flex-shrink: 0;
margin-top: 0.25rem;
}
.single-service-gallery {
margin-top: 3rem;
padding-top: 2rem;
border-top: 2px solid rgba(26, 82, 163, 0.1);
}
.single-service-gallery-title {
font-family: var(--font-heading);
font-size: 1.75rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1.5rem;
}
.single-service-gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.single-service-gallery-item {
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: all var(--transition-base);
}
.single-service-gallery-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(26, 82, 163, 0.2);
}
.single-service-gallery-img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
}
.single-service-cta {
text-align: center;
padding-top: 2rem;
border-top: 2px solid rgba(26, 82, 163, 0.1);
}
.single-service-cta-btn {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 2.5rem;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
color: var(--color-white);
font-weight: 600;
font-size: 1.1rem;
border-radius: var(--radius-md);
text-decoration: none;
transition: all var(--transition-base);
box-shadow: 0 4px 15px rgba(26, 82, 163, 0.3);
}
.single-service-cta-btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(26, 82, 163, 0.4);
background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
color: var(--color-white);
}
.single-service-cta-btn svg {
width: 20px;
height: 20px;
transition: transform var(--transition-base);
}
.single-service-cta-btn:hover svg {
transform: translateX(5px);
}
.single-service-sidebar {
position: sticky;
top: 2rem;
}
.single-service-widget {
background: var(--color-white);
border-radius: var(--radius-lg);
padding: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
margin-bottom: 2rem;
}
.single-service-widget:last-child {
margin-bottom: 0;
}
.single-service-widget-title {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid rgba(26, 82, 163, 0.1);
}
.single-service-widget-list {
list-style: none;
padding: 0;
margin: 0;
}
.single-service-widget-list li {
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(26, 82, 163, 0.1);
}
.single-service-widget-list li:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.single-service-widget-list a {
color: var(--color-text);
text-decoration: none;
transition: all var(--transition-base);
display: block;
}
.single-service-widget-list a:hover {
color: var(--color-primary);
padding-left: 0.5rem;
}
.single-service-cta-widget {
background: linear-gradient(135deg, rgba(26, 82, 163, 0.05) 0%, rgba(60, 179, 113, 0.05) 100%);
text-align: center;
}
.single-service-cta-widget p {
margin-bottom: 1.5rem;
color: var(--color-text);
}
.single-service-cta-widget .single-service-cta-btn {
width: 100%;
justify-content: center;
}
/* Single Service Responsive */
@media (max-width: 991px) {
.single-service-title {
font-size: 2.5rem;
}
.single-service-short-description {
font-size: 1.125rem;
}
}
@media (max-width: 767px) {
.single-service-hero-section {
padding: 3rem 0 2.5rem;
}
.single-service-title {
font-size: 2rem;
}
.single-service-content-section {
padding: 4rem 0;
}
.single-service-article {
padding: 2rem 1.5rem;
}
.single-service-icon {
width: 80px;
height: 80px;
}
.single-service-features-list {
grid-template-columns: 1fr;
}
.single-service-gallery-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.single-service-gallery-img {
height: 150px;
}
.single-service-sidebar {
position: static;
margin-top: 3rem;
}
}
/* ============================================
Appointment Modal Styles
============================================ */
.appointment-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.appointment-modal.active {
opacity: 1;
visibility: visible;
pointer-events: all;
}
.appointment-modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(5px);
}
.appointment-modal-container {
position: relative;
z-index: 1;
width: 100%;
max-width: 600px;
max-height: 90vh;
margin: 2rem;
overflow-y: auto;
}
.appointment-modal-content {
background: var(--color-white);
border-radius: var(--radius-xl);
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.1);
overflow: hidden;
transform: scale(0.9);
transition: transform 0.3s ease;
}
.appointment-modal.active .appointment-modal-content {
transform: scale(1);
}
.appointment-modal-close {
position: absolute;
top: 1rem;
right: 1rem;
width: 40px;
height: 40px;
border: none;
background: rgba(0, 0, 0, 0.1);
border-radius: var(--radius-round);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
transition: all var(--transition-base);
color: var(--color-text);
}
.appointment-modal-close:hover {
background: rgba(0, 0, 0, 0.2);
transform: rotate(90deg);
}
.appointment-modal-header {
padding: 2rem 2rem 1rem;
background: var(--color-gradient-a);
color: var(--color-white);
text-align: center;
}
.appointment-modal-title {
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-white);
}
.appointment-modal-subtitle {
font-size: 0.95rem;
opacity: 0.95;
margin: 0;
}
.appointment-modal-body {
padding: 2rem;
}
/* Contact Form 7 Styles in Modal */
.appointment-modal-body .wpcf7-form,
.appointment-modal-body form {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
align-items: start;
}
.appointment-modal-body .wpcf7-form p,
.appointment-modal-body form .form-group {
margin: 0;
}
/* Full width for textarea, submit button, reCAPTCHA, and messages */
.appointment-modal-body .wpcf7-form p:has(textarea),
.appointment-modal-body .wpcf7-form p:has([type="submit"]),
.appointment-modal-body .wpcf7-form p:has(.g-recaptcha),
.appointment-modal-body .wpcf7-form p:has(.wpcf7-validation-errors),
.appointment-modal-body .wpcf7-form p:has(.wpcf7-mail-sent-ok),
.appointment-modal-body .wpcf7-form p:has(.wpcf7-not-valid-tip),
.appointment-modal-body form .form-group:has(textarea),
.appointment-modal-body form .form-group:has(button[type="submit"]),
.appointment-modal-body form button[type="submit"] {
grid-column: 1 / -1;
}
/* Fallback for browsers that don't support :has() - use class-based approach */
.appointment-modal-body .wpcf7-form p:has(textarea),
.appointment-modal-body .wpcf7-form p:has([type="submit"]),
.appointment-modal-body .wpcf7-form p:has(.g-recaptcha) {
grid-column: 1 / -1;
}
.appointment-modal-body .wpcf7-form label,
.appointment-modal-body form label {
display: block;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--color-text);
font-size: 0.95rem;
}
.appointment-modal-body .wpcf7-form input[type="text"],
.appointment-modal-body .wpcf7-form input[type="email"],
.appointment-modal-body .wpcf7-form input[type="tel"],
.appointment-modal-body .wpcf7-form textarea,
.appointment-modal-body form input[type="text"],
.appointment-modal-body form input[type="email"],
.appointment-modal-body form input[type="tel"],
.appointment-modal-body form textarea {
width: 100%;
padding: 0.875rem 1rem;
border: 2px solid var(--color-light-bg-alt);
border-radius: var(--radius-md);
font-size: 1rem;
font-family: var(--font-body);
transition: all var(--transition-base);
background: var(--color-white);
box-sizing: border-box;
}
.appointment-modal-body .wpcf7-form input:focus,
.appointment-modal-body .wpcf7-form textarea:focus,
.appointment-modal-body form input:focus,
.appointment-modal-body form textarea:focus {
outline: none;
border-color: var(--color-primary-start);
box-shadow: 0 0 0 3px rgba(14, 107, 143, 0.1);
}
.appointment-modal-body .wpcf7-form textarea,
.appointment-modal-body form textarea {
resize: vertical;
min-height: 120px;
}
.appointment-modal-body .wpcf7-form input[type="submit"],
.appointment-modal-body form button[type="submit"],
.appointment-modal-body form .btn-primary {
width: 100%;
padding: 1rem;
background: var(--color-gradient-a);
color: var(--color-white);
border: none;
border-radius: var(--radius-md);
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: all var(--transition-base);
box-shadow: var(--shadow-md);
margin-top: 0.5rem;
font-family: var(--font-heading);
}
.appointment-modal-body .wpcf7-form input[type="submit"]:hover,
.appointment-modal-body form button[type="submit"]:hover,
.appointment-modal-body form .btn-primary:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.appointment-modal-body .wpcf7-form input[type="submit"]:active,
.appointment-modal-body form button[type="submit"]:active,
.appointment-modal-body form .btn-primary:active {
transform: translateY(0);
}
.appointment-modal-body .wpcf7-form input[type="submit"]:disabled,
.appointment-modal-body form button[type="submit"]:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
/* Success Message */
.appointment-success-message {
text-align: center;
padding: 3rem 2rem;
}
.appointment-success-message .success-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
background: var(--color-accent);
border-radius: var(--radius-round);
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: var(--color-white);
font-weight: 700;
animation: successPulse 0.6s ease;
}
@keyframes successPulse {
0% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
opacity: 1;
}
}
.appointment-success-message h3 {
font-size: 1.75rem;
color: var(--color-primary-start);
margin-bottom: 1rem;
}
.appointment-success-message p {
font-size: 1.125rem;
color: var(--color-text-light);
margin: 0;
}
/* Form Validation Styles */
.appointment-modal-body .wpcf7-not-valid-tip {
color: #dc3545;
font-size: 0.875rem;
margin-top: 0.25rem;
display: block;
font-weight: 500;
}
.appointment-modal-body .wpcf7-not-valid,
.appointment-modal-body form input:invalid,
.appointment-modal-body form textarea:invalid {
border-color: #dc3545 !important;
}
.appointment-modal-body .wpcf7-validation-errors {
background: #fff3cd;
border: 1px solid #ffc107;
color: #856404;
padding: 1rem;
border-radius: var(--radius-md);
margin-bottom: 1rem;
font-size: 0.95rem;
}
.appointment-modal-body .wpcf7-mail-sent-ok {
background: #d4edda;
border: 1px solid #28a745;
color: #155724;
padding: 1rem;
border-radius: var(--radius-md);
margin-bottom: 1rem;
font-size: 0.95rem;
}
/* ReCAPTCHA Styles */
.appointment-modal-body .g-recaptcha {
margin: 1rem 0;
display: flex;
justify-content: center;
}
.appointment-modal-body .wpcf7-spinner {
display: none;
}
/* Responsive Modal */
@media (max-width: 768px) {
.appointment-modal-container {
margin: 1rem;
max-height: 95vh;
}
.appointment-modal-header {
padding: 1.5rem 1.5rem 1rem;
}
.appointment-modal-title {
font-size: 1.5rem;
}
.appointment-modal-body {
padding: 1.5rem;
}
.appointment-modal-close {
top: 0.75rem;
right: 0.75rem;
width: 36px;
height: 36px;
}
/* Single column on mobile */
.appointment-modal-body .wpcf7-form,
.appointment-modal-body form {
grid-template-columns: 1fr;
}
}