.hero:not(.landing) .heroimage .action {
    justify-content: center;
    background: url('../images/caferestaurant/heroimage.webp') no-repeat center;
    background-size: cover;
    mix-blend-mode: normal;
    border-radius: 24px;
}

.no-webp .hero:not(.landing) .heroimage .action {
    justify-content: center;
    background: url('../images/caferestaurant/heroimage.png') no-repeat center;
    background-size: cover;
    mix-blend-mode: normal;
    border-radius: 24px;
}

.hero:not(.landing) .heroimage .action::before {
    background: linear-gradient(0deg, rgba(146, 236, 244, 0) 15%, rgba(127, 179, 245, 0) 70%, rgba(185, 116, 223, .3) 110%), linear-gradient(90deg, rgba(146, 236, 244, .5) 15%, rgba(127, 179, 245, .5) 80%, rgba(185, 116, 223, .5) 105%), linear-gradient(180deg, var(--primaryblue) 0, var(--primaryblue) 100%);
    opacity: 0.2;
    border-radius: 16px;
    transform: matrix(-1, 0, 0, 1, 0, 0);
}

.hero:not(.landing) .heroimage .action::after {
    background: linear-gradient(180deg, rgba(46, 115, 206, 0.62) 0%, #2E73CE 100%);
    border-radius: 24px;
}

.hero:not(.landing) .heroimage .action .caferestaurant-icon-herostripatterns {
    opacity: 0.8;
}

.hero:not(.landing) .heroimage .action .caferestaurant-icon-heropattern.p2 {
    transform: rotate(180deg);
}

.hero:not(.landing) .heroimage .action h1 {
    text-align: right;
    color: #FFFFFF;
}
.hero:not(.landing) .heroimage .action h1 .deskTopHeaderTitle{
    display: block;
    visibility: visible;
}

.hero:not(.landing) .heroimage .action h1 .mobileHeaderTitle{
    display: none;
    visibility: hidden;
}

.hero:not(.landing) .heroimage a.btn {
    background: linear-gradient(125.18deg, #68EAC6 21.21%, #49D4AE 70.02%);
    border-radius: 16px;
    text-align: center;
    color: var(--cloud);
}

.feature .featurebox {
    background: #F4F6FA;
    border-radius: 24px;
}

.feature .featurebox .title {
    text-align: center;
}

.feature .featurebox .title b {
    color: #2E73CE;
}

.feature .featurebox ul {
    justify-content: space-between;
}

.feature .featurebox ul li {
    text-align: center;
}

.feature .featurebox ul li .icon {
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    background: linear-gradient(#F4F6FA, #F4F6FA) content-box, linear-gradient(145.42deg, #2E73CE -34.27%, rgba(46, 115, 206, 0) 52.67%, #2E73CE 136.61%) border-box;
}

.feature .featurebox ul li span {
    background: rgba(46, 115, 206, 0.1);
    text-align: center;
    border-radius: 8px;
}

.feature .featurebox ul li.blue span {
    background: rgba(46, 115, 206, 0.1);
    color: #2E73CE;
}

.feature .featurebox ul li.green span {
    background: rgba(73, 212, 174, 0.1);
    color: #49D4AE;
}

.feature .featurebox ul li.yellow span {
    background: rgba(255, 185, 49, 0.1);
    color: #FFB931;
}

.feature .featurebox::before {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23B9C6D8FF' stroke-width='1' stroke-dasharray='5%2c 15' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e");
}

.feature .featurebox::after {
    background-image: linear-gradient(90deg, #F4F6FA 0%, rgba(244, 246, 250, 0) 50%, #F4F6FA 100%);
}

.path ul li img {
    border-radius: 24px;
}

.path ul li .title {
    text-align: right;
}

.path ul li.blue .picture::before {
    background: #2E73CE;
    border-radius: 228.157px 38px 228.157px 249.5px;
}

.path ul li.blue .title b {
    color: #2E73CE;
}

.path ul li.green .picture::before {
    background: #49D4AE;
    border-radius: 228.157px 38px 228.157px 249.5px;
}

.path ul li.green .picture img {
    transform: rotate(3.35deg);
}

.path ul li.green .title b {
    color: #49D4AE;
}

.path ul li.yellow .picture::before {
    background: #FFB931;
    border-radius: 228.157px 38px 228.157px 249.5px;
}

.path ul li.yellow .picture img {
    transform: rotate(3.35deg);
}

.path ul li.yellow .title b {
    color: #FFB931;
}

.path ul li.lastblue .picture::before {
    background: #2E73CE;
    border-radius: 228.157px 38px 228.157px 249.5px;
}

.path ul li.lastblue .title b {
    color: #2E73CE;
}

.featurepercentage ul {
    justify-content: space-between;
}

.featurepercentage ul li {
    justify-content: center;
    align-items: center;
}

.featurepercentage ul li .percentage span,
.featurepercentage ul li .percentage b {
    background-color: #0f1f33;
    background: linear-gradient(180deg, #49D4AE 0%, #2E73CE 100%);
    background-size: 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
}

.featurepercentage ul li h3, .featurepercentage ul li p {
    text-align: center;
    color: #7D8FA9;
}


.featuresinfo::before {
    background: linear-gradient(90deg, rgba(250, 251, 254, 0.5) 0%, #FAFBFE 100%), url(../images/icons/caferestaurant/spritesheet/pattern.webp);
}

.featuresinfo::after {
    background: linear-gradient(270deg, rgba(250, 251, 254, 0.5) 0%, #FAFBFE 100%), url(../images/icons/caferestaurant/spritesheet/pattern.webp);
}

.no-webp .featuresinfo::before {
    background: linear-gradient(90deg, rgba(250, 251, 254, 0.5) 0%, #FAFBFE 100%), url(../images/icons/caferestaurant/spritesheet/pattern.png);
}

.no-webp .featuresinfo::after {
    background: linear-gradient(270deg, rgba(250, 251, 254, 0.5) 0%, #FAFBFE 100%), url(../images/icons/caferestaurant/spritesheet/pattern.png);
}

.featuresinfo .title {
    text-align: center;
}

.featuresinfo .title b {
    color: #2E73CE;
}

.featuresinfo .sub-title {
    text-align: center;
    color: var(--midgraytext);
    font-weight: 700;
    font-size: 18px;
    min-height: 74px;
    margin-bottom: 102px;
    display: block;
    line-height: 62px;
    margin-bottom: 102px;
}

/* .featuresinfo .data {
    align-items: center;
} */


.featuresinfo .data .list ul {
    justify-content: space-between;
}

.featuresinfo .data .list li .icon {
    justify-content: center;
    align-items: center;
}

.featuresinfo .data .list li h2,.featuresinfo .data .list li p.h2 {
    text-align: center;
}

.featuresinfo .data .list li h2::before, .featuresinfo .data .list li p.h2::before {
    background: #2E73CE;
}

.featuresinfo .data .list li h3, .featuresinfo .data .list li p.h3 {
    text-align: center;
    color: #7D8FA9;
}

.featuresinfo .data .list li .icon.blue {
    background: linear-gradient(0deg, #2E73CE 0%, #60A1F5 100%);
}

.featuresinfo .data .list li .icon.green {
    background: linear-gradient(0deg, #49D4AE 0%, #82F7D7 100%);
}

.featuresinfo .data .list li .icon.purple {
    background: linear-gradient(0deg, #7B61FF 0%, #AC9BFF 100%);
}

.featuresinfo .data .list li .icon.yellow {
    background: linear-gradient(0deg, #FFB931 0%, #FFDC97 100%);
}
.featuresinfo .data .list li .icon.snappfood-color{
    background: linear-gradient(0deg, #ef4f86 0%, #ff87b9 100%);
}
.featuresinfo .data .list li .icon.red {
    background: linear-gradient(0deg, #EF476F 0%, #FF87A4 100%);
}

.featuresinfo .data .list li .icon.lightblue {
    background: linear-gradient(0deg, #98E2FF 0%, #B0E9FF 100%);
}

.featuresinfo .data .preview {
    justify-content: center;
}

.featuresinfo .data .preview .avatar1 {
    border-radius: 100%;
    border: 8px solid rgba(46, 115, 206, 0.1);
}

.featuresinfo .data .preview .avatar2 {
    border-radius: 100%;
    border: 8px solid rgba(46, 115, 206, 0.1);
}
.featuresinfo a.btn{
    position: relative;
    display: block;
    width: 300px;
    height: 70px;
    max-width: 100%;
    font-weight: 700;
    font-size: 24px;
    line-height: 70px;
    margin: 0 auto 25px;
    color: #fff;
    background: linear-gradient(126.02deg, #64eac5 18.38%, #49d4ae 71.05%);
    border-radius: 8px;
    text-align: center;
    z-index: 1;
}

.section {
    background: linear-gradient(180deg, rgba(185, 198, 216, 0.12) 0%, rgba(185, 198, 216, 0) 100%);
    border-radius: 100px 100px 0px 0px;
}

.section .clients .icon {
    background: #FFFFFF;
    box-shadow: 0px 20px 60px rgba(185, 198, 216, 0.2);
    border-radius: 100%;
    border: 1px solid transparent;
    background: linear-gradient(#FFFFFF, #FFFFFF) content-box, linear-gradient(180deg, rgba(185, 198, 216, 0.3) 0%, rgba(185, 198, 216, 0) 100%) border-box;
}

.section .clients .clientstitle {
    color: var(--darkbluetext);
}

.section .clients .clientstitle b {
    color: var(--primaryblue);
}

.section .clients .clientlist .item div {
    text-align: center;
}

.section .clients .clientlist .item div,
.section .clients .clientlist .item::before,
.section .clients .clientlist .item::after {
    border-radius: 24px;
    border: 1px solid transparent;
    background: linear-gradient(var(--cloud), var(--cloud)) content-box, linear-gradient(138.69deg, rgba(185, 198, 216, 0.3) 5.69%, rgba(185, 198, 216, 0) 55.33%, rgba(185, 198, 216, 0.2) 97.19%) border-box;
}

.section .customers, .customers.customersSatisfaction {
    background: linear-gradient(0deg, rgba(146, 236, 244, 0) 15%, rgba(127, 179, 245, 0) 70%, rgba(185, 116, 223, 0.3) 110%), linear-gradient(90deg, rgba(146, 236, 244, 0.5) 15%, rgba(127, 179, 245, 0.5) 80%, rgba(185, 116, 223, 0.5) 105%), linear-gradient(180deg, var(--primaryblue) 0%, var(--primaryblue) 100%);
    border-radius: 100px 100px 100px 0;
    padding: 55px 10px;
    margin-top: 30px;
}

.section .customers .customerstitle, .customers.customersSatisfaction .customerstitle {
    color: var(--cloud);
    text-align: center;
    font-weight: 900;
    font-size: 40px;
    display: block;
    text-align: center;
    line-height: 62px;
}

.section .customers .customerslist .item {
    opacity: 0.3;
    transition: all 0.5s ease;
}

.section .customers .customerslist .item>div {
    background: #FFFFFF;
    border-radius: 24px;
    text-align: center;
    transition: all 0.5s ease;
}

.section .customers .customerslist .item::before {
    border-radius: 24px;
    background: #FFFFFF;
    opacity: 0;
    transition: all 0.5s ease;
}

.section .customers .customerslist .owl-item.center .item {
    opacity: 1;
}

.section .customers .customerslist .owl-item.center+.owl-item .item,
.section .customers .customerslist .owl-item.activebefore .item {
    opacity: 0.7;
}

.section .customers .customerslist .owl-item.center .item::before {
    opacity: 0.3;
}

.section .customers .customerslist .item .name {
    color: var(--primaryblue);
}

.section .customers .customerslist .item .position {
    color: var(--primaryblue);
}

.section .customers .customerslist .item p {
    color: var(--darkbluetext);
}

.section .customers .customerslist .item img {
    border-radius: 50px 50px 50px 32px;
    box-shadow: 0 -8.4px rgba(255, 255, 255, 0.05);
}

.section .customers .owl-item:nth-child(odd) img {
    border-radius: 34px 50px 47px 47px;
}

.section .customers .owl-item:nth-child(3n+0) img {
    border-radius: 50px 50px 34px 47px;
}

.section .customers>a {
    background: linear-gradient(125.18deg, var(--cloud) 21.21%, var(--cloud) 70.02%);
    box-shadow: 0px 6px 0px var(--primaryblue);
    border-radius: 16px;
    color: var(--darkbluetext);
    text-align: center;
    transition: all 0.5s ease;
}

.section .customers>a:hover {
    background: var(--primaryblue);
    color: #FFFFFF;
}

.section .customers::before, .customers.customersSatisfaction::before {
    background: var(--lightgraytext);
    opacity: 0.05;
    border-radius: 50px;
    transform: rotate(-15deg) skew(-15deg);
}

.section .customers::after, .customers.customersSatisfaction::after {
    background: var(--cloud);
    opacity: 0.05;
    border-radius: 50px;
    transform: rotate(-15deg) skew(-15deg);
}

.section .btn {
    display: block;
    margin: 0 auto;
    width: 320px;
    height: 78px;
    background: linear-gradient(125.18deg, #68EAC6 21.21%, #49D4AE 70.02%);
    border-radius: 16px;
    font-weight: bold;
    font-size: 24px;
    line-height: 78px;
    text-align: center;
    color: var(--cloud);
    margin-top: 58px;
}


.panelbox>.actions a {
    color: var(--primaryblue);
}

.panelbox>.actions a.next i {
    transform: rotate(180deg);
}

.panels .panel>div:not(.fav) {
    position: relative;
    z-index: 2;
    border-radius: 24px;
    border: 1px solid transparent;
    background: linear-gradient(#fff, #fff) content-box, linear-gradient(114deg, var(--midgraytext) 5.69%, rgba(185, 198, 216, 0) 55.33%, rgba(185, 198, 216, 0.2) 97.19%) border-box;
    text-align: center;
}

.panels .panel>div .inside::before {
    background: rgba(125, 143, 169, 0.2);
    filter: blur(50px);
    border-radius: 100%;
}

.panels .panel::before {
    background: linear-gradient(var(--midgraytext), rgba(255, 255, 255, 0));
    border-radius: 24px;
}

.panels .panel div>i:not(.bg)::before {
    background: rgba(125, 143, 169, 0.1);
    border-radius: 5px;
}

.panels .panel .title,
.panelbox .panels .panel.gray .sub-title {
    color: var(--midgraytext);
}

.panels .panel ul li {
    color: var(--darkbluetext);
}

.panels .panel ul li span:first-child {
    text-align: right;
}

.panels .panel div>a {
    color: var(--primaryblue);
    transition: all 0.5s ease;
}

.panels .panel div>a:hover {
    color: var(--secondarygreen);
}

.panels .panel div>a i {
    transition: all 0.5s ease;
}

.panels .panel.green::before {
    background: linear-gradient(var(--secondarygreen), rgba(255, 255, 255, 0));
}

.panelbox .panels .panel.green .title,.panelbox .panels .panel.green .price span, .panelbox .panels .panel.green .price span a,.panelbox .panels .panel.green .price span b,
.panelinfo .panels .panel.green .title span,.panelbox .panels .panel.green .sub-title,.panelbox .panels .panel.green .sub-title span {
    color: var(--secondarygreen);
}

.panels .panel.green>div::before {
    background: rgba(73, 212, 174, 0.1);
}

.panels .panel.green>div:not(.fav) {
    background: linear-gradient(#fff, #fff) content-box, linear-gradient(114deg, rgba(73, 212, 174, 0.2) 2.14%, rgba(185, 198, 216, 0) 53.69%, rgba(73, 212, 174, 0.14) 97.17%) border-box;
}

.panels .panel.blue::before {
    background: linear-gradient(var(--primaryblue), rgba(255, 255, 255, 0));
}

.panelbox .panels .panel.blue .title,.panelbox .panels .panel.blue .price span, .panelbox .panels .panel.blue .price span a,.panelbox .panels .panel.blue .price span b,
.panelinfo .panels .panel.blue .title span,.panelbox .panels .panel.blue .sub-title,.panelbox .panels .panel.blue .sub-title span {
    color: var(--primaryblue);
}

.panels .panel.blue>div::before {
    background: rgba(46, 115, 206, 0.1);
}

.panels .panel.blue>div:not(.fav) {
    background: linear-gradient(#fff, #fff) content-box, linear-gradient(114deg, #2E73CE 2.62%, rgba(185, 198, 216, 0) 54.84%, rgba(46, 115, 206, 0.12) 98.89%) border-box;
}
.panelbox .panels .panel.red::before {
    background: linear-gradient(var(--red), rgba(255, 255, 255, 0));
}
.panelbox .panels .panel.red .title,
.panelinfo .panels .panel.red .title span,.panelbox .panels .panel.red .sub-title, .panelbox .panels .panel.red .sub-title span{
    color: var(--red);
}
.panels .panel.red>div:not(.fav) {
    background: linear-gradient(#fff, #fff) content-box, linear-gradient(114deg, #EF476F 5.69%, rgba(185, 198, 216, 0) 55.33%, rgba(185, 198, 216, 0.2) 97.19%) border-box;
}
.panelbox .panels .panel.red>div::before {
    background: rgba(46, 115, 206, 0.1);
}
.panels .panel.yellow::before {
    background: linear-gradient(var(--orange), rgba(255, 255, 255, 0));
}

.panelbox .panels .panel.yellow .title,.panelbox .panels .panel.yellow .price span, .panelbox .panels .panel.yellow .price span a,.panelbox .panels .panel.yellow .price span b,
.panelinfo .panels .panel.yellow .title span,.panelbox .panels .panel.yellow .sub-title, .panelbox .panels .panel.yellow .sub-title span {
    color: var(--orange);
}

.panels .panel.yellow>div .inside::before {
    background: rgba(255, 185, 49, 0.1);
}

.panels .panel.yellow>div:not(.fav) {
    background: linear-gradient(#fff, #fff) content-box, linear-gradient(114deg, #F69E4B 5.69%, rgba(185, 198, 216, 0) 55.33%, rgba(185, 198, 216, 0.2) 97.19%) border-box;
}

.panels .panel.selected {
    box-shadow: 0px 20px 130px rgba(185, 198, 216, 0.3);
}

.panels .panel.selected .fav {
    color: var(--cloud);
}

.panels .panel.selected>div:not(.fav)::after {
    background: rgba(255, 185, 49, 0.07);
    filter: blur(75px);
    border-radius: 100%;
}

.panels .panel.selected .title::before {
    background: rgba(46, 115, 206, 0.1);
    filter: blur(75px);
    border-radius: 100%;
}

.panels .panel.selected .title::after {
    background: rgba(73, 212, 174, 0.1);
    filter: blur(100px);
    border-radius: 100%;
}

.faq {
    position: relative;
}

.faq::before {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100%' ry='100%' stroke='rgba(185, 198, 216, 0.5)' stroke-width='4' stroke-dasharray='1.5%2c 10' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
    border-radius: 100%;
}

.faq::after {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100%' ry='100%' stroke='rgba(185, 198, 216, 0.3)' stroke-width='1' stroke-dasharray='7' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    border-radius: 100%;
}

.faq .t1 {
    text-align: center;
    color: var(--darkbluetext);
}

.faq li {
    transition: max-height 0.5s ease;
}

.faq li.open .muprapage-icon-arrowdown {
    transform: rotate(180deg);
}

.faq li.open .caferestaurant-icon-arrowdown {
    transform: rotate(180deg);
}

.faq li .title {
    background: #FFFFFF;
    border: 1px solid #EBEFF6;
    box-shadow: 0px 4px 0px #EBEFF6;
    border-radius: 16px;
    color: var(--darkbluetext);
}

.faq li> p {
    background: #F3F5F8;
    border-radius: 16px;
    color: var(--darkbluetext);
}

.faq .t2 {
    text-align: center;
    color: var(--darkbluetext);
}
.customers{
    margin-bottom: 220px;
  }
  .audioTop {
    display: flex;
    background: #FFFFFF;
    box-shadow: 0px 2px 11px rgba(0, 0, 0, 0.17);
    width: 340px;
    max-width: 100%;
    height: 175px;
    border-radius: 12px;
    position: relative;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    margin: auto;
  }
  
  .audioTop .merchantLogo {
    width: 40%;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
  }
  
  .overlay {
    position: absolute;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0) 48.29%);
    width: 100%;
    height: 100%;
    left: 0;
  }
  
  .audioTop .merchantLogo img {
    width: 100%;
    height: auto;
  }
  
  .audioContainer {
    width: 60%;
    height: 100%;
    overflow: hidden;
    direction: ltr;
    padding: 10px;
  }
  
  .audioContainer .audio {
    width: 100%;
  }
  
  .audioContainer audio,
  .audioContainer canvas {
    max-width: unset;
  }
  
  .audioContainer .customerName {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-align: right;
    letter-spacing: -0.019em;
    color: rgba(0, 0, 0, 0.66);
    height: 25px;
  }
  
  .audioContainer .customerPosition {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    text-align: right;
    letter-spacing: 0.006em;
    color: #2E73CE;
    margin-bottom: 16px;
  }
  
  .audioContainer .buttons {
    height: 45px;
    display: flex;
    align-items: end;
    justify-content: space-between;
  
  }
  
  .audioContainer .audioBtn {
    padding: 15px 17px;
    cursor: pointer;
    display: inline-block;
    position: absolute;
    right: 112px;
    bottom: 10px;
    margin: auto;
    width: 49px;
    height: 49px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 1px 9px rgb(0 0 0 / 31%);
    z-index: 2;
  }
  .audioBtn i.caferestaurant-icon {
    width: 20px;
  }
  
  .audioContainer .volumeSlider {
    width: 200px;
  }
  
  .audioContainer .playbackRate {
    cursor: pointer;
    width: 39px;
    height: 23px;
    background: #D9D9D9;
    border-radius: 10px;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    text-align: center;
    letter-spacing: 0.121em;
    font-family: 'Yekan FaNum';
    color: #000000;
  }
  
  .timeRemaining {
    font-family: 'Yekan FaNum';
    font-size: 16px;
    line-height: 150%;
    text-align: center;
    letter-spacing: 0.006em;
    color: #000000;
    margin-right: 30px;
  }
  
  .audioContainer .buttons .audioBtn .icon-pause,
  .audioContainer .buttons .muteBtn .icon-volume-mute {
    display: none;
  }
  
  .audioContainer .buttons .audioBtn.playing .icon-play,
  .audioContainer .buttons .muteBtn.muted .icon-volume {
    display: none;
  }
  
  .audioContainer .buttons .audioBtn.playing .icon-pause,
  .audioContainer .buttons .muteBtn.muted .icon-volume-mute {
    display: inline-block;
  }
  
  .audioContainer .buttons .audioBtn.playing{
    padding: 16px 17px;
  }