/*=============== GOOGLE FONTS ===============*/
/* Uvoz Google Fonta "Montserrat" koji se koristi na cijeloj stranici */
/* "wght@100..900" znači da se koriste različite težine fonta od 100 do 900 za fleksibilnost */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap");
/*=====================================================================================================================================*/
/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 4rem; /* Visina headera koja se koristi kao varijabla */

  /*========== Colors ==========*/
  /* Boje su definirane u različitim formama - HSL, HEX i gradijent */
  /* Boje se koriste kako bi se osigurala konzistentnost i lakša promjena stila */
  --first-color: #006bb1; /* Primarna plava boja */
  --second-color: #00bdfd; /* Sekundarna plava boja */
  --first-gradient: linear-gradient(90deg,#006bb1, #00bdfd); /* Gradijent između dvije plave boje */
  --title-color: hsl(255, 12%, 12%); /* Boja za naslove - tamna */
  --text-color: hsl(225, 12%, 24%); /* Boja teksta - tamna siva */
  --text-color-light: hsl(255, 4%, 70%); /* Svjetlija siva za tekst */
  --body-color: hsl(0, 0%, 100%); /* Boja pozadine tijela - bijela */
  --container-color: hsl(0, 0%, 100%); /* Boja kontejnera - bijela */
  --white-color: hsl(0, 0%, 100%); /* Bijela boja za različite elemente */
  --black-color: hsl(255, 20%, 10%); /* Crna boja za kontrast */
  --gray-border: hsl(255, 6%, 90%); /* Svijetlosiva boja za rubove */
  --black-border: hsl(255, 10%, 20%); /* Tamnosiva boja za rubove */

  /*========== Font and typography ==========*/
  /* Definiraju se različite veličine fonta za tipografiju */
  /* Jedinica rem se koristi kako bi se tekst proporcionalno prilagodio veličini ekrana */
  --body-font: "Montserrat", sans-serif; /* Font koji se koristi na cijeloj stranici */
  --big-font-size: 2.25rem; /* Veličina velikog fonta za naslove */
  --semi-big-font-size: 2rem; /* Nešto manji veliki font */
  --h1-font-size: 1.5rem; /* Veličina fonta za H1 naslov */
  --h2-font-size: 1.25rem; /* Veličina fonta za H2 naslov */
  --h3-font-size: 1rem; /* Veličina fonta za H3 naslov */
  --normal-font-size: 0.938rem; /* Normalna veličina fonta za osnovni tekst */
  --small-font-size: 0.813rem; /* Manji font za manje tekstove */

  /*========== Font weight ==========*/
  /* Težine fonta koje se koriste za različite elemente na stranici */
  --font-regular: 400; /* Normalna debljina fonta */
  --font-medium: 500; /* Malo deblji font za istaknuti tekst */
  --font-semi-bold: 600; /* Polu-deblji font za naslove i naglašavanje */
  --font-bold: 700; /* Deblji font za naslove i naglašavanje važnih elemenata */

  /*========== z index ==========*/
  /* z-index vrijednosti za upravljanje slojevima elemenata na stranici */
  --z-tooltip: 10; /* z-index za tooltip kako bi bio iznad većine elemenata */
  --z-fixed: 100; /* z-index za fiksirane elemente poput headera */
}

/*========== Responsive typography ==========*/
/* Stilovi za tipografiju koji se primjenjuju kada je širina ekrana veća od 1150px */
@media screen and (min-width: 1150px) {
  :root {
    --big-font-size: 3.5rem; /* Povećava veličinu velikih fontova za veće ekrane */
    --semi-big-font-size: 3rem; /* Povećava veličinu "polu-velikih" fontova */
    --h1-font-size: 2.25rem; /* Povećava veličinu H1 naslova */
    --h2-font-size: 1.5rem; /* Povećava veličinu H2 naslova */
    --h3-font-size: 1.25rem; /* Povećava veličinu H3 naslova */
    --normal-font-size: 1rem; /* Povećava veličinu osnovnog teksta */
    --small-font-size: 0.875rem; /* Povećava veličinu manjeg teksta */
  }
}
/*===============================================================================OSNOVNO=================================================*/
/*=============== BASE ===============*/
/* Osnovni stilovi za resetiranje zadane vrijednosti */
* {
  box-sizing: border-box; /* Svi elementi koriste "border-box" model za izračunavanje širine */
  padding: 0; /* Uklanja zadani padding */
  margin: 0; /* Uklanja zadani margin */
}

html {
  scroll-behavior: smooth; /* Omogućava glatko skrolanje kada se koristi sidreni link */
}

body {
  font-family: var(
    --body-font
  ); /* Definira font koji se koristi za cijelo tijelo stranice */
  font-size: var(--normal-font-size); /* Veličina fonta za osnovni tekst */
  background-color: var(--body-color); /* Pozadinska boja stranice (bijela) */
  color: var(--text-color); /* Boja teksta na stranici (tamnosiva) */
}

/* Stilovi za naslove (H1, H2, H3, H4) */
h1,
h2,
h3,
h4 {
  color: var(--title-color); /* Boja naslova (tamna) */
  font-weight: var(
    --font-semi-bold
  ); /* Polu-deblji font za naglašavanje naslova */
}

/* Stil za listu (ul) - uklanja standardne oznake */
ul {
  list-style: none; /* Uklanja oznake za liste (točkice, brojevi) */
}

/* Stil za linkove (a) */
a {
  text-decoration: none; /* Uklanja standardno podcrtavanje linkova */
}

/* Stil za slike (img) */
img {
  display: block; /* Prikazuje slike kao blok elemente kako bi uklonili razmak ispod slike */
  max-width: 100%; /* Slika se prilagođava širini roditeljskog elementa, bez prelaska granica */
  height: auto; /* Visina slike je proporcionalna originalnim dimenzijama */
  transition: 0.4s; /* Glatka tranzicija koja se može primijeniti prilikom promjene stanja slike */
}

/*==========================================================================================================================*/
/*=============== REUSABLE CSS CLASSES ===============*/

/* Opća klasa za kontejner koji se koristi za ograničavanje širine elemenata i centriranje */
.container {
  max-width: 1120px; /* Maksimalna širina kontejnera kako bi sadržaj bio centriran i konzistentan */
  margin-inline: 1.5rem; /* Dodaje bočne margine kako bi stvorio prostor između rubova prozora i sadržaja */
}

/* Opća klasa za grid (mrežu) */
.grid {
  display: grid; /* Postavljanje elemenata unutar kao mreže (grid) */
  gap: 1.5rem; /* Razmak između elemenata unutar mreže */
}

/* Opća klasa za svaku sekciju na stranici */
.section {
  padding-block: 5rem 1rem; /* Dodaje unutarnji razmak iznad i ispod svake sekcije */
}

/* Stilovi za naslov i podnaslov svake sekcije */
.section__title,
.section__subtitle {
  text-align: center; /* Centriranje naslova i podnaslova unutar sekcije */
}

/* Stil za glavni naslov sekcije */
.section__title {
  font-size: var(
    --h1-font-size
  ); /* Veličina fonta naslova (obično najveći tekst na stranici) */
  font-weight: var(--font-bold); /* Podebljani tekst za naglašavanje naslova */
  margin-bottom: 1.5rem; /* Razmak ispod naslova za odvajanje od drugih elemenata */
}

/* Stil za podnaslov sekcije */
.section__subtitle {
  display: block; /* Prikazuje podnaslov kao blok element (zauzima cijeli red) */
  font-size: var(--normal-font-size); /* Veličina fonta za podnaslov */
  font-weight: var(--font-semi-bold); /* Polu-deblji font za podnaslov */
  color: var(
    --second-color
  ); /* Postavlja boju za podnaslov (obično druga boja za vizualni naglasak) */
  margin-bottom: 0.5rem; /* Razmak ispod podnaslova za odvajanje od drugih elemenata */
}

/* Glavni kontejner za sadržaj stranice */
.main {
  overflow: hidden; /* Sprječava prekomjerno prelaženje sadržaja izvan kontejnera (čuva izgled stranice) */
}

/*==============================================================NAVIGACIJA==================================================*/
/*=============== HEADER & NAV =============================================================================================*/

/* Stilovi za glavni header */
.header {
  position: fixed; /* Header je fiksiran na vrh stranice, uvijek vidljiv */
  width: 100%; /* Širina headera je cijela širina prozora */
  top: 0; /* Header je postavljen na vrh prozora */
  left: 0; /* Header je postavljen na lijevu stranu prozora */
  background-color: transparent; /* Početna boja pozadine je prozirna */
  z-index: var(
    --z-fixed
  ); /* Koristi se z-index kako bi header bio iznad ostalih elemenata */
  transition: background-color 0.4s; /* Glatka tranzicija prilikom promjene boje pozadine */
}

/* Stil za navigaciju unutar headera */
.nav {
  position: relative; /* Relativno pozicioniranje omogućava kontrolu elemenata unutar */
  height: var(--header-height); /* Visina navigacije određena CSS varijablom */
  display: flex; /* Prikazuje elemente navigacije kao fleksibilni red */
  justify-content: space-between; /* Raspoređuje elemente navigacije s obje strane (lijevo i desno) */
  align-items: center; /* Vertikalno centriranje elemenata unutar navigacije */
}

#language-selector {
  display: inline-flex;
  gap: 1rem;
  margin-left: 3rem;
  position: static;
}
.flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background-color: transparent;
  cursor: pointer;
  box-shadow: 0 0 5px 2px rgba(128, 128, 128, 0.5); /* Siva sjena s blagim blur efektom */
  transition: box-shadow 0.3s ease; /* Glatka tranzicija kod hover efekta */
}
.flag:focus-visible {
  outline: 2px solid var(--second-color);
  outline-offset: 2px;
}
.flag__img {
  width: 22px;
  height: auto;
  display: block;
}
.flag:hover {
  box-shadow: 0 0 8px 3px var(--second-color); /* Intenzivnija sjena na hover */
}
/* Stil za aktivnu zastavicu */
.flag.active {
  box-shadow: 0 0 10px 4px var(--first-color); /* Plava sjena za aktivnu zastavicu */
}



/* Stil za logo unutar navigacije */
.nav__logo {
  display: flex; /* Prikazuje logo elemente kao fleksibilni red */
  align-items: center; /* Vertikalno centriranje logotipa i njegovih elemenata */
  column-gap: 0.25rem; /* Horizontalni razmak između elemenata logotipa (tekst i ikona) */
}

/* Stil za tekst logotipa */
.nav__logo span {
  color: var(--white-color); /* Bijela boja teksta logotipa */
  font-weight: var(--font-semi-bold); /* Polu-deblji font za logotip */
  transition: color 0.4s; /* Glatka tranzicija prilikom promjene boje teksta logotipa */
}

/* Stil za ikonu unutar logotipa */
.nav__logo i {
  color: var(--first-color); /* Plava boja ikone logotipa */
  font-size: 1.5rem; /* Veličina ikone */
}

/* Stil za ikone za otvaranje/zatvaranje navigacije */
.nav__toggle,
.nav__close {
  font-size: 1.5rem; /* Veličina ikona za otvaranje i zatvaranje navigacije */
  color: var(--white-color); /* Boja ikona je bijela */
  cursor: pointer; /* Ikone imaju pokazivač kao pokazivač miša */
  transition: color 0.4s; /* Glatka tranzicija prilikom promjene boje ikone */
}

.nav__menu {
  display: flex;
  align-items: center;
}

/* Navigacija za mobilne uređaje */
@media screen and (max-width: 1150px) {
  .nav__menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 2rem;
    position: fixed; /* Fiksira navigacijski izbornik za mobilne uređaje */
    top: 0; /* Postavlja izbornik na vrh prozora */
    right: -100%; /* Izbornik je izvan prikaza, skriven s desne strane */
    background-color: var(--black-color); /* Crna pozadina izbornika */
    width: 80%; /* Širina izbornika zauzima 80% prozora */
    height: 100%; /* Visina izbornika pokriva cijeli prozor */
    padding: 7.5rem 3.5rem 0; /* Unutarnji razmak za navigaciju kako bi bila vizualno bolje pozicionirana */
    border-left: 2px solid var(--black-border); /* Lijevi rub izbornika je blago siv */
    transition: right 0.4s; /* Glatka tranzicija prilikom otvaranja/zatvaranja izbornika */
  }
  #language-selector {
    margin-left: 0;
    position: absolute;
    right: 3.5rem;
    top: 5rem;
  }
}

/* Stilovi za listu linkova unutar navigacije */
.nav__list {
  display: flex; /* Prikazuje elemente kao fleksibilni red ili stupac */
  flex-direction: column; /* Prikazuje linkove kao stupac */
  row-gap: 4rem; /* Razmak između svakog linka unutar liste */
}

/* Stil za svaki link u navigaciji */
.nav__link {
  color: var(--text-color-light); /* Svijetla siva boja linkova */
  font-weight: var(--font-semi-bold); /* Polu-deblji font za linkove */
  transition: color 0.4s; /* Glatka tranzicija prilikom promjene boje linkova */
}

/* Efekt prilikom prelaska mišem preko linkova */
.nav__link:hover {
  color: var(--first-color); /* Boja linka mijenja se u plavu prilikom hovera */
}

/* Stil za gumb za zatvaranje izbornika */
.nav__close {
  position: absolute; /* Apsolutno pozicioniranje unutar navigacijskog izbornika */
  top: 1rem; /* Postavljanje gumba za zatvaranje na vrh */
  right: 1.5rem; /* Postavljanje gumba za zatvaranje na desnu stranu */
}

/* Prikazivanje izbornika - kada se doda klasa show-menu */
.show-menu {
  right: 0; /* Prikazuje izbornik pomicanjem desno u vidokrug */
}

/* Promjena pozadine headera - dodavanje klase bg-header */
.bg-header {
  background-color: var(
    --body-color
  ); /* Postavlja pozadinu headera na bijelu boju */
  box-shadow: 0 4px 16px hsla(255, 90%, 8%, 0.1); /* Dodaje sjenku ispod headera za efekt lebdenja */
}

/* Promjena boje elemenata unutar headera kada ima klasu bg-header */
.bg-header .nav__logo span,
.bg-header .nav__toggle {
  color: var(
    --title-color
  ); /* Postavlja boju logotipa i ikone za otvaranje navigacije na tamniju boju za kontrast na bijeloj pozadini */
}

/* Stil za aktivni link - kada se neki link smatra aktivnim */
.active-link {
  color: var(
    --first-color
  ); /* Aktivni link ima plavu boju kako bi bio vidljivo istaknut */
}
/*======================================================================NASLOVNA===============================*/
/*=============== HOME ========================================================================================*/

/* Glavni dio za sekciju "Home" (početna sekcija) */
.home {
  position: relative; /* Relativno pozicioniranje omogućava pozicioniranje elemenata unutar ove sekcije */
  background-color: var(
    --black-color
  ); /* Crna pozadina za cijeli dio "Home" sekcije */
}

/* Kontejner za sadržaj unutar sekcije "Home" */
.home__container {
  position: relative; /* Relativno pozicioniranje kako bi se apsolutni elementi unutar mogli pravilno pozicionirati */
  row-gap: 3rem; /* Vertikalni razmak između redova s elementima */
  padding-block: 2.5rem 6rem; /* Dodaje unutarnji razmak iznad i ispod kontejnera */
}

/* Kontejner za sadržaj unutar sekcije */
.home__content {
  row-gap: 2.5rem; /* Vertikalni razmak između elemenata unutar sekcije */
}

/* Tekstualni sadržaj unutar "Home" sekcije */
.home__data {
  text-align: center; /* Centriranje cijelog sadržaja teksta za bolju preglednost */
}

/* Naslov u sekciji "Home" */
.home__title {
  color: var(
    --white-color
  ); /* Bijela boja za naslov kako bi bio vidljiv na crnoj pozadini */
  font-size: var(--semi-big-font-size); /* Veličina fonta za naslov */
  font-weight: var(
    --font-bold
  ); /* Postavlja deblji font kako bi naslov bio istaknut */
  margin-bottom: 1rem; /* Razmak ispod naslova */
}

/* Opis u sekciji "Home" */
.home__description {
  margin-bottom: 2.5rem; /* Razmak ispod opisa kako bi se odvojio od drugih elemenata */
  color: var(
    --text-color-light
  ); /* Boja teksta je svjetlija siva za kontrast */
}

/* Gumbi u sekciji "Home" */
.home__buttons {
  display: flex; /* Prikazuje elemente u red (flex) */
  justify-content: center; /* Centriranje gumba vodoravno */
  align-items: center; /* Vertikalno centriranje gumba */
  gap: 1rem; /* Razmak između svakog gumba */
}

/* Informacije u sekciji "Home" */
.home__info {
  display: flex; /* Prikazuje informacije kao fleksibilni red */
  justify-content: center; /* Centriranje informacija vodoravno */
  column-gap: 4.5rem; /* Horizontalni razmak između informacija */
  row-gap: 1rem; /* Razmak između redova kad se elementi prelamaju */
  flex-wrap: wrap; /* Omogućava prelamanje u novi red kada nema dovoljno prostora */
}

.home__info-title {
  color: var(--second-color); /* Postavlja boju za naslove informacija (obično plava) */
  font-size: var(--semi-big-font-size); /* Veličina fonta za naslove */
  font-weight: var(--font-bold); /* Podebljani tekst naslova za bolju vidljivost */
  margin-bottom: 0.45rem; /* Razmak ispod naslova */
}



/* Opis unutar informacija */
.home__info-description {
  font-size: var(
    --small-font-size
  ); /* Veličina fonta za opis unutar informacija */
  color: var(
    --white-color
  ); /* Bijela boja za opis kako bi bio vidljiv na tamnoj pozadini */
}

/* Kontejner za slike u sekciji "Home" */
.home__images {
  position: relative; /* Relativno pozicioniranje za kontrolu apsolutnog pozicioniranja slika unutar */
  justify-self: center; /* Centriranje kontejnera za slike unutar roditeljskog elementa */
}

/* Stil za prvu sliku u sekciji "Home" */
.home__img-1 {
  width: 250px; /* Širina prve slike */
  margin-left: 3.5rem; /* Dodaje razmak s lijeve strane kako bi slika izgledala uravnoteženo */
}

/* Stil za drugu sliku u sekciji "Home" */
.home__img-2 {
  width: 150px; /* Širina druge slike */
  border: 5px solid var(--black-color); /* Crni rub oko slike */
  position: absolute; /* Apsolutno pozicioniranje unutar roditeljskog elementa */
  left: 0; /* Postavljanje slike na lijevu stranu roditeljskog elementa */
  bottom: -3.5rem; /* Postavljanje slike malo ispod osnovne linije kontejnera */
}

/* Linije koje su postavljene kao ukras unutar "Home" sekcije */
.home__lines {
  position: absolute; /* Apsolutno pozicioniranje za ukrasne linije unutar sekcije */
  top: 0; /* Postavljanje linija na vrh sekcije */
  left: 0; /* Postavljanje linija na lijevu stranu sekcije */
  width: 100%; /* Širina linija zauzima cijelu širinu sekcije */
  height: 100%; /* Visina linija zauzima cijelu visinu sekcije */
  object-fit: cover; /* Pokrivanje cijelog prostora bez izobličenja */
  object-position: right; /* Pozicioniranje objekta prema desnoj strani */
}
/*=====================================================GUMBI=================================================================*/
/*=============== BUTTON ====================================================================================================*/

/* Opći stil za gumbe */
.button {
  display: inline-flex; /* Prikazuje gumb kao fleksibilni element unutar linije */
  background: var(--first-gradient); /* Pozadinska boja gumba s gradijentom */
  color: var(--white-color); /* Boja teksta unutar gumba */
  font-weight: var(
    --font-semi-bold
  ); /* Polu-deblji font za tekst unutar gumba */
  padding: 1rem 2rem; /* Unutarnji razmak - gornji i donji te bočni razmak */
  transition: box-shadow 0.4s; /* Glatka tranzicija za sjenku prilikom hover efekta */
}

/* Efekt prilikom prelaska mišem preko gumba */
.button:hover {
  box-shadow: 0 8px 32px hsla(209, 95%, 55%, 0.3); /* Dodaje sjenku ispod gumba za efekt lebdenja */
  color: var(
    --white-color
  ); /* Održava bijelu boju teksta prilikom hover efekta */
}

/* Stil za linkove unutar gumba */
.button__link {
  display: flex; /* Prikazuje elemente unutar linka kao fleksibilni red */
  align-items: center; /* Vertikalno centriranje elemenata unutar linka */
  column-gap: 0.25rem; /* Horizontalni razmak između teksta i ikone */
  color: var(--first-color); /* Boja teksta unutar linka (plava) */
}

/* Stil za tekst unutar linka */
.button__link span {
  font-weight: var(
    --font-semi-bold
  ); /* Polu-deblji font za tekst unutar linka */
}

/* Stil za ikone unutar linka */
.button__link i {
  font-size: 1.5rem; /* Veličina ikone */
  transition: transform 0.4s; /* Glatka tranzicija za transformaciju ikone prilikom hover efekta */
}

/* Efekt prilikom prelaska mišem preko linka - pomicanje ikone */
.button__link:hover i {
  transform: translateX(
    0.25rem
  ); /* Pomicanje ikone malo udesno prilikom hovera za efekt naglaska */
}
/*=========================================================================================================================================*/
/*=============== ABOUT ===================================================================================================================*/

/* Kontejner za sekciju "O nama" */
.about__container {
  row-gap: 8rem; /* Vertikalni razmak između elemenata u sekciji */
}

/* Podaci unutar sekcije "O nama" */
.about__data {
  text-align: center; /* Centriranje teksta unutar podataka za bolju preglednost */
}

/* Opis u sekciji "O nama" */
.about__description {
  margin-bottom: 2rem; /* Razmak ispod opisa kako bi se odvojio od drugih elemenata */
}

/* Lista u sekciji "O nama" */
.about__list {
  text-align: initial; /* Standardno poravnanje teksta unutar liste */
  grid-template-columns: repeat(
    2,
    130px
  ); /* Lista je podijeljena u dva stupca, svaki širok 130px */
  justify-content: center; /* Poravnanje liste prema centru */
  gap: 1.5rem; /* Razmak između elemenata liste */
  margin-bottom: 2.5rem; /* Razmak ispod liste kako bi se vizualno odvojila od drugih elemenata */
}

/* Stil za svaki pojedini element unutar liste */
.about__list-item {
  display: flex; /* Elementi unutar liste prikazuju se kao fleksibilni red */
  column-gap: 0.5rem; /* Horizontalni razmak između elemenata unutar svakog reda */
  color: var(
    --title-color
  ); /* Boja teksta unutar liste (obično kontrastna boja naslova) */
}

/* Stil za ikone unutar elemenata liste */
.about__list-item i {
  font-size: 1.25rem; /* Veličina ikone */
  color: var(--first-color); /* Boja ikone, obično plava */
}

/* Kontejner za slike u sekciji "O nama" */
.about__images {
  position: relative; /* Relativno pozicioniranje omogućava apsolutno pozicioniranje unutarnjih elemenata */
  justify-self: center; /* Središnje poravnanje kontejnera unutar roditeljskog elementa */
}

/* Efekt prilikom prelaska mišem preko prve slike */
.about__img-1:hover {
  opacity: 0.3; /* Smanjuje prozirnost slike na 30% prilikom hovera za efekt izblijedjelosti */
}

/* Stil za drugu sliku u sekciji "O nama" */
.about__img-2 {
  width: 250px; /* Širina druge slike */
  margin-right: 2.5rem; /* Dodaje razmak s desne strane kako bi slika izgledala uravnoteženo */
}

.about__software {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px; /* Razmak između ikonica */
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
    height: auto;
}

.software-link {
    text-decoration: none;
}

.software-icon {
    width: auto; /* Veličina ikonica, prilagodi prema potrebi */
    height: 35px;
    transition: transform 0.4s ease;
}

.software-icon:hover {
    transform: scale(1.5); /* Efekt uvećanja pri prelasku */
}

@media (max-width: 800px) {
    .about__software {
        flex-direction: row;
        gap: 15px;
    }
    .software-icon {
        height: 25px; /* Manje ikonice za manje ekrane */
    }
}

.about__partneri {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px; /* Razmak između ikonica */
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
    height: auto;
}

.partneri-link {
    text-decoration: none;
}

.partneri-icon {
    width: auto; /* Veličina ikonica, prilagodi prema potrebi */
    height: 35px;
    transition: transform 0.4s ease;
}

.partneri-icon:hover {
    transform: scale(1.5); /* Efekt uvećanja pri prelasku */
}

@media (max-width: 800px) {
    .about__partneri {
        flex-direction: row;
        gap: 15px;
    }
    .partneri-icon {
        height: 25px; /* Manje ikonice za manje ekrane */
    }
}



/*==================================================================================================================================*/
/*=============== SERVICES =========================================================================================================*/

/* Glavni kontejner za sekciju usluga */
.services {
  position: relative; /* Omogućava pozicioniranje elemenata unutar ove sekcije */
}

/* Kontejner za kartice unutar sekcije usluga */
.services__container {
  position: relative; /* Omogućava lakšu kontrolu nad pozicioniranjem elemenata unutar */
  row-gap: 3rem; /* Vertikalni razmak između redova s elementima */
}

/* Središnje poravnanje teksta za podatke o uslugama */
.services__data {
  text-align: center; /* Centriranje svih elemenata unutar, poput naslova i opisa */
}

/* Stil za opis svake usluge */
.services__description {
  margin-bottom: 2rem; /* Dodaje razmak ispod opisa za bolji razmak između elemenata */
}

/* Stilovi za pojedinačnu karticu usluge */
.services__card {
  width: 260px; /* Širina kartice usluge */
  background-color: var(
    --container-color
  ); /* Postavlja pozadinsku boju kartice, obično bijelu */
  border: 2px solid var(--gray-border); /* Sivi rub za svaku karticu */
  padding: 2rem 1rem 3.5rem; /* Unutarnji razmak - gornji, bočni i donji */
  transition: border-color 0.4s; /* Glatka tranzicija prilikom promjene boje ruba */
}

/* Efekt prilikom prelaska mišem preko kartice */
.services__card:hover {
  border-color: var(
    --first-color
  ); /* Mijenja boju ruba kartice kada se mišem pređe preko nje */
}

/* Stil za ikonu usluge unutar kartice */
.services__icon {
  width: 70px; /* Širina ikone */
  height: 70px; /* Visina ikone */
  background-color: var(--black-color); /* Crna pozadina ikone */
  color: var(--white-color); /* Bijela boja ikone */
  border-radius: 50%; /* Oblik kruga za ikonu */
  display: grid; /* Koristi grid za centriranje sadržaja unutar elementa */
  place-items: center; /* Centriranje sadržaja unutar ikone po horizontalnoj i vertikalnoj osi */
  font-size: 2.5rem; /* Veličina fonta za ikonu */
  margin-bottom: 1.5rem; /* Razmak ispod ikone za odvajanje od naslova */
}

/* Stilovi za naslov svake usluge */
.services__title {
  font-size: var(--h2-font-size); /* Veličina fonta za naslov usluge */
  margin-bottom: 0.5rem; /* Dodaje razmak ispod naslova za odvajanje od opisa */
}

/* Oblik pozadine u sekciji usluga (npr. donja crna pozadina) */
.services__shape {
  position: absolute; /* Apsolutno pozicioniranje unutar roditeljskog elementa */
  width: 100%; /* Širina oblika odgovara cijeloj širini roditelja */
  height: 245px; /* Visina oblika */
  background-color: var(--black-color); /* Crna pozadinska boja oblika */
  bottom: 0; /* Postavljanje oblika na dno sekcije */
  left: 0; /* Postavljanje oblika na lijevu stranu */
}

/* Swiper klasa za navigaciju kroz usluge */
.swiper {
  margin-inline: initial; /* Postavljanje margine između elemenata na početne vrijednosti */
  padding-bottom: 4rem; /* Unutarnji razmak ispod Swiper elementa za bolji razmak */
}

/* Uklanja sadržaj (strelice) unutar navigacijskih gumba Swipera */
.swiper-button-prev:after,
.swiper-button-next:after {
  content: ""; /* Prazan sadržaj za uklanjanje tekstualnih strelica */
}

/* Opći stil za navigacijske gumbe (sljedeći i prethodni) */
.swiper-button-next,
.swiper-button-prev {
  top: initial; /* Postavlja gornju poziciju na početnu vrijednost (može biti null) */
  bottom: 0; /* Postavlja gumbe na dno */
  width: 32px; /* Širina gumba */
  height: 32px; /* Visina gumba */
  background-color: var(
    --container-color
  ); /* Boja pozadine gumba (obično bijela) */
  box-shadow: 0 2px 8px hsla(255, 8%, 4%, 0.1); /* Blagi sjaj ispod gumba za osjećaj dubine */
  border-radius: 50%; /* Gumb je kružnog oblika */
  font-size: 1.5rem; /* Veličina ikone unutar gumba */
  color: var(--title-color); /* Boja strelice unutar gumba */
}

/* Pozicioniranje lijevog navigacijskog gumba (prethodni) */
.swiper-button-prev {
  left: calc(
    50% - 3rem
  ); /* Pozicionira lijevi gumb u sredini, malo pomaknut lijevo */
}

/* Pozicioniranje desnog navigacijskog gumba (sljedeći) */
.swiper-button-next {
  right: calc(
    50% - 3rem
  ); /* Pozicionira desni gumb u sredini, malo pomaknut desno */
}
/*=============================================================================================================================*/
/*=============== PROJECTS ====================================================================================================*/
/* Glavni dio za sve sekcije projekata */
.projects {
  background-color: var(
    --black-color
  ); /* Postavlja crnu pozadinu za cijeli dio projekata */
}

/* Naslov sekcije "Projekti" */
.projects .section__title {
  color: var(
    --white-color
  ); /* Naslov sekcije je bijele boje kako bi bio kontrastan crnoj pozadini */
}

/* Kontejner za sve kartice projekata */
.projects__container {
  padding-block: 1.5rem 3rem; /* Dodaje okomito padding (unutarnji razmak) za kontejner kako bi se dodao prostor iznad i ispod */
}

/* Stilovi za pojedinačne kartice projekata */
.projects__card {
  background-color: var(
    --container-color
  ); /* Pozadinska boja svake kartice - bijela */
  border: 2px solid transparent; /* Rub je inicijalno proziran */
  background-clip: content-box; /* Primjenjuje pozadinu samo na sadržaj kutije (ne na rubove) */
  transition: border-color 0.4s; /* Omogućuje glatku promjenu boje ruba prilikom hover efekta */
}

/* Efekt prilikom prelaska mišem preko kartice */
.projects__card:hover {
  border-color: var(
    --first-color
  ); /* Kada se mišem pređe preko kartice, boja ruba mijenja se u "prvu boju" (plava) */
}

/* Podaci o projektu unutar kartice */
.projects__data {
  padding: 1.5rem 1rem 3rem; /* Dodaje unutarnji razmak za elemente unutar kartice projekata */
}

/* Naslov svakog projekta unutar kartice */
.projects__title {
  font-size: var(
    --h2-font-size
  ); /* Postavlja veličinu fonta za naslov projekta */
  margin-block: 0.5rem; /* Dodaje razmak iznad i ispod naslova kako bi se odvojio od drugih elemenata */
}

/* Datum projekta unutar kartice */
.projects__date {
  display: block; /* Prikazuje datum kao blok element, što omogućuje da zauzme cijeli red */
  font-weight: var(
    --font-medium
  ); /* Postavlja srednju debljinu fonta za datum */
  color: var(
    --title-color
  ); /* Postavlja boju za datum kako bi bio u kontrastu s pozadinom */
  margin-bottom: 1.5rem; /* Dodaje donji razmak ispod datuma kako bi ga vizualno odvojio od ostatka kartice */
}
/*--------------------------------------------------------------------------------------------------------------------------------*/
/* ----------------Galerija Slika---------------*/

/* Kontejner za galeriju projekata */
.projects__gallery {
  width: 90%; /* Širina kontejnera galerije zauzima 90% prozora */
  max-width: 1110px; /* Maksimalna širina kontejnera kako bi se zadržala vizualna konzistentnost na većim ekranima */
  margin: 0 auto; /* Centriranje kontejnera na sredinu stranice */
}

/* Osnovni stil za kontejnere linkova galerije */
.gallery__links {
  width: 80%; /* Širina kontejnera linkova galerije zauzima 80% */
  margin: 50px auto; /* Vertikalni razmak iznad i ispod, te centriranje kontejnera */
  display: flex; /* Prikazuje linkove kao fleksibilni red */
  align-items: center; /* Vertikalno centriranje elemenata */
  justify-content: center; /* Horizontalno centriranje elemenata */
  gap: 40px; /* Horizontalni razmak između linkova */
  row-gap: 1rem; /* Vertikalni razmak između redova kada se linkovi prelamaju */
  flex-wrap: wrap; /* Omogućava prelamanje linkova u novi red kada nema dovoljno prostora */
}

/* Stil za svaki pojedini link u galeriji */
.gallery__link {
  border: 2px solid var(--second-color); /* Rub linka koristi sekundarnu boju */
  padding: 10px 30px; /* Unutarnji razmak unutar linka */
  font-size: var(--normal-font-size); /* Veličina fonta za tekst unutar linka */
  font-weight: 500; /* Srednja težina fonta */
  color: var(--white-color); /* Bijela boja teksta */
  cursor: pointer; /* Prikazuje pokazivač kada se prelazi mišem */
  border-radius: 30px; /* Zaobljeni rubovi linka */
  transition: 0.4s ease; /* Glatka tranzicija prilikom promjene stanja */
}

/* Efekt prilikom prelaska mišem preko linka u galeriji */
.gallery__link:hover {
  background: var(
    --first-gradient
  ); /* Postavlja gradijentnu pozadinu na link */
  color: var(--black-color); /* Mijenja boju teksta u crnu */
  box-shadow: 0 8px 32px hsla(209, 95%, 55%, 0.3); /* Dodaje sjenku ispod linka za naglašavanje */
}

.gallery__description {
  font-family: var(--body-font);           /* Koristi isti font kao ostatak stranice */
  font-size: var(--small-font-size);        /* Manji font za komentare */
  font-style: italic;                       /* Tekst će biti ukoso */
  color: var(--text-color-light);                /* Bijeli tekst, pogotovo ako je pozadina tamna */
  text-align: center;                       /* Centriranje teksta */
  margin: 20px auto;                        /* Vertikalni razmak, centrirano */
  padding: 0.75rem 1.5rem;                   /* Dovoljno prostora oko teksta */
  border-radius: 10px;                      /* Zaobljeni rubovi za elegantan izgled */
}

/* Stilovi za manje ekrane - gumbi su manji i zbijeniji */
@media screen and (max-width: 600px) {
  .gallery__links {
    gap: 20px; /* Smanjen razmak između gumbova */
    row-gap: 0.5rem; /* Manji vertikalni razmak između redova */
  }

  .gallery__link {
    padding: 8px 20px; /* Manji unutarnji razmak za manje ekrane */
    font-size: 0.813rem; /* Manja veličina fonta (otprilike 13px) */
  }
}

/* Stilovi za srednje ekrane - srednje veliki gumbi i veći razmaci */
@media screen and (min-width: 600px) and (max-width: 1150px) {
  .gallery__links {
    gap: 30px; /* Srednji razmak između gumbova */
    row-gap: 1rem; /* Standardni vertikalni razmak */
  }

  .gallery__link {
    padding: 10px 25px; /* Srednji unutarnji razmak za bolje pristajanje na srednjim ekranima */
    font-size: 0.875rem; /* Malo veći font (otprilike 14px) */
  }
}

/* Stilovi za velike ekrane - zadržavanje trenutnih vrijednosti */
@media screen and (min-width: 1150px) {
  .gallery__links {
    gap: 40px; /* Veći razmak između gumbova */
    row-gap: 1rem; /* Standardni vertikalni razmak */
  }

  .gallery__link {
    padding: 10px 30px; /* Veći unutarnji razmak za gumbe na velikim ekranima */
    font-size: var(--normal-font-size); /* Originalna veličina fonta */
  }
}

/* Stil za aktivni gumb u galeriji - naglašavanje trenutno odabranog */
.menu-active {
  background: var(--first-gradient); /* Gradijent pozadina za aktivni link */
  color: var(--black-color); /* Crna boja teksta */
  box-shadow: 0 8px 32px hsla(209, 95%, 55%, 0.3); /* Sjenka ispod aktivnog linka */
}

/* Galerija - Osnovni stil za male ekrane (1 stupac) */
.gallery {
  display: grid; /* Prikazuje slike u obliku mreže */
  grid-template-columns: 1fr; /* Jedan stupac za male ekrane */
  gap: 20px; /* Razmak između slika */
}

/* Srednje veličine ekrana - prikaz galerije u 3 stupca */
@media screen and (min-width: 768px) {
  .gallery {
    grid-template-columns: repeat(
      3,
      1fr
    ); /* Prikazuje galeriju u tri stupca na srednjim ekranima */
  }
}

/* Velike veličine ekrana - prikaz galerije u 4 stupca */
@media screen and (min-width: 1150px) {
  .gallery {
    grid-template-columns: repeat(
      4,
      1fr
    ); /* Prikazuje galeriju u četiri stupca na velikim ekranima */
  }
}

/* Stil za pojedinačne slike unutar galerije */
.project-img {
  display: flex; /* Fleksibilno prikazivanje slika za centriranje */
  align-items: center; /* Vertikalno centriranje slike unutar kontejnera */
  justify-content: center; /* Horizontalno centriranje slike */
  border-radius: 12px; /* Zaobljeni rubovi kontejnera za slike */
  overflow: hidden; /* Sprječava prelazak slike izvan okvira */
  box-shadow: 0 0 4px rgba(175, 175, 175, 0.4); /* Blaga sjenka za naglašavanje slike */
  animation: SclAnimation 0.4s ease; /* Animacija prilikom prikaza slike */
}

/* Definiranje animacije za slike prilikom učitavanja */
@keyframes SclAnimation {
  0% {
    transform: scale(0); /* Početna veličina slike je nula */
  }
  100% {
    transform: scale(1); /* Slika se povećava na svoju punu veličinu */
  }
}

/* Stil za sliku unutar kontejnera - osiguravanje proporcionalnosti */
.project-img img {
  width: 100%; /* Širina zauzima cijeli kontejner */
  height: 100%; /* Visina slike zauzima cijeli kontejner */
  object-fit: cover; /* Slika se prilagođava kako bi pokrila cijeli kontejner bez izobličenja */
}

/* Efekt prilikom prelaska mišem preko slike */
.project-img:hover img {
  transform: scale(1.1); /* Lagano povećava sliku za efekt prilikom hovera */
}
/*-------------------------------------------------------------------------------------------------------------------------------------*/
/* ----------------Lightbox---------------*/

/* Lightbox kontejner - pozadina za prikaz slike u punoj veličini */
.lightbox {
  display: none; /* Skriven po defaultu, prikazuje se kada se klikne na sliku */
  position: fixed; /* Fiksiran na cijeli ekran kako bi uvijek bio vidljiv */
  z-index: 1000; /* Visoki z-index osigurava da je iznad svih ostalih elemenata */
  left: 0; /* Postavlja lightbox na lijevu stranu prozora */
  top: 0; /* Postavlja lightbox na vrh prozora */
  width: 100%; /* Pokriva cijelu širinu ekrana */
  height: 100%; /* Pokriva cijelu visinu ekrana */
  background-color: rgba(0, 0, 0, 0.8); /* Tamna prozirna pozadina za naglašavanje slike */
  justify-content: center; /* Centriranje sadržaja lightboxa vodoravno */
  align-items: center; /* Centriranje sadržaja lightboxa okomito */
  flex-direction: column; /* Prikazuje sliku i opis u stupcu - jedan ispod drugog */
}

/* Stiliziranje za sliku unutar lightboxa */
.lightbox-content {
  max-width: 90%; /* Maksimalna širina slike je 90% ekrana */
  max-height: 80%; /* Maksimalna visina slike je 80% ekrana kako bi ostalo prostora za opis */
  border-radius: 8px; /* Zaobljeni rubovi slike */
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.4); /* Svijetla sjenka za naglašavanje slike */
  margin-bottom: 15px; /* Razmak između slike i opisa */
}

/* Stiliziranje za opis slike unutar lightboxa */
#lightbox-description {
  color: #fff; /* Bijela boja za tekst opisa radi boljeg kontrasta s tamnom pozadinom */
  font-size: 1rem; /* Veličina fonta za opis slike */
  max-width: 90%; /* Maksimalna širina teksta je 90% ekrana */
  text-align: center; /* Centriranje teksta unutar opisa */
  padding: 0 10px; /* Dodavanje horizontalnog unutarnjeg razmaka za bolju čitljivost */
}

/* Stil za gumb za zatvaranje lightboxa */
.lightbox .close {
  position: absolute; /* Apsolutno pozicioniranje unutar lightboxa */
  top: 20px; /* Postavlja gumb za zatvaranje na vrh lightboxa */
  right: 30px; /* Postavlja gumb za zatvaranje desno unutar lightboxa */
  color: #fff; /* Bijela boja za gumb zatvaranja */
  font-size: 40px; /* Veličina gumba za zatvaranje */
  font-weight: bold; /* Podebljani font za bolju vidljivost */
  cursor: pointer; /* Prikazuje pokazivač prilikom prelaska mišem */
  transition: color 0.3s; /* Glatka tranzicija prilikom promjene boje gumba */
}

/* Efekt prilikom prelaska mišem preko gumba za zatvaranje */
.lightbox .close:hover {
  color: #ff0000; /* Crvena boja za gumb zatvaranja prilikom hovera kako bi naglasila mogućnost zatvaranja */
}
/*--------------------------------------------------------------------------------------------------------------------------------*/
/* ----------------CONTACT SECTION---------------*/

/* Kontejner za kontakt formu */
.contact__container {
  row-gap: 3rem; /* Vertikalni razmak između elemenata unutar kontejnera */
  padding-block: 1.5rem 3rem; /* Unutarnji razmak iznad i ispod sekcije */
}

/* Osnovni stilovi za formular */
#kontaktForm {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: var(--black-color);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-family: var(--body-font);
  position: relative;
}

/* Stilovi za label elemente */
#kontaktForm label {
  font-size: 1rem;
  color: var(--second-color);
  margin-bottom: 5px;
  display: block;
}

/* Stilovi za input kutije */
.inputBox {
  margin-bottom: 15px;
}

.honeypot-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.honeypot-field input {
  opacity: 0;
  pointer-events: none;
}

.honeypot-label {
  display: none;
}

.form-loader {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  color: var(--second-color);
  font-size: 0.95rem;
}

.form-loader.hidden {
  display: none;
}

.form-loader__spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--first-color);
  border-radius: 50%;
  animation: form-loader-spin 0.8s linear infinite;
}

@keyframes form-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Stilovi za polja za unos */
#kontaktForm input[type="text"],
#kontaktForm input[type="email"],
#kontaktForm textarea {
  width: 100%;
  padding: 10px;
  font-size: 0.9rem;
  font-family: var(--body-font); /* Definiranje fonta */
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  transition: border-color 0.4s ease;
}

/* Promjena boje prilikom fokusa */
#kontaktForm input[type="text"]:focus,
#kontaktForm input[type="email"]:focus,
#kontaktForm textarea:focus {
  border-color: var(--first-color);
  box-shadow: 0 8px 32px hsla(209, 95%, 55%, 0.3); /* Dodaje sjenku ispod gumba za efekt lebdenja */
  outline: none;
}

/* Stilovi za textarea */
#kontaktForm textarea {
  resize: vertical;
  min-height: 120px;
}

/* Stilovi za gumb za slanje */
#kontaktForm .button {
  width: 100%;
  padding: 10px;
  font-size: 1.1rem;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#kontaktForm .button:hover {
  background-color: #0056b3;
}

/* Stil za mobilne uređaje */
@media (max-width: 600px) {
  #kontaktForm {
    padding: 15px;
  }

  #kontaktForm label,
  #kontaktForm input[type="text"],
  #kontaktForm input[type="email"],
  #kontaktForm textarea,
  #kontaktForm .button {
    font-size: 1rem;
  }
}
/* Stilovi za notifikacijski prozor */
.notification {
  position: fixed;
  top: 10%;       /* Postavi na 70% od vrha */
  left: 50%;      /* Postavi na 30% od lijevog ruba */
  transform: translate(-50%, -10%); /* Centriranje na željenim pozicijama */
  padding: 15px 25px;
  border-radius: 10px;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.3); /* frozen glass effect */
  color: #333;
  font-size: 1rem;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  transition: opacity 0.4s ease, transform 0.4s ease;
  opacity: 0;
  z-index: 1000;
}

.notification.hidden {
  display: none;
}

.notification.success {
  border-left: 4px solid #28a745; /* zelena za uspjeh */
}

.notification.error {
  border-left: 4px solid #dc3545; /* crvena za grešku */
}

/* Stil za sliku unutar kontakt sekcije */
.contact__img {
  width: 320px; /* Širina slike */
  justify-self: center; /* Centriranje slike unutar roditeljskog kontejnera */
  transition: 0.3s ease; /* Glatki prijelaz za efekt */
}


/* Stil za podatke unutar kontakt sekcije */
.contact__data {
  grid-template-columns: 230px; /* Širina stupca za podatke */
  justify-content: center; /* Centriranje podataka unutar kontejnera */
  row-gap: 1.5rem; /* Razmak između redova podataka */
}

/* Stil za svaku karticu kontakta (npr. telefon, adresa, email) */
.contact__card {
  background-color: var(--container-color); /* Bijela pozadina kartice */
  border: 2px solid var(--gray-border); /* Sivi rub oko kartice */
  padding: 1.5rem 2rem; /* Unutarnji razmak unutar kartice */
  text-align: center; /* Centriranje teksta unutar kartice */
  transition: border-color 0.4s; /* Glatka tranzicija prilikom promjene boje ruba */
}

/* Efekt prilikom prelaska mišem preko kartice kontakta */
.contact__card:hover {
  border-color: var(--first-color); /* Plavi rub kada se mišem pređe preko kartice */
}

/* Stil za ikone unutar kartica kontakta */
.contact__icon {
  width: 48px; /* Širina ikone */
  height: 48px; /* Visina ikone */
  background-color: var(--black-color); /* Crna pozadina ikone */
  color: var(--white-color); /* Bijela boja ikone */
  border-radius: 50%; /* Oblik kruga za ikonu */
  display: grid; /* Koristi se grid za lakše centriranje sadržaja */
  place-items: center; /* Vertikalno i horizontalno centriranje sadržaja */
  font-size: 2rem; /* Veličina ikone */
  margin: 0 auto 1.25rem; /* Centriranje ikone unutar kartice s razmakom ispod */
}

/* Stil za naslov unutar kartica kontakta */
.contact__title {
  font-size: var(--h2-font-size); /* Veličina fonta za naslov kartice */
  margin-bottom: 0.5rem; /* Razmak ispod naslova */
}

/* Stil za dodatne informacije unutar kontakt kartica */
.contact__info {
  font-style: normal; /* Standardni stil fonta (nije kurziv) */
}

/* Stil za sekciju s društvenim mrežama */
.contact__social {
  display: flex; /* Prikazuje društvene ikone kao fleksibilni red */
  justify-content: center; /* Centriranje društvenih ikona unutar sekcije */
  column-gap: 1rem; /* Razmak između ikona društvenih mreža */
}

/* Stil za linkove društvenih mreža */
.contact__social-link {
  font-size: 1.5rem; /* Veličina ikone društvene mreže */
  color: var(--first-color); /* Boja linka društvene mreže (obično plava) */
  transition: transform 0.4s; /* Glatka tranzicija za efekt transformacije prilikom hovera */
}

/* Efekt prilikom prelaska mišem preko ikone društvene mreže */
.contact__social-link:hover {
  transform: translateY(-0.25rem); /* Blago podizanje ikone prema gore prilikom hovera */
}

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

/* Stilovi za footer (podnožje stranice) */
.footer {
  background-color: var(--black-color); /* Crna pozadina footera */
  color: var(--text-color-light); /* Svjetlija siva boja za tekst */
  padding-block: 3.5rem 2rem; /* Unutarnji razmak iznad i ispod footera */
}

/* Kontejner za sadržaj unutar footera */
.footer__container {
  row-gap: 4rem; /* Vertikalni razmak između elemenata */
  padding-bottom: 4rem; /* Razmak ispod sadržaja footera */
  border-bottom: 1px solid var(--black-border); /* Tanak crni rub ispod footera */
}

/* Stil za logotip unutar footera */
.footer__logo {
  display: inline-flex; /* Prikazuje logotip i njegov tekst kao fleksibilni red */
  align-items: center; /* Vertikalno centriranje elemenata unutar logotipa */
  column-gap: 0.25rem; /* Horizontalni razmak između ikone i teksta logotipa */
}

/* Stil za tekst unutar logotipa footera */
.footer__logo span {
  color: var(--white-color); /* Bijela boja za tekst logotipa */
  font-size: var(--h3-font-size); /* Veličina fonta za logotip */
  font-weight: var(--font-semi-bold); /* Polu-deblji font za logotip */
}

/* Stil za ikonu unutar logotipa footera */
.footer__logo i {
  color: var(--first-color); /* Plava boja za ikonu logotipa */
  font-size: 1.5rem; /* Veličina ikone */
}

/* Stil za opis unutar footera */
.footer__description {
  margin-block: 1rem; /* Dodaje vertikalni razmak iznad i ispod opisa */
}

/* Stilovi za email i dodatne informacije unutar footera */
.footer__OIB,
.footer__info {
  font-style: normal; /* Normalni stil fonta */
}

/* Kontejner za sadržaj footera */
.footer__content {
  grid-template-columns: repeat(2, max-content); /* Sadržaj je podijeljen u dva stupca */
  gap: 4rem 3rem; /* Razmak između stupaca i redova */
}

/* Stil za naslove unutar footera */
.footer__title {
  font-size: var(--h3-font-size); /* Veličina fonta za naslov */
  color: var(--white-color); /* Bijela boja za naslove */
  margin-bottom: 1rem; /* Razmak ispod naslova */
}

/* Stil za listu linkova unutar footera */
.footer__links,
.footer__list {
  display: grid; /* Prikazuje linkove kao mrežu (grid) */
  row-gap: 0.5rem; /* Vertikalni razmak između linkova */
}

/* Stil za svaki pojedini link u footeru */
.footer__link {
  color: var(--text-color-light); /* Svjetlija siva boja za linkove */
  transition: color 0.4s; /* Glatka tranzicija prilikom promjene boje linka */
}

/* Efekt prilikom prelaska mišem preko linka */
.footer__link:hover {
  color: var(--first-color); /* Mijenja boju linka u plavu prilikom hovera */
}

/* Stil za sekciju s društvenim mrežama unutar footera */
.footer__social {
  display: flex; /* Prikazuje društvene ikone kao fleksibilni red */
  column-gap: 1rem; /* Razmak između ikona društvenih mreža */
}

/* Stil za linkove društvenih mreža */
.footer__social-link {
  font-size: 1.5rem; /* Veličina ikone društvene mreže */
  color: var(--first-color); /* Plava boja za društvene mreže */
  transition: transform 0.4s; /* Glatka tranzicija za efekt transformacije prilikom hovera */
}

/* Efekt prilikom prelaska mišem preko linka društvenih mreža */
.footer__social-link:hover {
  transform: translateY(-0.25rem); /* Blago podizanje ikone prilikom hovera */
}

/* Stil za kopirajt (copyright) unutar footera */
.footer__copy {
  display: block; /* Prikazuje kopirajt kao blok element */
  text-align: center; /* Centriranje teksta */
  font-size: var(--small-font-size); /* Veličina fonta za kopirajt */
  margin-top: 4rem; /* Razmak iznad kopirajta */
}
.footer__licenca {
  display: block; /* Prikazuje licencu kao blok element */
  text-align: center; /* Centriranje teksta */
  font-size: var(--small-font-size); /* Veličina fonta za licencu */
  margin-top: 1rem; /* Razmak iznad licence */
 
}

/* stil za sam datum na kraju stranice */
.footer__datum-izmjena {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.8em;
  text-align: center;
  margin-top: 20px;
}


/*=============== SCROLL BAR ===============*/
/* Stil za scrollbar preglednika */
::-webkit-scrollbar {
  width: 0.6rem; /* Širina scrollbara */
  background-color: hsl(255, 5%, 75%); /* Svijetla siva boja pozadine scrollbara */
}

/* Stil za dio scrollbara koji se pomiče */
::-webkit-scrollbar-thumb {
  background-color: hsl(255, 5%, 65%); /* Tamnija siva boja za pomični dio scrollbara */
}

/* Efekt prilikom prelaska mišem preko scrollbara */
::-webkit-scrollbar-thumb:hover {
  background-color: hsl(255, 5%, 55%); /* Još tamnija siva boja prilikom hovera */
}

/*=============== SCROLL UP ===============*/
/* Stil za gumb za povratak na vrh stranice (scrollup) */
.scrollup {
  position: fixed; /* Fiksiran položaj na ekranu */
  right: 1rem; /* Postavlja gumb na desnu stranu ekrana */
  bottom: -50%; /* Skriven ispod ekrana po defaultu */
  background-color: var(--body-color); /* Bijela pozadina za gumb */
  box-shadow: 0 4px 16px hsla(255, 90%, 8%, 0.15); /* Blaga sjenka ispod gumba za efekt lebdenja */
  color: var(--title-color); /* Boja ikone na gumbu */
  display: inline-flex; /* Prikazuje gumb kao fleksibilni red */
  padding: 6px; /* Unutarnji razmak unutar gumba */
  font-size: 1.25rem; /* Veličina fonta za gumb */
  z-index: var(--z-tooltip); /* Visoki z-index kako bi bio iznad drugih elemenata */
  transition: bottom 0.4s, transform 0.4s; /* Glatka tranzicija za prikazivanje i pomicanje gumba */
}

/* Efekt prilikom prelaska mišem preko gumba za povratak na vrh */
.scrollup:hover {
  transform: translateY(-0.5rem); /* Blago podizanje gumba prilikom hovera */
}

/* Prikazivanje gumba za povratak na vrh kada se doda klasa show-scroll */
.show-scroll {
  bottom: 3rem; /* Postavlja gumb iznad ekrana za vidljivost */
}
/* For small devices (maksimalna širina ekrana: 340px) */
@media screen and (max-width: 340px) {
  .container {
    margin-inline: 1rem; /* Smanjen bočni razmak kontejnera za bolje prilagođavanje manjim ekranima */
  }

  .section__title {
    font-size: 1.25rem; /* Smanjena veličina naslova sekcije za bolje čitanje na malim uređajima */
  }

  .home__title {
    font-size: 1.75rem; /* Smanjena veličina naslova na početnoj stranici */
  }

  .home__buttons {
    flex-direction: column; /* Gumbi su postavljeni jedan ispod drugog radi uštede prostora */
  }

  .home__img-1 {
    width: 200px; /* Smanjena širina slike na početnoj stranici */
    margin-left: 1.5rem; /* Dodan manji lijevi razmak za bolje pozicioniranje */
  }

  .about__list {
    grid-template-columns: repeat(1, 200px); /* Lista s jednim stupcem za bolje prilagođavanje malim ekranima */
  }

  .about__img-1 {
    width: 150px; /* Smanjena veličina slike u sekciji "O nama" */
    left: 4rem; /* Prilagođena pozicija slike */
  }

  .about__img-2 {
    width: 200px; /* Smanjena širina druge slike */
    margin-right: 0; /* Uklonjen desni razmak */
  }

  .footer__content {
    grid-template-columns: repeat(1, max-content); /* Sadržaj footera postavljen u jedan stupac za male uređaje */
  }
}


/* For medium devices (minimalna širina ekrana: 540px) */
@media screen and (min-width: 540px) {
  .home__container,
  .about__container,
  .services__container,
  .projects__container,
  .contact__container {
    grid-template-columns: 360px; /* Postavlja širinu stupaca za sekcije na srednjim uređajima */
    justify-content: center; /* Centriranje elemenata unutar sekcija */
  }

  .footer__content {
    grid-template-columns: repeat(3, max-content); /* Footer s tri stupca za bolju preglednost na srednjim uređajima */
  }
}

/* For larger medium devices (minimalna širina ekrana: 768px) */
@media screen and (min-width: 768px) {
  .nav__menu {
    width: 50%; /* Navigacijski izbornik zauzima pola ekrana */
  }

  .projects__container {
    grid-template-columns: repeat(2, 330px); /* Prikazuje dva stupca s projektima */
  }

  .contact__data {
    grid-template-columns: repeat(2, 240px); /* Prikazuje kontaktne podatke u dva stupca */
  }

  .footer__container {
    grid-template-columns: repeat(2, max-content); /* Footer s dva stupca */
    justify-content: space-between; /* Raspoređivanje stupaca uz obje strane footera */
  }
}


/* For large devices (minimalna širina ekrana: 1150px) */
@media screen and (min-width: 1150px) {
  .container {
    margin-inline: auto; /* Centriranje kontejnera za velike ekrane */
  }

  .section {
    padding-block: 7rem 2rem; /* Veći unutarnji razmak za sekcije na velikim ekranima */
  }

  /* Navigacija */
  .nav {
    height: calc(var(--header-height) + 2rem); /* Povećana visina navigacije */
  }

  .nav__toggle,
  .nav__close {
    display: none; /* Sakrivanje gumba za otvaranje/zatvaranje navigacije na velikim ekranima */
  }

  .nav__menu {
    width: initial; /* Navigacijski izbornik vraća se na početnu širinu */
  }

  .nav__list {
    flex-direction: row; /* Linkovi u navigaciji prikazuju se u redu umjesto u stupcu */
    align-items: center; /* Vertikalno centriranje linkova */
    column-gap: 4rem; /* Razmak između linkova */
  }

  /* Promjena boje linkova u headeru kada je aktivan */
  .bg-header .nav__link {
    color: var(--text-color); /* Boja linka u navigaciji */
  }

  .bg-header .active-link,
  .bg-header .nav__link:hover {
    color: var(--first-color); /* Promjena boje linka prilikom hovera ili kada je aktivan */
  }

  /* Stil za gumb u headeru */
  .bg-header .button,
  .bg-header .button:hover {
    color: var(--white-color); /* Bijela boja za gumb i prilikom hovera */
  }

  /* Početna sekcija */
  .home__container {
    grid-template-columns: 475px 550px; /* Dva stupca za početnu sekciju */
    column-gap: 6rem; /* Razmak između stupaca */
    align-items: flex-start; /* Početno poravnanje elemenata prema vrhu */
    padding-top: 5.5rem; /* Gornji unutarnji razmak */
  }

  .home__content {
    row-gap: 4.5rem; /* Veći razmak između redaka sadržaja */
  }

  .home__data {
    text-align: initial; /* Lijevo poravnanje teksta */
  }

  .home__description {
    margin-bottom: 3rem; /* Veći razmak ispod opisa */
  }

  .home__buttons {
    justify-content: initial; /* Lijevo poravnanje gumba */
    column-gap: 3rem; /* Razmak između gumba */
  }

  .home__info {
    justify-content: initial; /* Lijevo poravnanje informacija */
    column-gap: 5.5rem; /* Razmak između informacija */
  }

  .home__info-description {
    font-size: var(--normal-font-size); /* Standardna veličina fonta za opis informacija */
  }

  .home__img-1 {
    width: 550px; /* Povećana širina prve slike */
    margin-left: 0; /* Uklonjen lijevi razmak */
  }

  .home__img-2 {
    width: 350px; /* Širina druge slike */
    border-width: 10px; /* Povećana širina ruba */
    left: -7rem; /* Pomaknuta pozicija slike ulijevo */
    bottom: -8rem; /* Pomaknuta pozicija slike prema dolje */
  }

  .home__lines {
    object-position: center; /* Pozicija linija centrirana unutar slike */
  }

  /* Sekcija "O nama" */
  .about__container {
    grid-template-columns: repeat(2, 480px); /* Dva stupca za sekciju "O nama" */
    column-gap: 9rem; /* Razmak između stupaca */
    padding-block: 9rem 2rem; /* Veći unutarnji razmak za bolje vizualno razdvajanje */
  }

  .about__images {
    order: -1; /* Prikazuje slike prije teksta */
  }

  .about__img-1 {
    width: 370px; /* Širina prve slike */
    border-width: 10px; /* Deblji rub slike */
    top: -9rem; /* Pomaknuta slika prema gore */
    left: 11rem; /* Pomaknuta pozicija slike ulijevo */
  }

  .about__img-2 {
    width: 470px; /* Širina druge slike */
  }

  .about__data,
  .about__data :is(.section__title, .section__subtitle) {
    text-align: initial; /* Lijevo poravnanje teksta */
  }

  .about__list {
    grid-template-columns: repeat(2, 1fr); /* Prikazuje listu u dva stupca */
    margin-bottom: 3.5rem; /* Razmak ispod liste */
  }

  /* Sekcija "Usluge" */
  .services__container {
    grid-template-columns: initial; /* Povratak na standardni prikaz u jednom stupcu */
    row-gap: 5rem; /* Veći vertikalni razmak između redova */
    padding-bottom: 4.5rem; /* Unutarnji razmak ispod sekcije */
  }

  .services__data {
    display: grid; /* Prikazuje sadržaj kao mrežu */
    grid-template-columns: 415px 370px max-content; /* Prikazuje sadržaj u tri stupca */
    justify-content: space-between; /* Raspoređuje stupce s prostora između njih */
    align-items: center; /* Vertikalno centriranje elemenata */
  }

  .services__data :is(.section__title, .section__subtitle),
  .services__description {
    text-align: initial; /* Lijevo poravnanje teksta za naslove i opis */
  }

  .services__data .section__title {
    margin-bottom: 0; /* Uklonjen razmak ispod naslova */
  }

  .services__swiper {
    max-width: 1100px; /* Maksimalna širina Swiper kontejnera */
  }
  /* Stilovi za kartice usluga */
.services__card {
  width: 348px; /* Širina kartice usluge */
  border-width: 3px; /* Debljina ruba kartice */
  padding: 3.5rem 2rem 6rem; /* Unutarnji razmak kartice - gornji, bočni, donji */
}

/* Stil za oblik unutar sekcije usluga */
.services__shape {
  height: 330px; /* Visina oblika unutar sekcije usluga */
}

/* Stil za strelice navigacije unutar Swiper komponenti (slider) */
.swiper-button-next,
.swiper-button-prev {
  bottom: 3rem; /* Položaj strelica je 3rem iznad dna slidera */
}

/* Sekcija projekata - Kontejner za projekte */
.projects__container {
  grid-template-columns: repeat(3, 350px); /* Prikazuje projekte u tri stupca, svaki širine 350px */
  column-gap: 2rem; /* Horizontalni razmak između stupaca projekata */
  padding-block: 5rem 4rem; /* Unutarnji razmak iznad i ispod sekcije projekata */
}

/* Stil za kartice unutar sekcije projekata */
.projects__card {
  border-width: 3px; /* Debljina ruba kartice projekta */
}

/* Podaci unutar kartice projekta */
.projects__data {
  padding: 2rem 1.5rem 4rem; /* Unutarnji razmak kartice - gornji, bočni, donji */
}

/* Sekcija kontakta - naslovi i podnaslovi */
.contact :is(.section__title, .section__subtitle) {
  text-align: initial; /* Lijevo poravnanje teksta za naslove i podnaslove u kontakt sekciji */
}

/* Kontejner za sekciju kontakta */
.contact__container {
  grid-template-columns: 530px 515px; /* Dva stupca za sadržaj kontakta - prvi širine 530px, drugi 515px */
  justify-content: initial; /* Lijevo poravnanje elemenata unutar kontejnera */
  align-items: flex-start; /* Elementi su poravnani prema vrhu */
  column-gap: 3.5rem; /* Horizontalni razmak između stupaca */
  padding-block: 3.5rem 4rem; /* Unutarnji razmak iznad i ispod sekcije kontakta */
}

/* Stil za sliku unutar sekcije kontakta */
.contact__img {
  width: 530px; /* Širina slike */
}

/* Stil za podatke unutar kontakt sekcije */
.contact__data {
  gap: 2rem; /* Razmak između elemenata unutar podataka o kontaktu */
}

/* Stil za kartice kontakta */
.contact__card {
  border-width: 3px; /* Debljina ruba kartice kontakta */
}

/* Naslov unutar kartice kontakta */
.contact__title {
  font-size: var(--h3-font-size); /* Veličina fonta za naslov kartice kontakta */
}

/* Sekcija footer - padding i razmaci */
.footer {
  padding-block: 4.5rem 3rem; /* Unutarnji razmak iznad i ispod footera */
}

/* Kontejner za sadržaj unutar footera */
.footer__container {
  padding-bottom: 6rem; /* Donji unutarnji razmak kontejnera footera */
}

/* Kontejner za sadržaj footera */
.footer__content {
  column-gap: 7rem; /* Horizontalni razmak između stupaca sadržaja footera */
}

/* Opis unutar footera */
.footer__description {
  margin-block: 1.5rem; /* Vertikalni razmak iznad i ispod opisa */
}

/* Naslov unutar footera */
.footer__title {
  margin-bottom: 1.5rem; /* Razmak ispod naslova footera */
}

/* Lista linkova unutar footera */
.footer__links,
.footer__list {
  row-gap: 1rem; /* Vertikalni razmak između linkova */
}

/* Gumb za povratak na vrh stranice (scrollup) */
.scrollup {
  right: 3rem; /* Postavljanje gumba za povratak na vrh na 3rem s desne strane ekrana */
}