:root{
      --green-900:#1e3a1e;
      --green-800:#204321;
      --green-700:#2d572c;
      --green-600:#3e7a3d;
      --green-200:#cfead2;
      --bg-hero:#2d572c;
      --bg-main:#f5fff6;
      --shade-1:#e8f5e9;
      --shade-2:#dff3e3;
      --text-dark:#1f3b1f;
      --text:#2e4e2e;
    }
    html{scroll-behavior:smooth;}
    body{
      margin:0;
      font-family: Arial, sans-serif;
      background: var(--bg-main);
      color:#111;
    }
    /* NAV */
    nav{
      position: sticky; top:0; z-index:1000;
      background: linear-gradient(145deg, 
              var(--green-700) 0%, 
              #397d39 80%, 
              var(--green-900) 100%);
      padding:12px 24px;
     border-bottom: 6px solid var(--green-900);
    }
    nav .wrap{
      max-width:1200px; margin:0 auto;
      display:flex; gap:20px; align-items:center;
      justify-content: space-between; 
    }
    nav a{ 
      color:#fff; text-decoration:none; 
      font-weight:600; 
      font-size: large;
      margin-left:25px;

    }

    nav a:first-child {
    margin-left: 0;
    }
    nav a:hover{ 
      text-decoration:underline; }

    /* HERO */
    header.hero{
      width:100%; 
      background: var(--green-700); 
      color:#fff; 
      padding:80px 0;
    }
    .container{ 
      max-width:1200px; margin:0 auto; padding:0 24px; }

    h1{ 
      font-size:36px; 
      margin:0; 
    }
    .lead{ 
      font-size:18px; 
      margin-top:16px; 
      color:#eef7ef; 
    }

    h4{
      color:white; font-size:large;
    }

    .btn {
      display: inline-block;
      margin-top: 24px;
      background: var(--green-600);
      color: #fff;
      font-weight: 600;
      padding: 12px 24px;
      border-radius: 8px;
      text-decoration: none;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      cursor: pointer;
    }

    .btn:hover {
      background: var(--green-600);
      transform: translateY(-2px);
      box-shadow: 0 0 8px 3px rgba(255,255,255,0.7);
     
    }
    /* SECTION WRAP */
    section.block{
      width:100%; padding:60px 0; border-top:6px solid var(--green-700);
    }
    /* O NAS */
    h2{ 
      margin:0 0 16px; font-size:28px; color: var(--text-dark); }

    p{ 
      line-height:1.6; color: var(--text); }

    /* SERVICES */
    .svc-grid{ 
      display:grid; grid-template-columns:1fr; gap:24px; align-items:center; }

    .svc-row{
      display:grid; gap:32px; align-items:center;
    }
    .svc-row img{
      width:100%; 
      height:280px; 
      object-fit:cover; 
      border-radius:12px;
      box-shadow:0 8px 20px rgba(0,0,0,.8); 
      border:4px solid var(--green-200);
    }
    h3{ 
      margin:0 0 10px; font-size:26px; color:#245b2b; }

    .accent{ 
            height:4px; width:60px; background: var(--green-700); border-radius:2px; margin-bottom:12px; }

    /* CONTACT */
    section#kontakt{ 
      background: var(--bg-hero); color:#fff; border-top:6px solid var(--green-800); }

    section#kontakt a{ 
      color: var(--green-200); text-decoration: underline; }

    /* FOOTER */
    footer{ 
      background: var(--green-900); color:#fff; text-align:center; padding:18px 12px; }

    /* Responsive: switch to two columns on wider screens */
    @media (min-width: 840px){
      .svc-row{ grid-template-columns: 1.1fr 1fr; }
      .svc-row.rev{ grid-template-columns: 1fr 1.1fr; }
    }
    #onas {
      scroll-margin-top: 120px;
    }
    #storitve {
      scroll-margin-top: 100px;
    }

     nav a.active {
      color: #fff;
      font-weight: bold;
      border-bottom: 2px solid #fff;
    }

    .logo{
      width:80px;
    }

  @media only screen and (max-width: 500px) {
   .logo{
      width:50px;
    }
    h1{ 
      font-size:24px; 
      margin:0; 

    }
    nav a{ 
      color:#fff; text-decoration:none; 
      font-weight:600; 
      font-size: 16px;
      margin-left:14px;
    }
}