* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.coming__soon {
  display: flex;
  width: 964px;
  margin: auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 101px;
  height: 100vh;

  @media screen and (max-width: 1200px) {
    width: fit-content;
    gap: 50px;
  }

  @media screen and (max-width: 768px) {
    gap: 30px;
  }

  .coming__soon__logo {
    width: 442px;
    height: 205px;
    aspect-ratio: 442/205;
    @media screen and (max-width: 1200px) {
      width: 300px;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  .coming__soon__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 21px;
    align-self: stretch;

    .coming__soon__bottom__text {
      text-align: center;
      .coming__soon__title-ar {
        display: flex;
        gap: 42px;
        align-items: center;
        justify-content: center;
        width: fit-content;
        margin: auto;
        span {
          color: #4358a7;
          font-family: "Poppins", sans-serif;
          font-size: 26.667px;
          font-style: normal;
          font-weight: 500;
          line-height: normal;
        }

        .line {
          width: 206px;
          height: 1.33px;
          background-color: #4358a7;
          position: relative;

          @media screen and (max-width: 1200px) {
            width: 100px;
          }
          @media screen and (max-width: 768px) {
            width: 70px;
          }
          &.right {
            &::after {
              content: "";
              width: 8px;
              height: 8px;
              background-color: #4358a7;
              position: absolute;
              right: 2px;
              top: 50%;
              transform: translateY(-69%);
              rotate: 45deg;
            }
          }
          &.left {
            &::after {
              content: "";
              width: 8px;
              height: 8px;
              background-color: #4358a7;
              position: absolute;
              left: -6px;
              top: 50%;
              transform: translateY(-69%);
              rotate: 45deg;
            }
          }
        }
      }
      .coming__soon__title-en {
        color: #000;
        font-family: "Poppins", sans-serif;
        font-size: 140px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        @media screen and (max-width: 1200px) {
          font-size: 100px;
        }
        @media screen and (max-width: 768px) {
          font-size: 60px;
        }
        @media screen and (max-width: 428px) {
          font-size: 40px;
        }
      }
    }

    .coming__soon__countdown {
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: center;
      gap: 56px;

      @media screen and (max-width: 1200px) {
        gap: 26px;
      }
      .coming__soon__countdown__item {
        display: flex;
        flex-flow: column;
        gap: 6px;
        align-items: flex-start;

        .coming__soon__countdown__text {
          color: #4359a9;
          font-family: "EB Garamond";
          font-size: 20px;
          font-style: normal;
          font-weight: 700;
          line-height: normal;

          @media screen and (max-width: 768px) {
            font-size: 16px;
          }
        }

        .coming__soon__countdown__number {
          width: 102px;
          height: 92px;
          flex-shrink: 0;
          background: rgba(217, 217, 217, 0.41);
          color: rgba(0, 4, 163, 0.95);
          font-family: Roboto;
          font-size: 70px;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
          display: flex;
          align-items: center;
          justify-content: center;
          @media screen and (max-width: 768px) {
            font-size: 50px;
            width: 80px;
            height: 70px;
          }
          @media screen and (max-width: 428px) {
            font-size: 30px;
            width: 60px;
            height: 50px;
          }
        }
      }
    }
  }
}