/* 1. Ensure the container stretches both columns */
/* --- THE ULTIMATE FOUNDERS TABS FIX --- */

/* --- THE ULTIMATE FOUNDERS TABS FIX (DESKTOP ONLY) --- */
@media screen and (min-width: 992px) {
  /* 1. Main container: Force left and right columns to match heights */
  .aboutfounders-tabs.large-screen {
    display: flex  ;
    align-items: stretch  ;
  }

  /* 2. Left Column: Set a safe minimum height so the image never crops too tightly */
  .aboutfounders-tabs-menu {
    display: flex  ;
    flex-direction: column  ;
    min-height: 600px  ; 
  }

  /* 3. The Tabs: Tell the active tab to stretch and fill all remaining empty space */
  .aboutfounders-tabs-link {
    height: auto  ;
    flex-shrink: 0;
  }
  .aboutfounders-tabs-link.w--current {
    flex-grow: 1  ; 
    display: flex  ;
    flex-direction: column  ;
    justify-content: flex-start  ; 
  }

  /* 4. Right Column: Strip its ability to dictate the section's height */
  .aboutfounders-tabs-content {
    position: relative  ;
  }

  /* 5. The Pane & Wrapper: Lock them absolutely to the right column's dimensions */
  .aboutfounders-tabs-pane.w--tab-active {
    position: absolute  ;
    inset: 0  ; 
    height: 100%  ;
    width: 100%  ;
    display: block  ;
  }
  .aboutfounders-tabs-content-wrapper {
    height: 100%  ;
    width: 100%  ;
  }

  /* 6. The Image: Cover the new perfectly-sized box */
  .aboutfounder-img {
    height: 100%  ;
    width: 100%  ;
    object-fit: cover  ;
    object-position: top center  ;
  }
}

/* Step up the height for standard large laptops/desktops */
@media screen and (min-width: 1280px) {
  .aboutfounders-tabs-menu {
    min-height: 700px  ; 
  }
}

/* Step up the height again for ultrawide monitors and big iMacs */
@media screen and (min-width: 1440px) {
  .aboutfounders-tabs-menu {
    min-height: 800px  ; 
  }
}


@media screen and (min-width: 992px) {
  /* 1. Turn the wrapper into a horizontal flex container */
.howpricing-grid-wrapper {
    display: flex  ;
    flex-direction: row  ;
    align-items: stretch;
    justify-content: space-between;
    gap: 0px  ; /* Changed from 15px */
  }

  /* 2. Strip Webflow's hardcoded grid positions and make cards equal width */
  .howpricing-grid-wrapper > * {
    grid-area: auto  ;
    flex: 1 1 0  ; 
  }

  /* 3. Crush the wrapper to 0 width, suck the adjacent cards together, and layer it on top */
/* 3. Crush the wrapper to 0 width and make sure it doesn't hide overflowing content */
/* 3. Give the wrapper width to push the outer cards away, acting as a spacer */
  .howpricing-row-icon-div {
    flex: 0 0 16px  ; /* This creates a 30px gap */
    width: 16px  ;
    padding: 0  ;
    margin: 0  ; 
    align-self: center;
    display: flex;
    justify-content: center; /* Keeps the 60px icon overlapping exactly 15px on each side */
    align-items: center;
    z-index: 10; 
    overflow: visible  ; 
  }

  /* 4. Lock the icon size and prevent Webflow from squishing it to 0px */
  .howpricing-row-icon {
    width: 40px  ;
    height: 40px  ;
    max-width: none  ; /* Forces the image to break out of the 0px parent */
    transform: none  ;
    flex-shrink: 0  ; 
  }

  /* 5. Force the correct visual order left-to-right */
  #w-node-_9039ec95-44c7-5740-d6f2-8844754b1c75-bb7e1862 { order: 1; } /* Staff Salary */
  #w-node-_501e610c-bc8f-69d1-a793-6d95d2568ee9-bb7e1862 { order: 2; } /* Plus Icon */
  #w-node-_3eeec438-9171-7024-789c-6147c64cefc0-bb7e1862 { order: 3; } /* Recruitment */
  #w-node-f82cf933-bc34-08f5-43aa-f9896ab7c1dc-bb7e1862 { order: 4; } /* Facilities */
  #w-node-ecc40c5d-a257-a84c-7168-caaa01492a19-bb7e1862 { order: 5; } /* Operations */
  #w-node-_3b0bb8b4-69f1-ffd3-3a2a-d3a319c1b713-bb7e1862 { order: 6; } /* IT */
  #w-node-_8b8202d8-9362-daed-431f-bf58d6b3b2a1-bb7e1862 { order: 7; } /* Equal Icon */
  #w-node-acf26703-2e65-caaa-22c8-3bc0964e9ffe-bb7e1862 { order: 8; } /* Monthly Fee */
}

/* --- LAPTOP SCALING: PRICING SECTION ONLY (992px - 1279px) --- */
@media screen and (max-width: 1279px) and (min-width: 992px) {
  /* Scale down the main section intro */
  .howpricing h2 {
    font-size: 44px  ;
  }
  .howpricing-intro-wrapper div {
    font-size: 16px  ;
  }
  
  /* Scale down the card titles (Staff Salary, Recruitment, etc.) */
  .howpricing-heading-div h5 {
    font-size: 20px  ; 
  }
  
  /* Scale down the list items inside the cards */
  .howpricing-element-content-wrapper h6 {
    font-size: 16px  ;
    line-height: 1.3  ; /* Tightens up the vertical spacing slightly */
  }
}

/* Ensure the dropdown menu has a solid white background */
select.form-field-contact {
  background-color: #ffffff  ;
  color: var(--colors--navy-blue); /* Keeps the text color consistent */
}

/* Optional: Style the actual dropdown options for better readability across all browsers */
select.form-field-contact option {
  background-color: #ffffff;
  color: var(--colors--navy-blue);
  padding: 10px;
}

.btn-post-section {
  /* margin-top: 20px; */
  margin-left: auto;
  margin-right: auto;
}

.homehero-btn-wrapper {
  align-items: flex-start;
}

.abouthero-btn-wrapper {
    align-items: flex-start;
}

.howhero-btn-wrapper {
  align-items: flex-start;
}

.mt-10 {
  margin-top: 10px;
}

.mt-36 {
  margin-top: 36px;
}

.text-center {
  text-align: center;
}


/* --- FIX: MAKE TEXT SELECTABLE IN ACTIVE FOUNDER TABS --- */

/* 1. Strip the "link" behavior from the active tab so it can't be dragged */
.aboutfounders-tabs-link.w--current,
.aboutfounders-tabs-link-small.w--current {
  pointer-events: none !important;
  cursor: default !important;
}

/* 2. Re-enable interactions specifically for the text, forcing it to behave normally */
.aboutfounders-tabs-link.w--current h5,
.aboutfounders-tabs-link.w--current p,
.aboutfounders-tabs-link.w--current div,
.aboutfounders-tabs-link-small.w--current h5,
.aboutfounders-tabs-link-small.w--current p,
.aboutfounders-tabs-link-small.w--current div {
  pointer-events: auto !important;
  cursor: text !important;
  user-select: text !important;
  -webkit-user-select: text !important;
}

/* 3. Ensure closed tabs still show the pointer hand so users know to click them */
.aboutfounders-tabs-link:not(.w--current),
.aboutfounders-tabs-link-small:not(.w--current) {
  cursor: pointer !important;
}


.text-red {
  color: red;
}


/* --- FIX: STACK HERO IMAGE ABOVE TEXT AND SCALE DOWN --- */

/* 1. Force the hero section to stack items vertically */
.section.abouthero {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important; /* Centers the image and text container */
}

/* 2. Strip the floating behavior from the image and scale it down */
.abouthero-decor {
  position: relative !important; /* Stops the image from floating over other elements */
  top: -150px !important;
  left: 0 !important;
  transform: none !important; /* Removes any weird Webflow offset math */
  width: 100% !important;
  max-width: 800px !important; /* THE FIX: Scales the image down. Change this number to make it bigger/smaller */
  height: auto !important;
  margin: 0 auto 0 auto !important; /* Centers the image and adds 40px of breathing room below it */
  z-index: 1 !important;
}

/* 3. Ensure the text container behaves properly under the image */
.container.abouthero {
  position: relative !important;
  width: 100% !important;
  margin-top: 0 !important;
}


/* --- FIX: HIDE BUTTONS IN CLOSED FOUNDER TABS --- */

/* 1. Hide the button by default in ALL founder tabs */
.aboutfounders-tabs-link .button-primary,
.aboutfounders-tabs-link-small .button-primary {
  display: none !important;
}

/* 2. Reveal the button ONLY when the parent tab is active/open and stop it from stretching */
.aboutfounders-tabs-link.w--current .button-primary,
.aboutfounders-tabs-link-small.w--current .button-primary {
  display: inline-flex !important; /* Changed to inline-flex for better alignment */
  width: max-content !important; /* THE FIX: Forces the button to only be as wide as its text */
  max-width: 100% !important; /* Safety check so it doesn't break on tiny phones */
  align-self: flex-start !important; /* Stops the parent flexbox from stretching it */
  pointer-events: auto !important; 
  margin-top: 10px !important;
}


/* --- FOOTER SOCIAL ICONS --- */
.footer-main-social-wrapper {
  display: flex;
  flex-direction: column;
  gap: 15px; /* Matches the vertical spacing of the Quick Links */
}

.footer-social-icons {
  display: flex;
  flex-direction: row;
  gap: 16px; /* Space between the icons */
  align-items: center;
}

.social-icon-link {
  color: var(--colors--navy-blue, #1B1F3C); /* Inherits your brand color */
  transition: opacity 0.3s ease, transform 0.3s ease;
  display: inline-flex;
}

.social-icon-link:hover {
  opacity: 0.7; /* Soft fade effect when hovered */
  transform: translateY(-3px); /* Subtle pop-up animation */
}