/* Base page styling */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    /* Added 50px top padding so the top-right buttons never overlap the title */
    padding: 50px 20px 20px 20px; 
    background-color: #ffffff;
    position: relative; /* This locks the language switcher to the screen boundaries */
}

/* Language Switcher - Locked to Top Right */
.lang-switch {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 16px;
    font-weight: bold;
}

.lang-switch a {
    color: #555555;
    text-decoration: none;
    padding: 0 5px;
}

.lang-switch a:hover {
    color: #435b71;
}

.lang-switch a.active {
    color: #007BFF; 
    text-decoration: underline;
}

/* Header - Locked to Center */
.header {
    text-align: center !important; 
    max-width: 756px;         
    margin: 0 auto 20px auto; 
    width: 100%;
}

.header h1 {
    font-size: 26px;
    color: #435b71; 
    margin: 0 0 5px 0;
    text-align: center;
}

.header h2 {
    font-size: 22px;
    color: #555555;
    font-weight: normal;
    margin: 0;
    text-align: center;
}

/* Container for the map */
.map-container {
    position: relative;
    max-width: 756px; 
    margin: 0 auto;   
}

.map-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* The clickable overlay for the Zaisan region */
.zaisan-link {
    position: absolute;
    display: block;
    top: 83%;
    left: 54%;
    width: 20%;
    height: 16%;
}

/* Responsive Design for Mobile Screens */
@media (max-width: 600px) {
    /* Keep the buttons in the top right, just slightly smaller for phones */
    .lang-switch {
        top: 10px;
        right: 10px;
        font-size: 14px;
    }

    .header h1 {
        font-size: 22px;
    }

    .header h2 {
        font-size: 18px;
    }
}