* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

@font-face {
font-family: 'Pinar';
src: url('/uploads/Docs/fonts/Pinar.woff2') format('woff2');

font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "niafam";
src: url("/uploads/Docs/fonts/niafam.woff");
font-weight: normal;
font-style: normal;
font-display: block;
}
body {
font-family: 'Pinar', sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: var(--bg-color);
}



/* Sidebar Styles */
.sidebar {
width: 280px;
background-color: var(--bg-color);
border-left: 1px solid var(--border-color);
height: calc(100vh - 64px);
overflow-y: auto;
padding: 1rem;
background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
right: 0;
top: 64px;
z-index: 2000;
transition: transform 0.3s cubic-bezier(.4,0,.2,1);
}

.top-header {
z-index: 2100;
position: fixed;
right: 0;
left: 0;
top: 0;
}
.text__bold{
font-weight: bold!important;
}
/* Flickity custom styles */


[data-theme="dark"] .quick-links h2,
[data-theme="dark"] .cards .card h3,
[data-theme="dark"] .cards .card p {
color: var(--primary-color);
}
[data-theme="dark"] .cards .card {
background: var(--card-bg);
border-color: var(--border-color);
color: var(--text-color);
box-shadow: 0 2px 12px rgba(30,41,59,0.12);
}
[data-theme="dark"] .cards .card:hover {
background: #232f3e;
box-shadow: 0 4px 16px rgba(30,41,59,0.18);
}
[data-theme="dark"] .card::before {
background: linear-gradient(90deg, var(--accent-color), #38bdf8);
}

[data-theme="dark"] .top-nav,
[data-theme="dark"] .top-header {
background: var(--bg-color);
}
[data-theme="dark"] .top-nav-list a,
[data-theme="dark"] .top-nav-dropdown-list a {
color: var(--primary-color);
background: transparent;
}
[data-theme="dark"] .top-nav-list a:hover,
[data-theme="dark"] .top-nav-list a.active,
[data-theme="dark"] .top-nav-dropdown-list a:hover,
[data-theme="dark"] .top-nav-dropdown-list a.active {
color: var(--accent-color);
background: var(--hover-color);
}
[data-theme="dark"] .top-nav-dropdown-list {
background: var(--card-bg);
border: 1px solid var(--border-color);
box-shadow: 0 8px 32px rgba(30,41,59,0.22);
}
[data-theme="dark"] .top-nav-dropdown-list li {
border-bottom: 1px solid #263040;
}
[data-theme="dark"] .top-nav-toggle {
color: var(--primary-color);
background: transparent;
}
[data-theme="dark"] .top-nav-toggle:hover, [data-theme="dark"] .top-nav-toggle:focus {
background: var(--hover-color);
border-color: var(--accent-color);
}
[data-theme="dark"] .top-nav-toggle .quick-access-label {
color: var(--primary-color);
}
[data-theme="dark"] .feature-item{
background-color: #1e293b!important;
}
/* Remove white backgrounds on dropdown and cards in dark mode */
[data-theme="dark"] .top-nav-dropdown-list,
[data-theme="dark"] .cards .card {
background: var(--card-bg);
}

/* Ensure icons and chevrons are visible in dark mode */
[data-theme="dark"] .top-nav-toggle i,
[data-theme="dark"] .top-nav-dropdown-list i {
color: var(--accent-color);
}
[data-theme="light"] .no-results{
color:#06182c;
}
/* Fix focus/active for accessibility in dark mode */
[data-theme="dark"] .top-nav-list a:focus,
[data-theme="dark"] .top-nav-dropdown-list a:focus,
[data-theme="dark"] .cards .card:focus {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
}

/* End dark mode quick links/menu fixes */

/* Quick Links Card Icon Styles */
.cards .card {
display: flex;
align-items: center;
gap: 1.1rem;
position: relative;
padding: 0.9rem 0.9rem;
min-height: 110px;
justify-content: flex-start;
}

.cards .card-icon {
font-size: 2.3rem;
margin: 0;
color: var(--accent-color);
flex-shrink: 0;
transition: color 0.2s, transform 0.2s;
display: flex;
align-items: center;
z-index: 2;
align-self: center;
}



.cards .card:hover .card-icon {
color: var(--primary-color);
transform: scale(1.13) rotate(-8deg);
}
.card-content {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1 1 0%;
min-width: 0;
padding: 0;
margin: 0;
}

.card-content h3 {
margin: 0 0 0.15rem 0;
font-size: 1.09rem;
font-weight: 600;
text-align: right;
line-height: 1.35;
}
.card-content p {
margin: 0;
font-size: 0.97rem;
color: var(--text-color-light);
text-align: right;
line-height: 1.7;
}
.cards .card {
min-width: 0;
}




[data-theme="dark"] .cards .card-icon {
color: var(--accent-color);
}
[data-theme="dark"] .cards .card:hover .card-icon {
color: #fff;
}


/* Remove orange focus/outline/box-shadow from Flickity viewport and all Flickity elements */
.flickity-viewport:focus,
.flickity-viewport:active,
.flickity-enabled:focus,
.flickity-enabled:active,
.flickity-slider:focus,
.flickity-slider:active,
.carousel-cell:focus,
.carousel-cell:active {
outline: none !important;
box-shadow: none !important;
border-color: transparent !important;
}
.flickity-viewport::-moz-focus-inner,
.flickity-enabled::-moz-focus-inner,
.flickity-slider::-moz-focus-inner,
.carousel-cell::-moz-focus-inner {
border: 0 !important;
}


/* Hide Flickity slider numbers (if any) and style page dots */
.flickity-prev-next-button,
.flickity-button,
.flickity-slider-number,
.flickity-nav,
.flickity-page-counter {
display: none !important;
}
.flickity-page-dots {
display: flex !important;
justify-content: center;
padding-top: 0.75rem;
gap: 0.5rem;
list-style: none !important;
marker: none !important;
direction: ltr !important;
}
.flickity-page-dots .dot {
list-style: none !important;
marker: none !important;
direction: ltr !important;
}
.flickity-page-dots .dot {
list-style: none !important;
marker: none !important;
}
.flickity-page-dots .dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #cfd8dc;
opacity: 1;
transition: background 0.2s, transform 0.2s;
margin: 0 2px;
}
.flickity-page-dots .dot.is-selected {
background: var(--accent-color, #007bff);
transform: scale(1.2);
}

/* Prevent horizontal scroll on mobile for Flickity and page */
@media (max-width: 575.98px) {
html, body {
max-width: 100vw;
}
.flickity-carousel,
.flickity-viewport {
overflow-x: hidden !important;
max-width: 100vw;
}
}

/* Flickity carousel cell styles for mobile */
@media (max-width: 575.98px) {
.flickity-carousel {
display: block !important;
min-height: 160px;
height: auto;
overflow-y: hidden !important;
direction: rtl !important;
}
.flickity-viewport {
min-height: 160px;
height: auto;
overflow-y: hidden !important;
direction: rtl !important;
}
.flickity-slider {
direction: rtl !important;
}
.cards {
min-height: 160px;
height: auto;
overflow-y: hidden !important;
direction: rtl !important;
}
#search-input{
max-width: 200px!important;
}
.content-header div{
text-align: center;
}
.content-header p {
text-align:justify;
}
.features{
padding-inline:unset;
}
.content-section{
padding-inline:unset!important;
}
.code-block{
margin:unset!important;
width:unset!important;
max-width:unset!important;
}
.carousel-cell {
width: 80vw;
min-width: 220px;
margin-left: 10px;
margin-right: 10px;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.05);
background: var(--card-bg, #fff);
padding: 1rem;
box-sizing: border-box;
display: block;
}
.cards,
.feature-grid {
display: block !important;
padding: 0;
gap: 0;
}
}

/* Keep grid for desktop */
@media (min-width: 576px) {
.cards {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 2rem;
}
.feature-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.carousel-cell {
width: auto;
margin: 0;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.05);
background: var(--card-bg, #fff);
padding: 1rem;
box-sizing: border-box;
display: block;
}
}
.no-results{
	display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
	padding:10px;
}

@media (max-width: 400px) {
html, body {
overflow-x: hidden;
}
.top-header {
height: 44px;
padding: unset!important;
}
.header-container {
padding: 0;
min-height: unset;
flex-wrap: wrap;
gap: 0.1rem;
}
.logo img {
width: 22px;

}
.logo h1 {
font-size: 0.87rem;
}
.logo span {
font-size: 0.7rem;
}
.top-nav ul {
gap: 0.2rem;
}
.top-nav li, .top-nav a {
font-size: 0.8rem;
padding: 0.1rem 0.2rem;
}
.header-actions {
gap: 0.1rem;
}
.sidebar-toggle, .header-theme-toggle {
font-size: 1rem;
width: 28px;
height: 28px;
padding: 0.1rem;
}
.sidebar-toggle i, .header-theme-toggle i {
font-size: 0.9rem;
}
.sidebar {
width: 92vw;
min-width: 120px;
max-width: 98vw;
top: 44px;
height: calc(100vh - 44px);
}
}

@media (max-width: 575.98px) {
.content-header{
padding: 2rem 2rem!important;
}
.content-header div{
justify-content: center!important;
}
.top-header {
height: 60px;
}
.top-nav-dropdown {
position: relative;
width: 100%;
}
.top-nav-toggle {
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
font-size: 1.2rem;
color: var(--primary-color);
cursor: pointer;
padding: 0.25rem 0.5rem;
z-index: 2102;
}
.top-nav-dropdown-list {
display: none;
flex-direction: column;
position: absolute;
top: 110%;
right: 0.5rem;
left: 0.5rem;
background: var(--card-bg, #fff);
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
border-radius: 18px;
margin: 0;
padding: 0.7rem 0.3rem 0.7rem 0.3rem;
z-index: 2101;
transition: all 0.35s cubic-bezier(.4,0,.2,1);
opacity: 0;
pointer-events: none;
min-width: 180px;
max-width: 92vw;
overflow-y: auto;
max-height: 70vh;
}
.top-nav-dropdown-list.active {
display: flex;
opacity: 1;
pointer-events: auto;
animation: dropdown-fade-in 0.35s;
}
@keyframes dropdown-fade-in {
from { opacity: 0; transform: translateY(-12px); }
to   { opacity: 1; transform: translateY(0); }
}
.top-nav-dropdown-list li {
border-bottom: 1px solid #ececec;
padding: 0.85rem 1.3rem 0.85rem 1rem;
font-size: 0.8rem;
background: transparent;
display: flex;
align-items: center;
transition: background 0.2s;
}
.top-nav-dropdown-list li:last-child {
border-bottom: none;
}
.top-nav-dropdown-list a {
display: flex;
align-items: center;
color: var(--primary-color);
text-decoration: none;
width: 100%;
gap: 0.6rem;
transition: color 0.2s;
}
.top-nav-dropdown-list li:hover, .top-nav-dropdown-list a:hover {
background: var(--hover-color, #f5f5f5);
color: var(--accent-color);
}
.top-nav-dropdown-list i {
font-size: 1.1rem;
margin-left: 0.6rem;
opacity: 0.8;
}
.top-nav-toggle {
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid #e5e5e5;
font-size: 0.8rem;
color: var(--primary-color);
cursor: pointer;
padding: 0.5rem;
z-index: 2102;
border-radius: 11px;
transition: background 0.2s, box-shadow 0.2s;
gap: 0.5rem;
box-shadow: 0 1px 6px rgba(0,0,0,0.04);
font-family: inherit;
}
.top-nav-toggle .quick-access-label {
font-size: 0.8rem;
font-weight: 500;
color: var(--primary-color);
margin-left: 0.35rem;
}
.top-nav-toggle i.fa-chevron-down {
font-size: 1.15rem;
margin-left: 0;
opacity: 0.8;
}
.top-nav-toggle:hover, .top-nav-toggle:focus {
background: var(--hover-color, #f5f5f5);
box-shadow: 0 2px 8px rgba(0,0,0,0.07);
border-color: var(--primary-color);
}
@media (min-width: 576px) {
.top-nav-list {
display: flex !important;
gap: 1.3rem;
align-items: center;
padding: 0;
margin: 0;
list-style: none;
}
.top-nav-list li {
padding: 0.2rem 0.7rem;
}
.top-nav-list a {
color: var(--primary-color);
font-size: 1.08rem;
text-decoration: none;
display: flex;
align-items: center;
gap: 0.35rem;
border-radius: 7px;
transition: background 0.2s, color 0.2s;
}
.top-nav-list a:hover {
background: var(--hover-color, #f5f5f5);
color: var(--accent-color);
}
.top-nav-toggle, .top-nav-dropdown-list {
display: none !important;
}
}

@media (max-width: 575.98px) {
.top-nav-list {
display: none !important;
}
.top-nav-toggle, .top-nav-dropdown-list {
display: block;
}
}



/* مخفی کردن منوی اصلی در موبایل */
.top-nav ul:not(#top-nav-list) {
display: none !important;
}
}


.sidebar {
width: 90vw;
min-width: 180px;
max-width: 95vw;
top: 56px;
height: calc(100vh - 56px);
}
.top-header {
height: 56px;
}
.sidebar-toggle {
display: flex;
}
#sidebar-overlay,
#sidebar-overlay.active {
display: block !important;
}


/* sm: ≥576px */
@media (min-width: 576px) and (max-width: 767.98px) {

.sidebar {
width: 80vw;
min-width: 200px;
max-width: 340px;
top: 56px;
height: calc(100vh - 56px);
}
.top-header {
height: 56px;
}
.sidebar-toggle {
display: flex;
}
#sidebar-overlay,
#sidebar-overlay.active {
display: block !important;
}
}

/* md: ≥768px */
@media (min-width: 768px) and (max-width: 991.98px) {

.sidebar {
width: 260px;
min-width: 200px;
max-width: 320px;
top: 64px;
height: calc(100vh - 64px);
}
.top-header {
height: 64px;
}
.sidebar-toggle {
display: flex;
}
#sidebar-overlay,
#sidebar-overlay.active {
display: block !important;
}
}

/* lg: ≥992px */
@media (min-width: 992px) and (max-width: 1199.98px) {

.sidebar {
width: 280px;
min-width: 220px;
max-width: 320px;
top: 64px;
height: calc(100vh - 64px);
}
.top-header {
height: 64px;
}
.sidebar-toggle {
display: none;
}
#sidebar-overlay,
#sidebar-overlay.active {
display: none !important;
}
}

/* xl: ≥1200px */
@media (min-width: 1200px) and (max-width: 1399.98px) {

.sidebar {
width: 300px;
min-width: 220px;
max-width: 350px;
top: 64px;
height: calc(100vh - 64px);
}
.top-header {
height: 64px;
}
.sidebar-toggle {
display: none;
}
#sidebar-overlay,
#sidebar-overlay.active {
display: none !important;
}
}

/* xxl: ≥1400px */
@media (min-width: 1400px) {

.sidebar {
width: 340px;
min-width: 240px;
max-width: 400px;
top: 64px;
height: calc(100vh - 64px);
}
.top-header {
height: 64px;
}
.sidebar-toggle {
display: none;
}
#sidebar-overlay,
#sidebar-overlay.active {
display: none !important;
}
}

@media (min-width: 901px) {
.top-header {
display:none!important;
}
.sidebar{
top:0px!important;
}
.content-header {
margin-top: 20px;
}
}

.sidebar.sidebar-closed {
transform: translateX(100%);
box-shadow: none;
}

#sidebar-overlay {
display: none;
position: fixed;
top: 0;
right: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.3);
z-index: 1999;
transition: opacity 0.3s;
opacity: 0;
pointer-events: none;
}
#sidebar-overlay.active {
display: block;
opacity: 1;
pointer-events: auto;
}
@media (min-width: 901px) {
#sidebar-overlay,
#sidebar-overlay.active {
display: none !important;
opacity: 0 !important;
pointer-events: none !important;
}
}

.header-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}

.sidebar-toggle {
background: transparent;
border: none;
color: var(--primary-color);
cursor: pointer;
font-size: 1.7rem;
margin-right: 0;
outline: none;
transition: background 0.2s;
z-index: 3002;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}

@media (min-width: 901px) {
.sidebar-toggle {
display: none;
}
}

@media (max-width: 900px) {
.sidebar-toggle {
display: flex;
}
}

@media (max-width: 900px) {
.sidebar {
width: 80vw;
min-width: 220px;
max-width: 320px;
}
}

@media (min-width:567px) {
.top-nav-dropdown{
display: none!important;
}
}

.sidebar-header {
padding: 1rem;
border-bottom: 1px solid var(--border-color);
margin-bottom: 1rem;
}

.sidebar-header h2 {
font-size: 1.25rem;
color: var(--primary-color);
}

.nav-list {
list-style: none;
}

.nav-item {
margin-bottom: 0.5rem;
}

.nav-link {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
color: var(--text-color);
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s, color 0.3s;
}

.nav-link:hover, .has-submenu.active > .nav-link {
background-color: var(--hover-color);
}

.nav-link.active {
background-color: var(--primary-color);
color: #fff;
}

.submenu-icon {
display: inline-block; /* Ensure the element can be transformed */
transition: transform 0.3s ease-in-out;
font-size: 0.8rem;
}

/* Rotate icon when the parent menu is active */
.has-submenu.active > a > .submenu-icon {
transform: rotate(-90deg);
}

.submenu {
list-style: none;
padding-left: 1.5rem;
overflow: hidden;
max-height: 0;
transition: max-height 0.4s ease-in-out;
}

.has-submenu.active > .submenu {
max-height: 500px; /* A large enough value to show the content */
}

.submenu {
background-color: var(--hover-color);
margin-top: 0.5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}

.submenu li a {
color: var(--text-color-light);
padding-block: 0.5rem;
transition: color 0.2s ease, background-color 0.2s ease;
transition: all ease 0.3s;
padding-inline-start: 5px;
}

.submenu li a:hover {
color: var(--primary-color);
background-color: transparent;
}

/* Search Box Styles */
.search-box {
display: flex;
align-items: center;
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 0.5rem 1rem;
transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
background-color: var(--input-bg-color);
}

.search-box:focus-within {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

#search-input {
flex-grow: 1;
border: none;
outline: none;
background: transparent;
font-family: inherit;
font-size: 1rem;
color: #fff;
}



.search-button {
background: transparent;
border: none;
cursor: pointer;
color: var(--text-color-light);
padding-left: 0.5rem;
font-size: 1rem;
}

#search-input::placeholder {
color: #fff;
}
.result-content{
width: 100%;
display: flex ;
justify-content: space-between;
}
.result-link{
padding: 1rem;
background: #fff;
border-radius: 10px;
color: #282f3a;
text-decoration: none;
font-weight: bold;
transition: all ease 0.3s;
}
a.result-link:hover {
background: #d8d8d8;
}

/* .search-results-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--content-bg);
z-index: 1000;
overflow-y: auto;
padding: 2rem;
} */
.logo{
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.logo img{
width: 40px;
}
.logo span{
display: flex;
align-items: center;
gap: 10px;
}
.logo h1{
display : flex;
justify-content:center;
align-items:center;
gap:10px;
}
.logo h1::after{

content: '';
display: flex;
align-items: center;
justify-content: center;
width: 3px;
height: 60px;
background-color: rgb(160 160 160);
border-radius: 20px;
}