:root {
  --primary-color: #ff6f00;
  --secondary-color: #fff7f0;
  --accent-color: #ff9800;
  --text-color: #333;
  --light-text: #888;
  --white: #ffffff;
  --box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

* {margin:0; padding:0; box-sizing:border-box;}
body {font-family: Arial, sans-serif; line-height:1.6; color: var(--text-color); overflow-x:hidden; min-height: 100%; height: auto;}
a {text-decoration:none; color:inherit;}
html {scroll-behavior:smooth;height: auto;min-height: 100%;overflow-x: hidden;}

/* Header & Navigation */
header {
  background-color: var(--white);
  box-shadow: var(--box-shadow);
  position: fixed; width:100%; z-index:1000;
}

header.sticky {box-shadow:0 4px 12px rgba(0,0,0,0.1); background:#fff;}
.navbar {display:flex; justify-content:space-between; align-items:center; padding:1rem 2rem; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,0.1); margin: auto;}
.navbar .logo {display:flex; align-items:center; padding-left: 0%; flex: 1;}
.navbar .logo img {height:clamp(40px, 7vw, 80px); margin-right:10px;}
.navbar .nav-links {list-style:none; display:flex; gap:clamp(15px, 2vw, 25px);}
.navbar .nav-links li a {font-weight:700; transition:0.3s; font-size:clamp(0.9rem, 2vw, 1.2rem);}
.navbar .nav-links li a:hover {color:var(--primary-color);}
.menu-toggle {display:none; cursor:pointer; font-size:1.6rem;}
.navbar h1 {font-size: 1.5rem; margin-right: auto;}

@media (max-width: 768px) {.navbar h1 {font-size: 1.5rem;  /* smaller size for mobile */
margin-right: auto; margin-left: 1px;padding-top: 10px; padding-bottom: 10px;} }

@media (max-width: 480px) {.navbar h1 {font-size: 1.2rem;  /* even smaller for very small screens */
margin-right: auto; margin-left: 1px;padding-top: 10px; padding-bottom: 10px;}}

@media (max-width: 768px) {
  .navbar .logo img {
    height: clamp(25px, 2vw, 50px); /* smaller logo */
    margin-right: 15px; /* reduce spacing */
    margin-left: -20px;
  }
}


/* Hero */
.hero {
  background: linear-gradient(rgba(248,85,4,0.7), rgba(15,70,126,0.7)), url('images/Hero\ section.png') no-repeat center center/cover;
  color:#fff; text-align:center; padding:80px 20px; height:100vh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
}
.hero h1 {font-size:clamp(2.2rem,6vw,3.2rem); margin-bottom:20px; line-height:1.2; margin-top: 100px; }
.hero p {font-size:clamp(1.2rem,2.5vw,1.4rem); margin-bottom:25px; max-width:600px; margin-left:auto; margin-right:auto;}
.hero .btn-group {margin-top:20px; display:flex; flex-wrap:wrap; justify-content:center; gap:15px;}

@media (max-width: 768px){
  .hero {padding: 60px 15px; height: 70vh;}
  .hero h1 {font-size: clamp(1.8rem, 5vw, 2.5rem); margin-top: 80px;}
  .hero p {font-size: clamp(1rem, 3vw, 11.2rem);}
}

/* Buttons */
.btn {display:inline-block;padding: clamp(0.6rem, 1.2vw, 1rem) clamp(1.2rem, 2vw, 2rem);background:var(--primary-color); color:var(--white);border-radius:50px; font-size:clamp(0.9rem, 2vw, 1.2rem);
  font-weight:500; transition:transform 0.3s ease, background 0.3s ease;
  transform:scale(1);
}
.btn:hover {background:#e65c00; transform:scale(1.05);}


/* About Section */
.about {background-color:var(--secondary-color);}
.about-container {display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center;}
.about-img {border-radius:10px; overflow:hidden; box-shadow:var(--box-shadow);}
.about-img img {width:100%; height:auto; display:block; transition: transform 0.5s ease;}
.about-content h2 {margin-bottom:1.5rem; text-align:center; color:var(--primary-color); font-size:clamp(2.2rem,6vw,4rem); font-family: 'Tangerine', cursive;}
.about-content h3 {margin-bottom:1.5rem; text-align:center; font-size:clamp(1.2rem,4vw,2.2rem);}
.about-content p {margin-bottom:1rem; text-align:left; font-size:clamp(1rem,2.2vw,1.4rem);}


/* Doctors Section */
.doctors-section {background:var(--secondary-color); padding:clamp(2rem,4vw,4rem);}
.doctors-section .section-title {color:var(--primary-color); margin-bottom:2.5rem;}
.doctors-container {display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:2rem; max-width:1200px; margin:0 auto;}
.doctor-card {
  background:var(--white); border-radius:16px; box-shadow:0 8px 20px rgba(255,165,0,0.18);
  overflow:hidden; transition:transform 0.3s ease, box-shadow 0.3s ease; transform:scale(1) ;
  height:100%; display:flex; flex-direction:column; text-align:center; position:relative;
}
.doctor-card::before {content:""; position:absolute; top:0; left:0; width:100%; height:4px; background:linear-gradient(90deg,var(--primary-color),var(--accent-color));}

.doctor-card:hover {transform:translateY(-8px) scale(1.03); box-shadow:0 14px 34px rgba(255,140,0,0.28);}
.doctor-card img {width: 100%; height: clamp(180px, 30vw, 350px); object-fit: cover; object-position: center; display: block; border-radius: 10px;}
.doctor-card h3 {margin:1rem 1rem 0.25rem; color:var(--text-color); font-size:clamp(1.5rem,2.5vw,2rem); font-weight:700;}
.doctor-card p {margin:0.25rem 1.25rem; color:var(--light-text); line-height:1.55; font-size:clamp(0.9rem,2vw,1.2rem);}
.doctor-card p:nth-of-type(1), .doctor-card p:nth-of-type(2) {color:#555; font-weight:500;}
.doctor-card p:nth-of-type(2) {display:inline-block; background:rgba(255,153,0,0.1); color:var(--primary-color); padding:0.25rem 0.6rem; border-radius:999px; margin:0.35rem auto 0.75rem;}

@media (max-width: 768px) {
  .doctors-container {
    grid-template-columns: 1fr; /* one card per row */
    gap: 1.5rem;
    max-width: 100%;   /* remove any max-width limit */
    padding: 0 1rem;   /* optional: small side padding */
    margin: 0;         /* remove auto centering */
  }

  .doctor-card {
    width: 100%;       /* full width of container */
    margin: 0;         /* remove extra centering margin */
  }
}



/* Services Section */
.section {padding:clamp(2rem,4vw,4rem); text-align:center;}
.section-title {font-size:clamp(1.8rem,4vw,2.5rem); margin-bottom:1rem; color:var(--primary-color);}
.section-subtitle {color:var(--light-text); margin-bottom:3rem; max-width:700px; margin-inline:auto;margin-right: auto; font-size:clamp(0.9rem,2vw,1.2rem);}
.services-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; margin-top:2rem;}
.service-card {background:var(--white); padding:20px; border-radius:10px; box-shadow:0 5px 15px rgba(255,165,0,0.15); transition:transform 0.3s ease, box-shadow 0.3s ease; transform:scale(1);}
.service-card:hover {transform:translateY(-8px) scale(1.03); box-shadow:0 10px 25px rgba(255,140,0,0.25);}
.service-card h3 {color:var(--primary-color); margin-bottom:1rem; font-size:clamp(1rem,2vw,1.3rem);}
.service-img {width:100%; height: clamp(180px, 25vw, 260px); overflow:hidden; display:flex; align-items:center; justify-content:center; border-radius:8px; margin-bottom:1rem; background:#f9f9f9;}
.service-img img {width:100%; height:100%; object-fit:cover; object-position:center;}


/* Appointment Section */
.appointment {background-color:var(--secondary-color); color:var(--text-color);}
.appointment.section-title {color:var(--primary-color);}
.appointment.section-subtitle {color:rgba(51,51,51,0.7);}
.form-container {max-width:800px; margin:0 auto; background-color:var(--white); padding:2rem; border-radius:10px; box-shadow:var(--box-shadow);}
.form-group {margin-bottom:1.5rem; text-align:left;}
.form-group label {display:block; margin-bottom:0.5rem; font-weight:500; color:var(--text-color); font-size:clamp(0.9rem,1.5vw,1.2rem);}
.form-control {width:100%; padding:clamp(0.6rem,1vw,0.8rem); border:1px solid #ccc; border-radius:5px; font-size:clamp(0.9rem,1.5vw,1rem); transition:border-color 0.3s;}
.form-control:focus {border-color:var(--primary-color); outline:none;}
textarea.form-control {resize:vertical; min-height:120px;}
.appointment .btn {border:none; outline:none; cursor:pointer; background:var(--primary-color); color:var(--white); padding:15px 25px; border-radius:50px; font-size:1.5rem; font-weight:500; transition:0.3s; transform:scale(1);}
.appointment .btn:hover {background:#e65c00; transform:scale(1.05);}


/* Contact Section */
.contact {background-color:var(--secondary-color);}
.contact-container {display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:3rem;}
.contact-info{text-align:left;}
.contact-info h3{margin-bottom:1.5rem;}
.contact-detail{display:flex; align-items:center; margin-bottom:1rem;}
.contact-icon{font-size:1.5rem; color:var(--primary-color); margin-right:1rem; width:30px; text-align:center;}
.contact-form{background-color:var(--white); padding:2rem; border-radius:10px; box-shadow:var(--box-shadow);}
.contact-form h3{margin-bottom:1.5rem; text-align:center; color:var(--primary-color); font-size:2rem;}
.contact-form .btn {border:none; outline:none; cursor:pointer; background:var(--primary-color); color:var(--white); padding:12px 24px; border-radius:50px; font-size:1.5rem; font-weight:500; transition:0.3s; transform:scale(1);}
.contact-form .btn:hover {background:#e65c00; transform:scale(1.05);}

/* Appointment & Contact Buttons */
.appointment .btn, .contact-form .btn {width:55%; text-align:center;font-size:clamp(1rem,2vw,1.5rem);padding:clamp(10px,1.5vw,18px) clamp(20px,3vw,30px);transform:scale(1);}
.appointment .btn:hover, .contact-form .btn:hover {transform:scale(1.05);}

@media (max-width: 768px) {
  .doctors-container {
    grid-template-columns: 1fr; /* one card per row */
    gap: 0.5rem;               /* minimal gap between cards */
    max-width: 100%;            /* remove max-width limit */
    padding: 0;                 /* remove all padding */
    margin: 0;                  /* remove auto centering */
  }

  .doctor-card {
    width: 100%;                /* full width of container */
    margin: 0;                  /* no extra margin */
    border-radius: 12px;        /* optional: slightly rounded corners */
  }
}


/* FAQ Section */
.faq-container{max-width:800px; margin:0 auto;}
.faq-item{margin-bottom:1rem; border:1px solid var(--primary-color); border-radius:5px; overflow:hidden;}
.faq-question{padding:1rem; background-color:var(--secondary-color); cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-weight:500; font-size:clamp(1rem,2vw,1.2rem);}
.faq-answer{max-height:0; opacity:0; transition:max-height 0.4s ease, opacity 0.4s ease; border-top:1px solid #e65c00; font-size:clamp(0.9rem,1.8vw,1rem);}
.faq-item.active .faq-answer{max-height:500px; opacity:1;}

/* Footer */
footer{background-color:var(--primary-color); color:var(--white); padding:3rem 5%; text-align:center;}
.footer-content{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2rem; text-align:left; max-width:1200px; margin:0 auto;}
.footer-column h3{margin-bottom:1.5rem; color:var(--white);}
.footer-links{list-style:none; padding:0;}
.footer-links li{margin-bottom:0.8rem;}
.footer-links a{color:#ccc; text-decoration:none; transition:color 0.3s;}
.footer-links a:hover{color:var(--white);}
.social-links{display:flex; gap:1rem; margin-top:1rem;}
.social-links a{color:#ccc; font-size:1.5rem; transition:color 0.3s;}
.social-links a:hover{color:var(--white);}
.copyright{border-top:1px solid rgba(255,255,255,0.2); padding-top:2rem; color:#ccc; font-size:0.9rem;}

/* Whatsapp Button */
.whatsapp-btn{position:fixed; bottom:30px; right:30px; background-color:#25D366; color:var(--white); width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; box-shadow:0 4px 12px rgba(0,0,0,0.15); z-index:1000; text-decoration:none; transition:all 0.3s ease;}
.whatsapp-btn:hover{transform:scale(1.1); box-shadow:0 8px 20px rgba(0,0,0,0.2);}

/* Mobile Navbar */
@media(max-width:768px){
  .nav-links {position:fixed; top:0; right:-100%; height:100vh; flex-direction:column; width:220px; background:rgba(255,111,0,0.95); padding:70px 20px 20px; gap:15px; box-shadow:0 4px 12px rgba(0,0,0,0.1); transition:right 0.3s ease-in-out;}
  .nav-links li a{color:#fff;}
  .nav-links.active{right:0;}
  .menu-toggle{display:block; position:fixed; top:20px; right:20px; z-index:1100; font-size:1.8rem; cursor:pointer; color:#ff6f00; transition:color 0.3s;}
  .nav-links.active ~ .menu-toggle{color:#fff;}
  .about-container, .doctors-container, .services-grid, .contact-container{grid-template-columns:1fr; gap:1.5rem;}
  .hero .btn-group{flex-direction:column; gap:10px; width:100%; text-align:center;}
  .appointment .btn, .contact-form .btn{width:100%; text-align:center;}
}

/* Mobile Navbar */
@media(max-width:700px){
  .nav-links {position:fixed; top:0; right:-100%; height:100vh; flex-direction:column; width:220px; background:rgba(255,111,0,0.95); padding:70px 20px 20px; gap:15px; box-shadow:0 4px 12px rgba(0,0,0,0.1); transition:right 0.3s ease-in-out;}
  .nav-links li a{color:#fff;}
  .nav-links.active{right:0;}
  .menu-toggle{display:block; position:fixed; top:20px; right:20px; z-index:1100; color:#ff6f00;}
  .nav-links.active ~ .menu-toggle{color:#fff;}
  .about-container, .doctors-container, .services-grid, .contact-container{grid-template-columns:1fr; gap:1.5rem;}
  .hero .btn-group{flex-direction:column; gap:10px; width:100%; text-align:center;}
}


.contact {background-color:var(--secondary-color);}
.contact-container {display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:2rem;}
.contact-info{text-align:left;}
.contact-detail{display:flex; align-items:center; margin-bottom:1rem;}
.contact-icon{font-size:1.5rem; color:var(--primary-color); margin-right:1rem; width:30px; text-align:center;}
.contact-form{background-color:var(--white); padding:2rem; border-radius:10px; box-shadow:var(--box-shadow);}
.contact-form h3{margin-bottom:1.5rem; text-align:center; color:var(--primary-color); font-size:clamp(1.5rem,4vw,2rem);}

/* FAQ Section */
.faq-container{max-width:800px; margin:0 auto;}
.faq-item{margin-bottom:1rem; border:1px solid var(--primary-color); border-radius:5px; overflow:hidden;}
.faq-question{padding:1rem; background-color:var(--secondary-color); cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-weight:500; font-size:clamp(1rem,2vw,1.2rem);}
.faq-answer{max-height:0; opacity:0; transition:max-height 0.4s ease, opacity 0.4s ease; border-top:1px solid #e65c00; font-size:clamp(0.85rem,1.8vw,1rem);}
.faq-item.active .faq-answer{max-height:500px; opacity:1;}

/* Footer */
footer{background-color:var(--primary-color); color:var(--white); padding:3rem 5%; text-align:center;}
.footer-content{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2rem; text-align:left; max-width:1200px; margin:0 auto;}
.footer-column h3{margin-bottom:1.5rem; color:var(--white);}
.footer-links{list-style:none; padding:0;}
.footer-links li{margin-bottom:0.8rem;}
.footer-links a{color:#ccc; text-decoration:none; transition:color 0.3s;}
.footer-links a:hover{color:var(--white);}
.social-links{display:flex; gap:1rem; margin-top:1rem;}
.social-links a{color:#ccc; font-size:1.5rem; transition:color 0.3s;}
.social-links a:hover{color:var(--white);}
.copyright{border-top:1px solid rgba(255,255,255,0.2); padding-top:2rem; color:#ccc; font-size:0.9rem;}

/* Whatsapp Button */
.whatsapp-btn{position:fixed; bottom:30px; right:30px; background-color:#25D366; color:var(--white); width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; box-shadow:0 4px 12px rgba(0,0,0,0.15); z-index:1000; text-decoration:none; transition:all 0.3s ease;}
.whatsapp-btn:hover{transform:scale(1.1); box-shadow:0 8px 20px rgba(0,0,0,0.2);}