/* X-logo  for the navbar */

.logo-nav {
    display: flex;
    align-items: center;
    text-decoration: none;
    font-family: 'Poppins', 'Roboto', sans-serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 6vw, 8rem); /* responsive: min 2rem, max 8rem */
    color: #ffffff;
    letter-spacing: 2px;
    transition: transform 0.2s ease;
    text-align: center;

    display: inline-flex; 
    vertical-align: middle; 
    margin-right: 10px;
}

/* Accessibility & cleanup */
.logo-nav:hover,
.logo-nav:focus,
.logo-nav:active {
    text-decoration: none !important;
    color: inherit !important;
    outline: none;
}

.X-logo {
  color: #f3f3f3;
  transform: rotate(-10deg);
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 1.7rem;
  text-transform: uppercase;
}

.X-logo:hover {
  color: #ffe600;
  transform: rotate(-15deg);
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 2.6rem;
}

.PI-EL-text {
  color: #f3f3f3;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 1.5rem;
  text-transform: uppercase;
}