@media (min-width: 1024px) { 
    body.main-home {
      max-width: 768px;
      margin: 0 auto !important;}
    
    }
.app-page .banner-carousel .flickity-slider{    
  transform: translate(50%, -10%) !important;
}
.banner-carousel .flickity-slider{    
  transform: translate(50%, 0%) !important;
}
.app-area .banner-carousel .flickity-viewport{
  height: 440px !important;
  cursor: pointer !important;
}
.modal-header .close {
  padding: 1rem;
  margin: 1rem 0rem 1rem auto;
}


 @media (max-width: 768px){
    html, body {
        height: auto !important;
        min-height: 100% !important;
        overflow-y: auto !important; 
        overflow-x: hidden !important;
    }

    .login-screen .mobile-area.home-page, .login-screen .mobile-area {
        display: block !important; /* Override flex */
        padding: 40px 0 !important;
        height: auto !important;
        min-height: 100vh !important;
        overflow-y: visible !important;
    }
    
    .login-screen .main-area {
        margin: 40px auto !important;
        width: 85% !important;
        max-width: 400px !important;
        height: auto !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* softer shadow */
    }

    /* Ensure close button isn't cut off */
    .close {
        right: 15px !important;
        top: 15px !important;
    }

    #forgot-password .modal-dialog {
        margin: 10px;
        max-width: none;
        height: auto !important;
    }
    
    #forgot-password .modal-content {
        height: auto !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
    }
    
    /* Ensure section.home doesn't trap scroll */
    section.home {
        height: auto !important;
        min-height: 100% !important;
        overflow: visible !important;
    }
 }

 @media (max-width: 480px){
    .login-screen .main-area {
        padding: 24px 20px;
    }
 }