@extends('layouts.app3')

@section('title', 'Convocation')

@section('content')
<style>
.convocation-grid{
    display: flex;
    gap: 15px;           /* space between buttons */
    flex-wrap: nowrap;   /* keep in one row */
    justify-content: center; /* center horizontally */
}

.event-card_bottom a{
    display: inline-block;
}
.cta-area-1 {
    position: relative;
    padding: 38px 0;
    background: linear-gradient(135deg, #ecf1f9, #ecf4ff);!important
</style>

<div class="breadcumb-wrapper" data-bg-src="document/academics/Exam/Exam_banner.jpg" data-overlay="title" data-opacity="8">
    <div class="breadcumb-shape" data-bg-src="assets/img/bg/breadcumb_shape_1_1.png"></div>

    <div class="shape-mockup breadcumb-shape2 jump d-lg-block d-none" data-right="30px" data-bottom="30px">
        <img src="assets/img/bg/breadcumb_shape_1_2.png" alt="shape">
    </div>

    <div class="shape-mockup breadcumb-shape3 jump-reverse d-lg-block d-none" data-left="50px" data-bottom="80px">
        <img src="assets/img/bg/breadcumb_shape_1_3.png" alt="shape">
    </div>

    <div class="container">
        <div class="breadcumb-content text-center">
            <h1 class="breadcumb-title">Convocation</h1>
        </div>
    </div>
</div>

      <section class="space">
<div class="container">

<div class="content-header text-center mb-4">
<h2>Convocation</h2>
</div>
           
          <div class="blog-img">
                            <a href="blog-details.html"><img src="document/academics/Exam/12_th_convocation_2026.jpeg" alt="Blog Image"></a>
                              <div class="cta-area-1">
                            
                            <a href="https://www.raiuniversity.edu/blog/12-convocation-2026" class="th-btn style10">View Detail<i class="fa-regular fa-arrow-right ms-2"></i></a>
                        </div>   
                          <div class="convocation-grid">
    <div class="event-card_bottom">
        <a href="https://www.raiuniversity.edu/alumni-convocation" class="th-btn">
            11th Convocation <i class="far fa-arrow-right ms-1"></i>
        </a>
    </div>

    <div class="event-card_bottom">
        <a href="https://www.raiuniversity.edu/alumni-convocation" class="th-btn">
            10th Convocation <i class="far fa-arrow-right ms-1"></i>
        </a>
    </div>

    <div class="event-card_bottom">
        <a href="https://www.raiuniversity.edu/alumni-convocation" class="th-btn">
            9th Convocation <i class="far fa-arrow-right ms-1"></i>
        </a>
    </div>

    <div class="event-card_bottom">
        <a href="https://www.raiuniversity.edu/alumni-convocation" class="th-btn">
            8th Convocation <i class="far fa-arrow-right ms-1"></i>
        </a>
    </div>
</div>

                        </div>
                        </div></section>
        
     @endsection
     <!--********************************
			Code End  Here 
	******************************** -->

    <!-- Scroll To Top -->
    <div class="scroll-top">
        <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
            <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" style="transition: stroke-dashoffset 10ms linear 0s; stroke-dasharray: 307.919, 307.919; stroke-dashoffset: 307.919;"></path>
        </svg>
    </div>

    <!--==============================
    All Js File 
============================== -->
    <!-- Jquery -->
    <script src="assets/js/vendor/jquery-3.6.0.min.js"></script>
    <!-- Slick Slider -->
    <script src="assets/js/slick.min.js"></script>
    <!-- Bootstrap -->
    <script src="assets/js/bootstrap.min.js"></script>
    <!-- Magnific Popup -->
    <script src="assets/js/jquery.magnific-popup.min.js"></script>
    <!-- Counter Up -->
    <script src="assets/js/jquery.counterup.min.js"></script>
    <!-- Circle Progress -->
    <script src="assets/js/circle-progress.js"></script>
    <!-- Range Slider -->
    <script src="assets/js/jquery-ui.min.js"></script>
    <!-- Isotope Filter -->
    <script src="assets/js/imagesloaded.pkgd.min.js"></script>
    <script src="assets/js/isotope.pkgd.min.js"></script>
    <!-- Tilt JS -->
    <script src="assets/js/tilt.jquery.min.js"></script>
    <!-- Tweenmax JS -->
    <script src="assets/js/tweenmax.min.js"></script>
    <!-- Nice Select JS -->
    <script src="assets/js/nice-select.min.js"></script>

    <!-- Main Js File -->
    <script src="assets/js/main.js"></script>
     <!-- exam page script -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>