/* General Styles */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    /* Header */
    header {
      background-color: navy;
      color: black;
      padding: 10px;
    }

    .header-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .header-logo {
      text-align: left;
    }

    .header-logo img {
      height: 70px;
      display: inline-block;
    }
body {
    background-color: #fff;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 80vh;
}

        .slider-container {
            position: relative;
            max-width: 100%;
            overflow: hidden;
        }

        .slider {
            display: flex;
            transition: transform 0.4s ease-in-out;
        }

        .slide {
            flex: 0 0 100%;
        }

        .slide img {
              width: 100%; /* or specify the width you want */
        max-width: 100%; /* override the max-width for desktop */
        height: 100%;
        }

    /* Styling for navigation buttons */
    .slider-btn {
        cursor: pointer;
        background-color: #333;
        color: #fff;
        border: none;
        padding: 10px;
        margin: 0 5px;
        border-radius: 5px;
    }
.slider-btn {
    cursor: pointer;
    background: none;
    border: none;
}

.slider-btn img {
    max-width: 100%; /* Ensure the image does not exceed the button size */
     
}


.slider-controls {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%; /* Add this line to make the controls span the full width */
    display: flex;
    justify-content: center; /* Add this line to center the controls */
}
        .login-container {
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            border-radius: 10px;
            width: 100%;
            max-width: 400px;
            margin-top: 20px;
        }

        .login-container img {
            max-width: 100px;
            height: auto;
            margin-bottom: 20px;
        }

        .form-control {
            border-radius: 5px;
            margin-bottom: 15px;
        }

        .btn-primary {
            background-color: #012970;
            border: 1px solid #012970;
        }

        .btn-primary:hover {
            background-color: #012970;
            border: 1px solid #012970;
        }

        .footer {
            text-align: center;
            margin-top: 5px;
        }

        .copyright a {
            color: #012970;
            font-weight: bold;
        }
              

        /* Media Query for Mobile Devices */
        @media (min-width: 768px) {
            .container {
                flex-direction: row;
                justify-content: space-between;
            }

            .slider-container {
                max-width: 300px; /* Adjust the width of the slider */
            }

            .login-container {
                margin-top: 0;
            }
        }
        /* For desktop screens (width 768 pixels and above) */
@media (min-width: 768px) {
    .slide img {
        width: none; /* or specify the width you want */
        max-width: none; /* override the max-width for desktop */
        height: 100%;
    }
}
/* For desktop screens (width 768 pixels and above) */
@media (min-width: 768px) {
    .slider-container {
        margin-bottom: 20px; /* Adjust the bottom margin as needed */
    }

    .login-container {
        margin-top: 20px; /* Adjust the top margin as needed */
    }
}

/* Media Queries */
@media (min-width: 768px) {
    .container {
        flex-direction: row;
        justify-content: space-between;
    }

    .slider-container {
        max-width: 300px; /* Adjust the width of the slider */
    }

    .login-container {
        margin-top: 0;
    }

    .slide img {
        width: none; /* or specify the width you want */
        max-width: none; /* override the max-width for desktop */
        height: 100%;
    }
.slider-container {
        margin-bottom: 20px; /* Adjust the bottom margin as needed */
    }

    .login-container {
        margin-top: 20px; /* Adjust the top margin as needed */
    }
}

/* For desktop screens (width 768 pixels and above) */
@media (min-width: 768px) {
    .slider-container {
        max-width: 800px; /* Adjust the width of the slider container */
        margin-bottom: 20px; /* Adjust other styles as needed */
    }

    .login-container {
        margin-top: 20px;
        /* Adjust the top margin as needed */
        margin-left: 30px;
    }
}