<?php
// home.php — Professional modern design with cool 3D search section and features.
/**
 * Make sure your main page loads:
 * - Bootstrap 5 CSS & JS (or adjust styles accordingly)
 * - Google Fonts Merriweather and Open Sans (optional, included below)
 */
?>

<style>
  /* Google Fonts Import */
  @import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Open+Sans&display=swap');

  /* -------- Scope all styles within this wrapper -------- */
  #vidhina-home-wrap {
    font-family: 'Open Sans', sans-serif;
    color: #222;
    background: #fff;
    max-width: 1140px;
    margin: 0 auto;
    padding: 60px 20px 80px;
  }
  
  /* Typography */
  #vidhina-home-wrap h1,
  #vidhina-home-wrap h2,
  #vidhina-home-wrap h3 {
    font-family: 'Merriweather', serif;
    font-weight: 700;
    margin-top: 0;
    color: #0056b3; /* Brand Blue */
  }
  #vidhina-home-wrap h1 { font-size: 3rem; margin-bottom: 1.2rem; }
  #vidhina-home-wrap h2 { font-size: 2.3rem; margin-bottom: 1rem; }
  #vidhina-home-wrap p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1.35rem;
    color: #444444;
  }
  #vidhina-home-wrap a {
    color: #ff6600; /* Brand Orange */
    font-weight: 600;
    text-decoration: none;
    transition: color 0.25s ease;
  }
  #vidhina-home-wrap a:hover,
  #vidhina-home-wrap a:focus {
    color: #cc5200;
    text-decoration: underline;
    outline: none;
  }
  
  /* -------- Top Section -------- */
  #vidhina-home-wrap .top-section {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 4rem;
  }
  #vidhina-home-wrap .left-col {
    flex: 1 1 55%;
    min-width: 320px;
  }
  #vidhina-home-wrap .right-col {
    flex: 1 1 40%;
    min-width: 280px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #vidhina-home-wrap .right-col img {
    width: 100%;
    max-width: 400px;
    border-radius: 1.25rem;
    box-shadow: 0 16px 38px rgba(0,0,0,0.16);
    transition: transform 0.3s ease;
  }
  #vidhina-home-wrap .right-col img:hover {
    transform: translateY(-8px) scale(1.02);
  }
  
  #vidhina-home-wrap .info-list {
    list-style: none;
    padding-left: 0;
    margin-top: 1.8rem;
    max-width: 480px;
    border-top: 1px solid #eee;
  }
  #vidhina-home-wrap .info-list li {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    font-weight: 600;
  }
  
  /* Call for Papers Button */
  #vidhina-home-wrap .btn-pill {
    display: inline-block;
    padding: 14px 36px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    background-color: #ff6600;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    box-shadow: 0 7px 20px rgba(255,102,0,0.4);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    margin-top: 2rem;
  }
  #vidhina-home-wrap .btn-pill:hover,
  #vidhina-home-wrap .btn-pill:focus {
    background-color: #cc5200;
    box-shadow: 0 12px 32px rgba(204,82,0,0.7);
    outline: none;
  }
  
  /* -------- Feature Cards Grid -------- */
  #vidhina-home-wrap .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
    gap: 2rem;
    margin-bottom: 5rem;
  }
  
  #vidhina-home-wrap .feature-card {
    background: #fafafa;
    padding: 2rem 1.6rem;
    border-radius: 1.25rem;
    box-shadow: 0 7px 22px rgba(0,0,0,0.07);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    height: 100%;
  }
  #vidhina-home-wrap .feature-card:hover {
    box-shadow: 0 22px 50px rgba(0,0,0,0.14);
    transform: translateY(-7px);
  }
  
  #vidhina-home-wrap .feature-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    fill: #ff6600;
  }
  
  #vidhina-home-wrap .feature-title {
    font-weight: 700;
    font-size: 1.15rem;
    color: #0056b3;
    margin-bottom: 0.5rem;
  }
  
  #vidhina-home-wrap .feature-desc {
    font-weight: 400;
    color: #555;
    font-size: 1rem;
    flex-grow: 1;
  }
  
  /* -------- Enhanced Search Section -------- */
  #vidhina-home-wrap .search-section {
    position: relative;
    max-width: 900px;
    margin: 0 auto 6rem;
    border-radius: 2rem;
    padding: 4rem 5rem;
    background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%);
    color: #fff;
    box-shadow:
      0 26px 70px rgba(33, 147, 176, 0.75),
      0 15px 40px rgba(109, 213, 237, 0.6);
    perspective: 1000px;
    transition: box-shadow 0.4s ease, transform 0.3s ease;
    overflow: hidden;
    user-select: none;
    will-change: transform;
  }
  #vidhina-home-wrap .search-section:hover,
  #vidhina-home-wrap .search-section:focus-within {
    box-shadow:
      0 40px 110px rgba(33, 147, 176, 0.9),
      0 25px 70px rgba(109, 213, 237, 0.75);
    transform-style: preserve-3d;
    transform: rotateX(2deg) rotateY(5deg);
    outline: none;
  }
  
  /* Blurred gradient circles for background */
  #vidhina-home-wrap .search-section::before,
  #vidhina-home-wrap .search-section::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
  }
  #vidhina-home-wrap .search-section::before {
    width: 280px;
    height: 280px;
    top: -80px;
    left: -80px;
    background: #0a74a0;
  }
  #vidhina-home-wrap .search-section::after {
    width: 200px;
    height: 200px;
    bottom: -70px;
    right: -60px;
    background: #54c3f0;
  }
  
  #vidhina-home-wrap .search-section label {
    position: relative;
    z-index: 1;
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
  }
  
  #vidhina-home-wrap .search-section input[type="search"] {
    position: relative;
    z-index: 1;
    width: 100%;
    font-size: 1.7rem;
    padding: 20px 30px;
    border-radius: 50px;
    border: none;
    background: rgba(255 255 255 / 0.17);
    box-shadow: inset 0 3px 18px rgba(255 255 255 / 0.18);
    color: #fff;
    font-weight: 600;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    outline-offset: 2px;
  }
  
  #vidhina-home-wrap .search-section input[type="search"]::placeholder {
    color: rgba(224 240 250 / 0.7);
    font-weight: 500;
  }
  
  #vidhina-home-wrap .search-section input[type="search"]:focus {
    background-color: rgba(255 255 255 / 0.32);
    box-shadow:
      inset 0 3px 22px rgba(255 255 255 / 0.5),
      0 0 15px 5px rgba(0, 131, 197, 0.8);
    color: #fff;
  }
  
  /* Responsive font scaling */
  @media (max-width: 575px) {
    #vidhina-home-wrap h1 { font-size: 2rem; }
    #vidhina-home-wrap h2 { font-size: 1.6rem; }
    #vidhina-home-wrap .search-section label { font-size: 1.75rem; }
    #vidhina-home-wrap .search-section input[type="search"] { font-size: 1.25rem; padding: 15px 20px; }
  }
  
</style>

<section id="vidhina-home-wrap" role="main" aria-label="Vidhina Journal Home">

  <!-- Top Section: Info + Image -->
  <div class="top-section">
    <div class="left-col" tabindex="0">
      <h1>Vidhina Journal</h1>
      <p>A premier multidisciplinary research platform advancing knowledge through diverse scholarly fields.</p>
      <p>Website: <a href="https://www.vidhina.com" target="_blank" rel="noopener noreferrer">www.vidhina.com</a></p>
      
      <ul class="info-list" aria-label="Journal basic info">
        <li><strong>Publication Frequency:</strong> Quarterly (Jan, Apr, Jul, Oct)</li>
        <li><strong>Subject Areas:</strong> Social sciences, natural sciences, technology, arts, humanities</li>
        <li><strong>Languages Supported:</strong> Sanskrit, Hindi, Bangla, Bhojpuri, Telugu, English</li>
        <li><strong>Open Access:</strong> Fully free and accessible worldwide</li>
        <li><strong>ISSN:</strong> 1234-5678</li>
      </ul>
      
      <button class="btn-pill" onclick="window.location.href='call-for-papers.html'">Call for Papers</button>
    </div>
    <div class="right-col" aria-hidden="true">
      <img src="https://images.unsplash.com/photo-1503676260728-1c00da094a0b?auto=format&fit=crop&w=600&q=80" alt="Academic journal cover with books and papers" loading="lazy" />
    </div>
  </div>

  <!-- Feature Cards Grid -->
  <section class="features-grid" aria-label="Key Journal features" tabindex="0">
    <article class="feature-card" role="article">
      <svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-hidden="true" focusable="false">
        <circle cx="32" cy="32" r="30" fill="#ff6600" />
        <text x="32" y="38" font-size="20" text-anchor="middle" fill="#fff" font-family="Arial, sans-serif">PR</text>
      </svg>
      <h3 class="feature-title">Peer-Reviewed Integrity</h3>
      <p class="feature-desc">Double-blind peer reviews ensuring academic rigor and fairness.</p>
    </article>

    <article class="feature-card" role="article">
      <svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-hidden="true" focusable="false">
        <rect width="64" height="64" rx="12" ry="12" fill="#ff6600"/>
        <text x="32" y="38" font-size="16" text-anchor="middle" fill="#fff" font-family="Arial, sans-serif">ET</text>
      </svg>
      <h3 class="feature-title">Expert Editorial Team</h3>
      <p class="feature-desc">Experienced scholars delivering insightful reviews and guidance.</p>
    </article>

    <article class="feature-card" role="article">
      <svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-hidden="true" focusable="false">
        <circle cx="32" cy="32" r="30" fill="#ff6600" />
        <path fill="#fff" d="M22 32h20v4H22z" />
        <path fill="#fff" d="M32 22v20h4V22z" />
      </svg>
      <h3 class="feature-title">Google & SEO Optimized</h3>
      <p class="feature-desc">Maximized discoverability for your research worldwide.</p>
    </article>

    <article class="feature-card" role="article">
      <svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-hidden="true" focusable="false">
        <polygon fill="#ff6600" points="32 4 60 28 32 52 4 28" />
        <circle cx="32" cy="28" r="8" fill="#fff"/>
      </svg>
      <h3 class="feature-title">Effective & Efficient</h3>
      <p class="feature-desc">Streamlined review and publication with fast turnarounds.</p>
    </article>

    <article class="feature-card" role="article">
      <svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-hidden="true" focusable="false">
        <rect width="64" height="64" rx="10" ry="10" fill="#ff6600"/>
        <circle cx="32" cy="32" r="16" fill="#fff"/>
        <line x1="32" y1="12" x2="32" y2="52" stroke="#ff6600" stroke-width="4"/>
      </svg>
      <h3 class="feature-title">Multidisciplinary Scope</h3>
      <p class="feature-desc">Bridging diverse fields for innovative and collaborative research.</p>
    </article>
  </section>

  <!-- Enhanced Search Section -->
  <section class="search-section" role="search" aria-label="Search for academic papers or authors" tabindex="0">
    <label for="searchBigInput">Search for Academic Papers or Authors</label>
    <input id="searchBigInput" type="search" placeholder="Type paper title, author name, keyword…" aria-describedby="searchHelpLarge" />
    <small id="searchHelpLarge" style="color: rgba(255 255 255 / 0.7); font-weight: 500; margin-top: 0.8rem; display: block;">
      Use keywords, author names, or article titles to find research fast.
    </small>
  </section>
</section>


change this into coolest and creative 

in blue and orange color combination