@extends('layouts.app3')

@section('title', 'Home')

@section('content')

<style>
.slider-box {
      position: relative;
      overflow: hidden;
      border-radius: 10px;
    }

    .slider-box img {
      width: 100%;
      height: 100%;
     
      filter: brightness(100%);
    }
   
    .carousel-item { 
      height: 500px;
    }
     .video-banner {
  position: relative;
  width: 100%;
  height: 600px; /* Banner height */
  overflow: hidden;
}

.banner-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures video fills area */
}

.banner-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}

.banner-content h1 {
  font-size: 3rem;
  font-weight: bold;
}

.banner-content p {
  font-size: 1.2rem;
}
<!----------inquiry ---------->
 
<!----------table ---------->
.course-table {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    background: #ffffff;
  }

  .course-table thead {
    background: linear-gradient(90deg, #0f385f, #000);
    color: white;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .course-table tbody tr {
    transition: all 0.3s ease;
  }

  .course-table tbody tr:nth-child(even) {
    background-color: #f8fbff;
  }

  .course-table tbody tr:hover {
    background-color: #e9f5ff;
    transform: scale(1.01);
  }

  .course-table td {
    padding: 12px 16px;
    font-weight: 500;
    color: #333;
  }

  .course-table td:first-child,
  .course-table td:nth-child(3) {
    font-weight: 600;
    color: #0f385f;
  }

    @media (max-width: 767px) {
      .carousel-item {
        height: 220px;
        
        
      }
    }
</style>
  <!--==============================
Inquiery now button
==============================--> 
  <style>
   

    /* Vertical Inquiry Button */
    .inquiry-btn {
      position: fixed;
      top: 50%;
      right: -50px; /* adjust to control visibility */
      transform: translateY(-50%) rotate(-90deg);
      background-color: #ffc107; /* yellow */
      color: #000;
      font-weight: 600;
      padding: 10px 25px; 
      border-radius: 8px 8px 0 0; 
      text-decoration: none;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
      transition: all 0.3s ease;
      z-index: 9999;
      text-transform: uppercase;
    }

    .inquiry-btn:hover {
      right: -55px;
      background-color: #e0a800;
      color: #fff;
      transform: translateY(-50%) rotate(-90deg) scale(1.05);
    }
    .hero-style1 .hero-subtitle span {
    background-color: #FFC107;}
  </style>
</head>


  <!-- Right Side Vertical Button -->
  <a href="https://www.raiuniversity.edu/Admissions/" class="inquiry-btn">Apply Now</a>





  <!--==============================
video banner
==============================-->
 <!--  <section class="video-banner">
  <video autoplay muted loop playsinline class="banner-video">
    <source src="document/RAI_UNIVERSITY_video_32_9.mp4" type="video/mp4">
  </video> 

 
   
  </div>
</section>-->
 <!--==============================
Hero Area
==============================-->
    <div class="th-hero-wrapper hero-1" id="hero">
        <div class="hero-slider-1 th-carousel" data-fade="true" data-slide-show="1" data-md-slide-show="1" data-dots="true">


           <!-- <div class="th-hero-slide">
                <div class="th-hero-bg" data-opacity="2" data-bg-src="document/banner_4.png"></div> 
                <div class="container">
                    
                </div>
               
            </div>-->


            <div class="th-hero-slide">
                <div class="th-hero-bg" data-overlay="title" data-opacity="8" data-bg-src="assets/img/hero/hero_bg_1_3.jpg"></div>
                <div class="container">
                    <div class="row align-items-center justify-content-center">
                        <div class="col-md-6">
                            <div class="hero-style1">
                                <span class="hero-subtitle" data-ani="slideinleft" data-ani-delay="0.1s"><span>AI-Enabled Techno Campus</span></span>
                                <h1 class="hero-title text-white" data-ani="slideinleft" data-ani-delay="0.4s"> Welcome to</br>
<span class="" style="color: #FFC107;"><b>Rai University</b></span></h1>
                                
                                <div class="btn-group" data-ani="slideinleft" data-ani-delay="0.8s">
                                    <a href="contact.html" class="th-btn style3">Get Started<i class="fas fa-arrow-right ms-2"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 text-lg-end text-center">
                            <div class="hero-img1">
                                <img src="assets/img/hero/hero_thumb_1_3.jpg" alt="hero">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="hero-shape shape1">
                    <img src="assets/img/hero/shape_1_1.png" alt="shape">
                </div>
                <div class="hero-shape shape2">
                    <img src="assets/img/hero/shape_1_2.png" alt="shape">
                </div>
                <div class="hero-shape shape3"></div>

                <div class="hero-shape shape4 shape-mockup jump-reverse" data-right="3%" data-bottom="7%">
                    <img src="assets/img/hero/shape_1_3.png" alt="shape">
                </div>
                <div class="hero-shape shape5 shape-mockup jump-reverse" data-left="0" data-bottom="0">
                    <img src="assets/img/hero/shape_1_4.png" alt="shape">
                </div>
            </div>
        </div>
    </div>
  <!--==============================
Servce Area  
==============================-->
   <!-- <section class="space" data-bg-src="assets/img/bg/course_bg_1.png" id="course-sec">
        <div class="container">
            <div class="title-area text-center mb-50">
                <h2 class="sec-title" style="color: #0f385f;">A Legacy of Learning and Leadership</h2> 
            </div>
            
            
            
            <div class="title-area mb-30">
                
                 <p class="mt-n2 mb-25" style="align:justify">Established with a vision to redefine higher education, Rai University blends academic excellence with practical exposure. Our multidisciplinary approach ensures that every student is ready to meet the challenges of a rapidly evolving world.Established with a vision to redefine higher education, Rai University blends academic excellence with practical exposure. Our multidisciplinary approach ensures that every student is ready to meet the challenges of a rapidly evolving world.</p>
               
               
                
               
                
               
           
        </div>
    </section>-->
     
    <!--==============================
About Area
==============================-->
  <!--  <div class="space overflow-hidden" id="about-sec">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-xl-6">
                    <div class="img-box1 mb-40 mb-xl-0">
                        <div class="img1">
                            <img class="tilt-active" src="document/home/02.jpg" alt="About">
                        </div>
                        <div class="about-grid" data-bg-src="document/home/05.png">
                            <h3 class="about-grid_year"><span class="counter-number">10</span>k<span class="text-theme">+</span></h3>
                            <p class="about-grid_text">Students Active Our Courses</p>
                        </div>
                        <div class="img2">
                            <img class="tilt-active" src="document/home/03.jpg" alt="About">
                        </div>
                        <div class="shape-mockup about-shape1 jump" data-left="-67px" data-bottom="0">
                            <img src="{{ url('/') }}/assets/img/normal/about_1_shape1.png" alt="img">
                        </div>
                    </div>
                </div>
                <div class="col-xl-6">
                    <div class="title-area mb-30">
                        <span class="sub-title"><i class="fal fa-book me-2"></i> About Our University</span>
                        <h2 class="sec-title">Welcome to Rai University.</h2>
                    </div>
                    <p class="mt-n2 mb-25" style="align:justify">Rai University, Ahmedabad a UGC-recognized and NAAC-Accredited University.It stands at the forefront of providing quality education and is committed to upholding societal values through the inclusive growth of all related stakeholders. Rai University has collaborations with various Industries for imparting Industry relevant concepts and develop skills for meeting the different challenges. Leading Industries have joined hands with Rai University and actively participated in imparting Practical and Corporate Skills.Rai University has a strong Mentoring process in place and guide Students not only when they are in the Campus but also after passing out guide the Alumni building a strong relationship and developing a ownership among the stakeholders</p>
                    <div class="row align-items-center">
                        <div class="col-md-auto">
                           <!-- <div class="about-grid_img mb-30 mb-md-0">
                                <img src="document/home/04.jpg" alt="img">
                            </div>-->
                       <!-- </div> -->
                        <!--<div class="col-md-7">
                            <div class="checklist">
                                <ul>
                                    <li>Academic Excellence</li>
                                    <li>Industry Connections & Internships</li>
                                    <li>State-of-the-Art Infrastructure</li>
                                    <li>Experienced Faculty</li>
                                    <li>Placements and Career Support</li>
                                </ul>
                            </div>
                        </div>-->
                   <!--</div>
                    <div class="btn-group mt-40">
                        <a href="about-rai-university" class="th-btn">About More<i class="fa-regular fa-arrow-right ms-2"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>-->
  
  
  
    <!--==============================
  Contact / Recruiters Area
  ==============================-->
  <div class="pt-5 pb-5">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-lg-6">
          <div class="title-area mb-lg-0 text-lg-start text-center">
            <span class="sub-title"><i class="fal fa-book me-2"></i> Our Recruiters</span>
            <h2 class="sec-title mb-0">We Have More Than <span class="text-theme"><span class="counter-number">100</span>+</span> Global Recruiters</h2>
          </div>
        </div>
        <div class="col-lg-6">
    <div class="client-wrap text-lg-end text-center">
        <div class="row gy-40">
            <div class="col-12">

                <div class="th-carousel client-logo-slider"
                     data-slide-show="3"
                     data-arrows="true"
                     data-dots="false"
                     data-autoplay="true"
                     data-autoplay-speed="2500">

                    <div>
                        <a href="#" class="client-thumb client-3d-logo">
                            <img src="{{ url('/') }}/logo/ACC.png" alt="ACC">
                        </a>
                    </div>

                    <div>
                        <a href="#" class="client-thumb client-3d-logo">
                            <img src="{{ url('/') }}/logo/Alite-Project.png" alt="Alite Project">
                        </a>
                    </div>

                    <div>
                        <a href="#" class="client-thumb client-3d-logo">
                            <img src="{{ url('/') }}/logo/Axis-Bank.png" alt="Axis Bank">
                        </a>
                    </div>

                    <div>
                        <a href="#" class="client-thumb client-3d-logo">
                            <img src="{{ url('/') }}/logo/Blue-Star.png" alt="Blue Star">
                        </a>
                    </div>

                    <div>
                        <a href="#" class="client-thumb client-3d-logo">
                            <img src="{{ url('/') }}/logo/Brilliant-Life.png" alt="Brilliant Life">
                        </a>
                    </div>

                    <div>
                        <a href="#" class="client-thumb client-3d-logo">
                            <img src="{{ url('/') }}/logo/Canara-1.png" alt="Canara">
                        </a>
                    </div>

                    <div>
                        <a href="#" class="client-thumb client-3d-logo">
                            <img src="{{ url('/') }}/logo/Canon.png" alt="Canon">
                        </a>
                    </div>

                    <div>
                        <a href="#" class="client-thumb client-3d-logo">
                            <img src="{{ url('/') }}/logo/Cartrade.png" alt="Cartrade">
                        </a>
                    </div>

                    <div>
                        <a href="#" class="client-thumb client-3d-logo">
                            <img src="{{ url('/') }}/logo/Concord.png" alt="Concord">
                        </a>
                    </div>

                    <div>
                        <a href="#" class="client-thumb client-3d-logo">
                            <img src="{{ url('/') }}/logo/Guj-Laboratories.png" alt="Guj Laboratories">
                        </a>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>


<style>
/* ================================
   3D CLIENT LOGO
================================ */

.client-3d-logo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 170px;
    height: 105px;

    margin: 10px auto;
    padding: 18px;

    background: #ffffff;

    border-radius: 16px;

    border: 1px solid rgba(0, 0, 0, 0.08);

    box-shadow:
        0 8px 0 rgba(0, 0, 0, 0.05),
        0 12px 25px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);

    transform: perspective(800px) rotateX(0deg) translateY(0);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;

    overflow: hidden;
}


/* Logo image */

.client-3d-logo img {
    max-width: 100%;
    max-height: 65px;
    width: auto;
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(0 4px 5px rgba(0, 0, 0, 0.18));

    transition:
        transform 0.4s ease,
        filter 0.4s ease;
}


/* Light reflection */

.client-3d-logo::before {
    content: "";
    position: absolute;

    top: -80%;
    left: -100%;

    width: 70%;
    height: 250%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.65),
        transparent
    );

    transform: rotate(25deg);

    transition: left 0.7s ease;

    pointer-events: none;
}


/* Bottom 3D edge */

.client-3d-logo::after {
    content: "";

    position: absolute;

    left: 10px;
    right: 10px;
    bottom: -6px;

    height: 10px;

    background: rgba(0, 0, 0, 0.08);

    border-radius: 0 0 15px 15px;

    filter: blur(3px);

    z-index: -1;
}


/* Hover effect */

.client-3d-logo:hover {

    transform:
        perspective(800px)
        rotateX(5deg)
        rotateY(-5deg)
        translateY(-10px)
        scale(1.04);

    border-color: rgba(26, 126, 131, 0.35);

    box-shadow:
        0 10px 0 rgba(0, 0, 0, 0.06),
        0 25px 40px rgba(0, 0, 0, 0.20),
        0 0 25px rgba(26, 126, 131, 0.15),
        inset 0 1px 0 #ffffff;
}


.client-3d-logo:hover img {

    transform: scale(1.08);

    filter:
        drop-shadow(0 7px 8px rgba(0, 0, 0, 0.25));
}


/* Shine animation */

.client-3d-logo:hover::before {
    left: 140%;
}


/* ================================
   ACTIVE / CENTER LOGO
================================ */

.client-logo-slider .slick-current .client-3d-logo {

    transform:
        perspective(800px)
        translateY(-5px)
        scale(1.03);

    border-color: rgba(26, 126, 131, 0.25);

    box-shadow:
        0 8px 0 #f07f1a;
        0 18px 35px rgba(0, 0, 0, 0.18),
        0 0 20px rgba(26, 126, 131, 0.12);
}


/* ================================
   MOBILE
================================ */

@media (max-width: 767px) {

    .client-3d-logo {
        width: 145px;
        height: 95px;
        padding: 15px;
    }

    .client-3d-logo img {
        max-height: 58px;
    }

}
</style>
      </div>
    </div>
  </div>
  
  <!--==============================
  Why choose us Area
  ==============================-->
  
  <div class="why-area-1 space overflow-hidden">
    <div class="shape-mockup why-shape-1 jump" data-top="10%" data-left="7%">
      <img src="{{ url('/') }}/assets/img/normal/about_1_shape1.png" alt="img">
    </div>
    <div class="shape-mockup why-shape-2" data-bg-src="{{ url('/') }}/assets/img/normal/wcu_1_shape1.png"></div>
    <div class="shape-mockup why-shape-3 jump-reverse" data-bottom="25%" data-right="-3%">
      <img src="{{ url('/') }}/assets/img/normal/wcu_1_shape2.png" alt="img">
    </div>

    <div class="container">
      <div class="row align-items-center">
        <div class="col-xl-6">
          <div class="wcu-img-1">
            <div class="img1">
              <img src="document/home_img.webp" alt="img">
            </div>
            <div class="text-end">
              <a class="th-btn mt-30" href="{{ url('/') }}/Admissions/">Get Started <i class="far fa-arrow-right ms-1"></i></a>
            </div>
          </div>
        </div>
        <div class="col-xl-6">
          <div class="wcu-wrap1">
            <div class="title-area mb-25">
              <span class="sub-title"><i class="fal fa-book me-2"></i> Latest Updates</span>
              <!--<h2 class="sec-title">Latest updates on exams, admissions, and events are posted regularly.</h2>-->
            </div>
            <div class="row gy-4">
              <div class="col-md-12">
                <div class="wcu-box">
                  <div class="wcu-box_icon">
                    <i class="fas fa-check-circle"></i>
                  </div>
                  <div class="wcu-box_details">
                    <h3 class="box-title">Notices</h3>
                    <ul class="wcu-box_tex" style="padding-left: 18px;">
                      <marquee direction="up" scrollamount="3" height="250" onmouseover="this.stop();" onmouseout="this.start();">
                        <div class="notice-title"><a href="document/Campus_life/Notice/2026/aug/notice_marksheet_Distribution.jpg"><span style="font-size:22px;">&#9758;</span>Notice - Marksheet Distribution</a><img src="document/new1.gif" width="40" height="23"></div>
                        <div class="notice-title"><a href="document/Campus_life/Notice/2026/aug/11.Notice-Make_up_Examination_for_Graduating_Batch_2025-26.pdf"><span style="font-size:22px;">&#9758;</span>Notice - Make up Examination Aug 2026</a><img src="document/new1.gif" width="40" height="23"></div>
                        <div class="notice-title"><a href="document/Campus_life/Notice/2026/july/10_Notice-Ph.D._Entrance_Examination_Jul2026.pdf"><span style="font-size:22px;">&#9758;</span>Notice - Ph.D. Entrance Examination July - 2026</a><img src="document/new1.gif" width="40" height="23"></div>
                        <div class="notice-title"><a href="document/Campus_life/Notice/2026/july/Revise_Time_Table_Sp._Supplementary_Examination_July_2026_RSMS.pdf"><span style="font-size:22px;">&#9758;</span>Revise Time Table Sp. Supplementary Examination RSMS July - 2026</a><img src="document/new1.gif" width="40" height="23"></div>
                        <div class="notice-title"><a href="document/Campus_life/Notice/2026/july/Revise_Time_Table_Sp._Supplementary_Examination_July_2026_RSE.pdf"><span style="font-size:22px;">&#9758;</span>Revise Time Table Sp. Supplementary Examination RSE July - 2026</a><img src="document/new1.gif" width="40" height="23"></div>
                        <div class="notice-title"><a href="document/Campus_life/Notice/2026/july/Revise_Time_Table_Sp._Supplementary_Examination_July_2026_SOP.pdf"><span style="font-size:22px;">&#9758;</span>Revise Time Table Sp. Supplementary Examination SOP July - 2026</a><img src="document/new1.gif" width="40" height="23"></div>
                        <div class="notice-title"><a href="document/Campus_life/Notice/2026/july/Revise_Time_Table_Sp._Supplementary_Examination_July_2026_SOL.pdf"><span style="font-size:22px;">&#9758;</span>Revise Time Table Sp. Supplementary Examination SOL July - 2026</a><img src="document/new1.gif" width="40" height="23"></div>
                        <div class="notice-title"><a href="document/Campus_life/Notice/2026/july/Revise_Time_Table_Sp._Supplementary_Examination_July_2026_RSS.pdf"><span style="font-size:22px;">&#9758;</span>Revise Time Table Sp. Supplementary Examination RSS July - 2026</a><img src="document/new1.gif" width="40" height="23"></div>
                        <div class="notice-title"><a href="document/Campus_life/Notice/2026/july/9.Notice-Special_Supplementary_Exam_July- 2026_Revised_Schedule.pdf"><span style="font-size:22px;">&#9758;</span>Notice - Special Supplementary Exam Revised Schedule July - 2026</a><img src="document/new1.gif" width="40" height="23"></div>
                        <div class="notice-title"><a href="document/Campus_life/Notice/2026/july/8. Notice_Special_Supplementary_Exam_July-2026_Postponepment_of_Exam.pdf"><span style="font-size:22px;">&#9758;</span>Notice - Special Supplementary Exam Postponepment July-2026</a><img src="document/new1.gif" width="40" height="23"></div>
                        <div class="notice-title"><a href="document/Campus_life/Notice/2026/july/7.Notice_Special_Supplementary_Exam_July-2026_Release_of_Admit_Card.pdf"><span style="font-size:22px;">&#9758;</span>Notice - Special Supplementary Exam Release of Admit Card July-2026</a><img src="document/new1.gif" width="40" height="23"></div>
                        <div class="notice-title"><a href="document/Campus_life/Notice/2026/july/Jul_Dec_2026_Session_SWAYAM_Credit_Transfer_Approved_Course_List.pdf"><span style="font-size:22px;">&#9758;</span>SWAYAM Credit Transfer Approved Course List Session Jul-Dec 2026</a><img src="document/new1.gif" width="40" height="23"></div>
                        <div class="notice-title"><a href="document/Campus_life/Notice/2026/july/Time_Table_Sp._Supplementary_Examination_July-2026-RSS.pdf"><span style="font-size:22px;">&#9758;</span>Time - Table Sp. Supplementary Examination RSS July-2026</a><img src="document/new1.gif" width="40" height="23"></div>
                        <div class="notice-title"><a href="document/Campus_life/Notice/2026/july/Time_Table_Sp._Supplementary_Examination_July-2026-SOL.pdf"><span style="font-size:22px;">&#9758;</span>Time - Table Sp. Supplementary Examination SOL July-2026</a><img src="document/new1.gif" width="40" height="23"></div>
                        <div class="notice-title"><a href="document/Campus_life/Notice/2026/july/Time_Table_Sp. _Supplementary_Examination_July-2026-SOP.pdf"><span style="font-size:22px;">&#9758;</span>Time - Table Sp. Supplementary Examination SOP July-2026</a><img src="document/new1.gif" width="40" height="23"></div>
                        <div class="notice-title"><a href="document/Campus_life/Notice/2026/july/Time_Table_Sp._Supplementary_Examination_July-2026-RSMS.pdf"><span style="font-size:22px;">&#9758;</span>Time - Table Sp. Supplementary Examination RSMS July-2026</a><img src="document/new1.gif" width="40" height="23"></div>
                        <div class="notice-title"><a href="document/Campus_life/Notice/2026/july/Time_Table_Sp. Supplementary_Examination_July-2026-RSE.pdf"><span style="font-size:22px;">&#9758;</span>Time - Table Sp. Supplementary Examination RSE July-2026</a><img src="document/new1.gif" width="40" height="23"></div>
                        <div class="notice-title"><a href="document/Campus_life/Notice/2026/july/5.Notice-Special_Supplementary_Exam_July- 2026_Time_Table.pdf"><span style="font-size:22px;">&#9758;</span>Notice Special Supplementary Exam Time - Table Jul-2026</a><img src="document/new1.gif" width="40" height="23"></div>
                      </marquee>
                    </ul>
                  </div>
                </div>
              </div>
             <!-- <div class="col-md-6">
                <div class="wcu-box">
                  <div class="wcu-box_icon">
                    <i class="fas fa-check-circle"></i>
                  </div>
                  <div class="wcu-box_details">
                    <h3 class="box-title">Events</h3>
                    <ul class="wcu-box_text" style="padding-left: 18px; text-transform: lowercase;">
                      @foreach($events->take(3) as $event)
                        <li><a href="{{ route('events.show', $event->slug) }}">{{ $event->title }}</a></li>
                      @endforeach
                    </ul>
                  </div>
                </div>
              </div>-->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  
  
  
  
  
  <!--==============================
    SELECTION & PLACEMENT HIGHLIGHTS
  ==============================-->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

  @php
    $plcStats = [
      ['32', 'LPA', 'Highest Package'],
      ['4.8', 'LPA', 'Average Package'],
      ['300+', '', 'Companies Visited'],
      ['85%', '', 'Placement Rate'],
    ];

    // 'type' => 'logo' marks galleries made of logos (not photos) so the
    // card switches object-fit from cover -> contain to avoid cropping.
    $plcGallery = [
      [
        'title'  => 'Campus Placement Drive',
        'images' => [
          'document/home/Campus_Placement_Drive/IMG_0675.JPG',
          'document/home/Campus_Placement_Drive/IMG_0690.JPG',
          'document/home/Campus_Placement_Drive/IMG_0692.JPG',
          'document/home/Campus_Placement_Drive/IMG_0696.JPG',
          'document/home/Campus_Placement_Drive/IMG_0699.JPG',
          'document/home/Campus_Placement_Drive/IMG_0701.JPG',
          'document/home/Campus_Placement_Drive/IMG_0727.JPG',
          'document/home/Campus_Placement_Drive/IMG_0735.JPG',
          'document/home/Campus_Placement_Drive/IMG_0742.JPG',
          'document/home/Campus_Placement_Drive/IMG_0775.JPG',
          'document/home/Campus_Placement_Drive/IMG_0824.JPG',
          'document/home/Campus_Placement_Drive/IMG_0833.JPG',
        ],
      ],
      [
        'title'  => 'Placement Achievement',
        'images' => [
          'https://raiuniversity.edu/document/placement/placement_gallery/priy_mavani_btech_cse.png',
          'https://raiuniversity.edu/document/placement/placement_gallery/Renish_Limbasiya.jpg',
          'https://raiuniversity.edu/document/placement/placement_gallery/Tejal_Khunti.jpg',
          'https://raiuniversity.edu/document/placement/placement_gallery/Rajvee-Rathod.jpg',
          'https://raiuniversity.edu/document/placement/placement_gallery/Hetal_Makwana.jpg',
          'https://raiuniversity.edu/document/placement/placement_gallery/Shreeji_Delvadiya.jpg',
          'https://raiuniversity.edu/document/placement/placement_gallery/Rashmi_Sengar.jpg',
          'https://raiuniversity.edu/document/placement/placement_gallery/Kaushal_patel.jpg',
          'https://raiuniversity.edu/document/placement/placement_gallery/kriti_bhavsar.webp',
          'https://raiuniversity.edu/document/placement/placement_gallery/Krishna_yadav.webp',
          'https://raiuniversity.edu/document/placement/placement_gallery/Tanvi-Nayak.jpg',
          'https://raiuniversity.edu/document/placement/placement_gallery/Sheetal_Lama.webp',
        ],
      ],
      [
        'title'  => 'Recruitment Drive',
        'images' => [
          'document/home/Recruitment_Drive/IMG_0686.JPG',
          'document/home/Recruitment_Drive/IMG_0687.JPG',
          'document/home/Recruitment_Drive/IMG_0793.JPG',
          'document/home/Recruitment_Drive/IMG_0802.JPG',
          'document/home/Recruitment_Drive/IMG_2170.JPG',
        ],
      ],
    ];
  @endphp

  <style>
    .plc-wrap { background: #f8fafc; padding: 40px 0; font-family: inherit; }
    .plc-container { max-width: 1380px; margin: 0 auto; padding: 0 20px; }
    .plc-header { text-align: center; margin-bottom: 40px; }
    .plc-eyebrow { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: #F07F1A; display: inline-block; margin-bottom: 8px; background: rgba(240,127,26,.1); padding: 6px 16px; border-radius: 20px; }
    .plc-title { font-size: clamp(28px, 3.5vw, 42px); font-weight: 800; color: #0F2239; margin: 0 0 10px; }
    .plc-title span { color: #F07F1A; }
    .plc-sub { font-size: 15px; color: #fff; max-width: 600px; margin: 0 auto; line-height: 1.6; }

    /* Stats bar */
    .plc-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 56px; }
    @media (min-width: 768px) { .plc-stats { grid-template-columns: repeat(4, 1fr); } }
    .plc-stat { text-align: center; background: #fff; border-radius: 16px; padding: 20px 15px; border: 1px solid #e2e8f0; box-shadow: 0 4px 12px rgba(0,0,0,.03); }
    .plc-stat-n { font-size: 32px; font-weight: 900; color: #0F2239; line-height: 1; }
    .plc-stat-n span { color: #F07F1A; font-size: 18px; font-weight: 700; margin-left: 2px; }
    .plc-stat-l { font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .5px; margin-top: 6px; }

    /* Dark strip housing the slanted panels */
    .plc-row-grid {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 0;
      background: linear-gradient(3deg, #f8f9fa 0%, #0f2239 100%);
      border-radius: 14px;
      padding: 26px 34px;
      overflow: hidden;
    }
    @media (min-width: 640px) { .plc-row-grid { grid-template-columns: repeat(3, 1fr); padding: 26px 40px; } }

    /* Trapezoid card */
    .plc-card {
      position: relative;
      height: 400px;
      background: #15191f;
      margin-left: -18px;
      clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
    }
    .plc-card:first-child { margin-left: 0; clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); }
    @media (max-width: 639px) {
      .plc-card { margin-left: 0; margin-bottom: 14px; border-radius: 14px; overflow: hidden; clip-path: none; height: 320px; }
      .plc-row-grid { padding: 16px; }
    }

    /* Swiper */
    .plc-card .swiper { width: 100%; height: 100%; position: absolute; inset: 0; }
    .plc-card .swiper-slide { width: 100%; height: 100%; }
    .plc-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

    /* Logo-type cards: keep logos uncropped on white */
    .plc-card.plc-logo-card { background: #fff; }
    .plc-card.plc-logo-card .swiper-slide { display: flex; align-items: center; justify-content: center; background: #fff; }
    .plc-card.plc-logo-card img { object-fit: contain; padding: 56px 46px; filter: none; }

    /* Orange diagonal corner flag — signature element */
    .plc-card-flag {
      position: absolute; top: 0; left: 0; z-index: 4;
      width: 70px; height: 70px; background: #F07F1A;
      clip-path: polygon(0 0, 100% 0, 0 100%);
    }
    .plc-card.plc-logo-card .plc-card-flag { background: #0F2239; }

    /* Bottom shade + name plate */
    .plc-card-shade {
      position: absolute; left: 0; right: 0; bottom: 0; height: 55%; z-index: 2;
      background: linear-gradient(180deg, rgba(11,15,20,0) 0%, rgba(11,15,20,.92) 78%);
      pointer-events: none;
    }
    .plc-card.plc-logo-card .plc-card-shade { display: none; }

    .plc-card-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 22px 22px 20px; z-index: 3; pointer-events: none; }
    .plc-card-title { font-size: 16px; font-weight: 800; color: #fff; margin: 0; letter-spacing: .2px; }
    .plc-card.plc-logo-card .plc-card-title { color: #0F2239; text-align: center; }
    .plc-card-line { width: 28px; height: 3px; background: #F07F1A; margin-top: 10px; border-radius: 2px; }
    .plc-card.plc-logo-card .plc-card-line { display: none; }

    .plc-card .swiper-pagination-bullet { background: #fff !important; opacity: .5; width: 6px; height: 6px; }
    .plc-card .swiper-pagination-bullet-active { background: #F07F1A !important; opacity: 1; }
    .plc-card .swiper-pagination { bottom: 8px !important; z-index: 5; }

    .plc-cta { text-align: center; margin-top: 48px; }
    .plc-btn {
      display: inline-flex; align-items: center; gap: 10px;
      background: #0F2239; color: #fff; font-size: 14px; font-weight: 700;
      padding: 14px 32px; border-radius: 50px; text-decoration: none;
      transition: all .3s ease;
    }
    .plc-btn:hover { background: #F07F1A; color: #fff; }
  </style>

  <section class="plc-wrap">
    <div class="plc-container">

      <div class="plc-header">
        <span class="plc-eyebrow">Selection &amp; Placement Highlights</span>
        <h2 class="plc-title">Our Students, <span>Placed and Proud</span></h2>
        <p class="plc-sub">A glimpse of our placement drives and student selections — proof of industry readiness.</p>
      </div>

      <div class="plc-stats">
        @foreach($plcStats as $s)
        <div class="plc-stat">
          <div class="plc-stat-n">{{ $s[0] }}<span>{{ $s[1] }}</span></div>
          <div class="plc-stat-l">{{ $s[2] }}</div>
        </div>
        @endforeach
      </div>

      {{-- Single row of slanted, interlocking photo panels --}}
      <div class="plc-row-grid">
        @foreach($plcGallery as $index => $item)
        <div class="plc-card {{ ($item['type'] ?? '') === 'logo' ? 'plc-logo-card' : '' }}">
          <div class="plc-card-flag"></div>

          <div class="swiper plcSlider{{ $index }}">
            <div class="swiper-wrapper">
              @foreach($item['images'] as $img)
                <div class="swiper-slide">
                  <img src="{{ asset($img) }}"
                       alt="{{ $item['title'] }}"
                      onerror="this.onerror=null; this.src='#';">
                </div>
              @endforeach
            </div>
            <div class="swiper-pagination page{{ $index }}"></div>
          </div>

          <div class="plc-card-shade"></div>

          <div class="plc-card-content">
            <h3 class="plc-card-title">{{ $item['title'] }}</h3>
            <div class="plc-card-line"></div>
          </div>
        </div>
        @endforeach
      </div>

      <div class="plc-cta">
        <a href="https://test.raiuniversity.edu/objectives" class="plc-btn">
          View All Placements <i class="fa-solid fa-arrow-right"></i>
        </a>
      </div>

    </div>
  </section>

     <!--==============================
Counter Area
==============================-->
   <!-- <div class="container">
        <div class="counter-area-1 bg-theme" data-bg-src=""> 
            <div class="row justify-content-between">
                <div class="col-sm-6 col-xl-4 counter-card-wrap">
                    <div class="counter-card">
                        <h2 class="counter-card_number"><span class="counter-number">12.7</span>k<span class="fw-normal">+</span></h2>
                        <p class="counter-card_text"><strong>Enrolled</strong> Students</p>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-4 counter-card-wrap">
                    <div class="counter-card">
                        <h2 class="counter-card_number"><span class="counter-number">52</span><span class="fw-normal">+</span></h2>
                        <p class="counter-card_text"><strong>Library and </strong> Labs</p>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-4 counter-card-wrap">
                    <div class="counter-card">
                        <h2 class="counter-card_number"><span class="counter-number">400</span><span class="fw-normal">+</span></h2>
                        <p class="counter-card_text"><strong>Research and Publications</strong></p>
                    </div>
                </div>
                <!--<div class="col-sm-6 col-xl-3 counter-card-wrap">
                    <div class="counter-card">
                        <h2 class="counter-card_number"><span class="counter-number">100.2</span>k<span class="fw-normal">+</span></h2>
                        <p class="counter-card_text"><strong>Students</strong> Community</p>
                    </div>
                </div>-->
           <!-- </div>
        </div>
    </div>
    
    <div class="th-hero-wrapper hero-1" id="hero">
        <div class="hero-slider-1 th-carousel" data-fade="true" data-slide-show="1" data-md-slide-show="1" data-dots="true">


            <div class="th-hero-slide">
                <div class="th-hero-bg" data-overlay="title" data-opacity="8" data-bg-src="{{ url('/') }}/assets/img/hero/hero_bg.png"></div>
                <div class="container">
                    <div class="row align-items-center justify-content-center">
                        <div class="container text-center">
            <div class="cta-wrap2">
                <div class="title-area text-center mb-35">
                    <span class="sub-title"><i class="fal fa-book me-2"></i>Are You Ready For Convocation</span>
                    <h2 class="sec-title text-white"> <span class="text-theme2">12<sup>TH</sup></span> Convocation <br> <span class="fw-normal"></span></h2>
                    
                </div>
                <div class="btn-group justify-content-center">
                    <a href="about.html" class="th-btn style3">Join With Us<i class="fas fa-arrow-right ms-2"></i></a>
                </div>
            </div> 
        </div> 
                        <div class="col-md-6 text-lg-end text-center">
                           
                        </div>
                    </div>
                </div>
              
                 
               


            <div class="th-hero-slide">
                <div class="th-hero-bg" data-overlay="title" data-opacity="8" data-bg-src="{{ url('/') }}/assets/img/hero/hero_bg_1_1_1_.png"></div>
                <div class="container">
                    <div class="row align-items-center justify-content-center">
                       
                       
                    </div>
                </div>
               
               

               
                
            </div> 


            <div class="th-hero-slide">
                <div class="th-hero-bg" data-overlay="title" data-opacity="8" data-bg-src="document/home/banner.JPG"></div>
                <div class="container">
                    <div class="row align-items-center justify-content-center">
                        
        <div class="container text-center">
            <div class="cta-wrap2">
                <div class="title-area text-center mb-35">
                    <span class="sub-title"><i class="fal fa-book me-2"></i>Are You Ready For Convocation </span>
                    <h2 class="sec-title text-white"> <span class="text-theme">12th </span> <br>Convocation  <span class="fw-normal"></span></h2>
                    <p>Capping off a Chapter, <br>
Embarking on a New Journey!</p>
<h2><span class="text-theme">Date: 24<sup>th</sup> January 2026</span></h2>
                </div>
                <div class="btn-group justify-content-center">
                    <a href="#" class="th-btn style3">Registration Open<i class="fas fa-arrow-right ms-2"></i></a>
                   
                </div>
            </div>
        </div>  
                       
                    </div>
                </div>
                 
            </div>
        </div>
    </div>-->
    
    
   

  <!--==============================
Explore Top Categories
==============================-->



    <div class="space-top">
        <div class="container">
            <div class="category-sec-wrap">
                <div class="shape-mockup category-shape-arrow d-xl-block d-none">
                    <img src="{{ url('/') }}/assets/img/normal/category-arrow.svg" alt="img">
                </div>
                <div class="row">
                    <div class="col-xl-4">
                        <div class="title-area mb-25 mb-lg-0 text-xl-start text-center">
                            
                            <h2 class="sec-title">Programs Offered</h2>
                            <a href="https://www.raiuniversity.edu/Admissions/" class="th-btn">Admission Now<i class="fa-regular fa-arrow-right ms-2"></i></a>
                        </div>
                    </div>
                    <div class="col-xl-8">
                        <!-- Tabs for UG and PG Courses -->
                        <ul class="nav nav-tabs mb-3 mt-5" id="courseTabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="ug-tab" data-bs-toggle="tab" data-bs-target="#ug" type="button" role="tab" aria-controls="ug" aria-selected="true">
                                    UG Courses
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="pg-tab" data-bs-toggle="tab" data-bs-target="#pg" type="button" role="tab" aria-controls="pg" aria-selected="false">
                                    PG Courses
                                </button>
                            </li>
                        </ul>
                        <div class="tab-content" id="courseTabsContent">
                            <div class="tab-pane fade show active" id="ug" role="tabpanel" aria-labelledby="ug-tab">
                               <div class="container mt-3">
 <table class="table table-bordered table-hover text-center align-middle course-table" style="overflow:hidden;">
  <thead>
    <tr>
      <th style="color: #ecf1f9;">Course</th>
      <th style="color: #ecf1f9;">Category</th>
      <th style="color: #ecf1f9;">Course</th>
      <th style="color: #ecf1f9;">Category</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>B.Pharm</td><td>Pharmacy</td><td>B.Sc. IT</td><td>Engineering</td></tr>
    <tr><td>D.Pharm</td><td>Pharmacy</td><td>BBA</td><td>Management</td></tr>
    <tr><td>UI/UX Design</td><td>Design</td><td>B.Com</td><td>Management</td></tr>
    <tr><td>Graphic Design</td><td>Design</td><td>B.Sc.</td><td>Agriculture</td></tr>
    <tr><td>Fashion</td><td>Design</td><td>B.A. Psychology</td><td>Liberal Studies</td></tr>
    <tr><td>Animation & Game</td><td>Design</td><td>B.P.E.S</td><td>Liberal Studies</td></tr>
    <tr><td>Diploma</td><td>Engineering</td><td>B.Sc.</td><td>Sciences</td></tr>
    <tr><td>B.Tech</td><td>Engineering</td><td>B.A. LL.B</td><td>Law</td></tr>
    <tr><td>BCA</td><td>Engineering</td><td>LL.B</td><td>Law</td></tr>
  </tbody>
</table>
</div>

                            </div>
                            <div class="tab-pane fade" id="pg" role="tabpanel" aria-labelledby="pg-tab">
                                <table class="table table-bordered table-hover text-center align-middle course-table" style="overflow:hidden;">
                                   <thead>
    <tr>
      <th style="color: #ecf1f9;">Course</th>
      <th style="color: #ecf1f9;">Category</th>  
      
    </tr>
  </thead>
                                    <tbody>
                                        <tr><td>M.Pharm</td><td>Pharmacy</td></tr>
                                        <tr><td>MCA</td><td>Engineering</td></tr>
                                        <tr><td>MBA</td><td>Management</td></tr>
                                        <tr><td>M.P.E.S</td><td>Liberal Studies</td></tr>
                                        <tr><td>M.Sc.</td><td>Sciences</td></tr>
                                        <tr><td>LL.M</td><td>Law</td></tr>
                                    </tbody>
                                </table>
                            </div> 
                        </div>
                        <!-- Make sure Bootstrap JS is loaded for tabs to work -->
                    </div>
                </div>

            </div>
        </div>
    </div> 
    <!--==============================
Notice Update
==============================-->
    <!--<div class="why-area-1 space overflow-hidden">

        <div class="shape-mockup why-shape-1 jump" data-top="10%" data-left="7%">
            <img src="{{ url('/') }}/assets/img/normal/about_1_shape1.png" alt="img">
        </div>

        <div class="shape-mockup why-shape-2" data-bg-src="{{ url('/') }}/assets/img/normal/wcu_1_shape1.png"></div>

        <div class="shape-mockup why-shape-3 jump-reverse" data-bottom="25%" data-right="-3%">
            <img src="{{ url('/') }}/assets/img/normal/wcu_1_shape2.png" alt="img">
        </div>

        <div class="container">
            <div class="row align-items-center">
                <div class="col-xl-6">
                    <div class="wcu-img-1">
                        <div class="img1">
                            <img src="document/home/06.jpg" alt="img">
                        </div>
                        <div class="student-count jump-reverse">
                            <h5 class="title"><span class="text-theme"><span class="counter-number">10</span>k+</span> Active Students</h5>
                            <img src="{{ url('/') }}/assets/img/normal/student-group_1_11.png" alt="img">
                        </div>
                        <div class="text-end">
                            <a class="th-btn mt-30" href="contact.html">Get Started <i class="far fa-arrow-right ms-1"></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6">
                    <div class="wcu-wrap1">
                        <div class="title-area mb-25">
                            <span class="sub-title"><i class="fal fa-book me-2"></i> Latest Updates</span>
                            <h2 class="sec-title">Latest updates on exams, admissions, and events are posted regularly.</h2>

                        </div>
                        <div class="row gy-4">
                            <div class="col-md-12">
                                <div class="wcu-box">
                                    <div class="wcu-box_icon">
                                        <i class="fas fa-check-circle"></i>
                                    </div>
                                    <div class="wcu-box_details">
                                        <h3 class="box-title">Notices</h3>
                                        <ul>
                                            <li><a href="https://www.raiuniversity.edu/wp-content/uploads/Makeup_Examination_August_2025_Time_table_RSE_Rescheduled_Exam.pdf" target="_blank" rel="noopener noreferrer"> 
  Makeup Examination Time - table RSE Rescheduled Exam August 2025</a></li>
  <li><a href="https://www.raiuniversity.edu/wp-content/uploads/11.-Supplementary_Exam_Aug_2025_Rescheduled_Exam_Dates.pdf" target="_blank" rel="noopener noreferrer"> 
  Supplementary Exam Aug 2025 Rescheduled Exam Dates</a></li>
  <li><a href="https://www.raiuniversity.edu/wp-content/uploads/Time_Table_Supplementary_Exam_Sep-2025_SOP_D_Pharm_Year_1.pdf" target="_blank" rel="noopener noreferrer"> 
  Time Table SOP D.Pharm Year 1 Supplementary Exam Sep 2025 </a><img decoding="async" src="https://www.raiuniversity.edu/wp-content/uploads/new1.gif" width="40" height="23"></li>
  <a class="th-btn mt-30" href="#">View all notices <i class="far fa-arrow-right ms-1"></i></a>
                                        </ul>
                                    </div> 
                                </div>
                            </div>
                            <!--<div class="col-md-6">
                                <div class="wcu-box">
                                    <div class="wcu-box_icon">
                                        <i class="fas fa-check-circle"></i>
                                    </div>
                                    <div class="wcu-box_details">
                                        <h3 class="box-title">Events</h3>
                                        <ul class="wcu-box_text" style="padding-left: 18px;    text-transform: lowercase;">
                                            @foreach($events->take(3) as $event)
                                                <li><a href="{{ route('events.show', $event->slug) }}">{{ $event->title }}</a></li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>--> 
                        <!--</div>
                    </div>
                </div>
            </div>
        </div>
    </div>-->
   
   <!-- RU Life Section -->
    <section class="ru-life-section" id="ru-life">
        <div class="container">
            <!-- Row 1: col-8 + col-4 -->
            <div class="row">
                <div class="col-lg-8">
                    <div class="ru-life-card" style="background-image: url('images/ffrai1.jpg');">
                        <div class="ru-life-content">
                            <h2 class="ru-life-title">I Love RU</h2>
                            <p class="ru-life-description">Experience the warmth, community, and unforgettable moments that make Rai University a home away from home. Our students create lifelong memories and friendships that last forever.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="ru-life-card" style="background-image: url('document/rai_student.JPG');">
                        <div class="ru-life-content">
                            <h2 class="ru-life-title">Life at RU</h2>
                            <p class="ru-life-description">Discover the vibrant campus life filled with activities, events, and opportunities for personal and academic growth.</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Row 2: col-4 + col-8 -->
            <div class="row">
                <div class="col-lg-4">
                    <div class="ru-life-card" style="background-image: url('document/sports_rai_uni.JPG');">
                        <div class="ru-life-content">
                            <h2 class="ru-life-title">RU Sports</h2>
                            <p class="ru-life-description">Excel in sports and fitness with our world-class facilities and coaching programs that develop champions.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-8">
                    <div class="ru-life-card" style="background-image: url('images/ffrai3.jpg');">
                        <div class="ru-life-content">
                            <h2 class="ru-life-title">RU Innovation</h2>
                            <p class="ru-life-description">Join our innovation hub where creative minds come together to solve real-world problems. From research labs to startup incubators, we foster the next generation of innovators and entrepreneurs.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{{-- ═══════════════════════════════════════
       ACCREDITATION & RANKINGS SECTION
  ═══════════════════════════════════════ --}}
  @php
    $rankLogos = [
      ['UGC', 'document/about/affiliations-recognition/logo/UGC_India_Logo.jpg'],
      ['NAAC', 'document/about/affiliations-recognition/logo/NAAC_LOGO.jpg'],
      ['AIU', 'document/about/affiliations-recognition/logo/Asspciation_of_Indian_Universities.jpg'],
      ['PCI', 'document/about/affiliations-recognition/logo/PCI.jpg'],
      ['BCI', 'document/about/affiliations-recognition/logo/BCI.jpg'],
      ['QCI', 'document/about/affiliations-recognition/QCI/QCI.jfif'],
      ['AISHE', 'document/about/affiliations-recognition/logo/AISHE.jpg'],
    ];
  @endphp
  <style>
    .rank-wrap { background: #fff; padding: 40px 0; }
    .rank-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
    @media (min-width: 1024px) { .rank-container { padding: 0 56px; } }
    .rank-header { text-align: center; margin-bottom: 40px; }
    .rank-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; color: #F07F1A; display: block; margin-bottom: 12px; }
    .rank-title { font-size: clamp(26px, 3.5vw, 42px); font-weight: 800; color: #0F2239; margin: 0 0 12px; }
    .rank-title span { color: #F07F1A; }
    .rank-sub { font-size: 15px; color: #64748b; max-width: 600px; margin: 0 auto; line-height: 1.7; }
    .rank-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    @media (min-width: 576px) { .rank-grid { grid-template-columns: repeat(4, 1fr); } }
    @media (min-width: 992px) { .rank-grid { grid-template-columns: repeat(7, 1fr); } }
    .rank-card {
      border: 1px solid #E9EEF5; border-radius: 14px; padding: 18px 10px;
      display: flex; flex-direction: column; align-items: center; gap: 10px;
      transition: box-shadow .25s, transform .25s;
    }
    .rank-card:hover { box-shadow: 0 12px 28px rgba(15,34,57,.1); transform: translateY(-4px); }
    .rank-card img { max-width: 100%; height: 96px; object-fit: contain; }
    .rank-card span { font-size: 11px; font-weight: 700; color: #0F2239; text-align: center; letter-spacing: .3px; }
  </style>

  <section class="rank-wrap">
    <div class="rank-container">
      <div class="rank-header">
        <span class="rank-eyebrow">Accreditation &amp; Rankings</span>
        <h2 class="rank-title">Recognized &amp; <span>Trusted</span></h2>
        <p class="rank-sub">Rai University's programs are recognized by leading national regulatory and accreditation bodies, reflecting our commitment to quality and academic standards.</p>
      </div>
      <div class="rank-grid">
        @foreach($rankLogos as $l)
        <div class="rank-card">
          <img src="{{ url('/') }}/{{ $l[1] }}" alt="{{ $l[0] }}" onerror="this.style.display='none'">
          <span>{{ $l[0] }}</span>
        </div>
        @endforeach
      </div>
    </div>
  </section>
<!--==============================
Blog Area / "Happenings at Rai University"
==============================-->
<section class="overflow-hidden py-5 happenings-sec" id="blog-sec">
    <div class="container position-relative">

        <div class="text-center mb-4">
            <h2 class="happenings-title">
                <span class="text-accent">Happenings</span> at Rai University
            </h2>
        </div>

        @if($posts->count() > 0)

        <div class="row g-3 g-md-4 justify-content-center happenings-row">

            @foreach($posts->take(4) as $post)

            <div class="col-6 col-md-3">

                <a href="{{ route('blogs.show', $post->slug) }}" class="happening-card d-block">
                    <img src="{{ $post->image ? asset('blogs/'.$post->image) : url('/assets/img/blog/default-blog.jpg') }}"
                         alt="{{ strip_tags($post->title) }}"
                         class="img-fluid">

                    <span class="happening-overlay">
                        <span class="happening-meta">
                            <i class="fa-light fa-clock me-1"></i>{{ $post->formatted_date }}
                        </span>
                        <span class="happening-caption">{!! $post->title !!}</span>
                    </span>
                </a>

            </div>

            @endforeach

        </div>

        @endif

        <div class="text-center mt-4">
            <a href="{{ url('/blog') }}" class="th-btn happenings-btn">
                See More News &amp; Updates
                <i class="fa-solid fa-arrow-right ms-2"></i>
            </a>
        </div>

    </div>
</section>

<style>

.happenings-sec{
    position:relative;
    background-color:#e9e9e9;
    background-image:url('/document/Rai_university_back_image.png'); /* faded building photo, desaturated */
    background-size:cover;
    background-position:center;
    background-blend-mode:luminosity;
}

.happenings-sec::before{
    content:"";
    position:absolute;
    inset:0;
    background:image:url('/document/Rai_university_back_image.png'); /* faded building photo, desaturated */
    z-index:0;
}

.happenings-sec .container{
    z-index:1;
}

.happenings-title{
    font-size:34px;
    font-weight:800;
    margin:0;
}

.happenings-title .text-accent{
    color:#f26522; /* orange accent matching reference */
}

/* Cards */

.happening-card{
    position:relative;
    display:block;
    border-radius:14px;
    overflow:hidden;
    aspect-ratio:1/1;
    background:#fff;
    box-shadow:0 6px 18px rgba(0,0,0,.12);
    transition:transform .25s ease, box-shadow .25s ease;
}

.happening-card:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.happening-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.happening-overlay{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:14px 12px 10px;
    background:linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
    color:#fff;
    opacity:0;
    transform:translateY(6px);
    transition:opacity .25s ease, transform .25s ease;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.happening-card:hover .happening-overlay{
    opacity:1;
    transform:translateY(0);
}

.happening-meta{
    font-size:11px;
    opacity:.85;
}

.happening-caption{
    font-size:13px;
    font-weight:600;
    line-height:1.3;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* Button */

.happenings-btn{
    background:#f07f1a;
    border:none;
    color:#fff;
    padding:12px 28px;
    font-size:14px;
    font-weight:600;
    border-radius:30px;
    display:inline-flex;
    align-items:center;
    transition:background .2s ease;
}

.happenings-btn:hover{
    background:#d9541a;
    color:#fff;
}

@media (max-width:767px){
    .happenings-title{ font-size:24px; }
}

</style>

  {{-- ═══════════════════════════════════════
       SMART SECTION
  ═══════════════════════════════════════ --}}
  <style>
    .ss-wrap { background: #fff; padding: 40px 0; position: relative; overflow: hidden; }
    .ss-wrap::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(135deg, rgba(15,34,57,.03) 0%, transparent 60%, rgba(240,127,26,.03) 100%);
    }
    .ss-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; position: relative; }
    @media (min-width: 1024px) { .ss-container { padding: 0 56px; } }

    .ss-header { text-align: center; margin-bottom: 52px; }
    .ss-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; color: #F07F1A; display: block; margin-bottom: 12px; }
    .ss-title { font-size: clamp(28px, 3.5vw, 48px); font-weight: 700; color: #0F2239; line-height: 1.1; letter-spacing: -1px; margin: 0 0 16px; }
    .ss-title span { color: #F07F1A; }
    .ss-desc { font-size: 16px; color: #64748b; line-height: 1.75; max-width: 640px; margin: 0 auto 20px; }
    .ss-divider { width: 56px; height: 4px; background: #F07F1A; border-radius: 4px; margin: 0 auto; }

    .ss-body { display: flex; flex-direction: column; gap: 20px; }
    @media (min-width: 992px) { .ss-body { flex-direction: row; gap: 24px; } }

    .ss-tabs { display: flex; flex-direction: column; gap: 10px; width: 240px; flex-shrink: 0; }
    @media (max-width: 991px) { .ss-tabs { flex-direction: row; overflow-x: auto; padding-bottom: 6px; width: 100% !important; } }
    .ss-tab {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 18px; border-radius: 14px; cursor: pointer;
      border: 1.5px solid rgba(15,34,57,.10); background: #fff;
      transition: all .25s; white-space: nowrap; flex-shrink: 0;
    }
    @media (min-width: 992px) { .ss-tab { min-width: 0; width: 100%; } }
    .ss-tab:hover { border-color: rgba(15,34,57,.2); background: rgba(15,34,57,.02); }
    .ss-tab.active { background: #0F2239; border-color: #0F2239; box-shadow: 0 6px 20px rgba(15,34,57,.18); }
    .ss-tab-bar { width: 4px; height: 32px; border-radius: 4px; background: rgba(15,34,57,.12); transition: background .25s; flex-shrink: 0; }
    .ss-tab.active .ss-tab-bar { background: #F07F1A; }
    .ss-tab-lbl { font-size: 15px; font-weight: 700; color: #0F2239; transition: color .25s; }
    .ss-tab.active .ss-tab-lbl { color: #fff; }
    .ss-tab-arrow { margin-left: auto; color: #F07F1A; font-size: 12px; display: none; }
    @media (min-width: 992px) { .ss-tab.active .ss-tab-arrow { display: block; } }

    .ss-panel {
      flex: 1; border-radius: 20px; background: #fff;
      border: 1px solid rgba(15,34,57,.08);
      box-shadow: 0 4px 32px rgba(15,34,57,.07);
      overflow: hidden;
    }
    .ss-panel-inner { display: flex; flex-direction: column; gap: 24px; padding: 32px; align-items: center; }
    @media (min-width: 640px) { .ss-panel-inner { flex-direction: row; gap: 40px; padding: 40px; } }

    .ss-panel-img { width: 100%; max-width: 400px; flex-shrink: 0; }
    .ss-panel-img img { width: 100%; object-fit: contain; display: block; }

    .ss-panel-text { display: flex; flex-direction: column; gap: 12px; }
    .ss-panel-title { font-size: clamp(22px, 2.5vw, 32px); font-weight: 700; color: #F07F1A; margin: 0; }
    .ss-panel-rule { width: 40px; height: 2px; background: rgba(240,127,26,.3); border-radius: 2px; }
    .ss-panel-body { font-size: 15px; color: #4a5568; line-height: 1.75; margin: 0; }
  </style>

  <section class="ss-wrap">
    <div class="ss-container">
      <div class="ss-header">
        <span class="ss-eyebrow">Campus Life</span>
        <h2 class="ss-title">Everything You Need, <span>Smarter Than Ever</span></h2>
        <p class="ss-desc">Explore a fully connected campus experience where smart classrooms adapt to your pace, labs simulate the real world, libraries think with you, and canteens serve with precision.</p>
        <div class="ss-divider"></div>
      </div>

      <div class="ss-body">
        @php $ssData = [
          ['Smart Class', 'Our Smart Class solution integrates AI-driven features into the LMS, empowering teachers to create content at their own pace and refine teaching methods. It simplifies smart content design, allowing educators to focus on enhancing student learning.', 'document/home/smart/class.webp'],
          ['Smart Library', "Discover a smarter library experience! Our AI-powered counselors help you find books, journals, and resources—even if you can't recall the exact title or author. Learning just got easier and more intuitive!", 'document/home/smart/library.webp'],
          ['Smart Attendance', 'Meet the future of attendance! Our AI-powered system syncs effortlessly with student records, automating updates and ensuring flawless accuracy. Less hassle, more focus on what matters.', 'document/home/smart/attendance.webp'],
          ['Smart Canteen', 'Experience a smarter way to dine with AI-powered shelves! Browse menus, place orders, and make payments seamlessly—all in one place. Say goodbye to long waits and order errors.', 'document/home/smart/canteen.webp'],
        ]; @endphp

        {{-- Tabs --}}
        <div class="ss-tabs" id="ssTabs">
          @foreach($ssData as $i => $tab)
          <div class="ss-tab {{ $i === 0 ? 'active' : '' }}" onclick="ssSetActive({{ $i }})" data-ss="{{ $i }}">
            <div class="ss-tab-bar"></div>
            <span class="ss-tab-lbl">{{ $tab[0] }}</span>
            <i class="fas fa-chevron-right ss-tab-arrow"></i>
          </div>
          @endforeach
        </div>

        {{-- Panels --}}
        <div class="ss-panel">
          @foreach($ssData as $i => $tab)
          <div class="ss-panel-inner" id="ssPanel{{ $i }}" @if($i !== 0) style="display:none" @endif>
            <div class="ss-panel-img">
              <img src="{{ url('/') }}/{{ $tab[2] }}" alt="{{ $tab[0] }}" style="border-radius:12px">
            </div>
            <div class="ss-panel-text">
              <h3 class="ss-panel-title">{{ $tab[0] }}</h3>
              <div class="ss-panel-rule"></div>
              <p class="ss-panel-body">{{ $tab[1] }}</p>
            </div>
          </div>
          @endforeach
        </div>
      </div>
    </div>
  </section>

  <script>
  function ssSetActive(n) {
    document.querySelectorAll('.ss-tab').forEach(function (t) { t.classList.remove('active'); });
    document.querySelectorAll('[id^="ssPanel"]').forEach(function (p) { p.style.display = 'none'; });
    document.querySelector('.ss-tab[data-ss="' + n + '"]').classList.add('active');
    document.getElementById('ssPanel' + n).style.display = '';
  }
  </script>

  {{-- ═══════════════════════════════════════
       AI MODULES SECTION
  ═══════════════════════════════════════ --}}
  @php $amModules = [
    ['fa-solid fa-compass', 'AI Academic Counselor', 'Personalised guidance', 'AI-driven counseling optimizes traditional paradigms through perpetual accessibility, individualized interventions, and superior operational scalability.'],
    ['fa-solid fa-chalkboard-user', 'AI Tutor', 'Adaptive learning', 'AI tutoring interfaces optimize smart classroom content delivery by facilitating adaptive, immersive, and individualized learning experiences.'],
    ['fa-solid fa-flask', 'Virtual Lab', 'Hands-on experiments', 'A fully implemented simulation lab providing students with access to hands-on learning experiences, allowing them to conduct experiments and simulations in a virtual environment.'],
    ['fa-solid fa-chart-line', 'Research Assistant', 'Intelligent insights', 'An AI research assistant who helps improve research processes and project evaluations through intelligent insights and automation.'],
    ['fa-solid fa-cube', '3D Labs', 'Immersive models', 'Learn through immersive 3D models that make complex subjects easier to understand from every angle.'],
    ['fa-solid fa-clipboard-check', 'AI Evaluator', 'Fast assessments', 'An evaluator bot that assists with periodical and continuous campus evaluations with speed and accuracy.'],
    ['fa-solid fa-user-tie', 'AI Interview Coach', 'Career readiness', 'Helps students better prepare for internships and job interviews with AI-driven mock interviews, feedback, and coaching.'],
  ]; @endphp
  <style>
    .aim-wrap { background: #0f2239; }
    .aim-wrap::before {
      content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .6;
      background-image: radial-gradient(circle, rgba(15,34,57,.05) 1px, transparent 1px);
      background-size: 30px 30px; mask-image: radial-gradient(circle at 50% 35%, #000, transparent 72%);
    }
    .aim-orb { position: absolute; border-radius: 50%; pointer-events: none; }
    .aim-orb1 { top: -8%; right: -6%; width: 440px; height: 440px; background: rgba(240,127,26,.14); filter: blur(120px); }
    .aim-orb2 { bottom: -12%; left: -8%; width: 380px; height: 380px; background: rgba(246,187,24,.16); filter: blur(110px); }
    .aim-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; position: relative; }
    @media (min-width: 1024px) { .aim-container { padding: 30 56px; } }

    .aim-header { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 52px; text-align: center; }
    .aim-title { font-size: clamp(28px, 3.6vw, 50px); font-weight: 800; color: #fff; line-height: 1.08; letter-spacing: -1.2px; margin: 0; }
    .aim-title span { background: linear-gradient(100deg,#F07F1A,#f6bb18); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .aim-sub { font-size: 16px; color: #fff; max-width: 600px; line-height: 1.75; margin: 0; }

    .aim-grid2 { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
    @media (min-width: 640px) { .aim-grid2 > * { flex: 1 1 calc(50% - 18px); } }
    @media (min-width: 1000px) { .aim-grid2 > * { flex: 1 1 calc(33.333% - 18px); } }

    .aim-card {
      width: 100%; position: relative; overflow: hidden; border-radius: 20px; padding: 30px 26px 28px;
      background: #fff; border: 1px solid #E9EEF5; box-shadow: 0 4px 22px rgba(15,34,57,.05);
      transition: transform .28s, border-color .28s, box-shadow .28s;
    }
    .aim-card::before {
      content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
      background: linear-gradient(90deg,#F07F1A,#f6bb18); transform: scaleX(0); transform-origin: left; transition: transform .32s;
    }
    .aim-card:hover { transform: translateY(-6px); border-color: rgba(240,127,26,.4); box-shadow: 0 22px 48px -18px rgba(15,34,57,.25); }
    .aim-card:hover::before { transform: scaleX(1); }
    .aim-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
    .aim-ico {
      width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
      font-size: 21px; color: #fff; background: linear-gradient(135deg,#0F2239,#1e3a66);
      box-shadow: 0 8px 20px -6px rgba(15,34,57,.4); transition: transform .28s, background .28s;
    }
    .aim-card:hover .aim-ico { transform: scale(1.07); background: linear-gradient(135deg,#F07F1A,#f6bb18); }
    .aim-num { font-size: 12.5px; font-weight: 800; letter-spacing: .5px; color: #F07F1A; background: rgba(240,127,26,.1); padding: 6px 12px; border-radius: 9px; }
    .aim-name { font-size: 18.5px; font-weight: 800; color: #0F2239; letter-spacing: -.3px; margin: 0 0 6px; }
    .aim-tag { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #F07F1A; margin-bottom: 14px; }
    .aim-desc { font-size: 13.5px; color: #5b6675; line-height: 1.7; margin: 0; padding-top: 14px; border-top: 1px solid #eef1f6; }
  </style>

  <section class="aim-wrap">
    <div class="aim-orb aim-orb1"></div><div class="aim-orb aim-orb2"></div>
    <div class="aim-container">
      <div class="aim-header">
        <h2 class="aim-title">AI Modules That <span>Augment Every Interaction</span></h2>
        <p class="aim-sub">From personalised mentoring to simulation labs and research copilots — explore the AI modules powering every classroom, lab and counselling interaction.</p>
      </div>

      <div class="aim-grid2">
        @foreach($amModules as $i => $mod)
        <article class="aim-card">
          <div class="aim-card-top">
            <span class="aim-ico"><i class="{{ $mod[0] }}"></i></span>
            <span class="aim-num">{{ str_pad($i + 1, 2, '0', STR_PAD_LEFT) }}</span>
          </div>
          <h3 class="aim-name">{{ $mod[1] }}</h3>
          <span class="aim-tag">{{ $mod[2] }}</span>
          <p class="aim-desc">{{ $mod[3] }}</p>
        </article>
        @endforeach
      </div>
    </div>
  </section>

  {{-- ═══════════════════════════════════════
       SUPPORT SECTION
  ═══════════════════════════════════════ --}}
  <style>
    .sup-wrap { background: #f4f6fb; padding: 40px 0; position: relative; overflow: hidden; }
    .sup-wrap::before {
      content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .035;
      background-image: radial-gradient(circle, rgba(15,34,57,.6) 1px, transparent 1px);
      background-size: 32px 32px;
    }
    .sup-orb1 { position: absolute; top: 10%; right: -6%; width: 380px; height: 380px; border-radius: 50%; background: rgba(15,34,57,.05); filter: blur(110px); pointer-events: none; }
    .sup-orb2 { position: absolute; bottom: 5%; left: -5%; width: 300px; height: 300px; border-radius: 50%; background: rgba(42,82,152,.05); filter: blur(100px); pointer-events: none; }
    .sup-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; position: relative; }
    @media (min-width: 1024px) { .sup-container { padding: 0 56px; } }

    .sup-header { margin-bottom: 52px; }
    .sup-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; color: #F07F1A; display: block; margin-bottom: 12px; }
    .sup-title { font-size: clamp(28px, 3.5vw, 48px); font-weight: 700; color: #0a1c3d; line-height: 1.1; letter-spacing: -1px; margin: 0 0 16px; }
    .sup-title span { color: #F07F1A; }
    .sup-sub { font-size: 16px; color: #64748b; max-width: 580px; line-height: 1.75; margin: 0; }

    .sup-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
    @media (min-width: 600px) { .sup-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 992px) { .sup-grid { grid-template-columns: repeat(3, 1fr); } }

    .sup-card {
      position: relative; border-radius: 20px; background: #fff;
      box-shadow: 0 2px 16px rgba(15,34,57,.08);
      border: 1.5px solid transparent;
      padding: 28px; display: flex; flex-direction: column; gap: 20px;
      overflow: hidden; transition: box-shadow .3s, transform .3s, border-color .3s;
    }
    .sup-card:hover { box-shadow: 0 8px 40px rgba(15,34,57,.14); transform: translateY(-4px); border-color: rgba(240,127,26,.35); }
    .sup-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #0F2239; border-radius: 20px 0 0 20px; transition: background .3s; }
    .sup-card:hover::before { background: #F07F1A; }
    .sup-card-num { font-size: 40px; font-weight: 900; color: #0F2239; line-height: 1; transition: color .3s; }
    .sup-card:hover .sup-card-num { color: #F07F1A; }
    .sup-card-title { font-size: 16px; font-weight: 800; color: #0a1c3d; margin: 0 0 6px; }
    .sup-card-desc { font-size: 14px; color: #64748b; line-height: 1.7; margin: 0; }
  </style>

  <section class="sup-wrap">
    <div class="sup-orb1"></div><div class="sup-orb2"></div>
    <div class="sup-container">
      <div class="sup-header">
        <span class="sup-eyebrow">Student Support</span>
        <h2 class="sup-title">How Our A.I. Supports <span>Every Student</span></h2>
        <p class="sup-sub">From adaptive learning to placement preparation — our AI ecosystem works around the clock to ensure every student thrives.</p>
      </div>
      <div class="sup-grid">
        @php $supFeatures = [
          ['01', 'Adaptive Learning Tools', "Content that adjusts to each student's pace, style, and comprehension level in real time."],
          ['02', 'Intelligent Tutoring System', 'AI tutors that identify weak areas and deliver targeted practice to close knowledge gaps.'],
          ['03', '24/7 Virtual Assistance', 'Round-the-clock AI support for academic queries, campus info, and administrative help.'],
          ['04', 'Virtual Mentorship', 'AI mentors that guide students through goals, career paths, and personal development.'],
          ['05', 'Efficient Attendance Tracking', 'Automated biometric and AI-powered attendance with instant sync to academic records.'],
          ['06', 'Placements Assistance', 'Resume building, mock interviews, and placement prep powered by real market data.'],
        ]; @endphp
        @foreach($supFeatures as $f)
        <div class="sup-card">
          <span class="sup-card-num">{{ $f[0] }}</span>
          <div>
            <h3 class="sup-card-title">{{ $f[1] }}</h3>
            <p class="sup-card-desc">{{ $f[2] }}</p>
          </div>
        </div>
        @endforeach
      </div>
    </div>
  </section>

 {{-- ═══════════════════════════════════════
       INDUSTRY EXPOSURE SECTION
  ═══════════════════════════════════════ --}}
  @php
    $indFeatures = [
      ['fa-solid fa-city', 'Industry Collaborations', 'MoUs and strategic partnerships with leading corporates for curriculum design, training, and joint research.'],
      ['fa-solid fa-laptop-code', 'Internships', 'Structured internship programs that give students real workplace exposure before they graduate.'],
      ['fa-solid fa-bus', 'Industrial Visits', 'Regular visits to plants, offices, and R&D centres to connect classroom learning with real operations.'],
      ['fa-solid fa-people-group', 'Experiential Learning', 'Live projects, hackathons, and case studies designed with industry mentors for hands-on skill-building.'],
      ['fa-solid fa-chalkboard-user', 'Guest Lectures', 'Sessions by industry leaders and alumni sharing current trends, tools, and career insights.'],
      ['fa-solid fa-certificate', 'Certification Programs', 'Add-on certifications aligned with industry requirements to boost employability.'],
    ];
  @endphp
  <style>
    .ind-wrap { background: #f4f6fb; padding: 40px 0; }
    .ind-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
    @media (min-width: 1024px) { .ind-container { padding: 0 56px; } }
    .ind-header { text-align: center; margin-bottom: 48px; }
    .ind-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; color: #F07F1A; display: block; margin-bottom: 12px; }
    .ind-title { font-size: clamp(26px, 3.5vw, 42px); font-weight: 800; color: #0F2239; margin: 0 0 12px; }
    .ind-title span { color: #F07F1A; }
    .ind-sub { font-size: 15px; color: #64748b; max-width: 620px; margin: 0 auto; line-height: 1.7; }
    .ind-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
    @media (min-width: 600px) { .ind-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 992px) { .ind-grid { grid-template-columns: repeat(3, 1fr); } }
    .ind-card { background: #fff; border-radius: 18px; padding: 28px 24px; border: 1px solid #E9EEF5; box-shadow: 0 4px 22px rgba(15,34,57,.05); transition: .25s; }
    .ind-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(15,34,57,.12); border-color: rgba(240,127,26,.35); }
    .ind-ico { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg,#0F2239,#1e3a66); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; margin-bottom: 16px; }
    .ind-card:hover .ind-ico { background: linear-gradient(135deg,#F07F1A,#f6bb18); }
    .ind-card h3 { font-size: 17px; font-weight: 800; color: #0F2239; margin: 0 0 8px; }
    .ind-card p { font-size: 13.5px; color: #64748b; line-height: 1.7; margin: 0; }
  </style>

  <section class="ind-wrap">
    <div class="ind-container">
      <div class="ind-header">
        <span class="ind-eyebrow">Industry Exposure</span>
        <h2 class="ind-title">Learning That Goes <span>Beyond the Classroom</span></h2>
        <p class="ind-sub">Industry collaborations, internships, industrial visits, and experiential learning give our students a head start before they graduate.</p>
      </div>
      <div class="ind-grid">
        @foreach($indFeatures as $f)
        <div class="ind-card">
          <div class="ind-ico"><i class="{{ $f[0] }}"></i></div>
          <h3>{{ $f[1] }}</h3>
          <p>{{ $f[2] }}</p>
        </div>
        @endforeach
      </div>
    </div>
  </section>

  
  <!-- RU Life Section -->
 <!-- <section class="ru-life-section" id="ru-life">
    <div class="container">
      <div class="row">
        <div class="col-lg-8">
          <div class="ru-life-card" style="background-image: url('images/ffrai1.jpg');">
            <div class="ru-life-content">
              <h2 class="ru-life-title">I Love RU</h2>
              <p class="ru-life-description">Experience the warmth, community, and unforgettable moments that make Rai University a home away from home. Our students create lifelong memories and friendships that last forever.</p>
            </div>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="ru-life-card" style="background-image: url('document/rai_student.JPG');">
            <div class="ru-life-content">
              <h2 class="ru-life-title">Life at RU</h2>
              <p class="ru-life-description">Discover the vibrant campus life filled with activities, events, and opportunities for personal and academic growth.</p>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-4">
          <div class="ru-life-card" style="background-image: url('document/sports_rai_uni.JPG');">
            <div class="ru-life-content">
              <h2 class="ru-life-title">RU Sports</h2>
              <p class="ru-life-description">Excel in sports and fitness with our world-class facilities and coaching programs that develop champions.</p>
            </div>
          </div>
        </div>
        <div class="col-lg-8">
          <div class="ru-life-card" style="background-image: url('images/ffrai3.jpg');">
            <div class="ru-life-content">
              <h2 class="ru-life-title">RU Innovation</h2>
              <p class="ru-life-description">Join our innovation hub where creative minds come together to solve real-world problems. From research labs to startup incubators, we foster the next generation of innovators and entrepreneurs.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>-->

 

 

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      @foreach($plcGallery as $index => $item)
      new Swiper('.plcSlider{{ $index }}', {
        loop: true,
        speed: 800,
        autoplay: { delay: 2200 + ({{ $index }} * 400), disableOnInteraction: false },
        pagination: { el: '.page{{ $index }}', clickable: true },
      });
      @endforeach
    });
  </script>
 {{-- ═══════════════════════════════════════
       SPOTLIGHT MARQUEE SECTION
  ═══════════════════════════════════════ --}}
  @php
    $row1Images = [
      'document/home/event/achievemnt/RSE_Placement.jpg',
      'document/home/event/achievemnt/Mr. Shivam Prajapati a.jpg',
      'document/home/slider/Award_2023.jpg',
      'document/home/slider/Award_2023_2.jpg',
       'document/home/event/achievemnt/RSE_Placement.jpg',
      'document/home/event/achievemnt/Mr. Shivam Prajapati a.jpg',
      'document/home/event/achievemnt/certification_sop.jpg',
    ];
    $row2Images = [
      'document/home/event/IMG_3670.JPG',
      'document/home/event/IMG_3462.JPG',
      'document/home/event/IMG_3571.JPG',
      'document/home/event/IMG_3613.JPG',
      'document/home/event/IMG_3732.JPG',
      'document/home/event/campus2.webp',
      'document/home/event/campus3.webp',
      'document/home/event/campus4.webp',
      'document/home/event/IMG_0418.JPG',
      'document/home/event/IMG_0526.JPG',
      'document/home/event/IMG_0945.JPG',
      'document/home/event/IMG_0972.JPG',
      'document/home/event/IMG_1502.JPG',
      'document/home/event/IMG_2634.CR2',
      'document/home/event/IMG_9645.JPG',
      'document/home/event/IMG_9651.JPG',
    ];
  @endphp

  <style>
    .marquee-section { width: 100%; overflow: hidden; background: #0f2239; padding: 2px 0; position: relative; }
    .marquee-section::before, .marquee-section::after {
      content: ''; position: absolute; top: 0; width: 120px; height: 100%; z-index: 3; pointer-events: none;
    }
    .marquee-section::before { left: 0; background: linear-gradient(to right, rgba(0,0,0,.8), transparent); }
    .marquee-section::after { right: 0; background: linear-gradient(to left, rgba(0,0,0,.8), transparent); }

    .marquee-row { display: flex; overflow: hidden; user-select: none; margin-bottom: 2px; }
    .marquee-row:last-child { margin-bottom: 0; }

    .marquee-track { display: flex; flex-shrink: 0; gap: 2px; min-width: 100%; }

    .scroll-left { animation: scrollLeft 35s linear infinite; }
    .scroll-right { animation: scrollRight 35s linear infinite; }
    .marquee-row:hover .marquee-track { animation-play-state: paused; }

    .marquee-item { height: 200px; flex-shrink: 0; }
    .marquee-item img { height: 100%; width: auto; object-fit: cover; display: block; transition: transform .3s ease, filter .3s ease; }
    .marquee-item:hover img { transform: scale(1.03); filter: brightness(1.1); }

    @keyframes scrollLeft { from { transform: translateX(0%); } to { transform: translateX(-100%); } }
    @keyframes scrollRight { from { transform: translateX(-100%); } to { transform: translateX(0%); } }

    @media (max-width: 768px) {
      .marquee-item { height: 130px; }
      .scroll-left, .scroll-right { animation-duration: 20s; }
    }
  </style>

  <section class="marquee-section">
   <!-- <div class="plc-header">
      <span class="plc-eyebrow">Spot Light</span>
      <p class="plc-sub">Where a Dream Turns into Reality - <span>Celebrating People, Passion, and Progress at RU</span></p>
    </div>-->
    
     <div class="plc-header">
        <span class="plc-eyebrow">Spot Light</span>
        <h2 class="plc-title" style="
    color: #fff;">Our <span>Achievement, Award & Celebration</span></h2>
        <p class="plc-sub">Where a Dream Turns into Reality - <span>Celebrating People, Passion, and Progress at RU</p>
      </div>
    
    
    
    
    

    {{-- TOP ROW: Left to Right Loop --}}
    <div class="marquee-row">
      <div class="marquee-track scroll-left">
        @foreach($row1Images as $img)
          <div class="marquee-item">
            <img src="{{ asset($img) }}" alt="Placement Highlight"
                onerror="this.onerror=null; this.src='document/home/event/achievemnt/certification_sop.jpg';">
          </div>
        @endforeach
      </div>
      <div class="marquee-track scroll-left" aria-hidden="true">
        @foreach($row1Images as $img)
          <div class="marquee-item">
            <img src="{{ asset($img) }}" alt="Placement Highlight"
                 onerror="this.onerror=null; this.src='document/home/event/achievemnt/certification_sop.jpg';">
          </div>
        @endforeach
      </div>
    </div>

    {{-- BOTTOM ROW: Right to Left Loop --}}
    <div class="marquee-row">
      <div class="marquee-track scroll-right">
        @foreach($row2Images as $img)
          <div class="marquee-item">
            <img src="{{ asset($img) }}" alt="Campus Event"
                onerror="this.onerror=null; this.src='document/home/event/IMG_0418.JPG';">
          </div>
        @endforeach
      </div>
      <div class="marquee-track scroll-right" aria-hidden="true">
        @foreach($row2Images as $img)
          <div class="marquee-item">
            <img src="{{ asset($img) }}" alt="Campus Event"
              onerror="this.onerror=null; this.src='document/home/event/IMG_0418.JPG';">
          </div>
        @endforeach
      </div>
    </div>
  </section>

  {{-- ═══════════════════════════════════════
       SCHOLARSHIP SECTION
  ═══════════════════════════════════════ --}}
  @php
    $schCards = [
      ['fa-solid fa-medal', 'Merit Scholarship', 'Up to 100% tuition waiver for students with outstanding academic records in 10+2 or graduation.'],
      ['fa-solid fa-futbol', 'Sports Scholarship', 'Fee concessions for state, national, and international-level sports achievers.'],
      ['fa-solid fa-people-roof', 'Sibling & Alumni Quota', 'Special fee benefits for siblings of existing students and children of Rai University alumni.'],
      ['fa-solid fa-shield-halved', 'Defence Quota', 'Dedicated scholarship support for children of defence and para-military personnel.'],
      ['fa-solid fa-hand-holding-heart', 'Economically Weaker Section', 'Need-based financial assistance for deserving students from EWS backgrounds.'],
      ['fa-solid fa-person-cane', 'Differently-Abled Support', 'Fee concessions and campus support for differently-abled students.'],
    ];
  @endphp
  <style>
    .sch-wrap { background: linear-gradient(160deg,#FFF6EC 0%,#FBFDFF 55%,#FEF3E8 100%); padding: 40px 0; }
    .sch-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
    @media (min-width: 1024px) { .sch-container { padding: 0 56px; } }
    .sch-header { text-align: center; margin-bottom: 44px; }
    .sch-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; color: #F07F1A; display: block; margin-bottom: 12px; }
    .sch-title { font-size: clamp(26px, 3.5vw, 42px); font-weight: 800; color: #0F2239; margin: 0 0 12px; }
    .sch-title span { color: #F07F1A; }
    .sch-sub { font-size: 15px; color: #5b6675; max-width: 620px; margin: 0 auto; line-height: 1.7; }
    .sch-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
    @media (min-width: 600px) { .sch-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 992px) { .sch-grid { grid-template-columns: repeat(3, 1fr); } }
    .sch-card { background: #fff; border-radius: 18px; padding: 26px 22px; border: 1px solid #E9EEF5; box-shadow: 0 4px 22px rgba(15,34,57,.05); transition: .25s; }
    .sch-card:hover { transform: translateY(-5px); border-color: rgba(240,127,26,.4); box-shadow: 0 18px 40px rgba(15,34,57,.12); }
    .sch-ico { width: 50px; height: 50px; border-radius: 50%; background: rgba(240,127,26,.12); color: #F07F1A; display: flex; align-items: center; justify-content: center; font-size: 19px; margin-bottom: 14px; }
    .sch-card h3 { font-size: 16.5px; font-weight: 800; color: #0F2239; margin: 0 0 8px; }
    .sch-card p { font-size: 13.5px; color: #64748b; line-height: 1.7; margin: 0; }
    .sch-cta { text-align: center; margin-top: 36px; }
  </style>

  <section class="sch-wrap">
    <div class="sch-container">
      <div class="sch-header">
        <span class="sch-eyebrow">Scholarships</span>
        <h2 class="sch-title">Financial Support for <span>Every Deserving Student</span></h2>
        <p class="sch-sub">We believe merit and talent should never be limited by finances. Explore the scholarship categories available at Rai University.</p>
      </div>
      <div class="sch-grid">
        @foreach($schCards as $s)
        <div class="sch-card">
          <div class="sch-ico"><i class="{{ $s[0] }}"></i></div>
          <h3>{{ $s[1] }}</h3>
          <p>{{ $s[2] }}</p>
        </div>
        @endforeach
      </div>
      <div class="sch-cta">
        <a href="{{ url('/scholarship') }}" class="th-btn">Check Your Scholarship Eligibility <i class="fa-regular fa-arrow-right ms-2"></i></a>
      </div>
    </div>
  </section>

  <!--==============================
  Blog Area
  ==============================-->
  <!--<section class="overflow-hidden space" id="blog-sec" style="background: #1a7e83;">
    <div class="container">
      <div class="mb-35 text-center text-md-start">
        <div class="row align-items-center justify-content-between">
          <div class="col-md-8">
            <div class="title-area mb-md-0">
              <span class="sub-title"><i class="fal fa-book me-2"></i> Our News & Blogs</span>
              <h2 class="sec-title">Latests News & Blogs</h2>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        @if($posts->count() > 0)
          <!-- Latest Post (Col 1) -->
        <!--  <div class="col-md-6">
            <div class="th-blog blog-single style2">
              <div class="blog-img">
                <a href="{{ route('blogs.show', $posts[0]->slug) }}">
                  <img src="{{ $posts[0]->image ? asset('blogs/' . $posts[0]->image) : url('/') . '/assets/img/blog/default-blog.jpg' }}" alt="Blog Image">
                </a>
              </div>
              <div class="blog-content">
                <div class="blog-meta">
                  <a href="{{ route('blogs.show', $posts[0]->slug) }}"><i class="fa-light fa-clock"></i>{{ $posts[0]->formatted_date }}</a>
                </div>
                <h4 class="box-title"><a href="{{ route('blogs.show', $posts[0]->slug) }}">{!! $posts[0]->title !!}</a></h4>
                <a href="{{ route('blogs.show', $posts[0]->slug) }}" class="link-btn">Read More Details<i class="fas fa-arrow-right ms-2"></i></a>
              </div>
            </div>
          </div>
        @endif

        <!-- Next 3 Posts (Col 2) -->
       <!-- <div class="col-md-6">
          @foreach($posts->slice(1, 3) as $post)
            <div class="th-blog blog-single" style="display: flex; flex-direction: row; margin-bottom: 24px; background: #fff;">
              <div class="blog-img2" style="display: flex;">
                <a href="{{ route('blogs.show', $post->slug) }}">
                  <img src="{{ $post->image ? asset('blogs/' . $post->image) : url('/') . '/assets/img/blog/default-blog.jpg' }}" alt="Blog Image">
                </a>
              </div>
              <div class="blog-content" style="margin-left: 20px;">
                <div class="blog-meta">
                  <a href="{{ route('blogs.show', $post->slug) }}"><i class="fa-light fa-clock"></i>{{ $post->formatted_date }}</a>
                </div>
                <h4 class="box-title"><a href="{{ route('blogs.show', $post->slug) }}">{!! $post->title !!}</a></h4>
                <a href="{{ route('blogs.show', $post->slug) }}" class="link-btn">Read More Details<i class="fas fa-arrow-right ms-2"></i></a>
              </div>
            </div>
          @endforeach
          <div class="col-md-auto">
            <a href="{{ url('/blog') }}" class="th-btn">View All Posts<i class="fa-solid fa-arrow-right ms-2"></i></a>
          </div>
        </div>

        <style>
          .col-md-6 > .th-blog.blog-single .blog-img2 {
            width: 120px; height: 120px; min-width: 120px; min-height: 120px;
            max-width: 120px; max-height: 120px; overflow: hidden;
            display: flex; align-items: center; justify-content: center;
            border-radius: 8px; background: #f7f7f7;
          }
          .col-md-6 > .th-blog.blog-single .blog-img2 img {
            width: 100%; height: 100%; object-fit: cover; display: block;
          }
        </style>
      </div>
    </div>
  </section>-->

  <!--==============================
  Slider autoplay (legacy .hero-slider support, no hover-pause)
  ==============================-->
  <script>
  (function () {
    let currentIndex = 0;
    let autoplayInterval;

    function getSlides() { return document.querySelectorAll('.hero-slider .slide'); }
    function getDots() { return document.querySelectorAll('.hero-slider .slider-dot'); }

    function showSlide(index) {
      const slides = getSlides();
      const dots = getDots();
      if (!slides.length) return;

      if (index >= slides.length) currentIndex = 0;
      else if (index < 0) currentIndex = slides.length - 1;
      else currentIndex = index;

      slides.forEach((slide, i) => slide.classList.toggle('active', i === currentIndex));
      dots.forEach((dot, i) => dot.classList.toggle('active', i === currentIndex));
    }

    function startAutoplay() {
      autoplayInterval = setInterval(() => { showSlide(currentIndex + 1); }, 3000);
    }
    function stopAutoplay() { clearInterval(autoplayInterval); }

    window.changeSlide = function (step) { stopAutoplay(); showSlide(currentIndex + step); startAutoplay(); };
    window.currentSlide = function (index) { stopAutoplay(); showSlide(index - 1); startAutoplay(); };

    document.addEventListener('DOMContentLoaded', function () {
      showSlide(0);
      startAutoplay();
    });
  })();
  </script>

   
 
    <!--==============================
Testimonial Area
==============================-->
    <section class="testi-area-1 overflow-hidden space-bottom" data-bg-src="{{ url('/') }}/assets/img/bg/testi_bg_1.png">
        
        <div class="container">
            <div class="title-area text-center mb-50">
                <span class="sub-title"><i class="fal fa-book me-2"></i> Our Students Testimonials</span>
                <h2 class="sec-title">Students Say’s About Our University</h2>
            </div>
            <div class="row">
                <div class="col-xl-12">
                    <div class="th-carousel testi-slider1 dot-style2 row" id="testimonial-slider1" data-slide-show="2" data-ml-slide-show="2" data-lg-slide-show="1" data-md-slide-show="1" data-dots="true" data-arrows="false">
                        <div class="col-lg-6">
                            <div class="testi-box">
                                <div class="testi-box-bg-shape">
                                    <svg width="150" height="137" viewBox="0 0 150 137" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M0 9.99951C0 4.47666 4.47715 -0.000488281 10 -0.000488281H140C145.523 -0.000488281 150 4.47666 150 9.99951V10.5803C150 13.3951 148.814 16.0796 146.732 17.9747L18.8619 134.394C17.0205 136.07 14.6199 137 12.1297 137H10C4.47715 137 0 132.522 0 127V9.99951Z" fill="#0f385f" />
                                    </svg>
                                </div>
                                <div class="testi-box_content">
                                    <div class="testi-box_img">
                                        <img src="{{ url('/document/testimonial/Tonching.png') }}" alt="Avater">
                                    </div>
                                    <p class="testi-box_text">“Rai University” - these words evoke so many memories. Four years seem so short as I say goodbye. From my first day, the hospitality and new experiences were overwhelming. The supportive faculty, beautiful campus, quality education, and amazing people made it everything I hoped for. Throughout my journey here, I have grown in every aspect as a student and person. The faculty stood by me from day one to the end of placements. Thank you, Rai University - the administrators, HODs, and faculty, for your unwavering support and kindness. I will always remain your student. Thank you, Rai University, for being one of my best memories.</p>
                                </div>
                                <div class="testi-box_bottom">
                                    <div>
                                        <h3 class="testi-box_name">Tonching Yangmai Chang</h3>
                                        <!--<span class="testi-box_desig">Regular Student</span>-->
                                    </div>
                                    <div class="testi-box_review">
                                        <i class="fa-solid fa-star-sharp"></i>
                                        <i class="fa-solid fa-star-sharp"></i>
                                        <i class="fa-solid fa-star-sharp"></i>
                                        <i class="fa-solid fa-star-sharp"></i>
                                        <i class="fa-solid fa-star-sharp"></i>
                                        (4.7)
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="testi-box">
                                <div class="testi-box-bg-shape">
                                    <svg width="150" height="137" viewBox="0 0 150 137" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M0 9.99951C0 4.47666 4.47715 -0.000488281 10 -0.000488281H140C145.523 -0.000488281 150 4.47666 150 9.99951V10.5803C150 13.3951 148.814 16.0796 146.732 17.9747L18.8619 134.394C17.0205 136.07 14.6199 137 12.1297 137H10C4.47715 137 0 132.522 0 127V9.99951Z" fill="#0f385f" />
                                    </svg>
                                </div>
                                <div class="testi-box_content">
                                    <div class="testi-box_img">
                                        <img src="{{ url('/document/testimonial/Uzmah-Girach.png') }}" alt="Avater">
                                    </div>
                                    <p class="testi-box_text">As a proud alumnus of Rai University, I am honored to share my journey with you. Being part of the foundation batch of the B-Pharm program holds a special place in my heart. Our journey was filed with learning, camaraderie, and growth, laying a strong foundation for future batches. The dedication and support of our esteemed faculty, who instilled perseverance and integrity, marked my time at Rai University. I am proud to be part of the Rai University family and look forward to its continued growth.</p>
                                </div>
                                <div class="testi-box_bottom">
                                    <div>
                                        <h3 class="testi-box_name">Uzmah Girach</h3>
                                        <!--<span class="testi-box_desig">IT Student</span>-->
                                    </div>
                                    <div class="testi-box_review">
                                        <i class="fa-solid fa-star-sharp"></i>
                                        <i class="fa-solid fa-star-sharp"></i>
                                        <i class="fa-solid fa-star-sharp"></i>
                                        <i class="fa-solid fa-star-sharp"></i>
                                        <i class="fa-solid fa-star-sharp"></i>
                                        (4.7)
                                    </div>
                                </div>
                            </div>
                        </div>

<div class="col-lg-6">
                            <div class="testi-box">
                                <div class="testi-box-bg-shape">
                                    <svg width="150" height="137" viewBox="0 0 150 137" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M0 9.99951C0 4.47666 4.47715 -0.000488281 10 -0.000488281H140C145.523 -0.000488281 150 4.47666 150 9.99951V10.5803C150 13.3951 148.814 16.0796 146.732 17.9747L18.8619 134.394C17.0205 136.07 14.6199 137 12.1297 137H10C4.47715 137 0 132.522 0 127V9.99951Z" fill="#0f385f" />
                                    </svg>
                                </div>
                                <div class="testi-box_content">
                                    <div class="testi-box_img">
                                        <img src="{{ url('/document/testimonial/Meet_chauhan_.png') }}" alt="Avater">
                                    </div>
                                    <p class="testi-box_text">I am Meet Chauhan,  I have recently completed my MBA in HR and Finance from rai university. My experience at Rai University during the MBA program has been very enriching. The supportive faculty, interactive seminars, and well-organized cultural and academic activities made learning more engaging. These experiences not only improved my knowledge but also enhanced my confidence and communication skills. I am thankful to all the faculty members and the university for providing such a positive and growth-oriented environment.</p>
                                </div>
                                <div class="testi-box_bottom">
                                    <div>
                                        <h3 class="testi-box_name">Meet Chauhan</h3>
                                        <!--<span class="testi-box_desig">IT Student</span>-->
                                    </div>
                                    <div class="testi-box_review">
                                        <i class="fa-solid fa-star-sharp"></i>
                                        <i class="fa-solid fa-star-sharp"></i>
                                        <i class="fa-solid fa-star-sharp"></i>
                                        <i class="fa-solid fa-star-sharp"></i>
                                        <i class="fa-solid fa-star-sharp"></i>
                                        (4.7)
                                    </div>
                                </div>
                            </div>
                        </div>

<div class="col-lg-6">
                            <div class="testi-box">
                                <div class="testi-box-bg-shape">
                                    <svg width="150" height="137" viewBox="0 0 150 137" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M0 9.99951C0 4.47666 4.47715 -0.000488281 10 -0.000488281H140C145.523 -0.000488281 150 4.47666 150 9.99951V10.5803C150 13.3951 148.814 16.0796 146.732 17.9747L18.8619 134.394C17.0205 136.07 14.6199 137 12.1297 137H10C4.47715 137 0 132.522 0 127V9.99951Z" fill="#0f385f" />
                                    </svg>
                                </div>
                                <div class="testi-box_content">
                                    <div class="testi-box_img">
                                        <img src="{{ url('/document/testimonial/Amit_Pawar_.png') }}" alt="Avater">
                                    </div>
                                    <p class="testi-box_text">“Rai University promised to ‘produce responsible citizens’ and it delivered. The Law School’s vision resonates through pro-bono hours, guest lectures by public-interest litigators, and interdisciplinary electives with the School ideology. The campus ethos prizes openness and celebrate diversity without fear. Knowing that honesty is non-negotiable has given me the confidence to argue boldly and ethically in internships and moot courts alike.”</p>
                                </div>
                                <div class="testi-box_bottom">
                                    <div>
                                        <h3 class="testi-box_name">Amit Pawar</h3>
                                        <!--<span class="testi-box_desig">IT Student</span>-->
                                    </div>
                                    <div class="testi-box_review">
                                        <i class="fa-solid fa-star-sharp"></i>
                                        <i class="fa-solid fa-star-sharp"></i>
                                        <i class="fa-solid fa-star-sharp"></i>
                                        <i class="fa-solid fa-star-sharp"></i>
                                        <i class="fa-solid fa-star-sharp"></i>
                                        (4.7)
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <div class="testi-box">
                                <div class="testi-box-bg-shape">
                                    <svg width="150" height="137" viewBox="0 0 150 137" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M0 9.99951C0 4.47666 4.47715 -0.000488281 10 -0.000488281H140C145.523 -0.000488281 150 4.47666 150 9.99951V10.5803C150 13.3951 148.814 16.0796 146.732 17.9747L18.8619 134.394C17.0205 136.07 14.6199 137 12.1297 137H10C4.47715 137 0 132.522 0 127V9.99951Z" fill="#0f385f" />
                                    </svg>
                                </div>
                                <div class="testi-box_content">
                                    <div class="testi-box_img">
                                        <img src="{{ url('/document/testimonial/Ammena_Aghadi_.png') }}" alt="Avater">
                                    </div>
                                    <p class="testi-box_text">“From day one, Rai University’s School of Law made its purpose crystal-clear to shape lawyers who can serve the nation and society and not just pass exams. Over three semesters of moot-court marathons, legal-aid camps in rural Gujarat and drafting workshops, I saw that vision being lived out, not laminated on a wall. This blend of purpose, community and uncompromising integrity has prepared me to step into the courts with confidence and a clear moral compass.”</p>
                                </div>
                                <div class="testi-box_bottom">
                                    <div>
                                        <h3 class="testi-box_name">Ammena Aghadi</h3>
                                        <!--<span class="testi-box_desig">IT Student</span>-->
                                    </div>
                                    <div class="testi-box_review">
                                        <i class="fa-solid fa-star-sharp"></i>
                                        <i class="fa-solid fa-star-sharp"></i>
                                        <i class="fa-solid fa-star-sharp"></i>
                                        <i class="fa-solid fa-star-sharp"></i>
                                        <i class="fa-solid fa-star-sharp"></i>
                                        (4.7)
                                    </div>
                                </div>
                            </div>
                        </div>



                        <div class="col-lg-6">
                            <div class="testi-box">
                                <div class="testi-box-bg-shape">
                                    <svg width="150" height="137" viewBox="0 0 150 137" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M0 9.99951C0 4.47666 4.47715 -0.000488281 10 -0.000488281H140C145.523 -0.000488281 150 4.47666 150 9.99951V10.5803C150 13.3951 148.814 16.0796 146.732 17.9747L18.8619 134.394C17.0205 136.07 14.6199 137 12.1297 137H10C4.47715 137 0 132.522 0 127V9.99951Z" fill="#0f385f" />
                                    </svg>
                                </div>
                                <div class="testi-box_content">
                                    <div class="testi-box_img">
                                        <img src="{{ url('/document/testimonial/Vaishakhi-Mistri.png') }}" alt="Avater">
                                    </div>
                                    <p class="testi-box_text">My journey at Rai University has been one of growth, learning, and valuable experiences. From the moment I joined, I felt welcomed by a supportive community of faculty, staff, and fellow students. The university's focus on academic excellence and student success is evident in every aspect of campus life. Overall, Rai University has played a crucial role in shaping both my academic and personal journey. I am proud to be a part of this institution and would highly recommend it to anyone seeking quality education in a supportive and inspiring environment.</p>
                                </div>
                                <div class="testi-box_bottom">
                                    <div>
                                        <h3 class="testi-box_name">Vaishakhi Mistri</h3>
                                       <!-- <span class="testi-box_desig">Regular Student</span>-->
                                    </div>
                                    <div class="testi-box_review">
                                        <i class="fa-solid fa-star-sharp"></i>
                                        <i class="fa-solid fa-star-sharp"></i>
                                        <i class="fa-solid fa-star-sharp"></i>
                                        <i class="fa-solid fa-star-sharp"></i>
                                        <i class="fa-solid fa-star-sharp"></i>
                                        (4.7)
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        
    </section>  

@endsection