.featuresHeroSection{
    margin-top: -70px;
    height: 668px;
    background: linear-gradient(-0.65turn, var(--color-primary), var(--color-secondary));
}
.heroContainer{
display: flex;
width: 100%;
padding: 60px 80px 120px 80px;
column-gap: 50px;
background-color: #FDE4CF;
justify-content: center;
position: relative;
z-index: 1;
background: transparent !important;
}
.heroSubContainer{
display: flex;
align-items: center;
height: 100%;
max-width: 1400px !important;
justify-content: space-between;
padding-bottom: 120px;
}
.heroTextContent{
height: 100%;
display: flex;
flex-direction: column;
justify-content: center; 
row-gap: 56px;
flex: 0.8 !important;
}
.titleSubtitle{
display: flex;
flex-direction: column;
row-gap: 22px;
}
.herotitle{
line-height: 70px;
font-size: var(--48px);
font-weight: 600;
letter-spacing: 2px;
color: var(--color-white);
}
.heroDescription{
font-size: var(--20px);
color: var(--color-white);
font-weight: 300;
}
.heroDescription b{
    font-weight: 600;
    color: #fff;
}
.ctaButtons{
width: 100%;
display: flex;
column-gap: 16px;
}
.primaryButton{
background: var(--color-white);
border-radius: 4px;
font-size: var(--16px);
color: var(--text-primary);
font-weight: 400;
height: 42px;
padding: 0px 30px;
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all var(--transDuration) cubic-bezier(0.25, 0.1, 0.25, 1);
}
.ghostButton{
background-color: transparent;
border-radius: 4px;
border: 1px solid var(--color-white);
font-size: var(--16px);
color: var(--color-white);
font-weight: 400;
height: 42px;
padding: 0px 30px;
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all var(--transDuration) cubic-bezier(0.25, 0.1, 0.25, 1);
}
.heroImageBox{
    width: 720px;
    height: 470px;
    border-radius: 20px;
    padding: 0px;
    /* overflow: hidden; */
    margin-top: 40px;
    position: relative;
}
.heroImageSubBox{
    width: 100%;
    height: 680px;
    position: absolute;
    top: -10px;
    left: 20px;
}
.heroImageBox img{width: 100%; height: 100%;}
.ratingSection{
    width: 100%;
    padding: 0 80px;
    display: flex;
    justify-content: center;
    margin-top: 30px;
    box-sizing: border-box;
}
.ratingContainer{
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: relative;
    height: 106px;
    max-width: 1200px;
    width: 100%;
    border-top: 1.5px solid var(--border-grey);
    border-bottom: 1.5px solid var(--border-grey);
    flex-wrap: wrap;
    gap: 20px;
    box-sizing: border-box;
}
.ratingBox{
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    padding: 10px;
    box-sizing: border-box;
}
.ratingBrandLogoBox{
    width: 130px;
    max-width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.ratingBrandLogoBox img{
    max-width: 100%;
    height: auto;
    object-fit: contain;
}
.Stars {
    --percent: calc(var(--rating) / 5 * 100%);
    display: inline-block;
    font-size: var(--22px);
    font-family: Times;
    line-height: 1;
    white-space: nowrap;
}
.Stars .rateNum{
    font-size: var(--16px);
    font-weight: 300;
    white-space: nowrap;
}
.Stars::before {
    content: "★★★★★";
    letter-spacing: 3px;
    background: linear-gradient(90deg, #EAB05A  var(--percent), #CED0D5 var(--percent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    border-radius: 4px;
}
.advacntagesSection{
    width: 100%;
    padding: 80px;
    margin: 80px 0px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(0, #e6e3e3f7, #ffffff);
}
.advantagesContainer{
    display: flex;
    padding: 0px 40px;
    align-items: stretch;
    justify-content: center;
    column-gap: 60px;
    position: relative;
    z-index: 1;
}
.advantageCard{
    width: 325px;
    border-radius: 16px;
    padding: 32px 16px 44px 16px;
    row-gap: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0px 4px 20px 3px rgba(0,0,0,0.1);
    background-color: var(--color-white);
}
.advantageCard .imgBox{
    width: 210px;
    height: 210px;
}
.advantageCard .imgBox img{
    width: 100%;
    object-fit: cover;
}
.advantageCard .advDetails{
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 8px;
}
.advantageCard .advTitle{
    font-size: var(--24px);
    font-weight: 500;
    text-align: center;
}
.advantageCard .advDescription{
    font-size: var(--14px);
    font-weight: 300;
    color: var(--text-secondary);
    text-align: center;
}
.featImageSection{
    width: 100%;
    padding: 0px 80px;
    margin: 48px 0px;
    padding-bottom: 80px;
    margin-bottom: 0px;
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative;
    flex-direction: column;
    align-items: center;
    row-gap: 40px;
}
.featImageSection .sectionTitle::after{display: none;}
.featImageSection .featImageBox, .allFeatures .featImageBox{
    width: 100%;
    height: 100%;
    background-image: url(/assets/img/DotPattern.png);
    background-repeat: repeat;
    opacity: 0.1;
    position: absolute;
    z-index: -1;
    /* background-color: linear-gradient(); */
    background-size: contain;
}

.featImageSection::before, .allFeatures::before{
    content: '';
    height: 100%;
    width: 200px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    background: linear-gradient(90deg, #fff, transparent);
}
.featImageSection::after, .allFeatures::after{
    content: '';
    height: 100%;
    width: 150px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
    background: linear-gradient(270deg, #fff, transparent);
}
.featImgBox{
    padding: 0;
    position: relative;
    z-index: 1;
    max-width: 1200px;
    padding-top: 60px;
}
.featImg{
    padding: 0;
    width: 944px;
    max-width: 90vw;
    border-radius: 20px;
    /* background: linear-gradient(0.4turn, #1FA2FF, #12D8FA, #A6FFCB); */
    background-color: var(--color-white);
    height: 561px;
    border: 1px solid #CED0D5;
    overflow: hidden;
    /* box-shadow: 1px 14px 31px 0px rgba(6,165,234,0.1),5px 57px 57px 0px rgba(6,165,234,0.09),10px 128px 77px 0px rgba(6,165,234,0.05),18px 227px 91px 0px rgba(6,165,234,0.01),29px 355px 100px 0px rgba(6,165,234,0); */
}
.featImg img{
    width: 100%;
    height: 100%;

}
.featuresSection{
    padding: 80px;
    display: flex;
    flex-direction: column;
    row-gap: 94px;
    align-items: center;
}
.sectionTitle{
    width: 100%;
    max-width: 1200px;
    position: relative;
}
.sectionTitle h2{
    font-size: var(--30px);
    font-weight: 500;
    width: 100%;
    text-align: center;
}
.featuresSection .ftDetailsCotainer{
    display: flex;
    flex-direction: column;
    row-gap: 32px;
}
.ftTitle{position: relative;}
.ftTitle::after{
    display: none;
    content: '';
    height: 4px;
    width: 64px;
    position: absolute;
    bottom: -12px;
    left: 0;
    background: linear-gradient(60deg, rgb(8 96 226) 0%, rgb(255 255 255) 100%);
}
.ftTitle h3{
    font-size: var(--28px);
    font-weight: 500;
    color: var(--text-primary);
}
.ftLeftBox, .ftRightBox{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: auto;
}
.ftImgBox{
    width: 556px;
    height: 417px;
    border: 1px solid #CED0D5;
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
}
.ftImgBox img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ftPoints {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
}
.ftPoints  .ftPointsBox{
    display: flex;
    column-gap: 12px;
}
.ftPoints .ftPointsBox h4 {
    margin-right: 8px;
    font-size: var(--18px);
    color: var(--text-primary)!important;
    font-weight: 600;
}
.ftPoints  .ftPointsBox span:nth-child(2){
    flex: 1;
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    font-size: var(--16px);
    color: var(--text-secondary);
}
.ftPointsBox .iconBox{
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.allFeatures{
    padding: 80px;
    display: flex;
    flex-direction: column;
    row-gap: 56px;
    /* justify-content: center; */
    align-items: center;
    position: relative;
}
.allFeatures .ctaButtons, .solutionsSections .ctaButtons{
    justify-content: center;    
}
.ctaButtons .ghostButton, .solutionsSections .ctaButtons .ghostButton{column-gap: 8px;}
.allFeatures .primaryButton, .solutionsSections .primaryButton{
    background-color: var(--color-primary);
    color: var(--color-white);
    column-gap: 8px;
}
.allFeatures .primaryButton svg, .solutionsSections .primaryButton svg{
    stroke: var(--color-white);
}
.allFeatures .primaryButton:hover svg, .solutionsSections .primaryButton:hover svg{
    stroke: var(--text-secondary);
}
.bentoGrid {
    display: grid;
    gap: 30px;
    width: 100%;
    max-width: 1200px;
    padding: 0 135px;
}
.bentoContainer{
    display: flex;
    width: 100%;
    justify-content: center;
    position: relative;
    height: auto;
}
.gridBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
    border-radius: 12px;
    color: #333;
    background-color: #fff;
    row-gap: 12px;
    position: relative;
}

.gridBox h4 {
    margin: 0 0 10px;
    font-size: var(--22px);
    font-weight: 600;
    color: var(--color-white);
}

.gridBox p {
    margin: 0 0 20px;
    font-size: var(--16px);
    font-weight: 300;
    color: var(--color-white);
    line-height: normal;
}

.gridBox  .ghostButton{column-gap: 8px; height: 30px; padding: 0 12px;}


.gridBox1 {
    background: linear-gradient(0deg, #6797fa, #3c78e6);
    grid-column: 1 / 5;
    grid-row: 1 / 3;
}
.gridBox .gridDetails{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 12px;
    color: var(--color-white);
    row-gap: 12px;
    position: relative;
    z-index: 1;
}

.gridBox2 {
    background: linear-gradient(0deg, #9147b8, #d86fff);
    grid-column: 5 / 15;
    grid-row: 1 / 2;
}

.gridBox3 {
    background: linear-gradient(0deg, #fa6767, #da4a4a);
    grid-column: 5 / 10;
    grid-row: 2 / 3;
}

.gridBox4 {
    background: linear-gradient(0deg, #40ad5f, #4ec78a);
    grid-column: 10 / 15;
    grid-row: 2 / 3;
}

.gridBox5 {
    background: linear-gradient(0deg, #6f4eb9, #804cbb);
    grid-column: 1 / 9;
    grid-row:  3 / 3;
}

.gridBox6 {
    background: linear-gradient(0deg, #d75ca2, #e876b7);
    grid-column: 9 / 15;
    grid-row: 3 / 3;
}
.iconAndTitleBox{
    display: flex;
    flex-direction: column;
    row-gap: 24px;
}
.bentoGridIconBox{
    width: 36px;
    height: 36px;
    color: var(--color-white);
    position: relative;
    z-index: 1;   
}
.bentoGridIconBox svg{
    width: 36px;
    height: 36px;
}
.bentoGridIconBox svg path{
    fill: var(--color-white);
}
.gridBox2 .iconAndTitleBox,.gridBox3 .iconAndTitleBox,.gridBox4 .iconAndTitleBox,.gridBox5 .iconAndTitleBox,.gridBox6 .iconAndTitleBox{
    flex-direction: row;
    column-gap: 16px;
    align-items: center;
}
.bentoGrid a{
    width: 48px;
    height: 48px;
    cursor: pointer;
    overflow: visible;
}

.bentoGrid a svg{
    filter: drop-shadow(2px 4px 28px rgba(0, 0, 0, 0.7));
    width: 48px;
    height: 48px;
    transition: all var(--transDuration) cubic-bezier(0.25, 0.1, 0.25, 1);
}
.bentoGrid .seeMoreLink a:hover svg{
    width: 52px;
    height: 52px;
    /* transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94); */
}
.bentoGrid .gridBox3 a svg{
    filter: drop-shadow(2px 4px 28px rgba(0, 0, 0, 0.5));
}
.bentoGrid a svg path{
    fill: var(--color-white);
}
.bentoGrid .seeMoreLink{
    width: 100%;
    display: flex;
    justify-content: end;
    padding-right: 10px;
    z-index: 1;
}
.gridBox::after{
    content: "";
    background-image: url(../img/CardWave.png);
    position: absolute;
    background-position: bottom;
    background-repeat: no-repeat;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
}

.solutionsSections{
    padding: 80px;
    display: flex;
    flex-direction: column;
    row-gap: 56px;
    align-items: center;
}
.solCardsContainer {
    display: flex;
    max-width: 1256px;
    align-items: center;
    justify-content: center;
}
.solCardsBox{
    border-radius: 12px;
    width: 341px;
    height: 234px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    background-color: var(--color-white);
    overflow: hidden;
    box-shadow: 0px 0px 78px 0px rgba(0, 0, 0, 0.1);
    transition: transform var(--transDuration) cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow var(--transDuration) cubic-bezier(0.25, 0.1, 0.25, 1);
}
.solCardsBox::before{
    content: "";
    background: #e3ecff;
    mask-image: url(../img/team/bulb.png);
    mask-size: cover;
    mix-blend-mode: multiply;
    background-clip: content-box;
    opacity: 0.5;
    position: absolute;
    left: -120px;
    width: 250px;
    height: 100%;
    z-index: 0;
}
.solCardbox1{
    transform: translateX(10px);
}
.solCardbox2{
    height: 280px;
    width: 386px;
    z-index: 1;
}
.solCardbox3{
    transform: translateX(-10px);
}
.solCardbox1::before,.solCardbox3::before{
    width: 220px;
}
.solTitle{
    /* height: 108px; */
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 12px;
    position: relative;
    z-index: 1;
}
.solTitle h3{
    color: var(--text-primary);
    font-size: var(--22px);
    font-weight: 500;
    text-align: center;
}
.solDescription{
    padding: 0px 16px;
    position: relative;
    z-index: 1;
}
.solDescription p{
    padding: 16px;
    font-size: var(--14px);
    color: var(--text-secondary);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-bottom: 0;
}
.solCardsBox:hover{
    cursor: pointer;
    z-index: 2;
    box-shadow: 0px 0px 90px 0px rgba(0, 0, 0, 0.18);
    transform: scale(1.2);
}
.solCardsBox .solIconBox{
    width: 64px;
    height: 64px;
    overflow: hidden;
    display: none;
}
.solCardsBox .solIconBox svg{
    width: 100%;
    height: 100%;
}

.faqSection{
    padding: 0 100px 30px 100px;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    position: relative;
}
.faqSection::after{
    content: "";
    background-image: url(../img/FAQ_Wave.png);
    background-position: bottom;
    background-repeat: no-repeat;
    opacity: .7;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* .faqSection::before{
    transform: rotate(180deg);
} */
.faqSection .sectionTitle h2{
    position: relative;
    z-index: 1;
}
.faqSection .sectionTitle::after{
    display: none !important;
}
/* Tutorials-style FAQ cards inside features page */
.faqSection .groupBigBox{max-width:1200px; position:relative; z-index:1}
.faqSection .groupBigBox > div{background:#fff; border:1px solid #e9ecef; border-left:4px solid var(--color-primary); border-radius:12px; padding:14px 16px; box-shadow:0 6px 16px rgba(0,0,0,.05); transition:box-shadow .25s ease, transform .2s ease; will-change:box-shadow, transform}
.faqSection .groupBigBox > div + div{margin-top:12px}
.faqSection .groupBigBox > div:hover{box-shadow:0 12px 28px rgba(0,0,0,.08); transform:translateY(-1px)}
.faqSection .groupBigBox h3{margin:0 0 6px 0; font-size:18px; font-weight:700; color:var(--text-primary); line-height:1.35; position:relative; padding-left:28px}
.faqSection .groupBigBox h3::before{content:"Q"; position:absolute; left:0; top:0; height:22px; min-width:22px; padding:0 6px; border-radius:6px; background:rgba(8,96,226,.1); color:var(--color-primary); font-size:12px; font-weight:800; display:inline-flex; align-items:center; justify-content:center}
.faqSection .groupBigBox p{margin:0; color:#444; line-height:1.7; position:relative; padding-left:28px}
.faqSection .groupBigBox p::before{content:"A"; position:absolute; left:0; top:2px; height:22px; min-width:22px; padding:0 6px; border-radius:6px; background:#f1f4f9; color:#5b6270; font-size:12px; font-weight:800; display:inline-flex; align-items:center; justify-content:center}
@media (max-width:767px){
  .faqSection .groupBigBox > div{padding:12px 12px}
  .faqSection .groupBigBox h3{padding-left:26px}
  .faqSection .groupBigBox p{padding-left:26px}
}
.faqSection .groupBigBox{margin-top:18px}
.faqSection .groupBigBox > div{background:#fff; border:1px solid #e9ecef; border-left:4px solid var(--color-primary); border-radius:12px; padding:14px 16px; box-shadow:0 6px 16px rgba(0,0,0,.05); transition:box-shadow .25s ease, transform .2s ease}
.faqSection .groupBigBox > div + div{margin-top:12px}
.faqSection .groupBigBox > div:hover{box-shadow:0 12px 28px rgba(0,0,0,.08); transform:translateY(-1px)}
.faqSection .groupBigBox h3{margin:0 0 6px 0; font-size:18px; font-weight:700; color:var(--text-primary); line-height:1.35; position:relative; padding-left:28px}
.faqSection .groupBigBox h3::before{content:"Q"; position:absolute; left:0; top:0; height:22px; min-width:22px; padding:0 6px; border-radius:6px; background:rgba(8,96,226,.1); color:var(--color-primary); font-size:12px; font-weight:800; display:inline-flex; align-items:center; justify-content:center}
.faqSection .groupBigBox p{margin:0; color:#444; line-height:1.7; position:relative; padding-left:28px}
.faqSection .groupBigBox p::before{content:"A"; position:absolute; left:0; top:2px; height:22px; min-width:22px; padding:0 6px; border-radius:6px; background:#f1f4f9; color:#5b6270; font-size:12px; font-weight:800; display:inline-flex; align-items:center; justify-content:center}
@media (max-width:767px){
  .faqSection .groupBigBox > div{padding:12px 12px}
  .faqSection .groupBigBox h3{padding-left:26px}
  .faqSection .groupBigBox p{padding-left:26px}
}
.accordion {
    max-width: 1200px;
    position: relative;
    z-index: 1;
}
.accordion .accordion-item {
border-bottom: 1px solid #e5e5e5;
}
.accordion .accordion-item button[aria-expanded=true] {
border-bottom: 1px solid var(--color-white);
}
.accordion button {
    position: relative;
    display: block;
    text-align: left;
    width: 100%;
    padding: 1em 0;
    color: var(--color-white);
    font-size: 1.15rem;
    font-weight: 400;
    border: none;
    background: none;
    outline: none;
    padding-right: 20px;
}
.accordion button:hover, .accordion button:focus {
    cursor: pointer;
    color: var(--color-white);
}
.accordion button:hover::after, .accordion button:focus::after {
    cursor: pointer;
    color: var(--color-white);
    border: 1px solid var(--color-white);
}
.accordion button .accordion-title {
    color: var(--color-white);
    font-size: var(--20px);
    padding: 4px 0;
    font-weight: 400;
}
.accordion button .icon {
    display: inline-block;
    position: absolute;
    top: 18px;
    right: 0;
    width: 22px;
    height: 22px;
    border: 1px solid;
    border-radius: 22px;
    color: var(--color-white) !important;
}
.accordion button .icon::before {
    display: block;
    position: absolute;
    content: "";
    top: 9px;
    left: 5px;
    width: 10px;
    height: 2px;
    background: currentColor;
}
.accordion button .icon::after {
    display: block;
    position: absolute;
    content: "";
    top: 5px;
    left: 9px;
    width: 2px;
    height: 10px;
    background: currentColor;
}
.accordion button[aria-expanded=true] {
    color: var(--color-white);
}
.accordion button[aria-expanded=true] .icon::after {
    width: 0;
}
.accordion button[aria-expanded=true] + .accordion-content {
    opacity: 1;
    max-height: unset;
    transition: all 200ms linear;
    will-change: opacity, max-height;
}
.accordion .accordion-content {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 200ms linear, max-height 200ms linear;
    will-change: opacity, max-height;
}
.accordion .accordion-content p {
    font-size: 1rem;
    font-weight: 300;
    margin: 2em 0;
    color: var(--color-white) !important;
}
.accordion-content b{
    color: var(--color-white);
    font-weight: 600;
}
.testinomialSection{
    padding: 80px;
    display: flex;
    flex-direction: column;
    row-gap: 56px;
    justify-content: center;
    align-items: center;
}
.clientBento{
    display: grid;
    max-width: 1200px;
    padding: 28px 115px;
    gap: 30px;
}
.cBentoBox{
    padding: 34px;
    display: flex;
    align-items: center;
    column-gap: 40px;    
    /* background: linear-gradient(0.5turn, #FDE4D0 ,#F4E6DB); */
    border-radius: 20px;
    box-shadow: 0px 0px 42px 3px rgba(0,0,0,0.1);
}
.cBentoBox1{
    grid-column: 1 / 4;
    grid-row:  1 / 3;
}
.cBentoBox2{
    flex-direction: column;
    justify-content: center;
    row-gap: 40px;
    grid-column: 4 / 6;
    grid-row:  1 / 6;
    /* background: linear-gradient(0.5turn, #D0BCF0 ,#DBD1EB); */
}
.cBentoBox3{
    grid-column: 1 / 4;
    grid-row:  3 / 6;
}
.cAvatar{
    width: 177px;
    height: 177px;
    border-radius: 32px;
    overflow: hidden;
    border-width: 7px;
    border-style: solid;
    background-color: var(--color-white);
    border-color: #fff;
    box-shadow: 0px -5px 16px -3px rgba(8, 96, 226, 0.1), -4px 0px 15px -3px rgba(8, 96, 226, 0.1), 8px 4px 11px -3px rgba(8, 96, 226, 0.1);
}
.cAvatar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cDetails{
    display: flex;
    flex-direction: column;
    row-gap: 22px;
    flex: 1;
}
.cName h6{
    font-size: var(--30px);
    font-weight: 400;
}
.cBentoBox2 .cName h6{text-align: center;}
.cName p{
    margin: 0;
    font-size: var(--14px);
    color: var(--text-secondary);
    font-weight: 300;
    margin-top: -4px;
}
.cBentoBox2 .cName p{text-align: center;}
.cReview p{
    font-size: var(--16px);
    font-weight: 400;
    color: var(--text-secondary);
}
.cReview{
    display: flex;
    column-gap: 8px;
}
.cReview span{
    flex: 1;
}
.cReview span:last-child{
    display: flex;
    align-items: end;
}
.cReview svg path{
    fill: var(--color-primary);
}
.ctaSection{
    padding: 80px;
    background-color: var(--text-secondary);
    color: #fff;
    display: flex;
    flex-direction: column;
    row-gap: 56px;
    justify-content: center;
}
.ctaTitleDescription{
    display: flex;
    flex-direction: column;
    row-gap: 24px;
    align-items: center;
}
.subSectionTitle h3{
    font-size: var(--24px);
    text-align: center;
    font-weight: 300 !important;
    position: relative;
    z-index: 1;
    margin-top: -20px;
}
.ctaButtonsBox{
    display: flex;
    justify-content: center;
    column-gap: 40px;
}
.ctaButtonsBox span{
    border-radius: 8px;
    height: 56px;
    padding: 0 30px;
}
.ctaButtonsBox .primaryButton{background-color: #fff; color: #222C3D;}
.ctaButtonsBox .ghostButton{background-color: transparent; border: 1px solid #fff; color: #fff;}
.primaryButton:hover, .ghostButton:hover{
    text-decoration: none;
    color: #222C3D;
    background-color: #fff;
    cursor: pointer;
    font-weight: 500;
    box-shadow: 0px 8px 29px 0px #00000059;
}
.gridBox .ghostButton:hover{
    background-color: #222C3D;
    color: #fff;
    font-weight: 500;
}
.gridBox .ghostButton:hover svg{
    stroke: #fff;
}
.sectionTitle::after{
    content: '';
    height: 4px;
    width: 180px;
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(60deg,rgb(255 255 255) 0%, rgb(8 96 226) 50%, rgb(255 255 255) 100%);
}
.ctaSection .sectionTitle::after{
    display: none;
}
#wavePicture {
    width: 100%;
    position: absolute;
    background-image: url(/assets/img/wavedesignBg.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    top: 0px;
    height: 669px;
    left: 0;
}
.advacntagesSection #wavePicture{
    top: -60px;
}
footer .wavesContainer{
    position: absolute;
    bottom: 0;
    width: 100%;
    opacity: 0.15;
}
footer .wavesContainer .waves {
    position:relative;
    width: 100%;
    height:15vh;
    margin-bottom:-7px; /*Fix for safari gap*/
    min-height:100px;
    max-height:150px;
  }
  
  footer .wavesContainer .waves .content {
    position:relative;
    height:20vh;
    text-align:center;
    background-color: white;
  }
  /* footer .wavesContainer path {
    fill: var(--color-secondary)
  } */
  /* Animation */

 .parallax > use {
    animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
  }
  .parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
  }
  .parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
  }
  .parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
  }
  .parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
  }
  @keyframes move-forever {
    0% {
     transform: translate3d(-90px,0,0);
    }
    100% { 
      transform: translate3d(85px,0,0);
    }
  }
.ftImgBox{
    position: relative;
    overflow: unset;
    border: none;
    width: auto;
    height: 550px;
}
.ftMainImg{
    height: 100%;
    width: 100%;
    /* border-radius: 20px; */
    position: absolute;
    display: block;
    left: 0;
    top: 40px;
    overflow: visible;
}
.ftLeftBox .overlayImage{
    position: absolute;
    width: 206px;
    height: 215px;
    left: 93px;
    bottom: 70px;
}
.ftRightBox .overlayImage{
    position: absolute;
    width: 206px;
    height: 215px;
    right: 127px;
    bottom: 80px;
}
.overlayImage img{
    width: 100%;
    height: 100%;
}
.animate-on-scroll{
    opacity: 0;
    transform: translateY(70px);
    transition: opacity var(--transDuration) ease-out, transform var(--transDuration) ease-out;
}
.animate-on-scroll.overlayImage{
    transform: translateY(30px);
  transition: opacity var(--transDuration-of-pop) ease-out, transform var(--transDuration-of-pop) ease-out;
}
.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
  }
  @keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.staggered-animate {
    animation: fadeIn 0.6s ease-out forwards;
    opacity: 0;
}

.staggered-animate:nth-child(1) {
    animation-delay: 0.1s;
}

.staggered-animate:nth-child(2) {
    animation-delay: 0.3s;
}

.staggered-animate:nth-child(3) {
    animation-delay: 0.5s;
}

.staggered-animate:nth-child(4) {
    animation-delay: 0.7s;
}
.staggered-animate:nth-child(5) {
    animation-delay: 0.9s;
}
.staggered-animate:nth-child(6) {
    animation-delay: 1s;
}
@media (min-width: 1920px) {
    .featImageSection::before,.featImageSection::after{
        width: 400px;
    }
}
.featImgBox{
    display: none;
}

/* Media queries */

@media (max-width: 1200px){
    .heroSubContainer{
        flex-direction: column;
        padding-top: 70px;
        max-width: 100% !important;
    }
    .heroTextContent{
        align-items: center;
        row-gap: 24px;
    }
    .titleSubtitle {
        align-items: center;
        row-gap: 0;
    }
    .herotitle{
        font-size: var(--36px) !important;
        line-height: 40px;
        text-align: center;
    }
    .heroDescription{
        font-size: var(--16px);
        text-align: center;
    }
    .ctaButtons{
        justify-content: center;
    }
    .ratingSection{
        margin-top: 220px;
    }
    .advacntagesSection #wavePicture{
        top: 0px;
        height: 100%;
    }
    .featImgBox{
        max-width: 90vw;
    }
    .ftImgBox img{
        object-fit: contain;
    }  
    .featImageSection::before, .allFeatures::before,.featImageSection::after, .allFeatures::after{
        width: 100px;
    }
    .faqSection{
        padding: 60px;
    }
    .accordion{
        max-width: 90vw;
    }
    .bentoGrid{
        max-width: 90vw; 
        padding: 0 0px;
    }
    .solCardsContainer{
        max-width: 90vw;
        flex-direction: column !important;
        row-gap: 30px !important;
    }
    .solCardsBox .solIconBox {
        width: 40px;
        height: 40px;
    }
    .solTitle h3 {
        font-size: var(--18px);
    }
    .solDescription p{
        font-size: var(--12px);
    }
    .gridBox1, .gridBox2,.gridBox3,.gridBox4,.gridBox5,.gridBox6{
        grid-row: auto;
    }
    .gridBox1,.gridBox3,.gridBox5{
        grid-column: 1/2;
    }
    .gridBox2,.gridBox4,.gridBox6{
        grid-column: 2/2;
    }
    .cBentoBox1,.cBentoBox2,.cBentoBox3{
        grid-column: 1;
        grid-row: auto;
    }
    .cBentoBox2{
        flex-direction: row;
        column-gap: 40px;
    }
    .iconAndTitleBox{
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .ftTitle h3{
        font-size: var(--24px);
    }
    .ftPoints .ftPointsBox h4{
        font-size: var(--16px);
    }
    .ftPoints .ftPointsBox span:nth-child(2){
        font-size: var(--12px);
    }
}


@media (max-width: 1200px) {
    .ratingContainer{
        max-width: 100%;
        padding: 0 30px;
    }
}

@media (max-width: 1024px) {
    .ratingSection{
        padding: 0 40px;
    }
    .ratingContainer{
        max-width: 100%;
        padding: 0 20px;
    }
    .ratingBrandLogoBox{
        width: 110px;
    }
    .Stars{
        font-size: var(--20px);
    }
    .Stars .rateNum{
        font-size: var(--14px);
    }
}

@media (max-width: 600px) {
    .ratingSection{
        padding: 0 15px;
    }
    .ratingContainer{
        padding: 15px 5px;
        gap: 8px;
    }
    .ratingBox{
        padding: 3px;
        flex: 1 1 30%;
        min-width: 80px;
    }
    .Stars{
        font-size: var(--16px);
    }
    .Stars .rateNum{
        font-size: var(--12px);
    }
    .ratingBrandLogoBox{
        width: 80px;
        max-height: 28px;
    }
}

@media (max-width: 360px) {
    .ratingSection{
        padding: 0 10px;
    }
    .ratingContainer{
        padding: 15px 3px;
        gap: 5px;
    }
    .ratingBox{
        padding: 2px;
        flex: 1 1 30%;
        min-width: 70px;
    }
    .Stars{
        font-size: var(--14px);
    }
    .Stars .rateNum{
        font-size: var(--10px);
    }
    .ratingBrandLogoBox{
        width: 65px;
        max-height: 25px;
    }
    .Stars::before {
        letter-spacing: 0.5px;
    }
}

@media (max-width: 768px) {

    .heroSubContainer{
        padding-bottom: 0px;
        padding-top: 100px;
    }
    .heroContainer{
        padding: 60px 16px;
    }
    .heroImageBox{
        width: 90%;
        height: auto;
    }
    .heroImageBox img{
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
    }
    .ratingSection{
        padding: 0 20px;
        margin-top: 20px;
    }
    .ratingContainer{
        height: auto;
        padding: 20px 10px;
        flex-direction: row;
        justify-content: space-between;
        gap: 15px;
    }
    .ratingBox{
        flex: 1 1 auto;
        min-width: 0;
        padding: 5px;
    }
    .Stars{
        font-size: var(--18px);
    }
    .Stars .rateNum{
        font-size: var(--13px);
    }
    .ratingBrandLogoBox{
        width: 100px;
        height: auto;
        max-height: 35px;
    }
    .advantagesContainer{
        flex-direction: column;
        align-items: center;
        row-gap: 30px;
    }
    .featImageSection::before, .allFeatures::before,.featImageSection::after, .allFeatures::after{
        width: 60px !important;
    }
    .featImgBox{
        padding-top: 30px;
    }
    .ftImgBox{
        width: 90vw;
        /* height: auto; */
    }
    .faqSection{
        padding: 60px;
    }
    .waves {
      height:40px;
      min-height:40px;
    }
    .gridBox1, .gridBox2,.gridBox3,.gridBox4,.gridBox5,.gridBox6,.cBentoBox1,.cBentoBox2,.cBentoBox3{
        grid-column: span 1;
        grid-row: auto;
    }
    .clientBento{
        max-width: 90vw;
        padding: 30px 72px;
    }
    .cBentoBox1,.cBentoBox2,.cBentoBox3{
        grid-column: 1;
        grid-row: auto;
        flex-direction: column !important;
        row-gap: 40px;
    }
    .cName h6, .cName p{
        text-align: center;
    }
    .sectionTitle h2{
        font-size: var(--28px);
    }
    .gridBox h4 {
        font-size: var(--18px);
    }
    .ftLeftBox, .ftRightBox{
        flex-direction: column;
        max-width: 90vw;
        row-gap: 50px;

    }
    .ftRightBox{
        flex-flow: column-reverse;
    }
    .featuresSection .ftImgBox, .featuresSection .ftDetailsCotainer{
        max-width: 100% !important;
    }
    .Stars .rateNum{
        font-size: var(--12px);
    }
    .ratingSection.solutionsPageRatings{
        margin: 0;
    }
    .ftMainImg{
        position: relative;
    }
  }
@media (max-width: 430px){
    .heroImageBox{
        width: 90%;
        height: auto;
    }
    .featuresHeroSection .ctaButtons, .solutionsHeroSection .ctaButtons {
        flex-direction: column;
        padding: 0 30px;
        row-gap: 16px;
    }
    .featuresHeroSection .ctaButtons .primaryButton, .solutionsHeroSection .ctaButtons .primaryButton, .featuresHeroSection .ctaButtons .ghostButton, .solutionsHeroSection .ctaButtons .ghostButton{
        width: 100%;
    }
    .ratingSection{
        padding: 0 var(--10px);
        margin-top: 15px;
    }
    .ratingContainer{
        padding: 20px 5px !important;
        height: auto;
        flex-direction: row;
        justify-content: space-around;
        gap: 10px;
        flex-wrap: wrap;
    }
    .ratingBox{
        flex: 1 1 auto;
        min-width: 0;
        padding: 5px;
        max-width: 33.33%;
    }
    .ratingBrandLogoBox{
        width: 70px;
        height: auto;
        max-height: 30px;
    }
    .ratingBrandLogoBox img{
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    .Stars{
        font-size: var(--14px);
    }
    .Stars .rateNum{
        font-size: var(--11px);
    }
    .Stars::before {
        letter-spacing: 1px;
    }
    .advacntagesSection{
        margin-top: 10px;
    }
    .featuresSection, .solutionsSections{
        padding: 40px 10px !important;
        row-gap: var(--24px);
    }
    .allFeatures{
        padding: 40px 10px;
    }
    .bentoGrid{
        padding: 0;
        z-index: 2;
    }
    .sectionTitle h2{
        padding: 0 10px !important;
        font-size: var(--26px) !important;
        font-weight: 600 !important;
    }
    .solCardsContainer{
        flex-direction: column;
        row-gap: 30px;
    }
    .solCardsBox{
        width: 80vw !important;
        transform: unset;
    }
    .solCardbox2{
        height: 234px;
    }
    .faqSection{
        padding: 40px 10px;
    }
    .testinomialSection{
        padding: 40px 20px;
    }
    .clientBento{
        padding: 30px 0;
    }
    .ctaButtonsBox{
        flex-direction: column;
        row-gap: 16px;
    }
    .ctaButtonsBox a{
        width: 100% !important;
    }
    .subSectionTitle h3{
        font-size: var(--16px);
    }
    .ftLeftBox, .ftRightBox {
        row-gap: var(--20px);
    }
    .ftDetailsCotainer{
        padding: 0;
    }
    .ratingSection{
        padding: 0 var(--10px);
    }
    .herotitle{
        font-size: var(--32px) !important;
    }
    .ftPoints .ftPointsBox span:nth-child(2){
        row-gap: 0;
    }
    .ftPoints .ftPointsBox h4{
        font-weight: 500;
    }
    .ftPoints .iconBox{
        width: var(--16px);
        height: var(--16px);
    }
}