* {
    margin: 0px;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

    body {
        font-family: Arial, Helvetica, sans-serif;
        background: white;
        background: linear-gradient(135deg, #EFF4F4 0%, #EFF4F4 30%, #ffffff 100%);
        z-index: 1;
        height:100%;
    }

    #container {
        height: 100vh;
        display: flex;
        overflow: hidden;
    }

    .left {
        /* width: 70vw; */
        padding: 100px 100px 0 100px;
        order: 1;
    }

    .right {
        width: 30vw;
        height: 100%;
        background-color: white;
        order: 2;
        display: flex;
        justify-content: center;
    }

    .right > div {
        position: relative;
        top: 50%;
    }
/* 
.login-right {
    position: relative;
    top: 65%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
} */


    .welcome {
        gap: 12px;
        display: grid;
        grid-auto-flow: column;
        grid-template-rows: auto auto auto auto;
        position: relative;
        /* transform: translateY(-50%); */
    }

    .login-format {
        font-size: 30px;
        color: #707070;
    }

    .logo-image {
        width: 310px;
        height: auto;
    }

    .login_form input {
        background: transparent;
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 6px;
        padding: 14px 16px;
        margin-bottom: 30px;
    }

    .login_form input:focus {
        outline: none;
        border-color: #fff;
    }

    .login_form button {
        background: linear-gradient(45deg, #05b02c, #20a202);
        color: #fff;
        border: none;
        border-radius: 6px;
        margin-top: 10px;
        font-size: 17px !important;
        font-weight: 40;
        cursor: pointer;
        height: 40px !important;
        text-transform: capitalize;
    }

    .spinner-container {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 2rem;
    }

    .logging-in-container {
        display: flex;
        align-items: center;
    }

    .logging-in-text {
        font-size: 14px;
        margin-left: 5px;
        opacity: 0;
        color: #444444;
        animation: fadeIn 1s ease-in-out forwards;
    }

    @keyframes fadeIn {
        from {opacity: 0;}
        to {opacity: 1;}
    }

    .spinner {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: inline-block;
        position: relative;
        border: 3px solid;
        border-color: #47b8f5 #47b8f5 transparent transparent;
        box-sizing: border-box;
        animation: rotation 1s linear infinite;
    }

    .spinner::after,
    .spinner::before {
        content: '';
        box-sizing: border-box;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        border: 3px solid;
        border-color: transparent transparent #367bff #367bff;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        box-sizing: border-box;
        animation: rotationBack 0.5s linear infinite;
        transform-origin: center center;
    }

    .spinner::before {
        width: 32px;
        height: 32px;
        border-color: #033683 transparent transparent;
        animation: rotation 1.5s linear infinite;
        justify-content: center;
    }

    @keyframes rotation {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes rotationBack {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(-360deg);
        }
    }

    .login__submit__azure {
        height: 32px;
        background: #007F9C;
        font-size: 14px;
        padding: 16px 30px;
        border-radius: 5px;
        border: none;
        /* text-transform: uppercase; */
        font-weight: 600px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        box-shadow: 0px 4px 6px rgba(248, 207, 207, 0.1);
        cursor: pointer;
        transition: 0.3s ease-in-out;
        text-align: center;
        text-decoration: none;
        /* max-width: 150px; */
        width: 100%;
    }
    .login__submit__azure:hover {
        transform: translateY(0px);
        box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2);
    }

    * {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    *:after,
    *:before {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .card {
        color: #51515f;
        flex: 1;
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
        font-size: 15px;
        border-radius: 5px;
        justify-content: center;
        box-shadow: 0 4px 8px 0 #eeeeee;
        background: #fff;
        margin: 6px;
        padding: 12px;
    }

    .card-title {
        margin: 22px 0px 12px 0px;
        padding: 0;
        box-shadow: unset;
        background: unset;
    }

    .card>p {
        align-content: center;
    }

    .card>i {
        align-content: center;
        padding-bottom: 5px;
    }









    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

    ::placeholder {
        /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: #fff;
        opacity: 1;
        /* Firefox */
    }


    .circles {
        width: 400px;
        height: 400px;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }


    .circle1 {
        width: 300px;
        height: 300px;
        background: linear-gradient(45deg, #5c257f, #097f98);
        border-radius: 50%;
        position: absolute;
        top: -100px;
        right: -155px;
    }

    .circle2 {
        width: 200px;
        height: 200px;
        background: linear-gradient(45deg, #097f98, #06704b);
        border-radius: 50%;
        position: absolute;
        bottom: -90px;
        left: -70px;
    }

    .login_form {
        z-index: 1;
        display: flex;
        flex-direction: column;
        color: #fff;
        padding: 40px 26px;
        background-color: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 10px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
    }



    .bubble {
        /* background-color: rgba(255, 255, 255, 0.4); */
        background-color: #E8EDED;
        display: inline-block;
        width: 40px;
        height: 40px;
        z-index: -99;
        border-radius: 50%;
        position: absolute;
    }

    .bubble-1 {
        opacity: 0.91;
        left: 45vw;
        top: 52vh;
        animation: move-1 30.02s infinite;
        -moz-transform: translate(0, 0) scale(1.33);
        -ms-transform: translate(0, 0) scale(1.33);
        -webkit-transform: translate(0, 0) scale(1.33);
        transform: translate(0, 0) scale(1.33);
    }

    .bubble-2 {
        opacity: 0.38;
        left: 71vw;
        top: 71vh;
        animation: move-2 30.04s infinite;
        -moz-transform: translate(0, 0) scale(0.64);
        -ms-transform: translate(0, 0) scale(0.64);
        -webkit-transform: translate(0, 0) scale(0.64);
        transform: translate(0, 0) scale(0.64);
    }

    .bubble-3 {
        opacity: 0.33;
        left: 21vw;
        top: 32vh;
        animation: move-3 30.06s infinite;
        -moz-transform: translate(0, 0) scale(0.97);
        -ms-transform: translate(0, 0) scale(0.97);
        -webkit-transform: translate(0, 0) scale(0.97);
        transform: translate(0, 0) scale(0.97);
    }

    .bubble-4 {
        opacity: 0.78;
        left: 40vw;
        top: 96vh;
        animation: move-4 30.08s infinite;
        -moz-transform: translate(0, 0) scale(1.94);
        -ms-transform: translate(0, 0) scale(1.94);
        -webkit-transform: translate(0, 0) scale(1.94);
        transform: translate(0, 0) scale(1.94);
    }

    .bubble-5 {
        opacity: 0.2;
        left: 55vw;
        top: 44vh;
        animation: move-5 30.1s infinite;
        -moz-transform: translate(0, 0) scale(1.03);
        -ms-transform: translate(0, 0) scale(1.03);
        -webkit-transform: translate(0, 0) scale(1.03);
        transform: translate(0, 0) scale(1.03);
    }

    .bubble-6 {
        opacity: 0.24;
        left: 82vw;
        top: 25vh;
        animation: move-6 30.12s infinite;
        -moz-transform: translate(0, 0) scale(0.43);
        -ms-transform: translate(0, 0) scale(0.43);
        -webkit-transform: translate(0, 0) scale(0.43);
        transform: translate(0, 0) scale(0.43);
    }

    .bubble-7 {
        opacity: 0.21;
        left: 63vw;
        top: 39vh;
        animation: move-7 30.14s infinite;
        -moz-transform: translate(0, 0) scale(0.33);
        -ms-transform: translate(0, 0) scale(0.33);
        -webkit-transform: translate(0, 0) scale(0.33);
        transform: translate(0, 0) scale(0.33);
    }

    .bubble-8 {
        opacity: 0.23;
        left: 66vw;
        top: 3vh;
        animation: move-8 30.16s infinite;
        -moz-transform: translate(0, 0) scale(1.51);
        -ms-transform: translate(0, 0) scale(1.51);
        -webkit-transform: translate(0, 0) scale(1.51);
        transform: translate(0, 0) scale(1.51);
    }

    .bubble-9 {
        opacity: 0.8;
        left: 69vw;
        top: 53vh;
        animation: move-9 30.18s infinite;
        -moz-transform: translate(0, 0) scale(0.96);
        -ms-transform: translate(0, 0) scale(0.96);
        -webkit-transform: translate(0, 0) scale(0.96);
        transform: translate(0, 0) scale(0.96);
    }

    .bubble-10 {
        opacity: 0.14;
        left: 76vw;
        top: 17vh;
        animation: move-10 30.2s infinite;
        -moz-transform: translate(0, 0) scale(1.19);
        -ms-transform: translate(0, 0) scale(1.19);
        -webkit-transform: translate(0, 0) scale(1.19);
        transform: translate(0, 0) scale(1.19);
    }

    .bubble-11 {
        opacity: 0.04;
        left: 14vw;
        top: 28vh;
        animation: move-11 30.22s infinite;
        -moz-transform: translate(0, 0) scale(0.54);
        -ms-transform: translate(0, 0) scale(0.54);
        -webkit-transform: translate(0, 0) scale(0.54);
        transform: translate(0, 0) scale(0.54);
    }

    .bubble-12 {
        opacity: 0.83;
        left: 62vw;
        top: 74vh;
        animation: move-12 30.24s infinite;
        -moz-transform: translate(0, 0) scale(1.85);
        -ms-transform: translate(0, 0) scale(1.85);
        -webkit-transform: translate(0, 0) scale(1.85);
        transform: translate(0, 0) scale(1.85);
    }

    .bubble-13 {
        opacity: 0.42;
        left: 6vw;
        top: 25vh;
        animation: move-13 30.26s infinite;
        -moz-transform: translate(0, 0) scale(1.57);
        -ms-transform: translate(0, 0) scale(1.57);
        -webkit-transform: translate(0, 0) scale(1.57);
        transform: translate(0, 0) scale(1.57);
    }

    .bubble-14 {
        opacity: 0.71;
        left: 22vw;
        top: 42vh;
        animation: move-14 30.28s infinite;
        -moz-transform: translate(0, 0) scale(1.8);
        -ms-transform: translate(0, 0) scale(1.8);
        -webkit-transform: translate(0, 0) scale(1.8);
        transform: translate(0, 0) scale(1.8);
    }

    .bubble-15 {
        opacity: 0.13;
        left: 75vw;
        top: 90vh;
        animation: move-15 30.3s infinite;
        -moz-transform: translate(0, 0) scale(1.04);
        -ms-transform: translate(0, 0) scale(1.04);
        -webkit-transform: translate(0, 0) scale(1.04);
        transform: translate(0, 0) scale(1.04);
    }

    .bubble-16 {
        opacity: 0.54;
        left: 20vw;
        top: 17vh;
        animation: move-16 30.32s infinite;
        -moz-transform: translate(0, 0) scale(1.96);
        -ms-transform: translate(0, 0) scale(1.96);
        -webkit-transform: translate(0, 0) scale(1.96);
        transform: translate(0, 0) scale(1.96);
    }

    .bubble-17 {
        opacity: 0.17;
        left: 62vw;
        top: 71vh;
        animation: move-17 30.34s infinite;
        -moz-transform: translate(0, 0) scale(0.21);
        -ms-transform: translate(0, 0) scale(0.21);
        -webkit-transform: translate(0, 0) scale(0.21);
        transform: translate(0, 0) scale(0.21);
    }

    .bubble-18 {
        opacity: 0.63;
        left: 5vw;
        top: 74vh;
        animation: move-18 30.36s infinite;
        -moz-transform: translate(0, 0) scale(1.33);
        -ms-transform: translate(0, 0) scale(1.33);
        -webkit-transform: translate(0, 0) scale(1.33);
        transform: translate(0, 0) scale(1.33);
    }

    .bubble-19 {
        opacity: 0.23;
        left: 34vw;
        top: 22vh;
        animation: move-19 30.38s infinite;
        -moz-transform: translate(0, 0) scale(0.44);
        -ms-transform: translate(0, 0) scale(0.44);
        -webkit-transform: translate(0, 0) scale(0.44);
        transform: translate(0, 0) scale(0.44);
    }

    .bubble-20 {
        opacity: 0.25;
        left: 12vw;
        top: 14vh;
        animation: move-20 30.4s infinite;
        -moz-transform: translate(0, 0) scale(0.83);
        -ms-transform: translate(0, 0) scale(0.83);
        -webkit-transform: translate(0, 0) scale(0.83);
        transform: translate(0, 0) scale(0.83);
    }

    .bubble-21 {
        opacity: 0.02;
        left: 18vw;
        top: 56vh;
        animation: move-21 30.42s infinite;
        -moz-transform: translate(0, 0) scale(0.58);
        -ms-transform: translate(0, 0) scale(0.58);
        -webkit-transform: translate(0, 0) scale(0.58);
        transform: translate(0, 0) scale(0.58);
    }

    .bubble-22 {
        opacity: 0.41;
        left: 57vw;
        top: 79vh;
        animation: move-22 30.44s infinite;
        -moz-transform: translate(0, 0) scale(1.34);
        -ms-transform: translate(0, 0) scale(1.34);
        -webkit-transform: translate(0, 0) scale(1.34);
        transform: translate(0, 0) scale(1.34);
    }

    .bubble-23 {
        opacity: 0.17;
        left: 24vw;
        top: 11vh;
        animation: move-23 30.46s infinite;
        -moz-transform: translate(0, 0) scale(1.31);
        -ms-transform: translate(0, 0) scale(1.31);
        -webkit-transform: translate(0, 0) scale(1.31);
        transform: translate(0, 0) scale(1.31);
    }

    .bubble-24 {
        opacity: 0.27;
        left: 33vw;
        top: 20vh;
        animation: move-24 30.48s infinite;
        -moz-transform: translate(0, 0) scale(1.29);
        -ms-transform: translate(0, 0) scale(1.29);
        -webkit-transform: translate(0, 0) scale(1.29);
        transform: translate(0, 0) scale(1.29);
    }

    .bubble-25 {
        opacity: 0.08;
        left: 88vw;
        top: 99vh;
        animation: move-25 30.5s infinite;
        -moz-transform: translate(0, 0) scale(1.58);
        -ms-transform: translate(0, 0) scale(1.58);
        -webkit-transform: translate(0, 0) scale(1.58);
        transform: translate(0, 0) scale(1.58);
    }

    .bubble-26 {
        opacity: 0.08;
        left: 77vw;
        top: 54vh;
        animation: move-26 30.52s infinite;
        -moz-transform: translate(0, 0) scale(0.94);
        -ms-transform: translate(0, 0) scale(0.94);
        -webkit-transform: translate(0, 0) scale(0.94);
        transform: translate(0, 0) scale(0.94);
    }

    .bubble-27 {
        opacity: 0.22;
        left: 26vw;
        top: 86vh;
        animation: move-27 30.54s infinite;
        -moz-transform: translate(0, 0) scale(0.6);
        -ms-transform: translate(0, 0) scale(0.6);
        -webkit-transform: translate(0, 0) scale(0.6);
        transform: translate(0, 0) scale(0.6);
    }

    .bubble-28 {
        opacity: 0.08;
        left: 43vw;
        top: 32vh;
        animation: move-28 30.56s infinite;
        -moz-transform: translate(0, 0) scale(1.56);
        -ms-transform: translate(0, 0) scale(1.56);
        -webkit-transform: translate(0, 0) scale(1.56);
        transform: translate(0, 0) scale(1.56);
    }

    .bubble-29 {
        opacity: 0.17;
        left: 32vw;
        top: 11vh;
        animation: move-29 30.58s infinite;
        -moz-transform: translate(0, 0) scale(1.25);
        -ms-transform: translate(0, 0) scale(1.25);
        -webkit-transform: translate(0, 0) scale(1.25);
        transform: translate(0, 0) scale(1.25);
    }

    .bubble-30 {
        opacity: 0.68;
        left: 33vw;
        top: 32vh;
        animation: move-30 30.6s infinite;
        -moz-transform: translate(0, 0) scale(0.58);
        -ms-transform: translate(0, 0) scale(0.58);
        -webkit-transform: translate(0, 0) scale(0.58);
        transform: translate(0, 0) scale(0.58);
    }


    .credits a {
        color: #fff;
        font-size: 11px;
        text-decoration: none;
        letter-spacing: 0.05em;
    }

    @keyframes move-1 {
        55% {
            -moz-transform: translate(-76vw, -54vh);
            -webkit-transform: translate(-76vw, -54vh);
            transform: translate(-76vw, -54vh);
        }
    }

    @keyframes move-2 {
        37% {
            -moz-transform: translate(-15vw, -2vh);
            -webkit-transform: translate(-15vw, -2vh);
            transform: translate(-15vw, -2vh);
        }
    }

    @keyframes move-3 {
        52% {
            -moz-transform: translate(-24vw, -87vh);
            -webkit-transform: translate(-24vw, -87vh);
            transform: translate(-24vw, -87vh);
        }
    }

    @keyframes move-4 {
        50% {
            -moz-transform: translate(-18vw, -36vh);
            -webkit-transform: translate(-18vw, -36vh);
            transform: translate(-18vw, -36vh);
        }
    }

    @keyframes move-5 {
        41% {
            -moz-transform: translate(-68vw, -90vh);
            -webkit-transform: translate(-68vw, -90vh);
            transform: translate(-68vw, -90vh);
        }
    }

    @keyframes move-6 {
        55% {
            -moz-transform: translate(-64vw, -80vh);
            -webkit-transform: translate(-64vw, -80vh);
            transform: translate(-64vw, -80vh);
        }
    }

    @keyframes move-7 {
        40% {
            -moz-transform: translate(-30vw, -69vh);
            -webkit-transform: translate(-30vw, -69vh);
            transform: translate(-30vw, -69vh);
        }
    }

    @keyframes move-8 {
        48% {
            -moz-transform: translate(-35vw, -78vh);
            -webkit-transform: translate(-35vw, -78vh);
            transform: translate(-35vw, -78vh);
        }
    }

    @keyframes move-9 {
        31% {
            -moz-transform: translate(-27vw, -53vh);
            -webkit-transform: translate(-27vw, -53vh);
            transform: translate(-27vw, -53vh);
        }
    }

    @keyframes move-10 {
        43% {
            -moz-transform: translate(-9vw, -31vh);
            -webkit-transform: translate(-9vw, -31vh);
            transform: translate(-9vw, -31vh);
        }
    }

    @keyframes move-11 {
        51% {
            -moz-transform: translate(-92vw, -39vh);
            -webkit-transform: translate(-92vw, -39vh);
            transform: translate(-92vw, -39vh);
        }
    }

    @keyframes move-12 {
        42% {
            -moz-transform: translate(-34vw, -79vh);
            -webkit-transform: translate(-34vw, -79vh);
            transform: translate(-34vw, -79vh);
        }
    }

    @keyframes move-13 {
        49% {
            -moz-transform: translate(-45vw, -62vh);
            -webkit-transform: translate(-45vw, -62vh);
            transform: translate(-45vw, -62vh);
        }
    }

    @keyframes move-14 {
        57% {
            -moz-transform: translate(-41vw, -94vh);
            -webkit-transform: translate(-41vw, -94vh);
            transform: translate(-41vw, -94vh);
        }
    }

    @keyframes move-15 {
        56% {
            -moz-transform: translate(-89vw, -27vh);
            -webkit-transform: translate(-89vw, -27vh);
            transform: translate(-89vw, -27vh);
        }
    }

    @keyframes move-16 {
        36% {
            -moz-transform: translate(-9vw, -17vh);
            -webkit-transform: translate(-9vw, -17vh);
            transform: translate(-9vw, -17vh);
        }
    }

    @keyframes move-17 {
        51% {
            -moz-transform: translate(-18vw, -35vh);
            -webkit-transform: translate(-18vw, -35vh);
            transform: translate(-18vw, -35vh);
        }
    }

    @keyframes move-18 {
        35% {
            -moz-transform: translate(-74vw, -52vh);
            -webkit-transform: translate(-74vw, -52vh);
            transform: translate(-74vw, -52vh);
        }
    }

    @keyframes move-19 {
        58% {
            -moz-transform: translate(-63vw, -87vh);
            -webkit-transform: translate(-63vw, -87vh);
            transform: translate(-63vw, -87vh);
        }
    }

    @keyframes move-20 {
        36% {
            -moz-transform: translate(-32vw, -54vh);
            -webkit-transform: translate(-32vw, -54vh);
            transform: translate(-32vw, -54vh);
        }
    }

    @keyframes move-21 {
        58% {
            -moz-transform: translate(-8vw, -43vh);
            -webkit-transform: translate(-8vw, -43vh);
            transform: translate(-8vw, -43vh);
        }
    }

    @keyframes move-22 {
        37% {
            -moz-transform: translate(-78vw, -66vh);
            -webkit-transform: translate(-78vw, -66vh);
            transform: translate(-78vw, -66vh);
        }
    }

    @keyframes move-23 {
        54% {
            -moz-transform: translate(-30vw, -63vh);
            -webkit-transform: translate(-30vw, -63vh);
            transform: translate(-30vw, -63vh);
        }
    }

    @keyframes move-24 {
        43% {
            -moz-transform: translate(-51vw, -62vh);
            -webkit-transform: translate(-51vw, -62vh);
            transform: translate(-51vw, -62vh);
        }
    }

    @keyframes move-25 {
        59% {
            -moz-transform: translate(-81vw, -24vh);
            -webkit-transform: translate(-81vw, -24vh);
            transform: translate(-81vw, -24vh);
        }
    }

    @keyframes move-26 {
        33% {
            -moz-transform: translate(-57vw, -69vh);
            -webkit-transform: translate(-57vw, -69vh);
            transform: translate(-57vw, -69vh);
        }
    }

    @keyframes move-27 {
        56% {
            -moz-transform: translate(-80vw, -99vh);
            -webkit-transform: translate(-80vw, -99vh);
            transform: translate(-80vw, -99vh);
        }
    }

    @keyframes move-28 {
        54% {
            -moz-transform: translate(-70vw, -97vh);
            -webkit-transform: translate(-70vw, -97vh);
            transform: translate(-70vw, -97vh);
        }
    }

    @keyframes move-29 {
        33% {
            -moz-transform: translate(-17vw, -65vh);
            -webkit-transform: translate(-17vw, -65vh);
            transform: translate(-17vw, -65vh);
        }
    }

    @keyframes move-30 {
        33% {
            -moz-transform: translate(-70vw, -34vh);
            -webkit-transform: translate(-70vw, -34vh);
            transform: translate(-70vw, -34vh);
        }
    }

    #hard-guide {
        margin-left: 20px;
    }


/* Media query for screens smaller than a certain size (adjust the max-width to your needs) */
@media (max-width: 1280px) {
    .left {
        width: 100%;
    }

    .right {
        width: 100%;
        background-color: unset;
    }

    #container {
    display: flex;
    flex-wrap: wrap;
    min-height: 100vh;
    }
    
}

@media (max-width: 768px) {
    .welcome {
        grid-auto-flow: row;
        /*flex-wrap: wrap;*/
    }
}

#container {
    display: grid;
    /*grid-template-columns: 70% 30%;  Set the width for each column using percentages */
    /*grid-template-rows: 30% 70%;  Set the height for each row using percentages */
}
.row-2-1 {
 display:  block;
}
.row-1-2 {
 display:  block;
}
@media screen and (max-width: 768px) {
    .welcome-grid {
        margin-right: 10px;
        margin-left: 10px;
        display: flex;
        align-items: center;
        /* max-height: 463px; */
    
    }

    .row-2-1 {
        display: none !important;
    }
    .row-1-2 {
        display: none !important;
    }
    #container {
        grid-template-columns: 1fr; /* Change to a single column layout for screens with a max-width of 768px */
        grid-template-rows: 1fr 1fr;
    }
}

@media screen and (max-width: 480px) {
    .welcome-grid {
        margin-right: 10px;
        margin-left: 10px;
        display: flex;
        align-items: center;
        
        /* max-height: 463px; */
    
    }


    .row-1-2 {
        display: none !important;
    }
    #container {
        grid-template-columns: 1fr; /* Change to a single column layout for screens with a max-width of 480px */
        grid-template-rows: 1fr 1fr 1fr; /* Add a third row for screens with a max-width of 480px */
    }
}

    /* Add styles for the grid items (containers) */
    .grid-item {
        padding: 20px;

    }
    
    .grid-item-text {
        margin-left: 80px;
        margin-top: 7vh;
    }
    @media screen and (max-height: 600px) {
        /* Styles for screens with a maximum height of 600px */
        .grid-item-text {
            margin-top: -2vh;
        }

      }
.right-panel {
    /* max-height: 463px; */
    justify-content: center;
    justify-items: center;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    /* margin-bottom: -9999px; */
}
.form-login {
    /* justify-items: center; */
    justify-content: center;
    position: relative;
    /* top: auto; */
    /* display: contents; */
}
.welcome-grid {
    margin-right: 80px;
    margin-left: 80px;
    display: flex;
    align-items: center;
    /* max-height: 463px; */

}

.welcome-text {
    font-size: 36px;
    line-height: 40px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding-top: 6rem;
    font-weight: 700;
}

.sub-welcome-text {
    font-size: 18px;
    line-height: 28px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 400;
    padding-top: 1rem;
}

.logo-container {
    text-align: center;
}

.ai {
    color: #007F9C;
    font-size: 18px;
    line-height: 28px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
}

.footer-image-container {
    text-align: center; /* Center the image */
    margin-top: 20px; /* Add some space above the image */
    position:absolute;
    bottom: 2rem;
}

.footer-image {
    max-width: 100%; /* Make the image responsive */
    height: auto; /* Maintain aspect ratio */
}