html {
  scroll-behavior: smooth;
}
.bottle-spinner-wrapper {
        background: #ffefef;
        padding-top: 7rem;
        padding-bottom: 7rem;
      }

      .right-panel {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        box-sizing: border-box;
      }

      .left-panel {
        flex-direction: column;
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

      .left-panel .read-more-heading {
        position: absolute;
        bottom: 0px;
        left: 3rem;
      }
      .left-panel .read-more-heading h2 {
        font-size: 3.2rem;
        line-height: 3.2rem;
      }

      .left-panel-content {
        background-image: url('/~/media/Images/D/drinkiq-v2/Universal/drinkiq--images/da-dk/spin-the-bottle/backimg.png');
        background-repeat: no-repeat;
        background-size: contain;
        padding: 5rem 3rem;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        min-height: 50rem;
        height: auto;
        will-change: transform, opacity;
      }

      .left-panel-content h6 {
        text-transform: uppercase;
        font-size: 2.4rem;
        color: #fff;
        font-weight: 600;
        display: none;
      }

      .left-panel-content h1 {
        font-size: 6rem;
        color: #fd7e14;
        font-weight: bold;
        line-height: 6rem;
      }

      .slice_content {
        transition: opacity 0.5s ease, transform 0.5s ease;
        position: relative;
        height: 100%;
        color: #fff;
        z-index: 2;
        margin-top: 6rem;
      }
      
      .four_group_heading{
      	color: var(--bs-body-color);
    	margin-bottom: 3.2rem;
      }

      .reset-btn {
        position: absolute;
        top: 2rem;
        right: 2rem;
        background: transparent;
        color: white;
        border: none;
        font-size: 2rem;
        cursor: pointer;
        z-index: 10;
      }

      .reset-btn:hover {
        color: #f37c23;
      }

      .wheel {
        width: 90vw;
        height: 90vw;
        max-width: 52.5rem;
        max-height: 52.5rem;
        margin: 0 auto;
        display: block;
        transform: rotate(-45deg);
        overflow: visible;
      }

      .slice-description.highlight {
        color: #fd7e14;
        background-color: #1b0d32;
      }
      .slice-description.highlight .slice-description-content{color:#fff;}

      .slice-description {
        display: block !important;
        padding: 2.5rem;
        background-color: #00090b;
        color: #fff;
        transition: color 0.5s ease;
        border-radius: 2.4rem;
        margin-bottom: 3.2rem;
      }

      .slice {
        transition: transform 0.5s ease;
        transform-origin: 50% 50%;
        cursor: pointer;
      }

      .slice.active {
        transform: scale(1.1);
        box-shadow: 0 0 2rem rgba(0, 0, 0, 0.5);
        background-color: #fff;
      }

      .slice text {
        font-size: 0.9rem;
        fill: #00090b;
        font-weight: bold;
        text-transform: uppercase;
        font-family: var(--font-regular);
      }

      .slice path {
        stroke: #ffefef;
        stroke-width: 0.1rem;
        stroke-linejoin: round;
      }

      .slice_content.show-panel {
        opacity: 1;
        visibility: visible;
      }

      .bottle_wrap {
        position: absolute;
      }

      .bottle_wrap img {
        position: absolute;
        width: 7.5rem;
        transform: translate(-50%, -50%) rotate(0deg);
        transform-origin: center center;
        transition: transform 3s ease-out;
        cursor: pointer;
        z-index: 9;
      }

      .bottle_wrap:after {
        content: "";
        background-color: #1b0d32;
        position: absolute;
        height: 10rem;
        width: 10rem;
        border-radius: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(0deg);
        transform-origin: center center;
      }

      .slice-description-heading h2 {
       	line-height: 3.2rem !important;
        word-break: break-word;
        font-size: 3.6rem;
        margin-bottom: 2rem;
        font-family: var(--font-bold);
      }

      @media (max-width: 991.98px) {
        .left-panel,
        .right-panel {
          height: auto !important;
          min-height: 26rem;
        }
        .right-panel {
          padding-top: 2.5rem;
          padding-bottom: 2.5rem;
        }
        .left-panel-content {
          background-size: 28.5rem 23.5rem;
          height: auto !important;
          min-height: 26rem;
          width: 28.5rem;
          padding: 1rem;
        }
        .left-panel-content h1 {
          font-size: 4.2rem;
          line-height: 4.2rem;
        }
        .slice-description-heading h2 {
          word-break: break-word;
        }
        .left-panel .read-more-heading {
          left: 1rem;
        }
      }
      @media (max-width: 599.98px) {
        .wheel {
          max-width: 27.5rem;
          max-height: 100%;
          height: auto;
          width: auto;
        }
        .bottle_wrap img {
          width: 3.5rem;
        }
        .bottle_wrap:after {
          width: 5rem;
          height: 5rem;
        }
      }

      @media (min-width: 992px) and (max-width: 1199.98px) {
        .left-panel-content h1 {
          font-size: 5rem;
          line-height: 5rem;
        }
      }

      @media (min-width: 768px) and (max-width: 991.98px) {
        #module---states .state-figure .state-figure-val {
          font-size: 3rem !important;
        }
        #module---states .state-figure .state-figure-bot {
          font-size: 1.6rem;
        }
      }

      .states-module.orange {
        background: #f8d8d6;
      }

      #module---about-us .config-text-content ol li::before {
        background: var(--bs-orange);
      }

      #module---states .state-figure .state-figure-val {
        font-size: 3.6rem;
        line-height: normal;
        margin-bottom: 1rem;
      }
      #module---two-column-text .twocolumn-text-wrapper .twocolumn-left p {
        color: #00090b;
      }