:root {
	--primary-colour: #023b59;
	--secondary-colour: #ebe70e; 
	--accent-colour: #e5ebee;
	
    --primary-colour-rgb: 2, 59, 89;
    --secondary-colour-rgb: 235, 231, 14;	
}

p {
	font-weight: 500;
	font-size: 1.2rem;
	line-height: 2rem;
	color: var(--primary-colour);
}

/* Mobile / tablets */
@media (max-width: 768px) {
  p {
    font-size: 1rem;
	line-height: 1.7rem;	  
  }
}

li {
	font-weight: 500;
	font-size: 1.2rem;
	line-height: 2rem;
	color: var(--primary-colour);
}

/* Mobile / tablets */
@media (max-width: 768px) {
  li {
    font-size: 1rem;
	line-height: 1.7rem;	  
  }
}

h1 {
	font-weight: 800;
	font-size: 3rem;
	line-height: 3.5rem;
	color: var(--primary-colour);
}

/* Mobile / tablets */
@media (max-width: 768px) {
  h1 {
    font-size: 2.2rem;
	line-height: 2.5rem;	  
  }
}

h2 {
	font-weight: 800;
	font-size: 2.5rem;
	line-height: 3rem;
	color: var(--primary-colour);
}

/* Mobile / tablets */
@media (max-width: 768px) {
  h2 {
    font-size: 1.5rem;
	line-height: 1.7rem;	  
  }
}

h3 {
	font-weight: 800;
	font-size: 2rem;
	line-height: 2.5rem;
	color: var(--primary-colour);
}

/* Mobile / tablets */
@media (max-width: 768px) {
  h3 {
    font-size: 1.3rem;
	line-height: 1.5rem;	  
  }
}

h4 {
	font-weight: 800;
	font-size: 1.5rem;
	line-height: 2rem;
	color: var(--primary-colour);
}

/* Mobile / tablets */
@media (max-width: 768px) {
  h4 {
    font-size: 1.2rem;
	line-height: 1.5rem;	  
  }
}

/* Section Padding */

.section-padding {
	padding-top: 6rem;
	padding-bottom: 6rem;
}

@media (max-width: 768px) {
  .section-padding {
	padding-top: 3rem;
	padding-bottom: 3rem;
  }
}


/* End Section Padding */


.nav-link {
  color: var(--primary-colour);
  font-weight: 800;
  padding: 0.5rem 1rem !important;
}

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

.nav-link:focus {
  color: var(--primary-colour);
}

.pre-nav-text {
	font-weight: 800;
	color: var(--primary-colour);
}

.intro-text {
	font-weight: 600;
}

/* Review Bar Include Styles */

.review-bar {
	background-color: var(--accent-colour);
}

.review-bar p {
	font-weight: 800;
	margin-bottom: 0px;
	font-size: 0.9rem;
}

.review-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-direction: row; 
}

/* Pre Nav Animation */

.top-bar {
  position: relative;
  background: var(--secondary-colour); /* base yellow */
  overflow: hidden;
}

/* Subtle thicker moving lines */
.top-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 20px,           /* spacing between lines */
    var(--primary-colour) 20px 40px /* line thickness: 6px */
  );
  opacity: 0.05;                   /* keep it subtle */
  background-size: 200% 100%;      /* allows movement */
  animation: moveLines 100s linear reverse infinite; /* much slower */
  pointer-events: none;
}

/* Animate from left to right */
@keyframes moveLines {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 200% 0;
  }
}

/* End Pre Nav Animation */

/* Review Bar Star Animation */

.stars {
  display: flex;
  gap: 4px;
}

.stars svg {
  width: 18px;
  height: 18px;
  fill: var(--secondary-colour);
  stroke: var(--primary-colour);
  stroke-width: 1.5;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

/* Wave animation */
@keyframes starWave {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-6px); }
  60%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}

/* 👇 Trigger from review bar instead */
.review-bar:hover .stars svg {
  animation: starWave 0.6s ease forwards;
}

/* Staggered delays */
.review-bar:hover .stars svg:nth-child(1) { animation-delay: 0s; }
.review-bar:hover .stars svg:nth-child(2) { animation-delay: 0.08s; }
.review-bar:hover .stars svg:nth-child(3) { animation-delay: 0.16s; }
.review-bar:hover .stars svg:nth-child(4) { animation-delay: 0.24s; }
.review-bar:hover .stars svg:nth-child(5) { animation-delay: 0.32s; }


/* End Review Bar Star Animation */


@media (max-width: 768px) {
  .review-text {
    flex-direction: column;
    gap: 6px;
  }
}

/* Review Bar Animation Styles */

.review-bar {
	position: relative;
	overflow: hidden;
}

#fireworks-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none; 
	z-index: 0;
}

.review-bar .container {
	position: relative;
	z-index: 1;
}

/* End Review Bar Include Styles */

/* Content Card Styles */

.content-card {
	position: relative;
	overflow: hidden;
	border-radius: 15px;
	background-color: var(--primary-colour);
	border: 4px solid var(--accent-colour);
	min-height: 530px;
	z-index: 1;
}

/* Soft moving light */
.content-card::before {
	content: "";
	position: absolute;
	width: 200%;
	height: 200%;
	top: -50%;
	left: -50%;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		rgba(255,255,255,0.2) 0%,
		transparent 60%
	);
	animation: luxuryFloat 4s ease-in-out infinite alternate;
	pointer-events: none;
	z-index: 0;
}

.content-card > * {
	position: relative;
	z-index: 2;
}

@media (max-width: 991.5px) {
.content-card {
	min-height: 0px;
	justify-content: center;
}
}

@keyframes luxuryFloat {
	0% {
		transform: translate(-10%, -10%);
	}
	100% {
		transform: translate(10%, 10%);
	}
}


/* End Content Card Styles */

/* Include Card Styles */

.include-card {
	position: relative;
	overflow: hidden;
	border-radius: 15px;
	background-color: var(--primary-colour);
	border: 4px solid var(--accent-colour);
	min-height: 480px;
	z-index: 1;
}

/* Soft moving light */
.include-card::before {
	content: "";
	position: absolute;
	width: 200%;
	height: 200%;
	top: -50%;
	left: -50%;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		rgba(255,255,255,0.2) 0%,
		transparent 60%
	);
	animation: luxuryFloat 4s ease-in-out infinite alternate;
	pointer-events: none;
	z-index: 0;
}

.include-card > * {
	position: relative;
	z-index: 2;
}

@keyframes luxuryFloat {
	0% {
		transform: translate(-10%, -10%);
	}
	100% {
		transform: translate(10%, 10%);
	}
}

@media (max-width: 991.5px) {
.include-card {
	min-height: 0px;
}
}


/* End Include Card Styles */

/* Hero Section */
.hero-video {
    position: relative;
    width: 100%;
    height: 560px;
    overflow: hidden;

    background: linear-gradient(
        to right,
        rgba(var(--primary-colour-rgb), 0.8),
        rgba(var(--secondary-colour-rgb), 0.5)
    );
}

/* Video styling */
.hero-video .video-background video {
    object-fit: cover; /* Ensures video covers entire section */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Make the video fill the entire height of the container */
    z-index: -1; /* Keep the video behind the content */
}

/* End Hero Section */

/* CTA button */

a.btn-cta {
  display: inline-block;
  padding: 8px 30px;
  background: #023b59;
  color: #ebe70e;     
  text-decoration: none;
  border-radius: 5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  font-size: 1.2rem;

  /* 3D depth */
  box-shadow:
    0 6px 0 #012a40,
    0 10px 20px rgba(0, 0, 0, 0.25);

  transition:
    background 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

a.btn-cta:hover {
  background: #034a6e;
  transform: translateY(-2px);
  box-shadow:
    0 8px 0 #012a40,
    0 14px 24px rgba(0, 0, 0, 0.3);
}

/* pressed */
a.btn-cta:active {
  transform: translateY(4px);
  box-shadow:
    0 2px 0 #012a40,
    0 6px 12px rgba(0, 0, 0, 0.25);
}

/* End CTA button */

/* CTA button reverse */

a.btn-cta-reverse {
  display: inline-block;
  padding: 8px 30px;
  background: #ebe70e;   /* flipped */
  color: #023b59;        /* flipped */
  text-decoration: none;
  border-radius: 5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  font-size: 1.5rem; 

  /* 3D depth */
  box-shadow:
    0 6px 0 #c9c400,
    0 10px 20px rgba(0, 0, 0, 0.25);

  transition:
    background 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

a.btn-cta-reverse:hover {
  background: #f5f11a;
  transform: translateY(-2px);
  box-shadow:
    0 8px 0 #c9c400,
    0 14px 24px rgba(0, 0, 0, 0.3);
}

/* pressed */
a.btn-cta-reverse:active {
  transform: translateY(4px);
  box-shadow:
    0 2px 0 #c9c400,
    0 6px 12px rgba(0, 0, 0, 0.25);
}

/* End CTA button reverse */

/* Full width Background Styles */

.full-width-accent {
	background-color: var(--accent-colour);
}

.full-width-primary {
	background-color: var(--primary-colour);
}

.full-width-secondary {
	background-color: var(--secondary-colour);
}

/* End Full width Grey Styles */

/* Service Page Header Gradient Styles */

.hero-banner {
    position: relative;
    min-height: 380px;
    width: 100%;
    overflow: hidden;
    background-color: var(--primary-colour);
    padding: 120px 0;
}

@media (max-width: 768px) {
  .hero-banner {
    min-height: 300px;
    padding: 20px 0;	  
  }
}

/* Keep content above everything */
.hero-banner .container {
    position: relative;
    z-index: 5;
}

/* Image styling */
.hero-image {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    width: 100%;
    max-width: 1920px;
    height: 100%;
    object-fit: cover;

    z-index: 1;
}

/* Primary colour overlay */
.hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;

    background: rgba(var(--primary-colour-rgb), 0.75);
}

/* Dynamic fade only above 1920px */
@media (min-width: 1921px) {
    .hero-image {
        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0px,
            black calc((100vw - 1920px) / 2),
            black calc(100% - ((100vw - 1920px) / 2)),
            transparent 100%
        );

        mask-image: linear-gradient(
            to right,
            transparent 0px,
            black calc((100vw - 1920px) / 2),
            black calc(100% - ((100vw - 1920px) / 2)),
            transparent 100%
        );
    }
}

/* Typography */
.hero-title {
    max-width: 900px;
    text-shadow: 0 5px 25px rgba(0, 0, 0, 0.35);
}


/* End Service Page Header Gradient Styles */





/* ===========================
   Custom Dropdown Service Form
   =========================== */

/* Card container */
.service-search {
  background-color: var(--primary-colour); /* dark blue card */
  padding: 2rem 1rem;
  border-radius: 1rem;                     /* rounded corners */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  color: white;
  text-align: center;
}

/* Card heading */
.service-search h3 {
  margin-bottom: 2rem;
}

/* Form layout */
.select-go-form {
  display: flex;
  gap: 12px;
  margin-top: 1rem;
  flex-wrap: wrap; /* allow wrapping */
  align-items: center;
}

/* --------------------------
   Dropdown styling
   -------------------------- */
.select-go-form select {
  flex: 1 1 200px;
  height: 48px;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 500;
  border: 2px solid var(--secondary-colour); /* grey/yellow accent */
  border-radius: 8px;
  background-color: #fff;
  color: var(--primary-colour);
  cursor: pointer;
  transition: all 0.2s ease-in-out;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Custom arrow */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--secondary-colour) 50%),
    linear-gradient(135deg, var(--secondary-colour) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

/* =====================================
   Commercial Card - Dropdown Styling
   ===================================== */

.service-search--commercial .select-go-form select {
  border: 2px solid var(--primary-colour);
  color: var(--primary-colour);

  /* Custom arrow in primary colour */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--primary-colour) 50%),
    linear-gradient(135deg, var(--primary-colour) 50%, transparent 50%);
}

/* Hover & Focus */
.service-search--commercial .select-go-form select:hover,
.service-search--commercial .select-go-form select:focus {
  border-color: var(--primary-colour);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* --------------------------
   Go button styling (CTA-style) Yellow
   -------------------------- */
.select-go-form button {
  flex: 0 1 auto;
  height: 48px;
  padding: 0 24px;
  border: none;
  border-radius: 5px;              /* pill shape */
  background-color: var(--secondary-colour); /* yellow */
  color: var(--primary-colour);      /* dark blue text */
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.3px;

  /* 3D depth */
  box-shadow:
    0 6px 0 #c7c500,           /* slightly darker yellow for depth */
    0 10px 20px rgba(0, 0, 0, 0.25);

  transition:
    background 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

/* Button hover */
.select-go-form button:hover {
  background-color: #f5e80e;        /* brighter yellow */
  transform: translateY(-2px);
  box-shadow:
    0 8px 0 #c7c500,
    0 14px 24px rgba(0,0,0,0.3);
}

/* Button pressed */
.select-go-form button:active {
  transform: translateY(4px);
  box-shadow:
    0 2px 0 #c7c500,
    0 6px 12px rgba(0,0,0,0.25);
}

/* =====================================
   Commercial Card - CTA Style Button
   ===================================== */

.service-search--commercial .select-go-form button {
  background: #023b59;         /* dark blue */
  color: #ebe70e;              /* yellow text */
  border-radius: 5px;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: 0.3px;

  /* 3D depth */
  box-shadow:
    0 6px 0 #012a40,
    0 10px 20px rgba(0, 0, 0, 0.25);

  transition:
    background 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

/* Hover */
.service-search--commercial .select-go-form button:hover {
  background: #034a6e;
  transform: translateY(-2px);
  box-shadow:
    0 8px 0 #012a40,
    0 14px 24px rgba(0, 0, 0, 0.3);
}

/* Pressed */
.service-search--commercial .select-go-form button:active {
  transform: translateY(4px);
  box-shadow:
    0 2px 0 #012a40,
    0 6px 12px rgba(0, 0, 0, 0.25);
}

/* --------------------------
   Responsive: below 1200px stack button
   -------------------------- */
@media (max-width: 1199.98px) {
  .select-go-form button {
    flex: 1 1 100%; 
    margin-top: 12px;
  }
}

@media (max-width: 576px) {
  .service-search select {
    font-size: 0.8rem;
  }
}

/* ======================================
   Background Image Overlay System
   ====================================== */

/* Base positioning */
.service-search {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Overlay layer */
.service-search::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.18; /* adjust transparency here */
  z-index: 0;
}

/* Keep content above overlay */
.service-search > * {
  position: relative;
  z-index: 2;
}

/* --------------------------------------
   Homeowner Card
   -------------------------------------- */
.service-search--home {
  background-color: var(--primary-colour);
}

.service-search--home::before {
  background-image: url('/images/includes/homeowner-electrical-services-background.jpg'); 
}

.secondary-text-colour {
	color: var(--secondary-colour);
}

/* --------------------------------------
   Commercial Card
   -------------------------------------- */
.service-search--commercial {
  background-color: var(--secondary-colour);
  color: var(--primary-colour); /* ensure readable text */
}

.service-search--commercial h3 {
  color: var(--primary-colour);
}

.service-search--commercial::before {
  background-image: url('/images/includes/commercial-electrical-services-background.jpg');
}

/* End Custom Dropdown Service Form */

/* Footer Text */

.footer-text {
	font-size: 1rem;
	color: white;
}

.footer-link {
	text-decoration: none;
}

/* End Footer Text */

/* Tick Icon Styles */

.icon-check svg {
    display: block;
}

/* Circle styling */
.check-circle {
    fill: var(--secondary-colour);
    stroke: var(--primary-colour);
    stroke-width: 1.5;
}

/* Tick styling */
.check-tick {
    fill: var(--primary-colour);
}


/* End Tick Styles

/* Review carousel cards */

.review-card {
	background-color: var(--primary-colour);
	border: 2px solid var(--accent-colour);
	border-radius: 15px;
	min-height: 520px;
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left: 30px;
	padding-right: 30px;
}
@media (max-width: 768px) {
.review-card {
	min-height: 420px;
	justify-content: center;
}
}


/* End review carousel cards */

/* Custom carousel arrows */
.custom-arrow {
  width: 30px;
  height: 30px;
  background-color: var(--secondary-colour);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-control-prev.custom-arrow {
  left: -10px; /* adjust distance from carousel */
}

.carousel-control-next.custom-arrow {
  right: -10px; /* adjust distance from carousel */
}

.custom-arrow .carousel-control-prev-icon,
.custom-arrow .carousel-control-next-icon {
  background-size: 50% 50%;
  filter: invert(1); /* makes the arrow white */
}

.carousel-control-next {
	opacity: 1;
}

.carousel-control-prev {
	opacity: 1;
}

/* End Custom carousel arrows */

/* ============================= */
/*        Accordion Styling      */
/* ============================= */

/* Override Bootstrap defaults */
.accordion {
  --bs-accordion-active-bg: var(--primary-colour);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-border-color: transparent;
}

/* Remove default borders */
.accordion-item {
  background: transparent;
  border: none;
}

/* Base Accordion Button */
.accordion-button {
  background-color: var(--primary-colour);
  color: #fff;
  border-radius: 12px !important;
  font-weight: 600;
  padding: 1rem 1.25rem;

  /* Keep border consistent to prevent movement */
  border: 2px solid var(--primary-colour);

  box-shadow: none;

  /* Transition radius smoothly */
  transition: background-color 0.3s ease, border-radius 0.5s ease;
}

/* Remove ALL outlines / focus effects */
.accordion-button:focus,
.accordion-button:active {
  box-shadow: none !important;
  outline: none !important;
  background-color: var(--primary-colour);
  color: #fff;
}

/* Hover */
.accordion-button:hover {
  background-color: rgba(var(--primary-colour-rgb), 0.9);
  color: #fff;
}

/* Remove default arrow styling issues */
.accordion-button::after {
  filter: brightness(0) invert(1);
}

/* Open state */
.accordion-button:not(.collapsed) {
  background-color: var(--primary-colour);
  color: #fff;

  /* Remove bottom radius so it connects flush */
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Hover while open */
.accordion-button:not(.collapsed):hover {
  background-color: rgba(var(--primary-colour-rgb), 0.9);
}

/* Icon Accent */
.accordion-button svg {
  color: var(--secondary-colour);
}

/* Accordion Body */
.accordion-body {
  border-top: none; /* Connect to button */
  background: var(--accent-colour);
  border-radius: 0 0 12px 12px;
  padding: 1.25rem;

  /* Smoothly show rounded corners when closing */
  transition: border-radius 0.35s ease;
}

/* Ensure body connects cleanly */
.accordion-collapse.show .accordion-body {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* ============================= */
/*    End Accordion Styling      */
/* ============================= */

/* Elfsite Review Box Fix Equal Height */

.ReviewBackground__Container-sc-f3f0ac28-0.fUfWZS.es-review-background-container {
	min-height: 267px;
}

/* End Elfsite Review Box Fix Equal Height */

/* Footer Logo Animation */

/* Base logo: flat, no shadow */
#footerLogo {
  display: inline-block;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  padding: 10px;
  border-radius: 10px;
}

/* Hover: lifts up like CTA */
#footerLogo:hover {
  transform: translateY(-4px);
  box-shadow:
    0 8px 0 rgba(0, 0, 0, 0.2),
    0 14px 24px rgba(0, 0, 0, 0.25);
}

/* Active/Pressed: push down and remove shadow */
#footerLogo:active {
  transform: translateY(4px);
  box-shadow: none;
}

/* End Footer Logo Animation */

/* ===============================
   Navbar Dropdown Styling
================================= */

.navbar .dropdown-menu {
    border: none;
    border-radius: 12px;
    padding: 12px 0;
    margin-top: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    min-width: 260px;
    animation: dropdownFade 0.25s ease forwards;
}

/* Smooth fade + slight slide */
@keyframes dropdownFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dropdown items */
.navbar .dropdown-item {
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--primary-colour);
    transition: all 0.2s ease;
}

/* Hover state */
.navbar .dropdown-item:hover {
    background-color: var(--accent-colour);
    color: var(--primary-colour);
    padding-left: 25px;
}

/* Divider styling */
.navbar .dropdown-divider {
    margin: 8px 0;
    opacity: 0.3;
	border-top: 3px solid var(--primary-colour);	
}

/* Improve dropdown toggle arrow */
.navbar .dropdown-toggle::after {
    margin-left: 6px;
    vertical-align: middle;
    transition: transform 0.2s ease;
}

/* Rotate arrow when open */
.navbar .show > .dropdown-toggle::after {
    transform: rotate(180deg);
}

/* Remove harsh Bootstrap active blue */
.navbar .dropdown-item:active {
    background-color: #e9ecef;
    color: #000;
}

/* ===============================
  End Navbar Dropdown Styling
================================= */

/* Navbar Container */

.container-nav {
  max-width: 100%;
  padding-left: 12px;
  padding-right: 12px;
}

@media (min-width: 768px) {
  .container-nav { 
  padding-left: 25px;
  padding-right: 25px;
	}
}

/* Service CTA Sparky */

  /* Positioning the SVG behind the specific column */
  .service-search-container {
    position: relative;
    z-index: 1;
  }

  /* Add the background SVG to the column */
  .service-search-container::before {
    content: '';
    position: absolute;
    top: -132px;
    left: 35%;
    right: 0;
    height: 190px; /* Adjust height of the visible portion of the SVG */
    width: 190px; /* Adjust height of the visible portion of the SVG */
    background-image: url('/images/icons/sparky-app-electrical-mascot.svg');
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1; /* Ensure the SVG stays behind the content */
  }

@media (max-width: 992px) {
  .service-search-container {
    margin-top: 150px;
  }
  .service-search-container::before {
    left: 40%;
  }
}

@media (max-width: 768px) {
  .service-search-container::before {
    left: 34%;
  }
}

@media (max-width: 575px) {
  .service-search-container::before {
    left: 36%;
  }
}	
@media (max-width: 450px) {
  .service-search-container::before {
    left: 33%;
  }
}	
@media (max-width: 370px) {
  .service-search-container::before {
    left: 27%;
  }
}
@media (max-width: 320px) {
  .service-search-container::before {
    left: 25%;
  }
}	

/* End Service CTA Sparky */

/* Contact Page */

.form-group {
	magrin-bottom: 0px;
}

.contact-icon{
    width:42px;
    height:42px;
    background:var(--primary-colour);
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
	margin-right: 10px;
}

.sparkyContact {
  width: 100%;
  height: 290px;
}

@media (min-width: 768.5px) {
.sparkyContact {
  width: 205px;
}
}


/* End Contact Page */