/*
  Theme Name: ProCv - CV Resume & Personal Portfolio HTML Template
  Date Created: July 04, 2024
  Last Update: March 10, 2025
  Author: eThemeStudio
  Support: xuwelkhan@gmail.com
  Description: CV Resume & Personal Portfolio HTML Template
  Version: 2.3 
*/

/* CSS Index
-----------------------------------
1. Theme default css
2. header
3. menu area
4. hero area
5. a page
     1.about us area
     2.service us area
     3.testimonial area
     4.brand area
     5.price area
6. resume page
     1.experience area
     2.skill area
     3.award area
     4.award area
     5.team area
7. Portfolio page
     1.portfolio details
8. blog page
     1.blog details
9. contact page
*/


/* 1. Theme default css
-------------------------------------------------------------- */
/* font css */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,500;0,600;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

@font-face {
	font-family: "CircularStdBold";
	src: url(../fonts/CircularStd-Bold/FontsFree-Net-CircularStd-Bold.ttf);
}

:root{
	--main-color:#7683d9;
	--main-border:#dde1f0;
	--main-border:#e0e0e0;
	--light-border:#51535f;
	--primary-color:#2f343e;
	--secondary-color:#9b9ca2;
	--text-color:#46474a;
	--neutral-color :#f7f6f6;
	--neutral-color2 :#2d2e36;
	--section-color :#fafafa;
	--dark-text-color : #b0aac0;
	--dark-section-color: #2a2a2a;
	--dark-menu-bg-color: #3f404e;
	--dark-menu-icon-color: #fafafa;;
}
body {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	color: var(--text-color);
	background: #A61F1F;
}
h1,h2,h3,h4,h5,h6 {
	color: var(--primary-color); 
	font-family: "CircularStdBold";
}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {color: inherit;}
h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover {color: #9B111E}
h3 {font-size: 24px;}
h4 {font-size: 21px;}
h5 {font-size: 18px;}
p {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.88;
	font-family: 'Open Sans', sans-serif;
}
span,
input,
img{
	max-width: 100%;
	transition: all 0.3s ease-out 0s;
	-webkit-transition: all 0.3s ease-out 0s;
	-moz-transition: all 0.3s ease-out 0s;
	-ms-transition: all 0.3s ease-out 0s;
	-o-transition: all 0.3s ease-out 0s;
}
ul {
	margin: 0px;
	padding: 0px;
}
li {list-style: none}
a,button,li{
	transition: all 0.3s ease-out 0s;
	-webkit-transition: all 0.3s ease-out 0s;
	-moz-transition: all 0.3s ease-out 0s;
	-ms-transition: all 0.3s ease-out 0s;
	-o-transition: all 0.3s ease-out 0s;
}
.font-family-CircularStdBold {font-family: "CircularStdBold";}
.font-family-Open-Sans {font-family: 'Open Sans', sans-serif;}
.pointer{cursor: pointer;}
.over-hidden{overflow: hidden;}
.clear-both{clear: both !important;}
.over-scroll{overflow: scroll;}
.over-x-hidden{overflow-x: hidden;}
.over-x-scroll{ overflow-y: scroll;}
.transition03{ transition: all 0.3s ease-out 0s; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; }
.transition3{ transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; }
.transition5{ transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; }
a:focus,button:focus,.btn:focus {
	text-decoration: none;
	outline: 0;
	box-shadow: none;
}
a:focus,a:hover,.footer-menu li a:hover {
	color: #9B111E;
	text-decoration: none;
	outline: 0 none;
}
.btn:focus{outline: 0 none;}
input:focus,textarea:focus{outline: 0 none; border: 1px solid #9B111E;}
.cursor-pointer{cursor: pointer;}
.f-400{font-weight: 400;}
.f-500{font-weight: 500;}
.f-600{font-weight: 600;}
.f-800{font-weight: 800;}
.f-700{font-weight: 700;}
.f-900{font-weight: 900;}
.z-index11{z-index: 11;}
.z-index1{z-index: 1;}
.z-index-1{z-index: -1;}
.top-0{top: 0;}
.left-0{left: 0;}
.right-0{right:0}
.bottom-0{bottom: 0;}
.w100{width: 100%;}
.h100{height: 100%;}
.bg-no-repeat{background-repeat: no-repeat;}
.bg-cover{background-size: cover;}
.img{transition: all 1.5s cubic-bezier(0, 0, 0.2, 1);}
.img-transition5{ transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; }
.zoom-img-hover:hover img{ transform:scale(1.1) ; -webkit-transform:scale(1.1) ; -moz-transform:scale(1.1) ; -ms-transform:scale(1.1) ; -o-transform:scale(1.1) ; }
/* button */
.my-btn .btn {
	padding: 12px 45px;
	font-size: 16px;
	border: 1px solid var(--main-color);
	box-shadow: 0px 5px 15px 0px rgba(2, 24, 93, 0.09);
	color: #fff;
	font-family: "CircularStdBold";
	outline: 0 none;
	text-transform: capitalize;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	transition: all 0.5s ease-out 0s;
	-webkit-transition: all 0.5s ease-out 0s;
	-moz-transition: all 0.5s ease-out 0s;
	-ms-transition: all 0.5s ease-out 0s;
	-o-transition: all 0.5s ease-out 0s;
}
.my-btn .btn:hover{color: #9B111E;background: #ffffff; box-shadow: 0px 5px -15px 0px rgba(2, 24, 93, 0.15);}
.my-btn .btn.transparent-bg{
	color: var(--primary-color);
	background:transparent;
	box-shadow: none;
	padding: 8px 30px;
}
.my-btn .btn.transparent-bg:hover{color:#fff; background: #9B111E;}
.back-btn.my-btn .btn{font-size: 14px;}
.back-btn.my-btn .btn span{font-size: 12px;}
.back-btn.my-btn .btn:hover span{color: #fff;}
.page-margin-top {
	margin-top: -35px;
}


/* 2. header
--------------------------------------------------- */
.header-padding {
	padding-top: 40px;
	padding-bottom: 40px;
}


/* 3. menu area
--------------------------------------------------- */
.menu{
	position: relative;
	height: 70px;
}
.tabs {
	position: absolute;
	z-index: 100;
	width: 100% !important;
	text-align: center !important;
	justify-content: center;
}
.tabs li {
	width: auto !important;
	margin-right: 8px;
	transition: 5s;
	-webkit-transition: .5s;
	-moz-transition: .5s;
	-ms-transition: .5s;
	-o-transition: .5s;
}
.tabs li:last-child{margin-right: 0;}
.caroufredsel_wrapper {
	overflow: visible !important;
}
.tabs li a{
	position: relative;
	display: inline-block;
	font-size: 18px;
	font-weight: 700;
	background: #fff;
	text-transform: capitalize;
	font-family: "CircularStdBold";
	box-shadow: 0px 5px 48px 0px rgba(2, 24, 93, 0.09);
	border-radius: 35px;
	-webkit-border-radius: 35px;
	-moz-border-radius: 35px;
	-ms-border-radius: 35px;
	-o-border-radius: 35px;
	width: 66px;
	transition: .5s;
	-webkit-transition: .5s;
	-moz-transition: .5s;
	-ms-transition: .5s;
	-o-transition: .5s;
}
.tabs li a::before {
	position: absolute;
	content: "\f100";
	text-align: center;
	color: var(--primary-color);
	background-color: #cacde3;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	display: inline-block;
	line-height: 59px;
	border: 3px solid #ffffff;
	font-family: "font awesome 5 pro";
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	box-shadow: 0px 5px 12px 0px rgba(0, 0, 0, 0.1);
	font-family: "Flaticon";
	font-size: 24px;
	font-weight: 300;
}
.tabs li a.lc::before {
	background-color: rgb(225, 227, 237);
}
.tabs li a.lq::before {
	background-color: rgb(225, 227, 237);
}
.tabs li a.wq::before {
	background-color: rgb(225, 227, 237);
}
.tabs li a.wc::before {
	background-color: rgb(225, 227, 237);
}
.tabs li a.wa::before {
	background-color: rgb(225, 227, 237);
} 
.tabs li a.active {
	min-width: 200px;
	background: var(--main-color);
}
.tabs li a.active::before{
	background: #ffffff;
	color: var(--main-color);
	border-color: var(--main-color);
}
.tabs li a.active.tabs-home::before{
	background: var(--main-color);
	color: #ffffff;
	border-color: #ffffff;
}
.tabs li:hover a{ width: 200px;}
.tabs li a.lc::before {content: " \f117";}
.tabs li a.lq::before {content: " \f11e";}
.tabs li a.wq::before {content: " \f107"}
.tabs li a.wc::before {content: " \f129";}
.tabs li a.wa::before {content: " \f112"}
.tabs li a span {
	color: var(--primary-color);
	padding: 24px 0;
	padding-left: 60px;
	opacity: 0;
	visibility: visible;
	display: block;
	width: 66px;
	height: 66px;
	text-align: center;
}
.tabs li a.active span,.tabs li:hover a.tabs-home span{ width: 200px; color: #ffffff; opacity: 1; visibility: visible;}
.tabs li:hover a span{ width: 200px; opacity: 1; visibility: visible;}
.tabs li a.active.tabs-home {
	min-width: 66px;
	background: #ffffff;
}
.tabs li a.tabs-home span,.tabs li:active a.tabs-home span {
	width: 0;
}
.tabs li:hover a.tabs-home span{color: var(--primary-color);}
.profile.tabs-home.active {
	opacity: 0;
	visibility: hidden;
	display: none;
	transition: .3s;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-ms-transition: .3s;
	-o-transition: .3s;
}
.tabs li.tmenu.active {
	width: 0;
}


/* 4. hero area
--------------------------------------------------- */
.hero-area {
	background-position: center;
	border: 4px solid #ffffff; 
}
.hero-area-height {
	height: calc(100vh - 254px);
	margin-bottom: -36px;
}
.hero-area.active {
	display: flex;
	align-items: center;
}
.hero-content .sub-title{
 	font-size: 21px;
}
.hero-content {padding-left: 50px;}
.hero-content h1 {
	font-size: 96px;
	line-height: 1.10;
}
.hero-content h3{
	font-size: 24px;
}
.hero-content h3 span {font-size: 30px;}
span.social-text{
	position: absolute;
	color: #ffffffff;
	right: 0;
	top: 10px;
	font-size: 22px;
	padding: 2px 9px;
	cursor: pointer;
	border-radius: 70px;
	-webkit-border-radius: 70px;
	-moz-border-radius: 70px;
	-ms-border-radius: 70px;
	-o-border-radius: 70px;
}
.social-text .pulse-button i{
	color: #ffffffff;
}
.social-icons{
	opacity: 0;
	top: -1px;
	left: -7px;
	position: relative;
	transition: all ease 1s;
	-webkit-transition: all ease 1s;
	-moz-transition: all ease 1s;
	-ms-transition: all ease 1s;
	-o-transition: all ease 1s;
	z-index: -1;
	color:#fafafa;
}
.pulse-button{
	color: #ffffff;
	width: 35px;
	height: 35px;
	line-height: 15px;
	border: none;
	box-shadow: 0 0 0 0 rgba(101, 100, 100);
	position: relative;
	background-color: #cf455c;
	font-size: 20px;
	cursor: pointer;
}
.hero-text-shape1 {
	right: -22%;
	top: 32%;
}
.hero-text-shape1 span{	transform: rotate(90deg);}
.hero-text-shape span {
	font-size: 290px;
	/* -webkit-text-stroke: 1px #333;
	-webkit-text-fill-color: transparent; */
	color: rgba(255, 255, 255, 0.122);
}
.hero-text-shape2 {
	left: 5%;
	bottom: -12%;
	font-size: 250px;
}
#venta-background {
	position: fixed;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	 z-index: -1;
}
.hero-effect1 {
	right: -220px;
	top: -270px;
}
.hero-effect2 {
	left: -60px;
	bottom: -150px;
}
.hero-icon img {
	transition: .5s;
	-webkit-transition: .5s;
	-moz-transition: .5s;
	-ms-transition: .5s;
	-o-transition: .5s;
}
.content-bg {
	left: 0;
	bottom: 0;
}
.tilt {
	transform-style: preserve-3d;
	transform: perspective(1000px);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tilt-inner {
	transform: translateZ(20px);
}
.hero-icon1 {
	top: 45px;
	left: -10px;
}
.hero-icon2 {
	right: -35px;
	top: 100px;
}
.hero-icon3 {
	right: -38px;
	bottom: 100px;
}
.hero-icon4 {
	bottom: 140px;
	left: -30px;
}
.hero-img:hover .hero-icon1 img{ transform:rotate(15deg) ; -webkit-transform:rotate(15deg) ; -moz-transform:rotate(15deg) ; -ms-transform:rotate(15deg) ; -o-transform:rotate(15deg) ; }
.hero-img:hover .hero-icon2 img{ transform:rotate(-25deg) ; -webkit-transform:rotate(-25deg) ; -moz-transform:rotate(-25deg) ; -ms-transform:rotate(-25deg) ; -o-transform:rotate(-25deg) ; }
.hero-img:hover .hero-icon3 img{ transform:rotate(13deg) ; -webkit-transform:rotate(13deg) ; -moz-transform:rotate(13deg) ; -ms-transform:rotate(13deg) ; -o-transform:rotate(13deg) ; }
.hero-img:hover .hero-icon4 img{ transform:rotate(-10deg) ; -webkit-transform:rotate(-10deg) ; -moz-transform:rotate(-10deg) ; -ms-transform:rotate(-10deg) ; -o-transform:rotate(-10deg) ; }

	
/* magicMouseCursor css */
#magicPointer{ background-color: #9B111E !important;}
#magicMouseCursor{ border: 1px solid #9B111E !important;}



/* .dark mode css */
body.social-media-body-bg.dark-mode {background: #39313e;}
.dark-mode #scene,.dark-mode .content-bg img {
	opacity: .2;
}
.dark-mode h1,.dark-mode h2,.dark-mode h3,.dark-mode h4,.dark-mode h5,.dark-mode h6, .dark-mode .item-meta li, .dark-mode .blog-page-social-link span, .dark-mode .my-btn .btn.transparent-bg, .dark-mode .mixitup-button button, .dark-mode .sidebar-widget a, .dark-mode .blog-footer-tag span {color: #ffffff;}
.dark-mode p, .dark-mode .about-info li span, .dark-mode .single-more-about li, .dark-mode .item-meta li span {color: var(--dark-text-color);}
.dark-mode .footer-area p { color: var(--primary-color);}
.dark-mode ul.tabs li a {
	background: var(--dark-menu-bg-color);
	box-shadow: 0px 5px 48px 0px rgba(0, 0, 0, 0.09);
}
.dark-mode ul.tabs li a span, .dark-mode .tabs li:hover a.tabs-home span {
	color: #ffffff;
}
.dark-mode ul.tabs li a::before {
	color: #ffffff;
	background: var(--dark-menu-icon-color);
	border: 3px solid #666876;
	box-shadow: none;
}
.dark-mode .content-wrapper-padding,.dark-mode .modal-content {
	background: #212228;
}
.dark-mode .blog-search input, .dark-mode .sidebar-widget input, .dark-mode #contact-form input, .dark-mode #contact-form textarea, .dark-mode .contact-form input, .dark-mode .contact-form textarea, .dark-mode .page-link {
	background: transparent;
	color: #ffffff;
}
.dark-mode .pagination-page .page-link {color: #ffffff;}
.dark-mode .single-brand:hover img{
	filter: invert(0) sepia(0) hue-rotate(0deg) brightness(0.5);
}
.dark-mode .my-btn .btn:hover{ background: transparent;}
.dark-mode .close-icon span {
	line-height: 32px;
	border: 1px solid #fff;
	border-radius: 50%;
	color: #ffffff;
}
.dark-mode .close {
	opacity: .9;
}
.body-overlay {
	background-color: rgba(0, 0, 0, 0.5);
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 999;
	left: 0;
	opacity: 0;
	visibility: hidden;
	transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
}
.body-overlay.opened {
	opacity: 1;
	visibility: visible;
}
.dark-mode #loading {background-color:  #000000;}
.dark-mode .object {background-color:  #ffffff;}
.dark-mode .single-price {
	border: 1px solid var(--light-border);
}
.dark-mode .single-price:hover {
	margin-top: -10px;
}
.dark-mode .top span {
	box-shadow: -1px 3px 11px 1px rgba(255, 254, 254, 0.07);
}
.dark-mode .single-brand {
	border: 1px solid var(--light-border);
}
.dark-mode .mixitup-button,.dark-mode .price-table-header {
	border-bottom: 1px solid var(--light-border);
}
.dark-mode .pagination-page .page-link {
	border: 1px solid var(--light-border);
}
.dark-mode .single-experience::after {
	background: var(--light-border);
}
.dark-mode .progress {
	background-color: var(--light-border);
}
.dark-mode .search-tag li a {
	border: 1px solid var(--light-border);
}
.dark-mode .blog-posts {
	border-top: 1px solid var(--light-border);
	border-bottom: 1px solid var(--light-border);
}
.dark-mode .blog-post-border-right{
	border-right: 1px solid var(--light-border);
}
.dark-mode .quote-author::before {
	background: var(--light-border);
}
.dark-mode .close-icon span {
	border: 1px solid var(--light-border);
	background: var(--light-border);
	color: var(--neutral-color);
	box-shadow: none;
	font-style: 18px;
}
#blog .blog-page-content {
	margin-top: 42px;
	padding-left: 45px;
	padding-right: 45px;
	margin-bottom: 46px;
}
.dark-mode .carousel-indicators li {background: var(--light-border);}
.dark-mode .carousel-indicators li.active { background:var(--main-color);}
.dark-mode .copyright-text p, .dark-mode .useful-link li a {
	color: #ffffff;
}