/* Tablet View (1024px and below) */
@media (max-width: 1024px) {
    .nav-links {
        gap: 0 10px;
    }
    .nav_bar_text {
        padding-right: 15px;
        font-size: 14px;
    }
}

/* Mobile View (767px and below) */
@media (max-width: 767px) {
    /* Global */
    body {
        overflow-x: hidden;
        font-size: 14px;
        line-height: 1.4;
    }
    
    /* Tables */
    table, tbody, tr {
        display: block !important;
        width: 100% !important;
    }
    
    td {
        display: block !important;
        width: 100% !important;
        /* padding: 10px !important; */
    }
    
    /* Text */
    #text_section span {
        font-size: 24px !important;
        line-height: 1.3;
    }
    
    /* Forms */
    .login_input_class {
        width: 90% !important;
        padding: 10px !important;
        font-size: 16px;
    }
    
    .login_input_table {
        padding: 8px !important;
    }
    
    form.login {
        padding: 0 15px;
    }
    
    form.login table {
        width: 100% !important;
    }
    
    /* Features */
    #elate_features td {
        margin-bottom: 20px;
    }
    
    
    /* Navbar */
    .nav-container {
        flex-wrap: wrap;
    }
    
    .nav-links {
        display: none;
        width: 100%;
        flex-direction: column;
        gap: 10px;
        padding: 15px 0;
    }
    
    .nav-links.active {
        display: flex;
    }
    
    .mobile-menu-btn {
        display: block;
    }
    
    .nav-logo-wrapper {
        padding: 2px 8px !important;
    }
    
    .nav-elate-logo {
        font-size: 24px !important;
    }
    
    .nav-elate-logo sup {
        font-size: 6px !important;
    }
    
    .nav_bar_text {
        padding: 8px 15px;
        font-size: 16px;
        display: block;
    }
    section#text_section {
        margin-left: 40px !important;
    }
    .fa-envelope.username_sign:before {
        position: relative;
        top: 30px;
    }
    .fa-lock:before {
        position: relative;
        top: 30px;
    }
    .elate_logo{
        width: 150px !important;
    }
    .ai_image{
        width: 85% !important;
    }
    .faq_image{
        width: 85% !important;
        margin-left: 25px;
    }
    
    
    
    /* Very small screens */
    @media (max-width: 480px) {
        #text_section span {
            font-size: 20px !important;
        }
        
        .login_input_class {
            width: 85% !important;
        }
        
        section {
            padding: 15px 10px !important;
        }
        
        .nav-elate-logo {
            font-size: 18px !important;
        }
    }
}

/* Desktop (768px and above) */
@media (min-width: 768px) {
    .mobile-menu-btn {
        display: none;
    }
}

/* Mobile-specific styles */
@media (max-width: 992px) {
    /* Hide desktop elements */
    .desktop-only {
        display: none !important;
    }
    
    /* Mobile layout */
    .mobile-footer {
        display: block !important;
        background-color: #123225;
        padding: 20px 15px;
        font-family: Roboto;
        color: #FFFFFF;
    }
    
    .mobile-logo {
        width: 150px;
        margin-bottom: 20px;
    }
    
    .mobile-description {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 25px;
    }
    
    .mobile-section-title {
        font-size: 18px;
        margin: 20px 0 10px 0;
    }
    
    .payment-methods-mobile {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 25px;
    }
    
    .payment-method {
        background-color: #FFFFFF;
        border-radius: 4px;
        padding: 8px;
    }
    
    .payment-method img {
        height: 20px;
        width: auto;
    }
    
    .verification-badges-mobile {
        background-color: #0d3a28;
        border-radius: 10px;
        border: 1px solid #0a7148;
        padding: 15px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 25px;
    }
    
    .verification-badge {
        margin: 5px;
    }
    
    .verification-badge img {
        height: 30px;
        width: auto;
    }
    
    .contact-info-mobile {
        margin-bottom: 25px;
    }
    
    .contact-info-mobile div {
        margin-bottom: 10px;
        font-size: 14px;
    }
    
    .footer-links-mobile {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 15px;
    }
    
    .footer-link-mobile {
        color: #FFFFFF;
        text-decoration: none;
        white-space: nowrap;
    }
    
    .footer-link-mobile:hover {
        color: #FFFF00;
        text-decoration: underline;
    }
    
    .copyright-mobile {
        font-size: 13px;
        text-align: center;
        padding-top: 15px;
        border-top: 1px solid #075a39;
    }
}

/* Hide mobile version on desktop */
.mobile-footer {
    display: none;
}