*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #002E48; 
    font-family: Rubik;
}

 .parents-container { 
    display: flex;
    width: 1000px;
    /* max-width: 100%; */
    justify-content: center; 
    align-items: center;

    
}
/*  */
    
/* .box { 
    width: 900px;
    height: 450px;
    margin: 0 10px; 
    padding-top: 166px;
}
 */


.box1 {
/*     
    max-width:60%;
    background: #00507C33;
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: 0px 4px 38px 0px #00000040;
    border-radius: 32px 0px 0px 32px;
     */
     width: 500px;
     height: 400px;
     gap: 0px;
     border-radius: 32px 0px 0px 32px;
     opacity: 0px;
     background-color:#00507C33;
     


   
}

.box2 {
    /*  
    background-color: #000000;
    width: 40%;
    margin: 0;
    padding: 0;
    border: none;
    border-radius:0px 32px 32px 0px;
    /* position: relative;    */
     width: 300px;
    height: 400px;
    gap: 0px;
    border-radius: 0px 32px 32px 0px;
    opacity: 0px;
     background-color:#000000;  
     background-image: url(image/27356-earth-animation\ 1.png);
     background-repeat: no-repeat;
     background-position: left bottom ;
     position: relative;
     padding-top: 20px;
 }

 .box2 img{
    position: absolute;
    bottom:20px;
    width:90%;
 }

.box1 h1{
    font-family: rubik;
    font-size: 3.25rem;
    font-weight: 700;
    color:white;
    opacity: 85%;
    line-height: 61.62px;
    padding-left: 90px;
    margin-top: 20px;
}

.form-group {
    position: relative;
    margin-bottom: 10px;
    padding-left: 93px;
    margin-top: 24px;
    color:#00507C;
}

.form-group input {
    width: 300px;
    gap: 24px;
    border-radius: 38px;
    opacity: 0px;
    
    

    /* width: 80%; */
     padding: 10px 10px 10px 40px; 
     border: 1px solid #ccc; 
    /* border-radius: 5px; */
    
    
}

.form-group i {
    position: absolute;
    left: 105px;
    top: 5px;
    font-size: 24px;
    color:#00507C;
    
    
}
.form-group span {
    color: red;
    font-size: 12px;
    visibility: hidden;
}
.form-group.success span {
    color: green;
    visibility: visible;
}
.form-group.error span {
    color: #B93E04;
    visibility: visible;
}
.form-group input {
    display: block;
}
.form-group.error input {
    border: 1px solid red;
}
.form-group.success input {
    border: 2px solid green;
}
.form-group input:focus {
    border-color: #007bff;
}
button {
    width: 30%;
    padding: 10px;
    background-color: #1852F2;
    border: none;
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    margin-left: 35%;
    margin-right: 45%;
}
/* button:disabled { 
     background-color: #ccc;  
 } */
.checkbox-group {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding-left: 95px;
}
label[for="confirm"] {
    color: white;
    
}

span{
    color:#B93E04;
}
.checkbox-group input {
    margin-right: 10px;
}

 p{
    margin-top: 10px;
    color:white;
    text-align: center;
}
/*  
.input-control input{
    width:70%;
    height: 48px;
    margin:10px;
    border-radius: 48px;
    position: relative;
}

/* .box1 .form input{ 
    display:block;
    margin: 20px;
    margin-left: 130px; 
    padding:15px;
    outline: 0;
    border-radius: 40px;
    border:none;
    width:70%;
    position: relative;    
}
  */
  /*  
.fa-user{
    position:absolute;
    left:0;
    
    display:flex; 
    align-items: center;
    color:#00507C;
    border: 2px solid;
}


.circle{
    width:20px;
    height: 20px;
    border-radius: 50%;
    background-color: white;
    margin-left: 90px ;
    margin-top: 10px;
}

.pcircle{
    display: inline-flex;
    gap:10px;
    color:white;
    margin-right: 80px; 
    
}

.circle p,span{

font-family: Rubik;
font-size: 1.25rem;
font-weight: 500;
line-height: 23.7px;
text-align: left;
color:#B93E04;
margin-top: 5px;
}

 button{
    background-color: #1852F2;
    color:white;
    padding: 15px;
    border: none;
    border-radius: 8px;
    display: block;
    margin: 0 auto;
    margin-top: 10px;
}
 */
/* .form, p{ 
    font-family: Rubik;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 23.7px;
    text-align: left;
    color:white;
    text-align: center;
     margin-top: 10px; 
}
 */


.box2 h3{
    font-family: Rubik;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 25.4px;
    text-align: center;
    color:#E5E5E5;
    
}

/*  
.box2 img{
    width:100%;
    height: 250px; 
    margin: 0 auto;
    position: absolute;
    top: 90px;
    right:5px;
}

 .box2 .art {
    position: absolute;
    top:220px; 
    bottom:px;
    z-index: 1;
     } 
 */