*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    color: white !important;
}

.contanier {
    background-image: url("./back.jpg");
    height: 100vh;
    width: 100% !important;
	overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
	animation: change 100s infinite ease-in-out;
}

.content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-transform: uppercase;

}
.w-50 {
    width: 30% !important;
    position: absolute !important;
    top: 120px;
    border: 3.5px solid cadetblue !important;
    border-radius: 50px;
    left: 35%;
    
}
.logo_style {
    display: block; /* Ensures the image is treated as a block-level element */
    margin: 0 auto; /* Centers the image horizontally */
    background-color: transparent; /* Removes background color */
    max-width: 20%; /* Sets the maximum width of the image to 10% of its container */
    height: auto; /* Allows the height to adjust proportionally */
	margin-bottom: 20px; /* Add left margin of 10% */
}

.form-control {
	width: 75%;
    margin: 0 auto; /* Set margin to auto to horizontally center the input fields */
}
.forgot {
    font-size: 12px;
    color: #FB2326;
    text-decoration: none; /* Remove underline */
}
.emp {
    
    color: #0d80ec;
    text-decoration: none; /* Remove underline */
}
h3.text-white {
        font-family: Arial, sans-serif; /* Change the font to a formal style */
        font-weight: normal; /* Ensure normal font weight */
    }

    ms-auto {
        width: 50%; /* Set the width of the horizontal rule */
        margin: 0 auto; /* Center the horizontal rule */
        border-color: black; /* Set the color of the horizontal rule */
}
.form-label {
	 font-weight: 700;
    display: block; /* Ensure each label is on its own line */
    text-align: center; /* Center align the text within the label */
}
.btn-success {
    background-color: #0D80EC !important;
    border: none !important;
    width: 100px;
    margin-left: 2%; /* Add left margin of 10% */
}


@media only screen and (max-width: 600px) {
    .w-50 {
        width: 100% !important;
        left: 0 !important;
    }
}
.form-label.ms-auto {
    margin-right: 10px; /* Adjust the right-side margin as needed */
}

@keyframes change{
    0%
    {
        background-image: url(images/img1.jpg);
    }
    20%
    {
        background-image: url(images/img2.jpg);
    }
    40%
    {
        background-image: url(images/image.jpg);
    }
    60%
    {
        background-image: url(images/img4.jpg);
    }
    80%
    {
        background-image: url(images/img5.jpg);
    }
    100%
    {
        background-image: url(images/img1.jpg);
    }
}