:root {
--color-white: #f4f4f5;
--color-black: #231f20;
--color-gray: #c2c2bf;
--color-dark: #2c3337;
--color-blue: #249cd1;
--color-yellow: #eec21b;
}


* { box-sizing: border-box; margin:0; padding:0; }
body { font-family: 'Arial', sans-serif; background: var(--color-white); color: var(--color-dark); }


.container { max-width: 1100px; margin: 0 auto; padding: 32px; }
.hero { text-align: center; margin-bottom: 40px; }
.hero h1 { font-size: 32px; color: var(--color-blue); margin-bottom: 16px; }
.hero p { font-size: 18px; color: var(--color-gray); }


.packages { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 24px; margin-top: 32px; }
.package-card { background: var(--color-white); border: 2px solid var(--color-blue); border-radius: 12px; padding: 20px; text-align: center; }
.package-card img { max-width: 100%; border-radius: 8px; margin-bottom: 16px; }
.package-card h3 { color: var(--color-black); margin-bottom: 12px; }
.package-card p { color: var(--color-dark); margin-bottom: 16px; line-height: 1.4; }
.package-card .price { font-weight: bold; font-size: 20px; color: var(--color-blue); margin-bottom: 16px; }
.package-card .btn { text-decoration: none; padding: 10px 18px; border-radius: 10px; background: var(--color-yellow); color: var(--color-dark); font-weight: bold; transition: 0.3s; }
.package-card .btn:hover { background: var(--color-blue); color: var(--color-white); }


footer { text-align: center; padding: 24px 0; color: var(--color-gray); margin-top: 40px; }


@media (max-width:540px) {
.hero h1 { font-size: 26px; }
.hero p { font-size: 16px; }
}

.booking-form-section {
  margin-top: 60px;
  text-align: center;
}

.booking-form-section h2 {
  font-size: 28px;
  margin-bottom: 12px;
  color: var(--color-blue);
}

.booking-form-section p {
  color: var(--color-gray);
  margin-bottom: 24px;
}

.booking-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 500px;
  margin: 0 auto;
}

.booking-form input,
.booking-form select,
.booking-form textarea {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--color-gray);
  width: 100%;
}

.booking-form button {
  background: var(--color-yellow);
  color: var(--color-dark);
  font-weight: bold;
  border: none;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

.booking-form button:hover {
  background: var(--color-blue);
  color: var(--color-white);
}


.business-profiles {
  margin-top: 60px;
  text-align: center;
}

.business-profiles h2 {
  font-size: 28px;
  margin-bottom: 12px;
  color: var(--color-blue);
}

.business-profiles p {
  color: var(--color-gray);
  margin-bottom: 24px;
}

.profiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.profile-card {
  background: var(--color-white);
  border: 2px solid var(--color-blue);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

.profile-card img {
  max-width: 100%;
  border-radius: 8px;
  margin-bottom: 16px;
}

.profile-card h3 {
  color: var(--color-black);
  margin-bottom: 8px;
}

.profile-card p {
  color: var(--color-dark);
  margin-bottom: 8px;
}

.contact-info p {
  color: var(--color-gray);
  margin: 4px 0;
}


/* Package Cards */
.package-card {
  background: var(--color-white);
  border: none; /* removed border */
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1); /* soft shadow */
  transition: transform 0.3s, box-shadow 0.3s;
}

.package-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.package-card img {
  width: 100%;           /* fills card width */
  max-width: 300px;      /* prevents oversized image */
  height: auto;          /* keeps aspect ratio */
  border-radius: 12px;
  display: block;
  margin: 0 auto 16px auto; /* centers image */
}

/* Business Profile Cards */
.profile-card {
  background: var(--color-white);
  border: none; /* removed border */
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1); /* soft shadow */
  transition: transform 0.3s, box-shadow 0.3s;
}

.profile-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

/* Lightbulb Icon Styling */
.fa-lightbulb {
  font-size: 55px;          /* makes it bigger */
  color: var(--color-yellow); /* uses your yellow color */
  margin-bottom: 35px;       /* space below icon */
}


.booking-form-section {
  background: var(--color-white);
  padding: 50px 20px;
  text-align: center;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.15); /* added soft shadow */
  max-width: 600px;
  margin: 40px auto;
  transition: transform 0.3s, box-shadow 0.3s;
}

.booking-form-section:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.2); /* slightly stronger on hover */
}


/* Elegant font for the form */
.booking-form-section {
  font-family: 'Poppins', 'Segoe UI', Tahoma, sans-serif; /* modern clean font */
  color: var(--color-dark);
}

/* Labels */
.booking-form label {
  margin-bottom: 6px;
  font-weight: 600;   /* semi-bold */
  color: var(--color-black);
  font-size: 16px;
}

/* Inputs and Textarea */
.booking-form input,
.booking-form textarea {
  font-family: inherit;
  font-size: 16px;
  color: var(--color-black);
}

/* Placeholder text */
.booking-form input::placeholder,
.booking-form textarea::placeholder {
  color: var(--color-gray);
  font-style: italic;
}

/* Heading */
.booking-form-section h2 {
  font-family: 'Poppins', 'Segoe UI', Tahoma, sans-serif;
  font-weight: 700;   /* bold */
  color: var(--color-blue);
}