/* cyrillic */
/* latin */

@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(fonts/OpenSans-Light.ttf) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/OpenSans-Regular.ttf) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/OpenSans-Medium.ttf) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/OpenSans-SemiBold.ttf) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'kanit';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(fonts/Kanit-SemiBold.ttf) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  @font-face {
    font-family: 'kanit';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(fonts/Kanit-Bold.ttf) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/OpenSans-ExtraBold.ttf) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/OpenSans-Bold.ttf) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

[class*="overlay"] p, [class*="overlay"] button{
    text-transform: capitalize !important;
}

button{
    text-transform: capitalize !important;
}

.blur-balance{
    filter: blur(5px);
}

.showing-pop {
    transform: scale(1) !important;
    opacity: 1 !important;
}

.mobile-pop-overlay {
    min-height: 100vh;
    width: 100%;
    top: 0;
    position: absolute;
    padding: 0 24px;
    justify-content: center;
    align-items: center;
    z-index: 99;
    position: fixed;
    display: flex;
    /* animation: popup 0.5s ease-in-out; */
    opacity: 0;
    transition: all 0.2s allow-discrete;
    backdrop-filter: blur(8px);
    transform: scale(0);
}

.mobile-pop {
    width: 100%;
    border-radius: 30px;
    border: 1px solid rgba(229, 229, 229, 1);
    background: rgba(242, 242, 242, 1);
    display: flex;
    flex-direction: column;
    padding: 16px;
    align-items: center;
    gap: 8px;
}

.mobile-pop .mobile-pop-close {
    align-self: flex-end !important;
}

.mobile-pop img{
    width: 109px;
    height: 100px;
}

.mobile-pop p.message{
    font-family: Jost;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0em;
    text-align: center;
    color: rgba(19, 19, 19, 1);
}

.mobile-pop .overlay-btn-container {
    display: flex;
    gap: 12px;
    width: 100%;
    margin-top: 8px;
}

.mobile-pop .overlay-btn-container button {
    padding: 8px 24px;
    border: 1px solid rgba(15, 38, 235, 1);
    font-family: Jost;
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: 0em;
    text-align: left;
    color: rgba(246, 246, 246, 1);
    background: rgba(1, 20, 181, 1);
    border-radius: 15px;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.overlay-btn-container .btn-false{
    border: rgba(220, 53, 69, 1) !important;
    background: rgba(220, 53, 69, 1) !important;
}

.overlay-btn-container .btn-true{
    border: rgba(25, 135, 84, 1) !important;
    background: rgba(25, 135, 84, 1) !important;
}




*{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        text-transform: capitalize;
        font-family: 'jost';
        text-decoration: none;
    }
input, textarea {
  text-transform: none !important;
}
    .app-1{
        height: 100%;
        width: 100%;
    }

    .splash-logo{
        display: flex;
        background-color: rgba(1, 20, 181, 1);
        height: 90px;
        width: 90px;
        border-radius: 50%;
        position: absolute;
        animation: pulse-animation 2s infinite;
        z-index: -1;
    }

   

    @keyframes pulse-animation {
        0% {
            box-shadow: 0 0 0 0px rgba(42, 32, 241, 0.4);
        }

        100% {
            box-shadow: 0 0 0 40px rgba(22, 12, 222, 0);
        }
    }

    input[type='email'], input[type='email']::placeholder{
        text-transform: lowercase !important;
    }
  
    button:disabled{
        opacity: 0.6 !important;
    }
  
    

    
 
    .app{
        height: 100vh;
        /* height: 100dvh; */
        /* max-height: fill-available; */
        /* max-height: -webkit-fill-available; */
        width: 100%;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .screen{
        top: 0;
        /* display: initial; */
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        position: absolute;
        right: -100%;
        transition: right 200ms ease-in;
        overflow-y: scroll;
        opacity: 0;
        
    }

    .on-boarding{
        display: initial;
        height: 100%;
        flex-direction: row;
        overflow: hidden;
       width: 100%;
       position: absolute;
       right: -100%;
       top: 0;
       transition: right 200ms ease-in;
        opacity: 0;
    }


    .splash-screen{
        align-items: center;
        justify-content: center;
        right: 0% !important;
        opacity: 1;
        display: flex;
    }

    .close-screen{
        display: none;
        opacity: 0;
    }

    .open{
        display: flex !important;
        right: 0% !important;
        opacity: 1;
    }

    .open-right{
        /* right: -100% ; */
        display: flex !important;
        right: 0% !important;
        opacity: 1;
    }

    .open-left{
        /* right: 100% ; */
        display: flex !important;
        left: 0% !important;
        opacity: 1;
    }

    .move-right{
        right: -100% !important;
        transition: right 200ms ease-in !important;
    }
    .move-left{
        left: 100% !important; 
         transition: left 200ms ease-in !important;
    }

    .open-2{
        right: 0;
        opacity: 1 !important;
        display: flex !important;
        transition: opacity 80ms ease-in !important;
    }





    .close{
        display: none !important;
        transition: all 200ms ease-in;

    }

    @keyframes close {
        from{
            transition: scale(1);
            display: initial;
        }

        to{
            transition: scale(0);
            display: none;
        }
    }



    #slider{
       width: 100%;
        display: flex;
        flex-direction: row;
        transition: transform 0.5s ease-in-out;

    }
    
   .scroll-item{
        height: 100%;
        min-width: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
   }


    .on-bg{
        position: absolute;
        top: 0;
        width: 100%;
    }

    .on-top{
        bottom: 0;
        width: 100%;
        height: 53%;
        position: absolute;
        background-image: linear-gradient(to bottom, rgba(255,0,0,0) 20%, rgb(255, 255, 255) 40%);
    }

    .on-content{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 15px;
        z-index: 12;
        height: 100%;
    }


    .logo-on{
        width: 147px;
        height:  40px;
        margin-top: 20px
    }

    .on-desc{
        display: flex;
        gap: 14px;
        flex-direction: column;
    }

    .on-desc-header h1{
        font-family: Kanit;
        font-size: 28px;
        font-weight: 700;
        line-height: 36px;
        letter-spacing: 0em;
        text-align: left;
        color: rgba(1, 20, 181, 1);

    }


    .on-desc-header p{
        font-family: Jost;
font-size: 14px;
font-weight: 500;
line-height: 22px;
letter-spacing: 0em;
text-align: left;
color: rgba(47, 47, 47, 1);
    }

.indicator-container{
    align-self: center;
    display: flex;
    gap: 7px;
    margin-top: 16px;
}




.indicator-container .indicator{
    width: 8px;
height: 8px;
border: 1px solid rgba(15, 38, 235, 1);
background-color: rgba(1, 20, 181, 1);
opacity: 0.5;
border-radius: 50%;
}

.indicator-active{
    opacity: 1;
    width: 24px ;
    border-radius: 60px;
    background-color: rgba(1, 20, 181, 1);
    border: 1px solid rgba(15, 38, 235, 1);
}

.get-started-btn{
    padding: 10px 20px;
    border: 1.5px solid rgba(15, 38, 235, 1);
    background-color: rgba(1, 20, 181, 1);
    border-radius: 15px;
font-family: Jost;
font-size: 18px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0em;
text-align: center;
width: 100%;
color: rgba(246, 246, 246, 1);

}

.image-light{
    display: inline !important;
}

.image-dark{
    display: none !important;
}

.text-center{
    text-align: center !important;
}

.btn-outline-main{
    padding: 13px 24px;
    border: 1.5px solid rgba(15, 38, 235, 1);
    background-color: rgba(246, 246, 246, 1);
    border-radius: 15px;
font-family: Jost;
font-size: 18px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0em;
text-align: center;
width: 100%;
color: rgba(1, 20, 181, 1);
}

.register-screen{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.form-container{
        margin-top: 0px;
        min-height: 75%;
        border-radius:40px 40px 0px 0px ;
        background-color: rgba(242, 242, 242, 1);
        border-bottom: 1px solid rgba(229, 229, 229, 1);   
        padding: 15px;     
        bottom: 0;
        display: flex;
        flex-direction: column;
        gap: 24px;
        flex-shrink: 0;
    }

    
    .header-image{
        display: flex;
        position: relative;
        align-items: center;
        justify-content: center;
        width: 100%;
        z-index: -1;
        height: 25%;
        flex-shrink: 0;
     }


     .top-left{
         position: absolute;
         bottom: 0;
         left: 0;
         z-index: -1;
     }

     
     .top-right{
         position: absolute;
         top: 0;
         right: 0;
         z-index: -1;
     }

     


.form-header{
    display: flex;
    flex-direction: column;
    align-items: center;

}

.form-group{
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-header h1{
font-family: Kanit;
font-size: 24px;
font-weight: 600;
line-height: 32px;
letter-spacing: 0em;
text-align: center;
color: rgba(19, 19, 19, 1);

}


.form-header p{
    color: rgba(19, 19, 19, 1);
font-family: Jost;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0em;
text-align: center;

}


.input-container{
    width: 100%;
    display: flex;
    flex-direction: column;
}


.input-container label{
font-family: Jost;
font-size: 16px;
font-weight: 600;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
color: rgba(19, 19, 19, 1);
}
.form-box{
    border-radius: 15px;
    border: 1px solid rgba(221, 221, 221, 1);
    background-color: rgba(229, 229, 229, 1);
    height: 48px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 5px 15px;
    position: relative;

}

.form-box input{
    border: none;
    outline: none;
    width: 100%;
    height: 100%;
    background: none;
}


.form-box input, .form-box input::placeholder{
font-family: Jost;
font-size: 14px;
font-weight: 500;
line-height: 22px;
letter-spacing: 0em;
text-align: left;

}

.form-box input[type='password']::placeholder{
    font-size: 8px !important;
}

.form-row-container{
    display: flex;
    flex-direction: row;
    gap: 16px;
}



.terms-container{
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: flex-start;
}

.terms-container p{
font-family: Jost;
font-size: 14px;
font-weight: 500;
line-height: 22px;
letter-spacing: 0em;
text-align: left;
color: rgba(85, 85, 85, 1);
width: 100%;
}

.terms-container svg{
    width: 18px;
height: 18px;
border-radius: 9px;
border: 1px solid rgba(1, 20, 181, 1)
}

.submit-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.account{
font-family: Jost;
font-size: 14px;
font-weight: 500;
line-height: 22px;
letter-spacing: 0em;
text-align: left;
color: rgba(47, 47, 47, 1);
}

.forget{
    margin-top: 8px;
    font-family: Jost;
font-size: 16px;
font-weight: 500;
line-height: 22px;
letter-spacing: 0em;
text-align: left;
color: rgba(47, 47, 47, 1);
}
.forget span{
    font-weight: 700;
    color: rgba(1, 20, 181, 1);

}

.account span{
    font-family: Jost;
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: 0em;
    text-align: left;
    color: rgba(1, 20, 181, 1);
}


.error-message{
   
    position: absolute;
    top: -100%;
    right: 0;
    display: none;
}

.icon-bg{
    z-index: 10;
}

  
.error-message-content{
    position: absolute;
    background-color: none;
    z-index: 99;
    left: 10px;
    top: 10px;
    display: flex;
    gap: 8px;
    overflow: hidden;
}

.error-message-content svg{
    height: 14px;
    width: 14px;
}

.error-message-content p{
    color: var(--webblack-3, #555);
font-variant-numeric: lining-nums tabular-nums;
font-family: Jost;
font-size: 10px;
font-style: normal;
font-weight: 500;
text-transform: capitalize;
width: 100%;
}

.back-btn{
    width: 36px;
height: 36px;
top: 25px;
left: 15px;
border-radius: 10px;
position: absolute;
border: 1px solid rgba(229, 229, 229, 1);
display: flex;
align-items: center;
justify-content: center;
outline: none;
background: none;

}

.m-overlay{
    min-height: 100vh;
    width: 100%;
    top: 0;
    position: absolute;
    padding: 0 24px;
    justify-content: center;
    align-items: center;
    z-index: 99;
    position: fixed;
    display: flex;
    /* animation: popup 0.5s ease-in-out; */
    opacity: 0;
    transition: all 0.2s allow-discrete;
    backdrop-filter: blur(8px);
    transform: scale(0);
}

.showing {
    transform: scale(1) !important; 
    opacity: 1 !important;

    @starting-style {
        .showing {
          transform: scale(0) !important;
        }
      }
    
}
  
 



@keyframes popup {
    0%{
      transform: scale(1.2);
    }
   
    100%{
      transform: scale(1);
    }
}

.attempts{
    width: 100%;
border-radius: 30px;
border: 1px solid rgba(229, 229, 229, 1);
background: rgba(242, 242, 242, 1);
display: flex;
flex-direction: column;
padding: 16px;
align-items: center;
gap: 8px;
}


.attempts .close-overlay{
    align-self: flex-end !important;
}

.attempts img{
    width: 109px;
height: 100px;

}

.attempts p{
font-family: Jost;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0em;
text-align: center;
color: rgba(19, 19, 19, 1);
}

.overlay-btn-container{
    display: flex;
    gap: 12px;
    width: 100%;
    margin-top: 8px;
}

.overlay-btn-container .btn-plan{
    padding: 8px 24px;
    border: 1px solid rgba(229, 229, 229, 1);
font-family: Jost;
font-size: 14px;
font-weight: 700;
line-height: 22px;
letter-spacing: 0em;
text-align: left;
color: rgba(47, 47, 47, 1);
background: rgba(246, 246, 246, 1);
border-radius: 15px;
width: 100%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}


.overlay-btn-container .btn-main{
    padding: 8px 24px;
    border: 1px solid rgba(15, 38, 235, 1);
    font-family: Jost;
font-size: 14px;
font-weight: 700;
line-height: 22px;
letter-spacing: 0em;
text-align: left;
color: rgba(246, 246, 246, 1);
background: rgba(1, 20, 181, 1);
border-radius: 15px;
width: 100%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}

.overlay-btn-container .btn-main-danger{
    padding: 8px 24px;
    border: 1px solid rgba(241, 73, 89, 1);
        font-family: Jost;
font-size: 14px;
font-weight: 700;
line-height: 22px;
letter-spacing: 0em;
text-align: left;
color: rgba(246, 246, 246, 1);
background: rgba(220, 53, 69, 1);
border-radius: 15px;
width: 100%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}

.reset-code-screen input, .reset-code-screen input::placeholder{
    text-align: center;
}




@media only screen and (min-width: 600px) {
 
    .on-bg{
        position: absolute;
        top: 0;
        max-width: 100% !important;
        height: auto;
        /* aspect-ratio: 5/4;*/
        
    }
    .form-container{
        padding: 3% 25%;
        min-height: 75%;
    }
    .on-top{
        bottom: 0;
        width: 100%;
        height: 350px;
        position: absolute;
        background-image: linear-gradient(to bottom, rgba(255,0,0,0) 20%, rgb(255, 255, 255) 40%);
    }

    .on-content{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 15px;
        z-index: 12;
        height: 100%;
    }

    .get-started-btn{
        padding: 16px 24px;
        border: 1.5px solid rgba(15, 38, 235, 1);
        background-color: rgba(1, 20, 181, 1);
        border-radius: 15px;
        font-family: Jost;
        font-size: 22px;
        font-weight: 700;
        line-height: initial;
        letter-spacing: 0em;
        text-align: center;
        width: 100%;
        color: rgba(246, 246, 246, 1);
    }
    .btn-outline-main{
        padding: 16px 24px;
        border: 1.5px solid rgba(15, 38, 235, 1);
        background-color: rgba(246, 246, 246, 1);
        border-radius: 15px;
        font-family: Jost;
        font-size: 22px;
        font-weight: 700;
        line-height: 26px;
        letter-spacing: 0em;
        text-align: center;
        width: 100%;
        color: rgba(1, 20, 181, 1);
    }


    .form-header h1{
        font-family: Kanit;
        font-size: 26px;
        font-weight: 600;
        line-height: initial;
        letter-spacing: 0em;
        text-align: center;
        color: rgba(19, 19, 19, 1);
        
        }
        
        
        .form-header p{
            color: rgba(19, 19, 19, 1);
        font-family: Jost;
        font-size: 16px;
        font-weight: 400;
        line-height: initial;
        letter-spacing: 0em;
        text-align: center;
        
        }
        

    .input-container label{
        font-family: Jost;
        font-size: 18px;
        font-weight: 600;
        line-height: initial;
        letter-spacing: 0em;
        text-align: left;
        color: rgba(19, 19, 19, 1);
        }
        .form-box{
            border-radius: 15px;
            border: 1px solid rgba(221, 221, 221, 1);
            background-color: rgba(229, 229, 229, 1);
            height: 55px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 16px 16px;
            position: relative;
        
        }
        
        .form-box input{
            border: none;
            outline: none;
            width: 100%;
            height: 100%;
            background: none;
        }
        
        
        .form-box input, .form-box input::placeholder{
        font-family: Jost;
        font-size: 16px;
        font-weight: 500;
        line-height: initial;
        letter-spacing: 0em;
        text-align: left;
        
        }
        
        .form-box input[type='password']::placeholder{
            font-size: 8px !important;
        }
        
        .form-row-container{
            display: flex;
            flex-direction: row;
            gap: 16px;
        }
        
        
        
        .terms-container{
            display: flex;
            flex-direction: row;
            gap: 16px;
            justify-content: flex-start;
        }
        
        .terms-container p{
        font-family: Jost;
        font-size: 16px;
        font-weight: 500;
        line-height: initial;
        letter-spacing: 0em;
        text-align: left;
        color: rgba(85, 85, 85, 1);
        width: 100%;
        }
        
        .terms-container svg{
            width: 18px;
        height: 18px;
        border-radius: 9px;
        border: 1px solid rgba(1, 20, 181, 1)
        }
        
        .submit-container{
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        
        .account{
        font-family: Jost;
        font-size: 14px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: 0em;
        text-align: left;
        color: rgba(47, 47, 47, 1);
        }
        
        .forget{
            margin-top: 8px;
            font-family: Jost;
        font-size: 16px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: 0em;
        text-align: left;
        color: rgba(47, 47, 47, 1);
        }
        .forget span{
            font-weight: 700;
            color: rgba(1, 20, 181, 1);
        
        }

        .header-image{
           display: flex;
           position: relative;
           align-items: center;
           justify-content: center;
           width: 100%;
           z-index: -1;
           height: 25%;
           
        }


        .top-left{
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: -1;
        }

        
        .top-right{
            position: absolute;
            top: 0;
            right: 0;
            z-index: -1;
        }

        .logo-form{
           transform: scale(1.1);
            
        }


        .m-overlay{
            height: 100%;
            width: 100%;
            padding: 0 26%;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 99;
            position: fixed;
            transform: scale(0);
          
        }


        .nav-overall-container{
            display: flex;
            justify-content: center;
        }

        /* .navigation-container{
            width: 60%;
        } */

        .on-content{
            padding: 10px 5%;
        }

        .back-btn{
            height: 45px !important;
            width: 45px !important;
            left: 5%;
            border: none;
        }
        
        .back-btn svg{
            height: 45px !important;
            width: 45px !important;
        }

        .mobile-pop {
            width: 60%;
        }

        

}


@media (prefers-color-scheme: dark){
    body{
        background: rgba(19, 19, 19, 1) !important;
    }
    .on-top{
        background: linear-gradient(180deg, rgba(19, 19, 19, 0) 0%, rgba(19, 19, 19, 0.141414) 15.63%, #131313 44.79%) !important;
    }

    .on-desc-header h1{
        color: var(--BLU-08, rgba(97, 114, 254, 1));
    }

    .on-desc-header p{
        color: rgba(229, 229, 229, 1);
    }

    .indicator-container .indicator, .indicator-active, .get-started-btn, 
    .mobile-pop .overlay-btn-container button{
        background: var(--BLU-07, rgba(65, 84, 241, 1));
        border: 1px solid var(--BLU-00, rgba(36, 59, 253, 1))
    }
    .back-btn svg{
        /* fill: #2F2F2F !important; */
    }

    .back-btn svg > rect:nth-child(odd), svg.mobile-pop-close > rect:nth-child(odd){
        fill: #2F2F2F !important;
    }
    .back-btn svg > rect:nth-child(even), svg.mobile-pop-close > rect:nth-child(even){
        stroke: #555555 !important;
    }
    .back-btn svg path{
        stroke: #F6F6F6 !important;
    }
    svg.mobile-pop-close > path{
        fill: #F6F6F6 !important;
    }
    .image-light{
        display: none !important;
    }
    
    .image-dark{
        display: inline !important;
    }
    .form-container{
        background: rgba(47, 47, 47, 1);
        border-bottom: 1px solid rgba(85, 85, 85, 1);
    }
    .form-header h1, .input-container label, .mobile-pop .message{
        color: rgba(246, 246, 246, 1) !important;

    }
    .form-header p, .form-box input, .terms-container p, .forget {
        color: rgba(221, 221, 221, 1);

    }
    .form-box, .btn-outline-main{
        background: var(--BLK-03, rgba(65, 65, 65, 1));
        border: 1px solid var(--BLK-02, rgba(89, 89, 89, 1));
    }
    .form-box input::placeholder{
        color: var(--BLK-00, rgba(169, 169, 169, 1));
    }
    .terms-container svg{
        background: var(--BLK-03, rgba(65, 65, 65, 1));
        border: 1px solid var(--BLU-07, rgba(65, 84, 241, 1))
    }
    .terms-container svg path{
        stroke: rgba(65, 84, 241, 1);
    }
    .mobile-pop{
        background: rgba(47, 47, 47, 1);
        border: 1px solid rgba(85, 85, 85, 1);
    }
    .forget span, .btn-outline-main{
        color: var(--BLU-07, rgba(65, 84, 241, 1)) !important;
    }

    .btn-outline-main{
        /* border: 1px solid rgba(65, 84, 241, 1);
        background-color: transparent; */
        background-color: rgba(246, 246, 246, 1) !important;
        border: rgba(221, 221, 221, 1) !important; 
    }


    





}