/* ========== styles.css ========== */
/* This is the main stylesheet for the Pete's Commercial Painting website */
/* It controls all the visual aspects like colors, spacing, and layout */

/* === Color Palette === */
/* These are the main colors used throughout the site */
/* We define them as variables so they can be easily changed in one place */
:root {
  --color-primary: #1A3E5F;  /* Dark blue used for headers and main areas */
  --color-accent:  #E57240;  /* Orange used for buttons and highlights */
  --color-bg:      #F2F2F2;  /* Light gray background */
  --color-text:    #2B2B2B;  /* Dark gray text for good readability */
  --color-border:  #DADADA;  /* Light gray for borders and dividers */
}

/* === Fonts === */
/* Setting up the basic font styles for the whole website */
body {
  font-family: 'Inter', sans-serif;  /* Modern, clean font for all general text */
  background: var(--color-bg);       /* Light gray background for the whole site */
  color: var(--color-text);          /* Dark text for good contrast and readability */
  overflow-x: hidden;                /* Prevent horizontal scrolling on mobile */
}

/* Make all headings use the Oswald font and blue color */
h1, h2, h3 {
  font-family: 'Oswald', sans-serif;  /* Bold, distinctive font for headings */
  color: var(--color-primary);        /* Blue color for all headings */
}

/* 1. Setup reusable values */
/* These are additional variables we can use throughout the site */
:root {
  /* Font for big titles */
  --font-heading: 'Montserrat', sans-serif;  /* Clean, professional font for headings */
  /* Font for normal text */
  --font-body: 'Mulish', sans-serif;         /* Easy-to-read font for paragraphs */
  /* Blue color for links/buttons */
  --color-primary: #1a4f8b;                  /* Blue color for important elements */
  /* Orange color when you hover */
  --color-accent: #e57a44;                   /* Orange for interactive elements */
  /* Standard spacing unit */
  --spacer: 1rem;                           /* Smaller spacing for mobile first */
}

/* 2. Reset default spacing & box sizing */
/* This makes sure all elements behave consistently across browsers */
* {
  box-sizing: border-box; /* Make width/height include padding and border */
  margin: 0;              /* Remove extra space around elements */
  padding: 0;             /* Remove extra space inside elements */
}

/* 3. Page-wide text settings */
/* Basic text styling that applies to the whole site */
body {
  font-family: var(--font-body);  /* Use our chosen body font */
  line-height: 1.6;               /* Space lines out so they're easy to read */
  color: #333;                    /* Dark gray text for good contrast */
}

/* Fix for smooth scrolling and proper section anchoring */
/* JavaScript now handles all smooth scrolling and offset positioning */
/* CSS scroll-padding disabled to prevent conflicts with JavaScript */

/* 4. Container to center content */
/* This class is used to keep content centered and at a reasonable width */
.container {
  width: 100%;               /* Full width on mobile */
  margin: 0 auto;            /* Center on the page */
  padding: 0 var(--spacer);  /* Space on left & right */
}

/* 5. Header bar styling */
/* The top navigation bar that appears on every page */
.site-header {
  background: var(--color-primary);                    /* Blue background */
  color: #fff;                                         /* White text */
  box-shadow: 0 2px 8px rgba(26,62,95,0.06);          /* Subtle shadow for depth */
  position: sticky;                                    /* Stick to top when scrolling */
  top: 0;                                              /* Align at very top */
  z-index: 1000;                                       /* Sit above other things */
  border-bottom: 3px solid var(--color-primary);       /* Adding blue border */
  transition: all 0.3s ease-in-out;                    /* Smooth transition for color changes */
  width: 100%;                                         /* Full width */
}

/* Header styling when scrolled */
/* Changes appearance of the header when you scroll down the page */
.site-header.scrolled {
  background: var(--color-primary);                    /* Keep blue background */
  color: white;                                        /* Keep white text */
  border-bottom: 3px solid var(--color-accent);        /* Change to orange border */
}

/* 6. Layout inside header */
/* Controls how elements are arranged within the header bar */
.site-header .container {
  display: flex;                /* Put logo and navigation side-by-side */
  flex-wrap: wrap;              /* Allow elements to wrap on mobile */
  align-items: center;          /* Center elements vertically */
  justify-content: space-between; /* Push logo left, navigation right */
  padding: 0.75rem 0;          /* Reduced padding to fix extra space */
}

/* 7. Logo area */
/* Styles for the company logo and text */
.logo {
  display: flex;          /* Image + text side by side */
  align-items: center;    /* Center logo and text vertically */
  text-decoration: none;  /* No underline on the logo link */
  color: inherit;         /* Use same color as parent element */
}

/* Style for the logo image */
.logo img {
  height: 40px;           /* Make the logo picture smaller on mobile */
  margin-right: 0.75rem;  /* Space between image and text */
}

/* Style for the text next to the logo */
.logo h1 {
  font-family: var(--font-heading); /* Use our title font */
  font-size: 1.25rem;              /* Smaller on mobile */
}

/* Specific styling for the logo image */
.logo-img {
  width: 140px !important;           /* Smaller width for mobile */
  height: 70px !important;           /* Smaller height for mobile */
  object-fit: contain;               /* Prevents distortion of the image */
  display: block;                    /* Makes the image a block element */
}

/* Optional: vertically center logo in nav bar */
/* Additional centering for the logo */
.logo {
  display: flex;
  align-items: center;
}

/* 8. Navigation menu */
/* Mobile-first menu styling */
.site-nav {
  width: 100%;                /* Full width on mobile */
  display: none;              /* Hidden by default */
  margin-top: 1rem;          /* Space between logo and menu */
  overflow: hidden;          /* Prevent overflow */
  transition: max-height 0.3s ease; /* Smooth open/close transition */
}

/* When the mobile menu is active (open) */
.site-nav.active {
  display: block;            /* Show the menu when active */
}

/* Navigation menu list */
.site-nav ul {
  display: flex;             /* Flex container */
  flex-direction: column;    /* Stack vertically on mobile */
  list-style: none;          /* Remove bullet points */
  gap: 0;                    /* No gap between items on mobile */
}

/* Navigation menu items */
.site-nav li {
  width: 100%;              /* Full width for tap target */
  text-align: center;       /* Center text on mobile */
}

/* Style for the individual navigation links */
.site-nav a {
  text-decoration: none;        /* Remove underline from links */
  font-weight: 600;             /* Make text semi-bold */
  color: #fff;                  /* White text color */
  font-size: 1.1rem;            /* Slightly smaller for mobile */
  padding: 0.75rem 1rem;        /* Good tap target size */
  display: block;               /* Make full width clickable */
  transition: color 0.2s;       /* Smooth color change on hover */
  border-bottom: 1px solid rgba(255,255,255,0.1); /* Subtle separators */
}

/* Navigation links change color on hover */
.site-nav a:hover {
  color: var(--color-accent);   /* Change to orange when mouse hovers */
  background-color: rgba(255,255,255,0.05); /* Subtle highlight */
}

/* Navigation styling when scrolled */
/* Keeps navigation links white even when page is scrolled */
.site-header.scrolled .site-nav a {
  color: white;                /* Keep white text when scrolled */
}

/* Hover effect for navigation links when scrolled */
.site-header.scrolled .site-nav a:hover {
  color: var(--color-accent);   /* Change to orange on hover even when scrolled */
}

/* Hamburger menu button - visible on mobile */
.menu-toggle {
  display: block;               /* Always show on mobile */
  background: transparent;      /* Transparent background */
  border: 2px solid white;      /* White border for visibility */
  color: white;                 /* White color */
  font-size: 1.5rem;            /* Large enough to tap */
  padding: 0.25rem 0.5rem;      /* Comfortable tap target */
  cursor: pointer;              /* Pointer cursor on hover */
  border-radius: 4px;           /* Rounded corners */
  margin-right: 0.5rem;         /* Add some margin */
  z-index: 1001;                /* Stay above other elements */
}

/* 9. Button styles */
/* Basic shared styles for all buttons */
.btn {
  display: inline-block;            /* Makes buttons behave like a block but inline */
  padding: 0.5rem 1rem;             /* Space inside the button */
  font-family: var(--font-heading); /* Use title font for buttons */
  text-decoration: none;            /* No underline on button links */
  border-radius: 4px;               /* Slightly rounded corners */
  transition: background 0.3s;      /* Smooth color fade when hovering */
  text-align: center;               /* Center text for mobile */
}

/* Primary (orange) button style */
.btn-primary {
  background: var(--color-accent);  /* Orange background */
  color: #fff;                      /* White text */
  border: none;                     /* No border */
  padding: 0.75rem 1.5rem;          /* Smaller padding on mobile */
  border-radius: 4px;               /* Rounded corners */
  font-weight: 600;                 /* Semi-bold text */
  font-size: 1rem;                  /* Smaller text on mobile */
  cursor: pointer;                  /* Show hand cursor on hover */
  transition: background 0.2s;      /* Smooth color transition */
}

/* Button hover effect */
.btn-primary:hover {
  background: #d86a34;              /* Darker orange on hover */
}

/* Secondary (outline) button style */
.btn-secondary {
  background: transparent;          /* Transparent background */
  color: var(--color-primary);      /* Blue text */
  border: 2px solid var(--color-primary); /* Blue border */
  padding: 0.75rem 1.5rem;          /* Smaller padding on mobile */
  font-weight: 600;                 /* Semi-bold text */
  font-size: 1rem;                  /* Smaller text on mobile */
}

/* Secondary button hover effect */
.btn-secondary:hover {
  background: rgba(26, 79, 139, 0.1); /* Light blue background on hover */
}

/* Large button variation */
.btn-large {
  font-size: 1rem;                  /* Same size on mobile */
  padding: 0.75rem 1.5rem;          /* Same padding on mobile */
}

/* Top CTA button in header - hide on mobile to save space */
.site-header .btn-primary {
  display: none;                    /* Hide on mobile */
}

/* 10. Hero section */
/* The large banner section at the top of the page */
.hero {
  position: relative;               /* For positioning overlay */
  min-height: 50vh;                 /* Smaller height on mobile */
  display: flex;                    /* Use flexbox for centering */
  align-items: center;              /* Center content vertically */
  padding: 3rem 0;                  /* Padding top and bottom */
  color: #fff;                      /* White text */
  background: var(--color-primary); /* Blue background */
  text-align: center;               /* Center text on mobile */
  position: relative;               /* For background overlay */
  background-image: url('images/hero-bg.jpg'); /* Background image */
  background-size: cover;           /* Cover the entire section */
  background-position: center;      /* Center the background */
}

/* Dark overlay on hero to ensure text is readable over any background image */
.hero::before {
  content: '';                     /* Required for pseudo-elements */
  position: absolute;              /* Position relative to hero */
  top: 0;                          /* Start at top */
  left: 0;                         /* Start at left */
  width: 100%;                     /* Full width */
  height: 100%;                    /* Full height */
  background: rgba(0, 0, 0, 0.5);  /* Semi-transparent black overlay */
}

/* Container inside hero - positioning above the overlay */
.hero-content {
  position: relative;              /* Position above overlay */
  z-index: 1;                      /* Above the overlay */
  max-width: 800px;                /* Maximum width on desktop */
  margin: 0 auto;                  /* Center horizontally */
  padding: 0 1rem;                 /* Padding on the sides */
}

/* Main heading in hero section */
.hero h1 {
  font-size: 2rem;                 /* Smaller size on mobile */
  margin-bottom: 1rem;             /* Space below */
  color: #fff;                     /* White text */
}

/* Subtitle in hero section */
.hero-subtitle {
  font-size: 1.1rem;               /* Smaller size on mobile */
  margin-bottom: 2rem;             /* Space below */
  opacity: 0.9;                    /* Slightly transparent */
}

/* Call to action buttons in hero */
.hero-cta {
  display: flex;                   /* Row of buttons */
  flex-direction: column;          /* Stack buttons on mobile */
  gap: 1rem;                       /* Space between buttons */
  justify-content: center;         /* Center horizontally */
  margin-bottom: 2rem;             /* Space below */
}

/* Stars/review badge in hero */
.hero-badge {
  background: rgba(255, 255, 255, 0.1); /* Semi-transparent white background */
  display: inline-block;           /* Inline block element */
  padding: 0.5rem 1rem;            /* Space inside */
  border-radius: 4px;              /* Rounded corners */
  font-size: 0.9rem;               /* Smaller text */
}

/* Star rating in badge */
.hero-badge span {
  color: var(--color-accent);      /* Orange stars */
  margin-right: 0.5rem;            /* Space to the right */
}

/* ===== SECTION STYLING ===== */
/* Common styles for all content sections */

/* Basic section styling */
section {
  padding: 3rem 0;                 /* Smaller padding on mobile */
}

/* Section headings */
section h2 {
  text-align: center;              /* Center section headings */
  font-size: 2rem;                 /* Smaller on mobile */
  margin-bottom: 1.5rem;           /* Space below */
}

/* Section intro paragraphs */
section > .container > p {
  text-align: center;              /* Center intro text */
  max-width: 700px;                /* Maximum width */
  margin: 0 auto 2rem;             /* Center and add space below */
  font-size: 1.1rem;               /* Slightly larger text */
}

/* ===== ABOUT SECTION ===== */
.about-section {
  padding: 3rem 0;                 /* Smaller padding on mobile */
  background: #fff;                /* White background */
}

/* Layout for about content */
.about-content {
  display: flex;                   /* Flex container */
  flex-direction: column;          /* Stack on mobile */
  align-items: center;             /* Center items */
  gap: 2rem;                       /* Space between items */
}

/* Text column in about section */
.about-text {
  max-width: 100%;                 /* Full width on mobile */
}

/* Subheading in about section */
.about-text h3 {
  font-size: 1.5rem;               /* Smaller on mobile */
  margin-bottom: 1rem;             /* Space below */
}

/* Image in about section */
.about-image img {
  max-width: 100%;                 /* Full width on mobile */
  height: auto;                    /* Maintain aspect ratio */
  border-radius: 8px;              /* Rounded corners */
}

/* ===== SERVICES SECTION ===== */
/* Section with service cards */
.services-section {
  padding: 3rem 0 0;               /* No bottom padding (separator image) */
  background: #fff;                /* White background */
}

/* Grid of service cards */
.services-grid {
  display: flex;                   /* Flex container */
  flex-direction: column;          /* Stack on mobile */
  gap: 2rem;                       /* Space between cards */
  align-items: center;             /* Center cards */
  margin-bottom: 3rem;             /* Space below grid */
}

/* Individual service card */
.service-card {
  background: #fff;                /* White background */
  border-radius: 8px;              /* Rounded corners */
  padding: 1.5rem;                 /* Space inside */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  max-width: 100%;                 /* Full width on mobile */
  transform: translateZ(0);        /* For 3D effect */
  transition: transform 0.3s, box-shadow 0.3s; /* Smooth transitions */
  display: flex;                   /* Flex container */
  flex-direction: column;          /* Stack content */
  align-items: center;             /* Center content */
}

/* Service card hover effect */
.service-card:hover {
  transform: translateY(-5px);     /* Lift up slightly */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* Larger shadow */
}

/* Container for service icons */
.icon-container {
  width: 80px;                     /* Fixed width */
  height: 80px;                    /* Fixed height */
  margin-bottom: 1rem;             /* Space below */
  display: flex;                   /* Flex container */
  align-items: center;             /* Center vertically */
  justify-content: center;         /* Center horizontally */
}

/* Service icon images */
.service-card img {
  max-width: 100%;                 /* Responsive image */
  height: auto;                    /* Maintain aspect ratio */
}

/* Service card heading */
.service-card h3 {
  margin: 1rem 0;                  /* Space around */
  text-align: center;              /* Center text */
  font-size: 1.25rem;              /* Smaller on mobile */
}

/* Service card paragraph */
.service-card p {
  text-align: center;              /* Center text */
}

/* Full-width separator image */
.services-separator {
  width: 100%;                     /* Full width */
  overflow: hidden;                /* Hide overflow */
  height: 150px;                   /* Fixed height on mobile */
  position: relative;              /* For positioning */
}

/* The separator image itself */
.separator-image {
  width: 100%;                     /* Full width */
  height: 100%;                    /* Full height */
  object-fit: cover;               /* Cover the container */
  display: block;                  /* Block element */
}

/* ===== PROJECTS SECTION ===== */
/* Section showcasing completed projects */
.projects-section {
  padding: 3rem 0;                 /* Smaller padding on mobile */
  background: var(--color-bg);     /* Light gray background */
}

/* Featured project layout */
.project-layout {
  display: flex;                   /* Flex container */
  flex-direction: column;          /* Stack on mobile */
  gap: 2rem;                       /* Space between elements */
  align-items: center;             /* Center on mobile */
  margin-bottom: 3rem;             /* Space below */
}

/* Project image container */
.project-image {
  width: 100%;                     /* Full width on mobile */
}

/* Project image */
.project-image img {
  width: 100%;                     /* Full width */
  height: auto;                    /* Maintain aspect ratio */
  border-radius: 8px;              /* Rounded corners */
}

/* Project info text */
.project-info {
  width: 100%;                     /* Full width on mobile */
}

/* Project heading */
.project-info h3 {
  margin-bottom: 1rem;             /* Space below */
  font-size: 1.5rem;               /* Smaller on mobile */
}

/* Project grid for multiple projects */
.projects-grid {
  display: flex;                   /* Flex container */
  flex-direction: column;          /* Stack on mobile */
  gap: 2rem;                       /* Space between cards */
  align-items: center;             /* Center cards */
}

/* Individual project card */
.project-card {
  background: #fff;                /* White background */
  border-radius: 8px;              /* Rounded corners */
  overflow: hidden;                /* Hide overflow */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  width: 100%;                     /* Full width on mobile */
}

/* Project card image */
.project-card img {
  width: 100%;                     /* Full width */
  height: 150px;                   /* Fixed height */
  object-fit: cover;               /* Cover the space */
}

/* Text area in project card */
.project-card h3,
.project-card p {
  padding: 0 1rem;                 /* Padding on sides */
}

/* Project card heading */
.project-card h3 {
  margin: 1rem 0 0.5rem;           /* Margins */
  font-size: 1.25rem;              /* Smaller on mobile */
}

/* Project card paragraph */
.project-card p {
  margin-bottom: 1rem;             /* Space below */
}

/* ===== WHY US SECTION ===== */
/* Section highlighting company advantages */
.why-us-section {
  padding: 3rem 0;                 /* Smaller padding on mobile */
  background: #fff;                /* White background */
}

/* Grid for Why Us cards */
.why-us-grid {
  display: grid;                   /* CSS Grid layout */
  grid-template-columns: 1fr;      /* One column on mobile */
  gap: 1.5rem;                     /* Space between cards */
}

/* Individual Why Us card */
.why-us-card {
  background: var(--color-bg);     /* Light gray background */
  padding: 1.5rem;                 /* Space inside */
  border-radius: 8px;              /* Rounded corners */
  text-align: center;              /* Center text */
}

/* Icon in Why Us card */
.why-us-icon {
  font-size: 2rem;                 /* Large icon */
  margin-bottom: 0.75rem;          /* Space below */
}

/* Heading in Why Us card */
.why-us-card h3 {
  margin-bottom: 0.75rem;          /* Space below */
  font-size: 1.25rem;              /* Smaller on mobile */
}

/* ===== TESTIMONIALS SECTION ===== */
/* Section with customer quotes */
.testimonials-section {
  padding: 3rem 0;                 /* Smaller padding on mobile */
  background: var(--color-primary); /* Blue background */
  color: #fff;                     /* White text */
}

/* Section heading */
.testimonials-section h2 {
  color: #fff;                     /* White heading */
}

/* Individual testimonial card */
.testimonial-card {
  max-width: 800px;                /* Maximum width */
  margin: 0 auto;                  /* Center horizontally */
  text-align: center;              /* Center text */
  padding: 1.5rem;                 /* Space inside card */
  background: rgba(255, 255, 255, 0.1); /* Semi-transparent white */
  border-radius: 8px;              /* Rounded corners */
}

/* Star rating display */
.testimonial-rating {
  color: var(--color-accent);      /* Orange color for stars */
  font-size: 1.25rem;              /* Smaller on mobile */
  margin-bottom: 1rem;             /* Space below */
}

/* Testimonial quote text */
blockquote {
  font-size: 1.1rem;               /* Smaller on mobile */
  font-style: italic;              /* Italic text */
  margin-bottom: 1rem;             /* Space below */
}

/* Customer name/source */
cite {
  color: #fff;                     /* White text */
  font-weight: 500;                /* Semi-bold */
}

/* ===== CONTACT SECTION ===== */
/* Section with contact info and form */
.contact-section {
  padding: 3rem 0;                 /* Smaller padding on mobile */
  background: var(--color-primary); /* Blue background */
  color: #fff;                     /* White text */
}

/* Contact section heading */
.contact-section h2 {
  color: #fff;                     /* White heading */
}

/* Layout for contact info and form */
.contact-content {
  display: flex;                   /* Flex container */
  flex-direction: column;          /* Stack on mobile */
  gap: 2rem;                       /* Space between elements */
}

/* Contact information container */
.contact-info {
  width: 100%;                     /* Full width on mobile */
}

/* Headings in contact section */
.contact-info h3,
.contact-form-container h3 {
  color: #fff;                     /* White headings */
  margin-bottom: 1rem;             /* Space below */
  font-size: 1.25rem;              /* Smaller on mobile */
}

/* List of service areas */
.service-areas {
  list-style: none;                /* No bullet points */
  margin: 1rem 0 1.5rem;           /* Margins */
  display: grid;                   /* CSS Grid layout */
  grid-template-columns: 1fr;      /* One column on mobile */
  gap: 0.5rem;                     /* Space between items */
}

/* Individual service area item */
.service-areas li {
  position: relative;              /* For bullet positioning */
  padding-left: 1.2rem;            /* Space for bullet */
}

/* Custom bullet points */
.service-areas li::before {
  content: "•";                    /* Bullet character */
  color: var(--color-accent);      /* Orange bullet */
  font-size: 1.2rem;               /* Large bullet */
  position: absolute;              /* Position independently */
  left: 0;                         /* Align to left */
  top: -0.2rem;                    /* Vertical alignment */
}

/* Contact details container */
.contact-details {
  font-size: 1rem;                 /* Smaller on mobile */
  background: rgba(255, 255, 255, 0.1); /* Semi-transparent white */
  padding: 1.5rem;                 /* Space inside */
  border-radius: 8px;              /* Rounded corners */
  margin-top: 1.5rem;              /* Space above */
}

/* Message below contact details */
.contact-tagline {
  margin-top: 1rem;                /* Space above */
  font-style: italic;              /* Italic text */
  opacity: 0.9;                    /* Slightly transparent */
}

/* Contact form container */
.contact-form-container {
  background: rgba(255, 255, 255, 0.1); /* Semi-transparent on mobile */
  border-radius: 8px;              /* Rounded corners */
  padding: 1.5rem;                 /* Space inside */
  width: 100%;                     /* Full width on mobile */
}

/* Form heading (on white background) */
.contact-form-container h3 {
  color: #fff;                     /* White text on mobile */
}

/* Form group - container for input and label */
.form-group {
  margin-bottom: 1rem;             /* Space below */
  width: 100%;                     /* Full width */
}

/* Make some form groups full width */
.form-group.full-width {
  grid-column: 1 / -1;             /* Full width in the grid */
}

/* Form labels */
.contact-form label {
  display: block;                  /* Block element */
  margin-bottom: 0.5rem;           /* Space below */
  font-weight: 500;                /* Semi-bold */
}

/* Text inputs, email inputs, and select dropdowns */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  width: 100%;                     /* Full width */
  padding: 0.75rem;                /* Space inside */
  border: 1px solid #ddd;          /* Light border */
  border-radius: 4px;              /* Rounded corners */
  background: #fff;                /* White background */
  font-family: inherit;            /* Use same font as page */
  font-size: 1rem;                 /* Normal size */
}

/* Textarea (multi-line input) */
.contact-form textarea {
  resize: vertical;                /* Only allow vertical resizing */
  min-height: 120px;               /* Minimum height */
}

/* Submit button in form */
.contact-form button[type="submit"] {
  margin-top: 1rem;                /* Space above */
  width: 100%;                     /* Full width on mobile */
}

/* ===== FOOTER ===== */
/* The bottom section of every page */
.site-footer {
  background: var(--color-primary); /* Blue background */
  color: #fff;                     /* White text */
  padding: 1.5rem 0;               /* Space inside */
  text-align: center;              /* Center text */
}

/* Paragraph in footer */
.site-footer p {
  opacity: 0.8;                    /* Slightly transparent */
  font-size: 0.9rem;               /* Smaller text */
}

/* ========== MEDIA QUERIES FOR LARGER SCREENS ========== */
/* These styles will override the mobile styles when the screen is wider */

/* Small tablets and up (576px and up) */
@media (min-width: 576px) {
  :root {
    --spacer: 1.25rem;            /* Slightly larger spacing on tablets */
  }
  
  .hero h1 {
    font-size: 2.25rem;           /* Larger heading on tablets */
  }
  
  .service-areas {
    grid-template-columns: 1fr 1fr; /* Two columns on tablets */
  }
  
  .hero-cta {
    flex-direction: row;           /* Buttons side by side */
    justify-content: center;       /* Center the buttons */
  }
}

/* Medium tablets and up (768px and up) */
@media (min-width: 768px) {
  /* CSS scroll-padding disabled - JavaScript handles all scroll positioning */
  
  :root {
    --spacer: 1.5rem;              /* More spacing on larger screens */
  }
  
  .container {
    max-width: 720px;              /* Limited width on tablets */
  }
  
  .hero {
    min-height: 60vh;              /* Taller hero on tablets */
    padding: 4rem 0;               /* More padding */
  }
  
  .hero h1 {
    font-size: 2.75rem;            /* Larger heading on tablets */
  }
  
  .hero-subtitle {
    font-size: 1.25rem;            /* Larger subtitle */
  }
  
  section {
    padding: 4rem 0;               /* More section padding */
  }
  
  section h2 {
    font-size: 2.25rem;            /* Larger section headings */
  }
  
  .about-content {
    flex-direction: row;           /* Side by side on tablets */
    align-items: center;           /* Center vertically */
  }
  
  .about-text {
    flex: 1;                       /* Equal width */
    padding-right: 2rem;           /* Space between text and image */
  }
  
  .about-image {
    flex: 1;                       /* Equal width */
  }
  
  .services-grid {
    flex-direction: row;           /* Side by side cards */
    flex-wrap: wrap;               /* Allow wrapping */
    justify-content: center;       /* Center cards */
  }
  
  .service-card {
    width: calc(50% - 1rem);       /* Two columns with gap */
    max-width: 350px;              /* Maximum width */
  }
  
  .services-separator {
    height: 200px;                 /* Taller separator */
  }
  
  .projects-grid {
    flex-direction: row;           /* Side by side */
    flex-wrap: wrap;               /* Allow wrapping */
    justify-content: center;       /* Center cards */
  }
  
  .project-card {
    width: calc(50% - 1rem);       /* Two columns with gap */
  }
  
  .why-us-grid {
    grid-template-columns: 1fr 1fr; /* Two columns */
  }
  
  .contact-form-container {
    background: white;             /* White background on tablets+ */
    padding: 2rem;                 /* More padding */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Shadow for depth */
  }
  
  .contact-form-container h3 {
    color: var(--color-primary);   /* Blue text on white background */
  }
  
  /* Show desktop header navigation */
  .site-header .container {
    flex-wrap: nowrap;             /* Don't wrap on tablets+ */
  }
  
  .menu-toggle {
    display: none;                 /* Hide hamburger on tablets+ */
  }
  
  .site-nav {
    display: block;                /* Always show nav menu */
    width: auto;                   /* Auto width */
    margin-top: 0;                 /* No margin */
  }
  
  .site-nav ul {
    flex-direction: row;           /* Horizontal menu */
    gap: 1.5rem;                   /* Space between items */
  }
  
  .site-nav li {
    width: auto;                   /* Auto width */
    text-align: left;              /* Left aligned text */
  }
  
  .site-nav a {
    padding: 0.5rem;               /* Less padding */
    display: inline-block;         /* Inline block */
    border-bottom: none;           /* No bottom border */
  }
}

/* Large tablets and small laptops (992px and up) */
@media (min-width: 992px) {
  .container {
    max-width: 960px;              /* Wider container on laptops */
  }
  
  .logo-img {
    width: 180px !important;       /* Larger logo on laptops */
    height: 90px !important;       /* Larger logo height */
  }
  
  .hero h1 {
    font-size: 3rem;               /* Larger heading on laptops */
  }
  
  .service-card {
    width: calc(33.333% - 1.5rem); /* Three columns with gap */
  }
  
  .project-card {
    width: calc(33.333% - 1.5rem); /* Three columns with gap */
  }
  
  .why-us-grid {
    grid-template-columns: repeat(4, 1fr); /* Four columns */
  }
  
  .contact-content {
    flex-direction: row;           /* Side by side */
    gap: 4rem;                     /* More space between */
  }
  
  .contact-info,
  .contact-form-container {
    width: 50%;                    /* Half width each */
  }
  
  /* Show the CTA button in the header on laptops */
  .site-header .btn-primary {
    display: inline-block;         /* Show on laptops */
  }
  
  /* Allow for nicer form layout on larger screens */
  .contact-form {
    display: grid;                 /* Grid layout */
    grid-template-columns: 1fr 1fr; /* Two columns */
    gap: 1rem;                     /* Gap between fields */
  }
  
  .form-group.full-width {
    grid-column: 1 / 3;            /* Span both columns */
  }
  
  .contact-form button[type="submit"] {
    grid-column: 1 / 3;            /* Span both columns */
    width: auto;                   /* Not full width */
    margin-left: auto;             /* Push to right */
    padding-left: 3rem;            /* Wider button */
    padding-right: 3rem;           /* Wider button */
  }
}

/* Desktops and large laptops (1200px and up) */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;             /* Even wider container */
  }
  
  .hero {
    min-height: 70vh;              /* Taller hero */
  }
  
  .hero h1 {
    font-size: 3.5rem;             /* Larger heading */
  }
  
  .services-separator {
    height: 250px;                 /* Taller separator */
  }
}