{"id":144,"date":"2026-07-14T13:00:08","date_gmt":"2026-07-14T13:00:08","guid":{"rendered":"http:\/\/localhost\/Pcguard\/web-hosting\/"},"modified":"2026-08-21T09:40:54","modified_gmt":"2026-08-21T09:40:54","slug":"web-hosting","status":"publish","type":"page","link":"https:\/\/pcguard.co.za\/?page_id=144","title":{"rendered":"Web Hosting"},"content":{"rendered":"\n<style>\n\/* PCGUARD WEB HOSTING PAGE *\/\n\n\/* Remove WordPress spacing above hero *\/\nmain:has(.pcg-hosting-page),\n.entry-content:has(.pcg-hosting-page),\n.wp-block-post-content:has(.pcg-hosting-page),\n.wp-block-html:has(.pcg-hosting-page) {\n    padding-top: 0 !important;\n    margin-top: 0 !important;\n}\n\n.wp-block-html:has(.pcg-hosting-page) {\n    margin-block-start: 0 !important;\n}\n\n.pcg-hosting-page,\n.pcg-hosting-page * {\n    box-sizing: border-box;\n}\n\n.pcg-hosting-page {\n    --navy: #002b55;\n    --blue: #087dcc;\n    --light-blue: #eef7fd;\n    --text: #4a6075;\n    --border: #dce8f2;\n    --white: #ffffff;\n\n    --small: #48a8df;\n    --small-light: #eaf6fd;\n    --medium: #087dcc;\n    --medium-light: #e6f3fc;\n    --large: #003c70;\n    --large-light: #e7eef5;\n\n    width: 100%;\n    margin-top: 0 !important;\n    color: var(--navy);\n    font-family: inherit;\n}\n\n.pcg-hosting-page h1,\n.pcg-hosting-page h2,\n.pcg-hosting-page h3,\n.pcg-hosting-page p {\n    margin-top: 0;\n}\n\n.pcg-hosting-container {\n    width: min(1160px, calc(100% - 40px));\n    margin: 0 auto;\n}\n\n\/* Tight hero *\/\n\n.pcg-hosting-hero {\n    padding: 42px 0 48px;\n    margin-top: 0 !important;\n    background:\n        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),\n        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),\n        linear-gradient(120deg, #00294f 0%, #07477f 100%);\n    background-size: 64px 64px, 64px 64px, auto;\n}\n\n.pcg-hosting-hero-content {\n    max-width: 1120px;\n}\n\n.pcg-hosting-eyebrow {\n    display: inline-block;\n    margin-bottom: 12px;\n    color: #65baf1;\n    font-size: 13px;\n    font-weight: 700;\n    letter-spacing: 1.8px;\n    text-transform: uppercase;\n}\n\n.pcg-hosting-hero h1 {\n    max-width: 1120px;\n    margin-bottom: 20px;\n    color: var(--white);\n    font-size: clamp(46px, 5vw, 68px);\n    line-height: 1.08;\n    letter-spacing: -1.8px;\n}\n\n.pcg-hosting-hero p {\n    max-width: 820px;\n    margin-bottom: 0;\n    color: rgba(255,255,255,0.84);\n    font-size: 18px;\n    line-height: 1.7;\n}\n\n\/* Packages *\/\n\n.pcg-packages-section {\n    padding: 80px 0 90px;\n    background: #f7fafc;\n}\n\n.pcg-packages-heading {\n    max-width: 720px;\n    margin: 0 auto 50px;\n    text-align: center;\n}\n\n.pcg-packages-heading span {\n    display: inline-block;\n    margin-bottom: 12px;\n    color: var(--blue);\n    font-size: 13px;\n    font-weight: 700;\n    letter-spacing: 1.8px;\n    text-transform: uppercase;\n}\n\n.pcg-packages-heading h2 {\n    margin-bottom: 16px;\n    font-size: clamp(30px, 4vw, 44px);\n    line-height: 1.15;\n    letter-spacing: -1px;\n}\n\n.pcg-packages-heading p {\n    margin-bottom: 0;\n    color: var(--text);\n    font-size: 16px;\n    line-height: 1.7;\n}\n\n.pcg-package-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    align-items: stretch;\n    gap: 24px;\n}\n\n.pcg-package-card {\n    position: relative;\n    display: flex;\n    padding: 38px 30px 30px;\n    overflow: hidden;\n    flex-direction: column;\n    background: var(--white);\n    border: 1px solid var(--border);\n    border-radius: 16px;\n    box-shadow: 0 10px 32px rgba(0,43,85,0.08);\n    transition: 0.25s ease;\n}\n\n.pcg-package-card::before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 7px;\n    background: var(--package-colour);\n}\n\n.pcg-package-card:hover {\n    box-shadow: 0 18px 42px rgba(0,43,85,0.14);\n    transform: translateY(-6px);\n}\n\n.pcg-package-small {\n    --package-colour: var(--small);\n    --package-light: var(--small-light);\n}\n\n.pcg-package-medium {\n    --package-colour: var(--medium);\n    --package-light: var(--medium-light);\n    border: 2px solid var(--medium);\n    transform: scale(1.025);\n}\n\n.pcg-package-medium:hover {\n    transform: scale(1.025) translateY(-6px);\n}\n\n.pcg-package-large {\n    --package-colour: var(--large);\n    --package-light: var(--large-light);\n}\n\n.pcg-popular-label {\n    position: absolute;\n    top: 13px;\n    right: 16px;\n    padding: 6px 13px;\n    color: var(--white);\n    background: var(--medium);\n    border-radius: 20px;\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 0.5px;\n    text-transform: uppercase;\n}\n\n.pcg-package-name {\n    margin-bottom: 8px !important;\n    color: var(--package-colour);\n    font-size: 25px;\n}\n\n.pcg-package-description {\n    min-height: 52px;\n    margin-bottom: 22px !important;\n    color: var(--text);\n    font-size: 14px;\n    line-height: 1.55;\n}\n\n\/* Prices *\/\n\n.pcg-price {\n    display: flex;\n    width: fit-content;\n    padding: 13px 17px;\n    margin-bottom: 25px;\n    align-items: flex-end;\n    color: var(--package-colour);\n    background: var(--package-light);\n    border-radius: 10px;\n}\n\n.pcg-currency {\n    padding-bottom: 9px;\n    margin-right: 3px;\n    font-size: 18px;\n    font-weight: 700;\n}\n\n.pcg-price-number {\n    font-size: 58px;\n    font-weight: 800;\n    line-height: 1;\n    letter-spacing: -2px;\n}\n\n.pcg-price-period {\n    padding-bottom: 8px;\n    margin-left: 5px;\n    color: var(--text);\n    font-size: 13px;\n}\n\n.pcg-package-list {\n    padding: 22px 0 0;\n    margin: 0 0 28px;\n    list-style: none;\n    border-top: 1px solid var(--border);\n}\n\n.pcg-package-list li {\n    position: relative;\n    padding: 7px 0 7px 24px;\n    color: var(--text);\n    font-size: 14px;\n    line-height: 1.45;\n}\n\n.pcg-package-list li::before {\n    content: \"\u2713\";\n    position: absolute;\n    left: 0;\n    color: var(--package-colour);\n    font-weight: 800;\n}\n\n.pcg-package-button {\n    width: 100%;\n    min-height: 50px;\n    padding: 13px 22px;\n    margin-top: auto;\n    color: var(--white);\n    background: var(--package-colour);\n    border: 2px solid var(--package-colour);\n    border-radius: 6px;\n    cursor: pointer;\n    font-family: inherit;\n    font-size: 15px;\n    font-weight: 700;\n    transition: 0.2s ease;\n}\n\n.pcg-package-button:hover {\n    filter: brightness(0.88);\n    transform: translateY(-2px);\n}\n\n\/* Information *\/\n\n.pcg-hosting-info {\n    padding: 65px 0;\n    background: var(--light-blue);\n}\n\n.pcg-hosting-info-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 35px;\n}\n\n.pcg-hosting-info-item {\n    text-align: center;\n}\n\n.pcg-info-icon {\n    display: flex;\n    width: 55px;\n    height: 55px;\n    margin: 0 auto 18px;\n    align-items: center;\n    justify-content: center;\n    color: var(--white);\n    background: var(--blue);\n    border-radius: 50%;\n    font-size: 21px;\n    font-weight: 800;\n}\n\n.pcg-hosting-info-item h3 {\n    margin-bottom: 9px;\n    font-size: 19px;\n}\n\n.pcg-hosting-info-item p {\n    margin-bottom: 0;\n    color: var(--text);\n    font-size: 14px;\n    line-height: 1.6;\n}\n\n\/* Popup *\/\n\n.pcg-modal {\n    position: fixed;\n    z-index: 999999;\n    inset: 0;\n    display: none;\n    padding: 25px;\n    align-items: center;\n    justify-content: center;\n    background: rgba(0,25,50,0.78);\n    overflow-y: auto;\n}\n\n.pcg-modal.pcg-modal-open {\n    display: flex;\n}\n\n.pcg-modal-box {\n    position: relative;\n    width: min(620px, 100%);\n    max-height: calc(100vh - 50px);\n    padding: 42px;\n    overflow-y: auto;\n    background: var(--white);\n    border-radius: 16px;\n    box-shadow: 0 25px 80px rgba(0,0,0,0.3);\n}\n\n.pcg-modal-close {\n    position: absolute;\n    top: 14px;\n    right: 16px;\n    display: flex;\n    width: 38px;\n    height: 38px;\n    padding: 0;\n    align-items: center;\n    justify-content: center;\n    color: var(--navy);\n    background: var(--light-blue);\n    border: 0;\n    border-radius: 50%;\n    cursor: pointer;\n    font-size: 25px;\n}\n\n.pcg-modal-close:hover {\n    color: var(--white);\n    background: var(--blue);\n}\n\n.pcg-modal-heading {\n    margin-bottom: 8px !important;\n    padding-right: 35px;\n    font-size: 30px;\n    line-height: 1.15;\n}\n\n.pcg-modal-intro {\n    margin-bottom: 28px !important;\n    color: var(--text);\n    font-size: 15px;\n    line-height: 1.6;\n}\n\n\/* Form *\/\n\n.pcg-form-row {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 16px;\n}\n\n.pcg-form-group {\n    margin-bottom: 17px;\n}\n\n.pcg-form-group label,\n.pcg-package-choice-title {\n    display: block;\n    margin-bottom: 7px;\n    color: var(--navy);\n    font-size: 13px;\n    font-weight: 700;\n}\n\n.pcg-form-group input,\n.pcg-form-group textarea {\n    width: 100%;\n    padding: 13px 14px;\n    color: var(--navy);\n    background: #f7f9fb;\n    border: 1px solid #d9e3ec;\n    border-radius: 6px;\n    font-family: inherit;\n    font-size: 14px;\n    outline: none;\n}\n\n.pcg-form-group input:focus,\n.pcg-form-group textarea:focus {\n    background: var(--white);\n    border-color: var(--blue);\n    box-shadow: 0 0 0 3px rgba(8,125,204,0.12);\n}\n\n.pcg-form-group textarea {\n    min-height: 115px;\n    resize: vertical;\n}\n\n.pcg-package-choices {\n    display: grid;\n    gap: 9px;\n    margin-bottom: 20px;\n}\n\n.pcg-radio-option {\n    display: flex;\n    padding: 12px 14px;\n    align-items: center;\n    gap: 10px;\n    color: var(--text);\n    background: #f7f9fb;\n    border: 1px solid #d9e3ec;\n    border-radius: 6px;\n    cursor: pointer;\n    font-size: 14px;\n}\n\n.pcg-radio-option input {\n    width: auto;\n    margin: 0;\n    accent-color: var(--blue);\n}\n\n.pcg-radio-option:has(input:checked) {\n    color: var(--navy);\n    background: var(--light-blue);\n    border-color: var(--blue);\n    font-weight: 700;\n}\n\n.pcg-submit-button {\n    width: 100%;\n    min-height: 51px;\n    padding: 13px 24px;\n    color: var(--white);\n    background: var(--blue);\n    border: 2px solid var(--blue);\n    border-radius: 6px;\n    cursor: pointer;\n    font-family: inherit;\n    font-size: 15px;\n    font-weight: 700;\n}\n\n.pcg-submit-button:hover {\n    background: #0068ae;\n}\n\n.pcg-form-note {\n    margin: 12px 0 0 !important;\n    color: #6d7e8f !important;\n    font-size: 12px !important;\n    text-align: center;\n}\n\n\/* Tablet *\/\n\n@media (max-width: 900px) {\n    .pcg-package-grid {\n        grid-template-columns: 1fr;\n        max-width: 620px;\n        margin: 0 auto;\n    }\n\n    .pcg-package-medium {\n        transform: none;\n    }\n\n    .pcg-package-medium:hover {\n        transform: translateY(-6px);\n    }\n}\n\n\/* Mobile *\/\n\n@media (max-width: 640px) {\n    .pcg-hosting-container {\n        width: min(100% - 28px, 1160px);\n    }\n\n    .pcg-hosting-hero {\n        padding: 38px 0 42px;\n        background-size: 40px 40px, 40px 40px, auto;\n    }\n\n    .pcg-hosting-hero h1 {\n        font-size: clamp(38px, 12vw, 50px);\n    }\n\n    .pcg-hosting-hero p {\n        font-size: 16px;\n    }\n\n    .pcg-packages-section {\n        padding: 60px 0;\n    }\n\n    .pcg-packages-heading {\n        text-align: left;\n    }\n\n    .pcg-package-card {\n        padding: 35px 23px 24px;\n    }\n\n    .pcg-hosting-info-grid,\n    .pcg-form-row {\n        grid-template-columns: 1fr;\n    }\n\n    .pcg-hosting-info-item {\n        text-align: left;\n    }\n\n    .pcg-info-icon {\n        margin: 0 0 16px;\n    }\n\n    .pcg-modal {\n        padding: 12px;\n        align-items: flex-start;\n    }\n\n    .pcg-modal-box {\n        max-height: none;\n        padding: 38px 22px 25px;\n    }\n}\n<\/style>\n\n<section class=\"pcg-hosting-page\">\n\n    <div class=\"pcg-hosting-hero\">\n        <div class=\"pcg-hosting-container\">\n            <div class=\"pcg-hosting-hero-content\">\n\n                <span class=\"pcg-hosting-eyebrow\">\n                    PCGuard Web Hosting\n                <\/span>\n\n                <h1>Reliable Hosting Solutions<\/h1>\n\n                <p>\n                    Choose a web hosting package that suits your business.\n                    All packages include secure local hosting, email accounts,\n                    webmail access and reliable data protection.\n                <\/p>\n\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"pcg-packages-section\">\n        <div class=\"pcg-hosting-container\">\n\n            <div class=\"pcg-packages-heading\">\n                <span>Hosting Packages<\/span>\n\n                <h2>Choose the Right Package for Your Website<\/h2>\n\n                <p>\n                    Select a package below and complete the enquiry form.\n                    PCGuard will contact you to discuss your hosting requirements.\n                <\/p>\n            <\/div>\n\n            <div class=\"pcg-package-grid\">\n\n                <article class=\"pcg-package-card pcg-package-small\">\n\n                    <h3 class=\"pcg-package-name\">Small<\/h3>\n\n                    <p class=\"pcg-package-description\">\n                        Ideal for a personal website or a small business website.\n                    <\/p>\n\n                    <div class=\"pcg-price\">\n                        <span class=\"pcg-currency\">R<\/span>\n\n                        <!-- \ud83d\udd34 PRICE TO CHECK: SMALL -->\n                        <span class=\"pcg-price-number\">75<\/span>\n\n                        <span class=\"pcg-price-period\">\/month<\/span>\n                    <\/div>\n\n                    <ul class=\"pcg-package-list\">\n                        <li>1 GB hard drive space<\/li>\n                        <li>15 email accounts<\/li>\n                        <li>20 email alias accounts<\/li>\n                        <li>SSL certificate included<\/li>\n                        <li>Webmail access<\/li>\n                        <li>Unlimited data traffic<\/li>\n                        <li>Effective anti-spam protection<\/li>\n                        <li>Hosted on local Linux servers<\/li>\n                        <li>CCTV security surveillance<\/li>\n                        <li>24-hour armed response<\/li>\n                        <li>Biometric access control<\/li>\n                        <li>Backup diesel generators<\/li>\n                    <\/ul>\n\n                    <!-- \ud83d\udd34 CHANGE SMALL PRICE HERE TOO -->\n\n                    <button class=\"pcg-package-button\" type=\"button\" data-package=\"Small\" data-price=\"75\">\n                        Select Package\n                    <\/button>\n\n                <\/article>\n\n                <article class=\"pcg-package-card pcg-package-medium\">\n\n                    <div class=\"pcg-popular-label\">Most Popular<\/div>\n\n                    <h3 class=\"pcg-package-name\">Medium<\/h3>\n\n                    <p class=\"pcg-package-description\">\n                        Great for an expanding business or an online store.\n                    <\/p>\n\n                    <div class=\"pcg-price\">\n                        <span class=\"pcg-currency\">R<\/span>\n\n                        <!-- \ud83d\udd34 PRICE TO CHECK: MEDIUM -->\n                        <span class=\"pcg-price-number\">135<\/span>\n\n                        <span class=\"pcg-price-period\">\/month<\/span>\n                    <\/div>\n\n                    <ul class=\"pcg-package-list\">\n                        <li>5 GB hard drive space<\/li>\n                        <li>50 email accounts<\/li>\n                        <li>40 email alias accounts<\/li>\n                        <li>SSL certificate included<\/li>\n                        <li>Webmail access<\/li>\n                        <li>Unlimited data traffic<\/li>\n                        <li>Effective anti-spam protection<\/li>\n                        <li>Google Analytics<\/li>\n                        <li>Hosted on local Linux servers<\/li>\n                        <li>CCTV security surveillance<\/li>\n                        <li>24-hour armed response<\/li>\n                        <li>Biometric access control<\/li>\n                        <li>Backup diesel generators<\/li>\n                    <\/ul>\n\n                    <!-- \ud83d\udd34 CHANGE MEDIUM PRICE HERE TOO -->\n\n                    <button class=\"pcg-package-button\" type=\"button\" data-package=\"Medium\" data-price=\"135\">\n                        Select Package\n                    <\/button>\n\n                <\/article>\n\n                <article class=\"pcg-package-card pcg-package-large\">\n\n                    <h3 class=\"pcg-package-name\">Large<\/h3>\n\n                    <p class=\"pcg-package-description\">\n                        Perfect for a growing business or a larger online store.\n                    <\/p>\n\n                    <div class=\"pcg-price\">\n                        <span class=\"pcg-currency\">R<\/span>\n\n                        <!-- \ud83d\udd34 PRICE TO CHECK: LARGE -->\n                        <span class=\"pcg-price-number\">195<\/span>\n\n                        <span class=\"pcg-price-period\">\/month<\/span>\n                    <\/div>\n\n                    <ul class=\"pcg-package-list\">\n                        <li>10 GB hard drive space<\/li>\n                        <li>100 email accounts<\/li>\n                        <li>SSL certificate included<\/li>\n                        <li>Webmail access<\/li>\n                        <li>Unlimited data traffic<\/li>\n                        <li>Effective anti-spam protection<\/li>\n                        <li>Google Analytics<\/li>\n                        <li>Hosted on local Linux servers<\/li>\n                        <li>CCTV security surveillance<\/li>\n                        <li>24-hour armed response<\/li>\n                        <li>Biometric access control<\/li>\n                        <li>Backup diesel generators<\/li>\n                    <\/ul>\n\n                    <!-- \ud83d\udd34 CHANGE LARGE PRICE HERE TOO -->\n\n                    <button class=\"pcg-package-button\" type=\"button\" data-package=\"Large\" data-price=\"195\">\n                        Select Package\n                    <\/button>\n\n                <\/article>\n\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"pcg-hosting-info\">\n        <div class=\"pcg-hosting-container\">\n            <div class=\"pcg-hosting-info-grid\">\n\n                <div class=\"pcg-hosting-info-item\">\n                    <div class=\"pcg-info-icon\">\u2713<\/div>\n                    <h3>Secure Local Hosting<\/h3>\n                    <p>Your website is hosted on secure local Linux servers.<\/p>\n                <\/div>\n\n                <div class=\"pcg-hosting-info-item\">\n                    <div class=\"pcg-info-icon\">@<\/div>\n                    <h3>Business Email<\/h3>\n                    <p>Professional email accounts and convenient webmail access.<\/p>\n                <\/div>\n\n                <div class=\"pcg-hosting-info-item\">\n                    <div class=\"pcg-info-icon\">24<\/div>\n                    <h3>Protected Facilities<\/h3>\n                    <p>Security surveillance, access control and backup power.<\/p>\n                <\/div>\n\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"pcg-modal\" id=\"pcgHostingModal\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"pcgModalTitle\">\n\n        <div class=\"pcg-modal-box\">\n\n            <button class=\"pcg-modal-close\" id=\"pcgModalClose\" type=\"button\" aria-label=\"Close enquiry form\">\n                \u00d7\n            <\/button>\n\n            <h2 class=\"pcg-modal-heading\" id=\"pcgModalTitle\">\n                Hosting Package Enquiry\n            <\/h2>\n\n            <p class=\"pcg-modal-intro\">\n                Complete your details below and your email application will\n                prepare an enquiry for PCGuard.\n            <\/p>\n\n            <form id=\"pcgHostingForm\">\n\n                <div class=\"pcg-form-row\">\n\n                    <div class=\"pcg-form-group\">\n                        <label for=\"pcgName\">Name *<\/label>\n                        <input id=\"pcgName\" type=\"text\" required=\"\">\n                    <\/div>\n\n                    <div class=\"pcg-form-group\">\n                        <label for=\"pcgPhone\">Contact number *<\/label>\n                        <input id=\"pcgPhone\" type=\"tel\" required=\"\">\n                    <\/div>\n\n                <\/div>\n\n                <div class=\"pcg-form-group\">\n                    <label for=\"pcgEmail\">Email address *<\/label>\n                    <input id=\"pcgEmail\" type=\"email\" required=\"\">\n                <\/div>\n\n                <span class=\"pcg-package-choice-title\">\n                    Select a hosting package\n                <\/span>\n\n                <div class=\"pcg-package-choices\">\n\n                    <label class=\"pcg-radio-option\">\n                        <input type=\"radio\" name=\"hostingPackage\" value=\"Small \u2013 R75\/month\" data-package=\"Small\" required=\"\">\n\n                        <!-- \ud83d\udd34 PRICE TO CHECK -->\n                        Small \u2013 R75\/month\n                    <\/label>\n\n                    <label class=\"pcg-radio-option\">\n                        <input type=\"radio\" name=\"hostingPackage\" value=\"Medium \u2013 R135\/month\" data-package=\"Medium\">\n\n                        <!-- \ud83d\udd34 PRICE TO CHECK -->\n                        Medium \u2013 R135\/month\n                    <\/label>\n\n                    <label class=\"pcg-radio-option\">\n                        <input type=\"radio\" name=\"hostingPackage\" value=\"Large \u2013 R195\/month\" data-package=\"Large\">\n\n                        <!-- \ud83d\udd34 PRICE TO CHECK -->\n                        Large \u2013 R195\/month\n                    <\/label>\n\n                <\/div>\n\n                <div class=\"pcg-form-group\">\n                    <label for=\"pcgMessage\">Message<\/label>\n\n                    <textarea id=\"pcgMessage\" placeholder=\"Tell us anything else we should know...\"><\/textarea>\n                <\/div>\n\n                <button class=\"pcg-submit-button\" type=\"submit\">\n                    Submit Enquiry\n                <\/button>\n\n                <p class=\"pcg-form-note\">\n                    The enquiry will be addressed to werner@pcguard.co.za.\n                <\/p>\n\n            <\/form>\n\n        <\/div>\n    <\/div>\n\n<\/section>\n\n<script>\n(function () {\n    const modal = document.getElementById(\"pcgHostingModal\");\n    const closeButton = document.getElementById(\"pcgModalClose\");\n    const form = document.getElementById(\"pcgHostingForm\");\n    const packageButtons = document.querySelectorAll(\".pcg-package-button\");\n\n    function openModal(packageName) {\n        const options = document.querySelectorAll(\n            'input[name=\"hostingPackage\"]'\n        );\n\n        options.forEach(function (option) {\n            option.checked = option.dataset.package === packageName;\n        });\n\n        modal.classList.add(\"pcg-modal-open\");\n        document.body.style.overflow = \"hidden\";\n\n        setTimeout(function () {\n            document.getElementById(\"pcgName\").focus();\n        }, 100);\n    }\n\n    function closeModal() {\n        modal.classList.remove(\"pcg-modal-open\");\n        document.body.style.overflow = \"\";\n    }\n\n    packageButtons.forEach(function (button) {\n        button.addEventListener(\"click\", function () {\n            openModal(button.dataset.package);\n        });\n    });\n\n    closeButton.addEventListener(\"click\", closeModal);\n\n    modal.addEventListener(\"click\", function (event) {\n        if (event.target === modal) {\n            closeModal();\n        }\n    });\n\n    document.addEventListener(\"keydown\", function (event) {\n        if (event.key === \"Escape\") {\n            closeModal();\n        }\n    });\n\n    form.addEventListener(\"submit\", function (event) {\n        event.preventDefault();\n\n        if (!form.reportValidity()) {\n            return;\n        }\n\n        const selectedPackage = document.querySelector(\n            'input[name=\"hostingPackage\"]:checked'\n        );\n\n        const name = document.getElementById(\"pcgName\").value.trim();\n        const phone = document.getElementById(\"pcgPhone\").value.trim();\n        const email = document.getElementById(\"pcgEmail\").value.trim();\n        const message = document.getElementById(\"pcgMessage\").value.trim();\n\n        const subject =\n            \"Web Hosting Enquiry \u2013 \" + selectedPackage.value;\n\n        const emailBody =\n            \"New PCGuard web hosting enquiry\\n\\n\" +\n            \"Name: \" + name + \"\\n\" +\n            \"Contact number: \" + phone + \"\\n\" +\n            \"Email address: \" + email + \"\\n\" +\n            \"Selected package: \" + selectedPackage.value + \"\\n\\n\" +\n            \"Message:\\n\" +\n            (message || \"No additional message provided.\");\n\n        const mailtoLink =\n            \"mailto:werner@pcguard.co.za\" +\n            \"?subject=\" + encodeURIComponent(subject) +\n            \"&body=\" + encodeURIComponent(emailBody);\n\n        window.location.href = mailtoLink;\n    });\n})();\n<\/script>\n\n<style>\n\/* PCGUARD HOSTING CONTACT SECTION *\/\n\n.pcg-hosting-cta,\n.pcg-hosting-cta * {\n    box-sizing: border-box;\n}\n\n.pcg-hosting-cta {\n    width: 100%;\n    padding: 68px 0;\n    background:\n        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),\n        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px),\n        linear-gradient(120deg, #00294f 0%, #07477f 100%);\n    background-size: 64px 64px, 64px 64px, auto;\n    font-family: inherit;\n}\n\n.pcg-hosting-cta-container {\n    display: flex;\n    width: min(1160px, calc(100% - 40px));\n    margin: 0 auto;\n    align-items: center;\n    justify-content: space-between;\n    gap: 45px;\n}\n\n.pcg-hosting-cta-copy {\n    max-width: 750px;\n}\n\n.pcg-hosting-cta h2 {\n    margin: 0 0 12px;\n    color: #ffffff;\n    font-size: clamp(30px, 4vw, 42px);\n    line-height: 1.15;\n    letter-spacing: -1px;\n}\n\n.pcg-hosting-cta p {\n    margin: 0;\n    color: rgba(255,255,255,0.82);\n    font-size: 16px;\n    line-height: 1.7;\n}\n\n.pcg-hosting-cta-button {\n    display: inline-flex;\n    min-width: 150px;\n    min-height: 50px;\n    padding: 13px 25px;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    color: #ffffff !important;\n    background: #087dcc;\n    border: 2px solid #087dcc;\n    border-radius: 6px;\n    font-size: 15px;\n    font-weight: 700;\n    line-height: 1.2;\n    text-decoration: none !important;\n    transition:\n        background 0.2s ease,\n        border-color 0.2s ease,\n        transform 0.2s ease;\n}\n\n.pcg-hosting-cta-button:hover {\n    color: #ffffff !important;\n    background: #0068ae;\n    border-color: #0068ae;\n    transform: translateY(-2px);\n}\n\n@media (max-width: 700px) {\n    .pcg-hosting-cta {\n        padding: 55px 0;\n        background-size: 40px 40px, 40px 40px, auto;\n    }\n\n    .pcg-hosting-cta-container {\n        width: min(100% - 28px, 1160px);\n        align-items: flex-start;\n        flex-direction: column;\n        gap: 25px;\n    }\n\n    .pcg-hosting-cta-button {\n        width: 100%;\n    }\n}\n<\/style>\n\n<section class=\"pcg-hosting-cta\">\n    <div class=\"pcg-hosting-cta-container\">\n\n        <div class=\"pcg-hosting-cta-copy\">\n\n            <h2>Need Reliable Web Hosting?<\/h2>\n\n            <p>\n                Not sure which hosting package is right for your website?\n                Contact PCGuard and we\u2019ll help you choose a solution that\n                suits your business and online requirements.\n            <\/p>\n\n        <\/div>\n\n        <a\n            class=\"pcg-hosting-cta-button\"\n            href=\"https:\/\/pcguard.co.za\/contact\/\">\n            Contact Us\n        <\/a>\n\n    <\/div>\n<\/section>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>PCGuard Web Hosting Reliable Hosting Solutions Choose a web hosting package that suits your business. All packages include secure local hosting, email accounts, webmail access and reliable data protection. Hosting Packages Choose the Right Package for Your Website Select a package below and complete the enquiry form. PCGuard will contact you to discuss your hosting [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-144","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pcguard.co.za\/index.php?rest_route=\/wp\/v2\/pages\/144","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pcguard.co.za\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pcguard.co.za\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pcguard.co.za\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pcguard.co.za\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=144"}],"version-history":[{"count":8,"href":"https:\/\/pcguard.co.za\/index.php?rest_route=\/wp\/v2\/pages\/144\/revisions"}],"predecessor-version":[{"id":438,"href":"https:\/\/pcguard.co.za\/index.php?rest_route=\/wp\/v2\/pages\/144\/revisions\/438"}],"wp:attachment":[{"href":"https:\/\/pcguard.co.za\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}