@charset "utf-8";
/* CSS Document */

    :root{ 
      --accent:#7cb296; 
      --dark:#1f2937; 
      --muted:#6b7280; 
      --bg:#f8fafc; 
    }

    *{
      box-sizing:border-box;
    }

	body{
	font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; 
	margin:0; 
	background:var(--bg); 
	olor:var(--dark);
    }

    a{
      color:inherit; 
      text-decoration:none;
    }

    .container{
      max-width:1100px; 
      margin:0 auto; 
      padding:24px;
    }

    header{
      background:#fff;
      box-shadow:0 1px 6px rgba(16,24,40,0.06);
    }

    .topbar{
      display:flex; 
      align-items:center; 
      justify-content:space-between; 
      gap:16px;
    }

    .brand{
      display:flex; 
      align-items:center; 
      gap:12px;
    }

    .logo{
      width:48px; 
      height:120px; 
      border-radius:8px; 
      display:flex; 
      align-items:center; 
      justify-content:center; 
    }

.logo img {
     width:120px; 
      height:120px; 
      border-radius:8px; 
      display:flex; 
      align-items:center; 
      justify-content:center; 
}
    nav ul{
      display:flex; 
      gap:18px; 
      list-style:none; 
      margin:0; 
      padding:0;
    }

    .cta{
      background:var(--accent); 
      color:#fff; 
      padding:10px 14px; 
      border-radius:8px;
    }

    .hero{
      display:grid; 
      grid-template-columns:1fr 420px; gap:24px; 
      align-items:center; 
      padding:48px 0;
  }

    .hero h1{
      font-size:32px; 
      margin:0 0 12px;
    }

    .hero p{
      color:var(--muted); 
      margin:0 0 18px;
    }

    .hero .features{
      display:flex; 
      gap:10px; 
      flex-wrap:wrap;
    }

    .feature{
      background:#fff; 
      padding:10px 12px; 
      border-radius:8px; 
      box-shadow:0 1px 4px rgba(16,24,40,0.04); 
      font-size:14px;
    }

    .hero-card{
      background:#fff; 
      padding:20px; 
      border-radius:12px; 
      box-shadow:0 8px 30px rgba(2,6,23,0.06);
    }

    .services{
      display:grid; 
      grid-template-columns:repeat(3,1fr);
      gap:16px; 
      margin:28px 0;
    }

    .service-card{
      background:#fff; 
      padding:18px; 
      border-radius:10px; 
      box-shadow:0 4px 20px rgba(2,6,23,0.04); 
      display:flex; 
      flex-direction:column; 
      gap:12px;
    }
    .service-card h3{
      margin:0;
    }

    .service-card p{
      margin:0; 
      color:var(--muted); 
      font-size:14px;
    }


    .two-col{
      display:grid; 
      grid-template-columns:1fr 1fr; 
      gap:20px; align-items:center;
    }

    .about{
      background:#fff; 
      padding:20px; 
      border-radius:12px
    }

    .contact{
      background:#fff; 
      padding:18px; 
      border-radius:12px;
    }

    form{
      display:flex; 
      flex-direction:column; 
      gap:10px;
    }

    input, textarea{
      padding:10px; 
      border:1px solid #e6e9ef; 
      border-radius:8px; 
      font-size:14px;
    }

    button.primary{
      background:var(--accent); 
      color:#fff; border:none; 
      padding:10px 14px; 
      border-radius:8px;
    }


    footer{
      margin-top:30px;
      padding:20px 0;
      color:var(--muted);
      font-size:14px;
    }

 
     @media (max-width:900px){
      .hero{
        grid-template-columns:1fr;
      }

      .services{
        grid-template-columns:repeat(2,1fr);
      }
      .two-col{
        grid-template-columns:1fr;
      }
    }

    @media (max-width:520px){
      .services{
        grid-template-columns:1fr;
      }
      nav ul{
        display:none;
      }

      .topbar{
        padding:12px;
      }
    }