*{margin:0; padding:0;}
.w-100{width:100%;}
body{background:#f5f7fb;}
.login-page {background-color: #fff;}
.login-page .container{margin: 0 auto; width: 100%; max-width: 1440px; display:flex; min-height:100vh; padding: 50px 0px; gap: 110px;}
.login-page .login-left{width:50%; display:flex; align-items:center; justify-content:center; background:#ffffff; padding:20px;}
.login-page .login-box{width:100%; max-width:580px;}
.login-page .login-top-sec h1{font-size: 32px; line-height: 42px; color: #1A1A1A; font-family: "Inter", sans-serif; font-weight: 600; padding: 15px 0px;}
.login-page .login-top-sec p{color: #6B7280; font-size: 14px; line-height: 24px; font-family: "Inter", sans-serif; font-weight: 400;}
.login-page .input-group{margin-bottom:20px;}
.login-page .input-group label{font-size: 16px; line-height: 26px; color: #1A1A1A; font-family: "Inter", sans-serif; font-weight: 600;}
.login-page .input-group input{width:95%; padding:14px; border:1px solid #ddd; border-radius:8px; font-size:15px; outline:none; margin-top: 5px; font-weight: 400; font-family: "Inter", sans-serif;}
.login-page .input-group input:focus{border-color:#2563eb;}
.login-page .login-options{display:flex; justify-content:space-between; align-items:center; margin-bottom:25px; font-size:14px; float:right;}
.login-page .login-options a{color: #2563eb; font-size: 14px; line-height: 24px; font-family: "Inter", sans-serif; font-weight: 500; text-decoration: none;  text-align: right;}
.login-page .login-btn{border: 1px #2563eb solid; width: 100%; padding: 14px; background: #2563eb; color: #fff; border-radius: 8px; font-size: 14px; cursor: pointer; font-family: "Inter", sans-serif; font-weight: 600;}
.login-page .login-btn:hover{background: transparent; color:#2563eb; border:1px #2563eb solid;}
.login-page .login-right{width:50%;}
.login-page .login-right img{width:100%; height:877px; object-fit:cover; border-radius: 20px;}
.login-page .password-field-sec{position: relative;}
.login-page .password-field-sec i{position: absolute; right: 25px; top: 22px;}
.login-page .login-top-sec{text-align:center; margin-bottom:10px;}
.login-page .app-sec{margin-top: 24px; display: flex; align-items: end; justify-content: space-between; box-shadow: 0px 18px 22.6px -6px rgba(0, 0, 0, 0.25); padding: 24px; border-radius: 12px;}
.login-page .app-sec h4{font-size: 18px; line-height: 28px; color: #000; font-family: "Inter", sans-serif; font-weight: 500;}
.login-page .app-sec p{color: #1A1A1A; font-size: 12px; line-height: 24px; font-family: "Inter", sans-serif; font-weight: 400; padding: 0px 0px 10px 0px;}
.login-page .app-sec .app-img{gap: 10px; display: grid; grid-template-columns: 1fr 1fr;}
.login-page .dotted-line{border-bottom: 1px #E2E2E2 dashed; padding-bottom: 24px;}
.login-page .call-sec{text-align: center; border: 1px #E2E2E2 solid; border-radius: 8px; padding: 12px;}
.login-page .login-contact p{text-align: center; color: #6B7280; font-size: 14px; line-height: 24px; font-family: "Inter", sans-serif; font-weight: 400; padding: 5px 0px;}
.login-page .login-contact .call-sec p{padding:0; color: #1A1A1A; display: flex; align-items: center; justify-content: center;}    
.login-page .login-contact .call-sec.call-top{margin-top: 24px;}
.login-page .login-contact span a{font-size: 16px; line-height: 26px; text-decoration: none; font-family: "Inter", sans-serif; font-weight: 600; color: #2563eb; margin-left: 5px;}
.login-page .login-contact .call-sec p img{margin-right: 5px;}
.login-page a:hover, .login-page .call-sec :hover{color:#000;}
.login-page .forget-pwd .signup{text-align: left;}

@media(max-width:1680px){
    .container{max-width: 90% !important;}
}

@media(max-width:1299px) and  (min-width:1200px){
  .login-page .container{gap: 50px;}
}

@media(max-width:1199px) and  (min-width:1025px){
  .login-page .container{gap: 20px;}
  .login-page .login-left{padding-left: 0;}
}
@media (max-width: 1024px) and (min-width: 768px) {
    .login-page .container{gap: 10px;}
    .login-page .login-left{padding-left: 0;}
    .login-page .login-left {padding: 0px 20px;}
}

@media(max-width:991px){

.login-page .login-wrapper{flex-direction:column;}
.login-page .login-left, .login-page .login-right{ width:100%;}
.login-page .login-right img{height:300px;}
.login-page .login-left{padding:20px 20px;}
}

@media(max-width:767px){
    .login-page .container{flex-direction: column; gap:0; padding: 40px 10px;}
    .login-page .login-left {padding: 0;}
    .login-page .input-group input {width: 93%;}
    .login-page .login-right img{margin-top:20px;}
    .login-page .login-contact span a {font-size: 14px; line-height: 25px;}
    .login-page .login-top-sec h1 {font-size: 28px; line-height: 38px; padding: 10px 0px;}
    .container {max-width: 85% !important;}
}