body { justify-content: space-between; margin: 0; } h1 { margin: 0; } .mainContainer { display: flex; justify-content: center; padding-left: 10rem; padding-right: 10rem; } .section { width: 45%; padding: 20px; box-sizing: border-box; } .section h2 { margin-bottom: 10px; } .form-container { margin-bottom: 20px; padding-top: 0px; } form { width: 100%; } label { display: block; margin-bottom: 5px; } input { width: 100%; padding: 8px; box-sizing: border-box; margin-bottom: 10px; } .image-container { display: flex; flex-wrap: wrap; justify-content: space-between; } img { width: 48%; height: auto; max-height: 200px; object-fit: cover; margin-bottom: 10px; } .checkboxFormContainer { display: flex; flex-direction: column; align-items: center; justify-content: center; } .checkbox-container { margin-bottom: 10px; /* Adjust the margin as needed */ } .checkbox-label { display: block; } .kycImg , .selfieImg{ border-radius: 5px; cursor: pointer; transition: 0.3s; } .kycImg:hover , .selfieImg:hover{ box-shadow: 5px 10px 5px lightblue; opacity: 0.7; } .imgModal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9); } .imgModal-content { margin: auto; display: block; width: 80%; height: auto; max-width: 700px; } .imgModal-content, #caption { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; } @-webkit-keyframes zoom { from {-webkit-transform:scale(0)} to {-webkit-transform:scale(1)} } @keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} } .closeImg { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .closeImg:hover, .closeImg:focus { color: #bbb; text-decoration: none; cursor: pointer; } @media only screen and (max-width: 700px){ .imgModal-content { width: 100%; } }