/* ─────────────────────────────────────────
   ANNOUNCEMENT BAR
───────────────────────────────────────── */
.announcement {
  height: 38px;
  background: #8f1738;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4%;
  font-size: 12px;
  font-weight: 600;
  gap: 8px;
}
.ann-left, .ann-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ann-fire { font-size: 15px; }
.ann-sep  { opacity: 0.5; }


    /* ==================== GLOBAL STYLES ==================== */
    :root {
      --primary-maroon: #8f1738;
      --primary-hover: #7a1230;
      --bg-cream: #faf5f0;
      --card-bg: #ffffff;
      --text-dark: #333333;
      --text-muted: #666666;
      --border-color: #f0e6e0;
      --shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Poppins', sans-serif;
    }

    body {
      background-color: var(--bg-cream);
      color: var(--text-dark);
      line-height: 1.5;
    }

    .container {
      max-width: 100%;
      margin: 0 auto;
      padding: 0 4%;
    }

    /* --- TOP NAVBAR --- */
    .navbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 40px;
      background-color: #ffffff;
      border-bottom: 1px solid var(--border-color);
    }

    .brand-logo {
      height: 48px;
      object-fit: contain;
    }

    .nav-search {
      position: relative;
      width: 45%;
      max-width: 550px;
    }

    .nav-search input {
      width: 100%;
      padding: 10px 45px 10px 20px;
      border-radius: 25px;
      border: 1px solid #e0e0e0;
      background-color: #fafafa;
      outline: none;
      font-size: 14px;
      color: #333;
    }

    .nav-search input::placeholder {
      color: #aaa;
    }

    .nav-search .search-btn {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: #888;
      cursor: pointer;
      font-size: 15px;
    }

    .nav-right {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .notification-icon {
      position: relative;
      font-size: 18px;
      color: var(--primary-maroon);
      cursor: pointer;
    }

    .notification-icon .badge {
      position: absolute;
      top: -5px;
      right: -7px;
      background-color: #e53e3e;
      color: #fff;
      font-size: 10px;
      font-weight: bold;
      border-radius: 50%;
      width: 15px;
      height: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .user-dropdown {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
    }

    .avatar-small {
      width: 32px;
      height: 32px;
      background-color: var(--light-pink);
      color: var(--primary-maroon);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
    }

    .user-name {
      font-weight: 600;
      font-size: 14px;
    }

    .user-dropdown .arrow {
      font-size: 12px;
      color: #666;
      transition: transform 0.2s ease;
    }

    /* ── USER DROPDOWN MENU ── */
    .user-dropdown-wrapper { position: relative; display: flex; align-items: center; }
    .user-dropdown-menu { display: none; position: absolute; top: calc(100% + 12px); right: 0; background: #ffffff; border: 1px solid #edebeb; border-radius: 12px; min-width: 180px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 999; overflow: hidden; animation: dropdownIn 0.18s ease; }
    @keyframes dropdownIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
    .user-dropdown-menu.open { display: block; }
    .dropdown-item { display: flex; align-items: center; gap: 10px; padding: 12px 18px; font-size: 14px; font-weight: 500; color: #333; text-decoration: none; transition: background 0.15s; border: none; background: none; width: 100%; cursor: pointer; font-family: inherit; }
    .dropdown-item:hover { background: #fdf2f4; color: #8f1738; }
    .dropdown-item i { width: 16px; text-align: center; color: #8f1738; }
    .dropdown-divider { border: none; border-top: 1px solid #f0eded; margin: 0; }
    .dropdown-item.logout-item { color: #dc2626; }
    .dropdown-item.logout-item i { color: #dc2626; }
    .dropdown-item.logout-item:hover { background: #fff5f5; color: #dc2626; }

    /* --- SUB NAVIGATION BAR --- */
    .sub-nav {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 25px;
      padding: 12px 0;
      background-color: #ffffff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    }

    .sub-nav .nav-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 24px;
      border-radius: 20px;
      text-decoration: none;
      color: #444;
      font-weight: 600;
      font-size: 14px;
      transition: all 0.2s ease;
    }

    .sub-nav .nav-item.active {
      background-color: var(--primary-maroon);
      color: #ffffff;
    }

    .sub-nav .nav-item:hover:not(.active) {
      background-color: var(--light-pink);
      color: var(--primary-maroon);
    }

    /* ==================== BANNER SECTION ==================== */
    .hero-banner {
      margin: 16px auto 30px;
      max-width: 96%;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    }

    .hero-banner img {
      width: 100%;
      height: auto;
      max-height: 240px;
      object-fit: cover;
      display: block;
    }


    /* ==================== NEED HELP CARDS ==================== */
    .section-title {
      font-size: 22px;
      color: var(--primary-maroon);
      font-weight: 700;
      margin-bottom: 2px;
    }

    .section-subtitle {
      font-size: 15px;
      color: #777;
      margin-bottom: 20px;
    }

    .contact-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-bottom: 40px;
    }

    .contact-card {
      background: var(--card-bg);
      border-radius: 12px;
      padding: 18px 20px;
      display: flex;
      align-items: flex-start;
      gap: 14px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
      border: 1px solid #f2e6e8;
      text-decoration: none;
      transition: all 0.2s ease;
      cursor: pointer;
    }
    .contact-card:hover {
      transform: translateY(-2px);
      border-color: rgba(143, 23, 56, 0.25);
      box-shadow: 0 8px 22px rgba(143, 23, 56, 0.08);
    }

    .contact-icon {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .contact-icon.call,
    .contact-icon.email,
    .contact-icon.location {
      background-color: #fde8e8;
      color: var(--primary-maroon);
    }

    .contact-icon.whatsapp {
      background-color: #e6f9ed;
      color: #25D366;
    }

    .contact-details {
      flex: 1;
      min-width: 0;
    }

    .contact-details h3 {
      font-size: 15px;
      font-weight: 700;
      color: #262626;
      margin-bottom: 3px;
      line-height: 1.2;
    }

    .contact-details p {
      font-size: 13px;
      color: #555555;
      font-weight: 400;
      margin-bottom: 2px;
      line-height: 1.35;
      word-break: break-word;
    }

    .contact-details p.contact-phone {
      font-size: 13.5px;
      font-weight: 700;
      color: #262626;
    }

    .contact-details span {
      font-size: 12px;
      color: #888888;
      font-weight: 400;
      display: block;
      line-height: 1.3;
    }

    /* ==================== FAQ SECTION ==================== */
    .faq-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px 20px;
      margin-bottom: 50px;
    }

    .faq-item {
      background-color: var(--card-bg);
      border-radius: 8px;
      border: 1px solid #f2e9e4;
      overflow: hidden;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.01);
    }

    .faq-header {
      padding: 12px 16px;
      display: flex;
      align-items: center;
      cursor: pointer;
      user-select: none;
      transition: background-color 0.2s;
    }

    .faq-header:hover {
      background-color: #fffaf8;
    }

    .faq-number {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background-color: #fde8e8;
      color: var(--primary-maroon);
      font-weight: 600;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      flex-shrink: 0;
    }

    .faq-title {
      font-size: 15px;
      font-weight: 500;
      color: #444;
      flex-grow: 1;
    }

    .faq-icon {
      font-size: 14px;
      color: #888;
      transition: transform 0.3s ease;
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease, padding 0.3s ease;
      background-color: #fff;
      padding: 0 16px;
      font-size: 14px;
      color: #666;
      border-top: 1px solid transparent;
    }

    .faq-item.active .faq-icon {
      transform: rotate(180deg);
    }

    .faq-item.active .faq-answer {
      max-height: 150px;
      padding: 10px 16px 14px 52px;
      border-top-color: #f9f0ec;
    }

    /* ==================== FOOTER ==================== */
    footer {
      background-color: var(--primary-maroon);
      color: white;
      padding: 40px 0 20px;
      margin-top: 50px;
    }

    .footer-container {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding-bottom: 30px;
      margin-bottom: 20px;
    }

    .footer-brand {
      display: flex;
      flex-direction: column;
    }

    .footer-brand p {
      margin: 10px 0 0;
      font-size: 11px;
      color: rgba(255, 255, 255, .6);
    }

    .footer-logo {
      height: 48px;
      width: auto;
      object-fit: contain;
      filter: invert(1);
      mix-blend-mode: screen;
      opacity: 0.95;
    }

    .footer-logo span {
      display: block;
      font-size: 8px;
      font-style: normal;
      letter-spacing: 0.5px;
      margin-top: 2px;
    }

    .footer-links {
      display: flex;
      gap: 20px;
      list-style: none;
    }

    .footer-links a {
      color: #e0e0e0;
      text-decoration: none;
      font-size: 12px;
      transition: color 0.2s;
    }

    .footer-links a:hover {
      color: #ffffff;
    }

    .footer-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
    }

    .social-icons {
      display: flex;
      gap: 12px;
    }

    .social-icons a {
      color: white;
      font-size: 14px;
      text-decoration: none;
    }

    .copyright {
      font-size: 10px;
      color: #d1a8b4;
    }

    /* Mobile-only elements */
    .hamb {
      display: none;
    }

    .mobile-chevron {
      display: none;
    }

    

    /* Responsive adjustment */
    @media (max-width: 992px) {
      .contact-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .search-box {
        width: 280px;
      }
    }

    @media (max-width: 768px) {
      .announcement {
        height: auto !important;
        padding: 6px 12px !important;
        font-size: 11px !important;
        justify-content: center !important;
      }

      .ann-right {
        display: none !important;
      }

      .sub-nav, nav {
        display: none !important;
      }

      .hero-banner {
        margin: 10px auto 20px !important;
        max-width: 100% !important;
        border-radius: 12px !important;
      }

      .hero-banner img {
        max-height: 140px !important;
      }

      .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
      }

      .contact-card {
        padding: 14px 16px !important;
      }

      .contact-details h3 {
        font-size: 15px !important;
      }

      .contact-details p {
        font-size: 13px !important;
        color: #555555 !important;
      }

      .contact-details p.contact-phone {
        font-size: 13.5px !important;
        font-weight: 700 !important;
        color: #262626 !important;
      }

      .contact-details span {
        font-size: 11.5px !important;
      }

      .faq-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
      }

      footer {
        display: none !important;
      }

      body {
        padding-bottom: 70px !important;
      }
    }