*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: inherit; }

@font-face {
  font-family: 'Gotham';
  src: url("../font/Gotham-Black.woff2") format("woff2"), url("../font/Gotham-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap; }

html {
  box-sizing: border-box;
  font-size: 100%;
  position: relative; }

body {
  font-family: 'Gotham', sans-serif;
  overflow-x: hidden; }
  @media only screen and (max-width: 768px) {
    body {
      overflow: hidden; } }

img {
  width: 100%; }

a {
  text-decoration: none; }

.wrapper {
  width: 85.42%;
  margin: 0 auto; }

.phone-app-bg {
  background: url(../images/bg.jpg) no-repeat center;
  background-size: 100% 100%;
  background-attachment: fixed; }
  @media only screen and (max-width: 768px) {
    .phone-app-bg {
      background: url(../images/mob-bg.png) no-repeat center;
      min-height: 100vh;
      background-size: cover; } }

.header {
  margin-top: 3.2291666666666665vw; }
  @media only screen and (max-width: 768px) {
    .header {
      margin-top: 11.229167vw; } }
  .header__logo {
    width: 7.291666666666667vw;
    height: 2.915625vw; }
    @media only screen and (max-width: 768px) {
      .header__logo {
        width: 32vw;
        height: 12.5vw; } }

.main-content {
  margin-top: 5.208333333333333vw;
  display: flex; }
  @media only screen and (max-width: 768px) {
    .main-content {
      flex-direction: column; } }
  .main-content__phones {
    opacity: 0;
    transform: translateY(-2.60417vw);
    margin-right: 7vw;
    position: relative;
    margin-left: 5.46875vw;
    flex: 0 1 32.708333333333336vw;
    animation: fadeIn 1.5s cubic-bezier(0.7, 0, 0.4, 1) forwards; }
    @media only screen and (max-width: 768px) {
      .main-content__phones {
        order: 2;
        flex: 0 1 100%;
        margin-top: 12vw;
        left: -53%; } }
    .main-content__phones-wrapper {
      position: relative; }
      .main-content__phones-wrapper:first-of-type {
        width: 21.239583333333332vw; }
        @media only screen and (max-width: 768px) {
          .main-content__phones-wrapper:first-of-type {
            width: 84.4vw; } }
      .main-content__phones-wrapper:last-of-type {
        width: 27.4vw; }
        @media only screen and (max-width: 768px) {
          .main-content__phones-wrapper:last-of-type {
            width: 104.4vw; } }
      .main-content__phones-wrapper .bg-phone {
        right: -25%;
        z-index: -1;
        padding-top: 1vw;
        transform: rotate(-18deg) translateX(-10.41667vw) translateY(-2.60417vw);
        animation: secondPhoneAnimation 1.5s cubic-bezier(0.7, 0, 0.4, 1) forwards; }
      .main-content__phones-wrapper .phone {
        top: 0;
        position: absolute; }
  .main-content__text {
    flex: 1;
    margin-top: 4.270833333333333vw;
    max-width: 34.375vw; }
    @media only screen and (max-width: 768px) {
      .main-content__text {
        max-width: 100%;
        margin-top: 16vw; } }
    .main-content__text-caption {
      opacity: 0;
      transform: translateX(3.90625vw);
      animation: animText 1.5s cubic-bezier(0.7, 0, 0.4, 1) forwards; }
      .main-content__text-caption span {
        font-size: 0.9375vw; }
        @media only screen and (max-width: 1368px) {
          .main-content__text-caption span {
            font-size: 1.5vw; } }
        @media only screen and (max-width: 768px) {
          .main-content__text-caption span {
            font-size: 4.7vw; } }
    .main-content__text-heading {
      opacity: 0;
      transform: translateX(3.90625vw);
      animation: animText 1.5s cubic-bezier(0.7, 0, 0.4, 1) forwards;
      margin-top: 2.34375vw; }
      @media only screen and (max-width: 768px) {
        .main-content__text-heading {
          margin-top: 5vw; } }
      .main-content__text-heading h6 {
        font-size: 3.3333333333333335vw; }
        @media only screen and (max-width: 1368px) {
          .main-content__text-heading h6 {
            font-size: 4vw; } }
        @media only screen and (max-width: 768px) {
          .main-content__text-heading h6 {
            font-size: 9.333333vw; } }
    .main-content__text-buttons {
      opacity: 0;
      transform: translateX(3.90625vw);
      animation: animText 1.5s cubic-bezier(0.7, 0, 0.4, 1) forwards;
      margin-top: 1.3020833333333333vw; }
      @media only screen and (max-width: 768px) {
        .main-content__text-buttons {
          margin-top: 4.302083vw; } }
      .main-content__text-buttons .btn {
        width: 8.489583333333334vw;
        display: inline-block; }
        @media only screen and (max-width: 768px) {
          .main-content__text-buttons .btn {
            width: 39.489583vw; } }
        .main-content__text-buttons .btn:not(:last-child) {
          margin-right: 0.6vw; }

@keyframes animText {
  100% {
    opacity: 1;
    transform: translateX(0); } }

@keyframes fadeIn {
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes secondPhoneAnimation {
  100% {
    transform: rotate(0) translateX(0); } }