<?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;
}
</style>

<section class="breadcrumb-area">
    <div class="container">
        <ul class="breadcrumb">
            <li><a href="#">Home</a></li>
            <li>Campus Life </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>Life beyond the classroom at GS University</h1>

                <p>A 30-acre lush green campus with everything you need to learn, grow, and thrive — hospital, hostels, library, gym, cricket ground, cafeteria, and a herbal garden, just 45 minutes from Delhi.</p>

                <div class="gsmbbs-highlights">
                    <div>⏱ 1,130-bed hospital </div>
                    <div>⏱  Secure hostels   </div>
                    <div>⏱  Massive library </div>
                    <div>⏱  Sports & gym </div>
                </div>

           </div>
        </div>

    </div>
</section>



<div class="tabs-nav">
    <div class="container">
        <ul class="anchortag">
            <a href="#"><li class="active">Hostel facilities</li></a>
            <a href="#"><li>Library</li></a>
            <a href="#"><li>Sports & GYM</li></a>
            <a href="#"><li>Cafeteria & mess</li></a>
            <a href="#"><li>Campus & Herbal Garden</li></a>
            <a href="#"><li>Gallery</li></a>
        </ul>
    </div>
</div>

<section class="about-section pt_100">
    <div class="container">
        <div class="tabs-wrapper">
            <div class="tabs-navv">
                <button class="tab-btn active" data-tab="tab1"> Boy's & Girl's Hostel </button>
                <button class="tab-btn" data-tab="tab2"> Fees </button>
                <button class="tab-btn" data-tab="tab3"> Amenities </button>
                <button class="tab-btn" data-tab="tab3">  CCTV </button>
            </div>

            <div class="tabs-content">
                <div class="tab-pane active" id="tab1">
                    <section class="gsu_hostel_gallery_wrap">
                        <div class="gsu_hostel_gallery_grid">
                            <div class="gsu_hostel_gallery_card">
                                <img src="assets/img/home/Speciality-img.png" alt="">
                                <div class="gsu_hostel_gallery_caption"> Boys Hostel Room </div>
                            </div>
                            <div class="gsu_hostel_gallery_card">
                                <img src="assets/img/home/Speciality-img.png" alt="">
                                <div class="gsu_hostel_gallery_caption"> Girls Hostel Room </div>
                            </div>

                            <div class="gsu_hostel_gallery_card">
                                <img src="assets/img/home/Speciality-img.png" alt="">
                                <div class="gsu_hostel_gallery_caption"> Study Area </div>
                            </div>

                            <div class="gsu_hostel_gallery_card">
                                <img src="assets/img/home/Speciality-img.png" alt="">
                                <div class="gsu_hostel_gallery_caption">  Dining Hall </div>
                            </div>
                        </div>
                    </section>
                    
                    <!-- Popup -->

                    <div class="gsu_hostel_popup">
                        <span class="gsu_popup_close">&times;</span>
                        <button class="gsu_popup_prev">&#10094;</button>

                        <div class="gsu_popup_content">
                            <img id="gsu_popup_img">
                            <h4 class="gsu_popup_title"></h4>
                        </div>
                        <button class="gsu_popup_next">&#10095;</button>
                    </div>

            </div>

<div class="tab-pane" id="tab2">


<h3>Fees</h3>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset's Body Type sheets. It has survived not only many decades, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised thanks to these sheets and more recently with desktop publishing software including versions of Lorem Ipsum.</p>

</div>

<div class="tab-pane" id="tab3">


<h3>Amenities</h3>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset's Body Type sheets. It has survived not only many decades, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised thanks to these sheets and more recently with desktop publishing software including versions of Lorem Ipsum.</p>

</div>



<div class="tab-pane" id="tab3">


<h3>CCTV</h3>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset's Body Type sheets. It has survived not only many decades, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised thanks to these sheets and more recently with desktop publishing software including versions of Lorem Ipsum.</p>

</div>


</div>

</div>

</div>

</section>



<script>

const tabs = document.querySelectorAll('.tab-btn');
const panes = document.querySelectorAll('.tab-pane');

tabs.forEach(tab => {

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

        tabs.forEach(btn => btn.classList.remove('active'));
        panes.forEach(content => content.classList.remove('active'));

        tab.classList.add('active');

        document
        .getElementById(tab.dataset.tab)
        .classList.add('active');

    });

});

</script>

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