html {
        transition: data-bs-theme 0.3s ease-in-out;
}

body {
font-family: 'Yekan Bakh', sans-serif !important;
}

#header.custom-class > div {
    background-color: #5a585875 !important;
}
html .scroll-to-top{
max-width: 50px !important;
}
#header .header-top{
    background-color: #fff ;
}


.rtl{
	direction:rtl !important;
}


.button, .button--secondary, .button--orange, .button--round, .button--transparent, .button--full, .form-box__submit-button, .footer__download-button {
    background-color: #16406b !important;}
.Percentage {
    border: 4px solid #fb3449;
    background-color: #fb3449;
    color: white;
    border-radius: 1rem;
    padding: 3px 0.7rem 1px;
}
del {
    font-size: 1.2rem !important;
}
.category a {
    text-decoration: none;
    display: inline-block;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    position: relative;
    padding: 0;
    text-align: center;
    white-space: nowrap;
    line-height: 22px;
}


.shop .quantity .qty {
	border: 1px solid #F0F0F0;
	box-shadow: none;
	float: left;
	height: 40px;
	padding: 0 39px;
	text-align: center;
	width: 125px;
	font-weight: bold;
	font-size: 1em;
	outline: 0;
	border-radius: .25rem;
}

.shop .quantity .qty::-webkit-inner-spin-button, .shop .quantity .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.shop .quantity .qty::-ms-clear {
	display: none;
}

.shop .quantity.quantity-lg {
	height: 45px;
}

.shop .quantity.quantity-lg .minus {
	height: 45px;
	width: 45px;
}

.shop .quantity.quantity-lg .plus {
	height: 45px;
	width: 45px;
}

.course-left-field {
    border-radius: 4px;
    border: solid 1px #e0e3ec; 
    background-color: #fff; 
    display: flex; 
    flex-direction: column; 
   flex-wrap: wrap; 
     width: 100%; 
    align-items: center;
     margin-bottom: 20px; 
     border-radius: 2px; 
    justify-content: center;
}

html.sticky-header-active .header-logo .img-fluid {
        max-height: 65px !important;
    }



.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    color: var(--bs-btn-active-color) !important;
    background-color: var(--primary)!important;
    border-color: var(--primary)!important;
}


.btn-outline-primary {
    --bs-btn-color: var(--primary)!important;
    --bs-btn-border-color: var(--primary)!important;
    --bs-btn-hover-color: #fff!important;
    --bs-btn-hover-bg: var(--primary)!important;
    --bs-btn-hover-border-color: var(--primary)!important;
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary)!important;
    --bs-btn-active-border-color: var(--primary)!important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--primary)!important;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--primary)!important;
    --bs-gradient: none;
}



.autocomplete-suggestions {
    background: white !important;
}

.autocomplete-group {
    font-weight: 300;
    border-bottom: 1px solid var(--primary) !important;
}


.navbar-dark .navbar-nav a.nav-link {
  color: #ffffff;
  font-size: 1.1em;
}
.dropdown-menu {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  border: none;
  border-radius: 15px !important;
  
}

 .iconSTyle{

    border-radius: 32px !important;
    background-color: #0d6efd29 !important;;
    box-shadow: 0 .5rem 1rem #6c757d52 !important;
    border-color: #195ec533 !important;

  }

  .widthSTyle{

     width: max-content ;
   }

@media only screen and (min-width: 992px) {
  .dropdown:hover .dropdown-menu {
     display: flex;
    flex-wrap:nowrap;
  }
  .dropdown-menu.show {
    display: flex;
    flex-wrap:nowrap;
   
  }
  .megaStyleOnce{
   
    right:-33px !important;
     width: max-content;
  }
   
  /* Parent container with grid layout */
   .dropdown-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3 columns */
    gap: 10px; /* Space between columns and rows */
    }

    .dropdown-container ul {
    list-style: none; /* Remove default list styling */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
    }

}
@media (min-width:606px) and (max-width:991px) {
  .dropdown-container {
      display: grid;
      grid-template-columns: 1fr 1fr ;
   }
}

.dropdown-menu ul {
  list-style: none;
  padding: 0;
}
.dropdown-menu li .dropdown-item {
  color: gray;
  font-size: 1em;
  padding: 0.5em 1em;
}
.dropdown-menu li .dropdown-item:hover {
  background-color: #0d6efd2e;
  color:#2b74e1 !important;
}
 .dropdown-menu li:first-child a {
  font-weight: bold;
  color: #283891;
}




@media only screen and (max-width: 992px) {
  .dropdown-menu.show {
    flex-wrap: wrap;
    max-height: 268px;
    overflow-y: scroll;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1140px) {
  .dropdown:hover .dropdown-menu {
    width: auto;
    flex-wrap: nowrap;
  }
}

        img.imagepose {
            position: absolute;
            bottom: 76%;
            right: 27%;
        }
        
        .bround {
         
          border-radius:15px !important;
        }
 
      .owl-carousel.owl-rtl {
        direction: rtl !important;
      }
      
      .shape-divider.shape-divider-reverse-xy {
        transform: rotate(180deg) !important ;
       }
.owl-carousel{
	direction:rtl !important;
	
}

.custom-line{

   width: 50px;
    border-bottom: 2px solid #CCC;
    border-bottom-color: #c19655;

}

/* search bar in pishgamrayan */

  .search__box {
  float: left;
  width: 0;
  height: 4rem;
/*   display: inline; */
  background: none;
  color: #f7f7f7;
  font-size: 1.5rem;
  border-radius: 2rem;
  outline: none;
  border: none;
  position: relative;
  opacity: 1;
  transition: all .75s ease-in;
  cursor: pointer;
/*   border: 2px solid tomato; */
/*   margin-top: 5px; */
}

/* .search__box:focus, .search__box:hover {
  background-color: #f1f2f6;
} */

.search__icon {
  box-sizing: border-box;
  float: right;
  font-size: 1.5rem;
  display: inline-block;
/*   justify-content: center;
  align-items: center; */

  margin-top: 0;
  cursor: pointer;
  position: absolute;
  color: #fa983a;
  transition: all .25s ease-in;
  padding: .7rem;
  border-radius: 50%;
}

.container:hover > .search__box {
  width: 85%;
  padding: 0 1rem;
}

.container:hover > .search__icon {
  background-color: #eee;
}


 /* mini nav  */

.menu-checkbox {
  display: none;
}
.menu {
  position: relative;
}
.menu-dots {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotate(90deg);
  transition: 0.3s;
  cursor: pointer;
  background-color: #0c9adf
}
.menu-dots:hover {
  box-shadow: 0 0 0 0.3rem #4b82d3 , 0 0 0 1rem #0d6efd1a;
  transform: scale(1.2) rotate(90deg);
}
.menu-dot {
  width: 5px;
  height: 5px;
  background-color: #fff;
  border-radius: 50%;
}
.menu-dot + .menu-dot {
  margin-top: 0.3rem;
}
.menu-items {
  width: 9.4rem;
  height: 11rem;
  color: #fff;
  pointer-events: none;
  list-style:none;
  opacity: 0;
  transition: 0.3s;
}
.menu-item {
  transform: scale(0.5);
  filter: blur(10px);
  transition: 0.3s;
}
.menu-item:nth-child(odd) {
  text-align: right;
}
.menu-item:nth-child(even) {
  text-align: left;
}
.menu-item:first-child, .menu-item:last-child {
  grid-column: span 2;
  text-align: center;
}
.menu-checkbox:checked + .menu > .menu-dots {
  transform: none;
  box-shadow: 0 0 0 28px #0096c754;
}
.menu-checkbox:checked + .menu > .menu-items {
  opacity: 1;
  pointer-events: auto;
}
.menu-closer-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
}
.menu-checkbox:checked + .menu > .menu-items > .menu-item {
  opacity: 1;
  transform: none;
  filter: none;
}
.menu-checkbox:checked + .menu > .menu-items > .menu-item:nth-child(1) {
  transition-delay: 0.05s;
}
.menu-checkbox:checked + .menu > .menu-items > .menu-item:nth-child(2) {
  transition-delay: 0.1s;
}
.menu-checkbox:checked + .menu > .menu-items > .menu-item:nth-child(3) {
  transition-delay: 0.15s;
}
.menu-checkbox:checked + .menu > .menu-items > .menu-item:nth-child(4) {
  transition-delay: 0.2s;
}
.menu-checkbox:checked + .menu > .menu-items > .menu-item:nth-child(5) {
  transition-delay: 0.25s;
}
.menu-checkbox:checked + .menu > .menu-items > .menu-item:nth-child(6) {
  transition-delay: 0.3s;
}
.menu-checkbox:checked + .menu > .menu-closer-overlay {
  pointer-events: auto;
  cursor: pointer;
}


.colorICON{

  color:#03045E;
}



 
@media only screen and (min-width:1200px){

    .heightMyStyle
       {
        position:relative !important;
        height:407px !important; 
       }

     .directionnewDesign
        {
        left:0 !important;
        right:0 !important;
         top: 494px  !important;
         position:absolute !important;
        }
  }


@media (min-width: 992px ) and (max-width:1199px ){

  .heightMyStyle
       {
        height:370px !important;
         position:relative !important; 
       }

     .directionnewDesign
        {
        left:0 !important;
        right:0 !important;
         top: 525px  !important;
         position:absolute !important;
        }
}
@media (min-width: 768px ) and (max-width:991px ){

   .heightMyStyle
       {
        height:1000px !important ;
         position:relative !important;
       }

     .directionnewDesign
        {
        left:0 !important;
        right:0 !important;
         top: 705px  !important;
         position:absolute !important;
        }

}

@media (min-width: 576px ) and (max-width:767px ){


 .heightMyStyle
       {
        height:1056px !important ;
        position:relative !important;
       }

     .directionnewDesign
        {
        left:0 !important;
        right:0 !important;
         top: 776px  !important;
         position:absolute !important;
        }

}
@media (min-width: 446px ) and (max-width:575px ){


 .heightMyStyle
       {
        height:2000px !important ;
        position:relative !important;
       }

     .directionnewDesign
        {
        left:0 !important;
        right:0 !important;
         top: 759px  !important;
         position:absolute !important;
        }

}

@media (min-width: 320px ) and (max-width:445px ){


 .heightMyStyle
       {
        height:2000px !important ;
        position:relative !important;
       }

     .directionnewDesign
        {
        left:0 !important;
        right:0 !important;
         top: 845px  !important;
         position:absolute !important;
        }

}
 
 .ServiceDorderStyle{

  border: 2px solid #283891;
  outline: 2px solid #283891;
  outline-offset: -8px;
 
 }

@media only screen and (min-width:992px){
   .absoluteResponsive{
      position:absolute !important;
    }

    .heightUssdStyle{
       height:370px !important;
      
     }
   .marginlg{
    margin-right:259px !important;

   }
}

.cardborderhover:hover {
   border: 1px solid #003399 ;	
	}

.cardborderhover:hover .card-title {
  color: #003399 ; 
		}

.transition-2ms {
	transition: all 0.2s ease-in-out;
		}

.marginleft {
  margin-left:10px !important;
}

/* terminals */

/* terminals */

.codeBlockContainer_Ckt0{
    border-radius:8px;
    overflow:hidden;
    margin:20px 0;
    direction:ltr;
    max-width:100%;
    width:100%;
    box-sizing:border-box;
}

.codeBlockHeader{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px 12px;
    background-color:#00000008;
}

.languageLabel{
    color:#888;
    font-size:11px;
    font-family:sans-serif;
}

.codeBlockContainer_Ckt0 pre{
    padding:3px;
    margin:0;
    max-width:100%;
    width:100%;
    overflow-x:auto;        /* فقط خود باکس اسکرول بخوره */
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    box-sizing:border-box;
    color:#d4d4d4;
    font-size:14px;
    scroll-behavior:smooth;
    white-space:pre;        /* جلوی پیچ شدن متن */
    display:block;
}

/* رفع کش آمدن صفحه */
.codeBlockContainer_Ckt0 pre p{
    margin:0;
    display:inline-block;
    max-width:100%;         /* باعث می‌شود فقط تا انتهای باکس برسد */
    white-space:pre;        /* حفظ فاصله‌ها بدون ساخت عرض زیاد */
    overflow-x:auto;
}

.codeBlockContainer_Ckt0 pre code{
    white-space:pre-wrap;
    word-break:break-word;         display:inline;
    font-family:'Yekan Bakh';
}

.copyButton{
    background:#77777747;
    border:none;
    padding:6px;
    border-radius:4px;
    cursor:pointer;
    display:flex;
    transition:0.2s;
}

.copyButton.success{
    background:#28a745;
}

/* مخفی کردن اسکرول‌بار ولی حفظ عملکرد */
.codeBlockContainer_Ckt0 pre::-webkit-scrollbar{
    height:4px;
}
.codeBlockContainer_Ckt0 pre::-webkit-scrollbar-thumb{
    background:#4444;
    border-radius:2px;
}

/* موبایل */
@media (max-width:768px){
    .codeBlockContainer_Ckt0{
        margin:15px 0;
        width:100%;
    }

    .codeBlockHeader{
        padding:6px 10px;
    }

    .languageLabel{
        font-size:10px;
    }

    .copyButton{
        padding:5px;
    }

    .codeBlockContainer_Ckt0 pre{
        font-size:13px;
    }
}
   .bg-my{
        background:#f5f7fa;
    } 

  ul{

    color:#515b66;
   }

/* استایل پایه لینک */
.custom-link {
    color: #312e81; /* رنگ خاکستری پیش‌فرض */
    font-weight: 600;
    transition: color 0.3s ease;
    position: relative;
    padding-bottom: 5px;
}

/* متن لینک */
.link-text {
    position: relative;
}

/* ایجاد خط زیر متن انیمیشنی */
.custom-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    right: 0; /* شروع خط از راست برای زبان فارسی */
    background-color: #2b74e1; /* رنگ خط (متناسب با برند شما) */
    transition: width 0.4s ease;
}

/* استایل فلش */
.custom-arrow {
    transition: transform 0.3s ease;
    display: inline-block;
    color: inherit;
    padding-right:5px;
}

/* حالت هوور (Hover) */
.custom-link:hover {
    color: #2b74e1; /* تغییر رنگ متن هنگام هوور */
}

/* انیمیشن فلش هنگام هوور: حرکت به سمت چپ (در متون راست‌چین) */
.custom-link:hover .custom-arrow {
    transform: translateX(-8px); 
}

/* انیمیشن کشیده شدن خط هنگام هوور */
.custom-link:hover::after {
    width: 100%;
}


/* استایل پایه برای جعبه نکات */
.pishgam-callout {
    display: flex;
    align-items: flex-start;
    padding: 1.25rem;
    margin: 1.5rem 0;
    border-radius: 12px;
    direction: rtl; /* تنظیم راست‌چین */
    font-family: inherit;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

/* استایل لایت‌مود (Light Mode) */
.pishgam-callout.note {
   background-color: #f3f3ff;
    border-right: 5px solid #312e81;
    box-shadow: 0 4px 15px #e4e4f9;
}

.pishgam-callout .icon-container {
    flex-shrink: 0;
    margin-left: 12px;
    margin-top: 2px;
    color: #003399; /* رنگ آیکون در لایت‌مود */
}

.pishgam-callout .content-container {
    flex-grow: 1;
}

.pishgam-callout .title {
    display: block;
    font-weight: 800;
    color: #312e81;
}



.callout-warning {
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    margin: 1.5rem 0;
    border-radius: 12px;
    background-color: #FFFBEB; /* زرد بسیار ملایم */
    border-right: 5px solid #F59E0B; /* نارنجی کهربایی */
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.05);
}

.callout-warning .icon {
    color: #D97706;
    margin-left: 12px;
    flex-shrink: 0;
}

.callout-warning .title {
    color: #92400E;
    font-weight: 900;
    font-size: 1.1rem;
    margin-bottom: 4px;
    display: block;
}

.callout-warning .text {
    color: #B45309;
    line-height: 1.8;
}

/* تنظیمات پیش‌فرض برای حالت لایت */
:root {
  --pishgam-logo-main-color: #003399; /* رنگ اصلی لایت */
  --pishgam-logo-accent-color: #FFCC07; /* زرد ثابت */
  --pishgam-logo-text-color: #6E6E6E; /* خاکستری ثابت متن انگلیسی */
 --pishgam-logo-vector-color:#fff;
}



.related-guides-section .related-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-title);
}

.related-guides-section .btn-view-all {
    font-size: 0.9rem;
    color: var(--color-link);
    font-weight: 500;
    transition: color 0.2s ease;
}

.related-guides-section .btn-view-all:hover {
    color: var(--color-link-hover);
}

/* استایل‌های اختصاصی برای ارتقای UI به سطح بین‌المللی */
    
    .blog-header {
        border-bottom: 1px solid #eee;
        margin-bottom: 2.5rem;
    }
    
    /* سیستم هوشمند رسانه: ابعاد فیکس ۸۰۰ در ۵۰۰ در دسکتاپ و ریسپانسیو در موبایل */
    .media-wrapper {
        margin-bottom: 3rem;
    }
    
    .media-card {
        width: 100%;
        max-width: 800px;
        height: 500px; /* ابعاد فیکس مد نظر شما برای دسکتاپ */
        border-radius: 20px; /* لبه‌های گرد مدرن و لوکس */
        overflow: hidden;
        box-shadow: 0 15px 35px rgba(0,0,0,0.06);
        background: #f8f9fa;
        margin: 0 auto 2rem auto;
    }
    
    .fixed-media {
        width: 100%;
        height: 100%;
        object-fit: contain; /* جادوی CSS: تصویر بدون تغییر نسبت، باکس را پر می‌کند و هرگز کشیده نمی‌شود */
        object-position: center; /* تمرکز زوم روی وسط تصویر */
        display: block;
        border: none;
    }

    /* واکنش‌گرایی فوق‌العاده برای نمایشگرهای کوچک و موبایل */
    @media (max-width: 830px) {
        .media-card {
            height: auto;
            aspect-ratio: 8 / 5; /* حفظ دقیق تناسب ۸۰۰ در ۵۰۰ در موبایل بدون به هم ریختگی */
            border-radius: 12px;
        }
    }
    
    /* استایل بخش متن اصلی بلاگ */
    .blog-content {
        font-size: 1.15rem;
        line-height: 1.95;
        color: #2c3e50;
    }
    .blog-content p {
        margin-bottom: 1.8rem;
    }
    /* اعمال قوانین فیکس برای تصاویری که احتمالاً داخل متن Description آپلود می‌شوند */
    .blog-content img {
        max-width: 100%;
        height: auto;
        border-radius: 12px;
        margin: 2rem 0;
    }

    .related-section-title {
        font-size: 1.75rem;
        font-weight: 800;
        color: #1a1a1a;
        position: relative;
        padding-bottom: 0.75rem;
    }
    /* یک خط ظریف و مینیمال زیر عنوان */
    .related-section-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0; /* متناسب با راست‌چین بودن فارسی */
        width: 50px;
        height: 3px;
        background-color: #000; /* یا رنگ برند شما */
        border-radius: 2px;
    }
    
    .related-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 2rem;
        margin-top: 2rem;
    }
    
    /* استایل پرمیوم کارت‌ها */
    .premium-relation-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        background: #ffffff;
        border: 1px solid #eaeaea;
        border-radius: 16px;
        overflow: hidden;
        text-decoration: none !important;
        transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    }
    
    .premium-relation-card:hover {
        transform: translateY(-6px);
        border-color: #d1d1d1;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
    }
    
    /* باکس تصویر با افکت زوم نرم */
    .card-image-wrapper {
        position: relative;
        width: 100%;
        height: 190px;
        overflow: hidden;
        background-color: #f8f9fa;
    }
    
    .card-image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }
    
    .premium-relation-card:hover .card-image-wrapper img {
        transform: scale(1.05);
    }
    
    /* محتوای متنی کارت */
    .card-body-content {
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }
    
    .relation-card-title {
        font-size: 1.15rem;
        font-weight: 700;
        color: #1a1a1a;
        line-height: 1.5;
        margin-bottom: 0.75rem;
        /* محدود کردن عنوان به ۲ خط برای تراز ماندن کارت‌ها */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .relation-card-desc {
        font-size: 0.95rem;
        color: #5a5a5a;
        line-height: 1.6;
        margin-bottom: 1.5rem;
        /* محدود کردن توضیحات به ۳ خط */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    /* فوتر کارت و بخش اکشن */
    .relation-card-footer {
        margin-top: auto;
        padding-top: 1rem;
        border-top: 1px solid #f5f5f5;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.9rem;
        font-weight: 600;
        color: #000;
    }
    
    .relation-action-text {
        transition: transform 0.3s ease;
    }
    
    .premium-relation-card:hover .relation-action-text i {
        transform: translateX(-5px); /* حرکت ظریف فلش به سمت چپ در هاور */
    }