/*

Theme Name: Redrose Records Themes
Author: Ramzy WIT Indonesia

*/


@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');


@font-face {
   font-family: 'Cardo';
   src: url('./resources/fonts/Cardo-Regular.ttf');
}


p, span ul, li {
   font-family: "Figtree", sans-serif !important;
}

@media(min-width:1000px) {
    html,
body {
   overflow: hidden !important;
   transform: none !important;
}
}


.heading {
   font-family: 'Cardo';
}

body {
   background-color: #171717;
}

header {
   background-color: #000;

   a {
      font-family: 'Cardo';
   }
}

.edgtf-drop-down .edgtf-menu-second.right {
   left: 0 !important;
}

.mail-footer a {
   color: #fff !important;
}

.address-information {
   width: 500px;
}

.logo-wrap-roseter img {
   width: 50% !important;
   height: 100%;
   object-fit: contain;
   text-align: center;
   margin: auto;
   display: block;
}

.edgtf-main-menu>ul>li>a {
   text-transform: capitalize !important;
   font-size: 18px;
}

.releaseOnDico {
   margin-top: 30px;
   margin-bottom: 40px;
   text-align: center;
}

.section-intro .wrapper-intro {
   p {
      font-size: 20px;
   }
}

.add_to_cart_button {
   display: none;
}

span.price,
.price.secondary-font {
   display: none !important;
}

.edgtf-drop-down .edgtf-menu-second .edgtf-menu-inner ul li a {
   text-transform: unset !important;
}

.edgtf-albums-list-holder-outer.edgtf-alb-three-columns .edgtf-album {
   width: 350px;
}

.edgtf-albums-list-holder-outer.edgtf-alb-three-columns .edgtf-albums-list-holder {
   display: flex;
   flex-wrap: wrap;
}

@media(max-width:780px) {
   .address-information {
      width: 100%;
   }

   .btn-slice {
      width: 150px !important;
      margin-top: 35px !important;
      padding: 10px !important;
      font-size: 12px !important;
   }

   .content p {
      font-size: 12px !important;
      max-width: 1200px;
      color: #fff;
   }
}

.marquee-swiper .swiper-wrapper {
   transition-timing-function: linear !important;
}

.swiper-slide {
   width: auto;
   font-size: 24px;
}

/* .marquee-section {
   transition: all 0.5s;
}

.marquee-section:hover {
   background-color: #fff; 
}

.marquee-section:hover h3{
   color: #000; 
}

.marquee-section-2 {
   transition: all 0.5s;
}

.marquee-section-2:hover {
   background-color: #fff; 
}

.marquee-section-2:hover h3{
   color: #fff; 
} */


.scroll-text .char {
   color: rgb(180, 180, 180);
   /* grey awal */
   transition: color 0.05s linear;
   animation: none !important
}

.animate-chars .char {
   opacity: 0;
   transform: translateY(20px);
}

.animate-chars .char {
   animation: reveal 0.6s ease forwards;
   animation-delay: calc(var(--char-index) * 0.05s);
}

.play .char {
   animation: reveal 0.6s ease forwards;
   animation-delay: calc(var(--char-index) * 0.05s);
}

.music-card {
   width: 450px;
   border-radius: 10px;
   overflow: hidden;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
   background: rgba(255, 255, 255, 0.08);
   backdrop-filter: blur(4px);
   border: 1px solid rgba(255, 255, 255, 0.2);
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -ms-border-radius: 10px;
   -o-border-radius: 10px;
}

.header {
   position: relative;
   height: 110px;
   display: flex;
   align-items: flex-end;
   justify-content: start;
   background: url(../redrose-img/album-isyana.png) center / cover no-repeat;
}

.song {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin: 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.overlay {
   position: absolute;
   inset: 0;
   backdrop-filter: blur(15px);
   -webkit-backdrop-filter: blur(15px);
   z-index: 0;
}

.artist-info {
   position: relative;
   z-index: 1;
   display: flex;
   align-items: center;
   gap: 15px;
   padding: 20px;
   color: white;
}

.artist-photo {
   width: 75px;
   height: 75px;
   border-radius: 50%;
   object-fit: cover;
   border: 3px solid white;
}

@keyframes reveal {
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.fade-vertical {
   -webkit-mask-image: linear-gradient(to bottom,
         transparent 0%,
         black 18%,
         black 82%,
         transparent 100%);
   mask-image: linear-gradient(to bottom,
         transparent 0%,
         black 18%,
         black 82%,
         transparent 100%);
}


/*--Button Styles--*/
.btn-slice {
   width: 200px;
   display: block;
   margin-top: 35px;
   padding: 20px;
   border: 2px solid #ffffff;
   border-radius: 0rem;
   color: #ffffff;
   font-size: 14px;
   font-weight: 700;
   position: relative;
   text-transform: uppercase;

   -webkit-transition: all 1000ms cubic-bezier(0.890, 0, 0.140, 1);
   /* older webkit */
   -webkit-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);
   -moz-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);
   -o-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);
   transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);
   /* custom */

   -webkit-transition-timing-function: cubic-bezier(0.890, 0, 0.140, 1);
   /* older webkit */
   -webkit-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);
   -moz-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);
   -o-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);
   transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);
   /* custom */
}

.btn-slice .top {
   position: relative;
   height: 10px;
   overflow: hidden;
   top: 0;
   -webkit-transition: all 300ms cubic-bezier(1.000, 0, 0.025, 1);
   /* older webkit */
   -webkit-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);
   -moz-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);
   -o-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);
   transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);
   /* custom */

   -webkit-transition-timing-function: cubic-bezier(1.000, 0, 0.025, 1);
   /* older webkit */
   -webkit-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);
   -moz-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);
   -o-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);
   transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);
   /* custom */

   -webkit-transition-delay: 0.35s;
   -moz-transition-delay: 0.35s;
   -ms-transition-delay: 0.35s;
   -o-transition-delay: 0.35s;
   transition-delay: 0.35s;
}

.btn-slice .bottom {
   position: relative;
   height: 10px;
   overflow: hidden;
   bottom: 0;
   -webkit-transition: all 300ms cubic-bezier(1.000, 0, 0.025, 1);
   /* older webkit */
   -webkit-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);
   -moz-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);
   -o-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);
   transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040);
   /* custom */

   -webkit-transition-timing-function: cubic-bezier(1.000, 0, 0.025, 1);
   /* older webkit */
   -webkit-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);
   -moz-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);
   -o-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);
   transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040);
   /* custom */

   -webkit-transition-delay: 0.35s;
   -moz-transition-delay: 0.35s;
   -ms-transition-delay: 0.35s;
   -o-transition-delay: 0.35s;
   transition-delay: 0.35s;
}

.btn-slice .bottom span {
   top: -10px;
   position: absolute;
   left: 0;
}

.btn-slice:hover .top {
   top: -5px;
   -webkit-transition-delay: 0.35s;
   -moz-transition-delay: 0.35s;
   -ms-transition-delay: 0.35s;
   -o-transition-delay: 0.35s;
   transition-delay: 0.35s;
}

.btn-slice:hover .bottom {
   bottom: -5px;
   -webkit-transition-delay: 0.35s;
   -moz-transition-delay: 0.35s;
   -ms-transition-delay: 0.35s;
   -o-transition-delay: 0.35s;
   transition-delay: 0.35s;
}

.btn-slice:hover,
.btn-slice:focus,
.btn-slice:active {
   margin-left: 10px;
}

.btn-slice:before {
   content: '';
   height: 1px;
   width: 60px;
   background-color: #ffffff;
   position: absolute;
   margin-top: 6px;
   right: -35px;

   -webkit-transition: all 1000ms cubic-bezier(0.890, 0, 0.140, 1);
   /* older webkit */
   -webkit-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);
   -moz-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);
   -o-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);
   transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225);
   /* custom */

   -webkit-transition-timing-function: cubic-bezier(0.890, 0, 0.140, 1);
   /* older webkit */
   -webkit-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);
   -moz-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);
   -o-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);
   transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225);
   /* custom */
}

.btn-slice:hover:before {
   width: 130%;
   
}

.tour-row  {
   transition: transform 0.4s ease;
   transform: translateX(0);
}

.tour-row:hover  {
   transform: translateX(20px);
   transition: transform 0.4s ease;
}

@keyframes rotateAnimation {
	from {transform: rotateY(0deg);}
	to {transform: rotateY(180deg);}
}

@keyframes rotateAnimation {
	from { transform: rotateY(0deg); }
	to   { transform: rotateY(360deg); }
}

.rotate {
	animation: rotateAnimation 5s linear infinite;
	transform-style: preserve-3d;
}

::placeholder {
   color: #424242;
}

.btn-red {
   transition:all 0.5s;
   border: 1px solid #A60000;
}

.btn-red:hover {
   background-color: #000;
   border: 1px solid #A60000;
}

#load-more-products {
   transition: all 0.5s;
   cursor: pointer;
}

#load-more-products:hover {
   transition: all 0.5s;
   color: #fff;
   background: #A60000;
}

.artist-btn {
   transition: all 0.5s;
}

.artist-btn.active {
   transform: scale(1.5);
}

.hero-title h1 span.char {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
  transition: all 0.6s cubic-bezier(.16,1,.3,1);
}

.swiper-slide-active .hero-title h1 span.char {
  transform: translateY(0);
  opacity: 1;
}

.hero-title h1 span.char {
  transition-delay: calc(var(--char-index) * 0.05s);
}

.swiper-pagination {
    bottom: 40px !important;
}

.swiper-pagination-bullet {
    position: relative;
    width: 60px;
    height: 3px;
    background: rgba(255,255,255,0.3);
    border-radius: 999px;
    overflow: hidden;
}

.swiper-pagination-bullet .progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: #A60000;
}

.swiper-pagination-bullet-active .progress {
    animation: progressAnim 6s linear forwards;
}

@keyframes progressAnim {
    from { width: 0%; }
    to { width: 100%; }
}


.song:hover {
   background: rgba(255,255,255,0.08);
   padding-left: 40px;
}

.equalizer {
   display: flex;
   gap: 3px;
   align-items: end;
   height: 14px;
}

.equalizer span {
   width: 3px;
   height: 4px;
   background: white;
   animation: bounce 0.6s infinite ease-in-out alternate;
}

.equalizer span:nth-child(2) {
   animation-delay: 0.2s;
}

.equalizer span:nth-child(3) {
   animation-delay: 0.4s;
}

@keyframes bounce {
   from { height: 4px; }
   to { height: 14px; }
}

.song.active-song .equalizer {
   display: flex;
}


.song {
    transition: all 0.3s ease;
}

.song:hover {
    background: rgba(255,255,255,0.08);
    padding-left: 40px;
}

.active-song {
    background: rgba(255,255,255,0.12);
    box-shadow: 0 0 25px rgba(255,255,255,0.15);
}

.wrapper-playlist img {
    transition: transform 0.7s ease;
}

section.section-partners::before {
      content: "";
      background: #fff;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0.6;
   }

   section.section-partners {
      position: relative;
   }

   .square {
      width: 200px;
      height: 200px;
      transform: rotateY(45deg);
      animation: rotateAnimation 5s linear infinite;
   }

   @keyframes rotateAnimation {
      from {
         transform: rotateY(45deg);
      }

      to {
         transform: rotateY(225deg);
      }
   }