:root {
        /* Typography */
    --font-sm: clamp(14px, 1.5vw, 16px);   /* متن فرعی، توضیحات */
    --font-md: clamp(16px, 2vw, 18px);     /* متن اصلی/بدنه */
    --font-lg: clamp(24px, 3.5vw, 36px);   /* عنوان‌ها */
    --font-subtitle: clamp(18px, 2vw, 24px);

        /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;


    /* رنگ اصلی برند */
    --color-primary: #0a1a3c;
    --color-primary-light: #1a3c8f;

    /* پس‌زمینه‌ها */
    --color-bg: rgb(223, 248, 253);
    --color-bg-card: #ffffff;
    --color-bg-dark: #020024;
    --color-bg-dark-b: #10204c;

    /* متن */
    --color-text: #2c3e50;
    --color-text-title: #00205c;
    --color-text-light: #f2f2f2;
    --color-text-muted: #767575;

        /* Colors */
    --color-primary: #0a1a3c;
    --color-bg: rgb(223, 248, 253);
    --color-bg-card: #ffffff;
    --color-text: #2c3e50;
    --color-text-light: #f2f2f2;


    --cyrus-navy: #071B3A;   
    --cyrus-blue: #087DBF;
    --cyrus-cyan: #00A6C8;
    --cyrus-yellow: #F7C948;
    --cyrus-orange: #F28C28;
    --cyrus-red: #E9574F;


        --btn-red: rgba(250, 89, 105);
         --btn-orange:rgba(253, 165, 88);
         --btn-yellow:rgba(252, 243, 171);

         --btn-red: #FA5969;
         --btn-orange: #FDA558;
         --btn-yellow: #FCF3AB;



    /* تاکید/گرادیانت (فقط یک نسخه، نه چندتا) */
    --background: linear-gradient(90deg, #021e4e, #14bfdd);
    --gradient-hero: linear-gradient(143deg, #020024 0%, #05054a 40%, #00d4ff 100%);
    --gradient-accent: linear-gradient(270deg, #e63946, #f4a261, #f9c74f);
}





html, body{
scroll-behavior:smooth;
}

@keyframes highlightTarget{

    0%{
        background: rgba(9, 9, 121, 0.534);
       
    }

    100%{
        background: transparent;
        box-shadow: none;
    }
}
#about{
    scroll-margin-top:100px;
}
#taghdir{
    scroll-margin-top:100px;
}
#mojavez{
    scroll-margin-top:100px;
}
#mojavez1{
    scroll-margin-top:100px;
}
#taze{
    scroll-margin-top:100px;
}
#sazeman{
    scroll-margin-top:100px;
}

#about:target{

    animation: highlightTarget 2.5s ease;
}
#taghdir:target{

    animation: highlightTarget 2.5s ease;
}
#mojavez:target{

    animation: highlightTarget 2.5s ease;
}
#mojavez1:target{

    animation: highlightTarget 2.5s ease;
}
#taze:target{

    animation: highlightTarget 2.5s ease;
}
#sazeman:target{

    animation: highlightTarget 2.5s ease;
}



.anchor-section{
    scroll-margin-top:100px;
}
.anchor-section:target{

    animation: highlightTarget 5.5s ease;
}

/* هایلایت مخصوص کارت‌های تقدیرنامه‌ی جابه‌جاشده */
.cert-frame.highlight-frame{
    animation: highlightCertFrame 7.5s ease;
}

@keyframes highlightCertFrame{
    0%{
        background: rgba(158, 253, 250, 0.147);
        box-shadow:
            0 0 0 4px rgba(9, 9, 121, 0.866),
            0 16px 30px rgba(0,0,0,.16);
    }
    100%{
        background: #fff;
        box-shadow:
            0 6px 16px rgba(0,0,0,.10),
            0 2px 6px rgba(0,0,0,.06);
    }
}

body{
    
    min-height:100vh;
    margin:0;

    font-size:clamp(16px,2vw,18px);
    
    font-family: Vazirmatn, system-ui, sans-serif;

   
    background-color:rgb(242, 241, 235);
    display:flex;
    flex-direction:column;

    user-select:none;

}






/* ====================================================================
   PDF + VIDEO FILES
   ==================================================================== */

.files-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    direction: ltr;
    box-sizing: border-box;
}


/* =========================================
   کارت PDF
   ========================================= */

.card_sabet-title2 {
    width: clamp(90px, 16vw, 140px);
    flex: 0 1 clamp(90px, 16vw, 140px);

    display: flex;
    flex-direction: column;
    align-items: center;

    box-sizing: border-box;
}


/* =========================================
   کارت VIDEO (بزرگ‌تر از PDF)
   ========================================= */

.card_sabet-title2-has-video {
    width: clamp(180px, 30vw, 280px);   /* بزرگ‌تر از کارت PDF */
    flex: 0 1 clamp(180px, 30vw, 280px);

    display: flex;
    flex-direction: column;
    align-items: center;

    box-sizing: border-box;
}



/* =========================================
   VIDEO
   ========================================= */

.card_sabet-title2-has-video video {
    display: block;
    width: 100%;
    aspect-ratio: 12 / 9;
    object-fit: contain;
    background: #000;
    border-radius: 8px;
}


/* =========================================
   PDF
   ========================================= */

.pdf-link {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    text-decoration: none;
}

.pdf-icon {
    display: block;
    width: 100%;
    height: 100%;

    background-image: url('/static/myapp01/img/icon/pdf-icon.JPG');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    border-radius: 8px;
    cursor: pointer;

    transition: transform .2s ease, opacity .2s ease;
}

.pdf-icon:hover {
    transform: scale(1.03);
    opacity: .9;
}


/* =========================================
   عنوان PDF و Video
   ========================================= */

.pdf-name,
.video-name {
    width: 100%;
    min-height: 40px;

    margin: 10px 0 0;
    padding: 0;

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

    box-sizing: border-box;
    text-align: center;
    direction: rtl;
    color: #2f2f2f;
    font-size: clamp(12px, 2.5vw, 14px);
}


/* =========================================
   حالت نبودن فایل
   ========================================= */

.files-row p {
    margin: 0;
    text-align: center;
    color: #666;
}


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

@media (max-width: 480px) {

    .files-row {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        justify-content: center;
        justify-items: center;
        gap: 10px;
        padding: 0 5px;
        box-sizing: border-box;
    }

    /* PDF در موبایل */
    .card_sabet-title2 {
        width: 42vw;
        max-width: 200px;
        min-width: 0;
    }

    .pdf-link {
        width: 42vw;
        height: 42vw;
        max-width: 200px;
        max-height: 200px;
    }

    .pdf-icon {
        width: 100%;
        height: 100%;
    }

    /* VIDEO در موبایل — بزرگ‌تر از PDF */
    .card_sabet-title2-has-video {
        width: 60vw;
        max-width: 280px;
        min-width: 0;
    }

    .card_sabet-title2-has-video video {
        width: 100%;
        aspect-ratio: 12 / 9;
        height: auto;
    }

}


/* =========================================
   گوشی‌های خیلی کوچک
   ========================================= */

@media (max-width: 360px) {

    .files-row {
        gap: 8px;
    }

    .card_sabet-title2 {
        width: 43vw;
    }

    .pdf-link,
    .pdf-icon {
        width: 43vw;
        height: 43vw;
    }

    .card_sabet-title2-has-video {
        width: 62vw;
        max-width: 260px;
    }

    .card_sabet-title2-has-video video {
        width: 100%;
        aspect-ratio: 12 / 9;
        height: auto;
    }

}

/* HEADER */

.header {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100px;

    display: flex;
    align-items: center;
    justify-content:space-between;
    padding: 0 30px;

    color: #fff;
    z-index: 1000;
    
  
    background:rgba(5, 25, 55, .9);
    box-shadow: 0 4px 30px rgba(5, 25, 55, .9);
    backdrop-filter: blur(3.3px);
    -webkit-backdrop-filter: blur(3.3px);
    box-sizing: border-box;
}

.header__brand {
    display: flex;
    align-items: center;
    gap:2px;
}

.logo-img {
    height: 84px;
    width: auto;
    display: block;
}


/* SEARCH */

.search-container{
position:relative;
display:flex;
align-items:center;
margin-left:30px;

}

.search-input{
width:0;
padding:8px;
border:1px solid #ccc;
border-radius:20px;
outline:none;
transition: width 0.4s ease, opacity 0.4s ease;
opacity:0;
pointer-events: none;
}

.search-container.active .search-input{
width:200px;
opacity:1;
margin-left:8px;
pointer-events: auto;
}

.search-btn {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    outline: none;

    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;

    border-radius: 50%;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;

    box-sizing: border-box;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .25s ease;
}


.search-container {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input {
    width: 0;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 20px;
    outline: none;
    transition: width 0.4s ease, opacity 0.4s ease;
    opacity: 0;
    pointer-events: none;
    box-sizing: border-box;
}


.search-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.header__nav {
    display: flex;
    align-items: center;
    gap: 40px;
    height: 100%;
}

.nav-item {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}
.nav-item img{
    width: auto;
    height: 30px;
    display: block;
}

.nav-link {
    background: none;
    border: none;
    color: #fff;
      font-family: Vazirmatn, system-ui, sans-serif;
      font-size: clamp(16px, 1.5vw, 18px);

   
    cursor: pointer;
    padding: 8px 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: color .25s ease;
}

.nav-link.active {
    color:#fd3e52;
}

.nav-link:hover {
    color:#fd3e52;
}

.nav-underline {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #fd3e52, #f9c74f);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .3s ease;
}

.has-dropdown:hover .nav-underline {
    transform: scaleX(1);
}
.nav-link:hover .nav-underline {
    transform: scaleX(1);
}
.nav-link.active .nav-underline {
    transform: scaleX(1);
}

.has-dropdown:hover .nav-link {
    color:#fd3e52;
}

.nav-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 220px;

    background: #0d1b3e;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);

    display: flex;
    flex-direction: column;
    padding: 10px 0;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s;
}

.has-dropdown:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-family: Vazirmatn, system-ui, sans-serif;
  
    padding: 12px 24px;
    transition: background .2s ease, color .2s ease;
}

.nav-dropdown a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fd3e52;
}

.header__toggle{
cursor:pointer;

font-size:50px;
color: #f6f8fb;

}


/* SIDEBAR */

/* SIDEBAR */

/* سایدبار */
.l-navbar{
    position: fixed;
    top: 100px;
    right: 0;
    width: auto;
max-width: 280px;
    color: white;
    max-height: 0;
    overflow: hidden;

    background:rgba(5, 25, 55, .9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    padding: 0 10px;


    transition: max-height .35s ease, padding .25s ease;
    z-index: 999;

        border-radius: 0 0 0px 10px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.l-navbar a:hover{
       background: rgba(255, 255, 255, 0.06);
    color: #fd3e52;
}

.l-navbar img{
    width: auto;
    height: 20px;
    display: block;
}

/* هنگام باز شدن */
.l-navbar.open{
    
    max-height:fit-content;
    padding: 15px 10px;
}

/* لینک‌ها */
.nav_link{
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 250px;
    padding: 10px 10px;

    color: #f9f6f6;
    text-decoration: none;
    margin-bottom: 8px;
    font-weight: 300;
    background:rgba(5, 25, 55, 0);
   


    opacity: 0;
    transform: translateY(-8px);
    transition:
        opacity .25s ease,
        transform .25s ease,
        background .2s ease,
        border-color .2s ease;
}

.nav_link:hover{
    border-color: rgba(255, 255, 255, 0.5);
}

/* وقتی سایدبار باز شد آیتم‌ها دیده شوند */
.l-navbar.open .nav_link{
    opacity: 1;
    transform: translateY(0);
}

/* تأخیر پلکانی برای لینک‌ها (افکت آبشاری) */
.l-navbar.open .nav_link:nth-child(1){ transition-delay: .05s; }
.l-navbar.open .nav_link:nth-child(2){ transition-delay: .10s; }
.l-navbar.open .nav_link:nth-child(3){ transition-delay: .15s; }
.l-navbar.open .nav_link:nth-child(4){ transition-delay: .20s; }
.l-navbar.open .nav_link:nth-child(5){ transition-delay: .25s; }
.l-navbar.open .nav_link:nth-child(6){ transition-delay: .30s; }

/* آیکون منو */
#header-toggle{
    cursor: pointer;
    transition: transform .3s ease;
}

#header-toggle.rotate{
    transform: rotate(90deg);
}




button.nav_link {
    background: #0d1b3e00;
    border: none;
    width: 100%;
    text-align: right;
    font: inherit;
    cursor: pointer;
    position: relative;
}



.nav_link.active {
    color: #fd3e52;
}

.nav_divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin: 8px 0;
}
.nav_divider_insite {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin: 8px 0;
}
/* پیش‌فرض: در دسکتاپ مخفی باشن */
.mobile-only-nav {
    display: none;
}



/*✅ LOGIN & SIGNUP BUTTONS */
.header__auth{
display:flex;
gap:10px;
margin-left:30px;

}

.auth-btn{
color:#fff;

text-decoration:none;
transition:.25s;
white-space:nowrap;
}

.auth-btn:hover{
background:#79797981;
border-radius:25%;
}


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

    .header {
        height: 100px;
        padding: 0 16px;
    }

    .header__nav {
        display: none;   /* در موبایل این بخش با منوی همبرگری جداگانه مدیریت می‌شه */
    }


    .mobile-only-nav {
        display: flex;
    }

    .logo-img {
        height: 60px;
    }

    .search-container.active .search-input {
        width: 140px;
    }

    .search-btn {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }
    .search-container{

       margin-left:3px;

     }
     .header__toggle{


         font-size:40px;


      }

}




.server3d {
    position: relative;
    display: flex;
    justify-content: flex-end;   
    align-items: center;

    width: 100%;
    height: 600px;
       overflow: visible;
    border-radius: 0px;
  

   
}

.server3d model-viewer {
    position: relative;
    width: 70%;   /* عرض کمتر از 100% تا فضای خالی برای جابه‌جایی داشته باشه */
    height: 100%;
    background: transparent;
    z-index: 2;
    margin-left: -80px;

 
}








.overlay-text-wrapper-footer {
    position: absolute;
    top: 55%;
    left: 28%;
    transform: translate(-50%, -50%);

    display: flex;
    flex-direction: row;


    gap: 20px;

    z-index: 5;
}

.overlay-title-4-5 {

        color: #e8e8e8;
    font-weight: normal;
    
    font-size: clamp(24px, 3.5vw, 36px); 
    margin-bottom: clamp(8px, 2vw, 20px);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.674);
 text-align: right;
}


.article-content *{
    font-family: Vazirmatn, system-ui, sans-serif !important;
    
    font-size:clamp(16px,2vw,18px);
    color:#131313 ;
}

.article-content {
    direction: rtl;
    text-align: justify;
    line-height: 2.5;
    padding-right: 2%;
    padding-left: 2%;
    
   
}




.article-special {
    position: relative;
    height: 500px;
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 30px;

    border: 3px solid transparent;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(143deg, rgb(17, 11, 147) 0%, rgb(1, 112, 134) 40%, rgba(0, 212, 255, 1) 100%) border-box;
}




.bg-img{
       position:absolute;

    width:70%;

    opacity:.20;

   

    pointer-events:none;
    user-select:none;
}

.img1{
    top: -10%;
    left: -5%;
    height: auto !important;
    
}

.img2{
    bottom: -10%;
    right: -5%;
height: auto;
  
}
.spotlight{
    
    position:absolute;

    width:800px;
    height:300px;

    border-radius:5px;

    z-index:2;

  

    box-shadow:
        0 0 0 9999px rgba(255,255,255,1),
        inset 0 0 30px rgba(255,255,255,.70);

    

   

    pointer-events:none;
        left:10px;
    top:10px;

    transition:
        left 12s ease-in-out,
        top 12s ease-in-out;
}


/*===========================================card3-glass=========================*/

.card3-glass{
    background:rgba(255,255,255,.82);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

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

    box-shadow:
        0 8px 25px rgba(0,0,0,.08);
}
.card3-wide{
    width:100%;
    max-width:900px;
    margin:auto;
}
.article-bg{
    position:absolute;

    inset:0;

    overflow:hidden;
}

.article-scroll{
    position:relative;

    z-index:2;

    overflow-y:auto;

    height:100%;
      
    scrollbar-color:#7fa4c9 transparent;
}





/* ckeditor*/
/*--------------------------------------------------------
----------------------------------------------------------
----------------------------------------------------------*/
.article-content img {
    width: 45% !important;
    height: auto !important;
    display: block;
    margin: 10px 0;
    border-radius: 6px;

    opacity: 0;
    will-change: transform, opacity;
    transition:
        transform 1.1s cubic-bezier(.16,.84,.32,1),
        opacity 1.1s ease-out,
        box-shadow .4s ease;

    background: #fff;
    padding: 8px;
    box-shadow:
        0 10px 20px rgba(0,0,0,.18),
        0 25px 45px rgba(0,0,0,.14),
        0 2px 6px rgba(0,0,0,.10);
}

.article-content img:hover{
    box-shadow:
        0 14px 28px rgba(0,0,0,.22),
        0 35px 60px rgba(0,0,0,.16),
        0 3px 8px rgba(0,0,0,.12);
    transform: translateY(-4px);
}


.certificates-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 24px;
    padding: 10px;
}

.cert-frame{
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 10px;

    border: 1px solid #e2e2e2;
    background: #fff;
    padding: 10px;
    box-shadow:
        0 6px 16px rgba(0,0,0,.10),
        0 2px 6px rgba(0,0,0,.06);

    cursor: pointer;

    transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cert-frame.in-view{
    opacity: 1;
    transform: translateY(0);
}
.cert-frame.in-view img{
    opacity: 1;
    transform: scale(1);
}

.cert-frame img{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;

    display: block;
    opacity: .45;
    transform: scale(.8);
    transition:
        transform 1s cubic-bezier(.22,.61,.36,1),
        opacity 1s ease-out;
}

.cert-frame:hover{
    border-color: #1a3c6e;
    box-shadow:
        0 16px 30px rgba(0,0,0,.16),
        0 4px 10px rgba(0,0,0,.08);
    transform: translateY(-3px);
}

.cert-frame:hover img{
    transform: scale(1.08);
}

.cert-frame::after{
    content:"مشاهده ";
    position:absolute;
    inset: 10px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding-bottom:14px;
    background: linear-gradient(to top,  rgba(9, 9, 121, 0.866), transparent 55%);
    color:#fff;
    font-size:14px;
    border-radius:6px;
    opacity:0;
    transition: opacity .3s ease;
    pointer-events:none;
}

.cert-frame:hover::after{
    opacity:1;
}

.cert-lightbox{
    position:fixed;
    inset:0;
    background: rgba(0,0,0,.85);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:2000;
    padding: 30px;
}

.cert-lightbox.active{
    display:flex;
}

.cert-lightbox img{
    max-width:90%;
    max-height:90%;
    border-radius:8px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

.cert-lightbox-close{
    position:absolute;
    top:10px;
    right:30px;
    font-size:36px;
    color:#fff;
    cursor:pointer;
}
.certificates-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 900px;
    margin: 40px auto;
    padding: 0 16px;
}

.cert-frame {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    aspect-ratio: 4 / 3;
    border: 1px solid #e2e2e2;
    background: #f6f8fb;
    padding: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

.cert-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 6px;
    transition: transform 0.4s ease;
}

.cert-frame:hover {
    border-color: #1a3c6e;
    box-shadow: 0 8px 24px rgba(26, 60, 110, 0.12);
    transform: translateY(-3px);
}

.cert-frame:hover img {
    transform: scale(1.04);
}



/* استایل دادن به لیست‌های نشانک‌دار که در ادیتور می‌سازید */



/* pagination*/

.pagination{
    margin-top:40px;
    display:flex;
    gap:8px;
    justify-content:center;
    flex-wrap:wrap;
        background:rgb(255, 255, 255);

}

.pagination a,
.pagination span{
    padding:8px 14px;
    border:1px solid #ddd;
    text-decoration:none;
    border-radius:5px;
    color:#909090;
}

.pagination a:hover{
    background:#f1f1f1;
}

.pagination .active{
    background:#007bff;
    color:white;
    border-color:#007bff;
}

.pagination .disabled{
    color:#999;
    background:#f9f9f9;
    cursor:not-allowed;
}




/* CONTENT */

.content{
margin-top:100px;
margin-right:0px;
padding:0px;
transition:.3s;
    background: linear-gradient(180deg, rgb(242, 241, 235) ,rgb(255, 255, 255));

}






/* CARDS */

.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:30px;

margin:10px;


    box-sizing: border-box;
    max-width: 100%;
  
}
.cards-post{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));

box-sizing: border-box;
max-width: 100%;

  
}









.cards2{
display:grid;
gap:5px;
margin-bottom:10px;

}






.cards3{
display:grid;
gap:5px;
margin-bottom:0px;

}

.card{
background:white;
padding:10px;
border-radius:8px;
box-shadow:0 2px 6px rgba(0,0,0,0.08);
transition:0.3s; 
}



.cardimg{
background:white;
border-radius:8px;

}


.cardimg img {
width: 100%;
height: auto;
border-radius:8px;
object-fit: cover;
}

/*===========================================uptodate1======================*/
/*=========================================== uptodate1 ======================*/

.card3 {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: 200px 20px 20px;
    border: 2px solid #00205c82;
    border-radius: 55px;
    margin-bottom: 5px;
    margin-top: 80px;
    text-align: center;
    box-sizing: border-box;
    overflow: visible;
    background-color: #eff6fc;

    display: flex;
    flex-direction: column;
}


 

.card3 img {
width: 100%;
height: 200px;
border-radius:8px;
object-fit: cover;

}
.card3-search {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: 200px 20px 20px;
    border: 2px solid #00205c82;
    border-radius: 55px;
    margin-bottom: 5px;
    margin-top: 80px;
    text-align: center;
    box-sizing: border-box;
    overflow: visible;
    background-color: #eff6fc;

    display: flex;
    flex-direction: column;
   
}

 .card3-search h1{  
    color: #01539c;
        font-weight:bold;
    
    font-size: clamp(24px, 3.5vw, 36px); 
  text-align: center;   
 }





.card-sabet-image-search {
    position: absolute;

    top: -60px;
    left: 50%;

    transform: translateX(-50%);

    width: 85%;
    height: 250px;

    overflow: hidden;

    border-radius: 35px;

    margin: 0;

    z-index: 2;
}
.card-sabet-image-search img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}




.card3 video {
width: 100%;
height: 200px;
border-radius:8px;
object-fit: cover;
}













.card:hover{ 
transform:translateY(-3px); 
box-shadow:0 6px 15px rgba(0,0,0,0.12); 
}

.card-title{

color:#383838;
margin-bottom:8px;
direction: rtl;
text-align: right;
    display: inline-block; /* باعث می‌شود کادر فقط دور متن باشد نه کل عرض */
   
    padding: 4px 12px; /* فاصله متن از کادر (بالا-پایین، چپ-راست) */
    border-radius: 6px; 

}

.card2-title{
font-weight: bold;
color:#383838;
margin-bottom:8px;



    font-size: clamp(16px, 2vw, 22px);

line-height: 2.2;


}


.card3-title{

color:#383838;
margin-bottom:8px;
opacity: 0.5;
}





.card-value{
  
  color: rgb(60, 60, 60);
  line-height: 1.2;


}


.cards_sabet{
display:grid;
gap:5px;
margin-bottom:0px;
}
.card_sabet{

 background-color: #ffffff;
padding:50px;
border: 2px solid #00205c82;
 border-radius: 55px;

margin-bottom:5px;
text-align:center;
gap:3px;
overflow:hidden;

}
.card_sabet_post{

 background-color: rgb(255, 255, 255);
padding:50px;



text-align:center;
gap:3px;
overflow:hidden;


}
.card_sabet_mojavez{

 background-color: #ffffff;
padding:50px;
border: 2px solid #00205c82;
 border-radius: 55px;

margin: 10px 50px 50px 50px;
text-align:center;
gap:3px;
overflow:hidden;

}



 .card_sabet h1{  
    color: #01539c;
        font-weight:bold;
    
    font-size: clamp(24px, 3.5vw, 36px); 
  text-align: center;   
 }
 .card_sabet_post h1{  
    color: #01539c;
        font-weight:bold;
    
    font-size: clamp(24px, 3.5vw, 36px); 
  text-align: center;   
 }


.card_sabet-title{
font-weight: bold;
color:#383838;
margin-bottom:8px;
}

.card_sabet-title2{
font-weight:normal;
color:#767575;
margin-bottom:8px;
}

.card_sabet img {
width: 90%;
height:300px;
border-radius:20px;
object-fit: cover;

}


.card-sabet-image {
    position: absolute;

    top: -60px;
    left: 50%;

    transform: translateX(-50%);

    width: 85%;
    height: 250px;

    overflow: hidden;

    border-radius: 35px;

    margin: 0;

    z-index: 2;
}
.card-sabet-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transform: scale(1.15);

    transition: transform 1s ease;
}


.card-sabet-image:hover img{

 transform:scale(1);

}


@media (max-width:768px){

    .card-sabet-image{

        width:92%;
        height:160px;

    }

}







/*.card_sabet-title video {
width: 50%;
height:auto;
border-radius:8px;
object-fit: cover;
}*/

/* =========================
   HORIZONTAL SCROLL CARDS
   ========================= */

.cards-wrapper{
    position:relative;
        padding:5px;
margin-bottom: 100px;


    border-radius:3px;
    background-color:  #10204c45;


overflow:hidden;
   
}

/* افکت محو شدن دو طرف */




/* کانتینر اسکرول */

.cards-container{

    display:flex;
    gap:8px;

    overflow-x:auto;
    overflow-y:hidden;

    scroll-behavior:auto;
    scroll-snap-type:x mandatory;

    padding:5px;

    flex-wrap:nowrap;

     scrollbar-width:none;
    scrollbar-color:rgba(0,180,255,.35) transparent;

    -webkit-overflow-scrolling:touch;

       

}


/* اسکرول بار */

.cards-container::-webkit-scrollbar{
    display:none;
}

.cards-container::-webkit-scrollbar-track{
    background:transparent;
}

.cards-container::-webkit-scrollbar-thumb{

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

    border-radius:20px;
}

/* آیتم اسکرول */

.card{

    flex-shrink:0;
    scroll-snap-align:start;
}

/* محتوای کارت */

.carticle-content{

    padding:1px;
    text-align:center;

    flex-grow:1;

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

/* کارت */

.card3.card{

    flex:0 0 180px;

    height:150px;

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

   

    background:#fff;
        border:1px solid #e5eef8;
    border-radius:10px;

    padding:20px;

    transition:.3s;

    box-shadow:
        0 2px 8px rgba(0,0,0,.04);
    
}

/* هاور */

.card3.card:hover{

    transform:translateY(-4px);

   

    box-shadow:
    0 10px 25px rgba(44,62,80,.10);
}

/* تصویر */

.card3.card img{

    width:100%;
    height:120px;

    object-fit:contain;

    object-position:center;

    filter:grayscale(100%);
    opacity:.85;

    transition:.3s;
   
}
.card3.card:hover img{

    filter:none;
    opacity:1;

    transform:scale(1.08);
}

/* دکمه های اسکرول */

.scroll-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:38px;
    height:58px;

    border:none;
    border-radius:3px;

    background:#faf5f8;

    color:#fff;

    cursor:pointer;

    z-index:10;

    transition:.25s;
    opacity:.3;
}

.scroll-btn:hover{
opacity: .3;
    background:rgba(0, 0, 0, 0.072);
}

.scroll-btn.left{
    left:1px;
}

.scroll-btn.right{
    right:1px;
}





.content_footer{
color:#ffffff;
padding-right:20px;
text-align:right;
background-color: #10204c;
padding-right: 50px;

}

.cards_footer{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));

margin-bottom: -10px;

}


.content_footer_too{
     display: grid;
     align-items: center;
     gap:20px;
     padding:5px;
     
     
}
.content_footer_too img{
     width:30px;
    height:30px;

    padding:6px;
    background:
        radial-gradient(
            circle at 30% 25%,
            rgba(255,255,255,.95),
            rgba(255,255,255,.25) 35%,
            transparent 45%
        );

    box-shadow:
        inset 0 2px 4px rgba(255,255,255,.8),
        inset 0 -3px 6px rgba(0,0,0,.08),
        0 2px 6px rgba(0,0,0,.15);
    transition: transform .6s cubic-bezier(.25,.46,.45,.94);    
}


.content_footer_too img:hover{
    transform: scale(1.08);
}



.content_footer_too a{

         display: flex;
         align-items: center;
         gap:15px;
         text-decoration:none;
         color:#2c3e50;
         cursor:pointer;
}
.content_footer_too span{
    cursor:pointer;
   
    
}


.overlay-text-wrapper {
    position: absolute;
    top: 30%;

    right:10%;

    display: flex;
    flex-direction: column;
    align-items:center;
 
    gap: 16px;

    z-index: 5;


}
.content_footer_toooo{
     display: grid;
     align-items:center;
          gap: 15px; 

}


.content_footer_toooo iframe{
    display: block;
    width: 90%;
    height: 200px;
    border-radius: 30px;
 
   
}

.glass-btn-down{
   font-family: Vazirmatn, system-ui, sans-serif;
    font-size: clamp(16px, 1.5vw, 18px);
    padding: clamp(10px, 1vw, 14px) clamp(44px, 6vw, 74px);
    position: relative;
    overflow: hidden;

    border-radius: 40px;

        color: #01539c;
             font-weight: bold;

    cursor: pointer;
    white-space: nowrap;
    border: 4px solid transparent;
    background:
        linear-gradient(270deg,rgb(242, 241, 235),rgb(242, 241, 235)) padding-box,
        linear-gradient(
            90deg,
        rgba(250, 89, 105),
        rgba(253, 165, 88),
        rgba(252, 243, 171)
        ) border-box;

    background-size: auto;
    background-position: center;
    transition: .3s ease;
    box-shadow:0 2px 6px rgba(0, 0, 0, 0.243);
}





.glass-btn-down:hover{

    background:
        linear-gradient(270deg,#0c729a00,#0e819800) padding-box,
        linear-gradient(
            90deg,
        rgba(250, 89, 105, 0.978),
        rgba(253, 165, 88, 0.978),
        rgba(252, 243, 171, 0.978)
        ) border-box;


}




/*footer*/



.footer{
   
    height: 80px;
background:#10204c;   
color:#bbbcbc;
text-align:center;
padding:15px 10px;
margin-top: auto;

}

.footer p{
margin-top: 40px;
margin-bottom: 40px;
font-size: clamp(14px, 1.5vw, 16px); 
}

.content_footer a{
    color: inherit;
    text-decoration: none;
    transition: color .2s ease;
}

.content_footer a:hover{
    color:rgba(250, 89, 105);
   
}



/* pagination*/

.pagination{
    margin-top:40px;
    display:flex;
    gap:8px;
    justify-content:center;
    flex-wrap:wrap;
}

.pagination a,
.pagination span{
    padding:8px 14px;
    border:1px solid #ddd;
    text-decoration:none;
    border-radius:5px;
    color:#909090;
}

.pagination a:hover{
    background:#f1f1f1;
}

.pagination .active{
    background:#007bff;
    color:white;
    border-color:#007bff;
}

.pagination .disabled{
    color:#999;
    background:#f9f9f9;
    cursor:not-allowed;
}



/*open_pic*/

.gallery{

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
    margin-top: 10px;
    
}

.gallery img{
    width:80px;
    height:auto;
    object-fit:cover;
    border-radius:6px;
    cursor:pointer;
}



.thumb{
    width:80px;
    height:80px;
    object-fit:cover;
    border-radius:6px;
    cursor:pointer;
    transition:0.3s;
    flex-shrink: 0;
}

.thumb:hover{
    transform:scale(1.05);
}

/* modal */

.modal{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.85);
    justify-content:center;
    align-items:center;
    z-index:1000;
}

.modal-img{
    max-width:90%;
    max-height:85%;
    border-radius:10px;
    animation:zoom 0.3s;
}

@keyframes zoom{
    from{transform:scale(0.7);}
    to{transform:scale(1);}
}

.close{
    position:absolute;
    top:20px;
    right:30px;
    font-size:40px;
    color:white;
    cursor:pointer;
}

.prev,
.next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:40px;
    color:white;
    cursor:pointer;
    padding:10px;
}

.prev{
    left:30px;
}

.next{
    right:30px;
}




/*for_gif*/

/* کانتینر اصلی ویدیو    background: linear-gradient(135deg, #021d55 0%, #17076f 50%, #3f9cbf 100%); 
                          background: linear-gradient(0deg,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 0.866) 20%, rgba(0, 213, 255, 0) 85%); */
.card-video-container {
    position: relative;
    
    width: 100%;
    aspect-ratio: 18 / 9;
    border-radius: 5px;
   
     

        

     margin-top: -100px;

     overflow: hidden;
     margin-bottom: -10px;
    
}



.hero-wave {
    position: absolute;
  
    bottom: -5px;
    left: 0;
    width: 100%;
      height: clamp(120px, 20vw, 280px);
    display: block;

        z-index: 15;   
}
.hero-wave-zamin {
    position: absolute;
  
    bottom: -5px;
    left: 0;
    width: 100%;
      height: clamp(120px, 20vw, 280px);
    display: block;

        z-index: 15;   
}
.hero-wave-card {
    position: absolute;
  
    bottom: -5px;
    left: 0;
    width: 100%;
      height: clamp(120px, 20vw, 280px);
    display: block;

        z-index: 15;   
}
.hero-wave-card-update-showcase {
    position: absolute;
  
    bottom: -5px;
    left: 0;
    width: 100%;
      height: clamp(120px, 20vw, 280px);
    display: block;

        z-index: 15;   
}
.hero-wave-server {
    position: absolute;
  
    bottom: -5px;
    left: 0;
    width: 100%;
      height: clamp(120px, 20vw, 280px);
    display: block;

        z-index: 15;   
}
.hero-wave-post {
    position: absolute;
  
    bottom: -15px;
    left: 0;
    width: 100%;
      height: clamp(120px, 20vw, 280px);
    display: block;

        z-index: 15; 
 
}



 

.main-video-gif {
        position: absolute;
top:0px;
left: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    
   
}
.main-video-gif-rack {
        position: absolute;
        top:0px;
        left: 0px;

       object-fit: cover;
       display: block;

       border-radius:50px;
       mix-blend-mode:normal; 
       width:30%; 
       height:auto;
        margin-left:10%;
       border: 1px solid rgba(255, 255, 255, 0.63);
}



.main-video-gif-zamin {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    margin-bottom: -200px;
    margin-top: 100px;
    position: relative;
    z-index: 1;
}
.card-video-container-zamin {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: block;

margin-bottom: -10px;
background-color:  #000205;
    
}
.card-video-container-zamin::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,  #001230, #14bfdd00);
    pointer-events: none;
    z-index: 2;
}
.card-video-container-post {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: block;

     margin-top: -100px;


     margin-bottom: -10px;
background-color:  #000205;
    
}
.card-video-container-post img {
width: 100%;
height:600px;

object-fit: cover;

}




.gradient-block {
    position: relative;
    background: linear-gradient(180deg, #10204c ,#001230);
    /* padding-bottom برای جا باز کردن ویدیوی موج در انتها */
    overflow: hidden;
    box-sizing: border-box;
  
}

.gradient-block--theme2 {


    background:rgb(242, 241, 235);
    
    padding:100px 0 100px 0;
}
.gradient-block--theme3 {
    padding:5px 0 5px 0;

    background: linear-gradient(180deg, rgb(242, 241, 235) ,rgb(255, 255, 255));

}
.gradient-block--theme3-footer {
    padding:5px 0 5px 0;
    background:rgb(255, 255, 255);

}
.gradient-block--theme4 {
    background: linear-gradient(0deg,rgb(242, 241, 235), rgb(242, 241, 235));
    padding:50px 0 50px 0;
}

.gradient-block__content {
    position: relative;
    z-index: 3;   /* کارت‌ها و محتوا همیشه بالای ویدیو می‌مونن */
    max-width: 1200px;
    margin: 0 auto;

}

.gradient-block__content h2{

    color: #01539c;
        font-weight:bold;
    
    font-size: clamp(26px, 3.5vw, 38px); 
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  
}
.gradient-block__content h1{

    color: #01539c;
        font-weight:bold;
    
    font-size: clamp(22px, 2vw, 26px); 
  text-align: center;
      
}






/* ============================
   برند: لوگو + سه حرف + سه کلمه
   ============================ */
.brand-overlay {
    position: absolute;
     top: 10%;
    left: 40%;
    z-index: 10;

    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    column-gap: clamp(4px, 1vw, 10px);
    row-gap: clamp(2px, 0.6vw, 4px);
    direction: ltr;
    scale: 1.5;
}

.overlay-logo-wrapper {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: clamp(50px, 9vw, 120px);

}

.overlay-h-wrapper { grid-column: 2; grid-row: 1; width: clamp(12px, 2vw, 25px); }
.overlay-r-wrapper { grid-column: 2; grid-row: 2; width: clamp(12px, 2vw, 25px); }
.overlay-s-wrapper { grid-column: 2; grid-row: 3; width: clamp(12px, 2vw, 25px); }

.overlay-hooshmand-wrapper { grid-column: 3; grid-row: 1; width: clamp(60px, 10vw, 140px);  }
.overlay-rayane-wrapper    { grid-column: 3; grid-row: 2; width: clamp(38px, 6vw, 85px);   }
.overlay-shargh-wrapper    { grid-column: 3; grid-row: 3; width: clamp(38px, 6vw, 85px);   }

.overlay-hooshmand-wrapper,
.overlay-rayane-wrapper,
.overlay-shargh-wrapper {
    margin-left: clamp(-12px, -1.5vw, -12px);
}

.overlay-logo-wrapper img,
.overlay-h-wrapper img,
.overlay-r-wrapper img,
.overlay-s-wrapper img,
.overlay-hooshmand-wrapper img,
.overlay-rayane-wrapper img,
.overlay-shargh-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================
   متون قدیمی (اگه فعال بشن)
   ============================ */
.overlay-text1-wrapper {
    position: absolute;
    top: 10%;
    left: 50%;
    z-index: 5;
    color: #faf5f8;
    font-family: Poppins;
    font-weight: normal;
    font-size: clamp(20px, 3vw, 34px);
    line-height: 1.4;
}
.overlay-text2-wrapper {
    width: auto;
    max-width: 80%;
    position: absolute;
    top: 20%;
    left: 40%;
    z-index: 5;
}
.overlay-text3-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    color: #faf5f8;
    font-weight: normal;
    font-size: clamp(13px, 2vw, 24px);
}

/* ============================
   دکمه‌ها
   ============================ */
.overlay-btn-wrapper {
    position: absolute;
    top: 30%;
    
    left: 50%;
    
    z-index: 5;

    display: grid;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 30px;
    align-items: center;
    justify-content: center;

    width: max-content;
    max-width: 95vw;

}

.glass-btn-top {
    font-family: Vazirmatn, system-ui, sans-serif;
    font-size: clamp(16px, 1.5vw, 18px);

    padding: clamp(10px, 1vw, 14px) clamp(44px, 6vw, 74px);

    position: relative;
    overflow: hidden;
    border-radius: 40px;

    color: #10204c;
    cursor: pointer;
    white-space: nowrap;

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

    background: linear-gradient(
        90deg,
        rgba(250, 89, 105),
        rgba(253, 165, 88),
        rgba(252, 243, 171)
    );

    background-size: 100% 200%;
    background-position: left center;

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


/* Hover */
.glass-btn-top:hover {
    background: linear-gradient(
        90deg,
        rgb(255, 244, 157, 0.874),
    
        rgba(253, 62, 81, 0.874)
    );
   
}









/* ============================
   کادر مرکزی عنوان
   ============================ */
   .overlay-content-wrapper {
    position: absolute;
    top: 10%;
    left:15%;
    
    z-index: 5;

    width: min(90%, 400px);
    text-align: center;
    padding: clamp(10px, 2vw, 20px);

 

  
}
   .overlay-content-wrapper-3 {
    position: absolute;
    top: 15%;
    left:15%;
    
    z-index: 5;

    width: min(90%, 400px);
    text-align: center;
    padding: clamp(10px, 2vw, 20px);

 

  
}
.overlay-content-wrapper-zamin {
    position: absolute;
    top: 10%;
    left:35%;
    
    z-index: 5;

    width: min(90%, 400px);
    text-align: center;
    padding: clamp(10px, 2vw, 20px);

 

  
}

.overlay-title {
    color: #f2f2f2;
    font-weight: normal;
    
    font-size: clamp(24px, 3.5vw, 36px); 
    margin-bottom: clamp(8px, 2vw, 20px);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
 text-align: right;
}

.typing-text {
    color: #f2f2f2;
    font-weight: normal;
    font-size: clamp(6px, 2vw, 24px);
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1.4;
    min-width: min(300px, 100%);
    text-align: center;
    transition: all .25s ease;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.overlay-subtitle {
    color: #f2f2f2;
    font-weight: normal;
    font-size: clamp(16px, 2vw, 18px);
    margin-top: clamp(8px, 2vw, 20px);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
line-height: 2.2;
direction:rtl;
 text-align: right;
}
.overlay-subtitle-3 {
    color: #f2f2f2;
    font-weight: normal;
    font-size: clamp(16px, 2vw, 18px);
    margin-top: clamp(8px, 2vw, 20px);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
line-height: 2.2;
direction:rtl;
 text-align: right;
}
.overlay-subtitle-2 {
    color: #f2f2f2;
    font-weight: normal;
    font-size: clamp(16px, 2vw, 18px);
    margin-top: clamp(8px, 2vw, 20px);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
line-height: 2.2;
 text-align: right;
}
.overlay-subtitle-b {
    color: #087cbfd1;
    font-weight:bolder;
    font-size: clamp(16px, 2vw, 22px);
    margin-top: clamp(8px, 2vw, 20px);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
line-height: 2.2;
direction:rtl;

}




/* خودِ حرف H و انیمیشن آن */
.h-animated {
   width: 100%; 
   height: auto;
   
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease;
    transform-origin: center;
    display: block;
    will-change: transform; /* بهینه سازی برای مرورگر */
}
.b-animated {
   width: 100%; 
   height: auto;
  
    transform-origin: center;
    display: block;
    will-change: transform; /* بهینه سازی برای مرورگر */
    
}

/* افکت هنگام رفتن موس (کدی که فرستادی با کمی بهبود) */
.h-animated:hover {
    transform: scale(1.4) translateY(-5px); 
    filter: drop-shadow(0 12px 20px rgba(251, 248, 156, 0.87));
}








/*button*/

.glass-btn {
    width: clamp(90px, 20vw, 150px);
    height: clamp(34px, 5vw, 50px);
    font-family: Vazirmatn, system-ui, sans-serif;

    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 4px 12px;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;

    /* margin های auto از اینجا حذف شدن */

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.22),
            rgba(255,255,255,.05)
        );

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

    border: 1px solid transparent;
    background-clip: padding-box;

    transition: transform .3s ease, background .3s ease;
}

/* فقط برای دکمه‌ی داخل کارت‌های پست، به ته کارت بچسبه */
.card3 .glass-btn {
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
}

 .card3-btn-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;

    margin-top: auto; 
}

.card3-btn-wrapper .glass-btn {

    margin-bottom: 0;
} 

/* خط نئونی نرم دور لبه */
/* خط نئونی نرم دور لبه */
/* خط نئونی نرم دور لبه - رنگ‌های فیبر نوری */
.glass-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;

    background: linear-gradient(
        120deg,
        rgba(0,255,255,0) 0%,
        rgba(0,200,255,.9) 20%,
        rgba(90,60,255,.9) 40%,
        rgba(190,50,255,.9) 60%,
        rgba(255,60,180,.9) 80%,
        rgba(0,255,255,0) 100%
        
    );
    background-size: 250% 250%;

    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    animation: neon-flow 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes neon-flow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.glass-btn::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 6px;
    right: 6px;
    height: 40%;
    border-radius: 10px;

    background: linear-gradient(
        180deg,
        rgba(255,255,255,.30),
        transparent
    );

    pointer-events: none;
}

.glass-btn:hover {
    transform: translateY(-2px);
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.28),
            rgba(255,255,255,.08)
        );
}

.glass-btn:active {
    transform: translateY(-1px);
}




/*=======================moshavere=========================*/
/*=======================moshavere=========================*/
.coming-soon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: 20px;
    text-align: center;
}

.coming-soon-box {
    max-width: 480px;
}

.coming-soon-icon {
    font-size: 60px;
    color: #7b5cff;
    margin-bottom: 24px;
}

.coming-soon-title {
    font-family: Vazirmatn, system-ui, sans-serif;
    font-size: clamp(24px, 4vw, 34px);
    color: #2c3e50;
    margin-bottom: 16px;
}

.coming-soon-text {
    font-family: Vazirmatn, system-ui, sans-serif;
    font-size: clamp(15px, 2vw, 18px);
    color: #767575;
    line-height: 1.8;
    margin-bottom: 30px;
}

.coming-soon-btn {
    display: inline-block;
    padding: 12px 30px;
    background: linear-gradient(        
        90deg,
        rgba(250, 89, 105),
        rgba(253, 165, 88),
        rgba(252, 243, 171));
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-family: Vazirmatn, system-ui, sans-serif;
    font-weight: 600;
    transition: transform .3s ease, box-shadow .3s ease;
}

.coming-soon-btn:hover {
    transform: translateY(-3px);
  
}

/*=======================end moshavere=========================*/

.video-container {
    position: relative;
    width: 100%;
    aspect-ratio: 22 / 9;
    overflow: hidden;
    border-radius: 5px;
    background:white;
    margin-bottom:10px;
    margin-top: -65px;
}

/* اسلایدهای محتوا */
.video-slide {
    position: absolute;
    inset: 0;
    display: flex;

    color:black;
      align-items: center;
    justify-content: center;
    opacity: 0;
    z-index: 1;
    transition: opacity .3s ease;
}

.video-slide.active {
    opacity: 1;
    z-index: 2;
}

/* ================================پرده‌ی هفت‌ستونی =========================*/
.curtain-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    z-index: 10;
    pointer-events: none;
}

.curtain-column {
    flex: 1;
   
   
   
background: linear-gradient(0deg, #021e4e, #14bfdd);
   
    transform: translateY(100%) scaleX(1);
    transform-origin: center;
    transition: transform 1.1s ease-in-out;
}



.curtain-overlay.rising .curtain-column {
    transform: translateY(0) scaleX(1);
}

.curtain-overlay.rising .curtain-column:nth-child(1) { transition-delay: 0s;    }
.curtain-overlay.rising .curtain-column:nth-child(2) { transition-delay: .10s;  }
.curtain-overlay.rising .curtain-column:nth-child(3) { transition-delay: .20s;  }
.curtain-overlay.rising .curtain-column:nth-child(4) { transition-delay: .30s;  }
.curtain-overlay.rising .curtain-column:nth-child(5) { transition-delay: .40s;  }
.curtain-overlay.rising .curtain-column:nth-child(6) { transition-delay: .50s;  }
.curtain-overlay.rising .curtain-column:nth-child(7) { transition-delay: .60s;  }

.curtain-overlay.closing .curtain-column {
    transform: translateY(0) scaleX(0);
    transition: transform 1.2s ease-in-out;
}

.curtain-overlay.closing .curtain-column:nth-child(1) { transition-delay: 0s;    }
.curtain-overlay.closing .curtain-column:nth-child(2) { transition-delay: .12s;  }
.curtain-overlay.closing .curtain-column:nth-child(3) { transition-delay: .24s;  }
.curtain-overlay.closing .curtain-column:nth-child(4) { transition-delay: .36s;  }
.curtain-overlay.closing .curtain-column:nth-child(5) { transition-delay: .48s;  }
.curtain-overlay.closing .curtain-column:nth-child(6) { transition-delay: .60s;  }
.curtain-overlay.closing .curtain-column:nth-child(7) { transition-delay: .72s;  }

.curtain-overlay.no-transition .curtain-column {
    transition: none !important;
}
/* ============================================================
   موبایل و تبلت: هفت ستون به سه ستون کاهش پیدا می‌کنه
   ============================================================ */
@media (max-width: 768px) {

    .curtain-column:nth-child(n+4) {
        display: none;
    }

    .curtain-overlay.rising .curtain-column:nth-child(1) { transition-delay: 0s;   }
    .curtain-overlay.rising .curtain-column:nth-child(2) { transition-delay: .15s; }
    .curtain-overlay.rising .curtain-column:nth-child(3) { transition-delay: .30s; }

    .curtain-overlay.closing .curtain-column:nth-child(1) { transition-delay: 0s;   }
    .curtain-overlay.closing .curtain-column:nth-child(2) { transition-delay: .18s; }
    .curtain-overlay.closing .curtain-column:nth-child(3) { transition-delay: .36s; }

}




/*==============slid2-for-baner========================*/
.btn-grad-video-wrapper {
    display: flex;
    align-items: center;
    gap: 5%;              /* فاصله‌ی بین ویدیو و کارت‌ها */
}

.btn-grad-wrapper {
    display: flex;
    flex-direction: column;
        align-items: flex-end; 
    gap: 5px;             /* فاصله‌ی بین خود کارت‌ها */
    transform: translateX(100px);
   margin-top: -100px;
    
}

.stat-card {
    display: block;        /* به‌جای inline-block */
    width: fit-content;
    max-width: 100%;

    background: linear-gradient(135deg,  #14bfdd55 0%, #16295c19 50%, #0d1f4a00 100%);
    border-radius: 20px 0 0 20px;
    padding: 34px 22px;
    text-align: center;
    margin-bottom: 10px;       /* چون gap توی wrapper فاصله رو می‌ده، دیگه نیازی به margin نیست */
    border-left: 1px solid rgba(255, 255, 255, 0.63);
    
}

.stat-number {
    font-family: Vazirmatn, system-ui, sans-serif;
    font-size: clamp(18px, 4vw, 22px);
    margin-bottom: 0;
    white-space: nowrap;
    color: #f2f2f2;
    font-weight: normal;
  padding-left: 20px;
 padding-right: 90px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
    
}
.stat-number a{
    color: inherit;
    text-decoration: none;
    display: inline-block; /* برای اینکه transform:scale درست کار کنه، باید block یا inline-block باشه */
    cursor: pointer;
    transition: color .2s ease, opacity .2s ease, transform .25s ease;
}
.stat-number a:hover{
    opacity: .8;
    transform: scale(1.08);
}






.overlay-content-wrapper-slid2 {
    position: absolute;
    top: 15%;
    left: 40%;
    transform: translateX(-50%);
    
     height: 50%;
    width:70%;
    text-align: center;
    padding: clamp(10px, 2vw, 20px);

    background: rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4.5px);
    -webkit-backdrop-filter: blur(4.5px);
    border: 1px solid rgba(255, 255, 255, 0.63);
    z-index: -1;
}
/*==============slid3-for-baner========================*/


.overlay-btn-wrapper-3 {
    position: absolute;
    top: 30%;
    
    left: 50%;
    
    z-index: 5;

    display: grid;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 30px;
    align-items: center;
    justify-content: center;

    width: max-content;
    max-width: 95vw;

}

.glass-btn-top-3 {
    font-family: Vazirmatn, system-ui, sans-serif;

    font-size: clamp(16px, 1.5vw, 18px);

    padding: clamp(10px, 1vw, 14px) clamp(44px, 6vw, 74px);




    position: relative;
    overflow: hidden;

    border-radius: 40px;

    color: #ffffff;
    cursor: pointer;
    white-space: nowrap;

    /* ضخامت Border */
    border: 4px solid transparent;

    /* بکگراند تک‌رنگ + Border گرادیانی */
    background:
        linear-gradient(270deg,#0c729a,#0e8198) padding-box,
        linear-gradient(
            90deg,
        rgba(250, 89, 105),
        rgba(253, 165, 88),
        rgba(252, 243, 171)
        ) border-box;

    background-size: auto;
    background-position: center;

    transition: .3s ease;
}


/* Hover */
.glass-btn-top-3:hover {

    

    background:
        linear-gradient(270deg,#0c729a00,#0e819800) padding-box,
        linear-gradient(
            90deg,
        rgba(250, 89, 105, 0.978),
        rgba(253, 165, 88, 0.978),
        rgba(252, 243, 171, 0.978)
        ) border-box;
   
}

.btn-grad-video-wrapper-3 {
    display: flex;
    align-items: center;
    gap: 5%;              /* فاصله‌ی بین ویدیو و کارت‌ها */
}

.main-image-3 {
    position: absolute;

    top:15%;
  left: 0;

    width:auto;
    height:70%;

    margin-left: 10%;

    display: block;

    object-fit: contain;

    mix-blend-mode: normal;

    border: 1px solid rgba(255, 255, 255, 0.63);
   border-radius: 40px;

    box-sizing: border-box;
     background: linear-gradient(90deg, #021e4ee4, #14bfdddc);
}




/*==============slid4-for-baner========================*/

#video-container-4 {
    justify-content: flex-end;
}

.btn-grad-wrapper-slid4 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-left: 40px;
    
}

.stat-card-slid4 {
    display: flex;
    flex-direction: column;
    align-items: stretch; 
    gap: 5px;             /* فاصله‌ی بین خود کارت‌ها */
    


    

    position: relative;
    width: 280px;
    height: 280px;
    margin: 60px auto;




    width: fit-content;
    max-width: 100%;
     
    background: linear-gradient(135deg, #203c88 0%, #16295c19 50%, #0d1f4a00 100%);
    border-radius: 20px ;
    padding: 34px 22px;
    text-align: center;
    margin-bottom: 150px;       /* چون gap توی wrapper فاصله رو می‌ده، دیگه نیازی به margin نیست */
    border-left: 1px solid rgba(255, 255, 255, 0.63);
   border-top: 1px solid rgba(255, 255, 255, 0.63);
}
.stat-card-slid4-ejtemaee {
    display: flex;
    flex-direction: column;
    align-items: stretch; 
    gap: 5px;             /* فاصله‌ی بین خود کارت‌ها */
    


    

    position: relative;
    width: 280px;
    height: 280px;
    margin: 60px auto;




    width: fit-content;
    max-width: 100%;
     
    background: linear-gradient(135deg, #203c88 0%, #16295c19 50%, #0d1f4a00 100%);
    border-radius: 20px ;
    padding: 34px 22px;
    text-align: center;
    margin-bottom: 150px;       /* چون gap توی wrapper فاصله رو می‌ده، دیگه نیازی به margin نیست */
    border-left: 1px solid rgba(255, 255, 255, 0.63);
   border-top: 1px solid rgba(255, 255, 255, 0.63);
}
.stat-card-slid4-map {
    display: flex;
    flex-direction: column;
    align-items: stretch; 
    gap: 5px;             /* فاصله‌ی بین خود کارت‌ها */
    


    

    position: relative;
    width: 280px;
    height: 280px;
    margin: 60px auto;




    width: fit-content;
    max-width: 100%;
     
    background: linear-gradient(135deg, #203c88 0%, #16295c19 50%, #0d1f4a00 100%);
    border-radius: 20px ;
    padding: 34px 22px;
    text-align: center;
    margin-bottom: 150px;       /* چون gap توی wrapper فاصله رو می‌ده، دیگه نیازی به margin نیست */
    border-left: 1px solid rgba(255, 255, 255, 0.63);
   border-top: 1px solid rgba(255, 255, 255, 0.63);
}

.stat-number-slid4 {
    font-family: Vazirmatn, system-ui, sans-serif;
    font-size: clamp(18px, 4vw, 22px);
    margin-bottom: 0;

    color: #f2f2f2;
    font-weight: normal;
  padding-left: 30px;
 padding-right: 10px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}




.social-float {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 5px auto;
}

.sf-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    text-decoration: none;
    background: #1a1a1a;
    color: #fff;
    box-shadow: 0 0 0 2px rgba(200, 60, 255, 0.5), 0 0 18px rgba(80, 100, 255, 0.35);
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0;
    pointer-events: none;
    
        transition:
        transform .6s cubic-bezier(.34, 1.56, .64, 1),
        opacity .4s ease,
        box-shadow .4s ease,
        background .4s ease;
}



.sf-item i {
    transition: transform .35s ease;
}

.sf-item:hover {
    background: #262626;
    box-shadow:
        0 0 0 2px rgba(200, 60, 255, .75),
        0 0 24px rgba(110, 130, 255, .5);
}

.sf-item:hover i {
    transform: scale(1.15);
}

.sf-item:active i {
    transform: scale(1);
}

.sf-center {
    z-index: 20;
    background: #111;
    border: 2px solid #fff;
    cursor: pointer;
    pointer-events: auto;
    opacity: 1;

    transform: translate(-50%, -50%) scale(1);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease,
        border-color .3s ease;
}

/* هاور دکمه وسط */
.sf-center:hover {
    transform: translate(-50%, -50%) scale(1.12);

    background: #1b1b1b;

    border-color: #ffffff;

    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.25),
        0 0 15px rgba(0, 180, 255, 0.8),
        0 0 30px rgba(120, 0, 255, 0.7),
        0 0 45px rgba(255, 0, 200, 0.35);
}

/* وقتی کلیک می‌شود */
.sf-center:active {
    transform: translate(-50%, -50%) scale(.94);
}

.social-float.open .sf-item[data-pos] {
    opacity: 1;
    pointer-events: auto;
}



/* =========================================
   چیدمان هماهنگ ۶ آیکون
   ========================================= */

.social-float.open .sf-item[data-pos="0"] {
    transform:
        translate(-50%, -50%)
        translate(0px, -88px)
        scale(1);

    transition-delay: .03s;
}

.social-float.open .sf-item[data-pos="1"] {
    transform:
        translate(-50%, -50%)
        translate(-76px, -44px)
        scale(1);

    transition-delay: .08s;
}


.social-float.open .sf-item[data-pos="2"] {
    transform:
        translate(-50%, -50%)
        translate(76px, -44px)
        scale(1);

    transition-delay: .13s;
}


.social-float.open .sf-item[data-pos="3"] {
    transform:
        translate(-50%, -50%)
        translate(-76px, 44px)
        scale(1);

    transition-delay: .18s;
}


.social-float.open .sf-item[data-pos="4"] {
    transform:
        translate(-50%, -50%)
        translate(76px, 44px)
        scale(1);

    transition-delay: .23s;
}


.social-float.open .sf-item[data-pos="5"] {
    transform:
        translate(-50%, -50%)
        translate(0px, 88px)
        scale(1);

    transition-delay: .28s;
}

/*==================================map=================================*/

.stat-card-slid4 iframe {
    display: block;
    width: 90%;
    height: 250px;
    border-radius: 30px;
    margin-top: 10px;
   
   
}
.stat-card-slid4-map iframe {
    display: block;
    width: 90%;
    height: 250px;
    border-radius: 30px;
    margin-top: 10px;
   
   
}



/* ================= آدرس ================= */

.contact-info-slid4{
    width: 100%;
    direction: rtl;
    text-align: right;
}

.contact-info-slid4 p{
    margin: 15px 0;
    line-height: 1.2;
    color: #f5f7fa;
     text-align: right;
}

.phone-numbers-slid4{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    direction: ltr;
    gap: 10px;
    margin: 8px 0 12px;
}

.phone-numbers-slid4 span{
    color: rgba(255,255,255,.6);
}

.phone-numbers-slid4 a,
.email-slid4 a{
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    transition: color .3s ease;
}

.phone-numbers-slid4 a:hover,
.email-slid4 a:hover{
    color: #6ed6ff;
}

.email-slid4{
    margin-top: 3px;
    direction: ltr;
    unicode-bidi: plaintext;
}


/*====================btn-selector-top-for-baner====================*/

.slide-selector {
    position: absolute;
    top: 95px;
    right: 0;
    z-index: 20;

    display: flex;
    flex-direction: column;
    gap: 20px;

    width: 250px; /* عرض ثابت برای همه دکمه‌ها */
   
}

.slide-btn {
     height:75px;
    width: 100%;
    box-sizing: border-box;

    font-family: Vazirmatn, system-ui, sans-serif;
    font-size: clamp(16px, 1.5vw, 18px);
    

    padding: 12px 18px;

    white-space: nowrap;       /* متن یک خط */
    overflow: hidden;          /* جلوگیری از بیرون‌زدگی */
    text-overflow: ellipsis;   /* اگر خیلی طولانی بود ... */

    position: relative;

     border: 1px solid rgba(255, 255, 255, 0.63);
     border-right:none ;
    border-radius: 10px 0 0 10px;

     background-color:#f2f1eb;
    color: #2c3e50;

    cursor: pointer;
    z-index: 1;

    transition:
        color .3s ease,
        transform .25s ease,
        box-shadow .25s ease;

    box-shadow:
        0 1px 3px rgba(0,0,0,.06);
}

/* لایه رنگی */
.slide-btn::before {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        #f9c74f 0%,
        #f4a261 35%,
        #f48661 70%,
        #e63946 100%
    );

    transform: scaleX(0);
    transform-origin:right;

    transition: transform .35s ease;

    z-index: -1;
}

.slide-btn:hover::before,
.slide-btn.active::before {
    transform: scaleX(1);
}

/* هاور */
.slide-btn:hover {
    color: white;
   

    transform: translateY(-2px);

    box-shadow:
        0 8px 18px rgba(251,206,1,.25);
}



/* کلیک */
.slide-btn:active {
    transform: translateY(0);
}


/* دکمه انتخاب‌شده */
.slide-btn.active {
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}




/* =========================
   NAVIGATION
========================= */



/* Main Navigation */

.main-nav {
    width: 100%;
    height: 90px;

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

    background: rgba(3, 22, 48, 0.88);

    border-bottom: 1px solid rgba(255,255,255,0.08);

    position: relative;
    z-index: 1000;
}


/* Navigation Items */

.nav-list {
    display: flex;
    align-items: center;
    gap: 55px;

    margin: 0;
    padding: 0;

    list-style: none;
}




/*=========================شبکه های اجتماعی =========================================*/









.article-card {
    position: relative;

    width: 100%;
    max-width: 740px;

    min-height: 500px;

    margin: 100px auto 40px;

    padding: 420px 60px 50px;

    box-sizing: border-box;

    background: #eef6fd;

    border: 4px solid #0b2d6b;
    border-radius: 55px;

    overflow: visible;
}
.article-card-image {
    position: absolute;

    top: -90px;
    left: 50%;

    transform: translateX(-50%);

    width: 82%;
    height: 490px;

    overflow: hidden;

    border-radius: 55px;

    z-index: 2;
}

.article-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}
.article-card-content {
    position: relative;

    z-index: 3;

    direction: ltr;
}

.article-category {
    display: inline-block;

    padding: 10px 30px;

    border: 2px solid #00c8ff;
    border-radius: 30px;

    color: #405889;

    font-size: 22px;
    font-weight: 600;

    margin-bottom: 30px;
}

.article-card-content h2 {
    margin: 0;

    color: #092e70;

    font-size: clamp(28px, 4vw, 44px);

    line-height: 1.3;

    font-weight: 700;
}
.read-more {
    display: inline-block;

    margin-top: 220px;

    color: #ff4355;

    font-size: 28px;
    font-weight: 700;

    text-decoration: none;

    border-bottom: 4px solid #fdb05d;

    padding-bottom: 5px;
}








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

@media (max-width:480px) {


    /* کارت‌ها ستونی (یک ستون زیر هم) بشن */
    .btn-grad-wrapper-slid4 {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-left:5%;
       

        box-sizing: border-box;
    }

    .stat-card-slid4 {
        width: 90%;
        height: auto;
        margin: 0;
        padding: 24px 18px;
                font-size: clamp(18px, 5vw, 20px);
        margin-top:-150px;
    }

    .stat-number-slid4 {
        font-size: clamp(20px, 5vw, 24px);
        padding-left: 10px;
        padding-right: 10px;
    }

    /* شبکه‌های اجتماعی کاملاً مخفی بشه */
   .stat-card-slid4-ejtemaee {
        display: none;
    }
       .stat-card-slid4-map {
        display: none;
    }
   .content_footer_toooo iframe{

    margin-bottom: 25px;
}


    .cards {
        grid-template-columns: 1fr;
        gap: 12px;
        margin: 0;
       padding-left: 10px;
       padding-right: 10px;
    }
    .cards_footer{ grid-template-columns:1fr; }

    .glass-btn{ width:100px; height:35px; font-size:10px; padding:2px 6px; border-radius:20px; }

    .card3.card img {height: clamp(80px, 26vw, 110px); }
    .card3.card {
        flex: 0 0 clamp(130px, 40vw, 165px);
        height: clamp(110px, 32vw, 145px);
        padding: 12px;
    }
    .card img { width: 100%; height: 100px; object-fit:cover; }
    .card3 video { width: 100%; height:auto; }
    .card_sabet-title video { width: 100%; height:auto; }
    .card2 img { width: 100%; height: 100px; object-fit:cover; }
    .card3 img { width: 100%; height: 100px; object-fit:cover; }
.card3 {
width: 100%;
max-width: 100%;
padding:150px 20px 20px;
border-radius: 50px;
margin-bottom: 5px;
margin-top: 50px;
}

.card3 img {
width: 100%;
height: 200px;
border-radius:8px;
object-fit: cover;

}

    .card_sabet img { width: 100%; height:auto; object-fit:cover;   border-radius: 5px; }
    .card_sabet{padding:10px;  border-radius:30px; }
    .card2-title{margin-bottom:0px;    font-size: clamp(18px, 2vw, 24px);}
.card-sabet-image {
top:-40px;
left: 50%;
width:85%;
border-radius: 30px;
}
.card_sabet_mojavez{


padding:10px;

 border-radius: 30px;

margin: 2px 10px 10px 10px;


}




    .thumb{ width:80px; height:80px; }
    .modal-img{ max-width:95%; max-height:80vh; }
    .search-container.active .search-input { width: 150px; }
    .search-btn{ width: 34px; height: 34px; }
    .l-navbar{ width:auto; }
    .nav_link{ padding: 12px; }
    .card_sabet_post{ padding:20px;}
    .content{ padding: 5px 1px; }
    .article-content{ padding-inline: 3%; line-height: 2.1;}
    .article-content img{ max-width: 100%; }
    .spotlight{     width: clamp(140px, 45vw, 200px);
    height: clamp(70px, 22vw, 100px);}
   




    .server3d {
        flex-direction: column;
        justify-content: flex-start;
        height: auto;
        padding-bottom: 20px;
    }

    .server3d model-viewer {
        width: 100%;
        height: 350px;
        margin-left: 0;
    }

    .overlay-text-wrapper {
        position: static;
        transform: none;
        top: auto;
        left: auto;

        width: 100%;
        padding: 16px;
        box-sizing: border-box;
    }

    .content_footer_toooo {
        width: 100%;
        gap: 12px;
    }
    

    .glass-btn-down {
        font-size: clamp(13px, 3.5vw, 15px);
        padding: 12px 20px;

        width: 100%;
        max-width: 320px;
        margin: 0 auto;

        white-space: normal;
        text-align: center;

        box-sizing: border-box;
    }

     .overlay-title-4-5{
      margin-bottom: 0;
     }
     .overlay-text-wrapper-footer {
     top: 65%;
     left: 29%;
     flex-direction:column;
     gap: 5px;
     }
.card-video-container-post {

margin-top:0;
margin-bottom: -10px;
   
}
.card-video-container-post img {
width: 100%;
height:auto;

}



}














/* ============================================================
   موبایل کوچیک و متوسط (تا 480px) - portrait
   ============================================================ */
@media (max-width: 480px) and (orientation: portrait) {
    .card-video-container {
        aspect-ratio: 9/ 18; /* ارتفاع دینامیک صفحه، سازگار با موبایل */
  
    }
        .card-video-container-zamin {
        aspect-ratio: 9/ 10; /* ارتفاع دینامیک صفحه، سازگار با موبایل */
   
    }

    .main-video-gif-zamin {
        margin-top: 210px;
         
    }



.overlay-content-wrapper-slid2{display: none;}
    .btn-grad-video-wrapper {
        flex-direction: column;
        align-items: center;
        gap:5px;
        margin-top:300px;
    }

    .btn-grad-wrapper {

        transform: none;
        margin-top: 0;
    }

    .main-video-gif-rack {
        position: static;        /* از absolute خارج می‌شه، در جریان عادی صفحه قرار می‌گیره */
        width:80%;
        margin-left: 0;
        order: 2;  /* مطمئن می‌شه بعد از دکمه‌ها بیاد */
        border-radius: 30px;
    }


    .overlay-content-wrapper {
            top: 35%;
            left:47%;
         transform: translate(-50%, -50%);

    }
       .overlay-content-wrapper-3 {
            top: 40%;
            left:50%;
         transform: translate(-50%, -50%);
}

    .overlay-btn-wrapper {

    top: 55%;
    
    left: 10%;
    

}
.overlay-btn-wrapper-3 {

    top:65%;
    
    left: 10%;

      gap: 10px;

}




    .overlay-title {
        font-size: clamp(26px, 4vw, 40px);
        margin-bottom: clamp(8px, 2vw, 20px);
        
       
    }



    .overlay-subtitle {
        font-size: clamp(20px, 2.5vw, 32px);
        margin-top: clamp(8px, 2vw, 20px);
    }
    .overlay-subtitle-2 {
       display: none;
    }



    .brand-overlay {
        position: absolute;
          top: clamp(120px, 20vw, 120px);
      
       
        left: 60%;
        transform: translateX(-50%) scale(1.3);
        z-index: 10;
    }

    .overlay-hooshmand-wrapper,
    .overlay-rayane-wrapper,
    .overlay-shargh-wrapper {
        margin-left: clamp(-6px, -0.8vw, -8px);
        margin-top: 1px;
    }


.glass-btn-top {
padding: clamp(10px, 1vw, 14px) clamp(80px, 6vw, 100px);

}

.glass-btn-top-3 {
padding: clamp(10px, 1vw, 14px) clamp(80px, 6vw, 100px);

}


}

/* ============================================================
   موبایل بزرگ portrait (481px تا 767px)
   شکاف قبلی 481-539 اینجا رفع شد
   ============================================================ */
@media (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {
 .card-video-container {
        aspect-ratio: 9/ 14; /* ارتفاع دینامیک صفحه، سازگار با موبایل */
  
    }
        .card-video-container-zamin {
        aspect-ratio: 9/ 8; /* ارتفاع دینامیک صفحه، سازگار با موبایل */
   
    }

    .main-video-gif-zamin {
        margin-top: 210px;
    }


.overlay-content-wrapper-slid2{display: none;}
    .btn-grad-video-wrapper {
        flex-direction: column;
        align-items: center;
        gap:5px;
        margin-top:500px;
    }

    .btn-grad-wrapper {

        transform: none;
        margin-top: 0;
    }

    .main-video-gif-rack {
        position: static;        /* از absolute خارج می‌شه، در جریان عادی صفحه قرار می‌گیره */
        width:80%;
        margin-left: 0;
        order: 2;  /* مطمئن می‌شه بعد از دکمه‌ها بیاد */
        border-radius: 30px;
    }


    .overlay-content-wrapper {
            top: 35%;
            left:47%;
         transform: translate(-50%, -50%);

    }
       .overlay-content-wrapper-3 {
            top: 40%;
            left:50%;
         transform: translate(-50%, -50%);
}

    .overlay-btn-wrapper {

    top: 55%;
    
    left: 10%;
    

}
.overlay-btn-wrapper-3 {

    top:65%;
    
    left: 10%;

      gap: 10px;

}




    .overlay-title {
        font-size: clamp(26px, 4vw, 40px);
        margin-bottom: clamp(8px, 2vw, 20px);
    }



    .overlay-subtitle {
        font-size: clamp(20px, 2.5vw, 32px);
        margin-top: clamp(8px, 2vw, 20px);
    }
    .overlay-subtitle-2 {
       display: none;
    }



    .brand-overlay {
        position: absolute;
          top: clamp(120px, 20vw, 120px);
      
       
        left: 60%;
        transform: translateX(-50%) scale(1.7);
        z-index: 10;
    }

    .overlay-hooshmand-wrapper,
    .overlay-rayane-wrapper,
    .overlay-shargh-wrapper {
        margin-left: clamp(-6px, -0.8vw, -8px);
        margin-top: 1px;
    }



    /* کارت‌ها ستونی (یک ستون زیر هم) بشن */
    .btn-grad-wrapper-slid4 {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-left:15%;
       

        box-sizing: border-box;
    }

    .stat-card-slid4 {
        width: 90%;
        height: auto;
        margin: 0;
        padding: 24px 18px;
                font-size: clamp(18px, 5vw, 20px);
        margin-top:-150px;
    }

    .stat-number-slid4 {
        font-size: clamp(20px, 5vw, 24px);
        padding-left: 10px;
        padding-right: 10px;
    }

    /* شبکه‌های اجتماعی کاملاً مخفی بشه */
   .stat-card-slid4-ejtemaee {
        display: none;
    }
       .stat-card-slid4-map {
        display: none;
    }
   .content_footer_toooo iframe{

    margin-bottom: 25px;
}


    .cards {
        grid-template-columns: 1fr;
        gap: 12px;
        margin: 0;
       padding-left: 10px;
       padding-right: 10px;
    }
    .cards_footer{ grid-template-columns:1fr; }

    .glass-btn{ width:100px; height:35px; font-size:10px; padding:2px 6px; border-radius:20px; }

    .card3.card img {height: clamp(80px, 26vw, 110px); }
    .card3.card {
        flex: 0 0 clamp(130px, 40vw, 165px);
        height: clamp(110px, 32vw, 145px);
        padding: 12px;
    }
    .card img { width: 100%; height: 100px; object-fit:cover; }
    .card3 video { width: 100%; height:auto; }
    .card_sabet-title video { width: 100%; height:auto; }
    .card2 img { width: 100%; height: 100px; object-fit:cover; }
    .card3 img { width: 100%; height: 100px; object-fit:cover; }
.card3 {
width: 100%;
max-width: 100%;
padding:150px 20px 20px;
border-radius: 50px;
margin-bottom: 5px;
margin-top: 50px;
}

.card3 img {
width: 100%;
height: 200px;
border-radius:8px;
object-fit: cover;

}

    .card_sabet img { width: 100%; height:auto; object-fit:cover;   border-radius: 5px; }
    .card_sabet{padding:10px;  border-radius:30px; }
    .card2-title{margin-bottom:0px;    font-size: clamp(18px, 2vw, 24px);}
.card-sabet-image {
top:-40px;
left: 50%;
width:85%;
border-radius: 30px;
}
.card_sabet_mojavez{


padding:10px;

 border-radius: 30px;

margin: 2px 10px 10px 10px;


}




    .thumb{ width:80px; height:80px; }
    .modal-img{ max-width:95%; max-height:80vh; }
    .search-container.active .search-input { width: 150px; }
    .search-btn{ width: 34px; height: 34px; }
    .l-navbar{ width:auto; }
    .nav_link{ padding: 12px; }
    .card_sabet_post{ padding:20px;}
    .content{ padding: 5px 1px; }
    .article-content{ padding-inline: 3%; line-height: 2.1;}
    .article-content img{ max-width: 100%; }
    .spotlight{     width: clamp(140px, 45vw, 200px);
    height: clamp(70px, 22vw, 100px);}
   




    .server3d {
        flex-direction: column;
        justify-content: flex-start;
        height: auto;
        padding-bottom: 20px;
    }

    .server3d model-viewer {
        width: 100%;
        height: 350px;
        margin-left: 0;
    }

    .overlay-text-wrapper {
        position: static;
        transform: none;
        top: auto;
        left: auto;

        width: 100%;
        padding: 16px;
        box-sizing: border-box;
    }

    .content_footer_toooo {
        width: 100%;
        gap: 12px;
    }

    .glass-btn-down {
        font-size: clamp(13px, 3.5vw, 15px);
        padding: 12px 20px;

        width: 100%;
        max-width: 320px;
        margin: 0 auto;

        white-space: normal;
        text-align: center;

        box-sizing: border-box;
    }

     .overlay-title-4-5{
      margin-bottom: 0;
     }
     .overlay-text-wrapper-footer {
     top: 65%;
     left: 29%;
     flex-direction:column;
     gap: 5px;
     }
.card-video-container-post {

margin-top:0;
margin-bottom: -10px;
   
}
.card-video-container-post img {
width: 100%;
height:auto;

}
.glass-btn-top {
padding: clamp(10px, 1vw, 14px) clamp(80px, 6vw, 100px);

}

.glass-btn-top-3 {
padding: clamp(10px, 1vw, 14px) clamp(80px, 6vw, 100px);

}

}
/* ============================================================
   تبلت portrait (768px تا 1366px)
   این بازه الان آیپد پرو 12.9 (عرض 1024) رو هم پوشش می‌ده
   ============================================================ */
@media (min-width: 768px) and (max-width: 1030px) and (orientation: portrait)  {
      .card-video-container {
        aspect-ratio: 10 / 9; 
    }

        .card-video-container-zamin {
        aspect-ratio:12 / 9; /* ارتفاع دینامیک صفحه، سازگار با موبایل */
   
    }

    .main-video-gif-zamin {
        margin-top: 210px;
    }




    .brand-overlay {
        position: absolute;
          top: clamp(120px, 20vw, 120px);
      
       
        left: 60%;
        transform: translateX(-50%) scale(1.7);
        z-index: 10;
    }

    .overlay-hooshmand-wrapper,
    .overlay-rayane-wrapper,
    .overlay-shargh-wrapper {
        margin-left: clamp(-6px, -0.8vw, -8px);
        margin-top: 1px;
    }




.btn-grad-wrapper-slid4 {
    gap: 20px;
    margin-left:-300px;
    
}
    .stat-card-slid4  {
     width: 300px;
    height: 300px;
    margin: 10px auto;
    max-width: 100%;
    font-size: clamp(16px, 1vw, 18px);
    padding: 14px 12px;
   
    }
    .stat-card-slid4-ejtemaee  {
     display: none;
   
    }
        .stat-card-slid4-map {
     width: 300px;
    height: 300px;
    margin: 10px auto;
    max-width: 100%;
    font-size: clamp(16px, 1vw, 18px);
    padding: 14px 12px;
  
   
    }

    .stat-number-slid4 {
        font-size: clamp(20px, 2vw, 22px);
        padding-left: 20px;
        padding-right: 20px;
    }

   .overlay-content-wrapper {
    top: 15%;
    left:5%;
}
   .overlay-content-wrapper-3 {
    top: 15%;
    left:7%;
}

.glass-btn-down{

    font-size: clamp(18px, 1.5vw, 22px);
    padding: clamp(16px, 1vw, 18px) clamp(44px, 6vw, 74px);
}
.overlay-subtitle {
    font-size: clamp(18px, 2vw, 22px);
}
.overlay-subtitle-3 {
    font-size: clamp(18px, 2vw, 22px);
}
.overlay-subtitle-2 {
    font-size: clamp(18px, 2vw, 18px);
}

.overlay-btn-wrapper {
    top: 30%;
    
    left: 70%;

    gap: 20px;
}
.overlay-btn-wrapper-3 {

    left: 65%;

    gap: 20px;
}


.btn-grad-video-wrapper {
   margin-top: 80px;
    gap: 5%;              /* فاصله‌ی بین ویدیو و کارت‌ها */
}

.btn-grad-wrapper {

    gap: 5px;             /* فاصله‌ی بین خود کارت‌ها */
    transform: translateX(200px);

    
}
.overlay-content-wrapper-slid2 {
    left: 45%;
     height:55%;
    width:90%;
       margin-top: 30px;
}
.main-video-gif-rack {
        top:95px;
        left: 0px;
       width:40%; 
       border-radius:30px;

}




    .cards {
        grid-template-columns: 1fr;

    }
    .cards_footer{ grid-template-columns:1fr; }


    .card3.card img {height: clamp(80px, 26vw, 110px); }
    .card3.card {
        flex: 0 0 clamp(130px, 40vw, 165px);
        height: clamp(110px, 32vw, 145px);
        padding: 12px;
    }
    .card img { width: 100%; height: 100px; object-fit:cover; }
    .card3 video { width: 100%; height:auto; }
    .card_sabet-title video { width: 100%; height:auto; }
    .card2 img { width: 100%; height: 100px; object-fit:cover; }
    .card3 img { width: 100%; height: 100px; object-fit:cover; }
.card3 {
width: 100%;
max-width: 100%;
padding:150px 20px 20px;
border-radius: 50px;
margin-bottom: 5px;
margin-top: 50px;
}

.card3 img {
width: 100%;
height: 300px;
border-radius:8px;
object-fit: cover;

}


    .card_sabet img { width: 100%; height:auto; object-fit:cover;   border-radius: 5px; }
    .card_sabet{padding:10px;  border-radius:30px; }
    .card2-title{margin-bottom:0px;    font-size: clamp(18px, 2vw, 24px);}
.card-sabet-image {
top:-40px;
left: 50%;
width:85%;
border-radius: 30px;
}





    .thumb{ width:80px; height:80px; }
    .modal-img{ max-width:95%; max-height:80vh; }
    .search-container.active .search-input { width: 150px; }
    .search-btn{ width: 34px; height: 34px; }
    .l-navbar{ width:auto; }
    .nav_link{ padding: 12px; }
    .card_sabet_post{ padding:20px;}
    .content{ padding: 5px 1px; }
    .article-content{ padding-inline: 3%; line-height: 2.1;}
    .article-content img{ max-width: 100%; }
    .spotlight{     width: clamp(140px, 45vw, 200px);
    height: clamp(70px, 22vw, 100px);}
   

.server3d {

    height: 450px;
   
}



     .overlay-title-4-5{
      margin-bottom: 0;
     }
     
     .overlay-text-wrapper-footer {
     top: 60%;
     left: 29%;
     flex-direction:column;
     gap: 5px;
     }
.card-video-container-post {

margin-top:0;
margin-bottom: -10px;
   
}
.card-video-container-post img {
width: 100%;
height:auto;

}
.content_footer_toooo iframe{
    margin-bottom: 30px;
}


.glass-btn-top {
padding: clamp(10px, 1vw, 14px) clamp(80px, 6vw, 100px);

}

.glass-btn-top-3 {
padding: clamp(10px, 1vw, 14px) clamp(80px, 6vw, 100px);

}
 
    
}

/* ============================================================
   تبلت portrait (768px تا 1366px)
   این بازه الان آیپد پرو 12.9 (عرض 1024) رو هم پوشش می‌ده
   ============================================================ */
@media (min-width: 800px) and (max-width: 1366px) and (orientation: portrait)  {
      .card-video-container {
        aspect-ratio: 10 / 9; 
    }

        .card-video-container-zamin {
        aspect-ratio:12 / 9; /* ارتفاع دینامیک صفحه، سازگار با موبایل */
   
    }

    .main-video-gif-zamin {
        margin-top: 210px;
    }




    .brand-overlay {
        position: absolute;
          top: clamp(120px, 20vw, 120px);
      
       
        left: 60%;
        transform: translateX(-50%) scale(1.7);
        z-index: 10;
    }

    .overlay-hooshmand-wrapper,
    .overlay-rayane-wrapper,
    .overlay-shargh-wrapper {
        margin-left: clamp(-6px, -0.8vw, -8px);
        margin-top: 1px;
    }




.btn-grad-wrapper-slid4 {
    gap: 20px;
    margin-left:-300px;
    
}
    .stat-card-slid4  {
     width: 300px;
    height: 300px;
    margin: 10px auto;
    max-width: 100%;
    font-size: clamp(16px, 1vw, 18px);
    padding: 14px 12px;
   
    }
    .stat-card-slid4-ejtemaee  {
     display: none;
   
    }
        .stat-card-slid4-map {
     width: 300px;
    height: 300px;
    margin: 10px auto;
    max-width: 100%;
    font-size: clamp(16px, 1vw, 18px);
    padding: 14px 12px;
  
   
    }

    .stat-number-slid4 {
        font-size: clamp(20px, 2vw, 22px);
        padding-left: 20px;
        padding-right: 20px;
    }

   .overlay-content-wrapper {
    top: 15%;
    left:5%;
}
   .overlay-content-wrapper-3 {
    top: 15%;
    left:7%;
}

.glass-btn-down{

    font-size: clamp(18px, 1.5vw, 22px);
    padding: clamp(16px, 1vw, 18px) clamp(44px, 6vw, 74px);
}
.overlay-subtitle {
    font-size: clamp(18px, 2vw, 22px);
}
.overlay-subtitle-3 {
    font-size: clamp(18px, 2vw, 22px);
}
.overlay-subtitle-2 {
    font-size: clamp(18px, 2vw, 18px);
}

.overlay-btn-wrapper {
    top: 30%;
    
    left: 70%;

    gap: 20px;
}
.overlay-btn-wrapper-3 {

    left: 65%;

    gap: 20px;
}


.btn-grad-video-wrapper {
   margin-top: 80px;
    gap: 5%;              /* فاصله‌ی بین ویدیو و کارت‌ها */
}

.btn-grad-wrapper {

    gap: 5px;             /* فاصله‌ی بین خود کارت‌ها */
    transform: translateX(200px);

    
}
.overlay-content-wrapper-slid2 {
    left: 45%;
     height:55%;
    width:90%;
       margin-top: 30px;
}
.main-video-gif-rack {
        top:95px;
        left: 0px;
       width:40%; 
       border-radius:30px;

}




    .cards {
        grid-template-columns: 1fr;

    }
    .cards_footer{ grid-template-columns:1fr; }


    .card3.card img {height: clamp(80px, 26vw, 110px); }
    .card3.card {
        flex: 0 0 clamp(130px, 40vw, 165px);
        height: clamp(110px, 32vw, 145px);
        padding: 12px;
    }
    .card img { width: 100%; height: 100px; object-fit:cover; }
    .card3 video { width: 100%; height:auto; }
    .card_sabet-title video { width: 100%; height:auto; }
    .card2 img { width: 100%; height: 100px; object-fit:cover; }
    .card3 img { width: 100%; height: 100px; object-fit:cover; }
.card3 {
width: 100%;
max-width: 100%;
padding:250px 20px 20px;
border-radius: 50px;
margin-bottom: 5px;
margin-top: 50px;
}

.card3 img {
width: 100%;
height: 300px;
border-radius:8px;
object-fit: cover;

}


    .card_sabet img { width: 100%; height:auto; object-fit:cover;   border-radius: 5px; }
    .card_sabet{padding:10px;  border-radius:30px; }
    .card2-title{margin-bottom:0px;    font-size: clamp(18px, 2vw, 24px);}
.card-sabet-image {
top:-40px;
left: 50%;
width:85%;
border-radius: 30px;
}





    .thumb{ width:80px; height:80px; }
    .modal-img{ max-width:95%; max-height:80vh; }
    .search-container.active .search-input { width: 150px; }
    .search-btn{ width: 34px; height: 34px; }
    .l-navbar{ width:auto; }
    .nav_link{ padding: 12px; }
    .card_sabet_post{ padding:20px;}
    .content{ padding: 5px 1px; }
    .article-content{ padding-inline: 3%; line-height: 2.1;}
    .article-content img{ max-width: 100%; }
    .spotlight{     width: clamp(140px, 45vw, 200px);
    height: clamp(70px, 22vw, 100px);}
   

.server3d {

    height: 450px;
   
}



     .overlay-title-4-5{
      margin-bottom: 0;
     }
     .overlay-text-wrapper-footer {
     top: 55%;
     left: 29%;
     flex-direction:column;
     gap: 5px;
     }
.card-video-container-post {

margin-top:0;
margin-bottom: -10px;
   
}
.card-video-container-post img {
width: 100%;
height:auto;

}
.content_footer_toooo iframe{
    margin-bottom: 30px;
}


.glass-btn-top {
padding: clamp(10px, 1vw, 14px) clamp(80px, 6vw, 100px);

}

.glass-btn-top-3 {
padding: clamp(10px, 1vw, 14px) clamp(80px, 6vw, 100px);

}
 
    
}

/* ============================================================
   تبلت/صفحه‌هوشمند landscape (768px تا 1366px عرض + ارتفاع نسبتاً بلند)
   شامل: Nest Hub، Nest Hub Max، iPad Pro 11 و 12.9 در حالت افقی
   min-height باعث می‌شه گوشی‌های افقی (که کوتاهن) وارد این بلوک نشن
   ============================================================ */
@media (min-width: 768px) and (max-width: 1366px) and (min-height: 520px) and (orientation: landscape) {

      .card-video-container {
        aspect-ratio: 14 / 9; 
    }


.glass-btn-down{

    font-size: clamp(18px, 1.5vw, 22px);
    padding: clamp(16px, 1vw, 18px) clamp(44px, 6vw, 74px);
}
.overlay-subtitle {
    font-size: clamp(18px, 2vw, 22px);
}
.overlay-subtitle-3 {
    font-size: clamp(18px, 2vw, 22px);
}
.overlay-subtitle-2 {
    font-size: clamp(18px, 2vw, 18px);
}

.overlay-btn-wrapper {
    top: 30%;
    
    left: 60%;

    gap: 20px;
}
.overlay-btn-wrapper-3 {

    left: 60%;

    gap: 20px;
}


.btn-grad-video-wrapper {
   margin-top: 80px;
    gap: 5%;              /* فاصله‌ی بین ویدیو و کارت‌ها */
}

.btn-grad-wrapper {

    gap: 5px;             /* فاصله‌ی بین خود کارت‌ها */
    transform: translateX(200px);

    
}
.overlay-content-wrapper-slid2 {
    left: 45%;
     height:55%;
    width:90%;
       margin-top: 30px;
}
.main-video-gif-rack {
        top:95px;
        left: 0px;
       width:40%; 
       border-radius:30px;

}


    .card3.card img {height: clamp(80px, 26vw, 110px); }
    .card3.card {
        flex: 0 0 clamp(130px, 40vw, 165px);
        height: clamp(110px, 32vw, 145px);
        padding: 12px;
    }
    .card img { width: 100%; height: 100px; object-fit:cover; }
    .card3 video { width: 100%; height:auto; }
    .card_sabet-title video { width: 100%; height:auto; }
    .card2 img { width: 100%; height: 100px; object-fit:cover; }
    .card3 img { width: 100%; height: 100px; object-fit:cover; }
.card3 {
width: 100%;
max-width: 100%;
padding:240px 20px 20px;
border-radius: 50px;
margin-bottom: 5px;
margin-top: 50px;
}

.card3 img {
width: 100%;
height: 300px;
border-radius:8px;
object-fit: cover;

}


    .card_sabet img { width: 100%; height:auto; object-fit:cover;   border-radius: 5px; }
    .card_sabet{padding:10px;  border-radius:30px; }
    .card2-title{margin-bottom:0px;    font-size: clamp(18px, 2vw, 24px);}
.card-sabet-image {
top:-40px;
left: 50%;
width:85%;
border-radius: 30px;
}





    .thumb{ width:80px; height:80px; }
    .modal-img{ max-width:95%; max-height:80vh; }
    .search-container.active .search-input { width: 150px; }
    .search-btn{ width: 34px; height: 34px; }
    .l-navbar{ width:auto; }
    .nav_link{ padding: 12px; }
    .card_sabet_post{ padding:20px;}
    .content{ padding: 5px 1px; }
    .article-content{ padding-inline: 3%; line-height: 2.1;}
    .article-content img{ max-width: 100%; }
    .spotlight{     width: clamp(140px, 45vw, 200px);
    height: clamp(70px, 22vw, 100px);}
   




     .overlay-title-4-5{
      margin-bottom: 0;
     }
     
     .overlay-text-wrapper-footer {
     top: 50%;
     left: 29%;
     flex-direction:column;
     gap: 5px;
     }
.card-video-container-post {

margin-top:0;
margin-bottom: -10px;
   
}
.card-video-container-post img {
width: 100%;
height:auto;

}
.content_footer_toooo iframe{

    margin-bottom: 30px;
}


.glass-btn-top {
padding: clamp(10px, 1vw, 14px) clamp(80px, 6vw, 100px);

}

.glass-btn-top-3 {
padding: clamp(10px, 1vw, 14px) clamp(80px, 6vw, 100px);

}



}

/* ============================================================
   موبایل landscape (هر عرضی، ولی ارتفاع کوتاه زیر 500px)
   این بلوک دیگه به عرض گوشی وابسته نیست، پس هیچ گوشی‌ای جا نمی‌مونه
   ============================================================ */
@media (orientation: landscape) and (max-height: 540px) {
    .card-video-container {
        aspect-ratio: 12 / 9; 
    }

        .card-video-container-zamin {
        aspect-ratio:12 / 9; /* ارتفاع دینامیک صفحه، سازگار با موبایل */
   
    }

    .main-video-gif-zamin {
        margin-top: 210px;
    }




    .brand-overlay {
        position: absolute;
          top: clamp(120px, 20vw, 120px);
      
       
        left: 60%;
        transform: translateX(-50%) scale(1.7);
        z-index: 10;
    }

    .overlay-hooshmand-wrapper,
    .overlay-rayane-wrapper,
    .overlay-shargh-wrapper {
        margin-left: clamp(-6px, -0.8vw, -8px);
        margin-top: 1px;
    }




.btn-grad-wrapper-slid4 {
    gap: 10px;
    margin-left: 10px;
    
}
    .stat-card-slid4  {
     width: 250px;
    height: 250px;
    margin: 10px auto;
    max-width: 100%;
    font-size: clamp(14px, 1vw, 18px);
    padding: 4px 2px;
   
    }
    .stat-card-slid4-ejtemaee  {
     width: 250px;
    height: 250px;
    margin: 10px auto;
    max-width: 100%;
    font-size: clamp(14px, 1vw, 18px);
    padding: 4px 2px;
   
    }
        .stat-card-slid4-map {
     width: 250px;
    height: 250px;
    margin: 10px auto;
    max-width: 100%;
    font-size: clamp(14px, 1vw, 18px);
    padding: 4px 2px;
  
   
    }

    .stat-number-slid4 {
        font-size: clamp(18px, 2vw, 20px);
        padding-left: 10px;
        padding-right: 10px;
    }


.overlay-btn-wrapper {
    top: 30%;
    
    left: 70%;

    gap: 20px;
}
.overlay-btn-wrapper-3 {

    left: 70%;

    gap: 20px;
}


.btn-grad-video-wrapper {

    gap: 5%;              /* فاصله‌ی بین ویدیو و کارت‌ها */
}

.btn-grad-wrapper {

    gap: 5px;             /* فاصله‌ی بین خود کارت‌ها */
    transform: translateX(200px);
   margin-top: -100px;
    
}
.overlay-content-wrapper-slid2 {
    left: 45%;
    width:85%;
}
.main-video-gif-rack {
        top:20px;
        left: 0px;
       width:40%; 

}




    .cards {
        grid-template-columns: 1fr;
        gap: 12px;
        margin: 0;
       padding-left: 10px;
       padding-right: 10px;
    }
    .cards_footer{ grid-template-columns:1fr; }


    .card3.card img {height: clamp(80px, 26vw, 110px); }
    .card3.card {
        flex: 0 0 clamp(130px, 40vw, 165px);
        height: clamp(110px, 32vw, 145px);
        padding: 12px;
    }
    .card img { width: 100%; height: 100px; object-fit:cover; }
    .card3 video { width: 100%; height:auto; }
    .card_sabet-title video { width: 100%; height:auto; }
    .card2 img { width: 100%; height: 100px; object-fit:cover; }
    .card3 img { width: 100%; height: 100px; object-fit:cover; }
.card3 {
width: 100%;
max-width: 100%;
padding:220px 20px 20px;
border-radius: 50px;
margin-bottom: 5px;
margin-top: 50px;
}

.card3 img {
width: 100%;
height: 300px;
border-radius:8px;
object-fit: cover;

}


    .card_sabet img { width: 100%; height:auto; object-fit:cover;   border-radius: 5px; }
    .card_sabet{padding:10px;  border-radius:30px; }
    .card2-title{margin-bottom:0px;    font-size: clamp(18px, 2vw, 24px);}
.card-sabet-image {
top:-40px;
left: 50%;
width:85%;
border-radius: 30px;
}





    .thumb{ width:80px; height:80px; }
    .modal-img{ max-width:95%; max-height:80vh; }
    .search-container.active .search-input { width: 150px; }
    .search-btn{ width: 34px; height: 34px; }
    .l-navbar{ width:auto; }
    .nav_link{ padding: 12px; }
    .card_sabet_post{ padding:20px;}
    .content{ padding: 5px 1px; }
    .article-content{ padding-inline: 3%; line-height: 2.1;}
    .article-content img{ max-width: 100%; }
    .spotlight{     width: clamp(140px, 45vw, 200px);
    height: clamp(70px, 22vw, 100px);}
   

.server3d {

    height: 400px;
   
}

.glass-btn-down{

    font-size: clamp(18px, 1.5vw, 22px);
    padding: clamp(16px, 1vw, 18px) clamp(44px, 6vw, 74px);
}

     .overlay-title-4-5{
      margin-bottom: 0;
     }
     .overlay-text-wrapper-footer {
     top: 60%;
     left: 29%;
     flex-direction:column;
     gap: 5px;
     }
.card-video-container-post {

margin-top:0;
margin-bottom: -10px;
   
}
.card-video-container-post img {
width: 100%;
height:auto;

}
.content_footer_toooo iframe{
    margin-bottom: 30px;
}


 


}
/*=======size for big monitor=======*/
/*=======size for big monitor=======*/
/*=======size for big monitor=======*/
/*=======size for big monitor=======*/
/*=======size for big monitor=======*/

@media (min-width: 1500px) and (max-width: 2000px) and (hover: hover) and (pointer: fine) {

.header__brand {
    gap:8px;
}
.brand-overlay {

     top: 15%;
    left: 40%;

    scale: 1.9;
}

.logo-img {
    height: 86px;

}

.nav-link {
      font-size: clamp(16px, 1.5vw, 20px);
}
.header__nav {

    gap: 70px;

}


.nav-item img{
    height: 40px;
}

.overlay-content-wrapper {
      width: min(90%, 500px);
   } 

.overlay-title {
      font-size: clamp(24px, 3.5vw, 42px); 
  }

.overlay-subtitle {
font-size: clamp(16px, 2vw, 28px);

}
.overlay-subtitle-2 {
font-size: clamp(16px, 2vw, 24px);

}


.glass-btn-top {
font-size: clamp(16px, 1.5vw, 22px);

    padding: clamp(10px, 1vw, 16px) clamp(160px, 6vw, 180px);
}
.glass-btn-down{
font-size: clamp(16px, 1.5vw, 22px);

    padding: clamp(10px, 1vw, 16px) clamp(44px, 6vw, 150px);
        border: 5px solid transparent;
}
.content_footer_toooo{
gap:40px;
}

.content_footer{
    font-size: clamp(16px, 1.5vw, 22px);
padding-right: 60px;

}
.overlay-text-wrapper {
    position: absolute;
    top: 30%;
    left: 60%;


    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;

    z-index: 5;
}
.btn-grad-wrapper {
    gap: 10px;             /* فاصله‌ی بین خود کارت‌ها */
margin-top: -140px;
    
}

.stat-number {
 font-size: clamp(18px, 4vw, 26px);
}

.overlay-content-wrapper-slid2 {
    border-radius: 30px;
}

.glass-btn-top-3 {
 font-size: clamp(16px, 1.5vw, 22px);

    padding: clamp(10px, 1vw, 16px) clamp(44px, 6vw, 150px);
    /* ضخامت Border */
    border: 5px solid transparent;
}

   .overlay-content-wrapper-3 {
 width: min(90%, 500px);
    text-align: center;
    padding: clamp(10px, 2vw, 20px);
 
}
.overlay-subtitle-3 {
font-size: clamp(16px, 2vw, 28px);
}

.btn-grad-wrapper-slid4 {
    gap: 80px;
    margin-left: 80px;
    margin-top: -100px;
    
}

.stat-card-slid4 {
    gap: 30px;             /* فاصله‌ی بین خود کارت‌ها */
    width:360px;
    height: 350px;
    margin: 60px auto;
     border-radius: 30px ;
    padding: 40px 28px;
}
.stat-card-slid4-ejtemaee {
    gap: 30px;             /* فاصله‌ی بین خود کارت‌ها */
    width:360px;
    height: 350px;
    margin: 60px auto;
      border-radius: 30px ;
    padding: 40px 28px;
}
.stat-card-slid4-map {
    gap: 30px;             /* فاصله‌ی بین خود کارت‌ها */
    width:360px;
    height: 350px;
    margin: 60px auto;
      border-radius: 30px ;
    padding: 40px 28px;
}

.stat-number-slid4 {
font-size: clamp(18px, 4vw, 26px);
}
.contact-info-slid4{
    font-size: clamp(18px, 4vw, 22px);
}


.gradient-block__content {
max-width: 1600px;
}

.gradient-block__content h2{
 font-size: clamp(26px, 3.5vw, 44px); 
 
}
.gradient-block__content h1{
font-size: clamp(22px, 2vw, 32px); 
     
}




.cards-wrapper{
   
        padding:20px;

    margin-top:40px;
    margin-bottom:40px;


}
    .card3.card img {height: clamp(110px, 26vw, 120px); }
    .card3.card {
       flex:0 0 200px;
        height: clamp(200px, 32vw, 220px);
     
    }
   .content{
font-size:clamp(20px,2vw,20px);
}
.article-content *{
   
    
    font-size:clamp(20px,2vw,22px);
  
}

.article-content {
  
    line-height: 2.1;
        padding-right: 6%;
    padding-left: 6%;
  
}



    .card-video-container {
        aspect-ratio: 18 / 9; 
    }
    .main-video-gif-zamin {

    margin-top: 200px;

}

        .card-video-container-zamin {
        aspect-ratio: 18 / 9; 
    }
        .card-video-container-post {
        aspect-ratio: 20 / 9; 
    }
    .card-video-container-post img {

height:900px;


}


    .cards {
padding: 20px;

    }

.card3 {

    padding: 300px 20px 20px;

    border-radius: 55px;

}



.card-sabet-image {
    position: absolute;

    top: -80px;
    left: 50%;

    height: 350px;

    border-radius: 45px;

}
 

.card3 img {
width: 100%;
height: 350px;


}


.glass-btn {
    width: clamp(94px, 20vw, 154px);
    height: clamp(38px, 5vw, 54px);
font-size: clamp(16px, 2vw, 18px);
        border: 2px solid transparent;

}



.server3d{

    height:800px;
   
}


.gallery{
    gap: 50px;
    margin-right: 90px;
}

.gallery img{
    width:120px;
    height:auto;

}



}













/*=================*/








.update-showcase{

    width:100%;
     height:650px;
    padding:80px 0;

background: #020024;

  margin-bottom: -10px;
background: linear-gradient(0deg,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 0.866) 20%, rgb(242, 241, 235) 85%);


     



   position: relative;
    overflow: hidden;



}


.update-stage{

    width:100%;

    height:500px;

    position:relative;

    perspective:1800px;

    overflow:visible;



}

.carousel-card{
    display: flex;
    flex-direction: column;
    position:absolute;

    left:50%;

    top:50%;

    width:340px;

    height:420px;

  

    overflow:visible;
    align-items: center;
    text-align: center;

    transform-style:preserve-3d;

    transition:

        transform .9s cubic-bezier(.22,.61,.36,1),

        opacity .8s,

        filter .8s;



        background:rgb(242, 241, 235);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
border: 1px solid #e2e2e2;

margin-bottom:60px;

  
}
.card-reflection{
    position:absolute;
    left:0;
    top:100%;
    width:100%;
    height:50px;
    object-fit:cover;
    transform: scaleY(-1);
    opacity:.2;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent);
    pointer-events:none;
    z-index:0;
}

.carousel-card img{
      width:90%;
    height:250px; 
    aspect-ratio: auto;
    border-radius:8px;

}
.carousel-card h3{

    padding:10px;
  
  color:#2c3e50;
 
}

.carousel-card h1{
    color:#1e2b37;
        font-weight:bold;
    
    font-size: clamp(18px, 2vw, 22px); 
  text-align: center;
}
.carousel-card .glass-btn{
    margin-top: 20px;
    align-self: center;
   
}
.carousel-card.center{

  transform:
        translate(-50%, -50%)
        translateY(-20px)
        scale(1.08);
    z-index:10;
 
    filter:none;

}
.carousel-card.left{

transform:
        translate(-50%, -50%)
        translateX(-320px)
        rotateY(30deg)
        scale(.82);

    z-index:5;

}
.carousel-card.right{

transform:
        translate(-50%, -50%)
        translateX(320px)
        rotateY(-30deg)
        scale(.82);
   
    z-index:5;

}

.carousel-card.far-left{
    transform:
        translate(-50%, -50%)
        translateX(-565px)
        rotateY(35deg)
        scale(.6);
 
    z-index:2;
    filter: blur(1px);
}

.carousel-card.far-right{
    transform:
        translate(-50%, -50%)
        translateX(565px)
        rotateY(-35deg)
        scale(.6);
  
    z-index:2;
    filter: blur(1px);
}





/* ===================== تبلت (تا 1024px) ===================== */
@media (max-width:1024px){

    .update-showcase{
        height:460px;
    }

    .update-stage{
        height:460px;
    }

    .carousel-card{
        width:280px;
        height:380px;
    }

    .carousel-card img{
        height:170px;
    }

    .carousel-card.left{
        transform:
            translate(-50%, -50%)
            translateX(-230px)
            rotateY(30deg)
            scale(.78);
    }

    .carousel-card.right{
        transform:
            translate(-50%, -50%)
            translateX(230px)
            rotateY(-30deg)
            scale(.78);
    }

    .carousel-card.far-left{
        transform:
            translate(-50%, -50%)
            translateX(-400px)
            rotateY(35deg)
            scale(.55);
    }

    .carousel-card.far-right{
        transform:
            translate(-50%, -50%)
            translateX(400px)
            rotateY(-35deg)
            scale(.55);
    }

}


/* ===================== موبایل بزرگ (تا 768px) ===================== */
@media (max-width:768px){

    .update-showcase{
        height:400px;
        padding:50px 0;

    }

    .update-stage{
        height:400px;
    }

    .carousel-card{
        width:230px;
        height:330px;
        border-radius:12px;
    }

    .carousel-card img{
        height:140px;
    }

    .carousel-card h3{
        font-size:16px;
        padding:6px;
    }

    .carousel-card.center{
        transform:
            translate(-50%, -50%)
            translateY(-10px)
            scale(1.05);
    }

    .carousel-card.left{
        transform:
            translate(-50%, -50%)
            translateX(-160px)
            rotateY(28deg)
            scale(.72);
        
    }

    .carousel-card.right{
        transform:
            translate(-50%, -50%)
            translateX(160px)
            rotateY(-28deg)
            scale(.72);
       
    }

    /* در موبایل، کارت‌های far رو مخفی می‌کنیم تا شلوغ نشه */
    .carousel-card.far-left,
    .carousel-card.far-right{
        opacity:0;
        pointer-events:none;
    }

}


/* ===================== موبایل کوچک (تا 480px) ===================== */
@media (max-width:480px){

    .update-showcase{
        height:440px;
        padding:45px 0;
            width:100%;

  
    }

    .update-stage{
        height:340px;
    }

    .carousel-card{
        width:190px;
        height:280px;
    }

    .carousel-card img{
        height:110px;
    }

    .carousel-card h3{
        font-size:14px;
    }

    .carousel-card .glass-btn{
        font-size:12px;
        margin-bottom:12px;
    }

    .carousel-card.left{
        transform:
            translate(-50%, -50%)
            translateX(-115px)
            rotateY(25deg)
            scale(.68);
       
    }

    .carousel-card.right{
        transform:
            translate(-50%, -50%)
            translateX(115px)
            rotateY(-25deg)
            scale(.68);
       
    }

}




/* =====================تصاویر مجوزها  ===================== */

.certificates-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 900px;
    margin: 40px auto;
    padding: 0 16px;
}


.license-intro {
    max-width: 800px;
    margin: 3rem auto;
    padding: 2rem 2.5rem;
    background: #f6f8fb;
    border: 1px solid #e2e2e2;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.license-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background-color: #eef3f9;
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 16px;
}

.license-title {

    font-weight: 700;
    color: #2f2f2f;
    margin: 0 0 12px;
}

.license-text {

    line-height: 2;
    color: #2f2f2f;
    margin: 0;
}
@media (max-width:480px){
    .certificates-grid{
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap:14px;
    }
}
@media (max-width: 480px) {
    .license-intro {
        padding: 1.5rem 1.25rem;
        margin: 2rem auto;
    }

    .license-text {
        font-size: 14px;
        line-height: 1.9;
    }


}



@media (max-width: 600px) {
    .certificates-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}


.alert-box {
    position: absolute;
    top: 70px;              /* فاصله از بالا (زیر هدر) */
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    width: min(90%, 500px); /* عرض محدود تا خیلی کشیده نشه */
}





















@media (min-width: 344px) and (max-width: 375px){

    .cards {
        grid-template-columns: 1fr;
        gap: 12px;
        margin: 0;
        padding-left: 10px;
        padding-right: 10px;
    }

}









/*========size for big monitor======*/
@media (min-width: 1550px) and (max-width: 2000px) and (hover: hover) and (pointer: fine) {

.update-showcase{
 height:800px;  

  overflow: hidden;
 
}
.update-stage{

height:800px;
}
.carousel-card{

 width:440px;

    height:520px;

}
.carousel-card img{
   width: 90%;
    height:300px; 
}

.carousel-card h1{
font-size: clamp(18px, 2vw, 26px); 

}


.carousel-card.left{

transform:
        translate(-50%, -50%)
        translateX(-415px)
        rotateY(30deg)
        scale(.82);

}
.carousel-card.right{

transform:
        translate(-50%, -50%)
        translateX(415px)
        rotateY(-30deg)
        scale(.82);


}

.carousel-card.far-left{
    transform:
        translate(-50%, -50%)
        translateX(-745px)
        rotateY(35deg)
        scale(.6);

}

.carousel-card.far-right{
    transform:
        translate(-50%, -50%)
        translateX(745px)
        rotateY(-35deg)
        scale(.6);

}

.certificates-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 1400px;
    margin: 40px auto;
    padding: 0 16px;
}


.license-intro {
    max-width: 1300px;
    margin: 3rem auto;
    padding: 2rem 2.5rem;
    background: #f6f8fb;
    border: 1px solid #e2e2e2;
    border-radius: 30px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.license-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #eef3f9;
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 16px;
}

.license-title {

    font-weight: 700;
    color: #2f2f2f;
    margin: 0 0 12px;
}

}


/*==============*/