/* =========================================================
   SKITCE – Responsive menu (Helix Ultimate)
   Paste into: Template Options > Custom Code > Custom CSS
   (after itce-header.css, itce-footer.css and itce-logo.css)
   ========================================================= */

/* ---------- 1. Medium desktops (992–1199px): keep everything on one line ---------- */
@media (min-width:992px) and (max-width:1199.98px){
  #sp-header .logo img.logo-image{height:46px!important}
  #sp-header .sp-megamenu-parent>li>a,
  #sp-header .sp-megamenu-parent>li>span{padding:10px 10px!important;margin:0;font-size:14px}
  #sp-header .sp-megamenu-parent>li>a:after{left:10px;right:10px}
  #sp-header .header-modules{margin-inline-start:8px;padding-inline-start:10px}
  .itce-search-btn{width:40px;height:40px;font-size:14px}
}
@media (min-width:992px){
  #sp-header .sp-megamenu-parent{display:flex!important;flex-wrap:nowrap;align-items:center}
  #sp-header .sp-megamenu-parent>li>a{white-space:nowrap}
}

/* ---------- 2. Tablet & mobile header (<992px) ---------- */
@media (max-width:991.98px){
  #sp-header,#sp-header .row{min-height:72px!important}
  #sp-header.header-sticky,#sp-header.header-sticky .row{min-height:64px!important}
  #sp-header .container{padding-inline:16px}
  #sp-header #sp-logo{flex:1 1 auto;min-width:0}
  #sp-header #sp-menu{flex:0 0 auto}
  #sp-header .logo img.logo-image-phone{height:40px!important;max-width:100%;object-fit:contain;object-position:left center}
  html[dir=rtl] #sp-header .logo img.logo-image-phone{object-position:right center}
  #sp-header .sp-column.d-flex{gap:8px}
  /* search button next to the burger */
  .itce-search-btn--mobile{width:42px;height:42px;margin:0!important;font-size:15px;box-shadow:0 6px 16px rgba(15,163,177,.28)}
  /* burger button */
  #offcanvas-toggler{width:42px;height:42px;border-radius:12px;display:flex!important;align-items:center;justify-content:center;
    background:#f1f5f9;border:1px solid #e6ebf1;margin:0!important;transition:background .25s,border-color .25s}
  #offcanvas-toggler:hover,#offcanvas-toggler:focus-visible{background:#e6f6f7;border-color:#0fa3b1}
  #offcanvas-toggler .burger-icon{width:20px;display:flex;flex-direction:column;gap:4px}
  #offcanvas-toggler .burger-icon>span{display:block;height:2px;width:100%;margin:0!important;border-radius:2px;background:#0b2545!important;transition:transform .3s,opacity .3s,width .3s}
  #offcanvas-toggler .burger-icon>span:nth-child(2){width:70%}
  html[dir=rtl] #offcanvas-toggler .burger-icon{align-items:flex-end}
  #offcanvas-toggler:hover .burger-icon>span:nth-child(2){width:100%}
  /* top bar: compact, centred, one line */
  #sp-top-bar .row{min-height:auto;padding:6px 0}
  #sp-top-bar #sp-top1,#sp-top-bar #sp-top2{width:100%;flex:0 0 100%}
  #sp-top-bar .sp-column{text-align:center!important;padding:3px 0}
  #sp-top-bar ul.social-icons{gap:5px}
  #sp-top-bar ul.social-icons>li>a{width:28px;height:28px;font-size:12px}
  #sp-top-bar ul.sp-contact-info{justify-content:center}
  #sp-top-bar ul.sp-contact-info>li{padding:2px 8px;font-size:12.5px}
}
@media (max-width:575.98px){
  #sp-top-bar .sp-contact-email{display:none!important}
  #sp-top-bar #sp-top2{display:none}           /* very small phones: social icons only */
}

/* ---------- 3. Off-canvas menu panel (opens from the burger) ---------- */
/* keep the closed panel completely off-screen (Helix hides it by its own 300px width) */
html,body{overflow-x:hidden}
body:not(.offcanvas-active) .offcanvas-menu{visibility:hidden;box-shadow:none!important}
body.offcanvas-active .offcanvas-menu{visibility:visible}
.offcanvas-menu{transition:right .4s ease,left .4s ease,transform .4s ease,visibility 0s linear .4s!important}
body.offcanvas-active .offcanvas-menu{transition:right .4s ease,left .4s ease,transform .4s ease,visibility 0s!important}
.offcanvas-overlay{background:rgba(6,21,41,.55)!important;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:opacity .35s}
.offcanvas-menu{
  width:300px!important;max-width:85vw!important;
  background:linear-gradient(170deg,#061529 0%,#0b2545 55%,#0e4a63 100%)!important;color:#c9d6e5;
  box-shadow:none;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.offcanvas-menu:before{ /* thin animated accent line, like the top bar */
  content:"";position:sticky;display:block;top:0;height:3px;z-index:3;
  background:linear-gradient(90deg,transparent,#0fa3b1,#f2a541,#0fa3b1,transparent);background-size:200% 100%;animation:itceBar 8s linear infinite;
}
@keyframes itceBar{to{background-position:-200% 0}}
/* panel header: logo + close */
.offcanvas-menu>.d-flex,.offcanvas-menu .offcanvas-header{padding:18px 20px 14px!important;border-bottom:1px solid rgba(255,255,255,.08);align-items:center}
.offcanvas-active .offcanvas-menu{box-shadow:0 0 60px rgba(0,0,0,.35)}
.offcanvas-menu .logo{background:#fff;border-radius:12px;padding:6px 10px;line-height:0}
.offcanvas-menu .logo img{height:32px!important;width:auto;max-width:200px;object-fit:contain}
.offcanvas-menu .close-offcanvas{
  width:40px;height:40px;border-radius:50%;margin-inline-start:auto;display:grid!important;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);transition:transform .3s,background .3s;
}
.offcanvas-menu .close-offcanvas:hover{background:#0fa3b1;transform:rotate(90deg)}
.offcanvas-menu .close-offcanvas .burger-icon{width:18px;height:18px;position:relative}
.offcanvas-menu .close-offcanvas .burger-icon>span{position:absolute;left:0;top:50%;width:100%;height:2px;margin:0!important;background:#fff!important;border-radius:2px}
.offcanvas-menu .close-offcanvas .burger-icon>span:nth-child(1){transform:rotate(45deg)}
.offcanvas-menu .close-offcanvas .burger-icon>span:nth-child(2){opacity:0}
.offcanvas-menu .close-offcanvas .burger-icon>span:nth-child(3){transform:rotate(-45deg)}
/* menu */
.offcanvas-menu .offcanvas-inner{padding:18px 16px 28px!important}
.offcanvas-menu .offcanvas-inner .sp-module{margin:0 0 18px!important;padding:0}
.offcanvas-menu .offcanvas-inner ul.menu{list-style:none;margin:0;padding:0}
.offcanvas-menu .offcanvas-inner ul.menu>li{margin:0 0 4px;position:relative}
/* items slide in when the panel opens (never hidden if the animation doesn't run) */
.offcanvas-active .offcanvas-menu .offcanvas-inner ul.menu>li{animation:itceMenuIn .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes itceMenuIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
html[dir=rtl] .offcanvas-active .offcanvas-menu .offcanvas-inner ul.menu>li{animation-name:itceMenuInRtl}
@keyframes itceMenuInRtl{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.offcanvas-active .offcanvas-menu ul.menu>li:nth-child(1){animation-delay:.06s}
.offcanvas-active .offcanvas-menu ul.menu>li:nth-child(2){animation-delay:.10s}
.offcanvas-active .offcanvas-menu ul.menu>li:nth-child(3){animation-delay:.14s}
.offcanvas-active .offcanvas-menu ul.menu>li:nth-child(4){animation-delay:.18s}
.offcanvas-active .offcanvas-menu ul.menu>li:nth-child(5){animation-delay:.22s}
.offcanvas-active .offcanvas-menu ul.menu>li:nth-child(6){animation-delay:.26s}
.offcanvas-active .offcanvas-menu ul.menu>li:nth-child(n+7){animation-delay:.30s}
.offcanvas-menu .offcanvas-inner ul.menu>li>a,
.offcanvas-menu .offcanvas-inner ul.menu>li>span{
  display:flex!important;align-items:center;gap:12px;padding:14px 16px!important;border-radius:12px;
  font-size:16px;font-weight:600;color:#e6edf5!important;opacity:1!important;text-decoration:none;
  transition:background .25s,color .25s,padding .25s;
}
.offcanvas-menu .offcanvas-inner ul.menu>li>a:before{
  content:"";width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.25);flex:0 0 6px;transition:background .25s,transform .25s;
}
.offcanvas-menu .offcanvas-inner ul.menu>li>a:hover{background:rgba(255,255,255,.07);color:#fff!important;padding-inline-start:20px!important}
.offcanvas-menu .offcanvas-inner ul.menu>li>a:hover:before{background:#7fe0e8;transform:scale(1.3)}
.offcanvas-menu .offcanvas-inner ul.menu>li.active>a,
.offcanvas-menu .offcanvas-inner ul.menu>li.current>a{background:linear-gradient(90deg,rgba(15,163,177,.28),rgba(15,163,177,.08));color:#fff!important}
html[dir=rtl] .offcanvas-menu .offcanvas-inner ul.menu>li.active>a{background:linear-gradient(270deg,rgba(15,163,177,.28),rgba(15,163,177,.08))}
.offcanvas-menu .offcanvas-inner ul.menu>li.active>a:before,
.offcanvas-menu .offcanvas-inner ul.menu>li.current>a:before{background:#0fa3b1;box-shadow:0 0 0 4px rgba(15,163,177,.25)}
/* sub-menus */
.offcanvas-menu .offcanvas-inner ul.menu .menu-toggler{
  position:absolute;top:6px;inset-inline-end:6px;left:auto;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  color:#c9d6e5;background:rgba(255,255,255,.06);cursor:pointer;transition:background .25s,transform .3s}
html[dir=rtl] .offcanvas-menu .offcanvas-inner ul.menu .menu-toggler{right:auto}
.offcanvas-menu .offcanvas-inner ul.menu .menu-toggler:hover{background:rgba(15,163,177,.35)}
.offcanvas-menu .offcanvas-inner ul.menu li.menu-parent-open>.menu-toggler{transform:rotate(180deg)}
.offcanvas-menu .offcanvas-inner ul.menu ul{list-style:none;margin:4px 0 8px;padding:0;padding-inline-start:18px;border-inline-start:1px solid rgba(255,255,255,.12);margin-inline-start:22px}
.offcanvas-menu .offcanvas-inner ul.menu ul>li>a{display:block;padding:10px 14px!important;border-radius:10px;font-size:14.5px;font-weight:500;color:#b9c8da!important}
.offcanvas-menu .offcanvas-inner ul.menu ul>li>a:hover,.offcanvas-menu .offcanvas-inner ul.menu ul>li.active>a{color:#fff!important;background:rgba(255,255,255,.06)}
/* any search / social / contact modules inside the panel */
.offcanvas-menu .offcanvas-inner input.form-control{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.14)!important;color:#fff!important;border-radius:12px;height:48px}
.offcanvas-menu .offcanvas-inner input.form-control::placeholder{color:#9fb3c8}
.offcanvas-menu .offcanvas-inner ul.social-icons{display:flex;gap:8px;padding:16px 4px 0;margin:8px 0 0;border-top:1px solid rgba(255,255,255,.08);list-style:none}
.offcanvas-menu .offcanvas-inner ul.social-icons>li>a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#e6edf5!important}
.offcanvas-menu .offcanvas-inner ul.social-icons>li>a:hover{background:#0fa3b1}
.offcanvas-menu a:focus-visible,.offcanvas-menu .menu-toggler:focus-visible{outline:2px solid #7fe0e8;outline-offset:2px}
body.offcanvas-active{overflow:hidden}

/* ---------- 4. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .offcanvas-active .offcanvas-menu .offcanvas-inner ul.menu>li{animation:none}
  .offcanvas-menu:before{animation:none}
}