/*
Theme Name: Hello Elementor Child - JJ Marketing
Theme URI: https://jjmarketingdigital.com/
Description: A child theme of Hello Elementor with custom Tailwind CSS compile pipeline and cyber layouts.
Author: Kevin Piol
Author URI: https://kcptechservices.com/
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child-jjmarketing
Update URI: false
*/

html,
body {
  overflow-x: clip !important;
}
#site-header {
  position: relative !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-block-start: 0 !important;
  padding-block-end: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

#content,
#content.site-content,
.site-main,
.page-content {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
  padding-top: 0 !important;
  padding-block-start: 0 !important;
  margin-bottom: 0 !important;
  margin-block-end: 0 !important;
  padding-bottom: 0 !important;
  padding-block-end: 0 !important;
}

.site-footer,
footer.site-footer,
#site-footer {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}

.elementor .elementor-section-wrap,
.elementor .elementor-section:last-child,
.elementor .e-con:last-child,
.elementor > .elementor-section,
.elementor > .e-con,
.elementor > .e-parent,
.elementor > .elementor-element {
  margin-bottom: 0 !important;
  margin-block-end: 0 !important;
  padding-bottom: 0 !important;
  padding-block-end: 0 !important;
}

.elementor .elementor-element:last-child .elementor-widget-wrap,
.elementor .elementor-element:last-child .elementor-widget-container {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#homepage-hero-section,
#services-overview,
#why-choose,
#services-deep-dive,
#about-us,
#process,
#faqs,
#homepage-contact-form-section,
#homepage-cta-section {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.e-con:has(.elementor-widget-html),
.e-parent:has(.elementor-widget-html),
.elementor-section:has(.elementor-widget-html),
.elementor-widget-container:has(.elementor-widget-html) {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: none !important;
}

button:focus,
button:active,
button:focus-visible,
a:focus,
a:active,
a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  --tw-ring-offset-shadow: 0 0 0 transparent !important;
  --tw-ring-shadow: 0 0 0 transparent !important;
  --tw-ring-color: transparent !important;
}

#faq button,
#faq button:hover,
#faq button:focus,
#faq button:active,
#faq button:focus-visible,
.elementor-widget-html button,
.elementor-widget-html button:hover,
.elementor-widget-html button:focus,
.elementor-widget-html button:active,
.elementor-widget-html button:focus-visible,
.elementor-widget-html a,
.elementor-widget-html a:hover,
.elementor-widget-html a:focus,
.elementor-widget-html a:active,
.elementor-widget-html a:focus-visible,
.service-menu-btn,
.service-menu-btn:hover,
.service-menu-btn:focus,
.service-menu-btn:active,
.service-menu-btn:focus-visible,
.process-tab,
.process-tab:hover,
.process-tab:focus,
.process-tab:active,
.process-tab:focus-visible {
  outline: none !important;
  outline-color: transparent !important;
  outline-style: none !important;
  outline-width: 0 !important;
  box-shadow: none !important;
  box-shadow: 0 0 0 0 transparent !important;
  --tw-ring-offset-shadow: 0 0 0 transparent !important;
  --tw-ring-shadow: 0 0 0 transparent !important;
  --tw-ring-color: transparent !important;
}

#faq button {
  border: none !important;
  background: transparent !important;
}

#faq button:hover,
#faq button:focus,
#faq button:active {
  background-color: transparent !important;
  background: transparent !important;
}

.service-menu-btn.border-cyber-magenta:hover,
.service-menu-btn.border-cyber-magenta:focus,
.service-menu-btn.border-cyber-magenta:active {
  background-color: rgba(18, 19, 30, 0.5) !important;
  border-color: #ec4899 !important;
}
.service-menu-btn.border-transparent:hover,
.service-menu-btn.border-transparent:focus,
.service-menu-btn.border-transparent:active {
  background-color: rgba(18, 19, 30, 0.3) !important;
  border-color: transparent !important;
}
.process-tab:hover,
.process-tab:focus,
.process-tab:active {
  background-color: transparent !important;
  background: transparent !important;
}

.cyber-panel {
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
    border: 1px solid #1f213a;
    position: relative;
    background-color: #12131e;
    transition: all 0.3s ease;
}

.cyber-panel:hover {
    border-color: #ec4899;
    box-shadow: 0 0 15px rgba(236, 72, 153, 0.25);
}

.cyber-panel-purple:hover {
    border-color: #a855f7;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.25);
}

.cyber-btn {
    position: relative;
    background: #12131e;
    border: 2px solid #ec4899;
    color: #ffffff;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: 'Share Tech Mono', monospace;
    text-shadow: 0 0 5px rgba(236, 72, 153, 0.5);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 0 0 rgba(236, 72, 153, 0);
}

.cyber-btn:hover {
    background: #ec4899;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.6);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

.cyber-btn-secondary {
    position: relative;
    background: #12131e;
    border: 2px solid #a855f7;
    color: #ffffff;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: 'Share Tech Mono', monospace;
    text-shadow: 0 0 5px rgba(168, 85, 247, 0.5);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.cyber-btn-secondary:hover {
    background: #a855f7;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.6);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    background-color: #12131e;
    border-top: 1px solid #1f213a;
    border-bottom: 1px solid #1f213a;
    box-shadow: inset 0 0 15px rgba(6, 182, 212, 0.15);
    position: relative;
    display: flex;
}

.marquee-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #12131e 0%, transparent 10%, transparent 90%, #12131e 100%);
    pointer-events: none;
    z-index: 2;
}

.marquee-content {
    display: inline-flex;
    white-space: nowrap;
    animation: marquee-scroll 40s linear infinite;
}

@keyframes marquee-scroll {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

@keyframes holo-glow {
    0% { text-shadow: 0 0 4px rgba(236, 72, 153, 0.4); filter: hue-rotate(0deg); }
    50% { text-shadow: 0 0 12px rgba(6, 182, 212, 0.8); }
    100% { text-shadow: 0 0 4px rgba(236, 72, 153, 0.4); filter: hue-rotate(360deg); }
}

.marquee-robotic-glow span {
    animation: holo-glow 6s infinite ease-in-out;
    display: inline-flex;
    align-items: center;
}

.scrolling-bg-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: 'Share Tech Mono', monospace;
    color: rgba(31, 33, 58, 0.15);
    user-select: none;
    pointer-events: none;
}

#grid-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.tech-bracket::before, .tech-bracket::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-color: #ec4899;
    border-style: solid;
}
.tech-bracket::before {
    top: 0; left: 0; border-width: 2px 0 0 2px;
}
.tech-bracket::after {
    bottom: 0; right: 0; border-width: 0 2px 2px 0;
}

.tab-btn.active,
.tab-btn.active:focus,
.tab-btn.active:active,
.tab-btn.active:focus-visible {
    background-color: #ec4899 !important;
    color: #ffffff !important;
    border-color: #ec4899 !important;
    box-shadow: 0 0 15px rgba(236, 72, 153, 0.4) !important;
}

input[type="range"]::-webkit-slider-thumb {
    box-shadow: 0 0 8px #ec4899;
}

@keyframes scanline {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100vh);
  }
}

.animate-scanline {
  animation: scanline 8s linear infinite;
}

#faq button {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#faq button:hover,
#faq button:focus,
#faq button:active {
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

#faq button span.font-tech {
  color: #ffffff !important;
  transition: color 0.3s ease;
}

#faq button:hover span.font-tech {
  color: #ec4899 !important;
}

#faq button:hover span[id$="-icon"] {
  color: #ec4899 !important;
}

.flex > .w-10.h-10,
.flex > .w-12.h-12,
.flex > .w-14.h-14,
.flex > .w-16.h-16,
.flex > .w-20.h-20 {
  flex-shrink: 0 !important;
}