:root /* light */
{
	--bg-main: #F6F6F6;
	--bg-side: #FFFFFF;
	--bg-content: #F3F3F3;
	--bg-form: #ffffff;
	--bg-scroll: rgba(0,0,0,0.2);
	--bg-hover-side: #f3f4f6;
	
	--border-side: #E2E2E2;
	--border-form: #E2E2E2;
	
	--color-side: #1F1F1F;
	--color-content: #1F1F1F;
	--color-form: #1F1F1F;
	
	--bar-height: 50px;
	
	--icon-normal: #6A6A6A;
	--icon-available: #1F1F1F;
	--icon-unavailable: #B5B5B5;
	
	--btn-submit-bg: #2563EB;        /* آبی مدرن */
	--btn-submit-bg-hover: #1D4ED8;
	--btn-submit-bg-active: #1E40AF;

	--btn-submit-color: #FFFFFF;
	--btn-submit-border: #2563EB;
}

body.dark /* dark */
{
	--bg-main: #121212;
	--bg-side: #181818;
	--bg-content: #141414;
	--bg-form: #1E1E1E;
	--bg-scroll: rgba(255,255,255,0.2);
	/* --bg-hover-side: #2E2E2E; */
	--bg-hover-side: #535353;
	
	--border-side: #535353;
	--border-form: #535353;
	
	--color-side: #EDEDED;
	--color-content: #EDEDED;
	--color-form: #EDEDED;
	
	--icon-normal: #B5B5B5;
	--icon-available: #FFFFFF;
	--icon-unavailable: #6A6A6A;
	
	--btn-submit-bg: #3B82F6;        /* کمی روشن‌تر برای دارک */
	--btn-submit-bg-hover: #2563EB;
	--btn-submit-bg-active: #1D4ED8;

	--btn-submit-color: #FFFFFF;
	--btn-submit-border: #3B82F6;
}

@font-face
{
	font-family: 'Vazir';
	src: url('../fonts/vazir/Vazir.woff2') format('woff2'),
		 url('../fonts/vazir/Vazir.woff') format('woff'),
		 url('../fonts/vazir/Vazir.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Vazir';
}

html, body
{
	/* height: 100%; */
	/* overflow: hidden; */
	
	    height: auto;      /* یا 100% در صورت نیاز */
    overflow: auto;    /* اجازه اسکرول بده */
}

.disNone
{
	display: none;
}

.noSelect
{
	-webkit-user-select: none; /* Chrome, Safari */
	-moz-user-select: none;    /* Firefox */
	-ms-user-select: none;     /* Edge قدیمی */
	user-select: none;         /* استاندارد */
}

a {
    text-decoration: none;   /* حذف خط زیر */
    color: inherit;           /* رنگ متن از عنصر والد بگیرد */
    transition: none;         /* جلوگیری از هر نوع انیمیشن رنگ */
}

a:hover,
a:focus,
a:active {
    color: inherit;           /* تغییر رنگ هنگام hover، focus یا کلیک ندهد */
    text-decoration: none;    /* خط زیر اضافه نشود */
}

/* header */

header
{
	background: #ffffff;
	width: 100%;
	/* box-shadow: 0 2px 6px rgba(0,0,0,0.1); */
	display: flex;
	justify-content: center;
}

.header-container
{
	width: 100%;
	max-width: 1200px;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
}

.left-section
{
	display: flex;
	align-items: center;
}

.iconcall
{
	font-size: 20px;
	/* font-weight: bold; */
	color: #6e6e6e;
	margin-right: 10px;
}

.valuecall
{
	font-size: 20px;
	/* font-weight: bold; */
	color: #6e6e6e;
}

.right-section
{
	display: flex;
	align-items: center;
}

.site-name
{
	margin-right: 15px;
	font-size: 25px;
	font-weight: bold;
	color: #6e6e6e;
}

.logo
{
	width: 50px;
	height: 50px;
	object-fit: contain;
}

/* ریسپانسیو */
/* @media (max-width: 768px) */
/* { */
	/* .header-container */
	/* { */
		/* flex-direction: column; */
		/* height: auto; */
		/* padding: 10px; */
	/* } */

	/* .left-section */
	/* { */
		
	/* } */

	/* .right-section */
	/* { */
		/* margin-bottom: 5px; */
		/* flex-direction: row-reverse; */
	/* } */
/* } */

/* menu */

nav
{
	background: #ffffff;
	width: 100%;
	/* box-shadow: 0 4px 3px rgba(44,108,175,0.1); */
	display: flex;
	justify-content: center;
	border-top: 1px solid rgba(0,0,0,0.1);
}

.nav-container
{
	width: 100%;
	max-width: 1200px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
}

/* بخش سمت راست: منوها */
.menu
{
	display: flex;
	gap: 40px;
}

.menu a
{
	text-decoration: none;
	color: #6e6e6e;
	/* font-weight: bold; */
	position: relative;
	padding: 5px 0;
	transition: color 0.3s;
	font-size: 17px;
}

.menu a::after
{
	content: '';
	position: absolute;
	bottom: 0;
	/* right: 0; */
	left: 50%;
	width: 0%;
	height: 2px;
	background: #2c6caf;
	transition: width 0.5s;
	transform: translateX(-50%);
}

.menu a:hover
{
	color: #2c6caf;
}

.menu a:hover::after
{
	width: 100%;
}

/* بخش سمت چپ: ورود/ثبت‌نام و جستجو */
.user-actions
{
	display: flex;
	align-items: center;
	gap: 15px;
}

.login-btn
{
	display: flex;
	align-items: center;
	gap: 5px;
	cursor: pointer;
	color: #6e6e6e;
	/* font-weight: bold; */
	transition: color 0.3s;
}

.login-btn:hover
{
	color: #2c6caf;
}

.login-btn .iconLogin
{
	margin-right: 5px;
}

.searchIcon
{
	margin-left: 10px;
}

.searchIcon .search-icon
{
	cursor: pointer;
	font-size: 18px;
	color: #6e6e6e;
	transition: color 0.3s;
}

.searchIcon .search-icon:hover
{
	color: #2c6caf;
}

.menu .sidebar-mobile
{
	background: var(--bg-side);
	display: none;
	grid-template-columns: repeat(5, 1fr);
	height: 100%;
}

@media (max-width: 768px)
{
	.menu
	{
		width: 100%;
		height: var(--bar-height);

		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
		z-index: 1000;
		border-inline-end: 0px;
		border-top: 1px solid var(--border-side);
	}
	
	.nav-container
	{
		display: none;
	}
	
	.sidebar-mobile
	{
		display: grid;
	}
	
	.sidebar-mobile .nav-btn
	{
		color: red;
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.sidebar-mobile .nav-btn-center
	{
		/* font-size: 20px; */
	}
}

 /* والد کارت ها */
.services
{
    max-width: 1500px;
    margin: 50px auto;
    display: flex;
    flex-wrap: wrap;      /* اجازه می‌دهد کارت‌ها به ردیف بعدی بروند */
    justify-content: center; /* کارت‌های ردیف آخر وسط‌چین شوند */
    gap: 50px;
    padding: 0 20px;
}

.service-card
{
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    flex: 1 1 300px; /* حداقل عرض 250px، انعطاف‌پذیر */
    max-width: 300px; /* حداکثر عرض کارت */
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.service-card:hover
{
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.service-icon
{
    font-size: 40px;
    margin-bottom: 15px;
    color: #2c6caf;
}

.service-title
{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.service-text
{
    font-size: 15px;
    color: #555;
    line-height: 2;
	text-align: justify;
}


/* ریسپانسیو موبایل */
/* @media (max-width: 768px) */
/* { */
    /* .service-card */
	/* { */
        /* flex: 1 1 45%; /* تقریبا دو کارت در ردیف */ */
        /* max-width: 45%; */
    /* } */
/* } */

/* @media (max-width: 480px) */
/* { */
    /* .service-card */
	/* { */
        /* flex: 1 1 100%; /* یک کارت در ردیف */ */
        /* max-width: 100%; */
    /* } */
}