/* ---------- HOMEPAGE STYLES ---------- */

/* Body and base font */
body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  color: #2C3E50;
  line-height: 1.6;
}

p {
   font-size: 16pt;
}

/* ---------- Header ---------- */
/* Header */
.intro {
  background-color: #2C3E50; /* dark header */
  color: #ffffff;
  padding: 60px 20px;
  text-align: center;         /* center elements horizontally */
  border-radius: 0 0 10px 10px;  
  padding: 40px 20px 10px 20px;
  position: relative; /* enables absolute positioning inside */
}

.intro-header-content {
  margin-top: 20px;
}

.intro-phone {
  position: absolute;
  top: 15px;
  left: 20px;
  font-size: 2rem;
  font-weight: bold;
}

.intro-phone a {
  color: #ffd600;
  text-decoration: none;
}

.intro-phone a:hover {
  color: #f5d742;
  opacity: 0.85;
}


.intro h1 {
   font-size: 38px;
}

.intro p {
   font-size: 24px;
   margin-top: 1em;
}

/* Flex container for H1 + logo */
.intro-header-content {
  display: flex;
  align-items: center;
  justify-content: center;    /* center H1 + logo horizontally */
  gap: 50px;                  /* increased from 40px to 50px for bigger logo */
  flex-wrap: wrap;            /* wrap on small screens */
}

/* Logo inside header */
.intro-logo {
  height: 100px;        /* increased from 60px */
  max-width: 300px;    /* keeps aspect ratio correct */
  margin-top: -8px;
  object-fit: contain;
}

/* Header CTA button */
.intro-cta {
  display: inline-block;
  background-color: #FF6600;
  color: #fff;
  padding: 12px 24px;
  font-size: 1.2rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: opacity 0.2s ease;
  margin: 20px auto 20px auto; /* centers button and adds spacing from header content */
}

.intro-cta:hover {
  opacity: 0.85;
}

/* Responsive adjustments */
@media (max-width: 700px) {
  .intro-header-content {
    flex-direction: column;
    gap: 15px;
  }
}



/* ---------- Highlights Blocks ---------- */
/* Wrapper for the three columns */
.highlights-wrapper {
  display: flex;
  justify-content: space-between;  /* even spacing across row */
  gap: 20px;
  max-width: 1000px;               /* same as highlight boxes */
  margin: 40px auto;               /* center the section */
  flex-wrap: wrap;                 /* stack on smaller screens */
}

/* Each column */
.highlight-column {
  flex: 1 1 calc(33.33% - 13.33px); /* 3 equal columns with gap */
  display: flex;
  flex-direction: column;            /* photo on top, box below */
  align-items: stretch;              /* both photo & box take full column width */
  gap: 10px;                         /* spacing between photo and highlight box */
}

/* Photo above each highlight */
.highlight-photo {
  width: 100%;         /* same width as highlight box */
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}

/* Existing highlight box styling */
.highlight-box {
  background-color: #ebe5e1;
  padding: 20px;
  border-radius: 6px;
  text-align: center;
}


/* Strong labels in highlights */
.highlights div strong {
  font-size: 1.2rem;
  display: block;
  margin-bottom: 10px;
  color: #2C3E50;
}

/* ---------- About Brief ---------- */
.about-brief {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
  text-align: center;
}

.about-brief h2 {
  background-color: #2C3E50;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 6px;
  margin-bottom: 20px;
  font-size: 1.8rem;
}

/* ---------- Next Step ---------- */
.next-step {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
  text-align: center;
}

.next-step h2 {
  background-color: #2C3E50;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 6px;
  margin-bottom: 15px;
  font-size: 1.8rem;
}

.next-step .cta {
  display: inline-block;
  background-color: #FF6600;
  color: #fff;
  padding: 12px 24px;
  font-size: 1.2rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: opacity 0.2s ease;
}

.next-step .cta:hover {
  opacity: 0.85;
}

/* ---------- Reviews Section ---------- */
/* keep the carousel area wide */
.reviews-section {
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 20px;
}

/* make ONLY the title bar match the 800px sections */
.reviews-title-wrap {
  max-width: 800px;
  margin: 0 auto 20px auto;
}

.reviews-title-wrap h2 {
  background-color: #2C3E50;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 1.8rem;
  text-align: center;
  margin: 0;
}

.reviews-section h2 {
  margin-bottom: 0; /* because wrapper handles spacing now */
}


.reviews-carousel {
  display: flex;
  flex-direction: row;       /* keep horizontal carousel */
  gap: 20px;
  overflow-x: hidden;        /* hide horizontal scroll */
  justify-content: center;   /* center reviews in the container */
}

/* Individual review */
.review {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 6px;
  width: 300px;              /* fixed width, adjust as needed */
  flex-shrink: 0;            /* prevent shrinking */
  box-sizing: border-box;
  white-space: normal;       /* allow text to wrap */
  word-wrap: break-word;     /* wrap long words */
  overflow: visible;         /* make sure nothing is cut off */
}

.review.active {
  border: 2px solid #FF6600;
}

.review .quote {
  font-size: 1rem;
  font-style: italic;
  margin-bottom: 10px;
}

.review .author {
  text-align: right;
  font-weight: bold;
}

.review {
  display: none;
}

.review.visible {
  display: block;
}

/* ---------- Privacy Callout ---------- */

.privacy-callout-wrap {
  display: flex;
  justify-content: center;
  gap: 15px;
  max-width: 1000px;
  margin: 10px auto 0 auto;
  padding: 0 20px;
}

.privacy-callout {
  background-color: #2C3E50;
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
}

.privacy-callout:hover {
  opacity: 0.85;
}

.gallery-callout {
  background-color: #FF6600; /* matches CTA + Gallery accent */
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: bold;
  text-decoration: none;
  margin-left: 10px;        /* space between buttons */
  display: inline-block;
}

.gallery-callout:hover {
  opacity: 0.85;
}


/* Carousel controls */
.carousel-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
}

.carousel-controls button {
  background-color: #FF6600;
  color: #fff;
  border: none;
  font-size: 1.5rem;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.carousel-controls button:hover {
  opacity: 0.85;
}

/* ---------- Footer ---------- */
footer {
  background-color: #2C3E50;
  color: #fff;
  text-align: center;
  padding: 20px;
  margin-top: 40px;
}