@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 .nav-link:hover {
            color: rgb(7, 155, 54) !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;
   }

   

  /* Footer Styling */
    footer {
        position: relative;
        overflow: hidden; /* Ensure everything fits within the footer */
    }

    .footer-image-overlay {
        position: absolute;
        top: 0;
        right: 0;
        width: 30%; /* Adjust width of the image as desired */
        height: 100%;
        z-index: 1;
    }

    .footer-image {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensure the image covers the area without stretching */
    }

    .footer-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5); /* Dark overlay effect */
        z-index: 2; /* Ensure overlay is above the image */
    }

    /* Style for footer content */
    .footer-content {
        position: relative;
        z-index: 3; /* Ensure content is above the overlay and image */
        color: white;
    }

    footer .container {
        position: relative;
        z-index: 3; /* Ensure content is above the overlay */
    }

   .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); }
   }