.textTabber-outter {
  padding: 100px 20px;
  background-image: linear-gradient(170deg, #012B7F, #075E9F, #12BFDC);background-image: linear-gradient(170deg, #012B7F, #075E9F, #12BFDC);
}
.textTabber-inner {
  max-width: 1280px;
  margin: 0 auto;
  color: #fff;
}
.textTabber-inner h2 { 
  font-size: 48px;
  font-weight: normal;
  color: #fff;
  margin-bottom: 80px;
}
.tab-module {
  display: grid;
  /* Adjust this ratio to fit your design (e.g., 1fr 1fr for 50/50 split) */
  grid-template-columns: 1fr 2fr; 
  gap: 2rem;
  max-width: 1280px;
  margin: 0 auto;
  align-items: start; /* Prevents buttons from stretching vertically */
}

.tab-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 30px 0 50px;
}

.tab-btn {
  padding: 12px 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #fff;
  border-radius: 30px;
  text-align: left;
  display:flex;
  align-items: center;
  gap: 20px;
  text-transform: capitalize;
}

/* Styling the active state */
.tab-btn.active {
  background: rgba(255,255,255,0.1);
  border-radius: 30px;
  color: #fff;
}

.tab-btn:hover:not(.active) {
  background: rgba(255,255,255,0.3);
  border-radius: 30px;
  color: #fff;
}

.tab-panel {
  display: none; /* Hide all panels by default */
}

.tab-panel.active {
  display: block; /* Only show the active one */
  /* Optional: Add a quick fade-in effect */
  animation: fadeIn 1.5s ease; 
}

.tab-panel img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  opacity: 0;
  transition: 0.7s;
}
.tab-panel.active img {
  opacity: 1;
  transition> 0.7s;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Mobile fallback */
@media (max-width: 768px) {
  .tab-module {
    grid-template-columns: 1fr; /* Stack them */
  }
}