/*
[Master Stylesheet] 
Project: Showcase Ai Html
-------------------------------------------------------------------*/

/********************************************************
    body start
 *******************************************************/

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Space+Grotesk:wght@300..700&display=swap");
:root {
  --sai-primary-color: #06b873;
  --sai-font-color: #8e8e8e;
  --sai-white-color: #ffffff;
  --sai-black-color: #222;
  --sai-transition: all 0.3s;
  --sai-box-shadow: 0 0 20px 0 rgba(62, 28, 131, 0.1);
}

html {
  scroll-behavior: smooth;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-family: "Outfit", sans-serif;
  font-size: 16px;
  font-weight: 300;
  color: var(--sai-font-color);
  position: relative;
}

*::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
  border-radius: 10px;
}

*::-webkit-scrollbar {
  width: 4px;
  background-color: #f5f5f5;
}

*::-webkit-scrollbar-thumb {
  border-radius: 1rem;
  background: var(--sai-primary-color);
  min-height: 150px;
}

a,
a:hover,
a:focus,
button,
button:hover,
button:focus {
  text-decoration: none;
  background-color: transparent;
  -webkit-transition: var(--sai-transition);
  -moz-transition: var(--sai-transition);
  -ms-transition: var(--sai-transition);
  -o-transition: var(--sai-transition);
  transition: var(--sai-transition);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  -webkit-transition: var(--sai-transition);
  -moz-transition: var(--sai-transition);
  -ms-transition: var(--sai-transition);
  -o-transition: var(--sai-transition);
  transition: var(--sai-transition);
  margin: 0;
  padding: 0;
  word-break: break-word;
  font-family: "Space Grotesk", sans-serif;
  color: var(--sai-black-color);
}

input,
textarea,
select,
button,
label,
svg,
svg path,
svg rect,
svg polygon,
img,
a,
:after,
:before,
:hover,
:focus {
  outline: none !important;
  box-shadow: none;
  border: none;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

p {
  margin: 0px;
  word-break: break-word;
}

.fs_12 {
  font-size: max(
    10px,
    calc(10px + (12 - 10) * ((100vw - 320px) / (1920 - 320)))
  );
}

.fs_15 {
  font-size: max(
    13px,
    calc(13px + (15 - 13) * ((100vw - 320px) / (1920 - 320)))
  );
}

.fs_16 {
  font-size: max(
    14px,
    calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)))
  );
}

.fs_18 {
  font-size: max(
    16px,
    calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)))
  );
}

.fs_20 {
  font-size: max(
    18px,
    calc(18px + (20 - 18) * ((100vw - 320px) / (1920 - 320)))
  );
}

.fs_24 {
  font-size: clamp(
    20px,
    calc(20px + (24 - 20) * ((100vw - 320px) / (1920 - 320)))
  );
}

.fs_32 {
  font-size: clamp(
    24px,
    calc(24px + (32 - 24) * ((100vw - 320px) / (1920 - 320))),
    40px
  );
}

.fs_40 {
  font-size: clamp(
    26px,
    calc(26px + (40 - 26) * ((100vw - 320px) / (1920 - 320))),
    50px
  );
}

.fs_50 {
  font-size: clamp(
    28px,
    calc(28px + (50 - 28) * ((100vw - 320px) / (1920 - 320))),
    60px
  );
}

.fs_60 {
  font-size: clamp(
    30px,
    calc(30px + (60 - 30) * ((100vw - 320px) / (1920 - 320))),
    72px
  );
}

.fw_400 {
  font-weight: 400;
}

.fw_500 {
  font-weight: 500;
}

.fw_600 {
  font-weight: 600;
}

.fw_700 {
  font-weight: 700;
}

.menu-open {
  overflow: hidden;
}

.sai_main_wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

section {
  padding: 80px 0;
}

.row {
  row-gap: 24px;
}

.sai_section_header {
  text-align: center;
  max-width: 740px;
  margin: 0 auto 15px;
}

.sai_section_header h3 span {
  color: var(--sai-primary-color);
}

/********************************************************
    Go to Top Style
 *******************************************************/

.sai_top_icon a {
  display: flex;
  background-color: var(--sai-primary-color);
  width: 60px;
  height: 60px;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  transition: var(--sai-transition) opacity 0;
  visibility: hidden;
  z-index: 1000;
  cursor: pointer;
  animation: border-transform 4s linear infinite alternate forwards;
}

@keyframes border-transform {
  0% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
    transform: translateY(0px);
  }
  14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
  }
  28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
  }
  42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
  }
  56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
  }
  70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
  }
  84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
  }
  100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
    transform: translateY(-20px);
  }
}

.sai_top_icon a:active {
  background-color: var(--sai-black-color);
}

.sai_top_icon a.show {
  opacity: 1;
  visibility: visible;
}

/********************************************************
    Loader Style
 *******************************************************/

.loader {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  z-index: 999999;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--sai-white-color);
}

.loader img {
  width: 100px;
}

/********************************************************
    Button Style
 *******************************************************/

.sai_btn {
  position: relative;
  background: linear-gradient(90deg, #06b873 0%, #06b873 100%);
  color: var(--sai-white-color);
  padding: 0 10px;
  min-height: 45px;
  min-width: 135px;
  width: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 7px;
  white-space: nowrap;
  gap: 7px;
}

.btn_black {
  background: linear-gradient(106.04deg, #053120 -5.5%, #080f16 38.02%);
}

.sai_btn:hover {
  transform: scale(0.9);
}

/********************************************************
    Header Section Style
 *******************************************************/

.sai_header_wrapper {
  position: fixed;
  top: 30px;
  width: 100%;
  z-index: 99;
  transition: var(--sai-transition);
}

.sai_header_wrapper.fixed {
  top: 0;
}

.sai_header_content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  background-color: var(--sai-white-color);
  gap: 30px;
  padding: 17px 30px;
  box-shadow: 0px 0px 2px 0px #90bb46;
}

.sai_navbar {
  display: flex;
  align-items: center;
  gap: 40px;
}

.sai_navbar ul {
  display: flex;
  gap: 40px;
}

.sai_navbar ul li a {
  color: var(--sai-black-color);
  transition: var(--sai-transition);
}

.sai_navbar ul li a:hover {
  color: var(--sai-primary-color);
}

.sai_header_btn {
  display: flex;
  align-items: center;
  gap: 15px;
}

.sai_nav_toggle {
  display: none;
}

.ham {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 400ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 50px;
  height: 50px;
}

.sai_nav_toggle .ham {
  width: 44px;
  height: 44px;
  min-width: 44px;
}

.line {
  fill: none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke: #3d415b;
  stroke-width: 5.5;
  stroke-linecap: round;
}

.sai_nav_toggle .line {
  stroke: var(--sai-primary-color);
}

.ham7 .top {
  stroke-dasharray: 40 172;
}

.ham7 .middle {
  stroke-dasharray: 40 111;
}

.ham7 .bottom {
  stroke-dasharray: 40 172;
}

.menu-open .ham7 .top {
  stroke-dashoffset: -132px;
}

.menu-open .ham7 .middle {
  stroke-dashoffset: -71px;
}

.menu-open .ham7 .bottom {
  stroke-dashoffset: -132px;
}

/********************************************************
    Banner Section Style
 *******************************************************/

.sai_banner_wrapper {
  background-image: url("../images/banner_bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 220px 0 100px;
}

.sai_banner_content {
  text-align: center;
}

.sai_banner_content h5 {
  border-radius: 60px;
  padding: 9px 30px;
  background: var(--sai-white-color);
  box-shadow: 0px 4px 10px 0px #26350b1a;
  max-width: fit-content;
  margin: auto;
}

.sai_banner_content h1 {
  max-width: 1170px;
  margin: 20px auto 10px;
  line-height: 1.1667;
}

.sai_banner_content h6 {
  max-width: 900px;
  margin: auto;
  line-height: 1.5;
}

.sai_banner_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 45px;
}

.sai_banner_btn .sai_btn {
  min-width: 160px;
}

.sai_banner_btn .btn_black {
  min-width: 140px;
}

/********************************************************
    About Section Style
 *******************************************************/

.sai_about_wrapper,
.sai_about_slider_wrapper,
.sai_works_wrapper {
  padding-top: 0;
}

.sai_feature_video {
  position: relative;
  background: linear-gradient(180deg, #06b873 0%, rgba(5, 10, 15, 0) 80%);
  width: 100%;
  border-radius: 35px;
  padding: 15px 15px 0;
}

.sai_feature_video video {
  max-width: 100%;
  border-radius: 20px;
}

.sai_feature_content p {
  line-height: 1.5556;
}

.sai_feature_content ul {
  margin: 10px 0;
}

.sai_feature_content a {
  margin-top: 25px;
}

.sai_about_slider {
  position: relative;
  overflow: hidden;
}

.sai_about_slider_item_img {
  border-radius: 10px;
}

.sai_about_slider_item_img video {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: contain;
  border-radius: 10px;
}

/********************************************************
     How It Works Section Style
 *******************************************************/

.sai_works_box {
  position: relative;
  border-radius: 10px;
  background-color: var(--sai-white-color);
  border: 1px solid #e2f9f0;
  box-shadow: 0px 0px 60px 0px #3d226d0f;
  padding: 45px 30px 30px;
  text-align: center;
  margin-top: 25px;
}

.sai_arc_img {
  position: absolute;
  right: -63px;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
  max-width: 100px;
}

.sai_step_no {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid #e2f9f0;
  background-color: var(--sai-primary-color);
  color: var(--sai-white-color);
  width: 140px;
  height: 50px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sai_works_content {
  margin-top: 25px;
}

.sai_works_content h4 {
  margin-bottom: 10px;
}

.sai_works_content p {
  line-height: 1.75;
}

/********************************************************
     Testimonials Section Style
 *******************************************************/

.sai_testimonials_wrapper {
  background-color: #050a0f;
}

.sai_testimonials_wrapper .sai_section_header h3 {
  color: var(--sai-white-color);
}

.sai_reviews_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.sai_review_card {
  background: var(--sai-white-color);
  border-radius: 10px;
  padding: 5px;
  box-shadow: 0px 0px 40px 0px #1d2721;
}

.sai_review_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 10px 15px;
  background-color: #f5f5f5;
  border: 1px solid #ebeff2;
  border-radius: 10px;
  flex-wrap: wrap;
  gap: 0px 15px;
}

.sai_review_left {
  color: var(--sai-black-color);
  display: flex;
  align-items: center;
  gap: 5px;
}

.sai_stars {
  color: #f5b400;
  letter-spacing: 1px;
}

.sai_review_meta {
  color: var(--sai-black-color);
  white-space: nowrap;
}

.sai_review_meta strong {
  color: var(--sai-primary-color);
}

.sai_review_body {
  padding: 0 10px 15px;
}

/********************************************************
     Pricing Section Style
 *******************************************************/

.sai_pricing_wrapper .sai_section_header,
.sai_partners_wrapper .sai_section_header {
  max-width: 800px;
}

.sai_pricing_box {
  background-color: var(--sai-white-color);
  border-radius: 10px;
  box-shadow: 0px 0px 60px 0px #3d226d0f;
  padding: 50px 35px;
  border: 1px solid #e2f9f0;
  margin-top: 70px;
}

.sai_pricing_box.active {
  width: 100%;
  background: url("../images/price_bg.webp") no-repeat center;
  background-size: 100% 100%;
  border: none;
  margin-top: 0;
  padding: 120px 30px 85px;
}

.sai_pricing_title {
  position: relative;
  padding-bottom: 20px;
  margin-bottom: 15px;
}

.sai_pricing_title::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, #ffffff 0%, #dae8f4 60.83%, #ffffff 100%);
}

.sai_pricing_title > span {
  position: absolute;
  top: 0;
  right: 0;
  width: 47px;
  height: 47px;
  border-radius: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--sai-primary-color);
  outline: 10px solid rgb(149 191 71 / 10%);
}

.sai_pricing_box.active .sai_pricing_title::before {
  background: linear-gradient(90deg, #0c1612 0%, #06b873 46%, #0c1612 100%);
}

.sai_pricing_box.active .sai_pricing_title h4,
.sai_pricing_box.active .sai_pricing_title h2,
.sai_pricing_box.active .sai_pricing_title p,
.sai_pricing_box.active .sai_pricing_list li {
  color: var(--sai-white-color);
}

.sai_pricing_title h2 {
  margin: 10px 0 5px;
}

.sai_pricing_title h2 span {
  color: #afacc1;
}

.sai_pricing_box.active .sai_pricing_title h2 span {
  color: #697470;
}

.sai_pricing_title p {
  text-transform: capitalize;
}

.sai_pricing_list {
  margin-bottom: 35px;
}

.sai_pricing_list li {
  position: relative;
  padding-left: 27px;
  margin-bottom: 20px;
}

.sai_pricing_list li:last-child {
  margin-bottom: 0;
}

.sai_pricing_list li::before {
  content: url(../images//check.svg);
  position: absolute;
  left: 0;
  top: 3px;
  color: var(--sai-primary-color);
}

.sai_pricing_box .sai_btn {
  width: 100%;
}

/********************************************************
    Faq Section Style
 *******************************************************/

.sai_faq_wrapper {
  background-color: #050a0f;
}

.sai_faq_content {
  max-width: 655px;
}

.sai_faq_content h3,
.sai_faq_content_text h4 {
  color: var(--sai-white-color);
}

.sai_faq_content_box {
  max-width: 500px;
  background: #151e1d;
  border-radius: 20px;
  display: flex;
  align-items: center;
  padding: 25px 40px;
  gap: 30px;
  margin-top: 20px;
}

.sai_faq_content_icon img {
  min-width: 54px;
}

.sai_faq_content_text h6 {
  color: var(--sai-primary-color);
  margin-bottom: 5px;
}

.sai_faq_accordion {
  max-width: 790px;
  margin-left: auto;
}

.sai_faq_item {
  padding: 0 40px 25px;
  border-bottom: 1px solid #29352e;
  margin-top: 30px;
}

.sai_faq_item:first-child {
  margin-top: 0;
}

.sai_faq_item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sai_faq_item h5 {
  color: var(--sai-white-color);
  cursor: pointer;
  position: relative;
  margin-bottom: 10px;
}

.sai_faq_item h5::before {
  content: url(../images/que.png);
  position: absolute;
  left: -40px;
  top: 1px;
}

.sai_faq_question::after {
  content: url(../images/plus.svg);
  position: absolute;
  right: -40px;
  top: 0;
  transform: rotate(180deg);
  transition: var(--sai-transition);
}

.sai_faq_question.collapsed::after {
  transform: rotate(0deg);
}

.sai_faq_answer p {
  max-width: 520px;
}

/********************************************************
    Partners Section Style
 *******************************************************/

.sai_sponsor_slider,
.sai_partner_slider {
  position: relative;
  overflow: hidden;
}

.sai_partner_slider {
  margin-top: 40px;
}

.sai_sponsor_item {
  text-align: center;
}

.sai_sponsor_item > img {
  max-height: 100px;
  object-fit: contain;
}

/********************************************************
    Footer  Section Style
 *******************************************************/

.sai_footer_wrapper {
  background-color: #050a0f;
  padding: 50px 0 25px;
}

.sai_footer_top {
  text-align: center;
  padding: 80px 0 30px;
  position: relative;
}

.sai_footer_top::before {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  background: linear-gradient(
    270deg,
    rgba(6, 184, 115, 0) 0%,
    rgb(6 184 115 / 30%) 50%,
    rgba(6, 184, 115, 0) 100%
  );
}

.sai_placehold_logo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scale(0.8);
}

.sai_footer_top > a {
  display: inline-block;
  position: relative;
}

.sai_footer_top > p {
  max-width: 900px;
  width: 100%;
  margin: 20px auto 0;
}

.sai_footer_social_links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 30px;
}

.sai_footer_top ul li a {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  background: linear-gradient(
    106.04deg,
    rgb(5, 49, 32) -5.5%,
    rgb(8, 15, 22) 38.02%
  );
  border-radius: 6px;
  transition: 0.3s;
}

.sai_footer_top ul li a:hover {
  box-shadow: rgb(6 184 115 / 50%) 0px 0px 30px 0px;
}

.sai_footer_top ul li a::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0px;
  border-radius: 6px;
  transition: 0.3s;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  border-image: initial;
  background: linear-gradient(
      216.74deg,
      rgb(8, 15, 22) 29.72%,
      rgb(6 184 115) 88.24%
    )
    border-box border-box;
  mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px)
      padding-box exclude,
    linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px);
}
.sai_footer_copyright {
  text-align: center;
}

.sai_pages_links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.sai_pages_links > a {
  color: var(--sai-font-color);
  padding-right: 20px;
  border-right: 1px solid var(--sai-font-color);
}

.sai_pages_links > a:last-child {
  border-right: none;
  padding-right: 0;
}

.sai_footer_copyright p > a,
.sai_pages_links > a:hover {
  color: var(--sai-primary-color);
}

/********************************************************
    Privacy  Section Style
 *******************************************************/

.sai_privacy_wrapper {
  padding-top: 150px;
}

.sai_tp_content {
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid #e2f9f0;
}

.sai_tp_content:last-child {
  padding: 0;
  margin: 0;
  border: none;
}

.sai_tp_content a {
  color: var(--sai-primary-color);
}

.sai_tp_content ul li {
  list-style: inside;
}