/* =========================================================
   ALUMNI DETAIL PAGE
   COMPLETE CSS
========================================================= */


/* =========================================================
   ALUMNI DETAIL HERO
========================================================= */

.alumni-detail-hero {

    position: relative;

    width: 100%;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(126, 211, 47, 0.15),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #082d2e 0%,
            #0b3837 55%,
            #103f34 100%
        );

    color: #ffffff !important;
}


/* =========================================================
   HERO GRID
   DESKTOP
========================================================= */

.alumni-detail-hero-grid {

    min-height: 510px;

    display: grid;

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

    align-items: center;

    gap: 40px;

    position: relative;

    z-index: 2;
}


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

.alumni-detail-hero-content {

    position: relative;

    z-index: 5;

    padding: 70px 0;

    color: #ffffff !important;
}


/* =========================================================
   ALUMNI SUCCESS STORY BADGE
========================================================= */

.alumni-detail-badge {

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    position: relative !important;

    left: auto !important;

    right: auto !important;

    top: auto !important;

    bottom: auto !important;

    transform: none !important;

    float: none !important;

    clear: both;

    z-index: 20;

    background: #82d532 !important;

    color: #ffffff !important;

    padding: 9px 22px !important;

    border-radius: 30px !important;

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

    font-size: 12px !important;

    line-height: 1.2 !important;

    font-weight: 700 !important;

    letter-spacing: .2px;

    margin: 0 0 25px 0 !important;

    width: max-content;

    height: auto !important;

    box-sizing: border-box;

    visibility: visible !important;

    opacity: 1 !important;
}


/* =========================================================
   MAIN TITLE
========================================================= */

.alumni-detail-title {

    color: #ffffff !important;

    font-family: 'Outfit', sans-serif !important;

    font-size: 54px !important;

    font-weight: 800 !important;

    line-height: 1.08 !important;

    margin: 0 0 22px 0 !important;

    padding: 0 !important;

    max-width: 680px;
}


/* =========================================================
   GREEN SECOND TITLE LINE
========================================================= */

.alumni-detail-title span {

    display: block !important;

    color: #82d532 !important;

    font-size: inherit !important;

    font-weight: inherit !important;

    line-height: inherit !important;

    margin: 0 !important;

    padding: 0 !important;
}


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

.alumni-detail-hero-quote {

    color: rgba(255,255,255,.88) !important;

    font-family: 'Outfit', sans-serif !important;

    font-size: 16px !important;

    font-weight: 400 !important;

    line-height: 1.7 !important;

    max-width: 620px;

    margin: 0 0 32px 0 !important;

    padding: 0 !important;
}


/* =========================================================
   META
========================================================= */

.alumni-detail-meta {

    display: flex !important;

    align-items: center;

    flex-wrap: wrap;

    gap: 28px;

    margin: 0 !important;

    padding: 0 !important;
}


/* =========================================================
   META ITEM
========================================================= */

.alumni-detail-meta-item {

    display: flex !important;

    align-items: center;

    gap: 10px;

    margin: 0 !important;

    padding: 0 !important;

    min-width: 135px;
}


/* =========================================================
   META ICON
========================================================= */

.alumni-detail-meta-icon {

    width: 35px;

    height: 35px;

    flex: 0 0 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #82d532 !important;

    font-size: 20px;
}


/* =========================================================
   META TEXT
========================================================= */

.alumni-detail-meta-text {

    margin: 0;

    padding: 0;

    min-width: 0;
}


/* META TITLE */

.alumni-detail-meta-text strong {

    display: block;

    color: #ffffff !important;

    font-family: 'Outfit', sans-serif !important;

    font-size: 14px !important;

    font-weight: 700 !important;

    line-height: 1.3;

    margin: 0 0 3px 0 !important;
}


/* META SMALL TEXT */

.alumni-detail-meta-text small {

    display: block;

    color: rgba(255,255,255,.65) !important;

    font-family: 'Outfit', sans-serif !important;

    font-size: 11px !important;

    line-height: 1.4;

    margin: 0 !important;
}


/* =========================================================
   RIGHT IMAGE WRAPPER
========================================================= */

.alumni-detail-image-wrap {

    height: 510px;

    position: relative;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    overflow: visible;
}


/* =========================================================
   IMAGE GREEN CIRCLE
========================================================= */

.alumni-detail-image-glow {

    position: absolute;

    width: 390px;

    height: 390px;

    border-radius: 50%;

    background: rgba(126, 211, 47, .14);

    bottom: -80px;

    right: 20px;

    z-index: 0;
}


/* =========================================================
   PERSON IMAGE
========================================================= */

.alumni-detail-image {

    position: relative;

    z-index: 2;

    display: block;

    width: 100%;

    max-width: 460px;

    height: 480px;

    object-fit: contain;

    object-position: bottom center;

    filter:
        drop-shadow(
            0 20px 25px rgba(0,0,0,.25)
        );
}


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

.alumni-story-section {

    background: #fff;

    padding: 65px 20px 45px;
}


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

.story-heading {

    text-align: center;

    margin-bottom: 30px;
}


.story-heading h2 {

    color: #102f4b;

    font-size: 30px;

    font-weight: 800;

    margin-bottom: 8px;
}


/* =========================================================
   HEADING LINE
========================================================= */

.heading-line {

    width: 55px;

    height: 4px;

    background: #82d532;

    border-radius: 10px;

    margin: auto;
}


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

.story-box {

    max-width: 950px;

    margin: auto;

    position: relative;

    padding: 10px 65px 20px;
}


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

.story-content {

    text-align: center;
}


.story-content p {

    color: #263c4d;

    font-size: 16px;

    line-height: 1.75;

    margin: 0 0 10px;
}


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

.story-quote {

    position: absolute;

    color: #82d532;

    font-family: Georgia, serif;

    font-size: 70px;

    line-height: 1;

    font-weight: bold;
}


.quote-left {

    left: 0;

    top: 0;
}


.quote-right {

    right: 0;

    bottom: -10px;
}


/* =========================================================
   WHAT I GAINED SECTION
========================================================= */

.gained-section {

    background: #fff;

    padding: 15px 20px 60px;
}


/* =========================================================
   GAINED HEADING
========================================================= */

.gained-heading {

    text-align: center;

    margin-bottom: 28px;
}


.gained-heading h2 {

    color: #102f4b;

    font-size: 28px;

    font-weight: 800;

    margin-bottom: 8px;
}


/* =========================================================
   GAINED GRID
========================================================= */

.gained-grid {

    max-width: 1050px;

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 18px;
}


/* =========================================================
   GAINED CARD
========================================================= */

.gained-card {

    background: #fff;

    border: 1px solid #edf0f2;

    border-radius: 10px;

    padding: 20px 15px;

    text-align: center;

    box-shadow:
        0 5px 18px rgba(0,0,0,.05);

    transition: .3s;
}


.gained-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 12px 25px rgba(0,0,0,.09);
}


/* =========================================================
   GAINED ICON
========================================================= */

.gained-icon {

    color: #82d532;

    font-size: 20px;

    margin-bottom: 10px;
}


/* =========================================================
   GAINED CARD TITLE
========================================================= */

.gained-card h3 {

    color: #142f47;

    font-size: 14px;

    font-weight: 700;

    margin-bottom: 7px;
}


/* =========================================================
   GAINED CARD TEXT
========================================================= */

.gained-card p {

    color: #687580;

    font-size: 11px;

    line-height: 1.5;

    margin: 0;
}


/* =========================================================
   BACK ALUMNI BUTTON
========================================================= */

.back-alumni-wrapper {

    text-align: center;

    margin-top: 30px;
}


.back-alumni {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 22px;

    border: 1px solid #82d532;

    border-radius: 6px;

    color: #31523a;

    background: #fff;

    text-decoration: none;

    font-size: 12px;

    font-weight: 600;

    transition: .3s;
}


.back-alumni:hover {

    background: #82d532;

    color: #fff;

    transform: translateY(-2px);
}


/* =========================================================
   =========================================================
   TABLET
   991px AND BELOW
   =========================================================
========================================================= */

@media (max-width: 991px) {


    /* -----------------------------------------------------
       HERO GRID
    ----------------------------------------------------- */

    .alumni-detail-hero-grid {

        display: grid;

        grid-template-columns: 1fr;

        min-height: auto;

        gap: 0;

        padding: 35px 20px 0;

        text-align: center;
    }


    /* -----------------------------------------------------
       CONTENT
       
       Makes badge, title, quote and meta behave as
       direct grid items so we can control their order.
    ----------------------------------------------------- */

    .alumni-detail-hero-content {

        display: contents;
    }


    /* -----------------------------------------------------
       ORDER 1
       ALUMNI SUCCESS STORY BUTTON
    ----------------------------------------------------- */

    .alumni-detail-badge {

        order: 1;

        display: inline-flex !important;

        justify-self: center;

        align-self: center;

        position: relative !important;

        z-index: 50 !important;

        visibility: visible !important;

        opacity: 1 !important;

        width: max-content !important;

        height: auto !important;

        margin: 0 auto 15px auto !important;

        padding: 8px 18px !important;

        background: #82d532 !important;

        color: #ffffff !important;

        border-radius: 30px !important;

        font-size: 10px !important;

        line-height: 1.2 !important;
    }


    /* -----------------------------------------------------
       ORDER 2
       IMAGE
    ----------------------------------------------------- */

    .alumni-detail-image-wrap {

        order: 2;

        width: 100%;

        height: 395px;

        min-height: 395px;

        position: relative;

        display: flex;

        align-items: flex-end;

        justify-content: center;

        margin: 0 0 22px 0;

        overflow: visible;
    }


    .alumni-detail-image {

        position: relative;

        z-index: 2;

        display: block;

        width: 100%;

        max-width: 390px;

        height: 385px;

        object-fit: contain;

        object-position: bottom center;
    }


    /* -----------------------------------------------------
       GREEN CIRCLE
    ----------------------------------------------------- */

    .alumni-detail-image-glow {

        position: absolute;

        z-index: 0;

        width: 320px;

        height: 320px;

        left: 50%;

        right: auto;

        bottom: -50px;

        transform: translateX(-50%);
    }


    /* -----------------------------------------------------
       ORDER 3
       TITLE
    ----------------------------------------------------- */

    .alumni-detail-title {

        order: 3;

        justify-self: center;

        width: 100%;

        max-width: 700px;

        font-size: 43px !important;

        line-height: 1.08 !important;

        margin: 5px auto 18px auto !important;

        padding: 0 !important;

        text-align: center;
    }


    /* -----------------------------------------------------
       ORDER 4
       QUOTE
    ----------------------------------------------------- */

    .alumni-detail-hero-quote {

        order: 4;

        justify-self: center;

        width: 100%;

        max-width: 600px;

        font-size: 15px !important;

        line-height: 1.6 !important;

        text-align: center;

        margin: 0 auto 25px auto !important;

        padding: 0 !important;
    }


    /* -----------------------------------------------------
       ORDER 5
       META
       
       ALL THREE ITEMS IN ONE ROW
    ----------------------------------------------------- */

    .alumni-detail-meta {

        order: 5;

        width: 100%;

        max-width: 760px;

        justify-self: center;

        display: grid !important;

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

        align-items: center;

        gap: 15px;

        margin: 0 auto 35px auto !important;

        padding: 0 !important;
    }


    /* -----------------------------------------------------
       META ITEM
    ----------------------------------------------------- */

    .alumni-detail-meta-item {

        width: 100%;

        min-width: 0;

        display: flex !important;

        align-items: center;

        justify-content: center;

        gap: 7px;

        text-align: left;

        margin: 0 !important;

        padding: 0 !important;

        overflow: hidden;
    }


    /* -----------------------------------------------------
       META ICON
    ----------------------------------------------------- */

    .alumni-detail-meta-icon {

        width: 30px;

        height: 30px;

        flex: 0 0 30px;

        font-size: 17px;
    }


    /* -----------------------------------------------------
       META TEXT
    ----------------------------------------------------- */

    .alumni-detail-meta-text {

        min-width: 0;

        max-width: calc(100% - 37px);

        overflow: hidden;
    }


    .alumni-detail-meta-text strong {

        font-size: 12px !important;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;
    }


    .alumni-detail-meta-text small {

        font-size: 10px !important;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;
    }


    /* -----------------------------------------------------
       GAINED GRID
    ----------------------------------------------------- */

    .gained-grid {

        grid-template-columns:
            repeat(2, 1fr);

        gap: 15px;
    }
}


/* =========================================================
   TABLET SMALL
   768px AND BELOW
========================================================= */

@media (max-width: 768px) {


    /* HERO */

    .alumni-detail-hero-grid {

        padding: 30px 18px 0;
    }


    /* BADGE */

    .alumni-detail-badge {

        font-size: 9px !important;

        padding: 7px 16px !important;

        margin-bottom: 12px !important;
    }


    /* IMAGE */

    .alumni-detail-image-wrap {

        height: 365px;

        min-height: 365px;

        margin-bottom: 22px;
    }


    .alumni-detail-image {

        max-width: 350px;

        height: 355px;
    }


    /* GREEN CIRCLE */

    .alumni-detail-image-glow {

        width: 290px;

        height: 290px;

        bottom: -45px;
    }


    /* TITLE */

    .alumni-detail-title {

        font-size: 38px !important;

        line-height: 1.1 !important;

        margin-top: 5px !important;

        margin-bottom: 16px !important;
    }


    /* QUOTE */

    .alumni-detail-hero-quote {

        font-size: 14px !important;

        max-width: 520px;

        margin-bottom: 22px !important;
    }


    /* META */

    .alumni-detail-meta {

        gap: 10px;

        max-width: 680px;
    }


    .alumni-detail-meta-item {

        gap: 6px;
    }


    .alumni-detail-meta-icon {

        width: 27px;

        height: 27px;

        flex-basis: 27px;

        font-size: 15px;
    }


    .alumni-detail-meta-text {

        max-width: calc(100% - 33px);
    }


    .alumni-detail-meta-text strong {

        font-size: 11px !important;
    }


    .alumni-detail-meta-text small {

        font-size: 9px !important;
    }
}


/* =========================================================
   MOBILE
   600px AND BELOW
========================================================= */

@media (max-width: 600px) {


    /* -----------------------------------------------------
       HERO
    ----------------------------------------------------- */

    .alumni-detail-hero {

        width: 100%;

        overflow: hidden;
    }


    .alumni-detail-hero-grid {

        display: grid;

        grid-template-columns: 1fr;

        padding: 22px 10px 0;

        gap: 0;

        min-height: auto;
    }


    /* -----------------------------------------------------
       BADGE
    ----------------------------------------------------- */

    .alumni-detail-badge {

        order: 1;

        display: inline-flex !important;

        justify-self: center;

        align-self: center;

        visibility: visible !important;

        opacity: 1 !important;

        width: max-content !important;

        margin: 0 auto 8px auto !important;

        padding: 6px 13px !important;

        font-size: 8px !important;

        line-height: 1.2 !important;

        white-space: nowrap;
    }


    /* -----------------------------------------------------
       IMAGE
    ----------------------------------------------------- */

    .alumni-detail-image-wrap {

        order: 2;

        width: 100%;

        height: 315px;

        min-height: 315px;

        margin: 0 0 24px 0;

        display: flex;

        align-items: flex-end;

        justify-content: center;
    }


    .alumni-detail-image {

        width: 100%;

        max-width: 300px;

        height: 310px;

        object-fit: contain;

        object-position: bottom center;
    }


    /* -----------------------------------------------------
       GREEN CIRCLE
    ----------------------------------------------------- */

    .alumni-detail-image-glow {

        width: 235px;

        height: 235px;

        left: 50%;

        right: auto;

        bottom: -38px;

        transform: translateX(-50%);
    }


    /* -----------------------------------------------------
       TITLE
    ----------------------------------------------------- */

    .alumni-detail-title {

        order: 3;

        width: 100%;

        max-width: 360px;

        justify-self: center;

        font-size: 32px !important;

        line-height: 1.1 !important;

        text-align: center;

        margin: 0 auto 15px auto !important;

        padding: 0 !important;
    }


    /* GREEN TITLE */

    .alumni-detail-title span {

        display: block !important;
    }


    /* -----------------------------------------------------
       QUOTE
    ----------------------------------------------------- */

    .alumni-detail-hero-quote {

        order: 4;

        width: 100%;

        max-width: 340px;

        justify-self: center;

        font-size: 12px !important;

        line-height: 1.55 !important;

        text-align: center;

        margin: 0 auto 20px auto !important;

        padding: 0 !important;
    }


    /* -----------------------------------------------------
       META
       
       EXACTLY ONE ROW
    ----------------------------------------------------- */

    .alumni-detail-meta {

        order: 5;

        width: 100%;

        max-width: 100%;

        display: grid !important;

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

        gap: 5px;

        align-items: center;

        justify-content: center;

        margin: 0 auto 25px auto !important;

        padding: 0 !important;
    }


    .alumni-detail-meta-item {

        width: 100%;

        min-width: 0;

        display: flex !important;

        flex-direction: row;

        align-items: center;

        justify-content: center;

        gap: 4px;

        text-align: left;

        overflow: hidden;
    }


    /* META ICON */

    .alumni-detail-meta-icon {

        width: 25px;

        height: 25px;

        flex: 0 0 25px;

        font-size: 14px;
    }


    /* META TEXT */

    .alumni-detail-meta-text {

        min-width: 0;

        max-width: calc(100% - 29px);

        overflow: hidden;
    }


    .alumni-detail-meta-text strong {

        font-size: 9px !important;

        line-height: 1.2;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;
    }


    .alumni-detail-meta-text small {

        font-size: 8px !important;

        line-height: 1.3;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;
    }


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

    .alumni-story-section {

        padding: 40px 15px 30px;
    }


    .story-heading {

        margin-bottom: 22px;
    }


    .story-heading h2 {

        font-size: 24px;
    }


    .story-box {

        padding: 5px 30px 15px;
    }


    .story-content p {

        font-size: 13px;

        line-height: 1.7;
    }


    .story-quote {

        font-size: 45px;
    }


    /* =====================================================
       GAINED
    ===================================================== */

    .gained-section {

        padding: 15px 15px 45px;
    }


    .gained-heading h2 {

        font-size: 24px;
    }


    .gained-grid {

        grid-template-columns: 1fr;

        gap: 12px;
    }


    .gained-card {

        padding: 18px;
    }
}


/* =========================================================
   SMALL MOBILE
   450px AND BELOW
========================================================= */

@media (max-width: 450px) {


    .alumni-detail-hero-grid {

        padding-left: 8px;

        padding-right: 8px;
    }


    /* -----------------------------------------------------
       BADGE
    ----------------------------------------------------- */

    .alumni-detail-badge {

        font-size: 8px !important;

        padding: 6px 12px !important;

        margin-bottom: 7px !important;
    }


    /* -----------------------------------------------------
       IMAGE
    ----------------------------------------------------- */

    .alumni-detail-image-wrap {

        height: 295px;

        min-height: 295px;

        /*
           SPACE BETWEEN IMAGE AND HEADING
        */

        margin-bottom: 27px;
    }


    .alumni-detail-image {

        max-width: 275px;

        height: 290px;
    }


    /* GREEN CIRCLE */

    .alumni-detail-image-glow {

        width: 215px;

        height: 215px;

        bottom: -35px;
    }


    /* -----------------------------------------------------
       TITLE
    ----------------------------------------------------- */

    .alumni-detail-title {

        font-size: 28px !important;

        max-width: 320px;

        margin-top: 0 !important;
    }


    /* -----------------------------------------------------
       QUOTE
    ----------------------------------------------------- */

    .alumni-detail-hero-quote {

        font-size: 11px !important;

        max-width: 310px;
    }


    /* -----------------------------------------------------
       META
    ----------------------------------------------------- */

    .alumni-detail-meta {

        gap: 4px;
    }


    .alumni-detail-meta-item {

        gap: 3px;
    }


    .alumni-detail-meta-icon {

        width: 22px;

        height: 22px;

        flex-basis: 22px;

        font-size: 12px;
    }


    .alumni-detail-meta-text {

        max-width: calc(100% - 25px);
    }


    .alumni-detail-meta-text strong {

        font-size: 8px !important;
    }


    .alumni-detail-meta-text small {

        font-size: 7px !important;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   380px AND BELOW
========================================================= */

@media (max-width: 380px) {


    /* IMAGE */

    .alumni-detail-image-wrap {

        height: 275px;

        min-height: 275px;

        margin-bottom: 29px;
    }


    .alumni-detail-image {

        max-width: 255px;

        height: 270px;
    }


    /* GREEN CIRCLE */

    .alumni-detail-image-glow {

        width: 195px;

        height: 195px;

        bottom: -30px;
    }


    /* TITLE */

    .alumni-detail-title {

        font-size: 25px !important;
    }


    /* QUOTE */

    .alumni-detail-hero-quote {

        font-size: 10px !important;

        max-width: 285px;
    }


    /* META */

    .alumni-detail-meta {

        gap: 2px;
    }


    .alumni-detail-meta-icon {

        width: 20px;

        height: 20px;

        flex-basis: 20px;

        font-size: 11px;
    }


    .alumni-detail-meta-text strong {

        font-size: 7px !important;
    }


    .alumni-detail-meta-text small {

        font-size: 6.5px !important;
    }
}


/* =========================================================
   EXTRA SMALL MOBILE
   350px AND BELOW
========================================================= */

@media (max-width: 350px) {


    /* BADGE */

    .alumni-detail-badge {

        font-size: 7px !important;

        padding: 6px 10px !important;
    }


    /* IMAGE */

    .alumni-detail-image-wrap {

        height: 255px;

        min-height: 255px;

        margin-bottom: 27px;
    }


    .alumni-detail-image {

        max-width: 235px;

        height: 250px;
    }


    /* GREEN CIRCLE */

    .alumni-detail-image-glow {

        width: 180px;

        height: 180px;

        bottom: -28px;
    }


    /* TITLE */

    .alumni-detail-title {

        font-size: 23px !important;
    }


    /* META */

    .alumni-detail-meta-text strong {

        font-size: 6.5px !important;
    }


    .alumni-detail-meta-text small {

        font-size: 6px !important;
    }
}