@charset "UTF-8";
/* barvy */
/* velikosti */
/* layouty */
@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");
.layout-1 {
  display: grid;
  grid-template-columns: 1fr;
  grid-column-gap: 40px;
  width: 1200px;
  margin: 0 auto;
}
@media (min-width: 1200px) and (max-width: 1449px) {
  .layout-1 {
    width: 90%;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .layout-1 {
    width: 90%;
  }
}
@media (max-width: 899px) {
  .layout-1 {
    width: 94%;
  }
}

.layout-1-1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 80px;
  width: 1200px;
  margin: 0 auto;
}
@media (min-width: 1200px) and (max-width: 1449px) {
  .layout-1-1 {
    width: 90%;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .layout-1-1 {
    width: 90%;
  }
}
@media (max-width: 899px) {
  .layout-1-1 {
    grid-template-columns: 1fr;
    width: 94%;
  }
}

.layout-1-1-1 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 50px;
  width: 1200px;
  margin: 0 auto;
}
@media (min-width: 1200px) and (max-width: 1449px) {
  .layout-1-1-1 {
    width: 90%;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .layout-1-1-1 {
    width: 90%;
  }
}
@media (max-width: 899px) {
  .layout-1-1-1 {
    grid-template-columns: 1fr;
    width: 94%;
  }
}

.layout-2-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-column-gap: 80px;
  width: 1200px;
  margin: 0 auto;
}
@media (min-width: 1200px) and (max-width: 1449px) {
  .layout-2-1 {
    width: 90%;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .layout-2-1 {
    width: 90%;
  }
}
@media (max-width: 899px) {
  .layout-2-1 {
    grid-template-columns: 1fr;
    width: 94%;
  }
}

.layout-top {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-column-gap: 80px;
  width: 1200px;
  margin: 0 auto;
}

.layout-side {
  display: grid;
  grid-template-columns: 1fr 250px;
  grid-column-gap: 100px;
  width: 1200px;
  margin: 0 auto;
}
@media (min-width: 1200px) and (max-width: 1449px) {
  .layout-side {
    width: 90%;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .layout-side {
    width: 90%;
  }
}
@media (max-width: 899px) {
  .layout-side {
    grid-template-columns: 1fr;
    width: 94%;
  }
}

.layout-side-left {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-column-gap: 100px;
  width: 1200px;
  margin: 0 auto;
}
@media (min-width: 1200px) and (max-width: 1449px) {
  .layout-side-left {
    width: 90%;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .layout-side-left {
    width: 90%;
  }
}
@media (max-width: 899px) {
  .layout-side-left {
    width: 94%;
    grid-template-columns: 1fr;
  }
}

/* fonty */
/* index */
.hp-top {
  background: linear-gradient(rgba(192,192,192,0.5), rgba(192,192,192,0.5)), url("../files/images/hp-top.jpg") center center no-repeat;
  background-size: cover;
  padding: 150px 0 100px 0;
}

.hp-top__text {
  background: #009FE3;
  padding: 40px;
  border-radius: 10px;
  width: 50%;
}
.hp-top__text h1 {
  font-size: 38px;
  font-weight: 400;
  color: white;
  margin: 0 0 10px 0;
  padding: 0;
}
.hp-top__text p {
  color: white;
  font-size: 20px;
  padding: 0;
  margin: 0 0 30px 0;
  line-height: 150%;
}
@media (min-width: 1200px) and (max-width: 1449px) {
  .hp-top__text {
    margin: 0px 0 0 0;
  }
}
@media (max-width: 899px) {
  .hp-top__text {
    width: auto;
    margin: 50px 0 0 0;
  }
  .hp-top__text h1 {
    font-size: 32px;
  }
  .hp-top__text p {
    font-size: 18px;
  }
}
.hp-top__text .hp-top__btns {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
@media (max-width: 899px) {
  .hp-top__text .hp-top__btns {
    flex-direction: column;
  }
}

.hp-headline {
  margin: 0 0 50px 0;
}
.hp-headline h2 {
  text-align: center;
  font-size: 32px;
  font-weight: 400;
  margin: 0 0 30px;
}
@media (max-width: 899px) {
  .hp-headline {
    font-size: 18px;
  }
}

.hp-usp {
  padding: 80px 0;
}
@media (max-width: 899px) {
  .hp-usp {
    padding: 40px 0;
  }
}

.hp-usp__items {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 50px;
}
@media (max-width: 899px) {
  .hp-usp__items {
    grid-template-columns: 1fr;
  }
}

.usp-item {
  display: grid;
  grid-template-columns: 1fr;
}
.usp-item .usp-item__headline {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 20px;
  align-items: center;
  margin: 0 0 20px 0;
}
.usp-item .usp-item__headline .usp-item__icon {
  width: 100%;
  border: 3px dotted #009FE3;
  border-radius: 50%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.usp-item .usp-item__headline .usp-item__icon svg {
  width: 36px;
  height: auto;
  color: #009FE3;
}
.usp-item .usp-item__headline .usp-item__title {
  font-size: 26px;
  font-weight: 400;
  color: #009FE3;
}
.usp-item .usp-item__perex {
  color: #101126;
  font-size: 16px;
  font-weight: 300;
  line-height: 180%;
}
.hp-headline--white {
  color: white;
}

.hp-headline--blue {
  color: #009FE3;
}

.hp-reference {
  background: #E1F1FB;
  padding: 80px 0;
}
@media (max-width: 899px) {
  .hp-reference {
    padding: 40px 0;
  }
}
.hp-reference .hp-reference__items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}
@media (max-width: 899px) {
  .hp-reference .hp-reference__items {
    grid-template-columns: 1fr;
  }
}

.reference-item {
  margin: 0;
  padding: 0;
  display: block;
  opacity: 1;
  transition: 0.3s;
}
.reference-item img {
  width: 100%;
  height: auto;
  display: block;
}
.reference-item .reference-item__bubble {
  background: white;
  border-radius: 20px;
  padding: 40px 30px;
  position: relative;
}
.reference-item .reference-item__bubble .reference-item__text {
  line-height: 180%;
  font-weight: 300;
}
.reference-item .reference-item__bubble .reference-item__triangl {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid white;
  position: absolute;
  display: block;
  bottom: -20px;
  right: 50px;
}
.reference-item .reference-item__author {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 25px;
  align-items: center;
  margin: 20px 0 0 0;
}
.reference-item .reference-item__author .reference-item__autor-icon img {
  border-radius: 50%;
}
.reference-item .reference-item__author .reference-item__autor-text .reference-item__autor-name {
  color: #009FE3;
  font-weight: 400;
  margin: 0 0 5px 0;
}
.hp-reference__more {
  text-align: center;
  margin: 60px 0 0 0;
}
.hp-reference__more a {
  font-size: 17px;
  color: #009FE3;
}
.hp-reference__more a:hover {
  color: #009FE3;
}

/* ===== CTA sekce ===== */
.cta-section {
  background: #E1F1FB;
  margin-top: 50px;
  padding: 10px 0;
}
@media (max-width: 899px) {
  .cta-section {
    padding: 40px 0;
  }
}

.cta-section .cta-inner {
  width: 1200px;
  margin: 0 auto;
  max-width: 94%;
}
@media (min-width: 1200px) and (max-width: 1449px) {
  .cta-section .cta-inner {
    width: 90%;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .cta-section .cta-inner {
    width: 90%;
  }
}

.cta-section .cta-heading {
  font-size: 24px;
  font-weight: 400;
  color: #009FE3;
  text-align: center;
  margin: 0 0 12px 0;
  padding: 0;
}
@media (max-width: 899px) {
  .faq-section .faq-heading {
    font-size: 24px;
  }
}

.cta-section .cta {
  text-align: center;
  margin-top: 20px;
  padding: 40px 0;
  border-top: 1px solid rgba(0, 159, 227, 0.2);
}
.cta-section .cta p {
  color: #101126;
  font-size: 16px;
  font-weight: 300;
  margin: 0 0 20px 0;
}
.cta-section .cta .cta__btns {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}


/* ===== FAQ sekce ===== */
.faq-section {
  background: #E1F1FB;
  padding: 80px 0;
}
@media (max-width: 899px) {
  .faq-section {
    padding: 40px 0;
  }
}

.faq-section .faq-inner {
  width: 1200px;
  margin: 0 auto;
  max-width: 94%;
}
@media (min-width: 1200px) and (max-width: 1449px) {
  .faq-section .faq-inner {
    width: 90%;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .faq-section .faq-inner {
    width: 90%;
  }
}

.faq-section .faq-heading {
  font-size: 32px;
  font-weight: 400;
  color: #009FE3;
  text-align: center;
  margin: 0 0 12px 0;
  padding: 0;
}
@media (max-width: 899px) {
  .faq-section .faq-heading {
    font-size: 24px;
  }
}

.faq-section .faq-subheading {
  text-align: center;
  color: #101126;
  font-size: 16px;
  font-weight: 300;
  line-height: 180%;
  margin: 0 0 50px 0;
}

.faq-section .faq-subheading a {
  color: #009FE3;
  text-decoration: none;
}
.faq-section .faq-subheading a:hover {
  color: #101126;
}

/* Kategorie / skupiny */
.faq-section .faq-category-title {
  font-size: 13px;
  font-weight: 400;
  color: #009FE3;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 40px 0 14px 0;
  padding-left: 12px;
  border-left: 3px solid #009FE3;
}
.faq-section .faq-category-title:first-of-type {
  margin-top: 0;
}

/* Jednotlivé FAQ položky */
.faq-section .faq-item {
  background: #fff;
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: box-shadow 0.3s;
}
.faq-section .faq-item:hover {
  box-shadow: 0 4px 16px rgba(0, 159, 227, 0.12);
}
.faq-section .faq-item.is-open {
  box-shadow: 0 4px 20px rgba(0, 159, 227, 0.18);
}

/* Otázka — klikatelná plocha */
.faq-section .faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.faq-section .faq-question:focus-visible {
  outline: 2px solid #009FE3;
  outline-offset: -2px;
  border-radius: 10px;
}

.faq-section .faq-question-text {
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #101126;
  line-height: 150%;
  flex: 1;
}
.faq-section .faq-item.is-open .faq-question-text {
  color: #009FE3;
}

/* Ikona šipky */
.faq-section .faq-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #E1F1FB;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, transform 0.3s;
}
.faq-section .faq-item.is-open .faq-icon {
  background: #009FE3;
  transform: rotate(180deg);
}
.faq-section .faq-icon svg {
  display: block;
  transition: stroke 0.3s;
}
.faq-section .faq-item.is-open .faq-icon svg {
  stroke: #fff;
}

/* Odpověď — animovaný collapse */
.faq-section .faq-answer-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.faq-section .faq-answer {
  padding: 0 24px 22px 24px;
  color: #101126;
  font-size: 16px;
  font-weight: 300;
  line-height: 180%;
}
.faq-section .faq-answer p {
  margin: 0 0 10px 0;
}
.faq-section .faq-answer p:last-child {
  margin-bottom: 0;
}
.faq-section .faq-answer ul {
  list-style: none;
  padding: 0 0 0 8px;
  margin: 6px 0 10px 0;
}
.faq-section .faq-answer ul li {
  padding: 3px 0 3px 20px;
  line-height: 150%;
  position: relative;
}
.faq-section .faq-answer ul li::before {
  content: "●";
  color: #009FE3;
  font-weight: bold;
  position: absolute;
  left: 0;
  width: 20px;
}
.faq-section .faq-answer a {
  color: #009FE3;
  text-decoration: none;
}
.faq-section .faq-answer a:hover {
  color: #101126;
}
.faq-section .faq-answer strong {
  font-weight: 400;
  color: #101126;
}

/* CTA na konci */
.faq-section .faq-cta {
  text-align: center;
  margin-top: 50px;
  padding-top: 40px;
  border-top: 1px solid rgba(0, 159, 227, 0.2);
}
.faq-section .faq-cta p {
  color: #101126;
  font-size: 16px;
  font-weight: 300;
  margin: 0 0 20px 0;
}
.faq-section .faq-cta .faq-cta__btns {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}


/* PAGE */
.page-top {
  background: #E1F1FB;
  padding: 60px 0;
}
.page-top h1 {
  color: #009FE3;
  font-size: 38px;
  text-align: center;
  font-weight: 400;
}

.page-headline {
  text-align: center;
}
.page-headline h2 {
  font-size: 28px;
  margin: 0 0 50px 0;
  color: #009FE3;
}

.page-content {
  padding: 30px 0;
}
.page-content h2 {
  font-size: 30px;
  padding: 0;
  margin: 20px 0 10px 0;
  color: #009FE3;
  font-weight: 400;
}
.page-content .layout-1 a, .page-content .layout-1-1 a {
  color: #009FE3;
  text-decoration: none;
}
.page-content layout-1 a:hover, .page-content layout-1-1 a:hover {
  color: #007BB5;
  text-decoration: underline;
}
.page-content h3 {
  font-size: 24px;
  padding: 0;
  margin: 20px 0 10px 0;
  font-weight: 400;
}
.page-content h4 {
  font-size: 20px;
  padding: 0;
  margin: 20px 0 5px 0;
  color: gray;
}
.page-content p {
  line-height: 150%;
  font-size: 16px;
  margin: 20px 0 10px 0;
}
.page-content ul {
  list-style: none;
  padding: 0 0 0 8px;
}
.page-content ul li {
  padding: 4px 0 4px 20px;
  line-height: 150%;
  font-size: 16px;
}
.page-content ul li::before {
  content: "●";
  color: #009FE3;
  font-weight: bold;
  position: absolute;
  display: inline-block;
  width: 25px;
  margin-left: -25px;
}
.page-content ol {
  list-style: none;
  counter-reset: li;
  padding: 0 0 0 8px;
}
.page-content ol li {
  padding: 4px 0 4px 20px;
  line-height: 150%;
  font-size: 16px;
  counter-increment: li;
}
.page-content ol li::before {
  content: counter(li) ".";
  color: #009FE3;
  font-weight: 400;
  position: absolute;
  display: inline-block;
  width: 25px;
  margin-left: -25px;
}

.img-fluid {
  max-width: 100%; 
  height: auto;
  border-radius: 8px;
}

.form {
  background: #ffffff;
  border-radius: 16px;
  border-top: 4px solid #009FE3;
  padding: 36px 40px;
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.08);
  max-width: 560px;
  margin: 0 auto;
}

.form-row {
  display: block;
  margin: 18px 0;
}
.form-row .form-row__label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #009FE3;
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}
.form-row .form-row__element input {
  font-family: "Rubik", sans-serif;
  font-weight: 300;
  font-size: 15px;
}
.form-row .form-row__element input[type=text], .form-row .form-row__element input[type=password], .form-row .form-row__element input[type=tel] {
  background: #ffffff;
  border: 1.5px solid #d1d9e0;
  border-radius: 8px;
  padding: 11px 14px;
  color: #101126;
  width: calc(100% - 30px);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.form-row .form-row__element input[type=text]:focus, .form-row .form-row__element input[type=password]:focus, .form-row .form-row__element input[type=tel]:focus {
  outline: none;
  border-color: #009FE3;
  box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.14);
}
.form-row .form-row__element select {
  background: #ffffff;
  border: 1.5px solid #d1d9e0;
  border-radius: 8px;
  padding: 11px 14px;
  color: #101126;
  width: 100%;
  font-family: "Rubik", sans-serif;
  font-weight: 300;
  font-size: 15px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.form-row .form-row__element select:focus {
  outline: none;
  border-color: #009FE3;
  box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.14);
}
.form-row .form-row__element input.input-error {
  border-color: #d32f2f;
  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.10);
}
.form-row .form-row__element .chbx-row {
  margin: 0 0 7px 0;
}
.form-row .form-row__element .chbx-row label {
  font-family: "Rubik", sans-serif;
  font-weight: 300;
  font-size: 15px;
}
.form-row .form-row__element .rdb-row {
  margin: 0 0 7px 0;
}
.form-row .form-row__element .rdb-row label {
  font-family: "Rubik", sans-serif;
  font-weight: 300;
  font-size: 15px;
}
.form-row .form-row__element button {
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  font-size: 15px;
}
.form-row .form-row__element .form-element__help {
  color: #888;
  font-size: 13px;
  margin: 4px 0 0 0;
}
.form-row .form-row__element .form-element__error {
  color: #d32f2f;
  font-size: 13px;
  margin: 4px 0 0 0;
}

.alert {
  display: block;
  padding: 15px 20px;
  border: 10px;
  margin: 10px 0 10px 0;
  border-radius: 10px;
}

.alert-error {
  background: #f8d7da;
  color: #721c24;
}

.alert-info {
  background: #fff3cd;
  color: #856404;
}

.alert-success {
  background: #d4edda;
  color: #155724;
}

.chbx-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.chbx-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #EEEEEE;
  border-radius: 5px;
}

.chbx-container:hover input ~ .checkmark {
  background-color: #EEEEEE;
}

.chbx-container input:checked ~ .checkmark {
  background-color: #009FE3;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.chbx-container input:checked ~ .checkmark:after {
  display: block;
}

.chbx-container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.rdb-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.rdb-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.rdb-checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #EEEEEE;
  border-radius: 50%;
}

.rdb-container:hover input ~ .rdb-checkmark {
  background-color: #EEEEEE;
}

.rdb-container input:checked ~ .rdb-checkmark {
  background-color: #009FE3;
}

.rdb-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.rdb-container input:checked ~ .rdb-checkmark:after {
  display: block;
}

.rdb-container .rdb-checkmark:after {
  top: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

.custom-select {
  position: relative;
  font-family: Arial;
}

.custom-select select {
  display: none; /*hide original SELECT element:*/
}

.select-selected {
  background-color: DodgerBlue;
}

.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}

.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}

.select-items div, .select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
}

.select-items {
  position: absolute;
  background-color: DodgerBlue;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}

.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

.img-item img {
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.page-news {
  background: #E1F1FB;
  padding: 60px 0;
}

.page-news__items {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 40px;
}
@media (min-width: 900px) and (max-width: 1199px) {
  .page-news__items {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 899px) {
  .page-news__items {
    grid-template-columns: 1fr;
  }
}

.page-reference {
  background: #E1F1FB;
}

.page-reference__items {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 0px;
  border-radius: 10px;
  overflow: hidden;
}
@media (min-width: 900px) and (max-width: 1199px) {
  .page-reference__items {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (max-width: 899px) {
  .page-reference__items {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.page-more {
  text-align: center;
  padding: 50px 0;
}
.page-more a {
  color: #009FE3;
}

body {
  margin: 0;
  font-family: "Rubik", sans-serif;
  font-weight: 300;
}

p {
  font-weight: 300;
}

.btn {
  border-radius: 5px;
  text-decoration: none;
  padding: 10px 20px;
}

.btn-full-white {
  background: white;
  color: #009FE3;
  border: 1px solid white;
}
.btn-full-white:hover {
  background: #101126;
  border: 1px solid #101126;
  color: white;
  cursor: pointer;
}

.btn-full-blue {
  background: #009FE3;
  color: white;
  border: 1px solid #009FE3;
}
.btn-full-blue:hover {
  background: #101126;
  border: 1px solid #101126;
  cursor: pointer;
}

.btn-full-green {
  background: #409443;
  color: white;
  border: 1px solid #409443;
}
.btn-full-green:hover {
  background: #101126;
  border: 1px solid #101126;
  cursor: pointer;
}

.btn-outline-white {
  background: transparent;
  color: white;
  border: 1px solid white;
}
.btn-outline-white:hover {
  background: #101126;
  border: 1px solid #101126;
  color: white;
  cursor: pointer;
}

.btn-primary {
  background: #409443;
  color: white;
  border: 1px solid #409443;
}
.btn-primary:hover {
  background: #101126;
  border: 1px solid #101126;
  color: white;
  cursor: pointer;
}

.btn-secondary {
  background: #009FE3;
  color: white;
  border: 1px solid #009FE3;
  text-decoration: none;
}
.btn-secondary:hover {
  background: #101126;
  border: 1px solid #101126;
  color: white;
  cursor: pointer;
}

header {
  background: white;
  width: 100%;
}

.header-layout {
  display: grid;
  grid-template-columns: 300px 1fr auto auto;
  gap: 40px;
  width: 90%;
  margin: 0 auto;
  height: 120px;
  align-items: center;
}
@media (min-width: 1200px) and (max-width: 1449px) {
  .header-layout {
    width: 90%;
    grid-template-columns: 1fr auto auto auto;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .header-layout {
    width: 94%;
    grid-template-columns: 1fr auto auto;
    height: 80px;
  }
}
@media (max-width: 899px) {
  .header-layout {
    width: 94%;
    grid-template-columns: 1fr auto auto;
    height: 80px;
    gap: 20px;
  }
}

.header-logo a {
  opacity: 1;
}
.header-logo a img {
  width: auto;
  height: 80px;
}
@media (min-width: 900px) and (max-width: 1199px) {
  .header-logo a img {
    width: auto;
    height: 60px;
  }
}
@media (max-width: 899px) {
  .header-logo a img {
    width: auto;
    height: 50px;
  }
}
.header-logo a:hover {
  opacity: 0.7;
}

.header-menu {
  display: flex;
  justify-content: flex-end;
}
.header-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  gap: 10px;
  height: 50px;
  align-items: center;
}
.header-menu ul li {
  display: inline-block;
}
.header-menu ul li a {
  color: black;
  padding: 10px 20px;
  font-size: 18px;
  display: inline-flex;
  text-decoration: none;
  font-weight: 300;
  gap: 10px;
  border-bottom: 0px solid white;
}
.header-menu ul li .menu-toggle {
  color: black;
  padding: 10px 20px;
  font-size: 18px;
  display: inline-flex;
  text-decoration: none;
  font-weight: 300;
  gap: 10px;
  border: 0;
  background: transparent;
  font-family: inherit;
}
.header-menu ul li a:hover {
  border-bottom: 0px solid #009FE3;
  color: #009FE3;
}
.header-menu ul li .menu-toggle:hover {
  border-bottom: 0px solid #009FE3;
  color: #009FE3;
  cursor: pointer;
}
.header-menu ul li .menu-toggle:focus {
  outline: none;
}
.header-menu ul li a .arrow-down {
  color: silver;
  font-size: 15px;
}
.header-menu ul li .menu-toggle .arrow-down {
  color: silver;
  font-size: 15px;
}
.header-menu ul li ul {
  display: none;
  position: absolute;
  left: 0;
  top: 45px;
  z-index: 1;
  list-style: none;
  width: 280px;
  margin: 0;
  padding: 0;
  align-items: center;
  border-radius: 10px;
}
.header-menu ul > li.menu-item-has-children.is-open > ul {
  display: block;
}
.header-menu ul li ul li {
  padding: 0;
  margin: 0;
  background: #009FE3;
  width: 100%;
}
.header-menu ul li ul li:first-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.header-menu ul li ul li:last-child {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.header-menu ul li ul li a {
  display: block;
  height: auto;
  padding: 15px 15px;
  color: #fff;
  text-decoration: none;
  border: none;
}
.header-menu ul li ul li a:hover, .header-menu .header ul.menu li ul li:hover > a {
  background: #101126;
  color: white;
  border: none;
}
.header-menu ul li ul li:first-child a:hover {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.header-menu ul li ul li:last-child a:hover {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.header-menu ul > li > ul > li > ul {
  display: none;
  left: 180px;
  top: 0;
}
.header-menu ul > li > ul > li:hover > ul {
  display: block;
}
@media (min-width: 900px) and (max-width: 1199px) {
  .header-menu {
    display: none;
  }
}
@media (max-width: 899px) {
  .header-menu {
    display: none;
  }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .header-cta {
    display: none;
  }
}
@media (max-width: 899px) {
  .header-cta {
    display: none;
  }
}

.header-langs {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}
.header-langs a {
  width: 30px;
  height: auto;
}
.header-langs a img {
  width: 100%;
  height: auto;
}

.menu-mobil {
  display: none;
  background: #009FE3;
  width: 100%;
  position: absolute;
  top: 80px;
  z-index: 99999;
}
.menu-mobil ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu-mobil ul li a {
  color: white;
  font-size: 18px;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 30px;
  text-decoration: none;
}
.menu-mobil ul li a:hover {
  background: #101126;
}

.header-menu-mobil {
  display: none;
}
@media (min-width: 900px) and (max-width: 1199px) {
  .header-menu-mobil {
    display: flex;
    justify-content: flex-end;
  }
}
@media (max-width: 899px) {
  .header-menu-mobil {
    display: flex;
    justify-content: flex-end;
  }
}
.header-menu-mobil .header-menu-mobil__btn svg {
  width: 50px;
  height: auto;
}
.header-menu-mobil .header-menu-mobil__btn:hover {
  cursor: pointer;
}
.header-menu-mobil .header-menu-mobil__btn:hover svg {
  color: #009FE3;
}

footer {
  height: 100px;
}
@media (max-width: 899px) {
  footer {
    height: auto;
  }
}
footer .footer-socs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
footer .footer-socs a svg {
  width: 30px;
  height: auto;
  color: silver;
}
footer .footer-socs a:hover svg {
  color: #101126;
}
footer .footer-copytright {
  color: gray;
  display: flex;
  align-items: center;
  height: 100px;
  font-size: 14px;
  justify-content: flex-end;
}
footer .footer-copytright p {
  text-align: right;
}
footer .footer-copytright a {
  color: gray;
}
footer .footer-copytright a:hover {
  color: #101126;
}
@media (max-width: 899px) {
  footer .footer-copytright {
    height: auto;
    order: 2;
  }
}
footer .footer-menu {
  color: gray;
  display: flex;
  align-items: center;
  height: 100px;
  justify-content: flex-start;
}
@media (max-width: 899px) {
  footer .footer-menu {
    justify-content: center;
  }
}
footer .footer-menu ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 30px;
  padding: 0;
}
footer .footer-menu ul li a {
  color: gray;
  text-decoration: none;
  font-size: 14px;
}
footer .footer-menu ul li a:hover {
  color: #101126;
  text-decoration: underline;
}
@media (max-width: 899px) {
  footer .footer-menu ul {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: start;
  }
}