style.css

.media img {
          width: 80%;
          max-width: 150px; /* Adjust as needed */
          height: auto;
}

.big-btn {
  padding: 10px 20px;
  font-size: 18px;
  width: 200px;
  margin-left: 80px;
  background-color: rgb(17, 17, 17); 
  color: rgb(235, 223, 223); 
  border: 1px solid black;
}

.btn-black {
  background-color: black;
  color: white;
  border: 1px solid black;
}

.btn-black:hover {
  background-color: #333; /* Slightly lighter black for hover effect */
  border-color: #333;
}

.card {
    text-align: center;
    border: none;
    border-radius: 5px;
    -webkit-box-shadow: 12px 14px 22px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 12px 14px 22px 2px rgba(0,0,0,0.75);
    box-shadow: 12px 14px 22px 2px rgba(0,0,0,0.75);
    margin-bottom: 100px;
  }
  
  /* Star Rating Section */
  .star-rating {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  
  .star-rating i {
    font-size: 1.5rem;
    color: #f39c12;
  }
  
  .rating-text {
    font-size: 1rem;
    margin-left: 10px;
  }
  
  /* Media Queries for Responsiveness */
  
  /* Extra small devices (phones, less than 576px) */
  @media (max-width: 575.98px) {
    .card {
      margin-bottom: 50px;
      box-shadow: 6px 7px 11px 1px rgba(0,0,0,0.75);
    }
  
    .star-rating {
      flex-direction: column;
      align-items: flex-start;
    }
  
    .star-rating i {
      font-size: 1.25rem;
    }
  
    .rating-text {
      font-size: 0.875rem;
      margin-left: 0;
      margin-top: 5px;
    }
  }
  
  /* Small devices (landscape phones, less than 768px) */
  @media (max-width: 767.98px) {
    .card {
      margin-bottom: 75px;
      box-shadow: 9px 10px 16px 1.5px rgba(0,0,0,0.75);
    }
  
    .star-rating i {
      font-size: 1.25rem;
    }
  
    .rating-text {
      font-size: 12px;
      margin-left: 0px;
    }
  }
  
  /* Medium devices (tablets, less than 992px) */
  @media (max-width: 991.98px) {
    .card {
      margin-bottom: 80px;
      box-shadow: 10px 12px 18px 1.75px rgba(0,0,0,0.75);
    }
  
    .star-rating i {
      font-size: 1.4rem;
    }
  
    .rating-text {
      font-size: 0.95rem;
      margin-left: 8px;
    }
  }
  
  /* Large devices (desktops, less than 1200px) */
  @media (max-width: 1199.98px) {
    .card {
      margin-bottom: 90px;
      box-shadow: 11px 13px 20px 2px rgba(0,0,0,0.75);
    }
  
    .star-rating i {
      font-size: 1.5rem;
    }
  
    .rating-text {
      font-size: 1rem;
      margin-left: 10px;
    }
  }