@tailwind base;
@tailwind components;
@tailwind utilities;


  @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,500&family=Open+Sans&display=swap');
*{
    font-family: 'Nunito Sans', sans-serif;
}
.img-bg1{
  background-image: url('./img/img1.svg');
  background-size: cover;
}
.img-bg2{
  background-image: url('./img/img2.svg');
  background-size: cover;
}
.hamburger{
  cursor:pointer;
  width:24px;
  height:24px;
  transition:all 0.25s;
  position:relative;
}
.hamburger-top,
.hamburger-middle,
.hamburger-bottom {
  position:absolute;
  top:0;
  left:0;
  width:24px;
  height:2px;
  background: black;
  transform:rotate(0);
  transition:all 0.5s;
}
.hamburger-middle{
  transform:translateY(7px);
}
.hamburger-bottom{
  transform:translateY(14px);
}
.open{
  transform:rotate(90deg);
  transform:translateY(0px);

}
.open .hamburger-top{
  transform: rotate(45deg) translateY(6px) translate(6px);
}
.open .hamburger-middle{
  display:none;
}
.open .hamburger-bottom{
  transform: rotate(-45deg) translateY(6px) translate(-6px);
}