/* Custom Styles */
:root {
--pramod-primary-color: #15a64e;
--pramod-primary-dark: #0f7a3a;
--pramod-primary-light: #1fc066;
--pramod-text-dark: #2c3e50;
--pramod-text-light: #6c757d;
--pramod-bg-light: #f8f9fa;
--pramod-white: #ffffff;
}
/* Global Styles with Primary Color */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: var(--pramod-text-dark);
background-color: var(--pramod-bg-light);
}
a {
color: var(--pramod-primary-color);
transition: color 0.3s ease;
text-decoration:none !important;
}
a:hover {
color: var(--pramod-primary-dark);
}
/* Custom Navbar Styles */
.pramod-navbar-custom {
background-color: var(--pramod-primary-color) !important;
box-shadow: 0 2px 8px rgba(21, 166, 78, 0.3);
}
.navbar-brand {
font-weight: bold;
font-size: 1.5rem;
}
.nav-link {
color: rgba(0, 0, 0, 0.9) !important;
transition: color 0.3s ease;
}
.nav-link:hover {
color: #26ab5a !important;
}
.nav-link.active {
color: #006d2a !important;
font-weight: 600;
}
/* About Dr. Pramod Bhor Section - Modern Design */
.pramod-about-wrapper {
padding: 80px 0;
background: linear-gradient(135deg, #ffffff 0%, #f0f9f4 100%);
position: relative;
overflow: hidden;
}
.pramod-about-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.pramod-about-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 1;
}
.pramod-about-content-grid {
display: grid;
grid-template-columns: 1fr;
gap: 60px;
align-items: center;
}
.pramod-about-image-wrapper {
position: relative;
}
.pramod-about-image-frame {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(21, 166, 78, 0.2);
background: var(--pramod-white);
padding: 10px;
transition: transform 0.3s ease;
}
.pramod-about-image-frame::before {
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
background: linear-gradient(135deg, var(--pramod-primary-color), var(--pramod-primary-light));
border-radius: 20px;
z-index: -1;
opacity: 0.1;
}
.pramod-about-image-wrapper:hover .pramod-about-image-frame {
transform: translateY(-5px);
}
.pramod-about-image {
width: 100%;
height: auto;
display: block;
border-radius: 15px;
object-fit: cover;
}
/* Modern Badge Overlay - Appears after doctor image */
.pramod-about-badge-overlay {
position: relative;
margin-top: 30px;
padding: 35px 30px;
background: linear-gradient(135deg, #ffffff 0%, #f8fbf9 100%);
border-radius: 20px;
box-shadow:
0 10px 40px rgba(21, 166, 78, 0.12),
0 0 0 1px rgba(21, 166, 78, 0.08) inset;
overflow: hidden;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
animation: slideInUp 0.8s ease 0.3s both;
}
.pramod-about-badge-overlay::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--pramod-primary-color), var(--pramod-primary-light), var(--pramod-primary-color));
background-size: 200% 100%;
animation: gradientShift 3s ease infinite;
}
.pramod-about-badge-overlay::after {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(21, 166, 78, 0.05) 0%, transparent 70%);
pointer-events: none;
transition: transform 0.6s ease;
}
.pramod-about-image-wrapper:hover .pramod-about-badge-overlay {
transform: translateY(-5px);
box-shadow:
0 20px 60px rgba(21, 166, 78, 0.18),
0 0 0 1px rgba(21, 166, 78, 0.12) inset;
}
.pramod-about-image-wrapper:hover .pramod-about-badge-overlay::after {
transform: scale(1.2) rotate(10deg);
}
.pramod-about-badge-overlay .pramod-about-badge {
display: block;
background: linear-gradient(135deg, var(--pramod-primary-color), var(--pramod-primary-light));
color: var(--pramod-white);
padding: 14px 28px;
border-radius: 50px;
font-size: 16px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 20px;
text-align: center;
box-shadow:
0 8px 25px rgba(21, 166, 78, 0.3),
0 0 0 3px rgba(255, 255, 255, 0.5) inset;
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.pramod-about-badge-overlay .pramod-about-badge::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;
}
.pramod-about-badge-overlay:hover .pramod-about-badge::before {
left: 100%;
}
.pramod-about-badge-overlay .pramod-about-badge:hover {
transform: scale(1.05);
box-shadow:
0 12px 35px rgba(21, 166, 78, 0.4),
0 0 0 3px rgba(255, 255, 255, 0.6) inset;
}
.pramod-about-qualification {
font-size: 18px;
font-weight: 600;
color: var(--pramod-text-dark);
line-height: 1.6;
text-align: center;
margin: 0;
position: relative;
z-index: 1;
letter-spacing: 0.3px;
}
.pramod-about-qualification br {
display: block;
content: '';
margin-top: 8px;
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes gradientShift {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
.pramod-about-text-wrapper {
position: relative;
padding-left: 40px;
z-index: 1;
}
.pramod-about-badge {
display: inline-block;
background: linear-gradient(350deg, #ffffff, #f3f7f5);
color: #433c3c;
padding: 10px 24px;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
border: 3px solid #e4f5ec;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-bottom: 20px;
}
.pramod-about-main-title {
font-size: 19px;
font-weight: 700;
color: var(--pramod-text-dark);
margin-bottom: 25px;
line-height: 1.5;
border-top: 1px dashed #a6e5c5;
letter-spacing: -0.5px;
padding-top: 10px;
}
.pramod-about-description {
margin-bottom: 30px;
}
.pramod-about-description p {
font-size: 18px;
line-height: 1.8;
color: var(--pramod-text-light);
margin-bottom: 18px;
}
.pramod-about-description p:last-child {
margin-bottom: 0;
}
.pramod-about-cta-button {
display: inline-block;
background: var(--pramod-primary-color);
color: var(--pramod-white);
padding: 14px 32px;
border-radius: 50px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(21, 166, 78, 0.3);
border: 2px solid var(--pramod-primary-color);
font-size: 15px;
letter-spacing: 0.5px;
}
.pramod-about-cta-button:hover {
background: var(--pramod-primary-dark);
border-color: var(--pramod-primary-dark);
color: var(--pramod-white);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(21, 166, 78, 0.4);
}
/* Section Titles */
.pramod-section-title {
color: var(--pramod-primary-color);
font-weight: 700;
font-size: 28px;
}
/* Primary Button */
.pramod-primary-button {
display: inline-block;
background: var(--pramod-primary-color);
color: var(--pramod-white);
padding: 12px 30px;
border-radius: 50px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(21, 166, 78, 0.3);
border: 2px solid var(--pramod-primary-color);
}
.pramod-primary-button:hover {
background: var(--pramod-primary-dark);
border-color: var(--pramod-primary-dark);
color: var(--pramod-white);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(21, 166, 78, 0.4);
}
/* Card Enhancements */
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: none;
box-shadow: 0 2px 8px rgba(0,0,0,.1);
border-radius: 15px;
overflow: hidden;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(21, 166, 78, 0.15);
}
.card-title {
color: var(--pramod-primary-color);
font-weight: 600;
}
/* Button Styles */
.btn-primary {
background-color: var(--pramod-primary-color);
border-color: var(--pramod-primary-color);
}
.btn-primary:hover {
background-color: var(--pramod-primary-dark);
border-color: var(--pramod-primary-dark);
}
.btn {
border-radius: 50px;
padding: 0.5rem 1.5rem;
font-weight: 500;
transition: all 0.3s ease;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(21, 166, 78, 0.3);
}
/* Nav Tabs */
.nav-tabs .nav-link {
color: var(--pramod-text-dark);
border: none;
border-bottom: 2px solid transparent;
transition: all 0.3s ease;
}
.nav-tabs .nav-link:hover {
border-bottom-color: var(--pramod-primary-light);
color: var(--pramod-primary-color);
}
.nav-tabs .nav-link.active {
color: var(--pramod-primary-color);
border-bottom-color: var(--pramod-primary-color);
background: transparent;
}
/* Footer Styles */
footer {
margin-top: auto;
background-color: #1a1a1a !important;
}
/* Advanced Care - Treatments We Provide Section */
.pramod-services-section {
padding: 100px 0;
background: linear-gradient(180deg, #ffffff 0%, #f8fdf9 50%, #ffffff 100%);
position: relative;
overflow: hidden;
}
.pramod-services-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 10% 20%, rgba(21, 166, 78, 0.03) 0%, transparent 50%),
radial-gradient(circle at 90% 80%, rgba(21, 166, 78, 0.03) 0%, transparent 50%);
pointer-events: none;
}
.pramod-services-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 1;
}
.pramod-services-header {
text-align: center;
margin-bottom: 60px;
}
.pramod-services-header-badge {
display: inline-block;
background: linear-gradient(135deg, rgba(21, 166, 78, 0.1), rgba(21, 166, 78, 0.05));
color: var(--pramod-primary-color);
padding: 8px 20px;
border-radius: 50px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-bottom: 20px;
border: 1px solid rgba(21, 166, 78, 0.2);
}
.pramod-services-main-title {
color: var(--pramod-text-dark);
font-weight: 700;
font-size: 38px;
margin-bottom: 20px;
letter-spacing: -0.5px;
line-height: 1.2;
}
.pramod-services-description {
font-size: 17px;
line-height: 1.8;
color: var(--pramod-text-light);
max-width: 900px;
margin: 0 auto;
}
.pramod-services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 30px;
}
.pramod-service-card {
background: var(--pramod-white);
border-radius: 24px;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border: 1px solid rgba(21, 166, 78, 0.1);
position: relative;
}
.pramod-service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--pramod-primary-color), var(--pramod-primary-light));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s ease;
z-index: 2;
}
.pramod-service-card:hover {
transform: translateY(-12px);
box-shadow: 0 20px 50px rgba(21, 166, 78, 0.25);
border-color: rgba(21, 166, 78, 0.3);
}
.pramod-service-card:hover::before {
transform: scaleX(1);
}
.pramod-service-image-wrapper {
position: relative;
overflow: hidden;
height: 240px;
}
.pramod-service-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, transparent 0%, rgba(21, 166, 78, 0.4) 100%);
opacity: 0;
transition: opacity 0.4s ease;
z-index: 1;
}
.pramod-service-card:hover .pramod-service-overlay {
opacity: 1;
}
.pramod-service-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.pramod-service-card:hover .pramod-service-image {
transform: scale(1.15);
}
.pramod-service-icon-badge {
position: absolute;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
background: var(--pramod-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--pramod-primary-color);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
opacity: 0;
transform: scale(0.8) rotate(-10deg);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 2;
}
.pramod-service-card:hover .pramod-service-icon-badge {
opacity: 1;
transform: scale(1) rotate(0deg);
}
.pramod-service-content {
padding: 30px;
position: relative;
}
.pramod-service-title {
font-size: 22px;
font-weight: 700;
color: var(--pramod-text-dark);
margin-bottom: 15px;
line-height: 1.3;
transition: color 0.3s ease;
}
.pramod-service-card:hover .pramod-service-title {
color: var(--pramod-primary-color);
}
.pramod-service-text {
font-size: 15px;
line-height: 1.8;
color: var(--pramod-text-light);
margin: 0 0 20px 0;
}
.pramod-service-arrow {
position: absolute;
bottom: 30px;
right: 30px;
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--pramod-primary-color), var(--pramod-primary-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--pramod-white);
opacity: 0;
transform: translateX(-10px);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 4px 15px rgba(21, 166, 78, 0.3);
}
.pramod-service-card:hover .pramod-service-arrow {
opacity: 1;
transform: translateX(0);
}
/* Testimonials Section */
.pramod-testimonials-section {
padding: 80px 0;
background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
}
.pramod-testimonials-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.pramod-testimonials-header {
text-align: center;
margin-bottom: 50px;
}
.pramod-testimonials-main-title {
color: var(--pramod-primary-color);
font-weight: 700;
font-size: 32px;
margin-bottom: 12px;
letter-spacing: -0.5px;
}
.pramod-testimonials-subtitle {
font-size: 1.3rem;
font-weight: 500;
color: var(--pramod-text-dark);
}
.pramod-testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
}
.pramod-testimonial-card {
background: var(--pramod-white);
border-radius: 15px;
padding: 30px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border-left: 4px solid var(--pramod-primary-color);
}
.pramod-testimonial-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(21, 166, 78, 0.15);
}
.pramod-testimonial-author {
font-size: 14px;
font-weight: 600;
color: var(--pramod-primary-color);
margin-bottom: 12px;
}
.pramod-testimonial-text {
font-size: 15px;
line-height: 1.7;
color: var(--pramod-text-light);
margin: 0;
}
/* Patient Feedback Section */
.pramod-feedback-section {
padding: 80px 0;
background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
}
.pramod-feedback-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.pramod-feedback-header {
text-align: center;
margin-bottom: 50px;
}
.pramod-feedback-main-title {
color: var(--pramod-primary-color);
font-weight: 700;
font-size: 32px;
margin-bottom: 12px;
letter-spacing: -0.5px;
}
.pramod-feedback-subtitle {
font-size: 1.3rem;
font-weight: 500;
color: var(--pramod-text-dark);
}
.pramod-feedback-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
}
.pramod-feedback-video-wrapper {
position: relative;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.pramod-feedback-video-wrapper:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(21, 166, 78, 0.2);
}
.pramod-feedback-video-frame {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.pramod-feedback-video-frame iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
/* Blog Section */
.pramod-blog-section {
padding: 100px 0;
background: linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f8fafc 100%);
position: relative;
overflow: hidden;
}
.pramod-blog-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 200px;
background: linear-gradient(180deg, rgba(21, 166, 78, 0.03) 0%, transparent 100%);
pointer-events: none;
}
.pramod-blog-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 1;
}
.pramod-blog-header {
text-align: center;
margin-bottom: 60px;
}
.pramod-blog-main-title {
color: #0f172a;
font-weight: 800;
font-size: 42px;
margin-bottom: 16px;
letter-spacing: -1px;
background: linear-gradient(135deg, #0f172a 0%, #15a64e 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.pramod-blog-subtitle {
font-size: 1.2rem;
font-weight: 500;
color: #64748b;
letter-spacing: 0.3px;
}
.pramod-blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 32px;
margin-bottom: 50px;
}
.pramod-blog-card {
display: block;
text-decoration: none;
color: inherit;
background: #ffffff;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(21, 166, 78, 0.1);
position: relative;
}
.pramod-blog-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(21, 166, 78, 0.02), rgba(31, 192, 102, 0.02));
opacity: 0;
transition: opacity 0.4s ease;
z-index: 0;
}
.pramod-blog-card:hover {
transform: translateY(-12px);
box-shadow: 0 20px 50px rgba(21, 166, 78, 0.2);
border-color: rgba(21, 166, 78, 0.3);
}
.pramod-blog-card:hover::before {
opacity: 1;
}
.pramod-blog-image-wrapper {
position: relative;
overflow: hidden;
height: 240px;
z-index: 1;
}
.pramod-blog-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.pramod-blog-card:hover .pramod-blog-image {
transform: scale(1.15);
}
.pramod-blog-content {
padding: 28px;
position: relative;
z-index: 1;
background: #ffffff;
}
.pramod-blog-date {
font-size: 13px;
color: #15a64e;
margin-bottom: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.pramod-blog-title {
font-size: 22px;
font-weight: 700;
color: #0f172a;
margin: 0;
line-height: 1.5;
transition: color 0.3s ease;
}
.pramod-blog-card:hover .pramod-blog-title {
color: #15a64e;
}
.pramod-blog-footer {
text-align: center;
margin: 30px auto 0;
display: flex;
justify-content: center;
align-items: center;
}
/* Appointment Booking Section */
.pramod-appointment-section {
padding: 100px 0;
background: linear-gradient(135deg, #f0f9f5 0%, #ffffff 50%, #f8fafc 100%);
position: relative;
overflow: hidden;
}
.pramod-appointment-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(21, 166, 78, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 50%, rgba(31, 192, 102, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.pramod-appointment-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 1;
}
.pramod-appointment-header {
text-align: center;
margin-bottom: 50px;
}
.pramod-appointment-title {
font-size: 42px;
font-weight: 800;
color: #0f172a;
margin-bottom: 16px;
letter-spacing: -1px;
background: linear-gradient(135deg, #0f172a 0%, #15a64e 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.pramod-appointment-subtitle {
font-size: 1.2rem;
font-weight: 500;
color: #64748b;
letter-spacing: 0.3px;
}
.pramod-appointment-wrapper {
display: flex;
justify-content: center;
}
.pramod-appointment-card {
width: 100%;
max-width: 900px;
background: #ffffff;
border-radius: 24px;
padding: 40px;
box-shadow: 0 20px 60px rgba(15, 23, 42, 0.1);
border: 1px solid rgba(21, 166, 78, 0.1);
position: relative;
overflow: hidden;
}
.pramod-appointment-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #15a64e, #1fc066);
}
.pramod-appointment-card iframe {
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
}
/* Blog Detail */
.pb-blog-detail-hero {
padding: 80px 0 30px;
background: linear-gradient(180deg, #f0f9f5 0%, #ffffff 100%);
}
.pb-blog-detail-container {
max-width: 900px;
margin: 0 auto;
padding: 0 24px;
}
.pb-blog-detail-date {
font-size: 14px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--pramod-text-light);
margin-bottom: 12px;
}
.pb-blog-detail-title {
font-size: clamp(32px, 5vw, 44px);
font-weight: 700;
color: var(--pramod-text-dark);
margin-bottom: 16px;
}
.pb-blog-detail-intro {
font-size: 18px;
color: var(--pramod-text-light);
max-width: 720px;
}
.pb-blog-detail-content {
padding: 20px 0 80px;
background: #ffffff;
}
.pb-blog-detail-feature {
margin: 0 0 32px;
}
.pb-blog-detail-feature img {
width: 100%;
border-radius: 28px;
box-shadow: 0 20px 45px rgba(21, 166, 78, 0.15);
display: block;
}
.pb-blog-detail-body {
background: #ffffff;
}
.pb-blog-detail-body h2 {
font-size: 24px;
margin: 32px 0 12px;
color: var(--pramod-text-dark);
}
.pb-blog-detail-body p {
font-size: 17px;
line-height: 1.8;
color: var(--pramod-text-light);
margin-bottom: 16px;
}
.pb-blog-detail-list,
.pb-blog-detail-ordered {
padding-left: 20px;
margin: 16px 0;
color: var(--pramod-text-dark);
line-height: 1.8;
}
.pb-blog-detail-list li {
margin-bottom: 8px;
}
.pb-blog-detail-quote {
background: #f5fcf8;
border-left: 4px solid var(--pramod-primary-color);
padding: 18px 24px;
border-radius: 12px;
font-style: italic;
color: var(--pramod-text-dark);
margin: 24px 0;
}
.pb-blog-detail-quote span {
display: block;
margin-top: 8px;
font-weight: 600;
color: var(--pramod-primary-color);
}
.pb-blog-detail-cta {
margin-top: 32px;
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: center;
}
.pb-blog-detail-link {
color: var(--pramod-primary-color);
font-weight: 600;
text-decoration: none;
}
@media (max-width: 600px) {
.pb-blog-detail-title {
font-size: 28px;
}
.pb-blog-detail-body h2 {
font-size: 20px;
}
}
/* Locations Section */
.pramod-locations-section {
padding: 100px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f0f7f4 100%);
position: relative;
overflow: hidden;
}
.pramod-locations-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(21, 166, 78, 0.2), transparent);
}
.pramod-locations-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 1;
}
.pramod-locations-header {
text-align: center;
margin-bottom: 60px;
}
.pramod-locations-main-title {
color: var(--pramod-primary-color);
font-weight: 800;
font-size: 42px;
margin-bottom: 12px;
letter-spacing: -1px;
background: linear-gradient(135deg, var(--pramod-primary-color), #0d8a3d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.pramod-locations-subtitle {
font-size: 1.25rem;
font-weight: 500;
color: var(--pramod-text-dark);
opacity: 0.85;
}
.pramod-locations-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
gap: 35px;
}
.pramod-location-card {
background: var(--pramod-white);
border-radius: 24px;
padding: 0;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
transition: all 0.4s
cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(21, 166, 78, 0.08);
overflow: hidden;
position: relative;
min-height: 360px;
}
.pramod-location-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--pramod-primary-color), #0d8a3d);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.pramod-location-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 50px rgba(21, 166, 78, 0.2);
border-color: rgba(21, 166, 78, 0.25);
}
.pramod-location-card:hover::before {
transform: scaleX(1);
}
.pramod-location-content {
text-align: left;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.pramod-location-content.home{
align-items: center;
}
.pramod-location-logo-wrapper {
width: 100%;
padding: 30px 20px;
background: linear-gradient(135deg, rgba(21, 166, 78, 0.03), rgba(21, 166, 78, 0.08));
border-radius: 16px;
margin-bottom: 10px;
transition: all 0.3s ease;
}
.pramod-location-card:hover .pramod-location-logo-wrapper {
background: linear-gradient(135deg, rgba(21, 166, 78, 0.08), rgba(21, 166, 78, 0.15));
transform: scale(1.02);
}
.pramod-location-logo {
max-width: 220px;
height: auto;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
transition: all 0.3s ease;
}
.pramod-location-card:hover .pramod-location-logo {
transform: scale(1.05);
}
.pramod-location-name {
font-size: 24px;
font-weight: 700;
color: var(--pramod-text-dark);
margin: 0;
line-height: 1.3;
}
.pramod-location-address-wrapper {
display: flex;
align-items: flex-start;
gap: 12px;
text-align: left;
width: 100%;
padding: 20px;
border-radius: 12px;
margin: 10px 0;
}
.pramod-location-icon {
color: var(--pramod-primary-color);
flex-shrink: 0;
margin-top: 2px;
opacity: 0.8;
}
.pramod-location-address {
font-size: 15px;
line-height: 1.8;
color: var(--pramod-text-light);
margin: 0;
flex: 1;
}
.pramod-location-map-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
background: linear-gradient(135deg, var(--pramod-primary-color), #0d8a3d);
color: white;
text-decoration: none;
border-radius: 12px;
font-weight: 600;
font-size: 15px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 15px rgba(21, 166, 78, 0.3);
margin-top: 10px;
}
.pramod-location-map-btn svg:first-child {
width: 18px;
height: 18px;
}
.pramod-location-map-btn svg:last-child {
width: 16px;
height: 16px;
transition: transform 0.3s ease;
}
.pramod-location-map-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(21, 166, 78, 0.4);
background: linear-gradient(135deg, #0d8a3d, var(--pramod-primary-color));
}
.pramod-location-map-btn:hover svg:last-child {
transform: translateX(4px);
}
.pramod-location-map-btn:active {
transform: translateY(0);
}
/* Legacy support for old link structure */
.pramod-location-link {
margin: 0;
}
.pramod-location-link a {
color: var(--pramod-primary-color);
text-decoration: none;
font-size: 14px;
transition: color 0.3s ease;
}
.pramod-location-link a:hover {
color: var(--pramod-primary-dark);
text-decoration: underline;
}
/* Modern About Page Hero Section */
.pramod-about-hero {
padding: 20px 0 20px;
background: linear-gradient(135deg, var(--pramod-primary-color) 0%, #0d8a3d 50%, var(--pramod-primary-color) 100%);
position: relative;
overflow: hidden;
min-height: 200px;
display: flex;
align-items: center;
}
.pramod-about-hero-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
url('data:image/svg+xml,');
opacity: 0.4;
}
.pramod-about-hero-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 2;
}
.pramod-about-hero-content {
text-align: center;
position: relative;
z-index: 3;
}
.pramod-about-hero-badge {
display: inline-block;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
color: var(--pramod-white);
padding: 12px 28px;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
margin-bottom: 25px;
border: 2px solid rgba(255, 255, 255, 0.3);
text-transform: uppercase;
letter-spacing: 1px;
animation: fadeInUp 0.6s ease;
}
.pramod-about-hero-title {
font-size: 56px;
font-weight: 900;
color: var(--pramod-white);
margin-bottom: 20px;
letter-spacing: -2px;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
animation: fadeInUp 0.8s ease 0.2s both;
line-height: 1.2;
}
.pramod-about-hero-subtitle {
font-size: 22px;
font-weight: 500;
color: rgba(255, 255, 255, 0.95);
margin-bottom: 35px;
animation: fadeInUp 0.8s ease 0.4s both;
}
.pramod-breadcrumbs {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
animation: fadeInUp 0.8s ease 0.6s both;
}
.breadcrumb-item {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
font-size: 15px;
transition: all 0.3s ease;
font-weight: 500;
}
.breadcrumb-item:hover {
color: var(--pramod-white);
transform: translateY(-2px);
}
.breadcrumb-item.active {
color: var(--pramod-white);
font-weight: 700;
}
.breadcrumb-separator {
color: rgba(255, 255, 255, 0.6);
font-weight: 300;
}
.pramod-about-hero-shapes {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 1;
}
.dropdown-item:active
{
background-color:none!important
}
.pramod-hero-shape {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
animation: float 20s infinite ease-in-out;
}
.pramod-hero-shape.shape-1 {
width: 300px;
height: 300px;
top: -150px;
right: -150px;
animation-delay: 0s;
}
.pramod-hero-shape.shape-2 {
width: 200px;
height: 200px;
bottom: -100px;
left: 10%;
animation-delay: 5s;
}
.pramod-hero-shape.shape-3 {
width: 150px;
height: 150px;
top: 30%;
right: 15%;
animation-delay: 10s;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes float {
0%, 100% {
transform: translate(0, 0) rotate(0deg);
}
33% {
transform: translate(30px, -30px) rotate(120deg);
}
66% {
transform: translate(-20px, 20px) rotate(240deg);
}
}
/* Media Gallery Section */
.pramod-locations-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.pramod-location-content {
padding: 25px 20px;
gap: 0px;
}
.pramod-location-logo-wrapper {
padding: 20px 10px;
text-align:center;
}
.pramod-location-logo {
max-width: 160px;
}
.pramod-location-name {
font-size: 18px;
}
.pramod-location-name.home{
text-align:center;
}
.pramod-location-address-wrapper {
padding: 15px;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.pramod-location-icon {
margin-top: 0;
}
.pramod-location-address {
font-size: 18px;
color: #5b5b5b;
line-height: 1.6;
font-weight: 600;
}
.pramod-location-address.cont{
text-align: left;
}
.pramod-location-map-btn {
padding: 12px 20px;
font-size: 13px;
width: 100%;
justify-content: center;
}
.pramod-footer-title {
font-size: 18px;
}
/* Responsive Adjustments */
@media (max-width: 992px) {
.pramod-about-content-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.pramod-about-image-wrapper {
max-width: 500px;
margin: 0 auto;
}
.pramod-about-main-title {
font-size: 28px;
}
.pramod-about-text-wrapper::before {
width: 300px;
height: 300px;
left: -100px;
}
}
@media (max-width: 768px) {
.pramod-about-wrapper {
padding: 50px 0;
}
.pramod-about-main-title {
font-size: 19px;
padding-top: 20px;
}
.pramod-about-badge {
font-size: 12px;
padding: 8px 20px;
}
.pramod-about-badge-overlay {
margin-top: 25px;
padding: 25px 20px;
border-radius: 16px;
}
.pramod-about-badge-overlay .pramod-about-badge {
font-size: 14px;
padding: 12px 24px;
margin-bottom: 16px;
}
.pramod-about-qualification {
font-size: 16px;
}
.pramod-about-text-wrapper {
padding-left: 20px;
}
.pramod-about-text-wrapper::before {
width: 250px;
height: 250px;
left: -80px;
}
.pramod-about-cta-button {
padding: 12px 28px;
font-size: 14px;
}
.display-4 {
font-size: 2rem;
}
.lead {
font-size: 1rem;
}
.pramod-benefit-item
{
display: flex;
align-items: flex-start;
gap: 15px;
padding: 15px 20px;
background: none;
border-radius: 12px;
box-shadow: none;
transition: all 0.3s
ease;
}
}
/* Modern Media Slider Section */
.pramod-media-slider-section {
padding: 100px 0;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 50%, #f0f7f4 100%);
position: relative;
overflow: hidden;
}
.pramod-media-slider-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(21, 166, 78, 0.2), transparent);
}
.pramod-media-slider-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.pramod-media-slider-header {
text-align: center;
margin-bottom: 60px;
}
.pramod-media-slider-title {
font-size: 48px;
font-weight: 800;
color: var(--pramod-primary-color);
margin-bottom: 15px;
letter-spacing: -1px;
background: linear-gradient(135deg, var(--pramod-primary-color), #0d8a3d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.pramod-media-slider-subtitle {
font-size: 1.3rem;
font-weight: 500;
color: var(--pramod-text-dark);
opacity: 0.85;
text-transform: uppercase;
letter-spacing: 2px;
}
.pramod-media-slider-wrapper {
position: relative;
display: flex;
align-items: center;
gap: 20px;
}
.pramod-media-slider-btn {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, var(--pramod-primary-color), #0d8a3d);
color: var(--pramod-white);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 6px 20px rgba(21, 166, 78, 0.3);
flex-shrink: 0;
z-index: 2;
}
.pramod-media-slider-btn:hover {
transform: scale(1.1);
box-shadow: 0 8px 30px rgba(21, 166, 78, 0.4);
}
.pramod-media-slider-btn:active {
transform: scale(0.95);
}
.pramod-media-slider-track {
display: flex;
gap: 30px;
overflow: hidden;
flex: 1;
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
.pramod-media-slide {
min-width: calc((100% - 30px) / 2);
flex-shrink: 0;
cursor: pointer;
border-radius: 20px;
overflow: hidden;
aspect-ratio: 4/3;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.pramod-media-slide:hover {
transform: translateY(-10px) scale(1.02);
}
.pramod-media-slide-image-wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 20px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.pramod-media-slide-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
display: block;
}
.pramod-media-slide:hover .pramod-media-slide-image {
transform: scale(1.15);
}
.pramod-media-slide-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to top, rgba(21, 166, 78, 0.9), rgba(21, 166, 78, 0.4), transparent);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.4s ease;
border-radius: 20px;
}
.pramod-media-slide:hover .pramod-media-slide-overlay {
opacity: 1;
}
.pramod-media-zoom-icon {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid rgba(255, 255, 255, 0.5);
transform: scale(0.8);
transition: transform 0.4s ease;
}
.pramod-media-slide:hover .pramod-media-zoom-icon {
transform: scale(1);
}
.pramod-media-zoom-icon svg {
color: var(--pramod-white);
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}
.pramod-media-slider-dots {
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 12px;
align-items: center;
}
.pramod-media-slider-dot {
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid var(--pramod-primary-color);
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
padding: 0;
}
.pramod-media-slider-dot:hover {
transform: scale(1.3);
background: rgba(21, 166, 78, 0.3);
}
.pramod-media-slider-dot.active {
background: var(--pramod-primary-color);
width: 32px;
border-radius: 6px;
box-shadow: 0 2px 10px rgba(21, 166, 78, 0.4);
}
/* Zoom Modal with Controls */
.pramod-media-zoom-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.96);
display: none;
align-items: center;
justify-content: center;
z-index: 10000;
opacity: 0;
transition: opacity 0.4s ease;
backdrop-filter: blur(10px);
}
.pramod-media-zoom-modal.active {
display: flex;
opacity: 1;
}
.pramod-media-zoom-wrapper {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.pramod-media-zoom-close {
position: absolute;
top: 30px;
right: 30px;
background: rgba(255, 255, 255, 0.15);
border: 2px solid rgba(255, 255, 255, 0.3);
color: var(--pramod-white);
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
z-index: 10;
}
.pramod-media-zoom-close:hover {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.5);
transform: rotate(90deg) scale(1.1);
}
.pramod-media-zoom-controls {
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 12px;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
padding: 10px;
border-radius: 50px;
z-index: 10;
}
.pramod-zoom-btn {
width: 45px;
height: 45px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
border: 2px solid rgba(255, 255, 255, 0.3);
color: var(--pramod-white);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.pramod-zoom-btn:hover {
background: var(--pramod-primary-color);
border-color: var(--pramod-primary-color);
transform: scale(1.1);
}
.pramod-media-zoom-content {
width: 95vw;
height: 85vh;
overflow: auto;
display: flex;
align-items: center;
justify-content: center;
cursor: grab;
padding: 20px;
}
.pramod-media-zoom-content:active {
cursor: grabbing;
}
.pramod-media-zoomed-image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 16px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center center;
user-select: none;
pointer-events: none;
cursor: move;
}
.pramod-media-zoom-content.zoomed {
cursor: grab;
}
.pramod-media-zoom-content.zoomed:active {
cursor: grabbing;
}
/* Modern Qualification Section */
.pramod-qualification-section {
padding: 100px 0;
background: linear-gradient(357deg, #e9e9e9 0%, #fbfbfb 100%);
position: relative;
overflow: hidden;
}
.pramod-qualification-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(21, 166, 78, 0.2), transparent);
}
.pramod-qualification-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 1;
}
.pramod-qualification-header {
text-align: center;
margin-bottom: 60px;
position: relative;
padding-bottom: 40px;
}
.pramod-qualification-header::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: linear-gradient(90deg, var(--pramod-primary-color), var(--pramod-primary-light));
border-radius: 2px;
}
.pramod-qualification-main-title {
font-size: 42px;
font-weight: 800;
color: var(--pramod-text-dark);
margin-bottom: 15px;
letter-spacing: -1px;
position: relative;
}
.pramod-qualification-subtitle {
font-size: 14px;
font-weight: 600;
color: var(--pramod-primary-color);
text-transform: uppercase;
letter-spacing: 4px;
margin-top: 20px;
position: relative;
display: inline-block;
}
.pramod-qualification-subtitle::before,
.pramod-qualification-subtitle::after {
content: '';
position: absolute;
top: 50%;
width: 50px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--pramod-primary-color), transparent);
opacity: 0.4;
}
.pramod-qualification-subtitle::before {
left: -70px;
}
.pramod-qualification-subtitle::after {
right: -70px;
}
.pramod-accordion-wrapper {
display: flex;
flex-direction: column;
gap: 20px;
}
.pramod-accordion-item {
background: var(--pramod-white);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
border: 2px solid rgba(21, 166, 78, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.pramod-accordion-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--pramod-primary-color), var(--pramod-primary-light));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.pramod-accordion-item:hover::before {
transform: scaleX(1);
}
.pramod-accordion-item:hover {
box-shadow: 0 12px 40px rgba(21, 166, 78, 0.15);
transform: translateY(-4px);
border-color: rgba(21, 166, 78, 0.2);
}
.pramod-accordion-header {
padding: 28px 35px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(135deg, #ffffff 0%, #f8fbf9 100%);
transition: all 0.3s ease;
position: relative;
}
.pramod-accordion-header::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
background: linear-gradient(180deg, var(--pramod-primary-color), var(--pramod-primary-light));
opacity: 0;
transition: opacity 0.3s ease;
}
.pramod-accordion-header:not(.collapsed)::after {
opacity: 1;
}
.pramod-accordion-header:not(.collapsed) {
background: linear-gradient(135deg, rgba(21, 166, 78, 0.06), rgba(21, 166, 78, 0.02));
}
.pramod-accordion-header h5 {
margin: 0;
font-size: 22px;
font-weight: 700;
color: var(--pramod-text-dark);
letter-spacing: -0.3px;
transition: color 0.3s ease;
position: relative;
padding-left: 45px;
}
.pramod-accordion-header h5::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
background: linear-gradient(135deg, rgb(66 149 98 / 10%), rgb(21 166 78 / 79%));
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s
ease;
}
.pramod-accordion-header:not(.collapsed) h5 {
color: var(--pramod-primary-color);
}
.pramod-accordion-header:not(.collapsed) h5::before {
background: linear-gradient(135deg, var(--pramod-primary-color), var(--pramod-primary-light));
}
.pramod-accordion-header i {
font-size: 20px;
color: var(--pramod-primary-color);
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease, background 0.3s ease;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(21, 166, 78, 0.1);
position: relative;
}
.pramod-accordion-header:not(.collapsed) i {
transform: rotate(45deg);
background: linear-gradient(135deg, var(--pramod-primary-color), var(--pramod-primary-light));
color: var(--pramod-white);
box-shadow: 0 4px 15px rgba(21, 166, 78, 0.4);
}
.pramod-accordion-content {
overflow: hidden;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.pramod-accordion-content.collapse:not(.show) {
display: none;
}
.pramod-accordion-content.collapsing {
height: 0;
overflow: hidden;
transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.pramod-accordion-body {
padding: 0 35px 35px;
color: var(--pramod-text-light);
line-height: 1.9;
font-size: 16px;
animation: fadeInUp 0.5s ease;
}
.pramod-accordion-body p {
margin-bottom: 18px;
}
.pramod-accordion-body p:last-child {
margin-bottom: 0;
}
.pramod-accordion-body strong {
color: var(--pramod-text-dark);
font-weight: 700;
font-size: 17px;
}
.pramod-accordion-body ul,
.pramod-accordion-body ol {
margin: 18px 0;
padding-left: 30px;
}
.pramod-accordion-body li {
margin-bottom: 12px;
line-height: 1.8;
position: relative;
}
.pramod-accordion-body ul li::marker {
color: var(--pramod-primary-color);
font-weight: 700;
}
.pramod-accordion-body li:last-child {
margin-bottom: 0;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(15px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 992px) {
.pramod-media-slider-section {
padding: 80px 0;
}
.pramod-media-slider-title {
font-size: 38px;
}
.pramod-media-slider-wrapper {
gap: 15px;
}
.pramod-media-slider-btn {
width: 50px;
height: 50px;
}
.pramod-media-slider-track {
gap: 20px;
}
.pramod-media-slide {
min-width: calc((100% - 20px) / 2);
}
.pramod-qualification-section {
padding: 80px 0;
}
.pramod-qualification-main-title {
font-size: 36px;
}
.pramod-qualification-subtitle::before,
.pramod-qualification-subtitle::after {
width: 30px;
}
.pramod-qualification-subtitle::before {
left: -50px;
}
.pramod-qualification-subtitle::after {
right: -50px;
}
}
@media (max-width: 768px) {
.pramod-media-slider-section {
padding: 70px 0;
}
.pramod-media-slider-title {
font-size: 32px;
}
.pramod-media-slider-wrapper {
flex-direction: column;
gap: 20px;
}
.pramod-media-slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
}
.pramod-media-slider-prev {
left: 10px;
}
.pramod-media-slider-next {
right: 10px;
}
.pramod-media-slider-track {
gap: 15px;
}
.pramod-media-slide {
min-width: 100%;
}
.pramod-media-slider-dots {
bottom: -40px;
}
.pramod-media-zoom-controls {
top: 15px;
left: 50%;
transform: translateX(-50%);
padding: 8px;
gap: 8px;
}
.pramod-zoom-btn {
width: 40px;
height: 40px;
}
.pramod-media-zoom-close {
top: 15px;
right: 15px;
width: 45px;
height: 45px;
}
.pramod-qualification-section {
padding: 70px 0;
}
.pramod-qualification-main-title {
font-size: 32px;
}
.pramod-qualification-header {
padding-bottom: 30px;
}
.pramod-accordion-header {
padding: 22px 25px;
}
.pramod-accordion-header h5 {
font-size: 18px;
padding-left: 40px;
}
.pramod-accordion-header h5::before {
width: 30px;
height: 30px;
}
.pramod-accordion-header i {
width: 36px;
height: 36px;
font-size: 18px;
}
.pramod-accordion-body {
padding: 0 25px 25px;
font-size: 15px;
}
}
@media (max-width: 480px) {
.pramod-media-slider-section {
padding: 60px 0;
}
.pramod-media-slider-title {
font-size: 28px;
}
.pramod-media-slider-subtitle {
font-size: 1rem;
letter-spacing: 1px;
}
.pramod-media-slider-btn {
width: 45px;
height: 45px;
}
.pramod-media-slide {
border-radius: 16px;
}
.pramod-media-slide-image-wrapper {
border-radius: 16px;
}
.pramod-qualification-section {
padding: 60px 0;
}
.pramod-qualification-main-title {
font-size: 28px;
}
.pramod-qualification-subtitle {
font-size: 12px;
letter-spacing: 2px;
}
.pramod-qualification-subtitle::before,
.pramod-qualification-subtitle::after {
display: none;
}
.pramod-accordion-wrapper {
gap: 15px;
}
.pramod-accordion-header {
padding: 18px 20px;
}
.pramod-accordion-header h5 {
font-size: 16px;
padding-left: 35px;
}
.pramod-accordion-header h5::before {
width: 28px;
height: 28px;
}
.pramod-accordion-header i {
width: 32px;
height: 32px;
font-size: 16px;
}
.pramod-accordion-body {
padding: 0 20px 20px;
font-size: 14px;
}
.pramod-media-zoom-content {
width: 100vw;
height: 90vh;
}
}
/* Custom Utility Classes */
.text-shadow {
text-shadow: 2px 2px 4px rgba(0,0,0,.2);
}
.section-padding {
padding: 4rem 0;
}
/* Animation */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.card {
animation: fadeIn 0.6s ease-out;
}
/* Additional Modern Touches */
.pramod-about-image-frame::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
/* background: rgba(21, 166, 78, 0.1);
border-radius: 50%; */
transition: width 0.6s ease, height 0.6s ease;
pointer-events: none;
}
.pramod-about-image-wrapper:hover .pramod-about-image-frame::after {
width: 100%;
height: 100%;
}
/* Why Choose Dr. Pramod Bhor Section - Modern Features Design */
.pramod-features-section {
padding: 80px 0;
background: linear-gradient(180deg, #ffffff 0%, #f8fdf9 50%, #ffffff 100%);
position: relative;
overflow: hidden;
}
.pramod-features-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 20% 30%, rgba(21, 166, 78, 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(21, 166, 78, 0.03) 0%, transparent 50%);
pointer-events: none;
}
.pramod-features-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 1;
}
.pramod-features-header {
text-align: center;
margin-bottom: 60px;
}
.pramod-features-main-title {
font-size: 36px;
font-weight: 700;
color: var(--pramod-primary-color);
margin-bottom: 12px;
letter-spacing: -0.5px;
}
.pramod-features-subtitle {
font-size: 20px;
color: var(--pramod-text-light);
font-weight: 500;
margin: 0;
}
.pramod-features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 30px;
}
.pramod-feature-card {
background: var(--pramod-white);
border-radius: 20px;
padding: 40px 30px;
text-align: center;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(21, 166, 78, 0.1);
position: relative;
overflow: hidden;
}
.pramod-feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--pramod-primary-color), var(--pramod-primary-light));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.pramod-feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(21, 166, 78, 0.2);
border-color: rgba(21, 166, 78, 0.3);
}
.pramod-feature-card:hover::before {
transform: scaleX(1);
}
.pramod-feature-icon-wrapper {
margin-bottom: 25px;
display: flex;
justify-content: center;
align-items: center;
}
.pramod-feature-icon-circle {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(21, 166, 78, 0.1), rgba(21, 166, 78, 0.05));
display: flex;
justify-content: center;
align-items: center;
color: var(--pramod-primary-color);
transition: all 0.4s ease;
position: relative;
}
.pramod-feature-icon-circle::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(135deg, var(--pramod-primary-color), var(--pramod-primary-light));
opacity: 0;
transition: opacity 0.4s ease;
}
.pramod-feature-icon-circle svg {
position: relative;
z-index: 1;
transition: all 0.4s ease;
}
.pramod-feature-card:hover .pramod-feature-icon-circle {
background: linear-gradient(135deg, var(--pramod-primary-color), var(--pramod-primary-light));
transform: scale(1.1) rotate(5deg);
box-shadow: 0 8px 25px rgba(21, 166, 78, 0.3);
}
.pramod-feature-card:hover .pramod-feature-icon-circle::after {
opacity: 1;
}
.pramod-feature-card:hover .pramod-feature-icon-circle svg {
color: var(--pramod-white);
transform: scale(1.1);
}
.pramod-feature-title {
font-size: 22px;
font-weight: 700;
color: var(--pramod-text-dark);
margin-bottom: 15px;
line-height: 1.3;
transition: color 0.3s ease;
}
.pramod-feature-card:hover .pramod-feature-title {
color: var(--pramod-primary-color);
}
.pramod-feature-description {
font-size: 15px;
line-height: 1.7;
color: var(--pramod-text-light);
margin: 0;
}
/* Responsive Design for Features Section */
@media (max-width: 992px) {
.pramod-features-grid {
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
.pramod-features-main-title {
font-size: 32px;
}
}
@media (max-width: 768px) {
.pramod-features-section {
padding: 60px 0;
}
.pramod-features-header {
margin-bottom: 40px;
}
.pramod-features-main-title {
font-size: 28px;
}
.pramod-features-subtitle {
font-size: 18px;
}
.pramod-features-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.pramod-feature-card {
padding: 35px 25px;
}
.pramod-feature-icon-circle {
width: 70px;
height: 70px;
}
.pramod-feature-title {
font-size: 20px;
}
}
@media (max-width: 480px) {
.pramod-features-main-title {
font-size: 24px;
}
.pramod-features-subtitle {
font-size: 16px;
}
.pramod-feature-card {
padding: 30px 20px;
}
}
/* Types Of Treatments Section */
.pramod-treatments-section {
padding: 80px 0;
background: linear-gradient(357deg, #e9e9e9 0%, #fbfbfb 100%);
}
.pramod-treatments-container {
max-width: 1140px;
margin: 0 auto;
padding: 0 20px;
}
.pramod-treatments-header {
text-align: center;
margin-bottom: 48px;
}
.pramod-treatments-main-title {
font-size: 32px;
font-weight: 700;
color: var(--pramod-primary-color);
letter-spacing: -0.4px;
margin-bottom: 12px;
}
.pramod-treatments-subtitle {
font-size: 20px;
color: var(--pramod-text-light);
margin: 0;
}
.pramod-treatments-nav-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0;
list-style: none;
padding: 0;
margin-bottom: 40px;
background: #ffffff;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
padding: 8px;
overflow: hidden;
}
.pramod-treatments-nav-item {
position: relative;
margin: 0;
}
.pramod-treatments-nav-item:not(:last-child)::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 32px;
background: linear-gradient(to bottom, #cbcbcbc9, rgb(98 201 139 / 86%), #4ac97c);
z-index: 1;
}
.pramod-treatments-nav-link {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 20px;
border: none;
background: transparent;
font-size: 15px;
font-weight: 500;
color: #64748b;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 12px;
white-space: nowrap;
min-height: 48px;
}
.pramod-tab-icon {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
flex-shrink: 0;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.pramod-tab-icon svg {
width: 100%;
height: 100%;
stroke: currentColor;
transition: stroke 0.3s ease;
}
.pramod-tab-text {
transition: color 0.3s ease;
}
.pramod-treatments-nav-link:hover {
color: var(--pramod-primary-color, #15a64e);
background: rgba(21, 166, 78, 0.06);
}
.pramod-treatments-nav-link:hover .pramod-tab-icon {
transform: scale(1.1);
}
.pramod-treatments-nav-link.active,
.pramod-treatments-nav-link[aria-selected="true"] {
color: #ffffff;
background: linear-gradient(135deg, #15a64e 0%, #0f7d3a 100%);
font-weight: 600;
box-shadow: 0 4px 12px rgba(21, 166, 78, 0.3);
}
.pramod-treatments-nav-link.active .pramod-tab-icon,
.pramod-treatments-nav-link[aria-selected="true"] .pramod-tab-icon {
transform: scale(1.15);
}
.pramod-treatments-nav-link.active .pramod-tab-icon svg,
.pramod-treatments-nav-link[aria-selected="true"] .pramod-tab-icon svg {
stroke: currentColor;
}
.pramod-treatments-nav-link::before {
content: '';
position: absolute;
inset: 0;
border-radius: 12px;
padding: 2px;
background: linear-gradient(135deg, #15a64e, #0f7d3a);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
opacity: 0;
transition: opacity 0.3s ease;
}
.pramod-treatments-nav-link:not(.active):not([aria-selected="true"]):hover::before {
opacity: 0.3;
}
.pramod-treatments-content-wrapper {
background: #ffffff;
border-radius: 20px;
box-shadow: 0 18px 45px rgba(30, 60, 50, 0.12);
padding: 40px 40px;
}
.pramod-treatments-content-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 40px;
align-items: center;
}
.pramod-treatments-image-col {
position: relative;
}
.pramod-treatments-image-col::before {
content: '';
position: absolute;
top: -18px;
right: -18px;
width: 100%;
height: 100%;
border-radius: 22px;
background: linear-gradient(135deg, rgba(21, 166, 78, 0.2), rgba(21, 166, 78, 0));
z-index: -1;
transition: transform 0.4s ease;
}
.pramod-treatments-image-col:hover::before {
transform: translate(6px, 6px);
}
.pramod-treatments-image {
width: 100%;
display: block;
border-radius: 22px;
box-shadow: 0 20px 40px rgba(21, 166, 78, 0.15);
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.pramod-treatments-image:hover {
transform: translateY(-6px);
box-shadow: 0 28px 55px rgba(21, 166, 78, 0.2);
}
.pramod-treatments-text-col h3 {
font-size: 26px;
font-weight: 700;
color: var(--pramod-text-dark);
margin-bottom: 18px;
letter-spacing: -0.3px;
}
.pramod-treatments-text-col p {
color: var(--pramod-text-light);
line-height: 1.75;
font-size: 16px;
margin-bottom: 20px;
}
.pramod-treatments-text-col p:last-child {
margin-bottom: 0;
}
.pramod-treatments-tab-pane {
transition: opacity 0.4s ease, transform 0.4s ease;
}
.pramod-treatments-tab-pane:not(.show) {
opacity: 0;
transform: translateY(20px);
}
.pramod-treatments-tab-pane.show {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 992px) {
.pramod-treatments-main-title {
font-size: 28px;
}
.pramod-treatments-content-wrapper {
padding: 32px 28px;
}
.pramod-treatments-content-row {
gap: 30px;
}
}
@media (max-width: 768px) {
.pramod-treatments-section {
padding: 60px 0;
}
.pramod-treatments-nav-list {
justify-content: flex-start;
padding: 6px;
margin-bottom: 32px;
gap: 4px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
-ms-overflow-style: auto;
}
.pramod-treatments-nav-list::-webkit-scrollbar {
height: 4px;
}
.pramod-treatments-nav-list::-webkit-scrollbar-thumb {
background: rgba(21, 166, 78, 0.5);
border-radius: 999px;
}
.pramod-treatments-nav-item:not(:last-child)::after {
height: 24px;
}
.pramod-treatments-nav-link {
padding: 10px 16px;
font-size: 14px;
min-height: 44px;
gap: 6px;
}
.pramod-tab-icon {
width: 18px;
height: 18px;
}
.pramod-treatments-content-row {
grid-template-columns: 1fr;
}
.pramod-treatments-image-col {
order: -1;
}
}
@media (max-width: 480px) {
.pramod-treatments-main-title {
font-size: 24px;
}
.pramod-treatments-subtitle {
font-size: 18px;
}
.pramod-treatments-nav-list {
padding: 4px;
margin-bottom: 24px;
overflow-x: auto;
}
.pramod-treatments-nav-item:not(:last-child)::after {
display: none;
}
.pramod-treatments-nav-link {
padding: 8px 12px;
font-size: 13px;
min-height: 40px;
gap: 5px;
}
.pramod-tab-icon {
width: 16px;
height: 16px;
}
.pramod-tab-text {
font-size: 13px;
}
.pramod-treatments-content-wrapper {
padding: 26px 20px;
}
}
@media (max-width: 360px) {
.pramod-treatments-nav-link {
padding: 8px 10px;
flex-direction: column;
gap: 4px;
}
.pramod-tab-text {
font-size: 11px;
}
}
/* BEGIN LOCKED STYLES: Treatments We Provide */
.tw-services-section {
padding: 20px;
}
.tw-services-panel {
position: relative;
border-radius: 44px;
padding:10px;
color: #fff;
overflow: hidden;
}
.tw-services-panel::before,
.tw-services-panel::after {
content: "";
position: absolute;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
filter: blur(0);
}
.tw-services-panel::before {
width: 240px;
height: 240px;
top: -120px;
right: -60px;
}
.tw-services-panel::after {
width: 160px;
height: 160px;
bottom: -100px;
left: -40px;
background: rgba(255, 255, 255, 0.08);
}
.tw-services-header {
position: relative;
z-index: 1;
}
.tw-services-badge {
display: inline-flex;
align-items: center;
padding: 0.45rem 1.35rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
color: #ffffff;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 1rem;
}
.tw-services-title {
font-size: 29px;
font-weight: 700;
letter-spacing: -0.4px;
text-align: center;
color: #3c3c3c;
line-height: 40px;
padding-bottom: 20px;
}
.tw-services-controls {
position: relative;
z-index: 1;
}
.tw-control-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.35);
background: rgba(255, 255, 255, 0.15);
transition: all 0.3s ease;
}
.tw-control-btn svg {
width: 22px;
height: 22px;
stroke: #ffffff;
stroke-width: 2;
fill: none;
transition: stroke 0.3s ease;
}
.tw-control-btn:hover {
background: #ffffff;
border-color: #ffffff;
transform: translateY(-2px);
}
.tw-control-btn:hover svg {
stroke: #1a7fad;
}
.tw-service-cards {
position: relative;
z-index: 1;
/* margin-top: clamp(2.5rem, 5vw, 3.5rem); */
}
.tw-service-card {
position: relative;
min-height: 420px;
border-radius: 28px;
margin: 15px;
overflow: hidden;
display: flex;
align-items: flex-end;
isolation: isolate;
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.tw-service-card img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
z-index: -1;
}
.tw-service-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(195deg, rgba(6, 10, 18, 0.05) 0%, rgba(6, 10, 18, 0.55) 55%, rgba(6, 10, 18, 0.88) 100%);
z-index: 0;
}
.tw-service-info {
position: relative;
z-index: 1;
width: 100%;
padding: 1.75rem 1.75rem 1.5rem;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.tw-service-name {
font-size: 1.15rem;
font-weight: 600;
color: #ffffff;
margin: 0;
max-width: 70%;
line-height: 1.35;
}
.tw-service-plus {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.35);
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(4px);
transition: all 0.3s ease;
}
.tw-service-plus svg {
width: 20px;
height: 20px;
stroke: #ffffff;
stroke-width: 2;
fill: none;
transition: stroke 0.3s ease;
}
.tw-service-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(6, 39, 64, 0.25);
}
.tw-service-card:hover img {
transform: scale(1.06);
}
.tw-service-card:hover .tw-service-plus {
background: #ffffff;
border-color: #ffffff;
}
.tw-service-card:hover .tw-service-plus svg {
stroke: #1a7fad;
}
.tw-services-description
{
font-size: 16px;
line-height: 1.8;
color: #3c3c3c;
padding-top: 10px;
margin-bottom: 20px;
text-align: center;
}
@media (max-width: 992px) {
.tw-services-panel {
border-radius: 36px;
}
.tw-service-card {
min-height: 300px;
}
}
/* hero section css */
.ootd-hero {
background: linear-gradient(135deg, #f4f5fb 0%, #ffffff 40%, #fef3f2 100%);
padding: 90px 0;
font-family: 'Poppins', sans-serif;
}
.ootd-hero-surface {
border-radius: 36px;
padding: 10px;
}
.ootd-feature-card {
position: relative;
border-radius: 32px;
overflow: hidden;
min-height: 740px;
padding: 40px 36px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
color: #ffffff;
background: linear-gradient(180deg, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0.75) 68%), url('treatments/dr-pramod-bhor-orthopedic-robotic-Knee-and-hip-joint-replacement surgeon.png') center center / cover no-repeat;
box-shadow: 0 26px 70px rgba(15, 23, 42, 0.42), 0 18px 36px rgb(125 207 157 / 45%);
z-index: 0;
}
.ootd-feature-overlay-content {
position: relative;
z-index: 2;
width: 100%;
padding: 30px;
background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.85) 50%, rgba(15, 23, 42, 0) 100%);
border-radius: 24px;
backdrop-filter: blur(4px);
}
.ootd-feature-doctor-name {
font-size: 42px;
font-weight: 700;
color: #ffffff;
margin: 0 0 8px 0;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
line-height: 1.2;
letter-spacing: -0.5px;
}
.ootd-feature-doctor-degree {
font-size: 20px;
font-weight: 500;
color: rgba(255, 255, 255, 0.95);
margin: 0;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
letter-spacing: 0.5px;
}
.ootd-feature-card::before {
content: '';
position: absolute;
inset: -40px;
border-radius: 38px;
filter: blur(30px);
opacity: 0.65;
z-index: -1;
}
.ootd-feature-chip {
display: inline-flex;
align-items: center;
gap: 10px;
background-color: rgba(255, 255, 255, 0.18);
border-radius: 999px;
padding: 12px 22px;
font-size: 14px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.ootd-feature-chip::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #ff6636;
}
.ootd-feature-title {
margin-top: 20px;
font-size: 40px;
font-weight: 600;
}
.ootd-feature-text {
margin-top: 12px;
font-size: 15px;
line-height: 1.8;
color: rgba(255, 255, 255, 0.82);
}
.ootd-feature-play {
display: inline-flex;
align-items: center;
justify-content: center;
width: 70px;
height: 70px;
border-radius: 50%;
background: linear-gradient(135deg, #ff784b 0%, #ff2d55 100%);
box-shadow: 0 12px 30px rgba(255, 83, 73, 0.45);
}
.ootd-feature-play svg {
width: 18px;
height: 18px;
fill: #fff;
transform: translateX(2px);
}
.ootd-hero-head {
margin-bottom: 48px;
}
.ootd-icon-button {
border: none;
background: rgba(15, 23, 42, 0.08);
width: 52px;
height: 52px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.ootd-icon-button span,
.ootd-icon-button span::before,
.ootd-icon-button span::after {
content: '';
display: block;
width: 20px;
height: 2px;
background-color: #0f172a;
border-radius: 999px;
}
.ootd-icon-button span::before {
margin-top: -6px;
}
.ootd-icon-button span::after {
margin-top: 10px;
}
.ootd-brand {
display: flex;
align-items: baseline;
gap: 4px;
font-weight: 600;
font-size: 24px;
color: #0f172a;
}
.ootd-brand em {
color: #ff5833;
font-style: normal;
}
.ootd-head-actions {
display: flex;
align-items: center;
gap: 16px;
}
.ootd-head-icon {
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(15, 23, 42, 0.06);
display: inline-flex;
align-items: center;
justify-content: center;
}
.ootd-head-icon svg {
width: 20px;
height: 20px;
stroke: #0f172a;
stroke-width: 1.7;
fill: none;
}
.ootd-hero-text-content {
position: relative;
z-index: 2;
padding: 20px 0;
}
.ootd-hero-title {
font-size: 32px;
font-weight: 700;
color: #ffffff;
margin-bottom: 22px;
line-height: 1.4;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 4px 20px rgba(0, 0, 0, 0.3);
}
.ootd-hero-copy {
font-size: 17px;
line-height: 1.9;
color: #6b7280;
max-width: 520px;
margin-bottom: 30px;
}
.ootd-hero-cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 20px;
border-radius: 999px;
background: linear-gradient(135deg, #15a64e 0%, #64bb86 100%);
color: #ffffff;
font-weight: 600;
letter-spacing: 0.04em;
text-decoration: none;
box-shadow: 0 18px 32px rgba(255, 83, 73, 0.35);
}
.ootd-card-grid {
margin-top: 50px;
}
.ootd-mini-card {
position: relative;
border-radius: 26px;
overflow: hidden;
min-height: 320px;
display: flex;
align-items: flex-end;
padding: 30px 26px;
color: #ffffff;
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ootd-mini-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 35px rgba(15, 23, 42, 0.22);
}
.ootd-mini-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(185deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0.78) 85%);
}
.ootd-mini-card > * {
position: relative;
z-index: 1;
}
.ootd-mini-card h4 {
font-size: 20px;
font-weight: 600;
margin-bottom: 6px;
}
.ootd-mini-card p {
margin-bottom: 0;
font-size: 15px;
color: rgba(255, 255, 255, 0.78);
}
.ootd-mini-card .ootd-card-arrow {
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 18px;
}
.ootd-mini-card .ootd-card-arrow svg {
width: 14px;
height: 14px;
stroke: #ffffff;
stroke-width: 2;
fill: none;
}
.ootd-mini-card.beauty {
background: url('https://s3.ap-south-1.amazonaws.com/cdn1.cr/dr-pramod-bhor-robotic-joint-replacement+/treatment-partial-knee-replacement-dr-pramod-bhor.jpg') center center / cover no-repeat;
}
.ootd-mini-card.flower {
background: url('https://s3.ap-south-1.amazonaws.com/cdn1.cr/dr-pramod-bhor-robotic-joint-replacement+/treatment-shoulder-replacement-dr-pramod-bhor.jpg') center center / cover no-repeat;
}
.ootd-mini-card.shirt {
background: url('https://s3.ap-south-1.amazonaws.com/cdn1.cr/dr-pramod-bhor-robotic-joint-replacement+/treatment-knee-replacement-dr-pramod-bhor.jpg') center center / cover no-repeat;
}
/* Modern Spotlight Sections */
.pb-edu-shorts-section,
.pb-media-highlights-section,
.pb-events-conference-section,
.pb-awards-showcase-section,
.pb-instagram-edu-section,
.pb-testimonials-mixed-section {
padding: 30px 0;
background: linear-gradient(182deg, #e9e9e9 0%, #fbfbfb 100%);
}
.pb-edu-shorts-container,
.pb-media-highlights-container,
.pb-events-conference-container,
.pb-awards-showcase-container,
.pb-instagram-edu-container,
.pb-testimonials-mixed-container {
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
}
.pb-edu-shorts-header,
.pb-media-highlights-header,
.pb-events-conference-header,
.pb-awards-showcase-header,
.pb-instagram-edu-header,
.pb-testimonials-mixed-header {
text-align: center;
margin-bottom: 45px;
}
.pb-media-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 18px;
margin-bottom: 32px;
}
.pb-media-grid--expanded {
gap: 22px;
}
.pb-media-item {
background: #fff;
border-radius: 18px;
border: 1px solid #eceff5;
padding: 12px;
box-shadow: 0 12px 30px rgba(5, 11, 22, 0.08);
display: flex;
flex-direction: column;
gap: 10px;
}
.pb-media-thumb {
border-radius: 12px;
overflow: hidden;
background: #f6f7fb;
}
.pb-media-thumb img {
width: 100%;
display: block;
object-fit: cover;
}
.pb-media-item figcaption {
font-size: 0.95rem;
font-weight: 600;
color: #1f2430;
margin: 0 4px;
}
.pb-awards-showcase-layout {
display: flex;
gap: 32px;
align-items: stretch;
}
.pb-awards-showcase-media {
flex: 0 0 360px;
border-radius: 28px;
overflow: hidden;
box-shadow: 0 25px 55px rgba(21, 166, 78, 0.15);
margin-bottom: 20px;
}
.pb-awards-showcase-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pb-edu-shorts-badge,
.pb-media-highlights-badge,
.pb-events-conference-badge,
.pb-awards-showcase-badge,
.pb-instagram-edu-badge,
.pb-testimonials-mixed-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 20px;
border-radius: 999px;
background: rgba(21, 166, 78, 0.1);
color: var(--pramod-primary-color);
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.15em;
margin-bottom: 16px;
}
.pb-edu-shorts-badge::before,
.pb-media-highlights-badge::before,
.pb-events-conference-badge::before,
.pb-awards-showcase-badge::before,
.pb-instagram-edu-badge::before,
.pb-testimonials-mixed-badge::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--pramod-primary-color);
}
.pb-edu-shorts-title,
.pb-media-highlights-title,
.pb-events-conference-title,
.pb-awards-showcase-title,
.pb-instagram-edu-title,
.pb-testimonials-mixed-title {
font-size: clamp(28px, 4vw, 38px);
font-weight: 700;
color: var(--pramod-text-dark);
margin-bottom: 12px;
}
.pb-edu-shorts-description,
.pb-instagram-edu-description {
max-width: 700px;
margin: 0 auto;
color: var(--pramod-text-light);
font-size: 16px;
}
.pb-edu-shorts-grid,
.pb-media-highlights-grid,
.pb-awards-showcase-grid,
.pb-instagram-edu-grid,
.pb-testimonials-mixed-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 28px;
}
.pb-edu-shorts-card,
.pb-media-highlights-card,
.pb-awards-showcase-card,
.pb-instagram-edu-card,
.pb-testimonials-written-card,
.pb-testimonials-video-card {
background: var(--pramod-white);
border-radius: 24px;
box-shadow: 0 18px 40px rgba(21, 166, 78, 0.08);
border: 1px solid rgba(21, 166, 78, 0.08);
overflow: hidden;
margin: 10px;
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.pb-edu-shorts-card:hover,
.pb-media-highlights-card:hover,
.pb-awards-showcase-card:hover,
.pb-instagram-edu-card:hover,
.pb-testimonials-written-card:hover,
.pb-testimonials-video-card:hover {
transform: translateY(-8px);
box-shadow: 0 25px 50px rgba(21, 166, 78, 0.18);
}
.pb-edu-shorts-video,
.pb-media-highlights-video,
.pb-testimonials-video-wrapper {
position: relative;
padding-bottom: 56.25%;
overflow: hidden;
}
.pb-edu-shorts-video iframe,
.pb-media-highlights-video iframe,
.pb-media-highlights-video video,
.pb-testimonials-video-wrapper iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
border-radius: 12px 12px 0 0;
}
.pb-testimonials-mixed-grid {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
align-items: stretch;
gap: 32px;
}
.pb-testimonials-left,
.pb-testimonials-right {
width: 100%;
}
.pb-testimonials-slider {
position: relative;
padding: 40px;
border-radius: 32px;
background: linear-gradient(135deg, #ffffff 0%, #eefcf5 100%);
min-height: 380px;
overflow: hidden;
box-shadow: 0 30px 70px rgba(21, 166, 78, 0.15);
}
.pb-testimonials-slider .pb-testimonials-written-card {
position: absolute;
inset: 40px;
background: transparent;
border-left: none;
box-shadow: none;
opacity: 0;
transform: translateY(30px);
transition: opacity 0.45s ease, transform 0.45s ease;
pointer-events: none;
}
.pb-testimonials-slider .pb-testimonials-written-card::before {
display: none;
}
.pb-testimonials-slider .pb-testimonials-written-card.is-active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.pb-testimonials-slider .pb-testimonials-rating span {
font-size: 20px;
}
.pb-testimonials-nav {
position: absolute;
top: 50%;
width: 46px;
height: 46px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.9);
color: var(--pramod-primary-color);
box-shadow: 0 12px 25px rgba(21, 166, 78, 0.25);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transform: translateY(-50%);
transition: transform 0.2s ease, box-shadow 0.2s ease;
z-index: 3;
}
.pb-testimonials-nav svg {
width: 18px;
height: 18px;
}
.pb-testimonials-nav.prev {
left: 14px;
}
.pb-testimonials-nav.next {
right: 14px;
}
.pb-testimonials-nav:hover {
transform: translateY(-50%) scale(1.05);
box-shadow: 0 18px 35px rgba(21, 166, 78, 0.35);
}
.pb-testimonials-dots {
position: absolute;
left: 50%;
bottom: 18px;
transform: translateX(-50%);
display: inline-flex;
gap: 10px;
z-index: 2;
}
.pb-testimonials-dots button {
width: 12px;
height: 12px;
border-radius: 50%;
border: none;
background: rgba(21, 166, 78, 0.3);
cursor: pointer;
transition: transform 0.3s ease, background 0.3s ease;
}
.pb-testimonials-dots button.is-active {
background: var(--pramod-primary-color);
transform: scale(1.2);
}
.pb-testimonials-right .pb-testimonials-video-card {
/* height: 100%; */
display: flex;
flex-direction: column;
}
.pb-testimonials-right .pb-testimonials-video-wrapper {
flex: 1;
}
.pb-testimonials-right .pb-testimonials-video-meta {
flex-shrink: 0;
}
.pb-testimonials-reel-card {
margin-top: 24px;
border-radius: 28px;
overflow: hidden;
box-shadow: 0 25px 45px rgba(21, 166, 78, 0.15);
}
.pb-testimonials-reel-card iframe {
width: 100%;
aspect-ratio: 9 / 16;
border: 0;
display: block;
}
.pb-edu-shorts-video {
padding-bottom: 127.78%; /* Standard vertical shorts height (9:16) */
}
.pb-media-highlights-description {
max-width: 640px;
margin: 0 auto 10px;
color: var(--pramod-text-light);
font-size: 16px;
}
.pb-media-highlights-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 28px;
align-items: stretch;
}
.pb-media-highlights-card {
display: flex;
flex-direction: column;
min-height: 100%;
}
.pb-media-card-video .pb-media-highlights-video,
.pb-media-card-image .pb-media-highlights-image {
border-radius: 20px 20px 0 0;
overflow: hidden;
}
.pb-media-highlights-video {
position: relative;
padding-bottom: 56.25%;
}
.pb-media-highlights-video iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.pb-media-highlights-video.vertical {
padding-bottom: 177.78%;
}
.pb-media-highlights-video.horizontal {
padding-bottom: 56.25%;
}
.pb-media-highlights-row {
row-gap: 24px;
margin-bottom: 30px;
}
.pb-media-highlights-row:last-of-type {
margin-bottom: 0;
}
.pb-media-frame {
position: relative;
padding: 8px;
border-radius: 28px;
background: linear-gradient(135deg, rgba(21, 166, 78, 0.18), rgba(21, 166, 78, 0.05));
box-shadow: 0 25px 45px rgba(21, 166, 78, 0.12);
overflow: hidden;
}
.pb-media-frame::after {
content: '';
position: absolute;
inset: 12px;
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 22px;
pointer-events: none;
}
.pb-media-frame iframe,
.pb-media-frame img {
position: relative;
z-index: 1;
width: 100%;
border: 0;
border-radius: 20px;
display: block;
}
.pb-media-frame img {
height: 100%;
object-fit: cover;
}
.pb-media-highlights-image {
position: relative;
padding-bottom: 65%;
}
.pb-media-highlights-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.pb-media-highlights-content {
padding: 22px 24px 26px;
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.pb-media-pill {
display: inline-flex;
align-items: center;
padding: 4px 14px;
border-radius: 99px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
background: rgba(21, 166, 78, 0.1);
color: var(--pramod-primary-color);
text-transform: uppercase;
}
.pb-media-highlight-wide {
grid-column: span 2;
}
@media (max-width: 768px) {
.pb-media-highlight-wide {
grid-column: span 1;
}
}
.pb-edu-shorts-body {
padding: 22px 24px 28px;
}
.pb-edu-shorts-body h3 {
font-size: 20px;
margin-bottom: 10px;
color: var(--pramod-text-dark);
}
.pb-edu-shorts-body p {
margin: 0;
color: var(--pramod-text-light);
line-height: 1.7;
}
.pb-media-highlights-card {
display: flex;
flex-direction: column;
}
.pb-media-highlights-image {
width: 100%;
height: 240px;
object-fit: cover;
}
.pb-media-highlights-content {
padding: 24px;
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
}
.pb-media-highlights-content a {
color: var(--pramod-primary-color);
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.pb-media-highlights-content a::after {
content: '↗';
font-size: 14px;
}
.pb-events-conference-timeline {
position: relative;
display: flex;
flex-direction: column;
gap: 32px;
padding-left: 32px;
}
.pb-events-conference-timeline::before {
content: '';
position: absolute;
top: 0;
left: 10px;
width: 2px;
height: 100%;
background: linear-gradient(180deg, rgba(21,166,78,0.15), rgba(21,166,78,0.5));
}
.pb-events-conference-item {
position: relative;
background: var(--pramod-white);
border-radius: 20px;
padding: 24px 28px;
box-shadow: 0 10px 35px rgba(21, 166, 78, 0.1);
border: 1px solid rgba(21, 166, 78, 0.06);
}
.pb-events-conference-meta {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--pramod-text-light);
margin-bottom: 10px;
}
.pb-events-location::before {
content: '📍';
margin-right: 6px;
}
.pb-events-format {
font-weight: 600;
color: var(--pramod-primary-color);
}
.pb-events-conference-item::before {
content: '';
position: absolute;
top: 24px;
left: -23px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--pramod-primary-color);
box-shadow: 0 0 0 8px rgba(21, 166, 78, 0.15);
}
.pb-events-conference-date {
font-size: 14px;
font-weight: 600;
color: var(--pramod-primary-color);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 8px;
}
.pb-events-conference-details h3 {
margin-bottom: 8px;
color: var(--pramod-text-dark);
}
.pb-events-conference-tags {
list-style: none;
padding: 0;
margin: 16px 0 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.pb-events-conference-tags li {
padding: 6px 14px;
background: rgba(21, 166, 78, 0.08);
border-radius: 999px;
font-size: 12px;
font-weight: 600;
color: var(--pramod-primary-color);
}
.pb-awards-showcase-card {
padding: 24px;
border-left: 4px solid var(--pramod-primary-color);
display: flex;
align-items: flex-start;
gap: 18px;
position: relative;
}
.pb-awards-showcase-card h3 {
font-size: 20px;
color: var(--pramod-text-dark);
margin-bottom: 10px;
}
.pb-awards-showcase-card p {
margin: 0;
color: var(--pramod-text-light);
}
.pb-awards-icon {
width: 48px;
height: 48px;
border-radius: 16px;
background: rgba(21, 166, 78, 0.1);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.pb-awards-icon svg {
width: 26px;
height: 26px;
stroke: var(--pramod-primary-color);
stroke-width: 1.5;
fill: none;
}
.pb-awards-icon svg path:first-child {
fill: rgba(21, 166, 78, 0.15);
stroke: none;
}
.pb-awards-year {
position: absolute;
top: 24px;
right: 24px;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--pramod-text-light);
}
@media (max-width: 992px) {
.pb-awards-showcase-layout {
flex-direction: column;
}
.pb-awards-showcase-media {
flex: 0 0 auto;
min-height: 260px;
}
}
.pb-instagram-edu-card {
padding: 6px;
border-radius: 28px;
background: linear-gradient(135deg, rgba(21, 166, 78, 0.1), rgba(21, 166, 78, 0.02));
}
.pb-instagram-edu-media {
position: relative;
border-radius: 22px;
overflow: hidden;
aspect-ratio: 9 / 16;
background: #000;
}
.pb-instagram-edu-media iframe {
width: 100%;
height: 100%;
border: 0;
}
.pb-instagram-edu-overlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 18px 20px 20px;
background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.75) 90%);
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
}
.pb-instagram-edu-overlay span {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.02em;
}
.pb-instagram-edu-cta {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
color: #fff;
text-decoration: none;
font-size: 13px;
font-weight: 600;
transition: background 0.3s ease;
}
.pb-instagram-edu-cta:hover {
background: rgba(255, 255, 255, 0.3);
}
.pb-testimonials-written-card {
padding: 26px;
display: flex;
flex-direction: column;
gap: 14px;
}
.pb-testimonials-rating {
color: #f5a524;
letter-spacing: 4px;
font-size: 18px;
}
.pb-testimonials-written-quote {
font-style: italic;
color: var(--pramod-text-light);
margin: 0;
}
.pb-testimonials-author {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
}
.pb-testimonials-author h4 {
margin-bottom: 4px;
}
.pb-testimonials-case {
padding: 6px 14px;
border-radius: 999px;
background: rgba(21, 166, 78, 0.1);
color: var(--pramod-primary-color);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.pb-testimonials-video-meta {
padding: 20px 22px 26px;
display: flex;
flex-direction: column;
gap: 8px;
}
.pb-testimonials-video-meta a {
color: var(--pramod-primary-color);
font-weight: 600;
text-decoration: none;
}
.pb-testimonials-video-meta a::after {
content: '↗';
margin-left: 6px;
}
@media (max-width: 768px) {
.pb-edu-shorts-section,
.pb-media-highlights-section,
.pb-events-conference-section,
.pb-awards-showcase-section,
.pb-instagram-edu-section,
.pb-testimonials-mixed-section {
padding: 20px 0;
}
.pb-events-conference-timeline {
padding-left: 0;
}
.pb-events-conference-timeline::before,
.pb-events-conference-item::before {
display: none;
}
.pb-testimonials-mixed-grid {
grid-template-columns: 1fr;
}
.pb-testimonials-slider {
padding: 32px;
min-height: 340px;
}
.pb-testimonials-slider .pb-testimonials-written-card {
inset: 32px;
}
.pb-testimonials-nav.prev {
left: 6px;
}
.pb-testimonials-nav.next {
right: 6px;
}
}
@media (max-width: 1199.98px) {
.ootd-hero-surface {
padding: 44px;
}
}
@media (max-width: 991.98px) {
.ootd-hero {
padding: 70px 0;
}
.ootd-hero-head {
margin-bottom: 32px;
}
.ootd-feature-card {
min-height: 460px;
}
}
@media (max-width: 767.98px) {
.ootd-hero {
padding: 60px 0 70px;
}
.ootd-hero-surface {
padding: 30px 24px;
border-radius: 28px;
}
.ootd-feature-card {
padding: 32px 28px;
border-radius: 24px;
}
.ootd-feature-title {
font-size: 34px;
}
.ootd-hero-head {
flex-direction: column;
align-items: flex-start !important;
gap: 20px;
}
.ootd-head-actions {
gap: 12px;
}
.ootd-card-grid {
margin-top: 40px;
}
.pb-awards-year {
position: absolute;
top: 24px;
right: 24px;
font-size: 12px;
display: none;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--pramod-text-light);
}
}
@media (max-width: 575.98px) {
.ootd-icon-button,
.ootd-head-icon {
width: 46px;
height: 46px;
}
.ootd-hero-cta {
width: 100%;
text-align: center;
}
.ootd-mini-card {
min-height: 210px;
padding: 26px 22px;
}
.ootd-mini-card h4 {
font-size: 18px;
}
}
.ootd-hero {
position: relative;
padding: 90px 0;
background: url('treatments/dr-pramod-bhor-bg-banner.jpg') center center / cover no-repeat;
}
.ootd-hero::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, rgb(248 248 251 / 26%) 12%, rgb(209 243 223 / 0%) 100%);
}
.ootd-hero > .container-xxl {
position: relative;
z-index: 1;
}
.ootd-hero-surface {
background: rgb(46 43 43 / 74%);
backdrop-filter: blur(6px);
border-radius: 32px;
padding: 56px;
}
.ootd-feature-card {
position: relative;
border-radius: 28px;
min-height: 520px;
overflow: hidden;
display: flex;
align-items: flex-end;
justify-content: flex-start;
background: linear-gradient(200deg, rgba(241, 87, 43, 0.08) 0%, rgba(15, 23, 42, 0.8) 100%), url('treatments/dr-pramod-bhor-orthopedic-robotic-Knee-and-hip-joint-replacement surgeon.png') center center / cover no-repeat;
}
.ootd-feature-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.4) 50%, rgba(15, 23, 42, 0) 100%);
z-index: 1;
}
.ootd-feature-card > * {
position: relative;
z-index: 2;
}
.ootd-feature-card img {
width: 100%;
height: auto;
}
@media (max-width: 767.98px) {
.ootd-hero {
padding: 70px 0;
}
.ootd-hero-surface {
padding: 32px 24px;
}
.ootd-feature-overlay-content {
padding: 24px 20px;
}
.ootd-feature-doctor-name {
font-size: 32px;
}
.ootd-feature-doctor-degree {
font-size: 16px;
}
.ootd-hero-title {
font-size: 26px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4);
}
.banner-subtitle {
font-size: 16px;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
}
}
@media (max-width: 480px) {
.ootd-feature-overlay-content {
padding: 20px 16px;
}
.ootd-feature-doctor-name {
font-size: 28px;
}
.ootd-feature-doctor-degree {
font-size: 14px;
}
.ootd-hero-title {
font-size: 22px;
}
.banner-subtitle {
font-size: 15px;
}
}
.ootd-header {
position: sticky;
top: 0;
z-index: 1050;
backdrop-filter: blur(6px);
}
.ootd-top-bar {
background: linear-gradient(357deg, #e9e9e9 0%, #fbfbfb 100%);
color: #fff;
font-size: 14px;
padding: 10px 0;
}
.ootd-top-bar-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.ootd-top-contact-grid {
display: flex;
gap: 16px;
flex-wrap: nowrap;
}
.ootd-top-contact-card {
display: flex;
align-items: center;
gap: 14px;
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(21, 166, 78, 0.15);
border-radius: 16px;
padding: 10px 18px;
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
min-width: 220px;
}
.ootd-top-contact-icon {
width: 30px;
height: 30px;
background: linear-gradient(135deg, #15a64e, #1fc066);
display: inline-flex;
align-items: center;
justify-content: center;
display: flex;
margin: auto;
border-radius: 50%;
color: #fff;
justify-content: center;
align-items: center;
font-size: 1.1rem;
box-shadow: 0 10px 25px rgba(21, 166, 78, 0.4);
}
.ootd-top-contact-details {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.ootd-top-contact-label {
margin: 0;
font-size: 0.88rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #4b5563;
font-weight: 600;
}
.ootd-top-contact-number {
font-size: 1.1rem;
font-weight: 700;
color: #0f172a;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.ootd-top-contact-number i {
color: #15a64e;
}
.pramod-footer-contact-grid {
flex-direction: column;
width: 100%;
gap: 12px;
}
.pramod-footer-contact-grid .ootd-top-contact-card {
width: 100%;
}
.ootd-top-bar a {
color: #040404;
text-decoration: none;
font-size: 16px;
font-weight: 600;
}
.ootd-top-bar .ootd-social {
display: flex;
align-items: center;
gap: 12px;
}
.ootd-top-bar .ootd-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(21, 166, 78, 0.1);
color: #4b5563;
text-decoration: none;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 1.15rem;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
position: relative;
overflow: hidden;
}
.ootd-top-bar .ootd-social a::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.3));
opacity: 0;
transition: opacity 0.3s ease;
}
.ootd-top-bar .ootd-social a:hover::before {
opacity: 1;
}
.ootd-top-bar .ootd-social a i {
position: relative;
z-index: 1;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Facebook Brand Color */
.ootd-top-bar .ootd-social a[aria-label="Facebook"]:hover {
background: linear-gradient(135deg, #1877f2, #42a5f5);
color: #ffffff;
border-color: #1877f2;
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 20px rgba(24, 119, 242, 0.35);
}
/* Instagram Brand Color */
.ootd-top-bar .ootd-social a[aria-label="Instagram"]:hover {
background: linear-gradient(135deg, #e4405f, #f77737, #fccc63);
color: #ffffff;
border-color: #e4405f;
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 20px rgba(228, 64, 95, 0.35);
}
/* YouTube Brand Color */
.ootd-top-bar .ootd-social a[aria-label="YouTube"]:hover {
background: linear-gradient(135deg, #ff0000, #ff4444);
color: #ffffff;
border-color: #ff0000;
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 20px rgba(255, 0, 0, 0.35);
}
.ootd-top-bar .ootd-social a:hover i {
transform: scale(1.15);
}
.ootd-navbar {
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
padding: 6px 0;
}
.ootd-navbar .navbar-brand img {
height: 65px;
width: auto;
}
.ootd-navbar .nav-link {
font-weight: 500;
color: #0f172a;
padding: 12px 18px;
}
.ootd-navbar .nav-link:hover,
.ootd-navbar .nav-link:focus,
.ootd-navbar .nav-link.active {
color: #ff6133;
}
.ootd-navbar .dropdown-menu {
border-radius: 16px;
border: none;
box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
padding: 12px;
min-width: 220px;
}
/* Treatments Dropdown Menu Styles */
.treatments-dropdown-menu {
min-width: 280px;
padding: 12px 8px !important;
border-radius: 16px;
border: none;
box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
background: #ffffff;
}
.treatments-dropdown-menu .dropdown-item {
border-radius: 10px;
padding: 12px 16px;
font-weight: 500;
color: #0f172a;
font-size: 14px;
transition: all 0.3s ease;
margin-bottom: 4px;
display: flex;
align-items: center;
justify-content: space-between;
}
.treatments-dropdown-menu .dropdown-item:hover,
.treatments-dropdown-menu .dropdown-item:focus {
background-color: rgba(21, 166, 78, 0.08);
color: var(--pramod-primary-color, #15a64e);
transform: translateX(3px);
}
.treatments-dropdown-menu .dropdown-item.dropdown-toggle::after {
margin-left: auto;
border-top: 0.3em solid;
border-right: 0.3em solid transparent;
border-bottom: 0;
border-left: 0.3em solid transparent;
transition: transform 0.3s ease;
}
/* Sub-menu Styles */
.dropdown-submenu {
position: relative;
}
.sub-dropdown-menu {
position: absolute;
top: 0;
left: 100%;
min-width: 280px;
margin-left: 8px;
padding: 12px 8px !important;
border-radius: 16px;
border: none;
box-shadow: 0 18px 36px rgba(15, 23, 42, 0.15);
background: #ffffff;
opacity: 0;
visibility: hidden;
transform: translateX(-10px);
transition: all 0.3s ease;
display: block;
}
.dropdown-submenu:hover > .sub-dropdown-menu,
.dropdown-submenu:focus-within > .sub-dropdown-menu,
.sub-dropdown-menu.show {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
.sub-dropdown-menu .dropdown-item {
border-radius: 10px;
padding: 10px 16px;
font-weight: 500;
color: #0f172a;
font-size: 13px;
transition: all 0.3s ease;
margin-bottom: 4px;
}
.sub-dropdown-menu .dropdown-item:hover,
.sub-dropdown-menu .dropdown-item:focus {
background-color: rgba(21, 166, 78, 0.1);
color: var(--pramod-primary-color, #15a64e);
transform: translateX(3px);
}
/* Mobile Responsive Styles */
@media (max-width: 991.98px) {
.treatments-dropdown-menu {
min-width: 100%;
padding: 12px 8px !important;
box-shadow: none;
background: transparent;
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
}
/* Custom scrollbar for treatments dropdown - mobile only */
.treatments-dropdown-menu::-webkit-scrollbar {
width: 6px;
}
.treatments-dropdown-menu::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.treatments-dropdown-menu::-webkit-scrollbar-thumb {
background: #15a64e;
border-radius: 10px;
}
.treatments-dropdown-menu::-webkit-scrollbar-thumb:hover {
background: #0f7d3a;
}
.dropdown-submenu {
position: static;
}
.sub-dropdown-menu {
position: static !important;
left: auto !important;
margin-left: 0 !important;
margin-top: 8px !important;
margin-bottom: 8px !important;
padding-left: 24px !important;
padding-right: 8px !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
box-shadow: none;
background: rgba(21, 166, 78, 0.05);
border-radius: 12px;
border-left: 3px solid var(--pramod-primary-color, #15a64e);
}
.treatments-dropdown-menu .dropdown-item {
padding: 12px 16px;
font-size: 14px;
}
.treatments-dropdown-menu .dropdown-item:hover,
.treatments-dropdown-menu .dropdown-item:focus {
transform: none;
padding-left: 16px;
}
.sub-dropdown-menu .dropdown-item {
padding: 10px 16px;
font-size: 13px;
}
.sub-dropdown-menu .dropdown-item:hover,
.sub-dropdown-menu .dropdown-item:focus {
transform: none;
padding-left: 16px;
}
.treatments-dropdown-menu .dropdown-item.dropdown-toggle::after {
transform: rotate(-90deg);
transition: transform 0.3s ease;
}
/* Make submenu toggleable on mobile */
.dropdown-submenu > .dropdown-toggle[aria-expanded="true"]::after,
.dropdown-submenu > .dropdown-toggle:focus ~ .sub-dropdown-menu.show + .dropdown-toggle::after {
transform: rotate(0deg);
}
.sub-dropdown-menu.show {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
display: block !important;
}
}
@media (max-width: 768px) {
.treatments-dropdown-menu {
padding: 10px 6px !important;
}
.treatments-dropdown-menu .dropdown-item {
padding: 10px 14px;
font-size: 13px;
}
.sub-dropdown-menu {
padding-left: 20px !important;
}
.sub-dropdown-menu .dropdown-item {
padding: 9px 14px;
font-size: 12px;
}
}
.ootd-navbar .dropdown-item {
border-radius: 10px;
padding: 10px 14px;
font-weight: 500;
color: #0f172a;
}
.ootd-navbar .dropdown-item:hover,
.ootd-navbar .dropdown-item:focus {
background-color: rgb(240 240 240);
color: #50b678;
}
.ootd-navbar .dropdown-menu .dropdown-toggle::after {
margin-left: auto;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-left: 12px;
margin-right: 12px;
}
.btn-gradient {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 28px;
border-radius: 999px;
background: linear-gradient(135deg, #15a64e 0%, #64bb86 100%);
color: #fff;
font-weight: 600;
letter-spacing: 0.02em;
text-decoration: none;
border: none;
box-shadow: 0 12px 24px rgba(255, 83, 73, 0.25);
}
.btn-gradient:hover,
.btn-gradient:focus {
color: #fff;
transform: translateY(-1px);
box-shadow: 0 18px 32px rgba(255, 83, 73, 0.35);
}
.navbar-toggler {
border: none;
box-shadow: none !important;
position: relative;
width: 30px;
height: 30px;
padding: 0;
}
.navbar-toggler:focus {
outline: none;
}
.navbar-toggler-icon {
width: 25px;
height: 2px;
background-color: #0f172a;
background-image: none !important;
display: block;
position: relative;
transition: all 0.3s ease;
}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
content: '';
width: 25px;
height: 2px;
background-color: #0f172a;
position: absolute;
left: 0;
transition: all 0.3s ease;
}
.navbar-toggler-icon::before {
top: -8px;
}
.navbar-toggler-icon::after {
top: 8px;
}
/* Close icon when menu is open */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
background-color: transparent;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
transform: rotate(45deg);
top: 0;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
transform: rotate(-45deg);
top: 0;
}
.banner-subtitle
{
color: #ffffff;
font-size: 18px;
line-height: 1.8;
padding-top: 10px;
margin-bottom: 20px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
}
@media (max-width: 991.98px) {
.ootd-navbar {
padding: 10px 0;
}
.ootd-navbar .navbar-collapse {
background: rgba(255, 255, 255, 0.96);
border-radius: 20px;
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
padding: 16px;
}
.ootd-navbar .nav-link {
padding: 10px 12px;
}
.dropdown-submenu > .dropdown-menu {
position: static;
margin: 6px 0 0;
border-left: none;
box-shadow: none;
padding-left: 18px;
}
.mega-dropdown {
position: static !important;
}
.ootd-top-bar {
text-align: center;
}
.ootd-top-bar .ootd-social {
justify-content: center;
}
}
/* hero section css end */
.ootd-hero-cta a:hover {
color: #ffffff;
}
.row.pb-media-highlights-row img
{
width:100%;
}
.edu-bg
{
background: linear-gradient(357deg, #e9e9e9 0%, #fbfbfb 100%);
}
/* */
@media (max-width: 768px) {
.tw-services-panel {
padding: 2.5rem 2.25rem;
}
.tw-services-controls {
justify-content: flex-start;
width: 100%;
}
}
@media (max-width: 576px) {
.tw-services-panel {
border-radius: 28px;
padding: 2.25rem 1.75rem;
}
.tw-services-controls {
gap: 0.75rem;
}
.tw-control-btn {
width: 44px;
height: 44px;
border-radius: 14px;
}
.tw-service-card {
min-height: 260px;
}
.tw-service-info {
padding: 1.5rem 1.35rem 1.25rem;
}
}
/* END LOCKED STYLES */
/* ============================================
MODERN MEDIA GALLERY SECTION
============================================ */
.pramod-modern-media-section {
padding: 100px 0;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 50%, #f0f7f4 100%);
position: relative;
overflow: hidden;
}
.pramod-modern-media-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.pramod-modern-media-header {
text-align: center;
margin-bottom: 60px;
}
.pramod-modern-media-title {
font-size: 3rem;
font-weight: 800;
color: var(--pramod-text-dark);
margin-bottom: 15px;
letter-spacing: -1px;
background: linear-gradient(135deg, var(--pramod-primary-color), #0d8a3d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.pramod-modern-media-subtitle {
font-size: 1.3rem;
font-weight: 500;
color: var(--pramod-text-dark);
opacity: 0.85;
text-transform: uppercase;
letter-spacing: 2px;
}
/* Swiper Slider Styles */
.pramod-media-swiper-wrapper {
margin-bottom: 60px;
padding: 20px 0;
}
.pramod-media-swiper {
padding: 20px 0 60px;
overflow: visible;
}
.pramod-media-swiper .swiper-slide {
border-radius: 20px;
overflow: hidden;
cursor: pointer;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.pramod-media-swiper .swiper-slide:hover {
transform: translateY(-10px) scale(1.02);
}
.pramod-media-swiper .swiper-slide a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
.swiper-slide-image {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 4/3;
border-radius: 20px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.pramod-media-swiper .swiper-slide:hover .swiper-slide-image {
transform: scale(1.1);
}
/* Swiper Navigation */
.pramod-media-swiper .swiper-button-next,
.pramod-media-swiper .swiper-button-prev {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--pramod-primary-color), #0d8a3d);
border-radius: 50%;
color: var(--pramod-white);
box-shadow: 0 6px 20px rgba(21, 166, 78, 0.3);
transition: all 0.3s ease;
}
.pramod-media-swiper .swiper-button-next:hover,
.pramod-media-swiper .swiper-button-prev:hover {
transform: scale(1.1);
box-shadow: 0 8px 30px rgba(21, 166, 78, 0.4);
}
.pramod-media-swiper .swiper-button-next::after,
.pramod-media-swiper .swiper-button-prev::after {
font-size: 20px;
font-weight: bold;
}
/* Swiper Pagination */
.pramod-media-swiper .swiper-pagination {
bottom: 0;
}
.pramod-media-swiper .swiper-pagination-bullet {
width: 12px;
height: 12px;
background: var(--pramod-primary-color);
opacity: 0.3;
transition: all 0.3s ease;
}
.pramod-media-swiper .swiper-pagination-bullet-active {
opacity: 1;
width: 30px;
border-radius: 6px;
background: linear-gradient(135deg, var(--pramod-primary-color), #0d8a3d);
}
/* Grid Gallery Styles */
.pramod-modern-gallery-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
margin-top: 40px;
}
.pramod-gallery-item {
position: relative;
display: block;
text-decoration: none;
border-radius: 20px;
overflow: hidden;
aspect-ratio: 4/3;
cursor: pointer;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.pramod-gallery-item:hover {
transform: translateY(-10px) scale(1.02);
}
.pramod-gallery-item-wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 20px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.pramod-gallery-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
display: block;
}
.pramod-gallery-item:hover .pramod-gallery-image {
transform: scale(1.15);
}
.pramod-gallery-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(21, 166, 78, 0.85), rgba(13, 138, 61, 0.85));
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 20px;
}
.pramod-gallery-item:hover .pramod-gallery-overlay {
opacity: 1;
}
.pramod-gallery-icon {
color: var(--pramod-white);
transform: scale(0.8);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.pramod-gallery-item:hover .pramod-gallery-icon {
transform: scale(1);
}
/* Responsive Grid Gallery */
@media (max-width: 1200px) {
.pramod-modern-gallery-grid {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
}
@media (max-width: 768px) {
.pramod-modern-media-section {
padding: 60px 0;
}
.pramod-modern-media-title {
font-size: 2rem;
}
.pramod-modern-media-subtitle {
font-size: 1rem;
}
.pramod-modern-gallery-grid {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.pramod-media-swiper-wrapper {
margin-bottom: 40px;
}
}
@media (max-width: 480px) {
.pramod-modern-gallery-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.pramod-media-swiper .swiper-button-next,
.pramod-media-swiper .swiper-button-prev {
width: 40px;
height: 40px;
}
.pramod-media-swiper .swiper-button-next::after,
.pramod-media-swiper .swiper-button-prev::after {
font-size: 16px;
}
}
/* ============================================
MODERN FOOTER SECTION
============================================ */
.pramod-modern-footer {
background: linear-gradient(357deg, #e9e9e9 0%, #fbfbfb 100%);
color: rgba(255, 255, 255, 0.85);
padding: 80px 0 0;
position: relative;
overflow: hidden;
}
.pramod-modern-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--pramod-primary-color), var(--pramod-primary-light), var(--pramod-primary-color));
background-size: 200% 100%;
animation: gradientShift 3s ease infinite;
}
.pramod-modern-footer-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.pramod-modern-footer-top {
padding-bottom: 25px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.pramod-modern-footer-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
}
.pramod-footer-two-column {
grid-template-columns: repeat(2, 1fr);
gap: 60px;
}
.pramod-modern-footer-column {
animation: fadeInUp 0.6s ease;
}
.pramod-modern-footer-logo {
margin-bottom: 25px;
}
.pramod-modern-footer-clinic-name {
font-size: 1.8rem;
font-weight: 700;
color: var(--pramod-white);
margin-bottom: 8px;
background: linear-gradient(135deg, var(--pramod-primary-color), var(--pramod-primary-light));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.pramod-modern-footer-tagline {
font-size: 0.95rem;
color: #252525;
line-height: 1.6;
margin: 0;
}
.pramod-modern-footer-contact-info {
margin-bottom: 25px;
}
.pramod-modern-footer-contact-item {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 15px;
color: rgba(255, 255, 255, 0.85);
transition: color 0.3s ease;
}
.pramod-modern-footer-contact-item i {
color: var(--pramod-primary-color);
font-size: 1.1rem;
width: 20px;
text-align: center;
}
.pramod-modern-footer-contact-item a {
color: rgb(58 58 58 / 92%);
text-decoration: none;
transition: color 0.3s ease;
}
.pramod-modern-footer-contact-item a:hover {
color: var(--pramod-primary-light);
}
.pramod-modern-footer-social {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.pramod-modern-social-link {
width: 42px;
height: 42px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: #e0e0e0;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 1.1rem;
}
.pramod-modern-social-link {
background: linear-gradient(135deg, var(--pramod-primary-color), var(--pramod-primary-light));
border-color: transparent;
color: var(--pramod-white);
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(21, 166, 78, 0.3);
}
.pramod-modern-footer-column-title {
font-size: 1.3rem;
font-weight: 700;
color: rgb(66 66 66 / 95%);
margin-bottom: 25px;
position: relative;
padding-bottom: 15px;
}
.pramod-modern-footer-column-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background: linear-gradient(90deg, var(--pramod-primary-color), var(--pramod-primary-light));
border-radius: 2px;
}
.pramod-modern-footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.pramod-modern-footer-links li {
margin-bottom: 12px;
}
.pramod-modern-footer-links li a {
color: rgb(0 0 0 / 82%);
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.3s
ease;
font-size: 0.95rem;
}
.pramod-modern-footer-links li a i {
font-size: 0.7rem;
color: var(--pramod-primary-light);
transition: transform 0.3s ease;
}
.pramod-modern-footer-links li a:hover {
color: var(--pramod-primary-light);
transform: translateX(5px);
}
.pramod-modern-footer-links li a:hover i {
transform: translateX(3px);
}
.pramod-modern-footer-locations-grid {
display: grid;
gap: 20px;
}
.pramod-modern-footer-location-card {
display: flex;
gap: 18px;
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(21, 166, 78, 0.15);
border-radius: 20px;
padding: 24px;
text-decoration: none;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
position: relative;
overflow: hidden;
height: 100%;
}
.pramod-modern-footer-location-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(21, 166, 78, 0.02), rgba(31, 192, 102, 0.02));
opacity: 0;
transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.pramod-modern-footer-location-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(15, 23, 42, 0.15);
border-color: rgba(21, 166, 78, 0.3);
}
.pramod-modern-footer-location-card:hover::before {
opacity: 1;
}
.pramod-modern-footer-location-icon-wrapper {
width: 56px;
height: 56px;
min-width: 56px;
border-radius: 14px;
background: linear-gradient(135deg, #15a64e, #1fc066);
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 1.4rem;
box-shadow: 0 8px 24px rgba(21, 166, 78, 0.3);
position: relative;
z-index: 1;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.pramod-modern-footer-location-card:hover .pramod-modern-footer-location-icon-wrapper {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 12px 32px rgba(21, 166, 78, 0.4);
}
.pramod-modern-footer-location-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
z-index: 1;
}
.pramod-modern-footer-location-name {
font-size: 1.25rem;
font-weight: 700;
color: #0f172a;
margin: 0;
transition: color 0.3s ease;
}
.pramod-modern-footer-location-subtitle {
font-size: 1rem;
color: #4d5a52;
font-weight: 600;
margin: 0;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.pramod-modern-footer-location-address {
font-size: 0.95rem;
color: #475569;
line-height: 1.7;
margin: 8px 0 12px 0;
flex: 1;
}
.pramod-modern-footer-map-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: #15a64e;
font-size: 0.95rem;
font-weight: 600;
margin-top: auto;
transition: all 0.3s ease;
width: fit-content;
}
.pramod-modern-footer-location-card:hover .pramod-modern-footer-map-link {
color: #1fc066;
gap: 12px;
}
.pramod-modern-footer-map-link i {
transition: transform 0.3s ease;
}
.pramod-modern-footer-location-card:hover .pramod-modern-footer-map-link i {
transform: translateX(4px);
}
.pramod-modern-footer-bottom {
padding: 16px 0;
background: linear-gradient(90deg, rgb(0 0 0 / 12%), rgba(255, 255, 255, 0));
margin-top: 30px;
text-align: center;
display: flex;
margin: auto;
justify-content: center;
}
.pramod-modern-footer-bottom-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.pramod-modern-footer-copyright {
color: rgba(29, 29, 29, 0.75);
font-size: 1.1rem;
margin: 0;
}
.pramod-modern-footer-legal {
display: flex;
align-items: center;
gap: 15px;
color: rgba(255, 255, 255, 0.75);
font-size: 0.9rem;
}
.pramod-modern-footer-legal a {
color: rgb(0 0 0 / 85%);
text-decoration: none;
transition: color 0.3s
ease;
}
/* Contact Page */
.contact-insights-section {
padding: 40px 0;
background: radial-gradient(120% 140% at 50% 20%, rgba(21, 166, 78, 0.15), rgba(4, 8, 15, 0));
}
.contact-insights-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.contact-insights-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
}
.contact-insight-card {
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 24px;
background: rgba(9, 14, 23, 0.85);
color: #f5f5f5;
box-shadow: 0 12px 45px rgba(0, 0, 0, 0.35);
backdrop-filter: blur(10px);
}
.contact-insight-card span {
display: block;
font-size: 1.2rem;
font-weight: 700;
color: var(--pramod-primary-light);
}
.contact-insight-card p {
margin: 6px 0 0;
color: rgba(255, 255, 255, 0.7);
}
.contact-page-section {
padding: 60px 0 40px;
color: #fff;
}
.contact-page-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
}
.contact-card {
background: rgba(255, 255, 255, 0.05);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 32px;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
backdrop-filter: blur(14px);
}
.contact-card-header h2 {
font-size: 1.8rem;
margin-bottom: 8px;
color: #282726;
text-align:center;
}
.contact-card-header p {
color: rgba(255, 255, 255, 0.75);
}
.contact-badge {
display: inline-flex;
padding: 6px 14px;
border-radius: 999px;
background: rgba(21, 166, 78, 0.15);
color: var(--pramod-primary-light);
font-weight: 600;
margin-bottom: 10px;
font-size: 0.85rem;
letter-spacing: 0.5px;
}
.contact-details {
display: flex;
flex-direction: column;
gap: 12px;
margin: 24px 0;
}
.contact-link {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 0px 16px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
color: rgb(54 51 51 / 85%);
text-decoration: none;
transition: background 0.3s ease;
}
.contact-link i {
width: 32px;
height: 32px;
border-radius: 10px;
background: rgba(21, 166, 78, 0.15);
display: flex;
align-items: center;
justify-content: center;
color: var(--pramod-primary-light);
}
.contact-link:hover {
background: rgba(21, 166, 78, 0.15);
}
.contact-pill-group {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.contact-pill-group span {
padding: 8px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.8);
}
.contact-form {
display: flex;
flex-direction: column;
gap: 18px;
margin-top: 20px;
}
.form-double {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.contact-form label {
font-weight: 600;
margin-bottom: 6px;
font-weight: 600;
margin-bottom: 6px;
color: #2d2f30;
}
.contact-form input,
.contact-form textarea {
width: 100%;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgb(1 4 9 / 5%);
color: #fff;
padding: 14px 16px;
transition: border 0.2s
ease, transform 0.2s
ease;
}
.contact-form input:focus,
.contact-form textarea:focus {
border-color: var(--pramod-primary-light);
outline: none;
transform: translateY(-2px);
}
.contact-privacy {
display: block;
margin-top: 16px;
color: rgba(255, 255, 255, 0.6);
font-size: 0.85rem;
}
.hospital-attachments-section {
padding: 70px 0;
background: #dddddd;
}
.hospital-attachments-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.hospital-card {
background: rgba(255, 255, 255, 0.04);
border-radius: 32px;
border: 1px solid rgba(255, 255, 255, 0.08);
overflow: hidden;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.hospital-card-body {
padding: 32px;
}
.hospital-label {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: rgba(255, 255, 255, 0.6);
}
.hospital-card-body h3 {
margin-top: 8px;
}
.hospital-address {
margin: 16px 0;
color: rgba(255, 255, 255, 0.75);
}
.hospital-services {
padding-left: 18px;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 20px;
}
.hospital-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.hospital-map iframe {
min-height: 320px;
width: 100%;
filter: grayscale(0.6) contrast(1.1);
}
@media (max-width: 768px) {
.form-double {
grid-template-columns: 1fr;
}
.contact-card {
padding: 24px;
}
.contact-insights-grid {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.hospital-card {
grid-template-columns: 1fr;
}
/* Blog Section Responsive */
.pramod-blog-section {
padding: 60px 0;
}
.pramod-blog-main-title {
font-size: 32px;
}
.pramod-blog-subtitle {
font-size: 1rem;
}
.pramod-blog-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.pramod-blog-image-wrapper {
height: 200px;
}
.pramod-blog-content {
padding: 20px;
}
.pramod-blog-title {
font-size: 18px;
}
/* Appointment Section Responsive */
.pramod-appointment-section {
padding: 60px 0;
}
.pramod-appointment-title {
font-size: 32px;
}
.pramod-appointment-subtitle {
font-size: 1rem;
}
.pramod-appointment-card {
padding: 20px;
border-radius: 20px;
}
.pramod-appointment-card iframe {
height: 600px !important;
border-radius: 12px;
}
}
.pramod-modern-footer-legal a:hover {
color: var(--pramod-primary-light);
}
.pramod-modern-footer-legal span {
color: #666;
}
/* Responsive Footer */
@media (max-width: 1200px) {
.pramod-modern-footer-grid {
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
.pramod-footer-two-column {
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
.ootd-top-bar-inner {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.ootd-top-contact-grid {
width: 100%;
}
.ootd-top-contact-card {
flex: 1 1 260px;
}
.ootd-top-bar .ootd-social {
justify-content: flex-start;
width: 100%;
}
.ootd-top-bar .ootd-social a {
width: 40px;
height: 40px;
font-size: 1.05rem;
}
}
@media (max-width: 768px) {
.pramod-modern-footer {
padding: 60px 0 0;
}
.pramod-modern-footer-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.pramod-footer-two-column {
grid-template-columns: 1fr;
gap: 40px;
}
.pramod-modern-footer-locations-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.pramod-modern-footer-location-card {
flex-direction: column;
padding: 20px;
gap: 16px;
}
.pramod-modern-footer-location-icon-wrapper {
width: 50px;
height: 50px;
min-width: 50px;
font-size: 1.2rem;
}
.pramod-modern-footer-location-name {
font-size: 1.1rem;
}
.pramod-modern-footer-location-address {
font-size: 0.9rem;
}
.pramod-modern-footer-bottom-content {
flex-direction: column;
text-align: center;
}
.pramod-modern-footer-clinic-name {
font-size: 1.5rem;
}
}
@media (max-width: 480px) {
.pramod-modern-footer {
padding: 40px 0 0;
}
.pramod-modern-footer-top {
padding-bottom: 30px;
}
.pramod-modern-footer-column-title {
font-size: 1.1rem;
}
.pramod-modern-social-link {
width: 38px;
height: 38px;
font-size: 1rem;
}
}
/* Treatment Content Section Styles */
.pramod-treatment-content-section {
padding: 80px 0;
position: relative;
}
.pramod-treatment-content-section.pramod-treatment-alt-bg {
background: linear-gradient(180deg, #ffffff 0%, #f8fdf9 50%, #ffffff 100%);
}
.pramod-treatment-content-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.pramod-treatment-section-title {
font-size: 36px;
font-weight: 700;
color: #3e3e3e;
margin-bottom: 30px;
letter-spacing: -0.5px;
line-height: 1.3;
}
.pramod-treatment-subtitle {
font-size: 28px;
font-weight: 600;
color: var(--pramod-text-dark);
margin: 30px 0 20px;
letter-spacing: -0.3px;
}
.pramod-treatment-text-content {
margin-bottom: 30px;
}
.pramod-treatment-text-content p {
font-size: 17px;
line-height: 1.8;
color: var(--pramod-text-light);
margin-bottom: 20px;
}
.pramod-treatment-text-content p:last-child {
margin-bottom: 0;
}
/* Treatment Images Grid */
.pramod-treatment-images-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin: 40px 0;
width: 100%;
}
.pramod-treatment-image-figure {
margin: 0;
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(21, 166, 78, 0.15);
transition: transform 0.3s ease, box-shadow 0.3s ease;
width: 100%;
display: flex;
flex-direction: column;
}
.pramod-treatment-image-figure:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(21, 166, 78, 0.25);
}
.pramod-treatment-image-figure a {
display: block;
cursor: pointer;
width: 100%;
flex: 1;
min-height: 0;
position: relative;
background: transparent;
}
.pramod-treatment-image {
width: 100%;
height: auto;
display: block;
border-radius: 20px;
transition: transform 0.3s ease;
object-fit: cover;
max-width: 100%;
visibility: visible;
opacity: 1;
position: relative;
z-index: 1;
}
.pramod-treatment-image-figure:hover .pramod-treatment-image {
transform: scale(1.05);
}
.pramod-treatment-image-caption {
padding: 15px 20px;
background: linear-gradient(135deg, rgba(21, 166, 78, 0.1), rgba(21, 166, 78, 0.05));
text-align: center;
font-size: 14px;
font-weight: 500;
color: var(--pramod-text-dark);
margin: 0;
border-top: 1px solid rgba(21, 166, 78, 0.1);
}
.pramod-treatment-banner-image {
margin: 40px 0;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(21, 166, 78, 0.15);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pramod-treatment-banner-image:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(21, 166, 78, 0.25);
}
.pramod-treatment-banner-image a {
display: block;
cursor: pointer;
}
.pramod-treatment-banner-image img {
width: 100%;
height: auto;
display: block;
transition: transform 0.3s ease;
}
.pramod-treatment-banner-image:hover img {
transform: scale(1.02);
}
.pramod-treatment-banner-figure {
margin: 40px 0;
}
/* Treatment Content Grid */
.pramod-treatment-content-grid {
display: grid;
/* grid-template-columns: 1fr 400px; */
gap: 50px;
align-items: start;
margin: 30px 0;
}
.pramod-treatment-image-side {
position: sticky;
top: 100px;
}
.pramod-treatment-side-image {
width: 100%;
height: auto;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(21, 166, 78, 0.15);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pramod-treatment-side-image:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(21, 166, 78, 0.25);
}
.pramod-treatment-image-center {
text-align: center;
margin: 40px 0;
}
.pramod-treatment-center-image {
max-width: 300px;
height: auto;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(21, 166, 78, 0.15);
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
}
.pramod-treatment-center-image:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 15px 40px rgba(21, 166, 78, 0.25);
}
/* Treatment Feature Box */
.pramod-treatment-feature-box {
background: linear-gradient(135deg, rgba(21, 166, 78, 0.05), rgba(21, 166, 78, 0.02));
padding: 30px;
border-radius: 15px;
margin: 30px 0;
border-left: 4px solid var(--pramod-primary-color);
}
.pramod-treatment-feature-title {
font-size: 22px;
font-weight: 600;
color: var(--pramod-primary-color);
margin-bottom: 15px;
}
.pramod-treatment-feature-box p {
font-size: 16px;
line-height: 1.8;
color: var(--pramod-text-light);
margin: 0;
}
/* Treatment Benefits List */
.pramod-treatment-benefits-list {
list-style: none;
padding: 0;
margin: 30px 0;
}
.pramod-treatment-benefits-list li {
margin-bottom: 15px;
}
.pramod-benefit-item {
display: flex;
align-items: flex-start;
gap: 5px;
padding: 15px 20px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(21, 166, 78, 0.08);
transition: all 0.3s ease;
}
.pramod-benefit-item:hover {
transform: translateX(5px);
box-shadow: 0 6px 20px rgba(21, 166, 78, 0.15);
background: linear-gradient(135deg, rgba(21, 166, 78, 0.03), rgba(21, 166, 78, 0.01));
}
.pramod-benefit-item i {
color: var(--pramod-primary-color);
font-size: 20px;
margin-top: 2px;
flex-shrink: 0;
}
.pramod-benefit-item span {
font-size: 16px;
line-height: 1.6;
color: var(--pramod-text-light);
}
.pramod-treatment-content-wrapper,
.pramod-advantage-category {
text-align: left;
}
.pramod-treatment-content-wrapper .pramod-treatment-benefits-list,
.pramod-advantage-category .pramod-treatment-benefits-list {
width: 100%;
}
.pramod-treatment-content-wrapper .pramod-benefit-item,
.pramod-advantage-category .pramod-benefit-item {
padding-left: 0;
justify-content: flex-start;
align-items: flex-start;
}
.pramod-treatment-content-wrapper .pramod-benefit-item i,
.pramod-advantage-category .pramod-benefit-item i {
margin-top: 4px;
}
/* Treatment Process Steps */
.pramod-treatment-process-image {
margin: 40px 0;
text-align: center;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(21, 166, 78, 0.15);
}
.pramod-treatment-process-image a {
display: block;
cursor: pointer;
}
.pramod-treatment-process-image img {
width: 100%;
height: auto;
transition: transform 0.3s ease;
}
.pramod-treatment-process-image:hover img {
transform: scale(1.02);
}
.pramod-treatment-process-steps {
margin: 40px 0;
}
.pramod-process-step {
display: flex;
gap: 25px;
margin-bottom: 30px;
padding: 25px;
background: #ffffff;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(21, 166, 78, 0.1);
transition: all 0.3s ease;
border-left: 4px solid transparent;
}
.pramod-process-step:hover {
transform: translateX(5px);
box-shadow: 0 8px 25px rgba(21, 166, 78, 0.15);
border-left-color: var(--pramod-primary-color);
}
.pramod-process-step-icon {
flex-shrink: 0;
width: 10px;
height: 10px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--pramod-primary-color), var(--pramod-primary-dark));
border-radius: 50%;
color: #ffffff;
font-size: 24px;
}
.pramod-process-step-content h4 {
font-size: 20px;
font-weight: 600;
color: var(--pramod-primary-color);
margin-bottom: 10px;
}
.pramod-process-step-content p {
font-size: 16px;
line-height: 1.7;
color: var(--pramod-text-light);
margin: 0;
}
/* Advantages Grid */
.pramod-advantages-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin: 40px 0;
}
.pramod-advantage-category {
background: #ffffff;
padding: 30px;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(21, 166, 78, 0.1);
transition: all 0.3s ease;
}
.pramod-advantage-category:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(21, 166, 78, 0.15);
}
.pramod-advantage-category-title {
font-size: 24px;
font-weight: 600;
color: var(--pramod-primary-color);
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid rgba(21, 166, 78, 0.1);
}
.pramod-advantage-category .pramod-treatment-benefits-list {
margin: 0;
}
.pramod-advantage-category .pramod-benefit-item {
padding: 12px 15px;
margin-bottom: 10px;
}
/* Responsive Styles */
@media (max-width: 1200px) {
.pramod-treatment-content-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.pramod-treatment-image-side {
position: static;
}
}
@media (max-width: 992px) {
.pramod-treatment-section-title {
font-size: 30px;
}
.pramod-treatment-subtitle {
font-size: 24px;
}
.pramod-treatment-images-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.pramod-advantages-grid {
grid-template-columns: 1fr;
}
}
.pramod-about-text-wrapper h1
{
font-size:30px;
}
.pramod-about-text-wrapper h3
{
font-size:20px;
}
@media (max-width: 768px) {
.tw-services-panel {
border-radius: 28px;
padding: 10px;
}
.pramod-about-text-wrapper h3
{
font-size:20px;
}
.pramod-location-address-wrapper {
padding: 2px 0px;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.pramod-location-address-wrapper {
display: flex;
align-items: flex-start;
gap: 12px;
text-align: left;
width: 100%;
padding: 20px;
border-radius: 12px;
margin: 1px 0;
}
.pramod-locations-section {
padding: 30px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f0f7f4 100%);
position: relative;
overflow: hidden;
}
.pramod-treatment-content-section {
padding: 60px 0;
}
.pramod-treatment-section-title {
font-size: 26px;
}
.pramod-treatment-subtitle {
font-size: 22px;
}
.pramod-treatment-text-content p {
font-size: 16px;
}
.pramod-treatment-feature-box {
padding: 20px;
}
.pramod-treatment-feature-title {
font-size: 20px;
}
.pramod-process-step {
flex-direction: column;
gap: 15px;
}
.pramod-process-step-icon {
width: 20px;
height: 20px;
font-size: 20px;
}
.ootd-top-bar a {
color: #040404;
text-decoration: none;
font-size: 20px;
font-weight: 400;
justify-content: center;
text-align: center;
display: flex;
/* margin: auto; */
}
.ootd-top-bar
{
display:none;
}
.pramod-about-hero-title
{
font-size: 30px;
font-weight: 600;
color: var(--pramod-white);
margin-bottom: 20px;
letter-spacing: -2px;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
animation: fadeInUp 0.8s
ease 0.2s both;
line-height: 1.2;
}
.pramod-locations-header {
text-align: center;
margin-bottom: 30px;
}
.pramod-location-card {
background: var(--pramod-white);
border-radius: 24px;
padding: 0;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
transition: all 0.4s
cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(21, 166, 78, 0.08);
overflow: hidden;
position: relative;
min-height: 360px;
margin: 10px 0px;
}
.pramod-benefit-item {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 15px 20px;
background: none;
border-radius: 12px;
box-shadow: none;
transition: all 0.3s
ease;
}
.pramod-process-step {
flex-direction: row;
gap: 15px;
}
.pramod-about-text-wrapper h1 {
font-size: 30px;
padding-top: 15px;
}
.pramod-about-text-wrapper h1 {
font-size: 30px;
font-weight: 700;
padding-top: 15px;
text-transform: uppercase;
}
}
.pramod-about-text-wrapper h1 {
font-size: 30px;
font-weight: 700;
padding-top: 15px;
text-transform: uppercase;
}
@media (max-width: 480px) {
.pramod-treatment-content-section {
padding: 40px 0;
}
.pramod-treatment-section-title {
font-size: 22px;
}
.pramod-treatment-content-wrapper {
padding: 0 15px;
}
.pramod-benefit-item {
padding: 12px 15px;
}
.pramod-benefit-item span {
font-size: 15px;
}
}
/* Gallery Modal Styles */
.pramod-gallery-modal-content {
background: transparent;
border: none;
box-shadow: none;
}
.pramod-gallery-modal-header {
border: none;
padding: 15px 20px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 15px 15px 0 0;
justify-content: flex-end;
}
.pramod-gallery-modal-close {
background: rgba(21, 166, 78, 0.1);
border: none;
border-radius: 50%;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: all 0.3s ease;
cursor: pointer;
padding: 0;
position: relative;
z-index: 10;
}
.pramod-gallery-modal-close.btn-close::before,
.pramod-gallery-modal-close.btn-close::after {
display: none;
}
.pramod-gallery-modal-close i {
font-size: 20px;
color: var(--pramod-primary-color);
transition: all 0.3s ease;
display: block;
}
.pramod-gallery-modal-close:hover {
background: var(--pramod-primary-color);
opacity: 1;
transform: rotate(90deg);
}
.pramod-gallery-modal-close:hover i {
color: #ffffff;
}
.pramod-gallery-modal-body {
padding: 0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 0 0 15px 15px;
text-align: center;
}
.pramod-gallery-modal-image {
width: 100%;
height: auto;
max-height: 85vh;
object-fit: contain;
border-radius: 0 0 15px 15px;
animation: fadeInScale 0.3s ease-out;
}
.pramod-tab-icon-img
{
width: 45px;
height: 45px;
}
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
.ootd-hero-cta:hover
{
color:#fff;
}
/* Floating WhatsApp and Call Buttons */
.pramod-floating-buttons {
position: fixed;
right: 20px;
bottom: 30px;
z-index: 999;
display: flex;
flex-direction: column;
gap: 15px;
align-items: center;
}
.pramod-floating-btn {
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 24px;
text-decoration: none;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
overflow: visible;
}
.pramod-floating-btn i {
position: relative;
z-index: 2;
}
.pramod-floating-btn::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
opacity: 0;
transition: all 0.3s ease;
z-index: 1;
}
.pramod-floating-whatsapp {
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
}
.pramod-floating-whatsapp::before {
background: linear-gradient(135deg, #128C7E 0%, #075E54 100%);
}
.pramod-floating-call {
background: linear-gradient(135deg, #15a64e 0%, #0f7d3a 100%);
animation: pulse-call 2s infinite;
}
.pramod-floating-call::before {
background: linear-gradient(135deg, #0f7d3a 0%, #0a5d2a 100%);
}
.pramod-floating-appointment {
background: linear-gradient(135deg, #1eb96e 0%, #2563eb 100%);
}
.pramod-floating-appointment::before {
background: linear-gradient(135deg, #118d42 0%, #1d4ed8 100%);
}
.pramod-floating-btn:hover {
transform: translateY(-5px) scale(1.1);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
color: #ffffff!important;
}
.pramod-floating-btn:hover::before {
opacity: 1;
}
.pramod-floating-btn:active {
transform: translateY(-2px) scale(1.05);
}
.pramod-floating-tooltip {
position: absolute;
right: 70px;
top: 50%;
transform: translateY(-50%);
background: rgba(15, 23, 42, 0.95);
color: #ffffff;
padding: 8px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
pointer-events: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.pramod-floating-tooltip::after {
content: '';
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
border: 6px solid transparent;
border-left-color: rgba(15, 23, 42, 0.95);
}
.pramod-floating-btn:hover .pramod-floating-tooltip {
opacity: 1;
visibility: visible;
right: 75px;
}
@keyframes pulse-call {
0%, 100% {
box-shadow: 0 4px 20px rgba(21, 166, 78, 0.4);
}
50% {
box-shadow: 0 4px 25px rgba(21, 166, 78, 0.6), 0 0 0 10px rgba(21, 166, 78, 0.1);
}
}
/* footer css */
.pramod-modern-footer-locations {
margin-top: 2.5rem;
}
.pramod-modern-footer-locations-header {
display: flex;
color: #4d4d4d;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.pramod-modern-footer-locations-header h4 {
margin: 0;
font-size: 1.15rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.pramod-modern-footer-locations-divider {
flex: 1;
height: 2px;
background: linear-gradient(90deg, rgba(111, 227, 180, 0.5), transparent);
}
.pramod-modern-footer-location-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.75rem;
}
.pramod-modern-location-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 18px;
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(6px);
}
.pramod-modern-location-card-header {
display: flex;
align-items: center;
gap: 0.65rem;
font-weight: 700;
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #070808;
}
.pramod-modern-location-card-body p {
margin-bottom: 0.85rem;
color: #141313;
line-height: 1.6;
}
.pramod-modern-location-card-body a {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-weight: 600;
color: #a3f7bf;
text-decoration: none;
transition: color 0.2s ease;
}
.pramod-modern-location-card-body a:hover {
color: #ffffff;
}
.pramod-modern-location-card-map iframe {
width: 100%;
height: 220px;
border: 0;
border-radius: 14px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
/* btn css appointement */
.pb-appointment-cta-group {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin: 20px auto;
justify-content: center;
}
.pb-appointment-cta {
display: inline-flex;
align-items: center;
gap: 0.65rem;
padding: 0.9rem 1.85rem;
border-radius: 999px;
border: 1px solid #15a64e;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.9rem;
color: #23a957;
background: linear-gradient(120deg, #ffffff, #ecf7fb);
text-decoration: none;
box-shadow: 0 15px 35px rgba(79, 206, 255, 0.35);
transition: transform 0.2s
ease, box-shadow 0.2s
ease, background 0.2s
ease;
}
.pb-appointment-cta:hover {
transform: translateY(-2px);
box-shadow: 0 20px 40px rgba(79, 206, 255, 0.45);
}
.pb-appointment-cta svg {
width: 1.1rem;
height: 1.1rem;
stroke-width: 2;
}
.ootd-top-contact-icon i {
font-size: 1.0rem;
margin: auto;
align-items: center;
justify-content: center;
display: flex;
}
@media (max-width: 575px) {
.pb-appointment-cta {
width: 100%;
justify-content: center;
}
}
/* btn css appointement end */
@media (max-width: 575px) {
.pramod-modern-location-card {
padding: 1.25rem;
}
.pramod-modern-location-card-map iframe {
height: 200px;
}
}
/* footer css end */
.pramod-modern-location-card-header i
{
color: #129244;
}
/* Responsive Floating Buttons */
@media (max-width: 768px) {
.pramod-floating-buttons {
right: 15px;
bottom: 20px;
gap: 12px;
}
.pramod-floating-btn {
width: 55px;
height: 55px;
font-size: 22px;
}
.pramod-floating-tooltip {
right: 65px;
padding: 6px 12px;
font-size: 13px;
}
.pramod-floating-btn:hover .pramod-floating-tooltip {
right: 70px;
}
}
@media (max-width: 480px) {
.pramod-floating-buttons {
right: 12px;
bottom: 15px;
gap: 10px;
}
.pramod-floating-btn {
width: 50px;
height: 50px;
font-size: 20px;
}
.pramod-floating-tooltip {
display: none; /* Hide tooltips on very small screens */
}
}