@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body { font-family:var(--primary-font-family); background-color: var(--white-color); color:var(--text-color);  font-weight:var(--font-weight-400); letter-spacing:var(--letter-spacing-05); font-size:14px; line-height:20px; margin:0;  padding:0; white-space:normal; visibility:inherit; text-align:inherit; border:0px; font-stretch:inherit; overflow-x: hidden !important; transition: background 0.2s linear; }

html{height:100%; margin-bottom:0px;}

* { margin: 0; padding: 0; outline: 0; }

.container { max-width: 1200px;  /* Fix width for large screens */ margin: auto; /* Center content */ padding: 20px;}

body, div, section, a, p, aside, span, ul, li, dl, header, footer, h1, h2, h3, h4, h5, h6 {text-decoration: none; outline: none; border: none; padding: 0; margin: 0; list-style: none;}

/*custom scrollbar*/
/* width */
::-webkit-scrollbar {width:5px;}
/* Track */
::-webkit-scrollbar-track {background:var(--primary-color); }
/* Handle */
::-webkit-scrollbar-thumb {background:var(--secondary-color); }
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {background:var(--third-color); }
/*custom scrollbar*/

/*LOADER*/
.no-js #loader { display: none;}
.js #loader {display: block; position: absolute; left: 100px; top: 0;}
.se-pre-con {position: fixed; left: 0px; top:0px; width: 100%; height: 100%; z-index: 99999; background: url(../images/Preloader.gif) center no-repeat var(--white-color);}
/*LOADER*/

/*TEXT SELECTION*/
::-moz-selection {/* Code for Firefox */ color:var(--primary-color); background:var(--secondary-color);}
::selection {color:var(--primary-color); background:var(--secondary-color);}
/*TEXT SELECTION*/

h1, h2, h3, h4, h5 { font-family:var(--primary-font-family); font-weight:var(--font-weight-700); letter-spacing: var(--letter-spacing-1); text-transform: capitalize;}

.heading {margin-bottom:15px; margin-top:15px; padding:0; }
.heading h1 {font-size:45px; line-height:50px; color:var(--primary-color); margin:0; padding:0;}
.heading h2 {font-size:30px; line-height:35px; color:var(--primary-color); margin:0; padding:0;}
.heading h2 span {color:var(--secondary-color); }
.heading h3 {font-size:18px; color:var(--primary-color); line-height:25px; margin:0; padding:0; }
.heading h4 { font-size:18px; color:var(--secondary-color); line-height:25px; margin:0; padding:0;}
.heading h5 {font-size:20px; line-height:25px; color:var(--primary-color); margin:0; padding:0;}
.heading h6 {font-size:16px; line-height:24px; color: #243064; margin-bottom:0; margin-top:15px; padding:0;  text-transform: capitalize; font-weight:var(--font-weight-500); letter-spacing: var(--letter-spacing-05); }

p { color:var(--black-color); font-size:14px; line-height:20px; margin-bottom:15px; margin-top:15px; padding:0; font-weight:var(--font-weight-400); letter-spacing: var(--letter-spacing-05);}
p a {color:var(--secondary-color); font-weight:var(--font-weight-500); transition:all ease .6s;-moz-transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s;}
p a:hover {color:var(--primary-color); transition:all ease .6s;-moz-transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s;}
p span {color:var(--secondary-color); font-weight:var(--font-weight-600);}
p strong {color:#d62f2f; font-weight:var(--font-weight-600);}


/*HEADER*/
#header-1 { }

/*HEADER-FIX*/
.bg3{}
#menucont{padding: 0; margin:0 auto !important; }
#menucont p{margin: 0;}
.container1{width:100%;padding: 0; margin:0 ;}
.container1 .bodycontainer{margin: 0 !important;width: 100%; }
.stickydiv{position: relative; z-index:999 !important; width: 100%; background-color: rgba(255, 255, 255, 0.90); box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); transition: .5s;}
.stickydiv.stuck{position: fixed; top: 0; width: 100%; z-index: 8;}
/*HEADER-FIX*/

/*LOGO*/
.logo { float:left; margin:6px 0; padding:0; display:block;}
/*LOGO*/

/*INNER-BANNER*/
.inner-page-hero-area {padding:106px 45px 100px 45px; margin-bottom:15px; position: relative; background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-position: center center;}
.inner-page-hero-area::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.inner-page-title { position: relative; font-family: 'jost'; font-size:45px; line-height:50px; text-transform:uppercase; font-weight:var(--font-weight-800); letter-spacing: var(--letter-spacing-1); color:var(--white-color); margin-top:0; margin-bottom: 0px;}
.inner-page-hero-area .breadcrumb-menu { padding:0; margin-bottom:0; margin-top:10px; list-style: none; background: none; border-radius:0; }
.inner-page-hero-area .breadcrumb-menu li {background: transparent none repeat scroll 0 0; display: inline-block; margin:0; padding:10px 0; position: relative; z-index: 1;}
.inner-page-hero-area .breadcrumb-menu li i {color: #d62f2f; margin-right: 3px;}
.inner-page-hero-area .breadcrumb-menu::after {content: ""; height: 100%; left: 0; opacity:0.35; position: absolute; top: 0; width: 100%; z-index: -1; }
.breadcrumb-menu > li + li::before {color: #d62f2f; content: "\f111"; font-family: "Font Awesome 6 Free"; font-size: 8px; font-weight: var(--font-weight-500); padding: 0 10px; position: relative; top: -1px;}
.inner-page-hero-area .breadcrumb-menu a, .inner-page-hero-area .breadcrumb-menu li {font-weight:var(--font-weight-500); color: #fff; text-transform:capitalize; font-size:14px; line-height:20px; margin:0; padding:0; letter-spacing:var(--letter-spacing-1);}
.inner-page-hero-area .breadcrumb-menu a:hover {color: var(--white-color);}
.inner-page-hero-area .breadcrumb-menu li.active {color: #fff;}

.container {
 display: flex;
 align-items: center;
 gap: 50px; /* Gap adjust kiya */
 max-width: 1400px; /* Large screen ke liye width badhaya */
 width: 100%; /* Thoda zyada width liya */
 margin: auto;
 background: white;
 padding: 40px; /* Extra padding diya */
 border-radius: 10px;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 margin-top: 35px;
}

.image-section {
  position: relative;
}
.image-section img {
  width: 450px;
  border-radius: 10px;
}
.small-image {
 position: absolute;
 bottom: 0px;
 left: 0px;
 border-radius: 10px;
 border: 5px solid white;
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.image-section img {
 width: 100%; /* Image ko full width diya */
 max-width: 500px; /* Large screen pe image size bada kiya */
}
.small-image {
 width: 250px; /* Small image ko responsive kiya */
}

.content1 {
 max-width: 600px;
 position: relative;
 padding-left: 20px; /* Thoda spacing de raha hai text ke liye */
}

.content1::before {
 content: "";
 position: absolute;
 left: 0;
 top: -3px;
 height: 87px;
 width: 4px; /* Border ki width */
 background-color: #d62f2f; /* Red color */
}

.content1 {
 max-width: 800px; /* Large screens ke liye width badhaya */
 flex: 1; /* Automatically adjust kare */
}

.content1 h2 {
 color: #2d7c2d;
 font-size: 22px; /* Thoda bada kiya */
 margin-bottom: -20px; /* Space diya */
}

@media (min-width: 1300px) {
    .content1 h2 {
      color: #2d7c2d;
      font-size: 22px; /* Thoda bada kiya */
      margin-bottom: 4px; /* Space diya */
     }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .content1 {
        padding: 15px;
    }

    .content1 h2 {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

    .content1 h1 {
        font-size: 2rem;
    }
}

.content1 h1 {
 color: #d62f2f;
 font-size: 36px; /* Thoda bada kiya */
 margin-bottom: 20px; /* Neeche space badhaya */
}

.content1 p {
 font-size: 14px; /* Font thoda bada kiya */
 line-height: 1.8; /* Behtar readability ke liye */
 margin-bottom: 20px;
 font-family: 'jost';
 color: #000;
}

.features {
 display: flex;
 gap: 40px; /* Features ke beech zyada space diya */
 margin-bottom: 30px;
 flex-wrap: wrap; /* Small screens pe wrap kare */
}

.feature {
 display: flex;
 align-items: center;
 gap: 15px; /* Icon aur text ke beech gap */
}

.feature img {
 width: 40px; /* Icon size bada kiya */
}

.feature span{
 color: #000;
 font-size: 15px;
 font-family: 'jost';
 font-weight: 600;
}

.points {
 list-style: none;
 padding: 0;
 margin-top: 20px;
}

.points li {
 display: flex;
 align-items: center;
 gap: 15px;
 margin-bottom: 8px; /* List items ke beech gap */
 color: #000;
 font-family: 'jost';
 font-weight: 500;
}

.points li img {
  width: 25px;
}

.btn2 {
 background: linear-gradient(90deg, rgb(129 151 14) 0%, rgba(110, 148, 41, 1) 35%, rgba(44, 94, 51, 1) 100%);
 color: white;
 padding: 15px 20px;
 text-decoration: none;
 display: inline-block;
 border-radius: 5px;
 font-family: 'Bree Serif';
 letter-spacing: 2px;
 font-weight: 600;
 font-size: 16px;
 margin-top: 10px;
}

@media (max-width: 1024px) {
     .container {
        flex-direction: column; /* Tablet ya small screens pe column layout */
        text-align: center;
      }

    .image-section img {
        max-width: 400px;
    }
}

@media (min-width: 1440px) {
    .container {
        max-width: 1599px;
    }
    .content1 {
        max-width: 1300px;
    }
    .content1 h2 {
        margin-bottom: 0px;
    }
}

/* team */

.doctors-section {
padding: 40px 20px;
background-image: url('../images/team.jpg');
background-size: cover;
background-position: center;
margin-top: 19px;
background-repeat: no-repeat;
}

.doctors-section h2 {
font-size: 28px;
margin-bottom: 20px;
position: relative;
text-align: center;
color: #fff;
font-family: 'bree Serif';
letter-spacing: 2px;
font-weight: 500;
}

.doctors-section h3{
font-size: 28px;
margin-bottom: 30px;
position: relative;
text-align: center;
margin-top: -13px;
color: #fff;
font-family: 'bree Serif';
letter-spacing: 2px;
font-weight: 500;
}

.doctors-section h2::before, h2::after {
content: "";
display: inline-block;
width: 50px;
height: 2px;
background-color: white;
margin: 0 10px;
vertical-align: middle;
}

.doctors-container {
 display: flex;
 flex-wrap: nowrap;  /* Prevent wrapping */
 justify-content: center;
 gap: 20px;
 transition: transform 0.5s ease-in-out;
 width: 100%;
 overflow: hidden;
}

/* Doctor Cards */
.doctor-card {
position: relative;
width: 328px;
border-radius: 10px;
overflow: hidden;
}

.doctor-card img {
width: 100%;
display: block;
}

.doctor-info {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(255, 255, 255, 0.9);
text-align: center;
padding: 31px;
}

.doctor-info h3 {
color: #d62f2f;
font-size: 16px;
margin-bottom: 5px;
}

.doctor-info p {
color: #555;
font-size: 14px;
margin: 0;
}

/* Dots */
.dots {
margin-top: 20px;
text-align: -webkit-center;
}

.dot {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
margin: 0 5px;
background-color: #bbb;
}

.dot.active {
background-color: white;
}

/* Department */
.departments {
    padding: 40px 125px;
    background-color: #fff;
    position: relative;
    background-image: url('../images/d.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.departments h2 {
color: #c82424;
font-size: 30px;
margin-bottom: 20px;
position: relative;
text-align: center;
font-family: 'bree Serif';
letter-spacing: 2px;
}

.departments h2::before, .departments h2::after {
content: "";
display: inline-block;
width: 50px;
height: 2px;
background: linear-gradient(90deg, rgb(129 151 14) 0%, rgba(110, 148, 41, 1) 35%, rgba(44, 94, 51, 1) 100%);
margin: 0 10px;
vertical-align: middle;
}

.department-container {
    display: flex;
    gap: 27px;
    overflow-x: auto !important;
    scroll-behavior: smooth;
    white-space: nowrap;
    padding: 10px 0;
    scrollbar-width: none; /* Firefox */
    margin-top: 73px;
}

.department-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.department-card {
    flex: 0 0 calc((100% - 60px) / 3);
    max-width: calc((100% - 60px) / 3);
    background: white;
    border-radius: 10px;
    height: 465px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: left;
    position: relative;
    padding-top: 175px;
}


.img-box {
    width: 311px;
    overflow: hidden;
    position: absolute;
    top: -42px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 4px;
    margin-top: 31px;
    z-index: 2; /* Image ko card ke upar lane ke liye */
}

.img-box img {
    display: block;
    width: 100%;
    height: auto;
}

.department-info img {
width: 67px;
display: flex;
justify-content: flex-start;
margin-bottom: 15px;
}

.department-info {
    padding: 20px;
    background: white;
    position: relative;
    z-index: 2;
    border-radius: 10px;
    text-align: left;
}

.department-info h3 {
color: #d62f2f;
font-size: 18px;
display: flex;
align-items: center;
justify-content: left;
gap: 10px;
font-family: 'Bree Serif';
letter-spacing: 2px;
margin-bottom: 10px;
}

.department-info p {
font-size: 14px;
color: #555;
margin: 10px 0;
text-align: left;
font-family: 'jost';
margin-bottom: 29px;
}

.btn3 {
  background: linear-gradient(90deg, rgb(129, 151, 14) 0%, rgba(110, 148, 41, 1) 35%, rgba(44, 94, 51, 1) 100%);
  color: white;
  padding: 13px 16px;
  text-decoration: none;
  border-radius: 5px;
  font-family: 'Jost';
  font-weight: 600;
  font-size: 14px;
  width: 121px;
}

.btn3:hover {
    background: linear-gradient(90deg, rgba(149, 23, 27, 1) 0%, rgba(102, 14, 14, 1) 50%, rgba(110, 15, 15, 1) 100%);
    transform: translateY(-3px);
    color: #fff;
}

/* Arrow button styles */
.arrow-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: none;
    cursor: pointer;
    padding: 10px;
    border-radius: 146%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
}

.left-arrow {
    left: 37px;
}

.right-arrow {
    right: 37px;
}

.arrow-btn:hover {
    background-color: #f0f0f0;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .department-card {
        flex: 0 0 calc((100% - 27px) / 2); /* 2 cards per view */
    }
    .department-info h3 {
        font-size: 16px;
    }
    .department-info p {
        font-size: 13px;
    }
    .btn3 {
        font-size: 13px;
        padding: 10px 14px;
    }
}

@media (max-width: 768px) {
    .department-card {
        flex: 0 0 100%; /* 1 card per view */
        height: auto; /* Adjust height for mobile */
        padding-top: 130px;
        margin-bottom: 20px;
    }
    .img-box {
        width: 250px;
        top: -20px;
    }
    .department-info h3 {
        font-size: 16px;
    }
    .department-info p {
        font-size: 13px;
    }
    .btn3 {
        font-size: 12px;
        padding: 8px 12px;
    }
    .arrow-btn {
        width: 40px;
        height: 40px;
        padding: 8px;
    }
    .left-arrow, .right-arrow {
        top: 70%;
    }
}

@media (max-width: 480px) {
    .departments {
        padding: 20px;
    }
    .departments h2 {
        font-size: 24px;
    }
    .department-container {
        margin-top: 40px;
    }
    .department-card {
        padding-top: 100px;
        margin-bottom: 10px;
    }
    .img-box {
        width: 200px;
        top: -15px;
        padding: 3px;
    }
    .department-info h3 {
        font-size: 14px;
    }
    .department-info p {
        font-size: 12px;
    }
    .btn3 {
        font-size: 12px;
        padding: 6px 10px;
    }
    .arrow-btn {
        width: 30px;
        height: 30px;
        padding: 6px;
        top: 75%;
    }
    .left-arrow {
        left: 10px;
    }
    .right-arrow {
        right: 10px;
    }
}


/* Department */

/* Responsive adjustments */
@media (max-width: 1200px) {
    .department-card {
        flex: 0 0 calc((100% - 54px) / 2); /* 2 cards per view */
    }
}

@media (max-width: 768px) {
    .department-card {
        flex: 0 0 calc(100% - 20px); /* 1 card per view */
    }
}

@media (max-width: 480px) {
    .arrow-btn {
        width: 30px;
        height: 30px;
    }
}


@media (min-width: 1800px) {
   .img-box {
    width: 503px;
    overflow: hidden;
    position: absolute;
    top: -39px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 4px;
    margin-top: 31px;
}

.department-card {
    flex: 0 0 calc((100% - 60px) / 3);
    max-width: calc((100% - 60px) / 3);
    background: white;
    border-radius: 10px;
    height: 580px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: left;
    position: relative;
    padding-top: 315px;
}
.department-info {
    padding: 20px;
    background: white;
    position: relative;
    z-index: 2;
    border-radius: 10px;
    text-align: left;
}
}


 /* Responsive Design */
@media (max-width: 768px) {
    .department-card { min-width: 50%; }
    .arrow-btn { padding: 5px; }
    }

@media (max-width: 480px) {
    .department-card { min-width: 100%; }
    .arrow-btn { padding: 5px; font-size: 12px; }
    }



/* Department */


/* Hover effect */
.arrow-btn:hover {
background: #2d7c2d;
color: white;
}

.image11 img{
opacity: 0.4;
}

.image11 {
position: absolute;
right: 10px; /* Button ke samne lane ke liye */
bottom: -14px; /* Niche fix karne ke liye */
width: 80px; /* Adjust karein */
opacity: 0.9; /* Image ko halka karne ke liye */
}

/* Navigation Buttons */
.nav-buttons {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
}

.nav-btn {
background: white;
border: 1px solid #ccc;
padding: 10px;
border-radius: 50%;
cursor: pointer;
font-size: 18px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.nav-btn:hover {
background: #2d7c2d;
color: white;
}

/* counter */

/* Moments of Care Section */
.moments-of-care {
background: white;
padding: 40px 0px;
text-align: center;
}

.moments-of-care h2 {
font-size: 28px;
margin-bottom: 9px;
position: relative;
text-align: center;
color: #c82424;
font-family: 'bree Serif';
letter-spacing: 2px;
font-weight: 500;
}

.moments-of-care h3 {
color: #2C5E33;
font-size: 30px;
margin-bottom: 30px;
position: relative;
text-align: center;
font-family: 'bree Serif';
letter-spacing: 2px;
font-weight: 500;
}

.moments-of-care h2::before, .moments-of-care h2::after {
content: "";
display: inline-block;
width: 50px;
height: 2px;
background: linear-gradient(90deg, rgb(129 151 14) 0%, rgba(110, 148, 41, 1) 35%, rgba(44, 94, 51, 1) 100%);
margin: 0 10px;
vertical-align: middle;
}


.image-container {
width: 100%;
overflow: hidden;
position: relative;
}

.image-row {
display: flex;
transition: transform 0.5s ease-in-out;
width: max-content;
}

.gallery-image {
width: 25%;
flex-shrink: 0;
transition: transform 0.3s ease;
position: relative;
}

.gallery-image:hover {
transform: scale(1.1);
z-index: 1;
}

.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
justify-content: center;
align-items: center;
z-index: 10;
flex-direction: column;
}

.lightbox img {
max-width: 80%;
max-height: 70%;
border-radius: 10px;
}

.controls {
margin-top: 10px;
display: flex;
gap: 10px;
}

.button {
color: white;
background-color: #333;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}

/* Image Section - Full Screen Banner */
.image-container {
display: flex;
justify-content: center;
flex-wrap: nowrap;
width: 100vw;
height: 60vh;  /* Adjust height as per need */
overflow: hidden;
}

.image-container img {
width: 25%; /* Each image takes equal space */
height: 100%;
object-fit: cover;
}

/* Stats Section */
.stats-section {
display: flex;
justify-content: space-around;
background-image: url('../images/counter.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: white;
padding: 10px 0;
}

.stat-box {
text-align: center;
width: 20%;
}

.stat-box img{
width: 55px;
margin: 5px 0;
}


.stat-box h3 {
font-size: 30px;
margin: 5px 0;
color: #fff;
font-family: 'jost';
}

.stat-box p {
font-size: 16px;
opacity: 0.9;
color: #fff;
font-family: 'jost';
}


.stats-section {
display: flex;
justify-content: center;
gap: 40px;
}

.stat-box {
text-align: center;
opacity: 0; /* Pehle hide rakho */
transform: translateY(30px); /* Neeche se aayega */
transition: all 0.8s ease-out;
}

.stat-box.show {
opacity: 1;
transform: translateY(0);
}


/* servies */

.services {
text-align: center;
margin-bottom: 40px;
padding: 29px;
}

.services h2 {
font-size: 28px;
margin-bottom: 9px;
position: relative;
text-align: center;
color: #c82424;
font-family: 'bree Serif';
letter-spacing: 2px;
font-weight: 500;
}

.services h3 {
color: #2C5E33;
font-size: 30px;
margin-bottom: 30px;
position: relative;
text-align: center;
font-family: 'bree Serif';
letter-spacing: 2px;
font-weight: 500;
}

.services h2::before, .services h2::after {
content: "";
display: inline-block;
width: 50px;
height: 2px;
background: linear-gradient(90deg, rgb(129 151 14) 0%, rgba(110, 148, 41, 1) 35%, rgba(44, 94, 51, 1) 100%);
margin: 0 10px;
vertical-align: middle;
}

.services h2 span {
color: #d32f2f;
font-weight: bold;
}

.services p{
color: #000;
}

.services img{
width: 50px;
margin-top: 17px;
margin-bottom: 30px;
}

.services-container {
display: flex;
justify-content: center;
gap: 44px;
flex-wrap: wrap;
margin-top: 59px;
}


.service-card h3{
font-size: 16px;
font-family: 'jost';
font-weight: 600;
color: #E31E24;
margin-bottom: 10px;
}

.service-card p{
color: #303030;
font-family: 'jost';
}


/* 🔥 Left & Right Borders */
.service-card::before,
.service-card::after {
content: "";
position: absolute;
width: 4px;
height: 60%;
z-index: 1;
}

/* Left Side - RED */
.service-card::before {
background: #2C5E33;
left: 0;
top: 79px;
border-radius: 10px 0 0 0;
}

/* Right Side - GREEN */
.service-card::after {
background: #2C5E33;
right: 0;
top: 0;
border-radius:10px 0px;
}


/* 🔥 Top Edge Borders */
.service-card .top-left,
.service-card .top-right {
content: "";
position: absolute;
width: 50%;
height: 10px;
top: 0;
z-index: 1;
}


/* Top-Right - GREEN */
.service-card .top-right {
background: green;
right: 0;
border-radius: 0 10px 0 0;
}

/* 🔥 Bottom Edge Borders */
.service-card .bottom-left,
.service-card .bottom-right {
content: "";
position: absolute;
width: 50%;
height: 10px;
bottom: 0;
z-index: 1;
}


/* Hover Effect */
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Default Service Card Styling */
.service-card {
background: url('../images/s.png') no-repeat center center;
background-size: cover; /* Image ko pura cover karne ke liye */
width: 260px;
padding: 10px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
position: relative;
transition: 0.3s;
overflow: hidden;
}

/* Common Top & Bottom Borders */
.service-card .top-left,
.service-card .top-right,
.service-card .bottom-left,
.service-card .bottom-right {
content: "";
position: absolute;
width: 50%;
height: 10px;
z-index: 1;
}

/* 🔥 Cardiology (Red-Green) */
.cardiology .top-right { background: #2C5E33; right: 0; border-radius:10px 0px; height: 4px; }
.cardiology .bottom-left { background: #2C5E33; left: 0; border-radius:10px 0px; height: 4px;}

/* 🔥 Gynecology (Green-Red) */
.gynecology .top-right { background: #E31E24; right: 0; border-radius:10px 0px; height: 4px; }
.gynecology .bottom-left { background: #E31E24; left: 0; border-radius:10px 0px; height: 4px; }

/* 🔥 Physiotherapy (Red-Green) */
.physiotherapy .top-right { background: #B0CB1F; right: 0; border-radius:10px 0px; height: 4px;  }
.physiotherapy .bottom-left { background: #B0CB1F; left: 0; border-radius:10px 0px; height: 4px; }

/* 🔥 General Medicine (Green-Red) */
.general-medicine .top-right { background: #6E0F0F; right: 0; border-radius:10px 0px; height: 4px; }
.general-medicine .bottom-left { background: #6E0F0F; left: 0; border-radius:10px 0px; height: 4px; }


/* Hover Effect */
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* logo client */

.partners {
padding: 57px 20px;
background: #f5f5f5;
}

.partners h2 {
font-size: 28px;
margin-bottom: 4px;
position: relative;
text-align: center;
color: #c82424;
font-family: 'bree Serif';
letter-spacing: 2px;
font-weight: 500;
}

.partners h2::before, .partners h2::after {
content: "";
display: inline-block;
width: 50px;
height: 2px;
background: linear-gradient(90deg, rgb(129 151 14) 0%, rgba(110, 148, 41, 1) 35%, rgba(44, 94, 51, 1) 100%);
margin: 0 10px;
vertical-align: middle;
}

.line {
width: 50px;
height: 2px;
background: #6b8e23;
display: inline-block;
}

.partners-container {
display: flex;
justify-content: center;
gap: 78px;
flex-wrap: wrap;
margin-top: 57px;
}

.partners-container img {
max-width: 162px;
padding: 21px;
height: auto;
transition: transform 0.9s ease-in-out;
}

.partners-container img:hover {
transform: scale(1.1);
}

.partners-container {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 100%;
}

.partners-slider {
  display: flex;
  width: max-content;
  animation: scroll 40s linear infinite;
}

/* Continuous scrolling animation */
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-30%); } /* Moves left */
}
/* logo client */

/* why-choose */

/* General Styles */

/* Section: Why Choose Us */
.why-choose {
background: #fff;
padding: 50px 20px;
}

.why-choose h2 {
font-size: 28px;
margin-bottom: 9px;
position: relative;
text-align: center;
color: #c82424;
font-family: 'bree Serif';
letter-spacing: 2px;
font-weight: 500;
}

.why-choose h3 {
color: #2C5E33;
font-size: 30px;
margin-bottom: 30px;
position: relative;
text-align: center;
font-family: 'bree Serif';
letter-spacing: 2px;
font-weight: 500;
}

.why-choose h2::before, .why-choose h2::after {
content: "";
display: inline-block;
width: 50px;
height: 2px;
margin: 0 10px;
vertical-align: middle;
}

/* Optional: Style for a span inside h2 if needed */
.why-choose h2 span {
color: #2d7c2d;
font-weight: bold;
}

/* Cards Container */
.choose-container {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}

/* Card Styles */
.choose-card {
background: #fff;
width: 293px;
height: 183px;
padding: 9px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
transition: transform 0.3s;
}

/* Card Image */
.choose-card img {
width: 70px;
margin-bottom: 10px;
}

/* Card Title */
.choose-card h3 {
font-size: 18px;
margin-bottom: 10px;
color: #6E0F0F;
font-family: 'bree Serif';
letter-spacing: 2px;
}

/* Card Text */
.choose-card p {
font-size: 14px;
color: #000000;
line-height: 1.6;
font-family: 'jost';
}

.red-border {
border-left: 4px solid #d62f2f; /* Red border on the left side */
}

.green-border {
border-left: 4px solid #2d7c2d; /* Green border on the left side */
}

/* why-choose /*


/* Appointment Section */

.container1 {
display: flex;
justify-content: center; /* Center align horizontally */
align-items: center; /* Center align vertically */
flex-wrap: wrap;
gap: 20px;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 1300px;
width: 100%;
margin: 0 auto; /* Center align the whole section */
}

.clinic-hours {
background: #2d6a4f;
color: white;
padding: 20px;
border-radius: 12px;
width: 354px;
height: auto;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.clinic-hours h2 {
font-size: 20px;
font-weight: bold;
}

.clinic-hours p {
font-size: 14px;
margin: 10px 0;
opacity: 0.9;
}

.clinic-hours ul {
list-style: none;
padding: 0;
}

.clinic-hours ul li {
display: flex;
justify-content: space-between;
padding: 17px 0;
font-size: 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.clinic-hours ul li:last-child {
border-bottom: none;
}

.image-section1 {
display: flex;
flex-direction: column;
width: 26%;
}

.doctor-images img {
width: 100%;
border-radius: 10px;
display: block;
margin: 10px 0;
}

.form-section {
flex: 1;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.appointment-heading {
color: #a4161a;
margin-bottom: 10px;
}

.appointment-form-wrapper {
display: flex;
flex-direction: column;
gap: 10px;
}

.appointment-form-wrapper input,
.appointment-form-wrapper select,
.appointment-form-wrapper button {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}

.appointment-form-wrapper button {
background: #a4161a;
color: white;
border: none;
cursor: pointer;
}

.appointment-form-wrapper button:hover {
background: #800f12;
}

@media (max-width: 1024px) {
.container {
flex-direction: column;
align-items: center;
margin-top: -169px;
}
.image-section, .form-section {
width: 100%;
}
}
/* why chose end */

/* testimonial */

/* General Page Styles */

/* Testimonials Section */
.testimonials {
  background: #f6f6f6;
  padding: 40px 20px;
  margin-top: 25px;
}

.testimonials h2  {
 font-size: 28px;
 margin-bottom: 4px;
 position: relative;
 text-align: center;
 color: #c82424;
 font-family: 'bree Serif';
 letter-spacing: 2px;
 font-weight: 500;
}

.testimonials h3 {
 color: #2C5E33;
 font-size: 30px;
 margin-bottom: 60px;
 position: relative;
 text-align: center;
 font-family: 'bree Serif';
 letter-spacing: 2px;
 font-weight: 500;
}

.testimonials h2::before, .testimonials h2::after {
 content: "";
 display: inline-block;
 width: 50px;
 height: 2px;
 background: linear-gradient(90deg, rgb(129 151 14) 0%, rgba(110, 148, 41, 1) 35%, rgba(44, 94, 51, 1) 100%);
 margin: 0 10px;
 vertical-align: middle;
}

.testimonial-container {
 display: flex;
 justify-content: center;
 gap: 51px;
 flex-wrap: wrap;
}

.testimonial-box {
 background: white;
 padding: 20px;
 border-radius: 10px;
 box-shadow: 0 4px 8px rgba(164, 22, 26, 0.5); /* Red shadow */
 max-width: 334px;
 text-align: left;
 position: relative;
}

.profile {
 display: flex;
 align-items: center;
 gap: 10px;
}

.profile img {
 width: 90px;
 height: 90px;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 padding: 10px;
 margin-top: -43px;
 background-color: #fff;
 margin-left: -43px;
 border-radius: 10px;
 box-shadow: 0 4px 8px rgba(164, 22, 26, 0.5); /* Red shadow */
}

.name-rating {
 background: #2C5E33;
 color: white;
 padding: 10px;
 position: absolute;
 width: 227px;
 left: 68px;
 top: -11px;
}

.name-rating.red {
 background: #6E0F0F;
}

.name-rating h3 {
 margin: 0;
 font-size: 14px;
 text-align: left;
 color: #fff;
 font-family: 'bree Serif';
}

.name-rating p {
 margin: 0;
 font-size: 12px;
}

.message {
 font-size: 14px;
 margin-top: 30px;
 color: #000;
 position: relative;
 font-family: 'jost';
}

.message::before {
content: "";
background-image: url('../images/Vector.png'); /* Replace with the correct path */
background-size: contain;
background-repeat: no-repeat;
width: 30px; /* Adjust as needed */
height: 30px; /* Adjust as needed */
position: absolute;
left: 16px;
top: 116px;
}

.heart1 img{
 width: 86px;
 position: absolute;
 margin-top: -57px;
 margin-left: 444px;
}


/* about  responsive */

@media screen and (max-width: 768px) {
.container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
    }

    .image-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .image-section img {
        max-width: 100%;
        height: auto;
    }

    .small-image {
        width: 60%; /* Adjust smaller image size */
    }

    .content1 {
        width: 100%;
        padding: 10px;
    }

    .features {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .feature {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .points {
        text-align: left;
        padding: 0;
    }

    .points li {
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: center;
    }

    .btn2 {
        display: block;
        margin: 20px auto;
    }
}

/* about  responsive */

/* team  responsive */

@media screen and (max-width: 768px) {
    .doctors-section h2{
      font-size: 20px;
    }

    .doctors-section h2::before, h2::after {
    content: "";
    display: inline-block;
    width: 10px;
    }

    .departments h2{
      font-size: 21px;
    }

    .doctors-section h3{
      font-size: 16px;
    }
    .doctors-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .doctor-card {
        width: 90%;
        max-width: 350px;
        text-align: center;
    }

    .doctor-card img {
        width: 100%;
        height: auto;
        border-radius: 10px;
    }

    .doctor-info h3 {
        font-size: 18px;
        margin: 5px 0;
    }

    .doctor-info p {
        font-size: 16px;
    }

    .dots {
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }

    .dot {
        width: 10px;
        height: 10px;
        margin: 0 5px;
        background: #ccc;
        border-radius: 50%;
        transition: background 0.3s;
    }

    .dot.active {
        background: #00aaff;
    }
}


/* team  responsive */

/* Counter */

@media screen and (max-width: 768px) {
    .image-container {
        display: flex;
        gap: 10px;
    }

    .moments-of-care h2{
        font-size: 20px;
    }

    .moments-of-care h3{
        font-size: 16px;
    }

    .image-container img {
        width: 45%;
        max-width: 203px;
        height: 100px;
        border-radius: 10px;
    }

    .stats-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-top: -292px;
    }

    .stat-box {
        width: 90%;
        max-width: 300px;
        text-align: center;
        padding: 15px;
        border-radius: 10px;
    }

    .stat-box img {
        width: 50px;
        height: auto;
    }

    .stat-box h3 {
        font-size: 22px;
    }

    .stat-box p {
        font-size: 16px;
    }
}


/* Desktop: 4 boxes in a row */
@media only screen and (min-width: 769px) {
    .stats-section {
        grid-template-columns: repeat(4, 1fr); /* 4 columns */
    }
}

/* Mobile: 2x2 grid */
@media only screen and (max-width: 768px) {
    .stats-section {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
    }

    .stat-box h3 {
        font-size: 20px;
    }

    .stat-box p {
        font-size: 14px;
    }
    .stats-section {
    display: grid;
    gap: 20px;
    margin-top: -292px;
    justify-content: center;
}
}


/* Counter */

/* services */

@media screen and (max-width: 768px) {
    .services h2{
        font-size: 17px;
    }

    .services h2::before, .services h2::after {
       content: "";
       display: inline-block;
       width: 10px;
    }

    .services h3{
       font-size: 16px;
    }

/* services */

/* client */

    .partners h2{
       font-size: 22px;
    }

    .partners h2::before, .partners h2::after {
       content: "";
       display: inline-block;
       width: 10px;
    }

/* client */

/* why-choose */

    .why-choose h2{
       font-size: 20px;
    }

    .doctor-images img {
       display: none;
    }

    .why-choose h2::before, .why-choose h2::after {
       content: "";
       display: inline-block;
       width: 10px;
    }

    .why-choose h3{
       font-size: 16px;
    }

/* why-choose */

/* testimonials */

    .testimonials h2{
        font-size: 20px;
    }

    .testimonials h2::before, .testimonials h2::after {
        content: "";
        display: inline-block;
        width: 10px;
    }

    .testimonials h3{
       font-size: 16px;
    }

    .heart1 img{
       display: none;
    }

}

/* Responsive Design */
@media (max-width: 768px) {
  .testimonial-container {
    flex-direction: column;
    align-items: center;
  }

  .testimonial-box {
    max-width: 90%;
  }

  .name-rating {
    margin-top: -12px;
  }

  .message::before {
    display: none;
  }

  .profile {
    flex-direction: column;
    text-align: center;
  }

  .profile img {
    width: 80px;
    height: 76px;
    margin-left: -246px;
    margin-top: -55px;
  }
}
/* testimonials */


/* animation */
/* Image Section Animation */
.image-section img {
width: 100%;
border-radius: 10px;
opacity: 0;
transform: scale(0.8);
transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
}

/* Small Image Animation Delay */
.image-section .small-image {
transition-delay: 0.3s;
}

/* Features Fade-In One by One */
.features .feature {
opacity: 0;
transform: translateY(20px);
transition: all 0.8s ease-in-out;
}

/* Points List Fade-In */
.points li {
opacity: 0;
transform: translateX(-20px);
transition: all 0.5s ease-in-out;
}

/* Button Hover Effect */

.btn2:hover {
background: linear-gradient(90deg, rgba(203,27,32,1) 0%, rgba(102,14,14,1) 100%, rgba(110,15,15,1) 100%);
transform: scale(1.05);
color: white;
}

/* Scroll Trigger Animation */
.reveal {
opacity: 1 !important;
transform: translateX(0) translateY(0) scale(1) !important;
}


.service-card:hover::after {
width: 300%;
height: 300%;
top: -100%;
left: -100%;
opacity: 0.1;
background-color: red;
animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(0.9);
    }
    50% {
        transform: scale(1.1);
    }
}


/* Hover effect
.choose-card:hover {
transform: scale(1.05);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.choose-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color:#b2d235;
opacity: 0;
transition: opacity 0.3s ease;
border-radius: 15px;
}

.choose-card:hover::before {
opacity: 1;
}

.choose-card:hover h3, .choose-card:hover p {
color: #fff;
z-index: 1;
position: relative;
}*/


.appointment-form-wrapper input:focus,
.appointment-form-wrapper select:focus {
border-color:#a4161a;
box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
}

.appointment-form-wrapper input:focus::placeholder,
.appointment-form-wrapper select:focus::placeholder {
color: transparent;
}


.testimonial-box:hover {
transform: scale(1.05);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* contact */
/* === CONTACT SECTION === */
.contact-area {
  padding: 60px 20px;
  background: #fff;
}

.wrapper {
  max-width: 1140px;
  margin: 0 auto;
}

.section-title {
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #d62f2f;
  font-family: 'jost';
}

.section-underline {
  display: block;
  width: 60px;
  height: 3px;
  background: #d62f2f;
  margin-bottom: 30px;
}

/* === GRID STRUCTURE === */
.contact-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.form-box,
.info-box {
  flex: 1;
  min-width: 300px;
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.08);
}

/* === FORM BOX === */
.form-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #000;
  font-family: 'jost';
}

.appointment-form input,
.appointment-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  border-radius: 3px;
  font-size: 14px;
}

.form-group {
  display: flex;
  gap: 20px;
}

.form-group input {
  flex: 1;
}

.btn-submit8 {
  background-color:#d62f2f;
  color: #fff;
  padding: 12px 25px;
  border: none;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  display: block;
  width: 100%;
  text-transform: uppercase;
  font-size: 13px;
  transition: background-color 0.3s ease;
}

.btn-submit:hover {
  background-color: #0069aa;
}

/* === INFO BOX === */
.info-title {
  font-size: 22px;
  font-weight: bold;
  color: #222;
  margin-bottom: 10px;
}

.info-desc {
  font-size: 14px;
  color: #555;
  margin-bottom: 20px;
}

.info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.info-list li {
  display: flex;
  align-items: flex-start;
  font-size: 16px;
  color: #000;
  margin-bottom: 24px;
  line-height: 1.5;
  font-family: 'jost';
}

.info-list li i {
  color: #d62f2f;
  margin-right: 10px;
  font-size: 16px;
  margin-top: 3px;
}

/* === SOCIAL ICONS === */
.social-links-rounded {
  display: flex;
  gap: 10px;
  margin-top: 42px;
}

.social-links-rounded a {
  width: 40px;
  height: 40px;
  background-color:#d62f2f;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-size: 16px;
  text-decoration: none;
}

.social-links-rounded a:hover {
  background-color: #005f94;
  transform: scale(1.1);
}

/* === RESPONSIVE === */
@media screen and (max-width: 768px) {
  .form-group {
    flex-direction: column;
  }

  .contact-grid {
    flex-direction: column;
  }
}

/* facilities */

.container4 {
      max-width: 1200px;
      margin: auto;
      padding: 60px 20px;
    }

    .container4 h1 {
      text-align: center;
      font-size: 2.5rem;
      color: #d62f2f;
      margin-bottom: 10px;
      font-family: 'jost';
    }

    .intro {
      text-align: center;
      margin-bottom: 50px;
      color: #555;
      font-size: 1.1rem;
    }

    .facilities {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 30px;
    }

    .facility-card {
      background: white;
      padding: 30px;
      border-radius: 16px;
      box-shadow: 0 8px 16px rgba(0,0,0,0.05);
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .facility-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 12px 20px rgba(0,0,0,0.08);
    }

    .facility-icon {
      font-size: 40px;
      color: #d62f2f;
      margin-bottom: 15px;
    }

    .facility-title {
      font-size: 1.3rem;
      font-weight: bold;
      color: #000;
      margin-bottom: 10px;
      font-family: 'jost';
    }

    .facility-desc {
      font-size: 1rem;
      color: #555;
    }


    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @media (max-width: 768px) {
      .container4 h1 {
        font-size: 2rem;
      }
      .facility-card {
        padding: 20px;
      }
    }
/* Department Section */
.dept-wrap {
  max-width: 1100px;
  margin: auto;
  padding: 60px 20px;
  overflow: hidden;
}

.dept-heading {
  text-align: center;
  font-size: 2.4rem;
  color: #d62f2f;
  margin-bottom: 40px;
  font-family: jost;
}

.dept-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.dept-item {
  background: #fff;
  border-radius: 12px;
  padding: 30px 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  text-align: center;
  transition: background 0.3s ease, transform 0.3s ease;
}

.dept-item:hover {
background: #77ae3e;
transform: translateY(-5px);
}

.dept-item:hover .dept-desc p, .dept-item:hover .dept-name {
    color:white;
}

.dept-icon {
  margin-bottom: 16px;
}

.dept-icon img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.dept-item:hover .dept-icon img {
  transform: rotate(10deg) scale(1.1);
}

.dept-name {
  font-size: 1.2rem;
  font-weight: bold;
  color: #000;
  margin-bottom: 6px;
  font-family: jost;
}

.dept-desc {
  font-size: 0.95rem;
  color: #555;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .dept-list {
    grid-template-columns: 1fr;
  }
}

/* images */
/* Banner Gallery Section */
.banner-gallery {
  padding: 40px 20px;
  background-color: #fff;
  text-align: center;
}

.banner-gallery h2 {
  font-size: 38px;
  margin-bottom: 30px;
  color: #d62f2f;
  font-family: 'jost';
}

/* Grid Layout */
.banner-gallery-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

/* Individual Banner Item */
.banner-item {
  position: relative;
  width: 30%;
  min-width: 250px;
  overflow: hidden;
  border-radius: 8px;
  background-color: #f4f4f4;
  transition: transform 0.3s ease;
}

.banner-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s ease;
}

/* Caption Text */
.banner-caption {
  padding: 10px;
  font-size: 16px;
  color: #555;
  background-color: #fafafa;
}

/* Overlay on Hover */
.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease;
}

.banner-text {
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

/* Hover Effects */
.banner-item:hover {
  transform: scale(1.05);
}

.banner-item:hover .banner-overlay {
  opacity: 1;
}

.banner-item:hover .banner-text {
  transform: translateY(0);
}

/* docter */

/* Doctor Section */
.doctor-section1 {
  padding: 50px 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Doctor Section (now Team Section) */
.team-section {
  padding: 60px 20px;
  max-width: 1200px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.team-heading {
  text-align: center;
  font-size: 2.4rem;
  color: #d62f2f;
  margin-bottom: -17px;
  font-family: 'jost';
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.team-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  padding: 30px 20px;
  text-align: center;
  transition: transform 0.3s ease, background 0.3s ease;
}

.team-card:hover {
  background: #e0f7fa;
  transform: translateY(-5px);
}

.team-photo {
  width: 298px;
  height: 331px;
  object-fit: cover;
  margin-bottom: 15px;
  border: 4px solid #ddd;
}

.team-card h3 {
  font-size: 20px;
  color: #2d7c2d;
  margin: 10px 0 5px;
  font-family: 'jost';
}

.team-card p {
  font-size: 14px;
  color: #555;
  margin: 4px 0;
}


/* images */

.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 40px 20px;
  max-width: 1200px;
  margin: auto;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.gallery-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.gallery-item:hover .gallery-image {
  transform: scale(1.1);
}

.gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.4s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

.gallery-text {
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}


/* from */

  .appointment-section {
    background: #f0f4f8;
    padding: 80px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .appointment-card {
    background: #fff;
    max-width: 600px;
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    padding: 40px 30px;
  }

  .step-header h2 {
    font-size: 1.8rem;
    text-align: center;
    color: #c00;
    margin-bottom: 10px;
    margin-right: -60px;
  }

  .steps-progress {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
  }

  .steps-progress .step {
    flex: 1;
    text-align: center;
    padding: 8px;
    border-bottom: 3px solid #ccc;
    color: #888;
    font-weight: 500;
    position: relative;
  }

  .steps-progress .step.active {
    border-color: #003366;
    color: #003366 !important;
    font-weight: 600;
  }

  .form-step {
    display: none;
    flex-direction: column;
    gap: 15px;
  }

  .form-step.active {
    display: flex;
  }

  label {
    font-weight: 600;
    margin-top: 10px;
    color: #A7A8B4;
  }

  input, select {
    padding: 12px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 10px;
  }

  .form-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
  }

  .btn-prev, .btn-next {
    background:  #c00;
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-weight: 600;
  }

  .btn-prev[disabled] {
    background: #ccc;
    cursor: not-allowed;
  }


/* form */