:root { --od-green:#6f7a52; --bg:#0a0a0a; --white:#fff; --fb-blue:#1877f2; }
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--white);font-family:Arial, sans-serif;scroll-behavior:smooth}
.header{position:fixed;top:0;left:0;right:0;background:rgba(0,0,0,.85);border-bottom:1px solid #1a1a1a;display:flex;align-items:center;justify-content:space-between;padding:10px 30px;z-index:1000}
.logo{height:86px;animation:logoPulse 3.5s infinite ease-in-out}
@keyframes logoPulse{0%,100%{filter:drop-shadow(0 0 4px rgba(111,122,82,.3));transform:scale(1)}50%{filter:drop-shadow(0 0 8px rgba(111,122,82,.6));transform:scale(1.02)}}
.nav a{color:#e6e6e6;text-decoration:none;margin:0 12px;font-weight:bold;transition:.3s}
.nav a:hover{color:var(--od-green)}
.fb-icon{width:34px;height:34px;display:inline-block;margin-left:10px;animation:fbPulse 3.5s infinite ease-in-out;transition:transform .3s}
.fb-icon:hover{transform:scale(1.1);filter:drop-shadow(0 0 10px var(--fb-blue))}
@keyframes fbPulse{0%,100%{filter:drop-shadow(0 0 4px rgba(24,119,242,.3));transform:scale(1)}50%{filter:drop-shadow(0 0 8px rgba(24,119,242,.7));transform:scale(1.03)}}
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;text-align:center;overflow:hidden;background-size:cover;background-position:center;animation:heroZoom 22s ease-in-out infinite alternate}
.hero::before{content:'';position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.85),rgba(0,0,0,.6));z-index:1}
.hero::after{content:'';position:absolute;inset:0;background:radial-gradient(transparent 60%, rgba(0,0,0,.8) 100%);z-index:2}
.hero .content{position:relative;z-index:3;max-width:900px;padding:20px;animation:fadeIn 2s ease forwards}
.hero h1{font-family:'Stardos Stencil','Arial Black',sans-serif;font-size:56px;color:var(--od-green);letter-spacing:2px;text-transform:uppercase;margin-bottom:12px}
.tagline{font-size:22px;color:#ccc;letter-spacing:1px;margin-bottom:10px;animation:taglinePulse 3.5s infinite ease-in-out}
.divider{width:120px;height:3px;background:var(--od-green);margin:14px auto;opacity:.85;border-radius:3px;animation:dividerGlow 3.5s infinite ease-in-out}
.intro-line{font-size:18px;color:#ddd;line-height:1.7;margin-bottom:24px}
.focus{color:var(--od-green);font-weight:bold;letter-spacing:.5px}
.hero .btn{display:inline-block;background:var(--od-green);color:#000;padding:12px 26px;border-radius:10px;font-weight:700;text-decoration:none;transition:.3s}
.hero .btn:hover{background:#8ea277;transform:scale(1.05)}
@keyframes heroZoom{from{background-size:100%}to{background-size:107%}}
@keyframes fadeIn{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}
@keyframes taglinePulse{0%,100%{text-shadow:0 0 4px rgba(111,122,82,.3)}50%{text-shadow:0 0 10px rgba(111,122,82,.7)}}
@keyframes dividerGlow{0%,100%{box-shadow:0 0 6px rgba(111,122,82,.3)}50%{box-shadow:0 0 12px rgba(111,122,82,.7)}}
.section{padding:100px 40px}
.section.dark{background:#0d0d0d}
.section h2{font-family:'Stardos Stencil','Arial Black',sans-serif;font-size:36px;color:var(--od-green);text-transform:uppercase;text-align:center;margin-bottom:28px}
.intro-wrap{display:flex;gap:40px;align-items:flex-start;justify-content:center;flex-wrap:wrap}
.intro-text{flex:1.6;min-width:320px;max-width:900px;font-size:19.5px;line-height:1.85;color:#ddd}
.intro-text p + p{margin-top:14px}
.intro-images{flex:.8;min-width:260px;display:flex;flex-direction:column;gap:16px}
.intro-images img{width:100%;max-height:200px;object-fit:cover;border:1px solid #333;border-radius:10px;transition:transform .3s}
.intro-images img:hover{transform:scale(1.03)}
.intro-reveal .intro-text,.intro-reveal .intro-images{opacity:0;transform:translateY(40px);transition:opacity 1s ease-out, transform 1s ease-out}
.intro-reveal.visible .intro-text,.intro-reveal.visible .intro-images{opacity:1;transform:translateY(0)}
.programs{background:#080808;padding:80px 40px;text-align:center}
.program-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;max-width:1100px;margin:0 auto}
.program{border:1px solid #333;border-radius:10px;padding:24px;background:rgba(0,0,0,.6);opacity:0;transform:translateY(40px);transition:transform .3s,border-color .3s,opacity 1s ease-out}
.program.visible{opacity:1;transform:translateY(0)}
.program h3{color:var(--od-green);margin-bottom:10px}
.program p{color:#ccc}
.page-hero{min-height:60vh}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.gallery-grid a{display:block;border:1px solid #333;border-radius:10px;overflow:hidden;background:#000}
.gallery-grid img{width:100%;height:220px;object-fit:cover;transition:transform .25s;opacity:.92}
.gallery-grid a:hover img{transform:scale(1.04)}
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
.contact-card{background:rgba(0,0,0,.55);border:1px solid #333;border-radius:12px;padding:22px}
.contact-card h3{color:var(--od-green);margin-bottom:10px}
.contact-card p,.contact-card a{color:#ddd;line-height:1.7}
.contact-card a{text-decoration:none}
.contact-card a:hover{color:var(--od-green)}
form .field{margin-bottom:14px}
label{display:block;margin-bottom:6px;color:#ccc;font-weight:700;letter-spacing:.3px}
input,select,textarea{width:100%;padding:12px;background:#0f0f0f;color:#eee;border:1px solid #333;border-radius:8px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--od-green)}
textarea{min-height:140px;resize:vertical}
.helper{font-size:12px;color:#999;margin-top:4px}
button[type="submit"]{background:var(--od-green);color:#000;border:none;padding:12px 20px;border-radius:10px;font-weight:800;cursor:pointer;transition:.25s}
button[type="submit"]:hover{background:#8ea277;transform:translateY(-1px)}
#backToTop{position:fixed;bottom:24px;right:24px;width:48px;height:48px;border-radius:50%;background:var(--od-green);color:#000;font-size:22px;font-weight:800;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s, transform .4s;z-index:999;box-shadow:0 0 10px rgba(111,122,82,.5);animation:pulseTop 3.5s infinite ease-in-out}
#backToTop.visible{opacity:1;pointer-events:all}
@keyframes pulseTop{0%,100%{transform:scale(1);box-shadow:0 0 10px rgba(111,122,82,.4)}50%{transform:scale(1.05);box-shadow:0 0 14px rgba(111,122,82,.7)}}
.footer{background:rgba(0,0,0,.9);color:#bbb;text-align:center;padding:20px;border-top:1px solid #222;margin-top:60px}
.footer img{height:50px;display:block;margin:0 auto 10px}
@media (max-width:980px){.contact-wrap{grid-template-columns:1fr}}

/* === Home page refinements (added manually) === */
.intro-wrap {
  display: flex;
  gap: 60px;                 /* more space between text and images */
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}

.intro-text {
  flex: 1.6;
  min-width: 320px;
  max-width: 900px;
  font-size: 19.5px;
  line-height: 1.85;
  color: #ddd;
}

.intro-text p {
  text-align: justify;       /* justify paragraphs */
}

.intro-text p + p {
  margin-top: 14px;
}

.intro-images {
  flex: 0.8;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.intro-images img {
  width: 95%;                /* slightly smaller */
  max-height: 180px;         /* shorter */
  object-fit: cover;
  border: 1px solid #333;
  border-radius: 10px;
  transition: transform .3s;
  align-self: center;
}

.intro-images img:hover {
  transform: scale(1.03);
}

/* Add space between the “Our Core Programs” heading and boxes */
.programs h2 {
  margin-bottom: 32px;
}