@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,400;1,200&display=swap');

* {
    margin: 0px;
    padding: 0px;
}

body{
    background-image: url('slike/pozadina2.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    color: #231f20;
    font-family: 'Montserrat', sans-serif;
}

header {
    height: 15vh;
}

/*---navigacija---*/
nav {
    height: 10vh;
    width: 100%;
}

nav ul {
    float: right;
    list-style-type: none;
    position: relative;
    right: 15vw;
    bottom: 0.5vh;
}
  
nav ul li {
    display: inline-block;
}

nav ul li a {
    display: block;
    padding: 6vh 2vw 0vw 3vh;
    text-decoration: none;
    font-size: 18pt;
    font-weight: bold;
    color: #231f20;
}

nav > button {
    float: right;
    position: relative;
    top: 4.2vh;
    right: 4vw;
}

nav ul li a:hover {
    text-decoration: 3px underline;
    text-underline-offset: 1vh;
}

button {
    background-color: #c49a6c;
    color: #231f20;
    font-size: 18pt;
    cursor: pointer;
    padding: 1.5vh 5vh;
    border: none;
    margin: 0 1vh;
    border: 2px solid #c49a6c;
    border-radius: 50vh;
}

.active {
    text-decoration: 3px underline;
    text-underline-offset: 1vh;
    text-decoration-color: #c49a6c;
    color: #c49a6c;
}

/*---Logo---*/
nav > img {
    width: auto;
    height: 300%;
    padding: 0vh 3vw 0vh 0vw;
    position: relative;
    top: -5vh;
    right: 5vh;
}


/*---Slika---*/
main {
    background-image: url(slike/psi.png);
    height: 85vh;
    background-repeat: no-repeat;
    background-size: 40%;
    background-position-x: -3vh;
    background-position-y: 20vh;
}

p{
    width: 50vw;
    margin-left: 35vw;
    position: relative;
    top: 30vh;
    font-size: 30px;
}

div{
    color: white;
    float: left;
    width: 15vw;
    padding-right: 6vw;
    text-align: center;
}

.proizvodi{
    width: 10vw;
}

section{
    margin-left: 20%;
    width: 80vw;
    height: 10vh;
    margin-bottom: 5vh;
}

h1{
    text-align: center;
    margin-bottom: 15vh;
}

h2{
    color: #231f20;
}

.dolje{
    margin-bottom: 5vh;
}

/*
VW - width
VH - height
*/

div > img {
    border: 20px solid rgba(255, 255, 255, 0.651);
    border-radius: 10%;
}

/*
    usluge
*/

.SecUsluge{
    width: 75vw;
    height: 35vh;
    margin-left: 29vw;
}

.usluge{
    display: inline-block;
    margin-left: -7vw;
}

div>img:hover{
    transition: 1s;
    border: 20px solid rgba(71, 56, 56, 0.651);
}

.opis{
    display: none;
    color: #231f20;
}

span{
    cursor: pointer;
}