*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Inter,Arial,sans-serif;color:#222;background:#fff}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:auto;padding:0 20px}

/* HEADER */
.header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 40px;border-bottom:1px solid #eee;
  position:sticky;top:0;background:#fff;z-index:100;
}
.logo{font-family:Poppins,sans-serif;font-size:22px;font-weight:600;display:flex;gap:8px;align-items:center}
.logo span{color:#1e88e5}
.logo-icon{background:#1e88e5;color:#fff;width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;border-radius:6px}
.nav a{margin:0 14px;font-weight:500}
.nav a.active,.nav a:hover{color:#1e88e5}

/* BUTTONS */
.btn{padding:10px 18px;border-radius:6px;font-weight:600;display:inline-block}
.primary{background:#1e88e5;color:#fff}
.outline{border:2px solid #1e88e5;color:#1e88e5}
.desktop-btn{background:#1e88e5;color:#fff}
.mobile-btn{display:none;background:#1e88e5;color:#fff;padding:8px 14px}

/* HERO */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:40px;
  padding:80px 40px;align-items:center}
.hero h1{font-family:Poppins,sans-serif;font-size:42px;margin-bottom:16px}
.hero p{max-width:480px;line-height:1.7;margin-bottom:28px}
.hero-actions{display:flex;gap:14px}

/* SECTIONS */
.section{padding:70px 0}
.section h2{text-align:center;font-family:Poppins;font-size:32px;margin-bottom:40px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

/* CARDS */
.card{background:#fff;border-radius:12px;padding:28px;
  box-shadow:0 10px 30px rgba(0,0,0,.05)}
.card h3{margin-bottom:10px}
.card p{color:#555;line-height:1.6}

/* DOCTORS */
.doctor img{border-radius:12px;margin-bottom:14px}

/* FORM */
form{max-width:500px;margin:auto}
input,select,textarea{
  width:100%;padding:14px;margin-bottom:14px;
  border:1px solid #ddd;border-radius:6px;font-size:14px
}

/* FOOTER */
footer{text-align:center;padding:30px 0;color:#777;border-top:1px solid #eee}

/* POPUP */
.popup{
  position:fixed;inset:0;background:rgba(0,0,0,.4);
  display:none;align-items:center;justify-content:center
}
.popup-box{
  background:#fff;padding:30px;border-radius:12px;
  text-align:center;max-width:360px
}

/* MOBILE */
@media(max-width:900px){
  .nav,.desktop-btn{display:none}
  .mobile-btn{display:inline-block}
  .hero{grid-template-columns:1fr;padding:50px 20px}
  .hero h1{font-size:32px}
  .grid{grid-template-columns:1fr}
}
.page-hero{
  background:#f5f9ff;
  padding:60px 20px;
  text-align:center;
}
.page-hero h1{
  font-family:Poppins;
  font-size:36px;
  margin-bottom:10px;
}

button.loading .btn-text{display:none}
button.loading .loader{display:inline-block}

.loader{
  width:18px;
  height:18px;
  border:3px solid #fff;
  border-top:3px solid transparent;
  border-radius:50%;
  animation:spin 1s linear infinite;
  display:none;
}

@keyframes spin{
  to{transform:rotate(360deg)}
}

.popup{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  align-items:center;
  justify-content:center;
}
.popup-box{
  background:#fff;
  padding:35px;
  border-radius:14px;
  text-align:center;
}
/* MOBILE BOTTOM NAV */
.mobile-nav{
  display:none;
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  background:#fff;
  border-top:1px solid #eee;
  display:flex;
  justify-content:space-around;
  padding:8px 0;
  z-index:999;
}

.mobile-nav a{
  display:flex;
  flex-direction:column;
  align-items:center;
  font-size:12px;
  color:#666;
}

.mobile-nav svg{
  width:22px;
  height:22px;
  fill:#777;
  margin-bottom:4px;
}

.mobile-nav a.active svg,
.mobile-nav a.active{
  color:#1e88e5;
  fill:#1e88e5;
}

/* MOBILE ONLY */
@media(min-width:901px){
  .mobile-nav{display:none}
}

@media(max-width:900px){
  body{padding-bottom:70px} /* nav space */
  .mobile-nav{display:flex}
}
/* MOBILE HEADER - POSITION CORRECTION */
@media(max-width:900px){
  .header{
    justify-content:space-between;
    padding:10px 20px;
  }

  .logo{
    font-size:22px;
  }

  .mobile-btn{
    display:inline-block;
  }

  .desktop-btn{
    display:none;
  }

  .nav{
    display:none; /* Hides desktop nav for mobile */
  }

  .mobile-nav{
    display:flex;
    position:fixed;
    bottom:0;
    width:100%;
    background:#fff;
    border-top:1px solid #ddd;
    justify-content:space-around;
    padding:10px 0;
    z-index:100;
  }

  .mobile-nav a{
    display:flex;
    flex-direction:column;
    align-items:center;
    color:#333;
  }

  .mobile-nav svg{
    width:22px;
    height:22px;
    fill:#333;
    margin-bottom:4px;
  }

  .mobile-nav a.active svg,
  .mobile-nav a.active{
    color:#1e88e5;
    fill:#1e88e5;
  }
}
@media(max-width:900px){
  .footer{
    padding-bottom:90px; /* space for bottom nav */
  }
}
.footer{
  background:#f6f8fb;
  border-top:1px solid #e5e9f0;
  padding:40px 20px;
  text-align:center;
  color:#444;
  font-size:14px;
}

.footer p{
  margin:6px 0;
}