/* Mobile Optimization */
@media (max-width: 991px) {
    .banner-section {
        height: 55vh !important;
    }

    .why-invest.pt-120 {
        padding-top: 40px !important;
    }

    .navbar-brand.logo img {
        max-width: 200px;
        max-height: 40px;
    }

    .header .header-bottom {
        background-color: #094903 !important;

    }
    .play-btn {
        left: -4% !important;
    }


    .account-form {
        left: 0 !important;
        padding: 0px 0px !important;
    }

    .top_image_small_device{
        display: block;
        margin-top: -77px;
    }

    .account-form .account-form__header, 
    .account-form .account-form__body, 
    .account-form .account-form__footer  {
        padding: 0 24px;
    }
    .account-form__header .mb-4{
        margin-bottom: 5px !important;
        margin-top: 10px !important;
    }
    .account-form-headings{
        display: none !important;
    }

    .account-form__body .form--label {
        display: none !important;
    }
    .form-control::after {
        content: "Enter your name";
        position: absolute;
        color: #f90000;
    }
    .d-small-none{
        display: none;
    }

    .account-social-login__link {
        gap: 0px;
        padding: 6px 6px;
    }
    .account-social-login__link i{
        margin-right: 4px;
    }
    .top_image_small_device {
        position: relative; /* Important: gives context to ::before */
        display: block;
        overflow: hidden;
    }
    
    .top_image_small_device::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: "";
        /* background: linear-gradient(-240deg, rgba(0, 0, 0, 0.2) 42.64%, rgba(16, 72, 40, 0.5) 69.27%); */
        z-index: 1;
        pointer-events: none; /* Don't block clicks if needed */
    }
    
    /* Ensure the image is styled correctly behind the gradient */
    .top_image_small_device img {
        width: 100%;
        height: auto;
        display: block;
        z-index: 0;
        position: relative;
    }
    
    .account-right .account-logo img {
        max-width: 120px;
    }
    .form--control, .form-select {
       
        padding: 7px;
    }
    .account-form .btn--action {
        padding-top: 5px;
        padding-bottom: 8px;
    }
    .top_image_small_device {
        position: relative;
        display: block;
        margin-top: -40px;
        height: 300px; /* Set the visible crop height */
        overflow: hidden;
    }
    
    .top_image_small_device img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
        object-position: top; /* Show top part */
    }
    .account-form__header{
        margin: 20px auto;
    }
    .why-invest-points {

        grid-template-columns: repeat(2, 1fr) !important;
    }
    .why-invest__content{
        text-align: center;
    }
    .account{
        width: 100% !important;
        overflow: hidden;
    }
    .banner-video{
        height: 115% !important;
    }
    .my-sm-none{
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    #dashboard-offcanvas-sidebar{
        background-color: #063d01 !important;
    }
    #offer-details-offcanvas-sidebar{
        background-color: #ffffff !important;
    }
    .navbar-toggler.header-button {
        font-size: 1.8rem !important;
    }
    .offcanvas-sidebar.offcanvas-sidebar--dashboard {
        max-width: 230px;
    }
    .user-info__name {
        color: #8e8a8a;
    }
    .offcanvas-sidebar.offcanvas-sidebar--dashboard .offcanvas-sidebar-menu__item.active .offcanvas-sidebar-menu__link, .offcanvas-sidebar.offcanvas-sidebar--dashboard .offcanvas-sidebar-menu__item.active .offcanvas-sidebar-menu__btn {
        color: hsl(115.1, 97.2%, 42%);
        background-color: hsla(114.8, 100%, 50%, 0.2);
    }
}