@import url('https://cdn.jsdelivr.net/npm/@vetixy/circular-std@1.0.0/dist/index.min.css');

body{padding: 0; margin: 0; font-family: 'CircularStd', sans-serif;}
#container {color: white;background:url("../images/login-bg3.png"); background-repeat: no-repeat; background-size: cover; background-position: center; height: 100vh; display: flex;justify-content: center; align-items: center;}
#content {flex: 0 0 540px}
.login-data{padding: 50px; border-radius: 40px; background: #fff; color: #333; text-align: center;}
.tagnine{font-size: 24px; margin-top: 5px;}
.login-form{text-align: left;}
.login-form p{padding-top: 40px;font-size: 20px;font-weight: bold;}
.login-form  input{padding: 10px 20px 10px 20px; border-radius: 20px; border: 1px solid #333; opacity: 0px; font-size: 16px; font-weight: 500; line-height: 25px; text-align: left; width:100%; margin-bottom: 20px;}
.login-form  input:focus{outline: none;}
.forget{text-align: right; font-size: 16px;text-decoration: underline; margin-bottom: 20px}
.forget a{color: #333;}
.login-btn{padding: 10px 20px 10px 20px; border-radius: 50px; width: 100%; color: #fff; background: #634FA8; text-align: center;border:none}

#unit-container {color: white; background:#f6f6f6 url("../images/bg4.png"); width: 100%;height:79vh; display: flex;padding: 5% 0}  
.logo-container{padding: 17px 25px; background: #fff; border-radius: 20px;display: inline-block;}
.light-blue-bg{background: #EAEBF9;padding: 3% 5%;}
.serch{background: #fff; border-radius: 20px 0 0 20px;display: inline-block;width: 61%;padding: 14px 20px;}
.serch-icon{display: inline-block;}
.serch input{display: inline-block; width: 90%; border: none;}
.serch input:focus{outline: none;}
.client-details{background: url(images/blue-bg.png) no-repeat;display: inline-block;padding:0.75% 1%;margin-left: -5px;border-radius: 0 20px 20px 0;}
.mail-icon,.notification-icon{display: inline-block; padding: 5px 15px;}
.user-icon{display: inline-block;float:right;}
.user-icon img{border-radius: 35px;}
.user-name-cont{display: inline-block; padding: 5px 15px; font-size: 14px; color: #fff;line-height: 14px;position: relative;width: 145px;}
.user-name{position: absolute;top: -7px;}
.user-name span{font-size: 12px;line-height: 9px;}
.unit{background: #fff; border-radius: 60px;width: 300px;margin: 0 auto; webkit-box-shadow: 0px 0px 27px 0px rgba(99,79,168,0.18);moz-box-shadow: 0px 0px 27px 0px rgba(99,79,168,0.18);box-shadow: 0px 0px 27px 0px rgba(99,79,168,0.18);text-align: center;padding: 60px;color: #333;font-size: 20px;line-height: 25px;}
.container{max-width:1012px!important ;}
@media screen and (max-device-width: 480px) and (orientation: portrait) {
    .serch{width: 40%;}
    .serch input{width: 88%;} 
    .light-blue-bg{padding: 5%}
    #content {flex: 0 0 800px;}
    .login-data{padding: 80px 50px 80px 50px;}
    .login-form  input{padding: 25.5px 20px 25.5px 20px;}
}