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

body {
  font-family: 'Poppins', sans-serif; /* Apply Poppins font to the entire body */
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 10%;
  color: #030027;
  background-color: rgb(145, 179, 190);
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  align-items: center;
  padding-top: 20px; /* Add space at the top */
}

.navbar-logo {
  width: 80%; /* Adjust the width of the logo to fit the navbar */
  height: auto;
  margin-bottom: 20px; /* Add some space between the logo and the links */
}

.navbar ul {
  list-style-type: none;
  width: 100%; /* Ensure the list takes up the full width */
}

.navbar ul li {
  margin: 20px 0;
}

.navbar ul li a {
  color: #030027;
  text-decoration: none;
  font-size: 18px;
  display: block;
  text-align: center;
  padding: 10px 0;
  width: 100%;
  font-family: 'Poppins', sans-serif; /* Apply Poppins font to links */
  font-weight: 600; /* Ensure it is using SemiBold */
}

.navbar ul li a:hover {
  background-color: #81a5c2;
  transition: background-color ease-in-out .3s;
}

/* Icon links are hidden on larger screens */
.icon-link {
  display: none;
  width: 24px;
  height: 24px;
  margin: auto;
}

/* Text links are displayed by default */
.text-link {
  display: inline-block;
}

/* Media query for mobile devices */
@media (max-width: 768px) {
  /* Hide text links on small screens */
  .text-link {
    display: none;
  }

  /* Show icons on small screens */
  .icon-link {
    display: inline-block;
  }

  .icon-link:hover {
    opacity: 0.8; /* Add hover effect for icons */
    transition: opacity 0.3s;
  }
}