<style>
/* =========================
   BAMS LEARNING SECTION
========================= */

.bams-learning-section {
    position: relative;

    padding: 120px 0;

    overflow: hidden;

    background:
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0.25),
            rgba(239, 231, 218, 0.45));
}


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

.learning-top {
    text-align: center;

    max-width: 780px;

    margin: auto;
    margin-bottom: 80px;
}

.learning-heading {
    font-family: 'Cormorant Garamond', serif;

    font-size: 68px;
    line-height: 1;

    font-weight: 700;

    color: var(--primary);

    margin-bottom: 24px;
}

.learning-description {
    font-size: 17px;
    line-height: 1.9;

    color: #5b5b5b;
}


/* =========================
   WRAPPER
========================= */

.learning-wrapper {
    display: grid;

    grid-template-columns: 1fr .8fr;

    gap: 70px;

    align-items: center;
}


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

.learning-image-wrap {
    position: sticky;

    top: 110px;

    height: 840px;

    overflow: hidden;

    border-radius: 40px;

    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.08);
}

.learning-image-wrap img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* OVERLAY */

.learning-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(to top,
            rgba(0, 0, 0, 0.76),
            rgba(0, 0, 0, 0.08));
}


/* =========================
   FLOATING CARD
========================= */

.learning-floating-card {
    position: absolute;

    left: 34px;
    right: 34px;
    bottom: 34px;

    z-index: 2;

    padding: 34px;

    border-radius: 30px;

    background:
        rgba(255, 255, 255, 0.14);

    backdrop-filter: blur(18px);

    border:
        1px solid rgba(255, 255, 255, 0.1);
}

.floating-card-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;

    padding: 0 18px;

    border-radius: 100px;

    background:
        rgba(255, 255, 255, 0.12);

    color: white;

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

    margin-bottom: 18px;
}

.learning-floating-card h3 {
    font-size: 42px;
    line-height: 1.1;

    color: white;

    margin-bottom: 18px;
}

.learning-floating-card p {
    font-size: 15px;
    line-height: 1.9;

    color:
        rgba(255, 255, 255, 0.82);

    margin-bottom: 28px;
}


/* =========================
   PLANT TAGS
========================= */

.plant-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;
}

.plant-tags span {
    min-height: 42px;

    padding: 0 18px;

    border-radius: 100px;

    background:
        rgba(255, 255, 255, 0.12);

    border:
        1px solid rgba(255, 255, 255, 0.08);

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

    color: white;

    font-size: 14px;
    font-weight: 600;
}


/* =========================
   CONTENT SIDE
========================= */

.learning-content {
    display: flex;
    flex-direction: column;

    gap: 26px;
}


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

.learning-card {
    display: flex;
    gap: 20px;

    padding: 20px;

    border-radius: 32px;

    background:
        rgba(255, 255, 255, 0.72);

    border:
        1px solid rgba(139, 74, 74, 0.08);

    transition: 0.4s ease;

    backdrop-filter: blur(10px);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.04);
}

.learning-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 24px 50px rgba(0, 0, 0, 0.08);
}


/* OFFSET */

.offset-card {
    margin-left: 50px;
}


/* NUMBER */

.learning-number {
    width: 52px;
    height: 52px;

    flex-shrink: 0;

    border-radius: 24px;

    background:
        linear-gradient(135deg,
            #D89A45,
            #C9893D);

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

    color: white;

    font-size: 16px;
    font-weight: 700;
}


/* CONTENT */

.learning-card-content h3 {
    font-size: 17px;
    line-height: 1.2;

    color: #222;

    margin-bottom: 14px;
}

.learning-card-content p {
    font-size: 13.5px;
    line-height: 1.9;

    color: #666;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1100px) {

    .learning-wrapper {
        grid-template-columns: 1fr;
    }

    .learning-image-wrap {
        position: relative;
        top: auto;

        height: 620px;
    }

}

@media (max-width: 768px) {

    .bams-learning-section {
        padding: 80px 0;
    }

    .learning-top {
        margin-bottom: 50px;
    }

    .learning-heading {
        font-size: 44px;
    }

    .learning-description {
        font-size: 15px;
    }

    .learning-wrapper {
        gap: 50px;
    }

    .learning-image-wrap {
        height: 500px;

        border-radius: 28px;
    }

    .learning-floating-card {
        left: 20px;
        right: 20px;
        bottom: 20px;

        padding: 24px;

        border-radius: 24px;
    }

    .learning-floating-card h3 {
        font-size: 30px;
    }

    .learning-card {
        padding: 24px;

        border-radius: 24px;
    }

    .offset-card {
        margin-left: 0;
    }

    .learning-number {
        width: 58px;
        height: 58px;

        border-radius: 18px;

        font-size: 18px;
    }

    .learning-card-content h3 {
        font-size: 22px;
    }

}
</style>

<!-- =========================
     BAMS LEARNING SECTION
========================== -->

<section class="bams-learning-section">

    <div class="container">

        <!-- TOP -->

        <div class="learning-top">

            <div class="section-tag">
                BAMS Program
            </div>

            <h2 class="learning-heading">
                Learn Ayurveda Through
                Practical Experience
                <!-- What You’ll Learn
                During Your BAMS Journey -->
            </h2>

            <p class="learning-description">
                The BAMS program at SKS Ayurvedic Medical College &
                Hospital combines classical Ayurvedic wisdom with
                practical clinical learning, medicinal plant studies,
                and holistic healthcare education.
            </p>

        </div>

        <!-- WRAPPER -->

        <div class="learning-wrapper">

            <!-- LEFT IMAGE -->

            <div class="learning-image-wrap">

                <img src="images/garden.webp" alt="">

                <!-- OVERLAY -->

                <div class="learning-image-overlay"></div>

                <!-- FLOATING CARD -->

                <div class="learning-floating-card">

                    <div class="floating-card-tag">
                        Herbal Learning Environment
                    </div>

                    <h3>
                        Practical Exposure
                        to Medicinal Plants
                    </h3>

                    <p>
                        Students gain hands-on understanding of medicinal
                        herbs, Ayurvedic formulations, and traditional
                        plant-based healthcare concepts through dedicated
                        herbal learning spaces.
                    </p>

                    <!-- PLANTS -->

                    <div class="plant-tags">

                        <span>Ashwagandha</span>
                        <span>Tulsi</span>
                        <span>Haridra</span>
                        <span>Bhringraj</span>
                        <span>Shigru</span>

                    </div>

                </div>

            </div>

            <!-- RIGHT CONTENT -->

            <div class="learning-content">

                <!-- ITEM -->

                <div class="learning-card">

                    <div class="learning-number">
                        01
                    </div>

                    <div class="learning-card-content">

                        <h3>
                            Panchakarma Therapies
                        </h3>

                        <p>
                            Gain practical exposure to detoxification
                            therapies, wellness procedures, and traditional
                            Ayurvedic treatment techniques.
                        </p>

                    </div>

                </div>

                <!-- ITEM -->

                <div class="learning-card offset-card">

                    <div class="learning-number">
                        02
                    </div>

                    <div class="learning-card-content">

                        <h3>
                            Medicinal Plant Science
                        </h3>

                        <p>
                            Learn about medicinal herbs, formulations,
                            therapeutic properties, and Ayurvedic
                            pharmacology concepts.
                        </p>

                    </div>

                </div>

                <!-- ITEM -->

                <div class="learning-card">

                    <div class="learning-number">
                        03
                    </div>

                    <div class="learning-card-content">

                        <h3>
                            Clinical Diagnosis
                        </h3>

                        <p>
                            Understand patient assessment methods,
                            Ayurvedic diagnosis principles, and disease
                            identification approaches.
                        </p>

                    </div>

                </div>

                <!-- ITEM -->

                <div class="learning-card offset-card">

                    <div class="learning-number">
                        04
                    </div>

                    <div class="learning-card-content">

                        <h3>
                            Ayurvedic Anatomy
                        </h3>

                        <p>
                            Study body structure, physiology, and
                            foundational concepts related to holistic
                            healthcare systems.
                        </p>

                    </div>

                </div>

                <!-- ITEM -->

                <div class="learning-card">

                    <div class="learning-number">
                        05
                    </div>

                    <div class="learning-card-content">

                        <h3>
                            Internal Medicine
                        </h3>

                        <p>
                            Build understanding of disease management,
                            Ayurvedic medicine practices, and therapeutic
                            applications.
                        </p>

                    </div>

                </div>

                <!-- ITEM -->

                <div class="learning-card offset-card">

                    <div class="learning-number">
                        06
                    </div>

                    <div class="learning-card-content">

                        <h3>
                            Holistic Wellness
                        </h3>

                        <p>
                            Explore preventive healthcare, lifestyle
                            balance, wellness practices, and holistic
                            healing principles.
                        </p>

                    </div>

                </div>

            </div>

        </div>

    </div>

</section>