/* Frozen Visual Composer page "Custom CSS" field (live head, 2026-08-12).
   While the js_composer plugin is active these rules also print in the head
   -- identical rules, harmless duplication; this copy keeps the page intact
   once the plugin is deactivated. */
.promo-language p {font-size:28px; color:#ffffff; line-height:50px;}
.translation-process-right p {font-size:18px; font-weight:300; color: #58595b;}
.promo-class {line-height:40px;}
.accord_col .vision-accordion dt {
    border: 1px solid #E1E1E1 !important;
    background-image: -moz-linear-gradient(center top , #FFF 0%, #EFEFEF 100%) !important;
}
.services-list .icons {top:20px !important};
.ul.services-list li p {font-size:18px !important;}
.language-column p {font-size:18px !important; font-weight:300;}
.orbit-text-wrap .callout-heading-wrap h3 {font-size:20px !important;}

.promo-language .promo-text {
    font-size: 28px;
    color: #FFF;
    line-height: 50px;
    margin-right: 30px;
}

.continent-label p {
    font-size: 24px;
    font-weight: 300;
    text-align: center;
    color: #23323A;
    cursor: pointer;
}

.continent-label:hover p {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    color: #45B17B;
}

.continent-label.clicked p {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    color: #45B17B;
}

.asian_language_block, .african_language_block {
    display: none;
}

.vc_row.row-continent-labels {
    
    margin-bottom: 50px !important;
}

.quality-language-title-row h1 {
    
    line-height: 50px;
}

a.button.biggest.variant2 {font-family:Helvetica; font-size:12px;}

.services-list li h3 {font-size:18px; margin-top: 5px; margin-bottom: 5px;}
.services-list .icons {font-size:32px;}
.services-list .icons {top:15px;}
.services-list li {padding-left: 70px!important; padding:10px 0;}
.accord_col .vision-accordion dt {padding:15px 0px !important;}
.vision-accordion {font-size:16px;}
.vision-accordion dd {color:#58595b;}
.under-service-cta h3 {
    font-size: 32px;
    font-family: 'Montserrat',sans-serif;
    font-weight: 500;
    color:#525252;
}
/* Awards */

.awards-title {
    font-size: 15px;
    line-height: 20px;
}

.eq-cols-text {
    display: flex;
    align-items: center;
    justify-content: center;
}
.eq-cols-text, .awards-long-text {
    color: #fff;
    margin: 0;
    font-weight:600;
}
.award-logos-row {
    display: flex;
    align-items: center;
}
.eq-col3 {
    background: url(/wp-content/uploads/2021/07/eko4-translations-florida-awards-1.jpg);
    background-size: cover;
    background-position: top center;
}
.eq-col2 {
    background-color: #fff;
}
.eq-col2 li, .eq-col4 .awards-title {
    color:#525252!important;
}
.eq-col4 {
    background-color: #fff;
}
.eq-col5 {
    background: url(/wp-content/uploads/2021/07/eko4-translations-florida-awards3.jpg);
    background-size: cover;
    display:flex;
    align-items:flex-end;
    background-position: center;
}
.eq-col6 {
    display:flex;
    align-items:center;
    justify-content:center;
}
.eq-col7 {
    background: url(/wp-content/uploads/2021/07/award-winning-translation-agency-florida.jpg);
    background-size: cover;
    display:flex;
    align-items:flex-end;
    background-position: center;
}
.award-desc {
    background: #EB3136;
    color: #fff;
    text-align: center;
    padding: 10px;
    font-weight:600;
}
.eq-col5 .vc_column-inner, .eq-col7 .vc_column-inner {
     padding-left:0;
     padding-right:0;
}
.eq-col6 {
    min-height:250px;
    background-color: #45b17b;
}@media (min-width: 768px) and (max-width: 1080px) {
}@media (max-width: 768px) {
    .bubble-text {
        margin-left:10px;
        margin-right:10px;
        padding-left:40px!important;
        padding-right:40px!important;
    }
    .eq-col7 {
        margin-bottom:40px;
    }
    .eq-col5 .wpb_wrapper, .eq-col7 .wpb_wrapper {
        width:100%;
    }
}@media (max-width:600px) {
}
.intro-txt p {
    font-size:16px;
    line-height:1.6;
}
.cta-white-text-curved {
    padding-bottom:60px;
}
.bubble-text {
    padding: 50px 56px;
    border-radius: 165px;
    border: 3px solid #48b37d;
}
.slider-main-title {
    margin-top: 10px;
    margin-bottom: 15px;   
}
@media (min-width:992px) {
    .slider-main-title {
        font-size: 24px;
        line-height: 32px;
    }
    }

/* Frozen Visual Composer per-element design options (live head, 2026-08-12).
   While the js_composer plugin is active these rules also print in the head
   -- identical rules, harmless duplication; this copy keeps the page intact
   once the plugin is deactivated. */
.vc_custom_1664040871567{margin-bottom: 30px !important;padding-top: 40px !important;}.vc_custom_1651487158572{margin-top: 40px !important;}.vc_custom_1632309508399{margin-bottom: 60px !important;}.vc_custom_1632082331574{background-image: url(/wp-content/uploads/2021/09/certified-translation-in-progress-1.jpg?id=9565) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}.vc_custom_1632082261236{border-bottom-width: 0px !important;background-image: url(/wp-content/uploads/2015/11/certified-translation-service-agency.jpg?id=8931) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}.vc_custom_1659354188763{margin-top: 60px !important;}.vc_custom_1632304793843{padding-top: 60px !important;padding-bottom: 50px !important;}.vc_custom_1627328971492{margin-top: 30px !important;margin-bottom: 30px !important;}.vc_custom_1606299760981{padding-bottom: 40px !important;}.vc_custom_1651487114387{margin-top: 30px !important;}.vc_custom_1606328122726{padding-top: 65px !important;padding-bottom: 60px !important;}.vc_custom_1606328122726{padding-top: 65px !important;padding-bottom: 60px !important;}.vc_custom_1632082534690{margin-top: 0px !important;padding-top: 0px !important;}.vc_custom_1632082545216{margin-top: 0px !important;padding-top: 0px !important;}.vc_custom_1626814842124{padding-top: 48px !important;padding-right: 15px !important;padding-bottom: 48px !important;padding-left: 15px !important;background-color: #45b17b !important;}.vc_custom_1632077150122{padding-top: 20px !important;padding-right: 30px !important;padding-bottom: 20px !important;padding-left: 30px !important;background-color: #ffffff !important;}.vc_custom_1632077326821{padding-top: 20px !important;padding-right: 30px !important;padding-bottom: 20px !important;padding-left: 30px !important;background-color: #ffffff !important;}.vc_custom_1626816680727{padding-top: 20px !important;padding-right: 30px !important;padding-bottom: 20px !important;padding-left: 30px !important;background-color: #45b17b !important;}.vc_custom_1627334264391{margin-bottom: 70px !important;}.vc_custom_1631821560947{margin-top: 130px !important;margin-bottom: 60px !important;}.vc_custom_1606301866055{padding-top: 40px !important;padding-right: 20px !important;padding-bottom: 30px !important;padding-left: 20px !important;background-color: rgba(255,255,255,0.7) !important;*background-color: rgb(255,255,255) !important;}.vc_custom_1627329230810{margin-top: 20px !important;margin-bottom: 30px !important;}.vc_custom_1606302243363{margin-bottom: 35px !important;}.vc_custom_1606302250491{margin-bottom: 35px !important;}.vc_custom_1606302270898{margin-bottom: 35px !important;}


/* ==========================================================================
   Hero replica (no LayerSlider). Desktop: 1280x700 stage, centered, scaled
   by the inline script; layers absolutely positioned at the original
   LayerSlider coordinates. Under 992px: flow layout the theme's mobile
   !important overrides (style.css) were written against -- deco layers hide,
   the white box centers at 85vw, the container heights come from the theme
   (.home .ls-wp-container / .ls-inner rules). Base rules here deliberately
   avoid !important so the theme keeps winning exactly as it did over
   LayerSlider. */

#eko4-hero-slider { position: relative; width: 100%; height: 700px; overflow: hidden; }
#eko4-hero-slider .ls-inner { position: relative; width: 100%; height: 100%; }
#eko4-hero-slider .ls-layers { position: absolute; top: 0; left: 50%; width: 1280px; height: 700px; margin-left: -640px; transform-origin: top center; }
#eko4-hero-slider .ls-wrapper { position: absolute; }

/* Ken Burns background: spans the full slider width like the original
   fullwidth slider, slow zoom to 1.2. */
#eko4-hero-slider .eko4-hero-bg-wrap { position: absolute; top: 0; left: 50%; width: 2000px; margin-left: -1000px; height: 100%; overflow: visible; }
#eko4-hero-slider .ls-bg { display: block; width: 2000px; height: auto; animation: eko4-kenburns 25s linear forwards; transform-origin: 50% 50%; }
@keyframes eko4-kenburns { from { transform: scale(1); } to { transform: scale(1.2); } }

/* Layer positions = original LayerSlider layer coordinates. */
.eko4-hl-screen2 { top: 276px; left: 448px; }
.eko4-hl-screen1 { top: 276px; left: -56px; }
.eko4-hl-screen4 { top: 245px; left: 884px; }
.eko4-hl-screen5 { top: 20px;  left: 972px; }
.eko4-hl-screen3 { top: 20px;  left: 463px; }
.eko4-hl-group   { top: 139px; left: 666px; }
.eko4-hl-award   { top: 119px; left: -143px; }
.eko4-hl-box     { top: 172px; left: 74px; }

.eko4-hl img.ls-l { display: block; }
.eko4-hl-screen1 img, .eko4-hl-screen2 img, .eko4-hl-screen3 img, .eko4-hl-screen4 img, .eko4-hl-screen5 img { width: 722px; height: 381px; }
.eko4-hl-group img { width: 417px; height: 339px; }
.eko4-hl-award img { width: 242px; height: 523px; }

/* The white content box -- inline styles of the original layer. */
.eko4-hl-box .home-form-box { width: 700px; padding: 20px; font-size: 18px; background-color: rgba(255, 255, 255, 0.9); border-radius: 10px; color: #333333; font-family: Nunito, sans-serif; white-space: normal; }

/* Entrance animations -- timings from the original layer data
   (delayin/durationin; screens slide in from above without fade, the group
   badge drops with an overshoot, the box fades in). */
.eko4-hl { animation-fill-mode: both; }
.eko4-hl-screen1 { animation: eko4-drop-in 1.5s cubic-bezier(0.23, 1, 0.32, 1) 0.5s both; }
.eko4-hl-screen2 { animation: eko4-drop-in 1.5s cubic-bezier(0.23, 1, 0.32, 1) 0.9s both; }
.eko4-hl-screen3 { animation: eko4-drop-in-fade 1s cubic-bezier(0.23, 1, 0.32, 1) 1.2s both; }
.eko4-hl-screen4 { animation: eko4-drop-in-fade 1s cubic-bezier(0.23, 1, 0.32, 1) 1.4s both; }
.eko4-hl-screen5 { animation: eko4-drop-in 1s cubic-bezier(0.23, 1, 0.32, 1) 1.6s both; }
.eko4-hl-group   { animation: eko4-drop-bounce 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) 2.2s both; }
.eko4-hl-box     { animation: eko4-fade-in 1.5s ease 0.3s both; }
@keyframes eko4-drop-in { from { transform: translateY(-750px); } to { transform: translateY(0); } }
@keyframes eko4-drop-in-fade { from { transform: translateY(-750px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes eko4-drop-bounce { from { transform: translateY(-350px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(0); opacity: 1; } }
@keyframes eko4-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Mobile / tablet flow mode (<=991px): matches the theme's overrides that
   used to restyle LayerSlider (form box centered at 85vw, deco screens off,
   container heights from style.css !important rules). */
@media (max-width: 991px) {
	#eko4-hero-slider { height: auto; }
	#eko4-hero-slider .ls-layers { position: relative; top: auto; left: auto; width: 100%; height: auto; margin-left: 0; transform: none; }   /* 100%, not auto: as a centred flex item the stack shrank to the box and the background left gutters (staging, 4 Sept 2026) */
	/* padding-top clears the transparent overlay header (headerstyle7) so the
	   content box starts below it, like the original slider's mobile layout. */
	#eko4-hero-slider .ls-inner { display: flex; align-items: flex-start; justify-content: center; min-height: 460px; padding-top: 75px; box-sizing: border-box; }
	.eko4-hl-screen1, .eko4-hl-screen2, .eko4-hl-screen3, .eko4-hl-screen4, .eko4-hl-screen5, .eko4-hl-group, .eko4-hl-award { display: none; }
	#eko4-hero-slider .eko4-hl-box { position: relative; top: auto; left: auto; margin: 30px auto; animation: eko4-fade-in 1s ease 0.2s both; }
	.eko4-hl-box .home-form-box { width: 85vw; }
	#eko4-hero-slider .eko4-hero-bg-wrap { left: 0; margin-left: 0; width: 100%; }
	#eko4-hero-slider .ls-bg { width: 100%; height: 100%; object-fit: cover; animation: none; }
}

/* ==========================================================================
   Hexagons -- thin edge.

   THIN EDGE (user request 2026-08-15): the theme's hexagon-soft-edges.svg
   draws the dark core as a much smaller separate hexagon, leaving a ~40px
   green ring. normal-pages/img/hexagon-thin-edge.svg redraws the core as
   the SAME outline scaled 0.9579 about the centre: an even thin ring and a
   far larger dark area. Used by the "how it works" hexes here; the "six
   reasons" hexes around the logo are painted in the logo's colours by the
   shared normal-pages.css since 2026-09-04 (this graphic is their no-mask
   fallback there); the old builder pages are untouched.

   The benefit and services hexagons that also used it (with a slope-
   following shape-outside text flow, 2026-08-14) were replaced on
   2026-09-03/04 by the tilted family further down (.eko4-tilt-*). */
/* (2026-09-04) the "how it works" hexagons are painted by the shared
   normal-pages.css now: solid red/grey/green gradients with a shadow. */
/* ==========================================================================
   Intro text under the counters (user request 2026-09-04): the green
   3px "bubble" outline is gone, and the copy is set like the hero box's
   subtitle -- Nunito 600, 18px -- instead of the frozen Open Sans. */
.vc_row.bubble-text { border: 0; border-radius: 0; padding: 30px 56px 10px; }
.bubble-text .intro-txt p {
	font-family: 'Nunito', 'Segoe UI', Arial, sans-serif !important;
	font-size: 18px; line-height: 1.6; font-weight: 600; color: #58595b;
	max-width: 1100px; margin-left: auto; margin-right: auto;
}
.bubble-text .intro-txt p strong { font-weight: 800; color: #23323a; }

/* ==========================================================================
   Tilted hexagon rows (.eko4-tilt-*) -- counter-style hexes. Used by the
   benefits row (four hexes in logo red, .eko4-tilt-red, 2026-09-04) and the
   "Our Services" row (four hexes in grey, 2026-09-03), both user requests:
   drawn like the small counter hexagons -- one soft-shadowed gradient
   hexagon per item (normal-pages/img/hexagon-soft-gray.svg / -red.svg, the
   theme's rounded hexagon outline), tilted 16deg alternately clockwise and
   anticlockwise, the way the counter hexagons take turns, and overlapping
   its neighbours a little, later boxes painting over earlier ones with
   their shadow falling on the one beneath. The shape is a ::before layer
   that rotates and carries the drop-shadow; the content stays upright.

   TEXT: a tilted hexagon has no fixed slopes for the text to follow, so the
   lines follow its INSCRIBED CIRCLE instead, which is the same at every
   rotation: the two invisible floats carry a polygon tracing the outside of
   that circle (radius 46.5% of the box height; the hexagon's own incircle
   is 49%), so each line wraps to the circle's chord at its own height -- narrow
   at the top and bottom, wide in the middle. The flow only runs top-down,
   so the inline script under the services markup (the last row on the
   page, so it sees every .eko4-tilt-hex) centres the content vertically
   (padding-top on the icon). No JS: the estimate below; no shape-outside:
   the flex-centred fallback. The content keeps the theme's .down_hex_* /
   .hex-* class names for its white text; the benefits hexes simply have no
   button.

   SIZES: 345x312px boxes (the SVG's 260:235.5 aspect), set as custom
   properties on the row so the grid tracks and the boxes share them; on
   phones the width follows the screen (viewport minus 56px). LAYOUT: a grid whose columns are 70px
   narrower than the boxes, so each box overlaps the next (flex wrapping
   would let three fit a tablet row). >=1200 one zig-zag row of four (2nd
   and 4th 150px lower; 3x275+345 = 1170, the row's width with the column
   padding cancelled); 680-1199 two such rows, the 3rd box directly under
   the 1st and the 4th under the 2nd; below 680 one column with alternating
   side offsets and a 24px vertical overlap.
   OVERLAP vs TEXT: a later box paints over the one before it, so the
   neighbour must never reach the text circle. Centre distance between
   neighbours is sqrt(275^2 + 150^2) = 313px = text radius 145 + the
   hexagon's corner radius 168 -- whatever the rotations, the shapes only
   ever overlap at their corners (up to ~23px), outside the text; on phones
   the 24px overlap keeps 11px clear of the tallest content. */
.eko4-tilt-section { position: relative; padding-top: 10px; }
.eko4-tilt-title {
	font-family: 'Montserrat', sans-serif;
	font-size: 32px;
	font-weight: 500;
	line-height: 1.2;
	color: #525252;
	text-align: center;
	margin: 0 0 34px;
}
.eko4-tilt-row {
	--eko4-hex-w: 345px;
	--eko4-hex-h: calc(var(--eko4-hex-w) * 0.9058);
	display: grid;
	grid-template-columns: repeat(3, calc(var(--eko4-hex-w) - 70px)) var(--eko4-hex-w);
	justify-content: center;
	align-items: start;
	margin: 0 -15px;
	padding-bottom: 40px;
}
.eko4-tilt-hex {
	--eko4-hex-rot: 0deg;
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: var(--eko4-hex-w);
	height: var(--eko4-hex-h);
	padding: 0 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #fff;
}
.eko4-tilt-hex::before {
	content: '';
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: -1;
	background: url(/wp-content/themes/Marine/normal-pages/img/hexagon-soft-gray.svg) center / 100% 100% no-repeat;
	transform: rotate(var(--eko4-hex-rot));
	filter: drop-shadow(0 12px 18px rgba(28, 29, 31, 0.32)) drop-shadow(0 0 10px rgba(87, 88, 91, 0.28));
}
/* one tilt, taking turns like the counters (the counter PNG is a pointy-top
   hexagon at 45/70/80/50deg, i.e. +15/-20/-10/+20 from flat-top): clockwise,
   anticlockwise, clockwise, anticlockwise */
.eko4-tilt-hex-1 { --eko4-hex-rot: 16deg;  z-index: 1; }
.eko4-tilt-hex-2 { --eko4-hex-rot: -16deg; z-index: 2; }
.eko4-tilt-hex-3 { --eko4-hex-rot: 16deg;  z-index: 3; }
.eko4-tilt-hex-4 { --eko4-hex-rot: -16deg; z-index: 4; }
/* logo red (#E43030) variant: same shape, red gradient, red-tinted shadow */
.eko4-tilt-red .eko4-tilt-hex::before {
	background-image: url(/wp-content/themes/Marine/normal-pages/img/hexagon-soft-red.svg);
	filter: drop-shadow(0 12px 18px rgba(110, 16, 16, 0.30)) drop-shadow(0 0 10px rgba(228, 48, 48, 0.30));
}
/* the order button under the benefits row: the theme's red pill
   (.red-universal-cta-btn a), centred in normal flow instead of absolutely
   positioned in the notch between the old hexagons */
.eko4-tilt-ctarow { text-align: center; padding: 0 0 40px; }
.eko4-tilt-cta {
	display: inline-block;
	background: #eb3136;
	color: #fff;
	padding: 20px 40px;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	border-radius: 50px;
	transition: 0.2s all;
}
.eko4-tilt-cta:hover, .eko4-tilt-cta:focus { background: #c70f14; color: #fff; }
/* content (the theme's .down_hex_* / .hex-* rules give the white text and
   the red pill; sizes and spacing are set here) */
.eko4-tilt-hex .down_hex_icon { display: block; width: auto; margin: 0 0 6px; line-height: 0; }
.eko4-tilt-hex .down_hex_icon img { width: 44px; height: auto; display: inline-block; }
.eko4-tilt-hex p.hex-title { padding-top: 0; margin: 0 0 6px; font-size: 16px; line-height: 1.25; color: #fff; }
.eko4-tilt-hex .down_hex_text { color: #fff; }
.eko4-tilt-hex .down_hex_desc { display: block; font-size: 13px; line-height: 1.3; font-weight: 600; color: #fff; }
.eko4-tilt-hex a.hex-link { margin-top: 8px; padding: 8px 16px; font-size: 13px; }
.eko4-tilt-hex .eko4-hex-shape { display: none; }
@supports (shape-outside: polygon(0 0, 1% 1%, 0 100%)) {
	.eko4-tilt-hex { display: block; padding: 0; }
	.eko4-tilt-hex .eko4-hex-shape { display: block; width: 50%; height: 100%; }
	.eko4-tilt-hex .eko4-hex-shape-l {
		float: left;
		shape-outside: polygon(0% 0%, 100% 0%, 100.0% 3.5%, 78.2% 5.1%, 57.9% 9.7%, 40.5% 17.1%, 27.1% 26.7%, 18.7% 38.0%, 15.8% 50.0%, 18.7% 62.0%, 27.1% 73.2%, 40.5% 82.9%, 57.9% 90.3%, 78.2% 94.9%, 100.0% 96.5%, 100% 100%, 0% 100%);
	}
	.eko4-tilt-hex .eko4-hex-shape-r {
		float: right;
		shape-outside: polygon(100% 0%, 0% 0%, 0.0% 3.5%, 21.8% 5.1%, 42.1% 9.7%, 59.5% 17.1%, 72.9% 26.7%, 81.3% 38.0%, 84.2% 50.0%, 81.3% 62.0%, 72.9% 73.2%, 59.5% 82.9%, 42.1% 90.3%, 21.8% 94.9%, 0.0% 96.5%, 0% 100%, 100% 100%);
	}
	/* no-JS estimate: the content runs ~225px tall in the 312px box */
	.eko4-tilt-hex .down_hex_icon { padding-top: 43px; }
}
/* layout: one zig-zag row of four (the 2nd and 4th lower) */
.eko4-tilt-row .eko4-tilt-hex-2, .eko4-tilt-row .eko4-tilt-hex-4 { margin-top: 150px; }
@media (max-width: 1199px) {
	/* two rows of two: the first grid row is 462px tall (the lowered 2nd
	   box), so -150px puts the 3rd box right under the 1st */
	.eko4-tilt-row { grid-template-columns: calc(var(--eko4-hex-w) - 70px) var(--eko4-hex-w); }
	.eko4-tilt-row .eko4-tilt-hex-3 { margin-top: -150px; }
	.eko4-tilt-row .eko4-tilt-hex-4 { margin-top: 0; }
}
@media (max-width: 679px) {
	/* one column, each box overlapping the one above, weaving left/right */
	.eko4-tilt-row {
		--eko4-hex-w: min(345px, calc(100vw - 56px));
		grid-template-columns: var(--eko4-hex-w);
	}
	.eko4-tilt-row .eko4-tilt-hex + .eko4-tilt-hex { margin-top: -24px; }
	.eko4-tilt-row .eko4-tilt-hex-1, .eko4-tilt-row .eko4-tilt-hex-3 { transform: translateX(-12px); }
	.eko4-tilt-row .eko4-tilt-hex-2, .eko4-tilt-row .eko4-tilt-hex-4 { transform: translateX(12px); }
}
@media (max-width: 359px) {
	/* the smallest phones: the box is under 305px wide, so the text shrinks
	   a step to keep the longest description inside the circle */
	.eko4-tilt-hex .down_hex_icon img { width: 40px; }
	.eko4-tilt-hex p.hex-title { font-size: 15px; }
	.eko4-tilt-hex .down_hex_desc { font-size: 12px; line-height: 1.3; }
	.eko4-tilt-hex a.hex-link { margin-top: 6px; padding: 7px 14px; font-size: 12px; }
	.eko4-tilt-row .eko4-tilt-hex-1, .eko4-tilt-row .eko4-tilt-hex-3 { transform: translateX(-8px); }
	.eko4-tilt-row .eko4-tilt-hex-2, .eko4-tilt-row .eko4-tilt-hex-4 { transform: translateX(8px); }
}

/* ==========================================================================
   Gambit image-parallax replacement: all three parallax rows used the plugin
   with data-velocity='-0' data-direction='fixed', i.e. a fixed background.
   The two CTA rows already carry their background image via the frozen
   vc_custom rules above and only need background-attachment:fixed; the
   "Some of our clients" row (.vc_row-no-padding, unique on this page) got
   its image entirely from the plugin, so it is set here (the faded look
   comes from the row's own rgba(255,255,255,.7) column fill). The plugin's
   empty positioning divs are hidden and its assets are dequeued on
   custom-chrome pages. */
.parallax-cta-row { background-attachment: fixed !important; }
/* :not(.maps-row) -- the "Near you" locations row carries vc_row-no-padding
   too and must NOT get the clients-section photo. */
.vc_row.vc_row-no-padding:not(.maps-row) {
	background-image: url(/wp-content/uploads/bfi_thumb/customer-service-awarded-translation-agency-pdhjia561z7bz1mqk8hqamnbuepq0likr24xwss5jk.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}
.bg-parallax.gambit-bg-parallax { display: none; }
@media (max-width: 1024px) {
	/* iOS ignores background-attachment:fixed; scroll is what the plugin
	   fell back to on mobile as well (data-mobile-enabled off). */
	.parallax-cta-row, .vc_row.vc_row-no-padding:not(.maps-row) { background-attachment: scroll !important; }
}

/* FAQ row (7 September 2026, competitive audit): same accordion the
   document and language pages use, so the homepage carries a visible Q&A
   behind its FAQPage schema. */
.eko4-faq-row { padding: 54px 0 150px; }
.eko4-faq-row .section-title h2 { margin-bottom: 0; }
.eko4-faq { margin: 30px auto 0; max-width: 1100px; }
.eko4-faq-item { border-bottom: 1px solid #E4EFE9; }
.eko4-faq-item summary { cursor: pointer; padding: 18px 40px 18px 0; position: relative; list-style: none; }
.eko4-faq-item summary::-webkit-details-marker { display: none; }
.eko4-faq-item summary h3 { display: inline; font-size: 17px; line-height: 27px; color: #23323a; font-weight: 600; margin: 0; }
.eko4-faq-item summary::after { content: ''; position: absolute; right: 8px; top: 26px; width: 10px; height: 10px; border-right: 2px solid #237049; border-bottom: 2px solid #237049; transform: rotate(45deg); transition: transform .2s; }
.eko4-faq-item[open] summary::after { transform: rotate(-135deg); top: 30px; }
.eko4-faq-item[open] summary h3 { color: #237049; }
.eko4-faq-a { padding: 0 40px 20px 0; }
.eko4-faq-a p { font-size: 16px; line-height: 28px; color: #58595b; margin: 0; }
.eko4-faq-a a { color: #237049; text-decoration: underline; }