/* Inter Font Import */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

/* Shared Styles */

body {
  font-family: "Inter", sans-serif;
}

.text-highlight {
  background: linear-gradient(47.64deg, #f7e93f, #fb09b4, #9100f8);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.badge {
  box-shadow: 0px 3px 27px 0px rgba(0, 255, 136, 0.5);
}

@keyframes smoothBounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-18px);
  }
}

.mic-bounce {
  animation: smoothBounce 2.8s ease-in-out infinite;
}

/* Navbar Styles */
nav {
  background-color: #1a0b2e;
  border-bottom: 1px solid rgba(65, 37, 103, 1);
}

.navbar button,
.banner .spotify-btn {
  background: linear-gradient(
    47.64deg,
    rgba(247, 233, 63, 1),
    rgba(251, 9, 180, 1),
    rgba(145, 0, 248, 1)
  );
}

button {
  padding: 12px 16px;
  border-radius: 50px;
  font-weight: 500;
  color: white;
  cursor: pointer;
}

.navbar .hamburger {
  display: none;
}

.banner {
  width: 100%;
  background-image: url("./images/hero-bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.banner .subscribe {
  color: #00ff88;
}
/* Header style End */

.about-content {
  padding-bottom: 80px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.about-info {
  padding-top: 80px;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* why choose section */

.why-choose {
  padding: 120px 0px;
  background: rgba(35, 14, 61, 1);
}

/* Fetured Episodes */

#Featured-card-box {
  grid-template-columns: repeat(3, 1fr);
}

/* Meet host */

.host-box {
  border-radius: 40px;
  padding: 40px;
  background: rgba(53, 17, 101, 0.4);
}

.social-link i {
  cursor: pointer;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(83, 60, 114, 1);
  border-radius: 100%;
  padding: 10px;
  font-size: 20px;
  background: linear-gradient(
    47.64deg,
    rgba(247, 233, 63, 1),
    rgba(251, 9, 180, 1),
    rgba(145, 0, 248, 1)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.social-link i:hover {
  filter: brightness(1.2);
  transform: scale(1.1);
  transition: all 0.3s ease;
}

/* Footer style */
.footer-icons {
  text-align: center;
  grid-template-columns: repeat(4, 160px);
  align-items: center;
  justify-content: center;
}

/* Mobile responsive */

@media screen and (max-width: 576px) {
  .navbar .hamburger {
    display: block;
  }

  .nav-menu,
  .navbar button {
    display: none;
  }

  .banner-circle {
    max-width: 250px;
  }

  .mic-bounce {
    max-width: 80px;
  }

  /* Header style */
  .about-info {
    grid-template-columns: repeat(2, 1fr);
  }

  /* why-choose  */
  .why-choose {
    padding: 40px 0px;
  }

  /* featured episodes */
  #Featured-card-box {
    grid-template-columns: 1fr;
  }

  .featured-title,
  .about-title,
  .host-title,
  .why-choose-title,
  .logo-text {
    font-size: 2rem;
  }

  /* meet host */

  .host-box {
    flex-direction: column;
    text-align: center;
  }

  .host-name {
    font-size: 1.5rem;
  }

  /* footer */
  .footer-icons {
    row-gap: 20px;
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-title,
  .banner-title {
    font-size: 3rem;
  }
}