body {
    font-family: sans-serif;
}

header.navbar {
    position: fixed;
    top: 10px; /* Adjusted top to account for top margin */
    left: 10px; /* Added left margin */
    width: calc(100% - 20px); /* Adjusted width for left and right margins */
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.8) !important; /* Semi-transparent white */
    backdrop-filter: blur(10px); /* Frosted glass effect */
    padding: 10px 0;
    border-radius: 10px; /* Added border-radius */
}

.hero-section {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    overflow: hidden; /* Hide overflowing background image parts */
}

.hero-bg-london,
.hero-bg-paris {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: auto 100%;
    background-position: 0% 50%;
    background-repeat: no-repeat;
}

.hero-bg-london {
    background-image: url('../assets/london_panorama.jpg');
}

.hero-bg-paris {
    background-image: url('../assets/paris_panorama.jpg');
    opacity: 0; /* Initially hidden */
}

.hero-content {
    max-width: 600px;
    position: relative; /* Ensure it's positioned above backgrounds */
    z-index: 2; /* Higher z-index than backgrounds */
    color: black; /* Set text color to black */
}

.info-section {
    background-color: #ffffff;
    position: relative;
    z-index: 1;
}

.info-box {
}

.footer {
    margin-top: 40px;
    position: relative;
    z-index: 1;
}

.parallax-section {
    position: relative; /* Needed for absolute positioning of children */
    height: 500px; /* Fixed height for parallax section */
    overflow: hidden; /* Hide overflowing background image parts */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.parallax-bg-london,
.parallax-bg-paris {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-attachment: fixed; /* Crucial for parallax effect */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.parallax-bg-london {
    background-image: url('../assets/london_parallax.jpg');
}

.parallax-bg-paris {
    background-image: url('../assets/paris_parallax.jpg');
    opacity: 0; /* Initially hidden */
}

.parallax-content {
    position: relative;
    z-index: 2; /* Ensure content is above backgrounds */
    text-align: center;
    padding: 20px;
}

.parallax-section .parallax-content h2,
.parallax-section .parallax-content p {
    color: black; /* Set text color to black */
}

.info-box-2 {
}

.info-box-2.from-right {
    transform: translateX(50px);
}

.info-box img {
    width: 200px;
    height: 200px;
    object-fit: cover;
}