/*Display font for heading,*/
@font-face {
  font-family: 'Font Display';
  src: url('fonts/BUGATTIDisplay-Regular.woff2') format('woff2');
  font-weight: 400px;
  font-style: normal;
  font-display: block;
}
/*monospace font for buttons, UI link, captionss*/
@font-face {
  font-family: 'Font Monospace';
  src: url('fonts/BUGATTIMonospace-Regular.woff2') format('woff2');
  font-weight: 400px;
  font-style: normal;
  font-display: block;
}
/*text font for paragraphs and body*/
@font-face {
  font-family: 'Font Text';
  src: url('fonts/BUGATTIText-Regular.woff2') format('woff2');
  font-weight: 400px;
  font-style: normal;
  font-display: block;
}
@font-face {
    font-family: 'Gustavo';
    src: url(fonts/gustavo-medium-webfont.88fe21a8.woff2) format("woff2"),
     url(fonts/gustavo-medium-webfont.ff3185f4.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
:root {
  --font-hero: "Gustavo" sans-serif;
  --font-display: "Font Display", "Didot", Georgia, serif;
  --font-body: "Font Text",  serif;
  --font-mono: "Font Monospace", ui-monospace, Menlo, monospace;
  /* Font Sizes */
  --font-hero: 18rem;   /* 288px */
  --font-mid-display: 3.75rem; /* 60px */
  --font-section: 2.25rem; /* 36px */
  --font-hero-a:1.625rem; /* 26px */
  --font-lead: 1.25rem; /* 20px */
  --font-body: 1rem;    /* 16px */
  --font-compact: 0.88rem; /* 14px */
  --font-micro: 0.75rem; /* 12px */

  /* Line Heights */
  --lh-tight: 1.0;
  --lh-display: 1.11;
  --lh-body: 1.4;
  --lh-compact: 1.43;
  --lh-micro: 1.33;

  /* Tracking */
  --track-mono-wide: 1.4px;
  --track-mono-tight: 1.2px;

  /*responsive breakpoints*/
  --bp-mobile: 640px;
  --bp-tablet: 768px;
  --bp-small-desktop: 1024px;
  --bp-desktop: 1280px;
  --bp-large-desktop: 1536px;
  --bp-ultra-wide: 1720px;

  /*spacing*/
  --space-section-xl: 64px;
  --space-section-lg: 48px;
  --space-section-md: 36px;
  --space-section-sm: 12px;
  --btn-padding-primary: 12px 24px;
  --btn-padding-secondary: 6px 12px;

 /* Buttons */
  --btn-radius-pill: 9999px;
  --btn-radius-rounded: 6px;

  /* Nav */
  --nav-height: 48px;
  --logo-width: 128px;
  --logo-height: 29px;
  --nav-font-weight: 14px;

  /* Overlay */
  --overlay-gradient: linear-gradient(
    to top,
    rgba(0,0,0,0.4) 40%,
    rgba(0,0,0,0) 100%
  );

  /* Transition */
  --transition-quiet: 250ms ease;

  /*color*/
   --color-black: #000000;
  --color-white: #ffffff;
  --color-gray: #999999; /* Silver Mist */
  --color-transparent: rgba(0, 0, 0, 0);
}
/* Base */
*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  scroll-behavior:auto;
  background:#000000;
color: whi;}

/* Navbar */
.navbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--color-transparent);
  height: var(--nav-height);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: normal;
  justify-content: space-between;
  align-items: center;
  padding:0 5px;
  width: 100%;
  z-index:50;

  margin-left: auto;
  margin-right: auto;
}

/*nav texts effects*/
.navbar {
  font-size: var(--font-compact);
  line-height: var(--lh-compact);
  text-transform: uppercase;
  letter-spacing: var(--track-mono-wide);
  color: var(--color-white);
  text-decoration: none;
  transition: opacity var(--transition-quiet);
}
.nav-left{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: rgba(1, 1, 1, 0);
  border: none;
}

.nav-event-count{
  font-family:var(--font-body);
  display:flex;
  flex-direction:column;
  align-items:center
}
.nav-event-name{
  font-family:var(--font-mono);
  font-size:var(--font-section);
  letter-spacing: 0.01px;
  font-size: 10px;
  line-height: var(--lh-display);
  opacity:.9
  
}
.nav-event-ctdn{
  font-family: var(--font-mono);
  font-weight:400;
  font-size: 8px;}

.nav-middle{
  gap: 3px;
  align-items: center;
  display: flex;
  vertical-align: middle;
  background: transparent;
  border: none;
}

.middle-brand{
  
    font-family:  Gustavo,sans-serif;
  font-weight: 550;
  font-size: 22px;
  line-height: var(--lh-compact);
  text-transform: uppercase;
  letter-spacing: var(--track-mono-wide);
  color: var(--color-white);
  text-decoration: none;
  transition: opacity var(--transition-quiet)
}
.brand{font-family: var(--font-mono);
  font-size: var(--font-compact);
  line-height: var(--lh-compact);
  text-transform: uppercase;
  letter-spacing: var(--track-mono-wide);
  color: var(--color-white);
  text-decoration: none;
  transition: opacity var(--transition-quiet);}

  
.nav-toggle{
  font-family: var(--font-mono);
  font-size: var(--font-micro);
  line-height: var(--lh-micro);
  font-weight: var(--nav-font-weight);
  text-transform: uppercase;
  letter-spacing: var(--track-mono-tight);
  color: var(--color-white);
  background: transparent;
  border: 1px solid var(--color-white);
  border-radius: var(--btn-radius-pill);    /* full pill */
  padding: var(--btn-padding-primary);
  transition: all var(--transition-quiet);}




/*Menu*/
.menu {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}



.nav-link, .btn-primary {
  font-family: var(--font-mono);
  font-size: var(--font-micro);
  line-height: var(--lh-micro);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--track-mono-tight);
  color: var(--color-white);
  background: transparent;
  border: 1px solid var(--color-white);
  border-radius: var(--btn-radius-pill);    /* full pill */
  padding: var(--btn-padding-primary);
  transition: all var(--transition-quiet);
}
.btn-primary:hover {
  background: var(--color-white);
  color: var(--color-black);
}
.btn-primary:active {
  opacity: 0.7;
}
.btn-primary:focus {
  box-shadow: 0 0 0 1px var(--color-white), 0 0 0 2px var(--color-black);
}












/*about gumball3000 cpm*/
.nav-toggle {
  font-family: 'Bebas Neue', sans-serif; /* Bugatti-style font */
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: white;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.nav-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
}


img {
  max-width: 100%;
  height: auto;
  display: block;
}
      
/*all banner*/
.hero{
    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;
}

.hero-bg{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
}
.gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.904));
  z-index: 1;
}
.hero-overlay{

    position:absolute;

    left:50%;

    /*scale the viewport as screen is small displacement changes*/

    bottom:clamp(
        20px,
        12vh,
        180px
    );

    transform:translateX(-50%);

    display:flex;
    flex-direction:column;
    align-items:center;

    text-align:center;

    width:min(90%,1400px);

    z-index:2;
}

.hero-logo{

    width:clamp(
        220px,
        55vw,
        900px
    );

    height:auto;
}
.hero-text-container{
    display:relative;
}
.hero-text p{
  position: absolute;
  font-size: 1.65rem;
  top: 13%;
  left: 5%;
  font-family: Gustavo, sans-serif;
  font-display: swap;
  font-style: italic;
  color: var(--color-white);
  text-transform: uppercase;
  z-index: 2;
}
.hero-texte{
  
  position: absolute;
  color: var(--color-white);
  top: 45%;
  left: 60%;
  z-index: 5;
}
.hero-textn{
  position: absolute;
  font-size: .7rem;
  top: 46%;
  left: 63%;
  font-family: Gustavo, sans-serif;
  font-display: swap;
  font-style: italic;
  color: var(--color-white);
  text-transform: uppercase;
  z-index: 2;
}
.hero-textm{
  position: absolute;
  font-size: .8rem;
  top: 49%;
  left: 63%;
  font-family: Gustavo, sans-serif;
  font-display: swap;
  font-style: italic;
  color: rgb(255, 159, 23);
  text-transform: uppercase;
  z-index: 2;
}

@media (max-width: 640px) {
  .hero-texte{
  
  position: absolute;
  color: var(--color-white);
  top: 55%;
  left: 60%;
  z-index: 5;
}

.hero-textn{
  position: absolute;
  font-size: .5rem;
  top: 55%;
  left: 63%;
  font-family: Gustavo, sans-serif;
  font-display: swap;
  font-style: italic;
  font-weight: 200 !important;
  color: var(--color-white);
  text-transform: uppercase;
  z-index: 2;
}
.hero-textm{
  position: absolute;
  font-size: .5rem;
  top: 57%;
  left: 63%;
  font-family: Gustavo, sans-serif;
  font-display: swap;
  font-style: italic;
  color: rgb(255, 159, 23);
  text-transform: uppercase;
  z-index: 2;
}
  
}
.primary-outline path {
  
    fill: none;
    stroke: var(--color-white);
    stroke-width: 2;
    opacity: .3;
}

.primary-outline {
    
    height: 20%;
    width: 60%;
}
.hero-textq p{
  position: absolute;
  font-size: 2rem;
  
  top: 15%;
  left:20%;
  font-family: Gustavo, sans-serif;
  font-display: swap;
  font-style: italic;
  color: var(--color-white);
  text-transform: uppercase;
  z-index: 2;
}
@media (max-width: 640px) {
  
}



.hero-caption{
  font-family: var(--font-mono);
    margin-top:clamp(
        8px,
        1vh,
        24px
    );

    color:white;

    font-size:var(--font-micro);

    letter-spacing: 1.4px;;

    text-transform:uppercase;
}

/* Models grid */
.models-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;margin-top:28px
}
.model-card { 
  position: relative;
  overflow: hidden;
}
.model-card img {
  width: 100%;
  display: block;
}

  
.model-card:hover{transform:translateY(-4px)}
.model-card img{width:100%;display:block}
.model-card h3{color:#ffffff;padding:12px 16px;margin:0}

.section-grey{
    color: var(--color-white);
    background: #3f3f3f4d;
}
/*Events cards*/
h2 {
  font-family: var(--font-display);
  padding: 15px;
  font-weight: 400;
  font-size: var(--font-section);
  line-height: var(--lh-display);
  letter-spacing: var(--track-mono-wide);
  
}
#events{background-color: #000;}
.section-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.section-top h2{margin:0;color: #fff8f8;}
/*infinity loop*/

/*event example*/
.scrollCard-wrapper{
  overflow:hidden;
}

.scrollCard-strip{
  display:flex;
    gap:14px;
    width:max-content;
    animation: marquee 40s linear infinite;
}
@keyframes marquee{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}

.card-e-art{
  color: var(--color-white);
  position: relative;
  overflow: hidden;
  background: rgb(0, 0, 0);
  flex:0 0 290px;
  flex-shrink:0;
}
.card-e-art-v{
  margin: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.card-e-art-v-img{
  
  width:100%;height:160px;object-fit:cover;display:block
}
.card-e-art-overlay{
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* text sits bottom by default */
  align-items: center;       /* center horizontally */
  padding: 5px !important;
  background: var(--color-transparent);
  backdrop-filter: blur(24px) saturate(180%);
  mask: linear-gradient(
    to bottom,
    #00000000 0%,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 0) 50%,
    rgba(207, 197, 197, 0) 65%,
    #000000e3 100%
)

}

.card-e-art-tittle{
  position:absolute;

    left:8px;
    right:8px;
    bottom:4px;

    display:flex;
    flex-direction:column;
    z-index:2;

}

.articlee-tittle{


}

.card-e-art-gs{
  background: rgb(21, 21, 21);
  padding: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.card-e-art-gs img{
  width: 15px;
  border-radius: 2px;
}

.card-e-art-gs button{
  width: 120px !important;
  height: 28px;
   font-family: var(--font-mono);
  font-size: 10px;
  line-height: var(--lh-micro);
  font-weight: 400;
  
  text-transform: uppercase;
  letter-spacing: var(--track-mono-tight);
  color: var(--color-black);
  background: #ededed;
  border: var(--color-white);
  border-radius: 36pt;    /* full pill */
  padding-top: 5px;
  transition: all var(--transition-quiet);
}
.card-e-art-v{
  position: relative;
  overflow: hidden;
}
/*bringing section*/
.bringing {
  margin: 0 auto;
  padding: 2rem 20px;
  max-width: max; /* cap width */
  background: var(--color-black);
  display: flex;
  justify-content: center;
  align-items: center;
}
.section.dark{background:#000000;color:#ffffff}

.model-title {
  position: absolute;
  top: 10%; /* top-center */
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--font-body) !important;
  color: var(--color-white);
  text-align: center
}

/* Models grid */


.articlee
{
    position:absolute;

    left:18px;
    right:8px;
    bottom:8px;

    display:flex;
    flex-direction:column;
    column-gap: 10px;
    overflow: hidden;
    

    z-index:2;
}
.articlee img{
  width :25px !important;
  height: 25px;
  border-radius: 25px;
}
.articlee-h {
  display: flex;
  flex-direction: column;
   font-family: Gustavo,sans-serif;
  
}
.articlee button{
  width: 150px !important;
  height: 30px;
   font-family: var(--font-mono);
  font-size: 10px;
  line-height: var(--lh-micro);
  font-weight: 400;
  
  text-transform: uppercase;
  letter-spacing: var(--track-mono-tight);
  color: var(--color-black);
  background: #ededed;
  border: var(--color-white);
  border-radius: 36pt;    /* full pill */
  padding-top: 5px;
  transition: all var(--transition-quiet);
}
.articlee-description{
  font-family: var(--font-mono);
  letter-spacing: 0.5px !important;
  font-size: 9px;
  height: 28px;
  padding-bottom: 10px;
}
.articlee-tittle{
  font-family:Gustavo,sans-serif;
  font-size: var(--font-lead);
}
.tittle-ev{
  position: absolute;
}
.models-grid{
  display:grid;
  padding: 20px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
  margin-top:0% ;
  padding-top: 10px;
}
.dark{
  margin-top: 0;
}
.models-grid-h{
  margin: 0%;
  padding: 0%;
  padding-left: 20px;
  font-size: var(--font-section);
}
.model-card { 
  position: relative;
  overflow: hidden;
}

.model-card img {
  width: 100%;
  display: block;
}

  
.model-card:hover{transform:translateY(-4px)}
.model-card img{width:100%;display:block}
.model-card h3{color:#ffffff;padding:12px 16px;margin:0}
/* Models grid (Designs page) */
.models-grid-page {
    background-color: #000;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  padding: 2rem;
}

.model-card {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #111;
  transition: transform 0.3s ease;
}

.model-card img {
  width: 100%;
  display: block;
  filter: brightness(0.);
  transition: transform 0.5s ease;
  
}

.model-card:hover img {
  transform: scale(1.05);
}

.model-info {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  color: #fff;
}



.model-info h2 {
  margin: 0 0 0.5rem 0;
}

.overlay{
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* text sits bottom by default */
  align-items: center;       /* center horizontally */
  padding: 5px !important;
  background: var(--color-transparent);
  backdrop-filter: blur(24px) saturate(180%);
  mask: linear-gradient(
    to bottom,
    #00000000 0%,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 0) 50%,
    rgba(207, 197, 197, 0) 65%,
    #000000e3 100%
)
}

/* Responsive grid */
@media (min-width: 768px) {
  .models-grid-page {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .models-grid-page {
    grid-template-columns: repeat(3, 1fr);
  }
}

button.learn-more {
  font-family: var(--font-mono);
  font-size: var(--font-compact);
  line-height: var(--lh-compact);
  text-transform: uppercase;
  letter-spacing: var(--track-mono-wide);
  color: var(--color-white);
  background: var(--accent);
  border: none;
  border-radius: var(--btn-radius-rounded);
  padding: var(--btn-padding-secondary);
  cursor: pointer;
  transition: all var(--transition-quiet);
}
/* button */
button.learn-more:hover {
  background: var(--color-white);
  color: var(--color-black);
}
button.learn-more:active {
  opacity: 0.7;
}
button.learn-more:focus {
  box-shadow: 0 0 0 1px var(--color-white), 0 0 0 2px var(--color-black);
}



/* underline effect */
button.learn-more::after {
  content: "";
  display: block;
  width: 100%;
  height: 0.5px;
  background: #fff;
  margin-top: 4px;
}


/* =======================
   MENU OVERLAY
=========================== */

.menu-overlay{
    position: fixed;
    inset: 0;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    padding: 7px;

    background: rgba(0, 0, 0, 0.028);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .35s ease,
        visibility .35s ease;

    z-index: 999;
}

.menu-overlay.open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ===========================
   FLOATING MENU
=========================== */

.side-menu-container{

    width: 100%;
    max-width: 1700px;

    margin-top: 7px;

    background: var(--color-white);
    border-radius: 12px;

    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
    gap: 20px;

    padding: 20px;
    
    max-height: calc(100vh - 23px);

    overflow-y: auto;
    overflow-x: hidden;

    transform: translateY(-20px);

    transition: transform .35s ease;

}

/* Slide in */

.menu-overlay.open .side-menu-container{
    transform: translateY(0);
}

/* Optional scrollbar */

.side-menu-container::-webkit-scrollbar{
    width: 2px;
}

.side-menu-container::-webkit-scrollbar-thumb{
    background:var(--color-transparent);
    border-radius:999px;
}
.side-menu-container{
    overscroll-behavior: contain;
}
.side-menu-arrow{
margin-left: .375rem;
}
button.close-menu{
  background: var(--color-white);
  border: none;
  font-size: var(--font-lead);
}
button.close-menu:hover{
color: #999999ad;
}
button.side-menu-button {
  font-family: var(--font-display);
  font-size: var(--font-lead);
  color: #999999;
  background: var(--accent);
  border: none;
  text-transform: none;
}
button.side-menu-button:hover {
  background: var(--color-white);
  color: var(--color-black);
}

button.side-menu-button:active {
  opacity: 0.7;
}
.side-menu-list{
  display:flex;
  flex-direction:column;
  inset: 0;
  align-items: flex-start;
  gap: 10px;
}
.side-menu-title{
  font-family: var(--font-mono);
  line-height: var(--lh-micro);
  font-size: 13px;
}

.side-menu-list img {
  width:100%;
    aspect-ratio:2.29/1;

    object-fit:cover;
  border-radius: 10px;
  
}

@media (min-width: 768px) {

    .side-menu-container {
        width: 74vw;
        max-width: none;

        margin-left: 0;
        margin-right: auto;

        border-radius: 12px;

    }

}

/*notification overlay*/

.overlay-notification{
  background: rgba(18, 17, 17, 0.787);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: var(--color-white);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    font-family: var(--font-mono);
    padding: 10px;
    gap: 8px;
    margin: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    opacity:0;
    visibility:hidden;
    transform: translateY(-20px);

        transition:
        opacity .35s ease,
        transform .35s ease,
        visibility .35s;


    position: fixed;

    bottom: 30px;
    right: 30px;

    width: 400px;

    z-index: 9999;
}

.overlay-notification.show{
    opacity:1;
    visibility:visible;

    transform:translateY(0);
}

.close-notification{
  position: absolute;
  margin-right: 2.5%;
  right: 0;
  color: var(--color-white);
  font-size: var(--font-compct);
  z-index: 10;
  background: var(--color-transbparent);
  border: none;
}
.close-notification:hover{
 
  color: #999999;
}
.on-middle{
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.on-image{
  flex-basis: 40%;
  border-radius: 8%;
}

.on-button{
  font-family: var(--font-mono);
  font-size: var(--font-micro);
  line-height: var(--lh-micro);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--track-mono-tight);
  color: var(--color-white);
  background: transparent;
  border: 1px solid var(--color-white);
  
  border-radius: 7px;
  padding: var(--btn-padding-secondary);
}

.on-button:hover{
  background: var(--color-white);
  color: var(--color-black);
}

.on-button:active{
  opacity: 0.7;
}

.on-button:focus{
  box-shadow: 0 0 0 1px var(--color-white), 0 0 0 2px var(--color-black);
}
.on-text{
  gap: 8px;
}
.on-text p{
  color: #cecdcd;
}

.on-para {
  font-family: var(--font-mono);
  font-size: var(--font-compact);
  line-height: var(--lh-display);
  font-weight: 70;
  color: var(--color-white) !important;
}

/* ===========================
   KUSTENBRAUCHE SECTION
=========================== */



.kbh{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.kbh-t-h3{
    color:var(--color-white);
    font-size:var(--font-section);
    font-family:var(--font-display);
    padding-left:1.5rem;
}

.kbh-t-p{
    padding: 0;
    font-family:var(--font-mono);
    font-size:var(--font-compact);
    line-height:var(--lh-display);
    text-transform:lowercase;
    letter-spacing:var(--track-mono-wide);
    color:var(--color-white);
}

/* ===========================
   CONTAINER
=========================== */

.kbh-container{
    max-width:1300px;
    margin:auto;
    padding:20px;
    color:var(--color-white);
}

/* ===========================
   GRID
=========================== */

.kbh-grid{
    display:flex;
    align-items:stretch;
    overflow:hidden;
    border-radius:8px;
    height:550px;
}

/* ===========================
   IMAGE
=========================== */

.kbh-img{
    flex:0 0 58%;
    overflow:hidden;
}

.kbh-img img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;

    border-top-left-radius:8px;
    border-bottom-left-radius:8px;
}

/* ===========================
   TEXT
=========================== */

.kbh-text-container{
    flex:0 0 42%;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    background:#171717;

    padding: 20px;

    border-top-right-radius:8px;
    border-bottom-right-radius:8px;
}

.kbh-texts{
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.kbh-t-h h3{
    margin:0;

    font-family:var(--font-mono);
    font-size:30px;
    line-height:1.2;
    text-transform:uppercase;
    letter-spacing:var(--track-mono-wide);
    color:var(--color-white);
}

.kbh-button{
    display:flex;
    align-items:center;

    padding:0;

    font-family:var(--font-mono);

    color:var(--color-white);

    background:none;
    border:none;

    cursor:pointer;

    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:5px;

    width:fit-content;
}

/* ===========================
   MOBILE
=========================== */

@media (max-width:640px){

    .kbh-container{
        padding:15px;
    }

    .kbh-grid{
        display:flex;
        flex-direction:column;
    }

    .kbh-img{
        width:100%;
        aspect-ratio:1/1;
    }

    .kbh-img img{
        width:100%;
        height:100%;
        object-fit:cover;

        border-top-left-radius:8px;
        border-top-right-radius:8px;
        border-bottom-left-radius:0;
    }

    .kbh-text-container{

        width:100%;

        padding: 28px;

        border-top-right-radius:0;
        border-bottom-left-radius:8px;
        border-bottom-right-radius:8px;
    }

    .kbh-t-h h3{
        font-size:22px;
    }

}
.footer-grid{
  background:#171717;
  display: flex;
}

.footer-grid-column{
  flex: 1;
  padding: 20px;
  
  flex-grow: 1;
}

.footer-divider{
  font-family: var(--font-mono);
  font-size: var(--font-compact);
  line-height: var(--lh-compact);
  text-transform: uppercase;
  letter-spacing: var(--track-mono-wide);
  color: #999999;
}

.footer-grid-column a{

    display:block;

    font-family:var(--font-display);
    font-size:var(--font-micro);
    text-transform:lowercase;
    line-height:var(--lh-compact);
    letter-spacing:var(--track-mono-wide);
    color:var(--color-white);
    text-decoration:none;

    margin-top:12px;

}

/*projects*/

.pj{
    position:relative;
    height:300vh;   /* temporary */
}
.projects{
    display: flex;
    position: sticky;
    top: 0;
    width:100%;
    max-width:none;
    margin:auto;
}
.projects p{
  color: var(--color-white);
}

.projects-container{
    
    background: linear-gradient(
    to bottom,
    #000 0%,
    rgba(255, 255, 255, 0.081) 35%,
    rgba(255, 255, 255, 0.033) 50%,
    rgba(255, 255, 255, 0) 65%,
    #000000be 100%
);
  
    overflow:hidden;
}

.project-inner{
  color: var(--color-white);
    display:flex;

    align-items:flex-start;

    height:100%;

    width:max-content;

    will-change:transform;

}
/*column 1*/
.horizontal-grid-col {
    flex-flow: column;
    flex: none;
    justify-content: flex-start;
    align-items: flex-start;
    width: auto;
    height: 100%;
    display: flex;
}

.horizontal-item-w {
    position: relative;
}
.horizontal-item-layout {
    grid-column-gap: 1.25rem;
    grid-row-gap: 1.25rem;
    flex-flow: column;
    display: flex;
}

.off-t-horiz-title-w {
    grid-column-gap: 1.25rem;
    grid-row-gap: 1.25rem;
    flex-flow: column;
    display: flex;
}

.eyebrow-w {
    grid-column-gap: calc(1.25rem * .5);
    grid-row-gap: calc(1.25rem * .5);
    display: flex;
    flex-direction: column;
    overflow: clip;
}

.horizontal-item-img-w.is-offt1 {
  width: calc(1vh * 50);
  height: calc(1vh * 100);
  margin-top: calc(1vh * 8.42);
  overflow:hidden;
}
.horizontal-item-img-w.is-offt1 p {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #ffffff;
}

.horizontal-item-img-w img{

    width:90%;

    border-radius: 10px;
    display:block;

}
/*column 1*/
.horizontal-grid-col {
    flex-flow: column;
    flex: none;
    justify-content: flex-start;
    align-items: flex-start;
    width: auto;
    height: 100%;
    display: flex;
}
.horizontal-item-img-w2.is-offt2 {
  width: calc(1vh * 60);
  height: calc(1vh * 38);
  margin-top: calc(1vh * 8.42);
  overflow:hidden;
}
.horizontal-item-img-w2 img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}


.text-title-lg-mona.split-flex {
    justify-content: flex-start;
    align-items: flex-start;
}

.horizontal-grid-spacer {
    width: 31.51vh;
    pointer-events: auto;
    flex: none;
}

/*for inner button sub tittle*/

.prev-ev{
  font-family: Gustavo ,sans-serif;
  color: #fbfbfb;
  font-weight: 600;
  font-size: var(--font-compct);
}
.btn-pe {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: var(--lh-micro);
  font-weight: 400;
  height: 22pt;
  width: 75pt;
  text-transform: uppercase;
  letter-spacing: var(--track-mono-tight);
  color: var(--color-white);
  background: #535450;
  backdrop-filter: blur(50px);
  border: none;
  border-radius: 36pt;    /* full pill */
  padding-top: 5px;
  transition: all var(--transition-quiet);
}
.btn-pe-d{
  display: flex;
  flex-direction: row;
  margin-top: 15px;
  gap: 5px;
  color: var(--color-white);
}

.btn-pe-d-t{
  height: 9px;
  font-size: 9px !important;
  font-family: 'Helvetica Neue' ,sans-serif !important;
  color: var(--color-white) !important;
  font-weight: 50;
}
.btn-pe-d-type{
  font-size: 9px !important;
  font-family: var(--font-display) !important;
  color: var(--color-white) !important;
}

.pe-d{
    display: flex;
    flex-direction: column;

    width: 30px;
    height: 13px;
    border-radius: 4px;

    /* Glass */
    background:
linear-gradient(#111,#f7f5f51e);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);

    /* Glass edge */
    border: 1px solid rgba(255, 255, 255, 0.023);

    /* Depth */
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0),
        inset 0 -1px 1px rgba(255, 255, 255, 0.084),
        0 6px 20px rgba(0, 0, 0, 0.038);

    font-size:9px;
}



.pe-dt{
  display: flex;
  margin-bottom: 0% !important;
  gap: 4px;
  row-gap: 1px !important;
  height: 9px;
}
.pe-dl{
  font-size: 8px;
}

/*for gamers by g para*/
.mission{
  color: var(--color-white);
  padding: 20px;
}
.missionPara{
  visibility: visible;
  font-family: Arial, Helvetica, sans-serif;
  color: #ebeee0;;
  text-transform: lowercase;
  
}
/*store styles*/
.shop-collection-h{
  font-family: var(--font-display);
  color: var(--color-white);
  font-weight: 500;
  padding-left: 15px;
}

.shop-collection-inner{
  background: var(--color-white);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  height: 380px;
  width: 319.705px;
  position: relative;
  flex-shrink: 0;
  margin: 0;
  padding: 0px;
  
}
.shop-collection-wrapper{
  padding: 20px;
}

.shop-collection-img{
  width:100%;
    height:80%;
    display:block;
    object-fit:cover;
    border-top-right-radius:8px;
    border-top-left-radius:8px;
}.shop-collection-container{
  

}



.shop-collection-inner article {
  position: absolute;
  top: 70%;             
  left: 50%;
  transform: translate(-50%, -50%); 
  z-index: 5;              
  color: #000000;            
  padding: 8px 12px;
  pointer-events: none;    
  
}

.shop-collection-container-text{
 
}

.shop-collection-container-button{
   width: 120px !important;
  height: 28px;
   font-family: var(--font-mono);
  font-size: 10px;
  line-height: var(--lh-micro);
  font-weight: 500;
  color: var(--color-white);
  
  text-transform: uppercase;
  letter-spacing: var(--track-mono-tight);
  color: var(--color-black);
  background: #ededed;
  border: var(--color-white);
  border-radius: 36pt;    /* full pill */
  padding-top: 5px;
  transition: all var(--transition-quiet);
}
.shop-collection-inner-tittle{
  padding-top: 8px !important;
  padding: 0 12px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 9px;color: #535450;
}

.shop-collection-inner--details{
}

.shop-collection-inner--details-product{
  font-family: var(--font-display);
  font-weight: 200 !important;
  font-size: var(--font-lead);
  color: #000;
}

.shop-collection-inner--details-price{
  color: rgb(0, 75, 250);
  padding-left: 165px;
  font-size: var(--font-body);
}
.shop-collection-inner-pp{
  display: flex;
    justify-content: space-between;

     
}
.shop-collection-container-logo{
  height: 25px;
  border-radius: 50%;
}
.shop-collection-inner-overlay{
  gap: 4px;
  display: flex;
  color: var(--color-white);
  position: absolute;
  top: 3%;             
  left: 3%;            
  color: #000000;   
  align-items: center; 
}

.shop-collection-container-sn{
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 300;
  display: flex;
}
.shop-collection-container-cd{
  display: flex;
  gap: 0;
  
}

.verified{
  width: 10px;
  height: 10px;
  transform: translateY(-2px );
}