@charset "UTF-8";
@font-face {
  font-family: "overpass";
  src: url("../../assets/fonts/overpass.ttf");
}
@font-face {
  font-family: "manrope";
  src: url("../../assets/fonts/manrope.ttf");
}
@font-face {
  font-family: "space-grotesk";
  src: url("../../assets/fonts/space-grotesk.ttf");
}
:root {
  scroll-behavior: smooth;
  --side-p: clamp(20px, 5dvw, 10%);
  --max-w: 1200px;
  --bg: #fffcee;
  --text: #121212;
  --font: 16px;
  --medium: #c9bebe;
  --dark: #000000;
  --btn-c: #14440fee;
  --special-link: teal;
  --text-on-bg: var(--text);
  --white: #fff;
  --light-white: #ffffffbb;
}

@keyframes appear {
  from {
    opacity: 0;
    scale: 0.5;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
@keyframes load {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes counterRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "overpass", arial;
  font-size: var(--font);
  background: var(--bg);
  color: var(--text);
}

main {
  display: flex;
  justify-content: normal;
  align-items: normal;
  flex-flow: column;
  gap: 0;
}
main > section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 20px;
}
main > section > [class*=__content], main > section > [class*=__img] {
  width: 100%;
  max-width: 1200px;
}

h1 {
  font-size: clamp(2.5rem, 5dvw, 3rem);
}

h2 {
  font-size: clamp(2rem, 5dvw, 2.5rem);
}

h1, h2 {
  font-family: "manrope";
}
h1 .focus, h2 .focus {
  color: var(--special-link);
}

img {
  display: block;
  width: 100%;
}

.loader {
  background: var(--bg);
  position: fixed;
  z-index: 100;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: none;
}
.loader.active {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 0;
}
.loader__content {
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 5px;
}
.loader__content .window {
  border: 2px solid;
  height: 100px;
  width: 70px;
  margin-bottom: 20px;
  padding: 5px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  position: relative;
  overflow: hidden;
  background: #fff;
}
.loader__content .window::before, .loader__content .window::after {
  position: absolute;
  content: "";
  height: 150px;
  width: 1px;
  background: var(--medium);
  transform: rotate(34deg);
  place-self: center;
  z-index: 1;
}
.loader__content .window::after {
  transform: rotate(-34deg);
}
.loader__content .window span {
  overflow: hidden;
  border: 1px solid;
  position: relative;
  z-index: 2;
  background: var(--bg);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 0;
}
.loader__content .window span::after {
  content: "";
  position: absolute;
  background: #eee;
  width: 20px;
  height: 100px;
  transform: rotate(45deg);
}
.loader__content .window span::before {
  content: "";
  position: absolute;
  z-index: 2;
  background: var(--bg);
  width: 2px;
  height: 100px;
  transform: rotate(45deg);
}
.loader__content .word {
  display: flex;
  justify-content: normal;
  align-items: normal;
  flex-flow: row;
  gap: 5px;
}
.loader__content .word .letter {
  width: 25px;
  height: 25px;
  background: var(--text);
  color: var(--bg);
  text-align: center;
  animation: loader__text 2s linear infinite;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 0;
}

@keyframes loader__text {
  0% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}
.contact input[type=checkbox], .quote input[type=checkbox] {
  display: none;
}
.contact input[type=checkbox]:checked ~ .contact-stuff, .contact input[type=checkbox]:checked ~ .quote-whole, .quote input[type=checkbox]:checked ~ .contact-stuff, .quote input[type=checkbox]:checked ~ .quote-whole {
  transform: translateY(0);
  opacity: 1;
}

.contact-stuff, .quote-whole {
  position: fixed;
  transform: translateY(100%);
  opacity: 0;
  transition: all 0.5s;
  z-index: 15;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  justify-content: normal;
  align-items: flex-end;
  flex-flow: column;
  gap: 0;
}
.contact-stuff > .overlay, .quote-whole > .overlay {
  position: fixed;
  z-index: 16;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
}
.contact-stuff form, .quote-whole form {
  position: absolute;
  z-index: 17;
  width: 100%;
  padding: 50px var(--side-p);
  bottom: 0;
  border-top: 2px solid var(--text);
  background: var(--bg);
  display: flex;
  justify-content: normal;
  align-items: normal;
  flex-flow: column;
  gap: 15px;
}
.contact-stuff form .heading, .quote-whole form .heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-flow: row wrap;
  gap: 20px;
}
.contact-stuff form .heading button, .quote-whole form .heading button {
  cursor: pointer;
  color: var(--text);
  background: transparent;
  padding: 10px 20px;
  font: inherit;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 10px;
}
.contact-stuff form .heading button:hover, .quote-whole form .heading button:hover {
  color: var(--bg);
  background: var(--text);
  border-color: var(--text);
}
.contact-stuff form .heading button span, .quote-whole form .heading button span {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 0;
}
.contact-stuff form .btns, .quote-whole form .btns {
  display: flex;
  justify-content: space-between;
  align-items: normal;
  flex-flow: row;
  gap: 20px;
}
.contact-stuff form .btns input[type=radio], .quote-whole form .btns input[type=radio] {
  display: none;
}
.contact-stuff form .btns input[type=radio]:checked + label, .quote-whole form .btns input[type=radio]:checked + label {
  background: var(--special-link);
  color: var(--bg);
  border-color: var(--text);
}
.contact-stuff form .btns label, .quote-whole form .btns label {
  cursor: pointer;
  color: var(--text);
  background: transparent;
  padding: 10px 20px;
  font: inherit;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 10px;
}
.contact-stuff form .btns label:hover, .quote-whole form .btns label:hover {
  color: var(--bg);
  background: var(--text);
  border-color: var(--text);
}
.contact-stuff form .btns label span, .quote-whole form .btns label span {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 0;
}
.contact-stuff form .btns label, .quote-whole form .btns label {
  flex: 1;
}
.contact-stuff form .btns label i, .quote-whole form .btns label i {
  font-size: 1rem;
}
.contact-stuff form .fields, .quote-whole form .fields {
  margin-top: 10px;
  display: none;
}
.contact-stuff form .fields.active, .quote-whole form .fields.active {
  display: flex;
  justify-content: normal;
  align-items: normal;
  flex-flow: column;
  gap: 25px;
}
.contact-stuff form .fields .field, .quote-whole form .fields .field {
  display: flex;
  justify-content: normal;
  align-items: normal;
  flex-flow: column;
  gap: 5px;
}
.contact-stuff form .fields .field .input, .quote-whole form .fields .field .input {
  position: relative;
  display: flex;
  justify-content: normal;
  align-items: normal;
  flex-flow: column;
  gap: 0;
}
.contact-stuff form .fields .field .input label, .quote-whole form .fields .field .input label {
  position: absolute;
  padding: 5px;
  transform: translateY(-50%);
  left: 15px;
  background: var(--bg);
  font-size: 14px;
}
.contact-stuff form .fields .field .input input, .quote-whole form .fields .field .input input, .contact-stuff form .fields .field .input textarea, .quote-whole form .fields .field .input textarea, .contact-stuff form .fields .field .input select, .quote-whole form .fields .field .input select {
  color: var(--text);
  width: 100%;
  padding: 20px;
  background: var(--bg);
  border: 1px solid;
  font-family: "space-grotesk";
  font-size: 1.5rem;
  font-weight: bold;
}
.contact-stuff form .fields .field .input textarea, .quote-whole form .fields .field .input textarea {
  resize: vertical;
}
.contact-stuff form .fields .field .error-msg, .quote-whole form .fields .field .error-msg {
  opacity: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: bold;
  display: flex;
  justify-content: normal;
  align-items: center;
  flex-flow: row;
  gap: 10px;
}
.contact-stuff form .fields .field .error-msg::before, .quote-whole form .fields .field .error-msg::before {
  content: "!";
  width: 20px;
  height: 20px;
  background: var(--white);
  border: 2px solid;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 0;
}
.contact-stuff form .fields .field.error .input label, .quote-whole form .fields .field.error .input label {
  color: crimson;
}
.contact-stuff form .fields .field.error .input input, .quote-whole form .fields .field.error .input input, .contact-stuff form .fields .field.error .input textarea, .quote-whole form .fields .field.error .input textarea {
  border-color: crimson;
  outline-color: crimson;
}
.contact-stuff form .fields .field.error .error-msg, .quote-whole form .fields .field.error .error-msg {
  color: crimson;
  opacity: 1;
}
.contact-stuff form .fields .field.valid .input label, .quote-whole form .fields .field.valid .input label {
  color: goldenrod;
}
.contact-stuff form .fields .field.valid .input input, .quote-whole form .fields .field.valid .input input, .contact-stuff form .fields .field.valid .input textarea, .quote-whole form .fields .field.valid .input textarea {
  border-color: goldenrod;
  outline-color: goldenrod;
}
.contact-stuff form .fields .field.valid .error-msg, .quote-whole form .fields .field.valid .error-msg {
  color: goldenrod;
  opacity: 0;
}
.contact-stuff form .fields > button, .quote-whole form .fields > button, .contact-stuff form .fields input[type=submit], .quote-whole form .fields input[type=submit] {
  cursor: pointer;
  color: var(--bg);
  background: var(--text);
  padding: 10px 20px;
  font: inherit;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 10px;
}
.contact-stuff form .fields > button:hover, .quote-whole form .fields > button:hover, .contact-stuff form .fields input[type=submit]:hover, .quote-whole form .fields input[type=submit]:hover {
  color: var(--bg);
  background: var(--special-link);
  border-color: var(--special-link);
}
.contact-stuff form .fields > button span, .quote-whole form .fields > button span, .contact-stuff form .fields input[type=submit] span, .quote-whole form .fields input[type=submit] span {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 0;
}
.contact-stuff form .fields > button, .quote-whole form .fields > button, .contact-stuff form .fields input[type=submit], .quote-whole form .fields input[type=submit] {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: bold;
}
.contact-stuff form .fields p.phone-par, .quote-whole form .fields p.phone-par {
  display: flex;
  justify-content: normal;
  align-items: center;
  flex-flow: column;
  gap: 20px;
}
.contact-stuff form .fields p.phone-par button, .quote-whole form .fields p.phone-par button, .contact-stuff form .fields p.phone-par a, .quote-whole form .fields p.phone-par a {
  width: 100%;
  cursor: pointer;
  color: var(--bg);
  background: var(--text);
  padding: 10px 20px;
  font: inherit;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 10px;
}
.contact-stuff form .fields p.phone-par button:hover, .quote-whole form .fields p.phone-par button:hover, .contact-stuff form .fields p.phone-par a:hover, .quote-whole form .fields p.phone-par a:hover {
  color: var(--bg);
  background: var(--special-link);
  border-color: var(--special-link);
}
.contact-stuff form .fields p.phone-par button span, .quote-whole form .fields p.phone-par button span, .contact-stuff form .fields p.phone-par a span, .quote-whole form .fields p.phone-par a span {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 0;
}
.contact-stuff form .fields p.phone-par button, .quote-whole form .fields p.phone-par button, .contact-stuff form .fields p.phone-par a, .quote-whole form .fields p.phone-par a {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: bold;
}
@media (min-width: 700px) {
  .contact-stuff, .quote-whole {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row;
    gap: 0;
  }
  .contact-stuff form, .quote-whole form {
    position: static;
    max-width: 500px;
    padding: 30px;
  }
}

.quote-whole form .fields {
  display: flex;
  justify-content: normal;
  align-items: normal;
  flex-flow: column;
  gap: 25px;
}

header {
  position: fixed;
  z-index: 10;
  top: 0;
  right: 0;
  left: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--medium);
  padding: 10px var(--side-p);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 0;
}
header .content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-flow: row;
  gap: 10px;
  max-width: var(--max-w);
}
header .logo {
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 10px;
}
header .logo svg {
  width: 40px;
  height: 40px;
  max-width: 40px;
  max-height: 40px;
  object-fit: contain;
  fill: var(--text);
}
header .logo svg path.shadow {
  fill: var(--text);
}
header .logo svg rect, header .logo svg path.divider {
  stroke: var(--text);
  fill: transparent;
}
header .logo__text {
  display: flex;
  justify-content: normal;
  align-items: start;
  flex-flow: column;
  gap: 0;
}
header .logo__text span {
  font-size: 1.2rem;
}
header .logo__text span:nth-of-type(2) {
  font-size: 14px;
  font-weight: 400;
}
header #checkbox {
  display: none;
}
header .overlay {
  position: fixed;
  z-index: 11;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  transform: translateY(100%);
  transition: all 0.75s;
  background: rgba(0, 0, 0, 0.5);
}
header .hamburger {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 5px;
}
header .hamburger:hover {
  background: rgba(204, 204, 204, 0.2);
}
header .hamburger span {
  width: 25px;
  height: 3px;
  background: var(--text);
}
header nav {
  position: fixed;
  z-index: 12;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 20px var(--side-p);
  background: var(--dark);
  color: var(--bg);
  transition: all 0.5s;
  transform: translateY(100%);
  display: flex;
  justify-content: normal;
  align-items: start;
  flex-flow: column;
  gap: 25px;
}
header nav label {
  cursor: pointer;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  position: relative;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 0;
}
header nav label:hover {
  background: rgba(204, 204, 204, 0.1);
}
header nav label span {
  position: absolute;
  min-width: 25px;
  height: 3px;
  background: var(--bg);
  transform: rotate(45deg);
}
header nav label span:nth-of-type(2) {
  transform: rotate(-45deg);
}
header nav ul {
  list-style: none;
  display: flex;
  justify-content: normal;
  align-items: start;
  flex-flow: column;
  gap: 10px;
}
header nav ul li a, header nav ul li button {
  color: inherit;
  transition: all 0.3s;
  text-decoration: none;
  font: inherit;
  border: none;
  background: transparent;
}
header nav ul li a:hover, header nav ul li button:hover {
  color: var(--special-link);
}
header nav > button {
  cursor: pointer;
  color: inherit;
  background: transparent;
  padding: 10px 20px;
  font: inherit;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 10px;
}
header nav > button:hover {
  color: var(--text);
  background: var(--bg);
  border-color: var(--bg);
}
header nav > button span {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 0;
}
header nav > button svg {
  fill: var(--bg);
}
header nav > button:hover svg {
  fill: var(--text);
}
header nav > button.light .light-mode {
  display: none;
}
header nav > button.light .dark-mode {
  display: block;
}
header nav > button.dark .light-mode {
  display: block;
}
header nav > button.dark .dark-mode {
  display: none;
}
header #checkbox:checked ~ .hamburger {
  opacity: 0;
}
header #checkbox:checked ~ nav {
  transform: translateY(0);
}
header #checkbox:checked ~ .overlay {
  transform: translateY(0);
}
@media (min-width: 700px) {
  header .hamburger, header .overlay {
    display: none;
  }
  header nav {
    padding: 0;
    position: static;
    transform: translateY(0);
    transition: all 0s;
    background: var(--bg);
    color: var(--text);
    display: flex;
    justify-content: right;
    align-items: normal;
    flex-flow: row;
    gap: 20px;
  }
  header nav label {
    display: none;
  }
  header nav ul {
    display: flex;
    justify-content: right;
    align-items: center;
    flex-flow: row;
    gap: 20px;
  }
  header nav ul li a {
    text-transform: capitalize;
  }
  header nav ul li button {
    cursor: pointer;
    color: var(--text);
    background: transparent;
    padding: 10px 20px;
    font: inherit;
    font-size: 15px;
    text-decoration: none;
    border: 1px solid;
    transition: all 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row;
    gap: 10px;
  }
  header nav ul li button:hover {
    color: var(--bg);
    background: var(--text);
    border-color: var(--text);
  }
  header nav ul li button span {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row;
    gap: 0;
  }
  header nav ul li button svg {
    fill: var(--text);
  }
  header nav .theme {
    cursor: pointer;
    color: var(--text);
    background: transparent;
    padding: 10px 20px;
    font: inherit;
    font-size: 15px;
    text-decoration: none;
    border: 1px solid;
    transition: all 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row;
    gap: 10px;
  }
  header nav .theme:hover {
    color: var(--bg);
    background: var(--text);
    border-color: var(--text);
  }
  header nav .theme span {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row;
    gap: 0;
  }
  header nav .theme svg {
    fill: var(--text);
  }
  header nav .theme:hover svg {
    fill: var(--bg);
  }
}

.hero {
  min-height: 400px;
  position: relative;
}
.hero__img, .hero [class*=__img] {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow-x: scroll;
  height: 60dvh;
  display: flex;
  justify-content: normal;
  align-items: normal;
  flex-flow: row;
  gap: 0;
}
@media (max-width: 500px) {
  .hero__img, .hero [class*=__img] {
    min-height: 75dvh;
  }
}
.hero__img::-webkit-scrollbar, .hero [class*=__img]::-webkit-scrollbar {
  display: none;
}
.hero__img img, .hero [class*=__img] img {
  width: 100dvw;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 700px) {
  .hero__img img, .hero [class*=__img] img {
    position: absolute;
    top: 0;
    bottom: 0;
    opacity: 0;
    transform: translateX(-100%);
    transition: all 1.2s ease-in-out;
  }
  .hero__img img:nth-of-type(2n), .hero [class*=__img] img:nth-of-type(2n) {
    transform: translateX(100%);
  }
  .hero__img img.active, .hero [class*=__img] img.active {
    transform: translateX(0);
    opacity: 1;
  }
}
@media (min-width: 700px) {
  .hero__img img, .hero [class*=__img] img {
    position: absolute;
    opacity: 0;
    transform: scale(1.1) translateX(40px);
    transition: opacity 1.2s ease, transform 5s ease;
  }
  .hero__img img:nth-of-type(2n), .hero [class*=__img] img:nth-of-type(2n) {
    transform: scale(1.1) translateX(-40px);
  }
  .hero__img img.active, .hero [class*=__img] img.active {
    transform: scale(1) translateX(0);
    opacity: 1;
  }
}
.hero__content {
  background: rgba(255, 255, 255, 0.8);
  position: absolute;
  z-index: 1;
  bottom: 0;
  margin-right: var(--side-p);
  margin-left: var(--side-p);
  padding: 20px var(--side-p);
  margin-top: 200px;
  transform: translateY(20%);
  color: var(--text-on-bg);
  display: flex;
  justify-content: normal;
  align-items: start;
  flex-flow: column;
  gap: 15px;
}
@media (max-width: 500px) {
  .hero__content {
    right: 0;
    left: 0;
    background: var(--white);
    margin-right: 0;
    margin-left: 0;
  }
}
.hero__content .logo h1 {
  text-transform: uppercase;
}
.hero__content .logo h1 .focus {
  -webkit-text-stroke: 2px var(--text-on-bg);
}
@media (max-width: 500px) {
  .hero__content .logo h1 {
    font-size: 2rem;
  }
}
.hero__content .logo p {
  font-size: 18px;
}
.hero__content .links {
  display: flex;
  justify-content: normal;
  align-items: normal;
  flex-flow: row wrap;
  gap: 10px;
}
.hero__content .links a {
  cursor: pointer;
  color: var(--bg);
  background: var(--text);
  padding: 10px 20px;
  font: inherit;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 10px;
}
.hero__content .links a:hover {
  color: var(--text);
  background: var(--bg);
  border-color: var(--bg);
}
.hero__content .links a span {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 0;
}
.hero__content .links a:hover {
  border: 1px solid var(--text);
}

.find-us-hero {
  margin-top: 50px;
  position: relative;
  display: flex;
  justify-content: normal;
  align-items: normal;
  flex-flow: column;
  gap: 20px;
}
.find-us-hero .wrapper {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: normal;
  align-items: normal;
  flex-flow: column;
  gap: 20px;
}
.find-us-hero__img {
  width: 100%;
  min-height: 60dvh;
  order: -1;
}
.find-us-hero__img iframe {
  display: block;
  width: 100%;
  height: 60dvh;
  border: none;
}
.find-us-hero__content {
  background: rgba(255, 255, 255, 0.8);
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  right: 0;
  margin-right: var(--side-p);
  margin-left: var(--side-p);
  padding: 20px var(--side-p);
  transform: translateY(20%);
  color: var(--text-on-bg);
  display: flex;
  justify-content: normal;
  align-items: start;
  flex-flow: column;
  gap: 15px;
}
.find-us-hero__content h1 {
  font-size: 2rem;
  margin: 0;
}
.find-us-hero__content p {
  margin: 0;
  font-size: 0.95rem;
}
.find-us-hero__content .btns {
  display: flex;
  justify-content: normal;
  align-items: normal;
  flex-flow: row wrap;
  gap: 10px;
  margin-top: 10px;
}
.find-us-hero__content .btns button, .find-us-hero__content .btns a {
  cursor: pointer;
  color: var(--bg);
  background: var(--text);
  padding: 10px 20px;
  font: inherit;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 10px;
}
.find-us-hero__content .btns button:hover, .find-us-hero__content .btns a:hover {
  color: var(--text);
  background: var(--bg);
  border-color: var(--bg);
}
.find-us-hero__content .btns button span, .find-us-hero__content .btns a span {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 0;
}
.find-us-hero__content .btns button:hover, .find-us-hero__content .btns a:hover {
  border: 1px solid var(--text);
}
@media (max-width: 500px) {
  .find-us-hero__content {
    right: 0;
    left: 0;
    background: var(--white);
    margin-right: 0;
    margin-left: 0;
  }
}
@media (min-width: 700px) {
  .find-us-hero {
    min-height: 60dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row;
    gap: 0;
  }
  .find-us-hero .wrapper {
    padding: 0 var(--side-p);
    height: 100%;
    width: 100%;
    max-width: var(--max-w);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row-reverse;
    gap: 50px;
  }
}
@media (min-width: 700px) and (min-width: 1100px) {
  .find-us-hero .wrapper {
    gap: 100px;
    padding: 0;
  }
}
@media (min-width: 700px) {
  .find-us-hero__img {
    flex: 1;
    min-height: auto;
    order: 0;
  }
  .find-us-hero__img iframe {
    height: 100%;
    min-height: 60dvh;
  }
  .find-us-hero__content {
    flex: 1;
    position: static;
    background: transparent;
    margin: 0;
    padding: 0;
    transform: none;
  }
  .find-us-hero__content h1, .find-us-hero__content p {
    color: var(--text);
  }
}

.about {
  margin-top: 100px;
  padding: 20px var(--side-p);
  min-height: 60dvh;
  background: var(--bg);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 20px;
}
.about__content {
  display: flex;
  justify-content: normal;
  align-items: start;
  flex-flow: column;
  gap: 20px;
}
.about__content p {
  line-height: 1.5;
}
.about__content button {
  cursor: pointer;
  color: var(--text);
  background: transparent;
  padding: 10px 20px;
  font: inherit;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 10px;
}
.about__content button:hover {
  color: var(--bg);
  background: var(--text);
  border-color: var(--text);
}
.about__content button span {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 0;
}
.about__content .achievements {
  margin-top: 50px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: normal;
  flex-flow: column;
  gap: 20px;
}
@media (min-width: 500px) {
  .about__content .achievements {
    display: flex;
    justify-content: space-between;
    align-items: normal;
    flex-flow: row wrap;
    gap: 20px;
  }
}
.about__content .achievements > div {
  flex: 1;
  border: 1px solid;
  padding: 20px;
  position: relative;
  border: 2px solid;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 10px;
}
.about__content .achievements > div .bg {
  position: absolute;
  background: var(--white);
  top: 0;
  right: 0;
  left: 0;
  height: 60%;
  overflow: hidden;
  border-bottom: 1px solid var(--medium);
  display: flex;
  justify-content: space-between;
  align-items: normal;
  flex-flow: row wrap;
  gap: 20px;
}
.about__content .achievements > div .bg i {
  transform: translate(50%);
}
.about__content .achievements > div .bg :nth-child(2n) {
  color: var(--medium);
}
.about__content .achievements > div .bg :nth-child(3n) {
  color: var(--special-link);
  transform: translateY(-100%);
}
.about__content .achievements > div .bg :nth-child(4n) {
  color: goldenrod;
  transform: translate(-50%, 20%);
}
.about__content .achievements > div .bg::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: teal;
  opacity: 0.1;
}
.about__content .achievements > div .number {
  border: 2px solid;
  width: 150px;
  height: 150px;
  font-size: 2rem;
  font-family: "space-grotesk";
  font-weight: bold;
  border-radius: 50%;
  z-index: 1;
  background: var(--bg);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 0;
}

.find-us-about {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 0;
}
.find-us-about .wrapper {
  padding: 20px;
  border: 1px solid var(--medium);
  width: 100%;
  max-width: 1200px;
  margin: 70px var(--side-p) 0 var(--side-p);
  display: flex;
  justify-content: space-between;
  align-items: normal;
  flex-flow: row wrap;
  gap: 0;
}
.find-us-about .wrapper > div {
  flex: 1;
  min-width: 200px;
  display: flex;
  justify-content: normal;
  align-items: normal;
  flex-flow: column;
  gap: 10px;
}
.find-us-about .wrapper > div h4 {
  margin-top: 15px;
  padding-bottom: 5px;
  line-height: 1;
  border-bottom: 1px solid var(--medium);
  display: flex;
  justify-content: normal;
  align-items: center;
  flex-flow: row;
  gap: 10px;
}
.find-us-about .wrapper > div h4 i {
  font-size: 1.2rem;
}
.find-us-about .wrapper > div h4 + p {
  padding: 0 10px 0 0;
}

.home-services {
  padding: 50px var(--side-p);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 50px;
}
.home-services__heading {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 15px;
}
.home-services__heading p {
  line-height: 1.6;
}
.home-services__img {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 20px;
}
.home-services__img figure {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 300px;
  max-width: 400px;
  overflow: hidden;
}
.home-services__img figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s;
}
.home-services__img figure img:hover {
  transform: scale(1.2);
}
.home-services__img figure figcaption {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  border: 2px solid var(--dark);
  padding: 20px;
  background: var(--light-white);
  display: flex;
  justify-content: normal;
  align-items: start;
  flex-flow: column;
  gap: 10px;
}
.home-services__img figure figcaption h3 {
  font-size: 1.5rem;
}
.home-services__img figure figcaption button {
  cursor: pointer;
  color: var(--text);
  background: transparent;
  padding: 10px 20px;
  font: inherit;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 10px;
}
.home-services__img figure figcaption button:hover {
  color: var(--bg);
  background: var(--text);
  border-color: var(--text);
}
.home-services__img figure figcaption button span {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 0;
}
.home-services__img a.more {
  width: 100%;
  max-width: 400px;
  min-height: 100%;
  border: 2px solid red;
  cursor: pointer;
  color: var(--text);
  background: transparent;
  padding: 10px 20px;
  font: inherit;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 10px;
}
.home-services__img a.more:hover {
  color: var(--bg);
  background: var(--text);
  border-color: var(--text);
}
.home-services__img a.more span {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 0;
}
.home-services__img a.more button {
  cursor: pointer;
  color: var(--bg);
  background: var(--text);
  padding: 10px 20px;
  font: inherit;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 10px;
}
.home-services__img a.more button:hover {
  color: var(--text);
  background: var(--bg);
  border-color: var(--bg);
}
.home-services__img a.more button span {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 0;
}
@media (min-width: 700px) {
  .home-services__img {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-rows: 100px;
    grid-auto-flow: dense;
  }
  .home-services__img figure {
    grid-row: span 4;
    height: 100%;
    min-width: 100%;
  }
  .home-services__img figure.long {
    grid-row: span 6;
  }
  .home-services__img figure.short {
    grid-row: span 3;
  }
  .home-services__img a.more {
    min-width: 100%;
    grid-row: span 1;
  }
}

.services-hero {
  background: var(--text);
  color: var(--bg);
  min-height: 60dvh;
  padding: 20px var(--side-p);
}
@media (max-width: 500px) {
  .services-hero {
    min-height: 75dvh;
  }
}
.services-hero {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 0;
}
.services-hero__content {
  background: inherit !important;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 15px;
}
.services-hero__content svg {
  width: 70px;
  height: 70px;
  max-width: 70px;
  max-height: 70px;
  object-fit: contain;
  fill: var(--bg);
}
.services-hero__content svg path.shadow {
  fill: var(--bg);
}
.services-hero__content svg rect, .services-hero__content svg path.divider {
  stroke: var(--bg);
  fill: transparent;
}
.services-hero__content h1 {
  font-size: 2rem;
  margin: 0;
}
.services-hero__content p {
  margin: 0;
  line-height: 1.6;
}
.services-hero__content a {
  cursor: pointer;
  color: var(--bg);
  background: var(--text);
  padding: 10px 20px;
  font: inherit;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 10px;
}
.services-hero__content a:hover {
  color: var(--text);
  background: var(--bg);
  border-color: var(--bg);
}
.services-hero__content a span {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 0;
}
.services-hero__content a:hover {
  border: 1px solid var(--text);
}
@media (max-width: 500px) {
  .services-hero__content {
    right: 0;
    left: 0;
    background: var(--white);
    margin-right: 0;
    margin-left: 0;
  }
}

.home-gallery {
  padding: 50px var(--side-p);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 20px;
}
.home-gallery__content {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 20px;
}
.home-gallery__img {
  border: 15px solid #fff;
  outline: 1px solid;
  background: #fff;
  display: flex;
  justify-content: normal;
  align-items: normal;
  flex-flow: row wrap;
  gap: 20px;
}
.home-gallery__img figure {
  flex: 1;
  border: 5px solid;
  width: 100%;
  max-width: 400px;
  overflow: hidden;
}
.home-gallery__img figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s;
}
.home-gallery__img figure img:hover {
  transform: scale(1.2);
}
.home-gallery > a {
  cursor: pointer;
  color: var(--text);
  background: transparent;
  padding: 10px 20px;
  font: inherit;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 10px;
}
.home-gallery > a:hover {
  color: var(--bg);
  background: var(--text);
  border-color: var(--text);
}
.home-gallery > a span {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 0;
}

.gallery-hero {
  width: 100%;
  padding: 20px;
  min-height: 60dvh;
  background: var(--text);
  color: var(--bg);
}
@media (max-width: 500px) {
  .gallery-hero {
    min-height: 75dvh;
  }
}
.gallery-hero .wrapper {
  padding: 0 var(--side-p);
}
.gallery-hero__content {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 10px;
}
.gallery-hero__content svg {
  width: 70px;
  height: 70px;
  max-width: 70px;
  max-height: 70px;
  object-fit: contain;
  fill: var(--bg);
}
.gallery-hero__content svg path.shadow {
  fill: var(--bg);
}
.gallery-hero__content svg rect, .gallery-hero__content svg path.divider {
  stroke: var(--bg);
  fill: transparent;
}
.gallery-hero__content h1 {
  font-size: clamp(2.5rem, 5dvw, 3rem);
}
.gallery-hero__content h2 {
  font-size: clamp(1.5rem, 5dvw, 2rem);
}
.gallery-hero__content a {
  cursor: pointer;
  color: var(--bg);
  background: var(--text);
  padding: 10px 20px;
  font: inherit;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 10px;
}
.gallery-hero__content a:hover {
  color: var(--text);
  background: var(--bg);
  border-color: var(--bg);
}
.gallery-hero__content a span {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 0;
}

.gallery {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 0;
}
.gallery .wrapper {
  width: 100%;
  display: flex;
  justify-content: normal;
  align-items: normal;
  flex-flow: column;
  gap: 20px;
  padding: 100px var(--side-p);
  max-width: var(--max-w);
}
@media (min-width: 1100px) {
  .gallery .wrapper {
    padding: 100px 0;
  }
}
.gallery__filter {
  border-bottom: 1px solid var(--medium);
  padding-bottom: 20px;
  display: flex;
  justify-content: normal;
  align-items: center;
  flex-flow: row wrap;
  gap: 10px;
}
.gallery__filter input[type=checkbox] {
  display: none;
}
.gallery__filter input[type=checkbox]:checked + label {
  background: var(--special-link);
  color: var(--bg);
  border-color: var(--text);
}
.gallery__filter input[type=checkbox]:checked + label::after {
  content: "×";
}
.gallery__filter label {
  cursor: pointer;
  color: var(--text-on-bg);
  background: var(--white);
  padding: 10px 20px;
  font: inherit;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 10px;
}
.gallery__filter label:hover {
  color: var(--bg);
  background: var(--text);
  border-color: var(--text);
}
.gallery__filter label span {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 0;
}
.gallery__filter label {
  padding: 5px 10px;
  font-size: 14px;
  border-radius: 50px;
}
.gallery__img {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 20px;
}
.gallery__img figure {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 300px;
  max-width: 400px;
  overflow: hidden;
}
.gallery__img figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s;
}
.gallery__img figure img:hover {
  transform: scale(1.2);
}
.gallery__img figure figcaption {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  border: 2px solid var(--dark);
  padding: 20px;
  background: var(--light-white);
  display: flex;
  justify-content: normal;
  align-items: start;
  flex-flow: column;
  gap: 10px;
}
.gallery__img figure figcaption h3 {
  font-size: 1.5rem;
}
.gallery__img figure figcaption button, .gallery__img figure figcaption a {
  cursor: pointer;
  color: var(--text);
  background: transparent;
  padding: 10px 20px;
  font: inherit;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 10px;
}
.gallery__img figure figcaption button:hover, .gallery__img figure figcaption a:hover {
  color: var(--bg);
  background: var(--text);
  border-color: var(--text);
}
.gallery__img figure figcaption button span, .gallery__img figure figcaption a span {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 0;
}
.gallery__img a.more {
  width: 100%;
  max-width: 400px;
  min-height: 100%;
  border: 2px solid red;
  cursor: pointer;
  color: var(--text);
  background: transparent;
  padding: 10px 20px;
  font: inherit;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 10px;
}
.gallery__img a.more:hover {
  color: var(--bg);
  background: var(--text);
  border-color: var(--text);
}
.gallery__img a.more span {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 0;
}
.gallery__img a.more button {
  cursor: pointer;
  color: var(--bg);
  background: var(--text);
  padding: 10px 20px;
  font: inherit;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 10px;
}
.gallery__img a.more button:hover {
  color: var(--text);
  background: var(--bg);
  border-color: var(--bg);
}
.gallery__img a.more button span {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 0;
}
@media (min-width: 700px) {
  .gallery__img {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-rows: 100px;
    grid-auto-flow: dense;
  }
  .gallery__img figure {
    grid-row: span 4;
    height: 100%;
    min-width: 100%;
  }
  .gallery__img figure.long {
    grid-row: span 6;
  }
  .gallery__img figure.short {
    grid-row: span 3;
  }
  .gallery__img a.more {
    min-width: 100%;
    grid-row: span 1;
  }
}

.choose {
  padding: 50px var(--side-p);
}
.choose .wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 25px;
}
@media (min-width: 500px) {
  .choose .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row wrap;
    gap: 25px;
  }
}
.choose__img {
  flex: 1;
}
.choose__content {
  flex: 2;
  display: flex;
  justify-content: normal;
  align-items: start;
  flex-flow: column;
  gap: 20px;
}
.choose__content ul {
  list-style: none;
  padding-left: 10px;
  display: flex;
  justify-content: normal;
  align-items: start;
  flex-flow: column;
  gap: 0;
}
.choose__content ul li {
  padding: 0 0 20px 25px;
  position: relative;
  display: flex;
  justify-content: normal;
  align-items: start;
  flex-flow: column;
  gap: 10px;
}
.choose__content ul li:not(:last-of-type) {
  border-left: 1px solid;
}
.choose__content ul li::before {
  content: "✓";
  border: 1px solid;
  width: 25px;
  height: 25px;
  font-weight: 700;
  background: var(--text);
  color: var(--bg);
  border-radius: 50%;
  position: absolute;
  transform: translateX(-50%);
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 0;
}

.faqs {
  padding: 20px var(--side-p);
  min-height: 50dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 20px;
}
.faqs__questions {
  width: 100%;
  max-width: 600px;
  display: flex;
  justify-content: normal;
  align-items: normal;
  flex-flow: column;
  gap: 5px;
}
.faqs__questions details {
  width: 100%;
  transition: all 0.5s;
  display: flex;
  justify-content: normal;
  align-items: normal;
  flex-flow: column;
  gap: 5px;
}
.faqs__questions details a {
  display: inline-block;
  color: #037d92;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid;
}
.faqs__questions details summary {
  border: 1px solid var(--medium);
  padding: 10px;
  outline: none;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-flow: row;
  gap: 10px;
}
.faqs__questions details summary::marker {
  display: none;
}
.faqs__questions details summary svg {
  line-height: 1;
  width: 1.5rem;
  height: 1.5rem;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 0;
}
.faqs__questions details p {
  padding: 10px;
  opacity: 0;
  color: var(--text);
  background: var(--bg);
  transition: all 0.3s;
  line-height: 1.5;
}
.faqs__questions details[open] summary svg {
  transform: rotate(180deg);
}
.faqs__questions details[open] p {
  opacity: 1;
}

.cta {
  position: relative;
  z-index: 2;
  max-width: 500px;
  padding: 20px var(--side-p);
  background: #383030;
  color: var(--bg);
}
@media (min-width: 500px) {
  .cta {
    margin: 0 auto -30px auto;
  }
}
.cta__content {
  color: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 20px;
}
.cta__content .btns {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;
  gap: 10px;
}
.cta__content .btns button, .cta__content .btns a {
  cursor: pointer;
  color: var(--bg);
  background: var(--text);
  padding: 10px 20px;
  font: inherit;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 10px;
}
.cta__content .btns button:hover, .cta__content .btns a:hover {
  color: var(--text);
  background: var(--bg);
  border-color: var(--bg);
}
.cta__content .btns button span, .cta__content .btns a span {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 0;
}

.success-message {
  display: none;
}
.success-message.show {
  position: fixed;
  z-index: 17;
  bottom: 20px;
  right: 20px;
  border: 1px solid;
  padding: 20px;
  background: var(--text);
  color: var(--bg);
  display: flex;
  justify-content: normal;
  align-items: normal;
  flex-flow: row;
  gap: 0;
}
.success-message__text h3 {
  display: flex;
  justify-content: normal;
  align-items: center;
  flex-flow: row;
  gap: 10px;
}
.success-message__text h3 i {
  border: 2px solid;
  border-radius: 50%;
}

footer {
  padding-top: 50px;
  background: var(--text-on-bg);
  color: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 20px;
}
footer .logo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 5px;
}
footer .logo span {
  color: var(--medium);
}
footer .content {
  padding: 20px var(--side-padding) 50px var(--side-p);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 20px;
}
footer .content__group {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 10px;
}
footer .content__group ul {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 15px;
}
footer .content__group ul li a, footer .content__group ul li button {
  text-decoration: none;
  color: var(--medium);
  font: inherit;
  font-weight: 300;
  transition: all 0.3s;
  background: transparent;
  border: none;
}
footer .content__group ul li a:hover, footer .content__group ul li button:hover {
  color: var(--special-link);
}
footer .content .social-icons ul {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;
  gap: 20px;
}
footer .content .social-icons ul a {
  text-decoration: none;
  width: 40px;
  height: 40px;
  border: 1px solid;
  border-radius: 50%;
  color: inherit;
  padding: 10px;
  font-size: 1.5rem;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  gap: 0;
}
footer .content .social-icons ul a:hover {
  color: var(--special-link);
}
footer .copyright {
  width: 100%;
  border-top: 1px solid #363636;
  padding: 20px var(--side-p);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 5px;
}
footer .copyright .attribution {
  font-size: 14px;
  color: var(--medium);
}
footer .copyright .attribution a {
  color: var(--special-link);
}/*# sourceMappingURL=main.css.map */