/* Varijable za boje i fontove za lakše održavanje */
:root {
  --primary-color: #000000;
  --highlight-color: #eba14c;
  --accent-color: #eba14c;
  --title-font: "Forum", serif;
  --text-font: "montserrat", sans-serif;
}

/* Glavni section dizajn */
.main_section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("../assets/s123.jpg") center/cover no-repeat;
  height: 100vh;
  width: 100vw;
  position: relative;
  color: var(--primary-color);
  text-align: center;
  padding: 0 20px;
}

.home_title {
  margin-top: -5vh;
}

.main_title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 400;
  margin-left: -13%;
  margin-top: -15%;
  text-align: center;
}

.title_text {
  display: flex;
  font-family: var(--title-font);
  font-weight: 400;
  font-size: clamp(3rem, 8vw, 7rem);
  align-items: flex-start;
  gap: 5px;
  letter-spacing: normal;
}

.highlight {
  margin-left: 5%;
  font-family: var(--title-font);
  font-weight: 400;
  color: var(--highlight-color);
}

.inspirational_text {
  width: 100%;
  max-width: 400px;
  font-family: var(--text-font);
  font-weight: 400;
  text-align: left;
  line-height: normal;
  font-size: clamp(1rem, 2vw, 1.5rem);
  color: black;
  margin-right: -50%;
  margin-top: -3%;
}

/* Media queries - poboljšana organizacija */
@media (min-width: 1921px) {
  .title_text {
    font-size: clamp(3rem, 8vw, 8rem);
  }

  .highlight {
    margin-left: 5%;
    font-family: var(--title-font);
    font-weight: 400;
    color: var(--highlight-color);
  }

  .inspirational_text {
    font-size: 1.75rem; /* Koristimo rem umjesto px za bolju skalabilnost */
    margin-right: -40%;
    margin-top: -2%;
  }
}

@media (min-width: 1366px) and (max-width: 1919px) {
  .main_title {
    letter-spacing: normal;
  }
}

@media (max-width: 1365px) {
  .main_title {
    letter-spacing: normal;
    margin-left: auto;
  }
  .inspirational_text {
    display: none;
  }
}

@media (max-width: 768px) {
  .main_section {
    background: url("../assets/s123.jpg") center/cover no-repeat;
  }

  .main_title {
    display: flex;
    font-size: 3.125rem; /* 50px u rem */
    justify-content: center;
    align-items: center;
    margin-top: -50%;
    margin-left: 0px;
  }

  .title_text {
    font-size: clamp(4rem, 8vw, 7rem);
    margin: 0;
    color: var(--primary-color);
  }

  .highlight {
    color: var(--accent-color);
  }

  .inspirational_text {
    display: none;
  }

  p.text.right {
    padding-inline: 0px;
    text-align: center;
  }
}

/* Dodatni prijelom za veoma male ekrane */
@media (max-width: 480px) {
  .main_title {
    font-size: 2.5rem;
  }

  .title_text {
    font-size: clamp(3rem, 8vw, 5rem);
  }

  .highlight {
    margin-top: -5px;
  }

  .break {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}