<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">


<?php
  
error_reporting(E_ALL);
  
ini_set('display_errors', 1);
?>
<?php include 'includes/header.php'; ?>
<?php include 'includes/db.php'; ?>


<div class="slider section-fade"><div class="slider">  <!-- your slider code here --><!-- MAIN  --><div class="slider"><div class="slides">

    <link rel="stylesheet" href="">

    <?php

    $result = $conn->query("SELECT * FROM slider ORDER BY position ASC");

    while ($row = $result->fetch_assoc()):


    ?>

        <div class="slide">

            <?php if ($row['type'] == 'image'): ?>

                <img src="<?php echo $row['file_path']; ?>" alt="<?php echo $row['title']; ?>">

            <?php else: ?>

                <video autoplay muted loop>

                    <source src="<?php echo $row['file_path']; ?>" type="video/mp4">

                </video>

            <?php endif; ?>



            <div class="caption">

                <h2><?php echo $row['title']; ?></h2>

                <div class="caption-text"><?php echo $row['caption']; ?></div>

            </div>

        </div>

    <?php endwhile; ?>

</div>

<STYLE>
    * { box-sizing: border-box; }
</STYLE>

<button class="prev">&#10094;</button>

<button class="next">&#10095;</button>

</div></div></div><div style="width: 80%; height: 2px; background: #1a237e; margin: 50px auto; border-radius: 5px;"></div><!-- NEWS SECTION --><style>
  
.news-section {
  
    padding: 60px 0;
  
    background: #f8f9fa;
  
    text-align: center;
  
}
  

  
.section-title {
  
    font-size: 2rem;

  
    margin-bottom: 40px;
  
    font-weight: 700;
  
    color: #25A9C2;
  
}
  

  
.news-container {
  
    display: flex;
  
    justify-content: center;
  
    gap: 20px;
  
    flex-wrap: wrap;
  
}

  

  
.news-card {
  
    position: relative;
  
    width: 320px;
  
    border-radius: 15px;
  
    overflow: hidden;
  
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  
    transition: transform 0.3s;
  
    background: #000; /* fallback */
  
}
  

  

.news-card:hover {
  
    transform: scale(1.03);
  
}
  

  
.news-slider {
  
    position: relative;
  
    width: 90%;
  
    height: 80px;
  
    overflow: hidden;
  
}
  

  

.news-slider .slides-inner {
  
    display: flex;
  
    transition: transform 0.4s ease;
  
}
.news-slider img {
  
    width: 100%;
  
    height: 180px;
  
    object-fit: cover;
  
}
.news-slider .slider-nav {
  
    position: absolute;
  
    top: 50%;
  
    width: 100%;
  
    display: flex;
  
    justify-content: space-between;
  
    transform: translateY(-50%);
  
}
  

  
.news-slider .slider-nav button {
  
    background: rgba(0,0,0,0.4);
  

    border: none;
  
    color: #fff;
  
    font-size: 1.2rem;
  
    padding: 4px 10px;
  
    cursor: pointer;
  
    border-radius: 5px;
  
}
  

  
.news-content {
  
    padding: 15px;
  
    text-align: left;
  

    background: #fff;
  
}
  

  
.news-content h3 {
  
    font-size: 1.2rem;
  
    margin-bottom: 8px;
  
    color: #1a237e;
  
}
  

  
.news-content p {
  
    font-size: 0.95rem;
  
    line-height: 1.4;

  
    height: 40px;
  
    overflow: hidden;
  
    margin-bottom: 10px;
  
}
  

  
.see-more {
  
    display: inline-block;
  
    background: #B82025;
  
    color: white;
  
    padding: 6px 12px;
  
    border-radius: 6px;

  
    font-size: 0.85rem;
  
    text-decoration: none;
  
}
  

  
.see-more:hover {
  
    background: #ff8533;
  
}
  

  
.no-news {
  
    color: #555;
  
    font-size: 1rem;

  
}
  
</style>

<section class="modern-news">
    <h2 class="modern-news-title">Latest News</h2>

    <div class="modern-news-slider">
        <button class="modern-nav prev">&#10094;</button>

        <div class="modern-news-viewport">
            <div class="modern-news-track">
                <?php
                $news = $conn->query("SELECT * FROM news ORDER BY created_at DESC LIMIT 3");
                while($row = $news->fetch_assoc()):
                    $newsId = $row['id'];

                    $imgQ = $conn->query("SELECT image_path FROM news_images WHERE news_id=$newsId LIMIT 1");
                    if($imgQ->num_rows > 0){
                        $image = $imgQ->fetch_assoc()['image_path'];
                    } else {
                        $image = 'assets/images/no-image.jpg';
                    }
                ?>
                <a href="news-details.php?id=<?= $row['id'] ?>" class="card-link">
    <div class="modern-news-card hover-fade">
        <img src="<?= htmlspecialchars($image) ?>" alt="">
        <div class="modern-overlay">
            <h3><?= htmlspecialchars($row['title']) ?></h3>
            <p><?= substr(strip_tags($row['content']),0,90) ?>...</p>
            <span class="see-more">See More</span>
        </div>
    </div>
</a>

                <?php endwhile; ?>
            </div>
        </div>

        <button class="modern-nav next">&#10095;</button>
    </div>
</section>
<style>
    .card-link {
    display: contents;       /* ← THIS fixes the size issue */
    text-decoration: none;
    color: inherit;
}

    .modern-news{
    padding:50px 0;
    background:#f9fafb;
}


/* ===== NEWS CARD FADE EFFECT (SAFE) ===== */

.modern-news-card.hover-fade {
    position: relative;
    overflow: hidden;
}

.modern-news-card.hover-fade img {
    transition: transform 0.6s ease;
}

/* dark fade overlay */
.modern-news-card.hover-fade::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.75),
        rgba(0,0,0,0.2),
        rgba(0,0,0,0)
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

/* hover effect */
.modern-news-card.hover-fade:hover::after {
    opacity: 1;
}

.modern-news-card.hover-fade:hover img {
    transform: scale(1.07);
}

/* mobile – always visible */
@media (max-width: 900px) {
    .modern-news-card.hover-fade::after {
        opacity: 1;
    }
}


.modern-news-title{
    text-align:center;
    font-size:30px;
    margin-bottom:30px;
    font-weight:700;
    color:#25A9C2;
}

.modern-news-slider{
    max-width:1200px;
    margin:auto;
    position:relative;
}

.modern-news-viewport{
    overflow:hidden;
}

.modern-news-track{
    display:flex;
    gap:25px;
    transition:transform 0.5s ease;
}
.modern-news-card{
    flex:0 0 calc((100% - 50px) / 3);
    position:relative;
    border-radius:16px;
    overflow:hidden;
    height:320px;   /* ✅ LANDSCAPE */
    box-shadow:0 12px 30px rgba(0,0,0,0.12);
}




.modern-news-card img{
    width:100%;
    height:100%;
    object-fit:cover;
}


.modern-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.15));
    color:#fff;
    padding:22px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}

.modern-overlay h3{
    font-size:20px;
    margin-bottom:8px;
}

.modern-overlay p{
    font-size:14px;
    opacity:0.9;
}

.modern-overlay a{
    margin-top:12px;
    align-self:flex-start;
    padding:8px 16px;
    background:#B82025;
    color:#fff;
    text-decoration:none;
    border-radius:20px;
    font-size:14px;
    font-weight:600;
}

.modern-overlay a:hover{
    background:#1e40af;
}

/* Navigation */
.modern-nav{
    position:absolute;
    top:45%;
    width:42px;
    height:42px;
    border:none;
    background:#2563eb;
    color:#fff;
    border-radius:50%;
    cursor:pointer;
}


.modern-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;

    width: 40px;
    height: 40px;
    border-radius: 50%;

    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    cursor: pointer;

    /* 🔥 CENTER CONTENT PROPERLY */
    display: flex;
    align-items: center;
    justify-content: center;

    /* 🔥 FIX FONT POSITION */
    font-size: 20px;
    line-height: 1;
    padding: 0;
}

.modern-nav.prev { left: 5px; }
.modern-nav.next { right: 5px; }

/* Mobile */
@media(max-width:900px){
    .modern-news-card{
        flex:0 0 100%;
        height:320px;
    }
}

/*@media(max-width:900px){
    .modern-news-card{
        flex:0 0 100%;
        height:320px;
    }*/

/*@media(max-width:900px){
    .modern-news-card{
        flex:0 0 100%;
        height:320px;
    }*/

</style>
<script>
(function(){
    const track = document.querySelector('.modern-news-track');
    const prev = document.querySelector('.modern-nav.prev');
    const next = document.querySelector('.modern-nav.next');
    const cards = document.querySelectorAll('.modern-news-card'); // ✅ this was missing

    let index = 0;

    function visible(){
        return window.innerWidth > 900 ? 3 : 1;
    }

    function update(){
        const cardWidth = cards[0].offsetWidth + 25; // gap between cards
        track.style.transform = `translateX(-${index * cardWidth}px)`;
    }

    next.onclick = () => {
        if(index < cards.length - visible()) index++;
        else index = 0; // optional: loop to start
        update();
    };

    prev.onclick = () => {
        if(index > 0) index--;
        else index = cards.length - visible(); // optional: loop to end
        update();
    };

    window.addEventListener('resize', update);
    window.addEventListener('load', update);
})();
</script>

<style>
.cards-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.cards-viewport {
    overflow: hidden;
    width: 100%;
}
.cards-track {
    display: flex;
    transition: transform 0.5s ease;
    gap: 20px; /* space between cards */
}


/* Navigation buttons */
.cards-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    font-size: 2rem;
    padding: 0 12px;
    cursor: pointer;
    z-index: 10;
}

.cards-btn.prev { left: 0; }
.cards-btn.next { right: 0; }

/* Responsive: 1 card on mobile */
@media (max-width: 900px) {
    .news-card { flex: 0 0 100%; }
}

</style>


<div style="width: 80%; height: 2px; background: #1a237e; margin: 50px auto; border-radius: 5px;"></div>

<!-- FEATURED BLOG SECTION -->
<!-- FEATURED BLOG SECTION -->
<section class="featured-blog">
    <?php
    $blog = $conn->query("SELECT * FROM blog ORDER BY created_at DESC LIMIT 1")->fetch_assoc();

    if($blog):
        $img = $conn->query("SELECT image_path FROM blog_images WHERE blog_id=".$blog['id']." ORDER BY id ASC LIMIT 1")->fetch_assoc();
        $image = $img ? $img['image_path'] : 'assets/images/default.jpg';
    ?>
    <div class="featured-blog-container">

        <!-- IMAGE (make clickable with link wrapper) -->
        <a href="blogdetails.php?id=<?= $blog['id'] ?>" class="featured-blog-image hover-fade">
            <img src="<?= htmlspecialchars($image) ?>" alt="<?= htmlspecialchars($blog['title']) ?>">
        </a>

        <!-- CONTENT -->
        <div class="featured-blog-content">
            <div class="featured-meta">
                <span class="featured-tag">Latest Blog</span>
                <span class="featured-date">
                    <?= date("F d, Y", strtotime($blog['created_at'])) ?>
                </span>
            </div>

            <h2><?= htmlspecialchars($blog['title']) ?></h2>
            <p><?= substr(strip_tags($blog['content']), 0, 220) ?>...</p>
            <a href="blogdetails.php?id=<?= $blog['id'] ?>" class="featured-btn">
                Read More→
            </a>
        </div>

    </div>
    <?php endif; ?>
</section>

<style>


/* ===== FEATURED BLOG IMAGE FADE (SAFE) ===== */

.featured-blog-image.hover-fade {
    position: relative;
    overflow: hidden;
}

.featured-blog-image.hover-fade img {
    width: 1000px;
    height: 420px;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* dark fade overlay */
.featured-blog-image.hover-fade::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.65),
        rgba(0,0,0,0.25),
        rgba(0,0,0,0)
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

/* hover effect */
.featured-blog-image.hover-fade:hover::after {
    opacity: 1;
}

.featured-blog-image.hover-fade:hover img {
    transform: scale(1.06);
}

/* mobile – always visible */
@media (max-width: 900px) {
    .featured-blog-image.hover-fade::after {
        opacity: 1;
    }
}

    .featured-blog{
    padding:80px 20px;
    background:#f8fafc;
}
.featured-meta{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:16px;
}

.featured-date{
    font-size:14px;
    color:#6b7280;
    font-weight:500;
}

/* MOBILE */
@media(max-width:900px){
    .featured-meta{
        justify-content:center;
    }
}

.featured-blog-container{
    max-width:1200px;
    margin:auto;
    display:flex;
    align-items:center;
    gap:50px;
}

/* IMAGE */
.featured-blog-image{
    flex:1;
}

.featured-blog-image img{
    width:100%;
    height:420px;
    object-fit:cover;
    border-radius:18px;
    box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

/* CONTENT */
.featured-blog-content{
    flex:1;
}

.featured-tag{
    display:inline-block;
    background:#B82025;
    color:#fff;
    padding:6px 14px;
    border-radius:20px;
    font-size:13px;
    font-weight:600;
    margin-bottom:14px;
}

.featured-blog-content h2{
    font-size:34px;
    line-height:1.3;
    margin-bottom:16px;
    color:#111827;
}

.featured-blog-content p{
    font-size:16px;
    color:#4b5563;
    line-height:1.7;
    margin-bottom:24px;
}

.featured-btn{
    display:inline-block;
    padding:12px 26px;
    background:#B82025;
    color:#fff;
    text-decoration:none;
    border-radius:30px;
    font-weight:600;
    transition:0.3s;
}

.featured-btn:hover{
    background:#1e40af;
}

/* MOBILE */
@media(max-width:900px){
    .featured-blog-container{
        flex-direction:column;
        text-align:center;
    }

    .featured-blog-image img{
        height:300px;
    }

    .featured-blog-content h2{
        font-size:26px;
    }
}

</style>

<div style="width: 80%; height: 2px; background: #1a237e; margin: 50px auto; border-radius: 5px;"></div>

<!-- DEPARTMENTS SECTION -->
<!-- DEPARTMENTS SECTION -->
<section class="departments-section section-fade">
    <h2 class="section-title">Our Departments</h2>

    <div class="departments-list">
        <?php
        $result = $conn->query("SELECT * FROM departments ORDER BY id DESC");
        $i = 0;
        while($dept = $result->fetch_assoc()):
            $deptId = $dept['id'];
            $i++;

            $imgResult = $conn->query("SELECT image_path FROM department_images WHERE department_id=$deptId ORDER BY id ASC LIMIT 1");
            $image = $imgResult->num_rows
                ? $imgResult->fetch_assoc()['image_path']
                : 'assets/images/no-image.jpg';
        ?>

        <!-- Wrap the entire row in a link -->
        <a href="department-details.php?id=<?= $deptId ?>" class="department-row-link">
            <div class="department-row <?= ($i % 2 == 0) ? 'reverse' : '' ?>">
                <div class="department-image hover-fade">
                    <img src="<?= htmlspecialchars($image) ?>" alt="<?= htmlspecialchars($dept['name']) ?>">
                </div>

                <div class="department-text">
                    <h3><?= htmlspecialchars($dept['name']) ?></h3>

                    <!-- Truncated description with gradient fade -->
                    <div class="dept-description">
                        <?= $dept['description'] ?>
                    </div>

                    <span class="read-more">Read More →</span>
                </div>
            </div>
        </a>

        <?php endwhile; ?>
    </div>
</section>



<style>

/* ===== DEPARTMENT IMAGE FADE (SAFE) ===== */
.department-image.hover-fade {
    position: relative;
    overflow: hidden;
}

.department-row-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.department-image.hover-fade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* dark fade overlay on image */
.department-image.hover-fade::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.65),
        rgba(0,0,0,0.25),
        rgba(0,0,0,0)
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

/* hover effect */
.department-image.hover-fade:hover::after {
    opacity: 1;
}

.department-image.hover-fade:hover img {
    transform: scale(1.06);
}

/* mobile – always visible */
@media (max-width: 900px) {
    .department-image.hover-fade::after {
        opacity: 1;
    }
}

/* Departments list layout */
.departments-list {
    max-width: 1200px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.department-row {
    display: flex;
    align-items: center;
    gap: 50px;
}

.department-row.reverse {
    flex-direction: row-reverse;
}

.department-image {
    flex: 1;
}

.department-image img {
    width: 380px;
    height: 380px;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 14px 35px rgba(0,0,0,0.15);
}

.department-text {
    flex: 1;
}

.department-text h3 {
    font-size: 26px;
    margin-bottom: 14px;
    font-weight: 700;
}

.department-text .read-more {
    display: inline-block;
    padding: 10px 22px;
    background: #2563eb;
    color: #fff;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
}

.department-text .read-more:hover {
    background: #1e40af;
}

/* ===== NEW: Truncate description with gradient fade ===== */
.dept-description {
    display: -webkit-box;
    -webkit-line-clamp: 5; /* Show up to 5 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
}

/* gradient fade at the bottom */
.dept-description::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px; /* height of fade */
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
    pointer-events: none;
}

/* mobile adjustments */
@media (max-width: 900px) {
    .department-row,
    .department-row.reverse {
        flex-direction: column;
        gap: 25px;
        text-align: center;
    }

    .department-image img {
        height: 260px;
    }

    .dept-description::after {
        height: 40px;
    }
}

/* ===== DEPARTMENT IMAGE FADE (SAFE) ===== */

.department-image.hover-fade {
    position: relative;
    overflow: hidden;
}
.department-row-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.department-image.hover-fade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* dark fade overlay */
.department-image.hover-fade::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.65),
        rgba(0,0,0,0.25),
        rgba(0,0,0,0)
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

/* hover effect */
.department-image.hover-fade:hover::after {
    opacity: 1;
}

.department-image.hover-fade:hover img {
    transform: scale(1.06);
}

/* mobile – always visible */
@media (max-width: 900px) {
    .department-image.hover-fade::after {
        opacity: 1;
    }
}

    .departments-list{
    max-width:1200px;
    margin:auto;
    display:flex;
    flex-direction:column;
    gap:60px;
}

.department-row{
    display:flex;
    align-items:center;
    gap:50px;
}

.department-row.reverse{
    flex-direction:row-reverse;
}

.department-image{
    flex:1;
}

.department-image img{
    width:100%;
    height:380px;
    object-fit:cover;
    border-radius:18px;
    box-shadow:0 14px 35px rgba(0,0,0,0.15);
}

.department-text{
    flex:1;
}

.department-text h3{
    font-size:26px;
    margin-bottom:14px;
    font-weight:700;
}

.department-text p{
    font-size:16px;
    line-height:1.7;
    color:#374151;
    margin-bottom:20px;
}

.department-text .read-more{
    display:inline-block;
    padding:10px 22px;
    background:#2563eb;
    color:#fff;
    border-radius:30px;
    text-decoration:none;
    font-weight:600;
}

.department-text .read-more:hover{
    background:#1e40af;
}
@media(max-width:900px){
    .department-row,
    .department-row.reverse{
        flex-direction:column;
        gap:25px;
        text-align:center;
    }

    .department-image img{
        height:260px;
    }
}

</style>

<?php
// Make sure $conn exists
if(!isset($conn)){
    include 'includes/db.php';
}
?>
<div style="width: 80%; height: 2px; background: #1a237e; margin: 50px auto; border-radius: 5px;"></div>

<section id="client-cards-section" class="section-fade">
    <h2 class="section-title " style="color: #25A9C2 ;" >Our Client Cards</h2>

    <div class="client-cards-slider">
        <button class="cards-btn prev">&#10094;</button>

        <div class="cards-viewport">
            <div class="cards-track">
                <?php
                $result = $conn->query("SELECT * FROM client_cards ORDER BY id DESC");
                if($result && $result->num_rows > 0):
                    while($card = $result->fetch_assoc()):
                        $image = !empty($card['image']) ? $card['image'] : 'assets/images/no-image.jpg';
                        $shortDesc = strlen(strip_tags($card['description'])) > 100 ? substr(strip_tags($card['description']), 0, 100).'...' : strip_tags($card['description']);
                ?>
                <div class="client-card">
                    <img src="<?= htmlspecialchars($image) ?>" alt="<?= htmlspecialchars($card['type']) ?>">
                    <div class="card-content">
                        <h3><?= htmlspecialchars($card['type']) ?></h3>
                        <p><?= $shortDesc ?></p>
                        <a href="card-detail.php?id=<?= $card['id'] ?>" class="read-more-btn">Read More →</a>
                    </div>
                </div>
                <?php
                    endwhile;
                else:
                ?>
                <p class="no-cards">No client cards available.</p>
                <?php endif; ?>
            </div>
        </div>

        <button class="cards-btn next">&#10095;</button>
    </div>
</section>
<style>
    #client-cards-section {
    padding: 50px 0;
    background: #f8f9fa;
    text-align: center;
}

#client-cards-section .section-title {
    font-size: 2rem;
    margin-bottom: 30px;
    color: #25A9C2;
}

.client-cards-slider {
    position: relative;
    max-width: 1200px;
    margin: auto;
}

.cards-viewport {
    overflow: hidden;
}

.cards-track {
    display: flex;
    gap: 25px;
    transition: transform 0.5s ease;
}

.client-card {
    flex: 0 0 calc((100% - 50px)/3); /* 3 cards visible on desktop */
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    text-align: center;
    transition: transform 0.3s ease;
}

.client-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.card-content {
    padding: 20px;
}

.card-content h3 {
    margin: 0 0 10px 0;
    color: #1a237e;
    font-size: 1.3rem;
}

.card-content p {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 12px;
}

.read-more-btn {
    display: inline-block;
    padding: 8px 16px;
    background: #B82025;
    color: #fff;
    text-decoration: none;
    border-radius: 20px;
    font-weight: 600;
}

.read-more-btn:hover {
    background: #1e40af;
}

/* Navigation buttons */
.cards-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    font-size: 24px;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cards-btn.prev { left: 10px; }
.cards-btn.next { right: 10px; }

.cards-btn:hover {
    background: rgba(0,0,0,0.8);
}

/* Hover scale effect */
.client-card:hover {
    transform: scale(1.03);
}

/* Mobile: 1 card visible */
@media (max-width: 900px) {
    .client-card {
        flex: 0 0 100%;
    }
}

</style>

<script>(function(){
    const track = document.querySelector('#client-cards-section .cards-track');
    const prev = document.querySelector('#client-cards-section .cards-btn.prev');
    const next = document.querySelector('#client-cards-section .cards-btn.next');
    const cards = document.querySelectorAll('#client-cards-section .client-card');

    let index = 0;

    function visible(){
        return window.innerWidth > 900 ? 3 : 1;
    }

    function update(){
        const cardWidth = cards[0].offsetWidth + 25; // includes gap
        track.style.transform = `translateX(-${index * cardWidth}px)`;
    }

    next.onclick = () => {
        if(index < cards.length - visible()) index++;
        update();
    };

    prev.onclick = () => {
        if(index > 0) index--;
        update();
    };

    window.addEventListener('resize', update);
    window.addEventListener('load', update);
})();
</script>

<style>
.client-cards-container {
    display: flex;
    gap: 12px;                 /* small clean gap */
    justify-content: center;   /* NO space-between */
    flex-wrap: wrap;           /* allows wrapping */
}

.client-cards-container .card {
    width: calc(33.333% - 8px); /* exactly 3 in a row */
    margin: 0;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    text-align: center;
    background: #fff;
}
/* Image */
.client-cards-container .card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.client-cards-container .card-content {
    padding: 10px;
}

.read-more-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 12px;
    background: #B82025;
    color: WHITE;
    
    text-decoration: none;
    border-radius: 3px;
    font-size: 14px;
}

.read-more-btn:hover {
    background: #0056b3;
}
</style>

<style>
.client-cards-container {
    display: flex;
    flex-wrap: wrap; /* allow wrapping */
    gap: 0; /* no space between cards */
}




/* 📱 MOBILE FIX */
@media (max-width: 768px) {
    .client-cards-container {
        flex-direction: column;
    }

    .client-cards-container .card {
        width: 100%;     /* full width */
    }
.client-cards-container .card img {
    width: 100%;
    height: auto;
    display: block;
}

.client-cards-container .card-content {
    padding: 12px;
}

.read-more-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 14px;
    background: #B82025;
    color: WHITE;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
}

.read-more-btn:hover {
    background: #0056b3;
}
</style>



<!-- Optional CSS for Read More button -->
<style>
.read-more-btn {
    display: inline-block;
    padding: 6px 12px;
    margin-top: 8px;
    background-color: #B82025;
    color: WHITE;
    text-decoration: none;
    border-radius: 5px;
    font-size: 14px;
}
.read-more-btn:hover {
    background-color: #0056b3;
}
</style>

<!-- Optional CSS for Read More button -->
<style>
.read-more-btn {
    display: inline-block;
    padding: 6px 12px;
    margin-top: 8px;
    background-color: #B82025;
    color: WHITE;
    text-decoration: none;
    border-radius: 5px;
    font-size: 14px;
}
.read-more-btn:hover {
    background-color: #0056b3;
}
</style>


<style>

<div style="width: 80%; height: 2px; background: #1a237e; margin: 50px auto; border-radius: 5px;"></div>

/* Scoped under #client-cards-section to avoid conflicts */
#client-cards-section {
    padding: 50px 0;
    background: #f8f9fa;
    text-align: center;
}

#client-cards-section .section-title {
    font-size: 2rem;
    margin-bottom: 30px;
    color: #1a237e;
}

#client-cards-section .client-cards-slider {
    position: relative;
    width: 90%;
    margin: auto;
}

#client-cards-section .cards-viewport {
    overflow: hidden;
}

#client-cards-section .cards-track {
    display: flex;
    gap: 20px;
    transition: transform 0.5s ease;
}

#client-cards-section .card {
    flex: 0 0 300px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    overflow: hidden;
    text-align: center;
}

#client-cards-section .card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

#client-cards-section .card-content {
    padding: 15px;
}

#client-cards-section .card-content h3 {
    margin: 0 0 8px 0;
    color: #1a237e;
}

#client-cards-section .card-content p {
    font-size: 0.95rem;
    color: #555;
}

#client-cards-section .cards-btn {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    font-size: 22px;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 8px;
    z-index: 10;
}

#client-cards-section .cards-btn.prev { left: 0; }
#client-cards-section .cards-btn.next { right: 0; }

#client-cards-section .cards-btn:hover {
    background: rgba(0,0,0,0.8);
}


  
.departments-section { background: #f8f9fa; padding: 50px 0; }
  
.section-title { text-align: center; font-size: 2rem; margin-bottom: 40px; color: #25A9C2 ; }
  
.departments-container { display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; }
  
.department-card { background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); width: 100px; 

overflow: hidden; display: flex; flex-direction: column; }
  
.department-thumb img { width: 100%; height: 180px; object-fit: cover; }
  
.department-content { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
  
.department-content h3 { margin: 0; color: #1a237e; font-size: 1.2rem; }
  
.department-content p { font-size: 0.95rem; color: #555; }
  
.read-more { align-self: flex-start; color: #B82025; font-weight: bold; text-decoration: none; }
  
.read-more:hover { text-decoration: underline; }

  
.no-departments { text-align: center; color: #777; }
  

  
</style><style>
  
.blog-section {
  
    padding: 60px 0;
  

  
    background: #f8f9fa;
  
    text-align: center;
  
}
  

  

.section-title {
  
    font-size: 2rem;
  
    font-weight: 700;
  
    margin-bottom: 40px;
  
    color: #25A9C2;
  
}
  

  
.blog-container {
  
    display: flex;
  
    justify-content: center;
  
    flex-wrap: wrap;
  

    gap: 20px;
  

  
}
  

  
.blog-card {
  
    position: relative;
  
    width: 0px;
  
    height: 0px;
  
    border-radius: 15px;
  
    overflow: hidden;
  
    background-size: cover;
  

    background-position: center;
  
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  
    transition: transform 0.3s;
  
}
  

  
.blog-card:hover {
  
    transform: scale(1.03);
  
}
  

  
.blog-card .overlay {
  
    position: absolute;
  
    inset: 0;

  
    background: rgba(0,0,0,0.5);
  
}
  

  
.blog-content {
  
    position: absolute;
  
    bottom: 0;
  
    padding: 20px;
  
    color: #fff;
  
    text-align: left;
  
}
  

  
.blog-content h3 {
  
    font-size: 1.2rem;
  
    margin-bottom: 8px;
  
}
  

  
.blog-content p {
  
    font-size: 0.9rem;
  
    line-height: 1.3;
  
    margin-bottom: 10px;
  
}
  

  
.read-more {
  
    background: #B82025;
  
    color: white;
  
    padding: 6px 12px;
  
    border-radius: 6px;
  
    font-size: 0.85rem;
  
    text-decoration: none;
  
}
  

  
.read-more:hover {
  
    background: #B82025;

  
}
  

  
.no-blog {
  
    color: #555;
  
    font-size: 1rem;
  
}
  
</style><!-- JS Main Slider --><script>
  
let index = 0;
  
const slides = document.querySelector('.slides');
  
const total = document.querySelectorAll('.slide').length;

  

  
function showSlide(i) {
  
    slides.style.transform = `translateX(-${i * 100}%)`;
  
}
  

  
document.querySelector('.next').addEventListener('click', () => {
  
    index = (index + 1) % total;
  
    showSlide(index);
  
});
  

  

document.querySelector('.prev').addEventListener('click', () => {
  
    index = (index - 1 + total) % total;
  
    showSlide(index);
  
});
  

  
// Auto-play
  
setInterval(() => {
  
    index = (index + 1) % total;
  
    showSlide(index);
  
}, 5000);
  
</script><!-- JS News Card Slider --><!-- JS 

News Card Slider with touch/swipe support --><script>
  
document.querySelectorAll('.news-slider').forEach(slider => {
  
    const slidesInner = slider.querySelector('.slides-inner');
  
    const images = slidesInner.querySelectorAll('img');
  
    let idx = 0;
  

  
    const prevBtn = slider.querySelector('.prev');
  
    const nextBtn = slider.querySelector('.next');
  


  
    // Desktop buttons
  
    if(prevBtn && nextBtn) {
  
        prevBtn.addEventListener('click', () => {
  
            idx = (idx - 1 + images.length) % images.length;
  
            slidesInner.style.transform = `translateX(-${idx * 100}%)`;
  
        });
  
        nextBtn.addEventListener('click', () => {
  
            idx = (idx + 1) % images.length;
  
            slidesInner.style.transform = `translateX(-${idx * 100}%)`;

  
        });
  
    }
  

  
    // Touch swipe support
  
    let startX = 0;
  
    let endX = 0;
  

  
    slidesInner.addEventListener('touchstart', e => {
  
        startX = e.touches[0].clientX;
  
    });

  

  
    slidesInner.addEventListener('touchmove', e => {
  
        endX = e.touches[0].clientX;
  
    });
  

  
    slidesInner.addEventListener('touchend', () => {
  
        const diff = startX - endX;
  
        if(diff > 30) {
  
            // swipe left → next
  

            idx = (idx + 1) % images.length;
  
        } else if(diff < -30) {
  
            // swipe right → prev
  
            idx = (idx - 1 + images.length) % images.length;
  
        }
  
        slidesInner.style.transform = `translateX(-${idx * 100}%)`;
  
    });
  
});
  
</script>

<div class="clients-section">
  
  <h2 style="color:#25A9C2;">
    Our Corporate Healthcare Institutions and Organizations
</h2>

  
  <div class="clients-wrapper">
    <?php
    $query = "SELECT * FROM clients ORDER BY id DESC";
    $result = $conn->query($query);

    if ($result && $result->num_rows > 0):
        while($row = $result->fetch_assoc()):
            $image = !empty($row['logo']) 
                ? 'Dashboard/Images/Clients/' . htmlspecialchars($row['logo']) 
                : 'assets/images/no-image.jpg';
            $clientName = htmlspecialchars($row['name']);
    ?>
        <div class="client-box">
            <img src="<?= $image ?>" alt="<?= $clientName ?>">
            <p class="client-name"><?= $clientName ?></p>
        </div>
    <?php
        endwhile;
    else:
        echo "<p style='text-align:center;'>No clients available.</p>";
    endif;
    ?>
  </div>
</div>

<style>
    
    /* ===== Clients Section ===== */
.clients-section {
    width: 90%;
    max-width: 1300px;
    margin: 80px auto;
    text-align: center;
    font-family: 'Segoe UI', sans-serif;
}

.clients-section h2 {
    font-size: 2.3rem;
    margin-bottom: 50px;
    color: #1a237e;
}

/* Grid wrapper */
.clients-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 35px;
    align-items: center;
}

/* Client box */
.client-box {
    background: #fff;
    border-radius: 16px;
    padding: 25px 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.client-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 35px rgba(0,0,0,0.18);
}

/* Logo */
.client-box img {
    width: 120px;              /* 🔥 BIGGER ON PC */
    height: 120px;
    object-fit: contain;
    margin-bottom: 15px;
}

/* Name */
.client-name {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
}

/* ===== MOBILE FIX ===== */
@media (max-width: 768px) {
    .clients-wrapper {
        grid-template-columns: repeat(2, 1fr); /* 🔥 CLEAN 2 PER ROW */
        gap: 20px;
    }

    .client-box img {
        width: 90px;
        height: 90px;
    }

    .client-name {
        font-size: 0.9rem;
    }
}

/* ===== VERY SMALL PHONES ===== */
@media (max-width: 420px) {
    .clients-wrapper {
        grid-template-columns: 1fr; /* 🔥 1 PER ROW */
    }
}

    
</style>

<script>
  
// Fade-in sections on scroll
  
const sections = document.querySelectorAll('.section-fade');
  

  
function checkSections() {

  
    const triggerBottom = window.innerHeight * 0.85; // when 85% of viewport
  

  
    sections.forEach(section => {
  
        const sectionTop = section.getBoundingClientRect().top;
  
        if(sectionTop < triggerBottom){
  
            section.classList.add('visible');
  
        }
  
    });
  
}
  


  
// Run on scroll and on page load
  
window.addEventListener('scroll', checkSections);
  
window.addEventListener('load', checkSections);
  
</script><script type="text/javascript">document.querySelectorAll('.blog-slider, .department-slider').forEach(slider => {
  
    const slidesInner = slider.querySelector('.slides-inner');
  
    const images = slidesInner.querySelectorAll('img');
  
    let idx = 0;

  

  
    const prevBtn = slider.querySelector('.prev');
  
    const nextBtn = slider.querySelector('.next');
  

  
    if(prevBtn && nextBtn){
  
        prevBtn.addEventListener('click', () => {
  
            idx = (idx - 1 + images.length) % images.length;
  
            slidesInner.style.transform = `translateX(-${idx * 100}%)`;
  
        });

  
        nextBtn.addEventListener('click', () => {
  
            idx = (idx + 1) % images.length;
  
            slidesInner.style.transform = `translateX(-${idx * 100}%)`;
  
        });
  
    }

  
    // Touch support
  
    let startX = 0, endX = 0;
  
    slidesInner.addEventListener('touchstart', e => startX = e.touches[0].clientX);
  

    slidesInner.addEventListener('touchmove', e => endX = e.touches[0].clientX);
  
    slidesInner.addEventListener('touchend', () => {
  
        const diff = startX - endX;
  
        if(diff > 30) idx = (idx + 1) % images.length;
  
        else if(diff < -30) idx = (idx - 1 + images.length) % images.length;
  
        slidesInner.style.transform = `translateX(-${idx * 100}%)`;
  
    });
  
});
  
</script><script type="text/javascript">

  
    document.querySelectorAll('.news-slider, .blog-slider, .department-slider').forEach(slider => {
  
    const slidesInner = slider.querySelector('.slides-inner');
  
    const images = slidesInner.querySelectorAll('img');
  
    let idx = 0;
  

  
    const prevBtn = slider.querySelector('.prev');
  
    const nextBtn = slider.querySelector('.next');
  

  
    function updateSlider() {
  
        slidesInner.style.transform = `translateX(-${idx * 100}%)`;
  
    }
  

  
    // Desktop buttons
  
    if(prevBtn && nextBtn && images.length > 1){
  
        prevBtn.addEventListener('click', () => {
  
            idx = (idx - 1 + images.length) % images.length;
  
            updateSlider();
  

        });
  
        nextBtn.addEventListener('click', () => {
  
            idx = (idx + 1) % images.length;
  
            updateSlider();
  
        });
  
    }
  

  
    // Auto-slide every 5 seconds
  
    if(images.length > 1){
  
        setInterval(() => {
  
            idx = (idx + 1) % images.length;
  

            updateSlider();
  
        }, 5000);
  
    }
  

  
    // Touch support
  
    let startX = 0, endX = 0;
  
    slidesInner.addEventListener('touchstart', e => startX = e.touches[0].clientX);
  
    slidesInner.addEventListener('touchmove', e => endX = e.touches[0].clientX);
  
    slidesInner.addEventListener('touchend', () => {

  
        const diff = startX - endX;
  
        if(diff > 30) idx = (idx + 1) % images.length;
  
        else if(diff < -30) idx = (idx - 1 + images.length) % images.length;
  
        updateSlider();
  
    });
  
});
  

  
</script><script type="text/javascript">
  
    // Fade and lift cards on scroll
  
const cards = 

document.querySelectorAll('.news-card, .blog-card, .department-card');
  

  
function showCards() {
  
  const trigger = window.innerHeight * 0.9;
  
  cards.forEach(card => {
  
    const top = card.getBoundingClientRect().top;
  
    if (top < trigger) card.classList.add('visible');
  
  });
  
}
  
window.addEventListener('scroll', showCards);

  
window.addEventListener('load', showCards);
  
cards.forEach(c => c.classList.add('card-animate'));
  

  
</script><!-- ===== FINAL OVERRIDE: unify blog cards & make images taller ===== --><style>
  
/* Make sure blog-card behaves like other cards */
  
.blog-card {
  
  position: relative !important;
  
  display: flex !important;
  

  flex-direction: column !important;
  
  width: 100px !important;
  
  height: 150px!important;
  
  border-radius: 20px !important;
  
  overflow: hidden !important;
  
  background: #fff !important;
  
  box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
  
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  
  height: auto !important;
  
}
  


  
/* Remove interfering overlay / absolute layout if present */
  
.blog-card .overlay {
  
  display: none !important;
  
}
  
.blog-content {
  
  position: static !important;
  
  padding: 25px !important;
  
  background: #fff !important;
  
  color: #333 !important;
  
  text-align: left !important;

  
} 
/* Slider / Image area — make taller and consistent with news & department */
  
.blog-slider,
  
.news-slider,
  
.department-slider {
  
  width: 100% !important;
  
  height: 380px !important;   /* change to desired height */
  
  overflow: hidden !important;
  
  position: relative !important;

  
}
  

  
.blog-slider .slides-inner,
  
.news-slider .slides-inner,
  
.department-slider .slides-inner {
  
  display: flex !important;
  
  transition: transform 0.4s ease !important;
  
}
  

  
/* Make images fill the taller container */
  
.blog-slider img,
  

.news-slider img,
  
.department-slider img,
  
.slides-inner img {
  
  width: 100% !important;
  
  height: 380px !important;   /* match the slider height */
  
  object-fit: cover !important;
  
  display: block !important;
  
  transition: transform 0.4s ease !important;
  
}
  

  
/* Hover scale */

  
.blog-card:hover img,
  
.news-card:hover img,
  
.department-card:hover img {
  
  transform: scale(1.05) !important;
  
}
  

  
/* Heading / paragraph sizing to match others */
  
.blog-content h3 {
  
  font-size: 1.5rem !important;
  
  font-weight: 700 !important;
  

  color: #1a237e !important;
  
  margin-bottom: 12px !important;
  
}
  

  
.blog-content p {
  
  font-size: 1.05rem !important;
  
  color: #555 !important;
  
  line-height: 1.6 !important;
  
  margin-bottom: 20px !important;
  
}
  

  

/* Button style unify */
  
.read-more {
  
  display: inline-block !important;
  
  background: #B82025 !important;
  
  color: white !important;
  
  padding: 10px 20px !important;
  
  border-radius: 10px !important;
  
  font-size: 1rem !important;
  
  text-decoration: none !important;
  
  font-weight: 600 !important;
  
}
  


  
/* Responsive */
  
@media (max-width: 768px) {
  
  .blog-card, .news-card, .department-card {
  
    width: 92% !important;
  
  }
  
  .blog-slider img,
  
  .news-slider img,
  
  .department-slider img {
  
    height: 240px !important;
  
  }
  

}
  
</style><style>/* ===================== SLIDER CONTAINER ===================== */
  
.slider {
  
    margin-top: 0;            /* remove top gap */
  
    width: 100%;
  
    height: 75vh;             /* adjust as needed */
  
    position: relative;
  
    overflow: hidden;
  
    background: transparent;
  
}
  


  
/* Slides wrapper */
  
.slides {
  
    display: flex;
  
    transition: transform 0.5s ease-in-out;
  
    height: 100%;
  
    margin: 0;
  
    padding: 0;
  
}
  

  
/* Each slide */
  

.slide {
  
    min-width: 100%;
  
    height: 100%;
  
    position: relative;
  
}
  

  
/* Images & videos */
  
.slide img,
  
.slide video {
  
    width: 100%;
  
    height: 100%;
  

    object-fit: cover;
  
    object-position: center;
  
    display: block;
  
}
  

  
/* ===================== CAPTION ===================== */
  
.caption {
  
    position: absolute;
  
    bottom: 20px;               /* distance from bottom */
  
    left: 50%;
  

    transform: translateX(-50%);
  
    text-align: center;
  
    color: #fff;
  
    background: rgba(0, 0, 0, 0.5);  /* semi-transparent overlay */
  
    padding: 12px 20px;
  
    border-radius: 8px;
  
    z-index: 100;
  
    max-width: 90%;            /* prevent overflow */
  
}
  

  

/* Caption title */
  
.caption h2 {
  
    margin: 0;
  
    font-size: 2rem;
  
    font-weight: 700;
  
    line-height: 1.2;
  
    color: #fff;
  
}
  

  
/* Caption description text */
  
.caption .caption-text {
  
    margin-top: 5px;

  
    font-size: 1rem;
  
    color: #fff;
  
}
  

  
/* ===================== NAVIGATION BUTTONS ===================== */
  
.slider button.prev,
  
.slider button.next {
  
    position: absolute;
  
    top: 50%;
  
    transform: translateY(-50%);
  

    background: rgba(0, 0, 0, 0.5);
  
    border: none;
  
    color: #fff;
  
    font-size: 2rem;
  
    padding: 8px 12px;
  
    cursor: pointer;
  
    border-radius: 5px;
  
    z-index: 101;
  
}
  

  
.slider button.prev { left: 10px; }
  

.slider button.next { right: 10px; }
  

  
/* Hover effect for buttons */
  
.slider button.prev:hover,
  
.slider button.next:hover {
  
    background: rgba(0,0,0,0.7);
  
}
  

  
/* ===================== RESPONSIVE ===================== */
  
@media (max-width: 768px) {
  
    .slider {

  
        height: 45vh; /* smaller on mobile */
  
    }
  

  
    .caption h2 {
  
        font-size: 1.5rem;
  
    }
  

  
    .caption .caption-text {
  
        font-size: 0.9rem;
  
    }
  

  
    .slider button.prev,
  
    .slider button.next {
  
        font-size: 1.5rem;
  
        padding: 6px 10px;
  
    }
  
}
  

  
</style><style>
  
    /* Latest News Section Fix */
  
.news-section {
  
    padding: 60px 0;

  
    background: #f8f9fa; /* Light background instead of black */
  
    text-align: center;
  
}
  

  
.news-container {
  
    display: flex;
  
    justify-content: center;
  
    gap: 20px;
  
    flex-wrap: wrap;
  
}
  

  
.news-card {
  
    position: relative;
  
    width: 100px;
  
    border-radius: 15px;
  
    overflow: hidden;
  
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  
    background: #fff; /* White background */
  
    transition: transform 0.3s;
  
}
  
  
  

  
.news-card:hover {

  
    transform: scale(1.03);
  
}
  

  
.news-slider {
  
    position: relative;
  
    width: 100%;
  
    height: 250px; /* Adjust as needed */
  
    overflow: hidden;
  
    border-radius: 10px 10px 0 0;
  
}
  

  
.news-slider .slides-inner {
  
    display: flex;
  
    transition: transform 0.4s ease;
  
}
  

  
.news-slider .slides-inner img {
  
    width: 100%;      /* full width of container */
  
    flex: 0 0 100%;   /* ensure only one image per slide */
  
    height: 100%;
  
    object-fit: cover;

  
    display: block;
  
}
  

  

  
.slider-nav {
  
    position: absolute;
  
    top: 50%;
  
    width: 100%;
  
    display: flex;
  
    justify-content: space-between;
  
    transform: translateY(-50%);

  
    z-index: 10;
  
}
  

  
.slider-nav button {
  
    background: rgba(0,0,0,0.4);
  
    border: none;
  
    color: #fff;
  
    font-size: 1.2rem;
  
    padding: 4px 10px;
  
    cursor: pointer;
  
    border-radius: 5px;
  

}
  

  
.news-content {
  
    padding: 15px;
  
    text-align: left;
  
    background: #fff;
  
}
  

  
.news-content h3 {
  
    font-size: 1.2rem;
  
    margin-bottom: 8px;
  

    color: #1a237e;
  
}
  

  
.news-content p {
  
    font-size: 0.95rem;
  
    line-height: 1.4;
  
    height: 40px;
  
    overflow: hidden;
  
    margin-bottom: 10px;
  
}
  

  

.see-more {
  
    display: inline-block;
  
    background: #B82025;
  
    color: white;
  
    padding: 6px 12px;
  
    border-radius: 6px;
  
    font-size: 0.85rem;
  
    text-decoration: none;
  
}
  

  
.see-more:hover {
  

    background: #ff8533;
  
}
  

  
.no-news {
  
    color: #555;
  
    font-size: 1rem;
  
}
  
/* ===== MOBILE NEWS SLIDER FIX ===== */
  
@media (max-width: 768px) {
  
    .news-slider {
  
        height: 220px !important;        /* 

reduce slider height */
  
        overflow: hidden !important;
  
    }
  

  
    .news-slider .slides-inner {
  
        display: flex !important;
  
        flex-wrap: nowrap !important;    /* ensure one image per slide */
  
    }
  

  
    .news-slider .slides-inner img {
  
        width: 100% !important;          /* full 

width */
  
        height: 300px !important;        /* match slider height */
  
        object-fit: cover !important;
  
        display: block !important;
  
    }
  
    
  
    
  
    @media (max-width: 768px) {
  
    .news-slider .slides-inner img {
  
        max-height: 300px !important;  /* smaller height for mobile */
  
    }

  
}
  

  

  
    .news-content {
  
        padding: 8px 10px !important;    /* reduce spacing */
  
        margin-top: -4px !important;     /* bring text closer to image */
  
    }
  

  
    .news-container {
  
        gap: 15px !important;            /* smaller 

gap between news cards */
  
        flex-direction: column !important; /* stack vertically */
  
    }
  
}
  

  

  
/* ===== CARD SLIDER ===== */
  
.cards-slider {
  
  position: relative;
  
  width: 100%;
  
  margin: auto;

  
}
  

  
.cards-viewport {
  
  overflow: hidden;
  
  width: 100%;
  
}
  

  
.cards-track {
  
  display: flex;
  
  gap: 20px;
  
  transition: transform 0.6s ease;

  
}
  

  
/* 5 cards visible on desktop */
  
.news-card,
  
.blog-card,
  
.department-card {
  
  flex: 0 0 calc(20% - 16px);
  
}
  

  
/* Buttons */
  
.cards-btn {

  
  position: absolute;
  
  top: 45%;
  
  transform: translateY(-50%);
  
  background: rgba(0,0,0,0.6);
  
  color: #fff;
  
  border: none;
  
  font-size: 22px;
  
  padding: 12px 16px;
  
  cursor: pointer;
  
  z-index: 10;
  
  border-radius: 8px;

  
}
  

  
.cards-btn.prev { left: 5px; }
  
.cards-btn.next { right: 5px; }
  

  
.cards-btn:hover {
  
  background: rgba(0,0,0,0.8);
  
}
  

  
/* ===== MOBILE ===== */
  
@media (max-width: 900px) {
  

  .news-card,
  
  .blog-card,
  
  .department-card {
  
    flex: 0 0 90%;
  
  }
  
}
  
</style><script>
  
document.querySelectorAll('.cards-slider').forEach(slider => {
  

  
  const track = slider.querySelector('.cards-track');
  

  const cards = track.children;
  
  const prevBtn = slider.querySelector('.prev');
  
  const nextBtn = slider.querySelector('.next');
  

  
  let index = 0;
  

  
  function visibleCount() {
  
    return window.innerWidth > 900 ? 5 : 1;
  
  }
  

  

  function updateSlider() {
  
    if (!cards.length) return;
  
    const cardWidth = cards[0].offsetWidth + 20;
  
    track.style.transform = `translateX(-${index * cardWidth}px)`;
  
  }
  

  
  nextBtn.onclick = () => {
  
    if (index < cards.length - visibleCount()) index++;
  
    updateSlider();
  
  };

  

  
  prevBtn.onclick = () => {
  
    if (index > 0) index--;
  
    updateSlider();
  
  };
  

  
  /* AUTO SLIDE */
  
  setInterval(() => {
  
    index = (index < cards.length - visibleCount()) ? index + 1 : 0;
  
    updateSlider();
  

  }, 5000);
  

  
  window.addEventListener('resize', updateSlider);
  
  window.addEventListener('load', updateSlider);
  
});
  
</script>


<script>
document.querySelectorAll('.cards-slider').forEach(slider => {
    const track = slider.querySelector('.cards-track');
    const cards = track.children;
    const prevBtn = slider.querySelector('.cards-btn.prev');
    const nextBtn = slider.querySelector('.cards-btn.next');

    let index = 0;

    function visibleCount() {
        return window.innerWidth > 900 ? 3 : 1; // show 3 cards on desktop, 1 on mobile
    }

    function updateSlider() {
        if (cards.length === 0) return;
        const cardWidth = cards[0].offsetWidth + 20; // width + gap
        track.style.transform = `translateX(-${index * cardWidth}px)`;
    }

    // Button clicks
    if (nextBtn && prevBtn) {
        nextBtn.addEventListener('click', () => {
            if (index < cards.length - visibleCount()) index++;
            else index = 0; // loop back
            updateSlider();
        });

        prevBtn.addEventListener('click', () => {
            if (index > 0) index--;
            else index = cards.length - visibleCount(); // loop to end
            updateSlider();
        });
    }

    // Auto slide every 5 seconds
    setInterval(() => {
        if (index < cards.length - visibleCount()) index++;
        else index = 0;
        updateSlider();
    }, 5000);

    window.addEventListener('resize', updateSlider);
    window.addEventListener('load', updateSlider);
});
</script>


<script>
document.querySelectorAll('.departments-section .cards-slider').forEach(slider => {
  const track = slider.querySelector('.cards-track');
  const cards = track.children;
  const prevBtn = slider.querySelector('.cards-btn.prev');
  const nextBtn = slider.querySelector('.cards-btn.next');

  let index = 0;

  function visibleCount() {
      return window.innerWidth > 900 ? 3 : 1; // 3 cards on desktop, 1 on mobile
  }

  function updateSlider() {
      const cardWidth = cards[0].offsetWidth + 20; // width + gap
      track.style.transform = `translateX(-${index * cardWidth}px)`;
  }

  nextBtn.addEventListener('click', () => {
      if (index < cards.length - visibleCount()) index++;
      else index = 0;
      updateSlider();
  });

  prevBtn.addEventListener('click', () => {
      if (index > 0) index--;
      else index = cards.length - visibleCount();
      updateSlider();
  });

  // Auto slide every 5 seconds
  setInterval(() => {
      if (index < cards.length - visibleCount()) index++;
      else index = 0;
      updateSlider();
  }, 5000);

  window.addEventListener('resize', updateSlider);
  window.addEventListener('load', updateSlider);
});
</script>


<script>
document.querySelectorAll('.blog-section .cards-slider').forEach(slider => {
  const track = slider.querySelector('.cards-track');
  const cards = track.children;
  const prevBtn = slider.querySelector('.cards-btn.prev');
  const nextBtn = slider.querySelector('.cards-btn.next');

  let index = 0;

  function visibleCount() {
      return window.innerWidth > 900 ? 3 : 1; // 3 cards on desktop, 1 on mobile
  }

  function updateSlider() {
      const cardWidth = cards[0].offsetWidth + 20; // width + gap
      track.style.transform = `translateX(-${index * cardWidth}px)`;
  }

  nextBtn.addEventListener('click', () => {
      if (index < cards.length - visibleCount()) index++;
      else index = 0;
      updateSlider();
  });

  prevBtn.addEventListener('click', () => {
      if (index > 0) index--;
      else index = cards.length - visibleCount();
      updateSlider();
  });

  // Auto slide every 5 seconds
  setInterval(() => {
      if (index < cards.length - visibleCount()) index++;
      else index = 0;
      updateSlider();
  }, 5000);

  window.addEventListener('resize', updateSlider);
  window.addEventListener('load', updateSlider);
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const slider = document.querySelector('#client-cards-section .client-cards-slider');
    const track = slider.querySelector('.cards-track');
    const cards = track.children;
    const prevBtn = slider.querySelector('.cards-btn.prev');
    const nextBtn = slider.querySelector('.cards-btn.next');

    let index = 0;

    function visibleCount() {
        return window.innerWidth > 900 ? 3 : 1; // 3 cards desktop, 1 mobile
    }

    function updateSlider() {
        const cardWidth = cards[0].offsetWidth + 20;
        track.style.transform = `translateX(-${index * cardWidth}px)`;
    }

    nextBtn.addEventListener('click', () => {
        if(index < cards.length - visibleCount()) index++;
        else index = 0;
        updateSlider();
    });

    prevBtn.addEventListener('click', () => {
        if(index > 0) index--;
        else index = cards.length - visibleCount();
        updateSlider();
    });

    // Auto-slide every 5 seconds
    setInterval(() => {
        if(index < cards.length - visibleCount()) index++;
        else index = 0;
        updateSlider();
    }, 5000);

    window.addEventListener('resize', updateSlider);
    window.addEventListener('load', updateSlider);
});
</script>

<style>


@media (max-width: 768px) {

    header,
    nav,
    .navbar,
    .menu,
    .search-box {
        width: 100% !important;
        max-width: 100% !important;
    }

    nav ul {
        flex-direction: column;
        width: 100%;
    }
}

    
</style>


<style>
    @media (max-width: 768px) {
    * {
        box-sizing: border-box;
    }

    img,
    video {
        max-width: 100%;
        height: auto;
    }
}

</style>

<script>
document.querySelectorAll('.cards-slider').forEach(slider => {

    const track = slider.querySelector('.cards-track');
    const cards = Array.from(track.children);

    if(cards.length < 2) return;

    // 🔁 clone cards for infinite loop
    cards.forEach(card => {
        track.appendChild(card.cloneNode(true));
    });

    let index = 0;
    let cardWidth = cards[0].offsetWidth + 20;

    function update() {
        track.style.transition = 'transform 0.6s ease';
        track.style.transform = `translateX(-${index * cardWidth}px)`;
    }

    function next() {
        index++;
        update();

        // when reaching cloned end → jump back silently
        if(index >= cards.length) {
            setTimeout(() => {
                track.style.transition = 'none';
                index = 0;
                track.style.transform = `translateX(0)`;
            }, 600);
        }
    }

    setInterval(next, 4000);

    window.addEventListener('resize', () => {
        cardWidth = cards[0].offsetWidth + 20;
    });

});
</script>
<style>
    /* Mobile slider: only on screens < 900px */
@media (max-width: 900px) {
    .news-images, .blog-images, .department-images {
        display: flex;             /* horizontal row for sliding */
        overflow-x: hidden;        /* hide overflow */
        flex-wrap: nowrap;         /* keep in one row */
        scroll-behavior: smooth;   /* smooth slide when JS transforms */
    }

    .news-images img, .blog-images img, .department-images img {
        min-width: 100%;          /* show one image per slide */
        flex-shrink: 0;
        height: auto;             /* maintain aspect ratio */
        margin-right: 10px;       /* optional spacing */
    }

    .prev, .next {
        display: block;           /* show buttons only on mobile */
    }
}

</style>
<scirpt>


</scirpt>


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

