body {
  margin:0;
  padding:0;
  color:#000;
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  background:rgba(58,57,61,.25);
  background:linear-gradient(90deg,rgba(168,193,40,.25) 0,rgba(58,57,61,.25) 30%,rgba(58,57,61,.25) 70%,rgba(168,193,40,.25) 100%)
}

.head,
.main {
  margin:auto;
  box-sizing:border-box
}
.main {
  background-color:#fff
}

.head {
  width:100%;
  position:fixed;
  background-color:#3a393d;
  background-image:url(slike/l_2.png);
  background-size:contain;
  box-shadow:0 0 20px rgba(0,0,0,.5);
  z-index:60;
  font-size:0;
  white-space:nowrap
}
.head .l1 {
  width:calc(calc(100% - 1024px)/ 2);
  vertical-align:top
}
.head .logo {
  display:inline-block;
  vertical-align:top
}
.head .logo a {
  display:block;
  line-height:0
}
.head,
.head .l1 {
  background-repeat:repeat-x;
  height:103px
}
.head .l1 {
  display:inline-block;
  background-image:url(slike/l_1.png)
}

.vizitka {
  position:fixed;
  width:100%;
  height:100vh;
  align-items:center;
  justify-content:center;
  background-color:rgba(60,58,62,.85);
  z-index:100;
  display:none
}
.vizitka img {
  box-shadow:0 0 20px rgba(255,255,255,.25)
}

.vizitka-btn {
  position:absolute;
  height:42px;
  top:31px;
  right:calc(calc(calc(100% - 1024px)/ 2) + 24px);
  cursor:pointer
}
.vizitka-btn.v1 {
  margin-right:247px
}
.vizitka-btn.v2 {
  margin-right:86px
}
.vizitka-btn.v3 {
  margin-right:161px
}

.nav {
  position:fixed;
  top:103px;
  width:100%;
  background-color:#3a393d;
  z-index:55;
  box-shadow:0 2px 6px rgba(0,0,0,.3)
}
.nav-links {
  max-width:1024px;
  margin:0 auto;
  display:flex;
  flex-direction:row;
  padding:0 24px
}
.nav-links a {
  color:#ccc;
  padding:11px 16px;
  font-size:14px;
  display:block;
  border-bottom:2px solid transparent;
  transition:color .2s, border-color .2s
}
.nav-links a:hover,
.nav-links a.active {
  color:#a8c128;
  border-bottom-color:#a8c128
}

.main {
  width:1024px;
  padding:143px 24px 24px;
  max-width:100%
}
.main .l {
  flex:1 1 0px
}
.main .r {
  flex:2.17 2.17 0px
}
.main .top {
  display:flex;
  flex-direction:row;
  align-items:stretch
}
.main .zavarovalnice {
  display:flex;
  flex-direction:row;
  align-items:stretch
}
.main .zavarovalnice p {
  flex:1 1 0px
}
.main .top>span,
.main .zavarovalnice>span {
  display:block;
  width:25px;
  margin:0 0 0 24px;
  border-style:solid;
  border-color:#a8c128;
  border-width:0 0 0 1px
}

.main .lokacija {
  display:flex;
  flex-direction:column
}

.main .galerija {
  display:flex;
  flex-direction:column
}
.galerija-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px
}
.galerija-grid img {
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:3px;
  cursor:zoom-in;
  transition:opacity .2s, transform .2s;
  display:block
}
.galerija-grid img:hover {
  opacity:.85;
  transform:scale(1.02)
}

.main .kontakt {
  display:flex;
  flex-direction:column
}

.kontakt-lokacija-grid {
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:40px;
  margin-bottom:32px
}
.kontakt-info h2,
.kontakt-form-col h2 {
  margin-top:0;
  margin-bottom:12px
}

.kontakt-info-list {
  list-style:none;
  padding:0;
  margin:0 0 20px 0;
  display:flex;
  flex-direction:column;
  gap:16px
}
.kontakt-info-list li {
  display:flex;
  gap:12px;
  align-items:flex-start
}
.kontakt-info-list li i {
  color:#a8c128;
  font-size:18px;
  margin-top:2px;
  width:20px;
  flex-shrink:0
}
.kontakt-opis {
  font-size:14px;
  color:#555;
  line-height:1.6;
  margin:0
}

.kontakt-map {
  margin-top:8px
}
.kontakt-map iframe {
  display:block;
  border-radius:3px
}

.kontakt-form {
  display:flex;
  flex-direction:column;
  gap:16px;
  max-width:640px
}
.form-row {
  display:flex;
  flex-direction:row;
  gap:16px
}
.form-row .form-group {
  flex:1
}
.form-group {
  display:flex;
  flex-direction:column;
  gap:6px
}
.form-group label {
  font-size:14px;
  font-weight:bold;
  color:#3a393d
}
.form-group input,
.form-group textarea {
  padding:10px 12px;
  border:1px solid #ccc;
  border-radius:3px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:15px;
  color:#000;
  box-sizing:border-box;
  width:100%;
  transition:border-color .2s
}
.form-group input:focus,
.form-group textarea:focus {
  outline:none;
  border-color:#a8c128
}
.form-group textarea {
  resize:vertical
}
.kontakt-form button {
  align-self:flex-start;
  padding:11px 24px;
  background-color:#a8c128;
  color:#fff;
  border:none;
  border-radius:3px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:15px;
  font-weight:bold;
  cursor:pointer;
  transition:background-color .2s
}
.kontakt-form button:hover {
  background-color:#83922f
}

.zav-intro {
  margin-bottom:24px;
  line-height:1.7
}
.zav-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px
}
.zav-kartica {
  border:1px solid #e0e0e0;
  border-radius:4px;
  padding:24px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  transition:box-shadow .2s, border-color .2s
}
.zav-kartica:hover {
  box-shadow:0 4px 16px rgba(0,0,0,.08);
  border-color:#a8c128
}
.zav-kartica.featured {
  border-color:#a8c128;
  background-color:rgba(168,193,40,.04)
}
.zav-logo-wrap {
  height:60px;
  display:flex;
  align-items:center;
  margin-bottom:16px
}
.zav-logo-wrap img {
  max-height:56px;
  max-width:150px;
  object-fit:contain
}
.zav-kartica h3 {
  font-size:15px;
  margin:0 0 10px 0
}
.zav-badge {
  display:inline-block;
  background:rgba(168,193,40,.18);
  border:1px solid #a8c128;
  color:#83922f;
  font-size:11px;
  font-weight:bold;
  padding:3px 8px;
  border-radius:3px;
  margin-bottom:12px;
  text-transform:uppercase;
  letter-spacing:.05em
}
.zav-kartica p {
  font-size:14px;
  color:#555;
  flex:1;
  line-height:1.7;
  margin:0 0 16px 0
}
.zav-link {
  font-weight:bold;
  font-size:14px
}

a {
  color:#83922f;
  text-decoration:none
}
a:hover {
  color:#a8c128
}
hr {
  border-top:1px solid #a8c128
}
h1 {
  font-size:1.2em;
  font-weight:bold;
  margin:0 0 12px 0;
  line-height:1.4;
  color:#3a393d
}
h2 {
  font-size:1.05em;
  font-weight:bold;
  margin:0 0 10px 0;
  line-height:1.4;
  color:#3a393d
}
.zav-intro h2 {
  display:inline
}

.footer-nav {
  display:flex;
  flex-direction:column;
  gap:4px
}
.footer {
  background-color:#3a393d;
  color:#bbb;
  margin-top:0
}
.footer-content {
  max-width:1024px;
  margin:0 auto;
  padding:32px 24px;
  display:flex;
  flex-direction:row;
  gap:40px;
  font-size:14px;
  line-height:1.9
}
.footer-content a {
  color:#a8c128
}
.footer-content a:hover {
  color:#fff
}
.footer-copy {
  margin-left:auto;
  text-align:right
}
.fa,
.fas {
  margin-right:.25em
}

.hero {
  margin:0 -24px 32px -24px;
  background:#3a393d;
  padding:48px 32px;
  position:relative;
  overflow:hidden
}
.hero::before {
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:linear-gradient(135deg,rgba(168,193,40,.13) 0%,transparent 55%);
  pointer-events:none
}
.hero-inner {
  position:relative;
  z-index:1;
  max-width:976px
}
.hero-tagline {
  color:#a8c128;
  font-size:12px;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:.1em;
  margin:0 0 14px 0
}
.hero-title {
  color:#fff;
  font-size:1.75em;
  font-weight:bold;
  margin:0 0 14px 0;
  line-height:1.3
}
.hero-desc {
  color:#bbb;
  font-size:15px;
  margin:0 0 28px 0;
  line-height:1.75
}
.hero-btns {
  display:flex;
  flex-direction:row;
  gap:12px;
  flex-wrap:wrap
}
.hero-btn {
  display:inline-block;
  padding:12px 24px;
  background:#a8c128;
  color:#fff;
  font-weight:bold;
  font-size:15px;
  border-radius:3px;
  transition:background-color .2s
}
.hero-btn:hover {
  background:#83922f;
  color:#fff
}
.hero-btn-outline {
  display:inline-block;
  padding:11px 24px;
  border:2px solid rgba(168,193,40,.45);
  color:#ccc;
  font-size:15px;
  border-radius:3px;
  transition:border-color .2s,color .2s
}
.hero-btn-outline:hover {
  border-color:#a8c128;
  color:#a8c128
}

.storitve-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:16px
}
.storitev-kartica {
  border:1px solid #e8e8e8;
  border-radius:4px;
  padding:20px 18px;
  transition:box-shadow .2s,border-color .2s
}
.storitev-kartica:hover {
  box-shadow:0 4px 14px rgba(0,0,0,.09);
  border-color:#a8c128
}
.storitev-kartica .fas {
  font-size:20px;
  color:#a8c128;
  margin:0 0 10px 0;
  display:block
}
.storitev-kartica h3 {
  font-size:14px;
  font-weight:bold;
  margin:0 0 6px 0;
  color:#3a393d
}
.storitev-kartica p {
  font-size:13px;
  color:#666;
  margin:0;
  line-height:1.6
}
.storitve-opomba {
  font-size:13px;
  color:#888;
  margin:16px 0 0 0;
  line-height:1.6
}

@media only screen and (max-width:1024px) {
  .head .l1 {
    display:none
  }
  .head,
  .head .l1,
  .logo img {
    height:calc(calc(100vw / 1024) * 103)
  }
  .vizitka-btn {
    height:calc(calc(100vw / 1024) * 42);
    top:calc(calc(100vw / 1024) * 31);
    right:24px
  }
  .vizitka-btn.v1 {
    margin-right:calc(calc(100vw / 1024) * 157)
  }
  .vizitka-btn.v2 {
    margin-right:calc(calc(100vw / 1024) * 82)
  }
  .nav {
    top:calc(calc(100vw / 1024) * 103)
  }
  .nav-links {
    overflow-x:auto;
    flex-wrap:nowrap;
    padding:0 8px
  }
  .nav-links a {
    white-space:nowrap;
    padding:10px 12px
  }
  .main {
    padding-top:calc(calc(calc(100vw / 1024) * 103) + 40px)
  }
  .footer-content {
    flex-direction:column;
    gap:16px
  }
  .footer-copy {
    margin-left:0;
    text-align:left
  }
  .main .top,
  .main .zavarovalnice {
    flex-direction:column
  }
  .galerija-grid {
    grid-template-columns:repeat(2, 1fr)
  }
  .zav-grid {
    grid-template-columns:repeat(2, 1fr)
  }
  .form-row {
    flex-direction:column
  }
  .kontakt-form button {
    align-self:stretch
  }
  .kontakt-lokacija-grid {
    grid-template-columns:1fr
  }
  .main .top>span,
  .main .zavarovalnice>span {
    height:8px;
    width:initial;
    margin:24px 0 0 0;
    border-width:1px 0 0 0
  }
  .storitve-grid {
    grid-template-columns:repeat(2,1fr)
  }
}

@media only screen and (max-width:600px) {
  .head,
  .head .l1,
  .logo img {
    height:60px
  }
  .nav {
    top:60px
  }
  .vizitka-btn {
    height:26px;
    top:17px
  }
  .vizitka-btn.v1 {
    margin-right:92px
  }
  .vizitka-btn.v2 {
    margin-right:48px
  }
  .vizitka-btn.v3 {
    margin-right:0
  }
  .main {
    padding-top:calc(60px + 40px);
    padding-left:16px;
    padding-right:16px
  }
  .galerija-grid {
    grid-template-columns:repeat(1, 1fr)
  }
  .zav-grid {
    grid-template-columns:1fr
  }
  .footer-content {
    padding:24px 16px
  }
  .hero {
    margin:0 -16px 24px -16px;
    padding:36px 20px
  }
  .hero-title {
    font-size:1.35em
  }
  .storitve-grid {
    grid-template-columns:1fr
  }
}