.logiss-ms-wrap{width:100%;max-width:1660px;margin:0 auto;padding:18px 26px 22px;box-sizing:border-box}
.logiss-ms-row{display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-start;gap:34px;width:100%;overflow-x:auto;overflow-y:hidden;padding:18px 10px 28px;box-sizing:border-box;scroll-snap-type:x proximity;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#176b21 rgba(23,107,33,.10)}
.logiss-ms-row::-webkit-scrollbar{height:5px}.logiss-ms-row::-webkit-scrollbar-thumb{background:#176b21;border-radius:20px}.logiss-ms-row::-webkit-scrollbar-track{background:rgba(23,107,33,.08);border-radius:20px}
.logiss-ms-card{flex:1 1 0;min-width:180px;max-width:270px;text-align:center;text-decoration:none!important;color:#444!important;scroll-snap-align:center;box-sizing:border-box}
.logiss-ms-circle{position:relative;display:block;width:100%;aspect-ratio:1/1;border-radius:50%;padding:7px;box-sizing:border-box;background:linear-gradient(145deg,#fff9c7 0%,#d7a315 35%,#fff3a3 55%,#9f7300 100%);box-shadow:0 9px 0 rgba(126,91,0,.25),0 17px 25px rgba(0,0,0,.22),inset 0 3px 5px rgba(255,255,255,.95),inset 0 -5px 8px rgba(112,78,0,.22);transition:transform .18s ease,box-shadow .18s ease}
.logiss-ms-circle:before{content:"";position:absolute;inset:4px;border-radius:50%;border:2px solid rgba(255,255,255,.72);pointer-events:none;z-index:2}
.logiss-ms-circle img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.logiss-ms-name{display:block;margin-top:19px;font-size:17px;font-weight:800;line-height:1.2;text-transform:uppercase;color:#4b4b4b;text-shadow:0 1px 0 #fff}
.logiss-ms-card:hover .logiss-ms-circle,.logiss-ms-card:focus .logiss-ms-circle{transform:translateY(-5px) scale(1.015);box-shadow:0 12px 0 rgba(23,107,33,.20),0 22px 30px rgba(0,0,0,.24),inset 0 3px 5px rgba(255,255,255,.95),inset 0 -5px 8px rgba(112,78,0,.22)}
.logiss-ms-card:focus{outline:3px solid rgba(23,107,33,.35);outline-offset:6px;border-radius:10px}

/* More than six: preserve a six-item desktop viewport and scroll the rest. */
.logiss-ms-row:has(.logiss-ms-card:nth-child(7)){justify-content:flex-start}
.logiss-ms-row:has(.logiss-ms-card:nth-child(7)) .logiss-ms-card{flex:0 0 calc((100% - 170px)/6);max-width:none}

/* Mobile: exactly three circles visible. Additional items remain in same row and scroll. */
@media(max-width:700px){
 .logiss-ms-wrap{padding:8px 8px 14px}
 .logiss-ms-row{justify-content:flex-start;gap:9px;padding:12px 2px 20px}
 .logiss-ms-card,.logiss-ms-row:has(.logiss-ms-card:nth-child(7)) .logiss-ms-card{flex:0 0 calc((100% - 18px)/3);width:calc((100% - 18px)/3);min-width:calc((100% - 18px)/3);max-width:none}
 .logiss-ms-circle{padding:4px;box-shadow:0 5px 0 rgba(126,91,0,.24),0 9px 14px rgba(0,0,0,.19),inset 0 2px 3px rgba(255,255,255,.95),inset 0 -3px 5px rgba(112,78,0,.20)}
 .logiss-ms-circle:before{inset:2px;border-width:1px}
 .logiss-ms-name{margin-top:10px;font-size:clamp(8px,2.6vw,11px);line-height:1.15;min-height:2.3em;display:flex;align-items:flex-start;justify-content:center}
}
@media(max-width:390px){
 .logiss-ms-wrap{padding-left:6px;padding-right:6px}
 .logiss-ms-row{gap:6px}
 .logiss-ms-card,.logiss-ms-row:has(.logiss-ms-card:nth-child(7)) .logiss-ms-card{flex-basis:calc((100% - 12px)/3);width:calc((100% - 12px)/3);min-width:calc((100% - 12px)/3)}
 .logiss-ms-name{font-size:clamp(7px,2.45vw,9.5px)}
}


/* v1.0.3 carousel controls */
.logiss-ms-wrap{position:relative}
.logiss-ms-arrow{position:absolute;top:50%;z-index:6;width:42px;height:42px;margin-top:-30px;border:1px solid rgba(15,85,24,.55);border-radius:50%;background:linear-gradient(145deg,#21822c,#0f5518);color:#fff;font-size:22px;font-weight:800;line-height:38px;text-align:center;cursor:pointer;box-shadow:0 5px 0 #0b4012,0 9px 14px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.38);transition:transform .16s ease,box-shadow .16s ease}
.logiss-ms-arrow:hover,.logiss-ms-arrow:focus{transform:translateY(-2px);box-shadow:0 7px 0 #d7a315,0 11px 16px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.38);outline:none}
.logiss-ms-prev{left:2px}.logiss-ms-next{right:2px}
@media(max-width:700px){
 .logiss-ms-arrow{width:30px;height:30px;margin-top:-23px;font-size:15px;line-height:27px}
 .logiss-ms-prev{left:1px}.logiss-ms-next{right:1px}
 .logiss-ms-row{padding-left:5px;padding-right:5px}
}


/* v1.0.4 visual correction
 * Hide the native horizontal scrollbar while retaining touch/mouse scrolling.
 * Move navigation arrows outside the student content area.
 */
.logiss-ms-row{
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}
.logiss-ms-row::-webkit-scrollbar{
  display:none !important;
  width:0 !important;
  height:0 !important;
}
.logiss-ms-wrap{
  padding-left:58px;
  padding-right:58px;
}
.logiss-ms-prev{left:8px !important;}
.logiss-ms-next{right:8px !important;}

@media(max-width:700px){
  .logiss-ms-wrap{
    padding-left:38px;
    padding-right:38px;
  }
  .logiss-ms-prev{left:3px !important;}
  .logiss-ms-next{right:3px !important;}
}
@media(max-width:390px){
  .logiss-ms-wrap{
    padding-left:34px;
    padding-right:34px;
  }
}


/* v1.0.5 mobile arrow refinement */
@media(max-width:700px){
  /* Give the carousel controls slightly more breathing room from the circles. */
  .logiss-ms-wrap{
    padding-left:44px !important;
    padding-right:44px !important;
  }
  .logiss-ms-prev{left:2px !important;}
  .logiss-ms-next{right:2px !important;}

  /* Smaller mobile-only navigation buttons/icons. */
  .logiss-ms-arrow{
    width:25px !important;
    height:25px !important;
    margin-top:-20px !important;
    font-size:11px !important;
    line-height:22px !important;
    padding:0 !important;
  }
}
@media(max-width:390px){
  .logiss-ms-wrap{
    padding-left:40px !important;
    padding-right:40px !important;
  }
}


/* v1.0.6 carousel edge + spacing refinement */
.logiss-ms-wrap{
  overflow:hidden !important;
  padding-top:4px !important;
  padding-bottom:6px !important;
}

/* Give the visible track a soft fade at both horizontal edges so cards
   entering/leaving the carousel do not appear abruptly cut. */
.logiss-ms-row{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);
  padding-top:5px !important;
  padding-bottom:7px !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
}
.logiss-ms-card{
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* Keep arrows crisp and outside the faded track. */
.logiss-ms-arrow{
  z-index:10 !important;
}

@media(max-width:700px){
  .logiss-ms-wrap{
    padding-top:2px !important;
    padding-bottom:4px !important;
  }
  .logiss-ms-row{
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
    padding-top:4px !important;
    padding-bottom:5px !important;
  }
}


/* v1.0.7 desktop navigation clearance
   Desktop arrows sit farther outside the visible slider track.
   Mobile keeps the approved v1.0.6/v1.0.5 spacing. */
@media(min-width:701px){
  .logiss-ms-wrap{
    padding-left:82px !important;
    padding-right:82px !important;
  }
  .logiss-ms-prev{left:10px !important;}
  .logiss-ms-next{right:10px !important;}
  .logiss-ms-row{
    /* Slightly wider soft edge transition so entering cards do not meet arrows. */
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 30px,#000 calc(100% - 30px),transparent 100%) !important;
    mask-image:linear-gradient(to right,transparent 0,#000 30px,#000 calc(100% - 30px),transparent 100%) !important;
  }
}


/* v1.0.8 transparent desktop carousel edges
   Fade the actual moving content to full transparency before it reaches
   the navigation controls. Mobile retains its existing treatment. */
@media(min-width:701px){
  .logiss-ms-wrap{
    overflow:visible !important;
  }

  .logiss-ms-row{
    overflow-x:auto !important;
    overflow-y:visible !important;

    -webkit-mask-image:linear-gradient(
      to right,
      transparent 0,
      transparent 18px,
      rgba(0,0,0,.18) 34px,
      rgba(0,0,0,.55) 52px,
      #000 78px,
      #000 calc(100% - 78px),
      rgba(0,0,0,.55) calc(100% - 52px),
      rgba(0,0,0,.18) calc(100% - 34px),
      transparent calc(100% - 18px),
      transparent 100%
    ) !important;
    mask-image:linear-gradient(
      to right,
      transparent 0,
      transparent 18px,
      rgba(0,0,0,.18) 34px,
      rgba(0,0,0,.55) 52px,
      #000 78px,
      #000 calc(100% - 78px),
      rgba(0,0,0,.55) calc(100% - 52px),
      rgba(0,0,0,.18) calc(100% - 34px),
      transparent calc(100% - 18px),
      transparent 100%
    ) !important;
  }

  .logiss-ms-arrow{
    z-index:20 !important;
  }
}