@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;700&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* font-family: 'Roboto', sans-serif; */
    font-family: 'Exo 2', sans-serif;
}

.left_Bar {
    position: relative;
    width: 100%;
    height: 100vh;
    background: linear-gradient(to right, #382293, #581677);
    overflow: hidden;
}

.left_Bar .logo {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: row;
    margin: 2%;
}

.left_Bar .logo h2 {
    font-style: normal;
    font-weight: bold;
    font-size: 1.125rem;
    line-height: 1.3125rem;
    text-align: left;
    padding-left: 1.4rem;
    color: #FFFFFF;
}

.left_Bar .logo img {
    position: relative;
    width: 20%;
}

.svg_img {
    position: relative;
}

.svg_img::before {
    content: '';
    position: absolute;
    width: 18rem;
    height: 23vh;
    left: -4rem;
    margin-top: 30rem;
    background: linear-gradient(118.87deg, #136ACD 1.71%, #593BD7 46.61%, #A40AE3 100%);
}

.svg_img .bottom_svg {
    width: 50rem;
    height: 30rem;
    position: absolute;
    left: -12.4rem;
    top: 10rem;
    transform: rotate(45deg);
    mix-blend-mode: normal;
}

.svg_img .top_svg {
    width: 50rem;
    height: 25rem;
    position: absolute;
    top: -14rem;
    left: 10rem;
    transform: rotate(-130deg);
}

/* .svg_img::after{
    content: '';
    position: absolute;
    width: 18rem;
    height: 12.4rem;
    top: -6.2rem;
    right: -7rem;
    
    background: linear-gradient(118.87deg, #136ACD 1.71%, #593BD7 46.61%);
} */

.svg_img .circle_svg {
    position: absolute;
    left: 28.8rem;
    top: -4.4rem;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    background: linear-gradient(90deg, #29B7DF 0%, #49269D 100%);
}

.svg_img .secnd_circle {
    position: absolute;
    left: 6rem;
    top: 14rem;
    width: 11.25rem;
    height: 11.25rem;
    border-radius: 50%;
    background: linear-gradient(180deg, #B20AA8 0%, #6F1FAB 100%);
}

.heading {
    position: relative;
    margin-top: 7%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.heading h2 {
    margin-top: 7.2rem;
}

.heading p {
    font-size: 1.12rem;
}

.last_svg {
    position: relative;
    width: 3.125rem;
    height: 3.125rem;
    background: linear-gradient(180deg, #B20AA8 0%, #6F1FAB 100%);
    border-radius: 50%;
    top: 18rem;
    right: -40rem;
}

/* @media screen and (min-width: 768px) and (max-width: 1024px){
    .svg_img .bottom_svg{
        position: absolute;
        margin-left: -7rem;
        margin-top: 14rem;
    }
    .svg_img::before{
        margin-top: 44rem;
    }
    .svg_img .secnd_circle{
        left: 4rem;
        top: 26rem;
        width: 9rem;
        height: 9rem;
    }
    .svg_img .top_svg{
        top: -24rem;
        left: 7.8rem;
    }
    .svg_img::after{
        display: none;
    }
    .svg_img .circle_svg{
        position: absolute;
        left: 16rem;
        top: -2.8rem;
        width: 8rem;
        height: 8rem;
    }
    .heading h2{
        margin-top: 20rem;
    }
    .heading p{
        margin-top: 4rem;
        margin-left: 13.2rem;
    }
    .right_Bar{
        padding-top: 17%;
        padding-left: 50%;
    }
}



@media screen and (min-width: 1048px) and (max-width: 1920px){
    
    .svg_img .bottom_svg{
        position: absolute;
        margin-left: 1rem;
        margin-top: 8.8rem;
    }
    
    .svg_img .secnd_circle{
        left: 8rem;
        top: 20rem;
        width: 12rem;
        height: 12rem;
    }
    
    .svg_img::before{
        margin-top: 40rem;
        width: 36rem;
        height: 22rem;
        transform: rotate(35deg);
    }
    .svg_img .top_svg{
        top: -26.4rem;
        left: 20rem;
        
    }
    
    .svg_img::after{
        width: 16rem;
        height: 24rem;
        transform: rotate(145deg);
        top: -10.8rem;
        right: -6rem;
    }
    .svg_img .circle_svg{
        position: absolute;
        left: 33.2rem;
        top: -4.4rem;
        width: 8rem;
        height: 8rem;
    }
    .heading h2{
        margin-top: 16rem;
        font-size: 2.6rem;
    }
    .heading p{
        margin-left: 24rem;
        font-size: 1.4rem;
    }
    .last_svg{
        width: 4rem;
        height: 4rem;
        top: 18rem;
        right: -48rem;
    
    }
    .left_Bar .logo h2{
        font-size: 1.8rem;
        padding-left: 1.4rem;
    }
    
    .left_Bar .logo img{
        position: relative;
        width: 6.8rem;
        height: 4rem;
    }

} */

@media screen and (min-width: 735px) and (max-width: 766px) {
    .svg_img .top_svg {
        position: absolute;
        top: -22rem;
        left: 16.4rem;
    }
    .svg_img::after {
        height: 13.6rem;
        top: -6.2rem;
        right: -10rem;
    }
    .svg_img .circle_svg {
        left: 28.4rem;
        top: -1rem;
        width: 7.4rem;
        height: 7.4rem;
    }
}

@media screen and (min-width: 718px) and (max-width: 735px) {
    .svg_img::after {
        height: 13.6rem;
        top: -6.2rem;
        right: -12rem;
    }
    .svg_img .circle_svg {
        left: 26.4rem;
        top: -4.4rem;
        width: 7.4rem;
        height: 7.4rem;
    }
}

@media screen and (min-width: 540px) and (max-width: 644px) {
    .svg_img::after {
        display: none;
    }
    .svg_img .circle_svg {
        left: 26.4rem;
        top: -4.4rem;
        width: 7.4rem;
        height: 7.4rem;
    }
}

@media screen and (min-width: 644px) and (max-width: 717px) {
    .svg_img::after {
        width: 16rem;
        height: 12.2rem;
        top: -6.4rem;
        right: -12rem;
    }
}

@media screen and (min-width: 360px) and (max-width: 539px) {
    .svg_img .bottom_svg {
        position: absolute;
        margin-left: -7rem;
        margin-top: 2rem;
    }
    .svg_img .secnd_circle {
        position: absolute;
        left: 4rem;
        top: 16rem;
        width: 10rem;
        height: 10rem;
    }
    .svg_img .top_svg {
        position: absolute;
        top: -24rem;
        left: 7.8rem;
    }
    .svg_img::after {
        display: none;
    }
    .svg_img .circle_svg {
        position: absolute;
        left: 19rem;
        top: -2.8rem;
        width: 8rem;
        height: 8rem;
    }
    .heading h2 {
        margin-top: 12rem;
        font-size: 1.4rem;
    }
    .heading p {
        margin-top: 4rem;
        margin-left: 16rem;
    }
}

@media screen and (min-width: 320px) and (max-width: 411px) {
    .svg_img .bottom_svg {
        margin-left: -6.6rem;
        margin-top: -2rem;
    }
    .svg_img .secnd_circle {
        left: 2.8rem;
        top: 12rem;
        width: 8rem;
        height: 8rem;
    }
    .svg_img .top_svg {
        top: -20rem;
        left: 6.2rem;
    }
    .svg_img::before {
        width: 20rem;
        height: 20rem;
    }
    .svg_img::after {
        display: none;
    }
    .svg_img .circle_svg {
        left: 12rem;
        top: -2.4rem;
        width: 6.6rem;
        height: 6.6rem;
    }
    .heading h2 {
        margin-top: 6rem;
        font-size: 1.2rem;
    }
    .heading p {
        margin-top: 2.6rem;
        margin-left: 10rem;
    }
    .left_Bar .logo h2 {
        font-size: .8rem;
        margin-left: -1rem;
    }
    .left_Bar .logo img {
        width: 3.4rem;
        height: 3.2rem;
    }
}

@media screen and (min-width: 280px) and (max-width: 320px) {
    .svg_img .bottom_svg {
        margin-left: -6.6rem;
        margin-top: -2rem;
    }
    .svg_img .secnd_circle {
        left: 2.8rem;
        top: 12rem;
        width: 8rem;
        height: 8rem;
    }
    .svg_img .top_svg {
        top: -20rem;
        left: 6.2rem;
    }
    .svg_img::before {
        width: 20rem;
        height: 20rem;
    }
    .svg_img::after {
        display: none;
    }
    .svg_img .circle_svg {
        left: 12rem;
        top: -2.4rem;
        width: 6.6rem;
        height: 6.6rem;
    }
    .heading h2 {
        margin-top: 6rem;
        font-size: 1.2rem;
    }
    .heading p {
        margin-top: 2.6rem;
        margin-left: 10rem;
    }
    .left_Bar .logo h2 {
        font-size: .8rem;
        margin-left: -1rem;
    }
    .left_Bar .logo img {
        width: 3.4rem;
        height: 3.2rem;
    }
}

/* left_Bar end 375*/

/* right_Bar start */

.right_Bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100vh;
}

.right_Bar h2 {
    position: relative;
    margin-left: 14%;
}

.form_group {
    position: relative;
    padding: 0 5%;
}

.form_group form {
    padding: 0 10%;
}

.form_group form input {
    border-style: none;
    position: relative;
}

.form_group form input:focus {
    outline: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.form_group hr {
    width: 100%;
    padding: 0.200rem;
    background: linear-gradient(90deg, #8953C3 0%, #DF35C9 100%);
    margin-top: -.018rem;
}

.continue {
    padding: 5% 0;
    text-align: center;
}

.continue a {
    padding: .6rem 35%;
    background: linear-gradient(90deg, #8953C3 0%, #DF35C9 100%);
    background-size: 200% auto;
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .2rem;
    border-radius: 0.5rem;
    transition: 1s ease;
}

.continue a:hover {
    transition: 1s ease;
    background-position: right center;
    color: #fff;
}

.error_text{
    color: red;
    font-size: 1.1rem;
    text-align: center;
}
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px gray; 
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: darkgray;
}
::-webkit-scrollbar-thumb:hover {
  background: black; 
}