/* ===============================================
   SUPPORT PAGE CUSTOM STYLES
   =============================================== */

/* Support Image Styles */
.support-image-container {
  position: relative;
}

.support-main-image {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.support-main-image:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2) !important;
}

/* Feature Items */
.support-features .feature-item {
  transition: transform 0.2s ease;
}

.support-features .feature-item:hover {
  transform: translateX(10px);
}

.support-features .feature-icon {
  flex-shrink: 0;
}

.support-features h5 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

/* Support Cards Hover Effect */
.hover-shadow {
  transition: all 0.3s ease;
}

.hover-shadow:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
}

/* Icon Blocks */
.icon-block {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(69, 207, 144, 0.1);
  border-radius: 50%;
}

.icon-block-lg {
  width: 90px;
  height: 90px;
}

/* Support Categories Cards */
.support-categories .card {
  transition: all 0.3s ease;
}

.support-categories .card:hover {
  border-color: var(--bs-primary) !important;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
  .support-main-image {
    margin-top: 2rem;
  }

  .support-features .feature-item {
    margin-bottom: 2rem !important;
  }
}

@media (max-width: 768px) {
  .icon-block,
  .icon-block-lg {
    width: 70px;
    height: 70px;
  }

  .support-features h5 {
    font-size: 1.1rem;
  }
}

/* Pulled Up Section Adjustments */
.pulled-up-section {
  margin-top: -120px;
  position: relative;
  z-index: 10;
}

/* Background Color Helper */
.bg-gray-100 {
  background-color: #f8f9fa;
}

/* Animation for cards */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  animation: fadeInUp 0.6s ease-out;
}