.panorama-widget {

  display: flex;

  justify-content: space-around;

  align-items: center;

  /* background: linear-gradient(to right, #ffe6e6, #e6f7ff); */

  padding: 20px;

  border-radius: 10px;

}



.box {

  background: #fff;

  border-radius: 10px;

  /* padding: 32px; */

  padding: 45px 32px;

  text-align: center;

  cursor: pointer;

  flex: 1;

  margin: 0 10px;

  position: relative;

  overflow: hidden;

  border-radius: 32px;

  height: 100%;

}



.content {

  transition: opacity 0.5s ease-in-out;

}

.content .title {

    display: flex;

    align-items: center;

    justify-content: center;

}

.content .title .highlight {

    padding-left: 10px;

}

span.highlight {

  white-space: nowrap;

}

.white-content {

  opacity: 1;

  position: relative;

    z-index: 1;

}



.blue-content {

  opacity: 0;

  display: none;

}



.box.expanded .white-content {

  /* opacity: 0; */

}



.box.expanded .blue-content {

  opacity: 1;

  display: block;

}



.hidden {

  display: none;

}



.title {

  font-size: 24px;

  font-weight: bold;

}



.price {

  font-size: 36px;

  color: #007bff;

}



.old-price {

  /* text-decoration: line-through; */

  color: #999;

}



.features {

  text-align: left;

  /* margin: 20px 0; */

  margin: 20px 0 24px 15px !important;

  list-style: none !important;

  padding: 0 !important;

}

.price span {

    font-size: 25px;

    padding-left: 5px;

}

ul.features li i {

    margin-right: 13px;

}



.features li {

  margin-bottom: 10px;

}

.white-content .features li {

    display: flex;

    align-items: start;

}

.box.expanded {

    border-radius: 32px;

    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.10) inset, 4px 2px 4px 0px rgba(210, 182, 182, 0.18);

    padding: 32px;

}



.action-btn {

  background: #007bff;

  color: #fff;

  border: none;

  padding: 10px 20px;

  border-radius: 5px;

  cursor: pointer;

}



.action-btn:hover {

  background: #0056b3;

}

@media(max-width: 500px) {

  .panorama-widget {

    flex-direction: column;

  }

  .box {

    margin: 10px 0;

    padding: 40px 10px;

    width: 100%;

    cursor: none;

  }

  .box.expanded {

    padding: 40px 10px;

}

  .content .title {

    /* flex-direction: column; */

}

.content .title .highlight {

    padding-left: 8px;

}

.price {

    margin-top: 10px;

}

}



.box {

  position: relative;

  background: #fff;

  /* transition: background-color 0.1s ease-in-out; */

}



.box.expanded {

  /* background-color: transparent; */

}



.box::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  /* background-image: linear-gradient(309deg, #0061FE -13%, #E5E6EC 172%); */

  opacity: 0;

  transition: opacity 0.2s ease-in-out;

  z-index: 1; /* Ensure it's above the box background */

}



.box.expanded::before {

  opacity: 1;

}

.features li div:last-child {
  /* flex: 1; */
  /* overflow: hidden; */
  width: 100%;
  word-break: break-word;
}
ul.features span.highlight {
  white-space: normal;
}