.hexagon-wrapper {
  padding-bottom: 7px;
  list-style: none
}

.hexagon,
.hexagonDesc {
  background: -webkit-gradient(linear, left top, right bottom, from(#fff), to(#f7f7f7));
  background: -webkit-linear-gradient(top left, #fff 0, #f7f7f7);
  background: linear-gradient(to bottom right, #fff 0, #f7f7f7);
  position: relative;
  z-index: 1;
  margin: 3.7em 0;
  width: 215px;
  height: 125px;
  border-radius: 4px;
  display: inline-block;
  top: 10px;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  cursor: pointer
}

.hexagon:after,
.hexagon:before,
.hexagonDesc:after,
.hexagonDesc:before {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
  content: ""
}

.hexagon:before,
.hexagonDesc:before {
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg)
}

.hexagon:after,
.hexagonDesc:after {
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg)
}

.hexagon:hover,
.hexagonDesc:hover {
  top: 0
}

.hexagon .icon,
.hexagonDesc .icon {
  width: 68px;
  height: 68px;
  z-index: 10;
  top: -10px
}

.hexagon .icon,
.hexagon .title,
.hexagonDesc .icon,
.hexagonDesc .title {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

.hexagon .title,
.hexagonDesc .title {
  width: 172px;
  z-index: 11;

  color: #000;
  top: 71%;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-transform: capitalize;
  cursor: pointer;
  line-height: 18px
}

.hexagonDesc .title {
  bottom: 37px;
  width: 155px
}

.hexagonDesc .description {
  position: absolute;
  width: 190px;
  z-index: 11;
  bottom: 10px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);

  font-size: 15px;
  color: #000;
  text-align: center
}

.hexagonLarge-wrapper {
  padding-bottom: 7px
}

.hexagonLarge {
  background: -webkit-gradient(linear, left top, right bottom, from(#fff), to(#f7f7f7));
  background: -webkit-linear-gradient(top left, #fff 0, #f7f7f7);
  background: linear-gradient(to bottom right, #fff 0, #f7f7f7);
  position: relative;
  z-index: 1;
  margin: 3.7em 0;
  width: 463px;
  height: 270px;
  border-radius: 4px;
  display: inline-block;
  top: 10px;
  -webkit-transition: all .2s ease;
  transition: all .2s ease
}

.hexagonLarge:after,
.hexagonLarge:before {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
  content: ""
}

.hexagonLarge:before {
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg)
}

.hexagonLarge:after {
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg)
}

.hexagonLarge .icon {
  width: 76px;
  height: 76px;
  position: absolute;
  z-index: 10;
  left: 50%;
  top: -35px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

.hexagonLarge .icon img {
  width: 76px
}

.hexagonLarge .title {
  position: absolute;
  width: 340px;
  z-index: 11;
  top: 65px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  text-align: center
}

.hexagonLarge .title h3 {

  color: #000;
  font-size: 22px;
  font-weight: 700;
  text-transform: capitalize
}

.hexagonLarge .content {
  width: 370px;
  position: absolute;
  z-index: 11;
  top: 115px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  text-align: center
}

.hexagonLarge .content p {
  margin-bottom: 25px;
  font-size: 19px;

}

.hexagonLarge .content a {
  text-align: center;
  font-size: 14px;

  letter-spacing: 3px;
  color: #f07100;
  text-decoration: underline;
  text-transform: uppercase
}

.hexagonOutline-wrapper {
  padding-bottom: 7px
}

.hexagonOutline {
  /* background: #17aefa; */
  position: absolute;
  left: 0;
  z-index: 0;
  margin: 3.7em 0;
  width: 215px;
  height: 125px;
  border-radius: 4px;
  display: inline-block;
  -webkit-transition: all .2s ease;
  transition: all .2s ease
}

.hexagonOutline:after,
.hexagonOutline:before {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
  content: ""
}

.hexagonOutline:before {
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg)
}

.hexagonOutline:after {
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg)
}

.hexagonOutlineLarge-wrapper {
  padding-bottom: 7px
}

.hexagonOutlineLarge {
  /* background: #17aefa; */
  position: absolute;
  left: 0;
  top: 8px;
  z-index: 0;
  margin: 3.7em 0;
  width: 463px;
  height: 270px;
  border-radius: 4px;
  display: inline-block;
  -webkit-transition: all .2s ease;
  transition: all .2s ease
}

.hexagonOutlineLarge:after,
.hexagonOutlineLarge:before {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
  content: ""
}

.hexagonOutlineLarge:before {
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg)
}

.hexagonOutlineLarge:after {
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg)
}

.MainTabs {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 30px
}

.ProjectBlock {
  background: url(/_next/static/media/pro_1_bg.174c081901d85e30692b1744239a5ed8.jpg) no-repeat 100% 0;
  display: flow-root;
  cursor: default
}

.HomeSection5 {
  background: linear-gradient(90deg, rgb(62, 75, 255) 0%, rgb(113, 61, 255) 50%, rgb(204, 85, 255) 100%);
}

.HomeSection5 .SmallOrangeTitle h3 {
  color: #fff;
  background: url(/_next/static/media/stripe_white.97517ff0f7f3c5c9abfd3e0ace1e9dad.png) no-repeat center 100%
}

.HomeSection5 .BigBlackTitle h2 {
  color: #fff
}

.HomeSection5 .SectionSubContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: url(/_next/static/media/dashed_curved_line.fb012b6e6ae18f930ca8e67701636bb8.png) no-repeat center 40px;
  background-size: 80%;
  margin-top: 10px;
  position: relative
}

.HomeSection5 .SectionSubContainer .BCS_LOGO {
  /* background: url("/_next/static/media/sec_5_bcs_logo.19952a1d98b2c9eea52cf5f297ab10ad.png") no-repeat 50%; */
  filter: drop-shadow(0px 3px 2px white);
  width: 422px;
  height: 488px;
  position: absolute;
  top: -9px;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  opacity: 1;
  -webkit-transition: .3s;
  transition: .3s
}

.HomeSection5 .SectionSubContainer .hexagon-wrapper {
  width: 216px;
  cursor: pointer;
  height: -moz-fit-content;
  height: fit-content
}

.HomeSection5 .SectionSubContainer .hexagon-wrapper:hover .BCS_LOGO {
  opacity: 0;
  -webkit-transition: .3s;
  transition: .3s
}

.HomeSection5 .SectionSubContainer .hexagon-wrapper:hover div.content {
  visibility: visible;
  opacity: 1;
  -webkit-transition: .3s;
  transition: .3s;
  position: absolute;
  top: -0px;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  border-radius: 50%;
  height: 500px;
  width: 700px;
  align-items: center;
  display: flex
}

.HomeSection5 .SectionSubContainer .hexagon {
  width: 177px;
  height: 104px;
  top: 0;
  margin: 3.7em 0 4.7em 20px
}

@-webkit-keyframes zoominoutsinglefeatured {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes zoominoutsinglefeatured {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

.HomeSection5 .SectionSubContainer .hexagon-wrapper:hover .hexagon {
  -webkit-animation: zoominoutsinglefeatured 2s infinite;
  animation: zoominoutsinglefeatured 2s infinite
}

.HomeSection5 .SectionSubContainer .hexagon .icon {
  width: 149px;
  height: 112px;
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 0
}

.HomeSection5 .SectionSubContainer .hexagon-wrapper .title {
  color: #fff;
  font-size: 20px;

  text-align: center;
  margin-bottom: 20px
}

.HomeSection5 .SectionSubContainer .hexagon-wrapper .content {
  /* background: rgba(17, 153, 249, .8509803921568627); */
  background: linear-gradient(90deg, rgb(62, 75, 255) 0%, rgb(113, 61, 255) 50%, rgb(204, 85, 255) 100%);

  visibility: hidden;
  position: absolute;
  top: -0px;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  opacity: 0;
  -webkit-transition: .3s;
  transition: .3s;
  border-radius: 50%;
  overflow: hidden;
  height: 400px;
  width: 700px;
  display: flex;
  align-items: center
}

.HomeSection5 .SectionSubContainer .hexagon-wrapper .content p {
  color: #fff;
  font-size: 20px;

  text-align: center
}

.HomeSection5 .SectionContainer .BtnBlock {
  text-align: center;
  margin-top: 40px
}