@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..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: #212121;
  font-size: 1vw;
  font-family: "Noto Sans Bengali", sans-serif;
  font-weight: 700;
  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: 30.291667em;
  height: 9.625em;
  top: 50%;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(-125.5%, -242%);
  z-index: 11;
}

.logo {
  position: relative !important;
  width: 27.991667em;
}

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

.btn {
  font-size: 2.1em;
  width: 10.8em;
  height: 2.6em;
  color: #fff;
  background: linear-gradient(
    180deg,
    rgb(255, 216, 0) 0%,
    rgb(174, 78, 0) 100%
  );
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  transform: translate(-50%, -50%) skewX(-13deg);
  top: 50%;
  left: 50%;

  border-radius: 0.05em;
  z-index: 10;
  box-sizing: content-box;
  box-shadow: 0em 0.0314em 0.0543em 0.0171em rgba(0, 0, 0, 0.36);
}

.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: translate(-100%, -50%) skew(13deg);
  animation: glare 3s infinite;
  z-index: 11;
}

.btn::after {
  content: "";
  width: calc(100% - 0.15em);
  height: calc(100% - 0.15em);
  background: linear-gradient(0deg, rgb(255, 114, 0) 0%, rgb(255, 188, 0) 100%);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.btn-txt {
  transform: skewX(13deg);
  z-index: 11;
}

.txt-1-wrapper {
  width: 53.291667em;
  height: 7.8125em;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;
  left: 50%;
  transform: translate(-91%, -21%);

  animation: s1 0.3s 0.8s 1 backwards;
  z-index: 5;
}

.txt-1 {
  font-size: 3.46em;
}

.txt-1,
.txt-2 {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -48%);
}

.txt-1.sh {
  color: transparent;
  text-shadow:
    rgba(255, 255, 255, 0.9) -0.02em 0 0.02em,
    rgba(0, 0, 0, 0.5) 0 0.02em 0;
}

.txt-1.gradient {
  background: linear-gradient(
    180deg,
    rgb(246, 246, 246) 34%,
    rgb(171, 171, 171) 50%,
    rgb(255, 255, 255) 66%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
}

.txt-2-wrapper {
  width: 53.291667em;
  height: 9.8125em;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;
  left: 50%;
  transform: translate(-91.5%, 41%);

  animation: s1 0.3s 1.1s 1 backwards;
  z-index: 5;
}

.txt-2 {
  font-size: 3.7em;
  line-height: 1.27;
}

.txt-2.sh {
  color: transparent;
  text-shadow:
    0 0 0.1em #e24300,
    0 0 0em #e24300,
    0 0 0em rgba(255, 203, 20, 0.9),
    -0.01em 0em 0.01em #ffff53;
}

.txt-2.gradient {
  background: linear-gradient(
    180deg,
    #eb611e 10%,
    rgb(249, 186, 51) 50%,
    rgb(239, 147, 10) 63%,
    rgb(255, 255, 83) 90%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
}

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

.back::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgb(33, 33, 33) 0%,
    rgba(33, 33, 33, 0.81) 32%,
    rgba(33, 33, 33, 0) 60%
  );
}

.back::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -47%);
  width: 100%;
  height: 100%;
  background: linear-gradient(
    0deg,
    rgb(33, 33, 33) 0%,
    rgba(33, 33, 33, 0.81) 6%,
    rgba(33, 33, 33, 0) 19%
  );
}

.pattern-down {
  width: 62.5520833333em;
  height: 63.2291666667em;
  top: 50%;
  left: 57%;
  transform: translateY(-26.5%);
  background: url(../img/pattern-down.png) no-repeat center center/contain;
}

.pattern-up {
  width: 54.625em;
  height: 59.4270833333em;
  top: 50%;
  left: -20%;
  transform: translateY(-77%) rotate(173deg);
  background: url(../img/pattern-down.png) no-repeat center center/contain;
}

.main-img-wrap {
  top: 50%;
  left: 50%;
  transform: translate(-15%, -50%);
  width: 59em;
  height: 100vh;
  animation: s1 0.9s 0.5s 1 backwards;
}

.item-1 {
  width: 37.6041666667em;
  height: 35.1041666667em;
  top: 50%;
  left: 50%;
  transform: translate(-53.5%, -65%);
  background: url(../img/item-1.png) no-repeat center center/contain;
}

.item-2 {
  width: 18.3333333333em;
  height: 18.3854166667em;
  top: 50%;
  left: 50%;
  transform: translate(-71.5%, 10%);
  background: url(../img/item-2.png) no-repeat center center/contain;
}

.item-3 {
  width: 24.1666666667em;
  height: 12.2916666667em;
  top: 50%;
  left: 50%;
  transform: translate(0.5%, -104%);
  background: url(../img/item-3.png) no-repeat center center/contain;
}

.item-4 {
  width: 9.3229166667em;
  height: 9.4791666667em;
  top: 50%;
  left: 50%;
  transform: translate(-267.5%, -200%);
  background: url(../img/item-4.png) no-repeat center center/contain;
}

.ticket-1 {
  width: 24.7916666667em;
  height: 20.2604166667em;
  top: 50%;
  left: 50%;
  transform: translate(-38.5%, 88%);
  background: url(../img/ticket-1.png) no-repeat center center/contain;
}

.ticket-2 {
  width: 13.8020833333em;
  height: 14.2708333333em;
  top: 50%;
  left: 50%;
  transform: translate(193.5%, -176%);
  background: url(../img/ticket-2.png) no-repeat center center/contain;
}

.ticket-3 {
  width: 14.4791666667em;
  height: 13.4895833333em;
  top: 50%;
  left: 50%;
  transform: translate(-382.5%, -75%);
  background: url(../img/ticket-3.png) no-repeat center center/contain;
}

.gift-1 {
  width: 11.9791666667em;
  height: 14.0625em;
  top: 50%;
  left: 50%;
  transform: translate(317.5%, 1%);
  background: url(../img/gift-1.png) no-repeat center center/contain;
}

.gift-2 {
  width: 17.1354166667em;
  height: 19.5833333333em;
  top: 50%;
  left: 50%;
  transform: translate(-314.5%, 60%);
  background: url(../img/gift-2.png) no-repeat center center/contain;
}

.promo {
  width: 23.125em;
  height: 14.3229166667em;
  top: 50%;
  left: 50%;
  transform: translate(-144.5%, -103%);
  background: url(../img/promo.png) no-repeat center center/contain;
  animation: s1 0.3s 0.5s 1 backwards;
}

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

.ticket-1-wrap {
  animation: ticket-1 0.7s 1.5s 1 backwards;
}

.ticket-2-wrap {
  animation: ticket-2 0.7s 1.5s 1 backwards;
}

.ticket-3-wrap {
  animation: ticket-3 0.7s 1.5s 1 backwards;
}

.gift-1-wrap {
  animation: gift-1 0.7s 1.5s 1 backwards;
}

.gift-2-wrap {
  animation: gift-2 0.7s 1.5s 1 backwards;
}

@keyframes s1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes ticket-1 {
  0% {
    transform: translate(0%, 31%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}
@keyframes ticket-2 {
  0% {
    transform: translate(6%, -31%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}
@keyframes ticket-3 {
  0% {
    transform: translate(-31%, 0%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}
@keyframes gift-1 {
  0% {
    transform: translate(31%, 0%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}
@keyframes gift-2 {
  0% {
    transform: translate(-31%, 6%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}
@keyframes glare {
  from,
  0.0001%,
  75% {
    transform: translate(-100%, -50%) skew(13deg);
  }
  100% {
    transform: translate(100%, -50%) skew(13deg);
  }
}
@keyframes ticket-1-1024 {
  0% {
    transform: translate(48%, 44%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}
@keyframes ticket-1-320 {
  0% {
    transform: translate(44%, 0%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}
@keyframes ticket-2-1024 {
  0% {
    transform: translate(26%, -44%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}
@keyframes ticket-3-1024 {
  0% {
    transform: translate(-44%, 0%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}
@keyframes gift-1-1024 {
  0% {
    transform: translate(44%, 0%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}
@keyframes gift-2-1024 {
  0% {
    transform: translate(-44%, 26%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}
@media screen and (max-aspect-ratio: 1366/1024) and (min-aspect-ratio: 1000/999) {
  .logo-wrapper {
    font-size: 1.15em;
    transform: translate(-109.5%, -239%);
  }
  .btn-wrapper {
    font-size: 1.15em;
    transform: translate(-106%, 102%);
  }
  .txt-1-wrapper {
    font-size: 1.14em;
    transform: translate(-82%, -21%);
  }
  .txt-2-wrapper {
    font-size: 1.15em;
    transform: translate(-82.5%, 40%);
  }
  .main-img-wrap {
    font-size: 1.02em;
    transform: translate(-14.5%, -48%);
  }
  .ticket-1 {
    width: 34em;
    height: 28.6274509804em;
    transform: translate(-30.5%, 94%);
  }
  .ticket-2 {
    width: 18.196078em;
    height: 20.7843137255em;
    transform: translate(87.5%, -196%);
  }
  .ticket-3 {
    width: 19.980392em;
    height: 19.8039215686em;
    transform: translate(-291.5%, -70%);
  }
  .gift-1 {
    width: 15.6862745098em;
    height: 18.431372549em;
    transform: translate(218.5%, 64%);
  }
  .gift-2 {
    width: 22.4509803922em;
    height: 25.6862745098em;
    transform: translate(-247.5%, 61%);
  }
  .promo {
    width: 26.4705882353em;
    height: 16.3725490196em;
    transform: translate(-124.5%, -103%);
  }
  .back {
    width: 148.0392156863em;
    height: 83.7254901961em;
    transform: translate(-39.5%, -52%);
  }
  .pattern-down {
    width: 82.0588235294em;
    height: 83.0392156863em;
    left: 43.5%;
    transform: translateY(-24%);
  }
  .pattern-up {
    width: 70.625em;
    height: 72.427083em;
    left: -26%;
    transform: translateY(-79%) rotate(173deg);
  }
}
@media screen and (min-aspect-ratio: 740/360) {
  .banner {
    font-size: 0.96vw;
  }
}
@media screen and (orientation: portrait) {
  .logo-wrapper {
    font-size: 1.18em;
    transform: translate(-117%, -241%);
  }
  .btn-wrapper {
    font-size: 1.18em;
    transform: translate(-112%, 104%);
  }
  .txt-1-wrapper {
    font-size: 1.18em;
    transform: translate(-86%, -21%);
  }
  .txt-2-wrapper {
    font-size: 1.18em;
    transform: translate(-86.5%, 41%);
  }
  .txt-2.sh {
    color: transparent;
    text-shadow:
      0 0 0.1em #e24300,
      0 0 0em #e24300,
      0 0 0em rgba(255, 203, 20, 0.9),
      -0.01em 0em 0em #ffff53;
  }
  .main-img-wrap {
    font-size: 1.05em;
    transform: translate(-18%, -48.5%);
  }
  .ticket-1 {
    width: 32.791667em;
    height: 27.260417em;
    transform: translate(5.5%, 100%);
  }
  .ticket-2 {
    width: 18.802083em;
    height: 22.270833em;
    transform: translate(83.5%, -316%);
  }
  .ticket-3 {
    width: 19.479167em;
    height: 21.489583em;
    transform: translate(-131.5%, -233%);
  }
  .gift-1 {
    width: 15.6862745098em;
    height: 18.431372549em;
    transform: translate(201.5%, -243%);
  }
  .gift-2 {
    width: 22.4509803922em;
    height: 25.6862745098em;
    transform: translate(-175.5%, 138%);
  }
  .promo {
    width: 27.4509803922em;
    height: 17.0588235294em;
    transform: translate(-133.5%, -103%);
  }
  .back {
    width: 255.9803921569em;
    height: 144.8039215686em;
    transform: translate(-50%, -50.5%);
  }
  .pattern-down {
    width: 82.0588235294em;
    height: 83.0392156863em;
    left: 43.5%;
    transform: translateY(4%);
  }
  .pattern-up {
    width: 72.625em;
    height: 74.427083em;
    left: -30%;
    transform: translateY(-99%) rotate(173deg);
  }
  .back::before {
    background: linear-gradient(
      180deg,
      rgb(33, 33, 33) 0%,
      rgba(33, 33, 33, 0.81) 10%,
      rgba(33, 33, 33, 0) 50%
    );
  }
  .ticket-1-wrap {
    animation-name: ticket-1-1024;
  }
  .ticket-2-wrap {
    animation-name: ticket-2-1024;
  }
  .ticket-3-wrap {
    animation-name: ticket-3-1024;
  }
  .gift-1-wrap {
    animation-name: gift-1-1024;
  }
  .gift-2-wrap {
    animation-name: gift-2-1024;
  }
}
@media screen and (max-aspect-ratio: 320/481) {
  .logo-wrapper {
    font-size: 1.56em;
    transform: translate(-50%, -465%);
  }
  .txt-1-wrapper {
    font-size: 1.55em;
    transform: translate(-50%, 255%);
  }
  .txt-2-wrapper {
    font-size: 1.55em;
    transform: translate(-50%, 261%);
  }
  .btn-wrapper {
    font-size: 1.55em;
    transform: translate(-50%, 288%);
  }
  .main-img-wrap {
    font-size: 1.35em;
    transform: translate(-50%, -48.5%);
  }
  .ticket-1 {
    transform: translate(96.5%, 43%);
  }
  .ticket-2 {
    width: 28.802083em;
    height: 29.270833em;
    transform: translate(-0.5%, -340%);
  }
  .ticket-3 {
    width: 25.479167em;
    height: 24.489583em;
    transform: translate(-226.5%, -14%) rotate(14deg);
  }
  .gift-1 {
    width: 22.1875em;
    height: 26.25em;
    transform: translate(129.5%, -243%);
  }
  .gift-2 {
    width: 35.3125em;
    height: 40.3125em;
    transform: translate(-154.5%, 150%);
  }
  .promo {
    width: 35.625em;
    height: 21.875em;
    transform: translate(-50%, -241%);
  }
  .back {
    width: 340.3125em;
    height: 192.5em;
    transform: translate(-55%, -49%);
  }
  .pattern-down {
    width: 115.3125em;
    height: 116.875em;
    left: 23%;
    transform: translateY(9%);
  }
  .pattern-up {
    width: 99.625em;
    height: 99.427083em;
    left: -25%;
    transform: translateY(-126%) rotate(173deg);
  }
  .back::before {
    background: linear-gradient(
      180deg,
      rgb(33, 33, 33) 0%,
      rgba(33, 33, 33, 0.81) 7%,
      rgba(33, 33, 33, 0) 12%
    );
  }
  .ticket-1-wrap {
    animation-name: ticket-1-320;
  }
}
@media screen and (max-aspect-ratio: 520/1024) {
  .logo-wrapper {
    font-size: 1.5em;
  }
  .txt-1-wrapper {
    font-size: 1.5em;
  }
  .txt-2-wrapper {
    font-size: 1.5em;
    transform: translate(-50%, 264%);
  }
  .btn-wrapper {
    font-size: 1.5em;
  }
  .main-img-wrap {
    font-size: 1.3em;
  }
  .ticket-1 {
    width: 31.791667em;
    transform: translate(98.5%, -7%);
  }
  .ticket-2 {
    width: 27.802083em;
    height: 32.270833em;
    transform: translate(-42.5%, -329%);
  }
  .ticket-3 {
    width: 27.479167em;
    height: 26.489583em;
    transform: translate(-209.5%, 6%) rotate(1deg);
  }
  .gift-1 {
    width: 21.1875em;
    height: 26.25em;
    transform: translate(135.5%, -341%);
  }
  .gift-2 {
    width: 34.3125em;
    height: 40.3125em;
    transform: translate(-138.5%, 161%);
  }
  .promo {
    width: 34.625em;
    height: 21.875em;
    transform: translate(-50%, -235%);
  }
  .pattern-down {
    transform: translateY(13%);
  }
  .pattern-up {
    left: -32%;
    transform: translateY(-135%) rotate(173deg);
  }
  .back {
    width: 398.5365853659em;
    height: 225.3658536585em;
    transform: translate(-51%, -50.5%);
  }
} /*# sourceMappingURL=style.css.map */