

@media (min-width: 2550px) {
    .fs-xfxl {
        font-size: 2.5rem !important;
    }
    .fs-xfxl-mid {
        font-size: 1.5rem !important;
    }
    .margin-xfxl {
        margin-top: 50px !important;
    }
}

@media (min-width:1200px) {
        .banner-home {
        height: 400px !important;
    }
    
}

@media (min-width: 768px) and (max-width: 800px)   {
    .for-decktop-banner{
        height: 500px;
    }
}


@media (min-width: 426px) and (max-width: 768px)  {
    .mega-menu__content {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .banner-home {
        height: 180px !important;
    }
    
}

/* ────────────────────────────────
   فقط موبایل خیلی کوچک
───────────────────────────────── */
@media (min-width: 320px) and (max-width: 426px) {

    .mega-menu__content {
        display: flex;
        flex-direction: column;
        gap: 28px;              
    }

    .mega-section {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .banner-home {
        height: 180px !important;
    }
    

    .mega-menu__title {
        font-size: 1.15rem;
        margin: 0;
        padding-right: 12px;
        border-right: 3px solid var(--gold);
        color: var(--gold);
    }

    .mega-section__cards {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 10px;          /* فاصله بین دو کارت */
    }

    .mega-card {
        flex: 1 1 calc(50% - 5px);   /* تقریباً نصف - کمی فاصله */
        max-width: calc(50% - 5px);
        min-width: 140px;            /* جلوگیری از خیلی کوچک شدن */
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 8px;
        background: linear-gradient(145deg, #f8f9fa, #e9ecef 50%, #f1f3f5);   
          border: 1px solid rgba(220, 220, 230, 0.6);          
          border-radius: 12px;                      
          box-shadow: 
            inset 0 2px 8px rgba(255, 255, 255, 0.7),                            
            inset 0 -2px 6px rgba(180, 180, 200, 0.15),             
            0 8px 24px rgba(0, 0, 0, 0.08),                     
            0 2px 6px rgba(240, 240, 255, 0.4);               
          position: relative;
          overflow: hidden;
          transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    }

    .mega-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.35) 45%,
    rgba(200, 220, 255, 0.15) 55%,   /* کمی آبی-بنفش ملایم برای iridescent */
    rgba(255, 255, 255, 0) 70%
  );
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transform: translateX(-20%) translateY(-20%) rotate(15deg);
}

.mega-card:hover::before {
  opacity: 0.9;
  transform: translateX(10%) translateY(10%) rotate(15deg);
}

.mega-card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 
    inset 0 3px 12px rgba(255, 255, 255, 0.85),
    0 20px 40px rgba(0, 0, 0, 0.12),
    0 6px 16px rgba(200, 220, 255, 0.25);  /* هاله کمی آبی برای درخشش بیشتر */
}

    .mega-card__image img {
        width: 100%;
        height: 110px;               /* کوچکتر برای صفحه باریک */
        object-fit: cover;
        border-radius: 5px;
    }

    .mega-card__title {
        font-size: 0.84rem;
        padding: 4px 8px;
    }

    .mega-card__btn {
        font-size: 0.74rem;
        padding: 5px 12px;
        margin-top: 2px;
    }


}
