/* GENERAL RESET */
    body, table, td, img {
      margin: 0;
      padding: 0;
      border: 0;
    }

    body {
      font-family: Arial, sans-serif;
      background-color: #ffffff;
    }

    h1 {
      text-align: center;
      background-color: transparent;
      font-weight: 500;
      letter-spacing: 3px;
      margin: 0;
      padding: 20px 10px;
      color: #292d6c;
 	font-size: 25px; /* <-- added this line */
    }

.h1-small {
  text-align: center;
  background-color: transparent;
  font-weight: 500;
  letter-spacing: 1px;      /* smaller spacing */
  margin: 0;
  padding: 20px 10px;
  color: #292d6c;
  font-size: 20px;          /* slightly smaller than h1 */
}

    /* IMAGES */
    img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    /* MAIN CONTAINER */
    .hotel-container {
      width: 90%;
      max-width: 1100px;
      margin: 20px auto;
      background-color: #f1f5f8;
      border-radius: 12px;
      overflow: hidden;
    }

    .hotel-card {
      display: flex;
      flex-wrap: wrap;
      background-color: #ddd8d4;
      border-radius: 20px;
      overflow: hidden;
    }

    .red-bar {
      background-color: #d52029;
      width: 5%;
      min-width: 10px;
    }

    .hotel-image {
      flex: 1 1 300px;
      text-align: center;
    }

    .hotel-image img {
      border-radius: 0;
    }

    .hotel-details {
      flex: 1 1 400px;
      padding: 5px 20px 5px 20px;
      color: #000;
    }

    .hotel-details h2 {
      color: #292d6c;
      font-size: 1.4rem;
      margin-bottom: 5px;
    }

    .hotel-details p {
      margin: 5px 0;
    }

    .room-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
    }

    .room-table td {
      border: 1px solid #ddd8d4;
      padding: 6px;
      font-size: 0.95rem;
    }

.room-name { width: 85%; }
.room-price { width: 15%; }

    /* FOOTER */
    .footer img {
      width: 100%;
      height: auto;
      display: block;
    }

/* RESPONSIVE DESIGN */
@media (max-width: 900px) {
  .hotel-details h2 { font-size: 1.2rem; }
  h1 { font-size: 1.8rem; }
}

@media (max-width: 600px) {
  .hotel-card {
    flex-direction: column;
  }
  .red-bar {
    width: 100%;
    height: 10px;
  }
  .hotel-details {
    padding: 15px;
  }
  h1 {
    font-size: 1.5rem;
    padding: 15px 5px;
  }

  /* ? ROOM TABLE STACKS ON MOBILE */
  .room-table,
  .room-table tr,
  .room-table td {
    display: block;
    width: 100%;
  }
  .room-price {
    margin-top: 4px;
  }
}
    }





.tabs {
  width: 100%;              /* match hotel-container width */
  max-width: 90%;           /* ensures same width as previous 90% on large screens */
  margin: 20px auto;        /* centers the tabs */
  font-family: Arial, sans-serif;
  box-sizing: border-box;   /* ensures padding doesn't break width */
}

.tab-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;                 /* space between tabs, better than margin-right */
}

.tab-link {
  flex: 1;
  padding: 12px;
  border: 2px solid #d52029;
  background: transparent;
  color: #d52029;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 1px;
  text-align: center;
  transition: 0.3s;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/* Active tab */
.tab-link.active {
  background-color: #d52029;
  color: white;
}

/* Hover effect */
.tab-link:hover {
  background-color: #292d6c;
  color: white;
}

/* Tab content */
.tab-content {
  background: #fff;
  border: 1px solid #ddd8d4;
  border-top: none;            /* avoid double border */
  padding: 20px;
  margin-top: -2px;            /* visually connects content to active tab */
  border-radius: 0 0 10px 10px;
  box-sizing: border-box;
}

/* Responsive: stack tabs on mobile */
@media (max-width: 600px) {
  .tab-link {
    flex-basis: 100%;
    margin-bottom: 5px;
  }
}




.options-container {
  display: flex;
  justify-content: space-between;
  gap: 25px;           /* reduced space between columns */
  padding: 0 50px;     /* more space on left and right */
  width: 80%;          /* container width set to 80% */
  margin: 60px auto;   /* vertical space above & below and centering the container */
  flex-wrap: nowrap;
  box-sizing: border-box;
}



.option-item {
  width: 27%;           /* keep columns slightly thinner */
  text-align: center;
  box-sizing: border-box;
  border: 3px solid #d52029;
  border-radius: 8px;
  padding: 30px;        /* internal padding */
  background: #fff;
}


.option-item img {
  width: 50px;        /* Set the width to 50px */
  height: 50px;       /* Set the height to 50px */
  display: block;
  margin: 0 auto 18px; /* Center the image horizontally and add margin below it */
}





.option-item h2 {
  margin-bottom: 12px;
  color: #292d6c;
}

.option-item p {
  margin-bottom: 20px;
  color: #333;
}

.button {
  display: inline-block;
  padding: 12px 24px;
  background: #d52029;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  transition: 0.3s;
}

.button:hover {
  background: #b41923;
}

/* Responsive */
@media (max-width: 800px) {
  .options-container {
    flex-wrap: wrap;
    padding: 0 20px; /* reduce side padding on smaller screens */
  }
  .option-item {
    width: 100%;
    margin: 0 0 20px 0;
  }
}




.button-wrap {
  text-align: center;
  margin: 20px 0; /* adjust vertical spacing as needed */
}

.accom-btn {
  display: inline-block;
  background-color: #292d6c;   /* blue */
  color: #ffffff;              /* white font */
  padding: 14px 30px;          /* similar sizing to site’s button */
  font-size: 20px;             /* adjust if needed */
  font-weight: 600;            /* semi-bold */
  text-decoration: none;
  border-radius: 50px;           /* subtle rounding matching site style */
  border: 2px solid #292d6c;    /* blue border */
  transition: background-color 0.3s, color 0.3s;
}

.accom-btn:hover {
  background-color: #292d6c;   /* blue on hover */
  color: #ffffff;              /* white text */
}



/* Red button */
.group-btn {
  display: inline-block;
  background-color: #d52029 !important;   /* red background */
  color: #ffffff !important;              /* white font */
  padding: 14px 30px;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 50px;
  border: 2px solid #d52029 !important;  /* red border */
  transition: background-color 0.3s, color 0.3s;
}

.group-btn:hover {
  background-color: #292d6c !important;
  border-color: #292d6c !important;
  color: #ffffff !important;
}