/* ================================= */
/* RESET */
/* ================================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
-webkit-tap-highlight-color:transparent;
}

html{
scroll-behavior:smooth;
}

img{
user-select:none;
-webkit-user-drag:none;
pointer-events:auto;
}

:root{

/* COLORS */

--primary:#f9EA59;
--secondary:#2148a1;

/* NAVY BACKGROUND */

--bg:#020b1a;

/* GLASS */

--glass:rgba(255,255,255,.06);
--border:rgba(255,255,255,.12);

--shadow:
0 0 40px rgba(0,212,255,.25);

/* ================================= */
/* FONT SYSTEM */
/* ================================= */

/*
مسیر فایل فونت ها:

fonts/
│
├── MyFont1F.woff2
├── MyFont2F.woff2
├── MyFont1E.woff2
└── MyFont2E.woff2
*/

--font-fa-1:"IranSans";
--font-fa-2:"Vazir";

--font-en-1:"Roboto";
--font-en-2:"Poppins";

/* ================================= */
/* FONT SIZE CONTROL
تمام اندازه ها از اینجا
قابل تنظیم هستند
================================= */

--hero-tag-size:3rem;

--hero-title-size-mobile:5.8rem;
--hero-title-size-tablet:4rem;
--hero-title-size-desktop:5.8rem;

--hero-subtitle-size-mobile:1.15rem;
--hero-subtitle-size-desktop:1.9rem;

--section-title-size:3.2rem;

--service-title-size:2rem;
--service-text-size:3rem;

--project-title-size:1.4rem;
--project-text-size:.95rem;

--timeline-size:1.1rem;

--contact-button-size:1rem;

/* ================================= */
/* FONT COLOR CONTROL
همه رنگ ها از اینجا
قابل تغییر هستند
================================= */

--hero-title-color:#ffffff;
--hero-subtitle-color:#d5d8e3;
--hero-tag-color:#f9EA59;

--section-title-color:#ffffff;
--section-text-color:#b8bfd3;

--service-title-color:#ffffff;
--service-text-color:#c8cedf;

--project-title-color:#ffffff;
--project-text-color:#d7dbea;

--timeline-title-color:#ffffff;

--contact-color:#ffffff;

}

body{

background:var(--bg);

color:#ffffff;

font-family:
var(--font-fa-1),
sans-serif;

overflow-x:hidden;

line-height:1.8;

transition:
font-family .3s ease,
background .3s ease;

}

/* ================================= */
/* FONT FILES */
/* ================================= */

@font-face{
font-family:"IranSans";
src:url("fonts/MyFont1F.woff2") format("woff2");
font-display:swap;
}

@font-face{
font-family:"Vazir";
src:url("fonts/MyFont2F.woff2") format("woff2");
font-display:swap;
}

@font-face{
font-family:"Roboto";
src:url("fonts/MyFont1E.woff2") format("woff2");
font-display:swap;
}

@font-face{
font-family:"Poppins";
src:url("fonts/MyFont2E.woff2") format("woff2");
font-display:swap;
}

/* ================================= */
/* SCROLLBAR */
/* ================================= */

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

::-webkit-scrollbar-track{
background:var(--bg);
}

::-webkit-scrollbar-thumb{
background:var(--primary);
border-radius:20px;
}

/* ================================= */
/* CURSOR LIGHT */
/* ================================= */

.cursor-light{

position:fixed;

width:250px;
height:250px;

border-radius:50%;

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

pointer-events:none;

z-index:2;

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

}

/* ================================= */
/* HEADER */
/* ================================= */

.header{

position:fixed;

top:0;
right:0;

width:100%;

display:flex;

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

padding:12px 25px;

background:
rgba(2,11,26,.78);

backdrop-filter:
blur(10px);

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

z-index:1000;

}

/* لوگوی بزرگ تر */

.logo img{

height:90px;
width:auto;

display:block;

}

.nav{

display:none;

gap:18px;

}

.nav a{

color:white;

text-decoration:none;

transition:.3s;

font-size:1rem;

}

.nav a:hover{

color:var(--primary);

}

.call-btn{

padding:12px 22px;

border-radius:50px;

text-decoration:none;

color:white;

background:
linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

}

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

.mobile-menu-btn{

display:flex;

flex-direction:column;

gap:5px;

cursor:pointer;

}

.mobile-menu-btn span{

width:24px;
height:2px;

background:white;

}

/* ================================= */
/* FONT PANEL
مخفی
================================= */

.font-panel{

display:none;

}

/* ================================= */
/* HERO */
/* ================================= */

.hero{

min-height:70vh;

display:flex;

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

padding:140px 20px;

position:relative;

overflow:hidden;

}

#heroCanvas{

position:absolute;

width:100%;
height:100%;

top:0;
left:0;

}

.hero-content{

position:relative;

z-index:5;

text-align:center;

max-width:1100px;

}

.hero-tag{

font-size:
var(--hero-tag-size);

color:
var(--hero-tag-color);

margin-bottom:15px;

}

.hero h1{

font-size:
var(--hero-title-size-mobile);

font-weight:900;

line-height:1.25;

margin-bottom:20px;

color:
var(--hero-title-color);

}

.hero h2{

font-size:
var(--hero-subtitle-size-mobile);

font-weight:400;

color:
var(--hero-subtitle-color);

margin-bottom:35px;

}

.hero-buttons{

display:flex;

flex-direction:column;

gap:20px;

}

.primary-btn,
.secondary-btn{

padding:15px 40px;

border-radius:50px;

text-decoration:none;

font-weight:700;

transition:.35s;

}

.primary-btn{

background:
linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

color:white;

}

.secondary-btn{

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

background:
var(--glass);

color:white;

backdrop-filter:
blur(15px);

}
/* ================================= */
/* SECTION TITLE */
/* ================================= */

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title h2{

font-size:
var(--section-title-size);

color:
var(--section-title-color);

margin-bottom:10px;

}

.section-title p{

color:
var(--section-text-color);

opacity:.9;

}

/* ================================= */
/* SERVICES */
/* ================================= */

.services{

padding:120px 20px;

}

.services-grid{

display:grid;

grid-template-columns:1fr;

gap:20px;

}

.service-card{

background:
var(--glass);

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

backdrop-filter:
blur(15px);

padding:30px;

border-radius:24px;

transition:.4s;

}

.service-card:hover{

transform:
translateY(-8px);

box-shadow:
var(--shadow);

}

.service-card h3{

font-size:
var(--service-title-size);

color:
var(--service-title-color);

margin-bottom:10px;

}

.service-card p{

font-size:
var(--service-text-size);

color:
var(--service-text-color);

}

.icon{

width:60px;
height:60px;

border-radius:50%;

margin-bottom:20px;

background:
linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

}

/* ================================= */
/* COVERAGE */
/* ================================= */

.coverage{

padding:100px 20px;

}

/*
باکس حذف شده
نقشه مستقیم نمایش داده می‌شود
*/

.map-container{

width:100%;

max-width:1100px;

margin:auto;

padding:0;

background:none;

border:none;

box-shadow:none;

}

/*
ارتفاع تقریباً نصف حالت قبلی
*/

.map-container object{

width:100%;

height:260px;

display:block;

}

/* ================================= */
/* PROJECTS */
/* ================================= */

.projects{

padding:120px 20px;

}

.project-grid{

display:grid;

grid-template-columns:1fr;

gap:15px;

}

.project-card{

overflow:hidden;

border-radius:20px;

position:relative;

cursor:pointer;

background:#000;

}

/*
محافظت پایه‌ای
(جلوگیری کامل ممکن نیست)
*/

.project-card img{

width:100%;

display:block;

transition:.6s;

pointer-events:none;

user-select:none;

-webkit-user-drag:none;

}

.project-card:hover img{

transform:scale(1.08);

}

.project-info{

position:absolute;

bottom:0;
right:0;

width:100%;

padding:20px;

background:
linear-gradient(
transparent,
rgba(0,0,0,.55)
);

}

.project-info h3{

font-size:
var(--project-title-size);

color:
var(--project-title-color);

}

.project-info p{

font-size:
var(--project-text-size);

color:
var(--project-text-color);

}

/* ================================= */
/* PROCESS */
/* ================================= */

.process{

padding:120px 20px;

}

.timeline{

display:grid;

gap:25px;

}

.step{

background:
var(--glass);

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

padding:25px;

border-radius:20px;

text-align:center;

transition:
all .4s ease;

}

.step span{

display:inline-flex;

width:45px;
height:45px;

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

border-radius:50%;

background:
var(--primary);

color:black;

font-weight:700;

margin-bottom:10px;

}

/*
هایلایت داینامیک
app.js فعالش می‌کند
*/

.step.active-step{

background:
rgba(249,234,89,.12);

border-color:
var(--primary);

box-shadow:
0 0 25px rgba(249,234,89,.35);

transform:
translateY(-8px);

}

.step.active-step span{

transform:scale(1.12);

}

/* ================================= */
/* CONTACT */
/* ================================= */

.contact{

padding:120px 20px;

}

.contact-buttons{

display:grid;

gap:15px;

}

.contact-buttons a{

display:flex;

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

padding:18px;

text-decoration:none;

font-size:
var(--contact-button-size);

color:
var(--contact-color);

border-radius:18px;

background:
linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

transition:.35s;

}

.contact-buttons a:hover{

transform:
translateY(-5px);

}

/* ================================= */
/* FLOATING CALL */
/* ================================= */

.floating-call{

position:fixed;

bottom:20px;
left:20px;

width:65px;
height:65px;

display:flex;

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

font-size:26px;

text-decoration:none;

color:white;

border-radius:50%;

background:
linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

box-shadow:
var(--shadow);

z-index:999;

}

/* ================================= */
/* FOOTER */
/* ================================= */

footer{

padding:40px 20px;

text-align:center;

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

}
/* ================================= */
/* REVEAL ANIMATION */
/* ================================= */

.hidden{

opacity:0;

transform:
translateY(60px);

transition:
all .8s ease;

}

.show{

opacity:1;

transform:
translateY(0);

}

/* ================================= */
/* TABLET */
/* ================================= */

@media(min-width:768px){

.hero h1{

font-size:
var(--hero-title-size-tablet);

}

.hero h2{

font-size:1.4rem;

}

.hero-buttons{

flex-direction:row;

justify-content:center;

}

.services-grid{

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

}

/*
4 ستون در تبلت
*/

.project-grid{

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

}

.timeline{

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

}

.contact-buttons{

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

}

.map-container object{

height:320px;

}

}

/* ================================= */
/* DESKTOP */
/* ================================= */

@media(min-width:1200px){

.nav{

display:flex;

}

.mobile-menu-btn{

display:none;

}

.hero h1{

font-size:
var(--hero-title-size-desktop);

}

.hero h2{

font-size:
var(--hero-subtitle-size-desktop);

}

/* ================================= */
/* SERVICES */
/* ================================= */

.services-grid{

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

}

/* ================================= */
/* PROJECTS
5 ستون × 2 ردیف
10 تصویر
================================= */

.project-grid{

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

gap:18px;

}

/* ================================= */
/* CONTACT */
/* ================================= */

.contact-buttons{

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

}

/* ================================= */
/* MAP */
/* ================================= */

.map-container object{

height:360px;

}

}

/* ================================= */
/* LARGE DESKTOP */
/* ================================= */

@media(min-width:1600px){

.hero{

max-width:1800px;

margin:auto;

}

.project-grid{

gap:20px;

}

.map-container{

max-width:1400px;

}

.map-container object{

height:420px;

}

}

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

@media(max-width:1199px){

.nav{

position:fixed;

top:90px;
right:-100%;

width:280px;

height:
calc(100vh - 90px);

display:flex;

flex-direction:column;

padding:30px;

background:
var(--bg);

transition:.4s;

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

}

.nav.mobile-open{

right:0;

}

}

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

@media(max-width:767px){

.hero{

padding:120px 20px 80px;

}

.hero h1{

font-size:
var(--hero-title-size-mobile);

}

.hero h2{

font-size:
var(--hero-subtitle-size-mobile);

}

.services{

padding:80px 15px;

}

.projects{

padding:80px 15px;

}

.process{

padding:80px 15px;

}

.contact{

padding:80px 15px;

}

/*
در موبایل
همه تصاویر زیر هم
*/

.project-grid{

grid-template-columns:1fr;

gap:20px;

}

.project-card{

width:100%;

}

.project-card img{

width:100%;

height:auto;

display:block;

}

.map-container object{

height:220px;

}

.logo img{

height:75px;

}

}

/* ================================= */
/* EXTRA IMAGE PROTECTION
(جلوگیری کامل ممکن نیست)
================================= */

img{

-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;

-webkit-user-drag:none;

}

.project-card img{

pointer-events:none;

}

/* ================================= */
/* PERFORMANCE */
/* ================================= */

.project-card,
.service-card,
.step,
.contact-buttons a{

will-change:
transform;

}

/* ================================= */
/* SMOOTH TRANSITIONS */
/* ================================= */

a,
button,
.step,
.service-card,
.project-card{

transition:
all .35s ease;

}
/* ================================= */
/* SEO CONTENT */
/* ================================= */

.seo-content{

padding:80px 20px;

max-width:1200px;

margin:auto;

text-align:right;

direction:rtl;

}

.seo-content p{

font-size:1.15rem;

line-height:2.2;

color:#d7dbea;

margin-bottom:20px;

}

/* ================================= */
/* FAQ */
/* ================================= */

.faq{

padding:100px 20px;

max-width:1200px;

margin:auto;

direction:rtl;

}

.faq h3{

font-size:1.6rem;

margin-top:35px;

margin-bottom:15px;

color:#ffffff;

}

.faq p{

font-size:1.05rem;

line-height:2.1;

color:#d7dbea;

margin-bottom:15px;

}

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

.coverage-text{

max-width:1100px;

margin:50px auto 0;

direction:rtl;

text-align:right;

}

.coverage-text h2{

font-size:2rem;

margin-bottom:20px;

color:#ffffff;

}

.coverage-text p{

font-size:1.1rem;

line-height:2.1;

color:#d7dbea;

margin-bottom:15px;

}

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

@media(max-width:767px){

.seo-content p{

font-size:1rem;

line-height:2;

}

.faq h3{

font-size:1.25rem;

}

.coverage-text h2{

font-size:1.5rem;

}

}