:root{
   --primary: #005CFA;
   --secondary: #0048D5;
   --text-color: #141414;
   --gray: #cdcdcd;
}

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

body{
   font-family: "Urbanist", sans-serif;
}

main{
   min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 30px 0;
   background-image: url('bg.jpg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   padding-bottom: 100px;
}

input, textarea{ 
   outline: none;
   font-family: "Urbanist", sans-serif;
   font-weight: 500;
}

a{
   text-decoration: none;
   color: white;
   font-weight: 600;
}

#register{
   width: 80%;
   display: flex;
   justify-content: center;
   border-radius: 15px;
   background-color: #f4fdffd4;
   backdrop-filter: blur(10px);
   border: solid 1px var(--gray);
   box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   overflow: hidden;
   border: none;
}

.col-right, .col-left{
   width: 50%;
   display: flex;
   flex-direction: column;
   padding: 40px 50px;
}

.col-left{
   align-items: center;
   background-image: linear-gradient(45deg, var(--secondary) 0%, var(--primary)  60%, var(--secondary)  90%);
   background-color: var(--primary);
   position: relative;
   overflow: hidden;
}

.col-right{
   align-items: start;
   justify-content: center;
   padding: 40px 50px;
}

/* col left styles */
.animation-image{
   position: absolute;
   bottom: 60px;
   width: 500px;
   height: 500px;
}
.col-left .title{
   padding-top: 20px;
   font-size: 3rem;
   font-weight: 700;
   letter-spacing: 2px;
   color: #FFFFFF;
   width: 90%;
   margin-bottom: 15px;
   position: relative;
}

.col-left .title::before{
   content: "";
   position: absolute;
   width: 150px;
   height: 3px;
   top: 0;
   left: 0;
   background-color: #FFFFFF;
   border-radius: 100px;
}

.col-left p{
   color: #f4f4f4;
   font-size: 1rem;
   width: 90%;
   z-index: 1;
}

.col-left .decoration-circle{
   position:absolute;
   background-color: none;
   border: 80px solid var(--primary);
   border-radius: 100%;
}

.col-left .circle-top{
   top: -150px;
   right: -150px;
   width: 400px;
   height: 400px;
   opacity: 0.4;
}

.col-left .circle-bottom{
   bottom: -230px;
   left: -230px;
   width: 600px;
   height: 600px;
   opacity: 0.8;
}

/* col right styles */
.col-right .title{
   font-size: 2.5rem;
   font-weight: 900;
   text-align: center;
   margin-bottom: 30px;
   width: 100%;
   position: relative;
}

.col-right .title::before{
   content: "";
   position: absolute;
   width: 100px;
   height: 3px;
   bottom: -5px;
   left: 50%;
   transform: translateX(-50%); 
   background-color: var(--primary);
   border-radius: 100px;
}

/* form styles */
form{
   margin-top: 10px;
   width: 100%;
}

form .input-group{
   display: flex;
   flex-direction: column;
   justify-content: center ;
   align-items: start;
   margin-bottom: 15px;
   width: 100%;
}

/* input styles */
.group{
   display: flex;

}

.group > * + * {
   margin-left: 15px;
}  

textarea{
   resize: none;
}

.input-group input, textarea{
   width: 100%;
   padding: 10px;
   border-radius: 5px;
   border: 1px solid var(--gray);
   margin-top: 8px;
}

.input-group input:focus, textarea:focus{
   border-color: var(--primary);
}

.input-group label{
   font-weight: 600;
}

.input-checkbox, .input-radio{
   display: flex;
   justify-content: center;
   align-items: center;
}

.input-checkbox .checkbox-item, .input-radio .radio-item{
   display: flex;
   align-items: center;
   width: fit-content;
   margin-top: 10px;
}

.input-checkbox .checkbox-item input, .input-radio .radio-item input{
   width:20px;
   margin: 0 8px 0 0;
}

.input-checkbox .checkbox-item label, .input-radio .radio-item label{
   width:100%;
   margin-right: 20px;
   font-weight: 400;
}

.input-identity label, .input-identity input{
   cursor: pointer;
}
.input-identity input{
   padding: 0;
   overflow: hidden;
}

.input-identity input::-webkit-file-upload-button{
   background-color: var(--primary);
   color: #FFFFFF;
   font-weight: 500;
   border: none;
   padding: 10px;
   cursor: pointer;
}

.btn-submit {
   padding: 15px 30px;
   text-align: center;
   transition: 0.3s;
   background-size: 200% auto;
   color: white;
   border-radius: 5px;
   display: block;
   border: 0px;
   text-transform: uppercase;
   font-family: "Urbanist", sans-serif;
   font-size: 1rem;
   font-weight: 800;
   box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   background-color: var(--primary);
   cursor: pointer;
   text-decoration: none;
}

.btn-submit:hover {
   color: #fff;
   background-color: var(--secondary);
   box-shadow: none;
}

/* footer styles */
footer{
   padding: 20px 30px;
   text-align: center;
   color: white;
   background-color: #0d47a1;
}