.elementor-1059 .elementor-element.elementor-element-38f0602{--display:flex;--min-height:70px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--gap:0px 0px;--background-transition:0.3s;}.elementor-1059 .elementor-element.elementor-element-617d2af{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--background-transition:0.3s;}.elementor-1059 .elementor-element.elementor-element-617d2af.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-1059 .elementor-element.elementor-element-9706adf{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--background-transition:0.3s;}.elementor-1059 .elementor-element.elementor-element-9706adf.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-1059 .elementor-element.elementor-element-cc18741{--display:flex;--justify-content:space-around;--background-transition:0.3s;--margin-block-start:0px;--margin-block-end:0px;--margin-inline-start:0px;--margin-inline-end:0px;}.elementor-1059 .elementor-element.elementor-element-85942f6{text-align:center;}.elementor-1059 .elementor-element.elementor-element-85942f6 .elementor-heading-title{color:var( --e-global-color-accent );font-family:"IRANYekanX", Sans-serif;font-size:18px;font-weight:600;}.elementor-1059 .elementor-element.elementor-element-6003e69{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--background-transition:0.3s;}:root{--page-title-display:none;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}@media(min-width:768px){.elementor-1059 .elementor-element.elementor-element-617d2af{--width:18%;}.elementor-1059 .elementor-element.elementor-element-9706adf{--width:63.923%;}.elementor-1059 .elementor-element.elementor-element-6003e69{--width:24%;}}/* Start custom CSS for container, class: .elementor-element-cc18741 *//* ===== Wrapper ===== */
.motion-wrapper {
    position: relative;
    padding: 40px 80px;
    overflow: hidden;
}

/* =====================================
   LOGO — SOFT SCALE + FADE (BW)
===================================== */
.logo {
    position: absolute;
    inset: 0;
    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;
}

.logo img {
    height: 120px; /* ✅ کمی بزرگ‌تر */
    opacity: 0;
    transform: scale(0.9); /* ✅ شروع کوچک */
    filter: grayscale(100%) contrast(1.1); /* ✅ سیاه‌وسفید */

    animation: logo-elegant-motion 5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 1.5s;

    will-change: transform, opacity;
}

@keyframes logo-elegant-motion {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    25% {
        opacity: 1;
        transform: scale(1);
    }
    55% {
        opacity: 0.4;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.88);
    }
}

/* =====================================
   Outer Frame
===================================== */
.frame-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.frame-rect {
    fill: none;
    stroke: #000;
    stroke-width: 0.5;

    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;

    animation: draw-frame 10s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 1.8s;
}

@keyframes draw-frame {
    to { stroke-dashoffset: 0; }
}

/* =====================================
   Boxes Layout
===================================== */
.boxes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    position: relative;
    z-index: 2;
    margin-top: 40px;
}

.box {
    position: relative;
    height: 140px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.box svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* =====================================
   Box Stroke Animation (Soft)
===================================== */
.box rect {
    fill: none;
    stroke: #000;
    stroke-width: 0.5;

    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;

    animation: draw-box 13s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Box Timings */
.box-1 rect { animation-delay: 3.6s; }
.box-2 rect { animation-delay: 3.9s; }
.box-3 rect { animation-delay: 4.2s; }
.box-4 rect { animation-delay: 4.5s; }

@keyframes draw-box {
    to { stroke-dashoffset: 0; }
}

/* =====================================
   Text
===================================== */
.box span {
    opacity: 0;
    font-size: 16px;
    color: #000;

    animation: text-fade 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.box-1 span { animation-delay: 5.4s; }
.box-2 span { animation-delay: 5.7s; }
.box-3 span { animation-delay: 6.0s; }
.box-4 span { animation-delay: 6.3s; }

@keyframes text-fade {
    to { opacity: 1; }
}

/* =========================
   MOBILE ONLY — SAFE OVERRIDE
========================= */
@media (max-width: 768px) {

    .motion-wrapper {
        padding: 24px !important;
    }

    .boxes {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        justify-items: center !important;
    }

    .logo img {
        height: 96px !important;
    }
}

@media (max-width: 480px) {

    .boxes {
        grid-template-columns: 1fr !important;
    }

    .box {
        width: 100% !important;
        max-width: 320px;
        aspect-ratio: 4 / 3 !important;
    }

    .box span {
        font-size: 14px !important;
        text-align: center;
    }
}/* End custom CSS */