@media screen and (min-width: 340px) and (max-width: 780px) {
    .divbody {
        /*background-color: lightblue;*/
        width: 100%;
    }
    .maintr {
        width: 1006px;
        background: var(--slate-800, #1E293B);
    }
    /*.IntroImg {
        height: 226px;
        width: 200px;
    }*/
}

.leftDiv {
    display: flex;
    width: 35%;
    padding: 2.5% 8%;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
    background: var(--white, #FFF);
}

.signinDiv {
    display: flex;
    padding: 50px 0px;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
    background: var(--white, #FFF);
}

.StartedDiv {
    color: var(--slate-800, #1E293B);
}
.StartedDiv2 {
    color: var(--slate-800, azure);
}

.paraNew {
    color: var(--gray-500, #6B7280);
}

.google {
    cursor:pointer;
    display: flex;
    width: 393px;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 6px;
    border: 1px solid var(--slate-300, #CBD5E1);
    background: var(--slate-50, #F8FAFC);
}
.google2 {
    cursor: pointer;
    display: flex;
    width: 300px;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 6px;
    border: 1px solid var(--slate-300, #CBD5E1);
    background: var(--slate-50, #F8FAFC);
}

.TextAll {
    color: #0F172A;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}
.TextAll2 {
    color: azure;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}
.TextAll3 {
    color: black;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.lineSpan {
    display: flex;
    align-items: center;
}

.line {
    width: 193px;
    height: 1px;
    background: #E2E8F0;
}

.OrText {
    color: var(--gray-500, #6B7280);
}

.OrText2 {
    color: var(--gray-500, azure);
}


.btnLogin {
    cursor: pointer;
    display: flex;
    width: 405px;
    padding: 2.5%;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 6px;
    background: var(--sky-500, #0EA5E9);
    border: 1px solid #CBD5E1;
    color: white;
}
btnLogin:hover {
    background: var(--sky-600, #0284C7);
}
btnLogin:active {
    background: var(--sky-700, #0369A1);
}
btnLogin:disabled {
    opacity: 0.3;
    background: var(--sky-500, #0EA5E9);
}

.spanSignin {
    display: inline-block;
    text-align: center;
    gap: 20px;
    width: 420px;
}
.spanPWD{
    display:flex;
}
.spanAccount {
    color: var(--gray-400, #9CA3AF);
}
.spanAccount2 {
    color: var(--gray-400, azure);
}
.spanAccount3 {
    color: var(--gray-400, black);
}

.rightDiv {
    width: 65%;
    padding: 14% 12% 20% 23%;
    background: var(--slate-50, #F8FAFC);
}

.leftDiv2 {
    display: flex;
    width: 5%;
    padding: 2.5% 8%;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
    background: var(--white, #FFF);
}
.rightDiv2 {
    padding:7px;
    background: var(--white, #FFF);
}
.leftDiv3 {
    display: flex;
    width: 0.5%;
    padding: 2.5% 8%;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
    background: var(--white, #FFF);
}

.rightDiv3 {
    width: 99%;
    /*padding: 14% 12% 20% 23%;*/
    background: var(--white, #FFF);
}

.rightRateTextDiv {
    display: flex;
    justify-content: center;
    align-items: center;
}

.RateText {
    color: var(--gray-600, #4B5563);
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px; /* 133.333% */
    letter-spacing: -0.144px;
    width: 410px;
    padding-top: 20%;
}

.divProfileRate {
    display: inline-flex;
    padding-left: 13%;
    padding-top: 5%;
    align-items: flex-start;
    gap: 8px;
}

.rateDetails {
    vertical-align: super;
}
.divcongo {
    padding: 41% 8%;
    width: 393px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
}
    .divcongo h2{
        color: var(--slate-800, #1E293B);
    }
    .divcongo p{
        color: var(--gray-500, #6B7280);
    }

@media screen and (max-width: 768px) {
    /* For mobile phones: */
    .rightDiv {
       display: none !important;
    }
    .leftDiv {
       width:100%;
    }
    .google {
        width: 315px;
    }
    input[type="text" i], input[type="password" i] {
        width: 315px;
    }
    .line {
        width: 150px;
    }

    .btnLogin {
        width: 323px;
    }
    .spanSignin {
        width: 345px;
    }
}
.spanTC {
    display: inline-block;
    gap: 20px;
    width: 420px;
}
.Maintitle2 {
    color: var(--sky-500, #0EA5E9);
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: -0.144px;
    padding-left: 5px;
    padding-top: 15px !important;
}
.mainHPtable {
    width: 100%;
    padding: 7px;
    border-top: 2px solid #60A5FA;
    border-radius: 10px;
}
.altcolor {
    background: var(--slate-50, #F8FAFC);
}
.maintr {
    background: var(--slate-800, #1E293B);
}
.progress-area {
    background-image: url(images/progress-bg.jpg);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100%;
    margin-top: 90px;
    margin-bottom: 220px;
}

.LDiv {
    display: flex;
    width: 60%;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
    background: var(--slate-50, #F8FAFC);
}

.RDiv {
    width: 40%;
    padding: 7px;
    background: var(--white, #FFF);
}
.maindivshadow {
    display: flex;
    background: white;
    border-radius:10px;
    border: 1px solid rgb(231, 239, 247);
    box-shadow: 5px 5px 8px 8px #a3c2c2;
}
.LDiv2 {
    display: flex;
    padding: 10px;
    align-items: center !important;
    width: 20%;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
    background: var(--white, #FFF);
}

.RDiv2 {
    width: 80%;
    padding: 7px;
    background: var(--slate-50, #F8FAFC);
}

.LRDiv1 {
    display: flex;
    padding: 10px;
    align-items: center !important;
    width: 50%;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
    background: var(--white, #FFF);
}

.LRDiv2 {
    width: 50%;
    padding: 7px;
    background: var(--white, #FFF);
}
.LDiv3 {
    display: flex;
    width: 60%;
    flex-direction: column;
    align-items: flex-start;
    background: var(--slate-50, #F8FAFC);
}