/* =========================
   Global Reset & Base Styles
   ========================= */

/* Remove underline from all links */
a {
  text-decoration: none;
}

/* Optional: add hover effect for clarity */
a:hover {
  text-decoration: none; /* keeps underline off */
  color: #ff6a00;        /* highlight with your brand orange */
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #fff;
}

/* =========================
   Header & Navigation
   ========================= */
header {
  background: #333;
  color: #fff;
  padding: 1rem;
  text-align: center;
}

header nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

header nav a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

.menu-toggle {
  display: none;
  background: #aa6000;
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

/* =========================
   Hero Section
   ========================= */
.hero {
  background: url('../images/hero.jpg') no-repeat center center;
  background-size: cover;
  color: #fff;
  text-align: center;
  padding: 5rem 2rem;
   width: 100%;
  max-height: 450px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 2rem;
}

.heroCheckIn {
  background: url('../images/heroCheckIn.jpg') no-repeat center center;
  background-size: cover;
  color: #fff;
  text-align: center;
  padding: 5rem 2rem;
   width: 100%;
  max-height: 450px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 2rem;
}

.heroCheckOut {
  background: url('../images/heroCheckOut.jpg') no-repeat center center;
 background-size: cover;
  color: #fff;
  text-align: center;
  padding: 5rem 2rem;
   width: 100%;
  max-height: 450px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 2rem;
}

.heroInspection {
  background: url('../images/heroInspection.jpg') no-repeat center center;
 background-size: cover;
  color: #fff;
  text-align: center;
  padding: 5rem 2rem;
   width: 100%;
  max-height: 450px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 2rem;
}

.heroCleaning {
  background: url('../images/heroCleaning.jpg') no-repeat center center;
 background-size: cover;
  color: #fff;
  text-align: center;
  padding: 5rem 2rem;
   width: 100%;
  max-height: 450px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 2rem;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

/* =========================
   CTA Buttons
   ========================= */
.cta-button {
  display: inline-block;
  margin: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: #aa6000;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.cta-button

#about-page .content {
  max-width: 800px;
  margin: 2rem auto;
  text-align: center;
}

/* Global content container */
main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem;   /* pushes content down from the top */
}

/* Section spacing */
section {
  margin-bottom: 3rem;
}

/* Headings */
h1, h2, h3 {
  margin-bottom: 1rem;
  line-height: 1.3;
}

/* Paragraphs */
p {
  margin-bottom: 1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  main {
    padding: 2rem 1rem; /* smaller padding on mobile */
  }
  section {
    margin-bottom: 2rem;
  }
}
/* Header container */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #333;
  color: #fff;
  padding: 0.5rem 2rem;
}

/* Logo area */
header .logo {
  flex: 0 0 auto;
}

header .logo img {
  height: 50px; /* adjust as needed */
}

/* Navigation menu */
header nav {
  flex: 1;
}

header nav ul {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

header nav ul li {
  position: relative;
}

header nav ul li a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  padding: 0.5rem;
  transition: color 0.3s ease;
}

header nav ul li a:hover {
  color: #ddd;
}

/* Dropdown menus */
header nav ul li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #444;
  list-style: none;
  padding: 0.5rem 0;
  min-width: 180px;
  z-index: 1000;
}

header nav ul li ul li {
  width: 100%;
}

header nav ul li ul li a {
  display: block;
  padding: 0.5rem 1rem;
  color: #fff;
}

header nav ul li ul li a:hover {
  background: #555;
}

/* Show dropdown on hover */
header nav ul li:hover > ul {
  display: block;
}

/* Support for deeper sub-menus (third level) */
header nav ul li ul li ul {
  left: 100%;
  top: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  header {
    flex-direction: column;
    align-items: flex-start;
  }

  header nav ul {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  header nav ul li {
    width: 100%;
  }

  header nav ul li ul {
    position: static;
    min-width: 100%;
  }
}
/* Logo container */
header .logo {
  flex: 0 0 auto;
  margin-right: 2rem;
  display: flex;
  align-items: center; /* vertically center logo */
}

/* Logo image */
.logo img {
  height: 120px;       /* increase size */
  width: auto;         /* keep proportions */
  display: block;
  background: transparent; /* ensure no background */
  border: none;
  padding: 0;
  border-radius: 4px;
}


/* Remove placeholder background if used */
.logo-placeholder {
  background: transparent !important;
  color: #ff6a00; /* orange accent for text if placeholder is shown */
}

/* Top-level menu items */
header nav ul li a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  padding: 0.5rem 1.1rem;   /* Same padding for all menu items */
  border-radius: 6px;        /* Rounded corners */
  background: #333;          /* Default background */
  transition: background 0.3s ease, color 0.3s ease;
  min-width: 160px;          /* Ensures consistent button width */
  text-align: center;
}

/* Hover and active states */
header nav ul li a:hover,
header nav ul li a:focus,
header nav ul li.current-menu-item > a {
  background: #aa6000;       /* Change background color */
  color: #fff;
}

/* Dropdown (sub-menu) styling */
header nav ul li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #444;          /* Different background for sub-menus */
  list-style: none;
  padding: 0.5rem 0;
  min-width: 180px;
  border-radius: 6px;
  z-index: 1000;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* Subtle drop-shadow */
}

/* Sub-menu items (same size as main menu) */
header nav ul li ul li a {
  display: block;
  padding: 0.5rem 1.1rem;   /* Same padding as main menu */
  min-width: 160px;          /* Same width */
  color: #fff;
  background: #444444c7;
  border-radius: 6px;
  text-align: center;
  transition: background 0.3s ease;
}

header nav ul li ul li a:hover {
  background: #555;          /* Hover color for sub-menu items */
}

/* Show dropdown on hover */
header nav ul li:hover > ul {
  display: block;
}

/* Support for deeper sub-menus (third level) */
header nav ul li ul li ul {
  left: 100%;
  top: 0;
  background: #555;          /* Different background for deeper levels */
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Hamburger toggle button */
.menu-toggle {
  display: none;
  background: #d47b15;
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 1.0 rem;
  border-radius: 4px;
}

/* Responsive menu behavior */
@media (max-width: 768px) {
  .menu-toggle {
    display: inline-block;
    margin-bottom: 1rem;
  }

  header nav {
    display: none;
    width: 100%;
  }

  header nav.active {
    display: block;
  }

  header nav ul {
    flex-direction: column;
    gap: 0;
    background: #333;
    padding: 1rem;
    border-radius: 6px;
  }

  header nav ul li {
    margin-bottom: 0.5rem;
  }

  header nav ul li a {
    display: block;
    width: 100%;
    background: #444;
    border-radius: 6px;
    padding: 0.75rem;
  }

  header nav ul li a:hover {
    background: #e3760f;
  }
}
#services-page {
  padding: 2rem;
}

.services-hero {
  text-align: center;
  margin-bottom: 3rem;
}

.services-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.service-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  width: 250px;
  padding: 2rem;
  text-align: center;
  transition: box-shadow 0.3s ease;
}

.service-card:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.service-icon {
  font-size: 2.5rem;
  color: #0073aa;
  margin-bottom: 1rem;
}

#guest-checkin-page {
  padding: 2rem;
}

#guest-checkin-page .hero {
  text-align: center;
  margin-bottom: 3rem;
}

#guest-checkin-page .service-details {
  text-align: center;
  margin-bottom: 3rem;
}

#guest-checkin-page .service-icon {
  font-size: 3rem;
  color: #0073aa;
  margin-bottom: 1rem;
}

#guest-checkin-page .benefits ul {
  list-style: none;
  padding: 0;
  max-width: 600px;
  margin: 0 auto;
}

#guest-checkin-page .benefits li {
  background: #f9f9f9;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

#guest-checkin-page .benefits li i {
  color: #0073aa;
  font-size: 1.2rem;
}

#guest-checkin-page .cta {
  text-align: center;
  margin-top: 2rem;
}

/* Shared service page styles */
[id$="-page"] {
  padding: 2rem;
}

[id$="-page"] .hero {
  text-align: center;
  margin-bottom: 3rem;
}

[id$="-page"] .service-details {
  text-align: center;
  margin-bottom: 3rem;
}

[id$="-page"] .service-icon {
  font-size: 3rem;
  color: #0073aa;
  margin-bottom: 1rem;
}

[id$="-page"] .benefits ul {
  list-style: none;
  padding: 0;
  max-width: 600px;
  margin: 0 auto;
}

[id$="-page"] .benefits li {
  background: #f9f9f9;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

[id$="-page"] .benefits li i {
  color: #0073aa;
  font-size: 1.2rem;
}

[id$="-page"] .cta {
  text-align: center;
  margin-top: 2rem;
}

#cleaning-services-page {
  padding: 2rem;
}

#cleaning-services-page .hero {
  text-align: center;
  margin-bottom: 3rem;
}

#cleaning-services-page .service-details {
  text-align: center;
  margin-bottom: 3rem;
}

#cleaning-services-page .service-icon {
  font-size: 3rem;
  color: #0073aa;
  margin-bottom: 1rem;
}

#cleaning-services-page .benefits ul {
  list-style: none;
  padding: 0;
  max-width: 600px;
  margin: 0 auto;
}

#cleaning-services-page .benefits li {
  background: #f9f9f9;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

#cleaning-services-page .benefits li i {
  color: #0073aa;
  font-size: 1.2rem;
}

#cleaning-services-page .cta {
  text-align: center;
  margin-top: 2rem;
}

#about-page {
  padding: 2rem;
}

#about-page .hero {
  text-align: center;
  margin-bottom: 3rem;
}

#about-page .hero img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

#about-page .our-story,
#about-page .our-values,
#about-page .team {
  max-width: 800px;
  margin: 0 auto 3rem auto;
  text-align: center;
}

#about-page .our-values ul {
  list-style: none;
  padding: 0;
}

#about-page .our-values li {
  background: #f9f9f9;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: center;
}

#about-page .our-values li i {
  color: #0073aa;
  font-size: 1.2rem;
}

#about-page .cta {
  text-align: center;
  margin-top: 2rem;
}

.services {
  text-align: center;
  padding: 3rem 2rem;
  background-color: #f9f9f9;
}

.services h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #333;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.service-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  padding: 1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.service-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.service-card h3 {
  color: #ff6a00;
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.service-card p {
  color: #555;
  font-size: 1rem;
}

/* Contact Form Container */
.contact-form {
  max-width: 600px;
  margin: 3rem auto;
  padding: 2rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Form Heading */
.contact-form h2 {
  text-align: center;
  color: #333;
  margin-bottom: 1.5rem;
}

/* Form Labels */
.contact-form label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #444;
}

/* Input Fields */
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1.5rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

/* Focus State */
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #ff6a00; /* StayReady orange */
  outline: none;
}

/* Submit Button */
.contact-form button {
  display: block;
  width: 100%;
  padding: 0.75rem;
  background: #ff6a00;
  color: #fff;
  font-size: 1.1rem;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.contact-form button:hover {
  background: #e55d00; /* darker orange on hover */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .contact-form {
    padding: 1.5rem;
  }
}

.contact-form {
  background: #fff;
  padding: 60px 20px;
  font-family: 'Montserrat', sans-serif;
  color: #4a3b2e;
}
.contact-form h2 {
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-size: 2em;
  color: #c96f4a;
  margin-bottom: 20px;
}
.contact-form .intro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 40px;
  font-size: 1.1em;
}
form {
  max-width: 600px;
  margin: 0 auto;
}
.form-group {
  margin-bottom: 20px;
}
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}
input, textarea, select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: 'Montserrat', sans-serif;
}
button.btn {
  background: #c96f4a;
  color: #fff;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
}
button.btn:hover {
  background: #3a7ca5;
}

.gift-banner {
  background: url('/wp-content/themes/mytheme/assets/images/gift-banner.png') no-repeat center center;
  background-size: cover;
  height: 400px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius:6px;
}

.banner-overlay {
  background: rgba(0,0,0,0.4);
  padding: 20px 40px;
  border-radius: 8px;
  text-align: center;
}

.banner-title {
  font-family: 'Playfair Display', serif;
  font-size: 3em;
  color: #fff;
  margin: 0;
}

.banner-subtitle {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2em;
  color: #f5e9d3;
  margin-top: 10px;
}



/* Grid Layout */
.gift-grid {
  background: #f5e9d3;
  padding: 60px 20px;
  font-family: 'Montserrat', sans-serif;
  color: #4a3b2e;
}
.intro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 40px;
  font-size: 1.1em;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}
.grid-item {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  padding: 20px;
}
.grid-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}
.grid-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-bottom: 2px solid #f5e9d3;
  margin-bottom: 15px;
  border-radius: 6px;
}
.grid-item h2 {
  color: #3a7ca5;
  margin-bottom: 10px;
}
.desc {
  font-size: 0.95em;
  margin-bottom: 15px;
}
.price {
  font-weight: bold;
  color: #c96f4a;
  margin-bottom: 15px;
}
.btn {
  display: inline-block;
  background: #c96f4a;
  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
}
.btn:hover {
  background: #3a7ca5;
}