/* html, body{
    margin: 0;
    padding: 0; 
    width: 100%;
    height: 100%;
} */

/* ============= CSS RESET =========== */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

input, button, textarea {
    font: inherit;
}

svg {
  margin-left: 3px;
  margin-right: 3px;
}

/* ------------- CSS RESET -------------------------- */

/* ================= PROMENLJIVE =================== */

:root {

  /* -- FONTOVI -- */
  --FFAMILY: sans-serif;
  --F_HEADER_H: "verdana", sans-serif;
  --F_HEADER_P: "arial", sans-serif;
  --FS: clamp(1rem, 2.2vh, 1.5rem); 
  /* ------------- */
  
  /* -- BOJE -- */
    --BG_HTML_IMG: linear-gradient(to right, rgb(99, 167, 108), papayawhip, rgb(99, 167, 108));
    /* --BG_HEADER_IMG: linear-gradient(rgb(0, 255, 21), rgb(0, 149, 35)); */
    --BG_HEADER_IMG: rgb(99, 167, 108);
    --BORDURA_BODY_BOJA: rgb(0, 39, 0);    
  /* ---------- */

  /* -- BORDURE -- */
    --BORDURA_BODY: 1px solid var(--BORDURA_BODY_BOJA);
    --BORDER-RADIUS: 15px;
  /* ---------- */

}
/* ..............PROMENLJIVE.......................... */


/* ================= OSNOVNE POSTAVKE =============== */

html {
  scroll-behavior: smooth;
  /* font-size: var(--FS); */
  font-family: var(--FFAMILY);
  background-image: var(--BG_HTML_IMG); 
} 

body { 
  /* color: var(--FONT-COLOR); */
  min-height: 100vh; 
  max-width: 1200px; 
  margin: 0 auto;   /* 0 za top i bottom, auto za levo i desno (centrirace se body)*/
  border-left: var(--BORDURA_BODY);
  border-right: var(--BORDURA_BODY);
  /* box-shadow: 0 0 10px var(--BORDER-COLOR);  */
  /* background-color: orange;  */
  background-color:  papayawhip; 
}  

 /* main { */
    /* height: 100%; */
    /* width: 100%; */
    /* font-size: 1rem; */
    /* background-size: cover; */
    /* background-image: linear-gradient(rgb(255, 252, 65), rgb(32, 255, 62)); 
}   */

/* .icon::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
} */
 /*................ OSNOVNE POSTAVKE .............. */

/*----- ZAJEDNICKO ---------------------*/

nav {
  background-color: #333333;
  /* color: papayawhip; */ /*mora u ul i li elementima da se navede, jer vec imaju default boje koje ce da override-uju ovo*/
}

li {
  display: flex;
  align-items: center;
}

li a {
  color: papayawhip;
  text-decoration: none;  
} 

li a:hover {
  color:yellow;
  text-decoration: underline;
  outline: 2px solid limegreen;
}

h2{
text-align: center;
}

/* *************************** HEADER ********************************************* */

/* ---------header__nav adrese----------*/

/*......................................*/
/* ---------+header__ul adrese----------*/
.header__ul {
  display: flex;
  justify-content: space-evenly;
  list-style-type: none;
  align-items: center;

  font-family: 'arial';
  font-size: 2rem;
  padding: 5px;
  margin: 0;
  overflow-y: hidden;
}

.adrese {
  font-size: 1.1rem;
  flex-wrap: wrap;
  list-style-type: none;
}
/*......................................*/
/* -------- header__title --------------*/
.header__title{
  display: grid;
  grid-template-columns: 20% 80%;
  width: 100%; /* od maksimalnih 800px, body width-a */ 
  box-sizing: border-box;
  background-color: var(--BG_HEADER_IMG);
  background-origin: border-box;
  border: 12px  double rgb(0, 47, 20);
  min-height: 180px;
}

#header__title_slika {
  display: flex;
  background-color: transparent;
  
  justify-self: center;
  align-self: center;
}

.header__title_naslov {
  display: flex;
  flex-wrap:wrap;
  flex-direction: column; /*main axis - vertikalna osa*/
  align-items: center; /*cross axis -  horizontalna osa*/
  justify-content: center;
}

.header__title_naslov_h1 {
  font-size: 2rem;
  font-family: var(--F_HEADER_H);
} 

.header__title_naslov_p {
  font-family:'Arial';
  font-size: 1.5rem;
}
/*......................................*/
/*---header__nav_veliki__meni-----------*/
.dgmMaliMeni {
  background-color: transparent;
  width: 48px;
  height: 48px;
  display:flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 2px;
  left: 1rem;
  border:2px solid rgb(0, 47, 20);
}

.dgmMaliMeni__ikonica::before,
.dgmMaliMeni__ikonica::after {
    content: "";
}

.dgmMaliMeni__ikonica,
.dgmMaliMeni__ikonica::before,
.dgmMaliMeni__ikonica::after {
    background-color: limegreen;
    width: 40px;
    height: 5px;
    border-radius: 5px;
    position: absolute;
    transition: all 0.5s;
}

 .dgmMaliMeni__ikonica::before {
  transform: translate(-20px, -12px);
}

.dgmMaliMeni__ikonica::after {
  transform: translate(-20px, 12px);
}

.mali_meni__ul {
  position: absolute; 
  z-index: 20;
  display:none;  
  list-style-type: none;
  background-color: #333333;
  flex-flow: column nowrap;
  transition: 0.5s;
}

.mali_meni__li {
  padding: 0.5rem;
  transition: 0.5s;
  /* border-top: 1px solid var(--HEADER-COLOR); */
}

.mali_meni__a {
  display: block;
  text-align: center;
  width: 80%;
  margin: auto;
  transition: 0.3s;
}

.mali_meni__a:any-link {
  /* color: var(--HEADER-COLOR); */
  font-weight: bold;
  text-decoration: none;
}

.mali_meni__a:hover, .mali_meni__a:focus {
  transform: scale(1.2);
  transition: all 0.3s;
}

.prvi_odeljak {
  display: flow-root; 
  overflow: auto;
  z-index:0;
  
  text-align: left;
  
  padding: 10px;
  border: 1px dashed black;
  margin: 0.7rem;
}

.prvi_odeljak p{
margin: 10px;
}


/*---------SLAJD SLIKA ------------ */
.slideshow-container {
  max-width: 1000px;
  /* max-height: 600px; */
  /* height: auto; */
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
  border: 6px double rgb(0, 78, 12);
  border-radius:6px;
}

.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.mySlides {
  display: none;
}

.active {
  background-color: #717171;
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
/*...........-SLAJD SLIKA .............. */

/* ============== FOOTER ============= */

footer {
  display: flex; 
  padding:1rem;
  background-color: rgb(50, 50, 50);
  justify-content: space-between;
  color: papayawhip;
  flex-wrap: wrap;
}

.poslednjiodeljak__podnaslov {
  /* font-size: 1rem; */
  color: rgb(166, 255, 0);
}

.prvakol, .drugakol, .trecakol {
  /* display: inline-block; */
  margin: 15px;  
}
/*......................................*/
/*........................ ZAJEDNICKO ..................*/

/* 11111111111111111111111111111111111 POCETNA 111111111111111111111111111111111111111111 */

.Dobrodoslica {
  font-size: xx-large;
  font-weight: bold;
  text-align: center;
}

.drugi_odeljak {
  display: flow-root;   
  padding: 1rem;
  border: 1px dashed black;
  margin: 1rem;
}

.drugi_odeljak iframe {
  float: left;
  margin-right: 1rem ;
  width: 60%;
}

.drugi_odeljak p {
  text-align: right;
}

/* .SlajdSlika {
  object-fit: scale-down; 
  max-height: 600px;
  height: auto; 
} */



/* ............................ POCETNA ........................... */

/* 22222222222222222222222222 USLUGE 222222222222222222222222222222 */

/* ---------COLLAPSIBLE -----------*/

.lista_usluga {
  width: 100%;
  text-align: center;
}

.lista_usluga__btn {
    background-color: #777;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 95%;
    border: 2px solid black ;
    text-align: center;
    outline: none;
    font-size: 15px;
  }
  
  .active, .lista_usluga__btn:hover {
    background-color: #555; 
  }
  
  .content {
    padding: 5px 18px;
    width: 95%;
    border: 2px solid black ;
    display: none;
    margin: auto;
    overflow: hidden;
    background-color: #f1f1f1;
  }
/* .............COLLAPSIBLE .........................-*/
/* ................. USLUGE ............................. */

/* 333333333333333333333 PET SHOP 33333333333333333333333333 */

/* ..................... PET SHOP .......................... */

/* 4444444444444444444444444 O NAMA 4444444444444444444444444
/* || PROFILE CARD */
.profili {
  display: flex;
  justify-content: space-evenly;
  align-content:center; 
}

/* .profile1 {

} */

.card {
    scroll-margin-top: 8rem;
    width: min(100%, 350px);
    background-color: #cbd5e1;
    border: 2px solid black;
    border-radius: 15px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card figure {
    display: flex;
    flex-flow: column nowrap;
}

.card img {
    border: 5px double #333;
    /*border-radius: 50%;*/
}

.card figcaption {
    font-weight: bolder;
    font-size: 2rem;
    margin: 1rem;
    text-align: center;
}
/* ..................... O NAMA .......................... */

/*555555555555555555555 KONTAKT 55555555555555555555555555 */

  .mapa iframe {
    width:100%;
  }

    .main__article {
    padding: 1rem;
    border: 1px dashed black;
    margin: 1rem;
} 

.main__article h1,
.main__article h2,
.main__article address{
  font-size: 2rem;
} 

/*    .main__article:first-child {
  margin-top: 1em;
}

.main__article:last-child {
  min-height: calc(100vh - 20rem);
}   */ 

.contact__h2 {
  margin: 0;
}

.contact__fieldset {
  border: none;
}

.contact__p {
  margin: 1em 0;
}

.contact__label {
  display: block;
  font-size: 2rem;
  font-weight: bold;
}

.contact__input,
.contact__textarea {
  padding: 0.5em;
  border-radius: var(--BORDER-RADIUS);
  border-width: 2px;
  width: 100%;
  
}

.contact__button {
  padding: 0.5em;
  border-radius: var(--BORDER-RADIUS);
  background-color: var(--HIGHLIGHT-COLOR);
  color: var(--BUTTON-COLOR);
  font-weight: bold;
}  

  /* ..................... KONTAKT .......................... */



/* ================= MEDIA SCREEN =================== */

/* On smaller screens, decrease text size */
/* @media only screen and (max-width: 300px) {
  .text {font-size: 11px}
} */

/* II SMALL  < 576px */
@media screen and (max-width: 576px) {

  svg {
    width: 20px;
    height: 20px;
  } 

  .prvi_odeljak {
    font-size: 1em;
  }

  .prvi_odeljak img {
    float: none;
    margin: auto;
  }

  .drugi_odeljak {
    font-size: 1em;
  }

}

  /* II SMALL  > 576px */
  @media screen and (min-width: 576px) {

    svg {
     width: 30px;
     height: 30px;
   } 

    .prvi_odeljak {
    font-size: 1.3rem;
  } 

   .prvi_odeljak img {
    float: left;
    margin-right: 5px;
    margin-bottom: 10px;
   }

  .drugi_odeljak {
    font-size: 1.5em;
  }
   
 
 }

 /* II MEDIUM */
@media screen and (min-width: 768px) {

  svg {
    width:35px;
    height: 35px;
    align-self: center;
    justify-self: center;
    display: flex;
  } 

  .dgmMaliMeni, .mali_meni__ul, .mali_meni__li, .mali_meni__a {
    display: none;
  }

    .prvi_odeljak {
    font-size: 1.5em;
  }

}

@media screen and (max-width: 768px) {
  .veliki_meni {
    display: none;
  }

   /* svg {
    width: 30px;
    height: 30px;
  }  */
  

  #header__nav_veliki__meni {
    min-height: 54px;
  }

  .adrese {
    font-size: 0.8rem;
  }



  .Dobrodoslica {
    font-size: x-large;
  }

  header p {
    font-size: small;
  }

  .drugi_odeljak iframe {
    margin-right: 1rem ;
    width: 100%;
  }

}

/* II LARGE */
@media screen and (min-width: 992px) {
 /*  svg {
    width:40px;
    height: 40px;
  }  */
} 

/* II XL */
@media screen and (min-width: 1200px) {

}

/* ================================================== */