@import url(../fonts/stylesheet.css);
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Univers Light Condensed';
  color: white;
  background: #424042; }

.wrapper {
  width: 92%;
  margin: 0 auto; }

header {
  padding: 3rem 0 1.5rem; }
  header .links {
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: end; }
    header .links .link {
      color: white;
      text-transform: uppercase;
      margin-left: 4rem;
      font-size: 1.5rem; }
      header .links .link a {
        color: white;
        text-decoration: none;
        bordeR-bottom: 1px solid transparent;
        transition: all 0.3s; }
        header .links .link a:hover {
          border-color: white; }
    @media screen and (max-width: 990px) {
      header .links {
        justify-content: center; }
        header .links .link {
          margin: 0 1rem; } }
  @media screen and (max-width: 990px) {
    header .logo {
      display: block;
      margin: 0 auto 2rem; } }

.main-content {
  position: relative;
  height: calc(100vh - 155px);
  display: flex;
  align-items: center; }

.background-image {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0%;
  left: 0%; }
  .background-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1;
    object-fit: cover; }

.content {
  width: 45%;
  background: rgba(66, 64, 66, 0.8);
  padding: 4rem 1.5rem;
  position: relative;
  z-index: 1; }
  @media screen and (max-width: 1400px) {
    .content {
      width: 50%; } }
  @media screen and (max-width: 1200px) {
    .content {
      width: 70%; } }
  @media screen and (max-width: 990px) {
    .content {
      width: 100%; } }

h1 {
  text-transform: uppercase;
  font-size: 5rem;
  line-height: 4.3rem; }
  @media screen and (max-width: 990px) {
    h1 {
      font-size: 3.5rem;
      line-height: 3.3rem; } }

h2 {
  text-transform: uppercase; }

p {
  text-transform: uppercase;
  font-size: 1.4rem;
  line-height: 1.5rem; }

.seperator {
  display: block;
  background: white;
  height: 8px;
  width: 40%;
  margin: 1.5rem 0 1rem; }

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
  position: relative; }
  .form-signin .checkbox {
    font-weight: 400; }
  .form-signin .form-floating:focus-within {
    z-index: 2; }
  .form-signin input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0; }
  .form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0; }

.bring-to-front {
  position: relative;
  z-index: 9; }

.modal .modal-content {
  background: rgba(66, 64, 66, 0.9);
  border-radius: 0; }

.modal .close-modal {
  position: absolute;
  right: 1.6rem;
  top: 1.8rem;
  background: none;
  border: none;
  color: white;
  font-size: 1.8rem; }

.modal .modal-body {
  padding: 2rem; }

.contact-form {
  position: relative; }
  .contact-form .form-group {
    position: relative; }
  .contact-form input, .contact-form textarea {
    text-transform: uppercase;
    border: none;
    font-size: 1.2rem;
    width: 100%;
    padding: 5px 10px 5px;
    border: 2px solid white;
    background: none;
    border-radius: 0;
    color: white; }
    .contact-form input::placeholder, .contact-form textarea::placeholder {
      color: white; }
    .contact-form input:focus, .contact-form textarea:focus {
      outline: none; }

.btn-contact {
  background: none;
  text-transform: uppercase;
  color: #fff;
  padding: 0.2rem 1.5rem;
  border-radius: 0;
  font-size: 1.2rem;
  text-transform: uppercase;
  border: 2px solid white; }
  .btn-contact:hover, .btn-contact:focus {
    border: 2px solid #000;
    color: #000; }

.form-group {
  position: relative; }

label.error {
  color: red;
  padding: 0 0.2rem;
  text-transform: uppercase;
  font-size: 0.8rem; }