@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&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");
*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.banner {
  margin: 0 auto;
  min-width: 280px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgb(215, 0, 67) 50%, #070839 50%);
  font-size: 1vw;
  font-family: "Noto Sans Bengali", sans-serif;
  font-weight: 600;
  font-style: normal;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.banner div {
  position: absolute;
}
.banner img {
  position: absolute;
}

.logo-wrapper {
  width: 32.2916666667em;
  height: 15.625em;
  top: 50%;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(-50%, -168%);
}

.logo {
  position: relative !important;
  width: 24.291667em;
  height: 8.395833em;
}

.btn-wrapper {
  width: 32.2916666667em;
  height: 15.625em;
  top: 50%;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(-51.5%, 79%);
  z-index: 10;
}

.btn {
  font-size: 1.85em;
  width: 10.1em;
  height: 1.9em;
  color: #fff;

  font-weight: 900;
  border-radius: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  z-index: 10;
  box-sizing: content-box;
  background: none !important;
  box-shadow:
    inset 0 0 0 0.13em #29b0dc,
    0 0 0em 0 #10889e;
  padding: 0.4em;
}
.btn::before {
  content: "";
  width: 100%;
  height: 300%;
  position: absolute;
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0) 35%,
    rgb(255, 255, 255) 45%,
    rgb(255, 255, 255) 55%,
    rgba(255, 255, 255, 0) 65%
  );
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  animation: glare 3s infinite linear;
}
.btn::after {
  content: "";
  width: calc(100% - 0.75em);
  height: calc(100% - 0.75em);
  position: absolute;
  border-radius: 2em;
  box-shadow:
    inset 0 0.1em 0 0 #c5ff8d,
    0 0 0.9em 0 #10889e;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #29b0dc;
  z-index: -1;
}

.wrapper {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

.txt-1-wrapper {
  width: 85.291667em;
  height: 15.8125em;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 32%);
  animation: s1 0.5s 2s 1 backwards;
  z-index: 5;
}

.txt-1 {
  font-size: 5.6em;

  width: 100%;
  position: relative !important;
}

.back-txt {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -56%);
  width: 54.5em;
  height: 7.4em;
  background: linear-gradient(90deg, rgb(0, 61, 208) 0%, rgb(226, 0, 86) 100%);
}

.back {
  width: 133.0208333333em;
  height: 79.7916666667em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%);
  background: url(../img/back.jpg) no-repeat center center/contain;
}

.back-part-1 {
  width: 73.5416666667em;
  height: 67.6041666667em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -54%);
  background: url(../img/back-part-1.png) no-repeat center center/contain;
}

.back-sh {
  width: 50.2604166667em;
  height: 48.125em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -38%);
  background: url(../img/back-sh.png) no-repeat center center/contain;
}

.sh {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -44%);
  width: 100%;
  height: 79.7916666667em;
  background: linear-gradient(
    0deg,
    rgb(7, 8, 57) 0%,
    rgba(7, 8, 57, 0.43) 38%,
    rgba(7, 8, 57, 0) 51%
  );
  z-index: 1;
}

.sh-players {
  width: 60.5208333333em;
  height: 47.0833333333em;
  top: 50%;
  left: 50%;
  transform: translate(-52%, -32%);
  background: url(../img/sh-players.png) no-repeat center center/contain;
  animation: s1 0.5s 2s 1 backwards;
}

.back-ball {
  width: 38.9583333333em;
  height: 39.0104166667em;
  top: 50%;
  left: 50%;
  transform: translate(-49.5%, -49%);
  background: url(../img/back-ball.png) no-repeat center center/contain;
}

.player-1 {
  width: 30.2083333333em;
  height: 43.3854166667em;
  top: 50%;
  left: 50%;
  transform: translate(1%, -29%);
}

.player-1::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(../img/player-1.png) no-repeat center center/contain;
  animation: pl-1 0.5s 1.5s 1 backwards;
}

.player-2 {
  width: 30.15625em;
  height: 42.8125em;
  top: 50%;
  left: 50%;
  transform: translate(-110%, -28.5%);
}

.player-2::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(../img/player-2.png) no-repeat center center/contain;
  animation: pl-2 0.5s 1.5s 1 backwards;
}

.player-3 {
  width: 30.15625em;
  height: 45.4166666667em;
  top: 50%;
  left: 50%;
  transform: translate(-26%, -28%);
}

.player-3::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(../img/player-3.png) no-repeat center center/contain;
  animation: pl-3 0.5s 1s 1 backwards;
}

.player-4 {
  width: 30.15625em;
  height: 44.8958333333em;
  top: 50%;
  left: 50%;
  transform: translate(-85%, -28%);
}

.player-4::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(../img/player-4.png) no-repeat center center/contain;
  animation: pl-4 0.5s 1s 1 backwards;
}

.player-5 {
  width: 33.28125em;
  height: 50.15625em;
  top: 50%;
  left: 50%;
  transform: translate(-51.5%, -30%);
}

.player-5::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(../img/player-5.png) no-repeat center center/contain;
  animation: s1 0.5s 0.5s 1 backwards;
}

.txt-1 .br1 {
  display: none;
}

@keyframes s1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes pl-4 {
  0% {
    transform: translate(-35%, -50%);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}
@keyframes pl-3 {
  0% {
    transform: translate(-65%, -50%);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}
@keyframes pl-2 {
  0% {
    transform: translate(-35%, -50%);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}
@keyframes pl-1 {
  0% {
    transform: translate(-65%, -50%);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}
@keyframes glare {
  0%,
  0.001%,
  85% {
    transform: translate(-100%, -50%);
  }
  100% {
    transform: translate(100%, -50%);
  }
}
@media screen and (max-aspect-ratio: 1366/1024) and (min-aspect-ratio: 1000/999) {
  .logo-wrapper {
    font-size: 1.4em;
    transform: translate(-50%, -175%);
  }
  .btn-wrapper {
    font-size: 1.4em;
    transform: translate(-51.5%, 83%);
  }
  .txt-1-wrapper {
    font-size: 1.4em;
  }
  .back {
    width: 187.7205882353em;
    height: 113.617647em;
    transform: translate(-50%, -46%);
  }
  .back-part-1 {
    width: 103.8235294118em;
    height: 95.4411764706em;
    transform: translate(-50%, -54%);
  }
  .back-sh {
    width: 70.9558823529em;
    height: 67.9411764706em;
    transform: translate(-50%, -38%);
  }
  .sh {
    transform: translate(-50%, -44%);
    height: 113.617647em;
  }
  .sh-players {
    width: 90.0735294118em;
    height: 71.4705882353em;
    transform: translate(-52%, -32%);
  }
  .back-ball {
    width: 55em;
    height: 55.0735294118em;
    transform: translate(-49.5%, -49%);
  }
  .player-1 {
    width: 42.6470588235em;
    height: 61.25em;
    transform: translate(1%, -29%);
  }
  .player-2 {
    width: 42.5735294118em;
    height: 60.4411764706em;
    transform: translate(-110%, -28.5%);
  }
  .player-3 {
    width: 42.5735294118em;
    height: 64.1176470588em;
    transform: translate(-26%, -28%);
  }
  .player-4 {
    width: 42.5735294118em;
    height: 63.3823529412em;
    transform: translate(-85%, -28%);
  }
  .player-5 {
    width: 46.9852941176em;
    height: 70.8088235294em;
    transform: translate(-51.5%, -30%);
  }
}
@media screen and (min-aspect-ratio: 740/360) {
  .logo-wrapper {
    font-size: 0.95em;
    transform: translate(-132%, -142%);
  }
  .btn-wrapper {
    font-size: 1.12em;
    transform: translate(-120.5%, 33%);
  }
  .txt-1-wrapper {
    font-size: 0.96em;
    transform: translate(-80.5%, -34%);
  }
  .txt-1 {
    line-height: 0.9;
  }
  .txt-1 .br1 {
    display: block;
  }
  .back-txt {
    transform: translate(-51%, -55%);
    width: 38.5em;
    height: 13.3em;
  }
  .back {
    width: 144.5635528331em;
    height: 80.0918836141em;
    transform: translate(-63.6%, -44%);
    background: url(../img/back-2.jpg) no-repeat center center/contain;
  }
  .back-part-1 {
    width: 60.1837672282em;
    height: 55.2833078101em;
    transform: translate(-9%, -63%);
  }
  .back-sh {
    width: 44.2572741194em;
    height: 42.4196018377em;
    transform: translate(7%, -59%);
  }
  .sh {
    transform: translate(-50%, -44%);
    height: 80.0918836141em;
  }
  .sh-players {
    width: 56.0490045942em;
    height: 47.3200612557em;
    transform: translate(-8%, -54%);
  }
  .back-ball {
    width: 34.3032159265em;
    height: 34.1500765697em;
    transform: translate(22.5%, -76%);
  }
  .player-5 {
    width: 29.28125em;
    height: 50.15625em;
    transform: translate(33%, -47%);
  }
  .player-4 {
    width: 26.15625em;
    height: 44.8958333333em;
    transform: translate(9.5%, -47%);
  }
  .player-3 {
    width: 26.65625em;
    height: 45.4166666667em;
    transform: translate(66%, -46%);
  }
  .player-2 {
    width: 26.55625em;
    height: 42.8125em;
    transform: translate(-17%, -47.5%);
  }
  .player-1 {
    width: 26.208333em;
    height: 43.3854166667em;
    transform: translate(96%, -48%);
  }
}
@media screen and (max-aspect-ratio: 1024/1023) {
  .banner {
    font-size: calc(0.4vw + 0.4vh);
  }
  .logo-wrapper {
    font-size: 1.9em;
    transform: translate(-50%, -232%);
  }
  .btn-wrapper {
    font-size: 2em;
    transform: translate(-50%, 130%);
  }
  .txt-1-wrapper {
    font-size: 2.05em;
    transform: translate(-50%, 58%);
  }
  .txt-1 {
    line-height: 0.95;
  }
  .txt-1 .br1 {
    display: block;
  }
  .back-txt {
    transform: translate(-50%, -54%);
    width: 40.5em;
    height: 12.6em;
  }
  .back-part-1 {
    width: 122.5490196078em;
    height: 112.7450980392em;
    transform: translate(-50%, -54%);
  }
  .back-sh {
    width: 120.1960784314em;
    height: 118.8235294118em;
    transform: translate(-50%, -44%);
  }
  .player-5 {
    width: 71.28125em;
    height: 102.15625em;
    transform: translate(-50.5%, -36%);
  }
  .player-4 {
    width: 62.15625em;
    height: 103.895833em;
    transform: translate(-83%, -36%);
  }
  .player-3 {
    width: 61.15625em;
    height: 94.416667em;
    transform: translate(-25%, -35%);
  }
  .player-2 {
    width: 62.15625em;
    height: 91.8125em;
    transform: translate(-109%, -35.5%);
  }
  .player-1 {
    width: 64.208333em;
    height: 88.385417em;
    transform: translate(0%, -35.5%);
  }
  .back {
    width: 286.588235em;
    height: 146.980392em;
    transform: translate(-50%, -54%);
  }
  .sh {
    transform: translate(-50%, -44%);
    height: 140.9803921569em;
    background: linear-gradient(
      0deg,
      rgb(7, 8, 57) 8%,
      rgba(7, 8, 57, 0.43) 38%,
      rgba(7, 8, 57, 0) 51%
    );
  }
  .sh-players {
    width: 130.6862745098em;
    height: 103.9215686275em;
    transform: translate(-51.5%, -41%);
  }
  .back-ball {
    width: 96.0784313725em;
    height: 96.1764705882em;
    transform: translate(-49.5%, -56.5%);
  }
}
@media screen and (max-aspect-ratio: 1024/1320) {
  .banner {
    font-size: 1vw;
  }
}
@media screen and (max-aspect-ratio: 320/568) {
  .logo-wrapper {
    font-size: 1.9em;
    transform: translate(-50%, -283%);
  }
  .btn-wrapper {
    font-size: 2.4em;
    transform: translate(-50%, 141%);
  }
  .back-ball {
    transform: translate(-49.5%, -66.5%);
  }
  .back {
    width: 337.4375em;
    height: 220.5625em;
    transform: translate(-50%, -49%);
    background: url(../img/back-5.jpg) no-repeat center center/contain;
  }
  .back-part-1 {
    width: 121.875em;
    height: 111.875em;
    transform: translate(-50%, -54%);
  }
  .back-sh {
    width: 124.0625em;
    height: 118.4375em;
    transform: translate(-50%, -53%);
  }
  .sh {
    transform: translate(-50%, -44%);
    height: 191.5625em;
    background: linear-gradient(
      0deg,
      rgb(7, 8, 57) 10%,
      rgba(7, 8, 57, 0.43) 24%,
      rgba(7, 8, 57, 0) 51%
    );
  }
}
@media screen and (max-aspect-ratio: 520/1024) {
  .logo-wrapper {
    font-size: 2.2em;
    transform: translate(-50%, -301%);
  }
  .btn-wrapper {
    font-size: 2.8em;
    transform: translate(-50%, 144%);
  }
  .txt-1-wrapper {
    font-size: 2.35em;
    transform: translate(-50%, 57%);
  }
  .player-5 {
    width: 73.28125em;
    height: 110.15625em;
    transform: translate(-51%, -35%);
  }
  .player-4 {
    width: 66.15625em;
    height: 103.895833em;
    transform: translate(-84%, -34%);
  }
  .player-3 {
    width: 65.65625em;
    height: 99.416667em;
    transform: translate(-25%, -34%);
  }
  .player-2 {
    width: 67.15625em;
    height: 93.8125em;
    transform: translate(-109%, -34.5%);
  }
  .player-1 {
    width: 66.208333em;
    height: 96.385417em;
    transform: translate(2%, -34.5%);
  }
  .back-ball {
    width: 109.2857142857em;
    height: 109.6428571429em;
    transform: translate(-49.5%, -66.5%);
  }
  .back {
    width: 381.7857142857em;
    height: 246.0714285714em;
    transform: translate(-50%, -49%);
    background: url(../img/back-5.jpg) no-repeat center center/contain;
  }
  .back-part-1 {
    width: 120.3571428571em;
    height: 110.7142857143em;
    transform: translate(-50%, -67%);
  }
  .back-sh {
    width: 141.7857142857em;
    height: 135.3571428571em;
    transform: translate(-50%, -53%);
  }
  .sh {
    transform: translate(-50%, -44%);
    height: 246.0714285714em;
    background: linear-gradient(
      0deg,
      rgb(7, 8, 57) 10%,
      rgba(7, 8, 57, 0.43) 24%,
      rgba(7, 8, 57, 0) 51%
    );
  }
  .sh-players {
    width: 140.3571428571em;
    height: 111.4285714286em;
    transform: translate(-51.5%, -41%);
  }
} /*# sourceMappingURL=style.css.map */