/* 1rem = 16px */
body {
  font-family: "Poppins";
}

html,
body {
  overflow-x: hidden;
  margin: 0;
}

#header_container {
  display: flex;
  position: fixed;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 2.0625rem; /* 33px */

  height: 3rem; /* 48px */
  width: 100%;
  z-index: 1000;

  background-color: white;

  box-shadow: 0 0.1875rem 0.3125rem 0 rgba(0, 0, 0, 0.25); /* 3px 5px */
}

#language_container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem; /* 5px */

  cursor: pointer;
}

#header_container p,
a {
  font-size: 0.75rem; /* 12px */
  letter-spacing: 0.0625rem; /* 1px */
  font-weight: 400;
  text-decoration: none;
  color: black;
}

#header_container p:hover {
  transform: scale(1.02);
  transition: transform 0.3s;
}

#naslovna_link {
  -webkit-text-stroke: 0.0125rem black; /* 0.2px */
}

#landing_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;

  margin-top: 3rem; /* 48px */
  gap: 1.3125rem; /* 21px */

  height: calc(100vh - 3rem); /* 48px */
}

#landing_logo:hover {
  transform: scale(1.02);
  transition: transform 0.3s ease;
}

#landing_title,
#landing_subtitle {
  margin: 0;
}

#landing_title {
  font-size: 2.25rem; /* 36px */
  font-weight: 400;
}

#landing_subtitle {
  font-size: 1.5rem; /* 24px */
  font-weight: 200;
}

#button_container {
  display: flex;
  flex-direction: row;
  gap: 1.25rem; /* 20px */
}

#button_learn_more,
.button_contact {
  width: 8.3125rem; /* 133px */
  height: 2.625rem; /* 42px */
  border-radius: 8.125rem; /* 130px */

  font-weight: 600;
  letter-spacing: 0.0625rem; /* 1px */
  font-size: 0.75rem; /* 12px */

  cursor: pointer;

  box-shadow: 0 0.1875rem 0.3125rem 0 rgba(0, 0, 0, 0.25); /* 3px 5px */
}

#button_learn_more:hover,
.button_contact:hover {
  transform: scale(1.02);
  transition: transform 0.3s;
}

#button_learn_more {
  color: #002f63;
  background-color: white;
  border: 0.1875rem solid #002f63; /* 3px */
}

.button_contact {
  background-color: #002f63;
  color: white;
  border: 0.1875rem solid #002f63; /* 3px */
}

#about_us_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#about_us_subcontainer {
  display: flex;
  flex-direction: row;
  gap: 5.5625rem; /* 89px */
}

#about_us_text-container {
  text-align: left;
}

#about_us_title {
  font-size: 3rem; /* 48px */
  font-weight: 400;

  -webkit-text-stroke: 0.03125rem black; /* 0.5px */

  margin: 0;
  margin-top: 5.625rem; /* 90px */
  margin-bottom: 0.25rem; /* 4px */
}

#about_us_text {
  text-align: left;
  font-size: 1.25rem; /* 20px */
  font-weight: 300;

  max-width: 44.625rem; /* 714px */
  height: 8.9375rem; /* 143px */

  margin: 0;
  margin-bottom: 5.625rem; /* 90px */
}

.about_us_image {
  width: 21.6875rem; /* 347px */
  text-align: center;

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

.team_member:hover {
  transform: scale(1.02);
  transition: transform 0.3s;
}

.name {
  font-size: 1.75rem; /* 28px */
  font-weight: 300;
  margin: 0;
  margin-top: 0.3125rem; /* 5px */
}

.job {
  font-size: 1.125rem; /* 18px */
  font-weight: 400;
  opacity: 0.5;
  margin: 0;
}

.portrait_text {
  font-size: 1rem; /* 16px */
  font-weight: 300;
  opacity: 0.75;
  width: 18.125rem; /* 290px */
  margin: 0;
  margin-top: 0.5rem; /* 8px */
}

#services_container {
  display: flex;
  flex-direction: row;
  gap: 1.1875rem; /* 19px */

  align-items: center;
  justify-content: center;

  margin-top: 12.5rem; /* 200px */

  flex-wrap: wrap;
}

.service_box {
  width: 21.6875rem; /* 347px */
  height: 21.25rem; /* 340px */

  border-radius: 0.3125rem; /* 5px */

  box-shadow: 0 0.1875rem 0.3125rem 0 rgba(0, 0, 0, 0.25);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.service_box:hover {
  transform: scale(1.02);
  transition: transform 0.3s;
}

.service_name {
  font-size: 1.75rem; /* 28px */
  font-weight: 400;
  margin: 0;
  margin-top: 0.875rem; /* 14px */
  margin-bottom: 0.875rem; /* 14px */
}

.service_text {
  font-size: 1.5rem; /* 24px */
  font-weight: 300;
  line-height: 2.375rem; /* 38px */

  width: 17.9375rem; /* 287px */
  height: 9.6875rem; /* 155px */

  margin: 0;
}

#services_flex_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem; /* 20px */
}

#footer_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  margin-top: 9.375rem; /* 150px */

  box-shadow: 0 -0.1875rem 0.3125rem 0 rgba(0, 0, 0, 0.25);

  height: 7.5625rem;
  width: 100vw;
}

#footer_text {
  text-align: center;
  font-size: 0.9375rem; /* 15px */
  font-weight: 200;
  margin: 0;
  margin-left: 20px;
  margin-right: 20px;
}

#cjenovnik_header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;

  margin-left: auto;
  margin-right: auto;
  margin-top: 5rem;
}

#cjenovnik_header h2 {
  font-size: 38px;
  font-weight: 500;

  margin-bottom: 0;
}

#cjenovnik_header h4 {
  font-size: 20px;
  font-weight: 300;

  margin-top: 5px;
}

#packets_container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
  gap: 20px;
  margin-bottom: 0;
}

.pack_container {
  display: flex;
  flex-direction: column;

  align-items: center;

  gap: 25px;

  width: 343px;
  height: 541px;
  z-index: 0;

  padding-top: 60px;
  margin-top: 20px;

  border: 2px solid black;
  border-radius: 23px;
  text-align: center;
}

.packet_name {
  line-height: 2rem; /* 32px */
  font-size: 32px;
  font-weight: 400;

  max-width: 259px;
  max-height: 103px; /* 60px */

  margin: 0;

  text-align: center;
}

.packet_description {
  line-height: 37px;
  font-size: 1.5rem; /* 24px */
  font-weight: 300;

  max-width: 243px;

  margin: 0;

  text-align: center;
}

.packet_cost {
  line-height: 2.375rem; /* 38px */
  font-size: 24px;
  font-weight: 500;

  max-width: 224px;
  max-height: 31px;

  text-align: center;

  margin: 0;
}

.contact_btn_cjenovnik {
  display: flex;
  justify-content: center;
  align-items: center;

  background-color: #002f63;
  border-radius: 130px;

  width: 233px;
  height: 50px;

  font-size: 20px;

  margin-top: 20px;

  color: white;
  letter-spacing: 3px;
}

.contact_btn_cjenovnik h4 {
  font-weight: 600;
  font-size: 16px;
}

.special_pack {
  border: 2px dashed #000;

  margin-top: 0px;
}

.special_btn {
  border: 4px #002f63 dashed;
  background-color: #fff;
  color: #002f63;
}

.special_footer {
  position: absolute;
  bottom: -150px;
  margin-top: 0;
  z-index: 2000px;
  background-color: white;
}

.contact_btn_cjenovnik:hover {
  transform: scale(1.02);
  transition: transform 0.3s;
}

#contact_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;

  margin-top: 6.625rem; /* 106px */
  margin-bottom: 3.4375rem; /* 55px */
  gap: 1.3125rem; /* 21px */
}

#contact_form {
  display: flex;
  flex-direction: column;
  justify-content: center;

  max-width: 33.125rem; /* 530px */
  height: 29.8125rem; /* 477px */

  margin-left: auto;
  margin-right: auto;

  padding: 10px;
}

.label_text {
  font-size: 1.75rem; /* 28px */
  font-weight: 300;

  margin-top: 1.3125rem; /* 21px */
}

.input_field {
  height: 2.625rem; /* 42px */
  border-radius: 0.9375rem; /* 15px */
  border: 0.125rem solid black; /* 2px */

  padding-left: 0.625rem; /* 10px */

  box-shadow: 0 0.1875rem 0.3125rem 0 rgba(0, 0, 0, 0.25);
}

.input_field:hover {
  transform: scale(1.02);
  transition: transform 0.3s;
}

#submit_button {
  background-color: #002f63;
  width: 8.3125rem; /* 133px */
  height: 2.625rem; /* 42px */
  color: white;
  border-radius: 8.125rem; /* 130px */
  font-family: "Poppins";

  font-weight: 600;
  font-size: 0.75rem; /* 12px */
  letter-spacing: 0.0625rem; /* 1px */

  border: 0.0625rem solid #002f63; /* 1px */

  margin-left: auto;
  margin-right: auto;
  margin-top: 1.3125rem; /* 21px */

  z-index: 10000;
}

#submit_button:hover {
  transform: scale(1.02);
  transition: transform 0.3s;
}

.textarea_field {
  height: 8.25rem; /* 132px */
  line-height: 2rem; /* 32px */
}

.input_field::placeholder {
  opacity: 0.25;
  line-height: 2rem; /* 32px */
  font-size: 1.125rem; /* 18px */
  font-weight: 300;
}

#contact_info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.375rem; /* 22px */
  margin-top: 3.4375rem; /* 55px */
}

#contact_info_title {
  font-size: 2rem; /* 32px */
  font-weight: 300;
  margin: 0;
  line-height: 3.125rem; /* 50px */

  width: 17.875rem; /* 286px */
  height: 6.25rem; /* 100px */

  text-align: center;
}

.contact_text {
  font-size: 1.125rem; /* 18px */
  font-weight: 400;
  margin: 0;
}

#email_info,
#phone_info {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;

  gap: 1.375rem; /* 22px */
}

.phone_numbers {
  width: 9.75rem; /* 156px */
  height: 2.3125rem; /* 37px */
}
#phone_logo {
  margin-top: 0.9375rem; /* 15px */
}

/* RESPONSIVE DESIGN FOR NASLOVNA*/

@media only screen and (max-height: 869px) {
  #landing_logo {
    max-width: 25rem;
    height: auto;
  }
}

@media only screen and (max-width: 755px) {
  #about_us_subcontainer {
    flex-direction: column;
  }
  #about_us_text-container {
    margin-left: 20px;
    margin-right: 5px;
  }
  #about_us_title {
    font-size: 2rem;
    margin-top: 0;
  }
  #about_us_text {
    font-size: 1rem;

    margin-bottom: 8.625rem;
  }
}

@media only screen and (max-width: 585px) {
  #landing_logo {
    width: 400px;
    height: 400px;
  }
}

@media only screen and (max-width: 425px) {
  #header_container {
    gap: 1.3625rem;
  }
}

/* RESPONSIVE DESIGN FOR CJENOVNIK*/

@media only screen and (max-width: 1120px) {
  #packets_container {
    flex-direction: column;
  }
  .special_footer {
    position: relative;
    bottom: 0;
    margin-top: 0;
  }
  .pack_container {
    max-height: 441px;
  }
}

@media only screen and (max-width: 450px) {
  .cjenovnik_item {
    background-size: 320px;
  }

  .packet_content {
    margin-right: 0;
    margin-left: 0;
    padding-top: 40px;
    padding-left: 100px;
    padding-right: 100px;
  }

  .packet_name {
    margin-right: 0;
    margin-left: 0;
    font-size: 1.2rem; /* smaller font */

    margin-bottom: 0;
  }

  .packet_description {
    margin-right: 0;
    margin-left: 0;
    font-size: 1rem;
    margin-bottom: 0;
    margin-top: 0.5625rem;
    line-height: 1.7rem;
  }

  .packet_cost {
    margin-right: 0;
    margin-left: 0;
    font-size: 0.9rem;
    margin-bottom: 0;
  }

  .packet_specification {
    margin-right: 0;
    margin-left: 0;
    font-size: 0.6rem;
    margin-bottom: 0;
    line-height: 25px;
  }

  /*##########################################################*/
  #cjenovnik_header h2 {
    font-size: 34px;
    font-weight: 500;

    margin-bottom: 0;
  }

  #cjenovnik_header h4 {
    font-size: 16px;
    width: 300px;
    font-weight: 300;

    margin-top: 5px;
  }

  #packets_container {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 20px;
    margin-bottom: 0;
  }

  .pack_container {
    display: flex;
    flex-direction: column;

    gap: 5px;

    max-height: 331px;

    padding-top: 35px;
    margin-top: 20px;
  }

  .packet_name {
    line-height: 2rem; /* 32px */
    font-size: 26px;
    font-weight: 400;

    max-width: 259px;
    max-height: 103px; /* 60px */

    margin: 0;

    text-align: center;
  }

  .packet_description {
    line-height: 37px;
    font-size: 1.3rem; /* 24px */
    font-weight: 300;

    max-width: 243px;

    margin: 0;

    text-align: center;
  }

  .packet_cost {
    line-height: 2.375rem; /* 38px */
    font-size: 24px;
    font-weight: 500;

    max-width: 224px;
    max-height: 31px;

    text-align: center;

    margin: 0;
  }

  .contact_btn_cjenovnik {
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #002f63;
    border-radius: 130px;

    width: 133px;
    height: 40px;

    font-size: 20px;

    margin-top: 20px;

    color: white;
    letter-spacing: 3px;
  }

  .contact_btn_cjenovnik h4 {
    font-weight: 600;
    font-size: 10px;
  }
}