:root {
  --black: #1b1b1b;
  --white: #fffaf2;
  --blue: #4e73a5;
  --dark-blue: #16335f;

  --yellow: #ffdd1e;
  --orange: #ffd575;
  --light-green: #f0ffae;

  --tour-blue: #85d0fd;
  --tour-lilac: #5b4c77;

  --doc-and-review: #fffec1;
  --emoji: #ffccb1;
  --pink: #fba7b6;
  --cornflower-blue: #9baafd;
  --kind: #fcb068;
  --gender-blue: #66b0ed;
  --red: #fb6b41;
  --green: #21c24d;
  --achive: #FB78F1;

  --out-orange: #fa6b41;
  --slate-blue: #7e6ffb;

  --border-radius-extra-small: 1px;
  --border-radius-small: 5px;
  --border-radius-extra-medium: 15px;
  --border-radius-medium: 25px;
  --border-radius-xl: 35px;
  --border-radius-large: 45px;

  --padding-xs: 5px;
  --padding-sm: 10px;

  --padding-base: 15px;
  --padding-lg: 20px;
  --padding-xl: 25px;

  --padding-button: var(--padding-xl) var(--padding-lg);
  --padding-title: var(--padding-lg);

  --padding-small: 15px;
  --padding-extra-small: 10px;

  --one-section-margin: 10px;
  --section-margin: 28px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Diodrum Semibold", Arial, sans-serif;
}

.margin-section {
  margin-top: var(--section-margin) !important;
}

body {
  background: var(--dark-blue);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

main {
  background: var(--dark-blue);
  padding: 0 10px 10px 10px;
}

body,
html {
  height: 100%;
}

.banner-logo {
  display: flex;
  flex-direction: column;
}

.banner-logo img {
  width: 100%;
}

.banner-logo span {
  font-family: "Diodrum Extralight", Arial, sans-serif;
  margin-top: var(--one-section-margin);
  font-size: clamp(15.5px, 4.6vw, 30px);
  color: var(--white);
  font-weight: 250;

  display: block;
  width: 100%;
  text-align: justify;
  line-height: 0.3;
}

.banner-logo span::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 0;
  line-height: 0;
}

.color-white {
  background-color: var(--white) !important;
}

.color-black {
  background-color: var(--black) !important;
}

.color-cornflower-blue {
  background-color: var(--cornflower-blue) !important;
}

.color-yellow {
  background-color: var(--yellow) !important;
}

.color-orange {
  background-color: var(--orange) !important;
}

.color-blue {
  background-color: var(--blue) !important;
}

.color-dark-blue {
  background-color: var(--dark-blue) !important;
}

.color-red {
  background-color: var(--red) !important;
}

.color-green {
  background-color: var(--green) !important;
}

.color-pink {
  background-color: var(--pink) !important;
}

.color-gender-blue {
  background-color: var(--gender-blue) !important;
}

.color-doc-and-review {
  background-color: var(--doc-and-review) !important;
}

.color-emoji {
  background-color: var(--emoji) !important;
}

.color-kind {
  background-color: var(--kind) !important;
}

.color-achive {
  background-color: var(--achive) !important;
}

.color-slate-blue {
  background-color: var(--slate-blue) !important;
}

.color-out-orange {
  background-color: var(--out-orange) !important;
}

.text-yellow {
  color: var(--yellow) !important;
}

.text-orange {
  color: var(--orange) !important;
}

.font-xs {
  font-size: 7px !important;
}

.font-sm {
  font-size: 10px !important;
}

.overflow-hidden {
  overflow: hidden;
}

.arrow-left,
.arrow-right,
.arrow-top,
.arrow-bottom {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-size: 25%;
  mask-size: 25%;
}

.arrow-left {
  --mask-url: url("../../assets/arrow-left.svg");
}

.arrow-right {
  --mask-url: url("../../assets/arrow-right.svg");
}

.arrow-top {
  --mask-url: url("../../assets/arrow-top.svg");
}

.arrow-bottom {
  --mask-url: url("../../assets/arrow-bottom.svg");
}

input,
textarea,
select {
  transform: scale(1);
}