/* Mobile styles for screens up to 767px */
@media (max-width: 767px) {
    /* Hide main navigation */
    .header-nav {
        display: none;
    }

    /* Adjust CTA buttons */
    .header-cta-btn,
    .header-cta-btn1 {
        align-self: center;
        width: auto;
    }

    /* Show burger menu */
    .header-burger-menu {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Hide CTA button on very small screens */
@media (max-width: 479px) {
    .header-cta-btn {
        display: none;
    }
}

/* Mobile header override for screens up to 768px */
@media screen and (max-width: 768px) {
    /* Hide full navigation links */
    .header-nav,
    .header-container,
    .header-button-group > a:not(.openbtn),
    .header-button-group > .header-language-button,
    .header-button-group > .Login-Icon {
        display: none !important;
    }

    /* Keep burger menu visible */
    .openbtn {
        display: flex !important;
        margin-left: auto;
    }

    /* Logo stays visible, left-aligned with 0.5rem offset */
    .header-image {
        height: 50px;
        margin-left: 0rem;
    }

    /* Header height and padding */
    .header-header {
        height: 60px;
        right: 0rem;
        margin-right: 0.1rem;
    }

    /* Show only language button if desired */
    .header-button-group .header-language-button {
        display: flex !important;
    }

    /* Header flex layout */
    .header-navbar-container {
        flex-direction: row;
        justify-content: space-between;
        padding: 0 0.5rem;
    }
}

/* =========================================================
   MEDIA QUERIES — moved to bottom as requested
   ========================================================= */

@media (max-width: 767px) {
  .header-nav { display: none; }

  .header-cta-btn { align-self: center; }

  .header-burger-menu {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-cta-btn1 { width: auto; align-self: center; }

  /* Event banner spacing on small screens */
  .event-banner {
    top: 1rem;
    width: 95%;
  }

  .event-banner .label {
    font-size: 0.6rem;
  }
  .event-inner { padding:.5rem; }
  .event-list { gap:.25rem; }
}

@media (max-width: 479px) {
  .header-cta-btn { display: none; }
}

@media (max-width:768px) {
  /* (kept here but consolidated with 767 rules above)
     If you prefer a single rule, you can merge with 767 block */
  .event-banner {
    top: 1rem;
    width: 95%;
  }
  .event-inner { padding:.5rem; }
  .event-list { gap:.25rem; }
}