/* =========================================
   GLOBAL
========================================= */

:root {

    --primary-blue: #073c91;
    --dark-blue: #062e73;

    --gold: #dcae39;
    --gold-light: #f4d77e;

    --text-dark: #14264b;
    --text-light: #59657a;

    --white: #ffffff;

    --border-light: #e8edf5;

}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    font-family: 'Inter', sans-serif;

    background: #ffffff;

    color: var(--text-dark);

    line-height: 1.6;

    overflow-x: hidden;

}


img {

    max-width: 100%;

    display: block;

}


/* =========================================
   FOUNDER SECTION
========================================= */

.founder-section {

    padding: 0 0 22px;

    background: #ffffff;

}


.founder-card {

    position: relative;

    background: #ffffff;

    border-radius: 0 0 16px 16px;

    overflow: hidden;

    box-shadow: 0 5px 25px rgba(12, 39, 79, 0.07);

}


/* =========================================
   FOUNDER IMAGE
========================================= */

.founder-image-wrapper {

    position: relative;

    min-height: 340px;

    height: 100%;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    overflow: hidden;

    background: #ffffff;

}


/* Golden circular background */

.founder-image-circle {

    position: absolute;

    width: 270px;

    height: 270px;

    border-radius: 50%;

    background: linear-gradient(
        145deg,
        #fff4c7,
        #e9c75c
    );

    left: 50%;

    top: 58px;

    transform: translateX(-50%);

    opacity: 0.85;

}


/* Founder image */

.founder-image {

    position: relative;

    z-index: 2;

    width: 82%;

    max-width: 767.98px;

    height: 340px;

    object-fit: cover;

    object-position: center top;

}


/* =========================================
   DECORATIVE DOTS
========================================= */

.decorative-dots {

    position: absolute;

    left: 42px;

    top: 88px;

    width: 55px;

    display: grid;

    grid-template-columns: repeat(3, 5px);

    gap: 7px;

    z-index: 1;

}


.decorative-dots span {

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background: #9db8e8;

}


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

.founder-content {

    padding: 32px 42px 28px 28px;

    min-height: 340px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


/* =========================================
   KICKER
========================================= */

.section-kicker {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 10px;

    color: var(--gold);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.4px;

}


.section-kicker .line {

    width: 18px;

    height: 2px;

    background: var(--gold);

    display: inline-block;

}


/* =========================================
   MAIN HEADING
========================================= */

.founder-content h1 {

    font-size: 42px;

    line-height: 1.1;

    font-weight: 800;

    color: var(--primary-blue);

    margin: 0 0 12px;

    letter-spacing: -1px;

}


/* =========================================
   DESIGNATION
========================================= */

.founder-content h2 {

    font-size: 16px;

    font-weight: 600;

    color: #101d38;

    margin-bottom: 12px;

}


/* =========================================
   DESCRIPTION
========================================= */

.founder-description {

    max-width: 767.98px;

    font-size: 13px;

    line-height: 1.65;

    color: #414b5c;

    margin-bottom: 23px;

}


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

.founder-stats {

    display: flex;

    align-items: stretch;

    gap: 0;

    margin-top: 3px;

}


.stat-item {

    display: flex;

    align-items: center;

    gap: 11px;

    min-height: 55px;

    padding: 0 20px;

    border-right: 1px solid #e2e5eb;

}


.stat-item:first-child {

    padding-left: 0;

}


.stat-item:last-child {

    border-right: none;

}


/* =========================================
   STAT ICON
========================================= */

.stat-icon {

    width: 38px;

    height: 38px;

    border-radius: 50%;

    border: 1.5px solid var(--gold);

    color: var(--gold);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}


.stat-icon i {

    font-size: 18px;

}


/* =========================================
   STAT TEXT
========================================= */

.stat-text {

    display: flex;

    flex-direction: column;

}


.stat-text strong {

    color: var(--primary-blue);

    font-size: 20px;

    line-height: 1.2;

    font-weight: 800;

}


.stat-text span {

    font-size: 10px;

    line-height: 1.45;

    color: #4e596b;

    margin-top: 2px;

}


/* =========================================
   PLACEHOLDER
========================================= */

.placeholder-section {

    padding: 40px 0;

    color: #888;

}


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

@media (max-width: 991.98px) {

    .founder-content {

        padding: 35px;

        min-height: auto;

    }


    .founder-image-wrapper {

        min-height: 390px;

    }


    .founder-image {

        height: 390px;

    }


    .founder-content h1 {

        font-size: 38px;

    }

}


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

@media (max-width: 767.98px) {

    .founder-section {

        padding: 15px 0;

    }


    .founder-card {

        border-radius: 12px;

    }


    .founder-image-wrapper {

        min-height: 330px;

    }


    .founder-image {

        width: 85%;

        height: 330px;

    }


    .founder-image-circle {

        width: 245px;

        height: 245px;

        top: 48px;

    }


    .decorative-dots {

        left: 22px;

        top: 65px;

    }


    .founder-content {

        padding: 28px 22px 30px;

        text-align: left;

    }


    .section-kicker {

        font-size: 10px;

        margin-bottom: 9px;

    }


    .section-kicker .line {

        width: 13px;

    }


    .founder-content h1 {

        font-size: 31px;

        letter-spacing: -0.5px;

    }


    .founder-content h2 {

        font-size: 14px;

    }


    .founder-description {

        font-size: 12px;

        line-height: 1.7;

        margin-bottom: 25px;

    }


    .founder-stats {

        flex-direction: column;

        gap: 16px;

    }


    .stat-item {

        border-right: none;

        border-bottom: 1px solid #e5e8ee;

        padding: 0 0 14px;

        min-height: auto;

    }


    .stat-item:last-child {

        border-bottom: none;

        padding-bottom: 0;

    }


    .stat-text strong {

        font-size: 18px;

    }


    .stat-text span {

        font-size: 10px;

    }

}


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

@media (max-width: 767.98px) {

    .founder-content h1 {

        font-size: 27px;

    }


    .founder-image-wrapper {

        min-height: 290px;

    }


    .founder-image {

        height: 290px;

    }


    .founder-image-circle {

        width: 215px;

        height: 215px;

    }

}
/* =========================================
   STEP 2
   FOUNDER MESSAGE + JOURNEY
========================================= */


/* =========================================
   MAIN SECTION
========================================= */

.journey-section {

    padding: 20px 0 28px;

    background: #ffffff;

}


/* =========================================
   FOUNDER MESSAGE CARD
========================================= */

.founder-message-card {

    position: relative;

    height: 100%;

    min-height: 225px;

    padding: 27px 28px 24px;

    border-radius: 12px;

    background: linear-gradient(
        145deg,
        #073b89 0%,
        #062d70 100%
    );

    color: #ffffff;

    overflow: hidden;

}


/* =========================================
   MESSAGE HEADING
========================================= */

.message-heading {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    margin-bottom: 16px;

}


.message-heading h2 {

    margin: 0;

    color: #e5bd52;

    font-size: 11px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 0.7px;

    white-space: nowrap;

}


.message-line {

    display: block;

    width: 28px;

    height: 1px;

    background: #e5bd52;

}


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

.founder-quote {

    position: relative;

    z-index: 2;

    margin: 0;

    padding: 0 8px;

    color: #ffffff;

    font-size: 11px;

    line-height: 1.7;

    font-weight: 400;

}


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

.quote-mark {

    position: absolute;

    color: #dcb74e;

    font-family: Georgia, serif;

    font-size: 58px;

    font-weight: 700;

    line-height: 1;

    opacity: 0.95;

}


.quote-top {

    left: 12px;

    top: 34px;

}


.quote-bottom {

    right: 16px;

    bottom: 40px;

    color: rgba(255, 255, 255, 0.15);

}


/* =========================================
   SIGNATURE
========================================= */

.founder-signature {

    position: relative;

    z-index: 2;

    margin-top: 10px;

    padding-left: 8px;

}


.signature-name {

    color: #e0bb4d;

    font-family: "Brush Script MT",
                 "Segoe Script",
                 cursive;

    font-size: 23px;

    line-height: 1;

    font-style: italic;

}


.signature-line {

    width: 70px;

    height: 1px;

    margin-top: 3px;

    background: rgba(224, 187, 77, 0.75);

}


.founder-signature p {

    margin: 5px 0 0;

    color: #ffffff;

    font-size: 9px;

    font-weight: 500;

}


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

.journey-content {

    height: 100%;

    min-height: 225px;

    padding: 14px 5px 5px;

}


/* =========================================
   JOURNEY TITLE
========================================= */

.journey-title {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-bottom: 22px;

}


.journey-title h2 {

    margin: 0;

    color: var(--primary-blue);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.5px;

}


.title-line {

    width: 30px;

    height: 2px;

    background: var(--gold);

}


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

.journey-timeline {

    position: relative;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    width: 100%;

}


/* =========================================
   HORIZONTAL CONNECTING LINE
========================================= */

.journey-timeline::before {

    content: "";

    position: absolute;

    left: 8%;

    right: 8%;

    top: 27px;

    height: 1px;

    background: repeating-linear-gradient(
        to right,
        #a9a9a9 0,
        #a9a9a9 2px,
        transparent 2px,
        transparent 5px
    );

    z-index: 0;

}


/* =========================================
   JOURNEY ITEM
========================================= */

.journey-item {

    position: relative;

    z-index: 2;

    width: 20%;

    text-align: center;

}


/* =========================================
   JOURNEY ICON
========================================= */

.journey-icon {

    width: 55px;

    height: 55px;

    margin: 0 auto 8px;

    border: 1.5px solid #2c64c0;

    border-radius: 50%;

    background: #ffffff;

    color: #1455ac;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 19px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;

}


.journey-icon:hover {

    transform: translateY(-4px);

    background: #f8fbff;

    box-shadow:
        0 8px 20px rgba(10, 64, 140, 0.15);

}


/* =========================================
   YEAR
========================================= */

.journey-year {

    color: var(--primary-blue);

    font-size: 14px;

    font-weight: 800;

    line-height: 1.2;

    margin-bottom: 8px;

}


/* =========================================
   DESCRIPTION
========================================= */

.journey-description {

    color: #4e586b;

    font-size: 9px;

    line-height: 1.55;

    font-weight: 400;

}


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

@media (max-width: 991.98px) {

    .journey-section {

        padding-top: 15px;

    }


    .founder-message-card {

        min-height: 250px;

    }


    .journey-content {

        padding: 10px 0 15px;

    }


    .journey-timeline {

        padding: 0 5px;

    }


    .journey-icon {

        width: 50px;

        height: 50px;

        font-size: 17px;

    }


    .journey-year {

        font-size: 13px;

    }


    .journey-description {

        font-size: 8px;

    }

}


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

@media (max-width: 767.98px) {

    .journey-section {

        padding: 10px 0 30px;

    }


    /* Message Card */

    .founder-message-card {

        min-height: auto;

        padding: 28px 24px 26px;

    }


    .message-heading {

        margin-bottom: 18px;

    }


    .message-heading h2 {

        font-size: 10px;

    }


    .message-line {

        width: 20px;

    }


    .founder-quote {

        font-size: 12px;

        line-height: 1.75;

        padding: 0 12px;

    }


    .quote-top {

        left: 9px;

        top: 38px;

    }


    .quote-bottom {

        right: 10px;

        bottom: 35px;

    }


    .founder-signature {

        margin-top: 14px;

    }


    /* Journey */

    .journey-content {

        padding: 25px 5px 5px;

    }


    .journey-title {

        margin-bottom: 30px;

    }


    .journey-title h2 {

        font-size: 12px;

    }


    /* Vertical timeline */

    .journey-timeline {

        display: block;

        padding-left: 15px;

    }


    .journey-timeline::before {

        left: 42px;

        right: auto;

        top: 20px;

        bottom: 20px;

        width: 1px;

        height: auto;

        background: repeating-linear-gradient(
            to bottom,
            #a9a9a9 0,
            #a9a9a9 2px,
            transparent 2px,
            transparent 6px
        );

    }


    .journey-item {

        width: 100%;

        min-height: 105px;

        display: grid;

        grid-template-columns: 55px 75px 1fr;

        align-items: center;

        text-align: left;

    }


    .journey-icon {

        grid-column: 1;

        grid-row: 1;

        width: 55px;

        height: 55px;

        margin: 0;

        background: #ffffff;

    }


    .journey-year {

        grid-column: 2;

        grid-row: 1;

        margin: 0;

        padding-left: 14px;

        font-size: 14px;

    }


    .journey-description {

        grid-column: 3;

        grid-row: 1;

        margin: 0;

        padding-left: 12px;

        font-size: 10px;

        line-height: 1.5;

    }

}


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

@media (max-width: 767.98px) {

    .founder-message-card {

        padding-left: 19px;

        padding-right: 19px;

    }


    .founder-quote {

        font-size: 11px;

    }


    .journey-timeline {

        padding-left: 3px;

    }


    .journey-timeline::before {

        left: 30px;

    }


    .journey-item {

        grid-template-columns: 45px 62px 1fr;

        min-height: 100px;

    }


    .journey-icon {

        width: 45px;

        height: 45px;

        font-size: 15px;

    }


    .journey-year {

        font-size: 12px;

        padding-left: 10px;

    }


    .journey-description {

        font-size: 9px;

        padding-left: 8px;

    }

}