/* =========================================================
   DESKTOP OFFCANVAS MENU
   ========================================================= */

@media (min-width: 1024px) {

  /* Hamburger */
  #desktop-menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 24px;
    width: 24px;
  }

  .hamburger-lines {
    display: block;
    width: 24px;
    height: 3px;
    background: #333;
    margin: 3px 0;
    transition: background .3s;
  }

  #desktop-menu-toggle:hover .hamburger-lines {
    background: #e10600;
  }


  /* Main Offcanvas */
  #desktop-offcanvas {
    --offcanvas-width: 320px;

    position: fixed;
    top: 0;
    left: calc(-1 * var(--offcanvas-width));
    width: var(--offcanvas-width);
    height: 100vh;

    background: #F5F7FA;
    transition: left .3s ease, width .25s ease;

    z-index: 10000;
    visibility: hidden;
    overflow: hidden;
  }


  #desktop-offcanvas.nested-open {
    --offcanvas-width: 640px;
  }


  body.desktop-offcanvas-open #desktop-offcanvas {
    left: 0;
    visibility: visible;
  }


  .bottom-drawer-header {
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:12px 20px;

    border-bottom:1px solid #E5EAF1;
    color:#253041;
  }


  .bottom-drawer-title {
    margin:0;
    font-size:1.4rem;
    font-weight:bold;
  }


  .offcanvas-close {
    background:none;
    border:none;

    color:#253041;
    cursor:pointer;

    font-size:1rem;
    font-weight:bold;
  }


  .bottom-drawer-body {
    height:calc(100vh - 60px);
    overflow:hidden;
  }


  .nav-wrap {
    display:flex;
    height:100%;
  }


  .top-level-nav,
  .nested-level-nav {

    min-width:320px;
    height:100%;

    overflow-y:auto;

    background:#F5F7FA;
  }


  .top-level-nav ul ul {
    display:none;
  }


  .nested-level-nav {

    display:none;

    background:#F5F7FA;

    border-left:1px solid #E5EAF1;
  }


  .nested-level-nav.visible {
    display:block;
  }


  .top-level-nav::-webkit-scrollbar,
  .nested-level-nav::-webkit-scrollbar {

    width:0;
    background:transparent;

  }


  .categories-nav-list {

    list-style:none;
    padding:0;
    margin:0;

  }


  .categories-nav-list-item {

    position:relative;

  }


  .categories-nav-list-item.active > .category-link {

    background-color:#e8363c;
    color:#fff !important;

  }


  .categories-nav-list-item.active .arrow {

    color:#fff;

  }


  .category-link {

    display:flex;

    justify-content:space-between;
    align-items:center;

    padding:12px 20px;

    color:#253041;

    text-decoration:none;

    font-size:16px;
    font-weight:600;

    transition:background-color .25s ease;

  }


  .categories-nav-list-item:hover > .category-link {

    background-color:#e8363c;
    color:#fff !important;

  }


  .arrow {

    font-size:18px;

    opacity:1;

    color:#253041;

    transition:transform .25s ease,color .25s ease;

  }


  .has-children:hover .arrow {

    transform:translateX(5px);

    color:#fff;

  }


  .nav-wrap .category-link {

    color:#253041 ;

  }


  .nav-wrap .category-link:hover,
  .nav-wrap .category-link:focus {

    color:#fff !important;

  }


  /* Nested header */

  .categories-nav-title-wrap {

    padding:12px 20px;

    border-bottom:1px solid #E5EAF1;

    color:#253041;

  }


  .categories-nav-back {

    background:none;

    border:none;

    color:#253041;

    cursor:pointer;

    font-size:16px;

    display:flex;

    align-items:center;

    margin-bottom:8px;

  }


  .categories-nav-heading {

    margin:0;

    font-size:1.4rem;

  }


  .top-level-nav .categories-nav-list,
  .nested-level-nav .categories-nav-list {

    padding:6px 10px;

  }


  .top-level-nav .categories-nav-list-item,
  .nested-level-nav .categories-nav-list-item {

    margin-bottom:10px;

    border-bottom:none;

  }


  .top-level-nav .category-link,
  .nested-level-nav .category-link {

    display:flex;

    align-items:center;

    padding:12px 16px;

    background:#FFFFFF;

    border-radius:8px;

    box-shadow:0 2px 10px rgba(0,0,0,.05);

    border:1px solid #DDE4EC;

    transition:background .18s ease,transform .08s ease;

  }


  .top-level-nav .categories-nav-list-item:last-child,
  .nested-level-nav .categories-nav-list-item:last-child {

    margin-bottom:0;

  }

}


/* =========================================================
   BUTTONS
   ========================================================= */


.bottom-drawer-close,
.offcanvas-close,
.categories-nav-back,
.bottom-drawer-close *,
.offcanvas-close *,
.categories-nav-back * {

  background:transparent !important;
  background-color:transparent !important;

  color:#253041 !important;

  border:none !important;

  box-shadow:none !important;

}


.bottom-drawer-close,
.offcanvas-close,
.categories-nav-back {

  display:inline-flex !important;

  align-items:center !important;

  justify-content:center !important;

  padding:6px 10px !important;

  color:#253041 !important;

  background:transparent !important;

  border:1px solid rgba(255,255,255,.08) !important;

  border-radius:8px !important;

  box-shadow:0 1px 3px rgba(0,0,0,.12) !important;

  transition:
    background .16s ease,
    transform .08s ease,
    box-shadow .12s ease !important;

}


.bottom-drawer-close:hover,
.offcanvas-close:hover,
.categories-nav-back:hover {

  background:rgba(255,255,255,.03) !important;

  transform:translateY(-1px) !important;

  box-shadow:0 3px 6px rgba(0,0,0,.18) !important;

}


.bottom-drawer-close:active,
.offcanvas-close:active,
.categories-nav-back:active {

  transform:translateY(0) !important;

  background:#FFFFFF !important;

}


/* =========================================================
   SERVICES CARDS
   ========================================================= */


.services-section {

    display:flex !important;

    flex-direction:row !important;

    flex-wrap:nowrap !important;

    justify-content:flex-start !important;

    gap:8px !important;

    padding:12px 16px 15px 16px !important;

    border-bottom:1px solid #E5EAF1 !important;

    overflow-x:auto !important;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:none !important;

    margin:0 !important;

    margin-bottom:15px !important;

}


.services-section::-webkit-scrollbar {

    display:none !important;

}


.service-card {

    flex:0 0 78px !important;

    width:78px !important;

    min-width:78px !important;

    max-width:78px !important;

    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;

    justify-content:flex-start !important;

    padding:10px 4px 8px !important;

    background:#fff !important;

    border:1px solid #DDE4EC !important;

    border-radius:10px !important;

    text-decoration:none !important;

    color:#253041 !important;

    transition:all .18s ease !important;

    text-align:center !important;

    box-sizing:border-box !important;

}


.service-card:hover,
.service-card:focus {

    background:#e8363c !important;

    transform:translateY(-2px) !important;

    color:#fff !important;

    box-shadow:0 4px 12px rgba(232,54,60,.3) !important;

}


.service-card:hover .service-title,
.service-card:hover .service-icon {

    color:#fff !important;

}


.service-card:active {

    transform:translateY(0) !important;

    background:rgba(255,255,255,.08) !important;

}


.service-icon {

    font-size:28px !important;

    margin-bottom:6px !important;

    line-height:1 !important;

}


.service-title {

    font-size:11px !important;

    font-weight:500 !important;

    line-height:1.25 !important;

    width:100% !important;

    white-space:normal !important;

    word-break:break-word !important;

    text-align:center !important;

}




/* =========================================================
   SERVICES DESKTOP / MOBILE OVERRIDES
   ========================================================= */


@media (min-width:1024px) {

    .services-section {

        justify-content:space-between !important;

        gap:6px !important;

        padding:12px 16px 16px !important;

        overflow-x:hidden !important;

    }


    .service-card {

        flex:0 0 96px !important;

        width:96px !important;

        min-width:96px !important;

        max-width:96px !important;

        padding:14px 4px 14px !important;

    }


    .service-icon {

        font-size:26px !important;

        margin-bottom:5px !important;

    }


    .service-title {

        font-size:10px !important;

        line-height:1.2 !important;

    }

}



@media (max-width:1023px) {


    .services-section {

        justify-content:space-evenly !important;

        padding:12px 16px 16px !important;

        gap:10px !important;

    }


    .service-card {

        flex:0 0 100px !important;

        width:100px !important;

        min-width:100px !important;

        max-width:100px !important;

        padding:10px 4px 8px !important;

    }


    .service-icon {

        font-size:28px !important;

    }


    .service-title {

        font-size:11px !important;

    }

}



/* =========================================================
   MOBILE OFFCANVAS
   ========================================================= */


@media (max-width:1023px) {


    #desktop-offcanvas {

        position:fixed;

        top:0;

        left:0;

        width:100%;

        height:100vh;

        background:#F5F7FA;

        z-index:10000;

        visibility:hidden;

        transform:translateX(-100%);

        transition:transform .3s ease;

        overflow:hidden;

    }



    body.desktop-offcanvas-open #desktop-offcanvas {

        transform:translateX(0);

        visibility:visible;

    }



    .nav-wrap {

        display:block;

        position:relative;

        height:100%;

        overflow:hidden;

    }



    .top-level-nav,
    .nested-level-nav {


        position:absolute;

        top:0;

        left:0;

        width:100%;

        height:100%;


        overflow-y:auto;


        background:#F5F7FA;


        transform:translateX(0);


        transition:transform .35s ease;


        visibility:visible;


    }



    .nested-level-nav {

        transform:translateX(100%);

        visibility:hidden;

    }



    .nested-level-nav.visible {

        visibility:visible;

    }



    /* headers */


    .categories-nav-title-wrap {

        position:relative;

        padding:12px 20px;

        border-bottom:1px solid #E5EAF1;

        color:#253041;

        display:flex;

        align-items:center;

        justify-content:center;

    }



    .categories-nav-back {


        position:absolute;

        left:20px;

        top:50%;

        transform:translateY(-50%);

        margin:0;


    }



    .bottom-drawer-close,
    .offcanvas-close {


        position:absolute;

        right:20px;

        top:50%;

        transform:translateY(-50%);


    }



    .bottom-drawer-body {


        height:calc(100vh - 60px);

        overflow:hidden;


    }



    .categories-nav-list {


        list-style:none;

        padding:6px 12px;

        margin:0;


    }



    .categories-nav-list-item {


        position:relative;

        border-bottom:none;

        margin-bottom:10px;


    }



    .categories-nav-list-item.active > .category-link {


        background-color:#e8363c;

        color:#fff !important;


    }



    .categories-nav-list-item.active .arrow {


        color:#253041;


    }



    .category-link {


        display:flex;

        justify-content:space-between;

        align-items:center;


        padding:14px 18px;


        color:#253041;


        text-decoration:none;


        font-size:16px;


        font-weight:600;


        background:#FFFFFF;


        border-radius:10px;


        box-shadow:0 2px 10px rgba(0,0,0,.05);


        border:1px solid #DDE4EC;


        transition:background .18s ease, transform .08s ease;


        -webkit-tap-highlight-color:transparent;


    }



    .category-link:active {


        background:#F8FAFC;


        transform:translateY(1px);


    }



    .arrow {


        font-size:18px;

        margin-left:10px;

        opacity:.9;

        color:#253041;

        transition:none;


    }



    .nav-wrap .category-link,
    .nav-wrap .category-link:focus {


        color:#253041 !important;


    }



    .top-level-nav ul ul {


        display:none;


    }



    /* depth */


    nav[data-level="0"] .category-link {

        padding-left:18px;

    }


    nav[data-level="1"] .category-link {

        padding-left:26px;

    }


    nav[data-level="2"] .category-link {

        padding-left:34px;

    }


    nav[data-level="3"] .category-link {

        padding-left:42px;

    }



    .categories-nav-list-item:last-child {


        margin-bottom:0;


    }



    /* main header */


    .bottom-drawer-header {


        position:relative;


        display:flex;


        align-items:center;


        justify-content:center;


        padding:12px 20px;


    }



    .bottom-drawer-title {


        margin:0;


        font-size:1.4rem;


        font-weight:bold;


        text-align:center;


    }



    .bottom-drawer-header .offcanvas-close {


        position:absolute;


        right:20px;


        top:50%;


        transform:translateY(-50%);


    }


}



/* =========================================================
   TOUCH DEVICES
   ========================================================= */


@media (hover:none) and (pointer:coarse) {


    .categories-nav-list-item:hover > .category-link {


        background-color:#FFFFFF !important;


        color:#253041 !important;


    }



    .has-children:hover .arrow {


        transform:none !important;


        color:#253041 !important;


    }


}



/* =========================================================
   BLOCKSY DEFAULT OFFCANVAS ISOLATION
   ========================================================= */


body:not(.desktop-offcanvas-open) .ct-offcanvas,
body:not(.desktop-offcanvas-open) .ct-offcanvas-content,
body:not(.desktop-offcanvas-open) #offcanvas {


    display:none !important;


}



body.desktop-offcanvas-open .ct-offcanvas-backdrop {


    display:none !important;


}



/* =========================================================
   SCROLL LOCK
   ========================================================= */


body.desktop-offcanvas-open {


    overflow:hidden;

    touch-action:none;

}



/* =========================================================
   MOBILE CATEGORY TITLE
   ========================================================= */


@media (max-width:1023px) {


    .categories-nav-heading {


        font-size:15px !important;


        font-weight:600 !important;


        letter-spacing:.1px !important;


        line-height:1.2 !important;


        white-space:nowrap !important;


        overflow:hidden !important;


        text-overflow:ellipsis !important;


    }


}