/* =========================================
   WHMCS DARK SAAS + FULL CENTERED APP
========================================= */

/* =========================
   BASE
========================= */

body {
    background: #0b0f17 !important;
    color: #ffffff !important;
    font-family: Inter, system-ui, sans-serif !important;
}

/* FULL SCREEN BACKGROUND LAYER */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 10% 10%, rgba(124,58,237,0.20), transparent 45%),
        radial-gradient(circle at 90% 20%, rgba(37,99,235,0.18), transparent 50%),
        #05060a;
    z-index: -1;
}

/* =========================
   TRUE CENTERED APP WRAP (WHMCS SAFE)
========================= */

#page-container,
#content-container,
#main-body,
#content,
.wrapper,
.container,
.container-fluid {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* FORCE MAIN APP INTO A CARD */
#page-container,
#content-container,
#main-body {
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 18px !important;
    backdrop-filter: blur(12px);
    overflow: hidden;
}

/* =========================
   HEADER + FOOTER ALIGN
========================= */

#header,
#footer {
    max-width: 1200px;
    margin: 0 auto;
}

/* =========================
   LINKS
========================= */

a {
    color: #a5b4fc !important;
    text-decoration: none !important;
}

a:hover {
    opacity: 0.85;
}

/* =========================
   NAVBAR
========================= */

.navbar,
.navbar-default {
    background: rgba(10, 12, 20, 0.8) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(10px);
}

/* =========================
   PANELS / CARDS
========================= */

.panel,
div.panel,
.card,
div.card,
.tiles .tile {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

.panel-heading,
.card-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    color: white !important;
}

/* =========================
   TABLES
========================= */

table,
.table {
    background: transparent !important;
    color: white !important;
}

.table th {
    background: rgba(255,255,255,0.03) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.table td {
    border-color: rgba(255,255,255,0.06) !important;
}

/* =========================
   BUTTONS
========================= */

.btn,
.btn-default {
    background: rgba(255,255,255,0.06) !important;
    color: white !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
}

.btn:hover {
    background: rgba(99,102,241,0.2) !important;
    border-color: rgba(99,102,241,0.4) !important;
}

.btn-primary {
    background: white !important;
    color: black !important;
    border: none !important;
}

/* =========================
   FORMS
========================= */

input,
select,
textarea {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: white !important;
    border-radius: 10px !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(99,102,241,0.5) !important;
    outline: none !important;
}

/* =========================
   SIDEBAR
========================= */

#sidebar,
.sidebar {
    background: transparent !important;
}

/* =========================
   LISTS / DASHBOARD
========================= */

.list-group-item {
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    color: white !important;
}

/* =========================
   BADGES
========================= */

.badge {
    background: rgba(99,102,241,0.3) !important;
    color: white !important;
}

/* =========================
   ALERTS
========================= */

.alert {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: white !important;
}

/* =========================
   REMOVE SHADOWS
========================= */

* {
    box-shadow: none !important;
}

/* =========================
   MOBILE FIX
========================= */

@media (max-width: 1250px) {
    #page-container,
    #content-container,
    #main-body,
    #content {
        margin: 0 12px !important;
    }
}

<div class="card mb-4">
    <div class="card-body extra-padding">

        <div class="mb-4">
            <h6 class="h3">Contact Us</h6>
            <p class="text-muted mb-0">We're ready and waiting for your questions</p>
        </div>

        
        
                    <form method="post" action="contact.php" role="form">
<input type="hidden" name="token" value="d5d04a7be9cd4369b418f39a5fb862c65ad63787" />
            <input type="hidden" name="action" value="send" />

                <div class="form-group row">
                    <label for="inputName" class="col-sm-3 col-form-label text-right font-">Name</label>
                    <div class="col-sm-7">
                        <input type="text" name="name" value="" class="form-control" id="inputName" />
                    </div>
                </div>
                <div class="form-group row">
                    <label for="inputEmail" class="col-sm-3 col-form-label text-right">Email Address</label>
                    <div class="col-sm-7">
                        <input type="email" name="email" value="" class="form-control" id="inputEmail" />
                    </div>
                </div>
                <div class="form-group row">
                    <label for="inputSubject" class="col-sm-3 col-form-label text-right">Subject</label>
                    <div class="col-sm-7">
                        <input type="text" name="subject" value="" class="form-control" id="inputSubject" />
                    </div>
                </div>
                <div class="form-group row">
                    <label for="inputMessage" class="col-sm-3 col-form-label text-right">Message</label>
                    <div class="col-sm-9">
                        <textarea name="message" rows="7" class="form-control" id="inputMessage"></textarea>
                    </div>
                </div>

                                    <div class="text-center margin-bottom">
                            <div class="text-center row justify-content-center">
        
                    <div class="col-md-8 mx-auto mb-3 mb-sm-0">
                <div id="default-captcha-domainchecker" class="text-center row pb-3">
                    <p>Please enter the characters you see in the image below into the text box provided. This is required to prevent automated submissions.</p>

                    <div class="col-6 captchaimage">
                        <img id="inputCaptchaImage" data-src="https://3e90228d-ef1b-4520-a604-875266950730.package.webpros.cloud/includes/verifyimage.php" src="https://3e90228d-ef1b-4520-a604-875266950730.package.webpros.cloud/includes/verifyimage.php" align="middle" />
                    </div>

                    <div class="col-6">
                        <input id="inputCaptcha" type="text" name="code" maxlength="6" class="form-control "
                               data-toggle="tooltip" data-placement="right" data-trigger="manual" title="Required"/>
                    </div>
                </div>
            </div>
        
            </div>
                    </div>
                
                <div class="text-center">
                    <button type="submit" class="btn btn-primary">Send Message</button>
                </div>
            </form>

        
    </div>
</div>

<p style="text-align:center;">Powered by <a href="https://www.whmcs.com/" target="_blank">WHMCompleteSolution</a></p>
    </section>

    <!-- =========================
         DARK SAAS FOOTER (FIXED)
    ========================== -->

    <footer id="footer" class="footer-dark">

        <div class="container">

            <div class="footer-grid-dark">

                <!-- BRAND -->
                <div class="footer-col">
                    <div class="footer-brand">
                        Company Name
                    </div>

                    <p class="footer-text">
                        Secure infrastructure, domains and hosting management platform built for performance and reliability.
                    </p>

                    <div class="footer-social">
                                            </div>
                </div>

                <!-- NAV -->
                <div class="footer-col">
                    <div class="footer-title">Navigation</div>

                    <a href="/clientarea.php" class="footer-link">Client Area</a>
                    <a href="/contact.php" class="footer-link">Contact Us</a>

                    
                    <a href="/serverstatus.php" class="footer-link">System Status</a>
                </div>

                <!-- SETTINGS -->
                <div class="footer-col">

                    <div class="footer-title">Settings</div>

                                            <button class="footer-pill-dark" data-toggle="modal" data-target="#modalChooseLanguage">
                            <i class="fas fa-globe"></i>
                            English · USD
                        </button>
                    
                    
                </div>

            </div>

            <div class="footer-bottom-dark">
                <p>
                    Copyright &copy; 2026 Company Name. All Rights Reserved.
                </p>
            </div>

        </div>

    </footer>

    <!-- OVERLAY -->
    <div id="fullpage-overlay" class="overlay-dark">
        <div class="overlay-inner">
            <img src="/assets/img/overlay-spinner.svg" alt="">
            <span class="msg"></span>
        </div>
    </div>

    <!-- MODAL -->
    <div class="modal system-modal fade" id="modalAjax" tabindex="-1">

        <div class="modal-dialog modal-dialog-centered">

            <div class="modal-content modal-dark">

                <div class="modal-header">
                    <h5 class="modal-title"></h5>
                    <button type="button" class="close text-white" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    Loading...
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        Close
                    </button>
                    <button type="button" class="btn btn-primary modal-submit">
                        Submit
                    </button>
                </div>

            </div>

        </div>

    </div>

    <!-- LANGUAGE MODAL -->
    <form method="get" action="/contact.php?">
        <div class="modal fade modal-dark" id="modalChooseLanguage" tabindex="-1">

            <div class="modal-dialog modal-lg modal-dialog-centered">

                <div class="modal-content modal-dark">

                    <div class="modal-header">
                        <h5 class="modal-title">Choose language</h5>
                        <button type="button" class="close text-white" data-dismiss="modal">
                            <span>&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">

                                                    <div class="grid-dark">
                                <input type="hidden" name="language" value="english">

                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="arabic">
                                        العربية
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="azerbaijani">
                                        Azerbaijani
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="catalan">
                                        Català
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="chinese">
                                        中文
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="croatian">
                                        Hrvatski
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="czech">
                                        Čeština
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="danish">
                                        Dansk
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="dutch">
                                        Nederlands
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark active"
                                            data-value="english">
                                        English
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="estonian">
                                        Estonian
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="farsi">
                                        Persian
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="french">
                                        Français
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="german">
                                        Deutsch
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="hebrew">
                                        עברית
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="hungarian">
                                        Magyar
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="italian">
                                        Italiano
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="macedonian">
                                        Macedonian
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="norwegian">
                                        Norwegian
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="portuguese-br">
                                        Português
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="portuguese">
                                        Português
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="romanian">
                                        Română
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="russian">
                                        Русский
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="spanish">
                                        Español
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="swedish">
                                        Svenska
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="turkish">
                                        Türkçe
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="ukrainian">
                                        Українська
                                    </button>
                                                            </div>
                        
                        
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary w-100">Apply</button>
                    </div>

                </div>

            </div>

        </div>
    </form>

    <!-- ADMIN BUTTON -->
    
    <form action="#" id="frmGeneratePassword">
    <div class="modal fade" id="modalGeneratePassword">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h4 class="modal-title">
                        Generate Password
                    </h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-danger w-hidden" id="generatePwLengthError">
                        Please enter a number between 8 and 64 for the password length
                    </div>
                    <div class="form-group row">
                        <label for="generatePwLength" class="col-sm-4 col-form-label">Password Length</label>
                        <div class="col-sm-8">
                            <input type="number" min="8" max="64" value="12" step="1" class="form-control input-inline input-inline-100" id="inputGeneratePasswordLength">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="generatePwOutput" class="col-sm-4 col-form-label">Generated Password</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="inputGeneratePasswordOutput">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-8 offset-sm-4">
                            <button type="submit" class="btn btn-default btn-sm">
                                <i class="fas fa-plus fa-fw"></i>
                                Generate new password
                            </button>
                            <button type="button" class="btn btn-default btn-sm copy-to-clipboard" data-clipboard-target="#inputGeneratePasswordOutput">
                                <img src="/assets/img/clippy.svg" alt="Copy to clipboard" width="15">
                                Copy
                            </button>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        Close
                    </button>
                    <button type="button" class="btn btn-primary" id="btnGeneratePasswordInsert" data-clipboard-target="#inputGeneratePasswordOutput">
                        Copy to clipboard and Insert
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>

    

    <!-- =========================
         DARK FOOTER CSS
    ========================== -->

    <style>
        .footer-dark {
            margin-top: 80px;
            padding: 70px 0 30px;
            background: #05060a;
            border-top: 1px solid rgba(255,255,255,0.06);
        }

        .footer-grid-dark {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            gap: 50px;
        }

        .footer-brand {
            font-size: 18px;
            font-weight: 800;
            color: #fff;
            margin-bottom: 10px;
        }

        .footer-text {
            color: rgba(255,255,255,0.55);
            font-size: 14px;
            max-width: 320px;
        }

        .footer-title {
            font-size: 12px;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: rgba(255,255,255,0.35);
            margin-bottom: 12px;
        }

        .footer-link {
            display: block;
            color: rgba(255,255,255,0.6);
            text-decoration: none;
            margin-bottom: 10px;
            transition: 0.2s;
        }

        .footer-link:hover {
            color: #00a6ff;
            transform: translateX(3px);
        }

        .footer-pill-dark {
            padding: 10px 14px;
            border-radius: 12px;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.08);
            color: #fff;
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .footer-bottom-dark {
            margin-top: 50px;
            text-align: center;
            color: rgba(255,255,255,0.35);
            font-size: 13px;
        }

        .modal-dark {
            background: #0a0c14;
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 16px;
            color: #fff;
        }

        .grid-dark {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }

        .grid-item-dark {
            padding: 10px;
            border-radius: 10px;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.08);
            color: #fff;
            cursor: pointer;
            text-align: center;
        }

        .grid-item-dark:hover,
        .grid-item-dark.active {
            background: rgba(0,166,255,0.15);
            border-color: rgba(0,166,255,0.35);
        }

        .admin-fab-dark {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 48px;
            height: 48px;
            border-radius: 14px;
            background: rgba(255,77,77,0.12);
            border: 1px solid rgba(255,77,77,0.35);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
        }

        @media (max-width: 992px) {
            .footer-grid-dark {
                grid-template-columns: 1fr;
            }

            .grid-dark {
                grid-template-columns: 1fr;
            }
        }
    </style>