* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
}


.vs-container {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* background-image: url('../images/logo/class_ksm.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    filter: blur(2px); 
    z-index: -1;  */
   
   
}
.vs-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/logo/class_ksm.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    filter: blur(4px);
    z-index: -1; 
}

.vs-contain-imgFront-form {
    width: 70%;
    max-height: 500px;
    max-width: 1020px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Poppins;
    /* background-color: #055160; */
    /* background-color: #24367e; */
    /* box-shadow: 0 0.5rem 1rem #1fb0e1; */

/*    
    border-radius: var(--bs-border-radius-lg); */
    /* margin-top: 180px; */
    



}

.sub-vs-contain-imgFront-form {
    border-radius: var(--bs-border-radius-lg);
    background-color:#ffffffab;
    /* box-shadow: 0 0.5rem 0.5rem #f3f6f6; */


    padding: 1rem;
    color: #000;
    width: 43%;
    /* margin-left: 120px; */
    /* box-shadow: rem #e7380c30; */
    /* border-radius: var(--bs-border-radius-lg); */

    /* height: 700px; */
    /* background-size: cover;
    background-repeat: no-repeat;
    background-position: center; */
    /* background-image: url('https://www.shutterstock.com/image-photo/concept-cyber-security-user-type-260nw-2071703726.jpg'); */
    /* background-image: url('../images/logo/class_ksm.jpg'); */

   
}

.form-size {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bs-border-radius-2xl);
    flex-direction: column;
}

.vs-form-group,
.vs-btn-group {
    width: 100%;
    /* margin: 10px; */

}

.vs-btn-group {
    display: flex;
    
    align-items: center;
    justify-content: center;
}

.form-inside {
    width: 100%;
    
}

.form-inside form {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    row-gap: 2rem;
}

.vs-form-group .vs-form-label {
    font-size: calc(1rem + 0.1vw);
    /* color: #355fa1; */
    color: #1e3978;
    
}

.vs-form-group .vs-form-control:focus,
.vs-form-group .vs-form-control:focus-visible,
.vs-form-group .vs-form-control {
    padding: 0.5rem 0.5rem;
    border-top:none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid #1e3978;
    outline: none;
    /* border-radius: var(--bs-border-radius-lg); */
    /* background-color: #f5f5f50d; */
}

input::placeholder {
    padding: 0 0.5rem;
    background-color: transparent;
    font-size: 1.15rem;
}

.vs-form-control {
    width: 100%;
    color: rgba(11, 11, 80, 0.407);
}

.vs-btn-group .vs-btn {
    width: 50%;
    border-radius: var(--bs-border-radius-lg);
    outline: none;
    background-color: #1e3978;
    border: none;
    font-size: 12px;
    color: #ffffff;
    padding: 5px;
}

.vs-logo {
    display: flex;
    justify-content: center;
    width: 100%;
    /* height: 150px; */
    
}
.vs-title{
    font-size:25px;
    margin-bottom:3vh;
    color:#1e3978;
}

.logo-img {
    position: relative;
   
}

.logo-img img {
    width: calc(20px + 5vw);
    /* border-radius: 50%; */
  
}

.sub-vs-contain-imgBack-from {
    width: 50%;
    overflow: hidden;
    height: 600px;
    border-radius: 0 var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0;
}

.sub-vs-contain-imgBack-from .img-background {
    object-fit: contain;
    transform: translate(-35%, 0) scaleX(-1);
}

@media screen and (max-width: 650px) {
    .vs-contain-imgFront-form {
        width: 80%;
        max-height: 650px;
        max-width: 1020px;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        font-family: Poppins;
        box-shadow: 0 0.5rem 1rem #00000026;
        border-radius: var(--bs-border-radius-lg);
        position: relative;
    }

    .sub-vs-contain-imgFront-form {
        border-radius: var(--bs-border-radius-lg);
        background-color: #ffffffd3;
        padding: 1rem;
        color: #000;
        width: 100%;
        height: 600px;
    }

    .sub-vs-contain-imgBack-from {
        width: 100%;
        overflow: hidden;
        height: 600px;
        border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0 0;
    }

    .sub-vs-contain-imgBack-from .img-background {
        object-fit: contain;
        transform: translate(-35%, -30%) scaleX(-1);
    }

    .vs-logo {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
    }

    .logo-img {
        position: relative;
        padding: 0.5rem;
    }

    .logo-img img {
        width: calc(80px + 1vw);
        border-radius: 50%;
    }
  
}