/*Writen by Cheah Siew Kwan (Inspiren)*/

/*Font face*/
@font-face {
    font-family: Poppins;
    font-weight: 300;
    src: url('./fonts/Poppins-Light.ttf')format("truetype");
}

@font-face {
    font-family: Poppins;
    font-weight: 400;
    src: url('./fonts/Poppins-Regular.ttf')format("truetype");
}

@font-face {
    font-family: Poppins;
    font-weight: 500;
    src: url('./fonts/Poppins-Medium.ttf')format("truetype");
}

@font-face {
    font-family: Poppins;
    font-weight: 600;
    src: url('./fonts/Poppins-SemiBold.ttf')format("truetype");
}

@font-face {
    font-family: Poppins;
    font-weight: 700;
    src: url('./fonts/Poppins-Bold.ttf')format("truetype");
}


/*grow Effect*/
.grow-effect figure>* {
    overflow: hidden;
}

.grow-effect img {
    -moz-transition: -moz-transform 0.5s;
    -o-transition: -o-transform 0.5s;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
}

.grow-effect:hover img {
    /*-moz-transition: -moz-transform 1s;*/
    /*-o-transition: -o-transform 1s;*/
    /*-webkit-transition: -webkit-transform 1s;*/
    /*transition: transform 1s;*/
    transform: scale(1.05);
}

/***********Side Contact New Xiao Chen****************/
a.floating-button {
    position: fixed;
    width: 50px;
    height: 50px;
    line-height: 50px;
    bottom: 240px;
    right: 30px;
    font-size: 20px;
    background-color: rgba(37, 211, 102, 1);
    color: #FFF !important;
    border-radius: 50px;
    text-align: center;
    z-index: 1000;
    animation: pulsess 3s infinite;
    display: flex;
    justify-content: center;
    align-items: center;
}

a.floating-button_phone {
    bottom: 160px;
    background-color: rgba(220, 16, 16, 1);
}

a.floating-button_mail {
    bottom: 80px;
    background-color: rgba(0, 114, 198, 1);
}

a.floating-button_fb {
    bottom: 320px;
    background-color: rgba(53, 120, 229, 1);
}

a.floating-button:hover {
    color: #fff;
    background-color: rgba(37, 211, 102, .45);
    animation-play-state: paused;
}

a.floating-button_phone:hover {
    background-color: rgba(220, 16, 16, .45);
}

a.floating-button_mail:hover {
    background-color: rgba(0, 114, 198, .45);
}

a.floating-button_fb:hover {
    background-color: rgba(53, 120, 229, 0.45);
}

@keyframes pulsess {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, .3);
    }

    30% {
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
    }

    50% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }

    80% {
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

@media only screen and (max-width: 767px) {
    #side-contact {
        padding: 15px;
        background: #fff;
        display: flex;
        flex-direction: row;
        justify-content: center;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 9999999999;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }

    #side-contact a.floating-button {
        position: initial;
        display: block;
        margin: 0 15px;
        width: 45px;
        height: 45px;
        /*line-height: 35px;*/
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        /*font-size: 20px;*/
    }

    /*this is testing using javascript*/
    #side-contact.initial {
        /*position:unset;*/
        bottom: -100%;
    }
}

@media only screen and (max-width: 767px) {
    #footer{padding-bottom: 75px}
}

html,
body {
    scroll-behavior: smooth;
}


/*Overall*/
html {
    position: relative;
    height: 100%;
    overflow-x: hidden;
}


@media only screen and (max-width: 767px) {

    body {
        position: relative;
        /*height:100%;*/
        overflow-x: hidden;
    }
}

/*show hide desktop or mobile*/
.desktop-view {
    display: block;
}

.mobile-view {
    display: none !important;
}

@media only screen and (max-width: 767px) {
    .desktop-view {
        display: none !important;
    }

    .mobile-view {
        display: block !important;
    }
}

/*variable for website font, container spacing etc*/
:root {
  --fontFamily: Poppins, sans-serif !important;
}

body * {
    line-height: 1.3;
    word-wrap: break-word;
}

/*p,a,h1,h2,h3,h4,h5,h6,li,button,input,select,textarea,label,span{
       font-family: helvatica, sans-serif !important;
}*/

h1,h2,h3,h4,h5,h6{
    line-height: 1.2;
}

p{margin-bottom:20px}

a{
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

ul,
ol {
    list-style-position: outside;
    padding-left: 20px;
}

ul li,
ol li {
    margin-bottom: 13px;
    position: relative;
} 

/*header*/
#header-menu-1 ul{padding-left:0}

#header-menu-1 ul.menu li.menu-item{margin-bottom:0}

#header-menu-1 ul.menu > li.menu-item.current-menu-item a{font-weight: 700}

#header-menu-1 ul.menu > li.menu-item.current-menu-ancestor > a{font-weight: 700}

#header-menu-1 ul.menu ul.sub-menu > li.menu-item.current-menu-item a{font-weight: 700}

/*#header-menu-1 ul.menu li.menu-item .ct-toggle-dropdown-desktop{display:none}*/

#header [data-row*="middle"] .ct-container{
    padding-left:15px;
    padding-right: 15px;
}

/*#header [data-column="end"] [data-items="primary"] .ct-header-cta{
    border-left:1px solid #fff;
    padding-left:32.5px;
}*/

.ct-header-cta{position:relative;}

.ct-header-cta .ct-button {
    font-size: 16px;
    font-weight: 700;
    padding: 10px 20px;
    background: none !important;
    position: relative;
    overflow: hidden;
    z-index:1;
}

.ct-header-cta .ct-button:before {
    content: '';
    position: absolute;
    width: 200%;
    height: 100%;
    top: 0;
    left: 0;
    transform: translateX(0);
    background: linear-gradient(45deg, rgba(150,1,202,1) 0%, rgba(66,116,231,1) 50%, rgba(150,1,202,1) 100%) !important;
    opacity: 1;
    display: block !important;
    filter: none;
    transition: all .3s ease-in-out;
    z-index:-1;
}

.ct-header-cta .ct-button:hover:before{
    left:-100%;
}

/*vc_row more gaps*/
.row-2-col>.wpb_column:first-child {
    padding-right: 30px;
}

.row-2-col>.wpb_column:last-child {
    padding-left: 30px;
}

.row-2-col>.wpb_column:nth-child(2n+1) {
    padding-right: 30px;
}

.row-2-col>.wpb_column:nth-child(2n) {
    padding-left: 30px;
}

/*vc_row more gaps*/
@media only screen and (max-width: 767px) {
    .row-2-col>.wpb_column:first-child {
        padding-right: 0;
    }

    .row-2-col>.wpb_column:last-child {
        padding-left: 0;
    }

    .row-2-col>.wpb_column:nth-child(2n+1) {
        padding-right: 0;
    }

    .row-2-col>.wpb_column:nth-child(2n) {
        padding-left: 0;
    }
}


/*variable for spacing*/
:root {
  --webContainer: 1140px;
  --fullSideSpace: calc((100% - var(--webContainer))/2);
}

@media only screen and (max-width: 1199px) {
    :root {
      --webContainer: 940px;
    }
}

@media only screen and (max-width: 991px) {
    :root {
      --webContainer: 710px;
    }
}

/*full img row with vc_row more gaps(row-2-col no needed)*/
.full-left-img-row>.wpb_column:first-child,
.full-right-img-row>.wpb_column:first-child {
    padding-right: 45px;
}

.full-left-img-row>.wpb_column:last-child,
.full-right-img-row>.wpb_column:last-child {
    padding-left: 45px;
}

.full-left-img-row>.wpb_column:nth-child(2) {
    padding-right: var(--fullSideSpace);
}

.full-right-img-row>.wpb_column:nth-child(1) {
    padding-left: var(--fullSideSpace);
}

@media only screen and (max-width: 767px) {

    .full-right-img-row {
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }

    .full-right-img-row>.wpb_column,
    .full-left-img-row>.wpb_column {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/*column full row(use padding as spacing)*/
.column-full-row>.wpb_column:nth-child(1) {
    padding-left: var(--fullSideSpace);
    padding-right: 45px;
}

.column-full-row>.wpb_column:nth-child(2) {
    padding-right: var(--fullSideSpace);
    padding-left: 45px;
}

/*banner*/
.banner{}

/*style*/
.all-title{margin-bottom: 25px !important;}

.subheading{
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 20px !important;
    color:#0b1741;
}

.semi-bolded{font-weight: 600}

.white{color: #fff !important}

.wpb_text_column ul,
.wpb_text_column ol{
    margin-bottom: 20px;
}

.wpb_text_column strong,
.wpb_text_column b{
    font-weight: 600;
}

.rounded-img figure{
    border-radius: 15px;
    overflow: hidden;
}

.readmore {
    margin-bottom: 35px !important;
}

.readmore .vc_general.vc_btn3 {
    padding: 10px 20px;
    background-image: none !important;
    font-weight: 300;
    border-radius: 2em;
    font-size: 14px;
    text-transform: initial;
/*    background: #1f3b6d !important;*/
    color: #fff !important;
    line-height: 1.2;
    position: relative;
    overflow: hidden;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    z-index: 1;
    border:none !important;
}

.readmore button.vc_general.vc_btn3 {
    font-family: var(--fontFamily);
}

.readmore .vc_general.vc_btn3:hover {}


.readmore .vc_general.vc_btn3:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(0);
    background: #0b1741;
    opacity: 0;
    display: block !important;
    transition: inherit;
    z-index: -1;
    border-radius: inherit;
}

.readmore .vc_general.vc_btn3:hover:before{
    transform: translate(-50%,-50%) scale(1.1);
    opacity: 0.5;
}

/*home*/
.home-suitable{
    padding-top: 100px;
    padding-bottom:30px;
}

.home-suitable > .wpb_column{margin-bottom: 35px}

.home-suitable .setup-img{margin-bottom: 20px}

.home-suitable .setup-img img{
    aspect-ratio: 4.57 / 3.84;
    object-fit: cover;
    object-position: center;
}

.home-suitable .setup-title{margin-bottom: 20px !important}

.home-about-section{
    padding-top: 0 !important;
}

.vc_row.home-about{
    padding-top: 65px;
    padding-bottom: 100px;
    background-position: center bottom !important;
    -webkit-mask-image: url(./images/below-curve-long-height.svg);
    mask-image: url(./images/below-curve-long-height.svg);
    -webkit-mask-size: 100% auto;
    mask-size: 100% auto;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center bottom;
    mask-position: center bottom;
    background-attachment: fixed;
}

.home-about-section{}

.home-about-inner .wpb_text_column > .wpb_wrapper > *{
    font-weight: 400;
}

.home-about-counter-inner{}

.home-about-counter-inner > .wpb_column > .vc_column-inner{
    padding-top: 35px;
    height: 100%;
}

.home-about-counter-inner > .wpb_column:not(:last-child) > .vc_column-inner{
    border-right: 1px solid rgba(0,0,0,0.5);
}

.home-about-counter-inner .evc-counter{
    margin-bottom: 35px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
}

.home-about-counter-inner .evc-counter .evc-c-digit{
    color:#1e3c70;
    font-size: 60px;
    font-weight: 600;
    position: relative;
    line-height: 1.2;
    font-family: var(--fontFamily);
}

.home-about-counter-inner .evc-counter.counter-plus .evc-c-digit:after{
    content:'+';
    font-weight: 300;
}

.home-about-counter-inner .evc-counter .evc-c-title{
    margin-top: 10px;
    font-size: 20px;
    color: #000;
    font-weight: 400;
    font-family: var(--fontFamily);
}


.home-pos-system{
    padding-top:65px;
    padding-bottom: 65px;
}


/*slide anything*/
#slider_102{padding-bottom: 50px}

#slider_102 .sa_hover_container img{
    -webkit-filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.75));
    filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.75));
}

#slider_102  .owl-nav .owl-prev{left:calc(50% - 45px);}
#slider_102  .owl-nav .owl-next{right:calc(50% - 45px);}

#slider_102  .owl-nav .owl-prev,
#slider_102  .owl-nav .owl-next{
    background:transparent !important;
    width:35px !important;
    height:35px !important;
    border-radius:0 !important;
    top:auto;
    bottom: 0;
}

#slider_102 .owl-nav .owl-prev:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0,-50%);
    width: 17.5px;
    height: 35px;
    border: 1px solid #fff;
    z-index: 9;
    border-top-left-radius: 110px;
    border-bottom-left-radius: 110px;
    border-right: none;
}

#slider_102  .owl-nav .owl-prev:after{
    content:'\f177';
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color:#fff;
    font-size:18px;
}

#slider_102  .owl-nav .owl-next:before{
    content:'';
    position:absolute;
    top:50%;
    right:0;
    transform:translate(0,-50%);
    width: 17.5px;
    height: 35px;
    border: 1px solid #fff;
    z-index: 9;
    border-top-right-radius: 110px;
    border-bottom-right-radius: 110px;
    border-left: none;
}

#slider_102  .owl-nav .owl-next:after{
    content:'\f178';
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color:#fff;
    font-size:18px;
}


#slider_102 .owl-nav .owl-prev:before,
#slider_102 .owl-nav .owl-next:before{
    opacity:0;
    transition: inherit;
}

#slider_102 .owl-nav .owl-prev:hover:before,
#slider_102 .owl-nav .owl-next:hover:before{
    opacity:1;
}

.home-feedme{
    padding-top:65px;
    padding-bottom: 65px;
    position: relative;
}

#slider_106{
    padding-top: 35px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

#slider_106 .sa_hover_container img{
    -webkit-filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.75));
    filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.75));
}

#slider_106  .owl-nav .owl-prev{left:-20px;}
#slider_106  .owl-nav .owl-next{right:-20px;}

#slider_106 .owl-nav .owl-prev,
#slider_106 .owl-nav .owl-next{
    background:transparent !important;
    width:35px !important;
    height:35px !important;
    border-radius:0 !important;
    top:auto;
    bottom: 20%;
}

#slider_106 .owl-nav .owl-prev:after{
    content:'\f177';
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color:#000;
    font-size:18px;
}

#slider_106 .owl-nav .owl-next:after{
    content:'\f178';
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color:#000;
    font-size:18px;
}

.home-clients{
    padding-top: 65px;
    padding-bottom: 65px;
    position: relative;
}

.home-clients:before{
    content:'';
    position: absolute;
    width: 100%;
    height: 1px;
    top:0;
    left:50%;
    background: #231f20;
    display: block !important;
    transform: translateX(-50%);
    opacity: 1;
}

.client-pagination{
    margin-bottom: 35px !important;
    padding-bottom: 40px !important;
}

.client-pagination .vc_row .wpb_single_image{
    padding-left: 15px;
    padding-right: 15px;
}

.client-pagination.vc_tta.vc_general .vc_tta-panel-body{
    padding-bottom: 0;
    padding-top: 0;
}

.client-pagination .vc_pagination li.vc_pagination-item a{
    border:none;
    background-color: #cdcfd0;
}

.client-pagination .vc_pagination li.vc_pagination-item:hover a,
.client-pagination .vc_pagination li.vc_pagination-item.vc_active a{
    background-color: #1e3c70;
}

.home-customer{

}

.customer-social > .wpb_wrapper{
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items:center;
}

.customer-social a{
    padding-left: 10px;
    padding-right: 10px;
    font-size: 30px;
    color:#1e3c70;
    margin-bottom: 0;
}

.customer-social a:hover{
    color: #0b1741;
}

.customer-grid-list{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    margin-bottom: 10px;
}

.customer-grid-list:before{display: none !important}
.customer-grid-list:after{display: none !important}

.customer-grid-list > .wpb_column{width: 100%}

.customer-grid-list .wpb_single_image{margin-bottom: 0}

.home-contact-section{padding-top: 0 !important}

.vc_row.home-contact{
    padding-top: 65px;
    padding-bottom:50px;
    position: relative;
}

.vc_row.home-contact:before{
    content: '';
    top:0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 67%;
    background-image: url(https://icafe.com.my/wp-content/uploads/2023/02/home-enquiries-bg.jpg) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    display: block !important;
    opacity: 1;
    -webkit-mask-image: url(./images/below-curve-long-height.svg);
    mask-image: url(./images/below-curve-long-height.svg);
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center bottom;
    mask-position: center bottom;
}

.home-contact > .wpb_column > .vc_column-inner > .wpb_wrapper{
    max-width:900px;
    margin-left: auto;
    margin-right: auto;
}

.home-contact .vc_row.vc_inner{
    margin-top: 100px;
    padding-left:15px;
    padding-right: 15px;
    border-radius: 15px;
}

/*CF 7 - blocks form*/
.contact-form .wpcf7-form{
    margin-bottom:35px;
}

.contact-form .form{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap:10px;
    margin-bottom:20px;
}

.contact-form .form.demo{
    display: block;
    grid-gap:0;
    margin-bottom:0;
}

.contact-form .form.demo > *{margin-bottom: 35px}

.contact-form .form label{
    margin-bottom: 10px;
    cursor: default;
    font-size: 16px;
    font-weight: 600;
}

.contact-form .form input,
.contact-form .form textarea{
    background-color:#ebebec;
    border:1px solid #ebebec;
    font-size:16px;
    color: #231f20;
    border-radius: 5px;
    font-weight:400;
    transition: all 0.3s ease-in-out;
}

.contact-form .form.demo input,
.contact-form .form.demo textarea,
.contact-form .form.demo select{
    background-color:transparent;
    border:1px solid #bbbdbf;
    border-top:none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    padding-left:5px;
    padding-right: 5px;
}

.contact-form .form.demo select{
    color:#231f20;
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.5.379L20.621 2.5 10.5 12.621.379 2.5 2.5.379l8 8z' fill='%23231f20' fill-rule='nonzero'/%3E%3C/svg%3E");
}
.contact-form .form.demo select option{
    background-color:#fff;
}

.contact-form .form input:focus,
.contact-form .form textarea:focus{
    border-color: #231f20;
}

.contact-form .form input::placeholder,
.contact-form .form textarea::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #231f20;
  font-size:16px;
  font-weight:400;
  text-transform:capitalize;
  opacity: 1; /* Firefox */
}


.contact-form .form input:-ms-input-placeholder,
.contact-form .form textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #231f20;
  font-size:16px;
  font-weight:400;
  text-transform:capitalize;
}

.contact-form .form input::-ms-input-placeholder,
.contact-form .form textarea::-ms-input-placeholder { /* Microsoft Edge */
  color: #231f20;
  font-size:16px;
  font-weight:400;
  text-transform:capitalize;
}

/*demo placeholder*/
.contact-form .form.demo input::placeholder,
.contact-form .form.demo textarea::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #bbbdbf;
}


.contact-form .form.demo input:-ms-input-placeholder,
.contact-form .form.demo textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #bbbdbf;
}

.contact-form .form.demo input::-ms-input-placeholder,
.contact-form .form.demo textarea::-ms-input-placeholder { /* Microsoft Edge */
  color: #bbbdbf;
}

.contact-form #recaptcha{
    width:100%;
    text-align:center;
    margin-bottom:20px;
    display:flex;
    justify-content:center;
}

.contact-form #send{position:relative;}

.contact-form #send .effect{
    background: #fff200;
    border-radius: 5px;
/*    overflow: hidden;*/
    position: relative;
    z-index: 1;
}

.contact-form #send .effect:before{
    content: '';
    position: absolute;
    top:50%;
    left:50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%,-50%) scale(0);
    background: rgba(255,255,255,0.5);
    display: block !important;
    opacity: 1;
    z-index: -1;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border-radius: 5px;
}

.contact-form #send .effect:hover:before{
    transform: translate(-50%,-50%) scale(1);
}

.contact-form #send input {
    display: block;
    width: 100%;
    padding: 10px 20px;
    background: transparent;
    border: none;
    border-radius: 0;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 16px;
    min-height: 40px;
    color: #000;
    line-height: 20px;
    /* text-align: left; */
    float: none;
    height: auto;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    text-align: center;
}

/*demo*/
.contact-form #send.demo-btn{
    position:relative;
    display: block;
    text-align: center;
}

.contact-form #send.demo-btn .effect{
    background: #49a3d2;
    border-radius: 30px;
    position: relative;
    z-index: 1;
    display: inline-block;
}

.contact-form #send.demo-btn .effect:before{
    background: #0b1741;
    border-radius: 30px;
}

.contact-form #send.demo-btn input {
    display: block;
    width: 150px;
    padding: 10px 20px;
    background: transparent;
    border: none;
    border-radius: 0;
    text-transform: initial;
    font-weight: 300;
    font-size: 16px;
    min-height: 40px;
    color: #fff;
    line-height: 20px;
    /* text-align: left; */
    float: none;
    height: auto;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    text-align: center;
}

.contact-form span.wpcf7-not-valid-tip {
    margin-top: 5px;
}

.contact-form .wpcf7-response-output {
    color: #231f20;
    margin: 35px 0 0 !important;
    border-radius: 0;
    font-weight: 400;
}


.contact-form #send.demo-btn .wpcf7-spinner {
    left: calc(100% + 10px);
}

.contact-form #send .wpcf7-spinner {
    margin: 0;
    top: 50%;
    position: absolute;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    left: calc(100% - 30px);
    opacity: 1;
}

.contact-form #send .wpcf7-spinner:before {
    left: 2px;
    top: 2px;
}

/*footer*/
#footer .ct-container {
    padding-left: 15px;
    padding-right: 15px;
}

#footer [data-row*="middle"] .ct-container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    grid-gap: 0;
    flex-wrap: wrap;
}

#footer [data-row*="middle"] [data-column*="widget-area"]{
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    flex-basis: -webkit-fit-content;
    flex-basis: -moz-fit-content;
    flex-basis: fit-content;
}

#footer .ct-widget .widget-title{margin-bottom: 20px}

#footer [data-row*="middle"] [data-column="widget-area-1"] .widget_media_image img{
    width: auto;
    max-height: 80px;
}

#footer [data-row*="middle"] [data-column="widget-area-1"] .widget_text{max-width: 320px}

#footer [data-row*="middle"] [data-column="widget-area-1"] .widget_text p{font-size: 14px} 

#footer [data-row*="middle"] [data-column="widget-area-1"] .widget_text span{
    display: inline-block;
    padding-right: 3px;
}

#footer [data-row*="middle"] [data-column="widget-area-2"] .widget_text strong{
    font-weight: 600;
}

#footer [data-row*="middle"] [data-column="widget-area-3"] .widget_text table{
    border:none;
    width: auto;
}

#footer [data-row*="middle"] [data-column="widget-area-3"] .widget_text table tr td{
    padding: 0 0 10px;
    border:none;
}

#footer [data-row*="middle"] [data-column="widget-area-3"] .widget_text table tr td:not(:last-child){padding-right:10px}

#footer [data-row*="middle"] [data-column="widget-area-3"] .widget_text table tr:last-child td{padding-bottom:0}

#footer [data-row*="middle"] [data-column="widget-area-3"] .widget_custom_html .footer-social{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
}

#footer [data-row*="middle"] [data-column="widget-area-3"] .widget_custom_html .footer-social a{
    font-size: 20px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #fff;
    color:#0b1741;
    overflow: hidden;
    position: relative;
    z-index: 1;
    border:2px solid #fff;
}

#footer [data-row*="middle"] [data-column="widget-area-3"] .widget_custom_html .footer-social a:hover{
    color:#fff;
}

#footer [data-row*="middle"] [data-column="widget-area-3"] .widget_custom_html .footer-social a:before{
    content: '';
    position: absolute;
    top:100%;
    left:0;
/*    transform: translate(-50%,-50%);*/
    width:100%;
    height:100%;
    background: transparent linear-gradient(45deg, rgba(150,1,202,1) 0%, rgba(66,116,231,1) 100%) !important;
    display: block !important;
    opacity:1;
    z-index:-1;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

#footer [data-row*="middle"] [data-column="widget-area-3"] .widget_custom_html .footer-social a:hover:before{
    top:0;
}


#footer [data-row*="middle"] [data-column="widget-area-3"] .widget_custom_html .footer-social > :not(:last-child){margin-right: 15px}

#footer [data-row*="bottom"]{display:none}

#footer [data-row*="bottom"] .ct-footer-copyright p{margin-bottom: 0}

#footer [data-row*="bottom"] .ct-footer-copyright span{
    display: inline-block;
    padding-right: 3px;
}

/*about*/
.icon-title-desc {
    padding-top:100px;
    padding-bottom: 65px;
}

.icon-title-desc.column-centered{
    justify-content: center;
}

.icon-title-desc > .wpb_column > .vc_column-inner{
    height:100%;
    padding-top:55px;
    padding-bottom: 35px;
}

.icon-title-desc > .wpb_column > .vc_column-inner > .wpb_wrapper{
    background: #eeeeef;
    border-radius: 15px;
    position: relative;
    height:100%;
    padding:36px 30px 1px;
}

.icon-title-desc .wpb_single_image {
    margin-bottom: 20px;
    width: 110px;
    height: 110px;
    background: #11183f;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    margin-top: -90px;
}

.icon-title-desc .wpb_single_image img{
    width: auto;
    height:60px;
    filter: invert(1) brightness(1);
}

.icon-title-desc .wpb_single_image.mission-image img{
    padding-left: 13px;
}

.icon-title-desc .all-title{margin-bottom: 20px !important}

.home-about.nomask{
    -webkit-mask-image: unset;
    mask-image: unset;
}

.home-about.about-main .wpb_text_column > .wpb_wrapper > *{color:#fff}

.home-about.about-main .home-about-counter-inner .evc-counter .evc-c-digit,
.home-about.about-main .home-about-counter-inner .evc-counter .evc-c-title  {
    color: #fff;
}

.home-about.about-main .home-about-counter-inner > .wpb_column:not(:last-child) > .vc_column-inner {
    border-right: 1px solid rgba(255,255,255,0.5);
}

.about-main-grid-list{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    padding-top: 10px;
}

.about-main-grid-list > .wpb_column > .vc_column-inner{padding-top: 0 !important}

.about-main-grid-list:before{display: none !important}
.about-main-grid-list:after{display: none !important}

.about-main-grid-list > .wpb_column{width: 100%}

.about-main-grid-list .wpb_single_image{margin-bottom: 0}

.about-clients-section{
    padding-top:0 !important;
    padding-bottom:50px;
}

.home-clients.about-clients{
    padding-top: 65px;
    padding-bottom: 100px;
    -webkit-mask-image: url(./images/below-curve-long-height.svg);
    mask-image: url(./images/below-curve-long-height.svg);
    -webkit-mask-size: 100% auto;
    mask-size: 100% auto;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center bottom;
    mask-position: center bottom;
}

.home-clients.about-clients:before{
    display: none !important;
}

/*contact*/
.contact-main{padding-top: 100px}

.contact-main > .wpb_column > .vc_column-inner > .wpb_wrapper > :last-child{margin-bottom: 0}

.contact-main .company-name > .wpb_wrapper > *{line-height: 0.8}

.contact-main .company-name .reg{
    font-size: 14px;
    font-weight: 400;
}

.contact-social > .wpb_wrapper{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.contact-social > .wpb_wrapper a{
    font-size: 25px;
    width: 50px;
    height: 50px;
    line-height: 35px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #eeeeef;
    color:#11183f;
    overflow: hidden;
    position: relative;
    z-index: 1;
    border:2px solid #fff;
}

.contact-social > .wpb_wrapper a:hover{
    color:#fff;
}

.contact-social > .wpb_wrapper a:before{
    content: '';
    position: absolute;
    top:100%;
    left:0;
/*    transform: translate(-50%,-50%);*/
    width:100%;
    height:100%;
    background: transparent linear-gradient(45deg, rgba(150,1,202,1) 0%, rgba(66,116,231,1) 100%) !important;
    display: block !important;
    opacity:1;
    z-index:-1;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.contact-social > .wpb_wrapper a:hover:before{
    top:0;
}

.contact-social > .wpb_wrapper > :not(:last-child){margin-right: 15px}

.contact-info.icon-title-desc .wpb_text_column a{color:inherit}

.contact-map .wpb_gmaps_widget{margin-bottom: 0}

.contact-map .wpb_gmaps_widget .wpb_wrapper{padding:0}

/*free demo*/
.demo-section{
    padding-top:0 !important;
    padding-bottom: 50px;
}

.demo-form{
    padding-top:65px;
    padding-bottom: 65px;
    -webkit-mask-image: url(./images/below-curve-long-height.svg);
    mask-image: url(./images/below-curve-long-height.svg);
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center bottom;
    mask-position: center bottom;
}

/*FeedMe App*/
.vc_row.feedme-main{
    padding-top: 100px;
    padding-bottom: 65px;
    position: relative;
}

.vc_row.feedme-main:before {
    content: '';
    position: absolute;
    width: 42%;
    height: 64%;
    top: 0;
    right: 0;
    background: url('https://icafe.com.my/wp-content/uploads/2023/02/feed-main-curve.png');
    background-repeat: no-repeat;
    background-position: top left;
    background-size: contain;
    display: block !important;
    opacity: 1;
}

.apps-list > .wpb_column > .vc_column-inner > .wpb_wrapper{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.apps-list > .wpb_column > .vc_column-inner > .wpb_wrapper > :not(:last-child){
    margin-right: 20px;
}

.apps-list .wpb_single_image img{
    width: auto;
    height: 80px;
}

.feedme-main #slider_106{
    padding-top: 0;
    max-width: 250px;
    margin-left: 0;
}

.more-app-info-section{
    padding-top:0 !important;
    padding-bottom: 50px;
}

.more-app-info{
    padding-top: 65px;
    padding-bottom: 130px;
    -webkit-mask-image: url(./images/below-curve-long-height.svg);
    mask-image: url(./images/below-curve-long-height.svg);
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center bottom;
    mask-position: center bottom;
}

.inner-info{padding-top: 35px}

.more-app-info .inner-info{padding-top: 0}

.inner-info .wpb_single_image{margin-bottom: 20px}

.inner-info .all-title{margin-bottom: 20px !important}


/*pos system*/
.membership-img img {
    margin-top: 14px;
    margin-left: 4px;
}

.pos-system-app-section{
    padding-top: 100px!important;
}

.pos-system-app{
    padding-bottom: 65px;
}


.pos-system-app .wpb_single_image img{
    width: auto;
    max-height: 400px;
}

.pos-system-app .wpb_single_image figure{
    position: relative;
    z-index: 1;
}

.pos-system-app .wpb_single_image figure:before{
    content: '';
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width: auto;
    height: 90%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.5);
    display: block !important;
    opacity: 1;
    z-index: -1;
}

.pos-system-swan{
    padding-top:65px;
    padding-bottom: 65px;
}

.pos-system-swan .wpb_single_image{padding-top:35px}

.pos-system-swan .wpb_single_image img{
    max-width: 600px;
    height: auto;
    width: 100%;
}

.design-experience-section{
/*    border-top:1px solid rgba(35,31,32,0.5);*/
    padding-top:100px !important;
    position: relative;
}

.design-experience-section:before{
    content: '';
    position: absolute;
    top: 0;
    left:50%;
    transform: translateX(-50%);
    width: 100%;
    height: 1px;
    background: rgba(35,31,32,0.5);
    display: block !important;
    opacity: 1;
}   

.design-experience-title{
    padding-bottom:35px;
}

.design-experience{padding-bottom: 65px}

.design-experience .wpb_single_image{
    background: green;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    border: 10px solid transparent;
    background:linear-gradient(90deg, rgba(150,1,202,1) 0%, rgba(66,116,231,1) 100%) border-box;
    border-radius: 50%;

}

.design-experience.right-image .wpb_single_image{margin-left: auto;}

.design-experience .wpb_single_image figure {
    border-radius: 50%;
    overflow: hidden;
    border: 10px solid #fff;
}

.design-experience .wpb_single_image img{
    max-height: 300px;
    width: auto;
}

/*popup maker*/
.popup-contact{
    padding-top: 35px;
}

#popmake-313{
    border: none;
    border-radius: 15px;
}

/*Animation*/
.delay1{animation-delay: 0.5s;}
.delay2{animation-delay: 1s;}
.delay3{animation-delay: 1.5s;}
.delay4{animation-delay: 2s;}
.delay5{animation-delay: 2.5s;}
.delay6{animation-delay: 3s;}


/*Jason*/
.customer-grid-list .wpb_text_column {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin-bottom: 0;
    padding: 30px 15px;
    transition: all 0.5s;
    transform: translateX(50px);
    opacity: 0;
}

.customer-grid-list .wpb_single_image {
    position: relative;
    isolation: isolate; 
}

.customer-grid-list .wpb_text_column,
.customer-grid-list .wpb_text_column :is(h1, h2, h3, h4, h5, h6, a) {
    color: white;
}

.customer-grid-list .wpb_single_image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    display: block !important;
    background: linear-gradient(to bottom, black, transparent);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s;
}

.customer-grid-list > div:hover .wpb_single_image::before {
    opacity: 1;
}

.customer-grid-list > div:hover .wpb_text_column {
    transform: none;
    opacity: 1;
}

/*Contact Amend*/
.contact-info-section{padding-top:100px;}

.contact-info-side{
    padding-bottom:65px;
    margin-bottom:100px;
    border-bottom:1px solid rgba(0,0,0,0.5);
}

.contact-info-section > .contact-info-side:last-of-type{
    margin-bottom:0;
    border-bottom:none;
}

.contact-info-side .contact-info-v2 > .wpb_wrapper > div{
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items:flex-start;
}

.contact-info-side .contact-info-v2 > .wpb_wrapper > div p:first-child{
    width:20px;
    margin-right:10px;    
}

.contact-info-side .contact-info-v2 > .wpb_wrapper > div p:nth-child(2){
    width:calc(100% - 30px);
}

.contact-info-side .contact-info-v2 > .wpb_wrapper > div p i{
    font-size:18px;
    width:20px;
    text-align:center;
    background: transparent linear-gradient(45deg, rgba(150,1,202,1) 0%, rgba(66,116,231,1) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
}

.contact-info-side .contact-info-v2 > .wpb_wrapper > div p .add{
    display:block;
    padding-right:3px;
}

.contact-info-side .contact-info-v2 > .wpb_wrapper > div p .add.block{
    display:block;
    font-size:18px;
}

.contact-info-side .contact-info-v2 > .wpb_wrapper > div p .reg{
    display:inline-block;
    font-size:14px;
}

/*add on 2024 jan*/

:root{
    --darkblue: #11183f;
}

.more-app-info .wpb_single_image img{
    background:#fff !important;
}

.pos-system-video{
    padding-top:100px;
    padding-bottom:65px;
}

.plyr__control--overlaid,
.plyr--video .plyr__control:hover{
    background:var(--darkblue) !important;
}

.plyr--full-ui input[type="range"]{
    color:var(--darkblue) !important;
}

.feedme-app-video{padding-bottom:65px;}

.clients-logo .wpb_single_image img {
	aspect-ratio: 1080/600;
	object-fit: contain;
	object-position: center;
	padding: 10px 0;
}

@media only screen and (max-width: 767px) {
    .pos-system-video{
        padding-top:70px;
        padding-bottom:35px;
    }
    
    .feedme-app-video{padding-bottom:35px;}
    
    .clients-logo .wpb_single_image img {
    	padding: 10px 5%;
    }
}

/*price page*/
.all-title.medium-weight{font-weight:500 !important;}

.hard-ware-for-sale-section{
    padding-top:100px !important;
}

.hardwaresales-title{padding-bottom:35px;}

.hardware{
    --product-img-col: min(400px,50%);
    padding-bottom:65px;
    --product-img-col: 400px;
	max-width: 770px;
	margin-inline: auto;
}

.vc_section[data-vc-full-width] > .vc_row.hardware{
    margin-inline: auto;
}

.hardware > .wpb_column:nth-child(1){
    width:var(--product-img-col);
}

.hardware > .wpb_column:nth-child(2){
    width:calc(100% - var(--product-img-col));
}

.hard-ware-product img {
	aspect-ratio: 1/1;
	width: 100%;
	max-height: 300px;
	object-fit: contain;
	object-position: center;
}

.more-app-info.price-hardware{
    padding-top:0 !important;
    position:relative;
    isolation:isolate;
}

.more-app-info.price-hardware > .wpb_column > .vc_column-inner{padding-top:0 !important;}

.more-app-info-section{
    position:relative;
    isolation:isolate;
}

.more-app-info-section:before{
    content:'';
    position:absolute;
    display: block !important;
    top: -2px;
    left: 0;
    width: 100%;
    height:35px;
    background: #eeeeef;
    z-index:-1;
}

.more-app-info.price-hardware .wpb_single_image img {
	background: #d2d3d5 !important;
	aspect-ratio:6/5;
	object-fit: contain;
	object-position: center;
	padding:10%;
}

.readmore.buy-now .vc_general.vc_btn3{
    font-weight: 500;
    background: none !important;
    position: relative;
    overflow: hidden;
    z-index:1;
}

.readmore.buy-now .vc_general.vc_btn3:before {
    content: '';
    position: absolute;
    width: 200%;
    height: 100%;
    top: 0;
    left: 0;
    transform: translateX(0);
    background: linear-gradient(45deg, rgba(150,1,202,1) 0%, rgba(66,116,231,1) 50%, rgba(150,1,202,1) 100%) !important;
    opacity: 1;
    display: block !important;
    filter: none;
    transition: all .3s ease-in-out;
    z-index:-1;
}

.readmore.buy-now .vc_general.vc_btn3:hover:before{
    left:-100%;
}

@media only screen and (max-width: 767px) {
    
    .hard-ware-for-sale-section{
        padding-top:70px !important;
    }
    
    .hardwaresales-title {
    	padding-bottom: 0;
    }
    
    .hardware > .wpb_column:nth-child(1){
        width:100%;
    }
    
    .hardware > .wpb_column:nth-child(2){
        width:100%;
    }
    
    .hard-ware-product img {
    	aspect-ratio: unset;
    }
    
    .hardware .wpb_single_image{text-align:center}
    .hardware .wpb_text_column{text-align:center}
    .hardware .all-title{text-align:center !important}
    .hardware .readmore{text-align:center !important}
    
    .hardware{
        padding-bottom:35px;
    }
    .pos-system-more-info.more-app-info.price-hardware .all-title{text-align:center !important}
    
    .more-app-info.price-hardware .wpb_single_image img {
    	padding: 5%;
    }
}