/* Font Family Declaration */

/* Gintronic — full family, all weights + italics, woff2 → woff → otf fallback */

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

@font-face {
  font-family: 'Gintronic';
  src:
    url('fonts/Gintronic-ThinItalic.woff2') format('woff2'),
    url('fonts/Gintronic-ThinItalic.woff') format('woff'),
    url('fonts/Gintronic-ThinItalic.otf') format('opentype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

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

@font-face {
  font-family: 'Gintronic';
  src:
    url('fonts/Gintronic-LightItalic.woff2') format('woff2'),
    url('fonts/Gintronic-LightItalic.woff') format('woff'),
    url('fonts/Gintronic-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gintronic';
  src:
    url('fonts/Gintronic-Regular.woff2') format('woff2'),
    url('fonts/Gintronic-Regular.woff') format('woff'),
    url('fonts/Gintronic-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gintronic';
  src:
    url('fonts/Gintronic-RegularItalic.woff2') format('woff2'),
    url('fonts/Gintronic-RegularItalic.woff') format('woff'),
    url('fonts/Gintronic-RegularItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

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

@font-face {
  font-family: 'Gintronic';
  src:
    url('fonts/Gintronic-MediumItalic.woff2') format('woff2'),
    url('fonts/Gintronic-MediumItalic.woff') format('woff'),
    url('fonts/Gintronic-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gintronic';
  src:
    url('fonts/Gintronic-Bold.woff2') format('woff2'),
    url('fonts/Gintronic-Bold.woff') format('woff'),
    url('fonts/Gintronic-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gintronic';
  src:
    url('fonts/Gintronic-BoldItalic.woff2') format('woff2'),
    url('fonts/Gintronic-BoldItalic.woff') format('woff'),
    url('fonts/Gintronic-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

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

@font-face {
  font-family: 'Gintronic';
  src:
    url('fonts/Gintronic-BlackItalic.woff2') format('woff2'),
    url('fonts/Gintronic-BlackItalic.woff') format('woff'),
    url('fonts/Gintronic-BlackItalic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}


 /* Global config */

html {
  font-family: "Gintronic";
    letter-spacing: normal;
  word-spacing: normal;
  font-kerning: normal;
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
}

   body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
	background-color: var(--bgcolor);
  }

  main {
    flex: 1 0 auto;
  }

.brand-logo {
  position: relative !important;
    margin-right: 50px;
}
.brand-logo-s {
  
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;                   /* behind the trigger when overlapping */
  display: inline-block;
  pointer-events: auto;
    
}
 
footer {
	background-color: var(--bgcolor) !important;
}
page-footer {
	background-color: var(--bgcolor) !important;
}

a,
a:visited,
a:hover,
a:active,
a:focus {
  color: inherit !important;
  text-decoration: none;
  outline: none;
}


/* Global Colors */

:root {
	
	--bgcolor:  #202020;
	--black-main:  #141414;
	--white-main:  #eeeeee;
	--gray-main:  #DDDDDD;
	--gray-below:  #505050;
	--b-red-main:  #cc0000;
	--b-red-below: #4b0000;
	--b-gold-main: #fac800;
	--b-gold-below: #8f5b0f;
	--b-gray-main: #7c7c7c;
	--b-green-main: #15fa00;
	--b-purple-main:  #9900ff;
	--b-void-main:  #9b30ff !important;
	--b-purple-below:  #8f5b0f;
}

.u-red    { --underline-color: var(--b-red-main); }
.u-gold   { --underline-color: var(--b-gold-main); }
.u-purple { --underline-color: var(--b-purple-main); }

/* Text Config */

.text-xs { font-size: 0.75rem; }
.text-s { font-size: 0.875rem; }
.text-ms { font-size: 1.0rem; }
.text-m { font-size: 1.14rem; }
.text-l { font-size: 1.5rem; }
.text-xl { font-size: 3.75rem; }
.text-xxl { font-size: 4.5rem; }


@media (min-width: 601px) {.text-xl-bot { position:relative; bottom: -2px; font-size: 3.75rem;  line-height: 1;  margin: 0;  padding: 0; }}
@media (max-width: 600px) {.text-xl-bot { position:relative; bottom: -2px; font-size: 2.2rem;  line-height: 1;  margin: 0;  padding: 0; }}

@media (min-width: 601px) {.text-l-vidtitle { font-size: 1.5rem; }}
@media (max-width: 600px) {.text-l-vidtitle { font-size: 1.0rem; }}


@media (min-width: 993px) {.text-vidTitle { color: var(--white-main); text-transform: uppercase; font-weight: 700; font-size: 4.00rem; margin:0px;}} 
@media (min-width: 601px) and (max-width: 992px) {.text-vidTitle { color: var(--white-main); text-transform: uppercase; font-weight: 700; font-size: 2.0rem; margin:0px; line-height: 1;display:inline-block; width:330px; height:auto;}} 
@media (max-width: 600px) {.text-vidTitle { color: var(--white-main); text-transform: uppercase; font-weight: 700; font-size: 2.50rem; margin:0px;line-height: 1; display:inline-block; width:330px; height:auto;}} 


@media (min-width: 993px) {.text-vidTitleDark { color: var(--bgcolor); text-transform: uppercase; font-weight: 700; font-size: 4.00rem; margin:0px;} } 
@media (min-width: 601px) and (max-width: 992px) {.text-vidTitleDark { color: var(--bgcolor); text-transform: uppercase; font-weight: 700; font-size: 2rem; margin:0px; line-height: 1;display:inline-block; width:330px; height:auto;} } 
@media (max-width: 600px) {.text-vidTitleDark { color: var(--bgcolor); text-transform: uppercase; font-weight: 700; font-size: 2.80rem; margin:0px; line-height: 1;display:inline-block; width:330px; height:auto;}} 


@media (min-width: 993px) {.text-vidDate { color: var(--white-main); font-weight: 400; font-size: 1.44rem; margin-left:5px;} } 
@media (min-width: 601px) and (max-width: 992px) {.text-vidDate { color: var(--white-main); font-weight: 300; font-size: 1.22rem; margin-left:5px; margin-top:15px;} } 
@media (max-width: 600px) {.text-vidDate { color: var(--white-main); font-weight: 300; font-size: 1rem; margin-left:5px; margin-top:5px;} } 


@media (min-width: 993px) {.text-vidDateDark { color: var(--bgcolor); font-weight: 400; font-size: 1.44rem; margin-left:5px;} } 
@media (min-width: 601px) and (max-width: 992px) {.text-vidDateDark { color: var(--bgcolor); font-weight: 300; font-size: 1.22rem;  margin-top:15px; margin-left:5px;} } 
@media (max-width: 600px) {.text-vidDateDark { color: var(--bgcolor); font-weight: 300; font-size: 1rem;  margin-top:5px; margin-left:5px;} } 


@media (min-width: 993px) {.vTextBox { color: var(--white-main); font-weight: 400; font-size: 1.44rem; line-height: 1;} } 
@media (min-width: 601px) and (max-width: 992px) {.vTextBox { color: var(--white-main); font-weight: 300; font-size: 0.7rem;  margin-top:5px;} } 
@media (max-width: 600px) {.vTextBox { color: var(--white-main); font-weight: 300; font-size: 0.875rem; margin-top:5px; line-height: 1;} } 


@media (min-width: 993px) {.yt-hdr {font-size: 1.5rem; font-weight: 700; margin-top: 5px; }}
@media (min-width: 601px) and (max-width: 992px) {.yt-hdr {font-size: 1rem; font-weight: 700; margin-top: 5px; }}
@media (max-width: 600px) {.yt-hdr {font-size: 1.5rem; font-weight: 700; margin-top: 5px; }}

@media (min-width: 993px) {.ytIcon {height: 32px;   width: auto;  display: block;  margin: auto;  margin-left: 10px; }}
@media (min-width: 601px) and (max-width: 992px) {.ytIcon {height: 20px;   width: auto;  display: block;  margin: auto;  margin-left: 10px; }}
@media (max-width: 600px) {.ytIcon {height: 25px;   width: auto;  display: block;  margin: auto;  margin-left: 10px; }}

@media (min-width: 993px) {.videoBox {margin-left: 148px; margin-top: 140px;}}
@media (min-width: 601px) and (max-width: 992px){.videoBox {margin: 48px;}}
@media (max-width: 600px) {.videoBox {padding-top: 45px; padding-left: 20px; padding-right: 20px;}}

@media (min-width: 993px) {.videoBox_bottom{position:absolute; left:148px; right:20px; bottom:50px; display:flex; justify-content:flex-start; pointer-events:auto;}}
@media (min-width: 601px) and (max-width: 992px){.videoBox_bottom{position:absolute; left:48px; right:20px; bottom:5px; display:flex; justify-content:flex-start; pointer-events:auto;}}


/* target the parent that contains the span, e.g. #desc or .videoBox__footer */
#desc, .videoBox__footer {
  font-size: 0;                /* collapse any literal whitespace nodes */
  line-height: 0;              /* optional: avoid extra gap from line metrics */
}

/* LARGE and Mobile Landscape*/
@media (min-width: 993px) and (max-height: 800px) {
.videoBox {margin-left: 100px; margin-top: 50px;}
.videoBox_bottom {left: 100px;}
.text-vidTitle, .text-vidTitleDark {font-size: 2.5rem}
.text-vidDate, .text-vidDateDark {font-size: 1.5rem}
.vTextBox {font-size: 0.8rem; line-height: 1;}
.yt-hdr {font-size: 1.5rem}
.ytIcon {height: 20px;}
}

/* MID and Mobile Landscape*/
@media (min-width: 601px) and (max-width: 992px) and (max-height: 800px) {
.videoBox {margin: 48px;}
.videoBox_bottom {left: 48px;}
.text-vidTitle, .text-vidTitleDark {font-size: 1.2rem}
.text-vidDate, .text-vidDateDark {font-size: 1.0rem}
.vTextBox {font-size: 0.8rem; line-height: 1 !important;}
.yt-hdr {font-size: 1.2rem}
.ytIcon {height: 15px; }
}


.text-vBoxDesc { color: var(--white-main); font-size: 1.44rem;}
.text-error { color: var(--b-red-main); font-weight: 400; font-size: 0.875rem;  visibility: hidden; }



.text-thin   { font-weight: 100; }
.text-light  { font-weight: 300; }
.text-normal { font-weight: 400; }
.text-medium { font-weight: 500; }
.text-bold   { font-weight: 700; }
.text-black  { font-weight: 900; }

.text-red     { color: var(--b-red-main); }
.text-gold    { color: var(--b-gold-main); }
.text-purple  { color: var(--b-purple-main); }
.text-white   { color: var(--white-main); }
.text-gray    { color: var(--gray-main); }

.text-wrap {white-space: pre-line;}

@media (min-width: 601px) {.act-email {font-weight: 700;  font-size: 1.14rem; color: var(--white-main);}}

@media (max-width: 600px) {.act-email {font-weight: 700;  font-size: 0.875rem; color: var(--white-main);}}

/* 404 */

.pagenoexisthdr {
color: var(--gray-main);
font-weight: 500;
font-size: 10rem;
display: block;              
text-align: center;       
margin-top: 25%;
line-height: 1;
}

.pagenoexist {
color: var(--gray-main);
font-weight: 400;
font-size: 1.5rem;
display: block;            
text-align: center;        
margin-bottom: 50%;
line-height: 1.2;
}

/* menu elements modification */
nav ul li a {
  position: relative;
  background-color: transparent !important;
  overflow: visible !important;
  line-height: 64px; /* keep Materialize hitbox */

}

/* lock nav text font globally (main nav + sidenav) */
.nav-text {
  font-family: "Gintronic" !important;
}


nav ul li a .nav-text {
  display: inline-block;
  line-height: normal;   /* decouple from navbar height */
  vertical-align: middle;
  position: relative;
  
}

/* underline */
nav ul li a .nav-text::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: 2px;

  width: 0; /* hidden initially */
  height: 2px;

  background-color: var(--underline-color, currentColor);
  transform: translateX(-50%);
  transition: width 200ms ease;
}

/* hover effect for non-active links */
nav ul li a:not(.active):hover .nav-text::after {
  width: 100%;
}

/* active link: line always full width */
nav ul li a.active .nav-text::after {
  width: 100%;
}

/* Container Configs */
.flex-line {
  display: flex;
  justify-content: space-between;
align-items: flex-end;
}



/* nav */

.nav-wrapper {
	  padding-left: 150px;
}
.nav-wrapper-s {
  position: relative;            /* positioning context for the centered logo */
  display: flex;
  justify-content: flex-start;   /* keep the burger at the left */
  align-items: center;
  width: 100%;
  height: 100%;                /* match Materialize desktop navbar height */
  padding: 0px;               /* horizontal inset */
  margin: 0;
  box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.15) !important;
  box-sizing: border-box;

}

nav {
  box-shadow: none !important;
  background-color: var(--bgcolor);
}

.nav-logo {
  height: 20px;
  vertical-align: middle;
}
.nav-logo-s {
  height: 40px;
  display: block;
  margin: 0;
  
}

.navbar-fixed, nav {
  z-index: 900;
  position: relative; /* ensure stacking context */
}

.sidenav-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin: 0px;
  z-index: 20;                   /* above the centered logo if they ever overlap */
}

.nav-wrapper-s .sidenav-trigger i {
  font-size: 34px;
}


/* ---------- SIDENAV: white text, but reuse the same underline colors ---------- */
/* Ensure sidenav links keep full-width material behavior */


.sidenav,
.sidenav .collapsible-body {
  overflow: hidden !important;
  background-color: var(--bgcolor) !important;
  box-shadow: none !important;
  width: 200px;
  padding-bottom: 0px;
  z-index: 999 !important;

}

/* Change overlay color and opacity */
/* make overlay cover everything */
.sidenav-overlay {
  position: fixed !important; /* ensure fixed over viewport */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000 !important; /* higher than sidenav and navbar */
  background: rgba(0, 0, 0, 0.3); /* semi-transparent base */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* add subtle texture */
.sidenav-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/_np.png") repeat;
    background-repeat: repeat;
  background-position: center;
  background-size: 80%;
    z-index: 1000 !important; /* higher than sidenav and navbar */
  opacity: 0.06;
  pointer-events: none;
}


.sidenav li > a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  position: relative;
  text-decoration: none;
  color: var(--white-main) !important;             /* 3) force white text in sidenav */
  background: transparent !important;
  width: 100vh;
  box-sizing: border-box;
  line-height: normal;
  overflow: visible !important;       /* don't clip pseudo elements */
  
}

/* expose the same underline variable for sidenav links (reuses :root values) */
.sidenav li a.u-red    { --underline-color: var(--b-red-main); }
.sidenav li a.u-gold   { --underline-color: var(--b-gold-main); }
.sidenav li a.u-purple { --underline-color: var(--b-purple-main); }

/* sidenav underline: center-origin to match navbar */
.sidenav li a .nav-text {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.sidenav li a .nav-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  transform-origin: center center;    /* 4) grow from center */
  transform: scaleX(0);
  transition: transform 200ms ease;
  background-color: var(--underline-color, currentColor);
  pointer-events: none;
}

/* hover / active in sidenav */
.sidenav li a:not(.active):hover .nav-text::after,
.sidenav li a.active .nav-text::after {
  transform: scaleX(1);
}

/* Prevent Materialize hover bg from stealing visual (optional) */
.sidenav li a:hover { background: transparent !important; }


/* Sidenav: keep current look — place sidecopy at bottom without touching top nav */

/* ensure the panel is a positioning context (sidenav-only) */
#slide-out.sidenav {
  display: flex;
  flex-direction: column;
  height: 100dvh !important;
  max-height: 100dvh !important;
  background-color: var(--bgcolor) !important;
  box-shadow:  0px 0px 0px rgba(0, 0, 0, 0) !important;
  transition: box-shadow 220ms ease;
  width: 200px;
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  overflow: hidden !important;
  z-index: 1100 !important;
    padding-bottom: 12px !important;
  box-sizing: border-box;
}

#slide-out.sidenav[style*="translateX(0)"],
#slide-out.sidenav[style*="translateX(0px)"],
#slide-out.sidenav[style*="translate3d(0, 0, 0)"],
#slide-out.sidenav[style*="translate3d(0px, 0px, 0px)"],
#slide-out.sidenav[style*="matrix(1, 0, 0, 1, 0, 0)"],
/* fallback: if your closed state is exactly translateX(-105%) you can use :not() */
#slide-out.sidenav:not([style*="translateX(-105%)"]):not([style*="translateX(-100%)"]) {
    box-shadow:  3px 0px 15px rgba(0, 0, 0, 0.3) !important;
}





@supports not (height: 100dvh) {
  #slide-out.sidenav {
    height: 100vh !important;
    max-height: 100vh !important;
  }
}

#slide-out.sidenav > li {
  width: 100%;
  height: auto !important;
min-height: 0 !important;
margin-bottom: 6px !important;
line-height: normal !important;
}




#slide-out.sidenav > ul {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sidecopy-li {
  /*
  padding-left: 20px;
  margin-bottom: 0px;
  */

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  margin-top: 6px !important;
  margin: 0 !important;
  padding: 4px 20px !important;
  line-height: 1 !important;
  min-height: 0 !important;
  height: auto !important;
}

.sidecopy {
  color: var(--gray-below);
  font-size: 0.875rem;
}

.sidesocials-li {
  /*
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 25px;
*/
  margin-top: auto !important;
  align-items: center!important;
  gap: 12px;
  padding-left: 0 !important;
  margin-top: auto !important;
  padding-top: 6px !important;
  padding-bottom: 10px !important;
  margin-bottom: 8px !important;

  display: flex !important;

  justify-content: center !important;
  width: 100% !important;

}


.sidesocials-li > a {

  width: auto !important;
  display: inline-flex !important;

  justify-content: center !important;

  margin: 0 !important;

  font-size: 0 !important;


   height: auto !important;
  min-height: 0 !important;
  line-height: 1 !important;
  padding: 0 !important;
  align-items: center !important;
}


.sidesocials {
  height: 15px !important;
  width: auto !important;
  display: block;
}

/* Footer */


/* footer layout container */
.footercont {
  display: flex;
  align-items: center;
  justify-content: space-between; /* left / center-grow / right */
  gap: 24px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 20px; /* adjust if needed */
}

/* left block stays its intrinsic size */
.footer-left {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

/* center takes available space (keeps room for future content) */
.footer-center {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* empty slot doesn't capture events */
}

/* right block keeps intrinsic width */
.footer-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.footercopy {
  color: var(--gray-below);
  font-size: 0.75rem;
  margin-left:100px;
}


/* keep social icons visually identical; adapt spacing only at container level */
.footersocials {
  display: flex;
  align-items: center;
  gap: 12px; /* preserves current spacing */
  margin-right:100px;
  padding: 0;
}

/* ensure anchor / image sizing inside the socials doesn't change */
.footersocials > a {
  display: inline-flex !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto;
}



.footercont{
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  height: 100%;

}

.footercopy-li {
  padding-left: 20px;
  margin-bottom: 0px;
}


.footersocials {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 25px;
}


.footersocials > a {
  display: inline-flex !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
height: auto;
}


/* ensure the panel and overlay z-index stay below the main nav trigger (only sidenav scope) */
/* choose values safely below most nav bars so the burger remains visible */
.sidenav { z-index: 950 !important; }            /* panel itself */
.sidenav-overlay { z-index: 940 !important; }    /* overlay that covers the page when open */

/* keep anchors/layout rules unchanged — just ensure nothing clips the pseudo-elements */
.sidenav,
.sidenav .collapsible-body { overflow: hidden !important; width: 200px; }

.no_bg {

    background-color: transparent;
}

/* box global shadows */

.boxshadow {
  position: relative;
}



/* looping shadow */
.boxshadow::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;

  height: 8px;
  width: var(--shadow-width);

  background: url("assets/bs_l.png") repeat-x;
  pointer-events: none;
}

/* terminating fade */
.boxshadow::after {
  content: "";
  position: absolute;
  left: var(--shadow-width);
  bottom: -8px;

  width: 85px;
  height: 8px;

  background: url("assets/bs_e.png") no-repeat left center;
  pointer-events: none;
}

/* collapsible */

.collapsible-header {
  display: flex;
  align-items: center;
  color: var(--white-main)
}

.collapsible-header::before {
  content: "\25BC";
  color: var(--b-gold-main);
  margin-right: 0.75rem;
  display: inline-block;
  transform: scaleY(0.6);
  transition: transform 0.2s ease;
}

.collapsible li.active .collapsible-header::before {
  transform: scaleY(-0.6);
}

/* variant overrides (must appear after base rules) */
.collapsible-header.faq-col-hdr::before {
  color: var(--b-gold-main);
}
.collapsible-header.act-col-hdr::before {
  color: var(--b-purple-main);
}

.collapsible-body{
padding-left: 30px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 30px;

}

.col_hdr{
  text-transform: uppercase;
  box-shadow: none !important;
  background-color: transparent;
  font-size: 1.5rem; 
  color: var(--gray-main); 
  border-color: transparent;
}

.col_box{
  box-shadow: none !important;
  background-color: transparent;
  font-size: 1.5rem; 
  color: var(--gray-main); 
  border-color: transparent;
}

.col_bd{
  box-shadow: none !important;
  background-color: transparent;
  color: var(--gray-main); 
  border-color: transparent;
}

.fq_hl{
color: var(--b-gold-main) !important; 
}

a.fq_hl,
a.fq_hl:visited,
a.fq_hl:hover,
a.fq_hl:active,
a.fq_hl:focus {
  color: var(--b-gold-main) !important;
}

.act_hl{
color: var(--b-purple-main) !important;
}

a.act_hl,
a.act_hl:visited,
a.act_hl:hover,
a.act_hl:active,
a.act_hl:focus {
  color: var(--b-purple-main) !important;
}


/* IMG anims and others*/ 
#expandedHolder {
  position: relative;
  width: 100%;
  overflow: hidden;
}


/* fullscreen overlay under navbar */
body.no-scroll {
  overflow: hidden;
}

.img-expand {
  z-index: 1000;
  object-fit: contain;
  transition:
    top 0.4s ease,
    left 0.4s ease,
    width 0.4s ease,
    height 0.4s ease;
  cursor: default;
}



/* overlay that lives under the navbar */
#expandedOverlay {
  box-sizing: border-box;
  overscroll-behavior: contain;
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 800;     
     /* above image, below navbar */
  overflow-y: auto;    /* scroll INSIDE overlay */
  pointer-events: auto;
}

#expandedOverlay * {
  box-sizing: border-box;
}

#expandedOverlay .row {
  margin: 0;
}



/* style="display:inline-flex; align-items:center; gap:8px; width:auto; margin-top:5px; text-decoration:none;"  */ 


@media (max-width: 600px) {
.vidYtCont {
  display: flex;
  list-style: none; /* optional */
  padding: 0;       /* optional */
  margin: 0;        /* optional */
  margin-top: 15px;
  align-items: center;
}
}


@media (min-width: 601px) and (max-width: 992px) {
.vidYtCont {

  display:inline-flex; 
  align-items:center; 
  gap:8px; 
  width:auto; 
  text-decoration:none;
  list-style: none; /* optional */
  padding: 0;       /* optional */
  margin: 0;        /* optional */
  margin-top:5px; 
  
}}

@media (min-width: 993px) {
.vidYtCont {

  display:inline-flex; 
  align-items:center; 
  gap:8px; 
  width:auto; 
  text-decoration:none;
  list-style: none; /* optional */
  padding: 0;       /* optional */
  margin: 0;        /* optional */
  margin-top:20px; 
}
}

/* Custom Video classes */
@media (min-width: 993px) {
.vidDescUl {
  display: flex;
  list-style: none; /* optional */
  padding: 0;       /* optional */
  margin: 0;        /* optional */
  margin-top: -20px;
  align-items: center;
}
}


@media (min-width: 601px) and (max-width: 992px) {
.vidDescUl {
  display: flex;
  list-style: none; /* optional */
  padding: 0;       /* optional */
  margin: 0;        /* optional */
  margin-top: -20px;
  align-items: center;
}

}

@media (max-width: 600px) {
.vidDescUl {
  display: flex;
  list-style: none; /* optional */
  padding: 0;       /* optional */
  margin: 0;        /* optional */
  margin-top: -5px;
  align-items: center;
}
}



  
@media (min-width: 993px) {
.vidIcon {
  height: 18px;
  width: auto;
  display: block;
  margin: auto;
  margin-left: 10px;
  }
}

@media (min-width: 601px) and (max-width: 992px) {

.vidIcon {
  height: 15px;
  width: auto;
  display: block;
  margin: auto;
  margin-left: 10px;
   margin-bottom: -9px;
  }

}


@media (max-width: 600px) {
.vidIcon {
  height: 14px;
  width: auto;
  display: block;
  margin: auto;
  margin-left: 10px;
  margin-bottom: -3px;
  }
}

/* textBox border color property */
@property --tbBorderColor {
  syntax: "<color>";
  inherits: false;
  initial-value: var(--white-main);
}

.textBox{
 /* outline: 4px solid var(--white-main);
  outline-offset: -4px; /* optional: moves outline inward */
  box-shadow: inset 0 0 30px rgb(0, 0, 0);
  position: relative; 
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.textBox::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/_np.png") repeat;
  opacity: 0.08;
  pointer-events: none;
}

/* Swipe Animations */

.is-hidden {
  visibility: hidden;
}

@property --sPos {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

/* Effect 1 */
.fx-vWipe{
  --size: 40%;

  /* Color blending in the middle */
  mask-image: linear-gradient(90deg, #000, #0000);

  /* Hard shift at 40% */
  mask-image: linear-gradient(90deg, #000 40%, #0000 40%);

  /* Color blending on the left */
  mask-image: linear-gradient(90deg, #000 0%, #0000 40%);

  /* Only transparent pixels are visible */
  mask-image: linear-gradient(90deg, #000 -40%, #0000 0%);

  /* Only opaque pixels are visible */
  mask-image: linear-gradient(90deg, #000 100%, #0000 140%);

    mask-image: linear-gradient(
    0deg,
    #000 calc(var(--sPos) - var(--size)),
    #0000 calc(var(--sPos))
  );

  transition: --sPos 1s ease-in-out;
}

/* Effect 1 */
.fx-vWipeOut{
  --size: 40%;

  /* Color blending in the middle */
  mask-image: linear-gradient(90deg, #000, -140%, #0000);

  /* Hard shift at 40% */
  mask-image: linear-gradient(90deg, #000 -40%, #0000 40%);

  /* Color blending on the left */
  mask-image: linear-gradient(90deg, #000 0%, #0000 40%);

  /* Only transparent pixels are visible */
  mask-image: linear-gradient(90deg, #000 40%, #0000 0%);

  /* Only opaque pixels are visible */
  mask-image: linear-gradient(90deg, #000  #0000 140%);

    mask-image: linear-gradient(
    180deg,
    #000 calc(var(--sPos) - var(--size)),
    #0000 calc(var(--sPos))
  );

  transition: --sPos 0.5s ease-in-out;
}

/* fully masked top-left origin */
.fx-bReveal
 {
  -webkit-clip-path: inset(0 100% 100% 0);
  clip-path: inset(0 100% 100% 0);
  will-change: clip-path;
}

/* animation class */
.fx-bReveal-anim {
  animation: boxReveal 700ms cubic-bezier(.22,.9,.28,1) forwards;
}

/* ensure the target is a positioning context */
.fx-bReveal-target {
  position: relative; /* ensure overlay absolute positions correctly */
}

/* overlay sits above content; pointer-events none so it doesn't block clicks */
.fx-bReveal-svg {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 9999;
}

@keyframes boxReveal {
  from {
    -webkit-clip-path: inset(0 100% 100% 0);
    clip-path: inset(0 100% 100% 0);
  }
  to {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }
}

.bExitShadow {

  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); 
}

/* Buttons */
@media (min-width: 601px) {
.bExit  {
  cursor: pointer;
  height: 25px;
  width: auto;
  display: block;
  margin: auto;
  z-index:990;

  }
  }
@media (max-width: 600px) {
.bExit  {
  cursor: pointer;
  height: 20px;
  width: auto;
  display: block;
  margin: auto;
  z-index:990;

  }
}


.bSideExit  {
  cursor: pointer;
  height: 16px;
  width: auto;
  display: block;
  margin-top: 25px;
  margin-bottom: 10px;
  margin-left: 20px;

  color:var(--white-main);
  }

.imgBtn {
    cursor: pointer;
}

  
  .vd_hl {
  color: var(--b-red-main);
  text-decoration: inherit;

  }

a.vd_hl,
a.vd_hl:visited,
a.vd_hl:hover,
a.vd_hl:active,
a.vd_hl:focus {
  color: var(--b-red-main)!important;
}

  .void_hl {
  color: var(--b-void-main);
  text-decoration: inherit;

  }

a.void_hl,
a.void_hl:visited,
a.void_hl:hover,
a.void_hl:active,
a.void_hl:focus {
  color: var(--b-void-main) !important;
}

/* Input and Buttons */

.input-row {
  display: grid;
  grid-template-columns: 1fr 1fr ;
  gap: 12px;
  width: 100%;
}

.input-row label {
    text-decoration: inherit;
  color: var(--white-main);
  display: flex;
  flex-direction: column;
  gap: 4px;
    font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}


/* Base override */
input:not([type]),
input[type=text],
input[type=password],
input[type=email],
input[type=number],
input[type=search],
input[type=tel],
textarea {

  background: var(--gray-below) !important;
  color: var(--bgcolor) !important;
  font-family: "Gintronic";
  box-sizing: border-box;
  border-bottom: none !important;
  padding: 10px 12px;
  height: auto;
  line-height: normal;
  box-shadow: 6px 6px 6px 2px rgba(0, 0, 0, 0.2) !important; /* px units required */
}
::placeholder {
  color: var(--bgcolor) !important;
  font-style:italic;
  opacity: .75;
}

input:focus,
textarea:focus {
  outline: 2px solid var(--b-purple-main);
  outline-offset: -2px;
  background: var(--b-gray-main) !important;
}

.input-auto {
  resize: none;           /* prevent manual resize handle */
  overflow: hidden;       /* hide internal scrollbar */
  min-height: 56px;       /* starting height */
  max-height: 60vh;       /* optional cap; remove if undesired */
  box-sizing: border-box; /* keep layout stable */
}



/* Strong, visible custom checkbox (override everything) */
input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;

  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 0.5rem 0 0 !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 1 !important;

  /* visible visuals */
  background: var(--gray-below) !important;
  border: 2px solid var(--gray-main) !important;
  border-radius: 0px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Focus ring visible */
input[type="checkbox"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(123,81,255,0.12) !important;
}

/* Checked state visuals */
input[type="checkbox"]:checked {
  background: var(--gray-main) !important;
  border-color: var(--b-purple-main) !important;
}

/* tick mark */
input[type="checkbox"]::after {
  content: "" !important;
  position: absolute !important;
  left: 4px !important;
  top: 1px !important;
  width: 6px !important;
  height: 10px !important;
  border: solid transparent !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) scale(0) !important;
  transform-origin: center !important;
  transition: transform .12s ease !important;
  pointer-events: none !important;
}

/* reveal tick when checked */
input[type="checkbox"]:checked::after {
  border-color: var(--b-purple-main) !important;
  transform: rotate(45deg) scale(1) !important;
}

/* hide Materialize fake span if present */
input[type="checkbox"] + span,
.input-field input[type="checkbox"] + span {
  display: none !important;
}




.txtarea{
  resize: none;  
  height: auto;
  overflow: hidden; 
  background: var(--gray-below) !important;
  color: var(--bgcolor) !important;
  font-family: "Gintronic";
  box-sizing: border-box;
  border-width: 0px;
  padding: 10px 12px;
  line-height: normal;
  box-shadow: 6px 6px 6px 2px rgba(0, 0, 0, 0.2) !important;
}

button,
.btn,
.btn-large,
.btn-small,
.btn-flat {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1rem;
  padding: 10px 10px 5px 10px;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 500;
  background: var(--black-main);
  color: var(--gray-main);
  border: solid;
  border-width: 3px;
  cursor: pointer;
  user-select: none;
  box-shadow: 6px 6px 6px 2px rgba(0, 0, 0, 0.2) !important;
  transition: background 0.25s ease, color 0.25s ease;
}

/* Click (pressed) */
button:active {
  background: var(--black-main);
  color: var(--b-purple-main);
}

/* focus */
button:hover,
button:focus,
button:focus-visible {

  background: var(--gray-main);
  color: var(--b-purple-main);
transition: background 0.25s ease, color 0.25s ease;
}



.google_btn {
  height: 42px;
  width: auto;
  cursor: pointer;
  box-shadow: 6px 6px 6px 2px rgba(0, 0, 0, 0.2) !important;
  }


@media (min-width: 601px) {
.google_cont {
  display: flex;
  align-items: center;
  justify-content: left; /* use valid value */
  gap: 10px;
}
}



@media (max-width: 600px) {
.google_cont {
  
  align-items: center;
  justify-content: left; /* use valid value */
  gap: 10px;
}
}
@media (min-width: 601px) {
.btn_cont { 
  display: flex;
  align-items: center;
  justify-content: flex-start; /* use valid value */
  gap: 15px;
}
}

/* keep checkbox fixed size and opt-out of flex grow/shrink */
@media (min-width: 601px) {
.btn_cont input[type="checkbox"] {
  flex: 0 0 auto;       /* do not grow or shrink */
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  margin: 0;
}
}
@media (max-width: 600px) {
.btn_cont { 
  
  align-items: center;
  justify-content: flex-start; /* use valid value */
  gap: 15px;
}
}

/* keep checkbox fixed size and opt-out of flex grow/shrink */
@media (max-width: 600px) {
.btn_cont input[type="checkbox"] {
  flex: 0 0 auto;       /* do not grow or shrink */
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  margin: 0;
}
}

.specialConsentCont{
  display:flex; align-items:center;
}


.specialConsent {
margin-top: 10px;
margin-bottom: 15px;
  
}


#currentmailcont {
visibility: hidden;

}

/* POP UP ANIMATIONS */

/* toast container (kept in CSS file) */
/* container: transparent; keeps toast positioned but does NOT blur the whole page */
#msgpopup  {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2147483647;
  pointer-events: none;
  background: transparent; /* keep this transparent so only the toast does blur */
}

/* toast box: semi-transparent + backdrop blur of whatever is behind the box */
#msgpopup  .toast {
  box-sizing: border-box;
  pointer-events: none;
  /* semi-transparent background so backdrop-filter blurs through it */
  background: rgba(0, 0, 0, 0.5);   /* adjust opacity (0.20 == 20%) */
  color: var(--gray-main);
  border-style: solid;
  border-width: 6px;
  border-color: var(--gray-main);
  padding: 10px 16px;
  border-radius: 0;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  min-width: 180px;
  max-width: 70vw;
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.2;
  opacity: 0;
  transform: translateY(0);
  font-weight: 400;
  will-change: transform, opacity;

  /* IMPORTANT: apply backdrop blur to the box itself */
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);

  /* keep the blur effect limited to the box area and not bleed into the border */
  background-clip: padding-box;
}

/* animation: total = 1s; use px units for translateY */
@keyframes toastAnim {
  0%   { opacity: 0; transform: translateY(40px);  }
  12%  { opacity: 1; transform: translateY(-8px); }
  80%  { opacity: 1; transform: translateY(-14px); }
  100% { opacity: 0; transform: translateY(-26px); }
}

#msgpopup ::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/_np.png") repeat;
  opacity: 0.08;
  pointer-events: none;
}

#msgpopup .toast::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/_np.png");
  background-repeat: repeat;
  background-position: center;
  background-size: auto;
  opacity: 0.08;                      /* subtle */
  pointer-events: none;
  z-index: 0;                         /* behind text */
  filter: none;
}

#msgpopup  .toast.animate {
  animation: toastAnim 3s cubic-bezier(.2,.8,.2,1) forwards;
}