/*
 * CUSTOM.CSS  Custom WordPress Additions & Block Editor Support
 * For: GRG Properties Theme
 * Use: Place in your theme directory as /css/custom.css
 * Author: Niko Gedaze
 * Note: This file is safe for manual extensions, adjustments, and overrides.
 * Text Domain: grg-theme
 */
/* =========================
   GLOBAL CONTAINER SETTING
   ========================= */
html:not(.dark-mode) .elementor-page,
html:not(.dark-mode) .elementor-section,
html:not(.dark-mode) .elementor-container {
  background: var(--main-bg) !important;
  color: var(--main-text) !important;
}

html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* You can override .grg-master-canvas by using custom CSS class on any Elementor Section */
@media (max-width: 700px) {
  html, body {
    max-width: 100vw !important;

  }

  .elementor-container,
  .elementor-section,
  .elementor-widget-container,
  .grg-master-canvas,
  .grg-inner-card,
  .section-content,
  .about-blurb {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  .grg-inner-card {
    padding: 1.35rem 1rem 1.35rem 1rem !important;
    border-radius: 9px;
    box-shadow: 0 2px 8px rgba(80,170,255,0.07);
    margin-bottom: 1.2rem !important;
  }

  /* Smaller, more balanced mobile text */
  body, p, .elementor-widget-text-editor, .section-content p {
    font-size: 1.01rem !important;        /* was 1.11rem */
    line-height: 1.59 !important;         /* was 1.68 */
    letter-spacing: 0.010em !important;
    font-weight: 400 !important;
    color: var(--main-text, #1b232f) !important;
    text-align: left !important;
    word-break: break-word;
    hyphens: auto;
  }

  /* Slightly smaller headings on mobile */
  h1, h2, h3, h4, .elementor-heading-title {
    font-size: 1.07rem !important;        /* was 1.18rem */
    font-weight: 600 !important;
    line-height: 1.22 !important;         /* was 1.26 */
    margin-top: 0.7em !important;
    margin-bottom: 0.44em !important;
    letter-spacing: 0.012em;
    color: var(--header-text, #202b3e) !important;
  }

  .section-content, .about-blurb, .grg-inner-card {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    max-width: 100vw !important;
    margin: 0 auto;
    box-sizing: border-box !important;
  }

  .section-content p,
  .about-blurb {
    margin-bottom: 1.23em !important;
    margin-top: 0.83em !important;
  }
}




/* =========================
   1. GLOBAL TYPOGRAPHY, CANVAS & LINKS – GRG STANDARD (Elementor + Gutenberg)
   ========================= */

/* --- 1.1 BODY & TEXT TYPOGRAPHY (Elementor, Gutenberg, Static) --- */
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, .editor-styles-wrapper {
  font-family: 'Open Sans', Arial, sans-serif;
  color: var(--main-text, #1b232f) !important;
}

/* --- 1.3 SECTION TITLE LINK STYLING --- */
.section-title a.section-link {
  font-family: inherit !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-block;
  transition: color 0.3s ease;
}
body:not(.dark-mode) .section-title a.section-link:hover {
  color: var(--accent-color, #005199) !important;
}
body.dark-mode .section-title a.section-link:hover {
  color: #8dccfd !important;
}

/* --- 1.4 CANVAS / CONTAINER LAYOUT STANDARDS (Elementor & Static) --- */
.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;
  }*/
}

/* --- 1.5 DARK MODE: Headings + Canvas --- */
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6,
body.dark-mode .hero-title, body.dark-mode .section-title, 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);
}
body.dark-mode .main-canvas,
body.dark-mode .section-content,
body.dark-mode .grg-content-page,
body.dark-mode .elementor-section.elementor-top-section {
  background: transparent !important;
}

/* --- 1.6 GUTENBERG/BACKEND EDITOR STYLES --- */
.editor-styles-wrapper {
  background: var(--main-bg, #fff) !important;
  color: var(--main-text, #1b232f) !important;
}
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6 {
  font-family: 'Open Sans', Arial, sans-serif;
}
.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;
}

/* --- 1.7 Responsive: Hide borders, shrink font on mobile --- */
@media (max-width: 700px) {
  h1, h2, h3, h4, h5, h6,
  .hero-title,
  .section-title,
  .elementor-heading-title {
    font-size: 1.08rem !important;
  }
  body, p, .elementor-widget-text-editor {
    font-size: 0.99rem !important;
  }
}
@media (max-width: 440px) {
  .elementor-section.elementor-top-section,
  .elementor-container,
  .elementor-widget-container,
  /*.main-canvas {
    border-left: none !important;
    border-right: none !important;
    padding: 0 0.5rem !important;
  }*/
}

/* --- 1.8 Utility: Content Page Wrapper --- */
.grg-content-page {
  margin: 0 auto;
  padding: 0;
}



/* =============================================
   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: GRG Inner Card Style (All Modes)
   ====================================================== */
.wpforms-form {
  background: rgba(255,255,255,0.98);                         /* Frosted glass look */
  color: var(--main-text);
  margin: 0 auto;
  padding: 2.3rem 2.2rem 2.0rem 2.2rem;
  border-radius: 6px;
  box-shadow: 0 2px 14px 0 rgba(110,170,220,0.25), 0 1.5px 0 0 #f3f8ff7a inset;
  border: 1.5px solid rgba(140,170,220,0.44);
  backdrop-filter: blur(6px) saturate(1.04);
  -webkit-backdrop-filter: blur(6px) saturate(1.04);
  transition: box-shadow 0.18s, border-color 0.17s, background 0.2s;
}

/* Input fields */
.wpforms-field input,
.wpforms-field textarea {
  background: #f8fafc;
  border: 1.2px solid #c1c6d4;
  color: var(--main-text);
  border-radius: 1px;
  padding: 0.86em 1.1em;
  font-size: 1.15rem;
  transition: border-color 0.18s, background 0.16s;
  box-shadow: none;
}
.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;
  font-size: 0.80rem;
  font-weight: 400;
}

/* Submit button */
.wpforms-submit {
  background: var(--nav-link);
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 0.82em 2.2em;
  box-shadow: 0 4px 16px rgba(80,170,255,0.09);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  margin-top: 1.1em;
  font-size: 1.08rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.wpforms-submit:hover {
  background: var(--nav-link-hover);
  color: #fff;
}

/* Error & confirmation messages */
.wpforms-error,
.wpforms-confirmation-container-full,
.wpforms-confirmation-container {
  color: var(--accent);
  background: #e7edf9;
  border-radius: 0.7em;
  padding: 0.95em 1.3em;
  margin-top: 1.1em;
  font-size: 1.02rem;
  border: 1.2px solid #b2cafe1a;
}

/* --- DARK MODE --- */
body.dark-mode .wpforms-form {
  background: rgba(23,33,52,0.98);
  color: var(--main-text-dark);
  box-shadow: 0 1px 4px rgba(60,110,190,0.90);
  border: 2px solid rgba(80,170,255,0.32);
  backdrop-filter: blur(8px) saturate(1.09);
  -webkit-backdrop-filter: blur(8px) saturate(1.09);
}
body.dark-mode .wpforms-field input,
body.dark-mode .wpforms-field textarea {
  background: #222c43;
  color: var(--main-text-dark);
  border: 1.2px solid #355693;
}
body.dark-mode .wpforms-field input:focus,
body.dark-mode .wpforms-field textarea:focus {
  background: #29314b;
  border-color: #82aaff;
}
body.dark-mode .wpforms-field-label {
  color: var(--header-text-dark);
}
body.dark-mode .wpforms-submit {
  background: #232b3e;   /* Matches your master canvas / inner card bg */
  color: #e4eaf5;
  border: 1.08px solid #355693;
  font-weight: 400;
  box-shadow: 0 2px 10px rgba(44,89,170,0.22);
  transition: background 0.18s, color 0.18s, border-color 0.16s;
}
body.dark-mode .wpforms-submit:hover {
  background: #304066;   /* Slightly lighter or use accent/nav-link-hover */
  color: #fff;
  border-color: #82aaff;
}
body.dark-mode .wpforms-error,
body.dark-mode .wpforms-confirmation-container-full,
body.dark-mode .wpforms-confirmation-container {
  background: #232e4a;
  color: #b2cafe;
  border-color: #264;
}

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

/* Widen the main container and content section ONLY on Contact page */
body.page-id-366 .main-canvas,
body.page-id-366 .section-content {
  margin-left: auto;
  margin-right: auto;
}

/* Make WPForms container wider on Contact page */
body.page-id-366 .wpforms-form {
  margin-left: auto;
  margin-right: auto;
}

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

/* Make textarea taller */
body.page-id-366 .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: 100vw !important;
    padding: 0.7rem 2vw 1.1rem 2vw !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: rgba(255,255,255,0.98) !important;
    border: 1.5px solid rgba(140,170,220,0.44) !important;
  }
  body.dark-mode .wpforms-form {
    background: rgba(23,33,52,0.98) !important;
    border: 1px solid rgba(80,170,255,0.30) !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 {
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 2.3rem 2.2rem 2.0rem 2.2rem;
  }
  .wpforms-field-row.wpforms-field-large .wpforms-field-row-block {
    display: flex !important;
    gap: 1.18em !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: 'Open Sans', Arial, sans-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 {
  text-decoration: none !important;
  transition: color 0.2s ease;
}

a:hover, a:focus {
  text-decoration: none !important;
  outline: none;
}

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

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

/* Elementor text editor links */
.elementor-widget-text-editor a {
  text-decoration: none !important;
}
.elementor-widget-text-editor a:hover {
  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: 100% !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;
  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: 0 auto;
  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: 80% !important;
  right: auto !important;
  bottom: auto !important;
  width: 600px !important;
  height: 600px !important;
  background-size: 1200px auto !important;
  opacity: 0.03 !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  === REMOVED    */


/* --------- IMPLEMENTATION OF NEW MASTER LAYOUT --------- */

/* ================================================
   GRG MASTER CANVAS (Outer Card Background)
   For: Top-level background card, wraps all content
   ================================================ */

.grg-master-canvas {
  position: relative;
  max-width: 75rem !important;
  width: 100% !important;
  transition: box-shadow 0.26s, background 0.23s, border-color 0.18s !important;
  overflow: visible !important;
  /* No background, border, or shadow here—they're set per mode below */
}

/* LIGHT MODE */
body:not(.dark-mode) .grg-master-canvas {
  background: rgba(248,251,255,0.05);                /* subtle, bluish white */
  border: 1px solid rgba(180,210,255,0.15);        /* crisp, light blue */
  box-shadow: 0 12px 24px 0 rgba(120,170,220,0.90);   /* tighter, less spread */

  /* Optional: faint inner white for glass edge */

  box-shadow: 0 2px 12px 0 rgba(120,170,220,0.09), 0 6px 0 0 #fff6 inset;
  backdrop-filter: blur(12px) saturate(1.04);
  -webkit-backdrop-filter: blur(12px) saturate(1.04);
}

/* DARK MODE */
body.dark-mode .grg-master-canvas {
  background: rgba(23,33,53,0.99); /* deep navy glass */
  border: 1.5px solid rgba(80,170,255,0.11);
  box-shadow:
    0 1px 10px 0 rgba(30,55,110,0.40),
    0 1px 0 0 rgba(90,180,255,0.13);
  backdrop-filter: blur(20px) saturate(1.14);
  -webkit-backdrop-filter: blur(20px) saturate(1.14);
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .grg-master-canvas {
    max-width: 99vw;
    margin: 2.5vw 1vw 2vw 1vw;
    padding: 2.1rem 0.7rem 1.9rem 0.7rem;
    border-radius: 18px;
  }
}

/* ================================================
   GRG INNER CARD (Content Card / Feature Block)
   Use inside .grg-master-canvas for all core content
   ================================================ */

.grg-inner-card {
  position: relative;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 2px 14px rgba(70,120,220,0.08);
  border: 1px solid rgba(120,170,255,0.07);
  margin: 0 0 2.1rem 0;
  padding: 2.0rem 2.1rem 1.5rem 2.1rem;
  transition: box-shadow 0.23s, background 0.21s, border-color 0.18s;
  z-index: 2;
  overflow: visible;
}

.grg-inner-card:last-child {
  margin-bottom: 0;
}

/* LIGHT MODE */
body:not(.dark-mode) .grg-inner-card {
  background: rgba(255,255,255,0.98);                        /* Slightly more solid, but still glassy */
  border: 1.5px solid rgba(140,170,220,0.28);                /* A little stronger & cooler blue border */
  box-shadow:
    0 2px 11px 0 rgba(90,140,220,0.10),                     /* Crisper blue shadow */
    0 1.5px 0 0 #f3f8ff7a inset;                            /* Slight “inner glass” highlight */
  border-radius: 7px !important;                                      /* Smoother, slightly rounder corners */
  transition: box-shadow 0.18s, border-color 0.17s;
  backdrop-filter: blur(6px) saturate(1.04);                /* Extra touch of glassiness */
}
body:not(.dark-mode) .grg-inner-card:hover,
body:not(.dark-mode) .grg-inner-card:focus-within {
  border-color: #5ea6ff88;
  box-shadow: 0 5px 14px 0 rgba(90,170,255,0.13);
}


/* DARK MODE */
body.dark-mode .grg-inner-card {
  background: rgba(23,33,53,0.99);
  border: 1.5px solid rgba(80,170,255,0.05);
  box-shadow: 0 2.5px 8px 0 rgba(70,120,220,0.11); /* tight, soft */
  border-radius: 7px;
  transition: 
    box-shadow 0.17s, 
    border-color 0.15s, 
    transform 0.18s;
}

/* HOVER/FOCUS (Optional, for clickable/interactable cards) */
body.dark-mode .grg-inner-card:hover,
body.dark-mode .grg-inner-card:focus-within {
  border-color: #365888;
  box-shadow:
    0 2px 12px 0 rgba(90,170,255,0.30),   /* main lift */
    0 0 1px 0 #6a85b1;                  /* ultra-subtle blue edge */
  transform: translateY(-2px) scale(1.012);
  z-index: 4;
}


/* RESPONSIVE */
@media (max-width: 900px) {
  .grg-inner-card {
    border-radius: 11px;
    padding: 1.1rem 1.2rem 1.0rem 1.2rem;
  }
}

/* ==================================== 
== NEW ACCODRION STYLING CUSTOM 2.0 ===
======================================= 
====== MAIN SECTION  === */

/* ================================================
   GRG ELEGANT ACCORDION — CLEAN CORPORATE GLASS
   (Elementor overwrite, sharp blue, perfect fit)
   ================================================ */

/* ==== MAIN CONTAINER ==== */
.grg-elegant-accordion .e-n-accordion-item {
  position: relative;
  background: rgba(250,253,255,0.79) !important;    /* Opacity level - Frosty glass */
  border-radius: 4px !important;
  box-shadow: 0 1px 2px 0 rgba(20,120,180,0.75);  /* (20=blur effect X, X, and 0.75 is oppacity) */
  border: 1.1px solid rgba(170, 200, 255, 0.13);
  margin-bottom: 1.1rem;
  padding: 0;
  overflow: visible;
  transition: box-shadow 0.19s, background 0.17s, border-color 0.17s, border-radius 0.15s, transform 0.19s;
  font-family: 'Open Sans', Arial, sans-serif;
  z-index: 11;
}
.grg-elegant-accordion .e-n-accordion-item::before {
  display: none !important;
}

/* ==== ACTIVE/OPEN/HOVER STATE ==== */
.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 {
  background: rgba(255,255,255,0.92) !important;
  box-shadow: 0 2px 30px 0 rgba(50,100,210,0.13), 0 0 0 1px #4183ff44; /* Border diameter and thickness */
  border-color: #5ea6ff77 !important;
  transform: scale(1.013);
  z-index: 13;
}

/* ==== DARK MODE BASE ==== */
body.dark-mode .grg-elegant-accordion .e-n-accordion-item {
  background: rgba(23,33,53,0.99) !important;
  border: 1.5px solid rgba(80,170,255,0.05) !important;
  border-radius: 7px !important;
  box-shadow: 0 2.5px 8px 0 rgba(70,120,220,0.11) !important;
  transition: box-shadow 0.17s, border-color 0.15s, transform 0.18s;
}


/* ==== HEADER / MENU ==== */
.grg-elegant-accordion .e-n-accordion-item-title {
  display: flex !important;
  align-items: center;
  font-family: inherit;
  background: transparent !important;
  color: inherit !important;
  border-radius: 8px !important;
  font-weight: 400 !important;
  font-size: 1.08em !important;
  cursor: pointer;
  min-height: 2.6em;
  padding: 0.9em 1.35em 0.9em 1.35em !important;
  letter-spacing: 0.01em;
  transition: color 0.16s, background 0.16s, border-radius 0.13s;
}
@media (max-width: 900px) {
  .grg-elegant-accordion .e-n-accordion-item-title {
    font-size: 0.97em !important;
    padding: 0.7em 0.8em 0.7em 1.15em !important;
    border-radius: 7px !important;
  }
}

/* ==== ICONS: LIGHT MODE ==== */
.grg-elegant-accordion .e-n-accordion-item-title-icon svg {
  width: 0.74em !important;
  height: 0.74em !important;
  margin-left: 1em !important;
  color: #3577be !important;  /* your blue/navy, fits main link color */
  filter: none !important;
  opacity: 0.83;
  transition: color 0.20s, filter 0.17s, opacity 0.14s, box-shadow 0.16s;
  border-radius: 2.2px;
}
.grg-elegant-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg {
  color: #1253a6 !important;
  filter: drop-shadow(0 0 7px #7bbaff99);
  opacity: 1;
  box-shadow: 0 0 0 2.5px #498eff33;
  transform: rotate(90deg) scale(1.11);
}

/* ==== ICONS: DARK MODE SHARP BLUE GLOW ==== */
body.dark-mode .grg-elegant-accordion .e-n-accordion-item-title-icon svg {
  color: #5eaaff !important;  /* blue matches your branding */
  filter: drop-shadow(0 0 8px #4baaffcc) !important;
  opacity: 0.88;
}
body.dark-mode .grg-elegant-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg {
  color: #e9f2ff !important;
  filter: drop-shadow(0 0 17px #48b8ffcc) !important;
  box-shadow: 0 0 0 2.5px #63a4ff66;
  opacity: 1;
}

/* ==== CONTENT REGION ==== */
.grg-elegant-accordion .e-n-accordion-item > [role="region"] {
  font-family: 'Open Sans', Arial, sans-serif !important;
  color: inherit !important;
  background: transparent !important;
  border-radius: 0 0 9px 9px !important;
  border: none !important;
  padding: 1.13em 1.5em 1.41em 1.5em !important;
  font-size: 1.04em !important;
  line-height: 1.55 !important;
}

/* ==== MENU/HEADER TEXT ==== */
.grg-elegant-accordion .e-n-accordion-item-title-header .e-n-accordion-item-title-text {
  font-weight: 600 !important;
  font-size: 1.08em !important;
  font-family: inherit;
  color: inherit !important;
}

/* ==== ACCESSIBILITY ==== */

/* ==== RESPONSIVE: LESS ROUND, LESS MARGIN ==== */
@media (max-width: 900px) {
  .grg-elegant-accordion .e-n-accordion-item {
    border-radius: 7px !important;
    margin-bottom: 0.6rem !important;
  }
  .grg-elegant-accordion .e-n-accordion-item-title {
    font-size: 0.96em !important;
    padding: 0.7em 1.1em 0.7em 1.1em !important;
    border-radius: 5px !important;
  }
}

/* ==== LINK STYLES INSIDE ACCORDION ==== */
.grg-elegant-accordion a {
  color: var(--nav-link) !important;
  text-decoration: none !important;
  transition: color 0.18s;
}
.grg-elegant-accordion a:hover {
  color: var(--nav-link-hover) !important;
  opacity: 0.84;
}

/* ---- ICONS: FULL FORCE OVERWRITE (SVG + path) ---- */
.grg-elegant-accordion .e-n-accordion-item-title-icon svg,
.grg-elegant-accordion .e-n-accordion-item-title-icon svg path {
  color: #5eaaff !important;
  fill: #5eaaff !important;
  stroke: #5eaaff !important;
  opacity: 0.88 !important;
  filter: drop-shadow(0 0 8px #4baaffcc) !important;
  transition: color 0.20s, fill 0.17s, filter 0.16s, opacity 0.14s;
}
.grg-elegant-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg,
.grg-elegant-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg path {
  color: #e9f2ff !important;
  fill: #e9f2ff !important;
  stroke: #e9f2ff !important;
  filter: drop-shadow(0 0 17px #48b8ffcc) !important;
  opacity: 1 !important;
}
body.dark-mode .grg-elegant-accordion .e-n-accordion-item-title-icon svg,
body.dark-mode .grg-elegant-accordion .e-n-accordion-item-title-icon svg path {
  color: #5eaaff !important;
  fill: #5eaaff !important;
  stroke: #5eaaff !important;
}
body.dark-mode .grg-elegant-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg,
body.dark-mode .grg-elegant-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg path {
  color: #e9f2ff !important;
  fill: #e9f2ff !important;
  stroke: #e9f2ff !important;
}

/* ---- DAY MODE ICON COLOR: DARK NAVY (like menu text) ---- */
body:not(.dark-mode) .grg-elegant-accordion .e-n-accordion-item-title-icon svg,
body:not(.dark-mode) .grg-elegant-accordion .e-n-accordion-item-title-icon svg path {
  color: #1b232f !important;
  fill: #1b232f !important;
  stroke: #1b232f !important;
  filter: none !important;
  opacity: 0.90 !important;
}

/* ---- Keep ACTIVE/OPEN item blue if you want a subtle accent: ---- */
body:not(.dark-mode) .grg-elegant-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg,
body:not(.dark-mode) .grg-elegant-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg path {
  color: #1253a6 !important;  /* or keep #1b232f for same as closed */
  fill: #1253a6 !important;
  stroke: #1253a6 !important;
  filter: none !important;
  opacity: 1 !important;
}


/* ---- BODRDER: FULL FORCE OVERWRITE (Menu Boders) ---- */

/* === BASE: REMOVE ELEMENTOR SUMMARY BORDERS === */
.grg-elegant-accordion .e-n-accordion-item summary {
  border: none !important;
}

/* === DARK MODE ACCORDION BORDERS === */
body.dark-mode .grg-elegant-accordion .e-n-accordion-item {
  border: 1px solid rgba(80,170,255,0.06) !important;
}
body.dark-mode .grg-elegant-accordion .e-n-accordion-item[open],
body.dark-mode .grg-elegant-accordion .e-n-accordion-item:focus-within,
body.dark-mode .grg-elegant-accordion .e-n-accordion-item:hover {
  border-color: rgba(120,170,255,0.12) !important;
}

/* === LIGHT MODE ACCORDION BORDERS === */
body:not(.dark-mode) .grg-elegant-accordion .e-n-accordion-item {
  border: 1px solid rgba(0,0,0,0.01) !important;
}

/* === LIGHT / DARK MODE ACCORDION background tweaking overrides === */

/* DAY MODE: Harmonize active/inactive backgrounds */
.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 {
  background: rgba(253,253,255,0.85) !important;
}

/* DARK MODE: Harmonize active/inactive backgrounds */
body.dark-mode .grg-elegant-accordion .e-n-accordion-item[open],
body.dark-mode .grg-elegant-accordion .e-n-accordion-item:focus-within,
body.dark-mode .grg-elegant-accordion .e-n-accordion-item:hover {
  background: rgba(23,33,53,0.98) !important;
}



/* =======================================================
   GRG Compact Accordion Modifier (for Track Record, etc.)
   Add to: grg-elegant-accordion grg-accordion-compact
   ====================================================== */
.grg-elegant-accordion.grg-accordion-compact .e-n-accordion-item,
.grg-elegant-accordion .grg-accordion-compact .e-n-accordion-item {
  min-height: 34px !important;
  padding-top: 0.4em !important;
  padding-bottom: 0.4em !important;
}

.grg-elegant-accordion.grg-accordion-compact .e-n-accordion-title,
.grg-elegant-accordion .grg-accordion-compact .e-n-accordion-title {
  font-size: 1.01rem !important;        /* Standard: 1.15rem+ */
  font-weight: 500 !important;          /* Standard: 600–700 */
  letter-spacing: 0.01em !important;
  padding-top: 0.09em !important;
  padding-bottom: 0.09em !important;
  line-height: 1.18 !important;
}

.grg-elegant-accordion.grg-accordion-compact .e-n-accordion-icon,
.grg-elegant-accordion .grg-accordion-compact .e-n-accordion-icon {
  font-size: 1.05em !important;          /* Standard: 1.2em */
  margin-right: 0.7em !important;
}

/* Reduce spacing between items */
.grg-elegant-accordion.grg-accordion-compact .e-n-accordion-item:not(:last-child),
.grg-elegant-accordion .grg-accordion-compact .e-n-accordion-item:not(:last-child) {
  margin-bottom: 0.16em !important;     /* Tighter spacing */
}

/* Optionally: Compact the open item slightly less tall too */
.grg-elegant-accordion.grg-accordion-compact .e-n-accordion-item[open] .e-n-accordion-title,
.grg-elegant-accordion .grg-accordion-compact .e-n-accordion-item[open] .e-n-accordion-title {
  font-size: 1.08rem !important;
  font-weight: 600 !important;
}

/* === GRG Compact Accordion: Strong Override for Elementor === */
.grg-elegant-accordion.grg-accordion-compact .elementor-accordion-item,
.grg-elegant-accordion.grg-accordion-compact .elementor-accordion-title,
.grg-elegant-accordion.grg-accordion-compact .e-n-accordion-item,
.grg-elegant-accordion.grg-accordion-compact .e-n-accordion-title {
  min-height: 22px !important;
  padding-top: 0.22em !important;
  padding: 0.17em 0.7em !important;
  font-size: 0.89rem !important;
  font-weight: 500 !important;
  line-height: 1.13 !important;
  letter-spacing: 0 !important;
}
.grg-elegant-accordion.grg-accordion-compact .elementor-accordion-icon,
.grg-elegant-accordion.grg-accordion-compact .e-n-accordion-icon {
  font-size: 1em !important;
  margin-right: 0.48em !important;
  vertical-align: middle;
}
.grg-elegant-accordion.grg-accordion-compact .elementor-accordion-item:not(:last-child),
.grg-elegant-accordion.grg-accordion-compact .e-n-accordion-item:not(:last-child) {
  margin-bottom: 0.05em !important;
}

/* === ACCORDION HOVER GLOW: 1:1 MATCH TO INNER CARD (DARK MODE) === */
body.dark-mode .grg-elegant-accordion .e-n-accordion-item[open],
body.dark-mode .grg-elegant-accordion .e-n-accordion-item:hover,
body.dark-mode .grg-elegant-accordion .e-n-accordion-item:focus-within {
  border-color: #365888 !important;
  box-shadow:
    0 2px 12px 0 rgba(90,170,255,0.30) !important,
    0 0 1px 0 #6a85b1 !important;
  transform: translateY(-2px) scale(1.012) !important;
  z-index: 100 !important;
}


/* =====================================
   OPTIONAL: BLACK HOLE/EMBLEM BACKGROUND
   ===================================== */
/*
Add a class to your accordion wrapper (Elementor > Advanced > CSS class): 
  grg-blackhole-accordion
Then, add this code to custom.css to enable the animated background effect.

.grg-blackhole-accordion {
  position: relative !important;
  overflow: visible !important;
}
.grg-blackhole-accordion::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 54%;
  width: 520px;
  height: 340px;
  background: url('/wp-content/themes/grg/images/grg-emblem-white.svg') no-repeat center center;
  background-size: 420px auto;
  opacity: 0.026;
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%) scale(1.06);
  filter: blur(0.6px);
  animation: grgPulseHero 15s infinite;
}
body:not(.dark-mode) .grg-blackhole-accordion::before {
  background-image: url('/wp-content/themes/grg/images/grg-emblem-navy-blue.svg');
  opacity: 0.018;
}
@media (max-width: 900px) {
  .grg-blackhole-accordion::before {
    width: 65vw;
    height: 22vw;
    background-size: 62vw auto;
    opacity: 0.035;
  }
}
*/


/* =====================================
   TRACK RECORD: COMPANY LOGO IMPLEMENTATION
   ===================================== */

/* Base style: left-align, transparent bg, good sizing */
.grg-logo-switch {
  display: block;
  height: 44px;                /* This is your per-logo height */
  min-width: 300px;             /* Guarantees container isn't zero width */
  width: auto;                 /* Let it size naturally */
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 100%;  /* This is best for height-driven sizing */
  background-color: transparent !important;
  transition: background-image 0.15s;
}

.grg-logo-switch.eqt-exeter-logo { height: 74px; }
.grg-logo-switch.segro-logo     { height: 38px; }
.grg-logo-switch.verdion-logo   { height: 48px; }

/* --- DAY MODE: each company --- */
.grg-logo-switch.eqt-exeter-logo {
  background-image: url('/wp-content/themes/grg/images/logos/eqt-exeter-day.svg');
}
.grg-logo-switch.segro-logo {
  background-image: url('/wp-content/themes/grg/images/logos/segro-day.svg');
}
.grg-logo-switch.verdion-logo {
  background-image: url('/wp-content/themes/grg/images/logos/verdion-day.svg');
}

/* --- NIGHT MODE: swap to white/bright SVGs --- */
body.dark-mode .grg-logo-switch.eqt-exeter-logo {
  background-image: url('/wp-content/themes/grg/images/logos/eqt-exeter-night.svg');
}
body.dark-mode .grg-logo-switch.segro-logo {
  background-image: url('/wp-content/themes/grg/images/logos/segro-night.svg');
}
body.dark-mode .grg-logo-switch.verdion-logo {
  background-image: url('/wp-content/themes/grg/images/logos/verdion-night.svg');
}

/* ==== DARK MODE: ACCORDION MATCHES INNER CARD ==== */
body.dark-mode .grg-elegant-accordion .e-n-accordion-item {
  background: rgba(23,33,53,0.99) !important;
  border: 1px solid rgba(80,170,255,0.05) !important;
  border-radius: 7px !important;
  box-shadow: 0 1px 3px 0 rgba(70,120,220,0.45) !important;
  transition: box-shadow 0.18s, border-color 0.15s, transform 0.18s;
  overflow: visible !important;
  z-index: 48 !important;
}

/* GLOW & POP ON OPEN / HOVER / FOCUS: EXACT MATCH TO INNER CARD */
body.dark-mode .grg-elegant-accordion .e-n-accordion-item[open],
body.dark-mode .grg-elegant-accordion .e-n-accordion-item:hover,
body.dark-mode .grg-elegant-accordion .e-n-accordion-item:focus-within {
  border-color: #365888 !important;
  box-shadow:
    0 2px 12px 0 rgba(90,170,255,0.30) !important,
    0 0 1px 0 #6a85b1 !important;
  transform: translateY(-2px) scale(1.012) !important;
  z-index: 49 !important;
  background: rgba(23,33,53,0.99) !important;
}

/* ===============================
========@ MOBILE FONT LOCK =======
==================================== */

/* === GRG Global Typography Standard === */

/* ---- Desktop (default) ---- */
body, p, .section-content, .about-blurb, .elementor-widget-text-editor {
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-size: 1.15rem;
  line-height: 1.68;
  letter-spacing: 0.011em;
  color: var(--main-text, #1b232f);
  font-weight: 400;
  text-align: left;
  word-break: break-word;
  hyphens: auto;
}

h1, .elementor-heading-title.h1 {
  font-size: 2.05rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.005em;
  margin-bottom: 0.65em;
  color: var(--header-text, #202b3e);
}
h2, .elementor-heading-title.h2 {
  font-size: 1.60rem;
  font-weight: 600;
  line-height: 1.17;
  letter-spacing: 0.004em;
  margin-bottom: 0.55em;
}
h3, .elementor-heading-title.h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.21;
  margin-bottom: 0.48em;
}
h4, .elementor-heading-title.h4 {
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.24;
  margin-bottom: 0.38em;
}
h5, .elementor-heading-title.h5 {
  font-size: 0.99rem;
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 0.26em;
  letter-spacing: 0.014em;
  text-transform: uppercase;
}
h6, .elementor-heading-title.h6 {
  font-size: 0.93rem;
  font-weight: 500;
  line-height: 1.23;
  margin-bottom: 0.15em;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

/* ---- Desktop Paragraph Spacing ---- */
.section-content p,
.about-blurb,
.elementor-widget-text-editor p {
  margin-top: 0.65em;
  margin-bottom: 1.1em;
}

/* ---- Mobile Optimized Typography ---- */
@media (max-width: 700px) {
  html, body {
    font-size: 94% !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    max-width: 100vw !important;
  }
  body, p, .section-content, .about-blurb, .elementor-widget-text-editor {
    font-size: 0.99rem !important;
    line-height: 1.59 !important;
    letter-spacing: 0.011em !important;
    font-weight: 400 !important;
    text-align: left !important;
    word-break: break-word;
    hyphens: auto;
  }
  h1, .elementor-heading-title.h1 {
    font-size: 1.24rem !important;
    line-height: 1.15 !important;
    margin-bottom: 0.52em !important;
  }
  h2, .elementor-heading-title.h2 {
    font-size: 1.11rem !important;
    line-height: 1.18 !important;
    margin-bottom: 0.44em !important;
  }
  h3, .elementor-heading-title.h3 {
    font-size: 1.03rem !important;
    line-height: 1.21 !important;
    margin-bottom: 0.35em !important;
  }
  h4, .elementor-heading-title.h4 {
    font-size: 0.97rem !important;
    line-height: 1.21 !important;
    margin-bottom: 0.22em !important;
  }
  h5, .elementor-heading-title.h5 {
    font-size: 0.90rem !important;
    line-height: 1.20 !important;
    letter-spacing: 0.018em !important;
    margin-bottom: 0.11em !important;
    text-transform: uppercase !important;
  }
  h6, .elementor-heading-title.h6 {
    font-size: 0.58rem !important;
    line-height: 1.16 !important;
    letter-spacing: 0.027em !important;
    margin-bottom: 0.05em !important;
    text-transform: uppercase !important;
  }
  .section-content p,
  .about-blurb,
  .elementor-widget-text-editor p {
    margin-top: 0.57em !important;
    margin-bottom: 0.97em !important;
  }
}

/* Font smoothing on all devices */
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* === PG: Language Switch + Theme Toggle Grouping (Header) === */
.header-right-group {
    display: flex;
    align-items: center;
    gap: 1.1em;
}
@media (max-width: 700px) {
    .header-right-group {
        flex-direction: column;
        align-items: flex-end;
        gap: 0.38em;
        right: 18px;
        top: 14px;
    }
    .lang-dropdown {
        min-width: 58px !important;
        padding: 0.06em 0.1em !important;
        font-size: 0.99em;
    }
}
@media (max-width: 450px) {
    .lang-dropdown {
        min-width: 46px !important;
        padding: 0.01em 0.02em !important;
        font-size: 0.96em;
    }
}
.lang-switch.open .lang-dropdown {
    display: block;
}
.lang-dropdown li.current-language a {
    font-weight: bold;
    color: var(--nav-link-hover) !important;
    cursor: default;
    pointer-events: none;
}

@media (max-width: 700px) {
  header {
    position: sticky !important;
    top: 0 !important;
    z-index: 2000 !important;
    width: 100vw !important;
    /* Ensure no transform, no filter, etc. */
  }
}