{"id":1672,"date":"2026-04-21T07:52:20","date_gmt":"2026-04-21T07:52:20","guid":{"rendered":"https:\/\/fbs.vau.ac.lk\/mm\/?page_id=1672"},"modified":"2026-04-21T14:53:39","modified_gmt":"2026-04-21T14:53:39","slug":"contact-us-2","status":"publish","type":"page","link":"https:\/\/fbs.vau.ac.lk\/mm\/contact-us-2\/","title":{"rendered":"Contact Us"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes\">\n    <title>Contact Us<\/title>\n    <!-- Google Fonts for clean typography -->\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&#038;display=swap\" rel=\"stylesheet\">\n    <!-- Font Awesome 6 (free icons) -->\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\n    <style>\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        body {\n            font-family: 'Inter', sans-serif;\n            background: #f5f7fc;   \/* soft light background to make dark blue pop *\/\n            color: #1e2a3e;\n            line-height: 1.5;\n        }\n\n        \/* MAIN DARK BLUE THEME: primary color, headers, accents *\/\n        :root {\n            --dark-blue: #0a2647;     \/* deep navy \/ dark blue *\/\n            --dark-blue-soft: #1e3a5f;\n            --gold-accent: #c9a03d;   \/* subtle gold for highlights *\/\n            --light-bg: #ffffff;\n            --gray-light: #eef2f9;\n            --shadow-sm: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);\n            --shadow-md: 0 20px 25px -12px rgba(0, 0, 0, 0.08);\n        }\n\n        .container {\n            max-width: 1280px;\n            margin: 0 auto;\n            padding: 2rem 1.5rem 4rem;\n        }\n\n        \/* header section *\/\n        .page-header {\n            text-align: center;\n            margin-bottom: 3rem;\n        }\n\n        .page-header h1 {\n            font-size: 2.8rem;\n            font-weight: 700;\n            color: var(--dark-blue);\n            letter-spacing: -0.01em;\n            position: relative;\n            display: inline-block;\n            margin-bottom: 0.75rem;\n        }\n\n        .page-header h1:after {\n            content: '';\n            display: block;\n            width: 70px;\n            height: 4px;\n            background: var(--gold-accent);\n            margin: 0.8rem auto 0;\n            border-radius: 2px;\n        }\n\n        .page-header p {\n            font-size: 1.1rem;\n            color: #4a5b6e;\n            max-width: 600px;\n            margin: 0.75rem auto 0;\n        }\n\n        \/* two-column responsive layout *\/\n        .contact-grid {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 2rem;\n            margin-top: 1rem;\n        }\n\n        .contact-info {\n            flex: 1.2;\n            min-width: 280px;\n            background: var(--light-bg);\n            border-radius: 28px;\n            box-shadow: var(--shadow-sm);\n            overflow: hidden;\n            transition: transform 0.2s ease, box-shadow 0.2s ease;\n            border: 1px solid rgba(10, 38, 71, 0.08);\n        }\n\n        .contact-info:hover {\n            transform: translateY(-4px);\n            box-shadow: var(--shadow-md);\n        }\n\n        .info-card {\n            padding: 2rem 2rem 2rem 2rem;\n        }\n\n        .department-badge {\n            display: inline-block;\n            background: var(--dark-blue);\n            color: white;\n            font-size: 0.85rem;\n            font-weight: 600;\n            padding: 0.3rem 1rem;\n            border-radius: 40px;\n            letter-spacing: 0.3px;\n            margin-bottom: 1.5rem;\n        }\n\n        .contact-title {\n            font-size: 1.8rem;\n            font-weight: 700;\n            color: var(--dark-blue);\n            margin-bottom: 0.5rem;\n        }\n\n        .contact-sub {\n            color: #4b5e77;\n            border-left: 3px solid var(--gold-accent);\n            padding-left: 0.9rem;\n            margin-bottom: 2rem;\n            font-weight: 400;\n        }\n\n        \/* contact detail rows *\/\n        .detail-row {\n            display: flex;\n            align-items: center;\n            gap: 1rem;\n            margin-bottom: 1.8rem;\n            flex-wrap: wrap;\n        }\n\n        .detail-icon {\n            width: 52px;\n            height: 52px;\n            background: #eef2fa;\n            border-radius: 30px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--dark-blue);\n            font-size: 1.6rem;\n            transition: all 0.2s;\n        }\n\n        .detail-content {\n            flex: 1;\n        }\n\n        .detail-label {\n            font-size: 0.85rem;\n            font-weight: 600;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            color: #5d6f83;\n            margin-bottom: 0.2rem;\n        }\n\n        .detail-value {\n            font-size: 1.25rem;\n            font-weight: 500;\n            color: #0f2b42;\n            word-break: break-word;\n        }\n\n        .detail-value a {\n            color: var(--dark-blue);\n            text-decoration: none;\n            font-weight: 600;\n            border-bottom: 1px solid transparent;\n            transition: border-color 0.2s;\n        }\n\n        .detail-value a:hover {\n            border-bottom: 1px solid var(--gold-accent);\n            color: #0a2647;\n        }\n\n        .action-link {\n            display: inline-flex;\n            align-items: center;\n            gap: 0.5rem;\n            background: var(--dark-blue);\n            color: white;\n            padding: 0.7rem 1.4rem;\n            border-radius: 40px;\n            font-weight: 500;\n            text-decoration: none;\n            font-size: 0.9rem;\n            margin-top: 0.5rem;\n            transition: background 0.2s, transform 0.1s;\n            border: none;\n            cursor: pointer;\n        }\n\n        .action-link i {\n            font-size: 0.9rem;\n        }\n\n        .action-link:hover {\n            background: #0f3a62;\n            color: white;\n        }\n\n        \/* map container styling *\/\n        .map-container {\n            flex: 1.3;\n            min-width: 300px;\n            background: var(--light-bg);\n            border-radius: 28px;\n            box-shadow: var(--shadow-sm);\n            overflow: hidden;\n            border: 1px solid rgba(10, 38, 71, 0.08);\n            transition: transform 0.2s ease, box-shadow 0.2s ease;\n            display: flex;\n            flex-direction: column;\n        }\n\n        .map-container:hover {\n            transform: translateY(-4px);\n            box-shadow: var(--shadow-md);\n        }\n\n        .map-header {\n            padding: 1.2rem 1.5rem 0.5rem 1.8rem;\n            background: white;\n        }\n\n        .map-header h3 {\n            font-size: 1.4rem;\n            font-weight: 600;\n            color: var(--dark-blue);\n            display: flex;\n            align-items: center;\n            gap: 0.6rem;\n        }\n\n        .map-header h3 i {\n            color: var(--gold-accent);\n            font-size: 1.3rem;\n        }\n\n        .map-header p {\n            font-size: 0.85rem;\n            color: #5c6f88;\n            margin-top: 0.2rem;\n        }\n\n        .map-wrapper {\n            margin: 0.8rem 1.2rem 1.5rem 1.2rem;\n            border-radius: 20px;\n            overflow: hidden;\n            box-shadow: 0 6px 12px -8px rgba(0,0,0,0.2);\n            border: 1px solid #e9edf2;\n            background: #eef2f9;\n            min-height: 340px;\n            position: relative;\n        }\n\n        .map-wrapper iframe {\n            width: 100%;\n            height: 340px;\n            border: 0;\n            display: block;\n            pointer-events: auto;\n        }\n\n        .map-footer {\n            padding: 0.2rem 1.5rem 1.5rem 1.8rem;\n            font-size: 0.75rem;\n            color: #7085a0;\n            border-top: 1px solid #eef2f9;\n            margin-top: auto;\n        }\n\n        .map-footer a {\n            color: var(--dark-blue);\n            font-weight: 500;\n            text-decoration: none;\n        }\n\n        .map-footer a:hover {\n            text-decoration: underline;\n        }\n\n        \/* responsive *\/\n        @media (max-width: 780px) {\n            .container {\n                padding: 1.5rem 1.2rem 3rem;\n            }\n            .page-header h1 {\n                font-size: 2.2rem;\n            }\n            .info-card {\n                padding: 1.5rem;\n            }\n            .contact-title {\n                font-size: 1.5rem;\n            }\n            .detail-value {\n                font-size: 1rem;\n            }\n            .map-wrapper iframe {\n                height: 280px;\n            }\n        }\n\n        @media (max-width: 550px) {\n            .detail-row {\n                flex-direction: column;\n                align-items: flex-start;\n                gap: 0.5rem;\n            }\n            .detail-icon {\n                width: 44px;\n                height: 44px;\n                font-size: 1.3rem;\n            }\n            .action-link {\n                width: 100%;\n                justify-content: center;\n            }\n        }\n\n        \/* focus accessibility *\/\n        a:focus-visible, .action-link:focus-visible, iframe:focus-visible {\n            outline: 2px solid var(--gold-accent);\n            outline-offset: 2px;\n            border-radius: 4px;\n        }\n\n        \/* small extra spacing for department title *\/\n        .contact-title + .contact-sub {\n            margin-top: -0.2rem;\n        }\n    <\/style>\n<\/head>\n<body>\n\n<div class=\"container\">\n    <div class=\"page-header\">\n        <h1>Contact Us<\/h1>\n        <p>Reach out to the Head of Department \u2014 we&#8217;re here to assist you with academic and administrative inquiries.<\/p>\n    <\/div>\n\n    <div class=\"contact-grid\">\n        <!-- LEFT: Contact info card (Head of Department) -->\n        <div class=\"contact-info\">\n            <div class=\"info-card\">\n                <span class=\"department-badge\"><i class=\"fas fa-university\" style=\"margin-right: 6px;\"><\/i> Academic Leadership<\/span>\n                <div class=\"contact-title\">Head of the Department<\/div>\n                \n                \n                <!-- Phone -->\n                <div class=\"detail-row\">\n                    <div class=\"detail-icon\">\n                        <i class=\"fas fa-phone-alt\"><\/i>\n                    <\/div>\n                    <div class=\"detail-content\">\n                        <div class=\"detail-label\">Direct Telephone<\/div>\n                        <div class=\"detail-value\">\n                            <a href=\"tel:+94242223912\">024 222 3912<\/a>\n                        <\/div>\n                        \n                    <\/div>\n                <\/div>\n\n                <!-- Email -->\n                <div class=\"detail-row\">\n                    <div class=\"detail-icon\">\n                        <i class=\"fas fa-envelope\"><\/i>\n                    <\/div>\n                    <div class=\"detail-content\">\n                        <div class=\"detail-label\">Official Email<\/div>\n                        <div class=\"detail-value\">\n                            <a href=\"mailto:headmm@vau.ac.lk\">headmm@vau.ac.lk<\/a>\n                        <\/div>\n                        \n                    <\/div>\n                <\/div>\n\n                <!-- small cta: send email quickly -->\n                <a href=\"mailto:headmm@vau.ac.lk?subject=Inquiry%20from%20Contact%20Page\" class=\"action-link\">\n                    <i class=\"fas fa-paper-plane\"><\/i> Send an Email\n                <\/a>\n            <\/div>\n        <\/div>\n\n        <!-- RIGHT: Embedded Map from Google Maps (valid & corrected iframe) -->\n        <div class=\"map-container\">\n            <div class=\"map-header\">\n                <h3><i class=\"fas fa-map-marked-alt\"><\/i> Our Location<\/h3>\n                <p>Find us easily \u2014 Department office, Vavuniya Campus<\/p>\n            <\/div>\n            <div class=\"map-wrapper\">\n                <!-- FIXED: Proper Google Maps embed iframe (correct syntax, no broken src) \n                     Coordinates: Department of Project Management \/ VAU building, Vavuniya, Sri Lanka -->\n                <iframe \n                    src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d1341.5057043960862!2d80.41024992362155!3d8.756514065839552!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3afc3f6224db2201%3A0x713a3064b462033a!2sDepartment%20of%20Project%20Management!5e0!3m2!1sen!2slk!4v1776782758874!5m2!1sen!2slk\" \n                    width=\"600\" \n                    height=\"450\" \n                    style=\"border:0;\" \n                    allowfullscreen=\"\" \n                    loading=\"lazy\" \n                    referrerpolicy=\"no-referrer-when-downgrade\"\n                    title=\"Department of VAU Location Map\">\n                <\/iframe>\n            <\/div>\n            <div class=\"map-footer\">\n                <i class=\"fas fa-external-link-alt\" style=\"font-size: 0.7rem; margin-right: 5px;\"><\/i> \n                <strong>Need directions?<\/strong> \n                <a href=\"https:\/\/maps.app.goo.gl\/3vUjWiQrxkYcy7h47\" target=\"_blank\" rel=\"noopener noreferrer\">\n                    Open full map in Google Maps <i class=\"fas fa-arrow-right\"><\/i>\n                <\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Contact Us Contact Us Reach out to the Head of Department \u2014 we&#8217;re here to assist you with academic and administrative inquiries. Academic Leadership Head of the Department Direct Telephone [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-fullwidth.php","meta":{"footnotes":""},"class_list":["post-1672","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/fbs.vau.ac.lk\/mm\/wp-json\/wp\/v2\/pages\/1672","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fbs.vau.ac.lk\/mm\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fbs.vau.ac.lk\/mm\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fbs.vau.ac.lk\/mm\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/fbs.vau.ac.lk\/mm\/wp-json\/wp\/v2\/comments?post=1672"}],"version-history":[{"count":2,"href":"https:\/\/fbs.vau.ac.lk\/mm\/wp-json\/wp\/v2\/pages\/1672\/revisions"}],"predecessor-version":[{"id":1677,"href":"https:\/\/fbs.vau.ac.lk\/mm\/wp-json\/wp\/v2\/pages\/1672\/revisions\/1677"}],"wp:attachment":[{"href":"https:\/\/fbs.vau.ac.lk\/mm\/wp-json\/wp\/v2\/media?parent=1672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}