/* Transition Header Background on Scroll */
#main-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 50;
    background-color: transparent;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}


#hero {
    height: 80vh; /* Reduce the height to 80% of the viewport */
}

/* Barbarian Logo */
.barbarian-logo {
    position: relative; /* Enable positioning */
    top: -50px; /* Move upwards without adding space */
    width: 70%; /* Keep size the same */
    left: 15%;
}

/* Hero Heading */
#hero h2 {
    position: relative;

    top: -30px; /* Move closer to the logo */
    font-size: 3rem; /* Optional: adjust font size */
}

/* Hero Subheading */
#hero p {
    position: relative;
    top: -20px; /* Move closer to the heading */
    font-size: 1.5rem; /* Optional: adjust font size */
}

/* Hero Buttons */
#hero .flex {
    position: relative;
    top: -10px; /* Move closer to the subheading */
    gap: 1rem; /* Maintain spacing between buttons */
}

/* Scrolled Header */
#main-header.scrolled {
    background-color: #3b8d40; /* Green background */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Optional shadow */
}




.merch-image img {
    margin-top: 1rem; /* Adjust the value as needed */
}

nav a {
    font-size: 1.25rem; /* Increase font size */
    padding: 0.75rem 1.25rem; /* Increase padding for larger buttons */
    border-radius: 0.5rem; /* Optional: Add rounded corners */
}

#mobile-menu a {
    font-size: 1.25rem; /* Ensure the same size for mobile menu links */
    padding: 0.75rem 1.25rem;
}

footer {
    background: linear-gradient(90deg, #2d2d2d, #1a1a1a, #0d0d0d);
    color: #fff;
    padding: 2rem 0;
}

footer .social-icons a {
    color: #fff;
    transition: color 0.3s ease;
}

footer .social-icons a:hover {
    color: #4caf50; /* Hover effect with green color */
}

footer .logo img {
    height: 3rem;
    transition: transform 0.3s ease;
}

footer .logo img:hover {
    transform: scale(1.1); /* Slight zoom effect on hover */
}