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

* Author : Awaiken

* Template Name : Solor - Solar & Renewable Energy HTML Template

* File : CSS File

* Version : 2.0

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

/* 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. Pricing css

16. Latest Project css

17. Features css

18. Team css

19. Testimonial css

20. Why Renewable css

21. Our Story css

22. Our Clients css

23. Footer Ticker css

24. Footer css

25. About us page css

26. Services page css

27. Service Single page css

28. Contact us page css

29. Blog Archive page css

30. Post Single page css

31. FAQs page css

32. Project List page css

33. Project Single page css

34. Team page css

35. Team Single page css

36. Page Not Found page css

37. Responsive css

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



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

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

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



@font-face {

    font-family: 'Georgia Bold';

    font-style: normal;

    font-weight: normal;

    src: url('../webfonts/georgiab.woff') format('woff');

    }



:root {

	--primary-color			: #143b87;

	--secondary-color		: #EFF1ED;

	--text-color			: #888888;

	--white-color			: #ffffff;

	--black-color			: #000000;

	--accent-color			: #e3000f;

	--accent-color2			: #d70018;

	--white-divider			: #ffffff70;

	--divider-color			: #DADADA;

	--overlay-color			: rgba(215, 0, 24, 0.65);

	--overlay-color1			: rgba(20, 59, 135, 0.75);

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

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

	--accent-font2			: 'Georgia Bold', 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-font2);

	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;

}



.no-gap.row{

	margin-left: 0;

	margin-right: 0;

}



.no-gap.row > *{

	padding-left: 0;

	padding-right: 0;

}



.row.row-equal-height > [class*='col-']{

	display: flex;

	flex-direction: column;

}



.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(--white-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(--white-color) !important;

	border: 2px solid var(--primary-color) !important;

}



.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,

.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;

	display: none;

}



.section-title h3:before{

	content: '';

	display: none;

	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);

}



.section-description p:last-child{

	margin-bottom: 0;

}



.section-title h4{

    font-size: 24px;

    letter-spacing: -0.5px;

	font-weight: 700;

	line-height: 1em;

}



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

/**** 	   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;

	top:40px;

}

header.main-header-1{

	position: relative;

	margin: 0 auto;

	max-width: 100% !important;

	border-radius: 0px !important;

	background: var(--white-color);

	border-bottom: 1px solid transparent;

	z-index: 100;

	top:0px;

}



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 ul li.submenu > a{

	position: relative;

}



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

	width: 18px;

	height: 18px;

	position: absolute;

	right: 15px;

	top: 6px;

	transform: rotate(-90deg);

}



.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(--white-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(--white-color);

}



.main-menu ul li a:hover,

.main-menu ul li a:focus{

	color: var(--accent-color);

}



.main-menu ul ul{

	visibility: hidden;

	padding: 8px 0;

	margin: 0;

	list-style: none;

	width: 250px;

	border-radius: 20px;

	position: absolute;

	left: 0;

	top: 100%;

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

	opacity: 0;

    transform: scaleY(0.8);

    transform-origin: top;

    transition: all 0.3s ease-in-out;

    z-index: 2;

}



.main-menu ul ul ul{

	left: 100%;

	top: 0;

}



.main-menu ul ul li{

	margin: 0;

	padding: 0;

}



.main-menu ul ul li a,

.main-menu ul ul li a:focus{

	color: var(--white-color) !important;

	padding: 6px 20px !important;

}



.main-menu ul li:hover > ul{

	visibility: visible;

	opacity: 1;

	transform: scaleY(1);

}



.main-menu ul ul li a:hover{

	color: var(--white-color);

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

}

.main-menu ul ul li:first-child a:hover{

	border-top-left-radius: 10px;

    border-top-right-radius: 10px;

}

.main-menu ul ul li:last-child a:hover{

	border-bottom-left-radius: 10px;

    border-bottom-right-radius: 10px;

}



.responsive-menu,

.navbar-toggle{

	display: none;

}



.responsive-menu{

	top: 100%;

	position: absolute;

	left: 0;

	right: 0;

}



.slicknav_btn{

	background: var(--white-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(--white-color);

	border-radius: 20px;

	max-height: 80vh;

	overflow: auto;

}



.slicknav_nav{

	padding-top: 5px;

	padding-bottom: 5px;

}



.slicknav_nav .slicknav_row,

.slicknav_nav li a{

	font-size: 16px;

	font-weight: 400;

	padding: 10px 15px;

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

	color: var(--primary-color);

	line-height: normal;

}



.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;

	float: right;

	transition: all 0.3s ease-in-out;

}



.slicknav_nav li.slicknav_open > a .slicknav_arrow:after{

	transform: rotate(-90deg);

}



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

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

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



.hero{

	position: relative;

	background: url(../images/hero.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(255, 51, 0, 0.20) 0%, rgba(22, 51, 0, 0.00) 100%);

	z-index: 1;

}



.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;

}



.hero-video .hero-bg-video{

	position: absolute;

	top: 0;

	right: 0;

	left: 0;

	bottom: 0;

}



.hero-video .hero-section .hero-bg-video video{

	width: 100% !important;

	height: 100% !important;

	object-fit: cover !important;

}



.hero.hero-slider,

.hero-layout2.hero-slider,

.hero-layout3.hero-slider{

	background: none;

	padding: 0;

}



.hero.hero-slider .hero-slider-layout1 .hero-slide,

.hero-layout2.hero-slider .hero-slider-layout2 .hero-slide{

	position: relative;

    padding: 310px 80px 140px;

}



.hero-layout3.hero-slider .hero-slider-layout3 .hero-slide{

	padding: 310px 0 140px;

}



.hero.hero-slider .hero-slider-layout1 .hero-slide: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%);

    z-index: 1;

}



.hero-layout2.hero-slider .hero-slider-layout2 .hero-slide:before{

	content: '';

	display: block;

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	background: var(--black-color);

	opacity: 0.55;

	z-index: 1;

}



.hero.hero-slider .hero-slider-layout1 .hero-slide .hero-slider-image,

.hero-layout2.hero-slider .hero-slider-layout2 .hero-slide .hero-slider-image,

.hero-layout3.hero-slider .hero-slider-layout3 .hero-slide .hero-slider-image{

	position: absolute;

	top: 0;

	right: 0;

	left: 0;

	bottom: 0;

}



.hero.hero-slider .hero-slider-layout1 .hero-slide .hero-slider-image img,

.hero-layout2.hero-slider .hero-slider-layout2 .hero-slide .hero-slider-image img,

.hero-layout3.hero-slider .hero-slider-layout3 .hero-slide .hero-slider-image img{

	width: 100%;

	height: 100%;

	object-fit: cover;

}



.hero.hero-slider .hero-slider-layout1 .hero-slide .hero-content,

.hero-layout2.hero-slider .hero-slider-layout2 .hero-slide .hero-content,

.hero-layout3.hero-slider .hero-slider-layout3 .hero-slide .hero-content{

	position: relative;

	z-index: 2;

}



.hero.hero-slider .hero-slider-layout1 .hero-button-prev,

.hero.hero-slider .hero-slider-layout1 .hero-button-next,

.hero-layout2.hero-slider .hero-slider-layout2 .hero-button-prev,

.hero-layout2.hero-slider .hero-slider-layout2 .hero-button-next{

	width: 50px;

	height: 50px;

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

	background-repeat: no-repeat;

	background-position: center center;

	border-radius: 16px;

	position: absolute;

	top: 50%;

	transform: translateY(-50%);

	z-index: 1;

	cursor: pointer;

	transition: all 0.3s ease-in-out;

}



.hero.hero-slider .hero-slider-layout1 .hero-button-prev,

.hero-layout2.hero-slider .hero-slider-layout2 .hero-button-prev{

	left: 20px;

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

}



.hero.hero-slider .hero-slider-layout1 .hero-button-next,

.hero-layout2.hero-slider .hero-slider-layout2 .hero-button-next{

	right: 20px;

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

}



.hero.hero-slider .hero-slider-layout1 .hero-button-prev:hover,

.hero.hero-slider .hero-slider-layout1 .hero-button-next:hover,

.hero-layout2.hero-slider .hero-slider-layout2 .hero-button-prev:hover,

.hero-layout2.hero-slider .hero-slider-layout2 .hero-button-next:hover{

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

}



.hero-layout2{

	position: relative;

	/*background: url(../images/hero-2.jpg) no-repeat top center;*/

	background: url(../images/das-img/banner-v2.mp4) no-repeat center bottom;

	background-size: cover;

	padding: 310px 0 140px;

	margin-top: -162px;

	overflow: hidden;

}



.hero-layout2:before{

	content: '';

	display: block;

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	background: var(--black-color);

	/*opacity: 0.55;*/

	opacity: 0.35;

	z-index: 1;

}



.hero-layout2-box{

	text-align: center;

	max-width: 620px;

	margin: 0 auto;

	position: relative;

	z-index: 1;

}



.hero-left .hero-layout2-box{

    text-align: left;

    max-width: 100%;

}



.hero-layout2-box .section-title{

	margin-bottom: 20px;

}

.hero-left .section-title{

	text-align: left !important;

}



.hero-layout2-box .section-title h1{

	color: var(--white-color);

	font-size: 60px;

	/*font-size: 70px;*/

}



.hero-layout2-box .hero-content p{

	color: var(--white-color);

	font-size: 18px;

	margin-bottom: 10px;

}

.hero-left .hero-layout2-box .hero-content p{

	color: var(--white-color);

	font-size: 28px;

}



.hero-layout2-box .hero-button{

	margin-top: 40px;

}



.hero-layout2-box .hero-button .btn-default{

	margin: 0 10px;

}



.hero-layout2-box .hero-button .btn-default.btn-border{

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

	color: var(--white-color);

}



.hero-layout3{

	position: relative;

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

	background-size: cover;

	padding: 310px 0 140px;

	margin-top: -162px;

	overflow: hidden;

}



.hero-layout3:before,

.hero-layout3.hero-slider .hero-slider-layout3 .hero-slide:before{

	content: '';

	display: block;

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	background: var(--black-color);

	opacity: 0.5;

	z-index: 1;

}



.hero-layout3.hero-slider:before{

	display: none;

}



.hero-layout3 .hero-content,

.hero-layout3 .hero-image{

	position: relative;

	z-index: 1;

}



.hero-layout3 .hero-body{

	max-width: 616px;

}



.hero-layout3 .hero-body p{

	color: var(--white-color);

}



.hero-layout3 .hero-button{

	margin-top: 30px;

}



.hero-layout3 .hero-image{

	text-align: right;

}



.hero-layout3 .hero-image figure{

	display: inline-block;

	border-radius: 50%;

	width: auto;

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

	padding: 10px;

	max-width: 384px;

	aspect-ratio: 1/1;

	position: relative;

}



.hero-layout3 .hero-image figure img{

	aspect-ratio: 1/1;

	object-fit: cover;

	border-radius: 50%;

}



.hero-layout3 .hero-image-box{

	display: inline-block;

	position: relative;

}



.hero-layout3 .hero-image .rotate-circle{

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	z-index: 3;

	border-radius: 50%;

	animation: spinner 6s linear infinite;

}



.hero-layout3 .hero-image .rotate-circle::before{

	content: "";

	position: absolute;

	top: 0;

	left: 50%;

	display: flex;

	height: 14px;

	width: 14px;

	border-radius: 50%;

	margin-top: -6px;

	margin-left: -6px;

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

}



@keyframes spinner {

	to {

	  transform: rotate(360deg);

	}

}



.hero-slider-layout3 .swiper-pagination{

	bottom: 40px;

}



.hero-slider-layout3 .swiper-pagination-bullet{

	width: 14px;

	height: 14px;

	opacity: 1;

	background: var(--white-color);

}



.hero-slider-layout3 .swiper-pagination-bullet-active{

	background: var(--primary-color);

}



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

/****   	 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);

}



.about-image-slider{

	position: relative;

	margin-right: 20px;

}



.about-layout2{

	padding: 50px 0 100px;

}



.about-carousel{

	border-radius: 30px;

	overflow: hidden;

}



.about-layout2 .about-image{

	margin: 0;

	padding: 0;

}



.about-image img{

	width: 100%;

}



.about-carousel .about-button-prev,

.about-carousel .about-button-next{

	width: 40px;

	height: 40px;

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

	background-repeat: no-repeat;

	background-position: center center;

	border-radius: 15px;

	position: absolute;

	top: 50%;

	transform: translateY(-50%);

	z-index: 1;

	transition: all 0.3s ease-in-out;

}



.about-carousel .about-button-prev:hover,

.about-carousel .about-button-next:hover{

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

}



.about-carousel .about-button-prev{

	left: 30px;

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

}



.about-carousel .about-button-next{

	right: 30px;

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

}



.about-layout2-overlay-content{

	position: absolute;

	bottom: 30px;

	left: 30px;

	right: 30px;

	background: var(--white-color);

	border-radius: 30px;

	overflow: hidden;

	z-index: 1;

}



.about-overaly-item{

	display: flex;

	align-items: center;

	flex-wrap: wrap;

	padding: 20px;

}



.about-overaly-item.about-overaly-item-active{

	background: var(--secondary-color);

}



.about-overaly-item .icon-box{

	width: 60px;

	height: 60px;

	margin-right: 20px;

	display: flex;

	align-items: center;

	justify-content: center;

	background: var(--accent-color);

	border-radius: 20px;

}



.about-overaly-item h3{

	width: calc(100% - 80px);

	margin: 0;

	font-size: 20px;

}



.about-layout2-content{

	margin-left: 20px;

}



.about-layout2-content .section-title{

	text-align: left;

	margin-bottom: 30px;

}



.about-layout2-content .about-stats{

	margin-top: 30px;

	margin-bottom: 40px;

}



.about-layout2-content .about-stats-item{

	display: flex;

	flex-wrap: wrap;

	align-items: center;

}



.about-layout2-content .about-stats-item .icon-box{

	width: 60px;

	height: 60px;

	margin-right: 20px;

	background: var(--accent-color);

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 20px;

}



.about-layout2-content .about-stats-item .about-stats-content{

	width: calc(100% - 80px);

}



.about-layout2-content .about-stats-item .about-stats-content h3{

	margin-bottom: 0;

	font-size: 28px;

	font-weight: 700;

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

}



.about-layout2-content .about-stats-item .about-stats-content p{

	margin: 0;

}



.about-layout3{

	padding: 100px 0;

}



.about-layout3 .section-title{

	text-align: left;

	margin-bottom: 0;

}



.about-layout3-features{

	border-top: 1px solid var(--divider-color);

	margin-top: 40px;

	padding-top: 40px;

}



.about-layout3-features ul{

	padding: 0;

	margin: 0;

	list-style: none;

	display: flex;

	flex-wrap: wrap;

	justify-content: center;

	align-items: center;

}



.about-layout3-features ul li{

	font-size: 22px;

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

	font-weight: 700;

	color: var(--primary-color);

	position: relative;

	padding: 6px 0 6px 50px;

	margin-right: 60px;

}



.about-layout3-features ul li:before{

	content: '';

	display: block;

	background: var(--accent-color) url(../images/icon-checkmark.svg) no-repeat center center;

	background-size: 14px;

	width: 36px;

	height: 36px;

	border-radius: 10px;

	position: absolute;

	top: 0;

	left: 0;

}



.about-layout3-features ul li:last-child{

	margin-right: 0;

}



.about-layout3 .about-img-video{

	position: relative;

	margin-top: 60px;

	border-radius: 30px;

	overflow: hidden;

}



.about-layout3 .about-img-video .about-layout3-image img{

	transition: all 0.5s ease-out;

}



.about-layout3 .about-img-video:hover .about-layout3-image img{

	transform: scale(1.2);

}



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

/****  	  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(--primary-color);

}



.services-layout2{

	padding: 100px 0;

	background: var(--secondary-color);

}



.services-layout2-slide{

	background: var(--white-color);

	border-radius: 30px;

	overflow: hidden;

}



.services-layout2-slide .service-image{

	-webkit-mask-image: url(../images/service-mask-img.svg);

	-webkit-mask-size: cover;

    -webkit-mask-position: center center;

    -webkit-mask-repeat: no-repeat;

	mask-image: url(../images/service-mask-img.svg);

	mask-size: cover;

    mask-position: center center;

    mask-repeat: no-repeat;

}



.services-layout2-slide .service-image figure img{

	width: 100%;

	aspect-ratio: 1/0.929;

	transition: all 0.5s ease-out;

}



.services-layout2-slide:hover .service-image figure img{

	transform: scale(1.2);

}



.services-layout2-slide .service-content{

	padding: 30px;

	display: flex;

	flex-wrap: wrap;

}



.services-layout2-slide .service-content .service-info{

	width: calc(100% - 80px);

}



.services-layout2-slide .service-content .icon-box{

	width: 60px;

	margin-left: 20px;

}



.services-layout2-slide .service-content .icon-box a{

	width: 60px;

    height: 60px;

    background: var(--accent-color);

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 20px;

	position: relative;

	overflow: hidden;

}



.services-layout2-slide .service-content .icon-box a::before{

	content: '';

    display: block;

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: var(--primary-color);

    border-radius: 20px;

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

    transition: all 0.3s ease-out;

}



.services-layout2-slide:hover .service-content .icon-box a::before{

	transform: translate(0);

}



.services-layout2-slide:hover .service-image figure::after{

	height: 250%;

    transition: all 600ms linear;

    background-color: transparent;

}



.services-layout2-slide .service-content .icon-box img{

	position: relative;

	z-index: 1;

}



.services-layout2-slide .service-content .service-info h3{

	font-size: 22px;

}



.services-layout2-slide .service-content .service-info p{

	margin-bottom: 0;

}



.services-layout2-slider .swiper-pagination{

	position: relative;

	bottom: 0;

	margin-top: 30px;

}



.services-layout2-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-layout2-slider .swiper-pagination .swiper-pagination-bullet-active{

	background: var(--primary-color);

}



.services-layout3{

	padding: 100px 0;

	background: var(--secondary-color);

	background-size: cover;

}



.section-title-row{

	margin-bottom: 60px;

}



.section-title-row .section-title{

	text-align: left;

	margin-bottom: 0;

}



.service-slide3 .service-image{

	border-radius: 30px;

	overflow: hidden;

}



.service-slide3 .service-image img{

	aspect-ratio: 1/0.7;

	object-fit: cover;

	transition: all 0.5s ease-out;

}



.service-slide3:hover .service-image img{

	transform: scale(1.2);

}



.service-slide3 .service-content{

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

	margin-left: 30px;

	margin-right: 30px;

	border-radius: 20px;

	display: flex;

	align-items: center;

	justify-content: space-between;

	padding: 20px 30px;

	margin-top: -40px;

	position: relative;

	z-index: 2;

}



.service-slide3 .service-content h3{

	margin-bottom: 0;

	font-size: 22px;

	font-weight: 700;

}



.services-layout3-slider .swiper-pagination{

	position: relative;

	bottom: 0;

	margin-top: 30px;

}



.services-layout3-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-layout3-slider .swiper-pagination .swiper-pagination-bullet-active{

	background: var(--primary-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(--primary-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(--white-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;

}



.our-process-layout2{

	background: var(--secondary-color);

	padding: 100px 0;

}



.process-item2{

	background: var(--white-color);

	max-width: 310px;

	margin: 20px auto 0;

	aspect-ratio: 1/1;

	display: flex;

	flex-wrap: wrap;

	align-items: center;

	justify-content: center;

	border-radius: 50%;

	position: relative;

	transition: all 0.3s ease-in-out;

}



.process-item2 .process-step{

	width: 100px;

	height: 100px;

	position: relative;

	background: var(--accent-color);

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

	display: flex;

	align-items: center;

	justify-content: center;

	font-size: 44px;

	color: var(--white-color);

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

	font-weight: 700;

	border-radius: 50%;

	position: absolute;

	top: -20px;

	right: -20px;

	overflow: hidden;

}



.process-item2 .process-step:before{

	content: '';

	display: block;

	position: absolute;

	top: 100%;

	left: -100%;

	width: 100%;

	height: 100%;

	background: var(--primary-color);

	border-radius: 50%;

	transition: all 0.3s ease-out;

}



.process-item2 .process-step span{

	position: relative;

	z-index: 1;

}



.process-item2:hover .process-step:before{

	top: 0;

	left: 0;

}



.process-item2 .process-content{

	text-align: center;

	padding: 0 30px;

}



.process-item2 .process-content .icon-box{

	margin-bottom: 25px;

}



.process-item2 .process-content h3{

	font-size: 22px;

	margin-bottom: 15px;

}



.process-item2 .process-content p{

	margin: 0;

}



.our-process-layout2 .process-item2:after{

	content: '';

	display: block;

	width: 84px;

	height: 84px;

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

	background-size: 100% auto;

	position: absolute;

	top: 50%;

	right: -100px;

	transform: translateY(-50%);

}



.our-process-layout2 .row .col-lg-4:last-child .process-item2:after{

	display: none;

}



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

/****   	 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: 50px 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-color1);

}



.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);

}



.why-chooseus-layout2 .container-fluid{

	padding-left: 0;

	padding-right: 0;

}



.why-chooseus-layout2 .why-choose-us-img-box{

	position: relative;

	background: url('../images/das-img/Check-Weigher-(3).jpeg') no-repeat center center;

	background-size: cover;

	padding: 100px 15px;

	height: 100%;

	min-height: 300px;

}



.why-choose-us-layout2-content{

	padding: 100px;

}



.why-choose-us-layout2-content .section-title{

	text-align: left;

	margin-bottom: 20px;

}



.why-choose-us-layout2-content .why-choose-us-body{

	margin-bottom: 40px;

}



.why-choose-us-layout2-features .why-features-item{

	display: flex;

	flex-wrap: wrap;

	align-items: center;

	margin-bottom: 40px;

}



.why-choose-us-layout2-features .why-features-item:last-child{

	margin-bottom: 0;

}



.why-choose-us-layout2-features .why-features-item .icon-box{

	width: 60px;

	height: 60px;

	border-radius: 20px;

	background: var(--accent-color);

	display: flex;

	align-items: center;

	justify-content: center;

	margin-right: 20px;

}



.why-choose-us-layout2-features .why-features-item .why-features-desc{

	width: calc(100% - 80px);

}



.why-choose-us-layout2-features .why-features-item .why-features-desc h3{

	font-size: 22px;

	margin-bottom: 0;

}



.why-choose-us-layout2-features .why-features-item .why-features-desc p{

	margin: 0;

}



.why-choose-us-layout3{

	padding: 100px 0;

	background: var(--secondary-color);

}



.why-choose-item3{

	background: var(--white-color);

	text-align: center;

	padding: 40px 30px;

	border-radius: 30px;

	position: relative;

	overflow: hidden;

}



.why-choose-item3:before{

	content: '';

	display: block;

	position: absolute;

	top: 100%;

	left: -100%;

	width: 100%;

	height: 100%;

	background: var(--primary-color);

	border-radius: 30px;

	transition: all 0.4s ease-in-out;

}



.why-choose-item3 .icon-box{

	width: 80px;

	height: 80px;

	margin: 0 auto 30px;

	background: var(--accent-color);

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 30px;

	position: relative;

	z-index: 1;

}



.why-choose-item3 h3{

	font-size: 22px;

	margin-bottom: 15px;

	position: relative;

	z-index: 1;

	transition: all 0.3s ease-in-out;

}



.why-choose-item3 p{

	margin-bottom: 0;

	position: relative;

	z-index: 1;

	transition: all 0.3s ease-in-out;

}



.why-choose-item3:hover:before{

	top: 0;

	left: 0;

}



.why-choose-item3:hover h3,

.why-choose-item3:hover 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);

}



.company-overview{

	padding: 100px 0 70px;

}



.company-overview .section-title{

	text-align: left;

	margin-bottom: 20px;

}



.overview-counter-box{

	margin-left: 80px;

}



.overview-counter-box .overview-counter-item{

	background: var(--secondary-color);

	border-radius: 30px;

	padding: 20px;

	display: flex;

	flex-wrap: wrap;

	align-items: center;

	margin-bottom: 30px;

}



.overview-counter-box .overview-counter-item .icon-box{

	width: 80px;

	height: 80px;

	background: var(--accent-color);

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 20px;

	margin-right: 20px;

}



.overview-counter-box .overview-counter-item .overview-counter-content{

	width: calc(100% - 100px);

}



.overview-counter-box .overview-counter-item .overview-counter-content h3{

	font-size: 40px;

	margin: 0;

}



.overview-counter-box .overview-counter-item .overview-counter-content p{

	margin: 0;

}



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

/****   	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;

}



.latest-post-layout2{

	background: var(--secondary-color);

	padding: 100px 0;

}



.post-item2{

	background: var(--white-color);

	border-radius: 30px;

	overflow: hidden;

	height: 100%;

}



.post-item2 .post-featured-image{

	-webkit-mask-image: url(../images/post-mask-img.svg);

	-webkit-mask-size: cover;

	-webkit-mask-position: center center;

	-webkit-mask-repeat: no-repeat;

	mask-image: url(../images/post-mask-img.svg);

	mask-size: cover;

	mask-position: center center;

	mask-repeat: no-repeat;

	border-radius: 0;

	margin: 0;

	position: relative;

}



.post-item2 .post-featured-image img{

	aspect-ratio: 1.08/1;

	object-fit: cover;

	transition: all 0.5s ease-out;

}



.post-item2:hover .image-anime:after{

	height: 250%;

    transition: all 600ms linear;

    background-color: transparent;

}



.post-item2:hover .post-featured-image img{

	transform: scale(1.2);

}



.post-item2 .post-featured-image a.blog-link{

	width: 50px;

	height: 50px;

	border-radius: 50%;

	background: var(--white-color);

	color: var(--primary-color);

	display: flex;

	align-items: center;

	justify-content: center;

	position: absolute;

	top: 55%;

	opacity: 0;

	left: 50%;

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

	z-index: 1;

	transition: all 0.3s ease-in-out;

}



.post-item2:hover .post-featured-image a.blog-link{

	opacity: 1;

	top: 50%

}



.post-item2 .post-featured-image a.blog-link:hover{

	background: var(--primary-color);

	color: var(--white-color);

}



.post-item2 .post-body{

	padding: 20px 30px 30px;

}



.post-item2 .post-body h2{

	font-size: 22px;

	margin-bottom: 10px;

	color: var(--primary-color);

}



.post-item2 .post-body h2 a{

	color: inherit;

	transition: all 0.3s ease-in-out;

}



.post-item2 .post-body h2 a:hover{

	color: var(--accent-color);

}



.post-item2 .post-body p{

	margin: 0;

}



.latest-post-layout3{

	padding: 100px 0;

	background: var(--secondary-color);

}



.post-item3 .post-featured-image{

	position: relative;

	border-radius: 30px;

	overflow: hidden;

	margin-bottom: 30px;

}



.post-item3 .post-featured-image figure img{

	aspect-ratio: 1/0.7;

	object-fit: cover;

	transition: all 0.5s ease-out;

}



.post-item3 .post-featured-image .blog-read-more{

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	display: flex;

	align-items: center;

	justify-content: center;

	background: var(--overlay-color);

	opacity: 0;

	transition: all 0.3s ease-out;

}



.post-item3 .post-featured-image .blog-read-more a{

	width: 60px;

	height: 60px;

	background: var(--accent-color);

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 18px;

	position: relative;

	top: 20px;

	transition: all 0.3s ease-out;

}



.post-item3 .post-featured-image .blog-read-more a:hover{

	background: var(--primary-color);

}



.post-item3:hover .post-featured-image figure img{

	transform: scale(1.1);

}



.post-item3:hover .post-featured-image .blog-read-more{

	opacity: 1;

}



.post-item3:hover .post-featured-image .blog-read-more a{

	top: 0;

}



.post-item3 .post-body h2{

	font-size: 22px;

	color: var(--primary-color);

}



.post-item3 .post-body h2 a{

	color: var(--primary-color);

	transition: all 0.3s ease-out;

}



.post-item3 .post-body h2 a:hover{

	color: var(--accent-color);

}



.post-item3 .post-body p{

	margin-bottom: 0;

}



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

/****   	  15. Pricing css 	       ****/

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



.pricing-layout2{

	background: var(--secondary-color);

	padding: 100px 0;

}



.pricing-item2{

	background: var(--white-color);

	padding: 0 40px 40px;

	border-radius: 30px;

	margin-top: 18px;

}



.pricing-item2 .package-icon-box{

	background: var(--accent-color);

	width: 110px;

	height: 138px;

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 0 0 60px 60px;

	margin: 0 auto 15px;

	position: relative;

	top: -18px;

}



.pricing-item2 .package-icon-box:before{

	content: '';

	display: block;

	width: 0;

	height: 0;

	border-right: 18px solid #143b87;

	border-top: 18px solid transparent;

	position: absolute;

	left: -18px;

	top: 0;

}



.pricing-item2 .package-icon-box:after{

	content: '';

	display: block;

	width: 0;

	height: 0;

	border-left: 18px solid #143b87;

	border-top: 18px solid transparent;

	position: absolute;

	right: -18px;

	top: 0;

}



.pricing-item2 .price-header{

	text-align: center;

	margin-bottom: 20px;

}



.pricing-item2 .price-header h2{

	font-size: 22px;

	margin-bottom: 0px;

	text-transform: uppercase;

}



.pricing-item2 .price-header p{

	font-size: 30px;

	font-weight: 700;

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

	color: var(--accent-color);

	margin: 0;

}



.pricing-item2 .price-header p span{

	font-size: 20px;

	font-weight: 600;

}



.pricing-item2 .price-body ul{

	padding: 0;

	margin: 0;

	list-style: none;

}



.pricing-item2 .price-body ul li{

	position: relative;

	padding-left: 30px;

	color: var(--primary-color);

	margin-bottom: 15px;

}



.pricing-item2 .price-body 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;

}



.pricing-item2 .price-buy-button{

	margin-top: 30px;

	text-align: center;

}



.our-pricing-layout3{

	padding: 100px 0;

	background: var(--secondary-color);

}



.pricing-item-layout3{

	background: var(--white-color);

	text-align: center;

	border-radius: 30px;

}



.pricing-item-layout3 .pricing-header .package-name{

	padding: 25px 20px;

}



.pricing-item-layout3 .pricing-header .package-name h3{

	margin: 0;

	font-size: 26px;

}



.pricing-item-layout3 .pricing-header .package-price{

	background: var(--accent-color);

	padding: 10px 20px 4px;

	position: relative;

	margin-bottom: 30px;

}



.pricing-item-layout3 .pricing-header .package-price:after{

	content: '';

	display: block;

	width: 0;

	height: 0;

	border-top: 18px solid var(--accent-color);

	border-left: 18px solid transparent;

	border-right: 18px solid transparent;

	position: absolute;

	bottom: -18px;

	left: 50%;

	transform: translateX(-50%);

}



.pricing-item-layout3 .pricing-header .package-price p{

	font-size: 30px;

	color: var(--white-color);

	font-weight: 700;

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

	margin: 0;

	padding: 0;

}



.pricing-item-layout3 .pricing-header .package-price p span{

	font-size: 20px;

	font-weight: 500;

}



.pricing-item-layout3  .pricing-body ul{

	padding: 0;

	margin: 0;

	list-style: none;

}



.pricing-item-layout3  .pricing-body ul li{

	border-bottom: 1px dashed var(--divider-color);

	padding: 14px 20px 14px 50px;

	position: relative;

	text-align: left;

}



.pricing-item-layout3 .pricing-body ul li:last-child{

	border-bottom: none;

}



.pricing-item-layout3 .pricing-body ul li:before{

	content: '\f058';

    font-family: "Font Awesome 6 Free";

    color: var(--accent-color);

    font-size: 20px;

    font-weight: 700;

    position: absolute;

    top: 14px;

    left: 20px;

}



.pricing-item-layout3 .pricing-footer{

	padding: 30px 20px;

}



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

/****   	16. Latest Project css 	   ****/

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



.our-projects-layout2{

	padding: 100px 0;

}



.our-projects-layout2 .container-fluid{

	padding-left: 0;

	padding-right: 0;

}



.project-layout2-slider .swiper-wrapper{

	-webkit-transition-timing-function:linear!important;

	transition-timing-function:linear!important; 

}



.project-layout2-slide{

	background: var(--secondary-color);

	border-radius: 30px;

	overflow: hidden;

}



.project-layout2-slide .project-image{

	-webkit-mask-image: url(../images/project-mask-img.svg);

    -webkit-mask-size: cover;

    -webkit-mask-position: center center;

    -webkit-mask-repeat: no-repeat;

    mask-image: url(../images/project-mask-img.svg);

    mask-size: cover;

    mask-position: center center;

    mask-repeat: no-repeat;	

}



.project-layout2-slide .project-image img{

	width: 100%;

    aspect-ratio: 0.91/1;

	transition: all 0.5s ease-out;

}



.project-layout2-slide:hover .project-image img{

	transform: scale(1.2);

}



.project-layout2-slide .project-content{

	padding: 15px 80px 30px 30px;

	position: relative;

}



.project-layout2-slide .project-content h3{

	font-size: 22px;

	margin-bottom: 4px;

}



.project-layout2-slide .project-content p{

	margin: 0;

}



.project-layout2-slide .project-content .btn-link-box a{

	width: 60px;

	height: 60px;

	display: flex;

	align-items: center;

	justify-content: center;

	background: var(--accent-color);

	border-radius: 15px;

	position: absolute;

	right: 20px;

	top: 20px;

	overflow: hidden;

}



.project-layout2-slide .project-content .btn-link-box a:before{

	content: '';

	position: absolute;

	top: 100%;

	left: -100%;

	width: 100%;

	height: 100%;

	border-radius: 15px;

	background: var(--primary-color);

	z-index: 1;

	transition: all 0.2s ease-out;

}



.project-layout2-slide .project-content .btn-link-box a img{

	position: relative;

	z-index: 1;

}



.project-layout2-slide:hover .project-content .btn-link-box a:before{

	top: 0;

	left: 0;

}



.project-layout3{

	padding: 100px 0;

}



.project-layout3 .container-fluid{

	padding-left: 0;

	padding-right: 0;

}



.project-layout3-slider .swiper-wrapper{

	-webkit-transition-timing-function:linear!important;

	transition-timing-function:linear!important; 

}



.project-slide3{

	position: relative;

	border-radius: 30px;

	overflow: hidden;

}



.project-slide3 .project-image img{

	width: 100%;

	aspect-ratio: 1/0.6;

	object-fit: cover;

}



.project-slide3 .project-content{

	position: absolute;

	left: 0;

	right: 0;

	bottom: 0;

	height: 30%;

	background: linear-gradient(transparent,var(--overlay-color));

	display: flex;

	flex-wrap: wrap;

	align-content: end;

	justify-content: center;

	padding: 20px;

}



.project-slide3 .project-content h3{

	width: 100%;

	text-align: center;

	font-size: 26px;

	color: var(--accent-color);

	margin-bottom: 0;

}



.project-slide3 .project-content p{

	color: var(--white-color);

	margin-bottom: 0;

}



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

/****   	  17. Features css  	   ****/

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



.features-layout2{

	padding: 100px 0 50px;

}



.features-layout2-box{

	background: var(--secondary-color);

	border-radius: 30px;

	overflow: hidden;

}



.features-item2{

	padding: 40px;

	position: relative;

	overflow: hidden;

}



.features-item2:before{

	content: '';

	display: block;

	position: absolute;

	top: 100%;

	left: 0;

	width: 100%;

	height: 100%;

	background: var(--accent-color);

	z-index: 1;

	opacity: 0;

	border-radius: 30px;

	transition: all 0.3s ease-out;

}



.features-item2 .features-header{

	display: flex;

	flex-wrap: wrap;

	align-items: center;

	margin-bottom: 20px;

	position: relative;

	z-index: 1;

}



.features-item2 .features-header .icon-box{

	width: 80px;

	height: 80px;

	background: var(--primary-color);

	border-radius: 30px;

	display: flex;

	align-items: center;

	justify-content: center;

	margin-right: 20px;

}



.features-item2 .features-header h3{

	width: calc(100% - 100px);

	margin: 0;

	font-size: 26px;

	transition: all 0.2s ease-out;

}



.features-item2 .features-desc p{

	margin-bottom: 0;

	position: relative;

	z-index: 1;

	transition: all 0.2s ease-out;

}



.features-item2.features-active{

	background: var(--primary-color);

}



.features-item2.features-active .features-header .icon-box{

	background: var(--white-color);

}



.features-item2.features-active .features-header h3,

.features-item2.features-active .features-desc p{

	color: var(--white-color);

}



.features-item2:hover:before{

	top: 0;

	border-radius: 0;

	opacity: 1;

}



.features-item2:hover .features-header h3,

.features-item2:hover .features-desc p{

	color: var(--white-color);

}



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

/****   		18. Team css  	   	   ****/

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



.team-layout2{

	background: var(--secondary-color);

	padding: 100px 0;

}



.team-item2{

	background: var(--white-color);

	border-radius: 30px;

	overflow: hidden;

}



.team-item2 .team-image{

	-webkit-mask-image: url(../images/team-mask-img.svg);

    -webkit-mask-size: cover;

    -webkit-mask-position: center center;

    -webkit-mask-repeat: no-repeat;

    mask-image: url(../images/team-mask-img.svg);

    mask-size: cover;

    mask-position: center center;

    mask-repeat: no-repeat;

}



.team-item2 .team-image img{

	aspect-ratio: 0.83/1;

	object-fit: cover;

	object-position: top center;

	transition: all 0.5s ease-out;

}



.team-item2:hover .team-image img{

	transform: scale(1.1);

}



.team-item2:hover figure:after{

	height: 250%;

    transition: all 600ms linear;

    background-color: transparent;

}



.team-item2 .team-links{

	display: flex;

	flex-wrap: wrap;

	align-items: center;

	padding: 0 30px;

	margin-top: -50px;

	margin-bottom: 20px;

	position: relative;

	z-index: 1;

}



.team-item2 .team-links .link-icon{

	width: 40px;

	height: 40px;

	margin-right: 6px;

}



.team-item2 .team-links .link-icon a{

	display: block;

	width: 40px;

	height: 40px;

	background: var(--accent-color);

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 30px;

	color: var(--primary-color);

	transition: all 0.3s ease-out;

}



.team-item2 .team-links .link-icon a:hover{

	background: var(--primary-color);

	color: var(--white-color);

}



.team-item2 .team-links .team-social-links{

	width: calc(100% - 50px);

	margin: 0;

	transform: translateX(30px);

	opacity: 0;

	transition: all 0.4s ease-out;

}



.team-item2:hover .team-links .team-social-links{

	transform: translateX(0);

	opacity: 1;

}



.team-item2 .team-links .team-social-links ul{

	margin: 0;

}



.team-item2 .team-links .team-social-links ul li{

	margin-right: 2px;

}



.team-item2 .team-links .team-social-links ul li a{

	width: 40px;

	height: 40px;

	border-radius: 30px;

	font-size: 16px;

	color: var(--primary-color);

}



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

	color: var(--white-color);

}



.team-item2 .team-content{

	padding: 0 30px 25px;

}



.team-item2 .team-content h3{

	font-size: 22px;

	margin-bottom: 5px;

}



.team-item2 .team-content p{

	margin: 0;

}



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

/****   	19. Testimonial css  	   ****/

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



.testimonial-layout2{

	padding: 100px 0;

	background: url(../images/map-bg-img.svg) no-repeat top center;

}



.testimonial-slider2 .testimonial-item2{

	background: var(--secondary-color);

	border-radius: 30px;

	padding: 20px;

}



.testimonial-slider2 .testimonial-item2 .testimonial-header{

	display: flex;

	flex-wrap: wrap;

	align-items: center;

	top: 0;

	margin-bottom: 30px;

}



.testimonial-slider2 .testimonial-item2 .testimonial-header .testimonial-author-image{

	width: 70px;

	height: 70px;

	margin-right: 20px;

	position: relative;

}



.testimonial-slider2 .testimonial-item2 .testimonial-header .testimonial-author-image:after{

	content: '';

	width: 20px;

    height: 20px;

    background: var(--accent-color) url(../images/icon-quote.svg) no-repeat center center;

	background-size: 50% auto;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 30px;

    position: absolute;

    bottom: -10px;

	left: 50%;

	margin-left: -10px;

    transition: all 0.3s ease-out;

}



.testimonial-slider2 .testimonial-item2 .testimonial-header .testimonial-author-image img{

	aspect-ratio: 1/1;

	object-fit: cover;

	border-radius: 50%;

}



.testimonial-slider2 .testimonial-item2 .testimonial-header .testimonial-author-info h3{

	font-size: 22px;

	margin-bottom: 4px;

}



.testimonial-slider2 .testimonial-item2 .testimonial-header .testimonial-author-info p{

	margin: 0;

}



.testimonial-slider2 .testimonial-item2 .testimonial-body{

	padding: 0;

}



.testimonial-slider2 .swiper-pagination{

	position: relative;

	bottom: 0;

	margin-top: 30px;

}



.testimonial-slider2 .swiper-pagination .swiper-pagination-bullet{

	width: 18px;

    height: 18px;

    background: var(--secondary-color);

    opacity: 1;

    transition: all 0.3s ease-in-out;

    margin: 0 5px;

}



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

	background: var(--primary-color);

}



.testimonial-layout3{

	padding: 100px 0;

	background: var(--white-color) url(../images/map-bg-img.svg) no-repeat center center;

	background-size: cover;

}



.testimonial-slide3{

	background: var(--secondary-color);

	padding: 40px;

	border-radius: 30px;

}



.testimonial-slide3 .testimonial-content .rating-image{

	margin-bottom: 15px;

}



.testimonial-slide3 .testimonial-footer{

	display: flex;

	flex-wrap: wrap;

	align-items: center;

}



.testimonial-slide3 .testimonial-footer .author-image{

	width: 70px;

	margin-right: 20px;

}



.testimonial-slide3 .testimonial-footer .author-image img{

	border-radius: 40px;

}



.testimonial-slide3 .testimonial-footer .author-info{

	width: calc(100% - 90px);

}



.testimonial-slide3 .testimonial-footer .author-info h3{

	font-size: 22px;

	margin: 0 0 4px;

}



.testimonial-slide3 .testimonial-footer .author-info p{

	margin: 0;

}



.testimoinal-layout3-slider .swiper-pagination{

	position: relative;

	bottom: 0;

	margin-top: 30px;

}



.testimoinal-layout3-slider .swiper-pagination .swiper-pagination-bullet{

	width: 18px;

	height: 18px;

	background: var(--secondary-color);

	opacity: 1;

	transition: all 0.3s ease-in-out;

	margin: 0 5px;

}



.testimoinal-layout3-slider .swiper-pagination .swiper-pagination-bullet-active{

	background: var(--primary-color);

}



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

/****   	20. Why Renewable css  	   ****/

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



.why-renewable{

	padding: 100px 0;

}



.why-renewable-left{

	display: flex;

	flex-wrap: wrap;

	justify-content: space-between;

	padding-right: 30px;

}



.why-renewable-left .why-renewable-img-1,

.why-renewable-left .why-renewable-img-2{

	width: 48%;

}



.why-renewable-left .why-renewable-img-1 img,

.why-renewable-left .why-renewable-img-2 img{

	border-radius: 30px;

}



.why-renewable-left .why-renewable-img-1 p,

.why-renewable-left .why-renewable-img-2 p{

	display: inline-block;

	background: var(--primary-color);

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

	font-size: 22px;

	font-weight: 600;

	color: var(--white-color);

	position: relative;

	padding: 4px 20px;

	border-radius: 12px;

	margin: 0;

	z-index: 2;

}



.why-renewable-left .why-renewable-img-1{

	text-align: right;

}



.why-renewable-left .why-renewable-img-2{

	margin-top: 30px;

}



.why-renewable-left .why-renewable-img-1 p{

	margin-top: 20px;

	margin-right: -60px;

	background: var(--accent-color);

	animation: moveobjectright 2s infinite linear alternate;

}



.why-renewable-left .why-renewable-img-2 p{

	margin-bottom: 20px;

	margin-left: -60px;

	animation: moveobjectleft 2s infinite linear alternate;

}



@keyframes moveobjectleft{

	50%{

		margin-left: -40px;

	}

}



@keyframes moveobjectright{

	50%{

		margin-right: -40px;

	}

}



.why-renewable-item{

	padding-left: 50px;

	position: relative;

	margin-bottom: 40px;

}



.why-renewable-item:last-child{

	margin-bottom: 0;

}



.why-renewable-item .stepno{

	display: block;

	width: 36px;

	height: 36px;

	border-radius: 50%;

	background: var(--accent-color);

	color: var(--white-color);

	display: flex;

	align-items: center;

	justify-content: center;

	font-size: 22px;

	font-weight: 700;

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

	position: absolute;

	top: 0;

	left: 0;

}



.why-renewable-item h3{

	font-size: 26px;

	padding-top: 2px;

	margin-bottom: 10px;

}



.why-renewable-item p{

	margin-bottom: 0;

}



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

/****   	21. Our Story css  	   	   ****/

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



.our-story{

	padding: 100px 0;

	background: var(--secondary-color);

}



.our-story-content .section-title{

	text-align: left;

	margin-bottom: 30px;

}



.our-story-body ul{

	padding: 0;

	margin: 0;

	list-style: none;

}



.our-story-body ul li{

	position: relative;

	padding-left: 30px;

	margin-bottom: 10px;

}



.our-story-body 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;

}



.our-story-body .btn-default{

	margin-top: 30px;

}



.our-story-image{

	border-radius: 30px;

	overflow: hidden;

	margin-right: 40px;

	line-height: 0;

}



.our-story-image img{

	width: 100%;

}



.story-counter-item{

	margin-bottom: 40px;

}



.story-counter-item:last-child{

	margin-bottom: 0;

}



.story-counter-item h3{

	font-size: 50px;

	color: var(--accent-color);

	margin-bottom: 0;

}



.story-counter-item h3 span{

	color: var(--primary-color);

}



.story-counter-item p{

	margin-bottom: 0;

}



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

/****   	22. Our Clients css  	   ****/

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



.our-clients-layout3{

	padding: 100px 0;

}



.client-logos-layout3{

	display: flex;

	flex-wrap: wrap;

}



.client-logos-layout3 .client-logo-item{

	width: calc(20% - 24px);

	margin-right: 30px;

	background: var(--secondary-color);

	padding: 40px 30px;

	text-align: center;

	border-radius: 30px;

}



.client-logos-layout3 .client-logo-item:nth-of-type(5n + 5){

	margin-right: 0;

}



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

/****   	23. 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)));

	}

}



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

/****   		24. Footer css  	   ****/

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



footer.main-footer{

	padding: 0 0 60px;

	background: var(--primary-color) 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,

.footer-contact-info p a{

	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(--white-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: 30px;

	border-radius: 30px;

	margin-top: 60px;

}



.footer-copyright-text{

	text-align: center;

}



.footer-copyright-text p,

.footer-copyright-text p a{

	margin-bottom: 0;

	font-size: 18px;

	color: var(--white-color);

}



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

/****	  	 25. About us page css 	   ****/

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



.page-header{

	position: relative;

	background: url(../images/das-img/breadcrumb-img.avif) no-repeat bottom center;

	padding: 260px 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(20, 59, 135, 0.35) 0%, rgba(22, 51, 0, 0.00) 100%);

}



.page-header-box{

	position: relative;

	z-index: 1;

}



.page-header-box h1{

	font-size: 50px;

	/*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);

}

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

	transform: scale(1);

}



.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;

}

.certificate .project-item .project-link a{

	display: block;

	width: 60px;

	height: 60px;

	border-radius: 18px;

	background: var(--primary-color);

	display: flex;

	align-items: center;

	justify-content: center;

}



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

	top: 0;

}



.project-item:hover .project-content{

	bottom: 20px;

}



.gallery .wow{

  pointer-events:none;

}



.project-image img{

  pointer-events:auto;

}





.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(--primary-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;

}



.founder .team-item .team-content{

	/*position: absolute;*/

	position: unset;

	right: 15px;

	bottom: 15px;

	left: 15px;

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

	/*border-radius: 30px;*/

	border-radius: 0px 0px 30px 30px;

    border: 2px solid;

    border-top: none;

	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%);

}



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

/****   	26. Services page css  	   ****/

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



.page-services{

	padding: 100px 0 20px;

}



.page-services .service-item{

	margin-bottom: 30px;

}



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

/****    27. 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;

}



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

/****   28. 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;

	height: 30%;

}







.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(--white-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(--primary-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);

}



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

/****   29. 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);

}



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

/****   30. 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: 40px;

	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;

	font-weight: 500;

	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;

}



.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);

}



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

/****   	 31. FAQs page css   	   ****/

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



.page-faqs{

	padding: 100px 0 50px;

}



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

/****   32. Project List page css 	   ****/

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



.our-projects{

	padding: 100px 0 50px;

}



.our-projects .project-item{

	margin-bottom: 30px;

}



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

/****   33. 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;

}



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

/****   	 34. Team page css   	   ****/

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



.page-team{

	padding: 100px 0 20px;

}



.page-team .team-item{

	margin-bottom: 30px;

}



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

/****   35. 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);

}



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

/****   36. 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;

}



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

/****   	 37. Responsive css   	   ****/

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



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

    

	header.main-header{

		margin: 0 15px;

	}



	.main-menu ul li a{

		padding: 12px 4px !important;

	}



	.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;

	}



	.why-choose-us-layout2-content{

		padding: 60px;

	}



	.our-process-layout2 .process-item2:after{

		display: none;

	}



	.process-item2 .process-step{

		right: -10px;

	}



	.team-item2 .team-links .team-social-links ul li a,

	.team-item2 .team-links .link-icon,

	.team-item2 .team-links .link-icon a{

		width: 36px;

		height: 36px;

	}

}



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

	.main-menu ul li a{

		padding: 12px 2px !important;

	}



	.overview-counter-box .overview-counter-item .icon-box{

		width: 60px;

		height: 60px;

	}



	.overview-counter-box{

		margin-left: 0;

	}	

	

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

        height:30%;

    }

}



@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;

	}

	

	.hero.hero-slider .hero-slider-layout1 .hero-slide,

	.hero-layout2.hero-slider .hero-slider-layout2 .hero-slide,

	.hero-layout3.hero-slider .hero-slider-layout3 .hero-slide{

		padding: 220px 0 100px;

	}



	.hero.hero-slider .hero-slider-layout1 .hero-button-next,

	.hero.hero-slider .hero-slider-layout1 .hero-button-prev,

	.hero-layout2.hero-slider .hero-slider-layout2 .hero-button-next,

	.hero-layout2.hero-slider .hero-slider-layout2 .hero-button-prev{

		width: 40px;

		height: 40px;

		top: auto;

		bottom: 20px;

		transform: translateY(0);

		border-radius: 12px;

	}

	

	.hero.hero-slider .hero-slider-layout1 .hero-button-next,

	.hero-layout2.hero-slider .hero-slider-layout2 .hero-button-next{

		right: 20px;

	}



	.hero.hero-slider .hero-slider-layout1 .hero-button-prev,

	.hero-layout2.hero-slider .hero-slider-layout2 .hero-button-prev{

		left: 20px;

	}



	.hero-layout2{

		padding: 220px 0 60px;

	}



	.hero-layout2-box .section-title h1{

		font-size: 56px;

	}



	.hero-layout2-box .hero-content p{

		font-size: 16px;

	}



	.hero-layout3{

		padding: 220px 0 60px;

	}



	.hero-layout3 .hero-content .section-title h1{

		font-size: 42px;

	}



	.about-us{

		padding: 60px 0;

	}



	.about-image{

		margin-right: 0;

		margin-bottom: 30px;

	}



	.about-img-1,

	.about-img-2{

		border-radius: 20px;

	}



	.about-layout2{

		padding: 30px 0 60px;

	}



	.about-image-slider{

		margin-right: 0;

	}



	.about-layout2-content{

		margin-left: 0;

		margin-top: 30px;

	}



	.about-layout3{

		padding: 60px 0;

	}



	.section-title-row{

		margin-bottom: 40px;

	}



	.about-layout3 .section-title,

	.section-title-row .section-title{

		margin-bottom: 20px;

	}



	.about-layout3 .section-title h2,

	.section-title-row .section-title h2{

		font-size: 38px;

	}



	.section-title-row .section-title h2 br{

		display: none;

	}



	.about-layout3-features ul li{

		margin-right: 20px;

		margin-bottom: 10px;

	}



	.about-layout3 .about-img-video{

		margin-top: 30px;

		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;

	}



	.services-layout2{

		padding: 60px 0;

	}



	.services-layout3{

		padding: 60px 0;

	}



	.service-slide3 .service-image{

		border-radius: 20px;

	}



	.service-slide3 .service-content{

		border-radius: 14px;

	}



	.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;

	}



	.our-process-layout2{

		padding: 60px 0 30px;

	}



	.process-item2{

		margin-bottom: 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;

	}



	.why-choose-us-layout2-content{

		padding: 60px 15px;

	}



	.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;

	}



	.latest-post-layout2{

		padding: 60px 0 30px;

	}



	.post-item2{

		margin-bottom: 30px;

	}



	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;*/

		font-size: 36px;

	}



	.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;

	}



	.our-projects-layout2{

		padding: 60px 0;

	}



	.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;

	}



	.features-layout2{

		padding: 60px 0 30px;

	}



	.features-item2{

		padding: 30px;

	}



	.features-item2 .features-header .icon-box{

		width: 60px;

		height: 60px;

		border-radius: 20px;

	}



	.features-item2 .features-header .icon-box img{

		max-width: 60%;

		max-height: 60%;

	}



	.features-item2 .features-header h3{

		width: calc(100% - 80px);

		font-size: 22px;

	}



	.pricing-layout2{

		padding: 60px 0 30px;

	}



	.pricing-layout2 .pricing-item2{

		max-width: 480px;

		margin: 18px auto 40px;

	}



	.company-overview{

		padding: 60px 0 30px;

	}



	.overview-counter-box{

		margin-top: 30px;

	}



	.team-layout2{

		padding: 60px 0 30px;

	}



	.team-item2{

		margin-bottom: 30px;

	}



	.testimonial-layout2{

		padding: 60px 0;

	}



	.why-renewable{

		padding: 60px 0;

	}



	.why-renewable-left{

		padding-right: 0;

		margin-bottom: 30px;

	}



	.why-renewable-left .why-renewable-img-1 img,

	.why-renewable-left .why-renewable-img-2 img{

		border-radius: 20px;

	}



	.our-story{

		padding: 60px 0;

	}



	.our-story-content{

		margin-bottom: 40px;

	}



	.our-story-image{

		border-radius: 20px;

	}



	.project-layout3{

		padding: 60px 0;

	}



	.project-slide3{

		border-radius: 20px;

	}



	.project-slide3 .project-image img{

		aspect-ratio: 1/1;

	}



	.why-choose-us-layout3{

		padding: 60px 0 30px;

	}



	.why-choose-item3{

		margin-bottom: 30px;

		border-radius: 20px;

	}



	.why-choose-item3:before{

		border-radius: 20px;

	}



	.our-clients-layout3{

		padding: 60px 0;

	}



	.client-logos-layout3 .client-logo-item{

		padding: 30px;

		border-radius: 20px;

	}



	.our-pricing-layout3{

		padding: 60px 0 30px;

	}



	.pricing-item-layout3{

		margin-bottom: 30px;

		border-radius: 20px;

	}



	.testimonial-layout3{

		padding: 60px 0;

	}



	.testimonial-slide3{

		border-radius: 20px;

	}



	.latest-post-layout3{

		padding: 60px 0 30px;

	}



	.post-item3{

		margin-bottom: 30px;

	}



	.post-item3 .post-featured-image{

		border-radius: 20px;

	}

}



@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;

    }



	.hero.hero-slider .hero-slider-layout1 .hero-slide:before{

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

	}

	

	.hero-left .hero-layout2-box{

        text-align: center;

        max-width: 100%;

    }



    .hero-left .section-title{

    	text-align: center !important;

    }

    

    .hero-left .hero-layout2-box .hero-content p{

    	font-size: 20px;

    }

    .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;

	}



	.hero-layout2-box .section-title h1{

		font-size: 30px;

	}



	.about-us{

		padding: 40px 0;

	}



	.about-image{

		padding-bottom: 40px;

	}



	.about-content ul li{

		width: 100%;

		margin-right: 0;

	}



	.about-layout2{

		padding: 30px 0 40px;

	}



	.about-layout2-content .section-title{

		margin-bottom: 20px;

	}



	.about-layout2-content .about-stats{

		margin-bottom: 10px;

	}



	.about-layout2-content .about-stats-item{

		margin-bottom: 20px;

	}



	.about-layout2-content{

		margin-top: 10px;

	}



	.about-layout2-overlay-content{

		position: relative;

		left: 0;

		right: 0;

		bottom: 0;

		margin-top: 20px;

		border-radius: 0;

	}



	.about-overaly-item{

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

		margin-bottom: 20px;

		border-radius: 20px;

	}



	.our-services{

		padding: 40px 0;

	}



	.services-layout2{

		padding: 40px 0;

	}



	.services-layout2-slide{

		border-radius: 20px;

	}



	.services-layout2-slide .service-content{

		padding: 20px;

	}



	.services-layout2-slide .service-content .icon-box{

		width: 50px;

	}



	.services-layout2-slide .service-content .icon-box a{

		width: 50px;

		height: 50px;

		border-radius: 14px;

	}



	.services-layout2-slide .service-content .icon-box a::before{

		border-radius: 14px;

	}



	.services-layout2-slide .service-content .service-info{

		width: calc(100% - 70px);

	}



	.our-process{

		padding: 40px 0 20px;

	}



	.step-item{

		margin-bottom: 30px;

	}



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

		margin-bottom: 0;

	}



	.our-process-layout2{

		padding: 40px 0 10px;

	}



	.process-item2 .process-step{

		width: 70px;

		height: 70px;

		font-size: 22px;

		top: 0;

		right: 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;

	}



	.why-choose-us-layout2-content{

		padding: 40px 15px;

	}



	.why-choose-us-layout2-features .why-features-item{

		margin-bottom: 30px;

	}



	.why-choose-us-layout2-features .why-features-item .icon-box{

		margin-right: 0;

		margin-bottom: 20px;

		width: 50px;

		height: 50px;

		border-radius: 15px;

	}



	.why-choose-us-layout2-features .why-features-item .why-features-desc{

		width: 100%;

	}



	.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;

	}



	.latest-post-layout2{

		padding: 40px 0 10px;

	}



	.post-item2 .post-body{

		padding: 20px;

	}



	.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;

	}



	.features-layout2{

		padding: 40px 0 20px;

	}



	.our-projects-layout2{

		padding: 40px 0;

	}



	.project-layout2-slide{

		border-radius: 20px;

	}



	.project-layout2-slide .project-content{

		padding: 15px 80px 20px 20px;

	}



	.project-layout2-slide .project-content .btn-link-box a{

		width: 50px;

		height: 50px;

	}



	.pricing-layout2{

		padding: 40px 0 10px;

	}



	.pricing-layout2 .pricing-item2{

		padding: 0 25px 30px;

	}



	.company-overview{

		padding: 40px 0 10px;

	}



	.team-layout2{

		padding: 40px 0 10px;

	}



	.testimonial-layout2{

		padding: 40px 0;

	}



	.testimonial-slider2 .testimonial-item2{

		padding: 30px;

		border-radius: 20px;

	}



	.hero-layout3 .hero-content .section-title h1,

	.about-layout3 .section-title h2,

	.section-title-row .section-title h2{

		font-size: 30px;

	}



	.hero-layout3 .hero-content,

	.hero-layout3 .hero-content .section-title{

		text-align: center;

	}



	.hero-layout3 .hero-image{

		text-align: center;

		margin-top: 30px;

	}



	.hero-layout3 .hero-image-box{

		max-width: 240px;

	}



	.about-layout3{

		padding: 40px 0;

	}



	.about-layout3-features ul li{

		font-size: 18px;

		padding: 0 0 0 36px;

	}



	.about-layout3-features ul li:before{

		width: 26px;

		height: 26px;

	}



	.services-layout3{

		padding: 40px 0;

	}



	.service-slide3 .service-content{

		padding: 20px;

		margin-left: 20px;

		margin-right: 20px;

	}



	.why-renewable{

		padding: 40px 0;

	}



	.why-renewable-left .why-renewable-img-2{

		margin-top: 20px;

	}



	.why-renewable-left .why-renewable-img-1 p,

	.why-renewable-left .why-renewable-img-2 p{

		font-size: 16px;

		border-radius: 6px;

	}



	.why-renewable-item{

		margin-bottom: 30px;

	}



	.why-renewable-item h3{

		font-size: 22px;

	}



	.why-renewable-item .stepno{

		font-size: 20px;

	}



	.our-story{

		padding: 40px 0;

	}



	.our-story-body .btn-default{

		margin-top: 20px;

	}



	.our-story-image{

		margin-right: 0;

	}



	.story-counter-box{

		margin-top: 30px;

	}



	.story-counter-item{

		margin-bottom: 30px;

	}



	.project-layout3{

		padding: 40px 0;

	}



	.project-slide3 .project-content h3{

		font-size: 22px;

	}



	.why-choose-us-layout3{

		padding: 40px 0 10px;

	}



	.our-clients-layout3{

		padding: 40px 0 10px;

	}



	.client-logos-layout3{

		justify-content: center;

	}



	.client-logos-layout3 .client-logo-item{

		width: calc(50% - 15px);

		margin-bottom: 30px;

	}



	.client-logos-layout3 .client-logo-item:nth-of-type(5n + 5){

		margin-right: 30px;

	}



	.client-logos-layout3 .client-logo-item:nth-of-type(2n + 2){

		margin-right: 0;

	}



	.our-pricing-layout3{

		padding: 40px 0 10px;

	}



	.testimonial-layout3{

		padding: 40px 0;

	}



	.testimonial-slide3{

		padding: 30px;

	}



	.latest-post-layout3{

		padding: 40px 0 10px;

	}

	

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

	    height:auto;

	}

}





/*

.hide {

	opacity: 0;

	visibility: hidden;

}



*/



.project-item:hover .hide {

	opacity: 1;

	visibility: visible;

}



.logo-width {

    width:16%;

}



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

    .logo-width {

        width:40%;

    }

}



.icon-50 {

  width: 50px;

  height: 50px;

  object-fit: contain;

}





.custom-modal {

  display: none;

  position: fixed;

  inset: 0;

  background: rgba(0,0,0,0.85);

  justify-content: center;

  align-items: center;

  z-index: 9999;

}



.custom-modal img {

  max-width: 85%;

  max-height: 85%;

  width: auto;

  height: auto;

  object-fit: contain;

}



.custom-modal .close {

  position: absolute;

  top: 20px;

  right: 30px;

  font-size: 35px;

  color: #fff;

  cursor: pointer;

}



.custom-modal .nav {

  position: absolute;

  top: 50%;

  font-size: 40px;

  background: none;

  color: #fff;

  border: none;

  cursor: pointer;

}



.custom-modal .prev { left: 30px; }

.custom-modal .next { right: 30px; }





.our-foundation {

	padding: 100px 0 0;

}

.our-foundation .why-choose-item {

	border: 1px solid #e0e0e0;

	border-radius: 36px;

}

.our-foundation .why-choose-item .why-choose-icon {

	font-size: 36px;

	color: var(--accent-color);

}

.our-foundation .why-choose-item .why-choose-content h3{

    font-size: 18px;

}

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

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

	color: var(--primary-color);

}



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

	.our-foundation {

		padding: 60px 0 0;

	}

}



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

	.our-foundation {

		padding: 40px 0 0;

	}

}





.iframe-v {

	border-radius: 20px;

}





.product-gallery {

    width: 500px;

    margin: 50px auto;

}



.main-image {

    width: 100%;

    height: 400px;

	border-radius:30px;

    border: 1px solid #ddd;

    overflow: hidden;

}



.main-image img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}



.thumbnail-container {

    display: flex;

    justify-content: center;

    gap: 15px;

    margin-top: 20px;

}



.thumb {

    width: 100px;

    height: 100px;

    border: 2px solid #ddd;

	border-radius:10px;

    cursor: pointer;

    object-fit: cover;

    transition: 0.3s;

}



.thumb:hover {

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

}



.thumb.active {

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

}





.product-spec-table {

    width: 100%;

    font-size: 16px;

    text-align: left;

    margin: 16px 0;

    border-collapse: collapse;

}



.product-spec-table tr {

    border-bottom: 1px solid #e5e5e5 !important; /* border-default */

}



.product-spec-table td {

    padding: 12px 24px;

}



.product-spec-table .spec-key {

    color: #555;

}



.product-spec-table .spec-value {

    font-weight: 500;

    color: #222; /* similar to text-heading */

    /*white-space: nowrap;*/

}



.whatsapp-float{

    position: fixed;

    width: 55px;

    height: 55px;

    bottom: 20px;

    right: 20px;

    z-index: 9999;

}





.video-box{

    position: relative;

}



.video-box video{

    width: 100%;

    height: 200px;

    object-fit: cover;

	border-radius: 20px;

}



.play-btn{

    position: absolute;

    top: 50%;

    left: 50%;

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

    background: rgba(255,0,0,0.6);

    width: 60px;

    height: 60px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

}



.play-btn i{

    color: #fff;

    font-size: 22px;

}



/*

.navbar-nav {

    background: white;

    margin-top: 15px;

    padding-bottom:20px;

}

*/





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

    

    .main-menu{

        

    }

    

	.responsive-menu,

    .navbar-toggle{

        display: block;

    }



	.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;

	}

	.navbar-collapse {

        background: #fff;

    }



    .navbar-collapse:not(.show) {

        display: none;

    }

}





:root {

    --primary-color: #1E2073; /* Navy Blue */

    --accent-color: #e30613;  /* Red */

}



/* Card Container */

.product-item {

    background: #fff;

    border-radius: 15px;

    height: 100%;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    transition: all 0.3s ease-in-out;

    border: 1px solid #f0f0f0;

}



.product-item:hover {

    transform: translateY(-10px);

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;

}



/* Image Handling */

.product-image {

    aspect-ratio: 4 / 4; /* Keeps all images uniform */

    overflow: hidden;

    background: #f8f9fa;

}



.product-image img {

    width: 100%;

    height: 100%;

    /*object-fit: contain;  Ensures the machinery isn't cropped awkwardly */

    padding: 15px;

    width: 100%;

    aspect-ratio: 1 / 1;

    object-fit: cover;

    object-position: center center;

    transition: transform 0.5s ease;

}



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

    transform: scale(1.08);

}



/* Content Area */

.product-content {

    padding: 25px;

    flex-grow: 1;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    text-align: center;

}



.product-title {

    font-size: 1.2rem;

    font-weight: 700;

    margin-bottom: 20px;

}



.product-title a {

    color: var(--primary-color);

    text-decoration: none;

    transition: color 0.3s;

}



.product-title a:hover {

    color: var(--accent-color);

}



/* Button Styling */

.btn-find-more {

    display: inline-block;

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

    padding: 10px 25px;

    border-radius: 50px;

    font-weight: 600;

    text-decoration: none;

    font-size: 14px;

    transition: all 0.3s ease;

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

    background-color: transparent;

    color: var(--accent-color);

}



.btn-find-more:hover {

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

    color: #fff;

    box-shadow: 0 4px 10px rgba(227, 6, 19, 0.2);

}







.our-foundation .section-title {

    font-size: 40px;

    font-weight: 700;

}



.our-foundation .sub-title {

    font-size: 26px;

    margin-bottom: 30px;

    font-weight: 600;

}



.our-foundation .divider {

    width: 60px;

    height: 3px;

    background: red;

    margin: 10px auto 0;

}



/* Core Purpose Box */

.our-foundation .core-purpose-box {

    background: linear-gradient(135deg, #f8f9ff, #eef1ff);

    padding: 40px;

    border-radius: 20px;

    transition: 0.3s;

}



.our-foundation .core-purpose-box:hover {

    transform: translateY(-5px);

}



/* Value Cards */

.our-foundation .value-card {

    background: #fff;

    padding: 25px;

    border-radius: 20px;

    border: 1px solid #eee;

    transition: all 0.3s ease;

}



.our-foundation .value-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 15px 40px rgba(0,0,0,0.1);

}



/* Icons */

.our-foundation .why-choose-icon {

    width: 60px;

    height: 60px;

    background: #ffe5e5;

    color: red;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    margin: 0 auto 15px;

    font-size: 22px;

    transition: 0.3s;

}



.our-foundation .value-card:hover .why-choose-icon {

    transform: scale(1.1);

}



.our-foundation .wow {

    visibility: visible !important;

    opacity: 1 !important;

}







/* Category page styling*/



.category-main .category-hero {

    padding: 80px 0;

    

}



.category-main .all-product{

    background: background: linear-gradient(135deg, #f8f9ff, #eef1ff);;

}



.category-main .category-hero h1 {

    font-size: 42px;

    font-weight: 700;

}



.category-main .category-hero p {

    color: #555;

    margin-top: 15px;

}



.category-main .category-img {

    max-height: 400px;

    width:100%;

    object-fit: contain;

}



/* Product Cards */

.category-main .product-card {

    background: #fff;

    border-radius: 20px;

    overflow: hidden;

    transition: 0.3s;

    box-shadow: 0 5px 20px rgba(0,0,0,0.05);

}



.category-main .product-card:hover {

    transform: translateY(-10px);

}



.category-main .product-img {

    height: 220px;

    overflow: hidden;

}



.category-main .product-img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.category-main .product-content {

    padding: 20px;

    text-align: center;

}



.category-main .product-content h5 {

    font-weight: 600;

}



/* Applications Section */

.category-main .project-gallery {

    padding: 60px 0;

    /*background: #f8f9ff;*/

}



.category-main .project-gallery-title h2 {

    font-size: 32px;

    font-weight: 700;

    margin-bottom: 40px;

}



/* Video Card */

.category-main .project-gallery .swiper-slide {

    padding: 10px;

}



.category-main .iframe-v {

    height: 220px;

    border-radius: 15px;

    overflow: hidden;

    box-shadow: 0 5px 20px rgba(0,0,0,0.08);

    transition: 0.3s;

}



.category-main .iframe-v:hover {

    transform: translateY(-8px);

}



/* Swiper Buttons */

.category-main .project-gallery .swiper-button-next,

.category-main .project-gallery .swiper-button-prev {

    color: #fff;

    background: #1E2073;

    width: 40px;

    height: 40px;

    border-radius: 50%;

}



.category-main .project-gallery .swiper-button-next::after,

.category-main .project-gallery .swiper-button-prev::after {

    font-size: 14px;

}



/* Optional spacing fix */

.category-main .project-gallery-items {

    align-items: center;

}



.category-main .video-card {

    background: #fff;

    padding: 10px;

    border-radius: 20px;

    transition: 0.3s;

}



.category-main .video-card:hover {

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

}



section {

    scroll-margin-top: 100px; /* adjust based on your navbar height */

}





.yt-title {

    font-size: clamp(16px, 2vw, 20px);

    font-weight: 600;

}

.iframe-v{
    width:100%;
    height:220px;
    display:block;
    border:0;
}

.swiper-slide{
    overflow:visible !important;
}