:root {
        --primary-color: #4caf50;
        --primary-hover: #45a049;
        --primary-active: #2e7d32;
        --border-color: #ddd;
        --text-color: #333;
        --light-bg: #f5f5f5;
        --white: #fff;
        --pending-color: #ff9800;
        --success-color: #4caf50;
        --error-color: #f44336;
        --table-even: #f9f9f9;
        --table-hover: #f1f1f1;
        --table-header: #f2f2f2;
        --maroon-color: #d57914ee;
        --red-color: #eb0e0e;
      }
@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@200;300;400;500;600;700;800&display=swap');
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        font-family: "Mukta", sans-serif;
/*        padding: 15px;*/
        /*background-color: var(--light-bg);*/
        color: var(--text-color);
        line-height: 1.6;
        font-size: 16px;
      }

      .container {
/*        max-width: 1200px;*/
        margin: 0 auto;
        background: var(--white);
        padding: 25px;
        border-radius: 10px;
/*        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);*/
      }

      h1 {
        font-size: 24px;
        text-align: center;
        color: #333;
        /* margin-bottom: 15px; */
      }

      h1 span {
        color: var(--maroon-color);
        text-decoration: underline;
      }

      .contact-info {
        text-align: center;
/*        margin-bottom: 20px;*/
      }

      .contact-info a {
        font-weight: bold;
        color: var(--red-color);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 5px;
      }

      .contact-info a:hover {
        text-decoration: underline;
      }

      
      /* Style for the responsive links section */
      .links-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
        margin: 25px 0;
      }
      
      .responsive-link {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 10px;
        background-color: var(--primary-color);
        color: white;
        text-decoration: none;
        border-radius: 6px;
        transition: all 0.3s;
        text-align: center;
        font-size: 15px;
        font-weight: bold;
        min-height: 50px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      }
      
      .responsive-link:hover {
        background-color: var(--primary-hover);
        transform: translateY(-3px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
      }
      
      @media (max-width: 768px) {
        .links-container {
          grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        }
        
        .responsive-link {
          padding: 10px 8px;
          font-size: 14px;
          min-height: 45px;
          font-weight: bold;
        }
      }
      
      @media (max-width: 480px) {
        .container {
          padding: 15px;
        }
        
        .links-container {
          grid-template-columns: 1fr 1fr;
        }
        
        h1 {
          font-size: 20px;
        }
        
        .marquee-content {
          font-size: 14px;
        }
      }

      /* Loading spinner */
      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }

      .spinner {
        border: 4px solid rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        border-top: 4px solid var(--primary-color);
        width: 40px;
        height: 40px;
        animation: spin 1s linear infinite;
        margin: 0 auto 15px;
      }

      /* Print styles */
      @media print {
        body {
          background: none;
          padding: 0;
          font-size: 12pt;
        }

        .container {
          box-shadow: none;
          padding: 0;
          max-width: 100%;
        }

        .marquee, .links-container {
          display: none;
        }
      }