:root{
    --jru-blue: #003366;
    --jru-gold: #ffd700;
    --light-gray: #f7fafc;
    --dark-gray: #2d3748;
    --light-blue: #98b7d3;
    --white: #ffffff;
    --container-w: 1100px;
    --header-h: 72px;
  }

  *{box-sizing: border-box}
  html,body{height:100%; margin:0; font-family:'Poppins',sans-serif; color:var(--dark-gray);}

  /* Background with gradient + abstract waves */

  body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url("jrubg.jpg");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    pointer-events: none;
    z-index: -1;
    opacity: 0.8;
  }
  body::after {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(126, 126, 126, 0.4); /* Black with 60% opacity */
    pointer-events: none;
    z-index: -1;
  }
  a{color:inherit}

  /* Header */
  header {
    background-color: var(--jru-blue);
    color: var(--white);
    padding: 20px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }

  .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .logo {
    display: flex;
    align-items: center;
  }

  .logo-text h2 {
    font-size: 24px;
    line-height: 1.2;
    margin: 0;
  }

  .logo-text span {
    color: var(--jru-gold);
  }

  .logo-text p {
    font-size: 14px;
    opacity: 0.9;
    margin: 0;
  }

  .nav-links {
    display: flex;
    gap: 25px;
  }

  .nav-links a {
    color: var(--white);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
  }

  .nav-links a:hover {
    color: var(--jru-gold);
  }

  /* Button Styles */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
  }

  .btn-primary {
    background: var(--jru-gold);
    color: var(--dark-gray);
  }

  .btn-primary:hover {
    background: var(--jru-blue);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.3);
  }

  .btn-outline {
    color: var(--jru-blue);
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid var(--jru-blue);
  }

  .btn-outline:hover {
    background: var(--jru-blue);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.3);
  }

  main{padding-top:20px;}
  .container{max-width:var(--container-w); margin:0 auto; padding:0 24px}

  /* HERO */
  .hero{display:grid; grid-template-columns:1fr 480px; gap:40px; align-items:center; margin:36px auto 48px;}
  .hero-left{max-width:680px}
  .kicker{display:inline-block; background:rgba(0,51,102,0.06); color:var(--jru-blue); padding:6px 10px; border-radius:8px; font-weight:600; font-size:15px; margin-bottom:14px}
  .hero-left h1{font-size:42px; margin:8px 0 18px; color:var(--jru-blue); line-height:1.05}
  .hero-left p{color:#ffffff; font-size:17px; line-height:1.6; margin-bottom:24px}
  .cta-row{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top: 20px;}
  .secondary-note{font-size:13px; color:#5b5e63; margin-left:8px}

  /* Remove image card border */
  .image-card {
    background: none;
    padding: 0;
    box-shadow: none;
  }
  .image-card img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    filter: drop-shadow(0px 8px 16px rgba(0,0,0,0.08));
  }

  /* Features */
  .features{margin:10px auto 80px; padding:0 0 40px}
  .features-inner{max-width:var(--container-w); margin:0 auto; padding:0 24px}
  .features-title{text-align:center; margin-bottom:28px; color:var(--jru-blue); font-weight:700; font-size:28px}
  .feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
  .feature-card{background:var(--white); border-radius:12px; padding:22px; box-shadow:0 6px 18px rgba(2,12,30,0.04); display:flex; flex-direction:column; gap:12px; min-height:150px}
  .feature-icon{font-size:24px; color:var(--jru-blue)}
  .feature-card h3{margin:0; color:var(--jru-blue); font-size:16px}
  .feature-card p{margin:0; color:#545b63; font-size:14px; line-height:1.5; margin-top:auto}
  .feature-header{display:flex; align-items:center; gap:12px}

  footer.site-foot{padding:34px 0; text-align:center; color:#6b7280; font-size:14px; border-top:1px solid rgba(0,0,0,0.04)}

  @media (max-width:1100px){ 
    .hero{grid-template-columns:1fr 420px} 
    .header-container{padding: 0 16px;}
  }
  @media (max-width:900px){
    .hero{grid-template-columns:1fr; text-align:center}
    .image-card{order:2; width:80%; margin:18px auto 0}
    .feature-grid{grid-template-columns:repeat(2,1fr)}
    .header-container{flex-direction: column; gap: 15px; text-align: center;}
    .logo-text h2{font-size: 20px;}
    .logo-text p{font-size: 12px;}
    .cta-row{justify-content: center; gap: 12px;}
    .btn{padding: 10px 16px; font-size: 14px;}
  }
  @media (max-width:600px){
    .feature-grid{grid-template-columns:1fr}
    .header-container{padding: 0 12px;}
    .nav-links{gap: 15px;}
    .cta-row{flex-direction: column; align-items: center;}
    .btn{width: 100%; max-width: 280px; justify-content: center;}
  }