/* Reset some default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Basic styling for the header and navigation */
header {
    background-color: #000000; /* Hot Pink */
    color: #fff;
    display: flex; /* Make header a flex container */
    justify-content: space-between; /* Align items to left and right */
    align-items: right; /* Vertically center items */
    padding: 10px;
}

//* Update styles for the main navigation items and their hover effect */
nav ul {
    list-style: none;
    text-align: center; /* Center items horizontally */
    font-family: Arial, sans-serif; /* Use a sans-serif font */
}

nav ul li {
    display: inline; /* Display list items in a line */
    margin: 0 20px; /* Adjust horizontal margin for spacing */
    position: relative;
    font-size: 18px; /* Set the font size to at least 14px */
}

/* Update the dropdown menu styles */
nav ul ul {
    display: none;
    position: absolute;
    background-color: #000000; /* Hot Pink */
    color: #fff;
    list-style: none;
    padding: 0;
    z-index: 1;
    top: 100%; /* Position dropdowns below their respective main items */
    left: 0; /* Align dropdowns to the left */
}

nav ul ul li {
    padding: 10px;
    font-size: 18px; /* Set the font size for dropdown items */
}

/* Change the dropdown text color to white on hover */
nav ul ul li:hover {
    color: #fff;
}

/* Show the dropdowns on hover */
nav ul li:hover > ul {
    display: hot pink;
}

/* Styling for the logo */
.logo {
    height: 150px;
    margin-right: 20px; /* Add spacing between logo and navigation */
}

/* Styling for the hero section */
.hero {
    position: relative;
}

.hero img {
    width: 100%;
    height: 500px;
}

/* Styling for buttons */
.buttons {
    text-align: center;
    margin: 20px 0;
}

.saxa-button, .vip-button {
    background-color: #ff0066; /* Hot Pink */
    color: #fff;
    padding: 10px 20px;
    margin: 10px;
    border: none;
    cursor: pointer;
}

/* Update the text styles */
h1 {
    color: #ff0066; /* Hot Pink */
}

p {
    color: #333333; /* Dark Gray */
}

/* Basic styling for the footer */
footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background-color: #ff0066; /* Hot Pink */
    color: #fff;
    padding: 20px;
}

.footer-col {
    flex: 1;
    margin: 10px;
    text-align: center;
}

.footer-col h2 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

/* Hover effect for links */
a {
    color: #fff; /* White */
    transition: color 0.3s;
}

a:hover {
    color: #000; /* Black on hover */
}