/* =========================
   ABOUT PAGE
========================= */

.about-page {
    overflow: hidden;
    background: #ffffff;
}


/* =========================
   HERO
========================= */

.about-hero {
    padding: 50px 0;
    background: #ffffff;
}

.about-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 80px;
    align-items: end;
}

.about-hero-copy {
    max-width: 850px;
}

.about-eyebrow {
    display: inline-block;
    margin-bottom: 16px;

    color: #F63D37;
    font-weight: 600;
    letter-spacing: 1px;
}

.about-hero h1 {
    margin: 0 0 20px;
    color: #09134F;
}

.about-hero p {
    max-width: 850px;
    margin: 0;

    color: #09134F;
    font-size: 17px;
    line-height: 1.75;
}

.num {
    display: flex;
    align-items: center;
}

.num30,
.numplus {
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
}

.num30 {
    color: #09134F;
}

.numplus {
    color: #F63D37;
}

/* =========================
   30 YEARS
========================= */

.about-hero-number {
    min-width: 220px;

    display: flex;
    flex-direction: column;

    padding-left: 35px;

    border-left: 3px solid #F63D37;
}

.about-hero-number strong {
    color: #0c186a;
    line-height: 1;
}



/* =========================
   STORY
========================= */

.about-story {
    padding: 90px 0;

    background: #f7f8fc;
}

.about-story-grid {
    display: grid;

    grid-template-columns:
        minmax(280px, .75fr) minmax(0, 1.25fr);

    gap: 90px;
}

.about-story-heading {
    max-width: 420px;
}

.about-section-label {
    display: inline-block;
    margin-bottom: 16px;

    color: #F63D37;
    font-weight: 600;
    letter-spacing: 1px;
}

.about-story-heading h2 {
    margin: 0;
    color: #09134F;
}

.about-story-content {
    max-width: 800px;
}

.about-story-content p {
    margin: 0 0 24px;

    color: #475467;
    line-height: 1.9;
}

.about-story-content p:last-child {
    margin-bottom: 0;
}


/* =========================
   STATS
========================= */

.about-stats {
    background: #0c186a;
}

.about-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.about-stat {
    display: flex;
    flex-direction: column;

    padding: 48px 30px;

    border-right:
        1px solid rgba(255, 255, 255, .15);
}

.about-stat:first-child {
    border-left:
        1px solid rgba(255, 255, 255, .15);
}

.about-stat strong {
    color: #ffffff;
    line-height: 1;
}

.about-stat span {
    margin-top: 12px;

    color: rgba(255, 255, 255, .75);
}


/* =========================
   BENEFITS
========================= */

.about-benefits {
    padding: 100px 0;

    background: #ffffff;
}

.about-benefits-heading {
    max-width: 700px;
    margin-bottom: 50px;
}

.about-benefits-heading h2 {
    margin: 0;
    color: #09134F;
}

.about-benefits-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border-top: 1px solid #e5e7eb;
}


/* =========================
   BENEFIT ITEM
========================= */

.about-benefit {
    display: grid;

    grid-template-columns:
        55px minmax(0, 1fr);

    gap: 24px;

    padding: 32px 25px 32px 0;

    border-bottom: 1px solid #e5e7eb;
}

.about-benefit:nth-child(odd) {
    padding-right: 40px;
}

.about-benefit:nth-child(even) {
    padding-left: 40px;

    border-left: 1px solid #e5e7eb;
}

.about-benefit-number {
    color: #F63D37;
    font-size: 24px;
    font-weight: 600;
}

.about-benefit p {
    margin: 0;

    color: #475467;
    line-height: 1.8;
}

.contact-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 42px;
    color: #404040;
}

.contact-breadcrumb a {
    color: #F63D37;
    text-decoration: none;
    transition: color .2s ease;
}

.contact-breadcrumb a:hover {
    color: #F63D37;
}

@media (max-width: 600px) {

    .contact-breadcrumb {
        margin-bottom: 28px;
    }
}

/* =========================
   CONTACT
========================= */

.about-contact {
    padding: 0 0 100px;

    background: #ffffff;
}

.about-contact-box {
    padding: 55px;

    background: #09134F;

    border-radius: 20px;
}

.about-contact-heading {
    margin-bottom: 35px;
}

.about-contact-heading h2 {
    margin: 0;
    color: #ffffff;
}


/* =========================
   CONTACT ITEMS
========================= */

.about-contact-items {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    border-top:
        1px solid rgba(255, 255, 255, .15);
}

.about-contact-item {
    display: flex;
    flex-direction: column;

    gap: 8px;

    padding: 28px 25px;

    text-decoration: none;

    border-right:
        1px solid rgba(255, 255, 255, .15);

    transition:
        background .2s ease;
}

.about-contact-item:first-child {
    padding-left: 0;
}

.about-contact-item:last-child {
    border-right: 0;
}

.about-contact-item span {
    color: rgba(255, 255, 255, .65);
}

.about-contact-item strong {
    color: #ffffff;
}

.about-contact-item:hover strong {
    color: #F63D37;
}


/* =========================
   TABLET
========================= */

@media (max-width: 1024px) {

    .about-hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-hero-number {
        min-width: 0;

        padding-left: 0;
        padding-top: 25px;

        border-left: 0;
        border-top: 3px solid #F63D37;
    }

    .about-story-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

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

    .about-stat {
        border-bottom:
            1px solid rgba(255, 255, 255, .15);
    }

    .about-contact-items {
        grid-template-columns: 1fr;
    }

    .about-contact-item,
    .about-contact-item:first-child {
        padding: 22px 0;

        border-right: 0;

        border-bottom:
            1px solid rgba(255, 255, 255, .15);
    }

    .about-contact-item:last-child {
        border-bottom: 0;
    }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 767px) {

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

    .about-story {
        padding: 60px 0;
    }

    .about-stats-grid {
        grid-template-columns: 1fr;
    }

    .about-stat,
    .about-stat:first-child {
        padding: 30px 0;

        border-left: 0;
        border-right: 0;

        border-bottom:
            1px solid rgba(255, 255, 255, .15);
    }

    .about-stat:last-child {
        border-bottom: 0;
    }

    .about-benefits {
        padding: 65px 0;
    }

    .about-benefits-heading {
        margin-bottom: 35px;
    }

    .about-benefits-grid {
        grid-template-columns: 1fr;
    }

    .about-benefit,
    .about-benefit:nth-child(odd),
    .about-benefit:nth-child(even) {
        padding: 25px 0;

        border-left: 0;
    }

    .about-contact {
        padding-bottom: 70px;
    }

    .about-contact-box {
        padding: 35px 25px;

        border-radius: 14px;
    }

}