html,
body {
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body {
  /* Night Sky background */
  display: flex !important; /* Use flexbox to center content vertically and horizontally */
  flex-direction: column !important; /* Ensure the body takes up the full height of the viewport */
  background: url(./Backround/Mountain_Sky.jpg) no-repeat center center fixed !important;
  font-size: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 100vh !important;
  background-size: cover !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  image-rendering: -webkit-optimize-contrast !important; /* Enhance image quality */
  image-rendering: high-quality !important; /* Ensure high-quality rendering */
}

h3 {
  color: white !important;
  text-shadow: 2px 2px 8px rgb(0, 0, 0, 0.9); /* Add a subtle shadow to make the text stand out against the background */
  font-size: bold !important;
  text-align: center !important;
}

.hero {
  height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.hero-text {
  color: #ffcc00;
  text-shadow:
    0 0 30px #ff0055,
    0 0 40px #ff0055,
    0 0 80px #ff0055;
  font-size: 4rem;
  font-weight: 200;
}

.tech-stack-icons {
  width: 400px;
  height: auto;
  transition: 0.5s;
  display: block;
  margin: 20px auto;
  filter: brightness(2.5) drop-shadow(0 0 10px rgba(255, 255, 255, 0.3)); /* Add a subtle glow effect to the icons */
}

.tech-icons {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: transparent;
  text-align: center;
  padding-bottom: 20px;
  z-index: 1000;
  margin-top: 50px;
  text-align: center;
  padding: 40px 0;
}

.tech-stack-icon {
  width: 50px !important;
  height: auto !important;
  margin: 0 20px !important;
  opacity: 0.8 !important;
  transition: 0.3s !important;
}

.tech-stack-icon:hover {
  opacity: 1 !important;
  transform: scale(1.2) !important;
}

.tech-stack-container {
  background: rgb(255, 255, 255, 0.2) !important; /* Add a semi-transparent background to enhance visibility of icons */
  backdrop-filter: blur(3px) !important; /* Add a blur effect to the background for better contrast */
  border-radius: 50px !important; /* Round the corners of the container */
  padding: 10px 0 !important; /* Add vertical padding for better spacing */
  width: fit-content !important; /* Adjust width to fit the content */
  margin: auto auto 20px !important; /* Center the container horizontally and add bottom margin */
}

.nav-link {
  color: white !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  text-shadow:
    0 0 10px rgb(255, 255, 255, 0.6),
    0 0 20px rgb(255, 255, 255, 0.4) !important; /* Add a subtle glow effect to the navigation links */
  transition: 0.3s ease-in-out !important;
}

.nav-link:hover {
  color: #ff4d4d !important; /* Change color on hover for better interactivity */
  text-shadow: 0 0 15px !important; /* Enhance glow effect on hover */
  transform: translateY(-2px) !important; /* Add a slight lift effect on hover */
}

.navbar {
  background: rgb(0, 0, 0, 0.5);
  backdrop-filter: blur(3px) !important; /* Add a blur effect to the navbar background for better contrast */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* Add a subtle border to separate the navbar from the content */
}

.navbar-toggler {
  background-color: #c72b2bd0 !important; /* Add a semi-transparent background to the navbar toggler for better visibility */
  backdrop-filter: blur(5px) !important; /* Add a blur effect to the toggler background for better contrast */
  border: 1px solid rgb(255, 255, 255, 0.4) !important; /* Add a subtle border to the toggler for better definition */
  padding: 0.5rem !important; /* Adjust padding for better clickability */
  outline: none !important; /* Remove default outline for better aesthetics */
}

.card:hover {
  transform: translateY(-5px) !important; /* Add a lift effect on hover */
  transition: 0.3s ease-in-out !important; /* Smooth transition for the hover effect */
  border-color: #0dcaf0 !important; /* Change border color on hover for better interactivity */
}