/**
 * WebTradeIndex design layer (2026-11-06), loaded by ../wti-design.php after the theme and Directorist CSS.
 * Palette: primary #1E6FD9, hover #0B4FA8, navy #0B2545, text #3A4A5C, light accent #5BB8F5,
 * section background #EAF4FD, borders #D3E3F3. Headings Poppins, body Inter.
 * Generated from design.css.tpl (the two SVG data URIs are filled in at build time).
 */
:root {
	--wti-blue: #1E6FD9;
	--wti-blue-dark: #0B4FA8;
	--wti-navy: #0B2545;
	--wti-text: #3A4A5C;
	--wti-sky: #5BB8F5;
	--wti-bg: #EAF4FD;
	--wti-border: #D3E3F3;
	--wti-radius: 14px;
	--wti-shadow: 0 2px 10px rgba(11, 37, 69, .05);
	--wti-shadow-hover: 0 14px 30px rgba(11, 37, 69, .13);
	--directorist-color-primary: #1E6FD9;
	--directorist-color-body: #3A4A5C;
	--directorist-color-border: #D3E3F3;
}

body { color: var(--wti-text); font-family: 'Inter', sans-serif; }
h1, h2, h3, h4, h5, h6,
.theme-section-title__title,
.directorist-listing-title,
.directorist-single-listing-header__listing-title,
.directorist-search-top__title { font-family: 'Poppins', sans-serif; color: var(--wti-navy); letter-spacing: -.01em; }
a { transition: color .15s; }

/* ---------- header: slim, white, hides on scroll down (wti-design.js) ---------- */
#site-header { background: rgba(255, 255, 255, .96); backdrop-filter: saturate(160%) blur(8px); -webkit-backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid transparent; transition: transform .28s ease, box-shadow .2s, border-color .2s; z-index: 1000; }
#site-header.wti-scrolled { border-bottom-color: var(--wti-border); box-shadow: 0 4px 18px rgba(11, 37, 69, .06); }
#site-header.wti-hidden { transform: translateY(-100%); }
#site-header .theme-header-logo-inner .theme-header-logo-brand img { max-width: none; height: 40px; width: auto; }
.site-footer img[src*="webtradeindex-logo"] { max-width: none !important; height: 36px !important; width: auto !important; margin-bottom: 6px; }
#site-header .theme-header-menu-area .menu > li > a { font-weight: 500; }
#site-header .theme-header-menu-area .menu > li.current-menu-item > a,
#site-header .theme-header-menu-area .menu > li > a:hover { color: var(--wti-blue); }

/* ---------- homepage hero: brand gradient + W-i mark from lines and circles ---------- */
.wti-hero { position: relative; overflow: hidden;
	background-color: var(--wti-navy) !important;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpolyline points=%2220,34 35,72 50,41.6 65,72 80,34%22 fill=%22none%22 stroke=%22%23fff%22 stroke-opacity=%22.10%22 stroke-width=%227%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpolyline points=%2220,34 35,72 50,41.6 65,72 80,34%22 fill=%22none%22 stroke=%22%235BB8F5%22 stroke-opacity=%22.35%22 stroke-width=%221%22 stroke-dasharray=%222 3%22/%3E%3Ccircle cx=%2220%22 cy=%2234%22 r=%224.2%22 fill=%22%230B2545%22 stroke=%22%235BB8F5%22 stroke-opacity=%22.55%22 stroke-width=%221.6%22/%3E%3Ccircle cx=%2235%22 cy=%2272%22 r=%224.2%22 fill=%22%230B2545%22 stroke=%22%235BB8F5%22 stroke-opacity=%22.55%22 stroke-width=%221.6%22/%3E%3Ccircle cx=%2250%22 cy=%2241.6%22 r=%224.2%22 fill=%22%230B2545%22 stroke=%22%235BB8F5%22 stroke-opacity=%22.55%22 stroke-width=%221.6%22/%3E%3Ccircle cx=%2265%22 cy=%2272%22 r=%224.2%22 fill=%22%230B2545%22 stroke=%22%235BB8F5%22 stroke-opacity=%22.55%22 stroke-width=%221.6%22/%3E%3Ccircle cx=%2280%22 cy=%2234%22 r=%224.2%22 fill=%22%230B2545%22 stroke=%22%235BB8F5%22 stroke-opacity=%22.55%22 stroke-width=%221.6%22/%3E%3Ccircle cx=%2250%22 cy=%2220%22 r=%226.5%22 fill=%22%235BB8F5%22 fill-opacity=%22.45%22/%3E%3Ccircle cx=%2250%22 cy=%2220%22 r=%2211%22 fill=%22none%22 stroke=%22%235BB8F5%22 stroke-opacity=%22.25%22 stroke-width=%221%22/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22120%22 viewBox=%220 0 120 120%22%3E%3Cg stroke=%22%235BB8F5%22 stroke-opacity=%22.10%22 stroke-width=%221%22 fill=%22none%22%3E%3Cpath d=%22M10 20 L60 45 L110 15 M60 45 L45 100 L100 85%22/%3E%3C/g%3E%3Cg fill=%22%235BB8F5%22 fill-opacity=%22.18%22%3E%3Ccircle cx=%2210%22 cy=%2220%22 r=%222%22/%3E%3Ccircle cx=%2260%22 cy=%2245%22 r=%222.6%22/%3E%3Ccircle cx=%22110%22 cy=%2215%22 r=%222%22/%3E%3Ccircle cx=%2245%22 cy=%22100%22 r=%222%22/%3E%3Ccircle cx=%22100%22 cy=%2285%22 r=%222.3%22/%3E%3C/g%3E%3C/svg%3E"),
		radial-gradient(1200px 500px at 85% 0%, rgba(91, 184, 245, .28), transparent 60%),
		linear-gradient(135deg, #0B2545 0%, #0E3A73 55%, #1E6FD9 100%) !important;
	background-repeat: no-repeat, repeat, no-repeat, no-repeat !important;
	background-size: 210px auto, 120px 120px, auto, auto !important;
	/* mark centred in the free space right of the 920px search box */
	background-position: right max(24px, calc((100vw - 920px) / 4 - 105px)) center, 0 0, 0 0, 0 0 !important;
	padding: 120px 0 110px !important; }
.wti-hero .directorist-search-form { max-width: 920px; margin-left: auto; margin-right: auto; }
@media (min-width: 768px) {
	.wti-hero .directorist-search-form input::placeholder, .wti-hero .directorist-search-form label { white-space: nowrap; }
	/* keyword field gets the extra width so "Search for indexed companies" fits */
	.wti-hero .directorist-search-form__top .directorist-search-query { flex: 1.45 1 0; min-width: 0; }
	.wti-hero .directorist-search-form__top .directorist-search-location, .wti-hero .directorist-search-form__top .directorist-search-field:not(.directorist-search-query) { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 1399px) {
	/* no room beside the search box: drop the mark, keep the rest */
	.wti-hero { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22120%22 viewBox=%220 0 120 120%22%3E%3Cg stroke=%22%235BB8F5%22 stroke-opacity=%22.10%22 stroke-width=%221%22 fill=%22none%22%3E%3Cpath d=%22M10 20 L60 45 L110 15 M60 45 L45 100 L100 85%22/%3E%3C/g%3E%3Cg fill=%22%235BB8F5%22 fill-opacity=%22.18%22%3E%3Ccircle cx=%2210%22 cy=%2220%22 r=%222%22/%3E%3Ccircle cx=%2260%22 cy=%2245%22 r=%222.6%22/%3E%3Ccircle cx=%22110%22 cy=%2215%22 r=%222%22/%3E%3Ccircle cx=%2245%22 cy=%22100%22 r=%222%22/%3E%3Ccircle cx=%22100%22 cy=%2285%22 r=%222.3%22/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(1200px 500px at 85% 0%, rgba(91, 184, 245, .28), transparent 60%), linear-gradient(135deg, #0B2545 0%, #0E3A73 55%, #1E6FD9 100%) !important;
		background-repeat: repeat, no-repeat, no-repeat !important; background-size: 120px 120px, auto, auto !important; background-position: 0 0, 0 0, 0 0 !important; padding: 80px 0 70px !important; }
}
.wti-hero > .elementor-background-overlay { display: none !important; }
.wti-hero .directorist-search-top__title { color: #fff; font-size: clamp(32px, 4.4vw, 52px); font-weight: 700; line-height: 1.12; }
.wti-hero .directorist-search-top__subtitle { color: #D3E3F3; font-size: 18px; }

/* search box */
.directorist-search-form__box { border-radius: 16px !important; box-shadow: 0 18px 40px rgba(6, 20, 45, .25) !important; border: 0 !important; }
.directorist-btn-search,
.directorist-search-form-action__submit .directorist-btn { background: var(--wti-blue) !important; border-color: var(--wti-blue) !important; border-radius: 12px !important; font-weight: 600; }
.directorist-btn-search:hover { background: var(--wti-blue-dark) !important; border-color: var(--wti-blue-dark) !important; }

/* ---------- section titles + "see all" buttons ---------- */
.theme-section-title__title { font-weight: 700; }
.theme-section-title__title::after { content: ''; display: block; width: 46px; height: 4px; margin: 14px auto 0; border-radius: 4px; background: linear-gradient(90deg, var(--wti-blue), var(--wti-sky)); }
.elementor-53 .elementor-button { background: transparent !important; color: var(--wti-blue) !important; border: 1.5px solid var(--wti-blue) !important; border-radius: 999px !important; padding: 11px 26px !important; font-weight: 600 !important; text-decoration: none !important; transition: background .15s, color .15s; }
.elementor-53 .elementor-button:hover { background: var(--wti-blue) !important; color: #fff !important; }
.elementor-53 .elementor-button .elementor-button-text { text-decoration: none !important; }

/* light-blue band for alternating sections (instead of the theme grey) */
.elementor-53 .elementor-section[style*="background"], .elementor-53 .elementor-element-accccfe { background-color: var(--wti-bg) !important; }

/* ---------- listing cards ---------- */
.directorist-listing-single.directorist-listing-card { border-radius: var(--wti-radius) !important; border: 1px solid var(--wti-border) !important; box-shadow: var(--wti-shadow) !important; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s; background: #fff; }
.directorist-listing-single.directorist-listing-card:hover { transform: translateY(-4px); box-shadow: var(--wti-shadow-hover) !important; border-color: #BCD6F2 !important; }
.directorist-listing-single .directorist-listing-title a { color: var(--wti-navy); font-weight: 600; }
.directorist-listing-single .directorist-listing-title a:hover { color: var(--wti-blue); }
.directorist-listing-single__meta { border-top: 1px solid #EEF4FB !important; }
.directorist-listing-single .directorist-listing-category a { color: var(--wti-blue) !important; font-weight: 500; }
.directorist-listing-single .directorist-listing-category .directorist-icon-mask:after { background-color: var(--wti-blue) !important; }
.directorist-listing-single .directorist-listing-category > a > .directorist-icon-mask,
.directorist-listing-single .directorist-listing-category .directorist-icon-mask { background: var(--wti-bg) !important; }
.directorist-view-count { color: #6B7C90; font-size: 13px; font-weight: 500; }
.directorist-view-count .directorist-icon-mask:after { background-color: var(--wti-sky) !important; }
.directorist-listing-single__info__list .directorist-icon-mask:after { background-color: #7F93AA !important; }

/* ---------- country + category tiles ---------- */
.directorist-location__single { border-radius: var(--wti-radius) !important; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.directorist-location__single:hover { transform: translateY(-4px); box-shadow: var(--wti-shadow-hover); }
.directorist-location__single figure figcaption { background: linear-gradient(180deg, rgba(11, 37, 69, .05) 30%, rgba(11, 37, 69, .85) 100%) !important; }
.directorist-categories__single { border-radius: var(--wti-radius) !important; border: 1px solid var(--wti-border); overflow: hidden; background: #fff; transition: transform .18s ease, box-shadow .18s ease, border-color .18s; }
.directorist-categories__single:hover { transform: translateY(-4px); box-shadow: var(--wti-shadow-hover); border-color: #BCD6F2; }
.directorist-categories__single .cat-name, .directorist-categories__single .cat-box__bottom a { color: var(--wti-navy); font-weight: 600; }
.directorist-categories__single.atbd_category_no_image { background: linear-gradient(160deg, #EAF4FD 0%, #fff 70%); }

/* ---------- single listing page ---------- */
.directorist-single-listing-header { background: linear-gradient(180deg, var(--wti-bg), #fff); border-radius: var(--wti-radius); padding: 26px 28px !important; margin-top: 28px; }
.directorist-card { border-radius: var(--wti-radius) !important; border: 1px solid var(--wti-border) !important; box-shadow: var(--wti-shadow) !important; }
.directorist-card__header__title .directorist-icon-mask,
.directorist-card__header .directorist-icon-mask { background: var(--wti-bg) !important; }
.directorist-card__header .directorist-icon-mask:after { background-color: var(--wti-blue) !important; }
.directorist-single-listing-action .directorist-btn,
.directorist-listing-actions .directorist-btn { border-radius: 10px !important; border-color: var(--wti-border) !important; }
.directorist-listing-actions .directorist-btn:hover { border-color: var(--wti-blue) !important; color: var(--wti-blue) !important; }

/* ---------- footer: navy ---------- */
.site-footer { background: var(--wti-navy) !important; }
.site-footer .theme-footer-top-area { padding-top: 64px; }
.site-footer .widget-title, .site-footer h2, .site-footer h3, .site-footer h4 { color: #fff !important; font-family: 'Poppins', sans-serif; }
.site-footer, .site-footer p { color: #B8C7DA; }
.site-footer a { color: #D3E3F3; }
.site-footer a:hover { color: var(--wti-sky); }
.wti-footer-links { list-style: none; margin: 0; padding: 0; }
.wti-footer-links li { margin: 0 0 10px; }
.site-footer .theme-footer-bottom-area { border-top: 1px solid #1C3A5E; background: #081D37; }
.site-footer .theme-copyright-text { color: #8FA3BC; font-size: 14px; }

/* ---------- cookie bar ---------- */
#cookie-notice { background: var(--wti-navy) !important; font-family: 'Inter', sans-serif; }
#cookie-notice .cn-button { background: var(--wti-blue) !important; color: #fff !important; border-radius: 8px !important; }

/* ---------- small screens ---------- */
@media (max-width: 767px) {
	.wti-hero { padding: 44px 0 40px !important; }
	#site-header .theme-header-logo-inner .theme-header-logo-brand img { height: 34px; }
	.directorist-single-listing-header { padding: 18px 16px !important; }
}

/* ---------- homepage carousels: Countries + Categories (sections with class wti-carousel, arrows from design.js) ---------- */
.wti-carousel .directorist-location .directorist-row,
.wti-carousel .directorist-categories .directorist-row { flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-top: 8px; padding-bottom: 14px; margin-bottom: 0 !important; }
.wti-carousel .directorist-row::-webkit-scrollbar { display: none; }
.wti-carousel .directorist-row > [class*="directorist-col"] { flex: 0 0 25% !important; max-width: 25% !important; scroll-snap-align: start; margin-bottom: 0 !important; }
.wti-carousel .wti-car { position: relative; }
.wti-car__btn { position: absolute; top: 50%; z-index: 5; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; border: 1px solid var(--wti-border); background: #fff; color: var(--wti-navy); box-shadow: 0 6px 18px rgba(11, 37, 69, .14); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity .15s, background .15s, color .15s; padding: 0; }
.wti-car__btn:hover { background: var(--wti-blue); color: #fff; border-color: var(--wti-blue); }
.wti-car__btn[disabled] { opacity: 0; pointer-events: none; }
.wti-car__btn--prev { left: -22px; }
.wti-car__btn--next { right: -22px; }
.wti-car__btn svg { width: 18px; height: 18px; }
@media (max-width: 1024px) {
	.wti-carousel .directorist-row > [class*="directorist-col"] { flex-basis: 33.333% !important; max-width: 33.333% !important; }
	.wti-car__btn--prev { left: 4px; } .wti-car__btn--next { right: 4px; }
}
@media (max-width: 767px) {
	.wti-carousel .directorist-row > [class*="directorist-col"] { flex-basis: 78% !important; max-width: 78% !important; }
	.wti-car__btn { display: none; }
}
.wti-carousel .directorist-categories__single .cat-box__bottom, .wti-carousel .directorist-categories__single .cat-name { text-align: center; justify-content: center; }
/* the carousels have no title above them (removed 2026-11-06): tighter section spacing */
.elementor-53 .elementor-section.wti-carousel { padding-top: 36px !important; padding-bottom: 56px !important; }
@media (max-width: 767px) { .elementor-53 .elementor-section.wti-carousel { padding-top: 20px !important; padding-bottom: 36px !important; } }
.elementor-53 .elementor-element-d663ace { padding-bottom: 0 !important; }
.wti-carousel .directorist-location, .wti-carousel .directorist-categories, .wti-carousel .directorist-location .directorist-container-fluid, .wti-carousel .directorist-categories .directorist-container-fluid { margin-top: 0 !important; padding-top: 0 !important; }
.wti-carousel .elementor-widget-wrap > .elementor-element:first-child { margin-top: 0 !important; }

/* ---------- footer: one slim bar (child theme footer.php) + copyright bar, same height ---------- */
.wti-footer .wti-footer-bar { background: var(--wti-navy); border-top: 1px solid #1C3A5E; }
.wti-footer .wti-footer-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
.wti-footer .wti-footer-bar__logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.wti-footer .wti-footer-bar__logo img { height: 30px !important; width: auto !important; max-width: none !important; margin: 0 !important; }
.wti-footer .wti-footer-bar__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; }
.wti-footer .wti-footer-bar__links li { margin: 0; }
.wti-footer .wti-footer-bar__links a { color: #D3E3F3; font-size: 14px; font-weight: 500; text-decoration: none; }
.wti-footer .wti-footer-bar__links a:hover { color: var(--wti-sky); }
.wti-footer .wti-footer-bar__btn { flex: 0 0 auto; display: inline-flex; align-items: center; height: 38px; padding: 0 20px; border-radius: 999px; background: var(--wti-blue); color: #fff !important; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .15s; }
.wti-footer .wti-footer-bar__btn:hover { background: var(--wti-blue-dark); color: #fff !important; }
.wti-footer .theme-footer-bottom-area { min-height: 64px; display: flex; align-items: center; padding: 10px 0 !important; }
.wti-footer .theme-footer-bottom-area .theme-container { width: 100%; }
.wti-footer .theme-copyright-text { text-align: center; margin: 0; }
@media (max-width: 767px) {
	.wti-footer .wti-footer-bar__inner { flex-direction: column; gap: 14px; padding-top: 22px; padding-bottom: 22px; }
	.wti-footer .wti-footer-bar__links { gap: 8px 18px; }
}
.wti-footer .theme-copyright-text { border-top: 0 !important; padding: 0 !important; }

/* ---------- inner page title banner: brand gradient instead of the theme's stock photo, shorter ---------- */
.banner.theme-banner-breadcrumb { background-color: var(--wti-navy) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22120%22 viewBox=%220 0 120 120%22%3E%3Cg stroke=%22%235BB8F5%22 stroke-opacity=%22.10%22 stroke-width=%221%22 fill=%22none%22%3E%3Cpath d=%22M10 20 L60 45 L110 15 M60 45 L45 100 L100 85%22/%3E%3C/g%3E%3Cg fill=%22%235BB8F5%22 fill-opacity=%22.18%22%3E%3Ccircle cx=%2210%22 cy=%2220%22 r=%222%22/%3E%3Ccircle cx=%2260%22 cy=%2245%22 r=%222.6%22/%3E%3Ccircle cx=%22110%22 cy=%2215%22 r=%222%22/%3E%3Ccircle cx=%2245%22 cy=%22100%22 r=%222%22/%3E%3Ccircle cx=%22100%22 cy=%2285%22 r=%222.3%22/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(900px 400px at 85% 0%, rgba(91, 184, 245, .28), transparent 60%), linear-gradient(135deg, #0B2545 0%, #0E3A73 55%, #1E6FD9 100%) !important;
	background-repeat: repeat, no-repeat, no-repeat !important; background-size: 120px 120px, auto, auto !important; background-position: 0 0, 0 0, 0 0 !important; }
.banner.theme-banner-breadcrumb::before, .banner.theme-banner-breadcrumb::after { display: none !important; }
.banner.theme-banner-breadcrumb .theme-banner-content { padding-top: 64px !important; padding-bottom: 64px !important; min-height: 0 !important; }
.banner.theme-banner-breadcrumb h1, .banner.theme-banner-breadcrumb .theme-banner-title { color: #fff !important; }
@media (max-width: 767px) { .banner.theme-banner-breadcrumb .theme-banner-content { padding-top: 40px !important; padding-bottom: 40px !important; } }

/* ---------- header: logo only (menu, mobile menu button and header search hidden, 2026-11-06).
   The Primary Menu stays assigned in Appearance > Menus; delete this block to show it again. ---------- */
#site-header .theme-menu-container,
#site-header .theme-main-navigation,
#site-header .theme-mobile-menu-trigger,
#site-header .theme-menu-action-box { display: none !important; }
#site-header .theme-header-menu-full { min-height: 0 !important; padding-top: 14px !important; padding-bottom: 14px !important; display: flex; align-items: center; }
#site-header .theme-header-menu-area, #site-header .theme-header-logo-wrap, #site-header .theme-header-logo-inner { min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }