@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Space+Grotesk:wght@300..700&display=swap");
@import url("https://fonts.cdnfonts.com/css/futura-pt");
@import url("https://fonts.googleapis.com/css2?family=Yellowtail&display=swap");
:root {
  /* fonts */
  --font-futura-pt: "Futura PT", sans-serif;
  --font-outfit: "Outfit", sans-serif;
  --font-space-grotesk: "Space Grotesk", sans-serif;
  --font-roboto: "Roboto", sans-serif;
  --font-yellowtail: "Yellowtail", cursive;

  /* font sizes */
  --font-size-sm: 14px;
  --font-size-xs: 12px;
  --font-size-83xl: 102px;
  --font-size-61xl: 80px;
  --font-size-base: 16px;
  --font-size-3xl: 22px;
  --font-size-lg: 18px;
  --font-size-69xl: 69px;
  --headings-24-h4-size: 24px;
  --font-size-37xl: 56px;
  --font-size-15xl: 34px;
  --font-size-26xl: 45px;
  --font-size-12xl: 31px;
  --font-size-xl: 20px;
  --headings-40-h2-size: 40px;
  --font-size-13xl: 32px;
  --font-size-lgi: 19px;
  --font-size-33xl: 52px;
  --font-size-23xl: 42px;
  --font-size-97xl: 116px;
  --font-size-16xl: 35px;
  --font-size-39xl: 58px;
  --font-size-7xl: 26px;
  --font-size-29xl: 48px;
  --font-size-10xl: 29px;
  --font-size-19xl: 38px;
  --font-size-29xl-mobile: 33px;
  --font-size-97xl-mobile: 64px;
  --font-size-97xl-mobile2: 88px;
  --font-size-xs-mobile: 10px;
  --font-size-72px: 72px;
  --font-size-60px: 60px;
  --font-size-90px: 90px;

  /* Colors */
  --color-thistle: #d7ccf9;
  --color-gray-100: #2e1a35;
  --deep-black: #13161f;
  --shades-of-black-gray-1: #00000033;
  --gray: #2f324c;
  --shades-of-black-black: #0c2b49;
  --shades-of-black-gray-2: #bebfe0;
  --color-lightsteelblue-100: #bebfe080;
  --color-midnightblue-100: #131456;
  --color-midnightblue-200: #280b5899;
  --color-darkviolet: #c930ff;
  --color-gray-200: #ffffff33;
  --color-gray-300: #ffffffb3;
  --color-gray-400: #ffffff66;
  --color-dodgerblue: #3b82f4;
  --color-blueviolet: #6d01c5;
  --color-white: #fff;
  --color-gray: #ffffffb3;
  --color-black: #000;
  --color-red: #e10019;
  --color-darkslategray: #313131;
  --pink: #df84ff;
  --color-violet-100: #eb9affb5;
  --color-gainsboro-100: #e6e6e6;
  --color-gainsboro-200: #e6e6e617;
  --black: #0c0d3d;
  --color-blueviolet-100: #8b1df9;

  /* Gaps */
  --gap-28xl: 47px;
  --gap-xs: 12px;
  --gap-13xl: 32px;
  --gap-9xl: 28px;
  --gap-3xl: 22px;
  --gap-15xl: 34px;
  --gap-mid: 17px;
  --gap-xl: 20px;
  --gap-29xl: 48px;
  --gap-5xl: 24px;
  --gap-12xl: 31px;
  --gap-21xl: 40px;
  --gap-9xs: 4px;
  --gap-8xs: 5px;
  --gap-base: 16px;
  --gap-3xs: 10px;
  --gap-5xs: 8px;
  --gap-15px: 15px;
  /* Paddings */
  --padding-7xs: 6px;
  --padding-5xs: 8px;
  --padding-lg: 18px;
  --padding-mid: 17px;
  --padding-xl: 20px;
  --padding-53xl: 72px;
  --padding-28xl: 47px;
  --padding-12xl: 31px;
  --padding-xs: 12px;
  --padding-5xl: 24px;
  --padding-2xl: 21px;
  --padding-6xl: 25px;
  --padding-3xl: 22px;
  --padding-base: 16px;
  --padding-108xl: 127px;
  --padding-54xl: 73px;
  --padding-3xs: 10px;
  --padding-95xl: 114px;
  --padding-61xl: 80px;
  --padding-11xs: 2px;
  --padding-12xs: 1px;
  --padding-5xs: 8px;
  --padding-4xs: 9px;
  --padding-13xl: 32px;
  --padding-11xl: 30px;
  --padding-9xs: 4px;
  --padding-21xl: 40px;

  /* margin */
  --margin-7xs: 6px;
  --margin-5xs: 8px;
  --margin-lg: 18px;
  --margin-mid: 17px;
  --margin-xl: 20px;
  --margin-53xl: 72px;
  --margin-28xl: 47px;
  --margin-12xl: 31px;
  --margin-xs: 12px;
  --margin-5xl: 24px;
  --margin-2xl: 21px;
  --margin-6xl: 25px;
  --margin-3xl: 22px;
  --margin-base: 16px;
  --margin-108xl: 127px;
  --margin-54xl: 73px;
  --margin-3xs: 10px;
  --margin-95xl: 114px;
  --margin-61xl: 80px;
  --margin-11xs: 2px;
  --margin-12xs: 1px;
  --margin-5xs: 8px;
  --margin-4xs: 9px;
  --margin-13xl: 32px;
  --margin-11xl: 30px;
  --margin-9xs: 4px;
  --margin-21xl: 40px;

  /* Border radiuses */
  --br-41xl: 60px;
  --br-53xl: 72px;
  --br-5xs: 8px;
  --br-13xl: 32px;
  --br-xs: 12px;
  --br-lg: 18px;
  --br-76xl-6: 95.6px;
  --br-44xl-1: 63.1px;
  --br-base: 16px;
  --br-57xl: 76px;
  --br-5xl: 24px;
  --br-31xl: 50px;

  /* Effects */
  --elevation-2: 0px 34px 44px rgba(217, 124, 232, 0.15),
    0px 8px 18px rgba(46, 53, 116, 0.08);
  --shadow-2: 0px 4px 40px rgba(25, 9, 71, 0.47);
  --shadow-1: 0px 4px 6px rgba(0, 0, 0, 0.47);
}
.bodydiv {
  background-color: white;
}
body {
  /* max-width: 1440px; */
  margin: 0 auto;
  background-color: #000;
}
.Container {
  max-width: 1312px;
  padding: 0 16px;
  margin: 0 auto;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Futura PT", sans-serif;
}

img {
  width: 100%;
  height: 100%;
  /* object-fit: contain; */
}
nav {
  position: relative;
  z-index: 2000;
}
.navheader {
  position: relative;
  z-index: 1000;
  top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: transparent;
  padding: 24px 0;
}
.navEmpirely {
  width: 292px;
  height: auto;
}
.navbarlist-parent {
  /* width: 68%; */
  width: calc(68%);
}
.navbarlist {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.navbarlist ul {
  list-style-type: none;
  display: flex;
  column-gap: 16px;
  transition: 0.5s;
}
.navbarlist ul li a {
  font-family: var(--font-futura-pt);
  font-size: var(--font-size-lg);
  font-weight: 400;
  color: white;
  text-decoration: none;
  position: relative;
  line-height: 23px;
  transition: 0.3s;
  padding: 0 0 14px 0;
}
.navbarlist ul li a.active {
  font-weight: 700;
}
/* .navbarlist ul li a:hover {
  font-weight: 700;
} */
.active::before {
  content: "";
  position: absolute;
  left: 25%;
  bottom: 0;
  /* height: 1px; */
  width: 50%; /* or 100px */
  border-bottom: 5px solid red;
}
.handburger {
  position: relative;
  width: 30px;
  height: 4px;
  background-color: #ffffff;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.3s;
}
.handburger::before,
.handburger::after {
  content: "";
  position: absolute;
  height: 4px;
  right: 0;
  background-color: #ffffff;
  border-radius: 10px;
  transition: 0.3s;
}
.handburger::before {
  top: -10px;
  width: 30px;
}
.handburger::after {
  top: 10px;
  width: 30px;
}
.toogle-menu {
  position: absolute;
  width: 30px;
  height: 30px;
  /* top: 0;
  right: 0; */
  z-index: 3;
  cursor: pointer;
  opacity: 0;
}
.handburger,
.toogle-menu {
  display: none;
}
.navbarlist-parent input:checked ~ .handburger {
  background: transparent;
}
.navbarlist-parent input:checked ~ .handburger::before {
  top: 0;
  transform: rotate(-45deg);
}
.navbarlist-parent input:checked ~ .handburger::after {
  top: 0;
  transform: rotate(45deg);
}
.frame-parent30 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.customselect {
  position: relative;
}
.customselect::after {
  --size: 0.3rem;
  content: "";
  position: absolute;
  right: 1rem;
  pointer-events: none;
}
.customselect::after {
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid black;
  top: 44%;
}
.wrapperselect {
  background-color: white;
  border: 1px solid #000;
  appearance: none;
  -webkit-appearance: none;
  width: 80px;
  position: relative;
  padding: 16px 18px;
  border-radius: 32px;
  display: flex;
  overflow: hidden;
}
.fi-8363075-parent {
  opacity: 0;
  width: 68px;
}
.wrapper__flags {
  position: absolute;
  top: -28%;
  left: -12%;
  pointer-events: none;
}
.fi-8363075-icon {
  width: 32px;
  display: inline-block;
  height: 32px;
  overflow: hidden;
}
.loginbtn {
  font-size: 20px;
  color: white;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: 0em;
  text-align: center;
  background: linear-gradient(263.64deg, #ff3e8f -0.08%, #e10019 99.92%),
    linear-gradient(
      94.27deg,
      rgba(255, 255, 255, 0.7) 0%,
      rgba(255, 255, 255, 0.26) 100.53%
    );
  padding: 10px 18px;
  border: 1px solid;

  border-image-source: linear-gradient(
    94.27deg,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.26) 100.53%
  );
  border-radius: 50px;
  text-decoration: none;
}
footer {
  position: relative;
  background: linear-gradient(0deg, #01143e 0%, #01143e 100%), #fff;
  text-align: center;
  padding: 10px 0;
}
.pink111 {
  /* width: 1396px; */
  height: 70px;
  border-radius: 1396px;
  background: #df84ff;
  filter: blur(137px);
  position: absolute;
  left: 0;
  right: 0;
}
footer h6 {
  position: relative;
  z-index: 10;
  color: #d7ccf9;
  font-size: var(--font-size-base);
  font-style: normal;
  font-weight: 450;
  line-height: 20px;
}
.footerempirly {
  width: 292px;
  height: 52px;
  margin: 20px auto;
  position: relative;
  z-index: 10;
}
footer ul li a {
  position: relative;
  z-index: 10;
  color: var(--color-white);
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-size: var(--font-size-lg);
  font-style: normal;
  /* font-weight: 450; */
  line-height: 22px; /* 26.4px */
  text-decoration: none;
}
footer ul {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 60px;
  margin: 30px 0;
  list-style-type: none;
}
.navbarlist-parent input:checked ~ .navbarlist {
  top: 66px;
  transition: 0.5s;
}






.customselect {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.customselect select{
  display: none;
}
.fi-8363075-parent {
  opacity: 0;
  width: 63px;
  position: absolute;
}
.wrapper__flags {
  position: unset;
}
.customselect::after {
  display: none
}
.wrapperselect {
  width: 84px;
  padding: 6px 8px;
}

@media screen and (max-width: 1300px) {
  .navheader {
    justify-content: start;
    column-gap: 24px;
  }
  .navEmpirely {
    width: 20%;
  }
  .navbarlist {
    column-gap: 24px;
  }
  /* .navbarlist-parent {
    width: 60%;
  } */
}
@media screen and (max-width: 1030px) {
  .handburger,
  .toogle-menu {
    display: block;
  }
  .navheader {
    gap: 0;
    justify-content: space-between;
    align-items: center;
    /* position: fixed; */
    padding: 16px;
    width: 100%;
    z-index: 1000;
    /* top: 0; */
    /* left: 0; */
    /* background-color: #0c0d3d; */
  }
  nav {
    position: relative;
    z-index: 9000;
  }
  .navbarlist-parent {
    width: auto;
  }
  .frame-parent30 {
    padding: 0 20px;
    width: 100%;
  }
  .navbarlist {
    flex-direction: column;
    align-items: start;
    position: absolute;
    background-color: #0c0d3d;
    left: 0;
    top: -686px;
    padding: 0 0 20px 0;
    width: 100%;
  }
  .navbarlist ul {
    justify-content: start;
    flex-direction: column;
    align-items: start;
    z-index: 10;
    width: 100%;
    /* padding: 60px 0 0 0; */
  }
  .navbarlist ul li {
    padding: 10px 20px;
    width: 100%;
  }
  .navEmpirely {
    width: 30%;
  }
  .loginbtn {
    width: 100%;
  }
  .pink111 {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 480px) {
  .Container {
    max-width: 480px;
  }
  .navEmpirely {
    width: 180px;
  }
  .handburger,
  .toogle-menu {
    display: block;
  }
  .navheader {
    gap: 0;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    padding: 16px;
    width: 100%;
    z-index: 1000;
    top: 0;
    left: 0;
    background-color: #0c0d3d;
  }
  nav {
    position: relative;
    z-index: 9000;
  }
  .navbarlist-parent {
    width: auto;
  }
  .frame-parent30 {
    padding: 0 20px;
    width: 100%;
  }
  .navbarlist {
    flex-direction: column;
    align-items: start;
    position: absolute;
    background-color: #0c0d3d;
    left: 0;
    top: -686px;
    padding: 0 0 20px 0;
    width: 100%;
  }
  .navbarlist ul {
    justify-content: start;
    flex-direction: column;
    align-items: start;
    z-index: 10;
    width: 100%;
    /* padding: 60px 0 0 0; */
  }
  .navbarlist ul li {
    padding: 10px 20px;
    width: 100%;
  }
  .loginbtn {
    width: 100%;
  }
  .pink111 {
    width: 100%;
    height: auto;
  }
  .footerempirly {
    width: auto;
    height: auto;
    margin: 20px 20px;
  }
  footer ul {
    column-gap: normal;
    justify-content: space-evenly;
  }
}