/* ==========================================================================
   1. DESIGN SYSTEM VARIABLES & GLOBAL RESETS
   ========================================================================== */
:root {
  /* Structural Color Palette */
  --color-primary: #0b6db6;
  --color-secondary: #0fb8fe;
  --color-black: #000000;
  --color-darker: #181818;
  --color-dark: #2a2a2a;
  --color-medium: #333333;
  --color-light: #444444;
  --color-lighter: #848484;
  --color-white: #ffffff;
  --color-white-highlight: #a0e3ff;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  outline: none !important;
  scroll-behavior: smooth !important;
}

html {
  font-size: 62.5%; 
  overflow-x: hidden;
}

body {
  height: 100%;
  font-size: 1.4rem;
  line-height: 1.8;
  font-family: 'Lato', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  color: var(--color-darker);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: #0078ff;
  text-decoration: none;
}

hr.style1 { 
  width: 100%;
  border: 0; 
  height: 2px;
  margin-top: 0;
  margin-bottom: 20px;
  background-color: var(--color-dark);
}

.add-flex {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.preloader-wrapper {
  height: 100%;
  width: 100%;
  background: var(--color-white);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;
}


/* ==========================================================================
   2. NAVIGATION HEADER & DROPDOWNS
   ========================================================================== */
.nav-cont {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999 !important; 
  transform: translateZ(0); 
  display: flex;
  align-items: center; 
  width: 100%;
  height: 55px; 
  background-image: url("../images/header_bg.png");
  background-position: center top;
  background-size: auto 100%;
  background-repeat: repeat-x;
  border-bottom: 1px solid var(--color-white);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center; 
  width: 100%;
  height: 100%;
  padding: 0 30px; 
}

.navbar-brand {
  display: flex;
  justify-content: center;
  align-items: center; 
  height: 55px;
}

.nav-logo-bug {
  display: block;
  width: auto;
  height: 45px;
  transform: translateY(6px); 
}

.nav-logo-bug .st0 {
  fill: var(--color-primary);
  transition: fill 0.3s ease;
}

.navbar-brand:hover .nav-logo-bug .st0 {
  fill: var(--color-secondary);
}

.nav-links {
  display: flex;
  align-items: center; 
  list-style: none;
  gap: 20px;
  height: 100%;
}

.nav-links li {
  display: flex;
  align-items: center;
  height: 100%;
}

.nav-links a {
  color: var(--color-primary); 
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1; 
  text-transform: uppercase;
  transition: color 0.5s ease;
}

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

/* Dropdown Container */
.nav-links .dropdown {
  position: relative;
}

.nav-links .dropdown > a {
  display: inline-flex;
  align-items: center;
  gap: 6px; 
}

/* Caret Arrows */
.nav-links .dropdown > a::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--color-primary); 
  pointer-events: none;
  transform-origin: center center;
  transition: transform 0.3s ease, border-top-color 0.3s ease;
}

.nav-links .dropdown:hover > a::after {
  border-top-color: var(--color-secondary); 
  transform: rotate(180deg); 
}

/* Desktop Dropdown Visibility */
.nav-links .dropdown-menu {
  position: absolute;
  top: 100%; 
  left: 50%;
  z-index: 1000;
  list-style: none;
  min-width: 180px;
  padding: 10px 0;
  background-color: rgba(10, 22, 30, 0.75); 
  backdrop-filter: blur(10px);
  border: 1px solid var(--color-white);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-52%) translateY(10px); 
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.nav-links .dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-52%) translateY(0); 
}

.nav-links .dropdown-menu li {
  display: block;
  width: 100%;
  height: auto; 
}

.nav-links .dropdown-menu a {
  display: block;
  padding: 10px 20px;
  color: var(--color-white); 
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap; 
  transition: all 0.25s ease;
}

.nav-links .dropdown-menu a:hover {
  color: var(--color-secondary);
  background-color: rgba(0, 0, 0, 0.25);
}

/* Desktop Mobile Toggle Skeleton Element */
.mobile-nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
}

.hamburger-bar {
  display: block;
  width: 25px;
  height: 3px;
  background-color: var(--color-primary);
  transition: all 0.3s ease-in-out;
}


/* ==========================================================================
   3. HERO INTERACTIVE LAYER ARCHITECTURE
   ========================================================================== */
#homepage-hero {
  position: relative;
  overflow: hidden;
  z-index: 1;
  display: flex;
  justify-content: center;  
  align-items: center;      
  width: 100vw;
  height: 100vh;
  background: #09161e url('../images/hero_bg.jpg') no-repeat center center / cover;
}

/* Canvas Containers (Background & Foreground Waves) */
.particles-bg, 
.particles-fg {
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  height: 100%;
  transform: translateY(40px); 
}

.particles-bg { z-index: 2; }
.particles-fg { z-index: 4; }

.particles-bg canvas,
.particles-fg canvas {
  position: absolute !important;
  top: 0;
  left: 0;
}

/* --- Integrated Underwater Light Rays Architecture --- */
#homepage-hero .light-rays, 
#homepage-hero .light-rays > *::before {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#homepage-hero .light-rays {
  list-style: none;
  pointer-events: none;
  filter: blur(0.6rem);
  z-index: 2;
  margin: 0;
  padding: 0;
}

#homepage-hero .light-rays > * {
  --deg: 0;
  --length: 0rem;
  --thickness: 20px;
  --duration: 2s;
  --delay: 1s;
  --rotate: 0deg;
  --degRange: 72.5deg;
  --spreadRange: 40vw;
  position: absolute;
  transform-style: preserve-3d;
  perspective: 500px;
  width: var(--thickness);
  height: calc(20% + 370px + var(--length));
  left: 50%;
  transform: translateX(calc(-50% + var(--deg) * var(--spreadRange) * -1 + 0.5 * var(--spreadRange))) translateY(-100px) rotateZ(calc(var(--degRange) * -0.5 + var(--deg) * var(--degRange))) rotateX(0.01deg);
  transform-origin: center -100px;
  mix-blend-mode: screen;
  animation: shimmer linear var(--duration) calc(var(--delay) * -1) infinite alternate forwards, rotate ease-in-out calc(var(--duration) * 3.14) calc(var(--delay) * -1) infinite alternate forwards;
}

#homepage-hero .light-rays > *::before {
  content: "";
  background: linear-gradient(to bottom, #0fb8fe, rgba(166, 255, 248, 0) 100%);
  transform-origin: top center;
  transform: rotateX(40deg);
}

/* Light Ray Child Modifiers */
#homepage-hero .light-rays > *:nth-child(1) { --deg: 0.868503594; --thickness: 26.1303571408px; --length: 21.9896296328px; --duration: 2.4200002499s; --delay: 2.0061918849s; --rotate: -0.567942984deg; }
#homepage-hero .light-rays > *:nth-child(2) { --deg: 0.5509614273; --thickness: 25.5891686107px; --length: -39.0857311045px; --duration: 2.1341199516s; --delay: 2.1869014453s; --rotate: -0.0659927588deg; }
#homepage-hero .light-rays > *:nth-child(3) { --deg: 0.6529222705; --thickness: 15.0733853187px; --length: -49.8893989816px; --duration: 1.3894880467s; --delay: 2.6332216115s; --rotate: -0.8046679268deg; }
#homepage-hero .light-rays > *:nth-child(4) { --deg: 0.8171796748; --thickness: 8.7192693662px; --length: -0.271658161px; --duration: 1.0117755195s; --delay: 2.4147948136s; --rotate: -1.2864348927deg; }
#homepage-hero .light-rays > *:nth-child(5) { --deg: 0.9572565005; --thickness: 9.4387466861px; --length: 43.35491759px; --duration: 2.4458889519s; --delay: 2.4924147605s; --rotate: 0.4007406388deg; }
#homepage-hero .light-rays > *:nth-child(6) { --deg: 0.3829256412; --thickness: 33.3685387996px; --length: 29.3433107816px; --duration: 1.3544923763s; --delay: 2.5072618803s; --rotate: 3.2297292133deg; }
#homepage-hero .light-rays > *:nth-child(7) { --deg: 0.6440479922; --thickness: 33.1606403496px; --length: -4.0982824346px; --duration: 2.1574697995s; --delay: 2.0814120345s; --rotate: -1.8932289399deg; }
#homepage-hero .light-rays > *:nth-child(8) { --deg: 0.0160787719; --thickness: 10.6428973982px; --length: 4.2597005609px; --duration: 1.2809926414s; --delay: 2.9956535529s; --rotate: 1.2531370858deg; }
#homepage-hero .light-rays > *:nth-child(9) { --deg: 0.7354448507; --thickness: 24.1076620524px; --length: -31.3517683472px; --duration: 2.0678244283s; --delay: 2.7677396969s; --rotate: -3.7841153578deg; }
#homepage-hero .light-rays > *:nth-child(10) { --deg: 0.7725680384; --thickness: 25.6318647286px; --length: 40.9097969952px; --duration: 2.2544200853s; --delay: 2.5588869684s; --rotate: 1.2046031935deg; }
#homepage-hero .light-rays > *:nth-child(11) { --deg: 0.4280647465; --thickness: 15.8869610734px; --length: 1.6860203997px; --duration: 1.4008129632s; --delay: 2.912882705s; --rotate: 1.7260237743deg; }
#homepage-hero .light-rays > *:nth-child(12) { --deg: 0.11602396; --thickness: 23.6775998539px; --length: 34.4850107865px; --duration: 2.4760540831s; --delay: 2.7331145518s; --rotate: 1.2941083058deg; }
#homepage-hero .light-rays > *:nth-child(13) { --deg: 0.443194323; --thickness: 14.3231577132px; --length: 31.5334871206px; --duration: 1.2392984225s; --delay: 2.1022422175s; --rotate: 3.4799402864deg; }
#homepage-hero .light-rays > *:nth-child(14) { --deg: 0.379130132; --thickness: 16.4088793496px; --length: 41.5397149311px; --duration: 2.0959418441s; --delay: 2.9215811793s; --rotate: 0.5863297926deg; }
#homepage-hero .light-rays > *:nth-child(15) { --deg: 0.11416474; --thickness: 29.001356693px; --length: 6.2040848687px; --duration: 1.0490327991s; --delay: 2.2803221645s; --rotate: -3.5681760225deg; }
#homepage-hero .light-rays > *:nth-child(16) { --deg: 0.9445654716; --thickness: 8.9746407044px; --length: -7.8384569044px; --duration: 2.4936908385s; --delay: 2.1547062037s; --rotate: 2.745070512deg; }
#homepage-hero .light-rays > *:nth-child(17) { --deg: 0.9154303313; --thickness: 18.3900192948px; --length: 4.7700762812px; --duration: 2.2765450242s; --delay: 2.7286440057s; --rotate: -1.2183492395deg; }
#homepage-hero .light-rays > *:nth-child(18) { --deg: 0.1081298452; --thickness: 23.8519249668px; --length: 11.3023889872px; --duration: 1.4886856663s; --delay: 2.1635067343s; --rotate: -3.914521724deg; }
#homepage-hero .light-rays > *:nth-child(19) { --deg: 0.1899370409; --thickness: 28.8190164218px; --length: -25.5710868669px; --duration: 1.6988644934s; --delay: 2.2037664046s; --rotate: 2.4256358703deg; }
#homepage-hero .light-rays > *:nth-child(20) { --deg: 0.5808615286; --thickness: 31.7240669374px; --length: -22.3288865784px; --duration: 1.1325543629s; --delay: 2.7858653783s; --rotate: -0.1760362166deg; }
#homepage-hero .light-rays > *:nth-child(21) { --deg: 0.9806410045; --thickness: 19.4198116079px; --length: 13.406898508px; --duration: 2.3250953294s; --delay: 2.0100379302s; --rotate: 2.3805629484deg; }
#homepage-hero .light-rays > *:nth-child(22) { --deg: 0.4822340169; --thickness: 26.4623680309px; --length: -1.4605200396px; --duration: 2.3864957354s; --delay: 2.1455535581s; --rotate: -1.3033035162deg; }
#homepage-hero .light-rays > *:nth-child(23) { --deg: 0.6127628484; --thickness: 15.5118016839px; --length: 6.3489827053px; --duration: 1.339406349s; --delay: 2.5631095439s; --rotate: -2.5039744151deg; }
#homepage-hero .light-rays > *:nth-child(24) { --deg: 0.0270134428; --thickness: 11.3767245366px; --length: -38.6033030704px; --duration: 2.2504032693s; --delay: 2.9432935981s; --rotate: 1.3815789527deg; }
#homepage-hero .light-rays > *:nth-child(25) { --deg: 0.4896168759; --thickness: 10.8378286347px; --length: -26.3139682814px; --duration: 2.021343625s; --delay: 2.532136572s; --rotate: 0.6684844012deg; }
#homepage-hero .light-rays > *:nth-child(26) { --deg: 0.3913231989; --thickness: 14.8312194645px; --length: 17.8854649258px; --duration: 2.0862825531s; --delay: 2.9338337163s; --rotate: -0.1289385047deg; }
#homepage-hero .light-rays > *:nth-child(27) { --deg: 0.1052687155; --thickness: 28.2696185172px; --length: 38.0897907955px; --duration: 1.0275833253s; --delay: 2.360197511s; --rotate: -2.4846940898deg; }
#homepage-hero .light-rays > *:nth-child(28) { --deg: 0.4877379875; --thickness: 27.6579282712px; --length: 33.6124827791px; --duration: 2.0213998066s; --delay: 2.3303922623s; --rotate: -3.1446839511deg; }
#homepage-hero .light-rays > *:nth-child(29) { --deg: 0.5376615808; --thickness: 19.4222164917px; --length: 6.1776335358px; --duration: 2.0260669557s; --delay: 2.0082664652s; --rotate: -2.4358714854deg; }
#homepage-hero .light-rays > *:nth-child(30) { --deg: 0.1508967757; --thickness: 33.1802459256px; --length: 4.4555825249px; --duration: 1.1900556736s; --delay: 2.9030467095s; --rotate: 1.8768755555deg; }
#homepage-hero .light-rays > *:nth-child(31) { --deg: 0.3174439599; --thickness: 24.4099124545px; --length: 14.5885865px; --duration: 1.1631586173s; --delay: 2.8928341093s; --rotate: 2.575736214deg; }
#homepage-hero .light-rays > *:nth-child(32) { --deg: 0.9085287921; --thickness: 21.4884561167px; --length: 48.4404392707px; --duration: 1.8060091631s; --delay: 2.5051022716s; --rotate: -3.8190335742deg; }

/* Keyframe Calculations */
@-webkit-keyframes shimmer {
  0% { opacity: 0.33; }
  100% { opacity: 0.03; }
}
@keyframes shimmer {
  0% { opacity: 0.33; }
  100% { opacity: 0.03; }
}
@-webkit-keyframes rotate {
  0% { rotate: 0deg; }
  100% { rotate: var(--rotate); }
}
@keyframes rotate {
  0% { rotate: 0deg; }
  100% { rotate: var(--rotate); }
}

/* Hero Content Styling */
.hero-logo-container {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 85vw;
  max-width: 1000px; /* Prevents oversized logo on 1080p / 4K screens */
  pointer-events: none;
}

.hero-logo-display {
  display: block;
  width: 100%;
  height: auto;
  max-height: 40vh; /* Keeps logo proportional on short/small screens */
  object-fit: contain;
}

.hero-tagline-container {
  position: absolute;
  bottom: 20vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 90vw;              
  pointer-events: none;
  gap: 15px;
}

.hero-tagline {
  color: var(--color-white);
  font-size: 3.25vw;
  font-weight: 300;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.hero-tagline span {
  font-size: 4.25vw;
  font-weight: 900;
  margin-top: 10px;
  display: block;
}

.hero-est {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 82%;
  color: var(--color-white);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  opacity: 0;
  animation: fadeInEst 0.5s ease-out 0.75s forwards;
}

.hero-est::before,
.hero-est::after {
  content: '';
  flex: 1;
  height: 5px;
  background: var(--color-primary);
  opacity: 0.5;
  max-width: 0%;
  transition: none; 
  animation: expandLines 1s cubic-bezier(0.25, 1, 0.5, 1) 1s forwards;
}

.hero-est::before {
  margin-right: 0px;
  animation: expandLines 1s cubic-bezier(0.25, 1, 0.5, 1) 1s forwards, 
             addMarginLeft 1s cubic-bezier(0.25, 1, 0.5, 1) 1s forwards;
}

.hero-est::after {
  margin-left: 0px;
  animation: expandLines 1s cubic-bezier(0.25, 1, 0.5, 1) 1s forwards, 
             addMarginRight 1s cubic-bezier(0.25, 1, 0.5, 1) 1s forwards;
}

@keyframes fadeInEst {
  0% { opacity: 0; transform: translateY(5px); }
  100% { opacity: 0.85; transform: translateY(0); }
}
@keyframes expandLines {
  0% { max-width: 0%; }
  100% { max-width: 100%; }
}
@keyframes addMarginLeft {
  0% { margin-right: 0px; }
  100% { margin-right: 20px; }
}
@keyframes addMarginRight {
  0% { margin-left: 0px; }
  100% { margin-left: 20px; }
}

/* Scroll Arrow Mechanism */
.scroll {
  position: absolute;
  bottom: 10px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  animation: slideDown 0.5s ease-out 0.75s forwards;
}

@keyframes slideDown {
  0%   { opacity: 0; transform: translateY(-50px); }
  100% { opacity: 1; transform: translateY(0); }
}

.scrollTxt1 { 
  font-size: 80%; 
  font-weight: 500; 
  color: var(--color-white); 
  text-transform: uppercase; 
  letter-spacing: 0.5px; 
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); 
}

.scrollArrow { 
  width: 40px; 
  height: auto; 
  fill: var(--color-white); 
}

.quiver {
  width: 100vw;
  height: 30px;
  margin-bottom: -30px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 10;
}

.downArrow {
  opacity: 0;
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid var(--color-primary);
  filter: drop-shadow(0px 2px 0px var(--color-black));
}

.quiver.is-visible .downArrow {
  animation: slideDown2 0.5s ease-out forwards;
}

@keyframes slideDown2 { 
  0% { opacity: 0; transform: translateY(-50px); } 
  100% { opacity: 1; transform: translateY(0); } 
}


/* ==========================================================================
   4. CONTENT CONTAINERS & CORE TYPOGRAPHY
   ========================================================================== */
.container-white {
  text-align: left;
  padding: 100px 10vw;
  background-color: var(--color-white);
  color: var(--color-darker);
}

.container-blue {
  text-align: left;
  padding: 100px 10vw;
  background-color: var(--color-primary);
  color: var(--color-white);
  position: relative;
  z-index: 11;
}

.container-black {
  text-align: left;
  padding: 100px 10vw;
  background-color: var(--color-darker);
  color: var(--color-white);
}

.container-insta {
  text-align: left;
  padding: 100px 0 20px 0;
  background-color: var(--color-white);
  color: var(--color-darker);
}

.container-cta {
  text-align: left;
  padding: 100px 10vw;
  background-color: var(--color-secondary);
  color: var(--color-white);
  position: relative;
  z-index: 11;
}

.container-white p,
.container-blue p,
.container-black p,
.container-cta p {
  margin-bottom: 20px;
}

.container-insta p {
  margin: 0 10vw 100px 10vw;
}

.container-blue span {
  text-transform: uppercase;
  font-weight: 900;
  font-size: 6rem;
  display: block;
  line-height: 0.95;
}

/* ScrollReveal Animations Baseline Setup */
.container-white h1,
.container-blue h1 {
  text-transform: uppercase;
  font-weight: 300;
  font-size: 4rem;
  margin: 10px 0 30px 0;
  opacity: 0;
  transform: translateY(5px);
  will-change: transform, opacity;
  line-height: 1.25;
}

.container-white h2,
.container-blue h2,
.container-black h2,
.container-insta h2 {
  text-transform: uppercase;
  font-weight: 300;
  font-size: 3rem;
  margin: 0 0 30px 0;
  opacity: 0;
  transform: translateY(5px);
  will-change: transform, opacity;
  line-height: 1.25;
}

.container-white h1 span,
.container-blue h1 span {
  display: block;
  font-weight: 300;
  font-size: 2.5rem;
}

.container-white h1, 
.container-white h2,
.container-insta h2 {
  color: var(--color-primary);
  text-align: center;
}

.container-blue h1,
.container-blue h2,
.container-black h2 {
  color: var(--color-white);
  text-align: center;
}

.container-white h1.is-visible, 
.container-white h2.is-visible,
.container-blue h1.is-visible,
.container-blue h2.is-visible,
.container-black h2.is-visible,
.container-insta h2.is-visible {
  animation: headingFadeInUp 0.5s ease-out forwards;
}

@keyframes headingFadeInUp {
  0% { 
    opacity: 0; 
    transform: translateY(25px); 
  }
  100% { 
    opacity: 1;
    transform: translateY(0); 
  }
}

#service {
  padding: 100px 10vw;
  color: var(--color-white);
  background: linear-gradient(rgba(24, 24, 24, 0.5), rgba(24, 24, 24, 0.5)), 
              var(--color-darker) url('../images/wrench_bg.png') no-repeat center center / cover;
  text-align: left;
  width: 100%;
}

#cta {
  padding: 100px 10vw;
  color: var(--color-white);
  background: var(--color-primary) url('../images/blue_bg.jpg') no-repeat center bottom / cover;
  text-align: left;
  width: 100%;
}

#manufacturers, #products {
  scroll-margin-top: 50px;
}


/* ==========================================================================
   5. BUTTON COMPONENTS
   ========================================================================== */
.btn-blue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 30px;
  font-family: 'Lato', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-white);
  background-color: var(--color-primary);
  border: 2px solid var(--color-white);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.5s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

.btn-blue:hover,
.btn-blue:focus {
  color: var(--color-white);
  background-color: var(--color-secondary);
  border-color: var(--color-white);
  box-shadow: 0 6px 12px rgba(15, 184, 254, 0.25); 
}

.btn-blue:active {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-blue-black {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 30px;
  font-family: 'Lato', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-white);
  background-color: var(--color-primary);
  border: 2px solid var(--color-darker);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.5s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

.btn-blue-black:hover,
.btn-blue-black:focus {
  color: var(--color-white);
  background-color: var(--color-secondary);
  border-color: var(--color-darker);
  box-shadow: 0 6px 12px rgba(15, 184, 254, 0.25); 
}

.btn-blue-black:active {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav-links a.btn-blue {
  color: var(--color-white);
  margin-top: 0;
  padding: 10px 15px;
  transition: all 0.5s ease;
}

.nav-links a.btn-blue:hover {
  color: var(--color-white);
  background-color: var(--color-secondary);
  box-shadow: 0 6px 12px rgba(15, 184, 254, 0.25); 
}


/* ==========================================================================
   6. SERVICES GRID ARCHITECTURE
   ========================================================================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  gap: 2px;
  background-color: var(--color-black);
  border-bottom: 2px solid var(--color-black);
  border-top: 2px solid var(--color-black);
  position: relative;
  z-index: 1;
}

.service-card {
  position: relative;
  height: 40vw;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-white);
  padding: 40px;
  cursor: pointer;
}

.service-parallax-bg {
  position: absolute;
  top: -25%;
  left: 0;
  width: 100%;
  height: 150%;
  background-size: cover;
  background-position: center;
  z-index: 0;
  will-change: transform;
}

.service-info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
  background-color: rgba(0, 0, 0, 0.75);
  transition: all 0.4s ease-in-out;
}

.service-info h3 {
  text-transform: uppercase;
  margin: 0;
  font-size: 1.8rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
  transform: translateY(0);
  transition: transform 0.4s ease-in-out, color 0.4s ease;
}

.service-info h3 span {
  display: block;
  font-weight: 700;
}

.service-card:hover .service-info h3 {
  transform: translateY(-30px);
  color: var(--color-secondary);
}

.btn-card-hover {
  display: inline-block;
  padding: 10px 24px;
  font-family: 'Lato', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-white);
  background-color: var(--color-primary);
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  bottom: 35%;
  transform: translateY(25px);
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out, background-color 0.25s ease, border-color 0.25s ease;
}

.service-card:hover .btn-card-hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.btn-card-hover:hover {
  background-color: var(--color-secondary);
  box-shadow: 0 6px 12px rgba(15, 184, 254, 0.25); 
}

@media (max-width: 800px) {
  .services-grid {
    grid-template-columns: 1fr; 
  }
  .service-card {
    height: 300px; 
  }
}


/* ==========================================================================
   7. PRODUCTS AND SYSTEMS SUB-GRID
   ========================================================================== */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 40px;
  width: 100%;
}

.product-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 250px;
  padding: 15px;
  background-color: var(--color-white);
  border: 1px solid rgba(11, 109, 182, 0.15);
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s ease;
}

.product-box-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.product-box h3 {
  color: var(--color-primary) !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  margin: 0 !important;
  line-height: 1.3;
  transition: color 0.3s ease;
}

.product-box .product-icon {
  width: 80px;
  height: 80px;
  color: var(--color-primary);
  display: block;
  transition: color 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s ease;
}

.product-box:hover {
  box-shadow: 0 12px 24px rgba(11, 109, 182, 0.12);
  border-color: var(--color-secondary);
}

.product-box:hover h3 {
  color: var(--color-secondary) !important;
}

.product-box:hover .product-icon {
  color: var(--color-secondary);
}

@media (max-width: 600px) {
  .products-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .product-box {
    min-height: 200px;
  }
}


/* ==========================================================================
   8. SITE FOOTER
   ========================================================================== */
.site-footer {
  background-color: var(--color-darker);
  color: var(--color-white);
  padding: 80px 10vw 30px 10vw;
  text-align: center;
  border-top: 2px solid var(--color-dark);
}

.footer-contact { 
  text-align: center;
  margin-bottom: 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.footer-contact span { 
  margin: 0 15px;
  color: var(--color-secondary);
}

.footer-brand { 
  display: flex; 
  justify-content: center; 
}

.brand-logo_footer { 
  height: 275px; 
  display: block; 
  margin: 0 auto;
}

.footer-socials {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
}

.footer-socials a {
  display: inline-block;
  line-height: 0;
}

.socialIcon {
  width: 45px;          
  height: 45px;
  fill: var(--color-white); 
  border-radius: 50%;   
  box-shadow: 0 3px 12px rgba(15, 184, 254, 0); 
  transition: fill 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: fill, box-shadow;
}

.footer-socials a:hover .socialIcon,
.footer-socials a:focus .socialIcon {
  fill: var(--color-secondary); 
  box-shadow: 0 3px 12px rgba(15, 184, 254, 0.25); 
}


/* ==========================================================================
   9. SPECIALIZED DYNAMIC SCROLL ANIMATIONS
   ========================================================================== */
.anniversary-logo {
  max-width: 500px;
  width: 100%;
  height: auto;
  margin-bottom: 15px;
  will-change: transform;
  transform: scale(1.25); 
  transition: transform 0.1s linear;
}


/* ==========================================================================
   10. RESPONSIVE DESIGN & MOBILE NAVIGATION LAYER (ADDITIONS)
   ========================================================================== */
@media screen and (max-width: 1075px) {
  
  /* Navigation Bar Adjustments */
  .mobile-nav-toggle {
    display: flex;
  }
  
  /* Hide the sub-menu for About Us on mobile screens */
  .nav-links .no-mobile-dropdown .dropdown-menu {
    display: none !important;
  }

  /* Remove the caret arrow indicator from the link on mobile */
  .nav-links .no-mobile-dropdown > a::after {
    display: none !important;
  }

  .nav-links {
    position: fixed;
    top: 55px; 
    right: -100%; 
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    height: calc(100vh - 55px);
    background: var(--color-darker);
    padding: 20px 30px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    transition: right 0.4s ease-in-out;
    overflow-y: auto;
  }

  /* Slide navigation panel out when active */
  .nav-links.mobile-active {
    right: 0;
  }

  .nav-links li {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 1px solid var(--color-dark);
  }

  .nav-links a {
    display: block;
    padding: 15px 0;
    font-size: 1.4rem;
  }

  /* Handle Dropdowns Inside Mobile System Overrides */
  .dropdown {
    position: relative;
    width: 100%;
  }
  
  .nav-links .dropdown-menu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: none;
    background: var(--color-dark);
    border: none;
    box-shadow: none !important;
    transform: none !important;
    width: 100%;
  }
  
  .nav-links a.btn-blue {
    margin-top: 20px;
	padding: 15px 15px;
	text-align: center;
  }

  .dropdown.open .dropdown-menu {
    display: block;
  }

  /* Transform Mobile Menu Toggle Button Hooks */
  .mobile-nav-toggle.open .hamburger-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .mobile-nav-toggle.open .hamburger-bar:nth-child(2) {
    opacity: 0;
  }
  .mobile-nav-toggle.open .hamburger-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
  }
  
  @media screen and (max-width: 900px) {

  /* Structural Content Fluid Layout Blocks */
  .services-grid, 
  .products-grid {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
  
  .container-white, 
  .container-blue,
  .container-black,
  .container-cta,
  #service,
  #cta {
    padding: 50px 25px!important;
  }
  
  .mission-container {
    font-size: 2.25rem!important;
	line-height: 3;
  }
  
  .container-white h2,
  .container-blue h2,
  .container-black h2,
  .container-insta h2 {
    font-size: 2rem;
  }

  .container-blue span {
    font-size: 2.25rem !important;
	line-height: 1.25;
  }
  
  .container-insta {
    padding: 60px 0 0 0;
  }
  
  .container-insta p {
    margin: 0 25px 60px 25px;
  }
  
  .site-footer {
    padding: 60px 25px 30px 25px;
  }
}

@media screen and (max-width: 576px) {
  .hero-tagline-container {
    width: 95vw;
    bottom: 25vh;
  }
  
  .hero-tagline,
  .hero-tagline span {
    font-size: 2.2rem !important;
  }
  
  .hero-logo-container {
    width: 88vw;
    top: 36%;
  }
  
  .hero-logo-display {
    max-height: 22vh;
  }

  .hero-est {
    font-size: 1.2rem !important;
    width: 90%;
  }
  
  .brand-logo_footer {
    height: 180px;
  }
  
  .container-white h1,
  .container-blue h1 {
    font-size: 2.25rem;
  }
}

/* --- Portrait (Phones) --- */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (orientation: portrait) {
.hero-tagline-container {
    margin-bottom: 5vh;
  }
  
  .particles-bg, .particles-fg {
    transform: translateY(0);
  }

  #service {
    background: var(--color-darker);
  }
  
  .footer-contact {
    font-size: 75%;
    letter-spacing: 0;
  }
  
  .footer-contact span {
    margin: 0 5px;
  }
  
  #intro {
    padding-top: 100px !important;
}
}

/* --- Landscape --- */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (orientation: landscape) {
  .hero-logo-container {
    top: 48%;
    max-width: 420px;
  }

  .hero-logo-display {
    max-height: 50vh;
  }

  .hero-tagline-container {
    display: none; /* Hides tagline on ultra-short landscape screens to prevent clutter */
  }
  
  .particles-bg, .particles-fg {
    transform: translateY(70px);
  }
  
  #service {
    background: linear-gradient(rgba(24, 24, 24, 0.5), rgba(24, 24, 24, 0.5)), var(--color-darker) url(../images/wrench_bg.png) no-repeat center bottom / 115% auto;
}
}