@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;0,700;0,900;1,900&display=swap");
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

img {
  vertical-align: top;
}

/* #region ANIMATIONS =================================================================================================================*/
/* ANIMATIONS general =================================================================================================================*/
@-webkit-keyframes move_glare {
  0%, 0.0001%, 62.6% {
    -webkit-transform: translate(-100%, -50%);
            transform: translate(-100%, -50%);
  }
  72.2%, 100% {
    -webkit-transform: translate(100%, -50%);
            transform: translate(100%, -50%);
  }
}
@keyframes move_glare {
  0%, 0.0001%, 62.6% {
    -webkit-transform: translate(-100%, -50%);
            transform: translate(-100%, -50%);
  }
  72.2%, 100% {
    -webkit-transform: translate(100%, -50%);
            transform: translate(100%, -50%);
  }
}
/* #endregion ANIMATIONS ==============================================================================================================*/
/* STYLES general =====================================================================================================================*/
.banner {
  position: relative;
  min-width: 280px;
  width: 100%;
  height: 90px;
  margin: 0 auto;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  color: #ffffff;
  text-transform: uppercase;
  background: -webkit-gradient(linear, left top, left bottom, from(#001056), to(#142dac));
  background: linear-gradient(to bottom, #001056 0%, #142dac 100%);
  border: 1px solid #15a0ff;
  overflow: hidden;
}

.logo-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  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;
  width: 21.5%;
  height: 100%;
}

.logo {
  position: relative;
  width: 216px;
  height: 48px;
  background: url(../images/logo.svg) no-repeat center;
  background-size: contain;
  z-index: 10;
}

.btn-wrapper {
  position: absolute;
  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;
  right: 0;
  bottom: 0;
  width: 25%;
  height: 100%;
  z-index: 10;
}

.btn-frame {
  position: relative;
  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;
  width: 274px;
  height: 66px;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 900;
  font-style: italic;
  color: #2c343b;
  text-align: center;
  border-radius: 250px;
  background-color: transparent;
  border: 2px solid #9de606;
  z-index: 10;
}

.btn {
  position: relative;
  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;
  width: 260px;
  height: 52px;
  background-color: #9de606;
  border-radius: 250px;
  -webkit-box-shadow: 0 0 20px #9de604, inset 0 2px #c1fa8b;
          box-shadow: 0 0 20px #9de604, inset 0 2px #c1fa8b;
  overflow: hidden;
}
.btn::before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  width: 100%;
  height: 300%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  background: url(../images/glare-btn.png) no-repeat center;
  background-size: contain;
  -webkit-animation: move_glare 6.4s infinite;
          animation: move_glare 6.4s infinite;
}

.br-btn-1 {
  display: none;
}

.br-btn-2 {
  display: none;
}

.btn-txt {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.back-logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 35vw;
  height: 100%;
  background: linear-gradient(130deg, rgb(0, 2, 51) 0%, rgb(0, 2, 51) 50%, rgba(0, 2, 51, 0) 90%);
}

.container {
  position: relative;
  margin: 0 auto;
  max-width: 900px;
  width: 100%;
  height: 100%;
}

.dots-orange {
  position: absolute;
  top: -55px;
  left: 755px;
}

.dots-blue {
  position: absolute;
  top: 0;
  left: 40px;
  width: 594px;
  height: 90px;
  background: url(../images/dots-blue.png) no-repeat center;
  background-size: contain;
  -webkit-mask-image: url(../images/dots-blue.png);
          mask-image: url(../images/dots-blue.png);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-box-image: url(../images/dots-blue.png);
  -webkit-mask-size: contain;
  mask-size: contain;
}

.glare {
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 100%;
  height: 200%;
  background: url(../images/glare.png) no-repeat center;
  background-size: cover;
  -webkit-animation: move_glare 6.4s infinite;
          animation: move_glare 6.4s infinite;
}

.person {
  position: absolute;
  top: 7px;
  left: 759px;
}

.phone {
  position: absolute;
  top: 9px;
  left: 842px;
  width: 86px;
  height: 171px;
  background: url(../images/phone.png) no-repeat center;
  background-size: contain;
}

.txt {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  left: -131px;
  width: 100%;
  font-size: 28px;
  line-height: 41px;
  text-align: center;
  text-shadow: 0 -1px 1px #03173d, 0 -1px 1px #03173d, 0 1px 1px #03173d, 0 1px 1px #03173d, -1px 0 1px #03173d, 1px 0 1px #03173d, -1px 0 1px #03173d, 1px 0 1px #03173d, -1px -1px 1px #03173d, 1px -1px 1px #03173d, -1px 1px 1px #03173d, 1px 1px 1px #03173d, -1px -1px 1px #03173d, 1px -1px 1px #03173d, -1px 1px 1px #03173d, 1px 1px 1px #03173d;
}

.txt-bold {
  font-size: 1.3288966725em;
}

.txt-black {
  font-size: 1.43117338em;
  color: #ff6c00;
}

.br-1 {
  display: none;
}

.br-2 {
  display: none;
}

.br-3 {
  display: none;
}

.br-4 {
  display: none;
}

.br-5 {
  display: none;
}

.br-6 {
  display: none;
}

/* MEDIA QUERIES ======================================================================================================================*/
@media (max-width: 1800px) {
  .logo-wrapper {
    width: 29%;
  }
  .logo {
    width: 176px;
  }
  .btn-wrapper {
    width: 19%;
  }
  .btn-frame {
    width: 198px;
    height: 50px;
    font-size: 22px;
  }
  .btn {
    width: 186px;
    height: 38px;
  }
  .container {
    max-width: 700px;
  }
  .dots-orange {
    top: -7px;
    left: 545px;
    width: 89px;
  }
  .dots-blue {
    left: 42px;
    width: 484px;
    background: url(../images/dots-blue-1280.png) no-repeat center;
    background-size: contain;
    -webkit-mask-image: url(../images/dots-blue-1280.png);
            mask-image: url(../images/dots-blue-1280.png);
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-box-image: url(../images/dots-blue-1280.png);
    -webkit-mask-size: contain;
    mask-size: contain;
  }
  .person {
    left: 509px;
  }
  .phone {
    left: 592px;
  }
  .txt {
    left: -88px;
    font-size: 24px;
    line-height: 36px;
  }
  .br-3 {
    display: inline-block;
  }
}
@media (max-width: 1279px) {
  .logo-wrapper {
    width: 28%;
  }
  .logo {
    width: 135px;
  }
  .btn-wrapper {
    width: 20%;
  }
  .btn-frame {
    width: 112px;
    font-size: 14px;
    line-height: 1.1;
  }
  .btn {
    width: 100px;
  }
  .br-btn-2 {
    display: inline-block;
  }
  .back-logo {
    width: 30vw;
    background: linear-gradient(120deg, rgb(0, 2, 51) 0%, rgb(0, 2, 51) 20%, rgba(0, 2, 51, 0) 90%);
  }
  .container {
    max-width: 450px;
  }
  .dots-orange {
    left: 293px;
  }
  .dots-blue {
    left: 9px;
    width: 314px;
    background: url(../images/dots-blue-768.png) no-repeat center;
    background-size: contain;
    -webkit-mask-image: url(../images/dots-blue-768.png);
            mask-image: url(../images/dots-blue-768.png);
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-box-image: url(../images/dots-blue-768.png);
    -webkit-mask-size: contain;
    mask-size: contain;
  }
  .person {
    left: 284px;
  }
  .phone {
    left: 367px;
  }
  .txt {
    left: -62px;
    font-size: 17px;
    line-height: 23px;
  }
  .br-2 {
    display: inline-block;
  }
  .br-3 {
    display: none;
  }
  .br-5 {
    display: inline-block;
  }
}
@media (max-width: 767px) {
  .logo-wrapper {
    width: 28%;
  }
  .logo {
    width: 95px;
  }
  .btn-wrapper {
    width: 24%;
  }
  .btn-frame {
    width: 76px;
    height: 34px;
    font-size: 10px;
  }
  .btn {
    width: 68px;
    height: 26px;
    -webkit-box-shadow: 0 0 16px #9de604, inset 0 2px #c1fa8b;
            box-shadow: 0 0 16px #9de604, inset 0 2px #c1fa8b;
  }
  .br-btn-1 {
    display: inline-block;
  }
  .br-btn-2 {
    display: none;
  }
  .back-logo {
    width: 50vw;
    background: linear-gradient(120deg, rgb(0, 2, 51) 0%, rgb(0, 2, 51) 30%, rgba(0, 2, 51, 0) 90%);
  }
  .container {
    max-width: 250px;
  }
  .dots-orange {
    top: -7px;
    left: 202px;
    width: 61px;
  }
  .dots-blue {
    left: 11px;
    width: 189px;
    background: url(../images/dots-blue-468.png) no-repeat center;
    background-size: contain;
    -webkit-mask-image: url(../images/dots-blue-468.png);
            mask-image: url(../images/dots-blue-468.png);
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-box-image: url(../images/dots-blue-468.png);
    -webkit-mask-size: contain;
    mask-size: contain;
  }
  .person {
    top: 10px;
    left: 142px;
    width: 58px;
  }
  .phone {
    top: 10px;
    left: 187px;
    width: 50px;
    height: 100px;
    background: url(../images/phone-468.png) no-repeat center;
    background-size: contain;
  }
  .txt {
    left: -40px;
    font-size: 12px;
    line-height: 16px;
  }
  .br-1 {
    display: inline-block;
  }
  .br-2 {
    display: none;
  }
  .br-4 {
    display: inline-block;
  }
}
@media (max-width: 467px) {
  .logo-wrapper {
    width: 29%;
  }
  .logo {
    top: -19px;
    width: 65px;
  }
  .btn-wrapper {
    left: 0;
    right: auto;
    width: 29%;
  }
  .btn-frame {
    top: 19px;
    width: 64px;
    height: 28px;
    font-size: 8px;
  }
  .btn {
    width: 56px;
    height: 20px;
  }
  .br-btn-1 {
    display: inline-block;
  }
  .br-btn-2 {
    display: none;
  }
  .back-logo {
    background: linear-gradient(110deg, rgb(0, 2, 51) 0%, rgb(0, 2, 51) 25%, rgba(0, 2, 51, 0) 90%);
  }
  .dots-orange {
    top: 4px;
    left: 165px;
  }
  .dots-blue {
    left: 41px;
    width: 159px;
    background: url(../images/dots-blue-280.png) no-repeat center;
    background-size: contain;
    -webkit-mask-image: url(../images/dots-blue-280.png);
            mask-image: url(../images/dots-blue-280.png);
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-box-image: url(../images/dots-blue-280.png);
    -webkit-mask-size: contain;
    mask-size: contain;
  }
  .person {
    left: 165px;
  }
  .phone {
    left: 210px;
  }
  .txt {
    left: -10px;
  }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .dots-blue {
    -webkit-mask-image: none;
            mask-image: none;
    -webkit-mask-box-image: none;
  }
  .glare {
    display: none;
  }
}