/* Horizontal Accordion Start Here */
.horizontal-accordion {
    display: flex;
    width: 100%;
    padding: 0;
}
.info-expand {
  height: 350px;
  width: 20%;
  box-sizing: border-box;
  padding: 0;
  margin-bottom: 100px !important;
  display: block;
  transition: width 0.6s ease;
  border-radius: 3px;
  color: black;
  background: #fff;
  border: 0;
  position: relative;
  background: linear-gradient(180deg, rgb(97, 145, 173) 0%, #7fa8c1 83.47%);
}

/* When hovered (desktop) or active (mobile or default) */
.info-expand:hover,
.info-expand.active {
  height: 350px;
  width: 60%;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Image background overlay on hover or active */
.info-expand::before,
.info-expand.active::before {
  content: '';
  position: absolute;
  /* background: linear-gradient(180deg, rgb(97, 145, 173) 0%, #7fa8c1 83.47%); */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

/* Inner card appearance transition */
.info-accordion-card {
  background: transparent;
  position: relative;
  opacity: 0;
  transition: opacity 0.5s ease-in;
  margin: 16px;
}
.info-expand .text-wrap-element-left{
  display: none;
}

/* Show card when hovered or active */
.info-expand:hover .info-accordion-card,
.info-expand.active .info-accordion-card {
  opacity: 1;
  transition-delay: 0.4s;
}

.info-expand:hover .info-accordion-card,
.info-expand.active .info-accordion-card {
  opacity: 1;
  transition-delay: 0.4s;
}

.info-expand:hover .text-wrap-element-left,
.info-expand.active .text-wrap-element-left {
  display: block;
  opacity: 1;
  transition-delay: 0.4s;
}


/* Hide the side text when hovered or active */
.info-expand:hover .info-icon-hide,
.info-expand.active .info-icon-hide {
  display: none !important;
}
.info-icon-hide{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

/* bottom heading */
.info-bottom-text{
  position: absolute;
  left: 0;
  bottom: -100px;
  max-width: 160px;
}

/* Image background style (default fallback) */
.info-bg-img {
  position: relative;
  z-index: 0;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  cursor: pointer;
  margin-bottom: 10px;
}


.info-expand:hover.vertical-bg-01,
.info-expand.active.vertical-bg-01{
  background: url('../img/pillers-img-01.webp');
}
.info-expand:hover.vertical-bg-02,
.info-expand.active.vertical-bg-02{
  background: url('../img/pillers-img-02.webp');
}
.info-expand:hover.vertical-bg-03,
.info-expand.active.vertical-bg-03{
  background: url('../img/pillers-img-03.webp');
}
.info-expand:hover.vertical-bg-04,
.info-expand.active.vertical-bg-04{
  background: url('../img/pillers-img-04.webp');
}
.info-expand:hover.vertical-bg-05,
.info-expand.active.vertical-bg-05{
  background: url('../img/pillers-img-05.webp');
}


/* Mobile behavior */
@media (max-width: 991px) {
  .info-hide .info-accordion-card {
    transition: none;
  }
  .info-expand {
    cursor: pointer;
  }
}
/* Horizontal Accordion End Here */


@media (max-width: 1024px) {
    .horizontal-accordion {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0;
    }
    .info-expand {
        height: 200px;
        width: 100%;
        box-sizing: border-box;
        padding: 0;
        margin-bottom: 100px !important;
        display: block;
        transition: height 0.6s ease;
        border-radius: 3px;
        color: black;
        background: #fff;
        border: 0;
        position: relative;
        background: linear-gradient(180deg, rgb(97, 145, 173) 0%, #7fa8c1 83.47%);
    }

    /* When hovered (desktop) or active (mobile or default) */
    .info-expand:hover,
    .info-expand.active {
        height: 400px;
        width: 100%;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
    .info-bottom-text {
        position: absolute;
        left: 0;
        bottom: -60px;
        max-width: 100%;
        right: 0;
        margin: auto;
    }
    .info-bottom-text .text-start{
       text-align: center !important;
    }
}
@media (max-width: 767px) {
    .info-expand {
        height: 150px;
    }
}