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

.section-title{
    text-align:center;
    margin-bottom:50px;
}

.section-title span{
    color:#0c4da2;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
}

.section-title h2{
    font-size:42px;
    margin-top:10px;
    color:#08254d;
}


.tabs-wrapper{
    display:flex;
    gap:30px;
    align-items:flex-start;
}

/* LEFT SIDE */

.tabs-navv{
    width:320px;
    background:#fff;
    border-radius:5px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    position:sticky;
    top:100px;
}

.tab-btn{
    width: 100%;
    border: none;
    background: #fff;
    padding: 12px 17px;
    text-align: left;
    cursor: pointer;
    font-size: 17px;
    font-weight: 500;
    /* border-bottom: 1px solid #eee; */
    transition: .3s;
    border-radius: 2px;
}

.tab-btn:hover{
    /*background:#f5f8ff;*/
}

.tab-btn.active{
    background:#242544;
    color:#fff;
}

/* RIGHT SIDE */

.tabs-content{
    flex:1;
}

.tab-pane {
    display: none;
    background: #fff;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    animation: fadeIn .5s ease;
}

.tab-pane.active{
    display:block;
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.tab-pane img{
    width:100%;
    height:420px;
    object-fit:cover;
    border-radius:15px;
    margin-bottom:25px;
}

.tab-pane h3{
    font-size: 28px;
    margin: 0px 0 10px;
    color: #242544;
    font-weight: 500;
}

.tab-pane p{
    /*color:#555;*/
    /*line-height:1.8;*/
    /*margin-bottom:15px;*/
}

.highlight-box{
    margin-top:25px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

.highlight{
    background:#242544;
    padding:20px;
    text-align:center;
    border-radius:12px;
}

.highlight h4{
    color:#fff;
    font-size:28px;
    margin-bottom:0px;
}

.highlight span{
    font-size:14px;
    color: #ffff;
}

/* MOBILE */

@media(max-width:991px){

.tabs-wrapper{
    flex-direction:column;
}

.tabs-navv{
    width:100%;
    position:relative;
    top:auto;
}

.highlight-box{
    grid-template-columns:repeat(2,1fr);
}

.section-title h2{
    font-size:32px;
}
}

@media(max-width:576px){

.tab-pane{
    padding:25px;
}

.tab-pane img{
    height:250px;
}

.highlight-box{
    grid-template-columns:1fr;
}
}
.tabs-nav li.active {
    color: #242544;
    border-bottom: 3px solid #242544;
}

.program-grid {
    grid-template-columns: repeat(2, 1fr);
}
</style>

<section class="breadcrumb-area">
    <div class="container">
        <ul class="breadcrumb">
            <li><a href="#">Home</a></li>
            <li>About</li>
            <li>History</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="hero-btns">
                    <a href="#" class="btn primary">Download Brochure</a>
                    <a href="#" class="btn secondary">Virtual Campus Tour</a>
                </div>
            </div>

           
        </div>

    </div>
</section>
<div class="tabs-nav">
    <div class="container">
        <ul class="anchortag">
            <a href="about-gs-university.php"><li>About GS University</li></a>
            <a href="leadership.php"><li>Leadership & Governance</li></a>
            <a href="accreditations-and-rankings.php"><li>Accreditations & Rankings</li></a>
            <a href="history.php"><li class="active">History & Milestones</li></a>
            <a href="#"><li>Mandatory Disclosure</li></a>
            <a href="#"><li>Committees & Cells</li></a>
        </ul>
    </div>
</div>


<section class="about-section pt_100">
    <div class="container">
        <div class="section-head">
            <span>History & milestones</span>
            <h2>Our journey</h2>
            <p>From a vision in 2010 to one of UP's premier medical institutions — here are the defining moments of GS University.</p>
        </div>
                        
        <div class="gs-history-container">
                            <div class="gs-history-timeline">
                                <div class="gs-history-item left">
                                    <div class="gs-history-content">
                                        <span class="gs-history-year">2026</span>
                                        <h3>Foundation</h3>
                                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                                    </div>
                                </div>

                                <div class="gs-history-item right">
                                    <div class="gs-history-content">
                                        <span class="gs-history-year">2025</span>
                                        <h3>Expansion</h3>
                                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                                    </div>
                                </div>

                                <div class="gs-history-item left">
                                    <div class="gs-history-content">
                                        <span class="gs-history-year">2024</span>
                                        <h3>Advanced Healthcare</h3>
                                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                                    </div>
                                </div>
                                
                                <div class="gs-history-item right">
                                    <div class="gs-history-content">
                                        <span class="gs-history-year">2023</span>
                                        <h3>Expansion</h3>
                                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                                    </div>
                                </div>

                                <div class="gs-history-item left">
                                    <div class="gs-history-content">
                                        <span class="gs-history-year">2022</span>
                                        <h3>Advanced Healthcare</h3>
                                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>




</section>




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