/* Import Fira Code font */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;700&display=swap');
html {
    overflow-x: hidden;
}

body {
  background-color: #ffffff;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  height: auto;
  font-family: 'Fira Code', monospace; /* Already applied but reiterated for clarity */
  line-height: 1.6; /* Improve text readability */
  overflow-x: hidden;
}

#global_nav {
    background-color: #380230d5;
    position: absolute;
    margin: 20px;
    /* Sets font for the navigation */
    font-family: 'Fira Code', monospace;;
    padding: 0px;
    border-radius: 30px;
    border: solid;
    border-color: #00000094;
    border-width: 10px;
    /* Fixes the menu to the top of the screen */
    /* Keeps the menu above other content */
    z-index: 10;
    /* overflow: hidden; Prevents overflow content from being visible*/
    /* transform-origin: top; Sets the origin for any transformations to the top */
    /* Sets initial opacity to fully visible */
    display: flex;
    align-self: center;
  }
  @media (max-width: 768px) {
    #global_nav {
      margin: 5px;
      width: 95%;
      border-width: 5px;
    }
}
  /* Menu styling */
  #global_nav .menu {
    /* Removes default list styling */
    list-style: none;
    padding: 0;
    margin: 0;
  }
  #global_nav .menu .logo{
    border-radius: 20px;
  }
  #donate-button-container{
    list-style: none;
    margin-left: auto;
    padding-top: 10px;

  }
  #global_nav .menu a {
    /* White text color */
    color: white;
    /* Removes underline from links */
    text-decoration: none;
    /* Adds padding around links */
    padding: 10px 20px;
    position: relative;
  }
  .menu{
    display: flex;
    align-items:initial;
  }
  /* Font Awesome icon spacing */
  #global_nav .menu a i {
    /* Adds space to the right of icons */
    margin-right: 8px;
  }
  
  /* Pill underline effect */
  #global_nav .menu .item a::before {
    /* Creates an empty content element */
    content: '';
    position: absolute;
    /* Centers the underline */
    left: 50%;
    /* Positions the underline at the bottom */
    bottom:  -7px;
    /* Sets the height of the underline */
    height: 8px;
    /* Starts with no width for animation effect */
    width: 0;
    /* Sets the color of the underline */
    background-color: #01fc44;
    /* Adds rounded corners */
    border-radius: 10px;
    /* Smooth transition for width and position */
    transition: width 0.3s ease, transform 0.3s ease;
    /* Centers underline horizontally */
    transform: translateX(-50%);
    z-index: 1001;
  }
  
  #global_nav .menu a:hover::before,
  #global_nav .menu .active > a::before {
    /* Expands underline to full width on hover or active */
    width: 50%;
  }
  
  
  .submenu .subitem a {
    /* White text color for submenu items */
    color: rgb(3, 3, 3);
    /* Adds padding around submenu items */
    padding: 8px 20px;
    /* Block display for full clickable area */
    display: block;
  }
  
  /* Show submenu with slide-down effect when .submenu-active is added */
  .has-submenu.submenu-active .submenu {
    display: block;
    /* Applies slide-down animation */
    animation: slideDown 0.4s ease forwards;
  }
  
  /* Apply the slide-down animation */
  .submenu-active .submenu {
    display: block;
    /* Makes submenu visible */
    visibility: visible;
    /* Slide-down animation */
    animation: slideDown 0.4s ease forwards;
  }
  
  /* Apply the slide-up animation */
  .submenu-hide .submenu {
    display: block;
    /* Slide-up animation */
    animation: slideUp 0.4s ease forwards;
    /* Keeps the final state of the animation */
    animation-fill-mode: forwards;
  }
  
  .specialHoverEffect:hover{
    transition: 0.2s;
    transform: rotate(-15deg);
  }
  .special_hover_effect{
    animation: rotateSlideDown 0.4s; 
  }
  
  /* Hide burger menu icon on desktop */
  .menu-toggle {
    /* Hidden on desktop */
    display: none;
  }
  
  /* Mobile menu */
  .menu {
    display: flex;
    /* Allows items to wrap on small screens */
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
  
  .menu li a {
    display: block;
    /* Full width for clickable area */
    width: 100%;
  }
  
  .toggle {
    /* Sets toggle button to span full width */
    flex: 1;
    /* Aligns toggle to the right */
    text-align: right;
    /* Orders toggle first in flex layout */
    order: 1;
    /* Increases toggle font size */
    font-size: 20px;
  }
  
  /* Base styles for mobile menu */
  .menu {
    display: flex;
    /* Allows items to wrap on mobile */
    
    justify-content: space-between;
    align-items: center;
    /* Stacks menu items vertically */
    flex-direction: column;
  }
  
  .menu li a {
    display: block;
    /* Full width for clickable area */
    width: 100%;
  }
  
  .toggle {
    /* Orders toggle button first */
    order: 1;
    /* Sets font size */
    font-size: 20px;
    /* Pointer cursor for interactivity */
    cursor: pointer;
  }
  
  .item {
    /* Orders items last */
    order: 3;
    /* Full width for each item */
    width: 100%;
    /* Centers text in each item */
    text-align: center;
    /* Hidden by default */
    display: none;
  }
  
  .active .item {
    /* Displays items when active */
    display: block;
  }
  
  .button.secondary {
    /* Bottom border for secondary button */
    border-bottom: 1px #444 solid;
  }
  
  /* Submenu styles */
  .submenu {
    /* Hidden by default */
    display: none;
  }
  
  .submenu-active .submenu {
    /* Displays submenu when active */
    display: block;
  }
  
  .has-submenu > a::after {
    /* Font family for submenu indicator */
    font-family: "Font Awesome 5 Free";
    /* Sets icon size */
    font-size: 12px;
    line-height: 16px;
    /* Sets font weight for the icon */
    font-weight: 900;
    /* Font Awesome down arrow icon */
    content: "\f078";
    color: #ff0000;
    /* Adds spacing to left of icon */
    padding-left: 5px;
  }
  
  .subitem a {
    /* Padding for submenu items */
    padding: 10px 15px;
    text-decoration: none;
  }
  .item a:hover{
    color: rgb(238, 219, 219) !important;
    font-weight: bold;
    text-shadow: #d8d2d2b6 !important;
  }
  
  .submenu-active {
    /* Rounds submenu corners */
    border-radius: 3px;
    position: relative;
  }
  
  /* Desktop menu styles */
  @media (min-width: 768px) {
    .menu {
      /* Sets horizontal layout on desktop */
      flex-direction: row;
    }
    .toggle {
      /* Hides toggle button on desktop */
      display: none;
    }
    .item {
      /* Displays items on desktop */
      display: block;
      /* Sets width for desktop layout */
      width: auto;
      /* Resets order for desktop */
      order: initial;
    } 
    .submenu {
      /* Positions submenu relative to parent item */
      position: absolute;
      /* Sets dark background for submenu */
      /* Rounds corners of submenu */
      border-radius: 10px;
      list-style-type: none;
    }
    .submenu-active .submenu {
      /* Displays submenu when active */
      display: block;
     
    }
  }
  #burger{
    position: absolute;
    left: -15px;
    top: 57px;
  }
.email-input {
  width: 165px;
  height: 25px;
  font-size: 14px;
  padding-left: 10px;
  border: 1px solid #ccc;
  border-radius: 30px;
  outline: none;
  transition: border-color 0.3s ease;
}

.email-input:focus {
  border-color: #00ff5e;
}

.subscribe-button {
  width: 130px;
  height: 30px;
  padding: 5px 15px;
  font-size: 14px;
  color: white;
  background-color: #039241;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-align: center;
}

.subscribe-button:hover {
  background-color: #3cff00;
  color: #000000;
}
#users{
  margin: 10px;
}

/* Tooltip style */
.tooltip {
  display: none; /* Hidden by default */
  position: absolute;
  background-color: #000000a8;
  color: #9c9797;
  padding: 8px;
  border-radius: 5px;
  font-size: 12px;
  z-index: 1001;
  top: 5px; /* Adjust as needed */
  left: 5px; /* Adjust as needed */
  white-space: nowrap;
}
.tooltip a{
 color: #fff4f4;
}
.blogs-profile-picture {
  position: relative; /* To position the tooltip within */
}
.custom-tooltip {
  position:absolute;
  z-index: -1;
  bottom: 10px;
  background-color: #00000000;
  color: #dfe8dd00;
  padding: 8px;
  border-radius: 5px;
  font-size: 12px;
  white-space: normal;  /* Allows text wrapping */
  width: 200px;         /* Set a fixed or max width */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
/* Free download Button Styling */
.blogs-download {
  display: none;
  position: absolute;
  text-align: center;
  width: 30px;
  height: 30px;
  bottom: 0px;
  right: 10px;
  padding: 5px 5px;
  color: #f30000;
  background-color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  border-radius: 30px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  z-index: 12;
  font-size: 17px;
}

.blogs-download:hover {
  transform: scale(1.05);
}
.blog-tag-button {
 background-color: #151515;  
 color: rgb(97, 94, 94);
 border: none;
 border-radius: 5px;
 padding: 5px 10px;
 font-size: 0.9em;
 cursor: pointer;
 transition: background-color 0.3s ease;
}

.blog-tag-button:hover {
 background-color: #434040;  
 color: rgb(172, 168, 168);
}