@media (min-width: 768px) and (max-width: 1299px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding: 0.5rem 0.5rem !important;
    }
}

@media(max-width:768px) {
    .topbar {
        display: none;
    }

    .slicknav_nav .slicknav_row,
    .slicknav_nav li a {
        padding: 15px 20px;
        font-size: 20px;
    }

    .slicknav_menu ul {
        margin: 15px 0;
    }

    .slicknav_arrow:after {
        font-size: 18px;
    }

    .hero-swiper .hero-counter-box {
        margin: 0px 8px 0px 10px;
    }

    /* Hide the desktop right container block */
    .projects-preview {
        display: none !important;
    }

    /* Keep all mobile wrappers visible regardless of rotation state */
    .project-tab .mobile-preview-container {
        display: block !important;
        margin-top: 15px;
        width: 100%;
    }

    /* Force the cloned structure to show up explicitly */
    .mobile-preview-container .project-link,
    .mobile-preview-container .preview-image {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .mobile-preview-container img {
        width: 100%;
        height: auto;
        border-radius: 8px;
    }

    /* 1. Hide the desktop right-side preview column completely */
    .projects-wrapper .projects-preview {
        display: none !important;
    }

    /* 2. Force the tabs wrapper to act as a stacked, single column block */
    .projects-tabs {
        display: flex;
        flex-direction: column;
        gap: 30px;
        /* Spacing between each project item */
    }

    /* 3. Force ALL tabs to display as active structurally on mobile */
    .projects-tabs .project-tab {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: none;
        /* Disables clicking/page-jumping on the tab wrapper itself */
    }

    /* 4. Allow the anchor tags inside tabs to be clickable normally */
    .projects-tabs .project-tab a {
        pointer-events: auto;
        display: block;
    }

    /* 5. Show the mobile-injected containers for all blocks */
    .projects-tabs .project-tab .mobile-preview-container {
        display: block !important;
        margin-top: 15px;
        width: 100%;
    }

    .mobile-preview-container .project-link {
        display: block !important;
        pointer-events: auto;
        /* Ensures "Read More" links work perfectly */
    }

    .mobile-preview-container img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 8px;
        /* Smooth rounded corners for mobile UI */
    }


    /* The main sidebar wrapper now handles fixed positioning and z-indexing */
    .page-single-sidebar.sticky-active {
        position: fixed;
        top: 15.5%;
        /* Safe distance spacing from the top screen border */
        left: 0;
        width: 100%;
        padding: 0 15px;
        /* Ensures inline content lines up perfectly with container grids */
        z-index: 99;
        /* Higher priority layering stack depth */
    }

    .page-category-list {
        background: #fff;
        border: 1px solid #e1e1e1;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        width: 100%;
        transition: box-shadow 0.3s ease;
    }

    /* Add a clean prominent shadow block only when sticky is activated */
    .page-single-sidebar.sticky-active .page-category-list {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }

    /* Keep your existing style rules for the h3 dynamic element */
    .page-category-list h3 {
        background: #d9231d;
        color: #fff !important;
        margin: 0 !important;
        padding: 15px 20px;
        font-size: 18px;
        cursor: pointer;
        position: relative;
        user-select: none;
    }

    .page-category-list h3::after {
        content: '▼';
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 12px;
        transition: transform 0.3s ease;
    }

    .page-category-list.menu-open h3::after {
        transform: translateY(-50%) rotate(180deg);
    }

    /* Root inner wrapper dynamic list */
    .page-category-list>ul {
        display: block;
        /* Force the menu to show INITIALLY on page load */
        padding: 15px !important;
        margin: 0 !important;
        background: #fdfdfd;
        border-top: 1px solid #eee;
    }

    .video-wrapper {
        margin-bottom: 30px;
    }

    .core-work figure {
        margin-top: 30px;
    }
}