/* =========================================================
   COURSE HERO
========================================================= */

.hamsa-course-hero {

    position: relative;

    margin: 0 0 40px;

    padding: 56px 56px;

    border-radius: 28px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #04122f 0%,
            #0a1f4d 100%
        );

    box-shadow:
        0 18px 46px rgba(0,0,0,.18);
}


/* =========================================================
   HERO CONTENT WRAPPER
========================================================= */

.hamsa-course-hero-content {

    position: relative;
    z-index: 2;

    width: 100%;
}


/* =========================================================
   HERO INNER GRID
========================================================= */

.hamsa-course-hero-inner {

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(320px, .85fr);

    align-items: center;

    gap: 50px;

    width: 100%;
}


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

.hamsa-course-hero-text {

    width: 100%;
}


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

.hamsa-course-title {

    margin: 0 0 18px;

    font-size: clamp(
        34px,
        5vw,
        54px
    );

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -.03em;

    color: #ffffff;
}


.hamsa-course-title::after {

    content: '';

    display: block;

    width: 80px;
    height: 4px;

    margin-top: 18px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #2f6bff,
            #0d53e8
        );
}


/* =========================================================
   SUBTITLE
========================================================= */

.hamsa-course-subtitle {

    margin: 0 0 30px;

    max-width: 620px;

    font-size: 18px;

    line-height: 1.8;

    color:
        rgba(255,255,255,.90);
}


/* =========================================================
   CTA BUTTON
========================================================= */

.hamsa-course-hero-btn {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 54px;

    padding: 0 34px;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            #1f66f2,
            #1556d7
        );

    color: #ffffff !important;

    text-decoration: none;

    font-size: 15px;
    font-weight: 700;

    transition:
        transform .25s ease,
        box-shadow .25s ease;

    box-shadow:
        0 12px 28px rgba(27,98,245,.30);
}

.hamsa-course-hero-btn:hover {

    transform:
        translateY(-2px);
}


/* =========================================================
   HERO IMAGE
========================================================= */

.hamsa-course-hero-image {

    position: relative;

    width: 100%;
    max-width: 430px;

    margin-left: auto;

    border-radius: 28px;

    overflow: hidden;

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

    border:
        1px solid rgba(255,255,255,.08);

    box-shadow:
        0 20px 40px rgba(0,0,0,.20);
}

.hamsa-course-hero-image img {

    display: block;

    width: 100%;

    height: auto;

    object-fit: cover;
}


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

@media (max-width: 1024px) {

    .hamsa-course-hero {

        padding: 48px 38px;
    }

    .hamsa-course-hero-inner {

        gap: 36px;

        grid-template-columns:
            1fr 320px;
    }

    .hamsa-course-title {

        font-size: 42px;
    }
}


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

@media (max-width: 768px) {

    .hamsa-course-hero {

        padding: 36px 24px;

        border-radius: 22px;
    }

    .hamsa-course-hero-inner {

        grid-template-columns:
            1fr;

        gap: 28px;
    }

    .hamsa-course-hero-image {

        max-width: 100%;

        margin: 0 auto;
    }

    .hamsa-course-title {

        font-size: 30px;
    }

    .hamsa-course-subtitle {

        font-size: 16px;

        line-height: 1.7;
    }

    .hamsa-course-hero-btn {

        width: 100%;
    }
}