/*
    template css
*/
.template__section--inner.row {
  --bs-gutter-y: 3rem;
}
.template__section {
  position: relative;
}
.template__section--shape__img {
  position: absolute;
  top: -56rem;
  left: 0;
  z-index: -1;
  right: 0;
}
.template__section--title {
  background: linear-gradient(45deg, #27CEEF 39%, #EC4899 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.template__section--title {
  font-size: 2.5rem;
  line-height: 3.5rem;
  font-weight: 700;
}
@media only screen and (min-width: 576px) {
  .template__section--title {
    font-size: 3rem;
    line-height: 4rem;
  }
}
@media only screen and (min-width: 992px) {
  .template__section--title {
    font-size: 4rem;
    line-height: 5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .template__section--title {
    font-size: 5rem;
    line-height: 6rem;
  }
}
/* Isotope Filter css */
.isotope--container {
  overflow: hidden;
  padding: 3rem 0 0;
}
.filterDiv {
  display: none; /* Hidden by default */
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Add a dark background to the active button */
.home-pages--tab{
  @media only screen and (min-width: 1200px) {
    padding: 0 10rem;
  }
}
.home-pages--tab > button {
  background-color: #1A1C24;
  font-size: 1.6rem;
  padding: 0.7rem 2rem;
  border-radius: 3rem;
  text-transform: capitalize;
  font-weight: 500;
  transition: var(--transition);
  border: 1px solid var(--border-color);
  color: rgb(255, 255, 255, 0.7);
  position: relative;
}

@media only screen and (min-width: 992px) {
  .home-pages--tab > button {
    font-size: 1.7rem;
    padding: 1rem 2.5rem;
  }
}
.home-pages--tab > button::before {
  transition: background 0.8s linear;
}

.home-pages--tab > button::after {
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
}
.home-pages--tab > button.active,
.home-pages--tab > button:hover {
  color: rgb(255, 255, 255, 0.7);
  background-image: url(../img/template/template-btn-shape.png);
  background-size: cover;
  background-position: center center;
}
.home-pages--tab > button.active::before,
.home-pages--tab > button:hover::before {
  position: absolute;
  content: "";
  background: linear-gradient(90deg, #27CEEF 0%, #27CEEF 39%, #EC4899 80%);
  left: -0.2rem;
  right: -0.2rem;
  top: -0.2rem;
  bottom: -0.2rem;
  z-index: -1;
  border-radius: 3rem;
  opacity: 0.7;
}
.home-pages--tab > button.active::after,
.home-pages--tab > button:hover::after {
  position: absolute;
  content: "";
  background: linear-gradient(90deg, #27CEEF 0%, #27CEEF 39%, #EC4899 80%);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  border-radius: 3rem;
  transition: filter 1s ease-in;
  filter: blur(7px);
  opacity: 0.5;
}
.home-pages--tab > button:focus {
  box-shadow: none;
}
#myBtnContainer {
  flex-wrap: wrap;
  gap: 2rem;
}

.card__badge {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--primary-color);
  border-radius: 2rem;
  height: 2.5rem;
  line-height: 2.5rem;
  padding: 0 1.5rem;
  position: absolute;
  top: -15px;
  right: -57px;
}
.card__badge.add-new{
  width: 6.5rem;
  height: 6.5rem;
  line-height: 6.5rem;
  border-radius: 50%;
  background: linear-gradient(-45deg, #274af5 22%, #ee279d 76%);
  color: #fff;
  padding: 0;
  text-align: center;
  font-size: 1.7rem;
  font-weight: 700;
  top: -38px;
  right: -66px;
}
.card__badge.new {
  background: #EE2761;
  color: var(--white-color);
}
.card__badge.hot {
  background: var(--secondary-color);
  right: -50px;
  color: var(--white-color);
}
.card__badge.popular {
  background: var(--secondary-color);
  right: -75px;
  color: var(--white-color);
}
.card__badge.comming-soon{
  background: var(--dark-green-color);
  color: var(--white-color);
  top: -25px;
  right: -69px;
}
.template__page--number {
  font-weight: 900;
  position: relative;
  font-size: 8rem;
  line-height: 7.5rem;
  margin-bottom: 1rem;
}
.template__page--number__count {
  background: linear-gradient(180deg, #27CEEF -7%, rgb(13, 28, 34, .3) 86%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-color: rgb(255, 255, 255, .5);
  -webkit-text-stroke-width: 0.1rem;
}

@media only screen and (min-width: 576px) {
  .template__page--number {
    font-size: 9rem;
    line-height: 8.5rem;
    margin-bottom: 1rem;
  }
}
@media only screen and (min-width: 768px) {
  .template__page--number {
    font-size: 10rem;
    line-height: 9rem;
  }
}
@media only screen and (min-width: 992px) {
  .template__page--number {
    font-size: 13rem;
    line-height: 12rem;
  }
}
@media only screen and (min-width: 1200px) {
  .template__page--number {
    font-size: 18rem;
    line-height: 15rem;
    margin-bottom: 1rem;
  }
}
@media only screen and (min-width: 1366px) {
  .template__page--number {
    font-size: 20rem;
    line-height: 20rem;
    margin-bottom: 1.2rem;
  }
}
@media only screen and (min-width: 1600px) {
  .template__page--number {
    font-size: 22rem;
  }
}

.template__page--plus {
    position: absolute;
    font-size: 7rem;
    font-weight: 700;
    top: 1rem;
    right: -3rem;
    line-height: 3rem;
    color: #27CEEF;
}

.tab__btn--wrapper {
  gap: 3rem;
}
@media only screen and (min-width: 992px) {
  .tab__btn--wrapper {
    gap: 3.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .tab__btn--wrapper {
    flex-wrap: wrap;
    gap: 2rem;
  }
}
.tab__btn--link {
  background-color: #1A1C24;
  font-size: 1.6rem;
  padding: 0.7rem 2rem;
  border-radius: 3rem;
  text-transform: capitalize;
  font-weight: 500;
  transition: var(--transition);
  border: 1px solid var(--border-color);
  color: rgb(255, 255, 255, 0.7);
  position: relative;
}
@media only screen and (min-width: 992px) {
  .tab__btn--link {
    font-size: 1.7rem;
    padding: 1rem 2.5rem;
  }
}
.tab__btn--link.active,
.tab__btn--link:hover {
  color: rgb(255, 255, 255, 0.7);
  background-image: url(../img/template/template-btn-shape.png);
  background-size: cover;
  background-position: center center;
}
.tab__btn--link.active::before,
.tab__btn--link:hover::before {
  position: absolute;
  content: "";
  background: linear-gradient(90deg, #27CEEF 0%, #27CEEF 39%, #EC4899 80%);
  left: -0.2rem;
  right: -0.2rem;
  top: -0.2rem;
  bottom: -0.2rem;
  z-index: -1;
  border-radius: 3rem;
  opacity: 0.7;
}
.tab__btn--link.active::after,
.tab__btn--link:hover::after {
  position: absolute;
  content: "";
  background: linear-gradient(90deg, #27CEEF 0%, #27CEEF 39%, #EC4899 80%);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  border-radius: 3rem;
  transition: filter 1s ease-in;
  filter: blur(7px);
  opacity: 0.5;
}
.tab__btn--link::before {
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
}
.tab__btn--link::after {
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
}
.template__card {
  border-radius: 10px;
  transition: var(--transition);
  position: relative;
  background: #181A21;
  border: 1px solid #565656;
}

.template__card:hover {
  transform: translateY(-15px) !important;
  background: #181A21;
  
}

.template__card::before {
  transition: background 0.8s linear;
}
.template__card::before {
  position: absolute;
  content: "";
  left: -0.1rem;
  right: -0.1rem;
  top: -0.1rem;
  bottom: -0.1rem;
  z-index: -11;
  border-radius: 10px;
  transition: background 0.8s linear;
}
.template__card:hover::before{
  background: linear-gradient(70deg, #27CEEF 0%, #CF5B5B 34%, #CF5B5B 71%, #FFB127 100%);
}
.template__card::after {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -11;
  border-radius: 10px;
}
.template__card:hover::after{
  background: #181A21;
}
.template__card--inner {
  padding: 0.5rem 1rem 1.5rem;
  border-radius: 10px;
  position: relative;
}
.template__card--inner::before {
  transition: filter 1s ease-in;
}
.template__card--inner:hover:before {
  position: absolute;
  content: "";
  background: linear-gradient(70deg, #00FF37 -23%, #070715 32%, #070716 75%, #FFCE31 115%);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -11;
  border-radius: 1rem;
  transition: filter 1s ease-in;
  filter: blur(8px);
  -webkit-filter: blur(8px);
}
.template__card--inner:hover::after {
  position: absolute;
  content: "";
  background: #181A21;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -11;
  border-radius: 10px;
}
.template__card:hover .core__features--icon {
  background: var(--primary-color);
}
.template__dots {
  margin-bottom: 1rem;
}
.template__card--link {
  width: 100%;
}
.template__card--thumbnail {
  margin-bottom: 2.5rem;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 7px 0 rgba(11, 8, 34, 1);
}
@media only screen and (min-width: 992px) {
  .template__card--thumbnail {
    margin-bottom: 3rem;
  }
}

.template__card--btn.outline__btn {
  font-size: 1.4rem;
  font-weight: 500;
  padding: 0.6rem 1.5rem;
  color: var(--white-color);
}

@media only screen and (max-width: 1599px) {
  .template__card--content {
    gap: 2rem;
    flex-direction: column;
    align-items: flex-start !important;
  }
}
.template__card--title {
  font-weight: 600;
  font-size: 2rem;
  color: var(--white-color);
  position: relative;
  display: inline-block;
}
@media only screen and (min-width: 1600px) {
  .template__card--title {
    font-size: 2.2rem;
  }
}
.template__card--subtitle {
  line-height: 2.2rem;
  font-size: 1.5rem;
  font-weight: 300;
  margin-top: 0.8rem;
  opacity: 0.7;
  color: var(--white-color);
  display: block;
}
@media only screen and (min-width: 1600px) {
  .template__card--subtitle {
    line-height: 2.2rem;
    font-size: 1.6rem;
  }
}

span.template__badge {
  background: #ff7800;
  color: #fff;
  font-size: 1.3rem;
  padding: 0.6rem 1.5rem;
  line-height: 1;
  border-radius: 5rem;
  margin-left: 1.2rem;
  font-weight: bold;
}

.template__card--inner.awesome__card {
  padding: 0.7rem 2rem 3rem;
}
.exclusive__scrolling {
  position: relative;
}
.section__popup {
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}
.section__popup--inner {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  max-width: 88rem;
  margin: 0 auto;
  text-align: center;
  padding: 4rem 3rem;
  pointer-events: auto;
  border-radius: 4rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.outline__btn:is(.buy--now-button-width) {
  margin-top: 1.5rem;
}
@media only screen and (min-width: 1200px) {
  .section__popup--inner {
    max-width: 100rem;
    padding: 5rem 5rem;
  }
  .outline__btn:is(.buy--now-button-width) {
    padding: 1.8rem 4.5rem;
    font-size: 1.8rem;
  }
}
@media only screen and (max-width: 991px) {
  .section__popup--inner {
    max-width: 95%;
  }
}
.section__popup--title {
  font-size: 2.8rem;
  line-height: 3.5rem;
  margin-bottom: 2rem;
  background: linear-gradient(45deg, #27CEEF 0%, #58AAF8 30%, #9393FB 50%, #EC4899 78%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
@media only screen and (min-width: 576px) {
  .section__popup--title {
    font-size: 3.5rem;
    line-height: 5rem;
  }
}
@media only screen and (min-width: 768px) {
  .section__popup--title {
    font-size: 4rem;
    line-height: 5.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .section__popup--title {
    font-size: 4.8rem;
    line-height: 6rem;
  }
}
@media only screen and (min-width: 1200px) {
  .section__popup--title {
    font-size: 5.5rem;
    line-height: 7rem;
  }
}
.section__popup--logo {
  margin-bottom: 1.5rem;
}
.section__popup--desc {
  font-size: 1.6rem;
  line-height: 3rem;
  margin-bottom: 3rem;
}
@media only screen and (min-width: 576px) {
  .section__popup--desc {
    font-size: 1.8rem;
    line-height: 3.2rem;
  }
}
@media only screen and (min-width: 992px) {
  .section__popup--desc {
    font-size: 2rem;
    line-height: 3.5rem;
    margin-bottom: 4rem;
  }
}
.awesome-shop-section-shape{
  position: absolute;
  top: -45%;
  left: 0;
  z-index: -1;
}

.awesome-shop-section-shape-2{
  position: absolute;
  top: -35%;
  right: 0;
  z-index: -1;
}