/* ================= LOGIN PAGE ================= */

.login-wrapper{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:90vh;
  gap:80px;
  padding:60px 5%;
}

/* LEFT IMAGE */
.login-visual{
  flex:1;
  display:flex;
  justify-content:center;
}

.image-box{
  background:#EBE6DC;
  width:100%;
  max-width:550px;
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
}

.image-box img{
  width:100%;
  height:auto;
}

/* RIGHT FORM */
.login-content{
  flex:1;
  display:flex;
  justify-content:flex-start;
}

.login-form-box{
  max-width:400px;
  width:100%;
}

.auth-title{
  font-size:36px;
  margin-bottom:10px;
}

.auth-subtitle{
  margin-bottom:40px;
}

.input-underline-group{
  margin-bottom:30px;
  border-bottom:1px solid #7D8184;
}

.input-underline-group input{
  width:100%;
  border:none;
  padding:10px 0;
  font-size:16px;
  outline:none;
  background:transparent;
}

.auth-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.btn-login-blue{
  background:#4A7FD4;
  color:#fff;
  border:none;
  padding:14px 40px;
  border-radius:4px;
  cursor:pointer;
}

.forgot-link-red{
  color:#E07575;
  text-decoration:none;
}

/* ============ MOBILE ============ */
@media(max-width:768px){

  .login-wrapper{
    flex-direction:column;
    padding-top:30px;
    margin-top: 111px;
  }

  /* 🔥 THIS FIXES YOUR IMAGE ISSUE */
  .login-visual{
    display:none;
  }

  .login-content{
    width:100%;
    justify-content:center;
  }

  .login-form-box{
    max-width:100%;
    padding:0 20px;
  }

  .auth-actions{
    flex-direction:column;
    gap:15px;
  }
}


.main-footer{
  width:100%;
  border-top:1px solid #f1f1f1;
  margin-top:40px;
}

/* top / middle / bottom centered */
.footer-top,
.footer-middle,
.footer-bottom{
  display:flex;
  justify-content:center;
}

.footer-top .container,
.footer-middle .container,
.footer-bottom .container{
  width:100%;
  max-width:1050px;
  padding:0 15px;
}

/* ---------- top ---------- */
.footer-top{
  background:#fafafa;
  padding:40px 0;
}

.footer-brand-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.footer-brand-row .logo{
  font-size:24px;
  font-weight:700;
}

.social-icons{
  display:flex;
  gap:20px;
}
.social-icons a{
  font-size:22px;
  color:#23a6f0;
}

/* ---------- middle ---------- */
.footer-middle{
  padding:70px 0;
}

.footer-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:30px;
}

.footer-col h5{
  font-size:16px;
  font-weight:700;
  margin-bottom:20px;
}
.footer-col ul{
  list-style:none;
}
.footer-col ul li{
  margin-bottom:10px;
}
.footer-col ul li a{
  text-decoration:none;
  color:#737373;
  font-size:14px;
  font-weight:600;
}

/* newsletter */
.subscribe-form{
  display:flex;
  height:50px;
}
.subscribe-form input{
  flex:1;
  border:1px solid #e6e6e6;
  border-radius:5px 0 0 5px;
  padding:0 15px;
}
.subscribe-form button{
  border:none;
  background:#23a6f0;
  color:#fff;
  padding:0 20px;
  border-radius:0 5px 5px 0;
}

/* ---------- bottom ---------- */
.footer-bottom{
  background:#fafafa;
  padding:25px 0;
}
.footer-bottom p{
  font-size:14px;
  font-weight:700;
  color:#737373;
}

/* ---------- footer mobile ---------- */
@media(max-width:992px){
  .footer-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:600px){
  .footer-grid{
    grid-template-columns:1fr;
    text-align:center;
  }
  .footer-brand-row{
    flex-direction:column;
    gap:20px;
    text-align:center;
  }
  .footer-bottom p{
    text-align:center;
  }
  
  .main-footer{
    margin-top: -100px;
  }
}