.horizondal-tab-style {
  display: flex;
  min-height: 700px;
  max-height: 700px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style-type: none;
}

.horizondal-tab-style li {
  /* flex: 1; */
  display: flex;
  /* padding: 40px 20px; */
  /* background: #E74C3C; */
  cursor: pointer;
  transition: all 0.5s ease;
  border-radius: 15px;
}
.horizondal-tab-style li:hover {
  /* background: #e53f2e; */
}
.horizondal-tab-style li.active {
  flex: 5;
  background: #fff;
  cursor: default;
}
.horizondal-tab-style li.active h2 {
  color: #E74C3C;
}
.horizondal-tab-style li.active .section-content {
  flex: 4;
  opacity: 1;
  transform: scaleX(1);
  color: #E74C3C;
  /* display: block; */
  padding: 60px 50px;
  /* width: 100%; */
}
.horizondal-tab-style li .section-title {
  /* flex: 1; */
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  color: white;
  width: 102px;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 40px 20px;
  background-image: url(../images/icons/plus.png);
  background-repeat: no-repeat;
  background-position: top 15px center;
  justify-content: flex-end;
}
.horizondal-tab-style li .section-title h2 {
  margin: 0;
  /* transform: rotate(-90deg); */
  white-space: nowrap;
  transform: rotate(270deg);
  /* margin-top: 437px; */
  font-size: 20px;
  font-weight: 600;
  color: var(--body-color);
}
.horizondal-tab-style li .section-content {
  flex: 1;
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: all 0.25s 0.1s ease-out;
  /* display: none; */
  width: 0;
  flex-direction: column;
}
.horizondal-tab-style .hor-tab-bg1{ background-color: #fee1e6;}
.horizondal-tab-style .hor-tab-bg2{ background-color: #f7d6ec;}
.horizondal-tab-style .hor-tab-bg3{ background-color: #e4e2fc;}
.horizondal-tab-style .hor-tab-bg4{ background-color: #e6f7f1;}
.horizondal-tab-style .hor-tab-bg5{ background-color: #f2fcdd;}
.horizondal-tab-style .hor-tab-bg6{ background-color: #f8eed8;}

.horizondal-tab-style .active.hor-tab-bg1{ background-color: #fee1e6;}
.horizondal-tab-style .active.hor-tab-bg2{ background-color: #f7d6ec;}
.horizondal-tab-style .active.hor-tab-bg3{ background-color: #e4e2fc;}
.horizondal-tab-style .active.hor-tab-bg4{ background-color: #e6f7f1;}
.horizondal-tab-style .active.hor-tab-bg5{ background-color: #f2fcdd;}
.horizondal-tab-style .active.hor-tab-bg6{ background-color: #f8eed8;}

.horizondal-tab-style li.active .section-title{ border-right: 1px solid #00000030;}
.horizondal-tab-style li .section-content h3{ font-size: 20px; font-weight: 600; color: var(--body-color);}
.horizondal-tab-style li .section-content p{ color: var(--body-color); margin-bottom: 50px;}
.horizondal-tab-style li .section-content .p-list p{margin-bottom: 8px;     font-size: 15px; font-weight: 600;background-image: url(../images/list.png);background-position: left top 2px;background-repeat: no-repeat;padding-left: 32px;}



@media only screen and (max-width: 1180px) {
  .horizondal-tab-style {
    min-height: 700px;
    max-height: 620px;}
}

@media only screen and (max-width: 1024px) {
.horizondal-tab-style{  min-height: inherit; max-height: inherit;}
.horizondal-tab-style li .section-title{ width: 100%;text-align: left; padding: 20px;     background-position: right 15px center;}
.horizondal-tab-style li .section-content{ height: 0px; width: 100%;flex: inherit; display: none;}
.horizondal-tab-style li.active .section-content{ height: auto;padding: 30px; display: block;}
.horizondal-tab-style li, .horizondal-tab-style{ flex-direction: column;}
.horizondal-tab-style li .section-title h2 { transform: inherit;}
.horizondal-tab-style li.active .section-title { border-bottom: 1px solid #00000030; border-right: none;}
}


@media only screen and (max-width: 980px) {
.horizondal-tab-style li .section-content h3 {
    font-size: 18px;}
    .horizondal-tab-style li .section-title h2{ font-size: 18px;}
}
@media only screen and (max-width: 767px) {    .horizondal-tab-style li .section-title h2 {
  white-space: inherit;
}}
@media only screen and (max-width: 575px) {
  .horizondal-tab-style li .section-title h2, .horizondal-tab-style li .section-content h3 {
    font-size: 16px;
}
.horizondal-tab-style li .section-content p{ font-size: 14px;}
.horizondal-tab-style li .section-title { padding: 20px 45px 20px 20px;}
.horizondal-tab-style li .section-content .p-list p{ font-size: 14px;}
.horizondal-tab-style li .section-title{ background-size: 20px;}
.horizondal-tab-style li .section-content p{ margin-bottom: 25px;}
.horizondal-tab-style li{ border-radius: 10px;}
.horizondal-tab-style li .section-title h2{    white-space: inherit;}
}

@media only screen and (max-width: 320px) {
  .horizondal-tab-style li.active .section-content {
      
    padding: 15px;
}
}