/* ==============================================
   UNIVERSAL HEADER + FOOTER + TOPBAR STYLES
   Sab pages is file ko <link> karte hain — is file
   ko edit karo to changes har page pe apply ho jayenge.
   ============================================== */

/* ---- TOP BAR (phone left, email right) ---- */
.top-bar{
  background:#08245c;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.top-bar-inner{
  max-width:1400px;
  margin:0 auto;
  padding:9px 30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.top-bar-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#dce7fb;
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.2px;
  transition:color .15s;
}
.top-bar-item:hover{ color:#fff; }
.top-bar-item svg{
  width:15px;
  height:15px;
  flex-shrink:0;
  color:#8ecbff;
}
@media (max-width:640px){
  .top-bar-inner{ padding:8px 16px; gap:10px; justify-content:center; }
  .top-bar-item{ font-size:12px; }
  .top-bar-item span{ display:inline; }
}
@media (max-width:380px){
  .top-bar-item span{ display:none; }
  .top-bar-inner{ gap:22px; }
}

:root{
    --dark:#0b3d91;
    --teal:#1565c0;
    --teal-dark:#0d47a1;
    --text-muted:#4a5568;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    font-family:'Segoe UI', Arial, Helvetica, sans-serif;
    color:#222;
  }
  a{text-decoration:none; color:inherit;}
  ul{list-style:none;}

  /* ===== HEADER ===== */
  header{
    background:var(--dark);
    position:relative;
    z-index:100;
  }
  .nav-wrap{
    max-width:1400px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:20px;
    padding:14px 30px;
    position:relative;
  }
  .logo{ justify-self:start; }
  nav.main-menu{ justify-self:center; }
  .nav-actions{
    justify-self:end;
    display:flex;
    align-items:center;
    gap:14px;
  }
  .logo{
    display:flex;
    align-items:center;
    gap:10px;
    color:#fff;
    font-size:20px;
    font-weight:700;
    white-space:nowrap;
  }
  .logo img{
    height:50px;
    width:auto;
    max-width:110px;
    object-fit:contain;
  }
  .logo svg{flex-shrink:0;}

  nav.main-menu{
    display:flex;
    align-items:center;
  }
  nav.main-menu > ul{
    display:flex;
    align-items:center;
    gap:2px;
  }
  nav.main-menu > ul > li{
    position:static;
  }
  nav.main-menu > ul > li > a,
  nav.main-menu > ul > li > button{
    display:flex;
    align-items:center;
    gap:5px;
    color:#fff;
    background:none;
    border:none;
    font-size:14.5px;
    font-weight:600;
    letter-spacing:.3px;
    padding:14px 12px;
    cursor:pointer;
    transition:color .15s;
    font-family:inherit;
  }
  nav.main-menu > ul > li > a:hover,
  nav.main-menu > ul > li > button:hover,
  nav.main-menu > ul > li.open > button{
    color:#8ecbff;
  }
  .caret{
    width:9px;height:9px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg);
    margin-top:-3px;
    transition:transform .15s;
    flex-shrink:0;
  }
  li.open .caret{ transform:rotate(-135deg); margin-top:3px; }

  .order-btn{
    background:var(--teal);
    color:#fff;
    font-weight:700;
    font-size:14px;
    padding:11px 26px;
    border-radius:24px;
    white-space:nowrap;
    display:inline-block;
  }
  .order-btn:hover{ background:var(--teal-dark); }

  /* ===== HAMBURGER (mobile) ===== */
  .hamburger{
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    width:36px;
    height:36px;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
    flex-shrink:0;
  }
  .hamburger span{
    display:block;
    width:22px;
    height:2.5px;
    background:#fff;
    border-radius:2px;
    transition:transform .2s, opacity .2s;
  }
  .hamburger.active span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  .hamburger.active span:nth-child(2){ opacity:0; }
  .hamburger.active span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

  .nav-backdrop{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    z-index:90;
  }
  .nav-backdrop.active{ display:block; }

  /* dropdown panels */
  .dropdown-panel{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#fff;
    box-shadow:0 22px 40px rgba(0,0,0,.18);
    padding:32px 30px;
    z-index:60;
  }
  li.open .dropdown-panel{ display:block; }

  .dropdown-panel a{
    display:block;
    color:#333;
    font-size:14.5px;
    padding:6px 0;
    white-space:nowrap;
    transition:color .15s;
  }
  .dropdown-panel a:hover{ color:var(--teal); }

  /* Services mega menu - multi column */
  .mega{
    display:flex;
    flex-wrap:wrap;
    gap:28px 36px;
  }
  .mega-col{
    min-width:170px;
  }
  .mega-col h4{
    font-size:13px;
    font-weight:800;
    letter-spacing:.4px;
    color:#111;
    margin-bottom:14px;
    white-space:nowrap;
  }

  /* Subject dropdown - two columns of a single list */
  .subject-panel{
    columns:2;
    column-gap:40px;
    min-width:520px;
  }
  .subject-panel a{ break-inside:avoid; }

  .courses-panel{ min-width:230px; }
  .cities-panel{ min-width:400px; columns:2; column-gap:30px; }

  
  @media (max-width:1100px){
    .nav-wrap{ padding:14px 20px; grid-template-columns:auto 1fr auto; }
    .hamburger{ display:flex; }

    nav.main-menu{
      position:fixed;
      top:0;
      right:0;
      height:100vh;
      width:300px;
      max-width:85vw;
      background:var(--dark);
      flex-direction:column;
      align-items:stretch;
      gap:0;
      padding:80px 0 30px;
      transform:translateX(100%);
      transition:transform .25s ease;
      overflow-y:auto;
      z-index:60;
      visibility:hidden;
    }
    nav.main-menu.mobile-open{
      transform:translateX(0);
      visibility:visible;
    }

    nav.main-menu > ul{
      flex-direction:column;
      align-items:stretch;
      gap:0;
      width:100%;
    }
    nav.main-menu > ul > li{
      width:100%;
      border-bottom:1px solid rgba(255,255,255,.1);
    }
    nav.main-menu > ul > li > a,
    nav.main-menu > ul > li > button{
      width:100%;
      justify-content:space-between;
      padding:16px 24px;
      font-size:15px;
    }

    .dropdown-panel{
      display:none;
      position:static !important;
      transform:none !important;
      width:100%;
      max-width:100%;
      box-shadow:none;
      border-radius:0;
      background:rgba(255,255,255,.08);
      padding:6px 24px 16px;
    }
    li.open > .dropdown-panel{ display:block !important; }
    .dropdown-panel a{ color:#dbe6f7; padding:9px 0; }
    .dropdown-panel a:hover{ color:#fff; }
    .mega-col h4{ color:#8ecbff; }

    .mega{ flex-direction:column; gap:18px; }
    .mega-col{ min-width:0; }
    .subject-panel,
    .cities-panel{ columns:1; min-width:0; }
    .courses-panel{ min-width:0; }

    .nav-actions{ gap:10px; }
    .order-btn{
      padding:9px 16px;
      font-size:13px;
    }

  }

  @media (max-width:640px){
    .logo{ font-size:17px; }
    .logo img{ height:38px; max-width:85px; }
    .logo svg{ width:22px; height:22px; }
  }

/* ---- FOOTER ---- */

  .site-footer {
    font-family: Arial, Helvetica, sans-serif;
    background: #ffffff;
    padding: 50px 60px 0 60px;
    color: #333;
  }

  .footer-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;
    max-width: 1300px;
    margin: 0 auto;
  }

  .footer-col {
    min-width: 200px;
  }

  /* Logo placeholder column */
  .footer-logo-col {
    max-width: 300px;
  }

  .logo-placeholder {
    max-width: 260px;
    margin-bottom: 20px;
  }

  .logo-placeholder img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  .footer-social {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
  }

  .footer-social a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
  }

  .footer-social .instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  }

  .footer-social svg {
    width: 18px;
    height: 18px;
    fill: #fff;
  }

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

  .footer-links li {
    margin-bottom: 14px;
  }

  .footer-links a,
  .footer-links a:visited,
  .footer-links a:active,
  .footer-links a:focus {
    color: #333;
    text-decoration: none;
    font-size: 14.5px;
  }

  .footer-links a:hover {
    color: #1a73e8;
    text-decoration: underline;
  }

  .footer-heading {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
    margin-bottom: 22px;
    color: #111;
  }

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

  .footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 14.5px;
    color: #333;
  }

  .footer-contact-list .icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
  }

  .icon.location { background: #34a853; }
  .icon.phone { background: #1a9fd9; }
  .icon.mail { background: #1a9fd9; }

  .icon svg {
    width: 11px;
    height: 11px;
    fill: #fff;
  }

  /* ===== MOBILE RESPONSIVE ===== */
  @media (max-width: 768px) {
    .site-footer {
      padding: 35px 25px 0 25px;
    }

    .footer-top {
      flex-direction: column;
      gap: 30px;
    }

    .footer-col {
      min-width: 100%;
    }

    .logo-placeholder {
      max-width: 180px;
    }

    .footer-heading {
      margin-bottom: 14px;
    }

    .footer-links li {
      margin-bottom: 10px;
    }

    .footer-bottom {
      font-size: 13px;
      padding: 20px 15px 20px 15px;
      margin-top: 20px;
    }
  }

  @media (max-width: 420px) {
    .site-footer {
      padding: 25px 16px 0 16px;
    }

    .footer-social a {
      width: 30px;
      height: 30px;
    }
  }

  .footer-bottom {
    text-align: center;
    padding: 30px 0 25px 0;
    margin-top: 40px;
    border-top: 1px solid #eee;
    font-size: 14px;
    color: #555;
  }