/* -----------------------------------------------
				CSS Styles
--------------------------------------------------

    Template Name: Apadana - Creative Company
    Author: Saeed
    Copyright: 2025

--------------------------------------------------

Table of Content

	01. Body and Core
	02. Content Css
	03. Home Section
	04. About Section
	05. Portfolio Section
	06. Blog Section
	07. Contact Section
	08. Blog List
	09. Blog Page
	10. Cursor Style
	11. Newsletter
	12. Preloader
	13. Tooltip
	14. Responsible
	15. Animation

----------------------------------- */

/* -----------------------------------
		01. Body and Core Css
----------------------------------- */
@font-face {
    font-family: myfont;
	src: url(../fonts/myfont.ttf) format("ttf"), url(../fonts/myfont.woff) format("woff"), url(../fonts/myfont.eot) format("eot");
    font-style: normal;
    font-weight: normal;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@font-face {
	font-family: shabnam;
	src: url(../fonts/Shabnam-FD.ttf) format("ttf");
	font-style: normal;
    font-weight: normal;
}

@font-face {
  font-family: "IranSans";
  src: url("../fonts/IRANSansWeb(FaNum)_UltraLight.woff2") format("woff2"),
  url("../fonts/IRANSansWeb(FaNum)_UltraLight.woff") format("woff"),
  url("../fonts/IRANSansWeb(FaNum)_UltraLight.ttf") format("ttf");
}

* {
	margin: 0;
	padding: 0;
	font-family: inherit;
	outline: none !important;
	list-style: none !important;
	text-decoration: none !important;
}

body {
	font-family: myfont;
	color: #fff;
	margin: 0;
	font-weight: 500;
	overflow: hidden;
    animation: fadeIn 0.6s ease forwards;
	background-color: #0e0f10;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.animation-list{
	display: inline-block;
	min-width: 170px;
	text-align: center;
}


a {
	cursor: pointer;
	color: inherit;
	text-decoration: none;
	-webkit-transition: all .3s ease;
			transition: all .3s ease;
}

a:hover, 
a:focus {
	color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	padding: 0; 
	color: #fff;
	font-weight: 600;
	text-align: right;
	direction: rtl;
}

h1 {
	font-size: 100px;
}

h2 {
	font-size: 35px;
}

h3 {
	font-size: 26px;
}

h4 {
	font-size: 18px;
}

p {
	color: #fff;
	font-weight: 600;
	font-family: myfont;
	text-align: right;
	direction: rtl;
}

i, em {
	font-style: normal; 
}

img {
	max-width: 100%;
}

.btn,
input,
button,
textarea {
	cursor: pointer !important;
}

/* Blockquote */
blockquote {
	position: relative;
	padding: 30px;
	background-color: rgba(0, 0, 0, .5);
	-webkit-border-radius: 5px;
			border-radius: 5px;
}

blockquote span {
	display: block;
	font-size: 14px;
	margin-top: 20px;
}

blockquote span img {
	width: 40px;
	height: 40px;
	margin-left: 10px;
	-webkit-border-radius: 50%;
			border-radius: 50%;
}

/* Music Bg */
.music-bg {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100px;
	right: 55px;
	bottom: 55px;
	padding: 13px 14px;
	text-align: center;
	visibility: hidden;
	z-index: 10;
	background-color: rgba(14, 15, 16, .5);
	border-top-left-radius: 10px;
	-webkit-transition: all .3s ease;
			transition: all 0.3s ease;
}

.music-bg.blog-music {
	position: absolute;
	width: 60px;
	left: 25px;
    bottom: -20px;
	padding: 0;
	visibility: hidden;
	background-color: transparent;
}

.music-bg .sound {
	margin-top: 2px;
}

.music-bg .sound i {
    color: #2f9064;
    font-size: 22px;
    -webkit-transition: all .3s ease;
			transition: all .3s ease;
}

.music-bg:hover .sound i {
    color: #11d27a;
}

.audio-on .music-bg .sound .on {
    display: block;
}

.audio-on .music-bg .sound .off,
.audio-off .music-bg .sound .on {
    display: none;
}

.music-bg .lines {
    display: flex;
    width: 24px;
    height: 24px;
    margin: 0 auto 10px;
    align-items: flex-end;
}

.music-bg .lines span {
    display: inline-flex;
    margin: 0px 1px;
    width: 7px;
    height: 5px;
    background: #fff;
}

.audio-on .music-bg .lines span:nth-child(1) {
    -webkit-animation: musicline 2s 0.5s ease-out alternate infinite;
    		animation: musicline 2s 0.5s ease-out alternate infinite;
}  

.audio-on .music-bg .lines span:nth-child(2) {
    -webkit-animation: musicline 2s 1s ease-out alternate infinite;
    		animation: musicline 2s 1s ease-out alternate infinite;
} 

.audio-on .music-bg .lines span:nth-child(3) {
    -webkit-animation: musicline 2s 1.5s ease-out alternate infinite;
    		animation: musicline 2s 1.5s ease-out alternate infinite;
}

.audio-on .music-bg .lines span:nth-child(4) {
    -webkit-animation: musicline 2s 0.25s ease-out alternate infinite;
    		animation: musicline 2s 0.25s ease-out alternate infinite;
}

.audio-on .music-bg .lines span:nth-child(5) {
    -webkit-animation: musicline 2s 0.75s ease-out alternate infinite;
    		animation: musicline 2s 0.75s ease-out alternate infinite;
}

.audio-on .music-bg .lines span:nth-child(6) {
    -webkit-animation: musicline 2s 1.25s ease-out alternate infinite;
    		animation: musicline 2s 1.25s ease-out alternate infinite;
}

/* Button Style */
.button {
	position: relative;
	width: auto;
	height: auto;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	text-transform: uppercase;
	border: 0;
	margin: 0;
	padding: 10px 20px;
	background: none;
	overflow: hidden;
}

.button::after {
	content: '';
	position: absolute;
	width: 80%;
	height: 1px;
	left: 50%;
	bottom: 0;
	display: block;
	background: #25ca7f;
	-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
	-webkit-transition: width .2s cubic-bezier(.2, .3, .25, .9) .4s, background .2s cubic-bezier(.2, .3, .25, .9) 0s;
			transition: width .2s cubic-bezier(.2, .3, .25, .9) .4s, background .2s cubic-bezier(.2, .3, .25, .9) 0s;
}

.button:hover {
	opacity: 1;
	outline: 0;
	color: #183629 !important;
	text-decoration: none;
	-webkit-transition: color .2s ease-in;
			transition: color .2s ease-in;
}

.button:hover::after {
	width: 100%;
	background: #0a5734;
	-webkit-transition: width .2s cubic-bezier(.2, .3, .25, .9) 0s, background .2s cubic-bezier(.2, .3, .25, .9) 0s;
			transition: width .2s cubic-bezier(.2, .3, .25, .9) 0s, background .2s cubic-bezier(.2, .3, .25, .9) 0s;
}

.button b {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	display: block;
	-webkit-transition: all .2s ease-in;
			transition: all .2s ease-in;
}

.button b::before,
.button b::after {
	content: '';
	display: block;
	position: absolute;
	background: #25ca7f;
	-webkit-transition: transform .2s ease-in;
			transition: transform .2s ease-in;
}

.button b:nth-child(1) {
	height: 100%;
}

.button b:nth-child(1)::before,
.button b:nth-child(1)::after {
	width: 1px;
	height: 100%;
	bottom: 0;
	-webkit-transform: scale3d(1, 0, 1);
			transform: scale3d(1, 0, 1);
	-webkit-transform-origin: bottom center;
			transform-origin: bottom center;
	-webkit-transition: transform .2s cubic-bezier(.2, .3, .25, .9) .2s, background .2s cubic-bezier(.2, .3, .25, .9) 0s;
			transition: transform .2s cubic-bezier(.2, .3, .25, .9) .2s, background .2s cubic-bezier(.2, .3, .25, .9) 0s;
}

.button b:nth-child(1)::before {
	left: 0;
}

.button b:nth-child(1)::after {
	right: 0;
}

.button b:nth-child(2) {
	width: 100%;
	height: 1px;
}

.button b:nth-child(2)::before,
.button b:nth-child(2)::after {
	width: 100%;
	height: 1px;
	bottom: 0;
	-webkit-transform: scale3d(0, 1, 1);
			transform: scale3d(0, 1, 1);
	-webkit-transition: transform .2s cubic-bezier(.2, .3, .25, .9) 0s, background .2s cubic-bezier(.2, .3, .25, .9) 0s;
			transition: transform .2s cubic-bezier(.2, .3, .25, .9) 0s, background .2s cubic-bezier(.2, .3, .25, .9) 0s;
}

.button b:nth-child(2)::before {
	left: 0;
	-webkit-transform-origin: bottom left;
			transform-origin: bottom left;
}

.button b:nth-child(2)::after {
	right: 0;
	-webkit-transform-origin: bottom right;
			transform-origin: bottom right;
}

.button:hover b:nth-child(1)::before,
.button:hover b:nth-child(1)::after {
	background: #0a5734;
	-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
	-webkit-transition: transform .2s cubic-bezier(.2, .3, .25, .9) .2s, background .2s cubic-bezier(.2, .3, .25, .9) 0s;
			transition: transform .2s cubic-bezier(.2, .3, .25, .9) .2s, background .2s cubic-bezier(.2, .3, .25, .9) 0s;
}

.button:hover b:nth-child(2)::before,
.button:hover b:nth-child(2)::after {
	background: #0a5734;
	-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
	-webkit-transition: transform .2s cubic-bezier(.2, .3, .25, .9) .4s, background .2s cubic-bezier(.2, .3, .25, .9) 0s;
			transition: transform .2s cubic-bezier(.2, .3, .25, .9) .4s, background .2s cubic-bezier(.2, .3, .25, .9) 0s;
}

/* Animation Text Button */
.button span {
	display: inline-block;
	opacity: 0;
	color: #fff;
	-webkit-transform: translate3d(0, -10px, 0);
			transform: translate3d(0, -10px, 0);
	-webkit-transition: transform .3s, opacity .3s cubic-bezier(.75, 0, .125, 1);
			transition: transform .3s, opacity .3s cubic-bezier(.75, 0, .125, 1);
}

.button::before {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 10px 0;
	-webkit-transition: transform .3s, opacity .3s cubic-bezier(.75, 0, .125, 1);
			transition: transform .3s, opacity .3s cubic-bezier(.75, 0, .125, 1);
}

.button:hover::before {
	opacity: 0;
	-webkit-transform: translate3d(0, 100%, 0);
			transform: translate3d(0, 100%, 0);
}

.button:hover span {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
}

.button:hover span:nth-child(1) {
	-webkit-transition-delay: .05s;
			transition-delay: .05s;
}

.button:hover span:nth-child(2) {
	-webkit-transition-delay: .1s;
			transition-delay: .1s;
}

.button:hover span:nth-child(3) {
	-webkit-transition-delay: .15s;
			transition-delay: .15s;
}

.button:hover span:nth-child(4) {
	-webkit-transition-delay: .20s;
			transition-delay: .20s;
}

.button:hover span:nth-child(5) {
	-webkit-transition-delay: .25s;
			transition-delay: .25s;
}

.button:hover span:nth-child(6) {
	-webkit-transition-delay: .30s;
			transition-delay: .30s;
}

.button:hover span:nth-child(7) {
	-webkit-transition-delay: .35s;
			transition-delay: .35s;
}

.button:hover span:nth-child(8) {
	-webkit-transition-delay: .40s;
			transition-delay: .40s;
}

.button:hover span:nth-child(9) {
	-webkit-transition-delay: .45s;
			transition-delay: .45s;
}

.button:hover span:nth-child(10) {
	-webkit-transition-delay: .50s;
			transition-delay: .50s;
}

.button:hover span:nth-child(11) {
	-webkit-transition-delay: .55s;
			transition-delay: .55s;
}

.button:hover span:nth-child(12) {
	-webkit-transition-delay: .60s;
			transition-delay: .60s;
}

.button:hover span:nth-child(13) {
	-webkit-transition-delay: .65s;
			transition-delay: .65s;
}

.button:hover span:nth-child(14) {
	-webkit-transition-delay: .70s;
			transition-delay: .70s;
}

.button:hover span:nth-child(15) {
	-webkit-transition-delay: .75s;
			transition-delay: .75s;
}

.button:focus {
	background: #070708;
	color: #fff !important;
	-webkit-transition: all .2s cubic-bezier(.2, 03, .25, .9);
			transition: all .2s cubic-bezier(.2, 03, .25, .9);
}

.button:focus::after {
	opacity: 0;
}

/* Box Style */
.box {
	position: relative;
	padding: 15px 30px 30px;
	background-color: #070708;
	-webkit-border-radius: 5px;
			border-radius: 5px;
	-webkit-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
}

.box h4 {
	position: relative;
	font-size: 15px;
	font-family: myfont;
	margin-bottom: 20px;
	padding: 10px 0px 20px;
}

.box h4:after {
	content: '';
	position: absolute;
	width: calc(100% + 80px);
	height: 2px;
	left: -30px;
	bottom: 0;
	background-color: #0e0f10;
}

/* Video Block */
.video {
	position: relative;
	display: flex;
	width: 100%;
	height: 320px;
    margin-top: 27px;
	-webkit-border-radius: 5px;
			border-radius: 5px;
	background: url("../img/video-bg.jpg") center center/cover;
	overflow: hidden;
}

.video:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: .5;
	background-color: #12171b;
	z-index: 0;
}

.video-play {
	position: relative;
	width: 48px;
	height: 48px;
	margin: auto;
	opacity: 0;
	background: url("../img/icon/play.svg") center center/cover;
	-webkit-transition: opacity .3s ease-out;
			transition: opacity .3s ease-out;
	z-index: 1;
}

.video-play:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
	-webkit-border-radius: 50%;
			border-radius: 50%;
	background: #000;
	-webkit-transition: all .5s ease-out;
			transition: all .5s ease-out;
}

.video-content {
	position: absolute;
	display: none;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #000;
	z-index: 2;
}

.video-content iframe {
	width: 100%;
	height: 100%;
}

.video:hover:after,
.video:hover .video-play {
	opacity: 1;
}

.video-is-open:after {
	display: none;
}

.video-is-open .video-play {
	opacity: 1;
}

.video-is-open .video-play:after {
	width: 2vh;
	height: 2vh;
	-webkit-transform: translate(-50%, -50%) scale(88.8888888889);
			transform: translate(-50%, -50%) scale(88.8888888889);
	-webkit-transition: transform .5s ease-out;
			transition: transform .5s ease-out;
}

/* ---------- Margin & Padding --------- */

.mt-0 {
    margin-top: 0 !important;
}
.mt-5 {
    margin-top: 5px !important;
}
.mt-10 {
    margin-top: 10px !important;
}
.mt-15 {
    margin-top: 15px !important;
}
.mt-20 {
    margin-top: 20px !important;
}
.mt-25 {
    margin-top: 25px !important;
}
.mt-30 {
    margin-top: 30px !important;
}
.mt-35 {
    margin-top: 35px !important;
}
.mt-40 {
    margin-top: 40px !important;
}
.mt-45 {
    margin-top: 45px !important;
}
.mt-50 {
    margin-top: 50px !important;
}
.mt-55 {
    margin-top: 55px !important;
}
.mt-60 {
    margin-top: 60px !important;
}
.mt-65 {
    margin-top: 65px !important;
}
.mt-70 {
    margin-top: 70px !important;
}
.mt-75 {
    margin-top: 75px !important;
}
.mt-80 {
    margin-top: 80px !important;
}
.mt-85 {
    margin-top: 85px !important;
}
.mt-90 {
    margin-top: 90px !important;
}
.mt-95 {
    margin-top: 95px !important;
}
.mt-100 {
    margin-top: 100px !important;
}

/* Custom Margin Bottom */
.mb-0 {
    margin-bottom: 0 !important;
}
.mb-5 {
    margin-bottom: 5px !important;
}
.mb-10 {
    margin-bottom: 10px !important;
}
.mb-15 {
    margin-bottom: 15px !important;
}
.mb-20 {
    margin-bottom: 20px !important;
}
.mb-25 {
    margin-bottom: 25px !important;
}
.mb-30 {
    margin-bottom: 30px !important;
}
.mb-35 {
    margin-bottom: 35px !important;
}
.mb-40 {
    margin-bottom: 40px !important;
}
.mb-45 {
    margin-bottom: 45px !important;
}
.mb-50 {
    margin-bottom: 50px !important;
}
.mb-55 {
    margin-bottom: 55px !important;
}
.mb-60 {
    margin-bottom: 60px !important;
}
.mb-65 {
    margin-bottom: 65px !important;
}
.mb-70 {
    margin-bottom: 70px !important;
}
.mb-75 {
    margin-bottom: 75px !important;
}
.mb-80 {
    margin-bottom: 80px !important;
}
.mb-85 {
    margin-bottom: 85px !important;
}
.mb-90 {
    margin-bottom: 90px !important;
}
.mb-95 {
    margin-bottom: 95px !important;
}
.mb-100 {
    margin-bottom: 100px !important;
}
.m-0 {
    margin: 0px !important;
}

/* Custom Padding top */
.pt-0 {
    padding-top: 0 !important;
}
.pt-5 {
    padding-top: 5px !important;
}
.pt-10 {
    padding-top: 10px !important;
}
.pt-15 {
    padding-top: 15px !important;
}
.pt-20 {
    padding-top: 20px !important;
}
.pt-25 {
    padding-top: 25px !important;
}
.pt-30 {
    padding-top: 30px !important;
}
.pt-35 {
    padding-top: 35px !important;
}
.pt-40 {
    padding-top: 40px !important;
}
.pt-45 {
    padding-top: 45px !important;
}
.pt-50 {
    padding-top: 50px !important;
}
.pt-55 {
    padding-top: 55px !important;
}
.pt-60 {
    padding-top: 60px !important;
}
.pt-65 {
    padding-top: 65px !important;
}
.pt-70 {
    padding-top: 70px !important;
}
.pt-75 {
    padding-top: 75px !important;
}
.pt-80 {
    padding-top: 80px !important;
}
.pt-85 {
    padding-top: 85px !important;
}
.pt-90 {
    padding-top: 90px !important;
}
.pt-95 {
    padding-top: 95px !important;
}
.pt-100 {
    padding-top: 100px !important;
}

/* Custom Padding top */
.pb-0 {
    padding-bottom: 0 !important;
}
.pb-5 {
    padding-bottom: 5px !important;
}
.pb-10 {
    padding-bottom: 10px !important;
}
.pb-15 {
    padding-bottom: 15px !important;
}
.pb-20 {
    padding-bottom: 20px !important;
}
.pb-25 {
    padding-bottom: 25px !important;
}
.pb-30 {
    padding-bottom: 30px !important;
}
.pb-35 {
    padding-bottom: 35px !important;
}
.pb-40 {
    padding-bottom: 40px !important;
}
.pb-45 {
    padding-bottom: 45px !important;
}
.pb-50 {
    padding-bottom: 50px !important;
}
.pb-55 {
    padding-bottom: 55px !important;
}
.pb-60 {
    padding-bottom: 60px !important;
}
.pb-65 {
    padding-bottom: 65px !important;
}
.pb-70 {
    padding-bottom: 70px !important;
}
.pb-75 {
    padding-bottom: 75px !important;
}
.pb-80 {
    padding-bottom: 80px !important;
}
.pb-85 {
    padding-bottom: 85px !important;
}
.pb-90 {
    padding-bottom: 90px !important;
}
.pb-95 {
    padding-bottom: 95px !important;
}
.pb-100 {
    padding-bottom: 100px !important;
}
.p-0 {
    padding: 0 !important;
}

/* -----------------------------------
		02. Content Css
----------------------------------- */
.wrap {
	position: fixed;
    width: 100%;
    height: 100%;
	overflow: hidden;
	-webkit-transition: transform .6s cubic-bezier(.55, 0, .1, 1);
			transition: transform .6s cubic-bezier(.55, 0, .1, 1);
}

.wrap.show-all {
	overflow: visible;
	-webkit-transform: scale(.2);
			transform: scale(.2);
}

.page-wrap {
	position: absolute;
    width: 100%;
    height: 100%;
	-webkit-perspective: 2000px;
			perspective: 2000px;
	-webkit-box-shadow: 0 0 1000px 500px #000;
			box-shadow: 0 0 1000px 500px #000;
	-webkit-transition: transform .3s cubic-bezier(.55, 0, .1, 1);
			transition: transform .3s cubic-bezier(.55, 0, .1, 1);
}

.page {
	position: absolute;
	width: 100%;
	height: 100%;
	will-change: transform;
	overflow: hidden;
	-webkit-transition: all .3s cubic-bezier(.55, 0, .1, 1);
			transition: all .3s cubic-bezier(.55, 0, .1, 1);
}

.page:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	background-color: transparent;
	-webkit-transition: all .3s cubic-bezier(.55, 0, .1, 1);
			transition: all .3s cubic-bezier(.55, 0, .1, 1);
	z-index: 2; 
}

.show-all .page:before {
	pointer-events: all;
}

.show-all .page:hover:before {
	content: "\f065";
	font-family: "Font Awesome 5 Free";
	font-size: 90px;
	font-weight: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(14, 15, 16, .7);
}

.animate-one.animate .page {
	-webkit-transform: scale(.9);
			transform: scale(.9);
}

.animate-two.animate .page {
	-webkit-transform: scale(.6) rotateY(-25deg);
			transform: scale(.6) rotateY(-25deg);
}

.animate-three.animate .page {
	-webkit-transform: scale(.8) rotateX(25deg);
			transform: scale(.8) rotateX(25deg);
}

.page-wrap.animate-one,
.page-wrap.animate-two,
.page-wrap.animate-three {
	-webkit-transition: transform .3s cubic-bezier(.55, 0, .1, 1) .3s;
			transition: transform .3s cubic-bezier(.55, 0, .1, 1) .3s;
}

.page[data-x-pos="-2"] {
	left: -200%;
}

.page[data-x-pos="-1"] {
	left: -100%;
}

.page[data-x-pos="1"] {
	left: 100%;
}

.page[data-x-pos="2"] {
	left: 200%;
}

.page[data-y-pos="-2"] {
	top: 200%;
}

.page[data-y-pos="-1"] {
	top: 100%;
}

.page[data-y-pos="1"] {
	top: -100%;
}

.page[data-y-pos="2"] {
	top: -200%;
}

.page-nav-new {
	position: absolute;
    top: 10px;
    left: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 600;
	text-transform: uppercase;
	user-select: none;
}

.page-nav-new svg.mr {
	margin-right: 15px;
}

.page-nav-new svg.ml {
	margin-left: 15px;
}

.page-nav {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 600;
	text-transform: uppercase;
	user-select: none;
}

.page-nav svg.mr {
	margin-right: 15px;
}

.page-nav svg.ml {
	margin-left: 15px;
}

svg g [fill] {
	fill: #2f9064;
    -webkit-transition: fill .3s ease;
    		transition: fill .3s ease;
}

.page-nav:hover svg g [fill],
.header-page:hover svg g [fill],
.newsletter:hover svg g [fill],
.animation-wrap:hover svg g [fill],
.slider-control:hover svg g [fill],
.about .info-icon:hover svg g [fill],
.item figure:hover svg.icon g [fill],
.about .experience .item:hover svg g [fill],
.item figure:hover figcaption p svg g [fill],
.newsletter-block .main .news-close:hover svg g [fill],
.blog-head .desc span:hover svg g [fill],
.blog-page .blog-head .bread-crumb li a.home:hover svg g [fill],
.blog-list .blog-head .bread-crumb li a.home:hover svg g [fill],
.blog-list .side-left .tags:hover svg g [fill],
.blog-list .side-left .categories:hover svg g [fill],
.blog-list .side-left .archives:hover svg g [fill],
.blog-list .side-left .gallery:hover svg g [fill],
.blog-list .side-left .news:hover svg g [fill],
.blog-list .blog-post .main .thumbnail:hover svg g [fill] {
	fill: #00ff8b;
    -webkit-transition: fill .3s ease;
    		transition: fill .3s ease;
}

/* Position Button Menu */
.nav-up {
	top: 1rem;
	left: 50%;
	-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
}

.nav-left {
	top: 50%;
	left: 1rem;
	-webkit-transform: translateY(-50%) rotate(-90deg) translateX(-100%);
			transform: translateY(-50%) rotate(-90deg) translateX(-100%);
	-webkit-transform-origin: top left;
			transform-origin: top left;
}

.nav-right {
	top: calc(50% - 24px);
	right: 15px;
	-webkit-transform: translateY(-50%) rotate(90deg) translateX(100%);
			transform: translateY(-50%) rotate(90deg) translateX(100%);
	-webkit-transform-origin: top right;
			transform-origin: top right;
}

.nav-down {
	left: 50%;
	bottom: 12px;
	-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
}

.nav-left-top {
	top: 18px;
	left: 16px;
	/* display: none; */
}

.nav-left-down {
	left: 16px;
	bottom: 12px;
	/* display: none; */
}

.nav-right-top {
	top: 18px;
	right: 16px;
	/* display: none; */
}

.nav-right-down {
	right: 18px;
	bottom: 12px;
}

.header-page {
	display: block;
	text-align: center;
}
.header-page h2 {
	text-align: center;
}

/* Content Page */
.content {
	direction: rtl;
	position: absolute;
	width: calc(100% - 110px);
	height: calc(100% - 110px);
	top: 0;
	right: 0;
	margin: 55px;
	padding: 0 25px;
	overflow-y: auto;
	overflow-x: hidden;
	background: #0e0f10;
}

.about:after,
.blog:after,
.contact:after,
.portfolio:after {
	position:absolute;
	content: '';
	width: 100%;
	height: 100%;
	border: 55px solid rgba(7, 7, 8);
	-webkit-box-shadow: inset 0 0 5px 0 rgba(14, 15, 16, .5);
			box-shadow: inset 0 0 5px 0 rgba(14, 15, 16, .5);
	z-index: -1;
}

/* -----------------------------------
		03. Home Section
----------------------------------- */
.background {
	position: absolute;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
            background-size: cover;
    background-image: url(../img/bg.jpg);
}

.background:before,
.glitch:before,
.html-video-container:before {
	content: '';
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .5);
    border: 55px solid rgba(14, 15, 16, .7);
    -webkit-box-shadow: inset 0 0 5px 0 rgba(14, 15, 16, .5);
            box-shadow: inset 0 0 5px 0 rgba(14, 15, 16, .5);
    z-index: 0;
}

/* Html Video */
.html-video-container {
	position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    min-width: 100%;
    height: auto;
    min-height: 100%;
    background: #000;
    -webkit-transform: translate(-50%, -50%);
    		transform: translate(-50%, -50%);
    z-index: 0;
}

/* Particles */
#particles-js {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* Glitch */
.glitch {
	position: absolute;
 	width: 100%;
 	height: 100%;
	top: 0;
 	left: 0;
	background-image: url('/img/bg.jpg');
	-webkit-background-size: cover;
			background-size: cover;
	background-position: center;
	z-index: -1 !important;
}

/* Background Lines */
.bg-lines {
	position: absolute;
	height: 100%;
	width: 80vw;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
}

.bg-lines .bg-line {
	position: absolute;
    height: calc(100% - 110px);
    width: 1px;
    top: 55px;
	left: 50%;
	background: rgba(255, 255, 255, 0.1);
	overflow: hidden;
}

.bg-lines .bg-line::after {
	content: "";
	display: block;
	position: absolute;
	height: 15vh;
	width: 100%;
	top: -50%;
	left: 0;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 75%, #fff 100%);
	-webkit-animation: run 7s 0s infinite;
			animation: run 7s 0s infinite;
	-webkit-animation-fill-mode: forwards;
			animation-fill-mode: forwards;
	-webkit-animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
			animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
}

.bg-lines .bg-line:nth-child(1) {
	margin-left: -50%;
}

.bg-lines .bg-line:nth-child(1)::after {
	-webkit-animation-delay: 2s;
			animation-delay: 2s;
}

.bg-lines .bg-line:nth-child(3) {
	margin-left: -25%;
}

.bg-lines .bg-line:nth-child(3)::after {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}

.bg-lines .bg-line:nth-child(4) {
	margin-left: 25%;
}

.bg-lines .bg-line:nth-child(4)::after {
	-webkit-animation-delay: 1.5s;
			animation-delay: 1.5s;
}

.bg-lines .bg-line:nth-child(5) {
	margin-left: 50%;
}

.bg-lines .bg-line:nth-child(5)::after {
	-webkit-animation-delay: 2s;
			animation-delay: 2s;
}
/* Slider */
.slider-section .content-box h1, .slider-section .content-box p {
	text-align: center
}
.slider-wrap {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0;
    background: transparent;
	z-index: 0;
}

.slider-section {
	position: relative;
	width: 100%;
	height: 100%;
}

.section-slider {
	position: relative;
	height: 100% !important;
}

.section-slider:before {
	position:absolute;
	content: '';
	width: 100%;
	height: 100%;
	border: 55px solid rgba(14, 15, 16, .7);
	-webkit-box-shadow: inset 0 0 5px 0 rgba(14, 15, 16, .5);
			box-shadow: inset 0 0 5px 0 rgba(14, 15, 16, .5);
	z-index: 2;
}

.slider-section .swiper-slide {
	position: relative;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
			background-size: cover;
	background-position: center;
}

.slider-section .swiper-slide:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: .3;
	background-color: #12171b;
	z-index: 0;
}

.slider-section .content-outer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.slider-section .content-box {
	position: relative;
	width: 100%;
    top: 50%;
    text-align: center;
	-webkit-transform: translateY(-50%);
    		transform: translateY(-50%);
}

.slider-section .content-box .inner {
	position: relative;
	padding: 0 60px;
	opacity:0;
	-webkit-transform:translateX(100px);
			transform:translateX(100px);
}

.slider-section .swiper-slide-active .content-box .inner {
	opacity:1;	
	-webkit-transition: all .5s ease;
			transition: all .5s ease;
	-webkit-transform:translateX(0px);
			transform:translateX(0px);
}

.slider-section .content-box .inner h1 {
	position: relative;
	display: block;
	color: #fff;
	font-size: 70px;
	font-weight: 700;
	font-family: myfont;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all .5s ease;
			transition: all .5s ease;
	-webkit-transform:translateY(-100px);
			transform:translateY(-100px);
}

.slider-section .swiper-slide-active .content-box .inner h1 {
	opacity: 1;
	visibility: visible;
	-webkit-transition-delay: .8s;
			transition-delay: .8s;
	-webkit-transform:translateY(0px);
			transform:translateY(0px);
}

.slider-section .content-box .inner p {
    color: #fff;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
	margin: 12px 0 0;
	text-transform: uppercase;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all .5s ease;
			transition: all .5s ease;
	-webkit-transform:translateY(50px);
			transform:translateY(50px);
}

.slider-section .swiper-slide-active .content-box .inner p {
	opacity: 1;
	visibility: visible;
	-webkit-transition-delay: 1.2s;
			transition-delay: 1.2s;
	-webkit-transform:translateY(0px);
			transform:translateY(0px);
}

/* Slider Panel */
.bottom-panel {
	position: fixed;
	left: 55px;
	bottom: 55px;
	right: 0;
	height: 60px;
	max-width: 350px;
	background: rgba(14, 15, 16, .5);
	border-top-right-radius: 10px;
	z-index: 9;
}

.slider-control-wrap {
	position: absolute;
	top: 0;
	bottom: 0px;
	right: 0;
	width: 100%;
	z-index: 100;
}

.slider-control-wrap .left-side {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	flex-direction: row-reverse;
	margin: 0 20px;
}

.swiper-counter {
	position: relative;
	display: inline-block;
	right: 50px;
	color: #fff;
	font-size: 12px;
	width: 80px;
	text-align: center;
	z-index: 9;
}

.swiper-counter div {
	position: relative;
	width: 32px;
	height: 32px;
	display: inline-block;
	color: rgba(255, 255, 255, .9);
	font-size: 12px;
	line-height: 32px;
}

.swiper-counter div#current {
	margin-right: 6px;
}

.swiper-counter div#total {
	right:10px;
}

.swiper-counter div#total:before {
	content:'/';
	position:absolute;
	width:6px;
	height: 2px;
	top:0;
	left:-3px;
}

.scroll-pagination {
	position: absolute;
	width: 160px;
	height: 30px;
	top: 0;
	left: 0px;
	bottom: 0;
	margin: 15px 0;
}

.swiper-pagination {
	position: absolute;
	width: 100%;
	height: 2px;
	top: 14px;
	left: 0;
	background: rgba(255, 255, 255, .1);
	-webkit-transform-origin: 0 0;
			transform-origin: 0 0;
}

.swiper-pagination-progressbar-fill {
	height: 2px !important;
	top: 0px !important;
	background: #a21c43 !important;
}

/* Mouse Scroll Down */
.scroll-down {
	position: absolute;
	right: 10px;
	border-left: 1px solid rgba(255, 255, 255, .1);
}

.mouse {
	width: 18px;
	height: 26px;
	padding: 0 6px;
	margin-left: 20px;
	-webkit-border-radius: 50px;
			border-radius: 50px;
	border: 2px solid rgba(255, 255, 255, .3);
}

.scroller {
	position: relative;
	width: 2px;
    height: 5px;
    top: 6px;
    left: calc(50% - 1px);
	background-color: #25ca7f;
	-webkit-animation: 2s cubic-bezier(.15, .41, .69, .94) infinite scroll;
			animation: 2s cubic-bezier(.15, .41, .69, .94) infinite scroll;
}

/* Slider Button */
.slider-nav {
	position: absolute;
	width: 85%;
	height: 60px;
	max-width: 1550px;
	top: 50%;
	left: 0;
	right: 0;
	margin: 0 auto;
	display: flex;
	align-items: center;
	flex-direction: row-reverse;
	justify-content: space-between;
	-webkit-transform: translateY(-50%);
			transform: translateY(-50%);
	z-index: 9;
}

.slider-nav:before {
	content: '';
	position: absolute;
	width: 13%;
	height: 2px;
	top: 0;
	opacity: .3;
	right: 60px;
	bottom: 0;
	margin: 23px 0;
	background: #2f9064;
}

.slider-nav:after {
	content: '';
	position: absolute;
	width: 13%;
	height: 2px;
	top: 0;
	left: 60px;
	opacity: .3;
	bottom: 0;
	margin: 23px 0;
	background: #2f9064;
}

.slider-control {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 60px;
	color: #fff;
	font-size: 30px;
	line-height: 60px;
	text-align: center;
	z-index: 1;
}

.slider-control i {
	-webkit-transition: all .2s linear;
			transition: all .2s linear;
	-webkit-transition-delay: .3s;
			transition-delay: .3s;
}

.slider-control.slider-button-prev {
	position: relative;
}

/* Logo */
/* .logo {
    position: relative;
    display: block;
    width: 89px;
    height: 48px;
    top: 27px;
    left: 50%;
    transform: translateX(-50%);
} */

.logo {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    transition:
    opacity 0.2s ease,
    filter 0.2s ease;
    z-index: 1001;
    pointer-events: auto;
}


.logo:hover {
    opacity: 0.85;
    filter: drop-shadow(0 6px 18px rgba(162, 28, 67, 0.699));
}

/* Banner */
.banner {
	position: absolute;
	width: 100%;
	top: 50%;
	left: 0;
	color: #fff;
	text-align: center;
}

.banner h1 {
	color: #fff;
	margin-bottom: 15px;
	font-family: myfont;
	text-align: center;
}

.banner p {
	color: #fff;
	font-size: 30px;
	text-align: center;
}

/* Button All Menu */
.page-zoom {
	position: absolute;
	width: 20px;
	top: 30%;
	left: calc(50% - 10px);
	right: 0;
	z-index: 9;
}

.page-zoom span {
	display: block;
	position: relative;
	width: 20px;
	height: 2px;
	margin-bottom: 3px;
	-webkit-transition: transform .6s cubic-bezier(.19, 1, .22, 1), opacity .4s cubic-bezier(.19, 1, .22, 1);
			transition: transform .6s cubic-bezier(.19, 1, .22, 1), opacity .4s cubic-bezier(.19, 1, .22, 1);
}

.page-zoom span:before {
	background: #fff;
	opacity: 1;
	-webkit-transform: translate3d(0%, 0, 0);
			transform: translate3d(0%, 0, 0);
}

.page-zoom span:after {
	background: #fff;
	opacity: 0;
	-webkit-transform: translate3d(100%, 0, 0);
			transform: translate3d(100%, 0, 0);
}

.page-zoom span:first-child:after,
.page-zoom span:first-child:before {
	-webkit-transition: transform .6s cubic-bezier(.19, 1, .22, 1), opacity .2s cubic-bezier(.19, 1, .22, 1);
			transition: transform .6s cubic-bezier(.19, 1, .22, 1), opacity .2s cubic-bezier(.19, 1, .22, 1);
}

.page-zoom span:nth-child(2):after,
.page-zoom span:nth-child(2):before {
	-webkit-transition: transform .6s cubic-bezier(.19, 1, .22, 1) .1s, opacity .2s cubic-bezier(.19, 1, .22, 1) .08s;
			transition: transform .6s cubic-bezier(.19, 1, .22, 1) .1s, opacity .2s cubic-bezier(.19, 1, .22, 1) .08s;
}

.page-zoom span:last-child:after,
.page-zoom span:last-child:before {
	-webkit-transition: transform .6s cubic-bezier(.19, 1, .22, 1) .2s, opacity .2s cubic-bezier(.19, 1, .22, 1) .18s;
			transition: transform .6s cubic-bezier(.19, 1, .22, 1) .2s, opacity .2s cubic-bezier(.19, 1, .22, 1) .18s;
}

.page-zoom span:after,
.page-zoom span:before {
	content: '';
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.page-zoom:hover span:before {
	opacity: 0;
	-webkit-transform: translate3d(-100%, 0, 0);
			transform: translate3d(-100%, 0, 0);
}

.page-zoom:hover span:after {
	background: #25ca7f;
	opacity: 1;
	-webkit-transform: translate3d(0%, 0, 0);
			transform: translate3d(0%, 0, 0);
}

.show-all .page-zoom {
	pointer-events: none;
}

/* Animation List */
.animation-wrap {
	position: relative;
	display: flex;
	width: 40px;
	height: 40px;
	top: 55px;
	left: calc(50% - 8px);
	align-items: center;
	justify-content: center;
	-webkit-border-radius: 0 0 10px 10px;
			border-radius: 0 0 10px 10px;
	background-color: rgba(14, 15, 16, .7);
	-webkit-transform: translateX(-30%);
			transform: translateX(-30%);
	-webkit-transition: all .3s;
			transition: all .3s;
	z-index: 9;
}



.animation-wrap:hover {
	border-radius: 0;
}

.animation-wrap ul {
	position: absolute;
	display: none;
	top: 100%;
	color: #fff;
	margin: 0;
	padding: 0;
	font-size: 12px;
	text-align: center;
	background-color: #0e0f10;
	-webkit-border-radius: 3px;
			border-radius: 3px;
}

.animation-wrap ul li {
	position: relative;
	padding: 10px 30px;
}

.animation-wrap ul li span:after {
	content: '';
	position: absolute;
	width: 50%;
	left: 25px;
	right: 0;
	bottom: 8px;
	border-bottom: 1px solid transparent;
	-webkit-transition: border-color .3s cubic-bezier(.55, 0, .1, 1);
			transition: border-color .3s cubic-bezier(.55, 0, .1, 1);
}

.animation-wrap ul li span.active {
	color: #25ca7f;
	min-width: 120px;
}

.animation-wrap ul li span.active:after,
.animation-wrap ul li span:hover:after {
	border-color: #25ca7f;
	min-width: 120px;
}

/* Social */
/* 
.social {
  position: fixed;
  top: 30%;
}

.social ul {
  list-style-type: none;
  padding: 0;
  transform: translatex(-270px);
}

.social ul li {
  display: block;
  margin: 5px;
  background-color: rgba(0, 0, 0, 0.5);
  width: 300px;
  text-align: right;
  box-sizing: border-box;
  padding: 3px;
  border-radius: 0 30px 30px 0;
  transition: all 1s;
}

.social ul li:hover {
  transform: translatex(110px);
}

.social ul li.Apadana-Whatsapp:hover {
  background-color: #08e426;
}

.social ul li.Apadana-Tel:hover {
  background-color: #3b5999;
}

.social ul li.Apadana-Eita:hover {
  background-color: #df8807;
}

.social ul li.Apadana-Insta:hover {
  background-color: #e4405f;
}

.social ul li a {
  color: white;
  text-decoration: none;
}

.social ul li i {
  text-align: center;
  margin-left: 14px;
  color: black;
  background-color: white;
  padding: 10px;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 20px;
  transform: rotate(0deg);
}

.social ul li:hover i {
  transform: rotate(360deg);
  transition: all 1s;
} */

/* Newsletter */

.newsletter-wrapper {
    position: relative; /* IMPORTANT: anchor */
}

#open-newsletter {
    position: fixed;

    top: 40%;
    right: 1.5%;
/* change it to flex */
    display: flex;
    align-items: center;

    padding: 10px 12px;

    font-size: 12px;
    text-transform: uppercase;

    transform: translateY(-50%) rotate(-90deg);
    transform-origin: right center;

    z-index: 1000; /* stays above content */
    cursor: pointer;
}

@media (max-width:768px){

#open-newsletter {
    position: fixed;

    top: 40%;
    right: 4%;
/* change it to flex */
    display: flex;
    align-items: center;

    padding: 10px 12px;

    font-size: 12px;
    text-transform: uppercase;

    transform: translateY(-50%) rotate(-90deg);
    transform-origin: right center;

    z-index: 1000; /* stays above content */
    cursor: pointer;
}
}

/* #open-newsletter:hover {
    transform: translateY(-50%) rotate(-90deg) scale(1.05);
} */

#open-newsletter svg {
    margin-left: 8px;
}

/* -----------------------------------
		04. About Section
----------------------------------- */
/* User Info Block */
.about .info img {
	-webkit-border-radius: 50%;
			border-radius: 50%;
}

.about .info .loc {
    font-size: 12px;
	color: #fff;
	padding-top: 15px;
	padding-bottom: 15px;
	text-align: right;
}
.about .info .loc i {
	float: right;
    margin-left: 5px;
}

.about .info p {
	font-size: 14px;
	line-height: 24px;
}

.about .info-icon {
	padding-top: 45px
}

.about .info-icon svg {
	display: flex;
	float: right;
	width: 45px;
	height: 45px;
	padding: 10px;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: #0e0f10;
	-webkit-border-radius: 10px;
			border-radius: 10px;
	margin-left: 15px;
}

.about .desc-icon h6 {
	font-size: 15px;
	font-weight: 700;
	line-height: 15px
}

.about .desc-icon p {
	color: #fff;
	font-size: 12px;
	line-height: 21px;
}

.about .desc-icon {
	padding-right: 15px;
	padding-top: 5px
}

.about .btn {
	position: absolute;
	left: 10px;
	top: 12px;
}

/* My Interests */
.about .inter-icon {
	position: relative;
	background: #0e0f10;
	margin: 20px 0;
	padding: 15px;
	border-radius: 10px 30px 30px 10px;
	-webkit-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
}

.about .inter-icon i {
	position: relative;
	width: 30px;
	right: 2px;
	float: right;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 19px;
	margin-left: 29px;
}

.about .inter-icon:before {
	content: '';
	position: absolute;
	width: 64px;
	height: 48px;
	top: 0px;
	right: 0;
	border-radius: 30px;
	border: 4px solid #070708;
	-webkit-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
}

.about .inter-icon:hover:before {
	background: #070708;
}

.about .desc-inter h6 {
	font-size: 15px;
	font-weight: 600;
	line-height: 15px
}

.about .desc-inter {
	padding-top: 3px;
}

/* Testimonials */
.testimonials {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 280px;
	margin: auto;
	-webkit-transition: all .3s;
			transition: all .3s;
}

.testimonial-item {
	display: flex;
	align-items: center;
}

.testimonial-item.swiper-slide-active .testimonial-img img {
	opacity: 1;
	-webkit-transition-delay: .3s;
			transition-delay: .3s;
}

.testimonial-item.swiper-slide-active .testimonial-content > * {
	opacity: 1;
	-webkit-transform: none;
			transform: none;
	float: none;

}

.testimonial-item.swiper-slide-active .testimonial-content > *:nth-child(1) {
	-webkit-transition-delay: .3s;
			transition-delay: .3s;
	float: right;
}

.testimonial-item.swiper-slide-active .testimonial-content > *:nth-child(2) {
	-webkit-transition-delay: .4s;
			transition-delay: .4s;
}

.testimonial-item.swiper-slide-active .testimonial-content > *:nth-child(3) {
	-webkit-transition-delay: .5s;
			transition-delay: .5s;
}

.testimonial-item.swiper-slide-active .testimonial-content > *:nth-child(4) {
	-webkit-transition-delay: .6s;
			transition-delay: .6s;
}

.testimonial-item.swiper-slide-active .testimonial-content > *:nth-child(5) {
	-webkit-transition-delay: .7s;
			transition-delay: .7s;
}

.testimonial-item.swiper-slide-active .testimonial-content > *:nth-child(6) {
	-webkit-transition-delay: .8s;
			transition-delay: .8s;
}

.testimonial-img {
	width: 250px;
	height: 200px;
	flex-shrink: 0;
	-webkit-box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);
			box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);
	-webkit-border-radius: 10px;
			border-radius: 10px;
	-webkit-transform: translateX(60px);
			transform: translateX(60px);
	overflow: hidden;
}

.testimonial-img:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #000;
	-webkit-border-radius: 10px;
			border-radius: 10px;
	z-index: -1;
}

.testimonial-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	-webkit-border-radius: 10px;
			border-radius: 10px;
	-webkit-transition: all .3s;
			transition: all .3s;
}

.testimonial-content {
    padding-left: 50px;
    padding-left: 50px;
}

.testimonial-content > * {
	opacity: 0;
	-webkit-transform: translateY(25px);
			transform: translateY(25px);
	-webkit-transition: all .4s;
			transition: all .4s;
}

.testimonial-content span {
	display: inline-block;
	color: #fff;
	font-size: 13px;
	font-weight: 400;
	margin-bottom: 20px;
}

.testimonial-content h5 {
	font-size: 24px;
	font-weight: 700;
	background: -webkit-linear-gradient( #fff, #a1a1a1 );
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 30px;
}

.testimonial-content p {
	font-size: 14px;
	color: #fff;
	margin-bottom: 30px;
}

.testimonial-content .rating {
	display: inline-block;
	float: left;
}

.testimonial-content .rating li {
	display: inline-block;
	font-size: 12px;
	color: #fff;
}

.testimonials .swiper-container-horizontal > .swiper-pagination-bullets, 
.testimonials .swiper-pagination-custom,
.testimonials .swiper-pagination-fraction {
	width: 100%;
	left: 0;
	bottom: 10px;
}

.testimonial-pagination {
	position: absolute;
	width: 10px !important;
	top: 50%;
	left: 0px;
	right: auto !important;
	bottom: auto !important;
	text-align: center;
	-webkit-transform: translateY(-50%);
			transform: translateY(-50%);
	z-index: 21;
}

.testimonial-pagination.swiper-pagination-bullets .swiper-pagination-bullet {
	margin: 8px 0;
}

.testimonial-pagination .swiper-pagination-bullet {
	display: block;
	width: 6px;
	height: 10px;
	background: #363a3e;
	-webkit-border-radius: 10px;
			border-radius: 10px;
	-webkit-transition: all .3s;
			transition: all .3s;
	opacity: .2;
}

.testimonial-pagination .swiper-pagination-bullet-active {
	opacity: 1;
	height: 20px;
	background: #25ca7f;
}

.box.testom-box {
	margin-right: 50px;
}

/* Skills */
.progress {
    direction: rtl;
}
.about .skill-item {
    padding: 0 20px;
}

.about .skill-item h5 {
	font-size: 13px;
	margin-bottom: 10px;
}

.about .skill-item .progress {
	height: 8px;
	background-color: #0e0f10;
	margin-bottom: 37px;
	overflow: visible;
}

.about .skill-item .progress .progress-bar {
    position: relative;
    background-color: #fff;
    -webkit-border-radius: 10px;
    		border-radius: 10px;
}

.about .skill-item .progress .progress-bar:after {
    content: '';
    position: absolute;
    display: block;
    top: -5px;
    left: 0px;
    padding: 6px;
    background-color: #070708;
    -webkit-border-radius: 50%;
    		border-radius: 50%;
    border: 3px solid #fff;
}

.about .skill-item .progress .progress-value {
    position: absolute;
    top: -30px;
    left: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

/* Experience */
.about .experience {
	height: 280px;
}

.about .experience .item {
	position: relative;
	margin: 20px 20px 30px;
	border-bottom: 1px solid #0e0f10;
}

.about .experience p {
	color: #fff;
	font-size: 15px;
	margin-bottom: 30px;
}

.about .experience .main p {
	color: #2f9064;
	font-size: 12px;
	margin-bottom: 15px;
}

.about .experience .main p i {
    font-size: 13px;
    margin-left: 5px;
}

.about .experience .main h5 {
	position: relative;
	line-height: 15px;
	margin-bottom: 16px;
}

.about .experience .item .main svg {
	position: absolute;
	left: 30px;
}

/* -----------------------------------
		05. Portfolio Section
----------------------------------- */
/* Portfolio Filter */
.portfolio .portfolio-filter {
	text-align: center;
}

.portfolio .portfolio-filter ul {
	position: relative;
    display: inline-block;
    margin: 0;
	-webkit-border-radius: 20px;
			border-radius: 20px;
    background-color: #070708;
}

.portfolio .portfolio-filter ul li {
	position: relative;
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 25px;
	-webkit-border-radius: 20px;
			border-radius: 20px;
	-webkit-transition: all .3s;
			transition: all .3s;
}
 
.portfolio .portfolio-filter ul li.active {
	color: #0e0f10;
	background-color: #fff;
}

/* Portfolio Item */
.portfolio .portfolio-items .item figure {
	position: relative;
	background-color: #0e0f10;
	margin-bottom: 30px;
	-webkit-border-radius: 10px;
			border-radius: 10px;
	overflow: hidden;
}

.portfolio .portfolio-items .item figure img {
	opacity: 1;
	width: 100%;
	height: 100%; 
	-webkit-transition: all .3s;
			transition: all .3s;
}

.portfolio .portfolio-items .item figure figcaption {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: flex;
    align-items: flex-end;
	background-color: rgba(14, 15, 16, .4);
	padding: 20px;
	color: #fff;
}

.portfolio .portfolio-items .item figure figcaption a {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.portfolio .portfolio-items .item figure figcaption h3 {
	color: #fff;
	width: 100%;
	font-size: 20px;
	font-weight: 700;
	background: -webkit-linear-gradient( #fff, #a1a1a1 );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
  
.portfolio .portfolio-items .item figure figcaption p {
	position: absolute;
	right: 0;
	bottom: 35px;
	margin: 20px;
	font-size: 13px;
	opacity: 0;
	-webkit-transform: translateX(200%);
			transform: translateX(200%);
	-webkit-transition: all .3s;
			transition: all .3s;
}

.portfolio .portfolio-items .item figure figcaption p i {
	color: #24a76c;
	margin-left: 5px;
}
 
.portfolio .portfolio-items .item figure figcaption svg.icon {
	position: absolute;
	left: 0;
	bottom: 0;
	margin: 20px;
	font-size: 24px;
	opacity: 0;
	-webkit-transform: translateX(-200%);
			transform: translateX(-200%);
	-webkit-transition: all .3s;
			transition: all .3s;
}
 
.portfolio .portfolio-items .item figure:hover img {
	opacity: 0.5;
	-webkit-transform: scale(1.1);
			transform: scale(1.1); 
}
 
.portfolio .portfolio-items .item figure:hover p {
	opacity: 1; 
	-webkit-transform: translateX(0%);
			transform: translateX(0%);
}
 
.portfolio .portfolio-items .item figure:hover svg.icon {
	opacity: 1; 
	-webkit-transform: translateX(0%);
			transform: translateX(0%);
}

/* -----------------------------------
		06. Blog Section
----------------------------------- */
.blog .blog-item {
	position: relative;
	padding: 0 20px 20px;
	margin-bottom: 50px;
	background-color: rgba(0, 0, 0, .5);
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

.blog .blog-item.two {
	padding: 0 20px 0;
}

.blog .blog-item.two .desc {
	position: absolute;
	display: grid;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: rgba(0, 0, 0, .7);
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

.blog .blog-item h4 {
	position: relative;
	font-weight: 600;
	text-align: center;
	text-transform: uppercase;
	margin: 30px 0;
	background: -webkit-linear-gradient( #fff, #a1a1a1);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.blog .blog-item.two h4 {
	margin: 20px 0;
}

.blog .blog-item h4:before {
    content: '';
    position: absolute;
    height: 5px;
    width: calc(100% + 40px);
    top: -35px;
    left: -20px;
    background: #0e0f10;
}

.blog .blog-item.two h4:before {
	display: none;
}

.blog .blog-item p {
	text-align: center;
}

.blog .blog-item .thumbnail {
	position: relative;
	overflow: hidden;
	margin: 0 -20px;
	-webkit-border-radius: 10px 10px 0 0;
	border-radius: 10px 10px 0 0;
}

.blog .blog-item.two .thumbnail {
	-webkit-border-radius: 10px;
			border-radius: 10px;
}

.blog .blog-item .thumbnail img {
	width: 100%;
	-webkit-transition: all 1s;
    		transition: all 1s;
}

.blog .blog-item:hover .thumbnail img {
	-webkit-transform: scale(1.1);
			transform: scale(1.1);
}

.blog .blog-item ul {
	position: relative;
	display: block;
	text-align: center;
	margin-bottom: 20px;
}

.blog .blog-item.two ul {
	margin: 20px 0;
}

.blog .blog-item ul li  {
    display: inline-block;
    font-size: 13px;
}

.blog .blog-item ul li:not(:last-child):after {
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	margin: 0 8px;
	vertical-align: middle;
	background-color: #fff;
	-webkit-border-radius: 50%;
			border-radius: 50%;
}

.blog .blog-item .head {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	padding: 10px;
	opacity: 0;
	background: rgba(7, 7, 8, .7);
	border-bottom: 3px solid #0e0f10;
	-webkit-border-radius: 10px 10px 0 0;
			border-radius: 10px 10px 0 0;
	-webkit-transform: translateY(20%);
			transform: translateY(20%);
	-webkit-transition: all .5s ease;
			transition: all .5s ease;
}

.blog .blog-item.two .head {
	background: transparent;
	border-bottom: none;	
}

.blog .blog-item:hover .head {
	opacity: 1;
	-webkit-transform: translateY(0);
			transform: translateY(0);
}

.blog .blog-item .head .date {
	font-size: 11px;
	text-transform: uppercase;
	color: rgba(250, 250, 250, .6);
	float: right;
}

.blog .blog-item .head .book {
	display: flex;
	float: left;
}

.blog .blog-item .head .book i {
	color: #2f9064;
	margin-right: 10px;
	-webkit-transition: all .3s ease;
			transition: all .3s ease;
}

.blog .blog-item .head .book i:hover {
	color: #00ff8b;
	margin-right: 10px;
}

.blog .blog-item .blog-btn {
	position: relative;
	text-align: center;
	margin: 30px 0 10px;
}

.blog .blog-item.two .blog-btn {
	margin: 20px 0;
}

.blog .btn {
	display: block;
	margin: 0 auto;
}

/* -----------------------------------
		07. Contact Section
----------------------------------- */

/**--styles--**/
@import "animate.css";
@import "select2.css";
@import "util.css";
/**--styles/--**/

/**--restyles--**/
* {
	margin: 0px; 
	padding: 0px; 
	box-sizing: border-box;
}

a {
	font-size: 14px;
	line-height: 1.7;
	color: #666666;
	margin: 0px;
	transition: all 0.4s;
	-webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
}

a:focus {
	outline: none !important;
}

a:hover {
	text-decoration: none;
}

/*---------------------------------------------*/
h1,h2,h3,h4,h5,h6 {
	margin: 0px;
}

p {
	font-size: 14px;
	line-height: 1.7;
	color: #666666;
	margin: 0px;
}

ul, li {
	margin: 0px;
	list-style-type: none;
}


/*---------------------------------------------*/
input {
	outline: none;
	border: none;
}

textarea {
  outline: none;
  border: none;
}

textarea:focus, input:focus {
  border-color: transparent !important;
}

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }
input:focus:-ms-input-placeholder { color:transparent; }

textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }
textarea:focus::-moz-placeholder { color:transparent; }
textarea:focus:-ms-input-placeholder { color:transparent; }

input::-webkit-input-placeholder { color: #adadad;}
input:-moz-placeholder { color: #adadad;}
input::-moz-placeholder { color: #adadad;}
input:-ms-input-placeholder { color: #adadad;}

textarea::-webkit-input-placeholder { color: #adadad;}
textarea:-moz-placeholder { color: #adadad;}
textarea::-moz-placeholder { color: #adadad;}
textarea:-ms-input-placeholder { color: #adadad;}

/*---------------------------------------------*/
button {
	outline: none !important;
	border: none;
	background: transparent;
}

button:hover {
	cursor: pointer;
}

iframe {
	border: none !important;
}

/**--restyles /--**/

/**--utility--**/
/*[ Text ]*/
.txt1 {
  font-size: 18px;
  line-height: 1.2;
  color: #fff;
}

.txt2 {
  font-size: 15px;
  line-height: 1.6;
  color: #999999;
}

.txt3 {
  font-size: 15px;
  line-height: 1.6;
  color: #00ad5f;
}

/*[ Size ]*/
.size1 {
  width: 355px;
  max-width: 100%;
}

.size2 {
  width: calc(100% - 43px);
}


/*[ Contact ]*/
.container-contact100 {
  width: 66%;
  height: 0%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0px;
  background: #f2f2f2;
  position: relative;
  right: 580px;
  bottom: 552px;
}

/* .contact .container-contact100,
#map {
    transform: translateY(-280px);
} */

.wrap-contact100 {
  width: 1200px;
  height: 758px;
  background: #000000;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  flex-direction: row-reverse;

}

/*[ Form ]*/

.contact100-form {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: re;
  flex-wrap: wrap;
  padding: 56px 55px 63px 55px;
}

.contact100-form-title {
  width: 100%;
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  line-height: 1.2;
  text-align: right;
  padding-bottom: 10px;
  margin-top: -35px;
}

/*[ Input ]*/

.wrap-input100 {
  width: 100%;
  position: relative;
  border: 1px solid #e6e6e6;
}

.rs1-wrap-input100,
.rs2-wrap-input100 {
  width: 50%;
}

/* .rs2-wrap-input100 {
  border-left: none;
} */

.label-input100 {
  font-size: 14px;
  color: #ffffff;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 55px;
  border: 1px solid #e6e6e6;
  border-bottom: none; 
  padding: 10px 25px;
  margin-top: 15px;
  margin-bottom: 0;
}

.input100 {
  display: block;
  width: 100%;
  background: transparent;
  font-size: 16px;/*Edit*/
  color: #ffffff;
  line-height: 1.2;
  padding: 0 25px;
}

input.input100 {
  height: 55px;
}


textarea.input100 {
  min-height: 139px;
  padding-top: 19px;
  padding-bottom: 15px;
}

/*---------------------------------------------*/

.focus-input100 {
  position: absolute;
  display: block;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  top: -1px;
  left: -1px;
  pointer-events: none;
  border: 1px solid #00ad5f;

  visibility: hidden;
  opacity: 0;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;

  -webkit-transform: scaleX(1.1) scaleY(1.3);
  -moz-transform: scaleX(1.1) scaleY(1.3);
  -ms-transform: scaleX(1.1) scaleY(1.3);
  -o-transform: scaleX(1.1) scaleY(1.3);
  transform: scaleX(1.1) scaleY(1.3);
}

.input100:focus + .focus-input100 {
  visibility: visible;
  opacity: 1;

  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}



/*[ Button ]*/
.container-contact100-form-btn {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 23px;
}

.contact100-form-btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  min-width: 200px;
  height: 50px;
  border-radius: 2px;
  background: #00ad5f;
  font-size: 14px;
  color: #fff;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.5px;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.contact100-form-btn:hover {
  background: #be0000;
}

/*[ Responsive ]*/

@media (max-width: 992px) {
  .contact100-form {
    width: 60%;
    padding: 56px 30px 63px 30px;
  }

  .contact100-more {
    width: 40%;
  }
}

@media (max-width: 768px) {
  .contact100-form {
    width: 100%;
  }

  .contact100-more {
    width: 100%;
  }
}

@media (max-width: 576px) {
  .contact100-form {
    padding: 56px 15px 63px 15px;
  }

  .rs1-wrap-input100,
  .rs2-wrap-input100 {
    width: 100%;
  }

  .rs2-wrap-input100 {
    border-left: 1px solid #e6e6e6;
    border-top: none;
  }
}


/*[ Alert validate ]*/

.validate-input {
  position: relative;
}

.alert-validate::before {
  content: attr(data-validate);
  position: absolute;
  max-width: 70%;
  background-color: #fff;
  border: 1px solid #c80000;
  border-radius: 2px;
  padding: 4px 25px 4px 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  /* right: 2px; */
  left: 2px;/*edit*/
  pointer-events: none;
  color: #c80000;
  font-size: 11px;
  line-height: 1.4;
  text-align: left;

  visibility: hidden;
  opacity: 0;

  -webkit-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  transition: opacity 0.4s;
}

.alert-validate::after {
  content: "\f12a";
  font-family: FontAwesome;
  display: block;
  position: absolute;
  color: #c80000;
  font-size: 16px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  /* right: 8px; */
  left: 8px;/*edit*/
}

.alert-validate:hover:before {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 992px) {
  .alert-validate::before {
    visibility: visible;
    opacity: 1;
  }
}


/* Contact info */
.contact .info {
	align-items: center;
	margin-bottom: 10px;
}

.contact .contact-info,
#map {
    transform: translateY(-70px);
}

.contact .info:last-child {
	margin-bottom: 0;
}

.contact .contact-info .info i {
    padding: 10px;
    margin: 10px;
    font-size: 20px;
	-webkit-border-radius: 5px;
    		border-radius: 5px;
	color: #fff;
    background: #0e0f10;
	float: right;
}

.contact .contact-info .info .desc {
    display: grid;
	text-align: right;
}

.contact .contact-info .info .desc p {
    display: block;
    font-size: 15px;
	font-weight: 600;
    margin: 0 10px 0;
	color: #ffffff;
}

.contact .contact-info .info .desc span {
	display: block;
    font-size: 12px;
    color: #a21c43;
	margin: 0 10px 0;
}

/* Google Map */
.contact #map {
    width: 100%;
    height: 300px;
}

.contact .google-map,
#map {
    transform: translateY(340px);
	display: flexbox;
	width: 550px;
	height: 350px;
	left: 580px;
}


/* Contact validation */
.contact-valid .error-messages {
	margin-top: 15px;
}

.contact-valid label.error {
	display: block;
	color: #ff0000;
	font-size: 14px;
	font-weight: normal;
	margin: 5px 0px 0 10px;
	text-align: right;
}

.contact-valid #loader {
	display: none;
	margin-top: 30px;
}

.contact-valid #loader i {
	display: inline-block;
	font-size: 23px;
    color: #fff;
	-webkit-animation: rotating linear 2s infinite;
			animation: rotating linear 2s infinite;
}

.contact-valid #success,
.contact-valid #error {
	display: none;
	width: 100%;
	color: #fff;
	padding: 10px 10px;
	margin-bottom: 5px;
	font-size: 14px;
	text-align: center;
	direction: rtl;
}

.contact-valid #success i,
.contact-valid #error i {
	padding-top: 5px;
	margin-right: 5px;
	margin-left: 10px;
}

.contact-valid #success i {
	color: #25ca7f;
}

.contact-valid #error i {
	color: #ca1d1d;
}


/* -----------------------------------
		08. Blog List
----------------------------------- */
.blog-page,
.blog-list {
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: auto;
    background-color: #0e0f10;
}

.pers-none {
	perspective: none;
}

/* Blog Head */
.blog-page .blog-head,
.blog-list .blog-head {
	position: relative;
	background-position: center;
	-webkit-background-size: cover;
			background-size: cover;
	background-attachment: fixed;
}

.blog-page .blog-head:before,
.blog-list .blog-head:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(14, 15, 16, .7);
}

.blog-page .blog-head .content-head,
.blog-list .blog-head .content-head {
	position: relative;
	padding: 150px 0;
}

.blog-page .blog-head h1,
.blog-list .blog-head h1 {
	color: #fff;
	font-size: 50px;
	text-align: center;
	background: -webkit-linear-gradient( #fff, #dadada );
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 20px;
}

.blog-page .blog-head .bread-crumb,
.blog-list .blog-head .bread-crumb {
	position: absolute;
	direction: rtl;
	display: flex;
	width: 100%;
	right: 0;
	bottom: -30px;
	align-items: center;
	margin: 0;
	padding: 15px 30px;
	background: #151719;
	-webkit-border-radius: 5px;
			border-radius: 5px;
	-webkit-box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, .3);
			box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, .3);
	z-index: 9;
}

.blog-page .blog-head .bread-crumb li,
.blog-list .blog-head .bread-crumb li {
	position: relative;
	display: inline-block;
	color: #fff;
	font-size: 14px;
	font-weight: 400;
	margin-right: 15px;
}

.blog-page .blog-head .bread-crumb li a.home,
.blog-list .blog-head .bread-crumb li a.home {
	display: flex;
	-webkit-transition: .5s ease;
			transition: .5s ease;
}

.blog-list .blog-main {
	margin: 100px 0;
	direction: rtl;
}

.blog-list .blog-post {
	position: relative;
	margin-bottom: 50px;
    padding-bottom: 50px;
	border-bottom: 2px solid #070708;
}

.blog-list .blog-post .main {
	position: relative;
}

.blog-list .blog-post .main .thumbnail {
	position: relative;
	overflow: hidden;
	-webkit-border-radius: 10px 10px 0 0;
			border-radius: 10px 10px 0 0;
}

.blog-list .blog-post .main .thumbnail img {
	position: relative;
	display: block;
	width: 100%;
	-webkit-transition: all 1s;
			transition: all 1s;
}

.blog-list .blog-post:hover .main .thumbnail img {
	-webkit-transform: scale(1.1);
			transform: scale(1.1);
}

.blog-list .blog-post .main .thumbnail ul {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	margin: 0;
	padding: 20px;
	border-top: 3px solid #0e0f10;
	background: rgba(7, 7, 8, .7);
}

.blog-list .blog-post .main .thumbnail ul li {
	position: relative;
	display: flex;
	align-items: center;
	float: left;
	color: #fff;
	font-size: 13px;
	-webkit-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
}

.blog-list .blog-post .main .thumbnail ul li:last-child {
	float: right;
}

.blog-list .blog-post .main .thumbnail ul li svg {
	margin: 0 10px;
}

.blog-list .blog-post .main .detalis {
	position: relative;
	padding: 20px;
	text-align: center;
    background-color: #070708;
	-webkit-border-radius: 0 0 10px 10px;
			border-radius: 0 0 10px 10px;
}

.blog-list .blog-post .main .detalis h4 {
	position: relative;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	margin: 20px 0;
}

.blog-list .blog-post .main .detalis p {
	position: relative;
	color: #fff;
	font-size: 14px;
	margin-top: 10px;
	margin-bottom: 25px;
}

/* Pagination Style */
.blog-list .pagination {
    justify-content: center;
}

.blog-list .pagination li a:hover {
    background: #0e0f10;
    color: #fff !important;
    border: 1px solid transparent;
}

.blog-list .pagination li a {
	position: relative;
    display: inline-block;
    background: transparent;
    border: 1px solid #070708;
	-webkit-border-radius: 50%;
    		border-radius: 50%;
    padding: 9px 16px;
    margin: 5px;
    font-size: 14px;
}

.blog-list .pagination li.active a {
    background: #070708;
    color: #fff;
    border: 1px solid transparent;
}

/* SideBar Left */
.blog-list .side-left h4 {
	font-size: 16px;
	margin-bottom: 20px;
}

.blog-list .side-left h5 {
	font-size: 16px;
	margin-right: 10px;
}

.blog-list .side-left .title {
	position: relative;
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.blog-list .side-left .title:after {
	content: '';
	position: absolute;
	width: calc(100% + 60px);
	height: 2px;
	left: -30px;
	top: -30px;
	background-color: #0e0f10;
}

/* Search Style */
.blog-list .side-left .search {
	background: transparent;
	padding: 35px 0;
	margin-bottom: 50px;
}

.blog-list .side-left .search .input-group {
    border: 1px solid #fff;
	-webkit-border-radius: 50px;
    		border-radius: 50px;
    background: #070708;
}

.blog-list .side-left .search .input-group .input-group-text {
    padding: 5px 0px 5px 15px;
    background: transparent;
    color: #fff;
    width: auto;
    border: none;
}

.blog-list .side-left .search .input-group .form-control {
	font-size: 14px;
	font-weight: 100;
	color: #fff;
	background: transparent;
	border: none !important;
	-webkit-border-radius: 50px;
			border-radius: 50px;
	padding-left: 20px;
}

/* Categories and Archives */
.blog-list .side-left .categories,
.blog-list .side-left .archives {
	margin-bottom: 50px;
}

.blog-list .side-left .categories ul,
.blog-list .side-left .archives ul {
	position: relative;
}

.blog-list .side-left .categories ul li,
.blog-list .side-left .archives  ul li {
	position: relative;
	font-size: 14px;
	padding: 15px 20px 15px 10px;
	border-bottom: 1px solid #070708;
	text-align: right;
}

.blog-list .side-left .categories ul li:before,
.blog-list .side-left .archives ul li:before {
	content: '';
	position: absolute;
	width: 8px;
	height: 8px;
	right: 0;
	top: 22px;
	-webkit-border-radius: 50%;
			border-radius: 50%;
	border: 2px solid #fff;
	-webkit-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
}

.blog-list .side-left .categories ul li:hover:before,
.blog-list .side-left .archives ul li:hover:before {
	border: 4px solid #fff;
	-webkit-box-shadow: 0 0 5px 0px #fff;
			box-shadow: 0 0 5px 0px #fff;
}

/* Recent News */
.blog-list .side-left .news {
	margin-bottom: 50px;
}

.blog-list .side-left .news li {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 15px 0;
	border-bottom: 1px solid #070708;
}

.blog-list .side-left .news img {
	width: 47px;
	height: 47px;
	margin-left: 15px;
	-webkit-border-radius: 100%;
			border-radius: 100%;
}

.blog-list .side-left .news h6 {
	position: relative;
	margin: 0;
	padding-bottom: 7px;
	font-size: 15px;
}

.blog-list .side-left .news p {
	margin: 0;
	color: #fff;
	font-size: 12px;
}

.blog-list .side-left .news p i {
	margin-left: 5px;
}

/* Gallery */
.blog-list .side-left .gallery {
	margin-bottom: 50px;
}

.blog-list .side-left .gallery ul {
	padding-top: 15px;
	text-align: right;
}

.blog-list .side-left .gallery ul li {
	max-width: 70px;
	position: relative;
	display: inline-block;
	width: 25%;
	padding: 0px 3px;
	margin-bottom: 9px;
}

/* Tags */
.blog-list .side-left .tags {
	margin-bottom: 20px;
}

.blog-list .side-left .tags ul li {
    display: inline-block;
}

.blog-list .side-left .tags ul {
	padding-top: 15px;
	text-align: right;
}

.blog-list .side-left .tags ul li a {
	position: relative;
	display: inline-block;
	font-size: 13px;
	line-height: 24px;
	padding: 8px 19px;
	margin: 0px 5px 10px 0px;
	color: #fff;
	text-align: center;
	background-color: #0e0f10;
	-webkit-border-radius: 30px;
			border-radius: 30px;
}

.blog-list .side-left .tags ul li a:hover {
	background-color: #070708 !important;
}

/* -----------------------------------
		09. Blog Page
----------------------------------- */
.blog-page .blog-head .desc {
	display: flex;
	align-items: center;
	justify-content: center;
}

.blog-page .blog-head .desc span {
	display: flex;
	color: #fff;
	align-items: center;
	font-size: 14px;
}

.blog-page .blog-head .desc span svg {
	margin: 0 7px;
}

.blog-page .blog-head .desc span:after {
	content: '';
	margin-right: 10px;
	width: 5px;
	height: 5px;
	background-color: #fff;
	-webkit-border-radius: 50%;
			border-radius: 50%;
	display: inline-block;
	vertical-align: middle;
}

.blog-page .blog-head .desc span:last-child:after {
	display: none;
}

/* Blog Content */
.blog-page .blog-content {
	margin: 100px 0;
	direction: rtl;
    text-align: right;
}

.blog-page .blog-content .container {
	padding: 0 40px;
}

/* Blog Comments */
.blog-page .blog-comments ul {
	margin-top: 40px;
}

.blog-page .blog-comments ul li {
	margin-bottom: 50px;
}

.blog-page .blog-comments ul li:last-child {
	margin-bottom: 20px;
}

.blog-page .blog-comments ul li ul {
	position: relative;
    padding: 20px 20px 0;
	background-color: rgb(14, 15, 16);
	border-right: 1px solid #2f9064;
    margin-right: 60px;
	margin-top: 30px;
	-webkit-border-radius: 5px;
			border-radius: 5px;
}

.blog-page .blog-comments ul .author-img {
	float: right;
	margin-left: 20px;
}

.blog-page .blog-comments ul li .author-img img {
	-webkit-border-radius: 50%;
			border-radius: 50%;
	max-width: 70px;
}

.blog-page .blog-comments ul li .comment-text {
	overflow: hidden;
}

.blog-page .blog-comments ul li .comment-text a {
	float: left;
	font-size: 11px;
	margin-left: 15px;
	padding: 5px;
	-webkit-border-radius: 5px;
			border-radius: 5px;
	background-color: rgb(14, 15, 16);
}

.blog-page .blog-comments ul li .comment-text a i {
	margin-left: 5px;
}

.blog-page .blog-comments ul li .comment-text h5 {
	font-size: 17px;
	font-weight: 600;
    margin-bottom: 5px;
}

.blog-page .blog-comments ul li .comment-text p {
	font-size: 15px;
}

.blog-page .blog-comments ul li .comment-text span {
	display: block;
	color: #fff;
	font-size: 12px;
	font-weight: 300;
	margin-bottom: 15px;
}

/* -----------------------------------
		10. Cursor Style
----------------------------------- */
.cursor,
.cursor-border {
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	-webkit-border-radius: 50%;
			border-radius: 50%;
	-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
	-webkit-transition: opacity .3s ease-in-out, -webkit-transform 0.3s ease-in-out;
			transition: opacity .3s ease-in-out, -webkit-transform 0.3s ease-in-out;
			transition: opacity .3s ease-in-out, transform 0.3s ease-in-out;
	z-index: 999;
}

/* Point */
.cursor {
	width: 8px;
	height: 8px;
	background-color: #fff;
	mix-blend-mode: difference;
}

/* Border */
.cursor-border {
	width: 35px;
	height: 35px;
	border: 1px solid #fff;
	mix-blend-mode: difference;
}

/* Cursor Hover */
.cursor.homing {
	width: 20px;
	height: 26px;
	margin-top: 5px;
	background: url("../img/icon/hover.png") no-repeat center center;
	mix-blend-mode: normal;
}

.cursor-border.homing {
	background-color: rgba(21, 21, 21, 0.7);
	border: 0;
	mix-blend-mode: difference;
	-webkit-transform: translate(-50%, -50%) scale(1.6);
			transform: translate(-50%, -50%) scale(1.6);
}

/* Cursor Grab */
.cursor.grab {
	width: 20px;
	height: 20px;
	background: url("../img/icon/grab.png") no-repeat center center;
	mix-blend-mode: normal;
}

/* Cursor Sound */
.cursor.sound {
	width: 25px;
	height: 25px;
	background: url("../img/icon/sound.png") no-repeat center center;
	mix-blend-mode: normal;
}

/* Cursor Pen */
.cursor.pen {
	width: 20px;
	height: 20px;
	background: url("../img/icon/pen.png") no-repeat center center;
	mix-blend-mode: normal;
}

/* -----------------------------------
		11. Newsletter
----------------------------------- */
.newsletter-block {
	position: relative;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	background-color: rgba(14, 15, 16, .5);
	z-index: 11;
	-webkit-transform: translateY(100%);
			transform: translateY(100%);
	-webkit-transition: all .5s;
			transition: all .5s;
}

.newsletter-block.open {
	-webkit-transform: translateY(0%);
			transform: translateY(0%);
}

.newsletter-block .main {
	content: '';
	position: relative;
	width: 100%;
	height: 925px;
	left: 0;
	bottom: 0;
	text-align: center;
	padding: 50px 100px;
	background-color: #000000;
}

.newsletter-block .main .news-close {
	position: absolute;
	display: flex;
	align-items: center;
	top: 60px;
	left: 105px;
	font-size: 13px;
	text-transform: uppercase;
}

.newsletter-block .main .news-close svg {
	margin-right: 5px;
}

.newsletter-block .main h3 {
	font-size: 30px;
	text-transform: uppercase;
	margin-bottom: 40px;
	text-align: center;
}

.newsletter-block .main .btn {
	display: block;
    margin: 0 auto;
    cursor: pointer;
}

.newsletter-block #subscribe input {
	position: relative;
	width: 177px;
	height: 47px;
	bottom: 25px;
	font-size: 14px;
	text-align: center;
	color: #fff;
	cursor: none;
	border-bottom: 1px solid #fff;
	border-top: none;
	border-left: none;
	border-right: none;
	padding: 5px 5px;
	margin: 15px 0 15px 0;
	background: none;
	-webkit-transition: all .5s;
			transition: all .5s;
}


.newsletter-block #subscribe input:focus,
.newsletter-block #subscribe textarea:focus {
	color: #fff;
	-webkit-transition: all .5s;
			transition: all .5s;
}

.newsletter-block #subscribe input:hover {
	border-color: #25ca7f;
	-webkit-transition: all .5s;
			transition: all .5s;
}

input[type="text"].subscribe-email::-webkit-input-placeholder {
	font-size: 14px;
	font-weight: 100;
	color: #fff;
}

input:focus.subscribe-email::-webkit-input-placeholder {
	color: transparent;
}

/* ---------------------------------
		12. Preloader
--------------------------------- */
.preloader {
	position: fixed;
	width: 100%;
	height: 100vh;
	background-color: #000;
	overflow: hidden;
	z-index: 2000;
}

.preloader p,
.preloader span {
	position: fixed;
	top: 55%;
	left: 50%;
	color: #fff;
	font-size: 40px;
	font-weight: 400;
	font-family: myfont;
	margin-bottom: 0;
	pointer-events: none;
	-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
	z-index: 4000; 
}

.preloader span {
	top: 40%;
	left: 50%;
	font-size: 40px;
	font-weight: 500;
	text-transform: uppercase;
}

.preloader span:after,
.preloader span:before {
	position: absolute;
	content: '';
	height: 1px;
	width: 20px;
	top: 0;
	left: 0;
	background: #fff;
}

.preloader span:before {
	top: unset;
	left: unset;
	right: 0;
	bottom: 0;
}


/* -----------------------------------
		13. Tooltip
----------------------------------- */
[data-tooltip] {
	position: relative;
}

[data-tooltip]:after {
	position: absolute;
	visibility: hidden;
	opacity: 0;
	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	z-index: 99;
	-webkit-transition: transform .3s ease, opacity .3s;
			transition: transform .3s ease, opacity .3s;
}

[data-tooltip]:after {
	content: attr(data-tooltip);
	font: normal 10px myfont;
	background-color: rgba(14, 15, 16, .7);
	color: #fff;
	padding: 10px 15px;
	-webkit-border-radius: 5px;
			border-radius: 5px;
	white-space: nowrap;
	text-transform: uppercase;
}

[data-tooltip]:hover:after {
	visibility: visible;
	opacity: 1;
	-webkit-transform: translateY(0px);
			transform: translateY(0px);
}

[data-tooltip][data-position="top"]:after {
	bottom: 100%;
	margin-bottom: 25px;
	-webkit-transform: translateY(10px);
			transform: translateY(10px);
}

[data-tooltip][data-position="top"]:hover:after {
	-webkit-transform: translate(20px, 0px);
			transform: translate(20px, 0px);
}

[data-tooltip][data-position="left"]:after {
	right: 100%;
	margin-right: 10px;
	-webkit-transform: translateX(0px);
			transform: translateX(0px);
}

[data-tooltip][data-position="left"]:hover:after {
	-webkit-transform: translateX(-10px);
			transform: translateX(-10px);
}

[data-tooltip][data-position="right"]:after {
	left: 100%;
	margin-left: 10px;
	-webkit-transform: translateX(0);
			transform: translateX(0);
}

[data-tooltip][data-position="right"]:hover:after {
	-webkit-transform: translateX(10px);
			transform: translateX(10px);
}

[data-tooltip][data-position="bottom"]:after {
	top: 100%;
	margin-top: 25px;
	-webkit-transform: translateY(-10px);
			transform: translateY(-10px);
}

[data-tooltip][data-position="bottom"]:hover:after {
	-webkit-transform: translate(0px, -25px);
			transform: translate(0px, -25px);
}

/* ---------------------------------
		14. Responsible
--------------------------------- */
@media screen and (max-width: 1024px) {
	.testimonial-content {
		position: relative;
    	left: -30px;
		padding-left: 10px;
    	padding-right: 10px;
	}
	.about .desc-icon {
    	padding-left: 0px;
    	padding-top: 55px;
	}
	.testimonial-content .rating {
		display: block;
    	float: none;
	}
	.testimonial-content span,
	.testimonial-content h5,
	.testimonial-content p {
		margin-bottom: 15px;
	}
}

@media screen and (max-width: 991px) {
	.banner h1 {
    	font-size: 60px;
	}
	.slider-section .content-box .inner h1 {
		font-size: 60px;
	}
	.slider-section .content-box .inner p {
		letter-spacing: 2px;
	}
	.slider-nav:before,
	.slider-nav:after {
		display: none;
	}
	.newsletter-block .main .news-close {
		right: 40px;
	}
	.box.testom-box {
		margin-right: 0;
	}
	.testimonial-content {
		padding-right: 0;
		padding-left: 30px;
	}
	.testimonial-img {
		-webkit-transform: translateX(-10px);
    			transform: translateX(-10px);
	}
	.about .desc-icon {
    	padding-left: 15px;
    	padding-top: 5px;
	}
}

@media screen and (max-width: 768px) {
	.banner h1 {
    	font-size: 50px;
	}
	.banner p {
    	font-size: 20px;
	}
	.newsletter-block,
	.page .newsletter,
	.page .social,
	.swiper-counter,
	.scroll-down,
	.slider-nav:before,
	.slider-nav:after,
	.logo,
	.music-bg .sound {
		display: none;
	}
	[data-tooltip]:after {
		display: none;
	}
	.section-slider:before,
	.about:after,
	.blog:after,
	.contact:after,
	.portfolio:after,
	.background:before {
		border: 35px solid rgba(14, 15, 16, .7);
	}
	h2 {
		font-size: 32px;
	}
	.preloader p,
	.preloader span {
		font-size: 30px;
	}
	.content {
		width: calc(100% - 70px);
		height: calc(100% - 70px);
		margin: 35px;	
	}
	.slider-section .content-box .inner {
		padding: 0 70px;
	}
	.slider-section .content-box .inner h1 {
	    font-size: 35px;
	}
	.slider-section .content-box .inner p {
		font-size: 12px;
	}
	.slider-nav {
		top: calc(50% - 15px);
		bottom: 0;
		-webkit-transform: translateY(-50%);
				transform: translateY(-50%);
	}
	.page-nav {
    	font-size: 12px;
	}
	.nav-up {
		top: 6px;
	}
	.nav-left {
		left: 6px;
	}
	.nav-right {
		right: 6px;
	}
	.nav-down {
	    bottom: 5px;
	}
	.nav-left-top {
    	top: 6px;
    	left: 6px;
	}
	.nav-left-down {
    	left: 6px;
   		bottom: 5px;
	}
	.nav-right-top {
    	top: 6px;
    	right: 6px;
	}
	.nav-right-down {
    	right: 6px;
    	bottom: 5px;
	}
	.page-zoom {
		top: 25%;
	}
	.animation-wrap {
		top: 35px;
	}
	.music-bg {
		width: 60px;
	}
	.bottom-panel {
		max-width: 190px;
	}
	.slider-control-wrap .left-side {
		margin: 0 15px;
	}
	.music-bg {
		right: 35px;
    	bottom: 35px;
	}
	.bottom-panel {
	    left: 35px;
    	bottom: 35px;
	}
	.box {
		padding: 15px;
	}
	.box h4 {
		text-align: center;	
	}
	.about .photo {
		margin-bottom: 20px;
	}
	.about .info-icon {
		padding-top: 20px;
	}
	.about .btn {
		position: relative;
		display: block;
		top: 0;
		right: 0;
		margin: 15px auto;
	}
	.mb-100 {
		margin-bottom: 50px !important;
	}
	.video {
		height: 200px;
	}
	.about .inter-icon {
		padding: 10px;
	}
	.about .inter-icon:before {
		height: 37px;
	}
	.about .inter-icon i {
		left: 7px;
		font-size: 16px;
		margin-left: 35px;
	}
	.about .desc-inter h6 {
		font-size: 14px;
    	line-height: 14px;
	}
	.testimonials {
    	min-height: 500px;
    	height: auto;
  	}
	.testimonial-item {
    	flex-direction: column;
	}
	.testimonial-img {
		-webkit-transform: translate(0, -10px);
    			transform: translate(0, -10px);
    	width: 95%;
	}
	.testimonial-content {
		left: 0;
    	margin-top: 60px;
    	text-align: center;
    	padding: 0 0;
	}
	.testimonial-content span {
		margin-bottom: 10px;
	}
	.testimonial-content .rating {
		display: block;
		float: none;
	}
	.testimonial-content p {
		margin-bottom: 0;
	}
	.testimonial-pagination {
		-webkit-transform: translateX(-50%);
				transform: translateX(-50%);
		left: 50% !important;
		top: 250px;
		width: 100% !important;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.testimonial-pagination .swiper-pagination-bullet {
		width: 11px;
		height: 5px;
	}
	.testimonial-pagination.swiper-pagination-bullets .swiper-pagination-bullet {
		margin: 0 3px;
	}
	.testimonial-pagination .swiper-pagination-bullet-active {
		height: 5px;
		width: 20px;
	}
	.about .experience .item {
		text-align: center;
	}
	.about .experience .item .main svg {
    	position: relative;
		right: 0;
    	margin-bottom: 10px;
	}
	.contact .contact-info .info i {
		margin: 0;
	}
	.contact .contact-info .info .desc p {
		font-size: 14px;
	}
	.blog .blog-item.two .head {
		display: none;	
	}
	.blog .blog-item.two h4,
	.blog .blog-item.two ul,
	.blog .blog-item.two .blog-btn {
		margin: 10px 0;
	}
	.blog-page .blog-head h1,
	.blog-list .blog-head h1 {
		font-size: 35px;
	}
	.blog-page .blog-head .content-head,
	.blog-list .blog-head .content-head {
		padding: 100px 0;
	}
	.blog-list .blog-post .main .thumbnail ul {
		padding: 10px;
	}
	.blog-list .pagination {
		margin-bottom: 50px;
	}
	.blog-page .blog-head .desc {
		display: block;
	}
	.blog-page .blog-head .desc span {
		margin-bottom: 15px;
		justify-content: center;
	}
	.blog-page .blog-head .desc span:after {
		display: none;
	}
	.blog-page .blog-comments,
	.blog-page .blog-comments ul li .comment-text a {
		margin: 0;
	}
	.blog-page .blog-comments ul li .comment-text p {
		font-size: 13px;
	}
	.blog-page .blog-comments ul li ul {
		margin-left: 10px;
	}
	.blog-page .blog-content .container {
		padding: 0 15px;
	}
}

@media screen and (max-height: 414px) {
	.animation-wrap,
	.slider-nav:before,
	.slider-nav:after,
	.newsletter-block,
	.page .newsletter,
	.page .social,
	.swiper-counter,
	.scroll-down {
		display: none;
	}
	.bottom-panel {
		max-width: 190px;
	}
	.slider-control-wrap .left-side {
		margin: 0 15px;
	}
}
@media screen and (max-width: 768px){
	.testimonial-item.swiper-slide-active .testimonial-content > *:nth-child(1) {
		float: none;
	}
}
@media screen and (max-width: 768px){
	p, h1, h2, h3, h4, h5, h6 {
		text-align: center;
	}
	.portfolio .portfolio-items .item figure figcaption h3, .contact .contact-info .info .desc p, .about .info p, .about .desc-icon h6, .about .desc-icon p, .about .desc-inter h6, .about .skill-item h5 {
		text-align: right;
	}
}
@media screen and (min-width: 769px){
	.contact .contact-info .info .desc {
		padding-top: 10px;
	}
}
/* ---------------------------------
		15. Animation
--------------------------------- */

/* Animation Music Line */
@-webkit-keyframes musicline {
    0% {height: 5px;}
    10% {height: 10px;}
    20% {height: 5px;}
    30% {height: 14px;}
    40% {height: 18px;}
    50% {height: 5px;}
    60% {height: 16px;}
    70% {height: 10px;}
    80% {height: 12px;}
    90% {height: 4px;}
    100% {height: 18px;}
}

@keyframes musicline {
    0% {height: 5px;}
    10% {height: 10px;}
    20% {height: 5px;}
    30% {height: 14px;}
    40% {height: 18px;}
    50% {height: 5px;}
    60% {height: 16px;}
    70% {height: 10px;}
    80% {height: 12px;}
    90% {height: 4px;}
    100% {height: 18px;}
}

/* Animation Mouse Scroll Dawn */
@-webkit-keyframes scroll {
	0% {
		opacity: 0;
	}
	10% {
		-webkit-transform: translateY(0);
				transform: translateY(0);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateY(10px);
				transform: translateY(10px);
		opacity: 0;
	}
}

@keyframes scroll {
	0% {
		opacity: 0;
	}
	10% {
		-webkit-transform: translateY(0);
				transform: translateY(0);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateY(10px);
				transform: translateY(10px);
		opacity: 0;
	}
}
/* Background Line Animation */ 
@-webkit-keyframes run {
	0% {
		top: -50%;
	}
	100% {
		top: 110%;
	}
}

@keyframes run {
	0% {
		top: -50%;
	}
	100% {
		top: 110%;
	}
}
/* Show Messages
=====================================================================*/
.gen {
    color: #2f9064;
    padding: 10px 10px;
    text-align: center;
    margin-bottom: 20px;
    direction: rtl;
}
.err {
	color: #ff0000;
    padding: 10px 10px;
    text-align: center;
    margin-bottom: 20px;
    direction: rtl;
}
/* center animation site */

.center {

	display: block;
	
	width: 50%;
	
	margin: auto;
	
	}

/* form page  */

#msform {
  width: 400px;
  margin: 50px auto;
  text-align: center;
  position: relative;
}
#msform fieldset {
  background: white;
  border: 0 none;
  border-radius: 3px;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  padding: 20px 30px;

  box-sizing: border-box;
  width: 80%;
  margin: 0 10%;

  /*stacking fieldsets above each other*/
  position: absolute;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
  display: none;
}
/*inputs*/
#msform input, #msform textarea {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
  color: #2C3E50;
  font-size: 13px;
}
/*buttons*/
#msform .action-button {
  width: 100px;
  background: #27AE60;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 1px;
  cursor: pointer;
  padding: 10px 5px;
  margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
  box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/
.fs-title {
  font-size: 15px;
  text-transform: uppercase;
  color: #2C3E50;
  margin-bottom: 10px;
}
.fs-subtitle {
  font-weight: normal;
  font-size: 13px;
  color: #666;
  margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
  margin-bottom: 30px;
  overflow: hidden;
  /*CSS counters to number the steps*/
  counter-reset: step;
}
#progressbar li {
  list-style-type: none;
  color: white;
  text-transform: uppercase;
  font-size: 9px;
  width: 33.33%;
  float: right;
  position: relative;
}
#progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 20px;
  line-height: 20px;
  display: block;
  font-size: 10px;
  color: #333;
  background: white;
  border-radius: 3px;
  margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
  content: '';
  width: 100%;
  height: 2px;
  background: white;
  position: absolute;
  right: -50%;
  top: 9px;
  z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
  /*connector not needed before the first step*/
  content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
  background: #27AE60;
  color: white;
}

/* Homepage Bottom Text */

.bottom-center-text {
    position: fixed;
    bottom: 15px;          /* distance from bottom */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 10px;
    color: #ffffff;        /* change color if needed */
    z-index: 9999;
    pointer-events: none;  /* prevents blocking clicks */
}


@media (max-width: 768px) {
    .bottom-center-text {
        position: fixed;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        font-size: 5px;
        color: #ffffff;
        z-index: 9999;
        pointer-events: none;

        
    }
}

/* Vertical Navigation Menu */

/* @import url("https://fonts.googleapis.com/css?family=Poppins:weght@200;300;400;500;600;700;800;900&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #333;
} */


.navigation {
  position: fixed; /* or absolute */
  left: 1px;
  top: 31%;
  transform: translateY(-50%) scale(0.8);
  transform-origin: left center;
}

.navigation ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.navigation ul li {
  position: relative;
  list-style: none;
  width: 70px;
  height: 70px;
  z-index: 1;
}

.navigation ul li a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #ffffff;
  font-weight: 500;
}
.navigation ul li a .icon {
  position: relative;
  display: flex;
  text-align: center;
  transition: 0.5s;
  width: 70px;
  height: 70px;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.navigation .nav-svg {
    width: 24px;
    height: 24px;

    display: block;              /* removes baseline shift */
    fill: currentColor;

    transform: translateY(1px);  /* optical centering fix */
}

.nav-svg.home {
    transform: translateY(2px);
}

@media (max-width:768px){
.navigation {
  position: fixed; /* or absolute */
  left: 1px;
  top: 34%;
  transform: translateY(-50%) scale(0.5);
  transform-origin: left center;
}

.navigation ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.navigation ul li {
  position: relative;
  list-style: none;
  width: 70px;
  height: 70px;
  z-index: 1;
}

.navigation ul li a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #ffffff;
  font-weight: 500;
}
.navigation ul li a .icon {
  position: relative;
  display: flex;
  text-align: center;
  transition: 0.5s;
  width: 70px;
  height: 70px;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.navigation .nav-svg {
    width: 24px;
    height: 24px;

    display: block;              /* removes baseline shift */
    fill: currentColor;

    transform: translateY(1px);  /* optical centering fix */
}
}



.navigation ul li.active a .icon {
  color: #beb5b5;
}
.navigation ul li a .icon i {
  font-size: 24px;
}
.navigation ul li a .title {
  position: absolute;
  top: 50%;
  left: 110px;
  background: #000000;
  transform: translateY(-50%);
  padding: 5px 10px;
  border-radius: 6px;
  transition: 0.5s;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
}
.navigation ul li:hover a .title {
  opacity: 1;
  visibility: visible;
  transform: translateX(-25px) translateY(-50%);
}
.navigation ul li a .title::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: #000000;
  left: -8px;
  top: 46%;
  transition: 0.5s;
  transform: rotate(45deg) translateY(-50%);
  border-radius: 2px;
}
.navigation ul .indicator {
  position: absolute;
  left: 0;
  width: 70px;
  height: 70px;
  transition: 0.5s;
}
.navigation ul .indicator::before {
  content: "";
  position: absolute;
  width: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 50px;
  background: #333;
  border-radius: 50%;
  transition: 0.5s;
}
.navigation ul li:nth-child(1).active ~ .indicator {
  transform: translateY(calc(70px * 0));
}
.navigation ul li:nth-child(2).active ~ .indicator {
  transform: translateY(calc(70px * 1));
}
.navigation ul li:nth-child(3).active ~ .indicator {
  transform: translateY(calc(70px * 2));
}
.navigation ul li:nth-child(4).active ~ .indicator {
  transform: translateY(calc(70px * 3));
}
.navigation ul li:nth-child(5).active ~ .indicator {
    transform: translateY(calc(70px * 4));
}
.navigation ul li:nth-child(6).active ~ .indicator {
  transform: translateY(calc(70px * 5));
}

.navigation ul li a .fa-instagram {
    transition: color 0.3s ease;
}

.navigation ul li:hover a .fa-instagram {
    color: #E1306C;
}

.navigation ul li:hover a .fa-whatsapp {
    color: #25D366;
}

.navigation ul li:hover a .fa-linkedin {
    color: #1c72e2;
}


/* SVG icons – same size as Font Awesome */
.navigation .icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.navigation .nav-svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    display: block;
}

.navigation li:hover .nav-svg.instagram {
    color: #E1306C;
}

.navigation li:hover .nav-svg.whatsapp {
    color: #25D366;
}

.navigation li:hover .nav-svg.linkedin {
    color: #1c72e2;
}

.navigation li:hover .nav-svg.bale {
    color: #0CBC8D;
}

.navigation li:hover .nav-svg.enamad {
    color: #0761d6;
}

.navigation li:hover .nav-svg.eitaa {
    color: #fc9535;
}

.navigation .nav-svg {
    transition: color 0.25s ease;
}


/* Magnetic icon base */
.navigation .icon {
    transition: transform 0.2s ease-out;
    will-change: transform;
}

/* Smooth reset when mouse leaves */
.navigation .list:not(:hover) .icon {
    transform: translate(0, 0);
}


/* form */

#malito-job-wrapper {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    width: 100dvw;
    height: 100dvh;

    max-width: 100%;
    max-height: 100%;

    background: #310a15be;
    z-index: 1000;
    direction: rtl;
    overflow: hidden;
    box-sizing: border-box;
}

#malito-job-form {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step {
    width: 100%;
    max-width: 900px;
    padding: 40px;

    display: none;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(162, 28, 66, 0.432) 0,
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(162, 28, 66, 0.329) 0,
            transparent 30%
        ),
        #030303;

    border: 2px solid #a21c43;
    border-radius: 18px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.45),
        inset 0 0 40px rgba(162, 28, 67, 0.025);

    position: relative;
    overflow: hidden;

    animation: malitoBorderGlow 2s linear infinite;
}

@keyframes malitoBorderGlow {
  0% {
    border-color: #a21c43;
    box-shadow: 0 0 8px rgba(162, 28, 67, 0.35);
  }
  50% {
    border-color: #a21c43;
    box-shadow: 0 0 18px rgba(165, 30, 63, 0.7);
  }
  100% {
    border-color: #a21c43;
    box-shadow: 0 0 8px rgba(162, 28, 67, 0.35);
  }
}

.step.active {
  display: block;
}

.step h2 {
  font-size: 17px;
  margin-bottom: 20px;
  color: #ffffff;
}

.step input,
.step textarea,
.step select {
  width: 100%;
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: myfont;
}

.nav {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

button {
  background: #00c52b;
  color: #fff;
  padding: 12px 26px;
  border-radius: 40px;
  border: none;
  cursor: pointer;
}

button.prev {
  background: #777;
}

/* PROGRESS */
.malito-progress-wrapper {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
}

.malito-progress-bar {
  width: 100%;
  height: 4px;
  background: #eee;
  border-radius: 2px;
  overflow: hidden;
}

.malito-progress-bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: #000;
  transition: width .4s ease;
}

.malito-progress-text {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-top: 8px;
}

/* Base */
.field {
  position: relative;
  width: 100%;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 14px 12px;
  border-radius: 10px;
  border: 1.5px solid #ccc;
  font-size: 14px;
  background:transparent;           /* ensure background is white */
  color: #ffffff;                /* dark text for visibility */
  transition: all 0.3s ease;
  cursor: pointer;
}

.field label {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: #000000;
  padding: 0 6px;
  color: #888;
  font-size: 13px;
  pointer-events: none;
  transition: 0.25s ease;
}

.field select {
  background-color: #111;  /* dark box */
  color: #fff;             /* text inside select */
  border-radius: 10px;
  border: 1.5px solid #ccc;
  padding: 14px 12px;
  appearance: none;
  cursor: pointer;
}

.field select option {
  background-color: #fff;  /* dropdown options background */
  color: #111;             /* text inside options */
}

/* Optional: hover effect for Chrome/Safari/Edge */
.field select option:hover {
  background-color: #25ca7f;
  color: #fff;
}

.field select:valid {
  background-image: none; /* hide the arrow once a valid option is selected */
}


/* Floating */
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field select:focus + label,
.field select:valid + label {
  top: -6px;
  font-size: 11px;
  color: #ffffff;
}

/* Focus */
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
  color: #ffffff;               /* text color stays dark on focus */
}


.fields-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }


/* Hidden Field Animation - Polished Version Keeping Original Structure */
.collapsible {
    display: none; /* hidden initially, removes grid space */
    opacity: 0;
    transform: translateY(-12px); /* start slightly above */
    transition: opacity 0.35s cubic-bezier(0.4,0,0.2,1),
                transform 0.35s cubic-bezier(0.4,0,0.2,1);
}

.collapsible.show {
    display: block;   /* layout restored */
    opacity: 1;
    transform: translateY(0); /* smoothly slides into place */
}

/* Optional: smoother floating labels for newly revealed fields */
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field select:focus + label,
.field select:valid + label {
    top: -6px;
    font-size: 11px;
    color: #ffffff;
}


/* Tablet */
@media (max-width: 1024px) {
  .fields-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 640px) {
  .fields-grid {
    grid-template-columns: 1fr;
  }

  .span-2,
  .span-3 {
    grid-column: span 1;
  }
}

/* Base style (same as inputs) */
.field select {
  width: 100%;
  padding: 14px 12px;
  border-radius: 10px;
  border: 1.5px solid #ccc;
  font-size: 14px;
  background: transparent;
  appearance: none; /* removes default arrow styling */
  transition: all 0.3s ease;
  cursor: pointer;
}

/* =========================================================
   JOB NAVIGATION BUTTONS
   Always stay in the same position
   ========================================================= */

.job-next,
.job-prev {

    padding: 10px 22px;

    border-radius: 999px;

    border: none;

    cursor: pointer;

    font-weight: 500;

    transition: 0.3s;

    /*
     * Prevent the buttons from changing size
     */
    flex-shrink: 0;

    /*
     * Prevent text/content from moving the button
     */
    white-space: nowrap;
}


/* =========================================================
   JOB NAVIGATION
   Both buttons side-by-side on the left
   ========================================================= */

.job-navigation {

    width: 100%;

    height: 20px;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 10px;

    position: relative;

    flex-shrink: 0;

    margin-top: 20px;
	
}


/* =========================================================
   BUTTONS
   ========================================================= */

.job-next,
.job-prev {

    padding: 10px 22px;

    border-radius: 999px;

    border: none;

    cursor: pointer;

    font-weight: 500;

    white-space: nowrap;

    flex-shrink: 0;

    /*
     * Prevent surrounding content
     * from changing their position
     */
    position: relative;

    margin: 0;

    transition: 0.3s;
}

.job-next {
    background: linear-gradient(135deg,#65d730,#359c0c);
    color: #fff;
}

.job-next:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 235, 103, 0.3);
}

.job-next.disabled {
    opacity: 0.5;
    pointer-events: none;
}
.job-prev {
    background: linear-gradient(135deg,#ff3c00,#fc746f);
    color: #fff;
}

.job-prev:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(235, 133, 37, 0.3);
}

.job-prev.disabled {
    opacity: 0.5;
    pointer-events: none;
}


#malito-job-wrapper button {
  cursor: pointer !important;
}

#malito-job-wrapper .magnetic {
  transform: none !important;
}

.step {
  opacity: 0;
  transform: translateY(30px);
  transition: all .4s ease;
}

.step.active {
  opacity: 1;
  transform: translateY(0);
}

.malito-progress-bar span {
  background: linear-gradient(90deg, #25ca7f, #11d27a);
  box-shadow: 0 0 12px rgba(37, 202, 127, 0.6);
  border-radius: 2px; /* rounds the fill */
}

.step input:focus,
.step textarea:focus,
.step select:focus {
  border-color: #25ca7f;
  box-shadow: 0 0 0 2px rgba(37, 202, 127, 0.2);
}

button.next,
button.submit {
  background: #25ca7f;
}

button.prev {
  background: transparent;
  color: #aaa;
  border: 1px solid #444;
}



@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}

/* Grid container */
.fields-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-bottom: 20px;
}

/* Make inputs fill grid cells */
.fields-grid input,
.fields-grid select,
.fields-grid textarea {
  width: 100%;
}

/* Larger fields (optional) */
.fields-grid .span-2 {
  grid-column: span 2;
}

.fields-grid .span-3 {
  grid-column: span 3;
}


/* Responsive: tablet */
@media (max-width: 1024px) {
  .fields-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Responsive: mobile */
@media (max-width: 640px) {
  .fields-grid {
    grid-template-columns: 1fr;
  }
}

/* Phone number RTL fix */
input[type="tel"] {
  direction: ltr;
  text-align: right;
}

/* Contact close button */
.hover-news-close {
  position: absolute;
  top: 24px;
  left: 24px;

  width: 42px;
  height: 42px;
  border-radius: 50%;

  background: rgba(0, 0, 0, 0);
  color: #fff;
  font-size: 20px;
  line-height: 42px;
  text-align: center;

  cursor: pointer;
  z-index: 10001;
  border: none;

  transition: transform .25s ease, background .25s ease;
}

.hover-news-close {
  position: fixed !important;
  top: 30px;
  left: 30px;
  z-index: 99999 !important;

  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.job-next.disabled:active {
  animation: shake 0.3s;
}


/* Newsletter / Contact animation states */
.newsletter-block {
  transition: opacity 0.45s ease, transform 0.45s ease;
  opacity: 0;
  transform: translateY(40px);
  pointer-events: none;
}

/* Open state (supports both systems) */
.newsletter-block.open,
.newsletter-block.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Closing state (used for animation) */
.newsletter-block.closing {
  opacity: 0;
  transform: translateY(40px);
  pointer-events: none;
}

/* 404 page */

#notfound {
  position: relative;
  align-items: center;
  height: 100vh;
}

#notfound .notfound {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#notfound .notfound-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

#notfound .notfound-bg>div {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #a21c43;
}

#notfound .notfound-bg>div:nth-child(1) {
  left: 20%;
}

#notfound .notfound-bg>div:nth-child(2) {
  left: 40%
}

#notfound .notfound-bg>div:nth-child(3) {
  left: 60%
}

#notfound .notfound-bg>div:nth-child(4) {
  left: 80%
}

#notfound .notfound-bg>div:after {
  content: '';
  position: absolute;
  top: 0px;
  left: -0.5px;
  -webkit-transform: translateY(-160px);
      -ms-transform: translateY(-160px);
          transform: translateY(-160px);
  height: 160px;
  width: 2px;
  background-color: #00ffc0;
}

@-webkit-keyframes drop {
  90% {
    height: 20px;
  }
  100% {
    height: 160px;
    -webkit-transform: translateY(calc(100vh + 160px));
            transform: translateY(calc(100vh + 160px));
  }
}

@keyframes drop {
  90% {
    height: 20px;
  }
  100% {
    height: 160px;
    -webkit-transform: translateY(calc(100vh + 160px));
            transform: translateY(calc(100vh + 160px));
  }
}

#notfound .notfound-bg>div:nth-child(1):after {
  -webkit-animation: drop 3s infinite linear;
          animation: drop 3s infinite linear;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

#notfound .notfound-bg>div:nth-child(2):after {
  -webkit-animation: drop 2s infinite linear;
          animation: drop 2s infinite linear;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

#notfound .notfound-bg>div:nth-child(3):after {
  -webkit-animation: drop 3s infinite linear;
          animation: drop 3s infinite linear;
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

#notfound .notfound-bg>div:nth-child(4):after {
  -webkit-animation: drop 2s infinite linear;
          animation: drop 2s infinite linear;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

.notfound {
  max-width: 520px;
  width: 100%;
  text-align: center;
}

.notfound .notfound-404 {
  height: 210px;
  line-height: 210px;
}

.notfound .notfound-404 h1 {
  font-family: 'IranSans', sans-serif;
  font-size: 188px;
  font-weight: 700;
  margin: 0px;
  text-shadow: 4px 4px 0px #00ffc0;
  display: inline;

}

.notfound h2 {
  font-size: 42px;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  display: inline;
}

.notfound p {
  color: #ffffff;
  font-weight: 400;
  margin-top: 20px;
  margin-bottom: 25px;
  display: inline-block;
}

.notfound a {
  padding: 10px 30px;
  display: inline-block;
  color: #ffffff;
  font-weight: 400;
  text-transform: uppercase;
  -webkit-box-shadow: 0px 0px 0px 2px #000, 2px 2px 0px 2px #00ffc0;
          box-shadow: 0px 0px 0px 2px #000, 2px 2px 0px 2px #00ffc0;
  text-decoration: none;
  -webkit-transition: 0.2s all;
  transition: 0.2s all;
}

.notfound a:hover {
  background-color: #00ffc0;
  -webkit-box-shadow: 0px 0px 0px 0px #000, 0px 0px 0px 2px #00ffc0;
          box-shadow: 0px 0px 0px 0px #000, 0px 0px 0px 2px #00ffc0;
}

.notfound-social {
  margin-top: 35px;
}

.notfound-social>a {
  width: 40px;
  height: 40px;
  line-height: 40px;
  padding: 0px;
  margin: 0px 5px;
}

.notfound-social>a:hover {
  background-color: #00ffc0;
  -webkit-box-shadow: 0px 0px 0px 0px #000, 0px 0px 0px 2px #00ffc0;
          box-shadow: 0px 0px 0px 0px #000, 0px 0px 0px 2px #00ffc0;
}

@media only screen and (max-width: 480px) {
  .notfound .notfound-404 {
    height: 122px;
    line-height: 122px;
  }
  .notfound .notfound-404 h1 {
    font-size: 122px;
  }
  .notfound h2 {
    font-size: 26px;
  }
}

/* radial menu*/
.animation-wrap{
    position:relative;
}

/* Main SVG must stay above */
.animation-wrap>svg{
    position:relative;
    z-index:100;
}

.gooey-menu{

    position:absolute;

    left:50%;

    top:50%;

    width:0;

    height:0;

    transform:translate(-50%,-50%);

    filter:url(#goo);

    pointer-events:none;

}

.goo-item{

    --radius:125px;

    position:absolute;

    left:0;

    top:0;

    width:58px;

    height:58px;

    margin:-29px;

    border-radius:50%;

    background:#fff;

    color:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    font-size:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.15);

    opacity:0;

    pointer-events:auto;

    transition:
        transform .65s cubic-bezier(.22,1.3,.3,1),
        opacity .35s,
        background .3s;

    transform:translate(0,0) scale(.4);

}

.animation-wrap:hover .goo-item{

    opacity:1;

    transform:
        translate(
            calc(cos(var(--angle)) * var(--radius)),
            calc(sin(var(--angle)) * var(--radius))
        )
        scale(1);

}

/* stagger */

.goo-item:nth-child(2){transition-delay:.05s;}
.goo-item:nth-child(3){transition-delay:.10s;}
.goo-item:nth-child(4){transition-delay:.15s;}
.goo-item:nth-child(5){transition-delay:.20s;}
.goo-item:nth-child(6){transition-delay:.25s;}

.goo-item:hover{

    background:#bfd730;

    transform:
        translate(
            calc(cos(var(--angle)) * var(--radius)),
            calc(sin(var(--angle)) * var(--radius))
        )
        scale(1.15);

}

.goo-item span{

    position:absolute;

    top:72px;

    left:50%;

    transform:translateX(-50%);

    white-space:nowrap;

    background:#111;

    color:#fff;

    font-size:12px;

    padding:6px 12px;

    border-radius:30px;

    opacity:0;

    transition:.25s;

    pointer-events:none;

}

.goo-item:hover span{

    opacity:1;

}



/* Individual colors */
.goo-item:nth-child(1) {
    background: rgba(76, 175, 80, 0.55);
}

.goo-item:nth-child(2) {
    background: rgba(76, 175, 80, 0.55);
}

.goo-item:nth-child(3) {
    background: rgba(25, 97, 174, 0.55);
}

.goo-item:nth-child(4) {
    background: rgba(133, 155, 10, 0.55);
}

.goo-item:nth-child(5) {
    background: rgba(250, 166, 26, 0.55);
}

.goo-item:nth-child(6) {
    background: rgba(28, 94, 86, 0.55);
}

.goo-item:nth-child(7) {
    background: rgba(162, 28, 67, 0.55);
}

.animation-wrap{
    position:relative;
}

.animation-wrap::before{
    content:"";
    position:absolute;

    width:380px;      /* Increase if needed */
    height:280px;     /* Covers the entire radial menu */

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    background:transparent;
}

/* کالج آپادانا */
.goo-item:nth-child(7) span{
    top:50%;
    left:62px;
    transform:translateY(-50%);
}

/* آکادمی زبان آپادانا */
.goo-item:nth-child(6) span{
    top:50%;
    left:62px;
    transform:translateY(-50%);
}

/* برنامه نویسی آپادانا */
.goo-item:nth-child(2) span{
    top:50%;
	left:auto;
    right:62px;
    transform:translateY(-50%);
}

/* بازرگانی آپادانا */
.goo-item:nth-child(3) span{
    top:50%;
	left:auto;
    right:62px;
    transform:translateY(-50%);
}

.themeboxdisplay{
	display: none;
}


/* form css */

/* =========================================================
   RESPONSIVE FIXES FOR ALL SCREEN SIZES
========================================================= */


/* ===========================
   Large Screens (1200px+)
=========================== */

@media (min-width:1200px){

    #malito-job-form {
        padding: 40px;
    }

    .step {
        max-width: 900px;
        padding: 40px;
    }

    .fields-grid {
        grid-template-columns: repeat(3,1fr);
        gap: 25px;
    }

}


/* ===========================
   Laptop / Small Desktop
=========================== */

@media (max-width:1199px){

    #malito-job-wrapper {
        overflow-y:auto;
    }


    .step {
        width:90%;
        max-width:800px;
        padding:35px;
    }


    .fields-grid {
        grid-template-columns:repeat(2,1fr);
    }


    .span-3 {
        grid-column:span 2;
    }


    .newsletter-block .main {
        height:auto;
        min-height:100vh;
        padding:40px;
    }

}



/* ===========================
   Tablet
=========================== */

@media (max-width:768px){

    #malito-job-wrapper {
        padding:20px;
        overflow-y:auto;
    }


    #malito-job-form {

        min-height:100vh;
        align-items:flex-start;
        padding-top:70px;

    }


    .step {

        width:100%;
        max-width:none;
        padding:25px;
        border-radius:15px;

    }


    .step h2 {

        font-size:20px;
        margin-bottom:18px;

    }


    .fields-grid {

        grid-template-columns:1fr;
        gap:18px;

    }


    .span-2,
    .span-3 {

        grid-column:span 1;

    }


    .field input,
    .field textarea,
    .field select {

        padding:13px 12px;
        font-size:14px;

    }


    .nav {

        flex-direction:column;
        gap:10px;

    }


    .job-next,
    .job-prev {

        width:100%;
        padding:13px;

    }


    .malito-progress-wrapper {

        top:20px;
        width:90%;

    }


    .hover-news-close {

        top:15px;
        left:15px;

        width:38px;
        height:38px;

        font-size:18px;

    }


}



/* ===========================
   Mobile Phones
=========================== */

@media (max-width:480px){


    #malito-job-wrapper {

        padding:12px;

    }


    #malito-job-form {

        padding-top:60px;

    }


    .step {

        padding:18px;
        border-radius:12px;
        border-width:1px;

    }


    .step h2 {

        font-size:18px;
        text-align:center;

    }


    .field label {

        font-size:12px;

    }


    .field input,
    .field textarea,
    .field select {

        padding:12px 10px;
        border-radius:8px;

    }


    .malito-progress-text {

        font-size:11px;

    }


    button {

        font-size:14px;

    }



}



/* ===========================
   Very Small Phones
   320px - 360px
=========================== */

@media (max-width:360px){


    #malito-job-wrapper {

        padding:8px;

    }


    .step {

        padding:15px;

    }


    .step h2 {

        font-size:16px;

    }


    .field input,
    .field textarea,
    .field select {

        font-size:13px;

    }


}



/* ===========================
   Fix Newsletter Container
=========================== */


.newsletter-block {

    overflow-y:auto;

}


.newsletter-block .main {

    height:auto;
    min-height:100vh;

}



/* Prevent horizontal overflow */





/* Fix long text fields */

textarea {

    resize:vertical;
    min-height:100px;

}

/* =========================================================
   FIX FORM HEIGHT RESPONSIVENESS
========================================================= */


#malito-job-wrapper {
    min-height:100vh;
    height:auto;
    overflow-y:auto;
}


#malito-job-form {

    height:auto;
    min-height:100vh;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:40px 20px;

}



.step {

    height:auto;
    min-height:0;
    max-height:none;

    overflow:visible;

}



/* When content is taller than screen */
@media(max-height:800px){

    #malito-job-form {

        align-items:flex-start;
        padding-top:70px;
        padding-bottom:40px;

    }

}



/* Tablet */
@media(max-width:768px){

    #malito-job-form {

        padding:70px 15px 30px;

    }


    .step {

        height:auto;
        padding:25px;

    }

}



/* Mobile */
@media(max-width:480px){

    #malito-job-form {

        padding:60px 10px 20px;

    }


    .step {

        padding:18px;
        height:auto;

    }

}

.newsletter-block .main {
    height:auto;
    min-height:100vh;
}

#malito-job-form {
    height:auto;
}

.step-header {
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}


.step-header h2 {
    margin:0;
    font-size:18px;
    color:#fff;
}


#step-counter {
    font-size:14px;
    color:#aaa;
}

/* custom drop down*/

.telegram-input {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: plaintext;
}

.instagram-input {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: plaintext;
}

.email-input {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: plaintext;
}


/* =========================================================
   TERMS FIELD
========================================================= */

.terms-field {
    position: relative;
    width: 100%;
}


/* =========================================================
   CHECKBOX ROW
========================================================= */

.checkbox-label {
    display: flex !important;

    flex-direction: row;

    align-items: center;

    justify-content: flex-start;

    gap: 8px;

    width: 100%;

    direction: rtl;

    box-sizing: border-box;

    position: static !important;

    cursor: pointer;
}


/* =========================================================
   TERMS TEXT
========================================================= */

.checkbox-label .terms-text {
    position: static !important;

    display: inline-block;

    width: auto;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    direction: rtl;

    text-align: right;

    color: #fff;

    font-size: 14px;

    line-height: 1.8;

    cursor: pointer;
}


/* =========================================================
   CHECKBOX
========================================================= */

.checkbox-label input[type="checkbox"] {

    position: static !important;

    flex: 0 0 auto;

    width: 16px !important;
    height: 16px !important;

    min-width: 16px;
    min-height: 16px;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 1 !important;

    appearance: auto !important;

    cursor: pointer;

    transform: none !important;

    accent-color: #bfd730;
}


/* =========================================================
   ERROR STATE
========================================================= */

.terms-field.error
.checkbox-label input[type="checkbox"] {
    outline: 1px solid #ff4d4d;
    outline-offset: 2px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 576px) {

    .checkbox-label {
        align-items: flex-start;
        gap: 7px;
    }

    .checkbox-label .terms-text {
        font-size: 12px;
        line-height: 1.7;
    }

    .checkbox-label input[type="checkbox"] {
        margin-top: 4px !important;
    }
}

/* =========================================================
   MALITO SUCCESS NOTIFICATION
   ========================================================= */

.malito-success-notification {

    position: fixed;

    top: 25px;
    right: 25px;

    width: min(380px, calc(100vw - 30px));

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 14px 16px;

    box-sizing: border-box;

    direction: rtl;
    text-align: right;

    background:
        linear-gradient(
            135deg,
            rgba(3, 3, 3, 0.98),
            rgba(15, 18, 3, 0.98)
        );

    border:
        1px solid rgba(191, 215, 48, 0.7);

    border-radius: 12px;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.45),
        0 0 20px rgba(191, 215, 48, 0.08);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(-10px)
        scale(0.98);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;

    z-index: 999999;

    pointer-events: none;
}


/* =========================================================
   SHOW
   ========================================================= */

.malito-success-notification.show {

    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   SUCCESS ICON
   ========================================================= */

.malito-success-icon {

    width: 30px;
    height: 30px;

    min-width: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #bfd730;

    color: #030303;

    font-size: 16px;
    font-weight: 700;
}


/* =========================================================
   TEXT
   ========================================================= */

.malito-success-content {

    display: flex;
    flex-direction: column;

    gap: 3px;

    line-height: 1.6;

    direction: rtl;
    text-align: right;
}

.malito-success-content strong {

    color: #fff;

    font-size: 13px;
    font-weight: 700;

    direction: rtl;
    text-align: right;
}

.malito-success-content span {

    color:
        rgba(255, 255, 255, 0.72);

    font-size: 11px;

    direction: rtl;
    text-align: right;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .malito-success-notification {

        top: 15px;
        right: 15px;

        width:
            calc(100vw - 30px);
    }

}


/* =========================================================
   MALITO ERROR NOTIFICATION
   Same style as success notification — RED
   ========================================================= */

.malito-error-notification {

    position: fixed;

    top: 25px;
    right: 25px;

    width: min(380px, calc(100vw - 30px));

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 14px 16px;

    box-sizing: border-box;

    direction: rtl;
    text-align: right;

    background:
        linear-gradient(
            135deg,
            rgba(3, 3, 3, 0.98),
            rgba(18, 3, 3, 0.98)
        );

    border:
        1px solid rgba(220, 38, 38, 0.7);

    border-radius: 12px;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.45),
        0 0 20px rgba(220, 38, 38, 0.08);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(-10px)
        scale(0.98);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;

    z-index: 999999;

    pointer-events: none;
}


/* =========================================================
   SHOW
   ========================================================= */

.malito-error-notification.show {

    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   ERROR ICON
   ========================================================= */

.malito-error-icon {

    width: 30px;
    height: 30px;

    min-width: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #dc2626;

    color: #ffffff;

    font-size: 16px;
    font-weight: 700;
}


/* =========================================================
   ERROR TEXT
   ========================================================= */

.malito-error-content {

    display: flex;
    flex-direction: column;

    gap: 3px;

    line-height: 1.6;

    direction: rtl;
    text-align: right;
}


.malito-error-content strong {

    color: #fff;

    font-size: 13px;
    font-weight: 700;

    direction: rtl;
    text-align: right;
}


.malito-error-content span {

    color:
        rgba(255, 255, 255, 0.72);

    font-size: 11px;

    direction: rtl;
    text-align: right;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .malito-error-notification {

        top: 15px;
        right: 15px;

        width:
            calc(100vw - 30px);
    }

}


/* =========================================================
   MAP CSS
   ========================================================= */

#apadana-map {
    width: 100%;
    height: 200px;
    min-height: 200px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

@media (max-width: 991px) {
    #apadana-map {
        height: 350px;
    }
}

@media (max-width: 576px) {
    #apadana-map {
        height: 280px;
    }
}


/* USER PROFILE DEACTIVATED */

/* #user-profile-nav {
    pointer-events: none;
    cursor: default;
} */

.profile-nav-text {
    font-size: 14px;
}

/* FORM RESPONSIVE */

/* =========================================================
   MOBILE / SMALL SCREEN ONLY
   ========================================================= */

@media (max-width: 640px) {

    /* -----------------------------------------------------
       FORM CONTAINER
       ----------------------------------------------------- */

    #malito-job-wrapper {
        width: 100%;
        height: 100%;
        width: 100dvw;
        height: 100dvh;

        max-width: 100vw;
        max-height: 100dvh;

        overflow: hidden;
        box-sizing: border-box;
    }


    #malito-job-form {
        width: 100%;
        height: 100%;

        min-height: 0;

        padding: 10px;

        display: flex;
        align-items: flex-start;
        justify-content: center;

        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       STEP / FORM PANEL

       The panel itself scrolls on mobile.
       ----------------------------------------------------- */

    .step {
        width: 100%;
        max-width: none;

        /*
         * Keep the entire panel inside the viewport.
         */
        height: auto;
        max-height: calc(100dvh - 20px);

        /*
         * Allow the fields + navigation to scroll.
         */
        overflow-y: auto;
        overflow-x: hidden;

        /*
         * Prevent padding from increasing the width.
         */
        box-sizing: border-box;

        padding: 24px 18px 28px;

        border-radius: 14px;

        /*
         * Make sure the scrollbar doesn't cause
         * horizontal overflow.
         */
        scrollbar-width: thin;

        /*
         * Allows scrolling to the very bottom,
         * including the navigation buttons.
         */
        padding-bottom: 35px;
    }


    /* -----------------------------------------------------
       FIELDS GRID

       Mobile = every field occupies the FULL ROW.

       We deliberately use a 3-column grid here so that
       "span-3" has an actual meaning.
       ----------------------------------------------------- */

    .fields-grid {
        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 16px;

        margin-bottom: 20px;

        box-sizing: border-box;
    }


    /*
     * EVERY field gets span-3 on mobile.
     */

    .fields-grid > .field {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
    }


    /*
     * Override any existing span-2 / span-3
     * declarations so they ALWAYS occupy
     * the complete mobile row.
     */

    .fields-grid .span-2,
    .fields-grid .span-3 {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
    }


    /*
     * Make the actual controls fit their
     * full-width grid cell.
     */

    .fields-grid input,
    .fields-grid select,
    .fields-grid textarea,
    .field input,
    .field select,
    .field textarea {
        width: 100%;
        max-width: 100%;

        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       MOBILE FIELD SPACING
       ----------------------------------------------------- */

    .field {
        width: 100%;
        min-width: 0;
    }

    .field input,
    .field select,
    .field textarea {
        padding: 13px 12px;
        font-size: 14px;
    }


    /* -----------------------------------------------------
       NAVIGATION

       NEXT + PREVIOUS ALWAYS SIDE BY SIDE.
       ----------------------------------------------------- */

    .job-navigation {
        width: 100%;

        height: auto;
        min-height: 44px;

        display: flex;

        flex-direction: row;

        align-items: center;

        /*
         * Side-by-side rather than stacking.
         */
        justify-content: space-between;

        gap: 8px;

        margin-top: 12px;
        padding: 0;

        box-sizing: border-box;

        flex-shrink: 0;
    }


    /* -----------------------------------------------------
       BUTTONS
       ----------------------------------------------------- */

    .job-navigation .job-next,
    .job-navigation .job-prev {

        /*
         * Each button gets approximately half
         * of the available navigation width.
         */
        flex: 1 1 0;

        width: auto;
        max-width: none;

        min-width: 0;

        min-height: 44px;

        padding: 10px 14px;

        margin: 0;

        font-size: 14px;

        white-space: nowrap;

        display: flex;
        align-items: center;
        justify-content: center;

        box-sizing: border-box;

        flex-shrink: 1;
    }


    /* -----------------------------------------------------
       PREVENT GLOBAL BUTTON RULES FROM INTERFERING
       ----------------------------------------------------- */

    #malito-job-wrapper .job-navigation button {
        position: relative;

        margin: 0;

        transform: none;
    }


    /* -----------------------------------------------------
       SMALLER FIELD GAP
       ----------------------------------------------------- */

    .fields-grid {
        row-gap: 14px;
    }
}


/* =========================================================
   MOBILE / SMALL SCREEN ONLY
   ========================================================= */

@media (max-width: 640px) {

    /* -----------------------------------------------------
       FORM CONTAINER
       ----------------------------------------------------- */

    #malito-job-wrapper {
        width: 100%;
        height: 100%;
        width: 100dvw;
        height: 100dvh;

        max-width: 100vw;
        max-height: 100dvh;

        overflow: hidden;
        box-sizing: border-box;
    }


    #malito-job-form {
        width: 100%;
        height: 100%;

        min-height: 0;

        padding: 10px;

        display: flex;
        align-items: flex-start;
        justify-content: center;

        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       STEP / FORM PANEL

       The panel itself scrolls on mobile.
       ----------------------------------------------------- */

    .step {
        width: 100%;
		
        max-width: none;

        /*
         * Keep the entire panel inside the viewport.
         */
        height: auto;
        max-height: calc(100dvh - 20px);

        /*
         * Allow the fields + navigation to scroll.
         */
        overflow-y: auto;
        overflow-x: hidden;

        /*
         * Prevent padding from increasing the width.
         */
        box-sizing: border-box;

        padding: 24px 18px 28px;

        border-radius: 14px;

        /*
         * Make sure the scrollbar doesn't cause
         * horizontal overflow.
         */
        scrollbar-width: thin;

        /*
         * Allows scrolling to the very bottom,
         * including the navigation buttons.
         */
        padding-bottom: 35px;
        padding-top: 35px;
        margin-top: 35px;
    }


    /* -----------------------------------------------------
       FIELDS GRID

       Mobile = every field occupies the FULL ROW.

       We deliberately use a 3-column grid here so that
       "span-3" has an actual meaning.
       ----------------------------------------------------- */

    .fields-grid {
        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 16px;

        margin-bottom: 20px;

        box-sizing: border-box;
    }


    /*
     * EVERY field gets span-3 on mobile.
     */

    .fields-grid > .field {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
    }


    /*
     * Override any existing span-2 / span-3
     * declarations so they ALWAYS occupy
     * the complete mobile row.
     */

    .fields-grid .span-2,
    .fields-grid .span-3 {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
    }


    /*
     * Make the actual controls fit their
     * full-width grid cell.
     */

    .fields-grid input,
    .fields-grid select,
    .fields-grid textarea,
    .field input,
    .field select,
    .field textarea {
        width: 100%;
        max-width: 100%;

        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       MOBILE FIELD SPACING
       ----------------------------------------------------- */

    .field {
        width: 100%;
        min-width: 0;
    }

    .field input,
    .field select,
    .field textarea {
        padding: 13px 12px;
        font-size: 14px;
    }


    /* -----------------------------------------------------
       NAVIGATION

       NEXT + PREVIOUS ALWAYS SIDE BY SIDE.
       ----------------------------------------------------- */

    .job-navigation {
        width: 100%;

        height: auto;
        min-height: 44px;

        display: flex;

        flex-direction: row;

        align-items: center;

        /*
         * Side-by-side rather than stacking.
         */
        justify-content: space-between;

        gap: 8px;

        margin-top: 12px;
        padding: 0;

        box-sizing: border-box;

        flex-shrink: 0;
    }


    /* -----------------------------------------------------
       BUTTONS
       ----------------------------------------------------- */

    .job-navigation .job-next,
    .job-navigation .job-prev {

        /*
         * Each button gets approximately half
         * of the available navigation width.
         */
        flex: 1 1 0;

        width: auto;
        max-width: none;

        min-width: 0;

        min-height: 44px;

        padding: 10px 14px;

        margin: 0;

        font-size: 14px;

        white-space: nowrap;

        display: flex;
        align-items: center;
        justify-content: center;

        box-sizing: border-box;

        flex-shrink: 1;
    }


    /* -----------------------------------------------------
       PREVENT GLOBAL BUTTON RULES FROM INTERFERING
       ----------------------------------------------------- */

    #malito-job-wrapper .job-navigation button {
        position: relative;

        margin: 0;

        transform: none;
    }


    /* -----------------------------------------------------
       SMALLER FIELD GAP
       ----------------------------------------------------- */

    .fields-grid {
        row-gap: 14px;
    }
}


/* =========================================================
   MOBILE / SMALL SCREEN ONLY
   ========================================================= */

@media (max-width: 640px) {

    /* -----------------------------------------------------
       FORM CONTAINER
       ----------------------------------------------------- */

    #malito-job-wrapper {
        width: 100%;
        height: 100%;
        width: 100dvw;
        height: 100dvh;

        max-width: 100vw;
        max-height: 100dvh;

        overflow: hidden;
        box-sizing: border-box;
    }


    #malito-job-form {
        width: 100%;
        height: 100%;

        min-height: 0;

        padding: 10px;

        display: flex;
        align-items: flex-start;
        justify-content: center;

        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       STEP / FORM PANEL

       The panel itself scrolls on mobile.
       ----------------------------------------------------- */

    .step {
        width: 100%;
		
        max-width: none;

        /*
         * Keep the entire panel inside the viewport.
         */
        height: auto;
        max-height: calc(100dvh - 20px);

        /*
         * Allow the fields + navigation to scroll.
         */
        overflow-y: auto;
        overflow-x: hidden;

        /*
         * Prevent padding from increasing the width.
         */
        box-sizing: border-box;

        padding: 24px 18px 28px;

        border-radius: 14px;

        /*
         * Make sure the scrollbar doesn't cause
         * horizontal overflow.
         */
        scrollbar-width: thin;

        /*
         * Allows scrolling to the very bottom,
         * including the navigation buttons.
         */
        padding-bottom: 35px;
        padding-top: 35px;
        margin-top: 35px;
    }


    /* -----------------------------------------------------
       FIELDS GRID

       Mobile = every field occupies the FULL ROW.

       We deliberately use a 3-column grid here so that
       "span-3" has an actual meaning.
       ----------------------------------------------------- */

    .fields-grid {
        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 16px;

        margin-bottom: 20px;

        box-sizing: border-box;
    }


    /*
     * EVERY field gets span-3 on mobile.
     */

    .fields-grid > .field {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
    }


    /*
     * Override any existing span-2 / span-3
     * declarations so they ALWAYS occupy
     * the complete mobile row.
     */

    .fields-grid .span-2,
    .fields-grid .span-3 {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
    }


    /*
     * Make the actual controls fit their
     * full-width grid cell.
     */

    .fields-grid input,
    .fields-grid select,
    .fields-grid textarea,
    .field input,
    .field select,
    .field textarea {
        width: 100%;
        max-width: 100%;

        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       MOBILE FIELD SPACING
       ----------------------------------------------------- */

    .field {
        width: 100%;
        min-width: 0;
    }

    .field input,
    .field select,
    .field textarea {
        padding: 13px 12px;
        font-size: 14px;
    }


    /* -----------------------------------------------------
       NAVIGATION

       NEXT + PREVIOUS ALWAYS SIDE BY SIDE.
       ----------------------------------------------------- */

    .job-navigation {
        width: 100%;

        height: auto;
        min-height: 44px;

        display: flex;

        flex-direction: row;

        align-items: center;

        /*
         * Side-by-side rather than stacking.
         */
        justify-content: space-between;

        gap: 8px;

        margin-top: 12px;
        padding: 0;

        box-sizing: border-box;

        flex-shrink: 0;
    }


    /* -----------------------------------------------------
       BUTTONS
       ----------------------------------------------------- */

    .job-navigation .job-next,
    .job-navigation .job-prev {

        /*
         * Each button gets approximately half
         * of the available navigation width.
         */
        flex: 1 1 0;

        width: auto;
        max-width: none;

        min-width: 0;

        min-height: 44px;

        padding: 10px 14px;

        margin: 0;

        font-size: 14px;

        white-space: nowrap;

        display: flex;
        align-items: center;
        justify-content: center;

        box-sizing: border-box;

        flex-shrink: 1;
    }


    /* -----------------------------------------------------
       PREVENT GLOBAL BUTTON RULES FROM INTERFERING
       ----------------------------------------------------- */

    #malito-job-wrapper .job-navigation button {
        position: relative;

        margin: 0;

        transform: none;
    }


    /* -----------------------------------------------------
       SMALLER FIELD GAP
       ----------------------------------------------------- */

    .fields-grid {
        row-gap: 14px;
    }
}

/* =========================================================
   FORCE MOBILE VERTICAL LAYOUT
   NOTHING RESTRICTS FORM HEIGHT
   640px AND BELOW
   ========================================================= */

@media screen and (max-width: 640px) {

    /* =====================================================
       PAGE
       ===================================================== */

    html,
    body {
        height: auto !important;
        min-height: 100% !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;
    }


    /* =====================================================
       OUTER OVERLAY
       ===================================================== */

    #malito-job-wrapper {

        position: fixed !important;

        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width: 100% !important;

        /*
         * Keep viewport height, but allow its
         * contents to overflow vertically.
         */
        height: 100dvh !important;

        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       FORM CONTAINER
       ===================================================== */

    #malito-job-wrapper #malito-job-form {

        width: 100% !important;

        /*
         * REMOVE ALL HEIGHT RESTRICTIONS
         */
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        /*
         * Let content determine the height.
         */
        flex: none !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: flex-start !important;

        /*
         * VERTICAL SPACE AROUND FORM
         */
        padding-top: 30px !important;
        padding-bottom: 50px !important;

        box-sizing: border-box !important;

        /*
         * Absolutely no clipping.
         */
        overflow: visible !important;
    }


    /* =====================================================
       STEP
       ===================================================== */

    #malito-job-wrapper #malito-job-form .step {

        width: 100% !important;

        max-width: none !important;

        /*
         * REMOVE EVERY HEIGHT LIMIT
         */
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        /*
         * REMOVE FLEX HEIGHT RESTRICTIONS
         */
        flex: none !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;

        /*
         * REAL SPACE ABOVE + BELOW
         */
        margin-top: 30px !important;
        margin-bottom: 40px !important;

        padding-top: 35px !important;
        padding-bottom: 40px !important;

        box-sizing: border-box !important;

        /*
         * NEVER CLIP THE CONTENT
         */
        overflow: visible !important;
        overflow-y: visible !important;
        overflow-x: visible !important;

        /*
         * Remove positioning constraints.
         */
        top: auto !important;
        bottom: auto !important;

        position: relative !important;
    }


    /* =====================================================
       ACTIVE STEP
       ===================================================== */

    #malito-job-wrapper #malito-job-form .step.active {

        display: block !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;

        margin-top: 30px !important;
        margin-bottom: 40px !important;

        padding-top: 35px !important;
        padding-bottom: 40px !important;
    }


    /* =====================================================
       REMOVE HEIGHT RESTRICTIONS FROM CONTENT
       ===================================================== */

    #malito-job-wrapper .fields-grid,
    #malito-job-wrapper .field,
    #malito-job-wrapper .collapsible {

        max-height: none !important;
    }


    /* =====================================================
       NAVIGATION MUST REMAIN PART OF DOCUMENT FLOW
       ===================================================== */

    #malito-job-wrapper .job-navigation {

        position: relative !important;

        width: 100% !important;

        height: auto !important;
        min-height: 44px !important;
        max-height: none !important;

        margin-top: 15px !important;

        overflow: visible !important;

        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;

        justify-content: space-between !important;

        gap: 8px !important;

        flex-shrink: 0 !important;
    }


    #malito-job-wrapper .job-navigation .job-next,
    #malito-job-wrapper .job-navigation .job-prev {

        height: auto !important;
        min-height: 44px !important;
        max-height: none !important;

        flex: 1 1 0 !important;

        margin: 0 !important;

        box-sizing: border-box !important;
    }
}

/* =========================================================
   FORCE NORMAL TEXT CURSOR ON ALL TEXT INPUTS
   ========================================================= */

input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input:not([type]),
textarea {

    cursor: text !important;
}


/* Keep the normal pointer on clickable controls */

input[type="checkbox"],
input[type="radio"],
input[type="file"],
select,
button {

    cursor: pointer !important;
}

/* =========================================================
   USER EDIT MODE - LOCKED IDENTITY FIELDS
========================================================= */

.edit-locked-field {
    background: rgba(0, 0, 0, .045) !important;
    color: #777 !important;
    border-color: rgba(0, 0, 0, .12) !important;
    cursor: not-allowed !important;
}

.edit-locked-field:focus {
    outline: none !important;
    box-shadow: none !important;
}