/* =========================
   ROOT / RESET
========================= */

:root {
  --formblock-color: #0d47a1;
  --formblock-color-invert: #fff;
  --formblock-color-error: #cc0000;
  --formblock-color-success: #ff7a1a;
  --bg: #fff;
  --text: #2a2d2f;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", "Noto Sans", "Apple Color Emoji",
    "Segoe UI Emoji", sans-serif;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}

.wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}



/* =========================
   SITEWIDE
========================= */

.inner {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  /* background-color: lightyellow */
}

h1,
h2,
h3 {
  color: #000;
  line-height: 1.2;
}

a:link {
  color: #2a2d2f;
  text-decoration: underline;
}

a:visited {
  color: #2a2d2f;
}

a:hover {
  color: #000;
  text-decoration: none;
}

a:active {
  color: #2a2d2f;
}

/* =========================
   HEADER
========================= */

header {
  display: flex;
  flex-direction: column;
  background-color: #004f71;
  color: #fff;
  padding-top: 2em
}

header .inner {
  display: flex;
  flex-direction: column;
  /* padding-top: 4em; */
  /* padding-bottom: 2em; */
}

header .text {
  width: 100%;
  text-align: left;
}

header .text h1,
header .text h2 {
  color: #fff;
  line-height: 1.2;
}

header .text h2 {
 line-height: 1.6;
}

header .media {
  display: flex;
  justify-content: center;
  width: 100%;
}

header .media img {
  max-width: 90%;
  height: auto;
}





main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}




/* =========================
   WHAT IT IS SECTION
========================= */

section.how {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  color: #000;
  text-align: center;
  padding-top: 2em;
  padding-bottom: 2em
}

.how .container {
  display: flex;
  flex-direction: column;
  justify-content: center;

}

.how .text {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* background-color: red */
}

.how .media {
  display: flex;
  justify-content: center;
  width: 100%;
  /* background-color: red */
}

.how .media img {
  max-width: 100%;
  height: auto;
}



/* =========================
   WHY SECTION
========================= */

section.why {
  display: flex;
  flex-direction: column;
  margin-bottom: 2em;
  text-align: left;
}

p.feature {
  background-color: #ffd100;
  padding: 1.25em;
  font-size: 120%;
  border-radius: 10px;
}

/* =========================
   WHERE SECTION (LOGOS)
========================= */

section.where {
  display: flex;
  flex-direction: column;
 padding-bottom: 3em;
  text-align: left;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3em;
  padding-top: 2em
}

.gallery img {
  height: 75px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* =========================
   FORM SECTION
========================= */

section.form {
  display: flex;
  flex-direction: column;
  background-color: #cfd4d7;
}

.formblock {
  max-width: 100%;
}

.formblock__submit {
  width: 100%;
}

.formblock__submit input[type="submit"] {
  width: 100%;
  background-color: #004f71;
  color: #fff;
  padding: 0.5em;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 120%;
  transition: background-color 0.2s ease;
}

.formblock__submit input[type="submit"]:hover {
  background-color: #002a3a;
}

.formblock__message__text p {
  color: #fff;
}

.form-divider {
  margin: 0;
  border: none;
  border-top: 1px solid #000;
}

.info-field h3 {
  margin-top: 0;
  margin-bottom: 0;
}

/* =========================
   FAQ SECTION
========================= */

section.faq {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding-bottom: 2em
}

.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-list summary {
  background-color: #fff;
  padding: 18px;
  cursor: pointer;
  border-top: 1px solid;
}

.faq-list details[open] summary {
  background-color: #cfd4d7;
}

/* =========================
   CTA SECTION
========================= */

section.cta {
  display: flex;
  flex-direction: column;
  background-color: #2a2d2f;
  padding-top: 2em;
  padding-bottom: 2em;
  color: #fff;
}

.cta-inner {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  text-align: center;
  color: #fff;
}

.cta-inner h2 {
  width: 100%;
  color: #ff7a1a;
}

a.cta-button {
  width: 100%;
  color: #fff;
}

.cta-button:link {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70px;
  background-color: #004f71;
  color: #fff;
  text-decoration: none;
  border-radius: 0.25em;
  padding: 0.5em;
  cursor: pointer;
  font-size: 120%;
  transition: background-color 0.2s ease;
}

.cta-button:hover {
  background-color: #002a3a;
  text-decoration: none;
}

/* =========================
   FOOTER
========================= */

footer {
  display: flex;
  flex-direction: column;
  text-align: center;
  background-color: #000;
  color: #fff;
  padding: 2em 0;
}

footer a:link {
  color: #fff;
  text-decoration: underline;
  padding: 1em;
}

footer a:visited {
  color: #fff;
}

footer a:hover,
footer a:focus {
  color: #fff;
  text-decoration: none;
}

footer a:active {
  color: #fff;
}

/* =========================
   DESKTOP (≥768px)
========================= */

@media (min-width: 768px) {

.inner {width: 960px;}
.cta-inner {width: 960px;}
nav ul { width: 960px;}


/* dt header */
header .inner {flex-direction: row;justify-content: space-between;}
header .text {width: 40%;}
header .media {width: 55%;justify-content: flex-end;}
header .text h2 {line-height: 1.2;}

/* dt how section */

.how .container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;


}
.how .text {width: 40%;}
.how .media {width: 55%;}




  .cta-inner {
    flex-direction: row;
    justify-content: space-between;
  }

  .cta-inner h2 {
    width: 50%;
    text-align: left;
  }

  a.cta-button {
    width: 40%;
  }

  .gallery img {
    height: 100px;
  }
}