/* Hero Section Styles */
.hero {
    background-image: url('/images/havuz1.jpg'); /* Ensure this path is correct */
    background-size: cover;
    background-position: center;
    height: 20vh; /* Smaller hero section */
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: space-between; /* Space between elements */
    color: white;
    padding: 0 20px; /* Add some padding */
    position: relative; /* Allow absolute positioning for phone number */
}

.contact-info {
    display: flex; /* Align phone number in a row */
    align-items: center; /* Center vertically */
    background-color: #FFCB04; /* Match with the button background */
    padding: 10px 20px; /* Adjust padding for consistency */
    border-radius: 5px; /* Match button's border radius */
    font-size: 16px; /* Match font size */
    font-weight: bold; /* Ensure it is bold */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow for depth */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Text shadow for clarity */
}

.contact-info a {
    color: white; /* Ensure the phone link is white */
    text-decoration: none; /* Remove underline */
    transition: background-color 0.3s, transform 0.3s; /* Add transition for hover effect */
}

.contact-info a:hover {
    background-color: #e0a800; /* Change background on hover */
    transform: scale(1.05); /* Scale effect on hover */
}

.hero h1 {
    font-size: 36px; /* Adjusted font size */
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    flex-grow: 1; /* Allow h1 to take remaining space */
    text-align: center; /* Center the h1 text */
    font-weight: bold; /* Match font weight */
}

.book-now-wrapper {
    display: flex;
    align-items: center; /* Center the button vertically */
    justify-content: flex-end; /* Align button to the right */
}

.btn-book {
    background-color: #FFCB04;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 16px; /* Ensure font size matches */
    transition: background-color 0.3s, transform 0.3s;
}

.btn-book:hover {
    background-color: #e0a800;
    transform: scale(1.05);
}