body {
    background-image: url('/static/images/IMG_4894.jpg');
    /* Updated background image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
    color: #F0F0F0;
    font-family: 'Amiko', sans-serif;
}

.navbar {
background-color: #1B263B;
/* Dark blue color */
}

.navbar a {
color: #F0F0F0;
}

/* Fix for hover inconsistency */
.navbar a.btn-primary:hover {
text-decoration: none;
/* Prevent underline */
color: #1b263b;
/* Ensure text is visible on hover */
}

.hero-section {
backdrop-filter: blur(10px);
background: rgba(0, 0, 0, 0.5);
padding: 4rem;
border-radius: 1rem;
text-align: center;
color: #F0F0F0;
}

.btn-primary {
background: #0d0d0d;
/* Grey button */
color: #f0e9e9;
padding: 0.75rem 2rem;
border-radius: 0.5rem;
font-weight: bold;
cursor: pointer;
transition: background 0.3s, color 0.3s;
/* Added color transition */
}

.btn-primary:hover {
background: #e0e0e0;
/* Light grey background */
color: #1b263b;
/* Darker text color for visibility */
}

.video-popup {
position: fixed;
bottom: 30px;
left: 30px;
background: rgba(0, 0, 0, 0.8);
padding: 10px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
display: none;
/* Hidden by default */
z-index: 1000;
}

.close-video {
background: #ff4d4d;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
padding: 5px 10px;
margin-top: 5px;
}

.close-video:hover {
background: #e60000;
}

.open-video {
position: fixed;
bottom: 20px;
left: 20px;
background: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
padding: 10px 20px;
z-index: 1000;
}

.open-video:hover {
background: #0056b3;
}