/* Tablet */

@media (max-width: 1024px) {

    .header-container {

        padding: 1rem;

    }

    

    .nav-menu {

        gap: 1rem;

    }

    

    .hero-title {

        font-size: 2.5rem;

    }

    

    .subtitle {

        font-size: 2rem;

    }

    

    .recruiter-spotlight {

        grid-template-columns: 1fr;

        gap: 2rem;

    }

    

    .recruiter-image {

        height: 300px;

    }

    

    .travel-services {

        grid-template-columns: 1fr;

        gap: 2rem;

    }

    

    .services-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    

    .history-content {

        grid-template-columns: 1fr;

    }

    

    .cta-buttons {

        flex-direction: column;

        align-items: center;

    }

}



/* Mobile */

@media (max-width: 768px) {

    .desktop-nav,

    .btn-contact.desktop-only,

    .btn-login,

    .btn-register {

        display: none !important;

    }

    

    .mobile-only {

        display: flex !important;

    }

    

    .menu-toggle {

        margin-right: auto;

        margin-left: 1rem;

    }

    

    .header-actions {

        gap: 0.5rem;

    }

    

    .hero-title {

        font-size: 2rem;

    }

    

    .subtitle {

        font-size: 1.5rem;

    }

    

    .hero-buttons {

        flex-direction: column;

        align-items: stretch;

    }

    

    .btn-large {

        min-width: auto;

        width: 100%;

    }

    

    .recruitment-info {

        grid-template-columns: 1fr;

    }

    

    .services-grid {

        grid-template-columns: 1fr;

    }

    

    .service-features {

        grid-template-columns: 1fr;

    }

    

    .values-grid {

        grid-template-columns: 1fr;

    }

    

    .companies-grid {

        flex-direction: column;

        align-items: center;

    }

    

    .company-logo {

        width: 150px;

        height: 80px;

    }

}



/* Small Mobile */

@media (max-width: 480px) {

    .logo-name {

        font-size: 1.2rem;

    }

    

    .logo-subname {

        font-size: 0.6rem;

    }

    

    .hero-section {

        padding: 2rem 1rem;

    }

    

    .recruiter-message {

        padding: 1.5rem;

    }

    

    .message-icon {

        width: 60px;

        height: 60px;

        font-size: 1.5rem;

    }

    

    .mobile-sidebar {

        width: 100%;

    }

}