/* ------------------------- Fonts -------------------------------------------------- */

@font-face {
   font-family: 'Switzer';
   src: url('../fonts/Switzer-Light.ttf') format('truetype');
   font-weight: 300;
   font-style: normal;
   font-display: auto;
}

@font-face {
   font-family: 'Switzer';
   src: url('../fonts/Switzer-Regular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
   font-display: auto;
}

@font-face {
   font-family: 'Switzer';
   src: url('../fonts/Switzer-Italic.ttf') format('truetype');
   font-weight: 400;
   font-style: italic;
   font-display: auto;
}

@font-face {
   font-family: 'Switzer';
   src: url('../fonts/Switzer-Medium.ttf') format('truetype');
   font-weight: 500;
   font-style: normal;
   font-display: auto;
}

@font-face {
   font-family: 'Switzer';
   src: url('../fonts/Switzer-Semibold.ttf') format('truetype');
   font-weight: 600;
   font-style: normal;
   font-display: auto;
}

@font-face {
   font-family: 'Times New Roman';
   src: url('../fonts/TimesNewRoman-Italic.ttf') format('truetype');
   font-weight: 400;
   font-style: italic;
   font-display: auto;
}




/* ------------------------- Colors -------------------------------------------------- */

:root {

   --color-black-rgb: 0, 0, 0;
   --color-black: rgba(var(--color-black-rgb), 1);
   --color-dark-rgb: 39, 78, 80;
   --color-dark: rgba(var(--color-dark-rgb), 1);
   --color-dark-medium: #274e50;
   --color-dark-light: #8F8C79;

   --color-white-rgb: 255, 255, 255;
   --color-white: rgba(var(--color-white-rgb), 1);
   --color-light-rgb: 245, 242, 239;
   --color-light: rgba(var(--color-light-rgb), 1);
   --color-light-medium: #E5E0DC;
   --color-light-dark: #D2CBC6;
   --color-portrait-back: #D0C7BE;

   --color-primary: var(--color-dark-light);
   --color-secondary: #E34248;

   --color-alert-error: var(--color-secondary);
   --color-alert-success: #26ad6a;

   --color-text: rgba(var(--color-dark-rgb), 0.7);
   --color-text-light: rgba(var(--color-light-rgb), 0.7);

   --color-border: rgba(var(--color-dark-rgb), 0.15);
   --color-border-light: rgba(var(--color-light-rgb), 0.2);

   --animation-primary: .5s cubic-bezier(.3, 1, .3, 1);
   --animation-nav: .5s cubic-bezier(.6, 0, .4, 1);
   --animation-smooth: .5s cubic-bezier(.7, 0, .3, 1);

   --section-padding: min(15vh, 15em);
   --section-padding-medium: min(10vh, 10em);
   --section-padding-small: min(7.5vh, 7.5em);
   --container-padding: min(10vw, 10em);
   --gap-padding: clamp(1em, 4vw, 2.5em);
   --gap-padding-big: clamp(1em, 8vw, 8em);

   --title-size: min(5vw, 5em);

   --border-radius: clamp(1em, 1.5vw, 1.5em);
   --border-radius-medium: calc(clamp(1em, 1.5vw, 1.5em) * 1.5);
   --border-radius-small: calc(clamp(1em, 1.5vw, 1.5em) * 0.5);

}

@media screen and (max-width: 1024px) {
   :root {
      --container-padding: 7.5vw;
      --title-size: 7.5vw;
      --section-padding: max(2.5em, calc(5vw + 5vh));
      --section-padding-medium: max(1.75em, calc(3.5vw + 3.5vh));
      --section-padding-small: max(1.25em, calc(2vw + 2vh));
   }
}

@media screen and (max-width: 720px) {
   :root {
      --container-padding: clamp(1em, 4vw, 2.5em);
      --title-size: 10vw;
   }
}

@media screen and (max-width: 540px) {
   :root {
      --title-size: 12.5vw;
      --border-radius-small: var(--border-radius);
      --border-radius-medium: calc(var(--border-radius) * 1.5);

      --section-padding: max(3em, 7.5vh);
      --section-padding-medium: max(2.25em, 6.25vh);
      --section-padding-small: max(1.5em, 5vh);
   }
}


/* ------------------------- Body -------------------------------------------------- */

*,
*:after,
*:before {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

li,
ul {
   padding: 0;
   margin: 0;
   list-style: none;
}

body {
   -webkit-font-smoothing: antialiased;
   font-family: 'Switzer', sans-serif;
   color: var(--color-text);
   line-height: 1.6;
   font-weight: 400;
   font-style: normal;
   font-size: 16px;
   font-size: clamp(16px, 1.2vw, 19px);
   background-color: var(--color-light);
}

html,
body {
   width: 100%;
   -webkit-font-smoothing: antialiased;
   position: relative;
   background-color: var(--color-light);
}

/* Selection */
::selection {
   background-color: var(--color-primary);
   color: var(--color-light);
   text-shadow: none;
}

::-moz-selection {
   background-color: var(--color-primary);
   color: var(--color-light);
   text-shadow: none;
}

/* General */
canvas, img, video {
   max-width: 100%;
   height: auto;
   box-sizing: border-box;
}

svg {
   max-width: none;
   height: auto;
   box-sizing: border-box;
}

audio, canvas, iframe, img, svg, video {
   vertical-align: middle;
}

/* ------------------------- Typography -------------------------------------------------- */

h1, h2, h3, h4, h5, h6, p, a, li, ul, ol, span, strong, em {
   padding: 0;
   margin: 0;
   font-style: normal;
   font-weight: 400;
   letter-spacing: normal;
}

h1 {
   font-family: 'Switzer', sans-serif;
   font-weight: 500;
   font-style: normal;
   font-size: calc(var(--title-size) * 1);
   line-height: 1.1;
   color: var(--color-dark);
}

@media screen and (max-width: 540px) {
   h1 {
      font-size: calc(var(--title-size) * 0.9);
   }
}

h1.small {
   font-size: calc(var(--title-size) * 0.7);
}

h2 {
   font-family: 'Switzer', sans-serif;
   font-weight: 400;
   font-style: normal;
   font-size: calc(var(--title-size) * 0.55);
   line-height: 1.15;
   color: var(--color-dark);
}

h2.big {
   font-size: calc(var(--title-size) * 0.65);
}

h2.strong {
   font-weight: 500;
}

h3 {
   font-family: 'Switzer', sans-serif;
   font-weight: 500;
   font-style: normal;
   font-size: calc(var(--title-size) * 0.4);
   line-height: 1.2;
   color: var(--color-dark);
}

h3.small,
.styled-content :is(h1, h2, h3, h4, h5, h6) {
   font-family: 'Switzer', sans-serif;
   font-weight: 500;
   font-style: normal;
   font-size: calc(var(--title-size) * 0.325);
   line-height: 1.2;
   color: var(--color-dark); 
}

@media screen and (max-width: 540px) {
   h3.small,
   .styled-content :is(h1, h2, h3, h4, h5, h6) {
      font-size: calc(var(--title-size) * 0.45);
   }
}

h4 {
   font-family: 'Switzer', sans-serif;
   font-weight: 500;
   font-style: normal;
   font-size: max(1.2em, calc(var(--title-size) * 0.275));
   line-height: 1.2;
   color: var(--color-dark);
}

h4.colored,
.theme-dark h4.colored {
   color: var(--color-dark-light);
}

.theme-dark :is(h1, h2, h3, h4) {
   color: var(--color-light);
}


p {
   font-family: 'Switzer', sans-serif;
   font-weight: 400;
   font-style: normal;
   font-size: 1em;
   line-height: 1.66;
   margin-bottom: 0;
   color: var(--color-text);
}

.styled-content p {
   margin-bottom: 1em;
}

.styled-content p:last-child {
   margin-bottom: 0;
} 

.theme-dark p {
   color: var(--color-text-light);
}

p.big {
   font-size: 1.15em;
   font-weight: 400;
}

p.small {
   font-size: 0.85em;
   font-weight: 400;
}

p.tiny {
   font-size: 0.75em;
   font-weight: 400;
}

@media screen and (max-width: 540px) {
   p.big {
      font-size: 1.05em;
      line-height: 1.5;
   }
}

a {
   color: var(--color-primary);
   text-decoration: none;
}

p a {
   position: relative;
   transition: color var(--animation-primary);
}

p a::after {
   content: "";
   width: 100%;
   height: 1px;
   background-color: var(--color-primary);
   bottom: -.1em;
   position: absolute;
   left: 0;
   transform: scaleX(0);
   transform-origin: right;
   transition: transform var(--animation-primary);
}

@media (hover: hover) {

   p a:hover::after {
      transform: scaleX(1);
      transform-origin: left;
   }

}

strong {
   font-weight: 500;
   color: var(--color-dark);
}

.theme-dark strong {
   color: var(--color-light);
}

h1 em, h2 em, h3 em, h4 em, .times {
   font-family: 'Times New Roman', Times, serif;
   font-weight: 400;
   font-style: italic;
   font-size: 1.19em;
   line-height: 0.75em;
}

em {
   font-style: italic;
}


/* ------------------------- Main Elements -------------------------------------------------- */

.section {
   display: block;
   padding-top: var(--section-padding);
   padding-bottom: var(--section-padding);
   position: relative;
   background-color: var(--color-light);
}

.section-wrap {
   display: block;
   padding-top: 0;
   padding-bottom: 0;
   position: relative;
}

.theme-dark.section,
.theme-nonav-dark.section,
.theme-dark.section-wrap,
.theme-nonav-dark.section-wrap {
   background-color: var(--color-dark);
}

.theme-dark-medium.section,
.theme-nonav-dark-medium.section,
.theme-dark-medium.section-wrap,
.theme-nonav-dark-medium.section-wrap {
   background-color: var(--color-dark-medium);
}

.theme-light-medium.section,
.theme-nonav-light-medium.section,
.theme-light-medium.section-wrap,
.theme-nonav-light-medium.section-wrap {
   background-color: var(--color-light-medium);
}

.theme-light.section,
.theme-nonav-light.section,
.theme-light.section-wrap,
.theme-nonav-light.section-wrap {
   background-color: var(--color-light);
}

.section.full-height {
   min-height: 100vh;
   display: flex;
   align-items: center;
}

.section.no-padding {
   padding-top: unset;
   padding-bottom: unset;
}

.container {
   margin: 0 auto;
   padding-left: var(--container-padding);
   padding-right: var(--container-padding);
   max-width: 100em;
}

.container.large {
   padding-left: var(--gap-padding);
   padding-right: var(--gap-padding);
}

.container.medium {
   padding-left: calc(var(--container-padding) * 1.75);
   padding-right: calc(var(--container-padding) * 1.75);
}

.container.small {
   padding-left: calc(var(--container-padding) * 2.5);
   padding-right: calc(var(--container-padding) * 2.5);
}

.container.no-padding {
   padding-left: unset;
   padding-right: unset;
}

.row {
   display: flex;
   flex-wrap: wrap;
   position: relative;
}

.row.no-flex {
   display: block;
}

.row.no-wrap {
   flex-wrap: nowrap;
}

.flex-col {
   display: block;
   width: 100%;
   order: 2;
   position: relative;
}

.overlay {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
}

img.overlay,
video.overlay {
   object-fit: cover;
}

svg {
   width: 100%;
}

.line {
   display: block;
   width: 100%;
   height: 1px;
   background-color: var(--color-border);
   margin-top: var(--gap-padding);
   margin-bottom: var(--gap-padding);
}

.theme-dark .line {
   background-color: var(--color-border-light);
}

.stripe {
   display: block;
   width: 100%;
   height: 1px;
   background-color: var(--color-border);
}

.theme-dark .stripe {
   background-color: var(--color-border-light);
}

.no-select {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

@media screen and (max-width: 540px) {

   .section.full-height {
      min-height: 100vh;
      min-height: calc(var(--vh, 1vh) * 100);
   }

   .container.medium,
   .container.small {
      padding-left: var(--container-padding);
      padding-right: var(--container-padding);
   }
}

/* ------------------------- Main -------------------------------------------------- */

main {
   box-sizing: border-box;
   overflow: hidden;
   width: 100vw;
   position: fixed;
   height: 100%;
   background: var(--color-dark-medium);
   display: block;
}

.main-wrap {
   box-sizing: border-box;
   width: 100vw;
   will-change: transform;
   position: fixed;
   display: block;
}

main.touch {
   position: relative;
   height: auto;
}

main.touch .main-wrap {
   position: relative;
}

@media screen and (max-width: 1024px) {
   main {
      position: relative;
   }

   .main-wrap {
      position: relative;
   }
}

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

.btn-row {
   width: 100%;
   position: relative;
   display: flex;
   gap: 1em;
}

.btn {
   cursor: pointer;
   border: 0;
   background: transparent;
   padding: 0;
   font-size: 1em;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   text-decoration: none;
   outline: 0;
   border-radius: 1000em;
   white-space: nowrap;
}

.btn-content {
   position: relative;
   height: 3.75em;
   transform: translateX(-3.75em) rotate(0.001deg);
   transition: transform var(--animation-primary);
}

.btn-fill {
   background: var(--color-light-medium);
   position: absolute;
   width: 100%;
   height: 100%;
   border-radius: 2.125em;
   top: 0;
   left: 0;
}

.theme-dark .btn-fill {
   background: #343434;
}

.btn-text {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   padding: 0 2em;
   font-size: 400;
   position: relative;
   color: var(--color-dark-medium);
   border-radius: 1000em;
}

.btn-text span {
   transition: var(--animation-primary);
}

.theme-dark .btn-text {
   color: var(--color-light-medium);
}

.btn .arrow {
   transition: transform var(--animation-primary);
}

.btn .arrow.first {
   transform: scale(0) rotate(0.001deg);
   transform-origin: left;
}

.btn .arrow.second {
   position: absolute;
   z-index: 2;
   right: 0;
   transform: scale(1) rotate(0.001deg);
   transform-origin: right;
}

.btn .arrow.first .arrow-fill {
   background: var(--color-secondary);
   border: 0;
}

.btn .arrow.first .arrow-content {
   color: var(--color-light);
}

/* --- Hover--- */

@media (hover: hover) {

   .btn:hover .arrow .arrow-content {
      transform: rotate(-45deg);
   }

   .btn:hover .arrow.first {
      transform: scale(1) rotate(0.001deg);
   }

   .btn:hover .arrow.second {
      transform: scale(0) rotate(0.001deg);
   }

   .btn:hover .btn-content {
      transform: translateX(0em) rotate(0.001deg);
   }

}

@media screen and (max-width: 540px) {
   .btn-content {
      height: 3.25em;
      transform: translateX(-3.25em) rotate(0.001deg);
   }

   .btn .arrow {
      height: 3.25em;
      width: 3.25em;
   }

   .btn-text {
      padding: 0 1.5em;
   }

   .btn-text span {
      font-size: 0.9em;
   }
}


/* --- Small --- */

.btn-small .btn-content {
   height: 2em;
   transform: translateX(-2em) rotate(0.001deg);
}

.btn-small .btn-text {
   padding: 0 0.5em;
}

.btn-small .btn-fill {
   background: transparent;
}

.btn-small .btn-text span {
   font-size: 0.85em;
}

/* --- Hover--- */

.btn-small .arrow .arrow-content {
   transform: rotate(-45deg);
}

@media (hover: hover) {

   .btn-small:hover .btn-content {
      transform: translateX(0em) rotate(0.001deg);
   }

}

/* --- Small Flipped --- */

.btn-small.flipped .arrow .arrow-content {
   transform: rotate(0deg);
}

.btn-small.flipped .arrow.first {
   transform: scale(1) rotate(0.001deg);
}

.btn-small.flipped .arrow.second {
   transform: scale(0) rotate(0.001deg);
}

@media (hover: hover) {

   .btn-small.flipped:hover .arrow.first {
      transform: scale(0) rotate(0.001deg);
   }

   .btn-small.flipped:hover .arrow.second {
      transform: scale(1) rotate(0.001deg);
   }

}

.btn-small.flipped .btn-content {
   transform: translateX(0em) rotate(0.001deg);
}

@media (hover: hover) {

   .btn-small.flipped:hover .btn-content {
      transform: translateX(-2em) rotate(0.001deg);
   }

}

.btn-small.flipped .arrow.first .arrow-fill {
   border: 1px solid var(--color-border);
   background: transparent;
}

.theme-dark .btn-small.flipped .arrow.first .arrow-fill {
   border: 1px solid var(--color-border-light);
}

.btn-small.flipped.negative span,
.btn-small.flipped.positive span {
   padding-left: 0.5em;
   font-size: 0.85em;
   color: var(--color-light);
   opacity: 1;
   transition: var(--animation-primary);
}

.btn-small.flipped .arrow.second {
   right: unset;
   left: 0;
}

.btn-small.flipped.negative .arrow.second .arrow-fill {
   border: 0;
   background: var(--color-secondary);
}

.btn-small.flipped.positive .arrow.second .arrow-fill {
   border: 0;
   background: var(--color-alert-success);
}

.btn-small.flipped .arrow.first .arrow-content {
   color: var(--color-dark);
}

.theme-dark .btn-small.flipped .arrow.first .arrow-content {
   color: var(--color-light);
}

.btn-small.flipped .arrow.second .arrow-content {
   color: var(--color-light);
}

/* --- Link --- */

.btn-link .btn-content {
   transform: translateX(0) rotate(0.001deg);
}

.btn-link .btn-content .btn-text {
   padding: 0;
}

.btn-link .btn-content::after {
   content: "";
   bottom: 0;
   width: 100%;
   left: 0;
   height: 1px;
   background: var(--color-secondary);
   position: absolute;
   transform: rotate(0.001deg) scaleX(0);
   transition: transform var(--animation-primary);
   transform-origin: right;
}

@media (hover: hover) {

   .btn-link:hover .btn-content::after {
      transform: rotate(0.001deg) scaleX(1);
      transform-origin: left;
   }

   .btn-link:hover span {
      opacity: .66;
   }

}

/* --- Link Tiny --- */

.btn-tiny .btn-content {
   height: 1.5em;
}

.btn-tiny .btn-text span {
   font-size: 0.75em;
}

/* Button Arrow */

button.btn-arrow {
   border: 0;
   outline: 0;
   padding: 0;
   transform: rotate(0.001deg) scale(1);
   transition: var(--animation-primary);
}

button.btn-arrow[disabled] {
   transform: rotate(0.001deg) scale(0);
}

button.btn-arrow.btn-prev .arrow .arrow-content {
   transform: scaleX(-1) rotate(-45deg);
}

button.btn-arrow.btn-next .arrow .arrow-content {
   transform: rotate(-45deg);
}

/* --- Icon --- */

.btn-icon {
   height: 2em;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.25em;
}

.btn-icon .icon {
   height: 1.5em;
   aspect-ratio: 1/1;
   display: flex;
   align-items: center;
   justify-content: center;
}

.btn-icon .icon svg {
   width: 100%;
}

.btn-icon .icon svg path {
   stroke: var(--color-secondary);
   stroke-width: 1.25px;
}

.btn-icon span {
   color: var(--color-text);
   font-size: 1em;
   transition: var(--animation-primary);
}

@media (hover: hover) {

   .btn-icon:hover span {
      opacity: .6;
   }
}

/* --- Scroll --- */

.btn-scroll span {
   padding-right: 0.5em;
   font-size: 0.85em;
   color: var(--color-light);
   opacity: 1;
   transition: var(--animation-primary);
}

.btn-scroll .arrow-wrap {
   position: relative;
   transform: rotate(90deg);
}

.btn-scroll .arrow .arrow-content {
   transform: rotate(-45deg);
}

.btn-scroll:hover .arrow .arrow-content {
   transform: rotate(-45deg);
}

.btn-scroll .arrow.second .arrow-fill {
   background: var(--color-light);
}

.btn-scroll .arrow.second .arrow-content {
   color: var(--color-dark-medium);
}

@media (hover: hover) {

   .btn-scroll:hover span {
      opacity: 0.6;
   }

}


/* ------------------------- Social Icons -------------------------------------------------- */

.s-icon {
   position: relative;
   overflow: hidden;
   width: 1.75em;
   height: 1.75em;
   margin-right: .15em;
   margin-left: .15em;
   border-radius: 50%;
   background-color: var(--primary);
   transition: var(--animation-primary);
   display: block;
   float: left;
}

.s-icon .s-icon-wrap {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(0.0001deg);
   width: 65%;
   transition: var(--animation-primary);
}

.s-icon .s-icon-wrap svg {
   display: block;
   width: 100%;
}

.s-icon .s-icon-wrap svg path {
   fill: var(--color-dark);
   transition: var(--animation-primary);
}

.s-icon:hover {
   background: var(--color-primary);
   cursor: pointer;
}

.s-icon:hover svg path {
   fill: var(--color-light);
}


/* ------------------------- Color Box -------------------------------------------------- */

.color-box {
   width: calc(33.333% - 1.333em);
   background: var(--primary-dark);
   font-weight: 500;
   color: var(--white);
   margin-right: 2em;
   margin-top: 2em;
}

.color-box:nth-child(3),
.color-box:nth-child(6) {
   margin-right: 0;
}

.color-box:before {
   content: "";
   display: block;
   padding-top: 40%;
}

.color-box .overlay {
   padding: 1em;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
}

.color-box:nth-child(1) {
   background: var(--color-dark);
   color: var(--color-light);
}

.color-box:nth-child(2) {
   background: var(--color-dark-medium);
   color: var(--color-light);
}

.color-box:nth-child(3) {
   background: var(--color-dark-light);
   color: var(--color-light);
}

.color-box:nth-child(4) {
   background: var(--color-light);
   box-shadow: inset 0 0 0 1px var(--color-border);
}

.color-box:nth-child(5) {
   background: var(--color-light-medium);
   box-shadow: inset 0 0 0 1px var(--color-border);
}

.color-box:nth-child(6) {
   background: var(--color-light-dark);
   box-shadow: inset 0 0 0 1px var(--color-border);
}


@media screen and (max-width: 1000px) {
   .color-box {
      width: calc(50% - 1em);
   }

   .color-box:nth-child(3),
   .color-box:nth-child(6) {
      margin-right: 2em;
   }

   .color-box:nth-child(even) {
      margin-right: 0;
   }
}

@media screen and (max-width: 720px) {
   .color-box {
      width: 100%;
   }

   .color-box:nth-child(even),
   .color-box:nth-child(odd) {
      margin-right: 0;
   }
}

/* ------------------------- Form -------------------------------------------------- */

.form {
   width: 100%;
   display: block;
}

.styled-form {
   width: 100%;
   display: flex;
   flex-direction: column;
   position: relative;
   background: #274e50;
   border-radius: 0.5em;
   padding: calc(var(--gap-padding) + 0.25em) var(--gap-padding) var(--gap-padding) var(--gap-padding);
   gap: 1.25em;
}

.hidden-field,
.website-field {
   position: absolute;
   left: -9999px;
}

.styled-form input,
.styled-form textarea,
.styled-form select {
   border: 0;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
}

.styled-form .form-col {
   display: flex;
   flex-direction: column;
   width: 100%;
   align-items: flex-start;
}

.styled-form .form-col :is(input, textarea) {
   appearance: none;
   -moz-appearance: none;
   -webkit-appearance: none;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
   width: 100%;
   padding: 0.75em 0 1em 0;
   border: 0;
   border-bottom: 1px solid var(--color-border-light);
   border-radius: 0;
   font-weight: 400;
   font-size: 0.9em;
   color: var(--color-white);
   display: block;
   background: transparent;
}

.styled-form .form-col > :is(input, textarea):focus {
   outline: 0;
   outline-width: 1px !important;
   outline-offset: 0px;
   border-radius: 0;
   border-bottom: 1px solid rgba(var(--color-light-rgb), 0.5);
}

.styled-form .form-col :is(input, textarea)::placeholder {
   color: rgba(var(--color-light-rgb), 0.5);
   font-weight: 400;
}

.styled-form .form-col input {
   line-height: 1em;
}

.styled-form .form-col textarea {
   min-height: 10em;
   resize: vertical;
}

.styled-form .form-col label {
   width: 100%;
   margin-bottom: 0;
   color: var(--color-light);
   font-size: .75em;
   font-weight: 400;
   line-height: 0.75em;
}

.styled-form .form-col abbr {
   color: var(--color-alert-error);
   font-weight: 400;
   text-decoration: none;
   border-bottom: 0;
   font-size: 1.2em;
}

/* --- Upload --- */

.styled-form .upload {
   width: 100%;
   border: 1px dashed rgba(var(--color-light-rgb), 0.2);
   border-radius: 0.25em;
   position: relative;
   display: flex;
   gap: 0.5em;
   padding: 0.75em;
   align-items: center;
   cursor: pointer;
}

.styled-form .upload .file-icon {
   width: 1.5em;
   height: 1.5em;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-shrink: 0;
   cursor: pointer;
}

.styled-form .upload .file-icon svg {
   width: 100%;
}

.styled-form .upload .file-icon svg path {
   stroke: var(--color-light);
   stroke-width: 1px;
}

.styled-form .upload input {
   opacity: 0;
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   cursor: pointer;
   z-index: 2;
}

.styled-form .upload span {
   color: var(--color-text-light);
   font-size: 0.75em;
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   line-clamp: 1;
   transition: var(--animation-primary);
}

.styled-form .upload:hover span {
   opacity: 0.66;
} 

/* --- Submit Button --- */

.styled-form .btn {
   margin-left: -0.5em;
}

.styled-form .btn input {
   opacity: 0;
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   cursor: pointer;
}

.styled-form .btn .btn-text {
   color: var(--color-light);
}

.styled-form .btn .arrow .arrow-fill {
   background: var(--color-secondary);
}

.styled-form .btn .arrow.border .arrow-content {
   color: var(--color-light);
}


/* --- Alert Options --- */

.alert {
   padding: .4em .5em .6em .5em;
   border: 0;
   background-color: var(--color-alert-error);
   text-align: center;
   border-radius: 0.25em;
   line-height: 1em;
}

.alert span {
   color: var(--color-light);
   font-size: .75em;
   font-weight: 500;
}

.alert-success {
   background-color: var(--color-alert-success);
}

/* --- Alert In Form Col --- */

.styled-form .form-col .alert {
   padding: 0;
   text-align: left;
   margin-top: 0.25em;
   background: transparent;
}

.styled-form .form-col .alert span {
   color: var(--color-alert-error);
   font-size: 0.7em;
}

/* --- Outofill reset --- */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
   -webkit-text-fill-color: var(--color-light);
   -webkit-box-shadow: 0 0 0px 1000px var(--color-dark) inset;
   box-shadow: 0 0 0px 1000px var(--color-dark) inset;
   transition: background-color 5000s ease-in-out 0s;
}

input[type=radio] {
   -webkit-appearance: none;
}

@media screen and (max-width: 1024px){
   .styled-form {
      padding: calc(var(--section-padding-medium) + 0.25em) var(--gap-padding) var(--section-padding-medium) var(--gap-padding);
      gap: 1.5em;
   }
}