@media (max-width: 768px) {

    /* --- Header Overrides --- */
    header {
        height: 60px;
        padding: 0 15px;
        align-items: center;

        /* 1) flex container  2) center title  3) positioning context */
        display: flex;
        justify-content: center;
        position: relative;
    }

    .header-left .main-text { font-size: 18px; }
    .header-left .sub-text  { font-size: 16px; }

    /* Hide desktop nav on mobile */
    header .h,
    header .all,
    header .o,
    header nav { display: none !important; }

    /* Show mobile-only elements */
    #hamburger-menu,
    #mobile-nav { display: flex !important; }

    /* --- Hamburger Menu Icon --- */
    #hamburger-menu{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        flex-direction: column;
        justify-content: space-around;
        width: 30px; height: 25px;
        cursor: pointer; z-index: 1001;
    }
    html[dir="ltr"] #hamburger-menu{ left: 15px; }
    html[dir="rtl"] #hamburger-menu{ right: 15px; }

    #hamburger-menu span{
        width:100%; height:3px; background:#fff; border-radius:2px;
        transition:all .3s ease-in-out;
    }
    #hamburger-menu.active span:nth-child(1){ transform:translateY(11px) rotate(45deg); }
    #hamburger-menu.active span:nth-child(2){ opacity:0; }
    #hamburger-menu.active span:nth-child(3){ transform:translateY(-11px) rotate(-45deg); }

    /* --- Sliding Drawer --- */
    #mobile-nav{
        position: fixed; top: 0;
        width: 80%; max-width: 300px; height: 100vh;
        background: #0e1167;
        box-shadow: -5px 0 15px rgba(0,0,0,.2);
        z-index: 1000;
        flex-direction: column;
        padding-top: 80px;
        transition: transform .4s ease-in-out;
        overflow-y: auto; -webkit-overflow-scrolling: touch;
    }

    html[dir="ltr"] #mobile-nav{ left:0;  transform:translateX(-100%); }
    html[dir="ltr"] #mobile-nav.active{ transform:translateX(0); }

    html[dir="rtl"] #mobile-nav{ right:0; transform:translateX(100%); }
    html[dir="rtl"] #mobile-nav.active{ transform:translateX(0); }

    #mobile-nav a{
        color:#fff; text-decoration:none; font-size:18px; padding:15px 25px;
        border-bottom:1px solid rgba(255,255,255,.1);
    }
    #mobile-nav a:hover{ background:#1a2a88; }

    .footer p, .footer .socials a{ font-size:14px; }

    /* =============================== */
    /* === Mobile "Offers" pill .o === */
    /* =============================== */

    /* Center the pill in the drawer + tone it down */
    #mobile-nav .o {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;                /* keep spacing between icon and text */
  font-size: 16px;           /* a bit bigger text */
  font-weight: 800;
  padding: .5rem 2rem;       /* bigger height + width */
  border-radius: 999px;
  background: linear-gradient(135deg,#0e1167,#28b5b5);
  color: #fff !important;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: none;
  align-self: center;        /* center inside drawer */
  margin: 14px auto 20px;    /* center horizontally */
  box-shadow: 0 8px 18px rgba(14,17,103,.28), inset 0 0 0 1px rgba(255,255,255,.12);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

#mobile-nav .o::before {
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",Arial,sans-serif;
  font-weight: 900;
  content: "\f02b";          /* fa-tag */
  font-size: 1rem;           /* slightly bigger icon */
  margin-inline-end: .3rem;
}


    #mobile-nav .o:hover{
        transform:translateY(-1px);
        box-shadow:0 7px 16px rgba(14,17,103,.26), inset 0 0 0 1px rgba(255,255,255,.12);
    }
    #mobile-nav .o:focus-visible{
        outline:3px solid rgba(40,181,181,.6);
        outline-offset:2px;
    }

    @media (prefers-reduced-motion: reduce){
        #mobile-nav .o{ transition:none; }
    }
}