/* ==============================
   Fonts
   ============================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Raleway:wght@400;500;600&display=swap');

:root {
  /* Brand Colors */
  --primary-color: #2F4F2F;   /* Deep Green */
  --primary-hover: #3E7A3F;   /* Accent Green */
  --accent-gold: #CEB77E;     /* Gold Accent */

  /* Neutrals */
  --neutral-offwhite: #F5F2EA;
  --neutral-dark: #444444;
  --neutral-light: #F8F8F8;

  /* Text */
  --text-heading: var(--primary-color);
  --text-body: var(--neutral-dark);
}

/* ==============================
   Section Background
   ============================== */
.benefits-section {

    text-align: center;
    padding-left: 30px;
    padding-right: 30px;
}

/* ==============================
   Benefit Item
   ============================== */
.benefit-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    margin-bottom: 15px;
    border-radius: 12px;
    background: transparent;
    transition: transform 0.2s ease-in-out;
}


/* ==============================
   Typography
   ============================== */
body, p, .body-text, .card-text {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    color: var(--text-body);
}

h5,
.main-heading,
.card-title {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--text-heading);
}

.benefit-text .card-title {
    font-size: 1.25rem;
    margin-bottom: 5px;
}

.benefit-text .card-text {
    color: var(--text-body);
    margin: 0;
}

/* ==============================
   Icon Styling
   ============================== */
.benefit-icon {
    width: 70px;
    height: 70px;
    margin-right: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SVG Icons */
.benefit-icon img.benefit-svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Font Awesome fallback */
.benefit-icon i {
    font-size: 2.5rem;
    color: var(--accent-gold);
    transition: color 0.3s ease;
}
.benefit-item:hover .benefit-icon i {
    color: var(--primary-hover);
}

/* ==============================
   Layout Adjustments
   ============================== */
.row-tight {
    --bs-gutter-x: 0.5rem;
}
.benefits-section .row {
    justify-content: center;
}
.benefit-text {
    text-align: left;
}

/* ==============================
   Mobile Adjustments
   ============================== */
@media (max-width: 767.98px) {
    .benefit-item {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
    }

    .benefit-icon {
        width: 50px;
        height: 50px;
        margin-right: 12px;
    }

    .benefit-text .card-title {
        font-size: 1rem;
    }

    .benefit-text .card-text {
        font-size: 0.85rem;
    }
}