/*
Theme Name: D2R2P
Theme URI: 
Author: 
Author URI: 
Description: A multi-omics biotechnology WordPress theme converted from a static site.
Version: 1.0
License: 
Text Domain: d2r2p
*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #1a1a2e;
    line-height: 1.6;

  }
  a { text-decoration: none; color: inherit; }
  img { max-width: 100%; height: auto; display: block; }
  .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

  .top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(13, 43, 78, 0.85);
    color: #fff;
    height: 100px;
    min-height: 100px;
    max-height: 100px;
    display: flex;
    align-items: center;
    overflow: hidden;
    z-index: 1000;
  }
  .top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 12px;
  }

  nav ul {
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
  }
  nav li {
    margin: 0;
  }
  nav a {
    padding: 10px 20px;
    font-size: 20px;
    font-weight: 600;
    border-radius: 4px;
    transition: background 0.25s, color 0.25s;
    white-space: nowrap;
    flex-shrink: 0;
  }
  nav a:hover {
	background:#0d2b4e;
  }
  nav a.active,
  nav .current-menu-item a,
  nav .current_page_item a {
    color: #7bc9ff;
  }

  .banner {
    position: relative;
    height: 800px;
    overflow: hidden;
    background: url('images/banner.jpg') center/cover no-repeat;
  }
  .banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(13,43,78,0.1) 0%, rgba(13,43,78,0.0) 100%);
    display: flex;
    align-items: center;
  }
  .banner-overlay h1 {
    color: #000;
    font-size: 42px;
    font-weight: bold;
    letter-spacing: 1px;
    max-width: 100%;
    line-height: 1.3;
  }
  .banner-overlay h1 strong {
    font-weight: 600;
    color: #000;
  }

  section { padding: 70px 0; }
  section:nth-child(even) { background: #f6faff; }

  .section-title {
    font-size: 32px;
    font-weight: 600;
    color: #0d2b4e;
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
  }
  .section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 50px;
    height: 3px;
    background: #1e7bb8;
    border-radius: 2px;
  }
  .section-title-center { text-align: center; display: block; }
  .section-title-center::after { left: 50%; transform: translateX(-50%); }
  .section-title-no-underline::after { display: none; }

  .content-row {
    display: flex;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
  }
  .content-row.reverse { flex-direction: row-reverse; }
  .content-row .text { flex: 1 1 45%; min-width: 280px; }
  .content-row .image { flex: 1 1 45%; min-width: 280px; }
  .content-row .image img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(13,43,78,0.12);
  }
  .content-row .text p {
    font-size: 16px;
    color: #444;
    margin-bottom: 16px;
  }
  .content-row .text p:last-child { margin-bottom: 0; }

  .feature-list {
    list-style: none;
    margin-top: 16px;
  }
  .feature-list li {
    padding: 6px 0 6px 24px;
    position: relative;
    font-size: 15px;
    color: #333;
  }
  .feature-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #1e7bb8;
  }

  footer {
    background: #0d2b4e;
    color: #ccc;
    padding: 40px 0 24px;
    font-size: 14px;
  }
  footer .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
  }
  footer .col { flex: 1 1 200px; }
  footer h4 {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
  }
  footer p, footer a { color: #b0c4d9; line-height: 2; }
  footer a:hover { color: #7bc9ff; }
  .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 30px;
    padding-top: 20px;
    text-align: center;
    color: #7a93ad;
    font-size: 13px;
  }

  @media (max-width: 768px) {
    nav ul {
      gap: 6px;
    }
    nav a {
      padding: 8px 14px;
      font-size: 14px;
    }
    .banner { height: 280px; }
    .banner-overlay h1 { font-size: 26px; }
    section { padding: 44px 0; }
    .content-row { gap: 30px; }
    .section-title { font-size: 26px; }
  }

  /* Hamburger button - hidden on desktop */
  .hamburger {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    padding: 6px 10px;
    line-height: 1;
    z-index: 1001;
    position: relative;
  }

  /* Drawer overlay backdrop */
  .nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .nav-overlay.show {
    display: block;
    opacity: 1;
  }

  @media (max-width: 768px) {
    .hamburger {
      display: block;
    }

    nav ul {
      position: fixed;
      top: 80px;
      right: 0;
      width: 280px;
      height: calc(100vh - 80px);
      background: #0d2b4e;
      flex-direction: column;
      padding: 24px 20px;
      gap: 4px;
      transform: translateX(100%);
      transition: transform 0.3s ease;
      z-index: 999;
      box-shadow: -4px 0 20px rgba(0,0,0,0.3);
    }

    nav.open ul {
      transform: translateX(0);
    }

    nav a {
      padding: 14px 16px;
      font-size: 20px;
      width: 100%;
      border-radius: 6px;
    }
  }

  .banner2 {
    position: relative;
    height: 800px;
    overflow: hidden;
    background: url('images/about.jpg') center/cover no-repeat;
  }

   .contact-form-wrap {
    max-width: 720px;
    margin: 0 auto;
  }
  .form-group {
    margin-bottom: 24px;
  }
  .form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #0d2b4e;
    margin-bottom: 6px;
  }
  .form-group label .required {
    color: #d43;
  }
  .form-group input,
  .form-group textarea {
    width: 100%;
    padding: 14px 16px;
    font-size: 16px;
    font-family: inherit;
    color: #1a1a2e;
    border: 1px solid #d0d8e0;
    border-radius: 6px;
    background: #fff;
    transition: border-color 0.25s, box-shadow 0.25s;
    outline: none;
  }
  .form-group input:focus,
  .form-group textarea:focus {
    border-color: #1e7bb8;
    box-shadow: 0 0 0 3px rgba(30,123,184,0.12);
  }
  .form-group input.error,
  .form-group textarea.error {
    border-color: #d43;
    box-shadow: 0 0 0 3px rgba(221,68,51,0.10);
  }
  .form-group .error-msg {
    font-size: 13px;
    color: #d43;
    margin-top: 4px;
    display: none;
  }
  .form-group .error-msg.show {
    display: block;
  }
  .form-group textarea {
    resize: vertical;
    min-height: 140px;
  }
  .submit-btn {
    display: inline-block;
    padding: 14px 48px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: #0d2b4e;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.25s;
  }
  .submit-btn:hover {
    background: #1e7bb8;
  }
  .form-success {
    display: none;
    padding: 20px;
    background: #e8f7e8;
    color: #2a6;
    border-radius: 6px;
    font-size: 16px;
    text-align: center;
    margin-top: 20px;
  }
  .form-success.show {
    display: block;
  }

  @media (max-width: 768px) {
    .contact-form-wrap {
      max-width: 100%;
    }
    .submit-btn {
      width: 100%;
    }
  }