/* ══════════════════════════════════════
       AGORA HEALTHCARE – CSS
    ══════════════════════════════════════ */
    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    :root {
      --blue:       #2563eb;
      --blue-light: #3b82f6;
      --cyan:       #06b6d4;
      --navy:       #0f172a;
      --navy2:      #1e293b;
      --dark:       #111827;
      --orange:     #f97316;
      --white:      #ffffff;
      --muted:      rgba(255,255,255,.55);
      --font:       'Inter', sans-serif;
    }
    html { scroll-behavior:smooth; }
    body { font-family:var(--font); background:var(--dark); color:var(--white); overflow-x:hidden; }
    a { text-decoration:none; color:inherit; }
    img { display:block; max-width:100%; }

    /* ── NAVBAR ── */
    nav {
      display:flex; align-items:center; justify-content:space-between;
      padding:0 48px; height:64px;
      background:var(--navy);
      position:sticky; top:0; z-index:1000;
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .nav-logo {
      display:flex; align-items:center; gap:4px;
      font-size:1.5rem; font-weight:800; color:var(--white);
      letter-spacing:-1px;
    }
    .nav-logo img {
      width:100px; height:52px;
      object-fit:contain;
    }

    .nav-links { display:flex; gap:32px; list-style:none; }
    .nav-links a {
      font-size:.9rem; font-weight:500;
      color:rgba(255,255,255,.75);
      transition:color .2s;
    }
    .nav-links a:hover { color:var(--white); }

    .nav-cta {
      display:flex; align-items:center; gap:6px;
      padding:9px 20px;
      background:transparent;
      border:1.5px solid rgba(255,255,255,.35);
      border-radius:6px;
      color:var(--white);
      font-size:.88rem; font-weight:600;
      cursor:pointer;
      transition:background .2s, border-color .2s;
    }
    .nav-cta:hover { background:rgba(255,255,255,.08); border-color:var(--white); }

    .hamburger {
      display:none; background:none; border:none;
      color:var(--white); font-size:1.6rem; cursor:pointer;
    }

    /* Mobile menu */
    .mobile-menu {
      display:none; flex-direction:column;
      background:var(--navy); position:fixed;
      top:64px; left:0; right:0; z-index:999;
      padding:8px 0; border-bottom:1px solid rgba(255,255,255,.08);
    }
    .mobile-menu.open { display:flex; }
    .mobile-menu a {
      padding:14px 24px; font-size:.95rem;
      color:rgba(255,255,255,.8);
      border-bottom:1px solid rgba(255,255,255,.05);
      transition:background .2s;
    }
    .mobile-menu a:hover { background:rgba(255,255,255,.05); }
    .mobile-menu .mob-cta {
      margin:12px 24px; text-align:center;
      background:var(--blue); border-radius:6px;
      color:#fff; font-weight:600; border:none;
    }

    /* ── ANNOUNCEMENT BAR ── */
    .announce-bar {
      background:linear-gradient(201deg,rgba(24, 57, 140, 1) 0%, rgba(101, 142, 245, 1) 70%);
      text-align:center;
      padding:10px 24px;
      font-size:.88rem;
      color:rgba(255,255,255,.8);
      letter-spacing:.01em;
    }

    /* ── HERO ── */
    .hero {
      background: linear-gradient(20deg,rgba(24, 57, 140, 1) 0%, rgba(101, 142, 245, 1) 70%);
      min-height:500px;
      display:flex; align-items:center;
      position:relative; overflow:hidden;
      padding:56px 48px 0;
      border-bottom: #fff 2px solid;
    }

    /* Background decorative circles */
    .hero-bg-circle1 {
      position:absolute;
      width:420px; height:420px;
      border-radius:50%;
      background:rgba(255,255,255,.06);
      right:-80px; top:-80px;
      pointer-events:none;
    }
    .hero-bg-circle2 {
      position:absolute;
      width:280px; height:280px;
      border-radius:50%;
      background:rgba(255,255,255,.05);
      right:180px; top:40px;
      pointer-events:none;
    }
    .hero-bg-circle3 {
      position:absolute;
      width:180px; height:180px;
      border-radius:50%;
      background:rgba(100,130,255,.15);
      right:320px; bottom:-40px;
      pointer-events:none;
    }

    .hero-content {
      max-width:700px; z-index:2;
      animation:fadeUp .8s ease both;
    }
    .hero-content h1 {
      font-size:clamp(1.7rem, 3.5vw, 2.5rem);
      font-weight:800; line-height:1.22;
      color:var(--white); margin-bottom:28px;
    }
    .hero-btns { display:flex; gap:12px; flex-wrap:wrap; }
    .btn-outline-white {
      display:inline-flex; align-items:center; gap:6px;
      padding:10px 20px;
      border:1.5px solid rgba(255,255,255,.5);
      border-radius:6px;
      font-size:.875rem; font-weight:600; color:var(--white);
      cursor:pointer; background:transparent;
      transition:background .2s, border-color .2s;
    }
    .btn-outline-white:hover { background:rgba(255,255,255,.12); border-color:#fff; }

    /* Doctor image area */
    .hero-image-area {
      position:absolute;
      right:48px; bottom:0;
      width:420px; height:100%;
      display:flex; align-items:flex-end;
      justify-content:center;
      z-index:2;
    }
    /* Big bubble behind doctor */
    .doctor-bubble {
      position:absolute;
      width:500px; height:500px;
      border-radius:50%;
      background:linear-gradient(0deg,rgba(27, 38, 65, 1) 26%, rgba(69, 97, 167, 1) 80%);
      border:none;
      outline: none;
      box-shadow: inset 0 0 60px rgba(255,255,255,.15);
      top:30%; left:50%;
      transform:translateX(-50%);
      z-index:1;
    }
    .doctor-bubble2 {
      position:absolute;
      width:100px; height:100px;
      border-radius:50%;
      background:linear-gradient(0deg,rgba(27, 38, 65, 1) 26%, rgba(69, 97, 167, 1) 80%);
      border:none;
      outline: none;
      top:25%; right:60%;
      transform:translateX(-50%);
      z-index:1;
    }
    .hero-doctor-img {
      position:relative; z-index:3;
      width:360px;
      object-fit:contain;
      object-position:bottom;
      animation:fadeUp 1s .2s ease both;
    }

   /* ── BRANDS STRIP ── */
    .brands-strip {
      background:var(--navy);
      padding:28px 48px;
      display:flex; align-items:center;
      justify-content:space-around; flex-wrap:wrap; gap:24px;
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .brand-logo-wrap {
      display:flex; align-items:center; justify-content:center;
      opacity:.55;
      transition:opacity .25s;
      filter:grayscale(1) brightness(1.8);
    }
    .brand-logo-wrap:hover {
      opacity:1;
      filter:grayscale(0) brightness(1);
    }
    .brand-img {
      height:36px;
      width:auto;
      max-width:130px;
      object-fit:contain;
    }


    /* ── ABOUT ── */
    .about-section {
      background:var(--dark);
      padding:72px 48px;
        display:flex;
    }
    .about-content {
      width: 60%;
    }
    .about-section h2 {
      font-size:1.5rem; font-weight:700;
      color:var(--white); margin-bottom:20px;
    }
    .about-section h3 {
      font-size:1rem; font-weight:700;
      color:var(--white); margin-bottom:10px;
    }
    .about-section p {
      font-size:.93rem; line-height:1.75;
      color:rgba(255,255,255,.65);
      max-width:640px; margin-bottom:8px;
    }
    .about-section p .highlight { color:#f97316; font-weight:600; }

    /* Feature pills */
    .feature-pills {
     display: grid; 
     grid-template-columns:repeat(2, 1fr);
     width: 30%;
     gap: 20px;
    }
    .pill {
      display:flex; 
      flex-direction:column;
      justify-content: center;
      align-items:center;
      border-radius:8px ;
      text-align:center; width:200px;
      border: 1px solid #fff;
      box-shadow: inset 0 0 10px rgba(255,255,255,.1);
    }
    .pill-icon {
      width:64px; height:64px;
      border-radius:50%;
      background:#fff;
      border:1px solid rgba(255,255,255,.1);
      display:flex; align-items:center; justify-content:center;
      font-size:1.8rem; color:var(--blue);
    }
    .pill span {
      font-size:.78rem; font-weight:600;
      color:var(--white); line-height:1.3; text-align:center;
    }

    /* ── WHY SECTION ── */
    .why-section {
      background:var(--dark);
      padding:0 48px 72px;
    }
    .why-section h2 {
      font-size:clamp(1.3rem, 3vw, 1.9rem);
      font-weight:800; color:var(--white);
      margin-bottom:8px; line-height:1.25;
    }
    .why-section .why-sub {
      font-size:.93rem; color:#adaeae;
      margin-bottom:32px;
    }
    .pain-grid {
      display:grid; grid-template-columns:1fr 1fr;
      gap:14px; max-width:750px; margin:auto;
    }
    .pain-card {
      display:flex; align-items:flex-start; gap:14px;
      background:#1a1a2e;
      border:1px solid rgba(255,255,255,.07);
      border-radius:10px;
      padding:16px 18px;
      font-size:.85rem; color:rgba(255,255,255,.75);
      line-height:1.5;
    }
    .pain-card .pain-icon {
      width:34px; height:34px; flex-shrink:0;
      border-radius:8px;
      background:#fff;
      border:1px solid rgba(59,130,246,.2);
      display:flex; align-items:center; justify-content:center;
      font-size:1rem; color:var(--blue);
    }

    /* ── CONTACT ── */
    .contact-section {
      background:var(--dark);
      padding:72px 48px;
    }
    .contact-section h2 {
      font-size:1.6rem; font-weight:700;
      color:var(--white); margin-bottom:28px;
    }
    .contact-inner {
      display:grid; grid-template-columns:1fr 1fr;
      gap:48px; align-items:start;
      max-width:1100px;
    }
    .form-group { margin-bottom:14px; }
    .form-group input,
    .form-group textarea {
      width:100%; padding:13px 16px;
      background:#1e293b;
      border:1.5px solid rgba(255,255,255,.1);
      border-radius:8px;
      font-family:var(--font); font-size:.93rem;
      color:var(--white); outline:none;
      transition:border-color .2s;
    }
    .form-group input::placeholder,
    .form-group textarea::placeholder { color:rgba(255,255,255,.35); }
    .form-group input:focus,
    .form-group textarea:focus { border-color:var(--blue-light); }
    .form-group textarea { resize:vertical; min-height:120px; }

    .btn-submit {
      padding:13px 36px;
      background:var(--white);
      color:var(--dark);
      border:none; border-radius:8px;
      font-family:var(--font); font-size:1rem;
      font-weight:700; cursor:pointer;
      transition:background .2s, transform .15s;
    }
    .btn-submit:hover { background:#e2e8f0; transform:translateY(-1px); }

    /* Contact image card */
    .contact-img-card {
      position:relative;
      border-radius:10px;
      overflow:hidden;
      height:500px;
    }

    
    .contact-img-card .doc-img {
      width:100%; height:100%;
      cursor: pointer;
      object-fit:cover; object-position:center;
    }
    .contact-img-card .doc-img:hover{
      box-shadow: inset 100 50px 20px rgb(16, 4, 4);
    }

    .contact-img-card .book-btn {
      position:absolute; bottom:20px; left:20px;
      display:flex; align-items:center; gap:8px;
      background:rgba(255,255,255,.15);
      border:1px solid rgba(255,255,255,.3);
      backdrop-filter:blur(8px);
      border-radius:8px;
      padding:10px 18px;
      font-size:.85rem; font-weight:600; color:#fff;
      cursor:pointer; z-index:2;
      transition:background .2s;
    }
    .contact-img-card .book-btn:hover { background:rgba(255,255,255,.25); }

    /* ── MAP ── */
    .map-section { padding:0; }
    .map-header {
      padding:28px 48px 16px;
      background:var(--dark);
    }
    .map-header h2 {
      font-size:1.4rem; font-weight:700;
      color:var(--white);
      display:flex; align-items:center; gap:10px;
    }
    .map-header h2 i { color:var(--blue-light); }
    .map-embed { width:100%; height:320px; border:none; display:block; }

    /* ── FOOTER ── */
    footer {
      background:#0b1120;
      padding:52px 48px 0;
    }
    .footer-inner {
      display:grid;
      grid-template-columns:1.8fr 1fr 1.2fr;
      gap:48px; max-width:1100px; margin:0 auto;
      padding-bottom:40px;
    }
   
    .logo-img{
      width:120px; height:48px;
      object-fit:contain;
      margin-bottom: 20px;
    }

    .footer-brand-sub {
      font-size:.82rem; font-weight:600;
      color:rgba(255,255,255,.4);
      text-transform:uppercase; letter-spacing:.08em;
      margin-bottom:14px;
    }
    .footer-brand p {
      font-size:.875rem; color:rgba(255,255,255,.55);
      line-height:1.75; max-width:320px;
    }
    .follow-label {
      font-size:.82rem; font-weight:600;
      color:rgba(255,255,255,.4);
      text-transform:uppercase; letter-spacing:.08em;
      margin-top:20px; margin-bottom:10px;
      display:block;
    }
    .social-row {
      display:flex; gap:10px;
    }
    .social-row a {
      width:34px; height:34px;
      border-radius:50%;
      background:rgba(255,255,255,.08);
      display:flex; align-items:center; justify-content:center;
      color:rgba(255,255,255,.7); font-size:.95rem;
      transition:background .2s, color .2s;
    }
    .social-row a:hover { background:var(--blue); color:#fff; }

    .footer-col h4 {
      font-size:.82rem; font-weight:700;
      color:var(--white);
      text-transform:uppercase; letter-spacing:.08em;
      margin-bottom:16px;
    }
    .footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
    .footer-col ul a {
      font-size:.875rem; color:rgba(255,255,255,.55);
      transition:color .2s;
    }
    .footer-col ul a:hover { color:var(--white); }

    .footer-copy {
      border-top:1px solid rgba(255,255,255,.07);
      padding:20px 0;
      text-align:center;
      font-size:.8rem; color:rgba(255,255,255,.3);
      max-width:1100px; margin:0 auto;
    }

    /* ══════════════════════════════════════
       APPOINTMENT POPUP
    ══════════════════════════════════════ */
    .overlay {
      position:fixed; inset:0;
      background:rgba(0,0,0,.7);
      z-index:2000;
      display:flex; align-items:center; justify-content:center;
      opacity:0; pointer-events:none;
      transition:opacity .3s;
      backdrop-filter:blur(6px);
    }
    .overlay.show { opacity:1; pointer-events:all; }

    .popup {
      background:#0f1a2e;
      border:1px solid rgba(255,255,255,.08);
      border-radius:16px;
      padding:36px 32px;
      width:90%; max-width:460px;
      position:relative;
      transform:translateY(24px) scale(.97);
      transition:transform .35s ease;
      box-shadow:0 32px 80px rgba(0,0,0,.5);
      max-height:90vh; overflow-y:auto;
    }
    .overlay.show .popup { transform:translateY(0) scale(1); }

    .popup-close {
      position:absolute; top:14px; right:16px;
      background:rgba(255,255,255,.08);
      border:none; border-radius:50%;
      width:30px; height:30px;
      display:flex; align-items:center; justify-content:center;
      font-size:1.1rem; cursor:pointer; color:var(--white);
      transition:background .2s;
    }
    .popup-close:hover { background:rgba(255,255,255,.15); }

    .popup-header { margin-bottom:22px; }
    .popup-header h3 {
      font-size:1.35rem; font-weight:800;
      color:var(--white); margin-bottom:4px;
    }
    .popup-header p { font-size:.85rem; color:rgba(255,255,255,.5); }

    /* Popup form fields */
    .popup .form-group input,
    .popup .form-group textarea,
    .popup .form-group select {
      width:100%; padding:11px 14px;
      background:#1a2a42;
      border:1.5px solid rgba(255,255,255,.1);
      border-radius:8px;
      font-family:var(--font); font-size:.9rem;
      color:var(--white); outline:none;
      transition:border-color .2s;
      -webkit-appearance:none; appearance:none;
    }
    .popup .form-group input::placeholder,
    .popup .form-group textarea::placeholder { color:rgba(255,255,255,.3); }
    .popup .form-group input:focus,
    .popup .form-group textarea:focus,
    .popup .form-group select:focus { border-color:var(--blue-light); }
    .popup .form-group select { color:#fff; cursor:pointer; }
    .popup .form-group select option { background:#1a2a42; color:#fff; }
    .popup .form-group { margin-bottom:12px; }

    /* Date/Time picker */
    .picker-group {
      position:relative; margin-bottom:12px;
    }
    .picker-face {
      width:100%; height:44px;
      padding:0 40px 0 14px;
      border:1.5px solid rgba(255,255,255,.1);
      border-radius:8px;
      background:#1a2a42;
      color:#fff;
      font-size:.9rem;
      font-family:var(--font);
      outline:none;
      box-sizing:border-box;
      cursor:pointer;
      caret-color:transparent;
      -webkit-appearance:none; appearance:none;
      transition:border-color .2s;
      position:relative; z-index:1;
      pointer-events:none;
    }
    .picker-face::placeholder { color:rgba(255,255,255,.3); }
    .picker-group .picker-icon {
      position:absolute; right:12px; top:50%;
      transform:translateY(-50%);
      color:rgba(255,255,255,.4); font-size:1rem;
      pointer-events:none; z-index:2;
    }
    .picker-group input[type="date"],
    .picker-group input[type="time"] {
      position:absolute; inset:0;
      width:100%; height:100%;
      opacity:0; cursor:pointer; z-index:4;
      -webkit-appearance:none; appearance:none;
      border:none; background:transparent;
      color:transparent; font-size:16px;
    }
    .picker-group input[type="date"]::-webkit-datetime-edit,
    .picker-group input[type="date"]::-webkit-inner-spin-button,
    .picker-group input[type="date"]::-webkit-calendar-picker-indicator,
    .picker-group input[type="time"]::-webkit-datetime-edit,
    .picker-group input[type="time"]::-webkit-inner-spin-button,
    .picker-group input[type="time"]::-webkit-calendar-picker-indicator {
      display:none !important; opacity:0 !important;
    }

    /* Popup submit */
    .btn-popup-submit {
      width:100%; padding:13px;
      background:var(--blue);
      color:#fff; border:none;
      border-radius:8px;
      font-family:var(--font); font-size:.95rem;
      font-weight:700; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      gap:8px; margin-top:4px;
      transition:background .2s, transform .15s;
    }
    .btn-popup-submit:hover { background:#1d4ed8; transform:translateY(-1px); }

    /* ── ANIMATIONS ── */
    @keyframes fadeUp {
      from { opacity:0; transform:translateY(28px); }
      to   { opacity:1; transform:none; }
    }

    /* ── RESPONSIVE ── */
    @media(max-width:960px) {
      nav { padding:0 24px; }
      .nav-links, .nav-cta { display:none; }
      .hamburger { display:block; }

      .hero { padding:40px 24px 0; flex-direction:column; min-height:auto; }
      .hero-content { max-width:100%; }
      .hero-image-area {
        position:relative; right:auto; bottom:auto;
        width:100%; height:280px; margin-top:32px;
      }
      .hero-doctor-img { width:220px; }
      .doctor-bubble { width:300px; height:300px; top: 0; }
      .doctor-bubble2 {width: 75px; height: 75px; top: -4%; }
      .btn-outline-white{padding:10px 7px;}

      .brands-strip { padding:20px 24px; }
      .about-section{flex-direction: column;}
      .about-content { width:100%; margin-bottom:32px; }
      .feature-pills{width: 100%; gap:20px;}
      .pill{width: 160px; padding: 20px;}
      .pill-icon{width:38px; height:38px; font-size:1rem;}
      .about-section, .why-section, .contact-section { padding:52px 24px; }
      .contact-inner { grid-template-columns:1fr; }
      .pain-grid { grid-template-columns:1fr; }
      .map-header { padding:24px 24px 12px; }
      footer { padding:40px 24px 0; }
      .footer-inner { grid-template-columns:1fr 1fr; }
      
    }
    @media(max-width:560px) {
      .footer-inner { grid-template-columns:1fr; }
      .hero-image-area { height:220px; }
    }