.overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      153.85deg,
      rgba(26, 35, 66, 0.23) 56.8%,
      rgba(255, 162, 26, 0.74) 109.34%
    ),
    linear-gradient(
      195.78deg,
      rgba(26, 35, 66, 0.53) 39.38%,
      rgba(36, 156, 191, 0.94) 102.52%
    );
  z-index: 1;
}

.content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

.content h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.content p {
  font-size: 1.1rem;
  line-height: 1.6;
}

html {
  scroll-behavior: smooth;
}

/* Start Tab */
.tab-feature-container {
  padding-block: 83px;
}
.vertical-tabstrip.k-tabstrip {
  flex-flow: row nowrap;
  gap: 67px;
}
.vertical-tabstrip.k-tabstrip .k-tabstrip-items {
  flex-flow: column wrap;
}
.vertical-tabstrip .k-tabstrip-items-wrapper {
  width: 235px;
}

.vertical-tabstrip.k-tabstrip .k-tabstrip-items-wrapper .k-item.k-active,
.vertical-tabstrip.k-tabstrip .k-tabstrip-items-wrapper .k-item.k-selected,
.vertical-tabstrip.k-tabstrip .k-tabstrip-items-wrapper .k-item:active {
  border-color: transparent;
  color: #424242;
  background-color: transparent;
}
.vertical-tabstrip.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item .k-link {
  justify-content: flex-start;
}
.vertical-tabstrip.k-tabstrip .k-tabstrip-items .k-link {
  padding: 0;
}

.vertical-tabstrip.k-tabstrip .k-tabstrip-content,
.vertical-tabstrip.k-tabstrip > .k-content {
  padding: 0;
  border-width: 0;
}

.vertical-tabstrip.k-tabstrip .k-tabstrip-items {
  list-style: none;
  padding: 5px 0 0;
  margin: 0;
  border-left: 1px solid #ccc;
}

.vertical-tabstrip.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item {
  margin-bottom: 0;
  padding-left: 28px;
  font-size: 22px;
  line-height: 48px;
  cursor: pointer;
  position: relative;
}

.vertical-tabstrip.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item::before {
  content: "";
  width: 3px;
  height: 29px;
  position: absolute;
  left: -2px;
  top: 10px;
  background-color: transparent;
}

.vertical-tabstrip.k-tabstrip-top
  > .k-tabstrip-items-wrapper
  .k-item.k-active::before {
  background-color: rgba(42, 148, 178, 1);
}
.vertical-tabstrip.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item:active {
  background-color: transparent;
}

.vertical-tabstrip.k-tabstrip .k-tabstrip-items .k-link {
  font-weight: 400;
  color: rgba(0, 0, 0, 0.4);
  text-decoration: none;
}

.vertical-tabstrip.k-tabstrip .k-tabstrip-items-wrapper,
.vertical-tabstrip.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item:active,
.vertical-tabstrip.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-active {
  border-color: transparent !important;
}

.vertical-tabstrip.k-tabstrip-top
  > .k-tabstrip-items-wrapper
  .k-item:active
  .k-link,
.vertical-tabstrip.k-tabstrip-top
  > .k-tabstrip-items-wrapper
  .k-item.k-active
  .k-link {
  font-weight: 700;
  color: var(--color-black);
}

.vertical-tabstrip.k-tabstrip .k-tabstrip-items-wrapper .k-item.k-focus,
.vertical-tabstrip.k-tabstrip .k-tabstrip-items-wrapper .k-item:focus {
  box-shadow: inset 0 0 0 2px transparent;
}

.tab-feature-container h2 {
  font-size: 46px;
  line-height: 59px;
  margin: 0 0 13px;
}

.tab-feature-container p {
  font-size: 16px;
  line-height: 25px;
  margin: 13px 0;
}

.layer {
  margin-block: 58px;
}
.layer.has-top {
  margin-top: 0;
}

.layer h2 {
  font-size: 32px;
  line-height: 46px;
}

.layer p + h3 {
  margin-top: 38px;
}
.layer h3 {
  line-height: 25px;
  margin-block: 13px;
}

.layer p {
  line-height: 25px;
  margin: 13px 0;
}

.layer img {
  display: block;
  margin: 38px 0 38px;
}
.layer img:last-child {
  margin-bottom: 0;
}

.layer img:last-child {
  margin-bottom: 0;
}

.layer ul {
  margin: 22px 0 38px;
}
.layer ul li {
  font-size: 16px;
  line-height: 25px;
  margin-block: 9px;
}

/* End Tab */
/* Make the tabstrip container sticky */
.vertical-tabstrip {
  display: flex;
}

/* Style for the tabs navigation */
.vertical-tabstrip .k-tabstrip-items {
  position: sticky;
  top: 100px; /* Stick 200px from top */
  align-self: flex-start;
  height: fit-content;
  margin-right: 20px; /* Space between tabs and content */
}

/* Style for the tab content */
.vertical-tabstrip .k-tabstrip-content {
  flex: 1;
  overflow: auto;
}

/* If you need responsive behavior */
@media (max-width: 768px) {
  .vertical-tabstrip {
    flex-direction: column;
  }
  .vertical-tabstrip .k-tabstrip-items {
    position: static;
    display: flex;
    overflow-x: auto;
    margin-right: 0;
    margin-bottom: 20px;
  }
}

/* End Sticky */

.banner-section.banner-feature {
  margin: 10px 10px 0;
}
.banner-section.banner-feature .banner-content {
  max-width: 738px;
  z-index: 1;
}

.banner-section.banner-feature .banner-content p {
  max-width: 738px;
}

@media (min-width: 768px) {
  .tab-feature-container h1 {
    font-size: 3rem;
  }

  .tab-feature-container p {
    font-size: 16px;
  }
}

@media (max-width: 1024px) {
  .banner-section.banner-feature,
  .overlay {
    margin: 0;
    border-radius: 0;
  }
  .corporate-plans-content {
    padding: 80px 20px;
  }
  .corporate-plans-container {
    justify-content: center;
  }
  .vertical-tabstrip.k-tabstrip {
    gap: 30px;
  }
}

@media (max-width: 767px) {
  .vertical-tabstrip.k-tabstrip {
    flex-flow: column nowrap;
  }

  .tab-feature-container {
    padding-top: 50px;
    padding-bottom: 30px;
  }
}
