/*
 * CUSTOM.CSS  Custom WordPress Additions & Block Editor Support
 * For: GRG Partners Theme
 * Use: Place in your theme directory as /css/custom.css
 * Author: [Your Name or Initials]
 * Note: This file is safe for manual extensions, adjustments, and overrides.
 */


/* =========================
   0.2 MAIN BODY TYPOGRAPHY & HEADINGS (Elementor + Static Pages)
   ========================= */

/* Force font on body and common content wrappers */
body, 
body.page, 
body.page-template-default,
body .main-canvas, 
body .section-content, 
body .grg-content-page,
body .elementor-widget-text-editor,
body .entry-content,
body .elementor,
body .elementor-widget-container,
body p {
  color: var(--main-text, #1b232f) !important;
  
  margin-top: 0.32em;
  margin-bottom: 1.07em;
}

/* Unified heading styling across static & Elementor content */
h1, h2, h3, h4,
.hero-title,
.section-title,
.section-link,
.elementor-widget-heading .elementor-heading-title,
.georgia-heading,
.georgia-heading h1,
.georgia-heading h2,
.georgia-heading h3 {
  
  
  
  
  color: var(--header-text, #202b3e) !important;
  margin-top: 0 !important;
  margin-bottom: 1.2em !important;
}

/* Heading sizes */
h1, .elementor-heading-title.elementor-size-default {  }
h2, .elementor-heading-title.elementor-size-large   {  }
h3, .elementor-heading-title.elementor-size-medium  {  }
h4, .elementor-heading-title.elementor-size-small   {  }

/* Responsive adjustments */
@media (max-width: 700px) {
  h1, .elementor-heading-title.elementor-size-default {  }
  h2, .elementor-heading-title.elementor-size-large   {  }
  h3, .elementor-heading-title.elementor-size-medium  {  }
  h4, .elementor-heading-title.elementor-size-small   {  }
  body, p, .elementor-widget-text-editor {
    
  }
}

/* =========================
   0.3 SECTION TITLE LINK STYLING (e.g. About Us, Our Services)
   ========================= */

.section-title a.section-link {
  
  
  
  
  
  color: var(--header-text, #202b3e) !important;
  text-decoration: none !important;
  display: inline-block;
  transition: color 0.3s ease;
}

/* Day mode hover color fix */
body:not(.dark-mode) .section-title a.section-link:hover {
  color: var(--accent-color, #005199) !important;
}

/* Dark mode link hover (already correct, preserved) */
body.dark-mode .section-title a.section-link:hover {
  /* no change required */
}

/* Optional Gutenberg editor backend visual match */
.editor-styles-wrapper {
  
  color: var(--main-text, #1b232f) !important;
  background: var(--main-bg, #fff) !important;
}

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4 {
  
  
  
  color: var(--header-text, #202b3e) !important;
}

/* FORCE ALL HEADINGS TO USE GEORGIA */
h1, h2, h3, h4,
.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3,
.elementor-widget-heading h4,
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-container h1,
.elementor-widget-container h2,
.elementor-widget-container h3,
.elementor-widget-container h4,
.elementor-widget-text-editor h1,
.elementor-widget-text-editor h2,
.elementor-widget-text-editor h3,
.elementor-widget-text-editor h4 {
  
  
  
  
  color: var(--header-text, #202b3e) !important;
}

/* =========================
   0.3 SECTION TITLE LINK STYLING (e.g. About Us, Our Services)
   ========================= */

.section-title a.section-link {
  
  
  
  
  
  color: var(--header-text, #202b3e) !important;
  text-decoration: none !important;
  display: inline-block;
  transition: color 0.3s ease;
}

/* Day mode hover color fix */
body:not(.dark-mode) .section-title a.section-link:hover {
  color: var(--accent-color, #005199) !important;
}

/* Optional: keep dark mode untouched */
body.dark-mode .section-title a.section-link:hover {
  /* No changes needed, already works */
}


/* =====================================================
   1. GLOBAL TYPOGRAPHY & CANVAS FOR ELEMENTOR & GUTENBERG
   ===================================================== */
/* -- HEADINGS: Apply to ALL h1-h4, Elementor headings, Gutenberg blocks -- */
h1, h2, h3, h4,
.elementor-widget-heading .elementor-heading-title {
  
  color: var(--header-text, #202b3e) !important;
  
  
  margin-top: 0 !important;
  margin-bottom: 0.6em !important;
  transition: color 0.3s !important;
  
}

/* Match Elementor heading widget sizes */
h1, .elementor-heading-title.elementor-size-default {
  
  
}
h2, .elementor-heading-title.elementor-size-large {
  
  
}
h3, .elementor-heading-title.elementor-size-medium {
  
  
}
h4, .elementor-heading-title.elementor-size-small {
  
  
}

/* Extra space below headings when in .main-canvas or section-content */
.main-canvas h1, .main-canvas h2, .main-canvas h3, .main-canvas h4,
.section-content h1, .section-content h2, .section-content h3, .section-content h4,
.elementor-widget-heading .elementor-heading-title {
  margin-bottom: 1.2em !important;
}

/* -- TEXT: All standard text/paragraphs -- */
body, p, .elementor-widget-text-editor {
  
  color: var(--main-text, #1b232f) !important;
  
  
  
  margin-top: 0.32em;
  margin-bottom: 1.07em;
}

/* -- CANVAS: Apply main-canvas to Elementor Section/Container automatically -- */
.elementor-section.elementor-top-section,
.elementor-container,    /* Elementor Flexbox Containers */
.elementor-widget-container,
.main-canvas {
  max-width: 55rem;
  margin: auto;
  padding: 0 2.2rem;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  background: transparent;
  box-sizing: border-box;
}

@media (max-width: 700px) {
  .elementor-section.elementor-top-section,
  .elementor-container,
  .elementor-widget-container,
  .main-canvas {
    padding: 0 1rem !important;
    max-width: 100% !important;  
    border-left: none;
    border-right: none;
  }
}

/* Optional: Restrict to only main pages if needed, or adjust selectors for flexibility */

/* -- DARK MODE SUPPORT FOR HEADINGS -- */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode .elementor-heading-title {
  color: #eaf1fa !important;
  text-shadow: 0 1.5px 8px rgba(120,200,255,0.19), 0 1px 1px rgba(90,160,255,0.18);
}

/* -- GUTENBERG EDITOR STYLES (for backend visual parity) -- */
.editor-styles-wrapper {
  background: var(--main-bg, #fff);
  color: var(--main-text, #1b232f);
  
}
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4 {
  
  color: var(--header-text, #202b3e);
  
}

/* -- RESPONSIVE (Mobile) -- */
@media (max-width: 700px) {
  .elementor-section.elementor-top-section,
  .elementor-container,
  .elementor-widget-container,
  .main-canvas {
   padding: 0 1rem !important;
   max-width: 100% !important;
   border-left:none;
   border-right:none;
  }
  h1, .elementor-heading-title.elementor-size-default {  }
  h2, .elementor-heading-title.elementor-size-large {  }
  h3, .elementor-heading-title.elementor-size-medium {  }
  h4, .elementor-heading-title.elementor-size-small {  }
  body, p, .elementor-widget-text-editor {
    
  }
}

/* Optionally: Hide border for very small screens */
@media (max-width: 440px) {
  .elementor-section.elementor-top-section,
  .elementor-container,
  .elementor-widget-container,
  .main-canvas {
  }

}
/* Blocks  Ensure global links and buttons match */
.editor-styles-wrapper a,
.wp-block-button__link {
  color: var(--nav-link) !important;
  
  border-radius: 8px;
  transition: color 0.18s, background 0.18s;
}
.editor-styles-wrapper a:hover,
.wp-block-button__link:hover {
  color: var(--nav-link-hover) !important;
}

.grg-content-page {
  margin: 0 auto;
  padding: 0;
}

/* -- ALTERNATE HEADING STYLE: Use 'georgia-heading' for headings in Georgia font -- */

.elementor-widget-heading.georgia-heading .elementor-heading-title {
  
}
h1, .elementor-heading-title.elementor-size-default {  }
h2, .elementor-heading-title.elementor-size-large {  }
h3, .elementor-heading-title.elementor-size-medium,
h4, .elementor-heading-title.elementor-size-small {  }

.georgia-heading, 
.georgia-heading h1, 
.georgia-heading h2, 
.georgia-heading h3, 
.georgia-heading h4, 
.georgia-heading h5, 
.georgia-heading h6 {
  
  
  
  color: var(--header-text, #202b3e) !important;
}

/* =============================================
   3. WORDPRESS CORE CLASSES & UTILITY FIXES
   ============================================= */
/* Image alignment (Gutenberg) */
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin-right: 1.6em; }
.alignright { float: right; margin-left: 1.6em; }

/* Responsive embeds */
.wp-block-embed__wrapper, .wp-block-embed {
  max-width: 100%;
  height: auto;
}

/* Blockquote style */
.wp-block-quote {
  border-left: 3px solid var(--accent);
  padding-left: 1.3em;
  
  background: rgba(46,98,184,0.06);
  margin: 1.4em 0;
}
.wp-block-quote cite {
  
  color: var(--nav-link);
  display: block;
  margin-top: 0.9em;
}

/* =============================================
   4. NAVIGATION MENUS (WP CORE)
   ============================================= */
.main-navigation,
.wp-block-navigation {
  background: none;
  
}
.main-navigation a,
.wp-block-navigation__container a {
  color: var(--nav-link) !important;
  
  transition: color 0.18s;
  text-decoration: none;
}
.main-navigation a:hover,
.wp-block-navigation__container a:hover {
  color: var(--nav-link-hover) !important;
}

/* =============================================
   5. FORMS & BUTTONS
   ============================================= */
button, input[type="submit"], .wp-block-button__link {
  
  
  color: var(--nav-link);
  background: var(--accent);
  border: none;
  border-radius: 9px;
  padding: 0.6em 1.5em;
  box-shadow: 0 1.5px 8px rgba(44,54,94,0.10);
  transition: background 0.18s, color 0.18s;
}
button:hover, input[type="submit"]:hover, .wp-block-button__link:hover {
  background: var(--nav-link-hover);
  color: #fff !important;
}

/* Inputs/textareas */
input, textarea, select {
  border-radius: 6px;
  border: 1px solid #dbe8fa;
  background: #f8fafb;
  padding: 0.6em;
  
  
  color: var(--main-text);
  box-sizing: border-box;
}

/* =============================================
   6. WP BLOCKS  SPECIAL CASES
   ============================================= */
/* Cover block overlay */
.wp-block-cover__overlay {
  background: linear-gradient(120deg, #e3e9f3 55%, #f7f9fc 100%);
  opacity: 0.89;
}

/* Gallery block spacing */
.wp-block-gallery {
  margin-bottom: 2em;
}
.wp-block-gallery .blocks-gallery-item img {
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(32,40,70,0.09);
}

/* =============================================
   7. DARK MODE SUPPORT (IF JS SWITCH ENABLED)
   ============================================= */
body.dark-mode .editor-styles-wrapper {
  background: var(--main-bg-night) !important;
  color: var(--main-text) !important;
}
body.dark-mode .wp-block-quote {
  border-left: 3px solid var(--accent);
  background: rgba(46,98,184,0.10);
  color: var(--main-text);
}
body.dark-mode .wp-block-navigation__container a {
  color: var(--nav-link) !important;
}
body.dark-mode .wp-block-navigation__container a:hover {
  color: var(--nav-link-hover) !important;
}

/* =============================================
   8. MOBILE RESPONSIVE  WORDPRESS BLOCKS
   ============================================= */
@media (max-width: 700px) {
  .wp-block-gallery .blocks-gallery-item img {
    border-radius: 5px;
  }
  .editor-styles-wrapper h1 {  }
}

/* =============================================
   9. CUSTOM UTILITIES & OVERRIDES (OPTIONAL)
   ============================================= */

/* === Restore WP Admin Bar to Top Position, where it should be === */

body.logged-in.admin-bar header {
  top: 32px !important;
}
@media screen and (max-width: 782px) {
  body.logged-in.admin-bar header {
    top: 46px !important;
  }
}

/* === Restore WP Admin Bar to Top Position === 
#wpadminbar {
  position: fixed !important;
  top: 0 !important;
  bottom: auto !important;
  z-index: 99999 !important;
}
body.logged-in.admin-bar {
  margin-top: 32px !important; /* typical height of wpadminbar */
}
@media screen and (max-width: 782px) {
  body.logged-in.admin-bar {
    margin-top: 46px !important; /* taller on small screens */
  }
} 

/* Add here any custom tweaks or overrides for WP plugins/components */

/* Example: Hide default WP admin bar in frontend preview
body.logged-in.admin-bar {
  margin-top: 0 !important;
}   */



/* =============================================
  10. CUSTOM MOBILE OVERRIDES 
  ============================================= */

body.dark-mode,
body.dark-mode .section-content,
body.dark-mode .content-box,
body.dark-mode .elementor-widget-text-editor,
body.dark-mode .elementor-widget-heading,
body.dark-mode .elementor-heading-title,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode p,
body.dark-mode li,
body.dark-mode a,
body.dark-mode span,
body.dark-mode .section-title {
  color: #f3f5f8 !important;
}

  border-radius: 12px;
  max-width: 100%;
  margin: 0 auto 2em auto;
  padding: 2.5em 2em;
  box-shadow: 0 2px 18px rgba(25,50,110,0.06);
  text-align: left;
  transition: box-shadow 0.2s;
}


@media (max-width: 700px) {
  .content-box {
    max-width: 100%;
    padding: 4vw 3vw;
    border-radius: 8px;
    box-shadow: 0 1.5px 7px rgba(30,60,80,0.07);
    /* Do not override alignment or centering */
  }
}

/* =======================================================
======== CONTACT FORM  global form container ====
======================================================= */
.wpforms-form {
  
  background: transparent;
  color: var(--main-text);
  max-width: 100%;
  margin: 0 auto;
  padding: 2.2rem 2.2rem 2rem 2.2rem;
  border-radius: 1.1rem;
  box-shadow: 0 4px 24px rgba(35,65,115,0.07);
}

/* Input fields */
.wpforms-field input,
.wpforms-field textarea {
  background: #f7f9fc;
  border: 1.2px solid #c1c6d4;
  color: var(--main-text);
  border-radius: 0.7rem;
  padding: 0.82em 1.1em;
  
  transition: border-color 0.2s;
}

.wpforms-field input:focus,
.wpforms-field textarea:focus {
  border-color: var(--accent);
  background: #f1f5fa;
  outline: none;
}

/* Labels */
.wpforms-field-label {
  
  
  
  color: var(--header-text);
  margin-bottom: 0.24em;
}

/* Submit button */
.wpforms-submit {
  background: var(--nav-link);
  color: #fff;
  border: none;
  border-radius: 0.65em;
  padding: 0.8em 2.2em;
  
  
  box-shadow: 0 4px 16px rgba(80,170,255,0.09);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  margin-top: 0.9em;
}
.wpforms-submit:hover {
  background: var(--nav-link-hover);
  color: #fff;
}

/* Error and confirmation messages */
.wpforms-error,
.wpforms-confirmation-container-full,
.wpforms-confirmation-container {
  color: var(--accent);
  background: #e7edf9;
  border-radius: 0.7em;
  padding: 0.9em 1.4em;
  margin-top: 1.1em;
  
}

/* --- DARK MODE --- */
body.dark-mode .wpforms-form {
  background: transparent;
  color: #eaf1fa;
  box-shadow: 0 8px 32px rgba(60,110,190,0.13);
}
body.dark-mode .wpforms-field input,
body.dark-mode .wpforms-field textarea {
  background: #1c2335;
  color: #eaf1fa;
  border: 1.2px solid #2e62b8;
}
body.dark-mode .wpforms-field input:focus,
body.dark-mode .wpforms-field textarea:focus {
  background: #232d47;
  border-color: #82aaff;
}
body.dark-mode .wpforms-field-label {
  color: #eaf1fa;
}
body.dark-mode .wpforms-submit {
  background: #305496;
  color: #eaf1fa;
}
body.dark-mode .wpforms-submit:hover {
  background: #2e62b8;
  color: #fff;
}
body.dark-mode .wpforms-error,
body.dark-mode .wpforms-confirmation-container-full,
body.dark-mode .wpforms-confirmation-container {
  background: #23304a;
  color: #79b6ff;
  border-color: #234;
}

/* =======================================================
======== CONTACT PAGE SPECIFIC OVERRIDES (page-id-366) ===
======================================================= */

/* Widen the main container and content section ONLY on Contact page */
body.page-id-393 .main-canvas,
body.page-id-393 .section-content {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: auto;
  margin-right: auto;
}

/* Make WPForms container wider on Contact page */
body.page-id-393 .wpforms-form {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: auto;
  margin-right: auto;
}

/* Make input fields and textarea longer on Contact page */
body.page-id-393 .wpforms-form input[type="text"],
body.page-id-393 .wpforms-form input[type="email"],
body.page-id-393 .wpforms-form textarea {
  width: 100% !important;
  max-width: 100%;
  min-width: 320px;
  box-sizing: border-box;
}

/* Make textarea taller */
body.page-id-393 .wpforms-form textarea {
  min-height: 150px;
  height: 180px;
  resize: vertical;
}

/* --- ULTIMATE MOBILE FIX FOR WPForms & CANVAS --- */
@media (max-width: 700px) {
  .main-canvas,
  .section-content {
    max-width: 100% !important;
    width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .wpforms-form {
    max-width: 100% !important;
    width: 97vw !important;
    padding: 0.7rem 1vw 1.1rem 1vw !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .wpforms-form input,
  .wpforms-form textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* DESKTOP ONLY: Wider form and proper spacing for name fields */
@media (min-width: 900px) {
  .wpforms-form {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 2.2rem 2.2rem 2rem 2.2rem;
  }
  .wpforms-field-row.wpforms-field-large .wpforms-field-row-block {
    display: flex !important;
    gap: 1.2em !important;
  }
  .wpforms-field-row.wpforms-field-large .wpforms-field-row-block .wpforms-field {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
}

/* === Footer: no colour, keep glass blur ===================== */
footer{
  padding: 0.15rem 0 0.12rem 0 !important;   /* slim height */
               /* optional: smaller text */

  background: transparent !important;        /* ? wipe every fill/gradient */
  backdrop-filter: blur(8px) saturate(110%) !important;

  border-top: 1px solid rgba(120,150,200,0.15) !important;  /* soft edge */
  box-shadow: 0 -2px 6px rgba(40,60,120,0.08) !important;   /* subtle lift */
}

/* Dark-mode: same transparency (in case a theme colour sneaks in) */
body.dark-mode footer{
  background: transparent !important;
}

/* Mobile tweak: even tighter if you wish */
@media (max-width:700px){
  footer{
    padding: 0.12rem 0 0.10rem 0 !important;
    
  }
}

/* FINAL TYPOGRAPHY RULE – UNIVERSAL HEADING FONT LOCK */

h1, h2, h3, h4, h5, h6,
.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3,
.elementor-widget-heading h4,
.elementor-widget-heading h5,
.elementor-widget-heading h6,
.elementor-heading-title,
.elementor-widget-text-editor h1,
.elementor-widget-text-editor h2,
.elementor-widget-text-editor h3,
.elementor-widget-text-editor h4,
.elementor-widget-text-editor h5,
.elementor-widget-text-editor h6,
.elementor-widget-container h1,
.elementor-widget-container h2,
.elementor-widget-container h3,
.elementor-widget-container h4,
.elementor-widget-container h5,
.elementor-widget-container h6,
body .elementor h1, body .elementor h2, body .elementor h3,
body .elementor h4, body .elementor h5, body .elementor h6 {
  font-family: 'Georgia', serif !important;
}

/* Force Open Sans for all non-heading body text */
body, p, span, div, li, ul, ol, blockquote,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor span,
.elementor-widget-container,
body .elementor {
  font-family: 'Open Sans', Arial, sans-serif !important;
}

/* === HARD OVERRIDE FOR ALL LINKS AND HOVERS === */
a, a:visited {
  color: #1b2944 !important;           /* fallback for var(--nav-link) */
  text-decoration: none !important;
  transition: color 0.2s ease;
}

a:hover, a:focus {
  color: #355693 !important;           /* fallback for var(--nav-link-hover) */
  text-decoration: none !important;
  outline: none;
}

/* Heading links */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: #1b2944 !important;
  text-decoration: none !important;
}

h1 a:hover, h2 a:hover, h3 a:hover,
h4 a:hover, h5 a:hover, h6 a:hover {
  color: #355693 !important;
  text-decoration: none !important;
}

/* Elementor text editor links */
.elementor-widget-text-editor a {
  color: #1b2944 !important;
  text-decoration: none !important;
}
.elementor-widget-text-editor a:hover {
  color: #355693 !important;
  text-decoration: none !important;
}

/* === GRG Partners Timeline Widget: Fully Responsive, Dark & Day Mode === */
/* === GRG Partners Timeline Widget: Fully Responsive, Dark & Day Mode === */

/* --- Base: Remove all extra lines/borders/shadows around canvas/section --- */
.be-pack.timeline,
.elementor-section,
.elementor-container,
.elementor-widget-container {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}

/* --- Timeline base positioning (centered on desktop, left on mobile) --- */
.be-pack.timeline {
  position: relative;
  padding-bottom: 1em;
  background: transparent !important;
}

/* --- Center vertical glowing line: desktop --- */
.be-pack.timeline:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50% !important;
  width: 3px;
  height: 100%;
  border-radius: 2.5px;
  z-index: 2;
  transform: translateX(-50%) !important;
  transition: left 0.3s, background 0.3s;
  pointer-events: none;
}

/* --- Timeline dots (both modes, desktop & mobile) --- */
.be-pack.timeline .tl-circ {
  position: absolute;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 20px;
  height: 20px;
  margin-left: -3px;

  left: 50%;

  z-index: 3;
  background: #e6edfa !important;
  border: 2px solid #b6cef5 !important;
  box-shadow: 0 1px 6px 0 rgba(54,90,180,0.09);
  opacity: 0.95;
  transition: background 0.2s, border-color 0.2s;
}

/* --- Timeline panels (cards): base style for both modes --- */
.be-pack.timeline .timeline-panel {
  margin-top: 0.7em;
  margin-bottom: 0.7em;
  border-radius: 16px !important;
  box-shadow: 0 2px 18px 0 rgba(40,60,120,0.10);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  z-index: 4;
  position: relative;
}

/* === Light (day) mode: subtle line, no glow === */
body:not(.dark-mode) .be-pack.timeline:before {
  background: linear-gradient(180deg, #e7eefc 0%, #b0c7e8 50%, #e8eefa 100%);
  box-shadow: none;
  opacity: 0.72;
}
body:not(.dark-mode) .be-pack.timeline .tl-circ {
  background: #e6edfa !important;
  border: 2px solid #b6cef5 !important;
  box-shadow: 0 0 0 2px rgba(85,110,210,0.08), 0 0 6px 1.5px rgba(150,180,255,0.12);
}
body:not(.dark-mode) .be-pack.timeline .timeline-panel {
  background: #fff !important;
  border: 1.5px solid #dbe6f6 !important;
  color: #232742 !important;
}
body:not(.dark-mode) .be-pack.timeline .be-title {
  color: #233563 !important;
  font-weight: 600;
}
body:not(.dark-mode) .be-pack.timeline .be-content {
  color: #394256 !important;
}

/* --- Hide timeline panel arrows (for clean look, both modes) --- */
.be-pack.timeline .timeline-panel:before,
.be-pack.timeline .timeline-panel:after {
  display: none !important;
}

/* === Dark mode: strong, sharp glowing line and dots === */
body.dark-mode .be-pack.timeline:before {
  background: linear-gradient(
    180deg,
    rgba(63,102,190, 0.13) 0%,
    #355bb0 16%,
    #28438e 75%,
    rgba(42,55,96, 0.19) 100%
  );
  box-shadow: 0 0 16px 2px #294fa8, 0 0 8px 1px #1a295a;
  opacity: 0.68;
}

body.dark-mode .be-pack.timeline .tl-circ {
  background: #192954 !important;
  border: 2px solid #4763b7 !important;
  box-shadow: 0 0 8px 0 #254a9c, 0 0 0px 0 #254a9c;
}

body.dark-mode .be-pack.timeline .timeline-panel {
  background: rgba(24, 32, 54, 0.97) !important;
  border: 1.5px solid rgba(110, 170, 255, 0.11) !important;
  color: #e2eaf7 !important;
  box-shadow: 0 4px 24px 0 rgba(32, 81, 170, 0.11);
  backdrop-filter: blur(5px) saturate(116%);
}
body.dark-mode .be-pack.timeline .be-title {
  color: #b2cafe !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 8px rgba(54,104,220,0.07);
}
body.dark-mode .be-pack.timeline .be-content {
  color: #c6d4ea !important;
  font-weight: 400;
}
body.dark-mode .be-pack.timeline .timeline_pic img {
  filter: brightness(0.93) contrast(1.08);
  border-radius: 6px;
}

/* --- Mobile view: move vertical line/dots to left --- */
@media (max-width: 700px) {
  .be-pack.timeline:before {
    left: 24px !important;
    transform: none !important;
    width: 3px;
    height: 100%;
  }
  .be-pack.timeline .tl-circ {
    left: 24px !important;
    margin-left: 0 !important;
    transform: translateX(-50%) !important;
    width: 16px;
    height: 16px;
  }
  .be-pack.timeline .timeline-panel {
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 1.8rem !important;
    right: auto !important;
    max-width: 98vw !important;
    width: 120% !important;
    box-sizing: border-box !important;
    padding: 1em 0.8em !important;
  }
}
/* --- Remove all box-shadow/background on outer canvas/timeline --- */
.be-pack.timeline, .be-pack.timeline *,
body.dark-mode .be-pack.timeline, body.dark-mode .be-pack.timeline * {
  box-shadow: none !important;
  outline: none !important;
}

/* --- Safety: Remove outer lines (side canvas, Elementor section etc.) --- */
.elementor-section,
.elementor-container,
.elementor-widget-container {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}
/* --- Restructure timeline card here --- */
/* Move logo above Timeline title and align everything left */
.be-pack.timeline .timeline-panel {
  text-align: left !important;
  padding-left: 1.2em !important;   /* Soft left indent for all content */
}

.be-pack.timeline .timeline-panel .timeline-logo {
  display: block;
  margin-bottom: 0.2em;
  margin-left: 0 !important;
  width: 38px;      /* Adjust for your layout */
  height: auto;
  /* Optional shadow for logo:
  filter: drop-shadow(0 2px 8px #234) brightness(1.08); */
}

.be-pack.timeline .timeline-panel .be-title {
  display: block;
  margin-bottom: 0.4em;
  margin-top: 0 !important;
  margin-left: 0 !important;
  text-align: left !important;
  font-size: 1.12em; /* Or adjust as needed */
}

.be-pack.timeline .timeline-panel .be-content,
.be-pack.timeline .timeline-panel .timeline-content {
  text-align: left !important;
  margin-left: 0 !important;
}
@media (max-width: 700px) {
  .be-pack.timeline .timeline-panel {
    padding-left: 0.7em !important;
  }
  .be-pack.timeline .timeline-panel .timeline-logo {
    width: 30px;
  }
}
/* Broader selectors for Elementor structure */
.be-pack.timeline .timeline-panel img.timeline-logo {
  display: block !important;
  margin-bottom: 0.2em !important;
  margin-left: 0 !important;
  width: 38px !important;
  height: auto !important;
}

@media (max-width: 700px) {
  .be-pack.timeline .timeline-panel img.timeline-logo {
    width: 30px !important;
  }
}
/* --- Stack logo above timeline title, align left, add spacing --- */
.be-pack.timeline .timeline-panel .tl-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.be-pack.timeline .timeline-panel .timeline_pic {
  display: block;
  margin-bottom: 0.3em;
}

.be-pack.timeline .timeline-panel .be-image {
  display: block;
  margin: 0 0 0.2em 0;
  width: 44px;    /* Or whatever fits your card */
  height: auto;
  border-radius: 6px;
}

.be-pack.timeline .timeline-panel .be-title {
  margin-top: 0 !important;
  margin-bottom: 0.3em !important;
  text-align: left !important;
  font-size: 1.13em;
}
@media (max-width: 700px) {
  .be-pack.timeline .timeline-panel .be-image {
    width: 32px;
  }
}
/* --- Uniform left alignment for ALL panel content --- */
.be-pack.timeline .timeline-panel,
.be-pack.timeline .timeline-panel * {
  text-align: left !important;
  margin-left: auto !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

/* Optional: If some widgets use Elementor inner containers, add: */
.be-pack.timeline .timeline-panel .e-con-inner,
.be-pack.timeline .timeline-panel .elementor-widget-container {
  text-align: left !important;
  align-items: flex-start !important;
  margin-left: auto !important;
  justify-content: flex-start !important;
}

/* ===== GRG PANEL CARD STYLE (CLASS: .grg-panel) ===== */
/* === GRG Elegant Card Design (FINAL CLEAN VERSION) === */

#grg-elegant-card.grg-elegant-card {
  position: relative;
  background: #141924;
  border-radius: 14px;
  padding: 2.5em 2em 2.5em 3.5em;
  box-shadow: 0 0 18px rgba(80, 170, 255, 0.12);
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  z-index: 10;
}

/* === Glowing vertical line on the left === */
#grg-elegant-card.grg-elegant-card::before {
  content: "";
  position: absolute;
  top: 6%;
  bottom: 6%;
  left: 0;
  width: 2px;
  border-radius: 14px;
  background: linear-gradient(to bottom, #69aaff, #4473c5);
  box-shadow: 0 0 12px #69aaff;
  z-index: 2;
}

/* === Watermark emblem (grg) === */
#grg-elegant-card.grg-elegant-card::after {
  content: "";
  position: absolute;
  background: url('/wp-content/themes/grg/images/grg-emblem-white.svg') no-repeat center center;
  background-size: 800px auto;
  opacity: 0.03;
  width: 800px;
  height: 800px;
  bottom: -680px;
  left: 50%;
  transform: translateX(50%);
  animation: grgPulse 14s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

body:not(.dark-mode) #grg-elegant-card.grg-elegant-card::after {
  content: "";
  position: absolute;
  background: url('/wp-content/themes/grg/images/grg-emblem-navy-blue.svg') no-repeat center center;
  background-size: 820px auto; 
  opacity: 0.03;
  width: 800px;
  height: 710px;
  bottom: -240px;
  left: 50%;
  transform: translateX(-50%);
  animation: grgPulseLight 14s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.22));
}

/* === Hover glow in dark mode === */
body.dark-mode #grg-elegant-card.grg-elegant-card:hover {
  transform: scale(1.012);
  box-shadow:
    0 0 24px rgba(90, 180, 255, 0.18),
    0 0 8px rgba(80, 170, 255, 0.12);
}
/* Optional: subtle glow intensifies on hover */
body.dark-mode #grg-elegant-card.grg-elegant-card:hover {
  box-shadow:
    0 0 0 1px rgba(90, 180, 255, 0.4),
    0 0 22px rgba(90, 180, 255, 0.18),
    0 0 6px rgba(90, 180, 255, 0.12);
}

body.dark-mode #grg-elegant-card.grg-elegant-card {
  border: 1px solid rgba(80, 170, 255, 0.12);
  box-shadow:
    0 0 0 1px rgba(80, 170, 255, 0.2),
    0 0 18px rgba(80, 170, 255, 0.08);
}


/* === Light mode variant === */
/* === GRG Elegant Card - Light Mode Adjustments === */

body:not(.dark-mode) #grg-elegant-card.grg-elegant-card::before {
  background: #154b91;
  box-shadow: none;
}

body:not(.dark-mode) #grg-elegant-card.grg-elegant-card {
  background: #ffffff;
  color: #111827; /* deep grey for good readability */
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}

/* Left edge subtle blue line */
body:not(.dark-mode) #grg-elegant-card.grg-elegant-card::before {
  background: #154b91;
  box-shadow: none;
}

/* Light mode hover effect (same pulse + slight scale) */
body:not(.dark-mode) #grg-elegant-card.grg-elegant-card:hover::after {
  transform: translateX(-50%) scale(1.04);
  filter: drop-shadow(0 12px 48px rgba(21, 75, 145, 0.5));
}

/* Pulse animation for day mode */
@keyframes grgPulseLight {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.055;
  }
  50% {
    transform: translateX(-50%) scale(1.08);
    opacity: 0.08;
  }
}

/* === Watermark pulse animation === */
@keyframes grgPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.04;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.06);
    opacity: 0.07;
  }
}

body:not(.dark-mode) #grg-elegant-card.grg-elegant-card:hover {
  transform: scale(0.988); /* Slight zoom-out */
  box-shadow:
    0 0 0 1px rgba(21, 75, 145, 0.05),
    0 6px 28px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body:not(.dark-mode) #grg-elegant-card.grg-elegant-card {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 6px 24px rgba(0, 0, 0, 0.08),
    0 0 6px rgba(21, 75, 145, 0.05); /* Soft blue ambient glow */
}

/* Overlay link mimics the card’s position and size */
/* Card container must be positioned relatively */
#grg-elegant-card.grg-elegant-card {
  position: relative;
  z-index: 10;
}

.grg-elegant-card a {
  color: inherit !important;
  text-decoration: none !important;
  font-weight: inherit;
}

.grg-elegant-card a:hover {
  color: inherit !important;
  text-decoration: none !important;
  opacity: 0.8; /* optional hover effect */
}

/* === GRG Elegant Card - Modyfyer Classes here === */

/* =================================== 
== GRG Elegant Card watermark mod ===
======================================= 
=========== WATERMARK TOP LEFT  === 
========================================*/
#grg-elegant-card.grg-elegant-card.grg-emblem-topleft::after {
  left: 2.5em !important;
  top: 1.3em !important;
  right: auto !important;
  bottom: auto !important;
  width: 180px !important;
  height: 95px !important;
  background-size: 180px auto !important;
  opacity: 0.10 !important;
  transform: scale(1.02) !important;
}
body:not(.dark-mode) #grg-elegant-card.grg-elegant-card.grg-emblem-topleft::after {
  background-image: url('/wp-content/themes/grg/images/grg-emblem-navy-blue.svg') !important;
}
body.dark-mode #grg-elegant-card.grg-elegant-card.grg-emblem-topleft::after {
  background-image: url('/wp-content/themes/grg/images/grg-emblem-white.svg') !important;
}
@media (max-width: 900px) {
  #grg-elegant-card.grg-elegant-card.grg-emblem-topleft::after {
    left: 1em !important;
    top: 0.8em !important;
    width: 34vw !important;
    max-width: 120px !important;
    height: 18vw !important;
    max-height: 55px !important;
    background-size: 100% auto !important;
    opacity: 0.17 !important;
    transform: scale(1.09) !important;
  }
}

/* ==================================== 
== GRG Elegant Card watermark mod ===
======================================= 
=========== WATERMARK TOP RIGHT  === 
========================================*/
#grg-elegant-card.grg-elegant-card.grg-emblem-topright::after {
  right: 2.5em !important;
  top: 1.3em !important;
  left: auto !important;
  bottom: auto !important;
  width: 180px !important;
  height: 95px !important;
  background-size: 180px auto !important;
  opacity: 0.10 !important;
  transform: scale(1.02) !important;
}
body:not(.dark-mode) #grg-elegant-card.grg-elegant-card.grg-emblem-topright::after {
  background-image: url('/wp-content/themes/grg/images/grg-emblem-navy-blue.svg') !important;
}
body.dark-mode #grg-elegant-card.grg-elegant-card.grg-emblem-topright::after {
  background-image: url('/wp-content/themes/grg/images/grg-emblem-white.svg') !important;
}
@media (max-width: 900px) {
  #grg-elegant-card.grg-elegant-card.grg-emblem-topright::after {
    right: 1em !important;
    top: 0.8em !important;
    width: 34vw !important;
    max-width: 120px !important;
    height: 18vw !important;
    max-height: 55px !important;
    background-size: 100% auto !important;
    opacity: 0.17 !important;
    transform: scale(1.09) !important;
  }
}

/* ==================================== 
== GRG Elegant Card watermark mod ===
======================================= 
=========== WATERMARK BOTTOM LEFT  === 
========================================*/
#grg-elegant-card.grg-elegant-card.grg-emblem-bottomleft::after {
  left: 2.5em !important;
  bottom: 2.2em !important;
  right: auto !important;
  top: auto !important;
  width: 190px !important;
  height: 100px !important;
  background-size: 190px auto !important;
  opacity: 0.10 !important;
  transform: scale(1.05) !important;
}
body:not(.dark-mode) #grg-elegant-card.grg-elegant-card.grg-emblem-bottomleft::after {
  background-image: url('/wp-content/themes/grg/images/grg-emblem-navy-blue.svg') !important;
}
body.dark-mode #grg-elegant-card.grg-elegant-card.grg-emblem-bottomleft::after {
  background-image: url('/wp-content/themes/grg/images/grg-emblem-white.svg') !important;
}
@media (max-width: 900px) {
  #grg-elegant-card.grg-elegant-card.grg-emblem-bottomleft::after {
    left: 1em !important;
    bottom: 0.8em !important;
    width: 36vw !important;
    max-width: 122px !important;
    height: 18vw !important;
    max-height: 57px !important;
    background-size: 100% auto !important;
    opacity: 0.17 !important;
    transform: scale(1.11) !important;
  }
}

/* ==================================== 
== GRG Elegant Card watermark mod ===
======================================= 
=========== WATERMARK BOTTOM RIGHT  === 
========================================*/
#grg-elegant-card.grg-elegant-card.grg-emblem-bottomright::after {
  right: -7em !important;
  bottom: -7em !important;
  left: auto !important;
  top: auto !important;
  width: 275px !important;
  height: 275px !important;
  background-size: 235px auto !important;
  opacity: 0.11 !important;
  transform: scale(1.06) !important;
}
body:not(.dark-mode) #grg-elegant-card.grg-elegant-card.grg-emblem-bottomright::after {
  background-image: url('/wp-content/themes/grg/images/grg-emblem-navy-blue.svg') !important;
}
body.dark-mode #grg-elegant-card.grg-elegant-card.grg-emblem-bottomright::after {
  background-image: url('/wp-content/themes/grg/images/grg-emblem-white.svg') !important;
}
@media (max-width: 900px) {
  #grg-elegant-card.grg-elegant-card.grg-emblem-bottomright::after {
    right: -4em !important;
    bottom: -4em !important;
    width: 36vw !important;
    max-width: 122px !important;
    height: 25vw !important;
    max-height: 122px !important;
    background-size: 80% auto !important;
    opacity: 0.17 !important;
    transform: scale(1.35) !important;
  }
}

/* ==================================== 
== GRG Elegant Card watermark mod ===
======================================= 
=========== WATERMARK CENTERED BOTH AXES  === 
========================================*/
#grg-elegant-card.grg-elegant-card.grg-emblem-centered::after {
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: 210px !important;
  height: 110px !important;
  background-size: 210px auto !important;
  opacity: 0.11 !important;
  transform: translate(-50%, -50%) scale(1.12) !important;
}
body:not(.dark-mode) #grg-elegant-card.grg-elegant-card.grg-emblem-centered::after {
  background-image: url('/wp-content/themes/grg/images/grg-emblem-navy-blue.svg') !important;
}
body.dark-mode #grg-elegant-card.grg-elegant-card.grg-emblem-centered::after {
  background-image: url('/wp-content/themes/grg/images/grg-emblem-white.svg') !important;
}
@media (max-width: 900px) {
  #grg-elegant-card.grg-elegant-card.grg-emblem-centered::after {
    left: 50% !important;
    top: 50% !important;
    width: 41vw !important;
    max-width: 130px !important;
    height: 21vw !important;
    max-height: 64px !important;
    background-size: 100% auto !important;
    opacity: 0.17 !important;
    transform: translate(-50%, -50%) scale(1.15) !important;
  }
}


/* ==================================== 
== GRG Elegant Card watermark mod ===
======================================= 
====EXCLUDE HIDE THE WATERMARK EMBLEM === 
========================================*/

#grg-elegant-card.grg-elegant-card.grg-emblem-hide::after,
body:not(.dark-mode) #grg-elegant-card.grg-elegant-card.grg-emblem-hide::after,
body.dark-mode #grg-elegant-card.grg-elegant-card.grg-emblem-hide::after {
  display: none !important;
  content: none !important;
}

/* ==================================== 
== GRG Elegant Card watermark mod ===
======================================= 
====EXCLUDE & HIDE THE GLOWY BLUE LINE === 
========================================*/
#grg-elegant-card.grg-elegant-card.grg-no-leftline::before,
body:not(.dark-mode) #grg-elegant-card.grg-elegant-card.grg-no-leftline::before,
body.dark-mode #grg-elegant-card.grg-elegant-card.grg-no-leftline::before {
  display: none !important;
  content: none !important;
}


/* ==================================== 
== GRG Elegant Card watermark mod ===
======================================= 
====PLACEHOLDER "CUSTOM" WATERMARK EMBLEM === 
========================================*/

#grg-elegant-card.grg-elegant-card.grg-emblem-custom::after {
  background-image: url('/wp-content/themes/grg/images/YOUR-CUSTOM-IMAGE.svg') !important;
  /* You may also override position/size if needed: */
  left: 50% !important;
  top: 45% !important;
  width: 220px !important;
  height: 124px !important;
  background-size: 220px auto !important;
  opacity: 0.15 !important;
  transform: translate(-50%, -50%) scale(1.08) !important;
}

/*  If you need different custom images for dark/light mode:
     ADD THESE BELW to it above code */

body:not(.dark-mode) #grg-elegant-card.grg-elegant-card.grg-emblem-custom::after {
  background-image: url('/wp-content/themes/grg/images/YOUR-DAY-IMAGE.svg') !important;
}
body.dark-mode #grg-elegant-card.grg-elegant-card.grg-emblem-custom::after {
  background-image: url('/wp-content/themes/grg/images/YOUR-NIGHT-IMAGE.svg') !important;
}

/* ==================================== 
== Standalone GRG Emblem NAVIGATION ICON ===
======================================= 
======GRG NAVIGATION ICON HERE  ===
__________________________________________
USAGE add html code with link below to be linked: 
" <a class="grg-card-nav-icon" href="/your-link" title="Go to section"></a> "
and add the CSS CLASS "grg-card-nav-icon" 
========================================*/

/* === Standalone GRG Emblem Navigation Icon === */
.grg-card-nav-icon {
  display: block;
  position: relative;
  width: 3.2em;
  height: 3.2em;
  background: url('/wp-content/themes/grg/images/grg-emblem-white.svg') no-repeat center center;
  background-size: contain;
  opacity: 1;
  border-radius: 50%;
  transition:
    opacity 0.16s,
    transform 0.11s;
  z-index: 20;
  margin: 0 auto;
  /* box-shadow removed */
}

.grg-card-nav-icon:hover,
.grg-card-nav-icon:focus {
  opacity: 0.85;
  transform: scale(1.09);
  /* box-shadow removed */
}

/* === DARK MODE: === */
body.dark-mode .grg-card-nav-icon {
  background-image: url('/wp-content/themes/grg/images/grg-emblem-white-icon-3D.svg');
  /* box-shadow removed */
}

body.dark-mode .grg-card-nav-icon:hover,
body.dark-mode .grg-card-nav-icon:focus {
  opacity: 1;
  transform: scale(1.11);
  /* box-shadow removed */
}

/* === DAY MODE: === */
body:not(.dark-mode) .grg-card-nav-icon {
  background-image: url('/wp-content/themes/grg/images/grg-emblem-navy-icon-3D.svg');
  /* box-shadow removed */
}

body:not(.dark-mode) .grg-card-nav-icon:hover,
body:not(.dark-mode) .grg-card-nav-icon:focus {
  opacity: 1;
  transform: scale(1.10);
  /* box-shadow removed */
}

/* Responsive: shrink icon on small screens */
@media (max-width: 900px) {
  .grg-card-nav-icon {
    width: 2.2em;
    height: 2.2em;
  }
}

/* ==================================== 
== ACCODRION STYLING CUSTOM ===
======================================= 
====== MAIN SECTION  ===
__________________________________________
USAGE: 
STEP 1) in the Advanced tab of the accordion widget, set a CSS class: "grg-elegant-accordion"


======================================== */
/* =====================================================
   GRG Elegant Accordion - "Glass Black Hole" Edition
   Clean, Optimized & Final
   ===================================================== */

/* === GRG Elegant Accordion: Single Animated Watermark Background === */
/* === GRG Elegant Accordion Card Design for NESTED ACCORDION (NO WATERMARK ON ITEMS) === */

/* Card container */
.grg-elegant-accordion .e-n-accordion-item {
  position: relative;
  background: #141924;
  border-radius: 14px;
  padding: 0;
  box-shadow: 0 0 18px rgba(80, 170, 255, 0.12);
  transition: all 0.3s ease-in-out;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 2.2em;
  z-index: 10;
}

/* Glowing left line */
.grg-elegant-accordion .e-n-accordion-item::before {
  content: "";
  position: absolute;
  top: 6%;
  bottom: 6%;
  left: 0;
  width: 2px;
  border-radius: 14px;
  background: linear-gradient(to bottom, #69aaff, #4473c5);
  box-shadow: 0 0 12px #69aaff;
  z-index: 2;
}
.grg-elegant-accordion .e-n-accordion-item[open] {
  background: rgba(36, 48, 66, 0.60);
  box-shadow:
    0 0 0 2.2px rgba(90,180,255,0.18),
    0 0 38px rgba(100,170,255,0.18),
    0 0 8px rgba(90,180,255,0.11);
  border: 1.7px solid rgba(80,170,255,0.16);
  backdrop-filter: blur(20px) saturate(1.13);
}
/* Open card: glow + slight scale */
.grg-elegant-accordion .e-n-accordion-item[open] {
  box-shadow:
    0 0 0 1.5px rgba(90,180,255,0.33),
    0 0 22px rgba(90,180,255,0.14),
    0 0 6px rgba(90,180,255,0.11);
  border: 1.5px solid rgba(80,170,255,0.14);
  transform: scale(1.012);
  z-index: 12;
}

/* === Watermark emblem REMOVED from item cards === */

.grg-elegant-accordion .e-n-accordion-item {
  position: relative;
  background: rgba(28,32,44, 0.43);   /* Dark glass, adjust alpha as needed */
  border-radius: 14px;
  box-shadow: 0 2px 32px 0 rgba(80,170,255,0.14), 0 1.5px 0 0 rgba(110,200,255,0.09);
  border: 1.1px solid rgba(120,170,255, 0.09);
  padding: 0;

  /* ---- GLASS EFFECT ---- */
  backdrop-filter: blur(18px) saturate(1.1); /* Super glass! */
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  transition: box-shadow 0.28s cubic-bezier(.36,2,.34,.84), background 0.21s;
  overflow: visible;
  margin-bottom: 2.2em;
  z-index: 10;
}

/* (No .e-n-accordion-item::after selector!) */

/* Light mode variant */
body:not(.dark-mode) .grg-elegant-accordion .e-n-accordion-item {
  background: #fff;
  color: #111827;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 6px 24px rgba(0,0,0,0.06);
}
body:not(.dark-mode) .grg-elegant-accordion .e-n-accordion-item::before {
  background: #154b91;
  box-shadow: none;
}

/* Animation keyframes (keep for global use if needed) */
@keyframes grgPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.04;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.06);
    opacity: 0.07;
  }
}
@keyframes grgPulseLight {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.055;
  }
  50% {
    transform: translateX(-50%) scale(1.08);
    opacity: 0.08;
  }
}

/* Accordion header (summary) */
.grg-elegant-accordion .e-n-accordion-item-title {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 1.22rem;
  font-family: 'Playfair Display', 'Open Sans', serif;
  letter-spacing: 0.01em;
  background: transparent;
  color: inherit;
  border-radius: 14px;
  cursor: pointer;
  padding: 1.45em 2em 1.45em 3.3em;
  position: relative;
  z-index: 3;
  transition: color 0.2s;
}

/* Title text container */
.grg-elegant-accordion .e-n-accordion-item-title-header .e-n-accordion-item-title-text {
  font-weight: 600;
  font-size: 1.12em;
  font-family: inherit;
  color: inherit;
}

/* Icon styling (plus/minus) */
.grg-elegant-accordion .e-n-accordion-item-title-icon svg {
  width: 1.55em;
  height: 1.55em;
  color: #6faaff;
  margin-left: 0.7em;
  transition: transform 0.2s;
}
.grg-elegant-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg {
  color: #85c7ff;
  transform: rotate(90deg) scale(1.11);
}

/* Accordion content */
.grg-elegant-accordion .e-n-accordion-item > [role="region"] {
  padding: 1.25em 2em 2em 3.5em;
  border-radius: 0 0 14px 14px;
  background: transparent;
  color: inherit;
  font-size: 1.07rem;
  font-family: 'Open Sans', Arial, sans-serif;
  line-height: 1.66;
  box-shadow: none;
  border: none;
}

/* Remove double border if present (Elementor glitch) */
.grg-elegant-accordion .e-n-accordion-item summary {
  border: none !important;
  box-shadow: none !important;
}

/* Responsive adjustments */
@media (max-width: 700px) {
  .grg-elegant-accordion .e-n-accordion-item {
    border-radius: 12px;
    margin-bottom: 1.15em;
  }
  .grg-elegant-accordion .e-n-accordion-item-title {
    padding: 1.15em 1.1em 1.15em 2em;
    font-size: 1.01rem;
    border-radius: 12px;
  }
  .grg-elegant-accordion .e-n-accordion-item > [role="region"] {
    padding: 0.7em 1.15em 1.5em 2em;
    font-size: 0.99rem;
    border-radius: 0 0 12px 12px;
  }
}

/* Inherit link styles */
.grg-elegant-accordion a {
  color: inherit !important;
  text-decoration: none !important;
}
.grg-elegant-accordion a:hover {
  opacity: 0.86;
}


/* === GRG Hero Background with Multiple Animated Watermarks === */

/* Main parent container for the background effect */
.grg-hero-background {
  position: relative !important;
  overflow: visible !important;
  z-index: 0;
}

/* The emblems overlay fills the container */
.grg-hero-background .grg-bg-emblems {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Individual watermark instances (for layering) */
.grg-hero-background .grg-bg-emblem {
  position: absolute;
  left: 50%;
  width: 700px;   /* Or whatever size you want */
  height: 700px;
  pointer-events: none;
  background: url('/wp-content/themes/grg/images/grg-emblem-white.svg') no-repeat center center;
  background-size: contain;
  opacity: 0.035;
  animation: grgPulseHero 13s infinite;
  transform: translate(-50%, 0) scale(1);
  will-change: opacity, transform;
  z-index: 2;
}

/* Now, offset each emblem for layering */
.grg-hero-background .grg-bg-emblem:nth-child(1) { top: 38%; animation-delay: 0s;}
.grg-hero-background .grg-bg-emblem:nth-child(2) { top: 41%; animation-delay: 2.5s;}
.grg-hero-background .grg-bg-emblem:nth-child(3) { top: 44%; animation-delay: 5s;}
.grg-hero-background .grg-bg-emblem:nth-child(4) { top: 47%; animation-delay: 7.5s;}
.grg-hero-background .grg-bg-emblem:nth-child(5) { top: 50%; animation-delay: 10s;}
.grg-hero-background .grg-bg-emblem:nth-child(6) { top: 53%; animation-delay: 11.5s;}

/* Breathing animation */
@keyframes grgPulseHero {
  0%, 100% {
    opacity: 0.04;
    transform: translate(-50%, 0) scale(1);
  }
  50% {
    opacity: 0.08;
    transform: translate(-50%, 0) scale(1.08);
  }
}

/* Responsive for mobile */
@media (max-width: 700px) {
  .grg-hero-background .grg-bg-emblem {
    width: 280px;
    height: 280px;
  }
  .grg-hero-background .grg-bg-emblem:nth-child(n) {
    /* Adjust top offset for mobile if needed */
  }
}

/* === Accordion Card TITLE Color === */
.grg-elegant-accordion .e-n-accordion-item-title,
.grg-elegant-accordion .e-n-accordion-item-title-header .e-n-accordion-item-title-text {
  color: #f3f5f8 !important;           /* soft white for dark mode */
  font-family: 'Playfair Display', 'Open Sans', serif;
  font-weight: 600;
  font-size: 1.16rem;
  letter-spacing: 0.01em;
}

/* DAY MODE: Deep navy */
body:not(.dark-mode) .grg-elegant-accordion .e-n-accordion-item-title,
body:not(.dark-mode) .grg-elegant-accordion .e-n-accordion-item-title-header .e-n-accordion-item-title-text {
  color: #1b232f !important;           /* your signature navy for day mode */
}

/* === Accordion ICONS "+ -" Color === */
.grg-elegant-accordion .e-n-accordion-item-title-icon svg {
  color: #6faaff !important;            /* blue for dark mode */
  filter: drop-shadow(0 0 6px #70e5ff98);
  transition: color 0.22s, filter 0.22s;
}

/* Glow effect for "-" (open) in dark mode */
.grg-elegant-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg {
  color: #b8e7ff !important;
  filter: drop-shadow(0 0 13px #70e5ffd1) brightness(1.3);
}

/* DAY MODE: Strong navy, no glow */
body:not(.dark-mode) .grg-elegant-accordion .e-n-accordion-item-title-icon svg {
  color: #1b232f !important;
  filter: none !important;
}

/* DAY MODE: Open (still navy, slight brightness if you want) */
body:not(.dark-mode) .grg-elegant-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg {
  color: #001f3f !important;           /* emblem blue for extra contrast if desired */
  filter: none !important;
}

/* === Accordion Content (text inside open item) === */
.grg-elegant-accordion .e-n-accordion-item > [role="region"] {
  color: #e4e7ec !important;           /* soft light for dark mode */
}
body:not(.dark-mode) .grg-elegant-accordion .e-n-accordion-item > [role="region"] {
  color: #202b3e !important;           /* slightly lighter than header for body text */
}

/* === ENFORCE NO OVERRIDES === */
.grg-elegant-accordion .e-n-accordion-item-title * {
  color: inherit !important;
}

/* === Accordion Icon Fix: Make + / - Glow in Dark Mode, Strong in Day === */

/* Default: All Accordion icons (both + and -), ALL modes */
.grg-elegant-accordion .e-n-accordion-item-title-icon svg {
  color: #6faaff !important;
  filter: drop-shadow(0 0 6px #70e5ff98) !important;
  transition: color 0.22s, filter 0.22s;
}

/* OPEN (the minus): Glow brighter */
.grg-elegant-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg {
  color: #b8e7ff !important;
  filter: drop-shadow(0 0 18px #70e5ffcc) brightness(1.3) !important;
}

/* Day mode: use navy, NO glow */
body:not(.dark-mode) .grg-elegant-accordion .e-n-accordion-item-title-icon svg {
  color: #1b232f !important;
  filter: none !important;
}
body:not(.dark-mode) .grg-elegant-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg {
  color: #001f3f !important;
  filter: none !important;
}

/* === Accordion Title/Text Color for Best Contrast === */
.grg-elegant-accordion .e-n-accordion-item-title,
.grg-elegant-accordion .e-n-accordion-item-title-header .e-n-accordion-item-title-text {
  color: #f3f5f8 !important;           /* dark mode: soft white */
  font-family: 'Playfair Display', 'Open Sans', serif;
  font-weight: 600;
}

body:not(.dark-mode) .grg-elegant-accordion .e-n-accordion-item-title,
body:not(.dark-mode) .grg-elegant-accordion .e-n-accordion-item-title-header .e-n-accordion-item-title-text {
  color: #1b232f !important;           /* day: navy */
}

/* === GRG Accordion Icon & Title Color: Full Custom Override === */
/* === GRG Accordion Card: Font, Borders, AND Icon Glow === */
/* === GRG Accordion Card: Font, Borders, AND Icon Glow === */

/* Card Title: Open Sans, bold */
.grg-elegant-accordion .e-n-accordion-item-title,
.grg-elegant-accordion .e-n-accordion-item-title-header .e-n-accordion-item-title-text {
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.18rem !important;
  letter-spacing: 0.01em;
  color: #f3f5f8 !important;      /* dark mode */
  line-height: 1.22;
  background: transparent !important;
}
body:not(.dark-mode) .grg-elegant-accordion .e-n-accordion-item-title,
body:not(.dark-mode) .grg-elegant-accordion .e-n-accordion-item-title-header .e-n-accordion-item-title-text {
  color: #1b232f !important;
}

/* Card Content: Open Sans */
.grg-elegant-accordion .e-n-accordion-item > [role="region"] {
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 400;
  color: #e4e7ec !important;
  background: transparent !important;
}
body:not(.dark-mode) .grg-elegant-accordion .e-n-accordion-item > [role="region"] {
  color: #202b3e !important;
}

/* Borders: clean, soft glass look ONLY (no thick focus/active borders) */
.grg-elegant-accordion .e-n-accordion-item,
.grg-elegant-accordion .e-n-accordion-item[open],
.grg-elegant-accordion .e-n-accordion-item:focus-within,
.grg-elegant-accordion .e-n-accordion-item:hover {
  border: 1px solid rgba(90,180,255,0.08) !important;
  box-shadow: 0 0 18px rgba(80,170,255,0.12) !important;
  background: rgba(17, 24, 36, 0.56) !important;
  transition: box-shadow 0.18s, border-color 0.18s;
}
body:not(.dark-mode) .grg-elegant-accordion .e-n-accordion-item,
body:not(.dark-mode) .grg-elegant-accordion .e-n-accordion-item[open],
body:not(.dark-mode) .grg-elegant-accordion .e-n-accordion-item:focus-within,
body:not(.dark-mode) .grg-elegant-accordion .e-n-accordion-item:hover {
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 3px 11px rgba(0,0,0,0.08) !important;
  background: rgba(255,255,255,0.56) !important;       /* <--- THIS OPACITY LEVEL OF GLAS IN DAY-MODE */
}

/* Remove any outline on open, hover, focus, unless for accessibility */
.grg-elegant-accordion .e-n-accordion-item-title:focus,
.grg-elegant-accordion .e-n-accordion-item:focus-within {
  outline: none !important;
}

/* === REAPPLY GLOW TO "+/-" ICONS (DARK MODE) === */
/* --- For ALL accordion icons: dark mode glow! --- */
/* === GRG BLUE PLASMA "BURN" GLOW ICONS FOR ACCORDION === */
/* --- Toned-down GRG Plasma Icon Glow (perfect size and height) --- */

/* ICON SIZE: back to 1.55em, keeps cards taller */
.grg-elegant-accordion .e-n-accordion-item-title-icon svg {
  width: 0.6em !important;
  height: 0.6em !important;
  margin-left: 0.7em;
  vertical-align: middle;
}

.grg-elegant-accordion .e-n-accordion-item-title {
  padding-top: 1.0em !important;
  padding-bottom: 1.0em !important;
}

/* DARK MODE: Soft plasma blue, elegant */
body.dark-mode .grg-elegant-accordion .e-n-accordion-item-title-icon span > svg,
body.dark-mode .grg-elegant-accordion .e-n-accordion-item-title-icon svg {
  fill: #51d5ff !important;
  filter: drop-shadow(0 0 8px #57e4ff99)
          drop-shadow(0 0 13px #37c4ef55)
          brightness(1.14) !important;
  transition: fill 0.18s, filter 0.18s;
}

/* OPEN: Slightly brighter, but no galaxy implosion! */
body.dark-mode .grg-elegant-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon span > svg,
body.dark-mode .grg-elegant-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg {
  fill: #c0f6ff !important;
  filter: drop-shadow(0 0 16px #74e8ffbb)
          drop-shadow(0 0 20px #2fa6e888)
          brightness(1.18) !important;
}

/* DAY MODE: back to navy, no glow */
body:not(.dark-mode) .grg-elegant-accordion .e-n-accordion-item-title-icon span > svg,
body:not(.dark-mode) .grg-elegant-accordion .e-n-accordion-item-title-icon svg {
  fill: #1b232f !important;
  filter: none !important;
}
body:not(.dark-mode) .grg-elegant-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon span > svg,
body:not(.dark-mode) .grg-elegant-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg {
  fill: #001f3f !important;
  filter: none !important;
}

/* === GRG Black Hole / Emblem Background: Different SVG for Dark & Day Mode === */

/* DARK MODE: white, subtle, as now */
body.dark-mode .grg-bg-emblem {
  background: url('/wp-content/themes/grg/images/grg-emblem-white.svg') no-repeat center center !important;
  background-size: contain !important;
  opacity: 0.033; /* perfect cosmic, tweak as needed */
  animation: grgPulseHero 13s infinite;
}

/* DAY MODE: navy blue, glass effect on white */
body:not(.dark-mode) .grg-bg-emblem {
  background: url('/wp-content/themes/grg/images/grg-emblem-light-blue-50pc.svg') no-repeat center center !important;
  background-size: contain !important;
  opacity: 0.03;   /* Start here; tweak lower/higher to taste */
  animation: grgPulseHero 13s infinite;
}