@font-face {
            font-display: swap;
            font-family: 'Milo Serif';
            font-style: normal;
            font-weight: 400;
            src: url('./MiloSerifWeb.woff') format('woff');
        }

        @font-face {
            font-display: swap;
            font-family: 'Milo Serif';
            font-style: italic;
            font-weight: 400;
            src: url('./MiloSerifWeb-Ita.woff') format('woff');
        }

        @font-face {
            font-display: swap;
            font-family: 'Milo Serif';
            font-style: normal;
            font-weight: 500;
            src: url('./MiloSerifWeb-Medium.woff') format('woff');
        }

        @font-face {
            font-display: swap;
            font-family: 'Milo Serif';
            font-style: italic;
            font-weight: 500;
            src: url('./MiloSerifWeb-MediumIta.woff') format('woff');
        }

        @font-face {
            font-display: swap;
            font-family: 'Milo Serif';
            font-style: normal;
            font-weight: 700;
            src: url('./MiloSerifWeb-Bold.woff') format('woff');
        }

        @font-face {
            font-display: swap;
            font-family: 'Milo Serif';
            font-style: italic;
            font-weight: 700;
            src: url('./MiloSerifWeb-BoldIta.woff') format('woff');
        }

        @font-face {
            font-display: swap;
            font-family: 'Milo Sans';
            font-style: normal;
            font-weight: 400;
            src: url('./MiloWeb.woff') format('woff');
        }

        @font-face {
            font-display: swap;
            font-family: 'Milo Sans';
            font-style: italic;
            font-weight: 400;
            src: url('./MiloWeb-Ita.woff') format('woff');
        }

        @font-face {
            font-display: swap;
            font-family: 'Milo Sans';
            font-style: normal;
            font-weight: 500;
            src: url('./MiloWeb-Medium.woff') format('woff');
        }

        @font-face {
            font-display: swap;
            font-family: 'Milo Sans';
            font-style: italic;
            font-weight: 500;
            src: url('./MiloWeb-MediumIta.woff') format('woff');
        }

        @font-face {
            font-display: swap;
            font-family: 'Milo Sans';
            font-style: normal;
            font-weight: 700;
            src: url('./MiloWeb-Bold.woff') format('woff');
        }

        @font-face {
            font-display: swap;
            font-family: 'Milo Sans';
            font-style: italic;
            font-weight: 700;
            src: url('./MiloWeb-BoldIta.woff') format('woff');
        }

        html {
            font-size: 16px;
        }

        body {
            background-color: #F4F4F4;
            font-size: 16px;
            font-family: 'Milo Serif', serif;
            margin: 0;
        }
        
        img {
            max-width: 100%;
            max-height: 100%;
            }

        h1 {
            font-size: 45px;
            font-weight: 500;
        }

        h3 {
            color: #24b3b2;
            font-size: 29px;
            margin: 28px 0 0;
        }

        p {
            line-height: 1.7;
        }

        a {
            color: #2DA9CB;
            display: inline;
        }

        a:hover {
            color: #24b3b2;
            transition: color 0.5s ease;
        }

        ul {
            list-style-type: none;
        }

        .header {
            background-color: #24b3b2;
            border-bottom: 1px solid;
            border-bottom-color: #31cbca;
            height: 77px;
            width: 100%;
        }

        .header-container {
            align-items: center;
            display: flex;
            justify-content: space-between;
            height: 100%;
            margin: 0 auto;
            max-width: 1000px;
            padding-left: 20px;
            padding-right: 20px;
            position: relative;
        }

        .logo {
            display: flex;
            align-items: center;
        }

        .logo img {
            width: 72px
        }

        .logo span {
            color: #fff;
            font-family: 'Milo Sans', sans-serif;
            font-weight: 700;
            font-size: 1.125rem;
            line-height: 1.6;
            margin-left: 8px;
            transition: color .2s;
            white-space: nowrap;
        }

        .logo:hover span {
            color: #002154;
        }

        .icon {
            fill: #fff;
        }
        
        .language {
            color: #fff;
            display: block;
            font-family: 'Milo Sans', sans-serif;
            font-size: 1rem;
            font-weight: 500;
            line-height: 1.2;
            margin-right: -.5rem;
            padding: .5rem;
            text-decoration: none;
            transition: color .2s;
        }

        .bg-petrol {
            background-color: #22abaa;
            min-height: 400px;
            width: 100%;
        }

        .container {
            margin: -400px auto 0 auto;
            max-width: 1000px;
            padding: 30px 15px;
        }

        .content-top {
            background-color: #24b3b2;
            color: #fff;
            /* min-height: 250px; */
            padding: 50px 30px 20px;
            text-align: center;
        }

        .content-bottom {
            background-color: #fff;
            padding: 20px;
        }

        .intro {
            color: #fff;
            font-size: 20px;
            font-style: italic;
        }

        .text {
            color: #535151;
            font-size: 18px;
        }


        @media only screen and (min-width: 768px) {
            .logo span {
                margin-left: 12px;
            }

            .bg-petrol {
                min-height: 560px;
            }

            .content-top {
                /* min-height: 328px; */
                padding: 73px 30px 20px;
            }

            .container {
                margin-top: -564px;
            }

            .text {
                padding-left: 30px;
            }

            .text-logo {
                display: flex;
            }

        }

        @media only screen and (min-width: 1024px) {
            h1 {
                font-size: 55px;
                text-align: left;
                margin-left: 35px;
                max-width: 600px;
            }

            .header {
                height: 100px; 
            }

            .logo img {
                width: 72px;
            }

            .bg-petrol {
                min-height: 515px;
            }

            .container {
                margin-top: -522px;
            }

            .banner {
                display: flex;
                align-items: center;
            }

            .content-top {
                padding: 60px 90px;
            }

            .content-bottom {
                padding: 32px 90px 50px;
            }

            .intro {
                font-size: 22px;
                margin-top: 0;
                text-align: justify;
            }

        }