<?php include 'include/header.php'; ?>

 <style>
    body { background-color: #f0f0f0; }
    
    /* ── Hero ── */
    .hero-section { min-height: 320px; }
    .hero-section h1 { font-size: clamp(2rem, 5vw, 3.5rem); }

    /* ── Pill tab bar ── */
    .custom-tabs {
      border: 1.5px solid #ccc;
      border-radius: 50px;
      display: inline-flex;
      overflow: hidden;
      background: #f0f0f0;
      flex-wrap: nowrap;
      width: 100%;
    }
    .custom-tabs .nav-link {
      border-radius: 50px;
      color: #444;
      padding: 8px 16px;
      font-size: 0.88rem;
      border: none;
      background: transparent;
      white-space: nowrap;
      flex: 1;
      text-align: center;
    }
    .custom-tabs .nav-link.active {
      background: #333;
      color: #fff;
    }

    /* ── Tab nav wrapper ── */
    .tabs-wrapper {
      width: 100%;
    }

    /* ── Cards (desktop) ── */
    .feature-card {
      border-radius: 12px;
      overflow: hidden;
      background: #fff;
      border: none;
      height: 100%;
    }
    .feature-card img {
      width: 100%;
      height: 170px;
      object-fit: cover;
    }
    .feature-card .card-body { padding: 1.1rem 1.1rem 1.4rem; }
    .feature-card .card-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; }
    .feature-card .card-text { font-size: 0.85rem; color: #555; line-height: 1.5; }

    /* ── Mobile Slider ── */
    @media (max-width: 767.98px) {
      .cards-grid { display: none !important; }
      .cards-slider-wrap { display: block !important; }

      /* Slider container with arrows */
      .slider-outer {
        position: relative;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .cards-slider {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 4px 2px 16px;
        scrollbar-width: none;
        flex: 1;
      }
      .cards-slider::-webkit-scrollbar { display: none; }

      .cards-slider .slide-item {
        flex: 0 0 78vw;
        max-width: 300px;
        scroll-snap-align: start;
      }

      /* Prev / Next arrow buttons */
      .slider-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 50%;
        background: #fff;
        border: 1.5px solid #ccc;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0,0,0,0.12);
        transition: background 0.2s, border-color 0.2s;
        align-self: center;
        margin-bottom: 12px;
        padding: 0;
        flex-shrink: 0;
      }
      .slider-btn:disabled {
        opacity: 0.3;
        cursor: default;
      }
      .slider-btn:not(:disabled):hover {
        background: #333;
        border-color: #333;
      }
      .slider-btn:not(:disabled):hover svg { stroke: #fff; }
      .slider-btn svg { stroke: #444; width: 16px; height: 16px; }

      /* Dots */
      .slider-dots {
        display: flex !important;
        justify-content: center;
        gap: 6px;
        margin-top: 4px;
      }
      .slider-dots .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ccc;
        border: none;
        padding: 0;
        cursor: pointer;
        transition: background 0.2s;
      }
      .slider-dots .dot.active { background: #333; }
    }

    @media (min-width: 768px) {
      .cards-slider-wrap { display: none !important; }
      .slider-dots { display: none !important; }
      .cards-grid { display: flex !important; }
      .slider-btn { display: none !important; }
    }

    /*================form placeholder css==================*/
    
      .form-control::placeholder {
        color: #ffffff !important;
        opacity: 1; /* Ensures full white instead of faded */
    }

    .form-control:-ms-input-placeholder {  /* Edge */
        color: #ffffff !important;
    }

    .form-control::-ms-input-placeholder { /* IE 10-11 */
        color: #ffffff !important;
    }
  </style>



<!-- HERO -->
<section class="position-relative text-white hero-section">
  <div class="py-5 d-flex align-items-center"
       style="background: url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b') center center/cover no-repeat; min-height: 250px;">
    <div class="position-absolute top-0 start-0 w-100 bg-dark opacity-50"></div>
    <div class="container position-relative">
      <div class="row">
        <div class="col-lg-6">
          <h1 class="display-2 fw-light">Where scientists <br>empower society</h1>
          <p class="lead mt-4">Creating solutions for healthy lives on a healthy planet</p>
        </div>
      </div>
    </div>
    <div class="position-absolute bottom-0 end-0 d-none d-md-block" style="width:50%">
      <div class="row text-center g-0">
        <div class="col-md-4 py-4 bg-dark bg-opacity-75 border-end"><h4 class="fw-bold">3 million</h4><p class="mb-0 small">researchers</p></div>
        <div class="col-md-4 py-4 bg-dark bg-opacity-75 border-end"><h4 class="fw-bold">4 billion</h4><p class="mb-0 small">article views and downloads</p></div>
        <div class="col-md-4 py-4 bg-dark bg-opacity-75"><h4 class="fw-bold">12 million</h4><p class="mb-0 small">citations</p></div>
      </div>
    </div>
  </div>
  <div class="d-md-none">
    <div class="row text-center g-0 text-white">
      <div class="col-4 py-3 bg-dark border-end"><h6 class="fw-bold mb-0">3 million</h6><p class="mb-0 small" style="font-size:.7rem">researchers</p></div>
      <div class="col-4 py-3 bg-dark border-end"><h6 class="fw-bold mb-0">4 billion</h6><p class="mb-0 small" style="font-size:.7rem">views &amp; downloads</p></div>
      <div class="col-4 py-3 bg-dark"><h6 class="fw-bold mb-0">12 million</h6><p class="mb-0 small" style="font-size:.7rem">citations</p></div>
    </div>
  </div>
</section>


<!-- TAB SECTION -->
<div class="container-xl py-5">

  <!-- Tab Nav - full width on mobile -->
  <div class="tabs-wrapper d-flex justify-content-center mb-4 px-2 px-md-0">
    <ul class="nav custom-tabs w-100 w-md-auto" id="sectionTabs" role="tablist" style="max-width:350px;">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="authors-tab" data-bs-toggle="tab" data-bs-target="#authors" type="button" role="tab">Authors</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="editors-tab" data-bs-toggle="tab" data-bs-target="#editors" type="button" role="tab">Editors &amp; reviewers</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="collaborators-tab" data-bs-toggle="tab" data-bs-target="#collaborators" type="button" role="tab">Collaborators</button>
      </li>
    </ul>
  </div>

  <!-- Tab Content -->
  <div class="tab-content" id="sectionTabsContent">

    <!-- AUTHORS -->
    <div class="tab-pane fade show active" id="authors" role="tabpanel">
      <div class="cards-grid row g-3">
        <div class="col-12 col-sm-6 col-lg"><div class="feature-card card shadow-sm"><img src="https://images.unsplash.com/photo-1524995997946-a1c2e315a42f?w=400&q=80" alt=""/><div class="card-body"><h6 class="card-title">Find a journal</h6><p class="card-text">We have a home for your research. Our community journals and sections cover more than 1,700 academic disciplines.</p></div></div></div>
        <div class="col-12 col-sm-6 col-lg"><div class="feature-card card shadow-sm"><img src="https://images.unsplash.com/photo-1530836369250-ef72a3f5cda8?w=400&q=80" alt=""/><div class="card-body"><h6 class="card-title">Find a topic</h6><p class="card-text">Research Topics bring together expert researchers to work on emerging themes. Find your community or start a new one.</p></div></div></div>
        <div class="col-12 col-sm-6 col-lg"><div class="feature-card card shadow-sm"><img src="https://images.unsplash.com/photo-1581093588401-fbb62a02f120?w=400&q=80" alt=""/><div class="card-body"><h6 class="card-title">Resources for authors</h6><p class="card-text">Your publishing journey starts here. Visit our author hub to explore guidance and tools to help you prepare, submit, and share your research.</p></div></div></div>
        <div class="col-12 col-sm-6 col-lg"><div class="feature-card card shadow-sm"><img src="https://images.unsplash.com/photo-1497435334941-8c899ee9e8e9?w=400&q=80" alt=""/><div class="card-body"><h6 class="card-title">Submit your research</h6><p class="card-text">Ready to publish? Start your submission today and get more impact for your research by publishing with us.</p></div></div></div>
        <div class="col-12 col-sm-6 col-lg"><div class="feature-card card shadow-sm"><img src="https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?w=400&q=80" alt=""/><div class="card-body"><h6 class="card-title">Peer review</h6><p class="card-text">Our efficient peer review means you'll get a decision on your manuscript fast – our average acceptance time is 96 days.</p></div></div></div>
      </div>
      <div class="cards-slider-wrap" style="display:none">
        <div class="slider-outer">
          <button class="slider-btn btn-prev" data-target="authors" aria-label="Previous">
            <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
          </button>
          <div class="cards-slider" data-slider="authors">
            <div class="slide-item"><div class="feature-card card shadow-sm"><img src="https://images.unsplash.com/photo-1524995997946-a1c2e315a42f?w=400&q=80" alt=""/><div class="card-body"><h6 class="card-title">Find a journal</h6><p class="card-text">We have a home for your research. Our community journals and sections cover more than 1,700 academic disciplines.</p></div></div></div>
            <div class="slide-item"><div class="feature-card card shadow-sm"><img src="https://images.unsplash.com/photo-1530836369250-ef72a3f5cda8?w=400&q=80" alt=""/><div class="card-body"><h6 class="card-title">Find a topic</h6><p class="card-text">Research Topics bring together expert researchers to work on emerging themes. Find your community or start a new one.</p></div></div></div>
            <div class="slide-item"><div class="feature-card card shadow-sm"><img src="https://images.unsplash.com/photo-1581093588401-fbb62a02f120?w=400&q=80" alt=""/><div class="card-body"><h6 class="card-title">Resources for authors</h6><p class="card-text">Your publishing journey starts here. Visit our author hub to explore guidance and tools.</p></div></div></div>
            <div class="slide-item"><div class="feature-card card shadow-sm"><img src="https://images.unsplash.com/photo-1497435334941-8c899ee9e8e9?w=400&q=80" alt=""/><div class="card-body"><h6 class="card-title">Submit your research</h6><p class="card-text">Ready to publish? Start your submission today and get more impact for your research by publishing with us.</p></div></div></div>
            <div class="slide-item"><div class="feature-card card shadow-sm"><img src="https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?w=400&q=80" alt=""/><div class="card-body"><h6 class="card-title">Peer review</h6><p class="card-text">Our efficient peer review means you'll get a decision fast – average 96 days.</p></div></div></div>
          </div>
          <button class="slider-btn btn-next" data-target="authors" aria-label="Next">
            <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
          </button>
        </div>
        <div class="slider-dots" data-dots="authors" style="display:none"></div>
      </div>
    </div>

    <!-- EDITORS -->
    <div class="tab-pane fade" id="editors" role="tabpanel">
      <div class="cards-grid row g-3">
        <div class="col-12 col-sm-6 col-lg"><div class="feature-card card shadow-sm"><img src="https://images.unsplash.com/photo-1503676260728-1c00da094a0b?w=400&q=80" alt=""/><div class="card-body"><h6 class="card-title">Editorial tools</h6><p class="card-text">Access a full suite of editorial tools to manage submissions, communicate with authors, and track review progress.</p></div></div></div>
        <div class="col-12 col-sm-6 col-lg"><div class="feature-card card shadow-sm"><img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=400&q=80" alt=""/><div class="card-body"><h6 class="card-title">Reviewer resources</h6><p class="card-text">Get guidance on how to write high-quality reviews and access tools that make the peer review process faster and easier.</p></div></div></div>
        <div class="col-12 col-sm-6 col-lg"><div class="feature-card card shadow-sm"><img src="https://images.unsplash.com/photo-1552664730-d307ca884978?w=400&q=80" alt=""/><div class="card-body"><h6 class="card-title">Join our editorial board</h6><p class="card-text">We welcome applications from researchers interested in shaping the future of their field through editorial leadership.</p></div></div></div>
        <div class="col-12 col-sm-6 col-lg"><div class="feature-card card shadow-sm"><img src="https://images.unsplash.com/photo-1543269664-56d93c1b41a6?w=400&q=80" alt=""/><div class="card-body"><h6 class="card-title">Reviewer recognition</h6><p class="card-text">We value your contribution. Reviewers receive recognition certificates and benefits for their participation.</p></div></div></div>
        <div class="col-12 col-sm-6 col-lg"><div class="feature-card card shadow-sm"><img src="https://images.unsplash.com/photo-1557804506-669a67965ba0?w=400&q=80" alt=""/><div class="card-body"><h6 class="card-title">Training &amp; support</h6><p class="card-text">Our dedicated editorial support team is available to help you throughout the review process.</p></div></div></div>
      </div>
      <div class="cards-slider-wrap" style="display:none">
        <div class="slider-outer">
          <button class="slider-btn btn-prev" data-target="editors" aria-label="Previous">
            <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
          </button>
          <div class="cards-slider" data-slider="editors">
            <div class="slide-item"><div class="feature-card card shadow-sm"><img src="https://images.unsplash.com/photo-1503676260728-1c00da094a0b?w=400&q=80" alt=""/><div class="card-body"><h6 class="card-title">Editorial tools</h6><p class="card-text">Access a full suite of editorial tools to manage submissions and track review progress.</p></div></div></div>
            <div class="slide-item"><div class="feature-card card shadow-sm"><img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=400&q=80" alt=""/><div class="card-body"><h6 class="card-title">Reviewer resources</h6><p class="card-text">Get guidance on writing high-quality reviews and access tools that make peer review faster.</p></div></div></div>
            <div class="slide-item"><div class="feature-card card shadow-sm"><img src="https://images.unsplash.com/photo-1552664730-d307ca884978?w=400&q=80" alt=""/><div class="card-body"><h6 class="card-title">Join our editorial board</h6><p class="card-text">We welcome researchers interested in shaping the future of their field through editorial leadership.</p></div></div></div>
            <div class="slide-item"><div class="feature-card card shadow-sm"><img src="https://images.unsplash.com/photo-1543269664-56d93c1b41a6?w=400&q=80" alt=""/><div class="card-body"><h6 class="card-title">Reviewer recognition</h6><p class="card-text">Reviewers receive recognition certificates and benefits for their participation.</p></div></div></div>
            <div class="slide-item"><div class="feature-card card shadow-sm"><img src="https://images.unsplash.com/photo-1557804506-669a67965ba0?w=400&q=80" alt=""/><div class="card-body"><h6 class="card-title">Training &amp; support</h6><p class="card-text">Our editorial support team helps you throughout the review process.</p></div></div></div>
          </div>
          <button class="slider-btn btn-next" data-target="editors" aria-label="Next">
            <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
          </button>
        </div>
        <div class="slider-dots" data-dots="editors" style="display:none"></div>
      </div>
    </div>

    <!-- COLLABORATORS -->
    <div class="tab-pane fade" id="collaborators" role="tabpanel">
      <div class="cards-grid row g-3">
        <div class="col-12 col-sm-6 col-lg"><div class="feature-card card shadow-sm"><img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=400&q=80" alt=""/><div class="card-body"><h6 class="card-title">Partner with us</h6><p class="card-text">We collaborate with institutions, societies, and organizations worldwide to advance open science and expand research reach.</p></div></div></div>
        <div class="col-12 col-sm-6 col-lg"><div class="feature-card card shadow-sm"><img src="https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=400&q=80" alt=""/><div class="card-body"><h6 class="card-title">Society partnerships</h6><p class="card-text">Join a growing network of scientific societies that trust us to publish their research and grow their community presence.</p></div></div></div>
        <div class="col-12 col-sm-6 col-lg"><div class="feature-card card shadow-sm"><img src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=400&q=80" alt=""/><div class="card-body"><h6 class="card-title">Institutional agreements</h6><p class="card-text">Explore transformative agreements and read-and-publish deals that make open access simpler and more affordable.</p></div></div></div>
        <div class="col-12 col-sm-6 col-lg"><div class="feature-card card shadow-sm"><img src="https://images.unsplash.com/photo-1606761568499-6d2451b23c66?w=400&q=80" alt=""/><div class="card-body"><h6 class="card-title">Research networks</h6><p class="card-text">Connect your network to our platform and help researchers discover new opportunities to publish and collaborate.</p></div></div></div>
        <div class="col-12 col-sm-6 col-lg"><div class="feature-card card shadow-sm"><img src="https://images.unsplash.com/photo-1560439514-4e9645039924?w=400&q=80" alt=""/><div class="card-body"><h6 class="card-title">Funding bodies</h6><p class="card-text">We work with funders to ensure compliance with open access mandates and maximize visibility of funded research.</p></div></div></div>
      </div>
      <div class="cards-slider-wrap" style="display:none">
        <div class="slider-outer">
          <button class="slider-btn btn-prev" data-target="collaborators" aria-label="Previous">
            <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
          </button>
          <div class="cards-slider" data-slider="collaborators">
            <div class="slide-item"><div class="feature-card card shadow-sm"><img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=400&q=80" alt=""/><div class="card-body"><h6 class="card-title">Partner with us</h6><p class="card-text">We collaborate with institutions and organizations worldwide to advance open science.</p></div></div></div>
            <div class="slide-item"><div class="feature-card card shadow-sm"><img src="https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=400&q=80" alt=""/><div class="card-body"><h6 class="card-title">Society partnerships</h6><p class="card-text">Join a growing network of scientific societies that trust us to publish their research.</p></div></div></div>
            <div class="slide-item"><div class="feature-card card shadow-sm"><img src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=400&q=80" alt=""/><div class="card-body"><h6 class="card-title">Institutional agreements</h6><p class="card-text">Explore transformative agreements that make open access simpler and more affordable.</p></div></div></div>
            <div class="slide-item"><div class="feature-card card shadow-sm"><img src="https://images.unsplash.com/photo-1606761568499-6d2451b23c66?w=400&q=80" alt=""/><div class="card-body"><h6 class="card-title">Research networks</h6><p class="card-text">Connect your network and help researchers discover new opportunities to publish.</p></div></div></div>
            <div class="slide-item"><div class="feature-card card shadow-sm"><img src="https://images.unsplash.com/photo-1560439514-4e9645039924?w=400&q=80" alt=""/><div class="card-body"><h6 class="card-title">Funding bodies</h6><p class="card-text">We work with funders to ensure open access compliance and maximize research visibility.</p></div></div></div>
          </div>
          <button class="slider-btn btn-next" data-target="collaborators" aria-label="Next">
            <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
          </button>
        </div>
        <div class="slider-dots" data-dots="collaborators" style="display:none"></div>
      </div>
    </div>

  </div>
</div>


<!-- Authors Section End -->


 <!-- Open Science Section Start -->
<section class="py-5" style="background:#f4f4f4;">
<div class="container">
    <div class="row align-items-center g-5">

        <!-- Left Content -->
        <div class="col-lg-6">
            <h2 class="fw-semibold mb-4" style="font-size:40px;">
                Why open science is essential for our future
            </h2>

            <p class="text-muted mb-3">
                Science shapes every part of our lives, from the medicines we rely on 
                to the food we eat and the health of our planet. But for too long, 
                much of that knowledge has been locked behind barriers.
            </p>

            <p class="text-muted mb-3">
                Hosted on CNBC, Science Unlocked tells the story of why open science 
                matters, how it accelerated life-saving breakthroughs during COVID-19, 
                and why making research openly accessible is essential to solve 
                today’s biggest global challenges, from climate change to human health.
            </p>

            <p class="text-muted">
                It also shows how open science accelerates innovation, shapes new 
                industries, and helps turn research into economic and societal 
                progress at scale.
            </p>
        </div>

        <!-- Right Video -->
        <div class="col-lg-6">
            <div class="ratio ratio-16x9 shadow rounded-4 overflow-hidden">
                <iframe 
                    src="https://www.youtube.com/embed/8Qn_spdM5Zg" 
                    title="YouTube video" 
                    allowfullscreen>
                </iframe>
            </div>
        </div>

    </div>
</div>
</section>
<!-- Open Science Section End -->

<!-- Featured News Section Start -->
<section class="py-5 bg-light">
  <div class="container">

    <!-- Section Heading -->
    <h2 class="mb-4 fw-semibold">News</h2>

    <!-- Large Card -->
    <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
      <div class="row g-0 align-items-center">

        <!-- Image Left -->
        <div class="col-lg-6">
          <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e"
               class="img-fluid w-100 h-100"
               alt="Water"
               style="object-fit:cover;">
        </div>

        <!-- Content Right -->
        <div class="col-lg-6">
          <div class="card-body p-5">

            <small class="text-uppercase fw-semibold text-muted">
              Science News
            </small>

            <p class="text-muted small mb-3">
              Published on 24 Feb 2026
            </p>

            <h3 class="fw-semibold mb-4">
              How bacteria can reclaim lost energy, nutrients, and clean water from wastewater
            </h3>

            <p class="text-muted mb-0">
              Wastewater contains untapped resources that, if reclaimed, could power 
              agriculture, global sanitation, and its own treatment to help us meet 
              UN SDG goals.
            </p>

          </div>
        </div>

      </div>
    </div>

  </div>
</section>
<!-- Featured News Section End -->


<!-- Science News Section Start -->
<section class="py-5 bg-light">
  <div class="container">
    <div class="row g-4">

      <!-- News Card 1 -->
      <div class="col-lg-6">
        <div class="card border-0 shadow-sm rounded-4 overflow-hidden h-100">
          <div class="row g-0 h-100">
            
            <!-- Image -->
            <div class="col-md-6">
              <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba"
                   class="img-fluid h-100 w-100 object-fit-cover"
                   alt="Antarctica">
            </div>

            <!-- Content -->
            <div class="col-md-6">
              <div class="card-body p-4">
                <small class="text-uppercase fw-semibold text-muted">
                  Science News
                </small>
                <p class="text-muted small mb-3">
                  Published on 20 Feb 2026
                </p>

                <h5 class="fw-semibold mb-3">
                  Scientists reveal our best- and worst-case scenarios 
                  for a warming Antarctica
                </h5>

                <p class="text-muted mb-0">
                  Antarctica’s pale expanses of ice keep water locked up and reflect heat 
                  from the planet — but the climate crisis is putting these safeguards 
                  at increasing risk.
                </p>
              </div>
            </div>

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

      <!-- News Card 2 -->
      <div class="col-lg-6">
        <div class="card border-0 shadow-sm rounded-4 overflow-hidden h-100">
          <div class="row g-0 h-100">
            
            <!-- Image -->
            <div class="col-md-6">
              <img src="https://images.unsplash.com/photo-1515165562835-c3b8c6e6d45d"
                   class="img-fluid h-100 w-100 object-fit-cover"
                   alt="Food Systems">
            </div>

            <!-- Content -->
            <div class="col-md-6">
              <div class="card-body p-4">
                <small class="text-uppercase fw-semibold text-muted">
                  Science News
                </small>
                <p class="text-muted small mb-3">
                  Published on 18 Dec 2025
                </p>

                <h5 class="fw-semibold mb-3">
                  Global food systems driving twin crises of obesity 
                  and global heating
                </h5>

                <p class="text-muted mb-0">
                  A major review highlights how tackling unsustainable food systems—
                  reflected by our changing food environment—is urgent for both 
                  health and climate.
                </p>
              </div>
            </div>

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

    </div>
  </div>
</section>
<!-- Science News Section End -->


<!-- Latest News Section Start -->
<section class="py-5 bg-light">
  <div class="container">
    <div class="row g-4">

      <!-- Card 1 -->
      <div class="col-lg-3 col-md-6">
        <div class="card border-0 shadow-sm rounded-4 overflow-hidden h-100">
          <img src="https://images.unsplash.com/photo-1552674605-db6ffd4facb5"
               class="card-img-top"
               alt="Exercise">

          <div class="card-body p-4">
            <small class="text-uppercase fw-semibold text-muted">
              Science News
            </small>
            <p class="text-muted small mb-3">
              Published on 09 Feb 2026
            </p>

            <h5 class="fw-semibold">
              Brief, intensive exercise helps patients with panic disorder more than standard care
            </h5>
          </div>
        </div>
      </div>

      <!-- Card 2 -->
      <div class="col-lg-3 col-md-6">
        <div class="card border-0 shadow-sm rounded-4 overflow-hidden h-100">
          <img src="https://images.unsplash.com/photo-1518791841217-8f162f1e1131"
               class="card-img-top"
               alt="Cat">

          <div class="card-body p-4">
            <small class="text-uppercase fw-semibold text-muted">
              Science News
            </small>
            <p class="text-muted small mb-3">
              Published on 03 Feb 2026
            </p>

            <h5 class="fw-semibold">
              Are cats ‘vegan’ meat eaters? Study finds why isotopic fingerprint of cat fur could trick us
            </h5>
          </div>
        </div>
      </div>

      <!-- Card 3 -->
      <div class="col-lg-3 col-md-6">
        <div class="card border-0 shadow-sm rounded-4 overflow-hidden h-100">
          <img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470"
               class="card-img-top"
               alt="Ice Cave">

          <div class="card-body p-4">
            <small class="text-uppercase fw-semibold text-muted">
              Science News
            </small>
            <p class="text-muted small mb-3">
              Published on 17 Feb 2026
            </p>

            <h5 class="fw-semibold">
              Bacteria frozen in ancient underground ice cave found to be resistant against 10 modern antibiotics
            </h5>
          </div>
        </div>
      </div>

      <!-- Card 4 -->
      <div class="col-lg-3 col-md-6">
        <div class="card border-0 shadow-sm rounded-4 overflow-hidden h-100">
          <img src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d"
               class="card-img-top"
               alt="Science Unlocked">

          <div class="card-body p-4">
            <small class="text-uppercase fw-semibold text-muted">
              Frontiers News
            </small>
            <p class="text-muted small mb-3">
              Published on 14 Jan 2026
            </p>

            <h5 class="fw-semibold">
              Science unlocked: a new documentary spotlights how Frontiers is opening knowledge
            </h5>
          </div>
        </div>
      </div>

          <!-- Button -->
    <div class="text-center mt-5">
      <a href="#" class="btn btn-outline-dark rounded-pill px-4 py-2">
        See more news →
      </a>
    </div>

    </div>
  </div>
</section>
<!-- Latest News Section End -->


<section class="py-5" style="background-color: #001a8d;">
    <div class="container text-center text-white" style="max-width: 700px;">
        
        <h2 class="mb-4 fw-normal px-3" style="font-size: 1.75rem;">
            Get the latest research updates, subscribe to our newsletter
        </h2>
        
        <form class="px-3">
            <div class="row g-3">
                <div class="col-md-6">
                    <input type="text" 
                           class="form-control bg-transparent text-white border-white py-2 shadow-none" 
                           placeholder="Name" 
                           style="border-radius: 10px; border-color: rgba(255, 255, 255, 0.6) !important;">
                </div>
                
                <div class="col-md-6">
                    <input type="text" 
                           class="form-control bg-transparent text-white border-white py-2 shadow-none" 
                           placeholder="Last name" 
                           style="border-radius: 10px; border-color: rgba(255, 255, 255, 0.6) !important;">
                </div>
                
                <div class="col-12 mt-3">
                    <input type="email" 
                           class="form-control bg-transparent text-white border-white py-2 shadow-none" 
                           placeholder="E-mail" 
                           style="border-radius: 10px; border-color: rgba(255, 255, 255, 0.6) !important;">
                </div>
            </div>

            <button type="submit" 
                    class="btn btn-primary px-5 py-2 mt-4 fw-bold" 
                    style="border-radius: 50px; background-color: #004dff; border: none; font-size: 0.9rem;">
                Subscribe
            </button>
        </form>

    </div>
</section>



<script>
  function initSlider(key) {
    const sliderEl = document.querySelector(`.cards-slider[data-slider="${key}"]`);
    const dotsEl   = document.querySelector(`.slider-dots[data-dots="${key}"]`);
    const prevBtn  = document.querySelector(`.btn-prev[data-target="${key}"]`);
    const nextBtn  = document.querySelector(`.btn-next[data-target="${key}"]`);
    if (!sliderEl) return;

    const items = sliderEl.querySelectorAll('.slide-item');
    if (!items.length) return;

    let currentIndex = 0;

    // Build dots
    if (dotsEl) {
      dotsEl.innerHTML = '';
      items.forEach((_, i) => {
        const btn = document.createElement('button');
        btn.className = 'dot' + (i === 0 ? ' active' : '');
        btn.setAttribute('aria-label', 'Go to slide ' + (i + 1));
        dotsEl.appendChild(btn);
        btn.addEventListener('click', () => goTo(i));
      });
    }

    function updateDots(idx) {
      if (!dotsEl) return;
      dotsEl.querySelectorAll('.dot').forEach((d, i) => d.classList.toggle('active', i === idx));
    }

    function updateButtons() {
      if (prevBtn) prevBtn.disabled = currentIndex === 0;
      if (nextBtn) nextBtn.disabled = currentIndex >= items.length - 1;
    }

    function goTo(idx) {
      currentIndex = Math.max(0, Math.min(idx, items.length - 1));
      items[currentIndex].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
      updateDots(currentIndex);
      updateButtons();
    }

    if (prevBtn) prevBtn.addEventListener('click', () => goTo(currentIndex - 1));
    if (nextBtn) nextBtn.addEventListener('click', () => goTo(currentIndex + 1));

    // Update on scroll
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const idx = Array.from(items).indexOf(entry.target);
          currentIndex = idx;
          updateDots(idx);
          updateButtons();
        }
      });
    }, { root: sliderEl, threshold: 0.6 });

    items.forEach(item => observer.observe(item));
    updateButtons();
  }

  ['authors', 'editors', 'collaborators'].forEach(initSlider);
</script>


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