@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@900&display=swap");

@font-face {
  font-family: fontMedium;
  src: url(../fonts/aeoniktrial-regular.otf);
}

@font-face {
  font-family: fontLight;
  src: url(../fonts/aeoniktrial-light.otf);
}

@font-face {
  font-family: fontBold;
  src: url(../fonts/aeoniktrial-bold.otf);
}

@font-face {
  font-family: fontSolid;
  src: url(../fonts/JandaManateeSolid.ttf);
}

/* 
@font-face {
  font-family: fontExtraBold;
  src: url(../fonts/PlayfairDisplay-Black.ttf);
}

@font-face {
  font-family: fontSemiBold;
  src: url(../fonts/Rubik-SemiBold.ttf);
} */

/*
@font-face {
  font-family: fontSemiBold;
  src: url(../fonts/Kumbh_Sans/KumbhSans-SemiBold.ttf);
} */

.theme-font-medium {
  font-family: fontMedium !important;
}

.theme-font-regular {
  font-family: fontLight !important;
}

.theme-font-head {
  font-family: "Aeonik TRIAL", serif !important;
}

.theme-font-bold {
  font-family: fontBold !important;
}

.theme-font-extra-bold {
  font-family: fontExtraBold !important;
}

.theme-font-semi-bold {
  font-family: fontSemiBold !important;
}

:root {
  --themePrimary: #000000;
  --themeSecondary: linear-gradient(180deg, #FE458A 0%, #AB1236 100%) 0% 0%;
  --color-secondary: #A40047;
  --themeBg: #ffeeef;
  --secondary: #E54F6D;
  --white: #fff;
  --black: #000;
  --gray: #707070;
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
  --service-1: rgba(34, 255, 242, 0.12);
  --service-2: rgba(240, 255, 73, 0.19);
  --service-3: rgba(76, 72, 255, 0.13);
  --service-4: rgba(255, 104, 104, 0.1);
  --service-5: rgba(77, 252, 115, 0.1);
  --service-6: #d6fefb;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: fontMedium !important;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  margin: 0;
  font-family: fontLight !important;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
  text-align: left;
  background-color: #fff;
  overflow-x: hidden
}

[tabindex="-1"]:focus {
  outline: 0 !important;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 21.33px;
}

a {
  color: inherit !important;
  text-decoration: none !important;
}

a:hover {
  color: var(--themeBtnBg) !important;
  cursor: pointer;
}

img {
  vertical-align: middle;
  border-style: none;
}

label {
  display: inline-block;
  /* margin-bottom: 0.5rem; */
}

hr {
  color: #dedede;
}

.my-10 {
  margin-top: 5rem !important;
  margin-bottom: 5rem !important;
}

.nav {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-link {
  display: block;
  padding: 0.5rem 1rem;
  font-family: fontMedium !important;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--themeSecondary);
  transition: 500ms all;
}

/* .nav-effect:after {
  display: block;
  content: "";
  margin-top: 0.1rem;
  border-bottom: solid 3px #d0295c;
  transform-origin: 0 0;
  transform: scaleX(0.001);
  transition: transform 500ms ease-in-out;
}

.nav-effect:hover:after {
  transform: scaleX(1);
} */

.nav-link.disabled {
  color: #6c757d;
  pointer-events: none;
  cursor: default;
}

.nav-tabs {
  border-bottom: 1px solid #dee2e6;
}

.nav-tabs .nav-item {
  margin-bottom: -1px;
}

.nav-tabs .nav-link {
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  border-color: #e9ecef #e9ecef #dee2e6;
}

.nav-tabs .nav-link.disabled {
  color: #6c757d;
  background-color: transparent;
  border-color: transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #495057;
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
}

.nav-tabs .dropdown-menu {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.nav-pills .nav-link {
  border-radius: 0.25rem;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  color: #fff;
  background-color: #ed1c24;
}

.nav-fill .nav-item {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  text-align: center;
}

.nav-justified .nav-item {
  -webkit-flex-basis: 0;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  text-align: center;
}

.text-body-secondary {
  color: #707070 !important;
}

.theme-list li {
  font-size: 1.2em;
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24.063" height="21.055" viewBox="0 0 24.063 21.055"><path id="Icon_awesome-heart" data-name="Icon awesome-heart" d="M21.726,3.687a6.427,6.427,0,0,0-8.77.639l-.926.954-.926-.954a6.426,6.426,0,0,0-8.77-.639,6.748,6.748,0,0,0-.465,9.771l9.094,9.39a1.473,1.473,0,0,0,2.129,0l9.094-9.39a6.744,6.744,0,0,0-.461-9.771Z" transform="translate(0.001 -2.248)" fill="%23d62d62"/></svg>');
}

.theme-list li div {
  vertical-align: 0.1em;
  transform: translate(0em, -0.2em);
}

.theme-list li::marker {
  font-size: 0.5rem !important;
  line-height: 0.1 !important;
}

.text-theme {
  color: var(--secondary) !important;
}

.theme-nav-link {
  color: var(--black) !important;
}

.theme-nav-link-active {
  color: var(--themeBtnBg) !important;
}

.progress-main .ms-3 {
  opacity: 0;
}

.img-hover-effect:hover {
  transition: all 850ms;
  transform: scale(1.2);
}

.progress-main:hover span {
  transition: all 850ms;
  opacity: 1;
}

.progress-1 span {
  width: 10% !important;
}

.progress-2 span {
  width: 20% !important;
}

.progress-3 span {
  width: 30% !important;
}

.progress-main:hover .progress-1 span {
  transition: all 850ms;
  cursor: pointer;
  width: 100% !important;
}

.progress-main:hover .progress-2 span {
  transition: all 850ms;
  cursor: pointer;
  width: 98% !important;
}

.progress-main:hover .progress-3 span {
  transition: all 850ms;
  cursor: pointer;
  width: 95% !important;
}

.heart-counter-position {
  top: -90px;
  right: -43px;
  transform: rotate(338deg);
  z-index: -1;
  opacity: 0.3;

}

.theme-nav-link:hover {
  color: var(--themeSecondary) !important;
  transition: 500ms all;
  border-bottom: 2px solid --themeSecondary;
}

.theme-btn {
  min-width: 180px;
  padding: 5px;
  background: var(--themeSecondary);
  color: var(--white);
  font-weight: 400;
  border: 0;
  font-size: 20px;
  border-radius: 28px;
  position: relative;
  border: 2px solid var(--color-secondary);
}

.theme-btn:hover {
  transition: 500ms all;
  /* background: none; */
  color: white !important;
  /* border-color: var(--themeSecondary); */
}

.theme-btn-secondary {
  min-width: 180px;
  padding: 10px;
  background: var(--white);
  color: var(--themeSecondary);
  font-weight: 700;
  border: 0;
  border-radius: 28px;
  position: relative;
  border: 2px solid var(--themeSecondary);
}

.theme-btn-secondary:hover {
  background: var(--themeSecondary);
  color: var(--white);
  transition: 500ms all;
}


/* .theme-btn:hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50px;
  border: 2px solid #AB1236;
  background: none;
  background: var(--themeSecondary);
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  color: var(--themeSecondary);
} */

/* .theme-btn:active {
  background-color: rgba(0, 0, 0, 0.1);
} */

.theme-btn-outline {
  padding: 10px 25px;
  color: var(--themeSecondary);
  font-weight: 700;
  border: 0;
  border-radius: 28px;
  border: 1px solid var(--themeSecondary);
}

.theme-btn-outline:hover {
  transition: 250ms all;
  background: var(--themeSecondary) 1;
  color: var(--white);
  border-radius: 28px;
}

.theme-btn-outline:active {
  background-color: rgba(0, 0, 0, 0.1);
}

.theme-btn-outline.zerve {
  padding: 10px 25px;
  color: var(--color-zerve);
  font-weight: 700;
  border: 0;
  border-radius: 28px;
  border: 1px solid var(--color-zerve);
}

.theme-btn-outline.zerve:hover {
  transition: 250ms all;
  background: var(--color-zerve);
  color: var(--white);
  border-radius: 28px;
}

.owl-carousel .owl-stage {
  display: flex;
  align-items: center;
}

.theme-btn-outline.zerve:active {
  background-color: rgba(0, 0, 0, 0.1);
}

.theme-btn-outline.cosmeciety {
  padding: 10px 25px;
  color: var(--color-cosmeciety);
  font-weight: 700;
  border: 0;
  border-radius: 28px;
  border: 1px solid var(--color-cosmeciety);
}

.theme-btn-outline.cosmeciety:hover {
  transition: 250ms all;
  background: var(--color-cosmeciety);
  color: var(--white);
  border-radius: 28px;
}

.theme-btn-outline.cosmeciety:active {
  background-color: rgba(0, 0, 0, 0.1);
}

.theme-btn-outline.chemist {
  padding: 10px 25px;
  color: var(--color-chemist);
  font-weight: 700;
  border: 0;
  border-radius: 28px;
  border: 1px solid var(--color-chemist);
}

.theme-btn-outline.chemist:hover {
  transition: 250ms all;
  background: var(--color-chemist);
  color: var(--white);
  border-radius: 28px;
}

.theme-btn-outline.chemist:active {
  background-color: rgba(0, 0, 0, 0.1);
}

.theme-btn-outline.nft {
  padding: 10px 25px;
  color: var(--color-nft);
  font-weight: 700;
  border: 0;
  border-radius: 28px;
  border: 1px solid var(--color-nft);
}

.theme-btn-outline.nft:hover {
  transition: 250ms all;
  background: var(--color-nft);
  color: var(--white);
  border-radius: 28px;
}

.theme-btn-outline.nft:active {
  background-color: rgba(0, 0, 0, 0.1);
}

.theme-btn.sec-color {
  background-color: var(--themePrimary);
  color: var(--white);
  border-color: var(--themePrimary);
}

.theme-btn.sec-color:hover {
  transition: 250ms all;
  background: var(--white);
  color: var(--themePrimary);
  border-radius: 28px;
}

.counter {
  font-size: 4rem;
  font-family: fontSemiBold;
}

.counter-main {
  background-color: #f9f9f9;
  border-radius: 30px;
  padding-bottom: 0.5rem;
}

.theme-btn.sec-color:active {
  background-color: rgba(0, 0, 0, 0.1);
}

.text-clr-primary {
  color: var(--black);
}

.text-clr-secondary {
  color: var(--gray);
}

.hero-section {
  height: 100vh;
}

.hero-section-bg {
  background-image: url(../imgs/before-bgs/header-bg.png);
  background-position: unset;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: auto;
}

.section-main {
  padding: 5rem 0;
}

.section-color-bg {
  background: #ffeeef 0% 0% no-repeat padding-box;
}

.content-main.header-margin {
  margin-bottom: 1rem;
}

.content-main .hover-effect {
  opacity: 0;
}


.content-main>h1 {
  font-size: 70px;
  font-family: fontBold;
  line-height: 1;
}

.content-main>h2 {
  font-size: 50px;
  font-family: fontBold;
  font-weight: bold;
  /* line-height: 1.3; */
}

.content-main>h3 {
  font-size: 32px;
  font-family: fontBold;
}

.content-main>h5 {
  font-size: 24px;
  font-family: fontBold;
  line-height: 1.3;
}

.content-main>h6 {
  font-size: 22px;
  font-family: fontBold;
  line-height: 1.3;
}

.content-main>p {
  font-size: 19px;
  font-family: fontLight;
  font-weight: normal;
  line-height: 1.5;
}


.content-main>h2>span {
  color: var(--secondary) !important;
}


.content-main>h1>span {
  font-size: 65px;
  color: white;
  position: relative;
  font-family: fontSolid;
  display: inline-block
}

.animated-progress {
  width: 100%;
  height: 8px;
  border-radius: 50px;
  /* margin: 20px 10px; */
  background-color: #E6E6E6;
  position: relative;
}

.animated-progress span {
  height: 100%;
  display: block;
  width: 0;
  color: rgb(255, 251, 251);
  line-height: 30px;
  position: absolute;
  text-align: end;
  padding-right: 5px;
  border-radius: 50px;
}

.progress-theme span {
  background-color: var(--secondary) !important;
  position: relative;
}

.progress-theme span::after {
  content: url(../imgs/progress-heart.svg);
  position: absolute;
  top: -7px;
  transition: all 250ms;
}


/* .theme-card-body {
  position: relative;
  padding: 20px 25px 25px 25px;
  height: 370px;
  position: relative;
  background: transparent linear-gradient(180deg, #fffaf9 0%, #f6f9ff 100%) 0% 0% no-repeat padding-box;
  box-shadow: 0px 6px 10px #7f36ff12;
  border-radius: 20px;
  justify-content: center;
} */

.red-shade::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 60px;
  z-index: -1;
  background-color: #e50019;
}

.red-shade-xl::before {
  content: "";
  position: absolute;
  top: 14%;
  left: 0;
  width: 15px;
  height: 65px;
  z-index: -1;
  background-color: #e50019;
}


.theme-icon {
  margin-bottom: 1rem;
  background: var(--themeSecondary) !important;
  padding: 10px;
  border-radius: 0 13px 0 0;
  width: 50px;
}

.theme-icon:hover {
  cursor: pointer;
  border-radius: 30px;
  transition: 500ms all;
}

.svg-placement {
  position: absolute;
}

.svg-placement.plus {
  top: 200px;
  left: 50px;
}

.svg-placement.banner-animator {
  top: -210px;
  left: 170px;
  z-index: -1;
}

.svg-placement.banner-animator>lottie-player {
  width: 500px;
  height: 500px;
}

.svg-placement.plus-2 {
  top: -30px;
  right: 0px;
}


.section-two-bg {
  background-image: url(../imgs/before-bgs/section-two-banner.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.section-card-banner {
  background-image: url(../imgs/Rectangle-2.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 89px;
  padding: 35px;
}

.match-bg {
  background-image: url(../imgs/before-bgs/section-two-banner.png);
  background-repeat: no-repeat;
  border-radius: 89px;
  padding: 35px;
}

.bg-5 {
  background-image: url(../imgs/Rectangle-1.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 89px;
  padding: 35px 65px;
}

.svg-size {
  width: 50px;
  height: 50px;
}


.services {
  position: relative;
  height: auto;
  min-height: 600px;
  background-image: url(../img/newimages/bg-1.png);
  background-size: cover;
  background-position: center;
}

.development {
  position: relative;
  height: auto;
  min-height: 600px;
  background-image: url(../img/why-choose-us-bg.png);
  background-size: cover;
  background-position: center;
}


.form-control {
  display: block;
  width: 100%;
  font-family: fontMedium !important;
  height: calc(1.8em + 1rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.5;
  color: #000000 !important;
  background-color: #FFFFFF !important;
  background-clip: padding-box;
  border-radius: 1.75rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid #CE084B;
}

.form-name {
  background: url(../imgs/email-icon.svg) no-repeat scroll 14px 15px;
  padding-left: 40px;
}



.services-box {
  background: #fff;
  padding: 1.5rem;
  border-radius: 30px;
  /* box-shadow: 0px 2px 2px 1.2px rgba(0, 0, 0, 0.04); */
  box-shadow: inset 0px 0px 30px #CD094C1A;
  height: 100%;
  position: relative;
}

.about-page {
  box-shadow: none !important;
}

.features-page {
  position: relative;
  padding: 50px !important;
}

.service-underline::after {
  content: "";
  width: 50%;
  height: 5px;
  border-radius: 50px;
  background-color: var(--secondary);
  display: block;
  opacity: 0;
}

.services-box:hover {
  cursor: pointer;
  transform: translateY(-5px);
  transition: all 500ms;
  background: #B91B44 0% 0% no-repeat padding-box;
  box-shadow: inset 0px 0px 30px #CD094C1A;
  color: white !important;
}

.services-box:hover svg .change {
  fill: white;
}

.about-page:hover {
  background: #fff;
  cursor: pointer;
  color: inherit !important;
  box-shadow: inset 0px 0px 30px #CD094C1A !important;
}

/* .features-page::after {
  content: url(../imgs/before-bgs/full-of-hearts.png);
  position: absolute;
  top: 0;
  display: block;
} */

.features-page:hover {
  background-color: #fff;
  color: inherit !important;
  padding: 50px !important;
  box-shadow: inset 0px 0px 30px #CD094C1A, 0px 3px 4px #E54F6D7A !important;
}

.features-page:hover .hover-effect {
  opacity: 1;
  transition: all 500ms;
}

.about-page:hover .service-underline::after {
  opacity: 1;
  transition: 500ms all;
}


.services-box div:nth-child(1) {
  display: inline-block;
  padding: 0.7rem;
}

.services-box .services-1 {
  background-color: var(--service-1);
}

.services-box .services-2 {
  background-color: var(--service-2);
}

.services-box .services-3 {
  background-color: var(--service-3);
}

.services-box .services-4 {
  background-color: var(--service-4);
}

.services-box .services-5 {
  background-color: var(--service-5);
}

.services-box .services-6 {
  background-color: var(--service-6);
}


.align-items-normal {
  align-items: normal;
}

.before-element:before {
  display: block;
  position: absolute;
}


.before-element.string-1::before {

  /* display: none; */
  content: url(../imgs/before-elements/heart-1.png);
  z-index: -1;
  bottom: -100px;
}

.before-element.string-1-less::before {
  content: url(../imgs/before-elements/heart-1.png);
  z-index: -1;
  bottom: -390px;
}

.before-element.string-2::before {

  /* display: none; */
  content: url(../imgs/before-elements/heart-2.png);
  z-index: -1;
  bottom: -100px;
}

.before-element.string-2-less::before {
  content: url(../imgs/before-elements/heart-2.png);
  z-index: -1;
  /* bottom: 0; */
}

.before-element.stars-1::before {
  content: url(../imgs/before-elements/stars-1.png);
  position: absolute;
  top: -90px;
  left: 75px;
  z-index: -1;
}

.before-element.stars-3::before {
  content: url(../imgs/before-elements/stars-3.png);
  position: absolute;
  top: -90px;
  left: 75px;
  z-index: -1;
}

.before-element.stars-2::before {
  content: url(../imgs/before-elements/stars-2.png);
  position: absolute;
  bottom: -58px;
  right: 75px;
  z-index: -1;
}

.before-element.shade::before {
  content: "";
  background-image: url(../imgs/before-elements/shade.png);
  background-size: cover;
  background-repeat: no-repeat;
  width: 300px;
  height: 80px;
  top: -10px;
  left: -18px;
  z-index: -1;
}


/* @media screen and (max-width: 2160px) and (min-width: 1920px) {

  .before-element.string-1::before {
    top: 560px;
    left: 0;
    z-index: -1;
    width: 2157px;
    height: 498px;
  }

  .before-element.string-2::before {
    top: 508px;
    left: 0;
    width: 2157px;
    height: 500px;
  }

  .before-element.stars-1::before {
    content: url(../imgs/before-elements/stars-1.png);
    position: absolute;
    top: -90px;
    right: 1332px;
    z-index: -1;
  }

  .before-element.stars-2::before {
    content: url(../imgs/before-elements/stars-2.png);
    position: absolute;
    bottom: -58px;
    left: 1336px;
    z-index: -1;
  }



  .content-main>h1 {
    font-size: 3.2rem;
  }

  .section-two-bg {
    background-position: unset;
  }

  .section-main {
    padding: 3rem 0;
  }
} */

@media screen and (max-width: 1920px) and (min-width: 1600px) {
  /* .before-element.string-1::before {
    top: 580px;
    left: -80px;
    z-index: -1;
    width: 1999px;
    height: 498px;
  }



  .before-element.string-2::before {
    top: 540px;
    left: 0px;
    width: 1918px;
    height: 500px;
  } */

  /* .before-element.stars-1::before {
    top: -90px;
    right: 1342px;
    z-index: -1;
  }

  .before-element.stars-2::before {
    bottom: -58px;
    left: 1341px;
    z-index: -1;
  } */

  /* 
  .content-main>h1 {
    font-size: 3.5rem;
  }

  .content-main>p {
    font-size: 1rem;
  }

  .content-main>h2 {
    font-family: fontBold;
    font-size: 3rem;
  }

  .content-main>h3 {
    font-family: fontBold;
    font-size: 2.5rem;
  }

  .content-main>h4 {
    font-family: fontBold;
    font-size: 2rem;
  } */

  .subscription-card-border {
    width: 379px !important;
  }
}

@media screen and (max-width: 1600px) and (min-width: 1440px) {

  .theme-btn {
    min-width: 152px !important;
    font-size: 15px !important;
  }

  .before-element.shade::before {
    width: 210px;
    height: 60px;
  }


  .content-main>h1 {
    font-size: 50px;
  }

  .content-main>h2 {
    font-size: 38px;
  }

  .content-main>h3 {
    font-size: 32px;
  }

  .content-main>h5 {
    font-size: 20px;
  }

  .content-main>h6 {
    font-size: 20px;
  }

  .content-main>p {
    font-size: 16.3px;
  }

  .content-main>h1>span {
    font-size: 40px;
  }

  .before-element.string-1::before {
    /* display: none; */
    top: 552px;
    left: -63px;
    width: 1642px;
    height: 374px;
  }

  .before-element.string-2::before {
    /* display: none; */
    top: 466px;
    left: 0;
    width: 1582px;
    height: 410px;
  }

  .before-element.stars-1::before {
    top: -80px;
    left: 40px;
    z-index: -1;
  }

  .before-element.stars-3::before {
    top: -80px;
    left: 40px;
    z-index: -1;
  }

  .before-element.stars-2::before {
    bottom: -78px;
    left: 961px;
    z-index: -1;
  }

  .section-main {
    padding: 4rem 0;
  }

  .contact-us-bg {
    background-size: cover;
    height: auto;
  }

  .subscription-card-border {
    width: 289px !important;
  }
}

@media screen and (max-width: 1440px) and (min-width: 1366px) {

  .before-element.shade::before {
    width: 210px;
    height: 60px;
  }

  .content-main>h1 {
    font-size: 50px;
  }

  .content-main>h2 {
    font-size: 38px;
  }

  .content-main>h3 {
    font-size: 32px;
  }

  .content-main>h5 {
    font-size: 20px;
  }

  .content-main>h6 {
    font-size: 20px;
  }

  .content-main>p {
    font-size: 16.5px;
  }

  .content-main>h1>span {
    font-size: 40px;
  }


  .before-element.string-1::before {

    /* display: none; */
    top: 532px;
    left: 0px;
    width: 1439px;
    height: 374px;
  }

  .before-element.string-2::before {

    /* display: none; */
    top: 460px;
    left: 0px;
    width: 1438px;
    height: 350px;
  }

  .before-element.stars-1::before {
    top: -90px;
    right: 942px;
    z-index: -1;
  }

  .before-element.stars-2::before {
    bottom: -58px;
    left: 939px !important;
    z-index: -1;
  }
}

@media screen and (max-width: 1366px) and (min-width: 1280px) {
  .before-element.shade::before {
    width: 210px;
    height: 60px;
  }

  .content-main>h1 {
    font-size: 50px;
  }

  .content-main>h2 {
    font-size: 40px;
  }

  .content-main>h3 {
    font-size: 32px;
  }

  .content-main>h5 {
    font-size: 18px;
  }

  .content-main>h6 {
    font-size: 22px;
  }

  .content-main>p {
    font-size: 14px;
  }

  .content-main>h1>span {
    font-size: 45px;
  }

  .subscription-card-border {
    width: 250px !important;
  }

  .before-element.string-1::before {
    display: none;
  }

  .before-element.string-1-less::before {
    display: none;
  }

  .before-element.string-2::before {
    display: none;
  }

  .before-element.string-2-less::before {
    display: none;
  }

  /* .before-element.string-1::before {
    top: 532px;
    left: 0px;
    width: 1366px;
    height: 374px;
  }

  .before-element.string-2::before {
    top: 473px;
    left: -4px;
    width: 1370px;
    height: 350px;
  } */

  .before-element.stars-1::before {
    top: -90px;
    right: 910px;
    z-index: -1;
  }

  .before-element.stars-3::before {
    top: -90px;
    right: 910px;
    z-index: -1;
  }

  .before-element.stars-2::before {
    bottom: -93px;
    left: 864px !important;

    z-index: -1;
  }
}

@media screen and (max-width: 1280px) {

  .before-element.string-1::before {

    display: none;
    /* top: 502px;
    left: 0px;
    width: 1280px;
    height: 374px; */
  }

  .before-element.string-2::before {

    display: none;
    /* top: 473px;
    left: -4px;
    width: 1280px;
    height: 350px; */
  }
}

@media screen and (max-width: 1080px) and (min-width: 768px) {
  .hero-section {
    padding: 5rem 0 !important;
    height: auto;
  }

  .contact-us-bg {
    height: auto !important;
    background-size: cover !important;
  }


}

@media only screen and (max-width: 768px) {
  .theme-btn {
    font-size: 15px !important;
  }

  .bg-5,
  .section-card-banner {
    padding: 35px 25px;
    border-radius: 35px;
  }

  .before-element.shade::before {
    width: 180px;
    height: 50px;
  }

  .hero-section {
    padding: 3rem 0;
    height: auto;
  }

  .content-main>h1 {
    font-size: 40px;
  }

  .content-main>h2 {
    font-size: 30px;
  }

  .content-main>h3 {
    font-size: 32px;
  }

  .content-main>h5 {
    font-size: 24px;
  }

  .content-main>h6 {
    font-size: 22px;
  }

  .content-main>p {
    font-size: 14px;
  }

  .content-main>h1>span {
    font-size: 35px;
  }

  .before-element.string-1::before {
    display: none;
  }

  .before-element.string-2::before {
    display: none;
  }

  .before-element.stars-1::before {
    display: none;
  }

  .before-element.stars-3::before {
    display: none;
  }

  .before-element.stars-2::before {
    display: none;
  }

  .section-main {
    padding: 1.5rem 0;
  }

  .contact-us-bg {
    background-size: cover !important;
    height: auto;
  }
}

@media (max-width: 414px) {

  /* Add your CSS rules specific to screens with 414px width here */
  .section-margin {
    margin-top: 2rem;
  }
}

@media (max-width: 375px) {

  /* Add your CSS rules specific to screens with 414px width here */
  .section-margin {
    margin-top: 12rem;
  }
}

@keyframes drift {
  0% {
    transform: translateX(0px) rotate(0deg);
  }

  25% {
    transform: translateX(100px) rotate(100deg);
  }

  50% {
    transform: translateY(100px) rotate(150deg);
  }

  75% {
    transform: translateY(-50px) rotate(800deg);
  }

  100% {
    transform: translateX(0px) rotate(0deg);
  }
}

@keyframes drift1 {
  0% {
    transform: translateX(0px) rotate(0deg);
  }

  25% {
    transform: translateX(50px) rotate(100deg);
  }

  50% {
    transform: translateY(-100px) rotate(150deg);
  }

  75% {
    transform: translateY(50px) rotate(200deg);
  }

  100% {
    transform: translateX(0px) rotate(0deg);
  }
}

@keyframes drift2 {
  0% {
    transform: translateX(0px);
  }

  25% {
    transform: translateY(50px);
  }

  50% {
    transform: translateX(-100px);
  }

  75% {
    transform: translateY(50px);
  }

  100% {
    transform: translateX(0px);
  }
}

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

.navbar-theme-bg {
  background-color: #FFF1F3 !important;
}

.fixed-top.scrolled {
  background-color: #FFF1F3 !important;
  /* transition: background-color 200ms linear; */
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.05);
}

.form-group label {
  font-size: 16px;
  color: #707070;
  font-weight: normal;
}

.subscription-card {
  background-image: url(../imgs/before-bgs/subs-card.png);
  text-align: center;
  width: auto;
  min-height: 370px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 3px 12px #BCBCBC59;
  border-radius: 55px;
  position: relative;
  z-index: 1;
}

.subscription-card-border {
  position: absolute;
  z-index: -1;
  left: -26px;
  width: 309px;
  min-height: 0px;
  border: 3px solid #E54F6D;
  border-radius: 55px 25px 25px 55px;
  border-right: 0;
  opacity: 0;
}

.subscription-card:hover {
  cursor: pointer;
  transition: all 500ms;
  min-height: 450px;
}

.subscription-card:hover .subscription-card-border {

  transition: all 500ms;
  min-height: 478px !important;
  opacity: 1;
}

.bg-img {
  background-image: url(../img/newimages/3.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 50px;
  padding: 60px;
}

.contact-us-bg {
  background-image: url(../imgs/contact-us-bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 100vh;
}

.footer-bg {
  background-image: url(../imgs/footer-imgs/bg.png);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
}

.m-100 {
  margin-top: -100px;
}

.before-element.c-1 {
  background-image: url(../img/newimages/14.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 100%;
  height: 100px;
}

.position-custom-footer {
  bottom: -30%;
}

.game-card-bg {
  border-radius: 30px 30px 30px 100px;
  background-color: #f3f3f3;
  padding: 2rem;
}

.game-card-bg-inverse {
  border-radius: 30px 30px 100px 30px !important;
  background-color: #f3f3f3;
  padding: 2rem;
}

.bg-2 {
  background-image: url(../img/newimages/Rectangle\ 430.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 363px;
  padding: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bg-7 {
  background-image: url(../img/newimages/card-right-rounded.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 371px;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bg-3 {
  background-image: url(../img/newimages/Rectangle\ 440.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 30px 30px 30px 84px;
}


.accordion {
  background-color: #f9f9f9;
  border-radius: 12px;
}

.accordion-button {
  background-color: #f9f9f9;
  border-radius: 12px;
}

.fontsize {
  font-size: 15px;
}

.nav-effect {
  position: relative;
}

.nav-effect::before {
  content: url("../img/newimages/short-line.png");
  display: block;
  position: absolute;
  right: 10px;
  bottom: 50%;
  transform: scaleX(0);
  /* transition: transform 0.3s; */
  transition: all 0.5s ease-in-out;
  z-index: -1;
  transform-origin: right;
  height: 4px;
}

.nav-effect:hover::before {
  transform: scaleX(1);
}

.svg-hover:hover svg circle {
  stroke: red;
  transition: 500ms all;
}

.svg-hover:hover svg path {
  fill: red;
  transition: 500ms all;
}

.typing-demo {
  /* color: lime; */
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  animation: type 2s steps(60, end);
}

.typing-demo:nth-child(2) {
  animation: type2 3s steps(60, end);
}

.typing-demo:nth-child(3) {
  animation: type2 6s steps(60, end);
}

@keyframes type {
  from {
    width: 0;
  }
}

@keyframes type2 {
  0% {
    width: 0;
  }

  50% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@keyframes blink {
  to {
    opacity: 0;
  }
}

/* 
.cs-animate-img {
  animation: vibrate 5s ease 0s infinite normal forwards;
}

.cs-animate-img-reverse {
  animation: vibrate 5s ease 0s infinite reverse forwards;
}

.cs-animate-img-backwards {
  animation: vibrate 5s ease 0s infinite reverse backwards;
}

@keyframes vibrate {
  0% {
    transform: translate(0);
  }

  20% {
    transform: translate(-5px, 5px);
  }

  40% {
    transform: translate(-5px, -5px);
  }

  60% {
    transform: translate(5px, 5px);
  }

  80% {
    transform: translate(5px, -5px);
  }

  100% {
    transform: translate(0);
  }
} */



.bg-6 {
  background-image: url(../imgs/footer-imgs/Group\ 2226.png);
  background-position: bottom !important;
  background-repeat: no-repeat;
  background-size: cover;
}

.pink {
  color: #E54F6D;
}

.grey {
  color: #707070;
}

.regular {
  font-weight: 300;
}

.medium {
  font-weight: 400;
}

.semibold {
  font-weight: 700;
}

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