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

.bio-image img{

    width:100%;

    aspect-ratio:4/5;

    object-fit:cover;

    border-radius:24px;

    box-shadow:
    0 20px 50px rgba(0,0,0,.12);

    border:4px solid #d4a22b;
}

.inspiration-hero{

    background:
    linear-gradient(
        135deg,
        #0b4fd8,
        #052b70
    );

    color:white;

    text-align:center;

    padding:120px 20px;
}

.inspiration-container{

    width:min(92%,1400px);

    margin:auto;
}

.page-tag{

    display:inline-block;

    padding:10px 20px;

    border-radius:999px;

    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.20);

    color:#fbbf24;

    font-size:13px;

    font-weight:800;

    letter-spacing:2px;

    margin-bottom:20px;
}

.inspiration-hero h1{

    font-size:60px;

    font-weight:900;

    margin-bottom:20px;
}

.inspiration-hero p{

    max-width:700px;

    margin:auto;

    font-size:20px;

    line-height:1.8;

    color:#dbeafe;
}

/* =========================
   CONTENT
========================= */

.inspiration-content{

    background:white;

    padding:100px 0;
}

.bio-card{

    display:grid;

    grid-template-columns:350px 1fr;

    gap:50px;

    align-items:center;
}

.bio-image img{

    width:100%;

    border-radius:24px;

    box-shadow:
    0 20px 50px rgba(0,0,0,.12);
}

.bio-text h2{

    color:#08245c;

    font-size:42px;

    margin-bottom:20px;
}

.bio-text p{

    color:#475569;

    font-size:18px;

    line-height:2;

    margin-bottom:20px;
}

.gold-line{

    width:90px;

    height:5px;

    background:#d4a22b;

    border-radius:999px;

    margin-bottom:30px;
}

/* =========================
   LEGACY
========================= */

.legacy-section{

    background:#f8fafc;

    padding:100px 0;

    text-align:center;
}

.legacy-section h2{

    color:#08245c;

    font-size:42px;

    margin-bottom:20px;
}

.legacy-section .gold-line{

    margin:0 auto 40px;
}

.legacy-section blockquote{

    max-width:900px;

    margin:0 auto 40px;

    font-size:28px;

    font-weight:700;

    line-height:1.6;

    color:#0b4fd8;
}

.legacy-section p{

    max-width:900px;

    margin:auto;

    color:#475569;

    line-height:2;

    font-size:18px;
}

/* =========================
   TIMELINE
========================= */

.timeline-section{

    background:white;

    padding:100px 0;
}

.timeline-section h2{

    text-align:center;

    color:#08245c;

    font-size:42px;

    margin-bottom:50px;
}

.timeline{

    max-width:900px;

    margin:auto;

    position:relative;
}

.timeline::before{

    content:"";

    position:absolute;

    left:20px;

    top:0;

    bottom:0;

    width:4px;

    background:#d4a22b;
}

.timeline-item{

    position:relative;

    padding-left:80px;

    margin-bottom:50px;
}

.timeline-item::before{

    content:"";

    position:absolute;

    left:8px;

    top:8px;

    width:28px;

    height:28px;

    border-radius:50%;

    background:#0b4fd8;

    border:4px solid white;

    box-shadow:
    0 0 0 3px #d4a22b;
}

.timeline-item span{

    display:block;

    color:#0b4fd8;

    font-size:22px;

    font-weight:800;

    margin-bottom:8px;
}

.timeline-item p{

    color:#475569;

    font-size:17px;

    line-height:1.8;
}

/* =========================
   QUOTE
========================= */

.quote-banner{

    background:#052b70;

    color:white;

    padding:100px 20px;

    text-align:center;
}

.quote-banner h2{

    max-width:900px;

    margin:auto;

    font-size:40px;

    line-height:1.5;

    color:#fbbf24;
}

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

@media(max-width:900px){

    .bio-card{

        grid-template-columns:1fr;

        text-align:center;
    }

    .gold-line{

        margin:0 auto 30px;
    }

    .inspiration-hero h1{

        font-size:42px;
    }

    .bio-text h2,
    .legacy-section h2,
    .timeline-section h2{

        font-size:32px;
    }

    .legacy-section blockquote{

        font-size:22px;
    }

    .quote-banner h2{

        font-size:28px;
    }
}

@media(max-width:600px){

    .inspiration-hero{

        padding:80px 20px;
    }

    .inspiration-hero h1{

        font-size:34px;
    }

    .inspiration-hero p{

        font-size:16px;
    }

    .bio-text p,
    .legacy-section p{

        font-size:16px;
    }

    .timeline-item{

        padding-left:60px;
    }
}