/*
Theme Name: WPCodeQuill Elementor Starter
Theme URI: https://wpcodequill.com/themes/elementor-starter/
Author: WPCodeQuill
Author URI: https://wpcodequill.com
Description: A lightweight, high-performance foundation designed specifically for Elementor and modern page builders. Built with strict PHP 8.2 compatibility, this theme features zero bloat, semantic HTML5 markup, and schema.org integration. It provides the perfect blank canvas for developers to build fast, responsive, and accessibility-ready websites.
Version: 1.7.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wpcodequill
Tags: elementor, custom-background, custom-logo, custom-menu, featured-images, full-width-template, one-column, theme-options, translation-ready, accessibility-ready, block-styles, wide-blocks
*/

/* RESET & VARS */
body, h1, h2, h3, h4, h5, h6, p, ul, li { margin: 0; padding: 0; box-sizing: border-box; }
:root { --background-color: #121212; --surface-color: #1E1E1E; --primary-color: #00A896; --text-color: #EAEAEA; --heading-color: #FFFFFF; --border-color: #333333; }
body { font-family: 'Roboto', sans-serif; background-color: var(--background-color); color: var(--text-color); line-height: 1.6; font-size: 16px; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* =========================================
   HEADER STYLES
   ========================================= */

/* DESKTOP HEADER = STICKY */
.custom-header { 
    background-color: var(--surface-color); 
    padding: 0; 
    position: fixed; /* Sticky on Desktop */
    width: 100%; 
    top: 0; 
    z-index: 1000; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); 
    height: 80px; 
    display: flex; 
    align-items: center; 
}
.admin-bar .custom-header { top: 32px; }

.navbar { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100%; }
.logo-wrapper { display: flex; align-items: center; max-width: 250px; }
.custom-logo-link img, .custom-logo { height: 60px; width: auto; object-fit: contain; }

/* DESKTOP MENU */
.nav-menu { list-style: none; display: flex; align-items: center; margin: 0; padding: 0; }
.nav-menu > li { margin-left: 30px; position: relative; height: 80px; display: flex; align-items: center; }
.nav-menu > li > a { text-decoration: none; color: var(--text-color); font-weight: 500; font-size: 1.1rem; transition: color 0.3s ease; }
.nav-menu > li > a:hover { color: var(--primary-color); }

/* SUB MENUS */
.nav-menu .sub-menu { display: none; position: absolute; top: 100%; left: 0; background-color: var(--surface-color); min-width: 240px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5); z-index: 9999; padding: 10px 0; border-top: 3px solid var(--primary-color); list-style: none; }
.nav-menu li:hover > .sub-menu { display: block; }
.nav-menu .sub-menu li { width: 100%; display: block; height: auto; margin: 0; }
.nav-menu .sub-menu li a { display: block; padding: 12px 20px; color: var(--text-color); border-bottom: 1px solid #333; font-size: 0.95rem; }
.nav-menu .sub-menu li a:hover { background-color: #2a2a2a; color: var(--primary-color); }

/* CONTENT PADDING (DESKTOP) - Push content down */
.site-main { padding-top: 100px !important; }

/* =========================================
   MOBILE STYLES (Max Width 768px)
   ========================================= */
@media (max-width: 768px) {
    
    /* 1. Header is Relative (Not Sticky) */
    .custom-header { position: relative; top: auto; }

    /* 2. Reset Content Padding */
    .site-main { padding-top: 0 !important; }

    /* 3. MOBILE MENU CONTAINER */
    .nav-menu { 
        position: absolute; 
        left: -100%; 
        top: 100%; /* Below header */
        flex-direction: column; 
        background-color: var(--surface-color); 
        width: 100%; 
        height: auto; 
        min-height: 50vh;
        text-align: left; 
        transition: left 0.3s ease-in-out; 
        padding: 20px; 
        z-index: 998; /* Under Hamburger */
        display: flex; 
        box-shadow: 0 10px 15px rgba(0,0,0,0.5);
    }

    /* Active State */
    .nav-menu.active { left: 0; }

    /* Menu Items */
    .nav-menu li { margin: 0; width: 100%; display: block; border-bottom: 1px solid #333; height: auto; }
    .nav-menu > li > a { padding: 15px 0; display: block; font-size: 1.2rem; }
    .nav-menu .sub-menu { position: relative; display: block; top: 0; box-shadow: none; border: none; padding-left: 20px; width: 100%; }
    .nav-menu .sub-menu li a { border-bottom: none; }

    /* 4. HAMBURGER ICON (Fix) */
    .hamburger { 
        display: block; 
        margin-left: auto; 
        cursor: pointer;
        padding: 10px; 
        z-index: 1001; /* Highest priority */
        position: relative;
        background: transparent;
        border: none;
    }
    .hamburger .bar { display: block; width: 25px; height: 3px; margin: 5px auto; transition: all 0.3s ease-in-out; background-color: var(--heading-color); }
    
    /* Animation */
    .hamburger.active .bar:nth-child(2) { opacity: 0; }
    .hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* Footer Fix */
    .footer-links { flex-direction: column; gap: 10px; }
    .footer-links li:after { content: ""; } 
}

/* GENERAL STYLES */
#home-hero { display: flex; align-items: center; justify-content: center; text-align: center; height: 100vh; background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://bginfrasecure.com/wp-content/uploads/2025/12/ChatGPT-Image-Dec-21-2025-08_53_17-AM.png') no-repeat center center/cover; }
.cta-button { display: inline-block; background-color: var(--primary-color); color: #fff; padding: 15px 30px; text-decoration: none; font-size: 1.2rem; border-radius: 5px; font-weight: 700; transition: background-color 0.3s ease; }
.section-title { text-align: center; margin-bottom: 50px; padding-top: 50px; }
h2 { font-size: 2.5rem; text-align: center; padding-bottom: 10px; border-bottom: 3px solid var(--primary-color); display: inline-block; color: white; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; margin-top: 50px; }
.service-card { display: block; text-decoration: none; color: var(--text-color); background-color: var(--surface-color); padding: 40px 30px; text-align: center; border-radius: 8px; border: 1px solid var(--border-color); transition: transform 0.3s ease; }
.service-card:hover { transform: translateY(-10px); }
.service-card .icon { font-size: 3rem; color: var(--primary-color); margin-bottom: 20px; }
.contact-wrapper { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.contact-info-col, .contact-form-col { flex: 1; min-width: 300px; }
.custom-form-container-inner { background-color: #1E1E1E; padding: 30px; border-radius: 8px; border: 1px solid #333333; }
.custom-form-group { margin-bottom: 20px; }
.custom-form-label { display: block; color: #FFFFFF; margin-bottom: 8px; font-family: 'Montserrat', sans-serif; }
.custom-form-input, .custom-form-textarea { width: 100%; padding: 12px; background-color: #121212; border: 1px solid #333333; color: #EAEAEA; border-radius: 5px; font-size: 1rem; }
.custom-form-button { background-color: #00A896; color: #fff; padding: 12px 25px; border: none; border-radius: 5px; cursor: pointer; font-size: 1.1rem; font-weight: 700; }
.social-icons-wrapper { display: flex; gap: 20px; align-items: center; margin-top: 20px; margin-bottom: 30px; }
a.social-icon { font-size: 1.8rem; color: #00A896; text-decoration: none; }
.map-container { width: 100%; margin-top: 20px; border: 4px solid var(--primary-color); border-radius: 8px; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
.footer { background-color: var(--surface-color); text-align: center; padding: 40px 0 20px; border-top: 1px solid var(--border-color); margin-top: 50px; }
.footer-menu-container { margin-bottom: 20px; }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; flex-wrap: wrap; }
.footer-links li { margin: 0 10px; position: relative; }
.footer-links li:after { content: "|"; color: #555; margin-left: 20px; position: absolute; right: -12px; }
.footer-links li:last-child:after { content: ""; } 
.footer-links a { color: #CCCCCC; text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
.footer-links a:hover { color: var(--primary-color); }
.copyright-text { font-size: 0.8rem; color: #888; }
.entry-content p { margin-bottom: 20px; }
.entry-content h2, .entry-content h3 { margin-top: 40px; margin-bottom: 20px; color: var(--heading-color); }
.entry-content ul, .entry-content ol { margin-bottom: 20px; padding-left: 20px; }
.entry-content a { color: var(--primary-color); text-decoration: underline; }
.post-navigation a { color: var(--text-color); text-decoration: none; font-weight: 700; border: 1px solid var(--border-color); padding: 10px 20px; border-radius: 5px; transition: 0.3s; }
.post-navigation a:hover { background-color: var(--primary-color); color: white; border-color: var(--primary-color); }