@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");

:root {
  --body-bg: #f8feff;
  --txt-primary: #373751;
}

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

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  overflow-x: clip;
  color: var(--txt-primary);
  background: var(--body-bg);
  font: 400 1.6rem "Lato", sans-serif;
}

img {
  width: 100%;
}

h2,
h4,
p {
  margin-bottom: 0;
}

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

ul {
  list-style-type: none;
  padding-left: 0;
}

section {
  overflow-x: clip;
}

/* #########################
      utility calsses 
######################### */
.section {
  margin-bottom: 6rem;
}

/* ======================= 
          navbar
======================= */
.navbar {
  display: flex;
  min-height: 12vh;
  align-items: center;
  justify-content: space-between;
}

.logo img {
  max-width: 14rem;
}

.btn-one {
  color: #fff;
  font-size: 1.7rem;
  font-weight: 700;
  box-shadow: none;
  padding: 9px 3.2rem;
  width: max-content;
  border-radius: 9rem;
  background: #4da2ff;
  border: 2px solid #4da2ff;
  transition: background 200ms ease, color 300ms ease, box-shadow 200ms ease;
}

.btn-one:hover {
  color: var(--txt-primary);
  background: transparent;
  box-shadow: 0 3px 8px hsla(211, 100%, 65%, 0.75);
}

.btn-one.outline {
  background: transparent;
  color: var(--txt-primary);
}

.btn-one.pink {
  background: #f998cc;
  border-color: #f998cc;
}

.btn-one.pink:hover {
  background: transparent;
  box-shadow: 0 3px 8px hsla(328, 89%, 79%, 0.6);
}

/* ####### responsive navbar ####### */
@media all and (max-width: 576.9px) {
  .container {
    padding-inline: 2rem;
  }

  .navbar .btn-one {
    font-size: 1.6rem;
    padding: 7px 2.5rem;
  }
}

/* =========================
        hero section
========================= */
#hero {
  margin-top: -12vh;
  padding-top: 12vh;
  min-height: 100vh;
  background: url("../img/hero-bg.png") no-repeat left bottom;
  background-size: cover;
}

#hero .row {
  padding-top: 4rem;
  min-height: 70vh;
}

.hero-coins {
  background: linear-gradient(to right, #e8b9fa, #a9f1d2);
}

.hero-coins-row {
  gap: 2rem;
  display: flex;
  padding: 2rem 0;
  align-items: center;
  justify-content: center;
}

.hero-coins-row img {
  max-width: 3.4rem;
}

.hero-title {
  font-weight: 900;
  margin-bottom: 3rem;
  font-size: calc(3rem + 2vw);
}

.hero-title-highlight {
  background: linear-gradient(45deg,
      #4b0082,
      #8f00ff,
      #d400ff,
      #ff00c8,
      #ff1493);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  background-size: 200% auto;
  animation: textShine 5s ease-in-out infinite alternate;
}

@keyframes textShine {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

.hero-desc {
  line-height: 1.4;
  margin-bottom: 2rem;
  font-size: calc(1.6rem + 0.2vw);
}

.user-count {
  font-weight: 900;
  color: #4da2ff;
  font-size: 1.8rem;
  margin-bottom: 4rem;
}

.hero-button-wrap {
  gap: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ####### responsive hero ####### */
@media all and (min-width: 992px) {
  .hero-coins-row img {
    max-width: 4rem;
  }

  .hero-desc {
    max-width: 75%;
    line-height: 1.6;
    margin-inline: auto;
  }
}

/* =========================
        daily task
========================= */
.title-lg {
  font-weight: 800;
  margin-bottom: 1rem;
  font-size: calc(2.2rem + 0.8vw);
}

.desc {
  margin-bottom: 4rem;
  text-transform: capitalize;
  font-size: calc(1.6rem + 0.4vw);
}

.card-lg {
  padding: 4rem;
  background: #fff;
  border-radius: 1.4rem;
  box-shadow: 0px 1rem 4rem hsla(211, 100%, 65%, 0.3);
}

.card-lg-img {
  max-width: 16rem;
  min-height: 16rem;
  margin-bottom: 4rem;
  margin-inline: auto;
}

.card-lg-title {
  font-weight: 600;
  margin-bottom: 1.2rem;
}

.card-lg-desc {
  margin-bottom: 2rem;
  font-size: calc(1.4rem + 0.2vw);
}

.link-sm {
  color: #4DA2FF;
  font-weight: 600;
  font-style: italic;
}

/* ####### responsive daily task ####### */
@media all and (min-width: 992px) {
  .card-lg {
    width: 90%;
  }
}

@media all and (max-width: 991.9px) {
  .task-text-wrap {
    text-align: center;
    margin-bottom: 6rem;
  }
}

@media all and (max-width: 425.9px) {
  .card-lg-img {
    max-width: 12rem;
    min-height: 8rem;
  }
}

/* =========================
        daily cupon
========================= */
#cupon,
#referral {
  padding: 4rem 0;
  margin-top: 12rem;
  background: linear-gradient(to right, #FFFDC4, #DEEAEC);
}

.custom-row {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
}

.custom-row-img {
  max-width: 28rem;
  position: absolute;
  transform: translateY(-30%);
}

.custom-row-text {
  margin-left: 35%;
}

@media all and (max-width: 991.9px) {
  .custom-row-text {
    margin-left: 48%;
  }
}

@media all and (max-width: 767.9px) {
  .custom-row {
    flex-direction: column;
  }

  .custom-row-img {
    max-width: 22rem;
    transform: none;
    position: static;
    margin: -14rem 0 4rem;
  }

  .custom-row-text {
    margin-left: 0;
    text-align: center;
  }
}

/* =========================
        micro jobs
========================= */
.card-md {
  gap: 2rem;
  display: flex;
  padding: 3rem 2rem;
  margin-bottom: 3rem;
  align-items: center;
  background: #fff;
  border-radius: 1.4rem;
  justify-content: center;
  box-shadow: 0px 1rem 4rem hsla(211, 100%, 65%, 0.3);
}

.card-md-img {
  max-width: 10rem;
}

.card-md-title {
  font-weight: 600;
  font-size: calc(1.6rem + 0.3vw);
}

.custom-row-text.refer {
  order: 2;
  margin-left: 0;
}

.custom-row-img.refer {
  order: 1;
  right: 0;
}

/* ####### responsive card lg ####### */
@media all and (max-width: 991.9px) {
  .card-md {
    flex-wrap: wrap;
  }
}

@media all and (max-width: 767.9px) {
  .card-md-title {
    font-size: calc(1.6rem + 0.2vw);
  }
}

@media all and (min-width: 768px) {
  .card-md {
    width: 96%;
  }

  .custom-row-text.refer {
    padding-right: 45%;
  }
}

@media all and (max-width: 425px) {
  .card-md {
    flex-direction: column;
  }

  .card-md-img {
    max-width: 7rem;
  }
}

/* =========================
          footer
========================= */
#footer {
  color: #fff;
  padding: 8rem 0;
  background: #2F344B;
}

.title-sm {
  margin-bottom: 1.6rem;
  font: 600 1.7rem 'Lato';
}

.footer-list li:not(:last-child) {
  margin-bottom: 1rem;
}