/* Critical styles first */
body { 
    font-family: 'Figtree', sans-serif;
    background-color: #161616;
    color: #f3f4f6;
    font-display: swap;
}

/* Scrollbar hiding utility */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.italic-text {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-display: swap;
}

/* Optimized interactive elements */
.gradient-card {
    background: linear-gradient(135deg, #07efce 0%, #06d9b9 100%);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    transition: transform 0.2s ease;
    will-change: transform;
}

.feature-card {
    background: #1a1a1a;
    color: #f3f4f6;
    transition: transform 0.2s ease;
    will-change: transform;
}

.feature-card:hover,
.gradient-card:hover {
    transform: translateY(-3px);
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.hover-glow:hover {
    box-shadow: 0 0 15px rgba(7, 239, 206, 0.3);
}

.highlight-section {
    background: #161616;
}

@media (max-width: 768px) {
    /* Navigation container */
    .w-full.flex.flex-wrap.justify-between.items-center.mb-24 {
      flex-direction: column;
      align-items: center;
      margin-bottom: 2rem;
    }
    
    /* Logo */
    .w-full.flex.flex-wrap.justify-between.items-center.mb-24 > div:first-child {
      margin-bottom: 2rem;
      align-self: flex-start;
    }
    
    /* Button container - keep horizontal */
    .w-full.flex.flex-wrap.justify-between.items-center.mb-24 .flex.gap-3 {
      justify-content: center;
      width: 100%;
      gap: 0.5rem !important;
    }
    
    /* Individual buttons - smaller on mobile */
    .w-full.flex.flex-wrap.justify-between.items-center.mb-24 .flex.gap-3 a {
      font-size: 0.75rem;
      padding: 0.5rem 0.75rem;
      flex: 1;
      text-align: center;
    }
  }
  
  /* For very small screens - adjust text size further */
  @media (max-width: 375px) {
    .w-full.flex.flex-wrap.justify-between.items-center.mb-24 .flex.gap-3 a {
      font-size: 0.7rem;
      padding: 0.5rem 0.5rem;
    }
  }

/* Fix case studies scroll behavior */
.touch-pan-x {
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.touch-pan-x::-webkit-scrollbar {
    display: none;
}

.case-studies-container {
    align-items: flex-start;
}

.case-study-card {
    min-height: 420px;
    transition: none !important;
    transform: none !important;
}

.case-study-card:hover {
    transform: none !important;
}

/* Prevent vertical scroll issues */
.overflow-y-hidden {
    overflow-y: hidden !important;
}