/* =========================================================
   SGAP FELLOWS SITE — SHARED STYLESHEET
   One file for the whole site (linked from header.php) so the
   nav, footer, buttons, cards, etc. only need to be styled once.
   You can change the main colors in the :root section below.
   ========================================================= */

:root {
    --sgap-navy: #102f3f;
    --sgap-green: #2f9e64;
    --sgap-green-dark: #237a4d;
    --sgap-purple: #7257d7;
    --sgap-orange: #f47b4b;
    --sgap-blue: #3e82d7;
    --sgap-yellow: #f4c453;

    --sgap-text: #17212b;
    --sgap-muted: #5d6872;
    --sgap-light: #f4f8f6;
    --sgap-cream: #fff9ef;
    --sgap-white: #ffffff;
    --sgap-border: #dbe5e1;

    --sgap-radius: 22px;
    --sgap-shadow: 0 12px 35px rgba(16, 47, 63, 0.10);
}

/* Reset / base
   (This site now owns the full page — no WordPress wrapper —
   so we just reset the page instead of the old 100vw/margin hack.) */

html, body {
    margin: 0;
    padding: 0;
}

.sgap-site,
.sgap-site * {
    box-sizing: border-box;
}

body.sgap-body {
    background: var(--sgap-white);
    color: var(--sgap-text);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.55;
}

.sgap-site {
    overflow-x: hidden;
}

.sgap-container {
    width: min(1160px, calc(100% - 40px));
    margin: 0 auto;
}

.sgap-section {
    padding: 78px 0;
}

/* Section background modifiers (stack onto .sgap-section) */
.sgap-soft {
    background: var(--sgap-light);
}

.sgap-cream {
    background: var(--sgap-cream);
}

.sgap-blue {
    background: #eaf3ff;
}

.sgap-section-heading,
.sgap-heading {
    max-width: 720px;
    margin: 0 auto 42px;
    text-align: center;
}

.sgap-section-heading h2,
.sgap-heading h2 {
    margin: 0 0 12px;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.12;
    letter-spacing: -1.5px;
}

.sgap-section-heading p,
.sgap-heading p {
    margin: 0;
    color: var(--sgap-muted);
    font-size: 17px;
}

/* Buttons
   sgap-button/sgap-btn are the same button; both class names are
   supported since the homepage and interior pages used different
   names for the same thing. */

.sgap-button,
.sgap-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 12px 24px;
    border-radius: 999px;
    background: var(--sgap-green);
    color: var(--sgap-white) !important;
    text-decoration: none !important;
    font-weight: 700;
    border: 2px solid transparent;
    transition: transform 0.2s ease, background 0.2s ease;
    cursor: pointer;
}

.sgap-button:hover,
.sgap-btn:hover {
    background: var(--sgap-green-dark);
    transform: translateY(-2px);
}

/* Secondary button on a dark background (hero, page-hero) */
.sgap-button-secondary,
.outline-light {
    background: transparent;
    border: 2px solid var(--sgap-white);
}

.sgap-button-secondary:hover,
.outline-light:hover {
    background: var(--sgap-white);
    color: var(--sgap-navy) !important;
}

/* Secondary/outline button on a light background */
.outline {
    background: transparent;
    border: 2px solid var(--sgap-navy);
    color: var(--sgap-navy) !important;
}

.outline:hover {
    background: var(--sgap-navy);
    color: var(--sgap-white) !important;
}

.sgap-hero-buttons,
.sgap-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* Navigation
   sgap-navigation/sgap-nav are the same header; both are supported. */

.sgap-navigation,
.sgap-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid var(--sgap-border);
    backdrop-filter: blur(12px);
}

.sgap-nav-inner {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.sgap-logo,
.sgap-brand {
    color: var(--sgap-navy) !important;
    text-decoration: none !important;
    font-size: 23px;
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.7px;
}

.sgap-logo span,
.sgap-brand span {
    display: block;
    margin-top: 6px;
    color: var(--sgap-green);
    font-size: 13px;
    letter-spacing: 2px;
}

.sgap-nav-links,
.sgap-links {
    display: flex;
    align-items: center;
    gap: 24px;
}

.sgap-nav-links a,
.sgap-links a {
    color: var(--sgap-text) !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 700;
}

.sgap-nav-links a:hover,
.sgap-links a:hover,
.sgap-links a.is-active {
    color: var(--sgap-green) !important;
}

.sgap-nav-links .sgap-nav-apply,
.sgap-links .apply {
    padding: 11px 18px;
    border-radius: 999px;
    background: var(--sgap-green);
    color: var(--sgap-white) !important;
}

.sgap-nav-links .sgap-nav-apply:hover,
.sgap-links .apply:hover {
    color: var(--sgap-white) !important;
    background: var(--sgap-green-dark);
}

/* Hero (homepage) */

.sgap-hero {
    padding: 74px 0;
    background:
        radial-gradient(circle at 90% 15%, rgba(47, 158, 100, 0.20), transparent 35%),
        radial-gradient(circle at 8% 85%, rgba(114, 87, 215, 0.13), transparent 30%),
        var(--sgap-navy);
    color: var(--sgap-white);
}

.sgap-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 58px;
}

.sgap-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    padding: 7px 13px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sgap-white);
}

/* sgap-kicker is used on both light body sections and dark hero
   sections, so it needs a light-background default plus a dark
   override for when it appears inside a hero. */
.sgap-kicker {
    display: inline-block;
    margin-bottom: 18px;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: rgba(47, 158, 100, 0.10);
    border: 1px solid rgba(47, 158, 100, 0.25);
    color: var(--sgap-green-dark);
}

.sgap-hero .sgap-kicker,
.sgap-page-hero .sgap-kicker {
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.25);
    color: var(--sgap-white);
}

.sgap-hero h1,
.sgap-page-hero h1 {
    max-width: 700px;
    margin: 0 0 22px;
    font-size: clamp(38px, 5.5vw, 64px);
    line-height: 1.02;
    letter-spacing: -2.5px;
}

.sgap-hero h1 {
    font-size: clamp(43px, 6vw, 72px);
    line-height: 0.98;
    letter-spacing: -3px;
}

.sgap-hero-copy,
.sgap-page-hero > .sgap-container > div > p {
    max-width: 620px;
    margin: 0 0 30px;
    color: rgba(255,255,255,0.86);
    font-size: 19px;
}

.sgap-hero-image,
.sgap-hero-img {
    position: relative;
}

.sgap-hero-image img,
.sgap-hero-img img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 7px solid rgba(255,255,255,0.12);
    border-radius: 32px;
    box-shadow: 0 24px 70px rgba(0,0,0,0.30);
}

.sgap-image-note,
.sgap-photo-note {
    position: absolute;
    right: -18px;
    bottom: -18px;
    max-width: 220px;
    padding: 17px;
    border-radius: 18px;
    background: var(--sgap-yellow);
    color: var(--sgap-navy);
    font-size: 14px;
    font-weight: 800;
    box-shadow: var(--sgap-shadow);
}

/* Page hero (interior pages: About, Apply, Contact, FAQ, Fellows Program,
   Meet the Fellows, Projects). Same grid/content styling as the homepage
   hero, slightly shorter, with its own background treatment. */

.sgap-page-hero {
    padding: 64px 0 88px;
    background:
        radial-gradient(circle at 90% 10%, rgba(47, 158, 100, 0.22), transparent 40%),
        radial-gradient(circle at 10% 90%, rgba(114, 87, 215, 0.16), transparent 35%),
        var(--sgap-navy);
    color: var(--sgap-white);
}

.sgap-page-hero p {
    max-width: 620px;
    margin: 0 0 30px;
    color: rgba(255,255,255,0.86);
    font-size: 18px;
}

/* Quick answers (3 cards directly under a hero) */

.sgap-quick-section,
.sgap-quick {
    margin-top: -28px;
    position: relative;
    z-index: 4;
    padding-bottom: 20px;
}

.sgap-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.sgap-quick-card {
    padding: 28px;
    border: 1px solid var(--sgap-border);
    border-radius: var(--sgap-radius);
    background: var(--sgap-white);
    box-shadow: var(--sgap-shadow);
}

.sgap-quick-number,
.sgap-number {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 13px;
    background: var(--sgap-light);
    color: var(--sgap-green);
    font-weight: 900;
}

.sgap-quick-card h3 {
    margin: 0 0 9px;
    font-size: 21px;
}

.sgap-quick-card p {
    margin: 0;
    color: var(--sgap-muted);
}

/* Benefits (homepage) */

.sgap-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.sgap-benefit-card {
    padding: 28px 23px;
    border: 1px solid var(--sgap-border);
    border-radius: var(--sgap-radius);
    background: var(--sgap-white);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sgap-benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sgap-shadow);
}

.sgap-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
    border-radius: 18px;
    background: var(--sgap-light);
    color: var(--sgap-green);
    font-size: 24px;
    font-weight: 900;
}

.sgap-card .sgap-icon {
    margin: 0 0 18px;
}

.sgap-benefit-card:nth-child(2) .sgap-icon {
    background: #f0edff;
    color: var(--sgap-purple);
}

.sgap-benefit-card:nth-child(3) .sgap-icon {
    background: #fff0e9;
    color: var(--sgap-orange);
}

.sgap-benefit-card:nth-child(4) .sgap-icon {
    background: #eaf3ff;
    color: var(--sgap-blue);
}

.sgap-benefit-card h3 {
    margin: 0 0 10px;
    font-size: 19px;
}

.sgap-benefit-card p {
    margin: 0;
    color: var(--sgap-muted);
    font-size: 15px;
}

/* Process (homepage "How the Fellows Program Works") */

.sgap-process-section {
    background: var(--sgap-light);
}

.sgap-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.sgap-process-step {
    position: relative;
    padding: 28px 22px;
    border-radius: var(--sgap-radius);
    background: var(--sgap-white);
}

.sgap-step-number {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--sgap-purple);
    color: var(--sgap-white);
    font-weight: 900;
}

.sgap-process-step h3 {
    margin: 0 0 8px;
    font-size: 20px;
}

.sgap-process-step p {
    margin: 0;
    color: var(--sgap-muted);
    font-size: 15px;
}

/* Generic grid utilities (used across interior pages) */

.sgap-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.sgap-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.sgap-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Generic content card (interior pages) */

.sgap-card {
    padding: 28px;
    border: 1px solid var(--sgap-border);
    border-radius: var(--sgap-radius);
    background: var(--sgap-white);
    box-shadow: var(--sgap-shadow);
}

.sgap-card h3 {
    margin: 0 0 8px;
    font-size: 20px;
}

.sgap-card p {
    margin: 0;
    color: var(--sgap-muted);
    font-size: 15px;
}

/* Two-column "copy + quote/box" layout used throughout interior pages */

.sgap-split {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 50px;
    align-items: center;
}

.sgap-copy h2 {
    margin: 0 0 14px;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.12;
    letter-spacing: -1.2px;
}

.sgap-copy p {
    margin: 0 0 14px;
    color: var(--sgap-muted);
    font-size: 17px;
}

.sgap-quote {
    padding: 34px;
    border-radius: var(--sgap-radius);
    background: var(--sgap-light);
    border-left: 5px solid var(--sgap-green);
}

.sgap-quote p {
    margin: 0 0 14px;
    font-size: 19px;
    font-style: italic;
    color: var(--sgap-text);
}

.sgap-quote cite {
    font-style: normal;
    font-weight: 800;
    color: var(--sgap-muted);
    font-size: 14px;
}

/* Highlighted callout box (eligibility, application info, contact details) */

.sgap-app-box {
    padding: 32px;
    border-radius: 24px;
    background: var(--sgap-light);
    border: 1px solid var(--sgap-border);
}

.sgap-app-box h3 {
    margin-top: 0;
}

/* Checklist (eligibility list + generic sgap-checks lists) */

.sgap-eligibility-list,
.sgap-checks {
    display: grid;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sgap-eligibility-list li,
.sgap-checks li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--sgap-border);
}

.sgap-check {
    flex: 0 0 auto;
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--sgap-green);
    color: var(--sgap-white);
    font-size: 13px;
    font-weight: 900;
}

/* sgap-checks lists don't include a manual checkmark span, so we add one
   automatically. */
.sgap-checks li::before {
    content: "\2713";
    flex: 0 0 auto;
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--sgap-green);
    color: var(--sgap-white);
    font-size: 13px;
    font-weight: 900;
}

/* Simple step cards (no number badge) */

.sgap-step {
    padding: 26px 22px;
    border-radius: var(--sgap-radius);
    background: var(--sgap-white);
    border: 1px solid var(--sgap-border);
    border-top: 4px solid var(--sgap-purple);
}

.sgap-step h3 {
    margin: 0 0 8px;
    font-size: 19px;
}

.sgap-step p {
    margin: 0;
    color: var(--sgap-muted);
    font-size: 15px;
}

/* Timeline (Fellows Program page) */

.sgap-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.sgap-timeline-item {
    padding: 26px 22px;
    border-radius: var(--sgap-radius);
    background: var(--sgap-light);
    text-align: left;
}

.sgap-dot {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--sgap-navy);
    color: var(--sgap-white);
    font-weight: 900;
}

.sgap-timeline-item h3 {
    margin: 0 0 8px;
    font-size: 18px;
}

.sgap-timeline-item p {
    margin: 0;
    color: var(--sgap-muted);
    font-size: 15px;
}

/* Cards (fellow stories / projects, used on homepage and interior pages) */

.sgap-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.sgap-content-card {
    overflow: hidden;
    border: 1px solid var(--sgap-border);
    border-radius: var(--sgap-radius);
    background: var(--sgap-white);
    box-shadow: 0 9px 28px rgba(16, 47, 63, 0.07);
}

.sgap-content-card img {
    display: block;
    width: 100%;
    height: 225px;
    object-fit: cover;
}

.sgap-card-body {
    padding: 24px;
}

.sgap-card-label,
.sgap-label {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--sgap-green);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.sgap-card-body h3 {
    margin: 0 0 10px;
    font-size: 22px;
}

.sgap-card-body p {
    margin: 0 0 19px;
    color: var(--sgap-muted);
}

.sgap-text-link,
.sgap-link {
    color: var(--sgap-green) !important;
    text-decoration: none !important;
    font-weight: 800;
}

.sgap-text-link:hover,
.sgap-link:hover {
    text-decoration: underline !important;
}

/* Large image + content feature block (featured fellow / featured project) */

.sgap-feature {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 40px;
    align-items: center;
    padding: 34px;
    border-radius: var(--sgap-radius);
    background: var(--sgap-white);
    border: 1px solid var(--sgap-border);
    box-shadow: var(--sgap-shadow);
}

.sgap-feature img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 18px;
}

.sgap-feature blockquote {
    margin: 16px 0;
    padding-left: 18px;
    border-left: 4px solid var(--sgap-green);
    font-size: 18px;
    font-style: italic;
    color: var(--sgap-text);
}

/* Small meta tags/pills (used on fellow + project feature blocks) */

.sgap-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0;
}

.sgap-chip {
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--sgap-light);
    color: var(--sgap-muted);
    font-size: 13px;
    font-weight: 700;
}

/* FAQ accordion */

.sgap-faq {
    display: grid;
    gap: 14px;
}

.sgap-faq details {
    padding: 20px 24px;
    border: 1px solid var(--sgap-border);
    border-radius: 16px;
    background: var(--sgap-white);
}

.sgap-faq summary {
    cursor: pointer;
    font-weight: 800;
    font-size: 16px;
    list-style: none;
    position: relative;
    padding-right: 30px;
}

.sgap-faq summary::-webkit-details-marker {
    display: none;
}

.sgap-faq summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 0;
    font-size: 20px;
    color: var(--sgap-green);
    font-weight: 900;
}

.sgap-faq details[open] summary::after {
    content: "\2013";
}

.sgap-answer {
    margin-top: 14px;
    color: var(--sgap-muted);
    font-size: 15px;
    line-height: 1.6;
}

/* Important-dates callouts (Apply, Contact) */

.sgap-dates {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.sgap-date {
    padding: 26px;
    border-radius: var(--sgap-radius);
    background: var(--sgap-white);
    border: 1px solid var(--sgap-border);
    text-align: center;
}

.sgap-date strong {
    display: block;
    margin-bottom: 6px;
    font-size: 20px;
    color: var(--sgap-navy);
}

.sgap-date span {
    color: var(--sgap-muted);
    font-size: 14px;
}

/* Projects page impact statistics band */

.sgap-stats {
    padding: 52px 0;
    background: var(--sgap-navy);
    color: var(--sgap-white);
    text-align: center;
}

.sgap-stat strong {
    display: block;
    font-size: clamp(32px, 4vw, 48px);
    color: var(--sgap-yellow);
    font-weight: 900;
    margin-bottom: 6px;
}

.sgap-stat span {
    color: rgba(255,255,255,0.80);
    font-size: 14px;
}

/* Projects */

.sgap-project-section {
    background: var(--sgap-cream);
}

/* Impact (homepage) */

.sgap-impact {
    padding: 60px 0;
    background: var(--sgap-navy);
    color: var(--sgap-white);
}

.sgap-impact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    text-align: center;
}

.sgap-impact-number {
    display: block;
    margin-bottom: 7px;
    color: var(--sgap-yellow);
    font-size: clamp(36px, 5vw, 58px);
    font-weight: 900;
    line-height: 1;
}

.sgap-impact-label {
    color: rgba(255,255,255,0.80);
    font-size: 15px;
}

/* Eligibility (homepage) */

.sgap-eligibility-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 50px;
    align-items: center;
}

.sgap-eligibility-box {
    padding: 35px;
    border-radius: 28px;
    background: var(--sgap-light);
}

/* Final call to action
   sgap-final-cta/sgap-cta are the same section; both are supported. */

.sgap-final-cta,
.sgap-cta {
    padding: 78px 0;
    background:
        linear-gradient(135deg, rgba(114,87,215,0.13), rgba(47,158,100,0.16)),
        var(--sgap-white);
    text-align: center;
}

.sgap-final-cta h2,
.sgap-cta h2 {
    margin: 0 0 13px;
    font-size: clamp(34px, 5vw, 52px);
    letter-spacing: -1.8px;
}

.sgap-final-cta p,
.sgap-cta p {
    max-width: 670px;
    margin: 0 auto 28px;
    color: var(--sgap-muted);
    font-size: 18px;
}

.sgap-cta .sgap-buttons {
    justify-content: center;
}

/* Footer */

.sgap-footer {
    padding: 52px 0;
    background: #092330;
    color: var(--sgap-white);
}

.sgap-footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 50px;
}

.sgap-footer h3,
.sgap-footer h4 {
    margin-top: 0;
}

.sgap-footer p,
.sgap-footer a {
    color: rgba(255,255,255,0.76) !important;
}

.sgap-footer a {
    display: block;
    margin-bottom: 9px;
    text-decoration: none !important;
}

.sgap-footer a:hover {
    color: var(--sgap-white) !important;
}

/* Mobile */

@media (max-width: 980px) {
    .sgap-nav-inner {
        flex-direction: column;
        padding: 16px 0;
    }

    .sgap-nav-links,
    .sgap-links {
        justify-content: center;
        flex-wrap: wrap;
        gap: 14px 20px;
    }

    .sgap-hero-grid,
    .sgap-eligibility-grid,
    .sgap-split,
    .sgap-feature {
        grid-template-columns: 1fr;
    }

    .sgap-hero-image,
    .sgap-hero-img {
        max-width: 700px;
    }

    .sgap-benefits-grid,
    .sgap-process-grid,
    .sgap-grid-4,
    .sgap-timeline {
        grid-template-columns: repeat(2, 1fr);
    }

    .sgap-card-grid,
    .sgap-grid-3 {
        grid-template-columns: 1fr 1fr;
    }

    .sgap-impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sgap-dates {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .sgap-container {
        width: min(100% - 26px, 1160px);
    }

    .sgap-section,
    .sgap-page-hero {
        padding: 58px 0;
    }

    .sgap-hero {
        padding: 55px 0;
    }

    .sgap-hero h1,
    .sgap-page-hero h1 {
        letter-spacing: -2px;
    }

    .sgap-hero-buttons,
    .sgap-buttons {
        flex-direction: column;
    }

    .sgap-button,
    .sgap-btn {
        width: 100%;
    }

    .sgap-image-note,
    .sgap-photo-note {
        position: static;
        max-width: none;
        margin-top: 13px;
    }

    .sgap-quick-section,
    .sgap-quick {
        margin-top: 0;
        padding-top: 24px;
    }

    .sgap-quick-grid,
    .sgap-benefits-grid,
    .sgap-process-grid,
    .sgap-card-grid,
    .sgap-impact-grid,
    .sgap-footer-grid,
    .sgap-grid-2,
    .sgap-grid-3,
    .sgap-grid-4,
    .sgap-timeline {
        grid-template-columns: 1fr;
    }

    .sgap-content-card img {
        height: 210px;
    }
}