/* Marine Equipment & Spares: add this page's custom section styles here. Shared catalogue styles load first. */




/*section hero marine start here*/


/* =========================================================
   SINDYBAD — MARINE EQUIPMENT & SPARES
   Premium / full-screen / scoped
========================================================= */

.sbme,
.sbme * {
  box-sizing: border-box;
}


/* =========================================================
   ROOT
========================================================= */

.sbme {
  --sbme-blue: #1769D2;
  --sbme-blue-light: #4B8EF0;

  --sbme-aqua: #1BA7B0;
  --sbme-aqua-light: #58CCD0;

  --sbme-orange: #F09A2B;

  --sbme-text: #171923;
  --sbme-muted: #69717C;

  --sbme-line:
    rgba(23,25,35,.085);

  --sbme-dark: #06111B;
  --sbme-dark-2: #0A2132;

  position: relative;
  isolation: isolate;

  width: 100%;

  min-height:
    calc(100svh - 72px);

  overflow: hidden;

  color:
    var(--sbme-text);

  background:
    radial-gradient(
      circle at 13% 18%,
      rgba(23,105,210,.045),
      transparent 26%
    ),
    radial-gradient(
      circle at 40% 88%,
      rgba(27,167,176,.035),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #FFFFFF 0%,
      #FAFCFD 48%,
      #F1F5F7 100%
    );
}


/* premium top line */

.sbme::before {
  position: absolute;

  z-index: 20;

  top: 0;
  left: 0;

  width: 150px;
  height: 2px;

  content: "";

  background:
    linear-gradient(
      90deg,
      var(--sbme-blue),
      var(--sbme-aqua),
      var(--sbme-orange)
    );
}


/* background grid */

.sbme::after {
  position: absolute;

  z-index: -1;

  inset: 0;

  content: "";

  pointer-events: none;

  opacity: .40;

  background:
    linear-gradient(
      rgba(23,25,35,.022) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(23,25,35,.022) 1px,
      transparent 1px
    );

  background-size:
    76px 76px;

  -webkit-mask-image:
    linear-gradient(
      90deg,
      #000,
      rgba(0,0,0,.4) 44%,
      transparent 74%
    );

  mask-image:
    linear-gradient(
      90deg,
      #000,
      rgba(0,0,0,.4) 44%,
      transparent 74%
    );
}


/* =========================================================
   MAIN
========================================================= */

.sbme__main {
  display: grid;

  grid-template-columns:
    minmax(0,46%)
    minmax(0,54%);

  width: 100%;

  min-height:
    calc(100svh - 164px);
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.sbme__content {
  position: relative;

  display: flex;

  min-width: 0;

  align-items: center;

  overflow: hidden;

  padding:
    clamp(54px,6vh,84px)
    clamp(42px,6vw,115px);
}


.sbme__content::before {
  position: absolute;

  z-index: 0;

  top: 9%;
  left: -24%;

  width: 63%;

  aspect-ratio: 1;

  border:
    1px solid
    rgba(23,105,210,.06);

  border-radius: 50%;

  content: "";

  pointer-events: none;
}


.sbme__content::after {
  position: absolute;

  z-index: 0;

  right: -10%;
  bottom: -21%;

  width: 45%;

  aspect-ratio: 1;

  border:
    1px solid
    rgba(27,167,176,.055);

  border-radius: 50%;

  content: "";

  pointer-events: none;
}


.sbme__content-inner {
  position: relative;

  z-index: 2;

  width: 100%;

  max-width: 700px;
}


/* =========================================================
   KICKER
========================================================= */

.sbme__kicker {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 20px;

  color:
    #909AA5;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .15em;

  text-transform: uppercase;
}


.sbme__kicker span {
  color:
    var(--sbme-blue);
}


.sbme__kicker i {
  width: 36px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--sbme-blue),
      var(--sbme-aqua),
      var(--sbme-orange)
    );
}


/* =========================================================
   CLASSIFICATION
========================================================= */

.sbme__classification {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 15px;
}


.sbme__classification > span {
  display: grid;

  width: 31px;
  height: 31px;

  place-items: center;

  border:
    1px solid
    rgba(23,105,210,.14);

  border-radius: 7px;

  color:
    var(--sbme-blue);

  background:
    rgba(23,105,210,.035);

  font-size: 7px;
  font-weight: 900;
}


.sbme__classification small {
  display: block;

  color:
    #9AA3AD;

  font-size: 7px;
  font-weight: 900;

  letter-spacing: .11em;
}


.sbme__classification strong {
  display: block;

  margin-top: 3px;

  color:
    #68727D;

  font-size: 8px;
}


/* =========================================================
   TITLE
========================================================= */

.sbme__title {
  max-width: 670px;

  margin: 0;

  color:
    var(--sbme-text);

  font-size:
    clamp(34px,3vw,39px);

  font-weight: 880;

  line-height: 1.01;

  letter-spacing:
    -.045em;

  text-wrap: balance;
}


.sbme__title span {
  display: block;

  margin-top: 6px;

  color:
    var(--sbme-blue);
}


/* =========================================================
   COPY
========================================================= */

.sbme__lead {
  max-width: 650px;

  margin:
    24px
    0
    0;

  color:
    #5F6974;

  font-size:
    clamp(13px,.95vw,15px);

  line-height: 1.72;
}


.sbme__secondary {
  max-width: 625px;

  margin:
    11px
    0
    0;

  color:
    #89939D;

  font-size: 11px;

  line-height: 1.65;
}


/* =========================================================
   TAGS
========================================================= */

.sbme__tags {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: 22px;
}


.sbme__tags span {
  padding:
    7px
    10px;

  border:
    1px solid
    rgba(23,25,35,.075);

  border-radius: 5px;

  color:
    #68737E;

  background:
    rgba(255,255,255,.65);

  font-size: 8px;
  font-weight: 800;
}


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

.sbme__actions {
  display: flex;

  flex-wrap: wrap;

  gap: 9px;

  margin-top: 26px;
}


.sbme__button {
  display: inline-flex;

  min-height: 47px;

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

  gap: 14px;

  padding:
    0
    18px;

  border:
    1px solid
    rgba(23,25,35,.11);

  border-radius: 7px;

  color:
    var(--sbme-text);

  background:
    rgba(255,255,255,.78);

  font-size: 10px;
  font-weight: 850;

  text-decoration: none;

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}


.sbme__button--primary {
  color: #FFFFFF;

  border-color:
    var(--sbme-blue);

  background:
    var(--sbme-blue);

  box-shadow:
    0 14px 29px
    rgba(23,105,210,.18);
}


@media (hover:hover) {

  .sbme__button:hover {
    transform:
      translateY(-2px);

    box-shadow:
      0 12px 28px
      rgba(23,25,35,.09);
  }

}


/* =========================================================
   SERVICE LINE
========================================================= */

.sbme__service-line {
  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  max-width: 660px;

  margin-top: 31px;

  border-top:
    1px solid
    var(--sbme-line);

  border-bottom:
    1px solid
    var(--sbme-line);
}


.sbme__service-line > div {
  padding:
    13px
    12px;
}


.sbme__service-line > div:first-child {
  padding-left: 0;
}


.sbme__service-line > div + div {
  border-left:
    1px solid
    rgba(23,25,35,.06);
}


.sbme__service-line span {
  display: block;

  color:
    var(--sbme-orange);

  font-size: 7px;
  font-weight: 900;
}


.sbme__service-line strong {
  display: block;

  margin-top: 5px;

  color:
    #535E68;

  font-size: 9px;
}


/* =========================================================
   RIGHT SIDE
========================================================= */

.sbme__visual {
  min-width: 0;

  min-height: 0;

  padding:
    16px
    16px
    16px
    0;
}


/* =========================================================
   FIGURE
========================================================= */

.sbme__figure {
  position: relative;

  width: 100%;
  height: 100%;

  min-height:
    calc(100svh - 196px);

  margin: 0;

  overflow: hidden;

  border:
    1px solid
    rgba(23,25,35,.08);

  border-radius:
    28px
    28px
    28px
    80px;

  background:
    #06111B;

  box-shadow:
    0 28px 76px
    rgba(17,38,56,.16);
}


/* =========================================================
   IMAGE
========================================================= */

.sbme__image {
  position: absolute;

  z-index: 1;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position:
    center center;

  filter:
    saturate(.78)
    contrast(1.08)
    brightness(.78);

  transform:
    translate3d(
      var(--sbme-x,0),
      var(--sbme-y,0),
      0
    )
    scale(1.035);

  transition:
    transform .9s
    cubic-bezier(.2,.7,.2,1);
}


/* =========================================================
   SHADE
========================================================= */

.sbme__shade {
  position: absolute;

  z-index: 2;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(3,11,18,.10),
      rgba(3,11,18,.05) 32%,
      rgba(3,11,18,.22) 64%,
      rgba(3,11,18,.78) 100%
    ),
    linear-gradient(
      90deg,
      rgba(3,11,18,.24),
      transparent 55%
    );
}


/* =========================================================
   GRID
========================================================= */

.sbme__grid {
  position: absolute;

  z-index: 3;

  inset: 0;

  opacity: .18;

  pointer-events: none;

  background:
    linear-gradient(
      rgba(255,255,255,.08) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.08) 1px,
      transparent 1px
    );

  background-size:
    64px 64px;

  -webkit-mask-image:
    radial-gradient(
      circle at 52% 43%,
      #000,
      transparent 76%
    );

  mask-image:
    radial-gradient(
      circle at 52% 43%,
      #000,
      transparent 76%
    );
}


/* =========================================================
   DEPTH LINE
========================================================= */

.sbme__depth {
  position: absolute;

  z-index: 3;

  right: -5%;
  bottom: 25%;

  width: 75%;
  height: 30%;

  border-top:
    1px solid
    rgba(88,204,208,.20);

  border-bottom:
    1px solid
    rgba(23,105,210,.15);

  transform:
    rotate(-8deg);

  pointer-events: none;
}


/* =========================================================
   TOP BAR
========================================================= */

.sbme__visual-top {
  position: absolute;

  z-index: 7;

  top: 27px;
  right: 29px;
  left: 29px;

  display: flex;

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


.sbme__visual-top span {
  display: flex;

  align-items: center;

  gap: 8px;

  color:
    rgba(255,255,255,.68);

  font-size: 7px;
  font-weight: 900;

  letter-spacing: .14em;
}


.sbme__visual-top span i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--sbme-aqua-light);

  box-shadow:
    0 0 11px
    rgba(88,204,208,.55);
}


.sbme__visual-top b {
  color:
    rgba(255,255,255,.34);

  font-size: 7px;

  letter-spacing: .13em;
}


/* =========================================================
   TARGET
========================================================= */

.sbme__target {
  position: absolute;

  z-index: 4;

  top: 48%;
  right: 8%;

  width:
    min(48%,430px);

  aspect-ratio: 1;

  border:
    1px solid
    rgba(88,204,208,.20);

  border-radius: 50%;

  transform:
    translateY(-50%);

  pointer-events: none;
}


.sbme__target::before,
.sbme__target::after {
  position: absolute;

  border-radius: 50%;

  content: "";
}


.sbme__target::before {
  inset: 18%;

  border:
    1px solid
    rgba(255,255,255,.07);
}


.sbme__target::after {
  inset: 36%;

  border:
    1px dashed
    rgba(240,154,43,.25);
}


.sbme__target > span {
  position: absolute;

  top: 50%;
  left: 50%;
}


.sbme__target > span:nth-child(1) {
  width: 112%;
  height: 1px;

  background:
    rgba(255,255,255,.07);

  transform:
    translate(-50%,-50%);
}


.sbme__target > span:nth-child(2) {
  width: 1px;
  height: 112%;

  background:
    rgba(255,255,255,.07);

  transform:
    translate(-50%,-50%);
}


.sbme__target > span:nth-child(3) {
  width: 74%;
  height: 74%;

  border:
    1px solid
    rgba(23,105,210,.13);

  border-radius: 50%;

  transform:
    translate(-50%,-50%);
}


.sbme__node {
  position: absolute;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--sbme-aqua-light);

  box-shadow:
    0 0 0 5px
    rgba(88,204,208,.11),
    0 0 16px
    rgba(88,204,208,.40);
}


.sbme__node--a {
  top: 12%;
  right: 17%;
}


.sbme__node--b {
  right: -4px;
  top: 53%;

  background:
    var(--sbme-orange);
}


.sbme__node--c {
  bottom: 15%;
  left: 12%;
}


/* =========================================================
   VERTICAL
========================================================= */

.sbme__vertical {
  position: absolute;

  z-index: 6;

  right: 22px;
  top: 50%;

  color:
    rgba(255,255,255,.26);

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .18em;

  transform:
    translateY(-50%)
    rotate(90deg);
}


/* =========================================================
   BRAND
========================================================= */

.sbme__brand {
  position: absolute;

  z-index: 7;

  top: 69px;
  right: 28px;

  display: grid;

  width: 56px;
  height: 56px;

  place-content: center;

  border:
    1px solid
    rgba(255,255,255,.25);

  border-radius: 50%;

  color: #FFFFFF;

  background:
    rgba(3,12,20,.24);

  text-align: center;
}


.sbme__brand strong {
  font-size: 15px;

  line-height: 1;
}


.sbme__brand span {
  margin-top: 4px;

  font-size: 4px;
  font-weight: 900;

  letter-spacing: .10em;
}


/* =========================================================
   VISUAL CARD
========================================================= */

.sbme__visual-card {
  position: absolute;

  z-index: 8;

  right:
    clamp(24px,3vw,46px);

  bottom:
    clamp(76px,8vw,110px);

  left:
    clamp(24px,3vw,46px);

  max-width: 650px;

  padding:
    20px
    22px;

  border:
    1px solid
    rgba(255,255,255,.19);

  border-radius: 13px;

  color: #FFFFFF;

  background:
    linear-gradient(
      135deg,
      rgba(3,13,22,.90),
      rgba(5,24,37,.74)
    );

  box-shadow:
    0 22px 52px
    rgba(0,0,0,.20);
}


.sbme__visual-card-head {
  display: flex;

  align-items: center;

  gap: 9px;
}


.sbme__visual-card-head span {
  color:
    #8DE0E1;

  font-size: 7px;
  font-weight: 900;

  letter-spacing: .13em;
}


.sbme__visual-card-head i {
  width: 34px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--sbme-aqua),
      var(--sbme-orange)
    );
}


.sbme__visual-card-head small {
  color:
    rgba(255,255,255,.38);

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .10em;
}


.sbme__visual-card h2 {
  margin:
    9px
    0
    0;

  color: #FFFFFF;

  font-size:
    clamp(20px,1.7vw,28px);

  font-weight: 850;

  line-height: 1.05;

  letter-spacing:
    -.035em;
}


.sbme__visual-card p {
  max-width: 530px;

  margin:
    8px
    0
    0;

  color:
    rgba(255,255,255,.64);

  font-size: 10px;

  line-height: 1.6;
}


.sbme__visual-meta {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-top: 14px;

  padding-top: 12px;

  border-top:
    1px solid
    rgba(255,255,255,.09);
}


.sbme__visual-meta span {
  padding:
    5px
    7px;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius: 5px;

  color:
    rgba(255,255,255,.50);

  font-size: 6px;
  font-weight: 850;

  letter-spacing: .09em;
}


/* =========================================================
   TECHNICAL FOOTER
========================================================= */

.sbme__technical {
  position: absolute;

  z-index: 8;

  right: 24px;
  bottom: 22px;
  left: 24px;

  display: grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius: 9px;

  background:
    rgba(3,12,20,.42);
}


.sbme__technical > div {
  padding:
    10px
    12px;
}


.sbme__technical > div + div {
  border-left:
    1px solid
    rgba(255,255,255,.07);
}


.sbme__technical span {
  display: block;

  color:
    var(--sbme-orange);

  font-size: 6px;
  font-weight: 900;
}


.sbme__technical strong {
  display: block;

  margin-top: 3px;

  color:
    rgba(255,255,255,.68);

  font-size: 7px;
}


/* =========================================================
   BOTTOM RAIL
========================================================= */

.sbme__rail {
  position: relative;

  z-index: 10;

  min-height: 92px;

  border-top:
    1px solid
    rgba(23,25,35,.075);

  background:
    rgba(255,255,255,.94);
}


.sbme__rail-inner {
  display: grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  width: 100%;

  min-height: 92px;
}


.sbme__rail-inner > a {
  position: relative;

  display: grid;

  grid-template-columns:
    27px
    minmax(0,1fr)
    auto;

  align-items: center;

  gap: 9px;

  min-width: 0;

  padding:
    0
    clamp(16px,2.2vw,34px);

  border-right:
    1px solid
    rgba(23,25,35,.06);

  color:
    inherit;

  text-decoration: none;

  transition:
    background .18s ease;
}


.sbme__rail-inner > a > span {
  color:
    var(--sbme-blue);

  font-size: 7px;
  font-weight: 900;
}


.sbme__rail-inner small {
  display: block;

  color:
    #9BA4AD;

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .09em;
}


.sbme__rail-inner strong {
  display: block;

  margin-top: 4px;

  overflow: hidden;

  color:
    #48545E;

  font-size: 9px;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.sbme__rail-inner i {
  color:
    #9BA4AD;

  font-size: 11px;

  font-style: normal;
}


.sbme__rail-inner > a::after {
  position: absolute;

  right: 20px;
  bottom: 0;
  left: 20px;

  height: 2px;

  content: "";

  background:
    linear-gradient(
      90deg,
      var(--sbme-blue),
      var(--sbme-aqua),
      var(--sbme-orange)
    );

  transform:
    scaleX(0);

  transform-origin: left;

  transition:
    transform .2s ease;
}


@media (hover:hover) {

  .sbme__rail-inner > a:hover {
    background:
      rgba(23,105,210,.02);
  }


  .sbme__rail-inner > a:hover::after {
    transform:
      scaleX(1);
  }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.sbme a:focus-visible {
  outline:
    2px solid
    var(--sbme-blue);

  outline-offset: 3px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1050px) {

  .sbme {
    min-height: auto;
  }


  .sbme__main {
    grid-template-columns: 1fr;

    min-height: auto;
  }


  .sbme__content {
    padding:
      70px
      28px
      44px;
  }


  .sbme__content-inner {
    max-width: 820px;
  }


  .sbme__visual {
    padding:
      0
      28px
      28px;
  }


  .sbme__figure {
    height: 650px;

    min-height: 650px;
  }


  .sbme__rail-inner {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .sbme__rail-inner > a {
    min-height: 76px;

    border-bottom:
      1px solid
      rgba(23,25,35,.06);
  }

}


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

@media (max-width:650px) {

  .sbme__content {
    padding:
      54px
      16px
      34px;
  }


  .sbme__kicker b {
    display: none;
  }


  .sbme__title {
    font-size:
      clamp(34px,8.5vw,37px);
  }


  .sbme__lead {
    font-size: 13px;
  }


  .sbme__actions {
    flex-direction: column;
  }


  .sbme__button {
    width: 100%;
  }


  .sbme__service-line {
    grid-template-columns: 1fr;
  }


  .sbme__service-line > div {
    padding:
      11px
      0;
  }


  .sbme__service-line > div + div {
    border-top:
      1px solid
      rgba(23,25,35,.06);

    border-left: 0;
  }


  .sbme__visual {
    padding:
      0
      14px
      14px;
  }


  .sbme__figure {
    height: 570px;

    min-height: 570px;

    border-radius:
      20px
      20px
      20px
      48px;
  }


  .sbme__visual-top {
    top: 18px;
    right: 18px;
    left: 18px;
  }


  .sbme__vertical {
    display: none;
  }


  .sbme__brand {
    top: 57px;
    right: 18px;

    width: 48px;
    height: 48px;
  }


  .sbme__target {
    right: -30px;

    width: 230px;
  }


  .sbme__visual-card {
    right: 14px;
    bottom: 105px;
    left: 14px;

    padding: 17px;
  }


  .sbme__technical {
    right: 14px;
    bottom: 14px;
    left: 14px;

    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .sbme__technical > div:nth-child(3) {
    border-top:
      1px solid
      rgba(255,255,255,.07);

    border-left: 0;
  }


  .sbme__technical > div:nth-child(4) {
    border-top:
      1px solid
      rgba(255,255,255,.07);
  }


  .sbme__rail-inner {
    grid-template-columns: 1fr;
  }


  .sbme__rail-inner > a {
    min-height: 67px;

    border-right: 0;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce) {

  .sbme *,
  .sbme *::before,
  .sbme *::after {
    transition-duration:
      .01ms !important;
  }

}





/*section hero marine end here*/