.btnTabber-outter {
  padding: 100px 20px;
  background-image: linear-gradient(180deg, #012B7F, #12BFDC);
}
.btnTabber-inner {
  max-width: 1280px;
  margin: 0 auto;
  color: #fff;
}
.btnTabber-inner h2 { 
  font-size: 48px;
  font-weight: normal;
  color: #fff;
}
.btnTabber-sub {
  max-width: 920px;
}
.btab-module {
  max-width: 1280px;
  margin: 0 auto;
}
/*
.btab-list {
  display: flex;
  flex-direction: row;
  gap: 0;
  width: 100%;
  height: 50px;
  border-radius: 25px;
  overflow: hidden;
  background: #D0F2F8;
  margin-top: 50px;
}

.btab-btn {
flex-grow: 1;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #012B7F;
  text-align: center;
  border-radius: 0;
}
.btab-btn:not(:last-child) { border-right: 3px solid #012B7F; }

/* Styling the active state
.btab-btn.active {
  background: #12BFDC;
  color: #012B7F;
  border-radius: 0;
}

.btab-btn:hover:not(.active) {
  background: rgba(255,255,255,0.5);
  color: #012B7F;
  border-radius: 0;
}
*/

/* 1. The Wrapper (Unchanged) */
.btab-list {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 50px;
  border-radius: 25px;
  overflow: hidden; /* Clips the outer edges perfectly */
  background: #D0F2F8;
  margin-top: 50px;
}

/* 2. The Button Base */
.btab-btn {
  flex-grow: 1;
  position: relative; /* CRITICAL for absolute positioning the arrow */
  cursor: pointer;
  transition: all 0.2s ease;
  color: #012B7F;
  text-align: center;
  border: none; /* Strip out any default borders */
  border-radius: 0;
  text-transform: capitalize;
  
  /* CRITICAL: Explicitly set the base background color 
     so the ::after square has a color to inherit! */
  background-color: #D0F2F8; 
  
  /* Keep text away from the overlapping arrow on the right */
  padding-right: 20px; 
}

/* Remove your old flat right border */
.btab-btn:not(:last-child) { 
  /* We removed border-right: 3px solid #012B7F; from here */
}

/* 3. The Z-Index Ladder (Left buttons must overlap Right buttons) */
/* I've added enough for 6 tabs, which usually covers it */
.btab-btn:nth-child(1) { z-index: 6; }
.btab-btn:nth-child(2) { z-index: 5; }
.btab-btn:nth-child(3) { z-index: 4; }
.btab-btn:nth-child(4) { z-index: 3; }
.btab-btn:nth-child(5) { z-index: 2; }
.btab-btn:nth-child(6) { z-index: 1; }

/* 4. The Rotated Arrow Magic */
.btab-btn:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -19px; /* Pull it exactly halfway past the right edge */
  
  /* To span a 50px height diagonally, a 38px square is perfect */
  width: 38px;
  height: 38px;
  
  /* Automatically matches the button's background color! */
  background-color: inherit; 
  
  /* Center vertically and rotate 45 degrees into a diamond */
  transform: translateY(-50%) rotate(45deg);
  
  /* THIS is where your 3px solid border goes! */
  border-top: 3px solid #012B7F;
  border-right: 3px solid #012B7F;
  
  /* Optional: Soften the sharp tip slightly */
  border-radius: 2px;
  
  /* Ensure the color transition matches the button */
  transition: background-color 0.2s ease;
}

/* 5. Active & Hover States */
.btab-btn.active {
  background-color: #12BFDC;
  color: #012B7F;
}

/* IMPORTANT NOTE ON HOVER: */
.btab-btn:hover:not(.active) {
  /* I changed your rgba(255,255,255,0.5) to a solid light blue. 
     If you use a transparent background, you will see a darker seam 
     where the transparent square overlaps the transparent button! */
  background-color: #E2F8FB; 
  color: #012B7F;
}

.btab-panel {
  margin-top: 50px;
  display: none; /* Hide all panels by default */
}

.btab-panel.active {
  display: block; /* Only show the active one */
  /* Optional: Add a quick fade-in effect */
  
}
.btabContent {
  display:flex;
}
.btabCopy { width: 50%; padding: 20px; }
.btabImg { width: 50%; padding: 20px; }
.btabImg img { width: 100%; height: auto; }



@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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



/* check bullets */
.btabCopy ul {
  list-style: none; /* Kills the default dots */
  padding-left: 0;
  margin: 0;
}

.btabCopy ul li {
  position: relative;
  font-family: 'Raleway', sans-serif;
  font-size: 18px;
  line-height: 1.25; /* Keeps multi-line text readable */
  padding-left: 36px; /* The gap for your image. Adjust if your image is wider */
  margin-bottom: 18px;
}

.btabCopy ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px; /* Tweak this by 1-2px up or down for optical centering with your font */
  width: 22px; /* Set the exact width of your graphic */
  height: 22px; /* Set the exact height of your graphic */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('https://244639277.fs1.hubspotusercontent-na2.net/hubfs/244639277/graphics/tabCheck.png');
}


/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
  
  /* 1. Stack the panel content (Text on top, Image on bottom) */
  .btabContent {
    flex-direction: column;
  }

  .btabCopy, 
  .btabImg {
    width: 100%;
    padding: 20px 0; /* Removes horizontal padding for maximum screen space */
  }

  /* 2. Fix the Tabs: Taller wrapper, perfectly centered text */
  .btab-list {
    height: 65px; /* Gives the text room to breathe or wrap to two lines */
    border-radius: 12px; /* A slightly softer radius looks better on taller mobile blocks */
  }

  .btab-btn {
    display: flex;
    justify-content: center;
    align-items: center; /* This perfectly centers the text vertically! */
    padding: 0 5px; /* Drastically reduces the horizontal squeezing */
    padding-right: 15px; /* Leaves just enough room so text doesn't hit the arrow */
    font-size: 13px; /* Shrinks the font slightly to fit the narrow space */
    line-height: 1.1;
  }

  .btab-btn:last-child {
    padding-right: 5px; /* The last button has no arrow, so we can reclaim that padding! */
  }

  /* 3. The Arrow Math Update: Taller buttons require bigger arrows */
  .btab-btn:not(:last-child)::after {
    width: 48px; 
    height: 48px;
    right: -24px; /* Must always be exactly half of the width/height to center the point */
  }
}  
}