@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400&family=Poppins:wght@400;500;700;800&family=Roboto:wght@400;500;600;700;800&family=Roboto+Slab:wght@500&family=Work+Sans:wght@600&display=swap');

@font-face {
  font-family: "Helvetica Neue";
  src: url("../fonts/HelveticaNeueLight.otf");
}

:root {
  --ff_work_sans: "Work Sans", sans-serif;
  --ff_roboto_slab: "Roboto Slab", serif;
  --ff_roboto: "Roboto", sans-serif;
  --ff_poppins: "Poppins", sans-serif;
  --ff_manrope: "Manrope", sans-serif;
  --ff_helvetica_neue: "Helvetica Neue", sans-serif;

  --fs_14: 0.875rem;
  --fs_16: 1rem;
  --fs_19: 1.2277rem;
  --fs_20: 1.25rem;
  --fs_24: 1.5rem;
  --fs_32: 2rem;
  --fs_36: 2.25rem;
  --fs_46: 2.875rem;
  --fs_56: 3.5rem;
  --fs_70: 4.375rem;
  --fs_128: 8rem;

  --c_primary: #00ECFF;
  --c_warning: #FCA62A;
  --c_black: #000000;
  --c_dark: #000515;
  --c_gray: #CBCDD3;
  --c_white: #ffffff;
  --c_whiteLt: #ffffff66;
  /* 40% */
  --c_whiteLt2: #ffffff33;
  /* 20% */

  --bg_primary: #00ECFF;
  --bg_primaryGrd: linear-gradient(90deg, #00ECFF -68.96%, #006288 100%);
  --bg_borderGrd: linear-gradient(to right, #99999900, #ffffff, #99999900);
  --bg_black: #000000;
  --bg_dark: #000515;
  --bg_dark2: #1C2030;
  --bg_dark3: #0e1d32;
  --bg_gray: #33353F;
  --bg_light: #71717133;
  /* 20% */
  --bg_white: #ffffff;
}

body {
  font-family: var(--ff_roboto);
  color: var(--c_white);
  background: var(--bg_dark);
  line-height: 1.5;
}

p,
ul,
input,
button {
  font-size: var(--fs_19);
}

.ff_work_sans {
  font-family: var(--ff_work_sans);
}

.ff_roboto_slab {
  font-family: var(--ff_roboto_slab);
}

.ff_roboto {
  font-family: var(--ff_roboto);
}

.ff_poppins {
  font-family: var(--ff_poppins);
}

.ff_manrope {
  font-family: var(--ff_manrope);
}

.ff_helvetica_neue {
  font-family: var(--ff_helvetica_neue);
}

.fs_14 {
  font-size: var(--fs_14);
}

.fs_16 {
  font-size: var(--fs_16);
}

.fs_19 {
  font-size: var(--fs_19);
}

.fs_20 {
  font-size: var(--fs_20);
}

.fs_24 {
  font-size: var(--fs_24);
}

.fs_32 {
  font-size: var(--fs_32);
}

.fs_36 {
  font-size: var(--fs_36);
}

.fs_46 {
  font-size: var(--fs_46);
}

.fs_56 {
  font-size: var(--fs_56);
}

.fs_70 {
  font-size: var(--fs_70);
}

.fs_128 {
  font-size: var(--fs_128);
}

.c_primary {
  color: var(--c_primary);
}

.c_warning {
  color: var(--c_warning);
}

.c_black {
  color: var(--c_black);
}

.c_dark {
  color: var(--c_dark);
}

.c_gray {
  color: var(--c_gray);
}

.c_white {
  color: var(--c_white);
}

.c_whiteLt {
  color: var(--c_whiteLt);
}

.c_whiteLt2 {
  color: var(--c_whiteLt2);
}

.bg_primary {
  background-color: var(--bg_primary);
}

.bg_primaryGrd {
  background: var(--bg_primaryGrd);
}

.bg_black {
  background-color: var(--bg_black);
}

.bg_dark {
  background-color: var(--bg_dark);
}

.bg_dark2 {
  background-color: var(--bg_dark2);
}

.bg_gray {
  background-color: var(--bg_gray);
}

.bg_white {
  background-color: var(--bg_white);
}


.btn {
  font-size: var(--fs_20);
  line-height: 1.2;
  padding: 0.5rem 1rem;
  text-transform: capitalize;
  border-radius: 0.3125rem;
}

.btn:active {
  -webkit-transform: scale(0.96);
  -ms-transform: scale(0.96);
  transform: scale(0.96);
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.btn_primary {
  color: var(--c_white);
  background: var(--bg_primaryGrd);
  border: 2px solid #63BFEF;
  -webkit-box-shadow: 0rem 0.25rem 1.25rem rgba(243, 225, 225, 0.55), inset 0px 4px 4px rgba(0, 0, 0, 0.25);
  box-shadow: 0rem 0.25rem 1.25rem rgba(243, 225, 225, 0.55), inset 0px 4px 4px rgba(0, 0, 0, 0.25);
}



.btn_warning {
  color: var(--c_white);
  background: -o-linear-gradient(top, #F58B21 -121.31%, #F5B419 80.97%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(-121.31%, #F58B21), color-stop(80.97%, #F5B419));
  bakground: linear-gradient(180deg, #F58B21 -121.31%, #F5B419 80.97%);
  border: 2px solid #FFCD5C;
  -webkit-box-shadow: inset 0rem 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
  box-shadow: inset 0rem 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
}

@media(min-width:1200px) {
  .container {
    max-width: 94.375rem;
    /* 1510px */
  }

  .container_sm {
    max-width: 72.5rem;
    /* 1126px */
  }

  .container_md {
    max-width: 80.625rem;
    /* 1265px */
  }

  .container_md2 {
    max-width: 88.75rem;
    /* 1396px */
  }

  .container_lg {
    max-width: 100rem;
    /* 1600px */
  }
}

@media(max-width:1799.98px) {
  html {
    font-size: 12px;
  }
}

@media(max-width:1399.98px) {
  html {
    font-size: 11px;
  }
}

@media(max-width:575.98px) {
  :root {
    --fs_36: 2.2rem;
    --fs_46: 2.5rem;
    --fs_56: 3rem;
    --fs_70: 3.5rem;
    --fs_128: 6rem;
  }

  .container {
    padding-left: 1.8rem;
    padding-right: 1.8rem;
  }
}

/* _______________________ start home page _______________________ */

/* ... start header section ... */
.header {
  padding: 2.5rem 0rem 1.5rem;
  background-color: transparent;
  -webkit-transition: padding 0.3s, background 0.3s, backdrop-filter 0.3s, box-shadow 0.3s, border-bottom 0.3s;
  -o-transition: padding 0.3s, background 0.3s, backdrop-filter 0.3s, box-shadow 0.3s, border-bottom 0.3s;
  transition: padding 0.3s, background 0.3s, backdrop-filter 0.3s, box-shadow 0.3s, border-bottom 0.3s;
}

.navbar-brand {
  overflow: hidden;
}

.header::after {
  content: "";
  position: absolute;
  bottom: 0rem;
  left: 50%;
  width: 70%;
  height: 1px;
  background: var(--bg_borderGrd);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.scrolled_header .header {
  padding: 0.8rem 0rem;
  background: rgba(10, 22, 40, 0.75);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.header_logo {
  width: 14rem;
  height: 3.8125rem;
  -o-object-fit: contain;
  object-fit: contain;
}

.header_backDrop {
  display: block;
  position: fixed;
  z-index: 999;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              backdrop-filter 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              -webkit-backdrop-filter 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              background-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
}

.header .navbar {
  justify-content: space-between;
  width: 100%;
}

.header .navbar-brand {
  flex: 0 0 auto;
}

.header .header_navContent {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
}

.header .navbar-nav {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: flex;
  gap: 2.5rem;
}

.header .nav-item {
  margin-left: 0;
}

.header .nav-link {
  display: inline-block;
  color: var(--c_white);
  font-size: var(--fs_20);
  padding: 0px !important;
  position: relative;
}

.header .nav-link:hover,
.header .nav-link.active {
  color: var(--c_primary);
}

.header .nav-link:hover::before,
.header .nav-link.active::before {
  width: 100%;
}

.navbar-brand .logo-mobile {
  display: none;
}

@media (max-width: 1199.98px) {
  .header {
    padding: 1.5rem 0rem;
    max-width: 100vw;
    border-bottom: 1px solid transparent;
  }

  .header_logo {
    height: 4rem;
  }

  .scrolled_header .header {
    padding: 1.5rem 0rem;
    background: rgba(10, 22, 40, 0.75);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
  }


  .navbar-brand,
  .menu_toggleBtn {
    position: relative;
    z-index: 1005;
  }

  .menu_toggleBtn {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 0;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .menu_toggleBtn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(100, 181, 246, 0.4);
    box-shadow: 0 6px 20px rgba(81, 74, 226, 0.3);
    transform: scale(1.05);
  }

  .menu_toggleBtn span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    margin: 0;
    -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -o-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .active_header .menu_toggleBtn {
    background: rgba(100, 181, 246, 0.2);
    border-color: rgba(100, 181, 246, 0.4);
  }

  .active_header .menu_toggleBtn span:nth-of-type(1) {
    -webkit-transform: rotate(45deg) translate(6px, 6px);
    -ms-transform: rotate(45deg) translate(6px, 6px);
    transform: rotate(45deg) translate(6px, 6px);
    background: #64b5f6;
  }

  .active_header .menu_toggleBtn span:nth-of-type(2) {
    -webkit-transform: rotate(-45deg) translate(6px, -6px);
    -ms-transform: rotate(-45deg) translate(6px, -6px);
    transform: rotate(-45deg) translate(6px, -6px);
    background: #64b5f6;
  }

  .header_navContent {
    position: fixed;
    z-index: 1000;
    top: 75px;
    right: 16px;
    background: rgba(10, 22, 40, 0.98);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    width: auto;
    min-width: 140px;
    max-width: calc(100vw - 32px);
    padding: 12px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  }

  .header .header_navContent {
    -webkit-transform: translateX(120%) scale(0.9);
    -ms-transform: translateX(120%) scale(0.9);
    transform: translateX(120%) scale(0.9);
    opacity: 0;
    -webkit-transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                        opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -o-transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                   opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: visible;
  }

  .header.active_header .header_navContent {
    -webkit-transform: translateX(0) scale(1);
    -ms-transform: translateX(0) scale(1);
    transform: translateX(0) scale(1);
    opacity: 1;
  }

  .header .navbar-nav {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
  }

  .header_navContent>* {
    opacity: 1;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
  }

  .active_header .header_navContent>* {
    opacity: 1;
  }

  .header .nav-item {
    margin: 0;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease-out,
                transform 0.25s ease-out;
    width: auto;
  }

  .header.active_header .nav-item {
    opacity: 1;
    transform: translateY(0);
  }

  .header.active_header .nav-item:nth-child(1) {
    transition-delay: 0.05s;
  }

  .header.active_header .nav-item:nth-child(2) {
    transition-delay: 0.1s;
  }

  .header.active_header .nav-item:nth-child(3) {
    transition-delay: 0.15s;
  }

  .header.active_header .nav-item:nth-child(4) {
    transition-delay: 0.2s;
  }

  .header .nav-link {
    margin-left: 0;
    padding: 12px 20px !important;
    border-radius: 10px;
    text-align: center;
    width: auto;
    min-width: 100px;
    display: inline-block;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: 500;
    background: transparent;
    border: none;
    transition: all 0.2s ease;
    position: relative;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .header .nav-link::before {
    display: none;
  }

  .header .nav-link::after {
    display: none;
  }

  .header .nav-link:hover,
  .header .nav-link.active {
    background: rgba(100, 181, 246, 0.12);
    color: #64b5f6;
    transform: none;
    box-shadow: none;
  }

  .header .nav-item .lets-talk-button {
    display: none !important;
  }
  
  .header .nav-item:has(.lets-talk-button) {
    display: none !important;
  }

  .header.active_header .header_backDrop {
    opacity: 1;
    visibility: visible;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: auto;
  }
}

@media (max-width: 789px) {
  .navbar-brand {
    width: 50%;

    display: flex;
    justify-content: start;
  }

  .navbar-brand .logo-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 60%;

    gap: 2px;
  }

  .navbar-brand .logo-mobile img.logo {
    width: 45%;
  }

  .navbar-brand .logo-mobile img.text-logo {
    height: 12px;
  }

  .navbar-brand .logo-desktop {
    display: none;
  }

  .header_navContent {
    top: 70px;
    right: 12px;
    width: auto;
    min-width: 140px;
    max-width: calc(100vw - 24px);
    padding: 12px 16px;
  }

  .menu_toggleBtn {
    width: 40px;
    height: 40px;
  }

  .menu_toggleBtn span {
    width: 20px;
  }
}

/* ... end header section ... */


/* services & benefit section */
.benefits_section {
  z-index: 20;
}

.splide__pagination{
  display: none !important;
}


/* Modern title design for benefits section */
.benefits-title-modern {
  font-size: clamp(2.5rem, 5vw, 4rem) !important;
  font-weight: 300 !important;
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: 4rem !important;
  background: linear-gradient(135deg, #fff 0%, #64b5f6 50%, #514ae2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: none !important;
  line-height: 1.2;
}

.services_section .bg {
  position: absolute;
  width: 70%;
  height: 90%;

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 0;

  left: 50%;
  transform: translateX(-50%);
}

.services_section .bg .gradient {
  display: none;
}

.services_section .bg img {
  transform: rotate(60deg);
  width: 50%;
  position: absolute;
  bottom: 0%;
}

.services_section .container_md2 {
  z-index: 10;
  position: relative;
}

.carousel-container {
  z-index: 10;
}



/* start benefit section home */

.benefits_section {
  opacity: 0;
  transform: translateY(50px);
  transition: all .8s ease-out
}

.benefits_section.fade-in {
  opacity: 1;
  transform: translateY(0)
}

/* end benefit section home */



.prism-video.dimmed video {
  filter: grayscale(100%) brightness(0.7);
  transition: filter 0.4s ease, opacity 0.4s ease;
}

.prism-video:hover .video-play-button {
  opacity: 0;
}

.video-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 58px;
  background: rgba(255, 255, 255, 0.15);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
  z-index: 10;
}

/* Play icon triangle */
.video-play-button::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.95);
  margin-left: 3px;
  transition: all 0.3s ease;
}

/* Play button hover effect */
.video-play-button:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 8px 32px rgba(100, 181, 246, 0.3);
}

.video-play-button:hover::before {
  border-color: transparent transparent transparent rgba(255, 255, 255, 1);
}

.prism-video.muted-play .video-play-button {
  opacity: 1;
}


/* get-subscribe */
.get-subscribe {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;

  margin-top: -80px; 
  margin-bottom: -5rem;
  padding-top: 80px;

  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 85%, rgba(255, 255, 255, 0.8) 95%, rgba(255, 255, 255, 0) 100%);

  min-height: 50vh;

  z-index: 0;
  position: relative;
}

.get-subscribe p {
  color: #222222;
  font-size: 1.4rem;
  text-align: center;
  max-width: 80%;
}

.get-subscribe form {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;

  width: 100%;
}

.get-subscribe form input {
  padding: 13px 17px;
  width: 400px;
  border-radius: 12px;
  background-color: #e2e2e2;
  border: 1px solid rgb(143, 143, 143);

  color: rgb(41, 41, 41);
  font-size: 1.1rem;
  letter-spacing: .4px;
}

.get-subscribe form input::placeholder {
  color: rgb(49, 49, 49);
}

.get-subscribe form button {
  padding: 11px 14px;
  border-radius: 12px;
  background-color: #e2e2e2;
  border: 1px solid rgb(143, 143, 143);

  color: rgb(17, 17, 17);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: .4px;

  box-shadow: 0px 2px 14px rgb(126, 126, 126);
}

.extraInfo_section2 .strip-content{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
}

.strip-content i {
  font-size: 2rem;
}

@media screen and (max-width:760px) {
  .get-subscribe {
    min-height: 50vh;
  }

  .get-subscribe form input {
    width: 60%;
  }

  .extraInfo_section2 .strip-content{
    justify-content: center;
    text-align: center;
  }
}



/* privacy section */
.privacy-section {
  background: #0a1628;
  padding: 80px 0 100px 0;
  position: relative;
  z-index: 9;
}

.privacy-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
  position: relative;
  z-index: 2;
}

.privacy-visual {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 400px;
}

.privacy-content {
  flex: 1;
  max-width: 600px;
  z-index: 3;
  position: relative;
  text-align: left;
}

.privacy-title {
  font-size: 36px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 20px 0;
  letter-spacing: -0.5px;
  text-align: center;
  position: relative;
}

.privacy-description {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.8;
  margin: 0 0 30px 0;
  text-align: left !important;
  padding-left: 0;
  margin-left: 0;
}

.compliance-grid {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: 30px;
  padding: 10px 0;
}

/* Fade edges - removed to fix artifact */
.compliance-grid::before,
.compliance-grid::after {
  display: none;
}

.compliance-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: scrollLeft 20s linear infinite !important;
  will-change: transform;
}

@keyframes scrollLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.compliance-track:hover {
  animation-play-state: paused;
}

.security-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: rgba(10, 22, 40, 0.6);
  border: 1px solid rgba(0, 168, 255, 0.15);
  border-left: 3px solid #00a8ff; /* Tech accent */
  border-radius: 4px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Scan shine effect */
.security-chip::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 168, 255, 0.1), transparent);
  transform: skewX(-25deg);
  transition: 0.5s;
}

.security-chip.decrypted::before {
  animation: chipScan 2s infinite;
}

@keyframes chipScan {
  0% { left: -100%; }
  50%, 100% { left: 200%; }
}

.security-chip:hover {
  background: rgba(0, 168, 255, 0.1);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

.chip-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: all 0.3s ease;
}

.security-chip.decrypted .chip-icon {
  opacity: 1;
  color: #00a8ff;
  filter: drop-shadow(0 0 5px rgba(0, 168, 255, 0.6));
}

.chip-text {
  font-family: 'Courier New', monospace;
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.security-chip.decrypted .chip-text {
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 168, 255, 0.4);
}

/* Checkmark SVG styles */
.chip-check {
  width: 100%;
  height: 100%;
  stroke: #00a8ff;
  stroke-width: 3;
  fill: none;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 0.5s ease;
}

.security-chip.decrypted .chip-check {
  stroke-dashoffset: 0;
}

.checkmark {
  width: 100%;
  height: 100%;
  stroke-width: 2;
  stroke: #00a8ff;
  stroke-miterlimit: 10;
  box-shadow: inset 0px 0px 0px #00a8ff;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark-circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #00a8ff;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .privacy-title,
  .privacy-description {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Lock Animation Styles - Base */
.lock-container {
  position: relative;
  width: 200px;
  height: 280px;
  transform: scale(1.5);
  opacity: 0;
}

.lock-container.animate-in {
  animation: lockUnveil 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             lockPulse 3s ease-in-out infinite 1s;
}

@keyframes lockUnveil {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1.5);
  }
}

@keyframes lockPulse {
  0%, 100% {
    transform: scale(1.5);
  }
  50% {
    transform: scale(1.6);
  }
}

/* Title animation */
.privacy-title {
  font-size: 36px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 20px 0;
  letter-spacing: -0.5px;
  opacity: 0;
  transform: translateY(-20px);
}

.privacy-title.animate-in {
  animation: titleReveal 0.8s ease-out forwards;
  animation-delay: 0.3s;
}

@keyframes titleReveal {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Description animation */
.privacy-description {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.8;
  margin: 0 0 30px 0;
  opacity: 0;
  transform: translateY(20px);
  text-align: left !important;
}

.privacy-description.animate-in {
  animation: descFadeUp 0.8s ease-out forwards;
  animation-delay: 0.5s;
}

@keyframes descFadeUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Compliance grid animation */
.compliance-grid {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: 30px;
  padding: 10px 0;
  opacity: 0;
  transform: translateY(20px);
}

.compliance-grid.animate-in {
  animation: gridSlideUp 0.6s ease-out forwards;
  animation-delay: 0.7s;
}

@keyframes gridSlideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.lock-body {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 140px;
  background: rgba(0, 168, 255, 0.05);
  border: 1px solid rgba(0, 168, 255, 0.5);
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(0, 168, 255, 0.1), inset 0 0 30px rgba(0, 168, 255, 0.05);
  z-index: 2;
  overflow: hidden;
}

/* Background image in lock body - behind keyhole with 30% opacity */
.lock-body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: url('../img/happiness-at-work.png');
  background-size: 130%;
  background-position: 12% 50%;
  background-repeat: no-repeat;
  opacity: 0.3;
  border-radius: 20px;
  z-index: 0;
  pointer-events: none;
}

/* Desktop: reduce transparency (make more visible) */
@media (min-width: 992px) {
  .lock-body::before {
    opacity: 0.45;
  }
}


.lock-ring {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 140px;
  border: 6px solid rgba(0, 168, 255, 0.8);
  border-bottom: 0;
  border-radius: 60px 60px 0 0;
  z-index: 1;
  box-shadow: 0 0 15px rgba(0, 168, 255, 0.3);
}

.keyhole {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Outer Rim */
.keyhole::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 168, 255, 0.4), rgba(0, 168, 255, 0.1));
  clip-path: path("M 0 20 A 20 20 0 1 1 40 20 L 30 60 L 10 60 Z");
  z-index: 1;
}

/* Inner Hole */
.keyhole::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 34px;
  height: 54px;
  background: #020617;
  clip-path: path("M 0 17 A 17 17 0 1 1 34 17 L 26 54 L 8 54 Z");
  z-index: 2;
}

.keyhole-glow {
  width: 10px;
  height: 10px;
  background: #00a8ff;
  border-radius: 50%;
  box-shadow: 0 0 20px #00a8ff, 0 0 40px #00a8ff;
  animation: pulse 2s infinite;
  position: relative;
  z-index: 3;
}

.lock-circuit {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(90deg, transparent 49%, rgba(0, 168, 255, 0.1) 49%, rgba(0, 168, 255, 0.1) 51%, transparent 51%),
    linear-gradient(0deg, transparent 49%, rgba(0, 168, 255, 0.1) 49%, rgba(0, 168, 255, 0.1) 51%, transparent 51%);
  background-size: 20px 20px;
  opacity: 0.3;
}

.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(0, 168, 255, 0.8);
  box-shadow: 0 0 15px #00a8ff;
  animation: scan 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes scan {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

@keyframes pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Responsive: Tablet and below */
@media (max-width: 991px) {
  .privacy-wrapper {
    flex-direction: column;
    gap: 2rem;
    text-align: center;
  }
  
  .privacy-visual {
    min-height: 300px;
    order: -1;
    width: 100%;
  }
  
  .privacy-content {
    width: 100%;
    max-width: 100%;
    text-align: center;
  }
  
  .lock-container.animate-in {
    animation: lockUnveilTablet 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               lockPulseTablet 3s ease-in-out infinite 1s;
  }
  
  @keyframes lockUnveilTablet {
    0% {
      opacity: 0;
      transform: scale(0.5);
    }
    100% {
      opacity: 1;
      transform: scale(1.2);
    }
  }
  
  @keyframes lockPulseTablet {
    0%, 100% {
      transform: scale(1.2);
    }
    50% {
      transform: scale(1.28);
    }
  }
  
  .privacy-title {
    font-size: 32px;
    text-align: center;
  }
  
  .privacy-description {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  
  .compliance-grid::before,
  .compliance-grid::after {
    width: 40px;
  }
  
  .compliance-track {
    animation-duration: 15s;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .privacy-section {
    padding: 60px 0;
  }
  
  #vanta-bg {
    top: 25% !important;
  }
  
  .privacy-visual {
    min-height: 250px;
  }
  
  .lock-container.animate-in {
    animation: lockUnveilMobile 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               lockPulseMobile 3s ease-in-out infinite 1s;
  }
  
  @keyframes lockUnveilMobile {
    0% {
      opacity: 0;
      transform: scale(0.5);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  @keyframes lockPulseMobile {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.07);
    }
  }
  
  .privacy-content {
    text-align: center !important;
  }
  
  .privacy-title {
    font-size: 26px;
    text-align: center !important;
  }
  
  .privacy-description {
    font-size: 14px;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .privacy-description[style] {
    text-align: center !important;
  }
  
  .security-chip {
    padding: 8px 16px;
  }
  
  .chip-text {
    font-size: 12px;
  }
  
  .compliance-grid {
    display: flex;
    justify-content: center;
  }
  
  .compliance-grid::before,
  .compliance-grid::after {
    width: 30px;
  }
  
  .compliance-track {
    animation-duration: 12s;
    gap: 8px;
    flex-wrap: nowrap !important;
  }
  
  .security-chip {
    flex-shrink: 0;
    white-space: nowrap;
    min-width: fit-content;
  }
}


/* end privacy section */

/* ... start parallax home */
.parallax-container {
  position: relative;
  z-index: 10;
  
  /* max-width: 1800px;
  margin: 0 auto;
  margin-top: -100vh; */
}

.parallax-container::before {
  /* content: "";
  position: absolute;
  left: 0;
  top: 0%;

  z-index: 99;
  background-color: #000000;


  filter: blur(6px);

  width: 100%;
  height: 20%; */
}

.parallax-container::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;

  z-index: 99;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 40%,
    rgba(10, 22, 40, 0.15) 55%,
    rgba(10, 22, 40, 0.35) 65%,
    rgba(10, 22, 40, 0.6) 78%,
    rgba(10, 22, 40, 0.85) 90%,
    #0a1628 100%
  );

  width: 100%;
  height: 300px;
  pointer-events: none;
}


/* Parallax  item container */
.parallax-wrapper {
  position: relative;
  min-height: 100vh;
}

/* Parallax layers */
.parallax-layer {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: white;
  font-weight: bold;
  border-radius: 0;

  transform-origin: center bottom;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;   

  background: linear-gradient(155deg, #000 0%, #0a1628 50%, #000 100%)
}

.parallax-layer .bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}


.layer-number {
  font-size: 8rem;
  opacity: 0.2;
  position: absolute;
  font-weight: 900;
}

@media screen and (max-width:780px) {
  .layer-number {
    font-size: 8rem;
    opacity: 0.2;
    font-weight: 900;
  }
}

section.blank-gap{
  z-index: 99;
  height: 100px;
  margin-top: -100px;
  width: 100%; 
  position: relative; 

  display: none;
}


@media screen and (max-width:1000px) {
  .parallax-container::before {
    width: 100%;
    height: 890px;
  }

  section.blank-gap{
    display: block;
  }

  section.blank-gap::after{
    content: "";
    width: 100%;
    height: 100%;

    position: absolute;
    bottom: -100%;
    left: 0%;

    z-index: 10; 

    background: linear-gradient(180deg, #000000 10%, rgba(0, 0, 0, 0) 100%);

  }
}

/* Moving constellation pattern */
.constellation {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.constellation-dot {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(79, 209, 255, 0.4);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(79, 209, 255, 0.3);
}

.constellation-dot.large {
  width: 4px;
  height: 4px;
  background: rgba(79, 209, 255, 0.6);
  box-shadow: 0 0 10px rgba(79, 209, 255, 0.4);
}

/* Moving dots with unique paths */
.constellation-dot:nth-child(1) {
  top: 10%;
  left: 15%;
  animation: float-diagonal 15s ease-in-out infinite;
}

.constellation-dot:nth-child(2) {
  top: 15%;
  left: 25%;
  animation: float-circular 20s linear infinite;
}

.constellation-dot:nth-child(3) {
  top: 20%;
  left: 70%;
  animation: float-horizontal 18s ease-in-out infinite;
}

.constellation-dot:nth-child(4) {
  top: 25%;
  left: 85%;
  animation: float-vertical 12s ease-in-out infinite;
}

.constellation-dot:nth-child(5) {
  top: 30%;
  left: 10%;
  animation: twinkle 3s infinite,
    float-diagonal 25s ease-in-out infinite reverse;
}

.constellation-dot:nth-child(6) {
  top: 40%;
  left: 90%;
  animation: float-circular 22s linear infinite reverse;
}

.constellation-dot:nth-child(7) {
  top: 45%;
  left: 20%;
  animation: float-zigzag 16s ease-in-out infinite;
}

.constellation-dot:nth-child(8) {
  top: 50%;
  left: 75%;
  animation: twinkle 4s infinite,
    float-horizontal 14s ease-in-out infinite reverse;
}

.constellation-dot:nth-child(9) {
  top: 60%;
  left: 15%;
  animation: float-vertical 20s ease-in-out infinite;
}

.constellation-dot:nth-child(10) {
  top: 65%;
  left: 80%;
  animation: float-circular 18s linear infinite;
}

.constellation-dot:nth-child(11) {
  top: 70%;
  left: 25%;
  animation: twinkle 5s infinite, float-diagonal 15s ease-in-out infinite;
}

.constellation-dot:nth-child(12) {
  top: 75%;
  left: 60%;
  animation: float-horizontal 25s ease-in-out infinite;
}

.constellation-dot:nth-child(13) {
  top: 80%;
  left: 85%;
  animation: float-zigzag 20s ease-in-out infinite reverse;
}

.constellation-dot:nth-child(14) {
  top: 85%;
  left: 30%;
  animation: float-vertical 16s ease-in-out infinite reverse;
}

.constellation-dot:nth-child(15) {
  top: 90%;
  left: 70%;
  animation: twinkle 3.5s infinite, float-circular 30s linear infinite;
}

/* Additional floating dots */
.constellation-dot:nth-child(16) {
  top: 5%;
  left: 50%;
  animation: float-random 25s ease-in-out infinite;
}

.constellation-dot:nth-child(17) {
  top: 35%;
  left: 55%;
  animation: float-orbit 20s linear infinite;
}

.constellation-dot:nth-child(18) {
  top: 55%;
  left: 40%;
  animation: float-random 22s ease-in-out infinite reverse;
}

/* Movement animations */
@keyframes float-diagonal {

  0%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(50px, 50px);
  }

  50% {
    transform: translate(100px, -30px);
  }

  75% {
    transform: translate(30px, 20px);
  }
}

@keyframes float-circular {
  0% {
    transform: rotate(0deg) translateX(40px) rotate(0deg);
  }

  100% {
    transform: rotate(360deg) translateX(40px) rotate(-360deg);
  }
}

@keyframes float-horizontal {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(60px);
  }

  50% {
    transform: translateX(-40px);
  }

  75% {
    transform: translateX(30px);
  }
}

@keyframes float-vertical {

  0%,
  100% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(-40px);
  }

  50% {
    transform: translateY(30px);
  }

  75% {
    transform: translateY(-20px);
  }
}

@keyframes float-zigzag {

  0%,
  100% {
    transform: translate(0, 0);
  }

  12.5% {
    transform: translate(20px, -20px);
  }

  25% {
    transform: translate(-20px, -40px);
  }

  37.5% {
    transform: translate(30px, -60px);
  }

  50% {
    transform: translate(-10px, -30px);
  }

  62.5% {
    transform: translate(25px, 0);
  }

  75% {
    transform: translate(-15px, 20px);
  }

  87.5% {
    transform: translate(15px, 10px);
  }
}

@keyframes float-random {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  20% {
    transform: translate(30px, -50px) scale(1.2);
  }

  40% {
    transform: translate(-40px, 20px) scale(0.8);
  }

  60% {
    transform: translate(50px, 40px) scale(1.1);
  }

  80% {
    transform: translate(-20px, -30px) scale(0.9);
  }
}

@keyframes float-orbit {
  0% {
    transform: rotate(0deg) translate(60px) rotate(0deg);
  }

  100% {
    transform: rotate(360deg) translate(60px) rotate(-360deg);
  }
}

@keyframes twinkle {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

/* Dynamic connecting lines */
.constellation-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg,
      transparent,
      rgba(79, 209, 255, 0.15),
      transparent);
  transform-origin: left center;
  pointer-events: none;
}

.line-1 {
  top: 15%;
  left: 25%;
  width: 300px;
  transform: rotate(15deg);
  animation: line-pulse 8s ease-in-out infinite,
    line-rotate 20s linear infinite;
}

.line-2 {
  top: 25%;
  left: 70%;
  width: 150px;
  transform: rotate(-20deg);
  animation: line-pulse 10s ease-in-out infinite,
    line-swing 15s ease-in-out infinite;
}

.line-3 {
  top: 45%;
  left: 20%;
  width: 400px;
  transform: rotate(30deg);
  animation: line-pulse 12s ease-in-out infinite,
    line-rotate 25s linear infinite reverse;
}

.line-4 {
  top: 65%;
  left: 15%;
  width: 500px;
  transform: rotate(-10deg);
  animation: line-pulse 9s ease-in-out infinite,
    line-swing 18s ease-in-out infinite reverse;
}

.line-5 {
  top: 75%;
  left: 60%;
  width: 200px;
  transform: rotate(45deg);
  animation: line-pulse 11s ease-in-out infinite,
    line-rotate 30s linear infinite;
}

.line-6 {
  top: 35%;
  left: 40%;
  width: 250px;
  transform: rotate(-35deg);
  animation: line-pulse 7s ease-in-out infinite,
    line-expand 20s ease-in-out infinite;
}

.line-7 {
  top: 55%;
  left: 50%;
  width: 350px;
  transform: rotate(60deg);
  animation: line-pulse 13s ease-in-out infinite,
    line-swing 22s ease-in-out infinite;
}

/* Line animations */
@keyframes line-pulse {

  0%,
  100% {
    opacity: 0.15;
  }

  50% {
    opacity: 0.4;
  }
}

@keyframes line-rotate {
  0% {
    transform: rotate(15deg);
  }

  100% {
    transform: rotate(375deg);
  }
}

@keyframes line-swing {

  0%,
  100% {
    transform: rotate(-20deg) translateX(0);
  }

  25% {
    transform: rotate(10deg) translateX(20px);
  }

  50% {
    transform: rotate(-40deg) translateX(-10px);
  }

  75% {
    transform: rotate(20deg) translateX(15px);
  }
}

@keyframes line-expand {

  0%,
  100% {
    width: 250px;
    transform: rotate(-35deg);
  }

  50% {
    width: 400px;
    transform: rotate(-35deg) translateX(-75px);
  }
}

/* Fast moving particles */
.particle {
  position: absolute;
  width: 1px;
  height: 1px;
  background: rgba(79, 209, 255, 0.6);
  pointer-events: none;
  border-radius: 50%;
}

.particle-1 {
  top: 20%;
  animation: float-particle 8s linear infinite;
}

.particle-2 {
  top: 40%;
  animation: float-particle 10s linear infinite;
  animation-delay: 2s;
}

.particle-3 {
  top: 60%;
  animation: float-particle 9s linear infinite;
  animation-delay: 4s;
}

.particle-4 {
  top: 80%;
  animation: float-particle 11s linear infinite;
  animation-delay: 6s;
}

.particle-5 {
  top: 30%;
  animation: float-particle-reverse 12s linear infinite;
}

.particle-6 {
  top: 50%;
  animation: float-particle-reverse 8s linear infinite;
  animation-delay: 3s;
}

@keyframes float-particle {
  0% {
    left: -10px;
    opacity: 0;
    transform: translateY(0);
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    left: 110%;
    opacity: 0;
    transform: translateY(-50px);
  }
}

@keyframes float-particle-reverse {
  0% {
    right: -10px;
    opacity: 0;
    transform: translateY(0);
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    right: 110%;
    opacity: 0;
    transform: translateY(30px);
  }
}

/* team  */
.team-parallax-container {
  height: 100vh;
  width: 100vw;

  display: flex;
  justify-content: center;
  align-items: center;

  position: relative;
  overflow: hidden;

  padding-top: 40px;


  /* PENTING: Pastikan tidak ada transform di parent */
  transform: none !important;
  will-change: auto !important;
}

/* Section Intro (Title Layer) */
.section-intro {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  padding: 0 20px;
}

.intro-content {
  max-width: 1200px;
  margin: 0 auto;
}

.main-title {
  font-size: 72px;
  font-weight: 300;
  color: #ffffff;
  letter-spacing: -2px;
  margin-bottom: 20px;
  opacity: 0.95;
}

.main-subtitle {
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
  letter-spacing: 0.5px;
}

@media (max-width: 768px) {
  .main-title {
    font-size: 48px;
  }
  
  .main-subtitle {
    font-size: 14px;
    padding: 0 20px;
  }
}

.team-section {
  text-align: center;
  padding: 40px;
  position: relative;
  z-index: 1;
  max-width: 1000px;
}

/* Profile Image */
.profile-container {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 20px;
}

.profile-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid transparent;
  -webkit-mask: 
    linear-gradient(#fff 0 0) padding-box, 
    linear-gradient(#fff 0 0);
  mask: 
    linear-gradient(#fff 0 0) padding-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; 
  mask-composite: exclude;
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(0 0 8px rgba(79, 209, 255, 0.8))
          drop-shadow(0 0 15px rgba(100, 181, 246, 0.6))
          drop-shadow(0 0 25px rgba(79, 209, 255, 0.4));
}

.profile-ring::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 255, 255, 1) 20deg,
    transparent 50deg
  );
  animation: benefitBorderSpin 3s linear infinite;
}

@keyframes benefitBorderSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.profile-image {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg,
      rgba(79, 209, 255, 0.1),
      transparent);
}

.profile-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 80%
  );
  transform: translateX(-100%) skewX(-15deg);
  animation: profileShimmerSlide 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
  border-radius: 50%;
}

@keyframes profileShimmerSlide {
  0% { transform: translateX(-150%) skewX(-15deg); }
  50% { transform: translateX(150%) skewX(-15deg); }
  100% { transform: translateX(150%) skewX(-15deg); }
}

.profile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  position: relative;
  z-index: 1;
}

.team-section:hover .profile-image img {
  transform: scale(1.1);
}

/* Name and Title */
.member-info {
  margin-bottom: 0px;
}

.member-name {
  font-size: 48px;
  font-weight: 100;
  color: #ffffff;
  letter-spacing: -2px;
  margin-bottom: -8px;
  opacity: 0.95;
  font-weight: 400;
  line-height: 1.1;
}

.member-role {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #4fd1ff;
  display: inline-block;
  position: relative;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.2;
}

/* Bio */
.member-bio {
  font-size: 14px;
  line-height: 1.8;
  color: rgb(255, 255, 255);
  margin-bottom: 8px;
  margin-top: 8px;
  font-weight: 300;
  max-width: 950px;
  margin-left: auto;
  margin-right: auto;
}

/* Skills Grid - Natural flow layout */
.skills-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  width: 100%;
  margin: 0 auto 25px;
  max-width: 900px;
}

.skill-pill {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(79, 209, 255, 0.4);
  border-radius: 100px;
  font-size: 12.65px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 400;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.skill-pill:hover {
  background: rgba(79, 209, 255, 0.1);
  border-color: rgba(79, 209, 255, 0.3);
  color: #4fd1ff;
  transform: translateY(-2px);
}


/* Floating accent */
.floating-accent {
  position: absolute;
  top: 20px;
  right: -20px;
  font-size: 120px;
  font-weight: 100;
  color: rgba(79, 209, 255, 0.03);
  font-family: "Inter", sans-serif;
  pointer-events: none;
  z-index: -1;
}

/* Responsive */
@media (max-width: 480px) {

  .team-section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0px;
    padding: 20px 10px;
    width: 100%;
    max-width: 100%;
  }

  .profile-container{
      width: 150px;
      height: 150px;
  }

  .member-name {
    font-size: 30px;
  }

  .member-bio {
    font-size: 10px;  
  }


  .skill-pill {
    font-size: 8.05px;
    padding: 3px 8px;
  }

  .skills-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 5px;
  }

  /* Pyramid format for tags on mobile - more tags in first row (largest), fewer in second, even fewer in third */
  /* First ~6-7 tags: largest size to be in first row */
  .skills-wrapper .skill-pill:nth-child(-n+7) {
    font-size: 9px;
  }
  
  /* Next ~4-5 tags: medium size to be in second row */
  .skills-wrapper .skill-pill:nth-child(n+8):nth-child(-n+12) {
    font-size: 8px;
  }
  
  /* Remaining tags: smallest size to be in third row */
  .skills-wrapper .skill-pill:nth-child(n+13) {
    font-size: 7px;
  }

  .floating-accent {
    top: -20px;
    right: 20px;
    font-size: 80px;
    font-weight: 600;
  }
}
@media (max-width: 1080px) {
    .team-section{
      max-width: 100%;
    }



  .member-bio {
    font-size: 13px; 
    max-width: 90%; 
  }

  .skills-wrapper{
    max-width: 100%;
    width: 100%;
    padding: 0 10px;
  }

}

/* ... end parallax home ... */

/* Smooth gradient blend for testimonial section top */
.variation-6::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 350px;
  background: linear-gradient(
    to bottom,
    #0a1628 0%,
    rgba(10, 22, 40, 0.9) 15%,
    rgba(10, 22, 40, 0.75) 30%,
    rgba(10, 22, 40, 0.5) 50%,
    rgba(10, 22, 40, 0.25) 70%,
    rgba(10, 22, 40, 0.1) 85%,
    transparent 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* Move content down into purple gradient area */
.variation-6 {
  padding-top: 200px !important;
}

.variation-6 .title-section {
  margin-top: 80px;
}

.variation-6 .hover-instruction {
  margin-top: 20px;
}

.variation-6 .prism-container {
  margin-top: 4rem;
}

/* Ensure bg stays at top */
.variation-6 .bg-variation-6 {
  top: 0 !important;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  .variation-6 {
    padding-top: 180px !important;
  }
  
  .variation-6 .title-section {
    margin-top: 60px;
  }
}



/* ... end home style ... */







/* ... start hero section ... */
.main {
  max-width: 100vw;
  overflow: hidden;
}

.main.home {
  overflow: visible !important;
}

.main .btn_primary,
.main .btn_warning {
  min-width: 16rem;
}

.hero_section {
  padding-top: 7.8125rem;
  padding-bottom: 12rem;
}

.hero_content {
  position: relative;
  z-index: 1;
  padding: 11.8rem 2rem 0rem 2rem;
}

.hero_title {
  font-size: var(--fs_70);
  font-weight: 800;
  margin-right: -8rem;
  margin-bottom: 1rem;
}

.hero_desc {
  margin-bottom: 6.2rem;
}

.hero_imgBox {
  mix-blend-mode: lighten;
}

.hero_img {
  -webkit-transform: translate(-11%, 20%) scale(1.86);
  -ms-transform: translate(-11%, 20%) scale(1.86);
  transform: translate(-11%, 20%) scale(1.86);
  /* mix-blend-mode: lighten; */
}

@media(max-width:991.98px) {
  .hero_section {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .hero_content {
    padding: 5rem 0rem 0rem;
  }

  .hero_title {
    margin-right: 0rem;
  }

  .hero_desc {
    margin-bottom: 3rem;
  }

  .hero_imgBox {
    width: 80%;
    margin: auto;
  }

  .hero_img {
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
  }
}

/* ... end hero section ... */

/* ... start video intro section ... */
.video_wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
}

.video_wrapper iframe,
.video_wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border-radius: 2.5rem;
}

/* ... end video intro section ... */

/* ... start intro section ... */
h2,
.section_title {
  font-size: var(--fs_36);
  line-height: 1.1667em;
  font-weight: 800;
  text-transform: capitalize;
  background: -o-linear-gradient(353.03deg, #FFFFFF 4.98%, #F8F8F8 63.11%);
  background: linear-gradient(96.97deg, #FFFFFF 4.98%, #F8F8F8 63.11%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  margin-bottom: 0.5em;
}

.section_desc {
  margin-bottom: 4.7rem;
}

.intro_section {
  padding: 10rem 0rem 2.5rem;
}

.intro_content {
  padding-top: 8.8rem;
  margin-right: 4.5rem;
}

.intro_imgBox {
  margin-left: -5%;
  mix-blend-mode: lighten;
}

.intro_imgBox img {
  -webkit-transform: scale(1.45);
  -ms-transform: scale(1.45);
  transform: scale(1.45);
}

@media(max-width:991.98px) {
  .intro_content {
    padding-top: 0rem;
    margin-right: 0rem;
  }

  .intro_imgBox {
    margin-left: atu;
    width: 65%;
    margin: auto;
  }
}

/* ... end intro section ... */


/* ... start challenges section ... */
.challenges_section {
  padding: 5.5rem 0rem 12rem;
  position: relative;
}

.challenges_section::before {
  content: "";
  position: absolute;
  z-index: -1;
  font-size: 93.75rem;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: rgba(1, 122, 186, 0.1);
  -webkit-filter: blur(116.05px);
  filter: blur(116.05px);
  left: 50%;
  top: 0%;
  -webkit-transform: translate(-50%, -30%);
  -ms-transform: translate(-50%, -30%);
  transform: translate(-50%, -30%);
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

}

.title_underline {
  text-align: center;
  position: relative;
  padding-bottom: 1.62rem;
}

.title_underline::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 60%;
  height: 1px;
  background: var(--bg_borderGrd);
  transform: translateX(-50%);
}

.challenges_section .section_title {
  margin-bottom: 2.4rem;
}

.challenges_section .section_desc {
  margin: auto;
  margin-bottom: 3.5rem;
}

.challenges_list {
  margin-bottom: 0rem;
  padding-left: 0rem;
  list-style: none;
}

.challenges_list li {
  margin-bottom: 1.9rem;
  background-image: url("../img/home/icon-check.svg");
  background-repeat: no-repeat;
  background-size: 1em 1em;
  padding-left: 1.5em;
  background-position: left top 0.2em;
}

@media(max-width:991.98px) {
  .challenges_section {
    padding: 5rem 0rem;
  }
}

@media(max-width:991.98px) {
  .challenges_section .section_desc {
    max-width: 100%;
  }
}

/* ... end challenges section ... */

/* ... start platform section ... */
.platform_section {
  padding: 3.2rem 0rem 4rem;
  position: relative;
}

.platform_section::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -0.2em;
  font-size: 73.625rem;
  width: 1em;
  height: 0.562em;
  border-radius: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  background: rgba(1, 122, 186, 0.15);
  -webkit-filter: blur(7.2531rem);
  filter: blur(7.2531rem);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.platform_section .section_title {
  margin-bottom: 7.75rem;
}


/* slider items */
.platform_section .slide-container {
  width: 150%;
  overflow: hidden;

  margin-left: -20%;
  margin-bottom: 7.75rem;
  position: relative;
}


.slide-container::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 20%;

  left: 0;
  top: 0;

  z-index: 19;
  background: linear-gradient(270deg, rgba(0, 19, 42, 0) 22.57%, #000515 63.51%);
}


.slide-container::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 20%;

  right: 4%;
  top: 0;

  z-index: 19;
  background: linear-gradient(90deg, rgba(0, 19, 42, 0) 22.57%, #000515 63.51%);
}

.slide-container .wrapper {
  width: 100%;
  max-width: 2526px;
  margin: auto;
  height: 100px;
  position: relative;
}

.slide-container .item {
  width: 100px;
  height: 100%;

  position: absolute;
  transition: 0.02s;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}


.slide-container .item {
  animation: scrollLeft 130s linear infinite;
  left: calc(120px * 24);
  /* for gap too */
}


.slide-container .item img {
  max-width: 70%;
  height: 60px;

  z-index: 10;
}

.slide-container .item p {
  font-size: .85rem;

  margin-top: .5rem;
  z-index: 10;
}

@keyframes scrollLeft {
  to {
    left: -120px;
  }
}

@media screen and (max-width: 1000px) {
  .slide-container::before {
    left: 5%;
    background: linear-gradient(270deg, rgba(0, 19, 42, 0) 22.57%, #001026 63.51%);

  }

  .slide-container::after {
    right: 15%;
    background: linear-gradient(90deg, rgba(0, 19, 42, 0) 22.57%, #001026 63.51%);
  }


}

@media screen and (max-width: 700px) {
  .slide-container .wrapper {
    height: 75px;
  }

  .slide-container .item {
    width: 70px;
  }

  .slide-container .item {
    /* animation: scrollLeft 120s linear infinite; */
    left: calc(70px * 24);
  }

  @keyframes scrollLeft {
    to {
      left: -70px;
    }
  }
}

/* ... end platform section ... */

/* ... start how it works section ... */
.process_section {
  padding: 10.5rem 0rem 5rem;
}

.process_content {}

.process_section .section_title {
  margin-bottom: 4rem;
}

.process_step {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  background-repeat: no-repeat;
}

.process_step:nth-of-type(2n+1) {
  background-image: url("../img/home/line_arrow_1.svg");
  background-position: bottom center;
  background-size: 85%;
  padding-bottom: 16rem;
}

.process_step:nth-of-type(2n+2) {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  background-image: url("../img/home/line_arrow_2.svg");
  background-position: bottom left 8%;
  background-size: 45%;
  padding-bottom: 12rem;
}

.process_step:last-of-type {
  padding-bottom: 10rem;
  background: none;
}

.process_stepContent {
  padding-top: 2.5rem;
}

.process_number {
  font-family: var(--ff_roboto_slab);
  font-weight: 500;
  font-size: var(--fs_128);
  line-height: 1;
  text-transform: uppercase;
  background: -o-linear-gradient(left, #00ECFF -68.96%, #006288 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(-68.96%, #00ECFF), to(#006288));
  background: linear-gradient(90deg, #00ECFF -68.96%, #006288 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin-bottom: 0.5rem;
}

.process_step:nth-of-type(2n+2) .process_number {
  margin-left: auto;
}

.process_title {
  font-size: var(--fs_32);
  font-weight: 900;
  margin-bottom: 1rem;
}

.process_step:nth-of-type(2n+2) .process_title {
  text-align: right;
}

.process_infoList li {
  margin-bottom: 0.8em;
}

@media(max-width:767.98px) {
  .process_stepContent {
    padding-top: 1rem;
  }

  .process_step {
    background-image: none !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: reverse !important;
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }

  .process_step:nth-of-type(2n+1),
  .process_step:nth-of-type(2n+2) {
    padding-bottom: 2rem !important;
  }

  .process_stepImgBox {
    width: 70%;
    margin: auto;
  }

  .process_step:nth-of-type(2n+2) .process_number {
    margin-left: 0rem;
  }

  .process_step:nth-of-type(2n+2) .process_title {
    text-align: left;
  }
}

/* ... end how it works section ... */

/* ... start platform section ... */
.reason_section {
  padding: 10rem 0rem 5rem;
  position: relative;
}

.reason_section .section_title {
  margin-bottom: 5.4rem;
}

.reason_list {
  --bs-gutter-x: 1.875rem;
  --bs-gutter-y: 1.875rem;
  margin-bottom: 9.4rem;
}

.reason_item {
  padding: 2.2rem 2.4rem 2.5rem;
  background: -o-linear-gradient(left top, rgba(255, 255, 255, 0.23), rgba(255, 255, 255, 0.14));
  background: -webkit-gradient(linear, left top, right bottom, from(rgba(255, 255, 255, 0.23)), to(rgba(255, 255, 255, 0.14)));
  background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.23), rgba(255, 255, 255, 0.14));
  border-radius: 0.75rem;
  position: relative;
  min-height: 100%;

}

.reason_item:hover {
  background: -o-linear-gradient(left, #00BED7, #006288);
  background: -webkit-gradient(linear, left top, right top, from(#00BED7), to(#006288));
  background: linear-gradient(to right, #00BED7, #006288);
}

.reason_item>* {
  position: relative;
}

.reason_item::before {
  content: '';
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  border-radius: inherit;
  background: #0e1d32;
}

.reason_icon {
  width: 4.125rem;
  height: 4.125rem;
  margin-bottom: 1rem;
}

.reason_title {
  font-size: var(--fs_19);
  margin-bottom: 0.9em;
}

.reason_desc {}

@media(max-width:767.98px) {
  .reason_section {
    padding: 5rem 0rem;
  }
}

/* ... end platform section ... */

/* ... start feedback section ... */
.feedback_section {
  padding: 11rem 0rem 15rem;
}

.feedback_section .section_title {
  margin-bottom: 8rem;
}

.feedback_sliders {
  width: 100%;
  height: 500px;
  max-width: 1500px !important;
  border-radius: 20px;

  position: relative;
  overflow: hidden;

  display: flex;
  justify-content: center;
  align-items: center;


  background: rgba(255, 255, 255, 0.288);

  padding: .15rem;
}

.feedback_sliders::before {
  content: "";
  position: absolute;

  width: 400%;
  height: 400%;
  aspect-ratio: 1 / 1;


  background: conic-gradient(at center, var(--bg_dark2), #5293f5, #5255f5);
  animation: rotateGradient 14s linear infinite;

  z-index: -2;
}

.feedback_sliders .swiper {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  background-color: var(--bg_dark);
}

.swiper-counter {
  position: absolute;
  z-index: 10;
  left: 20px;
  top: 20px;

  font-size: var(--fs_24);
  background: linear-gradient(90.02deg, #495FE9 7.34%, #4e8cc2 90.44%);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
}

.my-swiper2-prev,
.my-swiper2-next {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  width: 45px;
  height: 45px;


  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  transition: all .3s ease;
  color: #fff;
  font-size: 1.1rem;
  font-weight: bold;
  top: 50%;
  position: absolute;
  transform: translateY(-50%);
  z-index: 10;
}

.my-swiper2-prev:hover,
.my-swiper2-next:hover {
  background-color: rgba(248, 248, 248, 0.233);
}

.my-swiper2-prev {
  left: 40px;
  padding-right: .2rem;
}

.my-swiper2-next {
  right: 40px;
  padding-left: .2rem;
}


.feedback_sliders .swiper-slide {
  width: 100%;
  height: 100%;
  position: relative;

  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  /* backdrop-filter: blur(10px); */
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.2);
  border-radius: 20px;
}

.feedback_sliders .swiper-slide::before {
  content: "";
  position: absolute;
  left: 0%;
  top: 0;

  width: 50%;
  height: 40%;
}

.feedback_sliders .feedback_itemBox {
  width: 70%;
  height: 100%;
  position: relative;
  z-index: 10;

  padding: 2rem 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;

  text-align: center;
}


.feedback_itemBox img {
  width: 200px;
  border-radius: 50%;
  border: 3px solid #495FE9;
}

.feedback_itemBox h4 {
  font-size: var(--fs_56);
  background: linear-gradient(90.02deg, #495FE9 17.34%, #4e8cc2 90.44%);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  width: 100%;
  font-weight: 600;
}

.feedback_itemBox .line {
  width: 80%;
  height: 2px;
  background: linear-gradient(90.02deg, rgba(0, 19, 42, 0) 7.34%, #ffffff 46.09%, rgba(0, 18, 40, 0) 90.44%);

}

.feedback_itemBox p {
  width: 80%;
  font-size: 1.55rem;
  font-weight: 500;
  color: #e7e7e7;
  position: relative;
}

.feedback_itemBox p::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 0;

  width: 20px;
  height: 20px;

  background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.57812 15.0293V25.3125L7.70874 20.1777L12.8394 15.043V9.89454V4.74609H7.70874H2.57812V15.0293ZM17.1606 15.0293V25.3125L22.2913 20.1777L27.4219 15.043V9.89454V4.74609H22.2913H17.1606V15.0293Z' fill='white'/%3E%3C/svg%3E%0A");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.feedback_itemBox p::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0;

  width: 20px;
  height: 20px;

  background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.57812 15.0293V25.3125L7.70874 20.1777L12.8394 15.043V9.89454V4.74609H7.70874H2.57812V15.0293ZM17.1606 15.0293V25.3125L22.2913 20.1777L27.4219 15.043V9.89454V4.74609H22.2913H17.1606V15.0293Z' fill='white'/%3E%3C/svg%3E%0A");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}


@keyframes rotateGradient {
  to {
    transform: rotate(360deg);
  }
}



@media(max-width:767.98px) {
  .feedback_sliderBox {
    padding: 2.75rem 3rem 5rem;
  }

  .feedback_sliderBox::before {
    top: 1rem;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    border-width: 0.2rem;
    border-right: none;
  }

  .feedback_section {
    padding: 5rem 0rem 8rem;
  }

  .feedback_clientImgBox {
    width: 18rem;
    height: 18rem;
  }

  .feedback_sliders {
    height: 550px;
    padding: .15rem .1rem;
  }

  .my-swiper2-prev,
  .my-swiper2-next {
    top: 88%;
  }

  .feedback_sliders .feedbackSwiper {
    width: 99%;
    overflow: hidden;
  }

  .feedback_sliders .feedback_itemBox {
    padding: 1rem 0 2rem;
    width: 90%;
    height: 95%;
  }

  .feedback_itemBox img {
    width: 150px;
  }

  .feedback_itemBox h4 {
    font-size: var(--fs_36);
  }

  .feedback_itemBox p {
    width: 85%;
    font-size: var(--fs_19);
    padding-top: 2rem;
    margin-top: 1rem;
    line-height: 1.6;
  }

  .feedback_itemBox p::before {
    width: 15px;
    height: 15px;

    left: 50%;
    transform: translateX(-50%);
  }

  .feedback_itemBox p::after {
    display: none;
  }

  /* 
    .feedback_itemBox p::after{
    right: -50%;
    transform: translateX(50%);
  } */

}

/* ... end feedback section ... */

/* ... start case study section ... */
.caseStudy_section {
  padding: 13rem 0rem 9.6rem;
  background: var(--bg_light);
  position: relative;
}

.caseStudy_section::before {
  content: "";
  position: absolute;
  z-index: -1;
  font-size: 77.5rem;
  width: 1em;
  height: 0.8831em;
  border-radius: 50%;
  background: rgba(1, 122, 186, 0.1);
  -webkit-filter: blur(7.2531rem);
  filter: blur(7.2531rem);
  left: 50%;
  top: 0%;
  -webkit-transform: translate(-50%, -30%);
  -ms-transform: translate(-50%, -30%);
  transform: translate(-50%, -30%);
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.caseStudy_section .section_title {
  margin-bottom: 7.4rem;
}

.caseStudy_title {
  font-size: var(--fs_32);
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.border_left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.border_left::before {
  content: "";
  display: block;
  width: 7px;
  margin-right: 0.5rem;
  background: -o-linear-gradient(left, #00ECFF -68.96%, #00BED7 -12.36%, #006288 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(-68.96%, #00ECFF), color-stop(-12.36%, #00BED7), to(#006288));
  background: linear-gradient(90deg, #00ECFF -68.96%, #00BED7 -12.36%, #006288 100%);

}

.caseStudy_desc,
.caseStudy_desc ul {
  font-size: var(--fs_20);
  line-height: 1.5;
}

.caseStudy_desc li {
  margin-bottom: 0.6rem;
}

@media(max-width:767.98px) {
  .caseStudy_section {
    padding: 6rem 0rem;
  }
}

/* ... end case study section ... */

/* ... start ready to connect section ... */
.extraInfo_section {
  padding: 12rem 0rem 11.2rem;
  background: var(--bg_primaryGrd);
}

.extraInfo_content {
  text-align: center;
}

.extraInfo_section .section_title {
  font-size: var(--fs_70);
  font-weight: 800;
  margin-bottom: 2rem;
}

.extraInfo_section .section_desc {
  font-size: var(--fs_32);
  margin-bottom: 5rem;
}

@media(max-width:767.98px) {
  .extraInfo_section {
    padding: 7rem 0rem;
  }

  .extraInfo_section .section_desc {
    margin-bottom: 4rem;
    margin-top: 4rem;
  }

}

/* ... end ready to connect section ... */

/* ... start faq section ... */
.faq_section {
  padding: 10rem 0rem 12.4rem;
}

.faq_section .section_title {
  margin-bottom: 0.3rem;
}

.faq_section .section_subtitle {
  font-size: var(--fs_20);
  color: var(--c_whiteLt2);
  margin-bottom: 9rem;
  text-align: center;
}

.faq_section .accordion {
  max-width: 84rem;
  margin: auto;
  margin-bottom: 6.5rem;
}

.accordion {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

.accordion-item {
  color: var(--c_white);
  background: transparent;
  border-color: var(--c_whiteLt2);
}

.accordion-button {
  font-size: var(--fs_24);
  color: var(--c_white) !important;
  background: transparent !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  padding: 1.8rem 1rem;
}

@media(max-width:767.98px) {
  .faq_section {
    padding: 6rem 0rem;
  }

  .faq_section .section_subtitle {
    margin-bottom: 3rem;
  }
}

/* ... end faq section ... */

/* ... start footer area ... */
.footer {
  color: rgba(255, 255, 255, 0.8);
  background-color: #000000;
}

.footer.home{
  z-index: 1 !important; 
  background-color: #000000;
}

.footer_top {
  padding: 0.5rem 0rem 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer_col_1 .footer_colContent {
  max-width: 100%;
}

.footer_brand {
  margin-bottom: 1rem;
}

.footer_logo {
  width: 14.4rem;
  -o-object-fit: contain;
  object-fit: contain;
}

.footer_colTitle {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: #fff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.footer_tagline {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-top: 1rem;
}

.footer_nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer_navItem {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.footer_navLink {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.footer_navLink i {
  font-size: 0.9rem;
  width: 18px;
}



.footer_navLink:hover {
  color: #64b5f6;
  transform: translateX(3px);
}

.footer_social_nav {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer_social_nav .footer_navItem {
  font-size: 0.95rem;
  margin-bottom: 0;
  margin-right: 0;
}

.footer_legal {
  margin-top: 3rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}

.footer_legal_links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  width: 100%;
  text-align: center;
}

.footer_legal_link {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.footer_legal_link:hover {
  color: #64b5f6;
}

.footer_divider {
  color: rgba(255, 255, 255, 0.3);
}

.footer_bottom {
  padding: 2rem 0rem;
  position: relative;
  font-size: 0.875rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}


@media(min-width:992px) {
  .footer_col_1 {
    width: 27%;
  }

  .footer_col_2 {
    width: 18%;
  }

  .footer_col_3 {
    width: 23%;
  }

  .footer_col_4 {
    width: 15%;
  }

  .footer_col_5 {
    width: 17%;
  }

  .footer_navItem { 
    font-size: var(--fs_16); 
  }
}

/* ... end footer area ... */
/* _______________________ end home page _______________________ */

/* _______________________ start chatbot page _______________________ */
/* ... start hero section ... */
.hero_section2 {
  background-image: url("../img/chatbot/looper-bg.webp");
  background-repeat: no-repeat;
  background-position: top right;
  padding: 22.8125rem 0rem 21.5rem;
  -webkit-animation: bg_load 2s linear 0s 1 forwards;
  animation: bg_load 2s linear 0s 1 forwards;
  background-size: 85.5rem;
}

.hero_section2 .hero_content {
  padding: 0rem;
}

/* @keyframes bg_load {
  0%{
    background-size: 300px;
  }
  100%{
    background-size: 1200px;
  }
} */
@media(max-width:1199.98px) {
  .hero_section2 {
    background-size: 90rem;
  }
}

@media(max-width:991.98px) {
  .hero_section2 {
    background-size: 75.9%;
  }

  .sm_none {
    display: none;
  }
}

/* ... end hero section ... */

/* ... start why ai chatbot. section ... */
.wac_section {
  padding: 13rem 0rem 9rem;
  position: relative;
}

.wac_section::before {
  content: "";
  position: absolute;
  z-index: -1;
  font-size: 93.9375rem;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: rgba(1, 122, 186, 0.1);
  -webkit-filter: blur(116.05px);
  filter: blur(116.05px);
  left: 50%;
  top: 30%;
  -webkit-transform: translate(-50%, -30%);
  -ms-transform: translate(-50%, -30%);
  transform: translate(-50%, -30%);
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

}

.wac_content {}

.wac_section .section_title {
  margin-bottom: 8.5em;
}

.wac_items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 8rem;
}

.wac_item {
  width: 50%;
  margin-bottom: 1rem;
}

.wac_item:nth-of-type(2n+1) {
  -webkit-transform: translateY(-8rem);
  -ms-transform: translateY(-8rem);
  transform: translateY(-8rem);
}

.wac_itemBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.wac_item:nth-of-type(2n+2) .wac_itemBox {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.wac_itemIconBox {
  font-size: 6rem;
  line-height: 1;
  padding: 0.1042em 0.4792em 0.1042em 0.0625em;
  background-image: url("../img/chatbot/bg-right-arrow.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
  margin-right: 0.1667em;
}

.wac_item:nth-of-type(2n+2) .wac_itemIconBox {
  padding: 0.1042em 0.0625em 0.1042em 0.4792em;
  background-image: url("../img/chatbot/bg-left-arrow.svg");
  margin-left: 0.1667em;
  margin-right: 0rem;
}

.wac_itemIcon {
  width: 1.7083em;
  height: 1.7083em;
  border: 2px solid var(--c_primary);
  border-radius: 50%;
  display: -ms-grid;
  display: grid;
  place-items: center;
  background: var(--bg_dark3);
  -webkit-box-shadow: 0px 4px 20px rgba(118, 199, 229, 0.6);
  box-shadow: 0px 4px 20px rgba(118, 199, 229, 0.6);
}

.wac_itemIcon img {
  width: 1em;
  height: 1em;
  -o-object-fit: contain;
  object-fit: contain;
}

.wac_itemContent {}

.wac_itemNum {
  font-family: var(--ff_work_sans);
  font-style: normal;
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
  text-transform: capitalize;
  background: -o-linear-gradient(left, #00ECFF -68.96%, #00BED7 -12.36%, #006288 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(-68.96%, #00ECFF), color-stop(-12.36%, #00BED7), to(#006288));
  background: linear-gradient(90deg, #00ECFF -68.96%, #00BED7 -12.36%, #006288 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin-bottom: 0.5rem;
}

.wac_itemTitle {
  font-size: var(--fs_19);
  margin-bottom: 0.875rem;
}

@media(max-width:991.98px) {
  .wac_itemIconBox {
    font-size: 4rem;
  }
}

@media(max-width:767.98px) {
  .wac_section .section_title {
    margin-bottom: 3em;
  }

  .wac_item {
    width: 100%;
    margin-bottom: 3rem;
  }

  .wac_item:nth-of-type(2n+1) {
    -webkit-transform: translateY(0rem);
    -ms-transform: translateY(0rem);
    transform: translateY(0rem);
  }
}

/* ... end why ai chatbot. section ... */

/* ... start how it works section ... */
.hiw_section {
  padding: 7.5rem 0rem;
  position: relative;
}

.hiw_section::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 15%;
  font-size: 73.625rem;
  width: 1em;
  height: 0.562em;
  border-radius: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  background: rgba(1, 122, 186, 0.15);
  -webkit-filter: blur(7.2531rem);
  filter: blur(7.2531rem);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.hiw_section .section_title {
  margin-bottom: 4em;
}

.hiw_list {
  --bs-gutter-x: 1.875rem;
  --bs-gutter-y: 1.875rem;
  margin-bottom: 9.4rem;
}

.hiw_item {
  padding: 2.5rem 2rem 6.25rem;
  background: -o-linear-gradient(left top, rgba(255, 255, 255, 0.23), rgba(255, 255, 255, 0.14));
  background: -webkit-gradient(linear, left top, right bottom, from(rgba(255, 255, 255, 0.23)), to(rgba(255, 255, 255, 0.14)));
  background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.23), rgba(255, 255, 255, 0.14));
  border-radius: 0.75rem;
  position: relative;
  margin-bottom: 5.2rem;
}

.hiw_item>* {
  position: relative;
}

.hiw_item::before {
  content: '';
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  border-radius: inherit;
  background: var(--bg_dark3);
}

.hiw_title {
  font-size: var(--fs_32);
  font-family: var(--ff_poppins);
  font-weight: 700;
  margin-bottom: 0.5em;
}

.hiw_desc {
  font-size: var(--fs_20);
}

.hiw_itemNum {
  font-size: 4rem;
  line-height: 1em;
  font-weight: 700;
  font-family: var(--ff_work_sans);
  position: absolute;
  bottom: 0px;
  left: 50%;
  width: 2.1563em;
  height: 2.1563em;
  border-radius: 50%;
  border: 2px solid var(--c_primary);
  display: -ms-grid;
  display: grid;
  place-items: center;
  background: var(--bg_dark3);
  -webkit-transform: translate(-50%, 50%);
  -ms-transform: translate(-50%, 50%);
  transform: translate(-50%, 50%);
}

.hiw_itemNum::before {
  content: "";
  display: block;
  position: absolute;
  top: -0.1563em;
  right: -0.1563em;
  bottom: -0.1563em;
  left: -0.1563em;
  background-image: url("../img/chatbot/bg-left-curve.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

.hiw_itemNum span {
  text-transform: capitalize;
  background: -o-linear-gradient(left, #00ECFF -68.96%, #00BED7 -12.36%, #006288 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(-68.96%, #00ECFF), color-stop(-12.36%, #00BED7), to(#006288));
  background: linear-gradient(90deg, #00ECFF -68.96%, #00BED7 -12.36%, #006288 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

@media(max-width:991.98px) {
  .hiw_itemNum {
    font-size: 3rem;
  }
}

@media(max-width:767.98px) {
  .hiw_section .section_title {
    margin-bottom: 2em;
  }

  .section_title {
    font-size: 2rem !important;
  }
}

/* ... end how it works section ... */

/* ... start why ai chatbot. section ... */
.woc_section {
  padding: 10rem 0rem 8rem;
  position: relative;
}

.woc_section::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 30%;
  font-size: 73.625rem;
  width: 1em;
  height: 0.562em;
  border-radius: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  background: rgba(1, 122, 186, 0.15);
  -webkit-filter: blur(7.2531rem);
  filter: blur(7.2531rem);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.woc_content {}

.woc_section .section_title {
  margin-bottom: 8.5em;
}

.woc_items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 8rem;
}

.woc_item {
  width: 50%;
  margin-bottom: 1rem;
}

.woc_item:nth-of-type(2n+1) {
  /* margin-top: -7rem; */
  -webkit-transform: translateY(-7rem);
  -ms-transform: translateY(-7rem);
  transform: translateY(-7rem);
}

.woc_itemBox {
  padding: 1.25rem;
  background-image: url("../img/chatbot/bg_polygon_right.svg");
  background-repeat: no-repeat;
  background-size: 13.125rem 100%;
  background-position: left -0.05rem center;
}

.woc_item:nth-of-type(2n+1) .woc_itemBox {
  margin-left: -0.9rem;
}

.woc_item:nth-of-type(2n+2) .woc_itemBox {
  margin-right: -0.9rem;
  background-image: url("../img/chatbot/bg_polygon_left.svg");
  background-position: right -0.05rem center;
}


.woc_itemContent {
  background-color: var(--bg_dark3);
  position: relative;
  padding: 1.25rem;
  margin: 0rem 2.5rem;
  border-radius: 2px;
  min-height: 10.625rem;
}

.woc_itemContent::before,
.woc_itemContent::after {
  content: "";
  display: block;
  position: absolute;
  top: 0rem;
  height: 100%;
  width: 2.5rem;
  background-color: inherit;
}

.woc_itemContent::before {
  left: 1px;
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-clip-path: polygon(100% 0%, 100% 100%, 0% 50%);
  clip-path: polygon(100% 0%, 100% 100%, 0% 50%);
}

.woc_itemContent::after {
  right: 1px;
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}

.woc_itemNum {
  font-family: var(--ff_work_sans);
  font-style: normal;
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
  text-transform: capitalize;
  background: -o-linear-gradient(left, #00ECFF -68.96%, #00BED7 -12.36%, #006288 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(-68.96%, #00ECFF), color-stop(-12.36%, #00BED7), to(#006288));
  background: linear-gradient(90deg, #00ECFF -68.96%, #00BED7 -12.36%, #006288 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin-bottom: 0.5rem;
}

.woc_itemTitle {
  font-size: var(--fs_19);
  font-family: var(--ff_roboto);
  font-weight: 700;
  margin-bottom: 0.875rem;
}

.woc_itemDesc {
  font-size: var(--fs_19);
  line-height: 1.55;
}

.woc_itemDesc:last-of-type {
  margin-bottom: 0rem;
}

@media(max-width:767.98px) {
  .woc_section .section_title {
    margin-bottom: 5.5em;
  }

  .woc_item {
    width: 100%;
    margin-bottom: 2rem;
  }

  .woc_item:nth-of-type(2n+1) {
    -webkit-transform: translateY(0rem);
    -ms-transform: translateY(0rem);
    transform: translateY(0rem);
  }
}

/* ... end why ai chatbot. section ... */
/* _______________________ end chatbot page _______________________ */

/* _______________________ start chatbot 4 page _______________________ */
/* ... start hero section ... */
.hero_section3 {
  /* background-image: url("../img/chatbot-4/hero-bg.jpg"); */
  background-repeat: no-repeat;
  padding: 22.8125rem 0rem 21.5rem;
  background-size: cover;
}

.hero_section3 .hero_content {
  padding: 0rem;
  text-align: center;
}

.hero_section3 .hero_title {
  margin-right: auto;
}

@media(max-width:991.98px) {
  .hero_section3 {
    padding: 18rem 0rem 12rem;
  }
}

/* ... end hero section ... */

/* ... start Benefits of Al Integration for Your Business section ... */
.benefits_section {
  width: 100%;
  padding: 11.5rem 0rem 7.5rem;
  position: relative;
}

.benefits_section .section_title {
  margin-bottom: 5rem;
}

.benefit_item {
  margin-bottom: 4.75rem;
  width: 100%;
}

.benefit_content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #0F2238;
  border-radius: 1rem;
  padding: 0.75rem 4rem 0.75rem 15rem;
  position: relative;
  min-height: 10.25rem;
}

.benefit_iconBox {
  position: absolute;
  top: 50%;
  left: 0rem;
  width: 13.125rem;
  height: 13.125rem;
  background-image: url("../img/chatbot-4/step-bg.svg");
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.benefit_num {
  color: var(--c_warning);
  font-size: var(--fs_32);
  font-family: var(--ff_work_sans);
  font-weight: 700;
  position: absolute;
  top: 8%;
  left: 71%;
}

.benefit_icon_1 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4rem;
  height: 4rem;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -o-object-fit: contain;
  object-fit: contain;
}

.benefit_icon_2 {
  position: absolute;
  left: 50%;
  top: 110%;
  width: 4rem;
  height: 4rem;
  -webkit-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  -o-object-fit: contain;
  object-fit: contain;
}

.benefit_contentBox {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.benefit_title {
  color: var(--c_primary);
  font-size: var(--fs_19);
}

.benefit_desc:last-of-type {
  margin-bottom: 0rem;
}

@media(max-width:767.98px) {
  .benefits_section {
    padding: 6rem 0rem;
  }

  .benefit_item {
    width: 95%;
  }
}

@media(max-width:575.98px) {
  .benefit_item {
    width: 100%;
  }

  .benefit_item:last-of-type {
    margin-bottom: 0rem;
  }

  .benefit_iconBox {
    top: 0%;
    width: 10rem;
    height: 10rem;
    -webkit-transform: translateY(-16%);
    -ms-transform: translateY(-16%);
    transform: translateY(-16%);
  }

  .benefit_icon_2 {
    display: none;
  }

  .benefit_num {
    font-size: var(--fs_24);
    top: 8%;
    left: 71%;
  }

  .benefit_content {
    border-radius: 3rem;
    padding: 10rem 2rem 2rem;
  }
}

/* ... end Benefits of Al Integration for Your Business section ... */

/* ... start Our Services section ... */
.services_section {
  padding: 7.5rem 0rem 8.75rem;
  position: relative;
  z-index: 1;
}

.services_section::before {
  display: none;
}

.services_section .section_desc {
  margin-bottom: 10rem;
}

.service_list {
  --bs-gutter-x: 1.875rem;
  --bs-gutter-y: 1.875rem;
}

.service_item {
  padding: 9.75rem 3.2rem 4.5rem;
  background: -o-linear-gradient(left, #00B3CE, #006288);
  background: -webkit-gradient(linear, left top, right top, from(#00B3CE), to(#006288));
  background: linear-gradient(to right, #00B3CE, #006288);

  border-radius: 0.75rem;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100%;
}

.service_item>* {
  position: relative;
}

.service_item::before {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  left: 2px;
  border-radius: inherit;
  background: var(--bg_dark3);
}

.service_itemIcon {
  width: 11.625rem;
  position: absolute;
  top: -3.8rem;
  left: 1.75rem;
}

.service_itemIcon::before {
  content: "";
  display: block;
  padding-bottom: 94.09%;
  background-image: url("../img/chatbot-4/icon-bg.svg");
  background-repeat: none;
  background-size: contain;
}

.service_itemIcon img {
  width: 40.32%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.service_title {
  font-size: var(--fs_24);
  font-family: var(--ff_manrope);
  font-weight: 700;
  margin-bottom: 2.5rem;
}

.feature_list {
  margin-bottom: 2rem;
  padding-left: 0rem;
  list-style: none;
}

.feature_list li {
  margin-bottom: 1rem;
  background-image: url("../img/home/icon-check.svg");
  background-repeat: no-repeat;
  background-size: 1em 1em;
  padding-left: 1.5em;
  background-position: left top 0.2em;
}

.service_item .feature_list {
  margin-bottom: 3.75rem;
}

@media(max-width:991.98px) {
  .service_item {
    padding: 6rem 2rem 3rem;
  }

  .service_itemIcon {
    width: 8rem;
  }
}

@media(max-width:767.98px) {
  .services_section {
    padding: 5rem 0rem;
  }

  .services_section .section_desc {
    margin-bottom: 5rem;
  }

  .service_item {
    margin-top: 4rem;
    min-height: -webkit-max-content;
    min-height: -moz-max-content;
    min-height: max-content;
  }
}

/* ... end Our Services section ... */

/* ... start Our Process section ... */
.ourProcess_section {
  padding: 8.5rem 0rem;
  position: relative;
}

.ourProcess_section::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 30%;
  font-size: 73.625rem;
  width: 1em;
  height: 0.562em;
  border-radius: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  background: rgba(1, 122, 186, 0.15);
  -webkit-filter: blur(7.2531rem);
  filter: blur(7.2531rem);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.ourProcess_section .section_desc {
  margin-bottom: 6.875rem;
}

.ourProcess_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 6.875rem;
}

.ourProcess_item {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  position: relative;
}

.ourProcess_item:last-of-type {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
}

.ourProcess_item::before {
  content: "";
  display: block;
  height: 0.3rem;
  position: absolute;
  top: 4.08rem;
  left: 11.5rem;
  right: 3.5rem;
  z-index: -1;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background-image: -o-linear-gradient(left, #006288, #00B4CF);
  background-image: -webkit-gradient(linear, left top, right top, from(#006288), to(#00B4CF));
  background-image: linear-gradient(to right, #006288, #00B4CF);
}

.ourProcess_item:last-of-type::before {
  content: none;
}

.ourProcess_item::after,
.ourProcess_num::after {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 4rem;
  z-index: -1;
  border-radius: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.ourProcess_item::after {
  right: 3rem;
  background-color: #00B4CF;
}

.ourProcess_num::after {
  top: 3.8rem;
  left: 11rem;
  background-color: #006288;
}

.ourProcess_item:last-of-type::after,
.ourProcess_item:last-of-type .ourProcess_num::after {
  content: none;
}

.ourProcess_num {
  color: var(--c_dark);
  font-size: var(--fs_46);
  font-weight: 700;
  width: 7.8131rem;
  height: 7.8131rem;
  background: -o-linear-gradient(left, #00ECFF -68.96%, #006288 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(-68.96%, #00ECFF), to(#006288));
  background: linear-gradient(90deg, #00ECFF -68.96%, #006288 100%);
  border: 0.3091rem solid #01AECA;
  -webkit-box-shadow: -0.9273rem 0.9273rem 0.6182rem rgba(0, 0, 0, 0.25);
  box-shadow: -0.9273rem 0.9273rem 0.6182rem rgba(0, 0, 0, 0.25);
  border-radius: 0.6182rem;
  display: -ms-grid;
  display: grid;
  place-items: center;
  margin-bottom: 4.375rem;
  position: relative;
}

.ourProcess_num::before {
  position: absolute;
  z-index: -1;
  content: "";
  display: block;
  width: 70%;
  height: 100%;
  top: 0px;
  right: 0px;
  background-color: var(--bg_white);
  border-radius: 0rem 1rem 1rem 0rem;
  -webkit-transform: scale(1.25);
  -ms-transform: scale(1.25);
  transform: scale(1.25);
}

.ourProcess_content {
  max-width: 19.0625rem;
}

@media(max-width:767.98px) {
  .ourProcess_list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .ourProcess_item {
    margin-bottom: 4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .ourProcess_item:last-of-type {
    margin-bottom: 0rem;
  }

  .ourProcess_item::before,
  .ourProcess_item::after,
  .ourProcess_num::after {
    content: none;
  }

  .ourProcess_num {
    width: 6rem;
    min-width: 6rem;
    height: 5rem;
    margin-bottom: 0rem;
    margin-right: 2rem;
  }

  .ourProcess_content {
    max-width: 100%;
  }

}

/* ... end Our Process section ... */

/* ... start Our team section ... */
.team_section {
  padding: 8.5rem 0rem;
  position: relative;
}

.member_list {}

.member_item {
  background: #0F2238;
  border-radius: 50rem;
  padding: 2rem 2.5rem 8.125rem;
  text-align: center;
  height: 100%;
}

.member_imgBox {
  position: relative;
  margin-bottom: 2.625rem;
}

.member_imgBox::before {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.member_img {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
  background-color: var(--bg_dark);
  border: 1px solid var(--c_primary);
}

.member_name {
  font-size: var(--fs_20);
  font-family: var(--ff_manrope);
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.member_role {
  font-size: var(--fs_20);
  font-family: var(--ff_manrope);
  margin-bottom: 1.5rem;
}

.member_details {
  font-size: var(--fs_16);
}

/* ... end Our team section ... */

/* ... start Got Questions? section ... */
.extraInfo_section2 {
  padding: 7.5rem 0rem;
  background-color: #71717133;
}

.extraInfo_section2 .section_title {
  font-size: var(--fs_70);
  margin-bottom: 1.5rem;
}

@media(max-width:991.98px) {
  .member_item {
    padding: 1.5rem 1.5rem 6rem;
  }

  .extraInfo_section2 .strip-content {
    justify-content: center;
  }
}

/* ... end Got Questions? section ... */

/* ... start subscribe section ... */
.subscribe_section {
  padding: 5.625rem 0rem;
  background-color: var(--bg_dark);
}

.mw_max {
  min-width: -webkit-max-content !important;
  min-width: -moz-max-content !important;
  min-width: max-content !important;
}

/* ... end subscribe section ... */
/* _______________________ end chatbot 4 page _______________________ */

/* _______________________ start chatbot 5 page _______________________ */
/* ... start hero section ... */
.hero_section4 {
  background-image: url("../img/chatbot-5/hero-bg.jpg");
  background-repeat: no-repeat;
  padding: 22.8125rem 0rem 21.5rem;
  background-size: cover;
}

.hero_section4 .hero_content {
  padding: 0rem;
  text-align: center;
}

.hero_section4 .hero_title {
  margin-right: auto;
}

@media(max-width:991.98px) {
  .hero_section4 {
    padding: 18rem 0rem 12rem;
  }
}

/* ... end hero section ... */

/* ... start section 3 ... */
.section__3 {
  padding: 8rem 0rem;
}

/* ... end section 3 ... */

/* bookkeeping-hero */
.bookkeeping-hero {
  height: 100vh !important;
}


.intro_imgBox2 h3 {
  display: none;
  opacity: 0;
}



@media screen and (max-width:1020px) {
  .bookkeeping-container .section_desc {
    font-size: 1rem;
  }

  .bookkeeping-hero .hero_content {
    display: flex;
    flex-direction: column;
    gap: 5rem;
  }

  .intro_section.bookkeeping .intro_content h2 {
    display: none;
  }

  .intro_imgBox2 {
    width: 100%;
    min-height: 10px !important;
    height: 180px;
  }

  .intro_imgBox2 #canvas-container {
    height: 100% !important;
    width: 50% !important;
    position: absolute;
    top: 50%;
    left: 27%;
    transform: translate(-50%, -50%);
  }

  .intro_imgBox2 h3 {
    display: block;
    position: absolute;
    opacity: 1;
    width: 50%;
    right: 0;
    font-size: 1.7rem;
  }
}

/* ... start Our 3-Step Process to AI-Powered Bookkeeping section ... */
.intro_section.bookkeeping {
  position: relative;
}

.intro_section.bookkeeping::before {
  position: absolute;
  content: "";
  right: 0%;
  top: 40%;
  border-radius: 50%;

  height: 40%;
  width: 50%;

  background: linear-gradient(90deg, #00a2ff -68.96%, #0020af -12.36%, #1d4dd1 100%);
  opacity: .5;
  filter: blur(130px);
}


.intro_imgBox2 {
  display: flex;
  justify-content: center;
  align-items: center;

  min-height: 400px;
}

#canvas-container canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 100%;
  height: auto;
}

.processStep_section {
  padding: 9.375rem 6rem;
  position: relative;
}

.processStep_section::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 15%;
  font-size: 73.625rem;
  width: 1em;
  height: 0.562em;
  border-radius: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  background: rgba(1, 122, 186, 0.15);
  -webkit-filter: blur(7.2531rem);
  filter: blur(7.2531rem);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.processStep_section .section_desc {
  margin-bottom: 6rem;
}

.processStep_list {
  --bs-gutter-x: 1.875rem;
  --bs-gutter-y: 2.5rem;
}

.processStep_item {
  padding: 0rem 1.2rem 2.25rem;
  background: -o-linear-gradient(left, #00BED7, #006288);
  background: -webkit-gradient(linear, left top, right top, from(#00BED7), to(#006288));
  background: linear-gradient(to right, #00BED7, #006288);
  border-radius: 0.75rem;
  position: relative;
  min-height: 100%;
  margin-left: 1rem;
  margin-right: 1rem;
  height: 100%;
}

.processStep_item>* {
  position: relative;
}

.processStep_item::before {
  content: '';
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  border-radius: inherit;
  background: #0e1d32;
}

.processStep_title {
  font-size: var(--fs_19);
  margin-bottom: 0.9em;
  background: #011120;
  -webkit-box-shadow: 0rem 0.25rem 0.25rem rgba(0, 236, 255, 0.2);
  box-shadow: 0rem 0.25rem 0.25rem rgba(0, 236, 255, 0.2);
  border-radius: 0.3125rem;
  padding: 0.875rem 2.25rem;
  margin: -0.5rem -2rem 2rem;
  border: 1px solid #006288;
  position: relative;
}

.processStep_title::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  background-color: inherit;
  border: inherit;
  position: absolute;
  z-index: -1;
  left: 0rem;
  bottom: 0rem;
  -webkit-transform: translate(25%, 50%) rotate(45deg);
  -ms-transform: translate(25%, 50%) rotate(45deg);
  transform: translate(25%, 50%) rotate(45deg);
}

.processStep_section .swiper {
  width: 100%;
  height: auto;
  position: relative;
}

.processStep_section .swiper::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 30%;

  left: 0;
  top: 0;

  z-index: 9;
  background: linear-gradient(93deg, #000515, #03030300 100%);
}



.processStep_section .swiper::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 30%;

  right: 0;
  top: 0;

  z-index: 9;
  background: linear-gradient(-93deg, #000515, #00000000 100%);
}

.my-swiper-prev,
.my-swiper-next {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .3s ease;
  color: #fff;
  font-size: 1.1rem;
  font-weight: bold;
  top: 50%;
  position: absolute;
  transform: translateY(-50%);
  z-index: 10;
}

.my-swiper-prev:hover,
.my-swiper-next:hover {
  background-color: rgba(248, 248, 248, 0.233);
}

.my-swiper-prev {
  left: 10px;
}

.my-swiper-next {
  right: 10px;
}


.processStep_section .swiper-slide {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 350px;

  padding-top: 1rem;
}

.processStep_card {
  width: 100%;
  min-height: 230px;
  position: relative;

  padding: 2rem;
  border-radius: 30px;

  overflow: hidden;

  background: rgba(14, 137, 148, 0.226);
  border: 1px solid rgba(255, 255, 255, .255);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .08);

}

.processStep_card::before {
  content: "";
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(13, 9, 77, .3) 0%, transparent 50%), radial-gradient(circle at 70% 70%, rgba(15, 182, 212, 0.384) 0%, transparent 50%);
  pointer-events: none;
  animation: processCard 15s ease-in-out infinite;
  filter: blur(30px);
}

@keyframes processCard {

  0%,
  100% {
    transform: translate(0, 0) rotate(0) scale(1)
  }

  33% {
    transform: translate(-20%, 15%) rotate(30deg) scale(1.05)
  }

  66% {
    transform: translate(15%, -20%) rotate(-30deg) scale(.95)
  }
}

.processStep_card .title {
  display: flex;
  align-items: start;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  font-weight: bold;

  margin-bottom: 1.5rem;
  text-align: left;
}

.processStep_card span {
  font-size: 3rem;
  line-height: 1;
  background: linear-gradient(135deg, #514ae2, #3b82f6);
  border-radius: 15px;
  width: 60px;
  height: 60px;

  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.processStep_card h3 {
  width: 100%;
  font-size: 1.6rem;
  line-height: 1;
  color: white;
  z-index: 9;
  position: relative;
}

.processStep_card p {
  font-size: 1.1rem;
  opacity: 0.8;
  z-index: 9;
  position: relative;

}

@media(min-width:1424px) {

  .processStep_card {
    min-height: 250px;
    padding: 1rem;
  }
}

@media(max-width:1224px) {
  .processStep_card span {
    font-size: 2.7rem;
  }
}

@media(max-width:1004px) {

  .swiper::before,
  .swiper::after {
    display: none;
  }
}

@media(max-width:767.98px) {
  .intro_section.bookkeeping::before {
    right: 10%;
    top: 20%;

    height: 40%;
    width: 80%;
  }

  .processStep_section {
    padding: 5rem 0rem;
  }

  .my-swiper-prev,
  .my-swiper-next {
    width: 35px;
    height: 35px;
  }

  /* processStep_card */
  .processStep_card {
    width: 100%;
    min-height: 0px;
    padding: 1.25rem 1rem 0.5rem;
  }

  .processStep_card .title {
    margin-bottom: 1rem;
  }

  .processStep_card span {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .processStep_card span svg {
    width: 50%;
  }

  .processStep_card h3 {
    font-size: 1.2rem;
    line-height: 1;
  }

}





.processStep__item {
  padding: 3.4375rem 2.25rem 3.4375rem 14.875rem;
  background: -o-linear-gradient(left, #00BED7, #006288);
  background: -webkit-gradient(linear, left top, right top, from(#00BED7), to(#006288));
  background: linear-gradient(to right, #00BED7, #006288);
  border-radius: 0.75rem;
  position: relative;
  height: 100%;
  margin: 8.375rem 0rem 0rem 6.25rem;
}

.processStep__item>* {
  position: relative;
}

.processStep__item::before {
  content: '';
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  border-radius: inherit;
  background: #0e1d32;
}

.processStep__num {
  width: 17.125rem;
  position: absolute;
  top: 0rem;
  left: 0rem;
  -webkit-transform: translate(-34%, -34%);
  -ms-transform: translate(-34%, -34%);
  transform: translate(-34%, -34%);
}

.processStep__num::before {
  content: "";
  display: block;
  padding-bottom: 82.12%;
  background-image: url("../img/chatbot-5/step_num_bg.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.processStep__num span {
  position: absolute;
  display: inline-block;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-family: var(--ff_work_sans);
  font-style: normal;
  font-weight: 700;
  font-size: 4rem;
  text-transform: capitalize;
  background: -webkit-gradient(linear, left top, right top, color-stop(-68.96%, #00ECFF), to(#006288));
  background: -o-linear-gradient(left, #00ECFF -68.96%, #006288 100%);
  background: linear-gradient(90deg, #00ECFF -68.96%, #006288 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.processStep__title {
  color: var(--c_primary);
  font-size: var(--fs_19);
  margin-bottom: 1rem;
}

.processStep__list li {
  margin-bottom: 1rem;
}


.processStep_container {
  width: 100%;
}


@media(max-width:991.98px) {
  .processStep__item {
    padding: 3rem 2.25rem 3rem 9rem;
  }

  .processStep__num {
    width: 13rem;
  }
}

@media(max-width:575.98px) {
  .processStep__item {
    padding: 8rem 2rem 2rem;
    margin: 8.375rem 0rem 0rem 0rem;
  }

  .processStep__num {
    -webkit-transform: translate(10%, -34%);
    -ms-transform: translate(10%, -34%);
    transform: translate(10%, -34%);
  }

  .ourStep_container .section_title {
    font-size: var(--fs_36);
    width: 80%;
    margin: 1.5rem auto;
  }
}

.ourStep_container .section_desc {
  width: 60%;
  margin: 0 auto;
}

/* parallax process step */
.parallax_processStep {
  position: relative !important;
  perspective: 1000px !important;

  max-width: 2000px;
  margin: 4rem auto;
}

.parallax_processStep .layerParallax {
  position: relative;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: bold;
  transition: transform 0.2s ease-out;
}

.layerParallax .content {
  position: relative;
}

.processStep_itemBox {
  position: relative;
  width: 100%;
  padding: 2rem;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 5rem;
}


.layerParallax:not(:nth-child(3)) .processStep_itemBox::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 50%;
  height: 1px;
  background: linear-gradient(89.22deg,
      rgba(73, 95, 233, 0) 0.67%,
      #ffffff 46.68%,
      rgba(32, 64, 92, 0) 99.33%);
}

.processStep_itemBox .number p {
  position: absolute;
  left: 90%;
  top: 20px;

  font-size: 6rem;

  background: linear-gradient(183.29deg,
      #ffffff 2.72%,
      rgba(153, 153, 153, 0) 86.13%);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.processStep_itemBox .images {
  width: 30%;

  display: flex;
  justify-content: center;
  align-items: center;

  position: relative;
}

.processStep_itemBox .images img {
  width: 100%;
}

.processStep_itemBox .content {
  width: 770px;

  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  gap: 50px;
}

.processStep_itemBox .content h2 {
  font-size: 35px;
  color: rgb(230, 230, 230);
  text-align: left;
  position: relative;
}

.processStep_itemBox .content h2::before {
  content: "";

  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -10%;

  width: 100%;
  height: 1px;

  background: linear-gradient(89.22deg,
      rgba(73, 95, 233, 0) 0.67%,
      #ffffff 46.68%,
      rgba(32, 64, 92, 0) 99.33%);
}

.processStep_itemBox .images {
  transition: opacity 2s ease, transform 2s ease;

  height: 500px;
}

.processStep_itemBox .content ul {
  width: 100%;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
}

.processStep_itemBox .content li {
  display: flex;
  align-items: center;

  gap: 1.5rem;

  color: rgb(253, 253, 253);
}

.processStep_itemBox .content li span {
  width: 70%;
  font-weight: 400;
  line-height: 1.4;
  font-size: 1.4rem;
}

.processStep_itemBox canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.processStep_itemBox .content li img {
  width: 25px;
}

@media screen and (max-width: 1020px) {
  .processStep_itemBox {
    height: auto;
    min-height: auto;
    padding: 1rem 2rem 2.5rem 2rem;
  }

  .processStep_itemBox .content h2 {
    text-align: center;
    width: 100%;
  }

  .processStep_itemBox .content {
    width: 100%;
  }

  .processStep_itemBox .images {
    width: 60%;
  }
}

@media screen and (max-width: 720px) {
  .processStep_itemBox {
    gap: 0rem;
    justify-content: center;
    align-items: center;
    padding: 3rem 1rem 2.5rem 3rem;
    flex-direction: row;
  }


  .layerParallax:not(:nth-child(3)) .processStep_itemBox::before {
    width: 100%;
  }

  .processStep_itemBox .images {
    width: 40%;
    height: 140px;
  }

  .processStep_itemBox .content {
    width: 60%;
    gap: 1rem;
  }

  .processStep_itemBox .number p {
    left: 20px;
    font-size: 3rem;
    top: 20px;
    z-index: 10;
  }

  .processStep_itemBox .content ul {
    padding-left: 0px !important;
    gap: 10px;
  }

  .processStep_itemBox .content li {
    gap: 1.5rem;
    justify-content: center;
  }

  .processStep_itemBox .content li span {
    width: 80%;
    color: #dddddd;
    font-size: .9rem;
    line-height: 1.3;
  }

  .processStep_itemBox .content li img {
    width: 15px;
  }

  .processStep_itemBox .content h2 {
    font-size: 1.5rem;
    width: 100%;
    text-align: left;
  }

  .processStep_itemBox .content h2::before {
    width: 100%;
    bottom: -10px;
    /* left: 20%; */
    /* di */

  }
}


/* ... end Our 3-Step Process to AI-Powered Bookkeeping section ... */
/* _______________________ end chatbot 5 page _______________________ */
/* ... end subscribe section ... */
/* _______________________ end chatbot 4 page _______________________ */

/* Default navbar styles */
/* Default navbar styles */
.navbar-nav .dropdown-toggle {
  font-size: 16px;
  padding: 10px 15px;
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 500;
  /* Slightly bold for readability */
}

/* Dropdown menu for solutions (on desktop and mobile) */
.navbar-nav .dropdown-menu {
  background-color: #333;
  /* Dark background for consistency */
  border-radius: 8px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Display dropdown when active */
.navbar-nav .dropdown-menu.show {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* Dropdown items */
.navbar-nav .dropdown-item {
  padding: 15px 20px;
  color: #ddd;
  font-size: 16px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

/* Hover effect for items */
.navbar-nav .dropdown-item:hover {
  background-color: #444;
  color: #fff;
}

/* Mobile-specific dropdown styling */
@media (max-width: 991px) {

  /* When the mobile navbar is collapsed, the dropdown should show up in a full-screen overlay */
  .navbar-collapse {
    position: relative;
  }

  .navbar-nav .dropdown-menu.show {
    display: block;
    opacity: 1;
    visibility: visible;
    padding-top: 140px;
  }

  .navbar-nav .dropdown-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #333;
    /* Dark background */
    border-radius: 0;
    box-shadow: none;
    border: 0;
    padding-top: 60px;
    /* Space for the navbar */
    z-index: 1050;
    max-height: 100vh;
    overflow-y: auto;
    /* Make dropdown scrollable if content overflows */
    display: none;
    /* Hide by default */
    transform: translateY(-100%);
    /* Hide offscreen initially */
    transition: transform 0.3s ease-in-out;
  }

  /* Display dropdown when active (slide in) */
  .navbar-nav .dropdown-menu.show {
    display: block;
    transform: translateY(0);
    /* Slide in from top */
  }

  /* Mobile version of dropdown items */
  .navbar-nav .dropdown-item {
    padding: 20px;
    font-size: 18px;
    text-align: center;
    border-bottom: 1px solid #444;
  }

  /* Last item without border */
  .navbar-nav .dropdown-item:last-child {
    border-bottom: none;
  }

  /* Tweak dropdown item hover effect for mobile */
  .navbar-nav .dropdown-item:hover {
    background-color: #555;
    color: #fff;
  }

  /* Remove navbar toggle icon */
  .navbar-toggler-icon {
    background-color: #fff;
  }
}


@media (max-width: 470px) {
  .hero_title {
    font-size: 35px;
  }

  .navbar-nav .dropdown-menu.show {
    display: block;
    opacity: 1;
    visibility: visible;
    padding-top: 140px;
  }
}

/* NAV "Let's talk" — liquid-glass look (scoped to header only) */
.btn.btn_primary.lets-talk-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1) !important;
  /* override gradient */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 0 20px rgba(255, 255, 255, 0.1),
    0 0 40px rgba(100, 200, 255, 0.05),
    0 0 60px rgba(100, 200, 255, 0.03),
    inset 0 1px 2px rgba(255, 255, 255, 0.1),
    inset 0 -1px 2px rgba(100, 200, 255, 0.05),
    0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Animated glow border (from hero style) */
.btn.btn_primary.lets-talk-button::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg,
      rgba(100, 200, 255, 0.3),
      rgba(255, 255, 255, 0.2),
      rgba(150, 100, 255, 0.3),
      rgba(100, 255, 200, 0.2),
      rgba(100, 200, 255, 0.3));
  background-size: 400% 400%;
  border-radius: 13px;
  opacity: 0.6;
  z-index: -1;
  filter: blur(8px);
  animation: glowRotate 15s linear infinite;
}

/* Shimmer sweep overlay (replaces the hero's extra span) */
.btn.btn_primary.lets-talk-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  pointer-events: none;
  animation: shimmer 8s infinite;
}

/* Hover/active states */
.btn.btn_primary.lets-talk-button:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px) scale(1.02);
  color: #fff !important;
  box-shadow:
    0 0 30px rgba(255, 255, 255, 0.2),
    0 0 50px rgba(100, 200, 255, 0.1),
    0 0 80px rgba(100, 200, 255, 0.05),
    inset 0 2px 4px rgba(255, 255, 255, 0.2),
    inset 0 -2px 4px rgba(100, 200, 255, 0.1),
    0 8px 25px rgba(0, 0, 0, 0.3);
}

.btn.btn_primary.lets-talk-button:active {
  transform: translateY(0) scale(1);
  background: rgba(255, 255, 255, 0.2) !important;
}

/* Mobile sizing tweak (optional) */
@media (max-width: 991.98px) {
  .btn.btn_primary.lets-talk-button {
    width: 40%;
    min-width: 180px;
    font-size: 14px;
    padding: 8px 10px;
  }
}

/* Keyframes reused from the hero effect */
@keyframes glowRotate {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 400% 50%;
  }
}

@keyframes shimmer {
  0% {
    left: -120%;
  }

  20%,
  100% {
    left: 120%;
  }
}