/* thematics-education.css>13 */
/* color:#2e2557 */

/* linear-gradient(135deg, #d4af37, #b8960c) */


#topMain.nav-pills>li>a.dropdown-toggle:after {
    display: block;
    content: unset!important;
    position: absolute;
    top: 50%;
    right: 10px;
    margin: -5px 0 0;
    /* font-family: FontAwesome; */
    font-size: 12px;
    opacity: .3;
    line-height: 1em;
    -webkit-transition: -webkit-transform .2s ease-in;
    -moz-transition: -moz-transform .2s ease-in;
    -ms-transition: -ms-transform .2s ease-in;
    -o-transition: -o-transform .2s ease-in;
    transition: transform .2s ease-in;
}






/* ========== تغییر رنگ هدر و فوتر به مشکی ========== */
/* هدر بالایی (Top Bar) */
#topBar,
#topBar .container {
    background: #000000 !important;
}

/* منوی اصلی هدر */
#header,
#header.sticky,
#topNav,
.nav-main-collapse,
#topMain.nav-pills > li > a {
    background: #000000 !important;
}


#header, #topMain.nav-pills>li, #topNav div.submenu-dark ul.dropdown-menu {
    background-color: unset!important;
}

/* فوتر */
#footer,
.custom-footer {
    background: #000000 !important;
    background-image: none !important; /* حذف گرادیان قبلی */
}

/* باکس سبد خرید (Quick Cart) داخل هدر */
#header li.quick-cart .quick-cart-box {
    background-color: #111111 !important;
    border-color: #333 !important;
}

/* منوهای کشویی (dropdown) */
.dropdown-menu,
.dropdown-langs.dropdown-menu {
    background-color: #111111 !important;
    border: 1px solid #333 !important;
}

/* المان‌های فرعی داخل هدر که رنگ بنفش داشتند */
.auth-container .btn-primary,
.btn-primary,
.btn.btn-primary.btn-sm,
#topMain .dropdown-menu > li > a,
#topMain .dropdown-menu .dropdown-menu {
    background-color: #111111 !important;
    background-image: none !important;
}

/* دکمه ورود/ثبت‌نام */
.auth-state:not(.logged) .btn-primary {
    background-color: #000000 !important;
    border-color: #555 !important;
}

/* آیکون‌ها و لینک‌های داخل هدر (برای خوانایی) */
#topBar ul.top-links > li > a,
#topMain.nav-pills > li > a,
.nav-main a,
.dropdown-menu > li > a {
    color: #ccc !important;
}
#topBar ul.top-links > li > a:hover,
#topMain.nav-pills > li > a:hover,
.dropdown-menu > li > a:hover {
    color: #fff !important;
    background-color: #222 !important;
}

/* هدر شفاف / نوار جستجو */
.search-box.over-header {
    background: #000000dd !important;
}


/* *** */














/* footer */


  @media (max-width: 768px) {
    .footer-links a {
        flex-direction: row;
        justify-content: center;
        text-align: center;
    }
    .custom-footer {
        padding: 40px 0 0;
        margin-top: 60px;
    }
    
    /* وسط‌چین کردن همه ستون‌ها */
    .footer-column {
        margin-bottom: 30px;
        text-align: center !important;
    }
    .footer1{
      justify-content: center;
      align-items: center;
    }
    /* وسط‌چین کردن لوگو */
    .footer-logo-section {
        text-align: center !important;
        margin: 0 auto 25px;
    }
    
    .footer-logo {
        max-width: 160px;
        display: block;
        margin: 0 auto;
    }
    
    /* وسط‌چین کردن توضیحات */
    .footer-description {
        text-align: center !important;
    }
    
    /* وسط‌چین کردن شبکه‌های اجتماعی */
    .footer-social {
        justify-content: center !important;
        margin: 0 auto;
    }
    
    /* وسط‌چین کردن عناوین + خط آبی */
    .footer-title {
        font-size: 16px;
        text-align: center !important;
        position: relative;
    }
    
    .footer-title::after {
        right: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    /* وسط‌چین کردن لینک‌ها */
    .footer-links {
        text-align: center !important;
    }
    
    .footer-links li {
        text-align: center !important;
    }
    
    .footer-links a {
        justify-content: center !important;
        padding-right: 0 !important;
    }
    
    /* وسط‌چین کردن اطلاعات تماس */
    .footer-contact {
        text-align: center !important;
    }
    
    .footer-contact li {
        justify-content: center !important;
        text-align: center !important;
    }
    
    .contact-icon {
        margin-left: 8px !important;
        margin-right: 8px !important;
    }
    
    .footer-contact span {
        display: inline-block;
        text-align: center !important;
    }
    
    /* وسط‌چین کردن متن خبرنامه */
    .newsletter-text {
        text-align: center !important;
    }
    
    /* وسط‌چین کردن فرم خبرنامه */
    .newsletter-form-group {
        flex-direction: column;
        max-width: 400px;
        margin: 20px auto 0 !important;
    }
    
    .newsletter-input {
        width: 100%;
        text-align: center;
    }
    
    .newsletter-button {
        width: 100%;
        height: 48px;
        margin-top: 8px;
    }
    
    /* تنظیمات پایین فوتر */
    .footer-bottom-links {
        gap: 15px;
        flex-direction: column;
    }
    
    .footer-bottom-links a {
        font-size: 12px;
    }
    
    .link-separator {
        display: none;
    }
    #footer>.container {
    padding-top: 0; 
    margin-bottom: 60px;
}
}
#toTop:before {
    font-family: "fontawesome";
    content: "\f135";

}
#toTop{
  color: #c416ad;
}
  #footer {
    background: #2e2557;
    background: -moz-linear-gradient(top, #1a1d2b 0%, #2e3648 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #242132), color-stop(100%, #312858));
    background: -webkit-linear-gradient(top, #2e2557 0%, #2e3648 100%);
    background: -o-linear-gradient(top, #1a1d2b 0%, #2e3648 100%);
    background: -ms-linear-gradient(top, #1a1d2b 0%, #2e3648 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1a1d2b', endColorstr='#2e3648',GradientType=0 );
  }
  
  #footer {
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    background: rgba(26, 26, 26, 0.95)!important; 
    background: -moz-linear-gradient(top, #555555 0%, #313131 100%);
    background: -o-linear-gradient(top, #555555 0%, #313131 100%);
    background: -ms-linear-gradient(top, #555555 0%, #313131 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555', endColorstr='#313131',GradientType=0 );
  }
  
  /* استایل‌های اختصاصی فوتر */
  .custom-footer {
    background: #c90bcf;
    color: #fff;
    padding: 0;
    position: relative;
    margin-top: 0;
    width: 100%;
    clear: both;
  }

  /* اطمینان از چسبیدن فوتر به پایین */
  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  #wrapper {
    flex: 1 0 auto;
  }

  .custom-footer {
    flex-shrink: 0;
  }

  /* استایل‌های ستون‌ها */
  .footer-column {
    margin-bottom: 40px;
  }

  .footer-logo-section {
    margin-bottom: 25px;
  }

  .footer-logo {
    max-width: 200px;
    height: auto;
    /* filter: brightness(0) invert(1); */
  }

  .footer-description {
    color: rgba(255,255,255,0.7);
    line-height: 1.8;
    margin-bottom: 25px!important;
    font-size: 14px;
  }

  /* شبکه‌های اجتماعی */
  .footer-social {
    display: flex;
    gap: 15px;
  }

  .social-icon {
    color: #fff;
    /* background: rgba(255,255,255,0.1); */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    text-decoration: none;
  }

  .social-icon:hover {
    /* background: #4cc9f0; */
    transform: translateY(-3px);
  }

  /* اصلاح آیکون توییتر */
  .twitter-fix i {
    transform: translateX(-1px); /* تنظیم دقیق موقعیت آیکون توییتر */
  }

  /* عناوین */
  .footer-title {
    color: #fff;
    font-size: 18px;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
    font-weight: 600;
  }

  .footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 3px;
    background: #4cc9f0;
  }

  /* لینک‌ها */
  .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .footer-links li {
    margin-bottom: 12px;
  }

  .footer-links a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 14px;
    display: flex;
    align-items: center;
  }

  .footer-links a:hover {
    color: #4cc9f0;
    padding-right: 5px;
  }

  /* آیکون‌های آبی برای لینک‌های سریع */
  .blue-icon {
    /* color: #4cc9f0 !important; */
     color: #d4af37 !important;
    text-shadow: 0 0 2px #b8960c;
    margin-left: 8px;
    font-size: 16px;
    width: 20px;
  }

  .footer-links .fa-angle-left {
    margin-left: 8px;
    font-size: 12px;
  }

  /* اطلاعات تماس */
  .footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .footer-contact li {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
  }

  .contact-icon {
    /* color: #4cc9f0; */
     color: #d4af37 !important;
    text-shadow: 0 0 2px #b8960c;
    margin-left: 10px;
    margin-top: 3px;
    font-size: 16px;
    min-width: 20px;
  }

  .footer-contact span {
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    line-height: 1.6;
  }

  /* خبرنامه */
  .newsletter-text {
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px!important;
  }

  /* استایل جدید برای گروه فرم خبرنامه */
  .newsletter-form-group {
    margin-top: 20px;
    display: flex;
    gap: 8px; /* فاصله بین باکس ایمیل و دکمه */
    align-items: stretch; /* برای یکسان کردن ارتفاع */
  }

  .newsletter-input {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    border-radius: 8px;
    padding: 14px 15px;
    font-size: 14px;
    flex: 1; /* پر کردن فضای باقیمانده */
    transition: all 0.3s ease;
    height: 100%; /* ارتفاع برابر با دکمه */
    box-sizing: border-box; /* برای محاسبه صحیح ارتفاع */
  }

  .newsletter-input:focus {
    outline: none;
    border-color: #4cc9f0;
    background: rgba(255,255,255,0.15);
  }

  .newsletter-input::placeholder {
    color: rgba(255,255,255,0.5);
  }

  /* دکمه خبرنامه با ارتفاع یکسان */
  .newsletter-button {
    /* background: linear-gradient(135deg, #4cc9f0, #2e2557); */
    background: linear-gradient(135deg, #d4af37, #b8960c) !important;;
    border: none;
    color: white;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px; /* عرض ثابت برای دکمه */
    min-width: 60px; /* حداقل عرض */
    padding: 0; /* حذف padding برای کنترل بهتر ارتفاع */
  }

  .newsletter-button:hover {
    background: linear-gradient(135deg, #2e2557, #4cc9f0);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(76, 201, 240, 0.3);
  }

  .newsletter-button .fa-paper-plane {
    font-size: 18px;
  }

  /* جداکننده */
  .footer-divider {
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 40px 0 30px;
  }

  /* کپی‌رایت */
  .footer-copyright {
    color: rgba(255,255,255,0.6);
    font-size: 14px;
    margin-bottom: 15px;
  }

  .footer-bottom-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
  }

  .footer-bottom-links a {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    font-size: 13px;
    transition: all 0.3s ease;
  }

  .footer-bottom-links a:hover {
    color: #4cc9f0;
  }

  .link-separator {
    color: rgba(255,255,255,0.3);
    font-size: 12px;
  }

  /* ریسپانسیو */
  @media (max-width: 768px) {
    .custom-footer {
        padding: 40px 0 0;
        margin-top: 60px;
    }
    
    .footer-column {
        margin-bottom: 30px;
    }
    
    .footer-logo {
        max-width: 160px;
    }
    
    .footer-title {
        font-size: 16px;
    }
    
    .newsletter-form-group {
        flex-direction: column;
    }
    
    .newsletter-button {
        width: 100%;
        height: 48px;
        margin-top: 8px;
    }
    
    .newsletter-input {
        width: 100%;
    }
    
    .footer-bottom-links {
        gap: 15px;
    }
    
    .footer-bottom-links a {
        font-size: 12px;
    }
  }
  #footer form input, #footer form textarea {
    color: #999;
    background-color: rgba(0,0,0,.2);
    border-color: #d4af37;
     margin-bottom: 0!important; 
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
#footer ul.footer-links>li>a:before {
    content:unset;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    padding-right: 10px;
}
/* #footer a.social-icon {
    color: #4cc9f0 !important;
} */
 #footer a.social-icon i,

 #footer a.social-icon {
    color: #d4af37 !important;
    text-shadow: 0 0 2px #b8960c;
}
.social-icon {
    background: unset!important; 
  
}
/* footer */







/* بج صفحات */

.badge {
    display: inline-block;
    background: linear-gradient(135deg, #41ffb2, #2b49ff) !important;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 15px;
}

span.label-aqua, span.badge-aqua, .list-group-item.active>.badge.badge-aqua {
  background: linear-gradient(135deg,  #d4af37, #b8960c) !important;
}
/* بج صفحات */


/* تغییرات قالب */
#header li.quick-cart .quick-cart-box {
    top: 0!important;
}
  
#topBar ul.top-links>li>a>i {
   
     opacity: unset!important;
}
#header li.quick-cart .quick-cart-box a.btn{
  background-color: #147196!important;
}
#header #topNav #topMain>li>a {
 
    text-align: center;
}

/* تغییرات قالب */









	














      /* * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        } */
        body {
            font-family: 'Inter', sans-serif;
            background: #0a0a0a;
            color: #fff;
        }

        .hero-section {
            position: relative;
            /* ✅ مسیر عکس رو به فایل خودت اصلاح کن - مثال: اگر عکس کنار index.html هست */
            background-image: url('../images/images1/saat8.png');
            /* background-size: cover; */
            background-position:right ;
            background-repeat: no-repeat;
            padding:0;
            min-height:80vh;
            display: flex;
            align-items: center;
            isolation: isolate;
        }

        /* لایه تیره برای خوانایی متن */
        .hero-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: brightness(0.85);
            z-index: 1;
            pointer-events: none;
        }

        .hero-pattern,
        .hero-blob-1,
        .hero-blob-2 {
            position: absolute;
            z-index: 2;
            pointer-events: none;
        }
        .hero-pattern {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: radial-gradient(rgba(212, 175, 55, 0.15) 1px, transparent 1px);
            background-size: 40px 40px;
        }
        .hero-blob-1 {
            width: 600px;
            height: 600px;
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.05));
            border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
            top: -200px;
            right: -100px;
            animation: float-blob 20s ease-in-out infinite;
        }
        .hero-blob-2 {
            width: 400px;
            height: 400px;
            background: linear-gradient(225deg, rgba(30, 35, 45, 0.4), rgba(20, 20, 28, 0.2));
            border-radius: 30% 70% 45% 55% / 50% 30% 70% 40%;
            bottom: -100px;
            left: -50px;
            animation: float-blob 25s ease-in-out infinite reverse;
        }

        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 24px;
            width: 100%;
            position: relative;
            z-index: 10;
        }
        .row {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -15px;
        }
        .align-items-center {
            align-items: center;
        }
        .col-lg-6 {
            flex: 0 0 50%;
            max-width: 50%;
            padding: 0 15px;
        }

        .hero-content {
            z-index: 15;
            position: relative;
        }
        .hero-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(8px);
            padding: 8px 20px;
            border-radius: 40px;
            font-size: 1.4rem;
            color: #d4af37;
            border: 1px solid rgba(212, 175, 55, 0.5);
            margin-bottom: 24px;
            font-family: 'B Yekan';
        }
        .hero-title {
            font-size: 3.5rem;
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 20px;
            background: linear-gradient(135deg, #fff, #e0e0e0);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .hero-title .highlight {
            background: linear-gradient(135deg, #d4af37, #f5e7a3);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .hero-description {
            font-size: 1.9rem;
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 32px;
            max-width: 90%;
        }
        .hero-buttons {
            display: flex;
            gap: 20px;
            margin-bottom: 48px;
            flex-wrap: wrap;
        }
        .btn-primary-gold {
            background: linear-gradient(135deg, #d4af37, #b8960c);
            padding: 14px 32px;
            border-radius: 50px;
            font-weight: 600;
            color: #0a0a0a;
            border: none;
            cursor: pointer;
            transition: 0.3s;
        }
        .btn-primary-gold:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 28px rgba(212, 175, 55, 0.5);
        }
        .btn-secondary-outline {
            background: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(6px);
            border: 2px solid rgba(212, 175, 55, 0.7);
            padding: 12px 30px;
            border-radius: 50px;
            font-weight: 600;
            color: #d4af37;
            cursor: pointer;
            transition: 0.3s;
        }
        .btn-secondary-outline:hover {
            background: rgba(212, 175, 55, 0.2);
            border-color: #d4af37;
        }
        .hero-stats {
            display: flex;
            gap: 48px;
            flex-wrap: wrap;
        }
        .stat-item h4 {
            font-size: 2rem;
            font-weight: 700;
            color: #d4af37;
        }
        .stat-item p {
            color: #ddd;
        }

        .hero-image {
            position: relative;
            text-align: center;
        }
        .hero-image img {
            opacity: 0;  /* تصویر اصلی مخفی شده چون پس‌زمینه سکشن همونه */
            max-width: 100%;
            pointer-events: none;
        }
        .hero-badge {
            position: absolute;
            bottom: 20px;
            left: -20px;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(12px);
            border-radius: 60px;
            padding: 12px 24px;
            border: 1px solid rgba(212, 175, 55, 0.5);
            z-index: 20;
        }
        .hero-badge-inner {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .hero-badge-icon {
            background: #d4af37;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            color: #0a0a0a;
        }
        .hero-badge h6 {
            font-size: 1rem;
            font-weight: 700;
            color: #d4af37;
        }
        .hero-badge small {
            font-size: 0.75rem;
            color: #ccc;
        }

        @keyframes float-blob {
            0% { transform: translate(0,0) rotate(0deg); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
            50% { transform: translate(30px, 40px) rotate(5deg); border-radius: 55% 45% 65% 35% / 45% 55% 45% 55%; }
            100% { transform: translate(0,0) rotate(0deg); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
        }

        @media (max-width: 992px) {
            .hero-section { padding: 70px 0; text-align: center; }
            .col-lg-6 { flex: 0 0 100%; max-width: 100%; }
            .hero-description { max-width: 100%; margin: 0 auto 32px; }
            .hero-buttons, .hero-stats { justify-content: center; }
            .hero-image { margin-top: 40px; }
            .hero-badge { left: 50%; transform: translateX(-50%); bottom: -10px; }
        }
        @media (max-width: 768px) {
            .hero-title { font-size: 2.2rem; }
            .hero-badge { padding: 8px 16px; }
            .hero-badge-icon { width: 30px; height: 30px; font-size: 1rem; }
        }
/* انتقال محتوای هدر به سمت بالا - فقط hero-content */
.hero-content {
    transform: translateY(-30px); /* مقدار رو هر چقدر دوست داری کم یا زیاد کن */
}

/* برای نمایشگرهای کوچیکتر که شاید اذیت بشه، مقدار رو کمتر کن */
@media (max-width: 992px) {
    .hero-content {
        transform: translateY(-15px);
    }
}





















   .product-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        gap: 20px;
        width: 100%;
        margin: 0 auto;
        padding: 20px 70px;
        background-color: #f9f9f9;
    }

    .product-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: calc(20% - 16px);
        min-width: 0;
        border: 1px solid lightgray;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
        background-color: #1a1a1a;
        /* حذف padding-bottom برای چسبیدن نوشته به عکس */
        padding-bottom: 0;
        transition: transform 0.2s ease;
    }

    .product-card:hover {
        transform: translateY(-5px);
    }

    .product-image {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 12;
        /* object-fit: cover; */
        /* نمایش عکس بدون فاصله از پایین */
        display: block;
    }

    .product-name {
        font-size: 1.9rem;
        font-weight: bold;
        /* حذف margin-top و کاهش margin-bottom */
        margin:0 8px 25px 8px!important;
        text-align: center;
        color: white;
        width: calc(100% - 16px);
        font-family: 'B Yekan';
    }

    /* حالت تبلت: هر ردیف 2 باکس */
    @media (min-width: 768px) and (max-width: 1024px) {
        .product-card {
            width: calc(50% - 10px);
        }
        .product-container {
            gap: 15px;
            padding: 15px 20px;
        }
    }

    /* حالت موبایل: هر ردیف 1 باکس */
    @media (max-width: 767px) {
        .product-card {
            width: 100%;
        }
        .product-container {
            padding: 15px 15px;
            gap: 15px;
        }
        .add-to-cart-button {
            padding: 8px 16px;
        }
    }


/* استایل برای انتقال محصولات به سمت بالا و همپوشانی با هیرو سکشن */
 .product-container {
    position: relative;
    margin-top: -80px; 
    z-index: 20;
    background: transparent !important; 
    padding-bottom: 30px;
    
} 
 
/* .product-container {
    background-color: #000000 !important;
} */
/* اضافه کردن سایه و افکت شیشه‌ای برای جذابیت بیشتر */
.product-card {
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(0px);
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* برای نمایشگرهای مختلف */
@media (max-width: 992px) {
    .product-container {
        margin-top: -60px;
    }
}

@media (max-width: 768px) {
    .product-container {
        margin-top: -40px;
    }
    
    .product-card {
        background: rgba(26, 26, 26, 0.98);
    }
}

/* اگر می‌خواهید فقط نیمه‌ی باکس‌ها روی هیرو سکشن بیاید */
/* این استایل جایگزین برای margin-top است */
.product-container.half-overlap {
    margin-top: -120px;
}




        













 .product-description {
        font-size: clamp(0.7rem, 1.5vw, 0.85rem);
        margin: 5px 8px;
        text-align: center;
        color: #666;
    }

    .product-price {
        font-size:1.5rem;
        font-weight: bold;
        margin: 8px 0;
        color: #d4af37;
    }
   /* .product-price:hover{
          transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(212, 175, 55, 0.5)!important;
    }*/

    .add-to-cart-button {
        padding: 8px 32px;
        /* background-color: orange; */
        background: linear-gradient(135deg, #d4af37, #b8960c);
        border: none;
        border-radius: 5px;
        color: white;
        font-size: 1.4rem;
        cursor: pointer;
        margin: 5px 10px 10px 10px;
        transition: background-color 0.2s;
        font-weight: 800;
        font-family: 'B Yekan';
    }


    .original-price {
        text-decoration: line-through;
        color: lightgray;
        font-size: 0.8em;
        margin-left: 5px;
    }

    .discount-price {
        color: #d4af37;
        font-size: 1.1em;
        font-weight: bold;
    }
  




















/* =============================================
   استایل بخش مزایا (Features) - هماهنگ با بخش محصولات
   ============================================= */

/* کانتینر اصلی بخش مزایا - هماهنگ با product-container */
.custom-features-wrapper {
    max-width: 1350px; /* اضافه شد - مثل product-container */
    width: 100%;
    margin: 20px auto 40px; /* auto برای مرکزچین شدن */
    /* padding: 20px 70px; تنظیم شده مثل product-container */
    background-color: transparent;
    direction: rtl;
    font-family: 'B Yekan', 'Tahoma', sans-serif;
    box-sizing: border-box;
}

/* عنوان اصلی بخش */
.custom-section-title {
    text-align: center;
    margin-bottom: 50px; /* کمی بیشتر برای فاصله بهتر */
}

.custom-section-title h2 {
    font-size: 2rem;
    font-weight: bold;
    color: #d4af37;
    text-shadow: 0 0 5px rgba(212, 175, 55, 0.3);
    letter-spacing: 1px;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

.custom-section-title h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%);
    width: 80px; /* پهنای خط زیر عنوان */
    height: 3px;
    background: linear-gradient(90deg, #d4af37, #b8960c);
    border-radius: 2px;
}

/* شبکه اصلی ویژگی‌ها - بدون border و border-radius بیرونی */
.custom-features-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    background-color: transparent; /* حذف پس زمینه مشکی اضافی */
    /* border و border-radius حذف شد تا مثل کارت‌های محصول باشد */
}

/* هر آیتم - درشت‌تر و هماهنگ با کارت‌های محصول */
.custom-feature-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 18px; /* فاصله بیشتر */
    padding: 30px 20px; /* پدینگ بیشتر برای درشت‌تر شدن */
    background-color: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(0px);
    border: 1px solid rgba(212, 175, 55, 0.3); /* حاشیه مثل کارت‌های محصول */
    border-left: 1px solid rgba(212, 175, 55, 0.25);
    transition: all 0.3s ease;
    position: relative;
   
}

/* حذف حاشیه سمت چپ آخرین آیتم */
.custom-feature-item:last-child {
    border-left: 1px solid rgba(212, 175, 55, 0.3); /* برگرداندن حاشیه برای هماهنگی */
    /* برای حذف خط عمودی بین آیتم‌ها در موبایل از مدیا استفاده می‌کنیم */
}

/* افکت هاور - مثل کارت محصول */
.custom-feature-item:hover {
    transform: translateY(-5px); /* مثل product-card */
    background-color: #111111;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.custom-feature-item:hover .custom-feature-icon {
    transform: scale(1.1);
    color: #fff;
    text-shadow: 0 0 8px #d4af37;
}

/* آیکون طلایی - درشت‌تر */
.custom-feature-icon {
    width: 56px; /* بزرگتر */
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 45px; /* آیکون درشت‌تر */
    color: #d4af37;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

/* محتوای متن - درشت‌تر */
.custom-feature-content h3 {
    font-size: 1.9rem; /* بزرگتر */
    font-weight: bold;
    margin: 0 0 8px;
    color: #ffffff;
}

.custom-feature-content p {
    font-size: 1.5rem; /* بزرگتر */
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    line-height: 1.5;
}

/* ========== ریسپانسیو ========== */

/* تبلت (حداکثر 1024px) */
@media (max-width: 1024px) {
    .custom-features-wrapper {
        max-width: 100%; /* در تبلت تمام عرض */
        padding: 15px 40px; /* هماهنگ با product-container در تبلت */
    }
    
    .custom-features-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px; /* فاصله بین آیتم‌ها در تبلت */
    }
    
    /* حذف حاشیه عمودی در حالت grid با gap */
    .custom-feature-item {
        border: 1px solid rgba(212, 175, 55, 0.3);
        border-radius: 8px; /* اضافه شدن گوشه گرد مثل کارت محصول */
        padding: 20px 15px;
    }
    
    /* حذف خطوط عمودی اضافی */
    .custom-feature-item {
        border-left: 1px solid rgba(212, 175, 55, 0.3);
    }
    
    .custom-feature-icon {
        width: 48px;
        font-size: 28px;
    }
    
    .custom-feature-content h3 {
        font-size: 1.1rem;
    }
}

/* موبایل (حداکثر 768px) */
@media (max-width: 768px) {
    .custom-features-wrapper {
        max-width: 100%; /* در موبایل تمام عرض */
        padding: 15px 20px; /* هماهنگ با product-container در موبایل */
        margin: 40px auto;
    }
    
    .custom-features-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .custom-feature-item {
        border: 1px solid rgba(212, 175, 55, 0.3);
        border-radius: 8px;
        padding: 16px 20px;
    }
    
    /* حذف تمام خطوط عمودی و افقی اضافی در موبایل */
    .custom-feature-item {
        border-left: 1px solid rgba(212, 175, 55, 0.3);
    }
    
    .custom-feature-item:last-child {
        border-left: 1px solid rgba(212, 175, 55, 0.3);
    }
    
    .custom-feature-icon {
        width: 44px;
        font-size: 26px;
    }
    
    .custom-feature-content h3 {
        font-size: 1rem;
    }
    
    .custom-feature-content p {
        font-size: 0.8rem;
    }
    
    .custom-section-title h2 {
        font-size: 1.5rem;
    }
    
    .custom-section-title {
        margin-bottom: 35px;
    }
}

/* نکته ریسپانسیو نمایشی */
.custom-response-note {
    text-align: center;
    margin-top: 35px;
    font-size: 0.8rem;
    color: rgba(212, 175, 55, 0.5);
    direction: rtl;
}

.custom-response-note i {
    margin: 0 5px;
}































/* =============== بنر کوهستان - ارتفاع کمتر + نمایش کامل آدم =============== */
section {
    /* background-attachment: fixed; */
}

.mountain-hero-banner {
    position: relative;
    width: 100%;
    /* min-height: 380px;           ارتفاع کمتر شد */
    max-height: 230px;
    background-image: url('../images/images1/d1.jpg');
    background-size: cover;
    background-position: center 35%;   /* آدم بهتر دیده بشه */
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    margin:20px auto 0 auto; /* تغییر: برای مرکز کردن سکشن و محدود کردن عرض */
    overflow: hidden;
    /* اضافه شده: محدود کردن عرض کل سکشن */
    max-width: 1280px; /* می‌توانید این عدد را تغییر دهید */
    border-radius: 8px; /* اختیاری: برای زیبایی بیشتر */
}

.mountain-hero-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.25),
        rgba(46, 37, 87, 0.65) 60%,
        rgba(0,0,0,0.85)
    );
    z-index: 1;
}

.hero-content-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: 1100px;
    padding: 0 20px;
    width: 100%;
}

.hero-text-content {
    flex: 1;
    color: white;
}

.mountain-hero-banner h2 {
    font-size: 2.8rem;
    font-weight: bold;
    margin-bottom: 12px;
    text-shadow: 0 3px 12px rgba(0,0,0,0.85);
    line-height: 1.2;
    color: #000000;
}

.mountain-hero-banner p {
    color: #000000;
    font-size: 1.8rem;
    margin-bottom: 8px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
    line-height: 1.4;
    font-weight: 500;
}

/* =============== استایل‌های جدید برای درخواست شما =============== */
/* پس زمینه رنگی برای زیر متن */
.highlighted-text {
    display: inline-block; /* اندازه背景 به اندازه متن باشد */
    background-color: rgba(0, 0, 0, 0.7); /* یک پس زمینه تیره و نیمه شفاف - می‌توانید رنگ دلخواه خود را بگذارید */
    padding: 5px 15px;
    border-radius: 8px; /* برای گوشه‌های گرد */
    margin-top: 5px;
    /* اگر می‌خواهید کل عرض را بگیرد، از دستور زیر استفاده کنید */
    /* display: block; */
    /* text-align: center; */
}

/* رنگ کردن عدد 3 */
.highlight-number {
    color: #d4af37; /* رنگ قرمز برای عدد 3 */
    font-size: inherit; /* اندازه فونت به ارث می‌برد */
    font-weight: bold;
    /* background-color: rgba(255, 255, 255, 0.8); یک پس زمینه سفید برای برجسته‌تر شدن عدد */
    padding: 0 5px;
    border-radius: 10px;
    display: inline-block;
}
/* =============== پایان استایل‌های جدید =============== */

.wa-column {
    flex-shrink: 0;
}

/* .wa-hero-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #25D366, #1EBE5B);
    color: white;
    padding: 18px 32px;
    border-radius: 16px;
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.45);
    transition: all 0.3s ease;
    min-width: 160px;
    text-align: center;
} */
.wa-hero-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #25D366, #1EBE5B);
    color: white;
    padding: 18px 18px;
    border-radius: 16px;
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.45);
    transition: all 0.3s ease;
    /* min-width: 160px; */
    text-align: center;
}
.wa-hero-btn i {
    font-size: 6rem;
}
.wa-hero-btn:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(37, 211, 102, 0.55);
}

/* ریسپانسیو */
@media (max-width: 992px) {
    .mountain-hero-banner {
        min-height: 360px;
        background-position: center 30%;
        max-width: 95%; /* در موبایل عرض کمی بیشتر شود */
    }
    .hero-content-wrapper {
        flex-direction: column;
        gap: 25px;
        text-align: center;
    }
    .mountain-hero-banner h2 {
        font-size: 1.85rem;
    }
}

@media (max-width: 768px) {
    .mountain-hero-banner {
        min-height: 340px;
        margin: 40px auto 0 auto;
        max-width: 98%;
    }
    .mountain-hero-banner h2 {
        font-size: 1.65rem;
    }
    .wa-hero-btn {
        padding: 16px 28px;
        min-width: 140px;
    }
    /* تنظیمات موبایل برای پس زمینه جدید */
    .highlighted-text {
        padding: 3px 10px;
    }
    .highlight-number {
        padding: 0 3px;
    }
}





















/* افزایش عرض کانتینر و حاشیه‌های کناری */
.recent-news-container {
    max-width: 1750px;
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 40px;
}

/* تنظیم فاصله بین باکس‌ها */
.recent-news-container .owl-carousel .img-hover {
    margin: 0 8px;
}

/* تنظیم responsive برای موبایل */
@media (max-width: 768px) {
    .recent-news-container {
          max-width: 1750px;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .recent-news-container .owl-carousel .img-hover {
        margin: 0 4px;
    }
}

/* تنظیم responsive برای تبلت */
@media (min-width: 769px) and (max-width: 1024px) {
    .recent-news-container {
        padding-left: 25px;
        padding-right: 25px;
    }
}
/* .owl-carousel.owl-padding-10 .owl-item {
    padding: unset!important; 
} */
.owl-carousel .owl-item img {
    display: block;
    width: 100%;
    /* padding: 1rem; */
    margin: 0;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
}
.owl-carousel.owl-padding-10 .owl-item {
    padding: 0 10px;
}
.owl-theme .owl-controls .owl-buttons div {
    color: #121212;
    background: unset!important;
    border: #c19d23 1px solid;
    opacity: 1;
    filter: Alpha(Opacity=100);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}









.footer-title::after {
    content: "";
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 40px;
    height: 3px;
    background: linear-gradient(135deg, #d4af37, #b8960c);
}

h6 {
    font-size: 12px;
    letter-spacing: normal;
    margin: 0 0 0px 0;
}



















/* =============================================
   استایل دکمه تغییر تم (ماه و ستاره)
   ============================================= */
.theme-toggle-btn {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #d4af37;
    border-radius: 50px;
    color: #d4af37;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    backdrop-filter: blur(4px);
}

.theme-toggle-btn:hover {
    background: #d4af37;
    color: #000;
    transform: scale(1.05);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
}

/* =============================================
   حالت روشن (لایت مود)
   ============================================= */

body.light-mode {
    background-color: #f5f5f5 !important;
}

body.light-mode #wrapper {
    background-color: #f5f5f5;
}

/* ---------- فوتر در حالت روشن مشکی می‌مونه (دست نخورده) ---------- */
body.light-mode #footer,
body.light-mode .custom-footer {
    background: rgba(26, 26, 26, 0.95) !important;
    background-image: none !important;
}

/* ---------- سکشن اول (hero) در حالت روشن تغییر نمی‌کنه ---------- */
body.light-mode .hero-section::before {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: brightness(0.85) !important;
}

body.light-mode .hero-title,
body.light-mode .hero-description,
body.light-mode .hero-label {
    color: inherit !important;
}

body.light-mode .hero-title .highlight {
    background: linear-gradient(135deg, #d4af37, #f5e7a3) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

/* ---------- متن واتساپ سفید می‌مونه (دست نخورده) ---------- */
body.light-mode .highlighted-text p,
body.light-mode .highlighted-text p span {
    color: white !important;
}

/* ---------- باکس‌های محصول در حالت روشن ---------- */
    body.light-mode .product-card {
        background-color: #ffffff !important;
        border: 2px solid rgba(212, 175, 55, 0.6) !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    }

body.light-mode .product-name {
    color: #1a1a1a !important;
}

body.light-mode .product-price {
    color: #d4af37 !important;
}

body.light-mode .add-to-cart-button {
    background: linear-gradient(135deg, #d4af37, #b8960c);
    color: #1a1a1a;
    font-weight: bold;
}

/* ---------- باکس‌های مزایا در حالت روشن ---------- */
body.light-mode .custom-feature-item {
    background-color: #ffffff !important;
    border: 1px solid rgba(212, 175, 55, 0.6);
}

body.light-mode .custom-feature-content h3 {
    color: #1a1a1a !important;
}

body.light-mode .custom-feature-content p {
    color: #555555 !important;
}

body.light-mode .custom-feature-icon {
    color: #d4af37 !important;
}

/* ---------- باکس‌های مقالات در حالت روشن ---------- */
body.light-mode .img-hover {
    background-color: #ffffff !important;
    border: 1px solid rgba(212, 175, 55, 0.6) !important;
}

body.light-mode .img-hover h4 a {
    color: #1a1a1a !important;
}

/* ---------- هدر و منو در حالت روشن ---------- */
body.light-mode #header,
body.light-mode #topNav,
body.light-mode .nav-main-collapse,
body.light-mode #topMain.nav-pills > li > a {
    background: #ffffff !important;
}

body.light-mode #topMain.nav-pills > li > a {
    color: #1a1a1a !important;
}

body.light-mode #topMain.nav-pills > li > a:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

body.light-mode .dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #ddd !important;
}

body.light-mode .dropdown-menu > li > a {
    color: #1a1a1a !important;
}

/* ---------- دکمه ورود در حالت روشن ---------- */
body.light-mode .auth-state:not(.logged) .btn-primary,
body.light-mode .auth-state .btn-primary {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    border-color: #d4af37 !important;
}

/* ---------- آیکون سبد خرید در حالت روشن: مشکی با border زرد ---------- */
body.light-mode .quick-cart > a {
    color: #000000 !important;
}

body.light-mode .quick-cart > a .badge {
    background: linear-gradient(135deg, #d4af37, #b8960c) !important;
    color: #000000 !important;
}

body.light-mode .quick-cart > a:hover {
    color: #d4af37 !important;
}

/* ---------- هامبرگر منو در حالت روشن مشکی ---------- */
body.light-mode .btn-mobile,
body.light-mode .btn-mobile:hover,
body.light-mode .btn-mobile:focus {
    background-color: #000000 !important;
    border-color: #d4af37 !important;
    color: #ffffff !important;
}

body.light-mode .btn-mobile .fa-bars {
    color: #ffffff !important;
}

/* ---------- تیترها ---------- */
body.light-mode div[style*="text-align: center;"] h2 {
    color: #1a1a1a !important;
}

/* ---------- بنر کوهستان در حالت روشن (متن سفید بمونه) ---------- */
body.light-mode .mountain-hero-banner h2,
body.light-mode .mountain-hero-banner p {
    color: #000000 !important;
}

body.light-mode .hero-text-content p {
    color: #000000 !important;
}

body.light-mode .highlighted-text {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

/* ---------- رنگ‌های طلایی در هر دو حالت حفظ بشه ---------- */
body.light-mode .blue-icon,
body.light-mode .contact-icon,
body.light-mode .highlight-number,
body.light-mode .product-price,
body.light-mode .custom-feature-icon,
body.light-mode .theme-toggle-btn {
    color: #d4af37 !important;
}

body.light-mode .btn-primary-gold,
body.light-mode .newsletter-button {
    background: linear-gradient(135deg, #d4af37, #b8960c) !important;
    color: #1a1a1a;
}

/* ---------- اصلاح راستای آیکون‌ها در موبایل ---------- */
@media (max-width: 768px) {
    .pull-right.nav.nav-pills.nav-second-main {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
    }
    
    .theme-switch-container {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .theme-toggle-btn {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    
    .auth-container {
        margin-left: 5px !important;
    }
    
    .quick-cart {
        margin-left: 5px !important;
    }
}

/* ---------- اصلاح راستای آیکون‌ها در دسکتاپ ---------- */
@media (min-width: 769px) {
    .pull-right.nav.nav-pills.nav-second-main {
        gap: 12px !important;
    }
}

/* =============================================
   رفع مشکل راستای لوگو و آیکون‌ها در موبایل
   ============================================= */

@media (max-width: 768px) {
    /* تنظیم هدر برای موبایل */
    #topNav .container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        position: relative;
        padding: 10px 15px;
    }
    
    /* لوگو در سمت راست (چون RTL هستیم) */
    #topNav .logo {
        order: 1;
        margin: 0;
        padding: 0;
        max-width: 120px;
    }
    
    #topNav .logo img {
        max-height: 45px;
        width: auto;
    }
    
    /* دکمه هامبرگر در سمت چپ */
    .btn-mobile {
        order: 0;
        margin: 0;
        padding: 8px 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* دکمه‌های سمت راست (ماه و ستاره، ورود، سبد خرید) */
    .pull-right.nav.nav-pills.nav-second-main {
        order: 2;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 5px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* کاهش سایز آیکون ماه و ستاره */
    .theme-toggle-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }
    
    /* کاهش سایز دکمه ورود */
    .auth-container .btn-primary.btn-sm {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
    
    .auth-container .btn-primary.btn-sm i {
        font-size: 12px !important;
    }
    
    /* کاهش سایز آیکون سبد خرید */
    .quick-cart > a {
        font-size: 18px !important;
        padding: 5px !important;
    }
    
    .quick-cart .badge {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }
    
    /* مخفی کردن موقت متن داخل دکمه ورود در موبایل (فقط آیکون نمایش داده بشه) */
    .auth-container .btn-primary.btn-sm span {
        display: none;
    }
    
    .auth-container .btn-primary.btn-sm i {
        margin: 0;
        font-size: 16px;
    }
    
    /* اطمینان از هم‌راستا بودن همه چیز */
    #topNav .navbar-collapse {
        order: 3;
        width: 100%;
        margin-top: 10px;
    }
}

/* تنظیم برای موبایل‌های خیلی کوچک (حداکثر 480px) */
@media (max-width: 480px) {
    #topNav .logo {
        max-width: 100px;
    }
    
    #topNav .logo img {
        max-height: 38px;
    }
    
    .theme-toggle-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }
    
    .quick-cart > a {
        font-size: 16px !important;
    }
    
    .btn-mobile {
        padding: 6px 10px !important;
    }
    
    .btn-mobile .fa-bars {
        font-size: 18px !important;
    }
}

/* تنظیم برای تبلت (بین 768px و 992px) */
@media (min-width: 769px) and (max-width: 992px) {
    .pull-right.nav.nav-pills.nav-second-main {
        gap: 8px !important;
    }
    
    .theme-toggle-btn {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }
}/* =============================================
   هامبرگر منو در حالت روشن (مشکی)
   ============================================= */

body.light-mode .btn-mobile {
    background-color: #000000 !important;
    border: 1px solid #d4af37 !important;
}

body.light-mode .btn-mobile .fa-bars {
    color: #ffffff !important;
}

body.light-mode .btn-mobile:hover,
body.light-mode .btn-mobile:focus {
    background-color: #1a1a1a !important;
    border-color: #d4af37 !important;
}



/* ثابت نگه داشتن رنگ سفید متن واتساپ در حالت روشن */
body.light-mode .hero-text-content .highlighted-text p,
body.light-mode .hero-text-content .highlighted-text p span,
body.light-mode .highlighted-text p,
body.light-mode .highlighted-text p span {
    color: #ffffff !important;
}

body.light-mode#header ul.nav-second-main li i {
   color: red;
}