:root {
  --header-hexagon-width: 300px;
  --header-hexagon-height: calc(var(--header-hexagon-width) * 0.57735);
  --button-hexagon-width: 60px;
  --button-hexagon-height: calc(var(--button-hexagon-width) * 0.57735);
  --section-padding-x: 80px;
  --section-padding-y: 80px;

  /* Hex */
  --ex-dark: #080808;
  --ex-light: #F8F8F8;
  --ex-blue: #0054D1;

  --exs-dark: #1F1F1F;
  --exs-light: #DFDFDF;
  --exs-blue: #0041A3;

  /* RGB */
  --exr-dark: 8, 8, 8;
  --exr-light: 248, 248, 248;
  --exr-blue: 0, 84, 209;

  --exsr-dark: 31, 31, 31;
  --exsr-light: 223, 223, 223;
  --exsr-blue: 0, 65, 163;
}

body {
  color: var(--exs-light);
  position: relative;
}

/* ==================================================
  Override
================================================== */
.border-light {
  border-color: var(--exs-light);
}

.border-dark {
  border-color: var(--exs-dark);
}

.text-primary {
  color: var(--ex-blue);
}

.btn-primary {
  color: var(--ex-blue);
}

.btn-primary:hover {
  color: var(--exs-blue);
}

/* ==================================================
  Components
================================================== */
.btn-hexagon {
  width: var(--button-hexagon-width);
  height: var(--button-hexagon-height);
  padding: 0;
  margin: 0;
  background-color: var(--exs-blue);
  color: var(--ex-light);
  font-size: calc(var(--button-hexagon-width) / 2);
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.btn-hexagon:hover {
  color: var(--exs-light);
}

.btn-hexagon:before,
.btn-hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: calc(var(--button-hexagon-width) / 2) solid transparent;
  border-right: calc(var(--button-hexagon-width) / 2) solid transparent;
}

.btn-hexagon:before {
  bottom: 100%;
  border-bottom: calc(var(--button-hexagon-height) / 2) solid var(--exs-blue);
}

.btn-hexagon:after {
  top: 100%;
  width: 0;
  border-top: calc(var(--button-hexagon-height) / 2) solid var(--exs-blue);
}

/* ==================================================
  Navbar
================================================== */
.navbar {
  background-color: var(--exs-dark);
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar .nav {
  width: 100%;
  max-height: 60px;
  padding: 0.5rem var(--section-padding-y);
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

.navbar .brand {
  color: var(--exs-light);
  display: flex;
}

.navbar .menu {
  flex-direction: row;
}

.nav-link {
  padding: 0.5rem;
  color: var(--exs-light);
}

.nav-link:hover {
  color: var(--ex-light);
}

.nav-link.active {
  color: var(--ex-light)!important;
}

/* ==================================================
  Header
================================================== */
.header {
  min-height: 650px;
  padding: var(--section-padding-x) var(--section-padding-y);
  background-color: var(--exs-dark);
  display: flex;
}

.header .desc {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.header .profile {
  width: 50%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.profile .hexagon {
  width: var(--header-hexagon-width);
  height: var(--header-hexagon-height);
  padding: 0;
  margin: 0;
  background-color: var(--exs-blue);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.profile .hexagon:before,
.profile .hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: calc(var(--header-hexagon-width) / 2) solid transparent;
  border-right: calc(var(--header-hexagon-width) / 2) solid transparent;
}

.profile .hexagon:before {
  bottom: 100%;
  border-bottom: calc(var(--header-hexagon-height) / 2) solid var(--exs-blue);
}

.profile .hexagon:after {
  top: 100%;
  width: 0;
  border-top: calc(var(--header-hexagon-height) / 2) solid var(--exs-blue);
}

.profile .hexagon img {
  width: 75%;
  z-index: 1;
}

/* ==================================================
  Main
================================================== */


/* ==================================================
  Footer
================================================== */
.footer {
  width: 100%;
  padding: var(--section-padding-y) var(--section-padding-x);
  background-color: var(--ex-dark);
  display: flex;
  gap: 40px;
  flex-direction: column;
}

.footer-brand {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-contact,
.footer-menu,
.footer-links {
  display: flex;
  flex-direction: column;
}