@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --pop:"Poppins", sans-serif;
    --rob:"Roboto", sans-serif;
    --primary:#269E63;
    --secondary:#1F363C;
    --text:#3C3C3C;
    --c33:#333333;
    --textwhite:#F6F8EB;
    --landing-width:70vw;
    --landing-width-mobile:86vw;
    --d10:0.52vw;
    --d12:0.63vw;
    --d13:0.68vw;
    --d14:0.73vw;
    --d16:0.89vw;
    --d18:0.94vw;
    --d20:1.04vw;
    --d24:1.25vw;
    --d25:1.3vw;
    --d36:1.88vw;
    --d40:2.08vw;
    --d44:2.29vw;
    --d48:2.5vw;
      --d54:2.81vw;
    --d64:3.33vw;
    --d80:4.17vw;
    --d84:4.38vw;
    --d120:6.25vw;


    --m10:2.78vw;
    --m11:3.06vw;
    --m12:3.33vw;
    --m13:3.61vw;
    --m14:3.89vw;
    --m15:4.17vw;
    --m16:4.44vw;
    --m18:5vw;
    --m20:5.56vw;
    --m24:6.67vw;
    --m25:6.94vw;
    --m32:8.89vw;
    --m34:9.44vw;
    --m36:10vw;
    --m40:11.11vw;
    --m44:12.22vw;
    --m48:13.33vw;
    --m64:17.78vw;
}
/* width */
::-webkit-scrollbar {
    width: 10px;
    font-size: var(--outfit);
    
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: white;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: var(--primary);
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
  }
.pcshow{
  display: block;
}

.pchide{
  display: none;
}
#result{
    position:absolute;
    bottom:-50px;
    font-family:  var(--outfit);
}

 .bold {
        font-weight: bold;
        margin-bottom: 10px;
        display: block;
    }
   
    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }
    td, th {
        border: 1px solid #000;
        padding: 10px;
        vertical-align: top;
    }
    td.number {
        width: 40px;
        font-weight: bold;
        text-align: center;
    }
   
html {
  scroll-behavior: smooth;
}
body{
    margin: 0;
    padding: 0;
    font-family: var(--os);
    overflow-x: hidden;
}

header .upper-header{
  width:100vw;
  background-color: var(--primary);
  height: 38px;
  align-content: center;
 
}
header .upper-header .container{
  max-width: 1200px;
  display: flex;
  gap: 60px;
  justify-content: flex-end;
  margin: auto;
}

header .upper-header .container span a{
  font-family: var(--rob);
font-weight: 400;
font-style: 400;
font-size: 14px;
color: white;
text-decoration: none;

line-height: 165%;
letter-spacing: 0%;
text-align: center;

}


header .upper-header .container span{
      display: inline-flex;
  align-items: center;

}
header .upper-header .container span img{
  width: 15px;
  
  margin-right: 5px;
}
.main-header{
  height: 114px;
  display: flex;
  justify-content: space-between;
  align-content: center;
  max-width: 1200px;
  margin: auto;
}

.main-header img{
  width: 201px;
}
.main-header nav{
  display: flex;
  gap: 34px;
}
.main-header nav a{
  font-family: var(--rob);
font-weight: 700;
font-style: bold;
font-size: 15px;
color: var(--text);
line-height: 165%;
letter-spacing: 0%;
text-align: right;
text-decoration: none;
align-content: center;

}

.main-header nav a.active{
  color: var(--primary);
}

.hero{
  width: 100vw;
  height: 691px;
  background-size: cover;
  background-image: url('./img/hero1.png');
  position: relative;

}
.hero h1{
  font-family: var(--pop);
font-weight: 700;
font-style: Bold;
font-size: 48px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: -4%;
text-align: center;
color: white;
position: absolute;
top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 2px 2px 0.3px #269E63;





}



.izbornik{
  width: 100vw;
  display: flex;
  height: 90px;
}
.izbornik div{
   display: flex;
  flex-direction: column;
  justify-content: flex-end; 
  height:95px;
  cursor:pointer;
}
.izbornik div h2{
  font-family: var(--rob);
font-weight: 500;
font-style: Medium;
font-size: 14px;
leading-trim: NONE;
line-height: 165%;
letter-spacing: 0%;

color: white;

}
.izbornik div img{
  width: 35px;
}
.iz1{
  background-color: #269E63;
  width: 39.17vw;
  text-align: right;
}

.iz1 h2{
  margin-right: 30px;
} 
.iz1 img{
  display: flex;
  place-self: flex-end;
   margin-right: 80px;
}
.iz2{
  background-color: #33A86F;
  width: 10.83vw;
  text-align: center;
}
.iz2 img, .iz3 img{
    display: flex;
  place-self: center;
  

}
.iz3{
  background-color: #3FB67C;
   width: 10.83vw;
     text-align: center;
}
.iz4{
  background-color: #51C08A;
    width: 39.17vw;
    text-align: left;
}
.iz4 h2{
  margin-left: 55px;
}

.iz4 img{
  display: flex;
  place-self: flex-start;
     margin-left: 65px;
}

.main-heading{
  font-family: var(--pop);
font-weight: 600;

font-size: 36px;

line-height: 100%;
letter-spacing: -3%;
text-align: center;
color: var(--primary);
margin-top: 110px;


}
.h-underline{
  width: 55px;
  margin:auto;
  height: 2px;
  border-top: 2px solid var(--primary);
}
.hospis p{
  font-family: var(--rob);
font-weight: 400;

font-size: 16px;

line-height: 165%;
letter-spacing: 0%;
text-align: center;
color: var(--text);
width: 900px;
margin: auto;
margin-top: 34px;

}

.hospis-cards{
  display: flex;
  gap: 74px;
  margin: auto;
  max-width: 1200px;
  margin-top: 80px;
  margin-bottom: 82px;
}

.hospis-cards .card h3{
  font-family: var(--pop);
font-weight: 600;

font-size: 20px;

line-height: 100%;
letter-spacing: 0%;
text-align: center;
color: #3C3C3C;


}
.kriterij{
  background-color: #F6F6F8;
  padding-top: 1px;
}
.hospis-cards .card p{
  width: 350px;
}

.akordion-body{
    
     font-family: var(--rob);
font-weight: 400;

font-size: 16px;

line-height: 165%;
letter-spacing: 0%;

color: var(--text);
width: 900px;
margin: auto;
margin-top: 34px;

    
    
}

.akordion-body ul, .akordion-body ol{
    width: 802px;
   
    margin: auto;
     margin-top: 20px;
     margin-bottom:20px;
}
.akordion-body ul, .akordion-body sub-list{
    
    margin-left: 30px;
}

 ol.sub-list {
        margin: 5px 0 5px 20px;
        padding-left: 0;
    }
.kriterij p{
  font-family: var(--rob);
font-weight: 400;

font-size: 16px;

line-height: 165%;
letter-spacing: 0%;
text-align: center;
color: var(--text);
width: 900px;
margin: auto;
margin-top: 34px;

}
.akordioni{
  
  width: 900px;
  margin: auto;
  margin-top:80px;
}

.akordioni .akordion p {
   
    margin: 0;
   width: 802px;
   margin: auto;
   margin-bottom: 26px;
   text-align: left;
}

.akordioni .akordion h1 {
    cursor: pointer;
    margin: 0;
    
    background: white;
    box-shadow: 1px 1px 1px 0px #00000040;
    margin-bottom: 21px;
    font-family: var(--rob);
font-weight: 700;
font-style: Bold;font-size: 16px;

line-height: 165%;
letter-spacing: 0%;
color: var(--primary);
height: 50px;
align-content: center;
padding-left: 32px;


}
.preuzmidiv{
    text-align:center;
}
.kriterij img{
  width: 238px;
 
     margin-top: 45px;
    padding-bottom: 125px;
    cursor:pointer;
    }


    .green-bg{
      background-image: url('./img/hero3.png');
      background-size: cover;
      background-repeat: no-repeat;
      width: 100vw;
      height: 941px;
      margin-top: -5px;
    }



    .green-bg .main-heading{
      color: white;
      margin-top: 0;
      padding-top: 84px;
    }
    .green-bg .h-underline{
      border-top:2px solid white;
      margin-bottom: 50px;
    }

  .hospis-cards{
      font-family: var(--rob);
font-weight: 400;

font-size: 16px;

line-height: 150%;
letter-spacing: 0%;
text-align: center;
color: white;
max-width: 1200px;
margin: auto;
    margin-top: 80px;
    margin-bottom: 82px;

    }

    .green-bg h2{

      font-family: var(--rob);
font-weight: 700;

font-size: 16px;

line-height: 150%;
letter-spacing: 0%;
text-align: center;
color: white;
max-width: 1200px;
margin: auto;
margin-top: 30px;

    }

    .green-bg h3{
    font-family: var(--rob);
font-weight: 700;

font-size: 20px;

line-height: 150%;
letter-spacing: 0%;
text-align: center;
color: white;
max-width: 1200px;
margin: auto;
margin-top: 30px;
margin-bottom: 30px;

    }

    .green-bg p{
      color: white;
      font-family: var(--rob);
font-weight: 400;

font-size: 16px;

line-height: 150%;
letter-spacing: 0%;
text-align: center;
width:1200px;
margin:auto;

    }


    .novosti-card{
      margin: auto;
      display: flex;
      gap:50px;
      margin-top:50px;
      justify-content: center;
    }
    .novosti-card .card{
      width: 335px;
      border: 1px solid #D9D9D9;

    }
    .novosti-card .card img{
      width: 333px;
      margin-left: 2px;
      height:244px;
      object-fit: cover; /* slika popunjava okvir, čuva proporcije, može se odrezati */
    object-position: center; /* centriranje slike u okviru */
      
    }

    .novosti-card .card h2{
      font-family: var(--pop);
font-weight: 600;

font-size: 20px;

line-height: 100%;

color: #3C3C3C;
margin-left: 30px;
margin-top: 24px;
max-width: 277px;

    }

    .novosti-card .card p{
      font-family: var(--rob);
font-weight: 400;

font-size: 16px;

line-height: 165%;
letter-spacing: 0%;
color: #3C3C3C;
margin-left: 30px;
margin-top: 30px;
max-width: 277px;


    }

    .novosti-card .card h3{
      font-family: var(--rob);
font-weight: 700;

font-size: 16px;

line-height: 165%;
letter-spacing: 0%;
color: var(--primary);
margin-left: 30px;

    }

    .allnews{
      color: var(--primary);
      font-family:var(--rob);
font-weight: 700;

font-size: 16px;

line-height: 165%;
letter-spacing: 0%;
text-align: center;
margin-top: 42px;
margin-bottom: 108px;

    }



footer{
  background-color: #F6F6F8;
  margin-top: -5px;
}
footer .container .main-heading{
  margin-top: 0px;
  padding-top: 80px;
}
footer .container form{
  width: 820px;
  margin: auto;
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

footer .container form input{
  width: 397px;
  height: 47px;
  background-color: white;
  border-radius: 8px;
  color: #b3b3b3;
  font-family: var(--pop);
font-weight: 300;

font-size: 15px;

line-height: 100%;
letter-spacing: 0%;
border: 1px solid  #D9D9D9;
outline:none;
box-sizing: border-box;
padding-left: 16px;
color: #b3b3b3;
margin-bottom: 17px;

}
footer .container form input::placeholder{
   font-family: var(--pop);
font-weight: 300;

font-size: 15px;

line-height: 100%;
letter-spacing: 0%;
color: #b3b3b3;


}

footer .container form textarea{
  width: 820px;
  height: 204px;
    font-family: var(--pop);
font-weight: 300;

font-size: 15px;

line-height: 100%;
letter-spacing: 0%;
color: #b3b3b3;
border: 1px solid  #D9D9D9;
 background-color: white;
  border-radius: 8px;
  box-sizing: border-box;
padding-left: 16px;
padding-top: 90px;
}


footer .container form textarea::placeholder{
   font-family: var(--pop);
font-weight: 300;

font-size: 15px;

line-height: 100%;
letter-spacing: 0%;
color: #b3b3b3;


}

footer .container form button{
  font-family:var(--rob);
font-weight: 700;

font-size: 16px;

line-height: 165%;
letter-spacing: 0%;
text-align: center;
color: white;
background-color: var(--primary);
border-radius: 16px;
width:238px;
height: 52px;
border: none;
margin: auto;
margin-top: 44px;


}


.kontakt{
  width: 820px;
  margin: auto;
  margin-top: 100px;
  display: flex;
  justify-content: space-between;
  padding-bottom: 80px;
}

.kontakt .kontakt-left h1{
  font-family: var(--pop);
font-weight: 600;

font-size: 20px;

line-height: 100%;
letter-spacing: 0%;
color: #3C3C3C;

}

.kontakt .kontakt-left .k-underline{
      width: 30px;
   
    height: 2px;
    border-top: 2px solid var(--primary);
}


.kontakt .kontakt-left span{
  display: flex;
  margin-top: 24px;
}

.kontakt .kontakt-left .spanbez{
    margin-top:2px;
}

.kontakt .kontakt-left span img{
  margin-right: 8px;
}

.kontakt .kontakt-left span a{
  font-family:var(--rob);
font-weight: 400;

font-size: 16px;

line-height: 165%;
letter-spacing: 0%;
color: #3C3C3C;
text-decoration: none;

}

.kontakt .kontakt-left span a.green{

color: var(--primary);
font-weight: 700;


}


.kontakt .kontakt-right{
  align-content: flex-end;
}


.hamburger{
  display: none;
}





.mobile{
    display:none;
}

.desktop{
    display:block;
}

















  @media screen and (max-width:1200px){
      
.hero {
    
    background-image: url(./img/hero1mob.png);

}

.mobile{
    display:block;
}

.desktop{
    display:none;
}


    
header .upper-header .container,.main-header,.hospis-cards,
.hospis-cards,  .green-bg h2, .hospis-cards, .hospis-cards card h3 {
  width: 100vw;
  max-width: 100vw;
}

.kontakt .kontakt-left .k-underline {
    margin:auto;
}


.kontakt .kontakt-left span {
    display: flex
;
    margin-top: 24px;
    justify-content: center;
}

.kontakt .kontakt-left .spanbez {
    margin-top:34px;
    
}

.kontakt .kontakt-left h1 {
    margin-top:34px;
}

.kontakt-right img{
    margin-top:34px;
}

.hospis-cards .card p, .hospis p, .kriterij p,
.akordioni,.akordioni .akordion p, .green-bg h3,.kriterij img{
  width: 90vw;


}

header .upper-header{
    display:none;
}

.hospis-cards .card p{
    margin-bottom:34px;
}
.kontakt{
    display:block;
    text-align:center;
}

header .upper-header .container {
  
    display: flex;
    gap: 0px;
    justify-content: space-between;
    margin: auto;
    box-sizing: border-box;
    padding-left: 5vw;
    padding-right: 5vw;
}

.main-header nav{
 
  position: absolute;
  width: 100vw;
  background-color: white;
  height: 115px;
  z-index: 5;
  margin-top: 112px;

}

.main-header nav a{
  display: block;
  text-align: center;
}
    
.main-header .hamburger{
  display: block;
  width: 35px;
  margin-right: 5vw;

}

.main-header img {
    width: 150px;
    margin-left: 5vw;
}


#nav {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#nav.show {
  display: block;
  opacity: 1;
}


.iz1,.iz2,.iz3,.iz4{
  width: 25vw;
  text-align: center;
}
  .iz1 h2, .iz4 h2{
    margin-right: 0;
    margin-left: 0;
  } 
  
  .izbornik div img{
    display: flex;
    place-self: center;
    margin-right: 0;
    margin-left: 0;
  }




.hospis-cards{
  display: block;
}

.kriterij{
  margin-top: 100px;
}

.akordioni .akordion p{
  width: 80vw;
  margin-left:30px;
}
.akordion-body{
    width:80vw;
}

.akordion-body ul, .akordion-body ol {
    width:66vw;
}



.kriterij img{
  width: 60vw;
  padding-bottom:45px;
}


.green-bg{
  height:auto;
  padding-bottom:50px;
}
.green-bg p{
  width: 90vw;
  margin: auto;
}

.novosti-card .slick-list .slick-track{
  min-width: 200vw!important;
}

.novosti-card .slick-list {
  height:126vw!important;
}



.novosti-card .card{
  width: 70vw!important;
          margin-left: 15vw;
        margin-right: 15vw;
}


.novosti-card .card img {
    width: 70vw;
    margin-left: 2px;
}


footer .container form{
  width: 70vw;
}


footer .container form input {
  width: 70vw;
}


.kontakt{
  width: 90vw;
}
.hero h1 {
    width:80vw;
    top:35%;
}


.iz1,.iz2,.iz3,.iz4{
  width: 50vw!important;
  text-align: center;
}
  .iz1 h2, .iz4 h2{
    margin-right: 0;
    margin-left: 0;
  } 
  
  .izbornik div img{
    display: flex;
 margin:auto;
 
    margin-top: 3vw;
  }

.izbornik div {
    display: block
;
    flex-direction: unset;
    justify-content: unset;
}


.akordioni .akordion h1 {
    height:80px;
}

.novosti-card .card p {
    max-width:60vw;
}

.upper-header .container span{
    min-width:fit-content;
}

  }