/* <!-- Custom CSS --> */

   body {
       background: #020b18;
       font-family: 'Segoe UI', sans-serif;
       color: #fff;
   }

   .login-container {
       min-height: 100vh;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 15px;
   }

   .login-card {
       width: 100%;
       max-width: 380px;
       background: #071a2f;
       border-radius: 16px;
       padding: 20px;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
   }

   .login-title {
       text-align: center;
       font-weight: 600;
       letter-spacing: 1px;
   }

   .tab-btn {
       width: 50%;
       border-radius: 10px;
       padding: 10px;
       font-weight: 500;
       border: none;
       background: #0f2a47;
       color: #aaa;
   }

   .tab-btn.active {
       background: linear-gradient(90deg, #2a7cff, #1da1f2);
       color: #fff;
   }

   .form-control {
       background: transparent;
       border: 1px solid #1c3d63;
       color: #fff;
       padding: 12px;
   }

   .form-control::placeholder {
       color: #7aa0c4;
   }

   .form-control:focus {
       background: transparent;
       border-color: #2a7cff;
       box-shadow: none;
       color: #fff;
   }

   .input-group-text {
       background: transparent;
       border: 1px solid #1c3d63;
       color: #7aa0c4;
   }

   .login-btn {
       width: 100%;
       background: #12355a;
       border: none;
       padding: 12px;
       border-radius: 10px;
       color: #6d8cab;
       font-weight: 600;
   }

   .divider {
       text-align: center;
       color: #6d8cab;
       margin: 15px 0;
       position: relative;
   }

   .divider::before,
   .divider::after {
       content: "";
       position: absolute;
       width: 40%;
       height: 1px;
       background: #1c3d63;
       top: 50%;
   }

   .divider::before {
       left: 0;
   }

   .divider::after {
       right: 0;
   }

   .google-btn {
       background: linear-gradient(90deg, #2a7cff, #1da1f2);
       border: none;
       border-radius: 10px;
       padding: 10px;
       width: 100%;
       font-weight: 500;
   }

   .small-link {
       color: #7aa0c4;
       font-size: 13px;
   }

   .small-link a {
       color: #2a7cff;
       text-decoration: none;
   }

   .top-close {
       position: absolute;
       right: 15px;
       top: 15px;
       color: #7aa0c4;
       font-size: 18px;
   }



   /* Header Background */
   .main-header {
       background: linear-gradient(90deg, #020b18, #071a2f);
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
   }

   /* Nav Links */
   .navbar .nav-link {
       color: #bcd2e8 !important;
       font-size: 14px;
       transition: all 0.3s ease;
   }

   .navbar .nav-link:hover {
       color: #2a7cff !important;
   }

   .navbar .nav-link.active {
       color: #ffffff !important;
   }

   /* CTA Button */
   .btn-gradient {
       background: linear-gradient(90deg, #2a7cff, #1da1f2);
       border: none;
       border-radius: 8px;
       color: #fff;
       transition: 0.3s;
   }

   .btn-gradient:hover {
       opacity: 0.9;
   }

   /* Mobile Fix */
   .navbar-toggler {
       outline: none !important;
       box-shadow: none !important;
   }