/* Theme Name: Gurus Child Theme URI: http://demo.bravisthemes.com/gurus Author: Bravis-Themes Author URI: https://themeforest.net/user/bravis-themes/portfolio Description: Gurus is created to provide modern solution for any business type. The theme is packed with large collection of beautifully designed homepages and a large number of inner page styles. Also, there are versatile and easily tailored portfolio templates that will give you full freedom to create the showcase you need. Moreover, Gurus looks flawless on all devices, so your content will look equally amazing across all device types. Whether you need a personal theme or professional theme, Gurus can be a perfect fit. Get it today and discover all the features one WordPress site needs. Version: 1.0.8 License: ThemeForest License URI: https://themeforest.net/licenses Template: gurus Text Domain: gurus-child Tags: business, consulting, consultant, agency, company, advertising, corporate, finance, financial, multipurpose, accountant, marketing, software, startup, modern, saas */ /* =========================================== Sticky Header - Dark Grayish Blue on Scroll =========================================== */ /* * Desktop (> 1200px): * The main header (.pxl-header-elementor-main) is position:absolute by default * (transparent overlay). On scroll, we switch it to position:fixed and add * the dark background. We do NOT style the parent #pxl-header-elementor * on desktop because it's a 0-height wrapper — styling it creates ghost * shadows/backgrounds that overlap the fixed child. * * Mobile/Tablet (<= 1200px): * The parent #pxl-header-elementor is position:sticky. The mobile header * (#pxl-header-mobile) is the visible element. We style it directly. */ /* --- DESKTOP -------------------------------------------------- */ @media screen and (min-width: 1201px) { /* Kill the Elementor background transition so there's no ghost fade */ #pxl-header-elementor .pxl-header-elementor-main .elementor-section { transition: none !important; } /* When scrolled: pin the main header to the viewport */ #pxl-header-elementor.header-scrolled .pxl-header-elementor-main { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 9999 !important; background-color: #1e2a36 !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important; } /* Also force dark bg on every inner layer so nothing bleeds through */ #pxl-header-elementor.header-scrolled .pxl-header-elementor-main .pxl-header-content, #pxl-header-elementor.header-scrolled .pxl-header-elementor-main .elementor-section, #pxl-header-elementor.header-scrolled .pxl-header-elementor-main .elementor-section > .elementor-background-overlay { background-color: #1e2a36 !important; } /* Admin bar offset */ .admin-bar #pxl-header-elementor.header-scrolled .pxl-header-elementor-main { top: 32px !important; } } /* --- MOBILE / TABLET ------------------------------------------ */ @media screen and (max-width: 1200px) { /* The parent is already position:sticky from the theme. Just set the dark background when scrolled. */ #pxl-header-elementor.header-scrolled { background-color: #1e2a36 !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important; } #pxl-header-elementor.header-scrolled #pxl-header-mobile { background-color: #1e2a36 !important; } } /* =========================================== Homepage Layout Fix - Wide Viewport =========================================== */ /* * Problem: At full-screen width on large monitors, the "Why CMMC Matters" * section (Section 2, element 552be92) breaks — the right column content * drops below the shield image instead of sitting beside it, leaving white * space. The root cause is: * * 1. The section has NO section-level background color — the dark * appearance comes solely from an absolutely-positioned image * widget (d2a7648) at z-index:-1. At wide viewports, that image * doesn't cover edge-to-edge because it sits inside a max-width * container. * * 2. The inner section's flex container may allow columns to wrap, * pushing the right column below the left. * * 3. Section 1 ("What Is CMMC?") right column has an absolutely- * positioned decorative image that doesn't fill the column * background, leaving it white. * * Fix: Add section-level dark backgrounds, prevent column wrapping, * and ensure flex items shrink properly. */ /* --- Section 2: "Why CMMC Matters" (552be92) -------------------- */ /* Dark background on the SECTION so it covers the full viewport width, not just the container's max-width of 1760px */ .elementor-22 .elementor-element.elementor-element-552be92 { background-color: #1b2e34 !important; } /* Dark background on the single column wrapper too */ .elementor-22 .elementor-element.elementor-element-e175cd3 > .elementor-element-populated { background-color: #1b2e34 !important; } /* Prevent inner section columns from wrapping at desktop widths */ @media screen and (min-width: 1025px) { .elementor-22 .elementor-element.elementor-element-436b3d5 > .elementor-container { flex-wrap: nowrap !important; } /* Ensure flex columns can shrink below their content intrinsic width */ .elementor-22 .elementor-element.elementor-element-c028c6f, .elementor-22 .elementor-element.elementor-element-925d965 { min-width: 0 !important; } /* Make sure the shield image container doesn't overflow its column */ .elementor-22 .elementor-element.elementor-element-c028c6f .pxl-image-single { max-width: 100% !important; overflow: hidden !important; } } /* --- Section 1: "What Is CMMC?" (22054e3) right column ---------- */ /* Use the cybersecurity lock image as the column background so it fills the entire area with no gaps. The image widget is hidden since the background-image with cover sizing handles the display. */ .elementor-22 .elementor-element.elementor-element-5df2e94 > .elementor-element-populated { background-image: url('/wp-content/uploads/2025/11/Cybersecurity.jpg') !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; background-color: #0d1b2a !important; /* fallback matches image bg */ border-radius: 15px !important; overflow: hidden !important; } /* Hide the image widget — the column background handles the display */ .elementor-22 .elementor-element.elementor-element-8a1f678 { display: none !important; } /* --- Section 3: overlap (09b4d98) -------------------------------- */ /* Ensure the overlap section's dark background covers full viewport */ .elementor-22 .elementor-element.elementor-element-09b4d98 { background-color: #223035 !important; } /* =========================================== Page Title Banner - Solid Dark Background =========================================== */ /* * The parent theme's page title area references a background image * (bg-page-title.jpg) that doesn't exist on this server. The overlays * are semi-transparent, so the fixed footer bleeds through. Fix: * 1. Solid dark background matching the footer color scheme * 2. Shorter, more compact banner height * 3. Opaque overlays */ #pxl-page-title-default { background-color: #182830 !important; height: 350px !important; padding-top: 60px !important; } @media screen and (max-width: 1200px) { #pxl-page-title-default { height: 280px !important; padding-top: 40px !important; } } @media screen and (max-width: 767px) { #pxl-page-title-default { height: 230px !important; padding-top: 30px !important; } } /* Make the overlays fully opaque so nothing bleeds through */ #pxl-page-title-default::before { background-color: #182830 !important; opacity: 1 !important; } #pxl-page-title-default::after { background: none !important; } /* Hide the missing background image div */ #pxl-page-title-default .pxl-bg--img { display: none !important; } /* Adjust title size to fit the shorter banner */ #pxl-page-title-default .pxl-page-title { font-size: 56px !important; line-height: 1.2 !important; } @media screen and (max-width: 767px) { #pxl-page-title-default .pxl-page-title { font-size: 40px !important; } } /* Contact Form 7 - Final Complete Design */ /* Form container - LIGHT TEAL BACKGROUND */ .wpcf7 { background: #f1f4f4 !important; /* Light teal/mint matching screenshot */ padding: 35px !important; border-radius: 25px !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important; } .wpcf7 .wpcf7-form .form-row-2col { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px !important; margin-bottom: 20px !important; } .wpcf7 .wpcf7-form .form-row-full { margin-bottom: 20px !important; } /* Labels */ .wpcf7 .wpcf7-form label { display: block !important; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 700 !important; font-size: 17px !important; line-height: 1.3 !important; color: #2b2b2b !important; margin-bottom: 8px !important; } /* All input fields - WHITE BACKGROUND */ .wpcf7 .wpcf7-form input[type="text"], .wpcf7 .wpcf7-form input[type="email"], .wpcf7 .wpcf7-form input[type="tel"], .wpcf7 .wpcf7-form textarea, .wpcf7 .wpcf7-form select { width: 100% !important; padding: 12px 16px !important; border: 1px solid #d0d0d0 !important; border-radius: 28px !important; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 400 !important; font-size: 15px !important; line-height: 1.4 !important; color: #333333 !important; transition: all 0.3s ease !important; box-sizing: border-box !important; background-color: #ffffff !important; /* WHITE fields */ -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; } /* Select dropdowns - hide duplicate text */ .wpcf7 .wpcf7-form .wpcf7-form-control-wrap { display: block !important; position: relative !important; width: 100% !important; font-size: 0 !important; line-height: 0 !important; } .wpcf7 .wpcf7-form select, .wpcf7 .wpcf7-form .wpcf7-form-control-wrap select { display: block !important; visibility: visible !important; opacity: 1 !important; position: relative !important; height: auto !important; min-height: 46px !important; padding-right: 40px !important; cursor: pointer !important; font-size: 15px !important; line-height: 1.4 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23666' d='M5 7l5 5 5-5z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 18px !important; z-index: 100 !important; pointer-events: all !important; } /* Textarea - 25% BIGGER = 75px, NO RESIZE HANDLE */ .wpcf7 .wpcf7-form textarea { min-height: 75px !important; max-height: 75px !important; height: 75px !important; resize: none !important; /* Remove resize handle */ border-radius: 20px !important; padding: 10px 14px !important; } /* Focus states */ .wpcf7 .wpcf7-form input[type="text"]:focus, .wpcf7 .wpcf7-form input[type="email"]:focus, .wpcf7 .wpcf7-form input[type="tel"]:focus, .wpcf7 .wpcf7-form select:focus, .wpcf7 .wpcf7-form textarea:focus { border-color: #a0a0a0 !important; outline: none !important; box-shadow: 0 0 0 1px rgba(160, 160, 160, 0.1) !important; } /* Terms checkbox - inline */ .wpcf7 .wpcf7-form .terms-checkbox { display: block !important; margin-top: 16px !important; margin-bottom: 16px !important; } .wpcf7 .wpcf7-form .terms-checkbox .wpcf7-list-item { margin: 0 !important; display: flex !important; align-items: center !important; gap: 10px !important; } .wpcf7 .wpcf7-form .terms-checkbox input[type="checkbox"] { margin: 0 !important; width: 20px !important; height: 20px !important; min-width: 20px !important; flex-shrink: 0 !important; cursor: pointer !important; } .wpcf7 .wpcf7-form .terms-checkbox .wpcf7-list-item label { display: inline !important; margin: 0 !important; font-size: 15px !important; font-weight: 400 !important; color: #555555 !important; line-height: 1.5 !important; cursor: pointer !important; } /* Submit button */ .wpcf7 .wpcf7-form .submit-row { text-align: center !important; margin-top: 20px !important; } .wpcf7 .wpcf7-form input[type="submit"] { background-color: #546e7a !important; color: #ffffff !important; padding: 15px 50px !important; border: none !important; border-radius: 28px !important; font-family: 'Open Sans', sans-serif !important; font-size: 17px !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.3s ease !important; box-shadow: 0 2px 8px rgba(84, 110, 122, 0.3) !important; } .wpcf7 .wpcf7-form input[type="submit"]:hover { background-color: #455a64 !important; box-shadow: 0 4px 12px rgba(84, 110, 122, 0.4) !important; transform: translateY(-1px) !important; } /* Remove placeholder text */ .wpcf7 .wpcf7-form input::placeholder, .wpcf7 .wpcf7-form textarea::placeholder { opacity: 0 !important; } /* Remove default Contact Form 7 spacing */ .wpcf7 .wpcf7-form p { margin: 0 !important; } .wpcf7 .wpcf7-form br { display: none !important; } /* Validation messages */ .wpcf7 .wpcf7-form .wpcf7-not-valid-tip { color: #d32f2f !important; font-size: 13px !important; margin-top: 5px !important; } .wpcf7 .wpcf7-form .wpcf7-response-output { margin: 20px 0 !important; padding: 12px 16px !important; border-radius: 8px !important; border: 1px solid !important; } /* Responsive */ @media (max-width: 768px) { .wpcf7 { padding: 25px !important; } .wpcf7 .wpcf7-form .form-row-2col { grid-template-columns: 1fr !important; gap: 16px !important; } } /* =========================================== Getting CMMC Certified - Hide Counter Widget =========================================== */ .cmmc-hidden-widget { display: none !important; height: 0 !important; overflow: hidden !important; visibility: hidden !important; } /* =========================================== Bullet Point Text Alignment Fix =========================================== */ /* * When a list item wraps to a second line, the text should * align with the first line — not tuck under the bullet. * Uses padding-left + negative text-indent so the bullet * hangs in the margin while all text lines stay aligned. * * EXCLUDES .pxl-list widgets — those use their own icon * element (e.g. the star flaticon) as the bullet. */ #pxl-main ul:not(.pxl-item--lists), #pxl-main .pxl-history ul, #pxl-main .elementor-widget-pxl_history ul { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; } #pxl-main ul:not(.pxl-item--lists):not(.pxl-list--info) > li, #pxl-main .pxl-history ul li, #pxl-main .elementor-widget-pxl_history ul li { padding-left: 1.4em !important; text-indent: -1.4em !important; margin-bottom: 6px !important; } #pxl-main ul:not(.pxl-item--lists):not(.pxl-list--info) > li::before, #pxl-main .pxl-history ul li::before, #pxl-main .elementor-widget-pxl_history ul li::before { content: "\2022" !important; display: inline-block !important; width: 1.4em !important; text-indent: 0 !important; } /* =========================================== pxl_list Widget — Star Icon as Bullet =========================================== */ /* * The pxl_list Elementor widget renders each item as a flex * row:
+
. * We hide native bullets, align the star icon to the first * line of text, and ensure wrapped text lines up with the * first line — not under the icon. */ /* Remove any native list styling */ .pxl-list .pxl-item--lists { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; } /* Each list item: flex row, icon aligned to top of first text line */ .pxl-list .pxl-item { display: flex !important; align-items: flex-start !important; gap: 10px !important; padding-left: 0 !important; text-indent: 0 !important; } /* No CSS-generated bullet */ .pxl-list .pxl-item::before { content: none !important; display: none !important; } /* Star icon: fixed width, doesn't shrink, vertically centered with the first line of text */ .pxl-list .pxl-item--icon { flex-shrink: 0 !important; line-height: 1.5 !important; } /* Text content: takes remaining width, wraps naturally, second line aligns with the first (not under the icon) */ .pxl-list .pxl-item--content { flex: 1 !important; min-width: 0 !important; } /* =========================================== Portfolio Article - Fix Stray Bullets on pxl_post_info style1 (date + title header) =========================================== */ /* * The style1 variant of pxl_post_info renders date and title * inside a