/* @import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Pacifico&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Pacifico&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap'); */
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Pacifico&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap");

*,
html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

:root {
  /* Colors */
  --pale-rose: #ffbaba;
  --blue: #1c7ed6;
  --black: #17181b;
  --white: #fff;
  --light-gray: #f8f9fa;
  --medium-gray: #d3cce3;
  --dark-gray: #495057;
  --imperial-prier: #222f3e;

  /* font-size */
  --font-size-body--sm: 1.4rem;
  --font-size-body: 1.6rem;

  /* gradient */
  --blue-gradient: linear-gradient(to left, #00d2ff, #3a7bd5);
  /* Font-weight */
  --semi-bold: 500;

  /* shadows */
  --soft-shadow--sm: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  /* radius */
  --radius--sm: 0.7rem;

  /* section padding */
  --padding--sections: 0 21.3;
}

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

body {
  font-family: "Nunito Sans", sans-serif;
  overflow-x: hidden;
}

/* =============================
Contact Top
============================= */
.contact-top {
  padding: var(--padding--sections);
  width: 100%;
  background: var(--light-gray);
}

.contact-top .container-wrapper {
  margin: 0 auto;
  padding: 0.8rem 0;
  justify-content: flex-end;
}

.contact-top-item p {
  font-size: var(--font-size-body--sm);
}

.contact-top-item {
  margin-right: 2.8rem;
}

.contact-top-item:not(:last-child) {
  padding-right: 2.5rem;
  border-right: 1px solid var(--black);
}

.contact-top-item p i {
  color: var(--blue);
  margin-right: 0.8rem;
}

/* =============================
Slideshow
============================= */
.slideshow-wrapper {
  width: 100%;
  height: 72vh;
  height: 92vh;
  position: relative;
  background: var(--black);
}

.slideshow-container {
  position: relative;
  z-index: 200;
  clip-path: polygon(0 0%, 100% 0%, 100% 75.8%, 0 100%);
}

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  background: var(--black);
  display: flex;
  align-items: center;
  transition: opacity 0.5s;
}

.slide .container-wrapper {
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
}

.slide img {
  width: inherit;
  height: inherit;
  object-fit: cover;
  opacity: 0.6;
}

.arrows-visibility {
  opacity: 0;
}

.control:hover {
  opacity: 1;
}

.control {
  position: absolute;
  top: 50%;
  width: 5.4rem;
  height: 11.3rem;
  transform: translateY(-50%);
  background: var(--light-gray);
  z-index: 100;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s linear;
}

.left-arrow {
  left: 0;
}

.right-arrow {
  right: 0;
}

.line {
  width: 0.24rem;
  height: 2.8rem;
  background: var(--light-gray);
}

.line-1 {
  transform: rotate(20deg) translateY(0.35rem);
}

.line-2 {
  transform: rotate(-20deg) translateY(-0.35rem);
}

.line-3 {
  transform: rotate(-20deg) translateY(0.35rem);
}

.line-4 {
  transform: rotate(20deg) translateY(-0.35rem);
}

.play-pause {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
}

.play-pause i {
  color: var(--white);
  font-size: 5rem;
}

.slide-1 {
  /* background: linear-gradient(#1c7ed6,#00d2ff), url('../images/hero/hero-01-min.jpg') no-repeat center center/cover;
  background-blend-mode: multiply; */
  background: linear-gradient(#1c7ed6, #00d2ff),
    url("../images/wcu-bg-min.jpg") no-repeat center center/cover;
  background-blend-mode: multiply;
}

.slide-2 {
  background: linear-gradient(#1c7ed6, #00d2ff),
    url("../images/wcu-bg-min.jpg") no-repeat center center/cover;
  background-blend-mode: multiply;
}

.slide-3 {
  background: linear-gradient(#1c7ed6, #00d2ff),
    url("../images/bottle-plant.jpg") no-repeat center center/cover;
  background-blend-mode: multiply;
}

.slide h2 {
  font-weight: 400;
  font-style: normal;
}
.slide h2 span {
  font-weight: 400;
  font-style: normal;
}

/* =============================
Hero
============================= */
.navigation {
  padding: 0 21.3;
  margin: 0 auto;
  max-width: 124rem;
  height: 15rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.nav-contact-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-contact-wrapper .nav-contact-item:not(:last-child) {
  margin-right: 1.6rem;
  border-right: 1px solid var(--dark-gray);
}

.nav-contact-item:last-child i {
  font-size: 1.6rem;
  color: var(--black);
}

.nav-contact-item {
  display: flex;
  align-items: center;
  padding-right: 1.6rem;
}
.nav-contact-item--i i {
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-contact-item--i i:not(:last-child) {
  margin-right: 2.2rem;
}

.nav-contact-item span {
  font-size: 1.4rem;
  font-weight: 800;
}

.nav-contact-item p {
  text-align: right;
  line-height: 1.1;
  font-size: 1.5rem;
  margin-right: 1.2rem;
}

.nav-contact-item i {
  font-size: 2.2em;
  color: var(--black);
}

.nav-position {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.navigation--new {
  width: 100vw;
  display: flex;
  height: 4.8rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  background: rgba(33, 37, 41, 0.693);
  border-bottom: 1px solid rgba(241, 243, 245, 0.842);
  position: absolute;
  z-index: 300;
  backdrop-filter: blur(20px);
}

.navigation--new .nav-wrapper--new .nav-link {
  text-decoration: none;
  font-size: 1.4rem;
  padding: 1rem;
  flex: 1;
  color: var(--light-gray);
  font-weight: 400;
}

.navigation--new .container-wrapper {
  margin: 0;
}

.logo {
  width: 19.7rem;
  width: 25.8rem;
}

.nav-wrapper {
  display: block;
  justify-content: flex-end;
}

.nav-wrapper--new {
  width: 100%;
  display: block;
  justify-content: flex-end;
}

.nav-wrapper .nav-link {
  text-decoration: none;
  font-size: 2rem;
  padding: 1rem;
  flex: 1;
  color: var(--black);
  font-weight: 700;
}

.nav-wrapper .nav-link:hover {
  background: var(--black);
}

.hero-section {
  height: 88vh;
  display: flex;
  padding: var(--padding--sections);
  align-items: flex-start;

  background: rgba(200, 214, 229, 0.511) url("../images/bottle-plant.jpg")
    no-repeat center center/cover;
  background-attachment: fixed;
  background-blend-mode: lighten;
}

.hero-left {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  backdrop-filter: blur(12px);
  padding: 3.8rem;
}

.lead-text {
  font-size: 2.8rem;
  margin-bottom: 11.5rem;
  color: var(--dark-gray);
}

/* =============================
Promotion Timer
============================= */

.container {
  width: 100%;
  height: 11.8vh;
  background: var(--black);
  position: relative;
}

.countdown-wrapper {
  width: 100%;
  position: absolute;
  top: 15%;
  text-align: center;
  color: var(--light-gray);
  display: flex;
  justify-content: center;
  align-items: center;
}

.countdown-wrapper h1 {
  font-size: 1.4rem;
  font-weight: 400;
  text-transform: uppercase;
}

.countdown {
  display: flex;
  justify-content: center;
}

.countdown div {
  width: 5rem;
  height: 5rem;
  background: linear-gradient(
    to bottom,
    rgba(61, 58, 58, 0.9) 50%,
    rgba(99, 93, 93, 0.9) 0
  );
  margin: 0 0.1rem 0.12rem 0.4rem;
  font-size: 1.6rem;
  font-weight: 400;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: var(--soft-shadow--sm);
  position: relative;
}

.countdown div::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0.12rem;
  background-color: #17181b;
}
.countdown div::after {
  content: attr(data-content);
  font-size: 0.8rem;
  font-weight: 400;
  position: absolute;
  bottom: -2rem;
}

/* =============================
Simple
============================= */
.made-simple {
  padding-top: 15rem;
  padding-bottom: 18rem;
  background: url("../images/PrivateLabel/white-bottles.jpg") no-repeat center
    center/cover;
  height: 90vh;
}

.made-simple-item-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 7rem;
}
.made-simple-item {
  width: 23.8%;
  margin: 3rem;
}

.made-simple-item ul {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.made-simple-item ul li {
  margin-bottom: 0.8rem;
  backdrop-filter: blur(20px);
  padding: 1.2rem 3rem;
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  border-radius: 100px;
  color: var(--dark-gray);
}

.made-simple-item ul li i {
  color: #f03e3e;
  margin-right: 1.2rem;
  font-size: 2rem;
}

.heading-container {
  width: 100%;
}

.made-simple h1 {
  font-size: 6.4rem;
  text-align: center;
  text-transform: capitalize;
  font-weight: 600;
  line-height: 1.1;
  color: var(--black);
  letter-spacing: 0.1px;
  margin-bottom: 1.8rem;
}

.made-simple span {
  font-size: 3.8rem;
  text-align: center;
  text-transform: capitalize;
  font-weight: 400;
  color: var(--dark-gray);
}

.made-simple p {
  font-size: 1.8rem;
  text-align: center;
  text-transform: capitalize;
  font-weight: 300;
  color: var(--dark-gray);
  margin-bottom: 5.8rem;
  width: 58%;
}

/* =============================
Callouts
============================= */

.callouts {
  width: 100%;
}

.callouts .container-wrapper {
  margin-top: 0;
  margin-bottom: 0;
}

.callouts-item-container {
  height: 16.09rem;
  align-items: center;
  width: 100%;
  display: flex;
  background: var(--light-gray);
  box-shadow: var(--soft-shadow--sm);
  border-radius: 1rem;
}

.callouts-item {
  height: 14rem;
  flex: 1;
  position: relative;
  padding: 3rem;
  display: flex;
  align-items: center;
}

.callouts-item-border {
  height: 1.8rem;
  width: 0.2rem;
  border-radius: 100px;
  background: var(--black);
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  position: absolute;
  z-index: 200;
}

.callouts-item p {
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  margin-right: auto;
}

.callouts-item i {
  position: absolute;
  bottom: 2rem;
  right: 1.8rem;
  font-size: 2rem;
  background: var(--blue);
  color: var(--white);
  padding: 0.8rem;
  border-radius: 50%;
  align-self: flex-end;
}

.callouts-icon {
  width: 7rem;
}

.callouts-icon--2 {
  width: 7.5rem;
}

.callouts-icon--3 {
  width: 8rem;
}

.callouts-icon--4 {
  width: 8rem;
}

/* =============================
Our Company
============================= */
.our-company {
  padding: 18rem 0;
  position: relative;
  height: auto;
}

.our-company p {
  font-size: 2.4rem;
  font-weight: 100;
}

.our-company .container-wrapper {
  display: flex;
  flex-direction: row !important;
  position: relative;
  height: auto;
}
.our-company .container-wrapper .left-please {
  width: 20%;
}

.our-company-content {
  display: flex;
}

.about-left {
  width: 51%;
  display: flex;
  align-items: center;
  gap: 3rem;
}

.about-left--2 {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 3rem;
}

.about-right {
  width: 48%;
}

.our-company-text-wrapper {
  width: 100%;
  height: auto;
  /* width: 61.1rem; */
  padding: 5.8rem 4rem;
  background: var(--white);
  border-radius: 4rem;
  position: static;
  /* top: -18rem; */
}

.our-company-images-wrapper {
  position: relative;
  width: 48%;
}
.our-company-images-wrapper p {
  position: absolute;
  bottom: -23rem;
  background: #000;
  color: #fff !important;
  width: 40rem;
  padding: 1rem;
  font-size: 1.4rem;
  right: -90rem;
}

.company-image--01 {
  width: 40rem;
  width: 43.8rem;
  position: absolute;
  right: -60rem;
  top: -40rem;
  /* border-radius: 4rem; */
}
.company-image--02 {
  width: 40rem;
  width: 43.8rem;
  position: absolute;
  right: -72rem;
  top: -12rem;
  /* border-radius: 4rem; */
}

/* =============================
Years
============================= */
.years {
  padding-top: 30rem;
  padding-bottom: 13rem;
}

.years .container-wrapper {
  justify-content: space-between;
}

.years-left h1 {
  font-size: 32.2rem;
  letter-spacing: -31px;
  font-weight: 300;
  background: url("../images/colorful.png") no-repeat center center/cover;
  background-attachment: fixed;
  background-clip: text;
  position: relative;
  color: transparent;
}

.years-left h1 span {
  position: absolute;
  font-size: 8.2rem;
  top: 30%;
  right: -8%;
}

.years-right {
  width: 40%;
}

.years-item {
  border: 1px solid var(--black);
}

.years-bullet-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 8rem;
  height: 8rem;
  background: linear-gradient(#d3cce3, #e9e4f0);
  border-radius: 50%;
  font-size: 10rem;
  line-height: 0;
}

.years-item p {
  font-size: 1.8rem;
}

/* =============================
Jar
============================= */
.jar {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.jar-container {
  height: 100%;
  width: 20vw;
  border-bottom-right-radius: 50rem;
  border-bottom-left-radius: 50rem;
  position: relative;
}

.jar-image-wrapper {
  width: 42rem;
  height: 42rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(16px);
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(#d3cce3, #e9e4f0);
  border: 0.4rem solid var(--light-gray);
  border-radius: 5rem;
  border-radius: 50%;
  box-shadow: var(--soft-shadow--sm);
}

.jar-image {
  width: 80%;
  opacity: 0.62;
}

/* bullets */

.bullet {
  position: absolute;
  padding: 2rem;
  font-size: 2.6rem;
  color: var(--black);
}

.bullet-content {
  position: relative;
  width: 40rem;
}

.bullet-content i {
  color: var(--white);
  background: #1c7ed6;
  padding: 1.4rem;
  border-radius: 50%;
  position: absolute;
  left: -8rem;
  font-size: 2.4rem;
  top: 50%;
  transform: translateY(-50%);
}

.bullet-01 {
  left: -40%;
  top: 0;
}

.bullet-02 {
  left: -60%;
  top: 45%;
}

.bullet-03 {
  left: -40%;
  top: 80%;
}

.bullet-04 {
  left: 15%;
  top: -30%;
}

.bullet-05 {
  left: 120%;
  top: 0%;
}

.bullet-06 {
  left: 130%;
  top: 45%;
}
.bullet-07 {
  left: 117%;
  top: 80%;
}

/* =============================
Two Worlds
============================= */
.two-worlds {
  height: 90vh;
  background: var(--blue);
  position: relative;
}

.two-worlds--2-top {
  padding-top: 20rem;
  display: flex;
  align-items: flex-start;
}

.two-worlds--2-top h2 {
  font-size: 5.6rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 5rem;
  position: relative;
  z-index: 300;
}

.container-wrapper h2 {
  /* font-size: 5.6rem; */
  font-size: 7.2rem;
  font-size: 6.4rem;
  font-family: "Red Hat Display", sans-serif;
  font-style: normal;
  line-height: 1.2;
  margin-bottom: 5rem;
  position: relative;
  z-index: 300;
  color: var(--white);
}

.container-wrapper .underline-wrapper {
  position: relative;
}

.container-wrapper .underline {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

.two-worlds--2 {
  height: 82vh;
  background: linear-gradient(
      to bottom,
      rgba(222, 226, 230, 0.834),
      rgba(134, 142, 150, 0.519)
    ),
    url("../images/Face-2-bg.jpg") no-repeat center center/cover;
  background-blend-mode: saturation;
  position: relative;
}

.two-worlds-container {
  position: absolute;
  bottom: -12%;
  left: 50%;
  transform: translateX(-50%);
  width: 70vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.formula-container {
  width: 100%;
  height: 30rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.formula-image-container {
  width: 30rem;
  height: 30rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 20%;
}

.formula-image {
  width: 100%;
}

.formula-left {
  position: absolute;
  background: var(--light-gray);
  font-weight: 700;
  font-size: 4rem;
  left: -50%;
  top: 5%;
  padding: 2rem;
}

.formula-center {
  position: absolute;
  color: var(--black);
  font-weight: 700;
  font-size: 4rem;
  left: 50%;
  border-radius: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 2rem;
  width: 7rem;
  height: 7rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.formula-right {
  position: absolute;
  background: var(--light-gray);
  font-weight: 700;
  font-size: 4rem;
  right: -50%;
  bottom: 5%;
  padding: 2rem;
}

.two-worlds-container--2 {
  width: 124rem;
  display: flex;
  justify-content: space-evenly;
  margin: 0 auto;
  align-items: center;
}

.two-worlds-item {
  width: 48%;
  height: 74rem;
  background: var(--white);
  box-shadow: var(--soft-shadow--sm);
}

.two-worlds-item--2 {
  width: 34%;
  height: 44rem;
  background: var(--white);
}

.two-worlds-item-cta {
  width: 48%;
  height: 74rem;
  background: linear-gradient(#d3cce3, #e9e4f0);
  box-shadow: var(--soft-shadow--sm);
  position: relative;
}
.two-worlds-item-cta h2 {
  font-size: 9.2rem;
  letter-spacing: -4px;
  font-weight: 500;
}

.two-worlds-item-cta .center p {
  font-size: 1.8rem;
}

.two-worlds-item-cta .center {
  text-align: center;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.two-worlds-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50rem;
}

.two-worlds__image-container {
  width: 100%;
  height: 37rem;
  background: var(--black);
  margin-bottom: 2.8rem;
}

.two-worlds-container-content {
  padding: 3rem;
  font-size: 1.6rem;
  line-height: 1.6;
  background: var(--black);
}
.two-worlds-container-content p.subtitle {
  font-size: 1.4rem;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 2rem;
}
.two-worlds-container-content h3 {
  font-size: 2.6rem;
  line-height: 1.2;
}

.two-worlds-container-content p {
  margin-bottom: 3rem;
}

.two-worlds-link {
  text-decoration: none;
  border: 1.7px solid var(--black);
  border-radius: 1.5rem;
  padding: 1.2rem;
  color: var(--black);
}
/* =============================
WCU - Why Choose Us
============================= */

.wcu-section {
  background: url("../images/wcu-bg-min.jpg") no-repeat center center/cover;
  padding: 8rem;
}

.wcu__content-wrapper {
  padding: 2rem;
  align-self: center;
}
.wcu__content-wrapper .h3 {
  margin-bottom: 2rem;
  text-transform: capitalize;
}
.wcu__content-wrapper ul {
  list-style: none;
  margin-bottom: 2rem;
}

.wcu__content-wrapper ul i {
  margin-right: 0.8rem;
  background: var(--blue);
  color: #fff;
  padding: 0.5rem;
  border-radius: 50%;
}

.wcu__content-wrapper ul li {
  font-size: 1.8rem;
  text-transform: capitalize;
  margin-bottom: 1.2rem;
  font-weight: 700;
}

.hero-left ul {
  list-style: none;
  margin-bottom: 2rem;
}

.hero-left ul i {
  margin-right: 0.8rem;
  background: var(--blue);
  color: #fff;
  padding: 0.5rem;
  border-radius: 50%;
}

.hero-left ul li {
  font-size: 1.8rem;
  text-transform: capitalize;
  margin-bottom: 1.2rem;
  font-weight: 700;
}

.hero-left h1 {
  line-height: 1.1;
  font-size: 4.8rem;
}

.hero-left h1 span {
  font-size: 1.8rem;
  color: orangered;
}

.hero-title-container {
  width: 100%;
}

/* =============================
How to Get Started
============================= */
.how-to-get-started,
.faq-section {
  padding: 12rem 0;
  margin-top: -20rem;
}

.how-to-get-started .heading-container {
  width: 100%;
  margin-bottom: 40rem;
  margin-bottom: 7.8rem;
  width: 100%;
  max-width: 124rem;
}

.how-to-get-started .heading-container h1 {
  font-size: 4rem;
  position: relative;
  z-index: 40;
}

.how-to-get-started .heading-container h1 {
  font-size: 4.6rem;
  color: var(--black);
  font-weight: 900;
  line-height: 0.94;
  text-transform: uppercase;
  letter-spacing: 9.5px;
}

.how-to-get-started .heading-container h1 span {
  font-size: 4.2rem;
  font-weight: 100;
  text-transform: capitalize;
  letter-spacing: 0.4px;
}

.how-to-get-started .h3 {
  width: 100%;
  margin-bottom: 5rem;
  font-size: 4.8rem;
}

.get-started__item {
  width: 33.33%;
  padding: 2rem;
}

.get-started-card {
  /* background: #e7f5ff; */
  width: 100%;
  min-height: 35rem;
  padding: 3rem;
  position: relative;
  border-radius: var(--radius--sm);
  /* clip-path: polygon(10% 50%,0 0%, 80% 0, 100% 50%, 80% 100%, 0% 100%); */
  /* 1,2,3,4 */
  /* border-bottom: 1pax solid black; */
  border-radius: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.get-started-card-border {
  width: 0.2rem;
  border-radius: 100px;
  height: 4rem;
  background: #000;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.gs-icon--01 {
  width: 12rem;
}
.gs-icon--02 {
  width: 12rem;
}
.gs-icon--03 {
  width: 12rem;
}

.get-started-card__image-container {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  position: absolute;
  top: -7%;
  left: 30%;
  transform: translateX(-50%);
}

.get-started-icon-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.step-icon {
  position: absolute;
  left: 0;
  top: 55%;
  transform: translate(-50%, -50%);
  width: 12rem;
}

.get-started-card-content {
  padding-top: 0rem;
}

.get-started-card-content h3 {
  width: 100%;
  font-size: 2.8rem;
  line-height: 1;
  text-align: left;
  margin-bottom: 2rem;
}

.get-started-card-content p {
  font-size: 1.54rem;
  font-weight: 300;
  line-height: 1.4;
}

/* =============================
Our Company
============================= */

.our-company {
  /* background: #dfe6e9; */
  background-blend-mode: multiply;
  margin-top: -28rem;
  padding-top: 44rem;
  position: relative;
}

.valerie-ceo {
  top: -5rem;
  /* border-radius: 50%; */
  left: 24rem;
  /* position: absolute; */
  width: 18rem;
  /* opacity: .5; */
  z-index: 30;
}

.jude-ceo {
  top: -5rem;
  /* border-radius: 50%; */
  left: 48rem;
  /* position: absolute; */
  width: 18rem;
  z-index: 30;
}

.ceo-image-container {
  width: 18rem;
  height: 18rem;
  position: relative;
}

.ceo-image-container--01 {
  background: url("../images/CEO-Jude.jpg") no-repeat center center/cover;
}

.ceo-image-container--01::before {
  position: absolute;
  bottom: -2rem;
  left: 0;
  content: "Jude Farjami ";
  font-weight: 800;
}

.ceo-image-container--01::after {
  position: absolute;
  bottom: -3.4rem;
  left: 0;
  content: "President, CEO";
}

.ceo-image-container--02 {
  background: url("../images/CEO-valerie.jpg") no-repeat center center/cover;
  margin-top: 8rem;
}

.ceo-image-container--02::before {
  position: absolute;
  bottom: -2rem;
  left: 0;
  content: "Valerie D. ";
  font-weight: 800;
}

.ceo-image-container--02::after {
  position: absolute;
  bottom: -3.4rem;
  left: 0;
  content: "Cosmetic research & Developer";
}

.years-badge {
  /* clip-path: polygon(50% 0%, 100% 24%, 100% 74%, 50% 100%, 0% 74%, 0% 24%); */
  color: var(--blue);
  width: 24rem;
  height: 24rem;
  position: absolute;
  right: 40%;
  font-size: 9rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.our-company .container-wrapper {
  flex-direction: column;
}

.our-company .container-wrapper .heading-container {
  width: 100%;
  margin-bottom: 40rem;
  margin-bottom: 4.8rem;
  margin-bottom: 18.8rem;
  margin-bottom: 4.8rem;

  width: 100%;
  max-width: 124rem;
}

.our-company .container-wrapper .heading-container h1 {
  font-size: 4rem;
  position: relative;
  z-index: 40;
}

.our-company .container-wrapper .heading-container h1 {
  font-size: 4.6rem;
  color: var(--black);
  font-weight: 900;
  line-height: 0.94;
  text-transform: uppercase;
  letter-spacing: 9.5px;
}

.our-company .container-wrapper .heading-container h1 span {
  font-size: 4.2rem;
  font-weight: 100;
  text-transform: capitalize;
  letter-spacing: 0.4px;
}

.our-company h2 {
  font-size: 3.8rem;
  font-weight: 500;
}

.our-company p {
  color: var(--black);
  font-size: 2.4rem;
  font-size: 2rem;
  margin-bottom: 2.8rem;
  width: 70%;
  width: 100%;
}

/* =============================
Why
============================= */
.why {
  padding-top: 14rem;
  display: flex;
  flex-wrap: wrap;
}

.why .container-wrapper {
  margin: 1rem auto;
}

.why .container-wrapper h1 {
  font-size: 8.8rem;
  color: #b6d1d8;
  font-weight: 700;
  line-height: 0.94;
  text-transform: uppercase;
  letter-spacing: 9.5px;
}

.why .container-wrapper h1 span {
  font-size: 7.2rem;
  font-weight: 100;
  text-transform: capitalize;
  letter-spacing: 0.4px;
}

.why-bg-container {
  background: url("../images/bottle-plant.jpg") no-repeat center center/cover;
  height: 68vh;
  width: 100%;
}

.why-bg-container .container-wrapper {
  height: 100%;
  position: relative;
}

.why-image-wrapper {
  width: 37.8rem;
  height: 47.5rem;
  background: url("../images/why-face.jpg") no-repeat center center/cover;
  position: absolute;
  right: 3.3rem;
  bottom: -3rem;
  border-radius: 15px;
  z-index: 900;
}

.why-image-wrapper::after {
  content: " ";
  width: 8.8rem;
  height: 8.8rem;
  z-index: 1;
  position: absolute;
  bottom: -5rem;
  left: -4rem;
  border-radius: 50%;
  border: solid 1rem #fcc419;
}

/* =============================
Zigzag
============================= */
.zigzag {
  background: url("../images/website-bg.jpg") no-repeat center center/cover;
  background-attachment: fixed;
  /* overflow-x: hidden; */
  padding-top: 14rem;
  /* overflow: hidden; */
  position: relative;
  display: flex;
  flex-direction: column;
  border-top: 1rem solid var(--blue);
  clip-path: polygon(0 7%, 100% 3%, 100% 94%, 0 100%);
  margin-top: -30rem;
  margin-top: -60rem;
  padding-top: 40rem;
  padding-top: 70rem;
  padding-bottom: 80rem;
}

.zigzag-blur {
  height: 100%;
  width: 100%;
  backdrop-filter: blur(28px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.zigzag-container--01 {
  width: 100%;
  /* background: var(--dark-gray); */
  position: relative;
  /* height: 70vh; */
}

.zigzag .heading-container {
  width: 100%;
  /* margin-bottom: 18rem; */
  margin-bottom: 8.8rem;

  width: 100%;
  max-width: 124rem;
}

.zigzag .heading-container h1 {
  font-size: 4rem;
  position: relative;
  z-index: 40;
}

.zigzag .heading-container h1 {
  font-size: 4.6rem;
  color: var(--black);
  font-weight: 900;
  line-height: 0.94;
  text-transform: uppercase;
  letter-spacing: 9.5px;
}

.zigzag .heading-container h1 span {
  font-size: 4.2rem;
  font-weight: 100;
  text-transform: capitalize;
  letter-spacing: 0.4px;
}

/* Zizag Containers */
.zigzag-container--01 {
  height: 62vh;
  display: flex;
}

.zigzag-visual-01 {
  /* position: relative; */
  position: static;
  left: -24rem;
  top: -22rem;
  width: 52rem;
  /* transform: rotate(-30deg); */
}

.zigzag-container--02 {
  position: relative;
  display: flex;
  /* padding: 16rem 0; */
  padding: 6rem 0;
}

/* .zigzag-container--02  .zigzag-title-container {
  margin-left: auto;

} */

.zigzag-visual-02 {
  position: relative;
  /* top: 122rem;
  right: 25%; */
  /* top: 127rem; */
  /* display: none; */
  /* right: -67.2%; */
  /* transform: translate(-50%, -50%); */
  width: 48.8rem;
  /* z-index: 30; */
}

.zigzag-sizes-wrapper {
  display: flex;
  flex-wrap: wrap;
  padding: 2rem;
  margin-top: 4rem;
}

.zigzag-container--02 p.size-pill {
  background: #fff;
  color: #000;
  font-weight: 300;
  font-size: 1.4rem;
  padding: 1.4rem 2.8rem;
  margin: 0.2rem;
  border-radius: 2.8rem;
  box-shadow: var(--soft-shadow--sm);
}
.zigzag-container--02 p.sizes-title {
  width: 100%;
  margin-bottom: 1.8rem;
}

.zigzag-container--03 {
  position: relative;
  /* background: #1c7ed6;  */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 48.8rem 0;
  padding-bottom: 0;
}

.zigzag-shape--03 {
  border: 4rem solid var(--light-gray);

  height: 32.2rem;
  width: 32.7rem;
  height: 10.8rem;
  width: 22.7rem;
  transform: rotate(Odeg) !important;
  /* position: absolute; */
  left: -16rem;
  bottom: 0;
  border-radius: 100rem;
}

.zigzag-container--033 {
  position: relative;
  width: 80%;
  width: 100%;
  justify-content: space-between;
  padding: 22.8rem 0;
  padding-bottom: 0;
}

.zigzag-shape--07 {
  height: 32.2rem;
  width: 32.7rem;
  height: 10.8rem;
  width: 100%;
  transform: rotate(Odeg) !important;
  /* position: absolute; */
  left: -16rem;
  bottom: 0;
  border-radius: 100rem;
}

.zigzag-container--07 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.8rem 0;
  padding-bottom: 0;
}

.zigzag-shape--033 {
  height: 32.2rem;
  width: 32.7rem;
  height: 10.8rem;
  width: 100%;
  transform: rotate(Odeg) !important;
  left: -16rem;
  bottom: 0;
  border-radius: 100rem;
}

.zigzag-container--04 {
  position: relative;
  display: flex;
  padding: 42rem 0;
  padding-bottom: 12rem;
  justify-content: space-between;
}

/* .zigzag-container--04  .zigzag-title-container { */
/* margin-left: auto; */

/* } */

.zigzag-title-container--04 {
  width: 48.5%;
}

.zigzag-container--07 {
  position: relative;
  display: flex;
  padding: 2rem 0;
  justify-content: space-between;
}

/* .zigzag-container--04  .zigzag-title-container { */
/* margin-left: auto; */

/* } */

.zigzag-title-container--07 {
  width: 48.5%;
}

.zigzag-slide-box--4-1 {
  width: 31.8rem;
  border-radius: 2rem;
  box-shadow: var(--soft-shadow--sm);
  border: 0.8rem white solid;
  position: absolute;
  right: 1.8rem;
  bottom: 18rem;
}

.zigzag-slide-box--4-2 {
  width: 30rem;
  border-radius: 2rem;
  box-shadow: var(--soft-shadow--sm);
  border: 0.8rem white solid;
  right: -23rem;
  bottom: 7.8rem;
  position: absolute;
}
.zigzag-slide-box--4-3 {
  width: 28rem;
  width: 30rem;
  border-radius: 2rem;
  box-shadow: var(--soft-shadow--sm);
  border: 0.8rem white solid;
  right: -23rem;
  bottom: 7.8rem;
  position: absolute;
}

.zigzag-slide-box--44-1 {
  border-radius: 2rem;
  box-shadow: var(--soft-shadow--sm);
  border: 0.8rem white solid;
  right: -28rem;
  bottom: 32.8rem;
  position: absolute;
  width: 34.8rem;
  height: 22rem;
}
.slide-box--01 {
  border-radius: 2rem;
  width: 100%;
  height: 100%;
  background: url("../images/bg-contactt.jpg") no-repeat center center/cover;
  position: relative;
}

.slide-box--01::after {
  content: "Valerie D.\AScientific lab";
  white-space: pre-line;
  color: var(--black);
  padding: 1rem;
  font-size: 1.2rem;
  text-transform: capitalize;
  z-index: 800;
  left: 0;
  bottom: -6.2rem;
  position: absolute;
}

.slide-box--01::after {
  content: "Valerie D.\AScientific lab";
  text-transform: capitalize;
  white-space: pre-line;
  color: var(--black);
  padding: 1rem;
  font-size: 1.2rem;
  z-index: 800;
  left: 0;
  bottom: -6.2rem;
  font-weight: 800;
  position: absolute;
}

.zigzag-slide-box--44-3 {
  right: -43rem;
  bottom: 14rem;
  border-radius: 2rem;
  box-shadow: var(--soft-shadow--sm);
  border: 0.8rem white solid;
  position: absolute;
  width: 34.8rem;
  height: 22rem;
}

.slide-box--02 {
  border-radius: 2rem;
  width: 100%;
  height: 100%;
  background: url("../images/Goggles.jpg") no-repeat center center/cover;
  position: relative;
}

.slide-box--02::after {
  content: "Valerie D.\A Clinical studies conducted";
  white-space: pre-line;
  color: var(--black);
  padding: 1rem;
  font-size: 1.2rem;
  z-index: 800;
  right: 38%;
  bottom: -6.2rem;
  font-weight: 800;
  position: absolute;
}

.zigzag-slide-box--44-4 {
  width: 34.8rem;
  height: 22rem;
  border-radius: 2rem;
  box-shadow: var(--soft-shadow--sm);
  border: 0.8rem white solid;
  right: -12rem;
  bottom: 1.8rem;
  position: absolute;
}

.slide-box--03 {
  border-radius: 2rem;
  width: 100%;
  height: 100%;
  background: url("../images/laboratory.jpg") no-repeat center center/cover;
  position: relative;
}

.slide-box--03::after {
  content: "Valerie D.\AResearch and development lab";
  white-space: pre-line;
  color: var(--black);
  padding: 1rem;
  font-size: 1.2rem;
  z-index: 800;
  right: 40%;
  bottom: -6.2rem;
  font-weight: 800;
  position: absolute;
}

.zigzag-shape--04 {
  background: #fdc830; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to left,
    #f37335,
    #fdc830
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to left,
    #f37335,
    #fdc830
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /* width: 40%;  */
  width: 43.8rem;
  height: 60rem;
  bottom: 0;
  position: relative;
  border-radius: 100rem;
}

.zigzag-shape--07 {
  width: 43.8rem;
  height: 60rem;
  bottom: 0;
  position: relative;
  border-radius: 100rem;
}

.zigzag-sizes-wrapper {
  display: flex;
  flex-wrap: wrap;
  padding: 2rem;
  margin-top: 4rem;
}

.zigzag-container--04 p.size-pill {
  background: #fff;
  color: #000;
  font-weight: 300;
  font-size: 1.4rem;
  padding: 1.4rem 2.8rem;
  margin: 0.2rem;
  border-radius: 2.8rem;
  box-shadow: var(--soft-shadow--sm);
}

.zigzag-container--04 p.sizes-title {
  width: 100%;
  margin-bottom: 1.8rem;
}

.qr-enabled-image {
  width: 50rem;
  position: absolute;
  right: 40%;
  bottom: -20rem;
}

.zigzag-slide-box--1 {
  width: 56rem;
  position: absolute;
  right: -38rem;
}

/* ZigZag Title container */
.zigzag-title-container {
  width: 48%;
  border-radius: 50px;
  position: relative;
}

.zigzag-title-container--02 {
  width: 48.5%;
  border-radius: 50px;
  position: relative;
  margin-left: auto;
}

.zigzag-container--01 h1 {
  color: var(--black);
  margin-bottom: 1.8rem;
}

.zigzag-container--01 h1,
.zigzag-container--02 h1,
.zigzag-container--03 h1,
.zigzag-container--033 h1,
.zigzag-container--04 h1,
.zigzag-container--07 h1 {
  font-family: "Caveat", cursive;
  font-optical-sizing: auto;
  font-weight: 800;
  font-size: 3.8rem;
  font-style: normal;
  color: var(--dark-gray);
  letter-spacing: -0.03rem;
  line-height: 1.1;
  margin-bottom: 1.8rem;
}

.zigzag-container--01 p,
.zigzag-container--02 p,
.zigzag-container--03 p,
.zigzag-container--033 p,
.zigzag-container--04 p,
.zigzag-container--07 p {
  font-size: 2.2rem;
  font-size: 2rem;
  font-weight: 300;
  color: var(--black);
  letter-spacing: 0.2px;
  color: var(--imperial-prier);
}

.zigzag-container--02 h1 {
  line-height: 1.2;
  margin-bottom: 1.8rem;
  margin-left: auto;
  display: inline-block;
}

.zigzag-shape {
  position: static;
}

.zigzag-shape--01 {
  width: 60%;
  bottom: 0;
}

.zigzag-shape--02 {
  height: 10.8rem;
  width: 22.7rem;
  transform: rotate(Odeg) !important;
  bottom: 0;
  border-radius: 100rem;
}

.zigzag-shape--02 {
  background: linear-gradient(
    to right,

    var(--medium-gray),
    rgba(221, 239, 187, 0.257)
  );

  height: 32.2rem;
  width: 32.7rem;
  height: 10.8rem;
  width: 22.7rem;
  transform: rotate(Odeg) !important;
  border-radius: 100rem;
}

.zigzag-position-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.zigzag-position-container--2 {
  width: 60%;
  height: 100%;
  position: relative;
}

.zigzag-cream {
  width: 24rem;
  position: absolute;
  top: 10%;
  left: 50%;
}

.zigzag-visual-011 {
  position: relative;
  left: -18rem;
  top: -10rem;
  width: 74rem;
  width: 68.5rem;
  width: 52rem;
  transform: rotate(-30deg);
}

.zigzag-visual-022 {
  position: relative;
  /* left: -18rem;
  top: 50%; */
  left: 23rem;
  top: -2%;
  transform: translate(-50%, -50%);
  width: 58rem;
  /* transform: rotate(-30deg); */
}

/* =============================
Advertisement
============================= */
.advertisement {
  height: 60vh;
  height: 72vh;
  width: 100%;
  /* background: #000; */

  position: relative;
}

.advertisement-container {
  width: 120rem;
  height: 42rem;
  height: 102rem;
  height: 82rem;
  position: absolute;
  top: -40rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border-radius: 7.8rem;
}

.advertisement-item {
  box-shadow: var(--soft-shadow--sm);
  width: 100%;
  height: 100%;
  /* background: linear-gradient(to right, #FFFFFF, #ECE9E6),
  url('../images/AdobeStock_266374871.jpeg')no-repeat center center/cover;  */
  background-blend-mode: multiply;
  border-radius: 7.8rem;

  position: relative;
}

.advertisement-bg {
  box-shadow: var(--soft-shadow--sm);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(to right, #ffffff, #ece9e6),
    url("../images/AdobeStock_266374871.jpeg") no-repeat center center/cover;
  background-blend-mode: multiply;
  border-radius: 7.8rem;
  opacity: 0.4;

  position: relative;
}

.advertisememt-blur {
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  backdrop-filter: blur(0px);
  position: absolute;
}

.advertisement-product-image {
  position: absolute;
  top: -24rem;
  left: 21%;
  transform: translateX(-50%);
  width: 52rem;
  width: 64rem;
  width: 58rem;
}
.advertisement-image {
  position: absolute;
  right: 1rem;
  z-index: 300;
  bottom: 8rem;
  width: 40rem;
}

.ad-info-container {
  position: absolute;
  /* right: 5rem; */
  left: 5rem;
  /* top: 5rem; */
  bottom: 5rem;
  display: flex;
  /* flex-direction: column; */
  width: 58%;
  width: 78%;
  gap: 3.8rem;
}

.ad-info-item {
  display: flex;
  flex-direction: column;
  width: 40%;
  gap: 1.8rem;
}

.ad-info-item h3 {
  font-size: 3.8rem;
  font-family: "Caveat", cursive;
  font-weight: 800;
  text-transform: capitalize;
}
.ad-info-item p {
  font-size: 1.5rem;
  line-height: 1.6;
  font-weight: 400;
}

.ad-info--01 {
  border-radius: 50%;
  /* position: absolute; */
  /* top: 45%; */
  /* right: 45%; */
  height: 9rem;
  width: 9rem;
  background: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1.8rem;
  color: var(--white);
}
.ad-info--02 {
  border-radius: 50%;
  /* position: absolute; */
  /* top: 45%; */
  /* right: 25%; */
  height: 9rem;
  width: 9rem;
  background: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1.8rem;
  color: var(--white);
}

.ad-info--03 {
  border-radius: 50%;
  /* position: absolute; */
  /* top: 45%; */
  /* right: 5%; */
  height: 9rem;
  width: 9rem;
  background: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1.8rem;
  color: var(--white);
}

.ad-icon {
  width: 98%;
}

.ad-message {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 14%;
  z-index: 500;
  color: var(--blue);
}

.ad-message-text {
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: 5.8rem;
  position: absolute;
  left: -12rem;
  bottom: 47%;
}

.ad-arrow {
  transform: rotate(35deg);
  width: 14rem;
  position: absolute;
  left: -12rem;
  bottom: 34%;
}

/* =============================
Since
============================= */
.since {
  background: var(--light-gray);
  padding-top: 12.8rem;
  padding-bottom: 4rem;
  position: relative;
}

.since .container-wrapper {
  margin-top: 0;
  flex-wrap: wrap;
}

.since-top-item {
  display: flex;
  gap: 8.2rem;
}

.since-top--left {
  width: 30%;
}

.since-top--left h3 {
  font-size: 1.8rem;
  line-height: 1.2;
  margin-bottom: 1.8rem;
}

.since-top--middle {
  flex: 1;
}
.since-image-container,
.since-image-container {
  width: 85%;
  height: 44rem;
  background: orangered;
  background: url("../images/bottle-plant.jpg") no-repeat center center/contain;
  border-radius: 2rem;
}

.since-top--right {
  width: 30%;
  padding-top: 2rem;
}

.item-right {
  display: flex;
  margin-bottom: 2rem;
}

.item-right .text-wrapper {
  background: var(--light-gray);
  position: relative;
}

.item-right .text-wrapper .bullet {
  height: 0.8rem;
  width: 0.8rem;
  background: orangered;
  position: absolute;
  left: -1.7rem;
  top: 1rem;
  padding: 0;
  border-radius: 50%;
}

.since-heading-wrapper {
  margin-bottom: 6rem;
}
.since-heading-wrapper h1 {
  font-size: 4.2rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.1px;
  width: 70%;
  margin-bottom: 2.8rem;
}

.item-right .text-wrapper h4 {
  font-size: 1.8rem;
  margin-bottom: 1.2rem;
}

.item-right .text-wrapper p {
  font-size: 1.4rem;
  margin-bottom: 1.2rem;
  color: var(--dark-gray);
  line-height: 1.6;
}

/* =============================
contact Form
============================= */
.form-section {
  display: flex;
  background-blend-mode: multiply;
  position: relative;
}

.form-section .container-wrapper .heading-container {
  width: 100%;
  margin-bottom: 40rem;
  margin-bottom: 7.8rem;
  width: 100%;
  max-width: 124rem;
}

.form-bg {
  width: 100%;
  height: 100vh;
  /* background: var(--blue); */
  position: absolute;
  clip-path: polygon(0% 35%, 100% 25%, 100% 100%, 0% 100%);
  z-index: -1;
}

.form-section .container-wrapper .heading-container h1 {
  font-size: 4.6rem;
  color: var(--black);
  font-weight: 900;
  line-height: 0.94;
  text-transform: uppercase;
  letter-spacing: 9.5px;
}

.form-section .container-wrapper .heading-container h1 span {
  font-size: 4.2rem;
  font-weight: 100;
  text-transform: capitalize;
  letter-spacing: 0.4px;
}

.contact-info-wrapper {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* background: url("../images/why-face.jpg")no-repeat center center/cover; */
}

.contact-info-item {
  color: var(--white);
  margin-bottom: 8.2rem;
  /* padding-left: 20rem; */
  padding: 3rem;
  width: 80%;
  /* backdrop-filter: blur(5px); */
}

.contact-info-item p.address {
  position: relative;
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 0.8rem;
  text-transform: capitalize;
  color: var(--black);
}

.contact-info-item .address i {
  position: absolute;
  top: -7.8rem;
  left: 0.2rem;
  border: 0.25rem solid var(--black);
  padding: 2rem;
  border-radius: 50%;
}

.contact-info-item:nth-child(2) p.contact-info-text,
.contact-info-item:nth-child(3) p.contact-info-text {
  color: var(--black) !important;
  position: relative;
  z-index: 300;
}

.contact-info-text {
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--black) !important;
  position: relative;
  z-index: 300;
}

.form {
  width: 45%;
  background: var(--white);
  display: flex;
  flex-wrap: wrap;
  padding: 4.3rem;
  position: relative;
  z-index: 10000;
  justify-content: space-between;
  border-radius: var(--radius--sm);
}

.form-group,
.form-group--half {
  display: flex;
  flex-direction: column;
}

.form-group {
  width: 100%;
}

.form-group--half,
.beep {
  width: 47% !important;
}

.form label {
  font-size: 1.5rem;
  margin-bottom: 0.4rem;
  font-weight: 800;
}

input,
textarea {
  border: 0;
  border: 1px solid var(--light-gray);
  background: var(--light-gray);
  padding: 1.8rem;
  border-radius: 0.5rem;
}

.form div:nth-child(2) {
  margin-bottom: 2.8rem;
}
.form div:nth-child(5) fieldset {
  border: 0;
}
.form div:nth-child(5) fieldset legend {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 0.4rem;
}

.form div:nth-child(4) {
  margin-bottom: 2.8rem;
}

.form div:nth-child(5) {
  margin-bottom: 5.8rem;
}

.form div:nth-child(7) {
  margin-bottom: 5.8rem;
}

.form div:nth-child(8) input {
  color: var(--white);
  font-size: 1.6rem;
  background: var(--blue);
  width: 45%;
}
/* =============================
FAQ
============================= */
.faq-section .h3 {
  width: 100%;
  font-size: 4.8rem;
  line-height: 1;
  margin-bottom: 3.2rem;
}

.faq-item {
  width: 100%;
}

.faq-item:not(:last-child) {
  margin-bottom: 2rem;
}

.faq-item h3 {
  font-size: 2rem;
  font-weight: 700;
}

.faq-item p {
  font-size: 1.7rem;
}
/* =============================
Footer
============================= */
.footer {
  height: 70vh;
  padding: 12rem 0;
}

.footer-col {
  flex: 1;
  color: var(--black);
}

.footer-col h3 {
  font-size: 3rem;
  font-weight: 200;
  color: var(--black);
}

.footer-col ul {
  list-style: none;
  color: var(--black);
}

.footer-col ul li a {
  color: var(--black);
  text-decoration: none;
}

.footer-col p {
  font-size: 1.4rem;
}

.footer-logo {
  width: 15rem;
  margin-bottom: 3.8rem;
}

.footer-social-icons-wrapper {
  display: flex;
  align-items: center;
  padding-top: 4rem;
}

.footer-social-icons-wrapper i {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--black);
  color: var(--blue);
  padding: 0.8rem;
  font-size: 1.8rem;
}

.footer-social-icons-wrapper i:not(:last-child) {
  margin-right: 1.4rem;
}

.about-left--2 {
  visibility: hidden;
  display: none;
}

@media (max-width: 1440px) {
  body {
    width: 100%;
  }

  .slideshow-container {
    height: 100vh;
    position: relative;
    z-index: 200;
    clip-path: polygon(0 0%, 100% 0%, 100% 90%, 0 100%);
  }

  .slideshow-wrapper {
    width: 100%;
    height: 72vh;
    height: 100vh;
    position: relative;
    background: var(--black);
  }

  .navigation {
    padding: 0 5.3rem;
    margin: 0 auto;
    max-width: 124rem;
    height: 15rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
  }

  .container-wrapper h2 {
    font-size: 4.8rem;
    font-family: "Red Hat Display", sans-serif;
    font-style: normal;
    line-height: 1.2;
    margin-bottom: 5rem;
    width: 90%;
    position: relative;
    z-index: 300;
    padding: 1.8rem;
    color: var(--white);
  }

  .zigzag-title-container {
    width: 100%;
  }

  .zigzag {
    padding: 64rem 2rem;
    clip-path: polygon(0 7%, 100% 3%, 100% 100%, 0 100%);
  }

  .zigzag-container--01 {
    display: flex;
    flex-direction: row;
    margin-bottom: 15rem;
    height: 32vh;
  }

  .zigzag-shape--01 {
    width: 70%;
    right: 0;
    bottom: 0;
    position: static;
  }

  .zigzag-visual-01 {
    position: relative;
    left: 8rem;
    top: -5.8rem;
    width: 82%;
  }

  .zigzag-container--01 h1,
  .zigzag-container--02 h1,
  .zigzag-container--03 h1,
  .zigzag-container--033 h1,
  .zigzag-container--04 h1 {
    font-family: "Caveat", cursive;
    font-optical-sizing: auto;
    font-weight: 800;
    font-size: 4.2rem;
    font-style: normal;
    color: var(--dark-gray);
    letter-spacing: -0.03rem;
    line-height: 1.1;
    margin-bottom: 1.8rem;
  }

  .zigzag-container--01 p,
  .zigzag-container--02 p,
  .zigzag-container--03 p,
  .zigzag-container--033 p,
  .zigzag-container--04 p {
    font-size: 2.2rem;
    font-size: 1.8rem;
    font-weight: 300;
    color: var(--black);
    letter-spacing: 0.2px;
    color: var(--imperial-prier);
  }

  .zigzag-visual-02 {
    position: relative;
    width: 48.8rem;
    display: none;
    visibility: hidden;
  }

  .zigzag-container--02 {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0;
    margin-top: 2rem;
    gap: 7rem;
  }

  .zigzag-slide-box--1 {
    width: 42rem;
    right: 44px;
  }

  .zigzag-title-container--02 {
    width: 100%;
    border-radius: 50px;
    position: relative;
    margin-left: 0rem;
    /* margin-top: 28.8rem; */
  }

  .zigzag-shape--02 {
    background: linear-gradient(
      to right,
      var(--medium-gray),
      rgba(221, 239, 187, 0.257)
    );
    height: 10.8rem;
    width: 100%;
    border-radius: 100rem;
  }

  .zigzag-sizes-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding: 0rem;
    margin-top: 4rem;
    justify-content: center;
  }

  .zigzag-container--033 {
    margin: 0 auto;
    width: 100%;
  }

  .zigzag-container--02 p.size-pill {
    background: #fff;
    color: #000;
    font-weight: 300;
    font-size: 1.6rem;
    padding: 1.4rem 2.8rem;
    width: auto;
    margin: 0.2rem;
    border-radius: 2.8rem;
    box-shadow: var(--soft-shadow--sm);
    text-align: center;
  }

  .callouts .container-wrapper {
    justify-content: center;
  }

  .callouts-item-container {
    /* height: 16.09rem; */
    align-items: center;
    width: 100%;
    flex-direction: row;
    display: flex;
    flex-wrap: wrap;
    height: auto;
    box-shadow: var(--soft-shadow--sm);
    border-radius: 1rem;
  }

  .callouts-item-border {
    display: none;
    visibility: hidden;
  }

  .callouts-item {
    flex-direction: row;
    align-items: center;
    text-align: center;
    flex: none;
    width: 50%;
    width: 25%;
  }

  .zigzag-container--01 p,
  .zigzag-container--02 p,
  .zigzag-container--03 p,
  .zigzag-container--033 p,
  .zigzag-container--04 p {
    font-size: 1.4rem;
    font-weight: 400;
    text-align: left;
    color: var(--black);
    letter-spacing: 0.2px;
    color: var(--imperial-prier);
    order: 2;
  }

  .callouts-icon,
  .callouts-icon--2,
  .callouts-icon--3,
  .callouts-icon--4 {
    width: 8rem;
  }

  .qr-enabled-image {
    width: 36rem;
    position: absolute;
    right: 4rem;
    bottom: -10rem;
  }

  .zigzag-container--03 {
    position: relative;
    /* background: #1c7ed6; */
    display: flex;
    /* flex-wrap: no-wrap; */
    align-items: center;
    justify-content: space-between;
    padding: 38.8rem 0;
    padding-bottom: 0;
  }

  .zigzag-title-container {
    width: 50%;
    order: 0;
  }

  .zigzag-shape--03 {
    border: 4rem solid var(--light-gray);
    height: 32.2rem;
    width: 32.7rem;
    height: 10.8rem;
    width: 30%;
    transform: rotate(Odeg) !important;
    /* position: absolute; */
    left: -16rem;
    bottom: 0;
    border-radius: 100rem;
  }

  .zigzag-container--04 {
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: no-wrap;
    padding: 28rem 0;
    gap: 12rem;
    padding-bottom: 12rem;
  }

  .zigzag-title-container--04 {
    width: 50%;
  }

  .zigzag-sizes-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0rem;
    align-items: center;
    margin-top: 4rem;
    justify-content: flex-start;
  }

  .zigzag-shape--04 {
    background: #fdc830;
    background: -webkit-linear-gradient(to left, #f37335, #fdc830);
    background: linear-gradient(to left, #f37335, #fdc830);
    width: 28%;
    height: 44rem;
    bottom: 0;
    position: relative;
    border-radius: 100rem;
  }

  .zigzag-slide-box--4-1 {
    width: 78%;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    position: absolute;
    right: 9.8rem;
    bottom: 10rem;
  }

  .zigzag-container--04 p.size-pill {
    background: #fff;
    color: #000;
    font-weight: 300;
    font-size: 1.4rem;
    padding: 1.4rem 2.8rem;
    margin: 0.2rem;
    text-align: center;
    width: auto;
    border-radius: 2.8rem;
    box-shadow: var(--soft-shadow--sm);
  }

  .zigzag-slide-box--4-3 {
    width: 72%;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    right: -5rem;
    bottom: 0.8rem;
    position: absolute;
  }

  .zigzag-container--07 {
    position: relative;
    flex-wrap: no-wrap;
    display: flex;
    padding: 2rem 0;
    justify-content: space-between;
    margin-top: 3.8rem;
  }

  .zigzag-shape--07 {
    width: 100%;
    height: auto;
    bottom: 0;
    position: relative;
    order: 1;
    border-radius: 100rem;
  }

  .zigzag-shape--07 {
    width: 100%;
    margin-top: 50rem;
    height: auto;
    bottom: 0;
    position: relative;
    order: 1;
    border-radius: 100rem;
  }

  .zigzag-slide-box--44-3 {
    width: 48%;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    right: -15rem;
    bottom: 15.8rem;
    position: absolute;
  }

  .slide-box--02::after {
    content: "Valerie D.\A Clinical studies";
    white-space: pre-line;
    color: var(--black);
    padding: 1rem;
    font-size: 1.2rem;
    font-weight: 800;
    z-index: 800;
    right: 4%;
    position: absolute;
  }
  .zigzag-slide-box--44-1 {
    width: 80%;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    right: -11rem;
    bottom: 18.8rem;
    position: absolute;
  }

  .zigzag-position-container--2 {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .zigzag-container--07 .zigzag-title-container {
    order: 1;
  }

  .zigzag-slide-box--44-1 {
    width: 48%;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    right: 2rem;
    bottom: 33.8rem;
    position: absolute;
  }

  .zigzag-slide-box--44-4 {
    width: 48%;
    height: 22rem;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    right: 1rem;
    bottom: -1.2rem;
    position: absolute;
  }

  /* .slide-box--03::after {
  content: "Research & Development Laboratory";
  color: var(--black);
  padding: 1rem;
  font-size: 1.2rem;
  z-index: 800;
  right: 73%;
  bottom: -6rem;
  position: absolute;
} */

  .slide-box--03::after {
    color: var(--black);
    padding: 1rem;
    font-size: 1.2rem;
    z-index: 800;
    right: 35%;
    width: 60%;
    position: absolute;
  }

  /* =============================
Advertisement
============================= */

  .advertisement-container {
    width: 95%;
    height: aut65vho;
    position: relative;
    top: -40rem;
    left: 0%;
    transform: translateX(0);
    background: var(--white);
    border-radius: 7.8rem;
  }

  .ad-info-container {
    flex-direction: row;
    gap: 3.8rem;
    position: absolute;
    width: 88%;
    padding: 1.8rem;
    bottom: 8.8rem;
  }

  .ad-info-item {
    width: 100%;
  }
  .advertisement {
    height: auto;
    padding: 12.8rem 0;
    position: static;
  }

  .advertisement-product-image {
    position: absolute;
    top: -31rem;
    transform: translateX(-45%);
    width: 48%;
  }

  .ad-message {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 14%;
    z-index: 500;
    color: var(--blue);
  }

  .ad-info-item h3 {
    font-size: 2.4rem;
    font-family: "Caveat", cursive;
    font-weight: 800;
    text-transform: capitalize;
  }

  .ad-info-item p {
    font-size: 1.4rem;
    line-height: 1.6;
    font-weight: 400;
  }

  .ad-icon {
    width: 78%;
  }

  .advertisement-item {
    box-shadow: var(--soft-shadow--sm);
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #ffffff, #ece9e6),
      url(../images/AdobeStock_266374871.jpeg) no-repeat center center / cover;
    background-blend-mode: multiply;
    border-radius: 3.5rem;
    position: relative;
    padding: 0rem;
  }

  .ad-message-text {
    font-family: "Caveat", cursive;
    font-weight: 700;
    font-size: 4.8rem;
    position: absolute;
    left: -7rem;
    bottom: 45%;
  }

  .advertisememt-blur {
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    backdrop-filter: blur(8px);
    position: absolute;
  }

  .about-right {
    width: 50%;
  }

  .about-left--2 {
    flex-direction: column;
    margin-bottom: 12rem;
    display: none;
    visibility: hidden;
  }

  .about-left--2 .ceo-image-container {
    width: 14.8rem;
    height: 14.8rem;
  }
}

@media (max-width: 1024px) {
  body {
    width: 100%;
  }

  .slideshow-container {
    height: 100vh;
    position: relative;
    z-index: 200;
    clip-path: polygon(0 0%, 100% 0%, 100% 90%, 0 100%);
  }

  .slideshow-wrapper {
    width: 100%;
    height: 72vh;
    height: 100vh;
    position: relative;
    background: var(--black);
  }

  .navigation {
    padding: 0 5.3rem;
    margin: 0 auto;
    max-width: 124rem;
    height: 15rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
  }

  .container-wrapper h2 {
    font-size: 4.8rem;
    font-family: "Red Hat Display", sans-serif;
    font-style: normal;
    line-height: 1.2;
    margin-bottom: 5rem;
    width: 90%;
    position: relative;
    z-index: 300;
    padding: 1.8rem;
    color: var(--white);
  }

  .zigzag-title-container {
    width: 100%;
  }

  .zigzag {
    padding: 64rem 2rem;
    clip-path: polygon(0 7%, 100% 3%, 100% 100%, 0 100%);
  }

  .zigzag-container--01 {
    display: flex;
    flex-direction: row;
    margin-bottom: 15rem;
    height: 32vh;
  }

  .zigzag-shape--01 {
    width: 70%;
    right: 0;
    bottom: 0;
    position: static;
  }

  .zigzag-visual-01 {
    position: relative;
    left: 8rem;
    top: -5.8rem;
    width: 82%;
  }

  .zigzag-container--01 h1,
  .zigzag-container--02 h1,
  .zigzag-container--03 h1,
  .zigzag-container--033 h1,
  .zigzag-container--04 h1 {
    font-family: "Caveat", cursive;
    font-optical-sizing: auto;
    font-weight: 800;
    font-size: 4.2rem;
    font-style: normal;
    color: var(--dark-gray);
    letter-spacing: -0.03rem;
    line-height: 1.1;
    margin-bottom: 1.8rem;
  }

  .zigzag-container--01 p,
  .zigzag-container--02 p,
  .zigzag-container--03 p,
  .zigzag-container--033 p,
  .zigzag-container--04 p {
    font-size: 2.2rem;
    font-size: 1.8rem;
    font-weight: 300;
    color: var(--black);
    letter-spacing: 0.2px;
    color: var(--imperial-prier);
  }

  .zigzag-visual-02 {
    position: relative;
    width: 48.8rem;
    display: none;
    visibility: hidden;
  }

  .zigzag-container--02 {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0;
    margin-top: 2rem;
    gap: 7rem;
  }

  .zigzag-slide-box--1 {
    width: 42rem;
    right: 44px;
  }

  .zigzag-title-container--02 {
    width: 100%;
    border-radius: 50px;
    position: relative;
    margin-left: 0rem;
    /* margin-top: 28.8rem; */
  }

  .zigzag-shape--02 {
    background: linear-gradient(
      to right,
      var(--medium-gray),
      rgba(221, 239, 187, 0.257)
    );
    height: 10.8rem;
    width: 100%;
    border-radius: 100rem;
  }

  .zigzag-sizes-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding: 0rem;
    margin-top: 4rem;
    justify-content: center;
  }

  .zigzag-container--033 {
    margin: 0 auto;
    width: 100%;
  }

  .zigzag-container--02 p.size-pill {
    background: #fff;
    color: #000;
    font-weight: 300;
    font-size: 1.6rem;
    padding: 1.4rem 2.8rem;
    width: auto;
    margin: 0.2rem;
    border-radius: 2.8rem;
    box-shadow: var(--soft-shadow--sm);
    text-align: center;
  }

  .callouts .container-wrapper {
    justify-content: center;
  }

  .callouts-item-container {
    /* height: 16.09rem; */
    align-items: center;
    width: 100%;
    flex-direction: row;
    display: flex;
    flex-wrap: wrap;
    height: auto;
    box-shadow: var(--soft-shadow--sm);
    border-radius: 1rem;
  }

  .callouts-item-border {
    display: none;
    visibility: hidden;
  }

  .callouts-item {
    flex-direction: row;
    align-items: center;
    text-align: center;
    flex: none;
    width: 50%;
    width: 25%;
  }

  .zigzag-container--01 p,
  .zigzag-container--02 p,
  .zigzag-container--03 p,
  .zigzag-container--033 p,
  .zigzag-container--04 p {
    font-size: 1.4rem;
    font-weight: 400;
    text-align: left;
    color: var(--black);
    letter-spacing: 0.2px;
    color: var(--imperial-prier);
    order: 2;
  }

  .callouts-icon,
  .callouts-icon--2,
  .callouts-icon--3,
  .callouts-icon--4 {
    width: 8rem;
  }

  .qr-enabled-image {
    width: 36rem;
    position: absolute;
    right: -6rem;
    bottom: -10rem;
  }

  .zigzag-container--03 {
    position: relative;
    /* background: #1c7ed6; */
    display: flex;
    /* flex-wrap: no-wrap; */
    align-items: center;
    justify-content: space-between;
    padding: 38.8rem 0;
    padding-bottom: 0;
    margin: 0 auto;
  }

  .zigzag-title-container {
    width: 50%;
    order: 0;
  }

  .zigzag-shape--03 {
    border: 4rem solid var(--light-gray);
    height: 32.2rem;
    width: 32.7rem;
    height: 10.8rem;
    width: 30%;
    transform: rotate(Odeg) !important;
    /* position: absolute; */
    left: -16rem;
    bottom: 0;
    border-radius: 100rem;
  }

  .zigzag-container--04 {
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: no-wrap;
    padding: 28rem 0;
    gap: 12rem;
    padding-bottom: 12rem;
  }

  .zigzag-title-container--04 {
    width: 50%;
  }

  .zigzag-sizes-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0rem;
    align-items: center;
    margin-top: 4rem;
    justify-content: flex-start;
  }

  .zigzag-shape--04 {
    background: #fdc830;
    background: -webkit-linear-gradient(to left, #f37335, #fdc830);
    background: linear-gradient(to left, #f37335, #fdc830);
    /* width: 40%; */
    width: 28%;
    height: 44rem;
    bottom: 0;
    position: relative;
    border-radius: 100rem;
  }

  .zigzag-slide-box--4-1 {
    width: 78%;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    position: absolute;
    right: 9.8rem;
    bottom: 10rem;
  }

  .zigzag-container--04 p.size-pill {
    background: #fff;
    color: #000;
    font-weight: 300;
    font-size: 1.4rem;
    padding: 1.4rem 2.8rem;
    margin: 0.2rem;
    text-align: center;
    width: auto;
    border-radius: 2.8rem;
    box-shadow: var(--soft-shadow--sm);
  }

  .zigzag-slide-box--4-3 {
    width: 72%;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    right: -5rem;
    bottom: 0.8rem;
    position: absolute;
  }

  .zigzag-container--07 {
    position: relative;
    flex-wrap: no-wrap;
    display: flex;
    padding: 2rem 0;
    justify-content: space-between;
    margin-top: 3.8rem;
  }

  .zigzag-shape--07 {
    width: 100%;
    height: auto;
    bottom: 0;
    position: relative;
    order: 1;
    border-radius: 100rem;
  }

  .zigzag-shape--07 {
    width: 100%;
    margin-top: 50rem;
    height: auto;
    bottom: 0;
    position: relative;
    order: 1;
    border-radius: 100rem;
  }

  .zigzag-slide-box--44-3 {
    width: 62%;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    right: -15rem;
    bottom: 15.8rem;
    position: absolute;
  }

  .slide-box--02::after {
    /* content: "studies text"; */
    color: var(--black);
    padding: 1rem;
    font-size: 1.2rem;
    z-index: 800;
    right: 4%;
    bottom: -6.2rem;
    font-weight: 800;
    position: absolute;
  }
  .zigzag-slide-box--44-1 {
    width: 80%;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    right: -11rem;
    bottom: 18.8rem;
    position: absolute;
  }

  .zigzag-position-container--2 {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .zigzag-container--07 .zigzag-title-container {
    order: 1;
  }

  .zigzag-slide-box--44-1 {
    width: 62%;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    right: 2rem;
    bottom: 33.8rem;
    position: absolute;
  }

  .zigzag-slide-box--44-4 {
    width: 62%;
    height: 22rem;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    right: 1rem;
    bottom: -1.2rem;
    position: absolute;
  }

  .slide-box--03::after {
    /* content: "studies text"; */
    color: var(--black);
    padding: 1rem;
    font-size: 1.2rem;
    z-index: 800;
    /* right: 73%; */
    /* bottom: -6rem; */
    position: absolute;
  }

  /* =============================
Advertisement
============================= */

  .advertisement-container {
    width: 95%;
    height: aut65vho;
    position: relative;
    top: -40rem;
    left: 0%;
    transform: translateX(0);
    background: var(--white);
    border-radius: 7.8rem;
  }

  .ad-info-container {
    flex-direction: row;
    gap: 3.8rem;
    position: absolute;
    width: 88%;
    padding: 1.8rem;
    bottom: 2rem;
  }

  .ad-info-item {
    width: 100%;
  }
  .advertisement {
    height: auto;
    padding: 12.8rem 0;
    position: static;
  }

  .advertisement-product-image {
    position: absolute;
    top: -20rem;
    transform: translateX(-40%);
    width: 62%;
  }

  .ad-message {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 14%;
    z-index: 500;
    color: var(--blue);
  }

  .ad-info-item h3 {
    font-size: 2.4rem;
    font-family: "Caveat", cursive;
    font-weight: 800;
    text-transform: capitalize;
  }

  .ad-info-item p {
    font-size: 1.4rem;
    line-height: 1.6;
    font-weight: 400;
  }

  .ad-icon {
    width: 78%;
  }

  .advertisement-item {
    box-shadow: var(--soft-shadow--sm);
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #ffffff, #ece9e6),
      url(../images/AdobeStock_266374871.jpeg) no-repeat center center / cover;
    background-blend-mode: multiply;
    border-radius: 3.5rem;
    position: relative;
    padding: 0rem;
  }

  .ad-message-text {
    font-family: "Caveat", cursive;
    font-weight: 700;
    font-size: 4.8rem;
    position: absolute;
    left: -7rem;
    bottom: 45%;
  }

  .advertisememt-blur {
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    backdrop-filter: blur(8px);
    position: absolute;
    z-index: -1;
  }
}

@media (max-width: 768px) {
  body {
    width: 100%;
  }

  .slideshow-container {
    height: 100vh;
    position: relative;
    z-index: 200;
    clip-path: polygon(0 0%, 100% 0%, 100% 90%, 0 100%);
  }

  .slideshow-wrapper {
    width: 100%;
    height: 72vh;
    height: 100vh;
    position: relative;
    background: var(--black);
  }

  .navigation {
    /* padding: 0 21.3; */
    margin: 0 auto;
    max-width: 100%;
    height: 15rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    display: none;
  }

  .container-wrapper h2 {
    font-size: 4.8rem;
    font-family: "Red Hat Display", sans-serif;
    font-style: normal;
    line-height: 1.2;
    margin-bottom: 5rem;
    width: 90%;
    position: relative;
    z-index: 300;
    padding: 1.8rem;
    color: var(--white);
  }

  .zigzag-title-container {
    width: 100%;
  }

  .zigzag {
    padding: 64rem 2rem;
    clip-path: polygon(0 7%, 100% 3%, 100% 100%, 0 100%);
  }

  .zigzag-container--01 {
    display: flex;
    flex-direction: column;
    margin-bottom: 15rem;
  }

  .zigzag-shape--01 {
    width: 125rem;
    width: 100%;
    right: 0;
    bottom: 0;
    position: static;
  }

  .zigzag-visual-01 {
    position: relative;
    left: 8rem;
    top: 27rem;
    top: -6rem;
    width: 73%;
  }

  .zigzag-container--01 h1,
  .zigzag-container--02 h1,
  .zigzag-container--03 h1,
  .zigzag-container--033 h1,
  .zigzag-container--04 h1 {
    font-family: "Caveat", cursive;
    font-optical-sizing: auto;
    font-weight: 800;
    font-size: 4.8rem;
    font-style: normal;
    color: var(--dark-gray);
    letter-spacing: -0.03rem;
    line-height: 1.1;
    margin-bottom: 1.8rem;
  }

  .zigzag-container--01 p,
  .zigzag-container--02 p,
  .zigzag-container--03 p,
  .zigzag-container--033 p,
  .zigzag-container--04 p {
    font-size: 2.2rem;
    font-size: 1.8rem;
    font-weight: 300;
    color: var(--black);
    letter-spacing: 0.2px;
    color: var(--imperial-prier);
  }

  .zigzag-visual-02 {
    position: relative;
    width: 48.8rem;
    display: none;
    visibility: hidden;
  }

  .zigzag-container--02 {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-top: 18rem;
  }

  .zigzag-slide-box--1 {
    width: 60rem;
    right: 70px;
  }

  .zigzag-title-container--02 {
    width: 90%;
    border-radius: 50px;
    position: relative;
    margin-left: 2rem;
    margin-top: 28.8rem;
  }

  .zigzag-shape--02 {
    background: linear-gradient(
      to right,
      var(--medium-gray),
      rgba(221, 239, 187, 0.257)
    );
    height: 10.8rem;
    width: 100%;
    border-radius: 100rem;
  }

  .zigzag-sizes-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding: 0rem;
    margin-top: 4rem;
    justify-content: center;
  }

  .zigzag-container--033 {
    margin: 0 auto;
  }

  .zigzag-container--02 p.size-pill {
    background: #fff;
    color: #000;
    font-weight: 300;
    font-size: 1.6rem;
    padding: 1.4rem 2.8rem;
    width: 88%;
    margin: 0.8rem;
    border-radius: 2.8rem;
    box-shadow: var(--soft-shadow--sm);
    text-align: center;
  }

  .callouts .container-wrapper {
    justify-content: center;
  }

  .callouts-item-container {
    /* height: 16.09rem; */
    align-items: center;
    width: 100%;
    flex-direction: column;
    display: flex;
    height: auto;
    box-shadow: var(--soft-shadow--sm);
    border-radius: 1rem;
  }

  .callouts-item-border {
    display: none;
    visibility: hidden;
  }

  .callouts-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
  }

  .callouts-item p {
    margin-right: 0;
  }

  .zigzag-container--01 p,
  .zigzag-container--02 p,
  .zigzag-container--03 p,
  .zigzag-container--033 p,
  .zigzag-container--04 p {
    font-size: 2.2rem;
    font-size: 1.8rem;
    font-weight: 300;
    color: var(--black);
    letter-spacing: 0.2px;
    color: var(--imperial-prier);
    order: 2;
  }

  .callouts-icon--1,
  .callouts-icon--2,
  .callouts-icon--3,
  .callouts-icon--4 {
    width: 12rem;
  }

  .qr-enabled-image {
    width: 100%;
    position: absolute;
    /* right: -14rem; */
    bottom: 0rem;
  }

  .qr-enabled-image {
    width: 80%;
    position: absolute;
    right: 2rem;
  }

  .zigzag-container--03 {
    position: relative;
    /* background: #1c7ed6; */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 48.8rem 0;
    padding-bottom: 0;
  }

  .zigzag-title-container {
    width: 100%;
    order: 2;
  }

  .zigzag-shape--03 {
    border: 4rem solid var(--light-gray);
    height: 32.2rem;
    width: 32.7rem;
    height: 10.8rem;
    width: 100%;
    transform: rotate(Odeg) !important;
    /* position: absolute; */
    left: -16rem;
    bottom: 0;
    border-radius: 100rem;
  }

  .zigzag-container--04 {
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 28rem 0;
    padding-bottom: 12rem;
  }

  .zigzag-title-container--04 {
    width: 80%;
  }

  .zigzag-sizes-wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 0rem;
    align-items: center;
    margin-top: 4rem;
    justify-content: center;
  }

  .zigzag-shape--04 {
    background: #fdc830;
    background: -webkit-linear-gradient(to left, #f37335, #fdc830);
    background: linear-gradient(to left, #f37335, #fdc830);
    /* width: 40%; */
    width: 58%;
    height: 60rem;
    bottom: 0;
    position: relative;
    border-radius: 100rem;
  }

  .zigzag-slide-box--4-1 {
    width: 70%;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    position: absolute;
    right: 14.8rem;
    bottom: 16rem;
  }

  .zigzag-container--04 p.size-pill {
    background: #fff;
    color: #000;
    font-weight: 300;
    font-size: 1.4rem;
    padding: 1.4rem 2.8rem;
    margin: 0.2rem;
    text-align: center;
    width: 80%;
    border-radius: 2.8rem;
    box-shadow: var(--soft-shadow--sm);
  }

  .zigzag-slide-box--4-3 {
    width: 70%;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    right: -10rem;
    bottom: 0.8rem;
    position: absolute;
  }

  .zigzag-container--07 {
    position: relative;
    flex-wrap: wrap;
    display: flex;
    padding: 2rem 0;
    justify-content: space-between;
    margin-top: 3.8rem;
  }

  .zigzag-shape--07 {
    width: 100%;
    height: auto;
    bottom: 0;
    position: relative;
    order: 1;
    border-radius: 100rem;
  }

  .zigzag-shape--07 {
    width: 100%;
    margin-top: 50rem;
    height: auto;
    bottom: 0;
    position: relative;
    order: 1;
    border-radius: 100rem;
  }

  .zigzag-slide-box--44-3 {
    width: 48%;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    right: 21rem;
    bottom: 18.8rem;
    position: absolute;
  }

  .slide-box--02::after {
    color: var(--black);
    padding: 1rem;
    font-size: 1.2rem;
    z-index: 800;
    right: 62%;
    width: 30%;
    bottom: -5.8rem;
    position: absolute;
  }

  .zigzag-slide-box--44-1 {
    width: 80%;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    right: -11rem;
    bottom: 18.8rem;
    position: absolute;
  }

  .zigzag-position-container--2 {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .zigzag-container--07 .zigzag-title-container {
    order: 1;
  }

  .zigzag-slide-box--44-1 {
    width: 48%;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    right: -15rem;
    bottom: 18.8rem;
    position: absolute;
  }

  .zigzag-slide-box--44-4 {
    width: 48%;
    height: 22rem;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    right: 3rem;
    bottom: -7.2rem;
    position: absolute;
  }

  .slide-box--03::after {
    /* content: "studies text"; */
    color: var(--black);
    padding: 1rem;
    font-size: 1.2rem;
    z-index: 800;
    /* right: 73%; */
    bottom: -5.8rem;
    position: absolute;
  }

  /* =============================
Advertisement
============================= */

  .advertisement-container {
    width: 85%;
    height: auto;
    position: static;
    top: 0rem;
    left: 0%;
    transform: translateX(0);
    background: var(--white);
    border-radius: 7.8rem;
  }

  .ad-info-container {
    flex-direction: column;
    gap: 3.8rem;
    position: static;
    width: 100%;
    padding: 1.8rem;
  }

  .ad-info-item {
    width: 100%;
  }
  .advertisement {
    height: auto;
    padding: 12.8rem 0;
    position: static;
  }

  .advertisement-product-image {
    position: static;
    top: -24rem;
    transform: translateX(0%);
    width: 100%;
  }

  .ad-message {
    width: 40rem;
    height: 100%;
    position: absolute;
    top: 0;
    left: 14%;
    z-index: 500;
    color: var(--blue);
  }

  .ad-info-item h3 {
    font-size: 2.4rem;
    font-family: "Caveat", cursive;
    font-weight: 800;
    text-transform: capitalize;
  }

  .ad-info-item p {
    font-size: 1.4rem;
    line-height: 1.6;
    font-weight: 400;
  }

  .ad-icon {
    width: 78%;
  }

  .advertisement-item {
    box-shadow: var(--soft-shadow--sm);
    width: 100%;
    height: 100%;
    /* background: linear-gradient(to right, #FFFFFF, #ECE9E6), url(../images/AdobeStock_266374871.jpeg) no-repeat center center / cover; */
    background-blend-mode: multiply;
    border-radius: 3.5rem;
    position: relative;
    padding: 2.5rem;
  }

  .ad-message-text {
    font-family: "Caveat", cursive;
    font-weight: 700;
    font-size: 4.8rem;
    position: absolute;
    left: -3rem;
    bottom: 101%;
  }

  .about-right {
    width: 100%;
  }

  .about-left {
    display: none;
    visibility: hidden;
  }

  .about-left--2 {
    display: flex;
    visibility: visible;

    flex-direction: row;
    justify-content: center;
    margin-bottom: 12rem;
  }

  .about-left--2 .ceo-image-container {
    width: 14.8rem;
    height: 14.8rem;
  }

  .contact-info-wrapper {
    width: 37%;
  }

  .contact-info-item {
    color: var(--white);
    width: 100%;
  }

  .form {
    flex: 1;
  }

  .callouts-item-container {
    height: 74rem;
  }

  .callouts-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 10rem 0;
    padding-top: 10rem;
    padding-right: 0px;
    padding-bottom: 10rem;
    padding-left: 0px;
  }
}

@media (max-width: 425px) {
  body {
    width: 100%;
  }

  .slideshow-container {
    height: 100vh;
    position: relative;
    z-index: 200;
    clip-path: polygon(0 0%, 100% 0%, 100% 90%, 0 100%);
  }

  .slideshow-wrapper {
    width: 100%;
    height: 72vh;
    height: 100vh;
    position: relative;
    background: var(--black);
  }

  .navigation {
    /* padding: 0 21.3; */
    margin: 0 auto;
    max-width: 100%;
    height: 15rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    display: none;
  }

  .container-wrapper h2 {
    font-size: 4.8rem;
    font-family: "Red Hat Display", sans-serif;
    font-style: normal;
    line-height: 1.2;
    margin-bottom: 5rem;
    width: 90%;
    position: relative;
    z-index: 300;
    padding: 1.8rem;
    color: var(--white);
  }

  .zigzag-title-container {
    width: 100%;
  }

  .zigzag {
    padding: 64rem 2rem;
    clip-path: polygon(0 7%, 100% 3%, 100% 100%, 0 100%);
  }

  .zigzag-shape--01 {
    width: 125rem;
    width: 100%;
    right: 0;
    bottom: 0;
  }

  .zigzag-visual-01 {
    position: relative;
    left: 4rem;
    top: 37rem;
    top: 12rem;
    width: 90%;
  }

  .zigzag-container--01 h1,
  .zigzag-container--02 h1,
  .zigzag-container--03 h1,
  .zigzag-container--033 h1,
  .zigzag-container--04 h1 {
    font-family: "Caveat", cursive;
    font-optical-sizing: auto;
    font-weight: 800;
    font-size: 4.8rem;
    font-style: normal;
    color: var(--dark-gray);
    letter-spacing: -0.03rem;
    line-height: 1.1;
    margin-bottom: 1.8rem;
  }

  .zigzag-container--01 p,
  .zigzag-container--02 p,
  .zigzag-container--03 p,
  .zigzag-container--033 p,
  .zigzag-container--04 p {
    font-size: 2.2rem;
    font-size: 1.8rem;
    font-weight: 300;
    color: var(--black);
    letter-spacing: 0.2px;
    color: var(--imperial-prier);
  }

  .zigzag-visual-02 {
    position: relative;
    width: 48.8rem;
    display: none;
    visibility: hidden;
  }

  .zigzag-container--02 {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-top: 18rem;
  }

  .zigzag-slide-box--1 {
    width: 30rem;
    right: -10px;
  }

  .zigzag-title-container--02 {
    width: 90%;
    border-radius: 50px;
    position: relative;
    margin-left: 2rem;
    margin-top: 8.8rem;
  }

  .zigzag-shape--02 {
    background: linear-gradient(
      to right,
      var(--medium-gray),
      rgba(221, 239, 187, 0.257)
    );
    height: 10.8rem;
    width: 100%;
    border-radius: 100rem;
  }

  .zigzag-sizes-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding: 0rem;
    margin-top: 4rem;
    justify-content: center;
  }

  .zigzag-container--02 p.size-pill {
    background: #fff;
    color: #000;
    font-weight: 300;
    font-size: 1.6rem;
    padding: 1.4rem 2.8rem;
    width: 88%;
    margin: 0.8rem;
    border-radius: 2.8rem;
    box-shadow: var(--soft-shadow--sm);
    text-align: center;
  }

  .callouts-item-container {
    /* height: 16.09rem; */
    align-items: center;
    width: 100%;
    flex-direction: column;
    display: flex;
    height: auto;
    box-shadow: var(--soft-shadow--sm);
    border-radius: 1rem;
  }

  .callouts-item-border {
    display: none;
    visibility: hidden;
  }

  .callouts-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .zigzag-container--01 p,
  .zigzag-container--02 p,
  .zigzag-container--03 p,
  .zigzag-container--033 p,
  .zigzag-container--04 p {
    font-size: 2.2rem;
    font-size: 1.8rem;
    font-weight: 300;
    color: var(--black);
    letter-spacing: 0.2px;
    color: var(--imperial-prier);
    order: 2;
  }

  .callouts-icon--1,
  .callouts-icon--2,
  .callouts-icon--3,
  .callouts-icon--4 {
    width: 12rem;
  }

  .qr-enabled-image {
    width: 100%;
    position: absolute;
    /* right: -14rem; */
    bottom: 0rem;
  }

  .qr-enabled-image {
    width: 100%;
    position: absolute;
    right: 2rem;
  }

  .zigzag-container--03 {
    position: relative;
    /* background: #1c7ed6; */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 48.8rem 0;
    padding-bottom: 0;
  }

  .zigzag-title-container {
    width: 100%;
    order: 2;
  }

  .zigzag-shape--03 {
    border: 4rem solid var(--light-gray);
    height: 32.2rem;
    width: 32.7rem;
    height: 10.8rem;
    width: 100%;
    transform: rotate(Odeg) !important;
    /* position: absolute; */
    left: -16rem;
    bottom: 0;
    border-radius: 100rem;
  }

  .zigzag-container--04 {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding: 28rem 0;
    padding-bottom: 12rem;
  }

  .zigzag-title-container--04 {
    width: 100%;
  }

  .zigzag-sizes-wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 0rem;
    align-items: center;
    margin-top: 4rem;
    justify-content: center;
  }

  .zigzag-shape--04 {
    background: #fdc830;
    background: -webkit-linear-gradient(to left, #f37335, #fdc830);
    background: linear-gradient(to left, #f37335, #fdc830);
    /* width: 40%; */
    width: 100%;
    height: 60rem;
    bottom: 0;
    position: relative;
    border-radius: 100rem;
  }

  .zigzag-slide-box--4-1 {
    width: 80%;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    position: absolute;
    right: 5.8rem;
    bottom: 27rem;
  }

  .zigzag-container--04 p.size-pill {
    background: #fff;
    color: #000;
    font-weight: 300;
    font-size: 1.4rem;
    padding: 1.4rem 2.8rem;
    margin: 0.2rem;
    text-align: center;
    width: 80%;
    border-radius: 2.8rem;
    box-shadow: var(--soft-shadow--sm);
  }

  .zigzag-slide-box--4-3 {
    width: 75%;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    right: -1rem;
    bottom: 4.8rem;
    position: absolute;
  }

  .zigzag-container--07 {
    position: relative;
    flex-wrap: wrap;
    display: flex;
    padding: 2rem 0;
    justify-content: space-between;
    margin-top: 3.8rem;
  }

  .zigzag-shape--07 {
    width: 100%;
    height: auto;
    bottom: 0;
    position: relative;
    order: 1;
    border-radius: 100rem;
  }

  .zigzag-shape--07 {
    width: 100%;
    margin-top: 50rem;
    height: auto;
    bottom: 0;
    position: relative;
    order: 1;
    border-radius: 100rem;
  }

  .zigzag-slide-box--44-3 {
    width: 100%;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    right: -16rem;
    bottom: -9.2rem;
    position: absolute;
  }

  .slide-box--02::after {
    color: var(--black);
    padding: 1rem;
    font-size: 1.2rem;
    z-index: 800;
    right: 63%;
    position: absolute;
  }

  .zigzag-slide-box--44-1 {
    width: 80%;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    right: -11rem;
    bottom: 18.8rem;
    position: absolute;
  }

  .zigzag-position-container--2 {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .zigzag-container--07 .zigzag-title-container {
    order: 1;
  }

  .zigzag-slide-box--44-1 {
    width: 95%;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    right: -15rem;
    bottom: 18.8rem;
    position: absolute;
  }

  .zigzag-slide-box--44-4 {
    width: 100%;
    height: 22rem;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    right: -16rem;
    bottom: -36.2rem;
    position: absolute;
  }

  .slide-box--03::after {
    color: var(--black);
    padding: 1rem;
    font-size: 1.2rem;
    z-index: 800;
    right: 34%;
    bottom: -5.8rem;
    position: absolute;
  }

  /* =============================
Advertisement
============================= */

  .advertisement-container {
    width: 85%;
    height: auto;
    position: static;
    top: 0rem;
    left: 0%;
    transform: translateX(0);
    background: var(--white);
    border-radius: 7.8rem;
  }

  .ad-info-container {
    flex-direction: column;
    gap: 3.8rem;
    position: static;
    width: 100%;
    padding: 1.8rem;
  }

  .ad-info-item {
    width: 100%;
  }
  .advertisement {
    height: auto;
    padding: 12.8rem 0;
    position: static;
  }

  .advertisement-product-image {
    position: static;
    top: -24rem;
    transform: translateX(0%);
    width: 100%;
  }

  .ad-message {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 14%;
    z-index: 500;
    color: var(--blue);
  }

  .ad-info-item h3 {
    font-size: 2.4rem;
    font-family: "Caveat", cursive;
    font-weight: 800;
    text-transform: capitalize;
  }

  .ad-info-item p {
    font-size: 1.4rem;
    line-height: 1.6;
    font-weight: 400;
  }

  .ad-icon {
    width: 78%;
  }

  .advertisement-item {
    box-shadow: var(--soft-shadow--sm);
    width: 100%;
    height: 100%;
    /* background: linear-gradient(to right, #FFFFFF, #ECE9E6), url(../images/AdobeStock_266374871.jpeg) no-repeat center center / cover; */
    background-blend-mode: multiply;
    border-radius: 3.5rem;
    position: relative;
    padding: 2.5rem;
  }

  .ad-message-text {
    font-family: "Caveat", cursive;
    font-weight: 700;
    font-size: 4.8rem;
    position: absolute;
    left: -3rem;
    bottom: 101%;
  }

  .about-right {
    width: 100%;
  }

  .about-left {
    display: none;
    visibility: hidden;
  }

  .about-left--2 {
    flex-direction: column;
    margin-bottom: 12rem;
  }

  .about-left--2 .ceo-image-container {
    width: 14.8rem;
    height: 14.8rem;
  }

  .get-started__item {
    width: 100%;
    padding: 2rem;
  }

  .contact-info-wrapper {
    width: 100%;
    flex: 1;
  }

  .contact-info-item {
    color: var(--white);
    width: 100%;
  }

  .form {
    width: 100%;
    flex: 1;
  }

  .form-group--half {
    width: 100% !important;
  }

  .callouts-item-container {
    height: 74rem;
  }
}

@media (max-width: 375px) {
  body {
    width: 100%;
  }

  .slideshow-container {
    height: 100vh;
    position: relative;
    z-index: 200;
    clip-path: polygon(0 0%, 100% 0%, 100% 90%, 0 100%);
  }

  .slideshow-wrapper {
    width: 100%;
    height: 72vh;
    height: 100vh;
    position: relative;
    background: var(--black);
  }

  .navigation {
    /* padding: 0 21.3; */
    margin: 0 auto;
    max-width: 100%;
    height: 15rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    display: none;
  }

  .container-wrapper h2 {
    font-size: 4.8rem;
    font-family: "Red Hat Display", sans-serif;
    font-style: normal;
    line-height: 1.2;
    margin-bottom: 5rem;
    width: 90%;
    position: relative;
    z-index: 300;
    padding: 1.8rem;
    color: var(--white);
  }

  .zigzag-title-container {
    width: 100%;
  }

  .zigzag {
    padding: 64rem 2rem;
    clip-path: polygon(0 7%, 100% 3%, 100% 100%, 0 100%);
  }

  .zigzag-shape--01 {
    width: 125rem;
    width: 100%;
    right: 0;
    bottom: 0;
  }

  .zigzag-visual-01 {
    position: relative;
    left: 0rem;
    top: 37rem;
    top: 2rem;
    width: 100%;
  }

  .zigzag-container--01 h1,
  .zigzag-container--02 h1,
  .zigzag-container--03 h1,
  .zigzag-container--033 h1,
  .zigzag-container--04 h1 {
    font-family: "Caveat", cursive;
    font-optical-sizing: auto;
    font-weight: 800;
    font-size: 4.8rem;
    font-style: normal;
    color: var(--dark-gray);
    letter-spacing: -0.03rem;
    line-height: 1.1;
    margin-bottom: 1.8rem;
  }

  .zigzag-container--01 p,
  .zigzag-container--02 p,
  .zigzag-container--03 p,
  .zigzag-container--033 p,
  .zigzag-container--04 p {
    font-size: 2.2rem;
    font-size: 1.8rem;
    font-weight: 300;
    color: var(--black);
    letter-spacing: 0.2px;
    color: var(--imperial-prier);
  }

  .zigzag-visual-02 {
    position: relative;
    width: 48.8rem;
    display: none;
    visibility: hidden;
  }

  .zigzag-container--02 {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-top: 18rem;
  }

  .zigzag-slide-box--1 {
    width: 30rem;
    right: -10px;
  }

  .zigzag-title-container--02 {
    width: 90%;
    border-radius: 50px;
    position: relative;
    margin-left: 2rem;
    margin-top: 8.8rem;
  }

  .zigzag-shape--02 {
    background: linear-gradient(
      to right,
      var(--medium-gray),
      rgba(221, 239, 187, 0.257)
    );
    height: 10.8rem;
    width: 100%;
    border-radius: 100rem;
  }

  .zigzag-sizes-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding: 0rem;
    margin-top: 4rem;
    justify-content: center;
  }

  .zigzag-container--02 p.size-pill {
    background: #fff;
    color: #000;
    font-weight: 300;
    font-size: 1.6rem;
    padding: 1.4rem 2.8rem;
    width: 88%;
    margin: 0.8rem;
    border-radius: 2.8rem;
    box-shadow: var(--soft-shadow--sm);
    text-align: center;
  }

  .callouts-item-container {
    /* height: 16.09rem; */
    align-items: center;
    width: 100%;
    flex-direction: column;
    display: flex;
    height: auto;
    box-shadow: var(--soft-shadow--sm);
    border-radius: 1rem;
  }

  .callouts-item-border {
    display: none;
    visibility: hidden;
  }

  .callouts-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .zigzag-container--01 p,
  .zigzag-container--02 p,
  .zigzag-container--03 p,
  .zigzag-container--033 p,
  .zigzag-container--04 p {
    font-size: 2.2rem;
    font-size: 1.8rem;
    font-weight: 300;
    color: var(--black);
    letter-spacing: 0.2px;
    color: var(--imperial-prier);
    order: 2;
  }

  .qr-enabled-image {
    width: 100%;
    position: absolute;
    /* right: -14rem; */
    bottom: 0rem;
  }

  .qr-enabled-image {
    width: 100%;
    position: absolute;
    right: 2rem;
  }

  .zigzag-container--03 {
    position: relative;
    /* background: #1c7ed6; */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 48.8rem 0;
    padding-bottom: 0;
  }

  .zigzag-title-container {
    width: 100%;
    order: 2;
  }

  .zigzag-shape--03 {
    border: 4rem solid var(--light-gray);
    height: 32.2rem;
    width: 32.7rem;
    height: 10.8rem;
    width: 100%;
    transform: rotate(Odeg) !important;
    /* position: absolute; */
    left: -16rem;
    bottom: 0;
    border-radius: 100rem;
  }

  .zigzag-container--04 {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding: 18rem 0;
  }

  .zigzag-title-container--04 {
    width: 100%;
  }

  .zigzag-sizes-wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 0rem;
    align-items: center;
    margin-top: 4rem;
    justify-content: center;
  }

  .zigzag-shape--04 {
    background: #fdc830;
    background: -webkit-linear-gradient(to left, #f37335, #fdc830);
    background: linear-gradient(to left, #f37335, #fdc830);
    /* width: 40%; */
    width: 100%;
    height: 60rem;
    bottom: 0;
    position: relative;
    border-radius: 100rem;
  }

  .zigzag-slide-box--4-1 {
    width: 80%;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    position: absolute;
    right: 5.8rem;
    bottom: 27rem;
  }

  .zigzag-container--04 p.size-pill {
    background: #fff;
    color: #000;
    font-weight: 300;
    font-size: 1.4rem;
    padding: 1.4rem 2.8rem;
    margin: 0.2rem;
    text-align: center;
    width: 80%;
    border-radius: 2.8rem;
    box-shadow: var(--soft-shadow--sm);
  }

  .zigzag-slide-box--4-3 {
    width: 75%;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    right: -1rem;
    bottom: 4.8rem;
    position: absolute;
  }

  .zigzag-container--07 {
    position: relative;
    flex-wrap: wrap;
    display: flex;
    padding: 2rem 0;
    justify-content: space-between;
    margin-top: 3.8rem;
  }

  .zigzag-shape--07 {
    width: 100%;
    height: auto;
    bottom: 0;
    position: relative;
    order: 1;
    border-radius: 100rem;
  }

  .zigzag-shape--07 {
    width: 100%;
    margin-top: 50rem;
    height: auto;
    bottom: 0;
    position: relative;
    order: 1;
    border-radius: 100rem;
  }

  .zigzag-slide-box--44-3 {
    width: 100%;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    right: -16rem;
    bottom: -9.2rem;
    position: absolute;
  }

  .slide-box--02::after {
    color: var(--black);
    padding: 1rem;
    font-size: 1.2rem;
    z-index: 800;
    right: 65%;
    position: absolute;
  }

  .zigzag-slide-box--44-1 {
    width: 80%;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    right: -11rem;
    bottom: 18.8rem;
    position: absolute;
  }

  .zigzag-position-container--2 {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .zigzag-container--07 .zigzag-title-container {
    order: 1;
  }

  .zigzag-slide-box--44-1 {
    width: 95%;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    right: -15rem;
    bottom: 18.8rem;
    position: absolute;
  }

  .zigzag-slide-box--44-4 {
    width: 100%;
    height: 22rem;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    right: -16rem;
    bottom: -36.2rem;
    position: absolute;
  }

  .slide-box--03::after {
    color: var(--black);
    padding: 1rem;
    font-size: 1.2rem;
    z-index: 800;
    right: 34%;
    bottom: -6rem;
    position: absolute;
  }

  /* =============================
Advertisement
============================= */

  .advertisement-container {
    width: 85%;
    height: auto;
    position: static;
    top: 0rem;
    left: 0%;
    transform: translateX(0);
    background: var(--white);
    border-radius: 7.8rem;
  }

  .ad-info-container {
    flex-direction: column;
    gap: 3.8rem;
    position: static;
    width: 100%;
    padding: 1.8rem;
  }

  .ad-info-item {
    width: 100%;
  }
  .advertisement {
    height: auto;
    padding: 12.8rem 0;
    position: static;
  }

  .advertisement-product-image {
    position: static;
    top: -24rem;
    transform: translateX(0%);
    width: 100%;
  }

  .ad-message {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 14%;
    z-index: 500;
    color: var(--blue);
  }

  .ad-info-item h3 {
    font-size: 2.4rem;
    font-family: "Caveat", cursive;
    font-weight: 800;
    text-transform: capitalize;
  }

  .ad-info-item p {
    font-size: 1.4rem;
    line-height: 1.6;
    font-weight: 400;
  }

  .ad-icon {
    width: 78%;
  }

  .advertisement-item {
    box-shadow: var(--soft-shadow--sm);
    width: 100%;
    height: 100%;
    /* background: linear-gradient(to right, #FFFFFF, #ECE9E6), url(../images/AdobeStock_266374871.jpeg) no-repeat center center / cover; */
    background-blend-mode: multiply;
    border-radius: 3.5rem;
    position: relative;
    padding: 2.5rem;
  }

  .ad-message-text {
    font-family: "Caveat", cursive;
    font-weight: 700;
    font-size: 4.8rem;
    position: absolute;
    left: -3rem;
    bottom: 101%;
  }

  .callouts-item-container {
    height: 98rem;
  }
}

@media (max-width: 320px) {
  body {
    width: 100%;
  }

  .slideshow-container {
    height: 100vh;
    position: relative;
    z-index: 200;
    clip-path: polygon(0 0%, 100% 0%, 100% 90%, 0 100%);
  }

  .slideshow-wrapper {
    width: 100%;
    height: 72vh;
    height: 100vh;
    position: relative;
    background: var(--black);
  }

  .navigation {
    /* padding: 0 21.3; */
    margin: 0 auto;
    max-width: 100%;
    height: 15rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    display: none;
  }

  .container-wrapper h2 {
    font-size: 4.8rem;
    font-family: "Red Hat Display", sans-serif;
    font-style: normal;
    line-height: 1.2;
    margin-bottom: 5rem;
    width: 90%;
    position: relative;
    z-index: 300;
    padding: 1.8rem;
    color: var(--white);
  }

  .zigzag-title-container {
    width: 100%;
  }

  .zigzag {
    padding: 64rem 2rem;
    clip-path: polygon(0 7%, 100% 3%, 100% 100%, 0 100%);
  }

  .zigzag-shape--01 {
    width: 125rem;
    width: 100%;
    right: 0;
    bottom: 0;
  }

  .zigzag-visual-01 {
    position: relative;
    left: 0rem;
    top: 37rem;
    top: 2rem;
    width: 100%;
  }

  .zigzag-container--01 h1,
  .zigzag-container--02 h1,
  .zigzag-container--03 h1,
  .zigzag-container--033 h1,
  .zigzag-container--04 h1 {
    font-family: "Caveat", cursive;
    font-optical-sizing: auto;
    font-weight: 800;
    font-size: 4.8rem;
    font-style: normal;
    color: var(--dark-gray);
    letter-spacing: -0.03rem;
    line-height: 1.1;
    margin-bottom: 1.8rem;
  }

  .zigzag-container--01 p,
  .zigzag-container--02 p,
  .zigzag-container--03 p,
  .zigzag-container--033 p,
  .zigzag-container--04 p {
    font-size: 2.2rem;
    font-size: 1.8rem;
    font-weight: 300;
    color: var(--black);
    letter-spacing: 0.2px;
    color: var(--imperial-prier);
  }

  .zigzag-visual-02 {
    position: relative;
    width: 48.8rem;
    display: none;
    visibility: hidden;
  }

  .zigzag-container--02 {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-top: 18rem;
  }

  .zigzag-slide-box--1 {
    width: 30rem;
    right: -10px;
  }

  .zigzag-title-container--02 {
    width: 90%;
    border-radius: 50px;
    position: relative;
    margin-left: 2rem;
    margin-top: 8.8rem;
  }

  .zigzag-shape--02 {
    background: linear-gradient(
      to right,
      var(--medium-gray),
      rgba(221, 239, 187, 0.257)
    );
    height: 10.8rem;
    width: 100%;
    border-radius: 100rem;
  }

  .zigzag-sizes-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding: 0rem;
    margin-top: 4rem;
    justify-content: center;
  }

  .zigzag-container--02 p.size-pill {
    background: #fff;
    color: #000;
    font-weight: 300;
    font-size: 1.6rem;
    padding: 1.4rem 2.8rem;
    width: 88%;
    margin: 0.8rem;
    border-radius: 2.8rem;
    box-shadow: var(--soft-shadow--sm);
    text-align: center;
  }

  .callouts-item-container {
    /* height: 16.09rem; */
    align-items: center;
    width: 100%;
    flex-direction: column;
    display: flex;
    height: auto;
    box-shadow: var(--soft-shadow--sm);
    border-radius: 1rem;
  }

  .callouts-item-border {
    display: none;
    visibility: hidden;
  }

  .callouts-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .zigzag-container--01 p,
  .zigzag-container--02 p,
  .zigzag-container--03 p,
  .zigzag-container--033 p,
  .zigzag-container--04 p {
    font-size: 2.2rem;
    font-size: 1.8rem;
    font-weight: 300;
    color: var(--black);
    letter-spacing: 0.2px;
    color: var(--imperial-prier);
    order: 2;
  }

  .qr-enabled-image {
    width: 100%;
    position: absolute;
    /* right: -14rem; */
    bottom: 0rem;
  }

  .zigzag-container--03 {
    position: relative;
    /* background: #1c7ed6; */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 48.8rem 0;
    padding-bottom: 0;
  }

  .zigzag-title-container {
    width: 100%;
    order: 2;
  }

  .zigzag-shape--03 {
    border: 4rem solid var(--light-gray);
    height: 32.2rem;
    width: 32.7rem;
    height: 10.8rem;
    width: 100%;
    transform: rotate(Odeg) !important;
    /* position: absolute; */
    left: -16rem;
    bottom: 0;
    border-radius: 100rem;
  }

  .zigzag-container--04 {
    position: relative;
    display: flex;
    flex-wrap: wrap;
  }

  .zigzag-title-container--04 {
    width: 100%;
  }

  .zigzag-sizes-wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 0rem;
    align-items: center;
    margin-top: 4rem;
    justify-content: center;
  }

  .zigzag-shape--04 {
    background: #fdc830;
    background: -webkit-linear-gradient(to left, #f37335, #fdc830);
    background: linear-gradient(to left, #f37335, #fdc830);
    /* width: 40%; */
    width: 100%;
    height: 60rem;
    bottom: 0;
    position: relative;
    border-radius: 100rem;
  }

  .zigzag-slide-box--4-1 {
    width: 80%;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    position: absolute;
    right: 5.8rem;
    bottom: 27rem;
  }

  .zigzag-container--04 p.size-pill {
    background: #fff;
    color: #000;
    font-weight: 300;
    font-size: 1.4rem;
    padding: 1.4rem 2.8rem;
    margin: 0.2rem;
    text-align: center;
    width: 80%;
    border-radius: 2.8rem;
    box-shadow: var(--soft-shadow--sm);
  }

  .zigzag-slide-box--4-3 {
    width: 75%;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    right: -1rem;
    bottom: 4.8rem;
    position: absolute;
  }

  .zigzag-container--07 {
    position: relative;
    flex-wrap: wrap;
    display: flex;
    padding: 2rem 0;
    justify-content: space-between;
    margin-top: 3.8rem;
  }

  .zigzag-shape--07 {
    width: 100%;
    height: auto;
    bottom: 0;
    position: relative;
    order: 1;
    border-radius: 100rem;
  }

  .zigzag-shape--07 {
    width: 100%;
    margin-top: 50rem;
    height: auto;
    bottom: 0;
    position: relative;
    order: 1;
    border-radius: 100rem;
  }

  .zigzag-slide-box--44-3 {
    width: 100%;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    right: -16rem;
    bottom: -9.2rem;
    position: absolute;
  }

  .slide-box--02::after {
    color: var(--black);
    padding: 1rem;
    font-size: 1.2rem;
    z-index: 800;
    right: 56%;
    width: 34%;
    bottom: -6.2rem;
    position: absolute;
  }

  .zigzag-slide-box--44-1 {
    width: 80%;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    right: -11rem;
    bottom: 18.8rem;
    position: absolute;
  }

  .zigzag-position-container--2 {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .zigzag-container--07 .zigzag-title-container {
    order: 1;
  }

  .zigzag-slide-box--44-1 {
    width: 95%;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    right: -15rem;
    bottom: 18.8rem;
    position: absolute;
  }

  .zigzag-slide-box--44-4 {
    width: 100%;
    height: 22rem;
    border-radius: 2rem;
    box-shadow: var(--soft-shadow--sm);
    border: 0.8rem white solid;
    right: -16rem;
    bottom: -36.2rem;
    position: absolute;
  }

  .slide-box--03::after {
    color: var(--black);
    padding: 1rem;
    font-size: 1.2rem;
    z-index: 800;
    right: 24%;
    bottom: -5.8rem;
    width: 67%;
    position: absolute;
  }

  /* =============================
Advertisement
============================= */

  .advertisement-container {
    width: 85%;
    height: auto;
    position: static;
    top: 0rem;
    left: 0%;
    transform: translateX(0);
    background: var(--white);
    border-radius: 7.8rem;
  }

  .ad-info-container {
    flex-direction: column;
    gap: 3.8rem;
    position: static;
    width: 100%;
    padding: 1.8rem;
  }

  .ad-info-item {
    width: 100%;
  }
  .advertisement {
    height: auto;
    padding: 4rem 0;
    position: static;
  }

  .advertisement-product-image {
    position: static;
    top: -24rem;
    transform: translateX(0%);
    width: 100%;
  }

  .ad-message {
    width: 100%;
    width: 30%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 14%;
    z-index: 500;
    color: var(--blue);
  }

  .ad-info-item h3 {
    font-size: 2.4rem;
    font-family: "Caveat", cursive;
    font-weight: 800;
    text-transform: capitalize;
  }

  .ad-info-item p {
    font-size: 1.4rem;
    line-height: 1.6;
    font-weight: 400;
  }

  .ad-icon {
    width: 78%;
  }

  .advertisement-item {
    box-shadow: var(--soft-shadow--sm);
    width: 100%;
    height: 100%;
    /* background: linear-gradient(to right, #FFFFFF, #ECE9E6), url(../images/AdobeStock_266374871.jpeg) no-repeat center center / cover; */
    background-blend-mode: multiply;
    border-radius: 3.5rem;
    position: relative;
    padding: 2.5rem;
  }

  .ad-message-text {
    font-family: "Caveat", cursive;
    font-weight: 700;
    font-size: 4.8rem;
    position: absolute;
    left: -3rem;
    bottom: 101%;
  }

  .our-company {
    margin-top: 0rem;
    padding-top: 44rem;
    position: relative;
  }

  .our-company .container-wrapper {
    flex-direction: column !important;
    flex-wrap: wrap;
  }

  .our-company-content {
    display: flex;
    flex-direction: column;
  }

  .about-left,
  .about-right {
    width: 100%;
  }

  .how-to-get-started .container-wrapper {
    margin: 100rem auto;
    flex-direction: column;
  }

  .get-started__item {
    width: 100%;
    padding: 2rem;
  }

  .our-company-text-wrapper {
    width: 100%;
    height: auto;
    /* width: 61.1rem; */
    padding: 5.8rem 4rem;
    background: var(--white);
    border-radius: 4rem;
    position: static;
    /* top: -18rem; */
  }

  .about-right {
    width: 100%;
  }

  .about-left {
    display: none;
    visibility: hidden;
  }

  .about-left--2 {
    flex-direction: column;
    margin-bottom: 12rem;
  }

  .about-left--2 .ceo-image-container {
    width: 14.8rem;
    height: 14.8rem;
  }

  .callouts-item-container {
    height: 74rem;
  }
}