:root{
  --green:#002d05;
  --black:#000000;
  --white:#ffffff;
  --muted:#d7d7d7;
  --ink:#eaeaea;
  --maxw:1200px;
  --radius:14px;
  --gap:24px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--black);
  color: var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* Header */
.header{
  position:sticky;top:0;z-index:50;
  background:rgba(0,0,0,0.9);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--white)}
.logo{
  width:40px;height:40px;border-radius:10px;background:var(--green);
  display:grid;place-items:center;font-weight:800;letter-spacing:0.5px;
}
.brand-text{display:flex;flex-direction:column}
.brand-text h1{font-size:16px;line-height:1;margin:0}
.brand-text span{font-size:12px;color:var(--muted)}
.nav{display:flex;align-items:center;gap:18px}
.nav a{
  color:var(--ink);text-decoration:none;font-weight:600;font-size:14px;letter-spacing:0.3px;
  padding:8px 10px;border-radius:10px;
}
.nav a:hover{background:rgba(255,255,255,0.06);color:var(--white)}
.nav a.active{background:var(--green);color:var(--white)}
.menu-btn{display:none;border:1px solid rgba(255,255,255,0.2);padding:8px 10px;border-radius:10px;color:var(--white);background:transparent}

/* Hero */
.hero{
  background:
    linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
    linear-gradient(120deg, var(--black) 0%, #031307 60%);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.hero .container{display:grid;grid-template-columns:1.2fr 0.8fr;gap:32px;align-items:center;padding:64px 20px}
.hero h2{font-size:55px;line-height:1.1;margin:0 0 14px}
.hero p{color:var(--ink);margin:0 0 20px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-block;padding:12px 18px;border-radius:12px;text-decoration:none;
  font-weight:700;letter-spacing:0.3px;border:1px solid transparent;
}
.shake {background:var(--white);color:var(--green);animation-delay: 0.5s;
  animation: shake 0.3s linear 0s 4;display:inline-block;padding:12px 18px;
  border-radius:12px;text-decoration:none;font-weight:700;letter-spacing:0.3px;
  border:1px solid transparent;}
@keyframes shake {0% { transform: translate(0); }
  25% { transform: translate(2px, -2px); }
  50% { transform: translate(-2px, 2px); }
  75% { transform: translate(2px, 2px); }
  100% { transform: translate(0); }
}
.btn.primary{background:var(--green);color:var(--white)}
.btn.primary:hover{filter:brightness(0.95)}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,0.25);color:var(--white)}
.btn.ghost:hover{background:rgba(255,255,255,0.06)}
.hero-media{
  height:360px;border-radius:16px;overflow:hidden;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 10px, rgba(255,255,255,0.02) 10px 20px);
  display:grid;place-items:center;color:var(--muted);text-align:center;padding:18px;
  border:2px dashed rgba(255,255,255,0.07);
}

/* === Our Mission Section === */
.mission {background: #0b0b0b;color: var(--white);padding: 120px 0;border-top: 1px solid rgba(255,255,255,0.05);border-bottom: 1px solid rgba(255,255,255,0.05);} 
.mission-container {max-width: 1100px;margin: 0 auto;padding: 0 40px;display:block;} 
.mission-content {text-align: left;} 
.mission-content h3 {font-family: "Oswald", sans-serif;font-size: 54px;text-transform: uppercase;letter-spacing: 3px;margin-bottom: 30px;text-align: center;} 
.mission-content p {font-size: 18px;line-height: 1.8;color: #d4d4d4;margin-bottom: 24px;} 
.mission {background: #0b0b0b;color: #fff;padding: 120px 0; border-top: 1px solid rgba(255,255,255,0.05);border-bottom: 1px solid rgba(255,255,255,0.05);}
.mission-container {max-width: 1300px;margin: 0 auto;padding: 0 40px;} 
.mission-content {text-align: left;} .mission-content h3 {font-family: "Oswald", sans-serif;font-size: 54px;text-transform: uppercase;letter-spacing: 3px;margin-bottom: 40px;text-align: center;}
.mission-images {display: flex;justify-content: center;align-items: center;gap: 25px;margin-bottom: 40px;flex-wrap: wrap;} 
.mission-images img {width: 48%;aspect-ratio: 16 / 9;object-fit: cover;box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);transition: transform 0.4s ease, box-shadow 0.4s ease;} 
.mission-images img:hover {transform: scale(1.03);box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);} 
.mission-content p {font-size: 18px;line-height: 1.8;color: #d4d4d4;margin-bottom: 24px;flex:1;padding:40px;color:var(--ink);line-height:1.6}
.mission-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin: 60px 0; 
}

.mission-row.reverse {flex-direction: row-reverse;}
.mission-row img {width: 48%;border-radius: 10px;object-fit: cover;box-shadow: var(--shadow);}

.mission-row p {
  width: 48%;
  color: #d4d4d4;
  font-size: 18px;
  line-height: 1.7;
}

/* Mobile optimization */
@media (max-width: 900px) {
  .mission-row,
  .mission-row.reverse {
    flex-direction: column;
  }

  .mission-row img,
  .mission-row p {
    width: 100%;
  }
}

/* Stats */
.stats{background:var(--green);border-top:1px solid rgba(255,255,255,0.12);border-bottom:1px solid rgba(255,255,255,0.12);}
.stats .container{display:flex;gap:18px;padding:26px 20px;justify-content:center;flex-wrap:wrap;}
.stat{flex:0 1 220px;text-align:center;padding:12px;border-radius:12px;background:rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.1);}
.stat .num{font-size:28px;font-weight:800}
.stat .label{font-size:13px;color:#daf0df}

/* Sections */
.section{padding:56px 0}
.section header{margin-bottom:16px}
.section header h3{margin:0;font-size:28px}
.section header p{margin:6px 0 0;color:var(--muted)}

/* Cards & grids */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-2{gap:24px}
.card{
  background:#0b0b0b;border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,0.35);
}
.card h4{margin:10px 0 6px}
.card p{margin:0;color:var(--ink);font-size:14px}
.thumb{
  height:160px;border-radius:10px;margin-bottom:12px;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 14px, rgba(255,255,255,0.03) 14px 28px);
  border:2px dashed rgba(255,255,255,0.06);
  display:grid;place-items:center;color:var(--muted);
}

/* Features */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature{background:#111;border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:16px}
.feature h5{margin:0 0 6px}
.feature p{margin:0;color:(var--ink);font-size:14px}

/* Testimonials */
.testimonial-container{max-width:var(--maxw);margin:0 auto;padding:0 40px;text-align: center;}
.testimonials{background:#0f0f0f;border-top:1px solid rgba(255,255,255,0.06);border-bottom:1px solid rgba(255,255,255,0.06)}
.quote{background:#101010;border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:16px}
.quote p{margin:0 0 8px}
.quote .who{font-size:14px;color:var(--muted)}

/* Contact form */
.form label{display:block;font-size:13px;color:var(--ink);margin-bottom:6px}
.form input,.form textarea{
  width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.08);
  background:transparent;color:var(--white);margin-bottom:12px;font-size:15px;
}
.form input::placeholder,.form textarea::placeholder{color:#bdbdbd}
.form button{width:100%}

/* Footer */
.footer{background:#0d0d0d;border-top:1px solid rgba(255,255,255,0.06);padding:24px 0}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:18px}
.footer a{color:var(--ink);text-decoration:none}
.footer a:hover{color:var(--white)}
.copy{
  margin-top:12px;color:var(--muted);font-size:13px;
  border-top:1px solid rgba(255,255,255,0.06);padding-top:12px;
}

/* Utilities & Effects */
.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent);margin:24px 0;border-radius:2px}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.reveal.show{opacity:1;transform:none}

/* Page Banner (Oswald) */
.page-banner{
  font-family:"Oswald","Arial Black",sans-serif;
  font-size:90px;font-weight:900;text-transform:uppercase;letter-spacing:10px;color:var(--white);
  background:linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0.7)), var(--green);
  text-align:center;padding:120px 20px;border-bottom:1px solid rgba(255,255,255,0.08);
  background-attachment:fixed;
}

/* Service Section (alternating rows) */
.service-box{
  display:flex;align-items:center;justify-content:space-between;margin:60px 0;
  background:#0b0b0b;border:1px solid rgba(255,255,255,0.08);border-radius:14px;overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
}
.service-box.reverse{flex-direction:row-reverse}
.service-image{flex:1;height:350px;min-width:40%;background-size:cover;background-position:center}
.service-text{flex:1;padding:40px}
.service-text h4{font-size:26px;margin-bottom:12px;color:var(--white)}
.service-text p{color:var(--ink);line-height:1.6}


/* Who Trusts Us */
.trusted{
  background:#0b0b0b;color:var(--white);padding:100px 0;
  border-top:1px solid rgba(255,255,255,0.05);border-bottom:1px solid rgba(255,255,255,0.05);
}
.trusted-container{
  display:flex;align-items:center;justify-content:space-between;gap:80px;
  max-width:1200px;margin:0 auto;padding:0 40px;
}
.trusted-left{flex:1}
.trusted-left h3{
  font-family:"Oswald",sans-serif;font-size:54px;letter-spacing:4px;margin-bottom:20px;text-transform:uppercase;
}
.trusted-left p{font-size:18px;line-height:1.7;color:#cccccc;max-width:550px}
.trusted-logos{display:flex;align-items:center;gap:40px;margin-top:40px;flex-wrap:wrap}
.trusted-logos img{
  height:70px;filter:brightness(0.9) contrast(1.2);opacity:0.85;transition:all .4s ease;
}
.trusted-logos img:hover{opacity:1;transform:scale(1.05);filter:brightness(1.1)}
.trusted-right{flex:1;display:flex;justify-content:center}
.trusted-right img{width:100%;max-width:500px;border-radius:14px;object-fit:cover;box-shadow:0 10px 25px rgba(0,0,0,0.4);}
.trusted{background: #0b0b0b;color: #fff;padding: 140px 0; border-top: 1px solid rgba(255,255,255,0.05);border-bottom: 1px solid rgba(255,255,255,0.05);}
.trusted-container {display: flex;
align-items: center;
justify-content: space-between;
gap: 80px; /* Slightly more breathing space */
max-width: 1200px;
margin: 0 auto;
padding: 0 40px;}

.trusted-left {flex: 1;display: flex;flex-direction: column;justify-content: center;}
.trusted-left h3 {font-family: "Oswald", sans-serif;font-size: 56px;letter-spacing: 4px;margin-bottom: 24px;text-transform: uppercase;}
.trusted-left p {font-size: 18px;line-height: 1.8;color: #cccccc;margin-bottom: 50px;max-width: 550px;}
.trusted-logos {display: flex;align-items: center;flex-wrap: wrap;gap: 40px;}
.trusted-logos img {height: 80px;width: auto;object-fit: contain;opacity: 0.9;transition: transform 0.4s ease, opacity 0.4s ease;}
.trusted-logos img:hover {transform: scale(1.05);opacity: 1;}
.trusted-right {flex: 1;display: flex;justify-content: center;}
.trusted-right img {width: 100%;max-width: 540px;border-radius: 14px;object-fit: cover;box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);}

/* Responsive */
@media (max-width:980px){
  .hero .container{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .footer .cols{grid-template-columns:1fr 1fr}
  .features{grid-template-columns:1fr 1fr}
  .menu-btn{display:inline-block}
  .nav{
    display:none;position:absolute;left:0;right:0;top:56px;background:#0c0c0c;
    padding:12px 20px;border-bottom:1px solid rgba(255,255,255,0.06)
  }
  .nav.open{display:flex;flex-direction:column}
}
@media (max-width:950px){
  .trusted-container{flex-direction:column;text-align:center;gap:40px}
  .trusted-left p{max-width:100%}
  .trusted-right img{max-width:100%}
  .trusted-logos{justify-content:center}
}
@media (max-width:900px){
  .service-box,.service-box.reverse{flex-direction:column}
  .service-image{height:280px;width:100%}
  .service-text{padding:20px}
}
@media (max-width:600px){
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
}
@media (max-width: 950px) {
  .trusted {padding: 100px 0; }
  .trusted-container {flex-direction: column;text-align: center;gap: 50px;}
  .trusted-right img {max-width: 100%;}
  .trusted-logos {justify-content: center;}
}
@media (max-width: 900px) {
  .mission {padding: 90px 0;}
  .mission-content h3 {font-size: 42px;}
  .mission-content p {font-size: 17px;}
}
@media (max-width: 900px) {
  .mission {padding: 90px 0;}
  .mission-content h3 {font-size: 42px;}
  .mission-images {flex-direction: column;}
  .mission-images img {width: 100%;}
}
@media (max-width: 800px) {
  .mission-images {flex-direction: column; flex-wrap: wrap;}
  .mission-images img,
  .mission-images p {width: 100%;flex: none;}
}

/* Mobile optimization */
@media (max-width: 900px) {
  .mission-row,
  .mission-row.reverse {
    flex-direction: column;
  }

  .mission-row img,
  .mission-row p {
    width: 100%;
  }
}