/* Hamburger Menu */
.hamburger-menu {
  display: block;
  cursor: pointer;
  position: fixed; /* <- Use fixed to keep it visible during scroll */
  top: 20px;
  right: 20px; /* Top-right corner */
  z-index: 9999;
  transition: transform 0.3s ease-in-out;
}

.hamburger-menu i {
  font-size: 3rem;
  color: #7bcdd7;
}

/* Menu (Initially hidden) */
nav.menu {
  display: none;
  position: fixed;
  top: 0;
  right: -300px; /* Start position off the screen */
  background-color: rgba(0, 0, 0, 0.8); /* Transparent dark background */
  color: white;
  width: 180px; /* Width of the sliding menu */
  height: 100%;
  z-index: 9998;
  transition: right 0.3s ease-in-out; /* Smooth transition when sliding in */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end; /* Align items to the right */
  padding-top: 80px; /* Optional: Adjust top padding for proper spacing */
  padding-right: 40px; /* Add padding to the right to match the icon's position */
}

/* Menu is visible */
nav.menu.show {
  right: 0; /* Slide the menu into view */
  display: flex; /* Ensure menu is displayed when shown */
}

/* Remove list dots and align nav links to the right */
nav.menu ul {
  list-style-type: none; /* Remove default list bullets */
  padding: 0; /* Remove any default padding */
  margin: 0; /* Remove any default margin */
  width: 100%; /* Ensure the menu takes full width */
}

/* Align the menu items to the right */
nav.menu ul li {
  text-align: right; /* Align the links to the right */
  width: 100%; /* Ensure each list item takes up the full width of the menu */
}

/* Navigation links (nav-links) */
nav.menu ul li a {
  color: #7bcdd7; /* Initial color of the nav links */
  font-size: 1.3rem; /* Font size for navigation links */
  text-decoration: none; /* Remove underline from links */
  padding: 10px 15px; /* Add padding for better click/touch area */
  transition: transform 0.3s ease; /* Smooth transition for the scaling effect */
  display: block; /* Make the link fill the entire list item */
  width: 100%; /* Ensure the link takes full width */
}

/* Hover effect for nav links */
nav.menu ul li a:hover {
  color: #ffffff; /* Change color on hover */
  transform: scale(1.1); /* Slightly expand the link */
}

/* Active link (when a page is active) */
nav.menu ul li a.active {
  color: #4a90e2; /* Change color for active state */
  font-weight: bold; /* Bold the active link */
}

/* Social media icons in the menu */
.social-icons {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end; /* Keep them aligned to the right */
  gap: 5px; /* Space between icons */
  padding: 10px;
  margin-right: -30px; /* Move the icons to the right */
}

/* Hover effect for social icons */
.social-icons a {
  font-size: 1.3rem;
  color: #7bcdd7;
  transition: transform 0.3s ease, color 0.3s ease; /* Smooth transition for both scaling and color change */
  padding: 0;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  text-decoration: none;
}

.social-icons a:hover {
  transform: scale(1.1); /* Slightly expand the icon on hover */
  color: #ffffff; /* Change color on hover */
}

/* Media Queries for different screen sizes */

/* For large screens */
@media (min-width: 1200px) {
  nav.menu {
    width: 250px; /* Slightly wider menu for large screens */
  }

  .hamburger-menu i {
    font-size: 3.5rem; /* Increase hamburger icon size */
  }
}

/* For medium screens (Tablets and smaller laptops) */
@media (max-width: 1199px) and (min-width: 768px) {
  nav.menu {
    width: 220px; /* Adjust width of menu for medium-sized screens */
  }

  .hamburger-menu i {
    font-size: 2.5rem; /* Adjust icon size for medium screens */
  }

  /* Make the menu align to the center on smaller screens */
  .social-icons {
    margin-right: 0; /* Remove right margin */
    justify-content: center; /* Center icons */
  }
}

/* For smaller screens (Phones) */
@media (max-width: 767px) {
  nav.menu {
    width: 200px; /* Adjust the width for smaller screens */
  }

  .hamburger-menu i {
    font-size: 2rem; /* Adjust hamburger icon size */
  }

  nav.menu ul li a {
    font-size: 1.2rem; /* Reduce font size of nav links for small screens */
  }

  .social-icons {
    margin-top: 20px;
    justify-content: center; /* Center the social media icons */
  }
}

/* For extra small screens (Very small phones or mobile views) */
@media (max-width: 480px) {
  nav.menu {
    width: 180px; /* Narrower menu for very small screens */
  }

  .hamburger-menu i {
    font-size: 1.8rem; /* Smaller hamburger icon size */
  }

  nav.menu ul li a {
    font-size: 1.1rem; /* Further reduce font size for nav links */
  }

  .social-icons a {
    font-size: 1rem; /* Smaller icons for very small screens */
  }
}
@media (max-width: 1024px) {
    .language-switch {
        right: 30px;   /* Less inset on tablets */
        top: 20px;
        font-size: 1.2rem;
    }
}

@media (max-width: 600px) {
    .language-switch {
        right: 15px;   /* Pull closer to edge on phones */
        top: 15px;
        font-size: 1.3rem;
    }
	}