:root {
  --section-padding-lg: 5rem;
  /* 128px for large screens */
  --section-padding-md: 3rem;
  /* 96px for medium screens */
  --section-padding-sm: 2rem;
  /* 64px for mobile screens */
}

.dark-button {
  background-color: #191A1A !important;
  padding: 10px 24px 10px 24px !important;
  color: #fff !important;
  border: 1px solid #191A1A;
  font-weight: 500 !important;
  border-radius: 0.75rem;

}

/* ====================================================================== */
/* Base .about-hero-section Styles */
/* ====================================================================== */
.about-hero-section {
  background-color: #F3F4EF;
  padding-top: var(--section-padding-lg);
  padding-bottom: var(--section-padding-lg);
}

.about-hero-section .about-hero-title {
  font-weight: 600;
  font-size: 2.875rem;
  line-height: 3.625rem;
  color: #191A1A;
}

.about-hero-section .about-hero-description {
  font-weight: 400;
  font-style: Regular;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #191A1A;
  width: 92%;
}

.about-hero-section .about-hero-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

.about-hero-section .about-image-wrapper {
  width: 100%;
  height: 100%;
}

.about-hero-section .blue-btn {
  background-color: #7235F4;
  font-weight: 500 !important;
  vertical-align: middle;
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.35rem;
  border-radius: 10px;
  padding: 10px 22px;
}

/* Transparent Button Styles */
.about-hero-section .transparent-btn {
  border: 1px solid #191A1A;
  font-weight: 500 !important;
  vertical-align: middle;
  color: #191A1A;
  font-size: 0.9rem;
  line-height: 1.35rem;
  border-radius: 10px;
  padding: 10px 22px;
}

@media (max-width: 767px) {
  .about-hero-section {
    /* padding: 2rem; */
    justify-content: center;
  }

  .about-hero-section .about-hero-title {
    font-size: 2rem;
    line-height: 2.5rem;
  }

  .about-hero-section .about-hero-description {
    font-size: 0.9rem;
    line-height: 1.4rem;
  }


  .about-hero-section .blue-btn,
  .about-hero-section .transparent-btn {
    font-size: 0.8rem;
    padding: 8px 16px;
    display: inline-block;
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  .about-hero-section {
    padding-top: var(--section-padding-sm);
  }

  .about-hero-section .about-hero-title {
    font-size: 2rem;
    line-height: 2.5rem;
  }

  .about-hero-section .about-hero-description {
    font-size: 0.9rem;
    line-height: 1.4rem;
  }

  .about-hero-section .d-flex.gap-3.mt-3 {
    flex-direction: column;
    gap: 0.75rem !important;
  }

  .about-hero-section .blue-btn,
  .about-hero-section .transparent-btn {
    font-size: 0.9rem;
    padding: 10px 22px;
    width: 100%;
    text-align: center;
    display: block;
    white-space: normal;
  }

  .about-hero-section {
    justify-content: flex-start;
  }

  .about-hero-section .about-hero-title {
    font-size: 1.75rem;
    line-height: 2.25rem;
  }

  .about-hero-section .about-hero-description {
    font-size: 0.85rem;
    line-height: 1.4rem;
    width: 100%;
  }

  .about-hero-section .d-flex.gap-3.mt-3 {
    flex-direction: column;
    align-items: flex-start;
    /* left align buttons */
    gap: 0.75rem !important;
  }

  .about-hero-section .blue-btn,
  .about-hero-section .transparent-btn {
    font-size: 0.8rem;
    padding: 8px 16px;
    width: auto;
    /* not full width */
    min-width: 180px;
    text-align: left;
    display: inline-block;
    white-space: nowrap;
  }
}

@media (max-width: 992px) {
  .about-hero-section .about-hero-title {
    font-size: 2rem;
    line-height: 2.5rem;
  }

  .about-hero-section .about-hero-description {
    font-size: 0.875rem;
    line-height: 1.4rem;
  }

  .about-hero-section .about-hero-title {
    font-size: 2rem;
    line-height: 2.5rem;
  }

  .about-hero-section .about-hero-description {
    font-size: 0.875rem;
    line-height: 1.4rem;
    width: 100%;
  }

  .about-hero-section .d-flex.gap-3.mt-3 {
    justify-content: flex-start;
    /* left align */
    flex-wrap: wrap;
    gap: 1rem !important;
  }

  .about-hero-section .blue-btn,
  .about-hero-section .transparent-btn {
    font-size: 0.85rem;
    padding: 8px 18px;
    width: auto;
    text-align: left;
    /* left aligned text */
    display: inline-block;
    white-space: nowrap;
  }
}




.task-section {
  background-color: #191A1A;
  color: white;
  padding: 60px 0;
}

/* 🖥️ Desktop Styles */
.task-section .task-title {
  font-weight: 500;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1.875rem;
  color: #fff;
  text-align: center;
}

.task-section .task-desc {
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: center;
}

/* 📱 Responsive Adjustments (Same logic as about-hero-section) */
@media (max-width: 992px) {
  .task-section {
    padding: 40px 15px;
  }

  .task-section .task-title {
    font-size: 1.25rem;
    /* ↓ Slightly smaller */
    line-height: 1.625rem;
  }

  .task-section .task-desc {
    font-size: 0.8rem;
    /* ↓ Smaller body text */
    line-height: 1.2rem;
  }

  .task-section .row {
    --bs-gutter-x: 1.5rem;
  }

  .task-section .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* 📱 Extra Small Screens (Mobile under 576px) */
@media (max-width: 576px) {
  .task-section {
    padding: 30px 10px;
  }

  .task-section .task-title {
    font-size: 1.125rem;
    /* ~18px */
    line-height: 1.5rem;
  }

  .task-section .task-desc {
    font-size: 0.75rem;
    /* ~12px */
    line-height: 1.1rem;
  }

  .task-section .row {
    --bs-gutter-x: 1rem;
  }
}

.task-section .col-6 {
  display: flex;
  justify-content: center;
}

/* Center content in each block */
.task-section .content-wrapper {
  text-align: center;
}

/* On desktop, keep everything centered and spaced */
@media (min-width: 992px) {
  .task-section .col-lg-3 {
    display: flex;
    justify-content: center;
  }
}

/* On smaller screens (mobile/tablet) */
@media (max-width: 768px) {
  .task-section .row {
    justify-content: center;
    text-align: center;
  }

  .task-section .col-6 {
    display: flex;
    justify-content: center;
  }

  .task-section .content-wrapper {
    text-align: center;
  }
}
@media (max-width: 576px) {

  .task-section .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .task-section .row {
    --bs-gutter-x: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .task-section .col-6 {
   
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .task-section .content-wrapper {
    text-align: center;
    padding: 10px 0;
  }

  .task-section .task-desc {
    padding: 0 !important;
  }
}

/* ====================================================================== */
/* Responsive Adjustments for Title and Description */
/* ====================================================================== */

@media (max-width: 767px) {

  /* Title */
  .about-hero-section .about-hero-title {
    font-size: 2.375rem;
    /* Adjusted font size for smaller screens */
    line-height: 2.75rem;
    /* Adjusted line height for better spacing */
    text-align: left;
    /* Align title to the left */
  }

  /* Description */
  .about-hero-section .about-hero-description {
    font-size: 1rem;
    /* Adjusted font size for description */
    line-height: 1.5rem;
    /* Adjusted line height for readability */
    text-align: left;
    /* Align description to the left */
  }

  /* Adjust "See the Impact" button to not take full width */
  .about-hero-section .blue-btn {
    width: auto;
    /* Ensure the button doesn't stretch full width */
    padding: 8px 16px;
    /* Adjust button padding */
    display: inline-flex;
    /* Align the button properly */
  }

  /* Align "Book a 30-min Growth Diagnostic" button to the left as well */
  .about-hero-section .transparent-btn {
    width: auto;
    /* Ensure the button doesn't stretch full width */
    padding: 8px 16px;
    /* Adjust button padding */
    display: inline-flex;
    /* Align the button properly */
  }

  /* Adjusting the gap between buttons to be smaller on mobile */
  .about-hero-section .d-flex.gap-3.mt-3 {
    flex-direction: column;
    gap: 1rem;
    /* Increased space between buttons */
  }
}


@media (max-width: 992px) {

  /* Title */
  .about-hero-section .about-hero-title {
    font-size: 2.375rem;
    /* Adjusted font size for medium screens */
    line-height: 2.75rem;
    /* Adjusted line height */
    text-align: left;
    /* Align title to the left */
  }

  /* Description */
  .about-hero-section .about-hero-description {
    font-size: 1rem;
    /* Adjusted font size for description */
    line-height: 1.5rem;
    /* Adjusted line height */
    text-align: left;
    /* Align description to the left */
  }

  /* Adjust "See the Impact" button */
  .about-hero-section .blue-btn {
    width: auto;
    /* Ensure the button doesn't stretch full width */
    padding: 8px 16px;
    /* Adjust button padding */
    display: inline-flex;
    /* Align the button properly */
  }

  /* Align "Book a 30-min Growth Diagnostic" button to the left as well */
  .about-hero-section .transparent-btn {
    width: auto;
    /* Ensure the button doesn't stretch full width */
    padding: 8px 16px;
    /* Adjust button padding */
    display: inline-flex;
    /* Align the button properly */
  }

  /* Adjust the gap between buttons */
  .about-hero-section .d-flex.gap-3.mt-3 {
    flex-direction: row;
    gap: 1.5rem;
    /* Adjust gap for medium screens */
  }
}



.team-section {
  background-color: #fff;
}

/* 🖥️ Desktop styles */
.team-section .container {
  margin-bottom: 0.5rem;
}

.team-section .section-title {
  font-weight: 500;
  font-size: 2.25rem;
  /* ~36px */
  line-height: 2.875rem;
  /* ~46px */
  color: #191A1A;
  text-align: center;
  padding-left: 17%;
  padding-right: 17%;
}

.team-section .section-description {
  font-weight: 400;
  font-size: 1.125rem;
  /* ~18px */
  line-height: 1.625rem;
  /* ~26px */
  text-align: center;
  margin-top: 2.2rem;
}

.team-section .team-member-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1.25rem;
  display: block;
}

.team-section .team-small-member {
  aspect-ratio: 4 / 3;
}

.team-section .image-gap {
  --bs-gutter-x: 2rem;
}

/* 📱 Responsive Adjustments (Tablets and below) */
@media (max-width: 992px) {
  .team-section .section-title {
    font-size: 1.75rem;
    line-height: 2.25rem;
    padding-left: 0;
    padding-right: 0;
  }

  .team-section .section-description {
    font-size: 1rem;
    line-height: 1.5rem;
    margin-top: 1.5rem;
  }

  .team-section .image-gap {
    --bs-gutter-x: 1.25rem;
    --bs-gutter-y: 1.25rem;
  }
}

/* 📱 Small Screens (Mobiles) */
@media (max-width: 576px) {
  .team-section .section-title {
    font-size: 1.75rem;
    /* ~24px */
    line-height: 2rem;
    text-align: left !important;

  }

  .team-section .section-description {
    font-size: 0.875rem;
    /* ~14px */
    line-height: 1.35rem;
    margin-top: 1rem;
  }

  .team-section .image-gap {
    --bs-gutter-x: 0;
    --bs-gutter-y: 1.5rem;
  }
}


.experience-section {
  background-color: #F3F4EF;
  padding: 4rem 0;
}

.experience-section .container {
  padding-top: 1.5rem;
}

.experience-section .experience-title {
  font-weight: 500;
  font-size: 2.25rem;
  /* ~36px */
  line-height: 2.5rem;
  color: #191A1A;
}

.experience-section .experience-desc {
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #191A1A;
  width: 98%;
}

.experience-section .experience-desc span {
  font-weight: 600;
}

.experience-section .dark-button {
  background-color: #191A1A !important;
  padding: 10px 24px !important;
  color: #fff !important;
  border: 1px solid #191A1A;
  font-weight: 500 !important;
  border-radius: 0.75rem;
}

.experience-section .experience-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1.25rem;
  border: 1px solid #00000033;
}

.experience-section .sub-title {
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.875rem;
  color: #191A1A;
}

.experience-section .bullet-points ul {
  list-style-type: disc;
  width: 79%;
}

.experience-section .content-wrapper {
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.experience-section .button-container {
  margin-top: 1.8rem;
}

/* 📱 Responsive Adjustments */
@media (min-width: 783px) {
  .experience-section {
    padding: 2rem 0;
  }

  .experience-section .content-column {
    padding-right: 2.5rem;
  }
}

@media (max-width: 992px) {
.experience-section .bullet-points ul {
    width: 100% !important;
    list-style-type: disc;
    padding-left: 1.2rem; /* reduce left space */
    margin-left: 0; /* align properly with container */
  }
   .experience-section .bullet-points ul li {
    padding-left: 0.3rem; /* tighter gap between bullet and text */
    margin-bottom: 0.4rem; /* reduce line spacing */
  }

  .experience-section .experience-title {
    font-size: 1.75rem;
    /* ↓ slightly smaller */
    line-height: 2.25rem;
  }

  .experience-section .experience-desc {
    font-size: 0.875rem;
    line-height: 1.4rem;
    width: 100%;
  }

  .experience-section .sub-title {
    font-size: 1.25rem;
    line-height: 1.65rem;
  }

  .experience-section .dark-button {
    font-size: 0.75rem;
    padding: 8px 18px !important;
  }

  .experience-section .content-wrapper {
    justify-content: flex-start;
    min-height: auto;
  }
}

@media (max-width: 576px) {

   .experience-section .bullet-points ul {
    width: 100% !important;
    padding-left: 1rem; /* even tighter for small mobile */
  }

  .experience-section .bullet-points ul li {
    padding-left: 0.25rem;
    margin-bottom: 0.35rem;
  }
  .experience-section {
    padding-bottom: 1.5rem;
    padding-top: 2rem;
  }

  .experience-section .experience-title {
    font-size: 1.75rem;
    line-height: 2rem;
  }

  .experience-section .experience-desc {
    font-size: 0.8rem;
    line-height: 1.25rem;
  }

  .experience-section .sub-title {
    font-size: 1.125rem;
    line-height: 1.5rem;
  }
}

/* ================================
   🌑 SERVICE SECTION STYLES
   ================================ */
.service-section {
  background-color: #191A1A;
  padding: 3rem 0;
}

.service-section .container {
  margin-top: 2rem !important;
}

.service-section .service-title {
  font-weight: 500;
  font-size: 2.25rem;
  line-height: 2.875rem;
  color: #fff;
  text-align: center;
}

.service-section .servie-desc {
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #fff;
  text-align: center;
}

.service-section .card {
  border: none;
  border-radius: 1.25rem;
  min-height: 62vh;
  background-color: #fff;
  transition: transform 0.2s ease;
}


/* 🌐 LOGO CENTERING */
.service-section .logo-container {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  overflow: hidden;
}

.service-section .card-img-top-logo {
  max-height: 50px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0;
  /* No auto margin, stays left-aligned */
}

/* 📄 CARD CONTENT */
.service-section .card-title {
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.875rem;
  color: #191A1A;
}

.service-section .card-text {
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #191A1A;
}

.service-section .card-text ul {
  list-style-type: disc;
  margin-left: 1rem;
}

.service-section .card-text ul li {
  font-size: 0.875rem;
  /* 🔹 Reduced font size for list items */
  line-height: 1.35rem;
  margin-bottom: 0.25rem;
  color: #191A1A;
}

.service-section .card-body a {
  font-weight: 500;
  font-size: 0.875rem;
  color: #191A1A;
  text-align: left;
  text-decoration: underline;
}

/* ================================
   📱 RESPONSIVE STYLES
   ================================ */

@media (max-width: 992px) {
  .service-section .logo-container {
    justify-content: center;
  }

  .service-section .card-img-top-logo {
    max-height: 45px;
    margin: 0 auto;
  }

  .service-section .service-title {
    font-size: 1.75rem;
    line-height: 2.25rem;
  }

  .service-section .servie-desc {
    font-size: 0.9rem;
    line-height: 1.35rem;
  }

  .service-section .card-title {
    font-size: 1.25rem;
    line-height: 1.65rem;
  }

  .service-section .card-text {
    font-size: 0.875rem;
    line-height: 1.35rem;
  }

  .service-section .card-text ul li {
    font-size: 0.8rem;
    line-height: 1.25rem;
  }

  .service-section .card-body a {
    font-size: 0.8rem;
  }

  .service-section .logo-container {
    min-height: 50px;
  }

  .service-section .card-img-top-logo {
    max-height: 45px;
  }
  .service-section .logo-container {
    justify-content: flex-start !important;
  }

  .service-section .card-img-top-logo {
    max-height: 50px !important;
    margin: 0 !important;
    display: block;
  }

  .service-section .service-title,
  .service-section .servie-desc {
    text-align: left !important;
  }
}

@media (max-width: 576px) {
  .service-section {
    padding-bottom: 2rem;
  }

  .service-section .logo-container {
    justify-content: center;
  }

  .service-section .card-img-top-logo {
    max-height: 40px;
    margin: 0 auto;
  }

  .service-section .service-title {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .service-section .servie-desc {
    font-size: 0.8rem;
    line-height: 1.25rem;
  }

  .service-section .card-title {
    font-size: 1.125rem;
    line-height: 1.5rem;
  }

  .service-section .card-text {
    font-size: 0.8rem;
    line-height: 1.25rem;
  }

  .service-section .card-text ul li {
    font-size: 0.75rem;

    line-height: 1.15rem;
  }

  .service-section .card-body a {
    font-size: 0.75rem;
  }

  .service-section .logo-container {
    min-height: 45px;
  }

  .service-section .card-img-top-logo {
    max-height: 40px;
  }
  .service-section .logo-container {
    justify-content: flex-start !important;
  }

  .service-section .card-img-top-logo {
    max-height: 50px !important;
    margin: 0 !important;
    display: block;
  }

  .service-section .service-title,
  .service-section .servie-desc {
    text-align: left !important;
  }
}

/* ================================
   🧱 CARD ORDERING (TABLET)
   ================================ */
@media (min-width: 763px) and (max-width: 992px) {
  .service-section .big-card-column {
    order: 3;
  }

  .service-section .card1-col {
    order: 1;
  }

  .service-section .card2-col {
    order: 2;
  }
}


.personal-values-section {
  position: relative;
  background-color: #F3F4EF;
  width: 100%;
  min-height: 330px;
  overflow: hidden !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 🖥️ Desktop Styles */
.personal-values-section .container {
  margin-top: 2rem !important;
}

.personal-values-section .texture-decor1 {
  position: absolute;
  top: -8.125rem;
  left: -15rem;
  width: 38.625rem;
  height: 28.375rem;
  background-image: url(/assets/images/hero-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 1;
  transform: rotate(50.52deg);
  mix-blend-mode: darken;
  pointer-events: none;
  z-index: 1;
}

.personal-values-section .texture-decor2 {
  position: absolute;
  top: -14px;
  left: 786px;
  width: 738px;
  height: 454px;
  background-image: url(/assets/images/hero-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 1;
  transform: rotate(-36.52deg);
  mix-blend-mode: darken;
  pointer-events: none;
  z-index: 1;
}

.personal-values-section .main-title {
  font-weight: 500;
  font-size: 2.25rem;
  /* ~36px */
  line-height: 2.875rem;
  /* ~46px */
  color: #191A1A;
  text-align: center;
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 2;
}

.personal-values-section .desc-title {
  font-weight: 500;
  font-style: italic;
  font-size: 1.375rem;
  /* ~22px */
  line-height: 1.875rem;
  color: #191A1A;
  text-align: center;
  position: relative;
  z-index: 2;
}

.personal-values-section .inner-content .description {
  font-weight: 400;
  font-size: 1.25rem;
  /* ~20px */
  line-height: 1.813rem;
  color: #191A1A;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* 📱 Responsive Adjustments */
@media (max-width: 992px) {
  .personal-values-section {
    padding: 1rem 0.54rem;
  }

  .personal-values-section .main-title {
    font-size: 1.75rem;
    /* ↓ Slightly smaller */
    line-height: 2.25rem;
    margin-bottom: 2rem;
  }

  .personal-values-section .desc-title {
    font-size: 1.25rem;
    line-height: 1.65rem;
  }

  .personal-values-section .inner-content .description {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .personal-values-section .texture-decor1,
  .personal-values-section .texture-decor2 {
    opacity: 0.5;
    transform: scale(0.85);
  }
}

/* 📱 Small Screens (Mobile) */
@media (max-width: 576px) {
  .personal-values-section {
    padding: 2rem 0;
    min-height: auto;
  }

  .personal-values-section .main-title {
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 1.5rem;
  }

  .personal-values-section .desc-title {
    font-size: 1.125rem;
    line-height: 1.5rem;
  }

  .personal-values-section .inner-content .description {
    font-size: 0.875rem;
    line-height: 1.35rem;
  }

  .personal-values-section .texture-decor1,
  .personal-values-section .texture-decor2 {
    display: none;
    /* Hide large textures on mobile to prevent scroll */
  }
}


/* ================================
   ABOUT GROWTH CHALLENGE SECTION
   ================================ */
.about-growth-challenge {
  background-color: #F3F4EF;
  padding: 70px 0;
}

.about-growth-challenge .title-text {
  font-weight: 500;
  font-size: 2.5rem;
  line-height: 3.25rem;
  color: #191A1A;
  margin-bottom: 1rem;
}

.about-growth-challenge .card-description {
  font-size: 1rem;
  line-height: 1.5rem;
  color: #191A1A;
  margin-bottom: 1.5rem;
}

/* 🖼️ IMAGE CONFIG — Desktop (based on Figma reference 332x384) */
.about-growth-challenge .founder-image {
  width: 21rem; /* ≈ 332px */
  height: 26rem; /* ≈ 384px */
  border-radius: 20px;
  object-fit: cover;
  object-position: center;
  display: block;
  margin-left: auto;
  opacity: 1;
}

/* CTA Button */
.about-growth-challenge .blue-btn {
  background-color: #7235F4;
  color: #fff;
  font-weight: 500;
  font-size: 1rem;
  border-radius: 12px;
  padding: 11px 24px;
  border: none;
  transition: background-color 0.3s ease;
}

.about-growth-challenge .blue-btn:hover {
  background-color: #5e2cc1;
}

/* ===========================
   📱 Responsive Design
   =========================== */

/* Tablet (≤992px) */
@media (max-width: 992px) {
  .about-growth-challenge {
    padding: 60px 0;
  }

  .about-growth-challenge .row {
    row-gap: 2rem; /* space between columns */
  }

  .about-growth-challenge .title-text {
    font-size: 2rem;
    line-height: 2.75rem;
    text-align: center;
  }

  .about-growth-challenge .card-description {
    text-align: center;
    font-size: 0.95rem;
  }

 .about-growth-challenge .blue-btn {
    font-size: 0.75rem;
    padding: 6px 16px;
    display: inline-block;
    margin: 1rem 0 0 0; /* margin above button */
  }

  .about-growth-challenge .founder-image {
    width: 18rem;
    height: 22rem;
    margin: 0 auto;
  }
}

/* Mobile (≤576px) */
@media (max-width: 576px) {
  .about-growth-challenge {
    padding: 50px 0;
  }

  .about-growth-challenge .title-text {
    font-size: 1.75rem;
    line-height: 2.25rem;
    text-align: center;
  }

  .about-growth-challenge .card-description {
    font-size: 0.9rem;
    text-align: center;
  }

  .about-growth-challenge .blue-btn {
    font-size: 0.75rem;
          padding: 16px 18px;
    display: inline;
    margin: 1rem 0 0 0;
  }

  .about-growth-challenge .founder-image {
    width: 100%;
    /* max-width: 16rem; */
    height: auto;
    border-radius: 20px;
    margin: 1.5rem auto 0;
  }
}




.product-firm-section {
  background-color: #fff;
  padding: 4rem 0;

  .row {
    display: flex;
    align-items: stretch;
  }

  .image-col {
    position: relative;
  }

  .firm-image {
    position: sticky;
    top: 2rem;
    width: 100%;
    height: calc(100vh - 8rem);
    object-fit: cover;
    border-radius: 1.25rem;
  }

  .content-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 0;
  }

  .content-wrapper {
    padding-left: 2rem;
  }

  .dark-button {
    background-color: #191A1A !important;
    padding: 10px 24px;
    color: #fff !important;
    border: 1px solid #191A1A;
    font-weight: 500 !important;
    border-radius: 0.75rem;
  }

  .sub-title {
    font-weight: 500;
    font-size: 1.375rem;
    color: #191A1A;
    line-height: 1.875rem;
  }

  .bullet-points ul {
    list-style-type: disc;
    padding-left: 1.25rem; /* Ensure bullets have left padding */
    text-align: left; /* ✅ Left align by default */
  }

  @media (max-width: 991.98px) {
    padding-top: 0;
    padding-bottom: 2rem;

    .firm-image {
      position: relative;
      height: auto;
      object-fit: cover;
      top:0rem;
      margin-bottom: 0rem;
    }

    .content-column {
      padding-top: 0rem;
    }

    .content-wrapper {
      padding: 0px !important;
    }

    .bullet-points ul {
      padding-left: 1rem; /* Ensure bullets are not centered on mobile */
      text-align: left;    /* Explicit left alignment */
    }
  }

  @media (min-width: 992px) {
    padding: 4rem 0;
    .container {
      padding-top: 0;
    }
  }
}


@media (max-width: 992px) {
  .dark-button {
    font-size: 0.9rem;
    padding: 8px 20px;
  }
}

/* Mobile view (≤576px) */
@media (max-width: 576px) {
    .bullet-points ul li{
    list-style-type: disc;
    padding-left: 0rem; /* Ensure bullets have left padding */
    text-align: left; /* ✅ Left align by default */
  }
  .dark-button {
    font-size: 0.75rem;
    padding: 7px 18px;
  }
}