/* Rentals Section */
#rentals-section {
  text-align: center;
  padding: 40px;
  color: #fff; /* White text */
  margin-top: 100px;
}

#rentals-section h1 {
  /* margin-bottom: 80px; */
  color: #fff;
  font-size: 28px;
}

.text-border {
  border: 2px solid #fff;
  padding: 12px 18px;
  background-color: #fff;
  width: 200px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 80px;
  border-radius: 16px;
}

/* Rentals Container */
.rentals-container {
  display: flex;

  justify-content: center;
  margin-top: 20px;
}

/* Rentals Table */
.rentals-table {
  width: 60%; /* Table takes 70% of section width */
  border-collapse: collapse;
  color: #fff; /* White text */
}

/* Table Headers */
.rentals-table th {
  text-align: left;
  font-size: 1.2rem;
  border-bottom: 1px solid #fff;
  padding: 10px;
}

/* Table Rows */
.rentals-table td {
  font-size: 1rem;
  padding: 10px;

  text-align: left;
}

/* Set Column Widths */
.rentals-table th:first-child,
.rentals-table td:first-child {
  width: 70%; /* Product column takes 70% */
}

.rentals-table th:last-child,
.rentals-table td:last-child {
  width: 30%; /* Price column takes 30% */
}

/* 🔹 Hover Effect for Table Rows (Except Header) */
.rentals-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.15); /* 15% opacity white background */
}

/* 🔹 Prevent Hover Effect on Header Row */
.rentals-table thead tr:hover {
  background: transparent;
}

.rental-info {
  margin-top: 80px;
  font-style: italic;
}

/* Responsive Design */
@media (max-width: 480px) {
  #rentals-section {
    text-align: center;
    padding: 20px;
    color: #fff;
    margin-top: 80px;
  }
  .rentals-section h1 {
    margin-bottom: 80px;
  }

  /* Rentals Container */
  .rentals-container {
    display: flex;

    justify-content: center;
    margin-top: 20px;
  }

  /* Rentals Table */
  .rentals-table {
    width: 84%;
  }

  /* 🔹 Hover Effect for Table Rows (Except Header) */
  .rentals-table tbody tr:hover {
    background: none; /* 15% opacity white background */
  }

  .rental-info {
    margin: 80px auto 0 auto;
    width: 80%;
    font-style: italic;
    text-align: center;
  }
}

@media (min-width: 481px) and (max-width: 691px) {
}

@media (min-width: 692px) and (max-width: 1023px) {
}