/* ==========================================================================
   Vcana Modern - design layer
   Loaded after Elementor's generated CSS. Content/layouts are untouched.
   Sections: 1 Fonts · 2 Tokens · 3 Base · 4 Typography · 5 Buttons · 6 Header
             7 Hero · 8 Cards & boxes · 9 Lists/accordion/tabs · 10 Media
             11 Forms · 12 Testimonials/carousels · 13 Blog · 14 Footer
             15 Utilities & motion · 16 Responsive
   ========================================================================== */

/* 1. FONTS (self-hosted, OFL licensed) ------------------------------------ */
@font-face {
	font-family: "Inter Variable";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter Variable";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Plus Jakarta Sans Variable";
	font-style: normal;
	font-display: swap;
	font-weight: 200 800;
	src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Plus Jakarta Sans Variable";
	font-style: normal;
	font-display: swap;
	font-weight: 200 800;
	src: url("../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2. TOKENS ---------------------------------------------------------------- */
:root {
	--vc-teal-950: #062c30;
	--vc-teal-900: #08373c;
	--vc-teal-800: #0b454b;
	--vc-teal-700: #0f5259;
	--vc-teal-600: #17717a;
	--vc-teal-200: #bfdcde;
	--vc-teal-100: #e1f0f1;
	--vc-teal-50: #f1f8f8;
	--vc-orange-700: #b4560a;
	--vc-orange-600: #c9650f;
	--vc-orange-500: #dd7821;
	--vc-orange-400: #ee9444;
	--vc-orange-100: #fdeedd;

	--vc-ink: #0f2427;
	--vc-text: #46585d;
	--vc-muted: #6b7d82;
	--vc-line: #e0e9eb;
	--vc-bg: #ffffff;
	--vc-bg-soft: #f5f9f9;

	--vc-r-s: 10px;
	--vc-r-m: 16px;
	--vc-r-l: 24px;
	--vc-r-pill: 999px;

	--vc-shadow-s: 0 1px 2px rgba(8, 55, 60, 0.06), 0 2px 6px rgba(8, 55, 60, 0.05);
	--vc-shadow-m: 0 12px 28px -12px rgba(8, 55, 60, 0.22), 0 2px 6px rgba(8, 55, 60, 0.05);
	--vc-shadow-l: 0 28px 56px -24px rgba(8, 55, 60, 0.34), 0 4px 10px rgba(8, 55, 60, 0.06);

	--vc-font-body: "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--vc-font-head: "Plus Jakarta Sans Variable", "Plus Jakarta Sans", "Inter Variable", ui-sans-serif, system-ui, sans-serif;

	--vc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--vc-wrap: 1200px;
}

/* 3. BASE ------------------------------------------------------------------ */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 110px;
	-webkit-text-size-adjust: 100%;
	/* the hero slider's off-canvas slides caused a horizontal scrollbar; clip (not hidden) keeps sticky working */
	overflow-x: clip;
}
body {
	overflow-x: clip;
	background: var(--vc-bg);
	color: var(--vc-text);
	font-family: var(--vc-font-body);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
::selection {
	background: var(--vc-teal-700);
	color: #fff;
}
img {
	height: auto;
}
:focus-visible {
	outline: 3px solid var(--vc-orange-500);
	outline-offset: 3px;
	border-radius: 4px;
}
.elementor-widget-slides,
.elementor-widget-media-carousel,
.elementor-widget-testimonial-carousel {
	overflow: hidden;
}

/* 4. TYPOGRAPHY ------------------------------------------------------------ */
/* body copy */
body,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-icon-list-text,
.elementor-image-box-description,
.elementor-icon-box-description,
.elementor-flip-box__layer__description,
.elementor-testimonial__text,
.elementor-slide-description,
.elementor-tab-content,
.elementor-accordion-content,
.elementskit-info-box p,
.elementor-widget-container p {
	font-family: var(--vc-font-body) !important;
}
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-image-box-description,
.elementor-icon-box-description {
	line-height: 1.75;
}
/* headings: one family + tighter tracking. Sizes/weights are deliberately NOT forced - the author picked
   them per widget (heading tags were used loosely), so we only unify the typeface and rhythm. */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-slide-heading,
.elementor-image-box-title,
.elementor-icon-box-title,
.elementor-flip-box__layer__title,
.elementor-testimonial__name,
.elementor-counter-number-wrapper,
.elementor-tab-title,
.elementor-accordion-title,
.elementskit-info-box-title,
.ekit-heading--title {
	font-family: var(--vc-font-head) !important;
	letter-spacing: -0.01em !important;
	text-wrap: balance;
}
.elementor-heading-title {
	line-height: 1.2;
}
/* page titles on inner pages: fluid, never below the authored size on desktop */
h1.elementor-heading-title {
	font-size: clamp(2rem, 1.2rem + 2.8vw, 3.4rem);
	line-height: 1.12;
	letter-spacing: -0.025em !important;
}
/* section titles: confident weight (several were authored at 500, which reads thin in this typeface) */
h1.elementor-heading-title,
h2.elementor-heading-title,
h3.elementor-heading-title {
	font-weight: 700 !important;
}
h2.elementor-heading-title {
	letter-spacing: -0.02em !important;
}
.elementor-widget-text-editor a {
	color: var(--vc-teal-700);
	text-decoration-color: color-mix(in srgb, var(--vc-teal-700) 35%, transparent);
	text-underline-offset: 3px;
	transition: color 0.2s var(--vc-ease), text-decoration-color 0.2s var(--vc-ease);
}
.elementor-widget-text-editor a:hover {
	color: var(--vc-orange-700);
	text-decoration-color: currentColor;
}

/* 5. BUTTONS --------------------------------------------------------------- */
.elementor-button,
.elementor-widget-button .elementor-button,
.elementor-slide-button,
.ekit-btn,
input[type="submit"],
button[type="submit"],
.elementor-field-type-submit .elementor-button {
	font-family: var(--vc-font-body) !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	border-radius: var(--vc-r-pill) !important;
	transition: transform 0.25s var(--vc-ease), box-shadow 0.25s var(--vc-ease), background-color 0.25s var(--vc-ease), color 0.25s var(--vc-ease), border-color 0.25s var(--vc-ease) !important;
}
.elementor-button:hover,
.elementor-slide-button:hover,
.ekit-btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--vc-shadow-m);
}
.elementor-button:active {
	transform: translateY(0);
	box-shadow: var(--vc-shadow-s);
}
/* solid (filled) buttons - Elementor's default fill is a flat teal */
.elementor-button.elementor-size-md,
.elementor-button.elementor-size-sm {
	padding-inline: 1.6em;
}

/* the author's "arrow" buttons (.btncss) draw a white chip with ::before that grows on hover - round + clip it to the pill */
.btncss a.elementor-button.elementor-button-link {
	overflow: hidden;
}
.btncss a.elementor-button.elementor-button-link::before {
	border-radius: var(--vc-r-pill);
}

/* 6. HEADER ---------------------------------------------------------------- */
/* The whole header (contact bar + logo/nav) stays pinned. The logo deliberately overlaps the contact bar,
   so the bar must not collapse. */
.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background: #fff;
	transition: box-shadow 0.3s var(--vc-ease);
}
.vc-scrolled .elementor-location-header {
	box-shadow: 0 10px 30px -14px rgba(8, 55, 60, 0.35);
}
.elementor-location-header .elementor-element-8e95a09 {
	font-size: 0.875rem;
}
/* main nav: give it room (the column was 634px, which wrapped "Contact" onto a second line) */
@media (min-width: 1025px) {
	.elementor-location-header .elementor-element-b411b21 .elementor-column.elementor-element-a07f58e {
		width: 24% !important;
	}
	.elementor-location-header .elementor-element-b411b21 .elementor-column.elementor-element-0069e0c {
		width: 50% !important;
	}
	.elementor-location-header .elementor-element-b411b21 .elementor-column.elementor-element-94c0fce {
		width: 26% !important;
	}
}
.elementskit-navbar-nav > li > a,
.ekit-wid-con .elementskit-navbar-nav > li > a {
	font-family: var(--vc-font-body) !important;
	font-weight: 600 !important;
	font-size: 0.95rem !important;
	letter-spacing: 0 !important;
	white-space: nowrap;
	transition: color 0.2s var(--vc-ease);
}
.elementskit-navbar-nav > li > a:hover,
.elementskit-navbar-nav > li.current-menu-item > a {
	color: var(--vc-orange-600) !important;
}
.elementskit-dropdown,
.elementskit-megamenu-panel {
	border-radius: var(--vc-r-m) !important;
	box-shadow: var(--vc-shadow-l) !important;
	border: 1px solid var(--vc-line) !important;
	overflow: hidden;
}
.hedr-btn .elementor-button {
	background: linear-gradient(135deg, var(--vc-teal-700), var(--vc-teal-900)) !important;
	color: #fff !important;
	border: 0 !important;
	padding: 12px 24px !important;
}
.hedr-btn .elementor-button:hover {
	background: linear-gradient(135deg, var(--vc-orange-500), var(--vc-orange-600)) !important;
}

/* 7. HERO ------------------------------------------------------------------ */
.bannerhero .swiper-slide-contents {
	max-width: none !important;
	padding-inline: max(24px, calc((100vw - var(--vc-wrap)) / 2)) !important;
	padding-right: 34% !important;
	box-sizing: border-box;
}
/* hero: the thin intro line is the slide heading; the big title lives in the description (author's markup) */
.bannerhero .elementor-slide-heading {
	font-size: clamp(1.2rem, 0.95rem + 1vw, 1.9rem) !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.01em !important;
	color: var(--vc-teal-700);
	margin-bottom: 0.15em;
}
.bannerhero .elementor-slide-description > span,
.main_slider_h2.bannerhero .elementor-slide-description span {
	display: block;
	font-family: var(--vc-font-head) !important;
	font-size: clamp(2.3rem, 1.15rem + 3.5vw, 3.9rem) !important;
	line-height: 1.08 !important;
	font-weight: 800 !important;
	letter-spacing: -0.03em;
	width: auto !important;
	max-width: 14em;
}
.bannerhero .elementor-slide-description > span > span,
.bannerhero .business_text {
	display: inline;
	font-family: var(--vc-font-head) !important; /* the author's CSS asks for "Inter", which isn't loaded under that name -> serif fallback */
	font-size: inherit !important;
	line-height: inherit !important;
	font-weight: inherit !important;
	letter-spacing: inherit;
}
.bannerhero .elementor-slide-description p {
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
	line-height: 1.65;
	color: var(--vc-text);
	max-width: 32em;
	margin-top: 0.9em;
}
.bannerhero .elementor-slide-button {
	background: linear-gradient(135deg, var(--vc-orange-500), var(--vc-orange-600)) !important;
	color: #fff !important;
	border: 0 !important;
	padding: 14px 30px !important;
	margin-top: 0.4em;
	box-shadow: 0 12px 24px -10px rgba(221, 120, 33, 0.6);
}
.bannerhero .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	opacity: 0.35;
	transition: width 0.3s var(--vc-ease), opacity 0.3s var(--vc-ease);
}
.bannerhero .swiper-pagination-bullet-active {
	width: 28px;
	border-radius: var(--vc-r-pill);
	opacity: 1;
}

/* inner-page title banners: the author set a 1450px container, so on most screens the title touched the viewport edge.
   Pad it so the title aligns with the 1200px content column at every width. */
.elementor-top-section.elementor-section-height-min-height > .elementor-container {
	box-sizing: border-box;
	padding-inline: max(24px, calc((min(100vw, 1450px) - var(--vc-wrap)) / 2));
}
@media (max-width: 767px) {
	.elementor-top-section.elementor-section-height-min-height > .elementor-container {
		padding-inline: 20px;
	}
}

/* 8. CARDS & BOXES --------------------------------------------------------- */
.elementor-widget-image-box .elementor-image-box-wrapper,
.elementor-widget-icon-box .elementor-icon-box-wrapper,
.elementor-widget-flip-box .elementor-flip-box__layer,
.elementskit-info-box {
	border-radius: var(--vc-r-m) !important;
}
.elementor-widget-image-box > .elementor-widget-container,
.elementor-widget-icon-box > .elementor-widget-container {
	transition: transform 0.35s var(--vc-ease), box-shadow 0.35s var(--vc-ease), background-color 0.35s var(--vc-ease);
	border-radius: var(--vc-r-m);
}
.elementor-widget-image-box > .elementor-widget-container:hover,
.elementor-widget-icon-box > .elementor-widget-container:hover {
	transform: translateY(-4px);
	box-shadow: var(--vc-shadow-m);
}
.elementor-widget-flip-box .elementor-flip-box__front,
.elementor-widget-flip-box .elementor-flip-box__back {
	border-radius: var(--vc-r-m) !important;
	overflow: hidden;
}
.elementor-widget-flip-box .elementor-flip-box {
	filter: drop-shadow(0 12px 18px rgba(8, 55, 60, 0.12));
}
.elementor-widget-counter .elementor-counter-number-wrapper {
	font-weight: 800 !important;
}

/* 9. LISTS / ACCORDION / TABS --------------------------------------------- */
.elementor-icon-list-text {
	font-weight: 500;
}
/* ElementsKit accordions bring their own card shadow; only round them to match the rest of the system */
.elementskit-accordion .elementskit-card {
	border-radius: var(--vc-r-m) !important;
	overflow: hidden;
}
/* Elementor core accordion (rare on this site) */
.elementor-accordion .elementor-accordion-item {
	border-radius: var(--vc-r-m) !important;
	overflow: hidden;
}

/* 10. MEDIA ---------------------------------------------------------------- */
.elementor-widget-image img,
.elementor-widget-image-box img {
	border-radius: var(--vc-r-m);
}
/* keep logos / icons / SVG artwork crisp and un-rounded */
.elementor-widget-image img[src$=".svg"],
.elementor-widget-image img[src*="logo" i],
.elementor-widget-image-box img[src$=".svg"],
.elementor-location-header img,
.elementor-location-footer img,
.clients img,
.elementor-widget-media-carousel img {
	border-radius: 0;
}

/* 11. FORMS ---------------------------------------------------------------- */
.elementor-field-group .elementor-field,
.elementor-field-group select,
.elementor-field-group textarea,
.wpcf7 input:not([type="submit"]),
.wpcf7 textarea {
	font-family: var(--vc-font-body) !important;
	border-radius: var(--vc-r-s) !important;
	border: 1.5px solid var(--vc-line) !important;
	background: #fff !important;
	padding: 0.85em 1em !important;
	transition: border-color 0.2s var(--vc-ease), box-shadow 0.2s var(--vc-ease);
}
.elementor-field-group .elementor-field:focus,
.elementor-field-group select:focus,
.elementor-field-group textarea:focus {
	border-color: var(--vc-teal-600) !important;
	box-shadow: 0 0 0 4px rgba(23, 113, 122, 0.15) !important;
	outline: none;
}
.elementor-field-label {
	font-weight: 600;
	color: var(--vc-ink);
}
.elementor-form .elementor-button[type="submit"] {
	background: linear-gradient(135deg, var(--vc-teal-700), var(--vc-teal-900)) !important;
	color: #fff !important;
	border: 0 !important;
	padding: 14px 32px !important;
}
.elementor-form .elementor-button[type="submit"]:hover {
	background: linear-gradient(135deg, var(--vc-orange-500), var(--vc-orange-600)) !important;
}

/* 12. TESTIMONIALS / CAROUSELS -------------------------------------------- */
.elementor-testimonial-wrapper {
	border-radius: var(--vc-r-l);
}
.swiper-pagination-bullet-active {
	background: var(--vc-teal-700);
}

/* 13. BLOG ----------------------------------------------------------------- */
.elementor-widget-posts .elementor-post,
.elementor-widget-archive-posts .elementor-post,
.elementskit-post-image-card {
	border-radius: var(--vc-r-m) !important;
	overflow: hidden;
	transition: transform 0.35s var(--vc-ease), box-shadow 0.35s var(--vc-ease);
}
.elementor-widget-posts .elementor-post:hover,
.elementor-widget-archive-posts .elementor-post:hover {
	transform: translateY(-4px);
	box-shadow: var(--vc-shadow-m);
}
.elementor-widget-theme-post-content,
.elementor-widget-theme-post-content p {
	font-size: 1.0625rem;
	line-height: 1.8;
}
/* single article: the template's container is 1450px with no gutters, so text ran edge to edge.
   Give long-form reading a centred ~820px column. */
.single-post .elementor-widget-theme-post-title,
.single-post .elementor-widget-post-info,
.single-post .elementor-widget-theme-post-content,
.single-post .elementor-widget-theme-post-featured-image,
.single-post .elementor-widget-post-comments {
	width: 100%;
	max-width: 820px;
	margin-inline: auto;
	padding-inline: 20px;
	box-sizing: border-box;
}
.single-post .elementor-widget-theme-post-content img {
	border-radius: var(--vc-r-m);
	height: auto;
	max-width: 100%;
}
.single-post .elementor-widget-theme-post-content h2,
.single-post .elementor-widget-theme-post-content h3 {
	font-family: var(--vc-font-head);
	letter-spacing: -0.015em;
	margin-top: 1.6em;
}

/* 14. FOOTER --------------------------------------------------------------- */
.elementor-location-footer {
	position: relative;
}
.elementor-location-footer::before {
	content: "";
	display: block;
	height: 4px;
	background: linear-gradient(90deg, var(--vc-teal-700), var(--vc-orange-500));
}
.elementor-location-footer a {
	transition: color 0.2s var(--vc-ease);
}
.elementor-location-footer a:hover {
	color: var(--vc-orange-600) !important;
}

/* back-to-top plugin button */
#to_top_scrollup,
.ui-to-top {
	border-radius: var(--vc-r-pill) !important;
	box-shadow: var(--vc-shadow-m) !important;
}

/* 15. UTILITIES & MOTION --------------------------------------------------- */
.vc-js .vc-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s var(--vc-ease), transform 0.7s var(--vc-ease);
	transition-delay: calc(var(--vc-i, 0) * 70ms);
	will-change: opacity, transform;
}
.vc-js .vc-reveal.is-in {
	opacity: 1;
	transform: none;
	will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.vc-js .vc-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* 16. RESPONSIVE ----------------------------------------------------------- */
@media (max-width: 1024px) {
	.bannerhero .swiper-slide-contents {
		padding-right: 24px !important;
	}
	html {
		scroll-padding-top: 80px;
	}
}
@media (max-width: 767px) {
	body {
		font-size: 15.5px;
	}
	.elementor-button {
		padding: 13px 24px !important;
	}
	.bannerhero .swiper-slide-contents {
		padding-inline: 20px !important;
	}
}