@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

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

/* 1. Apply to body, not just html */
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Optional: Makes fonts look crisper */
  -webkit-font-smoothing: antialiased;
  /* 2. Force form elements to inherit the font */
  -moz-osx-font-smoothing: grayscale;
}

input,
button,
textarea,
select {
  font-family: inherit;
}

/* makes this element display none from 800px of higher */
@media(min-width:800px) {
  .nav-link-container-small {
    display: none !important;
  }

  .fa-x,
  .fa-bars {
    display: none;
  }
}


/*media queries from 1059px or less 
  max-width from 1059px or less
*/

@media(max-width:1050px) {
  header {
    background-color: yellow;
  }

}

/*media queries from 992px or less 
  max-width from 992px or less
  show the hamburger
*/

@media(max-width:992px) {
  header {
    background-color: rgb(39, 39, 113);
  }
}


/*media queries from 800px or less 
  max-width from 800px or less
  show the hamburger
*/
@media(max-width:800px) {

  header {
    background-color: rgb(118, 118, 214);
  }

  nav {
    grid-template-areas:
      "navbar    logo    .";
  }

  .nav-link-container {
    display: none;
  }

  .logo-container {
    /* border: 1px solid red; */
    height: 100%;
    padding-left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .image-logo {
    width: 100%;
    height: 80px;
  }

  .swiper {
    position: relative;
  }

  .nav-link-container-small {
    /* border: 2px solid #000; */
    z-index: 1000;
    position: absolute;
    height: max-content;
    margin: 10px 0 0 10px;
  }

  /* .link1-small {
    border: 1px solid #000;
    padding: 0 12px;
    margin: 2px 0;
  }

  .link2-small {
    border: 1px solid #000;
    padding: 0 12px;
    margin: 2px 0;
  }

  .link3-small {
    border: 1px solid #000;
    padding: 0 12px;
    margin: 2px 0;
  }

  .link4-small {
    border: 1px solid #000;
    padding: 0 12px;
    margin: 2px 0;
  } */


  .nav-link-container-small-container {
    border: 2px solid #000;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    height: inherit;
    justify-content: center;
    align-items: center;
    padding: 5px ;
  }

  .icon-container {
    /* border: 1px solid #000; */
    padding-left: 10px;
  }

  .fa-bars,
  .fa-x {
    /* size of humburger icon  */
    font-size: 20px;
  }


  .fa-x,
  .nav-link-container-small {
    display: none;
  }

  .active {
    display: block;
  }

  .unactive {
    display: none;
  }
}