@charset "utf-8";
/*
/*	Copyright (c) 2022 Aghajanian
/*	Author: Aghajanian
/*	This file is made for CURRENT TEMPLATE


01) GRAX BASE
02) GRAX TOPBAR
03) GRAX MOBILE MENU
04) GRAX HERO
05) GRAX ABOUT
06) GRAX PORTFOLIO
07) GRAX TALK
08) GRAX NEWS
09) GRAX CONTACT
10) GRAX COPYRIGHT
11) GRAX CURSOR
12) GRAX PARTICLE EFFECT
13) GRAX GLITCH EFFECT
14) GRAX MEDIA QUERIES (FOR SMALL DEVIVES)


/*---------------------------------------------------*/
/*	01) GRAX BASE
/*---------------------------------------------------*/

html {
	overflow-x: hidden;
	padding: 0px;
	margin: 0px;
}
body {
	font-family: "Mulish";
	font-size: 15px;
	line-height: 30px;
	letter-spacing: 0px;
	word-wrap: break-word;
	font-weight: 400;
	background-color: #fff;
	color: #767676;
}

/* Global RTL Font Support - Vazirmatn for all Persian text */
[dir="rtl"] *,
[dir="rtl"] body,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] p,
[dir="rtl"] span,
[dir="rtl"] div,
[dir="rtl"] a,
[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] label,
[dir="rtl"] li {
    font-family: 'Vazirmatn', sans-serif !important;
}
svg {
	fill: currentcolor;
	width: 15px;
	height: 15px;
}
img.svg {
	width: 15px;
	height: 15px;
}
::-webkit-input-placeholder {
	/* WebKit, Blink, Edge */
	color: #6f6f6f;
}
:-moz-placeholder {
	/* Mozilla Firefox 4 to 18 */
	color: #6f6f6f;
	opacity: 1;
}
::-moz-placeholder {
	/* Mozilla Firefox 19+ */
	color: #6f6f6f;
	opacity: 1;
}
:-ms-input-placeholder {
	/* Internet Explorer 10-11 */
	color: #6f6f6f;
}
::-ms-input-placeholder {
	/* Microsoft Edge */
	color: #6f6f6f;
}

::placeholder {
	/* Most modern browsers support this now. */
	color: #6f6f6f;
}

.container {
	max-width: 1200px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	height: auto;
	padding: 0.1px 40px;
	position: relative;
	clear: both;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 500;
	line-height: 1.4;
	font-family: "Poppins";
	color: #000;
}

h1 {
	font-size: 45px;
}
h2 {
	font-size: 36px;
}
h3 {
	font-size: 30px;
}
h4 {
	font-size: 24px;
}
h5 {
	font-size: 20px;
}
h6 {
	font-size: 16px;
}

.grax_tm_all_wrap {
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
}
.grax_tm_all_wrap,
.grax_tm_all_wrap * {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box; /* Firefox, other Gecko */
	box-sizing: border-box; /* Opera/IE 8+ */
}
.grax_tm_section {
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}

/* کاهش فاصله بین بخش‌ها */
.grax_tm_section + .grax_tm_section {
	margin-top: 15px;
}

/* کاهش فاصله بین About Me و Selected Works */
#about + #portfolio {
	margin-top: 10px;
}
#preloader {
	position: fixed;
	left: 0;
	top: 0;
	height: 100vh;
	width: 100%;
	z-index: 99999;
	display: flex;
}
#preloader:before,
#preloader:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 50%;
	height: 100%;
	z-index: -1;
	background-color: #fff;
	-webkit-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
}
#preloader:after {
	left: auto;
	right: 0;
}
#preloader .loader_line {
	margin: auto;
	width: 1px;
	height: 250px;
	position: relative;
	overflow: hidden;
	-webkit-transition: all 0.8s ease 0s;
	-o-transition: all 0.8s ease 0s;
	transition: all 0.8s ease 0s;
}
.loader_line:before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 0%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	background-color: #000;
	-webkit-animation: lineheight 1000ms ease-in-out 0s forwards;
	-o-animation: lineheight 1000ms ease-in-out 0s forwards;
	animation: lineheight 1000ms ease-in-out 0s forwards;
}
.loader_line:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 100%;
	background-color: #c8c8c8;
	-webkit-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	transform: translateY(-100%);
	-webkit-animation: lineround 1200ms linear 0s infinite;
	-o-animation: lineround 1200ms linear 0s infinite;
	animation: lineround 1200ms linear 0s infinite;
	animation-delay: 2000ms;
}

@keyframes lineheight {
	0% {
		height: 0%;
	}
	100% {
		height: 100%;
	}
}

@keyframes lineround {
	0% {
		-webkit-transform: translateY(-100%);
		-ms-transform: translateY(-100%);
		-o-transform: translateY(-100%);
		transform: translateY(-100%);
	}
	100% {
		-webkit-transform: translateY(200%);
		-ms-transform: translateY(200%);
		-o-transform: translateY(200%);
		transform: translateY(200%);
	}
}

/*hiding all*/
.preloaded .loader_line:after {
	opacity: 0;
}
.preloaded .loader_line {
	opacity: 0;
	height: 100% !important;
}
.preloaded:before,
.preloaded:after {
	-webkit-animation: preloadedzero 300ms ease-in-out 500ms forwards;
	-o-animation: preloadedzero 300ms ease-in-out 500ms forwards;
	animation: preloadedzero 300ms ease-in-out 500ms forwards;
}
@keyframes preloadedzero {
	0% {
		width: 50%;
	}
	100% {
		width: 0%;
	}
}

/*---------------------------------------------------*/
/*	02) GRAX TOPBAR
/*---------------------------------------------------*/

.grax_tm_topbar {
	left: 0px;
	right: 0px;
	position: fixed;
	z-index: 9999;
	padding: 30px 0px;
	transform: translateY(-101%);

	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.grax_tm_topbar.opened {
	transform: translateY(0);
}
.grax_tm_topbar.animate {
	background-color: #fff;
	padding: 25px 0px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
	z-index: 9999;
}
.grax_tm_topbar .topbar_inner {
	width: 100%;
	height: auto;
	clear: both;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.grax_tm_topbar .logo .dark {
	display: none;
}
.grax_tm_topbar.animate .logo .dark {
	display: block;
}
.grax_tm_topbar.animate .logo .light {
	display: none;
}
.grax_tm_topbar .logo img {
	max-width: 100px;
}
.grax_tm_topbar .logo a {
	display: inline-block;
}
.grax_tm_topbar .menu ul {
	margin: 0px;
	list-style-type: none;
}
.grax_tm_topbar .menu ul li {
	margin: 0px 30px 0px 0px;
	display: inline-block;
}
.grax_tm_topbar .menu ul li:last-child {
	margin-right: 0px;
}
.grax_tm_topbar .menu ul li a {
	text-decoration: none;
	color: #fff;
	font-family: "Poppins";
	font-weight: 500;
	transition: all 0.3s ease;
}
.grax_tm_topbar .menu ul li.current a {
	color: #e54b4b;
}
.grax_tm_topbar .menu ul li a:hover {
	color: #e54b4b;
}
.grax_tm_topbar.animate .menu ul li a {
	color: #000;
}

/*---------------------------------------------------*/
/*	03) GRAX MOBILE MENU
/*---------------------------------------------------*/

.grax_tm_mobile_menu {
	width: 100%;
	height: auto;
	position: relative;
	top: 0px;
	left: 0px;
	display: none;
	z-index: 9999;
}
.grax_tm_mobile_menu .topbar_inner {
	width: 100%;
	height: auto;
	float: left;
	clear: both;
	background-color: #fff;
	padding: 20px 0px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.grax_tm_mobile_menu .topbar_in {
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.my_trigger .hamburger {
	padding: 15px 15px;
	display: inline-block;
	cursor: pointer;
	transition-property: opacity, filter;
	transition-duration: 0.15s;
	transition-timing-function: linear;
	font: inherit;
	color: inherit;
	text-transform: none;
	background-color: transparent;
	border: 0;
	margin: 0;
	overflow: visible;
}
.my_trigger .hamburger-box {
	width: 30px;
	height: 18px;
	display: inline-block;
	position: relative;
}
.my_trigger .hamburger-inner {
	display: block;
	top: 50%;
	margin-top: -2px;
}
.my_trigger .hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
	width: 30px;
	height: 2px;
	background-color: #333333;
	position: absolute;
	transition-property: transform;
	transition-duration: 0.15s;
	transition-timing-function: ease;

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.my_trigger .hamburger-inner::before,
.my_trigger .hamburger-inner::after {
	content: "";
	display: block;
}
.my_trigger .hamburger-inner::before {
	top: -8px;
}
.my_trigger .hamburger-inner::after {
	bottom: -10px;
}
.my_trigger .hamburger--collapse-r .hamburger-inner {
	top: auto;
	bottom: 0;
	transition-duration: 0.13s;
	transition-delay: 0.13s;
	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.my_trigger .hamburger--collapse-r .hamburger-inner::after {
	top: -16px;
	transition:
		top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
		opacity 0.1s linear;
}
.my_trigger .hamburger--collapse-r .hamburger-inner::before {
	transition:
		top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
		transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.my_trigger .hamburger--collapse-r.is-active .hamburger-inner {
	transform: translate3d(0, -10px, 0) rotate(45deg);
	transition-delay: 0.22s;
	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.my_trigger .hamburger--collapse-r.is-active .hamburger-inner::after {
	top: 0;
	opacity: 0;
	transition:
		top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
		opacity 0.1s 0.22s linear;
}
.my_trigger .hamburger--collapse-r.is-active .hamburger-inner::before {
	top: 0;
	transform: rotate(90deg);
	transition:
		top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
		transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.my_trigger .hamburger {
	padding: 0px;
	height: 100%;
	display: table-cell;
	vertical-align: middle;
}
.my_trigger .hamburger-box {
	display: block;
}
.my_trigger .hamburger .hamburger-inner::before,
.my_trigger .hamburger .hamburger-inner::after,
.my_trigger .hamburger .hamburger-inner {
	background-color: #000;
	width: 30px;

	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.grax_tm_mobile_menu .dropdown {
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	background-color: #fff;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	display: none;
}
.grax_tm_mobile_menu .dropdown .dropdown_inner {
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding: 25px 0px;
}
.grax_tm_mobile_menu .dropdown .dropdown_inner ul {
	margin: 0px;
	list-style-type: none;
}
.grax_tm_mobile_menu .dropdown .dropdown_inner ul li {
	margin: 0px;
	float: left;
	width: 100%;
}
.grax_tm_mobile_menu .dropdown .dropdown_inner ul li a {
	text-decoration: none;
	color: #000;
	display: inline-block;
	padding: 4px 0px;
	font-family: "Montserrat";
	font-weight: 500;
}
.grax_tm_mobile_menu .logo img {
	max-width: 70px;
}

/*---------------------------------------------------*/
/*	04) GRAX HERO
/*---------------------------------------------------*/

.grax_tm_hero {
	width: 100%;
	height: 100vh;
	clear: both;
	float: left;
	position: relative;
	overflow: hidden;

	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.grax_tm_hero .bg {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
}
.grax_tm_hero .bg .image {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.grax_tm_hero .bg .overlay {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 1;
	background-color: rgba(0, 0, 0, 0.2);
}
.grax_tm_hero .content {
	width: 100%;
	height: 100%;
	float: left;
	position: relative;
	z-index: 2;
}
.grax_tm_hero .container {
	height: 100%;
}
.grax_tm_hero .details {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
}
.grax_tm_hero .name {
	font-size: 72px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 11px;
}

.grax_tm_hero .details[data-animation="toTop"] .fn_animation .character {
	top: 15px;
}
.grax_tm_hero .details[data-animation="toTop"] .fn_animation .character.opened {
	top: 0px;
}

.grax_tm_hero .details[data-animation="toRight"] .fn_animation .character {
	right: 15px;
}
.grax_tm_hero .details[data-animation="toRight"] .fn_animation .character.opened {
	right: 0px;
}

.grax_tm_hero .details[data-animation="scale"] .fn_animation .character {
	opacity: 1;
	visibility: visible;
	transform: scale(0);
}
.grax_tm_hero .details[data-animation="scale"] .fn_animation .character.opened {
	transform: scale(1);
}

.grax_tm_hero .details[data-animation="rotate"] .fn_animation .character {
	transform: rotate(30deg);
}
.grax_tm_hero .details[data-animation="rotate"] .fn_animation .character.opened {
	transform: rotate(0);
}

.fn_animation {
	opacity: 0;
}
.fn_animation.ready {
	opacity: 1;
}
.fn_animation .character {
	display: inline-block;
	position: relative;
	opacity: 0;
	visibility: hidden;
	transform: translateZ(0);

	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.fn_animation .character.opened {
	opacity: 1;
	visibility: visible;
}
.fn_animation.job .character {
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-ms-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
.grax_tm_hero .job {
	color: #ddd;
	letter-spacing: 0px;
	font-family: "Poppins";
	font-size: 17px;
	font-weight: 500;
	margin-bottom: 40px;
	max-width: 400px;
	font-style: italic;
}
.grax_tm_down {
	position: absolute;
	z-index: 7;
	bottom: 5%;
	display: none;
}
.grax_tm_down.opened {
	display: block;
}
.grax_tm_down[data-position="left"] {
	left: 0px;
}
.grax_tm_down[data-position="right"] {
	right: 0px;
}
.grax_tm_down[data-position="center"] {
	left: 50%;
	transform: translateX(-50%);
}
.grax_tm_down .line_wrapper {
	position: absolute;
	width: 1px;
	height: 100%;
	left: 0;
	right: 0;
	margin: 0px auto;
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	visibility: visible;

	-webkit-transition: all 0.7s;
	-moz-transition: all 0.7s;
	-ms-transition: all 0.7s;
	-o-transition: all 0.7s;
	transition: all 0.7s;
}
.grax_tm_down .line_wrapper {
	width: 1px;
	height: 50px;
	background: none;
	display: block;
}
.grax_tm_down .line_wrapper:before {
	content: "";
	background-color: #000;
	width: 1px;
	height: 50%;
	display: block;
	top: 0;

	-webkit-animation: scroll-down 2s ease-in-out infinite;
	-ms-animation: scroll-down 2s ease-in-out infinite;
	animation: scroll-down 2s ease-in-out infinite;
}


.grax_tm_down[data-skin="light"] .line_wrapper:before {
	background-color: #fff;
}

/*---------------------------------------------------*/
/*	05) GRAX ABOUT
/*---------------------------------------------------*/

.grax_tm_about {
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	background-color: #f8f8f8;
	margin-bottom: 150px;
	padding-top: 150px;
}
.grax_tm_about .about_inner {
	width: 100%;
	height: auto;
	clear: both;
	display: flex;
	align-items: center;
}
.grax_tm_about .left {
	width: 40%;
	padding-right: 50px;
}
.grax_tm_about .left .image {
	position: relative;
}
.grax_tm_about .left .image img {
	opacity: 0;
	min-width: 100%;
}
.grax_tm_about .left .main {
	position: absolute !important;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border-radius: 5px;
	box-shadow: 0px 0px 40px rgb(0 0 0 / 20%);
}
.grax_tm_about .right {
	width: 60%;
	padding-left: 50px;
}
.grax_tm_about .right .text {
	width: 100%;
	float: left;
	padding-top: 27px;
	padding-bottom: 28px;
}
.grax_tm_about .right .list {
	width: 100%;
	float: left;
	margin-bottom: 27px;
}
.grax_tm_about .right .list ul {
	margin: 0px 0px 0px -20px;
	list-style-type: none;
}
.grax_tm_about .right .list ul li {
	margin: 0px 0px 13px 0px;
	float: left;
	width: 50%;
	position: relative;
	padding-left: 20px;
}
.grax_tm_about .right .list ul li .list_inner {
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
	padding-left: 30px;
}
.grax_tm_about .right .list ul li span {
	font-family: "Poppins";
	font-weight: 600;
	color: #000;
	font-style: italic;
}
.grax_tm_about .right .list ul li .svg {
	width: 15px;
	height: 15px;
	position: absolute;
	left: 0px;
	top: 50%;
	transform: translateY(-50%);
	color: #000;
	margin-top: -1px;
}
/* --- استایل به‌روز‌شده و تصحیح‌شده برای دکمه Download CV --- */

/* استایل پایه دکمه Download CV */
/* استفاده از سلکتور مشخص‌تر برای جلوگیری از تداخل */
.grax_tm_button.about_button_rewritten {
    margin-top: 50px;
    /* وسط‌چین کردن دکمه در کانتینر والد */
    text-align: center;
    width: 100%; /* اطمینان از اینکه کل عرض را پوشش می‌دهد */
}

/* استایل لینک داخل دکمه */
/* سلکتور بسیار مشخص برای لغو استایل‌های عمومی‌تر */
.grax_tm_button.about_button_rewritten a {
    /* متغیر برای ذخیره رنگ اصلی دکمه در حالت عادی */
    --button-original-bg-color: var(--main-color);
    --button-original-text-color: #ffffff; /* رنگ متن سفید در حالت عادی */

    /* استایل‌های مشترک با span ها در قسمت Technical Expertise */
    display: inline-block; /* تغییر از flex به inline-block برای رفتار دکمه‌ای صحیح */
    background-color: var(--button-original-bg-color); /* رنگ پس‌زمینه از تنظیمات */
    color: var(--button-original-text-color); /* متن سفید در حالت عادی */
    padding: 10px 24px; /* یا هر اندازه دلخواه */
    border-radius: 10px; /* یا هر اندازه دلخواه */
    text-decoration: none;
    font-weight: 400; /* یا هر وزن دلخواه */
    font-size: 0.9rem; /* یا هر اندازه دلخواه */
	font-family: inherit;
    text-align: center; /* وسط‌چین کردن متن داخل دکمه */
	cursor: pointer;
    box-sizing: border-box;

    /* استایل‌های انیمیشن و ظاهری */
    transition: all 0.3s ease; /* انیمیشن نرم */
    border: none; /* حذف border */
    box-shadow: 0 5px 4px rgba(0,0,0,0.05); /* سایه از فایل شما */

    /* لغو استایل‌های نامطلوب از قواعد قبلی */
    justify-content: center; /* اطمینان از وسط‌چین بودن محتوا */
    align-items: center; /* اطمینان از وسط‌چین عمودی محتوا */
    gap: 0; /* لغو gap احتمالی */
    flex-wrap: nowrap; /* لغو flex-wrap احتمالی */
    width: auto; /* اجازه دادن به دکمه برای اندازه‌گیری خودکار */
    margin: 0 auto; /* وسط‌چین کردن خود دکمه (اگر والد text-align نکند) */
}

/* حالت هاور دکمه Download CV - مطابق با span ها */
.grax_tm_button.about_button_rewritten a:hover {
    background-color: #ffffff; /* پس‌زمینه سفید */
    /* رنگ متن به رنگ اصلی دکمه (همان رنگی که قبل از هاور داشت) */
    color: var(--button-original-bg-color);
    /* حاشیه به رنگ اصلی دکمه */
    border: 2px solid var(--button-original-bg-color);

    /* جلوه‌های اختیاری از فایل شما */
    transform: translateY(-2px); /* کمی بالا بیاید */
    /* box-shadow: 0 7px 6px rgba(0,0,0,0.1); */ /* سایه قوی‌تر (اختیاری) */
}

/* حالت فوکوس برای دسترس‌پذیری */
.grax_tm_button.about_button_rewritten a:focus {
    outline: 2px dashed var(--button-original-bg-color);
    outline-offset: 2px;
}

/* ------------------------------ */
.grax_tm_progress_part {
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding: 135px 0px 140px 0px;
}
.grax_tm_progress_part .part_inner {
	width: 100%;
	height: auto;
	clear: both;
	display: flex;
}
.grax_tm_progress_part .left {
	width: 50%;
	padding-right: 50px;
}
.grax_tm_progress_part .left h3 {
	font-weight: 600;
	margin-bottom: 27px;
}
.grax_tm_progress_part .right {
	width: 50%;
	padding-left: 50px;
}
.kioto_progress {
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.progress_inner {
	width: 100%;
	margin-bottom: 27px;
}
.progress_inner:last-child {
	margin-bottom: 0px;
}
.progress_inner > span {
	margin: 0px 0px 7px 0px;
	width: 100%;
	display: block;
	text-align: left;
	font-family: "Poppins";
	font-weight: 500;
	color: #000;
}
.progress_inner span.number {
	float: right;
}
.progress_inner .background {
	background: rgba(0, 0, 0, 0.09);
	width: 100%;
	min-width: 100%;
	position: relative;
	height: 8px;
	border-radius: 5px;
}
.progress_inner .background .bar_in {
	height: 100%;
	background: #e54b4b;
	width: 0px;
	overflow: hidden;
	border-radius: 5px;
}
.progress_inner .background .bar {
	width: 0px;
	height: 100%;
}
.progress_inner .background .bar.open {
	-webkit-animation: wow 2s cubic-bezier(0.165, 0.84, 0.44, 1); /* Safari 4+ */
	-moz-animation: wow 2s cubic-bezier(0.165, 0.84, 0.44, 1); /* Fx 5+ */
	animation: wow 2s cubic-bezier(0.165, 0.84, 0.44, 1); /* IE 10+ */
	width: 100%;
}

@-webkit-keyframes wow {
	0% {
		width: 0%;
	}
	100% {
		width: 100%;
	}
}
@-moz-keyframes wow {
	0% {
		width: 0%;
	}
	100% {
		width: 100%;
	}
}
@keyframes wow {
	0% {
		width: 0%;
	}
	100% {
		width: 100%;
	}
}

/*---------------------------------------------------*/
/*	06) GRAX PORTFOLIO - SELECTED WORKS
/*---------------------------------------------------*/

.selected_works_section {
    padding: 60px 0;
    background: transparent;
}

.projects_container {
        display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 50px;
}

/* Ensure 4 columns on larger screens */
@media (min-width: 1201px) {
    .projects_container {
        grid-template-columns: repeat(4, 1fr);
        gap: 25px;
    }
}

.project_card {
            background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
    transition: all 0.4s ease;
    position: relative;
    border: 2px solid #f1f3f4;
}

.project_card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border-color: var(--main-color);
}

.project_image_container {
    position: relative;
    overflow: hidden;
            height: 250px;
}

.project_image {
    width: 100%;
    height: 100%;
            object-fit: cover;
    transition: all 0.4s ease;
}

.project_card:hover .project_image {
    transform: scale(1.05);
    filter: brightness(1.2) saturate(0.3) blur(0.5px);
}

.project_image_container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0);
    transition: all 0.4s ease;
    z-index: 1;
    pointer-events: none;
}

.project_card:hover .project_image_container::after {
    background: rgba(255, 255, 255, 0.6);
}

.project_overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    padding: 20px;
    transform: translateY(100%);
    transition: transform 0.4s ease;
    z-index: 2;
}

.project_card:hover .project_overlay {
    transform: translateY(0);
}

.project_title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.project_details {
    padding: 25px;
}

.detail_row {
            display: flex;
            flex-direction: column;
    align-items: flex-start;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.detail_row:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.detail_label {
    color: #6b7280;
			font-weight: 500;
    font-size: 13px;
			margin-bottom: 5px;
    width: 100%;
}

.detail_value {
    color: #374151;
    font-weight: 400;
    font-size: 13px;
    width: 100%;
}

.progress_wrapper {
    width: 100%;
    margin-top: 5px;
}

.progress_container {
            display: flex;
            align-items: center;
    gap: 12px;
    width: 100%;
}

.progress_bar_bg {
    flex: 1;
    height: 8px;
    background-color: #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.progress_bar_fill {
    height: 100%;
    background: linear-gradient(90deg, var(--main-color), #ff6b35);
    border-radius: 10px;
    width: 0%;
    transition: width 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            position: relative;
    overflow: hidden;
        }

.progress_bar_fill::after {
            content: '';
            position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: progress_shine 2s ease-in-out;
}

@keyframes progress_shine {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

.progress_text {
    color: var(--main-color);
    font-weight: 600;
    font-size: 12px;
    min-width: 35px;
    text-align: center;
}

/* Dark mode support */
.dark .project_card {
    background: #1f2937;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    border-color: #374151;
}

.dark .project_card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    border-color: var(--main-color);
}

.dark .detail_row {
    border-bottom-color: #374151;
}

.dark .detail_label {
    color: #9ca3af;
}

.dark .detail_value {
    color: #d1d5db;
}

.dark .progress_bar_bg {
    background-color: #374151;
}

/* RTL Support */
[dir="rtl"] .projects_container {
    direction: rtl;
}

[dir="rtl"] .detail_row {
    align-items: flex-end;
}

[dir="rtl"] .detail_label {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .detail_value {
    text-align: right;
    direction: rtl;
    font-family: 'Vazirmatn', sans-serif !important;
}

[dir="rtl"] .detail_label {
    font-family: 'Vazirmatn', sans-serif !important;
}

[dir="rtl"] .project_title {
    font-family: 'Vazirmatn', sans-serif !important;
}

[dir="rtl"] .progress_text {
    text-align: center;
}

/* LTR (Default) text alignment */
[dir="ltr"] .detail_label,
.detail_label {
    text-align: left;
    direction: ltr;
}

[dir="ltr"] .detail_value,
.detail_value {
    text-align: left;
    direction: ltr;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .projects_container {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (max-width: 992px) {
    .projects_container {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

		@media (max-width: 768px) {
    .projects_container {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .project_image_container {
        height: 200px;
    }
    
    .project_details {
        padding: 20px;
    }
    
    .detail_row {
        margin-bottom: 12px;
        padding-bottom: 8px;
    }
    
    .detail_label,
    .detail_value {
        font-size: 12px;
    }
    
    .detail_label {
        margin-bottom: 3px;
    }
    
    .progress_wrapper {
        margin-top: 3px;
    }
    
    .progress_container {
        width: 100%;
        gap: 8px;
    }
    
    .progress_bar_bg {
        height: 6px;
			}
		}

		@media (max-width: 480px) {
    .selected_works_section {
        padding: 40px 0;
    }
    
    .projects_container {
        margin-top: 30px;
        gap: 20px;
    }
    
    .project_image_container {
        height: 180px;
    }
    
    .project_details {
        padding: 15px;
    }
    
    .project_title {
        font-size: 16px;
    }
    
    .detail_label,
    .detail_value {
        font-size: 12px;
    }
}

/* About Me Cards Border Effect */
.bg-white.p-8.rounded-xl.shadow-lg {
    border: 2px solid #f1f3f4 !important;
    transition: all 0.3s ease !important;
}

.bg-white.p-8.rounded-xl.shadow-lg:hover {
    border-color: var(--main-color) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
}

/* Dark mode support for About Me cards */
.dark .bg-white.p-8.rounded-xl.shadow-lg,
body.dark .bg-white.p-8.rounded-xl.shadow-lg {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

.dark .bg-white.p-8.rounded-xl.shadow-lg:hover,
body.dark .bg-white.p-8.rounded-xl.shadow-lg:hover {
    border-color: var(--main-color) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
}

/*---------------------------------------------------*/
/*	07) GRAX TALK
/*---------------------------------------------------*/

.grax_tm_talk {
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding: 102px 20px 105px 20px;
	position: relative;
}
.grax_tm_talk:before {
	position: absolute;
	content: "";
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-image: url(..//img/patterns/inspiration-geometry.png);
	background-repeat: repeat;
	opacity: 1; /**  If you choose lighter pattern image as background please Decrease opacity  **/
	z-index: 2;
}
.grax_tm_talk:after {
	position: absolute;
	content: "";
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-color: #000;
	z-index: 1;
}
.grax_tm_talk .talk_inner {
	width: 100%;
	height: auto;
	clear: both;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	z-index: 3;
}
.grax_tm_talk .text {
	padding-right: 20px;
}
.grax_tm_talk .text h3 {
	font-weight: 600;
	color: #fff;
}
.grax_tm_talk .text h3 span {
	position: relative;
}
.grax_tm_talk .text h3 span:before {
	position: absolute;
	content: "";
	width: 20px;
	height: 4px;
	background-color: #fff;
	bottom: 11px;
	left: 100%;
	opacity: 1;
	animation: myAnim 0.9s infinite;
	-moz-animation: myAnim 0.9s infinite;
	-webkit-animation: myAnim 0.9s infinite;
}
@keyframes myAnim {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-webkit-keyframes myAnim {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-moz-keyframes myAnim {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.grax_tm_talk .text p {
	font-family: "Poppins";
}

.grax_tm_talk .button a {
	color: #fff;
	text-decoration: none;
	font-family: "Poppins";
	font-weight: 600;
	position: relative;
	display: inline-block;
}

.grax_tm_talk .button a:before {
	content: "";
	width: 100%;
	height: 2px;
	position: absolute;
	left: auto;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.2);
}
.grax_tm_talk .button a:after {
	content: "";
	width: 0;
	height: 1px;
	position: absolute;
	left: auto;
	right: 0;
	bottom: 0;
	transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
	background: currentColor;
}
.grax_tm_talk .button a:hover:after {
	width: 100%;
	left: 0;
	right: auto;
}

/*---------------------------------------------------*/
/*	08) LATEST PUBLICATIONS - COMPLETELY REWRITTEN
/*---------------------------------------------------*/

.publications_section {
	width: 100%;
    padding: 100px 0;
    background-color: #f8f9fa;
}

.publications_filters {
	display: flex;
    justify-content: center;
	flex-wrap: wrap;
    gap: 15px;
    margin: 50px 0 40px 0;
}

.pub_filter_btn {
    background: #fff;
    border: 2px solid #e9ecef;
    border-radius: 25px;
    padding: 12px 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #6c757d;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
    justify-content: center;
}

.pub_filter_btn:hover {
    border-color: var(--main-color);
    color: var(--main-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.pub_filter_btn.active {
    background: var(--main-color);
    border-color: var(--main-color);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.pub_filter_btn i {
    font-size: 14px;
}

.publications_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.publication_card {
    background: #fff;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
	transition: all 0.3s ease;
    border: 1px solid #f1f3f4;
}

.publication_card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    border-color: var(--main-color);
}

.pub_date {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    color: #6c757d;
    font-size: 14px;
}

.pub_date i {
    color: var(--main-color);
    font-size: 16px;
}

.date_label {
    font-weight: 500;
}

.date_value {
    color: #495057;
    font-weight: 600;
}

.pub_title {
	font-size: 18px;
	font-weight: 600;
    color: #212529;
    margin-bottom: 15px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pub_journal {
    color: #6c757d;
    font-size: 14px;
    margin-bottom: 20px;
    font-style: italic;
    line-height: 1.4;
}

.pub_tags {
    margin-bottom: 20px;
}

.tags_label {
    font-size: 14px;
    color: #495057;
    font-weight: 500;
    display: block;
    margin-bottom: 10px;
}

.tags_list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pub_tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--main-color);
    padding: 3px 12px;
	font-size: 14px;
    font-weight: 400;
}

.pub_tag i {
    font-size: 10px;
}

.pub_actions {
    text-align: right;
}

.read_more_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--main-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
	transition: all 0.3s ease;
}

.read_more_btn:hover {
    color: var(--main-color);
    transform: translateX(5px);
}

.read_more_btn i {
    transition: transform 0.3s ease;
}

.read_more_btn:hover i {
    transform: translateX(3px);
}

.no_results {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
    font-size: 18px;
}

/* RTL Support */
[dir="rtl"] .publications_filters {
    direction: rtl;
}

[dir="rtl"] .pub_filter_btn {
    direction: rtl;
}

[dir="rtl"] .publication_card {
    direction: rtl;
    text-align: right;
    font-family: 'Vazirmatn', sans-serif;
}

[dir="rtl"] .pub_date {
    flex-direction: row-reverse;
}

[dir="rtl"] .pub_title,
[dir="rtl"] .pub_journal,
[dir="rtl"] .tags_label {
    text-align: right;
    font-family: 'Vazirmatn', sans-serif;
}

[dir="rtl"] .tags_list {
    justify-content: flex-end;
}

[dir="rtl"] .pub_tag {
    direction: rtl;
    font-family: 'Vazirmatn', sans-serif;
}

[dir="rtl"] .pub_tags {
    text-align: right;
}

[dir="rtl"] .pub_actions {
    text-align: right;
}

[dir="rtl"] .read_more_btn {
    flex-direction: row-reverse;
    font-family: 'Vazirmatn', sans-serif;
}

[dir="rtl"] .read_more_btn:hover {
    transform: translateX(-5px);
}

[dir="rtl"] .read_more_btn:hover i {
    transform: translateX(-3px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .publications_section {
        padding: 60px 0;
    }
    
    .publications_filters {
        gap: 10px;
        margin: 30px 0;
    }
    
    .pub_filter_btn {
        padding: 10px 16px;
        font-size: 14px;
        min-width: 100px;
    }
    
    .publications_grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 30px;
    }
    
    .publication_card {
        padding: 20px;
    }
    
    .pub_title {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .publications_filters {
        flex-direction: column;
        align-items: center;
    }
    
    .pub_filter_btn {
        width: 100%;
        max-width: 250px;
    }
    
    .publication_card {
        padding: 15px;
    }
    
    .pub_title {
        font-size: 15px;
    }
    
    .tags_list {
        gap: 5px;
    }
    
    .pub_tag {
        font-size: 11px;
        padding: 4px 8px;
    }
}

body.modal {
	overflow-y: hidden;
}
.grax_tm_modalbox_news {
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 100vh;
	z-index: 15;
	background-color: rgba(0, 0, 0, 0.8);
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
}
.grax_tm_modalbox_news.opened {
	opacity: 1;
	visibility: visible;
}
.grax_tm_modalbox_news .container {
	height: 100vh;
}
.grax_tm_modalbox_news .box_inner {
	position: absolute;
	top: 70px;
	bottom: 70px;
	width: 1200px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #fff;
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	margin-top: -20px;
	transition: all 0.3s ease;
	transition-delay: 0.3s;
}
.grax_tm_modalbox_news.opened .box_inner {
	opacity: 1;
	visibility: visible;
	margin-top: 0px;
}
.grax_tm_modalbox_news .close {
	position: fixed;
	left: 100%;
	top: 0px;
	margin-left: 40px;
	z-index: 111111;
}
.grax_tm_modalbox_news .close a {
	text-decoration: none;
	color: #fff;
}
.dock-panel {
	position: relative;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: flex-end;
	width: fit-content;
	gap: 1rem;
	padding: 0 0.5rem 0.1rem;
	height: 30px;
	transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.dock-item {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	cursor: pointer;
	outline: none;
	width: 40px;
	height: 25px;
	transition:
		width 0.2s cubic-bezier(0.4, 0, 0.2, 1),
		height 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	color: white;
}

.dock-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.dock-label {
	position: absolute;
	top: -2.5rem;
	left: 50%;
	width: fit-content;
	white-space: pre;
	border-radius: 0.375rem;
	padding: 0.125rem 0.5rem;
	font-size: 0.75rem;
	color: #fff;
	transform: translateX(-50%);
	opacity: 0;
	transition:
		opacity 0.2s ease-in-out,
		transform 0.2s ease-in-out;
	pointer-events: none;
}

.dock-item:hover .dock-label {
	opacity: 1;
	transform: translateX(-50%) translateY(-10px);
}

.grax_tm_modalbox_news .close .svg {
	width: 50px;
	height: 50px;
}
.grax_tm_modalbox_news .description_wrap {
	position: relative;
	width: 100%;
	height: 100%;
	float: left;
	overflow: hidden;
	padding: 50px;
}
.grax_tm_modalbox_news .details {
	width: 100%;
	float: left;
	margin-bottom: 30px;
}
.grax_tm_modalbox_news .description {
	width: 100%;
	float: left;
}
.grax_tm_modalbox_news .description p {
	margin-bottom: 15px;
}
.grax_tm_modalbox_news .description blockquote {
	font-style: italic;
	color: #000;
	border-left: 2px solid #e54b4b;
	padding-left: 20px;
	margin-bottom: 15px;
}
.grax_tm_modalbox_news .description_wrap .image {
	position: relative;
	max-height: 450px;
	z-index: -1;
	margin-bottom: 40px;
}
.grax_tm_modalbox_news .description_wrap .image img {
	min-width: 100%;
}
.grax_tm_modalbox_news .description_wrap .image .main {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border-radius: 5px;
}
.grax_tm_modalbox_news .details .title {
	font-weight: 600;
	margin-bottom: 5px;
}
.grax_tm_modalbox_news .date {
	text-transform: uppercase;
	font-family: "Poppins";
	font-size: 12px;
	color: #767676;
	font-style: italic;
}
.grax_tm_modalbox_news .date a {
	text-decoration: none;
	color: #767676;

	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.grax_tm_modalbox_news .date a:hover {
	color: #e54b4b;
}
.grax_tm_modalbox_news .date span {
	position: relative;
	margin-left: 11px;
}
.grax_tm_modalbox_news .date span:before {
	position: absolute;
	content: "";
	margin-top: 0px;
	top: 50%;
	transform: translateY(-50%) rotate(15deg);
	right: 100%;
	background-color: #939393;
	width: 1px;
	height: 9px;
	margin-right: 7px;
}
.grax_tm_modalbox_news .share {
	width: 100%;
	height: auto;
	clear: both;
	display: flex;
	align-items: center;
}
.grax_tm_modalbox_news .share span {
	font-family: "Poppins";
	color: #000;
	font-weight: 600;
	display: inline-block;
	padding-right: 20px;
}
.grax_tm_modalbox_news .share ul {
	margin: 0px;
	list-style-type: none;
}

.grax_tm_modalbox_news .share ul li {
	margin: 0px 10px 0px 0px;
	display: inline-block;
}
.grax_tm_modalbox_news .share ul li a {
	text-decoration: none;
	color: #000;
}

/*---------------------------------------------------*/
/*	09) GRAX CONTACT
/*---------------------------------------------------*/

.grax_tm_contact {
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
	margin-bottom: 400px;
	padding-top: 140px;
	z-index: 1000;
}
.grax_tm_contact .contact_inner {
	width: 100%;
	height: auto;
	clear: both;
	display: flex;
	padding-top: 77px;
}
.grax_tm_contact .left {
	width: 50%;
}
.grax_tm_contact .left .text {
	width: 100%;
	float: left;
	margin-bottom: 40px;
}
.grax_tm_contact .info_list {
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.grax_tm_contact .info_list ul {
	margin: 0px;
	list-style-type: none;
}
.grax_tm_contact .info_list li {
	margin: 0px 0px 18px 0px;
	float: left;
	width: 100%;
	position: relative;
}
.grax_tm_contact .info_list ul li .list_inner {
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
	padding-left: 27px;
}
.grax_tm_contact .info_list ul li span.first {
	min-width: 100px;
	display: inline-block;
}
.grax_tm_contact .info_list ul li span.second {
	font-weight: 400 !important;
	color: inherit !important;
}
.grax_tm_contact .info_list ul li span {
	font-family: "Poppins";
	font-weight: 600;
	color: #000;
}

/* فونت Vazirmatn برای بخش Contact در حالت RTL */
[dir="rtl"] .grax_tm_contact .info_list ul li span {
	font-family: 'Vazirmatn', sans-serif !important;
}

[dir="rtl"] .grax_tm_contact .left .text p {
	font-family: 'Vazirmatn', sans-serif !important;
}

[dir="rtl"] .grax_tm_contact .info_list ul li p {
	font-family: 'Vazirmatn', sans-serif !important;
}
.grax_tm_contact .info_list ul li a {
	text-decoration: none;
	color: inherit !important;
	transition: all 0.3s ease;
	display: inline-block;
	position: relative;
}
.grax_tm_contact .info_list ul li a:hover {
	color: #000;
}
.grax_tm_contact .info_list ul li a:after {
	content: "";
	width: 0;
	height: 1px;
	position: absolute;
	left: auto;
	right: 0;
	bottom: 0;
	transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
	background: currentColor;
}
.grax_tm_contact .info_list ul li a:hover:after {
	width: 100%;
	left: 0;
	right: auto;
}
.grax_tm_contact .info_list ul li a:hover {
	color: #000 !important;
}
.grax_tm_contact .info_list ul li .svg {
	width: 15px;
	height: 15px;
	position: absolute;
	left: 0px;
	top: 50%;
	transform: translateY(-50%);
	color: #000;
	margin-top: -1px;
}
.grax_tm_contact .right {
	width: 50%;
	padding-left: 50px;
}
.grax_tm_contact .fields {
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.grax_tm_contact .fields .first {
	width: 100%;
	float: left;
}
.grax_tm_contact .fields ul {
	margin: 0px;
	list-style-type: none;
}
.grax_tm_contact .fields ul li {
	width: 100%;
	margin: 0px 0px 30px 0px;
	float: left;
}
.grax_tm_contact .fields ul li input {
	width: 100%;
	border: 1px solid rgba(0, 0, 0, 0.2);
	background-color: #fff;
	border-radius: 5px;
}

/* فونت Vazirmatn برای input ها در حالت RTL */
[dir="rtl"] .grax_tm_contact .fields ul li input {
	font-family: 'Vazirmatn', sans-serif !important;
}
.grax_tm_contact .fields ul li input:focus {
	outline: none;
	border: 1px solid rgba(0, 0, 0, 0.5);
}
.grax_tm_contact .fields .last textarea {
	width: 100%;
	border: 1px solid rgba(0, 0, 0, 0.2);
	height: 120px;
	resize: none;
	margin-bottom: 20px;
	background-color: #fff;
	border-radius: 5px;
}

/* فونت Vazirmatn برای textarea در حالت RTL */
[dir="rtl"] .grax_tm_contact .fields .last textarea {
	font-family: 'Vazirmatn', sans-serif !important;
}
.grax_tm_contact .fields .last textarea:focus {
	outline: none;
	border: 1px solid rgb(0, 0, 0);
}
.grax_tm_contact .empty_notice {
	color: #f52225;
	margin-bottom: 7px;
	display: none;
	text-align: left;
	font-weight: 500;
}

/* فونت Vazirmatn برای پیام‌های خطا و موفقیت در حالت RTL */
[dir="rtl"] .grax_tm_contact .empty_notice {
	font-family: 'Vazirmatn', sans-serif !important;
}
.grax_tm_contact .contact_error {
	color: #f52225;
	text-align: left;
	font-weight: 500;
}

[dir="rtl"] .grax_tm_contact .contact_error {
	font-family: 'Vazirmatn', sans-serif !important;
}
.grax_tm_contact .returnmessage {
	color: #3a00ff;
	margin-bottom: 7px;
	text-align: left;
	font-weight: 500;
}

[dir="rtl"] .grax_tm_contact .returnmessage {
	font-family: 'Vazirmatn', sans-serif !important;
}
.grax_tm_contact .grax_tm_button button {
	display: block;
	text-align: center;
	width: 100%;
	color: #fff;
	background-color: var(--main-color);
	border: 2px solid var(--main-color);
	padding: 10px 40px;
	border-radius: 5px;
	transition: all 0.3s ease;
	position: relative;
	z-index: 1000;
}

/* فونت Vazirmatn برای دکمه‌ها در حالت RTL */
[dir="rtl"] .grax_tm_contact .grax_tm_button button {
	font-family: 'Vazirmatn', sans-serif !important;
}
.grax_tm_contact .grax_tm_button button:hover {
	background-color: transparent !important;
	color: var(--main-color);
}

/*---------------------------------------------------*/
/*	10) GRAX COPYRIGHT
/*---------------------------------------------------*/

.grax_tm_copyright {
	width: 100%;
	height: auto;
	clear: both;
	float: center;
	background-color: transparent;
	padding: 0;
	position: relative;
}
.copyright_inner {
	position: relative;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: flex-end;
	background-color: transparent;
	height: auto;
}
.my_wave {
	position: absolute;
	bottom: 0;
	left: 0.1px;
	width: 100%;
}
.my_wave svg {
	overflow: hidden;
	vertical-align: middle;
	height: 200px;
	width: 100%;
	fill: #000;
}

.wave-logo {
	position: absolute;
	left: 50px;
	bottom: 20px;
	z-index: 10;
}

.wave-logo img {
	height: 160px;
	width: auto;
	max-width: 240px;
	object-fit: contain;
}

/* Responsive design for wave logo */
@media (max-width: 768px) {
	.wave-logo {
		left: 30px;
		bottom: 15px;
	}
	
	.wave-logo img {
		height: 120px;
		max-width: 180px;
	}
}

@media (max-width: 480px) {
	.wave-logo {
		left: 20px;
		bottom: 10px;
	}
	
	.wave-logo img {
		height: 100px;
		max-width: 140px;
	}
	
	.dock-outer {
		bottom: 5px !important;
	}
	
	.copyright-text {
		bottom: 10px !important;
		right: 20px !important;
		font-size: 0.7rem !important;
		display: flex !important;
		align-items: center !important;
		transform: translateY(-30px) !important;
	}
}

/*---------------------------------------------------*/
/*	11) GRAX CURSOR
/*---------------------------------------------------*/

.mouse-cursor {
	position: fixed;
	left: 0;
	top: 0;
	pointer-events: none;
	border-radius: 50%;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	visibility: hidden;
}
.cursor-inner {
	margin-left: -3px;
	margin-top: -3px;
	width: 0px;
	height: 6px;
	z-index: 50;
	background-color: #000;
	-webkit-transition:
		width 0.3s ease-in-out,
		height 0.3s ease-in-out,
		margin 0.3s ease-in-out,
		opacity 0.3s ease-in-out;
	transition:
		width 0.3s ease-in-out,
		height 0.3s ease-in-out,
		margin 0.3s ease-in-out,
		opacity 0.3s ease-in-out;
}
.cursor-inner.cursor-hover {
	margin-left: -40px;
	margin-top: -40px;
	width: 80px;
	height: 80px;
	background-color: #000;
	opacity: 0.3;
}
.cursor-outer {
	margin-left: -15px;
	margin-top: -15px;
	width: 30px;
	height: 30px;
	border: 2px solid #000;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	z-index: 50;
	opacity: 0.5;
	-webkit-transition: all 0.08s ease-out;
	transition: all 0.08s ease-out;
}
.cursor-outer.cursor-hover {
	opacity: 0;
}
.grax_tm_all_wrap[data-magic-cursor="hide"] .mouse-cursor {
	display: none;
	opacity: 0;
	visibility: hidden;
	position: absolute;
	z-index: -1111;
}

/*---------------------------------------------------*/
/*	12) GRAX PARTICLE EFFECT
/*---------------------------------------------------*/

.grax_tm_hero .particle_wrapper {
	position: relative;
	float: left;
	width: 100%;
	height: 100%;
}
#particles-js {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 2;
}

/*---------------------------------------------------*/
/*	13) GRAX GLITCH EFFECT
/*---------------------------------------------------*/

.grax_tm_hero .glitch_wrap {
	position: relative;
	width: 100%;
	height: 100%;
	float: left;
	overflow: hidden;
}
.glitch {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: url("..//img/slider/2.jpg");
	background-size: cover;
	-webkit-background-size: cover;
	background-position: center;
	z-index: -1 !important;
	opacity: 1;
	transform: scale(1);
}
.glitch:before {
	content: "";
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
}

.grax_tm_hero .ripple {
	width: 100%;
	height: 100%;
	position: absolute;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-image: url(..//img/slider/2.jpg);
}
.grax_tm_hero .ripple:before {
	position: absolute;
	content: "";
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-color: rgba(0, 0, 0, 0.3);
	z-index: 1;
}
.container.water {
	visibility: hidden;
}

.my_shape {
	position: absolute;
	width: 100%;
	left: 0px;
	bottom: -11px;
	z-index: 5;
}
.my_shape .svg {
	width: 100%;
	height: 100%;
}
.grax_tm_down.shape {
	bottom: 20%;
}
.my_shape svg {
	width: 100%;
	height: 100%;
	color: #fff;
}

.progressbar {
	position: fixed;
	height: 100px;
	width: 1px;
	bottom: 25px;
	right: -25px;
	background-color: rgba(0, 0, 0, 0.08);
	z-index: 10;
	transition: all 0.3s ease;
}
.progressbar.animate {
	right: 25px;
}

.progressbar .line {
	position: absolute;
	width: 1px;
	height: auto;
	background-color: rgba(0, 0, 0, 0.4);
}

.progressbar .text {
	position: absolute;
	top: -77%;
	left: 0px;
	font-family: "Poppins";
	font-size: 13px;
	transform: rotateZ(90deg);
	text-transform: uppercase;
	transform-origin: left;
	white-space: nowrap;
}
.progressbar a {
	text-decoration: none;
	color: #000;
}

/*---------------------------------------------------*/
/*  WAXON SETTINGS
/*---------------------------------------------------*/

.grax_tm_settings {
	position: fixed;
	z-index: 9999;
	top: 20%;
	right: -55px;
	width: 12px;
	background-color: rgba(0, 0, 0, 0);
	padding: 40px 40px 5px 13px;

	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.grax_tm_settings.opened {
	right: 0.1px;
}
.grax_tm_settings .wrapper {
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	z-index: 10001;
}
.grax_tm_settings .icon {
	position: absolute;
	top: 0.1px;
	right: 100%;
	background-color: rgba(0, 0, 0, 0);
	padding: 10px 12px 4px 12px;
	z-index: 10002;
}
.grax_tm_settings .icon .svg {
	color: #000;
	width: 25px;
	height: 25px;
	animation: fa-spin 2s infinite linear;
}
.grax_tm_settings .link {
	position: absolute;
	top: 0.1px;
	bottom: 0.1px;
	left: 0.1px;
	right: 0.1px;
	z-index: 10000;
}

@-webkit-keyframes fa-spin {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(359deg);
		transform: rotate(359deg);
	}
}
@keyframes fa-spin {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(359deg);
		transform: rotate(359deg);
	}
}
.grax_tm_settings .title {
	color: #fff;
	font-family: "Montserrat";
	font-weight: 600;
	position: relative;
	display: inline-block;
}
.grax_tm_settings .title:before {
	position: absolute;
	content: "";
	width: 100%;
	height: 1px;
	background-color: rgba(255, 255, 255, 0.2);
	left: 0.1px;
	bottom: 0.1px;
}
.grax_tm_settings .colors {
	margin: 0.1px 0.1px 0.1px 0.1px;
	list-style-type: none;
	padding-top: 0.1px;
}
.grax_tm_settings .colors li {
	margin: 0.1px;
	display: inline-block;
}
.grax_tm_settings .colors li a {
	text-decoration: none;
	display: inline-block;
	width: 15px;
	height: 15px;
	border-radius: 100%;
}
.grax_tm_settings .direction {
	list-style-type: none;
	margin: 0.1px 0.1px 0.1px 0.1px;
}
.grax_tm_settings .direction li {
	margin: 0.1px 0.1px 0.1px 0.1px;
	display: inline-block;
}
.grax_tm_settings .direction li a {
	opacity: 0.4;
	text-decoration: none;
	color: #000;
}
.grax_tm_settings .direction li a.active {
	opacity: 1;
}
.grax_tm_settings .direction li .svg {
	width: 15;
	height: 15px;
}
.grax_tm_settings .colors li.bl {
	display: inline-block;
}
.grax_tm_settings .colors li.wh {
	display: none;
}
body.dark .grax_tm_settings .colors li.bl,
.grax_tm_settings.changed .colors li.bl {
	display: none;
}
body.dark .grax_tm_settings .colors li.wh,
.grax_tm_settings.changed .colors li.wh {
	display: inline-block;
}
body.dark .grax_tm_settings,
.grax_tm_settings.changed {
	background-color: rgba(0, 0, 0, 0);
}
body.dark .grax_tm_settings .icon,
.grax_tm_settings.changed .icon {
	background-color: rgba(0, 0, 0, 0);
}
body.dark .grax_tm_settings .icon .svg,
.grax_tm_settings.changed .icon .svg {
	color: #fff;
}
body.dark .grax_tm_settings .title,
.grax_tm_settings.changed .title {
	color: rgba(0, 0, 0, 0.2);
}
body.dark .grax_tm_settings .title:before,
.grax_tm_settings.changed .title:before {
	background-color: rgba(0, 0, 0, 0.2);
}
body.dark .grax_tm_settings .direction li a,
.grax_tm_settings.changed .direction li a {
	color: #fff;
}
body.dark .grax_tm_settings .cursor li:nth-child(1) a,
.grax_tm_settings.changed .cursor li:nth-child(1) a {
	border-color: #fff;
}
body.dark .grax_tm_settings .cursor li:nth-child(1) a:before,
.grax_tm_settings.changed .cursor li:nth-child(1) a:before {
	background-color: #fff;
}
body.dark .grax_tm_settings .cursor li .svg,
.grax_tm_settings.changed .cursor li .svg {
	color: #fff;
}
.grax_tm_settings .cursor {
	margin: 0.1px;
	list-style-type: none;
	padding-top: 15px;
}
.grax_tm_settings .cursor li {
	margin: 0.1px 20px 0.1px 0.1px;
	display: inline-block;
}
.grax_tm_settings .cursor li a {
	text-decoration: none;
	color: rgba(0, 0, 0, 0.2);
	opacity: 0.4;
	font-weight: 600;
}
.grax_tm_settings .cursor li a.showme {
	opacity: 1;
}
.grax_tm_settings .cursor li:nth-child(1) a {
	width: 15px;
	height: 15px;
	border-radius: 100%;
	border: 2px solid #000;
	position: relative;
	display: inline-block;
}
.grax_tm_settings .cursor li:nth-child(1) a:before {
	position: absolute;
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 100%;
	background-color: #000;
	transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
}
.grax_tm_settings .cursor li .svg {
	width: 15px;
	height: 15px;
	color: #000;
}
.grax_tm_settings .cursor li:nth-child(2) {
	position: relative;
	top: -2px;
}
.grax_tm_settings .effect {
	margin: 0.1px;
	list-style-type: none;
	padding-top: 15px;
	padding-bottom: 15px;
}
.grax_tm_settings .effect li {
	margin: 0px 0px 5px 0px;
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	border-radius: 100%;
	background-color: #fff;
	opacity: 0.4;
}
.grax_tm_settings .effect li a {
	text-decoration: none;
	color: #000;
	font-size: 13px;
	font-weight: 600;
	font-family: "Montserrat";
	display: block;
	position: relative;
	top: 2px;
}
.grax_tm_settings .effect li.selected {
	background-color: #fff;
	opacity: 1;
}

/*---------------------------------------------------*/
/*	GRAX INTRO
/*---------------------------------------------------*/

.grax_tm_intro_hero {
	width: 100%;
	height: 100vh;
	float: left;
	clear: both;
	position: relative;
	margin-bottom: 150px;
}
.grax_tm_intro_hero:before {
	position: absolute;
	content: "";
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-image: url(..//img/patterns/light-honeycomb.png);
	background-repeat: repeat;
	opacity: 0.4;
	z-index: 2;
}
.grax_tm_intro_hero:after {
	position: absolute;
	content: "";
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-color: #000;
	z-index: 1;
}
.grax_tm_intro_hero .content {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 100%;
	padding: 0px 20px;
	text-align: center;
}
.grax_tm_intro_hero .content .name {
	font-size: 50px;
	font-weight: 800;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0px;
	margin-bottom: 20px;
}
.grax_tm_intro_hero .content p {
	color: #fff;
	font-size: 20px;
	letter-spacing: 0px;
	font-family: "Poppins";
	font-weight: 500;
}
.grax_tm_intro_hero .grax_tm_down {
	left: 50%;
	transform: translateX(-50%);
	bottom: 5.5%;
}
.grax_tm_intro_hero .fn_animation .character {
	top: 15px;
}
.grax_tm_intro_hero .fn_animation .character.opened {
	top: 0px;
}
.grax_tm_intro_content {
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}
.grax_tm_intro_content .title_holder {
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	text-align: center;
}
.grax_tm_intro_content .title_holder h3 {
	font-size: 30px;
	font-weight: 800;
	color: #000;
	text-transform: uppercase;
	letter-spacing: 0px;
}
.grax_tm_intro_content .demo_list {
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding-top: 100px;
	margin-bottom: 70px;
}
.grax_tm_intro_content .demo_list ul {
	margin: 0px 0px 0px -50px;
	list-style-type: none;
}
.grax_tm_intro_content .demo_list ul li {
	margin: 0px 0px 50px 0px;
	float: left;
	width: 50%;
	padding-left: 50px;
	position: relative;
}
.grax_tm_intro_content .demo_list ul li .list_inner {
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
	text-align: center;
	transition: all 0.3s ease;
	top: 0px;
	transform: translateZ(0);
}
.grax_tm_intro_content .demo_list ul li .list_inner:hover {
	top: -10px;
}
.grax_tm_intro_content .demo_list ul li .list_inner h3 {
	font-size: 20px;
	font-weight: 600;
	padding-top: 20px;
}
.grax_tm_intro_content .demo_list ul li:last-child img {
	filter: blur(5px);
}
.grax_tm_intro_fixed_price .pricing-info,
.grax_tm_intro_fixed_price .anim {
	text-decoration: none;
	color: #fff;
	font-family: "Montserrat";
	background-color: #e54b4b;
	position: fixed;
	font-size: 22px;
	text-align: center;
	z-index: 5;
	border-radius: 100%;
	height: 70px;
	width: 70px;
	line-height: 70px;
	display: inline-block;
	bottom: 80px;
	right: 50px;

	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}

@-webkit-keyframes myAnimPrice {
	0% {
		-webkit-transform: scale(0.1);
		transform: scale(0.1);
		opacity: 0;
	}
	50% {
		opacity: 0.3;
	}
	100% {
		-webkit-transform: scale(2);
		transform: scale(2);
		opacity: 0;
	}
}

@keyframes myAnimPrice {
	0% {
		-webkit-transform: scale(0.1);
		transform: scale(0.1);
		opacity: 0;
	}
	50% {
		opacity: 0.3;
	}
	100% {
		-webkit-transform: scale(2);
		transform: scale(2);
		opacity: 0;
	}
}

.grax_tm_intro_fixed_price .anim:nth-child(1) {
	-webkit-animation: myAnimPrice 2s infinite;
	animation: myAnimPrice 2s infinite;
}

.grax_tm_intro_fixed_price .anim:nth-child(2) {
	-webkit-animation: myAnimPrice 2s infinite 0.3s;
	animation: myAnimPrice 2s infinite 0.3s;
}

.grax_tm_intro_fixed_price .anim:nth-child(3) {
	-webkit-animation: myAnimPrice 2s infinite 0.6s;
	animation: myAnimPrice 2s infinite 0.6s;
}

/*---------------------------------------------------*/
/*	14) GRAX MEDIA QUERIES (FOR SMALL DEVIVES)
/*---------------------------------------------------*/

@media (max-width: 1400px) {
	.grax_tm_modalbox_news .box_inner {
		width: 900px;
	}
}
@media (max-width: 1200px) {
	.grax_tm_modalbox_news .box_inner {
		width: 100%;
		top: 0px;
		bottom: 0px;
	}
	.grax_tm_modalbox_news .close {
		position: absolute;
		top: 20px;
		left: auto;
		right: 20px;
		margin-left: 0px;
	}
	.grax_tm_modalbox_news .close .svg {
		color: #777;
		width: 25px;
		height: 25px;
	}
}
@media (max-width: 1040px) {
	.mouse-cursor {
		display: none;
	}
	.cursor-inner {
		display: none;
	}
	.cursor-inner.cursor-hover {
		display: none;
	}
	.cursor-outer {
		display: none;
	}
	.container {
		padding: 0px 20px;
	}
	.grax_tm_topbar {
		display: none;
	}
	.grax_tm_mobile_menu {
		display: block;
	}
	.grax_tm_hero .name {
		font-size: 55px;
	}
	.grax_tm_about .about_inner {
		display: block;
	}
	.grax_tm_about .left {
		padding-right: 0px;
		width: 100%;
		margin-bottom: 40px;
	}
	.grax_tm_about .right {
		padding-left: 0px;
		width: 100%;
	}
	.grax_tm_portfolio ul {
		margin-left: -20px;
	}
	.grax_tm_portfolio ul li {
		padding-left: 20px;
		margin-bottom: 20px;
	}

}
@media (max-width: 768px) {
	.grax_tm_title_holder h3 {
		letter-spacing: 0px;
	}
	.grax_tm_hero .name {
		font-size: 45px;
		margin-bottom: 5px;
	}
	.grax_tm_hero .job {
		font-size: 17px;
	}
	.grax_tm_about .right .list ul {
		margin: 0px;
	}
	.grax_tm_about .right .list ul li {
		width: 100%;
		padding-left: 0px;
	}
	.grax_tm_portfolio ul li {
		width: 50%;
	}
	.grax_tm_progress_part .part_inner {
		display: block;
	}
	.grax_tm_progress_part .left {
		width: 100%;
		padding-right: 0px;
		float: left;
		margin-bottom: 20px;
	}
	.grax_tm_progress_part .right {
		width: 100%;
		padding-left: 0px;
	}
	.grax_tm_talk .talk_inner {
		display: block;
	}
	.grax_tm_talk .text {
		padding-right: 0px;
		margin-bottom: 30px;
	}

	.grax_tm_contact {
		margin-bottom: 300px;
	}
	.grax_tm_contact .contact_inner {
		display: block;
	}
	.grax_tm_contact .left {
		width: 100%;
		margin-bottom: 20px;
		float: left;
	}
	.grax_tm_contact .right {
		width: 100%;
		padding-left: 0px;
	}
	.grax_tm_copyright .copyright_inner {
		display: block;
	}
	.grax_tm_copyright .logo {
		margin-bottom: 17px;
	}
	.grax_tm_copyright .social {
		margin-bottom: 10px;
	}
	.grax_tm_modalbox_news .details .title {
		font-size: 25px;
	}
	.grax_tm_modalbox_news .description_wrap {
		padding: 20px;
	}

	.grax_tm_intro_fixed_price {
		display: none;
	}
	.grax_tm_intro_content .title_holder h3 {
		letter-spacing: 0px;
	}
	.grax_tm_intro_content .demo_list ul {
		margin: 0px;
	}
	.grax_tm_intro_content .demo_list ul li {
		width: 100%;
		padding-left: 0px;
	}
}
@media (max-width: 480px) {
	.grax_tm_hero .name {
		font-size: 30px;
	}
	.grax_tm_hero .job {
		font-size: 15px;
	}
	.grax_tm_portfolio ul {
		margin: 0px;
	}
	.grax_tm_portfolio ul li {
		width: 100%;
		padding-left: 0px;
	}

	.grax_tm_contact {
		margin-bottom: 240px;
	}
}

/* استایل‌های accordion منتقل شده از HTML */
.accordion-item {
	margin-bottom: 0px;
}
.accordion-title {
	cursor: pointer;
	padding: 0px;
	color: #1e90ff;
	margin: 0;
	font-family: 'Vazirmatn', sans-serif;
	font-weight: normal;
	transition: background-color 0.3s ease, color 0.3s ease;
	display: inline-block;
	text-decoration: none;
}
.accordion-title:hover,
.accordion-title.active {
	background-color: #f8f8f8;
	color: #1e90ff;
}
.button-title {
	background-color: var(--main-color);
	color: #ffffff;
	padding: 15px;
	border-radius: 10px;
}
.button-title:hover,
.button-title:active {
	background-color: #ffffff;
	color: #1e90ff;
	border: 2px solid #1e90ff;
}
.accordion-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.7s ease-out;
	padding: 0 15px;
	font-family: 'Vazirmatn', sans-serif;
	font-weight: normal;
	color: #666666;
	text-align: justify;
}
.accordion-content.active {
	max-height: 200px;
	padding: 15px;
}
.accordion-content p {
	margin: 0;
	font-family: 'Vazirmatn', sans-serif;
	font-weight: normal;
	color: #666666;
	text-align: justify;
}
.plain-title {
	color: #1e90ff;
	font-family: 'Vazirmatn', sans-serif;
	font-weight: normal;
	margin: 0 0 10px 0;
}
.plain-content {
	font-family: 'Vazirmatn', sans-serif;
	font-weight: normal;
	color: #666666;
	margin: 0 0 20px 0;
	text-align: justify;
}
.about_subtitle {
	color: #1e90ff;
	font-family: 'Vazirmatn', sans-serif;
	font-weight: normal;
}

/* حذف @-webkit-keyframes تکراری و نگه داشتن فقط نسخه استاندارد */
@keyframes scroll-down {
	0% {
		height: 0;
	}
	50% {
		height: 100%;
	}
	70% {
		height: 100%;
		transform: scaleY(0.5);
		transform-origin: bottom;
	}
	100% {
		height: 100%;
		transform: scaleY(0);
		transform-origin: bottom;
	}
}

/* نمایش dock و copyright در پایین صفحه روی موج با اطمینان از نمایش صحیح */
.footer-dock-copyright {
	position: fixed;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	z-index: 2000;
	width: 100vw;
	max-width: 100vw;
	background: transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	transition: opacity 0.5s;
	pointer-events: none;
}
.footer-dock-copyright .container {
	pointer-events: auto;
}
.footer-dock-copyright.hidden {
	opacity: 0;
	visibility: hidden;
}
.footer-dock-copyright:not(.hidden) {
	opacity: 1;
	visibility: visible;
}

/* نمایش dock و copyright در همه دستگاه‌ها */
.dock-outer {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: absolute !important;
	bottom: 10px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	z-index: 2000 !important;
}

.grax_tm_copyright .copy {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.copyright-text {
	position: absolute !important;
	bottom: 20px !important;
	right: 50px !important;
	z-index: 2000 !important;
	text-align: right !important;
	color: #999 !important;
	font-size: 0.9rem !important;
	display: flex !important;
	align-items: center !important;
	transform: translateY(-50px) !important;
}

@media (max-width: 768px) {
	.footer-dock-copyright {
		width: 100vw;
		left: 0;
		transform: none;
	}
	
	.dock-outer {
		bottom: 8px !important;
	}
	
	.copyright-text {
		bottom: 15px !important;
		right: 30px !important;
		font-size: 0.8rem !important;
		display: flex !important;
		align-items: center !important;
		transform: translateY(-40px) !important;
	}
	
	.wave-logo {
		left: 30px;
		bottom: 15px;
	}
}

/* استایل دکمه‌های Latest Publications مشابه Download CV */
.news_button {
    display: inline-block;
    background-color: var(--main-color) !important;
    color: #ffffff;
    padding: 10px 24px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 400;
    font-size: 0.9rem;
    font-family: inherit;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    box-shadow: 0 5px 4px rgba(0,0,0,0.05);
    margin: 10px 5px;
}

.news_button:hover {
    background-color: #ffffff;
    color: #ffffff;
    border-color: var(--main-color);
    transform: translateY(-2px);
}

.news_button:focus {
    outline: 2px dashed var(--main-color);
    outline-offset: 2px;
}

/* استایل دکمه‌های مختلف */
.news_button.download {
    background-color: var(--main-color) !important;
}

.news_button.download:hover {
    background-color: #ffffff;
    color: #ffffff;
    border-color: var(--main-color) !important;
}

.news_button.view {
    background-color: var(--main-color) !important;
}

.news_button.view:hover {
    background-color: #ffffff;
    color: #ffffff;
    border-color: var(--main-color) !important;
}

.news_button.read {
    background-color: var(--main-color) !important;
}

.news_button.read:hover {
    background-color: #ffffff;
    color: #ffffff;
    border-color: var(--main-color) !important;
}

.news_button.sort {
    background-color: var(--main-color) !important;
}

.news_button.sort:hover {
    background-color: #ffffff;
    color: #ffffff;
    border-color: var(--main-color) !important;
}

/* استایل active برای دکمه‌ها */
.news_button.active {
    background-color: #ffffff !important;
    color: var(--main-color) !important;
    border-color: var(--main-color) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

.news_button.download.active {
    color: var(--main-color) !important;
    border-color: var(--main-color) !important;
}

.news_button.view.active {
    color: var(--main-color) !important;
    border-color: var(--main-color) !important;
}

.news_button.read.active {
    color: var(--main-color) !important;
    border-color: var(--main-color) !important;
}

.news_button.sort.active {
    color: var(--main-color) !important;
    border-color: var(--main-color) !important;
}

/* Timeline styles - New Animated Version */
.timeline_container_full_width {
    background: #fff;
    overflow: hidden;
    color: var(--main-color) !important;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

.chat-row {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    padding: 5px 0;
    overflow: hidden; 
    width: 100%;
    /* Ensure smooth infinite scrolling */
    position: relative;
}

.chat-row-inner {
    display: flex;
    flex-shrink: 0;
    gap: 30px;
    /* Ensure smooth infinite loop */
    will-change: transform;
}

.chat-container {
    display: flex;
    align-items: center;
    padding: 10px;
    position: relative;
    flex-shrink: 0;
}

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 10px;
    border: 3px solid var(--main-color) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    flex-shrink: 0;
    /* Ensure proper image display */
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.avatar img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    /* Ensure images load properly */
    background-color: #f0f0f0;
    border: 1px solid #ddd;
}

.bubble {
    background-color: #fff !important;
    border: 2px solid var(--main-color) !important;
    border-radius: 20px;
    color: var(--main-color) !important;
    font-family: Arial, sans-serif;
    font-size: 0.9em;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

/* RTL Font for Timeline Bubbles */
[dir="rtl"] .bubble {
    font-family: 'Vazirmatn', sans-serif !important;
}

[dir="rtl"] .contenteditable {
    font-family: 'Vazirmatn', sans-serif !important;
}

/* RTL Font for Hero Section */
[dir="rtl"] .grax_tm_hero .name,
[dir="rtl"] .grax_tm_hero .job,
[dir="rtl"] .grax_tm_hero .details {
    font-family: 'Vazirmatn', sans-serif !important;
}

/* RTL Font for Animated Text Container */
[dir="rtl"] .animated-text-container {
    font-family: 'Vazirmatn', sans-serif !important;
}

/* RTL Font for Navigation/Topbar */
[dir="rtl"] .grax_tm_topbar .menu ul li a,
[dir="rtl"] .grax_tm_mobile_menu .dropdown .dropdown_inner ul li a {
    font-family: 'Vazirmatn', sans-serif !important;
}

/* RTL Font for Titles */
[dir="rtl"] .grax_tm_title_holder h3 {
    font-family: 'Vazirmatn', sans-serif !important;
}

.bubble:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}

.contenteditable {
    border: none;
    outline: none;
    background: transparent;
    display: inline;
    line-height: 1;
    color: var(--main-color) !important;
}

.connection-line {
    position: absolute;
    height: 2px;
    background: var(--main-color) !important;
    width: 15px;
    left: 50px;
    top: 31px;
    transform: translateY(-50%);
    z-index: 0;
}

/* BIM Gallery Styles - Updated for 4 boxes per row */
[dir="ltr"] .gallery-container {
    direction: ltr;
}
.gallery-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 20px 0;
    max-width: 1200px;
    margin: 0 auto;
}

.image-box {
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.image-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.image-box img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.image-box:hover img {
    transform: scale(1.05);
}

.image-title {
    padding: 15px;
    font-size: 0.9rem;
    color: var(--main-color) !important;
    font-weight: 500;
    text-align: center;
    background: white;
    transition: transform 0.3s ease;
}

.image-box:hover .image-title {
    transform: translateY(-2px);
}

/* Modal Styles - Previous size with larger image space */
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
}

.modal-content {
    background-color: white;
    margin: 3% auto;
    padding: 0;
    border-radius: 15px;
    width: 85%;
    max-width: 1000px;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    display: flex;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    z-index: 10001;
}

.modal-image {
    width: 45%;
    max-width: 450px;
    height: 100%;
    object-fit: cover;
    border-radius: 15px 0 0 15px;
}

.modal-text {
    width: 55%;
    padding: 30px;
    overflow-y: auto;
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    color: #666;
    cursor: pointer;
    z-index: 10002;
    background: white;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.close-btn:hover {
    color: #000;
    transform: scale(1.1);
}

.modal-title {
    color: var(--main-color) !important;
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 18px;
    line-height: 1.2;
}

.modal-text p {
    margin-bottom: 12px;
    line-height: 1.6;
    color: #333;
}

.modal-text ul {
    margin-bottom: 12px;
    padding-left: 18px;
}

.modal-text ul li {
    margin-bottom: 6px;
    line-height: 1.6;
    color: #333;
}

.modal-text ul li strong {
    color: var(--main-color) !important;
    font-weight: 400 !important;
}

.hashtag-container {
    margin-top: 25px;
    padding: 18px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid var(--main-color);
}

.hashtag-label {
    color: #666;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    font-size: 0.85rem;
}

.hashtag-input {
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.8rem;
    background-color: white;
    color: #666;
    line-height: 1.4;
    word-wrap: break-word;
    white-space: normal;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    padding: 8px;
    width: 100%;
    min-height: 50px;
    resize: none;
}

.hashtag-input:hover {
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1), 0 0 0 3px rgba(0,123,255,0.1);
    border-color: var(--main-color);
}

/* Image titles matching Selected Works style */
.image-title {
    padding: 15px;
    font-size: 0.9rem;
    color: var(--main-color) !important;
    font-weight: 400;
    text-align: center;
    background: white;
    transition: transform 0.3s ease;
    font-family: "Poppins", sans-serif;
    letter-spacing: 0.5px;
    text-transform: none;
}

.image-box:hover .image-title {
    transform: translateY(-2px);
}



/* Responsive Design for Gallery */
@media (max-width: 1200px) {
    .gallery-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }
}

@media (max-width: 768px) {
    .gallery-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 15px 0;
    }
    
    .image-box img {
        height: 180px;
    }
    
    .image-title {
        padding: 12px;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .gallery-container {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 12px 0;
    }
    
    .image-box img {
        height: 200px;
    }
    
    .image-title {
        padding: 10px;
        font-size: 0.8rem;
    }
}

/* Responsive Design for Modal */
@media (max-width: 768px) {
    .modal-content {
        flex-direction: column;
        margin: 8% auto;
        width: 90%;
        max-height: 85vh;
        overflow-y: auto;
    }
    
    .modal-image {
        width: 100%;
        max-width: none;
        height: 200px;
        border-radius: 15px 15px 0 0;
        object-fit: cover;
        margin-bottom: 0;
    }
    
    .modal-text {
        width: 100%;
        padding: 25px 20px;
        margin-top: 0;
        background-color: #fff;
        border-radius: 0 0 15px 15px;
    }
    
    .modal-title {
        font-size: 1.4rem;
        margin-bottom: 15px;
    }
    
    .modal-text p {
        margin-bottom: 15px;
        line-height: 1.6;
    }
    
    .modal-text ul {
        margin-bottom: 15px;
    }
    
    .modal-text ul li {
        margin-bottom: 8px;
        line-height: 1.5;
    }
    
    .close-btn {
        top: 8px;
        right: 12px;
        width: 32px;
        height: 32px;
        font-size: 22px;
    }
    
    .hashtag-container {
        margin-top: 20px;
        padding: 15px;
        background-color: #f8f9fa;
        border-radius: 8px;
    }
}

@media (max-width: 480px) {
    .modal-content {
        margin: 5% auto;
        width: 95%;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .modal-image {
        height: 180px;
    }
    
    .modal-text {
        padding: 20px 15px;
    }
    
    .modal-title {
        font-size: 1.2rem;
        margin-bottom: 12px;
    }
    
    .modal-text p {
        margin-bottom: 12px;
        line-height: 1.5;
    }
    
    .modal-text ul li {
        margin-bottom: 6px;
        line-height: 1.4;
    }
    
    .hashtag-container {
        padding: 12px;
        margin-top: 15px;
    }
}

/* Core Skills Section Improvements */
.grax_tm_progress_part {
    width: 100%;
    height: auto;
    clear: both;
    float: left;
    padding: 135px 0px 140px 0px;
    background-color: white;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    border-radius: 15px;
    margin: 20px 0;
}

.grax_tm_progress_part .part_inner {
    width: 100%;
    height: auto;
    clear: both;
    display: flex;
    padding: 0 50px;
}

.grax_tm_progress_part .left {
    width: 50%;
    padding-right: 50px;
}

.grax_tm_progress_part .left h3 {
    font-weight: 500;
    margin-bottom: 40px;
    margin-top: 20px;
    color: var(--main-color) !important;
    margin-bottom: 80px;
}

.grax_tm_progress_part .right {
    width: 50%;
    padding-left: 50px;
}

.kioto_progress {
    width: 100%;
    height: auto;
    clear: both;
    float: left;
    padding: 0 30px;
}

.progress_inner {
    width: 100%;
    margin-bottom: 27px;
}

.progress_inner:last-child {
    margin-bottom: 0px;
}

.progress_inner > span {
    margin: 16px 0px 7px 0px;
    width: 100%;
    display: block;
    text-align: left;
    font-family: "Poppins";
    font-weight: 400;
    color: #000;
}

.progress_inner span.number {
    float: right;
}

.progress_inner .background {
    background: rgba(0,0,0,.09);
    width: 100%;
    min-width: 100%;
    position: relative;
    height: 8px;
    border-radius: 5px;
}

.progress_inner .background .bar_in {
    height: 100%;
    background: #e54b4b;
    width: 0px;
    overflow: hidden;
    border-radius: 5px;
}

.progress_inner .background .bar {
    width: 0px;
    height: 100%;
}

.progress_inner .background .bar.open {
    -webkit-animation: wow 2s cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -moz-animation: wow 2s cubic-bezier(0.165, 0.840, 0.440, 1.000);
    animation: wow 2s cubic-bezier(0.165, 0.840, 0.440, 1.000);
    width: 100%;
}

@-webkit-keyframes wow {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

@-moz-keyframes wow {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

@keyframes wow {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

/* Responsive Design for Progress Section */
@media (max-width: 768px) {
    .grax_tm_progress_part .part_inner {
        flex-direction: column;
        padding: 0 20px;
    }
    
    .grax_tm_progress_part .left {
        width: 100%;
        padding-right: 0;
        margin-bottom: 30px;
    }
    
    .grax_tm_progress_part .right {
        width: 100%;
        padding-left: 0;
    }
    
    .grax_tm_progress_part {
        padding: 80px 0px 80px 0px;
        margin: 10px 0;
    }
    
    .kioto_progress {
        padding: 0 15px;
    }
}

@media (max-width: 480px) {
    .grax_tm_progress_part .left h3 {
        font-size: 1.5rem;
    }
    
    .progress_inner > span {
        font-size: 14px;
    }
    
    .grax_tm_progress_part {
        padding: 60px 0px 60px 0px;
    }
    
    .kioto_progress {
        padding: 0 10px;
    }
}
/* Responsive Design for Modal */

/* Core Skills Section Styles */
.core-skills-section {
    margin-bottom: 30px;
}

.core-skills-title {
    color: var(--main-color) !important;
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 20px;
    line-height: 1.2;
    font-family: 'Vazirmatn', sans-serif !important;
}

.core-skills-description {
    color: #333;
    line-height: 1.6;
    margin-bottom: 0;
    font-family: 'Vazirmatn', sans-serif !important;
}

/* Responsive Design for Core Skills */
@media (max-width: 768px) {
    .core-skills-title {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }
    
    .core-skills-description {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .core-skills-title {
        font-size: 1.3rem;
        margin-bottom: 12px;
    }
    
    .core-skills-description {
        font-size: 0.9rem;
    }
}

/* BIM Timeline Video Section */
.bim-timeline-section {
    width: 100%;
    height: auto;
    clear: both;
    padding: 40px 0px;
    margin: 30px 0px;
    text-align: center;
}

.timeline-video-container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.bim-timeline-video {
    width: 100%;
    max-width: 900px;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    background-color: #000;
    display: block;
    margin: 0 auto;
    object-fit: cover;
    pointer-events: none;
}

/* Responsive Design for BIM Timeline Video */
@media (max-width: 768px) {
    .bim-timeline-section {
        padding: 30px 0px;
        margin: 20px 0px;
    }
    
    .bim-timeline-video {
        max-width: 95%;
    }
}

@media (max-width: 480px) {
    .bim-timeline-section {
        padding: 20px 0px;
        margin: 15px 0px;
    }
    
    .bim-timeline-video {
        max-width: 98%;
        border-radius: 10px;
    }
}

/* Responsive Design for Settings */
@media (max-width: 768px) {
    .grax_tm_settings {
        z-index: 9999;
        top: 15%;
        right: -50px;
    }
}

@media (max-width: 480px) {
    .grax_tm_settings {
        z-index: 9999;
        top: 10%;
        right: -45px;
    }
}

/* Custom Video Player Styles */
.custom-video-section {
    width: 100%;
    margin: 60px 0;
    text-align: center;
}

.video-container {
    max-width: 800px;
    margin: 0 auto;
    background: #000;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    position: relative;
}

.custom-video-player {
    width: 100%;
    height: auto;
    display: block;
    background: #000;
}

.video-controls {
    background: rgba(0, 0, 0, 0.9);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.control-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.control-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.control-btn {
    background: var(--main-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 12px;
}

.control-btn:hover {
    background: white;
    color: var(--main-color);
    transform: scale(1.1);
}

.control-btn:active {
    transform: scale(0.95);
}

.progress-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}

.progress-fill {
    height: 100%;
    background: var(--main-color);
    border-radius: 3px;
    width: 0%;
    transition: width 0.1s ease;
}

.time-display {
    display: flex;
    align-items: center;
    color: white;
    font-size: 12px;
    font-weight: 500;
    gap: 5px;
}

.video-controls {
    background: rgba(128, 128, 128, 0.8);
    backdrop-filter: blur(10px);
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all 0.3s ease;
    opacity: 1;
    transform: translateY(0);
}

.video-controls.hidden {
    opacity: 0;
    transform: translateY(100%);
}

.video-container {
    max-width: 800px;
    margin: 0 auto;
    background: #000;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    position: relative;
}

.video-container:hover .video-controls {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Design for Video Player */
@media (max-width: 768px) {
    .custom-video-section {
        margin: 40px 0;
    }
    
    .video-container {
        max-width: 95%;
    }
    
    .control-btn {
        width: 30px;
        height: 30px;
        font-size: 10px;
    }
    
    .control-buttons {
        gap: 10px;
    }
    
    .time-display {
        font-size: 10px;
    }
    
    .control-row {
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .custom-video-section {
        margin: 30px 0;
    }
    
    .video-container {
        max-width: 98%;
    }
    
    .control-btn {
        width: 25px;
        height: 25px;
        font-size: 8px;
    }
    
    .control-buttons {
        gap: 8px;
    }
    
    .video-controls {
        padding: 10px;
    }
    
    .time-display {
        font-size: 9px;
    }
    
    .control-row {
        gap: 8px;
    }
}

/* About Me Button Styles */
.grax_tm_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid;
    position: relative;
    overflow: hidden;
    background: transparent;
    text-decoration: none;
    text-align: center !important;
    min-width: 120px !important;
}

.grax_tm_button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    text-decoration: none;
}

.grax_tm_button span {
    position: relative;
    z-index: 2;
}

.grax_tm_button:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.grax_tm_button:hover:before {
    left: 100%;
}

/* Responsive Design for About Me Buttons */
@media (max-width: 768px) {
    .grax_tm_button {
        padding: 10px 20px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .grax_tm_button {
        padding: 8px 16px;
        font-size: 12px;
    }
}

/* Educational Background Border Lines */
.border-l-4 {
    border-left-width: 4px !important;
    border-left-style: solid !important;
}

.border-l-4[style*="border-left-color: var(--main-color)"] {
    border-left-color: var(--main-color) !important;
}

.border-l-4.border-gray-300 {
    border-left-color: #d1d5db !important;
}

/* Dark mode support for gray borders */
.dark .border-l-4.border-gray-300 {
    border-left-color: #6b7280 !important;
}

/* RTL Support for Educational Background Border Lines */
[dir="rtl"] .border-l-4 {
    border-left-width: 0 !important;
    border-right-width: 4px !important;
    border-right-style: solid !important;
    border-right-color: inherit !important;
}

[dir="rtl"] .border-l-4[style*="border-left-color: var(--main-color)"] {
    border-right-color: var(--main-color) !important;
}

[dir="rtl"] .border-l-4.border-gray-300 {
    border-right-color: #d1d5db !important;
}

[dir="rtl"] .dark .border-l-4.border-gray-300 {
    border-right-color: #6b7280 !important;
}

/* RTL Support for Educational Background padding */
[dir="rtl"] .border-l-4.pl-4 {
    padding-left: 0 !important;
    padding-right: 1rem !important;
}

/* Global Button Styles for All Website Buttons */
button, 
.btn, 
.button,
.grax_tm_button,
.news_button,
[type="submit"],
[type="button"] {
    background-color: var(--main-color) !important;
    color: white !important;
    border: 2px solid var(--main-color) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Hover Effects for All Buttons */
button:hover, 
.btn:hover, 
.button:hover,
.grax_tm_button:hover,
.news_button:hover,
[type="submit"]:hover,
[type="button"]:hover {
    background-color: white !important;
    color: var(--main-color) !important;
    border-color: var(--main-color) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
}

/* Focus Effects for Accessibility */
button:focus, 
.btn:focus, 
.button:focus,
.grax_tm_button:focus,
.news_button:focus,
[type="submit"]:focus,
[type="button"]:focus {
    outline: 2px dashed var(--main-color) !important;
    outline-offset: 2px !important;
}

/* Active State for Buttons */
button:active, 
.btn:active, 
.button:active,
.grax_tm_button:active,
.news_button:active,
[type="submit"]:active,
[type="button"]:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

/* Special handling for buttons that already have specific styles */
.grax_tm_button.about_button_rewritten a {
    background-color: var(--main-color) !important;
    color: white !important;
    border: 2px solid var(--main-color) !important;
    transition: all 0.3s ease !important;
}

.grax_tm_button.about_button_rewritten a:hover {
    background-color: white !important;
    color: var(--main-color) !important;
    border-color: var(--main-color) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
}

/* About Me Buttons - Contact Me and Download CV */
.grax_tm_button {
    background-color: var(--main-color) !important;
    color: white !important;
    border: 2px solid var(--main-color) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

/* RTL Support for About Me Buttons spacing */
[dir="rtl"] .flex.space-x-4 .grax_tm_button {
    margin-left: 0 !important;
    margin-right: 1rem !important;
}

[dir="rtl"] .flex.space-x-4 .grax_tm_button:last-child {
    margin-right: 0 !important;
}

/* Fix button spacing in RTL */
[dir="rtl"] .flex.space-x-4 {
    gap: 1rem !important;
}

.grax_tm_button:hover {
    background-color: white !important;
    color: var(--main-color) !important;
    border-color: var(--main-color) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
    text-decoration: none !important;
}

/* News buttons specific styling */
.news_button {
    background-color: var(--main-color) !important;
    color: white !important;
    border: 2px solid var(--main-color) !important;
}

.news_button:hover {
    background-color: white !important;
    color: var(--main-color) !important;
    border-color: var(--main-color) !important;
}

.news_button.active {
    background-color: white !important;
    color: var(--main-color) !important;
    border-color: var(--main-color) !important;
}

/* News button icons styling */
.news_button i {
    color: white !important;
    transition: all 0.3s ease !important;
    margin-right: 8px !important;
}

.news_button:hover i {
    color: var(--main-color) !important;
    margin-right: 8px !important;
}

.news_button.active i {
    color: var(--main-color) !important;
    margin-right: 8px !important;
}

/* RTL support for news button icons */
[dir="rtl"] .news_button i {
    margin-right: 0 !important;
    margin-left: 8px !important;
}

[dir="rtl"] .news_button:hover i {
    margin-right: 0 !important;
    margin-left: 8px !important;
}

[dir="rtl"] .news_button.active i {
    margin-right: 0 !important;
    margin-left: 8px !important;
}

/* Responsive Design for Buttons */
@media (max-width: 768px) {
    button, 
    .btn, 
    .button,
    .grax_tm_button,
    .news_button,
    [type="submit"],
    [type="button"] {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 480px) {
    button, 
    .btn, 
    .button,
    .grax_tm_button,
    .news_button,
    [type="submit"],
    [type="button"] {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
}

/* About Me Tag Items */
.tag-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.tag-item:hover {
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}

.tag-item i {
    font-size: 12px !important;
    transition: all 0.3s ease !important;
}

.tag-item span {
    transition: all 0.3s ease !important;
}

/* Responsive Design for Tag Items */
@media (max-width: 768px) {
    .tag-item {
        font-size: 13px !important;
        gap: 4px !important;
    }
    
    .tag-item i {
        font-size: 11px !important;
    }
}

@media (max-width: 480px) {
    .tag-item {
        font-size: 12px !important;
        gap: 3px !important;
    }
    
    .tag-item i {
        font-size: 10px !important;
	}
}

/* فونت Vazirmatn برای بخش About Me */
.grax_tm_about h1,
.grax_tm_about h2,
.grax_tm_about h3,
.grax_tm_about p,
.grax_tm_about .text-lg,
.grax_tm_about .text-base,
.grax_tm_about .text-sm,
.grax_tm_about .font-semibold,
.grax_tm_about .text-gray-600,
.grax_tm_about .text-gray-500,
.grax_tm_about .text-gray-300,
.grax_tm_about .text-gray-400,
.grax_tm_about .text-white,
.grax_tm_about .text-3xl,
.grax_tm_about .text-2xl,
.grax_tm_about .text-xl {
  font-family: 'Vazirmatn', sans-serif !important;
}

/* فونت Vazirmatn برای بخش BIM Concepts */
#bim-concepts h1,
#bim-concepts h2,
#bim-concepts h3,
#bim-concepts p,
#bim-concepts .text-lg,
#bim-concepts .text-base,
#bim-concepts .text-sm,
#bim-concepts .font-semibold,
#bim-concepts .text-gray-600,
#bim-concepts .text-gray-500,
#bim-concepts .text-gray-300,
#bim-concepts .text-gray-400,
#bim-concepts .text-white,
#bim-concepts .text-3xl,
#bim-concepts .text-2xl,
#bim-concepts .text-xl,
#bim-concepts .image-title,
#bim-concepts .modal-title,
#bim-concepts .modal-text,
#bim-concepts .modal-text p,
#bim-concepts .modal-text ul,
#bim-concepts .modal-text ul li {
  font-family: 'Vazirmatn', sans-serif !important;
}

/* فونت Vazirmatn برای عناصر عمومی در حالت RTL */
[dir="rtl"] .grax_tm_about h1,
[dir="rtl"] .grax_tm_about h2,
[dir="rtl"] .grax_tm_about h3,
[dir="rtl"] .grax_tm_about p,
[dir="rtl"] #bim-concepts h1,
[dir="rtl"] #bim-concepts h2,
[dir="rtl"] #bim-concepts h3,
[dir="rtl"] #bim-concepts p {
  font-family: 'Vazirmatn', sans-serif !important;
}

/* اطمینان از اعمال فونت Vazirmatn برای تمام عناصر در بخش About Me */
.grax_tm_about * {
  font-family: 'Vazirmatn', sans-serif !important;
}

/* اطمینان از اعمال فونت Vazirmatn برای تمام عناصر در بخش BIM Concepts */
#bim-concepts * {
  font-family: 'Vazirmatn', sans-serif !important;
}

/* رنگ کلمه "Concepts" در عنوان BIM Concepts - با اولویت بالا */
#bim-concepts .grax_tm_title_holder h3 {
  color: #000 !important; /* رنگ پیش‌فرض برای کلمه "BIM" */
}

#bim-concepts .grax_tm_title_holder h3 span {
  color: var(--main-color) !important; /* فقط کلمه "Concepts" حساس به تغییر رنگ */
}

/* رنگ کلی برای تمام عنوان‌های بخش‌ها - با اولویت بالا */
.grax_tm_title_holder h3 {
  color: #000 !important; /* رنگ پیش‌فرض برای کلمه اول */
}

.grax_tm_title_holder h3 span {
  color: var(--main-color) !important; /* فقط کلمه دوم حساس به تغییر رنگ */
}

/* تنظیمات RTL برای عنوان‌ها */
[dir="rtl"] .grax_tm_title_holder h3 {
  color: #000 !important; /* رنگ پیش‌فرض برای کلمه اول در حالت فارسی */
}

[dir="rtl"] .grax_tm_title_holder h3 span {
  color: var(--main-color) !important; /* فقط کلمه دوم حساس به تغییر رنگ در حالت فارسی */
}

/* تنظیمات RTL برای BIM Concepts - با اولویت بالا */
[dir="rtl"] #bim-concepts .grax_tm_title_holder h3 {
  color: #000 !important; /* رنگ پیش‌فرض برای کلمه "BIM" در حالت فارسی */
}

[dir="rtl"] #bim-concepts .grax_tm_title_holder h3 span {
  color: var(--main-color) !important; /* فقط کلمه "Concepts" حساس به تغییر رنگ در حالت فارسی */
}

/* استثنا برای آیکون‌ها و عناصر خاص */
.grax_tm_about i,
.grax_tm_about .fas,
.grax_tm_about .fab,
.grax_tm_about .far,
#bim-concepts i,
#bim-concepts .fas,
#bim-concepts .fab,
#bim-concepts .far {
  font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands', sans-serif !important;
}

/* RTL support for contact section icons */
[dir="rtl"] .grax_tm_contact .info_list ul li .list_inner {
	padding-left: 0 !important;
	padding-right: 27px !important;
}

[dir="rtl"] .grax_tm_contact .info_list ul li .svg {
	left: auto !important;
	right: 0px !important;
}

/* RTL support for contact social icons */
[dir="rtl"] .grax_tm_contact .contact_social_icons_rewritten {
	flex-direction: row-reverse !important;
	justify-content: flex-start !important;
	align-items: center !important;
}

.contact_social_icons_rewritten a {
    margin: 0 8px; /* Adds space on both sides of the icon */
}

[dir="rtl"] .grax_tm_contact .contact_social_icons_rewritten a:last-child {
	margin-right: 0 !important;
}

/* RTL support for social icons in About section */
[dir="rtl"] .flex.space-x-4 {
	flex-direction: row-reverse !important;
	justify-content: flex-end !important;
	align-items: center !important;
}

[dir="rtl"] .flex.space-x-4 a {
	margin-left: 0 !important;
	margin-right: 15px !important;
}

[dir="rtl"] .flex.space-x-4 a:last-child {
	margin-right: 0 !important;
}

/* RTL support for article cards */
[dir="rtl"] .bg-white.rounded-lg.shadow-lg.overflow-hidden.p-6 {
	text-align: right;
}

[dir="rtl"] .bg-white.rounded-lg.shadow-lg.overflow-hidden.p-6 .flex.items-center.mb-2 {
	flex-direction: row-reverse;
}

[dir="rtl"] .bg-white.rounded-lg.shadow-lg.overflow-hidden.p-6 .fa-chevron-right {
	transform: rotate(180deg);
}

[dir="rtl"] .bg-white.rounded-lg.shadow-lg.overflow-hidden.p-6 .flex.justify-between.items-center {
	flex-direction: row-reverse;
}



/* Apply Vazirmatn font to article cards in RTL mode */
[dir="rtl"] .bg-white.rounded-lg.shadow-lg.overflow-hidden.p-6 {
	font-family: 'Vazirmatn', sans-serif !important;
}

[dir="rtl"] .bg-white.rounded-lg.shadow-lg.overflow-hidden.p-6 h3 {
	font-family: 'Vazirmatn', sans-serif !important;
}

[dir="rtl"] .bg-white.rounded-lg.shadow-lg.overflow-hidden.p-6 p {
	font-family: 'Vazirmatn', sans-serif !important;
}

[dir="rtl"] .bg-white.rounded-lg.shadow-lg.overflow-hidden.p-6 .tag-item {
	font-family: 'Vazirmatn', sans-serif !important;
}

[dir="rtl"] .bg-white.rounded-lg.shadow-lg.overflow-hidden.p-6 .tag-item span {
	font-family: 'Vazirmatn', sans-serif !important;
}

[dir="rtl"] .bg-white.rounded-lg.shadow-lg.overflow-hidden.p-6 a {
	font-family: 'Vazirmatn', sans-serif !important;
}

/* Ensure About Me image is always a perfect circle */
.grax_tm_about img[alt="Profile Photo"] {
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    width: 200px !important; /* Increased from 160px */
    height: 200px !important; /* Increased from 160px */
    object-fit: cover !important;
    display: block;
    max-width: 100%;
    max-height: 100%;
}

/* Professional Journey Timeline Circles - Smaller Size */
.bg-white.dark\:bg-gray-800.p-8.rounded-xl.shadow-lg .relative.pl-8.border-l-2 .absolute.rounded-full {
    width: 12px !important;
    height: 12px !important;
    left: -7px !important;
    z-index: 2;
}

/* Ensure vertical line is visible under the circles */
.bg-white.dark\:bg-gray-800.p-8.rounded-xl.shadow-lg .relative.pl-8.border-l-2 {
    position: relative;
    z-index: 1;
}

/* If needed, make sure the border is not covered by background */
.bg-white.dark\:bg-gray-800.p-8.rounded-xl.shadow-lg .relative.pl-8.border-l-2 {
    background: transparent !important;
}

/* Fix: Ensure vertical line is visible under the circles in Professional Journey */
.bg-white.dark\:bg-gray-800.p-8.rounded-xl.shadow-lg .relative.pl-8.border-l-2 {
    background: none !important;
    z-index: auto !important;
    border-left: 2px solid #e5e7eb !important;
}

/* For dark mode */
.bg-white.dark\:bg-gray-800.p-8.rounded-xl.shadow-lg .relative.pl-8.border-l-2.dark\:border-gray-700 {
    border-left: 2px solid #374151 !important;
}

/* Professional Journey Timeline: First vertical line (main color, 1px, center of circle) */
.bg-white.dark\:bg-gray-800.p-8.rounded-xl.shadow-lg .relative.pl-8.border-l-2:first-child {
    border-left: 1px solid var(--main-color) !important;
    padding-left: 18px !important;
    position: relative;
}
.bg-white.dark\:bg-gray-800.p-8.rounded-xl.shadow-lg .relative.pl-8.border-l-2:first-child .absolute.rounded-full {
    left: -7px !important;
    top: 0.5em !important;
}

/* Other vertical lines: gray, 1px, center of circle */
.bg-white.dark\:bg-gray-800.p-8.rounded-xl.shadow-lg .relative.pl-8.border-l-2:not(:first-child) {
    border-left: 1px solid #d1d5db !important;
    padding-left: 18px !important;
    position: relative;
}
.bg-white.dark\:bg-gray-800.p-8.rounded-xl.shadow-lg .relative.pl-8.border-l-2:not(:first-child) .absolute.rounded-full {
    left: -7px !important;
    top: 0.5em !important;
}

/* Dark mode for other lines */
.bg-white.dark\:bg-gray-800.p-8.rounded-xl.shadow-lg .relative.pl-8.border-l-2.dark\:border-gray-700:not(:first-child) {
    border-left: 1px solid #374151 !important;
}

/* Professional Journey Timeline: Align circles with titles */
.bg-white.dark\:bg-gray-800.p-8.rounded-xl.shadow-lg .relative.pl-8.border-l-2 .absolute.rounded-full {
    left: -7px !important;
    top: 1.1em !important; /* Move circle higher to align with h3 title */
}

/* Ensure second word in section titles is color-sensitive */
.grax_tm_title_holder h3 span {
  color: var(--main-color) !important;
}

/* Extra specificity for Latest Publications and BIM Concepts if needed */
#news .grax_tm_title_holder h3 span,
#bim-concepts .grax_tm_title_holder h3 span {
  color: var(--main-color) !important;
}