:root {


/* =====================
   Brand Colors
===================== */


--sky-primary:#0066ff;

--sky-secondary:#00b7ff;

--sky-light:#29d8ff;


--sky-dark:#020817;

--sky-dark-soft:#071426;



/* =====================
   Background
===================== */


--bg-main:#020817;

--bg-section:#050f20;

--bg-card:
rgba(8,22,42,.85);



/* =====================
   Text Colors
===================== */


--text-primary:#ffffff;

--text-secondary:#c5d0e0;

--text-muted:#8c9bb2;



/* =====================
   Border
===================== */


--border-color:
rgba(0,183,255,.25);



/* =====================
   Shadow
===================== */


--shadow-blue:

0 0 25px
rgba(0,102,255,.35);



--shadow-card:

0 10px 40px
rgba(0,0,0,.35);




/* =====================
   Container
===================== */


--container:

1200px;



/* =====================
   Radius
===================== */


--radius-small:

8px;


--radius-medium:

16px;


--radius-large:

24px;



/* =====================
   Typography
===================== */


--font-family:

"Estedad",
Tahoma,
Arial,
sans-serif;



--font-xs:

12px;


--font-sm:

14px;


--font-md:

16px;


--font-lg:

18px;


--font-xl:

22px;


--font-2xl:

28px;


--font-3xl:

40px;


--font-4xl:

52px;



/* =====================
   Font Weight
===================== */


--weight-light:

300;


--weight-normal:

400;


--weight-medium:

500;


--weight-bold:

700;


--weight-extra:

800;



/* =====================
   Animation
===================== */


--transition:

all .3s ease;



}
2) فایل global.css
مسیر:
assets/css/global.css
کد:
html{

scroll-behavior:smooth;

}



body{


margin:0;


padding:0;


direction:rtl;


font-family:
var(--font-family);


background:

var(--bg-main);


color:

var(--text-primary);


}



*{

box-sizing:border-box;

}



img{

max-width:100%;

height:auto;

}



.container{


width:

min(
100%,
var(--container)
);


margin:auto;


padding-inline:

20px;


}



section{


position:relative;


padding:

80px 0;


}




a{


color:inherit;


text-decoration:none;


}



ul{


list-style:none;


padding:0;

margin:0;


}
