/* Mobile view styling */
.navbar-menu {
    display: none; /* Hide by default */
    position: absolute;
    top: 100%; /* Position below the navbar */
    left: 0;
    right: 0;
    background-color: #ffffff; /* Set a background color */
    z-index: 1000; /* Make sure it appears above other content */
  }
  .navbar-menu.is-active {
    display: block; /* Show when active */
  }

  /* Desktop view override */
  @media screen and (min-width: 1024px) {
    .navbar-menu {
      display: flex !important; /* Ensure the menu is displayed in desktop view */
      position: static; /* Reset position for desktop */
      top: auto;
      background-color: transparent; /* No background needed for desktop */
    }
  }

  .card-image img {
    object-fit: cover;
    width: 100%; /* Ensures the image takes up the full width of its container */
    height: 100%; /* Ensures the image takes up the full height of its container */
  }

  .dropdown.is-up .dropdown-menu {
    bottom: 100%; /* Adjust to place the dropdown above the trigger */
    top: auto;
  }
  



  /* Redundant code for hover */
  

  /* PRIMARY */
  .card.hover-invert-primary span {
    color: #00d1b2;
  }
  .card.hover-invert-primary {
    transition: all 0.3s ease;
  }

  .card.hover-invert-primary:hover {
    background-color: #00d1b2; /* Bulma's primary color */
    color: white; /* Text color on hover */
  }

  .card.hover-invert-primary:hover a span {
    color: white;
    font-size: 1.03em;
    transition: color 0.3s ease, font-size 0.3s ease; /* Added transition */
  }
  
  .card.hover-invert-primary a span {
    transition: color 0.3s ease, font-size 0.3s ease; /* Ensures initial state has transition as well */
  }

  .card.hover-invert-primary:hover .icon {
    color: white; /* Ensure icon is white */
  }
  /* PRIMARY */





  /* LINK */
  .card.hover-invert-link span {
    color: hsl(217, 71%, 53%);
  }
  .card.hover-invert-link {
    transition: all 0.3s ease;
  }

  .card.hover-invert-link:hover {
    background-color: hsl(217, 71%, 53%); /* Bulma's link color */
    color: white; /* Text color on hover */
  }

  .card.hover-invert-link:hover a span {
    color: white;
    font-size: 1.03em;
    transition: color 0.3s ease, font-size 0.3s ease; /* Added transition */
  }
  
  .card.hover-invert-link a span {
    transition: color 0.3s ease, font-size 0.3s ease; /* Ensures initial state has transition as well */
  }

  .card.hover-invert-link:hover .icon {
    color: white; /* Ensure icon is white */
  }
  /* LINK */



  /* DANGER */
  .card.hover-invert-danger span {
    color: hsl(348, 100%, 61%);
  }
  .card.hover-invert-danger {
    transition: all 0.3s ease;
  }

  .card.hover-invert-danger:hover {
    background-color: hsl(348, 100%, 61%); /* Bulma's danger color */
    color: white; /* Text color on hover */
  }

  .card.hover-invert-danger:hover a span {
    color: white;
    font-size: 1.03em;
    transition: color 0.3s ease, font-size 0.3s ease; /* Added transition */
  }
  
  .card.hover-invert-danger a span {
    transition: color 0.3s ease, font-size 0.3s ease; /* Ensures initial state has transition as well */
  }

  .card.hover-invert-danger:hover .icon {
    color: white; /* Ensure icon is white */
  }
  /* DANGER */




  
  /* WARNING */
  .card.hover-invert-warning span {
    color: hsl(48, 100%, 67%);
  }
  .card.hover-invert-warning {
    transition: all 0.3s ease;
  }

  .card.hover-invert-warning:hover {
    background-color: hsl(48, 100%, 67%); /* Bulma's warning color */
    color: white; /* Text color on hover */
  }

  .card.hover-invert-warning:hover a span {
    color: white;
    font-size: 1.03em;
    transition: color 0.3s ease, font-size 0.3s ease; /* Added transition */
  }
  
  .card.hover-invert-warning a span {
    transition: color 0.3s ease, font-size 0.3s ease; /* Ensures initial state has transition as well */
  }

  .card.hover-invert-warning:hover .icon {
    color: white; /* Ensure icon is white */
  }
  /* WARNING */



    /* SUCCESS */
    .card.hover-invert-success span {
      color: hsl(141, 71%, 48%);
    }
    .card.hover-invert-success {
      transition: all 0.3s ease;
    }
  
    .card.hover-invert-success:hover {
      background-color: hsl(141, 71%, 48%); /* Bulma's success color */
      color: white; /* Text color on hover */
    }
  
    .card.hover-invert-success:hover a span {
      color: white;
      font-size: 1.03em;
      transition: color 0.3s ease, font-size 0.3s ease; /* Added transition */
    }
    
    .card.hover-invert-success a span {
      transition: color 0.3s ease, font-size 0.3s ease; /* Ensures initial state has transition as well */
    }
  
    .card.hover-invert-success:hover .icon {
      color: white; /* Ensure icon is white */
    }
    /* SUCCESS */

 

.language-toggler:hover {
  cursor: pointer;
  background-color: rgba(rgba(175, 175, 175, 0.161), green, blue, alpha) !important;
}