/* ========================================================================
   CSS RESET  
   ======================================================================== */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
* {
  padding: 0;
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/*converts 1 rem to the equivalent 10px*/
html {
  font-size: 62.5%;
}

/* Line breaks */
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
  max-width: 75ch;
}

/* ========================================================================
   ROOT CONFIGURATION  
   ======================================================================== */

/* MAIN STYLES */
:root {
  /* Color Pallette */
  --clr-primary: #0f133c;
  --clr-secondary: #194cc3;
  --clr-tertiary: #f03d29;
  --clr-accent: #ff934f;

  --clr-neutral-100: #fafafa;
  --clr-neutral-200: #9f9fa3;
  --clr-neutral-300: #636363;
  --clr-neutral-400: #333336;
  --clr-neutral-500: #121212;
  --clr-neutral-600: #020202;

  /* Font Family */
  --ff-heading: "Space Grotesk", "cormorant garamond", "Avenir Next", serif;
  --ff-body: "Inter", "cormorant garamond", "Avenir Next", sans-serif;
  --ff-link: var(--ff-heading);

  /* Font Weight */
  --fw-heading: 500;
  --fw-body: 400;
  --fw-nav: 400;
  --fw--btn: 400;

  /* Font Size */
  --fs-h1: 3.2rem;
  --fs-h2: 3rem;
  --fs-h3: 2.2rem;
  --fs-h4: 2rem;
  --fs-h5: 1.8rem;
  --fs-h6: 1.6rem;

  --fs-body-200: 1.5rem;
  --fs-body-300: 1.6rem;
  --fs-body-400: 1.7rem;
  --fs-body-500: 1.8rem;
  --fs-body-600: 2rem;
  --fs-body-700: 2.5rem;
  --fs-body-800: 3rem;
  --fs-nav: 2rem;
  --fs-btn: 2rem;

  /* Font Color */
  --primary-font-clr: var(--clr-primary);
  --secondary-font-clr: var(--clr-neutral-100);
  --tertiary-font-clr: var(--clr-secondary);

  /* Font Line Height */
  --line-height-body: 1.5;
  --line-height-heading: 1.2;

  /*Logo/Nav Grid Background Color*/
  --bc-logo-nav: rgba(255, 255, 255, 0.7);

  /*Desktop Services Dropdown*/
  --fc-desktop-dropdown: var(--primary-font-clr);

  /* Mobile Menu */
  --clr-hamburger-line: var(--clr-primary);
  --borderTB-nav-dropdown: 1px solid rgba(145, 179, 166, 0.2);

  --overlay-color: rgb(15, 19, 60, 0.95);
  --menu-speed: 0.65s;

  /* LINK BUTTON STYLES */
  --ff-link-btn: var(--ff-body);
  --fw-link-btn: var(--fw-heading);
  --fs-link-btn: var(--fs-body-400);

  /* Primary Link Button Styles */
  --fc-btn-primary: var(--secondary-font-clr);
  --bc-btn-primary: var(--clr-primary);

  /* Secondary Link Button Styles */
  --fc-btn-secondary: var(--secondary-font-clr);
  --bc-btn-secondary: var(--clr-tertiary);

  /* Tertiary Link Button Styles */
  --fc-btn-tertiary: var(--primary-font-clr);
  --bc-btn-tertiary: var(--clr-neutral-100);
  --border-btn-tertiary: solid 1px var(--clr-primary);

  /* FORM STYLES */

  /* Form Label */
  --ff-form-label: var(--ff-body);
  --fw-form-label: var(--fw-body);
  --fs-form-label: var(--fs-body-400);

  /* Form Button */
  --ff-form-btn: var(--ff-body);
  --fw-form-btn: var(--fw-heading);
  --fs-form-btn: var(--fs-body-400);
  --fc-form-btn: var(--secondary-font-clr);
  --bc-form-btn: var(--clr-secondary);

  /* FOOTER STYLES */
  --ff-footer: var(--ff-body);
  --fw-footer: var(--fw-body);
  --fs-footer: var(--fs-body-300);

  --bg-footer: var(--clr-primary);

  --border-footer: solid 0.1rem #fafafa31;
}

@media (min-width: 23em) {
  :root {
    --fs-h1: 5.4rem;
    --fs-h2: 3.2rem;
    --fs-h3: 2.4rem;
    --fs-body-200: 1.5rem;
  }
}
@media (min-width: 26em) {
  :root {
    --fs-body-200: 1.6rem;
  }
}

@media (min-width: 40.06em) {
  :root {
    --fs-h1: 5.5rem;
    --fs-h2: 3.4rem;
    --fs-h3: 2.4rem;
    --fs-h4: 2rem;
    --fs-body-200: 1.8rem;
    --fs-body-400: 1.8rem;
  }
}
@media (min-width: 70.31em) {
  :root {
    --fs-h1: 5.8rem;
    --fs-h2: 3.6rem;
    --fs-h3: 3rem;
    --fs-h4: 2rem;
  }
}
/* TEST OUTLINE */
/* * {
  outline: 1px solid red;
} */

/* ========================================================================
   MAIN TEXT STYLES 
   ======================================================================== */

body {
  font-family: var(--ff-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-body-400);
  color: var(--primary-font-clr);
}
main {
  text-align: center;
}

h1,
h2,
h3,
h4 {
  font-family: var(--ff-heading);
  font-weight: var(--fw-heading);
  line-height: 1.2;
  letter-spacing: 0.2px;
}
h1 {
  font-size: var(--fs-h1);
  color: var(--clr-neutral-100);
  text-align: center;
}
h2,
h3 {
  color: var(--primary-font-clr);
}
h4,
footer h3 {
  color: var(--clr-neutral-100);
  text-align: left;
}

h2 {
  font-size: var(--fs-h2);
}
h3 {
  font-size: var(--fs-h3);
}
h4 {
  font-size: var(--fs-h4);
}

/* ========================================================================
   LINK BUTTON STYLES   
   ======================================================================== */

/* Multi-btn */
.primary-btn,
.secondary-btn,
.tertiary-btn {
  font-family: var(--ff-link-btn);
  font-weight: var(--fw-link-btn);
  font-size: var(--fs-link-btn);
  width: fit-content;
  white-space: nowrap;
  padding: 10px 28px;
  text-decoration: none;
  border-radius: 1.8rem;
  text-align: center;
  cursor: pointer;
  display: block;
  background-position: center;
  transition: background 0.8s;
}
.primary-btn:hover,
.primary-btn:focus,
.secondary-btn:hover,
.secondary-btn:focus,
.tertiary-btn:hover,
.tertiary-btn:focus {
  color: var(--clr-neutral-100);
  background-color: var(--clr-secondary);
  background-image: radial-gradient(circle, transparent 1%, #fafafa 1%);
  background-position: center;
  background-size: 15000%;
}
/* Primary-btn */
.primary-btn {
  color: var(--clr-primary);
  background-color: var(--clr-neutral-100);
}
.primary-btn:hover,
.primary-btn:focus {
  color: var(--clr-neutral-100);
  background-color: var(--clr-secondary);
  background-image: radial-gradient(circle, transparent 1%, #fafafa 1%);
  background-position: center;
  background-size: 15000%;
}
.primary-btn:active {
  background-color: var(--clr-secondary);
  background-size: 100%;
  transition: background 0s;
}

/* Secondary-btn */
.secondary-btn {
  background-color: var(--clr-primary);
  color: var(--clr-neutral-100);
}
.secondary-btn:active {
  background-color: var(--clr-secondary);
  background-size: 100%;
  transition: background 0s;
}

/* Tertiary-btn */
.tertiary-btn {
  color: var(--fc-btn-tertiary);
  background-color: var(--bc-btn-tertiary);
  border: var(--border-btn-tertiary);
  margin: 90px auto 0 auto;
}
.tertiary-btn:hover,
.tertiary-btn:focus {
  border: var(--clr-secondary);
}
.tertiary-btn:active {
  background-color: var(--clr-secondary);
  background-size: 100%;
  transition: background 0s;
}

/* ========================================================================
   PAGE & SPACING (UTILITY) STYLES  
   ======================================================================== */

body {
  background-color: var(--clr-neutral-100);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.page-container {
  --max-width: 1280px;
  --padding: 1.5rem;
  width: min(var(--max-width), 100% - (var(--padding) * 1));
  margin-inline: auto;
}

/* Padding Top & Bottom */
.ptb-3 {
  padding: 3rem 0;
}
.ptb-7 {
  padding: 7rem 0;
}
.ptb-10 {
  padding: 10rem 0;
}
.ptb-12 {
  padding: 12rem 0;
}

/* Padding Bottom */
.pb-3 {
  padding-bottom: 3rem;
}
.pb-7 {
  padding-bottom: 7rem;
}
.pb-8 {
  padding-bottom: 8rem;
}
.pb-9 {
  padding-bottom: 9rem;
}
.pb-10 {
  padding-bottom: 10rem;
}
.pb-12 {
  padding-bottom: 12rem;
}
.pb-16 {
  padding-bottom: 16rem;
}
/* Padding Top */
.pt-3 {
  padding-top: 3rem;
}
.pt-7 {
  padding-top: 7rem;
}
.pt-8 {
  padding-top: 8rem;
}
.pt-10 {
  padding-top: 10rem;
}
.pt-12 {
  padding-top: 12rem;
}
.centre {
  margin-inline: auto;
}

/* =========================================================
   MEDIA QUERIES - PAGE CONTAINER & SPACING 
   ========================================================= */

@media (min-width: 23em) {
  .page-container {
    width: min(var(--max-width), 100% - (var(--padding) * 3));
  }
}
@media (min-width: 26em) {
  .page-container {
    width: min(var(--max-width), 100% - (var(--padding) * 4));
  }
}
@media (min-width: 46em) {
  .page-container {
    width: min(var(--max-width), 100% - (var(--padding) * 5));
  }
}
@media (min-width: 70.31em) {
  .page-container {
    width: min(var(--max-width), 100% - (var(--padding) * 10));
  }
}
@media (min-width: 80.31em) {
  .page-container {
    width: min(var(--max-width), 100% - (var(--padding) * 12));
  }
}
@media (min-width: 90.31em) {
  /* PAGE CONTAINER & SPACING */
  .page-container {
    width: min(var(--max-width), 100% - (var(--padding) * 20));
  }
}
@media (min-width: 110.31em) {
  /* PAGE CONTAINER & SPACING */
  .page-container {
    width: min(var(--max-width), 100% - (var(--padding) * 35));
  }
}

/* ========================================================================
   NAVIGATION MENU STYLES   
   ======================================================================== */

/* MOBILE HAMBURGER MENU */

/* Disable scrolling & add blur when the mobile menu is open */
.no-scroll {
  overflow: hidden;
}
.blur-background {
  filter: blur(2px);
  transition: filter 1.2s ease-in;
}

.menu-wrap {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1;
  margin-top: 3.8rem;
}

.menu-wrap .toggler {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  cursor: pointer;
  width: 55px;
  height: 55px;
  opacity: 0;
}
.menu-wrap .hamburger {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 55px;
  height: 55px;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  border: solid rgba(255, 255, 255, 0.05) 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*Hamburger menu focus for accessibility*/
input[type="checkbox"]:focus + label {
  outline: 2px solid blue;
}

/* Hide hamburger toggle text / kept in html for screen reader*/
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Hamburger Line */
.menu-wrap .hamburger > div {
  position: relative;
  flex: none;
  width: 100%;
  height: 3px;
  background: var(--clr-hamburger-line);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -10px;
  width: 100%;
  height: 3px;
  background: inherit;
}

/* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 10px;
}

/* Toggler Animation */
.menu-wrap .toggler:checked + .hamburger > div {
  transform: rotate(135deg);
}

/* Turns Lines Into X */
.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after {
  top: 0;
  transform: rotate(90deg);
}

/* Rotate On Hover When Checked */
.menu-wrap .toggler:checked:hover + .hamburger > div {
  transform: rotate(225deg);
}

/* Show Menu */
.menu-wrap .toggler:checked ~ .menu {
  visibility: visible;
}

.menu-wrap .toggler:checked ~ .menu > div {
  transform: scale(1);
  transition-duration: var(--menu-speed);
}

.menu-wrap .toggler:checked ~ .menu > div > div {
  opacity: 1;
  transition: opacity 0.4s ease 0.4s;
}

.menu-wrap .menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.menu-wrap .menu > div > div > ul {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  width: 100%;
}

.menu-wrap .menu > div {
  background: var(--overlay-color);
  width: 1100vw;
  height: 1200vw;
  display: flex;
  flex: none;
  justify-content: center;
  transform: scale(0);
  transition: all 0.4s ease;
}

.menu-wrap .menu > div > div {
  text-align: center;
  width: 100vw;
  max-height: 100vh;
  opacity: 0;
  transition: opacity 0.4s ease;
  position: relative;
}

.menu-wrap .menu > div > div > ul > li {
  font-family: var(--ff-link);
  color: var(--secondary-font-clr);
  font-size: var(--fs-nav);
  list-style: none;
  padding: 1rem 0;
  line-height: 1.4;
}

.menu-wrap .menu > div > div > ul > li > a,
.menu-wrap .menu > div > div > ul > li > button {
  color: inherit;
  text-decoration: none;
  transition: color 0.5s ease;
}
.menu-wrap .menu > div > div > ul > li > a:hover,
.nav-dropdown-content > a:hover,
.menu-wrap .menu > div > div > ul > li > button:hover {
  color: var(--clr-accent);
}
.menu-wrap .menu > div > div > ul > li > a:active,
.nav-dropdown-content > a:hover {
  color: var(--clr-accent);
}

/*Dropdown button for services*/
.nav-dropbtn {
  font-family: var(--ff-link);
  font-size: var(--fs-nav);
  color: var(--fc-nav);
  background-color: rgba(255, 255, 255, 0);
  border: none;
  cursor: pointer;
  background: none;
}
.nav-dropdown {
  display: inline-block;
}
.nav-dropdown-content {
  border-top: var(--borderTB-nav-dropdown);
  border-bottom: var(--borderTB-nav-dropdown);
  display: none;
  min-width: 190px;
  margin-top: 2rem;
}

.nav-dropdown-content a {
  font-family: var(--ff-link);
  font-size: var(--fs-body-300);
  color: var(--fc-nav);
  line-height: 1;
  padding: 12px 8px;
  text-decoration: none;
  display: block;
  animation: scaleIn 0.5s ease forwards;
}
/*services-animation*/
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.nav-dropdown-content a:active {
  color: var(--clr-accent);
}

.nav-dropbtn:active {
  color: var(--clr-accent);
}
.main-nav {
  display: none;
}
.show {
  display: block;
}

/* ========================================================================
   HEADER STYLES   
   ======================================================================== */

.hero-container {
  display: grid;
  grid-template-rows: minmax(100px, 13rem) repeat(4, minmax(118px, 1fr));
  grid-template-columns: repeat(6, 1fr);
  height: 100svh;
  position: relative;
}
.hero-container_noImage {
  display: grid;
  grid-template-rows: minmax(118px, 1fr);
  grid-template-columns: repeat(6, 1fr);
  position: relative;
}

.header-logonav-position {
  background-color: var(--bc-logo-nav);
  display: flex;
  grid-column: 1 / 9;
  grid-row: 1 / 2;
  align-items: center;
}

/* Shared header styles */
.header-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  width: 100%;
  color: var(--secondary-font-clr);
}

.header-img-style {
  grid-column: 1 / 7;
  grid-row: 2 / 6;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
}
/* INDEX page style for image/heading*/
.header-heroimg img {
  object-position: 74% 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
}
.header-heroheading {
  top: 50%;
}
.header-heroheading p {
  text-align: center;
}
/* CONTACT page style for image/heading*/
.header-heroimg-contact {
  object-position: 42%;
}
.header-heroheading-contact {
  top: 78%;
}
/* Services page style for image/heading*/
.header-heroimg-services {
  object-position: 36%;
}

/* ABOUT page style for image/heading*/
.header-heroimg-about {
  object-position: 51%;
}

/* ALL OTHER PAGE (sp) style for heading */
.header-heroheading-sp {
  top: 56%;
}

/* =========================================================
   MEDIA QUERIES - HEADER STYLES
   ========================================================= */

@media (min-width: 30em) {
  /* ABOUT page style for image/heading*/
  .header-heroimg-about {
    object-position: 66%;
  }
}

@media (min-width: 58.31em) {
  /* INDEX page style for image/heading*/
  .header-heroimg img {
    object-position: 50% 20%;
  }
}

@media (min-width: 62.31em) {
  /* CONTACT page style for image/heading*/
  .header-heroimg-contact {
    object-position: center top;
  }

  /* Services page style for image/heading*/
  .header-heroimg-services {
    object-position: center top;
  }

  /* ABOUT page style for image/heading*/
  .header-heroimg-about {
    object-position: center top;
  }
  .header-heroimg img {
    object-position: top;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
  }
}

@media (min-width: 82.31em) {
  /* CONTACT page style for image/heading*/
  .header-heroimg-contact {
    object-position: right top;
  }

  /* Services page style for image/heading*/
  .header-heroimg-services {
    object-position: left top;
  }
}

@media (min-width: 111.31em) {
  /* INDEX page style for image/heading*/
  .header-heroimg {
    object-position: 50% 25%;
  }
}

/* =========================================================
   MEDIA QUERIES - NAVIGATION MENU STYLES
   ========================================================= */
/* Styles for landscape orientation */
@media (orientation: landscape) {
  .menu-wrap .menu > div > div > ul {
    margin-top: unset;
  }
  .menu-wrap > .menu > div > div > ul {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .menu-wrap .menu > div > div > ul > li {
    font-size: var(--fs-body-300);
    padding: 0.5rem;
  }
  .nav-dropdown-content a {
    font-size: var(--fs-body-300);
    padding: 8px 8px;
  }
  .nav-dropdown-content {
    margin-top: 1rem;
  }
}

@media (min-width: 62.31em) {
  /*Hamburger Menu Wrap*/
  .menu-wrap {
    display: none;
  }

  /*Navbar*/
  .main-nav .nav-links,
  .navbar {
    display: block;
  }

  /*align logo and nav*/
  .logonav-flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  /*align nav links*/
  .main-nav {
    display: flex;
    margin-right: 30px;
    flex-direction: row;
    justify-content: flex-end;
    list-style-type: none;
    margin-top: 10px;
  }
  .main-nav li {
    margin: 0;
  }

  .nav-links {
    text-decoration: none;
    font-family: var(--ff-link);
    color: var(--fc-nav);
    font-size: var(--fs-nav);
    margin-left: 22px;
    letter-spacing: 0.05em;
  }

  #js-menu {
    background-color: transparent;
  }

  /* Styles for the main navigation links */
  .main-nav .nav-links {
    position: relative; /* Position relative for pseudo-element positioning */
    font-weight: normal; /* Default font weight */
    font-weight: 500;
    text-decoration: none; /* Remove default underline */
  }

  /* Styles for the line under the navigation links */
  .main-nav .nav-links::before {
    content: ""; /* Add content */
    position: absolute; /* Position absolute for overlay */
    bottom: -2px; /* Position the line below the link */
    left: 0; /* Start position of the line */
    width: 0; /* Initially set width to 0 */
    height: 2px; /* Set line height */
    background-color: var(--clr-primary); /* Color of the line */
    transition: width 0.3s; /* Transition effect for width */
  }

  /* Styles for the line under the navigation links on hover */
  .main-nav .nav-links:hover::before {
    width: 100%; /* Expand the line to 100% width on hover */
  }

  /* Styles for the main navigation links on hover */
  .main-nav .nav-links:hover {
    font-weight: 500;
  }
  .nav-links:hover,
  .nav-links:focus {
    color: var(--clr-secondary);
  }
  .nav-links:active {
    color: var(--bc-btn-tertiary);
  }

  .desktop-nav-dropdown {
    position: relative;
    display: inline-block;
  }
  .desktop-dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(250, 250, 250, 0.9);
    min-width: 230px;
    margin-left: 20px;
    z-index: 3;
    animation: dropIn 0.7s ease forwards;
  }
  @keyframes dropIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .desktop-dropdown-content a {
    font-family: var(--ff-link);
    font-size: var(--fs-nav);
    color: var(--fc-desktop-dropdown);
    display: block;
    line-height: 1;
    padding: 14px 8px;
    text-decoration: none;
  }

  .desktop-dropdown-content a:hover,
  .desktop-dropdown-content a:focus {
    color: var(--clr-neutral-100);
    background-color: var(--clr-primary);
    transition: color 0.5s ease;
  }
  .desktop-dropdown-content a:active {
    color: var(--primary-font-clr);
    background-color: var(--clr-secondary);
  }

  .desktop-nav-dropdown:hover .desktop-dropdown-content,
  .desktop-nav-dropdown:focus-within .desktop-dropdown-content {
    display: block;
  }
}

/* ========================================================================
   HOME PAGE STYLES  
   ======================================================================== */

.eyebrow {
  margin-inline: auto;
  text-align: center;
  font-size: var(--fs-body-300);
  color: var(--clr-neutral-400);
}
.light-eyebrow {
  margin-inline: auto;
  text-align: center;
  font-size: var(--fs-body-300);
  color: #a2a2a6;
}

/* INTRODUCTION CONTAINER */
.introduction-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.introduction-container > p {
  padding-bottom: 3rem;
}

/* STOCK BANNER */
.banner-background {
  background-color: var(--clr-primary);
}
.banner-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10rem;
  justify-items: center;
  grid-template-areas:
    "stock1"
    "stock2"
    "stock3"
    "stock4";
}

.featured-stock-one {
  grid-area: stock1;
}
.featured-stock-two {
  grid-area: stock2;
}
.featured-stock-three {
  grid-area: stock3;
}
.featured-stock-four {
  grid-area: stock4;
}

.banner-container > img {
  width: 245px;
}

/* FEATURED CARD SECTION -- HOMEPAGE */

.featured-card-container {
  display: grid;
  gap: 8rem;
  grid-template-columns: 1fr;
  justify-items: center;
  grid-template-areas:
    "card1"
    "card2"
    "card3"
    "card4";
}

.featured-card-container > div {
  max-width: 400px;
  display: flex;
}

.featured-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 100%;
}

.featured-card .primary-btn {
  align-self: center;
}

.featured-card__title {
  padding-top: 3rem;
}

.featured-card__text {
  padding: 3rem 0;
  width: 100%;
}

.featured-card__img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center center;
  border-radius: 1rem;
}

.featured-card__img-container {
  height: 300px;
  width: 100%;
  overflow: hidden;
  border-radius: 1rem;
}

/* Responsive adjustments */
@media (min-width: 28em) {
  .featured-card__img-container {
    height: 320px;
  }
  .featured-card__img {
    height: 320px;
  }
  .featured-card-container > div {
    max-width: 460px;
  }
}

@media (min-width: 70.31em) {
  .featured-card-container {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "card1 card2"
      "card3 card4";
  }
  .featured-card-container > div {
    max-width: 400px;
  }
  .featured-card__img-container {
    height: 300px;
  }
  .featured-card__img {
    height: 300px;
  }
}

/* Grid area assignments */
.featured-card--one {
  grid-area: card1;
}
.featured-card--two {
  grid-area: card2;
}
.featured-card--three {
  grid-area: card3;
}
.featured-card--four {
  grid-area: card4;
}

/* USP SECTION */

.usp-section {
  background-color: rgba(31, 98, 255, 0.2);
}

.usp-container {
  display: grid;
  gap: 8rem;
  grid-template-columns: 1fr;
  justify-items: center;
  grid-template-areas:
    "usp1"
    "usp2"
    "usp3"
    "usp4"
    "usp5"
    "usp6";
}

.usp-container > div {
  max-width: 400px;
  display: grid;
  justify-items: center;
  margin: 0 auto;
  grid-template-rows: auto auto 1fr;
  align-items: start;
  width: 200px;
}

.usp-container > div > h3 {
  padding-top: 3rem;
}

.usp-container > div > p {
  padding: 3rem 0;
}

/* Grid area assignments */
.usp-one {
  grid-area: usp1;
}
.usp-two {
  grid-area: usp2;
}
.usp-three {
  grid-area: usp3;
}
.usp-four {
  grid-area: usp4;
}
.usp-five {
  grid-area: usp5;
}
.usp-six {
  grid-area: usp6;
}

/* REVIEW SLIDE-SHOW SECTION */
.slideshow-container {
  width: 100%;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

/* Review Text Styles */
.reviews-container {
  font-family: var(--ff-body);
  font-size: var(--fs-body-400);
  font-weight: var(--fw-heading);
  color: var(--primary-font-clr);
  background-color: var(--clr-neutral-100);
  line-height: 1.7em;
  text-align: center;
  width: 100%;
  padding-top: 3rem;
  margin: 0 auto;
}

.reviews-container i::after {
  content: "";
  display: block;
  height: 0.1em;
}

/* Pointer cursor for arrow buttons */
.prev,
.next {
  cursor: pointer;
}
/* Styling for slideshow dots */
.dot-container {
  margin-top: 20px;
}

.dot {
  height: 10px;
  width: 10px;
  background-color: var(--clr-primary); /* Color of inactive dots */
  border-radius: 50%;
  display: inline-block;
  margin: 0 8px;
  transition: background-color 0.3s;
}

.active,
.dot:hover {
  background-color: #717171;
  background-color: var(
    --clr-secondary
  ); /* Color of active dot or hover color */
}

/* Styling for slideshow container */
.slideshow-container {
  position: relative; /* Ensure positioning context for absolute positioning of arrows */
  width: 100%;
  margin: auto;
}

/* Styling for slideshow arrows */
.prev,
.next {
  position: absolute;
  top: 50%;
  width: 50px;
  height: 50px;
  color: var(--clr-primary); /* Arrow color */
  text-align: center;
  line-height: 50px; /* Center arrow vertically */
  font-size: 34px;
  cursor: pointer;
  z-index: 1; /* Ensure arrows appear above slides */
  transform: translateY(-50%); /* Center arrows vertically */
  display: none;
  background: none;
  border: none;
}

/* Positioning the arrows */
.next {
  right: 0;
}
.prev {
  left: 0;
}

/* Hover effect for arrows */
.prev:hover,
.next:hover {
  color: var(--clr-secondary); /* Darker background on hover */
}

/*News Letter Container*/
.newsletter-form-group {
  text-align: center;
}

.newsletter-title {
  grid-area: news-title;
}
.newsletter-title > h2 {
  color: var(--secondary-font-clr);
}
.newsletter-description {
  grid-area: news-description;
  width: 90%;
}
.newsletter-form {
  grid-area: news-form;
}
.newsletter-background {
  background-color: var(--clr-primary);
}
.newsletter-container {
  font-family: var(--ff-body);
  display: grid;
  justify-items: center;
  justify-content: space-evenly;
  align-content: center;
  gap: 3rem;
  grid-template-areas:
    "news-title"
    "news-description"
    "news-form";
  height: 500px;
}
.newsletter-description > p {
  color: var(--secondary-font-clr);
}
/*HP Subscribe Form */
.newsletter-form-control {
  font-family: var(--ff-body);
  font-size: var(--fs-body-300);
  font-weight: var(--fw-body);
  color: rgb(221, 221, 221);
  padding: 0.5rem 0;
  width: 100%;
  /* Remove default styling */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  margin: 0;
  outline: none;
  background: none;
  border: none;
  border-radius: 0;
  border-bottom: 2px solid var(--clr-secondary);
  transition: border-color 0.3s; /* smoother visual change */
  text-align: center;
  width: 22rem;
}

/* Style for when input field is focused */
.newsletter-form-control:focus {
  outline: none; /* Remove default focus outline */
  border-color: var(--clr-neutral-100);
}

/* Style for textarea */
textarea.newsletter-form-control {
  resize: none; /* Prevent resizing */
  overflow: auto; /* Ensure scrollbars appear when needed */
}

.newsletter-form-label {
  font-family: var(--ff-form-label);
  font-size: var(--fs-form-label);
  font-weight: var(--fw-form-label);
  color: var(--secondary-font-clr);
  text-align: center;
}

.newsletter-input-group {
  position: relative;
  width: 100%;
  padding: 0.5rem 0;
}

/* Newsletter form button */
.newsletter-form-btn {
  font-family: var(--ff-form-btn);
  font-size: var(--fs-form-btn);
  font-weight: var(--fw-form-btn);
  color: var(--fc-form-btn);
  background-color: var(--clr-secondary);
  text-align: center;
  text-decoration: none;
  border-style: none;
  cursor: pointer;
  margin: 25px auto 0 auto;
  width: fit-content;
  white-space: nowrap;
  padding: 10px 28px 10px 28px;
  border-radius: 1.8rem;
  background-position: center;
  transition: background 0.8s;
  display: block;
}
.newsletter-form > form > .newsletter-form-group:nth-of-type(1) {
  margin-bottom: 25px;
}
.newsletter-form-btn:hover,
.newsletter-form-btn:focus {
  background-color: var(--clr-neutral-100);
  background-image: radial-gradient(circle, transparent 1%, #91b3a6 1%);
  background-position: center;
  background-size: 15000%;
}
.newsletter-form-btn:active {
  background-color: var(--clr-neutral-100);
  background-size: 100%;
  transition: background 0s;
}

/* FAQ Section*/
.faq-btn {
  background-color: inherit;
  font-family: var(--ff-body);
  font-size: var(--fs-body-500);
  font-weight: var(--fw-form-btn);
  color: var(--clr-primary);
  cursor: pointer;
  padding: 10px 0;
  width: fit-content;
  border: none;
  outline: none;
  transition: 0.4s;
}
.faq-active,
.faq-btn:hover {
  color: #1f62ff;
}
.faq-btn:focus-within {
  color: #1f62ff;
}

.faq-panel {
  background-color: inherit;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.faq-btn:before {
  content: "+";
  color: var(--clr-secondary);
  margin-right: 5px;
}

.faq-active:before {
  content: "-";
}
.faq-panel > p,
.faq-container:not(h2),
.faq-panel,
.faq-btn {
  text-align: left;
  color: var(--clr-neutral-100);
}
.faq-container > h2 {
  text-align: center;
  color: var(--clr-neutral-100);
}
.faq-bg {
  background-color: var(--clr-primary);
}

/* Spacing between service and general FAQ groups */
.faq-group-separator {
  margin: 2rem 0;
  border-top: 1px solid #e5e5e5;
  opacity: 0.5;
}

/* Styling for general FAQs - lighter background */
.faq-item {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding-inline: 1rem;
  margin-bottom: 0.75rem;
}

.faq-item .faq-btn {
  background-color: transparent;
  opacity: 0.9;
}

.faq-item .faq-panel {
  background-color: rgba(0, 0, 0, 0.01);
}

/*CTA SECTION - INDEX/SUB PAGES*/
.cta-section {
  display: grid;
  align-items: center;
  justify-items: center;
}

.cta-container {
  --max-width: 1080px;
  --padding: 1rem;
  width: min(var(--max-width), 100% - (var(--padding) * 7));
  margin-inline: auto;
  display: grid;
  align-items: center;
  justify-items: center;
  text-align: center;
}

.cta-container > p:nth-of-type(1) {
  padding-bottom: 0.5em;
}

.cta-container > h2 {
  text-align: center;
}

.cta-container > p:nth-of-type(2) {
  padding: 1.8em 0.2em;
}

.cta-container > div {
  margin-top: 1.5em;
}

/* EXTERNAL LOGO SECTION */
.external-logo-container {
  display: grid;
  gap: 8rem;
  grid-template-columns: auto;
  justify-items: center;
  grid-template-areas:
    "city"
    "wras"
    "gas"
    "wbg";
}

.city-grid {
  grid-area: city;
}
.wras-grid {
  grid-area: wras;
}
.gas-grid {
  grid-area: gas;
}
.wbg-grid {
  grid-area: wbg;
}

/* =========================================================
   MEDIA QUERIES - HOME PAGE (MAIN CONTENT)
   ========================================================= */

@media (min-width: 23em) {
  /* Newsletter email input style */
  .newsletter-form-control {
    width: 27rem;
  }
}

@media (min-width: 26em) {
  /* Newsletter email input style */
  .newsletter-form-control {
    width: 28rem;
  }
}

@media (min-width: 28em) {
  .usp-container > div {
    max-width: 460px;
  }
}

@media (min-width: 46em) {
  /* Review Text Styles */
  .reviews-container {
    width: 80%;
  }

  /* REVIEW ARROW */
  .prev,
  .next {
    display: block;
  }

  /* USP SECTION */
  .usp-container {
    display: grid;
    gap: 100px 10px;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "usp1 usp2"
      "usp3 usp4"
      "usp5 usp6";
  }

  /* CTA SECTION WIDTH */
  .cta-section > * {
    max-width: 58rem;
  }

  /* EXTERNAL LOGO SECTION */
  .external-logo-container {
    grid-template-areas:
      "city wras"
      "gas wbg";
    align-items: center;
  }
}

@media (min-width: 70.31em) {
  /* USP SECTION */
  .usp-container {
    display: grid;
    gap: 100px 10px;
    grid-template-columns: auto;
    grid-template-areas:
      "usp1 usp2 usp3"
      "usp4 usp5 usp6";
  }
  .usp-container > div {
    max-width: 400px;
  }

  /* CTA SECTION WIDTH */
  .cta-section > * {
    max-width: 75rem;
  }

  /* EXTERNAL LOGO SECTION */
  .external-logo-container {
    grid-template-areas: "city wras gas wbg";
    align-items: center;
  }
}

@media (min-width: 80.31em) {
  /* Newsletter Container */
  .newsletter-container {
    justify-content: space-between;
    align-items: center;
    grid-template-columns: 300px 350px 280px;
    grid-template-areas: "news-title news-description news-form";
  }

  .newsletter-title > h2,
  .newsletter-description > p {
    text-align: left;
  }

  .newsletter-form-group,
  .newsletter-form-control {
    text-align: left;
  }

  .newsletter-form-btn {
    margin: unset;
    margin-top: 25px;
  }

  .usp-container > div {
    width: 245px;
  }
}

/* ========================================================================
   FOOTER STYLES 
   ======================================================================== */

/* FOOTER BASE STYLES */

/* General Text & Links */
footer :not(h4):not(h3) {
  color: var(--primary-font-clr);
  font-size: var(--fs-footer);
}
footer h3 {
  font-size: var(--fs-h4);
}
footer li {
  list-style: none;
}
footer a {
  text-decoration: none;
}

/* Link States */
.footer-nav-list > li > a:hover,
.footer-credits > div > a:hover {
  color: var(--clr-secondary);
  font-weight: 800;
}
.footer-nav-list > li > a:focus,
.footer-credits > div > a:focus {
  color: var(--clr-secondary);
  font-weight: 800;
}
.footer-nav-list > li > a:active,
.footer-credits > div > a:active {
  color: var(--clr-secondary);
  background-size: 100%;
  transition: background 0s;
}

/* FOOTER LAYOUT */

/* Grid Containers */
.footer-section-logo {
  grid-area: footer-section-logo;
}
.footer-section-contact {
  grid-area: footer-section-contact;
}
.footer-section-nav {
  grid-area: footer-section-nav;
}
.footer-container {
  display: grid;
  align-items: start;
  gap: 5rem;
  grid-template-areas:
    "footer-section-logo"
    "footer-section-contact"
    "footer-section-nav";
}
footer > div {
  border-top: 1px grey solid;
  padding: 7em 0;
}

/* Section Spacing */
.footer-section-logo > a > img,
.footer-section-contact > div > h4,
.footer-section-contact > div > h3 {
  padding-bottom: 2rem;
}
.footer-section-nav > h4,
.footer-section-nav > h3 {
  padding-bottom: 2.3rem;
  color: var(--primary-font-clr);
}
.footer-section-logo p {
  max-width: 300px;
}
.footer-nav-list > li {
  padding-bottom: 0.5rem;
}

/* FOOTER CREDITS */
.footer-credits {
  padding: 3.5rem 0;
}
.footer-credits > * {
  padding: 0.5rem 0;
}

/* Developer Link */
.dev-link-text {
  position: relative;
}
.dev-link-text::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: rgba(114, 22, 242, 1);
  transition: width 0.3s;
}
.dev-link-text:hover::before {
  width: 100%;
}
.dev-link-text:hover {
  font-weight: 800;
}

/* SOCIAL ICONS */

.social-icon {
  width: 48px;
  display: inline;
}
.ml-2 {
  margin-left: 2rem;
}
.icon-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.icon-container > div {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.svg-google-g {
  width: 22px;
  height: 22px;
  fill: var(--clr-neutral-100);
  background-color: var(--clr-secondary);
  border-radius: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

.bg-light {
  position: relative;
  width: 48px;
  height: 48px;
  background-color: var(--clr-secondary);
  border-radius: 50%;
}
.social-container,
.facebook-image_container > a {
  display: flex;
  align-items: center;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   MEDIA QUERIES - FOOTER STYLES
   ========================================================= */

@media (min-width: 46em) {
  .footer-container {
    grid-template-columns: auto;
    grid-template-areas: "footer-section-logo footer-section-nav footer-section-contact";
  }
  .footer-section-logo p {
    max-width: 200px;
  }
  .footer-credits {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 3.5rem 0;
  }
  .footer-credits > div > a {
    margin: 0 1rem;
  }
}

@media (min-width: 62.31em) {
  .footer-section-logo p {
    max-width: 300px;
  }

  .footer-nav-list > li > a,
  .footer-credits > div > a {
    position: relative;
  }

  .footer-nav-list > li > a::before,
  .footer-credits > div > a::before {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--clr-neutral-100);
    transition: width 0.3s;
  }

  .footer-nav-list > li > a:hover::before,
  .footer-credits > div > a:hover::before {
    width: 100%;
  }

  .footer-nav-list > li > a:hover,
  .footer-credits > div > a:hover {
    color: var(--tertiary-font-clr);
    font-weight: 800;
  }
}

@media (min-width: 70.31em) {
  .footer-container {
    justify-content: space-between;
    grid-template-areas: "footer-section-logo footer-section-nav footer-section-contact";
  }
  .footer-section-nav {
    margin: 0 auto;
  }
}

/* ========================================================================
   SERVICES PAGE STYLES
   ======================================================================== */

.service-card {
  display: grid;
  grid-template-areas: "services-text" "services-image";
  gap: 3rem;
  margin: 0 auto;
  padding-bottom: 17rem;
}

.service-card__text-container {
  grid-area: services-text;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.service-card__text-container > a {
  margin: 0.5rem auto 0 auto;
}

.service-card__image-container {
  grid-area: services-image;
  display: flex;
  justify-self: center;
  overflow: hidden; /* Hide overflow to prevent images from affecting layout */
  width: 270px;
  height: 270px;
}

.service-card__image {
  width: 100%; /* Ensure the image fills its container horizontally */
  height: 100%; /* Ensure the image fills its container vertically */
  object-fit: cover; /* Crop images to cover the container */
  border-radius: 1rem;
}
.power-flush-image {
  width: 100%; /* Ensure the image fills its container horizontally */
  height: 100%; /* Ensure the image fills its container vertically */
  object-fit: cover; /* Crop images to cover the container */
  object-position: 30% 50%;
  border-radius: 1rem;
}
.service-card__text-container a {
  margin: 2.5rem auto;
}
.service-card__text-container > h3 {
  padding-bottom: 1.5rem;
}

.service-card:first-of-type {
  padding-top: 17rem;
}

/* =========================================================
   MEDIA QUERIES - SERVICES PAGE 
   ========================================================= */

@media (min-width: 23em) {
  .service-card__image-container {
    width: 290px;
    height: 290px;
  }
}
@media (min-width: 26em) {
  .service-card__image-container {
    width: 350px;
    height: 350px;
  }
}
@media (min-width: 46em) {
  .service-card__image-container {
    width: 400px;
    height: 400px;
  }
}
@media (min-width: 62.31em) {
  .service-card {
    grid-template-areas: "services-text services-image";
    max-height: 700px;
    gap: 10rem;
  }

  .service-card__text-container > h3,
  .service-card__text-container > p {
    text-align: left;
  }
  .service-card__text-container > a {
    margin: unset;
  }

  .service-card__image-container {
    align-items: flex-start; /* Align items at the start (top) of the container */
    height: 350px;
    width: 350px; /* Fixed height for the image container */
  }

  .service-card__text-container > a {
    margin-top: 1rem;
  }
}

@media (min-width: 70.31em) {
  .service-card {
    gap: 20rem;
  }
  .service-card__text-container {
    gap: 1.2rem;
  }

  .service-card__image-container {
    height: 380px;
    width: 380px;
  }
}

@media (min-width: 90.31em) {
  .service-card {
    gap: 20rem;
  }
  .service-card__text-container {
    gap: 1.5rem;
  }
}

/* ========================================================================
   COVID 19 / PRIVACY PAGE STYLES
   ======================================================================== */

.policy-container *:not(h2) {
  text-align: left;
}
.policy-container li {
  font-family: var(--ff-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-body-400);
  color: var(--primary-font-clr);
  padding: 0.5rem 0;
}
.policy-container > div,
.policy-container > h2 {
  margin-bottom: 6rem;
}
.policy-container > div > h3 {
  padding-bottom: 2rem;
}

/* ========================================================================
   ABOUT PAGE STYLES
   ======================================================================== */

.aboutpage-container > * {
  margin-inline: auto;
}

/* ========================================================================
    CONTACT PAGE STYLES
   ======================================================================== */

.hidden {
  display: none;
}
.contact-form-body {
  margin: 0 auto; /* Center the form horizontally */
  min-width: 260px;
  max-width: 100%; /* Adjusted width for responsiveness */
}

.contact-form-group {
  font-family: var(--ff-form-label);
  color: var(--primary-font-clr);
  text-align: left;
  font-size: var(--fs-form-label);
  font-weight: var(--fw-heading);
}

.contact-form-control {
  font-size: var(--fs-body-300);
  font-weight: var(--fw-body);
  background: none;
  /* Remove default styling */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  border: none;
  border-radius: 0;
  border-bottom: 2px solid var(--clr-secondary);
  width: 100%;
  transition: border-color 0.3s; /* smoother visual change */
}
.contact-input-group {
  padding: 0.5rem 0 3rem 0;
}
.contact-form-body > h2 {
  padding-bottom: 3rem;
}

/* Style for when input field is focused */
.contact-form-control:focus {
  outline: none; /* Remove focus outline */
  border-color: var(--clr-tertiary);
}

/* Style for textarea */
textarea.contact-form-control {
  overflow: auto; /* Ensure scrollbars appear when needed */
}

/* Contact Page Form Button */
.contact-form-btn {
  font-family: var(--ff-form-btn);
  font-size: var(--fs-form-btn);
  font-weight: var(--fw-form-btn);
  color: var(--fc-form-btn);
  background-color: var(--clr-tertiary);
  text-align: center;
  text-decoration: none;
  border-style: none;
  cursor: pointer;
  margin: 3rem auto 0 auto;
  width: fit-content;
  white-space: nowrap;
  padding: 10px 28px 10px 28px;
  border-radius: 1.8rem;
  background-position: center;
  transition: background 0.8s;
  display: block;
}

.contact-form-btn:hover,
.contact-form-btn:focus {
  background-color: var(--clr-primary);
  background-image: radial-gradient(circle, transparent 1%, #91b3a6 1%);
  background-position: center;
  background-size: 15000%;
  color: var(--clr-neutral-100);
}
.contact-form-btn:active {
  background-color: var(--clr-neutral-100);
  background-size: 100%;
  transition: background 0s;
  color: var(--clr-primary);
}

/*Email address style */
.emailText {
  font-size: var(--fs-body-200);
  margin: 0 auto;
}

/* =========================================================
   MEDIA QUERIES - CONTACT PAGE 
   ========================================================= */

@media (min-width: 30em) {
  .contact-form-body {
    max-width: 70%; /* Adjusted width for responsiveness */
  }
}

/* ========================================================================
   COVID 19 / PRIVACY PAGE STYLES
   ======================================================================== */

.policy-container *:not(h2) {
  text-align: left;
}
.policy-container li {
  font-family: var(--ff-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-body-300);
  color: var(--primary-font-clr);
  padding: 0.5rem 0;
}
.policy-container > div,
.policy-container > h2 {
  margin-bottom: 6rem;
}
.policy-container > div > h3 {
  padding-bottom: 2rem;
}

.policy-container {
  background-color: #f8f9fa;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.policy-container h2 {
  color: #2c3e50;
  border-bottom: 3px solid #3498db;
  padding-bottom: 0.5rem;
  margin-bottom: 2rem;
  font-size: var(--fs-h2);
}

.policy-container h3 {
  color: #34495e;
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: var(--fs-h3);
  border-left: 4px solid #3498db;
  padding-left: 1rem;
}

.policy-container h4 {
  color: #2c3e50;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-size: var(--fs-h4);
}

.policy-container p {
  line-height: 1.6;
  margin-bottom: 1rem;
  color: #444;
}

.policy-container ul {
  margin: 1rem 0;
  padding-left: 2rem;
}

.policy-container li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
  color: #444;
}

.business-details {
  background-color: #e8f4f8;
  padding: 1rem;
  border-radius: 4px;
  border-left: 4px solid #3498db;
  margin: 1rem 0;
}

.contact-info {
  font-weight: bold;
  color: #2c3e50;
}

.section-divider {
  border: none;
  height: 2px;
  background: linear-gradient(to right, #3498db, transparent);
  margin: 3rem 0;
}

.disclaimer {
  background-color: #fff3cd;
  border: 1px solid #ffeaa7;
  padding: 1rem;
  border-radius: 4px;
  margin-top: 2rem;
  color: #856404;
}

.disclaimer strong {
  color: #6c5700;
}

/* ========================================================================
    Scroll Effects
   ======================================================================== */

main h2,
main h3,
main img,
main p,
main button,
main label,
main input,
main textarea,
main ul,
main li {
  opacity: 0;
  transition: opacity 1.8s ease;
}

main .primary-btn,
main .secondary-btn,
main .tertiary-btn,
main .contact-form-btn {
  opacity: 0; /* Fully opaque */
  transition: opacity 1.8s ease; /* Transition opacity changes */
}

/* Add the fade-in effect on scroll */
main .primary-btn.in-viewport,
main .secondary-btn.in-viewport,
main .tertiary-btn.in-viewport,
main .contact-form-btn.in-viewport {
  opacity: 1; /* Fully transparent */
}

/* Clear effect on service page */
.service-page h1,
.service-page h2,
.service-page h3,
.service-page img,
.service-page p,
.service-page button,
.service-page label,
.service-page input,
.service-page textarea,
.service-page ul,
.service-page li,
.aboutpage-container p {
  opacity: 1 !important;
  transition: none !important;
}

/* ========================================================================
   PHOTO GALLERY FOR INDIVIDUAL SERVICE PAGE 
   ======================================================================== */

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.service-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 30px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.service-header h1 {
  font-family: var(--ff-heading);
  font-size: var(--fs-h1);
  margin-bottom: 10px;
  font-weight: var(--fw-heading);
}

.service-header p {
  font-size: var(--fs-body-400);
  opacity: 0.9;
}

.service-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.service-tab {
  padding: 12px 24px;
  background: white;
  border: 2px solid var(--clr-neutral-200);
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: var(--fw-nav);
  font-family: var(--ff-link);
  font-size: var(--fs-body-200);
  color: var(--primary-font-clr);
}

.service-tab:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border-color: var(--clr-secondary);
}

.service-tab.active {
  background: var(--clr-tertiary);
  color: var(--secondary-font-clr);
  border-color: var(--secondary-font-clr);
}

.gallery-container {
  position: relative;
  min-height: 400px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.gallery-grid.loading {
  opacity: 0.7;
}

.photo-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  border: 1px solid var(--clr-neutral-200);
}

.photo-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  border-color: var(--clr-secondary);
}

.photo-wrapper {
  position: relative;
  width: 100%;
  height: 250px;
  overflow: hidden;
}

.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.photo-card:hover img {
  transform: scale(1.05);
}

.photo-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--clr-primary) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: flex-end;
  padding: 20px;
}

.photo-card:hover .photo-overlay {
  opacity: 0.9;
}

.photo-info {
  color: var(--secondary-font-clr);
}

.photo-title {
  font-size: var(--fs-body-300);
  font-weight: var(--fw-heading);
  margin-bottom: 5px;
  font-family: var(--ff-heading);
}

.photo-description {
  font-size: var(--fs-body-200);
  opacity: 0.9;
}

.photo-details {
  padding: 20px;
}

.photo-location {
  color: var(--clr-neutral-300);
  font-size: var(--fs-body-200);
  /*margin-bottom: 8px; */
  font-weight: var(--fw-body);
}

.photo-date {
  color: var(--clr-neutral-200);
  font-size: var(--fs-body-200);
}

/* Lightbox Styles */
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.lightbox.active {
  display: flex;
}

.lightbox-content {
  max-width: 90vw;
  max-height: 90vh;
  width: 90vw;
  height: 90vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lightbox-image {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 8px;
}

.lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  color: white;
  font-size: 30px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: background 0.3s ease;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-size: 30px;
  cursor: pointer;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: background 0.3s ease;
}

.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.3);
}

.lightbox-prev {
  left: -60px;
}

.lightbox-next {
  right: -60px;
}

.no-photos {
  text-align: center;
  padding: 60px 20px;
  color: var(--clr-neutral-300);
}

.no-photos h3 {
  margin-bottom: 10px;
  font-size: var(--fs-h5);
  font-family: var(--ff-heading);
  font-weight: var(--fw-heading);
}

.no-photos p {
  font-size: var(--fs-body-300);
}

@media (max-width: 480px) {
  .lightbox-content {
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
  }
}

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

  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
  }

  .photo-wrapper {
    height: 200px;
  }

  .service-tabs {
    gap: 8px;
  }

  .service-tab {
    padding: 10px 16px;
    font-size: 0.9rem;
  }
  .lightbox-content {
    max-width: 95vw;
    max-height: 95vh;
    width: 95vw;
    height: 95vh;
  }
  .lightbox-prev {
    left: 10px;
  }

  .lightbox-next {
    right: 10px;
  }

  .lightbox-close {
    top: 10px;
    right: 10px;
  }
}