:root {
      --primary: #1170ac;
      --light: #f9f9fb;
      --dark: #0a0a0a;
      --gray: #555;
      --card-bg: #fff;
    }
    body { margin:0; font-family:"Segoe UI",Arial,sans-serif; background:var(--light); color:var(--dark); }

    nav {
      background:white; padding:0.6rem 1.2rem; display:flex; justify-content:space-between; align-items:center;
      box-shadow:0 2px 8px rgba(0,0,0,0.05); position:sticky; top:0; z-index:1000;
    }
    .nav-brand { font-weight:bold; color:var(--primary); font-size:1.3rem; text-decoration:none; }
    .nav-links { display:flex; gap:1rem; }
    .nav-links a { text-decoration:none; color:var(--dark); font-size:0.95rem; }

    /* Smaller toggle button */
    .menu-toggle {
      display:none;
      font-size:1.2rem;
      cursor:pointer;
      background:var(--primary);
      color:#fff;
      padding:4px 8px;
      border-radius:5px;
    }

    /* Mobile Rich Centered Menu */
    @media(max-width:768px){
      .nav-links{
        display:none;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        background:white;
        position:absolute;
        top:55px;
        left:50%;
        transform:translateX(-50%);
        width:90%;
        max-width:380px;
        border-radius:12px;
        padding:12px 0;
        box-shadow:0 6px 20px rgba(0,0,0,0.15);
        animation:fadeIn 0.3s ease;
        z-index:1500;
      }
      .nav-links.active{display:flex;}
      .nav-links a{
        padding:10px 0;
        width:100%;
        text-align:center;
        font-size:0.95rem;
        border-bottom:1px solid #eee;
      }
      .nav-links a:last-child{border-bottom:none;}
      .menu-toggle{display:block;}
    }
    @keyframes fadeIn{
      from{opacity:0;transform:translate(-50%, -10px);}
      to{opacity:1;transform:translate(-50%,0);}
    }

    .hero{
      height:70vh;
      display:flex;justify-content:center;align-items:center;color:white;text-align:center;padding:0 1rem;
    }
    .hero img{max-width:220px;width:100%;border-radius:8px;margin-bottom:20px;box-shadow:0 4px 12px rgba(0,0,0,0.3);}
    .hero h1{font-size:2.4rem;margin-bottom:1rem;}
    .hero p{font-size:1rem;max-width:650px;margin:0 auto;}
    .join-btn{
      display:inline-block;background:var(--primary);color:#fff;padding:10px 24px;font-size:1rem;
      border-radius:25px;text-decoration:none;margin-top:20px;transition:background 0.3s,transform 0.2s;
    }
    .join-btn:hover{background:#0d5c8d;transform:scale(1.05);}

    section{padding:50px 20px;max-width:1100px;margin:auto;}
    h2{text-align:center;color:var(--primary);margin-bottom:30px;}

    /* Card Layout */
    .card-container{
      display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
      gap:20px;
    }
    .card{
      background:var(--card-bg);
      border-radius:12px;
      box-shadow:0 4px 12px rgba(0,0,0,0.08);
      padding:20px;
      text-align:center;
      transition:transform 0.3s ease, box-shadow 0.3s ease;
    }
    .card:hover{
      transform:translateY(-6px);
      box-shadow:0 8px 20px rgba(0,0,0,0.12);
    }
    .card-icon{font-size:2.5rem;color:var(--primary);margin-bottom:12px;}
    .card h3{margin:10px 0;color:var(--dark);}
    .card p{font-size:0.95rem;line-height:1.6;color:var(--gray);}
    
    .gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:15px;margin-top:40px;}
    .gallery img{width:100%;height:160px;object-fit:cover;border-radius:8px;transition:transform 0.3s;}
    .gallery img:hover{transform:scale(1.05);}
    footer{background:white;padding:30px 20px;text-align:center;box-shadow:0 -2px 8px rgba(0,0,0,0.05);margin-top:40px;}
    footer p{color:var(--gray);font-size:0.9rem;margin-bottom:16px;}
    .social-links{display:flex;justify-content:center;gap:20px;}
    .social-links a img{width:26px;height:26px;filter:invert(27%) sepia(80%) saturate(400%) hue-rotate(170deg);transition:transform 0.2s;}
    .social-links a:hover img{transform:scale(1.15);}

    /* Modal Form */
    .modal{
      display:none;position:fixed;top:0;left:0;width:100%;height:100%;
      background:rgba(0,0,0,0.6);justify-content:center;align-items:center;z-index:2000;
    }
    .modal-content{
      background:white;padding:20px;border-radius:12px;max-width:700px;width:90%;
      box-shadow:0 4px 12px rgba(0,0,0,0.2);position:relative;
    }
    .modal h3{text-align:center;color:var(--primary);margin-bottom:12px;}
    form{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;}
    form input,form select,form textarea{
      flex:1 1 30%;min-width:150px;padding:6px 8px;font-size:0.85rem;
      border:1px solid #ccc;border-radius:6px;
    }
    textarea{height:50px;}
    .form-actions{width:100%;text-align:center;margin-top:10px;}
    .close-btn{position:absolute;top:10px;right:20px;font-size:1.5rem;color:#333;cursor:pointer;}