@charset "utf-8";

/*
/*	Copyright (c) 2022 Frenify
/*	Author: Frenify
/*	This file is made for CURRENT TEMPLATE
/*


	List of CSS codes:
	
	01) Base
	02) Site Structure
	03) Section Hero Header
	04) Main title
	05) Info Items
	06) Boxed List
	07) Progress bar
	08) Section Portfolio
	09) Testimonials
	10) Section Clients
	11) Section News
		11.1) Modalbox (used for news)
	12) Section Contact
	13) LIGHT Version
	14) Responsive


/*------------------------------------------------------------------*/
/*	01) Base
/*------------------------------------------------------------------*/
:root {
	--mc: #3452ff;
}

html {
	overflow-x: hidden;
	padding: 0px;
	margin: 0px
}

*:after,
*:before,
* {
	box-sizing: border-box;
}

body {
	font-family: 'Jost', sans-serif;
	font-size: 18px;
	letter-spacing: 0;
	font-weight: 400;
	color: #0b0a0c;
	position: relative;
}

[class^="deebo_fn_"] {
	width: 100%;
	float: left;
	clear: both;
}

.deebo_fn_wrapper,
.deebo_fn_wrapper * {
	box-sizing: border-box;
}

.deebo_fn_wrapper {
	position: relative;
	z-index: 2;
}

.fn__svg {
	fill: currentcolor;
	width: 18px;
	height: 18px;
}

p {
	letter-spacing: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: #eee;
}

/*------------------------------------------------------------------*/
/*	02) Site Structure
/*------------------------------------------------------------------*/
body.resume-opened {
	height: 100vh;
	overflow: hidden;
}

body.resume-opened .deebo_fn_cv {
	opacity: 1;
	visibility: visible;
	transition: all .5s ease;
}

body.resume-opened .deebo_fn__cv {
	opacity: 1;
	visibility: visible;
	transform: translateY(0px);
}

body.resume-opened .deebo_fn_cv .closer {
	transform: translateX(0px);
	transition: transform .5s 1s ease;
}

.deebo_fn_cv {
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 100vh;
	z-index: 77;
	background-color: rgba(29, 27, 25, .95);
	opacity: 0;
	visibility: hidden;

	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s 1s ease;
}

.deebo_fn__cv {
	position: absolute;
	top: 0px;
	bottom: 0px;
	width: auto;
	right: 0px;
	left: 0px;
	background-color: #151515;
	z-index: 156;
	overflow: hidden;
}

.deebo_fn_cv .closer {
	width: 42px;
	height: 42px;
	display: block;
	text-decoration: none;
	position: absolute;
	right: 5px;
	top: 5px;
	z-index: 233;
	transform: translateX(50px);
	transition: transform .5s ease;
}

.deebo_fn_cv .closer:before,
.deebo_fn_cv .closer:after {
	content: "";
	position: absolute;
	width: 18px;
	height: 2px;
	background-color: #eee;
	left: 12px;
	top: 20px;
}

.deebo_fn_cv .closer:after {
	transform: rotate(45deg);
}

.deebo_fn_cv .closer:before {
	transform: rotate(135deg);
}

.deebo_fn_cv .closer:hover {
	background-color: #070707;
}

body.resume-opened .deebo_fn__cv .cv__header,
body.resume-opened .deebo_fn__cv .cv__content {
	transform: translateY(0px);
	opacity: 1;
	transition: all .5s .5s ease;
}

body.resume-opened .deebo_fn__cv .cv__bg {
	left: 0;
	transition: all .5s ease;
}

body.resume-opened .deebo_fn__cv .cv__bg2 {
	right: 0;
	transition: all .5s ease;
}

.deebo_fn__cv .cv__content {
	position: absolute;
	z-index: 99;
	width: 65vw;
	width: calc(70vw - 100px);
	float: right;
	right: 50px;
	top: 50px;
	bottom: 50px;
	overflow-y: scroll;
	color: #999;
	font-size: 20px;
	font-weight: 400;
	padding-right: 10px;
	padding-left: 30px;
	transform: translateY(-380px);
	transition: all .5s ease;
	opacity: 0;
}

.deebo_fn__cv .cv__content {
	scrollbar-width: thin;
	scrollbar-color: #000 #000;
}

.deebo_fn__cv .cv__content::-webkit-scrollbar {
	width: 14px;
}

.deebo_fn__cv .cv__content:-webkit-scrollbar-track {
	background: #000;
}

.deebo_fn__cv .cv__content::-webkit-scrollbar-thumb {
	background-color: #222;
	border-radius: 10px;
}

.deebo_fn__cv .cv__bg {
	position: absolute;
	z-index: 1;
	width: 30%;
	background-color: var(--mc);
	clip-path: polygon(100% 0, 80% 50%, 100% 100%, 0 100%, 0 0);
	top: 0;
	left: -30%;
	bottom: 0;
	transition: all .5s .5s ease;
}

.deebo_fn__cv .cv__bg2 {
	position: absolute;
	z-index: 1;
	width: 30%;
	background-color: #070707;
	clip-path: polygon(20% 0, 100% 0, 100% 50%, 100% 100%, 20% 100%, 0 50%);
	top: 0;
	right: -30%;
	bottom: 0;
	transition: all .5s .5s ease;
}

.deebo_fn__cv .cv__header {
	position: absolute;
	top: 50px;
	left: 50px;
	width: 30vw;
	bottom: 50px;
	z-index: 20;
	filter: drop-shadow(10px 0px 10px rgba(0, 0, 0, 0.5));
	transform: translateY(380px);
	opacity: 0;
	transition: all .5s ease;
}

.deebo_fn__cv .cv__header .in {
	background-color: #191919;
	height: 100%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	flex-direction: column;
	justify-content: center;
	padding: 40px 10%;
	border-radius: 10px;
	overflow-y: scroll;
}

.deebo_fn__cv .cv__header .in {
	scrollbar-width: thin;
	scrollbar-color: #000 #000;
}

.deebo_fn__cv .cv__header .in::-webkit-scrollbar {
	width: 0;
}

.deebo_fn__cv .cv__header .in:-webkit-scrollbar-track {
	background: #000;
}

.deebo_fn__cv .cv__header .in::-webkit-scrollbar-thumb {
	background-color: #222;
	border-radius: 10px;
}

.deebo_fn__cv .cv__header .avatar {
	margin-bottom: 20px;
}

.deebo_fn__cv .cv__header .avatar img {
	max-width: 200px;
	max-height: 200px;
	border-radius: 50%;
}

.deebo_fn__cv .cv__header h3 {
	margin: 0;
	padding: 0;
	color: #eee;
	font-weight: 700;
	font-size: 30px;
	text-transform: uppercase;
	letter-spacing: .5px;
	margin-bottom: 20px;
}

.deebo_fn__cv .cv__header h3 span {
	color: var(--mc);
}

.deebo_fn__cv .cv__header p.quote {
	margin: 0;
	color: #aaa;
	margin-bottom: 30px;
	text-align: left;
	border-left: 3px solid var(--mc);
	padding-left: 40px;
	background: #111;
	padding: 8px 20px;
	border-radius: 0 5px 5px 0;
}

.deebo_fn__cv .cv__header p.quote a {
	text-decoration: none;
	color: #eee;
	border-bottom: 1px solid;
	line-height: 1;
	display: inline-block;
}

.deebo_fn__cv .cv__header p.quote a:hover {
	color: var(--mc);
}

.cv__header .contact_info {
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: left;
	margin-bottom: 25px;
}

.cv__header .contact_info .icon {
	display: block;
	width: 40px;
	height: 40px;
	min-width: 40px;
	background-color: #111;
	border-radius: 5px;
	margin-right: 5px;
	position: relative;
}

.cv__header .contact_info .fn__svg {
	width: 20px;
	height: 20px;
	display: block;
	color: var(--mc);
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -10px 0 0 -10px;
}

.cv__header .contact_info li {
	padding: 0;
	margin: 0;
	position: relative;
	margin-bottom: 5px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: flex-start;
}

.cv__header .contact_info p {
	color: #eee;
	line-height: 1.4;
	background-color: #111;
	border-radius: 5px;
	padding: 7px 10px;
	width: 100%;
	min-height: 40px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-ms-align-items: center;
	align-items: center;
}

.deebo_fn__cv .social {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	-ms-flex-direction: row;
	-o-flex-direction: row;
	flex-direction: row;
	flex-wrap: wrap;
	-ms-align-items: center;
	align-items: center;
	margin-left: -5px;
}

.deebo_fn__cv .social li {
	margin: 0;
	padding: 0;
	padding-left: 5px;
	margin-bottom: 5px;
}

.deebo_fn__cv .social a {
	display: block;
	text-decoration: none;
	color: #fff;
	background-color: #111;
	width: 40px;
	height: 40px;
	position: relative;
	border-radius: 5px;
}

.deebo_fn__cv .social .fn__svg {
	position: absolute;
	width: 16px;
	height: 16px;
	top: 50%;
	left: 50%;
	margin: -8px 0 0 -8px;
}

.deebo_fn__cv .social a:hover {
	background-color: var(--mc);
}

.deebo_fn__cv .cv__content section {
	width: 100%;
	padding: 30px;
	background-color: #191919;
	margin-bottom: 30px;
	box-shadow: 0px 3px 4px rgb(0 0 0 / 30%);
	border-radius: 10px;
	float: left;
	clear: both;
}

.deebo_fn__cv .cv__content section:last-child {
	margin-bottom: 0;
}

.right_bar_overlay {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: transparent;
	display: block;
	z-index: 20;
	width: 100%;
	float: left;
	opacity: 0;
	visibility: hidden;
	transition: all 0.5s ease;
	cursor: pointer;
}

.rightbar-opened .right_bar_overlay {
	background-color: rgba(0, 0, 0, 0.30);
	opacity: 1;
	visibility: visible;
}

/* light/dark switcher */
.deebo_fn_switcher_wrap {
	position: fixed;
	z-index: 999;
	top: 0;
	right: 70px;
	left: auto;
	width: auto;
}

.deebo_fn_switcher_wrap label {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	-ms-flex-direction: row;
	-o-flex-direction: row;
	flex-direction: row;
	-ms-align-items: center;
	align-items: center;
	height: 36px;
	padding: 0 15px;
	margin: 7px 0;
	background-color: #191919;
	border-radius: 30px;
	color: #aaa;
	user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-webkit-touch-callout: none;
	-o-user-select: none;
	-moz-user-select: none;
	cursor: pointer;
	box-shadow: 0px 3px 4px rgb(0 0 0 / 30%);
}

.deebo_fn_switcher_wrap .checkbox_wrap {
	position: relative;
	display: block;
	width: 42px;
	height: 24px;
	margin: 0 15px;
}

.deebo_fn_switcher_wrap input {
	opacity: 0 !important;
	position: absolute !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
}

.deebo_fn_switcher_wrap .slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: transparent;
	-webkit-transition: .4s;
	transition: .4s;
	border: 1px solid #aaa;
	margin: 0;
	padding: 0;
}

.deebo_fn_switcher_wrap .slider:before {
	position: absolute;
	content: "";
	height: 18px;
	width: 18px;
	left: 2px;
	bottom: 2px;
	background-color: #d1d8e4;
	-webkit-transition: .4s;
	transition: .4s;
}

.deebo_fn_switcher_wrap input:checked+.slider:before {
	-webkit-transform: translateX(18px);
	-ms-transform: translateX(18px);
	transform: translateX(18px);
}

.deebo_fn_switcher_wrap .slider.round {
	border-radius: 24px;
}

.deebo_fn_switcher_wrap .slider.round:before {
	border-radius: 50%;
}

/*------------------------------------------------------------------*/
/*	03) Section Hero Header
/*------------------------------------------------------------------*/
.section_header {
	width: 100%;
	float: left;
	background-color: #f0f7fb;
	overflow: hidden;
}

.section_header .content {
	padding-top: 200px;
	padding-bottom: 200px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-ms-align-items: center;
	align-items: center;
	justify-content: space-between;
	min-height: 90vh;
	min-height: calc(100vh - 160px);
	/* 50px spacing from top, 50px from bottom of the window & 30px from top, 30px from bottom of the section. Summary 160px */
}

.section_header .left_hero_header {
	width: 475px;
	max-width: 40%;
	padding-right: 80px;
}

.section_header .circle {
	position: relative;
}

.section_header .circle .bg_img {
	position: absolute;
	top: 18px;
	left: 18px;
	bottom: 18px;
	right: 18px;
	display: block;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	z-index: 15;
	border-radius: 100%;
}

.section_header .circle img {
	position: relative;
	display: block;
	min-width: 100%;
	border-radius: 100%;
	z-index: 15;
	opacity: 0;
}

.section_header .circle_holder_blue span {
	position: absolute;
	top: 0px;
	right: 0px;
	left: 7px;
	bottom: 10px;
	background-color: var(--mc);
	z-index: 2;
	border-radius: 100%;
	color: rgba(52, 82, 255, 0.1);
	box-shadow: 5px -5px 20px;
}

.section_header .circle_holder_orange span {
	position: absolute;
	top: 30px;
	right: 15px;
	left: 0px;
	bottom: 0px;
	background-color: #FFD1DC;
	z-index: 2;
	border-radius: 100%;
	color: rgba(211, 165, 131, 0.1);
	box-shadow: -5px 5px 20px;
}

.section_header .lines {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
}

.section_header .lines span {
	width: 4px;
	height: 138%;
	display: block;
	/*	background-color: #999;*/
	background: var(--mc);
	background: -moz-linear-gradient(180deg, var(--mc) 50%, rgba(255, 209, 220, 1) 50%, rgba(255, 209, 220, 1) 100%);
	background: -webkit-linear-gradient(180deg, var(--mc) 50%, rgba(255, 209, 220, 131, 1) 50%, rgba(255, 209, 220, 1) 100%);
	background: linear-gradient(180deg, var(--mc) 50%, rgba(255, 209, 220, 1) 50%, rgba(255, 209, 220, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3452ff", endColorstr="#d3a583", GradientType=1);
	transform: rotate(30deg);
	z-index: 13;
	position: absolute;
	top: -18%;
	left: 40%;
}

.section_header .lines span:nth-child(2) {
	left: 52%;
	top: -21%;
}

.section_header .lines span:nth-child(3) {
	left: 64%;
	top: -24%;
}

.section_header .right_hero_header {
	width: 60%;
}

.section_header .person_info {
	position: absolute;
	right: 52px;
	right: 11.8%;
	bottom: 40px;
	z-index: 25;
	cursor: pointer;
	display: block;
	text-decoration: none;
	width: 60px;
	height: 60px;
	background-color: #000;
	border-radius: 50%;
	color: #fff;
}

.section_header .person_info:after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 70px;
	height: 70px;
	margin: -35px auto auto -35px;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	background-color: inherit;
	z-index: -1;
	pointer-events: none;

	border: 20px solid #000;
	transition: border-color .3s ease;

	border-radius: 100%;
	opacity: 1;
	-webkit-animation: cs_fn_pulse 2.5s cubic-bezier(0.3, 1, 0.3, 1) infinite;
	animation: cs_fn_pulse 2.5s cubic-bezier(0.3, 1, 0.3, 1) infinite;
}

.section_header .person_info:hover {
	background-color: var(--mc);
}

.section_header .person_info:hover:after {
	border-color: var(--mc);
}

@-webkit-keyframes cs_fn_pulse {
	from {
		opacity: 1;
		transform: scale(1, 1)
	}

	to {
		opacity: 0;
		transform: scale(1.8, 1.8)
	}
}

@keyframes cs_fn_pulse {
	from {
		opacity: 1;
		transform: scale(1, 1)
	}

	to {
		opacity: 0;
		transform: scale(1.8, 1.8)
	}
}

.section_header .person_info .fn__svg {
	width: 20px;
	height: 20px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -10px 0 0 -10px;
}

.my_self h4 {
	font-size: 36px;
	font-weight: 400;
	margin: 0;
	margin-bottom: 1px;
	color: #aaa;
}

.my_self h2 {
	margin: 0;
	padding: 0;
	font-weight: 500;
	font-size: 72px;
	font-size: calc(30px + 2.18vw);
	line-height: 1;
	/*	text-transform: uppercase;*/
	color: #eee;
}

.my_self h2 b {
	font-weight: inherit;
}

/*------------------------------------------------------------------*/
/*	04) Main title
/*------------------------------------------------------------------*/
.section_title h3 {
	margin: 0;
	padding: 0;
	position: relative;
	padding-bottom: 11px;
	text-transform: uppercase;
	color: #eee;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 1px;
}

.section_title h3:after {
	content: '';
	position: absolute;
	width: 100px;
	height: 2px;
	background-color: var(--mc);
	bottom: 0;
	left: 0;
}

.section_title {
	margin-bottom: 50px;
}

#cv_services .section_title,
#cv_biography .section_title {
	margin-bottom: 43px;
}

/*------------------------------------------------------------------*/
/*	05) Info Items
/*------------------------------------------------------------------*/
.fn_cs_info_items {
	margin-top: 42px;
}

.fn_cs_info_items ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-left: -10px;
}

.fn_cs_info_items li {
	background-color: #111;
	padding: 7px 25px;
	line-height: 1.6;
	margin: 0 0 10px 10px;
	font-size: 20px;
	border-radius: 3px;
	text-align: center;
}

.fn_cs_info_items span {
	font-weight: 400;
}

.fn_cs_info_items a {
	color: #eee;
	text-decoration: none;
}

.fn_cs_info_items a:hover {
	color: var(--mc);
}

/*------------------------------------------------------------------*/
/*	06) Boxed List
/*------------------------------------------------------------------*/
.fn_cs_boxed_list ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	flex-direction: column;
}

.fn_cs_boxed_list li {
	margin: 0;
	padding: 0;
	width: 100%;
	float: left;
	clear: both;
	margin-bottom: 20px;
}

.fn_cs_boxed_list li:last-child {
	margin-bottom: 0;
}

.fn_cs_boxed_list .item {
	width: 100%;
	float: left;
	clear: both;
	background-color: #111;
	position: relative;
	padding: 42px 40px 43px;
	border-radius: 5px;
}

.fn_cs_boxed_list .item:after {
	content: '';
	position: absolute;
	width: 2px;
	height: 50px;
	left: 0px;
	top: 50%;
	transform: translateY(-50%);
	background-color: var(--mc);
}

.fn_cs_boxed_list .item_top {
	display: flex;
	margin-bottom: 14px;
}

.fn_cs_boxed_list .item_top h5 {
	margin: 0;
	padding: 0;
	font-size: 18px;
	text-transform: uppercase;
	font-weight: 400;
	line-height: 30px;
	color: #aaa;
}

.fn_cs_boxed_list .item_top span {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 30px;
	margin-left: 20px;
	color: #888;
}

.fn_cs_boxed_list h3 {
	margin: 0;
	padding: 0;
	font-weight: 400;
	color: #eee;
	margin-bottom: 17px;
}

.fn_cs_boxed_list p a {
	text-decoration: none;
	position: relative;
	z-index: 2;
	color: #000;
	font-weight: 600;
}

/*------------------------------------------------------------------*/
/*	07) Progress bar
/*------------------------------------------------------------------*/
.fn_cs_progress_bar .progress_item {
	width: 100%;
	float: left;
	clear: both;
	margin-bottom: 20px;
}

.fn_cs_progress_bar .progress_item:last-child {
	margin-bottom: 0;
}

.fn_cs_progress_bar .progress_percent {
	position: absolute;
	z-index: 2;
	padding: 0 25px;
	line-height: 40px;
	font-size: 18px;
	font-weight: 400;
	display: block;
	top: 50%;
	margin-top: -20px;
	margin-right: 10px;
	background-color: var(--mc);
	right: 100%;
	border-radius: 50px;
	color: #fff;
	transition: all 3s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}

.fn_cs_progress_bar .progress_title {
	margin: 0;
	font-size: 18px;
	font-weight: 400;
	padding: 0 25px;
	position: relative;
	z-index: 2;
	line-height: 60px;
	color: #eee;
}

.fn_cs_progress_bar .item_in {
	width: 100%;
	position: relative;
}

.fn_cs_progress_bar .progress_bg {
	width: 0;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	bottom: 0;
}

.fn_cs_progress_bar .progress_bg:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	background-color: #111;
	border-radius: 50px;
}

.fn_cs_progress_bar .open .progress_bg:after {
	width: 100%;
	-webkit-animation: progress_animation 3s cubic-bezier(0.165, 0.840, 0.440, 1.000);
	/* Safari 4+ */
	-moz-animation: progress_animation 3s cubic-bezier(0.165, 0.840, 0.440, 1.000);
	/* Fx 5+ */
	animation: progress_animation 3s cubic-bezier(0.165, 0.840, 0.440, 1.000);
	/* IE 10+ */
}

@-webkit-keyframes progress_animation {
	0% {
		width: 0%;
	}

	100% {
		width: 100%;
	}
}

@-moz-keyframes progress_animation {
	0% {
		width: 0%;
	}

	100% {
		width: 100%;
	}
}

@keyframes progress_animation {
	0% {
		width: 0%;
	}

	100% {
		width: 100%;
	}
}

/*------------------------------------------------------------------*/
/*	08) Service List
/*------------------------------------------------------------------*/
.fn_cs_service_list {
	margin-top: 42px;
}

.fn_cs_service_list ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.fn_cs_service_list li {
	margin: 0;
	padding: 0;
	margin-bottom: 20px;
}

.fn_cs_service_list .item {
	width: 100%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	background-color: #111;
	border-radius: 5px;
}

.fn_cs_service_list .item_right {
	width: 30%;
	min-width: 30%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	flex-direction: column;
	-ms-align-items: center;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-left: 1px solid rgba(255, 255, 255, .05);
	padding: 10px;
}

.fn_cs_service_list .item_left {
	padding: 42px 40px 43px;
	position: relative;
	width: 100%;
}

.fn_cs_service_list .item_left:after {
	content: '';
	position: absolute;
	width: 2px;
	height: 50px;
	left: 0px;
	top: 50%;
	transform: translateY(-50%);
	background-color: var(--mc);
	transition: all .5s ease;
}

.fn_cs_service_list .item_left h3 {
	margin: 0;
	padding: 0;
	font-weight: 400;
	color: #eee;
	margin-bottom: 18px;
}

.fn_cs_service_list .item_left p {
	margin: 0;
	padding: 0;
}

.fn_cs_service_list .item_right p {
	margin: 0;
	padding: 0;
	font-size: 16px;
	margin-bottom: 4px;
}

.fn_cs_service_list .item_right h3 {
	margin: 0;
	padding: 0;
	color: var(--mc);
	font-weight: 500;
	font-size: 24px;
}

/*------------------------------------------------------------------*/
/*	08) Section Portfolio
/*------------------------------------------------------------------*/
.fn_cs_portfolio .portfolio_filter,
.fn_cs_portfolio {
	width: 100%;
	float: left;
	clear: both;
}

.fn_cs_portfolio .portfolio_filter {
	padding: 0 0 56px 0;
}

.fn_cs_portfolio .portfolio_filter ul {
	margin: 0px;
	list-style-type: none;
}

.fn_cs_portfolio .portfolio_filter ul {
	margin: 0px;
	list-style-type: none;
}

.fn_cs_portfolio .portfolio_filter ul li {
	margin: 0px 20px 0px 0px;
	display: inline-block;
}

.fn_cs_portfolio .portfolio_filter ul li:last-child {
	margin-right: 0px;
}

.fn_cs_portfolio .portfolio_filter a {
	text-decoration: none;
	color: #ccc;
	font-weight: 500;

	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}

.fn_cs_portfolio .portfolio_filter a.current,
.fn_cs_portfolio .portfolio_filter a:hover {
	color: var(--mc);
}

.fn_cs_portfolio .portfolio_list {
	width: 100%;
	height: auto;
	clear: both;
	float: left;
}

.fn_cs_portfolio .portfolio_list ul {
	margin: 0px 0px 0px -25px;
	list-style-type: none;
	position: relative;
	z-index: 2;
}

.fn_cs_portfolio .portfolio_list ul li {
	margin: 0px 0px 25px 0px;
	width: 33.3333%;
	float: left;
	padding-left: 25px;
}

.fn_cs_portfolio .portfolio_list .inner {
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	position: relative;
	overflow: hidden;
	border-radius: 12px;
}

.fn_cs_portfolio .portfolio_list .image {
	position: relative;
	overflow: hidden;
}

.fn_cs_portfolio .portfolio_list .inner img {
	min-width: 100%;
	opacity: 0;
}

.fn_cs_portfolio .portfolio_list .main {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	transform: scale(1) translateZ(0);

	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.fn_cs_portfolio .portfolio_list .inner:hover .main {
	transform: scale(1.1) translateZ(0);
}

.fn_cs_portfolio_titles {
	white-space: nowrap;
	background: #ffffff;
	font-size: 21px;
	padding: 7px 15px;
	font-family: 'Jost', sans-serif;
	font-weight: 500;
	color: #000;
	position: fixed;
	z-index: 5;
	opacity: 0;
	visibility: hidden;
}

.fn_cs_portfolio_titles.visible {
	opacity: 1;
	visibility: visible;
}

.fn_cs_portfolio_titles .work__cat {
	position: absolute;
	background: #ffffff;
	top: 100%;
	left: 0;
	margin-top: -10px;
	font-size: 16px;
	font-weight: 500;
	padding: 5px 15px;
	color: #6f6b80;
}

.entry {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
}

.fn_cs_portfolio .inner:hover .mobile_title {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) translateZ(0);
}

.fn_cs_portfolio .mobile_title {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20px;
	background: rgba(0, 0, 0, 0.2);
	/* For browsers that do not support gradients */
	background: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
	/* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
	/* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
	/* For Firefox 3.6 to 15 */
	background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
	/* Standard syntax */
	transition: all .5s ease;
	transform: translateY(20px) translateZ(0);
	opacity: 0;
	visibility: hidden;
	border-radius: 0 0 12px 12px;
}

.fn_cs_portfolio .mobile_title h3 {
	font-size: 24px;
	font-weight: 400;
	margin-bottom: 1px;
}

.fn_cs_portfolio .mobile_title span {
	display: block;
	font-size: 14px;
	color: #aaa;
}

/*------------------------------------------------------------------*/
/*	09) Testimonials
/*------------------------------------------------------------------*/
.fn_cs_testimonials {
	margin-top: 42px;
}

.fn_cs_testimonials ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.fn_cs_testimonials li {
	margin: 0;
	padding: 0;
	margin-bottom: 20px;
}

.fn_cs_testimonials .item {
	width: 100%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	background-color: #111;
	border-radius: 5px;
}

.fn_cs_testimonials .item_right {
	width: 30%;
	min-width: 30%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	flex-direction: column;
	-ms-align-items: center;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-left: 1px solid rgba(255, 255, 255, .05);
	padding: 40px 10px;
}

.fn_cs_testimonials .item_left {
	padding: 42px 40px 43px;
	position: relative;
	width: 100%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	flex-direction: column;
	justify-content: center;
}

.fn_cs_testimonials .item_left:after {
	content: '';
	position: absolute;
	width: 2px;
	height: 50px;
	left: 0px;
	top: 50%;
	transform: translateY(-50%);
	background-color: var(--mc);
	transition: all .5s ease;
}

.fn_cs_testimonials .t_ava {
	width: 100%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
}

.fn_cs_testimonials .ava_in {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	margin-bottom: 10px;
}

.fn_cs_testimonials .t_name {
	margin-bottom: 7px;
}

.fn_cs_testimonials .t_name p {
	color: #eee;
}

.fn_cs_testimonials .t_rating {
	overflow: hidden;
}

.fn_cs_testimonials .rating_in {
	width: 100px;
	position: relative;
	overflow: hidden;
}

.fn_cs_testimonials .t_rating .fn__svg {
	width: 100px;
	height: auto;
	display: block;
}

.fn_cs_testimonials .rating_active .fn__svg {
	color: var(--mc);
}

.fn_cs_testimonials .rating_regular {
	z-index: 1;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	transform: rotateY(180deg);
	width: 0;
}

.fn_cs_testimonials .rating_active {
	z-index: 2;
	position: relative;
	overflow: hidden;
}

/*------------------------------------------------------------------*/
/* 10) Section Clients
/*------------------------------------------------------------------*/
.clients_wrapper {
	width: 100%;
	float: left;
	clear: both;
	overflow: hidden;
	border-radius: 10px;
	border: 1px solid transparent;
	background-color: #111;
}

.clients_wrapper ul {
	margin: -1px -10px -1px -1px;
	list-style-type: none;
	padding-top: 1px;
	float: left;
	padding-left: 1px;
	min-width: calc(100% + 2px);
}

.clients_wrapper ul li {
	margin: 0px;
	float: left;
	width: 25%;
	border: 1px solid #1d1d1d;
	text-align: center;
	height: 195px;
	line-height: 195px;
	position: relative;
	margin-top: -1px;
	margin-left: -1px;
	overflow: hidden;
}

.clients_wrapper a {
	display: block;
}

.clients_wrapper img {
	max-width: 88%;
	max-height: 100px;
	opacity: .5;

	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}

.clients_wrapper a:hover img {
	opacity: 1;
}

/*------------------------------------------------------------------*/
/* 11) Section News
/*------------------------------------------------------------------*/
.section_tips {
	width: 100%;
	float: left;
	padding: 194px 0 100px;
}

.section_tips .tips_content {
	width: 100%;
	float: left;
	margin-bottom: 20px;
}

.about_tips {
	display: block;
	text-align: center;
}

.tip_title {
	margin-bottom: 34px;
}

.tip_title h3 {
	color: #999;
	font-size: 18px;
	font-weight: 600;
	text-transform: uppercase;
	margin: 0;
	letter-spacing: 1px;
}

.tip_text {
	margin-bottom: 109px;
}

.tip_text p {
	color: #0b0a0c;
	font-size: 30px;
	font-weight: 400;
	letter-spacing: 0;
}

.tips_content ul {
	margin: 0;
	margin-left: -50px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	-ms-flex-direction: row;
	-o-flex-direction: row;
	flex-direction: row;
	flex-wrap: wrap;
}

.tips_content ul li {
	width: 100%;
	float: left;
	padding-left: 50px;
	margin-bottom: 20px;
}

.tips_content .item {
	width: 100%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	background-color: #111;
	border-radius: 5px;
}

.tips_content .item_right {
	width: 30%;
	min-width: 30%;
	position: relative;
	min-height: 200px;
	border-left: 1px solid rgba(255, 255, 255, .05);
}

.tips_content .item_right .abs_img {
	position: absolute;
	top: 15px;
	left: 15px;
	right: 15px;
	bottom: 15px;

	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.tips_content .item_left {
	padding: 44px 40px 50px;
	position: relative;
	width: 100%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.tips_content .item_left:after {
	content: '';
	position: absolute;
	width: 2px;
	height: 50px;
	left: 0px;
	top: 50%;
	transform: translateY(-50%);
	background-color: var(--mc);
	transition: all .5s ease;
}

.tips_content p {
	color: #999;
	font-weight: 400;
	font-size: 18px;
	margin-bottom: 15px;
}

.tips_content h5 {
	color: #0b0a0c;
	font-size: 24px;
	font-weight: 400;
	margin: 0;
}

.tips_content h5 a {
	color: #eee;
	text-decoration: none;
	transition: all 0.5s ease;
}

.tips_content h5 a:hover {
	color: var(--mc);
}

.tips_content .read_more {
	text-decoration: none;
	background: #111111;
	border-radius: 30px;
	line-height: 1;
	padding: 8px 25px;
	color: #eee;
	margin-top: 20px;
	border: 2px solid #393939;
	transition: all 0.5s ease;
}

.tips_content .read_more:hover {
	border-color: var(--mc);
	color: var(--mc);
}

.load_more {
	clear: both;
	display: block;
	text-align: center;
}

.load_more a {
	min-width: 250px;
	padding: 20px 40px;
	line-height: 26px;
	text-decoration: none;
	text-transform: uppercase;
	color: #eee;
	font-size: 16px;
	font-weight: 600;
	border: 2px solid #393939;
	background-color: transparent;
	display: inline-block;
	position: relative;
	border-radius: 50px;
}

.load_more a:hover {
	color: var(--mc);
	border-color: var(--mc);
}

.load_more .text {
	transition: all .3s ease, color 0s ease;
}

.load_more .loading .text {
	opacity: 0;
}

.load_more .loading {
	border-color: var(--mc);
}

.load_more .loading .fn__pulse {
	opacity: 1;
	visibility: visible;
}

.fn__pulse {
	width: 120px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	visibility: hidden;
	transition: all .3s ease;
}

.fn__pulse span {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: var(--mc);
}

.fn__pulse span:nth-child(1) {
	animation: fn__pulse .4s ease 0s infinite alternate;
}

.fn__pulse span:nth-child(2) {
	animation: fn__pulse .4s ease 0.2s infinite alternate;
}

.fn__pulse span:nth-child(3) {
	animation: fn__pulse .4s ease 0.4s infinite alternate;
}

@-webkit-keyframes fn__pulse {
	0% {
		opacity: 1;
		transform: scale(1)
	}

	100% {
		opacity: .25;
		transform: scale(.75)
	}
}

@-moz-keyframes fn__pulse {
	0% {
		opacity: 1;
		transform: scale(1)
	}

	100% {
		opacity: .25;
		transform: scale(.75)
	}
}

@keyframes fn__pulse {
	0% {
		opacity: 1;
		transform: scale(1)
	}

	100% {
		opacity: .25;
		transform: scale(.75)
	}
}

.be_animated {
	-webkit-animation-duration: 0.8s;
	animation-duration: 0.8s;
	visibility: hidden;
	display: none;
}

.be_animated.done {
	visibility: visible;
	display: block;
}

@-webkit-keyframes fadeInTop {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 10%, 0);
		transform: translate3d(0, 10%, 0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInTop {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 10%, 0);
		transform: translate3d(0, 10%, 0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

.fadeInTop {
	-webkit-animation-name: fadeInTop;
	animation-name: fadeInTop
}

/*------------------------------------------------------------------*/
/*	11.1) Modalbox (used for news)
/*------------------------------------------------------------------*/
.deebo_fn_modalbox {
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 100vh;
	z-index: 999;
	background-color: rgba(29, 27, 25, .95);
	opacity: 0;
	visibility: hidden;

	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}

.deebo_fn_modalbox .extra_closer {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
}

.modal_item {
	cursor: pointer;
}

.deebo_fn_modalbox.opened {
	opacity: 1;
	visibility: visible;
}

.deebo_fn_modalbox .closer {
	display: block;
	text-decoration: none;
	width: 18px;
	height: 18px;
	right: 46px;
	top: 35px;
	z-index: 5;
	position: absolute;
}

.deebo_fn_modalbox .closer:after {
	content: '';
	position: absolute;
	left: -10px;
	right: -10px;
	bottom: -10px;
	top: -10px;
	background-color: transparent;
	transition: all .3s ease;
	border: 1px solid transparent;
}

.deebo_fn_modalbox .closer span:before,
.deebo_fn_modalbox .closer span:after {
	left: -3px;
	top: 8px;
	content: '';
	position: absolute;
	width: 25px;
	height: 2px;
	background-color: #888;
	transition: all 300ms ease;
	perspective: 30px;
}

.deebo_fn_modalbox .closer span:after {
	transform: rotate(45deg) translateZ(0);
}

.deebo_fn_modalbox .closer span:before {
	transform: rotate(-45deg) translateZ(0)
}

.deebo_fn_modalbox.hovered .closer:after,
.deebo_fn_modalbox .closer:hover:after {
	border-color: var(--mc);
	transform: scale(1.23);
}

.deebo_fn_modalbox.hovered .closer span:before,
.deebo_fn_modalbox.hovered .closer span:after,
.deebo_fn_modalbox .closer:hover span:before,
.deebo_fn_modalbox .closer:hover span:after {
	background-color: var(--mc);
}

.fn__hidden {
	display: none;
	position: absolute;
	padding: 0;
	margin: 0;
	z-index: -999;
	box-shadow: none;
	outline: none;
	border: none;
	opacity: 0;
	visibility: hidden;
}

.deebo_fn_modalbox .modal_content {
	scrollbar-width: thin;
	scrollbar-color: #333 #111;
}

.deebo_fn_modalbox .modal_content::-webkit-scrollbar {
	width: 8px;
}

.deebo_fn_modalbox .modal_content:-webkit-scrollbar-track {
	background: #111;
}

.deebo_fn_modalbox .modal_content::-webkit-scrollbar-thumb {
	background-color: var(--mc);
	border-radius: 10px;
	border: 3px solid #181715;
}

.deebo_fn_modalbox .container {
	height: 100vh;
}

.deebo_fn_modalbox .box_inner {
	position: absolute;
	top: 50px;
	bottom: 50px;
	width: 100%;
	max-width: 1000px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #181715;
	z-index: 156;
	opacity: 0;
	visibility: hidden;
	margin-top: -20px;
	border: 1px solid rgba(255, 255, 255, .2);

	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}

.deebo_fn_modalbox.opened .box_inner {
	opacity: 1;
	visibility: visible;
	margin-top: 0px;
}

.deebo_fn_modalbox .modal_content {
	position: relative;
	width: 100%;
	height: 100%;
	float: left;
	overflow: hidden;
	overflow-y: scroll;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	flex-direction: column;
}

.deebo_fn_modalbox .modal_in {
	padding: 60px;
}

.deebo_fn_modalbox p {
	color: #999;
}

.deebo_fn_modalbox h1,
.deebo_fn_modalbox h2,
.deebo_fn_modalbox h3,
.deebo_fn_modalbox h4,
.deebo_fn_modalbox h5,
.deebo_fn_modalbox h6 {
	color: #eee;
}

.deebo_fn_modalbox .fn__cat {
	margin-bottom: 8px;
}

.deebo_fn_modalbox .fn__title {
	font-weight: 400;
	margin-bottom: 42px;
}

.deebo_fn_modalbox .img_holder {
	margin-bottom: 45px;
	width: 100%;
	overflow: hidden;
	position: relative;
}

.deebo_fn_modalbox .img_holder img {
	margin-bottom: -50%;
	opacity: 0 !important;
	min-width: 100%;
}

.deebo_fn_modalbox .img_holder .abs_img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.deebo_fn_modalbox .fn__desc {
	margin-bottom: 28px;
}

.deebo_fn_modalbox .fn__desc:last-child {
	margin-bottom: 0;
}

.fn__nav {
	margin-top: auto;
	width: 100%;
	position: relative;
	height: 142px;
	min-height: 142px;
	border-top: 1px solid rgba(255, 255, 255, .2);
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}

.fn__nav:after {
	content: '';
	position: absolute;
	left: 50%;
	width: 1px;
	background-color: rgba(255, 255, 255, .2);
	top: 0;
	bottom: 0;
	z-index: 2;
	margin-left: -0.5px;
}

.fn__nav a {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-ms-align-items: center;
	align-items: center;
	text-decoration: none;
	position: relative;
	width: 100%;
	color: #ddd;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .5px;
	text-transform: uppercase;
}

.fn__nav .prev {
	padding: 10px 10px 10px 106px;
}

.fn__nav .next {
	padding: 10px 106px 10px 10px;
	justify-content: flex-end;
	text-align: right;
}

.fn__nav .arrow_wrapper {
	display: block;
	width: 26px;
	height: 21px;
	left: 60px;
	position: absolute;
	top: 50%;
	margin-top: -10px;
	transition: transform .3s ease;
}

.fn__nav .arrow_wrapper:after {
	content: '';
	position: absolute;
	left: -10px;
	right: -10px;
	bottom: -10px;
	top: -10px;
	background-color: transparent;
	transition: all .3s ease;
	border: 1px solid transparent;
}

.fn__nav .arrow {
	display: block;
	background-color: #888;
	width: 26px;
	height: 1px;
	position: absolute;
	top: 50%;
	transition: all .3s ease;
}

.fn__nav .text {
	display: block;
	transition: transform .3s ease;
}

.fn__nav .arrow:after {
	display: block;
	background-color: inherit;
	width: 14px;
	height: 1px;
	content: '';
	position: absolute;
	left: -1px;
	transform: rotate(45deg);
	top: 100%;
	margin-top: 4px;
}

.fn__nav .arrow:before {
	display: block;
	background-color: inherit;
	width: 14px;
	height: 1px;
	content: '';
	position: absolute;
	left: -1px;
	transform: rotate(-45deg);
	bottom: 100%;
	margin-bottom: 4px;
}

.fn__nav .next .arrow:after {
	top: auto;
	margin-top: inherit;
	right: -1px;
	left: auto;
	bottom: 100%;
	margin-bottom: 4px;
}

.fn__nav .next .arrow:before {
	bottom: auto;
	margin-bottom: inherit;
	right: -1px;
	left: auto;
	top: 100%;
	margin-top: 4px;
}

.fn__nav .next .arrow_wrapper {
	left: auto;
	right: 60px;
}

.fn__nav a:hover {
	color: #ccc;
}

.fn__nav a:hover .arrow {
	background-color: var(--mc);
}

.fn__nav a:hover .arrow_wrapper:after {
	border-color: var(--mc);
	transform: scale(1.23);
}

.fn__nav a.prev:hover .text {
	transform: translateX(45px);
}

.fn__nav a.prev:hover .arrow_wrapper {
	transform: translateX(15px);
}

.fn__nav a.next:hover .text {
	transform: translateX(-45px);
}

.fn__nav a.next:hover .arrow_wrapper {
	transform: translateX(-15px);
}

@media(max-width: 1040px) {
	.deebo_fn_modalbox .box_inner {
		max-width: 90%;
	}

	.deebo_fn_modalbox .modal_in {
		padding-left: 20px;
		padding-right: 20px;
	}

	.fn__nav .next {
		padding-right: 66px;
	}

	.fn__nav .next .arrow_wrapper {
		right: 20px;
	}

	.fn__nav .prev {
		padding-left: 66px;
	}

	.fn__nav .prev .arrow_wrapper {
		left: 20px;
	}
}

@media(max-width: 370px) {
	.fn__nav .text {
		display: none;
	}
}

/*------------------------------------------------------------------*/
/*	12) Section Contact
/*------------------------------------------------------------------*/
.section_contact input {
	background-color: #111;
	width: 100%;
	min-width: 100%;
	outline: none;
	border: 1px solid #222;
	font-size: 16px;
	font-weight: 400;
	height: 70px;
	line-height: 48px;
	color: #eee;
	border-radius: 3px;
	font-family: "Jost", sans-serif;
	padding: 0 20px !important;
}

.section_contact textarea:focus,
.section_contact input:focus {
	background-color: #111;
	border-color: #333;
	outline: none;
}

.section_contact textarea {
	background-color: #111;
	outline: none;
	border: 1px solid #222;
	font-size: 16px;
	font-weight: 400;
	width: 100%;
	min-height: 250px;
	max-height: 500px;
	border-radius: 3px;
	color: #eee;
	font-family: "Jost", sans-serif;
	padding: 14px 20px !important;
}

.section_contact .input_wrapper {
	width: 100%;
	position: relative;
}

.section_contact .input_wrapper input,
.section_contact .input_wrapper textarea {
	position: relative;
	z-index: 3;
}

.section_contact textarea {
	height: 200px;
}

.section_contact .items {
	margin-left: -20px;
}

.section_contact .item {
	width: 100%;
	float: left;
	padding-left: 20px;
	margin-bottom: 20px;
}

.section_contact .item:last-child {
	margin-bottom: 0;
}

.section_contact .item.half {
	width: 50%;
}

.section_contact .contact_form a {
	display: block;
	line-height: 26px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	padding: 20px 20px;
	color: #eee;
	font-size: 18px;
	font-weight: 600;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	border: 2px solid #393939;
	border-radius: 50px;
}

.section_contact .contact_form a:hover {
	border-color: var(--mc);
	color: var(--mc);
}

.section_contact .contact_form a:focus {
	outline: 1px dashed #444;
}

.empty_notice {
	color: #dd3936;
	margin-bottom: 25px;
	display: none;
	text-align: left;
	font-weight: 500;
}

.error {
	display: none;
	color: #dd3936;
	text-align: left;
	font-weight: 500;
}

.success {
	display: none;
	color: #009140;
	margin-bottom: 25px;
	text-align: left;
	font-weight: 500;
}

.contact_error {
	color: #dd3936;
}

/*------------------------------------------------------------------*/
/*	13) LIGHT Version
/*------------------------------------------------------------------*/
.light .deebo_fn__cv .cv__content::-webkit-scrollbar-thumb {
	background-color: #aaa;
}

.light .deebo_fn__cv .cv__header {
	filter: drop-shadow(10px 0px 10px rgba(0, 0, 0, 0.1));
}

.light .deebo_fn__cv {
	background-color: #ddd;
}

.light .deebo_fn__cv .cv__bg2 {
	background-color: #eee;
}

.light .deebo_fn__cv .cv__header .in {
	background-color: #fff;
}

.light .deebo_fn__cv .cv__header h3 {
	color: #111;
}

.light .deebo_fn__cv .cv__header p.quote {
	background-color: #eee;
	color: #777;
}

.light .deebo_fn__cv .cv__header p.quote a {
	color: #333;
}

.light .cv__header .contact_info .icon {
	background-color: #eee;
}

.light .cv__header .contact_info p {
	background-color: #eee;
	color: #777;
}

.light .deebo_fn__cv .social a {
	background-color: #eee;
	color: #000;
}

.light .deebo_fn__cv .social a:hover {
	background-color: var(--mc);
	color: #fff;
}

.light .deebo_fn__cv .cv__content section {
	background-color: #fff;
	box-shadow: 0px 3px 4px rgb(0 0 0 / 15%);
}

.light .my_self h4 {
	color: #333;
}

.light .my_self h2 {
	color: #000;
}

.light .section_title h3 {
	color: #333;
}

.light .deebo_fn__cv .cv__content {
	color: #777;
}

.light .fn_cs_info_items li {
	background-color: #eee;
}

.light .fn_cs_info_items a {
	color: #333;
}

.light .fn_cs_boxed_list .item {
	background-color: #eee;
}

.light .fn_cs_boxed_list h3 {
	color: #333;
}

.light .fn_cs_info_items a:hover {
	color: var(--mc);
}

.light .fn_cs_progress_bar .progress_title {
	color: #333;
}

.light .fn_cs_progress_bar .progress_bg:after {
	background-color: #eee;
}

.light .fn_cs_service_list .item {
	background-color: #eee;
}

.light .fn_cs_service_list .item_left h3 {
	color: #333;
}

.light .fn_cs_service_list .item_right {
	border-left-color: rgba(0, 0, 0, 0.05);
}

.light .fn_cs_portfolio .portfolio_filter a {
	color: #333;
}

.light .fn_cs_portfolio .portfolio_filter a.current,
.light .fn_cs_portfolio .portfolio_filter a:hover {
	color: var(--mc);
}

.light .fn_cs_portfolio .mobile_title span {
	color: #777;
}

.light .fn_cs_portfolio .mobile_title {
	background: rgba(253, 253, 253, 0.2);
	/* For browsers that do not support gradients */
	background: -webkit-linear-gradient(rgba(253, 253, 253, 0), rgba(253, 253, 253, 0.6));
	/* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(rgba(253, 253, 253, 0), rgba(253, 253, 253, 0.6));
	/* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(rgba(253, 253, 253, 0), rgba(253, 253, 253, 0.6));
	/* For Firefox 3.6 to 15 */
	background: linear-gradient(rgba(253, 253, 253, 0), rgba(253, 253, 253, 1));
	/* Standard syntax */
}

.light h1,
.light h2,
.light h3,
.light h4,
.light h5,
.light h6 {
	color: #333;
}

.light .fn_cs_boxed_list .item_top h5 {
	color: #333;
}

.light .fn_cs_testimonials .item {
	background-color: #eee;
}

.light .fn_cs_testimonials .item_right {
	border-left-color: rgba(0, 0, 0, 0.05);
}

.light .fn_cs_testimonials .t_name p {
	color: #333;
}

.light .clients_wrapper {
	background-color: #eee;
}

.light .clients_wrapper ul li {
	border-color: #ddd;
}

.light .tips_content .item {
	background-color: #eee;
}

.light .tips_content p {
	color: #777;
}

.light .tips_content h5 a {
	color: #333;
}

.light .tips_content h5 a:hover {
	color: var(--mc);
}

.light .tips_content .read_more {
	background-color: transparent;
	color: #333;
}

.light .tips_content .read_more:hover {
	border-color: var(--mc);
	color: var(--mc);
}

.light .load_more a {
	color: #333;
}

.light .load_more a:hover {
	color: var(--mc);
}

.light .section_contact textarea:focus,
.light .section_contact input:focus,
.light .section_contact textarea,
.light .section_contact input {
	background-color: #eee;
	border-color: #eee;
	color: #333;
}

.light .section_contact .contact_form a {
	color: #333;
}

.light .section_contact .contact_form a:hover {
	color: var(--mc);
	border-color: var(--mc);
}

.light .deebo_fn_modalbox {
	background-color: rgba(255, 255, 255, .9);
}

.light .deebo_fn_modalbox .box_inner {
	background-color: #eee;
}

.light .deebo_fn_modalbox p {
	color: #777;
}

.light .fn__nav {
	border-top-color: rgba(0, 0, 0, 0.2);
}

.light .fn__nav:after {
	background-color: rgba(0, 0, 0, 0.2);
}

.light .fn__nav a {
	color: #333;
}

.light .deebo_fn_modalbox .modal_content::-webkit-scrollbar-thumb {
	background-color: #555;
	border-radius: 10px;
	border: none;
}

.light .deebo_fn_switcher_wrap label {
	background-color: #fff;
	color: #777;
}

.light .deebo_fn_switcher_wrap .slider {
	border-color: #d1d8e4;
}

.light .deebo_fn_switcher_wrap input:checked+.slider:before {
	background-color: #000;
}

/*------------------------------------------------------------------*/
/*	14) Responsive
/*------------------------------------------------------------------*/
@media(max-width: 1040px) {
	.deebo_fn_switcher_wrap {
		right: 30px;
	}

	.deebo_fn__cv {
		left: 10px;
		right: 10px;
		bottom: 10px;
		top: 10px;
	}

	.deebo_fn__cv .cv__header {
		top: 10px;
		left: 10px;
		bottom: 10px;
	}

	.deebo_fn__cv .cv__content {
		width: calc(70vw - 40px);
		right: 10px;
		top: 10px;
		bottom: 10px;
	}

	.deebo_fn__cv {
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		-webkit-flex-direction: column;
		-moz-flex-direction: column;
		-ms-flex-direction: column;
		-o-flex-direction: column;
		flex-direction: column;
		padding: 20px;
		overflow-y: scroll;
		height: 100vh;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 0;
	}

	.deebo_fn_cv .closer {
		z-index: 999;
	}

	.deebo_fn__cv {
		scrollbar-width: thin;
		scrollbar-color: #000 #000;
	}

	.deebo_fn__cv::-webkit-scrollbar {
		width: 8px;
		cursor: pointer;
	}

	.deebo_fn__cv:-webkit-scrollbar-track {
		background: #000;
	}

	.deebo_fn__cv::-webkit-scrollbar-thumb {
		background-color: var(--mc);
		border-radius: 10px;
	}

	.deebo_fn__cv .cv__header {
		width: 100%;
		position: relative;
		margin-bottom: 20px;
		top: auto;
		left: auto;
		right: auto;
		bottom: auto;
		transform: translateX(380px);
	}

	.deebo_fn__cv .cv__content {
		width: 100%;
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		bottom: auto;
		padding: 0;
		height: auto;
		overflow: initial;
		float: left;
		clear: both;
		min-height: fit-content;
		max-height: inherit;
		transform: translateX(-380px);
	}

	.section_header .content {
		-webkit-flex-direction: column;
		-moz-flex-direction: column;
		-ms-flex-direction: column;
		-o-flex-direction: column;
		flex-direction: column;
	}

	.section_header .right_hero_header {
		width: 100%;
	}

	.section_header .left_hero_header {
		max-width: 100%;
		padding-right: 0;
		margin-bottom: 100px;
	}

	.my_self {
		text-align: center;
	}

	.clients_wrapper ul li {
		width: 50%;
	}

	.fn_cs_portfolio .portfolio_list ul li {
		width: 50%;
	}
}

@media(max-width: 768px) {
	.fn_cs_portfolio .portfolio_list ul li {
		width: 100%;
	}
}

@media(max-width: 600px) {
	.tips_content .item {
		-webkit-flex-direction: column;
		-moz-flex-direction: column;
		-ms-flex-direction: column;
		-o-flex-direction: column;
		flex-direction: column;
	}

	.tips_content .item_right {
		display: none;
	}

	.fn_cs_testimonials .item {
		-webkit-flex-direction: column;
		-moz-flex-direction: column;
		-ms-flex-direction: column;
		-o-flex-direction: column;
		flex-direction: column;

	}

	.fn_cs_testimonials .item_right {
		width: 100%;
		min-width: 100%;
		border-left: none;
		border-top: 1px solid rgba(255, 255, 255, .05);
	}

	.fn_cs_service_list .item {
		-webkit-flex-direction: column;
		-moz-flex-direction: column;
		-ms-flex-direction: column;
		-o-flex-direction: column;
		flex-direction: column;
	}

	.fn_cs_service_list .item_right {
		width: 100%;
		min-width: 100%;
		border-left: none;
		border-top: 1px solid rgba(255, 255, 255, .05);
		padding: 10px 40px;
		text-align: left;
		-ms-align-items: flex-start;
		align-items: flex-start;
	}

	.fn_cs_boxed_list .item_top {
		-webkit-flex-direction: column;
		-moz-flex-direction: column;
		-ms-flex-direction: column;
		-o-flex-direction: column;
		flex-direction: column;
	}

	.fn_cs_boxed_list .item_top span {
		margin-left: 0;
	}

	.tips_content .img_wrapper img {
		min-width: 100%;
	}

	.section_contact .item.half,
	.fn_cs_info_items li,
	.clients_wrapper ul li {
		width: 100%;
	}

	.deebo_fn_totop {
		right: 20px;
		bottom: 20px;
	}

	.deebo_fn__cv {
		padding: 10px;
	}

	.deebo_fn__cv .cv__header .in {
		padding: 40px 20px;
	}

	.deebo_fn__cv .cv__content section {
		padding: 30px 20px;
	}

	.fn_cs_boxed_list .item {
		padding: 27px 20px 28px 20px;
	}

	.fn_cs_progress_bar .progress_percent {
		padding: 0 15px;
	}

	.fn_cs_testimonials .item_left,
	.fn_cs_service_list .item_left {
		padding: 27px 20px 28px 20px;
	}

	.fn_cs_service_list .item_right {
		padding: 15px 20px 11px;
	}

	.fn_cs_testimonials .item_right {
		padding: 30px 20px;
	}

	.right_container {
		padding: 0 30px;
	}
}

/* Enable normal scroll on mobile devices */
@media(max-width: 1040px) {
	body.resume-opened {
		height: inherit;
		overflow: auto;
	}

	.deebo_fn__cv {
		position: relative;
		height: inherit;
		overflow: hidden;
	}

	.deebo_fn_cv {
		position: relative;
		height: inherit;
	}
}

.herlusuy {
	color: #A78BFA;
	color: #F9A8D4;
	color: #FFF7FB;
	color: #2D2A32;
	color: #FFFFFF;
	color: #86EFAC;
	color: #FCA5A5;
}

/* Основной цвет: #A78BFA
Акцентный цвет: #F9A8D4
Фон сайта: #FFF7FB
Цвет основного текста: #2D2A32
Фон карточек: #FFFFFF
Цвет успеха: #86EFAC
Цвет ошибки: #FCA5A5 */
/* Service Cards Enhancement */
.service_list {
	margin-top: 50px;
	justify-content: center;
}

.service_list ul {
	gap: 30px;
	margin: 0;
	padding: 0;
}

.service_item {
	list-style: none;
	cursor: pointer;
	transition: transform 0.3s ease;
}

.service_item:hover {
	transform: translateY(-5px);
}

.service_item .item {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	padding: 30px;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.service_item .item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, #f00a77, #ff3d9a);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.service_item:hover .item::before {
	transform: scaleX(1);
}

.service_item .item_left h3 {
	font-size: 24px;
	color: #fff;
	margin-bottom: 10px;
	font-weight: 600;
}

.service_item .item_left p {
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	margin: 0;
}

.service_item .item_right {
	margin-top: 20px;
}

.service_item .price {
	display: inline-block;
	background: linear-gradient(135deg, #f00a77, #ff3d9a);
	color: #fff;
	padding: 10px 20px;
	border-radius: 25px;
	font-weight: 600;
	font-size: 16px;
}

/* Service Popup Content */
.service_popup_content {
	padding: 20px;
	animation: slideInContent 0.6s ease forwards;
}

@keyframes slideInContent {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.service_header {
	margin-bottom: 30px;
	padding-bottom: 20px;
	border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.service_header h2 {
	font-size: 32px;
	color: #fff;
	margin-bottom: 10px;
	animation: fadeInDown 0.6s ease 0.2s both;
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.service_header .subtitle {
	color: #f00a77;
	font-size: 16px;
	margin: 0;
	animation: fadeInDown 0.6s ease 0.3s both;
}

.service_body {
	display: grid;
	gap: 30px;
}

.service_features h4 {
	color: #fff;
	font-size: 20px;
	margin-bottom: 20px;
	animation: fadeInLeft 0.6s ease 0.4s both;
}

@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.service_features ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.service_features ul li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 15px;
	color: rgba(255, 255, 255, 0.9);
	animation: fadeInUp 0.6s ease both;
}

.service_features ul li:nth-child(1) {
	animation-delay: 0.5s;
}

.service_features ul li:nth-child(2) {
	animation-delay: 0.6s;
}

.service_features ul li:nth-child(3) {
	animation-delay: 0.7s;
}

.service_features ul li:nth-child(4) {
	animation-delay: 0.8s;
}

.service_features ul li:nth-child(5) {
	animation-delay: 0.9s;
}

.service_features ul li:nth-child(6) {
	animation-delay: 1s;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.service_features ul li svg {
	flex-shrink: 0;
	margin-top: 2px;
}

.service_details {
	background: rgba(255, 255, 255, 0.05);
	border-radius: 12px;
	padding: 25px;
	animation: scaleIn 0.6s ease 1.1s both;
}

@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0.9);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

.detail_item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.detail_item:last-child {
	border-bottom: none;
}

.detail_item .label {
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
}

.detail_item .value {
	color: #fff;
	font-weight: 600;
	font-size: 16px;
}

.detail_item.highlight {
	background: linear-gradient(135deg, rgba(240, 10, 119, 0.2), rgba(255, 61, 154, 0.2));
	margin: 15px -25px -25px;
	padding: 20px 25px;
	border-radius: 0 0 12px 12px;
}

.detail_item.highlight .value {
	color: #f00a77;
	font-size: 20px;
}

/* Modal Enhancements */
.deebo_fn_modalbox.opened {
	animation: modalFadeIn 0.4s ease;
}

@keyframes modalFadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.deebo_fn_modalbox .modal_content {
	animation: modalSlideUp 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes modalSlideUp {
	from {
		transform: translateY(100px) scale(0.9);
		opacity: 0;
	}

	to {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
}

/* Responsive */
@media (max-width: 768px) {
	.service_list ul {
		grid-template-columns: 1fr;
	}

	.service_header h2 {
		font-size: 24px;
	}

	.service_item .item {
		padding: 20px;
	}
}

/*  */
/* ============================================
   SERVICES MODAL POPUP STYLES
   ============================================ */

/* Cursor pointer for service items */
.section_services .service_list .modal_item {
	cursor: pointer;
}

.section_services .service_list .modal_item .service_item {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.section_services .service_list .modal_item:hover .service_item {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(240, 10, 119, 0.3);
}

/* Service Popup Content */
.service_popup_content {
	padding: 20px;
	animation: slideInContent 0.6s ease forwards;
}

@keyframes slideInContent {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.service_header {
	margin-bottom: 30px;
	padding-bottom: 20px;
	border-bottom: 2px solid #222;
}

.service_header h2 {
	font-size: 32px;
	color: #fff;
	margin-bottom: 10px;
	animation: fadeInDown 0.6s ease 0.2s both;
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.service_header .subtitle {
	color: #f00a77;
	font-size: 16px;
	margin: 0;
	animation: fadeInDown 0.6s ease 0.3s both;
}

.service_body {
	display: grid;
	gap: 30px;
}

.service_features h4 {
	color: #fff;
	font-size: 20px;
	margin-bottom: 20px;
	animation: fadeInLeft 0.6s ease 0.4s both;
}

@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.service_features ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.service_features ul li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 15px;
	color: rgba(255, 255, 255, 0.9);
	animation: fadeInUp 0.6s ease both;
}

.service_features ul li:nth-child(1) {
	animation-delay: 0.5s;
}

.service_features ul li:nth-child(2) {
	animation-delay: 0.6s;
}

.service_features ul li:nth-child(3) {
	animation-delay: 0.7s;
}

.service_features ul li:nth-child(4) {
	animation-delay: 0.8s;
}

.service_features ul li:nth-child(5) {
	animation-delay: 0.9s;
}

.service_features ul li:nth-child(6) {
	animation-delay: 1s;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.service_features ul li svg {
	flex-shrink: 0;
	margin-top: 2px;
}

.service_details {
	background: #0a0a0a;
	border-radius: 12px;
	padding: 25px;
	animation: scaleIn 0.6s ease 1.1s both;
}

@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0.9);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

.service_details .detail_item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid #222;
}

.service_details .detail_item:last-child {
	border-bottom: none;
}

.service_details .detail_item .label {
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
}

.service_details .detail_item .value {
	color: #fff;
	font-weight: 600;
	font-size: 16px;
}

.service_details .detail_item.highlight {
	background: linear-gradient(135deg, rgba(240, 10, 119, 0.2), rgba(255, 61, 154, 0.2));
	margin: 15px -25px -25px;
	padding: 20px 25px;
	border-radius: 0 0 12px 12px;
}

.service_details .detail_item.highlight .value {
	color: #f00a77;
	font-size: 20px;
}

/* Modal animation enhancements */
.deebo_fn_modalbox.opened {
	animation: modalFadeIn 0.4s ease;
}

@keyframes modalFadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.deebo_fn_modalbox .modal_content {
	animation: modalSlideUp 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes modalSlideUp {
	from {
		transform: translateY(100px) scale(0.9);
		opacity: 0;
	}

	to {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
}

/* Responsive */
@media (max-width: 768px) {
	.service_header h2 {
		font-size: 24px;
	}

	.service_details {
		padding: 20px;
	}

	.service_details .detail_item.highlight {
		margin: 15px -20px -20px;
		padding: 15px 20px;
	}
}

/*  */
/* ============================================
   SERVICES MODAL POPUP STYLES ONLY
   (Keeping original card design)
   ============================================ */

/* Cursor pointer for service items */
.section_services .service_list .modal_item {
	cursor: pointer;
}

/* Subtle hover effect - keeping it minimal */
.section_services .service_list .modal_item:hover .service_item {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Service Popup Content */
.service_popup_content {
	padding: 20px;
	animation: slideInContent 0.6s ease forwards;
}

@keyframes slideInContent {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.service_header {
	margin-bottom: 30px;
	padding-bottom: 20px;
	border-bottom: 2px solid #222;
}

.service_header h2 {
	font-size: 32px;
	color: #fff;
	margin-bottom: 10px;
	animation: fadeInDown 0.6s ease 0.2s both;
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.service_header .subtitle {
	color: #f00a77;
	font-size: 16px;
	margin: 0;
	animation: fadeInDown 0.6s ease 0.3s both;
}

.service_body {
	display: grid;
	gap: 30px;
}

.service_features h4 {
	color: #fff;
	font-size: 20px;
	margin-bottom: 20px;
	animation: fadeInLeft 0.6s ease 0.4s both;
}

@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.service_features ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.service_features ul li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 15px;
	color: rgba(255, 255, 255, 0.9);
	animation: fadeInUp 0.6s ease both;
}

.service_features ul li:nth-child(1) {
	animation-delay: 0.5s;
}

.service_features ul li:nth-child(2) {
	animation-delay: 0.6s;
}

.service_features ul li:nth-child(3) {
	animation-delay: 0.7s;
}

.service_features ul li:nth-child(4) {
	animation-delay: 0.8s;
}

.service_features ul li:nth-child(5) {
	animation-delay: 0.9s;
}

.service_features ul li:nth-child(6) {
	animation-delay: 1s;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.service_features ul li svg {
	flex-shrink: 0;
	margin-top: 2px;
}

.service_details {
	background: #0a0a0a;
	border-radius: 12px;
	padding: 25px;
	animation: scaleIn 0.6s ease 1.1s both;
}

@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0.9);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

.service_details .detail_item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid #222;
}

.service_details .detail_item:last-child {
	border-bottom: none;
}

.service_details .detail_item .label {
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
}

.service_details .detail_item .value {
	color: #fff;
	font-weight: 600;
	font-size: 16px;
}

.service_details .detail_item.highlight {
	background: linear-gradient(135deg, rgba(240, 10, 119, 0.2), rgba(255, 61, 154, 0.2));
	margin: 15px -25px -25px;
	padding: 20px 25px;
	border-radius: 0 0 12px 12px;
}

.service_details .detail_item.highlight .value {
	color: #f00a77;
	font-size: 20px;
}

/* Modal animation enhancements */
.deebo_fn_modalbox.opened {
	animation: modalFadeIn 0.4s ease;
}

@keyframes modalFadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.deebo_fn_modalbox .modal_content {
	animation: modalSlideUp 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes modalSlideUp {
	from {
		transform: translateY(100px) scale(0.9);
		opacity: 0;
	}

	to {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
}

/* Responsive */
@media (max-width: 768px) {
	.service_header h2 {
		font-size: 24px;
	}

	.service_details {
		padding: 20px;
	}

	.service_details .detail_item.highlight {
		margin: 15px -20px -20px;
		padding: 15px 20px;
	}
}

/*  */
/* ============================================
   SERVICE LIST - MODAL FUNCTIONALITY
   (Keeping original fn_cs_service_list design)
   ============================================ */

/* Make service items clickable */
.fn_cs_service_list .modal_item {
	cursor: pointer;
}

/* Hover effect for service items */
.fn_cs_service_list .modal_item .item {
	transition: all 0.3s ease;
}

.fn_cs_service_list .modal_item:hover .item {
	transform: translateX(5px);
	box-shadow: 0 5px 20px rgba(240, 10, 119, 0.2);
}

.fn_cs_service_list .modal_item:hover .item_left:after {
	height: 100%;
}

/* Service Popup Content Styles */
.service_popup_content {
	padding: 20px;
	animation: slideInContent 0.6s ease forwards;
}

@keyframes slideInContent {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.service_header {
	margin-bottom: 30px;
	padding-bottom: 20px;
	border-bottom: 2px solid #222;
}

.service_header h2 {
	font-size: 32px;
	color: #fff;
	margin-bottom: 10px;
	animation: fadeInDown 0.6s ease 0.2s both;
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.service_header .subtitle {
	color: #f00a77;
	font-size: 16px;
	margin: 0;
	animation: fadeInDown 0.6s ease 0.3s both;
}

.service_body {
	display: grid;
	gap: 30px;
}

.service_features h4 {
	color: #fff;
	font-size: 20px;
	margin-bottom: 20px;
	animation: fadeInLeft 0.6s ease 0.4s both;
}

@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.service_features ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.service_features ul li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 15px;
	color: rgba(255, 255, 255, 0.9);
	animation: fadeInUp 0.6s ease both;
}

.service_features ul li:nth-child(1) {
	animation-delay: 0.5s;
}

.service_features ul li:nth-child(2) {
	animation-delay: 0.6s;
}

.service_features ul li:nth-child(3) {
	animation-delay: 0.7s;
}

.service_features ul li:nth-child(4) {
	animation-delay: 0.8s;
}

.service_features ul li:nth-child(5) {
	animation-delay: 0.9s;
}

.service_features ul li:nth-child(6) {
	animation-delay: 1s;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.service_features ul li svg {
	flex-shrink: 0;
	margin-top: 2px;
}

.service_details {
	background: #0a0a0a;
	border-radius: 12px;
	padding: 25px;
	animation: scaleIn 0.6s ease 1.1s both;
}

@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0.9);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

.service_details .detail_item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid #222;
}

.service_details .detail_item:last-child {
	border-bottom: none;
}

.service_details .detail_item .label {
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
}

.service_details .detail_item .value {
	color: #fff;
	font-weight: 600;
	font-size: 16px;
}

.service_details .detail_item.highlight {
	background: linear-gradient(135deg, rgba(240, 10, 119, 0.2), rgba(255, 61, 154, 0.2));
	margin: 15px -25px -25px;
	padding: 20px 25px;
	border-radius: 0 0 12px 12px;
}

.service_details .detail_item.highlight .value {
	color: #f00a77;
	font-size: 20px;
}

/* Modal animation enhancements */
.deebo_fn_modalbox.opened {
	animation: modalFadeIn 0.4s ease;
}

@keyframes modalFadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.deebo_fn_modalbox .modal_content {
	animation: modalSlideUp 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes modalSlideUp {
	from {
		transform: translateY(100px) scale(0.9);
		opacity: 0;
	}

	to {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
}

/* Responsive */
@media (max-width: 768px) {
	.service_header h2 {
		font-size: 24px;
	}

	.service_details {
		padding: 20px;
	}

	.service_details .detail_item.highlight {
		margin: 15px -20px -20px;
		padding: 15px 20px;
	}
}

/*  */
/* ============================================
   INTERACTIVE SKILLS SECTION
   ============================================ */

/* Skills Categories */
.skills_categories {
	display: flex;
	gap: 15px;
	margin-top: 40px;
	margin-bottom: 40px;
	flex-wrap: wrap;
	justify-content: center;
}

.skill_category {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 24px;
	background: rgba(255, 255, 255, 0.05);
	border: 2px solid rgba(255, 255, 255, 0.1);
	border-radius: 30px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

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

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

.skill_category svg {
	width: 20px;
	height: 20px;
	transition: transform 0.3s ease;
}

.skill_category:hover {
	border-color: rgba(240, 10, 119, 0.5);
	color: #fff;
	transform: translateY(-3px);
}

.skill_category:hover svg {
	transform: scale(1.1);
}

.skill_category.active {
	background: linear-gradient(135deg, #f00a77, #ff3d9a);
	border-color: #f00a77;
	color: #fff;
	box-shadow: 0 5px 20px rgba(240, 10, 119, 0.4);
}

.skill_category.active svg {
	transform: scale(1.1) rotate(5deg);
}

/* Skills Container */
.skills_container {
	display: block;
	margin-top: 40px;
	position: relative;
}

/* Skill Card */
/* Skill Card */
.skill_card {
	background: linear-gradient(135deg, rgba(17, 17, 17, 0.9), rgba(25, 25, 25, 0.9));
	border: 1px solid rgba(240, 10, 119, 0.2);
	border-radius: 16px;
	padding: 35px;
	position: relative;
	overflow: hidden;
	opacity: 1;
	transform: translateY(0) scale(1);
	transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	display: block;
	pointer-events: auto;
}

.skill_card.active {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

/* Skill Content */
.skill_content {
	opacity: 0;
	transform: translateY(30px) scale(0.9);
	transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	display: none;
	pointer-events: none;
}

.skill_content.active {
	opacity: 1;
	transform: translateY(0) scale(1);
	display: block;
	pointer-events: auto;
}

.skill_content.hiding {
	animation: contentDisappear 0.4s ease forwards;
	display: block;
}

.skill_content.showing {
	animation: contentAppear 0.6s ease forwards;
	display: block;
}

@keyframes contentDisappear {
	0% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}

	100% {
		opacity: 0;
		transform: translateY(-30px) scale(0.9);
	}
}

@keyframes contentAppear {
	0% {
		opacity: 0;
		transform: translateY(30px) scale(0.9) rotateX(10deg);
	}

	100% {
		opacity: 1;
		transform: translateY(0) scale(1) rotateX(0deg);
	}
}

/* Card Gradient Border Effect */
.skill_card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 16px;
	padding: 2px;
	background: linear-gradient(135deg, #f00a77, #ff3d9a);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.skill_card:hover::before {
	opacity: 1;
}

/* Card Header */
.skill_card_header {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 25px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.skill_icon {
	width: 50px;
	height: 50px;
	min-width: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(240, 10, 119, 0.1);
	border: 2px solid #f00a77;
	border-radius: 12px;
	color: #f00a77;
	transition: all 0.4s ease;
}

.skill_card:hover .skill_icon {
	background: #f00a77;
	color: #fff;
	transform: rotate(360deg) scale(1.1);
	box-shadow: 0 0 20px rgba(240, 10, 119, 0.5);
}

.skill_card_header h4 {
	margin: 0;
	font-size: 22px;
	color: #fff;
	font-weight: 700;
}

/* Skill List */
.skill_list {
	list-style: none;
	margin: 0;
	padding: 0;
	margin-bottom: 25px;
}

.skill_list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 15px;
	color: rgba(255, 255, 255, 0.8);
	font-size: 15px;
	line-height: 1.6;
	opacity: 0;
	transform: translateX(-20px);
}

.skill_content.active .skill_list li {
	animation: listItemAppear 0.5s ease forwards;
}

.skill_content.active .skill_list li:nth-child(1) {
	animation-delay: 0.2s;
}

.skill_content.active .skill_list li:nth-child(2) {
	animation-delay: 0.3s;
}

.skill_content.active .skill_list li:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes listItemAppear {
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.skill_bullet {
	width: 8px;
	height: 8px;
	min-width: 8px;
	background: #f00a77;
	border-radius: 50%;
	margin-top: 8px;
	box-shadow: 0 0 10px rgba(240, 10, 119, 0.5);
	animation: bulletPulse 2s ease-in-out infinite;
}

@keyframes bulletPulse {

	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.2);
		box-shadow: 0 0 15px rgba(240, 10, 119, 0.8);
	}
}

/* Skill Level */
.skill_level {
	margin-top: 25px;
}

.level_bar {
	width: 100%;
	height: 8px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	margin-bottom: 10px;
}

.level_fill {
	height: 100%;
	background: linear-gradient(90deg, #f00a77, #ff3d9a);
	border-radius: 10px;
	width: 0;
	transition: width 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	position: relative;
	box-shadow: 0 0 10px rgba(240, 10, 119, 0.5);
}

.skill_content.active .level_fill[data-level="95"] {
	width: 95%;
}

.skill_content.active .level_fill[data-level="90"] {
	width: 90%;
}

.skill_content.active .level_fill[data-level="75"] {
	width: 75%;
}

.level_fill::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	animation: shimmer 2s infinite;
}

@keyframes shimmer {
	0% {
		transform: translateX(-100%);
	}

	100% {
		transform: translateX(100%);
	}
}

.level_text {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.6);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* Hover Effects */
.skill_card {
	transition: all 0.4s ease;
}

.skill_card:hover {
	transform: translateY(-5px) scale(1.02);
	box-shadow: 0 20px 60px rgba(240, 10, 119, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
	.skills_categories {
		gap: 10px;
	}

	.skill_category {
		padding: 10px 18px;
		font-size: 14px;
	}

	.skill_category svg {
		width: 18px;
		height: 18px;
	}

	.skills_container {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.skill_card {
		padding: 25px;
	}

	.skill_card_header h4 {
		font-size: 20px;
	}
}

/*  */


/* ============================================
   PHOTO CAROUSEL GALLERY
   3D Interactive Carousel
   ============================================ */

#cv_gallery {
	padding: 100px 0;
}

.photo_carousel_wrapper {
	position: relative;
	margin-top: 60px;
	perspective: 1500px;
}

/* Carousel Container */
.photo_carousel {
	width: 100%;
	height: 500px;
	position: relative;
	overflow: visible;
}

.carousel_track {
	width: 100%;
	height: 100%;
	position: relative;
	transform-style: preserve-3d;
	transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Carousel Items */
.carousel_item {
	position: absolute;
	width: 500px;
	height: 400px;
	left: 50%;
	top: 50%;
	transform-origin: center;
	transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	cursor: pointer;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.carousel_item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(240, 10, 119, 0.3), rgba(255, 61, 154, 0.3));
	opacity: 0;
	transition: opacity 0.4s ease;
	z-index: 1;
	pointer-events: none;
}

.carousel_item:hover::before {
	opacity: 1;
}

.carousel_item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.carousel_item:hover img {
	transform: scale(1.1);
}

/* Active Item (Center) */
.carousel_item.active {
	z-index: 10;
	transform: translate(-50%, -50%) scale(1.2) rotateY(0deg);
	box-shadow:
		0 30px 80px rgba(240, 10, 119, 0.4),
		0 0 40px rgba(240, 10, 119, 0.2);
}

.carousel_item.active::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 3px solid #f00a77;
	border-radius: 16px;
	pointer-events: none;
}

/* Previous Item (Left) */
.carousel_item.prev {
	z-index: 5;
	transform: translate(-120%, -50%) scale(0.8) rotateY(35deg);
	opacity: 0.6;
	filter: brightness(0.7);
}

.carousel_item.prev:hover {
	opacity: 0.9;
	filter: brightness(0.9);
}

/* Next Item (Right) */
.carousel_item.next {
	z-index: 5;
	transform: translate(20%, -50%) scale(0.8) rotateY(-35deg);
	opacity: 0.6;
	filter: brightness(0.7);
}

.carousel_item.next:hover {
	opacity: 0.9;
	filter: brightness(0.9);
}

/* Far Left */
.carousel_item.far-prev {
	z-index: 1;
	transform: translate(-200%, -50%) scale(0.5) rotateY(45deg);
	opacity: 0.3;
	filter: brightness(0.5);
}

/* Far Right */
.carousel_item.far-next {
	z-index: 1;
	transform: translate(100%, -50%) scale(0.5) rotateY(-45deg);
	opacity: 0.3;
	filter: brightness(0.5);
}

/* Hidden Items */
.carousel_item.hidden {
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.3);
	pointer-events: none;
}

/* Navigation Controls */
.carousel_controls {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between;
	padding: 0 20px;
	pointer-events: none;
	z-index: 20;
}

.carousel_btn {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: rgba(17, 17, 17, 0.8);
	border: 2px solid rgba(240, 10, 119, 0.5);
	color: #f00a77;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	pointer-events: auto;
	backdrop-filter: blur(10px);
}

.carousel_btn:hover {
	background: #f00a77;
	color: #fff;
	border-color: #f00a77;
	transform: scale(1.1);
	box-shadow: 0 0 30px rgba(240, 10, 119, 0.6);
}

.carousel_btn:active {
	transform: scale(0.95);
}

.carousel_btn svg {
	width: 24px;
	height: 24px;
}

/* Dots Navigation */
.carousel_dots {
	position: absolute;
	bottom: -60px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 12px;
	z-index: 20;
}

.carousel_dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
}

.carousel_dot::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	background: #f00a77;
	border-radius: 50%;
	transition: all 0.3s ease;
}

.carousel_dot:hover {
	background: rgba(240, 10, 119, 0.5);
}

.carousel_dot.active {
	background: transparent;
	border: 2px solid #f00a77;
}

.carousel_dot.active::before {
	width: 6px;
	height: 6px;
}

/* Counter */
.carousel_counter {
	position: absolute;
	top: -50px;
	right: 20px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 18px;
	font-weight: 700;
	color: #fff;
}

.carousel_counter .current {
	color: #f00a77;
	font-size: 32px;
}

.carousel_counter .separator {
	color: rgba(255, 255, 255, 0.3);
}

.carousel_counter .total {
	color: rgba(255, 255, 255, 0.6);
	font-size: 24px;
}

/* Loading State */
.carousel_loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-size: 18px;
	z-index: 100;
}

.carousel_loading::after {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 3px solid rgba(240, 10, 119, 0.3);
	border-top-color: #f00a77;
	border-radius: 50%;
	margin-left: 10px;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* Responsive Design */
@media (max-width: 1200px) {
	.carousel_item {
		width: 400px;
		height: 320px;
	}
}

@media (max-width: 768px) {
	.photo_carousel {
		height: 400px;
	}

	.carousel_item {
		width: 300px;
		height: 240px;
	}

	.carousel_item.active {
		transform: translate(-50%, -50%) scale(1.1) rotateY(0deg);
	}

	.carousel_item.prev {
		transform: translate(-130%, -50%) scale(0.6) rotateY(25deg);
	}

	.carousel_item.next {
		transform: translate(30%, -50%) scale(0.6) rotateY(-25deg);
	}

	.carousel_item.far-prev,
	.carousel_item.far-next {
		display: none;
	}

	.carousel_btn {
		width: 50px;
		height: 50px;
	}

	.carousel_controls {
		padding: 0 10px;
	}
}

@media (max-width: 480px) {
	.photo_carousel {
		height: 300px;
	}

	.carousel_item {
		width: 250px;
		height: 200px;
	}

	.carousel_item.active {
		transform: translate(-50%, -50%) scale(1) rotateY(0deg);
	}

	.carousel_item.prev,
	.carousel_item.next {
		opacity: 0.3;
		transform: translate(-50%, -50%) scale(0.7);
	}

	.carousel_counter {
		top: -40px;
		right: 10px;
		font-size: 14px;
	}

	.carousel_counter .current {
		font-size: 24px;
	}

	.carousel_counter .total {
		font-size: 18px;
	}
}

/* Touch Swipe Indicator */
.carousel_swipe_hint {
	position: absolute;
	bottom: -100px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.5);
	font-size: 14px;
	display: none;
}

@media (max-width: 768px) {
	.carousel_swipe_hint {
		display: block;
		animation: swipeHint 2s ease-in-out infinite;
	}
}

@keyframes swipeHint {

	0%,
	100% {
		opacity: 0.3;
		transform: translateX(-50%);
	}

	50% {
		opacity: 0.7;
		transform: translateX(-40%);
	}
}

/*  */
/* ============================================
   CV SECTIONS SCROLL ANIMATIONS
   With Hide/Show Transitions
   ============================================ */

/* Prepare sections for animation */
.deebo_fn__cv section[id^="cv_"] {
	opacity: 0;
	transform: translateY(100px);
	transition: none;
}

/* Active section state */
.deebo_fn__cv section[id^="cv_"].section-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Hiding state for collapse animation */
.deebo_fn__cv section[id^="cv_"].section-hiding {
	pointer-events: none;
}

/* Different animation types for variety */

/* Slide Up with Fade */
.deebo_fn__cv section[id^="cv_"].anim-slide-up {
	animation: slideUpFade 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.deebo_fn__cv section[id^="cv_"].section-hiding.anim-slide-up {
	animation: slideUpFadeOut 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

@keyframes slideUpFade {
	0% {
		opacity: 0;
		transform: translateY(100px) scale(0.95);
	}

	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes slideUpFadeOut {
	0% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}

	100% {
		opacity: 0;
		transform: translateY(-80px) scale(0.95);
	}
}

/* Slide from Right with Rotation */
.deebo_fn__cv section[id^="cv_"].anim-slide-rotate {
	animation: slideRotate 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.deebo_fn__cv section[id^="cv_"].section-hiding.anim-slide-rotate {
	animation: slideRotateOut 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

@keyframes slideRotate {
	0% {
		opacity: 0;
		transform: translateX(150px) rotateY(20deg) scale(0.9);
	}

	100% {
		opacity: 1;
		transform: translateX(0) rotateY(0deg) scale(1);
	}
}

@keyframes slideRotateOut {
	0% {
		opacity: 1;
		transform: translateX(0) rotateY(0deg) scale(1);
	}

	100% {
		opacity: 0;
		transform: translateX(-150px) rotateY(-20deg) scale(0.9);
	}
}

/* 3D Flip Effect */
.deebo_fn__cv section[id^="cv_"].anim-flip {
	transform-style: preserve-3d;
	animation: flip3D 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.deebo_fn__cv section[id^="cv_"].section-hiding.anim-flip {
	animation: flip3DOut 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

@keyframes flip3D {
	0% {
		opacity: 0;
		transform: perspective(1000px) rotateX(-20deg) translateY(50px);
	}

	100% {
		opacity: 1;
		transform: perspective(1000px) rotateX(0deg) translateY(0);
	}
}

@keyframes flip3DOut {
	0% {
		opacity: 1;
		transform: perspective(1000px) rotateX(0deg) translateY(0);
	}

	100% {
		opacity: 0;
		transform: perspective(1000px) rotateX(20deg) translateY(-50px);
	}
}

/* Zoom Bounce */
.deebo_fn__cv section[id^="cv_"].anim-zoom {
	animation: zoomBounce 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.deebo_fn__cv section[id^="cv_"].section-hiding.anim-zoom {
	animation: zoomBounceOut 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

@keyframes zoomBounce {
	0% {
		opacity: 0;
		transform: scale(0.3) translateY(100px);
	}

	50% {
		transform: scale(1.05) translateY(-10px);
	}

	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

@keyframes zoomBounceOut {
	0% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}

	100% {
		opacity: 0;
		transform: scale(0.3) translateY(-100px);
	}
}

/* Wave Effect */
.deebo_fn__cv section[id^="cv_"].anim-wave {
	animation: waveEffect 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.deebo_fn__cv section[id^="cv_"].section-hiding.anim-wave {
	animation: waveEffectOut 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

@keyframes waveEffect {
	0% {
		opacity: 0;
		transform: translateY(100px) skewY(5deg);
	}

	60% {
		transform: translateY(-20px) skewY(-2deg);
	}

	100% {
		opacity: 1;
		transform: translateY(0) skewY(0deg);
	}
}

@keyframes waveEffectOut {
	0% {
		opacity: 1;
		transform: translateY(0) skewY(0deg);
	}

	100% {
		opacity: 0;
		transform: translateY(-80px) skewY(-5deg);
	}
}

/* Spiral Entrance */
.deebo_fn__cv section[id^="cv_"].anim-spiral {
	animation: spiralIn 1.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.deebo_fn__cv section[id^="cv_"].section-hiding.anim-spiral {
	animation: spiralOut 0.7s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

@keyframes spiralIn {
	0% {
		opacity: 0;
		transform: scale(0.5) rotate(180deg) translateY(100px);
	}

	100% {
		opacity: 1;
		transform: scale(1) rotate(0deg) translateY(0);
	}
}

@keyframes spiralOut {
	0% {
		opacity: 1;
		transform: scale(1) rotate(0deg) translateY(0);
	}

	100% {
		opacity: 0;
		transform: scale(0.5) rotate(-180deg) translateY(-100px);
	}
}

/* Elastic Bounce */
.deebo_fn__cv section[id^="cv_"].anim-elastic {
	animation: elasticBounce 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.deebo_fn__cv section[id^="cv_"].section-hiding.anim-elastic {
	animation: elasticBounceOut 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

@keyframes elasticBounce {
	0% {
		opacity: 0;
		transform: scale(0.3) translateY(150px);
	}

	40% {
		transform: scale(1.1) translateY(-30px);
	}

	60% {
		transform: scale(0.95) translateY(10px);
	}

	80% {
		transform: scale(1.02) translateY(-5px);
	}

	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

@keyframes elasticBounceOut {
	0% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}

	100% {
		opacity: 0;
		transform: scale(0.3) translateY(-150px);
	}
}

/* Fade with Blur */
.deebo_fn__cv section[id^="cv_"].anim-blur {
	animation: fadeBlur 1s ease-out forwards;
}

.deebo_fn__cv section[id^="cv_"].section-hiding.anim-blur {
	animation: fadeBlurOut 0.5s ease-in forwards;
}

@keyframes fadeBlur {
	0% {
		opacity: 0;
		filter: blur(20px);
		transform: translateY(80px);
	}

	100% {
		opacity: 1;
		filter: blur(0);
		transform: translateY(0);
	}
}

@keyframes fadeBlurOut {
	0% {
		opacity: 1;
		filter: blur(0);
		transform: translateY(0);
	}

	100% {
		opacity: 0;
		filter: blur(20px);
		transform: translateY(-80px);
	}
}

/* Glitch Effect */
.deebo_fn__cv section[id^="cv_"].anim-glitch {
	animation: glitchEffect 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.deebo_fn__cv section[id^="cv_"].section-hiding.anim-glitch {
	animation: glitchEffectOut 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

@keyframes glitchEffect {
	0% {
		opacity: 0;
		transform: translateY(100px);
		clip-path: polygon(0 0, 100% 0, 100% 45%, 0 55%);
	}

	20% {
		clip-path: polygon(0 10%, 100% 0, 100% 70%, 0 60%);
		transform: translateY(80px) translateX(-10px);
	}

	40% {
		clip-path: polygon(0 20%, 100% 30%, 100% 80%, 0 70%);
		transform: translateY(60px) translateX(10px);
	}

	60% {
		clip-path: polygon(0 30%, 100% 20%, 100% 90%, 0 80%);
		transform: translateY(40px) translateX(-5px);
	}

	80% {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
		transform: translateY(20px);
	}

	100% {
		opacity: 1;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
		transform: translateY(0) translateX(0);
	}
}

@keyframes glitchEffectOut {
	0% {
		opacity: 1;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
		transform: translateY(0);
	}

	100% {
		opacity: 0;
		clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
		transform: translateY(-100px);
	}
}

/* Curtain Reveal */
.deebo_fn__cv section[id^="cv_"].anim-curtain {
	position: relative;
	animation: curtainReveal 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.deebo_fn__cv section[id^="cv_"].section-hiding.anim-curtain {
	animation: curtainRevealOut 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

@keyframes curtainReveal {
	0% {
		opacity: 0;
		clip-path: inset(0 100% 0 0);
		transform: translateY(50px);
	}

	100% {
		opacity: 1;
		clip-path: inset(0 0 0 0);
		transform: translateY(0);
	}
}

@keyframes curtainRevealOut {
	0% {
		opacity: 1;
		clip-path: inset(0 0 0 0);
		transform: translateY(0);
	}

	100% {
		opacity: 0;
		clip-path: inset(0 0 0 100%);
		transform: translateY(-50px);
	}
}

/* Particle Explosion */
.deebo_fn__cv section[id^="cv_"].anim-particle {
	animation: particleExplosion 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.deebo_fn__cv section[id^="cv_"].section-hiding.anim-particle {
	animation: particleExplosionOut 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

@keyframes particleExplosion {
	0% {
		opacity: 0;
		transform: scale(2) translateY(100px);
		filter: brightness(3);
	}

	50% {
		filter: brightness(1.5);
	}

	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
		filter: brightness(1);
	}
}

@keyframes particleExplosionOut {
	0% {
		opacity: 1;
		transform: scale(1) translateY(0);
		filter: brightness(1);
	}

	100% {
		opacity: 0;
		transform: scale(0.3) translateY(-100px);
		filter: brightness(0.3);
	}
}

/* Biography Section Specific Styles */
#cv_biography .bio_content {
	animation: bioContentFadeIn 0.8s ease-out 0.3s both;
}

@keyframes bioContentFadeIn {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

#cv_biography .bio_intro {
	display: flex;
	align-items: center;
	gap: 30px;
	margin-bottom: 30px;
	padding-bottom: 30px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#cv_biography .bio_avatar {
	flex-shrink: 0;
}

#cv_biography .avatar_circle {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: linear-gradient(135deg, #f00a77, #ff3d9a);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 30px rgba(240, 10, 119, 0.4);
	animation: avatarPulse 3s ease-in-out infinite;
}

@keyframes avatarPulse {

	0%,
	100% {
		box-shadow: 0 10px 30px rgba(240, 10, 119, 0.4);
	}

	50% {
		box-shadow: 0 15px 40px rgba(240, 10, 119, 0.6);
	}
}

#cv_biography .avatar_letter {
	font-size: 48px;
	font-weight: 700;
	color: #fff;
}

#cv_biography .bio_header h4 {
	font-size: 32px;
	color: #fff;
	margin-bottom: 10px;
}

#cv_biography .bio_tagline {
	color: rgba(255, 255, 255, 0.7);
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
}

#cv_biography .bio_description {
	margin-bottom: 30px;
}

#cv_biography .bio_highlight {
	font-size: 18px;
	color: #f00a77;
	font-weight: 600;
	line-height: 1.8;
	padding: 20px;
	background: rgba(240, 10, 119, 0.1);
	border-left: 3px solid #f00a77;
	border-radius: 8px;
	margin: 0;
}

#cv_biography .bio_details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
	margin-bottom: 30px;
}

#cv_biography .bio_item {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	padding: 15px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 8px;
	transition: all 0.3s ease;
}

#cv_biography .bio_item:hover {
	background: rgba(240, 10, 119, 0.1);
	transform: translateX(5px);
}

#cv_biography .bio_item svg {
	flex-shrink: 0;
	margin-top: 3px;
}

#cv_biography .bio_item_text {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

#cv_biography .bio_item_text .label {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
	letter-spacing: 1px;
}

#cv_biography .bio_item_text .value {
	font-size: 14px;
	color: #fff;
	font-weight: 600;
}

#cv_biography .bio_main {
	margin-top: 30px;
}

#cv_biography .bio_main p {
	color: rgba(255, 255, 255, 0.8);
	font-size: 15px;
	line-height: 1.8;
	margin-bottom: 20px;
}

/* Content elements stagger animation */
.section-visible .deebo_fn_title,
.section-visible .fn_cs_service_list li,
.section-visible .skill_card,
.section-visible .photo_carousel,
.section-visible .fn_cs_progress_bar .progress_item,
.section-visible .section_contact .contact_form,
.section-visible .bio_content>* {
	animation: contentFadeIn 0.8s ease-out forwards;
	opacity: 0;
}

.section-visible .deebo_fn_title {
	animation-delay: 0.2s;
}

.section-visible .fn_cs_service_list li:nth-child(1) {
	animation-delay: 0.3s;
}

.section-visible .fn_cs_service_list li:nth-child(2) {
	animation-delay: 0.4s;
}

.section-visible .fn_cs_service_list li:nth-child(3) {
	animation-delay: 0.5s;
}

.section-visible .skill_card {
	animation-delay: 0.3s;
}

.section-visible .photo_carousel {
	animation-delay: 0.3s;
}

.section-visible .fn_cs_progress_bar .progress_item:nth-child(1) {
	animation-delay: 0.3s;
}

.section-visible .fn_cs_progress_bar .progress_item:nth-child(2) {
	animation-delay: 0.4s;
}

.section-visible .fn_cs_progress_bar .progress_item:nth-child(3) {
	animation-delay: 0.5s;
}

.section-visible .section_contact .contact_form {
	animation-delay: 0.3s;
}

.section-visible .bio_intro {
	animation-delay: 0.3s;
}

.section-visible .bio_description {
	animation-delay: 0.4s;
}

.section-visible .bio_details {
	animation-delay: 0.5s;
}

.section-visible .bio_main {
	animation-delay: 0.6s;
}

@keyframes contentFadeIn {
	0% {
		opacity: 0;
		transform: translateY(30px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Smooth scroll behavior */
.deebo_fn__cv .cv__content {
	scroll-behavior: smooth;
}

/* Loading transition overlay */
.deebo_fn__cv section[id^="cv_"]::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(240, 10, 119, 0.1), rgba(255, 61, 154, 0.1));
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: -1;
}

.deebo_fn__cv section[id^="cv_"].section-animating::before {
	opacity: 1;
}

/* Perspective container for 3D effects */
.deebo_fn__cv .cv__content {
	perspective: 2000px;
	perspective-origin: center;
}

/* Responsive */

/*============================================
   MOBILE FIRST FIX - Prevent horizontal scroll
   For widths < 540px
   ============================================*/

@media (max-width: 540px) {

	/* Ensure no overflow on any elements */
	html,
	body {
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
        background-color: #F9A8D4;
	}

	/* All main containers must fit screen width */
	[class^="deebo_fn_"],
	.right_container,
	.container-fluid,
	.section-wrapper {
		width: 100%;
		max-width: 100%;
		padding-left: 12px;
		padding-right: 12px;
		box-sizing: border-box;
		margin: 0;
	}

	/* Ensure all sections fit */
	section {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* All content boxes must scale */
	.fn_cs_boxed_list .item,
	.fn_cs_service_list .item,
	.fn_cs_testimonials .item,
	.tips_content .item,
	.clients_wrapper {
		width: 100%;
		max-width: 100%;
		padding: 15px 12px 16px;
		box-sizing: border-box;
	}

	/* Portfolio grid - single column */
	.fn_cs_portfolio .portfolio_list ul li {
		width: 100%;
		padding-left: 0;
		margin: 0 0 12px 0;
		box-sizing: border-box;
	}

	/* Portfolio filter on mobile */
	.fn_cs_portfolio .portfolio_filter ul li {
		margin: 0 8px 8px 0;
		display: inline-block;
	}

	.fn_cs_portfolio .portfolio_filter a {
		font-size: 12px;
	}

	/* Info items one per row on small screens */
	.fn_cs_info_items li {
		width: 100%;
		margin: 0 0 8px 0;
		padding: 6px 10px;
		box-sizing: border-box;
		font-size: 12px;
	}

	/* Service and testimonial layouts - stack vertically */
	.fn_cs_service_list .item,
	.fn_cs_testimonials .item,
	.tips_content .item {
		flex-direction: column;
	}

	.fn_cs_service_list .item_left,
	.fn_cs_service_list .item_right,
	.fn_cs_testimonials .item_left,
	.fn_cs_testimonials .item_right,
	.tips_content .item_left,
	.tips_content .item_right {
		width: 100%;
		min-width: 100%;
		border-left: none;
		border-top: 1px solid rgba(255, 255, 255, .05);
		padding: 12px 10px;
		box-sizing: border-box;
	}

	.fn_cs_service_list .item_right,
	.fn_cs_testimonials .item_right {
		text-align: center;
	}

	/* Hide right side images on ultra-small screens */
	.tips_content .item_right {
		display: none;
	}

	/* Images scale properly */
	img {
		max-width: 100%;
		height: auto;
		display: block;
	}

	/* Tables become responsive */
	table,
	thead,
	tbody,
	tr,
	td {
		display: block;
		width: 100%;
	}

	thead {
		display: none;
	}

	tr {
		border: 1px solid #222;
		margin-bottom: 10px;
		box-sizing: border-box;
	}

	td {
		padding: 8px 10px;
		width: 100%;
		box-sizing: border-box;
	}

	/* Modal windows fit screen */
	.deebo_fn_modalbox .box_inner {
		max-width: 95%;
		width: 95%;
	}

	.deebo_fn_modalbox .modal_in {
		padding: 15px 10px;
	}

	/* Forms fit screen width */
	.section_contact input,
	.section_contact textarea {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		padding: 0 10px !important;
	}

	.section_contact input {
		height: 40px;
		font-size: 13px;
	}

	.section_contact textarea {
		min-height: 100px;
		font-size: 13px;
	}

	.section_contact .item.half {
		width: 100%;
	}

	/* Buttons are full width or touch-friendly */
	button,
	.btn {
		width: auto;
		min-height: 40px;
		padding: 10px 15px;
		font-size: 12px;
	}

	/* Lists and items fit */
	ul,
	ol {
		margin: 10px;
		padding: 0 15px;
		width: 100%;
		box-sizing: border-box;
	}

	li {
		margin-bottom: 5px;
	}

	/* Bottom to top button */
	.deebo_fn_totop {
		width: 40px;
		height: 40px;
		right: 12px;
		bottom: 12px;
	}

	/* Text sizes appropriate for small screens */
	h1 {
		font-size: 20px;
		line-height: 1.2;
	}

	h2 {
		font-size: 18px;
		line-height: 1.2;
	}

	h3 {
		font-size: 16px;
		line-height: 1.3;
	}

	h4 {
		font-size: 14px;
	}

	h5 {
		font-size: 13px;
	}

	h6 {
		font-size: 12px;
	}

	p {
		font-size: 13px;
		line-height: 1.5;
	}

	body {
		font-size: 13px;
	}

	/* Navigation fits */
	.fn__nav {
		padding: 0 10px;
	}

	.fn__nav .text {
		display: none;
	}

	.fn__nav .next,
	.fn__nav .prev {
		padding: 10px 25px;
	}

	.fn__nav .arrow_wrapper {
		width: 14px;
		height: 14px;
	}

	/* CV modal on mobile becomes single column */
	.deebo_fn__cv .cv__header {
		width: 100%;
		position: relative;
		height: auto;
		left: 0;
		right: 0;
		top: auto;
		bottom: auto;
		filter: none;
		transform: none;
		opacity: 1;
		margin-bottom: 15px;
	}

	.deebo_fn__cv .cv__header .in {
		padding: 20px 12px;
		border-radius: 8px;
		max-height: none;
		height: auto;
	}

	.deebo_fn__cv .cv__content {
		width: 100%;
		position: relative;
		z-index: 2;
		right: auto;
		left: auto;
		top: auto;
		bottom: auto;
		overflow: visible;
		max-height: none;
		height: auto;
		transform: none;
		opacity: 1;
		padding: 15px 12px;
		margin-bottom: 15px;
	}

	.deebo_fn__cv .cv__bg,
	.deebo_fn__cv .cv__bg2 {
		display: none;
	}

	.deebo_fn_cv .closer {
		display: none;
	}

	.right_bar_overlay {
		display: none;
	}

	.deebo_fn__cv .cv__content section {
		padding: 12px;
		margin-bottom: 10px;
	}

	/* Carousel scales for mobile */
	.photo_carousel {
		height: 250px;
	}

	.carousel_item {
		width: 200px;
		height: 160px;
	}

	.carousel_item.active {
		transform: translate(-50%, -50%) scale(0.95) rotateY(0deg);
	}

	.carousel_item.prev,
	.carousel_item.next {
		display: none;
	}

	.carousel_btn {
		width: 40px;
		height: 40px;
	}

	.carousel_counter {
		display: none;
	}

	/* Fix flex containers */
	.fn_cs_testimonials {
		margin-top: 15px;
	}

	.fn_cs_testimonials .ava_in {
		width: 60px;
		height: 60px;
	}

	/* Progress bars */
	.fn_cs_progress_bar .progress_item {
		margin-bottom: 12px;
	}

	.fn_cs_progress_bar .progress_title {
		font-size: 12px;
		line-height: 35px;
		padding: 0 10px;
	}

	.fn_cs_progress_bar .progress_percent {
		font-size: 11px;
		padding: 0 8px;
		line-height: 35px;
	}

	/* Ensure no horizontal scroll on containers */
	.fn_cs_portfolio .portfolio_list ul {
		margin: 0;
		padding: 0;
		width: 100%;
	}

	.clients_wrapper ul {
		margin: 0;
		padding: 0;
		width: 100%;
	}

	.clients_wrapper ul li {
		width: 100%;
		height: 100px;
		line-height: 100px;
	}

	/* Tips section */
	.section_tips {
		padding: 40px 12px;
	}

	.tips_content ul {
		margin: 0;
		padding: 0;
	}

	.tips_content ul li {
		padding-left: 0;
		margin-bottom: 10px;
	}

	.tips_content p {
		font-size: 12px;
	}

	.tips_content h5 {
		font-size: 15px;
	}

	/* Overflow fix - don't limit height */
	* {
		max-width: calc(100vw - 24px);
		max-height: none;
	}

	[class^="deebo_fn_"],
	section,
	.right_container {
		max-width: 100%;
	}
}

@media (max-width: 768px) {
	#cv_biography .bio_intro {
		flex-direction: column;
		text-align: center;
	}

	#cv_biography .bio_details {
		grid-template-columns: 1fr;
	}

	#cv_biography .avatar_circle {
		width: 80px;
		height: 80px;
	}

	#cv_biography .avatar_letter {
		font-size: 36px;
	}

	#cv_biography .bio_header h4 {
		font-size: 24px;
	}
}