/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Hanlding Updates
-----------------------------------------------------------------*/

/* Base structure for the list */
/* Target the links inside your navbar */
@media (max-width: 768px) { 
  nav.primary-menu {
    display: flex;
    flex-direction: column; /* Stacks the menu items vertically */
  }
}																				
/* .navbar-nav .nav-link {
  display: inline-block;
  padding: 10px 20px !important; /* Adds inner space to create the button shape */
  margin: 5px 8px; /* Adds space *between* the buttons */
  background-color: #f0f0f0; /* Default button background color */
  color: #333 !important; /* Text color */
  border-radius: 30px; /* Makes the edges rounded/pill-shaped */
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease; /* Smooth transition for hover effects */
  
  /* Adds a subtle 3D depth shadow */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); 
}

/* Hover Effect: When the user hovers over any button */
.navbar-nav .nav-link:hover {
  background-color: #007bff; /* Changes to a vibrant blue on hover */
  color: #fff !important; /* Changes text to white */
  transform: translateY(-2px); /* Moves up slightly for a physical "clicky" feel */
  box-shadow: 0 6px 12px rgba(0, 123, 255, 0.2); /* Soft blue glow shadow */
}

/* Active State: Styling for the current page/section link */
.navbar-nav .nav-link.active {
  background-color: #007bff; /* Keeps the active button highlighted blue */
  color: #fff !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); /* Inset shadow makes it look "pressed" */
} */
.social-icons {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 12px; /* Spaces out the icons nicely */
}

/* Base style for the icon links to make them round and 3D */
.social-icons li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff !important; /* Forces the inner icon to be white */
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
  
  /* Realism: Adds a subtle depth/shadow */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15), 
              inset 0 -3px 0 rgba(0, 0, 0, 0.2); 
  position: relative;
  top: 0;
}

/* Hover Effect: Makes them feel interactive and tactile */
.social-icons li a:hover {
  top: -3px; /* Moves up slightly on hover */
  box-shadow: 0 7px 14px rgba(0, 0, 0, 0.25), 
              inset 0 -3px 0 rgba(0, 0, 0, 0.2);
  filter: brightness(1.1); /* Slight glow effect */
}

/* --- Brand Specific Colors & Gradients --- */

/* Facebook: Classic Deep Blue */
.social-icons-facebook a {
  background: #1877F2;
}

/* Telegram: Bright Gradient Sky Blue */
.social-icons-telegram a {
  background: linear-gradient(135deg, #2EA6DA 0%, #2481CC 100%);
}

/* WhatsApp: Vibrant Android Green */
.social-icons-whatsapp a {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
}

/* GitHub: Sleek Dark / Charcoal Metallic */
.social-icons-github a {
  background: linear-gradient(135deg, #444444 0%, #222222 100%);
}
.floating-social-icons {
    position: fixed !important;
    right: 20px;            /* Distance from the right edge */
    top: 70%;               /* Move down to the middle of the screen */
    transform: translateY(-50%); /* Perfectly center it vertically */
    z-index: 9999;          /* Keep it above all other elements */
    flex-direction: column; /* Stack the icons vertically instead of horizontally */
    gap: 10px;              /* Spacing between the icons */
}