.loginAnimation {
    visibility: 0;
    width: 100%;
    height: 120%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    animation: loginAnimation 1.01s linear;
}

.cart{
    display: none;
}

.cart {
    margin-top: 20px;
    margin-left: 15px;
}


.service-button {
  display: inline-flex;     /* Behaves like an inline element but has flex properties */
  align-items: center;      /* Vertically aligns the icon and text */
  justify-content: center;  /* Horizontally centers the content */
  gap: 0.5rem;              /* Adds a small space between the icon and the text (e.g., 8px) */
  padding: 0.75rem 1.5rem; 
  margin: 50%;   /* Generous padding for a modern look (12px top/bottom, 24px left/right) */
  
  /* --- Appearance --- */
  background-color: #012790; /* Your original dark blue */
  color: #ffffff;           /* White text */
  border: none;             /* Removes any default border */
  border-radius: 6px;       /* Slightly more rounded corners for a modern feel */
  
  /* --- Typography --- */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;          /* A standard, readable font size (16px) */
  font-weight: 600;         /* Semi-bold text stands out better */
  text-decoration: none;    /* CRUCIAL: Removes the default link underline */
  
  /* --- Interactivity --- */
  cursor: pointer;          /* Shows the "hand" cursor on hover */
  transition: all 0.2s ease-in-out; /* Makes hover effects smooth */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow for depth */
}

/* --- HOVER STATE: What happens when the mouse is over the button --- */
.service-button:hover {
  background-color: #0238c8; /* A slightly lighter blue for feedback */
  transform: translateY(-2px); /* Lifts the button up slightly */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* A more prominent shadow on hover */
  color: white;
}

/* --- ACTIVE STATE: What happens when the button is being clicked --- */
.service-button:active {
  transform: translateY(0); /* Pushes the button back down */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Reduces the shadow to look "pressed" */
  background-color: #01227c; /* A slightly darker blue */
  color: white;
}

/* Optional: If the icon size needs adjusting */
.service-button i {
  font-size: 1.1rem; /* Makes the icon slightly larger than the text */
  line-height: 1;  /* Helps with vertical alignment */
}

@keyframes loginAnimation {
    0% {
        visibility: 0;
    }

    100% {
        visibility: 0;
        transform: translate(20px, 20px);
        width: 30px;
        height: 30px;
    }
}