@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

* {
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
}

/* Global Styles */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    scroll-behavior: smooth;
}

h1 {
    font-size: 2rem !important;
    font-weight: 700 !important;
}

h2 {
    font-size: 1.5rem !important;
    font-weight: 500 !important;
}

p,
label {
    font-size: 1rem !important;
    font-weight: 400 !important;
}

a {
    text-decoration: none !important;
    color: #005cbb !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
}

.sign-in,.sign-up {
    width: 100%;
    height: 100%;
}

/* Left Image styles */
.left-image img {
    width: 100%;
    object-fit: cover;
    max-width: 390px;
    margin: 0 auto;
    display: block;
}

.login-card {
    padding: 70px;
    background: linear-gradient(to right, #E6FAFE 0%, #EDDDFB 100%);
    border-radius: 36px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

/* Form section styles */
.form-section {
    max-width: 410px;
    width: 100%;
}

.form-floating input {
    position: relative;
}

.form-floating input:focus {
    box-shadow: none;
    border: 1px solid #005cbb;
}

.form-floating span {
    position: absolute;
    bottom: 50%;
    right: 2px;
    transform: translateY(50%);
    width: 100%;
    text-align: right;
}

/* Button Styles */
.user-btns button {
    background-color: transparent;
    border: 1px solid #74777f;
}

.user-btns button:nth-child(1) {
    color: #005cbb;
}

.user-btns button:nth-child(2) {
    color: #ba1a1a;
}

/* Divider Styles */
.divider {
    position: relative;
}

.divider::before {
    content: "";
    position: absolute;
    height: 1px;
    width: 46%;
    background: linear-gradient(#bbb8b8, #f3f3f3);
    left: 0;
    bottom: 11px;
}

.divider::after {
    content: "";
    position: absolute;
    height: 1px;
    width: 46%;
    background: linear-gradient(#bbb8b8, #f3f3f3);
    right: 0;
    bottom: 11px;
}

/* Social icons */
.social-icons .social__icon {
    border: 1px solid #3c4858;
    width: 32px;
    height: 32px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease;
    cursor: pointer;
}

.social-icons .social__icon i{
    color: #000000;
}

.social-icons .social__icon:hover {
    background-color: #2f55d4;
    border: 1px solid transparent;
}

.social-icons .social__icon:hover i {
    color: #ffffff;
}

.btn-primary {
    background-color: #f00e4b !important;
    border: none !important;
    color: #ffffff !important;
    padding: 10px 30px !important;
    border-radius: 5px !important;
    transition: all 0.5s ease !important;
    font-size: 1rem !important;
}

.btn-outline-primary {
    border: 1px solid #f00e4b !important;
    color: #f00e4b !important;
    border-radius: 5px !important;
    padding: 10px 30px !important;
    background: #ffffff !important;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.windows-icon{
    width: 28px;

}


    .btn-primary:hover {
        background-color: #de043e !important;
    }

h2.login-alt {
    text-align: center;
    position: relative;
    margin-bottom: 1.5rem;
}

    h2.login-alt::before {
        left: 0;
        top: 50%;
        content: '';
        position: absolute;
        width: 43%;
        height: 1px;
        background: #acabab;
    }

    h2.login-alt::after {
        right: 0;
        top: 50%;
        content: '';
        position: absolute;
        width: 43%;
        height: 1px;
        background: #acabab;
    }

    @media screen and (max-width: 767.98px){
        .login-card{
            padding: 22px;
            border-radius: 20px;
        }
    }