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

body {
  font-family: "Prompt", sans-serif;
  scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Prompt", sans-serif !important;

}
a {
  text-decoration: none;
}
p,
small,
ul li,
a {
  font-family: "Outfit", sans-serif !important;
}
nav .nav-link.active {
  color: #169693;
}
nav {
  position: absolute;
  z-index: 9;
  width: 100%;
}
nav img {
  width: 210px;
}
footer img {
  width: 285px;
}
nav li .nav-link {
  color: #000;
  font-size: 16px;
  font-weight: 400;
  font-family: "Outfit", sans-serif;
}
nav ul li .nav-link:hover {
  color: #169693;
}
.navbar-toggler {
  font-size: 30px;
}
.btn-login {
  color: #000;
  padding: 7px 9px;
  border: 1px solid #000;
  font-size: 16px;
  border-radius: 9px;
  position: relative;
  transition: all 0.5s;
  overflow: hidden;
}

.btn-login:hover {
  color: #fff;
}

.btn-login::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 0%;
  top: 0;
  left: -21px;
  transform: skewX(45deg);
  background-color: #000;
  z-index: -1;
  transition: all 0.5s;
}
.btn-login:active {
  border-color: #a0f5df !important;
  color: #fff !important;
}
.btn-login:hover::before {
  width: 160%;
}
.btn-dark {
  padding: 10px 19px;
  border-radius: 24px;
  color: #fff;
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease;
  z-index: 999;
}
.btn-dark::before {
  content: "";
  position: absolute;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #000, #060606);
  z-index: -1;
  transition: right 0.9s ease;
}
.btn-dark:hover::before {
  right: 0;
}

.btn-dark:hover {
  color: #fff !important;
}
.btn-start {
  border-radius: 24px;
  padding: 10px 19px;
  border: 1px solid #000;
  background-color: transparent;
  color: #000;
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease;
  z-index: 999;
}
.btn-start::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #c8f5ea, #9fd6c8);
  z-index: -1;
  transition: left 0.9s ease;
}

.btn-start:hover::before {
  left: 0;
}

.btn-start:hover {
  color: #000 !important;
}

.btn-signup {
  color: #fff;
  padding: 7px 9px;
  border-color: #000;
  background-color: #000;
  font-size: 16px;
  border-radius: 9px;
  position: relative;
  transition: all 0.5s;
  overflow: hidden;
}

.btn-signup:hover {
  background-color: transparent;
  color: #000;
  border-color: #000;
}
.offcanvas .offcanvas-body ul li {
  list-style: none;
}

.navbar-scrolled {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.banner .owl-theme .owl-dots .owl-dot span {
  width: 19px;
  height: 5px;
}
.banner .owl-theme .owl-dots .owl-dot.active span,
.banner .owl-theme .owl-dots .owl-dot:hover span {
  background-color: #000;
}
.banner-mobile .owl-theme .owl-dots .owl-dot span {
  width: 19px;
  height: 5px;
}
.banner-mobile .owl-theme .owl-dots .owl-dot.active span,
.banner .owl-theme .owl-dots .owl-dot:hover span {
  background-color: #000;
}
.title-text {
  font-size: 28px;
}
.banner {
  position: relative;
  /* height:calc(100vh - -50px); */
  height: calc(100vh - -143px);
  background: url("../images/banner_bgs.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position-y: center;
  background-position-x: center;
  width: 100%;
  display: flex;
  align-items: center;
}
.banner-mobile .main-banner {
  position: relative;
}
.banner-mobile .klaviyo {
  height: 465px;
  background: url(../images/klaviyo_bg.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position-y: bottom;
  background-position-x: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.banner-mobile h1 {
  padding-top: 80px;
}
.banner-mobile .book {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 550px;
}
.banner-mobile .book::before {
  content: "";
  position: absolute;
  background: url("../images/book_bg.svg");
  background-size: cover;
  background-position-y: bottom;
  top: -25px;
  left: 0;
  z-index: -1;
  height: 550px;
  width: 100%;
}
.klaviyo h1 {
  font-size: 2.5vw;
  font-weight: 400;
  line-height: 54px;
}
.klaviyo p {
  font-size: 18px;
}

.book h2 {
  font-size: 2vw;
  font-weight: 400;
  line-height: 50px;
  text-transform: capitalize;
}
.sub {
  /* margin-top: -135px; */
  margin-top: -140px;
}
.banner .values {
  font-size: 26px;
}
.sub .card {
  border-radius: 12px;
  background: #fff;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25);
}
.sub .card .text-secondary {
  color: #8e8e8e !important;
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
.sub .card .subtext {
  color: #000;
}
.mobileview-card .subtext {
  color: #000;
}
.mobileview-card .mobileviews {
  padding: 0px 65px;
}
.border-end {
  border-right: 1px solid #ededed !important;
}

.keybenefits {
  padding-bottom: 80px;
  padding-top: 95px;
}
.keybenefits .text-bg-primary {
  color: #52a9a9 !important;
  background-color: transparent !important;
  padding: 10px;
  border-color: #52a9a9 !important;
  font-size: 20px;
  font-weight: 500;
}
.keybenefits .seed-item.active .title {
  font-size: 20px;
  color: var(--Gray0, #2d2f31);
  font-weight: 500;
}

.keybenefits .seed-item {
  max-height: 55px;
  overflow: hidden;
  background-size: 100%;
  font-size: 22px;
  color: #4f5152;
  font-weight: 400;
}
.keybenefits .seed-item.open {
  max-height: 1000px;
  background-size: 200%;
}
.keybenefits .seed-item.active {
  position: relative;
  font-size: 22px;
  font-weight: 400;
}
.keybenefits .seed-item {
  border-bottom: 1px solid #d6f1ea;
}
.keybenefits .seed-item.active:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  border-bottom: solid 2px #3a9c8c;
  animation: border_anim 8s linear forwards;
}

@keyframes border_anim {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
.divide-white p {
  max-height: 0;
  overflow: hidden;
  padding-top: 20px;
  color: #929292;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
}

.open {
  p {
    max-height: 1000px;
  }

  .fas {
    transform: rotatez(-180deg);
  }
}
.keybenefit-mobile-view .card {
  border: 1px solid #169693;
}
.keybenefit-mobile-view .card .card-body h6 {
  font-size: 18px;
}
.keybenefit-mobile-view .card .card-body p {
  color: #929292;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
}

.getting {
  background: linear-gradient(
    105deg,
    rgba(82, 169, 169, 0.06) 0%,
    rgba(175, 206, 62, 0.06) 48.9%
  );
  margin-bottom: 175px;
}
.getting .card .card-body .values {
  font-size: 22px;
}
.getting h1 {
  color: #52a9a9;
}

.getting p {
  color: #646464;
  font-size: 18px;
  font-weight: 400;
  line-height: 33px;
}
.getting .card .card-body h6 {
  font-size: 16px;
  font-weight: 500;
}
.getting .start_warmup {
  padding-left: 60px;
}

.getting .card {
  border-radius: 12px;
  background: #fff;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25);
}

.getting .card:hover {
  background-color: #169693;
  color: #fff;
  border-color: #169693;
}

.getting .btn-dark {
  background-color: #169693;
  border-color: #169693;
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease;
}
.getting .btn-dark:hover {
  background-color: #fff;
}
.getting .btn-dark:hover::before {
  right: 0;
}
.getting .btn-dark::before {
  content: "";
  position: absolute;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #cff8f2, #f1fcfb);
  z-index: -1;
  transition: right 0.9s ease;
}
.getting .btn-dark:hover {
  color: #169693 !important;
}
.getting .btn-start {
  color: #169693;
  border-color: #169693;
}
.getting .btn-start:hover {
  color: #169693 !important;
}

.testimonials {
  background: #fffcf4;
  position: relative;
}

.homepage .testimonials::before {
  content: "";
  top: 0;
  left: -177px;
  position: absolute;
  height: 460px;
  background: url(../images/bgcolor.svg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 450px;
  z-index: 0;
}
.homepage .testimonials::after {
  content: "";
  bottom: -82px;
  right: 0px;
  position: absolute;
  height: 310px;
  background: url(../images/bgcolor.svg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 245px;
  z-index: 0;
}

.fa-star {
  width: 35px;
  height: 35px;
  font-size: 22px;
  color: #fea500;
  line-height: 1.4;
}
.testimonials h6 {
  color: #fea500;
  font-size: 26px;
}
.testimonials .card {
  border-radius: 24px;
  border: 1px solid #ededed;
  background: #fff;
}
.testimonials .card .subtestimonials .card {
  border-radius: 8px;
  background: #fff;
  box-shadow: 0px 0.769px 3.077px 0px rgba(0, 0, 0, 0.25);
}

.testimonials .card .subtestimonials .card p {
  color: #6a6a6a;
  font-size: 18px;
  font-weight: 700;
}

.round {
  border-radius: 80px;
  background: transparent;
  color: #169693;
  border-color: #169693;
  display: inline-block;
  padding: 8px 25px 5px 25px !important;
  padding-left: 7px;
  border: 1px solid #169693;
  font-size: 18px;
  font-family: "Outfit", sans-serif;
}
.testimonials h1 {
  color: #169693;
}
.testimonial-card {
  background: white;
  border-radius: 22px;
  box-shadow: 0px 1.073px 20px 0px rgba(21, 21, 21, 0.15);
  padding: 20px 25px;
  position: relative;
}

.testimonial-card img {
  width: 72px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
  top: -30px;
  left: 20px;
  border: 3px solid white;
}

.verified-badge {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  color: #169693;
  position: absolute;
  right: 20px;
}

.testimonials .testimonial-card .verified-badge img {
  left: -21px;
  top: 3px;
  height: 16px;
  width: 16px;
  object-fit: contain;
  border: none;
  border-radius: unset;
}

.testimonial-card p {
  color: #5b5b5b;
  font-weight: 400;
  line-height: 140%;
  font-size: 19px;
}

.testimonial-card p .main {
  color: #52a9a9;
  font-size: 21px;
  font-weight: 400;
  line-height: 140%;
}
.testimonials .testimonial-card .author {
  color: #000;
  font-family: Prompt;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.testimonials .testimonial-card .role {
  color: #505050;
  font-weight: 400;
  font-size: 16px;
}

.testimonial-card .fa-star {
  color: #3ccf91;
  line-height: 1.5;
}

.usecases .fa-stars {
  color: #fea500;
  font-size: 20px;
}
.usecases h6 {
  font-size: 20px;
}
.usecases {
  padding-top: 40px;
  padding-bottom: 60px;
}
.usecases img {
  border-radius: 20px;
  object-fit: cover;
  overflow: hidden;
  width: 100%;
}
.usecases .item {
  position: relative;
  display: inline-block;
}

.usecases .play-button svg {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 51px;
  margin-top: -88px;
  z-index: 10;
  cursor: pointer;
}

.usecases .play-button i {
  top: 45%;
  left: 47%;
  margin-top: -66px;
  z-index: 10;
  cursor: pointer;
  font-size: 27px;
  display: inline-block;
  border-radius: 64%;
  position: absolute;
  color: #fff;
}

.usecases .fa-play:before {
  content: "\f04b";
  background-color: rgba(0, 0, 0, 0.52);
  border-radius: 50%;
  width: 60px;
  position: absolute;
  height: 58px;
  line-height: 2.3;
}
.usecases .owl-dots.disabled {
  text-align: center;
}

.usecases .owl-dots.disabled button.owl-dot:focus {
  outline: none;
}

.usecases .owl-carousel .owl-dots.disabled {
  display: block;
}

.usecases .owl-theme .owl-dots.disabled span {
  width: 19px;
  height: 5px;
}

.usecases .owl-theme .owl-dots .owl-dot.active span,
.usecases .owl-theme .owl-dots .owl-dot:hover span {
  background-color: #169693;
}

.usecases .owl-theme .owl-dots .owl-dot span {
  width: 19px;
  height: 5px;
}
.usecases .item h5 {
  color: #000;
  text-align: center;
  font-size: 20px;
  font-weight: 400;
}
.usecases .download a {
  color: #169693;
  font-size: 18px;
  text-decoration: underline;
}
.usecases .download a:hover {
  color: #36cbc2;
}
.pricing h1 {
  color: #0b2110;
}
.pricing .amount {
  margin-bottom: 25px;
}
.toggle-container {
  position: relative;
  width: 300px;
  height: 43px;
}
.toggle-checkbox {
  display: none;
}
.toggle-label {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(18, 17, 39, 0.04);
  border-radius: 50px;
  cursor: pointer;
  width: 100%;
  height: 100%;
  padding: 3px;
  box-sizing: border-box;
}
.toggle-button {
  position: absolute;
  top: 3px;
  left: 4px;
  width: 48.7%;
  height: calc(100% - 6px);
  background-color: #169693;
  border-radius: 50px;
  transition: transform 0.3s ease-in-out;
  z-index: 1;
  color: #fff;
}
.option {
  flex: 1;
  text-align: center;
  font-weight: bold;
  line-height: 40px;
  color: rgba(18, 17, 39, 0.56);
  z-index: 2;
  position: relative;
  transition: color 0.3s ease-in-out;
}
.toggle-checkbox:not(:checked) + .toggle-label .monthly {
  color: #627065;
}
.pricing .card:hover {
  background-color: #f1fcfb !important;
  border: 1.5px solid #66e2d7 !important;
}
.pricing .card:hover .card-body .getstarted,
.pricing .card:hover .card-body .started,
.pricing .card:hover .card-body .bookcall {
  background-color: unset;
  border-color: #169693;
  color: #169693;
}
.pricing .solo .card {
  border-radius: 4px;
  background: #fff;
  border-color: #fff;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.19);
}
.pricing .starter .card {
  border-radius: 0px;
  background: rgba(82, 169, 169, 0.05);
  box-shadow: 0px 0px 4px 0px rgba(24, 59, 86, 0.05);
  border: 0px solid rgba(82, 169, 169, 0.05);
}
.pricing .starter .card:hover {
  border: 1.5px solid #66e2d7;
}

.pricing .growth .card {
  border-radius: 4px;
  background: #fff;
  border-color: #fff;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.19);
}
.pricing .enterprise .card {
  border-radius: 4px;
  border: 1px solid #169693;
  background: rgba(82, 169, 169, 0.05);
  box-shadow: 0px 4px 4px 0px rgba(24, 59, 86, 0.1);
}
.pricing .card .card-body .month {
  font-size: 20px;
  font-weight: 400;
}
.pricing .card {
  padding: 32px 20px;
}
.pricing .card .title {
  font-size: 30px;
  font-weight: 400;
}
/* .pricing .enterprise .card h2 {
  padding: 14px 0px;
} */
.pricing .card .card-body .getstarted {
  border-radius: 8px;
  border: 1px solid #8c8c8c;
  padding: 8px 17px;
  color: #8c8c8c;
}
.pricing .card .card-body .started {
  border-radius: 8px;
  border: 1px solid #169693;
  background: #169693;
  color: #fff;
  padding: 8px 17px;
}
.pricing .enterprise .bookcall {
  background-color: #52a9a9;
  border-radius: 8px;
  padding: 8px 17px;
  border: 1px solid #52a9a9;
  color: #fff;
}
.pricing .start-50 {
  left: 65% !important;
  top: 25px;
}
.radio_container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  width: 190px;
  height: 41px;
  border-radius: 27px;
  box-shadow: 0px 10px 15px 0px rgba(24, 59, 86, 0.2);
}
.pricing .text_center {
  padding: 23px 0px;
}
.pricing .side_note {
  padding: 31px 40px;
  color: #169693;
}
.pricing .pricing_container {
  align-items: center;
  justify-content: center;
}

.pricing .arrows {
  position: absolute;
  bottom: 28px;
  right: 39%;
}
.pricing .rotate {
  display: inline-block;
  transform: rotate(180deg);
}
.pricing input[type="radio"] {
  appearance: none;
  display: none;
}
.pricing strike,
s {
  text-decoration: none;
  position: relative;
}

.pricing s::before,
strike::before {
  top: 50%;
  background: #ff0000e5;
  opacity: 0.7;
  content: "";
  width: 110%;
  position: absolute;
  height: 0.1em;
  border-radius: 0.1em;
  left: -5%;
  white-space: nowrap;
  display: block;
  transform: rotate(-15deg);
}

.pricing s.straight::before,
strike.straight::before {
  transform: rotate(-7deg);
  left: 0%;
  width: 100%;
}

.pricing label {
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: inherit;
  width: 81px;
  height: 31px;
  text-align: center;
  border-radius: 9999px;
  overflow: hidden;
  transition: linear 0.3s;
  color: #627065;
  font-weight: 600;
}

.pricing input[type="radio"]:checked + label {
  background-color: #169693;
  color: #fff;
  font-weight: 500;
  transition: 0.3s;
}
.pricing .note {
  color: #000;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}
.recommended {
  border-radius: 4px 4px 0px 0px;
  background: #169693;
  box-shadow: 0px 2px 5px 0px rgba(24, 59, 86, 0.25);
  margin-top: -31px;
  color: #fff;
  padding: 4px 8px;
}

.hr {
  border: 1px solid #ededed;
}
footer i {
  font-size: 20px;
  color: #169693;
}

footer .links a {
  color: #0a142f;
  font-size: 16px;
  font-weight: 400;
  opacity: 0.65;
  text-decoration: none;
}
footer .links a:hover {
  color: #169693;
  opacity: unset;
}
footer ul li {
  list-style: none;
  display: inline-block;
  text-decoration: none;
  padding: 0px 5px;
}
footer ul li a {
  color: #169693 !important;
}
footer .footer-items ul li a {
  color: #0a142f !important;
  opacity: 0.65;
}
footer .sub_icons {
  width: 47px;
  height: 45px;
  border-radius: 50%;
  text-align: center;
  line-height: 2.5;
  border: 2px solid #ededed;
  font-size: 18px;
}
.footer_bg {
  background-image: url("../images/footer_bg.svg");
  background-repeat: no-repeat;
  position: relative;
  height: 155px;
  background-size: cover;
  width: 100%;
}
.footer_bg p {
  color: #fff;
  padding: 102px 0px 11px 0px;
}

/*how it works*/
.reputation {
  background: linear-gradient(
      215deg,
      rgba(255, 255, 255, 0) 87.44%,
      rgba(134, 198, 196, 0.2) 99.95%
    ),
    linear-gradient(
      106deg,
      rgba(81, 176, 174, 0.51) 0%,
      rgba(255, 255, 255, 0.51) 17%,
      rgba(255, 255, 255, 0.51) 36%,
      rgba(81, 176, 174, 0.51) 100%
    );
}
.how-it-works .reputation {
  padding-top: 150px;
  padding-bottom: 100px;
}
.how-it-works .reputation h2 {
  font-size: 48px;
}
.how-it-works .btn-dark {
  background-color: #169693;
  border-color: #169693;
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease;
}
.how-it-works .btn-dark:hover {
  background-color: #fff;
}
.how-it-works .btn-dark:hover::before {
  right: 0;
}
.how-it-works .btn-dark::before {
  content: "";
  position: absolute;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #cff8f2, #f1fcfb);
  z-index: -1;
  transition: right 0.9s ease;
}
.how-it-works .btn-dark:hover {
  color: #169693 !important;
}
.how-it-works .btn-start {
  color: #169693;
  border-color: #169693;
}
.how-it-works .btn-start:hover {
  color: #169693 !important;
}
.how-it-works p {
  color: rgba(0, 0, 0, 0.6);
  font-weight: 400;
  line-height: 26px;
}
.sendcrux_warmup {
  padding-top: 80px;
  padding-bottom: 80px;
}
.sendcrux_warmup h2 {
  font-size: 35px;
  font-weight: 500;
}
.deliver h6,
.how h6 {
  color: #169693;
  font-size: 20px;
  font-weight: 500;
  line-height: 140%;
}
.how-it-works h2 {
  color: #272b30;
  font-size: 30px;
  font-weight: 500;
  line-height: 46px;
  text-transform: capitalize;
}
.deliver p,
.how p {
  color: #000;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.16px;
  opacity: 0.6;
}
.deliver p {
  padding-right: 36px;
}
.deliver ul li,
.how ul li {
  color: #121127;
  font-size: 14px;
  font-weight: 400;
  line-height: 180%;
}
.sendcrux_warmup ul li {
  list-style: none;
  margin-bottom: 9px;
}
.how-it-works .pricing ul li {
  color: rgba(0, 0, 0, 0.6);
  font-weight: 400;
  line-height: 26px;
}
.sendcrux_warmup ul li span.icon {
  background-color: #cff8f2;
  border-radius: 50%;
  width: 27px;
  height: 27px;
  line-height: 31px;
  text-align: center;
  display: inline-block;
  margin-right: 10px;
  color: #169693;
}
.how-it-works .pricing {
  background: linear-gradient(102deg, #f6ffff 0.01%, #fbfff0 100%);
}
.increase .increases {
  border-radius: 16px;
  border-radius: 24px;
  background: rgba(82, 169, 169, 0.1);
  padding: 50px;
}

.increase {
  padding: 100px 0px;
}

.increase p {
  font-size: 20px;
  line-height: 28px;
  padding: 15px;
}

.stats-container {
  text-align: center;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.stat-item {
  margin: 20px;
  border-bottom: 1px solid #ededed;
}
.stat-item .number {
  font-size: 28px;
  font-weight: 500;
  color: #333;
}
.stat-item .description {
  font-size: 1em;
  color: #777;
}
.whatsapp_icon img {
  width: 60px;
}
.whatsapp_icon {
  position: fixed;
  right: 20px;
  bottom: 100px;
  z-index: 99;
}
.strikethrough {
  text-decoration: line-through;
  color: red;
}
.pricing .card .card-body .customer {
  font-size: 15px;
}
.pricing .card .card-body .product {
  font-size: 16px;
}
.casestudy .top {
  padding-top: 150px;
  padding-bottom: 100px;
}
.casestudy .top .case-study-img img{
  width: 400px;
}
.casestudy .top .case-study-img h2{
  color:#169693;
}
.casestudy .headings {
  color: #169693;
}
/* .casestudy .top .doctor{
    background: linear-gradient(90deg, #169693 0%, #A6C936 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: underline;
  } */
.casestudy .doctor {
  background: linear-gradient(90deg, #169693 0%, #a6c936 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: inline-block;
  font-size: 25px;
}

.casestudy .doctor::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #169693 0%, #a6c936 100%);
}

.casestudy .doctor {
  text-decoration: underline !important;
}
.casestudy .results img {
  width: 100%;
}
.casestudy .screens .graphs {
  padding-right: 30px;
}
.casestudy .card {
  border: 1px solid #eaeaef;
  border-radius: 10px;
}
.casestudy h2 {
  font-size: 28px;
}
.casestudy h1 {
  font-size: 38px;
}
.casestudy .klaviyo h2 {
  font-size: 25px;
}
.casestudy .top .inactive img {
  width: 125px;
}
.casestudy .top p,
.casestudy .top ol li {
  font-size: 20px;
}
.casestudy .top .piecharts img {
  width: 150px;
}
.casestudy h4 {
  font-size: 20px;
}
.casestudy .top .affecting_revenue img {
  width: 100%;
}
.casestudy .pie_charts {
  font-size: 18px !important;
}

/* Sales */
.banners::before {
  content: "";
  top: 0;
  left: 0px;
  position: absolute;
  height: 500px;
  background: url(../images/banner_bg_img.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 500px;
  z-index: 0;
}
.banners::after {
  content: "";
  bottom: -780px;
  right: 0px;
  position: absolute;
  height: 485px;
  background: url(../images/banner_bg_imgs.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
  width: 270px;
  z-index: 0;
}
.sales .banners {
  padding-top: 170px;
}

.sales .fa-arrow-right {
  color: #52a9a9;
}
.sales .banners .open_rate {
  background: linear-gradient(91deg, #52a9a9 52.6%, #aecd3f 89.41%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sales .banners .badge {
  display: inline-block;
  padding: 5px 30px 6px 18px;
  border-radius: 25px;
  color: #4b5563;
  background: white;
  position: relative;
  box-shadow: 0px 0px 0px 2px rgba(126, 34, 207, 0.1);
}
.sales .banners .badge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 25px;
  padding: 2px;
  background: linear-gradient(90deg, #169693 0%, #a6c936 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.sales .banners .badge h6 {
  color: #4b5563 !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.sales .banners h1 {
  font-size: 55px;
}

.sales .banners .icons img {
  width: 55px;
}

.sales .banners .icons .yahoo_icon {
  width: 120px;
}
.sales .hr_line {
  color: #ededed;
}

.sales .problem .gradients .h5 {
  background: linear-gradient(
    91deg,
    #169693 0.35%,
    #aecd3f 22.68%,
    #169693 56.17%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  font-weight: 500;
}
.sales .banners h1::after {
  content: "";
  bottom: 275px;
  right: 354px;
  position: absolute;
  height: 100px;
  background: url(../images/cursor_icon.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 30px;
  z-index: 0;
}

.sales_main {
  position: relative;
}
.sales_main img{
  /* border:2px solid #169693; */
  border-radius: 20px;
  width: 660px;
}
.sales h5{
  font-size: 28px;
}
.sales h6 {
  font-size: 24px;
}
.sales .banner .sparkling_img img {
  width: 30px;
}
.sales_main::after {
  content: "";
  position: absolute;
  top: -60px;
  width: 70px;
  height: 110px;
  background: url(../images/banner_showingicon.svg);
  background-size: contain;
  z-index: -1;
  background-repeat: no-repeat;
  right: 315px;
}

.sales .scribble {
  display: inline-block;
  position: relative;
  font-size: 1.5em;
  color: #169693;
  margin: 0;
  padding: 0;
}

.sales .scribble::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 7px;
  background: url("../images/line.svg");
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
}
.sales .testimonials {
  margin-top: 135px;
  margin-bottom: 100px;
}
.sales .trusted p {
  font-size: 22px;
  color: #111827;
}
.sales .trusted .fw-semibold {
  font-size: 26px;
  color: #111827;
}
.sales .we .line-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 20px 0;
}

.sales .we .circle {
  width: 10px;
  height: 10px;
  background-color: #009688;
  border-radius: 50%;
  flex-shrink: 0;
}

.sales .we .horizontal-line {
  flex-grow: 1;
  height: 2px;
  background-color: #009688;
}

.sales .we h5 {
  color: #169693;
  font-size: 30px;
  font-weight: 500;
}

.sales .we .card .card-body h6 {
  font-size: 22px;
  font-weight: 500;
  color: #000;
}

.sales .we .card .card-body p {
  /* color: #000;
  font-size: 18px; */
  font-weight: 400;
  line-height: 28px;
}

.sales .we .card {
  border-radius: 8px;
  border: 1px solid #ededed;
}

.sales .we .card:hover {
  border-radius: 8px;
  border: 1px solid #ededed;
  background: #169693;
}

.sales .we .card:hover h6,
.sales .we .card:hover p {
  color: #fff;
}

.sales .hop_works {
  background: rgba(22, 150, 147, 0.12);
}
.sales p {
  color: #4b5563;
  font-size: 18px;
}
.sales .testimonials {
  background: #fffcf4;
  position: relative;
}

.sales .testimonials h6 {
  color: #fea500;
  font-size: 26px;
}
.sales .testimonials .card {
  border-radius: 24px;
  border: 1px solid #ededed;
  background: #fff;
}
.sales .testimonials .card .subtestimonials .card {
  border-radius: 8px;
  background: #fff;
  box-shadow: 0px 0.769px 3.077px 0px rgba(0, 0, 0, 0.25);
}

.sales .testimonials .card .subtestimonials .card p {
  color: #6a6a6a;
  font-size: 18px;
  font-weight: 700;
}

.sales .testimonials h1 {
  color: #169693;
}
.sales .testimonial-card {
  background: white;
  border-radius: 22px;
  box-shadow: 0px 1.073px 20px 0px rgba(21, 21, 21, 0.15);
  padding: 20px 25px;
  position: relative;
}

.sales .testimonial-card img {
  width: 72px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
  top: -30px;
  left: 20px;
  border: 3px solid white;
}

.verified-badge {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  color: #169693;
  position: absolute;
  right: 20px;
}

.testimonials .testimonial-card .verified-badge img {
  left: -21px;
  top: 3px;
  height: 16px;
  width: 16px;
  object-fit: contain;
  border: none;
  border-radius: unset;
}

.testimonial-card p {
  color: #5b5b5b;
  font-weight: 400;
  line-height: 140%;
  font-size: 19px;
}

.testimonial-card p .main {
  color: #52a9a9;
  font-size: 21px;
  font-weight: 400;
  line-height: 140%;
}
.testimonials .testimonial-card .author {
  color: #000;
  font-family: Prompt;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.testimonials .testimonial-card .role {
  color: #505050;
  font-weight: 400;
  font-size: 16px;
}

.testimonial-card .fa-star {
  color: #3ccf91;
  line-height: 1.5;
}

/* .timeline-point {
  transition-duration: 0.5s;
  border-radius: 50%;
  background: #F4F4F4 !important;
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  position: relative;
  color: var(--color);
  
}

.point-1::before{
  content: "";
  right: -75px;
  position: absolute;
  height: 165px;
  background: url(../images/ellipse.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 183px;
  z-index: 0;
}
.point-2::before{
  content: "";
  left: -54px;
  position: absolute;
  height: 168px;
  background: url(../images/ellipse_red.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 105px;
  z-index: 0;
}
.point-3::before{
  content: "";
  left: 25px;
  position: absolute;
  height: 169px;
  background: url(../images/ellipse_orange.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 105px;
  z-index: 0;
}
.point-4::before{
  content: "";
  left: -53px;
  position: absolute;
  height: 167px;
  background: url(../images/ellipse_blue.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 105px;
  z-index: 0;
}
.point-5::before{
  content: "";
  left: -54px;
  position: absolute;
  height: 169px;
  background: url(../images/ellipse_green.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 162px;
  z-index: 0;
}
.point-1 {
  border:8px solid #169693 !important;
  color: #169593;
  font-size: 24px;
  line-height: 2;
}
.point-2 {
  color: #c8532E;
  border:8px solid #C8532E !important;
  font-size: 24px;
  line-height: 2;
}

.point-3 {
  color:#F4A120;
  border:8px solid #F4A120 !important;
  font-size: 24px;
  line-height: 2;
}

.point-4 {
  color:#0B6C81;
  border:8px solid #0B6C81 !important;
  font-size: 24px;
  line-height: 2;
}

.point-5 {
  color:#BAC82E;
  border:8px solid #BAC82E !important;
  font-size: 24px;
  line-height: 2;
} */

/* .mobile-timeline .timeline > h3 {
  text-align: center;
  text-transform: capitalize;
  font-size: 2rem;
  font-weight: bold;
  padding: 1rem;
}

.mobile-timeline .timeline > .column {
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 1rem;
}

.mobile-timeline .timeline > .column::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  border: 1px solid rgba(49, 49, 49, 0.5);
  height: calc(100% / 5 * 4);
  z-index: -1;
}

.mobile-timeline .timeline > .column > .row {
  display: flex;
}

.mobile-timeline .timeline > .column > .row > .text {
  flex: 1 1 calc(50% - 50px);
  position: relative;
  border-radius: 5px;
  color:#fff;
}

.mobile-timeline .timeline > .column > .row p {
  padding: 1rem;
  color: #fff;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.mobile-timeline .timeline > .column > .row > .icon {
  flex: 1 1 100px;
}

.mobile-timeline .timeline > .column > .row > .icon > div {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  margin: auto;
  position: relative;
}

.mobile-timeline .timeline > .column > .row > div i {
  display: block;
  font-size: 1.5rem;
  color: rgb(0, 85, 255);
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mobile-timeline .timeline > .column > .row > .time {
  flex: 1 1 calc(50% - 50px);
  padding-top: 1rem;
}

.mobile-timeline .timeline > .column > .row:nth-child(even) {
  flex-direction: row-reverse;
}

.mobile-timeline .timeline > .column > .row:nth-child(even) > div:last-child {
  text-align: end;
}

.mobile-timeline .timeline > .column > .row:nth-child(even) h3::before {
  content: "";
  position: absolute;
  left: -19px;
  border: 10px solid rgba(0, 0, 0, 0);
  border-right-color: black;
  top:10px;
}
.mobile-timeline .timeline > .column > .row:nth-child(odd) h3::after {
  content: "";
  position: absolute;
  right: -20px;
  border: 10px solid rgba(0, 0, 0, 0);
  border-left-color: black;
  top:10px;
} */

/* mobile version */
/* @media screen and (max-width: 768px) {
  .mobile-timeline .timeline > .column::before {
    left: 50px;
    height: calc(100% / 5 * 4);
    top: 50px;
  }

  .mobile-timeline .timeline > .column > .row {
    flex-flow: column wrap;
    height: 250px;
  }

  .mobile-timeline .timeline > .column > .row:nth-child(even) {
    flex-direction: column;
  }

  .mobile-timeline .timeline > .column > .row:nth-child(even) > .time:last-child {
    text-align: start;
  }

  .mobile-timeline .timeline > .column > .row > .icon {
    order: 1;
    flex: 1 1 100%;
    padding-top: 50px;
    width: 100px;
  }

  .mobile-timeline .timeline > .column > .row > .time {
    order: 2;
    flex: 1 1 50px;
    width: calc(100% - 100px);
  }

  .mobile-timeline .timeline > .column > .row > .text {
    order: 3;
    flex: 1 1 calc(100% - 50px);
    width: calc(100% - 100px);
   
  }

  .mobile-timeline .timeline > .column > .row:nth-child(odd) h3::before {
    content: "";
    position: absolute;
    left: -20px;
    border: 10px solid rgba(0, 0, 0, 0);
    border-right-color: black;
  }
  .mobile-timeline .timeline > .column > .row:nth-child(odd) h3::after {
    border: none;
  }
} */

.hop_works .card {
  border-radius: 32px;
  background: #fff;
  border: 1px solid transparent;
}

.hop_works .card-text {
  display: none;
}

/* Show the paragraph text when hovering over the card */
.hop_works .card:hover .card-text {
  display: block;
  color: #fff;
  font-size: 16px;
}

.hop_works .card:hover {
  background: #169693;
  color: #fff;
}
.hop_works .card {
  transition: #169693 0.3s ease, color 0.3s ease;
}

.hop_works .card:hover {
  background: #169693;
  color: #fff;
}

.hop_works .highopenrate_works {
  padding-left: 15px;
}

.hop_works .card:hover .card-body img {
  top: 52px;
}

.hop_works .card .card-body img {
  width: 52px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
  left: -23px;
  top: 22px;
}
.sales .advantages{
  padding-top: 80px;
}
.sales .advantages h5 {
  background: linear-gradient(91deg, #169693 0.35%, #AECD3F 22.68%, #169693 56.17%);
  /* background: linear-gradient(91deg, #169693 6%, #bac82e 91.68%); */
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  font-size: 1.5em;
}
.sales .essential h5{
color: #000 !important;
background-color: unset !important;
-webkit-text-fill-color: unset !important;
}
.sales .advantages img{
  border-radius: 8px;
  box-shadow: 0px 0.769px 3.077px 0px rgba(0, 0, 0, 0.25);
}
.sales .truths {
  font-size: 28px !important;
}
.sales .advantages p {
  font-size: 18px;
  /* color: #111827; */
}

.sales .investment i {
  color: #169693;
}

.sales .start_today .card {
  border-radius: 12px;
  background: #169693;
  border-color: #169693;
  color: #fff;
}
.sales .start_today .card .card-body {
  padding: 70px 40px;
}
.sales .start_today .btn-start {
  background-color: #fff !important;
  color: #169693 !important;
  border-color: #169693;
}

.sales .start_today {
  position: relative;
  margin-top: 90px;
}
.sales .the-only{
  padding-left:110px;
}
.sales .start_today .card .card-body::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/tree.svg);
  z-index: 0;
  background-size: auto;
  background-repeat: no-repeat;
  background-position: right top;
}
.sales .start_today .card .card-body::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/circles_bgicon.svg);
  z-index: 0;
  background-size: auto;
  background-repeat: no-repeat;
  background-position: left bottom;
}

.accordion-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.accordion {
  border-radius: 5px;
  background: rgba(22, 150, 147, 0.01);
  margin-bottom: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
  
}
.accordion:focus{
  box-shadow:unset !important;
  box-sizing: unset !important;
}
.accordion-button:focus {
  border-color: #fff !important;
  box-shadow:unset !important;
  box-sizing: unset !important;
}
.accordion-header {
  /* padding: 15px; */
  font-weight: bold;
  color: #333;
  cursor: pointer;
}
.accordion-item{
  border:0px solid #000;
}
.accordion-content {
  padding: 15px;
  background-color: #fff;
  color: #333;
  display: none;
}

.accordion.expanded .accordion-content {
  display: block;
}

.accordion-button {
  border-radius: 0px !important;
background: #169693 !important;
color: #fff !important;
border-top-left-radius: 5px !important;
border-top-right-radius: 5px !important;
}
 .accordion-button.collapsed{
  background-color:  rgba(22, 150, 147, 0.01) !important;
  color:#000 !important;
  border-bottom-left-radius: 5px !important;
  border-bottom-right-radius: 5px !important;
  border-radius: 5px;
border-right: 1px solid rgba(0, 0, 0, 0.13) !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.13) !important;
border-left: 1px solid rgba(0, 0, 0, 0.13) !important;

 }
/* .accordion-button:not(.collapsed){
  background-color: #169693 !important;
  color:#fff !important;
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
} */
.accordion-collapse.collapse.show {
  background-color: #169693 !important;
  color:#fff !important;
  border-bottom-left-radius: 5px !important;
  border-bottom-right-radius: 5px !important;
  
}


.accordion-button:not(.collapsed)::after {
  color: #fff !important;
}

/* .accordion-item:not(.collapsed) {
  background-color: #169693;
  color: #fff;
  border-radius: 5px;
} */
/* .accordion-button:focus{
  border-color:#fff !important;
} */

/* .timeline-point {
  transition-duration: 0.5s;
  border-radius: 50%;
  background: linear-gradient(145deg, #1e2125, #23282c);
  box-shadow: 13.4px 13.4px 40.2px #1c1f23, -13.4px -13.4px 40.2px #262b2f;
  display: grid;
  place-items: center;
  width: 134px;
  position: relative;
  color: var(--color);

  
}

.timeline-point::before {
  content: "";
  width: 200px;
  height: 200px;
  z-index: -1;
  border-radius: 50%;
  position: absolute;
  background: conic-gradient(
    var(--color) var(--angle),
    transparent 0deg 360deg
  );
  animation: rotateBorder 1s linear var(--delay) forwards;
}

.timeline-point:nth-child(odd)::before {
  transform: rotate(-90deg);
}

.timeline-point:nth-child(even)::before {
  transform: rotate(90deg) scaleY(-1);
} */

/* Custom property for angle */
/* @property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
} */

/* .timeline-point:nth-child(1) {
  --color: #c1121f;
  --delay: 0s;
}

.timeline-point:nth-child(2) {
  --color: #ffc300;
  --delay: 1s;
}

.timeline-point:nth-child(3) {
  --color: #2ec4b6;
  --delay: 2s;
}

.timeline-point:nth-child(4) {
  --color: #6536ff;
  --delay: 3s;
}

.timeline-point:nth-child(5) {
  --color: #3a86ff;
  --delay: 4s;
}


.popup {
  width: 321.6px;
  height: auto;
  max-height: 0;
  background-color: var(--color);
  display: grid;
  grid-template-columns: 16% 84%;
  position: absolute;
  color: white;
  border-radius: 30px;
  box-shadow: 6.7px 6.7px 21.4px #17191d, -6.7px -6.7px 21.4px #212529;

  transform-origin: bottom bottom;
  animation: expandPopup 0.5s linear calc(var(--delay) + 0.5s) forwards;
}

.timeline-point:nth-child(odd) .popup {
  bottom: 221.1px;
}

.timeline-point:nth-child(even) .popup {
  top: 221.1px;
}


.popup-number {
  grid-row: span 2;
  display: grid;
  font-size: 2rem;
  font-weight: bold;
  place-items: center;
  cursor: auto;
  animation: fadeIn 0.5s linear calc(var(--delay) + 0.7s) forwards;
  opacity: 0;
  height: 100%;
}


.popup-title {
  color: var(--color);
  padding-bottom: 6.7px;
  font-size: 20.1px;
  font-weight: 900;
}


.popup-details {
  padding: 20.1px;
  background-color: #1c1f23;
  border-radius: 30px;
  opacity: 0;
  font-weight: 500;
  user-select: none;
  cursor: auto;
  overflow: hidden;
  font-size: 0.8rem;
  text-align: justify;
  background: linear-gradient(145deg, #16181b, #22262b);
  margin: 3.35px;
  animation: fadeIn 0.5s linear calc(var(--delay) + 0.7s) forwards;
}

.popup::before {
  content: "";
  width: 6.7px;
  height: 0;
  border-radius: 20px;
  background-color: var(--color);
  position: absolute;
  left: 50%;
  top: -41.9px;
  display: flex;
  animation: drawLine 0.5s linear var(--delay) forwards;
}

.timeline-point:nth-child(odd) .popup:before {
  top: calc(100% + 47px);
  transform: rotateX(180deg);
  transform-origin: top;
}



@keyframes rotateBorder {
  from {
    --angle: 0deg;
  }

  to {
    --angle: 180deg;
  }
}

@keyframes expandPopup {
  0% {
    max-height: 0;
  }

  100% {
    max-height: 200px;
  }
}

@keyframes drawLine {
  0% {
    height: 0%;
    opacity: 0;
  }

  100% {
    height: 33.5px;
    opacity: 1;
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@media (max-width: 1050px) {
  body {
    height: auto;
    display: block;
  }
  .timeline-container {
    flex-direction: column;
    height: auto;
    width: 100%;
    padding: 100px 0px;
  }

  .timeline-point {
    height: 134px;
    flex-shrink: 0;
    left: calc(-321px / 2);
    margin: 0px auto;
    position: relative;
  }

  .timeline-point:nth-child(odd)::before {
    transform: rotate(0deg);
  }

  .timeline-point:nth-child(even)::before {
    transform: rotate(0deg) scaleX(-1);
  }

  .timeline-point .popup:before {
    display: none;
  }

  .timeline-point:nth-child(odd) .popup {
    bottom: auto;
    right: -370.1px;
  }

  .timeline-point:nth-child(even) .popup {
    top: auto;
    right: -370.1px;
  }
} */
/* .timeline-container {
  display: flex;
  gap: 33.5px;
  width: 100%;
  height: 134px;
  justify-content: center;
  font-weight: 900;
  font-size: 67px;
} */

.timeline {
  display: flex;
  flex-direction: column;
  gap: 80px;
  justify-content: center;
}
.timeline {
  position: relative;
  padding: 2rem 0;
  margin: 2rem 0;
}
.timeline::before {
  content: "";
  position: absolute;
  background: url(../images/background_curve.svg);
  top: 0;
  bottom: 0;
  left: 40%;
  width:313px;
  /* width: 295px; */
  margin-left: -3px;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.timeline-item {
  position: relative;
  width: 50%;
  padding: -2px 37px;
  text-align: center;
  justify-content: end;
}
.timeline-item-left {
  left: 0;
}
.timeline-item-right {
  left: 50%;
}
.timeline-item .content {
  padding: 0px 105px;
  border-radius: 0.5rem;
  position: relative;
  top: 0px;
  align-items: center;
  text-align: center;
}
.timeline-item .content .card-title {
  font-size: 20px;
}
.timeline-item .content p {
  font-size: 16px;
  /* color: #111827; */
  font-weight: 400;
}
.timeline .timeline-item-left .blue .card-title {
  color: #169693;
}
.timeline .timeline-item-right .red .card-title {
  color: #c8532e;
}
.timeline .timeline-item-left .orange .card-title {
  color: #f4a120;
}
.timeline .timeline-item-right .purple .card-title {
  color: #0b6c81;
}
.timeline .timeline-item-left .green .card-title {
  color: #bac82e;
}

.timeline .content img {
  margin-top: -9px;
}
.timeline .timeline-item-left .texts {
  padding-left: 12px;
}
.timeline .timeline-item-right .text-right {
  padding-right: 12px;
}


.mobile-view-warmup-today .card{
  border-radius: 8px;
border: 1px solid #EDEDED;
background: #FFF;
}
.mobile-view-warmup-today .card p{
  color:#777;
}

.mobile-view-warmup-today .card .card_text{
  padding:20px;
}
.mobile-view-warmup-today .card .left-img img{
  margin-left: -27px;
}
.mobile-view-warmup-today .blue {
  background-color: #169693;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  
}
.mobile-view-warmup-today .blue p{
  color:#169693;
}
.mobile-view-warmup-today .blue_card .card h6{
  color:#169693;
  font-weight: 600;
}
.mobile-view-warmup-today .red_card .card h6{
  color:#C8532E;
  font-weight: 600;
}
.mobile-view-warmup-today .red {
  background-color: #C8532E;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.mobile-view-warmup-today .red p{
  color:#C8532E;
}
.mobile-view-warmup-today .card .right-img img{
  margin-right: -27px;
  z-index: 9;
}

.mobile-view-warmup-today .orange {
  background-color: #F4A120;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  
}
.mobile-view-warmup-today .orange_card .card h6{
  color:#F4A120;
  font-weight: 600;
}
.mobile-view-warmup-today .orange p{
  color:#F4A120;
}

.mobile-view-warmup-today .violet {
  background-color: #0B6C81;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  
}
.mobile-view-warmup-today .violet_card .card h6{
  color:#0B6C81;
  font-weight: 600;
}
.mobile-view-warmup-today .violet p{
  color:#0B6C81;
}

.mobile-view-warmup-today .green {
  background-color: #BAC82E;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  
}
.mobile-view-warmup-today .green p{
  color:#BAC82E;
}
.mobile-view-warmup-today .green_card .card h6{
  color:#BAC82E;
  font-weight: 600;
}

/* @media only screen and (max-width: 1440px){
.banner{
    height: 920px;
}
.klaviyo h1{
    font-size: 40px;
}
.book h2{
    font-size: 26px;
}
  } */
/* @media only screen and (max-width: 1390px){
    .banner {
        height: 845px;
    }
}
@media only screen and (max-width: 1320px){
    .klaviyo h1 {
        font-size: 36px;
    }
}
@media only screen and (max-width: 1280px){
    .banner {
        height: 777px;
    }
}
@media only screen and (max-width: 1150px){
    .klaviyo h1 {
        font-size: 31px;
        line-height: 45px;
    }
    .book h2 {
        font-size: 24px;
    }
    .banner {
        height: 750px;
    }
} */
@media only screen and (max-width: 1440px) {
  .casestudy h1 {
    font-size: 32px;
  }
  .pricing .arrows {
    bottom: 25px;
    right: 38%;
  }
  .pricing .start-50 {
    left: 66% !important;
  }
  .sales .banners h1::after {
    content: "";
    bottom: 185px;
    right: 320px;
  }
  .sales .banners .icons .yahoo_icon {
    width: 120px;
  }
}
@media only screen and (max-width: 1260px) {
  .banner {
    height: calc(100vh - -50px);
  }
  .casestudy h1 {
    font-size: 32px;
  }
}
@media only screen and (max-width: 1024px) {
  .casestudy h1 {
    font-size: 27px;
  }
  .casestudy .top .piecharts img {
    width: 125px;
  }
  .casestudy h2 {
    font-size: 24px;
  }
  .main-banner {
    padding-top: 70px;
  }
  .klaviyo h1 {
    line-height: 45px;
  }
  .book h2 {
    line-height: 37px;
  }
  .klaviyo p {
    font-size: 17px;
  }
  .deliver p {
    padding-right: 0px;
  }
  .sub {
    margin-top: -95px;
  }
  .sub h2 {
    font-size: 25px;
  }
  .sub .card .text-secondary {
    font-size: 14px;
    line-height: 21px;
  }
  .sub .card .subtext {
    font-size: 14px;
  }
  .keybenefits .seed-item {
    font-size: 20px;
  }
  .divide-white p {
    font-size: 16px;
  }
  .fa-star {
    font-size: 20px;
    line-height: 1.8;
  }
  .testimonials .main-img img {
    height: 56px;
    width: 54px;
  }
  .usecases .play-button i {
    top: 45%;
  }
  .pricing .card .title {
    font-size: 26px;
  }
  .pricing h1 {
    font-size: 35px;
  }
  .pricing h2 {
    font-size: 25px;
  }
  .pricing .card .card-body p {
    font-size: 13px;
  }
  .usecases .item h5 {
    font-size: 18px;
  }
  .how-it-works .reputation h2 {
    font-size: 40px;
  }
  .deliver p,
  .how p {
    font-size: 14px;
  }
  .how-it-works h2 {
    font-size: 27px;
    line-height: 42px;
  }
  .pricing .arrows {
    position: absolute;
    bottom: 29px;
    right: 34%;
  }

  .pricing .start-50 {
    left: 72% !important;
  }
  .sales .banners h1::after {
    bottom: 183px;
    right: 102px;
  }
  .timeline-item-left .timeline-item {
    width: 61%;
  }
  .timeline {
    gap: 0px;
    margin: 0px;
  }
  .timeline::before {
    /* width: 295px; */
    background-size: unset;
  }
  .timeline-item-right .content{
    padding: 0px 0px 0px 70px;
  }
  .timeline-item-left .content{
    padding: 0px 0px 0px 70px;
  }
 .timeline-item-right .timeline-item {
  width: 52%;
  margin-top: -30px;
}
  /* .timeline-item .content {
  padding:0px;
} */
  .banners::after {
    background: unset;
  }
  .banners::before {
    background: unset;
  }
  .hop_works img{
    width:450px;
  }
  
  .sales_main::after {
    right: 75px;
  }

  .timeline {
    padding: 4rem 0;
  }
  .sales h6 {
    font-size: 20px;
}
.sales .sales .the-only {
  padding-left: 85px;
}
.sales .advantages {
  padding-top: 50px;
}
}
@media only screen and (max-width: 991px) {
  .pricing .side_note {
    padding: 30px 0px;
  }
  .pricing .start-50 {
    left: 78% !important;
  }
  .pricing .arrows {
    right: 29%;
  }
}
@media only screen and (max-width: 992px) {
  .main-banner {
    padding-top: 155px;
  }
  .klaviyo h1 {
    line-height: 40px;
  }
  .getting .start_warmup {
    padding-left: 175px;
  }
}
@media only screen and (max-width: 840px) {
  .getting .start_warmup {
    padding-left: 100px;
  }
  .testimonials h6 {
    font-size: 20px;
  }
  .fa-star {
    font-size: 15px;
    width: 28px;
    height: 28px;
  }
  .klaviyo p {
    font-size: 14px;
  }
  .mobile-view-warmup-today .card h6 {
    font-size: 19px;
  }
  .sales .the-only {
    padding-left: 0px;
  }
  .sales .advantages {
    padding-top: 10px;
}
}
@media only screen and (max-width: 768px) {
  .casestudy .top {
    padding-top: 135px;
  }
  .casestudy .screens .graphs {
    padding-right: 0px;
  }
  nav img {
    width: 175px;
  }
  .btn-dark {
    font-size: 16px;
  }
  .book h2 {
    line-height: 33px;
  }
  .banner .btn-dark {
    padding: 10px 35px;
  }
  .getting .start_warmup {
    padding-left: 90px;
  }
  .klaviyo h1 {
    font-size: 35px;
    line-height: 43px;
  }
  .book h2 {
    font-size: 26px;
    line-height: 41px;
  }
  .banner-mobile .book {
    height: 455px;
  }
  .mobileview-card {
    padding: 80px 0px 35px 0px;
  }
  .pricing h1 {
    font-size: 26px;
  }
  .testimonial-card p {
    font-size: 16px;
  }
  .testimonial-card p .main {
    font-size: 16px;
  }
  .testimonials .testimonial-card .author {
    font-size: 16px;
  }
  .testimonials .card .subtestimonials .card p {
    font-size: 14px;
  }
  .testimonials h6 {
    font-size: 16px;
  }
  .fa-star {
    font-size: 16px;
    line-height: 1.6;
  }
  .usecases .play-button i {
    top: 42%;
  }
  .pricing .arrows {
    bottom: 22px;
    right: 44%;
  }
  .testimonials::after {
    bottom: -58px;
  }
  .sendcrux_warmup {
    padding-bottom: 0px;
  }
  .how-it-works .reputation h2 {
    font-size: 35px;
  }
  .banner-mobile .book::before {
    top: -52px;
  }
  .pricing .arrows {
    right: 29%;
    bottom: 30px;
  }
  .sales .banners .icons .yahoo_icon {
    width: 110px;
  }
  .sales .banners h1 {
    font-size: 48px;
  }
  .sales .banners h1::after {
    display: none;
  }
  .sales_main::after {
    display: none;
  }
  .sales .truths {
    font-size: 22px !important;
}
.sales .advantages p {
  font-size: 16px;
}
.sales h5 {
  font-size: 24px;
}
}

@media only screen and (max-width: 767px) {
  .pricing .arrows {
    bottom: 30px;
    right: 83%;
  }
  .pricing .side_note {
    font-size: 10px;
  }
  .pricing .arrows {
    right: 22%;
  }
  .pricing .start-50 {
    top: 35px;
    left: 83% !important;
  }
}

@media only screen and (max-width: 700px) {
  .getting .start_warmup {
    padding-left: 30px;
  }
}
@media only screen and (max-width: 650px) {
  .testimonials::after {
    background: unset;
  }
  .testimonials::before {
    background: unset;
  }
}
@media only screen and (max-width: 600px) {
  .klaviyo h1 {
    /* font-size: 32px; */
    font-size: 25px;
  }
  .book h2 {
    font-size: 23px;
  }
}

@media only screen and (max-width: 515px) {
  .pricing .start-50 {
    left: 81% !important;
    font-weight: 700;
  }
  .sales .the-only{
    padding-left:10px;
  }
}
@media only screen and (max-width: 426px) {
  .usecases .play-button i {
    top: 34%;
    left: 43%;
    font-size: 24px;
  }
  .usecases .fa-play:before {
    width: 50px;
    height: 51px;
  }
  .pricing .start-50 {
    left: 86% !important;
    top: 24px;
  }
  .pricing .side_note {
    font-size: 8px;
  }
}
@media only screen and (max-width: 427px) {
  .casestudy h1 {
    font-size: 23px;
  }
  .casestudy h2 {
    font-size: 20px;
  }
  .banners::before {
    display: none;
  }
  .banners::after {
    display: none;
  }
  .sales .banners .badge h6 {
    font-size: 12px;
  }
  .sales .banners h1 {
    font-size: 26px;
  }
  .sales .banners p {
    font-size: 12px;
  }
  .sales .trusted p {
    font-size: 16px;
  }
  .sales .trusted .fw-semibold {
    font-size: 20px;
  }
  .sales h5 {
    font-size: 22px !important;
  }
  .sales .we .card .card-body h6 {
    font-size: 20px;
  }
  .sales .banners {
    padding-top: 150px;
  }
  .sales .banners .badge h6 {
    font-size: 12px;
  }
  .sales .start_today .card .card-body::before{
    background: unset;
  }
  .sales .start_today .card .card-body::after{
    background: unset;
  }
  .sales .start_today .card .card-body {
    padding: 45px 40px;
}
.highopenrate_works .card .card-body h4{
  font-size: 18px;
}
.sales .truths {
  font-size: 20px;
}
.mobile-view-warmup-today .blue{
  padding:0px 30px;
}
.mobile-view-warmup-today .red{
  padding:0px 30px;
}
.mobile-view-warmup-today .orange{
  padding:0px 30px;
}
.mobile-view-warmup-today .violet{
  padding:0px 30px;
}
.mobile-view-warmup-today .green{
  padding:0px 30px;
}
.sales .truths {
  font-size: 19px !important;
}
}
@media only screen and (max-width: 425px) {
  .casestudy .top p,
  .casestudy .top ol li {
    font-size: 18px;
  }
  .title-text {
    font-size: 20px;
  }
  .pricing .text_center {
    padding: 18px 0px;
  }
  nav img {
    width: 195px;
  }
  .testimonials::before {
    background: unset;
  }
  .testimonials::after {
    background: unset;
  }
  .getting .start_warmup {
    padding-left: 0px;
  }
  .getting .btn-dark {
    padding: 12px 34px;
  }
  .getting .buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .klaviyo h1 {
    font-size: 25px;
  }
  .book h2 {
    font-size: 21px;
  }
  .testimonials h6 {
    font-size: 22px;
  }
  .fa-star {
    font-size: 20px;
    line-height: 1.6;
  }
  .testimonials .card .subtestimonials .card p {
    font-size: 16px;
  }
  .testimonials h2 {
    font-size: 23px;
  }
  .usecases .item h5 {
    font-size: 14px;
  }
  .pricing h1 {
    font-size: 20px;
  }

  .pricing .arrows {
    bottom: 25px;
    right: 38%;
  }
  .pricing .side_note {
    padding: 32px 31px;
  }
  .footer_bg p {
    padding: 90px 0px 5px 0px !important;
  }
  .sales .banners .icons .yahoo_icon {
    width: 100px;
}
.sales .banners .icons img {
  width: 35px;
}
  .getting {
    margin-bottom: 125px;
  }
  .how-it-works .reputation h2 {
    font-size: 35px;
  }
  .deliver ul li,
  .how ul li {
    font-size: 16px;
  }
  footer img {
    width: 250px;
  }
  .pricing .arrows {
    right: 15%;
  }
  .pricing .side_note {
    padding: 32px 0px;
  }
  .pricing .arrows {
    right: 15%;
  }
  .sales .advantages {
    padding-top: 0px;
}

}
@media only screen and (max-width: 416px) {
  .klaviyo h1 {
    font-size: 21px;
  }
  .klaviyo p {
    font-size: 13px;
  }
  .klaviyo h1 {
    line-height: 35px;
  }
}
@media only screen and (max-width: 400px) {
  .mobileview-card .mobileviews {
    padding: 0px 20px;
  }
}
@media only screen and (max-width: 390px) {
  .mobileview-card .mobileviews {
    padding: 0px 40px;
  }
  .mobileview-card .mobileviews {
    padding: 0px 20px;
  }
  .sales .truths {
    font-size: 18px !important;
}
.sales .advantages p {
  font-size: 14px;
}
.sales .start_today .card .card-body {
  padding: 35px 3px;
}
}

@media only screen and (max-width: 375px) {
  .testimonials h2 {
    font-size: 20px;
  }
  .usecases h6 {
    font-size: 16px;
  }
  .pricing h1 {
    font-size: 18px;
  }
  .how-it-works .reputation h2 {
    font-size: 30px;
  }
  .casestudy h1 {
    font-size: 20px;
  }
  .sales .banners .badge h6 {
    font-size: 10px;
}
.sales .banners h1 {
  font-size: 23px;
}
.sales .we h5 {
  font-size: 20px;
}

.sales .we .card .card-body h6 {
  font-size: 19px;
}
.sales .we .card .card-body p {
  font-size: 16px;
}
.mobile-view-warmup-today .blue {
  padding: 0px 30px;
}
.mobile-view-warmup-today .red {
  padding: 0px 30px;
}
.mobile-view-warmup-today .orange {
  padding: 0px 30px;
}
.mobile-view-warmup-today .violet {
  padding: 0px 30px;
}
.mobile-view-warmup-today .green{
  padding: 0px 30px;
}
.casestudy .doctor{
  font-size: 18px;
}
}

@media only screen and (max-width: 320px) {
  .casestudy .top p,
  .casestudy .top ol li {
    font-size: 16px;
  }
  .pricing .side_note {
    padding: 32px 0px;
  }
  .pricing .arrows {
    bottom: 25px;
    right: 7%;
  }
  .deliver ul li,
  .how ul li {
    font-size: 13px;
  }

  .testimonials .testimonial-card .verified-badge img {
    top: -1px;
  }
  .verified-badge {
    font-size: 10px;
  }
  .pricing .start-50 {
    left: 91% !important;
    top: 17px;
  }
  .title-text {
    font-size: 18px;
  }
  .sales .banners .badge h6 {
    font-size: 9px;
}
.sales .banners h1 {
  font-size: 20px;
}
}
/* *{
  box-shadow: 0px 0px 0px 1px red;
} */