@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
/*========== ROOT & GENERAL STYLE ===================*/
  :root {
    color-scheme: light dark;
    --bg-body-bgColor:light-dark(#f2f0e9, #424242);
    --light-purple-color:#752cf8;
    --color-first: light-dark(#000, #fff);
    --color-dark:light-dark(#fff,#000);
    --border-dark:light-dark(#6c757d,#d5d5d5);
    --secondary-dark:light-dark(#6c757d,#f3f3f3);
    --color-second:light-dark(#5648d8, #695bf6);
    --color-third:light-dark(#f9f9f9,#2f2f2f);  
    --color-fourth: #D7D7D7;
    --icon-secondary: #676767;
    --bg-light-1: #f9f9f9;
    --bg-1: #f4f9f5;
    --bg-first-opacity:light-dark(rgba(29, 91, 69, 0.6),rgba(255, 255, 255, .15)); 
    --border-xlight:light-dark(rgb(0 0 0 / 5%),rgba(255, 255, 255, .15)); 
    --border-light: light-dark(rgba(0, 0, 0, .1),rgba(255, 255, 255, .1));
    --border-medium:light-dark(rgba(0, 0, 0, .15),rgba(255, 255, 255, .15));
    --border-heavy: light-dark(rgba(0, 0, 0, .2),rgba(255, 255, 255, .2));
    --border-xheavy:light-dark(rgba(0, 0, 0, .25),rgba(255, 255, 255, .25)); 
    --gray-50: #f9f9f9;
    --gray-100: #ececec;
    --gray-200: #e3e3e3;
    --gray-300: #cdcdcd;
    --gray-400: #b4b4b4;
    --gray-500: #9b9b9b;
    --gray-600: light-dark(#676767,#d0d0d0);
    --gray-700: light-dark(#424242,#ececec);
    --gray-750: #2f2f2f;
    --gray-800: light-dark(#212121,#ececec);
    --gray-900: #171717;
    --gray-950: #0d0d0d;
    --gray-hover: #595959;
    --purple-first: #8d1991;
    --purple-light: light-dark(#fbe9fb, #181818);
    --light-blue-bg:light-dark(#d2e3fc,#627ca2);
    --shadow: 0 8px 26px rgba(111, 90, 247, 0.08);
    --font-family-heading: "Geist", sans-serif;
    --font-family-content: "Open Sans", sans-serif;
  }
  :root {
    &:has(html[data-bs-theme="light auto"]) {
      color-scheme: light;
    }
    &:has(html[data-bs-theme="dark"]) {
      color-scheme: dark;
    }
  }
  svg.fill-first g{fill: var(--color-first);}
  html[data-bs-theme="dark"] img{filter: invert(100%);}
  html[data-bs-theme="dark"] .invert-img-initial img{filter: initial;}
  html[data-bs-theme="dark"] svg{fill:var(--color-dark);}
  html[data-bs-theme="dark"] svg.fill-first{fill:var(--color-first);}
  html[data-bs-theme="dark"] svg.icon-check{stroke:var(--color-first);fill:none; }
  html[data-bs-theme="dark"] .bg-white{background-color:#212529 !important; }
  html[data-bs-theme="dark"] .bg-light{background-color:var(--gray-750) !important; }
  *,::after,::before {  box-sizing: border-box;}
  * {
    margin: 0;
    padding: 0;
    font-family: var(--font-family-content);
     font-weight: 400; 
    font-style: normal;
    /* font-size: 16px; */
    letter-spacing: 0;
    line-height: 1.5;
    color: var(--color-first);
    text-transform: none;
  }
  body {overflow-x: hidden; background:var(--bg-body-bgColor); }
  a,a:hover,a:focus,a:focus-visible {text-decoration: none; outline: none}
  a { font-weight: bold;cursor: pointer;}
  html {scroll-behavior: smooth;font-family: sans-serif;}
  ul li {  list-style: none;}
  ul.list li {  list-style: disc;  color: var(--color-content);}
  button:hover {  scrollbar-color: var(--gray-200) transparent}
  .gray-50 {  color: var(--gray-50) !important;}
  .gray-100 {  color: var(--gray-100) !important;}
  .gray-200 {  color: var(--gray-200) !important;}
  .gray-300 {  color: var(--gray-300) !important;}
  .gray-400 {  color: var(--gray-400) !important;}
  .gray-500 {  color: var(--gray-500) !important;}
  .gray-600 {  color: var(--gray-600) !important;}
  .gray-700 {  color: var(--gray-700) !important;}
  .gray-800 {  color: var(--gray-800) !important;}
  .gray-900 {  color: var(--gray-900) !important;}
  .gray-950 {  color: var(--gray-950) !important;}
  .bg-gray-950 { background: var(--gray-950) !important;}
  .border-xlight {  border-color: var(--border-xlight) !important;}
  .border-light {  border-color: var(--border-light) !important;}
  .border-medium {  border-color: var(--border-medium) !important;}
  .border-heavy {  border-color: var(--border-heavy) !important;}
  .border-xheavy {  border-color: var(--border-xheavy) !important;}
  .color-first {  color: var(--color-first) !important;}
  .color-second {  color: var(--color-second) !important;}
  .color-third {  color: var(--color-third) !important;}
  .color-dark {  color: var(--color-dark) !important;}
  .z-99 {  z-index: 99;}
  .z-999 {  z-index: 999;}
  .z-9999 {  z-index: 9999;}
  .bg-color-first { background-color: var(--color-first); }
  html[data-bs-theme="dark"] .bg-color-first { background-color: var(--color-first); }
  .bg-color-second { background-color: var(--color-second); }
  .bg-color-dark { background-color: var(--color-dark); }
  .bg-color-third {  background-color: var(--color-third); }
  .bg-color-fourth { background-color: var(--color-fourth); }
  .bg-color-secondary-dark { background-color: var(--secondary-dark); } 
  .gradient-bg{
    background-color: #fbeaff;
    background: linear-gradient(119deg, #b9b2fa 0%, #c4ebfa 100%);
    background: -webkit-linear-gradient(119deg, #b9b2fa 0%, #c4ebfa 100%);
    background: -moz-linear-gradient(119deg, #b9b2fa 0%, #c4ebfa 100%);
  }
  html[data-bs-theme="dark"] .gradient-bg{
    background-color: #1a1b1e;
    background: linear-gradient(135deg, #5cbded 0%,#7eb8c3 30%, #5ca6b5 60%, #5cbded 100%);
    background: -webkit-linear-gradient(135deg, #5cbded 0%,#7eb8c3 30%, #5ca6b5 60%, #5cbded 100%);
    background: -moz-linear-gradient(135deg, #5cbded 0%,#7eb8c3 30%, #5ca6b5 60%, #5cbded 100%);
  }
  .custom-bg{
    background:#a5f0ff;
    background: linear-gradient(to bottom, #b9b2fa 0%, #c4ebfa 40%, #FFFFFF 100%);
    background-blend-mode: soft-light;
    background: -webkit-linear-gradient(top, #b9b2fa 0%, #c4ebfa 40%, #FFFFFF 100%);
    background: -moz-linear-gradient(top, #b9b2fa 0%, #c4ebfa 40%, #FFFFFF 100%);
    background: -o-linear-gradient(top, #b9b2fa 0%, #c4ebfa 40%, #FFFFFF 100%);
    background: linear-gradient(to bottom, #b9b2fa 0%, #c4ebfa 40%, #FFFFFF 100%);
  }
  html[data-bs-theme="dark"] .custom-bg{
    background:#a5f0ff;
    background: linear-gradient(to bottom, #b9b2fa 0%, #c4ebfa 40%, #b9b2fa 100%);
    background-blend-mode: soft-light;
    background: -webkit-linear-gradient(top, #b9b2fa 0%, #c4ebfa 40%, #b9b2fa 100%);
    background: -moz-linear-gradient(top, #b9b2fa 0%, #c4ebfa 40%, #b9b2fa 100%);
    background: -o-linear-gradient(top, #b9b2fa 0%, #c4ebfa 40%, #b9b2fa 100%);
    background: linear-gradient(to bottom, #b9b2fa 0%, #c4ebfa 40%, #b9b2fa 100%);
  }
  .gradient-abstract-bg{
    background-color: #fbeaff;
    background:url(../img/line-abstract.png), linear-gradient(119deg, #b9b2fa 0%, #c4ebfa 100%);
    background:url(../img/line-abstract.png), -webkit-linear-gradient(119deg, #b9b2fa 0%, #c4ebfa 100%);
    background:url(../img/line-abstract.png), -moz-linear-gradient(119deg, #b9b2fa 0%, #c4ebfa 100%);
    background-size: cover;
    background-repeat: none;
  }
  .font-family-heading {font-family:var(--font-family-heading); } 
  .font-family-content {font-family:var(--font-family-content); } 
  .box-shadow-style{box-shadow: var(--shadow);}
  .design-wrapper{padding: 75px 0 40px 0;height: 100%;min-height: 100vh;}  
/*========== BUTTON STYLE ===========================*/
  .button,input[type="submit"].button,.btn-outline-first {
    padding: 0.5rem 1.5rem;
    color:var(--color-dark);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0;
    border-radius: 10px;
    border: 1px solid;
    flex-shrink: 0;
    text-transform: capitalize;
    pointer-events: auto;
    cursor: pointer;
    box-shadow: 0px 6px 11px #AB85E840;
  }
  .btn-first {  background-color: var(--color-first);border-color: var(--border-dark);}
  .btn-second {  background-color: var(--color-second);border-color: var(--color-second);}
  .btn-outline-first { border-color: var(--border-medium); color: var(--color-first);}
  .btn-outline-first:hover, .btn.no-arrow:hover {background: var(--bg-light-1);}
  .button svg{fill: #fff;}
  html[data-bs-theme=dark] .btn-outline-first:hover{color: #000}
  html[data-bs-theme=dark] .btn-outline-secondary{color: var(--secondary-dark) !important;}
  button.button:focus,button.btn:focus,input.form-control:focus,select.form-select:focus,textarea:focus {
    outline: 0 !important;
    box-shadow: none !important;
    border-color: #c2c8ce !important;
  }
  .btn-outline-first:hover, .btn.no-arrow:hover { background: var(--bg-light-1);}
  .btn-outline-first:focus,.btn.no-arrow:focus,.btn-outline-first:active,.btn.no-arrow:active {
    background: rgb(233, 236, 239);
  }
  html[data-bs-theme=dark] .btn-outline-first:focus,html[data-bs-theme=dark] .btn.no-arrow:focus,
  html[data-bs-theme=dark] .btn-outline-first:active, 
  html[data-bs-theme=dark] .btn.no-arrow:active { background: var(--gray-hover);}
  html[data-bs-theme=dark] .button.btn-second svg{fill:#fff;}
/*========== HEADING STYLE ==========================*/
  .fs-08 {  font-size: 0.8rem !important}
  .text-sm {  font-size: .875rem !important;  line-height: 1.25rem !important}
  .fs-09 {  font-size: 0.9rem !important}
  .text-base {  font-size: 1rem !important;  line-height: 1.5rem !important}
  .text-lg {  font-size: 1.125rem;  line-height: 1.75rem;}
  .text-2xl {  font-size: 1.5rem;  line-height: 2rem}
  .text-3xl {  font-size: 1.875rem;  line-height: 2.5rem}
  .text-4xl {  font-size: 2.25rem;  line-height: 3rem}
  .text-5xl {  font-size: 3rem;  line-height: 4rem}
  .text-7xl {  font-size: 4.5rem;  line-height: 5rem}
  .gradientHeadingStyle { color:var(--color-second); }
/*========== TEXT LIMIT STYLE =======================*/
  .text-limit-1,.text-limit-2,.text-limit-3,.text-limit-4 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
  .text-limit-1 {  -webkit-line-clamp: 1;white-space: nowrap;}
  .text-limit-2 {  -webkit-line-clamp: 2;}
  .text-limit-3 {  -webkit-line-clamp: 3;}
  .text-limit-4 {  -webkit-line-clamp: 4;}
/*========== HEADER STYLE ===========================*/
  header{background: var(--color-dark);}
  header .logo{ width: 300px;}
  header ul.nav li a:hover{color: var(--color-first);} 
  header .button.btn-outline-first svg{fill: var(--color-first);}
  header .button.border-2{border-color: var(--color-first) !important;}
/*========== HOME PAGE ==============================*/
  /*========== BUILD FEATURES SECTION =================*/
    .build-card { background: rgb(255, 255, 255 , 0.5) 0% 0% no-repeat padding-box; border: 1px solid var(--color-dark); }
    html[data-bs-theme="dark"] .build-card { background: rgb(0, 0, 0 , 0.5) 0% 0% no-repeat padding-box;}
    .build-card .build-img{width: 100%;height: 250px;object-fit: cover}
  /*========== STEPS SECTION ========================*/  
    .process-step-section .border-style{border:1px solid #752cf8;}
    .process-step-section .border-style:not(:nth-last-child(1)){border-right: 0}
    .process-step-section .border-style:nth-child(1){border-top-left-radius:10px;border-bottom-left-radius:10px; }
    .process-step-section .border-style:nth-last-child(1){border-top-right-radius:10px;border-bottom-right-radius:10px; }
    .steps-bg {
      background: #fdfdff; /* fallback color for very old browsers */
      background: -webkit-linear-gradient(111deg, #e2ffeb 0%, #cbe7ff 100%);
      background: -moz-linear-gradient(111deg, #e2ffeb 0%, #cbe7ff 100%);
      background: -o-linear-gradient(111deg, #e2ffeb 0%, #cbe7ff 100%);
      background: linear-gradient(111deg, #e2ffeb 0%, #cbe7ff 100%);
    }
    .process-step-section .process-step-block li img{width: 40%;margin: 0 auto}
    .step-number {
        position: relative;
        width: 110px;
        height: 110px;
        margin-bottom: -50px;
        z-index: 1;
    }
    .feature-block li {
      position: relative;
      padding-left: 25px;
    }
    .feature-block li img.checkmark-icon {
      position: absolute;
      left: 0;
      top: 5px;
      width: 18px;
      height: 18px;
      margin: 0;
    }
  /*================= FAQ ===========================*/
    .accordion-collapse.collapse, .accordion-button, .accordion-item, .accordion-header {border: none;outline: none;}
    .accordion-collapse.collapse.show {border-top: 1px solid var(--color-second) !important;}
    .accordion-button:not(.collapsed){background: var(--color-dark);}
    .accordion-button:not(.collapsed) h6{color: var(--color-first);}
    .accordion-button:focus{border: none;outline: none;box-shadow: none;}
    .accordion-item{border-left: 0;border-right: 0;border-top: 0}
    html[data-bs-theme=dark] .accordion-button{background: var(--color-dark);}
    html[data-bs-theme=dark] .accordion-button.collapsed{background: var(--color-third);}
    /*html[data-bs-theme=dark] .accordion-button::after{filter: invert(50%);}*/
    html[data-bs-theme=dark] .accordion-button:not(.collapsed)::after,html[data-bs-theme=dark] .accordion-button::after {
      width: 14px;
      height: 14px;
      background-size: contain;
      background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }
  html[data-bs-theme=dark] .accordion-button::after {transform: rotate(180deg);}
  html[data-bs-theme=dark] .accordion-button.collapsed::after {transform: rotate(0deg);}
/*========== RESPONSIVE =============================*/  
  @media only screen and (max-width: 992px){
    .process-step-section .border-style:nth-child(1){border-top-left-radius:10px;border-bottom-left-radius:10px; }
    .process-step-section .border-style:nth-last-child(2){border:1px solid #752cf8;border-top-right-radius:10px;
    border-bottom-right-radius:10px; }
    .process-step-section .border-style:nth-last-child(1){border-top:0;border-top-right-radius:0px;border-bottom-right-radius:10px;
    border-bottom-left-radius:10px;}
  }
  @media only screen and (max-width: 768px){
    header .logo{ width: 200px;}
    .text-lg {  font-size: 1rem;  line-height: 1.4rem;}
    .text-2xl {  font-size: 1.3rem;  line-height: 1.6rem}
    .text-3xl {  font-size: 1.475rem;  line-height: 1.75rem}
    .text-4xl {  font-size: 2rem;  line-height:2rem}
    .text-5xl {  font-size: 2.5rem;  line-height: 3rem}
    .text-7xl {  font-size: 3.5rem;  line-height: 3.5rem}
    .process-step-section .border-style:not(:nth-last-child(1)){border:1px solid #752cf8;border-bottom: 0}
    .process-step-section .border-style:nth-child(1){border-top-left-radius:10px;border-bottom-left-radius:0px;
    border-top-right-radius:10px; }
    .process-step-section .border-style:nth-last-child(2){border-radius:0px; }
    .process-step-section .border-style:nth-last-child(1){border-top:1px solid #752cf8;border-radius:0px;
    border-bottom-right-radius:10px;border-bottom-left-radius:10px;}
  }
  @media only screen and (max-width: 481px){
    .text-2xl {  font-size: 1.1rem;  line-height: 1.3rem}
    .text-3xl {  font-size: 1.2rem;  line-height: 1.5rem}
    .text-4xl {  font-size: 1.6rem;  line-height: 1.5rem}
    .text-5xl {  font-size: 2rem;  line-height: 2.5rem}
    .text-7xl {  font-size: 2.5rem;  line-height: 2.5rem}
    .gradient-bg.rounded-pill{border-radius: 20px !important}
    header .logo{ width: 170px;}
    header a{font-size: 0.85rem;padding: 0.2rem}
    header .button{padding: 0.4rem 0.8rem;font-size: 0.6rem}
    .design-wrapper{padding-top: 63px;}
    header .button span{font-size: 0.6rem;}
  }
/* @media end */