@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:#78C418;
    --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;
}
html {
  scroll-behavior: smooth;
}
body{
    margin: 0;
    padding: 0;
    font-family: var(--os);
    overflow-x: hidden;
}

h


.hamburger{
  display: none;
}





.mobile{
    display:none;
}

.desktop{
    display:block;
}






.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: auto;
    margin-top: 110px;
}






.main-header nav .demo{
  width:164px;
  height: 55px;
  background-color: var(--primary);
  color: white;
  font-size: 16px;
  border-radius: 5px;
  text-align: center;
      place-self: anchor-center;
      cursor: pointer;

}



.video-pop {
  width: 1400px;
  height: auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999; /* opciono, ako želiš da bude iznad drugih elemenata */
  display: none;
}

.zatvori{
  position: absolute;
  top: 0vw;
  right: -12vw;
}


.overlay-body{
  z-index: 999;
    background-color: rgba(0, 0, 0, 0.39);
    height: 100vh;
    display: none;
    position: fixed;
    inset: 0% 0% auto;

}


.landing{
  width:1400px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 80px;
  margin-bottom: 127px;
}
.landing .first{
  width: 672px;
  height: 395px;
}


.landing .first h1{
  font-family: var(--pop);
font-weight: 500;

font-size: 60px;

line-height: 114.99999999999999%;
letter-spacing: -5%;
color:#3C3C3C;


}
.landing .first h1 strong{
  font-family: var(--pop);
font-weight: 500;

font-size: 60px;

line-height: 114.99999999999999%;
letter-spacing: -5%;
color:var(--primary);


}


.landing .first a{
      width: 164px;
    height: 55px;
    background-color: var(--primary);
    color: white;
    font-size: 16px;
    border-radius: 5px;
    text-align: center;
    display: block;
    align-content: center;
    text-decoration: none;
    
    cursor: pointer;
    font-family:var(--rob);
font-weight: 700;

font-size: 16px;

line-height: 165%;
letter-spacing: 0%;
text-align: center;
color: white;
 margin-top: 30px;

  
}

.landing .second{
  width: 672px;
  height: 395px;
  background-image: url('./img/landing-secong-bg.png');
  background-size: cover;
  margin-top: 20px;
}

.landing .lan-tekst{
  border: 1px solid #D9D9D9;
  width: 672px;
  height: 177px;
  margin-top: 103px;
  box-sizing: border-box;
  padding-left: 32px;
  border-radius: 5px;
}

.lan-tekst h2{
  font-family: var(--rob);
font-weight: 700;

font-size: 24px;
line-height: 143%;
letter-spacing: 0%;
color: black;


}

.lan-tekst p{
  font-family: var(--rob);
font-weight: 400;

font-size: 16px;

line-height: 150%;
letter-spacing: 0%;
color: black;
width: 613px;

}

.lan-tekst.primary-bg p,.lan-tekst.primary-bg h2{
  color: white;
}

.primary-bg{
  background-color: var(--primary);
}






.standard{
  font-family: var(--rob);

font-weight: 400;

font-size: 16px;

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

color: #3C3C3C;




}

.p-879{
  width: 879px;
  margin: auto;
  margin-top: 32px;
  text-align: center;
}








.kartice-div{
  width: 100vw;
  background-color: #F7F7F7;
  padding-top: 147px;
  padding-bottom:147px;
}

.kartice-div .kartice{
  width: 1400px;
  margin: auto;
  display: flex;
  justify-content: space-between;
}
.kartice-div .kartice .kartica{
  background-color: #ffffff;
  border: 1px solid #E8E8E8;
  box-shadow: 0px 0px 25px 0px #0000001A;
  width: 315px;
  height: 319px;
  border-radius:5px;
  text-align: center;


}

.kartice-div .kartice .kartica h2{
  font-family: var(--rob);
font-weight: 700;

font-size: 24px;

line-height: 143%;

text-align: center;
color: black;
width: 241px;
margin: auto;
margin-top:35px ;


}


 .kartice-div .kartice .kartica p{
  font-family:var(--rob);
font-weight: 400;

font-size: 16px;

line-height: 150%;

text-align: center;
color: black;
margin: auto;
width: 241px;
margin-top:35px ;

}

.p-1177{
  width: 1177px;
  margin: auto;
  margin-top: 35px;
  text-align: center;
}

.rjesenje-kartice{
  width: 1400px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  margin-top: 63px;
}

.rjesenje-kartice .kartica{
  border: 1px solid #EFEFEF;
  box-shadow: 0px 0px 25px 0px #0000001A;
  width: 440px;
  text-align: center;
height: 338px;



border-radius: 5px;





}

.rjesenje-kartice .kartica img{
  margin-top: 32px;
}
.rjesenje-kartice .kartica h2{
  font-family: var(--rob)
;font-weight: 700;

font-size: 24px;

line-height: 143%;

text-align: center;

}

.rjesenje-kartice .kartica p{
  font-family: var(--rob);
font-weight: 400;

font-size: 16px;

line-height: 150%;

text-align: center;
width: 370px;
margin: auto;


}


.p-1091{
  width: 1091px;
  margin: auto;
  margin-top: 35px;
  text-align: center;
}


.nosivi-uredjaji{
  width: 1400px;
  margin: auto;
  margin-top:69px;
    margin-bottom: 217px;
}

.nosivi-uredjaji .nu-upper{
  display: flex;
  justify-content: space-between;

}

.nu-upper h1{
  font-family: var(--pop);
font-weight: 600;

font-size: 36px;
color: var(--primary);
line-height: 100%;
width: 363px;


}
.nu-upper p{
  width: 1040px;
}
.nu-kartice{
  display: flex;
  justify-content: space-between;
margin-top:  30px;
}

.nu-kartice .kartica {
  width: 315px;
height: 381px;


border-radius: 5px;
  border: 1px solid #EFEFEF;
  box-shadow: 0px 0px 25px 0px #0000001A;
  text-align: center;


}

.nu-kartice .kartica h2{

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

font-size: 16px;

line-height: 150%;

text-align: center;
color: var(--primary);
margin-bottom: 0;

}

.nu-kartice .kartica p{
  font-family: var(--rob);
font-weight: 400;

font-size: 16px;

line-height: 150%;

text-align: center;
color: black;
margin-top: 6px;

}

.dupli{
  width: 1400px;
  margin: auto;
  display: flex;
  justify-content: space-between;
}

.dupli .d1 h1{
  font-family: var(--pop);
font-weight: 600;

font-size: 36px;

line-height: 140%;
color: var(--primary);
width: 543px;


}



.dupli .d1 p{
  font-family: var(--rob);
font-weight: 400;

font-size: 16px;

line-height: 165%;
color: #3C3C3C;
width: 674px;

  
}

.dupli .d2 h1{
    font-family: var(--pop);
font-weight: 600;

font-size: 36px;

line-height: 140%;
color: var(--primary);
width: 543px;

}

.dupli .d2 p{
    font-family: var(--rob);
font-weight: 400;

font-size: 16px;

line-height: 165%;
color: #3C3C3C;
width: 674px;

}

.mt-137{
  margin-top: 137px;
}

.p-853{
  width: 853px;
  margin: auto;
  margin-top: 35px;
  text-align: center;
}


.parametri{
  width: 1400px;

  margin: auto;
  
}

.parametri-img {
    margin-top: 100px;
}
.parametri-img img{
  width: 100%;
}



.sivi-fw{
  width: 100vw;
height: 291px;
background-color: #F7F7F7;
place-items: center;
display: flex;
text-align: center;
justify-content: center;
margin-top: 127px;



}

.sivi-fw h1{
  font-family: var(--pop);
font-weight: 600;

font-size: 36px;

line-height: 100%;

text-align: center;
width: 1400px;


}


.p-563{
  width: 563px;
  margin: auto;
  margin-top: 35px;
  text-align: center;
  margin-bottom: 70px;
}




    .accordion {
     width: 1400px;
   margin: auto;
   
      overflow: hidden;
    }

    

    .accordion-item:last-child {
      border-bottom: none;
    }

    .accordion-title {
      cursor: pointer;
      
        margin: auto;

font-weight: 700;

font-size: 24px;

line-height: 143%;
color: black;
margin-top: 18px;
margin-bottom: 18px;
font-family: var(--rob);
margin-left: 37px;
width:42%;
    }

   
    /* Skrivanje naslova kada je element aktivan */
    .accordion-item.active .accordion-title {
      display: none; /* Ključna izmjena: Sakriva naslov kada je element aktivan */
    }

  

    .accordion-content {
      display: none; /* Inicijalno je skriveno */
     
      

     display: flex;
     justify-content: space-between;
      
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.5s ease-out, padding 0.5s ease-out;
    }

    .accordion-item.active .accordion-content {
      display: flex; /* Prikazuje se kada je aktivno */
     
      max-height: 520px; /* Možeš postaviti i veću vrijednost ako imaš puno sadržaja */
    }

    .text-wrapper {
            background: linear-gradient(269.82deg, #FFFFFF 0.15%, #F0F0F0 99.85%);

      border: 1px solid #D9D9D9;
      border-radius: 5px;
      
      width: 576px;
      height: auto;
    }

    .text-wrapper p{
        width: 502px;
        margin: auto;

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

font-size: 16px;
color: black;
line-height: 150%;
margin-bottom: 39px;


    }

    .text-wrapper h3 {
      width: 502px;
        margin: auto;

font-weight: 700;

font-size: 24px;

line-height: 143%;
color: black;
margin-top: 32px;
margin-bottom: 32px;
font-family: var(--rob);



    }

    .accordion-content img {
      width: 800px;
      height: 415px;
      border-radius: 8px;
     
    }


  



.p-1117{
  width: 1117px;
  margin: auto;
  margin-top: 35px;
  text-align: center;
}




.h-769{

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

font-size: 24px;

line-height: 150%;

text-align: center;

color: #3C3C3C;
width: 769px;
margin: auto;
margin-top:56px



}

.procenti{
  width:1400px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  margin-top: 35px;
}

.procenti .kartica{
  width: 440px;
height: 155px;

border-radius: 5px;
    border: 1px solid #EFEFEF;
    box-shadow: 0px 0px 25px 0px #0000001A;
    text-align: center;


}

.procenti .kartica h1{
  color: var(--primary);
  font-family: var(--rob);
font-weight: 700;

font-size: 48px;

line-height: 100%;

text-align: center;
margin-top:30px;
margin-bottom: 0px;

}

.procenti .kartica p{
  font-family: var(--rob);
font-weight: 400;

font-size: 16px;

line-height: 100%;

text-align: center;
margin-top: 20px;

}

.procenti.flex-center{
  justify-content: center;
  gap: 57px;
}





.p-611{
  width: 611px;
  margin: auto;
  margin-top: 35px;
  text-align: center;
}


.utjecaj{
  width: 1400px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  margin-top: 70px;
  margin-bottom: 220px;
}

.utjecaj .kartica{

  border-radius: 5px;
    border: 1px solid #EFEFEF;
    box-shadow: 0px 0px 25px 0px #0000001A;
    width: 440px;
    height: 281px;

}

.utjecaj .kartica .upper{
  display: flex;
  margin-top: 33px;
  margin-left: 47px;
}

.utjecaj .kartica .upper img{
  margin-right: 6px;
}

.utjecaj .kartica .upper h2{
  font-family: var(--rob);
font-weight: 700;

font-size: 24px;

line-height: 143%;
margin-top: 0;
margin-bottom: 0;


}

.utjecaj .kartica ul{
  font-family: var(--rob);
font-weight: 400;

font-size: 16px;

line-height: 150%;
letter-spacing: 0%;
margin-left: 25px;
margin-top: 25px;
width: 350px;

}


















.p-0000{
  width: 0000px;
  margin: auto;
  margin-top: 35px;
  text-align: center;
}


  @media screen and (max-width:1400px){
      .landing .first h1 {
          font-size:48px;
      }
      .accordion-title{
          width:90%;
      }
      
.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,
.landing,.parametri,.accordion,  .procenti, .utjecaj, .nosivi-uredjaji
{
  width: 100vw;
  max-width: 100vw;
}


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


}

.landing{
  margin-top: 0;
  margin-bottom: 50px;
}
.zatvori {
    position: absolute;
    top: -20vw;
    right: 0vw;
}

.video-pop{
  width: 80vw;
}

.utjecaj .kartica ul{
  width: 70vw;
}

.utjecaj .kartica{
  width: 90vw;
  margin: auto;
  margin-bottom: 5vw;
}

.utjecaj{
  flex-direction: column;
  margin-bottom: 50px;
}

.procenti{
  flex-direction: column;
}
.procenti .kartica{
  width: 90vw;
  margin: auto;
  margin-top: 5vw;
}

.h-769{
  width: 90vw;
  margin: auto;
  margin-top: 50px;
}
.accordion-content img{
  width: 90vw;
  height: auto;
}

.text-wrapper h3{
  width: 80vw;
}
.text-wrapper{
  width: 90vw;
  margin: auto;
}

.text-wrapper p{
  width: 80vw;
  margin: auto;
          padding-bottom: 30px;

}

.accordion-item.active .accordion-content {
  flex-direction: column;
  max-height: 1000px;
}
.main-heading{
  margin-top: 50px;
}

.sivi-fw h1{
  width: 90vw;
}

.sivi-fw{
  margin-top: 50px;
}

.parametri-img{
  margin-top: 50px;
}

.dupli .d1 img{
  width: 90vw;
  margin: auto;
  margin-left: 5vw;
  margin-top: 50px;
}

.dupli .d2 p{
  width: 90vw;
  margin: auto;
  text-align: center;
  margin-top: 50px;
}

.dupli .d2 h1{
  width: 90vw;
  margin: auto;
  text-align: center;
}


.dupli .d2 img{
  width: 100vw;
  margin-top: 50px;
}

.dupli .d1 p{
  width: 90vw;
  margin: auto;
  margin-top: 50px;
  text-align: center;
}
.dupli{
  width: 100vw;
  flex-direction: column;
}
.mt-137{
  flex-direction: column-reverse;
  width: 100vw;
}

.dupli .d1 h1{
  width: 90vw;
  text-align: center;
  margin: auto;
}

.nosivi-uredjaji{
  margin-bottom: 50px;
}

.nu-kartice .kartica{
  width: 90vw;
  margin:auto;
  margin-bottom: 10vw;
}

.nu-kartice{
  flex-direction: column;
}

.nu-upper p{
  width: 90vw;
  margin: auto;
  text-align: center;
}

.nu-upper h1{
  width: 100vw;
  text-align: center;
}

.nosivi-uredjaji .nu-upper{
  flex-direction: column;
}


.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;
}

.rjesenje-kartice{
  width: 100vw;
  flex-direction: column;
}

.rjesenje-kartice .kartica{
  width: 90vw;
  margin: auto;
  margin-bottom: 10vw;
  height:auto;
  padding-bottom:25px;
}

.rjesenje-kartice .kartica p {
    width:80vw;
}

.landing .first h1 strong {
    font-size:48px;
}

.kontakt .kontakt-left span a {
    font-size:14px;
}
.kartice-div{
  padding-top: 50px;
  padding-bottom: 50px;
}
.kartice-div .kartice .kartica {
  width: 90vw;
  margin: auto;
  margin-bottom: 5vw;
}
.kartice-div .kartice {
    width: 100vw;
    margin: auto;
    display: flex;
    flex-direction: column;
}
.lan-tekst p {
  width: 75vw;
}

.landing .lan-tekst {
  width: 90vw;
  margin: auto;
  margin-top: 50px;
  height: auto;
  
}

.landing .second{
  width: 90vw;
  background-position: center;
 
  margin: auto;
  margin-top: 50px;
}

.landing .first {
    width: 90vw;
    height: auto;
    margin: auto;
}

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;
}



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: 5vw;
  }

.izbornik div {
    display: flex
;
    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;
}

.main-header nav .demo{
  display: none;
}

  }