@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Smooch+Sans:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700;900&display=swap');

:root {
  --color-white:#ffffff;
  --color-logo-blue:#025BFF;
  --color-blue:#1973E8;
  --color-sky-blue:#04CFFF;
  --color-black:#000000;
  --color-light-green:#AEFF70;
  --color-yellow:#FDCA40;
  --color-orange:#F79824;
  --color-border-gray:#E0E0E0;
  --color-black-border-gray:#373737;
  --color-text-gray:#848484;
  --color-dark-gray:#31393C;
  --color-light-gray:#F8F8F8;
  --bodytext:"DM Sans", sans-serif;
  --heading-text:"Smooch Sans", sans-serif;
}

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

.font-100 {
  font-weight: 100;
}

.font-200 {
  font-weight: 200;
}

.font-300 {
  font-weight: 300;
}

.font-400 {
  font-weight: 400;
}

.font-500 {
  font-weight: 500;
}

.font-600 {
  font-weight: 600;
}

.font-700 {
  font-weight: 700;
}

.font-800 {
  font-weight: 800;
}

.font-900 {
  font-weight: 900;
}

.border-top-none {
  border-top:none !important;
}

.border-bottom-none {
  border-bottom: none !important;;
}

.margin-auto {
  margin-left: auto;
   margin-right: auto;
}

body{
  padding: 0;
  margin: 0;
  font-family:var(--bodytext);
  background: var(--color-white);
  font-weight: 400;
  overflow-x: hidden;
  font-size: 14px;
  line-height: 23px;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

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

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

a{
  text-decoration: none;
  transition: all 0.5s ease-in-out;
}

h1, h2, h3, h4 {
  /* font-family: var(--heading-text); */
}

h1{
  font-size: 70px;
  line-height: 1;
}

h2 {
  font-size: 40px;
  line-height: 1;
}
h3 {
  font-size: 24px;
  line-height: 31px;
}

h4 {
  font-size: 17px;
  line-height: 21px;
}

.smooch-sans {
  font-family: var(--heading-text);
}
.dm-sans {
  font-family: var(--bodytext);
}

/*----Border outline----*/
.outline-side:after, .outline-side:before {
  content:"";
  position: absolute;
  top:0;
  height: 100%;
  width: 0.6px;
  background: var(--color-border-gray);
}

.outline-side:after{
  left:11.9px;
}

.outline-side:before{
  right:12px;
}

/*---buttn-style---*/

.j-btm {
  display: flex;
  max-width: fit-content;
  align-items: center;
  column-gap:9px;
  padding: 7px 21px 7px 7px;
  background:var(--color-logo-blue);
  color: var(--color-white);
  font-size: 15px;
  line-height: 1;
  font-weight: 400;
  position: relative;
  width: 100%;
  border-radius: 8px;
  z-index: 2;
}

.j-btm:after {
  content:"";
  position: absolute;
  background:var(--color-sky-blue);
  border-radius: 6px;
  width:26px;
  height: 26px;
  z-index: -1;
  transition: all 0.5s ease-in-out;
  left:7px;
}

.j-btm:hover{
  color:#fff;
}

.j-btm:hover:after {
  width: 100%;
  height: 100%;
  left:0
}

.j-btm svg {
  width: 26px;
  height: 26px;
}

/*---Blank area---*/

.j-blank-gray-area {
   background-image: url('/wp-content/uploads/2026/04/pattern-1.png');
  background-repeat:repeat;
  background-color: var(--color-light-gray);
  height: 80px;
  border-top:1px solid var(--color-border-gray);
 
}

.j-blank-gray-area > div {
  height: 100%;
}

/*----Header---*/

.j-header {
  max-width: inherit;
  padding-top: 18px;
  padding-bottom: 18px;
  position: relative;
  top:0;
}

.j-header:after {
  content:"";
  position: absolute;
  bottom: 0;
  left:0;
  width:100%;
  height: 1px;
  background: linear-gradient(90deg,rgba(255, 255, 255, 0) 20%, rgba(151, 151, 151, 1) 49%, rgba(255, 255, 255, 0) 77%);
}

.j-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo img {
    width: 196px;
}

.j-mobile-menu {
  display: none;
}

/*-----Hero Section------*/

.j-hero-section {
  position: relative;
  z-index: 2;
  min-height: auto;
  overflow: hidden;
}


.right-gradient-place, .left-gradient-place {
  position: absolute;
  top:0;
  bottom: 0;
  width: 50%;
}

.right-gradient-place {
  right:0;
}

.left-gradient-place {
  left:0;
}

.line-style {
  height: 80px;
  width: 100%;
  animation: gradient 3.5s ease infinite;
  background-size: 130% 100% !important;
}

.left-gradient-place .line-style {
  transform: translateX(0px) scaleX(-1);
}

.gradient-1 {
  background: linear-gradient(270deg, #1973E8 0%, #2AD6FF 13.62%, #AEFF70 26.33%, #FFFFFF 42.03%);
}
.gradient-2 {
  background: linear-gradient(270deg, #1973E8 0%, #2AD6FF 14.87%, #AEFF70 28.74%, #FFFFFF 51.54%);
}
.gradient-3 {
  background: linear-gradient(270deg, #1973E8 0%, #2AD6FF 17.13%, #AEFF70 39.83%, #FFFFFF 64%);
}
.gradient-4 {
  background: linear-gradient(270deg, #1973E8 0%, #2AD6FF 19.09%, #AEFF70 47.96%, #FFFFFF 75.61%);
}
.left-gradient-1 {
  background: linear-gradient(270deg, #1973E8 0%, #2AD6FF 13.62%, #AEFF70 26.33%, #FFFFFF 42.03%);
}
.left-gradient-2 {
  background: linear-gradient(270deg, #1973E8 0%, #2AD6FF 14.87%, #AEFF70 28.74%, #FFFFFF 51.54%);
}
.left-gradient-3 {
  background: linear-gradient(270deg, #1973E8 0%, #2AD6FF 17.13%, #AEFF70 39.83%, #FFFFFF 64%);
}
.left-gradient-4 {
  background: linear-gradient(270deg, #1973E8 0%, #2AD6FF 19.28%, #AEFF70 47.96%, #FFFFFF 75.61%);
}

@keyframes gradient {
  0% {
    background-position: 55% 0%;
  }
  50% {
    background-position: 33% 0%;
  }
  100% {
    background-position: 55% 0%;
  }
}


.j-content-part {
  position: relative;
  z-index: 4;
  text-align: center;
  padding-top: 64px;
}

.j-hero-content {
  font-size: 16px;
  line-height: 28px;
  color:var(--color-text-gray);
}

.j-hero-heading span {
  leading-trim: both;
  text-edge: cap;
  background: linear-gradient(90deg, #1973E8 12.5%, #22A5F4 58.65%, #AEFF70 99.04%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.j-hero-image {
  position: relative;
  z-index: 3;
  margin-top: 20px;
}

/*---- Service Section----*/

.j-section-stack {
  padding-top: 70px;
}

.j-heading-group {
  margin-bottom: 61px;
}

.j-heading-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  text-transform: uppercase;
  color: var(--color-dark-gray);
  column-gap: 6px;
}

.j-label-shape {
  max-width: 27px;
  flex:0 0 27px;
}

.j-top-shape, .j-bottom-shape {
  height: 5px;
  width: 100%;
  display: flex;
  align-items: center;
}

.j-top-shape span, .j-bottom-shape span {
  flex: 1 0 0;
}

.j-top-shape {
  background: linear-gradient(270.08deg, #1973E8 0.07%, #2AD6FF 27.24%, #AEFF70 52.6%, #FFFFFF 94.27%);
}

.j-bottom-shape  {
  background: linear-gradient(270.08deg, #1973E8 0.07%, #2AD6FF 27.24%, #AEFF70 52.6%, #FFFFFF 94.27%);
  transform: translateX(0px) scaleX(-1);
}

.j-section-heading span {
  background: linear-gradient(90deg, #1973E8 21.15%, #2AD6FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.j-section-content {
  font-size: 16px;
  line-height: 21px;
  color: var(--color-text-gray);
}

.j-service-stack {
  position: relative;
}

.border-stack {
  border-top:0.5px solid var(--color-border-gray);
}

.border-stack-black-bg {
  border-top:0.5px solid var(--color-black-border-gray);
}

.border-stack-black-bg:after, .border-stack-black-bg:before {
  content:"";
  position: absolute;
  width:100vw;
  height: 0.5px;
  background: var(--color-black-border-gray);
  top:-1px;
}

.border-stack:after, .border-stack:before {
  content:"";
  position: absolute;
  width:100vw;
  height: 0.5px;
  background:var(--color-border-gray);
  top:-1px;
}


.border-stack:after, .border-stack-black-bg:after {
  right:100%;
}

.border-stack:before, .border-stack-black-bg:before {
  left:100%;
}

.j-divider-left, .j-divider-right {
  position: absolute;
  top: -12px;
  width:18px;
  height: 18px;
}

.j-divider-left {
  left: -8.8px;
  z-index: 1;
}

.j-divider-right {
  right:-8.8px;
  z-index: 1;
}

.j-service-grid {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
}

.j-inside-grid {
  position: relative;
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition:all 0.4s ease-in-out;
}




.j-inside-grid .j-icon {
  width: 57px;
  height: 57px;
  flex:0 0 57px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-blue);
  margin-bottom: 48px;
  transition:all 0.4s ease-in-out;
}

.j-inside-grid:hover .j-icon {
  background: var(--color-sky-blue);
}

.j-inside-grid .j-icon svg{
  width:38px;
  height: 38px;
}

.j-inside-grid h3 {
  color:var(--color-black);
}

.j-inside-grid p {
  font-size: 14px;
  line-height: 23px;
  color:var(--color-text-gray);
  margin-bottom: 0;
}

.j-inside-grid figcaption {
  padding-top: 28px;
  padding-left: 28px;
  padding-right: 28px;
}

.j-line-divider {
  position: absolute;
  right: 0;
  width: 12px;
  height: 100%;
  top: 0;
}

.j-line-divider span {
  height: 50%;
  display: flex;
  flex-direction: column;
}

.blue-gradient span {
  background: linear-gradient(180deg, #1C82EB 0%, #29CEFD 100%);
}

.green-gradient span {
  background: linear-gradient(180deg, #28CBFC 0%, #AEFF70 100%);
}

.j-inside-grid .j-image {
  margin-bottom: 0;
}

.j-full-stack {
  padding-top: 50px;
  padding-bottom: 50px;
}

/*----Benefit section----*/

.j-insite-benefit-section {
  padding-top: 70px;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 40px;
}

.j-icon-list {
  margin-bottom: 67px;
}

.j-icon-list li {
  margin-bottom: 30px;
}

.j-icon-list li:last-child{
  margin-bottom: 0;
}

.j-icon-list li h4 {
  display: flex;
  align-items: center;
  column-gap: 12px;
  margin-bottom: 9px;
}

.j-icon-list li svg {
  width:25px;
  height: 25px;
}

.j-icon-list li p {
  font-size: 15px;
  line-height: 20px;
  color: var(--color-text-gray);
  margin-bottom: 0;
}

.j-process-image svg {
  width:100%;
  height: auto;
}

/*----Technology stack Section---*/

.j-technology-stack-section {
  background: var(--color-black);
   z-index: 1;
}

.j-inside-tech {
  padding-left: 40px;
  padding-right: 40px;
  color:var(--color-white);
  position: relative;
  z-index: 2;
}

.outline-side-darkline:after, .outline-side-darkline:before {
  background: var(--color-black-border-gray);
}

.j-full-image-graph {
  position: absolute;
  left: 0px;
  bottom: 0;
  width: 100vw;
  right: 0;
}

.j-full-image-graph img {
  width: 100vw;
}

.j-tech-stack {
  position: relative;
  z-index: 2;
}

.j-technology-stack-section .j-heading-stack {
  margin-top: 70px;
}

.j-technology-stack-section .j-heading-label {
  color:var(--color-white);
}

/*---essitional Section---*/

.inner-esstional-grid .j-line-divider {
  width:9px;
}

.inner-esstional-grid .j-image img {
  width: 100%;
}

/*----Blog Section----*/

.j-blog-section {
  background: var(--color-black);
  color:#fff;
}

.j-blog-section .j-heading-label {
  color:#fff;
}

.j-blog-list {
  display: flex;
  flex-wrap: wrap;
}

.j-blog-grid-inside {
  flex:1 0 0;
  padding: 6px;
  border-right:0.5px solid var(--color-black-border-gray);
}

.j-blog-grid-inside .blog_img {
  height: 214px;
  margin-bottom: 0;
}

.j-blog-grid-inside .blog_img img {
  width:100%;
  height:100%;
  object-fit: cover;
}

.j-blog-grid-inside .news_swiper_items {
  padding:23px 17px;
}

.j-blog-grid-inside .news_swiper_items h3 {
  font-size: 18px;
  color:var(--color-white);
  line-height: 23px;
  margin-bottom: 20px;
}

.j-blog-grid-inside .news_swiper_items p {
  font-size: 14px;
  line-height: 18px;
  color: var(--color-text-gray);
}

.j-blog-grid-inside .cat-list-blog a {
  background: var(--color-blue);
  border-radius: 5px;
  font-family: var(--bodytext);
  font-size: 13px;
  color:var(--color-white);
  padding: 1px 18px;
  display: inline-block;
  margin-bottom: 14px;
}

/*-----Faqs Section----*/

.j-faq-place-stack {
  max-width: 956px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 70px;
}

.j-faq-item {
  border:0.5px solid var(--color-border-gray);
  border-bottom: 0;
}

.j-faq-item:last-child{
  border:0.5px solid var(--color-border-gray);
}

.j-question {
  font-size: 17px;
  padding: 18px;
  position: relative;
  font-weight: 600;
  color: var(--color-black);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}

.j-answer {
  display: none;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-gray);
  padding: 18px;
  border-top:0.5px solid var(--color-border-gray);
}

.j-faq-item.active .j-answer {
  display: block;
}

.j-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  background:var(--color-blue);
  border-radius: 3px;
  color:var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

/*----J cta section----*/

.j-cta-stack-outer {
  padding-top: 70px;
  /* padding-left: 40px; */
  padding-bottom: 70px;
}

.j-cta-image-stack {
  position: absolute;
  right:0;
  top:0;
  width: 57%;
}

.j-lead-stack {
  margin-top: 70px;

}

.j-form-part .input-style {
  width: 100%;
  height: 48px;
  background: #FFFFFF;
  border-radius: 8px;
  color: var(--color-black);
  font-size: 14px;
  border: none;
  padding: 0 10px;
  border:0.5px solid var(--color-border-gray);
}

.j-form-part .full-button {
  width: 100%;
  text-align: center;
  background:var( --color-dark-gray);
  border-radius: 8px;
  font-weight: 500;
  font-size: 15px;
  line-height: 18px;
  color: #FFFFFF;
  padding: 13px 28px;
  border: none;
  transition: all 0.4s ease-in-out;
}

.j-form-part .full-button:hover {
  background: var(--color-sky-blue);
}

.j-long-buttoon-group {
  display: flex;
  align-items: center;
  column-gap: 18px;
}

.j-long-buttoon-group a {
  width: calc(100% / 2);
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.j-long-buttoon-group a svg {
  width: 30px;
  height: auto;
}

.j-long-buttoon-group a:first-child {
  background: var(--color-blue);
}

.j-long-buttoon-group a:last-child {
  background: var(--color-sky-blue);
}
.j-heading-stack, .j-lead-stack {
  position: relative;
  z-index: 2;
}

.j-cta-section .j-heading-stack, 
.j-cta-section .j-lead-stack {
  padding-left: 40px;
  margin-right: 40px;
}







/*----Footer---*/

.j-footer-new {
  background: var(--color-black) !important;
  color: var(--color-white);
  border-radius:0 !important;
  padding: 0;
}

.j-footer-header {
  background: var(--color-light-green);
  padding-left: 70px;
  padding-right: 70px;
  padding-top: 30px;
  padding-bottom: 30px;
  color:var(--color-black)
}

.j-footer-left {
  padding-top: 17px;
  padding-left: 23px;
  padding-right: 23px;
  padding-bottom: 24px;
}

.j-social-list {
  display: flex;
  align-items: center;
  column-gap: 14px;
  margin-bottom: 40px;
}

.j-social-list li svg {
  width:36px;
  height: auto;
  transition: all 0.4s ease-in-out;
}

.j-social-list li a:hover svg path {
  fill:var(--color-blue);
}

.j-footer-logo {
  margin-bottom: 31px;
  margin-top: 18px;
}

.j-contactlist {
  display: flex;
  flex-direction: column;
  row-gap: 34px;
}

.j-contactlist li {
  display: flex;
  align-items: center;
  column-gap: 9px;
}

.j-contactlist li svg {
  width:30px;
  height: auto;
  transition: all 0.4s ease-in-out;
}

.j-contactlist li a {
  color:var(--color-text-gray);
  font-size: 16px;
  transition: all 0.4s ease-in-out;
}

.j-contactlist li a:hover {
  color:var(--color-sky-blue);
}

.j-contactlist li a:hover svg path {
  stroke: var(--color-blue);
  transition: all 0.4s ease-in-out;
}

.j-foter-border-right:after {
  content:"";
  position: absolute;
  top:0;
  right:0;
  height:100%;
  background: var(--color-black-border-gray);
  width: 0.5px;
}

.j-footer-heading {
  font-size: 17px;
  line-height: 22px;
  text-transform: uppercase;
  color: var(--color-white);
  padding: 28px 10px;
  position: relative;
}

.j-footer-heading:after {
  content:"";
  position: absolute;
  bottom: 0;
  left:0;
  right:0;
  height:0.5px;
  background:var(--color-black-border-gray);
  margin-left: -11px;
  margin-right: -11px;
}

.short-border:after {
  margin-right: 0;
}

.j-footer-menu {
  display: flex;
  flex-direction: column;
  row-gap: 9px;
  margin-top: 26px;
}

.j-footer-menu li a {
  font-size: 15px;
  line-height: 21px;
  color: var(--color-text-gray);
  transition: all 0.4s ease-in-out;
  display: block;
  padding: 0 11px;
}

.j-footer-menu li a:hover {
  color: var(--color-sky-blue);
}

.footer-bottom {
  text-align: center;
  border-top:0.5px solid var(--color-black-border-gray);
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 14.79167vw;
  line-height:1;
  background: linear-gradient(180deg, #353535 -11.72%, #000000 95.11%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  padding: 24px 20px;
}

.j-copyright {
  font-size: 14px;
  text-align: center;
  line-height: 1;
  color: var(--color-text-gray);
  padding: 17px 0 25px 0;
  border-top: 0.5px solid var(--color-black-border-gray);
}


/*----Inner Page Hero Sectin----*/

.j-inner-hero-section {
  position: relative;
  z-index: 2;
  min-height: 560px;
  padding-top: 100px;
}

.j-vertical-line-full-width {
  position: absolute;
  left:0;
  bottom: 0;
  width:100%;
  height:75%;
  z-index: -1;
  display:flex;
}

.j-verti-style {
  height: 100%;
  width: 60px;
  flex:0 0 60px;
  animation: verticalGradient 3s ease infinite;
  background-size: 100% 170% !important;
}

.vertical-gradient-line-1 {
  background: linear-gradient(0deg, #1973E8 0%, #2AD6FF 13.62%, #AEFF70 26.33%, #FFFFFF 42.03%);
}

.vertical-gradient-line-2 {
  background: linear-gradient(0deg, #1973E8 0%, #2AD6FF 14.87%, #AEFF70 28.74%, #FFFFFF 51.54%);
}

.vertical-gradient-line-3 {
  background: linear-gradient(0deg, #1973E8 0%, #2AD6FF 17.13%, #AEFF70 39.83%, #FFFFFF 64%);
}

.vertical-gradient-line-4 {
  background: linear-gradient(0deg, #1973E8 0%, #2AD6FF 17.78%, #AEFF70 49.2%, #FFFFFF 84.76%);
}

@keyframes verticalGradient {
  0% {
    background-position: 0% 55%;
  }
  50% {
    background-position: 0% 33%;
  }
  100% {
    background-position: 0% 55%;
  }
}

.j-inner-hero-content-area {
  position: relative;
  z-index: 3;
}

.j-innerpage-heading {
  color: var(--color-black);
}

/*----Gsap scroll Section---*/

.gradient-stack {
  overflow:hidden;
  height:500px;
  display: none;
}

.gradient-stack.active{
  display:block;
}

.j-gradient-stack-full {
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height: 100%;
  display: flex;
}

.j-vertical-full {
  height: 100%;
  width: 80px;
  flex: 0 0 80px;
}

.j-verti-full-1 {
  background: linear-gradient(180deg, #FFCD91 0%, #FC9526 13.48%, #FD9E36 31.51%, #FFCD91 100%);
}

.j-verti-full-2 {
  background: linear-gradient(180deg, #FFCD91 0%, #FC9526 25.88%, #FD9E36 48.43%, #FFCD91 100%);
}

.j-verti-full-3 {
background: linear-gradient(180deg, #FFCD91 0%, #FC9526 38.84%, #FD9E36 62.9%, #FFCD91 100%);
}

.j-verti-full-4 {
background: linear-gradient(180deg, #FFCD91 0%, #FC9526 52.37%, #FD9E36 75.49%, #FFCD91 100%);
}

.j-verti-full-5 {
background: linear-gradient(180deg, #FFCD91 0%, #FC9526 70.23%, #FD9E36 88.27%, #FFCD91 100%);
}

.j-verti-full-6 {
background: linear-gradient(180deg, #FFCD91 0%, #FC9526 86.39%, #FD9E36 96.53%, #FFCD91 100%);
}

.j-verti-full-7 {
background: linear-gradient(180deg, #FFCD91 0%, #FC9526 89.39%, #FD9E36 99.35%, #FFCD91 100%);
}

.j-content-stack {
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 40px;
  padding-right: 40px;
}

.j-border-bottom {
  border-bottom: 0.5px solid var(--color-border-gray);
}

.j-image-holder {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.j-featured-stack {
  display: flex;
  align-items: flex-start;
}

.j-leftside-content-stack {
  max-width: 450px;
  flex:0 0 450xp;
}

.j-right-side-gradient-stack {
  /* flex:1 0 0; */
  flex: 1;
}


.j-scroll-sticky {
  position: sticky;
  top:40px;
}

.j-content-stack.active  {
  background: #FCFCFC;
}

.j-content-stack .j-btm {
  opacity:0;
}

.j-content-stack.active .j-btm {
  opacity:1;
}

.j-featured-mobile .gradient-stack {
  display: block;
}

.j-featured-mobile .j-content-stack .j-btm {
  opacity:1;
}

.j-mobile-view {
  display: none;
}


/*---Blur gradent---*/
.j-verti-blue-full-1 {
  background: linear-gradient(180deg, #2AD6FF 0%, #1973E8 18.27%, #1973E8 53.85%, #2AD6FF 100%);
}

.j-verti-blue-full-2 {
  background: linear-gradient(180deg, #2AD6FF 0%, #1973E8 27.57%, #1973E8 58.7%, #2AD6FF 100%);
}

.j-verti-blue-full-3 {
  background: linear-gradient(180deg, #2AD6FF 0%, #1973E8 41.77%, #1973E8 73.81%, #2AD6FF 100%);
}

.j-verti-blue-full-4 {
  background: linear-gradient(180deg, #2AD6FF 0%, #1973E8 51.14%, #1973E8 82.27%, #2AD6FF 100%);
}

.j-verti-blue-full-5 {
  background: linear-gradient(180deg, #2AD6FF 0%, #1973E8 87.71%, #2AD6FF 100%);
}

/*---Green Gradient---*/

.j-verti-green-full-1 {
  background: linear-gradient(180deg, #AEFF70 0%, #58CB00 46.44%, #58CB00 87.18%, #AEFF70 100%);
}

.j-verti-green-full-2 {
  background: linear-gradient(180deg, #AEFF70 0%, #58CB00 26.07%, #58CB00 67.41%, #AEFF70 100%);
}

.j-verti-green-full-3 {
  background: linear-gradient(180deg, #AEFF70 0%, #58CB00 22.18%, #58CB00 51.53%, #AEFF70 100%);
}

.j-verti-green-full-4 {
  background: linear-gradient(180deg, #AEFF70 0%, #58CB00 11.99%, #58CB00 36.55%, #AEFF70 100%);
}

.j-verti-green-full-5 {
  background: linear-gradient(180deg, #AEFF70 0%, #58CB00 0%, #58CB00 20.98%, #AEFF70 100%);
}

/*---Orange Gradient---*/

.j-verti-orange-full-1 {
  background: linear-gradient(180deg, #FFB04F 0%, #E37D00 27.58%, #E37D00 61.12%, #FFB04F 100%);
}

.j-verti-orange-full-2 {
  background: linear-gradient(180deg, #FFB04F 0%, #E37D00 44.67%, #E37D00 76.31%, #FFB04F 100%);
}


/*----Blue Green Gradient---*/

.j-verti-gluegreen-full-1 {
  background: linear-gradient(180deg, #AEFF70 0%, #2AD6FF 13.48%, #2AD6FF 31.51%, #AEFF70 100%);
}

.j-verti-gluegreen-full-2 {
  background: linear-gradient(180deg, #AEFF70 0%, #2AD6FF 25.88%, #2AD6FF 48.43%, #AEFF70 100%);
}

.j-verti-gluegreen-full-3 {
  background: linear-gradient(180deg, #AEFF70 0%, #2AD6FF 38.84%, #2AD6FF 62.9%, #AEFF70 100%);
}

.j-verti-gluegreen-full-4 {
  background: linear-gradient(180deg, #AEFF70 0%, #2AD6FF 52.37%, #2AD6FF 75.49%, #AEFF70 100%);
}

.j-verti-gluegreen-full-5 {
  background: linear-gradient(180deg, #AEFF70 0%, #2AD6FF 70.23%, #2AD6FF 88.27%, #AEFF70 100%);
}

.j-verti-gluegreen-full-6 {
  background: linear-gradient(180deg, #AEFF70 0%, #2AD6FF 86.39%, #2AD6FF 96.53%, #AEFF70 100%);
}

.j-verti-gluegreen-full-7 {
  background: linear-gradient(180deg, #AEFF70 0%, #2AD6FF 89.39%, #2AD6FF 99.35%, #AEFF70 100%);
}

/*----Purple Gradient----*/

.j-verti-purple-full-1{
  background: linear-gradient(180deg, #ECEBFF 0%, #9A95FF 18.27%, #9A95FF 53.85%, #ECEBFF 100%);
}

.j-verti-purple-full-2{
  background: linear-gradient(180deg, #E9E8FF 0%, #9A95FF 27.57%, #9A95FF 58.7%, #E9E8FF 100%);
}

.j-verti-purple-full-3{
  background: linear-gradient(180deg, #E9E8FF 0%, #9A95FF 41.77%, #9A95FF 73.81%, #E9E8FF 100%);
}

.j-verti-purple-full-4{
  background: linear-gradient(180deg, #E9E8FF 0%, #9A95FF 51.14%, #9A95FF 82.27%, #E9E8FF 100%);
}

.j-verti-purple-full-5{
  background: linear-gradient(180deg, #EBEAFF 0%, #9A95FF 87.71%, #EAE9FF 100%);
}



/*----CTa Section---*/

.j-calltoaction-sectin-dark {
  background: var(--color-black);
  z-index: 2;
}

.j-left-ver-shadow, .j-right-ver-shadow {
  position: absolute;
  top:0;
  z-index:1;
  height: 100%;
  
  display: flex;
  align-items: flex-start;
}
.j-left-ver-shadow{
  left:0;
  width: 50%;
}

.j-right-ver-shadow {
  right:0;
  width: 50%;
  justify-content: flex-end;
}

.j-vertical-bar {
  max-width:40px;
  width:100%;
  background: linear-gradient(180deg, #1973E8 0%, #000000 100%);
}

.bar-first {
  min-height: 321px;
}

.bar-second {
  min-height: 244px;
}

.bar-third {
  min-height: 144px;
}

.bar-fourth {
  min-height:70px;
}

.j-dark-form-stack {
  position: relative;
  z-index: 2;
}

.j-contact-arternative {
  display: flex;
  gap: 20px;
}
.j-contact-arternative a {
  flex: 1 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  border-radius: 8px;
}

.j-contact-arternative .j-call {
  background:var(--color-blue) ;
}

.j-contact-arternative .j-whats-app {
  background:var(--color-sky-blue);
}

.j-contact-arternative .full-button {
  width: 100%;
  text-align: center;
  background:var(--color-dark-gray);
  border-radius: 8px;
  font-weight: 500;
  font-size: 15px;
  line-height: 18px;
  color:var(--color-white);
  padding: 13px 28px;
  border: none;
}


/*----Advantage Section----*/

.j-advantage-section {
  border-top: 1px solid var(--color-border-gray);
}

.j-avantages-list-stack .gradient-stack {
  display: block;
}

.j-avantages-list-stack .j-btm {
  opacity: 1;
}

.j-avantages-list-stack {
  border-top: 1px solid var(--color-border-gray);
}

/*---Wither Color Gradient----*/

.j-verti-winter-full-1{
  background: linear-gradient(180deg, #E3F9F5 0%, #9EFFEE 13.48%, #9EFFEE 31.51%, #E3F9F5 100%);
}

.j-verti-winter-full-2{
  background: linear-gradient(180deg, #E3F9F5 0%, #9EFFEE 25.88%, #9EFFEE 48.43%, #E3F9F5 100%);
}

.j-verti-winter-full-3{
  background: linear-gradient(180deg, #E3F9F5 0%, #9EFFEE 38.84%, #9EFFEE 62.9%, #E3F9F5 100%);
}

.j-verti-winter-full-4{
  background: linear-gradient(180deg, #E3F9F5 0%, #9EFFEE 52.37%, #9EFFEE 75.49%, #E3F9F5 100%);
}

.j-verti-winter-full-5{
  background: linear-gradient(180deg, #E3F9F5 0%, #9EFFEE 70.23%, #9EFFEE 88.27%, #E3F9F5 100%);
}

.j-verti-winter-full-6{
  background: linear-gradient(180deg, #E3F9F5 0%, #9EFFEE 81.81%, #9EFFEE 93.05%, #E3F9F5 100%);
}

.j-verti-winter-full-7{
  background: linear-gradient(180deg, #E3F9F5 0%, #9EFFEE 89.39%, #9EFFEE 99.35%, #E3F9F5 100%);
}

/*---Fitrelight Color Gradient---*/


.j-verti-firelight-full-1{
  background: linear-gradient(180deg, #FDF8E7 0%, #F6DB7C 13.48%, #F6DB7C 31.51%, #FDF8E7 100%);
}

.j-verti-firelight-full-2{
  background: linear-gradient(180deg, #FDF8E7 0%, #F6DB7C 25.88%, #F6DB7C 48.43%, #FDF8E7 100%);
}

.j-verti-firelight-full-3{
  background: linear-gradient(180deg, #FDF8E7 0%, #F6DB7C 38.84%, #F6DB7C 62.9%, #FDF8E7 100%);
}

.j-verti-firelight-full-4{
  background: linear-gradient(180deg, #FDF8E7 0%, #F6DB7C 52.37%, #F6DB7C 75.49%, #FDF8E7 100%);
}

.j-verti-firelight-full-5{
  background: linear-gradient(180deg, #FDF8E7 0%, #F6DB7C 70.23%, #F6DB7C 88.27%, #FDF8E7 100%);
}

.j-verti-firelight-full-6{
  background: linear-gradient(180deg, #FDF8E7 0%, #F6DB7C 86.39%, #F6DB7C 96.53%, #FDF8E7 100%);
}

.j-verti-firelight-full-7{
  background: linear-gradient(180deg, #FDF8E7 0%, #F6DB7C 89.39%, #F6DB7C 99.35%, #FDF8E7 100%);
}

/*----Cobalite Gradient Color---*/

.vertical-cobalite-line-1 {
  background: linear-gradient(0deg, #9A95FF 0%, #CFCCFF 26.33%, #FFFFFF 42.03%);
}

.vertical-cobalite-line-2 {
  background: linear-gradient(0deg, #9A95FF 0%, #E5E4FF 28.74%, #FFFFFF 51.54%);
}

.vertical-cobalite-line-3 {
  background: linear-gradient(0deg, #9A95FF 0%, #C9C7FF 37.23%, #FFFFFF 71.96%);
}

.vertical-cobalite-line-4 {
  background: linear-gradient(0deg, #9A95FF 0%, #CBC9FF 49.2%, #FFFFFF 84.76%);
}

/*----New Abut Us Section---*/

.j-new-about-section {
  background: var(--color-black);
  color:var(--color-white);
}

.j-about-blocks-stack {
  display: flex;
  justify-content: space-between;
}

.j-half-hero-image {
  position: relative;
  margin-top: -299px;
  z-index: 3;
}

.j-new-about-hero.j-inner-hero-section {
  padding-top: 40px;
  min-height: 605px;
}

.j-new-about-section .j-heading-label {
  color: var(--color-text-gray);
}

.j-partner-section {
  background: var(--color-black);
}

.j-partner-section .j-heading-group {
  color:var(--color-white);
}

.j-partner-section .j-heading-label {
  color: var(--color-white);
}

.j-four-grid-stack {
  border-top:1px solid var(--color-black-border-gray);
}

.j-box-grid-inner {
    display: grid;
    align-items: stretch;
    column-gap: 20px;
    row-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: minmax(1fr,1fr);
    grid-template-areas: ". . .";
}

.j-box-grid-inner .j-grid-box:nth-child(2), 
.j-box-grid-inner .j-grid-box:nth-child(3){
  grid-row-start: span 1;
  grid-row-end: span 1;
  grid-column-start: span 2;
  grid-column-end: span 2;
  overflow: hidden;
  max-width: none;
}

.j-box-grid-inner .j-grid-box {
  display: flex;
  position: relative;
  align-items: flex-end;
  z-index: 1;
  min-height: 400px;
}

.j-box-grid-inner .j-grid-box:after {
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height: 100%;
  background: linear-gradient(228.81deg, rgba(0, 0, 0, 0.27) 13.01%, rgba(0, 0, 0, 0.668269) 49.54%, #000000 82.26%);
}

.j-grid-content {
  padding: 30px;
  color:#fff;
  position: relative;
  z-index: 2;
}

.j-advantage-section .j-btm {
  opacity:1;
}

.j-advantage-section .j-short-image img {
  width: 550px;
}

/*----Blog Page Design----*/

.j-blog-list-white-bg .j-blog-grid-inside{
  border-color: var(--color-border-gray);
  max-width: 25%;
  flex: 0 0 25%;
  border-bottom: 0.5px solid var(--color-border-gray);
  margin-bottom: -1px;
}

.j-blog-list-white-bg .j-blog-grid-inside .news_swiper_items h3 {
  color:var(--color-black);
}

/*---Quick demo---*/

.j-q-demo-wrapper {
  border-top: 0.5px solid var(--color-border-gray);
}

.j-small-box-stack {
  display: flex;
  flex-wrap: wrap;
  margin-top: 19px;
}

.j-small-box-stack .j-half-stack {
  max-width: 50%;
  flex: 0 0 50%;
  min-height: 215px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(231.31deg, #FFFFFF 0%, #F8F8F8 77.71%);

}

.j-small-box-stack .j-half-stack {
  border-right: 0.5px solid var(--color-border-gray);
  border-top: 0.5px solid var(--color-border-gray);
}
.j-small-box-stack .j-half-stack:nth-child(2),
.j-small-box-stack .j-half-stack:last-child {
  border-right: none;
}

.j-small-box-stack .j-half-stack figure {
  width: 57px;
  height: 57px;
  flex: 0 0 57px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-blue);
  transition: all 0.4s ease-in-out;
}
.j-small-box-stack .j-half-stack figure svg {
  width: 38px;
  height: 38px;
}

.j-small-box-stack .j-half-stack figure svg path {
  fill:var(--color-light-green);
}

.j-from-left {
  padding: 34px 20px 0 20px;
}

.j-from-right {
  padding: 34px 20px 0 20px;
  height: 100%;
  border-left: 0.5px solid var(--color-border-gray);
}

.j-from-right .input-style,
.j-from-right .select-style,
.j-from-right .textarea-style {
  border: 1px solid var(--color-border-gray);
}

/*---Blg Details Page----*/

body.single-post header {
  position: static;
  top:0;
}

body.single-post .blog-contain {
  padding-top: 0;
  background:var(--color-white);
}

.blog-contain-new {
  border-top: 0.5px solid var(--color-border-gray);
}

.site-single-post-content p {
  font-weight: 400;
}

.site-single-post-content h2, .site-single-post-content h3, .site-single-post-content h4 {
  color: #000;
  font-family: var(--heading-text);
  font-weight: 500;
}

body.single-post .blog-single-content-wrapper {
  display: flex;
  gap: 66px;
  margin: 66px 0 0;
  align-items: flex-start;
}

.site-single-post-content h2 {
  font-size: 31px;
  line-height: 120%;
  margin-bottom: 35px;
}

.simple-post-nav {
  margin: 0;
  padding: 20px 0;
  border-top: 0.5px solid var(--color-border-gray);
}

/*---SFA Page Design---*/

.vertical-orange-gradient-line-1 {
  background: linear-gradient(0deg, #FC9728 0%, #FFC582 26.33%, #FFFFFF 42.03%);
}
.vertical-orange-gradient-line-2 {
  background: linear-gradient(0deg, #FC9729 0%, #FFC37E 28.74%, #FFFFFF 51.54%);
}
.vertical-orange-gradient-line-3 {
  background: linear-gradient(0deg, #FC9729 0%, #FFC684 37.23%, #FFFFFF 71.96%);
}
.vertical-orange-gradient-line-4 {
  background: linear-gradient(0deg, #FC982C 0%, #FEC27C 49.2%, #FFFFFF 84.76%);
}

.j-content-list {}

.j-content-list li {
  position: relative;
  font-size: 16px;
  line-height: 28px;
  color: var(--color-text-gray);
  padding-left: 18px;
}
.j-content-list li:after {
  content: "";
  width: 11px;
  height: 11px;
  position: absolute;
  border-radius: 2px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background:var(--color-logo-blue);
}

.j-benefits-space-stack .j-inside-grid figcaption {
  padding-bottom: 28px;
}

.j-stack-four {
  display: flex;
  flex-wrap: wrap;
}

.j-stack-four .j-stack-four-inner {
  flex: 1 0 0;
  position: relative;
  padding-top: 28px;
  padding-left: 28px;
  padding-right: 28px;
  padding-bottom: 28px;
  color:var(--color-white);
}

.j-stack-four .j-stack-four-inner p {
  font-size: 14px;
  line-height: 18px;
  color: var(--color-text-gray);
}

.j-stack-four .j-stack-four-inner figure {
  width: 57px;
  height: 57px;
  flex: 0 0 57px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-blue);
  margin-bottom: 48px;
  transition: all 0.4s ease-in-out;
}

.j-stack-four .j-stack-four-inner figure svg {
  width: 38px;
  height: 38px;
}

.j-stack-four .j-stack-four-inner:hover figure {
  background: var(--color-sky-blue);
}