:root{
      --blue-700: #007acc;
      --blue-500: #00bfff;
      --bg: #eef8ff;
      --card: #ffffff;
      --muted:#6b7280;
      --accent:#005b99;
      --radius:14px;
      --white:#ffffff;
      --card-shadow: 0 12px 40px rgba(11,87,183,0.08);
      --container:1150px;

      --sky:#7ec8ff; /* sky blue */
      --blue:#0b57b7; /* deep blue */
      --gold:#d4af37;

    }

    *{box-sizing:border-box}
    html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
    body{background:var(--bg);color:#0b2540;line-height:1.5;-webkit-font-smoothing:antialiased;}
    a{color:var(--blue-700);text-decoration:none}
    img{max-width:100%;display:block}

  .section-title { text-align: center; margin-bottom: 40px; font-family: 'Playfair Display', serif; color: var(--blue); font-size: 30px; }

    /* background picture */
    .hero1 {
      background: linear-gradient(rgba(11,61,145,0.6), rgba(11,61,145,0.6)), url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=1600&q=80');
      background-size: cover; background-position: center;
      color: var(--white); text-align: center;
      padding: 100px 20px;
      animation: fadeIn 1.2s ease-in;
    }

    .hero1 h1 { font-family: 'Playfair Display', serif; font-size: 48px; margin-bottom: 10px; }
    .hero1 p { max-width: 700px; margin: 0 auto 20px; }

    .hero1 .buttons { display: flex; justify-content: center; gap: 12px; }
    .hero1 a { background: var(--gold); color: var(--white); padding: 10px 20px; border-radius: 6px; font-weight: 600; }

    /* About us*/
    .about-content { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: center; }
    .about-content img { width: 400px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
    .about-text { max-width: 500px; }

    /* Recent Sermons */
    .sermon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
    .sermon-card { background: var(--white); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.05); transition: transform 0.3s; }
    .sermon-card:hover { transform: translateY(-5px); }
    .sermon-card img { width: 100%; height: 180px; object-fit: cover; }
    .sermon-card div { padding: 16px; }

    /* join us in */
    .event-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
    .event { background: var(--white); border-radius: 12px; padding: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }


    /* Top bar */
    .topbar{background:linear-gradient(90deg,var(--blue-700),var(--blue-500));color:#fff;padding:8px 18px;font-size:14px;display:flex;justify-content:space-between;align-items:center}
    .topbar .contacts{display:flex;gap:18px;align-items:center}
    .topbar a{color:rgba(255,255,255,0.95)}
    .container{max-width:1200px;margin:0 auto;padding:0 18px}

    /* Header / nav */
    header.site-header{background:transparent;padding:18px 0;position:sticky;top:0;z-index:50}
    .nav{display:flex;align-items:center;justify-content:space-between}
    .brand{display:flex;align-items:center;gap:12px}
    .brand img{width:68px;height:68px;border-radius:12px;object-fit:cover;box-shadow:0 6px 18px rgba(0,0,0,0.12)}
    .brand h1{font-size:20px;margin:0;color:var(--accent);letter-spacing:0.2px}
    .nav-links{display:flex;gap:14px;align-items:center}
    .nav-links a{padding:10px 12px;border-radius:8px;font-weight:600;color:#053048}
    .nav-links a.cta{background:var(--blue-700);color:#fff}
    .mobile-toggle{display:none;background:#fff;border-radius:8px;padding:8px;box-shadow:0 4px 10px rgba(0,0,0,0.08)}

/* Mobile toggle button */
.mobile-toggle {
  font-size: 24px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  display: none;
}


    /* Hero */
    .hero{background:linear-gradient(180deg, rgba(0,191,255,0.12), transparent);padding:44px 0}
    .hero-grid{display:grid;grid-template-columns:1fr 420px;gap:32px;align-items:center}
    .hero-title{font-size:36px;line-height:1.05;color:var(--accent);margin:0 0 10px}
    .hero-sub{color:var(--muted);margin:0 0 20px}
    .cta-row{display:flex;gap:12px;flex-wrap:wrap}
    .btn{display:inline-block;padding:12px 18px;border-radius:10px;font-weight:700;cursor:pointer}
    .btn-primary{background:var(--blue-700);color:#fff}
    .btn-outline{background:#fff;border:2px solid var(--blue-700);color:var(--blue-700)}

    .hero-card{background:var(--card);border-radius:12px;padding:18px;box-shadow:0 8px 28px rgba(0,0,0,0.08)}
    .hero-card h4{margin:0 0 8px;color:var(--accent)}
    .hero-card p{margin:0 0 12px;color:var(--muted);font-size:14px}

    /* Sections */
    section{padding:40px 0}
    .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
    .card{background:var(--card);border-radius:12px;padding:18px;box-shadow:0 6px 18px rgba(0,0,0,0.06)}
    .small-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}

    /* Featured sermons */
    .video-thumb{height:180px;border-radius:10px;overflow:hidden;position:relative}
    .video-meta{margin-top:10px;font-size:14px;color:var(--muted)}

    /* Events list */
    .event-item{display:flex;gap:14px;align-items:flex-start}
    .event-date{min-width:80px;background:linear-gradient(180deg,var(--blue-700),var(--blue-500));color:#fff;padding:8px;border-radius:8px;text-align:center}
    .event-info h4{margin:0 0 6px}
    .event-info p{margin:0;color:var(--muted)}

    /* Newsletter */
    .newsletter{display:flex;gap:12px;align-items:center}
    .newsletter input{flex:1;padding:12px;border-radius:10px;border:1px solid #dfeef9;font-size:15px}
    .newsletter button{padding:12px 16px;border-radius:10px;border:none;background:var(--blue-700);color:#fff;font-weight:700}

    /* Give */
    .give-grid{display:grid;grid-template-columns:1fr 360px;gap:18px}
    .pill{padding:8px 12px;border-radius:999px;border:1px solid rgba(11,87,183,0.06)}

    /* Contact */
    form { display: flex; flex-direction: column; gap: 12px; max-width: 500px; margin: 0 auto; }
    input, textarea { padding: 10px; border: 1px solid #ccc; border-radius: 8px; font: inherit; }
    button { background: var(--blue); color: var(--white); border: none; padding: 10px; border-radius: 8px; cursor: pointer; transition: background 0.3s; }
    button:hover { background: var(--gold); }

    /* Footer */
    
    .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:20px}
    .socials a{display:inline-block;margin-right:8px;padding:8px;border-radius:8px;background:rgba(255,255,255,0.08);color:#fff}

    /* small screens */
    @media (max-width: 980px){
      .hero-grid{grid-template-columns:1fr;gap:20px}
      .grid{grid-template-columns:repeat(2,1fr)}
      .brand h1{font-size:18px}
      .nav-links{display:none}
      .mobile-toggle{display:block}
      .footer-grid{grid-template-columns:1fr;gap:14px}
    }
    @media (max-width:600px){
      .grid{grid-template-columns:1fr}
    }

    /* small UI helpers */
    .muted{color:var(--muted);font-size:14px}
    .kicker{font-weight:700;color:var(--blue-700);font-size:13px;margin-bottom:8px}
    .pill{display:inline-block;padding:6px 10px;border-radius:999px;background:#f0fbff;color:var(--accent);font-weight:700}

    /* Donate css */

    section.hero2 {
      padding: 100px 5%;
      max-width: 1200px;
      margin: auto;
    }

    /* ===== Section Header ===== */
    .section-head {
      text-align: center;
      margin-bottom: 40px;
    }

    .section-head h2 {
      font-size: 2.5rem;
      color: #005b99;
      margin: 0;
    }

    .section-head .muted {
      color: #64748b;
      font-size: 1rem;
      margin-top: 8px;
    }

    /* ===== Grid Layout ===== */
    .give-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
    }

    @media (max-width: 900px) {
      .give-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ===== Buttons ===== */
    button {
      cursor: pointer;
      font-family: inherit;
      font-size: 15px;
      font-weight: 600;
      border: none;
      border-radius: 30px;
      transition: all 0.3s ease;
    }

    button.pill {
      padding: 10px 20px;
      background: #e0f2ff;
      color: #0369a1;
    }

    button.pill:hover {
      background: #bae6fd;
    }

    button.cta {
      flex: 1;
      background: #007acc;
      color: #fff;
      padding: 12px;
      border-radius: 8px;
    }

    button.cta:hover {
      background: #005b99;
    }

    button.outline {
      flex: 1;
      background: transparent;
      border: 2px solid #007acc;
      color: #007acc;
      border-radius: 8px;
      padding: 12px;
    }

    button.outline:hover {
      background: #007acc;
      color: #fff;
    }

    /* ===== Form Elements ===== */
    form {
      margin-top: 12px;
    }

    label.muted-small {
      font-size: 0.9rem;
      color: #475569;
    }

    input[type="number"],
    input[type="text"],
    input[type="email"] {
      width: 100%;
      padding: 12px;
      margin-top: 8px;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      font-size: 1rem;
      box-sizing: border-box;
    }

    #payment-message {
      margin-top: 10px;
      color: green;
      font-size: 0.9rem;
    }

    /* ===== Info Cards ===== */
    .card {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    }

    .card h4 {
      color: #005b99;
      margin-top: 0;
    }

    .card ul {
      margin-top: 8px;
      padding-left: 20px;
    }

    .card ul li {
      margin-bottom: 5px;
    }

    .muted-small {
      color: #64748b;
      font-size: 0.9rem;
    }