/* 1) Dropdown: add 5px top padding */ .main-nav ul.sub-menu{ padding-top: 10px !important; } /* 2) Dropdown dividers: inset 2px from left and right */ .main-nav ul.sub-menu > li > a{ position: relative; } .main-nav ul.sub-menu > li:not(:last-child) > a::after{ content: ""; position: absolute; left: 2px; right: 10px; bottom: 0; height: 1px; background: #86BC25; } /* Keep the hover underline above the dropdown */ .main-nav .menu-item-has-children{ position: relative; } /* Raise the link (and its underline) above the submenu */ .main-nav .menu-item-has-children > a.elementor-item{ position: relative; z-index: 20; } /* If your underline is built with ::before or ::after, raise it too */ .main-nav .menu-item-has-children > a.elementor-item::before, .main-nav .menu-item-has-children > a.elementor-item::after{ z-index: 21; pointer-events: none; } /* Put submenu under the underline */ .main-nav .menu-item-has-children > .sub-menu{ position: absolute; z-index: 10; } /* Arrow flip (rotate in place, no shifting) */ .main-nav a.has-submenu .sub-arrow{ display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 0 !important; margin-inline-start: 8px !important; padding: 0 !important; line-height: 1; vertical-align: middle; transition: transform 0.1s ease; transform-origin: 50% 50%; will-change: transform; backface-visibility: hidden; } /* Make sure the SVG doesn’t affect sizing */ .main-nav a.has-submenu .sub-arrow svg{ display: block; width: 14px; height: 14px; pointer-events: none; } /* Flip on hover / focus / aria-expanded */ .main-nav .menu-item-has-children:hover > a.has-submenu .sub-arrow, .main-nav .menu-item-has-children:focus-within > a.has-submenu .sub-arrow, .main-nav a.has-submenu[aria-expanded="true"] .sub-arrow{ transform: rotate(180deg); } /* Move dropdown slightly left without breaking the animation */ @media (min-width: 1025px){ .main-nav ul.sub-menu.elementor-nav-menu--dropdown{ margin-left: -22px !important; } } " the code for the transparent header ( applies to the header container): "/* ========================================================= Sticky header style swap (Elementor Pro) - Default: transparent + white elements - On scroll: background #f7fbfd, text #1e1e1e, swap logos ========================================================= */ /* Smooth transitions */ selector { transition: background-color .25s ease, box-shadow .25s ease; } /* Default state (top of page) */ selector { background-color: transparent !important; box-shadow: none !important; } /* ===== LOGO SWAP (default = light logo) ===== */ selector .logo-dark { display: none !important; } selector .logo-light { display: block !important; } /* ===== MENU (default state) ===== */ selector .elementor-nav-menu .elementor-item { color: #ffffff !important; } /* Dropdown arrows (default) */ selector .elementor-nav-menu .sub-arrow, selector .elementor-nav-menu .sub-arrow i, selector .elementor-nav-menu .sub-arrow svg { color: #ffffff !important; fill: #ffffff !important; } /* ===== MENU (hover + focus) ===== */ selector .elementor-nav-menu .elementor-item:hover, selector .elementor-nav-menu .elementor-item:focus { color: #93c84e !important; } /* Dropdown arrows on hover/focus */ selector .elementor-nav-menu li:hover > a .sub-arrow, selector .elementor-nav-menu li:focus-within > a .sub-arrow, selector .elementor-nav-menu li:hover > a .sub-arrow i, selector .elementor-nav-menu li:hover > a .sub-arrow svg { color: #93c84e !important; fill: #93c84e !important; } selector .elementor-nav-menu .elementor-item, selector .elementor-nav-menu .sub-arrow, selector .elementor-nav-menu .sub-arrow svg { transition: color 0.25s ease, fill 0.25s ease; } /* Mobile hamburger */ selector .elementor-menu-toggle, selector .elementor-menu-toggle i, selector .elementor-menu-toggle svg { color: #ffffff !important; fill: #ffffff !important; } /* ===== SEARCH (default) ===== */ selector .elementor-search-form__input, selector input[type="search"], selector input[type="text"] { background: rgba(255,255,255,0.10) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.25) !important; } selector .elementor-search-form__input::placeholder, selector input[type="search"]::placeholder, selector input[type="text"]::placeholder { color: rgba(255,255,255,0.75) !important; } /* Search submit */ selector .elementor-search-form__submit, selector button { border: 1px solid rgba(255,255,255,0.25) !important; } selector .elementor-search-form__submit i, selector .elementor-search-form__submit svg { color: #ffffff !important; fill: #ffffff !important; } /* ===== LANGUAGE (default white) ===== */ selector .header-lang, selector .header-lang * { color: #ffffff !important; } selector .header-lang svg, selector .header-lang i { fill: #ffffff !important; color: #ffffff !important; } /* ========================================================= ON SCROLL (Elementor adds this class to the sticky element) ========================================================= */ selector.elementor-sticky--effects { background-color: #f7fbfd !important; box-shadow: 0 8px 30px rgba(0,0,0,.08) !important; } /* Logo swap on scroll */ selector.elementor-sticky--effects .logo-light { display: none !important; } selector.elementor-sticky--effects .logo-dark { display: block !important; } /* ===== MENU (sticky - default) ===== */ selector.elementor-sticky--effects .elementor-nav-menu .elementor-item { color: #1e1e1e !important; } /* Dropdown arrows (sticky - default) */ selector.elementor-sticky--effects .elementor-nav-menu .sub-arrow, selector.elementor-sticky--effects .elementor-nav-menu .sub-arrow i, selector.elementor-sticky--effects .elementor-nav-menu .sub-arrow svg { color: #1e1e1e !important; fill: #1e1e1e !important; } /* ===== MENU (sticky - hover + focus) ===== */ selector.elementor-sticky--effects .elementor-nav-menu .elementor-item:hover, selector.elementor-sticky--effects .elementor-nav-menu .elementor-item:focus { color: #93c84e !important; } /* Dropdown arrows (sticky - hover + focus) */ selector.elementor-sticky--effects .elementor-nav-menu li:hover > a .sub-arrow, selector.elementor-sticky--effects .elementor-nav-menu li:focus-within > a .sub-arrow, selector.elementor-sticky--effects .elementor-nav-menu li:hover > a .sub-arrow i, selector.elementor-sticky--effects .elementor-nav-menu li:hover > a .sub-arrow svg { color: #93c84e !important; fill: #93c84e !important; } selector .elementor-nav-menu .elementor-item, selector .elementor-nav-menu .sub-arrow, selector .elementor-nav-menu .sub-arrow svg { transition: color 0.25s ease, fill 0.25s ease; } /* Hamburger on scroll */ selector.elementor-sticky--effects .elementor-menu-toggle, selector.elementor-sticky--effects .elementor-menu-toggle i, selector.elementor-sticky--effects .elementor-menu-toggle svg { color: #1e1e1e !important; fill: #1e1e1e !important; } /* Search input on scroll */ selector.elementor-sticky--effects .elementor-search-form__input, selector.elementor-sticky--effects input[type="search"], selector.elementor-sticky--effects input[type="text"] { background: #ffffff !important; color: #1e1e1e !important; border: 1px solid rgba(30,30,30,0.25) !important; } /* Placeholder on scroll (your request) */ selector.elementor-sticky--effects .elementor-search-form__input::placeholder, selector.elementor-sticky--effects input[type="search"]::placeholder, selector.elementor-sticky--effects input[type="text"]::placeholder { color: #1e1e1e !important; opacity: 1 !important; } /* Language on scroll */ selector.elementor-sticky--effects .header-lang, selector.elementor-sticky--effects .header-lang * { color: #1e1e1e !important; } selector.elementor-sticky--effects .header-lang svg, selector.elementor-sticky--effects .header-lang i { fill: #1e1e1e !important; color: #1e1e1e !important; }

/* ===== MENU colors (ONLY the header menu widget) ===== */

/* Default (top of page) */
selector .header-nav .elementor-nav-menu .elementor-item{
  color: #ffffff !important;
}

selector .header-nav .elementor-nav-menu .sub-arrow,
selector .header-nav .elementor-nav-menu .sub-arrow i,
selector .header-nav .elementor-nav-menu .sub-arrow svg{
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Hover/focus (top of page) */
selector .header-nav .elementor-nav-menu .elementor-item:hover,
selector .header-nav .elementor-nav-menu .elementor-item:focus{
  color: #95c94e !important;
}

selector .header-nav .elementor-nav-menu li:hover > a .sub-arrow,
selector .header-nav .elementor-nav-menu li:focus-within > a .sub-arrow,
selector .header-nav .elementor-nav-menu li:hover > a .sub-arrow i,
selector .header-nav .elementor-nav-menu li:hover > a .sub-arrow svg{
  color: #95c94e !important;
  fill: #95c94e !important;
}

/* Sticky (on scroll) */
selector.elementor-sticky--effects .header-nav .elementor-nav-menu .elementor-item{
  color: #1e1e1e !important;
}

selector.elementor-sticky--effects .header-nav .elementor-nav-menu .sub-arrow,
selector.elementor-sticky--effects .header-nav .elementor-nav-menu .sub-arrow i,
selector.elementor-sticky--effects .header-nav .elementor-nav-menu .sub-arrow svg{
  color: #1e1e1e !important;
  fill: #1e1e1e !important;
}

/* Hover/focus (sticky) */
selector.elementor-sticky--effects .header-nav .elementor-nav-menu .elementor-item:hover,
selector.elementor-sticky--effects .header-nav .elementor-nav-menu .elementor-item:focus{
  color: #95c94e !important;
}

selector.elementor-sticky--effects .header-nav .elementor-nav-menu li:hover > a .sub-arrow,
selector.elementor-sticky--effects .header-nav .elementor-nav-menu li:focus-within > a .sub-arrow,
selector.elementor-sticky--effects .header-nav .elementor-nav-menu li:hover > a .sub-arrow i,
selector.elementor-sticky--effects .header-nav .elementor-nav-menu li:hover > a .sub-arrow svg{
  color: #95c94e !important;
  fill: #95c94e !important;
}

/* =========================================================
   CARD GRID
   Use this class on the Elementor widget/container:
   card-grid
   ========================================================= */

/* Each Gutenberg row */
.card-grid .wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
  margin-bottom: 20px;
}

/* Desktop: 6 cards per row */
.card-grid .wp-block-columns > .wp-block-column {
  flex: 0 0 calc((100% - 100px) / 6);
  max-width: calc((100% - 100px) / 6);
  background: #ffffff;
  border: 1px solid #0f7f9b;
  border-radius: 5px;
  padding: 18px 16px;
  box-sizing: border-box;
  text-align: center;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Image animation */
.card-grid .wp-block-columns > .wp-block-column img {
  transition: transform 0.3s ease;
}

/* Card hover */
.card-grid .wp-block-columns > .wp-block-column:hover {
  border-color: #95c94e;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.card-grid .wp-block-columns > .wp-block-column:hover img {
  transform: translateY(-4px);
}

/* Image spacing */
.card-grid .wp-block-column figure,
.card-grid .wp-block-column .wp-block-image {
  text-align: center;
  margin-bottom: 12px;
}

.card-grid .wp-block-column .wp-block-image img,
.card-grid .wp-block-column img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

/* Remove extra bottom spacing */
.card-grid .wp-block-columns > .wp-block-column > *:last-child {
  margin-bottom: 0;
}

/* h2 */
.card-grid h2 {
  color: #0f7f9b;
}

/* h3 */
.card-grid h3 {
  font-size: 24px;
  font-weight: 500;
}


/* =========================================================
   KIT CODE CARDS
   Add this class to the Elementor Post Content widget:
   kit-code-cards
   ========================================================= */

/* Each Gutenberg row */
.kit-code-cards .wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 16px;
  margin-top: 18px;
  margin-bottom: 0;
}

/* Each card */
.kit-code-cards .wp-block-columns > .wp-block-column {
  flex: 0 0 220px;
  max-width: 220px;
  background: #ffffff;
  border: 1px solid #0f7f9b;
  border-radius: 5px;
  padding: 18px 16px;
  box-sizing: border-box;
  text-align: center;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* Hover */
.kit-code-cards .wp-block-columns > .wp-block-column:hover {
  border-color: #95c94e;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* Remove extra bottom spacing */
.kit-code-cards .wp-block-columns > .wp-block-column > *:last-child {
  margin-bottom: 0;
}

/* Paragraph base */
.kit-code-cards .wp-block-columns > .wp-block-column p {
  margin: 0;
  color: #1f1f1f;
  line-height: 1.4;
}

/* First line */
.kit-code-cards .wp-block-columns > .wp-block-column p:first-child {
  font-size: 14px;
  font-weight: 600;
  color: #1f1f1f;
  margin-bottom: 10px;
}

/* Second line */
.kit-code-cards .wp-block-columns > .wp-block-column p:last-child {
  font-size: 14px;
  font-weight: 400;
  color: #1f1f1f;
}

/* Strong text inside second line */
.kit-code-cards .wp-block-columns > .wp-block-column p:last-child strong {
  font-weight: 700;
}

/* Tablet */
@media (max-width: 1024px) {
  .kit-code-cards .wp-block-columns {
    gap: 14px;
  }

  .kit-code-cards .wp-block-columns > .wp-block-column {
    flex: 0 0 200px;
    max-width: 200px;
    padding: 16px 14px;
  }

  .kit-code-cards .wp-block-columns > .wp-block-column p:first-child {
    font-size: 14px;
  }

  .kit-code-cards .wp-block-columns > .wp-block-column p:last-child {
    font-size: 14px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .kit-code-cards .wp-block-columns {
    gap: 12px;
  }

  .kit-code-cards .wp-block-columns > .wp-block-column {
    flex: 0 0 calc((100% - 12px) / 2);
    max-width: calc((100% - 12px) / 2);
    padding: 14px 12px;
  }

  .kit-code-cards .wp-block-columns > .wp-block-column p:first-child {
    font-size: 14px;
    line-height: 1.35;
  }

  .kit-code-cards .wp-block-columns > .wp-block-column p:last-child {
    font-size: 14px;
    line-height: 1.35;
  }
}

/* =========================================================
   CATALOG EMBED SECTION 
   shortcode:
   [gdt_kit_pdf]
   ========================================================= */

.gdt-kit-pdf-only {
	margin-top: 20px;
	border: 1px solid #0f7f9b;
	border-radius: 12px;
	overflow: hidden;
	background: #ffffff;
	width: 100%;
	max-width: 100%;
	line-height: 0;
	aspect-ratio: 1.414 / 1;
}

.gdt-kit-pdf-only iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: #ffffff;
}

@media (max-width: 1024px) {
	.gdt-kit-pdf-only {
		aspect-ratio: 1.414 / 1;
	}
}

@media (max-width: 767px) {
	.gdt-kit-pdf-only {
		margin-top: 16px;
		border-radius: 10px;
		aspect-ratio: 1.2 / 1;
	}
}