@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Petrona:ital,wght@0,100..900;1,100..900&display=swap');
header {
  min-height: 40px;
}
footer .footer-top {
  background-color: #e9f6ff;
  padding-top: 80px;
  padding-bottom: 80px;
  color: #01245E;
}
footer .footer-top .logo {
  margin-bottom: 20px;
}
footer .footer-top p,
footer .footer-top a,
footer .footer-top ul,
footer .footer-top li,
footer .footer-top h1,
footer .footer-top h2,
footer .footer-top h3,
footer .footer-top h4,
footer .footer-top h5,
footer .footer-top h6,
footer .footer-top span {
  color: #01245E;
  margin-bottom: 0px;
}
@media only screen and (max-width: 991px) {
  footer .footer-top .footer-info {
    margin-bottom: 40px;
  }
}
footer .footer-top .footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
footer .footer-top .footer-contact .footer-contact-item {
  display: flex;
  align-items: center;
  gap: 20px;
  color: #011432;
  text-decoration: none;
  font-size: 20px;
}
footer .footer-top .footer-contact .footer-contact-item .link {
  font-size: 24px;
  line-height: 24px;
}
footer .footer-top .footer-contact .footer-contact-item:hover {
  color: #011432;
  text-decoration: none;
}
footer .footer-top .footer-contact .footer-contact-item .footer-contact-icon {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
footer .footer-top .footer-contact .footer-contact-item .footer-contact-icon::before {
  content: "";
  position: absolute;
  width: 36px;
  height: 36px;
  background-color: #A8DBFF;
  border-radius: 8px;
  transform: rotate(45deg);
  z-index: 0;
}
footer .footer-top .footer-contact .footer-contact-item .footer-contact-icon img {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  display: block;
}
footer .footer-bottom {
  background-color: #011432;
  padding-top: 40px;
  padding-bottom: 40px;
}
footer .footer-bottom .footer-bottom-items {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
}
footer .footer-bottom .footer-bottom-items p {
  margin-bottom: 0;
}
footer .footer-bottom .footer-bottom-items a {
  text-decoration: none;
}
* {
  color: #e9f6ff;
  font-family: "Karla", sans-serif;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: 5%;
}
body {
  background-color: #011432;
}
main {
  min-height: 500px;
}
h1 {
  color: #e9f6ff;
  font-family: "Karla", sans-serif;
  font-weight: 700;
  letter-spacing: 5%;
}
h2 {
  color: #e9f6ff;
  font-family: "Karla", sans-serif;
  font-weight: 700;
  letter-spacing: 5%;
}
h3 {
  color: #e9f6ff;
  font-family: "Karla", sans-serif;
  font-weight: 700;
  letter-spacing: 5%;
}
h4,
h5,
h6 {
  color: #e9f6ff;
  font-family: "Karla", sans-serif;
  font-weight: 700;
  letter-spacing: 5%;
}
p {
  color: #e9f6ff;
  font-family: "Karla", sans-serif;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: 5%;
}
a {
  color: #e9f6ff;
  font-family: "Karla", sans-serif;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: 5%;
  text-decoration: underline;
  transition: 0.3s ease;
}
a:hover {
  color: #fff;
}
ul,
li {
  color: #e9f6ff;
  font-family: "Karla", sans-serif;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: 5%;
}
.block-margin {
  margin-bottom: bottom;
}
.highlight {
  color: #6DC7FF;
}
.buttons {
  display: flex;
  gap: 20px;
}
.buttons .button {
  width: 100%;
}
.button {
  display: block;
  background-color: #0057E3;
  padding: 16px 24px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid #0057E3;
  transition: 0.3s ease;
  font-family: "Karla", sans-serif;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
}
.button:hover {
  color: #01245E;
  background-color: #e9f6ff;
  border: 1px solid #e9f6ff;
}
.button.secondary {
  padding: 4px 32px;
  background-color: unset;
  border: 1px solid #e9f6ff;
}
.button.secondary:hover {
  color: #01245E;
  background-color: #e9f6ff;
  border: 1px solid #e9f6ff;
}
.blue-background {
  background-color: #152042;
  padding: 80px 0px;
  overflow: hidden;
}
.blue-background .blue-glow {
  position: relative;
  text-align: center;
  width: 100%;
  z-index: 1;
}
.blue-background .blue-glow img {
  margin-bottom: 20px;
}
.blue-background .blue-glow h1 {
  font-size: 32px;
  line-height: 40px;
  font-weight: 400;
  font-family: "Karla", sans-serif;
}
.blue-background .blue-glow h1 .domainname {
  display: block;
  font-size: 72px;
  line-height: 90px;
  font-weight: 700;
  font-family: "Petrona", serif;
  color: #6DC7FF;
  margin: 20px 0;
  letter-spacing: 0%;
}
.blue-background .blue-glow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #002e77 0%, rgba(0, 46, 119, 0.4) 35%, rgba(0, 46, 119, 0) 70%);
  pointer-events: none;
  z-index: -1;
}
.blue-background .amount-area {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  z-index: 2;
}
@media only screen and (max-width: 1199px) {
  .blue-background .amount-area {
    margin-top: 40px;
  }
}
.blue-background .amount-area .light-blue-border {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.blue-background .amount-area .light-blue-border.buy-domain-offer-form {
  align-items: flex-start;
  text-align: left;
}
.blue-background .amount-area .light-blue-border .price {
  margin-bottom: 0px;
  font-family: "Petrona", serif;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
}
.blue-background .amount-area .light-blue-border .price .amount {
  font-family: "Karla", sans-serif;
  font-size: 48px;
  line-height: 56px;
  font-weight: 700;
}
.blue-background .amount-area .light-blue-border .button-container {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
  margin-bottom: 40px;
  gap: 20px;
  width: 100%;
}
.blue-background .amount-area .contact-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.blue-background .amount-area .contact-info a {
  display: block;
}
.blue-background .amount-area .contact-info img {
  width: 32px;
  height: 32px;
  display: block;
}
.light-blue-border {
  padding: 40px;
  border-radius: 48px;
  background-color: #22306d;
}
.light-blue-border .button {
  width: 100%;
}
.light-blue-border.buy-domain-offer-form {
  align-items: flex-start;
  text-align: left;
}
.light-blue-border.buy-domain-offer-form h3 {
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}
.light-blue-border.buy-domain-offer-form h3 .highlight {
  color: #6DC7FF;
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
}
.light-blue-border.buy-domain-offer-form p {
  margin-bottom: 40px;
}
.light-blue-border.buy-domain-offer-form label {
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  margin-bottom: 8px;
}
.light-blue-border.buy-domain-offer-form input {
  margin-bottom: 40px;
}
.light-blue-border.buy-domain-offer-form .button {
  margin-bottom: 20px;
  text-align: center;
}
.light-blue-border.buy-domain-offer-form .button.secondary {
  margin-bottom: 40px;
}
.light-blue-border.buy-domain-offer-form .check-row {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.light-blue-border.buy-domain-offer-form .check-row p {
  margin-bottom: 0px;
}
.domeinnaam {
  color: #6DC7FF;
  font-size: x-large;
  text-decoration: underline;
}
.check-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-top: 40px;
  margin-bottom: 40px;
}
@media only screen and (max-width: 991px) {
  .check-container {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
}
.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
@media only screen and (max-width: 991px) {
  .check-row {
    justify-content: center;
    text-align: center;
  }
}
.check-row img {
  width: 24px;
  height: 24px;
}
.check-row p {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  font-family: "Karla", sans-serif;
}
.steps {
  padding: 40px;
  background-color: #152042;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 80px;
}
.steps h2 {
  width: 100%;
  text-align: center;
  margin-bottom: 40px;
  font-size: 48px;
  line-height: 56px;
  font-weight: 700;
  color: #e9f6ff;
}
.steps .steps-title {
  position: relative;
  z-index: 2;
}
.steps .steps-row {
  position: relative;
  row-gap: var(--bs-gutter-x);
  z-index: 1;
}
.steps .steps-row::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 110%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #002e77 0%, rgba(0, 46, 119, 0.4) 40%, rgba(0, 46, 119, 0) 100%);
  pointer-events: none;
  z-index: 0;
}
.steps .steps-row > [class*="col-"] {
  position: relative;
  z-index: 2;
}
.steps .steps-row .step {
  width: 100%;
  height: 100%;
  padding: 40px;
  background-color: #22306d;
  border-radius: 48px;
}
@media only screen and (max-width: 991px) {
  .steps .steps-row .step {
    padding: 30px;
  }
}
.steps .steps-row .step .number {
  display: block;
  font-weight: 700;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: 5%;
  margin-bottom: 20px;
}
.steps .steps-row .step h1,
.steps .steps-row .step h2,
.steps .steps-row .step h3,
.steps .steps-row .step h4,
.steps .steps-row .step h5,
.steps .steps-row .step h6 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 5%;
  margin-bottom: 20px;
}
.steps .steps-row .step p:last-child {
  margin-bottom: 0;
}
.steps .steps-row .step.step-1 {
  border-radius: 48px 48px 0px 48px;
}
.steps .steps-row .step.step-2 {
  border-radius: 48px 48px 48px 0px;
}
.steps .steps-row .step.step-3 {
  border-radius: 48px 0px 48px 48px;
}
.steps .steps-row .step.step-4 {
  border-radius: 0px 48px 48px 48px;
}
.further-help {
  text-align: center;
  margin-bottom: 80px;
}
.further-help img {
  margin-bottom: 20px;
}
.further-help h1,
.further-help h2,
.further-help h3,
.further-help h4,
.further-help h5,
.further-help h6 {
  font-size: 48px;
  line-height: 56px;
  font-weight: 700;
  letter-spacing: 5%;
  margin-bottom: 20px;
}
.further-help p {
  margin-bottom: 20px;
}
.buy-this-domain {
  position: relative;
  overflow: hidden;
  background-color: #152042;
  border-radius: 24px;
  padding: 40px;
  margin-bottom: 80px;
}
.buy-this-domain::before {
  content: "";
  position: absolute;
  left: 40%;
  top: 60%;
  width: 120%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #002e77 0%, rgba(0, 46, 119, 0.4) 40%, rgba(0, 46, 119, 0) 100%);
  pointer-events: none;
  z-index: 0;
}
.buy-this-domain .container {
  position: relative;
  z-index: 2;
}
.buy-this-domain .buy-this-domain-content {
  width: 100%;
}
.buy-this-domain .buy-this-domain-content h1,
.buy-this-domain .buy-this-domain-content h2,
.buy-this-domain .buy-this-domain-content h3,
.buy-this-domain .buy-this-domain-content h4,
.buy-this-domain .buy-this-domain-content h5,
.buy-this-domain .buy-this-domain-content h6 {
  font-size: 48px;
  line-height: 56px;
  margin-bottom: 40px;
}
.buy-this-domain .buy-this-domain-content p {
  margin-bottom: 0;
}
.buy-this-domain .light-blue-border {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.buy-this-domain .light-blue-border.buy-domain-offer-form {
  align-items: flex-start;
  text-align: left;
}
.buy-this-domain .light-blue-border .price {
  margin-bottom: 0px;
  font-family: "Petrona", serif;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
}
.buy-this-domain .light-blue-border .price .amount {
  font-family: "Karla", sans-serif;
  font-size: 48px;
  line-height: 56px;
  font-weight: 700;
}
.buy-this-domain .light-blue-border .button-container {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
  margin-bottom: 40px;
  gap: 20px;
  width: 100%;
}
.faq {
  margin-bottom: 80px;
}
.faq h1,
.faq h2,
.faq h3,
.faq h4,
.faq h5,
.faq h6 {
  font-size: 48px;
  line-height: 56px;
  margin-bottom: 40px;
  text-align: center;
}
.faq .faq-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.faq .faq-items .faq-item {
  background-color: rgba(1, 36, 94, 0.5);
  border-radius: 24px;
  overflow: hidden;
}
.faq .faq-items .faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 32px;
  cursor: pointer;
  list-style: none;
}
.faq .faq-items .faq-item summary::-webkit-details-marker {
  display: none;
}
.faq .faq-items .faq-item summary h1,
.faq .faq-items .faq-item summary h2,
.faq .faq-items .faq-item summary h3,
.faq .faq-items .faq-item summary h4,
.faq .faq-items .faq-item summary h5,
.faq .faq-items .faq-item summary h6 {
  font-size: 20px;
  line-height: 28px;
  margin-bottom: 0px;
}
.faq .faq-items .faq-item summary img {
  width: 18px;
  height: 18px;
  transition: 0.3s ease;
}
.faq .faq-items .faq-item .faq-content {
  padding: 0 32px 24px;
}
.faq .faq-items .faq-item .faq-content p {
  margin-bottom: 0;
}
.faq .faq-items .faq-item[open] summary img {
  transform: rotate(180deg);
}
.buy-domain-block {
  width: 100%;
}
.domain-page .domain-page-content {
  position: relative;
  overflow: hidden;
  background-color: #152042;
  border-radius: 24px;
  padding: 40px;
  margin-bottom: 80px;
}
.domain-page .domain-page-content::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #002e77 0%, rgba(0, 46, 119, 0.4) 40%, rgba(0, 46, 119, 0) 100%);
  pointer-events: none;
  z-index: 0;
}
.domain-page .domain-page-content h1 {
  color: #6DC7FF;
  text-decoration: underline;
  font-size: 48px;
  line-height: 56px;
  margin-top: 40px;
  margin-bottom: 40px;
}
.domain-page .domain-page-content .payment-amount {
  width: fit-content;
  margin-top: 40px;
}
.domain-page .domain-page-content .payment-amount h3 {
  margin-bottom: 8px;
  color: #e9f6ff;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
}
.domain-page .domain-page-content .payment-amount h3 .highlight {
  color: #6DC7FF;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}
.domain-page .domain-page-content .payment-amount .payment-amount-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 8px;
}
.domain-page .domain-page-content .payment-amount .payment-amount-row span,
.domain-page .domain-page-content .payment-amount .payment-amount-row strong {
  color: #e9f6ff;
  font-size: 14px;
  line-height: 22px;
}
.domain-page .domain-page-content .payment-amount .payment-amount-row strong {
  font-weight: 400;
  text-align: right;
  white-space: nowrap;
}
.domain-page .domain-page-content .payment-amount .payment-amount-total {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 2px solid #e9f6ff;
}
.domain-page .domain-page-content .payment-amount .payment-amount-total span,
.domain-page .domain-page-content .payment-amount .payment-amount-total strong {
  font-weight: 700;
}
.domain-page .domain-page-content form label {
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  margin-bottom: 8px;
}
.domain-page .domain-page-content form input {
  background-color: #e9f6ff;
  margin-bottom: 20px;
}
.domain-page .domain-page-content form .button {
  margin-top: 40px;
}
.domain-page .domain-page-content form .check-row {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 40px;
}
.domain-page .domain-page-content form .check-row p {
  margin-bottom: 0;
}
.domain-page .domain-page-content .row {
  position: relative;
  z-index: 2;
}