header {
  width: 100%;
  padding: 2.5em 0 0 0;
  margin-bottom: 1em;
  font-family: "barlow condensed"; }
  header .header {
    display: flex; }
  header nav,
  header ul {
    align-items: center;
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    list-style: none; }
    header nav a,
    header ul a {
      text-decoration: none;
      color: var(--DarkBlue); }
      header nav a:hover,
      header ul a:hover {
        border-bottom: 1px solid var(--DarkBlue); }
    header nav li,
    header ul li {
      padding-left: 2em; }
    header nav .hamburguer,
    header ul .hamburguer {
      display: none; }
    header nav .login,
    header ul .login {
      padding-left: 6em; }
      header nav .login a,
      header ul .login a {
        color: var(--GrayishBlue); }
        header nav .login a:hover,
        header ul .login a:hover {
          border-bottom: 1px solid var(--GrayishBlue); }

@media screen and (max-width: 768px) {
  header nav .hamburguer {
    display: flex; }
    header nav .hamburguer:hover {
      cursor: pointer; }
  header nav ul {
    display: none; }
    header nav ul li,
    header nav ul .login {
      padding: 1em 0; }
    header nav ul .login {
      padding-top: 2.5em; }
    header nav ul.displayedHeader {
      display: block;
      position: absolute;
      text-align: center;
      top: 6em;
      margin: 0 auto;
      width: 80%;
      height: 18em;
      z-index: 10;
      background-color: var(--LightGrayishBlue);
      box-shadow: 4px 4px 50px 1px rgba(0, 0, 0, 0.44); } }

.mainSection {
  overflow: hidden; }
  .mainSection button:hover {
    cursor: pointer;
    opacity: 0.75; }
  .mainSection h1 {
    font-family: 'Barlow condensed';
    font-weight: 700;
    font-size: 3em;
    color: var(--DarkBlue);
    margin-top: .19em; }
  .mainSection h4 {
    color: var(--DarkGrayishBlue);
    font-weight: normal;
    margin-top: 1.4em; }
  .mainSection span {
    font-size: .8em;
    color: var(--GrayishBlue); }
  .mainSection .mainSectionGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 30em;
    grid-template-areas: "left image";
    gap: 2em;
    position: relative;
    align-items: center; }
    .mainSection .mainSectionGrid .mainImage {
      grid-area: image;
      right: -24em;
      position: absolute; }
    .mainSection .mainSectionGrid .leftInfo {
      grid-area: left; }
  .mainSection .sheduleButton {
    font-size: .8em;
    font-family: "Barlow condensed";
    font-weight: bold;
    color: var(--LightGrayishBlue);
    padding: .8em 2.3em;
    border-radius: 5px;
    outline: none;
    border: none;
    background-color: var(--Red);
    margin-top: 2.3em;
    margin-right: .8em; }
  .mainSection .newButton {
    background-color: var(--DarkBlue);
    color: #FFF;
    border: none;
    border-radius: 50px;
    outline: none;
    padding: .3em .7em;
    font-weight: bold;
    margin-right: 1em; }

@media screen and (max-width: 768px) {
  .mainSection .mainSectionGrid {
    grid-auto-flow: column;
    grid-template-areas: "image"
 "left";
    grid-template-columns: 1fr; }
    .mainSection .mainSectionGrid .mainImage {
      position: absolute;
      right: -13em; }
      .mainSection .mainSectionGrid .mainImage img {
        height: 260px; } }

:root {
  --Red: hsl(0, 100%, 68%);
  --DarkBlue: hsl(230, 29%, 20%);
  --DarkGrayishBlue: hsl(230, 11%, 40%);
  --GrayishBlue: hsl(231, 7%, 65%);
  --LightGrayishBlue: hsl(207, 33%, 95%); }

.container {
  width: 75%;
  margin: auto; }

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box; }

body {
  font-size: 18px;
  font-family: 'Barlow', sans-serif; }

@media screen and (max-width: 768px) {
  body {
    font-size: 16px; } }