@import url("https://fonts.googleapis.com/css2?family=Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap");

:root{
  --primary-rdeca: rgb(238, 24, 24);
  --secondary-rdeca: #fd4040;
  --svetlo-siva: #E3E6F3;
  --zelo-svetlo-siva: #f7f7f7;
}




/* Safari/iOS fixi, ki mislm da glih ne delajo neki */

/* Prepreči povečavo teksta na manjših zaslonih */
html {
  -webkit-text-size-adjust: 100%;
}

/* Naj iOS ne doda modre barve linkom (po testu je se zmem modru)*/ 
a {
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  color: inherit;
}






* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Spartan", sans-serif, 'Segoe UI', Tahoma, Geneva, Verdana;
}

html {
  scroll-behavior: smooth;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}


/* Global Styles */

h1 {
  font-size: 50px;
  line-height: 64px;
  color: #222;
}

h2 {
  font-size: 2.8rem;
  line-height: 54px;
  color: #222;
}

h4 {
  font-size: 20px;
  color: #222;
}

h6 {
  font-weight: 700;
  font-size: 12px;
}

p {
  font-size: 1rem;
  margin: 10px 0 20px 0;
  line-height: 1.6;
}

ul {
  margin-left: 15px;
}

li {
  margin-bottom: 10px;
}

.section-p1 {
  padding: 40px 80px;
}

.section-m1 {
  margin: 40px 0;
}

body {
  width: 100%;
  padding-top: 70px;
}


/*fade in animacija (ko prideš do nekega elementa na strani, ta fada*/
.hidden {
  opacity: 0;
  transition: all 1s;
}

.show {
  opacity: 1;
}

@media(prefers-reduced-motion) { /*če se komu ne da glih animacije gledat, se pohitri*/
  .hidden {
    transition: none;
  }
}


#glava {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;                /* višina headerja */
  background-color: var(--svetlo-siva);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  z-index: 1000;
  font-weight: bold;           /* da se "Zaletelj.sp" lepo vidi */
}

#navbar{
    display:flex;
    align-items: center;
    justify-content: center;
}

#navbar li{
    list-style: none;
    padding: 0 20px;
    position: relative;
}

#navbar li a{
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    transition: 0.25s ease;
}

#navbar li a:hover,
#navbar li a.active{
    color: var(--primary-rdeca);
}

#navbar li a.active::after,
#navbar li a:hover::after{
    content: "";
    width: 30%;
    height: 2px;
    background: var(--secondary-rdeca);
    position: absolute;
    bottom: -4px;
    left: 20px;
}


 .drop:hover::after {
  display: none;
}





#mobile{
  display: none;
  align-items: center;
}

#close {
  display: none;/*skrije ikono krizec na vecjih zaslonih*/
}


#naslovnica {
  position: relative;
  height: 90vh;
  width: 100%;
  overflow: hidden;
}

.slika-layer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: top 25% right 0;
  opacity: 0;
  z-index: 1;
  transition: opacity 1s ease-in-out;
  filter: brightness(80%);
}

.slika-layer.zoom-animate {
  animation: zoomEffect 8s ease-in-out forwards;
}

@keyframes zoomEffect {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.05);
  }
}


#slika1 {
  opacity: 1;
}

.naslovnica-vsebina {
  position: relative;
  z-index: 2;
  margin: 0 300px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white; /* po potrebi */
  text-shadow: 1px 1px 1px rgb(0, 0, 0); /* boljša berljivost */
}

 
  #naslovnica h2 {
    font-family: 'Open Sans', sans-serif;
    padding: 20px;
    margin-bottom: 10px;
    color:#1a1a1a;
    font-size: 4rem;
    background-color: rgb(253, 253, 253, 0.87);
    border-radius: 10px; /* Zaobljeni robovi ozadja besedila */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  }

  #naslovnica h1{
    font-family: 'Poppins', sans-serif;
    padding: 20px;
    margin-bottom: 40px;
    font-size: 5rem;
    color: var(--secondary-rdeca);
    background-color: rgb(253, 253, 253, 0.87);
    border-radius: 10px; 
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  }

  #naslovnica h2,
#naslovnica h1 {
  background: rgba(255, 255, 255, 0.7); /* bolj prozorno */
  backdrop-filter: blur(8px); /* blur ozadja (glass effect) */
  border-radius: 12px;
  padding: 15px 25px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  line-height: 1; /* da so vse črke znotraj okvirja */
}

  .gumbNaslovnica{
    font-family: 'Open Sans', sans-serif;
    background-color:var(--primary-rdeca);
    color: white;
    margin-top: 20px;
    font-size: 44px;
    text-shadow: 3px 2px 9px rgb(158, 13, 13); /* boljša berljivost */
    border-radius: 50px;
    padding: 20px;
    border: none;
    text-decoration: none; /*da ni podčrtano besedilo v gumbu*/
    transition: 0.2s ease;
  }

.gumbNaslovnica:hover {
   background-color: #c41919;
  transform: translateX(2px);
}

.gumbNaslovnica:active {
  background-color: white;
  color: black;
  text-shadow: none;
}



#ponudba {
  display: flex;
  margin-top: 40px;
  background-color: var(--zelo-svetlo-siva);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap; /* Da omogoči prelom */
  padding: 50px;
  gap: 40px; /* Razmak med besedilom in krogom */
}

.besedilo p{
  flex: 1;
  font-size: 2rem;
  color: black;
  margin-right: 3rem;
  text-align: center;
  max-width: 500px;
}

.krogSlik {
  position: relative;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 5px solid #333;
}

.slice {
  position: absolute;
  width: 100%;
  height: 100%;
  --y-offset: 0px; /* Default */
  mask: conic-gradient(from var(--rotate), black 0deg 120deg, transparent 120deg);
  -webkit-mask: conic-gradient(from var(--rotate), black 0deg 120deg, transparent 120deg);
  transform: rotate(var(--rotate));
  overflow: hidden;
}

.slice::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -25%;
  left: -25%;
  background-image: inherit;
  background-size: 50%;
  background-position: center var(--y-offset, 0px);
  transform: rotate(calc(-1 * var(--rotate))); /* Obrnemo sliko nazaj */
}

#slika1 { --y-offset: 120px; }
#slika2 { --y-offset: 200px; }
#slika3 { --y-offset: 120px; }












  #feature {
    display: flex;
    align-items: center;
    justify-content:space-evenly;
    flex-wrap: wrap;
  }
  #feature .fe-box {
    width: 280px;
    text-align: center;
    padding: 25px 15px;
    box-shadow: 20px 20px 34px rgba(0, 0, 0, 0.03);
    border: 1px solid #56b86b;
    border-radius: 4px;
    margin: 8em 0 0;
    box-shadow: 1px 1px 12px rgba(70, 62, 221, 0.1);
  }

  #feature .fe-box img {
    height: 200px;
    width: 200px;
    margin-bottom: 10px;
  }

  #feature .fe-box h5 {
   /*display: inline-block;  (zmanjsa pravokotnik pr hiter odziv*/
    padding: 9px 8px 6px 8px;
    line-height: 1;
    color: #000000;
    font-size: 0.9rem;
  }

/* ====== Splošno Section - na splošno o podjetju====== */
#Splošno {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;

  max-width: 1200px;
  margin: 10em auto;
  padding: 3rem 2rem;

  background: var(--zelo-svetlo-siva);
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
  overflow: hidden;
}

/* ----- Text styling ----- */
#Splošno .text {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

#Splošno h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0;
  color: #222;
  line-height: 1.2;
  position: relative;
}

#Splošno h1::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  background: var(--secondary-rdeca); /*chat color je kr nice drgac #e4640f*/
  margin-top: 0.8rem;
  border-radius: 2px;
}

#Splošno p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #444;
  margin: 0;
}

#Splošno strong {
  color: var(--secondary-rdeca);
  font-weight: 600;
}

/* ----- Image styling ----- */
#Splošno .slika {
  display: flex;
  justify-content: center;
  align-items: center;
}

#Splošno img {
  width: 100%;
  max-width: 500px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

#Splošno img:hover {
  transform: scale(1.03);
}



/*dostava*/
#dostava {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(250px, 600px) 1fr;
  align-items: stretch;
  min-height: 400px;

  max-width: 100%;
  margin: auto;
  background: #fff;
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
  overflow: hidden;
}

/* ---- Text ---- */
#dostava .text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 5rem;
  z-index: 2;
}

#dostava h1 {
  font-size: 2rem;
  position: relative;
}

#dostava h1::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background: var(--primary-rdeca, #e4640f);
  margin: 0.8rem auto 0.6rem;
  border-radius: 2px;
}

#dostava p {
   font-size: 1.1rem;
  line-height: 1.7;
  color: #444;
}

#dostava .btn-dostava {
  padding: 0.75rem 1rem;
  margin: auto;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background: var(--primary-rdeca, #e4640f);
  border-radius: 8px;
  transition: background 0.3s ease, transform 0.2s ease;

  width: 300px;       /* ozek, samo kolikor je vsebine */
  min-width: 140px;         /* a vseeno naj ima minimalno širino */
  text-align: center;
}

#dostava .btn-dostava:hover {
  background: #c94f0a; /* malo temnejša rdeča */
  transform: translateY(-2px);
}

/* ---- Slike ---- */
#dostava .slika {
  position: relative;
  overflow: hidden;
}

#dostava .slika img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fade efekti na desktopu (levo/desno) */
#dostava .slika-levo img {
  mask-image: linear-gradient(to right, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 70%, transparent 100%);
}

#dostava .slika-desno img {
  mask-image: linear-gradient(to left, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to left, black 70%, transparent 100%);
}








footer {
  background-color: rgb(0, 0, 0); 
  color: white;
  padding: 40px 20px;
  display: flex;
  justify-content: center; /* da so v vrstici na večjih zaslonih */
  align-items: flex-start;
  gap: 20rem; /* razmik med stolpci */
  flex-wrap: wrap; /* omogoči prelom v novo vrstico */
}

#footer {
  margin-top: 5em;
}

.col {
  flex: 0 1 400px; 
  text-align: left;
  min-width: 200px;
}

h4 {
  margin: 20px 0 30px;
  color: var(--primary-rdeca);
}

footer p {
  color: white;
  line-height: 1.8em;
}

.col a{
  display: block;
  margin: 1rem 0;
}

.col a:hover {
  color: var(--primary-rdeca); /* Spremeni barvo besedila ob premiku miške */
}







/*NOVA MEHANIZACIJA*/

#naslovnica2 {
  background-image: url("slike/produkti.webp");
  width: 100%;
  height: 35vh;
  background-size: cover;
  background-position: center bottom;
  display: flex;
  justify-content: center;
  text-align: center;
  flex-direction: column;
}


#naslovnica2 h1{ /*PONUDBA*/
  color:var(--primary-rdeca);
  font-size: clamp(2.2rem, calc(5vw + 0.5rem), 3.7rem);
  margin-top: 20px;
}

#naslovnica2 h2{
  color:#ffffff;
  font-size: clamp(1.2rem, calc(2vw + 0.2rem), 2.5rem);
  padding: 20px;
  white-space: nowrap; /*ker se je besedilo prelomilo, zato nej ne bo nč white spaca okol da pride v eno vrstico*/
}

#naslovnica2 h1, #naslovnica2 h2 {
  text-stroke: 1px rgba(255, 255, 255, 0.1);
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
  text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.7);  /* x-offset, y-offset, blur-radius, color */
}



#znamke {
  margin: 20px;
  text-align: center;
}

#znamke button {
  margin: 40px 1px ;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
}

#znamke button.active {
  background-color: red;
  color: white;
  font-size: 26px;
  font-weight: bold;
  margin: 40px 3px;
  transform: scale(1.05);

  /* Ključne lastnosti za Safari */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

}

/* Vsi <details> bodo 50% širine */
details {
  width: calc(50% - 20px);
  margin: 10px;
  display: inline-block;
  vertical-align: top;
}

/* Površina na katero klikneš (SLIKA s tekstom) */
.stroj-summary {
  position: relative;
  height: 300px;
  flex: 1 1 calc(50% - 10px); /* poskusi dve v vrsti */
  min-width: 250px;           /* ko je premalo prostora, pade v stolpec */
  box-sizing: border-box;     /* da padding in border ne uničita širine */
  background-size: cover;
  background-position: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  text-shadow: 1px 1px 3px black;
  border-radius: 10px;
  overflow: hidden;
  transition: 0.3s ease;
}

/* Overlay efekt */
.stroj-summary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  transition: background 0.3s ease;
  z-index: 1;
}

/* Hover efekt - malo posvetli */
.stroj-summary:hover::before {
  background: rgba(0, 0, 0, 0.1);
}

.stroj-summary:hover{
  transform: scale(1.01);
  font-size: 2.5rem;
}

/* Tekst na sliki */
.stroj-summary span {
  position: relative;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 5px;
  letter-spacing: 3px;
}

/* Ko se <details> odpre, se spodnji del prikaže */
.stroj-detajli {
  background: rgba(255,255,255,0.9);
  padding: 10px;
  margin-top: 10px;
  border-radius: 10px;
}

/* Grid za modele */
.modeli-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

/* Modeli (kartice) */
.model-kartica {
  position: relative;
  flex: 0 0 calc(50% - 5px);
  min-width: 250px;
  height: 150px;

  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  font-size: 1.5rem;
  color: white;
  text-shadow: 1px 1px 3px black;
  cursor: pointer;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  transition: transform 0.2s ease;
  transition: 0.3s ease;
  overflow: hidden;
  box-sizing: border-box;
}

 .model-kartica#poglejteVse {
    max-width: 400px;
  }


/* Overlay efekt */
.model-kartica::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  transition: background 0.3s ease;
  z-index: 1;
}

/* Tekst na modelu */
.model-kartica span {
  position: relative;           /* da bo nad overlayem */
  font-weight: bold;
  z-index: 2;
}

.model-kartica span#modeliSkupine {
  font-size: 1rem;
  font-weight: normal;
}  

.model-kartica:hover::before {
  background: rgba(0, 0, 0, 0.1);
}

/* Hover efekt na modele */
.model-kartica:hover {
  transform: scale(1.03);
  font-size: 1.7rem;
}


/*MODEL STROJA*/
.imeSlikaOpis{
  background-color: white;
  max-width: 90%;
  margin: auto;
  border-radius: 20px 20px 0 0;
  padding-bottom: 50px;
}

.imeInSlika {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px; /* razmak med levim in desnim delom */
  margin: 30px auto; 
  padding: 20px;
}

.imeModela {
  flex: 1;
  min-width: 200px;
  max-width: 40%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.imeModela h1 {
  font-size: clamp(1.8rem, calc(2vw + 0.5rem), 3.1rem);
}

.imeModela h3 {
  font-size: clamp(0.9rem, calc(1vw + 0.2rem), 1.2rem);
}

ul#bulletPoints {
  list-style: none;
  margin-top: 30px;
  margin-left: 0;
  
}

ul#bulletPoints li {
  position: relative;
  padding-left: 1.8em; /*oddaljenost besedila od puščic*/
  line-height: 1.5;
  font-size: clamp(1.2rem, calc(1vw + 0.4rem), 1.8rem);;
  margin-bottom: 0.5em; /* Razmik med elementi */
}

ul#bulletPoints li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1em; /* Širina kljukice */
  height: 1em; /* Višina kljukice */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234CAF50'><path d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

.galerija {
  flex: 1;
  min-width: 300px;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 30px;
}

#galerija-glavna img {
  min-height: 400px;
  max-height: 600px;
  object-fit: cover;     /* ali: cover, če želiš, da zapolni okvir */
  object-position: center; /* centriraj sliko */
}

#galerija-glavna {
  position: relative;
  text-align: center;
  display: flex;           /* dodaš flex */
  align-items: center;     /* poravna gumbe vertikalno na sredino */
  justify-content: center; /* centrira sliko */
}

#prevStroj,
#nextStroj {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  background-color: white;
  opacity: 50%;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3px 5px 1px;
  border-radius: 50px;
  font-size: 20px;
  font-weight: bold;
  border: none;
  transition: 0.3s ease;
  z-index: 2; /* da ostane nad sliko */
}

/* 🔹 DODANO: večje klik območje (ne spremeni izgleda gumba) */
#prevStroj::before,
#nextStroj::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;   /* širše območje za klik */
  height: 70px;  /* višje območje za klik */
  border-radius: 50%;
  background: transparent;
  pointer-events: auto; /* omogoči klik */
  z-index: 1; /* pod gumbom, da ne vpliva na videz */
}

/* Povečanje gumba ob hover */
#prevStroj:hover,
#nextStroj:hover {
  opacity: 90%;
  width: 40px;
  height: 40px;
  font-size: 25px;
}

/* Klik efekt */
#prevStroj:active,
#nextStroj:active {
  background-color: gray;
  width: 35px;
  height: 35px;
  font-size: 23px;
}

/* Pozicioniranje */
#prevStroj {
  left: 10px;
}

#nextStroj {
  right: 10px;
}


#glavna-slika {
  display: block;
  max-width: 100%;
  height: auto;
}

#thumbnails {
  display: flex;
  justify-content: left; /*slikce so poravnane levo če jih je mnj v spodnji vrstici recimo*/
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}





.skeleton {
  background: linear-gradient(90deg, #ddd, #e7e7e7, #ddd);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 6px;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

#product-container .imeInSlika {
  display: flex;
  gap: 20px;
}

@media (max-width: 768px) {
  #product-container .imeInSlika {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (min-width: 768px) {
  .skeleton.skeleton-line.mobile {
    width: 60% !important;
  }
}

.skeleton-line {
  height: 20px;
  width: 100%;
  margin-bottom: 10px;
}


.skeleton-image {
  width: 800px;
  height: 600px;
}

@media (max-width: 768px) {
  .skeleton-image {
    width: 100%;
    aspect-ratio: 1 / 1; /* kvadrat na mobilu */
    height: auto;
  }
}


.opisStroja {
  background-image: url("slike/stroji/polnoDvorisce.webp");
  background-size: cover; /* slika pokrije cel element */
  background-position: center; /* poravnava na sredino */
  background-repeat: no-repeat; /* brez ponavljanja slike */
  width: 98%; /* zavzame celotno širino starša */
  height: auto; /* višina se prilagodi vsebini */
  padding: min(50px, 8%) 0; /* prostor zgoraj in spodaj, da se vidi ozadje */
  margin: 100px auto;
  border-radius: 10px;
   /* zatemnitev */
  background-color: rgba(0, 0, 0, 0.4); /* prosojna črna */
  background-blend-mode: multiply;      /* zmešaj barvo s sliko */
}

.opis-card {
  background-color: white;
  width: 70%;
  margin: 0 auto;
  padding: min(80px, 8%) min(300px, 8%);
  color: black;
  line-height: 1.6;
  font-size: 1.1rem;
  border-radius: 20px;
  box-shadow: 10px 6px 20px rgba(0,0,0,0.4);
}

.opis-card p {
  font-size: 1.15rem;   /* malo večje kot default */
  line-height: 1.8;     /* bolj “zračno” */
  margin-bottom: 22px;
}

.opis-card ul {
  font-size: 1rem;      /* ostane manjše */
  line-height: 1.6;
  margin: 12px 0 24px 28px;
}

.opis-card li {
  margin-bottom: 6px;
}

/*specifikacije pri produktu*/
#ozadjeSpecifikacij {
  background-color: rgb(59, 54, 54);
}

#specifikacije-container table {
  width: 70%;
  margin: auto;
  border-collapse: collapse;
  background-color: rgb(70, 68, 68);
  color: white;
}

#specifikacije-container td {
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding: 24px 15px;
}

#specifikacije-container tr:hover {
  background-color: rgb(65, 65, 65);
}

tr #prviStolpec {
  font-weight: bold;
}

.tabela-scroll {
  overflow-x: auto;            /* omogoči vodoravni scroll */
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Tabela sama naj ima minimalno širino, da sproži scroll */
.tabela-scroll table {
  width: max-content;
  /*min-width: 400px;*/   /*zaenkrat sm zjebe k kej nuca*/    /* da se sproži vodoravni drsnik, če je premalo prostora */
  border-collapse: collapse;
}

/* Na večjih zaslonih ni potrebe po scrollu */
@media (min-width: 481px) {
  .tabela-scroll {
    overflow-x: visible;
  }
}




.ostali-modeli {
  background-color: white;
  max-width: 90%;
  margin: auto;
  padding: 8em 1em 2em;
}

.ostali-modeli h2 {
  text-align: left;
  margin-bottom: 24px;
  margin-left: 1em;
  font-size: clamp(1rem, calc(2vw + 0.2rem), 2.2rem);
}

.ostali-modeli .modeli-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: flex-start;
}

.ostali-modeli .model-kartica {
  flex: 1 1 calc(25% - 15px); /* 3 v vrsti na večjih zaslonih */
  max-width: 25%;           /* omeji širino */
  min-width: 250px;           /* da ne postane preozko */
}


  /*poziv h kontaktu na dnu strani*/
  #StikZNami {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 8em;
    background-color: white;
    max-width: 90%;
    margin: auto;
  }

  #StikZNami h2 {
    font-size: clamp(1.8rem, calc(3vw + 0.5rem), 3rem);
    color: var(--primary-rdeca);
    margin: 40px auto;
  }

  #StikZNami h3 {
    font-size: clamp(1rem, calc(1.4vw + 0.2rem), 1.8rem);
    margin-bottom: 40px;
  }

  #footer.no-margin {
    margin-top: 0;
  }









/*KONTAKT*/
#naslovnica-kontakt {
  background-image: url("slike/Kontakt.webp");
  width: 100%;
  height: 35vh;
  background-size: cover;
  display: flex;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  padding: 14px;
}

#naslovnica-kontakt h1{
  color:var(--primary-rdeca);
  font-size: clamp(2.2rem, calc(3.3vw + 1rem), 4.2rem);
  padding: 5px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

#naslovnica-kontakt h2{
  color:#ffffff;
  font-size: clamp(1rem, calc(1.2vw + 0.4rem), 2rem);
  padding: 5px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}


#contact-details{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5%;
  margin-top: 30px;
}

#contact-details .details{
  width: 30%;
}

#contact-details .details h2,
#form-details form h2{
  font-size: 1.6rem;
  line-height: 35px;
  padding: 20px 0;
}

#contact-details .details li{
list-style: none;
display: flex;
align-items: flex-start; /* poravna ikono z vrhom besedila */
gap: 8px; /* malo prostora med ikono in tekstom */
padding: 10px 0;
margin: 20px 0;
}

#contact-details .details li i{
font-size: 1.4rem;
padding-right: 22px;
}


.contact-link:hover {
    text-decoration: underline;
}

#contact-details .details li p {
  margin: 0;        /* odstrani default p margine */
  line-height: 1.8; /* boljša berljivost */
  font-size: clamp(1rem, calc(0.8vw + 0.4rem), 1.3rem);
}

#contact-details .details li p#kontakt-opozorilo {
  line-height: 1.8; /* boljša berljivost */
  font-size: 0.8rem;
  background-color: var(--zelo-svetlo-siva);
  border-radius: 2px;
  padding: 10px;
}



#contact-details .map{
  width: 55%;
  height: 600px;
}

#contact-details .map iframe{
  width: 100%;
  height: 100%;
}

form {
  width: 70%;
  background-color: var(--zelo-svetlo-siva);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 100px auto;
  padding: 5em 1em 0 2em;
  border: 1px solid #465b52;
  position: relative;
}

form h2{
  font-size: 2rem;
}

form input,
form textarea{
  width: 50%;
  padding: 12px 15px;
  outline: none;
  margin: 20px 0 0;
  border: 1px solid #e1e1e1;
}

form textarea{
  min-height: 250px;
}

form button{
  display: inline-block;
  padding: 15px 25px;
  margin: 40px 0;
  font-size: 18px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: var(--primary-rdeca);
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

form button:hover {background-color: #a51515}

form button:active {
  background-color: #bd4b4b;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

#opozorilo {
  font-size: 0.6rem;
  margin-top: 6em;
  width: 32%;
  align-self: flex-end; /* potisne p desno znotraj flex containerja */
  text-align: right;    /* besedilo poravna na desno */
  color: gray;
}



 /* Alert Styles */
    .alert-container {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        gap: 15px;
        max-width: 350px;
    }
    
    .alert {
        padding: 16px 20px;
        border-radius: 8px;
        color: white;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
        display: flex;
        align-items: center;
        justify-content: space-between;
        animation: slideIn 0.3s ease-out forwards;
        opacity: 0;
        transform: translateX(100%);
    }
    
    .alert.success {
        background: linear-gradient(to right, #2ecc71, #27ae60);
        border-left: 4px solid #1e8449;
    }
    
    .alert.error {
        background: linear-gradient(to right, #e74c3c, #c0392b);
        border-left: 4px solid #922b21;
    }
    
    .alert-content {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .alert-icon {
        font-size: 24px;
    }
    
    .alert-message {
        font-weight: 500;
    }
    
    .alert-close {
        background: transparent;
        border: none;
        color: white;
        font-size: 20px;
        cursor: pointer;
        padding: 0;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: background 0.2s;
    }
    
    .alert-close:hover {
        background: rgba(255, 255, 255, 0.2);
    }
    
    .progress-bar {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 4px;
        width: 100%;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 0 0 8px 8px;
        overflow: hidden;
    }
    
    .progress-bar::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: rgba(255, 255, 255, 0.7);
        animation: progress 5s linear forwards;
        transform-origin: left;
    }
    
    .alert.success .progress-bar::after {
        background: rgba(255, 255, 255, 0.7);
    }
    
    .alert.error .progress-bar::after {
        background: rgba(255, 255, 255, 0.7);
    }
    
    @keyframes slideIn {
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    @keyframes progress {
        from {
            transform: scaleX(1);
        }
        to {
            transform: scaleX(0);
        }
    }
    
    @keyframes slideOut {
        to {
            opacity: 0;
            transform: translateX(100%);
        }
    }
    
    .fade-out {
        animation: slideOut 0.3s ease-in forwards;
    }
    
    @media (max-width: 600px) {
        .alert-container {
            left: 20px;
            right: 20px;
            max-width: none;
        }
    }





/*DOGODKI*/
#naslovnica-dogodki {
  position: relative;
  background-image: url("slike/dogodki2.webp");
  width: 100%;
  height: 40vh;
  background-size: cover;
  background-position: top 20% right 0%;
  display: flex;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  padding: 14px;
}

#naslovnica-dogodki::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* črna prosojna plast */
  z-index: 0;
}

#naslovnica-dogodki h1,
#naslovnica-dogodki h3 {
  position: relative;
  z-index: 1; /* da sta besedilo in naslov nad plastjo */
}

#naslovnica-dogodki h1{
  color:var(--primary-rdeca);
  font-size: 75px;
  padding: 15px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 2);
}

#naslovnica-dogodki h3{
  color:#ffffff;
  font-size: 22px;
  padding: 5px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 2);
}



#dogodki-container {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
}

#dogodki-container h1 {
  /*font-size: 1.6rem;*/
  font-size: clamp(1.3rem, calc(2vw + 0.5rem), 1.7rem);
  margin-bottom: 0.8em;
  line-height: 2em;
}

.dogodek {
  border-bottom: 1px solid #ccc;
  padding: 40px 0;
}

.dogodek h2 {
  margin-bottom: 10px;
  color: #333;
}

.dogodek p {
  margin-bottom: 10px;
  line-height: 1.6;
}

.dogodek img {
  display: block;
  max-width: 100%;
  margin-bottom: 10px;
  border-radius: 8px;
}

.datum {
  font-size: 0.8em;
  color: #666;
  margin-top: 5px;
}








@media (max-width:1600px){
  footer{
    gap: 14rem;
  }

  #naslovnica h2 {
    font-size: 3rem;
  }

  #naslovnica h1{
    font-size: 4rem;
  }

  .gumbNaslovnica {
    font-size: 36px;
  }



/*KONTAKT*/

form {
  width: 80%;
}

form input,
form textarea{
  width: 60%;
}

#opozorilo {
  width: 40%;
}


}



@media (max-width:1200px){
   footer{
    gap: 10rem;
  }

  .naslovnica-vsebina{
     margin: 0 232px;
  }

  .slika-layer {
    background-position: center center;
  }

   #feature {
    justify-content: space-between; /* elementi se razporedijo čez celotno širino */
    gap: 0px;                         /* razmiki med njimi nastanejo preko calc */
    padding: 10px 20px;
  }

  #feature .fe-box {
    flex: 0 0 25%;   /* 4 na vrstico, enakomerno porazdeljeni */
    max-width: calc(25% - 20px); /* malo manjši, da je prostor za razmike */
  }

  #dostava {
    grid-template-columns: 1fr minmax(250px, 400px) 1fr;
  }

  #dostava .text {
    padding: 2rem;
  }

  /*STROJI*/
  .stroj-summary {
    font-size: 1.6rem;
    padding: 30px;
  }  

  .stroj-summary:hover{
    font-size: 1.7rem;
  }

  /*POSAMEZEN STROJ*/
  .galerija{
    max-width: 65%;
  }

 .imeModela {
   max-width: 35%;
   gap: 0;
 }

 .imeModela h1 {
  font-size: 1.8rem;
 }

 .opisStroja{
  width: 100%;
  border-radius: 0;
  margin: 200px auto;
 }

  .opis-card {
    width: 80%;
  }

  #specifikacije-container table {
    width: 80%;
  }  

  .ostali-modeli {
    padding: 6em 1em 2em;
  }

  .ostali-modeli .model-kartica {
    flex: 1 1 calc(33% - 15px);
    max-width: 32%;
  }

  .model-kartica:hover {
    transform: scale(1.03);
    font-size: 1.6rem;
  }

  #StikZNami {
    padding: 8em 4em;
  }

  #StikZNami h2 {
    margin: 40px auto;
  }

  #StikZNami h3 {
    margin-bottom: 40px;
  }


  /*KONTAKT*/

  form {
    width: 80%;
  }

  form input,
  form textarea{
    width: 70%;
  }

  #opozorilo {
    width: 52%;
  }


}





@media (max-width:992px){

  #feature .fe-box {
    min-height: 240px;
  }

   #feature .fe-box img {
    height: 130px;
    width: 130px;
  }

  footer {
    flex-direction: column;
    align-items: center;   /* centriranje stolpcev horizontalno */
    gap: 2rem;
  }

  footer .col {
    flex: none;           /* odstrani flex lastnosti */
    text-align: center;   /* centriraj besedilo znotraj stolpcev */
  }  
  
  .naslovnica-vsebina{
     margin: 0 160px;
  }

  #dostava {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    min-height: auto;
  }

   #dostava .slika-levo {
    grid-row: 1; /* naj bo prva vrstica */
  }

  #dostava .text {
    grid-row: 2; /* tekst + gumb v sredini */
    max-width: 80%;
    margin: 0.4rem auto;
  }

  #dostava .text p {
    margin-bottom: 1.4rem;
    line-height: 32px;
  }

  #dostava .slika-desno {
    grid-row: 3; /* druga slika spodaj */
  }

  #dostava .slika {
    height: 30vh; /* višina slik na mobilnih */
  }

  #dostava .slika img {
    object-fit: cover;
    width: 95%;
    height: 100%;
    margin: auto;
    border-radius: 20px;
  }

  #dostava .slika-levo img {
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  }

  #dostava .slika-desno img {
    mask-image: linear-gradient(to top, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, black 70%, transparent 100%);
  }

    /*STROJI*/
  details {
    width: 95%;
    margin: 5px auto;
    display: block;  
  }

  /* override minimalnih širinskih omejitev na povzetku */
  .stroj-summary {
    flex: 1 1 95%;
    min-width: 0;
  }



  .opisStroja {
    margin: 160px auto;
  }

  .opis-card {
    width: 85%;
    font-size: 1rem;
  }

  #specifikacije-container table {
    width: 85%;
  }  

  .ostali-modeli {
    padding: 6em 1em 2em;
  }

  .ostali-modeli .model-kartica {
    flex: 1 1 calc(50% - 15px);
    max-width: 50%;
  }

  .model-kartica:hover {
    transform: scale(1.03);
    font-size: 1.5rem;
  }


   /*kontakt*/
  #contact-details{
    padding: 20px;
  }

  #contact-details .details{
    width: 40%;
  }

  #contact-details .map{
  width: 60%;
  height: 600px;
  }

  form h2{
    font-size: 1.8rem;
  }

  form {
    width: 85%;
  }

  form input,
  form textarea{
    width: 90%;
  }

  #opozorilo {
    width: 52%;
  }

}




@media (max-width:768px){
    .section-p1 {
      padding: 40px 40px;
  }
    #navbar {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      position: fixed;
      top: 0;
      right: -300px;
      height: 100vh;
      width: 300px;
      background-color: #E3E6F3;
      box-shadow: 0 40px 60px rgba(0, 0, 0, 0.1);
      padding: 80px 0 0 10px;
      transition: 0.3s;
    }

    #navbar.active {
      right: 0px;
    }

    #navbar li{
      margin-bottom: 25px;
    }

    #mobile{
      display: flex;
      align-items: center;
    }
    #mobile i{
      color: #1a1a1a;
      font-size: 24px;
      padding-left: 20px;
    }

    #close {
      display: initial; /*ikona krizec se pokaze na mobilnih napravah*/
      position: absolute;
      top: 30px;
      left: 30px;
      color: #222;
      font-size: 24px;
    }


  #naslovnica {
    height: 80vh;
    padding: 0 80px;
  }


  #naslovnica h1,
  #naslovnica h2 {
    padding: 20px 32px;
  }

  .naslovnica-vsebina{
     margin: 0 80px;
  }

  #naslovnica h1 {
    font-size: 52px;
  }

  #naslovnica h2 {
    font-size: 44px;
  }

  .gumbNaslovnica {
    font-size: 28px;
  }

  /*ponudba*/
    #ponudba {
      flex-direction: column;
      padding: 30px 20px;
    }

    .besedilo p {
      font-size: 24px;
      margin: auto;
    }
    

    .slice::before{
      background-size: 50%;
    }

  #feature {
    justify-content: center;
    gap: 20px;
    padding: 0 20px; /* Zmanjšal sem padding za boljšo prilegajočost */
    margin: 6em 0 0;
  }
  
  #feature .fe-box {
    flex: 0 0 calc(50% - 20px);
    max-width: calc(50% - 20px);
    min-height: 200px;
    margin: 0.5em 0 0;
    padding: 10px;
  }
  


  #Splošno {
      grid-template-columns: 1fr;
      padding: 2rem 1.5rem;
      gap: 2rem;
      max-width: 90%;
    }

    #Splošno h1 {
      font-size: 2rem;
    }

    #Splošno h1::after {
      margin-left: 0;
      margin-right: 0;
    }

    #Splošno p {
      font-size: 1rem;
      line-height: 1.6;
    }

    #Splošno img {
      max-width: 60%;
    }



  /*STROJI*/
  #naslovnica2 {
    padding: 0 20px;
    max-width: 100%;
    box-sizing: border-box;
    background-position: top 30% right 30%; 
  }

  #znamke {
    margin: 20px;
  }

  #znamke button {
    margin: 20px 0;
    font-size: 12px;
  }

  #znamke button.active {
    font-size: 14px;
  }

  .stroj-summary {
    height: 230px;
  }

  .model-kartica {
    font-size: 1.2rem;
  }

  .model-kartica:hover {
    transform: scale(1.03);
    font-size: 1.3rem;
  }





  /*POSAMEZEN STROJ*/
  .imeModela {
    max-width: 90%;
    gap: 10px;
  }

  .imeInSlika {
    margin: 10px auto; 

  }

  ul#bulletPoints {
    margin-top: 20px;
  }  

  .galerija {
    max-width: 100%;
    padding-top: 20px;
  }

   #galerija-glavna img {
    min-height: 250px;
    max-height: 400px;
  }

  #prevStroj,
  #nextStroj {
    opacity: 70%;
    width: 35px;             
    height: 35px;             
    padding: 3px 5px 1px;
  }

  #prevStroj:hover,
  #nextStroj:hover{
    opacity: 70%;
    width: 35px;
    height: 35px; /*da ostane isto, se ne zgodi nič pri hoverju/pritisku na gumb ker na zaslonih na dotik bi potem samo ostal vedno "hoveran"*/
  }

  #prevStroj:active,
  #nextStroj:active {
    background-color: white;
  }




  .opisStroja {
    margin: 140px auto 50px;
  }  

  #specifikacije-container table {
    width: 90%;
  }  

  #StikZNami {
    padding: 8em 2em;
  }

  #StikZNami h2 {
    margin: 25px auto;
  }




  /*KONTAKT*/

  form {
    width: 85%;
  }

  form input,
  form textarea{
    width: 80%;
  }

  #opozorilo {
    width: 69%;
  }  






  /*dogodki 768*/
  #naslovnica-dogodki {
    height: 40vh;
  }




}




@media (max-width:480px){
  .section-p1 {
    padding: 20px;
  }
#header{
  padding: 10px 30px;
}
h1{
  font-size: 38px;
}

h2{
  font-size: 2rem;
}

#naslovnica {
  padding: 0 20px;
}


#naslovnica h1,
#naslovnica h2 {
  padding: 10px 16px;
}

#naslovnica h1 {
  font-size: 40px;
}

#naslovnica h2 {
  font-size: 36px;
}

.gumbNaslovnica {
  font-size: 20px;
  padding: 8px 16px;
}


/*ponudba*/
#ponudba {
    flex-direction: column;
    padding: 30px 20px;
  }

  .besedilo p {
    font-size: 22px;
    margin: auto;
  }

  .krogSlik{
    width: 260px;
    height: 260px;
  }

  .slice::before{
    background-size: 50%;
  }

    #slika1 {
    --y-offset: 60px;
  }

  #slika2 {
    --y-offset: 100px;
  }

  #slika3 {
    --y-offset: 60px;
  }


  #feature {
    justify-content: center;
    gap: 20px;
    padding: 0px 10px 60px;
  }
  
  #feature .fe-box {
    width: calc(45% - 10px);
    min-height: 180px;
    margin: 0em 0 0.5em;
    padding: 10px;
  }
  
  #feature .fe-box img {
    height: 100px;
    width: 100px;
  }


 #Splošno {
    padding: 1.5rem 1rem;
    margin: 1.5rem;
    gap: 1.5rem;
  }

  #Splošno h1 {
    font-size: 1.6rem;
  }

  #Splošno p {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  #Splošno img {
    max-width: 100%;
    border-radius: 12px;
  }



  #dostava {
    margin-top: 5rem;
  }

  #dostava .text {
    max-width: 100%;
    margin: 0.4rem auto;
  }

  #dostava .slika {
    height: 24vh; /* višina slik na mobilnih */
  }

 #dostava .slika img {
    border-radius: 0;
    margin: 0;
    width: 100%;
  }






  /*STROJI*/
  #naslovnica2 {
    height: 30vh;
    background-position: top 30% right 30%; 
  }

  #naslovnica2 h1{
    padding: 0;
  }  

  #znamke button {
    padding: 10px 15px;
  }

 .model-kartica {
    height: 100px;     /* manjša višina */
    font-size: 1rem;   /* manjši tekst */
    max-width: 90%;
    margin: auto;
    flex: 1 1 100px;    /* ena kartica na vrstico */
  }

 


  /*POSAMEZEN STROJ*/
  body.product-page{ /*na telefonu nej bo sm belo ozadje*/
    background-color: white !important;
  }

  .imeSlikaOpis{
    max-width: 100%;
    border-radius: 0;
  } 

  .imeInSlika {
    margin: 4px auto; 

  }

  .imeModela {
    gap:0px;
  }

  .opisStroja {
    margin: 100px auto 30px;
  }  

  .opis-card {
    width: 92%;
    font-size: 0.9rem;
  }


  .galerija {
    max-width: 100%;
    padding-top: 0px;
  }

 

  #prevStroj,
  #nextStroj {
    width: 29px;             
    height: 29px;
    font-size: 19;             
    padding: 2px 4px 1px;
  }

  #prevStroj:hover,
  #nextStroj:hover{
    width: 29px;
    height: 29px; /*da ostane isto, se ne zgodi nič pri hoverju/pritisku na gumb ker na zaslonih na dotik bi potem samo ostal vedno "hoveran"*/
    font-size: 19px;
  }

  #thumbnails img {
    width: 60px !important;
    height: 60px !important;
  }

  #specifikacije-container table {
    width: 100%;
  }  

  #specifikacije-container td {
    font-size: 0.8rem;
    padding: 24px 10px;
  }

  .tabela-scroll {
    overflow-x: auto;
  }

  /* rahlo poudarimo scrollbar */
  .tabela-scroll::-webkit-scrollbar {
    height: 8px;
  }

  .tabela-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(218, 218, 218, 0.753);
    border-radius: 4px;
  }

  .tabela-scroll::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.1);
  }


  .ostali-modeli {
    padding: 2em 0em 0em;
  }

  .ostali-modeli h2 {
    margin-bottom: 0;
    margin-left: 5px;
  }

  .ostali-modeli .model-kartica {
    height: 80px;
    max-width: 100%; /* da niso čez cel ekran */
  }

  .model-kartica:hover {
    transform: scale(1.03);
    font-size: 1.1rem;
  }

  #StikZNami {
    padding: 6em 0.5em;
  }

  #StikZNami h2 {
    margin: 10px auto;
  }

  #StikZNami h3 {
    margin-bottom: 30px;
  }




  /*Kontakt*/
  #naslovnica-kontakt h1 {
    padding: 0;
  }


  #naslovnica-kontakt {
    height: 30vh;
  }

  #contact-details {
    flex-direction: column;
  }
  #contact-details .details{
    width: 100%;
    margin-bottom: 30px;
  }

  #contact-details .map{
    width: 100%;
  }


  form {
    width: 100%;
    border:none;
    padding: 3em 1em 0 1em;
  }

  form input,
  form textarea{
    width: 95%;
  }







  /*dogodki 480*/
  #naslovnica-dogodki {
    background-position: top 0% right 55%; 
  }

  #naslovnica-dogodki h1{
    font-size: 3.2rem;
  }

  #naslovnica-dogodki h3{
    font-size: 1.3rem;
  }

  #dogodki-container {
    margin: 0px;
    padding: 10px;
  }
 


}