@media only screen and (min-width: 1000px){
    .container{
        width: calc(100% - 32px);
        margin: 0 auto;

    }
}

body {
        background-color: #f8f9fa;
    }
    .form-container {
        max-width: 600px;
        margin: 50px auto;
        padding: 10px;
        background: rgb(133, 130, 130);
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    .form-title {
        margin-bottom: 10px;
    }
     /* For larger screens */
     @media (min-width: 576px) {
        .welcome-section h1 {
            font-size: 3rem;
        }
    }

    .navbar {
    background-color: #239de3;
   }

   .navbar .nav-link {
   color: white !important;
   }

   .navbar .nav-link:hover {
   color: #f1f1f1 !important;
   }
   footer {
       /* position: fixed; */
       bottom: 0;
       width: 100%;
       background-color: #003366;
       color: white;
       text-align: center;
       padding: 15px 0;
       font-size: 0.9rem;

   }

   footer a {
       color: #ffffff;
       text-decoration: none;
   }


   .welcome-section {
   background-color: #003366;
   color: #ffffff;
   padding: 80px 0;
   text-align: center;
   }

   .welcome-section h3 {
   font-size: 3.5rem;
   font-weight: 400;
   }

   .welcome-section p {
   font-size: 1.2rem;
   }
   
   .navbar {
       background-color: #239de3;
   }

   .navbar .nav-link {
       color: white !important;
   }

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

   footer {
       bottom: 0;
       width: 100%;
       background-color: #003366;
       color: white;
       text-align: center;
       padding: 15px 0;
       font-size: 0.9rem;
   }

   footer a {
       color: #ffffff;
       text-decoration: none;
   }

   .welcome-section {
       background-color: #003366;
       color: #ffffff;
       padding: 80px 0;
       text-align: center;
   }

   .welcome-section h3 {
       font-size: 3.5rem;
       font-weight: 400;
   }

   .welcome-section p {
       font-size: 1.2rem;
   }

   /* Loading Spinner Styles */
   #loader {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(255, 255, 255, 0.8);
       z-index: 9999;
       display: none; /* Hidden by default */
   }

   .spinner {
       position: absolute;
       top: 50%;
       left: 50%;
       width: 50px;
       height: 50px;
       border: 5px solid #f3f3f3;
       border-top: 5px solid #3498db;
       border-radius: 50%;
       animation: spin 2s linear infinite;
   }

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