:root {
  --purple: #6a0098;
  --orange: #f4910f;
  --white: #f9f9f9;
  --coal: #323232;
  --snow: #ffffff;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Poppins", sans-serif;
  background: var(--white);
}

.wrapper2 {
  max-width: 100%;
  height: 676px;
  margin: 0 auto;
  background: var(--snow);
  box-shadow: 0px -20px 32px -8px rgba(0, 0, 0, 0.1);
  border-radius: 0px;
  display: flex;
  align-items: center;
}

/* Header */

header {
  background: var(--purple);
  border-radius: 0px;
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
}

/* Nav */

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--purple);
  margin-top: 20px;
}

nav logo {
  padding: 10px;
  margin: 0;
}

nav ul {
  display: flex;
  align-items: center;
  gap: 50px;
  list-style: none;
  margin: 0;
  justify-content: space-evenly;
  padding: 10px;
  flex-direction: row;
}

nav ul li a img {
  vertical-align: middle;
}

nav ul li a {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--white);
  text-decoration: none;
}

nav ul li a:hover,
a:active {
  color: var(--orange);
}

/* end of Nav */

header h4 {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 28px;
  line-height: 40px;
  text-align: center;
  letter-spacing: -0.01em;
  color: var(--orange);
}

header h1 {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 48px;
  line-height: 64px;
  text-align: center;
  letter-spacing: -0.01em;
  color: var(--snow);
}

.text3 {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  color: var(--orange);
}

.cards {
  display: flex;
  align-items: center;
  margin: 50px 0;
}

.card1 {
  background: var(--orange);
  box-shadow: 0px 0px 34.8632px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  margin: 0px 5px;
  width: 380px;
  height: 174px;
  display: block;
}

.card1 a {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  text-decoration-line: underline;
  color: var(--white);
  display: block;
  width: 100%;
  padding-top: 5px;
}

.card-text {
  box-sizing: border-box;
  background: var(--snow);
  border: 1px solid #f4910f;
  box-shadow: 0px 0px 34.8632px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 28px;
  line-height: 30px;
  display: flex;
  align-items: center;
  letter-spacing: -0.01em;
  color: var(--purple);
  width: 380px;
  height: 134px;
  padding: 5px;
}

.card-text img {
  vertical-align: middle;
  padding: 10px;
  padding-left: 30px;
  height: 80px;
}

.card-text > div {
  display: flex;
  flex-direction: column;
}

.card-text h2 {
  margin: 0;
  font-size: 28px;
  line-height: 30px;
  font-weight: 700;
  color: var(--purple);
}

.card-text p {
  margin: 5px 0 0 0;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  color: var(--coal);
}

/* end of Header */

.text2 {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 40px;
  line-height: 56px;
  text-align: center;
  color: var(--coal);
  margin-top: 50px;
}

.color-change {
  color: var(--purple);
}

.text4 {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: var(--coal);
  width: 100%;
  margin-top: 20px;
}

.card-text2 {
  box-sizing: border-box;
  background: var(--snow);
  border: 1px solid #cccccc;
  box-shadow: 0px 0px 34.8632px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 28px;
  line-height: 30px;
  display: flex;
  align-items: center;
  letter-spacing: -0.01em;
  color: var(--purple);
  width: 380px;
  height: 134px;
  padding: 5px;
  margin: 0px 5px;
}

.card-text2 img {
  vertical-align: middle;
  padding: 10px;
  padding-left: 30px;
  height: 80px;
}

.card-text2 > div {
  display: flex;
  flex-direction: column;
}

.card-text2 h2 {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 28px;
  line-height: 30px;
  font-weight: 700;
  color: var(--purple);
}

.card-text2 p {
  margin: 5px 0 0 0;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  color: var(--coal);
}

.pix-text {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin: 70px 0;
}

.pix-text .left {
  vertical-align: middle;
  margin: 0 60px;
}

.pix-text .right {
  width: 421px;
  margin: 0 60px;
}

.pix-text .right h4 {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: var(--orange);
}

.pix-text .right h3 {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.01em;
  color: var(--coal);
}

.pix-text .right p {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 30px;
}

.btn.dark {
  background: var(--orange);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 9.50365px 50.6861px;
  gap: 7.92px;
  width: 217.3px;
  height: 44.35px;
  border-radius: 23.7591px;
  flex: none;
  order: 0;
  flex-grow: 0;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  line-height: 24px;
  color: var(--snow);
}

.btn.dark:hover {
  transition: 0.7s;
  color: var(--purple);
}

/* Banner */

.banner {
  width: 1158px;
  height: 128px;
  background: var(--purple);
  border-radius: 16px;
  margin-top: 70px;
  display: flex;
  justify-content: space-evenly;
}

.banner ul {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  justify-content: space-evenly;
  flex-direction: row;
}

.banner ul li img {
  vertical-align: middle;
  padding: 0 50px;
}

.banner ul li {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: var(--white);
  text-decoration: none;
  display: flex;
  align-items: center;
}

.change {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 48px;
  line-height: 72px;
  text-align: center;
  color: var(--orange);
}

/* end of Banner */

/* FAQ */

section {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin: 70px 0;
}

.faq {
  display: block;
  width: 100%;
}

.faq h2 {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 40px;
  line-height: 56px;
  text-align: center;
  letter-spacing: -0.01em;
  color: var(--coal);
}

.faq-left {
  width: 552px;
  margin: 0 60px;
}

.faq-right {
  width: 552px;
  margin: 0 60px;
}

details {
  border-bottom: 1px solid #cccccc;
}

details > summary {
  list-style-type: none;
  cursor: pointer;
}
summary {
  font-weight: bold;
  list-style-image: url(./media/Icons-Standard-24px.png);
}

details[open] summary {
  list-style-image: url(./media/Vector.png);
}

/* end of FAQ */

/* Testimonials */

.testimonials {
  margin: 70px 0;
  width: 1140px;
  height: 400;
  box-shadow: 0px -20px 32px -8px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  background: var(--snow);
}

.testimonial {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 5px;
  margin: 0px 5px;
  flex-direction: row;
}

.portrait {
  padding: 0px 20px 10px;
  margin-bottom: 15px;
}

.color-change2 {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 20px;
  text-align: left;
  letter-spacing: -0.01em;
  color: var(--purple);
}

.color-change3 {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  letter-spacing: -0.01em;
  color: #8d8d8d;
}

.star {
  height: 25px;
  padding: 2px;
}

.testimonial > div {
  display: flex;
  flex-direction: column;
}

/* End of Testimonials */

/* Contact */

.contact {
  margin: 70px 0;
  width: 1128px;
  height: 544px;
  border: 4px solid var(--orange);
  box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  background: var(--snow);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  justify-content: space-evenly;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
}

.contact a {
  color: var(--orange);
}

.contact a:hover {
  color: var(--purple);
}

.contact2 {
  display: block;
  width: 100%;
  margin: 0 auto;
}

.color-change4 {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 40px;
  line-height: 56px;
  letter-spacing: -0.01em;
  color: var(--coal);
}

.color-change5 {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 28px;
  line-height: 40px;
  text-align: center;
  letter-spacing: -0.01em;
  color: var(--coal);
}

.call {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 5px;
  margin: 0px 5px;
  flex-direction: row;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-align: left;
  justify-content: center;
}

.call input {
  box-sizing: border-box;
  height: 56px;
  width: 350px;
  border-radius: 16px;
  border: 1px solid #8d8d8d;
  margin-bottom: 70px;
  margin-right: 35px;
  margin-top: 5px;
}

.call input::placeholder {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #808080;
  padding-left: 10px;
}

.poziv {
  background: var(--snow);
  justify-content: center;
  align-items: center;
  padding: 9.50365px 50.6861px;
  gap: 7.92px;
  width: 300px;
  height: 56px;
  border-radius: 35px;
  border: 3px solid var(--orange);
  flex: none;
  order: 0;
  flex-grow: 0;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  line-height: 24px;
  color: var(--orange);
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-size: 21px;
  line-height: 32px;
  text-align: center;
}

.poziv img {
  vertical-align: middle;
}

.poziv:hover {
  transition: 0.7s;
  background-color: var(--purple);
}

.girl {
  padding: 0px 20px;
  margin-bottom: 35px;
  margin-right: 35px;
}

/* End of Contact */

/* Tips */

.savjeti {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-direction: row;
  text-align: center;
  justify-content: space-evenly;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
}

.tips {
  display: flex;
  align-items: center;
  margin-top: 50px;
}

.tips2 {
  display: flex;
  align-items: center;
  margin-top: 15px;
}

.tip {
  box-sizing: border-box;
  background: var(--snow);
  border: 1px solid #cccccc;
  box-shadow: 0px 0px 34.8632px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 28px;
  line-height: 30px;
  display: flex;
  align-items: center;
  letter-spacing: -0.01em;
  color: var(--purple);
  width: 551px;
  height: 224px;
  background-color: var(--snow);
  margin: 10px;
}

.tip img {
  vertical-align: middle;
  border-radius: 16px;
  padding-right: 10px;
  text-align: left;
}

.tip > div {
  display: flex;
  flex-direction: column;
}

.tip h2 {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: var(--purple);
}

.tip p {
  margin: 5px 0 0 0;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--coal);
}

.more {
  background: var(--snow);
  align-items: center;
  padding: 9.50365px 50.6861px;
  gap: 7.92px;
  width: 600px;
  height: 56px;
  border-radius: 35px;
  border: 3px solid var(--purple);
  font-family: "Poppins", sans-serif;
  font-style: normal;
  line-height: 24px;
  color: var(--purple);
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-size: 21px;
  line-height: 32px;
  text-align: center;
}

.more img {
  vertical-align: middle;
}

.more:hover {
  transition: 0.7s;
  background: var(--purple);
  color: var(--white);
}

/* End of Tips */

/* Footer */
footer {
  background: var(--purple);
  border-radius: 0px;
  width: 100%;
  margin-top: 150px;
  display: flex;
  align-items: center;
  padding-bottom: 50px;
}

.links-box {
  margin-top: 50px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  color: var(--snow);
}

.links-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.links-box ul li a {
  color: var(--white);
  text-decoration: none;
}

.links-box ul li a:hover {
  color: var(--orange);
  text-decoration: underline;
}

.social {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.social img {
  margin: 0 10px;
}

.foot-txt {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--snow);
}

.foot-txt h3 {
  margin-bottom: 0;
}

.foot-txt p {
  margin-top: 0;
}

.p1 {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  letter-spacing: -0.01em;
}

.p1 a {
  color: var(--snow);
}

.p1 a:hover {
  color: var(--orange);
}

.hanfa {
  margin: 20px 0;
}

nav.mobile,
.mobile-menu {
  display: none;
}

/* End of Footer */

/* Mobile support */

@media (min-width: 576px) {
  .wrapper {
    max-width: 1190px;
    margin: 0 auto;
  }
}

@media (max-width: 576px) {
  nav {
    display: none;
  }

  .wrapper {
    padding: 0;
    width: 100%;
  }

  .cards {
    display: flex;
    align-items: center;
    margin: 50px 0;
    flex-direction: column;
  }

  .card1,
  .card-text2 {
    margin: 5px 0;
  }

  .pix-text {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
  }

  .pix-text .left {
    vertical-align: middle;
    margin: 0 60px;
    width: 100%;
  }

  .pix-text .left img {
    margin: 0;
    width: 90%;
  }

  .pix-text .right {
    width: 90%;
    margin: 0 60px;
    align-items: center;
  }

  .banner {
    width: 100%;
    height: 80px;
  }

  .banner ul {
    gap: 10px;
    padding: 0;
  }

  .banner ul li img {
    display: none;
  }

  .banner ul li {
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    color: var(--white);
    text-decoration: none;
    display: flex;
    align-items: center;
  }

  .change {
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 20px;
    text-align: center;
    color: var(--orange);
  }

  .faq {
    margin-top: 70px;
    display: block;
    width: 100%;
  }

  section {
    display: block;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin: 0;
  }

  .faq-left {
    width: 100%;
    margin: 0;
  }

  .faq-right {
    width: 100%;
    margin: 0;
  }

  .testimonials {
    margin: 70px 0;
    width: 100%;
    display: block;
    box-shadow: 0px -20px 32px -8px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    background: var(--snow);
  }

  .contact {
    margin: 70px 0;
    width: 100%;
    border: 4px solid var(--orange);
    box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    background: var(--snow);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    justify-content: space-evenly;
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
  }

  .color-change4 {
    font-size: 20px;
    line-height: 24px;
  }

  .color-change5 {
    font-size: 20px;
    line-height: 24px;
  }

  .call {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 5px;
    margin: 0px 5px;
    flex-direction: row;
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.08em;
    text-align: left;
    justify-content: center;
  }

  .call input {
    box-sizing: border-box;
    height: 50px;
    width: 250px;
    border-radius: 16px;
    border: 1px solid #8d8d8d;
    margin-bottom: 5px;
    margin-right: 35px;
    margin-top: 5px;
  }

  .call input::placeholder {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #808080;
    padding-left: 10px;
  }

  .poziv {
    background: var(--snow);
    justify-content: center;
    align-items: center;
    padding: 9.50365px 50.6861px;
    gap: 7.92px;
    width: 250px;
    height: 56px;
    border-radius: 35px;
    border: 3px solid var(--orange);
    flex: none;
    order: 0;
    flex-grow: 0;
    font-family: "Poppins", sans-serif;
    font-style: normal;
    line-height: 24px;
    color: var(--orange);
    font-family: "Poppins";
    font-style: normal;
    font-weight: 800;
    font-size: 21px;
    line-height: 32px;
    text-align: center;
  }

  .poziv img {
    display: none;
  }

  .poziv:hover {
    transition: 0.7s;
    background-color: var(--purple);
  }

  .girl {
    padding: 0px 5px;
    margin-bottom: 5px;
    margin-right: 5px;
  }

  .savjeti {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    justify-content: space-evenly;
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
  }

  .tips {
    display: block;
    align-items: center;
    margin-top: 50px;
  }

  .tips2 {
    display: block;
    align-items: center;
    margin-top: 15px;
  }

  .tip {
    box-sizing: border-box;
    background: var(--snow);
    border: 1px solid #cccccc;
    box-shadow: 0px 0px 34.8632px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    display: flex;
    align-items: center;
    letter-spacing: -0.01em;
    color: var(--purple);
    width: 100%;
    height: 224px;
    background-color: var(--snow);
    margin: 5px;
  }

  .tip img {
    vertical-align: middle;
    border-radius: 16px;
    padding-right: 10px;
    text-align: left;
  }

  .tip > div {
    display: flex;
    flex-direction: column;
  }

  .tip h2 {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 18px;
    letter-spacing: -0.01em;
    color: var(--purple);
  }

  .tip p {
    margin: 5px 0 0 0;
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    color: var(--coal);
  }

  .more {
    background: var(--snow);
    align-items: center;
    padding: 9.50365px 50.6861px;
    gap: 7.92px;
    width: 400px;
    height: 56px;
    border-radius: 35px;
    border: 3px solid var(--purple);
    font-family: "Poppins", sans-serif;
    font-style: normal;
    line-height: 20px;
    color: var(--purple);
    font-family: "Poppins";
    font-style: normal;
    font-weight: 800;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
  }

  .more img {
    vertical-align: middle;
  }

  .links-box {
    margin-top: 50px;
    display: block;
    align-items: center;
    justify-content: space-evenly;
    color: var(--snow);
    margin-left: 20px;
  }

  nav.mobile {
    display: flex;
  }

  .mobile-menu {
    position: fixed;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 100%;
    opacity: 95%;
    background: var(--purple);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    transition: all 400ms ease;
  }

  .mobile-menu.active {
    left: 0;
  }

  .mobile-menu .x-icon {
    position: fixed;
    top: 32px;
    right: 100px;
    opacity: 0;
    pointer-events: none;
    transition: all 400ms ease;
  }

  .mobile-menu.active .x-icon {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-menu ul {
    list-style: none;
    padding: 0;
    flex-direction: column;
  }

  .mobile-menu ul li {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--white);
    text-decoration: none;
    margin: 20px 0;
    text-align: center;
  }

  .mobile-menu ul li a {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--white);
    text-decoration: none;
  }

  .mobile-menu ul li a:active {
    color: var(--orange);
  }
}