/* Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

/* Custom Fonts */
@font-face {
  font-family: "SF Pro Text";
  src: url("../fonts/SFProText-Regular.woff2") format("woff2"),
    url("../fonts/SFProText-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("../fonts/SFProDisplay-Medium.woff2") format("woff2"),
    url("../fonts/SFProDisplay-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("../fonts/SFProDisplay-Bold.woff2") format("woff2"),
    url("../fonts/SFProDisplay-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

:root {
  /* White */
  --white: #ffffff;
  --off-white: #f1f0ee;
  --rgb-white: rgba(255, 255, 255, 0);
  /* Black */
  --jet-black: #121212;
  /* Grey */
  --light-grey: #cecfd3;
  --light-grey-db: #dbdbdb;
  --slate-gray: #708D9C;
  /* Blue */
  --main: #00122C;
  --dark-midnight-blue: #06161f;
  --navy-blue: #06141f;
  --dark-navy-blue: #11212e;
  --dark-gunmeta: #0e1b26;
  --midnight-blue: #05131f;
  --dark-blue: #243a4b;
  /* Green */
  --spring-green: #10a37f;
  --dark-green: #1a7f64;
  --light-green: rgb(71 204 144);
  --button-green: #15be53;
  --button-border-green: #4cec87;
  /* Others */
  --teal: #123743;
  --cyon: #01f0ff;
  /* Border */
  --border1: rgba(255, 255, 255, 0.1);
  /* Radius */
  --radius100: 100px;
  --radius50: 50px;
  --green-gradient: linear-gradient(0.25turn, #38E8B0, #3BF7D1);
  --green-gradient-hover: linear-gradient(0.25turn, #37C597, #38E8B0);
  --accent-border-gradient: linear-gradient(#082F37, #05131F) padding-box, linear-gradient(183.32deg, #38E8B0 0%, #10CCFE 28.02%, #243A4B 75.4%) border-box;
}
*{
  outline:none;
}
/* Typography */
body {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  background: #05131F;
  color: var(--white);
}
ul,
ol {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.container {
  max-width: 1250px;
}
.custom-control-label::before {
  position: absolute;
  top: .25rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  content: "";
  background-color: #fff;
  border: 1px solid #adb5bd;
}
.custom-control-label::after {
  position: absolute;
  top: .25rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  content: "";
  background: 50%/50% 50% no-repeat;
  background-color: rgba(0, 0, 0, 0);
}
/* Heading */
.sub-desc {
  font-size: 15px;
  letter-spacing: -0.41px;
  color: var(--slate-gray);
  margin: 0 0 0 25px;
}
.heading {
  margin-bottom: 80px;
}
.heading .sub-title {
  background: var(--button-green);
  background: linear-gradient(183.32deg, #51ce7f 0%, #00f0ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /*color: #3BF7D1;*/
  font-weight: 600;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-0.02em;
  font-size: 13px;
  box-sizing: border-box;
  display: inline-block;
  margin-bottom: 3px;
  text-transform: uppercase !important;
}
.hero-wrp .heading .sub-title {
  margin-left: 3px;
}
.flex{
  display:flex;
}
.inline-flex{
  display:inline-flex;
}
.items-center{
  align-items:center;
}
.justify-between{
  justify-content:space-between;
}
.text-center{
  text-align:center;
}
.btn-custom {
  background: var(--green-gradient);
  color: var(--main);
  font-weight: 600;
  display: inline-flex;
  padding: 12px 20px;
  border-radius: 10px;
  transition: all 0.3s ease;
  border: none;
  font-size: 15px;
}
.btn-custom:hover{
  background: var(--green-gradient-hover);
  color: var(--main);
}
.btn-custom svg{
  width:18px;
  margin-left:5px;
}
.heading .title {
  font-weight: 600;
  font-size: 46px;
  line-height: 53px;
  color: var(--white);
  margin-bottom: 21px;
  font-family: "Inter";
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.8) 0%, rgb(255, 255, 255) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
}
.heading p {
  font-size: 17px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: -0.41px;
  color: var(--slate-gray);
  margin-bottom: 32px;
}
.header .heading p{
  padding-right: 100px;
}
.heading p a {
  color: inherit;
  text-decoration: underline;
  transition: all 0.3s ease;
}
.heading p a:hover {
  opacity: 0.9;
}

/* End Typography */

/* Header */
.header {
  padding-top: 0px;
  padding-bottom: 55px;
  border-radius: 0px 0px 140px 140px;
  background: radial-gradient(40.19999999999999% 40.69999999999999% at 50% 0%,rgba(12, 92, 97, .4) 0%,rgba(43,53,95,0) 100%);
  border-bottom: 1px solid #243A4B;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 50px rgba(12, 92, 97,.1);
}
.header::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 534px;
  height: 534px;
  background: rgb(12 60 99 / 50%);
  filter: blur(250px);
  display:none;
}
/* Navbar */
.navbar {
  padding: 20px 22px 20px 32px;
  overflow: hidden;
  transition: all 0.3s ease;
  position: absolute;
  left: 0;
  width: 100%;
}
.navbar.sticky {
  max-width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  border-radius: 0;
  z-index: 99;
  border: 0;
  background: rgba(5,19,31,.5) !important;
  backdrop-filter: blur(30px) !important;
  -webkit-backdrop-filter: blur(30px);
}
.navbar-brand img {
  margin-right: 0px;
  width:160px;
}
.navbar-brand {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 23px;
}
.navbar-nav .nav-item .nav-link {
  font-weight: 500;
  text-transform: capitalize;
  color: rgba(255,255,255,.8);
  padding-left: 20px;
  padding-right: 20px;
  font-size: 15px;
  transition: all 0.3s ease;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.navbar-nav .nav-item .nav-link:hover {
  color: var(--white);
}
.nav-btns {
  background: rgba(0,0,0,.3);
  border: 1px solid transparent;
  box-sizing: border-box;
  border-radius: 15px;
  padding: 6px;
}
.nav-btns button:first-child {
  margin-right: 5px;
}
.nav-btns .nav-btn {
  font-size: 14px;
  text-transform: capitalize;
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 10px;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.btn-get-started {
  background: var(--white);
  color: var(--dark-gunmeta);
}
.btn-get-started:hover {
  background: var(--dark-gunmeta);
  color: var(--white);
  border: 1px solid var(--white);
}
.btn-signin {
  background: transparent;
  color: var(--white) !important;
}
.btn-signin:hover {
  background: transparent;
  border: 1px solid var(--white);
}
.hero-wrp {
  padding-top: 200px;
  padding-bottom: 120px;
}
.request-demo-input {
  background: linear-gradient(var(--dark-gunmeta), var(--dark-gunmeta))
      padding-box,
    linear-gradient(180deg, var(--border1) 0%, var(--rgb-white) 100%) border-box;
  border: 1px solid transparent;

  padding: 6px 6px 6px 24px;
  border-radius: var(--radius50);
  max-width: 400px;
  margin-bottom: 20px;
}
.request-demo-input input {
  width: 100%;
  flex: 1;
  outline: 0;
  letter-spacing: -0.41px;
  font-weight: 400;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
}
.request-demo-input input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.request-demo-input button {
  width: 152px;
  height: 40px;
  background: var(--spring-green);
  color: var(--jet-black);
  text-transform: capitalize;
  font-weight: 500;
  border: 1px solid var(--border1);
  border-radius: var(--radius50);
  cursor: pointer;
  transition: all 0.3s ease;
}
.request-demo-input button:hover {
  opacity: 0.9;
}
.input-area p {
  font-size: 16px;
  line-height: 16px;
  letter-spacing: -0.41px;
  color: var(--slate-gray);
  gap: 10px;
}
.props svg {
  fill: #3BF7D1;
  width: 16px;
}
.props {
  color: var(--slate-gray);
  font-size: 15px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px 0;
  margin-top: 30px;
  padding-right: 115px;
}
.props > div {
  display: flex;
  align-items: center;
  gap: 9px;
}
.support-chat {
  width: 100%;
  max-width: 400px;
  min-height: 365px;
  background: var(--border1);
  border: 0.709534px solid var(--border1);
  border-radius: 11.3525px;
  box-sizing: border-box;
  padding: 11px;
  margin-left: 60px;
}
.support-chat .svg {
  position: absolute;
  left: -144px;
  width: 200px;
  bottom: 47px;
}
.support-chat-inner {
  background: rgba(255, 255, 255, 0.05);
  border: 0.709534px dashed var(--border1);
  border-radius: 11.3525px;
  padding: 14px;
  overflow: hidden;
}
.support-chat-content {
  background: #f0f0f0;
  box-shadow: 0px 0px 14.1907px rgba(0, 0, 0, 0.8);
  border-radius: 7.334px;
  letter-spacing: -0.250578px;
  color: var(--jet-black);
  overflow: hidden;
  font-weight: 500;
  font-size: 9.334px;
  line-height: 12px;
}
a.support-chat-round {
  border-radius: var(--radius50);
  background: #fff;
  color: var(--jet-black) !important;
  text-transform: uppercase;
  text-decoration: none;
}
a.support-chat-round svg {
  height: 12px;
}
.support-avatar-big {
  width: 25.67px;
  height: 25.67px;
  font-size: 12.11167px;
}
.support-avatar-small {
  width: 17.78px;
  height: 17.78px;
  font-size: 8.27817px;
}
.support-chat-heading {
  gap: 8.8px;
  height: 44px;
  padding: 12px;
  border-bottom: 0.611167px solid var(--light-grey-db);
}
.support-chat-heading p {
  font-size: 14.001px;
}
.support-chat-body {
  height: 100%;
  flex: 1;
  box-sizing: border-box;
  padding: 14px 14px 4px;
}
.message-person {
  padding: 6px 10px;
  background: var(--spring-green);
  color: var(--jet-black);
  border-radius: 3.667px 3.667px 0px 3.667px;
  width: 163px;
  box-sizing: border-box;
  margin-left: auto;
  margin-bottom: 15px;
}
.message-person p {
  margin-bottom: 0;
}
.ai-chat-heading {
  gap: 5.5px;
  margin-bottom: 7.3px;
}
.message-ai {
  background: #e6e6e6;
  border-radius: 3.667px 3.667px 3.667px 0px;
  color: rgba(18, 18, 18, 0.8);
  width: 180px;
  padding: 6.11167px 7.334px 6.11167px 9.77867px;
}
.message-ai p {
  margin-bottom: 0;
  line-height: 12px;
}
.recommendation-qna {
  gap: 3.7px;
}
.recommendation-qna p {
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--light-grey-db);
  border-radius: 5px;
  padding: 4.88934px 6.11167px;
  margin-bottom: 0;
  text-align: center;
  font-size: 10px;
}
.chat-footer {
  padding: 4px 14px 14px;
  gap: 7.33px;
}
.support-chat-inner img {
  width: 100%;
}
.hero-content-right {
  text-align: right;
  display: flex;
  justify-content: end;
}
.chat-footer input {
  flex: 1;
  height: 30px;
  border: 0.611167px solid var(--light-grey-db);
  border-radius: 4.88934px;
  outline: none;
  padding: 2px 6px;
  background: transparent;
}
.chat-footer button {
  border: none;
  outline: none;
  background: var(--spring-green);
  width: 30px;
  height: 30px;
  border-radius: 4.88934px;
  transition: all 0.3s ease;
}
.chat-footer button:hover {
  opacity: 0.9;
}

.tech-tool {
  background: rgba(255, 255, 255, 0.05);
  border: 0.833333px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius100);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -1;
}
.tech-tool-rounded {
  background: rgba(255, 255, 255, 0.08);
  border: 0.8px dashed rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(1.6px);
  border-radius: var(--radius100);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tech-tool.discord {
  width: 64px;
  height: 64px;
  top: -24px;
  right: -21px;
}
.tech-tool.discord .tech-tool-rounded {
  width: 51.2px;
  height: 51.2px;
}
.tech-tool.notion {
  width: 80px;
  height: 80px;
  right: -73px;
  bottom: -36px;
}
.tech-tool.notion .tech-tool-rounded {
  width: 64px;
  height: 64px;
}
.right-tech-wrp {
  top: 28px;
  right: -146px;
  height: fit-content;
}
.bottom-tech-wrp {
  bottom: -92px;
  right: -94px;
  height: fit-content;
}
.tech-tool.slack {
  width: 80px;
  height: 80px;
  left: -32px;
  bottom: -75px;
}
.tech-tool.slack .tech-tool-rounded {
  width: 64px;
  height: 64px;
}
.tech-tool.zapier {
  width: 64px;
  height: 64px;
  right: -27px;
  bottom: -60px;
}
.tech-tool.zapier .tech-tool-rounded {
  width: 51.2px;
  height: 51.2px;
}
.left-tech-wrp {
  left: -60px;
  bottom: -17px;
}
.tech-tool.stripe {
  width: 100px;
  height: 100px;
  left: -41px;
  bottom: -94px;
}
.tech-tool.stripe .tech-tool-rounded {
  width: 80px;
  height: 80px;
}
/* End Header */

/* Brand Wrap */
.brand-sec {
  padding-top: 90px;
  padding-bottom: 146px;
}
.brand-row {
  max-width: 1080px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 80px 0;
  text-align: center;
}
.brand-row img {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
/* End Brand */
.modal label {
    letter-spacing: -0.02em;
}
/* How Works Wrap */
.how-works-sec {
  padding-bottom: 128px;
  padding-top:90px;
}
.how-works-item {
  position: relative;
}
.how-works-item:not(.last-work-item)::after {
  content: "";
  position: absolute;
  left: calc(100% - 38.3%);
  top: 47px;
  width: calc(100% - 16%);
  height: 1px;
  background: #134153;
}

.how-work-icon {
  width: 96px;
  height: 96px;
  padding: 12px;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(39, 160, 193, 0.3);
  border-radius: var(--radius100);
  position: relative;
  z-index: 0;
  position: relative;
}
/*.last-work-item .how-work-icon::before,
.second-work-item .how-work-icon::before,
.first-work-item .how-work-icon::after,
.how-work-icon::after {
  content: "";
  position: absolute;
  top: 41%;
  transform: translateY(-41%);
  width: 4px;
  height: 4px;
  background: #13a8d0;
  border-radius: 6px;
  z-index: -1;
}*/
.second-work-item .how-work-icon::after,
.first-work-item .how-work-icon::after {
  right: -9px;
}
.last-work-item .how-work-icon::before,
.second-work-item .how-work-icon::before {
  left: -9px;
}
.icon-overlay {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../img/icon/work-icon-overlay-border.png) no-repeat center
    center;
  animation: rotateAnimation 4s linear infinite;
  z-index: -1;
}
@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.how-work-icon .icon-img {
  background: url(../img/icon/work-icon-bg.png) no-repeat center center;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.how-works-item h4 {
  font-weight: 600;
    font-size: 19px;
    line-height: 20px;
    color: var(--white);
    font-family: "Plus Jakarta Sans";
    margin-bottom: 12px;
}
.how-works-item p {
  font-family: "SF Pro Text";
  color: var(--slate-gray);
}
/* End How Works */

/* Support Wrap */
.support-wrap {
  padding-bottom: 122px;
}
.support-row {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 40px;
}
.support-box {
  padding: 32px;
  border-radius: 16px;
  min-height: 534px;
}
.support-common-content h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 28px;
  line-height: 38px;
  text-transform: capitalize;
  color: var(--white);
  font-family: "Plus Jakarta Sans";
  background: linear-gradient(287deg, rgb(145, 145, 145) 0%, rgb(255, 255, 255) 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;  
}
.support-common-content p {
  font-weight: 400;
  font-size: 18px;
  line-height: 27px;
  color: var(--slate-gray);
  margin-bottom: 0;
}
.easy-integration {
  background: #0C1A25;
  border: 1px solid #243A4B;
  max-width: 450px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 0;
  overflow:hidden;
}
.integrations-logos {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.integrations-logos svg {
  width: 100%;
}
.easy-integration .support-common-content {
  z-index: 100;
}
.fully-customizable {
  border: 1px solid transparent;
  background: var(--accent-border-gradient);
  z-index: 0;
  width: 100%;
  max-width: 790px;
  padding-top:0;
}
.fully-customizable::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50px;
  width: 300px;
  height: 300px;
  background: #13403d;
  filter: blur(200px);
  z-index: -1;
}
.fully-customizable:after {
  background: linear-gradient(0deg, #0C1A25 50%, transparent);
  content: "";
  display: block;
  width: 100%;
  height: 257px;
  position: absolute;
  bottom: 0;
  z-index: 5;
  left: 0;
}
.customizable-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.typography-box {
  background: #191919;
  border: 1px solid #444;
  border-radius: 12px;
  max-width: 311px;
  box-sizing: border-box;
  padding: 24px;
  margin-left: 32px;
  margin-top: -40px;
  height: fit-content;
}
.typography-item h4 {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  text-transform: capitalize;
  color: var(--white);
  margin-bottom: 14px;
}
.main-color-box {
  gap: 8px;
  margin-bottom: 24px;
}
.main-color-box .color {
  width: 44px;
  height: 44px;
  border-radius: var(--radius100);
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-color-box .add-color {
  background: #152634;
  border: 1px solid var(--dark-blue);
  cursor: pointer;
}
.typography-dropdown {
  margin-bottom: 24px;
}
.typography-dropdown button {
  padding: 10px 16px !important;
  width: 100%;
  height: 39px !important;
  border: 1px solid var(--dark-blue) !important;
  border-radius: 8px !important;
  background: transparent;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 14px;
  line-height: 19px;
  color: var(--white);
  position: relative;
}
.typography-dropdown .dropdown-toggle::after {
  position: absolute;
  right: 17px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  border: 0;
  width: 12px;
  height: 10px;
  background: url(../img/icon/arrow-down.png) no-repeat right;
  background-size: contain;
}

.range {
  position: relative;
}

.range .slider {
  width: 100%;
}

.range .labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
}

.range .label {
  cursor: pointer;
  font-size: 12px;
  line-height: 16px;
  color: #495f70;
}

.range .label.active {
  color: var(--white);
}

.range input[type="range"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 5px;
  outline: none;
  background: #344654;
}

.range input[type="range"]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 8px;
  border-radius: 5px;
}

.range input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 5px;
}

.range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--white);
  border-radius: 50%;
  margin-top: -4px;
  cursor: pointer;
}

.range input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--white);
  border-radius: 50%;
  cursor: pointer;
}

.label-toggle {
  width: 84px;
  height: 38px;
  position: relative;
  display: block;
  background: #182d3e;
  border: 1px solid var(--dark-blue);
  border-radius: var(--radius100);
  cursor: pointer;
}
.label-toggle:after {
  content: "";
  width: 28px;
  height: 28px;
  position: absolute;
  top: 4px;
  left: 4px;
  background: var(--white);
  border-radius: var(--radius100);
}
.toggle-mood input {
  width: 0;
  height: 0;
  visibility: hidden;
  display: none;
}

.toggle-mood input:checked + label:after {
  left: 79px;
  transform: translateX(-100%);
  background: var(--white);
}
.label-toggle,
.label-toggle:after {
  transition: 0.3s;
}
.label-toggle img {
  position: absolute;
  width: 24px;
  top: 5px;
  z-index: 100;
}
.label-toggle img.sun {
  left: 6px;
  transition: 0.3s;
}
.label-toggle img.moon {
  left: 53px;
  transition: 0.3s;
}
.toggle-mood {
  margin-bottom: 24px;
}
.manage-ai-heading {
  gap: 10px;
  margin-bottom: 32px;
}
.manage-ai-heading h4 {
  font-weight: 600;
  font-size: 20px;
  line-height: 27px;
  text-transform: capitalize;
  margin-bottom: 0;
}
.manage-ai-box {
  background: #191919;
  border: 1px solid #444;
  border-radius: 12px;
  max-width: 311px;
  padding: 24px;
  margin-top: 48px;
  margin-bottom: 68px;
  height: fit-content;
}
.automatic-updates {
  border: 1px solid #243A4B;
  background: #0C1A25;
  overflow: hidden;
  z-index: 0;
  max-width: 678px;
  min-height: auto;
}
.automatic-updates::before {
  content: "";
  position: absolute;
  left: 0;
  top: -120px;
  width: 300px;
  height: 300px;
  background: rgba(12, 92, 97, .4);
  filter: blur(200px);
  z-index: -1;
}
.automatic-updates:after {
  background: linear-gradient(0deg, #0C1A25 50%, transparent);
  content: "";
  display: block;
  width: 100%;
  height: 257px;
  position: absolute;
  bottom: 0;
  z-index: 5;
  left: 0;
}
.updates-ver {
  display: flex;
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
  background: #191919;
  border: 1px solid #444;
  border-radius: 10.8136px;
  box-sizing: border-box;
  padding: 29px;
  margin-bottom: 34px;
}
.update-ver-lft {
  padding-right: 21px;
  border-right: 0.901136px dashed #232d51;
}
.btn-version {
  width: 86.44px;
  height: 32.81px;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 100px;
  text-transform: capitalize;
  color: #38E8B0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.update-ver-rit {
  padding-left: 21px;
}
.update-ver-rit h3 {
  font-weight: 700;
  font-size: 18.0227px;
  line-height: 24px;
  text-transform: capitalize;
  color: var(--white);
  margin-bottom: 10px;
}
.update-ai-avatar {
  gap: 10px;
  margin-bottom: 26px;
  flex-shrink: 0;
  width: fit-content;
}
.update-ai-logo {
  gap: 10px;
  flex-shrink: 0;
}
.update-logo {
  width: 28.84px;
  height: 28.84px;
  border-radius: var(--radius50);
}
.update-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius50);
}
.update-active {
  position: absolute;
  right: 0;
  top: 1px;
  width: 7.21px;
  height: 7.21px;
  background: var(--spring-green);
  border-radius: 18.0227px;
  z-index: 10;
}
.update-ai-logo p {
  font-size: 15.3193px !important;
  line-height: 21px !important;
  text-transform: capitalize;
  color: var(--white) !important;
}
.update-ai-avatar p {
  margin-bottom: 0;
  color: var(--slate-gray);
  font-weight: 500;
  font-size: 14.4182px;
  line-height: 19px;
}
.update-item {
  gap: 11px;
  margin-bottom: 15px;
}
.update-item button {
  padding: 5.40682px 27.0341px;
  gap: 9.01px;
  width: 95.93px;
  height: 24.81px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius50);
  border: none;
  outline: none;
  font-weight: 500;
  font-size: 14.32px;
  line-height: 14px;
  text-transform: capitalize;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.update-item p {
  font-weight: 500;
  font-size: 12.6159px;
  line-height: 16px;
  text-transform: capitalize;
  color: var(--slate-gray);
  margin-bottom: 0;
}
a.update-view-all {
  width: 100%;
  height: 33px;
  background: var(--green-gradient);
  border-radius: var(--radius50);
  font-weight: 600;
  font-size: 15.3193px;
  line-height: 21px;
  text-transform: capitalize;
  color: #000;
  text-decoration: none;
  transition: all 0.3s ease;
  opacity: 0.5;
}
a.update-view-all:hover {
  opacity: 0.8;
}
.unlimited-training {
  max-width: 562px;
  background: #0C1A25;
  border: 1px solid #243A4B;
  border-radius: 16px;
  z-index: 0;
  overflow: hidden;
  min-height: auto;
}
.unlimited-training::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 95px;
  left: 0px;
  top: 37%;
  transform: translateY(-37%);
  background: rgba(12, 92, 97, .4);
  filter: blur(80px);
  z-index: -1;
}
.training-prompt-wrp {
  background: #191919;
  border: 1px solid #333;
  backdrop-filter: blur(5px);
  border-radius: 12px;
  padding: 12px;
  box-sizing: border-box;
  margin-top: 47px;
  margin-bottom: 60px;
  gap: 16px;
}
.prompt-textarea {
  background: #222;
  border: 0.597122px solid #444;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  overflow: hidden;
}
.prompt-textarea textarea {
  background: transparent;
  border: none;
  outline: none;
  height: 96px;
  width: 100%;
  resize: none;
  padding: 16px;
  font-size: 16px;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.3);
}
.prompt-textarea textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.prompt-example-content {
  background: #191919;
  border-top: 1px solid #333;
  padding: 18px 16px;
}
.prompt-example-content p {
  font-size: 12px;
  line-height: 16px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 12px;
  gap: 10px;
}
.prompt-example-item {
  gap: 6px;
  overflow: hidden;
}
.prompt-example-container {
  margin-right: -15px;
}
.prompt-example-container::after {
  display:none;
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 44px;
  height: 100%;
  background: linear-gradient(
    273.42deg,
    #0d1226 41.39%,
    rgba(13, 18, 38, 0) 97.18%
  );
}
.prompt-example-item a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(1, 240, 255, 0.05);
  border: 1px solid #444;
  border-radius: var(--radius50);
  font-size: 12px;
  line-height: 16px;
  color: #3BF7D1;
  white-space: nowrap;
  cursor: grab;
  user-select: none;
}
.prompt-example-item .item.dragging {
  cursor: grabbing;
}
.prompt-bottom {
  gap: 6px;
}
.prompt-bottom a {
  display: flex;
  align-items: center;
  padding: 7px 12px;
  gap: 6px;
  border: 1px solid #333;
  border-radius: 6px;
  font-size: 12px;
  line-height: 12px;
  color: var(--white);
  text-decoration: none;
}
/* End Support */

/* Testimonial Wrap */
.testimonials-sec {
  padding-bottom: 125px;
}
.testimonial-item {
  border: 1px solid transparent;
  border-radius: 16px;
  box-sizing: border-box;
  padding: 32px;
}

.owl-item:nth-of-type(odd) .testimonial-item {
  background: var(--accent-border-gradient);
}

.owl-item:nth-of-type(even) .testimonial-item {
  background: #111413;
  border: 1px solid #1c2826;
}

.testimonial-item::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 204px;
  height: 142px;
  background: url(../img/reviews-bg.png) no-repeat center center;
  background-size: contain;
  opacity: 0.4;
}
.star-wrp {
  gap: 5px;
  margin-bottom: 24px;
}
.testimonial-item p {
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.41px;
  color: #a8adb1;
  padding-bottom: 84px;
  margin-bottom: 0;
}
.testimonial-client {
  gap: 12px;
}
.client-img {
  width: 38px;
  height: 38px;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.client-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.client-details h5 {
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  color: var(--white);
  margin-bottom: 8px;
}
.client-details span {
  display: block;
  font-size: 14px;
  line-height: 17px;
  color: rgba(255, 255, 255, 0.64);
}
.testimonial-carousel .owl-dots {
  display: flex;
  align-content: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  z-index: 10;
  margin-top: 40px;
}
.testimonial-carousel .owl-dots .owl-dot {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  background: #000;
  border: 1px solid #333;
  border-radius: var(--radius50);
  transition: all 0.3s ease;
}
.testimonial-carousel .owl-dots .owl-dot.active,
.testimonial-carousel .owl-dots .owl-dot:hover {
  background: var(--green-gradient);
}
.testimonial-carousel .owl-dots .owl-dot span {
  display: none;
}
/* End testimonial */

/* Faq Wrapper */
.faq-sec {
  padding-bottom: 84px;
  padding-top: 8px;
}
.faq-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.faq-card {
  height: fit-content;
}
.faq-header {
  width: 100%;
  height: 72px;
  background: #0C1A25;
  border: 1px solid #243A4B;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 24px 32px;
  box-sizing: border-box;
}
a.faq-title {
  width: 100%;
  height: 100%;
  font-weight: 500;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: -0.41px;
  color: #d3d4d6 !important;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.faq-title::after {
  font-family: FontAwesome;
  content: "\f068";
  padding-left: 10px;
}
.faq-title.collapsed::after {
  content: "\f067";
}
.faq-body {
  background: var(--dark-gunmeta);
  border: 1px solid var(--dark-blue);
  border-radius: 16px;
  padding: 20px 32px;
  box-sizing: border-box;
  margin-top: 15px;
}
/* End Faq */

/* Footer Wrap */
.footer-wrp {
  background: #0C1A25;
  border-top: 1px solid #243A4B;
  border-radius: 140px 140px 0px 0px;
  padding-top: 80px;
  overflow: hidden;
  z-index: 0;
}
.footer-wrp::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 534px;
  height: 534px;
  background: rgba(12, 92, 97, .3);
  filter: blur(250px);
  z-index: -1;
}
/* Cta Wrap */
.cta-wrp {
  color: var(--off-white);
  background: #05131F;
  border: 1px solid #243A4B;
  border-radius: 16px;
  gap: 30px;
  box-sizing: border-box;
  padding: 32px;
  margin-bottom: 64px;
}
.cta-left h4 {
  font-weight: 600;
  font-size: 28px;
  line-height: 33px;
  letter-spacing: -0.41px;
  color: var(--off-white);
  font-family: "Plus Jakarta Sans";
}
.cta-left p {
  margin-bottom: 0;
  color: var(--slate-gray);
}
.faq-body p {
  margin-bottom: 0;
}
.text-gradient{
    background: #51ce7f;
    background: linear-gradient(183.32deg, #51ce7f 0%, #00f0ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.custom-switch .custom-control-label:hover {
  cursor: pointer;
}
.custom-switch .custom-control-label::before {
  left: -2.25rem;
  width: 50px;
  pointer-events: all;
  border-radius: 50px;
  height: 26px;
  border: 1px solid #38E8B0 !important;
  background: #0E1B26;
}
.custom-switch .custom-control-label::after {
  top: 8px;
  left: -32px;
  width: 18px;
  height: 18px;
  background-color: #38E8B0;
  border-radius: 50px;
}
.custom-control-input:checked~.custom-control-label::before {
  color: #fff;
  border-color: var(--spring-green);
  background-color: #38E8B0;
}
.custom-switch .custom-control-input:checked~.custom-control-label::after {
  background-color: #fff;
  -webkit-transform: translateX(23px);
  transform: translateX(23px);
}
a.cta-btn {
  width: 130px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--spring-green);
  border: 1px solid var(--border1);
  border-radius: var(--radius50);
  font-family: "SF Pro Text";
  font-size: 16px;
  font-weight: 500;
  color: var(--jet-black);
  transition: all 0.3s ease;
  text-decoration: none;
}
.cta-btn:hover {
  opacity: 0.8;
}
.footer-top {
  font-size: 18px;
  line-height: 25px;
  letter-spacing: -0.41px;
  color: var(--slate-gray);
  padding-bottom: 82px;
}
.footer-logo {
  margin-bottom: 32px;
}
.footer-info .address {
  margin-bottom: 32px;
}
.footer-info .footer-mail {
  color: var(--slate-gray);
  display: block;
  margin-bottom: 32px;
}
.footer-info .footer-mail:hover {
  color: var(--white);
}
.footer-social {
  gap: 18px;
}
.footer-btm-rit ul li a,
.footer-content ul li a,
.footer-social li a {
  transition: all 0.3s ease;
}
.footer-social li a:hover img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%)
    hue-rotate(137deg) brightness(103%) contrast(101%);
}
.footer-content h4 {
  font-weight: 600;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.41px;
  color: var(--white);
  margin-bottom: 28px;
}
.footer-content ul li a {
  display: block;
  color: var(--slate-gray);
  margin-bottom: 14px;
  text-decoration: none;
}
.footer-btm-rit ul li a:hover,
.footer-content ul li a:hover {
  color: var(--white);
}
.footer-bottom {
  z-index: 0;
  padding: 24px 0;
}
.footer-bottom::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: radial-gradient(
    68.84% 83903999.3% at 50% 53.59%,
    #989aa6 0%,
    rgba(152, 154, 166, 0) 100%
  );
  opacity: 0.32;
  border-radius: 2px;
  z-index: -1;
}
.footer-btm-lft p {
  color: var(--slate-gray);
  margin-bottom: 0;
  font-size: 15px;
}
.footer-btm-rit ul {
  gap: 28px;
}
.footer-btm-rit ul li a {
  color: var(--slate-gray);
  text-decoration: none;
  display: block;
  position: relative;
  font-size:15px;
}
.footer-btm-rit ul li:not(:last-child) a::after {
  content: "";
  position: absolute;
  right: -16px;
  top: 10px;
  width: 4px;
  height: 4px;
  background: var(--slate-gray);
  border-radius: 6px;
}
/* End Footer */
.period-switcher {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.period-switcher .custom-switch {
  padding: 0;
  width: 50px;
  height: 33px;
  margin: 0 12px;
  position: relative;
}
.period-name {
  color: #b4cbd7;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-size:15px;
}
.period-name.active{
  color: #fff;
}
.period-name .text-gradient {
  font-size: 14px;
  position: absolute;
  margin-left: 5px;
  letter-spacing: -0.03em;
}
.pricing-sec {
  padding-bottom: 120px;
}
.period-switcher label {
  transform: translateX(36px);
}
.pricing-table {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 40px;
}
.pricing-box {
  margin: 0 15px;
  background: #0C1A25;
  border: 1px solid #243A4B;
  border-radius: 16px;
  padding: 20px 25px;
  width: 25%;
}
.pricing-price {
  display: flex;
  margin: 18px 0 25px;
  align-items: center;
  font-family: "Plus Jakarta Sans";
}
.pricing-price-value {
  font-size: 38px;
  display: flex;
  font-weight: 600;
  line-height: 40px;
  margin-right: 5px;
}
.pricing-head .btn {
  width: 100%;
  text-align:center;
  justify-content: center;
}
.pricing-title {
  font-weight: 500;
  font-size: 18px;
  color: var(--slate-gray);
}
.pricing-price-period {
  color: var(--slate-gray);
}
.pricing-box.most-popular {
  background: linear-gradient(var(--dark-gunmeta), var(--dark-gunmeta)) padding-box, linear-gradient(183.32deg, #38E8B0 0%, #10CCFE 28.02%, rgb(81 183 206 / 27%) 75.4%) border-box;
  border: 1px solid transparent;
  padding:0;
}
.gradient-wrapper {
  background: linear-gradient(#0C333C, #0C1A25);
  padding: 20px 25px;
  height: 100%;
  border-radius: 16px;
}
.pricing-details ul li {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-bottom: 7px;
  letter-spacing: -0.01em;
}
.pricing-details ul li:last-child{
  margin-bottom: 0px;
}
.pricing-details ul li svg {
  width: 15px;
  margin-right: 8px;
  fill: #38E8B0;
}
.pricing-details ul {
  margin-top: 25px;
}
.pricing-details .cross {
  fill: #b4cbd7;
  opacity: 0.5;
  width: 13px;
  margin-left: 1px;
}
.form-range {
  width: 100%;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.form-range:focus {
  outline: 0;
}
.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgb(13 253 53 / 25%);
}
.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgb(13 253 83 / 25%);
}
.form-range::-moz-focus-outer {
  border: 0;
}
.form-range::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -5.5px;
  background-color: var(--spring-green);
  border: 1px solid var(--light-green);
  border-radius: 1rem;
  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  appearance: none;
}
h1.title-center {
  font-weight: 800;
  text-align: center;
  text-transform: capitalize;
  font-size: 42px;
  font-family: "Plus Jakarta Sans";
  letter-spacing: -0.02em;
  line-height: 43px;
  margin-top: 20px;
  margin-bottom: 30px;
  color: #05131F;
}
.interface-wrapper .pricing-title {
  font-weight: 600;
  color: #4a5568;
  letter-spacing: -0.03em;
}
.interface-wrapper .pricing-box {
  margin: 0 10px;
  border: 1px solid var(--grey-dark-border);
  background: #f9f9f9;
  box-shadow: var(--light-box-shadow);
  min-width: 33.33333%;
  padding: 20px 24px;
}
.interface-wrapper .period-name {
  color: #4a5568;
  letter-spacing: -0.03em;
  width:300px;
}
.interface-wrapper .period-name:first-child {
  text-align: right;
}
.interface-wrapper .period-name.active {
  color: #05131F;
}
.interface-wrapper .period-name {
  font-weight: 500;
}
.interface-wrapper .pricing-price-value {
  color: #05131F;
  font-weight: 800;
}
.interface-wrapper .pricing-details ul li {
  color: #4a5568;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.interface-wrapper .pricing-price-period {
  color: #4a5568;
  font-weight: 500;
  letter-spacing: -0.03em;
  font-size: 18px;
  line-height: 1;
}
.interface-wrapper .pricing-details ul li svg {
  fill: #09c269;
  margin-right:7px;
  min-width:13px;
}
.interface-wrapper .pricing-details .cross {
  fill: #7e828a;
}
.interface-wrapper .pricing-head .btn {
  font-family: "Plus Jakarta Sans";
  font-weight: 800;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  color: #fff;
  background: #09c269;
}
.interface-wrapper .pricing-head .btn:hover {
  opacity: 0.8;
}
.interface-wrapper .gradient-wrapper {
  background: #f9f9f9;
}
.interface-wrapper .pricing-box.most-popular {
  background: linear-gradient(#F9f9f9, #f9f9f9) padding-box, linear-gradient(183.32deg, #00ba7a 0%, #00ba7a 28.02%, var(--grey-dark-border) 75.4%) border-box !important;
  border: 1px solid transparent !important;
  padding: 0;
}
.interface-wrapper .pricing-details select {
  background: #fff;
  border: 1px solid var(--grey-dark-border);
  box-shadow: var(--light-box-shadow);
  color: #000;
  letter-spacing: -0.02em;
  font-weight: 500;
  width:100%;
}
.interface-wrapper .pricing-details select:hover {
  box-shadow: 0 -3px 1rem 0 rgb(35 183 92 / 25%), 0 3px 10px rgb(35 183 92 / 25%);
  background: #fff;
}
.custom-control-input {
  position: absolute;
  left: 0;
  z-index: -1;
  width: 1rem;
  height: 1.25rem;
  opacity: 0;
}
.interface-wrapper .period-switcher label {
  position: absolute;
  top: 0;
  left: 0;
}
.interface-wrapper .custom-control-input:checked~.custom-control-label::before {
  background-color: #00ba7a;
  border: 1px solid #00ba7a !important;
}
.interface-wrapper .custom-switch .custom-control-label::before {
  border: 1px solid #ddd !important;
  background: #ddd;
  width: 42px;
  height: 24px;
}
.interface-wrapper .custom-switch .custom-control-label::after {
  background-color: #fff;
}
.interface-wrapper .period-switcher .custom-switch {
  width: 42px;
  height: 31px;
}
svg.ipi {
  margin-right: 0 !important;
  margin-left: 5px;
  fill: #4a5568 !important;
  opacity: 0.5;
}
.interface-wrapper .custom-switch .custom-control-label::after {
  top: 7px;
  left: -33px;
  width: 18px;
  height: 18px;
}
.interface-wrapper .custom-switch .custom-control-input:checked~.custom-control-label::after {
  -webkit-transform: translateX(18px);
  transform: translateX(18px);
}
.upgrade-btn {
  height: 45px;
}
.upgrade-btn svg {
  opacity: 0.6;
  margin-top: 2px;
}
.interface-wrapper .previous-price {
  font-weight: 500;
  color: #4a5568;
  font-size: 18px;
  letter-spacing: -0.03em;
  text-decoration: line-through;
  line-height: 1;
  margin-left: 2px;
}
.submenus .badge.new {
  color: #00ba7a;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 4px;
  top: 0;
  border-radius: 6px;
  background: #f0fff5;
}
.period-name .period-badge{
  background: rgba(12, 26, 37, .4);
  border: 1px solid #243A4B;
  backdrop-filter: blur(5px);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 13px;
  margin-left: 5px;
  display: inline-block;
}
@media (prefers-reduced-motion: reduce) {
  .form-range::-webkit-slider-thumb {
    -webkit-transition: none;
    transition: none;
  }
}
.form-range::-webkit-slider-thumb:active {
  background-color: var(--light-green);
}
.form-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #52616e;
  border-color: transparent;
  border-radius: 1rem;
}
.form-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background-color: #0d6efd;
  border: 0;
  border-radius: 1rem;
  -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -moz-appearance: none;
  appearance: none;
}
@media (prefers-reduced-motion: reduce) {
  .form-range::-moz-range-thumb {
    -moz-transition: none;
    transition: none;
  }
}
.form-range::-moz-range-thumb:active {
  background-color: #b6d4fe;
}
.form-range::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #52616e;
  border-color: transparent;
  border-radius: 1rem;
}
.form-range:disabled {
  pointer-events: none;
}
.form-range:disabled::-webkit-slider-thumb {
  background-color: #adb5bd;
}
.form-range:disabled::-moz-range-thumb {
  background-color: #adb5bd;
}
.pricing-details select {
  background: rgba(255,255,255,.15);
  color: #fff;
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #6f8692;
  outline:none;
  transition: all 0.3s ease;
  letter-spacing: -0.01em;
}
.pricing-details select:hover{
  cursor:pointer;
  box-shadow:0 -3px 1rem 0 rgb(18 236 183 / 25%), 0 3px 10px rgb(0 90 255 / 25%);
  background:#06131F;
}
.enterprise .pricing-details {
  margin-top: -3px;
}
.modal-content {
  background: var(--accent-border-gradient);
  border-radius: 16px;
  padding: 40px;
  border: 1px solid transparent;
}
.modal h2 {
  font-size: 32px;
  line-height: 38px;
  margin-top: 0;
  font-family: "Plus Jakarta Sans";
  font-weight: 600;
  letter-spacing: -0.02em;
}
.divider-center {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  color: var(--slate-gray) !important;
  font-family: 'Inter';
  font-size: 14px;
  font-weight: 500;
  opacity: 0.4;
}
.divider-center::after, .divider-center::before {
  -ms-flex: 1 1 0%;
  flex: 1 1 0%;
  border-top: 0.0625rem solid var(--slate-gray) !important;
  margin-top: 0.0625rem;
  content: "";
}
.divider-center::before {
  margin-right: 1rem;
}
.divider-center::after {
  margin-left: 1rem;
}
.form-control {
  outline:none;
  display: block;
  font-family: 'Inter';
  font-weight: 400;
  width: 100%;
  padding: 0.6125rem 1rem;
  font-size: .875rem;
  line-height: 1.5;
  color: #fff;
  background-color: #05131F;
  background-clip: padding-box;
  border: 1px solid #444;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 8px;
  transition: border-color .3s ease-in-out,box-shadow .3s ease-in-out;
}
.form-control-lg {
  min-height: calc(1.5em + 1.625rem);
  padding: 0.75rem 1rem;
  font-size: .875rem;
  border-radius: 0.3125rem;
}
.form-control:focus {
  color: #fff;
  background-color: #05131F;
  border-color: #38E8B0;
  outline: 0;
  box-shadow: 0 0 1rem 0 #223b3b;
}
.modal p {
  color: var(--slate-gray);
}
.modal p a {
  transition: all 0.3s ease;
  color: var(--slate-gray);
  text-decoration: underline;
}
.modal p a:hover {
  color: #fff;
}
.forgot-password {
  font-size: 13px;
  color: var(--slate-gray);
  transition: all 0.3s ease;
}
.forgot-password:hover {
  color: #fff;
}
.modal .btn-custom {
  width: 100%;
  text-align: center;
  justify-content: center;
  border-radius: 6px;
  outline: none;
  align-items:center;
}
.modal .g-login, .modal .fb-login {
  width: 100%;
  background: #05131F !important;
  border: 1px solid #243A4B;
  color: #fff;
  font-size: 14px;
  letter-spacing: -0.01em;
  font-weight: 500;
  height: 47px;
  line-height: 46px;
  padding-top: 0;
  padding-bottom: 0;
  transition: all 0.3s ease;
  outline: none !important;
}
.modal .g-login svg, .modal .fb-login svg {
  width: 18px;
}
.modal .g-login svg{
  margin-right: 10px;
}
.modal .fb-login svg{
  margin-right: 6px;
}
.modal .g-login:hover, .modal .fb-login:hover {
  border-color: #38E8B0;
}
.form-control::placeholder {
  color: var(--slate-gray);
}
body.modal-open .container, body.modal-open header, body.modal-open section {
  filter: blur(30px);
}
.modal-backdrop.show {
  opacity: 0.6;
}
.modal-backdrop {
  background-color: #05131F;
}
.landingp .modal input{
  border-color: #243A4B;
}
.landingp .swal-modal {
  background: var(--accent-border-gradient);
  border: 1px solid transparent;
}
.landingp .swal-title {
  color: #fff;
  font-family: "Plus Jakarta Sans";
  font-size: 30px;
  font-weight: 600;
}
.landingp .swal-text {
  color: #8cb3ae;
  text-align: center;
  padding: 5px 20px 0;
}
.landingp .swal-footer {
  text-align: center;
  padding-bottom: 30px;
}
.landingp .swal-button--confirm {
  background: var(--green-gradient);
  color: var(--main);
}
.landingp .swal-button--confirm:hover{
  background:var(--green-gradient-hover);
}
.landingp .swal-icon--success:after, .landingp .swal-icon--success:before {
  background: transparent;
}
.landingp .swal-icon--success__hide-corners {
  background-color: transparent;
}
.landingp .swal-icon--success__ring {
  border: 4px solid #38E8B0;
}
.landingp .swal-icon--success__line {
  background-color: #38E8B0;
}
.landingp .swal-icon {
  margin: 20px auto 0;
}
.support-chat.whatsapp {
  border: none;
  background: transparent;
  max-width: 800px;
  margin-left: 0;
}
.support-chat.whatsapp img {
  width: 100%;
}
.text-block-page{
  max-width: 768px;
  margin: 0 auto 100px;
}
.text-block-page p {
  color: var(--slate-gray);
  line-height: 28px;
}
.cms-header h1 {
  padding-top: 120px;
  text-align: center;
}
.cms-header {
  border: none;
  box-shadow: none;
}
.text-block-page h3 {
  font-size: 18px;
  line-height: 32px;
  letter-spacing: -0.02em;
  color: #fff;
  font-weight: 600;
  margin-bottom:10px;
}
.text-block-page h4 {
  font-size: 16px;
  line-height: 32px;
  letter-spacing: -0.02em;
  color: #fff;
  font-weight: 600;
  margin-bottom:10px;
}
.text-block-page a {
  color: #38E8B0;
  text-decoration: underline;
}
.text-block-page a:hover{
  text-decoration:none;
}
.text-block-page ul, .text-block-page ol{
  color: var(--slate-gray);
  margin-bottom: 1rem;
  list-style-type: disc;
  margin-left: 18px;
}
.text-block-page ul li, .text-block-page ol li{
  margin-bottom:10px;
  line-height: 28px;
}
.text-block-page ul li::marker, .text-block-page ol li::marker{
  color: rgb(74, 74, 74);
}
.text-block-page ol[type="a"]{
  list-style-type: lower-alpha;
}
.text-block-page strong{
  font-weight:600;
}
.text-block-page table {
  margin-bottom: 20px;
}
.text-block-page td {
  padding: 15px 20px 15px 0;
}
.text-block-page table tr {
  border-top: 1px solid rgba(255,255,255,.2);
}
.text-block-page thead tr {
  border-top: none !important;
}
.text-block-page thead tr th {
  padding-bottom: 15px;
}
.pointer-hover:hover{
  cursor:pointer;
}
.opacity-hover-1:hover{
  opacity:1 !important;
}
.form-control[readonly] {
  background: #f9f9f9;
}
.form-control[readonly]:hover {
  cursor: pointer;
}
.copy-form-field.copy-fly {
  position: absolute;
  bottom: 6px;
  width: auto;
  height: 31px;
  right: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 7px;
  color: rgb(107, 114, 128) !important;
}
.copy-form-field.copy-fly svg {
  width: 14px;
  margin-right: 0px;
}
.copy-form-field.copy-fly:hover {
  color: #2D3036 !important;
}
.vh100 {
  height: calc(100vh - 92px);
  overflow-y: scroll;
}
.interface-wrapper.help-center .accordion-button, .interface-wrapper.pricing .accordion-button{
  padding-left: 0;
  padding-right: 0;
  font-family: "Inter";
  font-weight: 600;
  font-size: 15px;
  outline: 0 !important;
  box-shadow: none !important;
  letter-spacing: -0.02em;
}
.interface-wrapper.help-center .accordion-button:not(.collapsed):focus, .interface-wrapper.pricing .accordion-button:not(.collapsed):focus{
  border-bottom: 1px solid var(--grey-border);
}
.accordion-button:not(.collapsed) {
  color: #4ec77b;
  background-color: transparent;
  border-bottom: 1px solid var(--grey-border);
}
.accordion-button.collapsed:hover {
  color: #4ec77b;
}
.accordion-body {
  padding-left: 0;
  padding-right: 0;
  font-size: 14px;
  font-family: "Inter";
  letter-spacing: -0.01em;
}
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
#skip-training {
  color: var(--light-grey-text);
  font-size: 14px;
  display: block;
  margin-top: 25px;
  letter-spacing: -0.02em;
  transition: all 0.3s ease;
}
#skip-training:hover {
  color: var(--main-color);
  text-decoration: none;
}
.chat-builder #website .btn-custom {
  margin-top: 0;
}
.chat-builder #website .website-next-button {
  margin-top: 30px;
}
.interface-wrapper.api-documentation {
  padding: 0;
  overflow: hidden;
}
.w25{
  width:25%;
}
.api-left-menu {
  padding: 35px 20px;
  min-width: 300px;
}
.api-left-menu h5 {
  color: #181A1D;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding-left: 16px;
}
.api-left-menu ul li a {
  text-decoration: none;
  font-size: 14px;
  color: #4b4b4b;
  letter-spacing: -0.01em;
  line-height: 24px;
  padding: 6px 16px;
  border-radius:8px;
  display: flex;
  align-items: center;
}
.api-left-menu ul li a:hover{
  background: #f9f9f9;
}
.api-left-menu ul li a.active {
  color: #09c269;
  font-weight: 600;
  background: #eafaf2;
}
.docu-section{
  border-bottom: 1px solid var(--grey-border);
  padding: 30px 30px 30px 0;
  width: 80%;
  margin-left: 30px;
}
.section-name {
  color: #09c269;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 5px;
  display: block;
}
.token.doctype .token.doctype-tag {
  color: #569cd6
}
.token.doctype .token.name {
  color: #9cdcfe
}
.token.comment,.token.prolog {
  color: #6a9955
}
.language-html .language-css .token.punctuation,.language-html .language-javascript .token.punctuation,.token.punctuation {
  color: #d4d4d4
}
.token.boolean,.token.constant,.token.inserted,.token.number,.token.property,.token.symbol,.token.tag,.token.unit {
  color: #b5cea8
}
.token.attr-name,.token.builtin,.token.char,.token.deleted,.token.selector,.token.string {
  color: #ce9178
}
.token.plain-text {
  color: #fafafa
}
.language-css .token.string.url {
  text-decoration: underline
}
.token.entity,.token.operator {
  color: #d4d4d4
}
.token.operator.arrow {
  color: #569cd6
}
.token.atrule {
  color: #ce9178
}
.token.atrule .token.rule {
  color: #c586c0
}
.token.atrule .token.url {
  color: #9cdcfe
}
.token.atrule .token.url .token.function {
  color: #dcdcaa
}
.token.atrule .token.url .token.punctuation {
  color: #d4d4d4
}
.token.keyword {
  color: #569cd6
}
.token.keyword.control-flow,.token.keyword.module {
  color: #c586c0
}
.token.function,.token.function .token.maybe-class-name {
  color: #dcdcaa
}
.token.regex {
  color: #d16969
}
.token.important {
  color: #569cd6
}
.token.italic {
  font-style: italic
}
.token.constant {
  color: #9cdcfe
}
.token.class-name,.token.maybe-class-name {
  color: #4ec9b0
}
.token.console,.token.interpolation,.token.parameter {
  color: #9cdcfe
}
.token.boolean,.token.punctuation.interpolation-punctuation {
  color: #569cd6
}
.token.exports .token.maybe-class-name,.token.imports .token.maybe-class-name,.token.property,.token.variable {
  color: #9cdcfe
}
.token.escape,.token.selector {
  color: #d7ba7d
}
.token.tag {
  color: #569cd6
}
.token.cdata,.token.tag .token.punctuation {
  color: grey
}
.token.attr-name {
  color: #9cdcfe
}
.token.attr-value,.token.attr-value .token.punctuation {
  color: #ce9178
}
.token.attr-value .token.punctuation.attr-equals {
  color: #d4d4d4
}
.token.entity {
  color: #569cd6
}
.token.namespace {
  color: #4ec9b0
}
code[class*=language-javascript],code[class*=language-jsx],code[class*=language-tsx],code[class*=language-typescript],pre[class*=language-javascript],pre[class*=language-jsx],pre[class*=language-tsx],pre[class*=language-typescript] {
  color: #9cdcfe
}
code[class*=language-css],pre[class*=language-css] {
  color: #ce9178
}
code[class*=language-html],pre[class*=language-html] {
  color: #d4d4d4
}
.language-regex .token.anchor {
  color: #dcdcaa
}
.language-html .token.punctuation {
  color: grey
}
.main .docu-section h1 {
  font-size: 30px !important;
  font-weight: 800 !important;
  font-family: "Inter" !important;
  color:#181A1D !important;
  margin-bottom: 20px;
}
.main .docu-section h2 {
  font-family: "Inter" !important;
  font-size: 23px !important;
  font-weight: 700 !important;
  color:#181A1D !important
}
.main .docu-section h3 {
  font-family: "Inter" !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color:#181A1D !important
}
.docu-section p {
  font-size: 15px;
  line-height: 28px;
  margin-bottom: 15px
}
.code-wrapper {
  background: rgb(15, 17, 23);
  display: inline-block;
  border-radius: 12px;
  padding: 20px;
  margin: 15px 0;
  width:100%;
}
.code-wrapper pre {
  margin: 0;
  white-space: pre-line;
}
.code-wrapper pre code{
  font-size: 13px;
}
.docu-section p > code {
  background: rgb(242, 245, 251);
  border: 1px solid rgb(223, 227, 235);
  color: rgb(17, 24, 39);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 14px;
  letter-spacing: -0.02em;
  font-family: Monaco;
}
.vhv100 {
  height: calc(100vh - 63px);
  overflow-y: scroll;
}
.req-badge {
  padding: 2px 4px;
  line-height: 11px;
  font-size: 9px;
  font-family: "Inter";
  font-weight: 700;
  margin-right: 8px;
  border-radius: 5px;
}
.api-left-menu ul li a.active .req-badge.get {
  background: rgb(42, 182, 115);
  color: #fff;
}
.api-left-menu ul li a .req-badge.get {
  background: rgba(74, 222, 128, 0.2);
  color: rgb(21, 128, 61);
}
.api-left-menu ul li a .req-badge.post {
  background: rgba(96, 165, 250, 0.2);
  color: rgb(29, 78, 216);
}
.api-left-menu ul li a.active .req-badge.post {
  background: rgb(29, 78, 216);
  color: #fff;
}
ul.dropdown-menu.account-menu.show {
  min-width: 190px;
}
.use-cases .item {
  background: #0C1A25;
  border-radius: 15px;
  border: 1px solid #243A4B;
  padding: 23px 30px 0;
  width: 460px;
  position: relative;
  overflow: hidden;
}
.use-cases .item h4 {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.use-cases .item svg, .use-cases .item img {
  margin: 0 auto;
  z-index: 10;
  position: relative;
  max-height: 304px;
}
.use-cases {
  position: absolute;
  top: 195px;
  right: 0;
  max-width: 50%;
}
.use-cases:before {
  height: 100%;
  background: linear-gradient(90deg, transparent, #05131F);
  content: "";
  width: 200px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
}
.use-cases .item p {
  color: #708D9C;
  font-size: 14px;
}
.use-cases .item::before {
  width: 100%;
  height: 37px;
  filter: blur(50px);
  display: block;
  content: "";
  background: #0C5C61;
  top: 50%;
  position: absolute;
  z-index: 0;
}
.use-cases .owl-dot {
  background: #243A4B !important;
  height: 6px;
  width: 18px;
  margin-right: 12px;
  border-radius: 100px;
  transition: all 0.3s ease;
}
.use-cases .owl-dot.active {
  background: #3BF7D1 !important;
}
.use-cases .owl-dots {
  margin-top: 20px;
  margin-left: 85px;
}
.use-cases .owl-dot:hover{
  background: #516b80 !important;
}
.modal .invalid-feedback.feedback-general {
  text-align: center;
  width: 100%;
  color: #fff;
  margin-bottom: 15px;
}
.modal .invalid-feedback.feedback-general a {
  color: #38E8B0;
}
.members-list tr {
  color: var(--lighter-grey-text) !important;
  font-size: 14px;
}
.members-list tr td:first-child {
  display: flex;
  align-items:center;
}
.members-list tr .details-member {
  display: flex;
  flex-direction: column;
  line-height: 17px;
  margin-left: 15px;
}
.members-list tr .user-avatar {
  height: 40px;
  width: 40px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
}
table.members-list {
  width: 100%;
  margin-top: 0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--grey-border);
  box-shadow: var(--light-box-shadow);
}
.member-name {
  color: #05131F;
  font-weight: 600;
}
.members-list tr td {
  padding: 15px;
  border-bottom: 1px solid var(--grey-border);
}
.members-list tr:last-child td {
  border-bottom: none;
}
body.invite-page {
  background: #F9F9F9;
  height: 100vh;
  position: relative;
}
.account-creation-loading h1 {
  color: #2D3036;
  font-family: "Plus Jakarta Sans";
  font-weight: 700;
  letter-spacing: -0.03em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 37px;
  margin-top: 20px;
  margin-bottom: 15px;
}
.account-creation-loading .light {
  color: #808080;
  font-family: "Inter";
  font-size: 16px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.02em;
}
.account-creation-loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
}
.alert .btn.btn-accent {
  font-size: 14px;
  padding: 9px 18px;
}
@media (min-width: 768px) {
  .topnav {
    display: flex;
    align-items: center;
  }
  .topnav a {display: flex;white-space: nowrap;}
}
@media (max-width: 768px) {
  .interface-wrapper .period-name span {
      font-size: 12px !important;
      position: absolute;
      white-space: nowrap;
      padding: 2px 6px !important;
      top: 2px;
  }
  .interface-wrapper .period-switcher .custom-switch {
      width: 85px !important;
  }
  .period-switcher {
      padding: 0;
  }
  .pricing-box {
      margin: 0 0 20px 0 !important;
      width: 100%;
  }
  .pricing-table {
      flex-direction: column;
      padding: 0 20px;
      width:100% !important;
  }
  .period-name .text-gradient {
      font-size: 13px;
      position: relative;
      margin-left: 0;
      letter-spacing: -0.03em;
      display: block;
  }
  .hero-content {
    text-align: center;
  }
  .header .heading p {
    font-size: 14px;
    line-height: 22px;
    padding: 0 20px;
  }
  .props {
    color: var(--slate-gray);
    font-size: 15px;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
    padding: 20px 0 0;
    justify-content: center;
    align-items: center;
  }
  .props > div {
    display: none;
  }
  .props > div:first-child {
      display: flex;
  }
  .props > div:first-child svg {
      margin-left: -20px;
  }
  .integrations-logos svg {
    height: 350px;
  }
  .sub-desc {
    display:none !important;
  }
  .hero-content .btn {
    text-align: center;
    justify-content: center;
    margin: 0 auto;
  }
  .hero-wrp .heading .sub-title {
    margin-left: 0;
    margin-bottom: 0;
  }
  .heading .sub-title {
    margin-bottom: 0;
  }
  .navbar-nav .nav-item .nav-link {
    font-size: 21px;
    text-align: center;
  }
  .nav-btns{
    margin:0 auto;
  }
  .hero-wrp {
    padding-top: 130px;
    padding-bottom: 80px;
  }
  .navbar-brand img{
    width:150px
  }
  .navbar{
    background: rgba(7,21,31,.5) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px);
    z-index: 10;
  }
  .heading .title br {content: " ";}
  .heading .title br:after {
      content: " ";
  }
  .use-cases {
    position: relative;
    top: 0;
    right: 0;
    max-width: 100%;
    margin-bottom: 50px;
  }
  .use-cases .owl-dots {
    margin: 15px auto 0;
    display: flex;
    justify-content: center;
  }
  .use-cases:before {
    display: none;
  }
  .use-cases .item {
    width: 360px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
  .hero-content {
    padding-left: 30px;
  }
  .heading .title {
    font-size: 43px;
  }
  .props > div {
    white-space: nowrap;
  }
  .props {
    padding-right: 40px;
  }
}