@font-face {
  font-family: Gotham-Ultra Italic;
  src: url("../font/Gotham-UltraItalic.otf");
}

@font-face {
  font-family: Gotham-Bold;
  src: url("../font/GothamBold.ttf");
}

@font-face {
  font-family: Gotham Black;
  src: url("../font/Gotham-Black.otf");
}

@font-face {
  font-family: "Bebas Kai";
  src: url("../font/BebasKai.otf");
}

@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Manrope:wght@200;300;400;500;600;700;800&family=Maven+Pro:wght@700&display=swap");

body {
  --sb-track-color: #FFED51;
  --sb-thumb-color: #F9AA51;
  --sb-size: 5px;
}

body::-webkit-scrollbar {
  width: var(--sb-size)
}

body::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 10px;
}

body::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 10px;

}

@supports not selector(::-webkit-scrollbar) {
  body {
    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
  }
}

.beba-kai {
  text-decoration: underline;
  font-family: "Bebas Kai";
  color: #f0f0f0;
  letter-spacing: 1px;
}

.bebas {
  font-family: "Bebas Neue";
}

.ultaitalic {
  font-family: Gotham-Ultra Italic;
}

.gothambold {
  font-family: Gotham-Bold;
}

.gothamblack {
  font-family: Gotham Black;
}

.verify {
  letter-spacing: 4px;
  color: #ffff;
  font-weight: bold;
}

.enterpass {
  text-align: center;
  height: 50px;
  width: 100%;
  font-size: 24px;
  background-color: #202127;
  /* padding: 5px 18px 5px 45px; */
  color: #ffff;
  font-weight: 600;
}

.enterpass2 {
  font-size: 20px;
  background-color: #202127;
  padding: 5px 18px 5px 45px;
  color: #ffff;
  font-weight: 600;
}

.swiper-button-next {
  height: 100% !important;
  width: 55px !important;
  background-repeat: no-repeat !important;
  background-image: url(../img/arrowright.png) !important;
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  content: "" !important;
}

.swiper-button-prev {
  height: 100% !important;
  width: 55px !important;
  background-repeat: no-repeat !important;
  background-image: url(../img/arrowleft.png) !important;
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  content: "" !important;
}

#bg-popcard {
  background-image: url(../img/back.png);
  height: 800px;
  width: 55%;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-2 {
  background-image: url(../img/box.png);
  background-repeat: no-repeat;
  background-size: cover;
  height: 79px;
  width: 100%;
}

.font-bold {
  font-weight: bold !important;
}

.shadow {
  text-shadow: #000 1px 0 10px !important;
}

.navbar-light .navbar-nav .nav-link {
  font-size: 18px !important;
  font-weight: 400 !important;
  color: rgb(8 10 11) !important;
  white-space: nowrap !important;
  /* font-family: Gotham-Bold !important; */
}

.bg-img {
  /* height: 204px; */
  height: 890px;
  background-image: url(../img/back.jpg);
}

.bg-blue {
  background: #2567b3 !important;
}

@media (max-width: 768px) {
  .laptop-carousel {
    display: none;
  }

  .width-25 {
    width: 50%;
  }

  .bg-img {
    height: 479px !important;
  }
}

@media (min-width: 768px) {
  .mobile-carousel {
    display: none;
  }

  .width-25 {
    width: 25%;
  }
}

#design2 {
  border: 3px solid black;
  height: 612px;
  background-color: #fff;
}

.card-1 {
  width: 70%;
  height: 270px;
  border-radius: 30px;
  background-color: #000;
}

.pop1 {
  color: #ffff;
  -webkit-text-stroke: 2px black;

  font-size: 54px;
  letter-spacing: 4px;
}

.pop2 {
  color: #000;
  font-size: 38px;
  letter-spacing: 1px;
}

.pop3 {
  color: #fff;
  font-size: 36px;
  letter-spacing: 4px;
}

.border-color {
  border: 2px solid #000;
  border-radius: 22px;
  background: #00a2ff;
}

.card2 {
  border: 6px solid #d8d2d2;
  width: 100%;
  height: 315px;
  border-radius: 19px;
}

.options {
  width: 50%;
  height: 22px;
  background-color: #181818;
  color: #fff;
  text-align: center;
}

.options2 {
  width: 85%;
  height: 90px;
  background-color: #181818;
  color: #fff;
  text-align: center;
}

.navbar-collapse {
  flex-grow: inherit !important;
}

#collapse {
  display: block !important;
}

@media (min-width: 768px) {
  .pop1 {
    color: #ffff;
    -webkit-text-stroke: 2px black;
    font-size: 34px;
    letter-spacing: 2px;
  }

  .pop2 {
    margin-top: 24px !important;
    color: #000;
    font-size: 27px;
    letter-spacing: 1px;
  }

  .pop3 {
    margin-top: 18px !important;
    color: #fff;
    font-size: 24px;
    letter-spacing: 4px;
  }
}

@media (min-width: 1400px) {
  .pop1 {
    color: #ffff;
    -webkit-text-stroke: 2px black;
    font-size: 54px;
    letter-spacing: 4px;
  }

  .pop2 {
    color: #000;
    font-size: 38px;
    letter-spacing: 1px;
  }

  .pop3 {
    color: #fff;
    font-size: 36px;
    letter-spacing: 4px;
  }
}

#design3 {
  background-size: cover;
  height: auto;
  background-image: url(../img/background.jpeg);
}

.btn-design3 {
  background-color: #db1e90 !important;
  color: #fff !important;
  font-size: 15px !important;
  border-radius: 0px !important;
  font-family: Gotham-Bold;
  letter-spacing: 0.1px;
  padding: 12px;
}

#design2-container {
  background-image: url(../img/bg-3.png);
  background-size: cover;
  height: 772px;
}

.card-3 {
  width: 100%;
  border-radius: 30px;
  background-color: #000;
}

.card3 {
  background-size: cover;
  height: 100%;
  background-color: #000;
  position: relative;
  border-image: linear-gradient(#2e77ce, #e4148f) 30;
  border-image-slice: 10 10 10 10;
  border-style: solid;
  /* border-top: 1px solid #2e77ce;
  border-right: 2px solid #2e77ce;
  border-bottom: 3px solid #e4148f;
  border-left: 5px solid #e4148f;
  border-radius: 10px; */
}

/* .card3::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 10px solid transparent;
  border-radius: 20px;
  background-image: linear-gradient(45deg, #f00, #00f);
  border-image: linear-gradient(45deg, #f00, #00f) 10 round;
  z-index: -1;
} */
.options3 {
  font-family: "Bebas Kai";
  color: #c8cb0c;
  text-align: center;
}

.border-color2 {
  background-image: url(../img/bg-pink.jpeg);
  border-radius: 14px;
  border: 2px solid #ffffff;
  margin-top: 3rem;
}

.border-color3 {
  border-radius: 10px;
  border: 4px solid black;
}

.sticker3 {
  position: absolute;
  font-family: Gotham Black;
  text-transform: uppercase;
  background: linear-gradient(to right,
      #f5bdfc,
      #f8f8bf,
      #dafec4,
      #bcffee,
      #e5bcfc);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: -42px;
  margin-left: 106px;
  font-size: 20px;
}

.swiper,
.swiper-container {
  border-radius: 28px !important;
}


/* ==== Popcard Wrapper DOM Surgery Overrides (Mobile & Tablet only) ==== */
@media (max-width: 1024px) {
  .popcard-wrapper {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 90vw;
    aspect-ratio: 3 / 4;
    margin: 0 auto;
    overflow: hidden;
    height: auto;
  }

  .popcard-wrapper > .col-md-4 {
    flex: 1 1 33.333%;
    max-width: 33.333%;
    height: auto;
  }
}
/* ==== End Popcard Wrapper DOM Surgery Overrides ==== */