/* =========================================================
   ADI YOGPEETH
   COMPONENT 20 — COURSE TRAVEL
   PREMIUM ESSENTIAL TRAVEL CHECKLIST
   ========================================================= */


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

.course-travel-section {

    position: relative;

    padding:
        90px 0
        95px;

    background:
        #fafaf8;

    color:
        #173f34;

    overflow:
        hidden;

}


/* =========================================================
   BACKGROUND DETAIL
   ========================================================= */

.course-travel-section::before {

    content: "";

    position: absolute;

    width:
        650px;

    height:
        650px;

    top:
        -430px;

    right:
        -320px;

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

    pointer-events:
        none;

}


/* =========================================================
   SECOND BACKGROUND DETAIL
   ========================================================= */

.course-travel-section::after {

    content: "";

    position: absolute;

    width:
        500px;

    height:
        500px;

    bottom:
        -350px;

    left:
        -300px;

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

    pointer-events:
        none;

}


/* =========================================================
   CONTAINER
   ========================================================= */

.course-travel-section
.container {

    position:
        relative;

    z-index:
        2;

}


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

.course-travel__header {

    position:
        relative;

    max-width:
        1280px;

    margin:
        0 auto 34px;

    z-index:
        2;

}


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

.course-travel__header
.course-section-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        11px;

    margin:
        0 0 11px;

    color:
        #b2873c;

    font-size:
        .56rem;

    font-weight:
        700;

    letter-spacing:
        .19em;

    line-height:
        1.2;

    text-transform:
        uppercase;

}


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

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

    content:
        "";

    width:
        34px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            #b2873c,
            transparent
        );

}


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

.course-travel__header h2 {

    max-width:
        900px;

    margin:
        0;

    color:
        #173f34;

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

    font-size:
        clamp(
            2.2rem,
            3.4vw,
            3.25rem
        );

    font-weight:
        500;

    line-height:
        1.06;

    letter-spacing:
        -.045em;

}


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

.course-travel__description {

    max-width:
        690px;

    margin:
        13px 0 0;

    color:
        #727a75;

    font-size:
        .65rem;

    line-height:
        1.75;

}


/* =========================================================
   TRAVEL GRID
   ========================================================= */

.course-travel__grid {

    position:
        relative;

    display:
        grid;

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

    gap:
        17px;

    max-width:
        1280px;

    margin:
        0 auto;

    z-index:
        2;

}


/* =========================================================
   TRAVEL CARD
   ========================================================= */

.travel-card {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    min-height:
        215px;

    padding:
        25px 22px 20px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fdfdfb 100%
        );

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

    border-radius:
        10px;

    box-shadow:
        0 6px 20px
        rgba(
            23,
            63,
            52,
            .045
        );

    overflow:
        hidden;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

}


/* =========================================================
   GOLD TOP ACCENT
   ========================================================= */

.travel-card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        22px;

    width:
        38px;

    height:
        2px;

    background:
        #b2873c;

    border-radius:
        0 0 3px 3px;

    opacity:
        .8;

}


/* =========================================================
   CARD BACKGROUND GLOW
   ========================================================= */

.travel-card::after {

    content:
        "";

    position:
        absolute;

    width:
        180px;

    height:
        180px;

    top:
        -120px;

    right:
        -110px;

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

    pointer-events:
        none;

}


/* =========================================================
   CARD HOVER
   ========================================================= */

.travel-card:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(
            183,
            138,
            58,
            .22
        );

    box-shadow:
        0 18px 38px
        rgba(
            23,
            63,
            52,
            .085
        );

}


/* =========================================================
   CARD TOP
   ========================================================= */

.travel-card__top {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    min-height:
        50px;

    margin:
        0 0 17px;

    z-index:
        2;

}


/* =========================================================
   ICON CONTAINER
   ========================================================= */

.travel-card__icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 48px;

    width:
        48px;

    height:
        48px;

    color:
        #17473a;

    background:
        linear-gradient(
            145deg,
            rgba(
                23,
                63,
                52,
                .065
            ),
            rgba(
                183,
                138,
                58,
                .035
            )
        );

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

    border-radius:
        9px;

    box-shadow:
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            .85
        );

    transition:
        color .3s ease,
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;

}


/* =========================================================
   SVG ICON
   ========================================================= */

.travel-card__icon svg {

    display:
        block;

    width:
        29px;

    height:
        29px;

    overflow:
        visible;

}


/* =========================================================
   SVG STROKES
   ========================================================= */

.travel-card__icon svg path,
.travel-card__icon svg rect,
.travel-card__icon svg circle {

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.45;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


/* =========================================================
   ICON HOVER
   ========================================================= */

.travel-card:hover
.travel-card__icon {

    color:
        #a9782d;

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

    border-color:
        rgba(
            183,
            138,
            58,
            .22
        );

    transform:
        translateY(-2px);

}


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

.travel-card__top h3 {

    position:
        relative;

    margin:
        0;

    color:
        #183a31;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        .78rem;

    font-weight:
        700;

    line-height:
        1.35;

    letter-spacing:
        -.008em;

}


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

.travel-card__description {

    position:
        relative;

    max-width:
        310px;

    margin:
        0;

    color:
        #626b66;

    font-size:
        .61rem;

    line-height:
        1.78;

    z-index:
        2;

}


/* =========================================================
   READ MORE
   ========================================================= */

.travel-card__link {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    width:
        fit-content;

    margin-top:
        auto;

    padding-top:
        18px;

    color:
        #173f34;

    font-size:
        .55rem;

    font-weight:
        700;

    letter-spacing:
        .015em;

    line-height:
        1;

    text-decoration:
        none;

    z-index:
        2;

    transition:
        color .25s ease,
        gap .25s ease;

}


/* =========================================================
   READ MORE HOVER
   ========================================================= */

.travel-card__link:hover {

    color:
        #b2873c;

    gap:
        11px;

}


/* =========================================================
   ARROW
   ========================================================= */

.travel-card__arrow {

    font-size:
        .86rem;

    line-height:
        1;

}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1400px) {

    .course-travel-section {

        padding:
            105px 0
            110px;

    }


    .course-travel__header {

        margin-bottom:
            40px;

    }


    .course-travel__grid {

        gap:
            19px;

    }


    .travel-card {

        min-height:
            225px;

        padding:
            27px 24px 22px;

    }


    .travel-card__icon {

        flex-basis:
            50px;

        width:
            50px;

        height:
            50px;

    }


    .travel-card__icon svg {

        width:
            30px;

        height:
            30px;

    }


    .travel-card__top h3 {

        font-size:
            .8rem;

    }


    .travel-card__description {

        font-size:
            .62rem;

    }

}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1199px) {

    .course-travel__grid {

        gap:
            13px;

    }


    .travel-card {

        min-height:
            205px;

        padding:
            22px 18px 18px;

    }


    .travel-card__icon {

        flex-basis:
            44px;

        width:
            44px;

        height:
            44px;

    }


    .travel-card__icon svg {

        width:
            27px;

        height:
            27px;

    }


    .travel-card__top h3 {

        font-size:
            .72rem;

    }

}


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

@media (max-width: 900px) {

    .course-travel-section {

        padding:
            75px 0
            80px;

    }


    .course-travel__grid {

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

        gap:
            14px;

    }


    .travel-card {

        min-height:
            195px;

    }

}


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

@media (max-width: 767px) {

    .course-travel-section {

        padding:
            65px 0
            70px;

    }


    .course-travel__header {

        margin-bottom:
            26px;

    }


    .course-travel__header
    .course-section-eyebrow {

        margin-bottom:
            9px;

        font-size:
            .49rem;

        letter-spacing:
            .17em;

    }


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

        width:
            24px;

    }


    .course-travel__header h2 {

        font-size:
            2rem;

        line-height:
            1.08;

    }


    .course-travel__description {

        margin-top:
            9px;

        font-size:
            .61rem;

        line-height:
            1.7;

    }


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

    .course-travel__grid {

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

        gap:
            10px;

    }


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

    .travel-card {

        min-height:
            170px;

        padding:
            17px 14px 14px;

        border-radius:
            8px;

    }


    .travel-card::before {

        left:
            14px;

        width:
            27px;

    }


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

    .travel-card__top {

        gap:
            8px;

        min-height:
            40px;

        margin-bottom:
            12px;

    }


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

    .travel-card__icon {

        flex:
            0 0 38px;

        width:
            38px;

        height:
            38px;

        border-radius:
            7px;

    }


    .travel-card__icon svg {

        width:
            24px;

        height:
            24px;

    }


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

    .travel-card__top h3 {

        font-size:
            .62rem;

        line-height:
            1.3;

    }


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

    .travel-card__description {

        font-size:
            .53rem;

        line-height:
            1.65;

    }


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

    .travel-card__link {

        padding-top:
            12px;

        font-size:
            .50rem;

    }

}


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

@media (max-width: 420px) {

    .course-travel__grid {

        grid-template-columns:
            1fr;

    }


    .travel-card {

        min-height:
            155px;

    }

}


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

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

    .travel-card,
    .travel-card__icon,
    .travel-card__link {

        transition:
            none;

    }

}