@font-face {
font-family: 'robotoreg';
src: url("ep-fonts/Roboto-Regular.woff2") format("woff2"),
     url("ep-fonts/Roboto-Regular.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap; /* Improves loading behavior */
}

@font-face {
font-family: 'robotolt';
src: url("ep-fonts/Roboto-Light.woff2") format("woff2"),
     url("ep-fonts/Roboto-Light.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap; /* Improves loading behavior */
}

@font-face {
font-family: 'robotomed';
src: url("ep-fonts/Roboto-Medium.woff2") format("woff2"),
     url("ep-fonts/Roboto-Medium.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap; /* Improves loading behavior */
}

body, html {
height: 100%;
margin: 0;
padding: 0px;
outline: none;
border: 0px;
font-size: 14pt;
line-height: 24pt;
font-family: 'robotoreg', sans-serif;
color: #000000;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; /* For some Androids */
-webkit-backface-visibility:  hidden;
}

img { border: 0; font-family: 'robotoreg', sans-serif; font-style: italic; color: #666666; font-size: 8pt; }
p { display: block; margin: 0; padding: 0; }
.textlink:link { color: #009d5a; text-decoration: underline; }
.textlink:visited { color: #009d5a; text-decoration: underline; }
.textlink:hover { color: #009d5a; text-decoration: none; }
.textlinkarrow { color: #009d5a; }
ul { padding-left: 20px }
sup { font-size: 57%; line-height: 0; font-weight: normal; position: relative; vertical-align: baseline; top: -0.4em; }
h2 { font-size: 28pt; line-height: 38pt; padding-bottom: 20px; margin: 0; font-family: 'robotomed', sans-serif; }
h3 { font-size: 18pt; line-height: 28pt; padding-bottom: 20px; margin: 0; font-family: 'robotoreg', sans-serif; }

.text-overlay {
pointer-events: none;
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: clamp(1rem, 3vw, 2.5rem);
border-radius: 15px;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
background-size: 100% 100%; /* Width is 100%, Height is 25% */
background-position: bottom left;
background-repeat: no-repeat; /* Stops the gradient from repeating vertically */
}
.text-overlay h2 { pointer-events: none; font-family: 'robotomed', sans-serif; font-size: 2.0vw; color: #ffffff; }
.heavy-arrow-right { pointer-events: none; top: 2px; font-size: 1.5vw; color: #ffffff; }

/* ============================== MOBILE MENU STARTS HERE ============================== */

#mobNav { display: none; }
#menu-text { display: none; }
.twentyfive { display: none; }
.navpointer { cursor: pointer; }

.navtop { width: 86%; margin: 50px auto 100px auto; }
.navmiddle { width: 86%; vertical-align: top; text-align: left; margin: 0px auto; padding: 0; }

.navmiddle a {
padding: 0px 0px 20px 0px;
text-decoration: none;
font-size: 20pt;
line-height: 22pt;
display: inline-block;
color: #ffffff;
font-family: 'robotoreg', sans-serif;
}

/* company slide starts here */

.moboverlay {
height: 100%;
width: 95%;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
opacity: 0;
position: fixed;
z-index: 110;
top: 0;
right: -95%;
background-color: #ffffff;
overflow-x: hidden; /* allows info inside div to scroll */
transition: 0.5s;
}

.slidetop { width: 86%; margin: 50px auto 75px auto; display: flex; align-items: center; }
.slidenavmobtitle { font-size: 12pt; color: #666666; margin-left: 20px; }
.slidemobmiddle { width: 86%; vertical-align: top; text-align: left; margin: 0px auto; padding-bottom: 50px; }

.slidemobmiddle a {
padding: 0px 0px 15px 0px;
text-decoration: none;
font-size: 15pt;
line-height: 17pt;
display: inline-block;
color: #000000;
font-family: 'robotoreg', sans-serif;
}

/* company slide ends here */

.closemobbtn {
font-family: 'robotolt', sans-serif;
font-size: 28pt;
color: #ffffff;
width: 50px;
height: 50px;
border-radius: 50%;
border: none;
cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
    padding-bottom: 4px;
}
.closemobbtnk { color: #000000; }
.closemobbtn:hover { color: #ffffff; background: rgba(0, 0, 0, 0.1); }
.closemobbtnk:hover { color: #000000; }

/* ============================== MOBILE MENU ENDS HERE ============================== */
/* ============================== VIDEO HEROES START HERE ============================== */

#video-container {
background-color: #000000;
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}  
   
#video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1.5s ease-in-out;
/* z-index: 1; */
}

#video-container video.active-video {
opacity: 1;
z-index: 1;
}

#preloader {
position: fixed;
top: 0; left: 0;
width: 100vw; height: 100vh;
background: #000;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: opacity 0.5s ease;
}

#preloader.hidden { opacity: 0; pointer-events: none; }

.spinner {
width: 50px;
height: 50px;
border: 5px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: #fff;
animation: spin 1s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================== VIDEO HEROES END HERE ============================== */
/* ============================== NAV STARTS HERE ============================== */

.mast-container {
position: fixed;
top: 20px; /* Starting position */
left: 0;
width: 100%;
transition: transform 0.3s ease-in-out;
z-index: 5;
}

/* Class added when scrolling down to hide the nav */
.mast-container.nav-hidden { transform: translateY(-180px); }

.nav-panel {
position: relative;
top: -50px;
opacity: 0;
transition: top 0.5s ease, opacity 0.5s ease;
z-index: 6;
width: 80%;
overflow: auto;
padding: 0px 0 0px 0; /* this controls "menu" spacing */
margin: 0 auto;
border-radius: 15px;
display: flex;
justify-content: space-between; /* Pushes images to outer edges */
align-items: center;            /* Vertically centers everything */
gap: 20px;                      /* Adds spacing between elements */
height: 140px;
background: linear-gradient(to right, white, transparent 50%, white);
border: 1px solid rgba(255, 255, 255, 0.25);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
}

/* Shadow applied by JavaScript */
.nav-panel.shad-active { box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.13); }

.center-text {
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: 5px;
text-align: center;
display: inline-block;
}

.hover-box {
display: inline-block;
padding: 5px 20px 4px 20px;
text-decoration: none;
text-transform: uppercase;
font-family: 'robotomed', sans-serif;
font-size: 11pt;
border-radius: 5px;
/* Default States */
color: #000000;
/* border-bottom: 7px solid #ffffff; */
transition: all 0.3s ease-in-out;
}

/* Hover State Modifications */
.hover-box:hover {
color: #ffffff;                 /* Changes text color */
background-color: #009d5a;      /* Changes background color */
}

.logo {
width: 130px;
height: auto;
margin: 0px 0px 0 45px;
padding-top: 7px;
}

.years {
width: 105px;
height: auto;
margin: 0px 45px 0 0px;
}

/* ============================== NAV ENDS HERE ============================== */
/* ============================== MEGAMENU RESOURCES START HERE ============================== */

#hoverCompany { cursor: pointer; transition: all 0.3s ease-in-out; }
#hoverServices { cursor: pointer; transition: all 0.3s ease-in-out; }
#hoverContact { cursor: pointer; }
#hoverOrder { cursor: pointer; }

/* Main Side-by-Side Layout */
.layout-container {
display: flex;            /* Positions direct children in a row */
flex-direction: row;      /* Places children side-by-side */
gap: 20px;                /* Creates even spacing between the columns */
width: 80%;
padding: 50px 20px 60px 20px;
margin: 0 auto;
box-sizing: border-box;
}

/* Individual Column Rules */
.columnlft {
padding: 20px;
width: 40%;
border-radius: 10px;
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(255, 255, 255, 0.9);
}
.columnlft h2 { font-size: 1.25rem; line-height: 1.3; color: #000000; padding-bottom: 20px; }
.columncenter {
padding: 20px;
width: 30%;
border-radius: 10px;
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(255, 255, 255, 0.9);
}
.columnrt {
padding: 20px;
width: 30%;
border-radius: 10px;
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(255, 255, 255, 0.9);
}

/* Vertical Button Column Layout */
.button-vertical-group {
display: flex;            /* Turns button container into a flexbox context */
flex-direction: column;   /* Stacks the buttons vertically */
gap: 0px;                 /* Creates even vertical spacing between buttons */
}

/* Buttons */
.button-vertical-group button {
background: none;
text-align: left;
padding: 12px 20px 11px clamp(15px, 2vw, 60px);
text-decoration: none;
font-family: 'robotoreg', sans-serif;
font-size: 12pt;
line-height: 16pt;
color: #000000;
border: none;
cursor: pointer;
width: 100%;
transform: translateX(0);
transition: transform 0.3s ease;
}
.button-vertical-group button p {
transform: translateX(0);
transition: transform 0.3s ease;
}
.button-vertical-group button:focus { outline: none; box-shadow: none; }
.button-vertical-group button:hover { background: linear-gradient(to right, rgba(0, 157, 90, 1), rgba(0, 157, 90, 0)); }
.button-vertical-group button:hover p { color: #ffffff; transform: translateX(5px); }

/* Picture box */
.navpanelpic {
border-radius: 10px;
overflow: hidden;
position: relative;
}
.navpanelpic img {
width: 100%;
height: auto;
display: block;
cursor: pointer;
object-fit: cover; /* Keeps the aspect ratio from stretching */
transition: transform 0.3s ease;
}
.navpanelpic:hover img { transform: scale(1.15); filter: saturate(1.5); }

.text-overlay-nav {
pointer-events: none;
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0 0 0 8%; 
border-radius: 10px;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
background-size: 100% 100%; /* Width is 100%, Height is 100% */
background-position: bottom left;
background-repeat: no-repeat; /* Stops the gradient from repeating vertically */
}
.text-overlay-nav h2 { pointer-events: none; font-family: 'robotomed', sans-serif; font-size: 1.25rem; color: #ffffff; }
.heavy-arrow-right-nav { pointer-events: none; top: 1px; font-size: 0.8rem; color: #ffffff; }

/* ============================== MEGAMENU RESOURCES END HERE ============================== */
/* ============================== COMPANY MEGAMENU STARTS HERE ============================== */

#coPanel { display: block; }
.coMenu {
position: fixed;
width: 80%;
left: 0;
right: 0;
padding: 105px 0 0 0;
margin-inline: auto; /* Centers the div within the left/right boundaries */
z-index: 4;
top: 20px;
overflow-x: hidden;
visibility: hidden;
opacity: 0;
border-radius: 15px;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.25);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.13);
/* transition: 0.3s ease; */
}

/* ============================== COMPANY MEGAMENU ENDS HERE ============================== */
/* ============================== SERVICES MEGAMENU STARTS HERE ============================== */

#servPanel { display: block; }
.servMenu {
position: fixed;
width: 80%;
left: 0;
right: 0;
padding: 105px 0 0 0;
margin-inline: auto; /* Centers the div within the left/right boundaries */
z-index: 4;
top: 20px;
overflow-x: hidden;
visibility: hidden;
opacity: 0;
border-radius: 15px;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.25);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.13);
/* transition: 0.3s ease; */
}

/* ============================== SERVICES MEGAMENU ENDS HERE ============================== */
/* ============================== HERO HEADLINE STARTS HERE ============================== */

.home-head {
position: absolute;
bottom: 10%;
left: 10%;
right: 10%;
z-index: 2;
display: none;
/* Forces the headline to stay on its own layer after it slides into place */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

.home-head { overflow: hidden; }

.home-head h1 {
margin: 0;
padding-bottom: 10px;
color: #ffffff;
font-size: 4.5vw;
line-height: 1;
font-family: 'robotomed', sans-serif;
display: inline-block;
animation: baseline 0.3s forwards cubic-bezier(.4,0,.39,1.04);
}
.home-head h2 {
margin: 0;
padding: 0;
color: #ffffff;
font-size: 2.25vw;
line-height: 1.3;
font-family: 'robotoreg', sans-serif;
display: inline-block;
animation: baseline 0.4s forwards cubic-bezier(.4,0,.39,1.04);
}
@keyframes baseline {
0% { transform: translateY(140%); }
100% { transform: translateY(0); }
}

/* ============================== HERO HEADLINE ENDS HERE ============================== */
/* ============================== ONE COLUMN STARTS HERE ============================== */

.fullpic { width: 100%; padding: 150px 0 0 0; }
.fullpic img { max-width: 100%; height: auto; display: block; }

.panspecs { padding: 0 10.5%; margin-top: 150px; overflow: hidden; }
.panspecsblock { text-align: center; padding: 15px 40px; border-radius: 8px; display: block; margin: 20px auto; background: #f7f7f7; box-sizing: border-box; }

.ete-text {
width: 100%;
padding: 150px 10.5% 0px 10.5%;
box-sizing: border-box;         /* Prevents padding from breaking layout width */
text-align: center;
}

.onehun-left {
width: 100%;
padding: 150px 10.5% 0px 10.5%;
box-sizing: border-box;         /* Prevents padding from breaking layout width */
}

.eighty-left {
width: 100%;
padding: 150px 20% 0px 20%;
box-sizing: border-box;         /* Prevents padding from breaking layout width */
}

/* ============================== ONE COLUMN ENDS HERE ============================== */
/* ============================== TWO COLUMNS START HERE ============================== */

.two-column-container {
display: flex;       /* Forces children to sit side by side */
width: 100%;
align-items: center;    /* Vertically centers text next to the image */
padding: 150px 0 0 0;
overflow: hidden;
}

.text-column {
width: 50%;
box-sizing: border-box; /* Includes padding/borders in the 50% width */
padding: 0 4% 0 10.5%;
}
.text-column-rt {
width: 50%;
box-sizing: border-box; /* Includes padding/borders in the 50% width */
padding: 0 10.5% 0 4%;
}
.text-column-rt-mob { display: none; }

.image-column, .image-column-lft { width: 50%; }
.image-column img { max-width: 100%; height: auto; display: block; border-radius: 15px 0 0 15px; }
.image-column-lft img { max-width: 100%; height: auto; display: block; border-radius: 0 15px 15px 0; }

/* ============================== TWO COLUMNS END HERE ============================== */
/* ============================== THREE COLUMNS START HERE ============================== */

.three-cols-core-container {
display: flex;
justify-content: space-between; /* Distributes space between items */
gap: 35px; /* Spacing between columns */
padding: 150px 10.5% 0px 10.5%;
width: 100%;                    /* Spans the full screen width */
box-sizing: border-box;         /* Prevents padding from breaking layout width */
}

.threecols-core { flex: 1; align-items: flex-start; position: relative; }
.threecols-core-pic { overflow: hidden; border-radius: 15px; }
.threecols-core img { width: 100%; height: auto; display: block; }
.threecols-core a[href] img { cursor: pointer; object-fit: cover; transition: transform 0.3s ease; }
.threecols-core a[href]:hover img { transform: scale(1.15); filter: saturate(1.5); }

.three-cols-container {
display: flex;
justify-content: space-between; /* Distributes space between items */
gap: 35px; /* Spacing between columns */
padding: 150px 10.5% 0px 10.5%;
width: 100%;                    /* Spans the full screen width */
box-sizing: border-box;         /* Prevents padding from breaking layout width */
}

/* The three child divs */
.threecols { flex: 1; align-items: flex-start; overflow: hidden; position: relative; border-radius: 15px; }
.threecols img {
cursor: pointer;
width: 100%;
height: auto;
display: block;
object-fit: cover; /* Keeps the aspect ratio from stretching */
transition: transform 0.3s ease;
}
.threecols:hover img { transform: scale(1.15); filter: saturate(1.5); }

.locations-container {
display: flex;
justify-content: space-between; /* Distributes space between items */
gap: 100px; /* Spacing between columns */
padding: 150px 20% 0px 20%;
width: 100%;                    /* Spans the full screen width */
box-sizing: border-box;         /* Prevents padding from breaking layout width */
}
.loccol { flex: 1; align-items: flex-start; overflow: hidden; position: relative; border-radius: 0; }

/* ============================== THREE COLUMNS END HERE ============================== */
/* ============================== RESPONSIVE VIDEO STARTS HERE ============================== */

.vidlayout {
width: 100%;
padding: 150px 25% 0px 25%;
box-sizing: border-box;
}

.vidcontainer {
position: relative;
width: 100%;
overflow: hidden;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-vid {
position: absolute;
top: 0px;
left: -1px;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}

/* ============================== RESPONSIVE VIDEO ENDS HERE ============================== */
/* ============================== GREEN BUTTON STARTS HERE ============================== */

.greenButton {
background-color: #009d5a;
border: none;
border-radius: 9999px;
color: #ffffff;
max-width: 280px;
padding: 12px 0px 14px 0px;
margin: 40px 0 0 0;
text-align: center;
text-decoration: none;
display: block;
font-size: 16pt;
transition: all 0.5s;
cursor: pointer;
}

.gb-centered { margin: 40px auto 0px auto; }

.greenButton span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}

.greenButton span:after {
content: '\2794';
position: absolute;
opacity: 0;
top: 2px;
right: -25px;
transition: 0.5s;
}

.greenButton:hover span { padding-right: 25px; }
.greenButton:hover span:after { opacity: 1; right: 0; }

/* ============================== GREEN BUTTON ENDS HERE ============================== */
/* ============================== FADE IN SLIDE TEXT RIGHT STARTS HERE ============================== */

.fade-in-item {
opacity: 0;
transform: translateX(-50px);
transition: opacity 0.7s ease, transform 0.7s ease;
transition-delay: var(--delay);
}

.fade-in-item.is-visible {
opacity: 1;
transform: translateX(0);
}

/* ============================== FADE IN SLIDE TEXT RIGHT ENDS HERE ============================== */
/* ============================== FADE IN SLIDE TEXT LEFT STARTS HERE ============================== */

.fade-in-textl {
opacity: 0;
transform: translateX(50px);
transition: opacity 0.7s ease, transform 0.7s ease;
transition-delay: var(--delay);
}

.fade-in-textl.is-visible {
opacity: 1;
transform: translateX(0);
}

/* ============================== FADE IN SLIDE TEXT LEFT ENDS HERE ============================== */
/* ============================== FADE IN SLIDE PICS RIGHT STARTS HERE ============================== */

.fade-in-right {
opacity: 0;
transform: translateX(-100px); 
transition: opacity 0.7s ease-out, transform 0.7s ease-out;
will-change: opacity, transform;
}

/* The class JavaScript will add when the element is visible */
.fade-in-right.is-visible {
opacity: 1;
transform: translateX(0);
}

/* ============================== FADE IN SLIDE PICS RIGHT ENDS HERE ============================== */
/* ============================== FADE IN SLIDE PICS LEFT STARTS HERE ============================== */

.fade-in-left {
opacity: 0;
/* Start 100px to the right to slide LEFT into position */
transform: translateX(100px); 
/* Smooth transition for both properties */
transition: opacity 0.7s ease-out, transform 0.7s ease-out;
will-change: opacity, transform;
}

/* The class JavaScript will add when the element is visible */
.fade-in-left.is-visible {
opacity: 1;
transform: translateX(0);
}

/* ============================== FADE IN SLIDE PICS LEFT ENDS HERE ============================== */
/* ============================== FADE IN AND UP STARTS HERE ============================== */

.in-and-up {
opacity: 0;
transform: translateY(75px);
transition: opacity 1.5s ease, transform 0.75s ease;
}
.in-and-up.active {
opacity: 1;
transform: translateY(0);
}

.in-up-two {
opacity: 0;
transform: translateY(125px);
transition: opacity 1.5s ease, transform 0.75s ease;
}
.in-up-two.active {
opacity: 1;
transform: translateY(0);
}

.in-up-three {
opacity: 0;
transform: translateY(175px);
transition: opacity 1.5s ease, transform 0.75s ease;
}
.in-up-three.active {
opacity: 1;
transform: translateY(0);
}

.in-up-four {
opacity: 0;
transform: translateY(225px);
transition: opacity 1.5s ease, transform 0.75s ease;
}
.in-up-four.active {
opacity: 1;
transform: translateY(0);
}

/* ============================== FADE IN AND UP ENDS HERE ============================== */
/* ============================== SUB PAGES START HERE ============================== */

.sub-half-hero {
/* background-color: #000000; */
display: block;
width: 100%;
max-height: 600px;
overflow: hidden;
position: relative;
}

.sub-half-hero img {
display: block;
width: 100%;
max-height: 600px;
object-fit: cover; /* Ensures the image fills the space beautifully */
-webkit-backface-visibility: hidden;  
will-change: opacity, transform;
backface-visibility: hidden;
/* transform: translate3d(0,0,0); */
opacity: 0;
/* transform: scale(1); */
transform: scale(1) translate3d(0, 0, 0);
transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.sub-half-hero img.is-loaded {
opacity: 1;
transform: scale(1.1) translate3d(0, 0, 0);
}

.sub-page-hero {
background-color: #000000;
display: block;
width: 100%;
height: 100dvh;
overflow: hidden;
position: relative;
}

.sub-page-hero img {
display: block;
width: 100%;
height: 100%;
object-fit: cover; /* Ensures the image fills the space beautifully */
-webkit-backface-visibility: hidden;  
will-change: opacity, transform;
backface-visibility: hidden;
/* transform: translate3d(0,0,0); */
opacity: 0;
/* transform: scale(1); */
transform: scale(1) translate3d(0, 0, 0);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.sub-page-hero img.is-loaded {
opacity: 1;
transform: scale(1.1) translate3d(0, 0, 0);
}

.sub-head {
position: absolute;
top: 75%;
left: 10%;
z-index: 2;
display: none;
}

.sub-head h1 {
letter-spacing: 0px;
margin: 0;
color: white;
overflow: hidden;
padding: 0;
line-height: 1.3;
}

.sub-head h1 .top {
font-size: 4.5vw;
font-family: 'robotomed', sans-serif;
display: inline-block;
animation: baseline 0.3s forwards cubic-bezier(.4,0,.39,1.04);
}
@keyframes baseline {
0% { transform: translateY(140%); }
100% { transform: translateY(0); }
}
/* order page starts here */
.order-hero { width: 100%; position: relative; }
.order-hero img { width: 100%; max-height: 100vh; object-fit: cover; }
/* order page ends here */

/* ============================== SUB PAGES END HERE ============================== */

/* ============================== TEAM NAV BAR STARTS HERE ============================== */

#teamnav {
position: sticky;
position: -webkit-sticky;
top: 0;
color: #ffffff;
padding: 20px 5%;
margin: 0;
text-align: center;
background-color: #009d5a;
z-index: 3;
}

.teambutt {
background-color: #009d5a;
border: none;
color: #ffffff;
padding: 0;
text-align: center;
font-size: 14pt;
line-height: 20pt;
margin: 0px 10px;
transition: 0.4s;
cursor: pointer;
}
.teambutt:hover:not(.active) { color: #ffff00; }
.teambutt.active { color: #ffff00; }
.teambutt.visited { color: #ffffff; }

#rds, #tams, #bms {
scroll-margin-top: 70px; /* Added space to account for sticky nav bar */
}

html { scroll-behavior: smooth; }

/* ============================== TEAM NAV BAR ENDS HERE ============================== */

/* ============================== TEAM PAGE STARTS HERE ============================== */

.teammob { display: none; }

.team-head {
width: 100%;
padding: 70px 10.5% 0px 10.5%;
box-sizing: border-box;         /* Prevents padding from breaking layout width */
text-align: center;
}

.team-container {
width: 100%;
padding: 70px 17% 0px 17%;
box-sizing: border-box;         /* Prevents padding from breaking layout width */
text-align: center;
}

.textgrid { display: table; padding: 0; width: 100%; margin: 0 auto; overflow: hidden; }
.textgrid-mid { padding: 40px 0 0px 0; }
.textcell { display: table-cell; text-align: left; vertical-align: top; width: 21%; height: auto; padding: 0 2%; }
.teamtext { padding-top: 20px; margin: 0; }
.teamtext h3 {
font-size: 18pt;
line-height: 28pt;
padding: 0px;
margin: 0;
font-family: 'robotoreg', sans-serif;
}

.teampic {
border-radius: 15px;
padding: 0;
margin: 0;
overflow: hidden; /* clip the excess when child gets bigger than parent */
}
.teampic img { width: 100%; display: block; }
.tslideli { margin: 0; padding: 10px 0 0px 0; }
.tslideli img { width: 20px; border-radius: 0px; }
	
/* ============================== TEAM PAGE ENDS HERE ============================== */
/* ============================== LOGO TICKER STARTS HERE ============================== */

.tickerback {
width: 100%;
padding: 55px 50px 25px 50px;
background: #00559f;
box-sizing: border-box;
margin-top: 150px;
}

.tickerback h2 {
color: #ffffff;
font-size: 2.5vw;
line-height: 1.25;
padding: 0;
text-align: center;
font-family: 'robotomed', sans-serif;
}

.scroller { 
max-width: 1300px;
margin: 0 auto;
background: #00559f;
}

.scroller__inner {
display: flex;
padding-block: 1rem;
flex-wrap: wrap;
gap: 1rem;
}

.scroller[data-animated="true"] {
overflow: hidden;
-webkit-mask: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);
mask: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);
}

.scroller[data-animated="true"] .scroller__inner {
width: max-content;
flex-wrap: nowrap;
animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
animation-delay: 1s;
}

.scroller[data-direction='left'] {
--_animation-direction: forwards;
}

.scroller[data-speed='fast'] {
--_animation-duration: 20s;
}

@keyframes scroll {
to {
transform: translate(calc(-50% - 0.5rem));
}
}

.scroller__inner img {
height: 120px;
width: 210px;
border-radius: 10px;
object-fit: cover;
transition: 300ms;
filter: grayscale(.2);
/* cursor: pointer; USE FOR LOGO LINKS */
}

/*
(OPTIONAL - pause logo ticker and enlarge on hover)
.scroller[data-animated="true"] .scroller__inner:has(img:hover, img:active, img:focus) {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.scroller__inner img:is(:hover, :focus, :active) { transform: scale(1.1); }
*/

/* ============================== LOGO TICKER ENDS HERE ============================== */
/* ============================== FOOTER STARTS HERE ============================== */

.epfoot {
width: 100%;
padding: 55px 10.5% 20px 10.5%;
box-sizing: border-box;         /* Prevents padding from breaking layout width */
display: flex; /* Aligns child items horizontally */
justify-content: space-between; /* Pushes divs to the extreme left and right edges */
align-items: center; /* Vertically centers both divs relative to the screen */
}

.left-box {
padding: 0px;
margin: 0px 0 0 45px;
width: 130px;
}
.left-box img { width: 130px; height: auto; display: block; }
.right-box { width: auto; display: flex; justify-content: flex-end; margin: 0px 45px 0 0; }
.right-box img { height: 30px; width: auto; display: block; }
.social-space { margin: 0 30px; }

.footlogobuts { display: flex; gap: 20px; align-items: center; }

.footlinx {
display: inline-block;
margin: 0 0 0 30px;
text-transform: uppercase;
font-family: 'robotomed', sans-serif;
font-size: 11pt;
color: #000000;
}
.footlinx a:link { color: #000000; text-decoration: none; }
.footlinx a:visited { color: #000000; text-decoration: none; }
.footlinx a:hover { color: #009d5a; text-decoration: none; }

.fine {
width: 100%;
text-align: center;
box-sizing: border-box; 
padding: 0px 10.5% 55px 10.5%;
font-family: 'robotoreg', sans-serif;
font-size: 10pt;
line-height: 16pt;
color: #000000;
}
.fine a:link { color: #000000; text-decoration: underline; }
.fine a:visited { color: #000000; text-decoration: underline; }
.fine a:hover { color: #009d5a; text-decoration: none; }

/* ============================== FOOTER ENDS HERE ============================== */