/*
 * BellTop Roofers Philadelphia Stylesheet
 *
 * A light, professional theme tailored for a roofing business. The
 * design uses a crisp blue and gold palette to convey trust and
 * quality. Layouts are responsive and accessible, featuring subtle
 * hover animations, scroll reveals, and clear typography. Colour
 * variables allow easy refinement. Inspired by modern web design
 * trends emphasising simplicity, micro‑interactions and white space【568057625219336†L115-L156】【510149202724520†L363-L370】.
 */

/* Reset & base styles */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: 'Nunito', sans-serif;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style: none;
}

/* Colour palette */
:root {
  --color-primary: #005691; /* navy blue for key accents */
  --color-secondary: #F2B705; /* warm gold */
  --color-accent: #0077B6; /* medium blue */
  --color-bg: #F9FAFB; /* light background */
  --color-muted: #EEF3F7; /* subtle section background */
  --color-dark: #0A2E51; /* dark navy for headings */
  --color-text: #2F4A62; /* dark grey‑blue for body copy */
  --radius: 0.7rem;
  --transition-speed: 0.3s;
}

/* Layout utilities */
.container {
  width: min(90%, 1200px);
  margin-inline: auto;
}
.section {
  padding: 4rem 0;
}
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.show {
  opacity: 1;
  transform: translateY(0);
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  font-weight: 600;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-speed), transform var(--transition-speed), color var(--transition-speed);
  text-align: center;
}
.btn-primary {
  background-color: var(--color-primary);
  color: #fff;
}
.btn-primary:hover {
  background-color: var(--color-dark);
  transform: translateY(-2px);
}
.btn-secondary {
  background-color: var(--color-secondary);
  color: var(--color-dark);
}
.btn-secondary:hover {
  background-color: var(--color-primary);
  color: #fff;
  transform: translateY(-2px);
}
.btn-tertiary {
  background-color: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}
.btn-tertiary:hover {
  background-color: var(--color-primary);
  color: #fff;
  transform: translateY(-2px);
}

/*
 * CTA button group
 *
 * The hero section contains two call‑to‑action buttons (“Free Estimate” and
 * “Call Now”).  Wrap them in a flex container to align them horizontally
 * with consistent spacing.  On small screens the group remains left‑aligned
 * rather than centred to mirror the natural reading order from left to
 * right.  A slight gap separates the buttons.  The individual call now
 * button inherits the `.btn` base styles and uses the secondary colour.
 */
.cta-buttons {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: flex-start;
}

/* Additional styling for the hero call now button.  This class applies the
   secondary palette to distinguish it from the primary “Free Estimate”
   button.  The font weight and border radius match the base button styles. */
.call-now-hero {
  background-color: var(--color-secondary);
  color: var(--color-dark);
  border-radius: var(--radius);
  padding: 0.8rem 1.6rem;
  font-weight: 600;
  transition: background-color var(--transition-speed), color var(--transition-speed), transform var(--transition-speed);
}
.call-now-hero:hover {
  background-color: var(--color-primary);
  color: #fff;
  transform: translateY(-2px);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 100;
  background-color: rgba(255,255,255,0.95);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}
.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.logo img {
  /* hide the old image logo – replaced with inline SVG */
  display: none;
}
.logo svg {
  /* size of the inline SVG logo */
  height: 65px;
  width: 65px;
}
.logo span {
  font-family: 'Poppins', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-primary);
}
.primary-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* Position of the mobile menu toggle
   The nav toggle should only shift to the far right on small screens. On
   larger screens it remains at the start of the nav (before the nav list). */
.primary-nav .nav-toggle {
  margin-left: 0;
}
.primary-nav .nav-list {
  display: flex;
  gap: 2rem;
}
.primary-nav .nav-list a {
  /* Increase menu link weight for better legibility on desktop */
  font-weight: 700;
  position: relative;
  padding: 0.5rem;
  color: var(--color-dark);
  transition: color var(--transition-speed);
}
.primary-nav .nav-list a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: width var(--transition-speed);
}
.primary-nav .nav-list a:hover {
  color: var(--color-primary);
}
.primary-nav .nav-list a:hover::after {
  width: 100%;
}
.nav-toggle {
  display: none;
  font-size: 1.5rem;
  background: none;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
}
/* Show call‑now button on larger screens and style it with neon effects */
/*
 * Header button styles
 *
 * The header now contains two interactive calls‑to‑action: a clean “Call Now” button and a
 * contrasting “Free Estimate” button. Both buttons share a common base class for
 * consistent sizing, padding and font styling. Each variation defines its own
 * background and text colours. A subtle border replaces the previous neon/glow
 * effects to create a more refined look. Hover states darken the primary button
 * and invert the secondary button to maintain visual interest without a heavy
 * drop shadow. These classes are used across the site header in both desktop
 * and mobile layouts.
 */
.header-btn {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  font-weight: 600;
  border-radius: var(--radius);
  border: 2px solid var(--color-primary);
  font-size: 1rem;
  text-align: center;
  transition: background-color var(--transition-speed), color var(--transition-speed),
              border-color var(--transition-speed), transform var(--transition-speed);
}
.header-btn:hover {
  transform: translateY(-2px);
}
.call-btn {
  background-color: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.call-btn:hover {
  background-color: var(--color-dark);
  border-color: var(--color-dark);
  color: #fff;
}
.free-estimate-btn {
  background-color: var(--color-secondary);
  color: var(--color-dark);
  border-color: var(--color-secondary);
  margin-left: 1rem;
}
.free-estimate-btn:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* Temporary pressed state applied via JavaScript. The movement mirrors the
   standard hover transform but shorter duration to convey a click action. */
.call-btn.clicked {
  transform: translateY(-2px);
}

/* When the mobile or desktop call‑now buttons are clicked, apply a slight
   upward movement with no box shadow.  This small interaction provides
   tactile feedback without introducing a glow or other effects. */
.call-now-mobile.clicked,
.call-now-desktop.clicked {
  transform: translateY(-2px);
  box-shadow: none;
}
/* Base styling for the call‑now button. On larger screens this matches
   the original neon style used throughout the site. We'll override this
   for mobile later to create a more refined look. */
.call-now {
  display: inline-block;
  margin-left: 1rem;
  padding: 0.8rem 1.6rem;
  font-weight: 700;
  border-radius: var(--radius);
  font-size: 1rem;
  background-color: var(--color-secondary);
  color: var(--color-dark);
  box-shadow: 0 0 5px var(--color-secondary), 0 0 15px var(--color-secondary);
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}
.call-now:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 10px var(--color-primary), 0 0 20px var(--color-primary), 0 0 40px var(--color-primary);
}

/* Provide separate classes for desktop and mobile call buttons.
   The mobile button is hidden by default and will be displayed on small
   screens via a media query. The desktop button is shown by default. */
.call-now-mobile {
  display: none;
}
.call-now-desktop {
  display: inline-block;
}

/* Neon button base style for interactive CTA elements */
.neon-button {
  position: relative;
  background-color: var(--color-secondary);
  color: var(--color-dark);
  box-shadow: 0 0 5px var(--color-secondary), 0 0 15px var(--color-secondary);
  transition: box-shadow var(--transition-speed), transform var(--transition-speed);
}
.neon-button:hover {
  box-shadow: 0 0 10px var(--color-primary), 0 0 20px var(--color-primary), 0 0 40px var(--color-primary);
  transform: translateY(-2px);
}
.neon-button.flashing {
  animation: flash 0.7s ease-in-out;
}

@keyframes flash {
  0%, 100% { box-shadow: 0 0 5px var(--color-secondary), 0 0 15px var(--color-secondary); }
  50% { box-shadow: 0 0 20px var(--color-primary), 0 0 40px var(--color-primary); }
}
@media (max-width: 768px) {
  .primary-nav {
    position: relative;
  }
  .nav-toggle {
    display: block;
  }
  .nav-list {
    position: absolute;
    top: 100%;
    right: 0;
    flex-direction: column;
    background-color: #fff;
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    transform: scale(0);
    transform-origin: top right;
    transition: transform var(--transition-speed);
    z-index: 50;
  }
  .primary-nav.open .nav-list {
    transform: scale(1);
  }
  .nav-list li {
    margin-bottom: 1rem;
  }
  .nav-list li:last-child {
    margin-bottom: 0;
  }
  /* Hide the desktop call button and show the mobile call button on small screens */
  .call-now-desktop {
    display: none;
  }
  .call-now-mobile {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    font-weight: 600;
    border-radius: var(--radius);
    border: 2px solid var(--color-secondary);
    font-size: 0.9rem;
    background-color: var(--color-secondary);
    color: var(--color-dark);
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    /* Add a subtle neon glow reminiscent of the desktop call button.  This
       draws attention on mobile without being overpowering. */
    box-shadow: 0 0 5px var(--color-secondary), 0 0 15px var(--color-secondary);
    transition: background-color var(--transition-speed), color var(--transition-speed), border-color var(--transition-speed), box-shadow var(--transition-speed);
  }
  .call-now-mobile:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 0 10px var(--color-primary), 0 0 20px var(--color-primary);
  }
}

/* Hero Section */
.hero-section {
  background-color: var(--color-muted);
}
.hero-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 3rem;
  align-items: center;
  padding-top: 2rem;
}
.hero-text h1 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2rem, 5vw + 1rem, 3.5rem);
  color: var(--color-dark);
  margin-bottom: 1rem;
  /* Make hero heading bold to align with other section headings */
  font-weight: 700;
}

/* Ensure the hero heading remains bold on larger screens where subtle
   weight differences can be more noticeable. */
@media (min-width: 769px) {
  .hero-text h1 {
    font-weight: 700;
  }
}
.hero-text p {
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
  max-width: 600px;
}
.hero-image img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  /* Restrict the height of hero images on larger screens.  The original
     design used very tall portraits that felt awkward on wide displays.  By
     setting a maximum height and using object‑fit: cover the images take on
     a more landscape orientation without distortion.  This rule is
     overridden in the mobile media query below, where the height is
     allowed to scale naturally. */
  max-height: 450px;
  object-fit: cover;
}

/* When the hero image is placed directly within the hero text (e.g. on
   mobile layouts or updated markup) ensure it scales to the full width of
   the column and sits comfortably between the heading and descriptive copy. */
.hero-text img {
  width: 100%;
  height: auto;
  margin: 1rem 0;
  border-radius: var(--radius);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

/* About Section */
.about-section {
  background-color: var(--color-bg);
}
.about-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 3rem;
  align-items: center;
}
.about-text h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--color-dark);
}
.about-text p {
  margin-bottom: 1rem;
  max-width: 650px;
}
.about-image img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  /* Give the about image a landscape aspect ratio on desktop by capping
     the height and cropping the remainder with object‑fit.  This mirrors
     the hero image treatment for a cohesive look. */
  max-height: 450px;
  object-fit: cover;
}

/* When about section images are included directly inside the text container
   (e.g. after the section heading) ensure they scale properly and separate
   the heading from the body copy. */
.about-text img {
  width: 100%;
  height: auto;
  margin: 1rem 0;
  border-radius: var(--radius);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

/* Services Section */
.services-section {
  background-color: var(--color-muted);
}

/* Hide mobile-specific hero/about images by default; they will be
   displayed only on small screens via media queries. */
.hero-img-mobile,
.about-img-mobile {
  display: none;
  width: 100%;
  height: auto;
  margin: 1rem 0;
  border-radius: var(--radius);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}
.services-section h2 {
  text-align: center;
  margin-bottom: 2.5rem;
  font-family: 'Poppins', sans-serif;
  font-size: 2rem;
  color: var(--color-dark);
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}
.service-card {
  background-color: #fff;
  padding: 2rem;
  border-radius: var(--radius);
  text-align: center;
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.08);
}
.icon-wrapper {
  width: 60px;
  height: 60px;
  margin-inline: auto;
  margin-bottom: 1rem;
  border-radius: 50%;
  background-color: var(--color-secondary);
  color: var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.service-card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  color: var(--color-dark);
}
.service-card p {
  font-size: 0.95rem;
}

/* Benefits / Why Choose Us Section */
.benefits-section {
  background-color: var(--color-bg);
}
.benefits-section h2 {
  text-align: center;
  margin-bottom: 2.5rem;
  font-family: 'Poppins', sans-serif;
  font-size: 2rem;
  color: var(--color-dark);
}
.benefits-grid {
  display: grid;
  /*
   * Arrange the benefit cards in a fixed 3‑column grid on larger screens.  With
   * six items this yields a 2×3 layout, eliminating excess whitespace at
   * the right edge of the container.  The minmax/auto‑fit approach was
   * replaced because it sometimes produced uneven wrapping and empty
   * space when there weren’t enough columns to fill the row.  On small
   * screens, the media query below will collapse the grid to a single
   * column for readability.
   */
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.benefit-item {
  background-color: var(--color-muted);
  padding: 2rem;
  border-radius: var(--radius);
  text-align: center;
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  /* ensure each item stretches uniformly within the grid */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.benefit-item:hover {
  transform: translateY(-5px);
  /* add a neon border glow to emphasise interactivity */
  box-shadow: 0 8px 16px rgba(0,0,0,0.08), 0 0 15px var(--color-secondary), 0 0 30px var(--color-secondary), 0 0 45px var(--color-secondary);
}
.benefit-item i {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--color-primary);
}
.benefit-item h3 {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  color: var(--color-dark);
}
.benefit-item p {
  font-size: 0.95rem;
}

/* Testimonials Section */
.testimonials-section {
  background-color: var(--color-muted);
  text-align: center;
}
.testimonials-section h2 {
  margin-bottom: 2.5rem;
  font-family: 'Poppins', sans-serif;
  font-size: 2rem;
  color: var(--color-dark);
}

/* Testimonials grid for card style reviews */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}
.testimonial-card {
  background-color: #fff;
  border-radius: var(--radius);
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  padding: 2rem;
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.08), 0 0 15px var(--color-secondary), 0 0 30px var(--color-secondary);
}
.testimonial-card .stars {
  color: var(--color-secondary);
  margin-bottom: 0.5rem;
  font-size: 1rem;
}
.testimonial-card p {
  /* Display testimonial text in italics with custom quote marks */
  font-style: italic;
  margin-bottom: 0.5rem;
  color: var(--color-text);
  position: relative;
  line-height: 1.5;
}

/* Decorative quotation marks on testimonials */
.testimonial-card p::before,
.testimonial-card p::after {
  position: absolute;
  font-family: Georgia, serif;
  font-size: 2rem;
  color: var(--color-secondary);
  opacity: 0.4;
}
.testimonial-card p::before {
  content: "\201C"; /* Left double quotation mark */
  top: -0.6rem;
  left: -0.6rem;
}
.testimonial-card p::after {
  content: "\201D"; /* Right double quotation mark */
  bottom: -0.6rem;
  right: -0.6rem;
}
.testimonial-card .author {
  font-weight: 600;
  color: var(--color-dark);
  margin-top: auto;
}

/* Blogs Section */
.blogs-section {
  background-color: var(--color-muted);
  text-align: center;
}
.blogs-section h2 {
  margin-bottom: 2.5rem;
  font-family: 'Poppins', sans-serif;
  font-size: 2rem;
  color: var(--color-dark);
}
.blogs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}
.blog-card {
  background-color: #fff;
  border-radius: var(--radius);
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.08);
}
.blog-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}
.blog-card-content {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.blog-card-content h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--color-dark);
}
.blog-card-content p {
  flex-grow: 1;
  font-size: 0.9rem;
  color: var(--color-text);
  margin-bottom: 1rem;
}
.blog-card-content a {
  align-self: flex-start;
  font-weight: 600;
  color: var(--color-primary);
  transition: color var(--transition-speed);
}
.blog-card-content a:hover {
  color: var(--color-secondary);
}

/*
 * Custom grid helpers for service sections
 *
 * Many of the service pages contain a variable number of process cards.  To
 * ensure these cards always occupy equal space and wrap cleanly, two
 * utility classes are provided.  Use `grid-4` when a container has
 * four cards – this creates a single row of four equal‑width columns on
 * larger screens.  Use `grid-6` when a container has six cards – this
 * creates a two‑row, three‑column layout on wider viewports.  Both
 * classes fall back to a single column on small screens via the
 * responsive rule defined below.  These utilities should be added in
 * addition to any existing grid class (e.g. `.services-grid` or
 * `.benefits-grid`).
 */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.grid-6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* Collapse custom grids into a single column on small screens */
@media (max-width: 768px) {
  .grid-4,
  .grid-6 {
    grid-template-columns: 1fr;
  }
}

/*
 * Blog post content cards
 *
 * To enhance readability and introduce subtle interactivity within
 * individual blog posts, wrap sections of content or key takeaways in
 * elements bearing the `.post-card` class.  These cards use a muted
 * background, generous padding and rounded corners.  A soft shadow
 * differentiates them from the page background, and a slight upward
 * translation on hover provides a tactile feel.  Use lists inside
 * these cards to present bullet‑style summaries or tips.
 */
.post-card {
  background-color: var(--color-muted);
  padding: 2rem;
  border-radius: var(--radius);
  margin-bottom: 2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}
.post-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}
.post-card h2,
.post-card h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--color-dark);
}
.post-card p,
.post-card li {
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.6;
}
.post-card ul {
  /* Use disc bullets within post-card lists for clear visual emphasis */
  list-style: disc;
  padding-left: 1.5rem;
  margin-top: 1rem;
}
.post-card ul li {
  margin-bottom: 0.5rem;
}
.testimonial-slider {
  overflow: hidden;
  position: relative;
}
.slides {
  display: flex;
  transition: transform 0.6s ease-in-out;
}
.testimonial {
  min-width: 100%;
  padding: 2rem;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: var(--radius);
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
.testimonial .stars {
  color: var(--color-secondary);
  margin-bottom: 0.5rem;
  font-size: 1rem;
}
.testimonial p {
  font-style: italic;
  margin-bottom: 0.5rem;
}
.testimonial .author {
  font-weight: 600;
  color: var(--color-dark);
}
.slider-controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}
.slider-controls button {
  background-color: var(--color-secondary);
  color: var(--color-dark);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--transition-speed), transform var(--transition-speed);
}
.slider-controls button:hover {
  background-color: var(--color-primary);
  color: #fff;
  transform: translateY(-2px);
}

/* CTA Section */
.cta-section {
  background-color: var(--color-primary);
  color: #fff;
  text-align: center;
  padding: 4rem 0;
}
.cta-section h2 {
  margin-bottom: 1rem;
  font-family: 'Poppins', sans-serif;
  font-size: 2rem;
}
.cta-section p {
  margin-bottom: 2rem;
  max-width: 600px;
  margin-inline: auto;
}

/* Areas Section */
.areas-section {
  background-color: var(--color-muted);
  text-align: center;
}
.areas-section h2 {
  margin-bottom: 1rem;
  font-family: 'Poppins', sans-serif;
  font-size: 2rem;
  color: var(--color-dark);
}
.areas-section p {
  margin-bottom: 1rem;
}
.areas-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

/* Area cards styled with neon effect */
.area-card {
  background-color: #fff;
  padding: 1rem;
  border-radius: var(--radius);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-dark);
  transition: transform var(--transition-speed), box-shadow var(--transition-speed), color var(--transition-speed);
}
.area-card:hover {
  transform: translateY(-3px);
  /* intensify neon glow on hover */
  box-shadow: 0 4px 8px rgba(0,0,0,0.08), 0 0 15px var(--color-secondary), 0 0 30px var(--color-secondary), 0 0 45px var(--color-secondary);
  color: var(--color-primary);
}
.map-container {
  margin-top: 1rem;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

/* FAQ Section */
.faq-section {
  background-color: var(--color-bg);
}
.faq-section h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-family: 'Poppins', sans-serif;
  font-size: 2rem;
  color: var(--color-dark);
}
.faq-item {
  border-bottom: 1px solid #d9e2ec;
  margin-bottom: 1rem;
}
.faq-question {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 1rem 0;
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.faq-question span {
  transition: transform var(--transition-speed);
}
.faq-item.open .faq-question span {
  transform: rotate(45deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-speed) ease;
  padding-right: 1rem;
  color: var(--color-text);
}
.faq-item.open .faq-answer {
  max-height: 400px;
  margin-bottom: 1rem;
}

/* Driving directions section */
.driving-section {
  background-color: var(--color-bg);
}
.driving-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  align-items: center;
}
.driving-grid h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.6rem;
  margin-bottom: 1rem;
  color: var(--color-dark);
}
.driving-grid p {
  margin-bottom: 1rem;
}
.driving-grid iframe {
  width: 100%;
  height: 300px;
  border-radius: var(--radius);
  border: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

/* Contact Section */
.contact-section {
  background-color: var(--color-muted);
}
.contact-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  align-items: flex-start;
}
.business-hours h2,
.contact-form-wrapper h2 {
  font-family: 'Poppins', sans-serif;
  margin-bottom: 1rem;
  color: var(--color-dark);
}
.hours-list li {
  margin-bottom: 0.5rem;
  color: var(--color-dark);
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.form-group {
  display: flex;
  flex-direction: column;
}
.form-group label {
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
  color: var(--color-dark);
}
.form-group input,
.form-group textarea {
  padding: 0.6rem;
  border: 1px solid #c8d3e1;
  border-radius: var(--radius);
  background-color: #fff;
  color: var(--color-text);
  font-family: inherit;
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(0,86,145,0.2);
}

/* Footer */
.site-footer {
  background-color: var(--color-dark);
  color: #f0f4f8;
  padding: 3rem 0 1rem;
}
.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}
.footer-col h3,
.footer-col h4 {
  margin-bottom: 1rem;
  font-family: 'Poppins', sans-serif;
  color: #fff;
}
.footer-col p,
.footer-col li {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
.footer-col a {
  color: var(--color-secondary);
  transition: color var(--transition-speed);
}
.footer-col a:hover {
  color: #fff;
}
.footer-bottom {
  text-align: center;
  font-size: 0.8rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1rem;
}

/* ------------------------------------------------------------------ */
/* Responsive refinements and additional tweaks                     */
/* These rules override earlier definitions to improve the mobile   */
/* experience, refine call‑to‑action styling and fix image layout   */
/* issues such as stretched photos or stacked images.               */

/* Clean up the default call‑now button. Reduce glow/shadow to avoid
   a spread appearance and sharpen the edge. */
.call-now {
  /* Remove external glow entirely; rely on background colour and subtle border only */
  box-shadow: none;
}

/* Additional styles for small screens */
@media (max-width: 768px) {
  /* Shorten the logo text and space out the header items. */
  .header-container {
    gap: 0.5rem;
  }
  .logo span {
    font-size: 1.4rem;
    line-height: 1.1;
  }
  /* Slim down the call now button on mobile to prevent overflow. */
  .call-now {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    margin-left: 0;
    margin-top: 0.5rem;
  }
  /* Stack hero and about sections vertically and add spacing between
     images so they don’t appear back‑to‑back. */
  .hero-container,
  .about-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  /* Ensure section images maintain aspect ratio and fill their
     containers without distortion. */
  .hero-image img,
  .about-image img {
    height: auto;
    object-fit: cover;
  }

  /* Show the mobile hero/about images and hide the desktop image containers. */
  .hero-img-mobile,
  .about-img-mobile {
    display: block;
  }
  .hero-image,
  .about-image {
    display: none;
  }

  /*
   * Header layout adjustments for mobile
   *
   * The default header uses flexbox to distribute the logo, call button
   * and navigation.  On small screens this often causes the call button
   * and menu toggle to bunch awkwardly, with the toggle appearing in
   * the middle of the row.  To remedy this, switch the header to a
   * three‑column grid: the logo occupies the first column, the call
   * button sits in the centre column, and the navigation (including
   * hamburger toggle) is pushed to the far right.  Grid allows the
   * button to remain centred regardless of content width.  The
   * individual elements are placed explicitly using grid lines.
   */
  .header-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .header-container .logo {
    grid-column: 1;
  }
  .header-container .call-now-mobile {
    grid-column: 2;
    justify-self: center;
  }
  .header-container .primary-nav {
    grid-column: 3;
    justify-self: end;
  }
  /* Remove any auto margin on the nav toggle so it sits flush on the
     right edge of its grid cell. */
  .primary-nav .nav-toggle {
    margin-left: 0;
  }

  /* Align the items in the mobile dropdown to the right to match the
     toggle position.  Flexbox properties ensure links stack neatly. */
  .nav-list {
    align-items: flex-end;
    text-align: right;
    /* Provide a wider container for the dropdown so longer menu items
       don’t wrap awkwardly.  A minimum width prevents the list from
       becoming too narrow when the viewport is very small. */
    min-width: 180px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* Collapse the benefits grid to a single column on small screens to
     prevent card overcrowding.  Users can scroll vertically to view all
     the reasons to choose BellTop without side‑scrolling. */
  .benefits-grid {
    grid-template-columns: 1fr;
  }

  /* Shift the nav toggle to the far right on mobile so it sits after
     the call button. Using margin-left:auto pushes it to the end of
     the flex container. */
  .primary-nav .nav-toggle {
    margin-left: auto;
  }
}

/* Blog hero image styling */
.blog-hero img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
  margin-bottom: 2rem;
}