/* =========================================================
   ADI YOGPEETH — COMPONENT 06
   INCLUDED / NOT INCLUDED
   PREMIUM REDESIGN
   ========================================================= */

.course-included-section {
    --ci-green: #173f34;
    --ci-green-dark: #0f3329;
    --ci-gold: #b78a3a;
    --ci-gold-light: #d3ad67;

    --ci-bg: #f8f6ef;
    --ci-card: #fffdf8;
    --ci-text: #203d34;
    --ci-muted: #707873;

    --ci-border: rgba(23, 63, 52, .11);

    position: relative;
    padding: 105px 0 100px;

    background:
        linear-gradient(
            180deg,
            #fcfbf7 0%,
            #f6f3eb 100%
        );

    color: var(--ci-text);

    overflow: hidden;
}


/* =========================================================
   SUBTLE BACKGROUND DETAILS
   ========================================================= */

.course-included-section::before {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    top: -360px;
    left: -300px;

    background:
        radial-gradient(
            circle,
            rgba(183, 138, 58, .055),
            transparent 68%
        );

    pointer-events: none;
}


.course-included-section::after {
    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    right: -350px;
    bottom: -420px;

    background:
        radial-gradient(
            circle,
            rgba(23, 63, 52, .045),
            transparent 68%
        );

    pointer-events: none;
}


/* =========================================================
   HEADER
   ========================================================= */

.course-included__header {
    position: relative;

    max-width: 850px;

    margin: 0 auto 48px;

    text-align: center;

    z-index: 2;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.course-included__header
.course-section-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 17px;

    color: var(--ci-gold);

    font-size: .57rem;

    font-weight: 700;

    letter-spacing: .24em;

    text-transform: uppercase;
}


.course-included__header
.course-section-eyebrow::before,
.course-included__header
.course-section-eyebrow::after {

    content: "";

    width: 38px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--ci-gold)
        );
}


.course-included__header
.course-section-eyebrow::after {

    background:
        linear-gradient(
            90deg,
            var(--ci-gold),
            transparent
        );
}


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

.course-included__header h2 {

    margin: 0;

    color: var(--ci-green);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            2.45rem,
            4vw,
            4rem
        );

    font-weight: 400;

    line-height: 1.06;

    letter-spacing: -.045em;
}


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

.course-included__header p {

    max-width: 690px;

    margin: 17px auto 0;

    color: var(--ci-muted);

    font-size: .78rem;

    line-height: 1.85;
}


/* =========================================================
   TWO COLUMN AREA
   ========================================================= */

.course-included__columns {

    position: relative;

    display: grid;

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

    gap: 20px;

    max-width: 1280px;

    margin: 0 auto;

    z-index: 2;
}


/* =========================================================
   MAIN CARDS
   ========================================================= */

.included-column,
.excluded-column {

    position: relative;

    padding: 28px 29px 25px;

    background:
        rgba(
            255,
            253,
            248,
            .88
        );

    border: 1px solid var(--ci-border);

    border-radius: 10px;

    box-shadow:
        0 18px 48px
        rgba(
            22,
            55,
            44,
            .065
        );

    overflow: hidden;
}


/* =========================================================
   INCLUDED CARD ACCENT
   ========================================================= */

.included-column {

    border-top:
        2px solid
        rgba(
            23,
            63,
            52,
            .75
        );
}


/* =========================================================
   EXCLUDED CARD
   ========================================================= */

.excluded-column {

    border-top:
        2px solid
        rgba(
            150,
            130,
            89,
            .38
        );

    background:
        rgba(
            250,
            248,
            241,
            .76
        );
}


/* =========================================================
   COLUMN HEADING
   ========================================================= */

.included-column__heading,
.excluded-column__heading {

    display: flex;

    align-items: center;

    gap: 14px;

    padding-bottom: 21px;

    margin-bottom: 4px;

    border-bottom:
        1px solid
        rgba(
            23,
            63,
            52,
            .10
        );
}


/* =========================================================
   HEADING ICON
   ========================================================= */

.included-column__icon,
.excluded-column__icon {

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 45px;

    width: 45px;
    height: 45px;

    border-radius: 50%;

    font-family:
        Arial,
        sans-serif;

    font-size: 1rem;

    font-weight: 400;
}


/* INCLUDED ICON */

.included-column__icon {

    color: #fff;

    background:
        var(--ci-green);

    box-shadow:
        0 7px 18px
        rgba(
            23,
            63,
            52,
            .14
        );
}


/* EXCLUDED ICON */

.excluded-column__icon {

    color:
        var(--ci-gold);

    background:
        rgba(
            183,
            138,
            58,
            .08
        );

    border:
        1px solid
        rgba(
            183,
            138,
            58,
            .18
        );

    font-size: 1.2rem;
}


/* =========================================================
   HEADING TEXT
   ========================================================= */

.included-column__heading > div,
.excluded-column__heading > div {

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.included-column__heading > div > span,
.excluded-column__heading > div > span {

    color: var(--ci-gold);

    font-size: .52rem;

    font-weight: 700;

    letter-spacing: .18em;

    text-transform: uppercase;
}


.included-column__heading h3,
.excluded-column__heading h3 {

    margin: 0;

    color: var(--ci-green);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.35rem;

    font-weight: 500;

    line-height: 1.15;
}


/* =========================================================
   LIST
   ========================================================= */

.included-list,
.excluded-list {

    display: flex;

    flex-direction: column;
}


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

.included-item,
.excluded-item {

    position: relative;

    display: grid;

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

    gap: 11px;

    padding: 16px 3px;

    border-bottom:
        1px solid
        rgba(
            23,
            63,
            52,
            .075
        );
}


.included-item:last-child,
.excluded-item:last-child {

    border-bottom: none;

}


/* =========================================================
   ITEM MARKER
   ========================================================= */

.included-item__marker,
.excluded-item__marker {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 25px;
    height: 25px;

    margin-top: 1px;

    border-radius: 50%;

    font-size: .66rem;

    font-weight: 700;
}


/* INCLUDED CHECK */

.included-item__marker {

    color:
        var(--ci-green);

    background:
        rgba(
            23,
            63,
            52,
            .075
        );

    border:
        1px solid
        rgba(
            23,
            63,
            52,
            .13
        );
}


/* EXCLUDED CROSS */

.excluded-item__marker {

    color:
        #9a8560;

    background:
        rgba(
            183,
            138,
            58,
            .065
        );

    border:
        1px solid
        rgba(
            183,
            138,
            58,
            .14
        );
}


/* =========================================================
   ITEM TITLE
   ========================================================= */

.included-item h4,
.excluded-item h4 {

    margin: 0 0 4px;

    color:
        var(--ci-green);

    font-size: .71rem;

    font-weight: 700;

    line-height: 1.35;
}


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

.included-item p,
.excluded-item p {

    margin: 0;

    color:
        var(--ci-muted);

    font-size: .59rem;

    line-height: 1.65;
}


/* =========================================================
   SUBTLE HOVER
   ========================================================= */

.included-item,
.excluded-item {

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


.included-item:hover {

    padding-left: 8px;

    background:
        rgba(
            23,
            63,
            52,
            .018
        );
}


.excluded-item:hover {

    padding-left: 8px;

    background:
        rgba(
            183,
            138,
            58,
            .018
        );
}


/* =========================================================
   BOTTOM NOTE
   ========================================================= */

.course-included__note {

    position: relative;

    display: flex;

    align-items: center;

    gap: 13px;

    max-width: 1280px;

    margin: 25px auto 0;

    padding: 17px 21px;

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

    border:
        1px solid
        rgba(
            23,
            63,
            52,
            .09
        );

    border-radius: 7px;

    box-shadow:
        0 10px 25px
        rgba(
            22,
            55,
            44,
            .035
        );

    z-index: 2;
}


.course-included__note::before {

    content: "✦";

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 27px;

    width: 27px;
    height: 27px;

    color:
        var(--ci-gold);

    font-size: .62rem;

    background:
        rgba(
            183,
            138,
            58,
            .08
        );

    border-radius: 50%;
}


.course-included__note strong {

    color:
        var(--ci-green);

    font-size: .64rem;

    white-space: nowrap;
}


.course-included__note span {

    color:
        var(--ci-muted);

    font-size: .58rem;

    line-height: 1.5;
}


.course-included__note a {

    display: inline-flex;

    align-items: center;

    margin-left: auto;

    color:
        var(--ci-green);

    font-size: .56rem;

    font-weight: 700;

    letter-spacing: .06em;

    text-decoration: none;

    white-space: nowrap;

    transition:
        color .2s ease,
        transform .2s ease;
}


.course-included__note a:hover {

    color:
        var(--ci-gold);

    transform:
        translateX(3px);
}


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

@media (max-width: 1000px) {

    .course-included-section {

        padding:
            85px 0;

    }


    .course-included__columns {

        gap:
            16px;

    }


    .included-column,
    .excluded-column {

        padding:
            24px 22px;

    }


    .included-column__heading h3,
    .excluded-column__heading h3 {

        font-size:
            1.2rem;

    }


    .course-included__note {

        flex-wrap:
            wrap;

    }


    .course-included__note a {

        margin-left:
            40px;

    }

}


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

@media (max-width: 767px) {

    .course-included-section {

        padding:
            70px 0;

    }


    .course-included__header {

        margin-bottom:
            30px;

    }


    .course-included__header
    .course-section-eyebrow {

        font-size:
            .49rem;

        letter-spacing:
            .18em;

    }


    .course-included__header
    .course-section-eyebrow::before,
    .course-included__header
    .course-section-eyebrow::after {

        width:
            24px;

    }


    .course-included__header h2 {

        font-size:
            2.25rem;

    }


    .course-included__header p {

        font-size:
            .68rem;

        line-height:
            1.75;

    }


    /* COLUMNS */

    .course-included__columns {

        grid-template-columns:
            1fr;

        gap:
            18px;

    }


    .included-column,
    .excluded-column {

        padding:
            21px 18px;

    }


    /* HEADINGS */

    .included-column__heading,
    .excluded-column__heading {

        padding-bottom:
            17px;

    }


    .included-column__icon,
    .excluded-column__icon {

        flex-basis:
            40px;

        width:
            40px;

        height:
            40px;

    }


    .included-column__heading h3,
    .excluded-column__heading h3 {

        font-size:
            1.12rem;

    }


    /* ITEMS */

    .included-item,
    .excluded-item {

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

        gap:
            9px;

        padding:
            14px 1px;

    }


    .included-item__marker,
    .excluded-item__marker {

        width:
            23px;

        height:
            23px;

    }


    .included-item h4,
    .excluded-item h4 {

        font-size:
            .68rem;

    }


    .included-item p,
    .excluded-item p {

        font-size:
            .57rem;

    }


    /* NOTE */

    .course-included__note {

        align-items:
            flex-start;

        flex-wrap:
            wrap;

        gap:
            9px;

        margin-top:
            18px;

        padding:
            16px;

    }


    .course-included__note strong {

        font-size:
            .62rem;

    }


    .course-included__note span {

        flex-basis:
            calc(100% - 40px);

        font-size:
            .56rem;

    }


    .course-included__note a {

        width:
            100%;

        margin:
            4px 0 0 40px;

        padding-top:
            5px;

    }

}


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

@media (max-width: 420px) {

    .course-included__header h2 {

        font-size:
            2rem;

    }


    .included-column,
    .excluded-column {

        padding:
            19px 15px;

    }


    .included-column__heading h3,
    .excluded-column__heading h3 {

        font-size:
            1.04rem;

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .included-item,
    .excluded-item,
    .course-included__note a {

        transition:
            none;

    }

}