/* =========================================================
   Education Types
   ========================================================= */

.education-types {

    position: relative;

    padding: 100px 0;

    background:
        linear-gradient(
            120deg,
            #0b0b12 0%,
            #10080d 100%
        );

}


.education-types-container {

    width: min(
        1200px,
        calc(100% - 80px)
    );

    margin: 0 auto;

}


/* =========================================================
   Header
   ========================================================= */

.education-types-header {

    max-width: 700px;

    margin-bottom: 55px;

}


.education-types-header .section-eyebrow {

    display: block;

    margin-bottom: 16px;

    color: #ef1111;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2.5px;

}


.education-types-header h2 {

    margin: 0 0 20px;

    color: #ffffff;

    font-size: clamp(
        38px,
        5vw,
        58px
    );

    line-height: 1.08;

}


.education-types-header h2 span {

    color: #ef1111;

}


.education-types-header p {

    margin: 0;

    color: rgba(255,255,255,.52);

    font-size: 14px;

    line-height: 1.8;

}


/* =========================================================
   List
   ========================================================= */

.education-types-list {

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

}


.education-type-item {

    position: relative;

    display: grid;

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

    gap: 35px;

    padding: 32px 10px;

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

    transition:
        padding-left .25s ease,
        background .25s ease;

}


.education-type-item::after {

    content: "→";

    position: absolute;

    right: 10px;

    top: 50%;

    transform:
        translateY(-50%)
        translateX(10px);

    color: #ef1111;

    font-size: 24px;

    opacity: 0;

    transition:
        opacity .25s ease,
        transform .25s ease;

}


.education-type-item:hover {

    padding-left: 20px;

    background:
        rgba(239,17,17,.025);

}


.education-type-item:hover::after {

    opacity: 1;

    transform:
        translateY(-50%)
        translateX(0);

}


/* =========================================================
   Number
   ========================================================= */

.education-type-number {

    color: #ef1111;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    padding-top: 4px;

}


/* =========================================================
   Content
   ========================================================= */

.education-type-item h3 {

    margin: 0 0 9px;

    padding-right: 50px;

    color: #ffffff;

    font-size: 21px;

    line-height: 1.3;

}


.education-type-item p {

    max-width: 700px;

    margin: 0;

    color: rgba(255,255,255,.48);

    font-size: 13px;

    line-height: 1.75;

}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 600px) {

    .education-types {

        padding: 70px 0;

    }


    .education-types-container {

        width: calc(100% - 40px);

    }


    .education-types-header {

        margin-bottom: 40px;

    }


    .education-type-item {

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

        gap: 15px;

        padding: 25px 5px;

    }


    .education-type-item:hover {

        padding-left: 10px;

    }


    .education-type-item h3 {

        font-size: 18px;

    }


    .education-type-item p {

        font-size: 12px;

    }


    .education-type-item::after {

        display: none;

    }

}