/* common css */

body {
  background: #000b0f;
}

.k-add-nav-shadow {
  background: #000;
}

.bg {
  background: var(--hero-top-img);
  background-position: top;
  background-repeat: no-repeat;
}

.dotanime1 {
  position: absolute;
  top: 12%;
  left: 52%;
  filter: blur(2px);
  animation: dotFloat 4s infinite;
}

.dotanime2 {
  position: absolute;
  top: 40%;
  left: 85%;
  animation: dotFloat1 4s infinite;
}

.dotanime3 {
  position: absolute;
  top: 58%;
  left: 82%;
  animation: dotFloat 6s infinite;
}

.dotanime4 {
  position: absolute;
  top: 63%;
  left: 47%;
  animation: dotFloat1 6s infinite;
}

.dotanime5 {
  position: absolute;
  top: 42%;
  left: 51%;
  animation: dotFloat2 7s infinite;
}

.dotanime6 {
  position: absolute;
  top: 24%;
  left: 44%;
  opacity: 0.5;
  animation: dotFloat3 10s infinite;
}

.dotanime7 {
  position: absolute;
  top: 20%;
  left: 85%;
  animation: dotFloat3 14s infinite;
}

.dotanime8 {
  position: absolute;
  top: 30%;
  left: 76%;
  animation: dotFloat3 14s infinite;
}

@keyframes dotFloat {
  0% {
    transform: translatey(0px);
    filter: brightness(120%);
  }
  50% {
    transform: translatey(-10px);
    filter: brightness(200%);
  }
  100% {
    transform: translatey(0px);
    filter: brightness(120%);
  }
}

@keyframes dotFloat1 {
  0% {
    transform: translateY(0px) translateX(4px);
    opacity: 1;
  }
  30% {
    transform: translateY(15px) translateX(7px);
    opacity: 0.5;
  }
  100% {
    transform: translateY(0px) translateX(3px);
    opacity: 1;
  }
}

@keyframes dotFloat2 {
  0% {
    transform: translateY(0px) translateX(0px);
    opacity: 1;
  }
  30% {
    transform: translateY(-15px) translateX(7px);
    opacity: 0.5;
  }
  60% {
    transform: translateY(-15px) translateX(-7px);
    opacity: 0.5;
  }
  100% {
    transform: translateY(0px) translateX(0px);
    opacity: 1;
  }
}

@keyframes dotFloat3 {
  0% {
    transform: translateY(0px) translateX(0px);
  }
  25% {
    transform: translateY(15px) translateX(7px);
  }
  75% {
    transform: translateY(-20px) translateX(14px);
  }
  100% {
    transform: translateY(0px) translateX(0px);
  }
}

@keyframes heroFloat {
  0% {
    transform: translateY(0px) scale(1.4);
    filter: brightness(120%);
  }
  50% {
    transform: translateY(10px) scale(1.4);
    filter: brightness(200%);
  }
  100% {
    transform: translateY(0px) scale(1.4);
    filter: brightness(120%);
  }
}

.startbutton {
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #504ee4 !important;
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  height: 2.75rem;
}

h2 {
  font-weight: 700;
  font-size: 2rem;
  line-height: 3rem;
  text-align: center;
  letter-spacing: 0.01em;
  color: #f2f7f9;
}

#productHuntLogo {
  left: -250px;
}

#productHuntLogo,
.sub a {
  opacity: 0;
  transition: all 0.6s;
  position: relative;
}

.animate {
  opacity: 1 !important;
}

.sub {
  position: relative;
  border-radius: 1.875rem;
  font-style: normal;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.5rem;
  letter-spacing: 0.01em;
  color: #2180a2;
  width: fit-content;
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-end;
}

.subHead {
  background: #01151c;
  position: relative;
  border-radius: 1.875rem;
  font-style: normal;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.5rem;
  letter-spacing: 0.01em;
  color: #2180a2;
  width: fit-content;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
}

.k-main-nav .k-main-navlink,
.k-container-right .k-login {
  color: #ffffff !important;
}

.hero-bg {
  position: absolute;
  right: -30%;
  z-index: -1;
  top: -51%;
  width: 100%;
}

/*  */

/* video box */
.video-box {
  position: fixed;
  top: 0px;
  z-index: 1000;
  left: 0px;
  background-color: #0b0122;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-cross svg {
  color: white;
  width: 40px;
  height: 40px;
}
.video-box {
  display: none;
  top: 0px;
}
.pos-relative {
  z-index: 10;
  position: relative;
}
.video {
  width: 70vw !important;
  height: 80vh !important ;
}
.video-box .pos-relative {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-box video {
  width: 70vw;
}
.btn-cross {
  cursor: pointer;
  z-index: 1001;
  position: absolute;
  top: 5%;
  right: 12%;
}
.stop-scrolling {
  height: 100%;
  overflow: hidden;
}
/*  */

/* hero-section */

.hero-section {
  padding: 10rem 0 4.375rem;
}

.hero-section .heading {
  font-weight: 700;
  font-size: 2.875rem;
  line-height: 4.3125rem;
  letter-spacing: 0.01em;
  color: #f2f7f9;
  margin-bottom: 0.75rem;
}

.hero-section .description {
  font-size: 1.125rem;
  line-height: 1.6875rem;
  letter-spacing: 0.01em;
  color: #ccdee4;
  margin-bottom: 2.5rem;
}

.hero-section .kt-btn--primary {
  display: inline-block;
}

.hero-section .hero-img {
  transform: scale(1.4);
  position: relative;
  top: 28px;
  right: -8%;
  transition: all 0.2s;
  animation: heroFloat 5s infinite;
}

.hero-section .watchVideo img {
  margin-right: 4px;
}

.hero-section .watchVideo {
  color: #fff !important;
  text-decoration: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 0.01em;
  color: #ccdee4;
  margin-left: 2rem;
  transition: all 0.3s;
}

.hero-section .watchVideo:hover {
  transform: scale(1.03);
}

/*  */

/* sales reps */

.sales-reps {
  padding: 6rem 0 4rem;
}

.sales-reps .sec-img {
  margin: -16rem auto -3rem;
  width: 90%;
  transition: transform 0.3s;
  transform-style: preserve-3d;
}

.sales-reps h2 {
  margin-bottom: 5rem;
}

.sales-reps .heading {
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 2.8125rem;
  letter-spacing: 0.01em;
  color: #f2f7f9;
  margin-bottom: 0.25rem;
}

.sales-reps .description {
  font-size: 1.125rem;
  line-height: 1.6875rem;
  letter-spacing: 0.01em;
  color: #ccdee4;
  margin-bottom: 2rem;
}

.sales-reps .iconTextContainer {
  width: 84%;
  margin: auto;
}

.sales-reps .iconContainer {
  margin-right: 18px;
}

.sales-reps .textContainer h4 {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 27px;
  letter-spacing: 0.01em;
  color: #f2f7f9;
  margin-bottom: 0.25rem;
}

.sales-reps .textContainer p {
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 0.01em;
  color: #ccdee4;
  margin-bottom: 1.5rem;
}

.sales-img {
  position: relative;
}

.sales-img-container {
  opacity: 0.5600000023841858;
  background: linear-gradient(219deg, #7129dd 0%, #23b6e6 100%);
  filter: blur(150px);
  width: 75%;
  height: 100%;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  position: absolute;
  z-index: -1;
}

.aiTag {
  position: absolute;
  bottom: 70%;
  right: 14%;
  width: 14.8%;
  margin: -18rem auto -3rem;
  transition: transform 0.2s;
  transform-style: preserve-3d;
}

.aiProfile {
  position: absolute;
  top: 4%;
  left: 50%;
  z-index: 1;
  width: 7%;
  transition: transform 0.2s;
  transform-style: preserve-3d;
}

.aiTag1 {
  position: absolute;
  bottom: 22%;
  left: 16%;
  width: 15.5%;
  margin: -18rem auto -3rem;
  transition: all 0.2s;
  transform-style: preserve-3d;
}

.aiTag2 {
  position: absolute;
  bottom: 21%;
  left: 61.5%;
  width: 21.5%;
  margin: -18rem auto -3rem;
  transition: transform 0.2s;
  transform-style: preserve-3d;
}

/*  */

/* email-intelligence */
.email-intelligence {
  padding: 4.375rem 0;
}

.email-intelligence .subHead {
  margin: auto;
  margin-bottom: 3.5rem;
}

.email-intelligence h2 {
  font-size: 2.5rem;
  margin-bottom: 4.125rem;
}

.email-intelligence .email-intelligence-img {
  transform: scale(1.3);
  position: relative;
  top: 3rem;
  left: 12%;
}

.email-intelligence .iconContainer {
  margin-right: 18px;
}

.email-intelligence .textContainer h4 {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.6875rem;
  letter-spacing: 0.01em;
  color: #f2f7f9;
  margin-bottom: 0.25rem;
}

.email-intelligence .textContainer p {
  font-size: 0.875rem;
  line-height: 1.3125rem;
  letter-spacing: 0.01em;
  color: #c7dbe4;
  margin-bottom: 1.5rem;
}
/*  */

/* sales template */

.sales-template {
  padding: 5rem 0;
}

.sales-template .subHead {
  margin-top: 3rem;
}

.sales-template h2 {
  font-size: 2.25rem;
  text-align: left;
}

.sales-template .iconContainer {
  margin-right: 18px;
}
.sales-template .textContainer h4 {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.6875rem;
  letter-spacing: 0.01em;
  color: #f2f7f9;
  margin-bottom: 0.25rem;
}
.sales-template .textContainer p {
  font-size: 0.875rem;
  line-height: 1.3125rem;
  letter-spacing: 0.01em;
  color: #c7dbe4;
  margin-bottom: 1.5rem;
}
.sales-template-img {
  transform: scale(1.5);
  position: relative;
  top: -10%;
}
/*  */

/* ai-cadences-spin */
.ai-cadences-spin {
  padding: 5rem 0;
}

.ai-cadences-bg {
  background: linear-gradient(204.8deg, #3f009d 11.84%, #0088b5 100%);
  border-radius: 19px;
  padding: 4rem 1rem;
  text-align: center;
  color: #fff;
}

.ai-cadences-bg p {
  font-size: 1.125rem;
  line-height: 1.6875rem;
  letter-spacing: 0.01em;
  color: #ffffff;
  margin-bottom: 2.5rem;
}

/*  */

/* ai-transform */

.ai-transform {
  padding: 4rem 0;
  color: #fff;
}

.ai-transform h2 {
  margin-top: -5rem;
  text-align: left;
}

.ai-transform p {
  font-size: 1.125rem;
  line-height: 1.6875rem;
  letter-spacing: 0.01em;
  color: #c7dbe4;
  margin: 0;
}

.ai-transform img {
  transform: scale(1.3);
}

/*  */

/* sales-comrade */

.sales-comrade {
  padding: 1rem 1rem 4rem;
}

.sales-comrade .subHead {
  color: #80ffe0;
  background: #05372b;
}

.sales-comrade h2 {
  text-align: left;
}

.sales-comrade p {
  font-size: 1.125rem;
  line-height: 1.6875rem;
  letter-spacing: 0.01em;
  color: #c7dbe4;
  margin: 0;
}

/*  */

/* unleash-ai */

.unleash-ai {
  padding: 4rem 1rem 0rem;
}

.unleash-ai h2 {
  /* font-size: 2.875rem; */
  text-align: left;
  margin-bottom: 3.5rem;
}

.ai-cards {
  width: 48%;
  display: flex;
  margin-bottom: 2rem;
}

.ai-cards img {
  margin-right: 12px;
  position: relative;
  top: -5px;
}

.ai-cards p {
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 0.01em;
  color: #e6eff7;
  margin: 0;
}

.unleash-img {
  transform: scale(1.5);
}

/*  */

/* testimonial */

.testimonial {
  padding: 4rem 0;
  background: var(--test-bg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.testimonialCard {
  padding: 2rem 1.5rem;
  background: #fefefe;
  border: 1px solid #f5f4ff;
  box-shadow: 0px 10px 16px rgba(0, 0, 0, 0.04);
  border-radius: 8px;
}

.testimonial h2 {
  margin-bottom: 5rem;
}

.testimonialCard img {
  margin-right: 12px;
}

.testimonialCard .d-flex {
  margin-bottom: 12px;
}

.testimonialCard .nameRole h3 {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 0.01em;
  color: #120155;
  margin: 0;
}

.testimonialCard .nameRole p {
  font-size: 0.75rem;
  line-height: 1.125rem;
  letter-spacing: 0.01em;
  color: #5e6175;
  margin: 0;
}

.testimonialCard p {
  font-size: 0.8125rem;
  line-height: 1.25rem;
  letter-spacing: 0.01em;
  color: #393c56;
  width: 85%;
  margin: 0 auto;
}

/*  */

/* ai-cadences-spin */

.experience-ai {
  background: linear-gradient(204.8deg, #3f009d 11.84%, #0088b5 100%);
  padding: 3rem 1rem;
  text-align: center;
  color: #fff;
}

.experience-ai h2 {
  margin-bottom: 2.5rem;
}

.experience-ai p {
  font-size: 1.125rem;
  line-height: 1.6875rem;
  letter-spacing: 0.01em;
  color: #ffffff;
  margin-bottom: 2.5rem;
}

/*  */

/* footer */

.k-main-footer {
  background: none;
}

.k-footer-mid-itmes .k-footer-header {
  color: #fff;
}

.k-footer-mid-itmes p a {
  color: #9b9b9b !important;
}

.k-footer-end p,
.k-footer-end a {
  color: #9b9b9b !important;
}

/*  */

/* media queries */

@media only screen and (min-width: 1440px) {
  .bg {
    background-size: cover;
    background-position-y: -290px;
  }
  .sales-img {
    max-width: 1400px;
    margin: auto;
  }
}

@media only screen and (max-width: 1200px) {
  .hero-section .heading {
    font-size: 2rem;
    line-height: 3rem;
  }
}

@media only screen and (max-width: 1024px) {
  .k-nav-btn-mobile svg {
    color: #ffffff;
  }
  .hero-section .hero-img {
    transform: scale(1);
    position: initial;
    margin-top: 2rem;
  }
  .sales-template-img {
    transform: scale(1);
    position: initial;
  }
  .unleash-img {
    transform: scale(1);
  }
  .ai-transform img {
    transform: scale(1);
    margin-top: 16%;
  }
  .sales-reps .sec-img {
    margin: -13rem auto -3rem;
  }
  .aiTag {
    bottom: 74%;
  }
  .aiProfile{
    top: -1%;
  }
}

@media only screen and (max-width: 992px) {
  h2 {
    font-size: 1.8rem !important;
    line-height: 3rem;
  }
  .sales-reps .sec-img {
    margin: -8rem auto -12rem;
  }
}

@media only screen and (max-width: 786px) {
  .sales-reps .sec-img {
    margin: -4rem auto -1rem;
  }
  .aiTag {
    bottom: 60%;
  }
  .ai-transform h2 {
    margin-top: -2rem;
  }
  .unleash-ai h2 {
    text-align: center;
  }
  .dotanime1,
  .dotanime2,
  .dotanime3,
  .dotanime4,
  .dotanime5,
  .dotanime6,
  .dotanime7 {
    display: none;
  }
  @keyframes heroFloat {
    0% {
      transform: translateY(0px) scale(1);
    }
    50% {
      transform: translateY(10px) scale(1);
    }
    100% {
      transform: translateY(0px) scale(1);
    }
  }
  .sub {
    flex-direction: column-reverse;
  }
  #productHuntLogo {
    left: -14px;
    top: 49px;
  }
  .testimonialCard {
    margin-bottom: 2rem;
  }
}

@media only screen and (max-width: 576px) {
  .email-intelligence .email-intelligence-img {
    transform: scale(1);
    left: 0;
    top: 0;
  }
  .sales-reps .sec-img {
    margin: -4rem auto -3rem;
  }
  .aiTag {
    bottom: 70%;
  }
  .aiProfile{
    top: 14%;
  }
  .email-intelligence .subHead {
    margin-bottom: 1.5rem;
  }
  .sales-template {
    padding: 0;
  }
  .dotanime7 {
    left: 85%;
  }
  .sales-reps,
  .email-intelligence,
  .ai-cadences-spin {
    padding: 2rem 0;
  }
  .ai-cadences-spin {
    padding-bottom: 3rem;
  }
  .ai-transform {
    padding-bottom: 0;
  }
  .sub a img {
    width: 176px !important;
  }
}