.common-para {
  color: rgba(0, 0, 0, 0.75);
  font-size: 1.625rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.26px;
  margin-bottom: 1.75rem;
}
.common-para.blue-bold{
  font-weight: 800;
  color: #0093E6;
}
.common-btn {
  border-radius: 3rem;
  border: 2px solid #fff;
  background: #000;
  box-shadow: -1px 3px 0 0 #000;
  padding: 0.938rem;
  color: #fff;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  min-width: 15.938rem;
  cursor: pointer;
  outline: none;
  text-align: center;
}
.common-btn.border-btn {
  border: 2px solid #000;
  box-shadow: none;
  background: transparent;
  color: #000;
}
.common-btn.subscribe-btn {
  color: #fff;
  box-shadow: none;
  border: none;
  padding: 1.2rem;
  background: linear-gradient(152deg, #fff -185.49%, #0092dd 94.01%),
    linear-gradient(0deg, #477bff 0%, #477bff 100%), #d5f70a;
}
.common-btn:hover {
  outline: none;
  border-color: #fff;
  color: #fff;
}
.common-btn.border-btn:hover {
  outline: none;
  border-color: #000;
  color: #000;
}
.common-sec {
  padding: 5rem 0;
  position: relative;
}
.about-us-sec {
  padding: 1rem;
}
.meet-queen-queef-sec{
  padding: 4rem 0;
}
.common-sec.world-clean-sec{
  padding-top: 12.5rem;
}
.common-head {
  position: relative;
}
.common-head h1 {
  color: #000;
  font-family: "Chicle", serif;
  font-size: 4.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 1.44px;
  margin-bottom: 0.5rem;
}
.common-head h1  span{
  color: #0093E6;
}
.common-head h1 .small-text{
  font-size: 2rem;
  color: #000;
  display: block;
  margin-bottom: 1.5rem;
}

.common-head h2 {
  color: #000;
  font-family: "Chicle", serif;
  font-size: 4.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 1.44px;
  margin-bottom: 0.5rem;
}
.common-head h2  span{
  color: #0093E6;
}
.common-head h2 .small-text{
  font-size: 2rem;
  color: #000;
  display: block;
  margin-bottom: 1.5rem;
}
.common-head h4{
  color: #000;
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.common-head .marketplace-block{
    display: block;
}
/* ----------------------------- */
.clean-puff-sec::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-60%);
  background-image: url(/public/assets/images/left-gradient.webp);
  background-repeat: no-repeat;
  background-size: contain;
  height: 32rem;
  width: 16rem;
}
.clean-puff-sec::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -5rem;
  background-image: url(/public/assets/images/right-gradient.webp);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
  height: 32rem;
  width: 14rem;
}
.roadmap-glory::after {
  content: "";
  position: absolute;
  right: 0;
  top: -12rem;
  background-image: url(/public/assets/images/right-gradient.webp);
  background-repeat: no-repeat;
  background-size: contain;
  height: 36rem;
  width: 16rem;
  background-position: right;
}
.join-clean-puff::before {
  content: "";
  position: absolute;
  left: 0;
  top: -8rem;
  background-image: url(/public/assets/images/left-gradient.webp);
  background-repeat: no-repeat;
  background-size: contain;
  height: 32rem;
  width: 16rem;
}
/* ----------------------------- */
.banner-sec {
  min-height: 50rem;
  display: flex;
  align-items: top;
  justify-content: center;
  position: relative;
  /* background: linear-gradient(270deg, #7B3E01 26.52%, #A15B00 71.24%, rgba(161, 91, 0, 0.00) 65.62%); */
  background: linear-gradient(
    270deg,
    #87ceeb 26.52%,
    #87ceeb 55.24%,
    rgba(135, 206, 235, 0) 66.62%
  );
  /* background: linear-gradient(270deg, #87CEEB 26.52%, #87CEEB 100.24%, rgba(135, 206, 235, 0.00) 100%); */
}
.banner-sec::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(
    90deg,
    #87ceeb 26.52%,
    #87ceeb 54.24%,
    rgba(135, 206, 235, 0) 65.62%
  );

  background-size: cover;
}
.banner-sec::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-image: url(../images/home-layer.webp);
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.banner-sec p {
  color: #232323;
}
.banner-sec .text-banner-end {
  text-align: end;
}
.banner-sec video {
  max-height: 50rem;
  width: 92%;
}
.banner-sec .banner-center-text {
  position: relative;
  z-index: 2;
  padding: 2rem 0;
}
.banner-sec h1 {
  color: #fff;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #000;
  font-family: "Chicle", serif;
  /* font-size: 6.375rem; */
  font-size: 5.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 1.02px;
  margin-bottom: 0.75rem;
}
.banner-sec h1 span{
  color: #0092DD;
}
.cloud-banner {
  background-image: url(../images/cloud-banner.webp);
  background-size: cover;
  width: 100%;
  margin-top: -12rem;
  z-index: 1;
  position: relative;
  padding: 3.313rem 0 1.875rem;
}
.timer-box {
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 4px 4px 0 rgba(0, 146, 221, 0.42);
  padding: 1.5rem;
  display: flex;
  /* gap: 1.5rem; */
  justify-content: space-between;
  margin-top: 2rem;
  text-align: center;
  width: 100%;
}
.timer-box p {
  color: #98dcff;
  -webkit-text-stroke-width: 1.06px;
  -webkit-text-stroke-color: #0087d9;
  font-family: "Poppins", sans-serif;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  margin-bottom: 0;
  margin-top: 0.563rem;
}
.timer-box .counter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
}
.timer-box .counter span {
  border-radius: 2.675px;
  opacity: 0.5;
  background: linear-gradient(180deg, #0092dd 0%, rgba(0, 146, 221, 0.1) 100%);
  backdrop-filter: blur(17.38949966430664px);
  color: #fff;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #05009e;
  font-family: Digital Number;
  font-size: 3.19rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding: 0.3rem;
  display: block;
  min-width: 7rem;
  text-align: center;
}
.timer-box {
  position: relative;
}
.timer-box::before {
  content: "";
  position: absolute;
  right: -4rem;
  background-image: url(../images/sparkle.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  bottom: 0;
  height: 3rem;
  width: 3rem;
}
.meet-queen-sec .inner-box {
  background-color: #0093e6;
  border-radius: 1.5rem;
  margin-top: 10rem;
  position: relative;
}
.meet-queen-sec .inner-box .queen-img {
  margin-top: -10rem;
  position: relative;
  z-index: 1;
}
.meet-queen-sec .inner-box .inner-desc {
  padding: 2rem 1rem;
}
.meet-queen-sec .inner-box h2 {
  color: #fff;
}
.meet-queen-sec .inner-box .inner-desc p {
  margin-right: 4rem;
  color: #fff;
}
.meet-queen-sec .inner-box::before {
  content: "";
  position: absolute;
  left: -4rem;
  bottom: -3rem;
  background-image: url(/public/assets/images/cloud1.webp);
  height: 15rem;
  width: 16rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 0;
  animation: UpDown 2s linear infinite;
}
.meet-queen-sec .inner-box::after {
  content: "";
  position: absolute;
  right: -1.5rem;
  top: -6rem;
  background-image: url(/public/assets/images/cloud2.webp);
  height: 10rem;
  width: 15rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 0;
  animation: UpDown2 2s linear infinite;
}

@keyframes UpDown {
  0% {
    bottom: 0;
  }
  50% {
    bottom: -2rem;
  }
  100% {
    bottom: 0;
  }
}
@keyframes UpDown2 {
  0% {
    top: -2rem;
  }
  50% {
    top: -5rem;
  }
  100% {
    top: -2rem;
  }
}

.meet-queen-sec .inner-box .common-btn {
  border-color: #fff;
  background-color: #fff;
  color: #0092dd;
}
.meet-queen-sec .inner-box .common-btn.border-btn {
    border-color: #fff;
    color: #fff !important;
    background-color: transparent;
}
/* -------------------- */
.your-puff p {
  color: #000;
}
.your-puff .pattern-back {
  position: relative;
}
.your-puff .pattern-back::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-41%, -40%);
  margin: auto;
  height: 55rem;
  width: 55rem;
  object-fit: contain;
  background-image: url(../images/pattern.webp);
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 0;
}
.your-puff .pattern-back .main-img {
  position: relative;
  z-index: 1;
}
.puff-palace-marketplace ul li p img {
  max-height: 2.2rem;
  margin-right: 0.8rem;
}
.puff-palace-marketplace ul {
  list-style: none;
  padding-left: 0;
}
.security-audit-sec{
  background-image: url(../images/security-audit.webp);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: 3rem;
  /* background: linear-gradient(0deg, rgba(0, 146, 221, 0.31) 0%, rgba(0, 146, 221, 0.31) 100%),  url(../images/security-audit.png) lightgray 0px -511.722px / 100% 353.23%; */
}
.security-audit-sec h2, .security-audit-sec p{
  color: #fff;
}
/* ------------------------------- */
.join-clean-puff .inner-box {
  background-image: url(../images/puff-resolution-back.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 4.313rem 1.5rem;
  background-color: transparent;
  border: none;
}
.join-clean-puff .common-head p {
  color: #5c5c5c;
}
.common-form input {
  border-radius: 3rem;
  border: 0.914px solid #0092dd !important;
  background: #fff;
  padding: 1.25rem 2.5rem;
  color: var(--Gray-4, #bdbdbd);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%; /* 33.6px */
  box-shadow: none !important;
  outline: none;
}

.side-img-book {
  animation: UpDown 2s linear infinite;
}

@keyframes UpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(2rem);
  }
  100% {
    transform: translateY(0);
  }
}

.up-img-book {
  animation: rotate 15s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

button,
a {
  cursor: pointer;
  display: block;
}
.privacy-sec{
  font-family: Menco_Bold;
}
.privacy-sec p.common-para {
    font-size: 1.2rem;
    line-height: 140%;
}
.privacy-sec .common-head h4{
font-size: 1.6rem;
line-height: normal;
}

@media (min-width:1400px) and (max-width:1500px){
  .banner-sec {
    min-height: 48rem;
  }
  .footer-sec-outer .footer-bottom img {
    margin-top: -2rem;
}
}
@media (max-width: 1400px) {
  .banner-sec h1 {
    font-size: 5rem;
  }
}
@media (max-width: 1200px) {
  .banner-sec {
    min-height: 42rem;
  }
.banner-sec.presale-banner-sec{
  min-height: 50rem;
}
}
@media (max-width: 991px) {
  .your-puff .pattern-back::before {
    height: 46rem;
    width: 42rem;
  }
  .meet-queen-queef-sec {
    padding: 5rem 0;
}
  .trusted-by-sec {
    margin-top: 2rem;
}
  .banner-sec h1 {
    font-size: 3.6rem;
  }
  .common-para {
    font-size: 1.5rem;
  }
  .common-btn {
    font-size: 1.25rem;
  }
  .banner-sec {
    min-height: 34rem;
  }
  .banner-sec.presale-banner-sec{
  min-height: 46rem;
}
  .banner-sec video {
    width: 100%;
  }
  .common-head h2 {
    font-size: 3.2rem;
  }
  .meet-queen-sec .inner-box .border-btn,
  .meet-queen-sec .common-btn {
    min-width: 12rem;
  }
  .meet-queen-sec .inner-box::after {
    height: 8rem;
    right: 0rem;
    width: 9rem;
  }
  .meet-queen-sec .inner-box::before {
    height: 12rem;
    width: 9rem;
  }
  .meet-queen-sec .inner-box .inner-desc p {
    margin-right: 0;
  }
  .meet-queen-sec .inner-box .queen-img {
    margin-top: -3rem;
    
  }
}
@media (max-width: 767.8px) {
  .common-para {
    font-size: 1.25rem;
  }
  .common-head h2 {
    font-size: 2.3rem;
  }
  .common-btn {
    font-size: 1rem;
  }
  .common-form input {
    padding: 0.9rem 2.5rem;
  }
  .timer-box .counter span{
    font-size: 2.8rem;
    min-width: 6rem;
  }

  .clean-puff-sec::after {
    height: 16rem;
    width: 12rem;
  }
  body,
  html {
    overflow-x: hidden !important;
  }

}
@media (max-width: 576px) {
  .common-head {
    text-align: center;
    position: relative;
    z-index: 1;
  }
  .banner-sec.presale-banner-sec{
  min-height: 34rem;
}
  .common-head .marketplace-block{
    display: inline-block;
}
  .puff-palace-marketplace ul {
    max-width: 30rem;
    margin: auto;
}
  .btns-align-mobile {
    justify-content: center;
  }
  .your-puff ul li p {
    text-align: left;
  }
  .your-puff img {
    margin-bottom: 1rem;
  }
  .roadmap-glory::after {
    z-index: 0;
    height: 24rem;
    width: 10rem;
  }
  .your-puff .pattern-back::before {
    height: 38rem;
    width: 36rem;
  }
  .common-btn {
    min-width: 12rem;
  }
  .clean-puff-sec::after {
    height: 22rem;
    width: 9rem;
  }
  .common-sec {
    padding: 4.5rem 0;
  }
  .meet-queen-sec .inner-box {
    margin-top: 5rem;
  }
  .join-clean-puff .common-head p {
    margin-bottom: 1rem !important;
  }
  .presale-banner-sec video {
    display: none;
  }
  .banner-sec .mobile-gif-img {
    display: block !important;
    margin: auto;
    width: 100%;
  }
  .banner-sec::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 40rem;
    width: 100%;
    background: linear-gradient(
      180deg,
      #87ceeb 26.52%,
      #87ceeb 63.24%,
      rgba(135, 206, 235, 0) 75.62%
    );
    background-size: cover;
    /* background: linear-gradient(270deg, #87CEEB 26.52%, #87CEEB 100.24%, rgba(135, 206, 235, 0.00) 100%); */
  }
  .btn-center .common-btn {
    margin: auto;
  }
  .roadmap-glory{
    padding-bottom: 0;
  }
  .common-head h4{
  text-align: left;
  font-size: 1.7rem;
}
.privacy-sec.meet-queen-sec .inner-box::before{
  top: auto;
  bottom: -4rem;
}
.privacy-sec.meet-queen-sec .inner-box .inner-desc{
  padding-bottom: 0;
  margin-bottom: 0 !important;
}
}
@media (max-width: 420px) {
  .banner-sec::before {
    height: 75%;
  }
}