@media screen and (min-width:601px) {
    .admin-bar header.elementor-location-header {
        top: 31px;
    }
}

@media screen and (min-width:768px) {
    .jscsl-sidebar-header {
        pointer-events: none;
    }

    .jscsl-sidebar-header svg {
        display: none;
    }

    body .aboutHowweworkImage {
        width: 100% !important;
    }

    body .aboutHowweworkImage img {
        height: 340px;
        object-fit: cover;
        object-position: top;
        width: 100% !important;
        min-height: auto !important;
        display: block !important;
    }
}

@media screen and (min-width:1025px) {

    /* .card {
        --card-width: 388px; 
        width: var(--card-width) !important;
        flex-shrink: 0 !important;
    }

    .horizontal-scoll {
        height: 100vh !important;
        min-height: 0 !important;
        display: flex !important;
        align-items: center !important;
        overflow: visible !important;
    }

    .horizontal-scoll-wrapper {
        overflow: visible !important;
        width: 100% !important;
    }

    body .horizontal {
        display: flex !important;
        flex-wrap: nowrap !important;
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        width: max-content !important;
        padding-left: var(--container-padding, 120px) !important;
        padding-right: var(--container-padding, 120px) !important;
        align-items: normal !important; 
        gap: 24px !important;
    } */
    .card {
        --card-width: 388px;
        width: var(--card-width) !important;
        flex-shrink: 0 !important;
    }

    .horizontal-scoll {
        height: 100vh !important;
        min-height: 0 !important;
        display: flex !important;
        align-items: center !important;
        overflow: visible !important;
    }

    .horizontal-scoll-wrapper {
        overflow: visible !important;
        width: 100% !important;
    }

    body .horizontal {
        display: flex !important;
        flex-wrap: nowrap !important;
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        width: max-content !important;
        align-items: normal !important;
        gap: 24px !important;
        /* Center first card: half viewport minus half card width */
        padding-left: calc(50vw - 194px) !important;
        /* Center last card: same on the right */
        padding-right: calc(50vw - 194px) !important;
    }

    .jsc-case-card {
        /* border-image-source: linear-gradient(to right, #CBA57E82 70%, #ffffff00 70%); */
        /* border-image-slice: 1; */
    }

    .socialMenuJsc li:hover {
        width: 240px;
    }

    .socialMenuJsc li:hover .icon {
        transform: scale(0);
    }

    .socialMenuJsc li:hover .title {
        transform: scale(1);
    }

    .jsc-grid:has(.jsc-card:hover) .jsc-card:not(:hover) .jsc-card-img,
    .jscsl-grid:has(.jscsl-card:hover) .jscsl-card:not(:hover) .jscsl-card-img-wrap img,
    .mediatoRedersList .elementor-grid:has(.barristerElemCard:hover) .jsc_barristers .barristerElemCard:not(:hover) .elementor-widget-image a img {
        /* filter:  brightness(.45); */

        opacity: 0.6;
    }
}

@media screen and (max-width:1540px) {
    .jsc-grid {
        --gapY: 48px;
        --gapX: 32px;
    }

    .btn-flip::before,
    .btn-flip::after {
        font-size: 18px;
    }

    .jscsl-card-name,
    .jsc-card-name {
        font-size: 20px;
        line-height: 1.15;
    }

    .jscsl-card-role,
    .jsc-card-role {
        /* font-size: 17px;
        line-height: 1.2; */
    }


    .jscsl-topbar {
        --count: 3;
        gap: 35px 30px;
    }

    .jscsl-grid {
        --count: 3;
        --gapY: 35px;
        --gapX: 30px;
    }

    .jscsl-wrap {
        gap: 49px;
    }

    .barrister-contact {
        gap: 15px;
    }

    .barrister-contact__link,
    .barrister-contact__assistant-header {
        font-size: 18px;
    }

    .section_practice_area li {
        font-size: 17px;
    }

    .section_practice_area {
        gap: 12px;
    }

    .section_practice_area li::before {
        top: 8px;
    }

    .jsc-case-card a,
    span.jsc-case-title {
        font-size: 20px;
    }

    .jsc-case-card {
        /* padding: 15px 0; */
    }

    .card {
        --card-width: 340px;
    }
}

@media screen and (max-width:1440px) {}

@media screen and (max-width:1300px) {
    .jsc-grid {
        --gapY: 38px;
        --gapX: 22px;
    }

    .jscsl-card-role,
    .jsc-card-role {
        font-size: 17px;
        line-height: 1.2;
    }

    .jscsl-wrap {
        gap: 30px;
    }

    .jscsl-topbar {
        --count: 3;
        gap: 25px 20px;
    }

    .jscsl-grid {
        --count: 3;
        --gapY: 25px;
        --gapX: 20px;
    }

    .jscsl-card-name,
    .jsc-card-name {
        font-size: 20px;
    }

    .barrister-contact {
        flex-direction: column;
    }

    .card {
        --card-width: 320px;
    }
    .section_practice_area li {
        font-size: 16px;
    }

}

@media screen and (max-width:1200px) {
    body .bridge-container {
        max-width: 380px;
        max-height: 35px;
    }
}

@media (max-width: 1199px) {
    .horizontal {
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .card {
        scroll-snap-align: center;
    }

    body .horizontal-scoll-wrapper {
        max-width: var(--container-max-width);
        margin: 0 auto;
        padding: 0 !important;
    }

    body .horizontal-scoll {
        overflow: hidden !important;
    }

    /* Kill the GSAP pin spacer behaviour */
    .horizontal-scoll {
        position: relative !important;
        height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
    }

    .horizontal-scoll-wrapper {
        width: 100% !important;
        overflow: hidden;
    }

    /* Swiper container */
    .horizontal-swiper {
        width: 100%;
        overflow: hidden;
        padding-bottom: 48px;
    }

    /* The track — Swiper controls transform, kill Elementor's */
    .horizontal.swiper-wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: auto !important;
        transform: translate3d(0, 0, 0);
        /* Swiper overrides this */
    }

    /* Each card */
    .card.swiper-slide {
        height: auto !important;
        flex-shrink: 0;
        width: auto;
        /* Swiper calculates this from slidesPerView */
    }

    /* Pagination */
    .horizontal-swiper .swiper-pagination-bullet {
        background: rgba(194, 165, 103);
        opacity: 0.3;
    }

    .horizontal-swiper .swiper-pagination-bullet-active {
        opacity: 0.7;
    }


}

@media screen and (max-width: 1024px) {

    #loader-ct,
    #loader-cb {
        height: 50.5%;
    }

    /* ── OVERLAY ── */
    nav.elementor-nav-menu--dropdown {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 9998;
        display: flex !important;
        flex-direction: column;
        padding: 85px 20px 60px;
        overflow: hidden;
        border: none;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        clip-path: inset(0 0 100% 0);
        pointer-events: none;
        transition: clip-path 0.75s cubic-bezier(0.76, 0, 0.24, 1);
        margin-top: 0px !important;

        /* background: #0c0c0c; */
        backdrop-filter: blur(20.93684196472168px);
        background: rgba(22, 22, 22, 0.81);

    }

    body:has(.elementor-menu-toggle.elementor-active) {
        overflow: hidden;
    }

    nav.elementor-nav-menu--dropdown.menu-visible {
        clip-path: inset(0 0 0% 0);
        pointer-events: all;
    }

    /* ── UL ── */
    nav.elementor-nav-menu--dropdown .elementor-nav-menu {
        display: flex;
        flex-direction: column;
        padding: 0;
        margin: 0;
        background: transparent;
        width: 100%;
        margin: 0 auto;
        max-width: var(--content-width);
    }

    header .mobileMenuIcons {
        margin: 0 auto;
        max-width: var(--content-width);
        width: 100%;
    }

    /* ── ITEMS — slide up on open ── */
    nav.elementor-nav-menu--dropdown .elementor-nav-menu .menu-item {
        display: block;
        overflow: hidden;
        border: none;
        padding: 0;
        background: none;
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .mobileMenuIcons .socialMenuJsc {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    /* Stagger each item with delay */
    nav.elementor-nav-menu--dropdown.menu-visible .menu-item:nth-child(1) {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.35s;
    }

    nav.elementor-nav-menu--dropdown.menu-visible .menu-item:nth-child(2) {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.42s;
    }

    nav.elementor-nav-menu--dropdown.menu-visible .menu-item:nth-child(3) {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.49s;
    }

    nav.elementor-nav-menu--dropdown.menu-visible .menu-item:nth-child(4) {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.56s;
    }

    nav.elementor-nav-menu--dropdown.menu-visible .menu-item:nth-child(5) {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.63s;
    }

    nav.elementor-nav-menu--dropdown.menu-visible .menu-item:nth-child(6) {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.70s;
    }

    nav.elementor-nav-menu--dropdown.menu-visible .menu-item:nth-child(7) {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.77s;
    }

    nav.elementor-nav-menu--dropdown.menu-visible .mobileMenuIcons .socialMenuJsc {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.95s;
    }

    /* ── LINKS ── */
    nav.elementor-nav-menu--dropdown .elementor-nav-menu .elementor-item {
        display: inline-block;
        /* font-size: 20px !important;
        font-weight: 500;    */
        line-height: 2.1;
        /* letter-spacing: 0%;  */
        /* color: #eadec8;  */
        text-decoration: none;
        padding: 0;
        background: none;
        border: none;
        transition: color 0.35s ease;
    }

    nav.elementor-nav-menu--dropdown .elementor-nav-menu .elementor-item:hover {
        color: #ffffff;
        background: none;
    }

    nav.elementor-nav-menu--dropdown .elementor-nav-menu .elementor-item.elementor-item-active {
        color: rgba(255, 255, 255, 0.5);
        background: none;
    }

    /* ── KILL CHAR-SPLIT INSIDE DROPDOWN ── */
    nav.elementor-nav-menu--dropdown .menu-text {
        display: block;
        overflow: visible;
        position: static;
    }

    nav.elementor-nav-menu--dropdown .text-back {
        display: none;
    }

    nav.elementor-nav-menu--dropdown .text-front {
        display: block;
        position: static;
    }

    nav.elementor-nav-menu--dropdown .text-front>div {
        display: inline !important;
        position: static !important;
        transform: none !important;
        translate: none !important;
        rotate: none !important;
    }

    body nav.elementor-nav-menu--dropdown .text-back {
        display: none !important;
    }

    nav.elementor-nav-menu--dropdown .elementor-nav-menu .elementor-item:hover {
        color: var(--e-global-color-primary);
    }

    nav.elementor-nav-menu--dropdown.elementor-nav-menu__container.menu-visible:before {
        /* backdrop-filter: blur(20.93684196472168px); */
        background: url(../images/mobileMenuBg.webp) no-repeat center center / cover;
        background-size: inherit;
    }

    nav.elementor-nav-menu--dropdown.elementor-nav-menu__container.menu-visible:before,
    nav.elementor-nav-menu--dropdown.elementor-nav-menu__container.menu-visible:after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
    }

    nav.elementor-nav-menu--dropdown.elementor-nav-menu__container.menu-visible:after {
        backdrop-filter: blur(9px);
        background: rgba(22, 22, 22, 0.81);
    }

    /* ── TOGGLE ABOVE OVERLAY ── */
    .elementor-menu-toggle,
    body .headerLogo>a {
        position: relative;
        z-index: 9999 !important;
    }

    .elementor-menu-toggle.elementor-active svg path {
        fill: #ffffff;
        transition: fill 0.3s;
    }

    .jsc-grid {
        --count: 3;
    }

    .jscsl-grid,
    .jscsl-topbar {
        --count: 2;
    }

    .jscsl-topbar-right {

        grid-column-start: 2;
        grid-column-end: 3;
    }

    .jscsl-area-item {
        padding: 13.4px 14px;
        font-size: 16px;
    }

    .jsc-case-card a,
    span.jsc-case-title {
        font-size: 18px;
    }

    nav.elementor-nav-menu--dropdown .elementor-nav-menu .elementor-item.elementor-item-active span.text-front.split-done {
        color: var(--e-global-color-primary);
    }
}

/* 1024 */
@media screen and (max-width:991px) {}

@media screen and (max-width:880px) {
    .section_practice_area li {
        font-size: 16px;
        padding-left: 15px;
    }

    .section_practice_area li::before {
        top: 7px;
        width: 5px;
        height: 5px;
    }
}

@media (max-width: 767px) {
    .jscsl-wrap {
        flex-direction: column;
        gap: 16px;
    }

    .jscsl-sidebar {
        width: 100%;
        max-height: none;
        grid-column: span 12;
    }

    .jscsl-sidebar-section {
        position: relative;
        top: 0;
        z-index: 9;
    }

    .jscsl-area-list {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        padding: 10px;
        z-index: 9;
        max-height: 40vh !important;
        overflow: hidden;
        overflow-y: auto;
        box-shadow: 0 20px 17px 5px rgba(0, 0, 0, 0.25);
    }

    .jscsl-main {
        padding-left: 0;
        grid-column: span 12;
    }

    .jscsl-topbar-right {
        width: 100%;
    }

    .jscsl-search-wrap {
        flex: 1;
        min-width: 0;
    }

    .jscsl-grid {
        gap: 14px;
    }


    .custom-contact-form .row {
        flex-direction: column;
    }



    .jsc-grid {
        --count: 2;
        gap: 20px;
        --gapY: 20px;
        --gapX: 20px;
    }

    .btn-flip::before,
    .btn-flip::after {
        font-size: 16px;
    }

    .jscsl-topbar {
        flex-direction: column-reverse;
    }

    .jscsl-sidebar-header {
        margin-bottom: 8px;
    }

    .barrister-contact__link  {
        font-size: 16px;
    }

    .section_practice_area {
        gap: 10px;
    }

    .barrister-contact__assistant-header {
        font-size: 16px;
    }

    .card {
        --card-width: 280px;
    }

    .barrister-contact__icon.icon-mail {
        top: 1px;
        position: relative;
    }

    .barrister-contact__icon.icon-linkedin2 {
        top: -1px;
        position: relative;
    }

    .jsc-case-card a,
    span.jsc-case-title {
        font-size: 16px;
    }

    body .bridge-container {
        max-width: 295px;
        max-height: 20px;
    }

    body .jsc-select-wrap {
        flex: 0 0 auto;
    }

    body .aboutHowweworkImage {
        width: 100% !important;
    }

    body .aboutHowweworkImage img {

        width: 100% !important;
    }

    .jsc-search-wrap input#jsc-search,
    body .jsc-dropdown-btn,
    .jsc-dropdown-label,
    .jscsl-sidebar-header,
    .jscsl-select-wrap span.jsc-dropdown-label {
        font-size: 17px;
    }

    .jscsl-card-name,
    .jsc-card-name {
        font-size: 24px;
    }

    span.barrister-contact__icon.icon-mail {
        font-size: 11px;
    }
}

/* 767 */
@media (max-width: 600px) {
    .jsc-filter-bar {
        flex-direction: column;
    }

    .jsc-select-wrap,
    .jsc-search-wrap {
        min-width: 100%;
        width: 100%;
        flex: 0 0 auto;
    }

    .admin-bar header.elementor-location-header:not(.scrolled) {
        top: 31px;
    }

}

@media (max-width: 575px) {

    .jscsl-topbar {
        --count: 1;
        gap: 15px;
    }

    .jscsl-grid {
        --count: 1;
        --gapY: 15px;
        --gapX: 15px;
    }

    .jscsl-topbar-right {
        grid-column-start: 1;
        grid-column-end: 2;
    }

    .jsc-grid {
        --count: 1;
        --gapY: 15px;
        --gapX: 15px;
    }

    .card {
        --card-width: 260px;
    }

    .jscsl-active-tags,
    .jsc-active-tags {
        grid-column: span 1;
    }

    .section_practice_area {
        grid-template-columns: 1fr;
    }
}