:root {
  --primary: rgba(6, 131, 215, 1);
  --secondary: rgba(22, 27, 127, 1);
  --hover: rgba(9, 11, 51, 1);
  --charcoal: rgba(61, 61, 61, 1);
  --light: rgba(0,0,0,0.1);
  --white: rgba(250, 250, 250, 1);
  --white0: rgba(250, 250, 250, 0);
  --text: rgba(105,105,105,1);
  --base: rgba(224, 224, 224, 1);
}
*, *::after, *::before {box-sizing: border-box;}
html {
  font-size: 1em;
  scroll-behavior: smooth;
}
body {
  background: #E0E0E0;
  background: var(--base);
  color: #696969;
  color: var(--text);
  font-family: "Open Sans", sans-serif;
  line-height: calc(1.2em + .25vw);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
main {
  width: 80vw;
  margin: -200px 10vw 72px;
  position: relative;
  z-index: 1;
}
h1 {font-size: calc(1.25em + .25vw); font-weight: 400;}
h2 {font-size: calc(1.25em + .25vw); font-weight: 400;}
h3 {font-size: calc(1.25em + .25vw); font-weight: 300;}
h2.center, h4.center {text-align:center;}
strong {font-weight: 800;}
ul {list-style: disc outside none;}
ul li {
  line-height: 1.25;
  font-size: calc(1em + .25vw);
  line-height: calc(1.1em + .4vw);
  color: var(--charcoal);
  margin: 1em 0em 0em 1.5em;
}
ul ul li {
  font-size: calc(.75em + .15vw);
  line-height: calc(1.1em + .2vw);
  color: var(--text);
  margin: 8px 0px 0px 40px;
}
li:last-child {
  margin-bottom: 1.5em;
}


/* --------------------------- --------- --------------------------- */
/* ----------------------------- Buttons ---------------------------- */
/* --------------------------- --------- --------------------------- */

button {
  color: #ffffff;
  color: var(--white);
  background-color: #16267F;
  background-color: var(--secondary);
  padding: .66em 2em;
  border-radius: 3em;
  font-weight: 500;
  vertical-align: middle;
  text-transform: uppercase;
  border: 3px solid var(--white0);
}
button:hover {
  background-color: #090b33;
  background-color: var(--hover);
  cursor:pointer;  
}
button.reversed  {
  color: #ffffff;
  color: var(--white);
  border: 3px solid var(--white);
  background-color: rgba(250, 250, 250, 0);
  background-color: var(--white0);
}
button.reversed:hover  {
  background-color: #ffffff;
  background-color: var(--white);
  color: #1D9ED6;
  color: var(--primary);
  cursor:pointer;
}

/* --------------------------- --------- --------------------------- */
/* --------------------------- Navigation -------------------------- */
/* --------------------------- --------- --------------------------- */

nav {
  display: flex;
  justify-content: space-between;
  background: #0683D7;
  background: var(--primary);
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 9999;
  box-shadow: 0px 3px 9px rgba(0,0,0,0.2);
  align-items: center;
  padding: 1em 6vw;
}
nav img, footer img {
  max-height: 80px;
}
nav button, footer button {
  font-size: calc(1em * 1.125);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 2em;
}

.nav-links a {
  color: #fafafa;
  color: var(--white);
  text-decoration: none;
  font-weight: 500;
  font-size: calc(1em + .1vw);
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: rgba(250, 250, 250, 0.8);
}

nav h3 a {
  color: #fafafa;
  color: var(--white);
  text-decoration: none;
}


/* --------------------------- --------- --------------------------- */
/* ------------------------- Page Structure ------------------------ */
/* --------------------------- --------- --------------------------- */

section {
  display: flex;
  justify-content: center;
  height: auto;
  line-height: 1.5;
}
.m-xl {
  margin: 6em 10vw;
}


/* --------------------------- --------- --------------------------- */
/* ------------------------------ Hero ----------------------------- */
/* --------------------------- --------- --------------------------- */

.hero {
  padding: 0px;
  display: flex;
  width: 100vw;
  height: 600px; 
  box-shadow: 0px 4px 12px rgba(0,0,0,0.2);
  margin: 110px auto;
  background-image: url('../img/horizon-bg.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.flex-container {
  display: flex;
  justify-content: space-around;
}
.left-column {
  display: flex;
  flex-direction: column;
  flex-grow: 3;
  align-self:flex-start;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
}
.right-column {
  display: flex;
  flex-grow: 1;
}
.right-column img {
  max-height: 580px;
  align-self:flex-end;
}
.left-column h1 {
  color: #ffffff;
  color: var(--white);
  font-size: calc(1.5em + .5vw);
  font-weight: 400;
  line-height: calc(1.25em + .2vw);
  max-width: 32ch;
}
.left-column h3 {
  color: #ffffff;
  color: var(--white);
  font-size: calc(.75em + .5vw);
  font-weight: 500;
  margin: 16px 0px;
}
.hero button {
  font-size: calc(1em + .25vw);
  margin-top: 16px;
}
.hero.connect {
  height: 360px;
}


/* --------------------------- --------- --------------------------- */
/* ------------------------------ CTA ----------------------------- */
/* --------------------------- --------- --------------------------- */

.cta {
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
  width: 100%;
  box-shadow: 0px 4px 12px rgba(0,0,0,0.2);
  z-index: 999999;
  padding: 2.5em 4em;
  line-height: calc(1.5em + .2vw);
  border-radius: .33em;
}
.cta * {
  margin: .5em;
}
.cta button {
  font-size: calc(1.33em * 1.125);
  padding: .5em 2em;
}
.align-center {
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

/* --------------------------- --------- --------------------------- */
/* ------------------------- Framework Icons ------------------------ */
/* --------------------------- --------- --------------------------- */

.framework {
  display: flex;
  flex-direction: column;
  background-color: #04648E;
  background-color: var(--secondary);
  padding: 3em;
  margin: 1em;
  border-radius: .5em;
  align-content: center;
  text-align: center;
}
.framework * {
  color: #fafafa;
  color: var(--white);
}
.framework h4 {
  font-size: calc(1.5em * 1.125);
  font-weight: 800;
}
.stack {
    flex-direction: column;
}
.framework span {
  font-size: calc(6em * 1.125);
}

/* --------------------------- --------- --------------------------- */
/* ------------------------- layout options ------------------------ */
/* --------------------------- --------- --------------------------- */

.primary {
  background-color: #1D9ED6;
  background-color: var(--primary);
}
.primary * {
  color: #fafafa;
  color: var(--white);
}

/* --------------------------- --------- --------------------------- */
/* ----------------------------- Calendly ---------------------------- */
/* --------------------------- --------- --------------------------- */

.calendly-inline-widget {
  width: 100%;
  height: 1160px;
}
.m-xxl {
  margin: 5em 20vw;
}


/* --------------------------- --------- --------------------------- */
/* ----------------------------- Footer ---------------------------- */
/* --------------------------- --------- --------------------------- */

footer {
  width: 100vw;
  background-color: #04648E;
  background-color: var(--secondary);
  display: flex;
  flex-direction:column;
}
footer div {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding: 3em 0em 1.5em 0em;
}
footer a svg {
  fill: #ffffff;
  fill: var(--white);
  width: 2em;
  height: 2em;
  margin: 16px;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.82), 0 0 16px rgba(0, 0, 0, 0.32);
}
svg.linkedin:hover {fill: #0e76a8;}
footer h6 {
  font-size: calc(.75em * 1.125);
  color: rgba(250, 250, 250, .33);
  width: 100vw;
  margin-bottom: 2em;
  text-align:center;
}

/* --------------------------- --------- --------------------------- */
/* ----------------------------- < 1600 ---------------------------- */
/* --------------------------- --------- --------------------------- */

@media only screen and (max-width: 1600px) {
  .m-xl {margin: 4em 4.25vw;}
  .framework p {font-size: calc(.75em * 1.125);}
  .framework span {font-size: calc(5em * 1.125);}
}

/* --------------------------- --------- --------------------------- */
/* ----------------------------- < 1200 ---------------------------- */
/* --------------------------- --------- --------------------------- */

@media only screen and (max-width: 1200px) {
  .m-xl {margin: 3em 0vw;}
  .flex-container {justify-content: space-between;}
  .framework * {font-size: calc(1em * .9);}
  .hero {height: 500px; }
  .right-column img {max-height: 450px;}
  main {width: 90vw; margin: -200px 5vw 72px;}
  .right-column {flex-shrink: 3;}
  .m-xxl {margin: 5em 3vw;}
}

/* --------------------------- --------- --------------------------- */
/* ----------------------------- < 900 ----------------------------- */
/* --------------------------- --------- --------------------------- */

@media only screen and (max-width: 900px) {
  main {margin: -160px 5vw 48px;}
  .left-column h1 {font-size: calc(1.1em + .25vw);}
  .left-column h3 {font-size: calc(.66em + .25vw);}
  .hero button {font-size: calc(.75em + .25vw);}
  .stack {flex-direction: row; margin-top: 2em;}
  .flex-container.m-xl {flex-direction: column;}
  .framework h4 {font-size: calc(1em * 1.125);}
  .framework span {font-size: calc(3.5em * 1.125);}
  .hero {height: 400px; margin: 72px auto;}
  .right-column img {max-height: 360px;}
  .cta {
    padding: 1em 1.5em;
    line-height: calc(1.25em + .2vw);
  }
  .cta p {font-size: calc(.8em + .25vw);}
  .left-column {margin-left: 3em;}
  nav {padding: .5em 6vw;}
  nav img, footer img {max-height: 56px;}
  nav button, footer button {font-size: calc(1em * .9);}
  ul li {
  line-height: 1.25;
  font-size: calc(1.3em + .25vw);
  line-height: calc(1.4em + .4vw);
  margin: .5em 0em 0em .75em;
}
  ul ul li {
  font-size: calc(.8em + .25vw);
  line-height: calc(1.1em + .2vw);
  margin: .5em 0em 0em 4em;
}
.m-xxl {margin: 3em 1vw;}
}

/* --------------------------- --------- --------------------------- */
/* ----------------------------- < 720 ----------------------------- */
/* --------------------------- --------- --------------------------- */

@media only screen and (max-width: 720px) {
  .stack {flex-direction: column; width: 100%;}
  .hero {height: 360px; }
  .right-column img {max-height: 320px;}
  main {margin: -140px 5vw 48px;}
}

/* --------------------------- --------- --------------------------- */
/* ----------------------------- < 640 ----------------------------- */
/* --------------------------- --------- --------------------------- */

@media only screen and (max-width: 640px) {
  main {margin: -100px 5vw 48px;}
  .hero {height: 300px; text-align: center;}
  .right-column img {display: none;}
  .left-column {align-self:center; align-items: center; margin-left:0em;}
  .left-column h1 {font-size: calc(1.5em + .25vw);}
  .left-column h3 {font-size: calc(.8em + .25vw);}
  footer div {
  flex-direction: column;
  padding: 3em 0em .5em 0em;
  }
  footer div * {margin: 16px 0px;}
  .cta button {
    font-size: calc(1.1em * 1.125);
    padding: .5em 2em;
  }
  ul li {
  line-height: 1.25;
  font-size: calc(1.2em + .25vw);
  line-height: calc(1.4em + .4vw);
  margin: .5em 1.5em 0em 1.5em;
  }
  ul ul li {
  font-size: calc(.8em + .25vw);
  line-height: calc(1.1em + .2vw);
  margin: .5em 2em 0em 4em;
  }
  .m-xl {margin: 1.5em 0vw;}
  .m-xxl {margin: 1.5em 0vw;}
}