:root {
           --primary-orange: #1B365D;
           --primary-blue: #3A8E98;
           --navy-blue: #001a4e;
           --light-grey: #f4f4f4;
           --border-color: #ddd;
       }

       * {
           box-sizing: border-box;
           margin: 0;
           padding: 0;
           font-family: Arial, sans-serif;
       }

       body {
           background-color: #fff;
           color: #333;
           line-height: 1.5;
       }

       /* Header */
       header {
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 6px 5%;
           border-bottom: 4px solid var(--primary-blue);
       }

       .logo-container {
           display: flex;
           align-items: center;
           gap: 10px;
       }

       .logo-icon {
           width: 45px;
           height: 45px;
           background-color: var(--primary-orange);
           border-radius: 50% 50% 50% 0;
           display: flex;
           align-items: center;
           justify-content: center;
           color: white;
           font-size: 24px;
           transform: rotate(-15deg);
       }

       .logo-text {
           font-size: 28px;
           font-weight: bold;
           color: #333;
       }

       .header-btns {
           display: flex;
           justify-content: start;
           gap: 15px;
       }

       .logo-img {
           height: 100px;
           width: auto;
       }

       .btn {
           padding: 10px 20px;
           border: none;
           border-radius: 5px;
           color: white;
           font-weight: bold;
           cursor: pointer;
           display: flex;
           align-items: center;
           gap: 8px;
           text-decoration: none;
       }

       .btn-blue {
           background-color: var(--primary-blue);
       }

       .btn-orange {
           background-color: var(--primary-orange);
       }

       .navy-bar {
           background-color: var(--navy-blue);
           height: 10px;
           width: 100%;
       }

       /* Main Layout */
       .container {
           display: flex;
           max-width: 1200px;
           margin: 20px auto;
           gap: 20px;
           padding: 0 15px;
       }

       main {
           flex: 2;
       }

       aside {
           flex: 1;
           min-width: 300px;
       }

       .hero-img {
           width: 100%;
           border: 1px solid var(--border-color);
           margin-bottom: 20px;
       }

       .scrolling-notice {
           color: red;
           font-weight: bold;
           margin-bottom: 15px;
           border-bottom: 1px solid #eee;
           padding-bottom: 10px;
           overflow: hidden;
           white-space: nowrap;
       }

       .scrolling-notice span {
           display: inline-block;
           animation: marquee 20s linear infinite;
       }

       @keyframes marquee {
           0% {
               transform: translateX(100%);
           }

           100% {
               transform: translateX(-100%);
           }
       }

       h1 {
           font-size: 26px;
           color: #333;
           margin-bottom: 15px;
       }

       .intro-text {
           font-size: 14px;
           color: #555;
           margin-bottom: 20px;
           text-align: justify;
       }

       .red-heading {
           color: #cc0000;
           font-weight: bold;
           margin: 15px 0;
       }

       .link-list {
           list-style: none;
       }

       .link-list li {
           padding: 8px 0;
           display: flex;
           align-items: center;
           gap: 10px;
           font-size: 14px;
       }

       .bullet-icon {
           width: 14px;
           height: 14px;
           border: 2px solid var(--navy-blue);
           border-radius: 50%;
           display: inline-block;
           position: relative;
       }

       .bullet-icon::after {
           content: '';
           width: 6px;
           height: 6px;
           background: var(--primary-orange);
           border-radius: 50%;
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
       }

       .new-tag {
           background-color: #ffcc00;
           color: #000;
           font-size: 10px;
           padding: 2px 4px;
           border-radius: 3px;
           font-weight: bold;
           margin-left: 5px;
       }

       .sidebar-box {
           border: 1px solid var(--border-color);
           margin-bottom: 30px;
           border-radius: 4px;
           overflow: hidden;
       }

       .box-header {
           padding: 10px 15px;
           color: white;
           font-weight: bold;
           font-size: 14px;
           text-transform: uppercase;
       }

       .box-header.blue {
           background-color: var(--primary-blue);
       }

       .box-header.orange {
           background-color: var(--primary-orange);
       }

       .box-content {
           padding: 10px;
           max-height: 300px;
           overflow-y: auto;
       }

       .box-content ul {
           list-style: none;
       }

       .box-content li {
           font-size: 13px;
           padding: 10px;
           border-bottom: 1px solid #eee;
           display: flex;
           gap: 10px;
       }

       .status-closed {
           color: red;
           font-weight: bold;
       }

       .apply-now-container {
           padding: 15px;
           text-align: right;
       }

       .btn-apply-now {
           background-color: var(--primary-blue);
           color: white;
           padding: 10px 25px;
           border-radius: 5px;
           text-decoration: none;
           font-weight: bold;
       }

       footer {
           border-top: 1px solid var(--border-color);
           padding: 20px 5%;
           margin-top: 40px;
           display: flex;
           justify-content: space-between;
           align-items: center;
           font-size: 13px;
           color: #666;
       }

       .footer-links a {
           color: #333;
           text-decoration: none;
           margin: 0 10px;
       }

       .back-to-top {
           background: #eee;
           width: 30px;
           height: 30px;
           display: flex;
           align-items: center;
           justify-content: center;
           border-radius: 4px;
           cursor: pointer;
       }

       .sidebar-box {
           border: 1px solid var(--border-color);
           margin-bottom: 25px;
           border-radius: 4px;
           overflow: hidden;
           background: #fff;
       }

       .box-header {
           padding: 12px 15px;
           color: white;
           font-weight: bold;
           font-size: 14px;
       }

       .box-header.blue {
           background-color: var(--primary-orange);
       }

       .box-header.orange {
           background-color: var(--primary-orange);
       }

       .scroll-container {
           height: 250px;
           overflow: hidden;
           position: relative;
           padding: 10px;
       }

       .scroll-content {
           position: absolute;
           width: 100%;
           left: 0;
           padding: 0 15px;
           animation: scrollUp 15s linear infinite;
       }

       .scroll-container:hover .scroll-content {
           animation-play-state: paused;
       }

       @keyframes scrollUp {
           0% {
               top: 100%;
           }

           100% {
               top: -100%;
           }
       }

       .scroll-content ul {
           list-style: none;
       }

       .scroll-content li {
           font-size: 13px;
           padding: 12px 8px;
           border-bottom: 1px dashed #ccc;
           display: flex;
           gap: 10px;
           line-height: 1.4;
           background-color: #fff;
           color: #2c2d34;

       }

       .scroll-content1 li {
           font-size: 13px;
           padding: 12px 8px;
           border-bottom: 1px dashed #ccc;
           display: flex;
           gap: 10px;
           line-height: 1.4;
           background-color: #fff;
           color: #2c2d34;
           margin: 8px 0px;
           border: 1px solid #027bc4;

       }

       .scroll-content ul a {
           text-decoration: none;
           color: black;
       }

       .bullet-icon {
           min-width: 14px;
           height: 14px;
           border: 2px solid var(--navy-blue);
           border-radius: 50%;
           position: relative;
           margin-top: 2px;
       }

       .bullet-icon::after {
           content: '';
           width: 6px;
           height: 6px;
           background: var(--primary-orange);
           border-radius: 50%;
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
       }

       .status-closed {
           color: red;
           font-weight: bold;
       }

       .new-tag {
           background-color: #ffcc00;
           color: #000;
           font-size: 10px;
           padding: 2px 4px;
           border-radius: 3px;
           font-weight: bold;
           margin-left: 5px;
       }

       .apply-now-btn {
           display: block;
           background: var(--primary-blue);
           color: white;
           text-align: center;
           padding: 10px;
           text-decoration: none;
           font-weight: bold;
           margin: 10px;
           border-radius: 4px;
       }

       :root {
           --primary-blue: #0061af;
           --accent-orange: #f37021;
           --bg-grey: #f4f7f6;
           --section-grey: #bfbfbf;
           --border-color: #ced4da;
       }

       body {
           font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
           background-color: var(--bg-grey);
           margin: 0;
           padding: 0;
           color: #333;
       }

       /* Header Styling */
       header {
           background: white;
           padding: 6px 5%;
           display: flex;
           justify-content: space-between;
           align-items: center;
           border-bottom: 3px solid var(--primary-blue);
       }

       .logo-container {
           display: flex;
           align-items: center;
           gap: 15px;
       }

       .logo-icon {
           background: var(--accent-orange);
           color: white;
           width: 45px;
           height: 45px;
           border-radius: 50% 50% 50% 5px;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 24px;
       }

       .logo-text {
           font-size: 28px;
           font-weight: 500;
           color: #222;
       }

       .header-btns {
           display: flex;
           gap: 12px;
       }

       .btn-login {
           background: var(--accent-orange);
           color: white;
           padding: 10px 20px;
           border-radius: 5px;
           text-decoration: none;
           font-size: 15px;
           display: flex;
           align-items: center;
           gap: 8px;
           font-weight: 500;
       }

       /* Main Container */
       .main-wrapper {
           max-width: 1200px;
           margin: 25px auto;
           padding: 0 15px;
       }

       .form-container {
           background: white;
           border: 1px solid #ddd;
           box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
       }

       .section-header {
           background: var(--section-grey);
           color: #333;
           padding: 10px 15px;
           font-weight: 500;
           font-size: 15px;
           display: flex;
           align-items: center;
           gap: 10px;
           border-top: 1px solid #999;
       }

       .info-display-grid {
           display: grid;
           grid-template-columns: 1fr 1fr;
           padding: 15px;
           row-gap: 5px;
           column-gap: 40px;
           border-bottom: 1px solid #eee;
       }

       .info-row {
           display: flex;
           justify-content: space-between;
           padding: 8px 0;
           border-bottom: 1px solid #f1f1f1;
           font-size: 14px;
       }

       .info-label {
           color: #444;
           font-weight: 500;
           width: 45%;
       }

       .info-value {
           color: #333;
           width: 55%;
           text-align: left;
       }

       .form-content {
           padding: 25px;
       }

       .form-grid {
           display: grid;
           grid-template-columns: 1fr 1fr;
           gap: 20px 40px;
           margin-bottom: 20px;
       }

       .form-group {
           display: flex;
           flex-direction: column;
           gap: 6px;
       }

       .form-group label {
           font-size: 14px;
           font-weight: 600;
           color: #444;
       }

       input[type="text"],
       input[type="email"],
       input[type="password"],
       input[type="date"],
       input[type="number"],
       select,
       textarea {
           padding: 10px;
           border: 1px solid var(--border-color);
           border-radius: 4px;
           font-size: 14px;
           width: 100%;
           box-sizing: border-box;
           background: #fff;
       }

       .radio-group {
           display: flex;
           gap: 15px;
           align-items: center;
           font-size: 14px;
           margin-top: 5px;
       }

       .dimension-grid {
           display: grid;
           grid-template-columns: 1fr 1fr 1fr;
           gap: 20px;
           margin-top: 15px;
       }

       .declaration-text {
           font-size: 13.5px;
           line-height: 1.6;
           color: #444;
           border: 1px solid #eee;
           padding: 15px;
           background: #fafafa;
           margin-bottom: 15px;
       }

       .form-footer {
           background: #f8f9fa;
           padding: 20px;
           display: flex;
           justify-content: space-between;
           border-top: 1px solid #ddd;
       }

       .btn-submit,
       .btn-back {
           background: #3A8E98;
           color: white;
           border: none;
           padding: 12px 45px;
           border-radius: 4px;
           font-weight: bold;
           font-size: 16px;
           cursor: pointer;
       }

       .btn-back {
           background-color: #1B365D;
       }

       .copyright-footer {
           padding: 30px;
           display: flex;
           justify-content: space-between;
           font-size: 14px;
           color: #555;
           border-top: 1px solid #ddd;
           max-width: 1200px;
           margin: 0 auto;
       }

       @media (max-width: 768px) {

           .info-display-grid,
           .form-grid,
           .dimension-grid {
               grid-template-columns: 1fr;
           }
       }

       .no-print {}

       header {
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 6px 5%;
           border-bottom: 4px solid var(--primary-blue);
       }

       .logo-container {
           display: flex;
           align-items: center;
           gap: 10px;
       }

       .logo-icon {
           width: 45px;
           height: 45px;
           background-color: var(--primary-orange);
           border-radius: 50% 50% 50% 0;
           display: flex;
           align-items: center;
           justify-content: center;
           color: white;
           font-size: 24px;
           transform: rotate(-15deg);
       }

       .logo-text {
           font-size: 28px;
           font-weight: bold;
           color: #333;
       }

       .header-btns {
           display: flex;
           justify-content: start;
           gap: 15px;
       }

       .logo-img {
           height: 100px;
           width: auto;
       }

       #login-section,
       #reset-section {
           display: flex;
           justify-content: center;
           align-items: center;
           padding: 60px 20px;
           background-color: #f4f7f6;
           min-height: calc(100vh - 250px);
       }

       .auth-card {
           background: white;
           width: 100%;
           max-width: 450px;
           padding: 35px;
           border: 1px solid #e0e0e0;
           border-radius: 8px;
           box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
       }

       .register-link {
           margin-bottom: 15px;
           font-size: 14px;
           text-align: left;
           color: #666;
       }

       .register-link a {
           color: var(--primary-orange);
           font-weight: bold;
           text-decoration: none;
       }

       .card-title {
           font-size: 22px;
           font-weight: 600;
           margin-bottom: 25px;
           display: inline-block;
           padding-bottom: 5px;
       }

       .input-group {
           display: flex;
           margin-bottom: 20px;
           border: 1px solid #ced4da;
           border-radius: 5px;
           overflow: hidden;
           transition: border-color 0.3s;
       }

       .input-group:focus-within {
           border-color: #f37021;
       }

       .input-icon {
           background: #f8f9fa;
           width: 45px;
           display: flex;
           justify-content: center;
           align-items: center;
           border-right: 1px solid #ced4da;
           color: #1B365D;
       }

       .input-group input {
           flex: 1;
           padding: 12px 15px;
           border: none !important;
           outline: none;
           font-size: 15px;
       }

       .captcha-row {
           display: flex;
           gap: 15px;
           align-items: center;
           margin-bottom: 25px;
       }

       .captcha-img {
           background: #e9ecef;
           padding: 10px 15px;
           font-weight: bold;
           letter-spacing: 4px;
           border: 1px dashed #999;
           user-select: none;
           color: #333;
           font-style: italic;
       }

       /* Button & Footer inside Card */
       .form-footer {
           display: flex;
           justify-content: space-between;
           align-items: center;
           margin-top: 10px;
       }

       .submit-btn {
           background-color: var(--primary-orange);
           color: white;
           border: none;
           padding: 12px 30px;
           border-radius: 5px;
           cursor: pointer;
           font-weight: bold;
           font-size: 16px;
           transition: background 0.3s;
       }

       .submit-btn:hover {
           background-color: var(--primary-blue);
       }

       @media (max-width: 480px) {
           .auth-card {
               padding: 20px;
           }

           .captcha-row {
               flex-direction: column;
               align-items: flex-start;
           }

           .captcha-img {
               width: 100%;
               text-align: center;
           }
       }

       .content-container {
           max-width: 1200px;
           margin: 30px auto;
           padding: 0 15px;
       }

       .table-controls {
           display: flex;
           justify-content: space-between;
           align-items: center;
           margin-bottom: 15px;
           font-size: 14px;
           flex-wrap: wrap;
           gap: 15px;
       }

       .search-box input {
           padding: 8px 10px;
           border: 1px solid #ccc;
           border-radius: 3px;
           width: 200px;
       }

       .table-wrapper {
           width: 100%;
           overflow-x: auto;
           -webkit-overflow-scrolling: touch;
           margin-bottom: 20px;
           border: 1px solid #eee;
       }

       table {
           width: 100%;
           border-collapse: collapse;
           font-size: 14px;
           min-width: 600px;
       }

       th {
           background-color: #f8f9fa;
           border-bottom: 2px solid #ddd;
           padding: 12px;
           text-align: left;
       }

       td {
           padding: 12px;
           border-bottom: 1px solid #eee;
       }

       .status-closed {
           color: red;
           font-weight: bold;
           font-size: 12px;
       }

       .pagination-container {
           display: flex;
           justify-content: space-between;
           align-items: center;
           flex-wrap: wrap;
           gap: 15px;
           font-size: 14px;
       }

       .page-numbers {
           display: flex;
           list-style: none;
           gap: 5px;
       }

       .page-numbers li {
           padding: 6px 12px;
           border: 1px solid #ddd;
           cursor: pointer;
           color: var(--primary-blue);
       }

       .page-numbers li.active {
           background-color: var(--primary-blue);
           color: white;
       }

       .pagination-container {
           display: flex;
           justify-content: space-between;
           align-items: center;
           font-size: 14px;
           color: #666;
       }

       .page-numbers li.disabled {
           color: #ccc;
           cursor: not-allowed;
       }

       footer {
           border-top: 1px solid #ddd;
           padding: 20px 5%;
           margin-top: 50px;
           display: flex;
           justify-content: space-between;
           flex-wrap: wrap;
           gap: 10px;
           font-size: 13px;
           color: #666;
       }

       @media (max-width: 768px) {
           header {
               flex-direction: column;
               text-align: center;
               padding-bottom: 15px;
               padding: 6px 5%;
           }

           .logo-img {
               height: 100px;
               width: auto;
           }

           .table-controls {
               flex-direction: column;
               align-items: flex-start;
           }

           .search-box {
               width: 100%;
           }

           .search-box input {
               width: 100%;
           }

           .pagination-container {
               flex-direction: column;
               text-align: center;
           }

           footer {
               flex-direction: column;
               text-align: center;
           }
       }

       .main-content {
           display: flex;
           justify-content: center;
           align-items: center;
           min-height: 80vh;
           padding: 20px;
       }

       .registration-card {
           background: #ffffff;
           padding: 30px;
           border-radius: 8px;
           box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
           width: 100%;
           max-width: 500px;
       }

       .form-group {
           margin-bottom: 20px;
       }

       .form-group label {
           display: block;
           margin-bottom: 8px;
           font-weight: bold;
       }

       .form-group select {
           width: 100%;
           padding: 10px;
           border: 1px solid #ccc;
           border-radius: 4px;
       }