/* @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'); */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali:wght@100..900&display=swap");

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* animation: none !important; */
}

a,
a:focus,
a:active,
a:hover {
  outline: 0;
  text-decoration: none;
}

.banner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* font-family: "Roboto", sans-serif; */
  font-family: "Noto Sans Bengali", serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1vmax;
  text-transform: uppercase;
  color: #fff;
  background: #011222;
  overflow: hidden;
}

.global-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.bcg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46.7%);
  width: 101.3542vw;
  height: 48.59375em;
  background: url(../images/bcg.png) center no-repeat;
  background-size: cover;
}

.logo-wrap::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 89.0625em;
  height: 40.677083em;
  background: url(../images/logo-bcg.png) center no-repeat;
  background-size: cover;
}

.img-wrap {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 39vw;
  height: 100vh;
}

.block-imgs {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}

.img-wrap .i1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-99.1%, -76.4%);
  width: 29.0142em;
  height: 19.7917em;
  background: url(../images/i1.png) center no-repeat;
  background-size: contain;
  animation: content-an 3s linear;
}

.img-wrap .i2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-132.45%, -19.65%);
  width: 26.9271em;
  height: 22.7083em;
  background: url(../images/i2.png) center no-repeat;
  background-size: contain;
  animation: content-an 3s linear;
}

.img-wrap .i3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-90.65%, -31.9%);
  width: 26.71875em;
  height: 34.7917em;
  background: url(../images/i3.png) center no-repeat;
  background-size: contain;
  animation: content-an 3s linear;
}

.img-wrap .i4 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-163.85%, 47.8%);
  width: 15.4167em;
  height: 13.28125em;
  background: url(../images/i4.png) center no-repeat;
  background-size: contain;
  animation: content-an 3s linear;
}

.img-wrap .i5 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-220.65%, 136.7%);
  width: 13.64584em;
  height: 8.8021em;
  background: url(../images/i5.png) center no-repeat;
  background-size: contain;
  animation: content-an 3s linear;
}

.img-wrap .i6 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-60.45%, 42.6%);
  width: 15.26042em;
  height: 15.0521em;
  background: url(../images/i6.png) center no-repeat;
  background-size: contain;
  animation: content-an 3s linear;
}

.img-wrap .i7 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-69.4%, -109.3%);
  width: 18.90625em;
  height: 11.25em;
  background: url(../images/i7.png) center no-repeat;
  background-size: contain;
  animation: content-an 3s linear;
}

.img-wrap .i8 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-1026.3%, -328.7%);
  width: 3.02084em;
  height: 2.396em;
  background: url(../images/i8.png) center no-repeat;
  background-size: contain;
  animation: content-an 3s linear;
}

.img-wrap .i9 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(148.3%, -442.7%);
  width: 2.9167em;
  height: 2.8125em;
  background: url(../images/i9.png) center no-repeat;
  background-size: contain;
  animation: content-an 3s linear;
}

.img-wrap .i10 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-133.3%, -558.5%);
  width: 2.65625em;
  height: 2.8646em;
  background: url(../images/i10.png) center no-repeat;
  background-size: contain;
  animation: content-an 3s linear;
}

.container {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 60.5vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo-wrap {
  position: relative;
  width: 100%;
  height: 23%;
}

.btn-wrap {
  position: relative;
  width: 100%;
  height: 24%;
}

.txt-wrap {
  position: relative;
  width: 100%;
  height: 45%;
}

.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-48%, -50%);
  width: 20.8em;
  height: 5.2em;
  max-width: 727px;
  background: url(../images/bitdeposit-light-logo.svg) center no-repeat;
  background-size: contain;
}

.btn-border {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-48.5%, -50%);
  width: 18.96em;
  height: 5.21em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  font-size: 1em;
  font-weight: 900;
  font-style: normal;
  line-height: 1;
  color: #fff;
  border: 0.3em solid #ffbc00;
  border-radius: 300px;
}

.btn {
  padding-top: 0.1em;
  font-size: 2.083em;
  width: calc(100% - 0.4em);
  height: calc(100% - 0.4em);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #e6bd07;
  border-radius: 300px;
  box-shadow:
    0em 0em 1em 0em #e5e105,
    inset 0em 0.09em 0em 0em #fffd8d;
}

.btn-flare {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 102%;
  border-radius: 300px;
  overflow: hidden;
}

.btn-an {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    112deg,
    transparent 20%,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 0.8) 47%,
    rgba(255, 255, 255, 0.8) 53%,
    rgba(255, 255, 255, 0) 65%,
    transparent 80%
  );
  animation: btn-an 3s infinite linear;
}

.btn-txt {
  z-index: 10;
}

.block-txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -49.5%);
  width: 100%;
  height: 100%;
  gap: 0.2em;
  font-size: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.inline {
  font-size: 2.8125em;
  line-height: 1.2;
  letter-spacing: 0.04em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  animation: content-an 3s linear;
}

.clr {
  font-size: 1.1819em;
  letter-spacing: 0.05em;
  color: #f8da3e;
  font-weight: 700;
}

/* MEDIA QUERIES ============================================================================================================*/

/* 1366x1024 */
@media screen and (max-aspect-ratio: 1.4) and (orientation: landscape) {
  .banner {
    font-size: 1.26vmax;
  }

  .img-wrap {
    width: 48vw;
  }

  .block-imgs {
    transform: translate(-24.05%, -50%);
  }

  .container {
    width: 50.5vw;
  }

  .logo-wrap {
    height: 23.5%;
  }

  .txt-wrap {
    height: 33%;
  }

  .logo {
    transform: translate(-48.7%, -50%);
    width: 20.6em;
  }

  .block-txt {
    transform: translate(-50%, -50%);
  }

  .inline {
    letter-spacing: 0.03em;
  }

  .clr {
    letter-spacing: 0.045em;
  }
}

/* 653x280 */
@media screen and (min-aspect-ratio: 2.2) and (orientation: landscape) {
  .banner {
    font-size: 2.62vmin;
  }

  .bcg {
    transform: translate(-50%, -50.5%);
    width: 101.3542vw;
    height: 44.59375em;
  }

  .img-wrap {
    width: 40vw;
  }

  .block-imgs {
    transform: translate(-30.55%, -54.6%) scale(0.918);
  }

  .container {
    width: 59.7vw;
  }

  .txt-wrap {
    height: 43%;
  }

  .btn-wrap {
    height: 24.5%;
  }

  .logo {
    transform: translate(-49%, -50%);
    width: 18.9em;
  }

  .btn-border {
    transform: translate(-48.5%, -52%);
  }

  .block-txt {
    transform: translate(-50%, -48.5%);
  }
}

/* 1024x1366 */
@media screen and (orientation: portrait) {
  .banner {
    font-size: 1.86vw;
  }

  .bcg {
    transform: translate(-50%, -42.7%);
    height: 43.75em;
  }

  .logo-wrap::before {
    transform: translate(-50%, -50%) scale(0.8407);
  }

  .img-wrap {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
  }

  .img-wrap .i1 {
    transform: translate(-49.5%, -35.7%) scale(1.01);
  }

  .img-wrap .i2 {
    transform: translate(-83%, 16.45%) scale(1.01);
  }

  .img-wrap .i3 {
    transform: translate(-36.95%, -8.45%) scale(1.01);
  }

  .img-wrap .i4 {
    transform: translate(-91.75%, 97.99%) scale(1.01);
  }

  .img-wrap .i5 {
    transform: translate(-130.65%, 218.7%) scale(1.01);
  }

  .img-wrap .i6 {
    transform: translate(48.25%, 87.5%) scale(1.01);
  }

  .img-wrap .i7 {
    transform: translate(6.9%, -33%) scale(1.01);
  }

  .img-wrap .i8 {
    transform: translate(-555.3%, 30.3%);
  }

  .img-wrap .i9 {
    transform: translate(645.3%, -138.7%);
  }

  .img-wrap .i10 {
    transform: translate(409.3%, -261.5%);
  }

  .container {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    justify-content: space-between;
  }

  .logo-wrap {
    height: 22.5%;
  }

  .txt-wrap {
    height: 53%;
  }

  .btn-wrap {
    height: 23.5%;
  }

  .logo {
    transform: translate(-50%, -50%);
  }

  .block-txt {
    top: 0;
    transform: translate(-50.3%, 0.3%);
    justify-content: flex-start;
  }

  .inline {
    display: inline;
    line-height: 1.1;
  }
}

/* 320x568 */
@media screen and (max-aspect-ratio: 0.6) and (min-aspect-ratio: 0.45) {
  .banner {
    font-size: 2.48vw;
  }

  .bcg {
    transform: translate(-50%, -47.7%);
  }

  .block-imgs {
    transform: translate(-50%, -53.2%);
  }

  .img-wrap .i9 {
    transform: translate(571.3%, -258.7%);
  }

  .img-wrap .i10 {
    transform: translate(543.3%, 277.5%);
  }

  .logo-wrap {
    height: 18.5%;
  }

  .txt-wrap {
    height: 56%;
  }

  .logo {
    transform: translate(-50%, -21%);
  }

  .block-txt {
    font-size: 0.9em;
  }

  .inl2 {
    display: flex;
  }
}

/* 280x653 */
@media screen and (max-aspect-ratio: 0.45) {
  .banner {
    font-size: 2.8vw;
  }

  .logo-wrap::before {
    transform: translate(-50%, -50%) scale(0.851);
  }

  .block-imgs {
    transform: translate(-50%, -48.35%) scale(0.9);
  }

  .img-wrap .i7 {
    transform: translate(-1.15%, -77%) scale(1.01);
  }

  .img-wrap .i8 {
    transform: translate(-553.3%, 32.3%) scale(1.03);
  }

  .img-wrap .i9 {
    transform: translate(8.3%, -354.7%);
  }

  .img-wrap .i10 {
    transform: translate(509.3%, 145%) scale(1.02);
  }

  .logo-wrap {
    height: 17.5%;
  }

  .txt-wrap {
    height: 58.2%;
  }

  .btn-wrap {
    height: 21.5%;
  }

  .logo {
    transform: translate(-50%, -27%);
  }

  .btn {
    width: calc(100% - 0.46em);
    height: calc(100% - 0.46em);
  }

  .inline {
    display: flex;
  }
}

/* from square to 0.751 AR*/
@media screen and (max-aspect-ratio: 1/1) and (min-aspect-ratio: 770/1024) {
  .banner {
    font-size: 1.45vw;
  }
}

/* ANIMATIONS ===============================================================================================================*/

@keyframes btn-promo-an {
  0%,
  53% {
    transform: translateX(-100%);
  }

  70%,
  100% {
    transform: translateX(100%);
  }
}

@keyframes btn-an {
  0%,
  36.67% {
    transform: translateX(-100%);
  }

  53.33%,
  100% {
    transform: translateX(100%);
  }
}

@keyframes content-an {
  0%,
  16.67% {
    opacity: 0;
  }

  33.33%,
  100% {
    opacity: 1;
  }
}

@keyframes promo-an {
  0%,
  33.33% {
    opacity: 0;
  }

  50%,
  100% {
    opacity: 1;
  }
}