/*
Template Name:  - Personal Portfolio Bootstrap5 Template 
Description:  - Personal Portfolio Bootstrap5 Template 
Author: CodexUnicTheme
Version: 1.0
Font License: https://openfontlicense.org/
*/
/* CSS Index
-----------------------------------
------------------------------------
1. Theme default css
2. Back To Top
3. Header
4. Hero Section
5. Button
6. About Us Area
7. Section Title
8. Our Services
9. Resume Area
10. Portfolio Area
11. Client Review Area
12. Blog Area
13. Contact Area
14. Footer
15. Cookie Popup
----------------------------------
----------------------------------*/
/* 1. Theme default css */
/*@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Roboto:wght@400;500;700;900&display=swap');*/
@import url('assets/fonts/RoboPoppins/css2.css');

body{
	margin: 0;
	padding: 0;
	font-size: 16px;
	color: #ccc;
	font-family: 'Roboto', sans-serif;
	font-weight: normal;
	font-style: normal;
	background: #333;
}
a,
button {
	-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;
	transition: all 0.3s ease-out 0s;
}
*::-moz-selection {
	background: #d6b161;
	color: #fff;
	text-shadow: none;
}
::-moz-selection {
	background: #444;
	color: #fff;
	text-shadow: none;
}
::selection {
	background: #444;
	color: #fff;
	text-shadow: none;
}
h1,h2,h3,h4,h5,h6,p{
	margin:0;
	padding: 0;
}
h1,h2,h3,h4,h5,h6{
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
}
ul{
	margin:0;
	padding: 0;
	list-style: none;
}
a{
	text-decoration: none;
}
a:hover{
	text-decoration: none;
}
button:focus{
	outline: none;
}
input:focus{
	outline: none;
}
textarea:focus{
	outline: none;
}
button:focus{
	outline: none;
}
.section-bg{
	background: #312f2f;
}
/*
 * 2. Back To Top
*/
.scroll-area {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1;
    display: none;
}
.scroll-area i {
	width: 45px;
	height: 45px;
	background-color: #71444b;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	color: #fff;
	font-size: 20px;
	border-radius: 2%;
}
/*
 * 3. Header
*/
.header {
	padding: 20px 0px;
	background: #333;
}
.header.sticky {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	-webkit-animation: sticky 1s;
	-moz-animation: sticky 1s;
	-o-animation: sticky 1s;
	animation: sticky 1s;
	-webkit-box-shadow: 2px 4px 8px rgba(51, 51, 51, 0.25);
	-moz-box-shadow: 2px 4px 8px rgba(51, 51, 51, 0.25);
	box-shadow: 2px 4px 8px rgba(140, 129, 129, 0.25);
}
@-webkit-keyframes sticky {
  	0% {
    	-webkit-transform: translateY(-100%);
    	transform: translateY(-100%); 
    }
  	100% {
    	-webkit-transform: translateY(0%);
    	transform: translateY(0%); 
	} 
}
@keyframes sticky {
  	0% {
    	-webkit-transform: translateY(-100%);
    	transform: translateY(-100%); 
	}
  	100% {
    	-webkit-transform: translateY(0%);
    	transform: translateY(0%); 
	} 
}
.logo h2 {
	font-size: 30px;
	font-weight: 900;
}
.logo h2 a{
	color: #fff;
}
.menu {
	text-align: right;
}
.menu ul li{
	display: inline-block;
	position: relative;
}
.menu ul li a {
	color: #e1d0d0;
	text-transform: uppercase;
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	display: inline-block;
	padding: 10px 18px;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
.menu ul li.current a{
	color: #fff;
}
.menu ul li:hover > a{
	color: #fff;
}
.menu nav ul li > ul {
	position: absolute;
	top: 100px;
	left: 0;
	background-color: rgb(66, 70, 59);
	border-top: 5px solid rgb( 102, 171, 54 );
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	width: 200px;
	opacity: 0;
	visibility: hidden;
	z-index: 999;
	text-align: left;
}
.menu nav ul li:hover > ul{
	opacity: 1;
	visibility: visible;
	top: 45px;
}
.menu nav ul li > ul > li {
	display: block;
	position: relative;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
.menu nav ul li > ul > li::after {
	content: "";
	clear: both;
	display: block;
	overflow: hidden;
	background: #669933;
	width: 0;
	height: 100%;
	left: 0;
	top: 0;
	position: absolute;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
.menu nav ul li > ul > li:hover::after {
	width: 7px;
}
.menu nav ul li > ul > li:hover{
	padding-left: 7px;
}
.menu nav ul li > ul > li a {
	display: inline-block;
	width: 100%;
	padding: 10px 20px;
	border-bottom: 1px solid #ddd;
}
.menu nav ul li > ul > li:last-child a{
	border-bottom: none;
}
.menu nav ul > li > ul > li > ul {
	left: 200px;
	top: 28px;
}
.menu nav ul li > ul > li:hover > ul {
	top: -3px;
}
.mean-container .mean-nav {
	float: left;
	width: 100%;
	background: #0c1923;
	margin-top: 10px;
}
.mean-container a.meanmenu-reveal {
	width: 22px;
	height: 22px;
	padding: 7px 10px 7px 10px;
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
	color: #fff;
	text-decoration: none;
	font-size: 16px;
	text-indent: -9999em;
	line-height: 22px;
	font-size: 1px;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	border: 1px solid #fff;
}
.meanmenu-reveal {
	position: absolute !important;
	top: -36px !important;
}
/*
 *4. Hero Section
*/
.hero-caption {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
}
.heor-img img {
	width: 100%;
}
.hero-caption-full h5 {
	color: #ffbd39;
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 20px;
}
.hero-caption-full h2 {
	font-size: 30px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 20px;
}
.hero-caption-full h2 span{
	color: #ffbd39;
}
.hero-caption-full p {
	font-size: 18px;
	line-height: 30px;
}
/*
 * 5. Button
*/
/*Button 1*/
.button-1 {
	border: none;
	position: relative;
	display: inline-block;
	z-index: 1;
	color: #ffffff;
	background-color: #109abf;
	-webkit-transition: 0.4s;
	transition: 0.4s;
	font-weight: 600;
	font-size: 15px;
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 12px;
	padding-bottom: 12px;
	box-shadow: 0 7px 25px rgb(123,104,238,0.25);
	overflow: hidden;
}
.button-1:hover{
	color: #fff;
}
.button-1 span {
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	border-radius: 50%;
	 background-color: #3e57d0; 
	-webkit-transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
	transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: -1;
	border-radius: 30px;
}
.button-1:hover span{
	width: 225%;
	height: 562.5px;
}
/*button-2*/
.button-2 {
	border: none;
	position: relative;
	display: inline-block;
	z-index: 1;
	color: #ffffff;
	background-color: #ffbd39;
	-webkit-transition: 0.4s;
	transition: 0.4s;
	font-weight: 600;
	font-size: 15px;
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 12px;
	padding-bottom: 12px;
	box-shadow: 0 7px 25px rgb(123,104,238,0.25);
	overflow: hidden;
}
.button-2:hover{
	color: #fff;
}
.button-2 span {
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	border-radius: 50%;
	 background-color: #3e57d0; 
	-webkit-transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
	transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: -1;
	border-radius: 30px;
}
.button-2:hover span{
	width: 225%;
	height: 562.5px;
}
.hero-caption-btn a.button-2 {
	margin-left: 20px;
}
/*
 * 6. About Us Area
*/
.about-info-btn a.button-2 {
	margin-left: 20px;
}
.about-info h5 {
	color: #ffbd39;
	font-size: 20px;
	font-weight: 500;
	margin-bottom: 15px;
}
.about-info h2 {
	font-size: 22px;
	line-height: 31px;
	margin-bottom: 20px;
	font-weight: 700;
}
.about-info h2 span{
	color: #ffbd39;
}
.about-info p {
	margin-bottom: 12px;
	line-height: 24px;
}

/*
    * { outline: 2px dotted red }
    * * { outline: 2px dotted green }
    * * * { outline: 2px dotted orange }
    * * * * { outline: 2px dotted blue }
    * * * * * { outline: 1px solid red }
    * * * * * * { outline: 1px solid green }
    * * * * * * * { outline: 1px solid orange }
    * * * * * * * * { outline: 1px solid blue }
*/

.about-social span {
	float: left;
	padding-right: 15px;
	font-weight: 700;
	letter-spacing: 1px;
	font-size: 18px;
}
.about-social ul {
	overflow: hidden;
	display: inline-flex;
}
.about-social ul li{
	display: inline-block;
	margin: 0px 3px;
}
.about-social ul li a{
	display: inline-block;
}
.about-social ul li a i {
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	background: #163d4d;
	color: #fff;
	font-size: 14px;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
.about-social ul li a i img{
	width: 1rem;
  	height: 1rem;
}
.about-social ul li a i:hover {
	background: #1b7599;
}
.counter-box {
	text-align: center;
	margin-bottom: 30px;
	border-radius: 3px;
	padding: 30px 20px;
	background: #3e3c3c;
	display:block;
}
.counter-box h2.counter, .counter-box h2 {
	font-size: 40px;
	font-weight: 700;
	margin-bottom: 10px;
	color: #fff;
	display:inline;
}
.counter-box div {
	margin-top: 10px;
}
/*
 * 7. Section Title
*/
.section-headding h2 {
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 2px;
	margin-bottom: 15px;
}
.title-divider {
	width: 150px;
	height: 2px;
	background: #ffbd39;
	margin: 0 auto;
	position: relative;
	margin-bottom: 15px;
}
.title-divider:after {
	content: "";
	clear: both;
	display: block;
	overflow: hidden;
	position: absolute;
	width: 16px;
	height: 16px;
	background: #fff;
	border-radius: 50%;
	left: 0;
	right: 0;
	top: -7px;
	margin: 0 auto;
	border: 3px solid #ffbd39
}
/*
 * 8. Our Services
*/
.services-box {
	text-align: center;
	padding: 40px 26px;
	background: #262020;
	border-radius: 6px;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
.services-box:hover{
	transform: translateY(-10px);
}
.services-box .icon {
	background: #ffbd39;
	width: 90px;
	height: 90px;
	margin: 0 auto;
	margin-bottom: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 30px;
	color: #fff;
	border-radius: 33% 66% 70% 30%/49% 62% 38% 51% !important;
}
.services-box h2 {
	font-size: 22px;
	margin-bottom: 10px;
	font-weight: 700;
	color: #fff;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
.services-box:hover h2{
	color: #ffbd39;
}
/*
 * 9. Resume Area
*/
.resume-item-box {
	padding: 30px 20px;
	text-align: left;
	box-shadow: 0px 2px 5px #4d4b4b;
}
.resume-item-box span {
	background: #ffbd39;
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	padding: 2px 14px;
	display: inline-block;
	border-radius: 20px;
}
.resume-item-box h2 {
	font-size: 22px;
	font-weight: 700;
	color: #fff;
	margin-top: 12px;
	margin-bottom: 2px;
}
.resume-item-box h4 {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1px;
	margin-bottom: 20px;
	color: #ccc;
}
/*
 * 10. Portfolio Area
*/
.portfolio-list {
	text-align: center;
}
.portfolio-list ul li {
	display: inline-block;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1px;
	cursor: pointer;
	padding: 2px 10px;
}
.portfolio-item {
	position: relative;
	width: 100%;
	overflow: hidden;
}
/*
.portfolio-item img{
	width: 100%;
}
*/
.portfolio-item::after {
	content: "";
	clear: both;
	display: block;
	overflow: hidden;
	position: absolute;
	width: 50%;
	height: 0%;
	background: rgba(80, 181, 96, 0.94);
	top: 0;
	right: 0;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
.portfolio-item:before{
	content: "";
	clear: both;
	display: block;
	overflow: hidden;
	position: absolute;
	width: 50%;
	height: 0%;
	background: rgba(80, 181, 96, 0.94);
	bottom: 0;
	left: 0;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
.portfolio-item:hover::before {
	height: 100%;
}
.portfolio-item:hover::after {
	height: 100%;
}
.portfolio-item-overly {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	top: 0;
	left: 0;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
	z-index: 999;
}
.portfolio-item-overly-full {
	position: absolute;
	right: 0px;
	bottom: 20px;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
}
.portfolio-item:hover .portfolio-item-overly-full {
	right: 20px;
	opacity: 1;
	visibility: visible;
}
.portfolio-item-overly-full a {
	padding: 13px;
	background: #fff;
	display: inline-block;
	line-height: 1;
	color: rgba(80, 181, 96, 0.94);
	font-size: 20px;
	margin: 2px;
	border-radius: 50%;
}
.mixitup-control-active {
	color: #ffbd39;
}
/*
 * 11. Client Review Area
*/
.client-review-single-content {
	background: #136c64;
	padding: 22px 30px;
	border-radius: 0px;
	position: relative;
}
.client-review-single {
	margin: 0px 20px;
}
.client-review-single-content::after {
	content: "";
	clear: both;
	display: block;
	position: absolute;
	width: 50px;
	height: 30px;
	background: #136c64;
	left: 88px;
	bottom: -30px;
	clip-path: polygon(25% 0, 0 100%, 100% 0);
}
.client-review-single-img img {
	width: 100px !important;
	border-radius: 50%;
}
.client-review-single-content h3 {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 1px;
	color: #fff;
	margin-bottom: 2px;
}
.client-review-single-content h5 {
	color: #fff;
	font-size: 14px;
	text-transform: capitalize;
	letter-spacing: 1px;
	font-weight: 400;
	margin-bottom: 10px;
}
.client-review-single-content .review{
	margin-top: 10px;
}
.client-review-single-content .review span {
	color: #ffbd39;
	font-size: 14px;
}
.client-review-single-img {
	margin-top: 18px;
}
.owl-prev {
	position: absolute;
	top: 0%;
	left: -32px;
}
.owl-next {
	position: absolute;
	top: 0;
	right: -32px;
}
.client-review-arrow {
	border: 2px solid #ffbd39;
	width: 40px !important;
	height: 40px !important;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	color: #ffbd39;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
.client-review-arrow:hover{
	background: #ffbd39;
	color: #fff;
}
/*
 * 12. Blog Area
*/
.blog-single {
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
	box-shadow: 0px 3px 13px #443f3fe6;
}
.blog-thumbnail img {
	width: 100%;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
.blog-thumbnail {
	width: 100%;
	position: relative;
	overflow: hidden;
}
.blog-thumbnail:after{
	content: "";
	clear: both;
	display: block;
	overflow: hidden;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.5);
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	opacity: 0;
}
.blog-single:hover .blog-thumbnail::after {
	opacity: 1;
}
.blog-single:hover .blog-thumbnail img{
	transform: scale(1.1);
}
.date-box {
	width: 58px;
	height: 58px;
	background: #ffbd39;
	color: #fff;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 30px;
	left: 30px;
	z-index: 300;
}
.date-box span {
	line-height: 18px;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 1.3px;
}
.blog-content {
	padding: 30px;
	box-sizing: border-box;
}
.blog-content h3 {
	font-size: 20px;
	font-weight: 700;
}
.blog-content h3 a {
	color: #ccc;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
.blog-content h3 a:hover{
	color: #fff;
}
.blog-meta {
	margin: 5px 0px 10px 0px;
}
.blog-meta a {
	color: #ccc;
	font-weight: 300;
	font-size: 15px;
}
.blog-meta span.sep {
	color: #ccc;
	font-size: 15px;
	padding: 0px 3px;
}
.blog-content p {
	margin-bottom: 20px;
	line-height: 24px;
}
.blog-content a.read-more {
	color: #ccc;
}
.blog-content a.read-more:hover {
	color: #fff;
}
.blog-content a.read-more i{
	-webkit-transition:all .3s ease-in-out;
	transition: all .3s ease-in-out;
	font-size: 15px;
}
.blog-content a.read-more:hover i {
	padding-left: 10px;
}
/*
 * 13. Contact Area
*/
.contact-form input {
	width: 100%;
	margin-bottom: 20px;
	background: #333;
	color: #fff;
	padding: 15px 20px;
	border: 1px solid #6f6c6c;
	font-size: 14px;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
.contact-form input:focus {
	border-color: #d7d3d3;
}
.contact-form textarea{
	width: 100%;
	margin-bottom: 20px;
	background: #333;
	color: #fff;
	padding: 15px 20px;
	border: 1px solid #6f6c6c;
	font-size: 14px;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	height: 150px;
}
.contact-form textarea:focus {
	border-color: #d7d3d3;
}
.contact-form button {
	text-transform: uppercase;
	letter-spacing: 2px;
}
/*
 * 14. Footer
*/
.footer-widget-single h2 {
	font-size: 30px;
	font-weight: 900;
	margin-bottom: 10px;
	color: #fff;
}
.footer-widget-single p {
	color: #ccc;
}
.footer-widget-single h3 {
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	text-transform: uppercase;
	position: relative;
	padding-bottom: 12px;
	margin-bottom: 10px;
}
.footer-widget-single h3::before {
	content: "";
	background: #94c045;
	width: 60px;
	overflow: hidden;
	height: 3px;
	position: absolute;
	bottom: 0;
	clear: both;
	display: block;
	z-index: 1;
}
.footer-widget-single h3::after {
	content: "";
	clear: both;
	display: block;
	overflow: hidden;
	background: #3c4133;
	width: 100%;
	height: 3px;
	bottom: 0;
	position: absolute;
	left: 0;
}
.footer-widget-single ul li {
	line-height: 32px;
}
.footer-widget-single ul li a {
	color: #ccc;
	text-transform: capitalize;
}
.footer-widget-single ul li a:hover {
	color: #fff;
}
.footer-widget-single strong {
	color: #fff;
}
.footer-widget-single ul.social-link {
	margin-top: 15px;
}
.footer-widget-single ul.social-link li {
	line-height: 20px;
	display: inline-block;
	margin: 3px;
}
.footer-widget-single ul.social-link li a {
	display: inline-block;
}
.footer-widget-single ul.social-link li a i {
	font-size: 14px;
	display: flex;
	background: #3c4133;
	color: #fff;
	line-height: 1;
	padding: 8px 0;
	border-radius: 50%;
	text-align: center;
	width: 36px;
	height: 36px;
	transition: 0.3s;
	justify-content: center;
	align-items: center;
}
.footer-widget-single ul.social-link li a i img{
	width: 0.7rem;
  	height: 0.7rem;
}
.footer-widget-single ul.social-link li a i:hover {
	background: #ffbd39;
}
.footer-bottom p {
	font-size: 15px;
}
.footer-bottom p a{
	color: #ccc;
	font-weight: 700;
}
.footer-bottom p a:hover{
	color: #fff;
}
/*
 * 15. Cookie Popup & Cookie Description
*/
#cookie-popup { 
  text-align: center; 
  background: #444;
  position: fixed;
  bottom: 0px;
  z-index: 9999;
  padding: 20px;
  width: 100%;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  }
 
#cookie-popup.hidden {
  display: none;
}