:root {
        --primary-font: 'Poppins', sans-serif;
        --secondary-font: 'Montserrat', sans-serif;
    }
    body, html {
        padding: 0;
        display: flex;
        height: 100vh;
        width: 100vw;
    }

    html, body, h1, h2, h3, h4, h5, h6, p,a {
        font-family: var(--secondary-font) ;
        margin: 0;
    }

    .mainlogindiv{ 
        display: flex;
        width: 100%;
        /* padding: 2rem; */
        background: #373434; 
        /* gap: 2%; */
    }

    .left-section {
        flex-basis: 100%;
        display: flex;
        justify-content: center;
        position: relative;
        overflow: hidden;   
    }

    .remforget{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 1rem;
    }

    .welcomedivtext{
        float: left;
        width: 100%;
        margin: 3rem 0 0 4rem;
    }

    .text2{
        color:#fff;
        margin: 0;
    }

    .welcome{
        font-size: 4rem;
        line-height: 4rem;
        font-weight: 400;
    }

    .deckstar{
        font-size: 7.8rem;
        line-height: 8rem;
        font-weight: 500;
    }
    .libtext{
        font-size: 1.5rem;
        line-height: 2rem;
        font-weight: 300;
        margin-left: 8px;
    }
    .illustration {
        max-width: 70%;
        height: auto;
    }

    .right-section {
        flex-basis: 40%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        overflow: hidden;
        position: relative;
        /* -webkit-box-shadow: -18px 3px 32px -11px rgba(102, 103, 170, 0.63);
        -moz-box-shadow: -18px 3px 32px -11px rgba(102, 103, 170, 0.63);
        box-shadow: -18px 3px 32px -11px rgba(102, 103, 170, 0.63); */
        -webkit-box-shadow: 25px 0px 34px -15px rgba(102,103,170,0.54);
        -moz-box-shadow: 25px 0px 34px -15px rgba(102,103,170,0.54);
        box-shadow: 25px 0px 34px -15px rgba(102,103,170,0.54);
        border-radius: 20px;
    }

    .welcomemsg {
        text-align: center;
        color: #fff;
        font-size:36px;
        font-weight: 400;
        margin-bottom: 1rem;
        line-height: 60px;
    }

    .welcomemsg .brand-name {
        display:block;
        font-size:70px;
        font-weight: 600;
    }

    #remember{
        padding: 0;
        margin: -4px 0 0 0;
        width: 17px;
        height: 20px;
        border-radius: 3px;
    }

    .logintext {
        display: flex;
        align-items: flex-start;
        padding: 0rem 0 1.2rem;
        margin: 0;
        color: #373434;
        font-size: 40px;
        font-family: var(--secondary-font);
        font-weight: 600;
        margin-top: 3rem;
    }

    .login-form {
        display: block;
        width: 35%;
        /* text-align: center; */
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        left: 50%;
        padding: 3rem;
        background: #fff;
        border-radius: 12px;
    }

    .input-group {
        margin-bottom: 2rem;
        position: relative;
    }

    .input-group input {
        padding: 10px 1rem;
        font-size: 18px;
        box-sizing: border-box;
        width: 100%;
        background: #f3f3f3;
        border: 1.5px solid #cfcfcf;
        font-family: var(--secondary-font) ;
        color: #373434;
        font-weight: 400;
        border-radius: 8px;
    }

    .input-group input::placeholder {
        color: #a9a9a9;

    } 

    input:-webkit-autofill {
        background-color: #2C2C2C !important;
    }

    input:-moz-placeholder-shown {
        background-color: #2C2C2C;
    }

    input:-internal-autofill-selected {
        background-color: #2C2C2C !important;
    }

    .login-form .input-group:last-child {
        margin-bottom: 1rem;
    }

    /* .lstchild{
        margin-bottom: 0.5rem;
    } */

    .input-group input:focus {
        outline: none;
        -webkit-box-shadow: 0px 0px 16px 0px rgba(83,77,137,0.5);
        -moz-box-shadow: 0px 0px 16px 0px rgba(83,77,137,0.5);
        box-shadow: 0px 0px 16px 0px rgba(83,77,137,0.5);
    }

    .iconlogin {
        position: absolute;
        top: 50%;
        right: 1rem;
        transform: translateY(-50%);
        color: #aaa;
        width: 24px;
    }

    .remember-me {
        display: flex;
        align-items: center;
        gap: 4px;
        color: #373434;
        font-size: 18px;
        font-weight: 500;
        position: relative;
        font-family: var(--secondary-font) ;
    }

    .login-btn {
        width: 100%;
        padding: 1rem 6rem;
        background: #373434;
        font-family: var(--secondary-font) ;
        color: #fff;
        border: none;
        border-radius: 10px;
        font-size: 1.2rem;
        cursor: pointer;
        transition: 0.3s;
        margin: 2rem auto;
    }

    .login-btn:hover {
        background: #373434;
        /* background: rgb(54,56,94);
        background: linear-gradient(239deg, rgba(54,56,94,1) 30%, rgba(98,100,163,1) 100%); */
    }

    .forgot-password {
        display: block;
        text-align: center;
        color: #373434;
        text-decoration: none;
        font-size: 1rem;
        font-weight: 500;
        position: relative;
        font-family: var(--secondary-font) ;
    }

    /* .forgot-password::after{
        position: absolute;
        content: '';
        width: 116px;
        height: 1px;
        background: #8C8C8C;
        left: 47%;
        bottom: -2px;
        transform: translateX(-48%);
    } */

    .forgot-password:hover {
        text-decoration: none;
    }
    input:-webkit-autofill {
        background-color: unset !important;  /* Set the background color you prefer */
    }
    .message{
        width: 100%;
        color: #e93838;
        margin-top: 1rem;
        /* position: absolute; */
        /* left: 50%; */
        /* transform: translateX(-50%); */
    }

    .mySlides{
        width: 100%;
        height: 100%;
    }
    .mySlides img{
        height: 100%;
        object-fit: cover;
    }
    .slideshow-container {
        /* max-width: 100%; */
        width: 40%;
        position: relative;
        /* margin: auto; */
        border-radius: 20px;
        overflow: hidden;
        -webkit-box-shadow: 25px 0px 34px -15px rgba(102,103,170,0.54);
        -moz-box-shadow: 25px 0px 34px -15px rgba(102,103,170,0.54);
        box-shadow: 25px 0px 34px -15px rgba(102,103,170,0.54);
    }
      
    .prev, .next {
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        padding: 16px;
        margin-top: -22px;
        color: white;
        font-weight: bold;
        font-size: 18px;
        transition: 0.6s ease;
        border-radius: 0 3px 3px 0;
        user-select: none;
    }
      
    .next {
        right: 0;
        border-radius: 3px 0 0 3px;
    }
      
    .prev:hover, .next:hover {
        background-color: rgba(0,0,0,0.8);
    }
      
    .carotext {
        color: #f2f2f2;
        font-size: 28px;
        padding: 8px 12px;
        position: absolute;
        bottom: 60px;
        width: 100%;
        text-align: center;
        font-family: var(--secondary-font) ;
    }
    
    .dotnav{
        text-align: center;
        z-index: 999999999;
        position: absolute;
        bottom: 25px;
        left: 50%;
        transform: translateX(-50%);
    }
      
    .dot {
        cursor: pointer;
        height: 12px;
        width: 12px;
        margin: 0 2px;
        background-color: #fff;
        border-radius: 50%;
        display: inline-block;
        transition: width 0.3s ease, background-color 0.3s ease;
    }
      
    .active, .dot:hover {
        background-color: #717171;
    }

    .dot.active {
        width: 40px;
        background-color: #fff;
        border-radius: 15px;
    }

    .fade {
        animation-name: fade;
        animation-duration: 1.5s;
    }

    @keyframes fade {
        from {opacity: .4} 
        to {opacity: 1}
    }

    /* On smaller screens, decrease text size */
    @media only screen and (max-width: 300px) {
        .prev, .next,.text {font-size: 11px}
    }

    @media screen and (min-width: 1027px) and (max-width: 1200px) {
        .left-section {
            flex-basis: 100%; 
        }
        .right-section {
            flex-basis: 33%; 
        }
        .libtext {
            font-size: 1.2rem;
            line-height: 1.2rem;
        }
        .deckstar {
            font-size: 6rem;
            line-height: 6rem;
            letter-spacing: normal;
        }
        .welcome {
            font-size: 3.5rem;
            line-height: 3.5rem;
            letter-spacing: normal;
        }
    }
    @media screen and (min-width: 768px) and (max-width: 1027px) {
        .left-section {
            flex-basis: 100%; 
        }
        .right-section {
            flex-basis: 35%; 
        }
        .login-btn {
            padding: 1rem 5rem;
        }
        .logintext{
            font-size: 42px;
        }
        .welcomedivtext {
            margin: 4rem 0 0 3.5rem;
        }
        .libtext {
            font-size: 1rem;
            line-height: 1.2rem;
        }
        .deckstar {
            font-size: 5rem;
            line-height: 5rem;
            letter-spacing: normal;
        }
        .welcome {
            font-size: 2.5rem;
            line-height: 3rem;
            letter-spacing: normal;
        }
    }
    @media screen and (min-width: 1900px){
        .input-group {
            margin-bottom: 4.5rem;
        }
        .lstchild {
            margin-bottom: 1rem !important;
        }
    }