.wrapper {
  padding: 0 10px;
  margin: 0 auto 6em;
  max-width: 1650px;
}

/* .wrapper:last-child {margin: 6em auto;} */

/* Tabs & Header */
.category-header{
  display: flex;
  flex-direction: row;
  margin-bottom: 2.5em;
}

.category-header .intro-post-group {padding: 0 0 1em;}
.cat-header-side:first-child{width: 45%;}
.cat-header-side:last-child{width: 55%;     z-index: 7;}
.tabs::-webkit-scrollbar, .tabs-services::-webkit-scrollbar, .tabs-iot::-webkit-scrollbar{display: none;}
.shadow {position: relative;}

.shadow:before, .shadow:after {
  content: "";
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 12em;
  position: absolute;
  border-radius: 15px;
  pointer-events: none;
  background: linear-gradient(86deg, rgba(0,0,0,0) 0%, rgb(0 0 0 / 75%) 11%, rgba(0,0,0,0) 54%);
}

.shadow:before {left: 0;}

.shadow:after {
  right: 0;
  transform: scaleX(-1);
}

.tabs, .tabs-services, .tabs-iot {
  gap: 20px;
  z-index: 1;
  cursor: grab;
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  max-width: 96%;
  position: relative;
  overflow-x: scroll;
  flex-direction: row;
  padding: 20px 10px 0;
  align-items: flex-start;
  justify-content: flex-start;
  transform: translateY(5px);
  -webkit-transform: translateY(5px);
}

.tabs > li, .tabs-services > li, .tabs-iot > li {
  display: block;
  list-style: none;
  cursor: pointer;
  color: #8c8c8c;
  position: relative;
  text-align: center;
  padding: 5px 15px;
  border-radius: 15px 0;
  background-color: black;
  transition-duration: .25s;
}

.tabs > li span, .tabs-services > li span, .tabs-iot > li span{
  display: block;
  width: max-content;
}

.tabs > li:hover, .tabs-services > li:hover, .tabs-iot > li:hover{
  transition: .4s;
  border: 1px solid var(--main-color);
}

.tabs > li.active, .tabs-services > li.active, .tabs-iot > li.active {
  color: white;
  margin: 0 10px;
  transform: scale(1.15);
  box-shadow: 3px 3px 9px 0px var(--main-color);
  transition: .4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Scroll Indication */
.scroll-indication{
  left: 0;
  right: 0;
  z-index: 0;
  display: table;
  bottom: 20px;
  margin: 0 auto;
  user-select: none;
  position: absolute;
  text-align: center;
  border-bottom: 1px solid white;
}
/* End */

/* Tabs Content */
.tab__content, .tab__content-services, .tab__content-iot {
  width: 100%;
  position: relative;
  border-radius: 0 20px;
  backdrop-filter: blur(5px);
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 4px 7px 30px rgb(0 0 0 / 54%);
}

.content__wrapper .post-grid-section{
  margin: 0;
  max-width: 100%;
}

.content__wrapper .intro-post-group{
  display: flex;
  padding: 0;
  flex-direction: row;
}

.intro-post-side:first-child{width: 10%;}

.intro-post-side img{
  width: 100%;
  height: 107px;
  object-fit: contain;
}

.intro-post-side:last-child{
  width: 90%;
  text-align: right;
}

.content__wrapper .post-grid-container{
  text-align: left;
  padding-top: 3em;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19em), 1fr));
}

.content__wrapper .post-card img{
  width: 90%;
  height: 280px;
  max-width: 300px;
}

.content__wrapper .intro-post-group p, .content__wrapper .intro-post-group span {
  display: inline-block;
  font-size: clamp(0.83em, 1.5vw, 1.15em);
}

.content__wrapper hr {
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.tab__content > li, .tab__content-services  > li, .tab__content-iot  > li {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  list-style: none;
}

.tab__content > li .content__wrapper, .tab__content-services > li .content__wrapper, .tab__content-iot > li .content__wrapper {
  width: 100%;
  text-align: center;
  border-radius: 5px;
  padding: 45px 40px;
}
/* End */

/* Responsive Mode */
@media (max-width: 1440px) {
  .content__wrapper .post-card img{
    width: 100%;
    height: 20vw;
  }
}

@media (max-width: 1400px) {
  .content__wrapper .post-grid-container {
    padding-top: 1em;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19vw), 1fr));
  }
}

@media (max-width: 800px) {
  .category-header {flex-direction: column;}
  .cat-header-side:first-child, .cat-header-side:last-child{width: 100%;}


  .shadow:before, .shadow:after {
    width: 10em;
    background: linear-gradient(86deg, rgba(0,0,0,0) -21%, rgb(0 0 0 / 74%) 11%, rgba(0,0,0,0) 54%);
  }

  .scroll-indication {bottom: 15px;}

  .tabs, .tabs-services, .tabs-iot {
    gap: 15px;
    height: 110px;
    max-width: 100%;
    padding: 20px 40px;
  }

  .tabs > li, .tabs-services > li, .tabs-iot > li {font-size: 13px;}
  .tab__content > li .content__wrapper, .tab__content-services > li .content__wrapper, .tab__content-iot > li .content__wrapper {padding: 30px 15px;}
  .intro-post-side:first-child {width: 40%;}
  .intro-post-side:last-child {width: 60%;}
  .content__wrapper .intro-post-group {align-items: center;}
  .content__wrapper .intro-post-group p {line-height: 1.1;}

  .content__wrapper .post-grid-container {
    gap: 40px 10px;
    padding-top: 1em;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 45%), 1fr));
  }
}
/* End */