/*
Theme Name:   Xelo Child
Theme URI:    https://xelo.agency/
Author:       DevsBlink
Author URI:   https://themeforest.net/user/devsblink/portfolio
Description:  Xelo Theme for creative business agency.
Version:      1.0.0
Template:     xelo
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain:  xelo
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

* If you are not familiar with Child Themes, you can read about it here:
* http://codex.wordpress.org/Child_Themes
*/


/* ======================================= */
/*                 Navbar                  */
/* ======================================= */

/* Glassmorphism-Hintergrund für das Dropdown-Menü */
nav ul li > ul {
  background: rgba(255, 255, 255, 0.1); /* Semi-transparenter Hintergrund */
  backdrop-filter: blur(10px); /* Verwischungseffekt für den Glass-Look */
  border-radius: 10px; /* Abgerundete Ecken */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); /* Sanfte Schatten für Tiefe */
  padding: 10px 0; /* Abstand für Dropdown-Menüpunkte */
  border: none; /* Keine sichtbare Umrandung */
}

/* Einheitliche Abstände, zentrierter Text und stilvolle Linien */
nav ul li > ul > li {
  color: white;
  padding: 12px 20px; /* Gleichmäßiger Abstand */
  text-align: center; /* Zentrierter Text */
  border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* Feine Linie unter den Dropdown-Punkten */
  transition: background-color 0.3s ease, transform 0.3s ease; /* Sanfte Übergänge */
}

/* Entfernen der Linie unter dem letzten Punkt */
nav ul li > ul > li:last-child {
  border-bottom: none;
}

/* Hover-Effekt mit sanfter Hintergrundänderung und Schwebefeeling */
nav ul li > ul > li:hover {
  background-color: rgba(255, 255, 255, 0.2); /* Leicht aufgehellter Hintergrund bei Hover */
  transform: translateX(5px); /* Kleine Verschiebung für den Hover-Effekt */
}

/* Übergangseffekte für den Hover */
nav ul li > ul > li {
  transition: background-color 0.3s ease, transform 0.3s ease;
}

