@extends('layouts.app3')

@section('title', 'Home')

@section('content')
  <!--==============================
  Inquiry now button
  ==============================-->
  <style>
    /* Vertical Inquiry Button */
    .inquiry-btn {
      position: fixed;
      top: 41%;
      right: -48px;
      transform: translateY(-50%) rotate(-90deg);
      background-color: #ffc107;
      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;
      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;
    }
  </style>

  <!-- Right Side Vertical Buttons -->
  <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
  ==============================-->
{{-- =========================================================
     HERO SLIDER  (replace the old <style>…</style> + <section id="home">…</section>
     + its <script> block in home.blade.php with this whole file)
========================================================= --}}

@php
  // Each slide: image, small line, highlighted word, paragraph, button 1, button 2
  // Change image paths / text as you like. Add or remove slides freely.
  $heroSlides = [
    [
      'image' => 'images/slider/website-slider_webp.webp',
      'line'  => 'Great Ideas Begin',
      'word'  => 'Together',
      'text'  => 'Collaborate with peers and faculty in an environment that encourages creativity, critical thinking, and innovation.',
      'btn1'  => ['Explore Programs', '#programs'],
      'btn2'  => ['Apply Now', 'https://www.raiuniversity.edu/Admissions/'],
    ],
    [
      'image' => 'images/slider/rencore_webp.webp',
      'line'  => 'Learn Today, Lead',
      'word'  => 'Tomorrow',
      'text'  => 'AI-enabled classrooms, 52+ labs and mentors from industry prepare you to lead from day one.',
      'btn1'  => ['Explore Programs', '#programs'],
      'btn2'  => ['Apply Now', 'https://www.raiuniversity.edu/Admissions/'],
    ],
    [
      'image' => 'images/slider/Slider_3_webp.webp',
      'line'  => 'Careers That Start',
      'word'  => 'On Campus',
      'text'  => '100+ recruiters, regular placement drives and internships that turn your degree into a career.',
      'btn1'  => ['Explore Programs', '#programs'],
      'btn2'  => ['Apply Now', 'https://www.raiuniversity.edu/Admissions/'],
    ],
  ];
@endphp

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap" rel="stylesheet">

<style>
  .hs {
    --hs-blue: #0b4a94;
    --hs-yellow: #ffc20e;
    --hs-navy: #0f2239;
    --hs-text: #1a1a1a;

    position: relative;
    width: 100%;
    overflow: hidden;
    font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
    background: radial-gradient(circle at 28% 50%, #d6d4cf 0%, #b3b1ab 60%, #a3a19b 100%);
  }

  /* All slides sit in the same grid cell, so height is set by the tallest one */
  .hs-track {
    display: grid;
    min-height: clamp(440px, 38vw, 600px);
  }
  .hs-slide {
    grid-area: 1 / 1;
    position: relative;
    opacity: 0;
    visibility: hidden;
    transition: opacity .7s ease, visibility .7s;
  }
  .hs-slide.is-active { opacity: 1; visibility: visible; z-index: 2; }

  /* ---------- Picture (right side, fades into grey on the left) ---------- */
  .hs-media {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 68%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 18%, #000 40%);
            mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 18%, #000 40%);
  }
  .hs-media img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
  }

  /* ---------- Text (left side) ---------- */
  .hs-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    max-width: 46%;
    padding: 40px 0 40px clamp(56px, 5.8vw, 92px);
    box-sizing: border-box;
  }

  .hs-line {
    margin: 0;
    font-size: clamp(26px, 2.6vw, 40px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--hs-blue);
    letter-spacing: -.3px;
  }
  .hs-word {
    display: inline-block;
    align-self: flex-start;
    margin: 4px 0 0 clamp(60px, 8.4vw, 128px);
    padding: 2px clamp(14px, 1.6vw, 26px) 6px;
    background: var(--hs-blue);
    color: var(--hs-yellow);
    font-size: clamp(40px, 4.8vw, 72px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.5px;
  }
  .hs-text {
    margin: clamp(22px, 3vw, 44px) 0 0;
    max-width: 500px;
    font-size: clamp(15px, 1.4vw, 21px);
    font-weight: 500;
    line-height: 1.5;
    color: var(--hs-text);
  }

  .hs-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin: clamp(28px, 4.6vw, 70px) 0 0 -66px; /* buttons start a little left of the text, as in the design */
  }
  .hs-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 11px 14px;
    background: var(--hs-yellow);
    color: var(--hs-navy);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .2px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    white-space: nowrap;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  }
  .hs-btn i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--hs-navy);
    color: var(--hs-yellow);
    font-size: 10px;
  }
  .hs-btn:hover { background: #ffd048; color: var(--hs-navy); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(15,34,57,.25); text-decoration: none; }
  .hs-btn:focus-visible,
  .hs-arrow:focus-visible,
  .hs-dot:focus-visible { outline: 3px solid var(--hs-blue); outline-offset: 2px; }

  /* ---------- Arrows ---------- */
  .hs-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 44px; height: 60px;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 26px;
    cursor: pointer;
    opacity: .85;
    text-shadow: 0 1px 6px rgba(0,0,0,.45);
    transition: opacity .2s, transform .2s;
  }
  .hs-arrow:hover { opacity: 1; }
  .hs-prev { left: 12px; }
  .hs-next { right: 12px; }
  .hs-prev:hover { transform: translateY(-50%) translateX(-3px); }
  .hs-next:hover { transform: translateY(-50%) translateX(3px); }

  /* ---------- Dots ---------- */
  .hs-dots {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    gap: 8px;
  }
  .hs-dot {
    width: 8px; height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.7);
    box-shadow: 0 0 0 1px rgba(0,0,0,.15);
    cursor: pointer;
    transition: background .2s, transform .2s;
  }
  .hs-dot.is-active { background: var(--hs-yellow); transform: scale(1.4); }

  /* ---------- Tablet ---------- */
  @media (max-width: 1100px) {
    .hs-content { max-width: 52%; padding-left: 56px; }
    .hs-btns { margin-left: -30px; gap: 20px; }
    .hs-btn { font-size: 13px; }
  }

  /* ---------- Mobile: picture on top, text underneath ---------- */
  @media (max-width: 767px) {
    .hs { background: #e9e7e2; }
    .hs-track { min-height: 0; }
    .hs-slide { display: flex; flex-direction: column; }

    .hs-media {
      position: relative;
      width: 100%;
      height: 240px;
      -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
              mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
    }
    .hs-content {
      max-width: 100%;
      padding: 8px 22px 56px;
    }
    .hs-line { font-size: 24px; }
    .hs-word { font-size: 40px; margin-left: 40px; }
    .hs-text { font-size: 15px; margin-top: 16px; }
    .hs-btns { margin: 22px 0 0; gap: 12px; }
    .hs-btn { font-size: 12px; padding: 10px 12px; gap: 10px; }

    .hs-arrow { top: 120px; width: 36px; height: 48px; font-size: 22px; }
    .hs-dots { bottom: 20px; }
    .hs-dot { background: rgba(15,34,57,.35); box-shadow: none; }
    .hs-dot.is-active { background: var(--hs-blue); }
  }

  @media (prefers-reduced-motion: reduce) {
    .hs-slide, .hs-btn, .hs-arrow, .hs-dot { transition: none; }
  }
</style>

<section id="home" class="hs" aria-roledescription="carousel" aria-label="Rai University highlights">
  <div class="hs-track" id="hsTrack">
    @foreach($heroSlides as $i => $s)
      <div class="hs-slide {{ $i === 0 ? 'is-active' : '' }}" role="group" aria-roledescription="slide" aria-label="{{ $i + 1 }} of {{ count($heroSlides) }}">
        <div class="hs-media">
          <img src="{{ url('/') }}/{{ $s['image'] }}"
               alt="Students at Rai University"
               @if($i > 0) loading="lazy" @endif>
        </div>

        <div class="hs-content">
          <h2 class="hs-line">{{ $s['line'] }}</h2>
          <span class="hs-word">{{ $s['word'] }}</span>
          <p class="hs-text">{{ $s['text'] }}</p>

          <div class="hs-btns">
            <a href="{{ $s['btn1'][1] }}" class="hs-btn">{{ $s['btn1'][0] }} <i class="fas fa-arrow-right"></i></a>
            <a href="{{ $s['btn2'][1] }}" class="hs-btn">{{ $s['btn2'][0] }} <i class="fas fa-arrow-right"></i></a>
          </div>
        </div>
      </div>
    @endforeach
  </div>

  <button type="button" class="hs-arrow hs-prev" id="hsPrev" aria-label="Previous slide"><i class="fas fa-chevron-left"></i></button>
  <button type="button" class="hs-arrow hs-next" id="hsNext" aria-label="Next slide"><i class="fas fa-chevron-right"></i></button>

  <div class="hs-dots" id="hsDots"></div>
</section>

<script>
(function () {
  var root   = document.getElementById('home');
  var slides = root.querySelectorAll('.hs-slide');
  var dotsEl = document.getElementById('hsDots');
  var cur = 0, timer = null, DELAY = 5500;

  // dots
  slides.forEach(function (_, i) {
    var b = document.createElement('button');
    b.type = 'button';
    b.className = 'hs-dot' + (i === 0 ? ' is-active' : '');
    b.setAttribute('aria-label', 'Go to slide ' + (i + 1));
    b.addEventListener('click', function () { go(i, true); });
    dotsEl.appendChild(b);
  });
  var dots = dotsEl.querySelectorAll('.hs-dot');

  function go(n, user) {
    slides[cur].classList.remove('is-active');
    dots[cur].classList.remove('is-active');
    cur = (n + slides.length) % slides.length;
    slides[cur].classList.add('is-active');
    dots[cur].classList.add('is-active');
    if (user) restart();
  }
  function start()   { if (slides.length > 1) timer = setInterval(function () { go(cur + 1); }, DELAY); }
  function stop()    { clearInterval(timer); }
  function restart() { stop(); start(); }

  document.getElementById('hsPrev').addEventListener('click', function () { go(cur - 1, true); });
  document.getElementById('hsNext').addEventListener('click', function () { go(cur + 1, true); });

  // pause while hovering / focusing
  root.addEventListener('mouseenter', stop);
  root.addEventListener('mouseleave', start);
  root.addEventListener('focusin', stop);
  root.addEventListener('focusout', start);

  // keyboard
  root.addEventListener('keydown', function (e) {
    if (e.key === 'ArrowLeft')  go(cur - 1, true);
    if (e.key === 'ArrowRight') go(cur + 1, true);
  });

  // touch swipe
  var x0 = null;
  root.addEventListener('touchstart', function (e) { x0 = e.touches[0].clientX; }, { passive: true });
  root.addEventListener('touchend', function (e) {
    if (x0 === null) return;
    var dx = e.changedTouches[0].clientX - x0;
    if (Math.abs(dx) > 50) go(cur + (dx < 0 ? 1 : -1), true);
    x0 = null;
  });

  start();
})();
</script>
 <!--==============================
  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-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>
  <!--==============================
  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="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 University</span>
            <h2 class="sec-title">Welcome to Rai University.</h2>
          </div>
          <p class="mt-n2 mb-25" style="text-align:justify">Rai University, Ahmedabad is a UGC-recognized, NAAC-Accredited university offering industry-aligned programs in Engineering, Management, Pharmacy, Law, Science, and Design. With strong industry partnerships, hands-on mentoring, and a lifelong alumni network, we prepare students to thrive in their careers from day one.</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>-->

 {{-- =========================================================
    Rai University Buzz BANNER
========================================================= --}}
<div class="pu-banner">

    <div class="pu-banner-inner">

        {{-- ================= LEFT CONTENT ================= --}}
        <div class="pu-left">

            <!--<span class="pu-badge">New Issue Out!</span>-->

            <h1 class="pu-title">Rai University Buzz</h1>

            <p class="pu-tagline">
                The Stories Defining Rai University
            </p>

            <div class="pu-divider"></div>

            <div class="pu-categories">

                <div class="pu-cat">
                    <div class="pu-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M8 21h8M12 17v4M7 4h10v4a5 5 0 0 1-10 0V4Z"/>
                            <path d="M17 5h3a2 2 0 0 1-2 4M7 5H4a2 2 0 0 0 2 4"/>
                        </svg>
                    </div>
                    <span>Achievements &amp;<br>Rankings</span>
                </div>

                <div class="pu-cat">
                    <div class="pu-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09Z"/>
                            <path d="M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2Z"/>
                            <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/>
                            <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/>
                        </svg>
                    </div>
                    <span>Startups &amp;<br>Innovation</span>
                </div>

                <div class="pu-cat">
                    <div class="pu-icon">
                        <svg viewBox="0 0 24 24">
                            <circle cx="12" cy="12" r="10"/>
                            <path d="M2 12h20"/>
                            <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10"/>
                            <path d="M12 2a15.3 15.3 0 0 0-4 10 15.3 15.3 0 0 0 4 10"/>
                        </svg>
                    </div>
                    <span>Global<br>Collaborations</span>
                </div>

                <div class="pu-cat">
                    <div class="pu-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M9 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/>
                            <path d="M15 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/>
                            <path d="M12 3c-4.4 0-8 1.79-8 4v10c0 2.21 3.6 4 8 4s8-1.79 8-4V7c0-2.21-3.6-4-8-4Z"/>
                        </svg>
                    </div>
                    <span>Festivals &amp;<br>Campus Life</span>
                </div>

                <div class="pu-cat">
                    <div class="pu-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                            <circle cx="9" cy="7" r="4"/>
                            <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
                            <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                        </svg>
                    </div>
                    <span>Students &amp;<br>Beyond</span>
                </div>

            </div>

            <a href="/newsletter" class="pu-link">
                Unlock the full newsletter <span>→</span>
            </a>

        </div>


        {{-- ================= RIGHT MAGAZINE ================= --}}
        <div class="pu-right">

            <div class="pu-mag-stack">

                @if(file_exists(public_path('images/pu-mirror-cover.jpg')))

                    {{-- Back Magazine --}}
                    <img
                        src="{{ asset('images/pu-mirror-cover.jpg') }}"
                        alt="Rai University Buzz"
                        class="pu-mag back-img"
                    >

                    {{-- Main Magazine --}}
                    <img
                        src="{{ asset('images/pu-mirror-cover.jpg') }}"
                        alt="Rai University Buzz"
                        class="pu-mag front-img"
                    >

                @else

                    {{-- Rearmost sheet --}}
                    <div class="pu-mag-sheet sheet-3"></div>

                    {{-- Middle sheet --}}
                    <div class="pu-mag-sheet sheet-2"></div>

                    {{-- Front card (top of the stack) --}}
                    <div class="pu-mag-placeholder">

                        <div class="mock-header">
                            <strong><img src="https://test.raiuniversity.edu/document/rai_uni_logo.png" alt="RaiUniversity"></strong>
                            <!--<small>RAI UNIVERSITY NEWSLETTER</small>-->
                        </div>

                        <div class="mock-photo-wrap">
                            <img
                                src="https://www.raiuniversity.edu/document/about/ru_in_media/2026/International_conference_2026/yatarthnews.png"
                                alt="Rai University Buzz"
                            >
                        </div>

                        {{-- Fanned page edges along the right side --}}
                        <div class="pu-page-edges">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>

                    </div>

                @endif


                {{-- 8 PAGES BADGE --}}
                <div class="pu-pages-badge">

                    <div class="pages-number">
                        {{ $pageCount ?? 8 }}
                    </div>

                    <div class="pages-text">
                        PAGES
                    </div>

                    <div class="pages-sub">
                        of Stories, Impact<br>
                        &amp; Inspiration
                    </div>

                </div>

            </div>

        </div>

    </div>

    {{-- Bottom Gradient --}}
    <div class="pu-bottom-strip"></div>

</div>


<style>

/* =========================================================
   PU MIRROR BANNER
========================================================= */

.pu-banner {
    --purple: #0f2239;
    --purple-dark: #31227f;
    --pink: #f58aae;
    --peach: #ff9b8b;
    --orange: #ffb05c;

    position: relative;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    background: var(--purple);
    overflow: hidden;
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}


/* =========================================================
   MAIN INNER AREA
========================================================= */

.pu-banner-inner {
    position: relative;
    width: 100%;
    max-width: 1420px;
    min-height: 398px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 70px 0 140px;
    box-sizing: border-box;
}


/* =========================================================
   LEFT SIDE
========================================================= */

.pu-left {
    position: relative;
    width: 57%;
    max-width: 760px;
    z-index: 10;
}


/* =========================================================
   BADGE
========================================================= */

.pu-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 39px;
    padding: 0 18px;
    background: #f2eff8;
    color: #744800;
    font-size: 18px;
    font-weight: 700;
    border-radius: 0 0 12px 12px;
    margin-top: -1px;
    margin-bottom: 13px;
    box-shadow: 0 2px 3px rgba(0,0,0,.08);
}


/* =========================================================
   TITLE
========================================================= */

.pu-title {
    margin: 0;
    font-size: 86px;
    line-height: .95;
    font-weight: 800;
    letter-spacing: -3px;
    background: linear-gradient(78deg, #ffffff 0%, #f07f1a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* =========================================================
   TAGLINE
========================================================= */

.pu-tagline {
    margin: 15px 0 23px;
    color: #fff;
    font-size: 31px;
    line-height: 1.15;
    font-weight: 500;
}


/* =========================================================
   DIVIDER
========================================================= */

.pu-divider {
    width: 705px;
    max-width: 100%;
    height: 1px;
    background: rgba(255,255,255,.22);
    margin-bottom: 18px;
}


/* =========================================================
   CATEGORY AREA
========================================================= */

.pu-categories {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    margin-bottom: 27px;
}

.pu-cat {
    position: relative;
    width: 20%;
    min-height: 82px;
    padding: 0 14px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
}

.pu-cat:first-child {
    padding-left: 0;
}

.pu-cat:not(:first-child) {
    border-left: 1px solid rgba(255,255,255,.18);
}


/* =========================================================
   ICON
========================================================= */

.pu-icon {
    height: 32px;
    margin-bottom: 7px;
}

.pu-icon svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: #ff9b9b;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   CATEGORY TEXT
========================================================= */

.pu-cat span {
    color: #fff;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 600;
}


/* =========================================================
   NEWSLETTER LINK
========================================================= */

.pu-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.pu-link span {
    font-size: 20px;
    line-height: 1;
}

.pu-link:hover {
    color: #fff;
    text-decoration: underline;
}


/* =========================================================
   RIGHT SIDE
========================================================= */

.pu-right {
    position: relative;
    width: 43%;
    height: 398px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}


/* =========================================================
   MAGAZINE STACK
========================================================= */

.pu-mag-stack {
    position: relative;
    width: 500px;
    height: 450px;
    margin-top: 50px;
}


/* =========================================================
   MAGAZINE IMAGES (real cover, when uploaded)
========================================================= */

.pu-mag-stack img.pu-mag {
    position: absolute;
    display: block;
    border-radius: 5px;
    object-fit: cover;
    box-shadow: 0 18px 30px rgba(0,0,0,.35);
}

.pu-mag-stack .back-img {
    width: 315px;
    max-width: none;
    height: auto;
    right: -5px;
    top: 25px;
    z-index: 1;
    transform: rotate(7deg);
    filter: brightness(.86);
}

.pu-mag-stack .front-img {
    width: 470px;
    max-width: none;
    height: auto;
    right: 35px;
    top: -12px;
    z-index: 2;
    transform: rotate(0deg);
}


/* =========================================================
   8 PAGES CIRCLE
========================================================= */

.pu-pages-badge {
    position: absolute;
    width: 145px;
    height: 145px;
    left: -35px;
    top: 115px;
    z-index: 8;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    background: radial-gradient(circle at 30% 25%, #ffc06f, #ff9d4d 65%, #f28a35 100%);
    color: #4d2a00;
    border: 3px solid rgba(255,255,255,.15);
    box-shadow: 0 9px 22px rgba(0,0,0,.3);
    transform: rotate(-8deg);
}

.pages-number {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 47px;
    line-height: .85;
    font-weight: 400;
}

.pages-text {
    margin-top: 8px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .5px;
}

.pages-sub {
    margin-top: 3px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 10px;
    line-height: 1.25;
}


/* =========================================================
   PLACEHOLDER MAGAZINE — 3D PAPER STACK
   (used when no cover image is uploaded)
========================================================= */

/* Give the whole stack real depth to sit in */
.pu-mag-stack {
    perspective: 1400px;
}

/* Shared base for the two rear sheets */
.pu-mag-sheet {
    position: absolute;
    width: 400px;
    height: 445px;
    right: 30px;
    top: 0;
    border-radius: 6px;
    background: linear-gradient(155deg, #fbfbfb 0%, #e4e2e8 100%);
    box-shadow:
        0 14px 26px rgba(0,0,0,.28),
        inset 0 0 0 1px rgba(0,0,0,.04);
}

/* Rearmost sheet — furthest back, most rotated, dimmest */
.sheet-3 {
    z-index: 1;
    transform: rotate(11deg) translate(10px, 10px);
    filter: brightness(.82);
}

/* Middle sheet — bridges the gap for a believable fan */
.sheet-2 {
    z-index: 2;
    transform: rotate(5deg) translate(4px, 4px);
    filter: brightness(.92);
}

/* Front card — top of the stack */
.pu-mag-placeholder {
    position: absolute;
    width: 420px;
    height: 455px;
    right: 30px;
    top: 0;
    background: #fff;
    z-index: 3;
    border-radius: 6px;
    box-shadow:
        0 24px 46px rgba(0,0,0,.4),
        0 2px 4px rgba(0,0,0,.15);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: rotate(-2deg);
    transform-origin: bottom left;
}

/* Fanned page edges peeking out on the right of the front card,
   mimicking stacked newspaper pages */
.pu-page-edges {
    position: absolute;
    top: 6px;
    bottom: 6px;
    right: -6px;
    width: 10px;
    z-index: 4;
    pointer-events: none;
}

.pu-page-edges span {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #f4f4f4, #d8d8d8);
    border-radius: 0 2px 2px 0;
    box-shadow: 1px 0 2px rgba(0,0,0,.15);
}

.pu-page-edges span:nth-child(1) { right: 6px; opacity: .9; }
.pu-page-edges span:nth-child(2) { right: 3px; opacity: .75; }
.pu-page-edges span:nth-child(3) { right: 0;   opacity: .6;  }

/* Header */
.mock-header {
    flex-shrink: 0;
    text-align: center;
    padding: 0px;
    border-bottom: 1px solid #ddd;
}

.mock-header strong {
    display: block;
    color: #df1455;
    font-family: Georgia, serif;
    font-size: 30px;
}

.mock-header small {
    display: block;
    font-size: 8px;
    color: #555;
    letter-spacing: .5px;
}

/* Photo area fills remaining space and crops cleanly */
.mock-photo-wrap {
    flex: 1;
    overflow: hidden;
}

.mock-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* =========================================================
   BOTTOM STRIP
========================================================= */

.pu-bottom-strip {
    width: 100%;
    height: 62px;
    background: linear-gradient(175deg, #fff 0%, #0f2239 45%, #f07f1a 100%);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1500px) {
    .pu-banner-inner {
        max-width: 1590px;
        padding-left: 140px;
        padding-right: 80px;
    }
}


/* =========================================================
   1200px
========================================================= */

@media (max-width: 1200px) {
    .pu-banner-inner {
        padding-left: 70px;
        padding-right: 30px;
    }

    .pu-title {
        font-size: 70px;
    }

    .pu-tagline {
        font-size: 25px;
    }

    .pu-mag-stack .front-img,
    .pu-mag-placeholder {
        width: 410px;
    }

    .pu-mag-stack .back-img {
        width: 280px;
    }

    .pu-mag-sheet {
        width: 390px;
    }

    .pu-pages-badge {
        left: -10px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {
    .pu-banner-inner {
        min-height: auto;
        padding: 35px 35px 50px;
        flex-direction: column;
        align-items: flex-start;
    }

    .pu-left {
        width: 100%;
        max-width: 700px;
    }

    .pu-right {
        width: 100%;
        height: 468px;
        align-self: center;
    }

    .pu-mag-stack {
        margin: 0 auto;
    }
}


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

@media (max-width: 600px) {
    .pu-banner-inner {
        padding: 25px 20px 30px;
    }

    .pu-badge {
        font-size: 15px;
        height: 35px;
        padding: 0 15px;
    }

    .pu-title {
        font-size: 48px;
        letter-spacing: -2px;
    }

    .pu-tagline {
        font-size: 20px;
        line-height: 1.25;
    }

    .pu-categories {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 15px;
    }

    .pu-cat {
        width: 100%;
        min-height: 70px;
        padding: 0 10px !important;
        border-left: 0 !important;
    }

    .pu-cat:nth-child(even) {
        border-left: 1px solid rgba(255,255,255,.18) !important;
        padding-left: 15px !important;
    }

    .pu-right {
        height: 360px;
    }

    .pu-mag-stack {
        width: 360px;
        height: 340px;
        transform: scale(.82);
        transform-origin: center top;
    }

    .pu-mag-stack .front-img,
    .pu-mag-placeholder {
        width: 400px;
        right: -5px;
    }

    .pu-mag-stack .back-img {
        width: 270px;
        right: -20px;
    }

    .pu-mag-sheet {
        width: 380px;
        right: -5px;
    }

    .pu-pages-badge {
        width: 115px;
        height: 115px;
        left: -15px;
        top: 95px;
    }

    .pages-number {
        font-size: 36px;
    }

    .pages-text {
        font-size: 12px;
    }

    .pages-sub {
        font-size: 8px;
    }

    .pu-bottom-strip {
        height: 30px;
    }
}

</style>



 <!--==============================
  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>
  <!--==============================
    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; filter: grayscale(45%) contrast(1.05); }

    /* 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>

  {{-- ═══════════════════════════════════════
       KEY HIGHLIGHTS & PROGRAMS SECTION
  ═══════════════════════════════════════ --}}
  @php
    $khHighlights = [
      ['fa-solid fa-award', '25+', 'Years of Academic Excellence'],
      ['fa-solid fa-user-graduate', '12.7k+', 'Students Across Programs'],
      ['fa-solid fa-flask', '52+', 'Modern Labs & Research Centres'],
      ['fa-solid fa-handshake', '100+', 'Industry Recruiters'],
      ['fa-solid fa-building-columns', '40+', 'Programs Offered'],
      ['fa-solid fa-globe', 'Global', 'Exchange & Research Tie-ups'],
    ];

    // Each program: [level, chip label, title, description, eligibility, duration, icon, link]
    // level must match one of the codes in $khTabs: rsms | rse | sop | sol | rsa | rsd | rss | rsls
    $khPrograms = [

      // ---------------- RAI SCHOOL OF ENGINEERING (rse) ----------------
      ['rse', 'Diploma/C2D', 'Diploma / C2D - Mechanical Engineering', 'Core mechanical engineering training with electives in Automobile Engineering for EV and Powerplant Engineering.', '10th Pass', '6/4 Semesters', 'fa-solid fa-gears', '#'],
      ['rse', 'Diploma/C2D', 'Diploma / C2D - Information Technology', 'Foundational IT training with electives in Machine Learning and Data Analysis and Visualization.', '10th Pass', '6/4 Semesters', 'fa-solid fa-network-wired', '#'],
      ['rse', 'Diploma/C2D', 'Diploma / C2D - Computer Engineering', 'Hands-on computer engineering training with electives in Machine Learning and Data Analysis and Visualization.', '10th Pass', '6/4 Semesters', 'fa-solid fa-microchip', '#'],
      ['rse', 'Diploma', 'Diploma - Electrical Engineering', 'Core electrical engineering diploma with electives in Power System and Power Electronics.', '10th Pass', '6 Semesters', 'fa-solid fa-bolt', '#'],
      ['rse', 'B.Tech', 'B.Tech - Computer Science Engineering', 'Industry-ready CSE program with specializations in Full Stack Development and Artificial Intelligence and Machine Learning.', '10+2', '8 Semesters', 'fa-solid fa-laptop-code', '#'],
      ['rse', 'D2D', 'D2D - Computer Science Engineering', 'Fast-track CSE diploma-to-degree path with specializations in Full Stack Development and AI & ML.', '10+2', '6 Semesters', 'fa-solid fa-code', '#'],
      ['rse', 'D2D', 'D2D - Information Technology', 'Diploma-to-degree IT program with a Data Science specialization.', '10+2', '6 Semesters', 'fa-solid fa-database', '#'],
      ['rse', 'BCA(Hons.)', 'BCA (Hons.) - Electives', 'Applications-focused BCA with electives in Machine Learning and Blockchain.', '10+2', '8 Semesters', 'fa-solid fa-code-branch', '#'],
      ['rse', 'BCA(Hons.)', 'BCA (Hons.) - Specialization', 'BCA with specialization tracks in AI & ML and Data Science.', '10+2', '8 Semesters', 'fa-solid fa-cubes', '#'],
      ['rse', 'MCA', 'MCA', 'Advanced computer applications degree with electives in AI & ML and Cyber Security.', 'Graduation (Maths)', '4 Semesters', 'fa-solid fa-server', '#'],
      ['rse', 'Integrated MCA', 'Integrated MCA', 'Direct-entry integrated MCA with specializations in Data Science and AI & ML.', '10+2', '10 Semesters', 'fa-solid fa-diagram-project', '#'],
      ['rse', 'B.Sc. (Hons.)', 'B.Sc. (Hons.) - Computer Science', 'Science-first CS degree with specializations in AI & ML, Cyber Security and Cloud Technology, and Data Science.', '10+2 (Science)', '8 Semesters', 'fa-solid fa-flask', '#'],
      ['rse', 'B.Sc. (Hons.)', 'B.Sc. (Hons.) - Information Technology', 'IT-focused science degree with electives in AI & ML and Cyber Security.', '10+2 (Science)', '8 Semesters', 'fa-solid fa-shield-halved', '#'],
      ['rse', 'M.Sc.', 'M.Sc. - Cyber Security and Cloud Technology', 'Postgraduate specialization in cyber security and cloud infrastructure.', 'B.Sc.', '4 Semesters', 'fa-solid fa-cloud', '#'],
      ['rse', 'Ph.D.', 'Ph.D. - CSE / IT / Computer Application', 'Doctoral research across Computer Science and Engineering, Information Technology, and Computer Application.', 'PG Degree', '3+ Years', 'fa-solid fa-graduation-cap', '#'],

      // ---------------- RAI SCHOOL OF MANAGEMENT STUDIES (rsms) ----------------
      ['rsms', 'BBA(Hons.)', 'BBA (Hons.)', 'Future-ready management degree with specializations in Sales & Digital Marketing, Applied HR, Fintech, AI & Business Analytics, and Entrepreneurship & Innovation.', '10+2', '8 Semesters', 'fa-solid fa-briefcase', '#'],
      ['rsms', 'B.Com(Hons.)', 'B.Com (Hons.) - Accounting & Finance', 'Advanced commerce degree with specializations in Accounting and Finance, and AI and Fintech.', '10+2', '8 Semesters', 'fa-solid fa-file-invoice-dollar', '#'],
      ['rsms', 'Integrated MBA', 'Integrated MBA', 'Direct-entry integrated management degree specializing in AI and Business Analytics.', '10+2', '10 Semesters', 'fa-solid fa-chart-pie', '#'],
      ['rsms', 'MBA', 'MBA', 'Postgraduate management degree with specializations in HR, Finance, Marketing, Entrepreneurship & Family Business, and Business Analytics & Fintech.', 'Graduation', '4 Semesters', 'fa-solid fa-user-tie', '#'],
      ['rsms', 'Ph.D.', 'Ph.D. - Management', 'Doctoral research in Management.', 'PG Degree', '3+ Years', 'fa-solid fa-graduation-cap', '#'],

      // ---------------- SCHOOL OF PHARMACY (sop) ----------------
      ['sop', 'D.Pharm', 'D.Pharm', 'Foundational pharmacy diploma building core pharmaceutical knowledge and practice.', '10+2 (Science)', '2 Years', 'fa-solid fa-pills', '#'],
      ['sop', 'B.Pharm/D2D', 'B.Pharm / D2D', 'Undergraduate pharmacy degree covering drug formulation, pharmacology and pharmaceutical care.', '10+2 (Science)', '8/6 Semesters', 'fa-solid fa-prescription-bottle-medical', '#'],
      ['sop', 'M.Pharm', 'M.Pharm', 'Postgraduate pharmacy degree specializing in Pharmaceutics and Pharmaceutical Quality Assurance.', 'B.Pharm', '4 Semesters', 'fa-solid fa-capsules', '#'],
      ['sop', 'Ph.D.', 'Ph.D. - Pharmaceutical Sciences', 'Doctoral research in Pharmaceutical Sciences.', 'PG Degree', '3+ Years', 'fa-solid fa-graduation-cap', '#'],

      // ---------------- SCHOOL OF LAW (sol) ----------------
      ['sol', 'B.A. LLB', 'B.A. LLB', 'Integrated law degree combining arts foundations with comprehensive legal education.', '10+2', '10 Semesters', 'fa-solid fa-scale-balanced', '#'],
      ['sol', 'B.B.A. LLB', 'B.B.A. LLB', 'Integrated law degree combining business foundations with comprehensive legal education.', '10+2', '10 Semesters', 'fa-solid fa-gavel', '#'],
      ['sol', 'LL.B', 'LL.B', 'Undergraduate law degree building strong foundations in legal knowledge, advocacy and drafting.', 'Graduation', '6 Semesters', 'fa-solid fa-book', '#'],
      ['sol', 'LL.M', 'LL.M', 'Postgraduate law degree with specializations in Constitutional & Administrative Law, Corporate & Commercial Law, and Criminal & Security Law.', 'LL.B', '4 Semesters', 'fa-solid fa-landmark', '#'],
      ['sol', 'Ph.D.', 'Ph.D. - Law', 'Doctoral research in Law.', 'PG Degree', '3+ Years', 'fa-solid fa-graduation-cap', '#'],

      // ---------------- RAI SCHOOL OF AGRICULTURE (rsa) ----------------
      ['rsa', 'B.Sc Agriculture', 'B.Sc. (Hons.) Agriculture', 'Rigorous program in agricultural and allied sciences with hands-on training and field-based learning.', '10+2 (Science)', '8 Semesters', 'fa-solid fa-leaf', '#'],

      // ---------------- RAI SCHOOL OF DESIGN (rsd) ----------------
      ['rsd', 'B.Design', 'B.Design - Fashion', 'Studio-based design degree with a specialization in Fashion, blending artistic vision with technical expertise.', '10+2', '8 Semesters', 'fa-solid fa-palette', '#'],

      // ---------------- RAI SCHOOL OF SCIENCES (rss) ----------------
      ['rss', 'B.Sc. (Hons.)', 'B.Sc. (Hons.) - Chemistry', 'Undergraduate science degree building a strong foundation in Chemistry.', '10+2 (Science)', '8 Semesters', 'fa-solid fa-vial', '#'],
      ['rss', 'B.Sc. (Hons.)', 'B.Sc. (Hons.) - Microbiology', 'Undergraduate science degree building a strong foundation in Microbiology.', '10+2 (Science)', '8 Semesters', 'fa-solid fa-microscope', '#'],
      ['rss', 'M.Sc.', 'M.Sc. - Chemistry', 'Postgraduate Chemistry with specializations in Industrial Chemistry, Organic Chemistry and Analytical Chemistry.', 'B.Sc.', '4 Semesters', 'fa-solid fa-flask-vial', '#'],
      ['rss', 'M.Sc.', 'M.Sc. - Microbiology', 'Postgraduate, research-oriented study in Microbiology.', 'B.Sc.', '4 Semesters', 'fa-solid fa-bacteria', '#'],
      ['rss', 'M.Sc.', 'M.Sc. - Pharmaceutical Chemistry', 'Postgraduate, research-oriented study in Pharmaceutical Chemistry.', 'B.Sc.', '4 Semesters', 'fa-solid fa-mortar-pestle', '#'],

      // ---------------- RAI SCHOOL OF LIBERAL STUDIES (rsls) ----------------
      ['rsls', 'B.A. (Hons.)', 'B.A. (Hons.) Psychology', 'Interdisciplinary liberal-arts degree with a focus on Psychology, ethics and social responsibility.', '10+2', '8 Semesters', 'fa-solid fa-user-doctor', '#'],
      ['rsls', 'B.Sc. (Hons.)', 'B.Sc. (Hons.) Psychology', 'Science-track Psychology degree combining theory, research and practical application.', '10+2 (Science)', '8 Semesters', 'fa-solid fa-brain', '#'],

    ];

    $khTabs = [
      ['rsms', 'RAI SCHOOL OF MANAGEMENT STUDIES'],
      ['rse', 'RAI SCHOOL OF ENGINEERING'],
      ['sop', 'SCHOOL OF PHARMACY'],
      ['sol', 'SCHOOL OF LAW'],
      ['rsa', 'RAI SCHOOL OF AGRICULTURE'],
      ['rsd', 'RAI SCHOOL OF DESIGN'],
      ['rss', 'RAI SCHOOL OF SCIENCES'],
      ['rsls', 'RAI SCHOOL OF LIBERAL STUDIES'],
    ];
  @endphp

  <style>
    /* ===== Highlights ===== */
    .kh-wrap { background: #FFF; padding: 40px 0; position: relative; overflow: hidden; }
    .kh-wrap::before {
      content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
      background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
      background-size: 28px 28px;
    }
    .kh-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; position: relative; }
    @media (min-width: 1024px) { .kh-container { padding: 0 56px; } }
    .kh-header { text-align: center; margin-bottom: 44px; }
    .kh-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; color: #F07F1A; display: block; margin-bottom: 12px; }
    .kh-title { font-size: clamp(26px, 3.5vw, 42px); font-weight: 800; color: #0f2239; margin: 0 0 12px; }
    .kh-title span { color: #0f2239; }
    .kh-sub { font-size: 15px; color: #0f2239; max-width: 600px; margin: 0 auto; line-height: 1.7; }

    .kh-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
    @media (min-width: 640px) { .kh-stats { grid-template-columns: repeat(3, 1fr); } }
    @media (min-width: 992px) { .kh-stats { grid-template-columns: repeat(6, 1fr); } }
    .kh-stat { background: #FFF; border: 1px solid #0f2239; border-radius: 16px; padding: 22px 14px; text-align: center; transition: transform .25s, background .25s; }
    .kh-stat:hover { transform: translateY(-4px); background: rgba(255,255,255,.09); }
    .kh-stat i { color: #F07F1A; font-size: 22px; margin-bottom: 10px; display: block; }
    .kh-stat-n { font-size: 22px; font-weight: 800; color: #0f2239; display: block; }
    .kh-stat-l { font-size: 11.5px; color: #0f2239; margin-top: 4px; display: block; }

    /* ===== Programs Offered ===== */
    .kp-wrap { background: #FBF4EE; padding: 60px 0 64px; }
    .kp-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
    @media (min-width: 1024px) { .kp-container { padding: 0 56px; } }

    .kp-title { text-align: center; font-size: clamp(24px, 3vw, 34px); font-weight: 800; color: #0F2239; margin: 0 0 22px; }
    .kp-title span { color: #F07F1A; }

    .kp-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
    .kp-tab { border: 1px solid #E4D9CE; background: #fff; color: #0F2239; font-weight: 700; font-size: 13.5px; padding: 9px 22px; border-radius: 999px; cursor: pointer; transition: .2s; }
    .kp-tab:hover { border-color: #F07F1A; }
    .kp-tab.active { background: #F07F1A; border-color: #F07F1A; color: #fff; }

    .kp-chips { display: flex; gap: 10px; overflow-x: auto; padding: 4px 4px 14px; margin-bottom: 26px; scrollbar-width: thin; }
    .kp-chips::-webkit-scrollbar { height: 5px; }
    .kp-chips::-webkit-scrollbar-thumb { background: #E4D9CE; border-radius: 10px; }
    .kp-chip { flex: 0 0 auto; border: 1.5px solid #F07F1A; background: #F07F1A; color: #fff; font-weight: 700; font-size: 12.5px; padding: 8px 18px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: .2s; }
    .kp-chip.active { background: #fff; color: #F07F1A; }

    .kp-scroller { display: flex; gap: 20px; overflow-x: auto; padding: 6px 6px 16px; scroll-snap-type: x proximity; }
    .kp-scroller::-webkit-scrollbar { height: 6px; }
    .kp-scroller::-webkit-scrollbar-thumb { background: #E4D9CE; border-radius: 10px; }

    .kp-card { flex: 0 0 270px; scroll-snap-align: start; background: #fff; border: 1px solid #EFE3D8; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; }
    .kp-card:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(15,34,57,.08); }

    .kp-card-media { height: 140px; background: linear-gradient(135deg, #0F2239, #1c3a5e); display: flex; align-items: center; justify-content: center; }
    .kp-card-media i { color: #F07F1A; font-size: 34px; }

    .kp-card-body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
    .kp-card-title { color: #F07F1A; font-size: 15.5px; font-weight: 800; margin: 0 0 8px; line-height: 1.35; }
    .kp-card-desc { color: #56606f; font-size: 12.5px; line-height: 1.6; margin: 0 0 14px; flex: 1; }
    .kp-card-meta { font-size: 11.5px; color: #7a828d; margin-bottom: 16px; }
    .kp-card-meta div { margin-bottom: 2px; }
    .kp-card-meta b { color: #0F2239; font-weight: 700; }

    .kp-btn { align-self: center; border: 1.5px solid #F07F1A; color: #F07F1A; background: transparent; font-weight: 700; font-size: 12.5px; padding: 9px 22px; border-radius: 999px; text-decoration: none; transition: .2s; }
    .kp-btn:hover { background: #F07F1A; color: #fff; }

    .kp-empty { text-align: center; color: #7a828d; font-size: 13.5px; padding: 30px 0; display: none; }
  </style>

  <!-- ================= Highlights ================= -->
  <section class="kh-wrap">
    <div class="kh-container">
      <div class="kh-header">
        <span class="kh-eyebrow">Key Highlights</span>
        <h2 class="kh-title">Why Students Choose <span>Rai University</span></h2>
        <p class="kh-sub">A quick look at the numbers, programs, and strengths that make Rai University a preferred choice for higher education in Ahmedabad.</p>
      </div>

      <div class="kh-stats">
        @foreach($khHighlights as $h)
        <div class="kh-stat">
          <i class="{{ $h[0] }}"></i>
          <span class="kh-stat-n">{{ $h[1] }}</span>
          <span class="kh-stat-l">{{ $h[2] }}</span>
        </div>
        @endforeach
      </div>
    </div>
  </section>

  <!-- ================= Programs Offered ================= -->
  <section class="kp-wrap">
    <div class="kp-container">
      <h3 class="kp-title"><span>Programs</span> Offered</h3>

      <div class="kp-tabs" id="kpTabs">
        @foreach($khTabs as $i => $t)
        <button type="button" class="kp-tab {{ $i === 0 ? 'active' : '' }}" data-level="{{ $t[0] }}">{{ $t[1] }}</button>
        @endforeach
      </div>

      <div class="kp-chips" id="kpChips"></div>

      <div class="kp-scroller" id="kpScroller"></div>
      <p class="kp-empty" id="kpEmpty">No programs found in this category yet.</p>
    </div>
  </section>

  <script>
    (function () {
      const programs = @json($khPrograms);
      const tabsWrap = document.getElementById('kpTabs');
      const chipsWrap = document.getElementById('kpChips');
      const scroller = document.getElementById('kpScroller');
      const emptyMsg = document.getElementById('kpEmpty');

      // Default level must match the first tab in $khTabs above ('rsms').
      let activeLevel = 'rsms';
      let activeChip = 'all';

      function cardHtml(p) {
        const [, chip, title, desc, eligibility, duration, icon, link] = p;
        return `
          <div class="kp-card" data-chip="${chip}">
            <div class="kp-card-media"><i class="${icon}"></i></div>
            <div class="kp-card-body">
              <h4 class="kp-card-title">${title}</h4>
              <p class="kp-card-desc">${desc}</p>
              <div class="kp-card-meta">
                <div><b>Eligibility:</b> ${eligibility}</div>
                <div><b>Duration:</b> ${duration}</div>
              </div>
              <a href="${link}" class="kp-btn">Explore Programme</a>
            </div>
          </div>`;
      }

      function renderChips(levelList) {
        // unique chips for this level, in first-seen order
        const seen = new Set();
        const chips = [];
        levelList.forEach(p => { if (!seen.has(p[1])) { seen.add(p[1]); chips.push(p[1]); } });

        chipsWrap.innerHTML =
          `<button type="button" class="kp-chip ${activeChip === 'all' ? 'active' : ''}" data-chip="all">All</button>` +
          chips.map(c =>
            `<button type="button" class="kp-chip ${activeChip === c ? 'active' : ''}" data-chip="${c}">${c}</button>`
          ).join('');
      }

      function renderCards(levelList) {
        const list = activeChip === 'all' ? levelList : levelList.filter(p => p[1] === activeChip);
        scroller.innerHTML = list.map(cardHtml).join('');
        emptyMsg.style.display = list.length ? 'none' : 'block';
      }

      function render() {
        const levelList = programs.filter(p => p[0] === activeLevel);
        renderChips(levelList);
        renderCards(levelList);
      }

      tabsWrap.addEventListener('click', function (e) {
        const btn = e.target.closest('.kp-tab');
        if (!btn) return;
        tabsWrap.querySelectorAll('.kp-tab').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        activeLevel = btn.dataset.level;
        activeChip = 'all';
        render();
      });

      chipsWrap.addEventListener('click', function (e) {
        const chip = e.target.closest('.kp-chip');
        if (!chip) return;
        activeChip = chip.dataset.chip;
        const levelList = programs.filter(p => p[0] === activeLevel);
        renderChips(levelList);
        renderCards(levelList);
      });

      render();
    })();
  </script>
  
<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>

  {{-- ═══════════════════════════════════════
       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/logo/QCI.png'],
      ['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>
@endsection