#fw-section-links-list-ccb557b4-b6b7-4949-be08-0eb27516d9e1 {

.button--expand {
        display: block;
        width: 100%;
        color: #fff;
        background-color: transparent;
        border-color: #434344;
        width: 230px;
        height: 38px;
        border-width: 1px;
        padding-top: 6px;
        padding-bottom: 6px;
        padding-right: 12px;
        padding-left: 12px;
        font-size: 16px;
        border-radius: 8px;
  opacity: 1;
    }

.button--expand:hover {
background-color: #ffffff;
  color: #000;
}
.button--expand:active {
background-color: #fff;
  color: #000;
}
}




#fw-section-hero-video-b9a5b6cb-986d-4af0-a444-5d330166c366 {

.section-background__video {
  border-radius: 2%;
  margin-top: -10%;
  margin-bottom: -10%;
}
}
#fw-section-hero-video-f63cdb38-8743-4bc4-be68-28f2a2b1ab4e {

.section-background__video {
  border-radius: 2%;
}
}
#fw-section-custom-html-09fd5d63-f394-4464-8e02-cbc029a9eafb {

hr {
  color: rgb(255,255,255);
opacity: 0.27;
  width: 65%;  
}
.custom-html {
  margin-top: -4%;
  margin-bottom: -3%;
}
}



#fw-section-custom-html-bc85afef-aedf-4e6f-b0d5-c7c94706fbba {

hr {
  color: rgb(255,255,255);
opacity: 0.27;
  width: 65%;  
}
.custom-html {
  margin-top: -4%;
  margin-bottom: -3%;
}
}



#fw-section-custom-html-c2cefbe7-8acd-4b31-b6ff-f54993ab0771 {

hr {
  color: rgb(255,255,255);
opacity: 0.27;
  width: 65%;  
}
.custom-html {
  margin-top: -4%;
  margin-bottom: -3%;
}
}
#fw-section-custom-html-2908c32c-33ec-412c-9d40-3f96394e28e1 {

.custom-html {
  margin-top: -5%;
  margin-bottom: -3%;
}
}

#fw-section-custom-html-0ef200e3-ebfc-446c-a251-99b994f1bfc5 {

hr {
  color: rgb(255,255,255);
opacity: 0.27;
  width: 65%;  
}
.custom-html {
  margin-top: -4%;
  margin-bottom: -3%;
}
}


#fw-section-links-list-6c203fb4-3f45-4d82-b3a6-3e923aa42a66 {

.button--expand {
        display: block;
        width: 100%;
        color: #fff;
        background-color: transparent;
        border-color: #434344;
        width: 230px;
        height: 38px;
        border-width: 1px;
        padding-top: 6px;
        padding-bottom: 6px;
        padding-right: 12px;
        padding-left: 12px;
        font-size: 16px;
        border-radius: 8px;
  opacity: 1;
    }

.button--expand:hover {
background-color: #ffffff;
  color: #000;
}
.button--expand:active {
background-color: #fff;
  color: #000;
}
}

#fw-section-custom-html-7dc3b9f2-5d9e-4bfb-b2ea-48e4a416d104 {

.custom-html {
  margin-top: -6%;
  margin-bottom: -3%;
}
}
#fw-section-custom-html-8b91ba84-23c3-47a0-a9b4-5f8ed9b093b5 {

hr {
  color: rgb(255,255,255);
opacity: 0.27;
  width: 65%;  
}
.custom-html {
  margin-top: -4%;
  margin-bottom: -3%;
}
}
#fw-section-links-list-c6208a12-fab5-4562-bd26-0eed262ffeef {

.button--expand {
        display: block;
        width: 100%;
        color: #fff;
        background-color: transparent;
        border-color: #434344;
        width: 230px;
        height: 38px;
        border-width: 1px;
        padding-top: 6px;
        padding-bottom: 6px;
        padding-right: 12px;
        padding-left: 12px;
        font-size: 16px;
        border-radius: 8px;
  opacity: 1;
    }

.button--expand:hover {
background-color: #ffffff;
  color: #000;
}
.button--expand:active {
background-color: #fff;
  color: #000;
}
}
#fw-section-custom-html-114f7b14-9eed-4c51-8683-2f79e37da444 {

hr {
  color: rgb(255,255,255);
opacity: 0.27;
  width: 65%;  
}
.custom-html {
  margin-top: -4%;
  margin-bottom: -3%;
}
}

#fw-section-links-list-48ce5c2a-9e27-4ced-b628-1b9da504484b {

.button--expand {
        display: block;
        width: 100%;
        color: #fff;
        background-color: transparent;
        border-color: #434344;
        width: 230px;
        height: 38px;
        border-width: 1px;
        padding-top: 6px;
        padding-bottom: 6px;
        padding-right: 12px;
        padding-left: 12px;
        font-size: 16px;
        border-radius: 8px;
  opacity: 1;
    }

.button--expand:hover {
background-color: #ffffff;
  color: #000;
}
.button--expand:active {
background-color: #fff;
  color: #000;
}
}

#fw-section-custom-html-7a159bc5-0c5c-4bbc-82c1-9fb427716cc0 {

hr {
  color: rgb(255,255,255);
opacity: 0.27;
  width: 65%;  
}
.custom-html {
  margin-top: -4%;
  margin-bottom: -3%;
}
}

#fw-section-custom-html-4e1f7b83-d2c1-4d88-b1e6-caf5e3003825 {

.custom-html {
  margin-top: -5%;
  margin-bottom: -3%;
}
}

#fw-section-header {

.header__logo-image {

}
}
#fw-section-links-list-24f7ab34-6ba6-4f20-aa75-99dd5bd65adf {

.button--expand {
        display: block;
        width: 100%;
        color: #fff;
        background-color: transparent;
        border-color: #434344;
        width: 230px;
        height: 38px;
        border-width: 1px;
        padding-top: 6px;
        padding-bottom: 6px;
        padding-right: 12px;
        padding-left: 12px;
        font-size: 16px;
        border-radius: 8px;
  opacity: 1;
    }

.button--expand:hover {
background-color: #ffffff;
  color: #000;
}
.button--expand:active {
background-color: #fff;
  color: #000;
}
}



#fw-section-links-list-16b19fc8-4a81-444c-9479-fd16fc32da96 {

.button--expand {
        display: block;
        width: 100%;
        color: #fff;
        background-color: transparent;
        border-color: #434344;
        width: 230px;
        height: 38px;
        border-width: 1px;
        padding-top: 6px;
        padding-bottom: 6px;
        padding-right: 12px;
        padding-left: 12px;
        font-size: 16px;
        border-radius: 8px;
  opacity: 1;
    }

.button--expand:hover {
background-color: #ffffff;
  color: #000;
}
.button--expand:active {
background-color: #fff;
  color: #000;
}
}

#fw-section-links-list-c5fff523-7a0f-4969-8dcc-c2a7700177b5 {

.button--expand {
        display: block; 
        width: 100%;
        color: #fff;
        background-color: transparent;
        border-color: #434344;
        width: 230px;
        height: 38px;
        border-width: 1px;
        padding-top: 6px;
        padding-bottom: 6px;
        padding-right: 12px;
        padding-left: 12px;
        font-size: 16px;
        border-radius: 8px;
  opacity: 1;
    }

.button--expand:hover {
background-color: #ffffff;
  color: #000;
}
.button--expand:active {
background-color: #fff;
  color: #000;
}
}

#fw-section-custom-html-3a143be0-530f-4fb8-8d21-e04ec64f126a {

body {
  width: 100%;
  margin: 0;
  background: black;
  font-family: Verdana, sans-serif;
  color: white;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  min-height: 100vh;
  gap: 10px;
  flex-wrap: wrap;
  
}
.main {
  display: flex;
  flex-direction: row;
  justify-content: center; /* Centers the cards horizontally if space allows */
  gap: 10px; /* Adds space between cards */
  flex-wrap: wrap; /* Allows cards to wrap onto the next line if the screen is too narrow */
}
.card-main {
  max-width: 100%; /* or any width that suits your design */
  margin: 0%; /* centers the card */
}

.blob {
  filter: blur(40px);
  position: absolute;
  z-index: -1;
  top: 0;
  opacity: 0;
  left: 0;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: #73ff0099;
  transition: all 300ms ease-in-out;
}

.fakeblob {
  display: hidden;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.card {
  overflow: hidden;
  max-width: 100%;
  padding: 1px;
  margin: 0;
  background: #bdbdbd25;
  border-radius: 10px;
  position: relative;
  transition: all 300ms ease-in-out;
}

.inner {
  border-radius: 7px;
  padding: 10px;
  width: 350px;
  height: 350px;
  background: #12121280;
  backdrop-filter: blur(80px);
  transition: all 300ms ease-in-out;
}

.card:hover > .inner {
background: #12121280;
  backdrop-filter: blur(100px);
}
.purple {
    background-color: #8A2BE2;
}

.blue-green {
    background: linear-gradient(to right, #00BFFF, #00FF7F);
    color: black;
}

.yellow {
    background-color: #FFD700;
    color: black
}

.button {
    display: block;
    margin-top: 20px;
    padding: 10px 20px;
    text-decoration: none;
    color: white;
    font-weight: bold;
    border-radius: 8px;
    width: fit-content;
    margin: 20px auto 0;
}
}
#fw-section-links-list-f11fc9b7-dbc5-47e3-8308-76702320920d {

.button--expand {
        display: block;
        width: 100%;
        color: #fff;
        background-color: transparent;
        border-color: #434344;
        width: 230px;
        height: 38px;
        border-width: 1px;
        padding-top: 6px;
        padding-bottom: 6px;
        padding-right: 12px;
        padding-left: 12px;
        font-size: 16px;
        border-radius: 8px;
  opacity: 1;
    }

.button--expand:hover {
background-color: #ffffff;
  color: #000;
}
.button--expand:active {
background-color: #fff;
  color: #000;
}
}
#fw-section-recent-videos-db425695-b906-4cbc-970a-f7c893fa51fc {

body {
  width: 100%;
  margin: 0;
  background: black;
  font-family: Verdana, sans-serif;
  color: white;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  min-height: 100vh;
  gap: 10px;
  flex-wrap: wrap;
  
}
.main {
  display: flex;
  flex-direction: row;
  justify-content: center; /* Centers the cards horizontally if space allows */
  gap: 10px; /* Adds space between cards */
  flex-wrap: wrap; /* Allows cards to wrap onto the next line if the screen is too narrow */
}
.card-main {
  max-width: 100%; /* or any width that suits your design */
  margin: 0%; /* centers the card */
}

.blob {
  filter: blur(40px);
  position: absolute;
  z-index: -1;
  top: 0;
  opacity: 0;
  left: 0;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: #73ff0099;
  transition: all 300ms ease-in-out;
}

.fakeblob {
  display: hidden;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.card {
  overflow: hidden;
  max-width: 100%;
  padding: 1px;
  margin: 0;
  background: #bdbdbd25;
  border-radius: 10px;
  position: relative;
  transition: all 300ms ease-in-out;
}

.inner {
  border-radius: 7px;
  padding: 10px;
  width: 450px;
  height: 215px;
  background: #12121280;
  backdrop-filter: blur(80px);
  transition: all 300ms ease-in-out;
}

.card:hover > .inner {
background: #12121280;
  backdrop-filter: blur(100px);
}
.purple {
    background-color: #8A2BE2;
}

.blue-green {
    background: linear-gradient(to right, #00BFFF, #00FF7F);
    color: black;
}

.yellow {
    background-color: #FFD700;
    color: black
}

.button {
    display: block;
    margin-top: 20px;
    padding: 10px 20px;
    text-decoration: none;
    color: white;
    font-weight: bold;
    border-radius: 8px;
    width: fit-content;
    margin: 20px auto 0;
}
}
#fw-section-custom-html-b23f55fd-3549-4939-a95e-0a114beac81d {

body {
  width: 100%;
  margin: 0;
  background: black;
  font-family: Verdana, sans-serif;
  color: white;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  min-height: 100vh;
  gap: 10px;
  flex-wrap: wrap;
  
}
.main {
  display: flex;
  flex-direction: row;
  justify-content: center; /* Centers the cards horizontally if space allows */
  gap: 50px;/* Adds space between cards */
  flex-wrap: wrap; /* Allows cards to wrap onto the next line if the screen is too narrow */
}
.card-main {
  max-width: 100%; /* or any width that suits your design */
  margin: 0%; /* centers the card */
}

.blob {
  filter: blur(40px);
  position: absolute;
  z-index: -1;
  top: 0;
  opacity: 0;
  left: 0;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: #73ff0099;
  transition: all 300ms ease-in-out;
}

.fakeblob {
  display: hidden;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.card {
  overflow: hidden;
  max-width: 100%;
  padding: 1px;
  margin: 0;
  background: #bdbdbd25;
  border-radius: 10px;
  position: relative;
  transition: all 300ms ease-in-out;
}

.inner {
  border-radius: 7px;
  padding: 10px;
  width: 800px;
  height: 400px;
  background: #12121280;
  backdrop-filter: blur(80px);
  transition: all 300ms ease-in-out;
}

.card:hover > .inner {
background: #12121280;
  backdrop-filter: blur(100px);
}
.purple {
    background-color: #8A2BE2;
}

.blue-green {
    background: linear-gradient(to right, #00BFFF, #00FF7F);
    color: black;
}

.yellow {
    background-color: #FFD700;
    color: black
}

.button {
    display: block;
    margin-top: 20px;
    padding: 10px 20px;
    text-decoration: none;
    color: white;
    font-weight: bold;
    border-radius: 8px;
    width: fit-content;
    margin: 20px auto 0;
}
}


#fw-section-hero-video-93307acc-1403-4733-b5a0-fedb333359b4 {

.section-background__video {
  border-radius: 2%;
}
}



#fw-section-custom-html-dda38735-306d-491f-971e-44750e3cdda0 {

body {
  width: 100%;
  margin: 0;
  background: black;
  font-family: Verdana, sans-serif;
  color: white;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  min-height: 100vh;
  gap: 10px;
  flex-wrap: wrap;
  
}
.main {
  display: flex;
  flex-direction: row;
  justify-content: center; /* Centers the cards horizontally if space allows */
  gap: 10px; /* Adds space between cards */
  flex-wrap: wrap; /* Allows cards to wrap onto the next line if the screen is too narrow */
}
.card-main {
  max-width: 100%; /* or any width that suits your design */
  margin: 0%; /* centers the card */
}

.blob {
  filter: blur(60px);
  position: absolute;
  z-index: -1;
  top: 0;
  opacity: 0;
  left: 0;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: #73ff0099;
  transition: all 300ms ease-in-out;
}

.fakeblob {
  display: hidden;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.card {
  overflow: hidden;
  max-width: 100%;
  padding: 1px;
  margin: 0;
  background: #bdbdbd25;
  border-radius: 10px;
  position: relative;
  transition: all 300ms ease-in-out;
}

.inner {
  border-radius: 7px;
  padding: 1px;
  width: 380px;
  height: 500px;
  background: #12121280;
  backdrop-filter: blur(80px);
  transition: all 300ms ease-in-out;
}

.card:hover > .inner {
background: #12121280;
  backdrop-filter: blur(100px);
}
.purple {
    background-color: #8A2BE2;
}

.blue-green {
    background: linear-gradient(to right, #00BFFF, #00FF7F);
    color: black;
}

.yellow {
    background-color: #FFD700;
    color: black
}

.button {
    display: block;
    margin-top: 20px;
    padding: 10px 20px;
    text-decoration: none;
    color: white;
    font-weight: bold;
    border-radius: 8px;
    width: fit-content;
    margin: 20px auto 0;
}
.center {
  display: block;
  margin-top: -10%;
  width: 395px;
  height: 550px; 
}

/* Reset any positioning that might affect the natural flow */
.prodtitle, .proddescription {
  position: relative; /* Ensure relative positioning for both */
  float: none; /* Reset float if applied */
  clear: both; /* Clear any floating elements */
  top: 45px;

}

.prodtitle h3 {
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: -30px;
  
  /* Remove or adjust these if they're not helping */
  /* position: relative; */
  /* top: 30px; */
  /* margin-bottom: -30px; */
}

.proddescription p {
  font-size: 14px;
  color: #808080;
  text-align: center;
  margin-top: 32px; /* Increased for better separation */
}
.card-main.card-oos {
  opacity: 1; /* Dim the entire card to make it less of a focal point */
  transition: opacity 0.3s ease; /* Smooth transition for opacity changes */
}

.inner {
  position: relative; /* Needed for absolute positioning of children */
}

.prodimage-oos {
  opacity: 0.5;
  position: relative; /* Set position to relative for absolute positioning of overlay */
}

.oos-overlay {
  position: absolute;
  top: 17%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px; /* Adjust to your desired size */
  height: auto; /* Maintain aspect ratio */
  opacity: 0.9; /* Make the out-of-stock image semi-transparent */
  z-index: 1; /* Ensure it's above other content */
}
}