:root{
      --bg:#0b2f1a;
      --card:#0f3f28;
      --accent:#a7d129;
      --muted:#cfead0;
      --glass: rgba(255,255,255,0.06);
      --maxw:1100px;
      --radius:14px;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      color-scheme: dark;
    }
    *{box-sizing:border-box; margin: 0 0;}

    /* parallax background */
    .parallax {
      z-index: -99;
      /* Background image */
      background-image: url('../images/feature_wall_gallery.jpeg');

      /* Create parallax effect */
      min-height: 100vh;
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;

    }



    /* main properties */
    html,body{height:100%;margin:0;background:linear-gradient(180deg,#062214 0%, #0b2f1a 60%);color:var(--muted);-webkit-font-smoothing:antialiased}
    a{color:var(--accent);text-decoration:none}
    header{backdrop-filter: blur(6px);position:sticky;top:0;z-index:40;background:linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.15));border-bottom:1px solid rgba(255,255,255,0.03)}
    .container{max-width:var(--maxw);margin:0 auto;padding:28px}
    .nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
    .brand{display:flex;align-items:center;gap:12px}
    .logo{border: 1px solid green;width:78px;height:68px;box-shadow: 0px 0px 20px #fff;border-radius:10px 0px 10px 0px;background:linear-gradient(135deg, rgba(0,123,23,0.5), #6bb23e,rgba(0,123,23,0.5));display:grid;place-items:center;font-weight:700;color:#062214;text-shadow: 1px 0px 30px white, 1px 0px 10px black;}
    nav ul{list-style:none;margin:0;padding:0;display:flex;gap:14px;align-items:center}
    .cta{padding:10px 14px;border-radius:10px;background:linear-gradient(90deg,var(--accent),#8fc84d);color:#062214;font-weight:600}

    /* Hero */
    .hero{display:grid;grid-template-columns:1fr 420px;gap:32px;align-items:center;padding:40px 0}
    .hero .kicker{display:inline-block;padding:6px 10px;background:var(--glass);border-radius:10px;color:var(--muted);font-weight:600}
    h1{font-size:40px;margin:14px 0 10px;line-height:1.05;color:#f7fff3}
    p.lead{color:#d9f3d4;font-size:18px;margin:0 0 18px}

    .card{background:linear-gradient(180deg, rgba(255,255,255,0.2), rgba(0,255,255,0.1));padding:20px;border-radius:var(--radius);border:1px solid rgba(255,255,255,0.03)}
    .cta-row{display:flex;gap:12px;margin-top:18px}

    /* Services grid */
    .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:36px 0}
    .service{border-bottom:1px solid white;padding:18px;border-radius:12px;background:linear-gradient(180deg, rgba(0,243,124, 0.4), rgba(0,255,55,0.1));min-height:120px;box-shadow:0 0 40px rgba(255,255,255,0.4);}
    .service h3{margin:0 0 8px;color:#eaf9e6}
    .service p{margin:0;color:#cfead0}

    /* Gallery */
    .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
    .gallery img{width:100%;height:160px;object-fit:cover;border-radius:10px;transition: all 2s ease-in-out;}
    .gallery img:hover {transform: scale(2);box-shadow: 0 0 150px rgba(255,255,255,0.4);padding: 0.2em; border: 1px solid rgba(0,200,0,0.4);z-index:999;}

    /* Membership */
    .membership{display:flex;gap:18px;align-items:stretch; background: url('../images/feature_wall.jpeg');background-repeat: no-repeat;background-position: 0% 70%;background-size:100%;}
    .mem-left{flex:1; padding: 2rem; border-radius:1rem;background: rgba(0,0,0,0.6);backdrop-filter: blur(4px);}
    .mem-right{width:360px;background: rgba(0,0,0,0.6);backdrop-filter: blur(4px);}

    footer{padding:28px 0;border-top:1px solid rgba(255,255,255,0.03);margin-top:40px}
    .foot-row{display:flex;flex-direction:column;justify-content:space-between;gap:12px;align-items:center}

    /* responsive */
    @media (max-width:980px){
      .hero{grid-template-columns:1fr;}
      .grid{grid-template-columns:repeat(2,1fr)}
      .gallery{grid-template-columns:repeat(2,1fr)}
      .membership{flex-direction:column}
      .mem-right{width:100%}
      .logo{width:38px;height:38px;font-size:32px}
      li {display: flex; justify-content: space-between}

    }
    @media (max-width:640px){
      header .container{padding:14px}
      h1{font-size:28px}
      .grid{grid-template-columns:1fr}
      .gallery img{height:120px}
      li {display: flex; justify-content: space-between}
      .cta{padding:2px 4px;border-radius:10px;background:linear-gradient(90deg,var(--accent),#8fc84d);color:#062214;font-weight:600}
      .logo{width:28px;height:28px;font-size:22px}
    }

    /* small utilities */
    .muted{color:#bcd9b3;font-size:14px}
    .pill{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.03);font-weight:600}
    input,textarea,button{font-family:inherit}
    .form-row{display:flex;gap:10px}
    input[type="text"],input[type="email"],textarea{width:100%;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.4);background:linear-gradient(30deg, rgba(12,244,21,0.1), rgba(0,144,221,0.2), rgba(0,0,0,0.1), rgba(255,255,255,0.2));box-shadow:0 0 10px rgba(255,255,255,0.3);color:var(--muted)}
    button.primary{background:linear-gradient(90deg,var(--accent),#86c43a);padding:10px 12px;border-radius:10px;border:none;color:#062214;font-weight:700}

    /* small animation */
    .float{box-shadow: inset 0 0 30px rgba(0,133,0,0.3), 0 0 10px rgba(0,0,0,0.3);transform-origin:center;animation:float 6s ease-in-out infinite}
    @keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-16px)}100%{transform:translateY(0)}}