/* INDEX

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

01. Global Variables

02. General css

03. Header css

04. Hero css

05. About us css

06. Our Services css

07. Our Process css

08. Intro Video css

09. Our Skills css

10. Infobar CTA css

11. Why Choose Us css

12. Stat Counter css

13. Solar Form css

14. Latest Post css

15. Footer Ticker css

16. Footer css

17. About us page css

18. Services page css

19. Service Single page css

20. Contact us page css

21. Blog Archive page css

22. Post Single page css

23. FAQs page css

24. Project List page css

25. Project Single page css

26. Team page css

27. Team Single page css

28. Page Not Found page css

29. Responsive css

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



/************************************/

/****    01. Global Variables    ****/

/************************************/



:root {

	--primary-color			: #163300;

	--secondary-color		: #EFF1ED;

	--text-color			: #888888;

	--white-color			: #ffffff;

	--accent-color			: #ffd100;

	--overlay-color			: rgba(22, 51, 0, 0.65);

	--error-color			: rgb(230, 87, 87);

	--accent-font			: 'Rajdhani', sans-serif;

	--default-font			: 'Rubik', sans-serif;

}

  



/************************************/

/**** 	   02. General css		 ****/

/************************************/



body{

	font-size: 16px;

	font-weight: 400;

	font-family: var(--default-font);

	color: var(--text-color);

	line-height: 1.6em;

}



p{

	line-height: 1.6em;

	margin-bottom: 1.5em;

}



h1,

h2,

h3,

h4,

h5,

h6{

	font-family: var(--accent-font);

	margin-top:0;

	font-weight: 700;

	color: var(--primary-color);

}



figure{

	display: block;

	margin: 0;

	width: 100%;

}



img{

	max-width: 100%;

}



a{

	text-decoration: none;

}



a:hover{

	text-decoration: none;

	outline: 0;

}



a:focus{

	text-decoration: none;

	outline: 0;

}



.container{

	max-width: 1300px;

}



.container,

.container-fluid,

.container-lg,

.container-md,

.container-sm,

.container-xl,

.container-xxl {

    padding-right: 15px;

    padding-left: 15px;

}



.image-anime{

	position: relative;

	overflow: hidden;

}



.image-anime:after{

	content: "";

	position: absolute;

    width: 200%;

    height: 0%;

    left: 50%;

    top: 50%;

    background-color: rgba(255,255,255,.3);

    transform: translate(-50%,-50%) rotate(-45deg);

    z-index: 1;

}



.image-anime:hover:after {

    height: 250%;

    transition: all 600ms linear;

    background-color: transparent;

}



.reveal{

	position: relative;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    visibility: hidden;

    overflow: hidden;

}



.reveal img {

    height: 100%;

    width: 100%;

    -o-object-fit: cover;

    object-fit: cover;

    -webkit-transform-origin: left;

    transform-origin: left;

}



.row {

    margin-right: -15px;

    margin-left: -15px;

}



.row > * {

	padding-right: 15px;

	padding-left: 15px;

}



.btn-default{

	display: inline-block;

	background: var(--accent-color);

	color: var(--primary-color);

	font-size: 16px;

	font-weight: 500;

	border: 2px solid var(--accent-color);

	padding: 12px 30px;

	border-radius: 30px;

	position: relative;

	overflow: hidden;

	z-index: 0;

	transition: 0.2s transform ease-in-out;

}



.btn-default:after{

	background-color: var(--primary-color);

	border-radius: 30px;

	content: '';

	display: block;

	height: 100%;

	width: 100%;

	position: absolute;

	left: 0;

	top: 0;

	transform: translate(-100%, 0) rotate(10deg);

	transform-origin: top left;

	transition: 0.2s transform ease-out;

	will-change: transform;

	z-index: -1;

}



.btn-default:hover::after{

	transform: translate(0, 0);

}



.btn-default:hover{

	color: var(--accent-color);

}



.btn-default.btn-border{

	background: none;

	color: var(--accent-color);

}



#magic-cursor {

	position: absolute;

	width: 10px !important;

	height: 10px !important;

	pointer-events: none;

	z-index:1000000;

}



#ball{

	position: fixed;

	display: block;

	left: 0;

	top: 0;

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

	width: 10px !important;

	height: 10px !important;

	background: var(--accent-color);

	border-radius: 50%;

	pointer-events: none;

	opacity:1 !important;

}



.preloader{

	position: fixed;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	z-index: 1000;

	background-color: var(--accent-color);

	display: flex;

	align-items: center;

	justify-content: center;

}



.loading-container,

.loading{

	height: 100px;

	position: relative;

	width: 100px;

	border-radius: 100%;

}



.loading-container{

	margin: 40px auto

}



.loading{

	border: 1px solid transparent;

	border-color: transparent var(--white-color) transparent var(--white-color);

	animation: rotate-loading 1.5s linear 0s infinite normal;

	transform-origin: 50% 50%;

}



.loading-container:hover .loading{

	border-color: transparent #E45635 transparent #E45635;

}



.loading-container:hover .loading,

.loading-container .loading{

	transition: all 0.5s ease-in-out;

}



#loading-icon{

	position: absolute;

	top: 50%;

	left: 50%;

	max-width: 100px;

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

}



@keyframes rotate-loading {

	0% {

		transform: rotate(0deg);

	}



	100% {

		transform: rotate(360deg);

	}

}



.section-title{

	text-align: center;

	margin-bottom: 60px;

}



.section-title h3{

	display: inline-block;

	text-align: center;

	font-size: 14px;

	text-transform: uppercase;

	font-weight: 600;

	letter-spacing: 2px;

	color: var(--accent-color);

	position: relative;

	padding-left: 20px;

	margin-bottom: 10px;

	z-index: 2;

}



.section-title h3:before{

	content: '';

	display: block;

	width: 12px;

	height: 16px;

	position: absolute;

	left: 0;

	top: 0;

	background: url(../images/icon-sub-heading.svg) no-repeat left center;

	z-index: -1;

}



@keyframes shapemove{

	50%{

		transform: translateX(10px);

	}

}



.section-title h1,

.section-title h2{

	font-size: 46px;

	color: var(--primary-color);

	letter-spacing: -0.5px;

	font-weight: 700;

	line-height: 1.1em;

	margin-bottom: 0;

}



.section-title h1 span,

.section-title h2 span{

	color: var(--accent-color);

}



/************************************/

/**** 	   03. Header css		 ****/

/************************************/



.topbar{

	position: relative;

	z-index: 100;

	padding: 15px 0;

}



.topbar-contact-info{

	padding-left: 30px;

}



.topbar-contact-info ul{

	padding: 0;

	margin: 0;

	list-style: none;

}



.topbar-contact-info ul li{

	display: inline-block;

	margin-right: 20px;

	color: var(--white-color);

	font-size: 14px;

}



.topbar-contact-info ul li:last-child{

	margin-right: 0;

}



.topbar-contact-info ul li a{

	color: var(--white-color);

}



.topbar-contact-info ul li i{

	color: var(--accent-color);

	margin-right: 6px;

}



.header-social-links{

	text-align: right;

	padding-right: 30px;

}



.header-social-links ul{

	padding: 0;

	margin: 0;

	list-style: none;

}



.header-social-links ul li{

	display: inline-block;

	margin-left: 4px;

}



.header-social-links ul li a{

	width: 26px;

	height: 26px;

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 7px;

	font-size: 14px;

	background: var(--accent-color);

	color: var(--primary-color);

	transition: all 0.2s ease-in-out;

}



.header-social-links ul li a:hover{

	background: var(--primary-color);

	color: var(--accent-color);

}



header.main-header{

	position: relative;

	max-width: 1270px;

	margin: 0 auto;

	background: var(--white-color);

	border-radius: 30px;

	border-bottom: 1px solid transparent;

	z-index: 100;

}



header.main-header .header-sticky{

	padding: 25px 15px;

	position: relative;

	top: 0;

	z-index: 100;	

}



header.main-header .header-sticky.hide{

	transform: translateY(-100%);

	transition: transform 0.3s ease-in-out;

	padding: 15px 0;

	border-radius: 0;

	border-bottom: 1px solid #16330010;

}



header.main-header .header-sticky.active{

	position: fixed;

	top: 0;

	left: 0;

	right: 0;

	border-radius: 0;

	border-bottom: 1px solid #16330010;

    transform: translateY(0);

	background: var(--white-color);

}



.navbar{

	padding: 0;

}



.navbar-brand{

	padding: 0;

}



.main-menu{

	font-family: var(--default-font);

	justify-content: flex-end;

}



.main-menu ul{

	align-items: center;

}



.main-menu ul li{

	margin: 0 15px;

	position: relative;

}



.main-menu ul li.submenu > a:after{

	content: '\f107';

	font-family: 'FontAwesome';

	font-weight: 900;

	font-size: 14px;

	margin-left: 8px;

}



.main-menu ul li a{

	font-size: 16px;

	font-weight: 400;

	padding: 12px 10px !important;

	color: var(--primary-color);

}



.main-menu ul li.highlighted-menu a{

	display: block;

	background: var(--accent-color);

	color: var(--primary-color);

	font-size: 16px;

	font-weight: 500;

	border: 2px solid var(--accent-color);

	padding: 10px 30px !important;

	border-radius: 30px;

	position: relative;

	overflow: hidden;

	z-index: 0;

	transition: 0.2s transform ease-in-out;

}



.main-menu ul li.highlighted-menu a:after{

	background-color: var(--primary-color);

	border-radius: 30px;

	content: '';

	display: block;

	height: 100%;

	width: 100%;

	position: absolute;

	left: 0;

	top: 0;

	transform: translate(-100%, 0) rotate(10deg);

	transform-origin: top left;

	transition: 0.2s transform ease-out;

	will-change: transform;

	z-index: -1;

}



.main-menu ul li.highlighted-menu a:hover::after{

	transform: translate(0, 0);

}



.main-menu ul li.highlighted-menu a:hover{

	color: var(--accent-color);

}



.main-menu ul li a:hover,

.main-menu ul li a:focus{

	color: var(--accent-color);

}



.main-menu ul ul{

	display: none;

	padding: 8px 0;

	margin: 0;

	list-style: none;

	width: 200px;

	border-radius: 20px;

	position: absolute;

	left: 0;

	top: 100%;

	background-color: var(--accent-color);

}



.main-menu ul ul ul{

	left: 100%;

	top: 0;

}



.main-menu ul ul li{

	margin: 0;

	padding: 0;

}



.main-menu ul ul li a{

	color: var(--primary-color);

	padding: 6px 20px !important;

}



.main-menu ul li:hover > ul{

	display: block;

}



.main-menu ul ul li a:hover{

	color: var(--white-color);

}



.responsive-menu,

.navbar-toggle{

	display: none;

}



.responsive-menu{

	top: 15px;

	position: relative;

}



.slicknav_btn{

	background: var(--accent-color);

	padding: 6px 0 0;

	width: 38px;

	height: 38px;

	margin: 0;

	border-radius: 10px;

}



.slicknav_icon .slicknav_icon-bar{

	display: block;

	width: 100%;

	height: 3px;

	width: 22px;

	background-color: var(--primary-color);

	margin: 4px auto !important;

}



.slicknav_menu{

	padding: 0;

	background: var(--accent-color);

	border-radius: 20px;

}



.slicknav_nav{

	padding-top: 5px;

	padding-bottom: 5px;

}



.slicknav_nav .slicknav_row,

.slicknav_nav li a{

	font-size: 16px;

	font-weight: 400;

	padding: 4px 15px;

	font-family: var(--default-font);

	color: var(--primary-color);

}



.slicknav_nav a:hover,

.slicknav_nav .slicknav_row:hover{

	background-color: transparent;

	color: var(--primary-color);

}



.slicknav_arrow{

	font-size: 0 !important;

}



.slicknav_arrow:after{

	content: '\f105';

	font-family: 'FontAwesome';

	font-weight: 900;

	font-size: 12px;

	margin-left: 8px;

}



/************************************/

/**** 	    04. Hero css		 ****/

/************************************/



.hero{

	position: relative;

	background: url(../images/hero2.jpg) no-repeat top center;

	background-size: cover;

	padding: 310px 0 140px;

	margin-top: -162px;

	overflow: hidden;

}



.hero:before{

	content: '';

	display: block;

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	background: linear-gradient(90deg, rgba(22, 51, 0, 0.65) 0%, rgba(22, 51, 0, 0.00) 100%);

}



.hero-content{

	position: relative;

	z-index: 1;

}



.hero-content .section-title{

	text-align: left;

	margin-bottom: 30px;

}



.hero-content .section-title h1{

	font-size: 70px;

	color: var(--white-color);

}



.hero-content-body p{

	color: var(--white-color);

	font-size: 18px;

}



.hero-content-body .btn-default{

	margin-top: 10px;

}



.hero-content-footer{

	margin-top: 60px;

}



.hero-content-footer .btn-default{

	margin-right: 20px;

}



/******************************************/

/****   	 05. About us css   	   ****/

/******************************************/



.about-us{

	padding: 100px 0;

}



.about-us .section-title{

	text-align: left;

	margin-bottom: 30px;

}



.about-content ul{

	padding: 0;

	margin: 0 0 20px;

	display: flex;

	flex-wrap: wrap;

	list-style: none;

}



.about-content ul li{

	width: 48%;

	margin-right: 2%;

	position: relative;

	padding-left: 30px;

	margin-bottom: 10px;

	font-weight: 500;

	color: var(--primary-color);

}



.about-content ul li:before{

	content: '\f058';

	font-family: "Font Awesome 6 Free";

	color: var(--accent-color);

	font-size: 20px;

	font-weight: 700;

	position: absolute;

	top: 0;

	left: 0;

}



.about-image{

	position: relative;

	background: url(../images/about-right-shape.svg) no-repeat top 30px right 6%;

	background-size: 18% auto;

	padding-bottom: 100px;

	margin-right: 20px;

}



.about-img-1{

	display: inline-block;

	width: 75%;

	border-radius: 30px;

	overflow: hidden;

	line-height: 0;

}



.about-img-2{

	width: 50%;

	border-radius: 30px;

	overflow: hidden;

	line-height: 0;

	position: absolute;

	right: 0;

	bottom: 0;

	background: var(--white-color);

	border: 6px solid var(--white-color);

}



/******************************************/

/****  	  06. Our Services css		   ****/

/******************************************/



.our-services{

	padding: 100px 0;

	background: var(--secondary-color);

}



.service-item{

	position: relative;

	border-radius: 30px;

	overflow: hidden;

	background-color: var(--white-color);

}



.service-item a.service-box-link{

	position: absolute;

	top: 0;

	right: 0;

	left: 0;

	bottom: 0;

	display: block;

	z-index: 4;

}



.service-item .service-image:before{

	content: '';

	position: absolute;

	left: 0;

	right: 0;

	bottom: 0;

	top: 100%;

	border-radius: 30px;

	background: var(--overlay-color);

	transition: all 0.3s ease-in-out;

	z-index: 1;

}



.service-item:hover .service-image:before{

	top: 0;

}



.service-item .service-image figure img{

	width: 100%;

	transition: all 0.5s ease-out;

}



.service-item:hover .service-image figure img{

	transform: scale(1.2);

}



.service-image .service-icon{

	position: absolute;

	top: 20px;

	right: 20px;

	width: 80px;

	height: 80px;

	background: var(--accent-color);

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 30px;

	z-index: 2;

}



.service-item .service-content{

	position: absolute;

	left: 20px;

	right: 20px;

	bottom: 20px;

	background: var(--white-color);

	border-radius: 30px;

	padding: 25px;

	z-index: 2;

	transition: all 0.2s ease-out;

}



.service-item:hover .service-content{

	bottom: 30px;

}



.service-item .service-content h3{

	font-size: 22px;

}



.service-item .service-content p{

	margin-bottom: 0;

}



.services-slider .swiper-pagination{

	position: relative;

	bottom: 0;

	margin-top: 30px;

}



.services-slider .swiper-pagination .swiper-pagination-bullet{

	width: 18px;

	height: 18px;

	background: var(--white-color);

	opacity: 1;

	transition: all 0.3s ease-in-out;

	margin: 0 5px;

}



.services-slider .swiper-pagination .swiper-pagination-bullet-active{

	background: var(--accent-color);

}



/******************************************/

/****   	 07. Our Process css  	   ****/

/******************************************/



.our-process{

	padding: 100px 0 50px;

}



.step-item{

	text-align: center;

	padding: 20px 40px 0;

	position: relative;

}



.step-header{

	margin-bottom: 30px;

	position: relative;

}



.step-item.step-1 .step-header:after{

	content: '';

	display: block;

	position: absolute;

	top: 50%;

	right: 0;

	width: 212px;

	height: 46px;

	background: url(../images/icon-step1.svg) no-repeat center center;

	background-size: 100% auto;

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

}



.step-item.step-2 .step-header:after{

	content: '';

	display: block;

	position: absolute;

	top: 50%;

	right: 0;

	width: 212px;

	height: 46px;

	background: url(../images/icon-step2.svg) no-repeat center center;

	background-size: 100% auto;

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

}



.step-header .step-icon{

	width: 130px;

	height: 130px;

	position: relative;

	background: var(--accent-color);

	margin: 0 auto;

	border-radius: 30px;

	display: flex;

	align-items: center;

	justify-content: center;

}



.step-header .step-icon figure{

	display: flex;

	align-items: center;

	justify-content: center;

	width: 100%;

	height: 100%;

	position: relative;

	overflow: hidden;

	border-radius: 30px;

}



.step-header .step-icon figure img{

	position: relative;

	z-index: 1;

}



.step-header .step-icon figure:before{

	content: '';

	display: block;

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	background: var(--primary-color);

	border-radius: 30px;

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

	transition: all 0.3s ease-out;

}



.step-item:hover .step-icon figure:before{

	transform: translate(0);

}



.step-header .step-no{

	display: block;

	height: 48px;

	width: 48px;

	background: var(--accent-color);

	border-radius: 30px;

	font-family: var(--accent-font);

	font-size: 22px;

	font-weight: 700;

	color: var(--primary-color);

	line-height: 40px;

	position: absolute;

	top: -20px;

	right: -20px;

	border: 4px solid var(--white-color);

}



.step-content h3{

	font-size: 22px;

	color: var(--primary-color);

	font-weight: 700;

	margin-bottom: 15px;

}



.step-content p{

	margin-bottom: 0;

}



/******************************************/

/****   	 08. Intro Video css   	   ****/

/******************************************/



.intro-video{

	padding: 50px 0;

}



.intro-video-box{

	position: relative;

	border-radius: 30px;

	overflow: hidden;

}



.intro-video-box:before{

	content: '';

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	background: var(--overlay-color);

	z-index: 1;

}



.intro-video-box .video-image img{

	transition: all 0.5s ease-in-out;

}



.intro-video-box:hover .video-image img{

	transform: scale(1.2);

}



.video-play-button{

	position: absolute;

	top: 50%;

	left: 50%;

	z-index: 2;

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

}



.video-play-button a{

	display: inline-block;

	position: relative;

	font-size: 80px;

	height: 80px;

    border-radius: 50%;

    text-align: center;

}



.video-play-button a img{

	width: 80px;

}



.video-play-button a:before{

	content: '';

	position: absolute;

	top: -30%;

	left: -30%;

	width: 160%;

	height: 160%;

	border: 2px solid var(--white-color);

	border-radius: 50%;

	transform: scale(0.6);

	z-index: -1;

	animation: border-zooming 1s infinite linear;

}



.video-play-button a:after{

	content: '';

	position: absolute;

	top: -30%;

	left: -30%;

	width: 160%;

	height: 160%;

	border: 2px solid var(--white-color);

	border-radius: 50%;

	transform: scale(0.6);

	z-index: -1;

	animation: border-zooming 1s infinite linear;

	animation-delay: .3s;

}



@keyframes border-zooming{

	100%{

		transform: scale(1);

		opacity: 0;

	}

}



/******************************************/

/****   	 09. Our Skills css   	   ****/

/******************************************/



.our-skills{

	padding: 50px 0;

}



.our-skills .section-title{

	text-align: left;

	margin-bottom: 0;

}



.our-skills .section-title h2{

	margin-bottom: 20px;

}



.our-skills .section-title p{

	margin-bottom: 0;

}



.skillbar{

	margin-bottom: 40px;

}



.skillbar:last-child{

	margin-bottom: 0;

}



.skillbar .skill-data{

	display: flex;

	justify-content: space-between;

	margin-bottom: 10px;

}



.skillbar .skill-data .title{

	color: var(--primary-color);

	font-size: 22px;

	font-family: var(--accent-font);

	font-weight: 700;

}



.skillbar .skill-data  .count{

	color: var(--accent-color);

	font-size: 22px;

	font-family: var(--accent-font);

	font-weight: 700;

}



.skillbar .skill-progress{

	width: 100%;

	height: 8px;

	border-radius: 10px;

	background: var(--secondary-color);

	position: relative;

}



.skillbar .skill-progress .count-bar{

	position: absolute;

	top: 0;

	left: 0;

	bottom: 0;

	border-radius: 10px;

	background: var(--accent-color);

}



/******************************************/

/****   	 10. Infobar CTA css   	   ****/

/******************************************/



.infobar{

	padding: 0px 0 100px;

}



.cta-box{

	background-color: var(--secondary-color);

	border-radius: 30px;

	overflow: hidden;

}



.cta-box .cta-image img{

	width: 100%;

}



.cta-content{

	position: relative;

	padding: 0 60px;

}



.cta-content .phone-icon{

	width: 90px;

	height: 90px;

	position: relative;

	border-radius: 50px;

	border: 6px solid var(--white-color);

	display: flex;

	align-items: center;

	justify-content: center;

	background: var(--accent-color);

	position: absolute;

	left: 0;

	top: 50%;

	overflow: hidden;

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

}



.cta-content .phone-icon:before{

	content: '';

	display: block;

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	background: var(--primary-color);

	border-radius: 50%;

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

	transition: all 0.3s ease-out;

}



.cta-box:hover .cta-content .phone-icon:before{

	transform: translate(0);

}



.cta-content .phone-icon figure{

	text-align: center;

}



.cta-content .phone-icon figure img{

	position: relative;

	z-index: 1;

}



.cta-content h3{

	font-size: 40px;

	color: var(--primary-color);

}



.cta-content h3 span{

	color: var(--accent-color);

}



.cta-content p{

	margin-bottom: 0;

}



/******************************************/

/****   	11. Why Choose Us css  	   ****/

/******************************************/



.why-choose-us{

	padding: 100px 0;

	background: var(--secondary-color);

}



.why-choose-item{

	border-radius: 30px;

	overflow: hidden;

	position: relative;

	padding: 25px;

	height: 100%;

}



.why-choose-item:before{

	content: '';

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	background: var(--white-color);

	z-index: 3;

	border-radius: 30px;

	transition: all 0.3s ease-out;

}



.why-choose-image{

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	border-radius: 36px;

    overflow: hidden;

	transition: all 0.1s ease-out;

}



.why-choose-image:after{

	content: '';

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	background-color: var(--overlay-color);

}



.why-choose-image img{

	width: 100%;

	height: 100%;

	object-fit: cover;

	object-position: center center;

}



.why-choose-content{

	position: relative;

	z-index: 4;

}



.why-choose-content .why-choose-icon{

	margin-bottom: 20px;

}



.why-choose-content .why-choose-icon img{

	max-height: 60px;

}



.why-choose-content h3{

	font-size: 22px;

	transition: all 0.3s ease-out;

}



.why-choose-content p{

	margin-bottom: 0;

	transition: all 0.3s ease-out;

}



.why-choose-item:hover:before{

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

}



.why-choose-item:hover .why-choose-image{

	opacity: 1;

}



.why-choose-item:hover .why-choose-content h3,

.why-choose-item:hover .why-choose-content p{

	color: var(--white-color);

}



/******************************************/

/****   	12. Stat Counter css  	   ****/

/******************************************/



.stat-counter{

	padding: 60px 0;

	background: var(--primary-color);

}



.counter-item{

	display: flex;

	flex-wrap: wrap;

	align-items: center;

}



.counter-item .counter-icon{

	width: 80px;

	height: 80px;

	border-radius: 30px;

	background-color: var(--accent-color);

	display: flex;

	align-items: center;

	justify-content: center;

	margin-right: 20px;

}



.counter-content{

	width: calc(100% - 110px);

}



.counter-content h3{

	font-size: 40px;

	color: var(--white-color);

	margin-bottom: 0;

}



.counter-content p{

	margin-bottom: 0;

	color: var(--accent-color);

}



/******************************************/

/****   	13. Solar Form css  	   ****/

/******************************************/



.solar-calculator{

	padding: 100px 0 50px;

}



.calculator-box{

	background: var(--secondary-color);

	border-radius: 30px;

	padding: 50px;

}



.calculator-box .section-title{

	margin-bottom: 0;

	text-align: left;

}



.solar-form .form-control{

	background: var(--white-color);

	border: none;

	outline: 0;

	box-shadow: none;

	border-radius: 10px;

	font-family: var(--default-font);

	font-size: 14px;

	color: var(--text-color);

	padding: 14px 20px;

}



.solar-form select.form-control{

	background-image: url(../images/icon-down.svg);

	background-repeat: no-repeat;

	background-position: right 20px center;

}



.solar-form .btn-default{

	padding: 12px 40px;

}



.solar-form .with-errors ul{

	padding: 0 0 0 4px;

	margin: 0;

	list-style: none;

	color: var(--error-color);

	font-size: 14px;

}



/******************************************/

/****   	14. Latest Post css  	   ****/

/******************************************/



.latest-news{

	padding: 50px 0;

}



.blog-item{

	border-radius: 30px;

	overflow: hidden;

	position: relative;

}



.blog-item .post-featured-image{

	margin-bottom: 0;

}



.blog-item .post-featured-image a{

	position: relative;

	z-index: 1;

}



.blog-item .post-featured-image img{

	width: 100%;

	aspect-ratio: 1/1.18;

	object-fit: cover;

	object-position: center center;

	transition: all 0.5s ease-out;

}



.blog-item:hover .post-featured-image img{

	transform: scale(1.2);

}



.blog-item .post-item-body{

	position: absolute;

	left: 20px;

	right: 20px;

	bottom: 20px;

	background: var(--white-color);

	border-radius: 30px;

	padding: 25px;

	z-index: 4;

}



.blog-item .post-item-body h2{

	color: var(--primary-color);

	font-size: 22px;

}



.blog-item .post-item-body h2 a{

	color: inherit;

	transition: all 0.3s ease-out;

}



.blog-item .post-item-body h2 a:hover{

	color: var(--accent-color);

}



.blog-item .post-item-body .post-meta ul{

	padding: 0;

	margin: 0;

	list-style: none;

}



.blog-item .post-item-body .post-meta ul li{

	display: inline-block;

	margin-right: 10px;

	color: var(--text-color);

}



.blog-item .post-item-body .post-meta ul li i{

	color: var(--accent-color);

	margin-right: 4px;

}



.blog-item .post-item-body .post-meta ul li a{

	color: inherit;

}



.blog-item .btn-readmore{

	height: 0;

	overflow: hidden;

	transition: all 0.3s ease-out;

}



.blog-item:hover .btn-readmore{

	height: 62px;

}



.blog-item .btn-default{

	padding: 6px 20px;

	margin-top: 20px;

	font-size: 14px;

}



.blog-item:hover .image-anime:after{

	height: 250%;

    transition: all 600ms linear;

    background-color: transparent;

}



.related-posts{

	padding: 50px 0;

}



/******************************************/

/****   	15. Footer Ticker css  	   ****/

/******************************************/



.footer-ticker{

	padding: 20px 0 10px;

}



.scrolling-ticker-box{

	--gap: 30px;

	position: relative;

	display: flex;

	overflow: hidden;

	user-select: none;

	gap: var(--gap);

}



.scrolling-content{

	flex-shrink: 0;

	display: flex;

	gap: var(--gap);

	min-width: 100%;

	animation: scroll 50s linear infinite;

}



.scrolling-content span{

	display: inline-flex;

	align-items: center;

	font-family: var(--accent-font);

	text-transform: uppercase;

	font-size: 100px;

	line-height: 1.1em;

	font-weight: 600;

	color: transparent;

	-webkit-text-stroke-width: 1px;

    stroke-width: 1px;

	font-weight: 700;

    -webkit-text-stroke-color: var(--accent-color);

    stroke: var(--accent-color);

}



.scrolling-content span:after{

	content: '/';

	margin-left: 30px;

}



@keyframes scroll {

	from {

		transform: translateX(0);

	}



	to {

		transform: translateX(calc(-100% - var(--gap)));

	}

}



/******************************************/

/****   		16. Footer css  	   ****/

/******************************************/



footer.main-footer{

	padding: 0 0 60px;

	background: #4d4a47 url(../images/footer-bg.svg) no-repeat bottom center;

	background-size: cover;

}



.footer-contact{

	border-bottom: 1px solid #ffffff20;

	margin-bottom: 80px;

	padding: 30px 0;

}



.footer-contact-box{

	position: relative;

	display: flex;

	flex-wrap: wrap;

	align-items: center;

}



.footer-contact-box .contact-icon-box{

	width: 80px;

	height: 80px;

	border-radius: 30px;

	display: flex;

	align-items: center;

	justify-content: center;

	background: var(--accent-color);

	margin-right: 30px;

}



.footer-contact-info{

	width: calc(100% - 110px);

}



.footer-contact-info h3{

	color: var(--white-color);

	font-size: 22px;

}



.footer-contact-info p{

	margin-bottom: 0;

	color: var(--white-color);

}



.footer-about figure{

	margin-bottom: 30px;

}



.footer-about p{

	color: var(--white-color);

}



.footer-social-links ul{

	padding: 0;

	margin: 0;

	list-style: none;

}



.footer-social-links ul li{

	display: inline-block;

	margin-right: 10px;

}



.footer-social-links ul li a{

	color: var(--accent-color);

}



.footer-links{

	padding-left: 80px;

}



.footer-links h2{

	color: var(--white-color);

	font-size: 22px;

	position: relative;

	margin-bottom: 30px;

}



.footer-links ul{

	list-style: none;

	padding: 0;

	margin: 0;

}



.footer-links ul li{

	position: relative;

	margin-bottom: 10px;

}



.footer-links ul li a{

	display: block;

	padding-left: 16px;

	color: var(--white-color);

}



.footer-links ul li a:before{

	content: '';

	display: block;

	position: absolute;

	left: 0;

	top: 50%;

	width: 6px;

	height: 6px;

	border-radius: 50%;

	background: var(--accent-color);

	transform: translate(0,-50%);

}



.footer-links ul li a:hover{

	color: var(--accent-color);

}



.footer-copyright{

	background: var(--accent-color);

	padding: 10px;

	border-radius: 30px;

	margin-top: 60px;

}



.footer-copyright-text{

	text-align: center;

}



.footer-copyright-text p{

	margin-bottom: 0;

	font-size: 18px;

	color: var(--primary-color);

}



/******************************************/

/****	  	 17. About us page css 	   ****/

/******************************************/



.page-header{

	position: relative;

	background: url(../images/header-banner.jpg) no-repeat center center;

	padding: 260px 0 100px;

    margin-top: -162px;

    overflow: hidden;

}

.page-header2{

	position: relative;

	background: url(../images/header-banner2.jpg) no-repeat center center;

	padding: 360px 0 100px;

    margin-top: -162px;

    overflow: hidden;

}



.page-header:before{

	content: '';

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	background: linear-gradient(90deg, rgba(22, 51, 0, 0.65) 0%, rgba(22, 51, 0, 0.00) 100%);

}



.page-header-box{

	position: relative;

	z-index: 1;

}



.page-header-box h1{

	font-size: 70px;

	color: var(--white-color);

	margin-bottom: 10px;

}



.page-header-box ol{

	margin-bottom: 0;

}



.page-header-box ol li.breadcrumb-item{

	color: var(--white-color);

}



.page-header-box ol .breadcrumb-item+.breadcrumb-item::before{

	color: var(--white-color);

}



.page-header-box ol li.breadcrumb-item a{

	color: inherit;

}



.latest-projects{

	padding: 100px 0;

	background: var(--secondary-color);

}



.project-item{

	position: relative;

	border-radius: 30px;

	overflow: hidden;

}



.project-item .project-image{

	position: relative;

}



.project-item .project-image:before{

	content: '';

	position: absolute;

	top: 100%;

	left: 0;

	right: 0;

	bottom: 0;

	border-radius: 30px;

	z-index: 1;

	background: var(--overlay-color);

	transition: all 0.3s ease-out;

}



.project-item .project-image img{

	width: 100%;

	aspect-ratio: 1/1.2;

	object-fit: cover;

	transition: all 0.5s ease-out;

}



.project-item:hover .project-image img{

	transform: scale(1.2);

}



.project-item .project-content{

	background: var(--white-color);

	border-radius: 30px;

	position: absolute;

	left: 15px;

	right: 15px;

	bottom: 15px;

	padding: 20px;

	z-index: 2;

	transition: all 0.2s ease-out;

}



.project-item .project-content h2{

	font-size: 22px;

	color: var(--primary-color);

	margin-bottom: 0;

}



.project-item .project-content h2 a{

	color: inherit;

}



.project-item .project-content p{

	margin-bottom: 0;

}



.project-item .project-link{

	position: absolute;

	right: 15px;

	top: 15px;

	z-index: 2;

}



.project-item .project-link a{

	display: block;

	width: 60px;

	height: 60px;

	border-radius: 18px;

	background: var(--accent-color);

	display: flex;

	align-items: center;

	justify-content: center;

}



.project-item:hover .project-image:before{

	top: 0;

}



.project-item:hover .project-content{

	bottom: 20px;

}



.testimonials{

	padding: 100px 0;

	background: var(--secondary-color);

}



.testimonial-item{

	background: var(--white-color);

	position: relative;

	border-radius: 30px;

	text-align: center;

	margin-top: 60px;

}



.testimonial-header{

	position: relative;

	top: -60px;

	margin-bottom: -60px;

}



.testimonial-header .testimonial-author-img{

	max-width: 130px;

	margin: 0 auto 10px;

	position: relative;

}



.testimonial-header .testimonial-author-img figure{

	overflow: hidden;

	border-radius: 50%;

}



.testimonial-header .testimonial-author-img img{

	border-radius: 100px;

	aspect-ratio: 1/1;

	border: 6px solid var(--white-color);

}



.testimonial-item:hover .image-anime:after{

	height: 250%;

    transition: all 600ms linear;

    background-color: transparent;

}



.testimonial-author-img .icon-quote{

	width: 30px;

	height: 30px;

	background: var(--accent-color);

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 30px;

	position: absolute;

	right: -10px;

	bottom: 30px;

	transition: all 0.3s ease-out;

}



.testimonial-author-img .icon-quote img{

	border: none;

}



.testimonial-header h2{

	font-size: 22px;

	margin: 0;

}



.testimonial-header p{

	margin-bottom: 0;

}



.testimonial-rating{

	margin: 20px 0 10px;

}



.testimonial-body{

	padding: 0 40px 40px;

}



.testimonial-body p:last-child{

	margin-bottom: 0;

}



.testimonial-slider .swiper-pagination{

	position: relative;

	bottom: 0;

	margin-top: 30px;

}



.testimonial-slider .swiper-pagination .swiper-pagination-bullet{

	width: 18px;

    height: 18px;

    background: var(--white-color);

    opacity: 1;

    transition: all 0.3s ease-in-out;

    margin: 0 5px;

}



.testimonial-slider .swiper-pagination .swiper-pagination-bullet-active{

	background-color: var(--accent-color);

}



.our-team{

	padding: 100px 0 50px;

}



.team-item{

	border-radius: 30px;

	overflow: hidden;

	position: relative;

}



.team-item .team-image figure img{

	width: 100%;

	transition: all 0.5s ease-out;

}



.team-item:hover .team-image figure img{

	transform: scale(1.1);

}



.team-item:hover .team-image figure:after{

	height: 250%;

    transition: all 600ms linear;

    background-color: transparent;

}



.team-item .team-content{

	position: absolute;

	right: 15px;

	bottom: 15px;

	left: 15px;

	background-color: var(--white-color);

	border-radius: 30px;

	padding: 20px;

	z-index: 2;

}



.team-item .team-content h2{

	font-size: 20px;

	margin-bottom: 5px;

}



.team-item .team-content p{

	margin: 0;

}



.team-item .team-content a.btn-team-link{

	position: absolute;

	top: 50%;

	right: 20px;

	width: 40px;

	height: 40px;

	background: var(--accent-color);

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 50%;

	transform: translateY(-50%);

}



/******************************************/

/****   	18. Services page css  	   ****/

/******************************************/



.page-services{

	padding: 100px 0 20px;

}



.page-services .service-item{

	margin-bottom: 30px;

}



/******************************************/

/****    19. Service Single page css   ****/

/******************************************/



.page-service-single{

	padding: 100px 0 50px;

}



.service-sidebar{

	padding-right: 30px;

}



.services-list-box{

	background: var(--secondary-color);

	padding: 20px 30px;

	border-radius: 30px;

	margin-bottom: 30px;

}



.services-list-box ul{

	padding: 0;

	margin: 0;

	list-style: none;

}



.services-list-box ul li a{

	display: block;

	position: relative;

	color: var(--primary-color);

	font-size: 22px;

	font-weight: 700;

	font-family: var(--accent-font);

	padding: 16px 0 14px 24px;

	border-bottom: 1px solid #89EA5F30;

	transition: all 0.3s ease-out;

}



.services-list-box ul li a:hover{

	color: var(--accent-color);

}



.services-list-box ul li a:before{

	content: '';

	display: block;

	height: 16px;

	width: 16px;

	background: url(../images/icon-solor.svg) no-repeat left center;

	position: absolute;

	top: 20px;

	left: 0;

}



.services-list-box ul li:last-child a{

	border-bottom: none;

}



.sidebar-cta-box{

	border-radius: 30px;

	overflow: hidden;

	background: var(--secondary-color);

}



.sidebar-cta-box .cta-image img{

	width: 100%;

	transition: all 0.5s ease-out;

}



.sidebar-cta-box .cta-content{

	padding: 0 30px 30px;

	text-align: center;

	margin-top: -40px;

}



.sidebar-cta-box .cta-content .cta-icon{

	width: 80px;

	height: 80px;

	background: var(--accent-color);

	border: 4px solid var(--white-color);

	border-radius: 50%;

	margin: 0 auto 20px;

	display: flex;

	align-items: center;

	justify-content: center;

	position: relative;

	z-index: 2;

}



.sidebar-cta-box .cta-content .cta-icon img{

	max-width: 50%;

}



.sidebar-cta-box .cta-content h3{

	font-size: 20px;

	margin-bottom: 0;

}



.sidebar-cta-box .cta-content p{

	margin: 0;

	font-size: 36px;

	color: var(--accent-color);

	font-family: var(--accent-font);

	font-weight: 700;

}



.sidebar-cta-box:hover .cta-image img{

	transform: scale(1.1);

}



.sidebar-cta-box:hover .cta-image figure:after{

	height: 250%;

    transition: all 600ms linear;

    background-color: transparent;

}



.service-featured-image{

	border-radius: 30px;

	overflow: hidden;

	margin-bottom: 30px;

}



.service-entry{

	margin-bottom: 50px;

}



.service-whyus{

	margin-bottom: 50px;

}



.service-whyus h2{

	font-size: 30px;

	margin: 0 0 0.7em;

}



.service-benefits{

	margin-bottom: 20px;

}



.service-benefits .service-benefits-title{

	margin-bottom: 30px;

}



.service-benefits .service-benefits-title h2{

	font-size: 30px;

}



.benefits-item{

	margin-bottom: 40px;

	padding-right: 20px;

}



.benefits-item .icon-box{

	margin-bottom: 20px;

}



.benefits-item h3{

	font-size: 22px;

	color: var(--primary-color);

	margin-bottom: 15px;

}



.service-features{

	margin-bottom: 50px;

}



.service-features .service-feature-image{

	border-radius: 30px;

	overflow: hidden;

}



.service-features .service-feature-content h2{

	font-size: 30px;

	margin-bottom: 20px;

}



.service-features .service-feature-content ul{

	padding: 0;

	margin: 0;

	list-style: none;

}



.service-features .service-feature-content ul li{

	position: relative;

	font-weight: 500;

	color: var(--primary-color);

	margin-bottom: 15px;

	padding-left: 30px;

}



.service-features .service-feature-content ul li:before{

	content: '\f058';

	font-family: "Font Awesome 6 Free";

	display: block;

	font-weight: 700;

	font-size: 20px;

	color: var(--accent-color);

	position: absolute;

	top: 0;

	left: 0;

}



.faq-box h2{

	font-size: 30px;

	margin-bottom: 30px;

}



.faq-accordion .accordion-item{

	margin-bottom: 20px;

	border: none;

}



.faq-accordion .accordion-header{

	margin-bottom: 0;

	font-family: var(--accent-font);

}



.faq-accordion .accordion-header button{

	background: var(--secondary-color);

	border-radius: 15px !important;

	font-weight: 700;

	font-size: 18px;

	border: none;

	box-shadow: none;

}



.faq-accordion .accordion-header button:after{

	content: '\f107';

	font-family: "Font Awesome 6 Free";

	background: none;

}



.faq-accordion .accordion-button:not(.collapsed){

	background: var(--accent-color);

	color: var(--white-color);

}



.faq-accordion .accordion-body p{

	color: var(--text-color);

}



.faq-accordion .accordion-body p:last-child{

	margin-bottom: 0;

}



/******************************************/

/****   20. Contact us page css   	   ****/

/******************************************/



.contact-information{

	padding: 100px 0;

}



.contact-info-item{

	border-radius: 30px;

	overflow: hidden;

	position: relative;

}



.contact-info-item .contact-image img{

	width: 100%;

	transition: all 0.5s ease-out;

}



.contact-info-item:hover .contact-image .image-anime:after{

	height: 250%;

    transition: all 600ms linear;

    background-color: transparent;

}



.contact-info-item:hover .contact-image img{

	transform: scale(1.1);

}



.contact-info-item .contact-info-content{

	background: var(--white-color);

	padding: 20px;

	position: absolute;

	left: 15px;

	right: 15px;

	bottom: 15px;

	border-radius: 30px;

	z-index: 3;

}



.contact-info-item .contact-info-content h3{

	font-size: 22px;

}



.contact-info-item .contact-info-content p{

	margin-bottom: 0;

}



.contact-info-item .contact-info-content ul{

	padding: 10px 0;

	margin: 0;

	list-style: none;

}



.contact-info-item .contact-info-content ul li{

	display: inline-block;

	margin-right: 4px;

}



.contact-info-item .contact-info-content ul li a{

	display: block;

	width: 30px;

	height: 30px;

	display: flex;

	align-items: center;

	justify-content: center;

	background: var(--accent-color);

	color: var(--primary-color);

	border-radius: 8px;

	transition: all 0.3s ease-out;

}



.contact-info-item .contact-info-content ul li a:hover{

	background: var(--primary-color);

	color: var(--white-color);

}



.contact-info-item .contact-icon{

	position: absolute;

	right: 15px;

	top: 15px;

	border-radius: 20px;

	background: var(--accent-color);

	width: 60px;

	height: 60px;

	display: flex;

	align-items: center;

	justify-content: center;

	z-index: 3;

}



.contact-info-item .contact-icon img{

	max-width: 50%;

	max-height: 50%;

}



.google-map-form{

	position: relative;

	padding: 100px 0;

}



.google-map{

	position: absolute;

	top: 0;

	right: 0;

	bottom: 0;

	left: 0;

}



.google-map iframe{

	width: 100%;

	height: 100%;

}



.contact-form-box{

	background: var(--white-color);

	padding: 40px;

	position: relative;

	z-index: 1;

	border-radius: 30px;

}



.contact-form-box .section-title{

	margin-bottom: 40px;

}



.contact-form .form-control{

	padding: 10px 20px;

	border: none;

	box-shadow: none;

	background: var(--secondary-color);

	border-radius: 10px;

}



.contact-form .with-errors ul{

	padding: 0 6px;

	margin: 0;

	font-size: 14px;

	color: var(--error-color);

}



/******************************************/

/****   21. Blog Archive page css 	   ****/

/******************************************/



.page-blog-archive{

	padding: 100px 0 50px;

}



.page-blog-archive .blog-item{

	margin-bottom: 30px;

}



.post-pagination{

	margin-top: 30px;

	text-align: center;

}



.post-pagination ul{

	justify-content: center;

	padding: 0;

	margin: 0;

}



.post-pagination ul li a,

.post-pagination ul li span{

	display: flex;

	text-decoration: none;

	justify-content: center;

	align-items: center;

	width: 40px;

	height: 40px;

	background: var(--secondary-color);

	margin: 0 4px;

	border-radius: 10px;

	font-family: var(--accent-font);

	font-weight: 700;

	color: var(--primary-color);

	transition: all 0.3s ease-out;

}



.post-pagination ul li.active a,

.post-pagination ul li a:hover{

	background: var(--accent-color);

	color: var(--white-color);

}



/******************************************/

/****   22. Post Single page css 	   ****/

/******************************************/



.post-single-meta ul{

	padding: 0;

	margin: 0;

	list-style: none;

	position: relative;

}



.post-single-meta ul li{

	display: inline-block;

	position: relative;

	color: var(--white-color);

}



.post-single-meta ul li:after{

	content: '/';

	margin: 0 10px 0 14px;

}



.post-single-meta ul li:last-child:after{

	display: none;

}



.page-single-post{

	padding: 100px 0 50px;

}



.post-featured-image{

	max-width: 1180px;

	margin: 0 auto 40px;

	border-radius: 30px;

	overflow: hidden;

}



.post-content{

	max-width: 1060px;

	margin: 0 auto;

}



.post-entry{

	border-bottom: 1px solid #dbeed8;

	margin-bottom: 15px;

	padding-bottom: 20px;

}



.post-entry h1,

.post-entry h2,

.post-entry h3,

.post-entry h4,

.post-entry h5,

.post-entry h6{

	margin: 1em 0 0.7em;

}



.post-entry h1{

	font-size: 36px;

}



.post-entry h2{

	font-size: 30px;

}



.post-entry h3{

	font-size: 26px;

}



.post-entry h4{

	font-size: 22px;

}



.post-entry h5{

	font-size: 18px;

}



.post-entry h6{

	font-size: 16px;

}



.post-entry ul{

	padding: 0;

	margin: 0 0 1.7em;

	list-style: none;

}



.post-entry ul li{

	position: relative;

	padding-left: 30px;

	margin-bottom: 10px;

	color: var(--primary-color);

}



.post-entry ul li:before{

	content: '\f058';

	font-family: "Font Awesome 6 Free";

	color: var(--accent-color);

	font-size: 20px;

	font-weight: 700;

	position: absolute;

	top: 0;

	left: 0;

}



.post-entry blockquote{

	background: var(--primary-color) url(../images/icon-blockquote.svg) no-repeat right bottom;

	text-align: center;

	border-radius: 30px;

	padding: 30px 80px;

	margin:30px 0px 30px 0px;

}



.post-entry blockquote p{

	font-size: 40px;

	color: var(--accent-color);

	font-family: var(--accent-font);

	font-weight: 700;

	line-height: 1.2em;

}



.post-entry blockquote p:last-child{

	margin-bottom: 0;

}



.post-tags{

	font-size: 30px;

	font-family: var(--accent-font);

	color: var(--primary-color);

	display: flex;

	align-items: center;

	font-weight: 700;

	vertical-align: middle;

}



.post-tags a{

	display: inline-block;

	font-size: 16px;

	font-weight: 500;

	font-family: var(--default-font);

	padding: 8px 24px;

	border: 2px solid var(--accent-color);

	background: var(--accent-color);

	color: var(--primary-color);

	border-radius: 30px;

	margin-left: 10px;

	position: relative;

	overflow: hidden;

	z-index: 0;

}



.post-tags a:after{

	background-color: var(--primary-color);

	border-radius: 30px;

	content: '';

	display: block;

	height: 100%;

	width: 100%;

	position: absolute;

	left: 0;

	top: 0;

	transform: translate(-100%, 0) rotate(10deg);

	transform-origin: top left;

	transition: 0.2s transform ease-out;

	will-change: transform;

	z-index: -1;

}



.post-tags a:hover::after{

	transform: translate(0, 0);

}



.post-tags a:hover{

	color: var(--accent-color);

}



.post-social-sharing{

	text-align: right;

}



.post-social-sharing ul{

	padding: 0;

	margin: 0;

	list-style: none;

}



.post-social-sharing ul li{

	display: inline-block;

	margin-left: 6px;

}



.post-social-sharing ul li a{

	width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--accent-color);

    color: var(--primary-color);

    border-radius: 8px;

    transition: all 0.3s ease-out;

}



.post-social-sharing ul li a:hover{

	background-color: var(--primary-color);

	color: var(--accent-color);

}



/******************************************/

/****   	 23. FAQs page css   	   ****/

/******************************************/



.page-faqs{

	padding: 100px 0 50px;

}



/******************************************/

/****   24. Project List page css 	   ****/

/******************************************/



.our-projects{

	padding: 100px 0 50px;

}



.our-projects .project-item{

	margin-bottom: 30px;

}



/******************************************/

/****   25. Project Single page css    ****/

/******************************************/



.page-project-single{

	padding: 100px 0 50px;

}



.project-sidebar{

	padding-right: 20px;

	position: sticky;

	top: 100px;

}



.about-project-box{

	background: var(--secondary-color);

	padding: 40px;

	border-radius: 30px;

}



.about-project-box h2{

	font-size: 24px;

	margin-bottom: 30px;

}



.project-info-box{

	position: relative;

	padding-left: 55px;

	border-bottom: 1px solid #dbeed8;

	padding-bottom: 20px;

	margin-bottom: 20px;

}



.project-info-box:last-child{

	border-bottom: none;

	padding-bottom: 0;

	margin-bottom: 0;

}



.project-info-box .project-icon{

	width: 40px;

	height: 40px;

	border-radius: 10px;

	background: var(--accent-color);

	display: flex;

	justify-content: center;

	align-items: center;

	position: absolute;

	top: 3px;

	left: 0;

}



.project-info-box .project-icon img{

	max-width: 60%;

	max-height: 60%;

}



.project-info-box h3{

	font-size: 20px;

	margin-bottom: 0;

}



.project-info-box p{

	margin: 0;

}



.project-feature-image{

	border-radius: 30px;

	overflow: hidden;

	margin-bottom: 30px;

}



.project-entry{

	margin-bottom: 50px;

}



.project-entry h1,

.project-entry h2,

.project-entry h3,

.project-entry h4,

.project-entry h5,

.project-entry h6{

	margin: 1em 0 0.7em;

}



.project-entry h1{

	font-size: 36px;

}



.project-entry h2{

	font-size: 30px;

}



.project-entry h3{

	font-size: 26px;

}



.project-entry h4{

	font-size: 22px;

}



.project-entry h5{

	font-size: 18px;

}



.project-entry h6{

	font-size: 16px;

}



.project-entry ul{

	padding: 0;

	margin: 0 0 1.7em;

	list-style: none;

}



.project-entry ul li{

	position: relative;

	padding-left: 30px;

	margin-bottom: 10px;

	font-weight: 500;

	color: var(--primary-color);

}



.project-entry ul li:before{

	content: '\f058';

	font-family: "Font Awesome 6 Free";

	color: var(--accent-color);

	font-size: 20px;

	font-weight: 700;

	position: absolute;

	top: 0;

	left: 0;

}



.project-entry blockquote{

	background: var(--primary-color) url(../images/icon-blockquote.svg) no-repeat right bottom;

	text-align: center;

	border-radius: 30px;

	padding: 30px 80px;

}



.project-entry blockquote p{

	font-size: 40px;

	color: var(--accent-color);

	font-family: var(--accent-font);

	font-weight: 700;

	line-height: 1.2em;

}



.project-entry blockquote p:last-child{

	margin-bottom: 0;

}



.project-gallery .project-gallery-title{

	margin-bottom: 20px;

}



.project-gallery .project-gallery-title h2{

	font-size: 30px;

}



.project-gallery-items{

	display: flex;

	flex-wrap: wrap;

}



.project-gallery-items .project-gallery-item{

	width: calc(25% - 15px);

	margin-right: 20px;

}



.project-gallery-items .project-gallery-item:nth-of-type(4n + 4){

	margin-right: 0;

}



.project-gallery-items .project-gallery-item img{

	aspect-ratio: 1/1;

	object-fit: cover;

	border-radius: 30px;

}



/******************************************/

/****   	 26. Team page css   	   ****/

/******************************************/



.page-team{

	padding: 100px 0 20px;

}



.page-team .team-item{

	margin-bottom: 30px;

}



/******************************************/

/****   27. Team Single page css 	   ****/

/******************************************/



.page-team-single{

	padding: 100px 0 50px;

}



.team-single-image{

	border-radius: 30px;

	overflow: hidden;

}



.team-single-information .team-single-header h2{

	font-size: 30px;

	margin-bottom: 4px;

}



.team-single-meta p{

	color: var(--primary-color);

	font-size: 18px;

	margin-bottom: 10px;

}



.team-single-meta p strong{

	font-family: var(--accent-font);

	font-size: 22px;

	margin-right: 4px;

}



.team-social-links{

	margin-top: 20px;

}



.team-social-links h3{

	font-size: 22px;	

}



.team-social-links ul{

	padding: 0;

	margin: 10px 0 0;

	list-style: none;

}



.team-social-links ul li{

	display: inline-block;

	margin-right: 6px;

}



.team-social-links ul li a{

	width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--accent-color);

    color: var(--primary-color);

    border-radius: 8px;

    transition: all 0.3s ease-out;

}



.team-social-links ul li a:hover{

	background: var(--primary-color);

	color: var(--accent-color);

}



.team-contact-form-box{

	background: var(--secondary-color);

	padding: 60px 100px;

	border-radius: 30px;

	margin-top: 100px;

}



.team-contact-form .form-control{

	padding: 14px 20px;

	border: none;

	box-shadow: none;

	background: var(--white-color);

	border-radius: 10px;

}



.team-contact-form .with-errors ul{

	padding: 0 6px;

	margin: 0;

	font-size: 14px;

	color: var(--error-color);

}



/******************************************/

/****   28. Page Not Found page css	   ****/

/******************************************/



.page-404{

	padding: 100px 0; 

}



.page-not-found-box{

	text-align: center;

}



.page-not-found-box h2{

	font-size: 30px;

	margin-bottom: 30px;

}



/******************************************/

/****   	 29. Responsive css   	   ****/

/******************************************/



@media only screen and (max-width: 1024px){

	.main-menu ul li a{

		padding: 12px 4px !important;

	}

}



@media only screen and (max-width: 1300px){

	header.main-header{

		margin: 0 15px;

	}



	.step-item.step-1 .step-header:after,

	.step-item.step-2 .step-header:after{

		width: 120px;

		transform: translateX(120px);

		height: 24px;

	}



	.cta-content h3{

		font-size: 30px;

	}

}



@media only screen and (max-width: 991px){

    #magic-cursor {

        display: none !important;

    }



	.responsive-menu,

    .navbar-toggle{

        display: block;

    }



    .section-title{

        margin-bottom: 40px;

    }



	.topbar{

		padding: 10px 0;

	}



	.topbar-contact-info{

		padding-left: 10px;

	}



	.header-social-links{

		padding-right: 10px;

	}



    .main-menu ul li{

        margin: 0 10px;

    }



	header.main-header{

		border-radius: 20px;

	}



	header.main-header .header-sticky{

		padding: 15px 0;

	}



	header.main-header .header-sticky.active .slicknav_menu{

		border-radius: 0;

	}



    .hero{

        padding: 220px 0 60px;

    }



    .hero-content{

        padding-right: 0;

    }



	.hero-content .section-title{

		margin-bottom: 20px;

	}



	.hero-content .section-title h1{

		font-size: 56px;

	}



	.hero-content-body p{

		font-size: 16px;

	}



	.hero-content-footer{

		margin-top: 30px;

	}



	.about-us{

		padding: 60px 0;

	}



	.about-image{

		margin-right: 0;

		margin-bottom: 30px;

	}



	.about-img-1,

	.about-img-2{

		border-radius: 20px;

	}



	.our-services{

		padding: 60px 0;

	}



	.service-item{

		border-radius: 20px;

	}



	.service-item .service-content{

		border-radius: 20px;

	}



	.service-image .service-icon{

		border-radius: 20px;

	}



	.service-item .service-content{

		bottom: 15px;

		left: 15px;

		right: 15px;

	}



	.our-process{

		padding: 60px 0 30px;

	}



	.step-item{

		padding-left: 0;

		padding-right: 0;

	}



	.step-item.step-1 .step-header:after,

	.step-item.step-2 .step-header:after{

		display: none;

	}



	.step-header .step-icon{

		width: 80px;

		height: 80px;

		border-radius: 20px;

	}



	.step-header .step-icon figure,

	.step-header .step-icon figure:before{

		border-radius: 20px;

	}



	.step-header .step-icon img{

		max-width: 50%;

	}



	.step-header .step-no{

		width: 38px;

		height: 38px;

		font-size: 18px;

		line-height: 30px;

	}



	.intro-video{

		padding: 30px 0;

	}



	.intro-video-box{

		border-radius: 20px;

	}



	.our-skills{

		padding: 30px 0;

	}



	.our-skills .section-title{

		margin-bottom: 40px;

	}



	.infobar{

		padding: 30px 0 60px;

	}



	.cta-content{

		padding: 50px 30px 30px;

		text-align: center;

	}



	.cta-content .phone-icon{

		width: 60px;

		height: 60px;

		border-width: 4px;

		left: 50%;

		top: auto;

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

	}



	.cta-content .phone-icon img{

		max-width: 50%;

	}



	.why-choose-us{

		padding: 60px 0 30px;

	}



	.why-choose-item{

		height: calc(100% - 30px);

		margin-bottom: 30px;

	}



	.why-choose-item,

	.why-choose-item:before{

		border-radius: 20px;

	}



	.why-choose-image{

		border-radius: 26px;

	}



	.stat-counter{

		padding: 60px 0 30px;

	}



	.counter-item{

		margin-bottom: 30px;

	}



	.counter-item .counter-icon{

		border-radius: 20px;

	}



	.solar-calculator{

		padding: 60px 0 30px;

	}



	.calculator-box .section-title{

		margin-bottom: 30px;

	}



	.calculator-box{

		border-radius: 20px;

	}



	.latest-news{

		padding: 30px 0 0;

	}



	.blog-item{

		margin-bottom: 30px;

		border-radius: 20px;

	}



	.blog-item .post-item-body{

		border-radius: 20px;

	}



	footer.main-footer{

		padding: 0 0 40px;

	}



	.footer-contact{

		padding: 30px 0 0;

		margin-bottom: 40px;

	}



	.footer-contact-box{

		margin-bottom: 30px;

	}



	.footer-contact-box .contact-icon-box{

		border-radius: 20px;

	}



	.footer-links{

		padding-left: 0;

	}



	.footer-social-links{

		margin-bottom: 40px;

	}



	.footer-copyright{

		padding: 20px;

		margin-top: 40px;

		border-radius: 20px;

	}



	.page-header{

		padding: 220px 0 60px;

	}



	.page-header-box h1{

		font-size: 56px;

	}



	.latest-projects{

		padding: 60px 0 30px;

	}



	.project-item{

		margin-bottom: 30px;

		border-radius: 20px;

	}



	.project-item .project-image:before{

		border-radius: 20px;

	}



	.project-item .project-content{

		border-radius: 20px;

	}



	.project-item .project-link a{

		border-radius: 10px;

	}



	.testimonials{

		padding: 60px 0;

	}



	.testimonial-item{

		border-radius: 20px;

	}



	.our-team{

		padding: 60px 0 0;

	}



	.team-item{

		margin-bottom: 30px;

		border-radius: 20px;

	}



	.team-item .team-content{

		border-radius: 20px;

	}



	.footer-ticker{

		padding-top: 15px;

	}



	.scrolling-content span{

		font-size: 50px;

	}



	.page-services{

		padding: 60px 0 0;

	}



	.page-service-single{

		padding: 60px 0 30px;

	}



	.service-sidebar{

		padding-right: 0;

	}



	.service-sidebar{

		margin-bottom: 40px;

	}



	.services-list-box{

		border-radius: 20px;

	}



	.sidebar-cta-box{

		border-radius: 20px;

	}



	.service-featured-image{

		border-radius: 20px;

	}



	.service-entry,

	.service-whyus,

	.service-features{

		margin-bottom: 40px;

	}



	.service-benefits{

		margin-bottom: 10px;

	}



	.service-features .service-feature-image{

		border-radius: 20px;

	}



	.contact-information{

		padding: 60px 0 30px;

	}



	.contact-info-item{

		border-radius: 20px;

		margin-bottom: 30px;

	}



	.contact-info-item .contact-info-content{

		border-radius: 20px;

	}



	.contact-info-item .contact-icon{

		border-radius: 10px;

	}



	.google-map-form{

		padding: 0;

	}



	.google-map{

		position: relative;

	}



	.google-map iframe{

		height: 400px;

	}



	.page-blog-archive{

		padding: 60px 0 30px;

	}



	.page-single-post{

		padding: 60px 0 30px;

	}



	.post-entry blockquote p{

		font-size: 22px;

	}



	.post-featured-image{

		border-radius: 20px;

	}



	.post-entry blockquote{

		border-radius: 20px;

	}



	.post-social-sharing{

		text-align: left;

		margin-top: 20px;

	}



	.related-posts{

		padding: 30px 0;

	}



	.page-faqs{

		padding: 60px 0 30px;

	}



	.our-projects{

		padding: 60px 0 30px;

	}



	.page-project-single{

		padding: 60px 0 30px;

	}



	.project-sidebar{

		padding-right: 0;

		margin-bottom: 40px;

	}



	.about-project-box{

		border-radius: 20px;

	}



	.project-feature-image{

		border-radius: 20px;

	}



	.project-gallery-items .project-gallery-item img{

		border-radius: 20px;

	}



	.page-team{

		padding: 60px 0 0px;

	}



	.page-team-single{

		padding: 60px 0 30px;

	}



	.team-single-image{

		margin-bottom: 30px;

		border-radius: 20px;

	}



	.team-contact-form-box{

		margin-top: 60px;

		border-radius: 20px;

		padding: 40px;

	}



	.page-404{

		padding: 60px 0;

	}

}



@media only screen and (max-width: 767px){

   

    .btn-default{

        padding: 10px 22px;

    }



    header.main-header .header-sticky{

        padding: 15px 0;

    }



	header.main-header .header-sticky.active{

		padding: 10px 0;

	}



	.navbar-brand img{

		max-height: 40px;

	}



	.topbar-contact-info ul{

		text-align: center;

	}



	.header-social-links{

		display: none;

	}



    .hero{

        padding: 220px 0 60px;

    }



	.hero:before{

		background: linear-gradient(90deg, rgba(22, 51, 0, 0.75) 0%, rgba(22, 51, 0, 0.20) 100%);

	}



    .hero-image{

        text-align: center;

    }



    .section-title{

        margin-bottom: 30px;

    }



    .section-title h3{

        margin-bottom: 10px;

    }



    .section-title h1,

    .section-title h2,

	.hero-content .section-title h1{

        font-size: 30px;

    }



	.hero-content-footer .btn-default{

		margin-right: 10px;

	}



	.about-us{

		padding: 40px 0;

	}



	.about-image{

		padding-bottom: 40px;

	}



	.about-content ul li{

		width: 100%;

		margin-right: 0;

	}



	.our-services{

		padding: 40px 0;

	}



	.our-process{

		padding: 40px 0 20px;

	}



	.step-item{

		margin-bottom: 30px;

	}



	.our-process .row .col-md-4:last-child .step-item{

		margin-bottom: 0;

	}



	.intro-video{

		padding: 20px 0;

	}



	.video-play-button a{

		height: 50px;

	}



	.video-play-button a img{

		max-width: 50px;

	}



	.our-skills{

		padding: 20px 0;

	}



	.skillbar{

		margin-bottom: 20px;

	}



	.skillbar .skill-data .title,

	.skillbar .skill-data .count{

		font-size: 18px;

	}



	.infobar{

		padding: 20px 0 40px;

	}



	.why-choose-us{

		padding: 40px 0 10px;

	}



	.stat-counter{

		padding: 40px 0 10px;

	}



	.solar-calculator{

		padding: 40px 0 20px;

	}



	.calculator-box{

		padding: 20px;

	}



	.latest-news{

		padding: 20px 0 0;

	}



	.blog-item .post-item-body{

		left: 15px;

		right: 15px;

		bottom: 15px;

	}



	.footer-contact-box .contact-icon-box{

		width: 60px;

		height: 60px;

		margin-right: 20px;

	}



	.footer-contact-info{

		width: calc(100% - 80px);

	}



	.footer-contact-box .contact-icon-box img{

		max-width: 50%;

		max-height: 50%;

	}



	.footer-links{

		margin-bottom: 30px;

	}



	.footer-links h2{

		margin-bottom: 20px;

	}



	.footer-copyright{

		margin-top: 10px;

	}



	.footer-copyright-text p{

		font-size: 16px;

	}



	.page-header-box h1{

		font-size: 30px;

		text-align: center;

		margin-bottom: 4px;

	}



	.page-header-box ol{

		justify-content: center;

	}



	.page-header-box ol li.breadcrumb-item{

		font-size: 14px;

	}



	.latest-projects{

		padding: 40px 0 10px;

	}



	.testimonials{

		padding: 40px 0;

	}



	.testimonial-body{

		padding: 0 30px 30px;

	}



	.testimonial-item{

		margin-top: 40px;

	}



	.testimonial-header{

		top: -40px;

		margin-bottom: -40px;

	}



	.testimonial-author-img .icon-quote{

		bottom: 20px;

	}



	.testimonial-header .testimonial-author-img{

		max-width: 100px;

	}



	.testimonial-slider .swiper-pagination{

		margin-top: 20px;

	}



	.testimonial-slider .swiper-pagination .swiper-pagination-bullet{

		width: 14px;

		height: 14px;

	}



	.our-team{

		padding: 40px 0 0;

	}



	.page-services{

		padding: 40px 0 0;

	}



	.page-service-single{

		padding: 40px 0 30px;

	}



	.services-list-box ul li a{

		font-size: 18px;

	}



	.services-list-box ul li a:before{

		top: 22px;

	}



	.service-whyus h2,

	.service-benefits .service-benefits-title h2,

	.service-features .service-feature-content h2,

	.faq-box h2{

		font-size: 26px;

	}



	.benefits-item{

		padding-right: 0;

	}



	.service-features .service-feature-image{

		margin-bottom: 20px;

	}



	.contact-information{

		padding: 40px 0 10px;

	}



	.contact-form-box{

		padding: 40px 10px;

	}



	.page-blog-archive{

		padding: 40px 0 30px;

	}



	.post-pagination{

		margin-top: 10px;

	}



	.post-single-meta{

		text-align: center;

	}



	.page-single-post{

		padding: 40px 0 20px;

	}



	.post-featured-image{

		margin-bottom: 20px;

	}



	.post-entry blockquote{

		padding: 30px;

	}



	.post-entry blockquote p{

		font-size: 18px;

	}



	.post-tags{

		flex-wrap: wrap;

		font-size: 18px;

	}



	.post-tags a{

		font-size: 14px;

		padding: 6px 14px;

	}



	.related-posts{

		padding: 20px 0 0;

	}



	.page-faqs{

		padding: 40px 0 20px;

	}



	.our-projects{

		padding: 40px 0 30px;

	}



	.page-project-single{

		padding: 40px 0 20px;

	}



	.about-project-box{

		padding: 30px;

	}



	.project-gallery-items .project-gallery-item{

		width: calc(50% - 10px);

		margin-bottom: 20px;

	}



	.project-gallery-items .project-gallery-item:nth-of-type(2n + 2){

		margin-right: 0;

	}



	.project-entry h1{

		font-size: 24px;

	}

	

	.project-entry h2{

		font-size: 22px;

	}

	

	.project-entry h3{

		font-size: 20px;

	}

	

	.project-entry h4{

		font-size: 18px;

	}

	

	.project-entry h5{

		font-size: 16px;

	}

	

	.project-entry h6{

		font-size: 14px;

	}



	.page-team{

		padding: 40px 0 0;

	}



	.page-team-single{

		padding: 40px 0 20px;

	}



	.team-single-information .team-single-header h2{

		font-size: 26px;

	}



	.team-single-meta p{

		font-size: 16px;

	}



	.team-single-meta p strong,

	.team-social-links h3{

		font-size: 18px;

	}



	.team-contact-form-box{

		padding: 30px 20px;

	}



	.page-404{

		padding: 40px 0 20px;

	}



	.page-not-found-box h2{

		font-size: 26px;

		margin-top: 20px;

		margin-bottom: 10px;

	}

}