.w-28{
    width: 7rem;
}
.h-32{
    height: 128px;
}
.bg-\[\#1e1e26\]{
    background-color: #1e1e26;
}
.bg-\[\#2a60ff\]{
    background-color: #2a60ff;
}
.bg-\[\#002d91\]{
    background-color: #002d91;
}
.bg-\[\#0f2058\]{
    background-color: #0f2058;
}
.bg-\[\#0047d4\]{
    background-color: #0047d4;
}
.bg-\[\#0047d4\]{
    background-color: #0047d4;
}

.blur-\[70px\]{
    filter: blur(70px);
}
.blur-\[80px\]{
    filter: blur(80px);
}
.blur-\[40px\]{
    filter: blur(40px);
}
.blur-\[50px\]{
    filter: blur(50px);
}
.bottom-10{
    bottom: 2.5rem; 
}
.bottom-36{
    bottom:9.5rem;
}
.row-span-2{
    grid-row: span 2 / span 2; 
}
.-mt-\[4\.3rem\]{
    margin-top: -4.3rem;
}
.max-h-fit{
    max-height: fit-content; 
}
.number_container::before,.number_container::after, .name_container::before, .name_container::after  {
    content: none !important;
}
.pt-36{
    padding-top: 9rem;
}
.self-start{
    align-self: start;
}
.self-end{
    align-self: end;
}
#imgcont{
    position: relative;
}
#imgcont::before{
    content: '';
    background: #2a60ff;
    position: absolute;
    filter: blur(100px);
    z-index: -1;
    inset: 0;
    width: 200px;
    height: 200px;
    margin: auto;
}
#otp1_box:not(:has(.hidden)) {
    width: 100%;
}
.animate-arrow {
    animation: arrow 2s cubic-bezier(.4,0,.6,1) infinite;
}

.hidden{
    display: none;
}

.form-gradiant{
    /*background: linear-gradient(215deg, #0047d4, transparent);*/
    background: linear-gradient(215deg, #ffffff30, transparent);
}
@media (min-width: 768px) {
    .md\:blur-\[80px\]{
        filter: blur(80px);
    }
    .md\:w-36{
        width: 144px;
    }
    .md\:h-36{
        height: 144px;
    }
    .md\:pb-36{
        padding-bottom: 9rem;
    }
    .md\:container {
        max-width: 1140px;
        margin: 0 auto;
    }
    .md\:right-1\/5{
        right: 20%; 
    }
    .md\:m-0{
        margin: 0;
    }
    .md\:mt-0{
        margin-top: 0;
    }
    .md\:-mt-\[4\.5rem\]{
        margin-top: -4.5rem;
    }
    .md\:max-h-\[700px\]{
        max-height: 700px;
    }
    .md\:block{
        display: block;
    }
}

@keyframes arrow{
    50% {
        transform: translateX(6px);
    }
}