/* ======================================================
   RESPONSIVE CUSTOM STYLES FOR MOBILE & TABLET
   ====================================================== */

/* ---------- 0. General Reset ---------- */
@media screen and (max-width: 767px) {
    body {
        font-size: 14px;
        line-height: 1.6;
        overflow-x: hidden;
    }

    .wrapper {
        width: 95% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        max-width: 100% !important;
    }

    .page-section {
        padding: 40px 0 !important;
    }

    .section-title,
    .entry-title {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    #page {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    img {
        max-width: 100% !important;
        height: auto !important;
    }

    .btn {
        padding: 8px 18px !important;
        font-size: 12px !important;
        border-radius: 7% !important;
    }

    .entry-content p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    .read-more {
        margin-top: 15px !important;
    }
}

/* ---------- 1. Header & Navigation ---------- */
@media screen and (max-width: 991px) {
    .site-branding {
        min-height: 60px !important;
        padding: 10px 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        flex-direction: column !important;
    }

    .site-title {
        font-size: 18px !important;
        text-align: center !important;
        margin: 5px 0 0 !important;
    }

        .site-title a {
            word-wrap: break-word !important;
            display: block !important;
            font-size: 18px !important;
        }

    .site-description {
        font-size: 12px !important;
        margin-top: 2px !important;
        text-align: center !important;
    }

    .site-logo img {
        max-height: 40px !important;
        margin-right: 0 !important;
        margin-bottom: 5px;
    }

    /* Mobile menu button */
    .menu-toggle {
        height: 45px !important;
        min-width: 40px !important;
        padding: 0 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        float: none !important;
        margin: 0 auto !important;
        position: absolute !important;
        left: 10px !important;
        right: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

        .menu-toggle svg {
            width: 22px !important;
            height: 22px !important;
        }

    .menu-label {
        display: none !important;
    }

    #masthead {
        position: relative !important;
        padding: 0 10px !important;
    }

        /* Mobile menu container */
        #masthead .main-navigation ul.nav-menu {
            max-width: 100% !important;
            width: 100% !important;
            background-color: #1d1d1d !important;
            border-top: 1px solid rgba(225, 225, 225, 0.2) !important;
            margin-top: 0 !important;
            position: absolute !important;
            top: 100% !important;
            left: 0 !important;
            right: 0 !important;
            z-index: 9999 !important;
            overflow: hidden !important;
            transition: max-height 0.4s ease-in-out !important;
        }

    .main-navigation.toggled ul.nav-menu {
        max-height: 500px !important;
        overflow-y: auto !important;
        display: block !important;
    }

    .main-navigation ul.nav-menu > li {
        display: block !important;
        width: 100% !important;
    }

        .main-navigation ul.nav-menu > li > a {
            padding: 10px 15px !important;
            font-size: 13px !important;
            border-bottom: 1px solid rgba(225, 225, 225, 0.1) !important;
            color: #e1e1e1 !important;
            text-align: right !important;
            opacity: 1 !important;
        }

    .main-navigation ul.sub-menu {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        float: none !important;
        display: none !important;
        background-color: rgba(255, 255, 255, 0.05) !important;
    }

        .main-navigation ul.sub-menu li a {
            padding: 8px 30px 8px 15px !important;
            font-size: 12px !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
            text-align: right !important;
            border-left: none !important;
            width: 100% !important;
        }

        .main-navigation ul.sub-menu ul li a {
            padding-right: 45px !important;
        }

    /* Dropdown toggle */
    button.dropdown-toggle {
        width: 40px !important;
        height: 40px !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        position: absolute !important;
    }

        button.dropdown-toggle svg {
            width: 12px !important;
            height: 12px !important;
            fill: #e1e1e1 !important;
        }

    .main-navigation .dropdown-toggle.active > svg {
        transform: rotate(180deg) !important;
    }

    /* Search in mobile menu */
    .main-navigation form.search-form {
        padding: 10px 15px !important;
        border-bottom: 1px solid rgba(225, 225, 225, 0.1) !important;
        position: relative !important;
        min-width: 100% !important;
    }

        .main-navigation form.search-form input.search-field {
            background-color: rgba(255, 255, 255, 0.08) !important;
            border-color: rgba(255, 255, 255, 0.15) !important;
            height: 35px !important;
            font-size: 12px !important;
            color: #fff !important;
            padding: 0 35px 0 12px !important;
            width: 100% !important;
            border-radius: 4px !important;
        }

        .main-navigation form.search-form button.search-submit {
            height: 35px !important;
            right: 15px !important;
            left: auto !important;
            top: 10px !important;
        }

            .main-navigation form.search-form button.search-submit svg {
                fill: #8f8f8f !important;
                width: 16px !important;
                height: 16px !important;
            }

    #search .icon-search {
        display: none !important;
    }

    .menu-open #search {
        display: block !important;
    }

    .menu-open .menu-toggle .icon-close {
        display: block !important;
        width: 18px !important;
        height: 18px !important;
    }

    .menu-open .menu-toggle .icon-menu {
        display: none !important;
    }

    /* Sticky header */
    #masthead.sticky-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
        padding: 0 10px !important;
    }

        #masthead.sticky-header .main-navigation button {
            min-width: 40px !important;
        }

    /* Remove the ::before on mobile */
    .classic-menu .main-navigation ul#primary-menu > li.current-menu-item > a::before,
    .classic-menu .main-navigation ul#primary-menu > li:hover > a::before,
    .classic-menu .main-navigation ul#primary-menu > li:focus > a::before {
        display: none !important;
    }
}

@media screen and (max-width: 480px) {
    .site-branding {
        min-height: 55px !important;
        padding: 5px 0 !important;
    }

    .site-title {
        font-size: 15px !important;
    }

        .site-title a {
            font-size: 15px !important;
        }

    .menu-toggle {
        height: 40px !important;
        min-width: 35px !important;
    }

        .menu-toggle svg {
            width: 18px !important;
            height: 18px !important;
        }

    .main-navigation ul.nav-menu > li > a {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    .main-navigation ul.sub-menu li a {
        padding: 6px 25px 6px 12px !important;
        font-size: 11px !important;
    }
}

/* ---------- 2. Main Slider ---------- */
@media screen and (max-width: 991px) {
    #main-slider {
        padding-top: 10px !important;
    }

        #main-slider .wrapper {
            width: 100% !important;
            padding: 0 !important;
        }

    .slider-image .featured-image {
        padding: 200px 0 !important;
        height: 50vh !important;
    }
}

@media screen and (max-width: 767px) {
    #main-slider .slider-content {
        position: absolute !important;
        bottom: 8% !important;
        left: 0 !important;
        right: 0 !important;
        padding: 0 15px !important;
        max-width: 100% !important;
        text-align: center !important;
        width: 100% !important;
    }

    #main-slider .entry-title {
        font-size: 20px !important;
        margin-bottom: 5px !important;
    }

        #main-slider .entry-title a {
            font-size: 20px !important;
            color: #fff !important;
        }

    #main-slider .entry-content p {
        font-size: 13px !important;
        line-height: 1.5 !important;
        margin-bottom: 8px !important;
        opacity: 0.9 !important;
    }

    #main-slider .slider-content .btn {
        padding: 6px 16px !important;
        font-size: 11px !important;
    }

    #main-slider .slick-dots {
        bottom: 5px !important;
        text-align: center !important;
        right: auto !important;
        left: 0 !important;
    }

        #main-slider .slick-dots li {
            margin: 0 5px !important;
        }

            #main-slider .slick-dots li button:before {
                width: 18px !important;
                height: 2px !important;
            }

    .slider-image .featured-image {
        padding: 130px 0 !important;
        height: 40vh !important;
    }
}

@media screen and (max-width: 480px) {
    #main-slider .entry-title {
        font-size: 17px !important;
    }

        #main-slider .entry-title a {
            font-size: 17px !important;
        }

    .slider-image .featured-image {
        padding: 100px 0 !important;
        height: 35vh !important;
    }

    #main-slider .entry-content p {
        font-size: 12px !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    #main-slider .slider-content {
        bottom: 5% !important;
        padding: 0 10px !important;
    }
}

/* ---------- 3. Services ---------- */
@media screen and (max-width: 991px) {
    .services-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important;
    }

    .service-item {
        height: 280px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }

    .service-header {
        width: 85% !important;
        bottom: -10px !important;
        right: -10px !important;
        padding: 10px !important;
        background: rgba(0, 0, 0, 0.6) !important;
    }

        .service-header a {
            font-size: 14px !important;
        }
}

@media screen and (max-width: 767px) {
    .services-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .service-item {
        height: 220px !important;
    }

    .service-header {
        width: 90% !important;
        bottom: -5px !important;
        right: -5px !important;
        padding: 8px !important;
    }

        .service-header a {
            font-size: 13px !important;
        }

    #our-services .entry-title a {
        font-size: 16px !important;
    }

    .icon-container .fa {
        font-size: 30px !important;
        margin-bottom: 10px !important;
    }
}

@media screen and (max-width: 480px) {
    .service-item {
        height: 180px !important;
    }

    .service-header a {
        font-size: 12px !important;
    }
}

/* ---------- 4. About Us ---------- */
@media screen and (max-width: 991px) {
    #about-us .has-featured-image {
        display: block !important;
        flex-direction: unset !important;
        align-items: unset !important;
    }

        #about-us .has-featured-image .entry-container,
        #about-us .has-featured-image .featured-image {
            width: 100% !important;
            float: none !important;
        }

        #about-us .has-featured-image .entry-container {
            padding: 20px 15px 0 !important;
        }

    #about-us .featured-image {
        padding: 180px 0 !important;
    }

    #about-us .section-title {
        font-size: 22px !important;
    }

    #about-us .btn {
        padding: 8px 18px !important;
        font-size: 12px !important;
    }
}

@media screen and (max-width: 767px) {
    #about-us .featured-image {
        padding: 120px 0 !important;
    }

    #about-us .has-featured-image .entry-container {
        padding: 15px 10px 0 !important;
    }

    #about-us .entry-content p {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    #about-us article.no-featured-image {
        padding: 0 10px !important;
    }
}

/* ---------- 5. Latest Video ---------- */
@media screen and (max-width: 991px) {
    #latest-video {
        padding: 60px 0 !important;
    }

        #latest-video header.entry-header {
            float: none !important;
            max-width: 100% !important;
            border-left: none !important;
            padding-left: 0 !important;
            text-align: center !important;
        }

        #latest-video .section-title {
            font-size: 22px !important;
            margin-bottom: 10px !important;
        }

    .icon-play {
        margin-top: 20px !important;
        display: flex !important;
        justify-content: center !important;
    }

    .popup-video {
        width: 55px !important;
        height: 55px !important;
        line-height: 55px !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding-left: 0 !important;
    }

        .popup-video i {
            font-size: 20px !important;
        }

    .video-text {
        display: block !important;
        margin-left: 0 !important;
        font-size: 13px !important;
        border-left: none !important;
        text-align: center !important;
        margin-top: 10px !important;
    }

        .video-text span {
            padding-left: 0 !important;
        }
}

@media screen and (max-width: 767px) {
    #latest-video {
        padding: 40px 0 !important;
    }

        #latest-video .section-title {
            font-size: 18px !important;
        }

    .popup-video {
        width: 45px !important;
        height: 45px !important;
        line-height: 45px !important;
    }

        .popup-video i {
            font-size: 16px !important;
        }

    #video-popup {
        max-width: 95% !important;
    }
}

/* ---------- 6. Latest Projects ---------- */
@media screen and (max-width: 991px) {
    #latest-projects {
        padding: 40px 0 !important;
    }

        #latest-projects .project-wrapper .wrapper {
            display: block !important;
            margin-bottom: 15px !important;
        }

        #latest-projects .section-header,
        #latest-projects .latest-content,
        #latest-projects .read-more {
            width: 100% !important;
            text-align: center !important;
        }

        #latest-projects .latest-content {
            max-width: 100% !important;
            margin-bottom: 8px !important;
        }

            #latest-projects .latest-content p {
                font-size: 13px !important;
            }

        #latest-projects .read-more {
            margin-top: 0 !important;
        }

    .project-slider {
        padding-top: 15px !important;
    }

    #latest-projects .slick-list {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
    }

    #latest-projects article.slick-item {
        padding: 100px 12px !important;
        margin: 0 3px !important;
        border-radius: 6px !important;
        min-height: 200px !important;
    }

        #latest-projects article.slick-item .entry-container {
            position: absolute !important;
            top: 15px !important;
            left: 12px !important;
            right: auto !important;
            display: block !important;
        }

    #latest-projects article .entry-title {
        font-size: 14px !important;
        line-height: 1.3 !important;
        max-width: 150px !important;
        margin-bottom: 5px !important;
    }

        #latest-projects article .entry-title a {
            font-size: 14px !important;
            color: #fff !important;
        }

    #latest-projects article .count {
        font-size: 18px !important;
        top: -20px !important;
        left: 12px !important;
        right: auto !important;
    }

    #latest-projects .slick-prev,
    #latest-projects .slick-next {
        top: auto !important;
        bottom: -35px !important;
        z-index: 10 !important;
        transform: translateY(0) !important;
    }

    #latest-projects .slick-prev {
        left: 30% !important;
        right: auto !important;
    }

    #latest-projects .slick-next {
        right: 30% !important;
        left: auto !important;
    }

        #latest-projects .slick-prev::before,
        #latest-projects .slick-next::before {
            width: 16px !important;
            height: 16px !important;
        }

    #latest-projects .seperator {
        display: none !important;
    }
}

@media screen and (max-width: 767px) {
    #latest-projects article.slick-item {
        padding: 70px 10px !important;
        min-height: 160px !important;
    }

    #latest-projects article .entry-title {
        font-size: 12px !important;
        max-width: 120px !important;
    }

        #latest-projects article .entry-title a {
            font-size: 12px !important;
        }

    #latest-projects article .count {
        font-size: 14px !important;
        top: -15px !important;
        left: 10px !important;
    }

    #latest-projects .slick-prev {
        left: 25% !important;
    }

    #latest-projects .slick-next {
        right: 25% !important;
    }

    #latest-projects article.slick-item .entry-container {
        top: 10px !important;
        left: 10px !important;
    }
}

/* ---------- 7. Latest Posts / Blog ---------- */
@media screen and (max-width: 991px) {
    #latest-posts {
        padding: 40px 0 !important;
    }

        #latest-posts .blog-wrapper {
            display: block !important;
            margin-bottom: 15px !important;
        }

        #latest-posts .section-header,
        #latest-posts .latest-content,
        #latest-posts .read-more {
            width: 100% !important;
            text-align: center !important;
        }

        #latest-posts .latest-content {
            max-width: 100% !important;
            margin-bottom: 8px !important;
        }

            #latest-posts .latest-content p {
                font-size: 13px !important;
            }

        #latest-posts .posts-wrapper.col-3 .hentry {
            width: 50% !important;
            float: left !important;
            padding: 15px 10px !important;
            min-height: 250px !important;
            border: none !important;
            position: relative !important;
            background-size: cover !important;
            background-position: center !important;
            border-radius: 6px !important;
            overflow: hidden !important;
            margin-bottom: 10px !important;
        }

            #latest-posts .posts-wrapper.col-3 .hentry .entry-container {
                position: absolute !important;
                bottom: 0 !important;
                left: 0 !important;
                right: 0 !important;
                top: auto !important;
                padding: 12px !important;
                background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent) !important;
                color: #fff !important;
                border-radius: 0 0 6px 6px !important;
                transform: none !important;
            }

            #latest-posts .posts-wrapper.col-3 .hentry .entry-title {
                font-size: 14px !important;
                margin-bottom: 3px !important;
            }

                #latest-posts .posts-wrapper.col-3 .hentry .entry-title a {
                    font-size: 14px !important;
                    color: #fff !important;
                }

            #latest-posts .posts-wrapper.col-3 .hentry .entry-content {
                margin: 3px 0 !important;
            }

                #latest-posts .posts-wrapper.col-3 .hentry .entry-content p {
                    font-size: 12px !important;
                    color: #ddd !important;
                    display: -webkit-box !important;
                    -webkit-line-clamp: 2 !important;
                    -webkit-box-orient: vertical !important;
                    overflow: hidden !important;
                    margin: 0 !important;
                }

            #latest-posts .posts-wrapper.col-3 .hentry .more-link {
                font-size: 12px !important;
                color: #ffcc00 !important;
                display: inline-block !important;
            }

        #latest-posts .entry-container .read-more:before {
            content: "" !important;
            width: 20px !important;
            height: 2px !important;
            margin-left: 6px !important;
            background-color: #ffcc00 !important;
            display: inline-block !important;
            vertical-align: middle !important;
        }

        #latest-posts .posts-wrapper.col-3 .hentry .entry-meta .posted-on {
            position: absolute !important;
            top: 8px !important;
            left: 8px !important;
            right: auto !important;
            background: rgba(0, 0, 0, 0.6) !important;
            padding: 4px 8px !important;
            border-radius: 4px !important;
            z-index: 2 !important;
        }

        #latest-posts .posts-wrapper.col-3 .hentry .date {
            font-size: 18px !important;
            color: #fff !important;
            display: block !important;
            line-height: 1.2 !important;
        }

        #latest-posts .posts-wrapper.col-3 .hentry .month {
            font-size: 10px !important;
            color: #fff !important;
            display: block !important;
            letter-spacing: 0.1em !important;
            line-height: 1.2 !important;
        }

        #latest-posts .posts-wrapper.col-3 .hentry .screen-reader-text {
            display: none !important;
        }

        /* Remove border and background hover */
        #latest-posts .section-content article:hover,
        #latest-posts .section-content article:focus {
            background-color: transparent !important;
            border-bottom: none !important;
        }
}

@media screen and (max-width: 767px) {
    #latest-posts .posts-wrapper.col-3 .hentry {
        width: 100% !important;
        float: none !important;
        min-height: 200px !important;
        margin-bottom: 12px !important;
    }

        #latest-posts .posts-wrapper.col-3 .hentry .entry-container {
            padding: 10px !important;
        }

        #latest-posts .posts-wrapper.col-3 .hentry .entry-title {
            font-size: 13px !important;
        }

            #latest-posts .posts-wrapper.col-3 .hentry .entry-title a {
                font-size: 13px !important;
            }

        #latest-posts .posts-wrapper.col-3 .hentry .entry-content p {
            font-size: 11px !important;
        }
}

/* ---------- 8. Call to Action ---------- */
@media screen and (max-width: 991px) {
    #call-to-action {
        padding: 30px 0 !important;
    }

        #call-to-action .section-content {
            font-size: 20px !important;
            max-width: 100% !important;
            line-height: 1.4 !important;
            padding: 0 15px !important;
        }
}

@media screen and (max-width: 767px) {
    #call-to-action .section-content {
        font-size: 17px !important;
        padding: 0 10px !important;
    }

    #call-to-action .btn {
        padding: 6px 16px !important;
        font-size: 11px !important;
    }
}

@media screen and (max-width: 480px) {
    #call-to-action .section-content {
        font-size: 15px !important;
    }
}

/* ---------- 9. Footer ---------- */
@media screen and (max-width: 991px) {
    .footer-widgets-area {
        padding: 30px 0 !important;
    }

        .footer-widgets-area .hentry {
            padding-right: 0 !important;
            width: 50% !important;
            float: left !important;
            margin-bottom: 25px !important;
            padding: 0 10px !important;
        }

            .footer-widgets-area .hentry:nth-child(2n+1) {
                clear: left !important;
            }

            .footer-widgets-area .hentry:nth-child(n+3) {
                margin-top: 0 !important;
            }

        .footer-widgets-area .widget-title {
            font-size: 16px !important;
            margin-bottom: 12px !important;
        }

        .footer-widgets-area .widget ul li {
            font-size: 13px !important;
            margin-bottom: 6px !important;
        }

        .footer-widgets-area .textwidget img {
            max-width: 150px !important;
            height: auto !important;
            margin-bottom: 10px !important;
        }

        .footer-widgets-area .widget .social-icons li {
            width: 30px !important;
            line-height: 30px !important;
        }

            .footer-widgets-area .widget .social-icons li svg {
                width: 14px !important;
                height: 14px !important;
            }

    .widget.widget_subscribe input[type=email] {
        max-width: 100% !important;
        width: 100% !important;
        min-height: 38px !important;
        font-size: 12px !important;
        padding: 0 10px !important;
        margin-bottom: 6px !important;
    }

    #subscribe-submit input[type=submit] {
        height: 38px !important;
        min-height: 38px !important;
        font-size: 12px !important;
        padding: 0 15px !important;
        letter-spacing: 1px !important;
        margin-left: 0 !important;
        width: 100% !important;
    }

    #subscribe-email,
    #subscribe-submit {
        display: block !important;
        width: 100% !important;
    }
}

@media screen and (max-width: 767px) {
    .footer-widgets-area .hentry {
        width: 100% !important;
        float: none !important;
        margin-bottom: 20px !important;
        padding: 0 5px !important;
    }

        .footer-widgets-area .hentry:last-child {
            margin-bottom: 0 !important;
        }

    .footer-widgets-area .widget-title {
        font-size: 15px !important;
    }

    .footer-widgets-area .widget ul li {
        font-size: 12px !important;
    }

    .footer-widgets-area .textwidget img {
        max-width: 120px !important;
    }

    .site-info {
        padding: 12px 0 !important;
        text-align: center !important;
        font-size: 11px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

        .site-info span:nth-child(1),
        .site-info span:nth-child(2) {
            float: none !important;
            display: block !important;
            text-align: center !important;
        }

        .site-info span:nth-child(2) {
            margin-top: 5px !important;
        }

        .site-info a {
            font-size: 11px !important;
        }
}

/* ---------- 10. Back to Top Button ---------- */
@media screen and (max-width: 767px) {
    .backtotop {
        width: 32px !important;
        height: 32px !important;
        line-height: 30px !important;
        font-size: 14px !important;
        right: 10px !important;
        bottom: -100px !important;
        border-radius: 50% !important;
    }

        .backtotop svg {
            width: 14px !important;
            height: 14px !important;
        }
}

/* ---------- 11. Projects Slider Fixes ---------- */
@media screen and (max-width: 767px) {
    #latest-projects .slick-slide.slick-current {
        transform: scale(1) !important;
    }

    #latest-projects .slick-slide {
        transform: scale(1) !important;
        transition: none !important;
    }

    .project-slider .slick-list {
        padding: 0 5px !important;
    }

    #latest-projects .slick-prev {
        left: 20% !important;
    }

    #latest-projects .slick-next {
        right: 20% !important;
    }
}

/* ---------- 12. Client Testimonial ---------- */
@media screen and (max-width: 991px) {
    #client-testimonial .slick-slide {
        margin: 0 10px !important;
    }

        #client-testimonial .slick-slide .featured-image img {
            width: 80px !important;
            height: 80px !important;
        }

    #client-testimonial .slick-prev,
    #client-testimonial .slick-next {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    #client-testimonial .slick-prev {
        left: 0 !important;
        margin-left: 0 !important;
    }

    #client-testimonial .slick-next {
        right: 0 !important;
        margin-right: 0 !important;
    }

    #client-testimonial .section-title {
        font-size: 22px !important;
    }

    #client-testimonial .entry-title {
        font-size: 16px !important;
    }

    #client-testimonial p {
        font-size: 13px !important;
    }
}

@media screen and (max-width: 767px) {
    #client-testimonial .slick-slide {
        margin: 0 5px !important;
        padding: 5px !important;
    }

        #client-testimonial .slick-slide .featured-image img {
            width: 60px !important;
            height: 60px !important;
        }

    #client-testimonial .slick-current .featured-image {
        transform: scale(1) !important;
    }

    #client-testimonial .slick-prev::before,
    #client-testimonial .slick-next::before {
        width: 14px !important;
        height: 14px !important;
    }
}

/* ---------- 13. Our Partners ---------- */
@media screen and (max-width: 767px) {
    #our-partners {
        padding: 30px 0 !important;
    }

        #our-partners .featured-image img {
            max-height: 40px !important;
            width: auto !important;
        }

        #our-partners .slick-list {
            margin: 0 -8px !important;
        }

        #our-partners .slick-item {
            padding: 0 8px !important;
        }
}

/* ---------- 14. Breadcrumb ---------- */
@media screen and (max-width: 767px) {
    #breadcrumb-list {
        padding: 8px 0 !important;
    }

    .trail-items li {
        font-size: 11px !important;
    }

        .trail-items li:not(:last-child):after {
            padding: 0 3px !important;
        }

    .trail-items .breadcrumb-separator {
        padding: 0 2px !important;
    }
}

/* ---------- 15. Video Popup ---------- */
@media screen and (max-width: 767px) {
    #video-popup .widget.widget_media_video iframe {
        height: 180px !important;
        max-height: 180px !important;
    }
}

@media screen and (max-width: 480px) {
    #video-popup .widget.widget_media_video iframe {
        height: 140px !important;
        max-height: 140px !important;
    }
}

/* ---------- 16. RTL Specific Fixes ---------- */
@media screen and (max-width: 991px) {
    .rtl .main-navigation ul.nav-menu > li > a {
        text-align: right !important;
    }

    .rtl .main-navigation ul.sub-menu li a {
        text-align: right !important;
        padding-right: 30px !important;
        padding-left: 15px !important;
    }

    .rtl .main-navigation ul.sub-menu ul li a {
        padding-right: 45px !important;
    }

    .rtl button.dropdown-toggle {
        left: 0 !important;
        right: auto !important;
    }

    .rtl .main-navigation form.search-form button.search-submit {
        left: 15px !important;
        right: auto !important;
    }

    .rtl .main-navigation form.search-form input.search-field {
        padding: 0 12px 0 35px !important;
    }

    .rtl .menu-toggle {
        left: 10px !important;
        right: auto !important;
    }

    .rtl .site-logo img {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .rtl .footer-widgets-area .hentry {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .rtl #latest-projects article.slick-item .entry-container {
        left: auto !important;
        right: 12px !important;
    }

    .rtl #latest-posts .posts-wrapper.col-3 .hentry .entry-meta .posted-on {
        left: auto !important;
        right: 8px !important;
    }

    .rtl #latest-posts .posts-wrapper.col-3 .hentry .entry-container .read-more:before {
        margin-left: 0 !important;
        margin-right: 6px !important;
    }
}

/* ---------- 17. Page & Post Pages ---------- */
@media screen and (max-width: 767px) {
    .single-post .single-post-wrapper,
    .page .single-post-wrapper {
        padding: 20px 12px !important;
    }

        .single-post .single-post-wrapper .entry-title {
            font-size: 20px !important;
        }

        .single-post .single-post-wrapper .entry-content p {
            font-size: 14px !important;
        }

        .single-post .single-post-wrapper blockquote {
            max-width: 100% !important;
            font-size: 14px !important;
            padding: 0 12px !important;
        }

    .comment-navigation .nav-previous,
    .posts-navigation .nav-previous,
    .post-navigation .nav-previous {
        float: none !important;
        width: 100% !important;
        text-align: center !important;
    }

    .comment-navigation .nav-next,
    .posts-navigation .nav-next,
    .post-navigation .nav-next {
        float: none !important;
        width: 100% !important;
        text-align: center !important;
        margin-top: 10px !important;
    }

    .post-navigation,
    .posts-navigation {
        padding: 20px 15px !important;
    }

    #comments {
        margin: 30px 0 0 !important;
    }

    .comments-title,
    #reply-title {
        font-size: 20px !important;
    }

    #respond {
        padding: 20px 12px !important;
    }

    p.comment-form-author,
    p.comment-form-email {
        width: 100% !important;
        float: none !important;
        padding-right: 0 !important;
    }

    .comment-meta img {
        width: 50px !important;
        height: 50px !important;
        float: none !important;
        margin: 0 0 10px !important;
        display: block !important;
    }

    .comment-content {
        padding-left: 0 !important;
    }

    .reply {
        padding-left: 0 !important;
    }

    #comments ol.children {
        margin-left: 10px !important;
    }

    .pagination .page-numbers {
        line-height: 30px !important;
        width: 25px !important;
        height: 30px !important;
        font-size: 13px !important;
    }


    .navigation.pagination {
        padding: 20px 10px !important;
    }
}

/* ---------- 18. Widgets & Sidebar ---------- */
@media screen and (max-width: 991px) {
    #secondary {
        margin-top: 30px !important;
        display: flow-root;
    }

        #secondary .widget {
            padding-top: 20px !important;
            margin-bottom: 20px !important;
        }

        #secondary .widget-title {
            font-size: 16px !important;
        }

    .widget_popular_post img,
    .widget_latest_post img {
        max-width: 60px !important;
        width: 60px !important;
        height: 60px !important;
    }

    .widget_popular_post h3,
    .widget_latest_post h3 {
        font-size: 13px !important;
    }

    .tagcloud a {
        font-size: 11px !important;
        padding: 3px 12px !important;
        margin: 0 3px 6px 0 !important;
    }

    .widget.widget_search input.search-field {
        height: 35px !important;
        font-size: 12px !important;
        padding: 0 12px !important;
    }
}

/* ---------- 19. General Utilities ---------- */
@media screen and (max-width: 767px) {
    .no-padding-top {
        padding-top: 15px !important;
    }

    .no-padding-bottom {
        padding-bottom: 15px !important;
    }

    .align-left,
    .align-right {
        text-align: center !important;
    }

    .responsive-title {
        font-size: 1rem !important;
        text-align: center !important;
        padding: 0 0.2rem !important;
    }

        .responsive-title a {
            word-wrap: break-word !important;
            display: block !important;
            font-size: 1rem !important;
        }

    .larger-white-font {
        font-size: 1rem !important;
    }

    .entry-container .entry-title a {
        font-size: 1rem !important;
    }

    /* Fix for any hidden overflow */
    .site-content {
        overflow-x: hidden !important;
    }
}

/* ---------- 20. Tablet Specific (768px - 991px) ---------- */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .services-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
    }

    .service-item {
        height: 300px !important;
    }

    .footer-widgets-area .hentry {
        width: 50% !important;
    }

    #latest-posts .posts-wrapper.col-3 .hentry {
        width: 50% !important;
        min-height: 220px !important;
    }

    #latest-projects article.slick-item {
        padding: 150px 15px !important;
    }

    #latest-projects article .entry-title {
        font-size: 16px !important;
    }
}

/* ---------- 21. Large Mobile (481px - 767px) ---------- */
@media screen and (min-width: 481px) and (max-width: 767px) {
    .services-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    .service-item {
        height: 200px !important;
    }

    .service-header a {
        font-size: 13px !important;
    }

    .slider-image .featured-image {
        height: 45vh !important;
        padding: 160px 0 !important;
    }
}

/* ---------- 22. Print ---------- */
@media print {
    .menu-toggle,
    .backtotop,
    #top-navigation,
    .color-switcher {
        display: none !important;
    }

    .wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
}
/* ---------- 18. Widgets & Sidebar (Updated) ---------- */
@media screen and (max-width: 991px) {
    /* Fix: Stack sidebar below main content instead of overlapping */
    #primary {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
    }

    #secondary {
        width: 100% !important;
        float: none !important;
        margin-top: 40px !important;
        padding: 0 15px !important;
        clear: both !important;
    }

        #secondary .widget {
            padding-top: 20px !important;
            margin-bottom: 20px !important;
        }

        #secondary .widget-title {
            font-size: 16px !important;
        }

    .widget_popular_post img,
    .widget_latest_post img {
        max-width: 60px !important;
        width: 60px !important;
        height: 60px !important;
    }

    .widget_popular_post h3,
    .widget_latest_post h3 {
        font-size: 13px !important;
    }

    .tagcloud a {
        font-size: 11px !important;
        padding: 3px 12px !important;
        margin: 0 3px 6px 0 !important;
    }

    .widget.widget_search input.search-field {
        height: 35px !important;
        font-size: 12px !important;
        padding: 0 12px !important;
    }
}

/* ---------- 23. Blog & Archive Layout Fixes ---------- */
@media screen and (max-width: 991px) {
    /* Ensure content area doesn't get overlapped */
    .content-area {
        width: 100% !important;
        float: none !important;
        display: block !important;
    }

    .site-main {
        width: 100% !important;
    }

    .posts-wrapper.blog-wrapper {
        display: block !important;
        width: 100% !important;
    }

        /* Fix post grid layout */
        .posts-wrapper.blog-wrapper .hentry {
            width: 100% !important;
            float: none !important;
            margin-bottom: 30px !important;
            padding: 0 !important;
        }

        /* Ensure featured images don't overflow */
        .posts-wrapper.blog-wrapper .featured-image {
            max-width: 100% !important;
            overflow: hidden !important;
        }

            .posts-wrapper.blog-wrapper .featured-image img {
                width: 100% !important;
                height: auto !important;
            }

        /* Fix entry meta positioning */
        .posts-wrapper.blog-wrapper .entry-meta {
            position: relative !important;
        }

        .posts-wrapper.blog-wrapper .entry-container {
            padding: 15px !important;
        }

        .posts-wrapper.blog-wrapper .entry-title {
            font-size: 18px !important;
        }

            .posts-wrapper.blog-wrapper .entry-title a {
                font-size: 18px !important;
            }

        .posts-wrapper.blog-wrapper .entry-content p {
            font-size: 14px !important;
        }

    /* Navigation fixes */
    .navigation.posts-navigation {
        width: 100% !important;
        clear: both !important;
    }
}

@media screen and (max-width: 767px) {
    #secondary {
        padding: 0 10px !important;
        margin-top: 30px !important;
    }

    .posts-wrapper.blog-wrapper .entry-title {
        font-size: 16px !important;
    }

        .posts-wrapper.blog-wrapper .entry-title a {
            font-size: 16px !important;
        }

    .posts-wrapper.blog-wrapper .entry-content p {
        font-size: 13px !important;
    }

    .posts-wrapper.blog-wrapper .entry-container {
        padding: 12px !important;
    }

    .posts-wrapper.blog-wrapper .hentry {
        margin-bottom: 25px !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    /* Tablet: Two columns blog layout */
    .posts-wrapper.blog-wrapper .hentry {
        width: 48% !important;
        float: right !important;
        margin-left: 2% !important;
        margin-right: 2% !important;
        clear: none !important;
    }

        .posts-wrapper.blog-wrapper .hentry:nth-child(2n+1) {
            clear: right !important;
        }

    #secondary {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
    }

        #secondary .widget {
            width: 48% !important;
            flex: 0 0 48% !important;
        }
}