@import "fonts.css";
@import "splide.css";

:root {
  --content-min-width: 375px;
  --content-max-width: 1280px;

  --h-font-min-size: 32px;
  --h-font-max-size: 64px;
}

.logo {
  position: inherit;
}

body {
  background-color: white;
  font-family: GilroyRegular;
}

body.no-scroll {
  overflow: hidden;
  height: 100dvh;
}

.heading {
  font-family: GilroyBlack;
  font-size: clamp(32px, 11vw, 64px);
  line-height: 1.1;
}

.heading-2 {
  font-family: GilroyBold;
  font-size: clamp(20px, 5vw, 40px);
  line-height: 1.1;
}

.text-3 {
  font-size: clamp(20px, 5vw, 40px);
  line-height: 1.1;
}

@media (min-width: 1024px) {
  .heading {
    font-size: min(5vw, 64px);
  }
  .heading-2,
  .text-3 {
    font-size: min(3vw, 40px);
  }
}

.title-intro {
  font-family: GilroyBold;
  font-size: clamp(24px, 6vw, 48px);
  line-height: 1.1;
  margin-top: 8px;
}

@media (min-width: 1280px) {
  .title-intro {
    margin-top: 16px;
  }
}

button[type="button"].button-element,
button[type="submit"].button-element {
  background-color: #1b2a33;
  border-radius: 16px;
  color: white;
  cursor: pointer;
  font-family: GilroyBold;
  font-size: 20px;
  height: 50px;
  padding: 10px;
  width: 100%;
}

@media (min-width: 1024px) {
  button[type="button"].button-element,
  button[type="submit"].button-element {
    border-radius: calc(infinity * 1px);
    font-size: 24px;
    height: 72px;
  }
}

p#greska {
  font-family: GilroyRegular;
  color: red;
  background-color: #eef0f2;
  border-radius: 16px;
  font-size: 16px;
  outline: none;
  padding: 10px 16px 10px 16px;
}
@media (min-width: 1024px) {
  p#greska {
    border-radius: 24px;
    font-size: 20px;
    padding: 10px 24px 10px 24px;
  }
}

input[type="text"] {
  font-family: GilroyRegular;
  background-color: #eef0f2;
  border-radius: 16px;
  font-size: 16px;
  outline: none;
  height: 50px;
  padding: 10px 16px 10px 16px;
}

@media (min-width: 1024px) {
  input[type="text"] {
    border-radius: 24px;
    font-size: 20px;
    height: 72px;
    padding: 10px 24px 10px 24px;
  }
}

textarea {
  font-family: GilroyRegular;
  background-color: #eef0f2;
  border-radius: 16px;
  font-size: 16px;
  outline: none;
  padding: 10px 16px 10px 16px;
  min-height: 131px;
}

@media (min-width: 1024px) {
  textarea {
    border-radius: 24px;
    font-size: 20px;
    padding: 10px 24px 10px 24px;
    min-height: 189px;
  }
}

input[type="text"]::placeholder textarea::placeholder {
  color: #a0a0a0;
}