.Login-page {
    max-width: 550px;
    margin: auto;
    padding-top:100px;
    padding-bottom:100px;
}

.Login-p .Login-span {
    opacity: 0.5;
    font-size: 19px;
}

.Login-p a {
    font-size: 19px;
    color: black;
    text-decoration: none;
    margin-left: 0px;
}

.Forget-pass {
    margin: 0px 0px 20px 7px;
}

    .Forget-pass a {
        color: black;
        text-decoration: none;
        font-size: 15px;
    }

.Form-control {
    border-radius: 0;
    box-shadow: none !important;
    border: 1px solid rgb(189, 189, 189) !important;
    padding: 9px;
    font-size: 18px;
}

    .Form-control:focus {
        border: 1px solid black !important;
    }

.Sign-in {
    border: 0;
    border-radius: 0;
    margin-bottom: 17px;
    text-transform: uppercase;
    width: 100%;
    background-color: black !important;
    padding: 10px;
}

.Login-a {
    position: relative;
    padding-bottom: 1px;
    color: black;
    font-size: 15px;
    margin-left: 10px;
    margin-bottom: 80px !important;
}

    .Login-a:hover {
        color: black;
    }

    .Login-a::after {
        position: absolute;
        content: "";
        bottom: 0;
        left: 0;
        width: 0;
        height: 1px;
        background-color: black;
        transition: 0.2s ease-in-out;
    }

    .Login-a:hover::after {
        width: 100%;
    }

@media (max-width:450px) {
    .Login-title {
        font-size: 40px;
        margin-left: 32%;
    }

    .Login-p .Login-span {
        font-size: 17px;
    }

    .Login-p a {
        font-size: 17px;
    }
}

.or-separator {
    position: relative;
    text-align: center;
    margin: 20px 0;
    width: 100%; /* Ensure full width */
}

.or-text {
    display: inline-block;
    padding: 0 15px; /* Space between the text and lines */
    color: #6c757d;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    position: relative;
}

/* Left line */
.or-separator::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 50%; /* Stop at the middle */
    margin-right: 40px; /* Adjust to create a gap between the line and OR text */
    height: 1px;
    background-color: #6c757d;
}

/* Right line */
.or-separator::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%; /* Start from the middle */
    right: 0;
    margin-left: 40px; /* Adjust to create a gap between the line and OR text */
    height: 1px;
    background-color: #6c757d;
}

/* Gmail Button */
.btn-gmail {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dadce0 !important; /* Gmail's light border */
    border-radius: 4px; /* Slightly rounded corners */
    background-color: #ffffff !important; /* White background */
    color: #1a73e8 !important; /* Gmail blue text */
    font-size: 16px;
    font-weight: 500;
    text-transform: none; /* Remove uppercase */
    padding: 10px;
    transition: background-color 0.2s ease-in-out;
    position: relative;
}

    .btn-gmail:hover {
        background-color: #f1f3f4 !important; /* Light gray hover effect */
        color: #1a73e8 !important;
    }

    .btn-gmail::before {
        content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path fill="%231a73e8" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="%2334a853" d="M12 23c2.97 0 5.46-1.01 7.28-2.73l-3.57-2.77c-1.01.68-2.3 1.08-3.71 1.08-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C4 20.99 7.81 23 12 23z"/><path fill="%23fbbc05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"/><path fill="%23ea4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.81 1 4 3.01 2.18 6.16l3.66 2.84C6.71 6.4 9.14 5.38 12 5.38z"/></svg>'); /* Gmail icon */
        margin-right: 10px;
    }

/* Facebook Button */
.btn-facebook {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #3b5998 !important; /* Facebook's primary blue */
    border-radius: 4px; /* Slightly rounded corners to match Gmail button */
    background-color: #3b5998 !important; /* Facebook blue background */
    color: #ffffff !important; /* White text */
    font-size: 16px;
    font-weight: 500;
    text-transform: none; /* Remove uppercase */
    padding: 10px;
    transition: background-color 0.2s ease-in-out;
    margin-top:5px;
    position: relative;
}

    .btn-facebook:hover {
        background-color: #344e86 !important; /* Slightly darker blue for hover */
        color: #ffffff !important;
    }

    .btn-facebook::before {
        content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path fill="%23ffffff" d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>'); /* Facebook icon */
        margin-right: 10px;
    }