.partner-benefits ul {
  list-style: disc;
  padding-left: 20px;
}

.partner-benefits ul li {
  color: var(--dark-grey); /* Optional: sets text color if needed */
}

.partner-benefits ul li::marker {
  color: var(--secondary-colour); /* Makes bullet (dot) gold */
}
.about-text,
.partner-benefits {
  text-align: left;
}

/* Simplified selector to prevent potential conflicts */
#faq-content .faq-item summary {
  position: relative;
  padding-left: 30px;
  list-style: none;
  cursor: pointer;
  color: var(--primary-colour);
}

.custom-layout-section {
  background: url('/images/blackgradient.PNG') no-repeat center center/cover;
  padding: 60px 20px;
}

.five-box-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
  max-width: 1250px;
  margin: auto;
}

.box {
  background-color: var(--white);
  color: var(--primary-colour);
  padding: 50px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.box-1 {
  grid-column: 1;
  grid-row: 1;
}

.box-3 {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.box-2 {
  grid-column: 3;
  grid-row: 1;
}

.box-4 {
  grid-column: 1;
  grid-row: 2;
}

.box-5 {
  grid-column: 3;
  grid-row: 2;
}

.custom-layout-section p {
  font-size: 87%; 
}

.faq-item { margin-bottom: 20px; border-bottom: 1px solid #eee; }
.faq-item summary { font-size: 1.2rem; font-weight: 600; color: var(--primary-colour); padding: 15px 0; cursor: pointer; position: relative; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 10px; font-size: 1.8rem; color: var(--secondary-colour); transition: transform 0.3s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item div { padding: 0 10px 20px; }

.about-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 55px;
  align-items: center;
  text-align: right;
}

/* Target the first column (the .about-image div) */
.about-grid > :first-child {
  margin-top: 0px; /* Your desired margin for the first column */
  margin-bottom: 0px;
}

/* Target the second column (the .about-content div) */
.about-grid > :last-child {
  margin-top: 0px; /* Your desired margin for the second column */
  margin-bottom: 0px;
}

.about-image img {
  width: 90%;
  height: auto;
  border-radius: 8px;
}

/* --- Expandable Grid Section --- */
.expandable-grid-section {
    padding: 60px 20px;
    background-color: #f4f4f4;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, 350px);
    gap: 25px;
    justify-content: center;
    max-width: 1100px;
    margin: auto;
}

.grid-item {
    width: 350px;
    max-height: 350px; 
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow: hidden; 
    transition: max-height 0.4s ease-in-out 0.1s;; 
}

.grid-item img {
    width: 100%;
    height: 100px;
    object-fit: contain;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.grid-item.expanded img {
     height: 70px;
}

.grid-item h3 {
    margin: 5px 0 10px 0;
    font-size: 1.1rem;
    flex-shrink: 0; 
}

.grid-item p:not(.additional-text) {
    margin: 0 0 15px 0;
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: left;
}

/* --- FINAL UPDATED RULE --- */
.grid-item .learn-more-btn {
    display: inline-block;
    width: 100%;
    padding: 8px 12px;
    background-color: var(--secondary-colour);
    color: var(--primary-colour);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    text-align: center;
    margin-top: auto;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
    box-sizing: border-box;  /* CRITICAL: Ensures padding is included in total width/height */
    line-height: 1.4;        /* CRITICAL: Normalizes the line height for consistent height */
}

.grid-item a.learn-more-btn {
    text-decoration: none; 
}

.grid-item .learn-more-btn:hover {
    background-color: #E0AC02;
}


/* --- Styles for the EXPANDED state --- */
.grid-item.expanded {
    max-height: 1000px; 
}

.grid-item .additional-text {
    display: none;
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
    margin-top: 10px;
    margin-bottom: 15px;
}

.grid-item.expanded p:not(.additional-text) {
    display: none;
}

.grid-item.expanded .additional-text {
    display: block;
}

/* --- Key Features Section --- */
.key-features-section {
    padding: 60px 20px;
    background-color: var(--white); /* Or use var(--light-grey) for alternating colors */
}

.key-features-section h2 {
    text-align: center;
    margin-bottom: 40px;
}

.key-features-list {
    max-width: 1000px;
    margin: 0 auto;
    list-style: none; /* Remove default bullet points */
    padding-left: 0;
}

.key-features-list li {
    font-size: 1.1rem;
    color: var(--medium-grey); /* UPDATED: This makes non-strong text grey */
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-left: 35px;
    position: relative;
    line-height: 1.5;
}

.key-features-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.key-features-list li::before {
    font-family: "Font Awesome 7 Free"; /* Use the Font Awesome font library */
    font-weight: 900;                   /* This is required for solid icons */
    content: "\f085";                   /* This is the specific code for the 'fa-arrow-pointer' icon */
    color: var(--secondary-colour);
    font-size: 1.1rem;                  /* Adjust size as needed */
    position: absolute;
    left: 0;
    top: 4px;                           /* Adjust vertical alignment */
}

.key-features-list li strong {
    color: var(--primary-colour);
    font-size: 1.3rem; /* Added this line to make the bold text bigger */
}

/* --- Contact Section --- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 50px; margin-top: 40px; }
.contact-info p { font-size: 1.1rem; }
.contact-form .form-group { margin-bottom: 20px; }
.contact-form input, .contact-form textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 5px; font-family: 'Poppins', sans-serif; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--secondary-colour); }
.btn-submit { width: 100%; background: var(--secondary-colour); color: var(--primary-colour); border: none; cursor: pointer; }
.btn-submit:hover { background: #E0AC02; }
.grid-item p {
    text-align: left;
}

section:nth-child(odd) {
  background-color: #ededed;
}

/* Overrides the global rule to make even-numbered <section> elements white */
section:nth-child(even) {
  background-color: var(--white);
}