/* =========================================================================
   about.css  (load this immediately _after_ index.css)
   ========================================================================= */

/* --------------------------------------------------------
   1)  GENERAL RESET FOR ABOUT PAGE (override any conflicts)
   -------------------------------------------------------- */
html, body {
  /* index.css already has our reset rules—no additional resets needed. */
}

/* --------------------------------------------------------
   2)  ADDITIONAL UTILITY: Centering Text Globally
   -------------------------------------------------------- */
.about .container h2,
.about .container p,
.section[style*="#232949"] .container h2,
.section[style*="#232949"] .container p,
.section .container h2,
.section .container p,
.section-lg.testimonials .container h2,
.testimonial-wrap blockquote,
.testimonial-wrap cite {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================================================
   3)  SERVICE-ROW LAYOUT FOR “OUR MISSION” & “OUR TEAM”
   ========================================================================= */
/* Base styling inherited from index.css’s .service-row and .service-text */

.section[style*="#F2F1E5"] .service-row {
  display: flex;
  align-items: center;
  gap: 3rem;
  background-color: #F2F1E5; /* beige */
  padding: 3rem 2rem;
  border-radius: 12px;
  margin-bottom: 2rem;
}
.section[style*="#F2F1E5"] .service-row:nth-child(even) {
  flex-direction: row-reverse; /* alternate if more rows appear */
}
.section[style*="#F2F1E5"] .service-row img {
  flex: 0 0 45%;
  max-width: 45%;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  transition: transform .35s ease, box-shadow .35s ease;
}
.section[style*="#F2F1E5"] .service-row img:hover {
  transform: scale(1.06);
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}
.section[style*="#F2F1E5"] .service-text {
  flex: 1;
}
.section[style*="#F2F1E5"] .service-text h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
  color: #171C32;
}
.section[style*="#F2F1E5"] .service-text p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #171C32;
}

/* =========================================================================
   4)  WHY CHOOSE US? – HORIZONTAL CARDS + BUTTON UNDERNEATH
   ========================================================================= */
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.values-grid article {
  background-color: #F2F1E5; /* beige card background */
  color: #171C32;             /* dark text */
  border: 1px solid #ececea;
  border-radius: 12px;
  padding: 0.4rem 0.6rem;         /* reduced padding for wider appearance */
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.values-grid article:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.values-grid article h3 {
  font-size: 1.28rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.values-grid article p {
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 0.2rem;
}

/* Force “Why Choose Us?” heading to dark navy */
.section[style*="#FFFFFF"] .section-title {
  color: #171C32 !important;
  margin-bottom: 1rem !important;
}

/* Schedule a Time button wrapper */
.schedule-button {
  text-align: center;
  margin-top: 2rem;
}
.schedule-button .cta-pill {
  font-size: 1.14rem;
  padding: 1rem 2.4rem;
}

/* Define .beige-pill for the Schedule button */
.beige-pill {
  background-color: #F2F1E5 !important;
  color: #171C32 !important;
  border: 0 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.beige-pill:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

/* =========================================================================
   5)  OUR FIRM & OUR VALUES – WHITE BACKGROUNDS
   ========================================================================= */
/* Our Firm */
.about {
  background-color: #FFFFFF;
  padding-top: 3.5rem;
  padding-bottom: 3rem;
}
.about .container h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
  color: #171C32;
}
.about .container p {
  font-size: 1.05rem;
  text-align: center;
  line-height: 1.8;
  color: #171C32;
  max-width: 820px;
  margin: 0 auto 0;
}

/* Our Values – display horizontally */
.values-grid ul {
  list-style: none;
  padding-left: 0;
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.values-grid ul li {
  background-color: #232949;
  color: #F2F1E5;
  border-radius: 10px;
  padding: 1rem 1rem; /* reduced padding for wider appearance */
  transition: background-color 0.18s ease, transform 0.18s ease;
  font-size: 1rem;
  line-height: 1.8;
}
.values-grid ul li strong {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
}
.values-grid ul li:hover {
  background-color: #1C213B;
  transform: translateY(-2px);
}

/* =========================================================================
   6)  TESTIMONIALS SECTION (overlay, arrow styling unchanged)
   ========================================================================= */
/* Apply background2.png + overlay via CSS */
.section-lg.testimonials {
  position: relative;
  background: url('background2.png') center/cover no-repeat;
  padding: 0;  /* container’s padding will add spacing */
}
.section-lg.testimonials::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(23, 28, 50, 0.78);
  z-index: 1;
}
.section-lg.testimonials .container {
  position: relative;
  z-index: 2;
  padding: 3.5rem 2rem;
}
.section-lg.testimonials .section-title {
  color: #F2F1E5;
  margin-bottom: 2rem;
}
.testimonial-card {
  background-color: #F2F1E5;
  color: #171C32;
  padding: 2rem 2rem;
  border-left: 4px solid #232949;
  font-size: 1.05rem;
  line-height: 1.75;
  border-radius: 8px;
  min-width: 100%;
}
.testimonial-card cite {
  display: block;
  margin-top: 1.2rem;
  text-align: right;
  font-style: italic;
  color: #0C1B39;
  font-size: 0.95rem;
}
.testimonial-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  position: relative;
}
.testimonial-wrap button.nav-arrow {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #F2F1E5;
  color: #171C32;
  font-size: 1.3rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  transition: background-color 0.18s ease, transform 0.18s ease;
  z-index: 3;
}
.testimonial-wrap button.nav-arrow:hover,
.testimonial-wrap button.nav-arrow:focus {
  background-color: #171C32;
  color: #F2F1E5;
  transform: scale(1.08);
  outline: none;
}
.testimonial-wrap button.nav-arrow:active {
  transform: scale(0.94);
}
.testimonial-wrap #prevA {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
}
.testimonial-wrap #nextA {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

/* =========================================================================
   7)  CTA STRIPE (unchanged)
   ========================================================================= */

/* =========================================================================
   8)  FOOTER (unchanged)
   ========================================================================= */

/* =========================================================================
   9)  RESPONSIVE ADJUSTMENTS (max-width: 840px)
   ========================================================================= */
@media (max-width: 840px) {
  /* Our Mission & Our Team columns stack */
  .section[style*="#F2F1E5"] .service-row,
  .section[style*="#F2F1E5"] .service-row:nth-child(even) {
    flex-direction: column !important;
    gap: 1.6rem !important;
  }
  .section[style*="#F2F1E5"] .service-row img {
    max-width: 100%;
    margin-bottom: 1.5rem;
  }
  /* Why Choose Us? grid shrinks to fewer columns */
  .values-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  }
  /* Schedule button spacing */
  .schedule-button {
    margin-top: 1.5rem !important;
  }
  /* Shrink carousel arrows slightly */
  .testimonial-wrap button.nav-arrow {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }
  /* Narrow “Our Firm” & “Our Values” containers */
  .about .container,
  .values-grid ul {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
  /* Shrink “Our Values” boxes to fewer columns */
  .values-grid ul {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  }
  .values-grid ul li {
    font-size: 0.95rem;
    padding: 0.8rem 0.8rem;
  }
  /* Testimonials padding */
  .section-lg.testimonials .container {
    padding: 2.5rem 1rem;
  }
}
/* =========================================================================
   FORCE “Why Choose Us?” INTO A SINGLE ROW & REMOVE BOXED STYLING
   ========================================================================= */
.section[style*="#FFFFFF"] .values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* exactly 4 equal columns */
  gap: 2rem;
  margin: 0 auto;
  max-width: 1400px;
  padding: 0 2.4rem;
}

.section[style*="#FFFFFF"] .values-grid article {
  background: none !important;       /* remove beige background */
  border: none !important;           /* remove any border */
  box-shadow: none !important;       /* remove any shadow */
  padding: 0 !important;             /* no internal padding */
  text-align: center;                /* center the text inside */
}

.section[style*="#FFFFFF"] .values-grid article h3 {
  margin-bottom: 0.5rem;             /* small gap below the heading */
}

.section[style*="#FFFFFF"] .values-grid article p {
  margin: 0;                         /* no extra margins */
}

/* =========================================================================
   FORCE “Our Values” INTO A SINGLE ROW & REMOVE BOXED STYLING
   ========================================================================= */
.section[style*="#FFFFFF"] .values-grid ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* exactly 4 equal columns */
  gap: 2rem;
  margin: 0 auto;
  max-width: 1400px;
  padding: 0 2.4rem;
  list-style: none;                        /* remove bullets */
}

.section[style*="#FFFFFF"] .values-grid ul li {
  background: none !important;       /* remove dark background */
  border: none !important;           /* remove any border */
  box-shadow: none !important;       /* remove any shadow */
  padding: 0 !important;             /* no internal padding */
  text-align: center;                /* center the text inside */
}

.section[style*="#FFFFFF"] .values-grid ul li strong {
  display: block;                     /* keep strong on its own line */
  margin-bottom: 0.3rem;              /* small gap after the bold label */
}
/* =========================================================================
   FULL‐WIDTH “Why Choose Us?” + “Our Values” GRID (desktop only)
   ========================================================================== */
@media (min-width: 900px) {
  /* 1) Make the .values-grid container span 100vw (edge‐to‐edge) */
  .section[style*="#FFFFFF"] .values-grid {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;       /* pull the grid all the way to left edge */
    margin-right: -50vw;      /* pull the grid all the way to right edge */
    width: 100vw;
    max-width: 100vw;
    display: grid;
    grid-template-columns: repeat(4, 1fr);  /* always 4 columns on desktop */
    gap: 2rem;
    padding: 0 2.4rem;        /* match your normal container gutters */
  }

  /* 2) Remove any boxed/boxed‐card styling so it’s plain text in each column */
  .section[style*="#FFFFFF"] .values-grid article,
  .section[style*="#FFFFFF"] .values-grid ul li {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    text-align: center;      /* center‐align text */
  }

  /* 3) If the “Our Values” list uses a <ul>, ensure that also spans full‐width */
  .section[style*="#FFFFFF"] .values-grid ul {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    max-width: 100vw;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    list-style: none;        /* remove bullets */
    padding: 0 2.4rem;       /* match gutter */
  }

  /* 4) Keep the “<strong>” heading on its own line + small bottom‐margin */
  .section[style*="#FFFFFF"] .values-grid ul li strong {
    display: block;
    margin-bottom: 0.3rem;
  }
}
/* =========================================================================
   “Schedule a Time” button in Why Choose Us: navy background → beige on hover
   ========================================================================== */
.section[style*="#FFFFFF"] .schedule-button .cta-pill.beige-pill {
  background-color: #171C32 !important;  /* use the same blue/navy used elsewhere */
  color: #F2F1E5 !important;             /* beige text so it shows on navy */
}

.section[style*="#FFFFFF"] .schedule-button .cta-pill.beige-pill:hover {
  background-color: #F2F1E5 !important;  /* switch to beige on hover */
  color: #171C32 !important;             /* navy text on beige */
  transform: translateY(-2px) scale(1.03) !important; /* preserve your hover lift/scale */
}
@media (max-width: 840px) {
  /* Move the Prev/Next buttons outside the testimonial box on mobile */

  .testimonial-wrap #prevA {
    /* pull the left arrow completely outside the carousel */
    left: -2rem !important;
    transform: translateY(-50%) !important;
  }

  .testimonial-wrap #nextA {
    /* pull the right arrow completely outside the carousel */
    right: -2rem !important;
    transform: translateY(-50%) !important;
  }
}
/* Prevent any horizontal overflow caused by full‐width pulls */