:root{

--bg:#0a0f1c;
--bg-secondary:#111827;

--card:rgba(17,24,39,.65);

--border:rgba(255,255,255,.08);

--text:#f5f7fa;
--text-light:#9aa4b2;

--primary:#4f7cff;
--primary-light:#7ea1ff;

--radius:28px;

--shadow:
0 20px 40px rgba(0,0,0,.35);

}

/* ==========================
SCROLLBAR
========================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#09111f;

}

::-webkit-scrollbar-thumb{

background:#2b4fff;

border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

background:#4970ff;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
text-decoration: none;
}

button, input {
	border: 0;outline: 0;
	font-family: Vazirmatn;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'Vazirmatn',sans-serif;

background:var(--bg);

color:var(--text);

overflow-x:hidden;

line-height:1.9;

}

a:focus-visible,
button:focus-visible{

outline:2px solid #4f7cff;
outline-offset:3px;

}

.ltr {
	direction: ltr;
}

/* print style */
@media print{

.topbar,
.footer,
.back-top,
.theme-toggle{

display:none !important;

}

html {
	scroll-behavior: smooth;
}


body{

background:white;

color:black;

}

}

/* reducing motions */
@media
(prefers-reduced-motion: reduce){

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}


/* accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{

outline:none;

box-shadow:
0 0 0 3px rgba(79,124,255,.3),
0 0 0 6px rgba(79,124,255,.15);

}


/* content visibility */
/*.portfolio-grid,
.blog-grid,
.project-gallery{

content-visibility:auto;

contain-intrinsic-size:
1000px;

}*/


.container{

width:min(
100%,
1320px
);

margin:auto;

}

/* =====================
BACKGROUND EFFECTS
===================== */

.bg-blur{

position:fixed;

border-radius:50%;

filter:blur(120px);

z-index:-1;

}

.blur-1{

width:500px;
height:500px;

background:#245dff;

top:-150px;
right:-100px;

opacity:.25;

}

.blur-2{

width:400px;
height:400px;

background:#00b8ff;

left:-100px;
bottom:-100px;

opacity:.18;

}
