* {
  margin: 0;
  padding: 0;
  gap: 0;
}

.hader {
  height: 60px;
  width: 100%;
  border-bottom: 2px solid white;
  background-color: aliceblue;
  display: flex;
  align-items: center;
  background-image: linear-gradient(to right, rgb(236, 107, 176), rgb(55, 55, 165));
  position: fixed;
  z-index: 70; /* on top */
}

.logo {
  height: 50px;
  width: 7rem;
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO32d8J6UvpWmqZjeEHRBBTBEovPYv7F523K9C-kp5Wz-gcfFYBiaN15M75c41Q-VZKy9QwjTw5HaoH87Xe35uxqhP9Q-y7JO6k-K0TfRw5Tg3zYHHtQvyA5aAynJje8Cw2Buy5djsqqfJSwcZD5RiSIK2kq4y2ICDUFu1wVzorgjRflyY1_dQyrAzfVTd/s798/Gemini_Generated_Image_q3cp2iq3cp2iq3cp-removebg-preview.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Hide hamburger on big screens */
@media screen and (min-width: 1100px) {
  .mobsidebar0 {
    display: none;
  }
}

/* Show hamburger on smaller screens */
@media screen and (max-width: 1099px) {
  /* REMOVE the fixed height/width from .mobsidebar0 */
.mobsidebar0 {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background: none;
}

/* Optional hover scaling */
.mobsidebar0 i {
  transition: transform 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mobsidebar0 img:hover {
  transform: scale(1.1);
}

#toggleBtn {
  transition: transform 0.4s ease;
}

#toggleBtn:active {
  transform: rotate(180deg) scale(1.1);
}

/* Show/hide SVGs */
.icon-hidden {
  display: none;
}
.icon-visible {
  display: block;
}



}