<style>
/* =========================
   FOOTER
========================= */

.ayurveda-footer {
    position: relative;

    overflow: hidden;

    padding-top: 120px;

    background:
        linear-gradient(135deg,
            #8B4A4A,
            #9D5A5A);

    color: white;
}


/* =========================
   DECOR
========================= */

.footer-flower,
.footer-leaf {
    position: absolute;

    pointer-events: none;

    opacity: 0.95;
}

.flower-1 {
    top: 0;
    left: -1%;
    transform: rotate(20deg);
    width: 240px;
}

.flower-2 {
    right: 0;
    bottom: 0;

    width: 240px;
}

.leaf-1 {
    top: 60px;
    right: 14%;

    width: 120px;
}

.leaf-2 {
    bottom: 0px;
    left: 6%;

    width: 180px;
}


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

.footer-wrapper {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 1fr 520px;

    gap: 80px;

    align-items: center;
}


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

.footer-left {
    max-width: 620px;
}


/* LOGO */

.footer-logo {
    width: 340px;

    margin-bottom: 30px;
}

.footer-logo img {
    width: 100%;
}


/* ABOUT */

.footer-about {
    font-size: 17px;
    line-height: 1.9;

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

    margin-bottom: 50px;
}


/* =========================
   INFO WRAP
========================= */

.footer-info-wrap {
    display: flex;
    flex-wrap: wrap;

    gap: 40px;
}


/* INFO */

.footer-info {
    min-width: 180px;
}

.footer-info h4 {
    font-size: 14px;
    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    color: #F3D19C;

    margin-bottom: 16px;
}

.footer-info p,
.footer-info a {
    display: block;

    font-size: 15px;
    line-height: 1.9;

    text-decoration: none;

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


/* =========================
   MAP
========================= */

.footer-map-wrap {
    position: relative;
}

.footer-map-card {
    position: relative;

    overflow: hidden;

    border-radius: 34px;

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

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.14);
}

.footer-map-card iframe {
    width: 100%;
    height: 520px;

    border: none;

    filter:
        saturate(0.7) contrast(0.95) brightness(0.92);
}


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

.footer-bottom {
    position: relative;

    z-index: 2;

    margin-top: 90px;

    padding: 28px 0;

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

    text-align: center;
}

.footer-bottom p {
    font-size: 14px;

    color:
        rgba(255, 255, 255, 0.65);
}


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

@media (max-width: 1100px) {

    .footer-wrapper {
        grid-template-columns: 1fr;

        gap: 60px;
    }

    .footer-map-card iframe {
        height: 420px;
    }

}

@media (max-width: 768px) {

    .ayurveda-footer {
        padding-top: 80px;
    }

    .footer-logo {
        width: 240px;
    }

    .footer-about {
        font-size: 15px;
    }

    .footer-info-wrap {
        flex-direction: column;

        gap: 28px;
    }

    .footer-map-card {
        border-radius: 24px;

        border-width: 6px;
    }

    .footer-map-card iframe {
        height: 320px;
    }

    .footer-bottom {
        margin-top: 60px;
    }

    .flower-1 {
        width: 140px;
    }

    .flower-2 {
        width: 160px;
    }

}
</style>

<footer class="ayurveda-footer">

    <!-- DECOR ELEMENTS -->

    <img src="images/15.png" class="footer-flower flower-1" alt="">
    <img src="images/16.png" class="footer-flower flower-2" alt="">
    <!-- <img src="images/louts-2.png" class="footer-leaf leaf-1" alt=""> -->
    <img src="images/18.png" class="footer-leaf leaf-2" alt="">

    <div class="container">

        <div class="footer-wrapper">

            <!-- LEFT -->

            <div class="footer-left">

                <!-- LOGO -->

                <div class="footer-logo">
                    <img src="images/SKS Logo Text White.png" alt="">
                </div>

                <p class="footer-about">
                    SKS Ayurvedic Medical College & Hospital provides
                    holistic Ayurvedic education with modern learning,
                    clinical exposure, and wellness-focused academic
                    experiences.
                </p>

                <!-- INFO -->

                <div class="footer-info-wrap">

                    <!-- ADDRESS -->

                    <div class="footer-info">

                        <h4>
                            Address
                        </h4>

                        <p>
                            SKS Ayurvedic Medical College & Hospital,
                            Mathura, Uttar Pradesh
                        </p>

                    </div>

                    <!-- CONTACT -->

                    <div class="footer-info">

                        <h4>
                            Contact
                        </h4>

                        <a href="tel:+919999999999">
                            +91 99999 99999
                        </a>

                        <a href="mailto:admission@sksayurveda.in">
                            admission@sksayurveda.in
                        </a>

                    </div>

                    <!-- HOURS -->

                    <!-- <div class="footer-info">

                        <h4>
                            Admission Support
                        </h4>

                        <p>
                            Monday to Saturday
                        </p>

                        <p>
                            9:00 AM to 6:00 PM
                        </p>

                    </div> -->

                </div>

            </div>

            <!-- RIGHT -->

            <div class="footer-map-wrap">

                <div class="footer-map-card">

                    <img src="images/map.png" alt="">

                </div>

            </div>

        </div>

        <!-- BOTTOM -->

        <div class="footer-bottom">

            <p>
                © 2026 SKS Ayurvedic Medical College & Hospital. All Rights Reserved.
            </p>

        </div>

    </div>

</footer>