/* body {
  background: linear-gradient(0deg, #fff1f4 0%, #ffffff 100%);
  background-repeat: no-repeat;
} */
:root{
  --bs-primary: rgb(145, 71, 255);
  --bs-primary-rgb: 145, 71, 255;
  --bs-link-color: #a5a5a5;
}
.nav-pills {
  --bs-nav-pills-border-radius: var(--bs-border-radius);
  --bs-nav-pills-link-active-color: #fff;
  --bs-nav-pills-link-active-bg: #7d0dfd;
}

h1,h2,h3,h4{
  font-family: "Raleway", sans-serif;
}
p, a{
  font-family: "Inter", sans-serif;

}
.mainHeading {
  font-family: "Raleway", sans-serif;
  font-weight: 800 !important;
  background: rgb(131, 58, 180);
  background: -webkit-linear-gradient(
    0deg,
    rgba(131, 58, 180, 1) 0%,
    rgba(253, 29, 29, 1) 39%,
    rgba(10, 39, 203, 1) 67%,
    rgba(255, 159, 23, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: cover;
  background-repeat: no-repeat;
}
.mainDes {
  font-family: "Inter", sans-serif;
  color: #222;
}
.mainBtn {
  border: none;
  outline: none;
  color: #fff;
  padding: 12px 24px;
  font-family: "Inter", sans-serif;
  background-image: -webkit-linear-gradient(
    0deg,
    rgba(131, 58, 180, 1) 50%,
    rgb(255, 49, 49) 100%
  );
  background-size: 150% 100%;
  moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  &:hover {
    color: #fff;
    background-position: 100% 0;
    moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
  }
}
.secondaryBtn{
  border: 1px solid #833ab4;
  
  color: #833ab4;
  padding: 12px 24px;
  font-family: "Inter", sans-serif;
  moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  &:hover {
    color: #44076d;
  border: 1px solid #641d94;
    
    moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
}
.button-pulse {
  animation: pulse 2s infinite 3s cubic-bezier(0.25, 0, 0, 1);
  box-shadow: 0 0 0 0 rgb(255, 171, 171);
}
@keyframes pulse {
  to {
    box-shadow: 0 0 0 12px rgba(255, 255, 255, 0);
  }
}

.wIcon{
    transition: .5s all ease-in-out;
    
    &:hover{
        animation: none;
    }
}

.button-wiggle {
  animation: wiggle 4s 2s infinite;
  display: inline-block;
}

@keyframes wiggle {
  5%,
  50% {
    transform: scale(1);
  }
  10% {
    transform: scale(0.9);
  }
  15% {
    transform: scale(1.15);
  }
  20% {
    transform: scale(1.15) rotate(-5deg);
  }
  25% {
    transform: scale(1.15) rotate(5deg);
  }
  30% {
    transform: scale(1.15) rotate(-3deg);
  }
  35% {
    transform: scale(1.15) rotate(2deg);
  }
  40% {
    transform: scale(1.15) rotate(0);
  }
}
.featureSection{
  background: -webkit-linear-gradient(
    0deg,
    rgb(115, 47, 160) 0%,
    rgb(201, 29, 253) 50%,
    rgba(10, 39, 203, 1) 100%);
    
  background-size: cover;
  background-repeat: no-repeat;
  background: #ffecec;
}

.feature-icon-small {
  width: 3rem;
  height: 3rem;
  background-image: -webkit-linear-gradient(
    0deg,
    rgba(131, 58, 180, 1) 0%,
    rgb(111, 49, 255) 100%
  );
}
.featureSection2 .ratio::before {
  display: block;
  padding-top: var(--cz-aspect-ratio);
  content: "";
}
.ratio-9x16 {
  --bs-aspect-ratio: 178.25%;
}
.card{
  border: 0.5px solid #ebebeb !important;
}
.card-body {
  color: var(--geeks-card-color);
  flex: 1 1 auto;
  padding: 1.5rem;
}
.card-body h4{
  font-size: 1.2rem;
}
.card-body p{
  font-size: 0.9rem;
}
.btn-arrow .icon-arrow {
  bottom: 0;
  color: var(--bs-gray-800);
  left: 0;
  margin: 1rem;
  opacity: 0;
  position: absolute;
  transition: opacity .35s ease;
}
.icon-shape {
  align-items: center;
  display: inline-flex
;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
}
.icon-xl {
  height: 3.5rem;
  line-height: 3.5rem;
  width: 3.5rem;
}
.play-btn:before {
  animation-delay: 0s;
  animation: pulsate1 2s;
  animation-direction: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: steps;
  border: 5px solid var(--bs-border-color);
  border-radius: 50%;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .3);
  content: "";
  height: 150%;
  opacity: 1;
  position: absolute;
  width: 150%;
}
.play-btn {
  background-color: hsla(0, 0%, 100%, .85);
  font-size: 24px;
  line-height: 32px;
  position: relative;
}
@keyframes pulsate1 {
  0% {
      opacity: 1;
      transform: scale(.8)
  }

  to {
      box-shadow: none;
      opacity: 0;
      transform: scale(1)
  }
}

.gradientBorder{
  border-radius: 8px;
  border-width: 3px;
  border-style: solid;
  border-image: 
    linear-gradient(
      to bottom, 
      rgba(0, 0, 0, 0) 0%,
      red 50%, 
      rgba(0, 0, 0, 0)
    ) 1 100%;   
}
.albumTitle{
  font-family: 'Inter', sans-serif;
  text-align: left;
  font-size: 20px;
  padding-top: 8px;
  font-weight: 300;
}
.featureSection2{
  background: #ffecec;
}
span.albumPrice {
  background: #f9ead5;
  padding: 4px 12px;
  border: 0.5px solid #f9e1c4;
  border-radius: 4px;
  color: #a01d26;
  font-size: 16px;
  font-weight: 500;
}
.topbarSection{
  background-image: -webkit-linear-gradient(0deg, rgba(131, 58, 180, 0.9) 50%, rgb(255, 49, 49, 0.8) 100%);
  padding: 4px 12px;
  position: fixed;
  z-index: 999;
  top: 0;
}
.topbar-content{
  font-family: 'Inter', sans-serif;
  font-weight: 200;
}

@media (max-width: 768px){
  .topbarSection{
    width: 100%;
  }
}

section{
  overflow-x: clip;
}