@extends('layouts.app3')

@section('title', 'Home')

@section('content')
  <!--==============================
Inquiery now button
==============================--> 
  <style>
   
    /* Vertical Inquiry Button */
    .inquiry-btn {
      position: fixed;
      top: 41%;
      right: -48px; /* 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);
    }
    /* Call Now Button (Red) */
.call-btn {
  position: fixed;
  top: 70%;   /* नीचे दिखाने के लिए */
  right: -53px;
  transform: translateY(-50%) rotate(-90deg);
  background-color: #dc3545;  /* Red */
  color: #fff;
  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;
}

.call-btn:hover {
  right: -55px;
  background-color: #b02a37;
}
.img-box1 .img2:after {
    content: '';
    position: absolute;
    left: -21px;
    top: -10px;
    background: #0f2239;
    height: 100%;
    width: 100%;
    border-radius: 10px;
    z-index: -1;
}

  </style>
</head>

  <!-- Right Side Vertical Button -->
  <a href="https://www.raiuniversity.edu/Admissions/" class="inquiry-btn">Apply Now</a>
  <a href="tel:+918980004322" class="call-btn"><i class="fa-solid fa-phone"></i> Call Now</a>
 
<!--==============================
Hero Section
==============================-->
<style>
:root { --ru-orange: #F07F1A; --ru-navy: #0F2239; }

/* ── outer wrapper ── */
.ruh { display: flex;
  align-items: stretch;
  min-height: 420px; }
@media(max-width:991px){ .ruh { display: flex;
  align-items: stretch;
  min-height: 420px;        /* adjust to your liking */ } }

/* ── LEFT: solid navy panel ── */
.ruh-left {
  background: var(--ru-navy);
  flex: 0 0 30%;
  max-width: 30%;
  padding: 32px 20px 32px 28px;
}
@media(max-width:991px){ .ruh-left  {
  flex: 0 0 42%;            /* was probably too wide or unconstrained */
  max-width: 30%;
  padding: 32px 28px;
} }
/* subtle dot grid decoration */
.ruh-left::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:28px 28px;
}

/* chips */
.ruh-chips { display:flex; flex-wrap:wrap; gap:8px; position:relative; }
.ruh-chip {
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid rgba(255,255,255,.18); border-radius:50px;
  padding:5px 14px; font-size:11px; font-weight:700;
  letter-spacing:.6px; text-transform:uppercase; color:rgba(255,255,255,.8);
}
.ruh-dot {
  width:6px; height:6px; border-radius:50%; background:var(--ru-orange);
  box-shadow:0 0 6px var(--ru-orange);
  animation:ruhPulse 1.6s ease-in-out infinite;
}
@keyframes ruhPulse{0%,100%{opacity:1}50%{opacity:.2}}

/* heading */
.ruh-h1 {
  font-size:clamp(36px,4vw,64px); font-weight:900; line-height:1.06;
  letter-spacing:-1.5px; color:#fff; margin:0; position:relative;
}
.ruh-h1 span { color:var(--ru-orange); }
.ruh-sub {
  font-size:clamp(15px,1.4vw,18px); font-weight:600;
  color:rgba(255,255,255,.6); border-left:3px solid var(--ru-orange);
  padding-left:14px; line-height:1.5; position:relative;
}

/* stats */
.ruh-stats {
  display:flex; flex-wrap:wrap; position:relative;
  border:1px solid rgba(255,255,255,.10); border-radius:14px; overflow:hidden;
}
.ruh-stat {
  flex:1; min-width:80px; padding:16px 12px 8px 12px;
  border-right:1px solid rgba(255,255,255,.10);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.ruh-stat:last-child{ border-right:none; }
.ruh-stat-n { font-size:clamp(20px,1.8vw,28px); font-weight:900; color:var(--ru-orange); line-height:1; display:block; }
.ruh-stat-l { font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:rgba(255,255,255,.4); display:block; margin:0; }

/* cta buttons */
.ruh-ctas { display:flex; flex-wrap:wrap; gap:5px; position:relative; }
.ruh-btn-a {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ru-orange); color:#fff; font-size:14px; font-weight:700;
  padding:13px 24px; border-radius:12px; text-decoration:none;
  box-shadow:0 8px 24px -4px rgba(240,127,26,.50);
  transition:transform .2s, box-shadow .2s;
}
.ruh-btn-a:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -4px rgba(240,127,26,.65); color:#fff; text-decoration:none; }
.ruh-btn-b {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.22);
  color:#fff; font-size:14px; font-weight:600;
  padding:12px 22px; border-radius:12px; text-decoration:none;
  transition:background .2s;
}
.ruh-btn-b:hover{ background:rgba(255,255,255,.16); color:#fff; text-decoration:none; }

/* ── RIGHT: slider ── */
.ruh-right {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 420px;
  background:#0a1228; min-height:0;
}
@media(max-width:991px){ .ruh-right { min-height:320px; } }

/* image slider */
.ruh-slider { position: relative;
	  width: 100%;
	  height: 100%;
	  min-height: 420px;      /* matches .ruh-right */ }
.ruh-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none; /* inactive slides can't be clicked */
}
.ruh-slide.active { opacity:1; pointer-events: auto; } /* only active slide is clickable */
.ruh-slide img {
 width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  background: #0a1622;
}

/* slider controls */
.ruh-arrows {
  position: absolute;
  bottom: 10px;
  right: 12px;
  z-index: 10;
  display: flex;
  gap: 6px;
}
.ruh-arrow {
  width:34px; height:34px; border-radius:50%;
  background:rgba(15,34,57,.65); border:1px solid rgba(255,255,255,.22);
  color:#fff; font-size:12px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.ruh-arrow:hover{ background:var(--ru-orange); border-color:var(--ru-orange); }

.ruh-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 6px;
}
.ruh-dot-btn {
  width:6px; height:6px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:rgba(255,255,255,.35); transition:background .2s, transform .2s;
  display:none;
}
.ruh-dot-btn.active { background:var(--ru-orange); transform:scale(1.4); }
/* ─────────────────────────────────────
   TABLET — 768px to 1024px
───────────────────────────────────── */
@media (max-width: 1024px) {
  .ruh {
    min-height: 360px;
  }
  .ruh-left {
    flex: 0 0 35%;
    max-width: 35%;
    padding: 24px 16px 24px 20px;
  }
  .ruh-right,
  .ruh-slider {
    min-height: 360px;
  }
}

/* ─────────────────────────────────────
   MOBILE — below 768px
   Left banner on top, slider below
───────────────────────────────────── */
@media (max-width: 768px) {
  .ruh {
    flex-direction: column;   /* stack vertically */
    min-height: unset;
  }

  /* Left panel — full width on mobile */
  .ruh-left {
    flex: unset;
    max-width: 100%;
    width: 100%;
    padding: 20px 16px 18px;
  }

  /* Stats row — 4 columns on mobile */
  .ruh-stats {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px;
  }

  .ruh-stat-n {
    font-size: 14px !important;
  }

  .ruh-stat-l {
    font-size: 8px !important;
  }

  /* CTA buttons side by side */
  .ruh-ctas {
    flex-direction: row;
    gap: 10px;
  }

  .ruh-btn-a,
  .ruh-btn-b {
    flex: 1;
    text-align: center;
  }

  /* Slider below — fixed height */
  .ruh-right {
    width: 100%;
    min-height: 260px;
  }

  .ruh-slider {
    min-height: 260px;
  }

  /* Arrows slightly smaller on mobile */
  .ruh-arrow {
    width: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
  }
}

/* ─────────────────────────────────────
   SMALL MOBILE — below 480px
───────────────────────────────────── */
@media (max-width: 480px) {
  .ruh-h1 {
    font-size: 26px !important;
  }

  /* Stats wrap to 2x2 grid on very small screens */
  .ruh-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .ruh-right {
    min-height: 220px;
  }

  .ruh-slider {
    min-height: 220px;
  }

  /* Stack CTA buttons on tiny screens */
  .ruh-ctas {
    flex-direction: column;
  }

  .ruh-btn-a,
  .ruh-btn-b {
    width: 100%;
  }
}
</style>

<section id="home">
  <div class="ruh">

    {{-- LEFT --}}
    <div class="ruh-left">
      <div class="ruh-chips">
        <span class="ruh-chip"><span class="ruh-dot"></span> Admissions Open 2026–27</span>
      </div>

      <div>
        <h1 class="ruh-h1">Welcome to<br>Rai <span>University</span></h1>
        <p class="ruh-sub" style="margin-top:14px;">AI-Enabled Techno Campus — Ahmedabad</p>
      </div>

      <div class="ruh-stats">
        <div class="ruh-stat"><div class="ruh-stat-n">12.7k+</div><div class="ruh-stat-l">Students</div></div>
        <div class="ruh-stat"><div class="ruh-stat-n">100+</div><div class="ruh-stat-l">Recruiters</div></div>
        <div class="ruh-stat"><div class="ruh-stat-n">52+</div><div class="ruh-stat-l">Labs</div></div>
        <div class="ruh-stat"><div class="ruh-stat-n">400+</div><div class="ruh-stat-l">Research</div></div>
      </div>
&nbsp;
      <div class="ruh-ctas">
        <a href="https://www.raiuniversity.edu/Admissions/" class="ruh-btn-a">
          Apply Now &nbsp;<i class="fas fa-arrow-right" style="font-size:12px;"></i>
        </a>
        <a href="#about-sec" class="ruh-btn-b">Explore University</a>
      </div>
    </div>

    {{-- RIGHT --}}
    <div class="ruh-right">

      {{-- Image slider --}}
      <div class="ruh-slider" id="ruhSlider">
        <div class="ruh-slide"><img src="{{ url('/') }}/images/slider/Quality_Council_of_India_(QCI).webp" alt="Rai University"></div>
        <div class="ruh-slide"><img src="{{ url('/') }}/images/slider/website-slider_webp.webp" alt="Rai University"></div>
        <div class="ruh-slide"><img src="{{ url('/') }}/images/slider/rencore_webp.webp" alt=""></div>
        <div class="ruh-slide"><img src="{{ url('/') }}/images/slider/Slider_3_webp.webp" alt=""></div>
        <div class="ruh-slide"><img src="{{ url('/') }}/document/slider/PLACEMENT_DRIVE.jpg" alt=""></div>
        <div class="ruh-slide"><img src="{{ url('/') }}/document/slider/Design_exhibition_2026.jpg" alt=""></div>
        <div class="ruh-slide"><img src="{{ url('/') }}/document/slider/slider_13.webp" alt=""></div>
        <div class="ruh-slide"><img src="{{ url('/') }}/document/slider/Praytn_club_7.webp" alt=""></div>
        <div class="ruh-slide"><img src="{{ url('/') }}/document/home/slider/Award_2023.jpg" alt=""></div>
        <div class="ruh-slide"><img src="{{ url('/') }}/document/slider/slider_MY-FM_9.webp" alt=""></div>
        <div class="ruh-slide"><a href="https://www.raiuniversity.edu/icetai2026/"><img src="{{ url('/') }}/document/slider/slider_international_10.webp" alt=""></a></div>

        <div class="ruh-dots" id="ruhDots"></div>
        <div class="ruh-arrows">
          <button class="ruh-arrow" onclick="ruhNav(-1)"><i class="fas fa-chevron-left"></i></button>
          <button class="ruh-arrow" onclick="ruhNav(1)"><i class="fas fa-chevron-right"></i></button>
        </div>
      </div>

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

<script>
(function(){
  var slides = document.querySelectorAll('#ruhSlider .ruh-slide');
  var dotsWrap = document.getElementById('ruhDots');
  var cur = 0, timer;

  slides.forEach(function(_,i){
    var b = document.createElement('button');
    b.className = 'ruh-dot-btn'+(i===0?' active':'');
    b.onclick = function(){ clearInterval(timer); go(i); start(); };
    dotsWrap.appendChild(b);
  });
  var dots = dotsWrap.querySelectorAll('.ruh-dot-btn');

  // 👇 THE FIX: show the first slide immediately, don't wait for the interval
  slides[0].classList.add('active');

  function go(n){
    slides[cur].classList.remove('active'); dots[cur].classList.remove('active');
    cur = (n + slides.length) % slides.length;
    slides[cur].classList.add('active'); dots[cur].classList.add('active');
  }
  function start(){ timer = setInterval(function(){ go(cur+1); }, 5000); }
  start();
  window.ruhNav = function(d){ clearInterval(timer); go(cur+d); start(); };
})();
</script>
   
    <!--==============================
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/ABOUT_RAI_IMAGE.png" alt="About">
                        </div>
                        <!--<div class="about-grid" data-bg-src="document/home/05.jpg">
                            <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_img.png" 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 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 mt-3">
                            <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>
 <!--==============================
Blog Area
==============================-->
<section class="overflow-hidden py-5" id="blog-sec" style="background:#1a7e83;">
    <div class="container">
        <div class="mb-4">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <div class="title-area mb-0">
                        <span class="sub-title">
                            <i class="fal fa-book me-2"></i> Our News & Blogs
                        </span>
                        <h2 class="sec-title text-white">Latest News & Blogs</h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="row g-4">

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

            <!-- Featured Blog -->
            <div class="col-lg-5 col-md-6">

                <div class="th-blog blog-single style2 shadow-sm">

                    <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=""
                                 class="img-fluid">
                        </a>
                    </div>

                    <div class="blog-content">

                        <div class="blog-meta mb-2">
                            <a href="{{ route('blogs.show',$posts[0]->slug) }}">
                                <i class="fa-light fa-clock"></i>
                                {{ $posts[0]->formatted_date }}
                            </a>
                        </div>

                        <h5 class="box-title">
                            <a href="{{ route('blogs.show',$posts[0]->slug) }}">
                                {!! $posts[0]->title !!}
                            </a>
                        </h5>

                        <a href="{{ route('blogs.show',$posts[0]->slug) }}" class="link-btn">
                            Read More
                            <i class="fas fa-arrow-right ms-2"></i>
                        </a>

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

            @endif


            <!-- Right Side -->
            <div class="col-lg-7 col-md-6">

                @foreach($posts->slice(1,3) as $post)

                <div class="th-blog blog-single blog-small shadow-sm">
                    <div class="blog-img2">
                        <a href="{{ route('blogs.show',$post->slug) }}">
                            <img src="{{ $post->image ? asset('blogs/'.$post->image) : url('/assets/img/blog/default-blog.jpg') }}"
                                 alt="">
                        </a>
                    </div>

                    <div class="blog-content">

                        <div class="blog-meta">
                            <a href="{{ route('blogs.show',$post->slug) }}">
                                <i class="fa-light fa-clock"></i>
                                {{ $post->formatted_date }}
                            </a>
                        </div>

                        <h6 class="box-title">
                            <a href="{{ route('blogs.show',$post->slug) }}">
                                {!! $post->title !!}
                            </a>
                        </h6>
                        <a href="{{ route('blogs.show',$post->slug) }}" class="link-btn">
                            Read More
                            <i class="fas fa-arrow-right ms-1"></i>
                        </a>
                    </div>
                </div>

                @endforeach

                <div class="mt-3">
                    <a href="{{ url('/blog') }}" class="th-btn">
                        View All Posts
                        <i class="fa-solid fa-arrow-right ms-2"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<style>

/* Featured Blog */

.style2{
    background:#fff;
    border-radius:10px;
    overflow:hidden;
}

.style2 .blog-img img {
    width: 100%;
    height: 260px;
    object-fit: contain; /* Prevents cropping, keeps full poster visible */
    background: #f8f9fa; /* Adds a clean background behind letterboxed edges */
}

.style2 .blog-content{
    padding:15px;
}

.style2 .box-title{
    font-size:18px;
    line-height:1.4;
    margin:8px 0;
}

.style2 .blog-meta{
    font-size:12px;
}


/* Right Blogs */

.blog-small{
    display:flex;
    align-items:center;
    background:#fff;
    border-radius:10px;
    padding:12px;
    margin-bottom:15px;
}

.blog-small .blog-img2{
    width:80px;
    height:80px;
    min-width:80px;
    overflow:hidden;
    border-radius:8px;
}

.blog-small .blog-img2 img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.blog-small .blog-content{
    margin-left:15px;
    padding:0;
}

.blog-small .blog-meta{
    font-size:11px;
}

.blog-small .box-title{
    font-size:14px;
    line-height:1.4;
    margin:6px 0;
}

.blog-small .link-btn{
    font-size:12px;
}

.th-btn{
    padding:10px 22px;
    font-size:13px;
}

</style>
{{-- ═══════════════════════════════════════
     SMART SECTION
═══════════════════════════════════════ --}}
<style>
/* Smart Section */
.ss-wrap { background:#fff; padding:80px 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; } }

/* Tabs */
.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; } }

/* Panel */
.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" style="flex-shrink:0;width:240px;" 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" style="flex:1;min-width:0;">
        @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:linear-gradient(160deg,#FFF6EC 0%,#FBFDFF 55%,#FEF3E8 100%);
  padding:90px 0; position:relative; overflow:hidden;
}
.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:0 56px; } }

.aim-header { display:flex; flex-direction:column; align-items:center; gap:14px; margin-bottom:52px; text-align:center; }
.aim-eyebrow {
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:2.5px; color:#F07F1A;
  display:inline-flex; align-items:center; gap:8px; padding:7px 16px; border-radius:999px;
  background:rgba(240,127,26,.1); border:1px solid rgba(240,127,26,.28);
}
.aim-title { font-size:clamp(28px,3.6vw,50px); font-weight:800; color:#0F2239; 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:#5b6675; max-width:600px; line-height:1.75; margin:0; }

/* light card grid */
.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:80px 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>

    <div class="cta-area-1" >
        <div class="container">
            <div class="row align-items-center justify-content-between">
                <div class="col-lg-8">
                    <div class="cta-wrap title-area mb-0">
                        <div class="cta-icon">
                            <img src="assets/img/normal/cta-icon1.png" alt="icon">
                        </div>
                        <div class="cta-content">
                            <h3 class="cta-title sec-title">The Journey Starts Now</h3>
                            
                        </div>
                        <a href="https://www.raiuniversity.edu/Admissions/" class="th-btn style8 mt-4">Apply Now<i class="fas fa-arrow-right ms-1"></i></a>
                    </div>
                </div>
            </div> 
        </div>
        <div class="cta-img-1" data-overlay="title" data-opacity="8">
            <img src="document/home/07.jpg" alt="Image">
            <a href="https://www.youtube.com/watch?v=jySdcGARFPQ" class="play-btn style2 popup-video"><i class="fa-sharp fa-solid fa-play"></i></a>
        </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>
    <!--==============================
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/student_ru.JPG" 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-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">Notices</h3>
                                        <ul class="wcu-box_text" 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/oct/Time_Table-Backlog_Examination_Nov-Dec-2026-SOP.pdf"><span style='font-size:22px;'>&#9758;</span>Backlog Time Table Examination SOP Nov-Dec-2026</a><img src="document/new1.gif" width="40" height="23"/></div>
                                        	<div class="notice-title"><a href="document/Campus_life/Notice/2026/oct/Time_Table-Backlog_Examination Nov-Dec-2026-RSA.pdf"><span style='font-size:22px;'>&#9758;</span>Backlog Time Table Examination RSA Nov-Dec-2026</a><img src="document/new1.gif" width="40" height="23"/></div>
                                        	<div class="notice-title"><a href="document/Campus_life/Notice/2026/oct/Time_Table-Backlog_Examination_Nov-Dec-2026-RSMS.pdf"><span style='font-size:22px;'>&#9758;</span>Backlog Time Table Examination RSMS Nov-Dec-2026</a><img src="document/new1.gif" width="40" height="23"/></div>
                                        	<div class="notice-title"><a href="document/Campus_life/Notice/2026/oct/Time_Table-Backlog_Examination_Nov-Dec-2026-RSS.pdf"><span style='font-size:22px;'>&#9758;</span>Backlog Time Table Examination RSS Nov-Dec-2026</a><img src="document/new1.gif" width="40" height="23"/></div>
                                        	<div class="notice-title"><a href="document/Campus_life/Notice/2026/oct/Time_Table-Backlog_Examination_Nov-Dec-2026-RSE.pdf"><span style='font-size:22px;'>&#9758;</span>Backlog Time Table Examination RSE Nov-Dec-2026</a><img src="document/new1.gif" width="40" height="23"/></div>
                                        	<div class="notice-title"><a href="document/Campus_life/Notice/2026/oct/Time_Table-Backlog_Examination_Nov-Dec-2026-SOL.pdf"><span style='font-size:22px;'>&#9758;</span>Backlog Time Table Examination SOL Nov-Dec-2026</a><img src="document/new1.gif" width="40" height="23"/></div>
                                            <div class="notice-title"><a href="document/Campus_life/Notice/2026/oct/Marksheet_Distribution_Notice_28_10_2026.jpg"><span style='font-size:22px;'>&#9758;</span>Marksheet Distribution 2026</a><img src="document/new1.gif" width="40" height="23"/></div>
                                            <div class="notice-title"><a href="document/Campus_life/Notice/2026/oct/Time_Table-Term_End_Examination_Dec_2026_RSA_B.Sc.(H)_Agri_Sem_III.pdf"><span style='font-size:22px;'>&#9758;</span>Time-Table Term End Examination RSA B.Sc.(H) Agri Sem-III Dec-2026</a><img src="document/new1.gif" width="40" height="23"/></div>
                                        	<div class="notice-title"><a href="document/Campus_life/Notice/2026/oct/Time_Table-Term_End_Examination_Dec_2026__SOP_B.Pharm_III_M.Pharm_Sem_III.pdf"><span style='font-size:22px;'>&#9758;</span>Time-Table Term End Examination SOP B.Pharm III, M.Pharm Sem-III Dec-2026</a><img src="document/new1.gif" width="40" height="23"/></div>
                                        	<div class="notice-title"><a href="document/Campus_life/Notice/2026/oct/25.Notice_Term_End_Examination_Dec_2026_B.Pharm.Sem_III_M.Pharm.Sem_III_B.Sc._(H)_Agri_Sem_III.pdf"><span style='font-size:22px;'>&#9758;</span>Notice-Term End Examination B.Pharm.Sem-III,M.Pharm.Sem-III,B.Sc.(H) Agri Sem-III Dec-2026</a><img src="document/new1.gif" width="40" height="23"/></div>
                                            <div class="notice-title"><a href="document/Campus_life/Notice/2026/oct/24_Notice_Result_Declaration_Even_Semester_Backlog_Examination_Sep_2026.pdf"><span style='font-size:22px;'>&#9758;</span>Notice - Result Declaration Even Semester Backlog Examination Sep-2026</a><img src="document/new1.gif" width="40" height="23"/></div>
                                            <div class="notice-title"><a href="document/Campus_life/Notice/2026/oct/Time_Table_-_Term_End_Semester_Examination_Nov-Dec_2026_RSD.pdf"><span style='font-size:22px;'>&#9758;</span>Time Table Term End Semester Examination RSD Nov-Dec 2026</a><img src="document/new1.gif" width="40" height="23"/></div>
                                            <div class="notice-title"><a href="document/Campus_life/Notice/2026/oct/Time_Table-Term_End_Semester_Examination_Nov-Dec-2026-RSA.pdf"><span style='font-size:22px;'>&#9758;</span>Time Table Term End Semester Examination RSA Nov-Dec 2026</a><img src="document/new1.gif" width="40" height="23"/></div>
                                        	<div class="notice-title"><a href="document/Campus_life/Notice/2026/oct/Time_Table-Term_End_Semester_Examination_Nov-Dec-2026-RSE.pdf"><span style='font-size:22px;'>&#9758;</span>Time Table Term End Semester Examination RSE Nov-Dec 2026</a><img src="document/new1.gif" width="40" height="23"/></div>
                                        	<div class="notice-title"><a href="document/Campus_life/Notice/2026/oct/Time_Table-Term_End_Semester_Examination_Nov-Dec-2026-RSLS.pdf"><span style='font-size:22px;'>&#9758;</span>Time Table Term End Semester Examination RSLS Nov-Dec 2026</a><img src="document/new1.gif" width="40" height="23"/></div>
                                        	<div class="notice-title"><a href="document/Campus_life/Notice/2026/oct/Time_Table-Term_End_Semester_Examination_Nov-Dec-2026-RSMS.pdf"><span style='font-size:22px;'>&#9758;</span>Time Table Term End Semester Examination RSMS Nov-Dec 2026</a><img src="document/new1.gif" width="40" height="23"/></div>
                                        	<div class="notice-title"><a href="document/Campus_life/Notice/2026/oct/Time_Table-Term_End_Semester_Examination_Nov-Dec-2026-RSS.pdf"><span style='font-size:22px;'>&#9758;</span>Time Table Term End Semester Examination RSS Nov-Dec 2026</a><img src="document/new1.gif" width="40" height="23"/></div>
                                        	<div class="notice-title"><a href="document/Campus_life/Notice/2026/oct/Time_Table-Term_End_Semester_Examination_Nov-Dec-2026-SOL.pdf"><span style='font-size:22px;'>&#9758;</span>Time Table Term End Semester Examination SOL Nov-Dec 2026</a><img src="document/new1.gif" width="40" height="23"/></div>
                                        	<div class="notice-title"><a href="document/Campus_life/Notice/2026/oct/Time_Table-Term_End_Semester_Examination_Nov-Dec-2026-SOP.pdf"><span style='font-size:22px;'>&#9758;</span>Time Table Term End Semester Examination SOP Nov-Dec 2026</a><img src="document/new1.gif" width="40" height="23"/></div>
                                            
                                        </marquee>
                                         <!--<li><a href="document/Campus_life/Notice/2026/jan/Term_End_Exam_Feb_2026_Time_Table_SOP.pdf"> Notice - Term End Exam Time Table SOP Feb-2026</a><img decoding="async" src="https://www.raiuniversity.edu/wp-content/uploads/new1.gif" width="40" height="23"></li>-->
        
                                        </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>
  
            </div>
        </div>
    </section>
    <!--==============================
Contact 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">
                                            <img src="{{ url('/') }}/logo/ACC.png" alt="ACC">
                                        </a>
                                    </div>
                                    <div>
                                        <a href="#" class="client-thumb">
                                            <img src="{{ url('/') }}/logo/Alite-Project.png" alt="Alite Project">
                                        </a>
                                    </div>
                                    <div>
                                        <a href="#" class="client-thumb">
                                            <img src="{{ url('/') }}/logo/Axis-Bank.png" alt="Axis Bank">
                                        </a>
                                    </div>
                                    <div>
                                        <a href="#" class="client-thumb">
                                            <img src="{{ url('/') }}/logo/Blue-Star.png" alt="Blue Star">
                                        </a>
                                    </div>
                                    <div>
                                        <a href="#" class="client-thumb">
                                            <img src="{{ url('/') }}/logo/Brilliant-Life.png" alt="Brilliant Life">
                                        </a>
                                    </div>
                                    <div>
                                        <a href="#" class="client-thumb">
                                            <img src="{{ url('/') }}/logo/Canara-1.png" alt="Canara">
                                        </a>
                                    </div>
                                    <div>
                                        <a href="#" class="client-thumb">
                                            <img src="{{ url('/') }}/logo/Canon.png" alt="Canon">
                                        </a>
                                    </div>
                                    <div>
                                        <a href="#" class="client-thumb">
                                            <img src="{{ url('/') }}/logo/Cartrade.png" alt="Cartrade">
                                        </a>
                                    </div>
                                    <div>
                                        <a href="#" class="client-thumb">
                                            <img src="{{ url('/') }}/logo/Concord.png" alt="Concord">
                                        </a>
                                    </div>
                                    <div>
                                        <a href="#" class="client-thumb">
                                            <img src="{{ url('/') }}/logo/Guj-Laboratories.png" alt="Guj Laboratories">
                                        </a>
                                    </div>
                                    <div>
                                         <a href="#" class="client-thumb">
                                             <img src="{{ asset('logo/lenskart.png') }}" alt="lenskart">
                                         </a>
                                    </div>
                                    <div>
                                        <a href="#" class="client-thumb">
                                            <img src="{{ asset('logo/lanetteam.png') }}" alt="lanetteam">
                                        </a>
                                    </div>
                                    <div>
                                        <a href="#" class="client-thumb">
                                            <img src="{{ asset('logo/nin9ztech.png') }}" alt="nin9ztech">
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
   
    <!--==============================
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="#801214" />
                                    </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>
                            </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="#801214" />
                                    </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>
                            </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="#801214" />
                                    </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>
                            </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="#801214" />
                                    </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>
                            </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="#801214" />
                                    </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>
                            </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="#801214" />
                                    </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>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section> --}}   
<!--<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() {
        stopAutoplay(); // prevent duplicate intervals
        autoplayInterval = setInterval(() => {
            showSlide(currentIndex + 1);
        }, 4000);
    }

    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 () {
        const slider = document.querySelector('.hero-slider');

        showSlide(0);
        startAutoplay();

        // Stop slider on hover
        slider.addEventListener('mouseenter', stopAutoplay);

        // Start again when mouse leaves
        slider.addEventListener('mouseleave', startAutoplay);
    });
})();
</script>-->
<!----without mouse hover stop in slider---->
<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>
@endsection