/*  reset styles */
html{ width:100%; height:100%;}
body{ width:100%; height:100%; }
html, body{  margin:0; padding:0; scroll-behavior: smooth;  }
body *{ margin:0; padding:0; box-sizing:border-box;font-family: var(--font3);}
a{ text-decoration:none; }
ol, ul{ list-style-type:none; }
/* @import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Judson:ital,wght@0,400;0,700;1,400&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:ital,wght@0,300;0,400;0,500;0,700;1,300;1,900&family=Judson:ital,wght@0,400;0,700;1,400&display=swap'); */

:root{
    --green:#aeca36;
    --red:#B40818;
    --grey:rgb(61, 61, 61);
    --transitionIn:all .3s ease-in;
    --transitionOut:all .3s ease-out;
    /* --font1:'Architects Daughter', cursive; */
    /* --font2:'Judson', serif; */
    /* --font3:'Fira Sans Extra Condensed', sans-serif; */
    --font3:'Fira Sans Extra Condensed', sans-serif;
    --bottom-shadow:0 8px 6px -6px var(--grey);
    /* --hover-shadow:0px 10px 10px -7px #410f06, 5px 5px 10px 5px rgba(0,0,0,0); */
    --hover-shadow:0px 10px 10px -7px #180906;
}
a:hover{
    transition: var(--transitionIn);
    text-decoration: none;;
}
hr{
    height: 5px;
    background-color: var(--green);
    border:none;
}
h3{
    width: 260px;
    background-color:var(--red);
    background-color:var(--green);
    color:rgba(0, 0, 0, 0.781);
    color:var(--grey);
    padding: 5px;
    border-radius: 0 25px 0 0 ;
}
a.mail{
    background-color:var(--red);
}
a.viber{
    background-color: #79509A;
}
.border1{
    border:1px solid black;
}
.usluga{
    padding:13vh 50px 0 50px;
}
nav{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    background-color:white;
    /* background-color:blue; */
    min-height: 12vh;
    position: fixed;
    width: 100%;
    top:0;
    box-shadow: var(--bottom-shadow);
    z-index: 100;
}
.logo{
    width: 15%;
    text-align:center;
}
.logo img{
    width: 180px;
    width: 150px;
    width: 230px;
    height: auto;
}
.nav-links{
    display: flex;
    justify-content: space-evenly;
    width: 45%;
}
.nav-links li{
    list-style: none;
}
.nav-links li a {
    color:var(--red);
    padding: 10px;
    font-size: 1em;
    font-family: var(--font3);
    text-transform: uppercase;
    font-weight: 500;
    border-radius: 0px 0px 15px 15px;
    background:linear-gradient(to bottom, var(--red) 0%, var(--red) 100%);
    background-position: 100% 0%;
    background-repeat: repeat-x;
    background-size: 4px 2px;
    transition: background-size .5s;
}
.nav-links li a:hover {
    background-size: 4px 50px;
    color:white!important;
}
@keyframes navLinkFade{
    from{
        opacity: 0;
        transform: translateX(50px);
    }
    to{
        opacity: 1;
        transform: translateX(0px);
    }
}
.burger{
    display: none;
    cursor: pointer;
}
.burger div{
    width: 25px;
    /* width: 20px; */
    height: 3px;
    margin:5px;
    /* margin:4px; */
    background-color: var(--red);
    transition: all 0.3s ease;
}
.logo>div.burger{
    display: none;
}

/* #phone {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    font-size:1.4em;
    font-weight: bold;
    width: 20%;
}
#phone a i{
    color:var(--green);
    font-size: 2em;

}
#phone span{
    color: var(--red);
    border: 3px solid var(--green);
    padding: 5px;
    border-radius: 25px;
    transition: var(--transitionOut);
}
#phone span:hover{
    background-color:var(--red) ; 
    color: white;
    cursor: pointer;
} */


#meniViber {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    font-weight: 400;
    width: 20%;
}
#meniViber a{
    background-color: #79509A;
    color:white;
    width: 80%;
    font-size: 1.2em;
}
#meniViber a i{
    margin-left: 5px;
}

#phone {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    /* font-weight: 400; */
    width: 40%;
}
#phone a{
    background-color: var(--green);
    color:white;
    width: 80%;
    /* font-size: 1.2em; */
    /* border-radius: 17px; */
}
#phone a i{
    margin-left: 5px;
}

#viberItel{
    
    /* flex-direction: column; */
    width: 25%;
    /* align-items: center; */
    justify-content: center;
    /* order:1 */
    
}
#viberItel a{
    
    /* display: inline-block; */
    width:46%;
    font-size:1em;
    color:var(--white);
    /* padding:5px; */
    /* margin:2.5px */
    height: 1.6em;
}
#viberItel a:first-child{
    background-color: var(--green);
}
#viberItel a i{
    margin-left: 5px;
}


.toggle .line1{
    transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
    opacity: 0;
}
.toggle .line3{
    transform: rotate(45deg) translate(-5px, -6px);
}


#pozadina{
    padding-top: 12vh;
    background-image: linear-gradient( rgba(255, 255, 255, 0.178),#ebebe8fd),url('images/mapa.png');
    background-attachment: fixed;
    background-position:center;
    background-repeat: no-repeat;
    background-size: auto;
}
h1{
    background-color:var(--red);
    color: white;
    padding: 10px;
    text-align: center;
    letter-spacing: 3px;
}
#naslovna{
    display: flex;
    flex-wrap: wrap;
}
#naslovna .dete{
    min-width:300px;
    width: 30%;
    justify-content: space-between;
}
.opisi{
    text-align: center;
    padding:20px 50px 0px 50px;   
    color:black
}
.opisi p.menu-item-description{
    padding: 5px;
}
#paketi{
    padding: 15px;
}
.paket{
    display: flex;
    height: 100px;
    background-color: rgba(194, 192, 192, 0.479);
    box-shadow: var(--bottom-shadow);
    transition: var(--transitionOut);
    margin:10px auto;
    color:black
}
.paket:hover{
    border-radius: 0 0 45px 0 ;
    box-shadow: var(--hover-shadow);
    cursor: pointer;
    color:black;
}

.paket span{
    background-color: var(--red);
    color:white;
    writing-mode: vertical-lr; 
    transform: rotate(180deg);
    text-align: center;
}
.paket div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    padding: 10px;
}

#zastavice{
    margin:0 auto;
    margin-top: 20px;
}
#zastavice h4{
    text-align: center;
    margin-top: 20px;

}
#zastavice a{
    text-decoration: none;
    color:var(--grey)
}
#zastavice a.zaMapu{
    background-color: var(--green);
    padding: 5px;
    display: block;
    margin: 10px auto;
    width: 200px;
    text-align: center;
    border-radius: 25px;
    background-color: white;
    background-color: var(--green);
    color:var(--green);
    color: var(--red);
    color: white;
    /* border: 3px solid var(--green); */
    /* border: 3px solid var(--green); */
    /* border: 3px solid white; */
    padding: 5px;
    /* border-radius: 25px; */
    transition: var(--transitionOut);
    font-size: 1.4em;
    /* font-weight: bold; */
    
}
#zastavice a.zaMapu:hover{
    /* background-color:var(--red); */
    /* background-color:white; */
    /* background-color:var(--red); */
    /* color:white; */
    /* color:var(--green); */
    box-shadow: var(--hover-shadow);
}
#zastavice h5{
    text-align: center;
    margin-top: 10px;
    
}
#zastavice .opis{
    display:none;
    font-size:1.1em;
    padding: 10px;
    text-align: center;
    margin-top: 20px;
}


.circle-container {
    position: relative;
    width: 20em;
    height: 20em;
    padding: 3.5em;
    margin:0 auto;
    margin-top: 50px;
  }
.circle-container a {
    display: block;
    position: absolute;
    top: 50%; 
    left: 50%;
    width: 5em; 
    height: 5em;
    margin: -2em;
}
.circle-container img { 
    display: block; 
    width: 100%; 
    height: auto;
    transition: var(--transitionOut);
    box-shadow: 0 8px 6px -6px var(--grey);
}
.deg0 { transform: rotate(-13deg) translate(10em) rotate(13deg); } /* 10em = half the width of the wrapper */
.deg36 { transform: rotate(17deg) translate(10em) rotate(-17deg); }
.deg72 { transform: rotate(47deg) translate(10em) rotate(-47deg); }
.deg108 { transform: rotate(92deg) translate(10em) rotate(-92deg); }
.deg144 { transform: rotate(133deg) translate(10em) rotate(-133deg); }
.deg180 { transform: rotate(162deg) translate(10em) rotate(-162deg); }
.deg216 { transform: rotate(193deg) translate(10em) rotate(-193deg); }
.deg252 { transform: rotate(227deg) translate(10em) rotate(-227deg); }
.deg288 { transform: rotate(268deg) translate(10em) rotate(-268deg); }
.deg324 { transform: rotate(313deg) translate(10em) rotate(-313deg); }

.circle-container img:hover{
    transform:scale(1.2);
    /* transition: var(--transitionIn); */
}
.rezultat{
    margin-left: 13px;
    background-image: url('images/pecat.png');
    background-position:center;
    background-repeat: no-repeat;
    background-size: contain;
    width:200px;
    height: 200px;
}

#trece-dete{
    padding: 15px;
}
#trece-dete .opis{
    font-size:1.3em;
    padding: 10px;
    text-align: center;
    
}
#trece-dete i{
    color: var(--green);
    margin-right: 10px;
    font-size: 1.3em;
}
#trece-dete h5{
    font-size:1.4em;
    margin: 10px;
    display: flex;
    align-items: center;
}
.usl{
    margin:10px auto;
    line-height: 1.3em;
    
}
.usl p{
    text-indent: 50px;
    font-size: 1.2em;
    padding: 3px;
}



.menu-item-title{
    text-align: center;
    color:white;
    background-color: var(--red);
    padding: 5px
    /* padding-left: 10px; */
}
.menu-item-description{
    padding: 20px;
    font-size: 1.2em;
    line-height: 1.6em;
    text-indent: 2em;
}



#services-section{
    padding-top: 12vh;
}

/* #services-section .usluga{
    padding:13vh 50px 0 50px;
} */



#services-section .usluga ul{
    list-style-type: disc!important;
    padding: 10px 30px;
    font-size: 1.2em;
    line-height: 1.6em;
}
#paket1 div,
#paket2 div,
#paket3 div,
#paket4 div,
#paket5 div{
    /* background-image: url('images/slika1.jpg');
    background-position:center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 200px;
    filter: sepia(50%);
    border:2px solid var(--red) */
    text-align: center;
} 
#paket1 img,
#paket2 img,
#paket3 img,
#paket4 img,
#paket5 img{
    border:5px solid rgba(182, 179, 179, 0.623);
    /* height: 200px; */
    width:300px;
    /* filter: grayscale(50%); */
    border-radius: 5px;
}
#paket4 img{
    filter: grayscale(60%);
}

#prices-section{
    padding-top: 12vh;
    height: 700px;
}

#upload-section{
    padding-top: 12vh;
}
#upload-section .we{
    background-color:var(--grey);
}
.icon{
    border-radius:  17px;
    width: 2em;
    height: 2em;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition:var(--transitionOut);
    font-size:1.2em;

} 
#upload-section .usluga a img{
    width: 1.4em;
}
#upload-section p.klik{
    margin-left: 60%;
    font-size: 1.3em;
    display:flex;
    justify-content: center;
    align-items: center;
}
#upload-section .klik i{
    color:white;
}


#about-section{
    padding-top: 12vh;
}
#about-section>div{
    display: flex;
    flex-wrap: wrap;
}
#about-section>div div{
    /* flex:0 0 50%; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}
#about-section>div div:first-child{
    flex:0 0 60%;
}
#about-section>div div:nth-child(2){
    flex:0 0 40%;
}
#about-section img{
    width: 500px;
    height: auto;
}

#contact-section{
    padding-top: 12vh;
}
#contact-section h3{
    /* width: 260px;
    background-color:var(--red);
    background-color:var(--green);
    color:rgba(0, 0, 0, 0.781);
    color:var(--grey);
    padding: 10px;
    border-radius: 0 25px 0 0 ; */
}
#contact-section>div{
    padding: 50px;
}
#contact-section>p{
    margin-left:60px
}

.podaci1>div{
    flex:0 0 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    text-align: center;
    padding:30px;
}
#contact-section .podaci1{
    display: flex;
    flex-wrap: wrap;
}
#contact-section .podaci1 p{
    margin-top: 40px;
}
#contact-section .podaci1 p:first-child{
    margin-top: 0px;
}
#contact-section .podaci1 p span{
    font-size: 1.3em;
    font-weight: bold;
    color:var(--grey);
}
#contact-section .podaci1 a{
    font-weight: bold;
    font-size: 1.3em;
    color:var(--grey);
}


#contact-section .icon{
    /* border-radius:  17px; */
    width: 2em;
    height: 2em;
    /* display: inline-flex; */
    /* justify-content: center; */
    /* align-items: center; */
    /* transition:var(--transitionOut); */
    font-size:1.2em;
}
/* #contact-section .icon:hover{
    box-shadow: var(--hover-shadow);
} */
.icon:hover{
    box-shadow: var(--hover-shadow);
}
/* #contact-section .icon i{
    color: white;
} */
.icon i{
    color: white;
}

.podaci1 .tel{
    background-color:orange;
}

.podaci1 #blabla{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 150px;
}
/* .podaci1 a.viber{
    background-color: #79509A;
} */

.podaci1 a.whatsApp{
    background-color:#4BA932;
}

.podaci1 img{
    width:1.7em;
    height: auto;
}
.podaci1 a:first-child img{
    width:1.4em;
}
form{
    flex:0 0 50%;
    display: flex;
    flex-direction: column;
    padding:30px;
}
form label{
    color:var(--grey);
    font-size: 1.2em;
    font-weight: 500;
}
input,
textarea {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 25px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: none;
    font-weight: 500;
}
textarea{
    height: 150px;
}
::placeholder {
    color:var(--grey);
}
input[type=submit] {
    background:var(--green);
    color: white;
    padding: 10px;
    border: 3px solid var(--green);
    border-radius: 25px;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: 500;
    width:150px;
    align-self: center;
    height: 50px;
    transition:var(--transitionOut) ;
} 
input[type=submit]:hover {
    background-color: white;
    box-shadow: var(--hover-shadow);
    color: var(--green);
}

#contact-section .podaci2{
    display: flex;
    flex-wrap: wrap;
}
#contact-section .podaci2>div{
    flex:0 0 50%;
    font-size: 1.2em;
    padding:30px;
    text-align: center;
}
#contact-section .podaci2 #adrese{
    display: flex;
    flex-direction: column;
    justify-content:space-evenly;
    /* justify-content:space-around; */
    align-items: center;
}
#contact-section #social-networks a{
    margin:10px;
}
#contact-section #social-networks a:first-child{
    background-color: #395795;
}
#contact-section #social-networks a:nth-child(2){
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);

}
#contact-section #social-networks a:nth-child(3){
    background-color: #D64937;
}
#contact-section #social-networks a:nth-child(4){
    background-color: #F80000;
}
#contact-section .podaci2 #mapa iframe{
    width:500px;
    height: 500px;
    -moz-box-shadow: 0px 0px 13px 2px var(--grey);
    box-shadow: 0px 0px 13px 2px var(--grey);
    /* border-radius: 25px; */
    border: none;
}



#up{
    
    position: fixed;
    bottom: 3%;
    right: 3%;
    /* display: flex; */
    justify-content: center;
    align-items: center;
    background-color:var(--green);
    font-size:1.5em;
    display:none
}
#up i{
    color:var(--grey);
    /* color:var(--green); */
    font-size:1.5em;
}
/* #up:hover{

    
} */
#footer{
    background: rgba(128, 128, 128, 0.226);
    color:var(--grey);
    /* font-weight: 500; */
    /* max-width: 1200px; */
    /* height: 100px; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px;
    box-shadow: 0px -8px 6px -6px var(--grey);
}
#footer>div{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    /* background-color: red; */

}
#footer>div div{
    flex:0 0 40%;
    display: flex;
    flex-direction: column;

}
#footer>div div:nth-child(2){
    text-align: right;
}
#footer div a:hover{
    box-shadow: none!important;
}
#footer a{
    color:var(--grey);
}
#footer p a:hover{
    box-shadow: var(--hover-shadow);
}
#footer .logo img{
    margin-top: -50px;
    margin-bottom: 10px;
}