@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");
*,
*::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: #141414;
  font-size: 0.95vw;
  font-family: "Noto Sans Bengali", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  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(-134%, -181%);
  z-index: 10;
}

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

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

.btn {
  font-size: 2em;
  width: 10.1em;
  height: 2.4em;
  color: white;
  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.04em;
  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%,
    #ffe100 45%,
    #ffe100 55%,
    rgba(255, 255, 255, 0) 65%
  );
  top: 50%;
  left: 0;
  transform: translate(-100%, -50%) skewX(13deg);
  animation: glare 7.3s 2.5s 1 backwards linear;
  z-index: 11;
}

.btn::after {
  content: "";
  width: calc(100% - 0.2em);
  height: calc(100% - 0.2em);
  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: 49.291667em;
  height: 23.8125em;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;
  left: 50%;
  transform: translate(-106.5%, -72%);
  animation: s1 1s 0.5s 1 backwards;
  z-index: 5;
}

.txt-1 {
  font-size: 3.2em;
  line-height: 1;
  width: 100%;
  font-weight: 800;
  position: relative !important;
  top: 2%;
}

.txt-1 .acc {
  font-family: "Roboto", sans-serif;
  color: #fab60e;
}

.txt-1 .l1 {
  font-size: 1.3em;
  letter-spacing: 0.06em;
  display: block;
  line-height: 1;
  visibility: hidden;
}

.title {
  top: 50%;
  left: 50%;
  transform: translate(-48.5%, -87%);
  width: 38.0729166667em;
  height: 11.1458333333em;
  background: url(../img/title.png) no-repeat center center/contain;
}

.back {
  width: 80em;
  height: 36.6666666667em;
  top: 50%;
  left: 50%;
  transform: translate(-36%, -80%);
  font-size: 1.1em;
  background: url(../img/back.png) no-repeat center center/contain;
}

.pattern {
  width: 97.2916666667em;
  height: 75.3645833333em;
  top: 50%;
  left: 50%;
  transform: translate(-30%, -50.5%);
  background: url(../img/pattern.png) no-repeat center center/contain;
}

.girl-1 {
  width: 19.5833333333em;
  height: 33.59375em;
  top: 50%;
  left: 50%;
  transform: translate(-29%, -80%);
  background: url(../img/girl-1.png) no-repeat center center/contain;
  animation: s1 1s 1.5s 1 backwards;
}

.man-1 {
  width: 29.4270833333em;
  height: 44.9479166667em;
  top: 50%;
  left: 50%;
  transform: translate(65%, -59.5%);
  background: url(../img/man-1.png) no-repeat center center/contain;
  animation: s1 1s 1.5s 1 backwards;
}

.cup {
  width: 95.2083333333em;
  height: 64.2708333333em;
  top: 50%;
  left: 50%;
  transform: translate(-29.5%, -49.5%);
  background: url(../img/cup.png) no-repeat center center/contain;
  animation: s1 1s 0.5s 1 backwards;
}

.man-2 {
  width: 19.0104166667em;
  height: 45.625em;
  top: 50%;
  left: 50%;
  transform: translate(-15.5%, -32.5%);
  background: url(../img/man-2.png) no-repeat center center/contain;
  animation: s1 1s 1.5s 1 backwards;
}

.girl-2 {
  width: 17.0833333333em;
  height: 32.1875em;
  top: 50%;
  left: 50%;
  transform: translate(130%, -47%);
  background: url(../img/girl-2.png) no-repeat center center/contain;
  animation: s1 1s 1.5s 1 backwards;
}

.man-3 {
  width: 17.8645833333em;
  height: 33.0729166667em;
  top: 50%;
  left: 50%;
  transform: translate(-3%, -16.5%);
  background: url(../img/man-3.png) no-repeat center center/contain;
  animation: s1 1s 1.5s 1 backwards;
}

.man-4 {
  width: 36.40625em;
  height: 34.1666666667em;
  top: 50%;
  left: 50%;
  transform: translate(2%, -18%);
  background: url(../img/man-4.png) no-repeat center center/contain;
  animation: s1 1s 1.5s 1 backwards;
}

.steps-wrapper {
  top: 50%;
  left: 50%;
  transform: translate(-48.5%, 151%);
  width: 90em;
  height: 10em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step {
  line-height: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative !important;
}

.step-txt {
  font-size: 1.3em;
  line-height: 1.2;
}

.gradient {
  background: linear-gradient(
    180deg,
    rgb(255, 255, 255) 15%,
    rgb(250, 223, 147) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  z-index: 3;
}

.sh {
  color: transparent;
  text-shadow: 0px 3px 9px rgba(0, 0, 0, 0.8);
}

.step-back-1,
.step-back-2,
.step-back-3 {
  width: 23.125em;
  height: 6.0416666667em;
  top: 50%;
  left: 50%;
  transform: translate(-45%, -51%);
  background: url(../img/step-1.png) no-repeat center center/contain;
  -webkit-mask-image: url(../img/step-1.png);
  mask-image: url(../img/step-1.png);
  -webkit-mask-box-image: url(../img/step-1.png);
  -webkit-mask-size: contain;
  mask-size: contain !important;
}

.step-back-2 {
  transform: translate(-49%, -51%);
}

.step-back-3 {
  transform: translate(-47%, -51%);
}

.step-back-1::after {
  content: "";
  width: 100%;
  height: 300%;
  position: absolute;
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0) 35%,
    #ffe100 45%,
    #ffe100 55%,
    rgba(255, 255, 255, 0) 65%
  );
  top: 50%;
  left: 0;
  transform: translate(-100%, -50%);
  animation: back-glare-1 7.3s 2.3s 1 backwards linear;
}

.step-back-2::after {
  content: "";
  width: 100%;
  height: 300%;
  position: absolute;
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0) 35%,
    #ffe100 45%,
    #ffe100 55%,
    rgba(255, 255, 255, 0) 65%
  );
  top: 50%;
  left: 0;
  transform: translate(-100%, -50%);
  animation: back-glare-2 7.3s 2.4s 1 backwards linear;
}

.step-back-3::after {
  content: "";
  width: 100%;
  height: 300%;
  position: absolute;
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0) 35%,
    #ffe100 45%,
    #ffe100 55%,
    rgba(255, 255, 255, 0) 65%
  );
  top: 50%;
  left: 0;
  transform: translate(-100%, -50%);
  animation: back-glare-3 7.3s 2.4s 1 backwards linear;
}

.step-back-1-mini {
  top: 50%;
  left: 50%;
  transform: translate(-196%, -68%);
  width: 6.3020833333em;
  height: 5.9375em;
  background: url(../img/step-mini-1.png) no-repeat center center/contain;
}

.step-back-2-mini {
  top: 50%;
  left: 50%;
  transform: translate(-222%, -68%);
  width: 5.9375em;
  height: 5.9375em;
  background: url(../img/step-mini-2.png) no-repeat center center/contain;
}

.step-back-3-mini {
  top: 50%;
  left: 50%;
  transform: translate(-214%, -69%);
  width: 5.9375em;
  height: 5.9375em;
  background: url(../img/step-mini-3.png) no-repeat center center/contain;
}

.step-back-1::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url(../img/step-bg.png) no-repeat center center/contain;
  opacity: 0;
  animation: step-bg-1 7.3s 2.3s 1 backwards linear;
}

.step-back-2::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  opacity: 0;
  background: url(../img/step-bg.png) no-repeat center center/contain;
  animation: step-bg-2 7.3s 2.4s 1 backwards linear;
}

.step-back-3::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  opacity: 0;
  background: url(../img/step-bg.png) no-repeat center center/contain;
  animation: step-bg-3 7.3s 2.4s 1 backwards linear;
}

.step-an-1,
.step-an-2,
.step-an-3 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-an-1 {
  animation: step-an-1 7.3s 2.3s 1 backwards linear;
}

.step-an-2 {
  animation: step-an-2 7.3s 2.4s 1 backwards linear;
}

.step-an-3 {
  animation: step-an-3 7.3s 2.4s 1 backwards linear;
}

.step-1 {
  animation: step1 7.3s 1.5s 1 backwards linear;
}

.step-2 {
  animation: step2 7.3s 1.5s 1 backwards linear;
}

.step-3 {
  animation: step3 7.3s 1.5s 1 backwards linear;
}

.main-wrapper {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}

@keyframes s1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes glare {
  0%,
  2.8%,
  28%,
  36.4%,
  62.7%,
  71.8%,
  96.1%,
  100% {
    transform: translate(-100%, -50%) skewX(17deg);
  }
  14%,
  16.8%,
  49%,
  51.8%,
  82.3%,
  83.6% {
    transform: translate(100%, -50%) skewX(17deg);
  }
}
@keyframes step1 {
  0% {
    opacity: 0;
  }
  4.3%,
  100% {
    opacity: 1;
  }
}
@keyframes step-an-1 {
  0%,
  4.2%,
  37.8%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  11.2%,
  33.6% {
    transform: translate(-50%, -50%) scale(1.15);
  }
}
@keyframes step-an-1-1 {
  0%,
  4.2%,
  37.8%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  11.2%,
  33.6% {
    transform: translate(-50%, -50%) scale(1.1);
  }
}
@keyframes step-bg-1 {
  0%,
  4.2%,
  37.8%,
  100% {
    opacity: 0;
  }
  11.2%,
  33.6% {
    opacity: 1;
  }
}
@keyframes back-glare-1 {
  0%,
  4.2%,
  28%,
  100% {
    transform: translate(-100%, -50%);
  }
  14%,
  16.8% {
    transform: translate(100%, -50%);
  }
}
/* @keyframes back-glare-1 {
  0%, 8.4%, 35%, 100% {
    transform: translate(-100%, -50%);
  }
  21%, 22.4% {
    transform: translate(100%, -50%);
  }
} */
@keyframes step2 {
  0% {
    opacity: 0;
  }
  4.3% {
    opacity: 0;
  }
  8.6% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes step-an-2 {
  0%,
  37.8%,
  67.9%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  42%,
  64% {
    transform: translate(-50%, -50%) scale(1.15);
  }
}
@keyframes step-an-2-2 {
  0%,
  37.8%,
  67.9%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  42%,
  64% {
    transform: translate(-50%, -50%) scale(1.1);
  }
}
@keyframes step-bg-2 {
  0%,
  37.8%,
  66.6%,
  100% {
    opacity: 0;
  }
  42%,
  64% {
    opacity: 1;
  }
}
@keyframes back-glare-2 {
  0%,
  37.8%,
  64%,
  100% {
    transform: translate(-100%, -50%);
  }
  50.4%,
  51.8% {
    transform: translate(100%, -50%);
  }
}
@keyframes step3 {
  0% {
    opacity: 0;
  }
  8.6% {
    opacity: 0;
  }
  12.9% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes step-an-3 {
  0%,
  69.2%,
  98.7%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  74.4%,
  94.7% {
    transform: translate(-50%, -50%) scale(1.15);
  }
}
@keyframes step-an-3-3 {
  0%,
  69.2%,
  98.7%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  74.4%,
  94.7% {
    transform: translate(-50%, -50%) scale(1.1);
  }
}
@keyframes step-bg-3 {
  0%,
  71.8%,
  100% {
    opacity: 0;
  }
  77%,
  96.1% {
    opacity: 1;
  }
}
@keyframes back-glare-3 {
  0%,
  71.8%,
  96.1%,
  100% {
    transform: translate(-100%, -50%);
  }
  82.3%,
  83.6% {
    transform: translate(100%, -50%);
  }
}
@media screen and (max-aspect-ratio: 1366/1024) and (min-aspect-ratio: 1000/999) {
  .banner {
    font-size: 1.07vw;
  }
}
@media screen and (min-aspect-ratio: 740/360) {
  .banner {
    font-size: 0.93vw;
  }
  .back {
    font-size: 1.1em;
  }
}
@media screen and (max-aspect-ratio: 1024/1023) {
  .banner {
    font-size: calc(0.4vw + 0.4vh);
  }
  .logo-wrapper {
    font-size: 1.22em;
    transform: translate(-51%, -360%);
  }
  .txt-1-wrapper {
    font-size: 1.85em;
    transform: translate(-51%, -138%);
  }
  .txt-1 .l1 {
    font-size: 1.05em;
  }
  .txt-1 .l1 br {
    display: none;
  }
  .btn-wrapper {
    font-size: 1.52em;
    transform: translate(-51%, -141%);
  }
  .title {
    width: 39.072917em;
    background: url(../img/title-2.png) no-repeat center center/contain;
  }
  .steps-wrapper {
    width: 90em;
    transform: translate(-50.5%, 522%);
  }
  .step-back-1,
  .step-back-2,
  .step-back-3 {
    width: 31.568627451em;
    height: 8.2352941176em;
    transform: translate(-45%, -51%);
  }
  .step-txt {
    font-size: 1.8em;
  }
  .step-back-1-mini {
    transform: translate(-194%, -68%);
    width: 8.696078em;
    height: 9.7058823529em;
  }
  .step-back-2-mini {
    transform: translate(-212%, -67%);
    width: 7.705882em;
    height: 9.7058823529em;
  }
  .step-back-3-mini {
    transform: translate(-212%, -67%);
    width: 7.705882em;
    height: 9.7058823529em;
  }
  .back {
    width: 362.588235em;
    height: 175.019608em;
    transform: translate(-45.5%, -41.5%);
  }
  .pattern {
    width: 148.7254901961em;
    height: 115.1960784314em;
    transform: translate(-48.5%, -30%);
  }
  .girl-1 {
    width: 30em;
    height: 51.3725490196em;
    transform: translate(-121%, -35%);
  }
  .man-1 {
    width: 45em;
    height: 68.431372549em;
    transform: translate(4.5%, -26%);
  }
  .cup {
    width: 145.5882352941em;
    height: 98.137254902em;
    transform: translate(-48.5%, -25.5%);
  }
  .man-2 {
    width: 29.0196078431em;
    height: 69.5098039216em;
    transform: translate(-109.5%, 1.5%);
  }
  .girl-2 {
    width: 26.1764705882em;
    height: 49.0196078431em;
    transform: translate(24%, 1%);
  }
  .man-3 {
    width: 27.3529411765em;
    height: 50.5882352941em;
    transform: translate(-104%, 29.5%);
  }
  .man-4 {
    width: 55.4901960784em;
    height: 52.0588235294em;
    transform: translate(-47%, 27%);
  }
}
@media screen and (max-aspect-ratio: 1024/1320) {
  .banner {
    font-size: 1vw;
  }
}
@media screen and (max-aspect-ratio: 320/568) {
  .banner {
    font-size: calc(0.2vw + 0.2vh);
  }
  .main-wrapper {
    transform: translate(-50%, -53%);
  }
  .logo-wrapper {
    font-size: 2.5em;
    transform: translate(-51%, -422%);
  }
  .btn-wrapper {
    font-size: 3.1em;
    transform: translate(-50.5%, -190%);
  }
  .txt-1-wrapper {
    font-size: 2.5em;
    transform: translate(-51%, -222%);
  }
  .txt-1 .l1 br {
    display: block;
  }
  .txt-1 .l1 {
    font-size: 1.3em;
  }
  .title {
    background: url(../img/title.png) no-repeat center center/contain;
  }
  .steps-wrapper {
    width: 68em;
    transform: translate(-47.5%, 86%);
    flex-direction: column;
    height: 89em;
  }
  .step-back-1,
  .step-back-2,
  .step-back-3 {
    width: 93.0625em;
    height: 24.5em;
    transform: translate(-45%, -51%);
  }
  .step-txt {
    font-size: 5em;
  }
  .step-back-1-mini {
    transform: translate(-191%, -70%);
    width: 26.696078em;
    height: 26.146341em;
  }
  .step-back-2-mini {
    transform: translate(-205%, -72%);
    width: 24.705882em;
    height: 24.1463414634em;
  }
  .step-back-3-mini {
    transform: translate(-206%, -69%);
    width: 24.705882em;
    height: 24.1463414634em;
  }
  .back {
    width: 362.588235em;
    height: 175.019608em;
    transform: translate(-45.5%, -57.5%);
  }
  .pattern {
    width: 249.6875em;
    height: 193.4375em;
    transform: translate(-48.5%, -50%);
  }
  .girl-1 {
    width: 50.3125em;
    height: 85.9375em;
    transform: translate(-114%, -77%);
  }
  .man-1 {
    width: 75.625em;
    height: 115em;
    transform: translate(8.5%, -57%);
  }
  .cup {
    width: 244.0625em;
    height: 164.375em;
    transform: translate(-47.5%, -48%);
  }
  .man-2 {
    width: 48.75em;
    height: 116.875em;
    transform: translate(-104.5%, -30.5%);
  }
  .girl-2 {
    width: 43.75em;
    height: 82.5em;
    transform: translate(31%, -44%);
  }
  .man-3 {
    width: 45.9375em;
    height: 84.6875em;
    transform: translate(-96%, -13.5%);
  }
  .man-4 {
    width: 93.125em;
    height: 87.5em;
    transform: translate(-44%, -15%);
  }
}
@media screen and (max-aspect-ratio: 414/1278) {
  .banner {
    font-size: 1vw;
  }
  .main-wrapper {
    transform: translate(-50%, -50%);
  }
  .logo-wrapper {
    font-size: 2.5em;
    transform: translate(-51%, -422%);
  }
  .btn-wrapper {
    font-size: 3.1em;
    transform: translate(-50.5%, -190%);
  }
  .txt-1-wrapper {
    font-size: 2.5em;
    transform: translate(-51%, -222%);
  }
  .txt-1 .l1 br {
    display: block;
  }
  .txt-1 .l1 {
    font-size: 1.3em;
  }
  .title {
    background: url(../img/title.png) no-repeat center center/contain;
  }
  .steps-wrapper {
    width: 68em;
    transform: translate(-47.5%, 68%);
    flex-direction: column;
    height: 89em;
  }
  .step-back-1,
  .step-back-2,
  .step-back-3 {
    width: 96.8292682927em;
    height: 25.3658536585em;
    transform: translate(-45%, -51%);
  }
  .step-txt {
    font-size: 6em;
  }
  .step-back-1-mini {
    transform: translate(-191%, -70%);
    width: 26.696078em;
    height: 26.146341em;
  }
  .step-back-2-mini {
    transform: translate(-205%, -72%);
    width: 24.705882em;
    height: 24.1463414634em;
  }
  .step-back-3-mini {
    transform: translate(-206%, -69%);
    width: 24.705882em;
    height: 24.1463414634em;
  }
  .back {
    width: 362.588235em;
    height: 175.019608em;
    transform: translate(-45.5%, -57.5%);
  }
  .pattern {
    width: 194.8780487805em;
    height: 150.9756097561em;
    transform: translate(-48.5%, -50%);
  }
  .girl-1 {
    width: 39.2682926829em;
    height: 67.0731707317em;
    transform: translate(-114%, -77%);
  }
  .man-1 {
    width: 59.0243902439em;
    height: 89.756097561em;
    transform: translate(8.5%, -57%);
  }
  .cup {
    width: 190.487804878em;
    height: 128.2926829268em;
    transform: translate(-47.5%, -48%);
  }
  .man-2 {
    width: 38.0487804878em;
    height: 91.2195121951em;
    transform: translate(-104.5%, -30.5%);
  }
  .girl-2 {
    width: 34.1463414634em;
    height: 64.3902439024em;
    transform: translate(31%, -44%);
  }
  .man-3 {
    width: 35.8536585366em;
    height: 66.0975609756em;
    transform: translate(-96%, -13.5%);
  }
  .man-4 {
    width: 72.6829268293em;
    height: 68.2926829268em;
    transform: translate(-44%, -15%);
  }
  .step-an-1 {
    animation-name: step-an-1-1;
  }
  .step-an-2 {
    animation-name: step-an-2-2;
  }
  .step-an-3 {
    animation-name: step-an-3-3;
  }
} /*# sourceMappingURL=style.css.map */