.elementor-4573 .elementor-element.elementor-element-3926511{--display:flex;}.elementor-4573 .elementor-element.elementor-element-4ccef8e .elementor-repeater-item-c5617b5 .swiper-slide-bg{background-color:#833ca3;background-image:url(https://binaoptik.ir/wp-content/uploads/2025/10/03.jpg);background-size:cover;}.elementor-4573 .elementor-element.elementor-element-4ccef8e .elementor-repeater-item-5617d5b .swiper-slide-bg{background-color:#4054b2;background-image:url(https://binaoptik.ir/wp-content/uploads/2025/10/p1.jpg);background-size:cover;}.elementor-4573 .elementor-element.elementor-element-4ccef8e .elementor-repeater-item-b870ae5 .swiper-slide-bg{background-color:#1abc9c;background-image:url(https://binaoptik.ir/wp-content/uploads/2025/10/t4.jpg);background-size:cover;}.elementor-4573 .elementor-element.elementor-element-4ccef8e .swiper-slide{transition-duration:calc(5000ms*1.2);height:500px;}.elementor-4573 .elementor-element.elementor-element-4ccef8e .swiper-slide-contents{max-width:66%;}.elementor-4573 .elementor-element.elementor-element-4ccef8e .swiper-slide-inner{text-align:center;}.elementor-4573 .elementor-element.elementor-element-764b7cf{--display:grid;--min-height:0px;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--align-items:center;}.elementor-4573 .elementor-element.elementor-element-527e125{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-4573 .elementor-element.elementor-element-845a5a8:not( .elementor-widget-image ) .elementor-widget-container, .elementor-4573 .elementor-element.elementor-element-845a5a8.elementor-widget-image .elementor-widget-container img{-webkit-mask-image:url( https://binaoptik.ir/wp-content/plugins/elementor/assets/mask-shapes/circle.svg );-webkit-mask-size:contain;-webkit-mask-position:center center;-webkit-mask-repeat:no-repeat;}.elementor-4573 .elementor-element.elementor-element-96270f0:not( .elementor-widget-image ) .elementor-widget-container, .elementor-4573 .elementor-element.elementor-element-96270f0.elementor-widget-image .elementor-widget-container img{-webkit-mask-image:url( https://binaoptik.ir/wp-content/plugins/elementor/assets/mask-shapes/circle.svg );-webkit-mask-size:contain;-webkit-mask-position:center center;-webkit-mask-repeat:no-repeat;}.elementor-4573 .elementor-element.elementor-element-a565f6b{--display:flex;}.elementor-4573 .elementor-element.elementor-element-0d60bf5{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-4573 .elementor-element.elementor-element-e0b7917:not( .elementor-widget-image ) .elementor-widget-container, .elementor-4573 .elementor-element.elementor-element-e0b7917.elementor-widget-image .elementor-widget-container img{-webkit-mask-image:url( https://binaoptik.ir/wp-content/plugins/elementor/assets/mask-shapes/circle.svg );-webkit-mask-size:contain;-webkit-mask-position:center center;-webkit-mask-repeat:no-repeat;}.elementor-4573 .elementor-element.elementor-element-51c58bb:not( .elementor-widget-image ) .elementor-widget-container, .elementor-4573 .elementor-element.elementor-element-51c58bb.elementor-widget-image .elementor-widget-container img{-webkit-mask-image:url( https://binaoptik.ir/wp-content/plugins/elementor/assets/mask-shapes/circle.svg );-webkit-mask-size:contain;-webkit-mask-position:center center;-webkit-mask-repeat:no-repeat;}.elementor-4573 .elementor-element.elementor-element-775f321{--display:grid;--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-4573 .elementor-element.elementor-element-be51409{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-4573 .elementor-element.elementor-element-b6f046c{--display:grid;--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-4573 .elementor-element.elementor-element-90c7fae.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-4573 .elementor-element.elementor-element-90c7fae.elementor-wc-products ul.products li.product span.onsale{display:block;}.elementor-4573 .elementor-element.elementor-element-62075de{--display:grid;--min-height:0px;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-4573 .elementor-element.elementor-element-e40f21a{--display:grid;--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-4573 .elementor-element.elementor-element-4e9d41e{--display:flex;}.elementor-4573 .elementor-element.elementor-element-b87a673{--display:grid;--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-4573 .elementor-element.elementor-element-1a7cc48{--display:grid;--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(max-width:1024px){.elementor-4573 .elementor-element.elementor-element-764b7cf{--grid-auto-flow:row;}.elementor-4573 .elementor-element.elementor-element-527e125{--grid-auto-flow:row;}.elementor-4573 .elementor-element.elementor-element-0d60bf5{--grid-auto-flow:row;}.elementor-4573 .elementor-element.elementor-element-775f321{--grid-auto-flow:row;}.elementor-4573 .elementor-element.elementor-element-be51409{--grid-auto-flow:row;}.elementor-4573 .elementor-element.elementor-element-b6f046c{--grid-auto-flow:row;}.elementor-4573 .elementor-element.elementor-element-90c7fae.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-4573 .elementor-element.elementor-element-62075de{--grid-auto-flow:row;}.elementor-4573 .elementor-element.elementor-element-e40f21a{--grid-auto-flow:row;}.elementor-4573 .elementor-element.elementor-element-b87a673{--grid-auto-flow:row;}.elementor-4573 .elementor-element.elementor-element-1a7cc48{--grid-auto-flow:row;}}@media(min-width:768px){.elementor-4573 .elementor-element.elementor-element-764b7cf{--content-width:742px;}}@media(max-width:767px){.elementor-4573 .elementor-element.elementor-element-764b7cf{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-4573 .elementor-element.elementor-element-527e125{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-4573 .elementor-element.elementor-element-0d60bf5{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-4573 .elementor-element.elementor-element-775f321{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;}.elementor-4573 .elementor-element.elementor-element-be51409{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-4573 .elementor-element.elementor-element-b6f046c{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;}.elementor-4573 .elementor-element.elementor-element-90c7fae.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-4573 .elementor-element.elementor-element-62075de{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-4573 .elementor-element.elementor-element-e40f21a{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-4573 .elementor-element.elementor-element-b87a673{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-4573 .elementor-element.elementor-element-1a7cc48{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for html, class: .elementor-element-afe5b57 */:root {
    --card-w: 230px;
    --card-h: 120px;
    --radius: 10px;
    --gap: 24px;
}

.cards {
    display: flex;
    gap: var(--gap);
    justify-content: center;
    flex-wrap: wrap;
    perspective: 1200px; /* سه‌بعدی کردن صحنه */
}

.card {
    width: var(--card-w);
    height: var(--card-h);
    position: relative;
    cursor: pointer;
    outline: none;
}

.card__inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(.2, .9, .3, 1);
    border-radius: var(--radius);
}

.card:hover .card__inner,
.card:focus .card__inner,
.card.is-flipped .card__inner {
    transform: rotateY(180deg); /* برای چرخش افقی */
}

.card__face {
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-shadow: 0 18px 28px rgba(22, 22, 30, 0.12);
    transition: box-shadow 0.25s;
    text-align: center;
}

.card__face svg {
    width: 36px;
    height: 36px;
    fill: #fff;
    margin-bottom: 10px;
    opacity: .95;
}

.card__title {
    font-size: 14px;
    opacity: .95;
}

.card__face--front.color-1 { background: #F5B400; } /* رنگ اول */
.card__face--front.color-2 { background: #2D9CDB; } /* رنگ دوم */
.card__face--front.color-3 { background: #009688; } /* رنگ سوم */
/* کلاس رنگ چهارم حذف شده است */

.card__face--back {
    background: linear-gradient(180deg, #ffffff, #fafafa);
    color: #333;
    transform: rotateY(180deg);
    box-shadow: 0 18px 28px rgba(12, 12, 20, 0.06);
    padding: 18px;
}

.card__back-title {
    font-weight: 700;
    margin-bottom: 6px;
    color: #222;
}

.card__back-desc {
    font-size: 13px;
    color: #444;
    line-height: 1.3;
}

.card:focus {
    box-shadow: 0 0 0 4px rgba(30, 144, 255, 0.12);
    border-radius: var(--radius);
}

@media (max-width: 720px) {
    :root { 
        --card-w: 170px; 
        --card-h: 110px; 
        --gap: 14px; 
    }
    
    .card__face svg { 
        width: 28px; 
        height: 28px; 
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1a7cc48 */.card__face--front.color-1 { background: #F5B400; } /* رنگ اول */
.card__face--front.color-2 { background: #2D9CDB; } /* رنگ دوم */
.card__face--front.color-3 { background: #009688; } /* رنگ سوم */
.card__face--front.color-4 { background: #b88f7f; } /* این رنگ را می‌توانید تغییر دهید یا حذف کنید *//* End custom CSS */