.location-page {
    font-family: Montserrat, sans-serif !important;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    ;
}

 /* Main container for the content */
        .containerlocation {
            
            text-align: center;
            padding: 40px;
            background-color: #ffffff;
            max-width: 900px;
        }

        /* Main title styling */
        .main-title {
            color: #192a56; /* Dark blue */
            font-size: 2.2em;
            font-weight: bold;
            margin-bottom: 5px;
        }

        /* Subtitle styling */
        .subtitle {
            color: #192a56; /* Dark blue */
            font-size: 1.8em;
            font-weight: bold;
            margin-top: 0;
            margin-bottom: 40px;
        }

        /* Flex container for the location sections */
        .locations {
            display: flex;
            justify-content: center;
            gap: 60px; /* Space between the two location boxes */
            margin-bottom: 40px;
        }

        /* Styling for each location box */
        .location-box {
            width: 300px;
        }
        
        /* Styling for the banner above the map */
        .banner {
            display: flex;
            align-items: center;
            padding: 10px 20px;
            color: white;
            font-weight: bold;
            font-size: 1.1em;
            position: relative;
            height: 40px;
            margin-bottom: 20px;
        }
        
        /* Specific banner color for Singapore */
        .banner-sg {
            background-color: #d8232a; /* Red */
        }
        
        /* Specific banner color for Brunei */
        .banner-bn {
            background-color: #000000; /* Black */
        }

        /* Creating the arrow shape on the banner using a pseudo-element */
        .banner::after {
            content: '';
            position: absolute;
            top: 0;
            right: -20px; /* Position the triangle outside the banner */
            width: 0;
            height: 0;
            border-top: 30px solid transparent;
            border-bottom: 30px solid transparent;
        }
        
        .banner-sg::after {
             border-left: 20px solid #d8232a; /* Red triangle */
        }
        
         .banner-bn::after {
             border-left: 20px solid #000000; /* Black triangle */
        }

        /* Styling for the location pin icon */
        .pin-icon {
            width: 24px;
            height: 24px;
            margin-right: 15px;
        }

        /* Styling for the map images */
        .map-image {
            width: 100%;
            height: auto;
        }

        /* Styling for the call-to-action text */
        .cta-text {
            color: #192a56; /* Dark blue */
            font-size: 1.5em;
            font-weight: bold;
            margin-bottom: 20px;
        }
        
        /* Styling for the location button */
        .location-button {
            background-color: #294a9e; /* Blue */
            color: white;
            padding: 15px 35px;
            text-decoration: none;
            font-weight: bold;
            font-size: 1.2em;
            border: 2px solid #294a9e;
            display: inline-block;
        }
        
        /* Styling for the text inside the button */
        .button-text {
             border-top: 2px solid white;
             border-bottom: 2px solid white;
             padding: 5px 0;
        }