@media (max-width: 1024px) {

    /* portfolio */
    .dtr-portfolio-grid-2col .dtr-portfolio-item,
    .dtr-portfolio-grid-3col .dtr-portfolio-item,
    .dtr-portfolio-grid-4col .dtr-portfolio-item {
        width: 50%;
    }

    /* blog */
    .dtr-blog-grid .dtr-post-item,
    .dtr-search-grid .dtr-search-item,
    .dtr-blog-grid.dtr-blog-grid-3col .dtr-post-item,
    .dtr-relatedposts-grid .dtr-relatedposts-item {
        width: 49.99%;
    }

    .dtr-footer-section-wrap {
        margin: 0 10px 10px 10px;
    }

    .dtr-page-title--section {
        margin: 0 10px;
    }
}

@media (max-width: 992px) {

    .dtr-content-area,
    .dtr-widget-area {
        width: 100%;
        float: none;
    }

    #dtr-secondary-section {
        margin-top: 50px;
    }

    .container {
        width: 100%;
        max-width: 100%;
    }

    #dtr-main-wrapper {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .single.single-post #dtr-main-wrapper {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .elementor-default.elementor-page #dtr-main-wrapper {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .elementor-default.elementor-page.single.single-post #dtr-main-wrapper {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    /* header — hide desktop nav on mobile/tablet */
    #dtr-topbar,
    #dtr-header-global,
    #dtr-header-global.header-fixed,
    .sf-sub-indicator,
    .main-navigation .sf-menu {
        display: none;
    }

    /* =============================================
       RESPONSIVE HEADER BAR
    ============================================= */
    #dtr-responsive-header {
        display: flex !important;
        flex-direction: column;
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        padding: 0 !important; /* Forces stripping of old style.css padding */
        z-index: 9999;
        background: transparent !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: 1px solid transparent;
        box-shadow: none;
        transition: background 0.4s ease,
                    border-color 0.4s ease,
                    box-shadow 0.4s ease,
                    backdrop-filter 0.4s ease;
    }

    /* Scrolled state — JS adds .xs-admin-toolbar on scroll > 80px */
    #dtr-responsive-header.xs-admin-toolbar {
        background: rgba(8, 8, 10, 0.88) !important;
        backdrop-filter: blur(24px) saturate(1.6) !important;
        -webkit-backdrop-filter: blur(24px) saturate(1.6) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 4px 32px rgba(0, 0, 0, 0.5) !important;
    }

    /* Nav open: header row must also be dark so logo/X are readable */
    #dtr-responsive-header.dp-menu-open {
        background: rgba(8, 8, 10, 0.96) !important;
        backdrop-filter: blur(24px) saturate(1.6) !important;
        -webkit-backdrop-filter: blur(24px) saturate(1.6) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    /* Top row: logo + hamburger */
    #dtr-responsive-header .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0 16px;
        height: 60px; /* Reduced ribbon height */
        box-sizing: border-box;
    }

    #dtr-responsive-header .dtr-logo {
        display: flex !important;
        align-items: center;
        height: 100%;
    }

    /* Logo sizing in mobile header */
    #dtr-responsive-header .dtr-logo img {
        width: 170px !important;
        height: auto !important;
        max-height: 44px;
        object-fit: contain;
        margin: 0 !important;
        display: block !important;
        transform: translateY(5px); /* Forces exact alignment against the hamburger cross */
    }

    /* =============================================
       HAMBURGER BUTTON
    ============================================= */
    .slicknav_menu,
    .slicknav_btn {
        display: block !important;
    }

    #dtr-menu-button {
        display: flex !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        margin: 0 !important;
        transform: none !important;
    }

    .dtr-hamburger {
        background: transparent;
        border: none;
        padding: 0;
        margin: 0;
        cursor: pointer;
        outline: none;
        /* Perfect square touch target */
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 6px;
        flex-shrink: 0;
        transition: background 0.25s ease;
        -webkit-appearance: none;
        appearance: none;
    }

    .dtr-hamburger:hover {
        background: rgba(255, 255, 255, 0.08);
    }

    /* Wrapper */
    .dtr-hamburger-lines-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        position: relative;
    }

    /* Each of the 3 bars */
    .dtr-hamburger-lines,
    .dtr-hamburger-lines::before,
    .dtr-hamburger-lines::after {
        display: block;
        width: 20px;
        height: 1.5px;
        background: #ffffff;
        border-radius: 2px;
    }

    .dtr-hamburger-lines {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        transition: background 0.3s ease;
    }

    .dtr-hamburger-lines::before,
    .dtr-hamburger-lines::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .dtr-hamburger-lines::before { transform: translateY(-7px); }
    .dtr-hamburger-lines::after  { transform: translateY(7px); }

    /* ── Open state: perfect centred X ── */
    .dtr-hamburger.is-active .dtr-hamburger-lines {
        background: transparent;
    }

    .dtr-hamburger.is-active .dtr-hamburger-lines::before {
        transform: rotate(45deg);
    }

    .dtr-hamburger.is-active .dtr-hamburger-lines::after {
        transform: rotate(-45deg);
    }

    #dtr-main-wrapper {
        padding-top: 72px !important;
    }

    /* =============================================
       MOBILE NAV PANEL (slicknav)
    ============================================= */
    .slicknav_nav {
        display: none;
        position: relative;
        width: 100%;
        background: rgba(10, 10, 12, 0.97) !important;
        backdrop-filter: blur(28px);
        -webkit-backdrop-filter: blur(28px);
        border-top: 1px solid rgba(255, 255, 255, 0.07);
        padding: 8px 0 16px !important;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
        list-style: none !important;
        margin: 0 !important;
    }

    .slicknav_nav > li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .slicknav_nav > li:last-child {
        border-bottom: none;
    }

    /* Top-level nav links */
    .slicknav_nav > li > a,
    .slicknav_nav > li > .slicknav_item > a {
        font-family: 'Inter', 'Helvetica Neue', sans-serif !important;
        font-weight: 500 !important;
        font-size: 11px !important;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        padding: 16px 22px !important;
        display: block;
        color: rgba(255, 255, 255, 0.88) !important;
        text-decoration: none !important;
        transition: color 0.25s ease, padding-left 0.25s ease;
    }

    .slicknav_nav > li > a:hover,
    .slicknav_nav > li > .slicknav_item > a:hover {
        color: #ffffff !important;
        padding-left: 28px !important;
    }

    /* "Our Services" accordion row */
    .slicknav_item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
    }

    .slicknav_arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        margin-right: 12px;
        color: rgba(255, 255, 255, 0.4) !important;
        font-size: 18px;
        line-height: 1;
        transition: transform 0.3s ease, color 0.25s ease;
        flex-shrink: 0;
    }

    .slicknav_nav li.slicknav_open > .slicknav_item .slicknav_arrow {
        transform: rotate(180deg);
        color: rgba(255, 255, 255, 0.8) !important;
    }

    /* Sub-menu: Our Services dropdown */
    .slicknav_nav .slicknav_nav {
        display: none;
        background: rgba(255, 255, 255, 0.03) !important;
        padding: 4px 0 12px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        box-shadow: none;
        backdrop-filter: none;
    }

    .slicknav_nav .slicknav_nav a {
        font-size: 10.5px !important;
        font-weight: 400 !important;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.55) !important;
        padding: 13px 22px 13px 36px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
        transition: color 0.25s ease, padding-left 0.25s ease;
    }

    .slicknav_nav .slicknav_nav a:hover {
        color: rgba(255, 255, 255, 0.9) !important;
        padding-left: 44px !important;
    }

    .slicknav_nav .slicknav_nav li:last-child a {
        border-bottom: none;
    }

    /* =============================================
       HAND-CODED MOBILE NAV PANEL  #dp-mobile-nav
    ============================================= */
    #dp-mobile-nav {
        width: 100%;
        background: rgba(8, 8, 10, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid rgba(255, 255, 255, 0.07);
        padding: 6px 0 20px;
        overflow: hidden;
    }

    /* top-level list */
    .dp-mob-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .dp-mob-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .dp-mob-item:last-child {
        border-bottom: none;
    }

    /* plain link rows */
    .dp-mob-link {
        display: block;
        font-family: 'Inter', 'Helvetica Neue', sans-serif;
        font-size: 10.5px;
        font-weight: 500;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.82);
        text-decoration: none;
        padding: 17px 24px;
        transition: color 0.25s ease, padding-left 0.25s ease;
    }

    .dp-mob-link:hover {
        color: #ffffff;
        padding-left: 30px;
    }

    /* "OUR SERVICES" accordion row */
    .dp-mob-item-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 17px 20px 17px 24px;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
    }

    .dp-mob-link-text {
        font-family: 'Inter', 'Helvetica Neue', sans-serif;
        font-size: 10.5px;
        font-weight: 500;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.82);
    }

    .dp-mob-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.45);
        transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
                    color 0.25s ease,
                    border-color 0.25s ease;
        flex-shrink: 0;
    }

    .dp-mob-has-children.dp-mob-expanded .dp-mob-item-row .dp-mob-arrow {
        color: rgba(255, 255, 255, 0.85);
        border-color: rgba(255, 255, 255, 0.25);
    }

    .dp-mob-item-row:hover .dp-mob-link-text {
        color: #ffffff;
    }

    /* sub-menu */
    .dp-mob-sub {
        list-style: none;
        margin: 0;
        padding: 2px 0 10px;
        background: rgba(255, 255, 255, 0.025);
        border-top: 1px solid rgba(255, 255, 255, 0.045);
    }

    .dp-mob-sub li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    }

    .dp-mob-sub li:last-child {
        border-bottom: none;
    }

    .dp-mob-sub-link {
        display: block;
        font-family: 'Inter', 'Helvetica Neue', sans-serif;
        font-size: 10px;
        font-weight: 400;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
        text-decoration: none;
        padding: 13px 24px 13px 38px;
        transition: color 0.25s ease, padding-left 0.25s ease;
    }

    .dp-mob-sub-link:hover {
        color: rgba(255, 255, 255, 0.88);
        padding-left: 46px;
    }

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

    .dtr-footer-section-wrap .has-text-align-right,
    .dtr-footer-section-wrap .has-text-align-left {
        text-align: center !important;
    }

    .text-left .dtr-social {
        justify-content: center;
    }

    .text-left .dtr-social li:first-child {
        margin-left: 5px;
    }

    .text-right .dtr-social li:last-child {
        margin-right: 5px;
    }

    .text-right .dtr-social {
        justify-content: center;
    }

    .dtr-page-title--section {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .dtr-footer-row {
        padding: 50px 0;
    }

    /*comments*/
    .comment-list li.comment ol.children {
        margin-left: 20px;
    }

    .dtr-comment-meta {
        display: block;
    }

    .comment-reply-link {
        margin: 10px 0 0 0;
    }

    /*-- blog --*/
    .dtr-author-info,
    .dtr-author-contentbox {
        width: 100%;
        display: block;
        text-align: center;
    }

    .dtr-author-avatar {
        text-align: center;
        padding-right: 0;
        margin: 0 auto 20px auto;
    }

    .small-device-space {
        margin: 30px 0 0 0;
    }

    .dtr-copyright .small-device-space {
        margin: 20px 0 0 0;
    }

    .dtr-single-post-nav {
        display: block;
    }

    .dtr-single-nav__prev {
        width: 100%;
        padding-right: 0;
    }

    .dtr-single-nav__next {
        width: 100%;
        padding-left: 0;
        padding-top: 20px;
        margin-top: 20px;
        border-top: 1px solid var(--dtr-border-color-main);
    }

    .dtr-single-nav__next a {
        justify-content: flex-start;
    }

    .dtr-single-post__btm-meta {
        display: block;
    }

    .dtr-social-share {
        width: 100%;
        margin-top: 20px;
    }

    #respond {
        padding: 20px;
    }

    .dtr-servicebox {
        padding: 70px 15px 15px 15px;
    }

    .dtr-servicebox__link {
        position: absolute;
        right: 15px;
        top: 15px;
    }

}

@media (max-width: 782px) {

    /* portfolio */
    .dtr-portfolio-grid-2col,
    .dtr-portfolio-grid-3col,
    .dtr-portfolio-grid-4col {
        margin: 0;
    }

    .dtr-portfolio-grid-2col .dtr-portfolio-item,
    .dtr-portfolio-grid-3col .dtr-portfolio-item,
    .dtr-portfolio-grid-4col .dtr-portfolio-item {
        width: 100%;
        padding: 0;
    }

    .dtr-portfolio__head-wrapper {
        display: block;
        text-align: center;
    }

    .dtr-portfolio__main-title {
        margin-bottom: 15px;
    }

    .dtr-filter-nav li {
        margin: 5px 0;
    }

    .dtr-filter-nav__center.dtr-filter-nav a {
        margin: 0 15px;
    }

    /* blog */
    .dtr-blog-grid .dtr-post-item,
    .dtr-search-grid .dtr-search-item,
    .dtr-blog-grid.dtr-blog-grid-3col .dtr-post-item {
        width: 100%;
        padding: 0;
    }

    .dtr-blog-grid .dtr-post-grid,
    .dtr-search-grid-wrapper .dtr-search-grid {
        margin: 0;
    }

    /*-- forms --*/
    .dtr-form-row,
    .dtr-form-row-2col,
    .dtr-form-row-3col,
    .dtr-form-row-unequal,
    .dtr-form-row-2col-unequal {
        margin-right: 0;
        margin-left: 0;
    }

    .dtr-form-row,
    .dtr-form-row-2col,
    .dtr-form-row-3col,
    .dtr-form-row-unequal,
    .dtr-form-row-2col-unequal,
    .dtr-form-row-2col .dtr-form-column,
    .dtr-form-row-3col .dtr-form-column,
    .dtr-form-row-unequal .dtr-form-column,
    .dtr-form-row-unequal .dtr-form-column:last-child,
    .dtr-form-row-2col-unequal .dtr-form-column,
    .dtr-form-row-2col-unequal .dtr-form-column:last-child {
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    .heading-404 {
        width: 300px;
        height: 140px;
        min-width: auto;
        min-height: auto;
    }

    .dtr-quote__content {
        padding: 30px;
    }

    .dtr-cursor-wrapper.dtr-cursor,
    .dtr-cursor.dtr-cursor-hover {
        display: none;
        opacity: 0;
    }
}

/* =============================================
   CUSTOM MOBILE FIXES — DAMIONNE PARTNERS
============================================= */
@media (max-width: 992px) {

    /* ── LOGO: flush to the left corner + bigger ── */
    #dtr-responsive-header .container {
        padding-left: 0 !important;
        padding-right: 12px !important;
    }

    #dtr-responsive-header .dtr-logo {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    #dtr-responsive-header .dtr-logo img {
        width: 210px !important;
        max-height: 52px !important;
        border-radius: 0 !important;
    }

    /* ── FOOTER PADDING — normalise across all inner pages ── */
    .dp-footer {
        padding: 56px 40px 0 40px !important;
    }

    /* ── SERVICE PAGE CTA ROW — stack buttons on tablet ── */
    .cta-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .cta-row .btn-primary {
        width: 100% !important;
        justify-content: center !important;
        box-sizing: border-box;
    }

    .cta-row .btn-ghost {
        width: 100% !important;
        text-align: center !important;
        padding: 12px 8px !important;
    }
}

@media (max-width: 768px) {

    /* ── FOOTER PADDING ── */
    .dp-footer {
        padding: 48px 32px 0 32px !important;
    }

    /* ═══════════════════════════════════════════
       WHAT WE DO CARDS — PREMIUM OVERLAY DESIGN
    ═══════════════════════════════════════════ */

    /* Grid: single column, breathing room */
    .section-wrapper .pill-grid {
        flex-direction: column !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 20px !important;
        min-height: unset !important;
        padding: 0 20px !important;
    }

    /* Card: Full-area container with relative positioning */
    .section-wrapper .pill-card {
        width: 100% !important;
        max-width: 480px !important;
        height: 320px !important; /* Taller for impact */
        border-radius: 28px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-self: center !important;
        overflow: hidden !important;
        background: #000 !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        position: relative !important;
        text-decoration: none !important;
    }

    /* Reset even cards to same layout */
    .section-wrapper .pill-card:nth-child(even),
    .section-wrapper .pill-card:nth-child(even) .pill-content {
        flex-direction: column !important;
    }

    /* Asset: Full absolute background */
    .section-wrapper .pill-asset {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;
        border-radius: 0 !important;
    }

    .section-wrapper .pill-asset img,
    .section-wrapper .pill-asset video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        filter: brightness(0.8) contrast(1.1) !important;
    }

    /* Gradient Overlay for legibility */
    .section-wrapper .pill-card::after {
        content: "" !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 70% !important;
        background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 50%, transparent 100%) !important;
        z-index: 2 !important;
    }

    /* Content: Glass panel at the bottom */
    .section-wrapper .pill-content {
        position: relative !important;
        z-index: 3 !important;
        padding: 24px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        margin: 0 !important;
    }

    /* Service label */
    .section-wrapper .pill-label {
        font-size: 11px !important;
        font-weight: 600 !important;
        letter-spacing: 0.2em !important;
        color: rgba(255, 255, 255, 0.6) !important;
        margin-bottom: 6px !important;
        text-transform: uppercase !important;
        margin-top: 0 !important;
    }

    /* Service title */
    .section-wrapper .pill-title {
        font-size: 18px !important;
        font-weight: 400 !important;
        line-height: 1.3 !important;
        color: #fff !important;
        margin: 0 0 16px 0 !important;
        max-width: 90% !important;
    }

    /* Floating Arrow */
    .section-wrapper .pill-arrow {
        position: absolute !important;
        right: 24px !important;
        bottom: 24px !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        background: #fff !important;
        border: none !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
        z-index: 4 !important;
    }

    .section-wrapper .pill-arrow svg {
        width: 18px !important;
        height: 18px !important;
        stroke: #000 !important;
        transform: translate(1px, -1px) !important;
    }

    /* Active state feel */
    .section-wrapper .pill-card:active {
        transform: scale(0.98) !important;
    }
}

@media (max-width: 640px) {

    /* ── FOOTER PADDING ── */
    .dp-footer {
        padding: 40px 24px 0 24px !important;
    }

    /* Tighter card image on small phones */
    .section-wrapper .pill-asset {
        height: 180px !important;
    }
}

@media (max-width: 480px) {

    /* ── FOOTER PADDING ── */
    .dp-footer {
        padding: 32px 20px 0 20px !important;
    }

    /* ── LOGO — slightly smaller on very small screens but still big ── */
    #dtr-responsive-header .container {
        padding-left: 0 !important;
        padding-right: 8px !important;
    }

    #dtr-responsive-header .dtr-logo img {
        width: 190px !important;
        max-height: 48px !important;
    }

    /* Cards edge-to-edge with smaller padding */
    .section-wrapper .pill-grid {
        padding: 0 12px !important;
    }

    .section-wrapper .pill-card {
        max-width: 100% !important;
        border-radius: 16px !important;
    }

    .section-wrapper .pill-asset {
        height: 170px !important;
    }

    .section-wrapper .pill-content {
        padding: 16px 18px 18px !important;
    }

    .section-wrapper .pill-title {
        font-size: 15px !important;
    }
}