/* poppins fonts cdn */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* root settings */
:root {
  --pry-color: #ff2626;
  --light-color: #ffcece;
  --white: #ffffff;
  --black: #000000;
  --gray: #888888;
  --popping: "Poppins", system-ui;
}

/* general reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none !important;
  font-family: var(--popping);
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
  position: relative;
}

main {
  background: linear-gradient(#ff9999 0%, var(--white) 100%);
}

a {
  color: var(--black) !important;
}

header {
  background: hsl(0, 100%, 80%);
}

.pry-color {
  color: var(--pry-color);
}

.btn {
  font-size: 14px;
  line-height: 24px;
}

.h4 {
  font-weight: bold;
  font-size: 24px;
  line-height: 36px;
}

.process-heading,
.review-heading {
  font-size: 24px;
  line-height: 120%;
  font-weight: bold;
}

.process-card-heading,
.user-name {
  font-size: 24px;
  line-height: 36px;
  font-weight: bold;
}

.process-card-subtitle,
.user-nick {
  font-size: 14px;
  line-height: 24px;
  color: var(--gray);
  font-weight: 500;
}

.small-copy-text {
  font-size: 14px;
  line-height: 24px;
  font-weight: bold;
  color: grey;
}

.body-copy {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}

/* header section */
.brand-name {
  font-size: 16px;
  line-height: 24px;
}

.brand-name span {
  color: var(--pry-color);
}

.navbar--navlists a {
  color: var(--black);
  font-weight: bold;
}

.nav .active {
  color: var(--pry-color) !important;
  position: relative;
}

.nav .active::after {
  content: "";
  width: 30px;
  height: 2px;
  bottom: -10%;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  background: var(--black);
}

/* hero section */

.hero {
  padding-top: 2em !important;
}

.hero-btn {
  background: var(--light-color);
  color: var(--pry-color);
  font-size: small;
}

.hero-btn:hover {
  background: var(--light-color);
  color: var(--pry-color);
}

.hero-title {
  font-size: 30px;
  font-weight: bold;
  line-height: 140%;
}

.hero-subtitle {
  font: medium 40px/24px var(--popping);
  color: var(--gray);
}

.order-btn {
  background: var(--pry-color);
  color: var(--white);
}

.order-btn:hover {
  background: var(--pry-color);
  color: var(--white);
}
.watch-btn {
  color: black !important;
  border: none !important;
}

/* category */

.active-card {
  background: var(--pry-color);
  color: var(--white);
  box-shadow: 0 10px 32px rgb(255, 38, 38, 0.5);
  border: none !important;
}

.category--heading {
  font-size: 24px;
  font-weight: bold;
  line-height: 81px;
}

.category--card {
  border: 1px solid black;
  width: 279px;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 32px;
}

/* content */
.content-heading {
  font-size: 24px;
  line-height: 140%;
  font-weight: bold;
}

.content-desc {
  font-size: 16px;
  line-height: 24px;
  color: var(--gray);
}

/* process */
.process-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  width: 292px;
  height: max-content;
}

/* review section */
.review-comment {
  font-size: 20px;
  line-height: 120%;
  color: var(--gray);
}

.review--img-container {
  height: 356px;
  position: relative;
}

.review--img-container .pot {
  width: 100%;
  height: 100%;
}

.users-profile {
  position: absolute;
  bottom: 0;
  transform: translate(10%, 60%);
}

/* CTA */
.cta--card {
  width: 100%;
  min-height: 400px;
  background: var(--black);
  color: var(--white);
  border-radius: 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.cta--card-img-container {
  position: relative;
  top: -70px;
}

.cta--card-body {
  text-align: center;
  width: 200px;
}

.cta--card-body-heading {
  font-weight: bold;
  font-size: 24px;
  line-height: 160%;
}

/* footer */
.circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--light-color);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* mobile screen and smaller */

@media (max-width: 600px) {
  .close {
    display: none;
  }

  .menu-active .close {
    display: block;
  }

  .menu-active .open {
    display: none;
  }

  .navbar--navlists {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 40vh;
    display: block;
    background: var(--white);
    transform: translateX(-100%);
  }

  .menu-icon {
    z-index: 99;
    position: relative;
    cursor: pointer;
  }

  .nav {
    padding: 1em;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2em;
  }
  .slide-in-right {
    -webkit-animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
      both;
    animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  }

  @-webkit-keyframes slide-in-right {
    0% {
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-right {
    0% {
      -webkit-transform: translateX(1000px);
      transform: translateX(1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
    }
  }
  .slide-out-right {
    -webkit-animation: slide-out-right 0.5s
      cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
    animation: slide-out-right 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
  }

  /* animation slide-out-right */

  @-webkit-keyframes slide-out-right {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateX(1000px);
      transform: translateX(1000px);
      opacity: 0;
    }
  }
  @keyframes slide-out-right {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateX(1000px);
      transform: translateX(1000px);
      opacity: 0;
    }
  }

  /*  */
  .hero--img-container {
    margin-bottom: 2.5em;
    display: grid;
    place-content: center;
  }
}

/* tablet screen and newer */
@media (min-width: 600px) {
  /* hero section */
  .hero--img-container img {
    width: 100% !important;
    height: 100% !important;
  }

  .hero-title {
    font-size: 70px;
  }

  .category--heading,
  .content-heading,
  .process-heading,
  .review-heading {
    font-size: 54px;
    line-height: 81px;
  }

  .rectangle {
    background: var(--pry-color);
    width: 300px;
    height: 350px;
    border-radius: 20px;
    position: absolute;
    z-index: -1;
    top: -5%;
    left: -3%;
  }

  .review-comment {
    font-size: 16px;
    line-height: 200%;
  }
  /* CTA */
  .cta--card {
    flex-direction: row;
    height: 372px;
    align-items: initial;
    justify-content: center;
    align-items: center;
  }

  .cta--card-img-container {
    position: relative;
    top: 0px;
    order: 1;
  }

  .cta--card-body {
    text-align: start;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    justify-content: space-between;
    padding-left: 4.5em;
  }

  .cta--card-body-heading {
    font-weight: bold;
    font-size: 36px;
    line-height: 58px;
  }

  .cta--card-body-store-container img {
    width: 96px;
  }
}

/* media query for laptop and larger screen */

@media (min-width: 900px) {
  .hero-title {
    font-size: 76px;
  }

  .process-card--img-container {
    position: relative;
  }

  .dash {
    border: 2px dashed var(--black);
    width: 200px;
    position: absolute;
  }

  .dash-left {
    top: 50%;
    left: -150%;
  }
  .dash-right {
    top: 50%;
    right: -150%;
  }

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

  .users-profile {
    transform: translate(90%, 60%);
  }
  /* cta */
  .cta--card {
    justify-content: space-around;
  }

  .cta--card-body {
    flex-grow: 0;
  }
  .cta--card-body {
    width: 400px;
  }
  /* cta */
  .img-lg {
    transform: translateX(-20%);
  }
}