/* Reset container background to dark theme */
/*.collab-section {
  background-color: #0b0813;/* Dark background matching the image */
  /*padding: 80px 24px;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
}

.collab-container {
  width: 100%;
  max-width: 1300px;
  text-align: center;
}

/* Heading Typography */
/*.collab-title {
  color: #ffffff;
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 50px;
  letter-spacing: -0.5px;
}-->

/* The Grid Layout: Sets 6 boxes side-by-side */
/*.collab-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6 Columns across */
  /*gap: 24px; /* Clean spacing gaps */
/*}

/* Individual Square Box Layout */
/*.collab-card {
  background-color: #21192e; /* Exact purple-tint base card fill color */
 /* border-radius: 4px;
  aspect-ratio: 1 / 1; /* Forces exact square box shapes like the image */
  /*display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  transition: transform 0.2s ease;
}

.collab-card:hover {
  transform: scale(1.02); /* Subtle pop animation on cursor hover */
/*}

/* Image constraints within the purple squares */
/*.collab-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* Ensures logos don't stretch or warp distortion */
/*}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE QUERIES
   ========================================================================== */

/* Tablets (Converts to 3 columns) */
/*@media (max-width: 992px) {
  .collab-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .collab-title {
    font-size: 2.2rem;
  }
}

/* Smart Phones (Converts to a balanced 2 columns layout) */
/*@media (max-width: 576px) {
  .collab-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .collab-title {
    font-size: 1.8rem;
    margin-bottom: 30px;
  }
  .collab-card {
    padding: 16px;
  }
}-->

/* Green Heading Style matching your image */
.why-choose-title {
  color: #40e2e7; /* Vibrant mint neon green from the image */
  font-size: 3.5rem; /* Large and bold for desktop layouts */
  font-weight: 900;
  text-align: center;
  margin-bottom: 40px;
  font-family: 'Arial Black', Gadget, sans-serif; /* Heavy-set font look */
  letter-spacing: -0.5px;
}
/* Section Container Background */
.features-section {
  background-color: #0b0813; /* Deep dark purple-black theme */
  padding: 80px 24px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  display: flex;
  justify-content: center;
}

.features-container {
  width: 100%;
  max-width: 1200px;
}

/* 3-Column Responsive Grid Layout (Desktop Default) */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 30px; 
}

/* Individual Feature Card Design */
.feature-card {
  background: linear-gradient(180deg, #d0a7eb 0%, #422953 100%); /* Subtle purple gradient */
  border: 1px solid #201f22; /* Neon purple border outline */
  border-radius: 8px;
  padding: 40px 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(195, 189, 206, 0.3); /* Purple neon glow on hover */
}

/* Vector Graphic Icons */
.feature-icon-wrapper {
  width: 60px;
  height: 60px;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Card Titles */
.feature-title {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 15px 0;
}

/* Card Descriptions */
.feature-desc {
  color: #cecdd1; /* Soft muted gray/purple font color */
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE QUERIES (Phone-Based System)
   ========================================================================== */
/* Phone-Based Responsive Rule */
@media (max-width: 768px) {
  .why-choose-title {
    font-size: 2.2rem; /* Automatically shrinks on smartphones to fit the screen width */
    margin-bottom: 25px;
  }
}
/* Tablets / Medium Screens */
@media (max-width: 992px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr); /* Switches cleanly to 2 rows */
    gap: 20px;
  }
}

/* Smartphones / Portrait Phone View */
@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr; /* Drops into a perfect 1-column stack layout */
    gap: 20px;
  }
  .features-section {
    padding: 50px 16px; /* Tightens outer margins to save screen space */
  }
  .feature-card {
    padding: 30px 20px; /* Makes boxes slimmer for phone displays */
  }
  .feature-title {
    font-size: 1.35rem; /* Slightly resizes font dynamically */
  }
}
.transparent-icon {
  mix-blend-mode: multiply;
  
  /* Optional: increases the icon color contrast if it looks too light */
  filter: contrast(1.2); 
}