@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

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

:root {
    --Red: hsl(0, 100%, 68%);
    --Very-Dark-Blue: hsl(230, 29%, 20%);
    --Dark-Grayish-Blue: hsl(230, 11%, 40%);
    --Grayish-Blue: hsl(231, 7%, 65%);
    --Light-Grayish-Blue: hsl(207, 33%, 95%);
    --Black: hsl(0, 0%, 0%);
    --fs-400: 1.125rem;

    --inner-inline-margin: 2rem;
    --header-height: 6.25rem;
    --img-height: 14.6875rem;
    --logo-size: 1.4375rem;
    --fs-700: clamp(2.5rem, 4vw + 1.5rem, 4rem);
}

body {
    font-family: 'Barlow', sans-serif;
    font-size: var(--fs-400);
    margin: 0;
}

a {
    text-decoration: none;
    color: black;
  }
  button{
    font-family: 'Barlow Condensed', sans-serif;
  }
  
  
  /* --------  background styles  -------- */
  
  .container {
    max-width: calc(90rem - 2 * var(--inner-inline-margin));
    padding: 0 var(--inner-inline-margin);
    position: relative;
    z-index: 0;
    overflow: hidden;
  
  }

  .bg {
    position: absolute;
    width: 49%;
    height: min(55%, 26.875rem);
    right: 0;
    top: 0;
    background-color: var(--Light-Grayish-Blue);
    border-bottom-left-radius: 4rem;
    z-index: -2;
  }
  
  /* --------  header styles  -------- */
  
  /* flex container */
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    min-height: var(--header-height);
    margin-bottom: 1.5rem;
  }

  .header .menu-icon{
    width: 1.5rem;
    height: 1.25rem;
    background-image: url(./images/icon-hamburger.svg);
    background-position: center;
    background-repeat:  no-repeat;
    background-size: 100%;
  }

  .header .menu-icon.show {
    background-image: url(./images/icon-close.svg);
  }

  .header .logo {
    width: var(--logo-size);
  }

  .header .nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    position: absolute;
    top: 100%;
    width: 100%;
    min-height: 0;
    opacity: 0;
    z-index: 10;
    background-color: #fff;
  }

  .header .nav a{
    font-size: .875rem;
  }

  .header .nav.show {
    display: flex;
    animation: showMenu .5s ease forwards;
  }

  .header .nav .separator {
    width: 90%;
    height: -.0313rem;
    background-color: var(--Grayish-Blue);
  }

  @keyframes showMenu {
    to {
      opacity: 1;
      min-height: 14.375rem;
    }
  }
  
  .header .nav a {
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--Very-Dark-Blue);
  }

  .header .nav a:hover {
    text-decoration: underline;
  }

  .header .nav a.login {
    color: var(--Grayish-Blue);
  }
  
  
  /* --------  main styles  -------- */
  
  main {
    background-color: transparent;
    display: flex;
    flex-direction: column-reverse;
    row-gap: clamp(3.125rem, 4.0625rem + 1vw, 4.6875rem);
  }

  main .hero {
    min-height: calc(100vh - var(--header-height));
  }
  
  main .img-container .hero-img {
    position: relative;
    right: 1.4375rem;
    top: -0.3125rem;
    height: var(--img-height);
  
  }
  
  main .hero .new {
    text-wrap: nowrap;
    display: flex;
    align-items: center;
    letter-spacing: .2813rem;
    text-transform: uppercase;
    column-gap: 1rem;
    font-size: 1rem;
    margin-block: 0.25rem;
    color: var(--Grayish-Blue);
  }

  main .hero .new span {
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .0625rem;
    color: white;
    background-color: var(--Very-Dark-Blue);
    font-weight: 700;
    min-width: 2.9375rem;
    height: 1.5625rem;
    border-radius: .9375rem;
  }

  main .hero h1 {
    text-transform: uppercase;
    font-size: var(--fs-700);
    margin-block: 1rem 1.1rem;
    line-height: 100%;
    color: var(--Very-Dark-Blue);
    min-width: 13ch;
  }

  main .hero .details {
    max-width: 31ch;
    font-size: 1.25rem;
    letter-spacing: .0625rem;
    margin-block: 0.25rem 2rem;
    line-height: 113%;
    color: var(--Very-Dark-Blue);
  }

  main .hero .cta {
    display: flex;
    align-items: center;
    column-gap: 1.125rem;
  }

  main .hero .cta button {
    cursor: pointer;
    padding-inline: 1.4375rem;
    padding-block: .875rem .75rem;
    font-size: .75rem;
    letter-spacing: .125rem;
    border-radius: 0.25rem;
    background-color: var(--Red);
    border: none;
    color: white;
    font-weight: 700;
    text-transform: uppercase;
  }

  main .hero .cta button:hover{
    opacity: .75;
  }

  main .hero .cta p {
    margin-block: 0;
    text-transform: uppercase;
    letter-spacing: .125rem;
    color: var(--Grayish-Blue);
    font-size: .875rem;
  }
  
  /* --------  media queries  -------- */
  
  @media screen and (max-width: 23.125rem) {
    :root {
      --inner-inline-margin: 0.9375rem;
      --img-height: 12.8125rem;
    }

    main .hero{
      min-width: revert;
    }

    main .hero h1 {
      font-size: 2.125rem;
    }
    
    main .hero .cta p{
      letter-spacing: .0625rem;
    }

    main .hero .cta button {
      letter-spacing: .0625rem;
      padding-inline: .75rem;
    }
  }

  @media screen and (min-width: 27.5rem) {
    :root {
      --inner-inline-margin: 3rem;
      --img-height: 17.8125rem;
    }
  }

  @media screen and (min-width: 33.75rem) {
    :root {
      --inner-inline-margin: 4rem;
      --img-height: 20.9375rem;
    }
  }
  
  @media screen and (min-width: 40rem) {
    :root {
      --inner-inline-margin: 5rem;
      --img-height: 23.4375rem;
    }
  }
  
  @media screen and (min-width: 45rem) {
    :root {
      --inner-inline-margin: 2.5rem;
      --header-height: 10rem;
      --logo-size: revert;
    }

    .header {
      margin-bottom: 5.875rem;
    }
    
    main {
      flex-direction: revert;
    }

    main .img-container .hero-img {
      left: revert;
      right: -4.0625rem;
    }
  }

  @media screen and (min-width: 56.25rem) {
    main .img-container .hero-img {
      right: -11.5625rem;
    }

    .header .menu-icon{
      display: none;
    }

    .header .nav,
    .header .nav.show{
      display: flex;
      justify-content: space-between;
      column-gap: 2.6875rem;
      position: revert;
      width: revert;
      min-height: revert;
      opacity: revert;
      flex-direction: revert;
      background-color: revert;
    }
    
    .header .nav a{
      letter-spacing: 0.0344rem;
    }

    .header .nav .separator{
      width: .3125rem;
      height: .3125rem;
      border-radius: 50%;
    }
  }

  @media screen and (min-width: 68.75rem) {
    main .img-container .hero-img {
      height: 25.125rem;
      right: -14rem;
    }
  }

  @media screen and (min-width: 87.5rem) {
    :root {
      --inner-inline-margin: 10.25rem;
    }

    main .hero{
      min-width: 30rem;
    }

    main .hero h1 {
      max-width: 17ch;
      margin-bottom: 2rem;
    }

    main .img-container .hero-img {
      height: 28.875rem;
      right: -6.5rem;
      top: -2.75rem;
    }

    main .hero .details{
      margin-block: 0.25rem 4.375rem;
    }
    
    main .hero .cta {
      gap: 1.625rem;
    }

    main .hero .cta button{
      padding-inline: 2.0625rem;
      padding-block: 1.0625rem 0.9375rem;
      font-size: 0.875rem;
    }

    main .hero .cta p {
      letter-spacing: 0.3125rem;
    }
  }

  @media screen and (min-width: 90.0625rem) {
    .container{
      --max-width: calc(90rem - 2 * var(--inner-inline-margin));
      padding: 0 calc((100vw - var(--max-width)) / 2);
    }
  }