/* Marine Services: page-specific styles. */


/*section 1 start here*/

/* ==========================================================
   SINDYBAD®
   END-TO-END MARINE SOLUTIONS

   Scoped prefix: sbms
========================================================== */


.sbms,
.sbms *,
.sbms *::before,
.sbms *::after {
  box-sizing: border-box;
}


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

.sbms {
  --sbms-navy: #1e2858;
  --sbms-navy-dark: #111a3f;

  --sbms-blue: #3975ff;
  --sbms-blue-light: #6c98ff;

  --sbms-purple: #b129ec;
  --sbms-purple-dark: #7137d6;

  --sbms-orange: #f09a2b;

  --sbms-bg: #f8f9fc;
  --sbms-white: #ffffff;

  --sbms-text: #1e2858;
  --sbms-muted: #646d82;

  --sbms-dark: #041329;
  --sbms-dark-2: #08264a;

  --sbms-line:
    rgba(30,40,88,.11);

  position: relative;
  isolation: isolate;

  width: 100%;
  max-width: none;

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

  margin: 0;

  overflow: clip;

  color:
    var(--sbms-text);

  background:
    var(--sbms-bg);

  font-family: inherit;
}


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

.sbms__main {
  display: grid;

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

  width: 100%;

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


/* ==========================================================
   LEFT SIDE
========================================================== */

.sbms__content {
  position: relative;

  display: flex;

  min-width: 0;

  align-items: center;

  padding:
    clamp(84px,10vh,126px)
    clamp(42px,6vw,110px)
    clamp(54px,7vh,84px);

  background:
    radial-gradient(
      circle at 8% 13%,
      rgba(57,117,255,.07),
      transparent 26rem
    ),
    radial-gradient(
      circle at 89% 91%,
      rgba(177,41,236,.045),
      transparent 24rem
    ),
    linear-gradient(
      145deg,
      #ffffff,
      #f7f8fc
    );
}


.sbms__content::before {
  position: absolute;

  top: 8%;
  right: 0;
  bottom: 8%;

  width: 1px;

  content: "";

  background:
    linear-gradient(
      transparent,
      rgba(57,117,255,.17),
      rgba(177,41,236,.14),
      transparent
    );
}


.sbms__content-inner {
  width: 100%;
  max-width: 690px;
}


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

.sbms__kicker {
  margin-bottom: 14px;
}


.sbms__kicker span {
  color:
    var(--sbms-blue);

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

  letter-spacing: .17em;

  text-transform: uppercase;
}


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

.sbms__classification {
  display: flex;

  align-items: center;

  gap: 11px;

  margin-bottom: 19px;
}


.sbms__classification > span {
  color:
    var(--sbms-orange);

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


.sbms__classification > i {
  width: 35px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--sbms-orange),
      var(--sbms-blue),
      var(--sbms-purple)
    );
}


.sbms__classification > strong {
  color:
    rgba(30,40,88,.47);

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

  letter-spacing: .12em;

  text-transform: uppercase;
}


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

.sbms h1 {
  max-width: 700px;

  margin: 0;

  color:
    var(--sbms-navy);

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

  font-weight: 800;

  line-height: 1.04;

  letter-spacing:
    -.04em;

  text-wrap: balance;
}


.sbms h1 span {
  display: block;

  margin-top: 5px;

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


/* ==========================================================
   TEXT
========================================================== */

.sbms__lead {
  max-width: 630px;

  margin:
    23px
    0
    0;

  color:
    var(--sbms-navy);

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

  font-weight: 500;

  line-height: 1.66;
}


.sbms__description {
  max-width: 620px;

  margin:
    11px
    0
    0;

  color:
    var(--sbms-muted);

  font-size:
    clamp(11px,.88vw,13px);

  line-height: 1.7;
}


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

.sbms__tags {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: 21px;
}


.sbms__tags span {
  padding:
    6px
    9px;

  border:
    1px solid
    rgba(57,117,255,.12);

  border-radius: 5px;

  color:
    rgba(30,40,88,.66);

  background:
    rgba(57,117,255,.025);

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


/* ==========================================================
   ACTIONS
========================================================== */

.sbms__actions {
  display: flex;

  flex-wrap: wrap;

  gap: 9px;

  margin-top: 27px;
}


.sbms-btn {
  display: inline-flex;

  min-height: 48px;

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

  gap: 15px;

  padding:
    0
    20px;

  border:
    1px solid
    rgba(240,154,43,.65);

  border-radius: 999px;

  color:
    var(--sbms-blue);

  background:
    transparent;

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

  text-decoration: none;

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


.sbms-btn--primary {
  color:
    var(--sbms-blue);

  border-color:
    rgba(240,154,43,.85);

  background:
    var(--sbms-white);
}


.sbms-btn--secondary {
  color:
    var(--sbms-white);

  border-color:
    var(--sbms-purple);

  background:
    linear-gradient(
      135deg,
      var(--sbms-purple),
      var(--sbms-purple-dark)
    );

  box-shadow:
    0 15px 33px
    rgba(113,55,214,.17);
}


@media (hover:hover) {

  .sbms-btn:hover {
    transform:
      translateY(-2px);
  }

}


/* ==========================================================
   VALUES
========================================================== */

.sbms__values {
  display: grid;

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

  margin-top: 32px;

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

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


.sbms__values > div {
  padding:
    14px
    12px;
}


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


.sbms__values > div + div {
  border-left:
    1px solid
    var(--sbms-line);
}


.sbms__values span {
  display: block;

  color:
    var(--sbms-orange);

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


.sbms__values strong {
  display: block;

  margin-top: 5px;

  color:
    rgba(30,40,88,.68);

  font-size: 8px;
}


/* ==========================================================
   VISUAL WRAP
========================================================== */

.sbms__visual-wrap {
  min-width: 0;

  padding:
    16px
    16px
    16px
    0;
}


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

.sbms__visual {
  position: relative;

  width: 100%;
  height: 100%;

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

  margin: 0;

  overflow: hidden;

  border:
    1px solid
    rgba(57,117,255,.12);

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

  background:
    var(--sbms-dark);

  box-shadow:
    0 30px 85px
    rgba(17,26,63,.22);
}


.sbms__visual > img {
  position: absolute;

  inset: -2%;

  width: 104%;
  height: 104%;

  max-width: none;

  object-fit: cover;

  filter:
    saturate(.96)
    contrast(1.05)
    brightness(.82);

  transform:
    translate3d(
      var(--sbms-x,0px),
      var(--sbms-y,0px),
      0
    )
    scale(1.025);

  transition:
    transform .32s ease-out;
}


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

.sbms__shade {
  position: absolute;
  z-index: 2;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(4,19,41,.06),
      transparent 34%,
      rgba(4,19,41,.18) 62%,
      rgba(4,19,41,.91)
    ),
    linear-gradient(
      90deg,
      rgba(4,19,41,.12),
      transparent 55%
    ),
    radial-gradient(
      circle at 72% 37%,
      rgba(57,117,255,.17),
      transparent 30%
    );
}


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

.sbms__grid {
  position: absolute;
  z-index: 3;

  inset: 0;

  opacity: .16;

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

  background-size:
    68px 68px;

  -webkit-mask-image:
    radial-gradient(
      circle at 68% 37%,
      #000,
      transparent 74%
    );

  mask-image:
    radial-gradient(
      circle at 68% 37%,
      #000,
      transparent 74%
    );
}


/* ==========================================================
   ROUTES
========================================================== */

.sbms__routes {
  position: absolute;
  z-index: 4;

  inset: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;
}


.sbms__routes path {
  fill: none;

  stroke:
    rgba(108,152,255,.25);

  stroke-width: 1.3;

  stroke-dasharray:
    7 11;
}


.sbms__routes path:nth-child(2) {
  stroke:
    rgba(177,41,236,.20);
}


.sbms__routes circle {
  fill:
    var(--sbms-orange);

  stroke:
    rgba(255,255,255,.38);

  stroke-width: 2;
}


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

.sbms__target {
  position: absolute;
  z-index: 5;

  top: 40%;
  right: 7%;

  width:
    min(40%,340px);

  aspect-ratio: 1;

  border:
    1px solid
    rgba(108,152,255,.18);

  border-radius: 50%;

  transform:
    translateY(-50%);

  pointer-events: none;
}


.sbms__target span {
  position: absolute;

  border:
    1px solid
    rgba(108,152,255,.14);

  border-radius: 50%;
}


.sbms__target span:nth-child(1) {
  inset: 18%;
}


.sbms__target span:nth-child(2) {
  inset: 35%;

  border-style: dashed;

  border-color:
    rgba(177,41,236,.24);
}


.sbms__target span:nth-child(3) {
  inset: 47%;
}


.sbms__target i {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background:
    var(--sbms-orange);

  box-shadow:
    0 0 0 6px
    rgba(240,154,43,.10),
    0 0 18px
    rgba(240,154,43,.35);

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


/* ==========================================================
   VISUAL TOP
========================================================== */

.sbms__visual-top {
  position: absolute;
  z-index: 8;

  top: 28px;
  right: 29px;
  left: 29px;

  display: flex;

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

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

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

  letter-spacing: .13em;

  text-transform: uppercase;
}


.sbms__visual-top > span:first-child {
  display: flex;

  align-items: center;

  gap: 8px;
}


.sbms__visual-top i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--sbms-blue-light);

  box-shadow:
    0 0 13px
    rgba(108,152,255,.7);
}


/* ==========================================================
   GHOST NUMBER
========================================================== */

.sbms__ghost {
  position: absolute;
  z-index: 3;

  top: 44%;
  right: 8%;

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

  font-size:
    clamp(120px,11vw,205px);

  font-weight: 900;

  line-height: 1;

  letter-spacing:
    -.08em;

  transform:
    translateY(-50%);
}


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

.sbms__brand {
  position: absolute;
  z-index: 8;

  top: 74px;
  left: 30px;

  display: grid;

  width: 72px;
  height: 72px;

  place-items: center;

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

  border-radius: 50%;

  background:
    rgba(4,19,41,.32);

  -webkit-backdrop-filter:
    blur(8px);

  backdrop-filter:
    blur(8px);
}


.sbms__brand strong {
  color:
    var(--sbms-white);

  font-size: 17px;
}


.sbms__brand span {
  position: absolute;

  bottom: 13px;

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

  font-size: 5px;

  letter-spacing: .13em;
}


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

.sbms__vertical {
  position: absolute;
  z-index: 8;

  top: 50%;
  right: 19px;

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

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

  letter-spacing: .18em;

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


/* ==========================================================
   GLASS PANEL
========================================================== */

.sbms__panel {
  position: absolute;
  z-index: 9;

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

  bottom:
    clamp(76px,7vw,104px);

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

  max-width: 670px;

  padding:
    20px
    22px;

  border:
    1px solid
    rgba(108,152,255,.18);

  border-radius: 13px;

  background:
    linear-gradient(
      135deg,
      rgba(4,19,41,.92),
      rgba(8,38,74,.78)
    );

  box-shadow:
    0 23px 60px
    rgba(0,0,0,.25);

  -webkit-backdrop-filter:
    blur(10px);

  backdrop-filter:
    blur(10px);
}


.sbms__panel-head {
  display: flex;

  align-items: center;

  gap: 9px;
}


.sbms__panel-head span {
  color:
    var(--sbms-blue-light);

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

  letter-spacing: .12em;
}


.sbms__panel-head i {
  width: 35px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--sbms-orange),
      var(--sbms-blue),
      var(--sbms-purple)
    );
}


.sbms__panel-head small {
  color:
    rgba(255,255,255,.40);

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


.sbms__panel h2 {
  max-width: 570px;

  margin:
    9px
    0
    0;

  color:
    var(--sbms-white);

  font-size:
    clamp(20px,1.65vw,27px);

  font-weight: 800;

  line-height: 1.05;

  letter-spacing:
    -.035em;
}


.sbms__panel p {
  max-width: 550px;

  margin:
    8px
    0
    0;

  color:
    rgba(226,236,255,.63);

  font-size: 9px;

  line-height: 1.6;
}


.sbms__panel-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  margin-top: 12px;
}


.sbms__panel-tags span {
  padding:
    5px
    7px;

  border:
    1px solid
    rgba(108,152,255,.12);

  border-radius: 4px;

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

  font-size: 6px;
}


/* ==========================================================
   TECHNICAL FOOT
========================================================== */

.sbms__technical {
  position: absolute;
  z-index: 9;

  right: 22px;
  bottom: 18px;
  left: 22px;

  display: grid;

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

  overflow: hidden;

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

  border-radius: 9px;

  background:
    rgba(3,15,34,.58);
}


.sbms__technical div {
  padding:
    9px
    12px;
}


.sbms__technical div + div {
  border-left:
    1px solid
    rgba(108,152,255,.08);
}


.sbms__technical span {
  color:
    var(--sbms-orange);

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


.sbms__technical strong {
  display: block;

  margin-top: 3px;

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

  font-size: 7px;
}


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

.sbms__rail {
  position: relative;
  z-index: 10;

  display: grid;

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

  min-height: 92px;

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

  background:
    #ffffff;
}


.sbms__rail a {
  display: grid;

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

  align-items: center;

  gap: 9px;

  padding:
    0
    clamp(20px,3vw,44px);

  border-right:
    1px solid
    var(--sbms-line);
}


.sbms__rail a:last-child {
  border-right: 0;
}


.sbms__rail > a > span {
  color:
    var(--sbms-blue);

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


.sbms__rail small {
  display: block;

  color:
    rgba(30,40,88,.43);

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

  letter-spacing: .1em;
}


.sbms__rail strong {
  display: block;

  margin-top: 4px;

  color:
    rgba(30,40,88,.78);

  font-size: 8px;
}


.sbms__rail i {
  color:
    var(--sbms-orange);

  font-size: 10px;

  font-style: normal;
}


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

@media (max-width:1050px) {

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

    min-height: auto;
  }


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

    padding:
      95px
      30px
      54px;
  }


  .sbms__content::before {
    display: none;
  }


  .sbms__visual-wrap {
    padding:
      0
      28px
      28px;
  }


  .sbms__visual {
    height: 680px;

    min-height: 680px;
  }


  .sbms__rail {
    grid-template-columns:
      repeat(2,1fr);
  }


  .sbms__rail a {
    min-height: 74px;

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

}


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

@media (max-width:650px) {

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

    padding:
      72px
      17px
      38px;
  }


  .sbms h1 {
    font-size:
      clamp(
        34px,
        9vw,
        37px
      );
  }


  .sbms__description {
    font-size: 12px;
  }


  .sbms__actions {
    flex-direction: column;
  }


  .sbms-btn {
    width: 100%;
  }


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


  .sbms__values > div {
    padding:
      11px
      0;
  }


  .sbms__values > div + div {
    border-top:
      1px solid
      var(--sbms-line);

    border-left: 0;
  }


  .sbms__visual-wrap {
    padding:
      0
      14px
      14px;
  }


  .sbms__visual {
    height: 590px;

    min-height: 590px;

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


  .sbms__brand {
    top: 60px;
    left: 18px;

    width: 58px;
    height: 58px;
  }


  .sbms__target {
    right: -50px;

    width: 230px;
  }


  .sbms__vertical {
    display: none;
  }


  .sbms__panel {
    right: 14px;
    bottom: 106px;
    left: 14px;

    padding: 16px;
  }


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

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


  .sbms__technical div:nth-child(3),
  .sbms__technical div:nth-child(4) {
    border-top:
      1px solid
      rgba(108,152,255,.08);
  }


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


  .sbms__rail a {
    min-height: 64px;

    border-right: 0;
  }

}


/* ==========================================================
   VERY SMALL MOBILE
========================================================== */

@media (max-width:430px) {

  .sbms__visual {
    height: 545px;

    min-height: 545px;
  }


  .sbms__panel h2 {
    font-size: 19px;
  }


  .sbms__tags {
    gap: 5px;
  }

}


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

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

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

}



/*section 1 end here*/

/*section 2 start here*/


/* ==========================================================
   SINDYBAD®
   MARINE EQUIPMENT & SPARE PARTS

   Premium Sindybad 46 / 54 Layout
   Scoped prefix: sbmsp
========================================================== */


.sbmsp,
.sbmsp *,
.sbmsp *::before,
.sbmsp *::after {
  box-sizing: border-box;
}


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

.sbmsp {
  --sbmsp-navy: #172453;
  --sbmsp-navy-dark: #0d173c;

  --sbmsp-blue: #416eff;
  --sbmsp-blue-light: #7397ff;

  --sbmsp-purple: #b62ae8;
  --sbmsp-purple-dark: #8332dc;

  --sbmsp-orange: #f09a2b;

  --sbmsp-bg: #f8f9fc;
  --sbmsp-white: #ffffff;

  --sbmsp-text: #172453;
  --sbmsp-muted: #677084;

  --sbmsp-dark: #06162d;
  --sbmsp-dark-2: #0b294d;

  --sbmsp-line:
    rgba(23,36,83,.10);

  position: relative;
  isolation: isolate;

  width: 100%;
  max-width: none;

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

  margin: 0;

  overflow: clip;

  color:
    var(--sbmsp-text);

  background:
    var(--sbmsp-bg);

  font-family: inherit;
}


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

.sbmsp__main {
  display: grid;

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

  width: 100%;

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


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

.sbmsp__content {
  position: relative;

  display: flex;

  min-width: 0;

  align-items: center;

  padding:
    clamp(84px,10vh,126px)
    clamp(42px,6vw,112px)
    clamp(54px,7vh,84px);

  background:
    radial-gradient(
      circle at 8% 14%,
      rgba(65,110,255,.065),
      transparent 27rem
    ),
    radial-gradient(
      circle at 91% 88%,
      rgba(182,42,232,.045),
      transparent 25rem
    ),
    linear-gradient(
      145deg,
      #ffffff,
      #f7f8fc
    );
}


.sbmsp__content::after {
  position: absolute;

  top: 8%;
  right: 0;
  bottom: 8%;

  width: 1px;

  content: "";

  background:
    linear-gradient(
      transparent,
      rgba(65,110,255,.17),
      rgba(182,42,232,.13),
      transparent
    );
}


.sbmsp__content-inner {
  width: 100%;

  max-width: 690px;
}


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

.sbmsp__kicker {
  margin:
    0
    0
    14px;

  color:
    var(--sbmsp-blue);

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

  letter-spacing: .17em;

  text-transform: uppercase;
}


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

.sbmsp__classification {
  display: flex;

  align-items: center;

  gap: 11px;

  margin-bottom: 19px;
}


.sbmsp__classification > span {
  color:
    var(--sbmsp-orange);

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


.sbmsp__classification > i {
  width: 35px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--sbmsp-orange),
      var(--sbmsp-blue),
      var(--sbmsp-purple)
    );
}


.sbmsp__classification > strong {
  color:
    rgba(23,36,83,.46);

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

  letter-spacing: .12em;

  text-transform: uppercase;
}


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

.sbmsp h1 {
  max-width: 690px;

  margin: 0;

  color:
    var(--sbmsp-navy);

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

  font-weight: 800;

  line-height: 1.03;

  letter-spacing:
    -.042em;

  text-wrap: balance;
}


.sbmsp h1 span {
  display: block;

  margin-top: 5px;

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


/* ==========================================================
   TEXT
========================================================== */

.sbmsp__lead {
  max-width: 630px;

  margin:
    23px
    0
    0;

  color:
    var(--sbmsp-navy);

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

  font-weight: 500;

  line-height: 1.65;
}


.sbmsp__description {
  max-width: 620px;

  margin:
    11px
    0
    0;

  color:
    var(--sbmsp-muted);

  font-size:
    clamp(11px,.88vw,13px);

  line-height: 1.7;
}


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

.sbmsp__tags {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: 21px;
}


.sbmsp__tags span {
  padding:
    6px
    9px;

  border:
    1px solid
    rgba(65,110,255,.11);

  border-radius: 5px;

  color:
    rgba(23,36,83,.65);

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

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


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

.sbmsp__actions {
  display: flex;

  flex-wrap: wrap;

  gap: 9px;

  margin-top: 27px;
}


.sbmsp-btn {
  display: inline-flex;

  min-height: 48px;

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

  gap: 15px;

  padding:
    0
    20px;

  border-radius: 999px;

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

  text-decoration: none;

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


.sbmsp-btn--primary {
  color:
    var(--sbmsp-blue);

  border:
    1px solid
    var(--sbmsp-orange);

  background:
    var(--sbmsp-white);
}


.sbmsp-btn--secondary {
  color:
    var(--sbmsp-white);

  border:
    1px solid
    var(--sbmsp-purple);

  background:
    linear-gradient(
      135deg,
      var(--sbmsp-purple),
      var(--sbmsp-purple-dark)
    );

  box-shadow:
    0 15px 34px
    rgba(131,50,220,.17);
}


@media (hover:hover) {

  .sbmsp-btn:hover {
    transform:
      translateY(-2px);
  }

}


/* ==========================================================
   VALUE STRIP
========================================================== */

.sbmsp__values {
  display: grid;

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

  margin-top: 32px;

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

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


.sbmsp__values > div {
  padding:
    14px
    12px;
}


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


.sbmsp__values > div + div {
  border-left:
    1px solid
    var(--sbmsp-line);
}


.sbmsp__values span {
  display: block;

  color:
    var(--sbmsp-orange);

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


.sbmsp__values strong {
  display: block;

  margin-top: 5px;

  color:
    rgba(23,36,83,.68);

  font-size: 8px;
}


/* ==========================================================
   VISUAL WRAP
========================================================== */

.sbmsp__visual-wrap {
  min-width: 0;

  padding:
    16px
    16px
    16px
    0;
}


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

.sbmsp__visual {
  position: relative;

  width: 100%;
  height: 100%;

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

  margin: 0;

  overflow: hidden;

  border:
    1px solid
    rgba(65,110,255,.12);

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

  background:
    var(--sbmsp-dark);

  box-shadow:
    0 30px 85px
    rgba(13,23,60,.23);
}


.sbmsp__visual > img {
  position: absolute;

  inset: -2%;

  width: 104%;
  height: 104%;

  max-width: none;

  object-fit: cover;

  filter:
    saturate(.94)
    contrast(1.06)
    brightness(.80);

  transform:
    translate3d(
      var(--sbmsp-x,0px),
      var(--sbmsp-y,0px),
      0
    )
    scale(1.025);

  transition:
    transform .32s ease-out;
}


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

.sbmsp__shade {
  position: absolute;
  z-index: 2;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(6,22,45,.04),
      transparent 32%,
      rgba(6,22,45,.19) 63%,
      rgba(6,22,45,.92)
    ),
    linear-gradient(
      90deg,
      rgba(6,22,45,.13),
      transparent 58%
    ),
    radial-gradient(
      circle at 72% 37%,
      rgba(65,110,255,.16),
      transparent 29%
    );
}


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

.sbmsp__grid {
  position: absolute;
  z-index: 3;

  inset: 0;

  opacity: .17;

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

  background-size:
    68px 68px;

  -webkit-mask-image:
    radial-gradient(
      circle at 68% 38%,
      #000,
      transparent 74%
    );

  mask-image:
    radial-gradient(
      circle at 68% 38%,
      #000,
      transparent 74%
    );
}


/* ==========================================================
   VISUAL TOP
========================================================== */

.sbmsp__visual-top {
  position: absolute;
  z-index: 8;

  top: 28px;
  right: 29px;
  left: 29px;

  display: flex;

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

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

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

  letter-spacing: .13em;

  text-transform: uppercase;
}


.sbmsp__visual-top > span:first-child {
  display: flex;

  align-items: center;

  gap: 8px;
}


.sbmsp__visual-top i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--sbmsp-blue-light);

  box-shadow:
    0 0 13px
    rgba(115,151,255,.70);
}


/* ==========================================================
   ROUTES
========================================================== */

.sbmsp__routes {
  position: absolute;
  z-index: 4;

  inset: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;
}


.sbmsp__routes path {
  fill: none;

  stroke:
    rgba(115,151,255,.24);

  stroke-width: 1.3;

  stroke-dasharray:
    7 11;
}


.sbmsp__routes path:nth-child(2) {
  stroke:
    rgba(182,42,232,.20);
}


.sbmsp__routes circle {
  fill:
    var(--sbmsp-orange);

  stroke:
    rgba(255,255,255,.38);

  stroke-width: 2;
}


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

.sbmsp__target {
  position: absolute;
  z-index: 5;

  top: 40%;
  right: 7%;

  width:
    min(40%,340px);

  aspect-ratio: 1;

  border:
    1px solid
    rgba(115,151,255,.18);

  border-radius: 50%;

  transform:
    translateY(-50%);

  pointer-events: none;
}


.sbmsp__target span {
  position: absolute;

  border-radius: 50%;

  border:
    1px solid
    rgba(115,151,255,.14);
}


.sbmsp__target span:nth-child(1) {
  inset: 18%;
}


.sbmsp__target span:nth-child(2) {
  inset: 35%;

  border-style: dashed;

  border-color:
    rgba(182,42,232,.24);
}


.sbmsp__target span:nth-child(3) {
  inset: 47%;
}


.sbmsp__target i {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background:
    var(--sbmsp-orange);

  box-shadow:
    0 0 0 6px
    rgba(240,154,43,.10),
    0 0 18px
    rgba(240,154,43,.36);

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


/* ==========================================================
   GHOST
========================================================== */

.sbmsp__ghost {
  position: absolute;
  z-index: 3;

  top: 44%;
  right: 8%;

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

  font-size:
    clamp(120px,11vw,205px);

  font-weight: 900;

  line-height: 1;

  letter-spacing:
    -.08em;

  transform:
    translateY(-50%);
}


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

.sbmsp__brand {
  position: absolute;
  z-index: 8;

  top: 74px;
  left: 30px;

  display: grid;

  width: 72px;
  height: 72px;

  place-items: center;

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

  border-radius: 50%;

  background:
    rgba(6,22,45,.36);

  -webkit-backdrop-filter:
    blur(8px);

  backdrop-filter:
    blur(8px);
}


.sbmsp__brand strong {
  color:
    var(--sbmsp-white);

  font-size: 17px;
}


.sbmsp__brand span {
  position: absolute;

  bottom: 13px;

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

  font-size: 5px;

  letter-spacing: .13em;
}


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

.sbmsp__vertical {
  position: absolute;
  z-index: 8;

  top: 50%;
  right: 19px;

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

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

  letter-spacing: .18em;

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


/* ==========================================================
   GLASS INFORMATION PANEL
========================================================== */

.sbmsp__panel {
  position: absolute;
  z-index: 9;

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

  bottom:
    clamp(76px,7vw,104px);

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

  max-width: 680px;

  padding:
    20px
    22px;

  border:
    1px solid
    rgba(115,151,255,.18);

  border-radius: 13px;

  background:
    linear-gradient(
      135deg,
      rgba(6,22,45,.93),
      rgba(11,41,77,.80)
    );

  box-shadow:
    0 23px 60px
    rgba(0,0,0,.25);

  -webkit-backdrop-filter:
    blur(9px);

  backdrop-filter:
    blur(9px);
}


.sbmsp__panel-head {
  display: flex;

  align-items: center;

  gap: 9px;
}


.sbmsp__panel-head span {
  color:
    var(--sbmsp-blue-light);

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

  letter-spacing: .12em;
}


.sbmsp__panel-head i {
  width: 35px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--sbmsp-orange),
      var(--sbmsp-blue),
      var(--sbmsp-purple)
    );
}


.sbmsp__panel-head small {
  color:
    rgba(255,255,255,.40);

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


.sbmsp__panel h2 {
  max-width: 570px;

  margin:
    9px
    0
    0;

  color:
    var(--sbmsp-white);

  font-size:
    clamp(20px,1.65vw,27px);

  font-weight: 800;

  line-height: 1.05;

  letter-spacing:
    -.035em;
}


.sbmsp__panel p {
  max-width: 550px;

  margin:
    8px
    0
    0;

  color:
    rgba(226,236,255,.63);

  font-size: 9px;

  line-height: 1.6;
}


.sbmsp__panel-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  margin-top: 12px;
}


.sbmsp__panel-tags span {
  padding:
    5px
    7px;

  border:
    1px solid
    rgba(115,151,255,.12);

  border-radius: 4px;

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

  font-size: 6px;
}


/* ==========================================================
   TECH STRIP
========================================================== */

.sbmsp__technical {
  position: absolute;
  z-index: 9;

  right: 22px;
  bottom: 18px;
  left: 22px;

  display: grid;

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

  overflow: hidden;

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

  border-radius: 9px;

  background:
    rgba(3,15,34,.58);
}


.sbmsp__technical div {
  padding:
    9px
    12px;
}


.sbmsp__technical div + div {
  border-left:
    1px solid
    rgba(115,151,255,.08);
}


.sbmsp__technical span {
  color:
    var(--sbmsp-orange);

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


.sbmsp__technical strong {
  display: block;

  margin-top: 3px;

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

  font-size: 7px;
}


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

.sbmsp__rail {
  position: relative;
  z-index: 10;

  display: grid;

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

  min-height: 92px;

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

  background:
    #ffffff;
}


.sbmsp__rail a {
  display: grid;

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

  align-items: center;

  gap: 9px;

  padding:
    0
    clamp(20px,3vw,44px);

  border-right:
    1px solid
    var(--sbmsp-line);
}


.sbmsp__rail a:last-child {
  border-right: 0;
}


.sbmsp__rail > a > span {
  color:
    var(--sbmsp-blue);

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


.sbmsp__rail small {
  display: block;

  color:
    rgba(23,36,83,.43);

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

  letter-spacing: .10em;
}


.sbmsp__rail strong {
  display: block;

  margin-top: 4px;

  color:
    rgba(23,36,83,.78);

  font-size: 8px;
}


.sbmsp__rail i {
  color:
    var(--sbmsp-orange);

  font-size: 10px;

  font-style: normal;
}


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

@media (max-width:1050px) {

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

    min-height: auto;
  }


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

    padding:
      95px
      30px
      54px;
  }


  .sbmsp__content::after {
    display: none;
  }


  .sbmsp__visual-wrap {
    padding:
      0
      28px
      28px;
  }


  .sbmsp__visual {
    height: 680px;

    min-height: 680px;
  }


  .sbmsp__rail {
    grid-template-columns:
      repeat(2,1fr);
  }


  .sbmsp__rail a {
    min-height: 74px;

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

}


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

@media (max-width:650px) {

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

    padding:
      72px
      17px
      38px;
  }


  .sbmsp h1 {
    font-size:
      clamp(34px,9vw,37px);
  }


  .sbmsp__classification {
    align-items: flex-start;
  }


  .sbmsp__classification > strong {
    line-height: 1.5;
  }


  .sbmsp__description {
    font-size: 12px;
  }


  .sbmsp__actions {
    flex-direction: column;
  }


  .sbmsp-btn {
    width: 100%;
  }


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


  .sbmsp__values > div {
    padding:
      11px
      0;
  }


  .sbmsp__values > div + div {
    border-top:
      1px solid
      var(--sbmsp-line);

    border-left: 0;
  }


  .sbmsp__visual-wrap {
    padding:
      0
      14px
      14px;
  }


  .sbmsp__visual {
    height: 590px;

    min-height: 590px;

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


  .sbmsp__brand {
    top: 60px;
    left: 18px;

    width: 58px;
    height: 58px;
  }


  .sbmsp__target {
    right: -52px;

    width: 230px;
  }


  .sbmsp__vertical {
    display: none;
  }


  .sbmsp__panel {
    right: 14px;
    bottom: 106px;
    left: 14px;

    padding: 16px;
  }


  .sbmsp__panel h2 {
    font-size: 20px;
  }


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

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


  .sbmsp__technical div:nth-child(3),
  .sbmsp__technical div:nth-child(4) {
    border-top:
      1px solid
      rgba(115,151,255,.08);
  }


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


  .sbmsp__rail a {
    min-height: 64px;

    border-right: 0;
  }

}


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

@media (max-width:430px) {

  .sbmsp__visual {
    height: 540px;

    min-height: 540px;
  }


  .sbmsp__panel {
    bottom: 102px;
  }


  .sbmsp__panel h2 {
    font-size: 18px;
  }


  .sbmsp__panel p {
    font-size: 8px;
  }


  .sbmsp__panel-tags span:nth-child(n+4) {
    display: none;
  }

}


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

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

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

}


/*section 2start here*/


/*section 3 start here*/

/* =========================================================
   SINDYBAD®
   VESSEL SUPPORT + OFFSHORE PROJECT SUPPLY

   Alternating premium layout
   Prefix: sbvp
========================================================= */


.sbvp,
.sbvp *,
.sbvp *::before,
.sbvp *::after {
  box-sizing: border-box;
}


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

.sbvp {
  --sbvp-navy: #172453;
  --sbvp-blue: #416eff;
  --sbvp-blue-light: #7898ff;

  --sbvp-purple: #b52ce9;
  --sbvp-purple-dark: #8035dc;

  --sbvp-orange: #f09a2b;

  --sbvp-white: #ffffff;
  --sbvp-bg: #f8f9fc;

  --sbvp-text: #172453;
  --sbvp-muted: #687184;

  --sbvp-dark: #04172d;
  --sbvp-dark-2: #082a4c;

  --sbvp-line:
    rgba(23,36,83,.10);

  position: relative;
  isolation: isolate;

  width: 100%;
  max-width: none;

  margin: 0;

  overflow: clip;

  color:
    var(--sbvp-text);

  background:
    var(--sbvp-bg);

  font-family: inherit;
}


/* =========================================================
   ROW
========================================================= */

.sbvp__row {
  display: grid;

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

  width: 100%;

  min-height:
    clamp(
      650px,
      82svh,
      880px
    );
}


/* ---------------------------------------------------------
   ROW 2
   CONTENT LEFT / IMAGE RIGHT
--------------------------------------------------------- */

.sbvp__row--image-right {
  grid-template-columns:
    minmax(0,46%)
    minmax(0,54%);
}


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

.sbvp__content {
  position: relative;

  display: flex;

  min-width: 0;

  align-items: center;

  padding:
    clamp(72px,8vw,118px)
    clamp(42px,6vw,108px);

  background:
    radial-gradient(
      circle at 10% 12%,
      rgba(65,110,255,.055),
      transparent 26rem
    ),
    radial-gradient(
      circle at 92% 90%,
      rgba(181,44,233,.04),
      transparent 24rem
    ),
    linear-gradient(
      145deg,
      #fff,
      #f8f9fc
    );
}


/* vertical separation on image-left row */

.sbvp__row--image-left
.sbvp__content::before {
  position: absolute;

  top: 9%;
  bottom: 9%;
  left: 0;

  width: 1px;

  content: "";

  background:
    linear-gradient(
      transparent,
      rgba(65,110,255,.18),
      rgba(181,44,233,.13),
      transparent
    );
}


/* separation on image-right row */

.sbvp__row--image-right
.sbvp__content::after {
  position: absolute;

  top: 9%;
  right: 0;
  bottom: 9%;

  width: 1px;

  content: "";

  background:
    linear-gradient(
      transparent,
      rgba(65,110,255,.18),
      rgba(181,44,233,.13),
      transparent
    );
}


.sbvp__content-inner {
  width: 100%;

  max-width: 680px;
}


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

.sbvp__kicker {
  margin:
    0
    0
    14px;

  color:
    var(--sbvp-blue);

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

  letter-spacing: .17em;

  text-transform: uppercase;
}


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

.sbvp__classification {
  display: flex;

  align-items: center;

  gap: 11px;

  margin-bottom: 19px;
}


.sbvp__classification > span {
  color:
    var(--sbvp-orange);

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


.sbvp__classification > i {
  width: 35px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--sbvp-orange),
      var(--sbvp-blue),
      var(--sbvp-purple)
    );
}


.sbvp__classification > strong {
  color:
    rgba(23,36,83,.46);

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

  letter-spacing: .12em;

  line-height: 1.5;

  text-transform: uppercase;
}


/* =========================================================
   HEADING
========================================================= */

.sbvp h2 {
  max-width: 670px;

  margin: 0;

  color:
    var(--sbvp-navy);

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

  font-weight: 800;

  line-height: 1.03;

  letter-spacing:
    -.042em;

  text-wrap: balance;
}


.sbvp h2 span {
  display: block;

  margin-top: 5px;

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


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

.sbvp__lead {
  max-width: 620px;

  margin:
    23px
    0
    0;

  color:
    var(--sbvp-navy);

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

  font-weight: 500;

  line-height: 1.65;
}


.sbvp__description {
  max-width: 620px;

  margin:
    11px
    0
    0;

  color:
    var(--sbvp-muted);

  font-size:
    clamp(11px,.88vw,13px);

  line-height: 1.72;
}


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

.sbvp__tags {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: 21px;
}


.sbvp__tags span {
  padding:
    6px
    9px;

  border:
    1px solid
    rgba(65,110,255,.11);

  border-radius: 5px;

  color:
    rgba(23,36,83,.64);

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

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


/* =========================================================
   ACTIONS
========================================================= */

.sbvp__actions {
  display: flex;

  flex-wrap: wrap;

  gap: 9px;

  margin-top: 27px;
}


.sbvp-btn {
  display: inline-flex;

  min-height: 48px;

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

  gap: 15px;

  padding:
    0
    21px;

  border-radius: 999px;

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

  text-decoration: none;

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


.sbvp-btn--primary {
  color:
    var(--sbvp-blue);

  border:
    1px solid
    var(--sbvp-orange);

  background:
    #ffffff;
}


.sbvp-btn--secondary {
  color:
    #ffffff;

  border:
    1px solid
    var(--sbvp-purple);

  background:
    linear-gradient(
      135deg,
      var(--sbvp-purple),
      var(--sbvp-purple-dark)
    );

  box-shadow:
    0 15px 34px
    rgba(128,53,220,.17);
}


@media (hover:hover) {

  .sbvp-btn:hover {
    transform:
      translateY(-2px);
  }

}


/* =========================================================
   VALUES
========================================================= */

.sbvp__values {
  display: grid;

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

  margin-top: 32px;

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

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


.sbvp__values > div {
  padding:
    14px
    12px;
}


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


.sbvp__values > div + div {
  border-left:
    1px solid
    var(--sbvp-line);
}


.sbvp__values span {
  display: block;

  color:
    var(--sbvp-orange);

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


.sbvp__values strong {
  display: block;

  margin-top: 5px;

  color:
    rgba(23,36,83,.68);

  font-size: 8px;
}


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

.sbvp__media-wrap {
  min-width: 0;

  padding: 16px;
}


/* left image should sit closer to outside edge */

.sbvp__row--image-left
.sbvp__media-wrap {
  padding-right: 0;
}


/* right image */

.sbvp__row--image-right
.sbvp__media-wrap {
  padding-left: 0;
}


/* =========================================================
   MEDIA
========================================================= */

.sbvp__media {
  position: relative;

  width: 100%;
  height: 100%;

  min-height: 620px;

  margin: 0;

  overflow: hidden;

  border:
    1px solid
    rgba(65,110,255,.11);

  background:
    var(--sbvp-dark);

  box-shadow:
    0 30px 85px
    rgba(13,23,60,.20);
}


/* alternate corner treatment */

.sbvp__row--image-left
.sbvp__media {
  border-radius:
    28px
    28px
    80px
    28px;
}


.sbvp__row--image-right
.sbvp__media {
  border-radius:
    28px
    28px
    28px
    80px;
}


.sbvp__media > img {
  position: absolute;

  inset: -2%;

  width: 104%;
  height: 104%;

  max-width: none;

  object-fit: cover;

  filter:
    saturate(.92)
    contrast(1.05)
    brightness(.81);

  transform:
    translate3d(
      var(--sbvp-x,0),
      var(--sbvp-y,0),
      0
    )
    scale(1.025);

  transition:
    transform .32s ease-out;
}


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

.sbvp__shade {
  position: absolute;
  z-index: 2;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(4,23,45,.04),
      transparent 34%,
      rgba(4,23,45,.18) 62%,
      rgba(4,23,45,.91)
    ),
    radial-gradient(
      circle at 68% 34%,
      rgba(65,110,255,.14),
      transparent 30%
    );
}


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

.sbvp__grid {
  position: absolute;
  z-index: 3;

  inset: 0;

  opacity: .16;

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

  background-size:
    68px 68px;

  -webkit-mask-image:
    radial-gradient(
      circle at 68% 40%,
      #000,
      transparent 74%
    );

  mask-image:
    radial-gradient(
      circle at 68% 40%,
      #000,
      transparent 74%
    );
}


/* =========================================================
   MEDIA TOP
========================================================= */

.sbvp__media-top {
  position: absolute;
  z-index: 8;

  top: 27px;
  right: 28px;
  left: 28px;

  display: flex;

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

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

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

  letter-spacing: .13em;

  text-transform: uppercase;
}


.sbvp__media-top > span:first-child {
  display: flex;

  align-items: center;

  gap: 8px;
}


.sbvp__media-top i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--sbvp-blue-light);

  box-shadow:
    0 0 13px
    rgba(120,152,255,.70);
}


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

.sbvp__target {
  position: absolute;
  z-index: 5;

  top: 43%;
  right: 7%;

  width:
    min(40%,320px);

  aspect-ratio: 1;

  border:
    1px solid
    rgba(120,152,255,.18);

  border-radius: 50%;

  transform:
    translateY(-50%);

  pointer-events: none;
}


.sbvp__target span {
  position: absolute;

  border:
    1px solid
    rgba(120,152,255,.13);

  border-radius: 50%;
}


.sbvp__target span:nth-child(1) {
  inset: 18%;
}


.sbvp__target span:nth-child(2) {
  inset: 35%;

  border-style: dashed;

  border-color:
    rgba(181,44,233,.23);
}


.sbvp__target span:nth-child(3) {
  inset: 47%;
}


.sbvp__target i {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background:
    var(--sbvp-orange);

  box-shadow:
    0 0 0 6px
    rgba(240,154,43,.10),
    0 0 17px
    rgba(240,154,43,.34);

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


/* =========================================================
   GHOST
========================================================= */

.sbvp__ghost {
  position: absolute;
  z-index: 3;

  top: 44%;
  right: 8%;

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

  font-size:
    clamp(120px,11vw,205px);

  font-weight: 900;

  line-height: 1;

  letter-spacing:
    -.08em;

  transform:
    translateY(-50%);
}


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

.sbvp__brand {
  position: absolute;
  z-index: 8;

  top: 72px;
  left: 28px;

  display: grid;

  width: 70px;
  height: 70px;

  place-items: center;

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

  border-radius: 50%;

  background:
    rgba(4,23,45,.34);

  -webkit-backdrop-filter:
    blur(8px);

  backdrop-filter:
    blur(8px);
}


.sbvp__brand strong {
  color:
    #fff;

  font-size: 17px;
}


.sbvp__brand small {
  position: absolute;

  bottom: 12px;

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

  font-size: 5px;

  letter-spacing: .12em;
}


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

.sbvp__media-panel {
  position: absolute;
  z-index: 9;

  right:
    clamp(22px,3vw,44px);

  bottom:
    clamp(24px,3vw,42px);

  left:
    clamp(22px,3vw,44px);

  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;

  padding:
    18px
    20px;

  border:
    1px solid
    rgba(120,152,255,.16);

  border-radius: 12px;

  background:
    linear-gradient(
      135deg,
      rgba(4,23,45,.92),
      rgba(8,42,76,.78)
    );

  box-shadow:
    0 22px 55px
    rgba(0,0,0,.24);

  -webkit-backdrop-filter:
    blur(9px);

  backdrop-filter:
    blur(9px);
}


.sbvp__media-panel small {
  color:
    var(--sbvp-blue-light);

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

  letter-spacing: .10em;
}


.sbvp__media-panel strong {
  display: block;

  max-width: 450px;

  margin-top: 7px;

  color: #fff;

  font-size:
    clamp(18px,1.45vw,25px);

  line-height: 1.08;

  letter-spacing:
    -.03em;
}


.sbvp__media-panel > span {
  flex: 0 0 auto;

  color:
    var(--sbvp-orange);

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

  letter-spacing: .10em;
}


/* =========================================================
   DIVIDER
========================================================= */

.sbvp__divider {
  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: center;

  gap: 18px;

  min-height: 72px;

  padding:
    0
    4%;

  background:
    #fff;
}


.sbvp__divider span {
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(65,110,255,.16),
      transparent
    );
}


.sbvp__divider strong {
  color:
    rgba(23,36,83,.34);

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

  letter-spacing: .14em;
}


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

@media (max-width:1050px) {

  .sbvp__row,
  .sbvp__row--image-right {
    grid-template-columns: 1fr;

    min-height: auto;
  }


  /*
   * Keep content first on smaller screens.
   */

  .sbvp__row--image-left
  .sbvp__content {
    order: 1;
  }


  .sbvp__row--image-left
  .sbvp__media-wrap {
    order: 2;
  }


  .sbvp__content {
    min-height:
      620px;

    padding:
      80px
      30px
      55px;
  }


  .sbvp__row--image-left
  .sbvp__content::before,
  .sbvp__row--image-right
  .sbvp__content::after {
    display: none;
  }


  .sbvp__media-wrap,
  .sbvp__row--image-left
  .sbvp__media-wrap,
  .sbvp__row--image-right
  .sbvp__media-wrap {
    padding:
      0
      28px
      28px;
  }


  .sbvp__media {
    height: 650px;

    min-height: 650px;

    border-radius:
      24px
      24px
      24px
      68px !important;
  }

}


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

@media (max-width:650px) {

  .sbvp__content {
    min-height: auto;

    padding:
      66px
      17px
      40px;
  }


  .sbvp h2 {
    font-size:
      clamp(34px,9vw,37px);
  }


  .sbvp__classification {
    align-items: flex-start;
  }


  .sbvp__actions {
    flex-direction: column;
  }


  .sbvp-btn {
    width: 100%;
  }


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


  .sbvp__values > div {
    padding:
      11px
      0;
  }


  .sbvp__values > div + div {
    border-top:
      1px solid
      var(--sbvp-line);

    border-left: 0;
  }


  .sbvp__media-wrap,
  .sbvp__row--image-left
  .sbvp__media-wrap,
  .sbvp__row--image-right
  .sbvp__media-wrap {
    padding:
      0
      14px
      14px;
  }


  .sbvp__media {
    height: 540px;

    min-height: 540px;

    border-radius:
      20px
      20px
      20px
      46px !important;
  }


  .sbvp__target {
    right: -55px;

    width: 225px;
  }


  .sbvp__brand {
    top: 58px;
    left: 18px;

    width: 58px;
    height: 58px;
  }


  .sbvp__media-panel {
    right: 14px;
    bottom: 14px;
    left: 14px;

    display: block;

    padding: 15px;
  }


  .sbvp__media-panel > span {
    display: inline-block;

    margin-top: 10px;
  }


  .sbvp__divider {
    min-height: 58px;

    padding:
      0
      16px;
  }

}


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

@media (max-width:430px) {

  .sbvp__media {
    height: 500px;

    min-height: 500px;
  }


  .sbvp__description {
    font-size: 12px;
  }


  .sbvp__media-panel strong {
    font-size: 18px;
  }

}


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

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

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

}


/*section 3 end here*/



/*section 4 start here*/

/* =========================================================
   SINDYBAD®
   INDUSTRIES + WHY CHOOSE

   Advanced Premium Cards
   Prefix: sbicp
========================================================= */


.sbicp,
.sbicp *,
.sbicp *::before,
.sbicp *::after {
  box-sizing: border-box;
}


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

.sbicp {
  --sbicp-navy: #171629;
  --sbicp-navy-2: #222c59;

  --sbicp-purple: #9b4dff;
  --sbicp-purple-dark: #7137d6;

  --sbicp-orange: #ff7a00;
  --sbicp-orange-soft: #f09a2b;

  --sbicp-blue: #3978e8;
  --sbicp-cyan: #18c4d7;

  --sbicp-bg: #f6f7fc;
  --sbicp-white: #ffffff;

  --sbicp-text: #171629;
  --sbicp-muted: #687087;

  --sbicp-line:
    rgba(23,22,41,.085);

  position: relative;
  isolation: isolate;

  width: 100%;
  max-width: none;

  margin: 0;

  overflow: clip;

  color:
    var(--sbicp-text);

  background:
    var(--sbicp-bg);

  font-family: inherit;
}


/* =========================================================
   AMBIENT BACKGROUND
========================================================= */

.sbicp__ambient {
  position: absolute;
  z-index: 0;

  inset: 0;

  overflow: hidden;

  pointer-events: none;
}


.sbicp__ambient-grid {
  position: absolute;

  inset: 0;

  opacity: .26;

  background:
    linear-gradient(
      rgba(23,22,41,.026) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(23,22,41,.026) 1px,
      transparent 1px
    );

  background-size:
    84px 84px;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent,
      #000 12%,
      #000 88%,
      transparent
    );

  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      #000 12%,
      #000 88%,
      transparent
    );
}


.sbicp__ambient-orb {
  position: absolute;

  width: 520px;
  height: 520px;

  border-radius: 50%;

  filter:
    blur(10px);
}


.sbicp__ambient-orb--one {
  top: -180px;
  left: -170px;

  background:
    radial-gradient(
      circle,
      rgba(57,120,232,.075),
      transparent 68%
    );
}


.sbicp__ambient-orb--two {
  right: -180px;
  bottom: -190px;

  background:
    radial-gradient(
      circle,
      rgba(155,77,255,.07),
      transparent 68%
    );
}


/* =========================================================
   SHELL
========================================================= */

.sbicp__shell {
  position: relative;
  z-index: 2;

  width:
    min(
      1440px,
      calc(100% - 72px)
    );

  margin:
    0 auto;

  padding:
    clamp(82px,8vw,126px)
    0;
}


/* =========================================================
   BLOCK
========================================================= */

.sbicp__block {
  position: relative;
}


.sbicp__block--why {
  padding-top:
    clamp(82px,8vw,120px);
}


/* =========================================================
   HEADING
========================================================= */

.sbicp__heading {
  max-width: 960px;

  margin:
    0 auto
    42px;

  text-align: center;
}


.sbicp__heading-kicker {
  display: flex;

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

  gap: 10px;

  margin-bottom: 15px;
}


.sbicp__heading-kicker > span {
  color:
    var(--sbicp-purple);

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

  letter-spacing: .15em;
}


.sbicp__heading-kicker > i {
  width: 38px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--sbicp-purple),
      var(--sbicp-orange)
    );
}


.sbicp__heading-kicker > strong {
  color:
    rgba(23,22,41,.43);

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

  letter-spacing: .13em;
}


.sbicp__heading h2 {
  margin: 0;

  color:
    var(--sbicp-navy-2);

  font-size:
    clamp(40px,5vw,69px);

  font-weight: 800;

  line-height: .98;

  letter-spacing:
    -.052em;

  text-wrap: balance;
}


.sbicp__heading h2 span {
  color:
    var(--sbicp-purple);
}


.sbicp__heading > p {
  max-width: 760px;

  margin:
    20px auto 0;

  color:
    var(--sbicp-muted);

  font-size:
    clamp(12px,1vw,15px);

  line-height: 1.75;
}


/* =========================================================
   GRIDS
========================================================= */

.sbicp__grid {
  display: grid;

  gap: 14px;
}


.sbicp__grid--industries {
  grid-template-columns:
    repeat(4,minmax(0,1fr));
}


.sbicp__grid--why {
  grid-template-columns:
    repeat(5,minmax(0,1fr));
}


/* =========================================================
   PREMIUM CARD
========================================================= */

.sbicp-card {
  --mx: 50%;
  --my: 50%;
  --rx: 0deg;
  --ry: 0deg;

  position: relative;

  min-width: 0;
  min-height: 355px;

  padding:
    22px
    22px
    21px;

  overflow: hidden;

  border:
    1px solid
    var(--sbicp-line);

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.98),
      rgba(250,251,255,.98)
    );

  box-shadow:
    0 14px 45px
    rgba(20,27,65,.055);

  transform:
    perspective(1000px)
    rotateX(var(--rx))
    rotateY(var(--ry))
    translateZ(0);

  transform-style:
    preserve-3d;

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

  will-change:
    transform;
}


/* colored premium top edge */

.sbicp-card::before {
  position: absolute;
  z-index: 4;

  top: 0;
  right: 0;
  left: 0;

  height: 3px;

  content: "";

  opacity: .44;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--card-a),
      var(--card-b),
      transparent
    );

  transform:
    scaleX(.48);

  transition:
    opacity .28s ease,
    transform .28s ease;
}


/* bottom color atmosphere */

.sbicp-card::after {
  position: absolute;
  z-index: 0;

  right: -100px;
  bottom: -120px;

  width: 250px;
  height: 250px;

  border-radius: 50%;

  content: "";

  opacity: .36;

  background:
    radial-gradient(
      circle,
      var(--card-soft),
      transparent 68%
    );

  transform:
    scale(.82);

  transition:
    opacity .35s ease,
    transform .35s ease;
}


/* =========================================================
   CURSOR SPOTLIGHT
========================================================= */

.sbicp-card__spotlight {
  position: absolute;
  z-index: 1;

  inset: 0;

  opacity: 0;

  pointer-events: none;

  background:
    radial-gradient(
      260px circle
      at var(--mx) var(--my),
      var(--card-soft),
      transparent 68%
    );

  transition:
    opacity .25s ease;
}


/* =========================================================
   CARD TOP
========================================================= */

.sbicp-card__top {
  position: relative;
  z-index: 3;

  display: flex;

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

  gap: 15px;
}


.sbicp-card__number {
  color:
    rgba(23,22,41,.27);

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

  letter-spacing: .16em;
}


.sbicp-card__status {
  padding:
    5px
    7px;

  border:
    1px solid
    rgba(23,22,41,.07);

  border-radius: 999px;

  color:
    rgba(23,22,41,.38);

  background:
    rgba(246,247,252,.78);

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

  letter-spacing: .11em;

  transition:
    color .25s ease,
    border-color .25s ease,
    background .25s ease;
}


/* =========================================================
   ICON
========================================================= */

.sbicp-card__icon {
  position: relative;
  z-index: 3;

  display: grid;

  width: 82px;
  height: 82px;

  margin-top: 29px;

  place-items: center;

  overflow: hidden;

  border:
    1px solid
    rgba(23,22,41,.065);

  border-radius: 22px;

  color:
    #66748a;

  background:
    linear-gradient(
      145deg,
      #f2f4f8,
      #e9edf4
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.8);

  transform:
    translateZ(26px);

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


.sbicp-card__icon::before {
  position: absolute;

  inset: 0;

  content: "";

  opacity: 0;

  background:
    linear-gradient(
      135deg,
      var(--card-a),
      var(--card-b)
    );

  transition:
    opacity .28s ease;
}


.sbicp-card__icon::after {
  position: absolute;

  top: -30%;
  left: -65%;

  width: 44%;
  height: 160%;

  content: "";

  opacity: 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.38),
      transparent
    );

  transform:
    rotate(22deg);

  transition:
    left .48s ease,
    opacity .28s ease;
}


.sbicp-card__icon svg {
  position: relative;
  z-index: 2;

  width: 42px;
  height: 42px;

  overflow: visible;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 3;

  stroke-linecap: round;
  stroke-linejoin: round;

  transition:
    transform .28s ease;
}


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

.sbicp-card__content {
  position: relative;
  z-index: 3;

  margin-top: 26px;

  transform:
    translateZ(18px);
}


.sbicp-card__content small {
  display: block;

  margin-bottom: 8px;

  color:
    var(--card-a);

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

  letter-spacing: .13em;
}


.sbicp-card__content h3 {
  margin: 0;

  color:
    var(--sbicp-navy-2);

  font-size:
    clamp(19px,1.38vw,23px);

  font-weight: 800;

  line-height: 1.12;

  letter-spacing:
    -.03em;
}


.sbicp-card__content p {
  margin:
    12px
    0
    0;

  color:
    var(--sbicp-muted);

  font-size:
    clamp(11px,.86vw,13px);

  line-height: 1.68;
}


/* =========================================================
   META
========================================================= */

.sbicp-card__meta {
  position: absolute;
  z-index: 3;

  right: 22px;
  bottom: 19px;
  left: 22px;

  display: flex;

  gap: 6px;
}


.sbicp-card__meta span {
  padding:
    5px
    7px;

  border:
    1px solid
    rgba(23,22,41,.065);

  border-radius: 4px;

  color:
    rgba(23,22,41,.44);

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

  font-size: 6px;

  transition:
    border-color .25s ease,
    color .25s ease;
}


/* =========================================================
   CORNER ARROW
========================================================= */

.sbicp-card__arrow {
  position: absolute;
  z-index: 4;

  right: 20px;
  bottom: 19px;

  display: grid;

  width: 28px;
  height: 28px;

  place-items: center;

  border:
    1px solid
    rgba(23,22,41,.08);

  border-radius: 50%;

  color:
    rgba(23,22,41,.38);

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

  font-size: 9px;

  opacity: 0;

  transform:
    translateY(7px)
    rotate(-8deg);

  transition:
    opacity .25s ease,
    transform .25s ease,
    color .25s ease,
    border-color .25s ease;
}


/* industry cards have meta,
   so move arrow slightly up */

.sbicp__grid--industries
.sbicp-card__arrow {
  bottom: 56px;
}


/* =========================================================
   WHY CARDS
========================================================= */

.sbicp-card--why {
  min-height: 390px;
}


.sbicp-card--why
.sbicp-card__content {
  margin-top: 25px;
}


.sbicp-card--why
.sbicp-card__content h3 {
  font-size:
    clamp(18px,1.25vw,21px);
}


/* =========================================================
   PROGRESS LINE
========================================================= */

.sbicp-card__progress {
  position: absolute;
  z-index: 3;

  right: 22px;
  bottom: 21px;
  left: 22px;

  height: 1px;

  overflow: hidden;

  background:
    rgba(23,22,41,.07);
}


.sbicp-card__progress span {
  display: block;

  width: 28%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      var(--card-a),
      var(--card-b)
    );

  transform:
    translateX(-100%);

  transition:
    transform .45s ease,
    width .45s ease;
}


/* =========================================================
   DESKTOP HOVER EFFECT
========================================================= */

@media (hover:hover) and (pointer:fine) {

  .sbicp-card:hover {
    border-color:
      color-mix(
        in srgb,
        var(--card-a) 30%,
        transparent
      );

    box-shadow:
      0 28px 75px
      rgba(20,27,65,.13),
      0 0 0 1px
      rgba(255,255,255,.75)
      inset;
  }


  .sbicp-card:hover::before {
    opacity: 1;

    transform:
      scaleX(1);
  }


  .sbicp-card:hover::after {
    opacity: .72;

    transform:
      scale(1.12);
  }


  .sbicp-card:hover
  .sbicp-card__spotlight {
    opacity: 1;
  }


  /* icon becomes colored */

  .sbicp-card:hover
  .sbicp-card__icon {
    color:
      #ffffff;

    border-color:
      transparent;

    transform:
      translateZ(34px)
      translateY(-5px)
      rotate(-2deg);

    box-shadow:
      0 18px 34px
      var(--card-soft);
  }


  .sbicp-card:hover
  .sbicp-card__icon::before {
    opacity: 1;
  }


  .sbicp-card:hover
  .sbicp-card__icon::after {
    left: 125%;

    opacity: 1;
  }


  .sbicp-card:hover
  .sbicp-card__icon svg {
    transform:
      scale(1.08);
  }


  .sbicp-card:hover
  .sbicp-card__status {
    color:
      var(--card-a);

    border-color:
      var(--card-soft);

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


  .sbicp-card:hover
  .sbicp-card__meta span {
    color:
      var(--card-a);

    border-color:
      var(--card-soft);
  }


  .sbicp-card:hover
  .sbicp-card__arrow {
    color:
      var(--card-a);

    border-color:
      var(--card-soft);

    opacity: 1;

    transform:
      translateY(0)
      rotate(0deg);
  }


  .sbicp-card:hover
  .sbicp-card__progress span {
    width: 100%;

    transform:
      translateX(0);
  }

}


/* =========================================================
   DIVIDER
========================================================= */

.sbicp__divider {
  display: grid;

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

  align-items: center;

  gap: 18px;

  margin:
    clamp(74px,7vw,110px)
    0
    0;
}


.sbicp__divider > span {
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(23,22,41,.12),
      transparent
    );
}


.sbicp__divider > div {
  display: flex;

  align-items: center;

  gap: 8px;

  color:
    rgba(23,22,41,.30);

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

  letter-spacing: .14em;
}


.sbicp__divider i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

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


/* =========================================================
   SAFE REVEAL

   Content remains visible if JS fails.
========================================================= */

.sbicp.is-enhanced
[data-reveal] {
  opacity: 0;

  transform:
    translateY(16px);

  transition:
    opacity .55s ease,
    transform .55s ease;
}


.sbicp.is-enhanced
[data-reveal].is-visible {
  opacity: 1;

  transform: none;
}


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

@media (max-width:1180px) {

  .sbicp__grid--why {
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }

}


@media (max-width:950px) {

  .sbicp__shell {
    width:
      calc(100% - 38px);
  }


  .sbicp__grid--industries,
  .sbicp__grid--why {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .sbicp-card,
  .sbicp-card--why {
    min-height: 360px;
  }

}


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

@media (max-width:620px) {

  .sbicp__shell {
    width:
      calc(100% - 24px);

    padding:
      64px
      0;
  }


  .sbicp__heading {
    margin-bottom: 28px;
  }


  .sbicp__heading-kicker {
    justify-content: flex-start;
  }


  .sbicp__heading {
    text-align: left;
  }


  .sbicp__heading h2 {
    font-size:
      clamp(36px,11vw,48px);
  }


  .sbicp__heading > p {
    margin-left: 0;
  }


  .sbicp__grid--industries,
  .sbicp__grid--why {
    grid-template-columns: 1fr;
  }


  .sbicp-card,
  .sbicp-card--why {
    min-height: auto;

    padding:
      20px
      18px
      24px;

    border-radius: 18px;

    transform: none !important;
  }


  .sbicp-card__icon {
    width: 72px;
    height: 72px;

    margin-top: 23px;

    border-radius: 18px;
  }


  .sbicp-card__icon svg {
    width: 37px;
    height: 37px;
  }


  .sbicp-card__content {
    margin-top: 21px;
  }


  .sbicp-card__content h3 {
    font-size:
      clamp(21px,6.4vw,27px);
  }


  .sbicp-card__content p {
    padding-bottom: 40px;

    font-size: 13px;
  }


  .sbicp-card__meta {
    right: 18px;
    bottom: 20px;
    left: 18px;
  }


  .sbicp-card__progress {
    right: 18px;
    bottom: 20px;
    left: 18px;
  }


  .sbicp__grid--industries
  .sbicp-card__arrow {
    display: none;
  }


  .sbicp__divider {
    margin-top: 65px;
  }


  .sbicp__divider > div {
    white-space: nowrap;
  }

}


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

   Keep icon colors visible without requiring hover.
========================================================= */

@media (hover:none) {

  .sbicp-card__icon {
    color:
      #ffffff;

    border-color:
      transparent;
  }


  .sbicp-card__icon::before {
    opacity: 1;
  }


  .sbicp-card::before {
    opacity: .75;

    transform:
      scaleX(.82);
  }


  .sbicp-card__progress span {
    transform: none;
  }

}


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

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

  .sbicp *,
  .sbicp *::before,
  .sbicp *::after {
    animation:
      none !important;

    transition-duration:
      .01ms !important;
  }


  .sbicp-card {
    transform:
      none !important;
  }

}


/*section 4 end here*/