#tech-bg{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-1;
    pointer-events:none;
}


/* =========================
   SECTIONS BACKGROUND & TEXT COLORS
========================= */


.service-image img {
    width: 100%;
    max-width: 420px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.07),
    0 0 22px rgba(45, 108, 223, 0.18);
    transition: transform .25s ease, box-shadow .25s ease;
}

.service-image img:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.10),
    0 0 28px rgba(45, 108, 223, 0.22);
}


/* =========================
   CARDS STYLE (UI-CARD)
========================= */

.ui-card {
    background: #ffffff;
    border: 1px solid #d4dbef;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(50, 70, 120, 0.05);
    padding: 24px;
    transition: all 0.3s ease;
    color: #333f4a;
    will-change: transform, box-shadow, border-color;
}

.ui-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 32px rgba(50, 70, 120, 0.15);
    border-color: #2d6cdf;
}

/* Optionally make titles a bit more prominent on hover */
.ui-card:hover h2,
.ui-card:hover h3 {
    color: #2d6cdf;
    font-weight: 700;
    transition: color 0.3s ease;
}

/* =========================
   FONTS
========================= */

@font-face {
    font-family: 'Peyda';
    src: url('../fonts/peyda/PeydaWebFaNum-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

public

@font-face {
    font-family: 'Peyda';
    src: url('../fonts/peyda/PeydaWebFaNum-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Peyda';
    src: url('../fonts/peyda/PeydaWebFaNum-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Peyda';
    src: url('../fonts/peyda/PeydaWebFaNum-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IRANYekan';
    src: url('../fonts/iranyekan/iranyekanwebregular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IRANYekan';
    src: url('../fonts/iranyekan/iranyekanwebmedium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IRANYekan';
    src: url('../fonts/iranyekan/iranyekanwebbold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'IRANYekan';
    src: url('../fonts/iranyekan/iranyekanwebblack.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

html, body {
    font-family: 'IRANYekan', sans-serif !important;
}

h1, h2, h3, .font-brand {
    font-family: 'Peyda', sans-serif !important;
}

/* =========================
   SCROLLBAR (Glass Neon)
========================= */

::-webkit-scrollbar {
    width: 10px;
    background: transparent;
}

::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px 0;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0);
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    transition: all 0.4s ease;
    opacity: 0;
}

.scrolling::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.75);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.7);
    opacity: 1;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 160, 255, 0.95);
    box-shadow: 0 0 18px rgba(99, 160, 255, 0.9);
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(59, 130, 246, 0.6) transparent;
}


.scroll-up-btn {
    position: fixed;
    bottom: 24px;
    left: 24px; /* برای RTL، اگر راست خواستی بکنش right:24px; */
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #111;
    color: #fff;
    font-size: 22px;
    border: none;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease, transform .3s ease, background-color .2s ease;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scroll-up-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-up-btn:hover {
    transform: translateY(-4px);
    background: rgba(99, 160, 255, 0.95);
}




/* ============================= */
/* Global Layout Fix */
/* ============================= */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

@media (max-width: 768px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }
}