#hero {

position: relative;
height: 90vh;

background-image: var(--hero-overlay);
background-size: cover;
background-position: center;

display: flex;
align-items: center;
justify-content: center;

text-align: center;

color: white;

opacity: 85%;

}

.hero-overlay {

position: absolute;
top: 0;
left: 0;

width: 100%;
height: 100%;

background: rgba(0,0,0,0.35);

}

.hero-inner {

position: relative;
z-index: 2;

}

#location {
    background-image: var(--location-overlay);
    background-size: cover;
    background-position: center;
}

.location {
    text-align: center;
    z-index: 2;
}

@media (max-width: 768px) {

    section {

    padding: 80px 20px;

    }

    h1 {

    font-size: 36px;

    }

    h2 {

    font-size: 28px;

    }

    .hero-text {

    font-size: 18px;

    }

}

.main-nav {

position: fixed;
top: 0;

width: 100%;

background: rgba(255,255,255,0.9);
backdrop-filter: blur(8px);

z-index: 1000;

border-bottom: 1px solid #eee;

}

.nav-container {

max-width: 1200px;
margin: auto;

display: flex;
justify-content: space-between;
align-items: center;

padding: 14px 20px;

}

.nav-links {

display: flex;
gap: 30px;

list-style: none;

}

.nav-links a {

text-decoration: none;
color: #333;

font-size: 16px;

}

.main-nav {

position: fixed;

top: 0;

width: 100%;

background: rgba(255,255,255,0.95);

backdrop-filter: blur(6px);

border-bottom: 1px solid #eee;

z-index: 1000;

}

.nav-container {

max-width: 1100px;

margin: auto;

display: flex;

justify-content: space-between;

align-items: center;

padding: 14px 20px;

}

.nav-links {

display: flex;

gap: 30px;

list-style: none;

}

.nav-links a {

text-decoration: none;

color: #333;

font-size: 16px;

}

.nav-logo {

font-weight: bold;

}

.nav-logo a {

text-decoration: none;

color: #333;

}

.burger {

display: none;

flex-direction: column;

gap: 5px;

cursor: pointer;

}

.burger span {

width: 26px;
height: 2px;

background: #333;

display: block;

transition: 0.3s;

}

@media (max-width: 600px) {

    .nav-links {

    position: absolute;

    top: var(--nav-height);
    left: 0;

    width: 100%;

    background: rgba(255,255,255,0.98);

    backdrop-filter: blur(10px);

    flex-direction: column;

    align-items: center;

    gap: 25px;

    padding: 30px 0;

    transform: translateY(-150%);

    transition: transform 0.35s ease;

    }

    .nav-links.active {

    transform: translateY(0);

    }

    .burger {

    display: flex;

    }

}

.items-center{
    position: relative;
    text-align: center;
}