/* Desktop Large / Standard Elementor Editor fixes */
body.elementor-editor-active .zolar-header {
    position: relative; /* Sometimes fixed headers conflict with Elementor editor */
    top: 0;
}
body.elementor-editor-active .zolar-topbar {
    position: relative;
}
body.elementor-editor-active .zolar-hero {
    padding-top: 60px; /* Adjust padding in editor since header is relative */
}

/* Tablet (1024px and below) */
@media (max-width: 1024px) {
    .zolar-navigation {
        display: none; /* Hide main nav on tablet/mobile */
    }
    .zolar-mobile-menu-toggle {
        display: block;
    }
    .zolar-btn-header {
        display: none; /* Hide header CTA to save space, move to mobile menu */
    }
    .zolar-hero-content {
        max-width: 90%;
    }
}

/* Mobile (768px and below) */
@media (max-width: 768px) {
    .zolar-topbar {
        display: none; /* Hide topbar on smaller screens */
    }
    .zolar-header {
        top: 0;
        padding: 15px 0;
    }
    .zolar-single-portfolio-wrap {
        padding: 60px 15px;
    }
    .zolar-portfolio-grid {
        grid-template-columns: 1fr;
    }

    /* 7. Journey Block */
    .zolar-journey-header h2 {
        font-size: 36px;
    }
    .zolar-journey-steps {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }
    .zolar-journey-step {
        flex: 1 1 100%;
        max-width: 300px;
    }
    .zolar-journey-arrow {
        display: none !important;
    }
    .zolar-journey-footer {
        flex-direction: column;
        gap: 20px;
    }
    .zolar-hero {
        padding-top: 100px;
        min-height: 600px;
        background-position: 70% center; /* Adjust worker position */
    }
    .zolar-hero-overlay {
        background: linear-gradient(to bottom, rgba(8,21,29,0.7) 0%, rgba(8,21,29,0.5) 100%);
    }
    .zolar-hero-title {
        margin-bottom: 15px;
    }
    .zolar-mobile-menu-content {
        width: 100%;
        max-width: none;
    }
}

/* Small Mobile (430px and below) */
@media (max-width: 430px) {
    .zolar-hero-eyebrow-line {
        width: 20px;
    }
    .zolar-hero-eyebrow-text {
        font-size: 12px;
    }
}