/* ==========================================================================
   GLOBAL RESPONSIVE STYLESHEET FOR ALL DEVICES
   (Mobile: 320px-480px, Phablet: 481px-767px, Tablet: 768px-1199px, Desktop: 1200px+)
   ========================================================================== */

/* 1. Global Viewport and Overflow Fixes */
html, body {
    overflow-x: clip !important;
    max-width: 100vw;
    width: 100%;
    -webkit-text-size-adjust: 100%;
}

img, video, iframe, svg {
    max-width: 100%;
    height: auto;
}

/* Prevent iOS Safari auto-zoom on input focus */
@media (max-width: 767px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="search"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* 2. Responsive Header & Navigation */
@media (max-width: 1199px) {
    header.header-1 .main-header-wraper {
        top: 0 !important;
        position: fixed !important;
        left: 0;
        width: 100%;
        z-index: 1030;
        padding: 12px 15px !important;
        background-color: #ffffff !important;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    }

    .top-header {
        display: none !important;
    }

    .header-gutter {
        top: 0;
        min-height: 90px !important;
        height: 90px;
    }

    .header-gutter.home {
        min-height: 85px !important;
        height: 85px;
    }
}

@media (max-width: 767px) {
    header.header-1 .main-header-wraper {
        padding: 10px 12px !important;
    }

    .header-logo .logo img {
        height: 52px !important;
        width: auto;
    }

    .header-gutter {
        min-height: 82px !important;
        height: 82px;
    }

    .header-gutter.home {
        min-height: 75px !important;
        height: 75px;
    }

    #hamburger {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 22px;
        color: #0E1E36;
        border-radius: 8px;
        background: #f1f5f9;
        transition: all 0.2s ease;
    }

    #hamburger:hover {
        background: #e2e8f0;
    }
}

@media (max-width: 480px) {
    .header-logo .logo img {
        height: 46px !important;
    }

    .header-gutter {
        min-height: 76px !important;
        height: 76px;
    }
}

/* 3. Mobile Navigation Drawer Polish */
.mobile-nav {
    width: 320px;
    max-width: 85vw;
    z-index: 1060 !important;
}

.offcanvas-overlay {
    z-index: 1050 !important;
    cursor: pointer;
}

.mobile-nav .sidebar-nav {
    max-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 50px;
}

.consulter-mobile-nav ul li a {
    padding: 12px 15px !important;
    display: block;
    font-size: 16px;
}

/* 4. Banner & Hero Carousel Responsiveness */
#bannerCarousel {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.banner-carousel-prev,
.banner-carousel-next {
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 46px !important;
    height: 46px !important;
    background-color: rgba(14, 30, 54, 0.4) !important;
    border-radius: 50% !important;
    border: none !important;
    margin: 0 15px !important;
    opacity: 0.8 !important;
    transition: all 0.3s ease !important;
    z-index: 5 !important;
}

.banner-carousel-prev:hover,
.banner-carousel-next:hover {
    background-color: rgba(45, 46, 131, 0.85) !important;
    opacity: 1 !important;
}

@media (max-width: 991px) {
    .banner {
        padding: 140px 0 90px !important;
        min-height: 520px;
    }

    .banner .title {
        font-size: 34px !important;
        line-height: 1.25 !important;
    }
}

@media (max-width: 767px) {
    .banner {
        padding: 100px 0 70px !important;
        min-height: 440px;
        background-position: 65% center !important;
    }

    .banner .title {
        font-size: 26px !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }

    .banner .description p {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .banner-carousel-prev,
    .banner-carousel-next {
        width: 36px !important;
        height: 36px !important;
        margin: 0 8px !important;
    }

    .banner-carousel-prev span,
    .banner-carousel-next span {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 480px) {
    .banner {
        padding: 85px 0 55px !important;
        min-height: 380px;
    }

    .banner .title {
        font-size: 22px !important;
    }

    .banner .theme-btn {
        padding: 12px 24px !important;
        font-size: 13px !important;
    }

    .banner-carousel-prev,
    .banner-carousel-next {
        display: none !important; /* Swipe gesture available */
    }
}

/* 5. Home Page Sections & Sliders */
@media (max-width: 767px) {
    .employee-friendly {
        padding-top: 35px !important;
    }

    .employee-friendly .container.mt-5 {
        margin-top: 15px !important;
    }

    .employee-friendly__slider {
        margin-top: 20px !important;
    }

    .competitive-edge {
        padding: 40px 0 !important;
    }

    .competitive-edge__item {
        margin-bottom: 20px;
    }

    /* Slick sliders container overflow guard */
    .slick-slider,
    .slick-list,
    .slick-track {
        max-width: 100% !important;
    }
}

/* 6. Forms & Candidate / Employer Pages */
.contact-form__header {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

@media (max-width: 575px) {
    .contact-form__header {
        justify-content: center;
        margin-bottom: 20px !important;
    }

    .contact-form__header .theme-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
        display: inline-flex;
    }

    .contact-form form button[type="submit"],
    .contact-form form .btn-primary,
    .contact-form form .theme-btn {
        width: 100%;
        padding: 14px 20px;
    }
}

/* 7. Ceramic Landing Pages Responsiveness */
@media (max-width: 991px) {
    .city-hero-banner {
        padding: 60px 0 50px !important;
    }

    .city-hero-title {
        font-size: 34px !important;
    }

    .stats-strip {
        margin-top: -30px !important;
        padding: 20px 15px !important;
    }

    .stat-number {
        font-size: 28px !important;
    }
}

@media (max-width: 767px) {
    .city-hero-banner {
        padding: 45px 0 40px !important;
    }

    .city-hero-title {
        font-size: 26px !important;
        line-height: 1.3 !important;
    }

    .city-hero-desc {
        font-size: 15px !important;
        margin-bottom: 20px !important;
    }

    .city-badge {
        font-size: 12px !important;
        padding: 4px 14px !important;
        margin-bottom: 14px !important;
    }

    .stats-strip {
        margin-top: -20px !important;
        border-radius: 12px !important;
        padding: 15px 10px !important;
    }

    .stat-item {
        border-right: none !important;
        border-bottom: 1px dashed #e2e8f0;
        padding: 12px 5px !important;
    }

    .stat-item:last-child {
        border-bottom: none !important;
    }

    .stat-number {
        font-size: 24px !important;
    }

    .stat-label {
        font-size: 12px !important;
    }

    .job-card {
        padding: 20px 16px !important;
        margin-bottom: 20px;
    }

    .job-card-title {
        font-size: 18px !important;
    }

    .feature-box {
        padding: 20px 16px !important;
        margin-bottom: 20px;
    }

    .feature-icon-wrapper {
        width: 48px !important;
        height: 48px !important;
        font-size: 20px !important;
        margin-bottom: 14px !important;
    }

    .cluster-badge {
        font-size: 12px !important;
        padding: 6px 12px !important;
        margin: 3px 4px 6px 0 !important;
    }

    .faq-accordion .accordion-button {
        font-size: 15px !important;
        padding: 14px 16px !important;
    }
}

@media (max-width: 480px) {
    .city-hero-title {
        font-size: 22px !important;
    }

    .city-hero-banner .btn {
        width: 100%;
        margin-bottom: 10px;
    }
}

/* 8. Common Inner Pages Page-Banner */
@media (max-width: 767px) {
    .page-banner {
        padding-top: 40px !important;
        padding-bottom: 30px !important;
    }

    .page-banner .page-title h1 {
        font-size: 26px !important;
    }

    .page-banner__media {
        margin-top: 20px !important;
        text-align: center;
    }

    .breadcrumb {
        font-size: 13px !important;
    }
}

/* 9. Footer & Copyright Bar */
@media (max-width: 767px) {
    .footer {
        padding-top: 50px !important;
    }

    .footer-widget {
        margin-bottom: 30px !important;
    }

    .footer-bottom {
        padding: 20px 0 !important;
        text-align: center;
    }

    .footer-bottom .row {
        flex-direction: column-reverse;
        gap: 15px;
    }

    .footer-bottom .social-profile ul {
        justify-content: center;
    }
}

/* 10. Table Responsiveness */
.table-responsive-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}