.profile-page{padding:20px;display:flex;gap:20px}.profile-page .left-box,.profile-page .right-box{width:100%}.profile-page .left-box .background-link{padding:100px 40px 40px;color:#fff;display:flex;justify-content:space-between;border-radius:0 0 30px 30px}.profile-page .left-box .box{display:flex;flex-direction:column;align-items:center;width:90%;margin:-90px auto auto;border-radius:20px;padding:0 20px 40px;background:linear-gradient(1turn,#2f4f6f 26%,#3181b7 94%);box-shadow:0 6px 12px -2px rgba(50,50,93,.25),0 3px 7px -3px rgba(0,0,0,.3);color:#fff}.profile-page .left-box .box .img-box{margin-top:-45px;margin-bottom:20px;position:relative;height:90px;width:90px}.profile-page .left-box .box .img-box img{height:100%;width:100%;border-radius:50%;object-fit:cover}.profile-page .left-box .box .img-box button{position:absolute;bottom:0;right:0;background-color:#fff;height:25px;width:25px;border-radius:50%;overflow:hidden}.profile-page .left-box .box .img-box button label{color:#000;height:100%;width:100%;display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer}.profile-page .left-box .box .img-box button label input{position:absolute;height:100%;width:100%;top:0;left:0;opacity:0;pointer-events:none}.profile-page .left-box .box .details-box{display:flex;flex-direction:column;align-items:center;gap:10px}.profile-page .left-box .box .details-box h2{font-size:25px;font-weight:600;color:#fff}.profile-page .left-box .box .details-box span{font-size:14px;color:#d4d4d4}.profile-page .left-box .box .details-box p{font-size:20px;font-weight:600}.profile-page .left-box .box .details-box p span{color:#fff}.profile-page .left-box .button-box{margin-top:40px;display:flex;flex-direction:column;background-color:var(--input-background)}.profile-page .left-box .button-box button{padding:13px 20px;text-align:start}.profile-page .left-box .button-box .active{background-color:var(--primary-color);color:#fff}.profile-page .right-box{min-height:85vh;display:flex;flex-direction:column;justify-content:center}.profile-page .right-box .form-section{display:flex;flex-direction:column;gap:20px}.profile-page .right-box .form-section h2{font-size:20px;font-weight:600}.profile-page .right-box .form-section .input-box{font-size:14px}.profile-page .right-box .form-section .input-box label{text-transform:capitalize}.profile-page .right-box .form-section .input-box div{margin-top:5px;position:relative}.profile-page .right-box .form-section .input-box div input{width:100%;background-color:var(--input-background);outline:none;padding:12px;border-radius:10px}.profile-page .right-box .form-section .input-box div svg{position:absolute;top:50%;right:15px;transform:translateY(-50%)}.profile-page .right-box .form-section button{background-color:var(--primary-color);color:#fff;border-radius:40px;padding:10px 30px}@media(max-width:768px){.profile-page{flex-direction:column;padding:0 0 70px}.profile-page .left-box .background-link{border-radius:0 0 20px 20px;background:linear-gradient(1turn,#2f4f6f 26%,#3181b7 94%);box-shadow:0 6px 12px -2px rgba(50,50,93,.25),0 3px 7px -3px rgba(0,0,0,.3);padding:80px 20px}.profile-page .left-box .box{margin-top:-60px}.profile-page .left-box .button-box{flex-direction:row;justify-content:space-between;border-radius:30px;margin:25px 25px 0}.profile-page .left-box .button-box button{min-width:150px;text-align:center;border-radius:30px;padding:10px}.profile-page .right-box{padding:25px;min-height:fit-content}}