*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
:root{
  --lg_fs: 24px;
  --md-fs: 20px;
  --nm-fs:16px;
  --dark_text:#162f6a;
  --light_text: #214AAB;
  --black: #000;
  --white: #fff;
  --highlight: #dd4b39;
  --light-white: #ffffffbd;
  --light-bg: #4867b3;
  --theme-color: #0033a1; 
  --light-gray: #f2f2f2;
}

@font-face {
  font-family: 'Noto Sans';
  src: url('../fonts/NotoSans-Regular.woff2') format('woff2'),
       url('../fonts/NotoSans-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
   #help_desk{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }

        .modal-container {
            max-width: 600px;
            background-color: #ffffff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            text-align: center;
        }

        h2 {
            color: #0056b3; /* Deep blue */
            margin-bottom: 20px;
            font-size: 1.6em;
        }

       .modal-container p {
            font-size: 1.05em;
            line-height: 1.5;
            margin-bottom: 15px;
            text-align: center;
        }

        .modal-container a {
            color: #007bff; /* Standard link blue */
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
        }

        .modal-container a:hover {
            color: #0056b3;
            text-decoration: underline;
        }

        .modal-container .instructions {
            margin-top: 25px;
            border-top: 1px solid #dee2e6; /* Subtle separator */
            padding-top: 20px;
            font-size: 0.95em;
            color: #6c757d; /* Lighter grey for instructions */
        }

        .modal-container .instructions strong {
            color: #343a40;
        }