body.elementor-page-773:not(.elementor-motion-effects-element-type-background),
        body.elementor-page-773>.elementor-motion-effects-container>.elementor-motion-effects-layer {
            background-color: black !important;}
                        body.elementor-page-773{
                            padding-top: 0 !important;
                        }
    .demo-cta {
        font-size: clamp(1.1rem, 0.6667rem + 1.0667vw, 2rem);
        font-family: 'IranYekan', Sans-Serif;
        font-weight: 500;
        padding: 13px 32px 14px 32px;
        place-content: center;
        color: white;
        text-shadow: 0 1px 0 #000;
        --border-angle: 0turn;
        --main-bg: conic-gradient(from var(--border-angle), black, black 5%, #452C03 60%, black 95%);
        border: solid 3px transparent;
        border-radius: 2em;
        --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, #c89f00, #e0b400 99%, transparent);
        background: var(--main-bg) padding-box, var(--gradient-border) border-box, var(--main-bg) border-box;
        background-position: center center;
        animation: bg-spin 3s linear infinite;
    }

    @keyframes bg-spin {
        to {
            --border-angle: 1turn;
        }
    }

    @property --border-angle {
        syntax: "<angle>";
        inherits: true;
        initial-value: 0turn;
    }

    .demo-cta:hover {
        --main-bg: conic-gradient(from var(--border-angle), black, black 5%, #c89f00 60%, black 95%);
        color: white !important;
    }


    .e-n-menu-item strong {
        font-weight: 600 !important;
    }

    .menu-tab-height {
        height: 600px;
    }



    /* ---------homepage button main-cta demo ---------- */

    .cta span {
        font-family: 'IranYekan', Sans-Serif !important;
        line-height: 1;
        font-weight: 500;
        color: #fff;
        font-size: 1.3rem;
    }

    .cta:hover span {
        color: white;
    }

    /* ONE way to write it; use ::before consistently */
    .cta::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 52px;
        height: 52px;
        /* hero circle size */
        border-radius: 9999px;
        background: #FECC00;
        transform: translateY(-50%);
        transition: width .3s ease, background .3s ease;
    }

    /* Center the arrow inside the circle */
    .cta__icon {
        position: absolute;
        /* half of 52px */
        top: 50%;
        width: 24px;
        height: 24px;
        /* logical viewport for the arrow */
        transform: translate(-50%, -50%);
        stroke: black;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
        transition: transform .5s ease;
    }

    /* Hover fills the background bar */
    .cta:hover::before {
        width: 100%;
        background: #686766;
    }

    .cta--hero span {
        transition: transform .3s ease, all 1s ease;
    }

    /* Text color flips on hover */
    .cta--hero:hover span {
        color: black;
        z-index: 3;
        font-weight: 600;
    }


    /* Optional: subtle nudge on hover */
    .cta:hover .cta__icon {
        transform: translate(-50%, ) translateX(10px);
    }

    .cta:active {
        transform: scale(0.96);
    }

    .cta--header span {
        color: black !important;
        font-size: 1rem !important;
    }

    .cta--header span {
        transition: transform .3s ease, all 1s ease;
    }

  

        /* ----------- hero image frame ----------- */

         :root {
            --pill-bg: rgba(255, 255, 255, .85);
            --pill-text: #1c1c1c;
            --pill-shadow: 0 2px 10px rgba(0, 0, 0, .10);
        }

        .frame-hero.is-hidden {
            visibility: hidden;
        } 

        /* prevent first-frame flicker */

        /* The outer box users see; aspect-ratio reserves space immediately */
         .frame-hero {
            width: clamp(280px, 60vw, 1200px);
            aspect-ratio: 1 / 1;
            position: relative;

        }

        @media(max-width:767px) {
            .frame-hero {
                width: 100%;
            }
        } 

        /* 300×300 design space, scaled by --s to match frame size */
         .stage-hero {
            position: absolute;
            left: 0;
            top: 0;
            width: 300px;
            height: 300px;
            transform: scale(var(--s, 1));
            transform-origin: top left;

        } 

        /* Everything inside here is clipped by the 300×300 path */
        .clipped-hero {
            position: absolute;
            inset: 0;
            isolation: isolate;
            overflow: hidden;
            clip-path: path("M219.71,266.68c7.04-5.23,52.7-40.34,56.51-100.86,3.34-53.07-26.82-104.59-76.86-131.24-2.05,3.91-4.1,7.83-6.15,11.74-4.35-1.59-8.03-2.77-10.71-3.57-9.66-2.9-17.16-4.32-26.88-6.16-1.33-.25-3.08-.58-5.38-.89-4.59-.63-8.23-.78-10.81-.89-8.89-.38-23.35.11-41.24,5.85,1.87,3.16,3.75,6.33,5.62,9.49-1.11.43-2.23.86-3.34,1.29-12.85,4.96-24.98,11.45-32.81,16.63-19,12.58-32.86,31.67-37.14,37.82,3.96.57,7.92,1.15,11.88,1.72-.58,1.31-1.27,2.89-2.02,4.71,0,0-1.02,2.44-1.92,4.77-13.46,34.47-5.88,71.51-5.88,71.51,9.46,46.27,44.18,72.29,51.72,77.7l.87-50.47c.27-1.98.75-3.97,2.61-5.3,1.79-1.29,2.81-1.37,4.36-1.37,4.61,0,3.1.06,10.93,4.65,6.54,3.84,24.75,14.43,48.91,29.47l57.11-33.11c1.29-.63,2.13-1.12,3.93-1.01,1.38.09,2.7.54,3.27.83,3.13,1.57,3.23,5.05,3.44,6.18v50.51Z");
        } 

        /* Animated gradient (filters removed) */
         .bg-hero {
            position: absolute;
            inset: 0;
            z-index: 0;
            background-color: #FECC00;
            will-change: transform;
            /* drop filter from will-change */
        } 

        @keyframes shift {
            0% {
                transform: translate3d(0, 0, 0) scale(1.02);
            }

            100% {
                transform: translate3d(-2%, -1%, 0) scale(1.06);
            }
        } 

        /* Centered rows inside the shape */
         .chips-hero {
            position: absolute;
            inset: 0;
            z-index: 2;
            display: grid;
            gap: 16px;
            grid-auto-rows: min-content;
            place-content: center;
            justify-items: center;
            width: 100%;
            height: 90%;
            padding: 18px;
            pointer-events: none;
            direction: rtl; 
            /* Persian tags flow */
        } 

        .row-hero {
            display: flex;
            gap: 12px;
            white-space: nowrap;
            overflow: hidden;
            mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
            -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
        } 

        .track-hero {
            display: inline-flex;
            gap: 12px;
            will-change: transform;
            min-width: max-content;
                /* prevents collapse while animating */
        }

        .pill-hero {
            display: inline-flex;
            align-items: center;
            height: 27px;
            padding: 0 14px;
            border-radius: 999px;
            background: var(--pill-bg);
            color: var(--pill-text);
            font-weight: 400;
            letter-spacing: .2px;
            box-shadow: var(--pill-shadow);
            font-size: 13px;
            font-family: "IranYekan", sans-serif;
            backdrop-filter: blur(2px);
        }

        .row-hero:nth-child(1) .track-hero {
            animation: marquee-l 28s linear infinite;
        }

        .row-hero:nth-child(2) .track-hero {
            animation: marquee-r 22s linear infinite;
        }

        .row-hero:nth-child(3) .track-hero {
            animation: marquee-l 36s linear infinite;
        }

        @keyframes marquee-r {
            from {
                transform: translateX(-50%)
            }

            to {
                transform: translateX(0)
            }
        }

        @keyframes marquee-l {
            from {
                transform: translateX(50%)
            }

            to {
                transform: translateX(0)
            }
        } 

        /* Outline, scaled with the stage (typos fixed) */
        .outline-hero {
            position: absolute;
            left: 0;
            top: 0;
            width: 300px;
            height: 300px;
            transform: scale(var(--s, 1));
            transform-origin: top left;
            pointer-events: none;
        }

        .outline-hero path {
            fill: none;
            stroke: #fecc00;
            stroke-width: 2;
            stroke-linejoin: round;
            stroke-linecap: round;
            vector-effect: non-scaling-stroke;
            shape-rendering: geometricPrecision;
        } 

        /* Motion accessibility */
         @media (prefers-reduced-motion: reduce) {

            .bg-hero,
            .track-hero {
                animation: none
            }
        } 






        /* ---------Product Carousel --------- */
                :root {
                    --gap: 1.25rem;
                    --speed: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                    --closed: 8rem;
                    --open: 35rem;
                    --accent: #fecc00;
                    --btn-hover: #c89f00;
                    --mobile-closed-width: 4rem;
                    /* Width of the non-active cards on mobile */
                    --mobile-open-width: 90vw;
                    /* Width of the active card on mobile */
                    --mobile-card-height: 18rem;
                    /* Fixed height for all cards on mobile */
                    --mobile-closed-height: 5rem;
                    /* Height of non-active cards on mobile */
                    --mobile-open-height: 10rem;
                }
        
        
                /* ===== HEADER ===== */
                .head {
                    max-width: 1400px;
                    margin: auto;
                    padding: 70px 20px 40px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 1rem;
                    font-family: 'IranYekan', Sans-Serif;
                    gap: 2rem;
                }
        
                .head h2 {
                    font-weight: 800;
                    font-size: 3rem;
                    line-height: 1.2;
                    color: var(--accent);
                }
        
                @media (min-width: 1024px) {
                    .head h2 {
                        font-size: 2.25rem;
                    }
                }
        
                .controls {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    width: 1080px;
                    gap: 1.5rem;
                }
        
                .nav-btn {
                    width: 2rem;
                    height: 2rem;
                    border: none;
                    border-radius: 50%;
                    background: #fffbeb;
                    color: #000;
                    font-size: 3.5rem;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    transition: 0.3s;
                }
        
                .nav-btn:hover {
                    background-color: var(--btn-hover);
                    color: white;
                }
        
                .nav-btn:disabled {
                    opacity: 0.3;
                    cursor: default;
                }
                .nav-btn:active {
                    background-color: #c89f00;
                }
        
                /* ===== SLIDER ===== */
                .slider {
                    max-width: 1400px;
                    margin: auto;
                    overflow: hidden;
                    display: flex;
                    justify-content: center;
                }
        
                .track {
                    display: flex;
                    gap: var(--gap);
                    align-items: flex-start;
                    justify-content: center;
                    scroll-behavior: smooth;
                    scroll-snap-type: x mandatory;
                    padding-bottom: 40px;
                }
        
                .track::-webkit-scrollbar {
                    display: none;
                }
        
                /* ===== CARD ===== */
                .project-card {
                    position: relative;
                    flex: 0 0 var(--closed);
                    height: 26rem;
                    border-radius: 1rem;
                    overflow: hidden;
                    cursor: pointer;
                    transition: flex-basis var(--speed), transform var(--speed);
                    font-family: 'IranYekan', Sans-Serif;
                }
        
                .project-card[active] {
                    flex-basis: var(--open);
                    transform: translateY(-6px);
                    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.45);
                }
        
                .project-card__bg {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    filter: sepia(100%) brightness(50%) !important;
                    transition: filter 0.3s, transform var(--speed);
                }
        
                .project-card:hover .project-card__bg {
                    filter: brightness(0.9) saturate(90%);
                    transform: scale(1.06);
                }
        
                .project-card__content {
                    position: absolute;
                    inset: 0;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    gap: 0.7rem;
                    padding: 0;
                    background: linear-gradient(transparent 70%, rgb(0, 0, 0) 100%);
                    z-index: 2;
                }

              
        
                .project-card[active] .project-card__blur {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-between;
                    gap: 0.9rem;
                    padding: 20px 15px;
                    background: rgba(0, 0, 0, 0.5) !important;
                    border-radius: 30px;
                    backdrop-filter: blur(10px);
                    -webkit-backdrop-filter: blur(10px);
                    box-shadow: 0px 1px 24px -1px rgba(0, 0, 0, 0.2);
                }
        
                .project-card:hover .project-card__blur {
                    background: transparent;
                    border-radius: 30px;
                    /* backdrop-filter: blur(10px); */
                    /* -webkit-backdrop-filter: blur(10px); */
                }
        
                .project-card__title {
                    color: #fff;
                    font-weight: 600;
                    font-size: 1.35rem;
                    writing-mode: vertical-rl;
                    transform: rotate(180deg);
                }
        
                .project-card__thumb,
                .project-card__desc,
                .project-card__btn {
                    display: none;
                }
        
                .project-card[active] .project-card__content {
                    align-items: center;
                    justify-content: center;
                    padding: 1.2rem 2rem;
                    gap: 1.1rem;
                }
        
                .project-card[active] .project-card__title {
                    writing-mode: horizontal-tb;
                    transform: none;
                    font-size: 2.1rem;
                }
        
                .project-card[active] .project-card__thumb,
                .project-card[active] .project-card__desc,
                .project-card[active] .project-card__btn {
                    display: block;
                }
        
        
                .project-card__desc {
                    color: #ddd;
                    font-size: 1rem;
                    line-height: 1.4;
                    max-width: 16rem;
                    text-align: center;
                }
        
                .project-card__btn {
                    padding: 0.55rem 1.3rem;
                    border: none;
                    border-radius: 9999px;
                    background: var(--accent);
                    color: #000 !important;
                    font-size: 0.9rem;
                    font-weight: 600;
                    cursor: pointer;
                }
        
                .project-card__btn:hover {
                    background: #e0b400;
                    color: black;
                }
        
                /* ===== DOTS ===== */
                .dots {
                    display: flex;
                    gap: 0.5rem;
                    justify-content: center;
                    padding: 20px 0;
                }
        
                .dot {
                    width: 13px;
                    height: 13px;
                    border-radius: 50%;
                    cursor: pointer;
                    transition: 0.3s;
                    border: none;
                    background-color: #aaa;
                }
                
                .dot:hover{
                    background: #e0b400;
                }
        
                .dot.active {
                    background: var(--accent);
                    transform: scale(1.2);
                }
        
                @media (min-width: 768px) {
                    .project-card__bg {
                        height: 100% !important;
                    }
                }
        
                /* ===== MOBILE STYLES (max-width: 767px) ===== */
                @media (max-width: 767px) {
        
                    /* --- HEADER ADJUSTMENTS --- */
                    .head {
                        padding: 30px 1rem 10px;
                        /* Adjust padding for mobile header */
                        flex-direction: column;
                        align-items: center;
                        gap: 1rem;
                    }
        
                    .head h2 {
                        font-size: 1.3rem;
                        /* Smaller title on mobile */
                    }
        
                    .controls {
                        /* Ensure controls are visible */
                        gap: 0.25rem;
                        width: 100%;
                    }
        
                    .nav-btn {
                        width: 2rem;
                        height: 2rem;
                        font-size: 1.2rem;
                    }
        
                    /* --- DOTS --- */
                    .dots {
                        display: none;
                        /* Hide dots on mobile */
                    }
        
                    /* --- SLIDER/TRACK (Vertical Stacking) --- */
                    .slider {
                        max-width: 100%;
                        /* No need for overflow-y: scroll here, let the body handle it */
                        overflow: visible;
                        padding: 0 0 40px;
                    }
        
                    .track {
                        /* KEY CHANGE: Stack cards vertically */
                        flex-direction: column;
                        /* Cards should now take up the full width of the container */
                        align-items: center;
                        /* Remove snap, rely on natural scrolling */
                        scroll-snap-type: none;
                        padding: 0 1rem 0;
                        /* Horizontal padding for the cards */
                        gap: 0;
                        /* Cards abut vertically, height is controlled on the card itself */
                    }
        
                    /* --- CARD (Mobile) --- */
                    .project-card {
                        /* Initial state for ALL cards */
                        width: 100%;
                        height: var(--mobile-closed-height);
                        /* Default small height */
                        flex: 0 0 auto;
                        border-radius: 0;
                        /* Remove border-radius to make them a continuous stack */
                        overflow: hidden;
                        cursor: pointer;
                        transition: height var(--speed), border-radius 0.3s, box-shadow var(--speed) transform var(--speed);
                        transform: all 0.4s;
                        /* Remove any desktop transforms */
                        box-shadow: none;
                    }
        
                    /* Active Card State */
                    .project-card[active] {
                        flex-basis: var(--mobile-card-height);
                        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
                        /* Add shadow to active card */
                        border-radius: 1rem;
                        /* Re-add radius for the active card */
                        transform: translateY(-5px);
                        /* Optional: Lift it slightly for effect */
                    }
        
                    /* --- CARD BACKGROUND --- */
                    .project-card__bg {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        /* Default (Non-Active) look: Black and white/low brightness */
                        filter: sepia(100%) brightness(50%)!important;
                        transition: filter 0.3s;
                        transform: none !important;
                    }
        
                    .project-card[active] .project-card__bg {
                        /* Active look: Color and high brightness */
                        filter: brightness(0.5) saturate(100%) !important;
                        width: 100%;
                        height: 100%;
                    }
        
                    /* --- CARD CONTENT (The key for visibility) --- */
                    .project-card__content {
                        /* Ensure content stays aligned/centered vertically for the small card */
                        justify-content: center;
                        align-items: center;
                        background: none;
                        /* Remove gradient for simplified look */
                    }
        
                    .project-card__blur {
                        /* General style for the content blur box */
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        padding: 20px 15px;
                        background: transparent;
                        /* border-radius: 30px;
                        backdrop-filter: blur(10px);
                        -webkit-backdrop-filter: blur(10px);
                        box-shadow: 0px 1px 24px -1px rgba(0, 0, 0, 0.2); */
                    }
        
                    /* Title Style (Large and Centered for ALL cards) */
                    .project-card__title {
                        writing-mode: horizontal-tb;
                        /* Horizontal text for all titles */
                        transform: none;
                        font-size: 1.4rem;
                        /* Use a slightly smaller size for mobile */
                        color: #fff;
                        font-weight: 700;
                    }
        
                    /* --- HIDE/SHOW DETAILS --- */
                    /* Hide all descriptive content by default on mobile */
        
                    .project-card__desc,
                    .project-card__btn {
                        display: none;
                    }
        
                    /* SHOW descriptive content ONLY on the active card */
                    .project-card[active] .project-card__content {
                        /* Re-add the background gradient for the active card */
                        background: linear-gradient(transparent 70%, rgb(0, 0, 0) 100%);
                        padding: 1.2rem 2rem;
                    }
        
                    .project-card[active] .project-card__title {
                        font-size: 1.3rem;
                    }
        
                    .project-card[active] .project-card__desc {
                        font-size: 0.8rem;
                        margin-bottom: 0.5rem;
                    }
        
                    .project-card[active] .project-card__btn {
                        font-size: 0.8rem;
                    }
        
                    .project-card[active] .project-card__blur {
                        /* Ensure blur content is spaced for the expanded details */
                        justify-content: space-between;
                        gap: 0.1rem;
                    }
        
                    .project-card[active] .project-card__desc,
                    .project-card[active] .project-card__btn {
                        display: block;
                    }
                }


.hero-section .gradient-text .slogan h1,
/* Adjust .hero-section to your wrapper class */
.hero-section .slogan p {
        background: url(https://hesabdarimahak.ir/wp-content/uploads/2025/10/svgNoise2.svg) repeat 0 0 / 500px auto, conic-gradient(from 319deg at 55% 50%, #e0b40040, #ffd6336e, #c89f0061), linear-gradient(180deg, #ffd321 0%, #9d7d00 100%);
    background-blend-mode: color-burn;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    font-weight: 700;
}

@media (max-width: 768px) {

    .hero-section .slogan p,
    .hero-section .gradient-text .slogan h1 {
        background-size: 250px auto;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

.header-font *{
    font-family: "Lahzeh","IranYekan",sans-serif !important;
}


/*---------  Implementing the content-visibility Technique ---------------*/

.deferred-render {
  content-visibility: auto; /* Core rule: Defer off-screen rendering */
  contain-intrinsic-size: 0 500px; /* Prevents layout jumps; adjust height per section (e.g., 300px for short FAQs, 800px for card grids) */
}

/* Optional: Smooth transition when content "pops" in (pairs great with your motion effects) */
.deferred-render {
  transition: opacity 0.2s ease-in-out; /* Subtle fade to mask the render moment */
}

.deferred-render:where(:not(:placeholder-shown)) {
  opacity: 1; /* Ensures full opacity once rendered */
}