/* Custom CSS */

#awwwards {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 999;

	width: 90px;
	height: 135px;

	text-indent: -666em;

	background-image: url(../img/root/awwwards_honorable_white.png);
	background-repeat: no-repeat;
	background-size: 90px 135px;

	overflow: hidden;
}

#wpselected {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;

	width: 90px;
	height: 90px;

	text-indent: -666em;

	background-image: url(../img/root/wpselected-badge-left.png);
	background-repeat: no-repeat;
	background-size: 90px 90px;

	overflow: hidden;
}

.ptf-custom--9135 .typed-cursor {
	color: #ee3364;
}

.ptf-custom--0531 {
	position: absolute;
	bottom: 15%;
	left: 130px;

	color: #0b0b0b;
	font-size: 35px;
}

.ptf-custom--9503::after {
	content: '';

	position: absolute;
	top: 50%;
	left: calc(100% + 30px);

	width: 0;
	max-width: 60px;
	height: 1px;

	background-color: #1f0e49;

	transition: width .5s 1s ease-in-out;
}

.ptf-is-page-loaded .ptf-custom--9503::after {
	width: 100%;
}

.ptf-custom--5832 {
	position: relative;
	z-index: 1;

	margin-right: 50px;
}

.ptf-custom--5832::after {
	content: '';

	position: absolute;
	top: -50px;
	right: -50px;
	z-index: -1;

	width: 100%;
	height: 100%;

	border: 10px solid #00bec5;
}

.ptf-custom--5832 {
	position: relative;
	z-index: 1;

	margin-right: 50px;
}

.ptf-custom--5832::after {
	content: '';

	position: absolute;
	top: -50px;
	right: -50px;
	z-index: -1;

	width: 100%;
	height: 100%;

	border: 10px solid #00bec5;
}

.ptf-custom--3103 .ptf-services-box__link {
	background-color: rgba(0,0,0,.25);
}

.ptf-custom--3103 .ptf-highlight {
	background: linear-gradient(to top, transparent 5%, rgba(0,0,0,.25) 5% , rgba(0,0,0,.25) 37%, transparent 37%);
}

.ptf-custom--4111 .ptf-swiper-pagination--style-1 span {
	background-color: #fff;
}

.ptf-custom--4111 .ptf-swiper-button-prev--style-2,
.ptf-custom--4111 .ptf-swiper-button-next--style-2 {
	color: #fff;
}

.ptf-custom--6632 {
	margin-top: -225px;
}

.ptf-custom--9917 .ptf-social-icons a:not(:hover) {
	color: #fff;
}

.ptf-advantage-box__content{
	background-color: rgba(5,9,31,0.5) !important;

	border-radius:0px;
}

.ptf-advantage-box__content-2{
	background-color: rgba(5,9,31,0.5) !important;
	border-right:0px solid #2d3c7d;
	border-radius:0px;
	padding: 3.4375rem .9375rem 2.8125rem;
}


.aboutheader{
	text-align:center;
}
.ln40{
	line-height:45px;
}


.ptf-timeline__title {
	font-family: var(--ptf-primary-font);
	font-weight: 100;
}

.ptf-divider{
	--ptf-color: var(--ptf-color-14);
	--ptf-height: 1px;
}


.ptf-custom--8681 .ptf-countdown h5,
.ptf-custom--8681 .ptf-countdown strong {
	color: #fff;
}

.ptf-custom--9511 .ptf-swiper-pagination--style-1 span {
	background-color: #fff;
}

.ptf-is--homepage-05 .ptf-header--default .ptf-navbar,
.ptf-is--homepage-05 .ptf-header--default .ptf-navbar.ptf-navbar--solid {
	background-color: #191919;
}

.ptf-is--homepage-11 .ptf-navbar {
	padding: 0 35px;
}

.ptf-is--homepage-11 .ptf-navbar .container {
	width: 100%;
}

/* min-width 768px */
@media (min-width: 768px) {
	.ptf-custom--5136 {
		padding-left: 70px;
	}
	.ptf-custom--8620 {
		padding-right: 70px !important;
	}
	.ptf-custom--5317 {
		padding: 0 30px !important;
	}
	.ptf-custom--5171 {
		padding-right: 70px;
	}
	.ptf-custom--7205 {
		margin-top: -100px;
	}
	.ptf-custom--8511 {
		padding-right: 85px;
	}
	.ptf-custom--6525 {
		position: relative;
		z-index: 2;
	}
}

/* max-width 767px */
@media (max-width: 767px) {
	#awwwards,
	#wpselected {
		display: none;
	}
	.ptf-custom--9135 h2 {
		font-size: 28px
	}
	.ptf-custom--1631 {
		font-size: 38px;
	}
}

/* max-width 991px */
@media (max-width: 991px) {
	.ptf-custom--9182 {
		font-size: 48px;
		line-height: 60px;
	}
	.ptf-custom--9182 {
		font-size: 48px;
		line-height: 60px;
	}
}

/* max-width 575px */
@media (max-width: 575px) {
	.ptf-custom-9182 {
		font-size: 38px;
		line-height: 50px;
	}
	.ptf-custom-9182 {
		font-size: 38px;
		line-height: 50px;
	}
	.ptf-custom--0531 {
		bottom: 5%;
	}
}


.ptf-footer--style-3 .ptf-footer__bottom{
	border-top:0px;
}
.ptf-mask-image img{
	border-radius:10px;
}
#tsparticles {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 0;
	pointer-events: none;
}

@keyframes pulse {
	0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
	50% { opacity: 0.7; transform: translateY(-50%) scale(1.05); }
}
.particle-box {
	width: 50vw;            /* adjust to control width */
	height: 100vh;          /* or whatever fits your layout */
	position: relative;
	overflow: hidden;

}

#particleCanvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#tsparticles {
	position: fixed;
	top: 0; left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 0;
}
.hero-canvas {
	/*width: 50%;*/
	height: 100vh;
	position: relative;

}


.ptf-is--home-minimal .ptf-site-wrapper__inner, .ptf-is--home-minimal body, .ptf-is--home-modern .ptf-site-wrapper__inner, .ptf-is--home-modern body {

	background-color: #05091f;
}

.ptf-is--home-modern .ptf-navbar, .ptf-is--home-modern .ptf-navbar.ptf-navbar--solid {
	/*background-color: #03071d;*/

	background-color: rgba(1, 7, 21, 0.9);
}



.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	font-family: var(--ptf-primary-font);
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
	padding: 0;
	color: #ffffff;
}


a{color#ffffff;}

.ptf-header--empty, .ptf-header--landing, .ptf-header--slide, .ptf-header--style-1, .ptf-header--style-2, .ptf-header--style-3, .ptf-header--style-4, .ptf-header--style-5, .ptf-header--style-6, .ptf-header--style-7, .ptf-header--style-8 {
	position: absolute;
	z-index: 30;
	top: 0;
	left: 0;
	width: 100%;
	color: #ffffff;
}


/*color:#fa472a; - orange that is kind of cool*/
#lottie-container{
	height:90vh;
}

.mainbutton{
	background-color: #fa472a;
	padding: 24px;
	border-radius: 15px;
	color: #fff;
	font-size:20px;
}
.mainbutton:hover{
	color:#ff9764;
	background-color: #732600;
}

.ptf-clients-list img{
	margin:0 auto;
	display:block;
}


<!-- HTML !-->
<button class="button-82-pushable" role="button">
<span class="button-82-shadow"></span>
<span class="button-82-edge"></span>
<span class="button-82-front text">
								  Button 82
</span>
</button>

	  /* CSS */
  .button-82-pushable {
	  position: relative;
	  border: none;
	  background: transparent;
	  padding: 0;
	  cursor: pointer;
	  outline-offset: 4px;
	  transition: filter 250ms;
	  user-select: none;
	  -webkit-user-select: none;
	  touch-action: manipulation;
  }

.button-82-shadow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	background: hsl(0deg 0% 0% / 0.25);
	will-change: transform;
	transform: translateY(2px);
	transition:
			transform
			600ms
			cubic-bezier(.3, .7, .4, 1);
}

.button-82-edge {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	background: linear-gradient(
			to left,
			hsl(340deg 100% 16%) 0%,
			hsl(340deg 100% 32%) 8%,
			hsl(340deg 100% 32%) 92%,
			hsl(340deg 100% 16%) 100%
	);
}

.button-82-front {
	display: block;
	position: relative;
	padding: 12px 27px;
	border-radius: 12px;
	font-size: 1.1rem;
	color: white;
	background: hsl(345deg 100% 47%);
	will-change: transform;
	transform: translateY(-4px);
	transition:
			transform
			600ms
			cubic-bezier(.3, .7, .4, 1);
}

@media (min-width: 768px) {
	.button-82-front {
		font-size: 1.25rem;
		padding: 12px 42px;
	}
}



<!-- HTML !-->
<button class="button-78" role="button">Button 78</button>

													   /* CSS */
												   .button-78 {
													   align-items: center;
													   appearance: none;
													   background-clip: padding-box;
													   background-color: initial;
													   background-image: none;
													   border-style: none;
													   box-sizing: border-box;
													   color: #fff;
													   cursor: pointer;
													   display: inline-block;
													   flex-direction: row;
													   flex-shrink: 0;
													   font-family: Eina01,sans-serif;
													   font-size: 16px;
													   font-weight: 800;
													   justify-content: center;
													   line-height: 24px;
													   margin: 0;
													   min-height: 64px;
													   outline: none;
													   overflow: visible;
													   padding: 19px 26px;
													   pointer-events: auto;
													   position: relative;
													   text-align: center;
													   text-decoration: none;
													   text-transform: none;
													   user-select: none;
													   -webkit-user-select: none;
													   touch-action: manipulation;
													   vertical-align: middle;
													   width: auto;
													   word-break: keep-all;
													   z-index: 0;
												   }

@media (min-width: 768px) {
	.button-78 {
		padding: 19px 32px;
	}
}

.button-78:before,
.button-78:after {
	border-radius: 80px;
}

.button-78:before {
	background-image: linear-gradient(92.83deg, #ff7426 0, #f93a13 100%);
	content: "";
	display: block;
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -2;
}

.button-78:after {
	background-color: initial;
	background-image: linear-gradient(#541a0f 0, #0c0d0d 100%);
	bottom: 4px;
	content: "";
	display: block;
	left: 4px;
	overflow: hidden;
	position: absolute;
	right: 4px;
	top: 4px;
	transition: all 100ms ease-out;
	z-index: -1;
}

.button-78:hover:not(:disabled):before {
	background: linear-gradient(92.83deg, rgb(255, 116, 38) 0%, rgb(249, 58, 19) 100%);
}

.button-78:hover:not(:disabled):after {
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	transition-timing-function: ease-in;
	opacity: 0;
}

.button-78:active:not(:disabled) {
	color: #ccc;
}

.button-78:active:not(:disabled):before {
	background-image: linear-gradient(0deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), linear-gradient(92.83deg, #ff7426 0, #f93a13 100%);
}

.button-78:active:not(:disabled):after {
	background-image: linear-gradient(#541a0f 0, #0c0d0d 100%);
	bottom: 4px;
	left: 4px;
	right: 4px;
	top: 4px;
}

.button-78:disabled {
	cursor: default;
	opacity: .24;
}


<!-- HTML !-->
<button class="button-51" role="button">Button 51</button>

													   /* CSS */
												   .button-51 {
													   background-color: transparent;
													   border: 1px solid #266DB6;
													   box-sizing: border-box;
													   color: #00132C;
													   font-family: "Avenir Next LT W01 Bold",sans-serif;
													   font-size: 16px;
													   font-weight: 700;
													   line-height: 24px;
													   padding: 16px 23px;
													   position: relative;
													   text-decoration: none;
													   user-select: none;
													   -webkit-user-select: none;
													   touch-action: manipulation;
												   }


.button {
	font-size: 18px;
	letter-spacing: 2px;
	text-transform: uppercase;
	display: inline-block;
	text-align: center;
	font-weight: bold;
	padding: 0.7em 2em;
	border: 3px solid #fa472a;
	border-radius: 7px;
	position: relative;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
	color: #fa472a;
	text-decoration: none;
	transition: 0.3s ease all;
	z-index: 1;
}

.button:before {
	transition: 0.5s all ease;
	position: absolute;
	top: 0;
	left: 50%;
	right: 50%;
	bottom: 0;
	opacity: 0;
	content: '';
	background-color: #fa472a;
	z-index: -1;
}

.button:hover, button:focus {
	color: white;
}

.button:hover:before, button:focus:before {
	transition: 0.5s all ease;
	left: 0;
	right: 0;
	opacity: 1;
}

.button:active {
	transform: scale(0.9);
}



.ptf-navbar.ptf-navbar--transparent {
	background: transparent;
	transition: background 0.3s ease, box-shadow 0.3s ease;
	box-shadow: none;
	margin-bottom:-100px;
}

/* Opaque scrolled state */
.ptf-navbar.scrolled {
	background: rgba(3, 7, 29, 0.95); /* Dark blue from your site */
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}



/* ===== Hero Background Video ===== */
.hero__video {
	position: absolute;         /* stays put as you scroll */
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;       /* fill without distortion */
	object-position: center;
	z-index: 0;              /* behind everything */
	pointer-events: none;    /* never intercept clicks */
	background: #0b0f14;     /* fallback behind poster/video */
	opacity:0.2;

}

.hero__scrim {
	position: fixed;
	inset: 0;
	z-index: 1;              /* above video, below content */
	pointer-events: none;
	background: radial-gradient(
			120% 80% at 50% 35%,
			rgba(0, 0, 0, 0.20) 0%,
			rgba(0, 0, 0, 0.65) 70%
	);
}

/* The *first* hero section (your existing first <section>) */
.hero__content-section {
	position: relative;
	z-index: 2;              /* above scrim/video */
	min-height: 100svh;      /* full viewport, mobile-friendly */
	display: flex;
	align-items: center;     /* vertical centering */
	padding-top: clamp(72px, 8vh, 120px); /* room for sticky header */
	padding-bottom: clamp(32px, 6vh, 80px);
	color: #eaf2ff;          /* ensure readable text */
}

/* Optional: make headings pop a bit over video */
.hero__content-section .large-heading {
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

/* Keep header above everything */

/* Respect reduced-motion users: disable the moving background */
@media (prefers-reduced-motion: reduce) {
	.hero__video { display: none; }
	.hero__scrim { display: none; }
	/* Static fallback look using your poster (swap path if needed) */
	.hero__content-section {
		background: #0b0f14 url("assets/video/hero-poster.jpg") center / cover no-repeat;
	}
}


.word-cycle {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
	white-space: nowrap;
}

/* Optional: make scrambling chars styled differently */
.word-cycle .scramble {
	opacity: 0.6;
}

/* Reduced motion: remove caret blink to keep it calmer */
@media (prefers-reduced-motion: reduce) {
	.word-cycle::after { animation: none; opacity: 0.6; }
}
:root{
	--arrow-default:#fa472a;  /* arrow before hover */
	--circle-bg:#fa472a;      /* circle color */
	--arrow-on-bg:#fff;       /* arrow on circle */
}

.arrow-link{
	position:relative;
	display:inline-grid;
	place-items:center;
	isolation:isolate;   /* creates a local stacking context */
	line-height:1;
	z-index:0;           /* baseline */
}

/* the circle behind the arrow */
.arrow-link::before{
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	width:2.2em;
	height:2.2em;
	border-radius:50%;
	background:var(--circle-bg);
	transform:translate(-50%,-50%) scale(0);  /* hidden, centered */
	opacity:0;
	transition:transform 260ms ease, opacity 260ms ease;
	z-index:-1;          /* << key: always behind the SVG */
	pointer-events:none;
}

/* the arrow icon */
.arrow-icon{
	width:1.1em;
	height:1.1em;
	fill:currentColor;
	color:var(--arrow-default);
	transform-origin:center;
	transform-box:fill-box;
	transition:transform 280ms ease, color 180ms ease;
	position:relative;
	z-index:1;          /* << on top of the circle */
}

/* hover/focus behavior */
.arrow-link:hover::before,
.arrow-link:focus-visible::before{
	transform:translate(-50%,-50%) scale(1);
	opacity:1;
}
.arrow-link:hover .arrow-icon,
.arrow-link:focus-visible .arrow-icon{
	transform:rotate(45deg);
	color:var(--arrow-on-bg);
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
	.arrow-icon{ transition:color 180ms ease; transform:none; }
	.arrow-link:hover .arrow-icon,
	.arrow-link:focus-visible .arrow-icon{ transform:none; }
}


:root{
	--footer-bg: #0b0f14;   /* deep background */
	--footer-ink: #eaf2ff;  /* text */
	--footer-mute:#9bb0c0;  /* subtle text */
	--footer-accent:#fa472a;/* your orange */
	--footer-navy:#21384b;  /* brand navy */
}

.site-footer{
	background: linear-gradient(0deg, var(--footer-bg), var(--footer-bg))
	padding-box,
	linear-gradient(90deg, transparent, rgba(250,71,42,.25), transparent) border-box;
	border-top: 1px solid rgba(255,255,255,0.06);
	color: var(--footer-ink);
	padding: clamp(32px, 6vw, 56px) 0;
}

.site-footer__grid{
	display: grid;
	grid-template-columns: 1.2fr .8fr .8fr;
	gap: clamp(16px, 3vw, 32px);
	align-items: start;
}

.footer-logo{
	font-weight: 100;
	margin: 0 0 8px;
	letter-spacing: .02em;
}
.footer-logo span{ font-weight: 600; color: var(--footer-accent); }

.footer-tagline{
	margin: 0;
	color: var(--footer-mute);
}

.footer-title{
	margin: 0 0 .75rem;
	font-size: 0.95rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--footer-mute);
}

.footer-links{ list-style: none; margin: 0; padding: 0; }
.footer-links li + li{ margin-top: .35rem; }
.footer-links a{
	display: inline-flex; align-items: center; gap: .5rem;
	color: var(--footer-ink); text-decoration: none;
	opacity: .9; transition: opacity .2s ease, transform .2s ease, color .2s ease;
}
.footer-links a:hover{ opacity: 1; color: var(--footer-accent); transform: translateX(2px); }

.footer-links i{ font-size: 1rem; opacity: .85; }

.footer-socials{
	display: flex; gap: .5rem; list-style: none; margin: 0; padding: 0;
}
.footer-socials li a{
	--size: 40px;
	width: var(--size); height: var(--size);
	display: grid; place-items: center;
	border-radius: 50%;
	background: rgba(33,56,75,.35);     /* navy pill */
	color: var(--footer-ink);
	text-decoration: none;
	transition: transform .2s ease, background .2s ease, color .2s ease;
}
.footer-socials li a:hover{
	background: var(--footer-accent);
	color: #0b0f14;
	transform: translateY(-2px);
}
.footer-socials i{ font-size: 18px; line-height: 1; }

.footer-divider{
	height: 1px; background: rgba(255,255,255,0.06);
	margin: clamp(24px, 4vw, 36px) 0;
}

.site-footer__bottom{
	display: flex; gap: 16px; align-items: center; justify-content: space-between;
	flex-wrap: wrap;
}
.site-footer__bottom .ptf-footer-copyright{
	margin: 0; color: var(--footer-mute);
}
.footer-mini{
	list-style: none; margin: 0; padding: 0; display: flex; gap: 16px;
}
.footer-mini a{
	color: var(--footer-mute); text-decoration: none; font-size: .9rem;
	transition: color .2s ease;
}
.footer-mini a:hover{ color: var(--footer-ink); }

/* small screens: stack columns */
@media (max-width: 992px){
	.site-footer__grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
	.site-footer__grid{ grid-template-columns: 1fr; }
}

.quotesection{
	background-color:#0d1a29;
}


:root{
	--accent: #fa472a;
	--navy: #21384b;
	--ink: #eaf2ff;
	--muted: #9bb0c0;
}

/* ===== About layout ===== */
.about-hero{
	padding: clamp(48px, 8vw, 96px) 0;
	text-align: left;
}
@media (max-width: 992px){
	.about-hero{ text-align: center; }
}

/* Portrait: centered, circular, subtle ring */
.about-photo{
	margin: 0 auto;
	/*width: clamp(220px, 35vw, 360px);*/
	width: clamp(220px, 35vw, 500px);
	aspect-ratio: 1/1;
	border-radius: 999px;
	overflow: hidden;
	position: relative;
	box-shadow: 0 10px 40px rgba(0,0,0,.35);
	outline: 2px solid rgba(255,255,255,.06);
	outline-offset: 4px;
}
.about-photo img{
	width: 100%; height: 100%; object-fit: cover; object-position: center;
	display: block;
}



/* CTA buttons in your vibe */

@media (max-width: 992px){ .about-cta{ justify-content: center; } }
.btn{
	--btn-pad: .65rem 1rem;
	display: inline-flex; align-items: center; gap: .5rem;
	padding: var(--btn-pad);
	border-radius: 999px; text-decoration: none; line-height: 1;
	transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
	will-change: transform;
}
.btn--primary{ background: var(--accent); color: #0b0f14; border: 1px solid transparent; }
.btn--primary:hover{ transform: translateY(-1px); }
.btn--ghost{ background: transparent; color: var(--ink); border: 1px solid rgba(255,255,255,.18); }
.btn--ghost:hover{ border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }

/* ===== Testimonials centering ===== */

.about-slider{ max-width: 920px; }

/* ===== Animated horizontal rule ===== */
.hr-reveal{
	height: 1px;
	width: min(1100px, 86vw);
	margin: clamp(32px, 6vw, 64px) auto;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 700ms cubic-bezier(.22,1,.36,1);
	will-change: transform;
	opacity: .9;
}
/* AOS adds .aos-animate when in view */
.hr-reveal.aos-animate{
	transform: scaleX(1);
}

/* (Optional) accented variant: add class .hr-reveal--accent in HTML */
.hr-reveal--accent{
	background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
	.hr-reveal{ transition: none; transform: none; }
}

/* Only if your theme isn't hiding the fixed footer as expected */
.site-footer {
	will-change: transform;
	transition: transform 300ms ease;
}
.site-footer.footer--hidden {
	transform: translateY(100%); /* slide off-screen */
}

/* ensure content isn't covered when footer is fixed */
.ptf-main {
	padding-bottom: var(--footer-height, 88px);
}


.hero-canvas { display: grid; align-items: stretch; }
#lottie-container { width: 120%; height: 100%; position: relative; }
#lottie-container svg { width: 100% !important; height: 100% !important; display: block; }


.lottie-fluid { width: 100%; }


.lottie-fluid svg {
	width: 100% !important;
	height: auto !important;   /* maintains aspect per viewBox */
	display: block;            /* no inline gaps */
}


/* Make the right column a grid so the box can stretch and still center */
.lottie-col {
	display: grid;
	place-items: center;   /* centers the box inside the stretched column */
}

/* The Lottie container fills the column area */
.lottie-box {
	width: 100%;
	height: 100%;          /* key: fill the stretched column height */
	min-height: 380px;     /* optional floor for short viewports */
	position: relative;
}

/* Force the injected Lottie <svg>/<canvas> to occupy the box */
.lottie-box svg,
.lottie-box canvas {
	position: absolute;
	inset: 0;
	width: 200% !important;
	height: 200% !important;
	display: block;
}

.thin{
	font-weight:200;
	text-align:center;
}


/* White horizontal rule that animates in/out */
.hr-fade{
	height: 1px;
	width: min(2000px, 988vw);
	margin: clamp(28px, 6vw, 56px) auto;
	background: #fff;                 /* solid white line */
	opacity: 0;                       /* start hidden */
	transform: scaleX(0.8);           /* subtle “draw” effect */
	transform-origin: center;
	transition: opacity 600ms ease, transform 600ms cubic-bezier(.22,1,.36,1);
	will-change: opacity, transform;
}

/* When AOS says it's in view */
.hr-fade.aos-animate{
	opacity: 1;
	transform: scaleX(1);
}

/* Optional: softer look (use class="hr-fade hr-fade--soft") */
.hr-fade.hr-fade--soft{
	background: linear-gradient(90deg, transparent, rgba(108,119,172,.75), transparent);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
	.hr-fade{ transition: none; transform: none; opacity: 1; }
}



:root{
	--accent:#fa472a;
	--ink:#eaf2ff;
	--muted:#9bb0c0;
	--track:rgba(255,255,255,.12);
	--fill-start:rgba(250,71,42,.65);
	--fill-end:#fa472a;
}

.skills .thin{ letter-spacing:.08em; opacity:.9; }

/* Card */
.skill{
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 16px;
	padding: 16px;
	backdrop-filter: saturate(120%) blur(2px);
}

/* Head: icon + name + % */
.skill__head{
	display:flex; align-items:center; gap: 12px;
	margin-bottom: 10px;
}
.skill__icon{
	width: 40px; height: 40px; object-fit: contain; display:block;
	filter: drop-shadow(0 2px 8px rgba(0,0,0,.25));
}
.skill__meta{ display:flex; align-items:baseline; gap:8px; justify-content:space-between; width:100%; }
.skill__meta h6{ margin:0; font-weight:600; }
.skill__value{ margin-left:auto; color:var(--muted); font-variant-numeric: tabular-nums; }

/* Bar */
.skill__bar{
	position: relative;
	height: 10px;
	border-radius: 999px;
	background: var(--track);
	overflow: hidden;
}
.skill__bar-fill{
	position: absolute; inset: 0 auto 0 0;
	width: 0%;
	background: linear-gradient(90deg, var(--fill-start), var(--fill-end));
	border-radius: 999px;
	transition: width 1100ms cubic-bezier(.22,1,.36,1) 120ms;
	will-change: width;
}

/* When AOS activates the item, grow to the target percent (from --pct) */
.skill.aos-animate .skill__bar-fill{ width: var(--pct); }

/* Hover polish */
.skill:hover{ border-color: rgba(255,255,255,0.12); }


/* cv stuff */

:root{
	--accent:#fa472a;
	--ink:#eaf2ff;
	--muted:#9bb0c0;
	--card-bg:rgba(255,255,255,.03);
	--card-bd:rgba(255,255,255,.06);
	--track:rgba(255,255,255,.12);
	--progress:rgba(250,71,42,.75);
}

/* Section shell */
.cv-section .thin{ letter-spacing:.08em; opacity:.9; }

/* Cards */
.cv-card{
	background: var(--card-bg);
	border: 1px solid var(--card-bd);
	border-radius: 16px;
	padding: clamp(16px, 2vw, 20px);
}
.cv-card__head{
	display:flex; align-items:center; gap:.6rem; margin-bottom: .75rem;
}
.cv-card__head i{ font-size: 1.2rem; color: var(--accent); }

/* Timeline */
.tl{
	position: relative;
	padding-left: 28px;       /* room for line/dots */
}
.tl::before{
	content:"";
	position:absolute;
	left: 12px; top: 0; bottom: 0;
	width: 2px; background: var(--track);
	border-radius: 2px;
}
.tl__progress{
	position:absolute;
	left:12px; top:0; bottom:0;
	width:2px; background: var(--progress);
	border-radius:2px;
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 1100ms cubic-bezier(.22,1,.36,1) 120ms;
}
.tl.aos-animate .tl__progress{ transform: scaleY(1); }

.tl__group{ position: relative; margin-bottom: 18px; }
.tl__badge{
	display:inline-block;
	margin: 0 0 .5rem 0;
	padding: .25rem .5rem;
	border: 1px solid var(--card-bd);
	border-radius: 999px;
	font-size: .8rem;
	color: var(--muted);
	background: rgba(255,255,255,.02);
}

.tl__item{
	position: relative;
	margin-bottom: 14px;
}
.tl__dot{
	position: absolute;
	left: 7px; top: .6rem;
	width: 12px; height: 12px; border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 4px rgba(250,71,42,.15);
	transform: scale(0);
	transition: transform 420ms cubic-bezier(.22,1,.36,1);
	transition-delay: calc(var(--i,0) * 60ms);
}
.tl__item .tl__card{
	background: rgba(255,255,255,.02);
	border: 1px solid var(--card-bd);
	border-radius: 12px;
	padding: .75rem .9rem;
	color: var(--ink);
}
.tl__item .tl__meta{
	display:flex; gap:.5rem; align-items:baseline; flex-wrap:wrap;
	color: var(--muted); font-size:.9rem; margin-bottom:.25rem;
}
.tl__time{ font-variant-numeric: tabular-nums; }
.tl__org{ margin-left:auto; opacity:.95; }
.tl__title{ margin:0; font-size:1rem; }

/* Pop dots once the timeline is active */
.tl.aos-animate .tl__dot{ transform: scale(1); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
	.tl__progress, .tl__dot{ transition: none; transform: none; }
}


:root{
	--accent:#fa472a;
	--ink:#eaf2ff;
	--muted:#9bb0c0;
	--card-bg:rgba(255,255,255,.03);
	--card-bd:rgba(255,255,255,.06);
}

.skills-grid .thin{ letter-spacing:.08em; opacity:.9; }

.skill-card{
	height: 100%;
	background: var(--card-bg);
	border: 1px solid var(--card-bd);
	border-radius: 16px;
	padding: 18px 18px 16px;
	display: grid;
	grid-template-rows: auto auto 1fr;
	gap: .4rem;
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.skill-card:hover{
	border-color: rgba(255,255,255,.12);
	transform: translateY(-2px);
	box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.skill-card__icon{
	--size: 46px;
	width: var(--size); height: var(--size);
	display: grid; place-items: center;
	border-radius: 12px;
	background: rgba(250,71,42,.12);
	color: var(--accent);
	margin-bottom: .25rem;
}
.skill-card__icon i{ font-size: 22px; line-height: 1; }

.skill-card__title{
	margin: 0;
	font-weight: 700;
	letter-spacing: .01em;
}

.skill-card__body{
	margin: .25rem 0 0;
	color: var(--muted);
	line-height: 1.6;
	font-size: 0.975rem;
}

/* optional compact spacing on small screens */
@media (max-width: 576px){
	.skill-card{ padding: 16px; }
	.skill-card__body{ font-size: 0.95rem; }
}

:root{
	/* uses your existing palette; fallbacks included */
	--accent: #fa472a;
	--ink: var(--ptf-color-1, #eaf2ff);
	--muted: #9bb0c0;
	--card-bg: rgba(255,255,255,.03);
	--card-bd: rgba(255,255,255,.06);
}

.expertise-grid .thin{ letter-spacing:.08em; opacity:.9; }

.exp-card{
	height: 100%;
	background: var(--card-bg);
	border: 1px solid var(--card-bd);
	border-radius: 16px;
	padding: 18px 18px 16px;
	display: grid;
	grid-template-rows: auto auto 1fr;
	gap: .4rem;
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.exp-card:hover{
	border-color: rgba(255,255,255,.12);
	transform: translateY(-2px);
	box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* Icon badge */
.exp-icon{
	--size: 46px;
	width: var(--size); height: var(--size);
	display: grid; place-items: center;
	border-radius: 12px;
	background: rgba(250,71,42,.12);
	color: var(--accent);
	margin-bottom: .25rem;
}
.exp-icon i{ font-size: 22px; line-height: 1; }

/* Text */
.exp-title{
	margin: 0;
	font-weight: 700;
	letter-spacing: .01em;
}
.exp-body{
	margin: .25rem 0 0;
	color: var(--muted);
	line-height: 1.6;
	font-size: 0.975rem;
}

/* Compact spacing on very small screens */
@media (max-width: 576px){
	.exp-card{ padding: 16px; }
	.exp-body{ font-size: 0.95rem; }
}

.ptf-testimonial__content{
	font-family: var(--ptf-primary-font);
	font-weight:100;
}


/* contact */


:root{
	--accent:#fa472a;
	--ink:#eaf2ff;
	--muted:#9bb0c0;
	--card-bg:rgba(255,255,255,.03);
	--card-bd:rgba(255,255,255,.06);
}

/* HERO */
.contact-hero{
	padding: clamp(36px, 6vw, 72px) 0 12px;
}
.contact-hero__title{ letter-spacing:-.01em; margin:0 0 .25rem; }
.contact-hero__sub{ color:var(--muted); margin:0 0 .75rem; }

.contact-hero__badges{
	display:flex; gap:.5rem; flex-wrap:wrap; margin: .5rem 0 1rem;
}
.badge-lite{
	display:inline-flex; align-items:center; gap:.4rem;
	padding:.35rem .6rem; border-radius:999px; font-size:.85rem;
	color:var(--ink); background: rgba(255,255,255,.06); border:1px solid var(--card-bd);
}
.badge-lite i{ font-size:1rem; color:var(--accent); }

.contact-hero__cta{ display:flex; gap:.75rem; flex-wrap:wrap; }

/* BUTTONS (reuse from earlier) */
.btn{
	--btn-pad:.65rem 1rem;
	display:inline-flex; align-items:center; gap:.5rem;
	padding:var(--btn-pad);
	border-radius:999px; text-decoration:none; line-height:1;
	transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primary{ background:var(--accent); color:#0b0f14; border:1px solid transparent; }
.btn--primary:hover{ transform: translateY(-1px); }
.btn--ghost{ background:transparent; color:var(--ink); border:1px solid rgba(255,255,255,.18); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); transform: translateY(-1px); }

/* HR (from earlier) */
.hr-fade{
	height:1px; width:min(2000px, 88vw);
	margin: clamp(24px, 5vw, 48px) auto;
	background:#fff; opacity:0; transform:scaleX(.8); transform-origin:center;
	transition:opacity 600ms ease, transform 600ms cubic-bezier(.22,1,.36,1);
}
.hr-fade.aos-animate{ opacity:1; transform:scaleX(1); }
.hr-fade--soft{ background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent); }

/* CONTACT CARDS */
.contact-cards{ padding: 8px 0 4px; }
.contact-card{
	height:100%;
	background:var(--card-bg);
	border:1px solid var(--card-bd);
	border-radius:16px;
	padding:18px;
	transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.contact-card:hover{ border-color:rgba(255,255,255,.12); transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.25); }
.contact-card__icon{
	--size:44px; width:var(--size); height:var(--size);
	display:grid; place-items:center; border-radius:12px;
	background:rgba(250,71,42,.12); color:var(--accent); margin-bottom:.35rem;
}
.contact-card__icon i{ font-size:22px; }
.contact-card__title{ margin:.25rem 0 .25rem; font-weight:700; }
.contact-card__text{ color:var(--ink); opacity:.9; margin:0; }
.contact-card__text a{ color:var(--ink); text-decoration:none; border-bottom:1px solid transparent; }
.contact-card__text a:hover{ color:var(--accent); border-bottom-color:var(--accent); }

/* Social row */
.contact-socials{ display:flex; gap:.5rem; margin-top:.25rem; }
.contact-socials .soc{
	--s:40px; width:var(--s); height:var(--s);
	display:grid; place-items:center; border-radius:50%;
	background:rgba(33,56,75,.35); color:var(--ink);
	transition:transform .2s ease, background .2s ease, color .2s ease;
	text-decoration:none;
}
.contact-socials .soc:hover{ background:var(--accent); color:#0b0f14; transform:translateY(-2px); }

/* FORM */
.contact-form-section{ padding: 8px 0 32px; }
.contact-form{
	background:var(--card-bg);
	border:1px solid var(--card-bd);
	border-radius:16px;
	padding:clamp(16px, 2.2vw, 22px);
}
.fl{
	position:relative; margin-bottom:14px;
}
.fl input, .fl textarea{
	width:100%; color:var(--ink);
	background:rgba(255,255,255,.02);
	border:1px solid var(--card-bd);
	border-radius:12px;
	padding: 14px 12px 12px;
	outline:none;
	transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.fl textarea{ resize:vertical; }
.fl input:focus, .fl textarea:focus{
	border-color:var(--accent); box-shadow:0 0 0 3px rgba(250,71,42,.15);
}
.fl label{
	position:absolute; left:12px; top:12px;
	color:var(--muted); pointer-events:none;
	transition: transform .15s ease, color .15s ease, opacity .15s ease;
	background:transparent;
}
.fl:has(input:focus), .fl:has(textarea:focus),
.fl:has(input:not(:placeholder-shown)), .fl:has(textarea:not(:placeholder-shown)){
	/* float the label */
}
.fl input:focus + label, .fl input:not(:placeholder-shown) + label,
.fl textarea:focus + label, .fl textarea:not(:placeholder-shown) + label{
	transform: translateY(-18px) scale(.88);
	background: transparent;
	color: var(--muted);
	opacity: .9;
}

/* Actions / status */
.form-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:6px; }
.form-note{ color:var(--muted); font-size:.95rem; }
.form-status{ margin:.5rem 0 0; color:var(--muted); min-height:1.2em; }

/* Aside */
.contact-aside h6{ margin:0 0 .25rem; }
.contact-hints{ margin:.5rem 0 1rem; padding-left: 20px; color:var(--muted); }
.aside-card{
	display:flex; gap:.5rem; align-items:flex-start;
	background:var(--card-bg); border:1px solid var(--card-bd);
	border-radius:12px; padding:12px;
}
.aside-card i{ color:var(--accent); font-size:18px; line-height:1.2; }
.aside-card p{ margin:0; color:var(--muted); }



/* ===== Case Study Layout / Nav ===== */

/* ============================
   Case Study — FINAL sticky sidebar
   ============================ */
/* ============================
   Case Study — Simple Stacked Cards
   ============================ */

/* Adjust to your header height if needed */
:root { --header-h: 72px; }

/* Keep footer at bottom on short pages (safe) */
.ptf-site-wrapper__inner { display: flex; min-height: 100dvh; flex-direction: column; }
.ptf-main { flex: 1 0 auto; }
.ptf-footer { flex: 0 0 auto; }

/* Card utility that layers on top of your .contact-card skin */
.cs-card { padding: 24px; border-radius: 16px; }

/* Section spacing */
section.case { margin-bottom: 20px; }
section.case .case__head {
	display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px;
}
section.case h3 { margin: 0; font-size: 24px; font-weight:200;}

/* Optional mini grid helpers inside cards */
.cs-grid { display:grid; gap:12px; grid-template-columns: repeat(12, 1fr); }
.cs-col-6 { grid-column: span 6; }
.cs-col-12 { grid-column: span 12; }

/* Button/link micro-utility for consistency */
.cs-link { text-decoration: none; }

/* Responsive tweak (keeps inner grids neat) */
@media (max-width: 992px){
	.cs-col-6 { grid-column: span 12; }
}

@media only screen and (min-width: 1200px) {
	h1.large-heading, .h1.large-heading {
		font-size: 3rem!important;
		line-height: 1.1;
	}
}


.fz-18{color:#99a3ac;}


.ptf-is--home-modern section:first-of-type{
	background-image: none;
}


/* ============================
   Portfolio — Clean Card Grid
   ============================ */

:root { --header-h: 72px; }

/* Keep footer at bottom on short pages (safe) */
.ptf-site-wrapper__inner { display: flex; min-height: 100dvh; flex-direction: column; }
.ptf-main { flex: 1 0 auto; }
.ptf-footer { flex: 0 0 auto; }

/* Reuse the case-study card skin */
.cs-card { padding: 24px; border-radius: 16px; }

/* HERO */
.portfolio-hero__title { margin: 0; }

/* Filters: simple pill look, match your brand orange on active */
.ptf-filters--style-1 {
	display: flex; flex-wrap: wrap; gap: 10px;
	padding: 0; margin: 0; list-style: none;
}
.ptf-filters--style-1 .filter-item {
	cursor: pointer;
	padding: 10px 14px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,.12);
	background: rgba(255,255,255,.04);
	transition: transform .18s ease, background .18s ease, border-color .18s ease;
	user-select: none;
	font-size: 14px;
}
.ptf-filters--style-1 .filter-item:hover { transform: translateY(-1px); }
.ptf-filters--style-1 .filter-item-active {
	border-color: #fa472a;
	background: rgba(250,71,42,.08);
}

/* Grid: calm, equal gutters; two columns on lg+, one on mobile */
.portfolio-grid { /* wrapper to make intent clear */
	--x-gap: 32px;
	--y-gap: 32px;
}
.portfolio-grid .ptf-isotope-grid {
	--x-gap: var(--x-gap);
	--y-gap: var(--y-gap);
}
.portfolio-grid .ptf-isotope-grid [class*="grid-item"] { margin-bottom: var(--y-gap); }
@media (min-width: 992px) {
	/* keep 2 columns for big, story-like tiles (change to 3 if you want tighter) */
	.portfolio-grid .ptf-isotope-grid[data-columns="2"] {}
}

/* Portfolio Card */
.portfolio-card {
	display: block;
	text-decoration: none;
	color: inherit;
	overflow: hidden; /* clip hover zoom */
	transition: transform .18s ease, box-shadow .18s ease;
}
.portfolio-card:focus-visible { outline: 2px solid #fa472a; outline-offset: 3px; border-radius: 16px; }
.portfolio-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.25); }

/* Thumb uses modern aspect-ratio; falls back gracefully */
.portfolio-card__thumb {
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: rgba(255,255,255,.04);
}
.portfolio-card__thumb img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .35s ease;
}
.portfolio-card:hover .portfolio-card__thumb img { transform: scale(1.03); }

/* Meta */
.portfolio-card__meta { margin-top: 12px; }
.portfolio-card__category {
	font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .75;
	margin-bottom: 6px;
}
.portfolio-card__title { margin: 0; }

/* Optional chips row */
.portfolio-card__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip {
	font-size: 12px; line-height: 1;
	padding: 8px 10px; border-radius: 999px;
	border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04);
}

/* Minor polish for large screens */
@media (min-width: 1400px) {
	.portfolio-card__title { font-size: 1.35rem; }
}

.ptf-filters .filter-item{
	margin-left:10px;
}

.case-head{
	line-height:62px;
	margin-bottom:10px;
}


.case p{
	margin-bottom:5px;
}
.case strong{

	color:#fff;
	display:block;
	margin-top:20px;
}

.case p, .case li, .case i{
	color:#83909e;
}
.filter-item{
	color:#fff;
}