@font-face {
  font-family: "Roboto";
  src: url("/css/fonts/Roboto-Light-webfont.eot");
  src: url("/css/fonts/Roboto-Light-webfont.eot?#iefix") format("embedded-opentype"), url("/css/fonts/Roboto-Light-webfont.woff") format("woff"), url("/css/fonts/Roboto-Light-webfont.ttf") format("truetype"), url("/css/fonts/Roboto-Light-webfont.svg#RobotoLight") format("svg"),
    url("/css/fonts/Roboto-Medium.ttf") format("truetype");

  font-weight: 100;
  font-style: normal;
  font-family: "Refrigerator-Deluxe";
  src: url("/css/fonts/Mark-Simonson-Refrigerator-Deluxe-Heavy.ttf") format("truetype");
}
@font-face {
  font-family: "Refrigerator-Deluxe-Light";
  src: url("/css/fonts/Mark-Simonson-Refrigerator-Deluxe-Light.ttf") format("truetype");
}

@font-face {
  font-family: "PBSport";
  src: url("/css/fonts/Sport/PBSport-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "PBSport";
  src: url("/css/fonts/Sport/PBSport-BlackItalic.woff") format("woff");
  font-weight: 900;
  font-style: italic;
}

@font-face {
  font-family: "PBSport";
  src: url("/css/fonts/Sport/PBSport-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "PBSport";
  src: url("/css/fonts/Sport/PBSport-BoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: "PBSport";
  src: url("/css/fonts/Sport/PBSport-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "PBSport";
  src: url("/css/fonts/Sport/PBSport-LightItalic.woff") format("woff");
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: "PBSport";
  src: url("/css/fonts/Sport/PBSport-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "PBSport";
  src: url("/css/fonts/Sport/PBSport-RegularItalic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
}

/* >>> NEW START*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--background-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  transform: none;
  zoom: 1;
}

:root {
  --nav-height: 56px;
  --nav-bottom-height: 0px;
  --nav-bottom: #012b5c;
  --header-height: 200px;
  --footer-height: 120px;
  --header-text: #293958;
  --paragraph-text: #485873;
  --background-light: #e9effa;
  --background-dark: #e2eaf8;
  --primary-text: #e6f1ff;
  --primary-main: #00efe5;
  --menu-devider: #4e74a4;
  --menu-btn-background: #00449b;
  --menu-btn-border: #5e84af;
  --menu-text: #c5d6e5;
  --card-button: #29ff98;
  --card-button-text: #2d3a76;
}

@media only screen and (max-width: 1024px) {
  :root {
    --nav-height: 40px;
    --nav-bottom-height: 40px;
  }
}

#OtgovornaIgra {
  max-width: 100vw;
  min-height: 100vh;
  /* background-color: #afb7c5; */
}

.otgovorna-igra-container {
  max-width: 1920px;
  min-height: 100vh;
}

#navbar {
  width: 100%;
  position: fixed;
  top: 0;
  overflow: hidden;
  /* box-shadow: 0px 2px 3px 1px rgba(0, 43, 91, 0.2); */
  display: flex;
  flex-direction: column;
  /* align-items: center;
  justify-content: space-between; */
  z-index: 99;
}

.nav-container-top,
.nav-container-bottom {
  width: 100%;
  display: flex;
  align-items: center;
}

.nav-container-top {
  justify-content: space-between;
}

.nav-container-bottom {
  justify-content: flex-start;
}

.nav-container-top {
  width: 100%;
  height: var(--nav-height);
  background: linear-gradient(270deg, #204bc0 0%, #002b5b 100%);
  padding: 0 24px;
}

.nav-container-bottom {
  width: 100%;
  height: var(--nav-bottom-height);
  gap: 8px;
  padding: 0 12px;
  box-shadow: 0px 4px 2.3px 0px rgba(0, 0, 0, 0.06);
  background: var(--nav-bottom);
  overflow-x: scroll;
  scroll-behavior: smooth;
}

.nav-container-bottom::-webkit-scrollbar {
  display: none;
}

.nav-container-left,
.nav-container-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-container-left {
  justify-content: flex-start;
}

.nav-container-right {
  justify-content: flex-end;
}

.nav-container-left div,
.nav-container-right div,
.nav-container-left a,
.nav-container-right a,
.nav-container-bottom div,
.nav-container-bottom a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-wrap: nowrap;
  color: var(--primary-text);
  text-align: center;
  font-family: Roboto;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.15px;
  text-transform: uppercase;
}

.nav-container-left div,
.nav-container-right div,
.nav-container-left a,
.nav-container-right a {
  cursor: pointer;
  line-height: 40px;
}

.nav-container-left div,
.nav-container-left a {
  padding: 8px;
}

.nav-container-bottom div,
.nav-container-bottom a {
  font-weight: 400;
}

.nav-container-bottom a {
  max-width: 200px;
}

.nav-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  height: var(--nav-height);
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-container-right .tab-holder {
  cursor: pointer;
  height: 56px;
  padding: 0 12px;
  position: relative;
}

.nav-container-right .active-element {
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 2px 2px 0 0;
  background: var(--primary-main);
  display: none;
}

.tab-holder a:hover,
.nav-container-left > div:hover {
  color: white;
}

.tab-holder a img:hover {
  filter: brightness(2);
}

.nav-container-right .tab-holder.active {
  background: linear-gradient(180deg, rgba(0, 239, 229, 0) 0%, rgba(0, 239, 229, 0.2) 69.18%, rgba(0, 239, 229, 0.29) 88.2%, rgba(0, 239, 229, 0.44) 100%);
}

.nav-container-right .tab-holder.active > .active-element {
  display: block;
}

.logo,
.contact,
.nav-container-bottom div,
.nav-container-bottom a {
  padding: 0 8px;
}

.nav-container-bottom div:not(.menu-devider),
.nav-container-bottom a:not(.menu-devider) {
  background: var(--menu-btn-background);
  height: 30px;
  border: 2px solid var(--menu-btn-background);
  border-radius: 8px;
}

.nav-container-bottom div.active,
.nav-container-bottom a.active {
  border: 2px solid var(--menu-btn-border);
}

.navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  list-style: none;
}

.navigation > div {
  padding: 0 21px;
  color: var(--primary-text);
  text-align: center;
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.15px;
}

#contact-icon {
  width: 40px !important;
  height: 40px !important;
}

#contact-icon svg {
  width: 40px;
  height: 40px;
}

#contact-icon .icon {
  display: none;
}

#contact-icon .icon-inactive {
  display: block;
}

#contact-icon .icon-active {
  display: none;
}

#contact-icon.active .icon-inactive {
  display: none;
}

#contact-icon.active .icon-active {
  display: block;
}

.menu-devider {
  width: 2px !important;
  height: 30px !important;
  background: var(--menu-devider) !important;
  padding: 0 1px !important;
}

/* >>> Hero start */
.hero {
  position: relative;
  width: 100%;
  height: clamp(200px, 31vw, 373px);
  /* padding-top: var(--nav-height); */
  margin-top: calc(var(--nav-height) - 1px);
  z-index: 1;
  overflow: hidden;
}

.play-responsibly-background {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: linear-gradient(80deg, #58102e 1.56%, #ad084e 97.15%);
}

.hero img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero.play-responsibly img {
  object-fit: contain;
  width: clamp(290px, 43vw, 510px);
  height: auto;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
}

.hero img.hero-mobile {
  display: none;
}

.hero-header {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--primary-text);
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-family: "PBSport";
  font-size: clamp(33px, 4vw, 55px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.45px;
}

.hero-subheader {
  width: 80%;
  position: absolute;
  top: 78%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  text-align: center;
  font-family: "PBSport";
  font-size: clamp(20px, 1.8vw, 24px);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.45px;
}

@media (max-width: 480px) {
  .hero img.hero-desktop {
    display: none;
  }

  .hero img.hero-mobile {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* <<< Hero end */

.main-contianer {
  width: 100%;
  /* TODO if Footer */
  /* padding-bottom: var(--footer-height); */
}

.main {
  /* max-width: 1240px; */
  /* margin: 0 auto; */
  /* padding: 0 20px; */
}

section {
  padding: 51px 0 84px;
  overflow: hidden;
  position: relative;
}

section#forUs {
  padding-top: 200px;
}

.useful-wrapper {
  position: absolute;
  top: clamp(200px, calc(28.5vw + 40px), 383px);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  width: 240px;
  /* TODO change for 5 */
  /* max-width: 1240px;
  padding: 0 20px; */
  /* grid-template-columns: repeat(5, 1fr); */
  /* gap: 16px; */
  justify-items: center;
  align-items: center;
}

/* .useful-tab {
  width: 226px;
  height: 144px;
  padding: 19px 67px;
  background: red;
} */

/* .useful-tab {
  width: 19%;
  height: 144px;
  background: red;
} */

.useful-tab {
  position: relative;
  width: 100%;
  height: 144px;
  padding: 12px 12px;
  border-radius: 6px;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: space-between;

  overflow: hidden;
  cursor: pointer;
}

.modals-blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(129deg, rgba(255, 255, 255, 0.38) 0.29%, rgba(255, 255, 255, 0.83) 47.16%, #fff 96.92%);
  backdrop-filter: blur(6px);
  z-index: 0;
}

.useful-tab:hover {
  transform: scale(1.05);
  box-shadow: 0px 3.185px 22.255px 0px rgba(41, 57, 88, 0.09);
}

.useful-tab img {
  width: 66px;
  height: 66px;
  z-index: 1;
}

.modals-text-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.modals-text {
  color: #6e87b7;
  text-align: center;
  font-family: Roboto;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.15px;
}

.modals-mobile-background-wrapper {
  position: absolute;
  top: 320px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 104px;
  z-index: 1;
  padding: 10px 0;
}

/* TODO for 5 */
/* .modals-mobile-background-wrapper {
  position: absolute;
  top: clamp(300px, calc(29.5vw + 120px), 373px);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 208px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
  padding: 10px 0;
} */

.modals-mobile-background {
  width: 100%;
  height: 80px;
  padding: 12px 0;
  background: linear-gradient(180deg, #b4c7eb 0%, #dbe8ff3a 100%);
}

@media only screen and (max-width: 768px) {
  .useful-wrapper {
    top: clamp(300px, calc(29.5vw + 120px), 373px);
    gap: 12px;
  }

  .useful-tab {
    /* TODO Change for 5 */
    /* height: max(100px, 20vw); */
  }

  /* TODO Change for 5 */
  /* .useful-tab img {
    width: max(46px, 8.5vw);
    height: max(46px, 8.5vw);
  } */

  /* TODO Change for 5 */
  /* .modals-text {
    font-size: 14px;
  } */

  /* TODO Change for 5 */
  section#forUs {
    padding-top: 260px;
  }
  /* section#forUs {
    padding-top: max(300px, calc(100px + 44vw)) !important;
  } */
}

@media only screen and (max-width: 480px) {
  .useful-wrapper {
    gap: 8px;
  }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .useful-wrapper {
    top: clamp(200px, calc(28.5vw + 58px), 373px);
  }

  .hero-subheader {
    display: none !important;
  }
}

@media only screen and (max-width: 1240px) {
  .useful-wrapper {
    grid-template-columns: repeat(1, 1fr);
    /* TODO Change for 5*/
    /* grid-template-columns: repeat(6, 1fr); */
    /* width: clamp(320px, 90vw, 740px); */
  }

  .useful-tab:nth-child(1),
  .useful-tab:nth-child(2),
  .useful-tab:nth-child(3) {
    grid-column: span 2;
  }

  .useful-tab:nth-child(4),
  .useful-tab:nth-child(5) {
    grid-column: span 3;
  }

  /* TODO Change for 5 */
  /* section#forUs {
    padding-top: 340px;
  } */
}

.bacground-decoration {
  position: absolute;
  top: -190px;
  left: -190px;
}

.section-content {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

section:nth-child(odd) {
  background-color: var(--background-light);
}

section:nth-child(even) {
  background-color: var(--background-dark);
}

.footer {
  width: 100%;
  height: var(--footer-height);
  position: fixed;
  bottom: 0;
  overflow: hidden;
  background: rgb(59, 56, 56);
  z-index: 99;
}

.header-wrapper {
  position: relative;
  margin-bottom: 50px;
}

.header-wrapper.end-line {
  margin-bottom: 0px;
}

.header-wrapper h1 {
  color: var(--header-text);
  font-family: "PBSport";
  font-size: 42px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.34px;
}

.subheader-wrapper {
  position: relative;
  margin-bottom: 24px;
}

.subheader-wrapper h2 {
  color: var(--header-text);
  font-family: Roboto;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.2px;
  padding-left: 24px;
}

.subheader-wrapper .arrow {
  position: absolute;
  top: 3px;
  left: -210px;
  display: flex;
  align-items: center;
}

.subheader-wrapper .arrow img {
  width: 100%;
  height: 100%;
}

.image-decoration {
  position: absolute;
  top: -170px;
  left: -200px;
  /* width: 804px;
  height: 853px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
}

.image-decoration img {
  width: 100%;
  kerning: 100%;
}

.line-decoration {
  width: 100%;
  height: 2px;
  position: absolute;
  top: 40px;
  left: 0;
}

.line-decoration img {
  width: 100%;
  height: 2px;
}

.line-decoration.end-line {
  top: -10px;
}

.main p {
  color: var(--paragraph-text);
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.3px;
  margin: 0 0 20px;
}

.main p:last-child {
  margin-bottom: 0;
}

.main p span {
  color: var(--header-text);
  font-weight: 500;
}

.text-container.dot-list p span {
  color: var(--paragraph-text);
}

.text-container.dot-list p span {
  position: relative;
  left: 22px;
}

.text-container.dot-list p img {
  position: absolute;
  top: 7px;
  left: -14px;
}

.text-img,
.img-text,
.text-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-bottom: 70px;
}

.text-text {
  align-items: flex-start;
}

.text-img > div,
.img-text > div,
.text-text > div {
  flex: 50%;
}

.text-img .text-container {
  padding-right: clamp(40px, calc(22vw - 160px), 90px);
}

.img-text .text-container {
  padding-left: clamp(40px, calc(22vw - 160px), 90px);
}

.text-text {
  gap: clamp(40px, calc(22vw - 160px), 90px);
  padding-right: 20px;
}

@media only screen and (max-width: 768px) {
  .text-text.dot-list {
    gap: 16px;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: start;
  }

  .text-img,
  .img-text,
  .text-text {
    padding-bottom: 40px;
  }
}

.text-img .image-container,
.img-text .image-container {
  z-index: 1;
}

.text-img .image-container img,
.img-text .image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* >>> Drop down start */
.drop-down-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 25px;
  -webkit-tap-highlight-color: transparent;
}

.drop-down-wrapper {
  cursor: pointer;
  border-bottom: 2px solid rgba(40, 95, 146, 0.12);
}

.header-arrow-wrapper {
  width: 100%;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-arrow-wrapper h3 {
  color: var(--header-text);
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.drop-down-text {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.5s;
  overflow: hidden;
}

.drop-down-text p {
  min-height: 0;
}

.drop-down-text p span {
  display: block;
  padding-bottom: 25px;
  color: var(--paragraph-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.2px;
}

.drop-down-wrapper.active .drop-down-text {
  grid-template-rows: 1fr;
}

.drop-down-arrow {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drop-down-arrow svg {
  width: 16px;
  height: 11px;
  --drop-down-arrow: rgba(76, 121, 164, 0.5);
  transition: all 0.5s ease;
}

.drop-down-wrapper.active .drop-down-arrow svg {
  --drop-down-arrow: rgba(15, 112, 203, 0.8);
  transform: rotate(-180deg);
}

/* <<< Drop down end */

/* >>> Section Motot start */
.section-moto {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 60px;
}

.moto-wrapper {
  position: relative;
  max-width: 520px;
  border-radius: 6px;
  padding: 20px;
  background: #eff4fe;
  overflow: hidden;
}

.moto-wrapper img {
  position: absolute;
  width: 123px;
  height: 123px;
  bottom: -10px;
  right: 20px;
  z-index: 0;
}

.moto-wrapper p {
  position: relative;
  z-index: 1;
}

@media only screen and (max-width: 520px) {
  .moto-wrapper {
    border-radius: 0px;
  }
}
/* <<< Section Motot end */

.video-container {
  display: flex;
  flex-direction: column;
  padding-bottom: 70px;
}

.video-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow-x: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-bottom: 30px;
}

.video-wrapper > div {
  cursor: pointer;
}

.video-wrapper img {
  width: 392px;
  aspect-ratio: 16 / 9;
  -webkit-user-drag: none;
  border-radius: 6px;
}

@media only screen and (max-width: 480px) {
  .video-wrapper img {
    width: 260px;
    aspect-ratio: 16 / 9;
  }
}

@media only screen and (max-width: 320px) {
  .video-wrapper img {
    width: 180px;
    aspect-ratio: 16 / 9;
  }

  .video-wrapper {
    gap: 8px;
  }
}

.youtube-video-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 10px);
  max-width: 1060px;
}
.youtube-video-container iframe {
  aspect-ratio: 16 / 9;
  width: calc(100% - 4px);
}

.framedform {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9998;
}
.framedform.open {
  display: block;
}
.framedform .framedcontent {
  position: relative;
  width: 100%;
  height: 100%;
  background: -moz-linear-gradient(top, rgba(5, 6, 6, 0.9) 0, rgba(2, 24, 38, 0.95) 100%, #050607 100%);
  background: -webkit-linear-gradient(top, rgba(5, 6, 6, 0.9) 0, rgba(2, 24, 38, 0.95) 100%, #050607 100%);
  background: linear-gradient(to bottom, rgba(5, 6, 6, 0.9) 0, rgba(2, 24, 38, 0.95) 100%, #050607 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#e6050606', endColorstr='#050607', GradientType=0);
  background-size: cover;
  overflow-y: auto;
}
.framedform .framedcontent form {
  width: 90%;
  max-width: 400px;
  position: relative;
  left: 50%;
  top: 50%;
  background: #292f3b;
  border-radius: 12px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.buttons-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.yt-left-arrow,
.yt-right-arrow {
  --icon-stroke: #0068fa66;
}

.yt-left-arrow.active,
.yt-right-arrow.active {
  --icon-stroke: #0068fa;
  cursor: pointer;
}

.dots-container {
  display: flex;
  align-items: center;
  gap: 16px;
}

.scroll-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #333d5233;
}

.scroll-dot.active {
  background: #006afa;
}

.smooth-scroll {
  scroll-behavior: smooth;
}

@media only screen and (max-width: 768px) {
  .text-img .text-container,
  .img-text .text-container {
    padding: 0;
    padding-bottom: 20px;
  }

  .text-img,
  .img-text,
  .text-text {
    flex-direction: column;
    gap: 16px;
  }

  .text-text {
    align-items: center;
  }

  .text-img .image-container,
  .img-text .image-container {
    order: 2;
  }

  .image-container {
    width: 100%;
  }
}

@media only screen and (max-width: 480px) {
  .desktop-max {
    display: none !important;
  }
}

@media only screen and (min-width: 481px) {
  .mobile-min {
    display: none !important;
  }
}

@media only screen and (max-width: 768px) {
  .desktop-mid {
    display: none !important;
  }
}

@media only screen and (min-width: 769px) {
  .mobile-mid {
    display: none !important;
  }
}

@media only screen and (max-width: 1024px) {
  .desktop {
    display: none !important;
  }

  #navbar {
    height: calc(var(--nav-height) + var(--nav-bottom-height));
  }

  .nav-container-top {
    justify-content: center;
  }

  .hero {
    margin-top: calc(var(--nav-height) + var(--nav-bottom-height) - 1px);
  }
}

@media only screen and (min-width: 1025px) {
  .mobile {
    display: none !important;
  }

  #navbar {
    background: linear-gradient(270deg, #204bc0 0%, #002b5b 100%);
  }

  .drop-down-wrapper:hover .drop-down-arrow svg {
    --drop-down-arrow: rgba(15, 112, 203, 0.8);
  }
}

/* <<< NEW END*/

/* >>> Modal start */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: -webkit-fill-available;
  max-width: 100%;
  height: 100%;
  background: rgba(230, 241, 255, 0.5);
  backdrop-filter: blur(5px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 0 80px;
  overflow-y: auto;
}
.modal__close {
  position: absolute;
  top: -25%;
  right: -60px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s;
  /* float: right; */
  /* font-size: 28px; */
  /* font-weight: bold; */
  width: 32px;
  height: 32px;
  z-index: 9999999;
}
.modal__close:hover {
  transform: rotate(90deg);
}
.modal__content {
  border-radius: 12px;
  background: #fff;
  box-shadow: 0px 2px 25px 0px rgba(0, 0, 0, 0.05);
  width: -webkit-fill-available;
  max-width: 796px;
  /* TODO height delete*/
  height: 60%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  /* padding: 20px; */
}

.modal__scrollable-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
.modal__scrollable-container::-webkit-scrollbar {
  display: none !important;
}
.modal__scrollable-element {
  flex: 0 0 100%;
  scroll-snap-align: start;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}
.modal__navigation-buttons {
  pointer-events: none;
  display: none;
}
.modal__navigation-button-next,
.modal__navigation-button-prev {
  position: absolute;
  cursor: pointer;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
  border: none;
  background: none;
  padding: 0;
}

.modal__navigation-button-prev {
  left: -66px;
}
.modal__navigation-button-next {
  right: -66px;
}
.modal__dot-container {
  padding: 8px 0;
  width: 100%;
  max-width: 180px;
  background: #fff;
  border-radius: 12px;
  justify-content: space-around;
}
.modal__dot-container-dot {
  height: 14px;
  width: 14px;
  background-color: #becfe4;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

@media (min-width: 768px) {
  .modal {
    padding: 0 80px;
  }
  .modal__navigation-buttons {
    display: block;
  }
  .modal__dot-container {
    position: absolute;
    left: 50%;
    bottom: -40px;
    transform: translateX(-50%);
  }
}
/* <<< Modal end */

.fondation-logo {
  width: 100%;
  padding-top: 30px;
}

.fondation-logo img {
  width: 332px;
  height: 70px;
}

.contact-card-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

@media only screen and (max-width: 480px) {
  .contact-card-wrapper {
    flex-direction: column;
  }

  .fondation-logo img {
    width: 208px;
    height: auto;
  }
}

.contact-card {
  width: 208px;
  height: 279px;
  padding: 22px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: space-between;
  background: linear-gradient(129deg, rgba(255, 255, 255, 0.38) 0.29%, rgba(255, 255, 255, 0.83) 47.16%, #fff 96.92%);
  border-radius: 12px;
}

.contact-card img {
  width: 98px;
  height: 98px;
}

.contact-card-header {
  color: var(--header-text);
  text-align: center;
  font-family: Roboto;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.3px;
}

.contact-card-description {
  color: var(--paragraph-text);
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 171.429% */
  letter-spacing: 0.3px;
}

.email-button,
.phone-button {
  width: 184px;
  height: 36px;
  padding: 6px 16px;
  border-radius: 6px;
  background: var(--card-button);

  color: var(--card-button-text);
  text-align: center;
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.2px;
}

.contact-card a {
  text-decoration: none;
}

.contact-card-phone {
  width: 184px;
  height: 36px;
  padding: 6px 16px;
  color: var(--card-button-text);
  text-align: center;
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.2px;
}
/* pop up test start*/
/* @font-face {
  font-family: "Roboto";
  src: url("/css/fonts/Roboto-Light-webfont.eot");
  src: url("/css/fonts/Roboto-Light-webfont.eot?#iefix") format("embedded-opentype"), url("/css/fonts/Roboto-Light-webfont.woff") format("woff"), url("/css/fonts/Roboto-Light-webfont.ttf") format("truetype"),
    url("/css/fonts/Roboto-Light-webfont.svg#RobotoLight") format("svg"), url("/css/fonts/Roboto-Medium.ttf") format("truetype");

  font-weight: 100;
  font-style: normal;
  font-family: "Refrigerator-Deluxe";
  src: url("/css/fonts/Mark-Simonson-Refrigerator-Deluxe-Heavy.ttf") format("truetype");
}
@font-face {
  font-family: "Refrigerator-Deluxe-Light";
  src: url("/css/fonts/Mark-Simonson-Refrigerator-Deluxe-Light.ttf") format("truetype");
} */
/* html {
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
} */

/* body {
  margin: 0;
  font-family: Mark Simonson;
  background: #070a17;
  color: #e6f1ff;
  overflow-x: hidden;
  overflow-y: scroll;
} */

body.desktop::-webkit-scrollbar-thumb {
  background: #969696;
  border: 3px solid #252525;
  border-radius: 6px;
}
body.desktop::-webkit-scrollbar {
  padding: 3px;
  width: 14px;
  height: 4px;
  margin: 3px;
}
body.desktop::-webkit-scrollbar-track {
  background: #252525;
  border-radius: 1px;
  margin: 1px;
}
::-webkit-scrollbar {
  width: 3px;
} /* Track */
::-webkit-scrollbar-track {
  background: #000000;
} /* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
} /* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
html {
  scrollbar-arrow-color: #252604;
  scrollbar-highlight-color: #bfc097;
  scrollbar-shadow-color: #ffffff;
  scrollbar-base-color: #000000;
  scrollbar-track-color: #e2e1d4;
  scrollbar-face-color: #bfc097;
  scrollbar-3dlight-color: #efeeee;
  scrollbar-darkshadow-color: #999999;
}

.topnav {
  height: 60px;
  display: flex;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.center {
  max-width: 1380px;
  margin: 0 auto;
  overflow: hidden;
}
.aconteiner {
  float: right;
  display: block;
  color: #ffffff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 20px;
  font-family: "Roboto";
}
.aconteinerimg {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 24px;
}
.aconteiner:hover {
  color: #00ebff;
}
.topnav .icon {
  display: none;
}
.fistconteiner {
  display: flex;
  width: 100%;
  min-height: 900px;
}
.flexdiv {
  width: 50%;
}
.social {
  width: 33.3%;
}
.divbeznomer {
  padding: 200px 0px 0px 0px;
}
/* .logo {
  width: 33.3%;
} */
.logoimg {
  width: 165px;
  margin: 11px auto;
  display: block;
}
.topmenue {
  width: 33.3%;
  opacity: 1;
}
p {
  color: #e6f1ffbd;
  margin: 4px;
  font-size: 20px;
  font-family: Roboto;
  line-height: 26px;
  letter-spacing: 0;
}
#GameID1 .flexdiv.divbeznomer h3 {
  letter-spacing: 0px;
  color: #e6f1ff;
  text-transform: uppercase;
  opacity: 1;
  font-size: 60px;
  font-weight: bold;
  margin: 4px;
  font-family: "Refrigerator-Deluxe", sans-serif;
}
.btndiv {
  display: flex;
  padding: 8px 80px 0px 0px;
}
.testbtn {
  width: 215px;
  height: 59px;
  background: #0069e3 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #0000005c;
  border-radius: 5px;
  opacity: 1;
  border: none; /* color: white; */
  color: #e6f1ff;
  font-size: 18px;
  cursor: pointer;
  font-weight: 700;
}
.infobtn {
  width: 166px;
  height: 59px;
  box-shadow: 0px 3px 6px #0000005c;
  border: 2px solid #00ebff;
  border-radius: 5px;
  background: inherit;
  letter-spacing: 0px;
  color: #00ebff;
  opacity: 1;
  font-size: 20px;
  margin: 0px 10px;
  cursor: pointer;
  font-weight: bold;
}
.secoundconteiner {
  width: 100%;
  min-height: 500px;
  background-image: url(/images/HoodedMan-3.png);
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative;
}
.finalslider > h4 {
  font-size: 46px;
}
.secoundconteinerinfo {
  text-align: center;
  margin: 0 auto;
  padding-top: 22%;
  max-width: 710px;
}
.threeconteiner {
  display: flex;
  min-height: 500px;
  padding: 100px 50px;
}
.threeone {
  background-image: url(/images/wheel.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.threeonz {
  padding: 10px 0px 0px 0px;
}
.threeconteinerinfo p {
  padding: 14px 2px;
}
.fourtittlediv h4 {
  font-size: 50px;
  margin: 0 0 0 0;
  line-height: 58px;
  color: #00ebff;
  font-family: "Refrigerator-Deluxe";
}
.manwithphone {
  position: absolute;
  max-width: 530px;
  margin: -129px -46px;
}
.secoundconteinerinfo > h4 {
  letter-spacing: 0px;
  color: #00ebff;
  text-transform: uppercase;
  opacity: 1;
  font-size: 50px;
  line-height: 58px;
  margin: 4px;
  font-weight: 900;
  font-family: "Refrigerator-Deluxe";
}
.secoundconteinerinfo > p {
  color: #e6f1ffbd;
  margin: 4px;
  font-size: 22px;
  font-family: Roboto;
  line-height: 30px;
  letter-spacing: 0;
}
.brandinfo {
  width: 110px;
  color: #15171d;
  font-weight: 900;
  background: white;
  padding: 4px;
  font-size: 22px;
  line-height: 26px;
  text-align: center;
  font-family: "Refrigerator-Deluxe";
}
.threeconteinerinfo {
  max-width: 503px;
}
.threeconteinerinfo > h4 {
  font-size: 50px;
  margin: 0;
  line-height: 58px;
  color: #00ebff;
  font-family: "Refrigerator-Deluxe";
}
.threeconteinerinfo > p {
  font-size: 16px;
  line-height: 26px;
  padding-top: 48px;
}
.fourconteiner {
  display: flex;
  min-height: 400px;
}
.fourconteiner p {
  padding: 0px 62px;
  font-size: 16px;
  line-height: 26px;
}
.fourone {
  margin-right: 3px;
  background: #1f222e;
}
.fouronz {
  background: #1f222e;
}
.fourtittle {
  display: flex;
  padding: 20px;
  align-items: center;
}
.fourtittle img {
  width: 140px;
  display: block;
  margin: 0 auto;
}
.fourtittledivimg {
  width: 35%;
}
.fourtittlediv {
  width: 65%;
  padding: 36px 0px;
}
.fiveconteiner {
  background: rgb(55, 72, 91);
  background: radial-gradient(circle, rgba(55, 72, 91, 1) 0%, rgba(7, 10, 23, 1) 53%);
  min-height: 700px;
  text-align: center;
  padding: 18px;
}
.fiveconteiner > h4 {
  font-size: 50px;
  line-height: 58px;
  color: #00ebff;
  font-family: "Refrigerator-Deluxe";
  margin: 83px 0 0 0;
}
.fiveinfo {
  padding: 13px;
  background: #e6f1ff;
  color: black;
  font-size: 24px;
  font-weight: bolder;
  line-height: 34px;
  display: block;
  margin: 32px auto 60px;
  max-width: 685px;
  font-family: "Roboto";
}
.fivenumberconteiner {
  max-width: 1130px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 auto;
}
.numbers {
  position: relative;
  width: 25%;
  height: 200px;
}
.minflex {
  display: flex;
  justify-content: center;
  position: relative;
}
.magaFixDiv.email img.magaImg {
  margin-left: 15px;
}
@media only screen and (min-width: 800px) {
  .flexdiv.divnomer > img {
    width: 859px;
    object-position: -22px;
  }
  .slideshow-container .mySlides > img {
    width: 463px;
    height: auto;
  }
  .numbers .minflex:not(.numbers.n1 > .minflex, .numbers.n8 > .minflex, .numbersw > .minflex):before {
    display: block;
    content: "";
    width: 72%;
    position: absolute;
    border-top: 3px dashed #00ebff;
    top: 26px;
    bottom: 0px;
    left: -36%;
    right: 0px;
  }
  .numbers.n5 .minflex::after,
  .numbers.n4 .minflex::after {
    display: block;
    content: "";
    width: 33%;
    position: absolute;
    border-top: 3px dashed #00ebff;
    top: 26px;
    bottom: 0px;
    left: auto;
    right: 4%;
  }
  .manwithphone {
    max-width: 611px;
    height: 817px;
  }
  .numbers.n8 .minflex::after {
    display: block;
    content: "";
    width: 33%;
    position: absolute;
    border-top: 3px dashed #00ebff;
    top: 26px;
    bottom: 0px;
    left: 0%;
  }
  .numbers.n4::after {
    display: block;
    content: "";
    height: 99%;
    position: absolute;
    border-right: 3px dashed #00ebff;
    top: 29px;
    bottom: 0px;
    left: -0%;
    right: 1.5%;
  }
  .numbers.n8::before {
    display: block;
    content: "";
    height: 40%;
    width: 293%;
    position: absolute;
    border-top: 3px dashed #00ebff;
    border-right: 3px dashed #00ebff;
    top: 229px;
    left: 0%;
  }
  .numbers.n8::after {
    display: block;
    content: "";
    height: 99%;
    position: absolute;
    border-left: 3px dashed #00ebff;
    top: 30px;
    bottom: 0px;
    left: -2%;
  }
  .fourconteiner {
    scroll-margin-top: 50px;
  }

  /* .footerlogo {
    max-width: 300px;
    float: left;
    margin-top: 1px;
    margin-left: -15px;
  } */
}
.bords {
  width: 30%;
  font-size: 70px;
  margin: 0;
  line-height: 58px;
  font-family: "Roboto";
  font-weight: bold;
  color: #00ebff;
}
.mindiv {
  display: none;
  width: 70%;
  border-top: 4px dotted #00ebff;
  margin-top: 44px;
}
.numbers p {
  padding: 6px 20px 20px 25px;
  text-align: left;
  font-size: 16px;
  line-height: 22px;
}
.borderight {
  /* border-right: 4px dotted #00ebff; */
}
.borderleft {
  /* border-left: 4px dotted #00ebff; */
}
.mindivxr {
  border-top: 4px dotted #00ebff;
  width: 80%;
  margin-top: 20px;
  display: none;
}
.numbersw {
  height: 100px;
}
.divmix {
  width: 100%;
  border-right: 4px dotted #00ebff;
  height: 50px;
  margin-top: 10px;
  display: none;
}
.thelastone {
  background: transparent linear-gradient(180deg, #005dc7 0%, #256ffc 100%) 0% 0% no-repeat padding-box;
  scroll-margin-top: 50px;
}
.names > h4 {
  margin: -30px auto;
  background: #e6f1ff;
  max-width: 600px;
  color: #15171d;
  font-size: 26px;
  text-align: center;
  font-family: "Roboto";
  font-weight: bold;
  position: absolute;
  padding: 11px 39px;
  left: 50.5%;
  box-shadow: 2px 5px 30px #00000043;
}
.finalmix {
  display: flex;
  padding: 60px 0 0 0;
}
.finalmini {
  width: 40%;
}
.finalslider {
  width: 60%;
  position: relative;
}
.finalslider > h4 {
  font-size: 50px;
  line-height: 58px;
  color: #00ebff;
  font-family: "Refrigerator-Deluxe";
  margin: 0;
}
.finalslider > p {
  font-size: 16px;
  line-height: 22px;
  text-align: left;
  max-width: 500px;
  margin: 12px auto 0;
}
.finalslider > div > a[target="_blank"] img {
  max-width: 310px;
  height: auto;
  margin: 48px 0 52px;
}
.magaFixDiv > h2 {
  font-size: 20px;
  line-height: 23px;
  color: #e6f1ff;
  font-family: "Roboto";
  font-weight: bold;
  margin: 27px 0 7px 0;
  text-align: left;
}
.magaFixDiv p span,
.magaFixDiv > p {
  font-size: 14px;
  line-height: 15px;
  color: #e6f1ff66;
  text-align: left;
  margin: 5px 0 0 0;
}
.magaFixDiv > a {
  text-align: left;
  margin-bottom: 26px;
}
.call img.magaImg {
  margin: 0;
}
.magaFixDiv.call > p > span {
  margin-top: 10px;
}
/* * {
  box-sizing: border-box;
} */
.mySlides {
  display: none;
  max-width: 464px;
  margin: 0 auto;
  padding: 25px 0 60px;
}

img {
  /* vertical-align: middle; */
} /* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
} /* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 10px 16px;
  margin-top: -44px;
  color: #256ffc;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background: #00ebff;
  border-radius: 50%;
} /* Position the "next button" to the right */
a.prev {
  left: 80px;
}
.next {
  right: 80px;
} /* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  color: white;
} /* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
} /* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
} /* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active,
.dot:hover {
  /* background-color: #070a17; */
} /* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}
@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
.finmFix {
  background: #070a17;
  text-align: center;
}
.magaFix {
  display: flex;
  padding: 8px 28px;
  gap: 14px;
}
.magaFixDiv {
  background-color: #1c2536;
  /* max-width: 348px; */
  display: grid;
  border-radius: 13px;
  /* grid-template-columns: 1fr 2fr; */
  /* grid-template-rows: auto auto auto; */
  column-gap: 14px;
}
.magaImg {
  width: 120px;
  grid-row: span 4;
  align-self: center;
}
.contactbtn {
  background: #0069e3;
  color: #e6f1ff;
  border: none;
  border-radius: 5px;
  padding: 16px 14px;
  margin-top: 16px;
  font-size: 16px;
  cursor: pointer;
  min-width: 144px;
  box-shadow: 0px 3px 6px #0000005c;
  font-family: "Roboto";
}
.magaFixDiv p span {
  display: block;
}
/* .footer p {
  color: #737373;
  font-size: 13px;
  grid-column: 1 / 3;
  grid-row: 1 / 2;
} */
/* .footer {
  height: 140px;
  margin-top: 60px;
} */
.footerlogo {
  max-width: 300px;
  /* display: flex;
  margin: 10px auto;
  justify-content: center; */
  float: left;
  margin-top: 1px;
  margin-left: -15px;
}
.footerlogo img {
  width: 150px;
  margin: 4px 18px;
}
.dotscroll {
  position: fixed;
  width: 40px;
  right: 1px;
  top: 40%;
  z-index: 99999;
}
.dotscrol {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #080b18;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  border: 1px solid;
}
/* .active {
  background-color: white;
} */
.finalslider .dot {
  height: 8px;
  width: 8px;
  background-color: #15171d4d;
}
.finalslider .dot.active {
  background-color: #15171d;
  width: 22px;
  height: 8px;
  border-radius: 6px;
}
.finalslider .dot:hover {
  background-color: #070a17;
}
@media screen and (max-width: 800px) {
  .flexdiv.divbeznomer > p {
    font-size: 16px;
    color: #e6f1ffcc;
    text-align: center;
    margin: 0;
  }
  #GameID1 .flexdiv.divbeznomer > h3 {
    font-size: 48px;
    color: #e6f1ff;
    line-height: 30px;
    margin-top: 15px;
    text-align: center;
  }
  .fiveinfo {
    background: none;
  }
  .fiveinfo div {
    background-color: #e6f1ff;
    color: #15171d;
    display: inline;
    padding: 0.45rem;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  element.style {
  }
  .secoundconteinerinfo > h4 {
    font-size: 38px;
    line-height: 58px;
  }
  .secoundconteinerinfo > p {
    font-size: 16px;
    line-height: 26px;
    max-width: 310px;
    margin: 0 auto;
  }
  .social {
    width: 27.3%;
  }
  .fistconteiner {
    display: block;
    min-height: 570px;
  }
  .flexdiv {
    width: 100%;
  }
  .fourconteiner .flexdiv.fourone {
    margin-bottom: 4px;
  }
  .fourconteiner .flexdiv.fourone > p {
    padding-bottom: 20px;
  }
  .fourconteiner .flexdiv.fouronz > p {
    padding-bottom: 20px;
  }
  .fiveconteiner > h4 {
    font-size: 46px;
    margin-top: 72px;
  }
  .finalmix {
    display: block;
    padding: 36px 10px 10px;
  }
  .finalmini {
    width: 100%;
  }
  .finalslider {
    width: 100%;
  }
  .slideshow-container {
    position: relative;
  }
  .slideshow-container::before {
    display: block;
    content: "";
    position: absolute;
    width: 100%;
    height: 61px;
    top: -60px;
    background: -moz-linear-gradient(top, rgba(37, 111, 252, 0) 0%, rgba(37, 111, 252, 0.07) 7%, rgba(0, 93, 199, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(37, 111, 252, 0) 0%, rgba(37, 111, 252, 0.07) 7%, rgb(12 98 216) 100%);
    background: linear-gradient(to bottom, rgba(37, 111, 252, 0) 0%, rgba(37, 111, 252, 0.07) 7%, rgb(12 99 216) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00256ffc', endColorstr='#005dc7',GradientType=0 );
  }
  .magaFix {
    display: grid;
    place-content: center;
  }
  .manwithphone {
    position: inherit;
    max-width: 60%;
    margin: 0 auto;
    display: block;
  }
  .names {
    margin: 27px auto;
    background: none;
    max-width: 348px;
    color: black;
    font-size: 25px;
    text-align: center;
    font-weight: 700;
    position: inherit;
    padding: 8px;
    left: 0%;
    box-shadow: none;
    position: relative;
    top: -24px;
  }
  .names > h4 {
    position: static;
    background-color: #e6f1ff;
    color: #15171d;
    display: inline;
    padding: 0.45rem;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    font-size: 24px;
    line-height: 34px;
    width: 80%;
    box-shadow: 2px 5px 30px #00000043;
  }
  .divbeznomer {
    padding: 0px 10px;
    text-align: center;
  }
  .infobtn {
    width: 50%;
    margin-top: 36px;
  }
  .topnav .aconteiner {
    display: none;
  }
  .btndiv {
    padding: 0px;
    justify-content: center;
  }
  h3 {
    margin: 20px 2px;
    font-size: 38px;
  }

  .testbtn {
    width: 50%;
    font-size: 16px;
    margin-top: 36px;
  }
  .topnav .icon {
    display: block;
    color: #f2f2f2;
    text-align: right;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 24px;
    position: absolute;
    right: 0;
    top: 0;
  }
  .topmenue {
    display: block;
  }
  .secoundconteiner {
    background-position: center;
    min-height: 400px;
    background-size: 200%;
  }
  .secoundconteinerinfo {
    padding-top: 76%;
  }
  .threeone {
    min-height: 280px;
    min-height: 467px;
    background-size: 140%;
  }
  .threeonz {
    padding: 4px 0px 0px 0px;
  }
  .brandinfo {
    display: block;
    margin: 0 auto;
  }
  h4 {
    text-align: center;
    font-size: 34px;
  }
  .fourconteiner {
    display: block;
  }
  .fourconteiner p {
    padding: 0;
    max-width: 302px;
    margin: 0 auto;
  }
  .listItem {
    width: 50px;
    /* margin-top: 50px; */
  }
  .aconteinerimg {
    padding-left: 1;
  }
  .minflex {
    display: block;
  }
  .numbers {
    width: 100%;
    height: 110px;
    display: flex;
    align-items: center;
  }
  .numbers:nth-child(-n + 7)::before {
    display: block;
    content: "";
    height: 25%;
    position: absolute;
    border-left: 3px dashed #00ebff;
    top: 96px;
    bottom: 0px;
    left: 22px;
  }
  .numbers.n8::before {
    display: block;
    content: "";
    height: 58%;
    width: calc(94% / 2);
    position: absolute;
    border-left: 3px dashed #00ebff;
    border-bottom: 3px dashed #00ebff;
    top: 73px;
    bottom: 0px;
    left: 22px;
  }
  .numbers.n8::after {
    display: block;
    content: "";
    height: 64%;
    position: absolute;
    border-left: 3px dashed #00ebff;
    top: 139px;
    bottom: 0px;
    left: 54%;
  }
  .fiveconteiner {
    margin-bottom: 82px;
  }
  .threeconteiner {
    display: block;
    padding: 0;
  }
  .footerlogo img {
    width: 120px;
    margin: 4px 14px;
  }
  .magaFixDiv {
    /* width: 100%; */
    padding-right: 20px;
  }
  .threeconteinerinfo {
    margin: 0 auto;
  }
  .threeconteinerinfo p {
    padding-bottom: 76px;
    max-width: 307px;
    margin: 0 auto;
  }
  .numbers p {
    padding: 0;
    margin: 0 0 0 16px;
  }
  .numbersw {
    display: none;
  }
  .finalslider > p {
    max-width: 314px;
    margin: 15px auto 0;
  }
  .finalslider > div > a[target="_blank"] img {
    margin: 35px 0 43px;
  }
  .mindiv {
    height: 20%;
    border-left: 4px dotted #00ebff;
    margin-left: 20px;
    margin-top: 0px;
    border-top: 0px dotted #00ebff;
  }
  .borderight,
  .borderleft {
    border-left: 0px dotted #00ebff;
    border-right: 0px dotted #00ebff;
  }
  .topnav .responsive {
    position: absolute;
    width: 33%; /* float: right; */
    right: 1px;
    z-index: 9999999;
    background: #242731;
  }
  .topnav .responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav .responsive .aconteiner {
    float: none;
    display: block;
    text-align: left;
    margin-top: 33px;
  }
  .prev,
  .next {
    top: -30px;
  }
  .next {
    right: 33px;
  }
  a.prev {
    left: 50px;
  }
  .mySlides {
    max-width: 310px;
  }
  .slideshow-container .mySlides > img {
    width: 100%;
  }
  /* .footer {
    height: auto;
    max-width: 348px;
    margin: 60px auto;
  } */
}
.uppercase {
  align-self: center;
  justify-self: end;
  padding-right: 15px;
  font-family: "Roboto";
}
.uppercase > b {
  font-weight: normal;
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev,
  .next,
  .text {
    font-size: 11px;
  }
} /* The Modal (background) */

@-webkit-keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}
@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
} /* The Close Button */
.close {
  color: #e6f1ff80;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
}
.modal-header {
  padding: 2px 16px;
  background-color: #13141c;
  color: white;
  text-align: center;
}
.modal-body {
  padding: 2px 16px;
  background: #1f222e;
}
.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}
.magaFixDiv.call > p {
  font-size: 20px;
  line-height: 23px;
  color: #e6f1ff;
  margin: 27px 0 0px 0;
}

.slider-dot {
  position: absolute;
  bottom: 50px;
  right: 0;
  left: 10px;
  margin: auto;
}
/* .footer {
  margin-top: 60px;
  margin-bottom: 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
} */
#poll-pop-up {
  /* display: none; */
  position: fixed;
  width: 100%;
  height: 90vh;
  max-width: 950px;
  background: #171a27;
  left: 50%;
  top: 3%;
  transform: translateX(-50%);
  z-index: 999999;
  border-radius: 10px;
  background-image: url(/images/Survey_3.png);
  background-size: cover;
  background-repeat: no-repeat;
}
#poll-pop-up .poll-heder {
  display: grid;
  place-items: center;
}
#poll-pop-up .poll-heder > div {
  font-size: 22px;
  line-height: 26px;
  font-family: "Refrigerator-Deluxe";
  display: inline-block;
  color: #15171d;
  background: #ffffff 0% 0% no-repeat padding-box;
  padding: 0 9px;
  margin-top: 50px;
}
#poll-pop-up .poll-heder > h4 {
  font-size: 30px;
  line-height: 58px;
  font-family: "Refrigerator-Deluxe";
  color: #00ebff;
  margin: 0;
}
#poll-pop-up .poll-heder > p {
  font-size: 16px;
  line-height: 24px;
  font-family: "Roboto";
  font-weight: bold;
  color: #e6f1ffbd;
  text-align: center;
  max-width: 820px;
}
#poll-pop-up .poll-body {
  padding: 0 50px;
}
#poll-pop-up .poll-body form {
  margin-top: 84px;
  display: flex;
  flex-direction: column;
  row-gap: 31px;
}
#poll-pop-up .poll-body .questionContainer {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 74px;
}
#poll-pop-up .poll-body .questionContainer p.question {
  font-size: 26px;
  line-height: 32px;
  font-family: "Refrigerator-Deluxe-Light";
  color: #e5f1ff;
  margin: 0;
}
#poll-pop-up .poll-body .questionContainer h4.question-number {
  grid-row: 1 / 3;
  font-size: 70px;
  line-height: 58px;
  font-family: "Roboto";
  font-weight: bold;
  color: #00ebff;
  margin: 0;
  position: relative;
}
#poll-pop-up .poll-body .questionContainer h4.question-number:not(.questionContainer:nth-child(9) > h4.question-number):after {
  display: block;
  content: "";
  height: 90px;
  /* width: 5px; */
  position: absolute;
  border-left: 2px dashed #00ebff;
  top: 100px;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}

#poll-pop-up .poll-body .questionContainer h4.question-number {
  grid-row: 1 / 3;
  font-size: 70px;
  line-height: 58px;
  font-family: "Roboto";
  font-weight: bold;
  color: #00ebff;
  margin: 0;
}
#poll-pop-up .poll-body .questionContainer ul {
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  /* row-gap: 19px; */
  margin-top: 23px;
}
#poll-pop-up .poll-body .questionContainer ul > li:not(:last-child) {
  margin-bottom: 19px;
}
#poll-pop-up .poll-body .questionContainer ul > li {
  list-style: none;
  display: flex;
  align-items: center;
}
#poll-pop-up .poll-body .questionContainer ul > li > input {
  margin: 0;
  cursor: pointer;
}

#poll-pop-up .poll-body .questionContainer ul > li > label {
  font-size: 14px;
  line-height: 18px;
  font-family: "Roboto";
  color: #e6f1ff99;
  margin-left: 39px;
  cursor: pointer;
}
.calcResult {
  width: 193px;
  height: 50px;
  background: #0074fa 0% 0% no-repeat padding-box;
  border-radius: 10px;
  font-size: 16px;
  line-height: 20px;
  color: #e6f1ff;
  align-self: center;
  margin: 108px 0 108px;
  border: none;
  cursor: pointer;
}

#poll-pop-up span.close {
  position: absolute;
  top: 10px;
  right: 15px;
  z-index: 9;
}
#poll-pop-up .poll-container {
  position: relative;
  height: 90vh;
  overflow: auto;
}
.resultContainer span.close {
  justify-self: end;
  margin: 10px 15px 0 0;
}
.resultContainer {
  position: fixed;
  max-width: 400px;
  height: 600px;
  overflow: auto;
  background-color: #20232f;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 10px;
  padding: 0 0 30px 0;
  z-index: 99999;
}
.resultContainer h4.title {
  display: inline-block;
  margin: 0;
  font-size: 22px;
  line-height: 26px;
  font-family: "Refrigerator-Deluxe";
  color: #15171d;
  padding: 0 9px;
  background-color: #ffffff;
}
.resultContainer > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.resultContainer > div span.points {
  font-size: 179px;
  line-height: 208px;
  font-family: "Refrigerator-Deluxe";
  color: #00ebff;
}
.resultContainer > div > span {
  font-size: 30px;
  line-height: 58px;
  font-family: "Refrigerator-Deluxe";
  color: #e6f1ff;
}
.resultContainer p.testDescriptionResult {
  font-size: 16px;
  line-height: 26px;
  font-family: "Roboto";
  color: #e5f1ffb3;
  margin: 0;
  text-align: left;
  padding: 0 30px 20px;
}
.poll-footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  background-color: #20222ee6;
  padding: 0 30px 20px;
}
.imgFooter {
  width: 108px;
  height: auto;
  align-self: center;
}
.imgFooter > img {
  width: 100%;
  height: auto;
}
.instructions h4 {
  font-size: 20px;
  line-height: 58px;
  font-family: "Refrigerator-Deluxe";
  color: #00ebff;
  margin: 0;
}
.instructions > p {
  font-size: 16px;
  line-height: 22px;
  color: #e6f1ffb3;
  margin: 0;
}
.reporting-the-result {
  margin: 0px 0 60px 0;
  color: #e5f1ff;
}
.reporting-the-result > span {
  font-size: 20px;
  line-height: 26px;
  font-family: "Roboto";
}
.reporting-the-result > ul {
  margin: 0;
  display: flex;
  padding: 0;
  justify-content: space-between;
  margin-top: 20px;
}
.reporting-the-result > ul > li {
  list-style: none;
  margin: 0;
  font-size: 14px;
  line-height: 26px;
  color: #e6f1ffb3;
  font-family: "Roboto";
}
input:where([type="checkbox"], [type="radio"]) {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  position: relative;
}
input[type="radio"]:checked::after {
  display: block;
  content: "";
  position: absolute;
  transform: rotate(45deg);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  width: 4px;
  border-bottom: 2px solid #000000;
  border-right: 2px solid #000000;
  margin: auto;
}
input[type="radio"]:checked {
  background: #ffffff 0% 0% no-repeat padding-box;
  border: none;
}
.resultContainer .finalslider > h4 {
  font-size: 46px;
  line-height: 58px;
}
.resultContainer > div.finalslider {
  width: 100%;
}
.resultContainer > div.finalslider .magaFix {
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 5px;
  width: 100%;
}
.resultContainer > div.finalslider .magaFix .magaFixDiv {
  background-color: #e6f1ff12;
  /* max-width: 348px; */
  display: flex;
  border-radius: 13px;
  align-items: center;
  /* justify-content: space-evenly; */
  padding: 24px 12px 24px 12px;
  color: #e6f1ff;
}
@media screen and (max-width: 380px) {
  .resultContainer > div.finalslider .magaFix .magaFixDiv {
    flex-direction: column;
    max-width: 100%;
    width: 100%;
    gap: 20px;
  }
}
.resultContainer > div.finalslider .magaFix .magaFixDiv.email .mail > h2 {
  font-size: 20px;
  line-height: 23px;
  font-family: "Roboto";
  font-weight: 500;
  margin: 0;
}
.resultContainer > div.finalslider .magaFix .magaFixDiv.email .mail > p {
  font-size: 14px;
  line-height: 15px;
  font-family: "Roboto";
  font-weight: 500;
  color: #e6f1ff66;
}
.resultContainer > div.finalslider .magaFix .magaFixDiv span,
.resultContainer > div.finalslider .magaFix .magaFixDiv p {
  margin: 5px 0 0 0;
}
.resultContainer > div.finalslider .magaFix .magaFixDiv.call > p {
  margin: 0;
}
.resultContainer > div.finalslider .magaFix .magaFixDiv > a {
  margin: 0;
}
.resultContainer > div.finalslider .magaFix .magaFixDiv > a button.contactbtn {
  min-width: 138px;
  height: 52px;
  margin: 0;
  padding: 0;
}
.resultContainer .finalslider a[target="_blank"] img {
  max-width: 310px;
  height: auto;
  margin: 19px 0 15px;
}
@media screen and (max-width: 800px) {
  #poll-pop-up {
    /* height: 84vh; */
    /* max-width: 348px; */
    top: 3%;
    background-size: cover;
    background-position-x: -420px;
  }
  #poll-pop-up .poll-heder > h4 {
    font-size: 28px;
    line-height: 35px;
    padding: 0 30px;
    margin: 20px 0 21px 0;
  }
  #poll-pop-up .poll-heder > p {
    font-size: 14px;
    line-height: 20px;
    font-weight: normal;
    margin: 0;
  }
  #poll-pop-up .poll-body form {
    row-gap: 47px;
  }
  #poll-pop-up .poll-body .questionContainer ul > li > label {
    margin-left: 31px;
  }
  #poll-pop-up .poll-body .questionContainer {
    column-gap: 12px;
  }

  #poll-pop-up .poll-body .questionContainer p.question {
    font-size: 20px;
    line-height: 22px;
    margin: 0;
  }
  #poll-pop-up .poll-body .questionContainer h4.question-number:not(.questionContainer:last-child > h4.question-number):after {
    top: 46%;
    height: 120px;
  }
  .resultContainer {
    width: 94%;
  }
  .reporting-the-result > ul {
    flex-direction: column;
  }
  .imgFooter {
    width: 35px;
    align-self: start;
  }
  .instructions > p {
    font-size: 12px;
    line-height: 18px;
  }
  .instructions h4 {
    line-height: 34px;
  }
  .poll-footer {
    padding: 30px 13px 20px;
  }
  input.calcResult {
    margin: 63px 0 63px;
  }
  #poll-pop-up .poll-container {
    position: relative;
    /* height: 84vh; */
    overflow: auto;
  }
}
@media screen and (min-width: 800px) and (max-width: 1180px) {
  .flexdiv.divnomer > img {
    width: 100%;
  }
  .manwithphone {
    height: 450px;
  }
  .names > h4 {
    right: 120px;
    left: auto;
    max-width: 380px;
  }
  .finalslider {
    /* right: 50px; */
  }
  div#GameID7 > .finalmini {
    width: 0;
  }
  div#GameID7 .finalslider {
    width: 100%;
    position: relative;
    right: 0;
    display: grid;
    place-content: center;
  }
  .numbers.n8::before {
    width: 253%;
    top: 258px;
  }
  .numbers.n8::after {
    height: 230px;
  }
  /* .footer {
    margin: 60px 30px;
  } */
  .next {
    right: 0;
  }
  a.prev {
    left: 0;
  }
  .numbers {
    height: auto;
  }
  div#GameID6 {
    margin-top: 100px;
  }
}
/* pop up test end*/

.btn {
  border: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
  line-height: 22px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-family: "Roboto";
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.22px;
  border-radius: 6px;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
}

.btn-secondary {
  background-color: #006afa;
  color: var(--primary-text) !important;
}

.btn-lg {
  padding: 12px 22px;
  font-size: 16px;
}

.close-button {
  position: relative;
  top: 40px;
  left: 50%;
  transform: translate(-50%);
}

button {
  background: #0074fa;
  color: white;
}