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

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  background-image: url(../img/banner.jpg);
  background-size: cover;
  background-position: center;
  position: relative;
  height: 10rem;

  padding: 0 6.4rem;
  margin-bottom: 4.8rem;
}

.logo {
  height: 10rem;
}
.main-nav-list {
  display: flex;
  gap: 2.4rem;
  list-style: none;
  align-items: center;
}
.main-nav-link:link,
.main-nav-link:visited {
  text-decoration: none;
  display: inline-block;
  border-radius: 15px;
  padding: 0.5rem;
  font-family: Lobster Two;
  font-weight: 400;
  color: #4e1a1a;
  font-size: 2.4rem;

  transition: all 0.3s;
}
.main-nav-link:hover,
.main-nav-link:active {
  color: #000;
  background-color: rgba(255, 0, 0, 0.131);
}

.main-nav-link1:link,
.main-nav-link1:visited {
  text-decoration: none;
  display: inline-block;

  border-radius: 15px;
  padding: 1rem 2rem;
  border: transparent;
  font-size: 2.4rem;

  color: #444;
  transition: all 0.3s;
  background-color: #ff000055;
  color: white;
  font-family: Lobster Two;
}

.main-nav-link1:hover,
.main-nav-link1:active {
  color: #000;
  font-weight: 500;
  background-color: rgba(255, 0, 0, 0.084);
}
.btn-mobile-nav {
  border: none;
  background: transparent;
  cursor: pointer;
  display: none;
}
.icon-mobile-nav {
  height: 4.8rem;
  width: 4.8rem;
  color: #4e1a1a;
}
/* HERO */
.hero-grid {
  grid-template-columns: 35% 65%;
  gap: 3.2rem;
}

.hero-img {
  display: flex;

  justify-content: center;
}
.hero-text-box {
  display: block;
}
.hero-text {
  font-size: 1.8rem;
  line-height: 1.8;
}
.hero {
  padding: 3.2rem 3.2rem 9.6rem 3.2rem;
}
.hero img {
  width: 100%;
}
/* RADNO VRIJEME */

.hours {
  /* display: flex; */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 9.6rem;
}
.rad-heading {
  justify-content: center;
  align-items: center;
}
.radno-vrijeme-box {
  padding: 3.2rem 3.2rem 9.6rem 3.2rem;
}
.vrijeme {
  font-size: 1.8rem;
  line-height: 1.8;
  text-align: center;
  background-color: #ffcccc;
  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);
  border-radius: 11px;
  padding: 2.4rem 2.4rem;
  transition: all 0.4s;
}
.vrijeme:hover {
  transform: translateY(-1.2rem);
}
th {
  text-align: left;
}
table {
  border-spacing: 2rem;
}
.hours-grid {
  grid-template-columns: 63% 29%;
  gap: 10rem;
  align-items: start;
}

.hours-imgs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
  align-items: center;
}
.slika-radno {
  display: block;
  width: 100%;
  transition: all 0.3s;
}
.slika-radno:hover {
  transform: scale(1.1);
}

figure {
  overflow: hidden;
  border-radius: 11px;
}
/* GALERIJA */

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  padding: 1.6rem;
  align-items: center;
  border: 6px double #ffcccc;
  border-radius: 13px;
  cursor: pointer;
}

.gallery-item img {
  display: block;
  width: 100%;
  transition: all, 0.3s;
}
.gallery img:hover {
  transform: scale(1.1);
}
.frizure {
  padding: 3.2rem 3.2rem 9.6rem 3.2rem;
}
.friz-heading {
  text-align: center;
}

/* ISKUSTVA */
.iskustva-heading {
  text-align: center;
}
.iskustva {
  padding: 3.2rem 3.2rem 9.6rem 3.2rem;
}
.iskustva-box {
  display: flex;
  gap: 5.5rem;
  align-items: center;
  justify-content: center;
}
.napisi:link,
.napisi:visited {
  font-size: 2.4rem;
  color: #4e1a1a;
  font-weight: 700;
  font-family: Lobster Two;
  text-decoration: none;
  padding: 1rem 2rem;
  background-color: #ffcccc;
  border-radius: 11px;
  transition: all 0.3s;
}
.napisi:hover,
.napisi:active {
  color: #eee;

  background-color: #4e1a1a;
}
.iskustva-text {
  margin-bottom: 8rem;
  margin-top: 4.8rem;
}
/* LOKACIJA */
.mapa1 {
  border-radius: 9px;
}
.lokacija {
  padding: 3.2rem 3.2rem 9.6rem 3.2rem;
}
.mapa-grid {
  grid-template-columns: 60% 40%;
}
iframe {
  display: block;
  justify-self: start;
}
.slika-salona {
  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: space-between;
}

.slika-salona img {
  width: 80%;
  border-radius: 9px;
}
.iskustva-heading {
  text-align: center;
}
.text-kuca {
  font-size: 1.8rem;
  line-height: 1.8;
  font-weight: 700;
}
/* FOOTER */
.footer {
  padding: 10rem 0;

  border-top: 1px solid #b39a9a;
}
.footer-list {
  display: flex;
  gap: 5.5rem;
  list-style: none;
  justify-content: center;
  align-items: center;
}
.footer-list a:link,
.footer-list a:visited {
  font-size: 1.8rem;
  color: #b39a9a;
  font-weight: 500;

  text-decoration: none;
}
.icn {
  width: 2.4rem;
  height: 2.4rem;
  color: #b39a9a;
}
.footer-text {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}