<?php include 'header.php';?>
<style>


/* Top Tabs */

.top-tabs{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    margin-bottom:30px;
    border-bottom:1px solid #ddd;
    /*padding-bottom:20px;*/
}

.main-tab{
    background:none;
    border:none;
    font-size:15px;
    cursor:pointer;
    padding: 10px 0px;
}

.main-tab.active{
    color:#242544;
    border-bottom:3px solid #242544;
}

/* Filter Row */

.filter-row{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:35px;
}


.category-tab{
    border: 1px solid #383955;
    background: #fff;
    padding: 1px 20px;
    border-radius: 30px;
    cursor: pointer;
    color: #555;
    font-size: 15px;
}

.category-tab.active{
    background: #383955;
    border-color: #242544;
    color: #fff;
}

/* Cards */

.program-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(350px,0fr));
    gap:25px;
}

.program-card{
    background:#fff;
    border:1px solid #ddd;
    border-radius:10px;
    padding:0px;
    position:relative;
    transition:.3s;
}

.program-card:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 25px rgba(0,0,0,.08);
}

.badge{
    position: absolute;
    right: 20px;
    top: 20px;
    background: #242544;
    color: #fff;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 500;
}

.badge.light{
    background: #dfbf48;
    color: #fff;
}

/*.icon{*/
/*    width:60px;*/
/*    height:60px;*/
/*    background:#e7f8f2;*/
/*    border-radius:16px;*/
/*    margin-bottom:25px;*/
/*}*/

.program-card h2{
    font-size: 24px;
     margin-bottom: 0px; 
    font-weight: 500;
    margin: 12px 0px;
}
.program-card p {
    line-height: normal;
    margin-bottom: 20px;
    font-size: 16px;
}
.sub-title{
    margin-bottom:18px;
}

.info-row{
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 0px 0;
    /* color: #475569; */
    font-size: 12px;
}

.tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top: 10px;
}

.tags span{
    background: #242544;
    color: #fff;
    padding: 0px 14px;
    border-radius: 30px;
    font-size: 10px
}

.card-footer{
     border-top: 1px solid #ddd;
    /* margin-top: 25px; */
    /*padding-top: 20px;*/
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    font-size: 12px;
}

.card-footer strong{
    font-size: 12px;
}

.card-footer a{
    text-decoration:none;
    color:#242544;
    font-weight:600;
}

</style>


<section class="breadcrumb-area">
    <div class="container">
        <ul class="breadcrumb">
            <li><a href="#">Home</a></li>
            <li>Academics</li>
        </ul>
    </div>
</section>

<section class="about-hero">
    <div class="container">

        <div class="hero-content">
            <div class="left-content">
                <span class="badge">Established 2010 • Hapur, Uttar Pradesh</span>

                <h1>Shaping the future of healthcare in India</h1>

                <p>GS University is a premier private medical institution committed to producing compassionate, skilled doctors through world-class education, cutting-edge research, and immersive clinical training.</p>
                
                <div class="gsmbbs-highlights">
                    <div>⏱ 5.5 years (incl. 1 yr internship)</div>
                    <div>⏱ 150 seats</div>
                    <div>⏱  NMC approved</div>
                    <div>⏱  1,130-bed hospital</div>
                </div>

            </div>

           
        </div>

    </div>
</section>




<div class="container">
    <div class="top-tabs">
        <button class="main-tab active" data-level="all"> All Programmes </button>
        <button class="main-tab" data-level="ug"> Undergraduate (UG)</button>
        <button class="main-tab" data-level="pg"> Postgraduate (PG)</button>
        <button class="main-tab" data-level="diploma">  Diploma</button>
    </div>

    <div class="filter-row">
        <button class="category-tab active" data-category="all">All</button>
        <button class="category-tab" data-category="medicine"> Medicine</button>
        <button class="category-tab" data-category="ayurveda">Ayurveda</button>
        <button class="category-tab" data-category="pharmacy">Pharmacy</button>
        <button class="category-tab" data-category="nursing">Nursing</button>
    </div>

    <div class="program-cards">
        
        <div class="program-card" data-level="ug" data-category="medicine">
            <div class="pd_28">
                <div class="badge light"> NMC Approved </div>
                    <div class="icon"> <i class="fa fa-stethoscope"></i> </div>
                    <h2>MBBS</h2>
                    <p class="sub-title"> Bachelor of Medicine </p>
                    <p class="desc"> India's most sought-after medical degree. Comprehensive clinical training from year one in our 1,130-bed teaching hospital. </p>
                    <div class="info-row">
                        <span>⏱ 5.5 Years</span>
                        <span>⏱  150 Seats</span>
                        <span>⏱  Hapur Campus</span>
                    </div>

                    <div class="tags">
                        <span>Theory + Clinical</span>
                        <span>Internship Included</span>
                    </div>
            </div>
            <div class="card-footer">
                <strong>150 Seats</strong>
                <a href="course-details.php">View Details →</a>
            </div>
        </div>


        <div class="program-card" data-level="pg" data-category="medicine">
            <div class="pd_28">
                <div class="badge light">NMC </div>
                <div class="icon"> <i class="fa fa-stethoscope"></i> </div>
                <h2>MD / MS</h2>
                <p class="sub-title"> Doctor of Medicine / Master of Surgery</p>
                <p class="desc">Postgraduate medical programmes across multiple specialisations with extensive clinical exposure and hospital rotations.</p>
                <div class="info-row">
                    <span>⏱ 5.5 Years</span>
                    <span>⏱  150 Seats</span>
                    <span>⏱  Hapur Campus</span>
                </div>
                <div class="tags">
                    <span>16+ Specialisations</span>
                    <span>Hospital Rotations</span>
                </div>
            </div>
            <div class="card-footer">
                <strong>59 Seats</strong>
                <a href="#">View Details →</a>
            </div>
        </div>


        <div class="program-card" data-level="ug" data-category="ayurveda">
            <div class="pd_28">
                <div class="badge light"> NCISM Approved </div>
                <div class="icon"> <i class="fa fa-stethoscope"></i> </div>
                <h2>BAMS</h2>
                <p class="sub-title"> Bachelor of Ayurvedic Medicine & Surgery</p>
                <p class="desc">Ayurvedic medicine and surgery with dedicated Ayurveda hospital, herbal garden and approved curriculum.</p>
                <div class="info-row">
                    <span>⏱ 5.5 Years</span>
                    <span>⏱  150 Seats</span>
                    <span>⏱  Hapur Campus</span>
                </div>
                <div class="tags">
                    <span>Ayurveda Hospital</span>
                    <span>Herbal Garden</span>
                </div>
            </div>
            <div class="card-footer">
                <strong>60 Seats</strong>
                <a href="#">View Details →</a>
            </div>
        </div>

        <div class="program-card" data-level="ug" data-category="pharmacy">
            <div class="pd_28">
                <div class="badge light"> NCISM Approved </div>
                <div class="icon"> <i class="fa fa-stethoscope"></i> </div>
                <h2>B.Pharm</h2>
                <p class="sub-title"> Bachelor of Pharmacy</p>
                <p class="desc">Ayurvedic medicine and surgery with dedicated Ayurveda hospital, herbal garden and approved curriculum.</p>
                <div class="info-row">
                    <span>⏱ 5.5 Years</span>
                    <span>⏱  150 Seats</span>
                    <span>⏱  Hapur Campus</span>
                </div>
                <div class="tags">
                    <span>Ayurveda Hospital</span>
                    <span>Herbal Garden</span>
                </div>
            </div>
            <div class="card-footer">
                <strong>60 Seats</strong>
                <a href="#">View Details →</a>
            </div>
        </div>
        
        <div class="program-card" data-level="ug" data-category="nursing">
            <div class="pd_28">
                <div class="badge light"> NCISM Approved </div>
                <div class="icon"> <i class="fa fa-stethoscope"></i> </div>
                <h2>GNM Nursing</h2>
                <p class="sub-title"> General Nursing & Midwifery</p>
                <p class="desc">Ayurvedic medicine and surgery with dedicated Ayurveda hospital, herbal garden and approved curriculum.</p>
                <div class="info-row">
                    <span>⏱ 5.5 Years</span>
                    <span>⏱  150 Seats</span>
                    <span>⏱  Hapur Campus</span>
                </div>
                <div class="tags">
                    <span>Ayurveda Hospital</span>
                    <span>Herbal Garden</span>
                </div>
            </div>
            <div class="card-footer">
                <strong>60 Seats</strong>
                <a href="#">View Details →</a>
            </div>
        </div>

    </div>

</div>

<script>

const mainTabs = document.querySelectorAll('.main-tab');
const categoryTabs = document.querySelectorAll('.category-tab');
const cards = document.querySelectorAll('.program-card');

let currentLevel = 'all';
let currentCategory = 'all';

mainTabs.forEach(tab => {

    tab.addEventListener('click', () => {

        mainTabs.forEach(btn =>
            btn.classList.remove('active')
        );

        tab.classList.add('active');

        currentLevel = tab.dataset.level;

        filterCards();

    });

});

categoryTabs.forEach(tab => {

    tab.addEventListener('click', () => {

        categoryTabs.forEach(btn =>
            btn.classList.remove('active')
        );

        tab.classList.add('active');

        currentCategory = tab.dataset.category;

        filterCards();

    });

});

function filterCards(){

    cards.forEach(card => {

        const levelMatch =
            currentLevel === 'all' ||
            card.dataset.level === currentLevel;

        const categoryMatch =
            currentCategory === 'all' ||
            card.dataset.category === currentCategory;

        if(levelMatch && categoryMatch){
            card.style.display = 'block';
        }else{
            card.style.display = 'none';
        }

    });

}

</script>






<?php include 'footer.php';?>
