.user-form-part { display: flex; align-items: center; justify-content: center; justify-content: space-between } .user-form-banner { width: 60%; height: 100vh; background: url(../../images/bg/03.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; z-index: 1 } .user-form-banner::before { position: absolute; content: ""; top: 0px; left: 0px; width: 100%; height: 100%; background: linear-gradient(to right, rgba(2, 33, 85, 0.7), rgba(21, 107, 255, 0.7)); z-index: -1 } .user-form-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 600px } .user-form-content a { margin-bottom: 35px } .user-form-content a img { width: 250px; height: auto; background: white; padding: 20px 40px; border-radius: 20px; } .user-form-content h1 { color: var(--white); font-size: 45px; line-height: 55px; margin-bottom: 45px } .user-form-content h1 span { display: block } .user-form-content p { color: var(--white); font-size: 24px; line-height: 32px } .user-form-category { width: 40%; height: 100vh; background: #fbfbfb; overflow-y: scroll; overflow-x: hidden } .user-form-header { position: fixed; top: 50px; left: 50px; z-index: 1 } .user-form-header a:nth-child(1) { display: none } .user-form-header a i { width: 50px; height: 50px; line-height: 50px; text-align: center; border-radius: 50%; font-size: 16px; color: var(--primary); background: var(--white); text-shadow: var(--primary-tshadow); box-shadow: var(--primary-bshadow) } .user-form-header a i:hover { color: var(--white); background: var(--primary) } .user-form-category-btn { margin-bottom: 50px } .user-form-title { text-align: center; margin-bottom: 45px } .user-form-title h2 { margin-bottom: 7px } .user-form-option { display: flex; align-items: center; justify-content: center; margin-bottom: 30px } .user-form-option li { margin: 0px 8px } .user-form-option li a { width: 125px; padding: 5px; color: var(--white); border-radius: 8px } .user-form-option li a i { width: 32px; height: 32px; line-height: 32px; text-align: center; border-radius: 8px; font-size: 12px; margin-right: 8px; text-shadow: var(--primary-tshadow) } .user-form-option li a span { font-size: 14px; text-transform: capitalize; text-shadow: var(--primary-tshadow) } .user-form-option li:nth-child(1) a { background: #4267B2 } .user-form-option li:nth-child(1) a i { background: #375797 } .user-form-option li:nth-child(2) a { background: #1DA1F2 } .user-form-option li:nth-child(2) a i { background: #1a95e2 } .user-form-option li:nth-child(3) a { background: #DB4437 } .user-form-option li:nth-child(3) a i { background: #be3a2e } .user-form-devider { position: relative; z-index: 1 } .user-form-devider::before { position: absolute; content: ""; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 1px; background: #e8e8e8; z-index: -1 } .user-form-devider p { width: 50px; height: 50px; line-height: 50px; text-align: center; border-radius: 50%; background: var(--white); border: 1px solid #e8e8e8; margin: 0px auto 30px } .user-form-direction { text-align: center; margin: 30px 0px 50px } .user-form-direction p { color: #666666; font-size: 18px; width: 290px; margin: 0 auto } .user-form-direction p span { font-weight: 500; color: var(--primary) } .form-group { margin-bottom: 20px; position: relative } .form-group:focus-within .form-icon { visibility: visible; opacity: 1 } .form-group:focus-within .form-alert { display: block } .form-group .btn { width: 100%; padding: 10px 30px } .form-control { width: 100%; height: 45px; background: var(--white); padding: 0px 55px 0px 20px; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .form-control:focus { outline: none; box-shadow: none; color: var(--gray); background: var(--white); border-color: var(--primary) } .form-icon { border: none; background: none; line-height: 0px; position: absolute; top: 15px; right: 20px; visibility: hidden; opacity: 0; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s } .form-icon i { font-size: 16px; color: #aaaaaa } .form-alert { display: none; padding: 3px 20px } .form-forgot { font-size: 15px; color: var(--gray) } .form-forgot:hover { color: var(--primary); text-decoration: underline } .custom-control-label { font-size: 15px; line-height: 26px; cursor: pointer } .custom-control-label::before { top: 5px } .custom-control-label::after { top: 5px } .custom-control-input:checked~.custom-control-label::before { border-color: var(--primary); background-color: var(--primary); box-shadow: none } .form-grid { display: flex; align-items: center; justify-content: center; justify-content: space-between; background: var(--primary); border-radius: 8px } .form-grid input { width: 100%; height: 45px; border: none; background: transparent; padding: 0px 20px } .form-grid .btn { width: 180px; height: 45px; padding: 14px 0px; text-align: center } @media (max-width: 767px) { .user-form-option li a { width: auto } .user-form-option li a i { width: 60px; margin-right: 0px } .user-form-option li a span { display: none } } @media (max-width: 575px) { .user-form-banner { display: none } .user-form-category { width: 100% } .user-form-header { display: flex; align-items: center; justify-content: center; justify-content: space-between; padding: 15px; top: 0px; left: 0px; z-index: 3; width: 100%; background: var(--white); box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1) } .user-form-header a:nth-child(1) { display: block } .user-form-header a img { width: 150px } .user-form-header a i { width: 40px; height: 40px; line-height: 40px; color: var(--primary); background: var(--white) } .user-form-header a i:hover { color: var(--white); background: var(--primary) } .user-form-category-btn { margin-top: 156px; } .user-form-direction p { width: 100% } } @media (min-width: 576px) and (max-width: 991px) { .user-form-header { top: 30px; left: 30px } } @media (min-width: 576px) and (max-width: 767px) { .user-form-banner { width: 42% } .user-form-content { width: 230px } .user-form-content a img { width: 150px } .user-form-content h1 { font-size: 20px; line-height: 30px; margin-bottom: 25px } .user-form-content p { font-size: 16px } .user-form-category { width: 58% } .user-form-direction p { width: 260px } } @media (min-width: 768px) and (max-width: 991px) { .user-form-banner { width: 40% } .user-form-content { width: 280px } .user-form-content a img { width: 200px } .user-form-content h1 { font-size: 28px; line-height: 36px; margin-bottom: 25px } .user-form-content p { font-size: 20px; line-height: 28px } .user-form-category { width: 60% } } @media (min-width: 992px) and (max-width: 1199px) { .user-form-banner { width: 50% } .user-form-content { width: 460px } .user-form-content a img { width: 200px } .user-form-category { width: 50% } }