@import url('https://fonts.googleapis.com/css2?family=Poppins: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&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

* {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
     font-family: "Poppins", sans-serif;
}

.max-container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 4px;
}


.menu-btn .bar {
     transition: transform .28s ease, opacity .28s ease;
     transform-origin: center;
}

.menu-btn.open .bar-1 {
     transform: translateY(8px) rotate(45deg);
}

.menu-btn.open .bar-2 {
     opacity: 0;
     transform: scaleX(0);
}

.menu-btn.open .bar-3 {
     transform: translateY(-8px) rotate(-45deg);
}



@media (max-width: 1260px) {

     .max-container {
          max-width: 1200px;
          margin: 0 80px;
          padding: 0 4px;
     }

}

@media (max-width: 768px) {

     .max-container {
          max-width: 1200px;
          margin: 0 50px;
          padding: 0 4px;
     }

}

@media (max-width: 596px) {

     .max-container {
          max-width: 1200px;
          margin: 0 16px;
     }

}