.home-hero-banner {
  height: calc(700px + 190px);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom center; 
  .container {
    height: 100%;
    div {
      height: 100%;
    }
  }
  .hero-content {
    display: flex;
    flex-flow: column;
    align-items: start;
    justify-content: center;

    h1 {
      color: $white;
      margin-top: 75px;
      margin-bottom: 38px;
      @include md{
        font-size: 80px;
        letter-spacing: -2px;
      }
      @include xs{
        font-size: 50px;
      }
    }
    .primary-btn {
      will-change: transform;
      padding: 20px 65px;
      font-size: 21px;
      margin-bottom: 140px;

      // Tablet
    //  @include md{
    //   min-width: 160px;
    //     padding: 12px 28px;
    //  }

      // @include xs{
      //   min-width: 140px;
      //   padding: 10px 24px;
      //   font-size: 8px;
      //   margin-top: -8%;
      //   margin-bottom: 13%;
      // }
    }
  }

  .home-banner-inner {
    height: 100%;
    position: relative;
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.6),
      rgba(255, 255, 255, 0)
    );

    .home-banner-content {
      height: 100%;
      img {
        height: 100%;
        width: 100%;
        object-fit: cover;
      }
      video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .home-banner-overlay {
        background: linear-gradient(
          to right,
          rgba(0, 0, 0, 0.6),
          rgba(255, 255, 255, 0)
        );
        position: absolute;
        top: 0px;
        width: 100%;
        height: 100%;
        padding: 100px 30px;
      }
    }
  }
  .wave {
    position: absolute;
    bottom: -2px;
    left: 0;
  }
}

.parallax-section {
  position: relative;
  .story-telling {
    padding: 200px 0px 296px 0px;
    h3 {
      text-align: center;
    }
    .story-cta {
      margin-top: 50px;
      text-align: center;
    }
    // @include md{
    //   padding: 112px 0px 120px 0px;
    // }
    // @include xs{
    //   padding: 112px 0px 120px 0px;
    //   h3{
        
    //   }
    // }
  }
  .meet-artist {
    div {
      &:nth-child(2) {
        @media (max-width: 768px) {
          margin-top: -105px;
        }
      }
    }
    .meet-artist-content {
      padding-bottom: 50px;
      h2 {
        margin-bottom: 20px;
        @include md{
          text-align: center;
        }
        @include xs{
          text-align: center;
        }
      }
      p {
        @media screen and (max-width: 775px) {
          max-width: 50%;
          text-align: center;
        }
        @media screen and (max-width: 575px) {
          max-width: 70%;
          text-align: center;
        }
      }
      .learn-cta {
        padding-top: 10px;
        /* margin-top: 35px; */
        margin-bottom: 20px;
      }

      @media screen and (max-width: 769px) {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
      }
    }
  }

  .artist-img {
    position: absolute;
    bottom: 115px;
    right: 7%;
    z-index: 2;
    width: 600px;
    margin-bottom: -1px;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    // @media (min-width:769px) and (max-width: 1300px) {
    //   // width: 80%;
    //   // bottom: -85px;
    //   // left: 27%;
    // }

    @media screen and (max-width: 768px) {
      position: relative;
      width: 50%;
      bottom: -85px;
      left: 27%;
    }

    @media screen and (max-width: 575px) {
      margin-bottom: 48px;
    }
  }

  .artist-img-bg {
    position: absolute;
    bottom: 23%;
    z-index: 1;
    right: 5%;
    img {
      width: 85%;
      height: 85%;
      object-fit: contain;
    }

    @media (max-width: 768px) {
      width: 45%;

      bottom: 3%;

      right: 14%;
    }
  }
  .wave {
    z-index: 3;
    position: relative;
    margin-bottom: -1px;
  }
}

.parallax-accordion-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-top: 40px;

  .panel {
    background-size: cover;
    background-position: center;
    height: 500px;
    border-radius: 10px;
    color: $white;
    flex: 1.2;
    margin: 6px;
    position: relative;
    transition: flex 0.4s ease-in, opacity 0.4s ease;
    overflow: hidden;
    cursor: url(../images/play-btn.svg), auto;
    opacity: 0.5;
    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
      object-position: center;
    }
    .panel-content {
      padding: 20px;
      position: absolute;
      bottom: 0px;
      height: 100%;
      width: 100%;
      background: linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0) 50%
      );
      display: flex;
      align-items: end;
      opacity: 0;

      h4 {
        color: $white;
        @include font-applying(
          $fs: 26px,
          $ff: $font_text,
          $fw: $bold,
          $fsty: normal
        );
        line-height: 32px;
        letter-spacing: 0px;
        margin-bottom: 15px;
        opacity: 0;
        @media screen and (max-width: 768px) {
          // Small tablets and below
          @include font-applying(
            $fs: 20px,
            // Smaller font size
            $ff: $font_text,
            $fw: $bold,
            $fsty: normal
          );
          line-height: 26px;
        }
        @media screen and (max-width: 576px) {
          // Mobile phones and below
          @include font-applying(
            $fs: 18px,
            // Even smaller font size
            $ff: $font_text,
            $fw: $bold,
            $fsty: normal
          );
          line-height: 24px;
        }

        @media screen and (max-width: 400px) {
          // Very small devices
          @include font-applying(
            $fs: 16px,
            // Smallest font size
            $ff: $font_text,
            $fw: $bold,
            $fsty: normal
          );
          line-height: 22px;
        }
      }
    }
    .video-panel {
      height: 100%;
    }
    &.active {
      flex: 5;
      opacity: 1;
      .panel-content {
        opacity: 1;
        transition: opacity 0.1s ease-in 0.1s;
        h4 {
          opacity: 1;
          transition: opacity 0.3s ease-in 0.4s;
        }
      }
    }
  }
  .slick-active {
    opacity: 1;
    .panel-content {
      opacity: 1;
      transition: opacity 0.1s ease-in 0.1s;
      h4 {
        opacity: 1;
        transition: opacity 0.3s ease-in 0.4s;
      }
    }
  }

  .slick-slider {
    position: relative;
  }
  .slick-dots {
    position: absolute;
    bottom: -50px;
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0;
    li {
      display: inline-block;
      margin: 0 10px;
      position: relative;
      button {
        width: 30px;
        height: 6px;
        background-color: $primary_color;
        border: none;
        border-radius: 0;
        padding: 0;
        cursor: pointer;
        outline: none;
        transition: width 0.3s ease, background-color 0.3s ease; /* Smooth transition for width and color */
        &:before{
          content: "";
        }
      }
      &.slick-active{
        button {
          background-color: $secondary_color;
          &:before{
            content: "";
          }
        }
      }
    }
  }

  @include md {
    .panel {
      flex: 1 0 100%;
      margin: 0px 6px;
      height: 400px;
      opacity: 1;
      transition: none;
    }
  }
}

// section header
.meet-fine-arts-sec {
  padding: 115px 0px;
  .section-header{
      h3{
        font-size: 72px;
        @include xs{
          font-size: 40px;
        }
      }
      p{
        color: #2d2d2d;
        max-width: 500px;
        margin: 0px auto;
      }
  }
  @include md{
    padding: 70px 0px;
  }
  @include xs{
    padding: 70px 0px;
  }
}

.blessings-section {
  background-color: $primary_color;
  min-height: 730px;
  display: flex;
  align-items: center;
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: contain;
  .blessing-inner {
    height: 100%;
    width: 100%;

    .blessing-content {
      padding: 50px 0px;
      h2 {
        font-size: 86px;
        color: $white;

        @include md{
          margin-bottom: 12px;
        }

        @include xs{
          margin-bottom: 10px;
          font-size: 50px;
        }
      }
      p {
        color: $white;

        @include md{
          margin-top: -4px;
          margin-bottom: 8px;
        }

        // Mobile
        @include xs {
          margin-top: -3px;
          margin-bottom: 6px;
        }
      }
      .learn-cta {
        margin-top: 50px;
        margin-bottom: 10px;
        .secondary-btn {
          &:hover {
            border-color: $white;
            background-color: $white;
            color: $primary_color;
          }
        }
      }
      @media xs{
        
      }
    }
  }
  @include md {
    background-position: center bottom;
    background-size: 100% auto;
    padding-top: 70px;
    min-height: 1300px;
    align-items: start;
  }

  @include xs {
    background-position: center bottom;
    background-size: 100% 40%;
    padding-top: 70px;
    min-height: 870px;
    align-items: start;
  }
}

// popshop area style
.popshop-area {
  padding: 115px 0px;
  .section-header {
    h3 {
      font-size: 72px;
      @include xs{
        font-size: 40px;
      }
    }
  }

  .pop-shop-listing {
    padding-top: 50px;
    padding-bottom: 115px;
    .pop-shop-item {
      position: relative;
      // mask-image: linear-gradient( white, white ), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEcAAABTCAYAAADN9xqSAAAC4UlEQVR42uycu2sUURSHT6ImGg3q4lvxscawIEg0gjZCCh8BC40gogYtDAqCWKRI6x8gCLYWomIjJqCCgo1lQBRBYiNCWgvB0nL9HecGzc7eJLvOfZy55wdfQh6E2S/n7j13Zu501Ot10jTNtU51YM3BDq0ca76onObZDWZ1WDXPKH/QyslnOfgK9mjl5HORxWjl5LMSzIC9/IVWzvxMzInRymnoa8A06J77hlZOlgp49q8YlZOlB7wGfY0/SF1OL3gJjtjm9FSzHbwAg7ZfSLVyToFPC4lJUc4W8Bi8ARuX0iqnkG1gHFwHa1pZR5Q1W8EJcMEMo2XtLLIkhl/oTiOAh0eX6VWqYB/YD/qLWIFKyA5wEhwDh80L7/KxPI95EXjVcJSXOiHOXcSWdeAmuA02hTyQ2ORcAXeXMs2mJGcteAhGYvpPxSCnapqy/tjGd2g5NfDOdK7RJeTJLp6ep83nKBNqbbUKvIpZTEg598BA7J1niGF1HLwN0dTFLmcF+GzeiKOP72E1JkWM78rhqvlmVtOklTM/5yWJ8S3nBgmLr2G1C8xKmKFCVM6INDE+5QyTwPgYVjxL/QSrtXLyGZQoxpecARIalRNYTk3lLNzjiIyP2eoXZdegtHIa0iNVjA85FRKcTuF/Xw9e5agclaNyVI7KcZpulWNPr8pROW1lg8qxp0/l2FNTOfYckCzH5cmu9eCH5F7K5YEPkZ6ysOas9A7Z1bDii3jfqYW9TSlVzjnpYlxWzkdwSBee+QyXQYyLymHZ72mRXbepVs5YWcQUXTm8A3fGNH+klfM3vCH1aZnEFCnnjumIS5UihtVl8IQE3hDpWs5pMEUetjFLG1ZnwPOyivkfOTxlT5Lg20tcyOFLLffBA2rj2RDS0soGWD6r94gE3wDponL4CQG8Ef5DSmIWqxxu6G5R9tiECiWYRjncq/BDNfjhGpdI+EW5IuRspuxpZ0Nmeq6S5k9+CzAArfVzTZ+QnZoAAAAASUVORK5CYII=);
      // mask-composite: subtract;
      // mask-position: right bottom;
      // mask-repeat: no-repeat;
      .shop-item-inner {
        clip-path: polygon(
          72.075% 100%,
          72.075% 100%,
          65.938% 100%,
          59.802% 100%,
          53.666% 100%,
          47.53% 100%,
          41.394% 100%,
          35.258% 100%,
          29.122% 100%,
          22.986% 100%,
          16.849% 100%,
          10.713% 100%,
          10.713% 100%,
          10.644% 99.982%,
          10.575% 99.963%,
          10.506% 99.944%,
          10.438% 99.924%,
          10.369% 99.905%,
          10.3% 99.887%,
          10.231% 99.87%,
          10.162% 99.855%,
          10.092% 99.842%,
          10.022% 99.833%,
          10.022% 99.833%,
          8.128% 99.54%,
          6.431% 99.119%,
          4.93% 98.57%,
          3.627% 97.893%,
          2.522% 97.089%,
          1.617% 96.158%,
          0.912% 95.1%,
          0.407% 93.917%,
          0.103% 92.608%,
          0.002% 91.174%,
          0.002% 91.174%,
          0.001% 82.941%,
          0% 74.708%,
          0% 66.475%,
          0% 58.241%,
          0% 50.008%,
          0.001% 41.774%,
          0.002% 33.541%,
          0.004% 25.308%,
          0.007% 17.074%,
          0.01% 8.841%,
          0.01% 8.841%,
          0.01% 8.581%,
          0.012% 8.32%,
          0.016% 8.058%,
          0.025% 7.797%,
          0.04% 7.535%,
          0.063% 7.275%,
          0.094% 7.016%,
          0.136% 6.759%,
          0.189% 6.504%,
          0.256% 6.252%,
          0.256% 6.252%,
          0.688% 5.142%,
          1.294% 4.125%,
          2.066% 3.207%,
          2.992% 2.393%,
          4.064% 1.689%,
          5.271% 1.101%,
          6.605% 0.634%,
          8.054% 0.293%,
          9.611% 0.084%,
          11.264% 0.013%,
          11.264% 0.013%,
          17.142% 0.009%,
          23.019% 0.007%,
          28.897% 0.005%,
          34.774% 0.005%,
          40.652% 0.005%,
          46.529% 0.005%,
          52.407% 0.006%,
          58.284% 0.006%,
          64.162% 0.007%,
          70.039% 0.007%,
          70.039% 0.007%,
          72.207% 0.007%,
          74.374% 0.005%,
          76.541% 0.003%,
          78.708% 0.002%,
          80.875% 0%,
          83.042% 0%,
          85.209% 0.001%,
          87.376% 0.004%,
          89.543% 0.01%,
          91.711% 0.018%,
          91.711% 0.018%,
          92.86% 0.07%,
          93.934% 0.214%,
          94.932% 0.447%,
          95.852% 0.767%,
          96.692% 1.173%,
          97.449% 1.663%,
          98.123% 2.235%,
          98.712% 2.887%,
          99.213% 3.618%,
          99.625% 4.424%,
          99.625% 4.424%,
          99.654% 4.485%,
          99.686% 4.546%,
          99.721% 4.606%,
          99.758% 4.665%,
          99.798% 4.724%,
          99.838% 4.782%,
          99.879% 4.841%,
          99.92% 4.899%,
          99.961% 4.958%,
          100% 5.017%,
          100% 5.017%,
          100% 12.209%,
          100% 19.402%,
          100% 26.594%,
          100% 33.786%,
          100% 40.979%,
          100% 48.171%,
          100% 55.364%,
          100% 62.556%,
          100% 69.748%,
          100% 76.94%,
          100% 76.94%,
          99.543% 77.921%,
          98.981% 78.794%,
          98.317% 79.563%,
          97.548% 80.229%,
          96.676% 80.794%,
          95.7% 81.261%,
          94.621% 81.631%,
          93.437% 81.906%,
          92.15% 82.089%,
          90.759% 82.181%,
          90.759% 82.181%,
          89.66% 82.273%,
          88.619% 82.468%,
          87.643% 82.762%,
          86.739% 83.149%,
          85.914% 83.625%,
          85.174% 84.183%,
          84.526% 84.819%,
          83.976% 85.528%,
          83.531% 86.304%,
          83.197% 87.142%,
          83.197% 87.142%,
          83.072% 87.577%,
          82.97% 88.016%,
          82.889% 88.46%,
          82.825% 88.906%,
          82.776% 89.356%,
          82.738% 89.806%,
          82.709% 90.258%,
          82.686% 90.71%,
          82.666% 91.161%,
          82.646% 91.611%,
          82.646% 91.611%,
          82.508% 92.763%,
          82.21% 93.853%,
          81.757% 94.874%,
          81.156% 95.82%,
          80.411% 96.685%,
          79.528% 97.462%,
          78.514% 98.144%,
          77.372% 98.726%,
          76.11% 99.2%,
          74.731% 99.561%,
          74.731% 99.561%,
          74.468% 99.614%,
          74.204% 99.663%,
          73.939% 99.709%,
          73.674% 99.753%,
          73.407% 99.795%,
          73.141% 99.836%,
          72.874% 99.876%,
          72.607% 99.916%,
          72.341% 99.957%,
          72.075% 100%
        );

        .pop-shop-image {
          height: 350px;
          position: relative;
          border-radius: 25px;
          overflow: hidden;
          img {
            height: 100%;
            width: 100%;
            object-fit: cover;
          }
          .pop-img-cont {
            position: absolute;
            top: 0;
            height: 100%;
            width: 100%;
            background: linear-gradient(
              to top,
              rgba(0, 0, 0, 0.6),
              rgba(255, 255, 255, 0),
              rgba(255, 255, 255, 0)
            );
            display: flex;
            align-items: end;
            padding: 30px 58px 30px 30px;
            h4 {
              font-size: 22px;
              line-height: 30px;
              margin-bottom: 0px;
              color: $white;
              font-weight: $bold;
            }
          }
        }
        .pop-shop-content {
          position: absolute;
          top: 0px;
          display: flex;
          align-items: end;
          background-color: $primary_color;
          background-color: rgb(254 93 160 / 90%);
          width: 100%;
          height: 100%;
          flex-flow: column;
          justify-content: center;
          border-radius: 25px;
          overflow: hidden;
          padding: 30px;

          opacity: 0;
          transition: opacity 0.3s ease;
          h3 {
            color: $white;
            font-size: 46px;
            line-height: 42px;
            padding-bottom: 19px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.43);
          }
          p {
            color: $white;
            font-size: 12px;
            line-height: 17px;
          }
        }
        &:hover {
          .pop-shop-content {
            opacity: 1;
          }
          .pop-shop-image {
            .pop-img-cont {
              visibility: hidden;
            }
          }
        }
      }

      .shop-btn {
        background: #000;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        position: absolute;
        bottom: 7px;
        right: -9px;
        transition: background-color 0.3s ease;
        img {
          width: 15px;
          height: 15px;
        }
        &:hover {
          background-color: $primary_color;
        }
      }
    }
    @include md {
      padding-bottom: 0px;
    }
    @include xs {
      padding-bottom: 0px;
      padding: 50px 40px 0px;
    }


    .slick-dots {
      position: absolute;
      bottom: -50px;
      width: 100%;
      text-align: center;
      padding: 0;
      margin: 0;

      li {
        display: inline-block;
        margin: 0 10px;
        position: relative;
        button {
          width: 30px;
          height: 6px;
          background-color: $primary_color;
          border: none;
          border-radius: 0;
          padding: 0;
          cursor: pointer;
          outline: none;
          transition: width 0.3s ease, background-color 0.3s ease; 
          &:before {
            content: "";
          }/* Smooth transition for width and color */
        }
        &.slick-active{
          button {
            background-color: $secondary_color;
          }
        }
      }
      
     
    }
    .slick-slide{
      margin: 0 10px; 
      &:last-child {
        margin-right: 0;
      }
    }
  }
}

.feedback-wrap {
  background-color: $support_voilet;
  padding: 90px 0px 180px;
  position: relative;
  .feedback-inner {
    max-width: 500px;
    margin: 0px auto;
    padding-bottom: 67px;
    .qoute-mark {
      margin-bottom: 33px;
    }
    .feedback-content {
      padding: 0px 25px;
      h2 {
        color: $white;
        text-align: center;
      }
      p {
        color: $white;
        text-align: center;
      }
      .fan-name {
        margin: 13px 0px 29px;
        margin-bottom: 40px;
        p {
          color: $white;
          font-weight: $regular;
          text-align: center;
          display: inline-block;
          position: relative;
          text-transform: uppercase;
          &::after {
            content: "";
            position: absolute;
            bottom: 0px;
            height: 2px;
            width: 50%;
            right: 0px;
            background-color: #980fa5;
          }
        }
      }
    }
  }

  .feedback-img {
    height: 660px;
    border-radius: 10px 0px 0px 10px;
    overflow: hidden;
    max-width: 670px;
    // margin: 0px 0px 0px 0px;
    // margin-right: auto;
    margin-top: -180px;
    transform: translateX(-80px);
    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
    @include md{
      margin: 0px;
      transform: translateX(0%);
      margin-inline: auto;
      margin-block: 50px;
      border-radius: 45px;
      width: 70%;

    }
    @media screen and (max-width: 789px) {
      
    }
    @include xs{
      border-radius: 22px;
      height: 80%;
      width: 100%;
      margin-top: 0px;
      transform: none !important;
      max-width: 100%;
    }
  }
  .wave {
    position: absolute;
    bottom: -1px;
  }

  @media screen and (max-width: 575px) {
    padding: 90px 0px 30px;
  }
}

.licensing-section {
  padding: 107px 0px;
  .section-header {
    h3 {
      font-size: 72px;

      @media screen and (max-width: 768px) {
        font-size: 40px;
        line-height: 45px;
      }

      // Mobile
      @media screen and (max-width: 480px) {
        font-size: 30px;

        line-height: 35px;
      }
    }
    p {
      max-width: 550px;
      margin: 0px auto;
      padding-top: 10px;
      padding-bottom: 15px;
      // Tablet
      @include md{
        margin-top: -4px;
        margin-bottom: 8px;
      }

      // Mobile
      @include xs{
        margin-top: -3px;
        margin-bottom: 6px;
      }
    }
    .learn-cta {
      margin-top: 25px;
    }
  }
  .gallery {
    .gallery-inner {
      padding-top: 35px;
    }
  }
  .image-grid {
    max-width: 100%;
    margin-block: 0px;
    padding-top: 4rem;
    display: grid;
    grid-template-columns: repeat(5, 18.25vw);
    grid-template-rows: repeat(3, calc(175px + 15px));
    gap: 2.8vw;

    .gallery-image {
      border-radius: 10px;
      overflow: hidden;
      &:nth-child(1) {
        grid-column: 1/2;
        grid-row: 1/-1;
        padding-bottom: 60px;
      }
      &:nth-child(2) {
        grid-column: 2/3;
        grid-row: 1/2;
        margin-top: 28px;
      }
      &:nth-child(3) {
        grid-column: 2/3;
        grid-row: 2/-1;
      }
      &:nth-child(4) {
        grid-column: 3/4;
        grid-row: 1/3;
      }
      &:nth-child(5) {
        grid-column: 3/4;
        grid-row: 3/-1;
        /* padding: 0px 25px; */
        @include xs{
          padding: 0px 10px;
        }
      }
      &:nth-child(6) {
        grid-column: 4/5;
        grid-row: 1/2;
      }
      &:nth-child(7) {
        grid-column: 4/5;
        grid-row: 2/-1;
      }
      &:nth-child(8) {
        grid-column: 5/-1;
        grid-row: 1/-1;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 12px;
      }
    }
    @include xs{
      grid-template-rows: repeat(3, 90px);
    }
  }
}

.gallery-image {
  overflow: hidden;
}