/* ----------------------------------------------------------- */
/* Sub Section ( 8 / 10 ) for METHODOLOGY BOX
/* ----------------------------------------------------------- */
.methodology-container {
  background: var(--color-white);
  border-left: var(--space-2xs) solid var(--color-bg);
  border-top: var(--space-2xs) solid var(--color-bg);
  position: relative;
  -webkit-box-shadow: 0 var(--space-xs) var(--space-base) 0 rgb(0 0 0 / 10%);
  box-shadow: 0 var(--space-xs) var(--space-base) 0 rgb(0 0 0 / 10%);
}

.methodology-item {
  -ms-flex: 0 0 16.666%;
  flex: 0 0 16.666%;
  color: var(--color-text-dark);
  border-right: var(--space-2xs) solid var(--color-bg);
  border-bottom: var(--space-2xs) solid var(--color-bg);
  position: relative;
  overflow: hidden;
  -webkit-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  z-index: 1;
}

.methodology-item:hover {
  z-index: 999;
  background: var(--color-bg);
}

.methodology-item:after {
  -webkit-transform: translateX(30%) skew(-30deg);
  transform: translateX(30%) skew(-30deg);
  opacity: 0;
  width: 120%;
}

@media (max-width: 90em) {
  .methodology-item {
	font-size: 36px;
	line-height: 38px;
  }
}

@media (max-width: 1300px) {
  .methodology-item {
	-ms-flex: 0 0 20%;
	flex: 0 0 20%;
  }
}

@media (max-width: 1280px) {
  .methodology-item {
	-ms-flex: 0 0 25%;
	flex: 0 0 25%;
  }
}

@media (max-width: 960px) {
  .methodology-item {
	-ms-flex: 0 0 33.333%;
	flex: 0 0 33.333%;
  }
}

@media (max-width: 640px) {
  .methodology-item {
	-ms-flex: 0 0 50%;
	flex: 0 0 50%;
  }
}

.methodology-item a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 32px;
  color: var(--color-text-dark);
  position: relative;
  z-index: 2;
}

.methodology-item-icon,
.methodology-item h3 {
  margin-bottom: var(--space-md);
}

.methodology-item svg {
  width: 50px;
  height: 50px;
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

.methodology-item:hover svg {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

@media (max-width: 90em) {
  .methodology-item svg {
	width: 42px;
	height: 42px;
  }
}

.methodology-item h3 {
  font-size: var(--font-3xl);
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0;
  color: var(--color-text-dark);
  margin-bottom: 9px;
}

@media (max-width: 62em) {
  .methodology-item h3 {
	font-size: 18px;
	line-height: 26px;
  }
}

@media (max-width: 840px) {
  .methodology-item h3 {
	font-size: 16px;
	line-height: 24px;
  }
}

.methodology-item .content p {
  letter-spacing: 0.5px;
  font-size: var(--font-xs);
  line-height: var(--font-2xl);
  color: var(--color-text);
}