/* 🔸 Responsive Grid */
@media (max-width: 992px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: 1fr; }
}

/* 🔸 Responsive Tabs */
@media (max-width: 768px) {
  .it-tabs {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .it-tabs h3 {
    order: -1;
    margin-bottom: 0;
    width: 100%;
  }

  .it-tabs .d-flex {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .it-tabs .d-flex select,
  .it-tabs .d-flex input,
  .it-tabs .d-flex button {
    flex: 1;
    width: 100%;
  }

  .it-tabs .d-flex select {
    max-width: 40%;
  }

  .it-tabs .d-flex button {
    max-width: 30%;
    white-space: nowrap;
  }
}

/* 🔸 Responsive Layout Rules */
@media (min-width: 992px) {
  .mobile-header,
  .side-menu,
  .menu-overlay {
    display: none !important;
  }
}

@media (max-width: 991px) {
  .desktop-header { display: none !important; }
}

/* 🔸 Responsive Cover & Avatar */
@media (max-width: 576px) {
  .cover-wrapper {
    aspect-ratio: 16 / 9;
    border-radius: 0;
  }

  .avatar-image {
    width: 170px;
    height: 170px;
  }

  .cardish {
    border-radius: 0 !important;
  }
}



/* ============================================================
   RESPONSIVE site
   ============================================================ */
@media (max-width: 992px) {
  .navbar-collapse { display: none !important; }
  
  
    .card,
  .analytics-card .card,
  .account-settings-card {
    padding: 20px !important;
 
  }
  
  .col-lg-6 {
    padding: 0px 5px !important;
}
  
.preview .grid-icons {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px 5px !important;
    justify-content: center !important;  /* centers entire grid */
    justify-items: center !important;     /* centers each icon */
    align-items: center !important;
    text-align: center;
  }

  .preview .grid-icons > * {
    width: 64px !important;
    height: 64px !important;
  }

  .preview .icon-label {
    font-size: 12px !important;
  }
  
  
}




@media (min-width: 992px) {
  .mobile-menu, .mobile-overlay { display: none; }
}
@media (max-width: 992px) {
  .navbar .btn.btn-warning {
    font-size: 0.85rem;
    padding: 6px 12px;
    border-radius: 50px;
    transition: all 0.3s ease;
  }
  .navbar .btn.btn-warning:hover {
    background: #ffe27a !important;
    color: #000 !important;
    transform: translateY(-1px);
  }
  .hero-text { margin-top: -23% !important; }
  .hero-image { width: 30% !important; }
}
@media (max-width: 576px) {
  .main-footer {
    padding: 22px 8px;
    font-size: 0.85rem;
  }
}



/* ===============================
   📱 Responsive - Company Profile
   =============================== */
@media (max-width: 576px) {
  .cover-wrapper {
    aspect-ratio: 16 / 9;
    border-radius: 0;
  }

  .avatar-image {
    width: 130px;
    height: 130px;
  }
}

@media (max-width: 576px) {
  .avatar-image {
    width: 170px;
    height: 170px;
  }

  .grid-icons {
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 16px;
  }
}