/* ----------------------------------------------------------------
	Freelancer demo: scoped styles.
	1:1 port of the demo source stylesheet (body byte-identical);
	this header replaces the source banner (purpose-only).
	Theme colour #f7c25e; body font Heebo; secondary PT Serif;
	--cnvs-heading-color #333. Loaded demo-scoped by inc/demos.php
	when the freelancer demo is active for the request.
-----------------------------------------------------------------*/

:root {
	--cnvs-themecolor: #f7c25e;
	--cnvs-themecolor-rgb: 247, 194, 94;

	--cnvs-body-font: 'Heebo', sans-serif;
	--cnvs-secondary-font: 'PT Serif', serif;

	--cnvs-heading-color: #333;
}

/* Default all demo images to object-fit:cover so a fixed-aspect container crops
   to fill instead of the browser default `fill` (which stretches/distorts).
   Inert on natural-aspect images (height:auto icons/logos); it only changes
   images whose box aspect differs from the source, exactly the resize cases. */
.freelancer img {
	object-fit: cover;
}

.testi-content p,
.team-title span,
.before-heading,
.font-secondary { font-family: var(--cnvs-secondary-font) !important; }

* {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.gradient-red-yellow,
.h-gradient-red-yellow:hover {
	background-image:  -webkit-linear-gradient(110.78deg, rgb(118, 230, 80) -1.13%, rgb(249, 214, 73) 15.22%, rgb(240, 142, 53) 32.09%, rgb(236, 81, 87) 48.96%, rgb(255, 24, 189) 67.94%, rgb(26, 75, 255) 85.34%) !important;
	background-image: linear-gradient(110.78deg, rgb(118, 230, 80) -1.13%, rgb(249, 214, 73) 15.22%, rgb(240, 142, 53) 32.09%, rgb(236, 81, 87) 48.96%, rgb(255, 24, 189) 67.94%, rgb(26, 75, 255) 85.34%) !important;
}

.menu-item.current > .menu-link,
.menu-item:hover > .menu-link {
	background-image: -webkit-linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
    background-image: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.overflow-visible { overflow: visible !important; }
.rounded-10 { border-radius: 10px !important; }

#content p { line-height: 1.5; }

@media (min-width: 992px) {
	.section,
	#footer .footer-widgets-wrap {
		margin: 100px 0;
		padding: 100px 0;
	}
}

.menu-link {
	font-weight: 600;
	font-size: 0.925em;
}

.emphasis-title h1 {
	font-size: calc(8.82629vw + 12.9014px) !important;
	font-weight: 900;
}

.button-hero {
	padding: 23px 48px !important;
	font-size: 1rem;
	border-radius: 50px;
	box-shadow: 0px 13px 18px -14px rgba(0,0,0, 0.35);
}

.button.button-reveal.text-end i {
	opacity: 0;
	left: auto;
	right: 32px;
	background-color: transparent;
	transition: all .3s ease !important;
}

.button:hover.button-reveal.text-end i {
	opacity: 1;
	right: 18px;
	transform: translateX(-10px);
}

.counter.counter-xlarge {
	font-size: 4.5rem;
	letter-spacing: -2px;
}

.counter + span {
	font-size: 1.125rem;
	line-height: 1.3;
	margin: 0 0 0 12px;
	text-transform: lowercase;
}

.testi-content p {
	position: relative;
	font-style: normal;
	font-size: 1.25rem;
	margin-bottom: 25px;
}

.testimonials-carousel::before {
	content: "\e7ad";
	font-family: font-icons;
	position: absolute;
	top: -20px;
	left: 10px;
	font-size: 5rem;
	color: #EEE;
	z-index: 0;
}

.testi-meta img {
	width: 40px !important;
	margin-right: 10px;
}

.testi-meta::before { display: none; }

#oc-testi.owl-carousel .owl-dots {
	text-align: left;
	margin-left: 20px;
}

.portfolio-image img {
	border-radius: 10px;
}

.translatey-3,
.h-translatey-3:hover { transform: translateY(-3px) !important; }

.tf-ts {
	-webkit-transition: transform .3s ease;
	transition: transform .3s ease;
}

/* Service-card icons carry the source's height="50" attr, but WP's responsive
   img{height:auto} on block images (wp-image-*) overrides the attr → the SVG/PNG
   icons balloon to their intrinsic size. Honour the source height (auto width);
   only the service icons carry height="50", so this targets exactly them, in
   both the static home .card grid and the owl-carousel state. */
.freelancer img[height="50"] {
	height: 50px !important;
	width: auto !important;
}

.accordion-header {
	padding: 1.25rem 0;
	font-size: 1.125rem;
	font-weight: 700;
	border-top: 1px dotted #D5D5D5 !important;
	color: #AAA;
}

.accordion-content {
	padding-bottom: 2rem;
	padding-left: 30px;
}

.accordion-header.accordion-active { color: #222; }

/* Border Form Design
---------------------------------------------------------------------------- */

form label {
	text-transform: none;
	font-weight: 500;
	font-size: 1rem;
	letter-spacing: 0;
}

.form-control.border-form-control {
	--cnvs-input-btn-padding-y : 		5px;
	--cnvs-input-btn-padding-x :		0px;
	--cnvs-input-btn-font-size :		1.25rem;
	--cnvs-input-btn-border-width:      2px;
	--cnvs-input-btn-border-color:      rgba(0,0,0,0.07);
}


@-webkit-keyframes fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 7%, 0);
		transform: translate3d(0, 7%, 0);
	}

}
@keyframes fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 7%, 0);
		transform: translate3d(0, 7%, 0);
	}
}

/* ================================================================
	Freelancer demo: ADDITIVE (WordPress-only) styles.
	Everything above this banner is the 1:1 port of the source demo
	stylesheet. The rules below style WordPress-only surfaces the
	static source has no markup for: the designed canvas_portfolio
	SINGLE (single-portfolio-freelancer.html, container-aware like
	the demo pages) and the CPT / category ARCHIVES restyled toward
	the works-grid look. Demo tokens only; body-class scoped so
	nothing leaks off the demo or onto other portfolios.
	================================================================ */

/* ---- Portfolio single (uses .container, matching the demo pages) ---- */
.freelancer .fl-portfolio-single {
	padding-top: 60px;
	padding-bottom: 80px;
}
.freelancer .fl-ps-head { margin-bottom: 3rem; }
.freelancer .fl-ps-eyebrow {
	color: var(--cnvs-themecolor);
	font-weight: 700;
	margin-bottom: 1rem;
}
.freelancer .fl-ps-eyebrow a { color: inherit; }
.freelancer .fl-ps-title h1 {
	font: inherit;
	margin: 0;
	line-height: 1.1;
}
.freelancer .fl-ps-image img {
	width: 100%;
	border-radius: 12px;
}
.freelancer .fl-ps-body .lead { font-weight: 300; }
.freelancer .fl-ps-body h3 {
	font-weight: 700;
	margin-top: 2.25rem;
	margin-bottom: 0.75rem;
}
.freelancer .fl-ps-aside-title { margin-bottom: 1.25rem; }
.freelancer .fl-ps-aside .portfolio-meta__list { margin: 0; }
.freelancer .fl-ps-aside .portfolio-meta__list dt {
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 0.72rem;
	color: #999;
	margin-top: 1.1rem;
}
.freelancer .fl-ps-aside .portfolio-meta__list dd {
	font-weight: 600;
	margin: 0;
}
.freelancer .fl-ps-more .portfolio-related__heading {
	font-weight: 800;
	margin-bottom: 2rem;
}
/* The portfolio-related block emits __grid/__col classes but ships no layout
   CSS: provide the 3-up grid (was stacking 1-column). */
.freelancer .fl-ps-more .portfolio-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}
.device-sm .freelancer .fl-ps-more .portfolio-related__grid,
.device-xs .freelancer .fl-ps-more .portfolio-related__grid {
	grid-template-columns: 1fr;
}
.freelancer .fl-ps-more .portfolio-related__card { margin: 0; }
.freelancer .fl-ps-more .portfolio-related__thumb img { border-radius: 10px; }
.freelancer .fl-ps-more .portfolio-related__card { transition: transform 0.3s ease; }
.freelancer .fl-ps-more .portfolio-related__card:hover { transform: translateY(-3px); }
.freelancer .fl-ps-more .portfolio-related__title {
	font-weight: 700;
	margin-top: 0.85rem;
}

/* ---- Portfolio archives (CPT + category) → the works-grid look ---- */
.freelancer.post-type-archive-canvas_portfolio .grid-filter-wrap,
.freelancer.tax-canvas_portfolio_category .grid-filter-wrap { display: none; }

.freelancer.post-type-archive-canvas_portfolio .page-title,
.freelancer.tax-canvas_portfolio_category .page-title {
	padding-top: 3rem;
	padding-bottom: 2rem;
	background-color: #F4F4F4 !important;
}
.freelancer.post-type-archive-canvas_portfolio .page-title h1,
.freelancer.tax-canvas_portfolio_category .page-title h1 { font-weight: 800; }

.freelancer.post-type-archive-canvas_portfolio .portfolio-image,
.freelancer.tax-canvas_portfolio_category .portfolio-image {
	overflow: hidden;
	border-radius: 10px;
}
.freelancer.post-type-archive-canvas_portfolio .portfolio-image img,
.freelancer.tax-canvas_portfolio_category .portfolio-image img {
	border-radius: 10px;
	transition: transform 0.4s ease;
}
.freelancer.post-type-archive-canvas_portfolio .portfolio-item:hover .portfolio-image img,
.freelancer.tax-canvas_portfolio_category .portfolio-item:hover .portfolio-image img {
	transform: scale(1.04);
}
.freelancer.post-type-archive-canvas_portfolio .portfolio-desc h3,
.freelancer.tax-canvas_portfolio_category .portfolio-desc h3 {
	font-weight: 700;
	margin-top: 1rem;
	font-size: 1.15rem;
}
.freelancer.post-type-archive-canvas_portfolio .portfolio-desc h3 a,
.freelancer.tax-canvas_portfolio_category .portfolio-desc h3 a { color: var(--cnvs-heading-color); }
.freelancer.post-type-archive-canvas_portfolio .portfolio-desc span a,
.freelancer.tax-canvas_portfolio_category .portfolio-desc span a { color: var(--cnvs-themecolor); }