/* html {
  scroll-behavior: smooth;
} */

:root {
  --dark-green: #347437;

  --light-green: #88be46;

  --timeline-green: #3e9879;
}

/* body {

  background-color: #116c370d;

} */

* {
  box-sizing: border-box;

  max-width: 100%;
}

@font-face {
  font-family: nature;

  src: url(MuseoSans-500.ttf);
}

* {
  font-family: nature;
}

/* Hero Section */

.hero-section {
  width: 100%;

  aspect-ratio: 16 / 9;

  background-image: url("images/hero.jpg");

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  border-radius: 20px;

  position: relative;

  overflow: hidden;

  display: flex;

  align-items: flex-end;

  padding: 40px;
}

.about-text-box {
  background: rgba(255, 255, 255, 0.95);

  backdrop-filter: blur(10px);

  border-radius: 20px;

  padding: 40px;

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);

  opacity: 0;

  width: 100%;

  max-width: 800px;

  margin: 0 auto;

  position: relative;

  bottom: 0;
}

.about-header {
  color: var(--dark-green);

  opacity: 0;
}

h1 {
  color: var(--dark-green);

  margin-bottom: 40px;
}

.row {
  margin-top: 80px;
}

.about-text p {
  font-size: 18px;

  margin-top: 25px;
}

.pillars-section > h2 {
  position: relative;

  padding-left: 20px;

  /* Space for the line */

  font-size: 1.8rem;

  line-height: 1.4;

  color: black;
}

.pillars-section > h2::before {
  content: "";

  position: absolute;

  left: 0;

  /* ADJUSTMENT 1: Align it with the top of the text */

  top: 8px;

  /* ADJUSTMENT 2: Set a FIXED height instead of using 'bottom' */

  /* This ensures it stops after the first line */

  height: 25px;

  width: 6px;

  /* Thickness of the line */

  background-color: #8cc63f;

  /* Your light green */

  border-radius: 2px;
}

/* -------------------- value cards ---------------------- */

.pillar-card h2 {
  font-weight: bold;
}

/* Scoped Variables */

.pillars-section {
  --pillar-dark: #116c37;

  --pillar-light: #8cc63f;

  --pillar-text: #ffffff;
}

.pillars-container {
  display: flex;

  width: 100%;

  max-width: 1300px;

  margin: 0 auto;

  gap: 0;

  isolation: isolate;

  padding: 20px;
}

.pillar-card {
  flex: 1;

  padding: 65px 27px;

  text-align: center;

  color: var(--pillar-text);

  position: relative;

  border-radius: 110px;

  display: flex;

  flex-direction: column;

  align-items: center;

  overflow: visible;

  border: none;
}

/* --- CARD BACKGROUND COLORS --- */

.pillar-card:nth-child(odd) {
  background-color: var(--pillar-dark);
}

.pillar-card:nth-child(even) {
  background-color: var(--pillar-light);
}

/* --- STACKING ORDER (Crucial for overlap) --- */

.pillar-card:nth-child(1) {
  z-index: 4;
}

.pillar-card:nth-child(2) {
  z-index: 3;
}

.pillar-card:nth-child(3) {
  z-index: 2;
}

.pillar-card:nth-child(4) {
  z-index: 1;
}

/* --- YOUR NEW LEAF CLASS --- */

.leaf {
  width: 40px;

  height: 40px;

  /* Default color (will be overridden) */

  background-color: #9dc45f;

  /* Shape Logic */

  border-radius: 0 70% 0 70%;

  /* Rotation: 45deg makes it point horizontally like the image */

  transform: rotate(134deg);

  /* Shadow as requested */

  position: absolute;

  /* Position: -25px is half width, placing it exactly on the edge */

  right: -23px;

  z-index: 10;
}

/* --- LEAF VERTICAL POSITIONS --- */

.leaf-top {
  top: 28%;
}

.leaf-bottom {
  top: auto;

  bottom: 25%;
}

/* Top leaf matches THIS card (Dark) -> Sticks out */

.pillar-card:nth-child(odd) .leaf-top {
  background-color: var(--pillar-dark);
}

/* Bottom leaf matches NEXT card (Light) -> Looks like next card sticking in */

.pillar-card:nth-child(odd) .leaf-bottom {
  background-color: var(--pillar-light);
}

/* Even Cards (Light) */

/* Top leaf matches THIS card (Light) -> Sticks out */

.pillar-card:nth-child(even) .leaf-top {
  background-color: var(--pillar-light);
}

/* Bottom leaf matches NEXT card (Dark) -> Looks like next card sticking in */

.pillar-card:nth-child(even) .leaf-bottom {
  background-color: var(--pillar-dark);
}

/* --- TYPOGRAPHY --- */

.pillar-card h2 {
  font-size: 1.5rem;

  margin: 0 0 15px 0;

  line-height: 1.2;

  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  color: white;

  font-size: 22px;
}

.pillar-list {
  list-style: none;

  /*! padding: 0 15px; */

  text-align: left;

  font-size: 1rem;

  width: 100%;

  box-sizing: border-box;
}

.pillar-list li {
  margin-bottom: 12px;

  padding-left: 15px;

  position: relative;

  line-height: 1.4;

  color: white;

  list-style: none;
}

/* --- MOBILE RESPONSIVENESS --- */

@media (max-width: 992px) {
  .pillars-container {
    flex-direction: column;

    gap: 20px;
  }

  .pillar-card {
    z-index: 1 !important;

    border-radius: 40px;

    padding: 40px 20px;
  }

  .leaf {
    display: none;
  }

  .hero-section {
    aspect-ratio: auto;

    min-height: 60vh;

    padding: 20px;
  }

  .about-text-box {
    padding: 30px 20px;

    max-width: 100%;
  }
}

.leaf.leaf-bottom {
  right: 0px;
}

.leaf.leaf-top {
  right: -40px;
}

/* --------------------------- Timeline -----------------------*/

/* New full-width background wrapper */

.timeline-bg-wrapper {
  width: 100%;

  background-image: url("images/timeline-bg.jpg");

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

  padding: 60px 0;
}

.timeline-wrapper {
  width: 100%;

  max-width: 1400px;

  margin: 0 auto;

  position: relative;

  padding: 40px 0;
}

.timeline-header {
  text-align: center;

  margin-bottom: 60px;

  font-size: 1.8rem;

  font-weight: bold;
}

/* --- THE SCROLLABLE AREA --- */

.timeline-scroll-container {
  overflow-x: auto;

  padding-bottom: 20px;

  scrollbar-width: none;

  -ms-overflow-style: none;
}

.timeline-scroll-container::-webkit-scrollbar {
  display: none;
}

.timeline-flex {
  display: flex;

  min-width: 1200px;

  /* Ensures items don't squeeze too much on desktop */

  position: relative;
}

/* --- THE MAIN GREEN AXIS --- */

.timeline-axis {
  position: absolute;

  top: 50%;

  left: 20px;

  right: 20px;

  height: 4px;

  background-color: var(--timeline-green);

  transform: translateY(-50%);

  z-index: 0;

  border-radius: 10px;
}

/* --- INDIVIDUAL ITEM --- */

.t-item {
  flex: 1;

  position: relative;

  height: 300px;

  display: flex;

  flex-direction: column;

  z-index: 1;
}

/* --- TOP & BOTTOM HALVES --- */

.t-half-top,
.t-half-bottom {
  flex: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 0 10px;

  position: relative;

  /* Crucial for internal absolute positioning of markers */
}

.t-half-top {
  justify-content: flex-end;

  padding-bottom: 15px;
}

.t-half-bottom {
  justify-content: flex-start;

  padding-top: 15px;
}

/* --- TEXT STYLING --- */

.t-content-box {
  background-color: #f8f9fa;

  padding: 5px;

  text-align: center;

  z-index: 5;
}

.t-date {
  font-weight: 700;

  font-size: 1rem;

  color: #333;

  margin-bottom: 4px;
}

.t-title {
  font-size: 0.9rem;

  color: var(--timeline-green);

  line-height: 1.3;

  text-align: center;
}

/* --- THE LEAF MARKER --- */

.t-marker {
  position: absolute;

  left: 50%;

  width: 30px;

  height: 30px;

  color: var(--timeline-green);

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 1.4rem;

  z-index: 2;
}

/* --- LEAF ORIENTATION & POSITIONING (Alternating) --- */

/* TOP ITEMS (Odd): Sits above the line, points UP */

.t-item:nth-child(odd) .t-marker {
  top: 50%;

  /* Anchor to the axis line */

  margin-bottom: 10px;

  /* Offset UP away from the axis */

  transform: translateX(-50%) rotate(135deg);

  /* Center X and point UP */
}

/* BOTTOM ITEMS (Even): Sits below the line, points DOWN */

.t-item:nth-child(even) .t-marker {
  bottom: 50%;

  /* Anchor to the axis line */

  margin-top: 10px;

  /* Offset DOWN away from the axis */

  transform: translateX(-50%) rotate(289deg);

  /* Center X and FLIP */
}

/* --- THE STEMS (Vertical Lines) --- */

.t-stem {
  width: 2px;

  background: linear-gradient(to bottom, transparent, var(--timeline-green));

  opacity: 0.4;

  flex-grow: 1;

  margin: 5px auto;

  /* Center it */
}

/* Flip gradient for bottom items */

.t-half-bottom .t-stem {
  background: linear-gradient(to top, transparent, var(--timeline-green));

  margin-bottom: 0;

  margin-top: 5px;
}

/* --- MOBILE RESPONSIVENESS (Vertical Layout) --- */

@media (max-width: 768px) {
  .timeline-scroll-container {
    overflow-x: visible;
  }

  .timeline-flex {
    flex-direction: column;

    min-width: auto;
  }

  .timeline-axis {
    width: 4px;

    height: 100%;

    left: 20px;

    top: 0;

    transform: none;

    right: auto;
  }

  .t-item {
    height: auto;

    flex-direction: row;

    padding: 20px 0 20px 50px;

    text-align: left;

    align-items: center;
  }

  .t-marker {
    /* Reset absolute position to align with vertical axis */

    left: 20px !important;

    top: 50% !important;

    bottom: auto !important;

    margin: 0 !important;

    transform: translate(-50%, -50%) rotate(0deg) !important;
  }

  /* Reset the halves logic for mobile */

  .t-half-top,
  .t-half-bottom {
    display: block;

    flex: none;

    padding: 0;

    text-align: left;

    width: 100%;
  }

  .t-half-top:empty,
  .t-half-bottom:empty {
    display: none;
  }

  .t-stem {
    display: none;

    /* Hide stems on mobile */
  }

  .t-title {
    text-align: left;
  }
}

.timeline {
  margin-top: 100px;

  /*min-height: 100vh;*/

  align-content: center;
}

.timeline-card {
  display: flex;

  flex-direction: column;

  justify-content: space-between;

  align-items: center;

  text-align: center;

  margin-bottom: 30px;
}

.timeline-wrapper {
  margin-top: 30px;
}

.timeline-card h2 {
  font-weight: 900;

  font-size: 5rem;

  color: var(--light-green);

  line-height: 1;

  margin-bottom: 10px;
}

.timeline-card p {
  font-size: 1.1rem;

  font-weight: 500;

  color: #555;

  max-width: 80%;
}

/* ------------------- Experince --------------------- */

/* ------------------- Experience --------------------- */

.experience-section-wrapper {
  display: flex;

  width: 100%;

  min-height: 90vh;

  gap: 30px;

  margin: 60px 0;
}

.experience-text-column {
  flex: 1;

  background-color: #fff;

  /* Keeping it clean */

  border-radius: 20px;

  padding: 60px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

  /* Subtle depth */
}

.experience-image-column {
  flex: 1;

  background-image: url("images/experience.jpeg");

  background-size: cover;

  background-position: center;

  border-radius: 20px;
}

.experience-content h1 {
  font-size: 3rem;

  color: var(--dark-green);

  margin-bottom: 20px;

  line-height: 1.1;
}

.experience-description {
  font-size: 1.3rem;

  margin-bottom: 40px;

  color: #666;

  line-height: 1.6;

  font-weight: 500;
}

.experience-content h4 {
  color: var(--dark-green);

  font-weight: bold;

  margin-bottom: 25px;

  font-size: 1.2rem;

  text-transform: uppercase;

  letter-spacing: 1px;
}

.experience-list {
  list-style: none;

  padding: 0;

  margin: 0;
}

.experience-list li {
  font-size: 1.1rem;

  margin-bottom: 15px;

  padding-left: 35px;

  position: relative;

  color: #444;

  font-weight: 500;
}

.experience-list li::before {
  content: "\f00c";

  /* Checkmark */

  font-family: "Font Awesome 6 Free";

  font-weight: 900;

  position: absolute;

  left: 0;

  top: 2px;

  color: var(--light-green);

  /* Using the brand light green */

  font-size: 1rem;
}

@media (max-width: 992px) {
  .experience-section-wrapper {
    flex-direction: column;

    min-height: auto;
  }

  .experience-image-column {
    min-height: 400px;

    order: -1;

    /* Image on top on mobile? Or verify preference. Usually image top is nice. Let's leave standard order for now or use standard flow */
  }

  .experience-text-column {
    padding: 30px;
  }
}

/* Restored Promise Section Styles */

.fa-solid.fa-map-pin {
  color: #f70a8d;

  margin-right: 20px;
}

.promise h2 {
  margin-bottom: 20px;
}

.promise > div {
  margin-bottom: 10px;
}

.message ul {
  margin-left: 30px;
}

footer {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 100px;

  padding-bottom: 50px;

  border-top: 1px solid #eee;

  padding-top: 30px;
}

.left-side-footer img {
  width: 150px;
}

.left-side-footer {
  display: flex;

  align-items: center;
}

.left-side-footer p {
  margin-bottom: 0;

  font-weight: bold;
}

/* ------------------- Payment Section --------------------- */

.payment-section-wrapper {
  /* Wrapper to ensure smooth flow in document */

  overflow: hidden;

  width: 100%;
}
.payment-section {
  width: 100%;
  height: 100vh; /* IMPORTANT: Forces the section to be full screen height on desktop */
  display: flex;
  align-items: center; /* Vertically centers the cards */
  overflow: hidden;
}

.payment-container {
  display: flex;

  gap: 40px;

  padding: 0 50px;

  /* Initial offset */

  width: max-content;

  /* Ensure it takes up necessary width */
}

.payment-card {
  width: 350px;

  height: 350px;

  background-color: var(--dark-green);

  border-radius: 20px;

  padding: 30px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  color: white;

  position: relative;

  flex-shrink: 0;

  /* Prevent shrinking */

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

  transition: transform 0.3s ease;
}

.payment-card:hover {
  transform: translateY(-10px);
}

.payment-icon {
  width: 60px;

  height: 60px;

  background-color: var(--light-green);

  /* The requested light green */

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 20px;

  /* Position it nicely if needed, or stick to flow. Design shows it top right or floated?

     The sample image showed it sticking out. Let's make it stick out top right like the design. */

  position: absolute;

  top: -20px;

  right: 30px;

  color: var(--dark-green);

  /* Icon color */
}

.payment-icon svg {
  width: 30px;

  height: 30px;
}

.payment-card h3 {
  font-size: 1.8rem;

  margin-top: 40px;

  /* Space for the floating icon */

  font-weight: 700;

  line-height: 1.2;
}

.payment-card p {
  font-size: 1rem;
  color: #e0e0e0;
  line-height: 1.5;
  flex-grow: 1;
  /* Pushes CTA to bottom */
  margin-top: 10px;
}

.payment-cta {
  background-color: var(--light-green);
  color: black;
  /* Contrast */
  padding: 15px 20px;

  border-radius: 10px;

  text-decoration: none;

  font-weight: bold;

  display: flex;

  justify-content: space-between;

  align-items: center;

  transition: background-color 0.3s ease;
}

.payment-cta:hover {
  background-color: #fff;

  /* Hover effect */

  color: var(--dark-green);
}

.payment-cta i {
  /* Arrow icon */

  transform: rotate(-45deg);

  /* Point top-right like design? Or just right. Design has top-right arrow. */

  transition: transform 0.3s;
}

.payment-cta:hover i {
  transform: rotate(0deg);
}

.pillar-card {
  row-gap: 22px;
}

.pillar-card img {
  width: 128px;
}

/* ------------------- Promise Section --------------------- */

/* ------------------- Promise Section --------------------- */

.promise {
  margin-top: 80px;

  margin-bottom: 60px;
}

.promise h1 {
  text-align: center;

  color: var(--dark-green);

  margin-bottom: 50px;

  font-size: 2.5rem;
}

/* CHANGED: Switched to Flexbox for easier centering of the last row */

.promise-grid {
  display: flex;

  flex-wrap: wrap; /* Allows items to drop to the next line */

  justify-content: center; /* This centers the 3 items in the second row */

  gap: 40px; /* Matches your previous gap */

  margin-top: 40px;

  width: 100%;
}

.promise-item {
  position: relative;

  text-align: center;

  padding: 20px;

  transition: transform 0.3s ease;

  /* CHANGED: Calculation to fit exactly 4 items per row */

  /* Formula: (100% width - (3 gaps * 40px)) / 4 items */

  flex: 0 0 calc((100% - 120px) / 4);

  max-width: 350px;

  width: 100%;
}

/* REMOVED: The :nth-child(5) rule is no longer needed */

.promise-item:hover {
  transform: translateY(-10px);
}

.promise-image {
  width: 100%;

  height: 250px;

  object-fit: cover;

  border-radius: 20px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);

  margin-bottom: 20px;

  transition: all 0.3s ease;

  filter: brightness(0.9);
}

.promise-item:hover .promise-image {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);

  filter: brightness(1);

  transform: scale(1.02);
}

.promise-item p {
  font-size: 1.1rem;

  font-weight: normal;

  color: #000;

  line-height: 1.4;

  margin: 0;

  padding: 0 10px;
}

/* ------------------- Responsive Design --------------------- */

/* ------------------- Message Section --------------------- */

.message {
  display: flex;

  width: 100%; /* Force full width */

  gap: 60px; /* Increased gap for better breathing room */

  margin-top: 80px;

  margin-bottom: 60px;

  align-items: center; /* Vertically center the image and text */

  flex-wrap: wrap; /* Allow wrapping on mobile */
}

.message-image-column {
  /* OLD: flex: 0 0 33.333%; */

  /* NEW: Flex 1 = Take 1 share of the space */

  flex: 1;

  min-width: 300px; /* Prevents image from getting too skinny */
}

.message-image {
  width: 100%;

  height: auto; /* Maintain aspect ratio */

  min-height: 400px; /* Ensure it has presence */

  object-fit: cover;

  border-radius: 20px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);

  display: block; /* Removes bottom spacing issues */
}

.message-text-column {
  /* OLD: flex: 0 0 66.666%; */

  /* NEW: Flex 1.5 = Take 1.5x more space than the image */

  flex: 1.5;

  padding-left: 0; /* Removed manual padding since we have gap */

  display: flex;

  flex-direction: column;

  justify-content: center;
}

.message-text-column h1 {
  font-size: 3rem;

  color: var(--dark-green);

  margin-bottom: 20px;

  line-height: 1.1;
}

.message-text-column h4 {
  font-size: 1.5rem;

  color: var(--dark-green);

  margin-bottom: 20px;

  font-weight: 600;
}

.message-text-column p {
  font-size: 1.2rem;

  color: #666;

  margin-bottom: 15px;

  line-height: 1.6;
}

.message-text-column ul {
  list-style: none;

  padding: 0;

  margin: 20px 0;
}

.message-text-column ul li {
  font-size: 1.1rem;

  margin-bottom: 12px;

  padding-left: 35px;

  position: relative;

  color: #444;

  font-weight: 500;
}

.message-text-column ul li::before {
  content: "\f00c"; /* FontAwesome Checkmark */

  font-family: "Font Awesome 6 Free";

  font-weight: 900;

  position: absolute;

  left: 0;

  top: 2px;

  color: var(--light-green);

  font-size: 1rem;
}

.message-text-column strong {
  font-size: 1.2rem;

  color: #000;

  line-height: 1.8;

  display: block; /* Ensures they sit on their own lines */
}

/* Responsive design for message section */

@media (max-width: 992px) {
  .message {
    flex-direction: column;

    gap: 30px;

    text-align: center; /* Center text on mobile looks better */
  }

  .message-text-column {
    flex: auto; /* Reset flex on mobile */

    align-items: center; /* Center content in column */
  }

  .message-text-column ul li {
    text-align: left; /* Keep list items left aligned though */

    display: inline-block; /* Helps center the list block */
  }

  .message-image {
    min-height: 300px;
  }
}

/* ================= GLOBAL UTILS ================= */

.section-spacing {
  margin-top: 100px;

  margin-bottom: 60px;
}

.section-title {
  color: var(--dark-green);

  font-weight: bold;

  font-size: 2.5rem;

  margin-bottom: 10px;
}

.section-subtitle {
  color: #666;

  font-size: 1.2rem;
}

/* ================= QUOTE CARDS (What We Offer) ================= */

.quote-card {
  background-color: #ffffff;

  border-radius: 20px;

  padding: 40px 30px;

  height: 100%;

  position: relative;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

  transition: transform 0.3s ease, box-shadow 0.3s ease;

  border: 1px solid rgba(136, 190, 70, 0.2); /* Light green border */

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;
}

.quote-card:hover {
  transform: translateY(-5px);

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);

  border-color: var(--light-green);
}

.quote-icon {
  font-size: 3rem;

  color: var(--light-green);

  opacity: 0.5;

  margin-bottom: 20px;
}

.quote-card p {
  font-size: 1.15rem;

  color: #333;

  font-weight: 500;

  line-height: 1.5;

  font-style: italic;

  margin: 0;
}

/* ================= PROJECT CARDS ================= */

.project-card {
  background: white;

  border-radius: 20px;

  overflow: hidden;

  height: 100%;

  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);

  border: 1px solid #eee;

  transition: all 0.3s ease;

  display: flex;

  flex-direction: column;
}

.project-card:hover {
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);

  transform: translateY(-5px);
}

.project-header {
  background-color: var(--dark-green);

  padding: 25px;

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  flex-direction: column;

  gap: 10px;
}

.project-header h3 {
  color: white;

  font-size: 1.4rem;

  font-weight: bold;

  margin: 0;

  line-height: 1.3;
}

.price-tag {
  background-color: var(--light-green);

  color: var(--dark-green);

  padding: 5px 15px;

  border-radius: 50px;

  font-weight: 800;

  font-size: 0.95rem;

  display: inline-block;
}

.project-body {
  padding: 30px;

  flex-grow: 1;

  display: flex;

  flex-direction: column;

  justify-content: center;
}

.project-body p {
  color: #555;

  font-size: 1.05rem;

  line-height: 1.6;

  margin-bottom: 0;
}

/* Special Styling for the Conference Tiers */

.tier-box {
  border: 1px solid #ddd;

  border-radius: 10px;

  padding: 15px;

  text-align: center;

  background-color: #f8f9fa;

  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;
}

.tier-box.highlight {
  background-color: #eafbe0; /* Very light green bg */

  border-color: var(--light-green);
}

.tier-box strong {
  display: block;

  color: var(--dark-green);

  font-size: 1.1rem;

  margin-bottom: 5px;
}

.tier-box span {
  font-size: 0.9rem;

  color: #666;
}

@media (max-width: 768px) {
  /* 1. Force the Container to be a vertical column */

  .promise-grid {
    display: flex !important;

    flex-direction: column !important; /* Forces vertical stacking */

    align-items: center !important; /* Centers items */

    gap: 30px !important; /* Enforces gap */
  }

  /* 2. Force the Items to take full width */

  .promise-item {
    /* "flex: none" disables the complex desktop calculation completely */
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important; /* Overrides any width limits */
    margin-bottom: 20px;
    margin-right: 0 !important; /* Removes any right margin interference */
  }

  .promise-image {
    width: auto;
  }
}

@media (max-width: 768px) {
  .row {
    margin-left: auto;

    margin-right: auto;
  }
}

/* Ensure this is in your CSS */
.payment-section {
  width: 100%;
  overflow: hidden; /* Hides the cards that are off-screen */
}

/* On Mobile, we override this to allow scrolling */
@media (max-width: 768px) {
  .payment-section {
    overflow-x: auto !important; /* Enables swipe */
    display: block !important;
  }
  .payment-container {
    width: max-content;
    display: flex;
    gap: 20px;
  }
}

/* On Mobile, we reset the height so it doesn't look huge */
@media (max-width: 768px) {
  .payment-section {
    height: auto !important;
    display: block !important;
  }
}

.payment-section {
  width: 100%;
  /* REMOVED: height: 100vh; <-- This was causing the huge empty space */
  padding: 100px 0; /* Add comfortable spacing top/bottom */
  display: flex;
  align-items: center; /* Vertically center cards */
  overflow: hidden; /* Hide cards that are off-screen */
  background-color: #fff; /* Optional: Keep it clean */
}

/* Mobile styles remain the same */
@media (max-width: 768px) {
  .payment-section {
    display: block !important;
    padding: 40px 0;
    overflow-x: auto !important;
  }
  .payment-container {
    display: flex;
    gap: 20px;
    width: max-content;
    padding: 0 20px;
  }
}

/* ================= PAYMENT SECTION ================= */

.payment-section-wrapper {
  overflow: hidden;
  width: 100%;
}

.payment-section {
  width: 100%;
  /* Height is auto so it wraps the content tightly + padding */
  padding: 100px 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: #fff;
}

.payment-container {
  display: flex;
  gap: 40px;
  padding: 0 50px; /* Left/Right padding */
  width: max-content; /* Ensures the div is as wide as the cards */
}

/* --- MOBILE OVERRIDES --- */
@media (max-width: 768px) {
  .payment-section {
    display: block !important;
    padding: 40px 0;
    /* Enable native horizontal swipe */
    overflow-x: auto !important;
  }

  .payment-container {
    display: flex;
    gap: 20px;
    width: max-content;
    padding: 0 20px;
  }

  /* Optional: Hide scrollbar on mobile for cleaner look */
  .payment-section::-webkit-scrollbar {
    display: none;
  }
}

/* ================= GALLERY GRID STYLES ================= */
.gallery-grid {
  display: grid;
  /* Desktop: 3 columns (This stays the same) */
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
}

.gallery-item {
  /* ... your existing gallery-item styles ... */
  height: 200px; /* Reducing height for mobile 3-up view */
}

/* Mobile: FORCE 3 columns per row on small screens */
@media (max-width: 768px) {
  .gallery-grid {
    /* FORCED: Set to 3 columns, even on mobile */
    grid-template-columns: repeat(3, 1fr);
    gap: 10px; /* Optionally reduce gap so they fit better */
  }

  .gallery-item {
    height: 100px; /* Make the images much smaller to fit 3 in a row */
  }
}

/* ================= LIGHTBOX POPUP STYLES ================= */
.lightbox {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 99999; /* Highest priority */
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95); /* Deep black bg */
  backdrop-filter: blur(5px);
}

.lightbox-content-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 90%;
  width: 100%;
}

#lightbox-img {
  max-width: 90%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
  /* Important for swipe performance */
  touch-action: pan-y;
  user-select: none;
}

#lightbox-caption {
  margin-top: 20px;
  color: #ccc;
  font-size: 1.2rem;
  font-family: sans-serif;
}

/* Close Button */
.close-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  z-index: 100000;
}

.close-btn:hover {
  color: var(--light-green);
}

/* Navigation Buttons (Desktop) */
.prev-btn,
.next-btn {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 30px;
  transition: 0.3s ease;
  user-select: none;
}

.next-btn {
  right: 20px;
}
.prev-btn {
  left: 20px;
}

.prev-btn:hover,
.next-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--light-green);
}

/* Hide arrows on mobile so people use Swipe */
@media (max-width: 768px) {
  .prev-btn,
  .next-btn {
    display: none;
  }
}

/* Navigation Buttons (Desktop) */
.prev-btn,
.next-btn {
  cursor: pointer;
  position: absolute;
  top: 50%;
  /* ... other styles ... */
  z-index: 10000; /* Ensure they are above other elements */
}

/* Ensure this is the ONLY media query hiding them */
@media (max-width: 768px) {
  /* Hide arrows on mobile so people use Swipe */
  .prev-btn,
  .next-btn {
    display: none;
  }
}

/* IMPORTANT: Ensure they are visible on all other sizes */
@media (min-width: 769px) {
  .prev-btn,
  .next-btn {
    display: block !important;
  }
}

/* ================= GALLERY GRID STYLES ================= */
.gallery-grid {
  display: grid;
  /* Desktop: 3 columns */
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
  margin-top: 20px;
}

.gallery-item {
  position: relative;
  width: 100%;

  /* FORCE SQUARE SHAPE (Equal Width & Height) */
  aspect-ratio: 1 / 1;

  overflow: hidden;
  border-radius: 20px;
  cursor: pointer;
  background-color: #f0f0f0; /* Grey placeholder if image loads slow */
}

.gallery-item img {
  width: 100%;
  height: 100%;

  /* This is the magic property that prevents distortion */
  /* It fills the square by cropping the edges if needed */
  object-fit: cover;

  display: block; /* Removes invisible bottom space */
  transition: transform 0.4s ease;
}

/* Hover Zoom Effect */
.gallery-item:hover img {
  transform: scale(1.05);
}

/* --- MOBILE STYLES --- */
@media (max-width: 768px) {
  .gallery-grid {
    /* Keep 3 columns on mobile as requested */
    grid-template-columns: repeat(3, 1fr);
    gap: 10px; /* Smaller gap for mobile */
  }

  .gallery-item {
    border-radius: 10px; /* Slightly smaller radius for small screens */
  }
}

.footer-socials img {
  width: 25px;
}

.phone-number {
  text-decoration: none;
  color: #000;
}

.footer-socials {
  display: flex;
  column-gap: 15px;
}

@media (max-width: 768px) {
  .footer-socials {
    flex-direction: column;
    row-gap: 15px;
    align-items: center;
  }

  .footer-socials span {
    margin: 0 !important;
  }

  footer {
    flex-direction: column;
    row-gap: 15px;
  }

  .footer-socials a {
    width: fit-content;
    margin: auto;
  }
  .qoute-spacing {
    margin-top: 40px;
    margin-bottom: 0 !important;
  }

  .qoute-item-spacing {
    margin-top: 0;
  }
}

footer p {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .foote-date {
    margin-right: auto;
  }
  .footer-socials {
    margin-right: 8px;
  }
}