/*
@font-face {
  font-family: "SpaceGrotesk";
  src: url("/fonts/SpaceGrotesk-Italic.ttf");
  font-style: italic;
}
*/
@font-face {
  font-family: "SpaceGrotesk";
  src: url("/fonts/SpaceGrotesk-Bold.ttf");
  font-weight: bold;
}
@font-face {
  font-family: "SpaceGrotesk";
  src: url("/fonts/SpaceGrotesk-BoldItalic.ttf");
  font-weight: bold;
  font-style: italic;
}
/*
@font-face {
  font-family: "SpaceGrotesk";
  src: url("/fonts/SpaceGrotesk-Regular.ttf");
  font-style: normal;
  font-weight: normal;
}
*/

@font-face {
  font-family: "Poppins";
  src: url("/fonts/Poppins-Italic.ttf");
  font-style: italic;
}
@font-face {
  font-family: "Poppins";
  src: url("/fonts/Poppins-Bold.ttf");
  font-weight: bold;
}
@font-face {
  font-family: "Poppins";
  src: url("/fonts/Poppins-BoldItalic.ttf");
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: "Poppins";
  src: url("/fonts/Poppins-Regular.ttf");
  font-style: normal;
  font-weight: normal;
}

:root {
  /* HEX Colors */
  --lu-lights-on: #F2E8DA;
  --lu-lights-off: #282420;
  --lu-flicker: #FFB045;
  --lu-electric: #E05936;
  --lu-frost: #75CFCC;
  --lu-evergreen: #30996E;
  --lu-punch: #F28782;
  --lu-flare: #FFD18F;
  --lu-storm: #4F66DE;
  --lu-autumn: #99754F;
  --lu-white: #ffffff;
  /* RGB Colors */
  --lu-lights-on-rgb: 242, 232, 218;
  --lu-lights-off-rgb: 35, 31, 27;
  --lu-flicker-rgb: 255, 176, 69;
  --lu-electric-rgb: 255, 94, 62;
  --lu-frost-rgb: 117, 207, 204;
  --lu-evergreen-rgb: 48, 153, 110;
  --lu-punch-rgb: 242, 135, 130;
  --lu-flare-rgb: 255, 209, 143;
  --lu-storm-rgb: 79, 102, 222;
  --lu-autumn-rgb: 153, 117, 79;
  --lu-white-rgb: 255, 255, 255;
}

.text-lights-on { color: var(--lu-lights-on); }
.text-lights-off { color: var(--lu-lights-off); }
.text-flicker { color: var(--lu-flicker); }
.text-electric { color: var(--lu-electric); }
.text-frost { color: var(--lu-frost); }
.text-evergreen { color: var(--lu-evergreen); }
.text-punch { color: var(--lu-punch); }
.text-flare { color: var(--lu-flare); }
.text-storm { color: var(--lu-storm); }
.text-autumn { color: var(--lu-autumn); }
.text-white { color: var(--lu-white); }

.bg-primary {
  background: linear-gradient(to right, var(--lu-storm), var(--lu-electric), var(--lu-flicker), var(--lu-lights-on))
}

.bg-summer {
  background: linear-gradient(to right, var(--lu-lights-on), var(--lu-flicker), var(--lu-electric), var(--lu-punch))
}

.bg-autumn {
  background: linear-gradient(to right, var(--lu-electric), var(--lu-flicker), var(--lu-flare), var(--lu-autumn))
}

.bg-winter {
  background: linear-gradient(to right, var(--lu-lights-on), var(--lu-storm), var(--lu-storm), var(--lu-frost))
}

.bg-christmas {
  background: linear-gradient(to right, var(--lu-lights-on), var(--lu-evergreen), var(--lu-evergreen), var(--lu-lights-on))
}


body {
  font-family: "Poppins", sans-serif;
  background-color: var(--lu-lights-off);
  color:  var(--lu-lights-on);
}

.lights-on {
  background-color: var(--lu-lights-on);
  color: var(--lu-lights-off);
}
.white {
  background-color: var(--lu-white);
  color: var(--lu-lights-off);
}


h1 {
  font-family: "SpaceGrotesk", sans-serif;
  font-size:3.2rem;
}

@media(min-width:1400px) {
  h1 {
    font-size:4rem;
  }
}

@media(max-width:768px) {
  h1 {
    font-size:2rem;
  }
}

h2 {
  font-family: "SpaceGrotesk", sans-serif;
  font-size:1.5rem;
  margin-bottom: 1.5rem;
}

.banner h1 {
  font-size:1rem;
}
.banner h2 {
  font-size:3.2rem;
}
@media(max-width:768px) {
  .banner h2 {
    font-size:2rem;
  }
}

h3 {
  font-size:1rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 1rem;
}

.gradient-highlight {
  background: linear-gradient(to right, var(--lu-storm), var(--lu-electric), var(--lu-flicker), var(--lu-flare));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.services-squiggle {
  height:30px;
  margin:20px 0 30px 0;
}


/*
.services a {
  flex: 1;
  text-decoration: none;
  color: var(--lu-lights-on);
  border: 3px solid var(--lu-flicker);
  padding:20px;
  text-align: center;
  transition: 0.3s ease-in-out;
  display:inline-block;
  width:49.25%;
}
*/

.services a {
  width: 48.5%; /* Ensure two-column layout on mobile and even spacing on desktop */
  text-decoration: none;
  color: var(--lu-lights-on);
  border: 3px solid var(--lu-flicker);
  text-align: center;
  transition: 0.3s ease-in-out;
}


.services a:hover {
  background-color:rgba(var(--lu-lights-on-rgb),0.1);
}

.services h3 {
  /*font-size: 0.78rem;*/
}

.bios img {
  width:50%;
  margin-bottom:25px;
  margin-top:25px;
}

.bios h3 {
  margin-bottom:0;
}

.bios .job-title {
  opacity:0.5;
}

a {
  color:var(--lu-storm);
}

hr {
  opacity:1;
  color:var(--lu-lights-on);
}

.button {
  padding: 0.5rem 1rem;
  text-decoration: none;
  font-family: 'SpaceGrotesk', sans-serif;
  font-weight: bold;
  font-size:1rem;
  border-radius: 50em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--lu-lights-on);
}

/* BUTTONS */

.button img {
  height:15px;
  margin-left:8px;
}

.button.outline-gradient {
  background: linear-gradient(var(--lu-lights-off), var(--lu-lights-off)) padding-box,
              linear-gradient(to right, var(--lu-storm), var(--lu-electric), var(--lu-flicker)) border-box;
  border: 3px solid transparent;
}

.button.outline-solid-lights-on {
  border: 3px solid var(--lu-lights-on);
  color: var(--lu-lights-on);
}

.button.outline-solid-lights-off {
  border: 3px solid var(--lu-lights-off);
  color: var(--lu-lights-off);
}


/* NAV BAR */

.navbar-brand img {
  width:300px;
}

@media (max-width:768px) {
  .navbar-brand img {
    width:245px;
  }
}

.navbar-nav .nav-link, .dropdown-menu a.dropdown-item {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size:0.72rem;
}

.navbar-nav .nav-link {
  color: var(--lu-lights-on);
  margin-left:20px;
}
@media (max-width:768px) {
  .navbar-nav .nav-link {
    margin-left:0;
    margin-top:7px;
    margin-bottom:0;
    font-size:1rem;
  }
}

.navbar-nav .nav-link:focus {
  color: var(--lu-storm);
}

.navbar-nav .nav-link.active {
  color: var(--lu-flare);
}


.nav-quote-button {
  margin-left:20px;
}
@media (max-width:768px) {
  .nav-quote-button {
    margin-left:0;
    margin-top:10px;
  }
}

.dropdown-menu {
  background-color: var(--lu-lights-on);
}
.dropdown-menu a.dropdown-item {
  color: var(--lu-lights-off);
  padding-top:12px;
  padding-bottom:12px;
}
.dropdown-menu a:hover {
  background-color: var(--lu-storm);
  color: var(--lu-lights-on);
}

/* HAMBURGER MENU COLOR CHANGE */

.navbar-toggler {
  border: none;
  outline: none;
  box-shadow: none;
  background: transparent;
  padding: 0.4rem;
}

.navbar-toggler-icon {
  background-image: none;
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after,
.navbar-toggler-icon div {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--lu-lights-on);
  transition: 0.3s ease;
  border-radius: 1px;
}

.navbar-toggler-icon::before {
  top: 0;
}
.navbar-toggler-icon div {
  top: 50%;
  transform: translateY(-50%);
}
.navbar-toggler-icon::after {
  bottom: 0;
}



/* NAV PILLS */

.nav-pills .nav-link.active {
  background-color: var(--lu-storm);
}

.nav-pills .nav-link {
  color: var(--lu-storm);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size:0.72rem;
}

@media (max-width: 991px) {
  .nav-pills .nav-link {
  }
}

/* GALLERY */

.thumbnail {
  transition: 0.3s ease-in-out;
  width: 100%; /* Makes sure it takes up the full column width */
  aspect-ratio: 4 / 3; /* Adjust to desired ratio (e.g., 16:9, 1:1, 3:2) */
  overflow: hidden;
}

.thumbnail:hover {
  transform: scale(1.05);
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Crops the image to fill the box */
}

.carousel-control-next-icon,
.carousel-control-prev-icon,
.btn-close {
    filter: invert(0%) !important;
}

/* Captions - start */
.thumbnail {
  position: relative;
  overflow: hidden;
}

.caption-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: var(--lu-lights-on);
  text-align: center;
  padding: 0.5rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-size:0.95rem;
}

.thumbnail:hover .caption-overlay {
  opacity: 1;
}
.lightbox-caption {
  background-color: #000;
  padding:20px 0 !important;
}
.lightbox-caption em {
  color: var(--lu-lights-on) !important;
  font-style: normal !important;
  font-size:1rem !important;
}
/* Captions - end */

/* TEXT UTILITIES */

.larger-text {
  font-size: 1.3rem;
}
.caps-text {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 3px;
}

/* TESTIMONIALS */

.testimonial-icon {
  font-size:3rem;
  font-weight: bold;
  font-family: "SpaceGrotesk", sans-serif;
  line-height: 1;
}
.testimonial-text {
    position: relative;
    /*color:var(--lu-lights-on);*/
}
.testimonial-author {
    margin-top: 10px;
    /*color: var(--lu-lights-on);*/
    font-size:0.8rem;
    font-family: "SpaceGrotesk", sans-serif;

}

/* FAQ */

.accordion-item {
  margin-bottom:10px;
  border:none;
}

.lights-on .accordion-item {
  color: var(--lu-lights-off);
  background-color: rgba(255,255,255,1);
  border-radius: 5px;
}

.lights-on .accordion-button {
  background:none;
  color: var(--lu-lights-off);
  padding-right: 40px; /* Space for icon */
}

.accordion-button::after {
  filter: saturate(0%);
}

.accordion-button:focus {
  box-shadow: none;
}

/* Hide Bootstrap's default arrow */
.accordion-button::after {
  display: none;
}

/* Add custom plus icon when collapsed */
.accordion-button.collapsed {
  position: relative;
}

.accordion-button.collapsed::before {
  content: "";
  background: url('/img/icons/plus-lights-off.svg') no-repeat center center;
  background-size: contain;
  width: 20px;
  height: 20px;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

/* Add custom minus icon when expanded */
.accordion-button:not(.collapsed)::before {
  content: "";
  background: url('/img/icons/minus-lights-off.svg') no-repeat center center;
  background-size: contain;
  width: 20px;
  height: 20px;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

.timeline-graphic {
  display:flex;
  justify-content: center;
}

.timeline-graphic div {
  border-left: 6px solid rgba(var(--lu-autumn-rgb),0.4);
  height:100%;
  margin-left:15px;
  margin-top:5px;
}


.timeline-graphic.last-one div {
  border-left: 6px solid rgba(var(--lu-autumn-rgb),0);

}

.timeline-graphic img {
  width:14px;
  display:block;
  margin-left:-10px;
  margin-top:-3px;
}

.timeline-content {
  padding-bottom:20px;
}

.timeline-squiggle {
  position:absolute;
  right:0;
  top:0;
  /*width:300px;*/
  opacity:0.15
}

.home-banner-string {
  width:185px;
  position:absolute;
  bottom:0;
  left:-55px;
}

@media(max-width:992px) {
  .home-banner-string {
    left:auto;
    right:-40px;
  }
}

@media(max-width:768px) {
  .home-banner-string {
    right:-50px;
  }
}

/* Force Jobber loading animation to be where the form actually will be on the page */

#ae4c68dc-b695-45be-9897-78b901ab8e8a {
  position: relative;
  min-height: 300px; /* Ensure there's space before the form loads */
}

#ae4c68dc-b695-45be-9897-78b901ab8e8a .work_request_embed_loading {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 10;
}