/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 5rem;


  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --color-green: #25685D;
  --color-gray: #8B8B8B;
  --color-white: #FFFFFF;
  --color-cadetblue: #80ada0;
  --container-color: #FFFFFF;
  --border-color: hsl(230, 25%, 80%);

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --font: "cairo", sans-serif;
  --h2-font-size: 1.25rem;
  --normal-font-size: .938rem;

  /*========== Font weight ==========*/
  --font-regular: 400;
  --font-medium: 500;
  --font-semi-bold: 600;

  /*========== z index ==========*/
  --z-fixed: 100;
  --z-modal: 1000;
}

/*========== Responsive typography ==========*/
@media screen and (min-width: 1023px) {
    :root {
      --h2-font-size: 1.5rem;
      --normal-font-size: 1rem;
    }
} 



/*=============== BASE ===============*/
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  
  html {
    scroll-behavior: smooth;
  }
  textarea,
  body,
  input,
  button {
    font-family: var(--font);
    font-size: var(--normal-font-size);
  }
  
  body {
    background-color: var(--color-white);
    color: var(--color-gray);
  }
  textarea,
  input,
  button {
    border: none;
    outline: none;
  }
  
  ul {
    list-style: none;
  }
  
  a {
    text-decoration: none;
  }
  
  img {
    display: block;
    max-width: 100%;
    height: auto;
  }
  
/*=============== BREAKPOINTS ===============*/
/* For medium devices */
@media screen and (min-width: 576px) {
    .login {
      padding-top: 10rem;
    }
    .login__close {
      width: max-content;
      top: 5rem;
      left: 0;
      right: 0;
      margin-inline: auto;
      font-size: 2rem;
    }
  
    .login__form {
      max-width: 400px;
      margin-inline: auto;
    }
  }
  
  /* For large devices */
  @media screen and (min-width: 1023px) {
    .nav {
      height: calc(var(--header-height));
      column-gap: 3rem;
    }
    .nav__close, 
    .nav__toggle {
      display: none;
    }
    .nav__menu {
      margin-left: auto;
    }
    .nav__list {
      flex-direction: row;
      column-gap: 3rem;
    }
  
    .login__form {
      padding: 3rem 2rem 3.5rem;
    }
  }
  
  @media screen and (min-width: 1150px) {
    .container {
      margin-inline: auto;
    }
  }