/* Login and Signup Button Styles */
a.login, a.signup {
    background-color: #FFD700 !important; /* Golden background */
    color: #002366 !important; /* Dark blue text */
    padding: 14px 28px; /* Larger padding for signup */
    border-radius: 50px; /* Rounded corners */
    text-align: center; /* Centered text */
    display: inline-flex; /* Flexbox layout */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
    gap: 5px; /* Space between icon and text */
    font-size: 18px; /* Larger font size for signup */
    transition: all 0.3s ease; /* Smooth transition on hover */
}

/* Hover effect for login and signup */
a.login:hover, a.signup:hover {
    background-color: #002366; /* Dark blue on hover */
    color: #FFD700; /* Golden text on hover */
}

/* Styles for PNG link */
a.png-link {
    background: transparent; /* Transparent background */
    color: inherit; /* Inherit color from parent */
    padding: 0; /* No padding */
    text-align: center; /* Center the link */
    display: inline-block; /* Inline block layout */
    margin-left: 10px; /* Space between title and PNG */
    vertical-align: middle; /* Aligns with the text */
    z-index: 10; /* Positioned above other content */
}

/* Paragraph Styles */
p {
    color: black; /* Gold text color */
    font-size: 24px; /* Font size for paragraphs */
    text-align: center; /* Center the text */
    margin-bottom: 30px; /* Bottom margin */
    animation: fadeInUp 1s ease-in-out; /* Animation effect */
}

/* Default Button Styles */
.a.button {
    background: #FFD700; /* Gold background */
    color: #002366; /* Dark blue text */
    padding: 12px 24px; /* Padding */
    border-radius: 50px; /* Rounded corners */
    text-align: center; /* Centered text */
    display: flex; /* Flexbox layout */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
    font-size: 16px; /* Font size */
    gap: 5px; /* Space between icon and text */
    transition: 0.3s ease; /* Smooth transition on hover */
}

/* Hover effect for other buttons */
a.button:hover {
    background-color: #002366; /* Dark blue on hover */
    color: #FFD700; /* Golden text on hover */
}

/* Custom Hero Image Styles */
.custom-hero-image {
    width: 100%;
    max-width: 800px;
    height: auto;
    position: absolute; /* Absolute positioning for precise placement */
    top: 30%; /* Adjust to move it closer to the login button */
    left: 35%;
    transform: translate(-30%, -70%); /* Center it horizontally */
    margin-bottom: 50px; /* Add a slight margin if needed */
}

/* Toggle Button Styles */
#toggle-btn {
    transition: all 0.3s ease-in-out; /* Smooth transition */
}

#toggle-btn:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
    box-shadow: 0 0 15px rgba(63, 40, 170, 0.6); /* Add shadow effect */
}

/* Fade In Animation */
.fadeIn {
    animation: fadeIn 0.5s ease-in-out; /* Animation effect */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); } /* Start transparent and slightly moved */
    to { opacity: 1; transform: translateY(0); } /* Fully visible */
}

/* Hero Section Styles */
.hero-section {
    display: flex; /* Use Flexbox for layout */
    flex-direction: column; /* Stack elements vertically */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    background-image: url('assets/img/hero/hero-5/constellation.svg'); /* Background image */
    background-size: cover; /* Cover background */
    background-position: center; /* Center the image */
    width: 100%; /* Full width */
    min-height: 100vh; /* Minimum height */
    height: auto; /* Adjust height automatically */
    position: relative; /* Positioning */
}

/* Media Queries for Responsive Design */
@media (max-width: 768px) {
    .hero-section {
        min-height: 80vh; /* Adjusted height for medium screens */
    }

    a {
        padding: 10px 20px; /* Adjusted padding */
        font-size: 14px; /* Smaller font size */
    }

    p {
        font-size: 20px; /* Adjusted font size */
        margin-bottom: 20px; /* Adjusted bottom margin */
    }

    a.button {
        padding: 10px 20px; /* Adjusted padding */
        font-size: 14px; /* Smaller font size */
    }

    /* Adjust PNG link position on smaller screens */
    a.png-link {
        margin-left: 5px; /* Adjusted margin */
    }
    .hero-section {
        flex-direction: column; /* Vertical stacking */
        min-height: 80vh; /* Adjusted height */
    }
    
    /* Any further adjustments */
    .custom-hero-image {
        margin-top: 20px; /* Space between elements */
    }

}

@media (max-width: 480px) {
    .hero-section {
        min-height: 70vh; /* Further adjusted height for small screens */
    }

    a {
        padding: 8px 16px; /* Further adjusted padding */
        font-size: 14px; /* Smaller font size */
    }

    p {
        font-size: 16px; /* Smaller paragraph font size */
        margin-bottom: 15px; /* Adjusted bottom margin */
    }

    a.button {
        padding: 8px 16px; /* Further adjusted padding */
        font-size: 14px; /* Smaller font size */
    }

    /* Adjust PNG link position for very small screens */
    a.png-link {
        margin-left: 3px; /* Further margin adjustment */
    }
}

@media (min-width: 1024px) {
    a.button {
        padding: 14px 28px; /* Larger padding */
        font-size: 18px; /* Larger font size */
    }
}