.c-vertical-tabs{
  display: flex;
  gap: 30px;
}
.c-vertical-tabs__nav{
  flex: 0 0 32%;
  gap: 1px;
}
.c-vertical-tabs__panels{
  flex: 1;
}
.c-vertical-tabs__nav-item{
  position: relative;
  margin: 0;
  overflow: hidden;
  font-weight: 400;
  border-bottom: 1px solid #E4E4E4;
  line-height: 1;
}
.c-vertical-tabs__nav-item a{
  display: block;
  padding: 25px 0;
  color: var(--primary-color);
  font-size: 0.9em;
}
.c-vertical-tabs__nav-item a path{
  fill: var(--primary-color);
}


.c-vertical-tabs__nav-item a svg{
  margin-left: auto;
}
.c-vertical-tabs__nav-item.active{
  font-weight: 700;
}
.c-vertical-tabs__nav-item.active a,
.c-vertical-tabs__nav-item a:hover{
  color: inherit;
}

.c-vertical-tabs__nav-item.active a svg path,
.c-vertical-tabs__nav-item a:hover svg path{
  fill: white;
}

.c-vertical-tabs__panel-item{
  display: none;
  padding: 20px;
  border-bottom: 1px solid;
}

.c-vertical-tabs__panel-item.active{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.c-vertical-tabs__content {
  padding-top: 20px;
}

.c-vertical-tabs__heading{
  margin-bottom: 30px;
}

.c-vertical-tabs__heading a{
  color: inherit;
  gap: 5px;
}
.c-vertical-tabs__heading a svg{
  margin-left: auto;
  width: 30px;
  transition: all ease .35s;
}
.c-vertical-tabs__heading a path{
  fill: var(--primary-color);
}
.c-vertical-tabs__panel-item.active .c-vertical-tabs__heading a svg{
  transform: rotate(90deg);
}
.c-vertical-tabs__buttons{
  margin-top: 30px;
  position: relative;
  z-index: 10;
}

.c-vertical-tabs__content-text p {
  font-size: 0.9em;
}


@media(min-width: 768px){
  .c-vertical-tabs__content{
    display:block !important;
    padding: 0;
  }

  .c-vertical-tabs__image {
    display: block;
  }

  .c-vertical-tabs__heading {
    display: none;
  }

  .c-vertical-tabs__heading a{
    user-select: none;
  }
  .c-vertical-tabs__panel-item{
    border-bottom: 0 none;
  }
}

@media(max-width: 767px){
  .c-vertical-tabs__nav{
    display: none;
  }
  .c-vertical-tabs__panel-item{
    display: block;
  }

  .c-vertical-tabs__content--outer {
    padding: 1em 0;
  }

  .c-vertical-tabs__content {
    display: none;
    
  }

  .c-vertical-tabs__image {
    display: none;
  }


  .c-vertical-tabs__heading{
    margin-bottom: 0;
    cursor:pointer;
    
  }
  .c-vertical-tabs__panel-item.active .vertial-tabs__heading a{
    color: var(--secondary-color) !important;
  }

  .c-vertical-tabs__buttons{
    margin-top: 15px;
  }
  
  .c-vertical-tabs__buttons--multi .c-button:last-child {
    margin-top: 15px;
  }
  
}

@media (min-width: 1170px) {
  .c-vertical-tabs__panel-item{
    padding: 50px;
    border-radius: 20px;
    background: url("https://9134784.fs1.hubspotusercontent-na1.net/hubfs/9134784/website/backgrounds/Interconnection%20Graphic_Square_G.png") no-repeat left bottom #F5F0EC;
    background-size: 30%;
  }
  
  .c-vertical-tabs-wrapper.no-bg .c-vertical-tabs__panel-item{
    background: #F5F0EC;
  }
}
  .c-vertical-tabs__content-inner{
    flex-direction: row;
    gap: 50px;
  }
  .c-vertical-tabs__content-title{
    flex: 0 0 40%;
  }
  .c-vertical-tabs__content-text{
    flex: 0 0 calc(60% - 50px);
  }
  .c-vertical-tabs__content-text :first-child{
    margin-top: 0;
  }
}