/*
 * Smartlink Solutions Website Styles
 *
 * This stylesheet defines the look and feel of the Smartlink Solutions
 * website. The goal of this design is to be modern, simple and
 * responsive. The primary brand colour (#4294C8) is used throughout
 * as an accent on buttons, links and headers. Media queries ensure
 * that layouts adjust gracefully on smaller screens.
 */

/* CSS custom properties for easy theme tweaking */
:root {
  --primary-color: #4294C8;
  --secondary-color: #2a6c97;
  --light-bg: #f5f9fc;
  --dark-bg: #0a3550;
  --text-color: #333;
}
/*
 * Add spacing between certification logos on the about page
 */
/* Add spacing between certification logos on the about page */
.licensed-section .section-icons img {
  margin-right: 30px;
}
.licensed-section .section-icons img:last-child {
  margin-right: 0;
}

/* Credentials / licensing callout on the About page */
.licensed-section {
  background-color: #f8fbfe;
  border-radius: 24px;
  padding: 40px;
  margin-top: 40px;
}

.licensed-section h2 {
  text-align: center;
  margin-bottom: 20px;
}

.licensed-section .section-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-bottom: 20px;
}

.licensed-section .section-icons img {
  /* Reduce the height of the licensing logos to 60% of the original 80px for better balance */
  height: 48px;
  width: auto;
  margin: 0;
}

/* Base styles */
body {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: var(--text-color);
  line-height: 1.6;
  background-color: var(--light-bg);
  scroll-behavior: smooth;
}

a {
  color: var(--primary-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1, h2, h3, h4 {
  color: var(--dark-bg);
  margin-top: 0;
}

p {
  margin-top: 0;
  margin-bottom: 1em;
}

/* Utility classes */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
}

.btn {
  display: inline-block;
  padding: 12px 28px;
  background-color: var(--primary-color);
  color: #fff;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

/* When buttons live inside cards, push them to the bottom of the card */
.card .btn {
  margin-top: auto;
  align-self: flex-start;
}

.btn:hover {
  background-color: var(--secondary-color);
  transform: translateY(-2px);
}

/* Header and navigation */
header {
  background-color: rgba(10, 53, 80, 0.9);
  color: #fff;
  /* Reduce the header height by about 20% without changing font or logo size */
  padding: 8px 0;
  position: sticky;
  top: 0;
  z-index: 100;
  /* Ensure header is a stacking context for pseudo-elements */
  overflow: visible;
}

/* Thin gradient line at the top of the header */
header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Further increase the accent line thickness by another 50% */
  /* Previously set to 6px, now increased to 9px for greater prominence */
  height: 9px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  z-index: 101;
}

header .container {
  display: flex;
  align-items: center;
}

nav {
  display: flex;
  gap: 20px;
  /* Push the nav to the right of its container */
  margin-left: auto;
}

nav a {
  color: #fff;
  font-weight: 500;
  /* Increase the size of the navigation links again to enhance visibility */
  font-size: 1.6rem;
  /* Prevent global anchor hover underline from affecting nav links */
  text-decoration: none;
}

/* Active navigation link styling: subtly highlight the current page */
nav a.active {
  color: var(--primary-color);
  border-bottom: 3px solid var(--primary-color);
  padding-bottom: 4px;
  text-decoration: none;
}
nav a.active:hover {
  color: var(--primary-color);
  text-decoration: none;
}

nav a:hover {
  color: var(--primary-color);
  /* Show a border on hover instead of default underline */
  border-bottom: 3px solid var(--primary-color);
  text-decoration: none;
}

/* Navbar logo styling */
.nav-logo {
  display: flex;
  align-items: center;
  /* Hide the logo by default and reveal it on scroll.  The opacity
     transition will be controlled by JavaScript. */
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* When the nav-logo has the visible class applied by JavaScript, fade it in */
.nav-logo.visible {
  opacity: 1;
}
.nav-logo img {
  /* Increase the logo size so it fills most of the header height with some padding */
  height: 60px;
  width: auto;
  margin-right: 20px;
}

/* Hero section */
/* Parallax sections */
.parallax {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  position: relative;
  color: #fff;
}

/* Default parallax backgrounds */
.hero.parallax {
  background-image: none;
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}

.partners.parallax {
  background-image: none;
  background: var(--dark-bg);
}

/* Hero section overrides */
.hero {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

/* Layered hero images for the home page day/night transition */
.home-hero .hero-images {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 0;
}

.home-hero .hero-img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 0.8s ease;
  z-index: 0;
}

/* Use WebP versions of the hero images for better performance */
.home-hero .hero-img.night {
  background-image: url("assets/hero-night.webp");
  opacity: 1;
}

.home-hero .hero-img.day {
  background-image: url("assets/hero-day.webp");
  opacity: 0;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(10, 53, 80, 0.55);
}

.hero .hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding: 40px 20px;
}

.hero-logo {
  max-width: 320px;
  width: 40%;
  height: auto;
  margin: 0 auto 20px;
}

.hero h1 {
  font-size: 2.8rem;
  margin-bottom: 0.5em;
  color: #fff;
}

.hero p {
  font-size: 1.3rem;
  margin-bottom: 1.5em;
  color: #dce9f5;
}

.hero .btn {
  margin: 0.5em;
}

/* Sections */
section {
  /* Increase base section padding to create a consistent vertical rhythm across
     pages. This applies to all content sections except special heroes.
     A larger top and bottom padding improves breathing room without
     making sections feel excessively tall. */
  padding: 60px 0;
  background-color: #fff;
}

section.alt {
  background-color: var(--light-bg);
}

/* Why choose us */
.why-choose {
  background-color: #fff;
  /* Rounded corners for a smooth transition from the ticker */
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
  /* Give breathing space above this section after the ticker */
  margin-top: 0;
  padding-top: 80px;
  overflow: hidden;
}

.accordion {
  margin-top: 30px;
  border-top: 1px solid #e5e5e5;
}

.accordion-item {
  border-bottom: 1px solid #e5e5e5;
}

.accordion-header {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  padding: 20px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--dark-bg);
  position: relative;
  cursor: pointer;
  outline: none;
  transition: background-color 0.2s ease;
}

.accordion-header:hover {
  background-color: #f5f5f5;
}

.accordion-header .icon {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.3s ease;
}

.accordion-header.active .icon {
  transform: translateY(-50%) rotate(90deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 20px;
  background-color: #fafafa;
}

.accordion-content.open {
  padding-top: 10px;
  padding-bottom: 20px;
}

.accordion-content p {
  margin: 0 0 15px;
  color: var(--text-color);
}

/* Partners section */
.partners {
  text-align: center;
  color: #fff;

  /* provide space around the wrapper so it floats within the dark section */
  padding: 60px 20px;
}

/* Horizontal carousel for partner logos */
.partners-carousel {
  overflow: hidden;
  margin-top: 30px;
}

.partners-track {
  display: flex;
  align-items: center;
  /* Remove CSS-based scrolling animation; the scrolling will be handled
     via JavaScript for a seamless loop without resets. */
  animation: none;
}

.partners-track a {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 30px;
}

.partners-track img {
  height: 60px;
  width: auto;
  opacity: 0.9;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.partners-track img:hover {
  transform: scale(1.1);
  opacity: 1;
}

@keyframes partner-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Shift the track left by one third of its width.  Because the logos
       are duplicated three times in the markup, moving left by 33.333%
       will bring the next sequence into view seamlessly. */
    transform: translateX(-33.333%);
  }
}

/* Floating wrapper for partner logos and heading */
.partners-wrapper {
  background: rgba(10, 53, 80, 0.9);
  border-radius: 40px;
  margin: 0 auto;
  padding: 40px 60px;
  max-width: 1100px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.partners-wrapper h2 {
  margin-top: 0;
  color: #fff;
}

.partners .container {
  padding: 60px 20px;
}

.partners h2 {
  color: #fff;
  margin-bottom: 30px;
}

.partners-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  align-items: center;
}

.partners-logos img {
  max-height: 70px;
  width: auto;
  opacity: 0.85;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.partners-logos img:hover {
  transform: scale(1.1);
  opacity: 1;
}

/* Special styling for placeholder logos to improve contrast */
.partners-logos img[alt*='NECA'] {
  filter: invert(1) grayscale(1) brightness(2);
}

.partners-logos img[alt*='Fannin'] {
  /* Keep Fannin placeholder crisp without alteration */
  filter: none;
}

section h2 {
  font-size: 2rem;
  margin-bottom: 0.5em;
}

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

.card {
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
  /* Use flex layout so call-to-action buttons align at the bottom of cards */
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Images at the top of service cards */
.card-img {
  width: 100%;
  /* Enforce a consistent aspect ratio for all card images to align cards */
  height: 180px;
  border-radius: 6px;
  margin-bottom: 20px;
  object-fit: cover;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.card h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--dark-bg);
}

.card p {
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

/* Icons used in the services highlights */
.card-icon {
  margin-bottom: 12px;
  color: var(--primary-color);
}

.card-icon svg {
  display: inline-block;
  width: 40px;
  height: 40px;
}

/* ------------------------------------------------------------------
 * Interactive System Designers (Services Page)
 * Style the backup power and automation planner columns to feel
 * intentional and polished. Each column uses a card‑like container
 * with balanced padding and equal height. Images are constrained
 * to a consistent height and centred within their container.  
 */
.designer-grid {
  /* Use a responsive grid for the designer boxes so they sit side by side on wide screens and stack on narrow screens */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  margin-top: 40px;
}


.designer-col {
  /* The column sizing is now handled by the grid layout above */
  background-color: #fff;
  border: 1px solid #e5eef7;
  border-radius: 16px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.designer-col .designer-img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  margin-bottom: 20px;
}

.designer-col .btn {
  margin-bottom: 12px;
}

/* On small screens stack the designer columns vertically so they remain legible. The media query is placed after the
   base .designer-col declaration so it properly overrides the flex basis. */
@media (max-width: 767px) {
  .designer-col {
    flex: 1 1 100%;
  }
}

/* ------------------------------------------------------------------
 * Video gallery (Videos Page)
 * Arrange thumbnails in a responsive grid with consistent aspect
 * ratios and subtle hover cues. Each video card has a shadow
 * and rounded corners to elevate it above the background.
 */
.video-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.video-item {
  background-color: #fff;
  border: 1px solid #e5eef7;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  text-align: center;
  height: 100%;
}

.video-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.07);
}

.video-item img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.video-item h3 {
  font-size: 1.1rem;
  margin: 16px;
  color: var(--dark-bg);
  flex-grow: 1;
}

/* Testimonials */
.testimonials {
  background-color: var(--light-bg);
  padding: 40px 0;
  /* Add curved top edges to mirror other sections */
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  /* Provide breathing space before the testimonials section */
  margin-top: 60px;
  padding-top: 80px;
  overflow: hidden;
}

/* Remove old testimonial list styles; new carousel styles defined below */

/* Testimonial carousel layout */
.testimonial-carousel {
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  margin-top: 30px;
}

/* Wrapper for the sliding testimonials */
.testimonial-track-3d {
  display: flex;
  transition: transform 0.6s ease;
  width: 100%;
}

/* Individual testimonial cards */
.testimonial-card {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
  background-color: #001d2b;
  color: #fff;
  border-radius: 32px;
  padding: 40px 30px;
  margin: 0 20px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  text-align: center;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  opacity: 0.4;
  transform: scale(0.6);
  transition: transform 0.6s ease, opacity 0.6s ease;
}

/* States for neighbouring and active testimonial cards */
.testimonial-card.prev,
.testimonial-card.next {
  opacity: 0.8;
  transform: scale(0.8);
}

.testimonial-card.active {
  opacity: 1;
  transform: scale(1);
}

/* Styling for star rating and review content inside cards */
.testimonial-card .stars {
  font-size: 1.2rem;
  letter-spacing: 1.5px;
  color: #ffd972;
  margin-bottom: 16px;
}

.testimonial-card p {
  font-size: 1rem;
  margin-bottom: 18px;
  line-height: 1.6;
}

.testimonial-card .show-more {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #f8d64e;
}

.testimonial-card .reviewer {
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 5px;
  color: var(--primary-color);
}

.testimonial-card .review-source img {
  width: 60px;
  height: auto;
  margin-top: 15px;
}

/* Navigation buttons for testimonials */
/* Position navigation arrows centrally within the testimonial carousel */
.testimonial-nav {
  background: none;
  border: none;
  color: var(--primary-color);
  font-size: 2.5rem;
  cursor: pointer;
  z-index: 10;
  transition: color 0.3s ease;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.testimonial-nav.prev {
  left: 0;
}

.testimonial-nav.next {
  right: 0;
}

.testimonial-nav:hover {
  color: var(--secondary-color);
}

/* Footer */
/* -------------------------------------------------------------------
   Collage section for Electrical & Automation Excellence
   ------------------------------------------------------------------- */

/* The collage section uses absolutely positioned images that animate
   into view when the section is scrolled into the viewport.  A
   relative positioning context ensures the images stay within the
   section boundaries. */
.collage-section {
  position: relative;
  background: var(--light-bg);
  overflow: hidden;
  padding: 100px 20px;
}

.collage-section .graphic-content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
}

.collage-section .graphic-content h2 {
  font-size: 3rem;
  margin-bottom: 0.5em;
  color: var(--primary-color);
}

.collage-section .graphic-content p {
  font-size: 1.5rem;
  color: var(--dark-bg);
  max-width: 700px;
  margin: 0 auto;
}

/* Container for all collage images */
.collage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none; /* Prevent accidental clicks */
}

/* Base style for each collage image */
.collage-item {
  position: absolute;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* When the section becomes visible (60% in view), fade in the images */
.collage-section.visible .collage-item {
  opacity: 0.9;
  transform: translateY(0);
  transition-delay: var(--delay, 0s);
}

/* Positioning and sizing for individual collage items.  These values
   place the images at various locations and sizes within the section.
   Data attributes specify different parallax speeds for each item. */
.item-1 { top: 10%; left: 5%; width: 18%; }
.item-2 { top: 15%; left: 60%; width: 16%; }
.item-3 { top: 50%; left: 20%; width: 14%; }
.item-4 { top: 40%; left: 70%; width: 15%; }
.item-5 { top: 70%; left: 5%; width: 22%; }
.item-6 { top: 70%; left: 60%; width: 18%; }
.item-7 { top: 25%; left: 40%; width: 20%; }
.item-8 { top: 80%; left: 45%; width: 12%; }
.item-9 { top: 55%; left: 80%; width: 12%; }
.item-10 { top: 30%; left: 85%; width: 16%; }
.item-11 { top: 5%; left: 45%; width: 15%; }
footer {
  background-color: var(--dark-bg);
  color: #fff;
  /* Increase footer padding to improve breathing room and hierarchy */
  padding: 60px 0;
}

footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
}

footer a {
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.6;
}

footer a:hover {
  color: var(--primary-color);
}

footer .footer-col {
  flex: 1 1 240px;
}

footer h4 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1.2rem;
  color: #fff;
}

/* Reduce spacing between quick link items */
footer .footer-col p {
  margin: 4px 0;
  line-height: 1.5;
}

/* Display the Quick Links section in two columns on larger screens.  Splitting the links
   reduces the overall height of the footer while maintaining readability.  On mobile
   screens the column-count is reset via the existing media query so links stack
   vertically. */
@media (min-width: 769px) {
  footer .footer-col:nth-of-type(2) {
    /* Use CSS columns to flow the quick links into two balanced columns */
    column-count: 2;
    column-gap: 20px;
  }
  footer .footer-col:nth-of-type(2) p {
    /* Prevent items from splitting across columns */
    break-inside: avoid;
  }
}

/* Responsive Styles */
@media (max-width: 768px) {
  header .container {
    flex-direction: column;
    align-items: flex-start;
  }
  nav {
    flex-direction: column;
    width: 100%;
    gap: 10px;
    margin-top: 10px;
  }
  .hero h1 {
    font-size: 2rem;
  }
  .hero p {
    font-size: 1.1rem;
  }
  footer .container {
    flex-direction: column;
    align-items: flex-start;
  }
}

/*
 * Additional styles for enhanced parallax and interactive elements
 * The following rules override defaults defined earlier. They are placed
 * at the end of the file to ensure they take precedence when multiple
 * selectors match.
 */

/* Blurred hero for the home page */
.home-hero.parallax {
  /* Remove any static background on the home hero so that the layered night/day
     images are fully visible.  The parallax effect is handled via the
     .hero-img elements inside the hero. */
  background-image: none;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  /* Remove bottom border radius so the ticker attaches seamlessly */
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  overflow: hidden;
}

.home-hero.parallax::before {
  /* Dark overlay to improve text contrast */
  background: rgba(10, 53, 80, 0.6);
}

/* Ensure the home hero adopts the generic hero layout */
.home-hero {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

.home-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Provide a slightly translucent overlay for better contrast on all backgrounds */
  background: rgba(10, 53, 80, 0.55);
  z-index: 0;
}

/* Larger logo size on the home hero */
/* Increase the size of the logo on the home hero for a bold entrance */
.home-hero .hero-logo {
  /* Make the logo significantly larger (approximately 75% larger than before) */
  /* Make the hero logo larger (approx. 75% bigger than the prior design) */
  max-width: 1200px;
  width: 80%;
  /* Add drop shadow to make the white logo visible against varied backgrounds */
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

/* Centre hero content horizontally on the home page */
.home-hero .hero-content {
  /* Constrain the content to a wider area and centre it */
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

/* Generic service hero background (also used for contact and blog) */
/* Switch blurred wire background to WebP format for faster loading */
.service-hero.parallax {
  background-image: url("assets/wires-blur.webp");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.service-hero.parallax::before {
  background: rgba(10, 53, 80, 0.6);
}

/* About page hero background */
.about-hero.parallax {
  /* Use the WebP background image for the about page hero */
  background-image: url("assets/about-background.webp");
  background-size: cover;
  background-position: center;
}

.about-hero.parallax::before {
  background: linear-gradient(rgba(10, 53, 80, 0.75), rgba(10, 53, 80, 0.75));
}

/* About hero text contrast improvements */
.about-hero .hero-content h1 {
  font-size: clamp(2.8rem, 4vw, 4rem);
  font-weight: 800;
  letter-spacing: 0.5px;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.55),
    0 6px 18px rgba(0, 0, 0, 0.45);
}

.about-hero .hero-content p {
  font-size: 1.35rem;
  font-weight: 500;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

/* Contact page hero background */
.contact-hero.parallax {
  background-image: url("assets/contact-blur.webp");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.contact-hero.parallax::before {
  background: rgba(10, 53, 80, 0.6);
}

/* Shared hero overlay scaffold for service/about/contact heroes */
.service-hero::before,
.about-hero::before,
.contact-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Background is defined per-hero via .service-hero.parallax::before, etc. */
  z-index: 0;
}

/* Ensure service, about and contact heroes adopt the generic hero layout */
.service-hero,
.about-hero,
.contact-hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

/* Non-home hero typography: larger, brighter, higher contrast */
.service-hero .hero-content h1,
.about-hero .hero-content h1,
.contact-hero .hero-content h1 {
  color: #fff;
  font-size: clamp(3rem, 4.5vw, 4.25rem);
  font-weight: 800;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}

.service-hero .hero-content p,
.about-hero .hero-content p,
.contact-hero .hero-content p {
  color: rgba(255,255,255,0.92); /* light gray, almost white */
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 500;
  text-shadow: 0 2px 10px rgba(0,0,0,0.45);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
}

/* Ensure non-home hero text renders ABOVE the overlay */
.service-hero .hero-content,
.about-hero .hero-content,
.contact-hero .hero-content {
  position: relative;
  z-index: 2;
}

/* Ensure the overlay sits between background image and text */
.service-hero::before,
.about-hero::before,
.contact-hero::before {
  z-index: 1;
}


/* Second graphic section used on the home page to feature electrical equipment */
.second-graphic.parallax {
  background-image: url("assets/wires-blur.webp");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
  /* Rounded corners on both top and bottom for smooth section transition */
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
  overflow: hidden;
}

.second-graphic.parallax::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 53, 80, 0.6);
}

/* Small logo that fades in on scroll */
.small-logo {
  position: fixed;
  top: 15px;
  left: 20px;
  width: 50px;
  height: 50px;
  /* Hide the logo initially.  We use opacity and visibility together so that
     it does not capture pointer events until it becomes visible. */
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  transition: opacity 0.5s ease;
  /* Add slight drop shadow to stand out against backgrounds */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.chat-icon {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  z-index: 1000;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.chat-icon:hover {
  background-color: var(--secondary-color);
  transform: scale(1.05);
}

/*
 * On the contact page the floating chat icon interferes with the reCAPTCHA badge.
 * Hide it when the body has a `contact-page` class.  All other pages will
 * continue to display the chat icon normally.
 */
.contact-page .chat-icon {
  display: none;
}
.small-logo img {
  width: 100%;
  height: auto;
}

/* Visible state for the small logo when the user scrolls past the hero.
   By toggling this class via JavaScript, we avoid the logo showing on
   initial load. */
.small-logo.visible {
  opacity: 1;
  visibility: visible;
}

/* Interactive cards used in “Why Choose Us” and “What Makes Us Different” */
.info-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 40px;
}

.info-card {
  /* Flex rules ensure cards wrap nicely */
  flex: 1 1 280px;
  border-radius: 24px;
  padding: 40px 40px;
  border: 1px solid #e5eef7;
  /* Use a solid colour that transitions smoothly */
  background-color: #f8fbfe;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
  position: relative;
  cursor: pointer;
  /* Smoothly animate background and text colour on activation and collapse */
  transition: background-color 0.5s ease, color 0.5s ease;
  overflow: hidden;
  color: var(--dark-bg);
}

.info-card .title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  /* Ensure long titles don’t overlap the plus icon by reserving space on the right */
  padding-right: 60px;
  /* Fade the title colour when active */
  transition: color 1s ease;
}

.info-card .icon {
  position: absolute;
  right: 28px;
  top: 28px;
  font-size: 1.8rem;
  width: 42px;
  height: 42px;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  /* Let clicks pass through to the parent card so JS can toggle it */
  pointer-events: none;
}

.info-card-content {
  max-height: 0;
  overflow: hidden;
  /* Smooth expansion and collapse for a responsive feel */
  transition: max-height 0.6s ease;
  margin-top: 15px;
}

.info-card.active {
  /* When active, invert the colours for emphasis */
  background-color: #001d2b;
  color: #ffffff;
}

/* When a card is active, ensure the heading pops to white */
.info-card.active .title {
  color: #ffffff;
}

.info-card.active .icon {
  transform: rotate(45deg);
}

.info-card.active .info-card-content {
  max-height: 400px;
}

/* Hide placeholder info cards used for grid balance */
.info-card.placeholder {
  visibility: hidden;
  pointer-events: none;
  border: none;
  box-shadow: none;
}

/* --------------------------------------------------------------------- */
/* Custom layouts for the About page sections                             */

/* Owner section: display the owner photo alongside the text.  The layout
   wraps on smaller screens so that the image appears above the text. */
.owner-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
}

/* Constrain the owner image to a reasonable size and add rounded corners. */
.owner-section .owner-image {
  flex: 1 1 300px;
  max-width: 300px;
}
.owner-section .owner-image img {
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* Owner text takes up the remaining space and grows as needed. */
.owner-section .owner-text {
  flex: 2 1 500px;
}

/* Increase spacing and readability of the owner biography text.  
   Larger line-height and bottom margins help break up long paragraphs 
   without rewriting any copy. */
.owner-section .owner-text p {
  line-height: 1.7;
  margin-bottom: 1.2rem;
}

/* Shared icon row for highlighting certifications or team values. */
.section-icons {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-bottom: 20px;
}
.section-icons img {
  height: 48px;
  width: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Make links inside service cards inherit heading colour and remove underline */
.card h3 a {
  color: var(--dark-bg);
  text-decoration: none;
}
.card h3 a:hover {
  text-decoration: underline;
}

/* Testimonials carousel */
/* Testimonials carousel container: position relative so absolute items stack */
.testimonials-carousel {
  position: relative;
  overflow: hidden;
  min-height: 220px;
}

/* Testimonial items are absolutely positioned on top of each other */
.testimonial-item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.8s ease;
}

/* Active testimonial is visible and stacked correctly */
.testimonial-item.active {
  opacity: 1;
  position: relative;
}

/* See Us in Action section */
.see-us {
  background-color: var(--light-bg);
  padding: 60px 0;
  /* Preserve curved top edges for smooth transition from previous section */
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  overflow: hidden;
}
/* Layout adjustments for See Us section when arranged horizontally */
.see-us-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  text-align: left;
}

/* Set strong text in callout to white for contrast */
#why-loxone .callout strong {
  color: #fff;
}

.see-us-text {
  flex: 1 1 60%;
}

.see-us-video {
  /* Allocate roughly one quarter of the available width to the video thumbnail so
     it appears as a small graphic next to the text on larger screens. */
  flex: 0 0 25%;
  max-width: 25%;
}

.see-us .video-thumbnail {
  /* The thumbnail will take the full width of its flex container (25% of section) */
  width: 100%;
  max-width: 100%;
  border-radius: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.see-us .video-thumbnail:hover {
  transform: scale(1.05);
}

/* Videos gallery layout */
.video-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 40px;
}
.video-item {
  flex: 1 1 300px;
  max-width: 300px;
  text-align: center;
}
.video-item img {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.video-item h3 {
  margin-top: 12px;
  font-size: 1rem;
  color: var(--dark-bg);
}

/* Ticker styles */
.ticker {
  background: var(--dark-bg);
  color: #fff;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  /* Increase the ticker font size and apply a digital/monospaced look */
  font-size: 1.8rem;
  /* Use a fun digital/monospace stack to evoke a retro pixel feel.  Since custom fonts are not available offline, choose a
     combination of widely supported monospaced faces that resemble retro game fonts. */
  font-family: 'Lucida Console', 'Courier New', 'Monaco', monospace;
  letter-spacing: 2px;
  padding: 12px 0;
  font-weight: 500;
  /* Flatten the top edges so the ticker attaches seamlessly to the hero */
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  /* Add space below the ticker to separate it from the next section */
  margin-bottom: 60px;
}

/* ------------------------------------------------------------------------- */
/* Contact form styling */
/* Enhance the visual appearance of the contact form to better match the
   modern look of the rest of the site.  Increase font sizes, add generous
   padding, rounded corners, and subtle borders. */
#contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#contact-form label {
  font-weight: 600;
  margin-bottom: 4px;
}
#contact-form input,
#contact-form select,
#contact-form textarea {
  font-size: 1rem;
  padding: 12px 16px;
  border: 1px solid #ccd9e6;
  border-radius: 8px;
  background-color: #fff;
  color: var(--text-color);
  box-sizing: border-box;
  width: 100%;
}
#contact-form textarea {
  resize: vertical;
  min-height: 120px;
}
#contact-form button {
  font-size: 1rem;
  padding: 14px 24px;
  border-radius: 8px;
  margin-top: 8px;
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
#contact-form button:hover {
  background-color: var(--secondary-color);
}

/* Consent checkbox styling on the contact form.  
   Moves styles out of inline attributes for consistency and easier maintenance. */
.sms-consent {
  font-size: 0.85rem;
  line-height: 1.4;
  display: block;
  color: #555;
  margin-top: 8px;
}
.sms-consent input {
  margin-right: 6px;
}

.ticker-text {
  /* Lay the ticker text in a single long line so that it can be translated
     smoothly via JavaScript.  The white-space property prevents wrapping. */
  display: inline-block;
  white-space: nowrap;
  /* Remove the CSS-based animation.  The JavaScript will handle the
     translation for a truly seamless loop without any reset. */
  animation: none;
}

/* Each ticker segment should not flex and should have spacing to separate repetitions */
.ticker-text span {
  flex: none;
  display: inline-block;
  padding-right: 3rem;
}

@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Shift the track left by one third of its width.  Because the text
       is duplicated three times in the markup, moving left by 33.333% will
       bring the second copy into view seamlessly as the first leaves the
       viewport. */
    transform: translateX(-33.333%);
  }
}

/* Custom scrollbar styling */
/* Scrollbar colour scheme for webkit browsers */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--light-bg);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--secondary-color);
}

/* For Firefox scrollbars */
html {
  scrollbar-color: var(--primary-color) var(--light-bg);
  scrollbar-width: thin;
}

/* Animations for hero content */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate {
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards;
}

.delay-1 {
  animation-delay: 0.2s;
}

.delay-2 {
  animation-delay: 0.4s;
}

.delay-3 {
  animation-delay: 0.6s;
}

/* ------------------------------------------------------------------------- */
/*  Electrical & Automation Excellence Collage
    The secondary graphic section features a collage of electrical and
    automation themed objects arranged randomly across the section.  The
    section itself is relatively positioned so the collage can be absolutely
    positioned over it.  Each graphic starts faded out and slightly
    translated downward.  When the user scrolls to 60% of the section
    height, the images fade in and slide up.  They then move subtly on
    scroll based on their data-speed attribute (handled in scripts.js). */

.second-graphic {
  position: relative;
  overflow: hidden;
}

/* Increase the size and contrast of the section title and subtitle for
   the electrical automation section.  These elements sit above the
   collage. */
.second-graphic .hero-content h2 {
  font-size: 3rem;
  color: #fff;
  margin-bottom: 0.5em;
}
.second-graphic .hero-content p {
  font-size: 1.5rem;
  color: #dce9f5;
  margin-bottom: 0;
}

/* Ensure the hero text sits above the collage graphics in the Electrical & Automation Excellence
   section. Setting a relative positioning and higher z-index prevents images from overlapping
   the title and subtitle. */
.second-graphic .hero-content {
  position: relative;
  z-index: 2;
}

/* Collage container occupies the entire section and holds all random
   graphics. */
.second-graphic .collage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

/* Base style for each collage image: initially off screen and
   transparent. */
.second-graphic .collage img {
  position: absolute;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease, transform 1s ease;
}

/* When the section scrolls into view, add a class on the section to
   trigger the fade-in/slide-up animations for all images. */
.second-graphic.animate .collage img {
  opacity: 1;
  transform: translateY(0);
}

/* Individual positioning and sizing of collage objects.  These values
   were chosen to create a visually balanced random layout that still
   fits within the bounds of the section.  Feel free to adjust top/left/width
   values to refine the collage. */
.collage .obj1 { top: 10%; left: 5%; width: 16%; }
.collage .obj2 { top: 30%; left: 5%; width: 21%; }
.collage .obj3 { top: 40%; left: 10%; width: 12%; }
.collage .obj4 { top: 30%; left: 60%; width: 15%; }
.collage .obj5 { top: 60%; left: 40%; width: 16%; }
.collage .obj6 { top: 72%; left: 20%; width: 12%; }
.collage .obj7 { top: 60%; left: 70%; width: 12%; }
.collage .obj8 { top: 78%; left: 50%; width: 21%; }
.collage .obj9 { top: 5%; left: 72%; width: 17.5%; }
.collage .obj10 { top: 65%; left: 78%; width: 28%; }
.collage .obj11 { top: 25%; left: 85%; width: 12%; }

/* Remove staggered delays for collage images so they animate concurrently */
.second-graphic .collage img {
  transition-delay: 0s !important;
}

/*
 * Gallery styles
 *
 * These rules define a responsive grid gallery with a lightbox overlay
 * used on the service pages. Images are displayed as thumbnails that
 * scale slightly on hover. Clicking a thumbnail opens a full-size
 * version in an overlay with a caption.
 */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.gallery-item {
  cursor: pointer;
  /* Prepare for overlay effect on hover */
  position: relative;
  overflow: hidden;
}

/* Subtle overlay on gallery items when hovering to give a modern, interactive feel */
.gallery-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-item:hover::before {
  opacity: 1;
}

.gallery-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  transition: transform 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-item .caption {
  text-align: center;
  font-size: 0.9rem;
  margin-top: 8px;
  color: var(--text-color);
}

.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 9999;
}

.lightbox-overlay.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-content {
  text-align: center;
  max-width: 90%;
  max-height: 90%;
}

.lightbox-content img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 8px;
}

.lightbox-caption {
  margin-top: 16px;
  color: #fff;
  font-size: 1rem;
}

/* Zoom-in animation for the lightbox content to create a polished appearance */
.lightbox-content {
  text-align: center;
  max-width: 90%;
  max-height: 90%;
  animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ---------------------------------------------------------------------
 * Mobile‑specific adjustments
 *
 * The following overrides only apply on small screens (max 767px wide).
 * They improve readability, spacing and interaction on mobile devices
 * without impacting the desktop layout.  Do not modify the desktop
 * declarations above – any new rules must be wrapped in this media
 * query so that desktop remains pixel‑perfect.
 */
@media (max-width: 767px) {
  /* Reduce generic section padding to tighten vertical rhythm on mobile */
  section {
    padding: 40px 0;
  }
  /* Adjust hero sizing and typography for smaller screens */
  .hero {
    min-height: 60vh;
    padding: 60px 0 40px;
  }
  .hero h1 {
    font-size: 1.8rem;
    line-height: 1.25;
  }
  .hero p {
    font-size: 1rem;
    line-height: 1.5;
  }
  /* Stack the navigation items vertically with tighter spacing */
  nav {
    gap: 5px;
    width: 100%;
    margin-left: 0;
  }
  nav a {
    font-size: 1.2rem;
    padding: 8px 0;
  }
  /* Ensure buttons remain comfortable to tap */
  .btn {
    font-size: 1rem;
    padding: 14px 32px;
    margin: 0.4em 0.2em;
  }
  /* Info card adjustments: stack cards and enlarge tap targets */
  .info-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .info-card {
    padding: 24px;
  }
  .info-card .title {
    font-size: 1.2rem;
  }
  .info-card .icon {
    right: 12px;
    font-size: 1.5rem;
  }
  .info-card-content {
    font-size: 0.95rem;
  }
  /* See Us In Action: stack text above the video and ensure full‑width media */
  .see-us-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .see-us-text {
    margin-bottom: 20px;
  }
  .see-us-video {
    width: 100%;
  }
  .see-us-video img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
  }
  /* Testimonials: display cards in a vertical list and hide navigation arrows */
  .testimonial-carousel {
    flex-direction: column;
    align-items: center;
  }
  .testimonial-track-3d {
    display: block;
    width: 100%;
    transform: none !important;
  }
  .testimonial-card {
    flex: none !important;
    max-width: 100% !important;
    margin: 15px 0;
    opacity: 1 !important;
    transform: none !important;
  }
  .testimonial-nav {
    display: none;
  }
  /* Reduce padding on testimonials container */
  .testimonials {
    padding-top: 60px;
  }
  /* Footer columns: stack into a single column with spacing */
  footer .container {
    flex-direction: column;
    gap: 20px;
  }
  footer .footer-col {
    flex: none;
    width: 100%;
  }
}

/* ------------------------------------------------------------------
 * Blog Page Layout Improvements
 * Cards on the blog page should not overlap and must be responsive.  The
 * following rules override the generic .card and .card-grid settings
 * specifically when the body has the blog-page class.
 */
body.blog-page .card-grid {
  /* Create flexible columns that adapt to available width */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

body.blog-page .card {
  /* Let cards grow to fit their content instead of forcing equal height */
  height: auto;
  display: flex;
  flex-direction: column;
}

@media (max-width: 600px) {
  body.blog-page .card-grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------
 * Contact Page Layout Tweaks
 * Reduce vertical spacing between contact details and size the embedded map.
 */
.contact-page .card p {
  margin-bottom: 0.5rem;
}

.contact-page .card p:last-child {
  margin-bottom: 0;
}

.contact-page .card .map-embed {
  margin-top: 1rem;
}

.contact-page .card .map-embed iframe {
  width: 100%;
  height: 200px;
  border: 0;
}

/* ------------------------------------------------------------------
 * Backup Generator Installation Options
 * The following styles support the generator installation page by
 * defining a responsive grid of option cards and consistent icon
 * sizing. Cards flex on large screens and stack on smaller devices.
 */
.backup-options .service-options {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
}

.backup-options .option-card {
  flex: 1;
  min-width: 280px;
  background-color: #f8fbfe;
  border-radius: 16px;
  padding: 30px 24px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.backup-options .option-card h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  color: var(--dark-bg);
  font-size: 1.4rem;
}

.backup-options .option-card p {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.backup-options .option-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 10px;
}

.backup-options ul {
  list-style: disc;
  padding-left: 20px;
  text-align: left;
}

@media (max-width: 768px) {
  .backup-options .service-options {
    flex-direction: column;
  }
}

/* Reduce vertical spacing between key sections on the generator installation page */
/* Fine-tune padding between key sections */
/* Tune the vertical padding between adjacent sections */
.why-section {
  padding-bottom: 20px;
}

.backup-options {
  padding-top: 20px;
  padding-bottom: 20px;
}

.transfer-switch-section {
  padding-top: 20px;
}