/* Navbar Customization */
.navbar-dark .navbar-brand {
  font-size: 24px;
}

.navbar-dark .navbar-nav .nav-link {
  font-size: 18px;
  margin-left: 20px;
}

/* .form-control {
  max-width: 259px;
  border: revert-layer;
} */

.form-control.search-bar,
.form-select {
  width: 100%;
  max-width: 100%;
}

.form-select {
  margin-left: 10px;
  width: 100%;
}
.bi-download {
  color: black;
  font-weight: bolder;
}
.btn-outline-secondary {
  color: #fff;
  background-color: #d63384;
  border-color: #d63384;
  width: 180px; /* Button width */
}

.btn-outline-secondary:hover {
  color: #fff;
  background-color: #c82373;
  border-color: #bd2130;
}

/* Playlist Item Customization */
.playlist-item {
  margin-bottom: 20px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(248, 82, 82, 0.1);
  padding: 10px; /* Adds padding around the image */
  background-color: #f2fefe;
}

.playlist-item img {
  width: 108%;
  height: 271px; /* Fixed height for uniformity */
  object-fit: cover;
  border-radius: 15px;
  transition: transform 0.3s ease; /* Smooth zoom effect */
}

/* Zoom-Out Effect on Hover */
.playlist-item:hover img {
  transform: scale(0.98); /* Subtle zoom-out effect */
}

.playlist-info {
  text-align: center;
  padding-top: 10px;
}

.playlist-info h5 {
  font-weight: bold;
  margin-bottom: 10px;
}

.playlist-info .icons {
  display: flex;
  justify-content: center;
  margin-top: -7px;}

.playlist-info .icons i {
  font-size: 24px;
  margin: 0 10px;
}

.playlist-info .bi-youtube {
  color: #ff0000; /* YouTube icon red */
}

.playlist-info .bi-spotify {
  color: #1db954; /* Spotify icon green */
}

.image-container {
  margin-top: 55px;
}

h2 {
  color: #d63384;
  font-size: 36px;
}

.heading {
  /* font-size: 2.1rem; */
  font-size: 1.8rem;
  margin-left: 2%;
  font-weight: bold;
  text-transform: uppercase;
  color: #410488;
  position: relative;
  display: inline-block;
  animation: colorChange 3s infinite, zoomEffect 3s infinite;
}

.heading::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #007bff, #fafd34);
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s ease;
}

@keyframes colorChange {
  0% {
    color: #720303;
  }
  50% {
    color: #007bff;
  }
  100% {
    color: #1c9c02;
  }
}

@keyframes zoomEffect {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.heading:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* Search Bar Styles */
form.d-flex input[type="search"] {
  border: 2px solid #d63384; /* Thicker border with a distinct color */
  padding: 8px 16px; /* Add padding to make it larger */
  border-radius: 5px; /* Rounded corners */
  font-weight: bold; /* Bold text */
  outline: none; /* Remove the default outline on focus */
  transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for focus effect */
}

form.d-flex input[type="search"]:focus {
  border-color: #c82373; /* Darker border on focus */
  box-shadow: 0 0 5px rgba(214, 51, 132, 0.5); /* Add a slight shadow on focus */
}
.custom-search-input {
  background-color: #0080ff;
  color: white; /* Text color inside the input field */
  font-weight: bolder; /* Make the input text bold */
}

.custom-search-input::placeholder {
  color: white; /* Placeholder text color */
}

/* Remove underline from playlist item links */
.playlist-item-link {
  text-decoration: none; /* This removes the underline */
}

.playlist-item-link:hover {
  text-decoration: none; /* Ensure underline doesn't appear on hover */
}
/* Media Queries for Mobile Devices */

/* For small screens (<= 576px) */
@media (max-width: 576px) {
  .heading {
    text-align: center;
    margin-bottom: 15px;
  }

  .form-select,
  .form-control.search-bar {
    margin-top: 10px;
    margin-left: 0;
    width: 100%;
  }

  /* Ensure filters stack vertically on small screens */
  .row .col-sm-12 {
    margin-bottom: 10px;
  }
}

/* For screens smaller than 768px (tablets and mobile phones) */
@media (max-width: 768px) {
  .navbar-brand {
    font-size: 20px;
  }

   .select-wrapper {
    margin-right: 0;
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .d-flex.justify-content-between.align-items-center.mb-4 {
    flex-wrap: wrap;
    margin-left: -43%;
  }
  .d-flex {
    flex-direction: column; /* Stack items vertically */
    align-items: flex-start; /* Align items to the start (left) */
    text-align: left; /* Align text to the left */
  }

  .heading {
    font-size: 1.5rem; /* Make heading smaller */
    margin-bottom: 10px; /* Adjust bottom margin */
    margin-left: 5%; /* Adjust margin */
    text-align: center; /* Center align heading */
  }


  .form-control {
    width: 65%;
    max-width: 100%;
    height: auto;
    margin-left: 32%;
    margin-right: auto;
    background-color: rgb(246, 253, 253);
    border-color: rgb(32, 2, 2);
    font-size: 0.9rem;
    margin-top: 10px;
  }

  .navbar-nav .nav-link {
    font-size: 16px;
  }


  .btn-outline-secondary {
    width: 100%; /* Full width for buttons */
    margin-top: 5px;
  }


  }
  .playlist-item img {
    height: auto; /* Allow height to adjust automatically */
    max-height: 200px; /* Increase maximum height */
    object-fit: cover; /* Ensure image covers the container while maintaining aspect ratio */
  }

  .playlist-item {
    margin-bottom: 15px; /* Adjust margin for items */
  }

  .playlist-info h5 {
    font-size: 20px; /* Adjust font size */
  }

  .playlist-info .icons i {
    font-size: 20px; /* Adjust icon size */
  }

  .d-flex {
    flex-direction: column; /* Stack items vertically on small screens */
    margin-top: 3%;
  }

  .form-select,
  .form-control.search-bar {
    margin-top: 10px;
    margin-left: 0;
    width: 100%;
  }

  /* Align filters properly on medium-sized screens */
  .row .col-md-4 {
    margin-bottom: 15px;
  }




/* For screens smaller than 576px (mobile phones) */
@media (max-width: 576px) {
  .navbar-brand {
    font-size: 18px;
  }

  .navbar-nav .nav-link {
    font-size: 14px;
  }

  .heading {
    font-size: 1.9rem;
  }

  .playlist-item img {
    height: auto; /* Allow height to adjust automatically */
    max-height: 336px; /* Increase maximum height */
    object-fit: cover; /* Ensure image covers the container while maintaining aspect ratio */
  }

  .playlist-item {
    margin-bottom: 10px; /* Further adjust margin for items */
  }

  .playlist-info h5 {
    font-size: 20px; /* Further adjust font size */
  }

  .playlist-info .icons i {
    font-size: 18px; /* Further adjust icon size */
  }
}



footer {
  background-color: #000;
  color: #fff;
  text-align: center;
  padding: 1rem;
  position: relative;
  bottom: 0;
  width: 100%;
}

footer a {
  color: #fff;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}