.elementor-kit-7{--e-global-color-primary:#19A88A;--e-global-color-secondary:#172B5B;--e-global-color-text:#24324A;--e-global-color-accent:#087F6A;--e-global-color-53e6f40:#F5F8FA;--e-global-color-bb88bfd:#FFFFFF;--e-global-typography-primary-font-family:"VazirMatn";font-feature-settings:"numr";--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"VazirMatn";--e-global-typography-secondary-font-weight:500;--e-global-typography-text-font-family:"VazirMatn";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-global-typography-54dc785-font-family:"VazirMatn";--e-global-typography-54dc785-font-weight:600;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 h1{font-family:"VazirMatn", Sans-serif;font-feature-settings:"numr";font-weight:800;}.elementor-kit-7 h2{font-family:"VazirMatn", Sans-serif;font-feature-settings:"numr";font-weight:700;}.elementor-kit-7 h3{font-family:"VazirMatn", Sans-serif;font-feature-settings:"numr";font-weight:700;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS */html,
body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/*قابل کلیک کردن کل آیکن باکسهای مربوط به خدمات */
.service-box {
    position: relative;
    cursor: pointer;
}

.service-box .elementor-icon-box-wrapper {
    position: relative;
}

.service-box .elementor-icon-box-title a {
    position: static;
}

.service-box .elementor-icon-box-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
}

/*افمت جذاب وسبک دادن به آیکن باکس ها هنگام رفتن موس روی آن*/

/* =========================================================
   PREMIUM GLASS SERVICE BOX
   واضح تر + درخشان تر + مدرن
   CLASS: service-box
   ========================================================= */


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

.service-box {

    position: relative;
    overflow: hidden;
    isolation: isolate;

    cursor: pointer;

    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.23),
            rgba(255,255,255,.07)
        );

    backdrop-filter:
        blur(18px)
        saturate(140%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(140%);

    border:
        1px solid
        rgba(255,255,255,.28);

    box-shadow:

        0 10px 30px
        rgba(5,12,22,.16),

        inset 0 1px 0
        rgba(255,255,255,.5),

        inset 0 -1px 0
        rgba(0,0,0,.08);

    transition:

        transform .55s
        cubic-bezier(.16,1,.3,1),

        box-shadow .55s ease,

        border-color .4s ease;
}


/* =========================================================
   نور محیطی کارت
   ========================================================= */

.service-box::before {

    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    top: -140px;
    right: -130px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,220,155,.30) 0%,
            rgba(255,235,190,.15) 32%,
            transparent 70%
        );

    filter:
        blur(8px);

    opacity: .18;

    transform:
        scale(.45);

    transition:

        transform .9s
        cubic-bezier(.16,1,.3,1),

        opacity .5s ease;

    pointer-events: none;

    z-index: -2;
}


/* =========================================================
   ✨ GLASS REFLECTION
   ========================================================= */

.service-box::after {

    content: "";

    position: absolute;

    top: -130%;

    left: -75%;

    width: 38%;

    height: 360%;

    transform:
        rotate(25deg);

    background:
        linear-gradient(
            90deg,

            transparent 0%,

            rgba(255,255,255,.05) 15%,

            rgba(255,255,255,.28) 30%,

            rgba(255,255,255,.82) 45%,

            rgba(255,255,255,1) 50%,

            rgba(255,255,255,.82) 55%,

            rgba(255,255,255,.28) 70%,

            rgba(255,255,255,.05) 85%,

            transparent 100%
        );

    filter:
        blur(1px);

    opacity: 0;

    pointer-events: none;

    z-index: 50;
}


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

.service-box:hover {

    transform:
        translateY(-10px)
        scale(1.018);

    border-color:
        rgba(255,235,195,.55);

    box-shadow:

        0 28px 60px
        rgba(0,0,0,.25),

        0 0 38px
        rgba(255,215,150,.16),

        inset 0 1px 0
        rgba(255,255,255,.7);
}


/* =========================================================
   حرکت Reflection
   ========================================================= */

.service-box:hover::after {

    opacity: .9;

    animation:
        glassSweep
        2.05s
        cubic-bezier(.25,.46,.45,.94)
        1;
}


@keyframes glassSweep {

    0% {

        left: -75%;
    }

    100% {

        left: 145%;
    }
}


/* =========================================================
   نور گوشه
   ========================================================= */

.service-box:hover::before {

    opacity: .9;

    transform:
        scale(2.4)
        translate(-20px,20px);
}


/* =========================================================
   ICON BOX
   ========================================================= */

.service-box
.elementor-icon-box-icon {

    position: relative;

    z-index: 10;

    transition:

        transform .6s
        cubic-bezier(.16,1,.3,1);
}


/* =========================================================
   ICON
   ========================================================= */

.service-box
.elementor-icon {

    position: relative;

    display: inline-block;

    color: #ffffff;

    transition:

        transform .6s
        cubic-bezier(.16,1,.3,1),

        filter .45s ease;
}


.service-box:hover
.elementor-icon {

    transform:
        translateY(-7px)
        scale(1.16);

    filter:

        drop-shadow(
            0 0 8px
            rgba(255,255,255,.9)
        )

        drop-shadow(
            0 0 20px
            rgba(255,215,150,.4)
        );
}


/* =========================================================
   هاله پشت آیکن
   ========================================================= */

.service-box
.elementor-icon-box-icon::before {

    content: "";

    position: absolute;

    width: 125px;
    height: 125px;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%,-50%)
        scale(.15);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,220,160,.42),
            rgba(255,235,190,.20) 32%,
            transparent 72%
        );

    filter:
        blur(10px);

    opacity: 0;

    transition:

        transform .75s
        cubic-bezier(.16,1,.3,1),

        opacity .45s ease;

    pointer-events: none;

    z-index: -3;
}


.service-box:hover
.elementor-icon-box-icon::before {

    opacity: 1;

    transform:
        translate(-50%,-50%)
        scale(1.35);
}


/* =========================================================
   حلقه شیشه‌ای
   ========================================================= */

.service-box
.elementor-icon-box-icon::after {

    content: "";

    position: absolute;

    width: 72px;
    height: 72px;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%,-50%)
        scale(.4);

    border-radius: 50%;

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

    border:
        1px solid
        rgba(255,255,255,.65);

    box-shadow:

        inset 0 1px 3px
        rgba(255,255,255,.85),

        0 0 28px
        rgba(255,220,160,.20);

    opacity: 0;

    transition:

        transform .7s
        cubic-bezier(.16,1,.3,1),

        opacity .4s ease;

    pointer-events: none;

    z-index: -1;
}


.service-box:hover
.elementor-icon-box-icon::after {

    opacity: 1;

    transform:
        translate(-50%,-50%)
        scale(1.28);
}


/* =========================================================
   ⭐ STAR روی خود آیکن
   ========================================================= */

.service-box
.elementor-icon {

    overflow: visible !important;
}


.service-box
.elementor-icon::after {

    content: "✦";

    position: absolute;

    top: -13px;
    right: -13px;

    width: 20px;
    height: 20px;

    display: flex;

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

    font-family:
        Arial,
        sans-serif;

    font-size: 17px;

    font-weight: bold;

    line-height: 1;

    color: #ffffff;

    opacity: 0;

    transform:
        scale(.3)
        rotate(-25deg);

    text-shadow:

        0 0 3px #ffffff,

        0 0 7px
        rgba(255,235,195,.9),

        0 0 15px
        rgba(255,215,150,.65);

    pointer-events: none;

    z-index: 999;

    transition:
        opacity .35s ease,

        transform .5s
        cubic-bezier(.16,1,.3,1);
}


/* =========================================================
   ⭐ STAR ACTIVE
   ========================================================= */

.service-box:hover
.elementor-icon::after {

    opacity: 1;

    transform:
        scale(1.25)
        rotate(15deg);

    animation:
        starGlow
        1.25s
        ease-in-out
        infinite;
}


/* =========================================================
   ⭐ STAR ANIMATION
   ========================================================= */

@keyframes starGlow {

    0% {

        opacity: .35;

        transform:
            scale(.75)
            rotate(-10deg);

        text-shadow:

            0 0 3px #fff,

            0 0 7px
            rgba(255,225,170,.5);
    }


    50% {

        opacity: 1;

        transform:
            scale(1.5)
            rotate(20deg);

        text-shadow:

            0 0 4px #fff,

            0 0 9px #fff,

            0 0 18px
            rgba(255,220,150,1),

            0 0 32px
            rgba(255,210,130,.65);
    }


    100% {

        opacity: .4;

        transform:
            scale(.85)
            rotate(45deg);

        text-shadow:

            0 0 4px #fff,

            0 0 10px
            rgba(255,215,150,.5);
    }
}


/* =========================================================
   TITLE
   ========================================================= */

.service-box
.elementor-icon-box-title {

    transition:

        transform .45s
        cubic-bezier(.16,1,.3,1),

        color .3s ease;
}


.service-box:hover
.elementor-icon-box-title {

    transform:
        translateY(-4px);

    color:
        #ffffff;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.service-box
.elementor-icon-box-description {

    transition:

        transform .4s ease,

        opacity .35s ease;
}


.service-box:hover
.elementor-icon-box-description {

    transform:
        translateY(-2px);

    opacity: .9;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .service-box:hover {

        transform:
            translateY(-4px)
            scale(1.005);
    }

    .service-box:hover::after {

        animation: none;

        opacity: 0;
    }

    .service-box:hover
    .elementor-icon::after {

        animation: none;

        opacity: .7;
    }
}

/*لینک دهی کل آیکن باکس در حالت موبایل*/
/* ==========================/* کل Icon Box قابل کلیک شود */
.service-box-mobile {
    cursor: pointer;
}

/* لینک موجود Elementor */
.service-box-mobile a {
    cursor: pointer;
}




/* =====================================================
   MOBILE SERVICE BOX
   Glass Reflection + Orange Hover
   ===================================================== */

.service-box-mobile {
    overflow: hidden;

    /* حالت عادی بدون تغییر */
    transition: background 0.35s ease;
}


/* =====================================================
   🟠 نارنجی شفاف فقط هنگام Hover
   ===================================================== */

.service-box-mobile:hover {
    background:
        linear-gradient(
            135deg,
            rgba(255, 166, 72, 0.20),
            rgba(255, 140, 45, 0.10)
        );
}


/* =====================================================
   ✨ Glass Reflection
   همیشه فعال و مستقل از Hover
   ===================================================== */

.service-box-mobile::after {
    content: "";

    position: absolute;

    top: -100%;
    left: -60%;

    width: 23%;
    height: 300%;

    transform: rotate(24deg);

    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.08) 20%,
        rgba(255,255,255,0.28) 35%,
        rgba(255,255,255,0.65) 45%,
        rgba(255,255,255,0.95) 50%,
        rgba(255,255,255,0.65) 55%,
        rgba(255,255,255,0.28) 65%,
        rgba(255,255,255,0.08) 80%,
        transparent 100%
    );

    filter:
        blur(1px)
        drop-shadow(
            0 0 8px
            rgba(255,255,255,0.45)
        );

    opacity: 0;

    pointer-events: none;

    z-index: 100;

    animation:
        serviceGlassSweep
        5s
        ease-in-out
        infinite;
}


/* =====================================================
   حرکت آرام نور
   ===================================================== */

@keyframes serviceGlassSweep {

    0% {
        left: -60%;
        opacity: 0;
    }

    8% {
        opacity: .85;
    }

    30% {
        left: 125%;
        opacity: .85;
    }

    42% {
        left: 145%;
        opacity: 0;
    }

    100% {
        left: 145%;
        opacity: 0;
    }
}

/*تغییر سایز قالب بخش شبکه، نرم افزار و آموزش*/
/*کانتینر1 در قالب ها بخش کلاس تعریف شده است*/
.container1
{
    width: 110%!important;
    left: 20px;
   
}

/*تنظیم فاصله بخش مشاهده */
.View
{
    bottom: 30px;
}

/*تنظیم فاصله تک تک آیتم های آموزش*/

.elementor-991 .elementor-element.elementor-element-768f45bf:not(.elementor-motion-effects-element-type-background), .elementor-991 .elementor-element.elementor-element-768f45bf > .elementor-motion-effects-container > .elementor-motion-effects-layer {
   
    bottom: 16px;
}

.elementor-991 .elementor-element.elementor-element-1853750d:not(.elementor-motion-effects-element-type-background), .elementor-991 .elementor-element.elementor-element-1853750d > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    
    bottom: 32px;
}

.elementor-991 .elementor-element.elementor-element-4e59fbbf:not(.elementor-motion-effects-element-type-background), .elementor-991 .elementor-element.elementor-element-4e59fbbf > .elementor-motion-effects-container > .elementor-motion-effects-layer {
       bottom: 48px;
}

.elementor-991 .elementor-element.elementor-element-ba8b9de:not(.elementor-motion-effects-element-type-background), .elementor-991 .elementor-element.elementor-element-ba8b9de > .elementor-motion-effects-container > .elementor-motion-effects-layer {
   bottom: 64px;
}

/*تنظیم فاصله تک تک آیتم های دانلودها*/
.elementor-896 .elementor-element.elementor-element-79f8c9e:not(.elementor-motion-effects-element-type-background), .elementor-896 .elementor-element.elementor-element-79f8c9e > .elementor-motion-effects-container > .elementor-motion-effects-layer {
   bottom: -5px;
}


.elementor-896 .elementor-element.elementor-element-d62b6b4:not(.elementor-motion-effects-element-type-background), .elementor-896 .elementor-element.elementor-element-d62b6b4 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
   bottom: 12px;
}

.elementor-896 .elementor-element.elementor-element-e863a24:not(.elementor-motion-effects-element-type-background), .elementor-896 .elementor-element.elementor-element-e863a24 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
   bottom: 28px;
}

.elementor-896 .elementor-element.elementor-element-ea05071:not(.elementor-motion-effects-element-type-background), .elementor-896 .elementor-element.elementor-element-ea05071 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
   bottom: 44px;
}


/*تنظیم فاصله تک تک آیتم های دانلودها(نرم افزار)*/

.elementor-1252 .elementor-element.elementor-element-19f8da4:not(.elementor-motion-effects-element-type-background), .elementor-1252 .elementor-element.elementor-element-19f8da4 > .elementor-motion-effects-container > .elementor-motion-effects-layer 
{
   
    bottom: -5px;
}

.elementor-1252 .elementor-element.elementor-element-54e7210:not(.elementor-motion-effects-element-type-background), .elementor-1252 .elementor-element.elementor-element-54e7210 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
   bottom:12px;
}


.elementor-1252 .elementor-element.elementor-element-4cbace3:not(.elementor-motion-effects-element-type-background), .elementor-1252 .elementor-element.elementor-element-4cbace3 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
   bottom:28px;
}


.elementor-1252 .elementor-element.elementor-element-fe39364:not(.elementor-motion-effects-element-type-background), .elementor-1252 .elementor-element.elementor-element-fe39364 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
   bottom:44px;
}



/*نمایش ندادن لوگوی اضافی در فوتر سایت*/
.site-footer .site-branding 
{
   
    display: none;
}



/*تغییر اسلاید خدمات در حالت موبایل در داخل اسلاید کارشناسان فناوری اطلاعات*/
/* =========================================
   فقط عنوان دارای کلاس title-heading
   خطوط دو طرف متن
   ========================================= */

.title-heading .elementor-heading-title {
    position: relative !important;

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

    width: 100% !important;
    margin: 0 !important;
    padding: 0 12px !important;

    box-sizing: border-box !important;
    white-space: nowrap !important;

    /* فاصله خط از متن */
    --text-gap: 3em;

    /* فاصله خط از لبه کانتینر */
    --edge-gap: 12px;
}


/* =========================================
   خط سمت راست
   ========================================= */

.title-heading .elementor-heading-title::after {
    content: "" !important;

    position: absolute !important;
    top: 50% !important;

    left: calc(50% + var(--text-gap)) !important;

    width: max(
        30px,
        calc(50% - var(--text-gap) - var(--edge-gap))
    ) !important;

    height: 2px !important;

    transform: translateY(-50%) !important;

    background: linear-gradient(
        to right,
        #1769e0,
        rgba(23,105,224,0.65),
        rgba(23,105,224,0.05)
    ) !important;

    border: none !important;
    border-radius: 10px !important;
}


/* =========================================
   خط سمت چپ
   ========================================= */

.title-heading .elementor-heading-title::before {
    content: "" !important;

    position: absolute !important;
    top: 50% !important;

    right: calc(50% + var(--text-gap)) !important;

    width: max(
        30px,
        calc(50% - var(--text-gap) - var(--edge-gap))
    ) !important;

    height: 2px !important;

    transform: translateY(-50%) !important;

    background: linear-gradient(
        to left,
        #1769e0,
        rgba(23,105,224,0.65),
        rgba(23,105,224,0.05)
    ) !important;

    border: none !important;
    border-radius: 10px !important;
}


/* =========================================
   موبایل
   ========================================= */

@media (max-width: 767px) {

    .title-heading .elementor-heading-title {
        --text-gap: 2.5em;
        --edge-gap: 8px;

        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .title-heading .elementor-heading-title::before,
    .title-heading .elementor-heading-title::after {
        height: 1.5px !important;
    }
}




/*قالب بخش آموزش،شبکه،دانلودها*/

.container1
{
    height: 45px;
   
}

/* =========================================================
   موبایل و تبلت
   فاصله 5px از هر دو طرف
   ========================================================= */
@media (max-width: 767px) {

    .container1 {
        /* 5px از چپ + 5px از راست */
        width: calc(100% - 10px) !important;

        /* جلوگیری از محدودیت عرض */
        max-width: none !important;

        /* فاصله سمت چپ */
        margin-left: 5px !important;

        /* فاصله سمت راست */
        margin-right: 5px !important;

        /* محاسبه صحیح عرض */
        box-sizing: border-box !important;

        /* جلوگیری از جابه‌جایی */
        position: relative !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }
}


/* =========================================================
   دسکتاپ
   از 768px به بالا
   ========================================================= */
@media (min-width: 768px) {

    .container1 {
        /* تابع کامل کانتینر والد */
        width: 100% !important;
        max-width: 100% !important;

        /* حذف فاصله موبایل */
        margin-left: 0 !important;
        margin-right: 0 !important;

        box-sizing: border-box !important;

        position: relative !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }
}



/*بخش مشاهده همه آموزش ها و همه فایل ها*/

/* =========================================================
   تنظیم container1 و view_learning
   موبایل و تبلت: حداکثر تا 767px
   ========================================================= */

@media (max-width: 767px) {

    /* -----------------------------------------------------
       container1
       فاصله 5px از سمت چپ و راست کانتینر والد
       ----------------------------------------------------- */
    .container1 {
        width: calc(100% - 10px) !important;
        max-width: none !important;

        margin-left: 5px !important;
        margin-right: 5px !important;

        box-sizing: border-box !important;

        position: relative !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }


    /* -----------------------------------------------------
       view_learning
       همان فاصله 5px از سمت چپ و راست کانتینر والد
       ----------------------------------------------------- */
    .view_learning {
        width: calc(100% - 10px) !important;
        max-width: none !important;

        margin-left: 5px !important;
        margin-right: 5px !important;

        box-sizing: border-box !important;

        position: relative !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;


        /* -------------------------------------------------
           قرارگیری آیکن و متن
           ------------------------------------------------- */

        display: flex !important;

        /* آیکن و متن در یک ردیف */
        flex-direction: row !important;

        /* وسط‌چین افقی */
        justify-content: center !important;

        /* وسط‌چین عمودی */
        align-items: center !important;

        /* فاصله ثابت بین آیکن و متن */
        gap: 8px !important;

        /* متن نیز وسط‌چین باشد */
        text-align: center !important;
    }


    /* -----------------------------------------------------
       جلوگیری از تغییر اندازه آیکن
       ----------------------------------------------------- */
    .view_learning i,
    .view_learning svg,
    .view_learning img {
        flex-shrink: 0 !important;
    }


    /* -----------------------------------------------------
       جلوگیری از فشرده شدن متن
       ----------------------------------------------------- */
    .view_learning span {
        flex-shrink: 0 !important;
    }
}


/* =========================================================
   دسکتاپ
   از 768px به بالا
   ========================================================= */

@media (min-width: 768px) {

    /* -----------------------------------------------------
       container1
       کاملاً تابع کانتینر والد
       ----------------------------------------------------- */
    .container1 {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        box-sizing: border-box !important;

        position: relative !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }


    /* -----------------------------------------------------
       view_learning
       کاملاً تابع کانتینر والد
       ----------------------------------------------------- */
    .view_learning {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        box-sizing: border-box !important;

        position: relative !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;


        /* -------------------------------------------------
           وسط‌چین آیکن و متن
           ------------------------------------------------- */
        display: flex !important;

        flex-direction: row !important;

        justify-content: center !important;

        align-items: center !important;

        /* فاصله ثابت آیکن و متن */
        gap: 8px !important;

        text-align: center !important;
    }


    /* جلوگیری از تغییر اندازه آیکن */
    .view_learning i,
    .view_learning svg,
    .view_learning img {
        flex-shrink: 0 !important;
    }


    /* جلوگیری از فشرده شدن متن */
    .view_learning span {
        flex-shrink: 0 !important;
    }
}/* End custom CSS */