/*
============================================================
 STOCKSKILL.IN
 PERMANENT WHY SECTION
 V5
============================================================
*/

/*
------------------------------------------------------------
BASE
------------------------------------------------------------
*/

.ss-why-permanent-v5 {

  width: 100%;

  max-width: 1180px;

  margin: 0 auto;

  padding: 72px 24px 76px;

  box-sizing: border-box;

  overflow: visible;

  position: relative;

  background: transparent;

  font-family: inherit;

  writing-mode: horizontal-tb;

  text-orientation: mixed;
}

.ss-why-permanent-v5 *,
.ss-why-permanent-v5 *::before,
.ss-why-permanent-v5 *::after {

  box-sizing: border-box;

  writing-mode: horizontal-tb;

  text-orientation: mixed;

  white-space: normal;

  word-break: normal;

  overflow-wrap: break-word;

  float: none;

  transform: none;
}

/*
------------------------------------------------------------
HEADER
------------------------------------------------------------
*/

.ss-why-v5-kicker {

  display: block;

  margin: 0 0 10px;

  color: #B47A00;

  font-size: 12px;

  line-height: 1.4;

  font-weight: 900;

  letter-spacing: .18em;

  text-transform: uppercase;

  text-align: left;
}

.ss-why-v5-title {

  display: block;

  width: 100%;

  max-width: 760px;

  margin: 0 0 12px;

  padding: 0;

  color: #071E3A;

  font-size: clamp(32px, 4vw, 48px);

  line-height: 1.08;

  font-weight: 900;

  letter-spacing: -.035em;

  text-align: left;
}

.ss-why-v5-description {

  display: block;

  width: 100%;

  max-width: 850px;

  margin: 0;

  padding: 0;

  color: #607086;

  font-size: 15px;

  line-height: 1.75;

  font-weight: 400;

  text-align: left;
}

/*
------------------------------------------------------------
GRID
------------------------------------------------------------
*/

.ss-why-v5-grid {

  display: grid;

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

  gap: 18px;

  width: 100%;

  margin: 30px 0 0;

  padding: 0;
}

/*
------------------------------------------------------------
CARD
------------------------------------------------------------
*/

.ss-why-v5-card {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: flex-start;

  width: 100%;

  min-width: 0;

  min-height: 205px;

  margin: 0;

  padding: 24px;

  position: relative;

  border: 1px solid rgba(11,45,91,.09);

  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f8fafc 100%
    );

  box-shadow:
    0 10px 30px rgba(7,30,58,.07);

  overflow: hidden;
}

.ss-why-v5-card::after {

  content: "";

  position: absolute;

  width: 70px;

  height: 70px;

  right: -28px;

  bottom: -30px;

  border-radius: 50%;

  background: rgba(255,193,7,.10);

  pointer-events: none;
}

/*
------------------------------------------------------------
ICON
------------------------------------------------------------
*/

.ss-why-v5-icon {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 48px;

  height: 48px;

  min-width: 48px;

  max-width: 48px;

  min-height: 48px;

  max-height: 48px;

  margin: 0 0 17px;

  padding: 0;

  border-radius: 14px;

  background: #eef4fa;

  color: #0B2D5B;

  position: relative;

  z-index: 1;
}

.ss-why-v5-icon svg {

  display: block;

  width: 25px;

  height: 25px;

  min-width: 25px;

  max-width: 25px;

  min-height: 25px;

  max-height: 25px;

  margin: 0;

  padding: 0;

  color: #0B2D5B;

  overflow: visible;
}

/*
------------------------------------------------------------
CARD TITLE
------------------------------------------------------------
*/

.ss-why-v5-card-title {

  display: block;

  width: 100%;

  max-width: 100%;

  min-width: 0;

  margin: 0 0 8px;

  padding: 0;

  color: #071E3A;

  font-size: 17px;

  line-height: 1.3;

  font-weight: 850;

  text-align: left;

  position: relative;

  z-index: 1;
}

/*
------------------------------------------------------------
CARD DESCRIPTION
------------------------------------------------------------
*/

.ss-why-v5-card-text {

  display: block;

  width: 100%;

  max-width: 100%;

  min-width: 0;

  margin: 0;

  padding: 0;

  color: #65758A;

  font-size: 13px;

  line-height: 1.65;

  font-weight: 400;

  text-align: left;

  position: relative;

  z-index: 1;
}

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

@media (max-width: 900px) {

  .ss-why-permanent-v5 {

    padding: 58px 20px 62px;
  }

  .ss-why-v5-grid {

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

    gap: 14px;
  }

  .ss-why-v5-card {

    min-height: 190px;

    padding: 20px;
  }
}

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

@media (max-width: 767px) {

  .ss-why-permanent-v5 {

    width: 100%;

    max-width: 100%;

    margin: 0;

    padding: 42px 12px 44px;

    overflow: visible;
  }

  .ss-why-v5-kicker {

    margin-bottom: 8px;

    font-size: 11px;

    letter-spacing: .16em;
  }

  .ss-why-v5-title {

    max-width: 100%;

    margin-bottom: 9px;

    font-size: clamp(
      28px,
      7.5vw,
      38px
    );

    line-height: 1.08;

    letter-spacing: -.03em;
  }

  .ss-why-v5-description {

    max-width: 100%;

    font-size: 13px;

    line-height: 1.65;
  }

  .ss-why-v5-grid {

    display: grid;

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

    gap: 12px;

    width: 100%;

    margin-top: 20px;
  }

  .ss-why-v5-card {

    display: flex;

    width: 100%;

    min-width: 0;

    min-height: 160px;

    height: auto;

    margin: 0;

    padding: 16px;

    border-radius: 17px;

    overflow: hidden;
  }

  .ss-why-v5-icon {

    width: 40px;

    height: 40px;

    min-width: 40px;

    max-width: 40px;

    min-height: 40px;

    max-height: 40px;

    margin-bottom: 11px;

    border-radius: 11px;
  }

  .ss-why-v5-icon svg {

    width: 21px;

    height: 21px;

    min-width: 21px;

    max-width: 21px;

    min-height: 21px;

    max-height: 21px;
  }

  .ss-why-v5-card-title {

    font-size: 14px;

    line-height: 1.3;

    margin-bottom: 6px;
  }

  .ss-why-v5-card-text {

    font-size: 11px;

    line-height: 1.55;
  }
}

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

@media (max-width: 390px) {

  .ss-why-permanent-v5 {

    padding-left: 10px;

    padding-right: 10px;
  }

  .ss-why-v5-grid {

    grid-template-columns: 1fr;

    gap: 12px;
  }

  .ss-why-v5-card {

    min-height: 140px;
  }
}