:root {
  --clr-neutral-100: hsl(0, 0%, 100%);
  --clr-primary-100: hsl(205, 15%, 58%);
  --clr-primary-400: hsl(215, 25%, 27%);
  --clr-primary-800: hsl(217, 33%, 17%);
  --clr-primary-900: hsl(218, 33%, 9%);
}







@font-face {
    font-family: 'BRAVE';
    src: url('BRAVEEightyone-Regular.woff2') format('woff2'),
        url('BRAVEEightyone-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Gotham';
    src: url('Gotham-Book.woff2') format('woff2'),
        url('Gotham-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('Gotham-Bold.woff2') format('woff2'),
        url('Gotham-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('Gotham-Black.woff2') format('woff2'),
        url('Gotham-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('Gotham-Light.woff2') format('woff2'),
        url('Gotham-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('Gotham-Medium.woff2') format('woff2'),
        url('Gotham-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('Gotham-Thin.woff2') format('woff2'),
        url('Gotham-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}







body {
    margin: 0;
    padding: 0;
}

button:hover {cursor: pointer;}

.slick-next, .slick-prev {display: none !important; visibility: hidden !important;}
a, buttton {text-decoration: none; cursor: pointer; color: inherit;}
span {margin: 0px;}
b {font-weight: 500;}
h1, h2, h3 {font-family: 'Gotham'; font-weight: 500;}
p, button {font-family: 'Gotham'; font-weight: normal;}


/* Reset visited link appearance */
a::visited {
    color: inherit; /* Resets visited link color */
    text-decoration: inherit; /* Resets visited link text decoration */
    background: inherit; /* Resets background */
}



.overlay {border-image-source: linear-gradient(blue, red) 1; border-image-slice: fill 1;}
.centVH {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.centH {position: absolute; left: 50%; transform: translateX(-50%);}
.centV {position: absolute; top: 50%; transform: translateY(-50%);}



.cta {
    background: #FE911D;
    border-radius: 0px 20px 0px 20px;
    color: #FFFFFF;
    padding: 7% 14% 7% 14%;
}


.new-cta {
    background: #FE911D;
    border-radius: 0px 20px 0px 20px;
    color: #FFFFFF;
    padding: 4%;
}



button {
    border: none;
}


#cover-nav {width: 100%; background: #FFF;}
#hidden_navSack_mblOnly {width: 100%; height: auto; display: none;}
#hidden_navSack_mblOnly button {width: 100%; height: 60px; color: #FFFFFF; background: #000814;}

nav {
    width: 85%;
    height: 70px;
    margin: 0 auto;
    background: #FFFFFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#lft-nav #rgt-nav {
    width: 50%;
}



.logo-nav {height: 70px;}
#rgt-nav > a > button {height: 100%; background: transparent; color: #000; margin-left: 10px; font-weight: 500; font-size: 18px;
}


#rgt-nav > a > button:hover {height: 100%; background: transparent; color: #000; margin-left: 10px; font-weight: 500; color: red;
}





#home_header {
    width: 100%;
    margin: 0 auto;
    height: min(80vh, 600px);
    background-size: cover;
}


.texthdr_inhome {
    width: min(90%, 1200px);
    height: 100%;
    margin: 0 auto;
    color: #FFFFFF;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}


.third_text {margin-top: 15px !important; font-size: 35px;}
.fourth_text {font-size: 22px;}
.third_text, .fourth_text {width: 100%; color: #FE911C;}

#hdr_inhome_btn {width: 100%; display: inline-flex; justify-content: center; flex-wrap: wrap; gap: 10px;}
#hdr_inhome_btn > a > * {font-size: 18px; font-weight: 500; padding: 10px; background: rgba(2, 19, 35, 0.5); border:1px solid #FE911D; color: #FE911D;}
.texthdr_inhome > h1 {text-align: center;margin: 0px; font-weight: 500;}

#bg-content {
    width: 100%;
    background: #020202;
}


#hcenter_fS {
    color: #FFFFFF;
    width: 90%;
    max-width: 1200px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 20px;
    justify-content: space-evenly;
    margin-left: auto; margin-right: auto;
}


#hcenter_fS > div > button {background: #FE911D; padding: 2%;}

.fS_img {
    background-image: url(assets/img41.png);
    background-size: cover;
    height: 390px;
    width: 400px;
}


.fS_replaced {
    height: 390px; width: 400px;
}

.fS_replaced_grid {display: flex; gap: 20px; flex-wrap: wrap;}
.fS_single_img {width: 50%; padding: 25px; background: #FFF;}

#section_keyFeatures {background: #000814;}
#hcenter_kS {
    color: #FFFFFF;
    width: 90%;
    max-width: 1200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-left: auto; margin-right: auto;
    column-gap: 30px;
}


.container_kS {
    width: max(300px, 25%);
    height: 300px;
}


.container_kS > h3 {font-family: 'Gotham'; font-weight: 500;margin-bottom: 8px; text-align: center; color: #FE911D;}
.container_kS > p {font-family: 'Gotham'; text-align: center; margin: 0px;}

.img_container_kS {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background-size: cover;
    filter: invert(1);
}



#anotherSection {
    width: 100%;
    height: 700px;
    background-size: cover;
    display: none;
    background-image: url(assets/metalcutting.jpg);
}

.center_anotherSection {
    width: 90%;
    margin: auto;
}

.center_anotherSection > * {margin: auto; width: min(100%, 600px);}



#start_footer {
    width: 100%;
    height: auto;
    background: transparent;
}

#ftr_one {
    width: min(100%, 1010px); margin-left: auto; margin-right: auto; display: flex; flex-wrap: wrap; justify-content: space-between;
}


#lft_ftr_one, #rgt_ftr_one {width: min(100%, 500px); color: #FFF; margin: 0 auto;}


#cent_lftr_one {
    width: 90%;
    margin: 0 auto;
    display: block;
}



#main_footer {
    width: 100%;
    height: auto;
}

#ftr_main_one_cent {
    width: min(100%, 400px);margin-left: auto; margin-right: auto; display: block;
}


.caption_ftr_main {font-size: 16px; color: #FE911D !important; margin: 0px;}


#ftr_main_one_cent > * {
    text-align: center;
    color: #FFFFFF;
}

#btn_ftr_capsule > * {
    border: 1px solid #FE911D;
    color: #FE911D;
    margin-left: 10px;
    background: transparent;
    font-size: 19px;
    padding: 4%;
}


#ftr_main_two_cent {
    width: min(90%, 1200px);
    row-gap: 50px;
    display: flex; flex-wrap: wrap;
    margin-left: auto; margin-right: auto;
    justify-content: space-evenly;
}


#ftr_main_two_cent > * {color: #FFFFFF; text-align: left;}
.ftr_mtct_001 {font-family: "Gotham";}





@media screen and (max-width: 700px) {

    .fS_img {
        display: none;
    }


    #rgt-nav {display: none;}

    #ftr_main_two_cent > * {color: #FFFFFF; text-align: center !important;}
}


@media screen and (min-width: 701px) and (max-width: 1199px) {
    
    
.first_text {font-size: 30px;}
.second_text {font-size:;}    



#mbl-nav {
    display: none;
}
    
}



@media screen and (min-width: 1200px) {
    
.first_text {font-size: 35px;}
.second_text {font-size: 35px;}


    
#mbl-nav {
    display: none;
}    
    
    
}



/* Animations */

.fade-in {
    scale: 0.8; opacity: 0;
    animation: fade-in linear forwards;
    animation-timeline: view();
    animation-range: entry;
}

.slide-up {
    transform: translateY(-50px); opacity: 0;
    animation: slide-up 8s linear forwards;
    animation-timeline: view();
    animation-range: entry;
}

.slide-down {
    transform: translateY(50px); opacity: 0;
    animation: slide-down linear forwards;
    animation-timeline: view();
    animation-range: entry;
}

@keyframes fade-in {
    to {scale: 1; opacity: 1;}
}

@keyframes slide-up {
  to { transform: translateY(0); opacity: 1; }
}


@keyframes slide-down {
  to { transform: translateY(0); opacity: 1; }
}
/* Marque Code for News Ticker */


.scroller-wrapper {width: 100%; background: #000;}

.scroller {
background: #000;
  width: lund;
  margin: 0 auto;
}

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

.scroller[data-animated="true"] {
  overflow: hidden;
}

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

.scroller[data-direction="right"] {
  --_animation-direction: reverse;
}

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

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

.scroller[data-speed="slow"] {
  --_animation-duration: 60s;
}

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

/* general styles */


.tag-list {
  margin: 0;
  padding-inline: 0;
  list-style: none;
  font-family: "Gotham";
}

.tag-list li {
    color: #FFFFFF; white-space: nowrap; margin-left: 2%;
}


.tag-list button {background: #FE911C; color: #FFF; border-radius: 5%;
    padding: 1% 5%;
}

/* for testing purposed to ensure the animation lined up correctly */
.test {
  background: red !important;
}