*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  min-width: 360px !important;
  scroll-behavior: smooth;
}

img{
  -webkit-user-drag: none; /* Specifiek voor Safari en oudere Chrome-versies */
  user-select: none;       
}

:root {
  /* colors */
  --primary-color: #0A0A0F;
  --secondary-color: #0F0F18;

  --primary-accent-color: #1E50FF;
  --primary-accent-color-1: rgba(30, 79, 255, 0.75);
  --secondary-accent-color: #303037;
  --secondary-accent-color-1: rgba(48, 48, 55, 0.5);
  --tertiary-accent-color-1: rgba(222, 222, 222);


  --primary-text-color: #fff;
  --secondary-text-color: #8888A0;
  --tertiary-text-color: #d4d4d4;

  --primary-color-trsp: rgba(10, 10, 15, 0.75);
  --primary-accent-color-trps: rgba(30, 79, 255, 0.15);
  --secondary-accent-color-trps: rgba(30, 79, 255, 0.2);


  /* Font size */
  --h1-font-size: clamp(2rem, 4vw, 5rem);
  --h2-font-size: clamp(1.3rem, 3vw, 4rem);
  --h3-font-size: clamp(1.4rem, 1.5vw, 1.75rem);
  --h4-font-size: clamp(1.1rem, 1.3vw, 1.5rem);
  --h5-font-size: clamp(.95rem, 1.1vw, 1.3rem);

  --title-SubText: clamp(1rem, 1.4vw, 100rem);
  --badge-fontsize: clamp(.85rem, 1vw, 1.25rem);
  --badge-fontsize_small: clamp(.75rem, .85vw, .95rem);
  --container-SubText: clamp(.9rem, 1vw, 1.2rem);
  --paragraph-fontsize: clamp(.9rem, 1.1vw, 1.25rem);
  --container-fontsize: clamp(.8rem, .95vw, 1rem);

  --primary-btn-fontsize: clamp(.9rem, 1.2vw, 1.5rem);
  --secondary-btn-fontsize: clamp(.9rem, 1.12vw, 1.25rem);
  --tertiary-btn-fontsize: clamp(.85rem, 1vw, 1.2rem);

  /* Padding */
  --nav-padding: 0 clamp(2rem, 10vw, 10rem);
  --section-padding: clamp(2rem, 5vw, 7rem) clamp(1rem, 10vw, 10rem);

  --card-padding_small: clamp(1.5rem, 2vw, 2.5rem);
  --card-padding_mid: clamp(1.75rem, 3vw, 3.5rem);

  --primary-btn-padding: clamp(.75rem, 1vw, 100rem) clamp(1.25rem, 2vw, 100rem);
  --secondary-btn-padding: clamp(0.75rem, 1vw, 100rem) clamp(1rem, 3vw, 100rem);
  --tertiary-btn-padding: clamp(0.5rem, .75vw, 100rem) clamp(1rem, 2vw, 100rem);

  --header-icon-padding: clamp(0.5rem, 0.7vw, 100rem);

  /* Margin */
  --main-margin: clamp(1rem, 3%, 10rem) 0;
  --margin-text__small: clamp(.3rem, .5vw, 1vw) 0;

  /* Border Radius */
  --main-br: 3px;
  --Secondary-btn-br: 10px;

  /* Border */
  --primary-border: 1px solid #303037;
  --secondary-border: 1px solid #1E50FF;
  --tertiary-border: 1px solid #232328;
  --quaternary-border: 1px solid #4d4d57;

  /* Height */
  --nav-height: clamp(5rem, 5vw, 7rem);

  /* Gap */
  --primary-sec-gap: clamp(1.5rem, 2.2vw, 2.5rem);
  --list-gap: clamp(.5rem, .85vw, 1rem);
  --list-gap-small: clamp(.5rem, .7vw, 1rem);

  /* Spacing */
  --small-bottom-spng: clamp(.75rem, 1vw, 1.5rem);
  --small-mid-bottom-spng: clamp(1rem, 1.5vw, 2rem);
  --mid-bottom-spng: clamp(1.5rem, 2vw, 2.5rem);
  --big-bottom-spng: clamp(1.75rem, 2.5vw, 2.5rem);

  --titleh1-lh-spng: clamp(2rem, 4.5vw, 5.5rem);
  --titleh2-lh-spng: clamp(1.5rem, 3.5vw, 4.5rem);
  --titleh3-lh-spng: clamp(1rem, 2.5vw, 3rem);
  --text-lh-spng: clamp(1.3rem, 1.75vw, 2.5rem);
  --text-mid-lh-spng: clamp(1.25rem, 1.5vw, 1.75rem);
  --text-small-lh-spng: clamp(1.25rem, 1.4vw, 1.5rem);

  /* SVG Sizing */
  --svg__width-small: clamp(1.3rem, 1.3vw, 1.5rem);

  /* Transitions */
  --transition__slow: 200ms all;
  --transition__mid: 175ms all;
  --transition__fast: 150ms all;
}

/* Algemene scrollbar */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

/* Achtergrond van scrollbar */
::-webkit-scrollbar-track {
  background: #1e1e1e;
  border-radius: 10px;
}

/* Scrollbar thumb */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,  #1536ac, #1536ac);
  border-radius: 10px;
  border: 2px solid #1e1e1e;
}

/* Hover effect */
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #1536ac, #1536ac);
}

/* Firefox support */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 40, 132, 0.6) #0F0F18;
}

/* ===== HOME GLOBAL SETTINGS ===== */
.global__section{
  background: var(--primary-color);
  padding: var(--section-padding);
}

.global__badge{
  color: var(--primary-accent-color);
  font-size: var(--badge-fontsize);
  font-weight: 500;
  text-transform: uppercase;
}

.global__title-h1{
  font-size: var(--h1-font-size);
  color: var(--primary-text-color);
  line-height: var(--titleh1-lh-spng);
  font-weight: 900;
}

.global__title-h2{
  font-size: var(--h2-font-size);
  color: var(--primary-text-color);
  line-height: var(--titleh2-lh-spng);
  margin: var(--small-bottom-spng) 0;
  font-weight: 900;
}

.global__title-h3{
  font-size: var(--h3-font-size);
  color: var(--primary-text-color);
  margin-bottom: var(--small-bottom-spng);
  font-weight: 900;
}

.global__title-h4{
  font-size: var(--h4-font-size);
  color: var(--primary-text-color);
  margin: var(--margin-text__small);
}

.global__title-h5{
  font-size: var(--h5-font-size);
  color: var(--primary-text-color);
  margin: var(--margin-text__small);
}

.global__text{
  font-size: var(--paragraph-fontsize);
  color: var(--secondary-text-color);
  margin-bottom: var(--small-bottom-spng);
  line-height: var(--text-lh-spng);
}

.global__text--small{
  font-size: var(--container-fontsize);
  color: var(--secondary-text-color);
  line-height: var(--text-small-lh-spng);
}

.global__btn{
  padding: var(--primary-btn-padding);
  border-radius: var(--main-br);
  font-size: var(--primary-btn-fontsize);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: fit-content;
  white-space: nowrap;
  font-weight: 500;
}

body{
  font-family: "Roboto", sans-serif;
}

/* ===== Nav Filling Block ===== */
.nav-block{
  background: var(--primary-color);
  height: var(--nav-height);
}

/* ===== NAV ===== */
.nav{
  display: flex;
  flex-direction: row;
  justify-content: space-between; 
  align-items: center;
  background: var(--primary-color-trps);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  position: fixed;
  padding: var(--nav-padding);
  height: var(--nav-height);
  width: 100%;
  top: 0;
  border-bottom: var(--primary-border);
  color: #fff;
  z-index: 9999;
}

.nav__title{
  text-decoration: none;
  color: inherit;
}

.nav h3{
  font-size: var(--h3-font-size);
}

.nav span:first-child{
  color: var(--primary-accent-color);
}

.nav--list{
  display: flex;
  flex-direction: row;
  gap: 3vw;
}

.nav--list ul{
  display: flex;
  flex-direction: row;
  align-items: center;
  list-style: none;
  gap: 2vw;
  font-size: clamp(.95rem, 1vw, 1.2rem);
}

.nav--list a{
  position: relative;
  text-decoration: none;
  color: #fff;
  align-items: center;
  justify-content: center;
  display: flex;
  transition: var(--transition__mid);
}

.nav--list a:hover{
  color: var(--primary-accent-color);
}

/* --- Current Page Styling --- */
.nav--list a.active{
  color: var(--primary-accent-color);
  font-weight: 500;
}

.nav--list li:has(a.active)::after {
  background-color: var(--primary-accent-color);
}

.nav--list a::before,
.nav--list a.active::before{
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 0px;
  height: 1px;
  border-radius: 99px;
  background: var(--primary-accent-color);
  transition: var(--transition__mid);
}

.nav--list a:hover::before,
.nav--list a.active::before{
  width: 100%;
}

.nav--list_cta{
  background: var(--primary-accent-color);
  font-size: var(--container-SubText);
  font-weight: 500;
  padding: clamp(.4rem, .5vw, .75rem) clamp(.7rem , .85vw, 1rem);
  border-radius: var(--main-br);
  display: flex;
  align-items: center;
  gap: .5vw;
  white-space: nowrap;
  transition: var(--transition__mid);
}

.nav--list_cta:hover{
  transform: translateY(-1px);
  background: var(--primary-accent-color-1);
  color: var(--primary-text-color) !important;
}

.nav--list_cta:active{
  transform: translateY(0px);
}

.nav--list_cta svg{
  height: clamp(1rem, 1.25vw, 1.5rem);
  width: clamp(1rem, 1.25vw, 1.5rem);
  padding: 0;
}

.nav--list_cta:hover::before{
  display: none;
}

/* ===== Footer ===== */
.footer{
  background: var(--secondary-color);
  border-top: var(--primary-border);
  padding: var(--section-padding);
}

.footer__main{
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: space-between;
}

.footer__navigation{
  display: flex;
  flex-direction: row;
}


.footer__about h3{
  font-size: var(--h3-font-size);
  color: var(--primary-text-color);
  margin-bottom: var(--small-bottom-spng);
}

.footer__about span:first-child{
  color: var(--primary-accent-color);
}

.footer__about-text{
  width: 55%;
  line-height: var(--text-lh-spng);
  margin-bottom: var(--mid-bottom-spng);
}

/* Footer Socials */
.footer__socials{
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  gap: var(--list-gap);
}

.footer__socials svg{
  height: clamp(1.15rem, 1.2vw, 2rem);
}

.footer__socials a{
  color: var(--secondary-text-color);
  background: #141420;
  padding: clamp(.3rem, .5vw, 1.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--main-br);
  border: var(--tertiary-border);
  transition: all 250ms;
}

.footer__socials a:hover{
  border: var(--secondary-border);
  color: var(--primary-accent-color);
  transform: translateY(3px);
}

/* Hamburger Menu */
.nav--hamburger {
  display: none;
  border: none;
  background: transparent;
  cursor: pointer;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: 26px;
  height: 21px;
  position: relative;
  flex-direction: column;
  justify-content: space-between;
}

.nav--hamburger span{
  display: block;
  border-radius: 99px;
  width: 100%;
  height: 2px;
  background: var(--primary-text-color);
  transition: var(--transition__mid);
}

/* Footer  Navigation */
.footer__navigation{
  display: flex;
  flex-direction: row;
  align-items: start;
  column-gap: clamp(4rem, 7vw, 10rem);
  row-gap: clamp(2rem, 5vh, 7rem);
}

.footer__navigation-group h4{
  text-transform: uppercase;
  margin-bottom: var(--small-bottom-spng);
  font-size: var(--h4-font-size);
  color: var(--primary-text-color);
}

.footer__navigation ul > li{
  list-style: none;
  line-height: var(--text-lh-spng);
}

.footer__navigation li > a{
  text-decoration: none;
  font-size: var(--container-fontsize);
  color: var(--secondary-text-color);
}

.footer__navigation a{
  transition: all 150ms;
}

.footer__navigation li > a:hover{
  color: var(--primary-text-color);
}

/* Footer Bottom */
.footer__bottom{
  border-top: var(--tertiary-border);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: start;
  margin-top: var(--big-bottom-spng);
}

.footer__bottom ul{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(.7rem, 1.5vw, 2rem);
}

.footer__bottom p,
.footer__bottom ul > li,
.footer__bottom li > a{
  text-decoration: none;
  list-style: none;
  color: var(--secondary-text-color);
  font-size: var(--container-fontsize);
  margin-top: clamp(1rem, 1.5vw, 2rem);
  transition: all 150ms;
}

.footer__bottom li > a{
  text-wrap: nowrap;
}

.footer__bottom li:hover > a{
  color: var(--primary-text-color);
}

/* ----- Media Query ----- */

/* Ipad */

/* Phone */
@media (max-width: 767px) {
  /* ===== Hamburger ===== */
  .nav--hamburger {
    display: flex;
    transition: var(--transition__slow);
  }

  .nav--hamburger.open{
    align-items: center !important;
    justify-content: center !important;
    width: 25px;
    height: 25px;
  }

  .nav--hamburger.open span:nth-child(1) {
    transform:  rotate(45deg);
    position: absolute;
  }

  .nav--hamburger.open span:nth-child(2) {
    transform: rotate(-45deg);
    position: absolute;
  }

  .nav--hamburger.open span:nth-child(3) {
    opacity: 0;
  }

  /* ===== Mobile Navigation ===== */
  .nav--list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    width: 100%;
    height: calc(100dvh - var(--nav-height));
    padding: var(--section-padding);
    z-index: 9998;

    /* Dicht */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition:
        opacity 250ms ease,
        transform 300ms cubic-bezier(.22, 1, .36, 1),
        visibility 300ms;

    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
  }

  .nav--list.open {
      /* Open */
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
  }

  /* ===== Mobile Menu Items ===== */
  .nav--list ul{
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 1rem;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .nav--list li{
    display: flex;
    flex-direction: row;
    align-items: start;
    position: relative;
    padding-bottom: var(--small-bottom-spng);
    border-bottom: var(--quaternary-border);
    width: 100%;
  }

  .nav--list li::after{
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: var(--tertiary-text-color);
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='-4.5 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M249.365851,6538.70769 L249.365851,6538.70769 C249.770764,6539.09744 250.426289,6539.09744 250.830166,6538.70769 L259.393407,6530.44413 C260.202198,6529.66364 260.202198,6528.39747 259.393407,6527.61699 L250.768031,6519.29246 C250.367261,6518.90671 249.720021,6518.90172 249.314072,6519.28247 L249.314072,6519.28247 C248.899839,6519.67121 248.894661,6520.31179 249.302681,6520.70653 L257.196934,6528.32352 C257.601847,6528.71426 257.601847,6529.34685 257.196934,6529.73759 L249.365851,6537.29462 C248.960938,6537.68437 248.960938,6538.31795 249.365851,6538.70769' transform='translate(-249 -6519)'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='-4.5 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M249.365851,6538.70769 L249.365851,6538.70769 C249.770764,6539.09744 250.426289,6539.09744 250.830166,6538.70769 L259.393407,6530.44413 C260.202198,6529.66364 260.202198,6528.39747 259.393407,6527.61699 L250.768031,6519.29246 C250.367261,6518.90671 249.720021,6518.90172 249.314072,6519.28247 L249.314072,6519.28247 C248.899839,6519.67121 248.894661,6520.31179 249.302681,6520.70653 L257.196934,6528.32352 C257.601847,6528.71426 257.601847,6529.34685 257.196934,6529.73759 L249.365851,6537.29462 C248.960938,6537.68437 248.960938,6538.31795 249.365851,6538.70769' transform='translate(-249 -6519)'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
    vertical-align: middle;
    margin-right: 8px;
    transition: var(--transition__mid);
  }

  .nav--list li:hover::after{
  background-color: var(--primary-accent-color);
  }
  .nav--list_cta{
    width: fit-content !important;
    gap: .25rem;
  }

  .nav--list a{
    width: 100%;
    display: flex;
    justify-content: start;
  }

  .nav--list a::before,
  .nav--list a.active::before{
    display: none;
  }

  /* ===== Prevent Page Scroll ===== */
  body.menu-open {
    overflow: hidden;
  }
  
  /* ===== Mobile Menu Blur ===== */
  body.menu-open::before {
    content: "";
    position: fixed;
    inset: 0;
    top: var(--nav-height);
    background: var(--primary-color-trsp);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    z-index: 9998;
    pointer-events: none;
  }

  /* ----- Footer ----- */
  .footer__main{
    display: flex !important;
    flex-direction: column !important;
  }
  
  .footer__about-text{
    width: 100%;
  }

  .footer__navigation{
    display: flex !important;
    flex-wrap: wrap !important;
  }

  .footer__socials {
    margin-bottom: clamp(2rem, 5vw, 7rem);
  }

  .footer__bottom{
    flex-wrap: wrap;
  }

  .footer__bottom p{
    margin-right: .3rem;
  }
}