/*SETTINGS*/
:root {
   --white: #F1F5F8;
   --blueLight: #31C3F2;
   --blue: #0064E0;
   --darkLight: #18191D;
   --dark: #141416;
}

html {
   height: 100%;
   font-size: 16px;
}

body {
   font-size: 20px;
   font-family: "Manrope", sans-serif;
   line-height: 1.35;
   height: 100%;
   width: 100%;
   margin: 0;
   min-width: 344px;
   color: var(--white);
   background: var(--dark);
}

a {
   color: var(--white);
   cursor: pointer;
   transition: 0.5s;
   text-decoration: none;
}

a:focus {
   outline: none;
   outline-offset: 0px;
}

img {
   display: block;
   max-width: 100%;
}

input,
textarea,
select,
button {
   font: inherit;
}

:where(ul, ol):where([class]) {
   padding-left: 0;
   margin-block: 0;
}

:where(ul[class]) {
   list-style: none;
}

:where(address[class]) {
   font-style: normal;
}

p {
   --paragraphMarginBottom: 1.35em;
   margin-block: 0;
}

p:where(:not([class]):not(:last-child)) {
   margin-bottom: var(--paragraphMarginBottom);
}

@media (prefers-reduced-motion: reduce) {

   *,
   ::before,
   ::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
   }
}

button {
   background: none;
   border: none;
   padding: 0;
   cursor: pointer;
}

/*[class*="__container"]*/
.container,
.container-inner {
   width: 100%;
   margin: 0 auto;
   padding: 0 24px;
   position: relative;
}

.container {
   max-width: 1488px;
}

.container::after,
.container::before {
   display: none;
}

/*
#body {
   display: flex;
   flex-direction: column;
   min-height: 100%;
}

#content {
   flex: 1 0 auto;
}

#footer {
   flex: 0 0 auto;
}*/

input::-moz-placeholder {
   color: #FFFFFF99;
}

input::-webkit-input-placeholder {
   color: #FFFFFF99;
}

textarea:-moz-placeholder {
   color: #FFFFFF99;
}

textarea::-webkit-input-placeholder {
   color: #FFFFFF99;
}

/*focus*/
:focus {
   outline: none;
   -moz-outline: 3px solid #fff !important;
}

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"]>input[type="button"]::-moz-focus-inner {
   border: none;
}

input[type="radio"]:focus {
   -moz-outline-radius: 12px !important;
   -moz-outline-offset: 0px !important;
}

input[type="checkbox"]:focus {
   -moz-outline-offset: -1px !important;
   -moz-outline: 1px solid #000 !important;
}

*,
*:before,
*:after {
   box-sizing: border-box;
}

.bg,
.bg_menu {
   position: fixed;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   background: #F1F5F80D;
   backdrop-filter: blur(4px);
   z-index: 101;
   opacity: 0;
   pointer-events: none;
   transition: all 0.5s ease-in-out;
}

.bg.__open, .bg_menu.__open {
    opacity: 1;
    pointer-events: auto;
}

.d-none {
   display: none;
}

section,
.ob-fit {
   position: relative;
}

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

.ob-fit--cover{
   object-fit: cover;
}

.button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 20px;
   color: var(--white);
   font-weight: 700;
   border: 1px solid transparent;
   border-radius: 30px;
   transition: 0.5s;
   cursor: pointer;
   font-size: 18px;

}

.button--1 {
   font-size: 14px;
   padding: 14px 30px;
   border-color: var(--white);
}

.button--2 {
   height: 60px;
   font-size: 18px;
   padding-left: 24px;
   padding-right: 10px;
}

.button--padding {
   padding-inline: 30px;
}

.button span {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 40px;
   width: 40px;
   border-radius: 50%;
}

.button:hover,
.button:focus {
   color: var(--white);
}

.button--radio{
   padding: 12px 20px;
   font-size: 14px;
   color: #FFFFFF80;
   background: #FFFFFF0D;
   border: 1px solid #FFFFFF14
}

input:checked ~ .button--radio,
.button--radio:hover,
.button--radio:focus{
   color: #31C3F2;
   background: #31C3F21A;
   border: 1px solid #31C3F214
}

.button--blue,
.button--blue:hover,
.button--blue:focus {
   background: var(--blueLight);
   color: var(--darkLight);
   border-color: var(--blueLight);
}

.button--blue span {
   background: var(--darkLight);
   color: var(--blueLight);
}

.button--dark,
.button--dark:hover,
.button--dark:focus {
   border-color: #FFFFFF1A;
   background: #FFFFFF0D;

}

/**/
.blue {
   color: var(--blueLight);
}

.title-h1 {
   font-weight: 700;
   font-size: 64px;
}

.title-h2 {
   font-weight: 700;
   font-size: 48px;
}

.title-h3 {
   font-weight: 700;
   font-size: 32px;
}

.title-h4 {
   font-weight: 700;
   font-size: 24px;
}

.title-h5 {
   font-weight: 700;
   font-size: 18px;
}

.subtitle {
   font-weight: 600;
   font-size: 20px;
}

.body-large {
   font-size: 20px;
}

.body-medium {
   font-weight: 600;
   font-size: 16px;
}

.body-small {
   font-size: 14px;
}

.icon-broadcast1,
.purple-tag {
   color: #827FFF;
   background: #827FFF1A;
}

.icon-broadcast5,
.green-tag {
   color: #58BD7D;
   background: #58BD7D1A;
}

.icon-broadcast2,
.yellow-tag  {
   color: #E2AE00;
   background: #E2AE001A;
}

.icon-broadcastBig,
.red-tag {
   color: #D33535;
   background: #D335351A;
}

.orange-tag {
   color: #FF8800;
   background: #FF88001A;
}

.blue-tag{
   color: #31C3F2;
   background: #31C3F21A;
}

.illustration {
   z-index: -1;
   position: absolute;
}

.mb-20 {
   margin-bottom: 20px;
}

.mb-40 {
   margin-bottom: 40px;
}

.mb-60{
   margin-bottom: 60px;
}

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

.description--width {
   max-width: 630px;
}

.description ul {
   padding-left: 24px;
}