/*
Theme Name: Guardial Theme
Theme URI: https://guardial.io
Template: hello-elementor
Author: Guardial
Author URI: https://guardial.io
Description: Guardial Intelligent Websites | Powerful Web Development
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 1.0.0.1773012929
Updated: 2026-03-08 23:35:29

*/

/* THE SCROLL */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative !important;
}

/* Hero Grid expansion */
.nie-hero-container {
    overflow: hidden !important;
    contain: paint !important; /* Modern CSS: Tells browser this element is a self-contained box */
}

/* Business Hours Forms */

.mb-bhi-closed{
   color:#FF0000;
	font-size:20px;
}
.mb-bhi-closed a{
	color:#fff;
	font-size:20px;
	animation: blink 1s linear infinite;
}
span.mb-bhi-closed{
       display: block;
    margin-block-start: 8px;
    margin-block-end: 8px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
	text-align: center;
}
.mb-bhi-open{
   color:#fff;
	font-size:20px;
}
span.mb-bhi-open{
    display: block;
    margin-block-start: 8px;
    margin-block-end: 8px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
	text-align: center;
}
.mb-bhi-open a{
	color:#fff;
	font-size:20px;
	animation: blink 1s linear infinite;
}
.mb-bhi-oc-text a{
	color:#fff!important;
}

/* Gravity Forms */
html body div.elementor-shortcode div#gform_wrapper_1.gform-theme {
    --gf-label-font-size: 23px;
    --gf-font-size-secondary: 18px;
    --gf-ctrl-label-color-primary: #000;
}

/* 2. Label Font */
html body div.elementor-shortcode div#gform_wrapper_1.gform-theme .gfield_label {
    font-size: 23px;
    color: #000;
}

/* 3. The Button - Solid Black, White Text, Roboto */
html body div.elementor-shortcode div#gform_wrapper_1.gform-theme .gform_footer input[type="submit"].gform_button {
    background-color: #000000;
    background-image: none;
    color: #FFFFFF;
    
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    
    border: 1px solid #FFFFFF; /* White border for the dark theme */
    border-radius: 0px;
    padding: 15px 50px;
    
    cursor: pointer;
    display: inline-block;
    transition: all 0.3s ease;
}

/* Using your working Super-Selector to force the description size */
html body div.elementor-shortcode div#gform_wrapper_1.gform-theme .gfield_description {
    font-size: 18px; 
    line-height: 1.5;
    color: #000;
    margin-bottom: 15px;
    max-width: 100%;
}

/* 4. Hover State - Invert to White background */
html body div.elementor-shortcode div#gform_wrapper_1.gform-theme .gform_footer input[type="submit"].gform_button:hover {
    background-color: #FFFFFF;
    color: #000000;
}
/* =========================================
   1. DESKTOP ONLY: HERO EFFECTS (1025px+)
   ========================================= */
@media screen and (min-width: 1025px) {
    
    /* Cinematic Hero Logo */
    .nie-hero-logo img {
        opacity: 0;
        animation: cinematicReveal 3.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
    }

    /* Blueprint Grid Background */
    .nie-hero-container {
        position: relative !important;
        background-color: #050505 !important;
    }
    .nie-hero-container::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;
        background-image: 
            linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px) !important;
        background-size: 50px 50px, 50px 50px !important;
        -webkit-mask-image: radial-gradient(500px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), black 20%, transparent 100%) !important;
        mask-image: radial-gradient(500px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), black 20%, transparent 100%) !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }

    /* Pulse Divider */
    .nie-pulse-divider {
        position: relative !important;
        overflow-x: hidden !important;
    }
    .nie-pulse-divider::after {
        content: '';
        position: absolute;
        top: 0; left: -20%; width: 20%; height: 1px;
        background: linear-gradient(90deg, transparent, #c6a87a, transparent);
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
        animation: sweepPulse 2s infinite !important;
    }
}

/* =========================================
   STICKY HEADER LOGO SCROLL REVEAL (DESKTOP ONLY)
   ========================================= */
@media screen and (min-width: 1025px) {
    /* 1. Hide the logo when at the top of the page */
    .nie-header-logo {
        opacity: 0 !important;
        transform: translateY(-10px) !important;
        transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out !important;
        pointer-events: none !important;
    }

    /* 2. Reveal logo natively when Elementor triggers the sticky state */
    .elementor-sticky--effects .nie-header-logo {
        opacity: 1 !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }
}

/* =========================================
   2. ANIMATION KEYFRAMES (Global)
   ========================================= */
@keyframes cinematicReveal {
    0% { opacity: 0; transform: scale(1.05); filter: blur(10px); }
    100% { opacity: 1; transform: scale(1); filter: blur(0px); }
}

@keyframes sweepPulse {
    0% { left: -20%; }
    100% { left: 110%; }
}
@keyframes blink{
    0%{opacity: 0;}
    50%{opacity: .5;}
    100%{opacity: 1;}
}

/* =========================================
   STICKY HEADER SCROLL EFFECTS (Border + Glass Transparency)
   ========================================= */
.nie-main-header.elementor-sticky--effects{
    /* 1. The Bottom Border */
    border-bottom: 1px solid #C6A87A !important;
    
    /* 2. Semi-transparent black background (85% opaque) */
    background-color: rgba(0, 0, 0, 0.90) !important;
    
    /* 3. High-end glass blur effect for the content scrolling underneath */
}
.nie-page-header.elementor-sticky--effects{
	/* 1. Semi-transparent black background (85% opaque) */
    background-color: rgba(0, 0, 0, 0.90) !important;
	}
.navigator{
	/* 1. Semi-transparent black background (85% opaque) */
    background-color: rgba(14, 14, 15, 0.85) !important;
    
    /* 2. High-end glass blur effect for the content scrolling underneath */
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}
.lux-underline .elementor-heading-title{
position:relative;
display:inline-block;
padding-bottom:20px;
}

.lux-underline .elementor-heading-title:after{
content:"";
position:absolute;
left:0;
bottom:0;
width:80px;
height:2px;
background:#c6a87a;
}

.lux-underline.center .elementor-heading-title:after{
left:50%;
transform:translateX(-50%);
}