.elementor-widget-container .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-container .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-2457 .elementor-element.elementor-element-356f362{--display:flex;--overlay-opacity:0.27;}.elementor-2457 .elementor-element.elementor-element-356f362::before, .elementor-2457 .elementor-element.elementor-element-356f362 > .elementor-background-video-container::before, .elementor-2457 .elementor-element.elementor-element-356f362 > .e-con-inner > .elementor-background-video-container::before, .elementor-2457 .elementor-element.elementor-element-356f362 > .elementor-background-slideshow::before, .elementor-2457 .elementor-element.elementor-element-356f362 > .e-con-inner > .elementor-background-slideshow::before, .elementor-2457 .elementor-element.elementor-element-356f362 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://azar-web.ir/wp-content/uploads/2026/06/ChatGPT-Image-Jun-29-2026-07_31_34-PM.png");--background-overlay:'';background-position:center center;}.elementor-2457 .elementor-element.elementor-element-356f362::before{filter:brightness( 122% ) contrast( 130% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-widget-html .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-html .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-2457 .elementor-element.elementor-element-59911f8{--display:flex;}.elementor-2457 .elementor-element.elementor-element-3d049ec{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:350px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-widget-heading .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-heading .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-2457 .elementor-element.elementor-element-73db19f{text-align:center;}.elementor-2457 .elementor-element.elementor-element-73db19f .elementor-heading-title{font-family:"ELHAM", Sans-serif;font-weight:600;}.elementor-2457 .elementor-element.elementor-element-e31e663{--display:flex;}.elementor-2457 .elementor-element.elementor-element-f6ac029{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-9fbd08b *//* =====================================
   EMERALD NETWORK v2
===================================== */

.em-network{
    --primary:#00d084;
    --primary2:#00ffb3;
    --glass:rgba(255,255,255,.05);
    --border:rgba(255,255,255,.12);

    position:relative;
    width:100%;
    max-width:1200px;
    height:820px;

    margin:auto;

    overflow:visible;

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

}

/* =============================
        SVG
============================= */

.em-svg{


    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    overflow:visible;

    pointer-events:none;

}

.em-path{

    fill:none;

    stroke:url(#emLine);

    stroke-width:2.2;

    stroke-linecap:round;

    opacity:.7;

    stroke-dasharray:9 9;

    filter:drop-shadow(0 0 12px rgba(0,255,180,.45));

    animation:pathMove 8s linear infinite;

}

@keyframes pathMove{

to{

stroke-dashoffset:-180;

}

}

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

.em-card{

position:absolute;

left:50%;
top:50%;

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

width:290px;
height:290px;

border-radius:34px;

background:var(--glass);

backdrop-filter:blur(26px);

border:1px solid var(--border);

display:flex;

flex-direction:column;

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

overflow:hidden;

box-shadow:

0 0 45px rgba(0,208,132,.15),

0 0 120px rgba(0,208,132,.08),

inset 0 0 40px rgba(255,255,255,.03);

animation:cardFloat 6s ease-in-out infinite;

z-index:50;

}

/* Border Glow */

.em-card::before{

content:"";

position:absolute;

inset:-1px;

padding:1px;

border-radius:34px;

background:

linear-gradient(

135deg,

rgba(0,255,170,.9),

rgba(0,255,170,0)

);

-webkit-mask:

linear-gradient(#fff 0 0) content-box,

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

}

/* =============================
        GLOW
============================= */

.em-glow{

position:absolute;

width:380px;
height:380px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(0,255,170,.35),

rgba(0,255,170,.10),

transparent 70%);

filter:blur(50px);

animation:glowPulse 5s ease-in-out infinite;

z-index:-1;

}

/* =============================
        LOGO
============================= */

.em-logo{

width:88px;
height:88px;

display:flex;

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

border-radius:24px;

background:

rgba(0,255,170,.08);

border:

1px solid rgba(0,255,170,.35);

box-shadow:

0 0 30px rgba(0,255,170,.22);

margin-bottom:24px;

}

.em-logo svg{

width:44px;
height:44px;

color:var(--primary2);

}

.em-card h3{

margin:0;

font-size:28px;

font-weight:700;

letter-spacing:2px;

color:#fff;

}

.em-card span{

margin-top:10px;

font-size:15px;

color:#a9ffd8;

opacity:.8;

}

/* =============================
      ANIMATION
============================= */

@keyframes glowPulse{

0%{

opacity:.45;

transform:scale(.92);

}

50%{

opacity:1;

transform:scale(1.08);

}

100%{

opacity:.45;

transform:scale(.92);

}

}

@keyframes cardFloat{

0%{

transform:translate(-50%,-50%) translateY(0);

}

50%{

transform:translate(-50%,-50%) translateY(-10px);

}

100%{

transform:translate(-50%,-50%) translateY(0);

}

}
/*=========================================
            NODES
=========================================*/

.em-node{

position:absolute;

width:84px;
height:84px;

border-radius:26px;

display:flex;

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

background:
linear-gradient(
180deg,
rgba(255,255,255,.08),
rgba(255,255,255,.03)
);

backdrop-filter:blur(18px);

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

box-shadow:

0 0 25px rgba(0,255,170,.10),

inset 0 0 20px rgba(255,255,255,.04);

transition:

transform .45s cubic-bezier(.2,.8,.2,1),

box-shadow .45s,

border-color .45s;

cursor:pointer;

overflow:hidden;

z-index:20;

animation:nodeFloat 7s ease-in-out infinite;

}


/* نور داخلی */

.em-node::before{

content:"";

position:absolute;

width:170px;
height:170px;

background:

radial-gradient(circle,

rgba(0,255,170,.22),

transparent 72%);

opacity:0;

transition:.45s;

}


/* Hover */

.em-node:hover{

transform:translateY(-5px) scale(1.08);

border-color:#00ffb3;

box-shadow:

0 0 60px rgba(0,255,170,.35),

0 0 120px rgba(0,255,170,.18);

}

.em-node:hover::before{

opacity:1;

}


/* SVG */

.em-node svg{

width:34px;
height:34px;

stroke:#00ffb3;

fill:none;

stroke-width:1.8;

stroke-linecap:round;

stroke-linejoin:round;

filter:

drop-shadow(0 0 8px rgba(0,255,170,.7));

z-index:2;

}


/*=========================================
          POSITION
=========================================*/

.tl{
left:16%;
top:17%;
}

.tr{
right:16%;
top:17%;
}

.ml{
left:9%;
top:47%;
transform:translateY(-20%);
}

.mr{
right:9%;
top:47%;
transform:translateY(-20%);
}

.bl{
left:16%;
bottom:15%;
}

.br{
right:16%;
bottom:15%;
}


/*=========================================
        FLOAT
=========================================*/

@keyframes nodeFloat{

0%{

translate:0 0;

}

50%{

translate:0 -12px;

}

100%{

translate:0 0;

}

}


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

@media(max-width:768px){

.em-network{

height:620px;

}

.em-card{

width:220px;
height:220px;

}

.em-logo{

width:70px;
height:70px;

}

.em-card h3{

font-size:22px;

}

.em-node{

width:58px;
height:58px;

border-radius:18px;

}

.em-node svg{

width:24px;
height:24px;

}

}
/*==============================
    MOVING LIGHT
==============================*/

.travel-dot{

fill:#00ffb3;

filter:url(#emeraldGlow);

animation:pulseDot 1.2s ease-in-out infinite;

}

@keyframes pulseDot{

0%{

opacity:.3;

r:3;

}

50%{

opacity:1;

r:6;

}

100%{

opacity:.3;

r:3;

}

}

/*==============================
      EXTRA GLOW
==============================*/

.em-path{

stroke-width:2.4;

stroke-linecap:round;

filter:

drop-shadow(0 0 6px #00ff99)

drop-shadow(0 0 18px rgba(0,255,170,.4));

}

.em-card:hover{

box-shadow:

0 0 40px rgba(0,255,170,.3),

0 0 120px rgba(0,255,170,.15);

}

.em-logo{

animation:logoPulse 3s ease infinite;

}

@keyframes logoPulse{

0%{

box-shadow:

0 0 20px rgba(0,255,170,.2);

}

50%{

box-shadow:

0 0 45px rgba(0,255,170,.55);

}

100%{

box-shadow:

0 0 20px rgba(0,255,170,.2);

}

}
/*=============================
        PARTICLES
=============================*/

.em-particles{

position:absolute;

inset:0;

overflow:hidden;

pointer-events:none;

z-index:8;

}

.em-particle{

position:absolute;

width:3px;
height:3px;

border-radius:50%;

background:#00ffb3;

opacity:.7;

box-shadow:

0 0 8px #00ffb3,

0 0 18px rgba(0,255,179,.45);

animation:

particleFloat linear infinite,

particleFade ease-in-out infinite;

}

@keyframes particleFloat{

0%{

transform:translate(0,0);

}

50%{

transform:translate(25px,-18px);

}

100%{

transform:translate(50px,-35px);

}

}

@keyframes particleFade{

0%,100%{

opacity:0;

}

50%{

opacity:1;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8bc8a56 *//* ===== GRID ===== */

.dns-bento{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

    width:100%;

    max-width:1600px;

    margin:auto;
}

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

.dns-card{

    position:relative;

    overflow:hidden;

    border-radius:32px;

    padding:40px;

    background:
    linear-gradient(
        180deg,
        rgba(12,16,28,.92),
        rgba(6,8,14,.98)
    );

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

    backdrop-filter:blur(20px);

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 20px 60px rgba(0,0,0,.35);

    transition:.4s ease;
}

.dns-card:hover{

    transform:translateY(-8px);

    border-color:rgba(61,167,255,.25);

    box-shadow:
        0 0 50px rgba(61,167,255,.08),
        0 30px 70px rgba(0,0,0,.4);
}

/* ===== FIRST ROW ===== */

.unlock-card{

    min-height:420px;
}

.routing-card{

    min-height:420px;
}

.privacy-card{

    min-height:420px;
}

/* ===== SECOND ROW ===== */

.core-card{

    min-height:520px;
}

.globe-card{

    grid-column:span 2;

    min-height:520px;
}

/* ===== THIRD ROW ===== */

.stats-card{

    min-height:340px;
}

.cta-card{

    grid-column:span 2;

    min-height:340px;
}

/* ===== RESPONSIVE ===== */

@media(max-width:1200px){

    .dns-bento{

        grid-template-columns:repeat(2,1fr);
    }

    .globe-card,
    .cta-card{

        grid-column:span 2;
    }

}

@media(max-width:768px){

    .dns-bento{

        grid-template-columns:1fr;
    }

    .globe-card,
    .cta-card{

        grid-column:span 1;
    }

    .dns-card{

        min-height:auto !important;

        padding:30px;
    }

}
/* =========================
   UNLOCK CARD
========================= */

.unlock-card{

    text-align:center;
}

.unlock-badge{

    position:absolute;

    top:30px;
    left:30px;

    display:flex;
    align-items:center;
    gap:10px;

    padding:10px 20px;

    border-radius:50px;

    background:rgba(0,255,149,.08);

    border:1px solid rgba(0,255,149,.15);

    color:#00ff95;
}

.unlock-badge span{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#00ff95;

    box-shadow:0 0 20px #00ff95;

    animation:unlockPulse 2s infinite;
}

@keyframes unlockPulse{

    50%{
        opacity:.4;
        transform:scale(.7);
    }

}

.shield-wrapper{

    position:relative;

    width:220px;
    height:220px;

    margin:70px auto 40px;
}

.shield-glow{

    position:absolute;

    inset:0;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(0,255,149,.18),
        transparent 70%
    );

    animation:shieldGlow 3s ease-in-out infinite;
}

@keyframes shieldGlow{

    50%{
        transform:scale(1.15);
    }

}

.shield-icon{

    position:absolute;

    left:0%;
    top:0%;

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

    width:130px;
    height:130px;

    border-radius:30px;

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

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

    border:1px solid rgba(0,255,149,.2);

    backdrop-filter:blur(20px);

    box-shadow:
        0 0 40px rgba(0,255,149,.15);
}

.shield-icon svg{

    width:70px;
    height:70px;

    stroke:#00ff95;

    stroke-width:1.8;

    filter:
        drop-shadow(0 0 12px #00ff95);
}

.unlock-card h2{

    color:#fff;

    font-size:42px;

    margin-bottom:20px;
}

.unlock-line{

    width:80px;
    height:4px;

    margin:0 auto 30px;

    border-radius:50px;

    background:#00ff95;

    box-shadow:0 0 20px #00ff95;
}

.unlock-card p{

    color:#8d99aa;

    line-height:2;

    max-width:320px;

    margin:0 auto 40px;
}

.unlock-btn{

    display:inline-flex;

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

    width:220px;
    height:60px;

    border-radius:18px;

    text-decoration:none;

    color:#00150c;

    background:#00ff95;

    font-weight:600;

    transition:.35s;
}

.unlock-btn:hover{

    transform:translateY(-5px);

    box-shadow:
        0 0 40px rgba(0,255,149,.45);
}
.shield-wrapper{

    position:relative;

    width:240px;
    height:240px;

    margin:60px auto 40px;

    display:flex;

    justify-content:center;

    align-items:center;
}

/* هاله نور */

.shield-glow{

    position:absolute;

    width:250px;
    height:180px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(0,255,149,.25),
    transparent 70%);

    filter:blur(18px);

    animation:glow 3s ease-in-out infinite;
}

/* خود سپر */

.shield-icon{

    position:relative;

    width:120px;
    height:120px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:28px;

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

    backdrop-filter:blur(20px);

    border:1px solid rgba(0,255,149,.2);

    box-shadow:
        0 0 40px rgba(0,255,149,.18);

    z-index:5;

    animation:float 4s ease-in-out infinite;
}

/* SVG */

.shield-icon svg{

    width:70px;
    height:70px;

    stroke:#00ff95;

    stroke-width:1.6;

    filter:
        drop-shadow(0 0 10px #00ff95)
        drop-shadow(0 0 25px #00ff95);
}

/* فقط خط‌ها */

.shield-icon svg path{

    fill:none;
}

/* تیک داخل سپر */

.shield-icon svg path:last-child{

    stroke:#00ff95;
}

/* شناور شدن */

@keyframes float{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

/* نور */

@keyframes glow{

    50%{

        transform:scale(1.15);

        opacity:.6;

    }

}
/* ======================
   PRIVACY CARD
====================== */

.privacy-card{

    position:relative;

    overflow:hidden;

    text-align:center;
}

/* Badge */

.privacy-badge{

    position:absolute;

    top:25px;
    left:25px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:30px;

    background:rgba(170,90,255,.08);

    border:1px solid rgba(170,90,255,.18);

    color:#b56cff;
}

.privacy-badge span{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#b56cff;

    box-shadow:0 0 20px #b56cff;

    animation:privacyPulse 2s infinite;
}

@keyframes privacyPulse{

    50%{

        transform:scale(.7);

        opacity:.4;

    }

}

/* Core */

.privacy-core{

    position:relative;

    width:250px;
    height:250px;

    margin:70px auto 40px;
}

/* Rings */

.ring{

    position:absolute;

    left:50%;
    top:50%;

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

    border-radius:50%;

    border:1px solid rgba(181,108,255,.25);
}

.ring1{

    width:220px;
    height:220px;

    animation:spin 12s linear infinite;
}

.ring2{

    width:170px;
    height:170px;

    animation:spinReverse 8s linear infinite;
}

@keyframes spin{

    to{

        transform:
        translate(-50%,-50%)
        rotate(360deg);

    }

}

@keyframes spinReverse{

    to{

        transform:
        translate(-50%,-50%)
        rotate(-360deg);

    }

}

/* Shield */

.shield-core{

    position:absolute;

    left:50%;
    top:50%;

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

    width:95px;
    height:95px;

    border-radius:24px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:42px;

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

    backdrop-filter:blur(20px);

    border:1px solid rgba(181,108,255,.25);

    color:#b56cff;

    box-shadow:
    0 0 35px rgba(181,108,255,.35);

    z-index:5;
}

/* Scan */

.scan{

    position:absolute;

    left:20px;

    top:50%;

    width:210px;
    height:2px;

    background:
    linear-gradient(90deg,
    transparent,
    #b56cff,
    transparent);

    box-shadow:
    0 0 20px #b56cff;

    animation:scanMove 3s infinite;
}

@keyframes scanMove{

    0%{

        transform:translateY(-70px);

    }

    50%{

        transform:translateY(70px);

    }

    100%{

        transform:translateY(-70px);

    }

}

/* Dots */

.dot{

    position:absolute;

    width:8px;
    height:8px;

    border-radius:50%;

    background:#b56cff;

    box-shadow:0 0 15px #b56cff;
}

.d1{

    top:18px;
    left:120px;

}

.d2{

    right:20px;
    top:110px;

}

.d3{

    bottom:18px;
    left:120px;

}

.d4{

    left:20px;
    top:110px;

}

/* Text */

.privacy-card h2{

    color:#fff;

    font-size:30px;
}

.privacy-card p{

    color:#9aa6b7;

    line-height:1.9;

    max-width:320px;

    margin:20px auto 0;

}
/*=========================
      CORE CARD
==========================*/

.core-card{

    position:relative;

    overflow:hidden;

    text-align:center;

}

/* Badge */

.core-status{

    position:absolute;

    top:25px;
    left:25px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:40px;

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

    border:1px solid rgba(0,180,255,.15);

    color:#44b8ff;

}

.core-status span{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#44b8ff;

    box-shadow:0 0 15px #44b8ff;

    animation:blink 2s infinite;

}

@keyframes blink{

50%{

opacity:.3;

transform:scale(.7);

}

}

/* System */

.core-system{

    position:relative;

    width:320px;
    height:320px;

    margin:60px auto;

}

/* Rings */

.core-ring{

    position:absolute;

    left:55%;
    top:45%;

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

    border-radius:50%;

    border:1px solid rgba(68,184,255,.18);

}

.ring1{

width:290px;
height:290px;

animation:rotate1 18s linear infinite;

}

.ring2{

width:220px;
height:220px;

animation:rotate2 12s linear infinite reverse;

}

.ring3{

width:150px;
height:150px;

animation:rotate1 8s linear infinite;

}

@keyframes rotate1{

to{

transform:
translate(-50%,-50%)
rotate(360deg);

}

}

@keyframes rotate2{

to{

transform:
translate(-50%,-50%)
rotate(-360deg);

}

}

/* Center */

.core-center{

position:absolute;

left:55%;
top:45%;

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

width:120px;
height:120px;

border-radius:30px;

background:
rgba(18,25,40,.65);

border:1px solid rgba(68,184,255,.25);

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

backdrop-filter:blur(20px);

box-shadow:
0 0 40px rgba(68,184,255,.2);

z-index:10;

animation:floatCore 4s ease-in-out infinite;

}

@keyframes floatCore{

50%{

transform:
translate(-50%,-53%);

}

}

.core-center h3{

margin:0;

font-size:28px;

color:#44b8ff;

letter-spacing:2px;

}

.core-center small{

margin-top:5px;

color:#9cb6d3;

letter-spacing:3px;

}

/* Glow */

.core-glow{

position:absolute;

width:180px;
height:180px;

border-radius:50%;

background:
radial-gradient(circle,
rgba(68,184,255,.18),
transparent 70%);

filter:blur(18px);

animation:glowPulse 3s ease-in-out infinite;

z-index:-1;

}

@keyframes glowPulse{

50%{

transform:scale(1.2);

opacity:.5;

}

}

/* Energy */

.energy{

position:absolute;

left:55%;
top:45%;

width:8px;
height:8px;

border-radius:50%;

background:#44b8ff;

box-shadow:
0 0 20px #44b8ff;

}

.energy1{

animation:orbit1 5s linear infinite;

}

.energy2{

animation:orbit2 6s linear infinite;

}

.energy3{

animation:orbit3 7s linear infinite;

}

.energy4{

animation:orbit4 8s linear infinite;

}

@keyframes orbit1{

from{

transform:
rotate(0deg)
translateX(145px)
rotate(0deg);

}

to{

transform:
rotate(360deg)
translateX(145px)
rotate(-360deg);

}

}

@keyframes orbit2{

from{

transform:
rotate(90deg)
translateX(110px)
rotate(-90deg);

}

to{

transform:
rotate(450deg)
translateX(110px)
rotate(-450deg);

}

}

@keyframes orbit3{

from{

transform:
rotate(180deg)
translateX(75px)
rotate(-180deg);

}

to{

transform:
rotate(540deg)
translateX(75px)
rotate(-540deg);

}

}

@keyframes orbit4{

from{

transform:
rotate(270deg)
translateX(145px)
rotate(-270deg);

}

to{

transform:
rotate(630deg)
translateX(145px)
rotate(-630deg);

}

}

.core-card h2{

color:#fff;

margin-top:-65px;

font-size:34px;

}

.core-card p{

max-width:340px;

margin:1px auto 0;

line-height:2;

color:#9aa6b7;

}
/*========================
    MONITOR CARD
========================*/

.monitor-card{

position:relative;

overflow:hidden;

padding:40px;

min-height:470px;

}

/* GRID */

.hud-grid{

position:absolute;

inset:0;

background:

linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

background-size:35px 35px;

opacity:.4;

}

/* BADGE */

.monitor-badge{

position:absolute;

top:25px;

left:25px;

padding:10px 20px;

border-radius:40px;

display:flex;

align-items:center;

gap:10px;

background:rgba(0,255,170,.08);

border:1px solid rgba(0,255,170,.18);

color:#00ffc3;

z-index:5;

}

.monitor-badge span{

width:10px;

height:10px;

border-radius:50%;

background:#00ffc3;

box-shadow:0 0 20px #00ffc3;

animation:pulse 2s infinite;

}

/* Scan */

.scan-line{

position:absolute;

left:-100%;

top:0;

width:120%;

height:3px;

background:

linear-gradient(

90deg,

transparent,

#00ffc3,

transparent);

box-shadow:

0 0 20px #00ffc3;

animation:scan 4s linear infinite;

opacity:.7;

}

@keyframes scan{

0%{

top:0;

}

100%{

top:100%;

}

}

/* BOX */

.monitor-box{

position:relative;

margin-top:70px;

padding:30px;

border-radius:30px;

background:

rgba(255,255,255,.03);

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

backdrop-filter:blur(18px);

}

/* ROW */

.row{

display:flex;

justify-content:space-between;

padding:18px 0;

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

color:white;

font-size:18px;

}

.green{

color:#00ff88;

}

.blue{

color:#46b8ff;

}

/* BAR */

.bar{

margin-top:30px;

height:12px;

border-radius:30px;

background:#162131;

overflow:hidden;

}

.fill{

width:92%;

height:100%;

border-radius:30px;

background:

linear-gradient(

90deg,

#00ffc3,

#4bd6ff);

box-shadow:

0 0 25px #00ffc3;

animation:progress 3s ease-in-out infinite alternate;

}

@keyframes progress{

from{

width:78%;

}

to{

width:92%;

}

}

/* STATUS */

.status-icons{

display:flex;

gap: 5px;

margin-top:40px;

margin-left:-50px;
}

.status{

display:flex;

align-items:center;

gap:10px;

padding:4px 4px;

border-radius:10px;

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

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

color:#c9d2df;

font-size:15px;

transition:.4s;

}

.status:hover{

transform:translateY(-4px);

border-color:#00ffc3;

box-shadow:0 0 20px rgba(0,255,195,.25);

}

.status span{

width:10px;

height:10px;

border-radius:50%;

background:#00ff88;

box-shadow:0 0 15px #00ff88;

animation:pulse 2s infinite;

}

@keyframes pulse{

50%{

opacity:.35;

transform:scale(.6);

}

}
.final-card{

position:relative;

width:100%;

min-height:100vh;

padding:100px 60px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

overflow:hidden;

border-radius:0;

background:linear-gradient(180deg,#0c1625,#09111d);

box-sizing:border-box;

}
.dns-card.final-card{

max-width:none !important;

width:100% !important;

flex:1 1 100% !important;

margin:0 !important;

border-radius:0;

}
/*==========================

FINAL SECTION

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

.network-card{

position:relative;

overflow:hidden;

padding:65px 40px;

text-align:center;

min-height:520px;

}

/*=========================
        STATUS
=========================*/

.network-status{

position:absolute;

top:30px;

left:30px;

display:flex;

align-items:center;

gap:10px;

padding:8px 18px;

border-radius:30px;

background:rgba(255,140,0,.08);

border:1px solid rgba(255,140,0,.15);

color:#ff9d2e;

font-size:14px;

font-weight:600;

backdrop-filter:blur(12px);

z-index:5;

}

.network-status span{

width:9px;

height:9px;

border-radius:50%;

background:#ff8c00;

box-shadow:
0 0 15px #ff8c00;

animation:pulse 2s infinite;

}

/*=========================
        NETWORK
=========================*/

.network{

position:relative;

width:260px;

height:260px;

margin:50px auto;

display:flex;

justify-content:center;

align-items:center;

}

/*=========================
          GLOW
=========================*/

.network-glow{

position:absolute;

width:260px;

height:260px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(255,140,0,.22),

transparent 70%);

filter:blur(55px);

animation:glow 5s ease-in-out infinite;

}

/*=========================
          CORE
=========================*/

.center{

position:relative;

width:90px;

height:90px;

display:flex;

justify-content:center;

align-items:center;

z-index:3;

}

.core{

position:absolute;

width:52px;

height:52px;

border-radius:50%;

background:#ff8c00;

display:flex;

justify-content:center;

align-items:center;

box-shadow:

0 0 20px #ff8c00,

0 0 45px rgba(255,140,0,.5);

}

.core-dot{

width:12px;

height:12px;

border-radius:50%;

background:#fff;

}

/*=========================
       PULSE RINGS
=========================*/

.pulse{

position:absolute;

border-radius:50%;

border:2px solid rgba(255,140,0,.25);

}

.pulse1{

width:90px;

height:90px;

animation:ring 2.8s infinite;

}

.pulse2{

width:140px;

height:140px;

animation:ring 2.8s infinite .9s;

}

/*=========================
         LINES
=========================*/

.line{

position:absolute;

left:50%;

top:50%;

width:2px;

height:95px;

margin-left:-1px;

margin-top:-95px;

background:

linear-gradient(

transparent,

#ff8c00);

transform-origin:bottom center;

opacity:.65;

}

.line1{

transform:rotate(45deg);

}

.line2{

transform:rotate(135deg);

}

.line3{

transform:rotate(225deg);

}

.line4{

transform:rotate(315deg);

}

/*=========================
          NODES
=========================*/

.node{

position:absolute;

width:14px;

height:14px;

border-radius:50%;

background:#ffffff;

box-shadow:

0 0 15px #ffffff;

animation:pulse 2s infinite;

z-index:5;

}

.n1{

top:20px;

left:123px;

}

.n2{

top:55px;

right:38px;

}

.n3{

right:18px;

top:123px;

}

.n4{

bottom:55px;

right:38px;

}

.n5{

bottom:20px;

left:123px;

}

.n6{

bottom:55px;

left:38px;

}

.n7{

left:18px;

top:123px;

}

.n8{

top:55px;

left:38px;

}

/*=========================
          TEXT
=========================*/

.network-card h2{

font-size:34px;

color:#fff;

margin-bottom:18px;

}

.network-card p{

max-width:500px;

margin:auto;

font-size:16px;

line-height:2;

color:#9eb0c6;

}

/*=========================
        ANIMATION
=========================*/

@keyframes pulse{

50%{

transform:scale(1.35);

opacity:.45;

}

}

@keyframes glow{

50%{

transform:scale(1.12);

opacity:.35;

}

}

@keyframes ring{

0%{

transform:scale(.6);

opacity:1;

}

100%{

transform:scale(1.6);

opacity:0;

}

}
/*=========================
        AI CARD
=========================*/

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

/*=====================================
            TRAFFIC CARD
=====================================*/
/*======================
SERVER CARD
=======================*/

.server-card{

position:relative;

padding:40px;

text-align:center;

overflow:hidden;

}

/* Badge */

.server-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:8px 18px;

border-radius:30px;

background:rgba(255,140,0,.08);

border:1px solid rgba(255,140,0,.15);

color:#ff9b2f;

font-size:13px;

margin-bottom:35px;

}

.server-badge span{

width:8px;

height:8px;

border-radius:50%;

background:#ff8c00;

box-shadow:0 0 12px #ff8c00;

animation:blink 2s infinite;

}

/* Servers */

.servers{

width:240px;

margin:0 auto 40px;

display:flex;

flex-direction:column;

gap:18px;

}

.server{

height:48px;

border-radius:14px;

background:#111c2c;

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

display:flex;

align-items:center;

padding:0 18px;

box-shadow:

0 8px 20px rgba(0,0,0,.25);

transition:.35s;

}

.server:hover{

transform:translateX(6px);

border-color:rgba(255,140,0,.35);

}

/* LEDs */

.led{

width:10px;

height:10px;

border-radius:50%;

background:#415066;

margin-right:12px;

}

.online{

background:#ff8c00;

box-shadow:0 0 12px #ff8c00;

animation:blink 2s infinite;

}

/* Stats */

.server-stats{

display:flex;

justify-content:space-between;

gap:12px;

margin-bottom:35px;

}

.stat{

flex:1;

padding:18px 10px;

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

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

border-radius:14px;

}

.stat h3{

margin:0;

font-size:26px;

color:#ff8c00;

}

.stat span{

font-size:13px;

color:#98abc0;

}

/* Text */

.server-card h2{

margin-bottom:15px;

font-size:30px;

color:#fff;

}

.server-card p{

color:#9fb0c4;

line-height:1.9;

font-size:15px;

}

/* Animation */

@keyframes blink{

50%{

opacity:.45;

transform:scale(1.3);

}

}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'ELHAM';
	font-display: auto;
	src: url('http://azar-web.ir/wp-content/uploads/2026/05/Far.Elham_.ttf') format('truetype');
}
/* End Custom Fonts CSS */