@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@300;700&display=swap");

:root {
  --swiper-theme-color: #c5377c !important;
}

html,
body,
div,
span,
h1,
h2,
h3,
p,
a,
ul,
li,
form,
label {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  box-sizing: border-box;
  font-family: "oskar", sans-serif;
}

body {
  width: 100%;
  line-height: 1;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  cursor: pointer;
}

button {
  border: none;
  cursor: pointer;
}

/*  ? form */
.form {
  width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  z-index: 101;
  position: fixed;
  top: 0;
  bottom: 0;
  background-color: #fff;
  transform: translateX(100%);
  transition: 1s ease-in-out forwards;
}

.form-desk-wrap {
  width: 69.47916vw;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 6.97916vw;
}

@media screen and (max-width: 760px) {
  .form-desk-wrap {
    width: 76.4018vw;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 4vw;
  }
}

.form-wrap {
  width: 69.47916vw;
  margin: 0 auto;
  margin-top: 30vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 8vw;
}

@media screen and (max-width: 760px) {
  .form-wrap {
    width: 76.4018vw;
    margin: 0 auto;
    margin-top: 30.8411vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 8vw;
  }
}

.form-1,
.form-2 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 2vw;
  width: 31.25vw;
}

@media screen and (max-width: 760px) {
  .form-1,
  .form-2 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 3vw;
    width: 69.47916vw;
  }
}

.transform-left {
  animation: bouncel 1s ease-in-out forwards;
}

@keyframes bouncel {
  0% {
    transform: translateX(100%);
  }
  70% {
    transform: translateX(-10%);
  }
  100% {
    transform: translateX(0%);
  }
}

.transform-right {
  animation: bouncer 0.7s ease-in-out forwards;
}

@keyframes bouncer {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

.frmblock {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

.frmblock-btn {
  width: fit-content;
}

.broj-mjesta {
  font-size: 1vw;
  padding-left: 2vw;
}

@media screen and (max-width: 760px) {
  .broj-mjesta {
    font-size: 3.03738vw;
  }
}

.textbox::placeholder {
  font-family: "oskar", sans-serif;
  color: #000113;
  font-size: 1.822916vw;
  font-style: normal;
  font-weight: 100;
  opacity: 0.3;
}

@media screen and (max-width: 760px) {
  .textbox::placeholder {
    font-size: 3.03738vw;
  }
}

.textbox {
  font-family: "oskar", sans-serif;
  border: 1px solid #fff;
  border-bottom: 1px solid;
  width: 100%;
  color: #000113;
  font-size: 1.822916vw;
  font-style: normal;
  font-weight: 100;
  margin-bottom: 3.55vh;
  padding-bottom: 0.5vw;
}

@media screen and (max-width: 760px) {
  .textbox {
    font-size: 3.03738vw;
    margin-bottom: 4vw;
    padding-bottom: 1vw;
  }
}

#frmtitula {
  margin-bottom: 0vh;
}

@media screen and (max-width: 760px) {
  #frmtitula {
    margin-bottom: 4vw;
  }
}

.textbox:focus {
  outline: none;
}

.textbox:focus {
  border: 1px solid #fff;
  border-bottom: 0.3vw solid #a42a7b;
}

.pravila {
  font-size: 0.8vw;
  font-family: "Merriweather Sans", sans-serif;
  margin-bottom: 0.5vw;
  line-height: 1.55;
  opacity: 0.6;
}

@media screen and (max-width: 760px) {
  .pravila {
    font-size: 2vw;
  }
}

.link-pravila {
  font-size: 0.8vw;
  font-family: "Merriweather Sans", sans-serif;
  color: #a42a7b;
  font-weight: bold;
  line-height: 1.55;
}

@media screen and (max-width: 760px) {
  .link-pravila {
    font-size: 2vw;
  }
}

.prihvacam {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2px;
}

.radlab {
  font-size: 0.8vw;
  color: #a42a7b;
  font-family: "Merriweather Sans", sans-serif;
  font-weight: bold;
}

@media screen and (max-width: 760px) {
  .radlab {
    font-size: 2vw;
  }
}

.nav-mob-btn {
  border-radius: 3.09895vw;
  background: linear-gradient(270deg, #a42a7b 0%, #fe576a 100%);
  height: 6.197916vw;
  padding: 0vw 4.34579vw;
}

@media screen and (max-width: 760px) {
  .nav-mob-btn {
    border-radius: 8vw;
    height: 16vw;
    padding: 0vw 9.34579vw;
  }
}

.btn-link-mob {
  color: #fff;
  text-align: center;
  font-size: 3.4375vw;
  font-style: normal;
  font-weight: 500;
  text-transform: capitalize;
}

@media screen and (max-width: 760px) {
  .btn-link-mob {
    font-size: 8.411214vw;
  }
}

/* ? header */
.nav {
  background: #fff;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 102;
}

.inner-wrap {
  max-width: 80vw;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 7vw;
}

@media screen and (max-width: 760px) {
  .inner-wrap {
    max-width: 88.785046vw;
    height: 100%;
    align-items: flex-end;
    padding: 6.542vw 0vw;
  }
}

.logo {
  width: 36.66vw;
}

@media screen and (max-width: 760px) {
  .logo {
    width: 64.7196vw;
  }
}

.barholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.46875vw;
  cursor: pointer;
}

@media screen and (max-width: 760px) {
  .barholder {
    gap: 0vw;
    margin-bottom: 1.8px;
  }
}

.bar1,
.bar2,
.bar3 {
  width: 3.64583vw;
  height: 0.4166vw;
  background-color: #000;
  border-radius: 0.260416vw;
  transition: all 0.4s cubic-bezier(0, 0.79, 0.49, 1.12);
}

.bar2 {
  transition: all 0.4s cubic-bezier(0, 1.32, 0.82, 1.51);
}

@media screen and (max-width: 760px) {
  .bar1,
  .bar2,
  .bar3 {
    width: 7.00934vw;
    height: 0.9vw;
    border-radius: 0.9vw;
  }

  .bar1,
  .bar2 {
    margin-bottom: 1.25vw;
  }
}

.change .bar1 {
  -webkit-transform: rotate(-45deg)
    translate(0.2604166666666667vw, 0.5208333333333333vw);
  transform: rotate(-45deg) translate(-0.5729166666666667vw, 0.625vw);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg)
    translate(-0.2604166666666667vw, -0.5208333333333333vw);
  transform: rotate(45deg)
    translate(-0.5729166666666667vw, -0.6770833333333333vw);
}

@media screen and (max-width: 760px) {
  .change .bar1 {
    -webkit-transform: rotate(-45deg)
      translate(-1.869158878504673vw, 1.635514018691589vw);
    transform: rotate(-45deg)
      translate(-1.869158878504673vw, 1.635514018691589vw);
  }

  .change .bar2 {
    opacity: 0;
  }

  .change .bar3 {
    -webkit-transform: rotate(45deg)
      translate(-1.168224299065421vw, -1.168224299065421vw);
    transform: rotate(45deg)
      translate(-1.168224299065421vw, -1.168224299065421vw);
  }
}

.header-border-wrap {
  height: 1vh;
  width: 100%;
  background: linear-gradient(
    90deg,
    #d9d9d9 -0.17%,
    #d9d9d9 -0.17%,
    #fe576a -0.16%,
    #951d8c 100%
  );
}

@media screen and (max-width: 760px) {
  .header-border-wrap {
    display: none;
  }
}

.error {
  margin-top: -1.5vw;
  margin-bottom: 1.5vw;
}

.error,
#erroruvjeti1,
#erroruvjeti2 {
  color: red;
  font-family: "oskar", sans-serif;
  font-size: 1vw;
  font-style: normal;
  font-weight: 100;
}

@media screen and (max-width: 760px) {
  .error,
  #erroruvjeti1,
  #erroruvjeti2 {
    font-size: 2.5vw;
  }
  .error {
    margin-top: -3vw;
    margin-bottom: 3vw;
  }
}

#senderror {
  align-self: center;
  margin-bottom: 0.5vw;
  font-family: "oskar", sans-serif;
  font-size: 1.8vw;
  font-style: normal;
  font-weight: 100;
}

@media screen and (max-width: 760px) {
  #senderror {
    margin-bottom: 0.3vw;
    font-size: 2.5vw;
  }
}

/* ? navigation desk */
.menu-desk {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  height: 7vw;
}

#deskmenu {
  display: none;
}

.menu-desk-wrap {
  max-width: 80vw;
  margin: 0 auto;
}

.menu-desk-inner-wrap {
  max-width: 80vw;
  margin: 0 auto;
  display: flex;
  /* justify-content: space-between; */

  justify-content: flex-start;
  gap: 3vw;

  align-items: center;
  margin-bottom: 1vw;
}

.nav-desk-ul {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 3.9083vw;
}

.nav-desk-li {
  color: #000113;
  text-align: center;
  font-size: 3.4vw;
  font-style: normal;
  font-weight: 500;
  line-height: 3.64583vw;
  padding-top: 1vw;
}

.nav-desk-li:hover {
  color: #fe576a;
  transition: 0.3s;
  cursor: pointer;
}

.nav-desk-btn {
  border-radius: 0 0 0.70296875vw 0.70296875vw;
  background: linear-gradient(90deg, #a42a7b 0%, #fe576a 100%);
  height: 6vw;
  padding: 0vw 1.0416vw;
  margin-right: 6.666vw;
}

.btn-link {
  color: #fff;
  text-align: center;
  font-size: 3.4vw;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
}

@media screen and (max-width: 760px) {
  .btn-link {
    font-size: 9.813084vw;
  }
}

.ulaz {
  color: #fff;
  text-align: center;
  font-size: 1.666vw;
  font-style: normal;
  font-weight: 500;
  line-height: 1.302083vw;
}

@media screen and (max-width: 760px) {
  .ulaz {
    font-size: 4.43925vw;
    line-height: 3.271028vw;
  }
}

/* ? nav mob */
.nav-mob {
  display: none;
}

@media screen and (max-width: 760px) {
  .nav-mob {
    display: block;
    width: 100%;
    height: 110vh;
    margin: 0 auto;
    z-index: 100;
    position: fixed;
    top: 0;
    bottom: 0;
    background-color: #fff;
    transform: translateX(100%);
    transition: 1s ease-in-out forwards;
  }
}

.transform-left {
  animation: bouncel 1s ease-in-out forwards;
}

@keyframes bouncel {
  0% {
    transform: translateX(100%);
  }
  70% {
    transform: translateX(-10%);
  }
  100% {
    transform: translateX(0%);
  }
}

.transform-right {
  animation: bouncer 0.7s ease-in-out forwards;
}

@keyframes bouncer {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

.nav-mob-wrap {
  margin-top: 44.626vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 16.3551vw;
}

.nav-mob-ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10vw;
}

.nav-mob-li {
  color: #000113;
  text-align: center;
  font-size: 10.514018vw;
  font-style: normal;
  font-weight: 500;
  cursor: pointer;
}

/* ? section-hero */
.section-hero {
  width: 100%;
  height: 56.25vw;
  background: url(img/hero-background.svg);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 760px) {
  .section-hero {
    width: 100%;
    height: 100%;
    background: url(img/hero-background-mob.svg);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

.section-hero-wrap {
  max-width: 80vw;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 15.5vh;
}

@media screen and (max-width: 760px) {
  .section-hero-wrap {
    max-width: 88.785046vw;
    padding-top: 28vw;
  }
}

.section-hero-above-h1 {
  color: #bebebe;
  font-family: "Merriweather Sans", sans-serif;
  font-size: 1.3vw;
  font-style: normal;
  font-weight: 300;
  line-height: 2.19vw;
  padding-top: 3.5vw;
}

@media screen and (max-width: 760px) {
  .section-hero-above-h1 {
    font-size: 3.27102vw;
    line-height: 5.37383vw;
    padding-top: 0vw;
  }
}

.section-hero-h1 {
  color: #fff;
  font-size: 7.25vw;
  font-style: normal;
  font-weight: 500;
  line-height: 6vw;
  text-transform: lowercase;
  max-width: 67.7vw;
  margin-bottom: 3.2vw;
}

@media screen and (max-width: 760px) {
  .section-hero-h1 {
    font-size: 16.355vw;
    line-height: 0.8;
    max-width: 100%;
    margin-bottom: 14.0186vw;
    text-align: left;
  }
}

.section-hero-where-when {
  display: flex;
  justify-content: left;
  align-items: flex-start;
  gap: 1.8083vw;
  margin-bottom: 1.5833vw;
}

@media screen and (max-width: 760px) {
  .section-hero-where-when {
    gap: 5.37383vw;
    margin-bottom: 7vw;
  }
}

.where-when-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.where-when-h2 {
  color: #fff;
  font-size: 2.083vw;
  font-style: normal;
  font-weight: 500;
  margin-bottom: 0.2083vw;
}

@media screen and (max-width: 760px) {
  .where-when-h2 {
    font-size: 5.52149vw;
    line-height: 1;
    margin-bottom: 3vw;
  }
}

.where-when-p {
  color: #bebebe;
  font-size: 1.6vw;
  font-style: normal;
  font-weight: 100;
}

@media screen and (max-width: 760px) {
  .where-when-p {
    font-size: 5.52149vw;
    line-height: 6vw;
  }
}

.when-icon {
  width: 3vw;
}

@media screen and (max-width: 760px) {
  .when-icon {
    width: 10vw;
  }
}

.where-icon {
  width: 3vw;
}

@media screen and (max-width: 760px) {
  .where-icon {
    width: 10vw;
  }
}

.hero-btn {
  border-radius: 0 0 0.70296875vw 0.70296875vw;
  background: linear-gradient(90deg, #a42a7b 0%, #fe576a 100%);
  height: 6.875vw;
  padding: 0vw 1.0416vw;
  margin-top: 1vw;
  margin-bottom: 3.5416vw;
  animation: wiggle 1s infinite;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 760px) {
  .hero-btn {
    height: 18.45794vw;
    margin-bottom: 53.271vw;
    margin-top: 1.869159vw;
    border-radius: 0 0 1.869158vw 1.869158vw;
    padding: 0vw 4vw;
  }
}

@keyframes wiggle {
  0% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-5px);
  }
  20% {
    transform: translateX(5px);
  }
  30% {
    transform: translateX(0);
  }
  40% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(0);
  }
  60% {
    transform: translateX(0);
  }
  70% {
    transform: translateX(0);
  }
  80% {
    transform: translateX(5px);
  }
  90% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(0);
  }
}

/* ? section 2 */
.section-2 {
  width: 100%;
  margin-top: 5.1vw;
  margin-bottom: 6.266vw;
}

@media screen and (max-width: 760px) {
  .section-2 {
    margin-top: 14.7196vw;
    margin-bottom: 0vw;
  }
}

.section-2-h1 {
  color: #000113;
  font-size: 6.77083vw;
  font-style: normal;
  font-weight: 500;
  margin-bottom: 4.8916vw;
}

@media screen and (max-width: 760px) {
  .section-2-h1 {
    font-size: 16.3551vw;
    margin-bottom: 13.551vw;
  }
}

.section-2-wrap {
  max-width: 80vw;
  margin: 0 auto;
}

@media screen and (max-width: 760px) {
  .section-2-wrap {
    max-width: 88.785046vw;
  }
}

.people {
  display: block;
}

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

.section-2-grid {
  display: none;
  /* display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2.425vw;
  row-gap: 8.25vw; */
}

@media screen and (max-width: 760px) {
  .section-2-grid {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 11.6822vw;
  }
}

.section-2-items {
  width: 100%;
  height: 25.033vw;
  background: url(img/stefica.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right top;
  position: relative;
}

@media screen and (max-width: 760px) {
  .section-2-items {
    height: 80.8411vw;
  }
}

.section-2-items-1 {
  background: url(./img/govornici/Andreja\ Gracin.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right top;
}

.section-2-items-2 {
  background: url(./img/govornici/Bruno\ Rožman.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right top;
}

.section-2-items-3 {
  background: url(./img/govornici/Ivana\ Mikanović.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right top;
}

.section-2-items-4 {
  background: url(./img/govornici/Velimir\ Srića.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right top;
}
.section-2-items-42 {
  background: url(./img/govornici/2024/jagodic.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right top;
}

.section-2-items-5 {
  background: url(./img/govornici/Mirna\ Horvat.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right top;
}

.section-2-items-6 {
  background: url(./img/govornici/Dalibor\ Kratohvil.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right top;
}

.section-2-items-7 {
  background: url(./img/govornici/Lara\ Šubić\ Šuša.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right top;
}

.section-2-items-8 {
  background: url(./img/govornici/Ratko\ Rudić.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right top;
}

.section-2-items-9 {
  background: url(./img/govornici/2024/iva.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right top;
}

.section-2-items-10 {
  background: url(./img/govornici/2024/martina.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right top;
}

.section-2-items-11 {
  background: url(./img/govornici/Martina\ Šepić.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right top;
}

.section-2-items-12 {
  background: url(./img/govornici/Ana\ Petrović.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right top;
}

.section-2-items-13 {
  background: url(./img/govornici/2024/marijana.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right top;
}

.section-2-items-14 {
  background: url(./img/govornici/Nikolina\ Sertić.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right top;
}

.section-2-items-15 {
  background: url(./img/govornici/Sandra\ Matić.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right top;
}

.section-2-items-info {
  position: absolute;
  width: 100%;
  min-height: 9.8913vh;
  left: 0;
  bottom: 0;
  padding: 0.6583vw 0vw 0.625vw 0.725vw;
  background: linear-gradient(90deg, #fe576a 0%, rgba(149, 29, 140, 0.9) 100%);
}

@media screen and (max-width: 760px) {
  .section-2-items-info {
    padding: 2.570093vw 0vw 1.86915vw 2.33644vw;
    min-height: auto;
  }
}

.section-2-items-h2 {
  min-height: auto;
  color: #fff;
  font-size: 2.864583vw;
  font-style: normal;
  font-weight: 500;
  line-height: 0.8;
}

@media screen and (max-width: 760px) {
  .section-2-items-h2 {
    font-size: 8.17757vw;
    min-height: auto;
  }
}

.section-2-items-p {
  color: #fff;
  font-family: "Merriweather Sans", sans-serif;
  font-size: 1.0416vw;
  font-style: normal;
  font-weight: 300;
  padding: 0.7rem 0;
  line-height: 1.2;
  text-transform: initial;
}

@media screen and (max-width: 760px) {
  .section-2-items-p {
    font-size: 3.037383vw;
  }
}

.swiper-wrapper {
  margin-bottom: 100px;
}

.swiper-slide {
  padding-left: 35px;
}

@media screen and (max-width: 760px) {
  .items-mob-hide {
    display: none;
  }
}

.button-load-more {
  display: none;
}

@media screen and (max-width: 760px) {
  .button-load-more {
    display: block;
    margin: 0 auto;
    font-family: "oskar", sans-serif;
    background: #000113;
    color: #fff;
    text-align: center;
    font-size: 7.009345vw;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
    margin-top: 5.8411vw;
    padding: 2.33644vw 5.84112vw;
  }

  .button-load-more:hover {
    cursor: pointer;
  }
}

/* ? section 3 */
.section-3 {
  width: 100%;
  margin: 0 auto;
  background: #000113;
  padding: 6.5083vw 0vw 7.4vw 0vw;
}

@media screen and (max-width: 760px) {
  .section-3 {
    padding: 14.01869vw 0vw;
  }
}

.section-3-wrap {
  max-width: 85.2083vw;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 6.6166vw;
}

@media screen and (max-width: 760px) {
  .section-3-wrap {
    max-width: 88.785046vw;
    gap: 17.757vw;
  }
}

.section-3-h1 {
  color: #fff;
  font-size: 6.77083vw;
  font-style: normal;
  font-weight: 500;
}

@media screen and (max-width: 760px) {
  .section-3-h1 {
    font-size: 16.35514vw;
  }
}

.section-3-themes {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 3.383vw;
}

@media screen and (max-width: 760px) {
  .section-3-themes {
    gap: 3.271028vw;
  }
}

.themes-left {
  width: 4.0625vw;
  height: 11.4311vw;
  background: linear-gradient(180deg, #c5387d 0%, rgba(157, 34, 138, 0) 100%);
  margin-top: 0.78vw;
}

@media screen and (max-width: 760px) {
  .themes-left {
    width: 3.97196vw;
    height: 18.69158vw;
    margin-top: 0vw;
  }
}

.themes-middle {
  width: 55.625vw;
}

@media screen and (max-width: 760px) {
  .themes-middle-2 {
    width: 77.336vw;
  }
}

.themes-right {
  align-self: center;
  width: 18.85416vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 1.8416vw;
}

@media screen and (max-width: 760px) {
  .themes-right {
    width: none;
  }
}

.themes-h2 {
  color: #fff;
  font-size: 3vw;
  font-style: normal;
  line-height: 0.8;
  font-weight: 500;
  margin-bottom: 1.8vw;
}

@media screen and (max-width: 760px) {
  .themes-h2 {
    width: 77.3364vw;
    font-size: 9.34579vw;
    line-height: 7.00934vw;
    margin-bottom: 6.3084vw;
  }
}

.themes-middle-above-title {
  color: #c5387d;
  font-size: 2.60416vw;
  font-style: normal;
  font-weight: 500;
  line-height: 3.125vw;
}

@media screen and (max-width: 760px) {
  .themes-middle-above-title {
    font-size: 5.1401869vw;
    margin-bottom: 3vw;
  }
}

.theme-bottom {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 7.6583vw;
}

@media screen and (max-width: 760px) {
  .theme-bottom {
    gap: 0vw;
  }
}

.theme-bottom-left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.theme-bottom-left-p {
  width: 54.47916vw;
  color: #fff;
  font-family: "Merriweather Sans", sans-serif;
  font-size: 1.1vw;
  font-style: normal;
  font-weight: 300;
  line-height: 1.65;
}

@media screen and (max-width: 760px) {
  .theme-bottom-left-p {
    width: 69.1588vw;
    font-size: 3.0373833vw;
    line-height: 5.37383vw;
  }
}

.theme-bottom-left-p-2 {
  width: 51.82291vw;
}

@media screen and (max-width: 760px) {
  .theme-bottom-left-p-2 {
    width: 69.1588vw;
  }
}

.moderator-and-title {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.8vw;
  margin-top: 2.8171vw;
}

@media screen and (max-width: 760px) {
  .moderator-and-title {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.9vw;
    margin-top: 3.73831vw;
  }
}

.theme-bottom-left-h2 {
  color: #c5387d;
  font-size: 2.60416vw;
  font-style: normal;
  font-weight: 500;
}

@media screen and (max-width: 760px) {
  .theme-bottom-left-h2 {
    font-size: 3.73831vw;
  }
}

.theme-bottom-left-title {
  color: #bebebe;
  font-family: "Merriweather Sans", sans-serif;
  font-size: 1.0416vw;
  font-style: normal;
  font-weight: 300;
}

@media screen and (max-width: 760px) {
  .theme-bottom-left-title {
    font-size: 2.803738vw;
    line-height: 1.3;
  }
}

.foto {
  display: none;
}

@media screen and (max-width: 760px) {
  .foto {
    display: block;
    color: #bebebe;
    font-family: "Merriweather Sans", sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 2.803738vw;
    line-height: 1.3;
    font-style: italic;
    opacity: 0.4;
  }
}

.foto--desk {
  color: #bebebe;
  font-family: "Merriweather Sans", sans-serif;
  font-size: 1.0416vw;
  font-style: normal;
  font-weight: 300;
  opacity: 0.4;
  align-self: center;
  margin-left: 2vw;
  margin-bottom: -3.3vw;
}

@media screen and (max-width: 760px) {
  .foto--desk {
    display: none;
  }
}

.panel-1 {
  background: url(img/moderatori/snjezana_krnetic.png);
  margin-top: 6vw;
}

.panel-2 {
  background: url(img/moderatori/aco.jpg);
  margin-top: 6vw;
}

.panel-3 {
  background: url(img/moderatori/bojana_mrvos.png);
  margin-top: 6vw;
}

.panel-4 {
  background: url(img/moderatori/mislav.jpg);
  margin-top: 6vw;
}

.panel-5 {
  background: url(img/moderatori/jelena_jelusic.png);
  margin-top: 6vw;
}

.theme-bottom-right {
  width: 17.1875vw;
  height: 17.1875vw;
  border-radius: 17.1875vw;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  position: relative;
}

.predavac b {
  font-weight: 700;
}

@media screen and (max-width: 760px) {
  .theme-bottom-right {
    display: none;
  }
}

.theme-bottom-right-overlay {
  width: 17.1875vw;
  height: 8.59375vw;
  border-bottom-left-radius: 8.59375vw;
  border-bottom-right-radius: 8.59375vw;
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(0deg, #c5387d 0%, rgba(157, 34, 138, 0) 100%);
}

@media screen and (max-width: 760px) {
  .theme-bottom-right-overlay {
    display: none;
  }
}

/* ? section-4 */
.section-4 {
  width: 100%;
  margin: 0 auto;
  margin-top: 4.6354vw;
  margin-bottom: 4.9479vw;
}

@media screen and (max-width: 760px) {
  .section-4 {
    margin: 14.95327vw 0vw 13.5514vw 0vw;
  }
}

.section-4-wrap {
  width: 85vw;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4.583vw;
}

@media screen and (max-width: 760px) {
  .section-4-wrap {
    width: 100%;
    gap: 13.5514vw;
  }
}

.section-4-h1 {
  color: #000113;
  font-size: 6.77083vw;
  font-style: normal;
  font-weight: 500;
  padding-left: 2.5vw;
}

@media screen and (max-width: 760px) {
  .section-4-h1 {
    font-size: 16.35514vw;
    padding-left: 5.607477vw;
  }
}

.program-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10.46875vw;
}

@media screen and (max-width: 760px) {
  .program-grid {
    display: flex;
    flex-direction: column;
    gap: 10vw;
  }
}

.program-left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 2.083vw;
}

@media screen and (max-width: 760px) {
  .program-left {
    gap: 10vw;
  }
}

.program-stanice {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: 2.5vw;
}

@media screen and (max-width: 760px) {
  .program-stanice {
    width: 90%;
    margin-left: 5.607477vw;
  }
}

.sat-p {
  color: #000113;
  text-align: center;
  font-size: 2.083vw;
  font-style: normal;
  font-weight: 500;
  margin-bottom: 0.8vh;
}

@media screen and (max-width: 760px) {
  .sat-p {
    font-size: 5.140186vw;
  }
}

.predavac-1 {
  color: #000113;
  font-family: "Merriweather Sans", sans-serif;
  font-size: 1.3vw;
  font-style: normal;
  font-weight: 300;
  line-height: 1.5;
}

@media screen and (max-width: 760px) {
  .predavac-1 {
    font-size: 3.271028vw;
  }
}

.predavac {
  color: #000113;
  font-family: "Merriweather Sans", sans-serif;
  font-size: 1vw;
  font-style: normal;
  font-weight: 300;
  line-height: 1.5;
  margin-bottom: 2vh;
  width: 31vw;
}

@media screen and (max-width: 760px) {
  .predavac {
    width: 82vw;
    font-size: 2.5700934vw;
    margin-bottom: 1vh;
  }
}

.predavac-pink {
  color: #c5387d;
  font-weight: 800;
}

.panel-wrap {
  position: relative;
  padding: 2.39583vw 0 2.1875vw 2.5vw;
  background: #efefef;
  margin-left: 0vw;
}

@media screen and (max-width: 760px) {
  .panel-wrap {
    padding: 6.074766vw 0 6.074766vw 5.607477vw;
    background: #efefef;
    margin-left: 0vw;
    width: 96vw;
    margin: 0 2vw;
    overflow-x: hidden;
  }
}

.panel-block {
  position: absolute;
  top: 0;
  right: 0;
  color: #000113;
  text-align: center;
  font-size: 1.302083vw;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  width: 6.927083vw;
  background: #e9c25d;
  padding: 0.6vh;
}

@media screen and (max-width: 760px) {
  .panel-block {
    font-size: 3vw;
    width: 16.82vw;
  }
}

.fireside {
  width: 9.21875vw;
}

@media screen and (max-width: 760px) {
  .fireside {
    width: 22.42vw;
  }
}

.naslov {
  width: 90%;
  color: #000113;
  font-size: 2.34375vw;
  font-style: normal;
  font-weight: 500;
  margin-bottom: 0.5vw;
}

@media screen and (max-width: 760px) {
  .naslov {
    font-size: 6.30841vw;
    margin-bottom: 2.0416vw;
    max-width: 74.76635vw;
  }
}

.naslov-m {
  width: 90%;
  color: #000113;
  font-size: 2vw;
  font-style: normal;
  font-weight: 500;
  margin-bottom: 0.5vw;
}

@media screen and (max-width: 760px) {
  .naslov-m {
    font-size: 5.5vw;
    margin-bottom: 2.0416vw;
    max-width: 74.76635vw;
  }
}

.panel-naslov {
  margin-bottom: 1.5vw;
}

@media screen and (max-width: 760px) {
  .panel-naslov {
    margin-bottom: 3vw;
  }
}

.program-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 2.083vw;
}

@media screen and (max-width: 760px) {
  .program-right {
    gap: 10vw;
  }
}

/* ? section-5 */
.section-5 {
  width: 100%;
  height: 38.9583vw;
  background: url(img/parallax-desk.png);
  background-position: center calc(100% + 12vh);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-attachment: fixed;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

@media screen and (max-width: 760px) {
  .section-5 {
    width: 100%;
    height: 70.56vw;
    background: url(img/parallax-mob.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: unset;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
}

.parallax-border {
  height: 0.28125vw;
  width: 100%;
  background: linear-gradient(90deg, #d9d9d9 0%, #fe576a 0.01%, #951d8c 100%);
}

@media screen and (max-width: 760px) {
  .parallax-border {
    height: 1vh;
  }
}

@media screen and (max-width: 760px) {
  .border-mob {
    display: none;
  }
}

/* ? section 6 */
.section-6 {
  width: 100%;
  margin: 5.2083vw auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 5.2083vw;
}

@media screen and (max-width: 760px) {
  .section-6 {
    margin: 11.21495vw auto;
    gap: 11.21495vw;
  }
}

.powered-by {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2.083vw;
}

@media screen and (max-width: 760px) {
  .powered-by {
    gap: 3.083vw;
  }
}

.powered-by-h2 {
  color: #c5387d;
  text-align: center;
  font-size: 3.125vw;
  font-style: normal;
  font-weight: 500;
}

@media screen and (max-width: 760px) {
  .powered-by-h2 {
    font-size: 6.542056vw;
  }
}

.logo-24sata {
  width: 7.93114583vw;
  height: 100%;
}

@media screen and (max-width: 760px) {
  .logo-24sata {
    width: 16.35514vw;
  }
}

.partneri {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 1vh;
}

.partneri-h2 {
  color: #c5387d;
  text-align: center;
  font-size: 3.125vw;
  font-style: normal;
  font-weight: 500;
  margin-bottom: 2rem;
}

@media screen and (max-width: 760px) {
  .partneri-h2 {
    font-size: 6.542056vw;
    margin-bottom: 1vh;
  }
}

.logo-top {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 7.4074vh;
}

@media screen and (max-width: 760px) {
  .logo-top {
    margin-bottom: 3vh;
  }
}

.enna-logo {
  width: 8.5475vw;
  height: 100%;
}

@media screen and (max-width: 760px) {
  .enna-logo {
    width: 17.52336vw;
  }
}

.energia-logo {
  width: 22.03125vw;
  height: 100%;
}

@media screen and (max-width: 760px) {
  .energia-logo {
    width: 45.0934vw;
  }
}

.petrol-logo {
  width: 12.03125vw;
  height: 100%;
}

@media screen and (max-width: 760px) {
  .petrol-logo {
    width: 35.0934vw;
  }
}

.hp-logo {
  width: 10.03125vw;
  height: 100%;
}

@media screen and (max-width: 760px) {
  .hp-logo {
    width: 25.0934vw;
  }
}

.logo-bottom-1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.0729vw;
  margin-bottom: 5.83vh;
}

@media screen and (max-width: 760px) {
  .logo-bottom-1 {
    gap: 5.0729vw;
    margin-bottom: 3vh;
  }
}

.hgk-logo {
  width: 8vw;
  height: 100%;
}

@media screen and (max-width: 760px) {
  .hgk-logo {
    width: 16vw;
  }
}

.philip-logo {
  width: 9vw;
  height: 100%;
}

@media screen and (max-width: 760px) {
  .philip-logo {
    width: 18vw;
  }
}

.logo-bottom-2 {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 760px) {
  .logo-bottom-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

.logo-bottom-2-top,
.logo-bottom-2-bottom {
  max-width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4vw;
  flex-wrap: wrap;
}

@media screen and (max-width: 760px) {
  .logo-bottom-2-top {
    flex-direction: column;
    gap: 6vw;
  }
}

.ina-logo {
  width: 7.239583vw;
  height: 100%;
}

@media screen and (max-width: 760px) {
  .ina-logo {
    width: 14.7196vw;
  }
}

.erste-logo {
  width: 10vw;
  height: 100%;
}

@media screen and (max-width: 760px) {
  .erste-logo {
    width: 19.39252vw;
  }
}

.telemach-logo {
  width: 10vw;
  height: 100%;
}

@media screen and (max-width: 760px) {
  .telemach-logo {
    width: 19.39252vw;
  }
}

.jysk-logo {
  width: 10vw;
  height: 100%;
}

@media screen and (max-width: 760px) {
  .jysk-logo {
    width: 19.39252vw;
  }
}

.hsm-logo {
  width: 8.125svw;
  height: 100%;
}

@media screen and (max-width: 760px) {
  .hsm-logo {
    width: 22.53125vw;
    height: 100%;
  }
}

.fina-logo {
  width: 9.53125vw;
  height: 100%;
}

@media screen and (max-width: 760px) {
  .fina-logo {
    width: 19.39252vw;
  }
}

.hep-logo {
  width: 7.864583vw;
}

@media screen and (max-width: 760px) {
  .hep-logo {
    width: 17.28971vw;
  }
}

.koncar-logo {
  width: 13vw;
  height: 100%;
}

@media screen and (max-width: 760px) {
  .koncar-logo {
    width: 22vw;
  }
}

.logo-bottom-3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3vw;
  margin-top: 7vh;
}

@media screen and (max-width: 760px) {
  .logo-bottom-3 {
    margin-top: 3vh;
    gap: 5vw;
  }
}

.posao-logo {
  width: 11.51041vw;
  height: 100%;
}

@media screen and (max-width: 760px) {
  .posao-logo {
    width: 22vw;
  }
}

.leapwise-logo {
  width: 12.44791vw;
  height: 100%;
}

@media screen and (max-width: 760px) {
  .leapwise-logo {
    width: 22vw;
  }
}

.telemach-logo {
  width: 15.5vw;
  height: 100%;
}

@media screen and (max-width: 760px) {
  .telemach-logo {
    width: 22vw;
  }
}

.terme-logo {
  width: 7.6041vw;
  height: 100%;
}

@media screen and (max-width: 760px) {
  .terme-logo {
    width: 18vw;
    height: 100%;
  }
}

.logo-bottom-mob {
  display: none;
}

@media screen and (max-width: 760px) {
  .logo-bottom-mob {
    display: block;
  }
}

.mob-logo {
  display: none;
}

@media screen and (max-width: 760px) {
  .mob-logo {
    display: flex;
  }
}

@media screen and (max-width: 760px) {
  .desk-logo {
    display: none;
  }
}

/* ? footer */

.footer {
  background: #000113;
  width: 100%;
  margin: 0 auto;
  padding: 5.72916vw 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 2.8646vw;
}

@media screen and (max-width: 760px) {
  .footer {
    padding: 11.6822vw 0;
    gap: 6.54205vw;
  }
}

.komentar {
  color: #fff;
  text-align: center;
  font-family: "Merriweather Sans", sans-serif;
  font-size: 1.0416vw;
  font-style: normal;
  font-weight: 500;
  /* opacity: 0.7; */
}

@media screen and (max-width: 760px) {
  .komentar {
    font-size: 2.33644vw;
  }
}

.komentar--href {
  color: #c5377c;
  text-align: center;
  font-family: "Merriweather Sans", sans-serif;
  font-size: 1.0416vw;
  font-style: normal;
  font-weight: 500;
}

@media screen and (max-width: 760px) {
  .komentar--href {
    font-size: 2.33644vw;
  }
}

.policy {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.04166vw;
}

@media screen and (max-width: 760px) {
  .policy {
    gap: 5vw;
  }
}

.policies {
  color: #fff;
  text-align: center;
  font-family: "Merriweather Sans", sans-serif;
  font-size: 1.0416vw;
  font-style: normal;
  font-weight: 500;
}

@media screen and (max-width: 760px) {
  .policies {
    font-size: 2.33644vw;
  }
}

.prijave-zatvorene {
  margin-top: 3rem;
}

@media screen and (max-width: 760px) {
  .prijave-zatvorene {
    color: #fff;
    margin-top: 1rem;
    margin-bottom: 3rem;
    font-weight: bold;
  }
}

.video {
  padding: 6vh 0 0 0;
}

.konf {
  color: #000113;
  font-size: 4vw;
  font-style: normal;
  line-height: 0.8;
  font-weight: 500;
  margin-bottom: 1.8vw;
  text-align: center;
  padding-top: 12vh;
}

@media screen and (max-width: 760px) {
  .konf {
    font-size: 9.34579vw;
    padding-top: 6vh;
  }
}