/* General Styles */
body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #13355c;
    color: #13355c;
    margin: 0; /* Ensures no unwanted gap above */
    padding: 0;
}

/* Header Styling */
header {
    width: 100vw; /* Full width */
    height: auto; /* Expands only as needed */
    padding: 20px 40px; /* Adds spacing */
    background: linear-gradient(to bottom, #0057b8, #a3c8e0); /* Vibrant to muted blue */
    border-bottom-left-radius: 20px; /* Rounded left corner */
    border-bottom-right-radius: 20px; /* Rounded right corner */
    display: flex;
    justify-content: space-between; /* Moves logo left, nav right */
    align-items: center;
    border: 2px solid #3578a8; /* Matching border */
}

/* Logo on the Left */
.logo {
    display: flex;
    justify-content: flex-start;
}

/* Logo Styling */
.logo h1 {
    font-family: 'Lobster', cursive;
    font-size: 48px;
    color: #177fe0; /* Logo color unchanged */
    position: relative;
    top: -5px; /* Moves text slightly upward */
}

/* Fixed Offset Underwording Effect */
.logo h1::after {
    content: "Emmaculate Designs"; /* Same text */
    position: absolute;
    top: 6px; /* Corrected downward shift */
    left: 3px; /* Gentle right shift */
    white-space: nowrap; /* Prevents line break */
    color: #0e4d8b; /* Deep muted blue shadow */
    opacity: 0.6; /* Soft visibility */
    z-index: 1; /* Ensures it stays behind the logo but above the header */
}

/* Navigation on the Right */
nav {
    display: flex;
    justify-content: flex-end;
}
nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 20px;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

nav ul li a:hover {
    color: #ff4500; /* Accent hover effect */
}