.elementor-4823 .elementor-element.elementor-element-0b487d2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4823 .elementor-element.elementor-element-a52bc2a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4823 .elementor-element.elementor-element-553177b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4823 .elementor-element.elementor-element-3d26362{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-4823 .elementor-element.elementor-element-21e2252{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-heading .elementor-heading-title{color:var( --e-global-color-primary );}.elementor-4823 .elementor-element.elementor-element-e222b43{text-align:center;}.elementor-widget-text-editor{color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-4823 .elementor-element.elementor-element-2154e63{text-align:center;}.elementor-4823 .elementor-element.elementor-element-55cbfaa{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );}.elementor-4823 .elementor-element.elementor-element-bf88b08{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4823 .elementor-element.elementor-element-317cc4b{text-align:center;}.elementor-4823 .elementor-element.elementor-element-317cc4b .elementor-heading-title{color:var( --e-global-color-primary );}.elementor-4823 .elementor-element.elementor-element-7ad47be{text-align:center;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );}.elementor-4823 .elementor-element.elementor-element-e21f1ac .elementor-button{background-color:#052358;border-style:solid;border-width:3px 3px 3px 3px;border-radius:10px 10px 10px 10px;padding:20px 20px 20px 20px;}.elementor-4823 .elementor-element.elementor-element-e21f1ac .elementor-button:hover, .elementor-4823 .elementor-element.elementor-element-e21f1ac .elementor-button:focus{background-color:#02010100;color:#052358;border-color:#052358;}.elementor-4823 .elementor-element.elementor-element-e21f1ac .elementor-button:hover svg, .elementor-4823 .elementor-element.elementor-element-e21f1ac .elementor-button:focus svg{fill:#052358;}.elementor-4823 .elementor-element.elementor-element-c963892{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.64;}.elementor-4823 .elementor-element.elementor-element-c963892:not(.elementor-motion-effects-element-type-background), .elementor-4823 .elementor-element.elementor-element-c963892 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://karsaz.co/wp-content/uploads/2026/07/best.png");background-position:182px -165px;}.elementor-4823 .elementor-element.elementor-element-c963892::before, .elementor-4823 .elementor-element.elementor-element-c963892 > .elementor-background-video-container::before, .elementor-4823 .elementor-element.elementor-element-c963892 > .e-con-inner > .elementor-background-video-container::before, .elementor-4823 .elementor-element.elementor-element-c963892 > .elementor-background-slideshow::before, .elementor-4823 .elementor-element.elementor-element-c963892 > .e-con-inner > .elementor-background-slideshow::before, .elementor-4823 .elementor-element.elementor-element-c963892 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-4823 .elementor-element.elementor-element-d5f03af{width:var( --container-widget-width, 33% );max-width:33%;--container-widget-width:33%;--container-widget-flex-grow:0;text-align:center;}.elementor-4823 .elementor-element.elementor-element-d5f03af > .elementor-widget-container{background-color:#FFFFFF;margin:10px 10px 10px 10px;border-radius:10px 10px 10px 10px;}.elementor-4823 .elementor-element.elementor-element-d5f03af.elementor-element{--align-self:center;}.elementor-4823 .elementor-element.elementor-element-d5f03af .elementor-heading-title{color:#052359;}.elementor-4823 .elementor-element.elementor-element-5b1bed0 .product-card .title{transition:200ms!important;}@media(max-width:992px){.elementor-4823 .elementor-element.elementor-element-c963892:not(.elementor-motion-effects-element-type-background), .elementor-4823 .elementor-element.elementor-element-c963892 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:0px 0px;}}@media(min-width:769px){.elementor-4823 .elementor-element.elementor-element-21e2252{--width:25%;}.elementor-4823 .elementor-element.elementor-element-55cbfaa{--width:50%;}.elementor-4823 .elementor-element.elementor-element-bf88b08{--width:25%;}}@media(max-width:768px){.elementor-4823 .elementor-element.elementor-element-e570465 img{width:100%;}.elementor-4823 .elementor-element.elementor-element-c963892:not(.elementor-motion-effects-element-type-background), .elementor-4823 .elementor-element.elementor-element-c963892 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:0px 0px;}.elementor-4823 .elementor-element.elementor-element-d5f03af{--container-widget-width:292px;--container-widget-flex-grow:0;width:var( --container-widget-width, 292px );max-width:292px;}}/* Start custom CSS for html, class: .elementor-element-675daa2 *//*==============================
      KIOSK HERO
==============================*/

.kiosk-hero{

    width:100%;
    background:#fff;
    padding:90px 0;
    overflow:hidden;
    position:relative;

    font-family:YekanBakhFaNum;

}

.kiosk-container{

    width:92%;
    max-width:1450px;

    margin:auto;

    display:grid;

    grid-template-columns:48% 52%;

    align-items:center;

    gap:60px;

}
.kiosk-content{

    order:2;

}

.kiosk-image{

    order:1;

}


/*==============================
        TEXT
==============================*/

.kiosk-content{

    direction:rtl;

}

.kiosk-badge{

    display:inline-flex;

    align-items:center;

    padding:10px 24px;

    border:2px solid #44d800;

    border-radius:100px;

    color:#11207b;

    font-size:15px;

    font-weight:700;

    margin-bottom:25px;

}


.kiosk-content h1{

    font-size:56px;

    line-height:88px;

    color:#11207b;

    margin:0;

    font-weight:900;

}

.kiosk-content h1 span{

    color:#44d800;

}


.kiosk-content p{

    margin-top:28px;

    color:#666;

    font-size:19px;

    line-height:42px;

    max-width:650px;

}


/*==============================
      FEATURES
==============================*/

.kiosk-features{

    display:flex;

    gap:35px;

    margin-top:45px;

    flex-wrap:wrap;

}


.feature{

    display:flex;

    align-items:center;

    gap:15px;

}

.feature i{

    width:58px;

    height:58px;

    border-radius:18px;

    background:#f4f7ff;

    color:#11207b;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

}

.feature strong{

    display:block;

    color:#11207b;

    font-size:17px;

    font-weight:800;

}

.feature span{

    color:#777;

    font-size:14px;

}


/*==============================
        BUTTONS
==============================*/

.kiosk-buttons{

    display:flex;

    gap:18px;

    margin-top:45px;

}


.btn-green{

    background:#44d800;

    color:#fff;

    text-decoration:none;

    padding:18px 36px;

    border-radius:50px;

    font-weight:800;

    transition:.35s;

}

.btn-green:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 35px rgba(68,216,0,.28);

}


.btn-white{

    background:#fff;

    color:#11207b;

    border:2px solid #11207b;

    text-decoration:none;

    padding:18px 36px;

    border-radius:50px;

    font-weight:800;

    transition:.35s;

}

.btn-white:hover{

    background:#11207b;

    color:#fff;

}


/*==============================
        IMAGE
==============================*/

.kiosk-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}


.kiosk-image img{

    width:100%;

    max-width:520px;

    position:relative;

    z-index:2;

}


.circle{

    width:560px;

    height:560px;

    background:#11207b;

    border-radius:50%;

    position:absolute;

    right:-80px;

    top:50%;

    transform:translateY(-50%);

    opacity:.08;

}
/*======================================
            RESPONSIVE
=======================================*/

@media(max-width:1200px){

.kiosk-container{

    grid-template-columns:1fr;

    gap:70px;

}

.kiosk-content{

    order:2;
    text-align:center;

}

.kiosk-image{

    order:1;

}

.kiosk-content p{

    max-width:700px;
    margin:25px auto 0;

}

.kiosk-features{

    justify-content:center;

}

.kiosk-buttons{

    justify-content:center;

}

.circle{

    right:50%;
    transform:translate(50%,-50%);

}

}



@media(max-width:768px){

.kiosk-hero{

    padding:65px 0;

}

.kiosk-container{

    width:92%;

    gap:40px;

}

.kiosk-image img{

    max-width:330px;

}

.circle{

    width:360px;
    height:360px;

}

.kiosk-badge{

    font-size:13px;
    padding:8px 18px;

}

.kiosk-content h1{

    font-size:34px;
    line-height:58px;

}

.kiosk-content p{

    font-size:16px;
    line-height:34px;

}

.kiosk-features{

    flex-direction:column;

    gap:18px;

    align-items:center;

}

.feature{

    width:100%;

    justify-content:center;

}

.feature i{

    width:52px;
    height:52px;

    font-size:20px;

}

.kiosk-buttons{

    flex-direction:column;

    width:100%;

}

.btn-green,
.btn-white{

    width:100%;

    text-align:center;

    padding:17px;

}

}



@media(max-width:480px){

.kiosk-content h1{

    font-size:28px;
    line-height:48px;

}

.kiosk-content p{

    font-size:15px;
    line-height:31px;

}

.kiosk-image img{

    max-width:270px;

}

.circle{

    width:300px;
    height:300px;

}

.kiosk-badge{

    font-size:12px;

}

.feature strong{

    font-size:15px;

}

.feature span{

    font-size:13px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-cc68bd9 *//*==========================
     SERVICES
==========================*/

.kiosk-services{

    padding:110px 0;

    background:#f8fbff;

    font-family:YekanBakhFaNum;

}

.kiosk-title{

    width:90%;

    max-width:760px;

    margin:auto;

    text-align:center;

}

.kiosk-title span{

    color:#44d800;

    font-size:17px;

    font-weight:800;

}

.kiosk-title h2{

    font-size:48px;

    color:#11207b;

    margin:18px 0;

    line-height:75px;

}

.kiosk-title h2 span{

    color:#44d800;

    font-size:inherit;

}

.kiosk-title p{

    color:#666;

    line-height:36px;

    font-size:18px;

}

.kiosk-services-grid{

    width:92%;

    max-width:1450px;

    margin:70px auto 0;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}
/*==========================
      SERVICE BOX
==========================*/

.service-box{

    background:#fff;

    border-radius:28px;

    padding:40px 35px;

    text-align:center;

    transition:.35s;

    border:1px solid #eef2f8;

    position:relative;

    overflow:hidden;

}

.service-box::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    background:#44d800;

    transform:scaleX(0);

    transition:.35s;

    transform-origin:right;

}

.service-box:hover::before{

    transform:scaleX(1);

}

.service-box:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 60px rgba(17,32,123,.08);

}

.service-box img{

    width:90px;

    height:90px;

    object-fit:contain;

    display:block;

    margin:0 auto 28px;

    transition:.35s;

}

.service-box:hover img{

    transform:translateY(-8px) scale(1.08);

}

.service-box h3{

    margin:28px 0 18px;

    color:#11207b;

    font-size:24px;

    font-weight:800;

}

.service-box p{

    color:#666;

    line-height:34px;

    font-size:16px;

}


/*==========================
      RESPONSIVE
==========================*/

@media(max-width:992px){

.kiosk-services-grid{

    grid-template-columns:repeat(2,1fr);

}

.kiosk-title h2{

    font-size:40px;

    line-height:62px;

}

}


@media(max-width:768px){

.kiosk-services{

    padding:70px 0;

}

.kiosk-services-grid{

    grid-template-columns:1fr;

    gap:20px;

}

.kiosk-title h2{

    font-size:32px;

    line-height:50px;

}

.kiosk-title p{

    font-size:16px;

    line-height:32px;

}

.service-box{

    padding:30px 25px;

}

.service-box h3{

    font-size:21px;

}

.service-box p{

    font-size:15px;

}

.service-box i{

    width:68px;

    height:68px;

    font-size:26px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-51e27be *//*==============================
        BENTO SECTION
==============================*/

.kiosk-bento{

    padding:110px 0;

    background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);

    font-family:YekanBakhFaNum;

}

.bento-title{

    width:90%;

    max-width:760px;

    margin:auto;

    text-align:center;

}

.bento-title span{

    color:#44d800;

    font-size:17px;

    font-weight:800;

}

.bento-title h2{

    font-size:48px;

    color:#11207b;

    line-height:70px;

    margin:18px 0;

}

.bento-title h2 span{

    color:#44d800;

}

.bento-title p{

    color:#666;

    font-size:18px;

    line-height:36px;

}


/*==============================
        GRID
==============================*/

.bento-grid{

    width:92%;

    max-width:1400px;

    margin:70px auto 0;

    display:grid;

    grid-template-columns:1.3fr 1fr;

    gap:35px;

    align-items:center;

}



/*==============================
        DEVICE
==============================*/

.bento-device{

    background:#fff;

    border-radius:35px;

    padding:50px;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:650px;

    position:relative;

    overflow:hidden;

    box-shadow:0 20px 60px rgba(17,32,123,.06);

}

.bento-device::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    background:#11207b;

    opacity:.05;

    border-radius:50%;

}

.bento-device img{

    max-width:420px;

    width:100%;

    position:relative;

    z-index:2;

}



/*==============================
        RIGHT SIDE
==============================*/

.bento-grid{

    align-items:stretch;

}

.bento-grid>.bento-card:nth-child(n+2){

    min-height:140px;

}

.bento-grid{

    grid-template-areas:

    "device c1"

    "device c2"

    "device c3"

    "device c4";

}

.bento-device{

    grid-area:device;

}

.bento-card:nth-child(2){

    grid-area:c1;

}

.bento-card:nth-child(3){

    grid-area:c2;

}

.bento-card:nth-child(4){

    grid-area:c3;

}

.bento-card:nth-child(5){

    grid-area:c4;

}



/*==============================
        CARD
==============================*/

.bento-card{

    background:#fff;

    border-radius:25px;

    padding:28px;

    display:flex;

    align-items:center;

    gap:22px;

    border:1px solid #eef2f8;

    transition:.35s;

}

.bento-card img{

    width:70px;

    height:70px;

    object-fit:contain;

    flex-shrink:0;

}

.bento-card h3{

    color:#11207b;

    font-size:22px;

    margin-bottom:8px;

}

.bento-card p{

    color:#666;

    font-size:15px;

    line-height:30px;

}

.bento-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(17,32,123,.08);

}



/*==============================
        RESPONSIVE
==============================*/

@media(max-width:991px){

.bento-grid{

    grid-template-columns:1fr;

    grid-template-areas:none;

}

.bento-device{

    min-height:auto;

    padding:40px;

}

.bento-device,

.bento-card:nth-child(2),

.bento-card:nth-child(3),

.bento-card:nth-child(4),

.bento-card:nth-child(5){

    grid-area:auto;

}

}

@media(max-width:768px){

.bento-title h2{

    font-size:34px;

    line-height:52px;

}

.bento-title p{

    font-size:16px;

}

.bento-card{

    flex-direction:column;

    text-align:center;

    padding:25px;

}

.bento-card img{

    width:60px;

    height:60px;

}

.bento-device img{

    max-width:260px;

}

}
/*==============================
        ANIMATIONS
==============================*/

@keyframes floatDevice{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-16px);
    }

    100%{
        transform:translateY(0px);
    }

}

.bento-device img{

    animation:floatDevice 5s ease-in-out infinite;
    transition:.45s;

}

.bento-device:hover img{

    transform:scale(1.04);

}


/*==============================
      DEVICE GLOW
==============================*/

.bento-device::after{

    content:"";

    position:absolute;

    width:260px;
    height:260px;

    background:radial-gradient(circle,
    rgba(68,216,0,.20) 0%,
    rgba(17,32,123,.08) 55%,
    transparent 80%);

    border-radius:50%;

    filter:blur(45px);

    z-index:1;

}


/*==============================
        CARD EFFECT
==============================*/

.bento-card{

    position:relative;

    overflow:hidden;

}

.bento-card::before{

    content:"";

    position:absolute;

    top:0;
    right:0;

    width:5px;
    height:0;

    background:#44d800;

    transition:.35s;

}

.bento-card:hover::before{

    height:100%;

}

.bento-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 55px rgba(17,32,123,.10);

}

.bento-card:hover img{

    transform:scale(1.1) rotate(-6deg);

}

.bento-card img{

    transition:.35s;

}

.bento-card h3{

    transition:.35s;

}

.bento-card:hover h3{

    color:#44d800;

}


/*==============================
      SHINE EFFECT
==============================*/

.bento-card::after{

    content:"";

    position:absolute;

    width:60px;
    height:180%;

    background:rgba(255,255,255,.35);

    top:-40%;

    right:-120px;

    transform:rotate(25deg);

    transition:.8s;

}

.bento-card:hover::after{

    right:120%;

}


/*==============================
      BACKGROUND BLOBS
==============================*/

.kiosk-bento{

    position:relative;

}

.kiosk-bento::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    background:#44d800;

    opacity:.05;

    border-radius:50%;

    filter:blur(90px);

    top:-120px;

    left:-120px;

}

.kiosk-bento::after{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    background:#11207b;

    opacity:.04;

    border-radius:50%;

    filter:blur(90px);

    bottom:-180px;

    right:-150px;

}
/*==================================
        FINAL DETAILS
==================================*/

/* فاصله بین کارت‌ها */
.bento-grid{
    row-gap:22px;
}

/* گرادیان خیلی ملایم داخل کارت دستگاه */
.bento-device{
    background:
        linear-gradient(135deg,#ffffff 0%,#f8fbff 100%);
}

/* خط پایین عنوان */
.bento-title h2::after{

    content:"";

    display:block;

    width:90px;

    height:5px;

    margin:18px auto 0;

    border-radius:50px;

    background:linear-gradient(90deg,#44d800,#11207b);

}

/* آیکون داخل کارت */
.bento-card img{

    background:#f3f7ff;

    padding:14px;

    border-radius:18px;

}

/* رنگ متن هنگام هاور */
.bento-card:hover p{

    color:#444;

}

/* سایه نرم دستگاه */
.bento-device{

    box-shadow:
    0 25px 70px rgba(17,32,123,.08);

}

/* انیمیشن ظاهر شدن */
.bento-card{

    animation:fadeUp .8s ease both;

}

.bento-card:nth-child(2){

    animation-delay:.1s;

}

.bento-card:nth-child(3){

    animation-delay:.2s;

}

.bento-card:nth-child(4){

    animation-delay:.3s;

}

.bento-card:nth-child(5){

    animation-delay:.4s;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* دکمه اگر بعداً اضافه کردی */
.bento-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:60px;

    background:#11207b;

    color:#fff;

    text-decoration:none;

    transition:.35s;

    font-weight:700;

}

.bento-btn:hover{

    background:#44d800;

    transform:translateY(-4px);

}

/* موبایل */
@media(max-width:768px){

    .bento-grid{

        row-gap:18px;

    }

    .bento-device{

        border-radius:25px;

    }

    .bento-card{

        border-radius:20px;

    }

}/* End custom CSS */