body {
   font-family: 'Poppins', sans-serif !important;
 }

 .lightblue-background {
   background: #4c64b9 !important;
 }

 .login-background-decoration {
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   z-index: 0;
   pointer-events: none;
 }

 .login-circle {
   position: absolute;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.1);
   animation: float 20s infinite ease-in-out;
 }

 .login-circle1 {
   width: 300px;
   height: 300px;
   top: -100px;
   left: -100px;
   animation-delay: 0s;
 }

 .login-circle2 {
   width: 200px;
   height: 200px;
   bottom: -50px;
   right: -50px;
   animation-delay: 5s;
 }

 .login-circle3 {
   width: 150px;
   height: 150px;
   top: 50%;
   left: 10%;
   animation-delay: 10s;
 }

 @keyframes float {

   0%,
   100% {
     transform: translateY(0) rotate(0deg);
   }

   50% {
     transform: translateY(-30px) rotate(180deg);
   }
 }

 .login-container {
   max-width: 1200px;
   width: 100%;
   background: rgba(255, 255, 255, 0.98);
   border-radius: 24px;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
   overflow: hidden;
   position: relative;
   z-index: 1;
   backdrop-filter: blur(10px);
 }

 .login-header {
   background: linear-gradient(135deg, #041043 0%, #2a4bc3 100%);
   /* background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); */
   padding: 30px 30px;
   text-align: center;
   position: relative;
   overflow: hidden;
 }

 /* .login-header::after {
   content: '';
   position: absolute;
   width: 300px;
   height: 300px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 50%;
   top: -100px;
   right: -100px;
 } */

 .login-header::before {
   content: '';
   position: absolute;
   top: -50%;
   left: -50%;
   width: 200%;
   height: 200%;
   background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
   animation: rotate 20s linear infinite;
 }

 /* .login-header::after {
   content: '';
   position: absolute;
   width: 200px;
   height: 200px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 50%;
   bottom: -130px;
   left: -50px;
 } */

 @keyframes rotate {
   from {
     transform: rotate(0deg);
   }

   to {
     transform: rotate(360deg);
   }
 }

 .login-logo {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 15px;
   position: relative;
   z-index: 1;
 }

 .login-logo-icon {
   width: 60px;
   height: 60px;
   background: white;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
 }

 .login-logo-text {
   width: 100%;
   text-align: center;
   place-items: center;
   display: grid;
   color: white;
   font-size: 32px;
   font-weight: 700;
   letter-spacing: 1px;
 }

 .login-content-wrapper {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 40px;
   padding: 50px;
 }

 .login-info-section {
   background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
   padding: 25px;
   border-radius: 16px;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
 }

 .login-info-title {
   font-size: 24px;
   font-weight: 700;
   color: #1e3c72;
   margin-bottom: 25px;
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .login-info-title::before {
   content: '⚠️';
   font-size: 28px;
 }

 .login-info-item {
   display: flex;
   gap: 12px;
   margin-bottom: 18px;
   color: #2d3748;
   line-height: 1.6;
   font-size: 15px;
 }

 .login-info-item::before {
   content: '✦';
   color: #667eea;
   font-size: 18px;
   flex-shrink: 0;
 }

 .login-support-box {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   padding: 10px;
   border-radius: 12px;
   margin-bottom: 15px;
   color: white;
   text-align: center;
 }

 .login-support-email {
   font-weight: 600;
   font-size: 16px;
   letter-spacing: 0.5px;
   word-break: break-all;
 }

 .login-instruction-btn {
   background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
   color: white !important;
   text-decoration: none !important;
   padding: 14px 28px;
   border: none;
   border-radius: 50px;
   font-size: 15px;
   font-weight: 600;
   cursor: pointer;
   margin-top: 20px;
   transition: all 0.3s ease;
   box-shadow: 0 4px 15px rgba(245, 87, 108, 0.3);
 }

 .login-instruction-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(245, 87, 108, 0.4);
   text-decoration: none !important;
 }

 .login-form-section {
   background: white;
   padding: 25px;
   border-radius: 16px;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
 }

 @media (max-width: 968px) {

   .login-info-section {
     order: 2;
   }

   .login-form-section {
     order: 1;
   }
 }

 .login-form-group {
   margin-bottom: 25px;
 }

 .login-form-label {
   display: block;
   font-weight: 600;
   color: #2d3748;
   margin-bottom: 8px;
   font-size: 14px;
 }

 .login-form-input {
   width: 100%;
   padding: 14px 18px;
   border: 2px solid #e2e8f0;
   border-radius: 10px;
   font-size: 15px;
   transition: all 0.3s ease;
   background: #f8fafc;
 }

 .login-form-input:focus {
   outline: none;
   border-color: #667eea;
   background: white;
   box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
 }

 .login-or-divider {
   text-align: center;
   position: relative;
   margin: 20px 0;
 }

 .login-or-text {
   background: white;
   padding: 0 15px;
   color: #718096;
   font-weight: 600;
   position: relative;
   z-index: 1;
 }

 .login-or-divider::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 0;
   right: 0;
   height: 2px;
   background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
 }

 .login-captcha-wrapper {
   transform: scale(0.95);
   transform-origin: left center;
   margin: 20px 0;
 }

 .login-submit-btn {
   width: 100%;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   padding: 16px;
   border: none;
   border-radius: 12px;
   font-size: 17px;
   font-weight: 700;
   cursor: pointer;
   transition: all 0.3s ease;
   box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
   margin-top: 10px;
 }

 .login-submit-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
 }

 .login-footer {
   background: linear-gradient(135deg, #2a4bc3 0%, #041043 100%);
   /* background: #1a202c; */
   color: white;
   text-align: center;
   padding: 20px;
   font-size: 14px;
 }

 .login-footer p {
   margin: 0px !important;
 }

 .login-footer-link {
   color: #667eea;
   text-decoration: none;
   font-weight: 600;
 }

 @media (max-width: 968px) {
   .login-content-wrapper {
     grid-template-columns: 1fr;
   }

   .login-logo-text {
     font-size: 24px;
   }

   .login-content-wrapper {
     padding: 30px 20px;
   }
 }

 .dash-school-name {
   color: #ffd700;
   padding-top: 25px;
   font-size: 20px;
   font-weight: 600;
   letter-spacing: 4px;
 }

 .subtitle-new {
   color: #ffd700;
   font-size: 20px;
   position: relative;
   z-index: 1;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 3px;
   text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3),
     0 0 20px rgba(255, 215, 0, 0.4);
   background: linear-gradient(45deg, #ffd700, #ffed4e, #ffd700);
   background-size: 200% 200%;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }

 .login-footer a {
   color: #ef9a00;
   text-decoration: none;
 }

 .multi-stars {
   position: fixed;
   width: 100%;
   height: 100%;
   pointer-events: none;
 }

 .multi-star {
   position: absolute;
   background: white;
   border-radius: 50%;
   animation: twinkle-new 3s infinite;
 }

 @keyframes twinkle-new {

   0%,
   100% {
     opacity: 0.3;
     transform: scale(1);
   }

   50% {
     opacity: 1;
     transform: scale(1.2);
   }
 }

 .submit-btn-new {
   background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
   color: white;
   border: none;
   padding: 12px 45px;
   font-size: 18px;
   font-weight: 600;
   border-radius: 50px;
   cursor: pointer;
   display: block;
   transition: all 0.3s ease;
   box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
   letter-spacing: 1px;
 }

 .submit-btn-new::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 0;
   height: 0;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.2);
   transform: translate(-50%, -50%);
   transition: width 0.6s, height 0.6s;
 }

 .submit-btn-new:hover::before {
   width: 400px;
   height: 400px;
 }

 .submit-btn-new:hover {
   background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
   transform: translateY(-2px);
   box-shadow: 0 12px 25px rgba(118, 75, 162, 0.5);
 }

 .submit-btn-new span {
   position: relative;
   z-index: 1;
 }

 /* select2 design */
 .login-form-section select {
   width: 100%;
   padding: 14px 16px;
   border: 2px solid #e0e0e0;
   border-radius: 12px !important;
   font-size: 15px;
   transition: all 0.3s ease;
   background: white;
   font-family: inherit;
 }

 .login-form-section select:focus {
   outline: none;
   border-color: #667eea;
   box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
   transform: translateY(-2px);
 }

 .select2-choice {
   width: 100% !important;
   padding: 12px 16px !important;
   border: 2px solid #e0e0e0 !important;
   border-radius: 12px !important;
   font-size: 15px !important;
   transition: all 0.3s ease !important;
   background: white !important;
   font-family: inherit !important;
   height: unset !important;
 }

 .select2-container {
   padding: 0px;
   border-radius: 12px;
   border: 0px;
 }

 .select2-drop-active {
   border-radius: 6px;
   margin-top: 9px;
   padding: 0px;
   width: 100%;
   background: white;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
   transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: top center;
   transform: translateY(0) scaleY(1);
 }

 .select2-search {
   padding: 8px 3px;
   border-bottom: 1px solid #f0f0f0;
   position: relative;
   background: #f8f9fa;
   margin-top: 0px !important;
 }

 .select2-search input {
   width: 100%;
   padding: 5px 5px 5px 5px;
   border: 1px solid #e0e0e0;
   border-radius: 8px;
   font-size: 14px;
   outline: none;
   transition: all 0.2s;
 }

 .select2-results li {
   display: flex;
   align-items: center;
   padding: 5px 2px;
   border-bottom: 1px solid #f0f0f0;
   cursor: pointer;
   transition: all 0.2s;
   /* font-family: 'Segoe UI', Roboto, -apple-system, sans-serif; */
   font-size: 15px;
 }

 .select2-results .select2-highlighted {
   background: #ede4ff !important;
   color: #000 !important;
 }

 .select2-container {
   width: 100% !important;
 }

 select.form-control:not([size]):not([multiple]) {
   height: unset;
 }

 /* select2 design */
 .m-b-40 {
   margin-bottom: 40px !important;
 }

 .m-t-40 {
   margin-top: 40px !important;
 }

 .m-t-20 {
   margin-top: 20px !important;
 }

 .m-t-30 {
   margin-top: 30px !important;
 }

 .m-t-10 {
   margin-top: 10px !important;
 }

 /* new changes */
 .login-support-email a {
   color: #ffffff !important;
   text-decoration: none !important;
 }

 .place-center {
   display: grid;
   place-content: center;
 }

 /* new_work_loader_design_start  */
 .new_work_loader {
   --hue: 210;
   --size: 100px;
   --border: 10px;
   --speed: 1.3s;
   --blur: var(--border);
 }

 .new_work_loader {
   top: 50%;
   left: 50%;
   width: var(--border);
   aspect-ratio: 1;
   background: white;
   border-radius: 50%;
   position: absolute;
   --y: calc((var(--size) * -0.5) + (var(--border) * 0.5));
   transform: rotate(0deg) translateY(var(--y));
   animation: spins var(--speed) infinite linear;
 }

 .new_work_loader::before {
   content: "";
   position: absolute;
   inset: calc(var(--border) * -0.5);
   border-radius: 50%;
   background: white;
   filter: blur(var(--blur));
   z-index: -1;
 }

 .new_work_loader::after {
   content: "";
   width: var(--size);
   aspect-ratio: 1;
   position: absolute;
   top: 0%;
   left: 50%;
   translate: -50% 0;
   background: conic-gradient(transparent 35%, hsl(26.32deg 100% 49.61%), hsl(26.32deg 100% 49.61%), white);
   border-radius: 50%;
   mask: radial-gradient(transparent calc(((var(--size) * 0.5) - var(--border)) - 1px),
       white calc((var(--size) * 0.5) - var(--border)));
 }

 @keyframes spins {
   to {
     transform: rotate(360deg) translateY(var(--y));
   }
 }

 .loader-overlay {
   position: fixed;
   background: rgba(0, 0, 0, 0.63);
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   display: none;
   z-index: 10;
   padding-top: 100px;
 }

 /* new_work_loader_design_end  */

 .warning-header {
   display: flex;
   align-items: center;
   gap: 10px;
   background: #fff3cd;
   padding: 5px;
   border-radius: 12px;
   margin-bottom: 10px;
   border-left: 5px solid #ffc107;
   font-size: 14px;
 }

 .warning-icon {
   font-size: 23px;
   padding: 3px;
   color: #ff0000;
 }

 .warning-text {
   color: #0d47a1;
   font-size: 17px;
   font-weight: bold;
 }

 .info-list {
   list-style: none;
   counter-reset: step-counter;
   padding: 0;
   margin: 0;
 }

 .info-list li {
   background: white;
   border: 1px solid #e9ecef;
   border-radius: 50px;
   padding: 10px 30px 10px 70px;
   margin-bottom: 5px;
   display: block;
   position: relative;
   color: #2c3e50;
   line-height: 1.6;
   transition: all 0.3s ease;
   counter-increment: step-counter;
   font-size: 14px;
 }

 .info-list li::before {
   content: counter(step-counter);
   position: absolute;
   left: 20px;
   top: 50%;
   transform: translateY(-50%);
   background: linear-gradient(135deg, #8e2de2, #4a00e0);
   color: white;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: bold;
   font-size: 15px;
 }

 .info-list li:hover {
   border-color: #9b59b6;
   transform: scale(1.02);
   box-shadow: 0 8px 25px rgba(155, 89, 182, 0.2);
 }

 .info-list li a {
   color: #667eea;
   text-decoration: none;
   font-weight: 600;
   transition: color 0.3s;
 }

 .info-list li a:hover {
   color: #4a00e0;
   text-decoration: underline;
 }

 .proceed-btn {
   background: linear-gradient(135deg, #c0392b, #e74c3c);
   color: white;
   border: none;
   padding: 18px 40px;
   font-size: 1.1em;
   font-weight: bold;
   border-radius: 10px;
   cursor: pointer;
   display: block;
   margin: 30px auto 0;
   text-transform: uppercase;
   box-shadow: 0 5px 20px rgba(192, 57, 43, 0.4);
   transition: all 0.3s;
   width: 100%;
   max-width: 300px;
 }

 .proceed-btn:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 30px rgba(192, 57, 43, 0.6);
 }

 @media (max-width: 768px) {
   .container {
     padding: 25px;
   }

   .info-list li {
     padding: 18px 25px 18px 70px;
     border-radius: 40px;
   }

   .info-list li::before {
     left: 15px;
     width: 35px;
     height: 35px;
     font-size: 1em;
   }

   .warning-text {
     font-size: 1.1em;
   }

   .warning-icon {
     font-size: 1.5em;
   }
 }