/* theme.css - Artin Ghorbanian portfolio custom styles, consolidated from the
   project's original per-section files (back-to-top, base template styles,
   responsive breakpoints, page-specific overrides, and the bespoke theme layer)
   in their original cascade order. portfolio-theme.css stays last/authoritative.
   The legacy light-mode.css file was retired here: every rule it set for elements
   that exist on this page was already overridden at equal-or-higher specificity by
   portfolio-theme.css's data-theme/body.light-mode rules, except the Nice Select
   arrow icon swap, which was ported into portfolio-theme.css section 11. */

/* ==== backToTop.css ==== */
.progress-wrap {
	position: fixed;
	left: 50px;
	right: auto;
	bottom: 50px;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	border-radius: 50px;
	box-shadow: inset 0 0 0 2px rgba(135, 80, 247, 0.5);
	z-index: 99;
	opacity: 0;
	visibility: hidden;
	transform: translateY(15px);
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear;
}

.progress-wrap.active-progress {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.progress-wrap::after {
	position: absolute;
	content: "\f176";
	font-family: "Font Awesome 5 Pro";
	text-align: center;
	line-height: 46px;
	font-size: 20px;
	color: var(--tj-theme-primary);
	left: 0;
	top: 0;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	z-index: 1;
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear;
}

.progress-wrap svg path {
	fill: none;
}

.progress-wrap svg.progress-circle path {
	stroke: var(--tj-theme-primary);
	stroke-width: 4;
	box-sizing: border-box;
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear;
}

/* ==== main.css ==== */
/*-----------------------------------------------------------------------------------

Theme Name: Gerold - Personal Portfolio HTML5 Template
Theme URI: https://themejunction.net/html/gerold/demo/
Author: Theme-Junction
Author URI: https://themeforest.net/user/theme-junction
Description: Gerold - Personal Portfolio HTML5 Template

-----------------------------------------------------------------------------------
/************ TABLE OF CONTENTS ***************

  Theme Default CSS
	Preloader
	Headers
	Hero Section
	Services Section
	Portfolio Section
	Popup Section
	Resume Section
	Skills Section
	Testimonials Section
	Blog Section
	Blog Standard Page
	Blog Details Page
	Contact Section
	Footer Area
	Sidebar Menu
	Sidebar Widgets
	Breadcrumb Area

**********************************************/

/*
* ===============================
*  START: Theme Default CSS
* ===============================
*/
@import url(../fonts/stylesheet.css);
body {
	font-family: peyda;
}

:root {
	/* ----------------------------------
   @font family declaration
  ------------------------------------ */
	--tj-ff-body: " Sora", sans-serif;
	--tj-ff-heading:"Sora", sans-serif;
	--tj-ff-russo: "Russo One", sans-serif;
	--tj-ff-fontawesome: "Font Awesome 6 Pro";
	/* ----------------------------------
   @color declaration
  ------------------------------------ */
	--tj-body: #dddddd;
	--tj-white: #ffffff;
	--tj-off-white: #f6f3fc;
	--tj-black: #000000;
	--tj-black-2: #050709;
	--tj-black3: #5c6266;
	--tj-black4: #585859;
	--tj-heading-primary: #102039;
	--tj-heading-secondary: #ea1826;
	--tj-theme-primary: #8750f7;
	--tj-theme-primary-1: #2400ff;
	--tj-theme-primary-2: #9b8dff;
	--tj-theme-primary-3: #4654f9;
	--tj-theme-secondary: #2a1454;
	--tj-theme-accent-1: #0f0715;
	--tj-theme-accent-2: #140c1c;
	--tj-grey-1: #747779;
	--tj-grey-2: #d9d9d9;
	--tj-grey-3: #dddddd;
	--tj-grey-4: #22272c;
	--tj-grey-5: #636363;
	--tj-grey-6: #1b262e;
	--tj-bg: #0c1115;
	--tj-bg-2: #0e1418;
	--tj-bg-3: #10171c;
	--tj-bg-4: #151b1f;
	--tj-border: #1b2227;
	--tj-border1: #2a343c;
	/* ----------------------------------
   @font weight declaration
  ------------------------------------ */
	--tj-fw-normal: normal;
	--tj-fw-elight: 200;
	--tj-fw-light: 300;
	--tj-fw-regular: 400;
	--tj-fw-medium: 500;
	--tj-fw-sbold: 600;
	--tj-fw-bold: 700;
	--tj-fw-ebold: 800;
	--tj-fw-black: 900;
	/* ----------------------------------
    @font size declaration
  ------------------------------------ */
	--tj-fz-body: 16px;
	--tj-fz-btn: 15px;
	--tj-fz-p: 18px;
	--tj-fz-h1: 65px;
	--tj-fz-h2: 45px;
	--tj-fz-h3: 30px;
	--tj-fz-h4: 24px;
	--tj-fz-h5: 22px;
	--tj-fz-h6: 18px;
	--tj-fz-sub-title: 36px;
}

* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	scrollbar-width: thin;
	scrollbar-color: var(--tj-theme-primary) var(--tj-theme-secondary);
}

::-webkit-scrollbar {
	height: 4px;
	width: 4px;
	background: var(--tj-theme-secondary);
}

::-webkit-scrollbar-thumb {
	background: var(--tj-theme-primary);
	-webkit-border-radius: 1ex;
	-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.75);
}

::-webkit-scrollbar-corner {
	background: transparent;
}

html,
body {
	min-height: 100%;
	overflow-x: hidden;
}

img {
	max-width: 100%;
}

body {
	font-family: "peyda";
	font-size: var(--tj-fz-body);
	font-weight: var(--tj-fw-regular);
	color: var(--tj-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "peyda";
	font-weight: var(--tj-fw-bold);
	line-height: 1.2;
	color: var(--tj-white);
	margin-bottom: 15px;
}

h1 {
	font-size: var(--tj-fz-h1);
}

h2 {
	font-size: var(--tj-fz-h2);
}

h3 {
	font-size: var(--tj-fz-h3);
}

h4 {
	font-size: var(--tj-fz-h4);
}

h5 {
	font-size: var(--tj-fz-h5);
}

h6 {
	font-size: var(--tj-fz-h6);
}

h1 > a,
h2 > a,
h3 > a,
h4 > a,
h5 > a,
h6 > a {
	color: inherit;
	font-size: inherit;
	font-family: inherit;
	font-weight: inherit;
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

a h1:hover,
a h2:hover,
a h3:hover,
a h4:hover,
a h5:hover,
a h6:hover {
	text-decoration: none;
}

.site-content {
	overflow: hidden;
}

.ul-reset {
	margin: 0;
	padding: 0;
	list-style: none;
}
.tj-btn-primary {
	text-decoration: none;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	gap: 10px;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	font-size: var(--tj-fz-btn);
	line-height: 1;
	font-weight: var(--tj-fw-bold);
	color: var(--tj-white);
	text-transform: capitalize;
	background-size: 200%;
	background-image: -webkit-gradient(
		linear,
		left top,
		right top,
		from(var(--tj-theme-primary)),
		color-stop(51%, var(--tj-theme-secondary)),
		to(var(--tj-theme-primary))
	);
	background-image: -o-linear-gradient(
		left,
		var(--tj-theme-primary) 0%,
		var(--tj-theme-secondary) 51%,
		var(--tj-theme-primary) 100%
	);
	background-image: linear-gradient(
		to right,
		var(--tj-theme-primary) 0%,
		var(--tj-theme-secondary) 51%,
		var(--tj-theme-primary) 100%
	);
	border: none;
	border-radius: 50px;
	padding: 17px 35px;
	-webkit-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
}
.tj-btn-primary i {
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(210deg);
	-webkit-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
}
.tj-btn-primary:hover {
	background-position: -100%;
}
.tj-btn-primary:hover i {
	-webkit-transform: rotate(0);
	-ms-transform: rotate(0);
	transform: rotate(180deg);
}

.tj-btn-secondary {
	text-decoration: none;
	font-size: var(--tj-fz-btn);
	line-height: 1;
	font-weight: var(--tj-fw-medium);
	color: var(--tj-theme-primary);
	border-radius: 50px;
	padding: 17px 35px;
	border: 1px solid var(--tj-theme-primary);
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
	letter-spacing: 1px;
}
.tj-btn-secondary:hover {
	background: var(--tj-theme-primary);
}
.tj-btn-primary-2 {
	display: flex;
	align-items: center;
	text-decoration: none;
	gap: 10px;
	background: var(--tj-theme-primary);
	color: var(--tj-white);
	font-size: var(--tj-fz-btn);
	font-weight: var(--tj-fw-sbold);
	border-radius: 50px;
	padding: 17px 30px;
	line-height: 1;
}
.tj-btn-primary-2 .icon_box {
	position: relative;
	display: inline-flex;
	overflow: hidden;
	padding: 0 4px;
	transform: rotate(220deg)!important;
}
.tj-btn-primary-2 .icon_box .icon_first,
.tj-btn-primary-2 .icon_box .icon_second {
	transition: all 0.3s ease-in-out 0s;
}
.tj-btn-primary-2 .icon_box .icon_second {
	position: absolute;
	transform: translateX(-150%);
}
.tj-btn-primary-2:hover .icon_box .icon_first {
	transform: translateX(150%);
}
.tj-btn-primary-2:hover .icon_box .icon_second {
	transform: translateX(0%);
}
.tj-btn-primary-2 i {
	display: inline-flex;
	line-height: 1;
}
.tj-btn-primary-2:hover {
	color: var(--tj-white);
	background-color: var(--tj-theme-primary);
}
.lead {
	font-size: 20px;
}
.social-icons {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.social-icons li {
	margin-right: 20px;
}
.social-icons li:last-child {
	margin-left: 0;
}
.social-icons li a {
	color: var(--tj-theme-primary);
	width: 35px;
	height: 35px;
	border: 1px solid var(--tj-theme-primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	text-decoration: none;
	z-index: 1;
}
.social-icons li a i {
	transition: 0.3s;
}
.social-icons li a::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--tj-theme-primary);
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
	border-radius: 50%;
	z-index: -1;
}
.social-icons li a:hover {
	border: 1px solid var(--tj-theme-primary);
	color: var(--tj-white);
}
.social-icons li a:hover::before {
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}
.funfact-item {
	gap: 15px;
}
.funfact-item .number {
	font-size: 64px;
	line-height: 1;
	font-weight: var(--tj-fw-bold);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.section-header {
	margin-bottom: 50px;
	max-width: 700px;
	width: 100%;
	
}
.section-header .section-title {
	font-size: 45px;
	background: var(--tj-theme-primary);
	background: -webkit-gradient(
		linear,
		left top,
		right top,
		from(var(--tj-theme-primary)),
		to(var(--tj-white))
	);
	background: -o-linear-gradient(
		left,
		var(--tj-theme-primary) 0%,
		var(--tj-white) 100%
	);
	background: linear-gradient(
		to right,
		var(--tj-theme-primary) 0%,
		var(--tj-white) 100%
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-flex;
	gap: 15px;
	margin-bottom: 0;
}
.section-header p {
	margin-top: 15px;
}
.section-header p:last-child {
	margin-bottom: 0;
}
.section-header.style-2 .section-title {
	font-weight: var(--tj-fw-medium);
}
.section-header.style-2 .sub-title {
	color: rgba(255, 255, 255, 0.5);
	font-weight: var(--tj-fw-regular);
	display: block;
	margin-bottom: 15px;
}
.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel button.owl-dot {
	padding: 3px !important;
}
.owl-dots {
	text-align: center;
	margin-top: 25px;
}
.owl-dots .owl-dot {
	margin-right: 5px;
}
.owl-dots .owl-dot:last-child {
	margin-right: 0;
}
.owl-dots .owl-dot span {
	width: 8px;
	height: 8px;
	background: var(--tj-grey-2);
	border-radius: 50%;
	display: block;
	opacity: 0.2;
}
.owl-dots .owl-dot.active span {
	background: var(--tj-theme-primary);
	opacity: 1;
}
.tj-nice-select {
	float: none;
	width: 100%;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: var(--tj-grey-1);
}
.tj-nice-select:hover {
	border-color: rgba(255, 255, 255, 0.1);
}
.tj-nice-select:focus {
	-webkit-box-shadow: none;
	box-shadow: none;
	border-color: var(--tj-theme-primary);
}
.tj-nice-select::after {
	content: "";
	top: 50%;
	right: 520px;
	position: absolute;
	background: url(../img/icons/down-arrow.svg);
	background-position: center;
	background-size: cover;
	border: none;
	-webkit-transform: rotate(0);
	-ms-transform: rotate(0);
	transform: rotate(0);
	width: 15px;
	height: 12px;
	margin-top: -6px;
	-webkit-transform-origin: center;
	-ms-transform-origin: center;
	transform-origin: center;
}
.tj-nice-select.open::after {
	-webkit-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
	transform: rotate(-180deg);
}
.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus,
.nice-select .option {
	color: var(--tj-theme-accent-1);
}
/* END: Theme Default CSS */

/*
* ===============================
*  START: Preloader
* ===============================
*/
body.loaded {
	overflow: hidden !important;
	height: 100% !important;
}

.preloader { 
	position: fixed;
	z-index: 10;
	height: 100vh;
	width: 100%;
	left: 0;
	top: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	overflow: hidden;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	background: transparent;
	z-index: 99999999999999;
}

.preloader svg {
	position: absolute;
	top: 0;
	width: 100vw;
	height: 110vh;
	fill: var(--tj-black-2);
}

.preloader .preloader-heading .load-text {
	font-size: 70px;
	font-weight: 200;
	letter-spacing: 0px;
	text-transform: uppercase;
	z-index: 20;
}

.load-text span {
	-webkit-animation: loading 1s infinite alternate;
	animation: loading 1s infinite alternate;
}

.load-text span:nth-child(1) {
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}

.load-text span:nth-child(2) {
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s;
}

.load-text span:nth-child(3) {
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}

.load-text span:nth-child(4) {
	-webkit-animation-delay: 0.3s;
	animation-delay: 0.3s;
}

.load-text span:nth-child(5) {
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.4s;
}

.load-text span:nth-child(6) {
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s;
}

.load-text span:nth-child(7) {
	-webkit-animation-delay: 0.6s;
	animation-delay: 0.6s;
}

@-webkit-keyframes loading {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes loading {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/* END: Preloader */

/*
* ===============================
* START: Headers
* ===============================
*/

@-webkit-keyframes bounceInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-2000px);
	}
	60% {
		opacity: 1;
		-webkit-transform: translateY(0px);
	}
	80% {
		-webkit-transform: translateY(-10px);
	}
	100% {
		-webkit-transform: translateY(0);
	}
}

@keyframes bounceInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-2000px);
		transform: translateY(-2000px);
	}
	60% {
		opacity: 1;
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
	}
	80% {
		-webkit-transform: translateY(-10px);
		transform: translateY(-10px);
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}
@-webkit-keyframes bounceInUp {
	0%,
	10%,
	35%,
	50%,
	to {
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	10% {
		-webkit-transform: translate3d(0, 0px, 0);
		transform: translate3d(0, 0px, 0);
	}
	35% {
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0);
	}
	50% {
		-webkit-transform: translate3d(0, 2px, 0);
		transform: translate3d(0, 2px, 0);
	}
	80% {
		-webkit-transform: translate3d(0, -90px, 0);
		transform: translate3d(0, -90px, 0);
	}
	to {
		-webkit-transform: translate3d(0, -3000px, 0);
		transform: translate3d(0, -3000px, 0);
	}
}
@keyframes bounceInUp {
	0%,
	10%,
	35%,
	50%,
	to {
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	10% {
		-webkit-transform: translate3d(0, 0px, 0);
		transform: translate3d(0, 0px, 0);
	}
	35% {
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0);
	}
	50% {
		-webkit-transform: translate3d(0, 2px, 0);
		transform: translate3d(0, 2px, 0);
	}
	80% {
		-webkit-transform: translate3d(0, -90px, 0);
		transform: translate3d(0, -90px, 0);
	}
	to {
		-webkit-transform: translate3d(0, -3000px, 0);
		transform: translate3d(0, -3000px, 0);
	}
}
.tj-header-area {
	padding: 40px 0 20px;
	position: relative;
	z-index: 9;
	background-color: var(--tj-black-2);
}
.tj-header-area.header-absolute {
	position: absolute;
	background-color: transparent;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 99;
}
.tj-header-area.header-2 {
	width: 100%;
	position: fixed;
	top: -90px;
	left: 0;
	padding: 15px 0;
	z-index: 100;
	opacity: 0;
	transition: 0.3s;
	box-shadow: 0 0 30px rgba(135, 80, 247, 0.2);
}
.tj-header-area.header-2.sticky {
	top: 0;
	opacity: 1;
	animation: bounceInDown 1s;
	animation-duration: 1s;
	animation-fill-mode: both;
}
.tj-header-area.header-2.sticky-out {
	top: 0;
	opacity: 1;
	animation: bounceInUp 1s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

.tj-header-area .logo-box {
	max-width: 60px;
	width: 100%;
	margin-right: 35px;
}
.tj-header-area .logo-box a {
	display: inline-block;
}
.tj-header-area .header-info-list ul li {
	margin-right: 25px;
}
.tj-header-area .header-info-list ul li a {
	color: var(--tj-white);
	font-size: var(--tj-fz-btn);
	font-weight: var(--tj-fw-medium);
	text-decoration: none;
	transition: all 0.3s ease-in-out 0s;
}
.tj-header-area .header-info-list ul li a:hover {
	color: var(--tj-theme-primary);
}
.tj-header-area .header-menu {
	margin-left: auto;
}
.tj-header-area .header-menu ul {
	margin: 0;
	padding: 0 155px;
	list-style: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	column-gap: 35px;
}
.tj-header-area .header-menu ul li {
	position: relative;
}
.tj-header-area .header-menu ul li a {
	display: flex;
	color: var(--tj-white);
	font-size: var(--tj-fz-btn);
	font-weight: var(--tj-fw-medium);
	text-decoration: none;
	position: relative;
	padding: 10px 0;
}
.tj-header-area .header-menu ul li a::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 2px;
	border-radius: 4px;
	background: var(--tj-theme-primary);
	background: -o-linear-gradient(
		190deg,
		var(--tj-theme-secondary) 0%,
		var(--tj-theme-primary) 100%
	);
	background: linear-gradient(
		260deg,
		var(--tj-theme-secondary) 0%,
		var(--tj-theme-primary) 100%
	);
	bottom: 9px;
	left: 0;
	-webkit-transform-origin: right;
	-ms-transform-origin: right;
	transform-origin: right;
	-webkit-transform: scaleX(0);
	-ms-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition: -webkit-transform 0.3s ease-in-out;
	transition: -webkit-transform 0.3s ease-in-out;
	-o-transition: transform 0.3s ease-in-out;
	transition: transform 0.3s ease-in-out;
	transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}
.tj-header-area .header-menu ul li.current-menu-ancestor a::before,
.tj-header-area .header-menu ul li:hover a::before {
	-webkit-transform-origin: left;
	-ms-transform-origin: left;
	transform-origin: left;
	-webkit-transform: scaleX(1);
	-ms-transform: scaleX(1);
	transform: scaleX(1);
}
.tj-header-area .header-button {
	margin-right: 55px;
}
.tj-header-area .menu-bar {
	margin-right: 25px;
}
.tj-header-area .menu-bar button {
	border: none;
	padding: 0;
	background-color: transparent;
	height: 25px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	transform-origin: center center;
	transform: rotate(0deg);
	cursor: pointer;
	transition: transform 300ms ease;
}
.tj-header-area .menu-bar button span {
	height: 3px;
	width: 35px;
	display: block;
	background: var(--tj-white);
	cursor: pointer;
	transition: all 0.3s ease-in-out 0s;
	margin-left: auto;
}
.tj-header-area .menu-bar button span:nth-child(2) {
	width: 40px;
	transition-delay: 200ms;
}
.tj-header-area .menu-bar button span:nth-child(3) {
	width: 30px;
}
.tj-header-area .menu-bar button span:nth-child(4) {
	position: absolute;
	top: -8px;
	left: 50%;
	transform: translateX(-50%);
	display: block;
	width: 3px;
	height: 0;
	transition: height 400ms;
}
.tj-header-area .menu-bar.menu-bar-toggeled button {
	transform: rotate(45deg);
	transition-delay: 400ms;
}
.tj-header-area .menu-bar.menu-bar-toggeled button span:nth-child(1) {
	width: 0;
}
.tj-header-area .menu-bar.menu-bar-toggeled button span:nth-child(3) {
	width: 0;
}
.tj-header-area .menu-bar.menu-bar-toggeled button span:nth-child(4) {
	height: 40px;
	transition: height 200ms ease;
	transition-delay: 200ms;
}

/* END: Headers */

/*
* ===============================
*  START: Hero Section
* ===============================
*/
.hero-section {
	padding: 200px 0 50px;
	background: var(--tj-theme-accent-1);
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.hero-section:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 322px;
	height: 308px;
	border-radius: 50%;
	background: var(--tj-theme-primary);
	background: -o-linear-gradient(
		190deg,
		var(--tj-theme-primary) 0%,
		rgba(115, 67, 210, 0) 100%
	);
	background: linear-gradient(
		260deg,
		var(--tj-theme-primary) 0%,
		rgba(115, 67, 210, 0) 100%
	);
	-webkit-filter: blur(150px);
	filter: blur(150px);
	margin-right: -5%;
	margin-top: -5%;
	z-index: -1;
}
.hero-section .intro_text svg {
	font-family: var(--tj-ff-russo);
	position: absolute;
	width: 100%;
	height: 100%;
	left: 46%;
	top: 55%;
	transform: translate(-50%, -50%) scale(1);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: -1;
	animation: 3s pulsate infinite alternate ease-in-out;
}
.hero-section .intro_text svg text {
	text-transform: uppercase;
	/* animation: stroke 4s; */
	stroke-width: 1.2;
	stroke: var(--tj-theme-secondary);
	fill: transparent;
	font-size: 240px;
	display: inline-block;
	opacity: 0;
}

.hero-section .intro_text svg text.animate-stroke {
	animation: stroke 4s; /* Adjust the duration as needed */
	opacity: 0.7;
}
@keyframes stroke {
	0% {
		stroke-dashoffset: 25%;
		stroke-dasharray: 0 50%;
		stroke-width: 1;
	}
	100% {
		stroke-dashoffset: 100%;
		stroke-dasharray: 100% 0;
		stroke-width: 1;
	}
}
@keyframes pulsate {
	0% {
		transform: translate(-50%, -50%) scale(1);
	}
	50% {
		transform: translate(-50%, -50%) scale(1.05);
	}
	100% {
		transform: translate(-50%, -50%) scale(1);
	}
}

.hero-sub-title {
	font-size: var(--tj-fz-sub-title);
	font-weight: var(--tj-fw-bold);
	display: block;
	margin-bottom: 10px;
}

.hero-title {
	font-size: 65px;
	background: var(--tj-theme-primary);
	background: -webkit-gradient(
		linear,
		left top,
		right top,
		from(var(--tj-theme-primary)),
		to(var(--tj-white))
	);
	background: -o-linear-gradient(
		left,
		var(--tj-theme-primary) 0%,
		var(--tj-white) 100%
	);
	background: linear-gradient(
		to right,
		var(--tj-theme-primary) 0%,
		var(--tj-white) 100%
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.hero-content-box .lead {
	max-width: 550px;
	width: 100%;
	margin-bottom: 0;
}
.hero-content-box .button-box {
	margin-top: 50px;
	gap: 25px;
}
.hero-content-box .button-box .tj-btn-secondary {
	display: flex;
	align-items: center;
	letter-spacing: 0;
	gap: 6px;
}
.hero-content-box .button-box .tj-btn-secondary i {
	font-size: 17px;
}
.hero-image-box img {
	border-radius: 38px;
	-webkit-transform: rotate(4.29deg);
	-ms-transform: rotate(4.29deg);
	transform: rotate(4.29deg);
	position: relative;
	border: 2px solid var(--tj-theme-secondary);
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}

.hero-image-box img:hover {
	border: 2px solid var(--tj-theme-primary);
	-webkit-transform: rotate(0);
	-ms-transform: rotate(0);
	transform: rotate(0);
}

.hero-image-box {
	position: relative;
}

.hero-image-box:before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: var(--tj-theme-primary);
	background: -o-linear-gradient(
		190deg,
		var(--tj-theme-primary) 0%,
		rgba(115, 67, 210, 0) 100%
	);
	background: linear-gradient(
		260deg,
		var(--tj-theme-primary) 0%,
		rgba(115, 67, 210, 0) 100%
	);
	-webkit-filter: blur(150px);
	filter: blur(150px);
	margin-left: -5%;
	margin-bottom: -5%;
}

.hero-section .funfact-area {
	margin-top: 120px;
}
/* END: Hero Section */

/*
* ===============================
*  START: Services Section
* ===============================
*/
.services-section {
	padding-top: 120px;
	padding-bottom: 120px;
	background-color: var(--tj-black-2);
}
.services-section .section-header {
	margin-left: auto;
	margin-right: auto;
}
.services-widget > a {
	color: inherit;
	text-decoration: none;
}
.services-widget .service-item {
	border-bottom: 1px solid var(--tj-theme-secondary);
	padding: 0 30px;
	position: relative;
	z-index: 2;
	gap: 20px;
}
.services-widget .service-item .number {
	color: var(--tj-theme-primary);
	font-size: 20px;
	font-weight: var(--tj-fw-bold);
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.services-widget .service-item.current .number {
	color: var(--tj-white);
}
.services-widget .service-item.current.mleave .number {
	color: var(--tj-theme-primary);
}
.services-widget .service-item:hover .number {
	color: var(--tj-white);
}
.services-widget .service-item .left-box {
	width: calc(40% - 10px);
	padding: 30px 0;
	gap: 20px;
}
.services-widget .service-item .left-box .service-title {
	font-size: 30px;
	margin-bottom: 0;
	text-transform: capitalize;
}
.services-widget .service-item .right-box {
	width: calc(60% - 10px);
	padding: 30px 0;
	padding-left: 15%;
}
.services-widget .service-item .right-box p:last-child {
	margin-bottom: 0;
}
.services-widget .active-bg {
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	position: absolute;
	z-index: 1;
	background: var(--tj-theme-primary);
	background: -o-linear-gradient(
		190deg,
		var(--tj-theme-secondary) 0%,
		var(--tj-theme-primary) 100%
	);
	background: linear-gradient(
		260deg,
		var(--tj-theme-secondary) 0%,
		var(--tj-theme-primary) 100%
	);
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.services-widget i {
	font-size: 20px;
	line-height: 1;
	position: absolute;
	top: 50%;
	left: 55px;
	right: auto;
	-webkit-transform: translateY(-50%) rotate(90deg);
	-ms-transform: translateY(-50%) rotate(90deg);
	transform: translateY(-50%) rotate(180deg);
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	color: var(--tj-theme-primary);
}
.services-widget .service-item.current i {
	-webkit-transform: translateY(-50%) rotate(180deg);
	-ms-transform: translateY(-50%) rotate(180deg);
	transform: translateY(-50%) rotate(180deg);
	color: var(--tj-white);
}
.services-widget .service-item.current.mleave i {
	-webkit-transform: translateY(-50%) rotate(90deg);
	-ms-transform: translateY(-50%) rotate(90deg);
	transform: translateY(-50%) rotate(90deg);
	color: var(--tj-theme-primary);
}
.services-widget .service-item:hover i {
	-webkit-transform: translateY(-50%) rotate(0deg);
	-ms-transform: translateY(-50%) rotate(0deg);
	transform: translateY(-50%) rotate(270deg);
	color: var(--tj-white);
}
.services-widget .service-item .service-link {
	border: none;
	padding: 0;
	margin: 0;
	background: transparent;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.service_details {
	padding: 0 40px 50px 40px;
}
.service_details_content .service_info .subtitle {
	font-size: 16px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--tj-black-2);
	margin-bottom: 10px;
}
.service_details_content .service_info .title {
	color: var(--tj-black-2);
	margin-bottom: 10px;
}
.service_details_content .service_info .desc {
	font-size: 16px;
	color: var(--tj-theme-accent-1);
	margin-bottom: 20px;
}
.service_details_content .service_info .desc p:last-child {
	margin-bottom: 0;
}
.service_details_content .service_info ul {
	padding: 0;
	margin: 15px;
	list-style: none;
	columns: 2;
}
.service_details_content .service_info ul li {
	display: block;
	font-size: 16px;
	color: var(--tj-theme-accent-1);
	font-weight: var(--tj-fw-medium);
	position: relative;
	z-index: 1;
	padding-left: 22px;
	margin-bottom: 5px;
}
.service_details_content .service_info ul li::before {
	content: "\f00c";
	font-family: var(--tj-ff-fontawesome);
	font-weight: var(--tj-fw-medium);
	color: var(--tj-theme-primary);
	position: absolute;
	left:0;
	right:-20px;
	top: 0;
}
/* END: Services Section */

/*
* ===============================
*  START: Portfolio Section
* ===============================
*/
.portfolio-section {
	padding-top: 120px;
	padding-bottom: 80px;
	background: var(--tj-theme-accent-1);
}
.portfolio-section .section-header {
	margin-left: auto;
	margin-right: auto;
}
.portfolio-filter .button-group {
	background-color: var(--tj-black-2);
	border-radius: 60px;
	padding: 6px 8px;
	display: inline-block;
}
.portfolio-filter .button-group button {
	background: transparent;
	border: none;
	color: var(--tj-white);
	text-transform: capitalize;
	font-size: 15px;
	line-height: 1;
	padding: 12px 25px;
	border-radius: 50px;
	z-index: 10;
	position: relative;
}
.portfolio-filter .button-group {
	position: relative;
}
.portfolio-filter .button-group .active-bg {
	border-radius: 50px;
	top: 0px;
	bottom: 0px;
	left: 0px;
	position: absolute;
	z-index: 1;
	background: var(--tj-theme-primary);
	background: -o-linear-gradient(
		190deg,
		var(--tj-theme-secondary) 0%,
		var(--tj-theme-primary) 100%
	);
	background: linear-gradient(
		260deg,
		var(--tj-theme-secondary) 0%,
		var(--tj-theme-primary) 100%
	);
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.portfolio-box {
	padding-top: 50px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
}
.portfolio-box:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 35%;
	height: 35%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--tj-theme-primary);
	background: -o-linear-gradient(
		190deg,
		var(--tj-theme-primary) 0%,
		rgba(115, 67, 210, 0) 100%
	);
	background: linear-gradient(
		260deg,
		var(--tj-theme-primary) 0%,
		rgba(115, 67, 210, 0) 100%
	);
	-webkit-filter: blur(150px);
	filter: blur(150px);
}
.portfolio-box .portfolio-sizer {
	width: 48%;
}
.portfolio-box .portfolio-item {
	background-color: var(--tj-theme-accent-2);
	margin-bottom: 4%;
	padding: 36px 36px 0 36px;
	border-radius: 10px;
	width: 48%;
}
.portfolio-box .gutter-sizer {
	width: 4%;
}
.portfolio-box .portfolio-item--width2 {
	width: 22%;
}
.portfolio-box .image-box {
	text-align: center;
}
.portfolio-box .content-box {
	position: absolute;
	bottom: 15px;
	left: 0;
	background: #000;
	width: calc(100% - 40px);
	border-radius: 15px;
	margin: 0 auto;
	right: 0;
	padding: 20px;
	padding-right: 50px;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
	-webkit-transform: translateY(15px);
	-ms-transform: translateY(15px);
	transform: translateY(15px);
	background: var(--tj-theme-primary);
	background: -o-linear-gradient(
		190deg,
		var(--tj-theme-secondary) 0%,
		var(--tj-theme-primary) 100%
	);
	background: linear-gradient(
		260deg,
		var(--tj-theme-secondary) 0%,
		var(--tj-theme-primary) 100%
	);
}
.portfolio-box .portfolio-item:hover .content-box {
	opacity: 1;
	visibility: visible;
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
}
.portfolio-box .portfolio-item .content-box .portfolio-title {
	font-size: 30px;
}
.portfolio-box .portfolio-item .content-box p {
	margin-bottom: 0;
}
.portfolio-box .portfolio-item .content-box .portfolio-link {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: transparent;
	border: none;
	padding: 0;
}
.portfolio-box .portfolio-item .content-box i {
	font-size: 20px;
	line-height: 1;
	position: absolute;
	top: 50%;
	left: 25px;
	right: auto;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	color: var(--tj-white);
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
	-webkit-transform-origin: center;
	-ms-transform-origin: center;
	transform-origin: center;
}
.portfolio-box .portfolio-item:hover .content-box i {
	-webkit-transform: translateY(-50%) rotate(360deg);
	-ms-transform: translateY(-50%) rotate(360deg);
	transform: translateY(-50%) rotate(270deg);
}
/*  END: Portfolio Section */

/*
* ===============================
*  START: Popup Section
* ===============================
*/
.popup_content_area {
	max-width: 1100px;
	width: 100%;
	background-color: var(--tj-theme-secondary);
	-webkit-box-shadow: 0 0 40px rgba(255, 255, 255, 0.03);
	box-shadow: 0 0 40px rgba(255, 255, 255, 0.03);
	margin: 0 auto;
	position: relative;
}
.popup-mfp {
	overflow: hidden;
}
.popup-mfp .mfp-container {
	position: fixed;
	padding: 75px 0;
	overflow-y: scroll;

	scrollbar-width: thin;
	scrollbar-color: var(--tj-theme-primary) var(--tj-theme-secondary);
}
.popup-mfp .mfp-container::-webkit-scrollbar {
	height: 4px;
	width: 4px;
	background: var(--tj-theme-secondary);
}

.popup-mfp .mfp-container::-webkit-scrollbar-thumb {
	background: var(--tj-theme-primary);
	-webkit-border-radius: 1px;
	-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.75);
}

.popup-mfp .mfp-container::-webkit-scrollbar-corner {
	background: transparent;
}

.popup-mfp .zoom-anim-dialog {
	opacity: 0;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	-webkit-transform: scale(0.8);
	-ms-transform: scale(0.8);
	transform: scale(0.8);
}

.popup-mfp.mfp-ready .zoom-anim-dialog {
	opacity: 1;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.popup-mfp.mfp-removing .zoom-anim-dialog {
	-webkit-transform: scale(0.8);
	-ms-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0;
}

.popup-mfp.mfp-bg {
	opacity: 0;
	-webkit-transition: opacity 0.3s ease-out;
	-o-transition: opacity 0.3s ease-out;
	transition: opacity 0.3s ease-out;
}

.popup-mfp.mfp-ready.mfp-bg {
	opacity: 0.8;
}

.popup-mfp.mfp-removing.mfp-bg {
	opacity: 0;
}

.popup_content_area .mfp-close {
	background: -o-linear-gradient(
		315deg,
		var(--tj-theme-primary) 16.35%,
		var(--tj-black-2) 91.35%
	);
	background: linear-gradient(
		135deg,
		var(--tj-theme-primary) 16.35%,
		var(--tj-black-2) 91.35%
	);
	color: var(--tj-white);
	opacity: 1;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	font-size: 30px;
	line-height: 1;
	font-weight: var(--tj-fw-normal);
	right: -45px;
	top: -45px;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}
.popup_content_area .mfp-close:hover {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}
.popup_modal_img {
	padding: 50px 40px 0 40px;
	text-align: center;
	max-height: 670px;
	overflow: hidden;
}
.popup_modal_img img {
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}
.popup_modal_content {
	background-color: var(--tj-white);
	padding-top: 60px;
}
.popup_modal_content .portfolio_info {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	align-items: start;
	gap: 50px;
	padding: 0 40px;
}
.popup_modal_content .portfolio_info .portfolio_info_text,
.popup_modal_content .portfolio_info .portfolio_info_items {
	max-width: calc(50% - 25px);
	width: 100%;
}
.portfolio_description .title,
.portfolio_info .portfolio_info_text .title {
	color: var(--tj-black-2);
	margin-bottom: 10px;
}
.portfolio_description .desc,
.portfolio_info .portfolio_info_text .desc {
	font-size: 16px;
	color: var(--tj-theme-accent-1);
	letter-spacing: 0.02em;
}
.portfolio_description .desc p:last-child,
.portfolio_info .portfolio_info_text .desc p:last-child {
	margin-bottom: 0;
}
.portfolio_info .portfolio_info_text .btn {
	margin-top: 20px;
}
.portfolio_info .portfolio_info_items {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-column-gap: 20px;
	-moz-column-gap: 20px;
	column-gap: 20px;
	row-gap: 30px;
}
.portfolio_info .portfolio_info_items .info_item {
	max-width: calc(50% - 10px);
	width: 100%;
}
.portfolio_info_items .info_item .key {
	display: block;
	font-size: 16px;
	letter-spacing: 0.02em;
	color: var(--tj-theme-accent-1);
}
.portfolio_info_items .info_item .value {
	display: block;
	font-size: 16px;
	font-weight: var(--tj-fw-medium);
	color: var(--tj-theme-accent-1);
	margin-top: 5px;
}
.portfolio_info_items .info_item .value a {
	color: inherit;
	font-size: inherit;
	text-decoration: none;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}
.portfolio_info_items .info_item .value a:hover {
	color: var(--tj-theme-primary);
}
.popup_modal_content .portfolio_gallery {
	margin-top: 50px;
}
.portfolio_gallery .gallery_item {
	max-width: 930px;
	width: 100%;
}
.portfolio_gallery .owl-dots {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	gap: 6px;
}
.portfolio_gallery .owl-dots .owl-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--tj-theme-primary);
	opacity: 0.6;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
	margin: 0;
	padding: 0;
}
.portfolio_gallery .owl-dots .owl-dot:hover,
.portfolio_gallery .owl-dots .owl-dot.active {
	width: 30px;
	opacity: 1;
	border-radius: 30px;
}
.portfolio_gallery .owl-dots .owl-dot span {
	display: none;
}
.popup_modal_content .portfolio_story_approach,
.popup_modal_content .portfolio_description {
	padding: 0 40px;
	margin-top: 50px;
}

.portfolio_story_approach .portfolio_approach,
.portfolio_story_approach .portfolio_story {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 50px;
	margin-bottom: 50px;
}
.portfolio_approach .approach_title,
.portfolio_story .story_title {
	max-width: 265px;
	width: 100%;
}
.portfolio_approach .approach_title .title,
.portfolio_story .story_title .title {
	font-size: 20px;
	text-transform: uppercase;
	color: var(--tj-black-2);
	margin-bottom: 0;
}
.portfolio_approach .approach_content,
.portfolio_story .story_content {
	max-width: 600px;
	width: 100%;
	letter-spacing: 0.02em;
	color: var(--tj-theme-accent-1);
	font-size: 16px;
}
.portfolio_approach .approach_content p:last-child,
.portfolio_story .story_content p:last-child {
	margin: 0;
}
.popup_modal_content .portfolio_navigation {
	background-color: var(--tj-theme-primary);
	padding: 35px 50px;

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 20px;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.portfolio_navigation .navigation_item {
	max-width: calc(50% - 10px);
	width: 100%;
}
.portfolio_navigation .navigation_item .project {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: end;
	gap: 15px;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	text-decoration: none;
}
.portfolio_navigation .navigation_item .project i {
	font-size: 30px;
	line-height: 1;
	color: var(--tj-white);
	max-width: 30px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(210deg);
	margin-bottom: 10px;
	-webkit-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
}
.portfolio_navigation .navigation_item.prev-project .project i {
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(140deg);
}
.portfolio_navigation .navigation_item .project:hover i {
	-webkit-transform: rotate(0);
	-ms-transform: rotate(0);
	transform: rotate(180deg);
}
.portfolio_navigation .navigation_item .project .nav_project .label {
	font-size: 16px;
	letter-spacing: 0.02em;
	display: block;
	color: var(--tj-white);
}
.portfolio_navigation .navigation_item .project .nav_project .title {
	font-size: 45px;
	margin: 0;
	color: var(--tj-white);
}
.portfolio_navigation .navigation_item.next-project {
	text-align: end;
}
/* END: Popup Section */

/*
* ===============================
*  START: Resume Section
* ===============================
*/
.resume-section {
	padding-top: 120px;
	padding-bottom: 90px;
	background: var(--tj-black-2);
}
.resume-section .resume-item {
	margin-left: 100px;
	margin-right: 0;
}
.resume-widget .resume-item {
	position: relative;
	padding: 20px 30px;
	margin-bottom: 30px;
	border-radius: 20px;
	background: var(--tj-theme-accent-2);
	z-index: 10;
}
.resume-widget .resume-item:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transition: opacity 0.5s linear;
	-o-transition: opacity 0.5s linear;
	transition: opacity 0.5s linear;
	opacity: 0;
	z-index: -1;
	border-radius: 20px;
	background: var(--tj-theme-primary);
	background: -o-linear-gradient(
		190deg,
		var(--tj-theme-secondary) 0%,
		var(--tj-theme-primary) 100%
	);
	background: linear-gradient(
		260deg,
		var(--tj-theme-secondary) 0%,
		var(--tj-theme-primary) 100%
	);
}
.resume-widget .resume-item:hover:before {
	opacity: 1;
}
.resume-widget .resume-item .time {
	color: var(--tj-theme-primary);
	font-size: 20px;
	font-weight: 800;
	margin-bottom: 8px;
}
.resume-widget .resume-item:hover .time {
	color: var(--tj-white);
}
.resume-widget .resume-item .resume-title {
	font-size: 25px;
	text-transform: uppercase;
	margin-bottom: 8px;
}
/* END: Resume Section */

/*
* ===============================
*  START: Skills Section
* ===============================
*/
.skills-section {
	padding-top: 120px;
	padding-bottom: 120px;
	background: var(--tj-theme-accent-1);
}

.skills-section .section-header {
	margin-left: auto;
	margin-right: auto;
}
.skills-widget {
	gap: 20px;
	row-gap: 30px;
}
.skills-widget .skill-item {
	max-width: 180px;
	width: 100%;
	text-align: center;
}

.skills-widget .skill-inner {
	border-radius: 25px;
	padding: 40px 15px 30px;
	background: var(--tj-theme-accent-2);
	border: 1px solid transparent;
	margin-bottom: 15px;
	-webkit-transition: 0.6s;
	-o-transition: 0.6s;
	transition: 0.6s;
}

.skills-widget .skill-item:hover .skill-inner {
	background: var(--tj-theme-secondary);
	border: 1px solid var(--tj-theme-primary);
}

.skills-widget .skill-item .icon-box {
	max-width: 60px;
	width: 100%;
	margin: 0 auto 30px;
}

.skills-widget .skill-item .icon-box img {
	filter: grayscale(90%);
	-webkit-filter: grayscale(90%);
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}

.skills-widget .skill-item:hover .icon-box img {
	filter: grayscale(0);
	-webkit-filter: grayscale(0);
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}

.skills-widget .skill-item .number {
	color: var(--tj-grey-1);
	font-weight: 800;
	font-size: 20px;
	line-height: 1;
}

.skills-widget .skill-item:hover .number {
	color: var(--tj-theme-primary);
}

.skills-widget .skill-item p {
	color: var(--tj-theme-primary);
	margin-bottom: 0;
}
/*  END: Skills Section */

/*
* ===============================
*  START: Testimonials Section
* ===============================
*/
.testimonial-section {
	padding-top: 120px;
	padding-bottom: 120px;
	background: var(--tj-black-2);
	position: relative;
}
.testimonial-section:before {
	content: "";
	position: absolute;
	left: 5%;
	bottom: 15%;
	width: 20%;
	height: 20%;
	border-radius: 50%;
	background: var(--tj-theme-primary);
	background: -o-linear-gradient(
		190deg,
		var(--tj-theme-primary) 0%,
		rgba(115, 67, 210, 0) 100%
	);
	background: linear-gradient(
		260deg,
		var(--tj-theme-primary) 0%,
		rgba(115, 67, 210, 0) 100%
	);
	-webkit-filter: blur(150px);
	filter: blur(150px);
}
.testimonials-widget .testimonial-item {
	background: var(--tj-theme-accent-2);
	max-width: 300px;
	width: 100%;
	border-radius: 15px;
	padding: 25px;
}
.testimonials-widget .testimonial-item .top-area {
	margin-bottom: 20px;
}
.testimonials-widget .testimonial-item .image-box {
	width: 40%;
	max-width: 120px;
}
.testimonials-widget .testimonial-item .image-box img {
	border-radius: 5px 5px 5px 125px;
}
.testimonials-widget .testimonial-item .logo-box {
	max-width: 100px;
	width: 100%;
}
.testimonials-widget .testimonial-item .icon-box {
	margin-bottom: 25px;
}
.testimonials-widget .testimonial-item .icon-box svg {
	margin-right: 5px;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition-delay: 1.5s;
	transition: 0.4s;
}
.testimonials-widget
	.owl-item.active
	.testimonial-item
	.icon-box
	svg:first-child {
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.testimonials-widget
	.owl-item.active
	.testimonial-item
	.icon-box
	svg:last-child {
	-webkit-transform: translateX(-22px) rotate(135deg);
	-ms-transform: translateX(-22px) rotate(135deg);
	transform: translateX(-22px) rotate(135deg);
}
.testimonials-widget .testimonial-item .quote {
	font-size: 16px;
	margin-bottom: 50px;
	direction: rtl;
}
.testimonials-widget .testimonial-item .name {
	font-size: 18px;
	margin-bottom: 5px;
	color: var(--tj-white);
	direction: rtl;
}
.testimonials-widget .testimonial-item span.designation {
	font-size: 14px;
	display: block;
	direction: rtl;
}
/* END: Testimonials Section */

/*
* ===============================
*  START: Blog Section
* ===============================
*/
.blog-section {
	padding-top: 120px;
	padding-bottom: 90px;
	background: var(--tj-theme-accent-1);
}
.blog-section .section-header {
	margin-left: auto;
	margin-right: auto;
}
.blog-item {
	background: var(--tj-theme-accent-2);
	border-radius: 15px;
	max-width: 400px;
	width: 100%;
	margin: 0 auto 30px;
	position: relative;
	z-index: 1;
}
.blog-item .blog-thumb {
	overflow: hidden;
	border-radius: 15px;
	position: relative;
	z-index: 1;
}
.blog-item .blog-thumb .category {
	display: inline-block;
	background-size: 200%;
	background-image: linear-gradient(
		90deg,
		var(--tj-theme-primary) 0%,
		var(--tj-theme-secondary) 110.61%
	);
	text-decoration: none;
	color: var(--tj-white);
	position: absolute;
	right: 15px;
	top: 15px;
	z-index: 2;
	text-transform: uppercase;
	font-size: 13px;
	line-height: 1;
	padding: 7px 10px;
	border-radius: 50px;
	transition: 0.4s;
}
.blog-item .blog-thumb .category:hover {
	background-size: 100%;
}
.blog-item .blog-thumb a {
	display: block;
}
.blog-item .blog-thumb img {
	width: 100%;
	border-radius: 15px;
	transition: all 0.5s ease-in-out 0s;
}
.blog-item:hover .blog-thumb img {
	transform: scale(1.1);
}
.blog-item .blog-content {
	padding: 15px 15px 20px;
	position: absolute;
	bottom: 15px;
	left: 0;
	width: calc(100% - 40px);
	border-radius: 15px;
	background: var(--tj-theme-secondary);
	right: 0;
	margin: 0 auto;
	z-index: 1;
}
.blog-item .blog-content::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transition: opacity 0.5s linear;
	-o-transition: opacity 0.5s linear;
	transition: opacity 0.5s linear;
	background: -o-linear-gradient(
		190deg,
		var(--tj-theme-secondary) 0%,
		var(--tj-theme-primary) 100%
	);
	background: linear-gradient(
		260deg,
		var(--tj-theme-secondary) 0%,
		var(--tj-theme-primary) 100%
	);
	opacity: 0;
	z-index: -1;
	border-radius: 15px;
}
.blog-item:hover .blog-content:before {
	opacity: 1;
}
.blog-item .blog-meta {
	margin-bottom: 10px;
}
.blog-meta ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
}
.blog-meta ul li {
	display: flex;
	align-items: center;
	font-size: 14px;
	line-height: 1;
	color: var(--tj-theme-primary);
	font-weight: var(--tj-fw-medium);
	transition: all 0.5s ease-in-out 0s;
}
.blog-item:hover .blog-meta li {
	color: var(--tj-body);
}
.blog-meta ul li i {
	line-height: 1;
	margin-left: 5px;
	margin-right: auto;
}
.blog-meta ul li a {
	color: inherit;
	text-decoration: none;
	font-size: inherit;
	font-weight: inherit;
}
.blog-item .blog-content .blog-title {
	color: var(--tj-white);
	font-size: 22px;
	text-transform: capitalize;
	margin-bottom: 0;
	transition: all 0.4s ease-in-out 0s;
}
/* END: Blog Section */

/*
* ===============================
*  START: Blog Standard Page
* ===============================
*/
.tj-posts__area {
	background-color: var(--tj-black-2);
	padding-bottom: 120px;
	padding-top: 120px;
}
.tj-post {
	position: relative;
	position: relative;
	z-index: 1;
	background-color: var(--tj-theme-accent-2);
	border-radius: 8px;
	overflow: hidden;
}
.tj-post:not(:last-child) {
	margin-bottom: 40px;
}
.tj-post .tj-post__thumb {
	display: flex;
	position: relative;
	z-index: 1;
	overflow: hidden;
}
.tj-post .tj-post__thumb a {
	display: inline-block;
}
.tj-post .tj-post__thumb img {
	transition: all 0.8s ease-in-out 0s;
	transform-origin: center;
}
.tj-post:hover .tj-post__thumb img {
	transform: scale(1.1);
}
.tj-post__thumb .category {
	display: inline-block;
	background-size: 200%;
	background-image: linear-gradient(
		90deg,
		var(--tj-theme-primary) 0%,
		var(--tj-theme-secondary) 110.61%
	);
	text-decoration: none;
	color: var(--tj-white);
	position: absolute;
	left: 15px;
	right: auto;
	top: 15px;
	z-index: 2;
	text-transform: uppercase;
	font-size: 13px;
	line-height: 1;
	padding: 10px 15px;
	border-radius: 50px;
	transition: 0.4s;
}
.tj-post__thumb .category:hover {
	background-size: 100%;
}
@keyframes animate-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7),
			0 0 0 0 rgba(255, 255, 255, 0.7);
	}
	40% {
		box-shadow: 0 0 0 50px rgba(255, 255, 255, 0),
			0 0 0 0 rgba(255, 255, 255, 0.7);
	}
	80% {
		box-shadow: 0 0 0 50px rgba(255, 255, 255, 0),
			0 0 0 30px rgba(255, 255, 255, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0),
			0 0 0 30px rgba(255, 255, 255, 0);
	}
}
.tj-post__thumb .tj-post__video .popup_video {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background-color: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	line-height: 1;
	color: var(--tj-white);
	text-decoration: none;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.tj-post__thumb .tj-post__video .popup_video::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: var(--tj-theme-primary);
	opacity: 0.7;
	z-index: -1;
	border-radius: 50%;
	animation: animate-pulse 3s linear infinite;
	transition: all 0.4s ease-in-out 0s;
}
.tj-post__thumb .tj-post__video .popup_video:hover::after {
	opacity: 1;
}
.tj-post .tj-post__thumb .tj-post__gallery .tj-post-gallery__img img {
	transform: scale(1);
}
.tj-post__gallery.owl-carousel .owl-nav button {
	width: 45px;
	height: 45px;
	font-size: 18px;
	line-height: 1;
	color: var(--tj-white);
	padding: 0;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}
.tj-post__gallery.owl-carousel .owl-nav button::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: var(--tj-theme-primary);
	opacity: 0.7;
	transition: all 0.4s ease-in-out 0s;
	z-index: -1;
	border-radius: 50%;
}
.tj-post__gallery.owl-carousel .owl-nav button:hover::after {
	opacity: 1;
}
.tj-post__gallery.owl-carousel .owl-nav button.owl-next {
	left: auto;
	right: 15px;
}
.tj-post .tj-post__content {
	padding: 30px;
}
.tj-post__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	column-gap: 25px;
	row-gap: 10px;
	margin-bottom: 20px;
}
.tj-post__meta span {
	display: inline-flex;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--tj-body);
}
.tj-post__meta span a {
	text-decoration: none;
	font-size: inherit;
	line-height: 1;
	color: inherit;
	transition: all 0.4s ease-in-out 0s;
}
.tj-post__meta span a:hover {
	color: var(--tj-theme-primary);
}
.tj-post__meta span i {
	color: var(--tj-theme-primary);
	margin-left: 8px;
}
.tj-post__content .tj-post__title {
	font-size: 30px;
	line-height: 1.3;
	color: var(--tj-white);
	margin-bottom: 20px;
}
.tj-post__content .tj-post__title a {
	display: inline;
	font-size: inherit;
	color: inherit;
	line-height: inherit;
	background-image: -webkit-gradient(
		linear,
		left top,
		right top,
		color-stop(0, currentColor),
		to(currentColor)
	);
	background-image: linear-gradient(
		to right,
		currentColor 0,
		currentColor 100%
	);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 1px;
	-webkit-transition: all 0.3s, background-size 0.8s;
	transition: all 0.3s, background-size 0.8s;
}
.tj-post__content .tj-post__title a:hover {
	color: var(--tj-theme-primary);
	background-size: 100% 1px;
}
.tj-post__content .tj-post__excerpt {
	font-size: 16px;
	color: var(--tj-body);
}
.tj-post__content .tj-post__excerpt p {
	margin: 0;
	font-size: inherit;
	color: inherit;
}
.tj-post__content .tj-post__btn {
	margin-top: 30px;
}

.wp-block-quote,
blockquote {
	background-color: var(--tj-theme-accent-2);
	border-radius: 4px;
	max-width: 100%;
	padding: 40px 30px;
	position: relative;
	margin-bottom: 40px;
	border: none;
	border-radius: 8px;
	color: var(--tj-body);
}
.wp-block-quote::before,
blockquote::before {
	display: block;
	content: "\f10e";
	font-size: 40px;
	line-height: 1;
	font-family: var(--tj-ff-fontawesome);
	font-weight: var(--tj-fw-light);
	position: relative;
	margin: 0 0 15px;
}
.wp-block-quote p:last-child,
blockquote p:last-child {
	margin: 0;
}
.wp-block-quote cite,
blockquote cite {
	font-weight: var(--tj-fw-medium);
	font-size: 20px;
	line-height: 1.2;
	color: var(--tj-white);
}
.wp-block-quote cite::before,
blockquote cite::before {
	display: inline-block;
	width: 35px;
	height: 2px;
	background: var(--tj-theme-primary);
	border-radius: 2px;
	content: "";
	position: relative;
	top: -6px;
	margin-left: 15px;
}
.tj__pagination {
	margin-top: 60px;
}
.tj__pagination ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}
.tj__pagination ul li .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	text-decoration: none;
	border: 1px solid var(--tj-white);
	font-size: 16px;
	line-height: 1;
	font-weight: var(--tj-fw-medium);
	color: var(--tj-white);
	background-color: transparent;
	transition: all 0.4s ease-in-out 0s;
	border: none;
}
.tj__pagination ul li .page-numbers:hover,
.tj__pagination ul li .page-numbers.current {
	border-color: var(--tj-theme-primary);
	background-color: var(--tj-theme-primary);
}
/* END: Blog Standard Page */

/*
* ===============================
*  START: Blog Details Page
* ===============================
*/
.tj-post-details__area {
	background-color: var(--tj-black-2);
	padding-top: 120px;
	padding-bottom: 120px;
}
.tj-single__post {
	margin-bottom: 50px;
}
.tj-single__post .tj-post__thumb {
	margin-bottom: 35px;
	position: relative;
}
.tj-single__post .tj-post__thumb img {
	border-radius: 8px 8px 0 0;
}
.tj-single__post .tj-post__content .tj-post__title {
	margin-top: 0;
}
.tj-single__post h1,
.tj-single__post h2,
.tj-single__post h3,
.tj-single__post h4,
.tj-single__post h5,
.tj-single__post h6 {
	margin-top: 30px;
}
.tj-single__post p {
	margin-bottom: 20px;
}
.tj-single__post blockquote {
	margin-bottom: 20px;
}
.tj-single__post ul {
	list-style: none;
	padding: 0;
	margin: 0 0 20px 0;
}
.tj-single__post ul li {
	display: block;
	position: relative;
	z-index: 1;
	font-weight: var(--tj-fw-medium);
	padding-right: 25px;
}
.tj-single__post ul li:not(:last-child) {
	margin-bottom: 10px;
}
.tj-single__post ul li::before {
	content: "\f058";
	font-family: var(--tj-ff-fontawesome);
	font-weight: var(--tj-fw-bold);
	color: var(--tj-theme-primary);
	position: absolute;
	right: 0;
	left: auto;
	top: 0;
}
.single-post_tag_share {
	border-top: 1px solid var(--tj-grey-4);
	padding-top: 31px;
	padding-bottom: 30px;
	display: flex;
	flex-wrap: wrap;
	align-items: start;
	justify-content: space-between;
	gap: 30px;
}
.single-post_tag_share .tj_tag {
	width: calc(100% - 220px);
	display: flex;
	align-items: start;
	gap: 20px;
}
.single-post_tag_share.no-social-share .tj_tag {
	width: 100%;
}
.single-post_tag_share .tj_tag .tag__title {
	margin-right: 10px;
	margin-bottom: 0;
	line-height: 1.6;
}
.single-post_tag_share .tj_tag .tagcloud {
	gap: 10px;
}
.single-post_tag_share .tj_tag .tagcloud a {
	border-color: var(--tj-theme-accent-2);
	background-color: var(--tj-theme-accent-2);
}
.single-post_tag_share .tj_tag .tagcloud a:hover {
	background-color: var(--tj-theme-primary);
	border-color: var(--tj-theme-primary);
}
.single-post_tag_share .share_link {
	display: flex;
	align-items: center;
	gap: 10px;
}
.single-post_tag_share .share_link a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--tj-theme-primary);
	color: var(--tj-white);
	text-decoration: none;
	border-radius: 50%;
	transition: all 0.4s ease-in-out 0s;
}
.single-post_tag_share .share_link a:hover {
	background-color: var(--tj-theme-primary);
	color: var(--tj-white);
}

.single-post__navigation {
	padding-top: 31px;
	padding-bottom: 31px;
	border-top: 1px solid var(--tj-grey-4);
	border-bottom: 1px solid var(--tj-grey-4);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
}
.single-post__navigation .tj-navigation_post {
	max-width: 48%;
	width: 100%;
	min-height: 145px;
	overflow: hidden;
}
.single-post__navigation .tj-navigation_post .tj-navigation-post_inner {
	padding: 35px 25px;
	background-color: var(--tj-theme-accent-2);
	display: flex;
	width: 100%;
	height: 100%;
	gap: 20px;
	align-items: center;
}
.single-post__navigation
	.tj-navigation_post
	.tj-navigation-post_inner
	.navigation-post_img {
	max-width: 85px;
	width: 100%;
	height: 85px;
}
.single-post__navigation
	.tj-navigation_post
	.tj-navigation-post_inner
	.navigation-post_img
	a {
	display: inline-block;
	width: 100%;
	height: 100%;
}
.single-post__navigation
	.tj-navigation_post
	.tj-navigation-post_inner
	.navigation-post_img
	a
	img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}
.single-post__navigation
	.tj-navigation_post
	.tj-navigation-post_inner
	.tj-content
	.post_pagination_nav {
	text-transform: uppercase;
	display: block;
	margin-bottom: 8px;
	color: var(--tj-theme-primary);
}
.single-post__navigation
	.tj-navigation_post
	.tj-navigation-post_inner
	.tj-content
	.post_pagination_nav
	i {
	margin-right: 10px;
}
.single-post__navigation
	.tj-navigation_post
	.tj-navigation-post_inner
	.tj-content
	.post_pagination_title
	.title {
	font-size: 18px;
	margin: 0;
	line-height: 1.4;
	word-break: break-word;
	transition: all 0.4s ease-in-out 0s;
}
.single-post__navigation
	.tj-navigation_post
	.tj-navigation-post_inner
	.tj-content
	.post_pagination_title
	.title:hover {
	color: var(--tj-theme-primary);
}
.single-post__navigation
	.tj-navigation_post
	.tj-navigation-post_inner.next_post
	.tj-content {
	text-align: end;
}
.tj-comments__container {
	margin-top: 50px;
}
.tj-comments__container .tj-comments__wrap {
	margin-bottom: 50px;
}
.tj-comments__container .comment-reply-title {
	margin-bottom: 0;
}
.tj-comments__wrap .tj-comment__title h3,
.comment-respond .tj-comment__title {
	display: inline-block;
	font-size: 30px;
	line-height: 1;
	position: relative;
	padding-bottom: 15px;
	margin-bottom: 20px;
}
.tj-comments__wrap .tj-comment__title h3 {
	margin-bottom: 30px;
}
.tj-comments__wrap .tj-comment__title h3:before,
.comment-respond .tj-comment__title:before {
	background-color: var(--tj-theme-primary);
	content: "";
	width: 60px;
	height: 2px;
	position: absolute;
	bottom: 0;
	left: 0;
}
.tj-post-comment__form .form_group {
	margin-bottom: 20px;
}
.tj-post-comment__form .form_group select,
.tj-post-comment__form .form_group .nice-select,
.tj-post-comment__form
	.form_group
	input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]),
.tj-post-comment__form .form_group textarea {
	background: var(--tj-theme-accent-2);
}
.tj-post-comment__form .tj-btn-primary {
	width: auto;
	margin-top: 10px;
}
.tj-post-comment__form .comment-form-cookies-consent {
	display: flex;
	align-items: start;
	gap: 10px;
}
.tj-post-comment__form .comment-form-cookies-consent input {
	margin-top: 5px;
}

.tj-latest__comments ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.tj-latest__comments .tj__comment .children {
	padding-left: 30px;
}
.tj__comment .tj-comment__wrap {
	display: flex;
	flex-wrap: wrap;
	column-gap: 20px;
	margin-bottom: 30px;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--tj-grey-4);
}
.tj__comment .tj-comment__wrap .comment__avatar {
	max-width: 120px;
	width: 100%;
	height: 120px;
}
.tj__comment .tj-comment__wrap .comment__avatar img {
	width: 100%;
	height: 100%;
}
.tj__comment .tj-comment__wrap .comment__text {
	width: calc(100% - 140px);
}
.tj__comment .tj-comment__wrap .comment__text .avatar__name {
	margin-bottom: 15px;
}
.tj__comment .tj-comment__wrap .comment__text .avatar__name h5 {
	margin-bottom: 5px;
	transition: all 0.4s ease-in-out 0s;
}
.tj__comment .tj-comment__wrap .comment__text .avatar__name h5:hover {
	color: var(--tj-theme-primary);
}
.tj__comment .tj-comment__wrap .comment__text .avatar__name span {
	font-size: 14px;
	display: block;
}
.tj__comment .tj-comment__wrap .comment__text p:last-child {
	margin-bottom: 0;
}
.tj__comment
	.tj-comment__wrap
	.comment__text
	.comment__reply
	.comment-reply-link {
	display: inline-block;
	color: var(--tj-theme-primary);
	font-size: 16px;
	line-height: 1;
	padding: 7px 20px;
	border: 1px solid var(--tj-theme-primary);
	text-decoration: none;
	margin-top: 10px;
	transition: all 0.4s ease-in-out 0s;
}
.tj__comment
	.tj-comment__wrap
	.comment__text
	.comment__reply
	.comment-reply-link:hover {
	color: var(--tj-white);
	background-color: var(--tj-theme-primary);
}
/* END: Blog Details Page */

/*
* ===============================
*  START: Contact Section
* ===============================
*/
.contact-section {
	padding-top: 120px;
	padding-bottom: 120px;
	background: var(--tj-black-2);
	position: relative;
}
.contact-form-box {
	background: var(--tj-theme-accent-2);
	padding: 40px;
	border-radius: 15px;
}
.contact-form-box .section-header {
	margin-bottom: 25px;
}

.form_group {
	margin-bottom: 15px;
	width: 100%;
}
.form_group select,
.form_group .nice-select,
.form_group
	input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]),
.form_group textarea {
	display: block;
	width: 100%;
	background: var(--tj-black-2);
	border: 1px solid var(--tj-grey-4);
	font-size: 16px;
	line-height: 1;
	color: var(--tj-white);
	padding: 14px 20px;
	border-radius: 8px;
	transition: all 0.3s 0s ease-out;
	outline: none;
	height: auto;
}
.form_group .nice-select {
	padding: 17px 20px;
}
.form_group textarea {
	height: 200px;
	resize: none;
}
.form_group
	input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):focus,
.form_group textarea:focus {
	border-color: var(--tj-theme-primary);
}
.form_btn .btn {
	padding: 20px 35px;
}
.contact-info-list li {
	padding-right: 165px;
	margin-bottom: 40px;
}
.contact-info-list li:last-child {
	margin-bottom: 0;
}
.contact-info-list .icon-box {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: -o-linear-gradient(
		289deg,
		var(--tj-theme-secondary) 0%,
		var(--tj-theme-primary) 100%
	);
	background: linear-gradient(
		161deg,
		var(--tj-theme-secondary) 0%,
		var(--tj-theme-primary) 100%
	);
	position: absolute;
	top: 0;
	right: 90px;
	left: auto;
	text-align: center;
	line-height: 60px;
	font-size: 20px;
}
.contact-info-list .text-box p {
	margin-bottom: 3px;
}
.contact-info-list .text-box a {
	font-size: 20px;
	font-weight: var(--tj-fw-medium);
	color: var(--tj-white);
	text-decoration: none;
	transition: all 0.4s ease-in-out 0s;
}
.contact-info-list .text-box a:hover {
	color: var(--tj-theme-primary);
}
/* END: Contact Section */

/*
* ===============================
*  START: Footer Area
* ===============================
*/
.tj-footer-area {
	background: var(--tj-theme-accent-1);
	padding: 50px 0 20px;
}
.footer-logo-box {
	max-width: 75px;
	width: 100%;
	margin: 0 auto 35px;
}
.footer-logo-box a {
	display: inline-block;
}
.footer-menu ul {
	margin: 0 0 27px;
	padding: 0;
	list-style: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	gap: 35px;
}
.footer-menu ul li a {
	color: var(--tj-white);
	font-size: var(--tj-fz-btn);
	font-weight: var(--tj-fw-bold);
	text-decoration: none;
	position: relative;
}
.footer-menu ul li a::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 2px;
	border-radius: 4px;
	background: var(--tj-theme-primary);
	background: -o-linear-gradient(
		190deg,
		var(--tj-theme-secondary) 0%,
		var(--tj-theme-primary) 100%
	);
	background: linear-gradient(
		260deg,
		var(--tj-theme-secondary) 0%,
		var(--tj-theme-primary) 100%
	);
	bottom: -1px;
	left: 0;
	-webkit-transform-origin: right;
	-ms-transform-origin: right;
	transform-origin: right;
	-webkit-transform: scaleX(0);
	-ms-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition: -webkit-transform 0.3s ease-in-out;
	transition: -webkit-transform 0.3s ease-in-out;
	-o-transition: transform 0.3s ease-in-out;
	transition: transform 0.3s ease-in-out;
	transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}
.footer-menu ul li a:hover::before {
	-webkit-transform-origin: left;
	-ms-transform-origin: left;
	transform-origin: left;
	-webkit-transform: scaleX(1);
	-ms-transform: scaleX(1);
	transform: scaleX(1);
}
.copy-text p {
	margin-bottom: 0;
	color: var(--tj-theme-primary);
	font-weight: var(--tj-fw-light);
}
.copy-text p > a {
	text-decoration: none;
	color: inherit;
	font-weight: var(--tj-fw-medium);
	font-family: inherit;
}
.copy-text p > a:hover {
	color: var(--tj-theme-primary);
}
/* END: Footer Area */

/*
* ===============================
*  START: Sidebar Menu
* ===============================
*/
.side-navbar {
	position: fixed;
	top: 50%;
	left: 1rem;
	background: var(--tj-white);
	border-radius: 10px;
	padding: 1rem 0;
	-webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.03);
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.03);
	z-index: 10000;
	-webkit-transform: translateY(-50%) translateX(-120%);
	-ms-transform: translateY(-50%) translateX(-120%);
	transform: translateY(-50%) translateX(-120%);
	background: var(--tj-theme-secondary);
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}
.side-navbar.sticky-sidebar {
	-webkit-transform: translateY(-50%) translateX(0);
	-ms-transform: translateY(-50%) translateX(0);
	transform: translateY(-50%) translateX(0);
}
.side-navbar li a {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	height: 3.5rem;
	width: 5.5rem;
	color: var(--tj-theme-primary);
	-webkit-transition: 250ms ease all;
	-o-transition: 250ms ease all;
	transition: 250ms ease all;
	text-decoration: none;
}
.side-navbar li.active-bg {
	width: 3.5rem;
	height: 3.5rem;
	background-color: var(--tj-theme-primary);
	border-radius: 17.5px;
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	margin-top: -2px;
	z-index: -1;
	-webkit-transition: all 0.4s ease-in-out 0s;
	-o-transition: all 0.4s ease-in-out 0s;
	transition: all 0.4s ease-in-out 0s;
}
.side-navbar li a span {
	position: absolute;
	left: 100%;
	-webkit-transform: translate(-3rem);
	-ms-transform: translate(-3rem);
	transform: translate(-3rem);
	margin-left: 1rem;
	opacity: 0;
	pointer-events: none;
	color: var(--tj-theme-primary);
	background: var(--tj-white);
	padding: 0.75rem;
	-webkit-transition: 250ms ease all;
	-o-transition: 250ms ease all;
	transition: 250ms ease all;
	border-radius: 17.5px;
}
.side-navbar li.is-current a,
.side-navbar li:hover a {
	color: var(--tj-white);
}
.side-navbar li a i {
	font-size: 30px;
	display: inline;
	line-height: 1;
}
.side-navbar li.is-current a span,
.side-navbar li:hover a span {
	opacity: 1;
	-webkit-transform: translate(0);
	-ms-transform: translate(0);
	transform: translate(0);
}
.side-navbar li:first-child.is-current a span {
	opacity: 0;
}
.side-navbar ul {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* END: Sidebar Menu */

/*
* ===============================
*  START: Sidebar Widgets
* ===============================
*/
.tj_main_sidebar .sidebar_widget {
	background-color: var(--tj-theme-accent-2);
	padding: 30px 25px;
	border-radius: 8px;
}
.tj_main_sidebar .sidebar_widget:not(:last-child) {
	margin-bottom: 30px;
}
.sidebar_widget .widget_title {
	margin-bottom: 25px;
}
.sidebar_widget .widget_title .title {
	font-size: 20px;
	text-transform: uppercase;
	color: var(--tj-white);
	letter-spacing: 0.02em;
	margin-bottom: 0;
}
.sidebar_widget.services_list ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
.sidebar_widget.services_list ul li {
	display: flex;
	width: 100%;
	align-items: center;
}
.sidebar_widget.services_list ul li:not(:last-child) {
	margin-bottom: 5px;
}
.sidebar_widget.services_list ul li button {
	display: flex;
	align-items: start;
	width: 100%;
	text-align: left;
	border: none;
	background: transparent;
	color: var(--tj-body);
	padding: 15px 20px;
	border-radius: 8px;
	font-size: 16px;
	transition: 0.4s;
	position: relative;
	z-index: 1;
}
.sidebar_widget.services_list ul li button::before {
	content: "\f105";
	font-family: var(--tj-ff-fontawesome);
	font-weight: var(--tj-fw-normal);
	position: absolute;
	left: 20px;
    right: auto;
    transform: rotate(180deg);
	top: 16px;
}

.sidebar_widget.services_list ul li:hover button {
	background-color: var(--tj-theme-secondary);
	color: var(--tj-white);
}
.sidebar_widget.services_list ul li.active button {
	background-color: var(--tj-theme-primary);
	color: var(--tj-white);
}
.sidebar_widget.services_list ul li button i {
	font-size: 25px;
	line-height: 1;
	margin-right: 10px;
	padding-left: 8px;
	color: var(--tj-body);
	transition: all 0.4s ease-in-out 0s;
}

.sidebar_widget.services_list ul li.active button i,
.sidebar_widget.services_list ul li:hover button i {
	color: var(--tj-white);
}
.sidebar_widget.contact_form .form_group {
	margin-bottom: 10px;
}
.sidebar_widget.contact_form .form_group textarea {
	height: 150px;
}
.sidebar_widget.contact_form .form_btn .btn {
	width: 100%;
}

.tj-widget__search.form_group {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	margin: 0;
}
.tj-widget__search.form_group
	input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]) {
	padding: 16px 60px 16px 20px;
}
.tj-widget__search.form_group .search-btn {
	border: none;
	padding: 0;
	background-color: var(--tj-theme-primary);
	font-size: 20px;
	color: white;
	line-height: 1;
	position: absolute;
	left: 0;
	right: auto;
	top: 0;
	height: 100%;
	width: 60px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: all 0.4s ease-in-out 0s;
}
.tj-widget__search.form_group .search-btn:hover {
	background-color: var(--tj-theme-secondary);
}
.sidebar_widget.widget_categories ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.sidebar_widget.widget_categories ul li {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	color: var(--tj-theme-primary);
	font-size: 16px;
	font-weight: var(--tj-fw-medium);
}
.sidebar_widget.widget_categories ul li:not(:last-child) {
	margin-bottom: 20px;
}
.sidebar_widget.widget_categories ul li ul {
	margin-left: 20px;
}
.sidebar_widget.widget_categories ul li a {
	display: block;
	text-decoration: none;
	font-size: inherit;
	font-weight: inherit;
	color: var(--tj-body);
	transition: all 0.4s ease-in-out 0s;
}
.sidebar_widget.widget_categories ul li a:hover {
	color: var(--tj-theme-primary);
}
.tj_recent_posts ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.tj_recent_posts ul li {
	display: flex;
	width: 100%;
	align-items: start;
	flex-wrap: wrap;
	gap: 20px;
}
.tj_recent_posts ul li:not(:last-child) {
	margin-bottom: 30px;
}

.tj_recent_posts ul li .recent-post_thumb {
	max-width: 80px;
	width: 100%;
	height: 80px;
	overflow: hidden;
}
.tj_recent_posts ul li .recent-post_thumb a {
	display: inline-block;
	width: 100%;
	height: 100%;
}
.tj_recent_posts ul li .recent-post_thumb a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.8s ease-in-out 0s;
}
.tj_recent_posts ul li:hover .recent-post_thumb a img {
	transform: scale(1.1);
}
.tj_recent_posts ul li .recent-post_content {
	max-width: calc(100% - 100px);
}
.tj_recent_posts ul li .recent-post_content .tj-post__meta {
	margin-bottom: 10px;
}
.tj_recent_posts ul li .recent-post_content .recent-post_title {
	font-size: 18px;
	line-height: 1.3;
	color: var(--tj-white);
	margin-bottom: 0;
	letter-spacing: 0.01em;
	font-weight: var(--tj-fw-medium);
}
.tj_recent_posts ul li .recent-post_content .recent-post_title a {
	font-size: inherit;
	color: inherit;
	font-weight: inherit;
	line-height: inherit;
	transition: all 0.4s ease-in-out 0s;
}
.tj_recent_posts ul li .recent-post_content .recent-post_title a:hover {
	color: var(--tj-theme-primary);
}
.tagcloud {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
}
.tagcloud a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--tj-grey-1);
	text-decoration: none;
	background-color: transparent;
	color: var(--tj-white);
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0.01em;
	padding: 10px 15px;
	border-radius: 50px;
	transition: all 0.3s ease-in-out 0s;
}
.tagcloud a:hover {
	color: var(--tj-white);
	background-color: var(--tj-theme-primary);
	border-color: var(--tj-theme-primary);
}
/* END: Sidebar Widgets */

/*
* ===============================
*  START: Breadcrumb Area
* ===============================
*/
body.absolute_header .breadcrumb_area {
	padding-top: 200px;
	align-items: end;
}
.breadcrumb_area {
	position: relative;
	z-index: 1;
	padding: 100px 0;
	min-height: 350px;
	display: flex;
	align-items: center;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: var(--tj-theme-accent-2);
}
.breadcrumb_area::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: var(--tj-theme-accent-2);
	z-index: -1;
	opacity: 0.7;
}
.breadcrumb_content .title {
	font-size: 50px;
	line-height: 1.2;
	color: var(--tj-white);
	margin-bottom: 0;
}
.breadcrumb_content .breadcrumb_navigation {
	margin-top: 15px;
}
.breadcrumb_navigation {
	display: flex;
	align-items: center;
	gap: 10px;
}
.breadcrumb_navigation span {
	font-size: 16px;
	color: var(--tj-white);
	font-weight: var(--tj-fw-regular);
}
.breadcrumb_navigation span a {
	text-decoration: none;
	color: inherit;
	font-size: inherit;
	font-weight: var(--tj-fw-medium);
	position: relative;
	z-index: 1;
}
.breadcrumb_navigation span a::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 0%;
	height: 1px;
	background-color: var(--tj-white);
	transition: 0.4s;
}
.breadcrumb_navigation span a:hover::after {
	width: 100%;
	right: auto;
	left: 0;
}
/* END: Breadcrumb Area */

/* Start: Modal CSS */
.contact_modal .modal-content {
	border-radius: 0;
}
.contact_modal .modal-body {
	color: green;
}
.contact_modal.failed .modal-body {
	color: red;
}
.contact_modal .modal-body p {
	margin: 0;
}
.contact_modal .modal-footer,
.contact_modal .modal-header {
	background-color: var(--tj-theme-primary);
	border-radius: 0;
}
.contact_modal .modal-footer .btn {
	margin: 0;
	background: linear-gradient(
		135deg,
		var(--tj-theme-secondary) 16.35%,
		var(--tj-theme-accent-2) 91.35%
	);
	border: none;
	color: var(--tj-white);
}
.contact_modal .modal-header .close {
	margin: 0;
	background: linear-gradient(
		135deg,
		var(--tj-theme-secondary) 16.35%,
		var(--tj-theme-accent-2) 91.35%
	);
	border: none;
	color: var(--tj-white);
	width: 35px;
	height: 35px;
	border-radius: 50%;
}

/* END: Modal CSS */

/* ==== responsive.css ==== */
@media only screen and (max-width: 1499px) {
	.side-navbar {
		display: none;
	}
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
	.hero-section .intro_text svg text {
		font-size: 260px;
	}
}

/* Extra Large Devices */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
	.tj-header-area .header-button {
		margin-left: 35px;
	}
	.tj-header-area .header-menu ul {
		gap: 30px;
	}

	/* hero section */
	.hero-title {
		font-size: 60px;
	}
	.hero-section .funfact-area {
		margin-top: 70px;
	}

	/* resume section */
	.resume-widget .resume-item .resume-title {
		font-size: 23px;
	}

	/* skills */
	.skills-widget .skill-item {
		max-width: 165px;
	}
	.skills-widget .skill-inner {
		padding: 30px 15px 25px;
	}
}

/* Large Devices */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.services-section {
		padding-top: 100px;
		padding-bottom: 100px;
	}

	.tj-header-area {
		padding: 30px 0 15px;
	}
	.tj-header-area .logo-box {
		margin-right: 15px;
	}
	.tj-header-area .header-button {
		margin-left: 20px;
	}
	.tj-header-area .header-menu ul {
		gap: 20px;
	}

	/* hero section */
	.hero-section {
		padding: 160px 0 50px;
	}
	.hero-sub-title {
		margin-bottom: 0;
	}
	.hero-wrrapper .hero-title,
	.hero-title {
		font-size: 50px;
	}
	.hero-section .funfact-area {
		margin-top: 60px;
	}
	.funfact-item .number {
		font-size: 55px;
	}

	/* popup */
	.popup_content_area {
		max-width: 900px;
	}

	/* portfolio */
	.portfolio-section {
		padding-top: 100px;
		padding-bottom: 60px;
	}
	.portfolio_story_approach .portfolio_approach,
	.portfolio_story_approach .portfolio_story {
		gap: 15px;
	}

	/* resume section */
	.resume-section {
		padding-top: 100px;
		padding-bottom: 70px;
	}
	.section-header .section-title {
		font-size: 40px;
	}
	.resume-section .resume-item {
		margin-right: 0;
	}
	.resume-widget .resume-item .resume-title {
		font-size: 23px;
	}

	/* skills */
	.skills-section {
		padding-top: 100px;
		padding-bottom: 100px;
	}
	.skills-widget .skill-item {
		max-width: 165px;
	}
	.skills-widget .skill-inner {
		padding: 30px 15px 25px;
	}

	/* testimonial */
	.testimonial-section {
		padding-top: 100px;
		padding-bottom: 100px;
	}

	/* blog */
	.blog-section {
		padding-top: 100px;
		padding-bottom: 70px;
	}
	.blog-item .blog-content {
		bottom: 10px;
		width: calc(100% - 20px);
	}

	/* contact section */
	.contact-section {
		padding-top: 100px;
		padding-bottom: 100px;
	}
	.contact-form-box {
		padding: 40px 30px;
	}

	/* blog standard */
	.tj-posts__area {
		padding-bottom: 100px;
		padding-top: 100px;
	}
	.tj_recent_posts ul li .recent-post_content {
		max-width: 100%;
	}

	/* blog details */
	.tj-post-details__area {
		padding-top: 100px;
		padding-bottom: 100px;
	}
	.single-post__navigation
		.tj-navigation_post
		.tj-navigation-post_inner
		.tj-content
		.post_pagination_title
		.title {
		font-size: 16px;
	}
}

/* Tablet Devices */
@media only screen and (min-width: 768px) and (max-width: 991px) {
	h1 {
		font-size: 50px;
	}
	h2 {
		font-size: 40px;
	}
	h3 {
		font-size: 25px;
	}
	h4 {
		font-size: 22px;
	}
	h5 {
		font-size: 20px;
	}
	h6 {
		font-size: 16px;
	}
	.services-section {
		padding-top: 80px;
		padding-bottom: 80px;
	}
	.section-header .section-title {
		font-size: 35px;
	}

	.tj-header-area {
		padding: 20px 0 15px;
	}
	.tj-header-area .logo-box {
		margin-right: 15px;
	}
	.tj-header-area .header-button {
		margin-left: auto;
	}
	.tj-header-area .header-menu {
		position: absolute;
		left: 0;
		top: 100%;
		width: 100%;
		min-height: 90vh;
		overflow-y: auto;
		background-color: var(--tj-theme-secondary);
		transform-origin: top;
		transform: scaleY(0);
		transition: all 0.4s ease-in-out 0s;
	}
	.tj-header-area .header-menu.opened {
		transform: scaleY(1);
	}
	.tj-header-area .header-menu ul {
		flex-direction: column;
		padding: 20px 0;
	}
	.tj-header-area .header-menu ul li {
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.tj-header-area .header-menu ul li a {
		justify-content: center;
		width: 100%;
		text-transform: uppercase;
		line-height: 1;
		padding: 15px 0;
		letter-spacing: 1px;
		font-size: 25px;
	}
	.tj-header-area .header-menu ul li a::before {
		display: none;
	}

	/* hero section */
	.hero-section {
		padding: 130px 0 30px;
	}
	.hero-section .intro_text svg {
		top: 40%;
	}
	.hero-section .intro_text svg text {
		font-size: 280px;
		opacity: 0.6;
	}
	.hero-sub-title {
		margin-bottom: 0;
		font-size: 25px;
	}
	.hero-wrrapper .hero-title,
	.hero-title {
		font-size: 38px;
	}
	.hero-content-box .button-box {
		margin-top: 30px;
		gap: 30px;
	}
	.hero-section .funfact-area {
		margin-top: 60px;
	}
	.funfact-item {
		justify-content: center;
		margin-bottom: 20px;
	}
	.funfact-item .number {
		font-size: 55px;
	}

	/* services section */
	.services-widget .service-item {
		padding: 0px 15px;
	}
	.services-widget .service-item .left-box {
		gap: 10px;
	}
	.services-widget .service-item .left-box .service-title {
		font-size: 25px;
	}
	.services-widget .service-item .right-box {
		padding: 20px 0;
		padding-right: 5%;
	}
	.services-widget i {
		right: 20px;
	}

	/* popup */
	.popup_content_area {
		max-width: 670px;
	}
	.popup_modal_img {
		padding: 40px 25px 0 25px;
	}
	.popup_modal_content {
		padding-top: 40px;
	}
	.service_details {
		padding: 0 25px 10px 25px;
	}
	.service_details_content .service_info .title {
		font-size: 35px;
	}
	.tj_main_sidebar {
		margin-top: 40px;
		border-top: 1px solid var(--tj-grey-3);
		padding-top: 41px;
	}

	/* portfolio */
	.portfolio-section {
		padding-top: 80px;
		padding-bottom: 60px;
	}
	.portfolio-box .portfolio-item {
		padding: 25px 15px 0 15px;
	}
	.portfolio-box .content-box {
		width: calc(100% - 30px);
		padding: 15px 30px 15px 15px;
	}
	.portfolio-box .portfolio-item .content-box .portfolio-title {
		font-size: 25px;
		margin: 0;
	}
	.portfolio-box .portfolio-item .content-box i {
		font-size: 15px;
		right: 15px;
	}
	.popup_modal_content .portfolio_info {
		padding: 0 25px;
		gap: 20px;
	}
	.popup_modal_content .portfolio_info .portfolio_info_text,
	.popup_modal_content .portfolio_info .portfolio_info_items {
		max-width: calc(50% - 10px);
	}
	.portfolio_info .portfolio_info_items {
		column-gap: 15px;
		row-gap: 20px;
	}
	.popup_modal_content .portfolio_story_approach,
	.popup_modal_content .portfolio_description {
		padding: 0 25px;
		margin-top: 50px;
	}
	.portfolio_story_approach .portfolio_approach,
	.portfolio_story_approach .portfolio_story {
		gap: 15px;
	}
	.portfolio_description .title,
	.portfolio_info .portfolio_info_text .title {
		font-size: 35px;
	}
	.popup_modal_content .portfolio_navigation {
		background-color: var(--tj-theme-primary);
		padding: 30px 25px;
		gap: 20px;
	}
	.portfolio_navigation .navigation_item .project .nav_project .title {
		font-size: 35px;
	}

	/* resume section */
	.resume-section {
		padding-top: 80px;
		padding-bottom: 50px;
	}
	.section-header .section-title {
		font-size: 35px;
	}
	.resume-section .resume-item {
		margin-right: 0;
		padding: 20px 15px;
	}
	.resume-widget .resume-item .time {
		font-size: 15px;
	}
	.resume-widget .resume-item .resume-title {
		font-size: 20px;
	}

	/* skills */
	.skills-section {
		padding-top: 80px;
		padding-bottom: 80px;
	}
	.skills-widget .skill-item {
		max-width: 165px;
	}
	.skills-widget .skill-inner {
		padding: 30px 15px 25px;
	}

	/* testimonial */
	.testimonial-section {
		padding-top: 80px;
		padding-bottom: 80px;
	}
	.testimonials-widget .testimonial-item {
		max-width: 100%;
	}

	/* blog */
	.blog-section {
		padding-top: 80px;
		padding-bottom: 50px;
	}
	.blog-item .blog-content {
		bottom: 10px;
		width: calc(100% - 20px);
	}

	/* contact section */
	.contact-section {
		padding-top: 80px;
		padding-bottom: 80px;
	}
	.contact-form-box {
		padding: 30px 20px;
	}
	.contact-info-list li {
		padding-left: 65px;
	}
	.contact-info-list .text-box a {
		font-size: 18px;
	}

	/* breadcrumb */
	body.absolute_header .breadcrumb_area {
		padding-top: 160px;
	}
	.breadcrumb_area {
		padding: 80px 0;
		min-height: 300px;
		align-items: end;
	}

	/* blog standard */
	.tj-posts__area {
		padding-bottom: 80px;
		padding-top: 80px;
	}
	.tj-posts__area .tj_main_sidebar {
		border-color: var(--tj-grey-4);
		margin-top: 60px;
	}

	/* blog details */
	.tj-post-details__area {
		padding-top: 80px;
		padding-bottom: 80px;
	}
	.single-post__navigation
		.tj-navigation_post
		.tj-navigation-post_inner
		.tj-content
		.post_pagination_title
		.title {
		font-size: 16px;
	}

	.tj-post-details__area .tj_main_sidebar {
		border-top: 1px solid var(--tj-grey-4);
		margin-top: 60px;
	}

	.breadcrumb_content .title {
		font-size: 40px;
	}
}

/* Mobile Devices */
@media only screen and (max-width: 767px) {
	.progress-wrap {
		left: 20px;
		bottom: 20px;
	}
	h1 {
		font-size: 40px;
	}
	h2 {
		font-size: 35px;
	}
	h3 {
		font-size: 22px;
	}
	h4 {
		font-size: 20px;
	}
	h5 {
		font-size: 18px;
	}
	h6 {
		font-size: 15px;
	}

	.services-section {
		padding-top: 60px;
		padding-bottom: 60px;
	}
	.section-header {
		margin-bottom: 40px;
	}
	.section-header .section-title {
		font-size: 30px;
	}

	.tj-header-area {
		padding: 20px 0 15px;
	}
	.tj-header-area .logo-box {
		margin-right: 15px;
	}
	.tj-header-area .header-button {
		margin-left: auto;
	}
	.tj-header-area .header-menu {
		position: absolute;
		left: 0;
		top: 100%;
		width: 100%;
		min-height: 90vh;
		overflow-y: auto;
		background-color: var(--tj-theme-secondary);
		transform-origin: top;
		transform: scaleY(0);
		transition: all 0.4s ease-in-out 0s;
	}
	.tj-header-area .header-menu.opened {
		transform: scaleY(1);
	}
	.tj-header-area .header-menu ul {
		flex-direction: column;
		padding: 20px 0;
	}
	.tj-header-area .header-menu ul li {
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.tj-header-area .header-menu ul li:not(:last-child) {
		margin-bottom: 20px;
	}
	.tj-header-area .header-menu ul li a {
		justify-content: center;
		width: 100%;
		text-transform: uppercase;
		line-height: 1;
		padding: 10px 0;
		letter-spacing: 1px;
		font-size: 22px;
	}
	.tj-header-area .header-menu ul li a::before {
		display: none;
	}

	/* hero section */
	.hero-section {
		padding: 130px 0 40px;
	}
	.hero-section .intro_text svg {
		top: 25%;
		left: 50%;
	}
	.hero-section .intro_text svg text {
		font-size: 450px;
		opacity: 0.8;
	}
	.hero-sub-title {
		margin-bottom: 0;
		font-size: 22px;
	}
	.hero-wrrapper .hero-title,
	.hero-title {
		font-size: 35px;
		margin-bottom: 0;
	}
	.hero-image-box {
		margin: 30px 0;
	}
	.hero-image-box img {
		max-width: 80%;
	}
	.hero-content-box .button-box {
		margin-top: 20px;
		gap: 30px;
	}
	.hero-section .funfact-area {
		margin-top: 60px;
	}
	.funfact-item {
		justify-content: center;
		margin-bottom: 30px;
	}
	.funfact-item .number {
		font-size: 45px;
	}
	.funfact-item .text {
		margin-top: -15px;
	}

	/* services section */
	.services-widget .service-item {
		padding: 20px 15px;
		gap: 15px;
		transition: all 0.5s ease;
	}
	.services-widget .service-item .left-box {
		width: 100%;
		gap: 10px;
		padding: 0 25px 0 0;
	}
	.services-widget .service-item .left-box .service-title {
		font-size: 20px;
	}
	.services-widget .service-item .right-box {
		width: 100%;
		padding: 0;
	}
	.services-widget i {
		right: 20px;
		top: 20%;
		font-size: 15px;
	}
	.services-widget .active-bg {
		display: none;
	}
	.services-widget .service-item.current {
		background: linear-gradient(
			260deg,
			var(--tj-theme-secondary) 0%,
			var(--tj-theme-primary) 100%
		);
	}

	/* popup */
	.popup_content_area {
		max-width: 330px;
	}
	.popup_modal_img {
		padding: 30px 15px 0 15px;
	}
	.popup_content_area .mfp-close {
		width: 30px;
		height: 30px;
		font-size: 20px;
		right: -15px;
		top: -15px;
	}
	.popup_modal_content {
		padding-top: 30px;
	}
	.service_details {
		padding: 0 15px 30px 15px;
	}
	.service_details_content .service_info .title {
		font-size: 30px;
	}
	.service_details_content .service_info ul {
		columns: 1;
	}
	.tj_main_sidebar {
		margin-top: 40px;
		border-top: 1px solid var(--tj-grey-3);
		padding-top: 41px;
	}
	.tj_main_sidebar .sidebar_widget {
		padding: 30px 15px;
	}
	.sidebar_widget .widget_title .title {
		font-size: 18px;
	}

	/* portfolio */
	.portfolio-section {
		padding-top: 60px;
		padding-bottom: 30px;
	}
	.portfolio-filter .button-group {
		padding: 0 8px;
	}
	.portfolio-filter .button-group button {
		font-size: 14px;
		padding: 10px 6px;
	}
	.portfolio-box {
		padding-top: 40px;
	}
	.portfolio-box .portfolio-sizer {
		width: 100%;
	}
	.portfolio-box .portfolio-item {
		width: 100%;
		padding: 25px 15px 0 15px;
		margin-bottom: 30px;
	}
	.portfolio-box .content-box {
		width: calc(100% - 30px);
		padding: 15px 30px 15px 15px;
	}
	.portfolio-box .portfolio-item .content-box .portfolio-title {
		font-size: 25px;
		margin: 0;
	}
	.portfolio-box .portfolio-item .content-box i {
		font-size: 15px;
		left: 15px;
	}
	.popup_modal_content .portfolio_info {
		padding: 0 15px;
		gap: 30px;
	}
	.popup_modal_content .portfolio_info .portfolio_info_text,
	.popup_modal_content .portfolio_info .portfolio_info_items {
		max-width: 100%;
	}
	.portfolio_info .portfolio_info_items {
		column-gap: 15px;
		row-gap: 20px;
	}
	.popup_modal_content .portfolio_gallery {
		margin-top: 40px;
	}
	.popup_modal_content .portfolio_story_approach,
	.popup_modal_content .portfolio_description {
		padding: 0 15px;
		margin-top: 40px;
	}
	.portfolio_story_approach .portfolio_approach,
	.portfolio_story_approach .portfolio_story {
		gap: 15px;
		margin-bottom: 40px;
	}
	.portfolio_description .title,
	.portfolio_info .portfolio_info_text .title {
		font-size: 30px;
	}
	.popup_modal_content .portfolio_navigation {
		background-color: var(--tj-theme-primary);
		padding: 30px 15px;
		gap: 15px;
		flex-direction: column;
		width: 100%;
	}
	.portfolio_navigation .navigation_item {
		max-width: 100%;
	}
	.portfolio_navigation .navigation_item .project .nav_project .title {
		font-size: 25px;
	}
	.portfolio_navigation .navigation_item .project i {
		font-size: 20px;
		line-height: 1;
	}

	/* resume section */
	.resume-section {
		padding-top: 60px;
		padding-bottom: 30px;
	}
	.resume-section .col-md-6:last-child .section-header {
		margin-top: 30px;
	}
	.section-header .section-title {
		font-size: 30px;
	}
	.resume-section .resume-item {
		margin-left: 0;
		padding: 20px 15px;
	}
	.resume-widget .resume-item .time {
		font-size: 15px;
	}
	.resume-widget .resume-item .resume-title {
		font-size: 18px;
		margin-bottom: 0;
	}

	/* skills */
	.skills-section {
		padding-top: 60px;
		padding-bottom: 60px;
	}
	.skills-widget .skill-item {
		max-width: 165px;
	}
	.skills-widget .skill-inner {
		padding: 25px 15px 25px;
	}
	.skills-widget .skill-item .icon-box {
		margin: 0 auto 20px;
	}

	/* testimonial */
	.testimonial-section {
		padding-top: 60px;
		padding-bottom: 60px;
	}
	.testimonials-widget .testimonial-item {
		max-width: 100%;
	}
	.testimonials-widget .testimonial-item .quote {
		margin-bottom: 30px;
	}

	/* blog */
	.blog-section {
		padding-top: 60px;
		padding-bottom: 30px;
	}
	.blog-item .blog-content {
		bottom: 10px;
		width: calc(100% - 20px);
	}
	.blog-item .blog-content .blog-title {
		font-size: 18px;
	}

	/* contact section */
	.contact-section {
		padding-top: 60px;
		padding-bottom: 60px;
	}
	.contact-form-box {
		padding: 30px 15px;
		margin-top: 50px;
	}
	.contact-info-list li {
		padding-right: 65px;
	}
	.contact-info-list .icon-box{

		right: 0;
	}
	.tj-nice-select::after {
right: 280px;

	}
	.contact-info-list .text-box a {
		font-size: 18px;
	}

	/* footer */
	.tj-footer-area {
		padding: 60px 0 20px;
	}
	.footer-menu ul {
		margin: 0 0 25px;
		gap: 10px 15px;
	}
	.copy-text p {
		font-size: 14px;
	}

	/* breadcrumb */
	body.absolute_header .breadcrumb_area {
		padding-top: 150px;
	}
	.breadcrumb_area {
		padding: 60px 0;
		min-height: 250px;
		align-items: end;
	}

	/* blog standard */
	.tj-posts__area {
		padding-bottom: 60px;
		padding-top: 60px;
	}
	.tj-post .tj-post__thumb img {
		min-height: 250px;
		object-fit: cover;
	}
	.tj-post .tj-post__content {
		padding: 25px 15px;
	}
	.tj-post__meta {
		column-gap: 15px;
		margin-bottom: 15px;
	}
	.tj-post__content .tj-post__title {
		font-size: 22px;
		margin-bottom: 15px;
	}
	.tj-post__content .tj-post__btn {
		margin-top: 20px;
	}
	.wp-block-quote,
	blockquote {
		padding: 25px 15px;
		border-radius: 8px;
	}
	.tj__pagination {
		margin-top: 50px;
	}
	.tj__pagination ul {
		gap: 10px;
	}
	.tj-posts__area .tj_main_sidebar {
		border-color: var(--tj-grey-4);
		margin-top: 60px;
	}
	.breadcrumb_content .title {
		font-size: 35px;
	}

	/* blog details */
	.tj-post-details__area {
		padding-top: 60px;
		padding-bottom: 60px;
	}
	.tj-single__post .tj-post__thumb img {
		min-height: 250px;
		object-fit: cover;
	}
	.tj-single__post p {
		margin-bottom: 15px;
	}
	.tj-single__post h1,
	.tj-single__post h2,
	.tj-single__post h3,
	.tj-single__post h4,
	.tj-single__post h5,
	.tj-single__post h6 {
		margin-top: 20px;
	}
	.single-post__navigation
		.tj-navigation_post
		.tj-navigation-post_inner
		.tj-content
		.post_pagination_title
		.title {
		font-size: 16px;
	}
	.single-post_tag_share .tj_tag {
		width: 100%;
	}
	.single-post_tag_share .tj_tag .tag__title {
		margin-right: 0;
	}
	.single-post__navigation .tj-navigation_post {
		max-width: 355px;
		width: 100%;
	}
	.single-post__navigation .tj-navigation_post .tj-navigation-post_inner {
		padding: 30px 20px;
	}
	.single-post__navigation .tj-navigation_post.next {
		margin-left: auto;
	}
	.tj-comments__wrap .tj-comment__title h3,
	.comment-respond .tj-comment__title {
		font-size: 25px;
	}
	.tj__comment .tj-comment__wrap {
		flex-direction: column;
		row-gap: 20px;
	}
	.tj__comment .tj-comment__wrap .comment__text {
		width: 100%;
	}

	.tj-post-details__area .tj_main_sidebar {
		border-top: 1px solid var(--tj-grey-4);
		margin-top: 60px;
	}
}

/* ==== _inline-legacy.css ==== */
/* Formerly an inline <style> block in demo/index.html <head>; moved here as
   part of consolidating the project's CSS into vendor.css + theme.css. */
:root {
  --bg-color: #ffffff;
  --text-color: #111111;
  --card-bg: #f2f2f2;
}

.popup_modal_img img {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  margin-bottom: 20px;
}

body.lang-en .portfolio_navigation {
  display: flex !important;
  justify-content: space-between !important;
  flex-direction: row !important;
  align-items: center !important;
}

body.lang-en .portfolio_navigation .prev-project {
  margin-right: auto !important;
  text-align: left !important;
}

body.lang-en .portfolio_navigation .prev-project .project {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

body.lang-en .portfolio_navigation .prev-project .nav_project {
  margin-left: 20px !important;
  margin-right: 0 !important;
  text-align: left !important;
}

body.lang-en .portfolio_navigation .next-project {
  margin-left: auto !important;
  text-align: right !important;
}

body.lang-en .portfolio_navigation .next-project .project {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

body.lang-en .portfolio_navigation .next-project .nav_project {
  margin-right: 20px !important;
  margin-left: 0 !important;
  text-align: right !important;
}

body.lang-en .portfolio_navigation i {
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
  display: inline-block !important;
}

body.lang-en .prev-project i {
  transform: rotate(45deg) !important;
}

body.lang-en .prev-project:hover i {
  transform: rotate(0deg) !important;
}

body.lang-en .next-project i {
  transform: rotate(-45deg) !important;
}

body.lang-en .next-project:hover i {
  transform: rotate(0deg) !important;
}

.nice-select:after {
  right: auto !important;
  left: 20px !important;
}

.nice-select {
  padding-left: 40px !important;
  padding-right: 20px !important;
  text-align: right !important;
}

.nice-select .list {
  text-align: right !important;
}

.nice-select .option {
  padding-right: 20px !important;
  text-align: right !important;
}

body.lang-en .nice-select:after {
  left: auto !important;
  right: 20px !important;
}

body.lang-en .nice-select {
  padding-left: 20px !important;
  padding-right: 40px !important;
  text-align: left !important;
}

body.lang-en .portfolio_navigation .lang-fa {
  display: none !important;
}

body.lang-en .portfolio_navigation .lang-en {
  display: block !important;
}

.success-checkmark {
  width: 80px;
  height: 115px;
  margin: 0 auto;
}

.check-icon {
  width: 80px;
  height: 80px;
  position: relative;
  border-radius: 50%;
  box-sizing: content-box;
  border: 4px solid #4CAF50;
}

.check-icon::before {
  top: 3px;
  left: -2px;
  width: 30px;
  transform-origin: 100% 50%;
  border-radius: 100px 0 0 100px;
}

.check-icon::after {
  top: 0;
  left: 30px;
  width: 60px;
  transform-origin: 0 50%;
  border-radius: 0 100px 100px 0;
  animation: rotate-circle 4.25s ease-in;
}

.check-icon::before,
.check-icon::after {
  content: '';
  height: 100px;
  position: absolute;
  background: #ffffff;
  transform: rotate(-45deg);
}

.icon-line {
  height: 5px;
  background-color: #4CAF50;
  display: block;
  border-radius: 2px;
  position: absolute;
  z-index: 10;
}

.icon-line.line-tip {
  top: 46px;
  left: 14px;
  width: 25px;
  transform: rotate(45deg);
  animation: icon-line-tip 0.75s;
}

.icon-line.line-long {
  top: 38px;
  right: 8px;
  width: 47px;
  transform: rotate(-45deg);
  animation: icon-line-long 0.75s;
}

.icon-circle {
  top: -4px;
  left: -4px;
  z-index: 10;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  box-sizing: content-box;
  border: 4px solid rgba(76, 175, 80, .5);
}

.icon-fix {
  top: 8px;
  width: 5px;
  left: 26px;
  z-index: 1;
  height: 85px;
  position: absolute;
  transform: rotate(-45deg);
  background-color: #ffffff;
}

@keyframes rotate-circle {
  0% { transform: rotate(-45deg); }
  5% { transform: rotate(-45deg); }
  12% { transform: rotate(-405deg); }
  100% { transform: rotate(-405deg); }
}

@keyframes icon-line-tip {
  0% { width: 0; left: 1px; top: 19px; }
  54% { width: 0; left: 1px; top: 19px; }
  70% { width: 50px; left: -8px; top: 37px; }
  84% { width: 17px; left: 21px; top: 48px; }
  100% { width: 25px; left: 14px; top: 46px; }
}

@keyframes icon-line-long {
  0% { width: 0; right: 46px; top: 54px; }
  65% { width: 0; right: 46px; top: 54px; }
  84% { width: 55px; right: 0px; top: 35px; }
  100% { width: 47px; right: 8px; top: 38px; }
}

.success-message-body {
  text-align: center;
  font-family: sans-serif;
  color: #333;
  padding: 10px 0;
}

.success-message-body h4 {
  color: #4CAF50;
  font-weight: bold;
  margin-bottom: 15px;
}

.success-message-body p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 5px;
}

body.dark-mode .check-icon::before,
body.dark-mode .check-icon::after,
body.dark-mode .icon-fix {
  background: #161a22;
}

body.dark-mode .success-message-body {
  color: #eaeaea;
}

.funfact-item .number {
  direction: ltr !important;
  display: inline-block;
  unicode-bidi: embed;
}

.loading-en {
  display: none;
}

.loading-fa {
  display: block;
}

body.lang-en .loading-fa {
  display: none;
}

body.lang-en .loading-en {
  display: block;
}

.loading-en span {
  display: inline-block;
  margin: 0 2px;
  animation: loadingText 1s infinite alternate;
  font-family: sans-serif;
  font-weight: bold;
}

body.lang-en .form_group input,
body.lang-en .form_group textarea {
  direction: ltr !important;
  text-align: left !important;
}

body.lang-en ::placeholder {
  text-align: left !important;
  direction: ltr !important;
}

body.lang-en .nice-select {
  float: none !important;
  text-align: left !important;
  direction: ltr !important;
  padding-left: 18px !important;
  padding-right: 30px !important;
}

body.lang-en .nice-select .current {
  text-align: left !important;
  direction: ltr !important;
  display: block !important;
  width: 100% !important;
}

body.lang-en .nice-select:after {
  left: auto !important;
  right: 12px !important;
}

body.lang-en .nice-select .list {
  text-align: left !important;
  direction: ltr !important;
}

body.lang-en .nice-select .option {
  text-align: left !important;
  padding-left: 18px !important;
  padding-right: 20px !important;
  display: block !important;
}

body.lang-en .funfact-item {
  direction: ltr !important;
  text-align: left !important;
  flex-direction: row !important;
}

body.lang-en .funfact-item .text {
  margin-left: 15px !important;
  margin-right: 0 !important;
  text-align: left !important;
}

body.lang-en .odometer {
  direction: ltr !important;
  display: inline-block !important;
  font-family: sans-serif !important;
}

body.lang-en .funfact-item .number {
  direction: ltr !important;
}

#copy-toast {
  visibility: hidden;
  min-width: 250px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 50px;
  padding: 12px;
  position: fixed;
  z-index: 9999;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  font-size: 14px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.3s, bottom 0.3s;
}

#copy-toast.show {
  visibility: visible;
  opacity: 1;
  bottom: 50px;
}

body:not(.lang-en) .lang-en {
  display: none !important;
}

body.lang-en .lang-fa {
  display: none !important;
}

body.lang-en {
  direction: ltr !important;
  text-align: left !important;
}

body.lang-en .portfolio_info,
body.lang-en .portfolio_description,
body.lang-en .portfolio_story_approach,
body.lang-en .service_details {
  text-align: left !important;
  direction: ltr !important;
}

.pro-list {
  list-style: none;
  padding: 0;
  margin-top: 15px;
}

.pro-list li {
  position: relative;
  padding-right: 25px;
  margin-bottom: 12px;
  line-height: 1.7;
  color: var(--tj-text-body);
}

.pro-list li::before {
  content: '\2714';
  position: absolute;
  right: 0;
  top: 2px;
  color: #8750f7;
  font-size: 14px;
  font-weight: bold;
}

body.lang-en .pro-list li {
  text-align: left !important;
  direction: ltr !important;
  padding-right: 0;
  padding-left: 25px;
}

body.lang-en .pro-list li::before {
  right: auto;
  left: 0;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin-top: 15px;
}

.feature-list li {
  margin-bottom: 8px;
  font-size: 0.95em;
  display: flex;
  align-items: flex-start;
}

.feature-list li i {
  color: #8750f7;
  margin-left: 10px;
  margin-top: 5px;
}

body.lang-en .feature-list li {
  text-align: left !important;
  direction: ltr !important;
}

body.lang-en .feature-list li i {
  margin-left: 0;
  margin-right: 10px;
}

body.dark-mode {
  --bg-color: #0d0f14;
  --text-color: #eaeaea;
  --card-bg: #161a22;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: all 0.3s ease;
}

.popup_content_area,
.portfolio-item,
.service-item {
  background-color: var(--card-bg);
}

body.light-mode .preloader {
  background-color: #ffffff;
}

body.light-mode .preloader svg path {
  fill: #ffffff;
}

body.light-mode .preloader .load-text span {
  color: #111111;
}

#theme-icon-sun,
#theme-icon-moon {
  font-size: 1.2rem;
  transition: opacity 0.3s ease;
}

body.light-mode #theme-icon-sun {
  display: none;
}

body.light-mode #theme-icon-moon {
  display: inline-block;
}

body.dark-mode #theme-icon-sun {
  display: inline-block;
}

body.dark-mode #theme-icon-moon {
  display: none;
}

.service-item {
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.service-item:hover,
.service-item.current {
  background-color: #8750f7 !important;
}

.service-item:hover .service-title,
.service-item:hover .number,
.service-item:hover p,
.service-item.current .service-title,
.service-item.current .number,
.service-item.current p,
.service-item:hover i {
  color: #ffffff !important;
}

.highlight-text {
  color: #8750f7;
  font-weight: bold;
}

.en-title {
  font-weight: 700;
  color: #111;
  font-family: sans-serif;
}

body.dark-mode .en-title {
  color: #fff;
}

.desc h4 {
  margin-bottom: 15px;
  color: var(--tj-text-body);
}

.service-item i.flaticon-up-right-arrow,
.portfolio-item .content-box i.flaticon-up-right-arrow {
  right: auto !important;
  left: 30px !important;
  transform: rotate(180deg) !important;
  transition: transform 0.3s ease-in-out, color 0.3s ease;
  display: inline-block;
}

.service-item:hover i.flaticon-up-right-arrow,
.service-item.current i.flaticon-up-right-arrow,
.portfolio-item:hover i.flaticon-up-right-arrow {
  transform: rotate(270deg) !important;
}

body.lang-en .service-item i.flaticon-up-right-arrow,
body.lang-en .portfolio-item .content-box i.flaticon-up-right-arrow {
  left: auto !important;
  right: 30px !important;
  transform: rotate(95deg) !important;
}

body.lang-en .service-item:hover i.flaticon-up-right-arrow,
body.lang-en .portfolio-item:hover i.flaticon-up-right-arrow {
  transform: rotate(10deg) !important;
}

.portfolio-item .content-box i {
  position: absolute;
  bottom: 30px;
}

/* ==== portfolio-theme.css ==== */
/*
 * Artin Ghorbanian — Premium portfolio theme
 * Load this stylesheet after main.css, light-mode.css, responsive.css,
 * and the legacy inline overrides in index.html.
 */

/* --------------------------------------------------------------------------
   1. Design tokens and theme modes
   -------------------------------------------------------------------------- */

:root {
	color-scheme: dark;
	--pf-font-en: "Segoe UI Variable", "Segoe UI", Inter, system-ui, -apple-system,
		BlinkMacSystemFont, sans-serif;
	--pf-font-fa: Peyda, Tahoma, Arial, sans-serif;
	--pf-bg: #060914;
	--pf-bg-elevated: #090e1b;
	--pf-surface: #0d1424;
	--pf-surface-strong: #121b2e;
	--pf-surface-hover: #142039;
	--pf-text: #f5f8ff;
	--pf-text-soft: #c8d1e3;
	--pf-muted: #8f9bb0;
	--pf-border: rgba(158, 178, 214, 0.16);
	--pf-border-strong: rgba(94, 231, 247, 0.34);
	--pf-accent: #5ee7f7;
	--pf-accent-rgb: 94, 231, 247;
	--pf-accent-2: #7c6cff;
	--pf-accent-2-rgb: 124, 108, 255;
	--pf-accent-ink: #031014;
	--pf-success: #6ee7b7;
	--pf-grid: rgba(154, 177, 216, 0.055);
	--pf-glow: rgba(94, 231, 247, 0.13);
	--pf-glow-2: rgba(124, 108, 255, 0.15);
	--pf-shadow-sm: 0 12px 32px rgba(0, 0, 0, 0.2);
	--pf-shadow-lg: 0 30px 90px rgba(0, 0, 0, 0.36);
	--pf-radius-sm: 12px;
	--pf-radius-md: 18px;
	--pf-radius-lg: 24px;
	--pf-section-space: clamp(84px, 9vw, 132px);
	--pf-container: 1240px;
	--pf-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--pf-gradient: linear-gradient(118deg, var(--pf-accent), var(--pf-accent-2));
	--pf-heading-gradient: linear-gradient(
		112deg,
		var(--pf-text) 8%,
		var(--pf-accent) 52%,
		#b7adff 94%
	);

	/* Remap the template palette so legacy components inherit this system. */
	--tj-body: var(--pf-text-soft);
	--tj-white: var(--pf-text);
	--tj-off-white: var(--pf-bg-elevated);
	--tj-black-2: var(--pf-bg);
	--tj-heading-primary: var(--pf-text);
	--tj-theme-primary: var(--pf-accent);
	--tj-theme-primary-1: var(--pf-accent-2);
	--tj-theme-primary-2: #a89cff;
	--tj-theme-primary-3: #6f8cff;
	--tj-theme-secondary: var(--pf-accent-2);
	--tj-theme-accent-1: var(--pf-bg);
	--tj-theme-accent-2: var(--pf-surface);
	--tj-grey-1: var(--pf-muted);
	--tj-grey-2: var(--pf-border);
	--tj-grey-3: var(--pf-border);
	--tj-grey-4: var(--pf-border);
	--tj-border: var(--pf-border);
	--tj-border1: var(--pf-border-strong);
}

html[data-theme="dark"] {
	color-scheme: dark;
}

html[data-theme="light"],
html:not([data-theme]) body.light-mode {
	color-scheme: light;
	--pf-bg: #f3f6fb;
	--pf-bg-elevated: #edf2f9;
	--pf-surface: #ffffff;
	--pf-surface-strong: #f8faff;
	--pf-surface-hover: #edf4ff;
	--pf-text: #0b1220;
	--pf-text-soft: #354158;
	--pf-muted: #657087;
	--pf-border: rgba(52, 72, 107, 0.14);
	--pf-border-strong: rgba(37, 99, 235, 0.28);
	--pf-accent: #087f9b;
	--pf-accent-rgb: 8, 127, 155;
	--pf-accent-2: #5b4ee8;
	--pf-accent-2-rgb: 91, 78, 232;
	--pf-accent-ink: #ffffff;
	--pf-success: #087f5b;
	--pf-grid: rgba(42, 69, 110, 0.055);
	--pf-glow: rgba(8, 127, 155, 0.1);
	--pf-glow-2: rgba(91, 78, 232, 0.11);
	--pf-shadow-sm: 0 12px 34px rgba(35, 55, 91, 0.09);
	--pf-shadow-lg: 0 30px 90px rgba(40, 56, 88, 0.14);
	--pf-heading-gradient: linear-gradient(
		112deg,
		#101828 4%,
		#087f9b 52%,
		#5b4ee8 94%
	);
}

html:not([data-theme]) body.dark-mode {
	color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. Language, typography, and global behavior
   -------------------------------------------------------------------------- */

html[data-language="en"] {
	direction: ltr;
}

html[data-language="fa"] {
	direction: rtl;
}

html[data-language="en"] body,
body.lang-en {
	direction: ltr !important;
	text-align: left !important;
	font-family: var(--pf-font-en);
}

html[data-language="fa"] body,
body:not(.lang-en) {
	direction: rtl;
	text-align: right;
	font-family: var(--pf-font-fa);
}

html[data-language="en"] :is(h1, h2, h3, h4, h5, h6, button, input, select, textarea),
body.lang-en :is(h1, h2, h3, h4, h5, h6, button, input, select, textarea) {
	font-family: var(--pf-font-en);
}

html[data-language="fa"] :is(h1, h2, h3, h4, h5, h6, button, input, select, textarea),
body:not(.lang-en) :is(h1, h2, h3, h4, h5, h6, button, input, select, textarea) {
	font-family: var(--pf-font-fa);
}

html[data-language="en"] .lang-fa,
html[data-language="fa"] .lang-en {
	display: none !important;
}

html[data-language="en"] .lang-en,
html[data-language="fa"] .lang-fa {
	display: revert !important;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
	background: var(--pf-bg);
}

body,
body.light-mode,
body.dark-mode {
	min-height: 100%;
	background: var(--pf-bg) !important;
	color: var(--pf-text-soft);
	font-size: 16px;
	line-height: 1.75;
	transition: background-color 240ms ease, color 240ms ease;
}

body :is(h1, h2, h3, h4, h5, h6) {
	color: var(--pf-text);
	letter-spacing: -0.025em;
}

body.light-mode :is(h1, h2, h3, h4, h5, h6),
body.dark-mode :is(h1, h2, h3, h4, h5, h6),
html[data-theme] body :is(h1, h2, h3, h4, h5, h6) {
	color: var(--pf-text);
}

p {
	color: var(--pf-text-soft);
}

a,
button,
input,
select,
textarea {
	-webkit-tap-highlight-color: transparent;
}

a,
button {
	transition: color 220ms ease, border-color 220ms ease,
		background-color 220ms ease, box-shadow 220ms ease, transform 220ms var(--pf-ease);
}

::selection {
	background: rgba(var(--pf-accent-rgb), 0.24);
	color: var(--pf-text);
}

* {
	scrollbar-color: var(--pf-accent) var(--pf-bg-elevated);
}

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
	background: var(--pf-bg-elevated);
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(var(--pf-accent), var(--pf-accent-2));
	border: 2px solid var(--pf-bg-elevated);
	border-radius: 999px;
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: 3px solid rgba(var(--pf-accent-rgb), 0.42) !important;
	outline-offset: 3px;
	box-shadow: 0 0 0 6px rgba(var(--pf-accent-rgb), 0.1);
}

.container {
	max-width: var(--pf-container);
}

.site-content {
	overflow: clip;
}

.site-content > section,
.tj-footer-area {
	position: relative;
	isolation: isolate;
	border-top: 1px solid var(--pf-border);
}

.site-content > section:not(.hero-section) {
	padding-block: var(--pf-section-space);
}

html[data-theme] body :is(.services-section, .resume-section, .contact-section),
body.light-mode :is(.services-section, .resume-section, .contact-section),
body.dark-mode :is(.services-section, .resume-section, .contact-section) {
	background: var(--pf-bg-elevated);
}

html[data-theme] body :is(.portfolio-section, .skills-section),
body.light-mode :is(.portfolio-section, .skills-section),
body.dark-mode :is(.portfolio-section, .skills-section) {
	background: var(--pf-bg);
}

.section-header {
	max-width: 760px;
	margin-bottom: clamp(38px, 5vw, 64px);
}

.section-header.text-center {
	margin-inline: auto;
}

.section-header .section-title,
body.light-mode .section-header .section-title {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	background: var(--pf-heading-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: clamp(2.25rem, 4vw, 3.5rem);
	font-weight: 760;
	line-height: 1.08;
	letter-spacing: -0.045em;
}

.section-header .section-title i {
	font-size: 0.72em;
	-webkit-text-fill-color: var(--pf-accent);
	color: var(--pf-accent);
}

.section-header p {
	max-width: 690px;
	margin-top: 20px;
	color: var(--pf-muted);
	font-size: clamp(1rem, 1.3vw, 1.1rem);
	line-height: 1.85;
}

.section-header.text-center p {
	margin-inline: auto;
}

/* Keep entrance motion crisp; content should never feel delayed while scrolling. */
.wow.animated {
	animation-delay: 0.04s !important;
	animation-duration: 0.58s !important;
}

/* --------------------------------------------------------------------------
   3. Preloader and scroll progress
   -------------------------------------------------------------------------- */

html[data-theme] body .preloader,
body.light-mode .preloader,
body.dark-mode .preloader {
	background: var(--pf-bg) !important;
}

html[data-theme] body .preloader svg path,
body.light-mode .preloader svg path,
body.dark-mode .preloader svg path {
	fill: var(--pf-bg) !important;
}

.preloader-heading {
	position: relative;
	z-index: 2;
	padding: 32px;
	text-align: center;
}

.preloader-heading::before {
	content: "";
	display: block;
	width: 9px;
	height: 9px;
	margin: 0 auto 24px;
	border-radius: 50%;
	background: var(--pf-accent);
	box-shadow: 0 0 0 8px rgba(var(--pf-accent-rgb), 0.1),
		0 0 28px rgba(var(--pf-accent-rgb), 0.7);
	animation: pf-status-pulse 1.4s ease-in-out infinite;
}

.preloader .preloader-heading .load-text {
	font-family: var(--pf-font-en);
	font-size: clamp(2rem, 5vw, 4rem);
	font-weight: 650;
	line-height: 1;
	letter-spacing: 0.19em;
	color: var(--pf-text);
}

html[data-language="fa"] .preloader .load-text,
body:not(.lang-en) .preloader .load-text {
	font-family: var(--pf-font-fa);
	letter-spacing: 0.04em;
}

.preloader .load-text span,
body.light-mode .preloader .load-text span {
	color: var(--pf-text) !important;
	text-shadow: 0 0 26px rgba(var(--pf-accent-rgb), 0.22);
}

@keyframes pf-status-pulse {
	50% {
		transform: scale(0.78);
		opacity: 0.55;
	}
}

.progress-wrap {
	width: 46px;
	height: 46px;
	border: 1px solid var(--pf-border-strong);
	background: rgba(9, 14, 27, 0.78);
	box-shadow: var(--pf-shadow-sm);
	backdrop-filter: blur(14px);
}

html[data-theme="light"] .progress-wrap,
body.light-mode .progress-wrap {
	background: rgba(255, 255, 255, 0.84);
}

.progress-wrap::after {
	color: var(--pf-accent);
}

.progress-wrap svg.progress-circle path {
	stroke: var(--pf-accent);
}

/* --------------------------------------------------------------------------
   4. Header, branding, and controls
   -------------------------------------------------------------------------- */

.tj-header-area,
html[data-theme] body .tj-header-area.header-2,
body.light-mode .tj-header-area.header-2,
body.dark-mode .tj-header-area.header-2 {
	padding: 22px 0 10px;
	background: transparent;
	box-shadow: none;
}

.tj-header-area.header-2 {
	padding-block: 10px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-120%);
	animation: none !important;
	transition: opacity 220ms ease, visibility 220ms ease,
		transform 360ms var(--pf-ease);
}

.tj-header-area.header-2.sticky {
	top: 0;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
	animation: none !important;
}

.tj-header-area.header-2.sticky-out {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-120%);
	animation: none !important;
}

.tj-header-area .container > .row > .col-12 {
	min-height: 66px;
	padding: 9px 12px;
	border: 1px solid var(--pf-border);
	border-radius: 20px;
	background: rgba(9, 14, 27, 0.72);
	box-shadow: 0 16px 50px rgba(0, 0, 0, 0.16);
	backdrop-filter: blur(20px) saturate(135%);
}

html[data-theme="light"] .tj-header-area .container > .row > .col-12,
body.light-mode .tj-header-area .container > .row > .col-12 {
	background: rgba(255, 255, 255, 0.78);
	box-shadow: 0 16px 50px rgba(51, 70, 104, 0.09);
}

.tj-header-area .logo-box {
	max-width: none;
	width: auto;
	margin: 0;
	flex: 0 0 auto;
}

.brand-link,
.tj-header-area .logo-box > a {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	min-width: 42px;
	min-height: 42px;
	color: var(--pf-text);
	text-decoration: none;
}

.brand-mark {
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border: 1px solid var(--pf-border-strong);
	border-radius: 13px;
	background: linear-gradient(
		145deg,
		rgba(var(--pf-accent-rgb), 0.17),
		rgba(var(--pf-accent-2-rgb), 0.14)
	);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
	color: var(--pf-accent);
	font: 750 0.78rem/1 var(--pf-font-en);
	letter-spacing: 0.04em;
}

.brand-role,
.brand-copy small {
	display: block;
}

.brand-copy {
	display: grid;
	gap: 1px;
	line-height: 1.2;
}

.brand-copy > :first-child {
	color: var(--pf-text);
	font-size: 0.84rem;
	font-weight: 700;
}

.brand-copy > :last-child {
	color: var(--pf-muted);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.03em;
}

.tj-header-area .header-info-list {
	margin-inline-start: 18px;
}

.tj-header-area .header-info-list ul li {
	margin: 0;
}

.tj-header-area .header-info-list ul li a,
body.light-mode .tj-header-area .header-info-list ul li a {
	color: var(--pf-muted);
	font-size: 0.8rem;
	font-weight: 500;
}

.tj-header-area .header-menu {
	margin-inline-start: auto;
}

.tj-header-area .header-menu ul {
	padding: 0 !important;
	gap: clamp(12px, 1.65vw, 25px);
	column-gap: clamp(12px, 1.65vw, 25px);
}

.tj-header-area .header-menu ul li a,
body.light-mode .tj-header-area .header-menu ul li a {
	padding: 10px 0;
	color: var(--pf-text-soft);
	font-size: 0.86rem;
	font-weight: 600;
	letter-spacing: 0.005em;
}

.tj-header-area .header-menu ul li a::before {
	height: 1px;
	bottom: 6px;
	background: var(--pf-gradient);
}

.tj-header-area .header-menu ul li a:hover,
.tj-header-area .header-menu ul li.current-menu-ancestor a {
	color: var(--pf-text);
}

.header-actions {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-inline-start: 14px;
}

.header-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--pf-border-strong);
	border-radius: 12px;
	background: linear-gradient(
		135deg,
		rgba(var(--pf-accent-rgb), 0.1),
		rgba(var(--pf-accent-2-rgb), 0.075)
	);
	color: var(--pf-text);
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.header-cta:hover {
	border-color: rgba(var(--pf-accent-rgb), 0.55);
	box-shadow: 0 10px 26px rgba(var(--pf-accent-rgb), 0.11);
	color: var(--pf-accent);
	transform: translateY(-1px);
}

.icon-button,
.tj-header-area .header-menu ul > button.btn.tj-btn-secondary {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	min-width: 40px;
	padding: 0;
	border: 1px solid var(--pf-border);
	border-radius: 12px;
	background: rgba(var(--pf-accent-rgb), 0.055);
	color: var(--pf-text-soft);
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	cursor: pointer;
}

.icon-button:hover,
.tj-header-area .header-menu ul > button.btn.tj-btn-secondary:hover {
	border-color: var(--pf-border-strong);
	background: rgba(var(--pf-accent-rgb), 0.12);
	color: var(--pf-accent);
	transform: translateY(-1px);
}

#theme-icon-sun,
#theme-icon-moon {
	font-size: 1rem;
}

.theme-toggle {
	position: relative;
	overflow: hidden;
}

.theme-icon {
	position: absolute;
	inset: 50% auto auto 50%;
	pointer-events: none;
	transform: translate(-50%, -50%);
	transition: opacity 220ms ease, transform 320ms var(--pf-ease);
}

html[data-theme="dark"] .theme-icon--sun,
html:not([data-theme]) body.dark-mode .theme-icon--sun,
html[data-theme="light"] .theme-icon--moon,
html:not([data-theme]) body.light-mode .theme-icon--moon {
	opacity: 1;
	transform: translate(-50%, -50%) rotate(0) scale(1);
}

html[data-theme="dark"] .theme-icon--moon,
html:not([data-theme]) body.dark-mode .theme-icon--moon,
html[data-theme="light"] .theme-icon--sun,
html:not([data-theme]) body.light-mode .theme-icon--sun {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(55deg) scale(0.6);
}

.tj-header-area .header-button {
	margin: 0 0 0 14px;
}

html[data-language="fa"] .tj-header-area .header-button,
body:not(.lang-en) .tj-header-area .header-button {
	margin: 0 14px 0 0;
}

.tj-header-area .header-button .tj-btn-primary {
	padding: 13px 20px;
	font-size: 0.82rem;
}

.tj-header-area .menu-bar {
	margin-inline-start: 12px;
	margin-inline-end: 0;
}

.tj-header-area .menu-bar button {
	width: 42px;
	height: 42px;
	padding: 11px 8px;
	border: 1px solid var(--pf-border);
	border-radius: 12px;
	background: rgba(var(--pf-accent-rgb), 0.055);
}

.tj-header-area .menu-bar button span,
body.light-mode .tj-header-area .menu-bar button span {
	height: 2px;
	background: var(--pf-accent);
}

/* --------------------------------------------------------------------------
   5. Buttons and social links
   -------------------------------------------------------------------------- */

.tj-btn-primary {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 16px 27px;
	border: 1px solid transparent;
	border-radius: 14px;
	background: var(--pf-gradient);
	background-size: 100%;
	box-shadow: 0 14px 34px rgba(var(--pf-accent-2-rgb), 0.19);
	color: var(--pf-accent-ink);
	font-weight: 750;
	letter-spacing: 0;
}

.tj-btn-primary:hover {
	background-position: 0;
	box-shadow: 0 18px 40px rgba(var(--pf-accent-rgb), 0.22);
	color: var(--pf-accent-ink);
	transform: translateY(-2px);
}

.hero-content-box .button-box .tj-btn-primary {
	padding-inline-end: 42px;
}

.hero-content-box .button-box .tj-btn-primary::after {
	content: "";
	position: absolute;
	top: 50%;
	inset-inline-end: 20px;
	width: 8px;
	height: 8px;
	border-inline-end: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
	transition: transform 320ms var(--pf-ease);
	pointer-events: none;
}

html[data-language="fa"] .hero-content-box .button-box .tj-btn-primary::after,
body:not(.lang-en) .hero-content-box .button-box .tj-btn-primary::after {
	transform: translateY(-50%) rotate(-135deg);
}

.hero-content-box .button-box .tj-btn-primary:hover::after {
	transform: translateY(-50%) rotate(45deg) translate(2px, -2px);
}

html[data-language="fa"] .hero-content-box .button-box .tj-btn-primary:hover::after,
body:not(.lang-en) .hero-content-box .button-box .tj-btn-primary:hover::after {
	transform: translateY(-50%) rotate(-135deg) translate(2px, 2px);
}

.tj-btn-secondary {
	padding: 15px 25px;
	border: 1px solid var(--pf-border-strong);
	border-radius: 14px;
	background: rgba(var(--pf-accent-rgb), 0.045);
	color: var(--pf-accent);
	font-weight: 700;
	letter-spacing: 0;
}

.tj-btn-secondary:hover,
body.light-mode .tj-btn-secondary:hover {
	border-color: rgba(var(--pf-accent-rgb), 0.58);
	background: rgba(var(--pf-accent-rgb), 0.12);
	box-shadow: 0 12px 30px rgba(var(--pf-accent-rgb), 0.12);
	color: var(--pf-text);
	transform: translateY(-2px);
}

.social-icons {
	align-items: center;
	gap: 10px;
}

.social-icons li,
.social-icons li:last-child {
	margin: 0;
}

.social-icons li a {
	width: 42px;
	height: 42px;
	border: 1px solid var(--pf-border);
	border-radius: 13px;
	background: rgba(var(--pf-accent-rgb), 0.035);
	color: var(--pf-text-soft);
}

.social-icons li a::before {
	border-radius: 12px;
	background: rgba(var(--pf-accent-rgb), 0.12);
}

.social-icons li a:hover {
	border-color: var(--pf-border-strong);
	color: var(--pf-accent);
	transform: translateY(-3px);
}

.social-icons li a:hover::before {
	transform: scale(1);
}

/* --------------------------------------------------------------------------
   6. Hero and proof metrics
   -------------------------------------------------------------------------- */

html[data-theme] body .hero-section,
body.light-mode .hero-section,
body.dark-mode .hero-section {
	min-height: 100svh;
	padding: clamp(150px, 15vw, 202px) 0 clamp(72px, 8vw, 108px);
	background:
		radial-gradient(circle at 83% 18%, var(--pf-glow-2), transparent 28%),
		radial-gradient(circle at 14% 42%, var(--pf-glow), transparent 30%),
		var(--pf-bg);
	border-top: 0;
}

.hero-section::before {
	top: 8%;
	right: -8%;
	width: min(38vw, 520px);
	height: min(38vw, 520px);
	margin: 0;
	background: radial-gradient(circle, var(--pf-glow-2), transparent 68%);
	filter: blur(24px);
	opacity: 0.95;
}

.hero-section::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: linear-gradient(var(--pf-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--pf-grid) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: linear-gradient(to bottom, black, transparent 88%);
	mask-image: linear-gradient(to bottom, black, transparent 88%);
}

.hero-section > .container {
	position: relative;
	z-index: 2;
}

.hero-section .intro_text {
	opacity: 0.22;
}

.hero-section .intro_text:empty,
.hero-section .intro_text svg:empty {
	display: none;
}

.hero-section .intro_text svg text,
body.light-mode .hero-section .intro_text svg text {
	stroke: var(--pf-accent);
	opacity: 0.11;
}

.hero-content-box {
	max-width: 680px;
}

.hero-grid {
	align-items: center;
}

.hero-kicker {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 17px;
	padding: 8px 11px;
	border: 1px solid var(--pf-border);
	border-radius: 999px;
	background: rgba(var(--pf-accent-rgb), 0.045);
	color: var(--pf-text-soft);
	font-size: clamp(0.72rem, 1.05vw, 0.82rem);
	font-weight: 650;
	line-height: 1.3;
	letter-spacing: 0.02em;
}

.status-dot,
.availability-pulse {
	display: inline-block;
	width: 8px;
	height: 8px;
	flex: 0 0 8px;
	border-radius: 50%;
	background: var(--pf-success);
	box-shadow: 0 0 0 6px rgba(110, 231, 183, 0.09),
		0 0 20px rgba(110, 231, 183, 0.4);
}

.availability-pulse {
	animation: pf-status-pulse 1.8s ease-in-out infinite;
}

.hero-sub-title {
	display: block;
	margin-bottom: 12px;
	color: var(--pf-accent) !important;
	font-size: clamp(0.82rem, 1.15vw, 0.96rem);
	font-weight: 720;
	line-height: 1.4;
	letter-spacing: 0.035em;
	text-transform: uppercase;
}

html[data-language="fa"] .hero-kicker,
html[data-language="fa"] .hero-sub-title,
body:not(.lang-en) .hero-kicker,
body:not(.lang-en) .hero-sub-title {
	letter-spacing: 0;
	text-transform: none;
}

.hero-title,
body.light-mode .hero-title {
	max-width: 760px;
	margin-bottom: 26px;
	background: var(--pf-heading-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: clamp(3rem, 5.45vw, 5.15rem);
	font-weight: 780;
	line-height: 1.02;
	letter-spacing: -0.057em;
	text-wrap: balance;
}

html[data-language="fa"] .hero-title,
body:not(.lang-en) .hero-title {
	font-size: clamp(2.8rem, 5vw, 4.75rem);
	line-height: 1.18;
	letter-spacing: -0.025em;
}

.hero-description,
.hero-content-box .lead {
	max-width: 620px;
	color: var(--pf-muted);
	font-size: clamp(1rem, 1.45vw, 1.16rem);
	line-height: 1.9;
}

.hero-content-box .button-box {
	margin-top: 35px;
	gap: 12px;
}

.hero-content-box > .social-icons {
	margin-top: 19px;
}

.hero-tech-stack {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 26px;
	padding: 0;
	list-style: none;
}

.hero-tech-stack > * {
	padding: 7px 11px;
	border: 1px solid var(--pf-border);
	border-radius: 999px;
	background: rgba(var(--pf-accent-rgb), 0.035);
	color: var(--pf-muted);
	font-size: 0.75rem;
	font-weight: 650;
	line-height: 1;
}

.hero-visual {
	position: relative;
	display: grid;
	place-items: center;
	width: min(100%, 270px);
	margin-inline: auto;
	isolation: isolate;
}

.hero-image-box {
	position: relative;
	display: grid;
	place-items: center;
	width: min(100%, 240px);
	margin-inline: auto;
}

.hero-visual::before {
	inset: 8% 5%;
	width: auto;
	height: auto;
	margin: 0;
	border-radius: 38%;
	background: linear-gradient(145deg, var(--pf-glow), var(--pf-glow-2));
	filter: blur(58px);
	opacity: 1;
	z-index: -2;
}

.hero-visual::after {
	content: "";
	position: absolute;
	inset: 6% 3%;
	z-index: -1;
	border: 1px solid var(--pf-border-strong);
	border-radius: 28px;
	transform: rotate(3deg);
	opacity: 0.65;
}

.hero-image-box::before,
.hero-image-box::after {
	display: none;
}

.hero-image-box img,
body.light-mode .hero-image-box img {
	display: block;
	width: clamp(170px, 15vw, 230px);
	max-width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 22%;
	border: 1px solid var(--pf-border-strong);
	border-radius: 24px;
	background: var(--pf-surface);
	box-shadow: var(--pf-shadow-lg);
	transform: none;
	transition: transform 450ms var(--pf-ease), border-color 240ms ease,
		box-shadow 450ms var(--pf-ease);
}

.hero-image-box img:hover,
body.light-mode .hero-image-box img:hover {
	border-color: rgba(var(--pf-accent-rgb), 0.62);
	box-shadow: var(--pf-shadow-lg), 0 0 0 8px rgba(var(--pf-accent-rgb), 0.055);
	transform: translateY(-5px) scale(1.008);
}

/* Hero entrance choreography, released once the preloader controller marks
   the body as ready (see hidePreloader() in main.js / portfolio.js). */
@keyframes pf-hero-rise {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes pf-hero-fade-in {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

body:not(.is-preloaded) .hero-kicker,
body:not(.is-preloaded) .hero-sub-title,
body:not(.is-preloaded) .hero-title,
body:not(.is-preloaded) .hero-content-box .lead,
body:not(.is-preloaded) .hero-tech-stack,
body:not(.is-preloaded) .hero-content-box .button-box,
body:not(.is-preloaded) .hero-content-box > .social-icons,
body:not(.is-preloaded) .hero-visual {
	opacity: 0;
}

body.is-preloaded .hero-kicker,
body.is-preloaded .hero-sub-title,
body.is-preloaded .hero-title,
body.is-preloaded .hero-content-box .lead,
body.is-preloaded .hero-tech-stack,
body.is-preloaded .hero-content-box .button-box,
body.is-preloaded .hero-content-box > .social-icons {
	animation: pf-hero-fade-in 640ms var(--pf-ease) both;
}

body.is-preloaded .hero-kicker {
	animation-delay: 20ms;
}

body.is-preloaded .hero-sub-title {
	animation-delay: 80ms;
}

body.is-preloaded .hero-title {
	animation-delay: 130ms;
}

body.is-preloaded .hero-content-box .lead {
	animation-delay: 190ms;
}

body.is-preloaded .hero-tech-stack {
	animation-delay: 250ms;
}

body.is-preloaded .hero-content-box .button-box {
	animation-delay: 310ms;
}

body.is-preloaded .hero-content-box > .social-icons {
	animation-delay: 370ms;
}

body.is-preloaded .hero-visual {
	animation: pf-hero-rise 760ms var(--pf-ease) 260ms both;
}

.hero-availability {
	position: absolute;
	inset-inline-start: -14px;
	bottom: 12%;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 13px;
	border: 1px solid var(--pf-border);
	border-radius: 13px;
	background: rgba(9, 14, 27, 0.82);
	box-shadow: var(--pf-shadow-sm);
	backdrop-filter: blur(16px);
	color: var(--pf-text-soft);
	font-size: 0.73rem;
	font-weight: 650;
}

html[data-theme="light"] .hero-availability,
body.light-mode .hero-availability {
	background: rgba(255, 255, 255, 0.88);
}

.hero-availability > span:last-child {
	display: grid;
	gap: 2px;
}

.hero-availability small {
	display: block;
	color: var(--pf-muted);
	font-size: 0.61rem;
	font-weight: 600;
	line-height: 1.2;
}

.hero-availability strong {
	display: block;
	color: var(--pf-text);
	font-size: 0.71rem;
	font-weight: 700;
	line-height: 1.3;
}

.hero-frame-meta {
	position: absolute;
	inset-inline-end: -18px;
	top: 13%;
	padding: 8px 11px;
	border: 1px solid var(--pf-border);
	border-radius: 11px;
	background: rgba(9, 14, 27, 0.76);
	color: var(--pf-accent);
	font: 700 0.66rem/1.2 var(--pf-font-en);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	backdrop-filter: blur(14px);
}

.hero-frame-meta span {
	display: block;
}

.hero-frame-meta span + span {
	margin-top: 4px;
	color: var(--pf-muted);
	font-size: 0.58rem;
	text-align: end;
}

html[data-theme="light"] .hero-frame-meta,
body.light-mode .hero-frame-meta {
	background: rgba(255, 255, 255, 0.84);
}

.hero-section .funfact-area {
	margin-top: clamp(58px, 7vw, 94px);
}

.funfact-area > .row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
}

.funfact-area > .row > [class*="col-"] {
	width: auto;
	max-width: none;
	padding: 0;
}

.funfact-item,
body.lang-en .funfact-item {
	position: relative;
	display: flex !important;
	min-height: 142px;
	padding: 22px;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: flex-end;
	gap: 9px;
	overflow: hidden;
	border: 1px solid var(--pf-border);
	border-radius: 18px;
	background: linear-gradient(
		145deg,
		rgba(var(--pf-accent-rgb), 0.055),
		rgba(var(--pf-accent-2-rgb), 0.035)
	);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	color: var(--pf-text);
	text-align: start !important;
}

.funfact-item::after {
	content: "";
	position: absolute;
	inset-inline-end: -30px;
	top: -40px;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: var(--pf-glow);
	filter: blur(24px);
	pointer-events: none;
}

.stat-index {
	position: absolute;
	inset-inline-end: 17px;
	top: 15px;
	color: var(--pf-muted);
	font: 700 0.64rem/1 var(--pf-font-en);
	letter-spacing: 0.12em;
}

.funfact-item .number,
body.lang-en .funfact-item .number {
	direction: ltr !important;
	display: flex;
	color: var(--pf-text);
	font-family: var(--pf-font-en) !important;
	font-size: clamp(2.1rem, 3.5vw, 3rem);
	font-weight: 760;
	line-height: 1;
	letter-spacing: -0.045em;
}

.funfact-item .text,
body.lang-en .funfact-item .text {
	margin: 0 !important;
	color: var(--pf-muted);
	font-size: 0.84rem;
	font-weight: 550;
	line-height: 1.45;
	text-align: start !important;
}

/* --------------------------------------------------------------------------
   7. Services
   -------------------------------------------------------------------------- */

.services-widget {
	overflow: hidden;
	border: 1px solid var(--pf-border);
	border-radius: 22px;
	background: rgba(var(--pf-accent-rgb), 0.015);
}

.services-widget .active-bg {
	display: none !important;
}

.services-widget .service-item,
.service-item {
	min-height: 116px;
	padding: 0 68px 0 26px;
	border-bottom: 1px solid var(--pf-border) !important;
	background: transparent !important;
	transition: background-color 250ms ease, box-shadow 250ms ease;
}

html[data-language="fa"] .services-widget .service-item,
body:not(.lang-en) .services-widget .service-item {
	padding: 0 26px 0 68px;
}

.services-widget .service-item:last-of-type {
	border-bottom: 0 !important;
}

.services-widget .service-item:hover,
.services-widget .service-item.current,
.services-widget .service-item.current.mleave {
	background: linear-gradient(
		90deg,
		rgba(var(--pf-accent-rgb), 0.075),
		rgba(var(--pf-accent-2-rgb), 0.045)
	) !important;
	box-shadow: inset 3px 0 0 var(--pf-accent);
}

html[data-language="fa"] .services-widget .service-item:hover,
html[data-language="fa"] .services-widget .service-item.current,
body:not(.lang-en) .services-widget .service-item:hover,
body:not(.lang-en) .services-widget .service-item.current {
	box-shadow: inset -3px 0 0 var(--pf-accent);
}

.services-widget .service-item .left-box {
	width: calc(38% - 10px);
	padding: 26px 0;
	gap: 17px;
}

.services-widget .service-item .right-box {
	width: calc(62% - 10px);
	padding: 26px 0;
	padding-inline-start: 7%;
}

.services-widget .service-item .number,
.services-widget .service-item.current .number,
.services-widget .service-item.current.mleave .number,
.services-widget .service-item:hover .number {
	color: var(--pf-accent) !important;
	font: 700 0.76rem/1 var(--pf-font-en);
	letter-spacing: 0.1em;
}

.services-widget .service-item .left-box .service-title,
body.light-mode .services-widget .service-item .left-box .service-title,
.services-widget .service-item:hover .service-title,
.services-widget .service-item.current .service-title {
	color: var(--pf-text) !important;
	font-size: clamp(1.25rem, 2vw, 1.65rem);
	font-weight: 680;
	line-height: 1.25;
	letter-spacing: -0.025em;
}

.services-widget .service-item .right-box p,
body.light-mode .services-widget .service-item .right-box p,
.services-widget .service-item:hover p,
.services-widget .service-item.current p {
	color: var(--pf-muted) !important;
	font-size: 0.95rem;
	line-height: 1.75;
}

.services-widget .service-item::after {
	content: "";
	position: absolute;
	top: 50%;
	inset-inline-end: 25px;
	width: 11px;
	height: 11px;
	border-inline-end: 2px solid var(--pf-accent);
	border-top: 2px solid var(--pf-accent);
	transform: translateY(-50%) rotate(45deg);
	transition: transform 320ms var(--pf-ease), border-color 250ms ease,
		inset-inline-end 320ms var(--pf-ease);
	pointer-events: none;
}

html[data-language="fa"] .services-widget .service-item::after,
body:not(.lang-en) .services-widget .service-item::after {
	transform: translateY(-50%) rotate(-135deg);
}

.services-widget .service-item:hover::after,
.services-widget .service-item.current::after {
	border-color: var(--pf-text);
	inset-inline-end: 20px;
}

.services-widget .service-item .service-link:focus-visible {
	outline-offset: -5px;
}

/* --------------------------------------------------------------------------
   8. Portfolio cards and popup content
   -------------------------------------------------------------------------- */

.portfolio-box {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(20px, 2.4vw, 32px);
	padding-top: 22px;
}

.portfolio-box .portfolio-sizer,
.portfolio-box .gutter-sizer {
	display: none;
}

.portfolio-box::before {
	opacity: 0.55;
	background: var(--pf-gradient);
}

.portfolio-box .portfolio-item {
	position: relative;
	overflow: hidden;
	padding: 0;
	margin: 0;
	width: auto;
	border: 1px solid var(--pf-border);
	border-radius: 22px;
	background: var(--pf-surface) !important;
	box-shadow: var(--pf-shadow-sm);
	transition: border-color 260ms ease, box-shadow 320ms var(--pf-ease),
		transform 320ms var(--pf-ease);
}

.portfolio-box .portfolio-item:hover {
	border-color: var(--pf-border-strong);
	box-shadow: var(--pf-shadow-lg);
}

.portfolio-box .image-box {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--pf-bg-elevated);
}

.portfolio-box .image-box::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to top, rgba(3, 7, 16, 0.54), transparent 58%);
}

.portfolio-box .image-box img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 650ms var(--pf-ease), filter 350ms ease;
}

.portfolio-box .portfolio-item:hover .image-box img {
	transform: scale(1.045);
	filter: saturate(1.08) contrast(1.02);
}

.portfolio-box .content-box {
	left: 16px;
	right: 16px;
	bottom: 16px;
	width: auto;
	padding: 18px 58px 18px 19px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 16px;
	background: rgba(7, 12, 23, 0.8);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
	backdrop-filter: blur(16px) saturate(130%);
	opacity: 1;
	visibility: visible;
	transform: none;
	text-align: start;
}

html[data-language="fa"] .portfolio-box .content-box,
body:not(.lang-en) .portfolio-box .content-box {
	padding: 18px 19px 18px 58px;
}

.project-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	margin-bottom: 8px;
}

.project-tags span {
	display: inline-flex;
	align-items: center;
	min-height: 19px;
	padding: 3px 7px;
	border: 1px solid rgba(var(--pf-accent-rgb), 0.24);
	border-radius: 999px;
	background: rgba(var(--pf-accent-rgb), 0.1);
	color: #9df3fc;
	font: 700 0.57rem/1 var(--pf-font-en);
	letter-spacing: 0.035em;
	white-space: nowrap;
}

.portfolio-box .portfolio-item .content-box .portfolio-title,
body.light-mode .portfolio-box .portfolio-item .content-box .portfolio-title {
	margin: 0 0 5px;
	color: #f8fbff;
	font-size: clamp(1.15rem, 2vw, 1.45rem);
	font-weight: 700;
	line-height: 1.25;
}

.portfolio-box .portfolio-item .content-box p,
body.light-mode .portfolio-box .portfolio-item .content-box p {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	margin: 0;
	color: #b7c2d5;
	font-size: 0.8rem;
	line-height: 1.55;
}

.portfolio-box .content-box::after {
	content: "";
	position: absolute;
	top: 50%;
	inset-inline-end: 20px;
	width: 10px;
	height: 10px;
	border-inline-end: 2px solid var(--pf-accent);
	border-top: 2px solid var(--pf-accent);
	transform: translateY(-50%) rotate(45deg);
	transition: transform 320ms var(--pf-ease), inset-inline-end 320ms var(--pf-ease);
	pointer-events: none;
}

html[data-language="fa"] .portfolio-box .content-box::after,
body:not(.lang-en) .portfolio-box .content-box::after {
	transform: translateY(-50%) rotate(-135deg);
}

.portfolio-box .portfolio-item:hover .content-box::after {
	inset-inline-end: 15px;
}

.portfolio-link:focus-visible {
	outline-offset: -5px;
}

.mfp-bg {
	background: #030610;
	opacity: 0.86;
}

.mfp-wrap {
	backdrop-filter: blur(9px);
}

.popup_content_area,
html[data-theme] body .popup_content_area {
	overflow: hidden;
	border: 1px solid var(--pf-border);
	border-radius: 24px;
	background: var(--pf-surface) !important;
	box-shadow: var(--pf-shadow-lg);
	color: var(--pf-text-soft);
}

.popup_modal_img {
	padding: 20px 20px 0;
}

.popup_modal_img img,
.popup_modal_img img:hover {
	width: 100%;
	max-height: 460px;
	margin: 0;
	border: 1px solid var(--pf-border);
	border-radius: 18px;
	object-fit: cover;
	transform: none;
}

.popup_modal_content {
	padding-top: clamp(30px, 5vw, 58px);
	background: var(--pf-surface);
}

.service_details,
.portfolio_info,
.portfolio_description,
.portfolio_story_approach {
	color: var(--pf-text-soft);
}

.service_details :is(.title, h2, h3, h4),
.portfolio_info :is(.title, h2, h3, h4),
.portfolio_description :is(.title, h2, h3, h4),
.portfolio_story_approach :is(.title, h2, h3, h4) {
	color: var(--pf-text);
}

.highlight-text,
.pro-list li::before,
.feature-list li i {
	color: var(--pf-accent);
}

.portfolio_info .portfolio_info_items .info_item .key {
	color: var(--pf-muted);
}

.portfolio_info .portfolio_info_items .info_item .value,
.portfolio_info .portfolio_info_items .info_item .value a {
	color: var(--pf-text);
}

.popup_modal_content .portfolio_navigation {
	border-top: 1px solid var(--pf-border);
	background: var(--pf-bg-elevated);
}

.portfolio_navigation .navigation_item,
.portfolio_navigation .navigation_item :is(.title, .project) {
	color: var(--pf-text);
}

.popup_content_area .mfp-close {
	top: 14px;
	right: 14px;
	width: 42px;
	height: 42px;
	border: 1px solid var(--pf-border);
	border-radius: 12px;
	background: rgba(5, 9, 18, 0.78);
	color: var(--pf-text);
	line-height: 42px;
	backdrop-filter: blur(12px);
}

html[data-language="fa"] .popup_content_area .mfp-close,
body:not(.lang-en) .popup_content_area .mfp-close {
	left: 14px;
	right: auto;
}

/* --------------------------------------------------------------------------
   9. Resume and certificates
   -------------------------------------------------------------------------- */

.resume-section .row {
	row-gap: 34px;
}

.resume-section .section-header {
	margin-bottom: 30px;
}

.resume-section .resume-item,
html[data-language="en"] .resume-section .resume-item,
html[data-language="fa"] .resume-section .resume-item {
	margin-inline: 0 !important;
}

.resume-widget .resume-item,
body.light-mode .resume-widget .resume-item {
	overflow: hidden;
	padding: 24px 25px;
	margin-bottom: 15px;
	border: 1px solid var(--pf-border);
	border-radius: 17px;
	background: var(--pf-surface);
	box-shadow: var(--pf-shadow-sm);
	transition: border-color 240ms ease, box-shadow 300ms var(--pf-ease),
		transform 300ms var(--pf-ease);
}

.resume-widget .resume-item::before {
	inset: 0;
	width: auto;
	height: auto;
	border-radius: inherit;
	background: linear-gradient(
		110deg,
		rgba(var(--pf-accent-rgb), 0.09),
		rgba(var(--pf-accent-2-rgb), 0.055)
	);
	opacity: 0;
}

.resume-widget .resume-item:hover {
	border-color: var(--pf-border-strong);
	box-shadow: var(--pf-shadow-lg);
	transform: translateY(-3px);
}

.resume-widget .resume-item:hover::before {
	opacity: 1;
}

.resume-widget .resume-item .time,
.resume-widget .resume-item:hover .time {
	display: inline-flex;
	margin-bottom: 11px;
	padding: 6px 9px;
	border: 1px solid rgba(var(--pf-accent-rgb), 0.19);
	border-radius: 999px;
	background: rgba(var(--pf-accent-rgb), 0.065);
	color: var(--pf-accent) !important;
	font: 750 0.72rem/1 var(--pf-font-en);
	letter-spacing: 0.035em;
}

.resume-widget .resume-item .resume-title,
.resume-widget .resume-item:hover .resume-title,
body.light-mode .resume-widget .resume-item .resume-title,
body.light-mode .resume-widget .resume-item:hover .resume-title {
	margin-bottom: 6px;
	color: var(--pf-text) !important;
	font-size: clamp(1.05rem, 1.7vw, 1.34rem);
	font-weight: 680;
	line-height: 1.35;
	text-transform: none;
}

.resume-widget .resume-item .institute {
	color: var(--pf-muted);
	font-size: 0.88rem;
}

/* --------------------------------------------------------------------------
   10. Skills
   -------------------------------------------------------------------------- */

.skills-widget {
	gap: 14px;
	row-gap: 22px;
}

.skills-widget .skill-item {
	max-width: 215px;
	flex: 1 1 170px;
}

.skills-widget .skill-inner,
body.light-mode .skills-widget .skill-inner {
	position: relative;
	overflow: hidden;
	min-height: 184px;
	margin-bottom: 12px;
	padding: 30px 18px 24px;
	border: 1px solid var(--pf-border);
	border-radius: 19px;
	background: linear-gradient(
		145deg,
		var(--pf-surface),
		rgba(var(--pf-accent-rgb), 0.025)
	);
	box-shadow: var(--pf-shadow-sm);
	transition: border-color 250ms ease, box-shadow 320ms var(--pf-ease),
		transform 320ms var(--pf-ease);
}

.skills-widget .skill-inner::after {
	content: "";
	position: absolute;
	inset-inline: 18px;
	bottom: 13px;
	height: 2px;
	border-radius: 999px;
	background: var(--pf-gradient);
	opacity: 0.55;
}

.skills-widget .skill-item:hover .skill-inner,
body.light-mode .skills-widget .skill-item:hover .skill-inner {
	border-color: var(--pf-border-strong);
	background: var(--pf-surface-hover);
	box-shadow: var(--pf-shadow-lg);
	transform: translateY(-5px);
}

.skills-widget .skill-item .icon-box {
	max-width: 52px;
	margin: 0 auto 24px;
}

.skills-widget .skill-item .icon-box img {
	width: 52px;
	height: 52px;
	object-fit: contain;
	filter: grayscale(0.15) saturate(0.9);
}

.skills-widget .skill-item:hover .icon-box img {
	filter: grayscale(0) saturate(1.08);
	transform: scale(1.06);
}

.skills-widget .skill-item .number,
.skills-widget .skill-item:hover .number {
	color: var(--pf-text);
	font: 750 1.02rem/1 var(--pf-font-en);
}

.skills-widget .skill-item p {
	color: var(--pf-muted);
	font-size: 0.85rem;
	font-weight: 650;
}

/* --------------------------------------------------------------------------
   11. Contact and form controls
   -------------------------------------------------------------------------- */

.contact-section::before {
	content: "";
	position: absolute;
	inset-inline-end: -9%;
	top: 8%;
	width: min(38vw, 480px);
	height: min(38vw, 480px);
	border-radius: 50%;
	background: var(--pf-glow-2);
	filter: blur(90px);
	z-index: -1;
	pointer-events: none;
}

.contact-form-box,
body.light-mode .contact-form-box {
	padding: clamp(26px, 4vw, 44px);
	border: 1px solid var(--pf-border);
	border-radius: 22px;
	background: var(--pf-surface);
	box-shadow: var(--pf-shadow-lg);
}

.contact-form-box .section-header {
	margin-bottom: 30px;
}

.contact-form-box .section-header .section-title {
	font-size: clamp(2rem, 3vw, 2.75rem);
}

.form_group {
	margin-bottom: 12px;
}

.form_group select,
.form_group .nice-select,
.form_group input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]),
.form_group textarea,
body.light-mode .form_group select,
body.light-mode .form_group .nice-select,
body.light-mode .form_group input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]),
body.light-mode .form_group textarea {
	min-height: 52px;
	padding: 15px 16px;
	border: 1px solid var(--pf-border);
	border-radius: 12px;
	background: var(--pf-bg-elevated);
	color: var(--pf-text);
	font-size: 0.92rem;
	line-height: 1.4;
	text-align: start;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.form_group textarea,
body.light-mode .form_group textarea {
	min-height: 155px;
	height: 155px;
	line-height: 1.7;
	resize: vertical;
}

.form_group input::placeholder,
.form_group textarea::placeholder,
body.light-mode .form_group input::placeholder,
body.light-mode .form_group textarea::placeholder {
	color: var(--pf-muted);
	opacity: 0.82;
}

.form_group select:focus,
.form_group .nice-select:focus,
.form_group input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):focus,
.form_group textarea:focus {
	border-color: var(--pf-border-strong);
	background: var(--pf-surface-strong);
	box-shadow: 0 0 0 4px rgba(var(--pf-accent-rgb), 0.08);
}

.nice-select::after,
.tj-nice-select::after,
body.lang-en .nice-select::after,
body.lang-en .tj-nice-select::after {
	left: auto !important;
	right: 16px !important;
	inset-inline-end: 16px !important;
}

html[data-language="fa"] .nice-select::after,
html[data-language="fa"] .tj-nice-select::after,
body:not(.lang-en) .nice-select::after,
body:not(.lang-en) .tj-nice-select::after {
	left: 16px !important;
	right: auto !important;
}

html[data-theme="light"] .tj-nice-select::after,
body.light-mode .tj-nice-select::after {
	background-image: url(../img/icons/down-arrow-light.svg);
	background-position: center;
	background-size: cover;
}

.nice-select .list {
	width: 100%;
	border: 1px solid var(--pf-border);
	border-radius: 12px;
	background: var(--pf-surface);
	box-shadow: var(--pf-shadow-lg);
}

.nice-select .option,
body.lang-en .nice-select .option {
	min-height: 42px;
	padding-inline: 16px !important;
	color: var(--pf-text-soft);
	line-height: 42px;
	text-align: start !important;
}

.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
	background: var(--pf-surface-hover);
	color: var(--pf-accent);
}

.form_btn .btn {
	min-height: 52px;
	padding: 16px 27px;
}

.form_btn {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.form-status {
	margin: 0;
	color: var(--pf-muted);
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.5;
}

.form-status:empty {
	display: none;
}

.form-status:not(:empty) {
	padding: 8px 11px;
	border: 1px solid var(--pf-border);
	border-radius: 10px;
	background: rgba(var(--pf-accent-rgb), 0.045);
}

.form-status.is-success,
.form-status[data-state="success"] {
	border-color: rgba(110, 231, 183, 0.28);
	background: rgba(110, 231, 183, 0.08);
	color: var(--pf-success);
}

.form-status.is-error,
.form-status[data-state="error"] {
	border-color: rgba(251, 113, 133, 0.3);
	background: rgba(251, 113, 133, 0.08);
	color: #fb7185;
}

.contact-info-list {
	width: 100%;
}

.contact-info-list ul {
	display: grid;
	gap: 13px;
}

.contact-info-list li,
html[data-language="en"] .contact-info-list li,
html[data-language="fa"] .contact-info-list li {
	display: flex !important;
	align-items: center !important;
	gap: 16px;
	min-width: 0;
	margin: 0;
	padding: 18px;
	border: 1px solid var(--pf-border);
	border-radius: 16px;
	background: var(--pf-surface);
	box-shadow: var(--pf-shadow-sm);
}

.contact-info-list .icon-box {
	position: static;
	width: 48px;
	height: 48px;
	flex: 0 0 48px;
	border: 1px solid var(--pf-border-strong);
	border-radius: 14px;
	background: linear-gradient(
		145deg,
		rgba(var(--pf-accent-rgb), 0.13),
		rgba(var(--pf-accent-2-rgb), 0.1)
	);
	color: var(--pf-accent);
	font-size: 18px;
	line-height: 48px;
}

.contact-info-list .icon-box i,
body.light-mode .contact-info-list .icon-box i {
	color: var(--pf-accent);
}

.contact-info-list .text-box {
	min-width: 0;
	flex: 1 1 auto;
}

.contact-info-list .text-box .text-box {
	display: block;
}

.contact-info-list .text-box p {
	margin-bottom: 4px;
	color: var(--pf-muted);
	font-size: 0.75rem;
	font-weight: 650;
}

.contact-info-list .text-box a,
body.light-mode .contact-info-list .text-box a {
	display: inline-block;
	max-width: 100%;
	color: var(--pf-text);
	font-size: clamp(0.9rem, 1.5vw, 1.02rem);
	font-weight: 650;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.contact-info-list .text-box a:hover,
body.light-mode .contact-info-list .text-box a:hover {
	color: var(--pf-accent);
}

.contact-value {
	display: inline-block;
	max-width: 100%;
	color: var(--pf-text);
	font-size: clamp(0.9rem, 1.5vw, 1.02rem);
	font-weight: 650;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

/* Contact result modals */
.contact_modal .modal-content {
	overflow: hidden;
	border: 1px solid var(--pf-border);
	border-radius: 20px;
	background: var(--pf-surface);
	box-shadow: var(--pf-shadow-lg);
	color: var(--pf-text-soft);
}

.contact_modal .modal-header,
.contact_modal .modal-footer {
	border-color: var(--pf-border);
	background: var(--pf-surface);
}

.contact_modal .modal-body {
	background: var(--pf-surface);
}

.contact_modal .close {
	color: var(--pf-text);
}

.success-message-body,
body.dark-mode .success-message-body {
	color: var(--pf-text-soft);
}

.success-message-body h4 {
	color: var(--pf-success);
}

.check-icon::before,
.check-icon::after,
.icon-fix,
body.dark-mode .check-icon::before,
body.dark-mode .check-icon::after,
body.dark-mode .icon-fix {
	background: var(--pf-surface);
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.tj-footer-area,
body.light-mode .tj-footer-area,
html[data-theme] body .tj-footer-area {
	padding: 58px 0 26px;
	background:
		radial-gradient(circle at 50% 0, var(--pf-glow-2), transparent 34%),
		var(--pf-bg);
}

.footer-logo-box {
	max-width: none;
	width: auto;
	margin: 0 auto 28px;
}

.footer-logo-box .brand-link {
	justify-content: center;
}

.footer-logo-box .brand-mark {
	width: 52px;
	height: 52px;
	flex-basis: 52px;
	border-radius: 15px;
}

.footer-logo-box .brand-copy {
	text-align: start;
}

.footer-logo-box img {
	width: 56px;
	height: 56px;
	border: 1px solid var(--pf-border-strong);
	border-radius: 16px;
	object-fit: cover;
	box-shadow: var(--pf-shadow-sm);
}

.footer-menu ul {
	gap: 12px 28px;
	margin-bottom: 27px;
}

.footer-menu ul li a {
	color: var(--pf-muted);
	font-size: 0.82rem;
	font-weight: 600;
}

.footer-menu ul li a:hover {
	color: var(--pf-text);
}

.footer-menu ul li a::before {
	height: 1px;
	background: var(--pf-gradient);
}

.copy-text p,
.copy-text p a {
	color: var(--pf-muted);
	font-size: 0.76rem;
}

.copy-text p a:hover {
	color: var(--pf-accent);
}

#copy-toast {
	border: 1px solid var(--pf-border-strong);
	border-radius: 13px;
	background: rgba(9, 14, 27, 0.9);
	box-shadow: var(--pf-shadow-lg);
	backdrop-filter: blur(16px);
	color: var(--pf-text);
}

html[data-theme="light"] #copy-toast,
body.light-mode #copy-toast {
	background: rgba(255, 255, 255, 0.92);
}

/* --------------------------------------------------------------------------
   13. Responsive refinements
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 1199px) {
	:root {
		--pf-section-space: clamp(76px, 8vw, 108px);
	}

	.tj-header-area .header-info-list {
		display: none !important;
	}

	.tj-header-area .header-menu ul {
		gap: 14px;
	}

	.hero-title,
	body.light-mode .hero-title {
		font-size: clamp(2.9rem, 5.5vw, 4.35rem);
	}

	.hero-image-box img,
	body.light-mode .hero-image-box img {
		width: clamp(180px, 18vw, 230px);
	}

	.services-widget .service-item .right-box {
		padding-inline-start: 4%;
	}
}

@media only screen and (max-width: 991px) {
	html {
		scroll-padding-top: 82px;
	}

	.tj-header-area {
		padding: 14px 0 8px;
	}

	.tj-header-area .container > .row > .col-12 {
		min-height: 60px;
		border-radius: 17px;
	}

	.tj-header-area .header-button {
		margin-inline-start: auto;
	}

	.tj-header-area .header-menu {
		top: calc(100% + 9px);
		left: 0;
		right: 0;
		width: 100%;
		min-height: 0;
		max-height: calc(100vh - 100px);
		padding: 10px;
		overflow-y: auto;
		border: 1px solid var(--pf-border);
		border-radius: 17px;
		background: rgba(9, 14, 27, 0.96);
		box-shadow: var(--pf-shadow-lg);
		backdrop-filter: blur(20px);
	}

	html[data-theme="light"] .tj-header-area .header-menu,
	body.light-mode .tj-header-area .header-menu {
		background: rgba(255, 255, 255, 0.97);
	}

	.tj-header-area .header-menu ul {
		align-items: stretch;
		gap: 3px;
		padding: 0 !important;
	}

	.tj-header-area .header-menu ul li {
		display: block;
		width: 100%;
		margin: 0 !important;
	}

	.tj-header-area .header-menu ul li a,
	body.light-mode .tj-header-area .header-menu ul li a {
		justify-content: flex-start;
		padding: 13px 14px;
		border-radius: 10px;
		font-size: 0.94rem;
		line-height: 1.35;
		letter-spacing: 0;
		text-transform: none;
	}

	html[data-language="fa"] .tj-header-area .header-menu ul li a,
	body:not(.lang-en) .tj-header-area .header-menu ul li a {
		justify-content: flex-start;
	}

	.tj-header-area .header-menu ul li a:hover {
		background: rgba(var(--pf-accent-rgb), 0.08);
	}

	.tj-header-area .header-menu ul > button.btn.tj-btn-secondary {
		width: 100%;
		height: 42px;
		margin-top: 4px;
	}

	.hero-section .row.align-items-center {
		row-gap: 44px;
	}

	.hero-image-box img,
	body.light-mode .hero-image-box img {
		width: min(100%, 210px);
	}

	.hero-availability {
		inset-inline-start: 4px;
	}

	.hero-frame-meta {
		inset-inline-end: 0;
	}

	.funfact-item,
	body.lang-en .funfact-item {
		min-height: 130px;
		padding: 18px;
	}

	.services-widget .service-item {
		padding-inline: 20px 60px;
	}

	html[data-language="fa"] .services-widget .service-item,
	body:not(.lang-en) .services-widget .service-item {
		padding-inline: 20px 60px;
	}

	.services-widget .service-item .left-box {
		width: calc(42% - 10px);
	}

	.services-widget .service-item .right-box {
		width: calc(58% - 10px);
		padding-inline-start: 2%;
	}

	.contact-info-list ul {
		margin-bottom: 28px;
	}

	.popup_content_area {
		max-width: min(92vw, 780px);
	}
}

@media only screen and (max-width: 767px) {
	:root {
		--pf-section-space: 72px;
	}

	.section-header {
		margin-bottom: 36px;
	}

	.section-header .section-title,
	body.light-mode .section-header .section-title {
		font-size: clamp(2rem, 9vw, 2.55rem);
	}

	html[data-theme] body .hero-section,
	body.light-mode .hero-section,
	body.dark-mode .hero-section {
		min-height: 0;
		padding: 126px 0 72px;
	}

	.hero-title,
	body.light-mode .hero-title {
		font-size: clamp(2.65rem, 12vw, 3.65rem);
		line-height: 1.03;
	}

	html[data-language="fa"] .hero-title,
	body:not(.lang-en) .hero-title {
		font-size: clamp(2.45rem, 10vw, 3.35rem);
		line-height: 1.19;
	}

	.hero-image-box {
		width: min(100%, 200px);
		margin: 0 auto;
	}

	.hero-image-box img,
	body.light-mode .hero-image-box img {
		width: min(100%, 180px);
		max-width: 100%;
	}

	.hero-content-box .button-box {
		margin-top: 28px;
		gap: 10px;
	}

	.hero-section .funfact-area {
		margin-top: 48px;
	}

	.funfact-area > .row {
		gap: 9px;
	}

	.funfact-item,
	body.lang-en .funfact-item {
		min-height: 118px;
		padding: 15px;
	}

	.funfact-item .number,
	body.lang-en .funfact-item .number {
		font-size: clamp(1.8rem, 8vw, 2.35rem);
	}

	.funfact-item .text,
	body.lang-en .funfact-item .text {
		font-size: 0.72rem;
	}

	.services-widget {
		border-radius: 18px;
	}

	.services-widget .service-item,
	html[data-language="fa"] .services-widget .service-item,
	body:not(.lang-en) .services-widget .service-item {
		min-height: 0;
		padding: 22px 54px 22px 18px;
		gap: 8px;
	}

	html[data-language="fa"] .services-widget .service-item,
	body:not(.lang-en) .services-widget .service-item {
		padding: 22px 18px 22px 54px;
	}

	.services-widget .service-item .left-box,
	.services-widget .service-item .right-box {
		width: 100%;
		padding: 0;
	}

	.services-widget .service-item .left-box {
		gap: 11px;
	}

	.services-widget .service-item::after {
		top: 29px;
		inset-inline-end: 18px;
		transform: rotate(45deg);
	}

	html[data-language="fa"] .services-widget .service-item::after,
	body:not(.lang-en) .services-widget .service-item::after {
		transform: rotate(-135deg);
	}

	.portfolio-box {
		grid-template-columns: 1fr;
		gap: 18px;
		padding-top: 12px;
	}

	.portfolio-box .portfolio-item {
		padding: 0;
		border-radius: 18px;
	}

	.portfolio-box .content-box {
		left: 11px;
		right: 11px;
		bottom: 11px;
		padding: 15px 49px 15px 15px;
		border-radius: 13px;
	}

	html[data-language="fa"] .portfolio-box .content-box,
	body:not(.lang-en) .portfolio-box .content-box {
		padding: 15px 15px 15px 49px;
	}

	.resume-section .col-md-6:last-child .section-header {
		margin-top: 24px;
	}

	.resume-widget .resume-item,
	body.light-mode .resume-widget .resume-item {
		padding: 20px;
	}

	.skills-widget .skill-item {
		max-width: calc(50% - 8px);
		flex-basis: calc(50% - 8px);
	}

	.skills-widget .skill-inner,
	body.light-mode .skills-widget .skill-inner {
		min-height: 164px;
		padding: 25px 12px 21px;
	}

	.contact-form-box,
	body.light-mode .contact-form-box {
		padding: 24px 18px;
		border-radius: 18px;
	}

	.contact-info-list li,
	html[data-language="en"] .contact-info-list li,
	html[data-language="fa"] .contact-info-list li {
		padding: 15px;
	}

	.popup_content_area {
		max-width: calc(100vw - 28px);
		border-radius: 18px;
	}

	.popup_modal_img {
		padding: 14px 14px 0;
	}

	.popup_modal_img img {
		border-radius: 13px;
	}

	.popup_content_area .mfp-close {
		top: 8px;
		right: 8px;
	}

	html[data-language="fa"] .popup_content_area .mfp-close,
	body:not(.lang-en) .popup_content_area .mfp-close {
		left: 8px;
		right: auto;
	}

	.tj-footer-area,
	body.light-mode .tj-footer-area,
	html[data-theme] body .tj-footer-area {
		padding: 52px 0 24px;
	}
}

@media only screen and (max-width: 575px) {
	.tj-header-area .container > .row > .col-12 {
		padding: 8px 9px;
	}

	.brand-copy > :last-child {
		display: none;
	}

	.header-actions {
		gap: 6px;
		margin-inline-start: auto;
	}

	.icon-button {
		width: 38px;
		height: 38px;
		min-width: 38px;
	}

	.hero-kicker,
	.hero-sub-title {
		font-size: 0.72rem;
	}

	.hero-title,
	body.light-mode .hero-title {
		font-size: clamp(2.35rem, 12.5vw, 3rem);
	}

	.hero-content-box .button-box .tj-btn-secondary,
	.hero-content-box .button-box .tj-btn-primary {
		flex: 1 1 100%;
		justify-content: center;
	}

	.hero-content-box > .social-icons {
		width: 100%;
		justify-content: center;
		margin-top: 17px;
	}

	.hero-tech-stack {
		justify-content: center;
	}

	.hero-availability {
		inset-inline-start: 0;
		bottom: 8%;
		font-size: 0.67rem;
	}

	.hero-frame-meta {
		display: none;
	}

	.funfact-area > .row {
		grid-template-columns: 1fr;
	}

	.funfact-item,
	body.lang-en .funfact-item {
		min-height: 96px;
		padding: 16px 18px;
		justify-content: center;
	}

	.funfact-item .text,
	body.lang-en .funfact-item .text {
		font-size: 0.78rem;
	}

	.skills-widget {
		gap: 10px;
	}

	.skills-widget .skill-item {
		max-width: calc(50% - 5px);
		flex-basis: calc(50% - 5px);
	}

	.contact-info-list .icon-box {
		width: 44px;
		height: 44px;
		flex-basis: 44px;
		line-height: 44px;
	}

	.footer-menu ul {
		gap: 10px 16px;
	}
}

@media only screen and (max-width: 420px) {
	.tj-header-area .brand-copy {
		display: none;
	}

	.tj-header-area .header-actions {
		margin-inline-start: auto;
	}

	.hero-availability {
		max-width: calc(100% - 8px);
	}
}

/* --------------------------------------------------------------------------
   14. Reduced motion and capability fallbacks
   -------------------------------------------------------------------------- */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.tj-header-area .container > .row > .col-12,
	.tj-header-area .header-menu,
	.hero-availability,
	.hero-frame-meta,
	.portfolio-box .content-box,
	.progress-wrap,
	#copy-toast {
		background: var(--pf-surface-strong);
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.preloader {
		display: none !important;
	}

	.wow {
		visibility: visible !important;
		animation: none !important;
	}

	.hero-image-box img:hover,
	.skills-widget .skill-item:hover .skill-inner,
	.resume-widget .resume-item:hover,
	.tj-btn-primary:hover,
	.tj-btn-secondary:hover,
	.social-icons li a:hover {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   15. Final visual QA: square portrait, arrow-free interactions, stable work grid
   -------------------------------------------------------------------------- */

/* The portrait is intentionally compact and square so it supports the hero
   hierarchy instead of competing with it. */
.hero-visual {
	width: min(100%, 320px);
	aspect-ratio: 1 / 1;
}

.hero-image-box {
	width: min(100%, 282px);
	margin-inline: auto;
}

.hero-image-box img,
body.light-mode .hero-image-box img {
	width: min(100%, 272px);
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center center;
	border-radius: 26px;
}

.hero-visual::before {
	content: "";
	position: absolute;
	pointer-events: none;
}

.hero-visual::after {
	inset: 5%;
	border-radius: 30px;
	transform: rotate(2deg);
}

/* The hero call-to-action uses a subtle travelling highlight instead of a
   directional glyph. */
.hero-content-box .button-box .tj-btn-primary {
	padding-inline-end: 27px;
}

.hero-content-box .button-box .tj-btn-primary::after,
html[data-language="fa"] .hero-content-box .button-box .tj-btn-primary::after,
body:not(.lang-en) .hero-content-box .button-box .tj-btn-primary::after {
	content: "";
	position: absolute;
	top: -65%;
	inset-inline-start: -52%;
	inset-inline-end: auto;
	width: 34%;
	height: 230%;
	border: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent);
	opacity: 0;
	transform: translateX(0) rotate(18deg);
	transition: transform 680ms var(--pf-ease), opacity 180ms ease;
	pointer-events: none;
}

.hero-content-box .button-box .tj-btn-primary:hover::after,
.hero-content-box .button-box .tj-btn-primary:focus-visible::after,
html[data-language="fa"] .hero-content-box .button-box .tj-btn-primary:hover::after,
html[data-language="fa"] .hero-content-box .button-box .tj-btn-primary:focus-visible::after,
body:not(.lang-en) .hero-content-box .button-box .tj-btn-primary:hover::after,
body:not(.lang-en) .hero-content-box .button-box .tj-btn-primary:focus-visible::after {
	opacity: 1;
	transform: translateX(520%) rotate(18deg);
}

/* Remove directional arrows. The service rows now communicate interaction
   through a restrained light sweep and an animated accent rail. */
.services-widget .service-item,
html[data-language="fa"] .services-widget .service-item,
body:not(.lang-en) .services-widget .service-item {
	isolation: isolate;
	overflow: hidden;
	padding-inline: 26px !important;
}

.services-widget .service-item::before {
	content: "";
	position: absolute;
	inset-block: 20px;
	inset-inline-start: 0;
	width: 3px;
	border-radius: 999px;
	background: var(--pf-gradient);
	box-shadow: 0 0 22px rgba(var(--pf-accent-rgb), 0.36);
	transform: scaleY(0);
	transform-origin: center;
	transition: transform 360ms var(--pf-ease);
	pointer-events: none;
	z-index: 2;
}

.services-widget .service-item::after,
html[data-language="fa"] .services-widget .service-item::after,
body:not(.lang-en) .services-widget .service-item::after {
	content: "";
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
	border: 0;
	background: linear-gradient(
		110deg,
		transparent 20%,
		rgba(var(--pf-accent-rgb), 0.07) 48%,
		transparent 76%
	);
	opacity: 0;
	transform: translateX(-68%);
	transition: opacity 260ms ease, transform 720ms var(--pf-ease);
	pointer-events: none;
	z-index: 0;
}

.services-widget .service-item:hover::before,
.services-widget .service-item.current::before,
.services-widget .service-item:focus-within::before {
	transform: scaleY(1);
}

.services-widget .service-item:hover::after,
.services-widget .service-item.current::after,
.services-widget .service-item:focus-within::after {
	opacity: 1;
	transform: translateX(68%);
}

.services-widget .service-item .left-box,
.services-widget .service-item .right-box {
	position: relative;
	z-index: 1;
}

.services-widget .service-item .service-link {
	z-index: 3;
}

/* A deterministic CSS grid replaces every legacy masonry/inline position.
   This also keeps the fourth card aligned at tablet and narrow widths. */
.portfolio-section .section-header,
.portfolio-section .section-header.text-center {
	display: block;
	width: min(100%, 780px);
	margin-inline: auto !important;
	text-align: center !important;
}

.portfolio-section .section-header .section-title {
	display: flex;
	width: 100%;
	justify-content: center;
	text-align: center;
}

.portfolio-section .section-header p {
	margin-inline: auto;
	text-align: center;
}

.portfolio-box {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	gap: clamp(22px, 2.5vw, 34px);
	width: min(100%, 1180px);
	height: auto !important;
	margin-inline: auto;
	padding-top: 24px;
	position: relative !important;
}

.portfolio-box::before {
	display: none;
}

.portfolio-box .portfolio-item {
	display: flex;
	flex-direction: column;
	position: relative !important;
	inset: auto !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	width: 100% !important;
	height: auto !important;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	transform: none !important;
	border-radius: 22px;
	cursor: pointer;
}

.portfolio-box .portfolio-item:hover,
.portfolio-box .portfolio-item:focus-within {
	transform: translateY(-6px) !important;
	border-color: rgba(var(--pf-accent-rgb), 0.5);
	box-shadow: var(--pf-shadow-lg), 0 0 0 1px rgba(var(--pf-accent-rgb), 0.08);
}

.portfolio-box .image-box {
	position: relative;
	aspect-ratio: 16 / 10;
	flex: 0 0 auto;
}

.portfolio-box .image-box::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(
		110deg,
		transparent 28%,
		rgba(255, 255, 255, 0.16) 48%,
		transparent 68%
	);
	transform: translateX(-120%);
	transition: transform 850ms var(--pf-ease);
	pointer-events: none;
}

.portfolio-box .portfolio-item:hover .image-box::before,
.portfolio-box .portfolio-item:focus-within .image-box::before {
	transform: translateX(120%);
}

.portfolio-box .content-box,
html[data-language="fa"] .portfolio-box .content-box,
body:not(.lang-en) .portfolio-box .content-box {
	position: relative !important;
	inset: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	display: block;
	flex: 1 1 auto;
	width: 100% !important;
	margin: 0;
	padding: 21px 22px 23px !important;
	border: 0;
	border-top: 1px solid var(--pf-border);
	border-radius: 0;
	background: var(--pf-surface-strong);
	box-shadow: none;
	backdrop-filter: none;
	opacity: 1;
	visibility: visible;
	transform: none;
	text-align: start;
}

.portfolio-box .content-box::after,
html[data-language="fa"] .portfolio-box .content-box::after,
body:not(.lang-en) .portfolio-box .content-box::after {
	content: "";
	position: absolute;
	top: -1px;
	inset-inline: 0;
	width: auto;
	height: 2px;
	border: 0;
	background: var(--pf-gradient);
	transform: scaleX(0.18);
	transform-origin: center;
	transition: transform 420ms var(--pf-ease);
	pointer-events: none;
}

.portfolio-box .portfolio-item:hover .content-box::after,
.portfolio-box .portfolio-item:focus-within .content-box::after {
	inset-inline: 0;
	transform: scaleX(1);
}

.portfolio-box .portfolio-item .content-box .portfolio-title,
body.light-mode .portfolio-box .portfolio-item .content-box .portfolio-title {
	color: var(--pf-text);
}

.portfolio-box .portfolio-item .content-box p,
body.light-mode .portfolio-box .portfolio-item .content-box p {
	color: var(--pf-muted);
}

.portfolio-box .project-tags span {
	color: var(--pf-accent);
	background: rgba(var(--pf-accent-rgb), 0.09);
}

.portfolio-box .portfolio-item > .portfolio-link {
	position: absolute;
	inset: 0;
	z-index: 5;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: inherit;
	background: transparent;
	cursor: pointer;
}

.portfolio-box .portfolio-item > .portfolio-link:focus-visible {
	outline: 3px solid var(--pf-accent);
	outline-offset: -5px;
}

/* Popup project navigation keeps its meaning without directional glyphs. */
.portfolio_navigation .navigation_item .project i,
.portfolio_navigation i {
	display: none !important;
}

.portfolio_navigation .prev-project .nav_project,
.portfolio_navigation .next-project .nav_project,
body.lang-en .portfolio_navigation .prev-project .nav_project,
body.lang-en .portfolio_navigation .next-project .nav_project {
	margin-inline: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.portfolio_navigation .navigation_item .project {
	padding: 13px 15px;
	border: 1px solid var(--pf-border);
	border-radius: 14px;
	background: rgba(var(--pf-accent-rgb), 0.035);
	transition: transform 280ms var(--pf-ease), border-color 220ms ease,
		background-color 220ms ease;
}

.portfolio_navigation .navigation_item .project:hover,
.portfolio_navigation .navigation_item .project:focus-visible {
	transform: translateY(-3px);
	border-color: var(--pf-border-strong);
	background: rgba(var(--pf-accent-rgb), 0.09);
}

.portfolio_navigation .nav_project .title::after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	margin-top: 5px;
	background: var(--pf-gradient);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 300ms var(--pf-ease);
}

.portfolio_navigation .project:hover .nav_project .title::after,
.portfolio_navigation .project:focus-visible .nav_project .title::after {
	transform: scaleX(1);
}

/* The back-to-top control uses a compact text label instead of an arrow. */
.progress-wrap::after {
	content: "TOP" !important;
	font-family: var(--pf-font-en) !important;
	font-size: 0.58rem;
	font-weight: 800;
	letter-spacing: 0.08em;
}

@media only screen and (max-width: 991px) {
	.hero-visual {
		width: min(100%, 270px);
	}

	.hero-image-box {
		width: min(100%, 238px);
	}

	.hero-image-box img,
	body.light-mode .hero-image-box img {
		width: min(100%, 228px);
	}
}

@media only screen and (max-width: 860px) {
	.portfolio-box {
		grid-template-columns: minmax(0, 1fr);
		width: min(100%, 640px);
		gap: 20px;
	}
}

@media only screen and (max-width: 575px) {
	.hero-visual {
		width: min(100%, 236px);
	}

	.hero-image-box {
		width: min(100%, 210px);
	}

	.hero-image-box img,
	body.light-mode .hero-image-box img {
		width: min(100%, 202px);
		border-radius: 22px;
	}

	.portfolio-box {
		gap: 16px;
	}

	.portfolio-box .portfolio-item {
		border-radius: 18px;
	}

	.portfolio-box .content-box,
	html[data-language="fa"] .portfolio-box .content-box,
	body:not(.lang-en) .portfolio-box .content-box {
		padding: 17px 17px 19px !important;
	}

	.portfolio_navigation .navigation_item .project {
		padding: 11px 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.portfolio-box .portfolio-item:hover,
	.portfolio-box .portfolio-item:focus-within {
		transform: none !important;
	}
}

/* Mobile header QA: preserve a small outer gutter and morph the hamburger
   inside its own 42px box so the open state can never widen the viewport. */
@media only screen and (max-width: 991px) {
	.tj-header-area .container > .row {
		margin-inline: 0;
	}

	.tj-header-area .header-actions {
		margin-inline-start: auto;
	}

	.tj-header-area .header-menu {
		left: 12px;
		right: 12px;
		width: auto;
	}

	.tj-header-area .menu-bar button {
		display: block;
		padding: 0;
		overflow: hidden;
	}

	.tj-header-area .menu-bar button span,
	body.light-mode .tj-header-area .menu-bar button span {
		position: absolute;
		left: 50%;
		width: 22px;
		height: 2px;
		margin: 0;
		transform: translate(-50%, -50%);
		transition: top 260ms var(--pf-ease), width 220ms ease,
			opacity 180ms ease, transform 320ms var(--pf-ease);
	}

	.tj-header-area .menu-bar button span:nth-child(1) {
		top: calc(50% - 7px);
	}

	.tj-header-area .menu-bar button span:nth-child(2) {
		top: 50%;
		width: 24px;
		transition-delay: 0ms;
	}

	.tj-header-area .menu-bar button span:nth-child(3) {
		top: calc(50% + 7px);
		width: 18px;
	}

	.tj-header-area .menu-bar.menu-bar-toggeled button {
		transform: none;
		transition-delay: 0ms;
	}

	.tj-header-area .menu-bar.menu-bar-toggeled button span:nth-child(1),
	.tj-header-area .menu-bar.menu-bar-toggeled button span:nth-child(3) {
		top: 50%;
		width: 22px;
	}

	.tj-header-area .menu-bar.menu-bar-toggeled button span:nth-child(1) {
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.tj-header-area .menu-bar.menu-bar-toggeled button span:nth-child(2) {
		width: 0;
		opacity: 0;
	}

	.tj-header-area .menu-bar.menu-bar-toggeled button span:nth-child(3) {
		transform: translate(-50%, -50%) rotate(-45deg);
	}
}

html[data-language="fa"] .progress-wrap::after,
body:not(.lang-en) .progress-wrap::after {
	content: "بالا" !important;
	font-family: var(--pf-font-fa) !important;
	font-size: 0.62rem;
	letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   16. Evidence-based expertise, experience, credentials, and project awards
   -------------------------------------------------------------------------- */

.expertise-intro,
.resume-section .resume-intro {
	width: min(100%, 900px);
	max-width: 900px;
	margin-inline: auto;
	margin-bottom: clamp(42px, 5vw, 66px) !important;
}

.expertise-intro p,
.resume-section .resume-intro p {
	max-width: 840px;
}

.expertise-grid,
.experience-grid,
.certificates-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	gap: clamp(16px, 2vw, 24px);
}

.expertise-grid {
	width: min(100%, 1160px);
	margin-inline: auto;
}

.expertise-card,
.experience-card,
.certificate-card {
	--component-rgb: var(--pf-accent-rgb);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 100%;
	padding: clamp(21px, 2.3vw, 28px);
	border: 1px solid var(--pf-border);
	border-radius: 22px;
	background:
		radial-gradient(circle at 100% 0%, rgba(var(--component-rgb), 0.095), transparent 34%),
		linear-gradient(145deg, var(--pf-surface), rgba(var(--pf-accent-rgb), 0.018));
	box-shadow: var(--pf-shadow-sm);
	text-align: start;
	transition: transform 300ms var(--pf-ease), border-color 240ms ease,
		box-shadow 300ms var(--pf-ease), background-color 240ms ease;
}

.expertise-card::before,
.experience-card::before,
.certificate-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(var(--component-rgb), 0.92),
		rgba(var(--pf-accent-2-rgb), 0.84),
		transparent
	);
	transform: scaleX(0.18);
	transform-origin: center;
	transition: transform 380ms var(--pf-ease);
	pointer-events: none;
}

.expertise-card:hover,
.experience-card:hover,
.certificate-card:hover {
	transform: translateY(-5px);
	border-color: rgba(var(--component-rgb), 0.45);
	box-shadow: var(--pf-shadow-lg), 0 0 0 1px rgba(var(--component-rgb), 0.055);
}

.expertise-card:hover::before,
.experience-card:hover::before,
.certificate-card:hover::before {
	transform: scaleX(1);
}

/* Technical Expertise */
.expertise-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 22px;
}

.expertise-card__icon,
.certificate-card__icon {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	flex: 0 0 48px;
	border: 1px solid rgba(var(--component-rgb), 0.28);
	border-radius: 15px;
	background: linear-gradient(
		145deg,
		rgba(var(--component-rgb), 0.16),
		rgba(var(--pf-accent-2-rgb), 0.075)
	);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
	color: rgb(var(--component-rgb));
	font-size: 1.18rem;
	transition: transform 300ms var(--pf-ease), box-shadow 300ms ease;
}

.expertise-card:hover .expertise-card__icon,
.certificate-card:hover .certificate-card__icon {
	transform: translateY(-2px) rotate(-3deg);
	box-shadow: 0 10px 24px rgba(var(--component-rgb), 0.14);
}

.expertise-card__index {
	direction: ltr;
	unicode-bidi: isolate;
	color: rgba(var(--component-rgb), 0.76);
	font: 760 0.72rem/1 var(--pf-font-en);
	letter-spacing: 0.13em;
}

.expertise-card__title,
.experience-card__title,
.certificate-card__identity h4 {
	margin: 0;
	color: var(--pf-text);
	font-size: clamp(1.12rem, 1.65vw, 1.38rem);
	font-weight: 720;
	line-height: 1.35;
	letter-spacing: -0.018em;
	text-transform: none;
}

html[data-language="fa"] :is(.expertise-card__title, .experience-card__title, .certificate-card__identity h4),
body:not(.lang-en) :is(.expertise-card__title, .experience-card__title, .certificate-card__identity h4) {
	letter-spacing: 0;
	line-height: 1.65;
}

.expertise-card__description,
.resume-description {
	margin: 12px 0 22px;
	color: var(--pf-muted);
	font-size: 0.92rem;
	line-height: 1.78;
}

.expertise-tech-list,
.resume-tech-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	margin: auto 0 0;
	padding: 0;
	list-style: none;
}

.expertise-tech,
.resume-tech {
	direction: ltr;
	unicode-bidi: isolate;
	display: inline-flex;
	align-items: center;
	min-height: 27px;
	padding: 5px 9px;
	border: 1px solid rgba(var(--pf-accent-rgb), 0.2);
	border-radius: 999px;
	background: rgba(var(--pf-accent-rgb), 0.068);
	color: var(--pf-text-soft);
	font: 690 0.7rem/1.15 var(--pf-font-en);
	white-space: nowrap;
}

/* Experience and credentials */
.resume-content {
	display: grid;
	gap: clamp(58px, 7vw, 88px);
}

.resume-group {
	min-width: 0;
}

.resume-group__header {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: clamp(24px, 5vw, 72px);
	margin-bottom: clamp(25px, 3.5vw, 38px);
}

.resume-group__header > div {
	min-width: 0;
}

.resume-group__eyebrow {
	display: inline-flex;
	align-items: center;
	min-height: 27px;
	margin-bottom: 12px;
	padding: 6px 10px;
	border: 1px solid rgba(var(--pf-accent-rgb), 0.24);
	border-radius: 999px;
	background: rgba(var(--pf-accent-rgb), 0.07);
	color: var(--pf-accent);
	font: 760 0.68rem/1 var(--pf-font-en);
	letter-spacing: 0.1em;
}

html[data-language="fa"] .resume-group__eyebrow,
body:not(.lang-en) .resume-group__eyebrow {
	font-family: var(--pf-font-fa);
	letter-spacing: 0;
}

.resume-group__header h3 {
	margin: 0;
	color: var(--pf-text);
	font-size: clamp(1.75rem, 3.4vw, 2.55rem);
	font-weight: 740;
	line-height: 1.18;
	letter-spacing: -0.035em;
}

html[data-language="fa"] .resume-group__header h3,
body:not(.lang-en) .resume-group__header h3 {
	letter-spacing: 0;
	line-height: 1.45;
}

.resume-group__header > p {
	width: min(100%, 520px);
	margin: 0;
	color: var(--pf-muted);
	font-size: 0.93rem;
	line-height: 1.75;
	text-align: start;
}

.experience-card__meta,
.certificate-card__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 20px;
}

.resume-date {
	direction: ltr;
	unicode-bidi: isolate;
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 6px 10px;
	border: 1px solid rgba(var(--pf-accent-rgb), 0.22);
	border-radius: 999px;
	background: rgba(var(--pf-accent-rgb), 0.07);
	color: var(--pf-accent);
	font: 760 0.7rem/1 var(--pf-font-en);
	letter-spacing: 0.035em;
	white-space: nowrap;
}

.resume-location {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--pf-muted);
	font-size: 0.78rem;
	font-weight: 620;
	line-height: 1.35;
}

.resume-location i {
	color: var(--pf-accent);
	font-size: 0.88rem;
}

.experience-card__title {
	margin-bottom: 0;
}

.experience-card .resume-description {
	margin-top: 12px;
}

.certificates-grid {
	grid-auto-rows: auto;
}

.certificate-card {
	--component-rgb: var(--pf-accent-rgb);
}

.certificate-card--featured {
	background:
		radial-gradient(circle at 100% 0%, rgba(var(--component-rgb), 0.135), transparent 37%),
		linear-gradient(145deg, var(--pf-surface-strong), rgba(var(--component-rgb), 0.035));
}

.certificate-card:has(.award-badge--silver) {
	--component-rgb: 148, 163, 184;
}

.certificate-card:has(.award-badge--bronze) {
	--component-rgb: 185, 112, 67;
}

.certificate-card:has(.award-badge--special) {
	--component-rgb: var(--pf-accent-2-rgb);
}

.certificate-card:has(.award-badge--ifia) {
	--component-rgb: 45, 179, 172;
}

.certificate-card__top {
	margin-bottom: 22px;
}

.award-badge,
.project-award {
	--award-rgb: var(--pf-accent-rgb);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 27px;
	padding: 5px 9px;
	border: 1px solid rgba(var(--award-rgb), 0.34);
	border-radius: 999px;
	background: rgba(var(--award-rgb), 0.105);
	color: var(--pf-text-soft);
	font-size: 0.68rem;
	font-weight: 760;
	line-height: 1.2;
	unicode-bidi: isolate;
}

.award-badge {
	direction: ltr;
	font-family: var(--pf-font-en);
	white-space: nowrap;
}

.award-badge i,
.project-award i {
	color: rgb(var(--award-rgb));
	font-size: 0.78rem;
}

.award-badge--silver,
.project-award--silver {
	--award-rgb: 148, 163, 184;
}

.award-badge--bronze,
.project-award--bronze {
	--award-rgb: 185, 112, 67;
}

.award-badge--special,
.project-award--special {
	--award-rgb: var(--pf-accent-2-rgb);
}

.award-badge--ifia,
.project-award--ifia {
	--award-rgb: 45, 179, 172;
}

.award-badge--nasa {
	--award-rgb: 72, 139, 219;
}

.certificate-card__identity {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	min-width: 0;
	margin-bottom: 15px;
}

.certificate-card__identity > div {
	min-width: 0;
}

.certificate-card__identity h4 {
	font-size: clamp(1.05rem, 1.55vw, 1.3rem);
}

.certificate-card__identity p {
	margin: 6px 0 0;
	color: var(--pf-muted);
	font-size: 0.78rem;
	font-weight: 620;
	line-height: 1.55;
}

.certificate-card > .resume-location {
	margin-bottom: 15px;
}

.certificate-card .resume-description {
	margin: 0 0 18px;
}

.certificate-card__context {
	margin-bottom: 16px;
	padding: 12px 14px;
	border-inline-start: 2px solid rgba(var(--component-rgb), 0.66);
	border-radius: 0 12px 12px 0;
	background: rgba(var(--component-rgb), 0.055);
}

html[data-language="fa"] .certificate-card__context,
body:not(.lang-en) .certificate-card__context {
	border-radius: 12px 0 0 12px;
}

.certificate-card__context > span,
.certificate-card__verification > span {
	display: block;
	margin-bottom: 5px;
	color: var(--pf-muted);
	font-size: 0.64rem;
	font-weight: 720;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.certificate-card__context strong {
	display: block;
	color: var(--pf-text-soft);
	font-size: 0.78rem;
	font-weight: 680;
	line-height: 1.55;
}

.certificate-card__event,
.certificate-card__verification {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--pf-border);
	color: var(--pf-muted);
	font-size: 0.72rem;
	font-weight: 620;
	line-height: 1.55;
}

.certificate-card__verification {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 14px;
}

.certificate-card__verification > span {
	margin: 0;
}

.certificate-card__verification strong {
	direction: ltr;
	unicode-bidi: isolate;
	color: var(--pf-accent);
	font: 760 0.75rem/1.3 var(--pf-font-en);
	letter-spacing: 0.035em;
	overflow-wrap: anywhere;
}

/* Project recognition stays secondary to the project title and technical tags. */
.portfolio-box .content-box,
html[data-language="fa"] .portfolio-box .content-box,
body:not(.lang-en) .portfolio-box .content-box {
	display: flex !important;
	flex-direction: column;
}

.portfolio-box .content-box > p,
body.light-mode .portfolio-box .content-box > p {
	-webkit-line-clamp: 3;
}

.project-awards {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 2px 0 11px;
}

.project-award {
	min-height: 24px;
	padding: 4px 8px;
	font-size: 0.61rem;
	line-height: 1.25;
	white-space: normal;
}

.portfolio-box .portfolio-item .content-box .project-award i,
.portfolio-box .portfolio-item:hover .content-box .project-award i {
	position: static !important;
	inset: auto !important;
	display: inline-block;
	width: auto;
	height: auto;
	font-size: 0.78rem;
	line-height: 1;
	transform: none !important;
}

.project-award-note {
	margin-top: auto;
	padding-top: 11px;
	border-top: 1px solid rgba(148, 163, 184, 0.18);
	color: var(--pf-text-soft);
	font-size: 0.69rem;
	font-weight: 640;
	line-height: 1.55;
}

.project-award-note--related {
	border-top-color: rgba(var(--pf-accent-2-rgb), 0.23);
	color: var(--pf-muted);
}

@media only screen and (max-width: 991px) {
	.resume-group__header {
		align-items: flex-start;
		gap: 28px;
	}

	.resume-group__header > p {
		width: min(48%, 460px);
	}
}

@media only screen and (max-width: 767px) {
	.expertise-grid,
	.experience-grid,
	.certificates-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.resume-content {
		gap: 58px;
	}

	.resume-group__header {
		display: grid;
		gap: 14px;
	}

	.resume-group__header > p {
		width: 100%;
	}

	.expertise-card,
	.experience-card,
	.certificate-card {
		border-radius: 19px;
	}

	.project-awards {
		margin-bottom: 10px;
	}
}

@media only screen and (max-width: 420px) {
	.expertise-card,
	.experience-card,
	.certificate-card {
		padding: 19px;
	}

	.expertise-card__icon,
	.certificate-card__icon {
		width: 44px;
		height: 44px;
		flex-basis: 44px;
		border-radius: 14px;
	}

	.experience-card__meta,
	.certificate-card__top {
		align-items: flex-start;
	}

	.award-badge {
		white-space: normal;
	}

	.certificate-card__identity {
		gap: 12px;
	}

	.portfolio-box .content-box > p,
	body.light-mode .portfolio-box .content-box > p {
		-webkit-line-clamp: 4;
	}
}

@media (prefers-reduced-motion: reduce) {
	.expertise-card:hover,
	.experience-card:hover,
	.certificate-card:hover,
	.expertise-card:hover .expertise-card__icon,
	.certificate-card:hover .certificate-card__icon {
		transform: none;
	}
}