/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Mar 24 2026 | 10:13:15 */
/* ==========================================================================
   CUSTOM THEME STYLES
   ==========================================================================
   Table of Contents:
   
   1.  CSS Custom Properties (Variables)
   2.  Global Reset & Base Styles
   3.  Utility Classes
       3a. Colors
       3b. Typography
       3c. Spacing & Layout
       3d. Visibility & Display
       3e. Filters & Effects
	   3f. Block Quotes + News Template Content
   4.  Buttons
		4a. Cookie Banner Buttons
   5.  Lists (UL Styles)
   6.  Headings & Heading Overrides
   7.  Separators & Dividers
   8.  Split Column Grids
   9.  Flex Wrappers
		9a. Flex Wrapper Responsiveness
   10. Logo & Branding
   11. Navigation & Menu
       11a. Desktop Nav
       11b. Mobile Nav
       11c. Breakpoint Visibility
   12. Header & Sticky Header
   13. Hero Section
   14. Sections & Layout Containers
       14a. Full-Width Background Rows
       14b. Full-Height Carousel Sections
       14c. Overlapping Columns
   15. Block Diagrams
       15a. Standard Block Diagram
       15b. Sector Block Diagram
   16. Accordion (spt-accordion)
   17. Grid Card Designs
       17a. Grid Design 1 (Icon Card with Image)
       17b. Grid Design 2 (Padded Card)
       17c. Grid Design 3 (Overlay Card)
   18. Carousel & Slider
       18a. Testimonials Carousel
       18b. Testimonials Grid (Graduates)
       18c. Logo Carousel
       18d. Carousel Navigation (Arrows & Dots)
   19. Team Members
   20. Services
       20a. Service Template & Stats
       20b. Child Service Row Grid
       20c. Services Grid Video Background
       20d. Specialist Grid
   21. About Us
   22. Contact Form
   23. Forminator Forms
   24. Projects & Case Studies
   25. News & Blog
   26. Clients Page
   27. Vacancies Page
   29. Footer
   30. Animations & Transitions
       30a. Custom Fade & Slide Animations
       30b. Animate Children (Staggered)
       30c. Animate Grandchildren (Staggered)
       30d. Overlay Animations
       30e. Animated Pointer
       30f. Apple-Style Hover Pulse
   31. Videos
   32. Software Category Logos
   33. Miscellaneous & Overrides
		33a. Numbers with coloured background — used as step indicators
		33b. Border radius helpers — top only / bottom only
		33c. Animated text heading — append period and reorder spans via flexbox
		33d. Wave shape — extend beyond viewport to avoid gaps
		33e. Software logos
		33f. Flipboxes
   34. Responsive Breakpoints
       34a. Tablet & Laptop (≤1321px)
       34b. Tablet (≤1024px)
       34c. Tablet & Below (≤900px)
       34d. Mobile (≤768px)
       34e. Small Mobile (≤600px)
   ========================================================================== */


/* ==========================================================================
   1. CSS CUSTOM PROPERTIES (VARIABLES)
   --------------------------------------------------------------------------
   Central design tokens used throughout the theme.
   --color-primary, --color-secondary, etc. are defined by the Impreza theme.
   ========================================================================== */

:root {
    --border-radius-small: 1rem;
    --border-radius-large: 1rem;
    --primary-color: var(--color-primary);
    --secondary-color: var(--color-secondary);
	--tertiary-color: var(--color-tertiary);
    --it-border-width: 2px;
    --restricted-width: 820px;
    --button-margin-top: 1.6rem;
    --tdk-animation-duration: 1.4s;
    --tdk-section-margin-small: 60px;
    --tdk-section-margin-large: 120px;
}


/* ==========================================================================
   2. GLOBAL RESET & BASE STYLES
   --------------------------------------------------------------------------
   Baseline typography spacing and section padding overrides.
   ========================================================================== */

p, ul, ol, dl, address, pre, table, blockquote, fieldset {
    margin: 0 0 0.8em;
}

/* Reduce vertical padding on "small margin" service grids */
#page-content .services-grid-small-margin {
    --gap: var(--tdk-section-margin-small) !important;
}

/* Large section height uses the custom section margin variable */
.l-section.height_large {
    padding-top: var(--tdk-section-margin-large) !important;
    padding-bottom: var(--tdk-section-margin-large) !important;
}
.l-section.height_medium,
.l-section.height_small {
    padding-top: var(--tdk-section-margin-small) !important;
    padding-bottom: var(--tdk-section-margin-small) !important;
}

/* Prevent horizontal overflow on page sections */
main#page-content section {
    overflow-X: clip;
}

/* ==========================================================================
   3. UTILITY CLASSES
   ========================================================================== */

/* --------------------------------------------------------------------------
   3a. Colors — Force specific color values via utility classes
   -------------------------------------------------------------------------- */

.color-primary {
    color: var(--color-primary) !important;
}

.color-secondary {
    color: var(--color-secondary) !important;
}

.color-bg {
    color: var(--color-bg) !important;
}

/* --------------------------------------------------------------------------
   3b. Typography — Font size helpers
   -------------------------------------------------------------------------- */

.text-large {
    font-size: 1.2rem;
    font-weight: 400;
}

.text-small {
    font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   3c. Spacing & Layout — Margin, positioning, and alignment helpers
   -------------------------------------------------------------------------- */

.no-margin-bottom {
    margin-bottom: 0 !important;
}

/* Pull text boxes into adjacent columns for an overlap effect */
.floating-text-box-left {
    margin-right: -2rem !important;
}

.floating-text-box-right {
    margin-left: -2rem !important;
}

/* Center grid items horizontally within their container */
.center-grid-items .w-grid-list {
    justify-content: center;
}

/* --------------------------------------------------------------------------
   3d. Visibility & Display
   -------------------------------------------------------------------------- */

/* Hide the Magnific Popup bottom bar (image title/counter) */
.mfp-bottom-bar {
    display: none;
}

/* --------------------------------------------------------------------------
   3e. Filters & Effects
   -------------------------------------------------------------------------- */

.greyscale {
    filter: grayscale(85%);
}

/* Remove default underline border */
.with-underline {
    border-bottom-width: 0px !important;
    border-bottom-style: none !important;
    border-bottom-color: var(--color-content-secondary) !important;
}

/* Remove default box shadow */
.with-shadow {
    box-shadow: none !important;
}

/* Multiply blend mode for section overlays */
.overlay-multiply .l-section-overlay {
    mix-blend-mode: multiply;
}

/* --------------------------------------------------------------------------
   3f. Block Quotes + News Template Content
   -------------------------------------------------------------------------- */

/* Styling of blockquotes for all pages */
blockquote {
    border: solid 1px var(--color-tertiary);
    border-right: none;
    border-bottom: none;
    padding: 30px;
    margin: 90px 0 60px 0;
}

/* Font Awesome quote icon positioned above the blockquote */
blockquote:before{
    content: "\f10d";
    color: var(--color-tertiary);
    font-family: fontawesome;
    font-weight: 900;
    font-size: 25.6px;
    position: absolute;
    top: -37px;
	opacity: 1;
}

/* Hide quote icon on ported news blockquotes */
blockquote.ported-news:before {
	display: none;
}

/* Remove section padding inside news template content */
#news-template-content section {
	padding: 0 !important;
}

/* Blockquote styling for news section */
blockquote.ported-news {
	position: relative;
	padding: calc(1.5rem + 1vw) !important;
	font-size: 1rem;
	line-height: 1.7;
	margin: var(--tdk-section-margin-small) 0;
}

/* Reset font-weight and font-style inside ported news blockquotes */
blockquote.ported-news strong {
	font-weight:inherit;
}
blockquote.ported-news em {
	font-style: normal;
}

/* Citation styling within ported news blockquotes */
blockquote.ported-news cite {
	margin-top: 1.5rem;
	font-size: 0.9rem;
}

/* Override h4/h5 in news template to match h3 typography */
#news-template-content h4,
#news-template-content h5
{
    font-family: var(--h3-font-family, inherit);
    font-weight: var(--h3-font-weight, inherit);
    font-size: var(--h3-font-size, inherit);
    font-style: var(--h3-font-style, inherit);
    line-height: var(--h3-line-height, 1.4);
    letter-spacing: var(--h3-letter-spacing, inherit);
    text-transform: var(--h3-text-transform, inherit);
    margin-bottom: var(--h3-margin-bottom,1.5rem) !important;
}

/* Add top margin to non-first h4/h5 in news template text columns */
#news-template-content .wpb_text_column:not(:first-child) h3,
#news-template-content .wpb_text_column:not(:first-child) h4,
#news-template-content .wpb_text_column:not(:first-child) h5 {
	margin-top:1.5rem;
	margin-bottom: var(--h3-margin-bottom,1.5rem) !important;
}

#news-template-content .w-btn-wrapper {
	margin-top:var(--button-margin-top);
}

#news-template-content .w-post-elm.stretched img

/* ==========================================================================
   4. BUTTONS
   --------------------------------------------------------------------------
   Custom button styles including invisible overlay buttons, underline
   animated buttons, and color-filled button variants.
   ========================================================================== */

/* Remove default wrapper margin */
.w-btn-wrapper {
    margin: 0;
}

/* Invisible button — stretches over its parent as a clickable overlay */
.invisible-button,
.button-invisible {
    opacity: 0;
    position: absolute !important;
    z-index: 1;
    inset: 0;
}

/* Underline button — text-only with an animated underline on hover */
.button-underline {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    cursor: pointer;
    display: inline-block;
    position: relative;
}

/* Animated underline pseudo-element */
.button-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background-color: #fff;
    transform: translateY(-16px);
    transition: transform 0.3s ease;
}

/* Slides up slightly on hover */
.button-underline:hover::after {
    transform: translateY(-20px);
}

/* Primary background button — inverts colours on hover */
.w-btn.color-primary-bg {
    color: var(--color-bg) !important;
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}
.no-touch .w-btn.color-primary-bg:hover {
    color: var(--color-primary) !important;
    background: var(--color-bg) !important;
    border-color: var(--color-primary) !important;
}

/* Secondary background button — inverts colours on hover */
.w-btn.color-secondary-bg {
    color: var(--color-bg) !important;
    background: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}
.no-touch .w-btn.color-secondary-bg:hover {
    color: var(--color-secondary) !important;
    background: var(--color-bg) !important;
    border-color: var(--color-secondary) !important;
}

/* --------------------------------------------------------------------------
	4a. Cookie Banner Buttons
	------------------------------------------------------------------------- */
	
/* View Preferences / Save Preferences button */
#cmplz-cookiebanner-container button.cmplz-btn.cmplz-view-preferences, #cmplz-cookiebanner-container button.cmplz-btn.cmplz-save-preferences {
    color: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
    background-color: white !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    border-radius: 0px !important;
    transition: all 0.4s ease
}

/* View Preferences / Save Preferences button on hover */
#cmplz-cookiebanner-container button.cmplz-btn.cmplz-view-preferences:hover, #cmplz-cookiebanner-container button.cmplz-btn.cmplz-save-preferences:hover{
    background-color: var(--color-tertiary) !important;
    border: 1px solid var(--color-tertiary) !important;
    color: white !important;
}

/* Accept button */
#cmplz-cookiebanner-container button.cmplz-btn.cmplz-accept{
    color: white !important;
    border: 1px solid var(--color-tertiary) !important;
    background-color: var(--color-tertiary)!important;
    font-size: 15px !important;
    font-weight: 400 !important;
    border-radius: 0px !important;
    transition: all 0.3s ease
}

/* Accept button on hover */
#cmplz-cookiebanner-container button.cmplz-btn.cmplz-accept:hover{
    color: white !important;
    border: 1px solid var(--color-tertiary) !important;
    background-color: var(--color-primary) !important;
}

/* ==========================================================================
   5. LISTS (UL STYLES)
   --------------------------------------------------------------------------
   Default list markers use a dash (–). Optional .ul-check class
   switches to checkmark (✔) markers.
   ========================================================================== */

/* Dash-style list markers for text blocks */
.wpb_text_column ul,
.post_custom_field ul,
.w-html ul,
.post_content ul {
    list-style-type: '-';
    margin-left: 0.35em;
}

.wpb_text_column ul li,
.post_custom_field ul li,
.w-html ul li,
.post_content ul li {
    padding-left: 1.3rem;
}
 

/* ==========================================================================
   6. HEADINGS & HEADING OVERRIDES
   --------------------------------------------------------------------------
   .heading-overline provides a small label style above headings.
   .heading-1 through .heading-6 allow any element to adopt the
   corresponding heading's typography (font, size, weight, spacing).
   ========================================================================== */

/* Remove default top padding on headings */
h1, h2, h3, h4, h5, h6 {
    padding-top: 0;
}

/* Small label style above headings */
.heading-overline {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin-bottom: 0.5rem !important;
}

/* Heading-1 typography applied to any element */
.heading-1,
.wpb_text_column.heading-1 :is(h2, h3, h4, h5, h6),
.w-iconbox.heading-1 .w-iconbox-title {
    font-family: var(--h1-font-family, inherit);
    font-size: var(--h1-font-size, inherit);
    font-weight: var(--h1-font-weight, inherit);
    font-style: var(--h1-font-style, inherit);
    line-height: var(--h1-line-height, 1.4);
    letter-spacing: var(--h1-letter-spacing, inherit);
    text-transform: var(--h1-text-transform, inherit);
    margin-bottom: var(--h1-margin-bottom, 1.5rem);
}

/* Heading-2 typography applied to any element */
.heading-2,
.wpb_text_column.heading-2 :is(h1, h3, h4, h5, h6),
.w-iconbox.heading-2 .w-iconbox-title {
    font-family: var(--h2-font-family, inherit);
    font-size: var(--h2-font-size, inherit);
    font-weight: var(--h2-font-weight, inherit);
    font-style: var(--h2-font-style, inherit);
    line-height: var(--h2-line-height, 1.4);
    letter-spacing: var(--h2-letter-spacing, inherit);
    text-transform: var(--h2-text-transform, inherit);
    margin-bottom: var(--h2-margin-bottom, 1.5rem);
}

/* Heading-3 typography applied to any element */
.heading-3,
.wpb_text_column.heading-3 :is(h1, h2, h4, h5, h6),
.w-iconbox.heading-3 .w-iconbox-title {
    font-family: var(--h3-font-family, inherit);
    font-size: var(--h3-font-size, inherit);
    font-weight: var(--h3-font-weight, inherit);
    font-style: var(--h3-font-style, inherit);
    line-height: var(--h3-line-height, 1.4);
    letter-spacing: var(--h3-letter-spacing, inherit);
    text-transform: var(--h3-text-transform, inherit);
    margin-bottom: var(--h3-margin-bottom, 1.5rem);
}

/* Heading-4 typography applied to any element */
.heading-4,
.wpb_text_column.heading-4 :is(h1, h2, h3, h5, h6),
.w-iconbox.heading-4 .w-iconbox-title {
    font-family: var(--h4-font-family, inherit);
    font-size: var(--h4-font-size, inherit);
    font-weight: var(--h4-font-weight, inherit);
    font-style: var(--h4-font-style, inherit);
    line-height: var(--h4-line-height, 1.4);
    letter-spacing: var(--h4-letter-spacing, inherit);
    text-transform: var(--h4-text-transform, inherit);
    margin-bottom: var(--h4-margin-bottom, 1.5rem);
}

/* Heading-5 typography applied to any element */
.heading-5,
.wpb_text_column.heading-5 :is(h1, h2, h3, h4, h6),
.w-iconbox.heading-5 .w-iconbox-title {
    font-family: var(--h5-font-family, inherit);
    font-size: var(--h5-font-size, inherit);
    font-weight: var(--h5-font-weight, inherit);
    font-style: var(--h5-font-style, inherit);
    line-height: var(--h5-line-height, 1.4);
    letter-spacing: var(--h5-letter-spacing, inherit);
    text-transform: var(--h5-text-transform, inherit);
    margin-bottom: var(--h5-margin-bottom, 1.5rem);
}

/* Heading-6 typography applied to any element */
.heading-6,
.wpb_text_column.heading-6 :is(h1, h2, h3, h4, h5),
.w-iconbox.heading-6 .w-iconbox-title {
    font-family: var(--h6-font-family, inherit);
    font-size: var(--h6-font-size, inherit);
    font-weight: var(--h6-font-weight, inherit);
    font-style: var(--h6-font-style, inherit);
    line-height: var(--h6-line-height, 1.4);
    letter-spacing: var(--h6-letter-spacing, inherit);
    text-transform: var(--h6-text-transform, inherit);
    margin-bottom: var(--h6-margin-bottom, 1.5rem);
}

/* Allow heading wrappers to stack vertically on mobile */
.w-hwrapper.heading-to-column-mobile {
    display: block;
}

/* Subheading colour override — light blue */
.lightblue-sub-head h3,
.lightblue-sub-head h3 {
    color: var(--color-light-blue);
}


/* ==========================================================================
   7. SEPARATORS & DIVIDERS
   --------------------------------------------------------------------------
   Horizontal rules between sections, heading underlines, and column
   vertical separators.
   ========================================================================== */

/* Auto-add top border between consecutive non-alternate sections */
body:not(.single-vacancy) main section.l-section:not(.color_alternate) + section.l-section:not(.color_alternate):not(.no-border-top):not(.no-top-line):not(.no-line) {
    border-top: 1px solid var(--color-primary);
}

/* Contained line — centred border that respects max content width */
.contained-line:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: max(0px, calc(50% - var(--site-content-width, 1200px) / 2));
    max-width: var(--site-content-width, 1200px);
    width: 100%;
    border-top: 1px solid var(--color-primary);
}

/* Short accent separator (40px wide) */
.w-separator.width_30 {
    width: 40px;
}

/* Left-aligned separator */
.w-separator.with_line.align_left {
    margin-left: 0 !important;
}

/* Small separator sizing */
.w-separator.size_small.with_line {
    height: 3rem;
    margin-bottom: 0.3rem;
}

/* Heading underline accent — tertiary colour bar below headings */
#page-content h2.with-line {
    margin-bottom: 0 !important;
}

h1.with-line:after,
h2.with-line:after,
h3.with-line:after,
body.vacancy-template-default h2:after {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--color-tertiary);
    margin: calc(1.5rem - 2px) 0 calc(1.8rem - 2px) 0;
}

/* Column vertical separator — appears between two side-by-side columns */
.column-separator .wpb_column.vc_column_container:first-child:after {
    content: '';
    display: block;
    height: 100%;
    width: 1px;
    position: absolute;
    top: 0;
    background: var(--color-tertiary);
    right: calc(var(--columns-gap, 0) / -2);
    transition: opacity var(--tdk-animation-duration) cubic-bezier(.215, .61, .355, 1) 0, height var(--tdk-animation-duration) cubic-bezier(.215, .61, .355, 1);
}

/* Animated column separator — starts hidden, grows to full height */
.column-separator.custom-animation .wpb_column.vc_column_container:first-child:after {
    height: 0;
    opacity: 0;
}
.column-separator.custom-animation.start .wpb_column.vc_column_container:first-child:after {
    height: 100%;
    opacity: 1;
}

/* Sync image animations with the column separator reveal */
.column-separator.custom-animation.start .w-image.us_animate_this {
    opacity: 1 !important;
    transition: all var(--tdk-animation-duration) cubic-bezier(.215, .61, .355, 1) 0.4s !important;
    animation: none !important;
}


/* ==========================================================================
   8. SPLIT COLUMN GRIDS
   --------------------------------------------------------------------------
   Responsive grid layouts that auto-wrap based on minimum column widths.
   ========================================================================== */

/* Two equal columns, min 280px each */
.split-half-column {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-gap: 1rem !important;
}

.split-half-column.w-vwrapper > *:not(:last-child) {
    margin-bottom: 0px !important;
}

/* Three equal columns, min 230px each */
.split-three-column {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    grid-gap: 1rem !important;
}

/* Two wide columns, min 500px each */
.split-full-column-by-two {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, auto));
    grid-gap: 2rem !important;
}

/* Four columns, min 280px each */
.split-full-column-by-four {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, auto));
    grid-gap: 2rem !important;
}


/* ==========================================================================
   9. FLEX WRAPPERS
   --------------------------------------------------------------------------
   Gap handling for Impreza's horizontal/vertical flex wrappers, plus
   custom flex-basis ratios for specific layouts.
   ========================================================================== */

.w-hwrapper {
    row-gap: var(--hwrapper-gap, 0);
}

.w-vwrapper {
    column-gap: var(--vwrapper-gap, 0);
}

/* Services + Team layout: 65/35 split */
.w-hwrapper.flex-wrapper-services-team > div:nth-child(1) {
    flex-basis: 65%;
}
.w-hwrapper.flex-wrapper-services-team > div:nth-child(2) {
    flex-basis: 35%;
}

.w-hwrapper.flex-wrapper-services-team {
    align-items: stretch;
}

/* Full-height wrapper utility — children fill available height */
.full-height .wpb_wrapper {
    height: 100%;
}

.full-height .wpb_wrapper > .w-vwrapper:only-child,
.full-height .wpb_wrapper > .w-hwrapper:only-child {
    height: 100%;
}

/* --------------------------------------------------------------------------
   9a. Flex Wrapper Responsiveness
   -------------------------------------------------------------------------- */

/* Services + Team layout: 50/50 split on tablet */
@media (min-width: 600px) and (max-width: 1101px){
	.w-hwrapper.flex-wrapper-services-team > div:nth-child(1) {
		flex-basis: 50%;
	}
	.w-hwrapper.flex-wrapper-services-team > div:nth-child(2) {
		flex-basis: 50%;
	}
}

/* Services + Team layout: stack in column on mobile */
@media only screen and (max-width: 768px) {
	.flex-wrapper-services-team{
		display: flex;
		flex-direction: column !important;
	}
}



/* ==========================================================================
   10. LOGO & BRANDING
   --------------------------------------------------------------------------
   Main site logo sizing and colour transitions for transparent header.
   ========================================================================== */

/* Main logo sizing */
.main-logo {
    height: min(70%, 70px);
}

.main-logo #tadek-logo {
    height: 100%;
    position: relative;
    z-index: 1;
}

/* Logo path colours — white when header is transparent */
header.bg_transparent:not(.sticky):not(:hover) #tadek-logo :is(.tdk-1, .tdk-2, .tdk-3, .tdk-4, .tdk-5) {
    fill: white;
}

/* Smooth colour transition on logo paths */
#tadek-logo :is(.tdk-1, .tdk-2, .tdk-3, .tdk-4, .tdk-5) {
    transition: all 0.6s;
}


/* ==========================================================================
   11. NAVIGATION & MENU
   ========================================================================== */

/* --------------------------------------------------------------------------
   11a. Desktop Nav
   -------------------------------------------------------------------------- */

nav.w-nav.bg_transparent:not(.sticky).type_desktop {
    font-weight: 400 !important;
}

/* Transparent header — reveal white background on hover */
.no-touch .l-header.bg_transparent:not(.sticky):hover .l-subheader.at_middle {
    transition: all 0.3s;
    background: white;
    color: var(--color-primary);
}

.no-touch .l-header.bg_transparent:not(.sticky):hover .ush_menu_1.type_desktop .w-nav-item.level_1:hover > a:not(.w-btn) {
    color: inherit;
}

/* Active menu item — thicker underline accent */
.current-menu-item.level_1 .w-nav-title:after {
    height: 4px;
    opacity: 100% !important;
    bottom: -5px;
}

/* Parent of active submenu item also gets the accent */
.w-nav-item.level_1:has(.current-menu-item) .w-nav-title:after {
    height: 4px;
    opacity: 100% !important;
    bottom: -5px;
}

/* Hover underline position */
.no-touch .w-nav.type_desktop .hover_underline .menu-item.level_1:hover .w-nav-title:after {
    bottom: -5px !important;
}

/* TDK-specific menu hover accent */
.header-menu-tdk span.w-nav-title:after {
    background: var(--color-tertiary) !important;
    height: 4px !important;
}

/* --------------------------------------------------------------------------
   11b. Mobile Nav
   -------------------------------------------------------------------------- */

/* Opened mobile menu item colour */
nav.type_mobile .menu-item.opened {
    color: var(--color-tertiary) !important;
}

/* --------------------------------------------------------------------------
   11c. Breakpoint Visibility
   --------------------------------------------------------------------------
   Opt-in visibility classes for menu items at specific breakpoints.
   Items are hidden by default; shown only at matching screen widths.
   type_mobile exists at ≤900px, type_desktop exists at ≥901px.
   -------------------------------------------------------------------------- */

/* Hide all opt-in items by default (both nav instances) */
nav.manage_breakpoints li.show-desktop,
nav.manage_breakpoints li.show-laptop,
nav.manage_breakpoints li.show-tablet,
nav.manage_breakpoints li.show-mobile {
    display: none !important;
}

/* Desktop (≥1321px) */
@media (min-width: 1321px) {
    nav.manage_breakpoints.type_desktop li.show-desktop {
        display: list-item !important;
    }
}

/* Laptop (901px – 1320px) */
@media (min-width: 901px) and (max-width: 1320px) {
    nav.manage_breakpoints.type_desktop li.show-laptop {
        display: list-item !important;
    }
}

/* Mobile nav — always show .show-mobile items when in mobile mode */
nav.manage_breakpoints.type_mobile li.show-mobile {
    display: list-item !important;
}


/* ==========================================================================
   12. HEADER & STICKY HEADER
   --------------------------------------------------------------------------
   Transition durations and background padding fixes for fixed headers.
   ========================================================================== */

header#page-header,
.l-header.pos_fixed:not(.notransition) .l-subheader {
    transition-duration: 0.6s;
}

/* Fix background image offset when sticky header is not transparent */
.header_hor .l-header.pos_fixed:not(.bg_transparent) ~ .l-main > .l-section:first-of-type > .l-section-img {
    margin-top: var(--header-sticky-height);
}


/* ==========================================================================
   13. HERO SECTION
   --------------------------------------------------------------------------
   Responsive stacking and image sizing for the hero banner area.
   ========================================================================== */

@media (max-width: 1049px) {
    /* Stack hero columns vertically on smaller screens */
    .manual-stack .g-cols {
        display: flex !important;
        flex-direction: column !important;
    }

    .manual-stack .g-cols > div {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
    }

    /* Constrain hero image dimensions */
    .hero-image {
        max-height: 500px;
        width: auto;
        height: auto;
        object-fit: contain;
    }
}


/* ==========================================================================
   14. SECTIONS & LAYOUT CONTAINERS
   ========================================================================== */

/* --------------------------------------------------------------------------
   14a. Full-Width Background Rows
   --------------------------------------------------------------------------
   Stretched columns that bleed to viewport edges while keeping inner
   content aligned to --site-content-width.
   -------------------------------------------------------------------------- */

@media only screen and (min-width: 600px) {
    .full-width-background .wpb_column.stretched:first-child {
        padding-left: calc((100vw - var(--site-content-width)) / 2) !important;
    }

    .full-width-background:not(.full-width-last-column) .wpb_column.stretched:last-child {
        padding-right: calc((100vw - var(--site-content-width)) / 2) !important;
    }

    .full-width-background .wpb_column:first-child {
        padding-right: 8vw !important;
    }

    .full-width-background .wpb_column:last-child {
        padding-left: 8vw !important;
    }

    .full-width-background .wpb_column {
        padding-top: 6rem !important;
        padding-bottom: 6rem !important;
        margin-top: -0.5px;
    }
}

/* --------------------------------------------------------------------------
   14b. Full-Height Carousel Sections
   --------------------------------------------------------------------------
   Hero row that fills viewport height minus header and trusted carousel.
   -------------------------------------------------------------------------- */
:root {
	--tdk-trusted-row-height: calc(60px + 2 * var(--tdk-section-margin-small));
}
section.l-section.tdk-full-height-with-carousel + section.tdk-trusted-carousel {
    height: var(--tdk-trusted-row-height);
}

section.tdk-full-height-with-carousel {
    min-height: calc(100vh - var(--header-height) - var(--tdk-trusted-row-height));
    display: flex;
}

/* Adjust for WordPress admin bar */
body.admin-bar section.l-section.tdk-full-height-with-carousel {
    min-height: calc(100vh - var(--header-height) - 32px - var(--tdk-trusted-row-height));
}

.tdk-full-height-with-carousel .has_bg_color.stretched,
.tdk-full-height-with-carousel .g-cols.vc_row {
    height: 100%;
}

/* --------------------------------------------------------------------------
   14c. Overlapping Columns
   --------------------------------------------------------------------------
   Two-column layout where the text column overlaps the image column
   using a negative left margin.
   -------------------------------------------------------------------------- */

.overlap-row {
    display: flex;
    align-items: flex-start;
    position: relative;
}

.image-column {
    position: relative;
    z-index: 1;
}

.image-column img {
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
}

.text-column {
    flex: 1;
    position: relative;
    margin-left: -400px;
    z-index: 10;
    min-height: auto;
}

/* Remove overlap on tablet and below */
@media (max-width: 900px) {
    .text-column {
        margin-left: 0;
    }
}


/* ==========================================================================
   15. BLOCK DIAGRAMS
   --------------------------------------------------------------------------
   Horizontal flowchart-style diagrams with bordered boxes and
   chevron arrow connectors.
   ========================================================================== */

/* --------------------------------------------------------------------------
   15a. Standard Block Diagram
   -------------------------------------------------------------------------- */

.block-diagram > .vc_column-inner {
    display: flex;
    gap: 3rem;
    justify-content: space-between;
}

/* Individual block box with left-side clip-path notch for arrow entry */
.block-diagram > .vc_column-inner .w-text {
    --featured-color: var(--color-light-blue);
    font-size: 1.2em;
    text-align: center;
    border: 3px solid var(--featured-color);
    padding: calc(1rem + 2vw);
    flex-grow: 0.5;
    position: relative;
    clip-path: polygon(5px 40%, 0 40%, 0 0, 200% 0, 200% 100%, 0 100%, 0 60%, 5px 60%);
}

/* First block has no arrow notch on the left */
.block-diagram > .vc_column-inner > .w-text:first-child {
    clip-path: none;
}

/* Highlighted / featured block uses tertiary colour */
.block-diagram > .vc_column-inner .w-text.highlighted {
    --featured-color: var(--color-tertiary);
}

/* Dashed outline container for grouped blocks */
.block-diagram > .vc_column-inner .dashed-box {
    flex-grow: 1;
    outline: 3px dashed #0093c9cc;
    outline-offset: calc(1.5rem - 1.5px);
    gap: 3rem;
}

/* Right-pointing chevron arrow between blocks */
.block-diagram i.fas.fa-chevron-right {
    position: absolute;
	top: 50%;
    transform: translateY(-50%);
    right: -3.7rem;
    color: var(--featured-color);
}

/* Horizontal line extending from the chevron arrow */
.block-diagram i.fas.fa-chevron-right:after {
    content: '';
    display: block;
    width: 3.4rem;
    position: absolute;
    right: 4px;
    top: calc(0.5em + 2.3px);
    height: 3px;
    background: currentColor;
}

/* Right margin offset on the last block with icon */
.block-diagram > .vc_column-inner > .icon_atright:last-child {
    margin-right: 3.5rem;
}

/* --------------------------------------------------------------------------
   15b. Sector Block Diagram
   --------------------------------------------------------------------------
   Variation with vertically-centred arrows and support for
   bidirectional connections.
   -------------------------------------------------------------------------- */

.block-diagram-sector {
    --arrow-position: calc(1.5rem + 2% + var(--h3-font-size, inherit) * 1.7);
    --arrow-gap-top: calc(1.4rem + 2% + var(--h3-font-size, inherit) * 1.7);
    --arrow-gap-bottom: calc(3.1rem + 2% + var(--h3-font-size, inherit) * 1.7);
}

/* Fixed-height heading area for consistent block alignment */
.block-diagram-sector h3 {
    height: 2.4em;
    display: flex;
    align-items: center;
}

.block-diagram-sector h3:after {
    bottom: 0 !important;
}

.block-diagram-sector .wpb_wrapper {
    display: flex;
    gap: 3rem;
    justify-content: space-between;
}

/* Sector block with clip-path notch for arrow entry */
.block-diagram-sector .tdk-single-block {
    --featured-color: var(--color-light-blue);
    font-size: 1.1em;
    border: 3px solid var(--featured-color);
    padding: calc(1.5rem + 2%) calc(1rem + 1%);
    flex: 1;
    position: relative;
    clip-path: polygon(5px var(--arrow-gap-top), 0 var(--arrow-gap-top), 0 0, 200% 0, 200% 100%, 0 100%, 0 var(--arrow-gap-bottom), 5px var(--arrow-gap-bottom));
}

/* First block — no left arrow notch */
.block-diagram-sector .tdk-single-block:first-child {
    clip-path: none;
}

/* Featured highlight uses tertiary colour */
.block-diagram-sector .tdk-single-block.featured-Yes {
    --featured-color: var(--color-tertiary);
}

/* Hide all arrow icons by default */
.block-diagram-sector i.fas.fa-chevron-left,
.block-diagram-sector i.fas.fa-chevron-right {
    display: none;
    box-shadow: 0 0 0 0.32rem var(--color-alt-content-bg-grad);
    background: var(--color-alt-content-bg-grad);
}

/* Show right arrow for single and bidirectional connections */
.block-diagram-sector .tdk-single-block.arrow-Single i.fas.fa-chevron-right,
.block-diagram-sector .tdk-single-block.arrow-Bidirectional i.fas.fa-chevron-right {
    display: block;
    position: absolute;
    right: calc(-3.5rem);
    top: var(--arrow-position);
    color: var(--featured-color);
}

/* Show left arrow for bidirectional connections */
.block-diagram-sector .tdk-single-block.arrow-Bidirectional i.fas.fa-chevron-left {
    display: block;
    position: absolute;
    right: -0.55em;
    top: var(--arrow-position);
    color: var(--featured-color);
}

/* Horizontal line extending from the right chevron */
.block-diagram-sector .tdk-single-block i.fas.fa-chevron-right::after {
    content: '';
    display: block;
    width: 3rem;
    position: absolute;
    right: 5px;
    top: calc(0.5em - 1.5px);
    height: 3px;
    background: currentColor;
}

/* Right margin on last single-arrow block */
.tdk-single-block.arrow-Single:last-child {
    margin-right: 3.2rem;
}


/* ==========================================================================
   16. ACCORDION (spt-accordion)
   --------------------------------------------------------------------------
   Styled accordion panels with rounded corners, background colours,
   and hover/active state transitions.
   ========================================================================== */

/* Default accordion section background */
.spt-accordion.w-tabs.accordion > div > .w-tabs-section {
    background: var(--color-lightgray);
    border-radius: var(--border-radius-small);
}

/* Spacing between accordion sections */
.w-tabs.accordion > div > .w-tabs-section {
    margin-bottom: 1rem !important;
    border: none;
}

/* Border radius for sections and headers */
.spt-accordion .w-tabs-section,
.spt-accordion .w-tabs-section-header,
.spt-accordion.w-tabs-section,
.spt-accordion.w-tabs-section-header {
    border-radius: var(--border-radius-small);
    background: var(--color-lightgray);
}

/* Hover and active states — secondary colour background */
.spt-accordion .w-tabs-section-header:hover,
.spt-accordion .w-tabs-section-header:active,
.no-touch .spt-accordion .w-tabs-section-header:hover,
.no-touch .spt-accordion .w-tabs-section-header:focus {
    background: var(--color-secondary);
    color: var(--color-bg);
    border-radius: var(--border-radius-small);
}

.spt-accordion .w-tabs-section:hover,
.spt-accordion .w-tabs-section:active {
    border-radius: var(--border-radius-small);
}

/* Active (open) section header — secondary background, unless text colour is set */
.spt-accordion .w-tabs-section.active:not(.has_text_color) > .w-tabs-section-header {
    background: var(--color-secondary);
    color: var(--color-bg);
    border-radius: var(--border-radius-small);
}


/* ==========================================================================
   17. GRID CARD DESIGNS
   ========================================================================== */

/* --------------------------------------------------------------------------
   17a. Grid Design 1 — Icon Card with Image Header
   --------------------------------------------------------------------------
   Card with a top image, overlapping circular icon, and text below.
   -------------------------------------------------------------------------- */

.grid-design1 {
    border-radius: var(--border-radius-small);
    height: 430px !important;
    background: var(--color-content-bg) !important;
}

/* Circular icon pulled up over the image edge */
.grid-design1 .w-iconbox.style_circle .w-iconbox-icon,
.grid-design1 .w-iconbox.style_outlined .w-iconbox-icon {
    position: relative;
    top: -2.5rem;
    border: 2px solid #ffffff;
}

.grid-design1 .w-iconbox .w-iconbox-title {
    margin-top: -1.5rem;
    padding-bottom: 2rem;
}

.grid-design1-title {
    position: relative;
    width: fit-content;
}

/* Fixed-height image area with rounded top corners */
.grid-design1-image {
    height: 250px !important;
    border-top-left-radius: var(--border-radius-small);
    border-top-right-radius: var(--border-radius-small);
}

.grid-design1 .w-iconbox-text {
    margin-top: -1.5rem !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
}

/* --------------------------------------------------------------------------
   17b. Grid Design 2 — Padded Card (no image)
   --------------------------------------------------------------------------
   Simple padded card with icon, category label, title, and content.
   -------------------------------------------------------------------------- */

.grid-design2 {
    border-radius: var(--border-radius-small) !important;
    padding: 1.5rem !important;
    background: var(--color-content-bg) !important;
    height: 430px !important;
}

.grid-design2-icon {
    margin-bottom: 1rem !important;
}

.grid-design2-category {
    color: var(--color-content-secondary) !important;
    font-size: 0.9rem !important;
    font-weight: 500;
    margin-bottom: 0.3rem !important;
}

.grid-design2-title {
    color: var(--color-content-text) !important;
    font-size: 1.4rem !important;
    font-weight: 700;
    margin-bottom: 0.5rem !important;
}

.grid-design2-content {
    color: var(--color-content-text) !important;
    margin-bottom: 1.5rem !important;
}

/* --------------------------------------------------------------------------
   17c. Grid Design 3 — Overlay Card
   --------------------------------------------------------------------------
   Card with text on a coloured background (text uses --color-content-bg).
   -------------------------------------------------------------------------- */

.grid-design3 {
    border-radius: var(--border-radius-small) !important;
    background: var(--color-content-bg) !important;
    height: 480px !important;
}

.grid-design3-icon {
    margin-bottom: 1rem !important;
}

.grid-design3-title {
    color: var(--color-content-bg) !important;
    font-size: 1.4rem !important;
    font-weight: 700;
    margin-bottom: 0.5rem !important;
}

.grid-design3-content {
    color: var(--color-content-bg) !important;
    margin-bottom: 1.5rem !important;
}


/* ==========================================================================
   18. CAROUSEL & SLIDER
   ========================================================================== */

/* --------------------------------------------------------------------------
   18a. Testimonials Carousel
   -------------------------------------------------------------------------- */

.w-grid.type_carousel .w-grid-list.with_dots {
    margin-bottom: 2.5rem !important;
}

/* Testimonials grid navigation arrows — absolute positioned */
.it-testimonials-grid .owl-nav {
    position: absolute;
    top: 50%;
    width: calc(100% - 19rem - 9vw) !important;
    z-index: 1;
}

.it-testimonials-grid button.owl-prev {
    left: -4vw !important;
}

/* Testimonials dots — fit to content, offset by grid gap */
.it-testimonials-grid .owl-dots {
    width: fit-content !important;
    margin-left: var(--gap);
}

/* --------------------------------------------------------------------------
   18b. Testimonials Grid (Graduates)
   --------------------------------------------------------------------------
   Multi-card grid where the 2nd and 3rd cards have distinct backgrounds.
   -------------------------------------------------------------------------- */

.testimonials-grid.graduates article .w-grid-item-h {
    padding: calc(1.5rem + 3vmin) 16%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 2nd card — light blue background */
.testimonials-grid.graduates article:nth-child(2) .w-grid-item-h {
    background: var(--color-light-blue);
}

/* 3rd card — primary colour background */
.testimonials-grid.graduates article:nth-child(3) .w-grid-item-h {
    background: var(--primary-color);
}

/* CTA button pinned to the bottom of each card */
.testimonials-grid.graduates article .w-grid-item-h a.w-btn {
    margin-top: auto;
    max-width: fit-content;
}

.testimonials-grid.graduates .w-vwrapper.usg_vwrapper_1 {
    flex: 1;
    justify-content: space-between;
}

/* --------------------------------------------------------------------------
   18c. Logo Carousel
   -------------------------------------------------------------------------- */

.logo-carousel .w-image img {
    object-fit: contain;
}

.logo-carousel article.client-logo img {
    margin: 0 auto;
}

.logo-carousel article.client-logo .w-image-h {
    display: flex;
}

/* --------------------------------------------------------------------------
   18d. Carousel Navigation — Arrows & Dots
   -------------------------------------------------------------------------- */

/* Arrow button borders */
/* .owl-nav button {
    border-width: var(--btn-border-width);
    border-style: solid;
} */

/* Arrow icons — Font Awesome overrides */
.owl-next:after {
    content: '\f061';
    font-weight: 600;
}

.owl-prev:after {
    content: '\f060';
    font-weight: 600;
}

/* Arrow sizing */
.navstyle_4 > .owl-nav button {
    font-size: 0.9rem !important;
}

/* Bottom margin for carousel with outside arrows */
.w-grid-list.owl-carousel.navstyle_4.arrows-ver-pos_bottom_outside.arrows-hor-pos_center {
    margin-bottom: 4rem;
}

/* Remove default owl nav margins */
.owl-carousel>.owl-nav {
    margin-top: 0;
	margin-bottom: 0;
}

/* Position outside arrows below carousel */
.owl-carousel.arrows-ver-pos_bottom_outside > .owl-nav button {
    transform: translateY(4rem);
}

/* Circular nav buttons */
.owl-carousel.navstyle_circle .owl-nav button {
    border: 2px solid;
    height: 3rem;
    width: 3rem;
}

/* Circular nav buttons hover state */
.no-touch .owl-carousel.navpos_inside.navstyle_circle > .owl-nav button:hover {
    background: white;
    color: var(--color-alt-content-secondary);
    border-color: white;
}

/* Dash-style dots — full-width, 1px line */
.dotstyle_dash .owl-dot span {
    width: 100%;
    opacity: 1;
    height: 1px;
}

/* Active dash dot — thicker, tertiary colour */
.dotstyle_dash .owl-dot.active span {
    background: var(--color-tertiary);
    height: 3px;
}

/* Dots layout — flex to fill available width */
.owl-dots {
    display: flex;
}

button.owl-dot,
.owl-carousel .owl-dot {
    flex: 1;
    transition: all 0.4s;
}

/* Circle-style dots */
.dotstyle_circle .owl-dot span {
    color: black;
    opacity: 1;
    width: 10px;
    height: 10px;
}

/* Active circle dot — filled with current colour and outer ring */
.dotstyle_circle .owl-dot.active span {
    color: inherit;
    background: currentColor !important;
    box-shadow: 0 0 0 2px currentColor;
}

/* Gallery nav arrow positioning */
.gallery-nav .owl-carousel .owl-nav button {
    position: inherit;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--arrows-size, 1.8rem) !important;
    margin-left: 18px;
    margin-top: 35px;
    margin-right: var(--arrows-offset, 0);
    background: none;
    transition-property: background, box-shadow, border, color, opacity, transform;
    transition-duration: .3s;
}


/* ==========================================================================
   19. TEAM MEMBERS
   ========================================================================== */

.w-person-role {
    font-size: 1rem !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    color: var(--color-content-primary) !important;
}

.w-person {
    max-width: auto !important;
}

/* Team member detail page — section headings within content */
.team-member-content div:not(:first-child) h5 {
    margin-top: 1rem;
    margin-bottom: 0.8rem;
    color: var(--color-header-middle-text-hover);
}


/* ==========================================================================
   20. SERVICES
   ========================================================================== */

/* --------------------------------------------------------------------------
   20a. Service Template & Stats
   -------------------------------------------------------------------------- */

/* Service image minimum height */
.services-image img {
    min-height: 480px;
    object-fit: cover;
}

/* Stat counters — larger, bolder numbers */
.w-counter:not(.has_font_size) .w-counter-value {
    font-size: 2.5rem;
    font-weight: 600;
}

/* Equal-width stat items */
.service-stats-container > * {
    flex: 1;
}

/* Highlight <strong> text in custom fields with tertiary colour */
.w-post-elm.post_custom_field strong,
.strong-orange strong {
    color: var(--color-tertiary);
    font-weight: inherit;
}

/* Anchor links fill their container width, left-aligned */
.child-service-anchor-links a.w-btn.usg_btn_1 {
    width: 100%;
    text-align: left;
}

.child-service-anchor-links a.w-btn.us-btn-style_1.usg_btn_1 {
    height: 100%;
}

.child-service-anchor-links span.w-btn-label {
    height: 100%;
}

.child-service-anchor-links .w-html.usg_html_1 {
    height: 100%;
}

/* Project grid items — align content to the bottom */
.project-service-grid .w-grid-item-h {
    align-items: flex-end;
    display: flex;
}

/* --------------------------------------------------------------------------
   20b. Child Service Row Grid
   --------------------------------------------------------------------------
   Horizontal rule between grid items using a pseudo-element.
   -------------------------------------------------------------------------- */

/* Gap override for child service row separator */
.child-service-row-grid .w-hwrapper.usg_hwrapper_1.column-separator {
    --gap: 15vw !important;
    column-gap: var(--gap);
}

.child-service-row-grid .usg_vwrapper_1:after {
    right: calc(var(--gap, 0) / -2);
}

.child-service-row-grid .w-hwrapper.usg_hwrapper_1.column-separator > * {
    flex: 1;
}

/* Full-width horizontal line between grid articles */
.child-service-row-grid article.w-grid-item:not(:last-child)::after {
    content: '';
    width: 110vw;
    height: 1px;
    position: absolute;
    bottom: calc(var(--gap, 0px) * -1);
    left: min(-5vw, calc(var(--site-content-width, 1200px) / 2 - 55vw));
    background: currentColor;
}

.child-service-row-grid article.w-grid-item {
    position: relative;
}

/* Vertical separator line on child service rows */
.child-service-row-grid .usg_vwrapper_1:before {
    content: '';
    display: block;
    height: 100%;
    width: 1px;
    position: absolute;
    top: 0;
    background: var(--color-tertiary);
    right: calc(var(--gap, 3rem) / -2);
    transition: all var(--tdk-animation-duration) ease;
}

/* Client variant — separator on the left instead of right */
.child-service-row-grid.clients .usg_vwrapper_1:before {
    left: calc(var(--gap, 3rem) / -2);
    right: unset;
}

/* --------------------------------------------------------------------------
   20c. Services Grid — Video Background
   --------------------------------------------------------------------------
   Grid of service links displayed as aspect-ratio tiles over video.
   -------------------------------------------------------------------------- */

div#services-grid-video-bg .w-grid-list {
    gap: 0px;
}

div#services-grid-video-bg .w-grid-list a.services-grid-button {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 5 / 4;
    flex-direction: column;
}

/* --------------------------------------------------------------------------
   20d. Specialist Grid
   -------------------------------------------------------------------------- */

.mini-specialist-grid .w-grid-list {
    height: 100%;
}

.mini-specialist-grid .w-hwrapper.usg_hwrapper_2 {
    height: 100%;
}


/* ==========================================================================
   21. ABOUT US
   --------------------------------------------------------------------------
   Full-height images and flipbox card styles for the about page.
   ========================================================================== */

/* Full-height about us image */
.about-us-image img {
    min-height: 800px;
    object-fit: cover;
}

/* Tablet — taller minimum height to match content */
@media screen and (min-width: 901px) and (max-width: 1320px) {
    .about-us-image img {
        min-height: 1020px;
        object-fit: cover;
    }
}

/* Mobile — constrained height */
@media (max-width: 900px) {
    .about-us-image img {
        min-height: auto;
        height: 500px;
        width: 100% !important;
        object-fit: cover !important;
    }
}

/* Values flipbox — front face layout */
.tdk-about-flipbox-values .w-flipbox-front {
    padding: 34px;
    text-align: left;
}

/* Values flipbox — heading with light-blue bottom border accent */
.tdk-about-flipbox-values .w-flipbox-front h3 {
    padding: 0 0 .8rem 0;
    margin: 0 0 .8rem 0;
    border-bottom: 1px solid var(--color-light-blue) !important;
}


/* ==========================================================================
   22. CONTACT FORM
   --------------------------------------------------------------------------
   Rounded bottom corners on the contact section, and column-reverse
   helpers for responsive reordering.
   ========================================================================== */

.contact-form .l-section-h.i-cf {
    background: white !important;
    border-bottom-right-radius: var(--border-radius-small);
    border-bottom-left-radius: var(--border-radius-small);
}

/* Reverse column order on laptop-sized screens */
@media (min-width: 601px) and (max-width: 1320px) {
    .reverse-on-laptop .g-cols {
        display: flex !important;
        flex-direction: column-reverse !important;
    }
}

/* Reverse column order on tablet screens */
@media (max-width: 900px) {
    .reverse-on-tablet .g-cols {
        display: flex !important;
        flex-direction: column-reverse !important;
    }
}


/* ==========================================================================
   23. FORMINATOR FORMS
   --------------------------------------------------------------------------
   Layout and styling for the Forminator plugin contact form
   (form ID #forminator-module-981). Desktop uses grid layouts for
   side-by-side label/input; mobile stacks naturally.
   ========================================================================== */

/* --- Desktop-only grid layouts (≥900px) --- */
@media (min-width: 900px) {
    /* Text, email, phone: label + input in a 1:6 grid */
    #forminator-module-981 .forminator-field-text .forminator-field,
    #forminator-module-981 .forminator-field-email .forminator-field,
    #forminator-module-981 .forminator-field-phone .forminator-field {
        display: grid;
        grid-template-columns: 1fr 6fr;
    }

    /* Checkbox group: 3-column grid (label | checkbox | checkbox) × 4 rows */
    #forminator-module-981 .forminator-field-checkbox [role="group"] {
        display: grid;
        grid-template-columns: auto 1fr 1fr;
        grid-template-rows: repeat(4, auto);
        gap: 0 2.5rem;
    }

    /* Pin the "Interested in" label to the left column, spanning all rows */
    #forminator-module-981 .forminator-field-checkbox [role="group"] > .forminator-label {
        grid-column: 1;
        grid-row: 1 / -1;
    }

    /* Textarea: bottom-border-only style */
    #forminator-module-981 [name="textarea-1"] {
        padding: 0 1rem 1rem 0 !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
    }

    /* Preserve bottom-border-only on hover */
    #forminator-module-981 [name="textarea-1"]:hover {
        padding: 0 1rem 1rem 0 !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
    }
}

/* --- Always active (all screen sizes) --- */

/* Textarea placeholder: bold, matches text colour, fades on focus */
#forminator-module-981 [name="textarea-1"]::placeholder {
    font-weight: bold;
    color: inherit;
    opacity: 1;
    transition: opacity 0.2s ease;
}

#forminator-module-981 [name="textarea-1"]:focus::placeholder {
    opacity: 0;
}

#forminator-module-981 [name="textarea-1"]:after {
    border-style: unset;
    border-width: unset;
}

/* File upload button border */
.forminator-file-upload button {
    border: 1px solid currentColor !important;
}


/* ==========================================================================
   24. PROJECTS & CASE STUDIES
   --------------------------------------------------------------------------
   Spacing for project content headings and inline display for
   case study grid links.
   ========================================================================== */

.project-content h3:not(:first-child) {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.case-study-grid h3 > a {
    display: inline-block;
}


/* ==========================================================================
   25. NEWS & BLOG
   --------------------------------------------------------------------------
   Post date width fix, taxonomy tag limit, filter dropdown styling,
   and "load more" button positioning.
   ========================================================================== */

/* Prevent date from wrapping */
time.w-post-elm.post_date {
    min-width: fit-content;
}

/* Hide taxonomy tags beyond the 3rd */
.w-post-elm.post_taxonomy.usg_post_taxonomy_2 > :nth-child(n+4) {
    display: none;
}

/* TDK news filter — minimal dropdown styling */
form#tadek-news-filter .w-filter-item-title {
    display: none;
}

form#tadek-news-filter select.w-filter-item-value-select {
    border: none;
    border-bottom: 1px solid;
    padding: 0;
	border-radius: 0;
}

form#tadek-news-filter a.w-filter-item-reset {
    display: none;
}

/* "Load More" button — left-aligned with top spacing */
.g-loadmore {
    text-align: left;
    position: relative;
    min-height: 2.5rem;
    margin-top: calc(var(--gap, 0px) * 2);
}

/* Custom field before/after — tighten spacing around inline labels */
span.w-post-elm-before {
    margin-right: -0.2em;
}
.case-study-grid span.w-post-elm-before {
    margin-right: 0;
}

span.w-post-elm-after {
    margin-left: -0.2em;
}

/* Bold before-labels */
.w-post-elm-before {
    font-weight: bold;
}

/* Spacing and sizing of news template content images */
div#news-template-content img {
    margin: 1.5rem 0;
/*     width: 100% !important; */
}

/* Top margin for news template content wrapper */
div#news-template-content  {
    margin-top: 1.5rem;
}


/* ==========================================================================
   26. CLIENTS PAGE
   --------------------------------------------------------------------------
   White pseudo-element overrides for client template backgrounds.
   ========================================================================== */

/* Override separator colours to white on client template backgrounds */
.tdk-client-template-background .usg_vwrapper_1:before,
.tdk-client-template-background .usg_vwrapper_1:after {
    background: white !important;
}


/* ==========================================================================
   27. VACANCIES PAGE
   --------------------------------------------------------------------------
   Grid separators, floating sidebar, and heading dividers for
   vacancy listings and single vacancy pages.
   ========================================================================== */

/* Vertical line between vacancy grid items */
.vacancy-grid .w-grid-list article {
    position: relative;
}

.vacancy-grid .w-grid-list article::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: calc(var(--gap) * -1);
    width: 1px;
    height: 100%;
    background: var(--color-tertiary);
}

/* Remove separator after the last item */
.vacancy-grid .w-grid-list article:last-child::after {
    display: none;
}

/* Floating sticky sidebar on vacancy detail page */
.wpb_column.vc_column_container.floating-sidebar-logo.stretched.type_sticky {
    margin-right: -150%;
    margin-left: 50%;
}

/* White horizontal rule inside coloured sidebar */
.wpb_column.vc_column_container.has_text_color.has_bg_color hr {
    border-color: white;
    border-width: 0px;
    border-bottom-width: 3px;
    width: 40px;
}

/* Section divider line before each h2 on single vacancy pages */
body.vacancy-template-default main h2:before {
    display: block;
    width: 100%;
    height: 1px;
    margin: 4rem 0;
    content: '';
    background: black;
}

/* Remove the top line where explicitly disabled */
body.vacancy-template-default main .no-top-line h2:before {
    display: none;
}


/* ==========================================================================
   29. FOOTER
   --------------------------------------------------------------------------
   Social icon styling, logo, LinkedIn icon, and accreditation logos
   within the footer.
   ========================================================================== */

/* White inset border on social media icon links */
.tdk-footer-socialicons a.w-socials-item-link {
    box-shadow: inset 0 0 0 1px white !important;
}

/* Logo path colours — white in footer context */
footer #tadek-logo :is(.tdk-1, .tdk-2, .tdk-3, .tdk-4, .tdk-5) {
    fill: white;
}

/* Footer logo sizing */
footer #tadek-logo {
    height: 56px !important;
}

/* Gap between accreditation logos */
.accreditation-logo{
    gap: 20px;
}

/* Accreditation logo max width */
.accreditation-logo .w-image{
    max-width: 150px !important;
}

/* Footer TDK logo — vertically centred on small screens */
@media (max-width: 600px){
	#footer-tdk-logo {
  		position: absolute;
  		top: 50%;
  		transform: translateY(-50%);
	}

	/* LinkedIn icon — left-aligned on small mobile */
	.w-iconbox.linkedin-tdk {
	  	margin-left: 5px !important;
	  	margin-right: auto !important;
	}
}

/* Footer TDK logo and LinkedIn icon — tablet adjustments */
@media (min-width: 600px) and (max-width: 900px) {
    .w-iconbox.linkedin-tdk {
        margin-left: 5px !important;
        margin-right: auto !important;
    }

    #footer-tdk-logo {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    #footer-tdk-logo img {
        width: 175px !important;
    }
}


/* ==========================================================================
   30. ANIMATIONS & TRANSITIONS
   ========================================================================== */

/* Global animation duration override for Impreza animations */
[class*="us_animate_"] {
    animation-duration: var(--tdk-animation-duration);
}

/* Animated button opacity on start */
a.w-btn.us-btn-style_2.us_animate_this.start {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   30a. Custom Fade & Slide Animations
   -------------------------------------------------------------------------- */

/* Base: disable default Impreza animation, show immediately */
.custom-animation.us_animate_this {
    animation: none;
    opacity: 100%;
}

/* Fade-up: starts invisible and translated down, slides up on .start */
.custom-animation.fade-up.us_animate_this {
    opacity: 0;
    transform: translateY(50%);
    transition: all 0.3s ease, opacity .5s ease-in, transform .5s ease-out;
}

.custom-animation.fade-up.us_animate_this.start {
    opacity: 100%;
    transform: translateY(0%);
}

/* Testimonials grid — animated top border (grows from 0 to 100% width) */
.testimonials-grid.custom-animation.us_animate_this .usg_vwrapper_1:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--color-tertiary);
    height: 1px;
    width: 0;
    opacity: 0.5;
    transition: all 1.5s ease 0s;
}

.testimonials-grid.custom-animation.us_animate_this.start .usg_vwrapper_1:before {
    width: 100%;
    opacity: 1;
}

/* Testimonials grid — animated left border (grows from 0 to 100% height) */
.testimonials-grid.custom-animation.us_animate_this .usg_vwrapper_1:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--color-tertiary);
    height: 0;
    width: 1px;
    opacity: 0.5;
    transition: all 1.2s ease-in-out 0s;
}

.testimonials-grid.custom-animation.us_animate_this.start .usg_vwrapper_1:after {
    height: 100%;
    opacity: 1;
}

/* Alternate background — white borders instead of tertiary */
.color_alternate .testimonials-grid.custom-animation.us_animate_this .usg_vwrapper_1:before,
.color_alternate .testimonials-grid.custom-animation.us_animate_this .usg_vwrapper_1:after {
    background: white;
}

/* --------------------------------------------------------------------------
   30b. Animate Children — Staggered Fade-In
   --------------------------------------------------------------------------
   Direct children fade in sequentially with 0.2s delays.
   -------------------------------------------------------------------------- */

.animate-children.us_animate_this {
    opacity: 1;
}

.animate-children.us_animate_this > * {
    opacity: 0;
    transition: opacity 0.4s;
}

.animate-children.us_animate_this.start > * {
    opacity: 1;
}

.animate-children > *:nth-child(2)  { transition-delay: 0.2s; }
.animate-children > *:nth-child(3)  { transition-delay: 0.4s; }
.animate-children > *:nth-child(4)  { transition-delay: 0.6s; }
.animate-children > *:nth-child(5)  { transition-delay: 0.8s; }
.animate-children > *:nth-child(6)  { transition-delay: 1.0s; }
.animate-children > *:nth-child(7)  { transition-delay: 1.2s; }
.animate-children > *:nth-child(8)  { transition-delay: 1.4s; }
.animate-children > *:nth-child(9)  { transition-delay: 1.6s; }
.animate-children > *:nth-child(10) { transition-delay: 1.8s; }

/* --------------------------------------------------------------------------
   30c. Animate Grandchildren — Staggered Fade-In (2nd level)
   --------------------------------------------------------------------------
   Grandchildren (children of children) fade in sequentially.
   -------------------------------------------------------------------------- */

.animate-grandchildren.us_animate_this {
    opacity: 1;
}

.animate-grandchildren.us_animate_this > * > * {
    opacity: 0;
    transition: all 0.4s;
}

.animate-grandchildren.us_animate_this.start > * > * {
    opacity: 1;
    transform: translate(0);
}

.animate-grandchildren > * > *:nth-child(1)  { transition-delay: 0.2s; }
.animate-grandchildren > * > *:nth-child(2)  { transition-delay: 0.4s; }
.animate-grandchildren > * > *:nth-child(3)  { transition-delay: 0.6s; }
.animate-grandchildren > * > *:nth-child(4)  { transition-delay: 0.8s; }
.animate-grandchildren > * > *:nth-child(5)  { transition-delay: 1.0s; }
.animate-grandchildren > * > *:nth-child(6)  { transition-delay: 1.2s; }
.animate-grandchildren > * > *:nth-child(7)  { transition-delay: 1.4s; }
.animate-grandchildren > * > *:nth-child(8)  { transition-delay: 1.6s; }
.animate-grandchildren > * > *:nth-child(9)  { transition-delay: 1.8s; }
.animate-grandchildren > * > *:nth-child(10) { transition-delay: 2.0s; }

/* --------------------------------------------------------------------------
   30d. Overlay Animations
   --------------------------------------------------------------------------
   Half-width section overlays that slide in from top or bottom.
   -------------------------------------------------------------------------- */

section.half-width-overlay-left.custom-animation.us_animate_this .l-section-overlay {
    transform: translateY(-100%);
    transition: all 1.2s ease;
}

section.half-width-overlay-right.custom-animation.us_animate_this .l-section-overlay {
    transform: translateY(100%);
    transition: all 1.2s ease;
}

section.half-width-overlay-left.custom-animation.us_animate_this.start .l-section-overlay,
section.half-width-overlay-right.custom-animation.us_animate_this.start .l-section-overlay {
    transform: translateY(0%);
}

/* Clip overflow during animation to prevent flash of content */
section.half-width-overlay-left.custom-animation,
section.half-width-overlay-right.custom-animation {
    overflow-Y: clip;
}

/* --------------------------------------------------------------------------
   30e. Animated Pointer — Horizontal Swipe Loop
   -------------------------------------------------------------------------- */

.animated-pointer {
    display: block;
    position: absolute;
    animation: ease-in-out infinite;
    animation-name: pointer-swipe;
    animation-duration: 3s;
}

@-webkit-keyframes pointer-swipe {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(0.6rem); }
    40%  { transform: translateX(-0.6rem); }
    60%  { transform: translateX(0); }
    100% { transform: translateX(0); }
}

/* --------------------------------------------------------------------------
   30f. Apple-Style Hover Pulse
   --------------------------------------------------------------------------
   Subtle scale-up on hover, press-down on active (click).
   -------------------------------------------------------------------------- */

.w-iconbox-link,
a i {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.w-iconbox-link:hover,
a i:hover {
    transform: scale(1.04) translateY(-2px);
}

.w-iconbox-link:active,
a i:active {
    transform: scale(0.97);
    transition: transform 0.4s ease;
}

/* Grow children on hover — used on card grids */
.hover-grow-children > *:hover {
    transform: scale(1.05);
}
.hover-grow-children.animate-children > * {
    --stagger-delay: 0s;
    transition: all 0.4s ease 0s, opacity 0.4s ease var(--stagger-delay);
}

.hover-grow-children.animate-children > *:nth-child(1) { --stagger-delay: 0s; }
.hover-grow-children.animate-children > *:nth-child(2) { --stagger-delay: 0.2s; }
.hover-grow-children.animate-children > *:nth-child(3) { --stagger-delay: 0.4s; }
.hover-grow-children.animate-children > *:nth-child(4) { --stagger-delay: 0.6s; }
.hover-grow-children.animate-children > *:nth-child(5) { --stagger-delay: 0.8s; }
.hover-grow-children.animate-children > *:nth-child(6) { --stagger-delay: 1.0s; }

/* .hover-grow-children > * {
    transition-property: all !important;
} */


/* ==========================================================================
   31. VIDEOS
   --------------------------------------------------------------------------
   Fixed-height video columns on desktop; auto-height on mobile.
   ========================================================================== */

/* Desktop — fixed height video */
@media (min-width: 901px) {
    .fixed-height-video-col video {
        height: 500px !important;
        width: 100% !important;
        object-fit: cover;
    }
}

/* Mobile — auto height video */
@media (max-width: 900px) {
    .fixed-height-video-col video {
        height: auto !important;
        width: 100% !important;
        object-fit: contain;
    }
}


/* ==========================================================================
   32. SOFTWARE CATEGORY LOGOS
   --------------------------------------------------------------------------
   Reusable block layout for software partner/category logos.
   ========================================================================== */

.software-category-wrapper .w-grid {
    margin: auto 0 !important;
}

.software-category-wrapper {
    justify-content: space-between;
}


/* ==========================================================================
   33. MISCELLANEOUS & OVERRIDES
   ========================================================================== */

/* --------------------------------------------------------------------------
   33a. Numbers with coloured background — used as step indicators
   -------------------------------------------------------------------------- */
.number-bg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background-color: var(--color-content-secondary);
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
    border-radius: var(--border-radius-small);
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   33b. Border radius helpers — top only / bottom only
   -------------------------------------------------------------------------- */
.border-top-radius {
    border-top-left-radius: var(--border-radius-small);
    border-top-right-radius: var(--border-radius-small);
}

.border-bottom-radius .vc_column-inner {
    border-bottom-right-radius: var(--border-radius-small);
    border-bottom-left-radius: var(--border-radius-small);
}

/* --------------------------------------------------------------------------
   33c. Animated text heading — append period and reorder spans via flexbox
   -------------------------------------------------------------------------- */
h1.w-itext.us_animate_this.type_zoomInChars.align_left::after {
    content: '.';
    order: 1;
    margin-right: 0.2em;
}

h1.w-itext.us_animate_this.type_zoomInChars.align_left {
    display: flex;
}

h1.w-itext.us_animate_this.type_zoomInChars.align_left span {
    order: 2;
}

/* --------------------------------------------------------------------------
   33d. Wave shape — extend beyond viewport to avoid gaps
   -------------------------------------------------------------------------- */
.l-section-shape.type_wave.pos_bottom.on_front {
    margin-right: -25%;
}

/* --------------------------------------------------------------------------
   33e. Software logos
   -------------------------------------------------------------------------- */
.software-logos-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 4vw;
	justify-content: flex-start;
	--cols: 7;
	--item-width: calc(var(--site-content-width) / var(--cols));
}

.software-logos-group {
	flex:0 0 calc(var(--item-width) * var(--number-logos));
	max-width: 100%;
}

.software-logos-group h3 {
	min-width: max-content;
	margin-bottom: 0;
}

.software-logos-items {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	row-gap: 1rem;
}

.software-logo-item {
	display: flex;
	flex: 0 1 var(--item-width);
	height: 100px;
	align-items: center;
	justify-content: center;
	padding:0.5rem;
}

.software-logo-item img {
	max-height:100%;
	width: auto;
}

/* --------------------------------------------------------------------------
   33f. Flipboxes
   -------------------------------------------------------------------------- */

/* Disable default flip transition — use opacity fade instead */
.w-flipbox-hh, .w-flipbox-hhh, .w-flipbox-front, .w-flipbox-back, .w-flipbox-xflank, .w-flipbox-yflank {
	transition-property: none;
	transition-duration: 0s !important;
}

/* Back face — hidden by default, fades in on hover */
.w-flipbox-back {
	opacity: 0;
	transition: opacity 0.3s ease !important;
	transform: scale(1.001) !important;
	z-index:3 !important;
}

.w-flipbox.direction_w.hover .w-flipbox-back {
	opacity: 100%;
}

/* Prevent default card-flip transform on front face */
.w-flipbox.animation_cardflip.direction_w.hover .w-flipbox-front {
	transform:none;
}


/* ==========================================================================
   34. MEDIA QUERIES 
   --------------------------------------------------------------------------
   All responsive overrides collected by breakpoint, with rules
   sub-grouped by their parent section for easy cross-referencing.
   ========================================================================== */

/* --------------------------------------------------------------------------
   34a. Tablet & Laptop (≤1321px)
   -------------------------------------------------------------------------- */

@media (max-width: 1321px) {

    /* --- 13. Hero Section --- */
	.tdk-hero-banner .wpb_column.vc_column_container:last-child, .title-row .wpb_column.vc_column_container:last-child {
        min-height: 75vw;
    }

    /* --- 14a. Sections & Layout Containers — Full-Width Background Rows --- */
    .no-stretch-tablet {
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* --------------------------------------------------------------------------
   34b. Tablet (≤1024px)
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {

    /* --- 4. Buttons — Label Visibility --- */
    .hide-label-on-tablet span {
        display: none;
    }
	
	/* --- 15b. Block Diagrams — Sector Block Diagram (stack vertically) --- */
	.wpb_text_column.block-diagram-sector {
    flex-direction: column;
	}

	.block-diagram-sector .wpb_wrapper {
		flex-direction: column;
	}

	.block-diagram-sector h3 {
		height: unset;
		margin-bottom: 0;
	}

	/* Rotate arrows to point downward */
	.block-diagram-sector .tdk-single-block.arrow-Single i.fas.fa-chevron-right, 
	.block-diagram-sector .tdk-single-block.arrow-Bidirectional i.fas.fa-chevron-right,
	.block-diagram-sector .tdk-single-block.arrow-Bidirectional i.fas.fa-chevron-left
	{
		right: unset;
		left: 50%;
		top: unset;
		bottom: -3.7rem;
		transform: translateX(-50%) rotate(90deg);
	}
	.block-diagram-sector .tdk-single-block.arrow-Bidirectional i.fas.fa-chevron-left {
		bottom: -0.6em;
	}

	/* Horizontal clip-path notch for vertical stacking */
	.block-diagram-sector .tdk-single-block:not(:first-child) {
		--clip-gap-1: calc(50% - 15px);
		--clip-gap-2: calc(50% + 15px);
		clip-path: polygon(0 0, var(--clip-gap-1) 0, var(--clip-gap-1) 5px, var(--clip-gap-2) 5px, var(--clip-gap-2) 0, 100% 0, 100% 200%, 0 200%) !important;
	}

	/* Downward arrow line */
	.block-diagram-sector .tdk-single-block i.fas.fa-chevron-right::after {
		content: '';
		display: block;
		width: 3.1rem;
		position: absolute;
		right: 5px;
		top: calc(0.5em - 2.3px);
		height: 3px;
		background: currentColor;
	}

	/* Remove right margin on last single-arrow block */
	.tdk-single-block.arrow-Single:last-child {
		margin-right: 0;
		margin-bottom:3rem;
	}
}

/* --------------------------------------------------------------------------
   34c. Tablet & Below (≤900px)
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 900px) {
	
    /* --- 1. CSS Custom Properties (Variables) --- */
    :root {
        --tdk-section-margin-small: 40px;
        --tdk-section-margin-large: 80px;
    }
	
	/* --- 33e. Software Logos — reduced item width --- */
	.software-logos-wrapper {
		--item-width: 150px;
	}

    /* --- 13. Hero Section --- */
	.tdk-hero-banner .wpb_column.vc_column_container:last-child, 
	.title-row .wpb_column.vc_column_container:last-child {
        min-height: 75vw;
    }

    /* --- 14a. Sections & Layout Containers — Stretched Columns --- */
    .g-cols.via_flex.type_default > .wpb_column.stretched:last-of-type {
        margin-right: auto !important;
    }

    .g-cols.via_flex.type_default > .wpb_column.stretched:first-of-type {
        margin-right: -2rem !important;
    }

    #slider-spacer {
        height: 45vh;
    }
	
	/* --- 9. Flex Wrappers — stack on mobile --- */
    .w-hwrapper.service-stats-container,
    .flex-column-on-mobile {
        flex-direction: column;
    }

    .w-hwrapper.stack_on_mobiles > .call-us-icon {
        display: inline-flex;
    }
	
	/* --- 7. Separators & Dividers — Column separator becomes horizontal --- */
	.column-separator .wpb_column.vc_column_container:first-child:after
	{
		top: calc(100% + var(--columns-gap, 0) / 2);
		left: 0;
		height: 1px !important;
		width: 100%;
	}

	/* Separator on top if columns are reversed */
	.column-separator .reversed .wpb_column.vc_column_container:first-child:after {
		top: calc(0% - var(--columns-gap, 0) / 2) ;
	}
	
	/* Animated column separator — horizontal variant */
	.column-separator.custom-animation .wpb_column.vc_column_container:first-child:after
	{
		width: 0%;
		opacity: 0;
	}
	.column-separator.custom-animation.start .wpb_column.vc_column_container:first-child:after {
		width: 100%;
		opacity: 1;
	}

    /* --- 15a. Block Diagrams — Standard Block Diagram (stack vertically) --- */
	.block-diagram>.vc_column-inner,
	.block-diagram .dashed-box
	{
		flex-direction: column;
		align-items: center;
	}

	/* Rotate chevron arrow to point downward */
	.block-diagram i.fas.fa-chevron-right {
		font-size: 18px;
		position: absolute;
		top: calc(100% + 2.5rem);
		transform: translateX(50%) rotate(90deg);
		right: 50% !important;
		color: var(--featured-color);
	}

	/* Horizontal clip-path notch for vertical stacking */
	.block-diagram>.vc_column-inner .w-text {
		clip-path: polygon(0 0, 44% 0, 44% 5px, 56% 5px, 56% 0, 100% 0, 100% 200%, 0 200%) !important;
	}
	.block-diagram>.vc_column-inner>.w-text:first-child {
		clip-path: none !important;
	}

	/* Remove right margin, add bottom margin on last block */
	.block-diagram>.vc_column-inner>.icon_atright:last-child {
		margin-right:0 !important;
		margin-bottom: 3.5rem;
	}
	
	/* --- 30d. Overlay Animations — solid background fallback on mobile --- */
	section.half-width-overlay-left .l-section-overlay,
	section.half-width-overlay-right .l-section-overlay
	{
		background: var(--color-content-primary) !important;
	}
}

/* --------------------------------------------------------------------------
   34d. Mobile (≤768px)
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 768px) {

    /* --- 4. Buttons — Label Visibility --- */
    .hide-label-on-mobile span {
        display: none;
    }
	
	/* --- 20b. Services — Child Service Row Grid (stack vertically) --- */
	.child-service-row-grid .w-hwrapper.usg_hwrapper_1.column-separator {
		display: flex;
		flex-direction: column;
		row-gap: var(--gap);
	}

	/* Separator becomes horizontal line */
	.child-service-row-grid .usg_vwrapper_1:before {
		top: calc(100% + var(--gap, 0) / 2);
		left: 0 !important;
		height: 1px !important;
		width: 100%;
	}

	/* Reverse image order on client variant */
	.child-service-row-grid.clients .w-image.usg_image_1 {
		order: 1;
	}

}

/* --------------------------------------------------------------------------
   34e. Small Mobile (≤600px)
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {

    /* --- 1. CSS Custom Properties (Variables) --- */
    :root {
        --tdk-section-margin-small: 30px;
        --tdk-section-margin-large: 60px;
    }
	
	/* --- 33e. Software Logos — half-width items on small screens --- */
	.software-logos-wrapper {
		--item-width: 50%;
	}
   
    /* --- 19. Team Members — mobile heading adjustments --- */
    .team-member-content h5{
        font-size: 18px;
            margin-bottom: 5px;
        color: #195090 !important
	}
}