html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
    }

    .video-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      z-index: -2;
    }

    .video-background video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .video-gradient {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%);
      z-index: 0;
    }

    .mil-top-panel {
      background-color: transparent !important;
      position: relative;
      z-index: 2;
      padding-top: 20px;
      border-bottom: none !important;
      backdrop-filter: none !important;
    }

    .headline-container {
      position: absolute;
      top: 35%;
      left: 0;
      width: 100%;
      z-index: 2;
    }

    .headline-container .title {
      font-size: 100px;
      font-weight: 900;
      color: white;
      text-transform: uppercase;
      padding-left: 50px;
      text-align: left;
    }

    footer {
      position: absolute;
      bottom: 20px;
      right: 30px;
      color: white;
      z-index: 2;
      font-size: 14px;
      border-top: none !important;
      text-align: right;
      width: auto;
    }

    nav a { color: white !important; }
    .mil-submenu { left: auto !important; }

    /* ========== MOBILE STYLES ========== */
    @media (max-width: 768px) {
      .headline-container .title { font-size: 30px; text-align: center; }
      .headline-container { top: 30%; }
      footer { right: 0; left: 0; text-align: center; width: 100%; }
    }

    @media (max-width: 768px) {
      .headline-container .title,
      .title.text-white {
        font-size: 60px !important;
        line-height: 1.1;
        padding-left: 20px;
        padding-right: 20px;
        text-align: center;
      }
      html, body { overflow: hidden; height: 100%; }
      .video-background,
      .video-background video,
      .video-gradient {
        width: 100vw;
        height: 100vh;
        object-fit: cover;
      }
      .container[style*="position: absolute;"] {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        text-align: center;
        padding: 0 10px;
      }
      footer {
        position: absolute;
        bottom: 10px;
        font-size: 12px;
        text-align: center;
        width: 100%;
      }
      .mil-nav-links a { font-size: 14px; margin-right: 10px; }
      .mil-menu-btn { margin-left: auto; }
    }

    /* ========= MODAL STYLES ========= */
    .custom-modal {
      display: none; /* shown via JS */
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.8);
      z-index: 9999;
      justify-content: center;
      align-items: center;
      padding: 20px; /* breathing room on tiny screens */
      box-sizing: border-box;
    }

    .custom-modal-content {
      background: url("../img/modal/modal-bg.jpg") no-repeat center center;
      background-size: cover;
      border-radius: 40px;
      padding: 40px 30px;
      width: 80%;
      max-width: 600px;
      color: #fff;
      text-align: center;
      position: relative;
      overflow: hidden; /* prevents inner overflow past rounded edges */
      box-sizing: border-box;
      margin: 0 auto;
    }

    .modal-close-btn {
      position: absolute;
      top: 15px;
      right: 15px;
      background: #000;
      color: #fff;
      border: none;
      border-radius: 20px;
      padding: 8px 12px;
      cursor: pointer;
      font-weight: bold;
    }

    .modal-row { margin-bottom: 20px; }
    .modal-row img { max-height: 200px; }

    .modal-columns {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 15px;
      flex-wrap: nowrap; /* row on desktop */
    }

    .modal-columns img { max-height: 60px; }
    .modal-font { font-size: 12px; }

    /* Buttons Row: always side-by-side and centered */
    .modal-buttons {
      display: flex;
      justify-content: center;       /* centered */
      align-items: center;
      gap: 16px;
      flex-wrap: nowrap;             /* keep on one line */
      max-width: 100%;
      box-sizing: border-box;
    }

    /* keep your current button style */
    .mil-btn-black {
      border: none;
      cursor: pointer;
      border-radius: 60px;
      padding: 0 40px;
      height: 60px;
      background-color: #000;
      color: #fff;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-transform: uppercase;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 2px;
      transition: 0.4s cubic-bezier(0, 0, 0.3642, 1);
      white-space: nowrap;           /* avoids label wrapping */
      flex: 0 1 auto;                /* allows the pair to fit within modal */
      min-width: 0;                  /* prevents flex overflow calculations */
      box-sizing: border-box;
      max-width: calc(50% - 8px);    /* hard guard: two fit within modal */
    }
    .mil-btn-black:hover {
      transform: scale(1.05);
      filter: brightness(110%);
    }

    /* MOBILE BEHAVIOR:
       - Row 2 becomes stacked (text under image)
       - Buttons stay on one line; slightly tighter padding if needed */
    @media (max-width: 576px) {
      .modal-columns {
        flex-direction: column;      /* image above, text below */
        align-items: center;
        text-align: center;
      }
      .modal-columns p { text-align: center !important; }

      .modal-buttons {
        gap: 12px;
      }
      .mil-btn-black {
        flex: 1 1 auto;              /* allow buttons to grow */
        max-width: 100%;             /* full width on small screens */
        min-width: 0;                /* prevents flex overflow */
        padding: 12px 20px;          /* tighter padding for small screens */
      }
  .custom-modal-content .modal-row:first-child img {
    width: 80vw;           /* 80% of viewport width */
    max-width: 80vw;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  /* Allow button text to wrap on multiple lines while keeping two buttons side-by-side */
  .modal-buttons {
    gap: 12px;             /* a bit tighter gap for small screens */
    justify-content: center;
    align-items: stretch;  /* let buttons grow vertically if text wraps */
  }

  .mil-btn-black {
    white-space: normal;   /* allow wrapping */
    height: auto;          /* grow if text wraps */
    min-height: 60px;      /* keep your visual heft */
    line-height: 1.2;
    padding: 12px 20px;    /* slightly tighter to fit two buttons */
    max-width: 48%;        /* ensures both fit on one row */
    flex: 0 1 48%;
  }
  .modal-row img {
  max-width: 90%;
}
}