@import url(fontawesome.min.css);
@import url(bootstrap5.min.css);
@import url(theme.css);
@import url(fonts.css);

/*****************/
/* HTML Overrides */
/*****************/

a {
  text-decoration: none;
  color: #097c9d;
}

a:hover {
  color: #097c9d;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}

main {
  -webkit-animation: fade-in .8s ease-in-out;
          animation: fade-in .8s ease-in-out;
}

hr {
  color: #097c9d;
  width: 100%;
  opacity: 1;
  border-width: 1px;
}

body {
/*  background: no-repeat top/100% url(../images/body-bg-mobile.png) rgba(var(--bs-light-rgb),1);*/
}

@media screen and (min-width: 992px) {
  body {
/*    background-image: url(../images/body-bg.png);*/
  }
}


/**********************/
/* Boostrap Overrides */
/**********************/

.form-floating > .form-control,
.form-floating > .form-control-plaintext {
  height: calc(3.5rem + 2px);
}

@media screen and (min-width: 992px) {
  .form-floating > .form-control,
  .form-floating > .form-control-plaintext {
    height: calc(4.5rem + 2px);
  }
}

.form-floating > .form-select {
  font-size: 20px;
  font-weight: 700;
  font-family: var(--sgn-header-font);
  height: calc(4.5rem + 2px);
}

@media screen and (min-width: 992px) {
  .form-floating > .form-select {
    height: calc(5.5rem + 2px);
  }
}

.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  opacity: .65;
  transform: scale(.85) translateY(-.5rem) translateX(.2rem);
}

@media screen and (min-width: 992px) {
  .form-floating > .form-control-plaintext ~ label,
  .form-floating > .form-control:focus ~ label,
  .form-floating > .form-control:not(:placeholder-shown) ~ label,
  .form-floating > .form-select ~ label {
    opacity: .65;
    transform: scale(.65) translateY(-.5rem) translateX(1rem);
  }
}

.form-floating > .form-control,
.form-floating > .form-control-plaintext {
  padding: 1rem 1.75rem;
}

.form-floating > label {
  padding: 1rem 1.75rem;
}

.form-floating > .form-select {
  padding: 1.625rem 1.75rem .625rem 1.75rem;
}

@media screen and (min-width: 992px) {
  .form-floating > .form-control,
  .form-floating > .form-control-plaintext {
    padding: 1rem 1.75rem;
  }

  .form-floating > label {
    padding: 1rem 1.75rem;
  }

  .form-floating > .form-select {
    padding: 1.625rem 1.75rem .625rem 1.75rem;
  }
}


/***********************/
/* Specific Components */
/***********************/

section#form {
  margin-bottom: 2rem;
}

@media screen and (min-width: 992px) {
  section#form {
    margin-bottom: 0;
  }
}

section#form .form-container {
  max-width: 30rem;
  /* margin-top: 1em; */
  margin-right: auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media screen and (min-width: 992px) {
  section#form .form-container {
    margin-top: 3rem;
  }
}

section#form .form-container .certificates {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2rem;
}

/*section#form .form-container .certificates img {*/
/*  height: 5rem;*/
/*  aspect-ratio: auto;*/
/*}*/

section#form .form-header {
  font-family: var(--sgn-header-font);
  font-weight: 700;
  font-size: 2.219rem;
  text-align: center;
  margin-bottom: 1.25rem;
  line-height: 1.2;
}

@media screen and (min-width: 992px) {
  section#form .form-header {
    font-size: 3rem;
    /*text-align: start;*/
  }
}

form#get-started {
  width: 100%;
  margin-bottom: 2rem;
  font-size: 1rem;
  border-radius: 2.75rem;
  overflow: hidden;
  -webkit-box-shadow: 0.438rem 0.625rem 0.938rem 0.125rem #097c9d;
  box-shadow: 0.438rem 0.625rem 0.938rem 0.125rem #097c9d;
  padding: 37px;
  background: #fffffff7;
}

@media screen and (min-width: 992px) {
  form#get-started {
    font-size: 1.5rem;
  }

  form#get-started:before {
    content: '';
    position: absolute;
    width: 2.375rem;
    height: 2.375rem;
/*    background: #097c9d;*/
    z-index: 1000;
    border-radius: 50%;
    -webkit-transform: translate(-2.3rem, -1.5rem);
        -ms-transform: translate(-2.3rem, -1.5rem);
              transform: translate(-1rem, -0.9rem);
  }
}

form#get-started .form-control:focus,
form#get-started .form-select:focus {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}

form#get-started input,
form#get-started select {
  border-radius: 0;
  border: 0;
  border-bottom: 0.063rem solid rgba(0, 0, 0, 0.1);
}

form#get-started .btn {
  --bs-btn-color: #fff;
  --bs-btn-border-width: 0;
  --bs-btn-border-radius: 0;
  background-color: #097c9d;
  font-weight: 500;
  font-size: 1.19rem;
  position: relative;
  width: calc(100% + 0.0rem);
  height: 4.125rem;
}

form#get-started .disclaimer {
  padding: .875rem 1rem;
  font-size: 0.75rem;
  background-color: #fffaf4;
}

section#how-it-works {
  margin-bottom: 3.5rem;
}

@media screen and (min-width: 992px) {
  section#how-it-works {
/*    margin-bottom: 12rem;*/
  }
}

section#how-it-works .hiw-number {
  font-family: var(--sgn-header-font);
  font-size: clamp(5rem, 5vw + 1rem, 6.25rem);
  font-weight: 900;
  letter-spacing: -0.25rem;
  border: #097c9d;
  margin-bottom: 0.7rem;
}

@media screen and (min-width: 992px) {
  section#how-it-works .hiw-number {
    margin-bottom: 0;
  }
}

section#how-it-works .hiw-circle {
  width: 10.25rem;
  height: 10.25rem;
  border-radius: 50%;
  border: 0.25rem solid #097c9d;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (min-width: 992px) {
  section#how-it-works .hiw-circle {
    width: 12.25rem;
    height: 12.25rem;
  }
}

section#how-it-works .hiw-dot {
  font-family: initial !important;
  color: #097c9d;
  font-size: 6.875rem;
}

section#people {
  margin-bottom: 3rem;
}

@media screen and (min-width: 992px) {
  section#people {
    margin-bottom: 12rem;
  }
}

section#people .card.sgn-card .card-body {
  font-size: 1.3rem;
}

section#advantages {
/*  margin-bottom: 5rem;
}*/

@media screen and (min-width: 992px) {
  /*section#advantages {
    margin-bottom: 10rem;
  }*/
}

footer#footer {
  background-color:#097c9d;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
}

footer#footer .footer-text {
  font-size: .75rem;
  font-weight: 400;
  color: white;
}

footer#footer .footer-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}

@media screen and (min-width: 992px) {
  footer#footer .footer-links {
    flex-direction: row;
  }
  .trustpilot-section {
    border: 3px solid #7d0000;
    padding: 20px;
    border-radius: 10px;
    max-width: 1200px;
    margin: auto;
    margin-bottom: 38px;
}
}

footer#footer .footer-links .footer-link {
  text-decoration: none;
  color: white;
  text-align: center;
  margin-bottom: .5rem;
  font-size: .875rem;
}

/**************/
/* Animations */
/**************/

@-webkit-keyframes fade-in {
  0%{
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  0%{
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/***********************/
/* Re-usable Utilities */
/***********************/

/*
  Responsive Text Formula
    font-size: min([maximum size], calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))));
*/

.section-header {
  font-family: var(--sgn-header-font);
  font-size: 2.613rem;
  font-weight: 700;
}

@media screen and (min-width: 992px) {
  .section-header {
    font-size: 3rem;
  }
}

.card.sgn-card {
  border-radius: var(--bs-border-radius);
  /* background-color: rgba(var(--bs-light-rgb), .75); */
  background-color: transparent;
  border-width: 0.125rem;
/*  border-color: #097c9d;*/
  overflow: hidden;
  -webkit-box-shadow: 0.188rem 0.25rem 0.188rem -0.125rem #097c9d;
          box-shadow: 0.188rem 0.25rem 0.188rem -0.125rem #097c9d;
  padding: 2rem 1rem;
}

.card.sgn-card .card-header {
  background-color: transparent;
  border: none;
  font-weight: 700;
  font-family: var(--sgn-header-font);
  font-size: 1.8rem;
}

.card.sgn-card .card-body {
  border: none;
  font-size: 1rem;
}

.center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
}

.center-column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
}

.center-between {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  -webkit-box-pack: justify;
     -ms-flex-pack: justify;
  justify-content: space-between;
}

.center-around {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

@media screen and (min-width: 992px) {
  .w-lg-75 {
    width: 75% !important;
  }
}

.btn-themed {
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-bg: #097c9d;
  --bs-btn-hover-bg: color-mix(in srgb, #097c9d, black 10%);
  --bs-btn-active-bg: color-mix(in srgb, #097c9d, black 10%);
  --bs-btn-active-border-color: color-mix(in srgb, #097c9d, black 10%);
  background: var(--bs-btn-bg);
}