:root {
	--color-accent: #FF4629;
	--color-text-main: #111;
	--color-text-body: #333;
	--color-text-muted: #666;
	--color-text-pale: #AEAEAE;
	--color-bg: #FFF;
	--color-bg-soft: #F7F7F7;
	--font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------------------------
   TYPOGRAPHY & COLORS
---------------------------- */
body {
	font-family: var(--font-sans);
	color: var(--color-text-body);
	background-color: var(--color-bg);
}
p {
	color: var(--color-text-body);
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
	font-family: var(--font-sans) !important;
	color: var(--color-text-main);
	letter-spacing: normal;
}
h1, .h1 {
	font-size: 34px;
	line-height: 1.15;
}
h2, .h2 {
	font-size: 28px;
	line-height: 1.20;
}
h3, .h3 {
	font-size: 20px;
	line-height: 1.30;
}
h4, .h4 {
	font-size: 18px;
	line-height: 1.35;
}
h5, .h5 {
	font-size: 16px;
	line-height: 1.40;
}
h6, .h6 {
	font-size: 14px;
	line-height: 1.40;
}
a {
	color: var(--color-text-main);
}
a:hover {
	color: var(--color-accent);
	text-decoration: none;
	outline: none;
}

/* ---------------------------
   HELPERS ALIGNED
---------------------------- */
.bg-primary {
	background: var(--color-accent) !important;
}
.text-color {
	color: var(--color-accent) !important;
}
.bg-secondary {
	background: var(--color-bg-soft) !important;
}
.page-title h1:after {
	background: var(--color-accent);
}
.contact-title h2:after {
	background: var(--color-accent);
}

/* ---------------------------
   NAV
---------------------------- */
.navbar-nav .nav-link,
.main-nav .header-top-socials a {
	text-transform: none;
	letter-spacing: 0.02em;
	font-size: 16px;
}
.navbar-nav .nav-link {
	font-weight: 600;
}
ul.dropdown-menu > li > a,
.navbar ul ul ul.dropdown-menu li .nav-link {
	text-transform: none;
	letter-spacing: 0.02em;
}

/* ---------------------------
   BUTTONS
---------------------------- */
.btn {
	text-transform: none;
	letter-spacing: 0.02em;
	border-radius: 0;
}
.btn-main {
	background: var(--color-accent);
	color: #fff;
}
.btn-main:hover {
	background: var(--color-text-main);
	color: #fff !important;
}
.btn-black:hover {
	background: var(--color-accent);
}

/* ---------------------------
   PORTFOLIO OVERLAY
---------------------------- */
.inner-box .image .overlay-box:before {
	background-color: rgba(255, 255, 255, 0.9);
}
.overlay-content h5,
.overlay-content p {
	background: transparent;
	padding: 0;
	color: var(--color-text-main);
}
.overlay-content h5 {
	transition: transform 0.25s ease;
}
.overlay-content p {
	transition: transform 0.35s ease;
}

/* ---------------------------
   UTILITIES
---------------------------- */
.caption {
	color: var(--color-text-muted);
	font-size: 14px;
	line-height: 1.4;
}
.meta {
	color: var(--color-text-pale);
	font-size: 13px;
	line-height: 1.4;
}

/* ---------------------------
   FOOTER
---------------------------- */
.footer {
	padding: 0px;
	background: #FFF;
}
.footer .container {
	padding: 30px 0px 60px 0px;
}
.footer-widget .list-inline-item {
	display: inline-flex;
	align-items: center;
}
.footer p {
	color: var(--color-text-muted);
}
.footer-widget a {
	color: var(--color-text-muted);
	font-weight: 500;
}
.footer-widget .active a, 
.footer-widget a:hover {
	color: var(--color-accent);
}
.ti-instagram {
	font-size: 20px;
	line-height: 1;
	display: inline-block;
	transform: translateY(2px);
}

/* ---------------------------
   MOBILE TWEAKS
---------------------------- */
@media (max-width: 575px){
	h1, .h1 {
		font-size: 28px;
	}
	h2, .h2 {
		font-size: 24px;
		line-height: 1.25;
	}
}

/* ---------------------------
   HEADER
---------------------------- */
.navbar {
	padding: 0rem 1rem;
}
.navbar-brand {
	font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--color-text-main);
	text-decoration: none;
	padding: 0;
	line-height: 1;
}
.navbar-brand:hover,
.navbar-brand:focus {
	color: var(--color-accent);
	text-decoration: none;
}
.navbar-brand img {
	display: none;
}
@media (min-width: 992px) {
	.navbar .container {
		padding-right: 0px;
		padding-left: 0px;
	}
	.navbar-collapse .nav-item {
		padding: 0px 15px !important;
	}
	.navbar-collapse .navbar-nav .nav-link {
		padding: 30px 0px !important;
	}
	.navbar-collapse .nav-item.active .nav-link {
		color: var(--color-accent);
		/*border-bottom: 3px solid var(--color-text-main);*/
	}
}
/* Logo */
.brand-logo {
	display: inline-flex;
	align-items: center;
	padding: 0;
	line-height: 1;
	text-decoration: none;
	color: var(--color-text-main);
	transform: translateY(-5px);
}
.brand-logo .logo-svg {
	display: block;
	height: 45px;
	width: auto;
}
.brand-logo .logo-svg * {
	fill: currentColor !important;
	stroke: none !important;
}
.brand-logo:hover,
.brand-logo:focus {
	color: var(--color-accent) !important;
	text-decoration: none;
}
@media (max-width: 767px) {
	.brand-logo .logo-svg {
		height: 30px;
	}
}

/* ---------------------------
   OTHER
---------------------------- */
.section {
	padding: 0px;
}
.section .container {
	padding: 40px 0px;
}
.border-top {
	border-top: 2px solid #EEE !important
}

/* ---------------------------
   HOME PAGE
---------------------------- */
.banner .container {
	padding: 50px 0px 40px 0px;
}
.banner .cd-headline {
	font-size: 56px;
	line-height: 70px;
	font-weight: 500;
	letter-spacing: -0.01em;
}
.banner b {
	font-weight: 500;
}
@media (max-width: 1199px) {
	.banner .cd-headline {
		font-size: 48px;
		line-height: 60px;
	}
}
@media (max-width: 767px) {
	.banner .cd-headline {
		font-size: 34px;
		line-height: 44px;
	}
}
.banner p {
	font-size: 16px;
	line-height: 26px;
	color: var(--color-text-muted);
}
.approach-item {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}
.approach-item i {
	width: 48px;
	height: 48px;
	background-color: #FFF;
	color: var(--color-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 30px;
	line-height: 1;
	transition: background-color 0.25s ease, transform 0.25s ease;
	flex-shrink: 0;
	border: 2px solid var(--color-accent);
}
.approach-content h4 {
	margin-top: 10px;
}
/* ---------------------------
   ABOUT PAGE
---------------------------- */
.process-item i {
	width: 30px;
	height: 30px;
	background-color: #FFF;
	color: var(--color-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 16px;
	line-height: 1;
	transition: background-color 0.25s ease, transform 0.25s ease;
	flex-shrink: 0;
	border: 1px solid var(--color-accent);
}
.about-illustration {
	/*opacity: 0.5;*/
}
/* ---------------------------
   CONTACT PAGE
---------------------------- */
.hp-field {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
@media (min-width: 992px) {
	.contact-section .col-lg-5 {
		padding-right: 48px;
	}
}
.contact-form label {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text-main);
	margin-bottom: 6px;
}
.contact-form .form-control {
	padding: 12px 14px;
	border: 2px solid #EEE;
}
.contact-form .optional {
	font-weight: 400;
	color: #999;
	opacity: 1;
}
.contact-form button {
	margin-top: 16px;
	margin-bottom: 32px;
}
/* ---------------------------
   PROJECTS PAGE
---------------------------- */
.projects-filters {
	display: flex;
	flex-wrap: wrap;
}
.filter-btn {
	border: 0;
	background: transparent;
	padding: 0;
	font: inherit;
	color: var(--color-text-body, #333);
	cursor: pointer;
	transition: color 0.2s ease;
	font-weight: 700;
	font-size: 14px;
	padding: 0px 38px 18px 0px;
}
.filter-btn:focus {
	outline: none;
}
.filter-btn:focus-visible {
	outline: 2px solid rgba(255, 70, 41, 0.35);
	outline-offset: 3px;
	border-radius: 2px;
}
.filter-btn:hover,
.filter-btn.is-active {
	color: var(--color-accent, #FF4629);
}
.projects-count {
	font-size: 14px;
	color: var(--color-text-muted, #666);
	transition: opacity 0.2s ease;
}
.projects-count.is-updating {
	opacity: 0.4;
}
/* Pagination minimal */
.projects-pagination .page-item .page-link {
	border: 0;
	background: transparent;
	color: var(--color-text-body, #333);
	padding: 10px 15px;
	font-weight: 700;
}
.projects-pagination .page-item.active .page-link, 
.projects-pagination .page-item .page-link:hover {
	color: var(--color-accent, #FF4629);
	border-radius: 0;
}
.projects-pagination .page-item.disabled .page-link {
	opacity: 0.4;
}
.project-item {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.28s ease, transform 0.28s ease;
	will-change: opacity, transform;
}
.project-item.is-hiding {
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
}
.project-item.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
#projectsGrid {
	transition: opacity 0.16s ease;
}
#projectsGrid.is-switching {
	opacity: 0;
}
.pagination {
	margin-top: 0px;
}
/* ---------------------------
   PROJECT DETAIL PAGE
---------------------------- */
.project-info .text-muted {
	color: #AAA !important;
}
.project-request a {
	color: var(--color-accent, #FF4629);
	font-weight: 600;
}
.project-request a:hover {
	/*color: var(--color-text-main, #111);*/
	text-decoration: underline;
}
.pswp {
	--pswp-bg: #ffffff;
}
.pswp__icn {
	fill: #111; color: #111;
}
.pswp__counter {
	display:none;
}
.pswp__button,
.pswp__button:hover,
.pswp__button:active,
.pswp__button:focus {
	background-color: #111;
}
.pswp__icn {
	fill: #FFF;
	color: #111;
}