/* ============================================
   Color Variables Used (from your :root)
   ============================================ */

:root {
    --primary-blue: #1A2B4D;
    --secondary-blue: #2A4A6D;
    --light-blue: #4A6A8D;
    --hover-blue: #2980b9;
    --accent-blue: #2D348F;
    --accent-red: #D32333;
    --black: #000000;
    --dark-grey: #333333;
    --medium-grey: #666666;
    --light-grey: #999999;
    --white: #FFFFFF;
    --off-white: #F8F9FA;
    --gold: #D4AF37;
    --border-color: #D9D9D9;
    --border-light: rgba(217, 217, 217, 0.35);
    --background-light: rgba(102, 98, 98, 0.24);
    --shadow-color: rgba(50, 50, 93, 0.25);
    --overlay-dark: rgba(0, 0, 0, 0.3);
    --overlay-darker: rgba(0, 0, 0, 0.8);
    --text-dark: #333333;
    --text-medium: #666666;
    --text-light: #999999;
    --text-white: #FFFFFF;
    --text-white-transparent: rgba(255, 255, 255, 0.9);
    --card-background: #FFFFFF;
    --button-shadow: #2D348F;
    --gradient-light: #F4F4F4;
    --gradient-dark: #121212;
}

.landmark-section {
    width: 100%;
    height: 560px;
}


.map-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    position: absolute;
    left: 0;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--dark-grey);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.font-light {
    font-weight: 200;
}

@media (min-width: 425px) {
    .landmark-section {
        height: 600px;
    }
}