@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Tajawal", sans-serif;
}

.all {
  background-color: #eef2ef;
}

.header-text {
  text-align: center;
  padding: 20px;
}

.header-text h2 {
  font-size: 1.5rem;
  font-weight: bold;
  color: black;
  /* Gold color for a more luxurious look */
}

.header-text p {
  font-size: 1.2rem;
  margin: 10px 0;
  color: black;
}

/* Cards Container */
.cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  padding: 30px;
  background-color: #eef2ef;
  /* Darker background for contrast */
}

/* Individual Cards */
.card {
  width: 368px;
  background-color: #ffffff;
  border-radius: 15px;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
  border: 2px solid #d9576e;
  height:fit-content;
  /* Gold border */
}

.card img {
  width: 100%;
  height: auto;
  border-bottom: 3px solid #d9576e;
  /* Gold underline effect */
}

/* Card Content */
.card-content {
  padding: 20px;
  text-align: center;
  background-color: white;
  /* Dark card background */
  color: white;
}

.card-content h3 {
  font-size: 18px;
  margin: 10px 0;
  color: #d9576e;
}

.card-content button {
  background-color: #d9576e;
  /* Gold button */
  color: white;
  border: none;
  padding: 7px 23px;
  font-size: 1rem;
  border-radius: 25px;
  /* Rounded button */
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

/* Button hover effect */
.card-content button:hover {
  background-color: white;
  color: #d9576e;
  transform: scale(1.05);
}

/* Card hover effect */
.card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.4);
}

/* Responsive Design */
@media (max-width: 768px) {
  .card {
    width: 90%;
  }
}

@media (max-width: 480px) {
  .header-text h2 {
    font-size: 2rem;
  }

  .header-text p {
    font-size: 1rem;
  }

  .card-content h3 {
    font-size: 1.2rem;
  }

  .cards-container {
    gap: 15px;
  }
}

/* Wrapper to center the alert in the middle of the screen */
.success1-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed; /* Fixed positioning to stay in the center of the screen */
  top: 0;
  left: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgba(0, 0, 0, 0.5); /* Optional: semi-transparent background */
  z-index: 9999; /* Ensure it's on top of other content */
}

/* Alert styling */
.success1 {
  background-color: #d4edda; /* Light green background */
  border: 1px solid #c3e6cb; /* Border with a darker green */
  color: #155724; /* Dark green text */
  padding: 15px 30px; /* Padding inside the alert */
  border-radius: 4px; /* Rounded corners */
  font-size: 16px; /* Font size */
  text-align: center; /* Center the text inside */
  display: flex; /* Flex layout for icon and text */
  align-items: center; /* Center icon and text vertically */
  position: relative; /* To position the close button */
  flex-direction: column;
gap: 10px;
}

/* Close button styling */
.close-btn {
  background: none; /* No background */
  border: none; /* No border */
  color: #155724; /* Same color as the alert text */
  font-size: 20px; /* Larger size for visibility */
  font-weight: bold; /* Bold text */
  position: absolute; /* Positioned inside the alert */
  top: 5px; /* Position from top */
  right: 22px; /* Position from right */
  cursor: pointer; /* Pointer cursor */
}

.close-btn :hover{
background-color: #d4edda;
}

/* Icon styling */
.success1 i {
  margin-right: 10px; /* Space between icon and text */
  font-size: 54px; /* Icon size */
}

/* Bold and styled "Well done!" */
.success1 span {
  font-weight: bold; /* Bold "Well done!" */
  margin-right: 5px; /* Space between "Well done!" and message */
}
.success1 p{
  font-weight:700;
}

.btn-suc{
  background-color: rgb(146, 64, 64);
  color: white;
  border: none;
  padding: 10px 30px;
  cursor: pointer;
  font-size: 0.9em;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;

}

.Bookoptions{

  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 10px;
}