/* ----------------------------------------------------------------------------------------
* Author		: Awaiken
* Template Name : Greenx- Ecology & Environment HTML Template
* File			: CSS File
* Version		 : 1.0
* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. Our Scrolling Ticker css
06. About Us css
07. Our Services css
08. Why Choose Us css
09. Our Projects css
10. Our Environment css
11. Our Facts css
12. What We Do css
13. How It Work css
14. Our FAQs css
15. Our Testimonial css
16. Our Blog css
17. Footer css
18. About Us Page css
19. Services Page css
20. Service Single css
21. Blog Archive css
22. Blog Single css
23. Projects Page css
24. Project Single css
25. Team Page css
26. Team Single css
27. Testimonials Page css
28. Image Gallery css
29. Video Gallery css
30. FAQs Page css
31. Contact Us Page css
32. Donation Page css
33. 404 Error Page css
34. Responsive css
-------------------------------------------------------------------------------------- */

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

:root{
	--primary-color				: #03221B;
	--secondary-color			: #FAFAFA;
	--text-color				: #727272;
	--accent-color				: #8EC73D;
	--accent-secondary-color	: #F9900A;
	--white-color				: #FFFFFF;
	--divider-color				: #03221B1A;
	--dark-divider-color		: #FFFFFF25;
	--error-color				: rgb(230, 87, 87);
	--default-font				: "DM Sans", sans-serif;
	--accent-font				: "Rajdhani", sans-serif;
}


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

body{
	position: relative;
	font-family: var(--default-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1em;
	color: var(--text-color);
	background: var(--white-color);
}

::-webkit-scrollbar-track{
	background-color: var(--secondary-color);
	border-left: 1px solid var(--secondary-color);
}
::-webkit-scrollbar{
	width: 7px;
	background-color: var(--secondary-color);
}
::-webkit-scrollbar-thumb{
	background: var(--accent-color);
}

::selection{
	color: var(--primary-color);
	background-color: var(--secondary-color);
	filter: invert(1);
}

p{
	line-height: 1.6em;
	margin-bottom: 1.57em;
}

h1,
h2,
h3,
h4,
h5,
h6{
	margin :0;
	font-family: var(--accent-font);
	font-weight: 600;
	line-height: 1.1em;
	color: var(--primary-color);
}

figure{
	margin: 0;
}

img{
	max-width: 100%;
}

a{
	text-decoration: none;
}

a:hover{
	text-decoration: none;
	outline: 0;
}

a:focus{
	text-decoration: none;
	outline: 0;
}

html,
body{
	width: 100%;
	overflow-x: clip;
	scroll-behavior: smooth;
}

.container{
	max-width: 1300px;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl{
	position: relative;
	padding-right: 15px;
	padding-left: 15px;
	z-index: 1;
}

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

.row.no-gutters{
	margin-right: 0px;
	margin-left: 0px;
}

.row.no-gutters > *{
	padding-right: 0px;
	padding-left: 0px;
}

.btn-default{
	position: relative;
	display: inline-block;
	background: var(--accent-secondary-color);
	border-radius: 10px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1em;
	text-transform: capitalize;
	color: var(--white-color);
	border: none;
	padding: 17px 50px 17px 20px;
	transition: all 0.5s ease-in-out;
	overflow: hidden;
	z-index: 0;
}

.btn-default:hover{
	background: transparent;
	color: var(--white-color);
}

.btn-default::before{
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	width: 20px;
	height: 20px;
	background-image: url('../images/arrow-white.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	transform: translate(-20px, -50%);
	transition: all 0.4s ease-in-out;
}

.btn-default:hover::before{
	transform: translate(-17px, -50%);
}

.btn-default::after{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: -15%;
	right: 0;
	width: 0;
	height: 106%;
	background: var(--primary-color);
	transform: skew(45deg);
	transition: all 0.4s ease-in-out;
	z-index: -1;
}

.btn-default:hover:after{
	width: 100%;
	transform: skew(0deg);
	left: 0;
}

.btn-default.btn-highlighted:hover{
	color: var(--primary-color);
}

.btn-default.btn-highlighted:hover::before{
	filter: brightness(1) invert(1);
}

.btn-default.btn-highlighted::after{
	background: var(--white-color);
}

.readmore-btn{
	position: relative;
	display: inline-block;
	font-size: 16px;
	font-weight: 700;
	line-height: normal;
	text-transform: capitalize;
	color: var(--accent-secondary-color);
	padding-right: 30px;
	transition: all 0.4s ease-in-out;
}

.readmore-btn:hover{
	color: var(--primary-color);
}

.readmore-btn::before{
	content: '';
	position: absolute;
	right: 0;
	top: 1px;
	transform: translateX(-3px);
	background: url('../images/arrow-accent-secondary.svg') no-repeat;
	background-position: center center;
	background-size: cover;
	width: 20px;
	height: 20px;
	transition: all 0.4s ease-in-out;
}

.readmore-btn:hover::before{
	filter: brightness(0) invert(0);
	transform: translateX(0px);
}

.cb-cursor:before{
	background: var(--accent-secondary-color);
}

.preloader{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background: var(--primary-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(--accent-color) transparent var(--accent-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: 66px;
	transform: translate(-50%, -50%);
}

@keyframes rotate-loading{
	0%{
		transform: rotate(0deg);
	}

	100%{
		transform: rotate(360deg);
	}
}

.section-row{
	margin-bottom: 80px;
}

.section-row .section-title{
	margin-bottom: 0;
}

.section-title{
	margin-bottom: 40px;
}

.section-title h3{
	display: inline-block;
	position: relative;
	font-family: var(--default-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5em;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--primary-color);
	background: url('../images/icon-sub-heading.svg') no-repeat;
	background-position: left center;
	background-size: 24px auto;
	padding-left: 34px;
	margin-bottom: 15px;
}

.section-title h1{
	font-size: 75px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 0;
	cursor: none;
}

.section-title h2{
	font-size: 46px;
	font-weight: 700;
	margin-bottom: 0;
	cursor: none;
}

.section-title p{
	margin-top: 20px;
	margin-bottom: 0;
}

.section-title-content p{
	margin: 0;
}

.section-btn{
	text-align: right;
}

.section-content-btn .section-btn{
	text-align: left;
	margin-top: 30px;
}

.dark-section{
	background: var(--primary-color);
}

.dark-section .section-title-content p,
.dark-section .section-title p,
.dark-section .section-title h3,
.dark-section .section-title h2,
.dark-section .section-title h1{
	color: var(--white-color);
}

.help-block.with-errors ul{
	margin: 0;
	text-align: left;
}

.help-block.with-errors ul li{
	color: var(--error-color);
	font-weight: 500;
	font-size: 14px;
}

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

header.main-header{
	position: absolute;
	top: 0;
	width: 100%;
	border-bottom: 1px solid var(--dark-divider-color);
	z-index: 100;
}

header.main-header .header-sticky{
	position: relative;
	top: 0;
	z-index: 100;
}

header.main-header .header-sticky.hide{
	transform: translateY(-100%);
	transition: transform 0.3s ease-in-out;
	border-radius: 0;
}

header.main-header .header-sticky.active{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	border-radius: 0;
	transform: translateY(0);
	background: var(--primary-color);
	border-bottom: 1px solid var(--dark-divider-color);
}

.navbar{
	padding: 30px 0;
	align-items: center;
}

.navbar-brand{
	padding: 0;
	margin: 0;
}

.main-menu .nav-menu-wrapper{
	flex: 1;
	text-align: center;
	margin: 0 20px;
}

.main-menu .nav-menu-wrapper > ul{
	align-items: center;
	display: inline-flex;
}

.main-menu ul li{
	margin: 0;
	position: relative;
}

.main-menu ul li a{
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2em;
	padding: 15px 20px !important;
	color: var(--white-color);
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}

.main-menu ul li.submenu > a:after{
	content: '\f107';
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 14px;
	margin-left: 8px;
}

.main-menu ul li a:hover,
.main-menu ul li a:focus{
	color: var(--accent-secondary-color);
}

.main-menu ul ul{
	visibility: hidden;
	opacity: 0;
	transform: scaleY(0.8);
	transform-origin: top;
	padding: 0;
	margin: 0;
	list-style: none;
	width: 235px;
	border-radius: 20px;
	position: absolute;
	left: 0;
	top: 100%;
	background: var(--accent-color);
	transition: all 0.3s ease-in-out;
	text-align: left;
}

.main-menu ul li.submenu:first-child ul{
	width: 235px;
}

.main-menu ul ul ul{
	left: 100%;
	top: 0;
	text-align: left;
}

.main-menu ul li:hover > ul{
	visibility: visible;
	opacity: 1;
	transform: scaleY(1);
	padding: 5px 0;
}

.main-menu ul li.submenu ul li.submenu > a:after{
	content: '\f105';
	float: right;
}

.main-menu ul ul li{
	margin: 0;
	padding: 0;
}

.main-menu ul ul li a{
	color: var(--white-color);
	padding: 8px 20px !important;
	transition: all 0.3s ease-in-out;
}

.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus{
	color: var(--primary-color);
	background-color: transparent;
	padding: 8px 20px 8px 23px !important;
}

.main-menu ul li.highlighted-menu{
	display: none;
}

.responsive-menu,
.navbar-toggle{
	display: none;
}

.responsive-menu{
	top: 0;
	position: relative;
}

.slicknav_btn{
	background: var(--accent-color);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	border-radius: 8px;
}

.slicknav_icon .slicknav_icon-bar{
	display: block;
	width: 100%;
	height: 3px;
	width: 22px;
	background-color: var(--primary-color);
	border-radius: 6px;
	margin: 4px auto !important;
	transition: all 0.1s ease-in-out;
}

.slicknav_icon .slicknav_icon-bar:first-child{
	margin-top: 0 !important;
}

.slicknav_icon .slicknav_icon-bar:last-child{
	margin-bottom: 0 !important;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(1){
	transform: rotate(-45deg) translate(-5px, 5px);
	background-color: var(--primary-color);
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(2){
	opacity: 0;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(3){
	transform: rotate(45deg) translate(-5px, -5px);
	background-color: var(--primary-color);
}

.slicknav_menu{
	position: absolute;
	width: 100%;
	padding: 0;
	background: var(--accent-color);
}

.slicknav_menu ul{
	margin: 5px 0;
}

.slicknav_menu ul ul{
	margin: 0;
}

.slicknav_nav .slicknav_row,
.slicknav_nav li a{
	position: relative;
	font-size: 16px;
	font-weight: 600;
	text-transform: capitalize;
	padding: 8px 20px;
	color: var(--white-color);
	line-height: normal;
	margin: 0;
	border-radius: 0 !important;
	transition: all 0.3s ease-in-out;
}

.slicknav_nav a:hover,
.slicknav_nav a:focus,
.slicknav_nav .slicknav_row:hover{
	background-color: transparent;
	color: var(--primary-color);
}

.slicknav_menu ul ul li a{
	padding: 8px 20px 8px 30px;
}

.slicknav_arrow{
	font-size: 0 !important;
}

.slicknav_arrow:after{
	content: '\f107';
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 12px;
	margin-left: 8px;
	color: var(--white-color);
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.3s ease-out;
}

.slicknav_open > a .slicknav_arrow:after{
	transform: translateY(-50%) rotate(-180deg);
	color: var(--primary-color);
}

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

.hero{
	position: relative;
	background: url('../images/hero-bg.jpg') no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 260px 0 150px;
}

.hero::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(360deg, rgba(3, 34, 27, 0) 74.01%, rgba(3, 34, 27, 0.9) 100%), linear-gradient(270deg, rgba(3, 34, 27, 0) 25.1%, rgba(3, 34, 27, 0.516) 41.43%, rgba(3, 34, 27, 0.86) 58.93%);
	width: 100%;
	height: 100%;
	z-index: 1;
}

.hero.hero-video .hero-bg-video{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.hero.hero-video .hero-bg-video video{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero.hero-slider-layout{
	background: none;
	padding: 0;
}

.hero.hero-slider-layout .hero-slide{
	position: relative;
	padding: 260px 0 150px;
}

.hero.hero-slider-layout .hero-slide::before{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(360deg, rgba(3, 34, 27, 0) 74.01%, rgba(3, 34, 27, 0.9) 100%), linear-gradient(270deg, rgba(3, 34, 27, 0) 25.1%, rgba(3, 34, 27, 0.516) 41.43%, rgba(3, 34, 27, 0.86) 58.93%);
	width: 100%;
	height: 100%;
	z-index: 1;
}

.hero.hero-slider-layout .hero-slide .hero-slider-image{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
}

.hero.hero-slider-layout .hero-slide .hero-slider-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero.hero-slider-layout .hero-pagination{
	position: absolute;
	bottom: 50px;
	text-align: left;
	padding-left: calc(((100vw - 1300px) / 2) + 15px);
	z-index: 2;
}

.hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet{
	width: 12px;
	height: 12px;
	background: var(--dark-divider-color);
	opacity: 1;
	transition: all 0.3s ease-in-out;
	margin: 0 5px;
}

.hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet-active{
	background-color: var(--accent-color);
}

.hero-body{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 40px;
}

.hero-review-box{
	display: flex;
	align-items: center;
	gap: 20px;
}

.hero-review-images{
	display: flex;
	align-items: center;
}

.hero-review-image{
	display: inline-block;
	margin-left: -12px;
}

.hero-review-image:first-child{
	margin: 0;
}

.hero-review-image figure{
	display: block;
	width: 60px;
	height: 60px;
	border-radius: 50%;
}

.hero-review-image img{
	width: 100%;
	border-radius: 50%;
}

.hero-review-content h3{
	font-size: 20px;
	color: var(--white-color);
	margin-bottom: 5px;
}

.hero-review-content p{
	color: var(--white-color);
	opacity: 80%;
	text-transform: capitalize;
	margin: 0;
}

/************************************/
/*** 05. Our Scrolling Ticker css ***/
/************************************/

.our-scrolling-ticker{
	background: var(--accent-color);
	padding: 20px 0;
}

.scrolling-ticker-box{
	--gap: 20px;
	position: relative;
	display: flex;
	overflow: hidden;
	user-select: none;
	gap: var(--gap);
	align-items: center;
}

.scrolling-content{
	flex-shrink: 0;
	display: flex;
	gap: var(--gap);
	min-width: 100%;
	animation: scroll 60s linear infinite;
}

@keyframes scroll{
	from{
		transform: translateX(0);
	}

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

.scrolling-content span{
	font-family: var(--accent-font);
	display: flex;
	align-items: center;
	font-size: 50px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1em;
	color: var(--white-color);
}

.scrolling-content span img{
	width: 26px;
	margin-right: 20px;
}

/************************************/
/*** 		 06. About Us css 		***/
/************************************/

.about-us{
	background: url('../images/section-bg-1.jpg') no-repeat;
	background-position: bottom -10px right -100px;
	background-size: auto;
	padding: 100px 0;
}

.about-images{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.about-img-1,
.about-img-2{
	width: calc(50% - 15px);
}

.about-img-1 figure,
.about-img-2 figure{
	display: block;
	border-radius: 999px;
}

.about-img-1 img,
.about-img-2 img{
	width: 100%;
	aspect-ratio: 1 / 1.9;
	object-fit: cover;
	border-radius: 999px;
}

.about-img-2{
	margin-top: 70px;
}

.years-experience-box{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 160px;
	height: 160px;
	align-content: center;
	text-align: center;
	background: var(--accent-color);
	border: 10px solid var(--white-color);
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.years-experience-box::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: var(--primary-color);
	border-radius: 50%;
	height: 100%;
	width: 100%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.about-images:hover .years-experience-box::before{
	transform: scale(1);
}

.years-experience-box h2,
.years-experience-box p{
	position: relative;
	z-index: 1;
}

.years-experience-box h2{
	font-size: 46px;
	font-weight: 700;
	color: var(--white-color);
	margin-bottom: 2px;
}

.years-experience-box p{
	line-height: normal;
	color: var(--white-color);
	margin-bottom: 0;
}

.about-us-content{
	margin-left: 20px;
}

.about-us-body{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.about-body-item{
	width: calc(50% - 15px);
	display: flex;
	align-items: center;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	padding: 20px;
}

.about-body-item .icon-box{
	position: relative;
	width: 60px;
	height: 60px;
	background: var(--accent-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10px;
}

.about-body-item .icon-box::before{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	left: 0;
	background: var(--primary-color);
	border-radius: 50%;
	width: 100%;
	height: 100%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
}

.about-body-item:hover .icon-box::before{
	transform: scale(1);
}

.about-body-item .icon-box img{
	position: relative;
	width: 100%;
	max-width: 36px;
	z-index: 1;
}

.about-body-item-title{
	position: relative;
	width: calc(100% - 70px);
	z-index: 1;
}

.about-body-item-title h3{
	font-size: 22px;
	text-transform: capitalize;
	line-height: 1.3em;
}

.about-us-footer{
	margin-top: 40px;
}

.about-us-footer{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 50px;
	margin-top: 40px;
}

.about-author-box{
	display: flex;
	align-items: center;
}

.about-author-box .author-image{
	display: block;
	border-radius: 50%;
}

.about-author-box .author-image figure{
	display: block;
	border-radius: 50%;
}

.about-author-box .author-image img{
	width: 100%;
	max-width: 60px;
	border-radius: 50%;
}

.about-author-box .author-info h3{
	font-size: 22px;
	margin-bottom: 5px;
}

.about-author-box .author-info p{
	margin-bottom: 0;
}

/************************************/
/*** 		07. Our Services css		***/
/************************************/

.our-services{
	background: var(--secondary-color) url('../images/section-bg-2.png') no-repeat;
	background-position: bottom -40px left -60px;
	background-size: auto;
	padding: 100px 0;
}

.service-item{
	position: relative;
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	padding: 30px;
	overflow: hidden;
}	

.service-item::before{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--accent-color);
	border-radius: 500px 500px 0 0;
	height: 0;
	width: 100%;
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.service-item.active::before,
.service-item:hover::before{
	height: 100%;
	border-radius: 0;
}

.service-item .icon-box{
	position: relative;
	height: 70px;
	width: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--accent-color);
	border-radius: 50%;
	margin-bottom: 60px;
	transition: all 0.5s ease-in-out;
	z-index: 1;
}

.service-item.active .icon-box,
.service-item:hover .icon-box{
	background-color: var(--secondary-color);
}

.service-item .icon-box img{
	width: 100%;
	max-width: 40px;
	transition: all 0.5s ease-in-out;
}

.service-item.active .icon-box img,
.service-item:hover .icon-box img{
	filter: brightness(0) invert(0);
}

.service-item-content{
	position: relative;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 30px;
	padding-bottom: 30px;
	transition: all 0.3s ease-in-out;
	z-index: 1;
}

.service-item.active .service-item-content,
.service-item:hover .service-item-content{
	border-bottom-color: var(--dark-divider-color);
}

.service-item-content h3{
	font-size: 22px;
	margin-bottom: 10px;
	transition: all 0.3s ease-in-out;
}

.service-item-content h3 a{
	color: inherit;
}

.service-item-content p{
	margin-bottom: 0;
	transition: all 0.3s ease-in-out;
}

.service-readmore-btn{
	position: relative;
	z-index: 1;
}

.service-item.active .service-item-content h3,
.service-item:hover .service-item-content h3,
.service-item.active .service-item-content p,
.service-item:hover .service-item-content p,
.service-item.active .service-readmore-btn .readmore-btn,
.service-item:hover .service-readmore-btn .readmore-btn{
	color: var(--white-color);
}

.service-item.active .readmore-btn::before,
.service-item:hover .readmore-btn::before{
	filter: brightness(0) invert(1);
}

.service-pagination{
	text-align: center;
	margin-top: 50px;
}

.service-pagination .swiper-pagination-bullet{
	height: 8px;
	width: 8px;
	background: var(--divider-color);
	opacity: 1;
	margin: 0 2px;
	border-radius: 100px;
	transition: all 0.3s ease-in-out;
}

.service-pagination .swiper-pagination-bullet-active{
	width: 24px;
	background-color: var(--accent-secondary-color);
}

/************************************/
/*** 	 08. Why Choose Us css		***/
/************************************/

/*.why-choose-us{
	padding: 100px 0;
}*/
.why-choose-us{
	background: url('../images/section-bg-2.jpg') no-repeat;
	background-position: bottom 0px right 300px;
	background-size: auto;
	padding: 50px 0;
}

.why-choose-list{
	background: var(--secondary-color);
	border-radius: 20px;
	padding: 30px;
}

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

.why-choose-list ul li{
	background-image: url('../images/arrow-accent-secondary.svg');
	background-repeat: no-repeat;
	background-position: left top 1px;
	background-size: 20px auto;
	line-height: 1.5em;
	padding-left: 30px;
	margin-bottom: 25px;
}

.why-choose-list ul li:last-child{
	margin-bottom: 0;
}

.why-choose-btn{
	margin-top: 40px;
}

.why-choose-images{
	display: flex;
	flex-wrap: wrap;
	align-items: start;
	gap: 30px;
	margin-left: 15px;
}

.why-choose-image-box-1{
	width: calc(48% - 15px);
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.why-choose-image-box-2{
	width: calc(52% - 15px);
	margin-top: 100px;
}

.why-choose-image{
	width: 100%;
}

.why-choose-image figure{
	display: block;
	border-radius: 20px;
}

.why-choose-image img{
	width: 100%;
	object-fit: cover;
	border-radius: 20px;
}

.why-choose-image.why-img-1{
	aspect-ratio: 1 / 1.065;
}

.why-choose-image.why-img-2 img{
	aspect-ratio: 1 / 0.78;
}

.why-choose-image.why-img-3 img{
	aspect-ratio: 1 / 1.692;
}

/************************************/
/*** 	 09. Our Projects css		***/
/************************************/

.our-projects{
	padding: 100px 0;
}

.project-item{
	position: relative;
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.project-image{
	border-radius: 20px;
	overflow: hidden;
}

.project-image a,
.project-image figure{
	display: block;
	cursor: none;
}

.project-image figure::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: linear-gradient(180deg, rgba(3, 34, 27, 0) 45.62%, rgba(3, 34, 27, 0.8) 76.07%);
	width: 100%;
	height: 100%;
	transition: all 0.3s ease-in-out;
	z-index: 1;
}

.project-image img{
	width: 100%;
	aspect-ratio: 1 / 1.24;
	object-fit: cover;
	transition: all 0.4s ease-in-out;
}

.project-item:hover .project-image img{
	transform: scale(1.1);
}

.project-body{
	position: absolute;
	left: 30px;
	bottom: 30px;
	right: 30px;
	transform: translateY(20px);
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.project-item:hover .project-body{
	transform: translateY(0);
}

.project-content h3{
	font-size: 22px;
	color: var(--white-color);
	margin-bottom: 15px;
}

.project-content h3 a{
	color: inherit;
}

.project-body p{
	color: var(--white-color);
	opacity: 80%;
	margin-bottom: 0;
}

.project-readmore-btn{
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease-in-out;
}

.project-item:hover .project-readmore-btn{
	margin-top: 20px;
	opacity: 1;
	visibility: visible;
}

.project-readmore-btn .readmore-btn:hover{
	color: var(--white-color);
}

.project-readmore-btn .readmore-btn:hover::before{
	filter: brightness(0) invert(1);
}

.section-footer-text{
	margin-top: 30px;
	text-align: center;
}

.section-footer-text p{
	margin-bottom: 0;
}

.dark-section .section-footer-text p{
	color: var(--white-color);
}

.section-footer-text span{
	font-family: var(--accent-font);
	font-weight: 600;
	font-size: larger;
	background: var(--accent-secondary-color);
	padding: 3px 10px;
	border-radius: 100px;
	margin-right: 10px;
}

.section-footer-text p a{
	font-weight: 700;
	text-transform: capitalize;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--accent-secondary-color);
	transition: all 0.3s ease-in-out;
}

.section-footer-text p a:hover{
	color: var(--accent-color);
}

/************************************/
/*** 	10. Our Environment css		***/
/************************************/

.our-environment{
	padding: 100px 0;
}

.our-environment-images{
	display: flex;
	align-items: center;
	margin-right: 10px;
}

.environment-img-1,
.environment-img-2{
	width: 100%;
	border-radius: 20px;
}

.environment-img-1 figure,
.environment-img-2 figure{
	display: block;
	border-radius: 20px;
}

.environment-img-1 figure img,
.environment-img-2 figure img{
	width: 100%;
	object-fit: cover;
	border-radius: 20px;
}

.environment-img-1 figure img{
	aspect-ratio: 1 / 1.399;
}

.environment-img-2{
	width: 100%;
	max-width: 310px;
	margin-left: -111px;
}

.environment-img-2 figure{
	border: 4px solid var(--white-color);
	border-radius: 24px;
}

.environment-img-2 figure img{
	aspect-ratio: 1 / 1.2;
}

.experience-circle{
	position: relative;
	display: inline-block;
	border: 4px solid var(--white-color);
	border-radius: 50%;
	margin-left: 40px;
	margin-top: -80px;
	z-index: 1;
}

.experience-circle img{
	width: 100%;
	max-width: 180px;
	border-radius: 50%;
	animation: infiniterotate 20s infinite linear;
}

@keyframes infiniterotate{
	from{
		transform: rotate(0deg);
		}
	to{
		transform: rotate(360deg);
	}
}

.environment-body-item{
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.environment-body-item:last-child{
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.environment-body-item .icon-box{
	position: relative;
	height: 50px;
	width: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--accent-color);
	border-radius: 50%;
	margin-right: 20px;
}

.environment-body-item .icon-box:before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: var(--primary-color);
	border-radius: 50%;
	height: 100%;
	width: 100%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.environment-body-item:hover .icon-box::before{
	transform: scale(1);
}

.environment-body-item .icon-box img{
	position: relative;
	width: 100%;
	max-width: 30px;
	z-index: 1;
}

.environment-body-item-content{
	width: calc(100% - 70px);
}

.environment-body-item-content h3{
	font-size: 22px;
	text-transform: capitalize;
	margin-bottom: 10px;
}

.environment-body-item-content p{
	margin-bottom: 0;
}

/************************************/
/*** 		 11. Our Facts css		***/
/************************************/

.our-facts{
	position: relative;
	background: url('../images/fact-bg.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	margin-top: 30px;
}

.our-facts::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(270deg, rgba(3, 34, 27, 0) -31.52%, rgba(3, 34, 27, 0.96) 45.81%);
	width: 100%;
	height: 100%;
	z-index: 0;
}

.our-facts .container{
	position: relative;
	z-index: 1;
}

.our-fact-content{
	height: calc(100% - 100px);
	align-content: center;
	margin: 50px 0;
}

.fact-list ul{
	display: flex;
	flex-wrap: wrap;
	gap: 20px 30px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fact-list ul li{
	width: calc(50% - 15px);
	line-height: 1.5em;
	color: var(--white-color);
	background-image: url('../images/arrow-accent-secondary.svg');
	background-repeat: no-repeat;
	background-position: left top 1px;
	background-size: 20px auto;
	padding-left: 30px;
}

.fact-counter-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px 60px;
	border-top: 1px solid var(--dark-divider-color);
	margin-top: 50px;
	padding-top: 50px;
}

.fact-counter-item{
	position: relative;
	width: calc(33.33% - 40px);
}

.fact-counter-item:after{
	content: '';
	position: absolute;
	top: 0;
	right: -30px;
	bottom: 0;
	background: var(--dark-divider-color);
	width: 1px;
	height: 100%;
}

.fact-counter-item:last-child:after,
.fact-counter-item:nth-child(3n + 3)::after{
	display: none;
}

.fact-counter-item img{
	width: 100%;
	max-width: 50px;
	margin-bottom: 20px;
}

.fact-counter-item h2{
	font-size: 46px;
	color: var(--white-color);
	margin-bottom: 10px;
}

.fact-counter-item p{
	color: var(--white-color);
	opacity: 80%;
	margin-bottom: 0;
}

.our-fact-image{
	padding-left: 15px;
	margin-top: -30px;
	text-align: center;
}

.our-fact-image figure{
	display: block;
}

.our-fact-image img{
	width: 100%;
	aspect-ratio: 1 / 1.49;
	object-fit: cover;
}

/************************************/
/*** 		12. What We Do css		***/
/************************************/

.what-we-do{
	padding: 100px 0;
}

.What-we-do-content{
	position: sticky;
	top: 20px;
	margin-right: 20px;
}

.what-we-do-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.what-we-do-list ul li{
	background-image: url('../images/arrow-accent-secondary.svg');
	background-repeat: no-repeat;
	background-position: left top 1px;
	background-size: 20px auto;
	line-height: 1.5em;
	padding-left: 30px;
	margin-bottom: 20px;
}

.what-we-do-list ul li:last-child{
	margin-bottom: 0;
}

.what-we-do-btn{
	margin-top: 40px;
}

.what-do-item-list{
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
}

.what-we-do-item{
	position: relative;
	width: calc(50% - 15px);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	padding: 30px;
	overflow: hidden;
}

.what-we-do-item::before{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--accent-color);
	border-radius: 500px 500px 0 0;
	height: 0;
	width: 100%;
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.what-we-do-item.active::before,
.what-we-do-item:hover::before{
	height: 100%;
	border-radius: 0;
}

.what-we-do-item .icon-box{
	position: relative;
	margin-bottom: 40px;
	z-index: 1;
}

.what-we-do-item .icon-box img{
	width: 100%;
	max-width: 60px;
	transition: all 0.4s ease-in-out;
}

.what-we-do-item.active .icon-box img,
.what-we-do-item:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.what-do-item-content h3,
.what-do-item-content p{
	position: relative;
	z-index: 1;
}

.what-do-item-content h3{
	font-size: 22px;
	margin-bottom: 15px;
	transition: all 0.4s ease-in-out;
}

.what-do-item-content p{
	margin-bottom: 0;
	transition: all 0.4s ease-in-out;
}

.what-we-do-item.active .what-do-item-content h3,
.what-we-do-item:hover .what-do-item-content h3,
.what-we-do-item.active .what-do-item-content p,
.what-we-do-item:hover .what-do-item-content p{
	color: var(--white-color);
}

.what-we-do-box .section-footer-text{
	margin-top: 40px;
}

/************************************/
/*** 	 13. How It Work css		***/
/************************************/

.how-it-work{
	background: url('../images/section-bg-3.png'), var(--secondary-color);
	background-repeat: no-repeat;
	background-position: bottom left;
	background-size: 100% auto;
	padding: 100px 0 0;
	margin-bottom: 220px;
}

.work-step-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.work-step-item{
	width: calc(25% - 22.5px);
	text-align: center;
}

.work-step-image{
	margin-bottom: 20px;
}

.work-step-image figure{
	display: block;
	border-radius: 20px;
}

.work-step-image img{
	width: 100%;
	aspect-ratio: 1 / 0.746;
	object-fit: cover;
	border-radius: 20px;
	transition: all 0.4s ease-in-out;
}

.work-step-item:hover .work-step-image img{
	transform: scale(1.1);
}

.work-step-content{
	position: relative;
	padding-top: 30px;
}

.work-step-content h2{
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	font-size: 90px;
	font-weight: 700;
	line-height: 0.9em;
	color: var(--secondary-color);
	background: var(--divider-color);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-stroke: 2px transparent;
	transition: all 0.4s ease-in-out;
}

.work-step-item:hover .work-step-content h2{
	color: transparent;
}

.work-step-content h3,
.work-step-content p{
	position: relative;
	z-index: 1;
}

.work-step-content h3{
	font-size: 22px;
	margin-bottom: 15px;
}

.work-step-content p{
	margin-bottom: 0;
}

.donate-box{
	display: flex;
	gap: 30px 60px;
	flex-wrap: wrap;
	border-radius: 20px;
	padding: 80px;
	margin-top: 80px;
	margin-bottom: -220px;
}

.donate-box .section-title{
	width: calc(40% - 30px);
	margin-bottom: 0;
}

.donate-form{
	width: calc(60% - 30px);
}

.donate-form .form-control{
	font-size: 16px;
	line-height: 1.5em;
	font-weight: 700;
	background-color: transparent;
	color: var(--white-color);
	border: 1px solid var(--dark-divider-color);
	border-radius: 10px;
	box-shadow: none;
	outline: none;
	padding: 17px 20px;
}

.donate-form .form-control::placeholder{
	color: var(--white-color);
}

.donate-value-box{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 30px;
}

.donate-form .donate-value{
	width: calc(33.33% - 6.66px);
}

.donate-value-box .donate-value input{
	position: absolute;
	left: -9999px;
}

.donate-value-box .donate-value label{
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	line-height: 1.5em;
	background-color: transparent;
	border: 1px solid var(--dark-divider-color);
	color: var(--white-color);
	border-radius: 10px;
	padding: 17px;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
	overflow: hidden;
}

.donate-value-box .donate-value input[type="radio"]:hover+label,
.donate-value-box .donate-value input[type="radio"]:focus+label,
.donate-value-box .donate-value input[type="radio"]:checked+label{
	background: var(--accent-secondary-color);
	border-color: var(--accent-secondary-color);
	color: var(--white-color);
}

.donate-form .form-group-btn .btn-default.btn-highlighted{
	width: 100%;
	display: block;
	text-align: center;
	padding: 18px;
}

.donate-form .form-group-btn .btn-default.btn-highlighted::before{
	display: none;
}

/************************************/
/*** 		 14. Our FAQs css 		***/
/************************************/

.our-faqs{
	padding: 100px 0;
}

.faq-image{
	position: relative;
	overflow: hidden;
	border-radius: 20px;
}

.faq-image figure{
	display: block;
}

.faq-image figure::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(180deg, rgba(3, 34, 27, 0) 52.02%, rgba(3, 34, 27, 0.8) 100%);
	width: 100%;
	height: 100%;
	z-index: 1;
}

.faq-image img{
	width: 100%;
	aspect-ratio: 1 / 0.807;
	object-fit: cover;
}

.client-review-content{
	position: absolute;
	text-align: center;
	bottom: 25px;
	right: 25px;
	left: 25px;
	z-index: 1;
}

.client-review-content p{
	font-size: 20px;
	color: var(--white-color);
	font-weight: 600;
	margin-bottom: 10px;
}

.client-review-content ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.client-review-content ul li{
	display: inline-block;
}

.client-review-content ul li i{
	color: var(--accent-secondary-color);
}

.faq-accordion .accordion-item{
	position: relative;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	margin-bottom: 30px;
	padding: 0;
	transition: all 0.3s ease-in-out;
	overflow: hidden;
}

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

.faq-accordion .accordion-header .accordion-button{
	font-size: 22px;
	font-weight: 600;
	line-height: 1.1em;
	background: transparent;
	padding: 18px 50px 18px 20px;
	color: var(--primary-color);
	transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-header .accordion-button.collapsed{
	color: var(--primary-color);
	background: transparent;
}

.faq-accordion .accordion-item .accordion-button::after,
.faq-accordion .accordion-item .accordion-button.collapsed::after{
	content: '\f054';
	font-family: "FontAwesome";
	position: absolute;
	right: 20px;
	top: 50%;
	bottom: auto;
	transform: translateY(-50%) rotate(90deg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
	width: 20px;
	height: 20px;
	color: var(--white-color);
	background-color: var(--accent-secondary-color);
	border-radius: 5px;
	transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-item .accordion-button.collapsed::after{
	transform: translateY(-50%) rotate(0);
}

.faq-accordion .accordion-item .accordion-body{
	background: transparent;
	border-top: 1px solid var(--divider-color);
	padding: 18px 50px 18px 20px;
}

.faq-accordion .accordion-item .accordion-body p{	
	margin: 0;
}

/************************************/
/*** 	15. Our Testimonial css		***/
/************************************/

.section-video{
	background-image: url('../images/testimonials-bg.png');
	background-repeat: no-repeat;
	background-size: cover;
	padding-top: 30px;
	padding-bottom: 30px;
}

.review-box{
	display: flex;
	align-items: center;
	justify-content: end;
}

.review-image{
	border-right: 1px solid var(--dark-divider-color);
	margin-right: 25px;
	padding-right: 25px;
}

.review-image img{
	width: 100%;
	max-width: 150px;
}

.review-content ul{
	list-style: none;
	margin-bottom: 10px;
	padding: 0;
}

.review-content ul li{
	display: inline-block;
}

.review-content ul li i{
	color: var(--accent-secondary-color);
}

.review-content p{
	color: var(--white-color);
	margin-bottom: 0;
}

.testimonial-image figure{
	display: block;
	border-radius: 20px;
}

.testimonial-image img{
	width: 100%;
	aspect-ratio: 1 / 0.79;
	object-fit: cover;
	border-radius: 20px;
}

.testimonial-slider{
	position: relative;
	margin-left: 20px;
}

.testimonial-slider .swiper-wrapper{
	cursor: none;
}

.testimonial-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 40px;
}

.testimonial-company-logo img{
	width: 100%;
	max-width: 175px;
}

.testimonial-quote img{
	width: 100%;
	max-width: 40px;
}

.testimonial-content{
	border-bottom: 1px solid var(--dark-divider-color);
	margin-bottom: 40px;
	padding-bottom: 40px;
}

.testimonial-content p{
	font-size: 18px;
	font-weight: 500;
	color: var(--white-color);	
	margin: 0;
}

.testimonial-author{
	display: flex;
	align-items: center;
}

.author-image{
	margin-right: 15px;
}

.author-image figure{
	display: block;
	border-radius: 50%;
}

.author-image img{
	width: 100%;
	max-width: 60px;
	border-radius: 50%;
}

.author-content h3{
	font-size: 22px;
	text-transform: capitalize;
	color: var(--white-color);
	margin-bottom: 5px;
}

.author-content p{
	color: var(--white-color);
	margin-bottom: 0;
}

.testimonial-pagination{
	position: absolute;
	right: 0;
	display: flex;
	bottom: 0;
	align-items: center;
	justify-content: right;
	z-index: 2;
}

.testimonial-pagination .swiper-pagination-bullet{
	height: 8px;
	width: 8px;
	background: var(--dark-divider-color);
	border-radius: 100px;
	opacity: 1;
	margin: 0 3px;
	transition: all 0.4s ease-in-out;
}

.testimonial-pagination .swiper-pagination-bullet-active{
	background: var(--white-color);
	width: 26px;
	border-radius: 100px;
}

.testimonial-company-slider{
	border-top: 1px solid var(--dark-divider-color);
	margin-top: 80px;
	padding-top: 80px;
}

.testimonial-company-slider .company-logo{
	text-align: center;
}

.testimonial-company-slider .company-logo img{
	width: 100%;
	max-width: 175px;
	max-height: 40px;
}

/************************************/
/*** 		16. Our Blog css			***/
/************************************/

.our-blog{
	padding: 100px 0;
}

.post-item{
	display: flex;
	flex-wrap: wrap;
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	margin-bottom: 30px;
	overflow: hidden;
}

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

.post-featured-image{
	width: 47%;
}

.post-item-body{
	width: 53%;
	align-content: center;
	padding: 30px;
}

.post-featured-image a{
	height: 100%;
	display: block;
	overflow: hidden;
	cursor: none;
}

.post-featured-image figure{
	height: 100%;
}

.post-featured-image img{
	height: 100%;
	width: 100%;
	aspect-ratio: 1 / 0.861;
	object-fit: cover;
	transition: all 0.4s ease-in-out;
}

.post-item:hover .post-featured-image img{
	transform: scale(1.1);
}

.post-item-content{
	margin-bottom: 20px;
}

.post-item-content h2{
	color: var(--primary-color);
	font-size: 22px;
	line-height: 1.3em;
	margin-bottom: 15px;
}

.post-item-content h2 a{
	color: inherit;
}

.post-item-content p:last-child{
	margin: 0;
}

.post-item.highlighted-post-item .post-featured-image,
.post-item.highlighted-post-item .post-item-body{
	width: 100%;
}

.post-item.highlighted-post-item .post-featured-image img{
	aspect-ratio: 1 / 0.557;
}

/************************************/
/*** 	 	17. Footer css			***/
/************************************/

.main-footer{
	position: relative;
	background: url('../images/footer-bg.jpg') no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 100px 0px 0px;
}

.main-footer:after{
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: var(--primary-color);
	opacity: 97%;
}

.main-footer-box{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding-bottom: 60px;
}

.footer-logo{
	width: 20%;
}

.footer-logo img{
	width: 100%;
	max-width: 177px;
}

.footer-contact-details{
	width: 80%;
	display: flex;
	flex-wrap: wrap;
	justify-content: end;
	gap: 20px 40px;
}

.footer-contact-item{
	display: flex;
	align-items: center;
}

.footer-contact-item .icon-box{
	position: relative;
	width: 60px;
	height: 60px;
	background-color: var(--accent-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20px;
}

.footer-contact-item .icon-box:before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: var(--accent-secondary-color);
	border-radius: 50%;
	height: 100%;
	width: 100%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.footer-contact-item:hover .icon-box::before{
	transform: scale(1);
}

.footer-contact-item .icon-box img{
	position: relative;
	width: 100%;
	max-width: 30px;
	z-index: 1;
}

.footer-contact-item-content{
	width: calc(100% - 80px);
}

.footer-contact-item-content h3{
	color: var(--white-color);
	font-size: 22px;
	text-transform: capitalize;
	margin-bottom: 3px;
}

.footer-contact-item-content p{
	color: var(--white-color);
	margin: 0;
}

.footer-contact-item-content p a{
	color: inherit;
	transition: all 0.3s ease-in-out;
}

.footer-contact-item-content p a:hover{
	color: var(--accent-secondary-color);
}

.about-footer{
	padding-right: 60px;
}

.footer-links p{
	color: var(--white-color);
	margin: 0;
}

.footer-social-links{
	margin-top: 40px;
}

.footer-social-links ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-social-links ul li{
	display: inline-block;
	border-radius: 50%;
	margin-right: 10px;
}

.footer-social-links ul li:last-child{
	margin-right: 0;
}

.footer-social-links ul li a{
	background: var(--accent-color);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease-in-out;
}

.footer-social-links ul li:hover a{
	background: var(--white-color);
}

.footer-social-links ul li a i{
	color: var(--primary-color);
	font-size: 18px;
}

.footer-links h3{
	color: var(--white-color);
	font-size: 22px;
	text-transform: capitalize;
	margin-bottom: 30px;
}

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

.footer-links ul li{
	color: var(--white-color);
	line-height: normal;
	text-transform: capitalize;
	margin-bottom: 15px;
	transition: all 0.3s ease-in-out;
}

.footer-links ul li:last-child{
	margin-bottom: 0;
}

.footer-links ul li:hover{
	color: var(--accent-color);
}

.footer-links ul li a{
	color: inherit;
	display: inline-block;
}

.newsletter-form{
	padding-left: 50px;
}

.newsletter-form p{
	margin-bottom: 30px;
}

.newsletter-form .form-group{
	display: flex;
}

.newsletter-form .form-group .form-control{
	width: 68%;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4em;
	color: var(--white-color);
	background-color: transparent;
	border: 1px solid var(--dark-divider-color);
	border-right: none;
	border-radius: 10px 0 0 10px;
	outline: none;
	box-shadow: none;
	padding: 12px 20px;
}

.newsletter-form .form-group .form-control::placeholder{
	color: var(--text-color);
}

.newsletter-form .form-group .btn-default.btn-highlighted{
	width: 32%;
	background-color: var(--accent-color);
	color: var(--primary-color);
	border-radius: 0 10px 10px 0;
	padding: 17px 12px;
	line-height: 1em;
}

.newsletter-form .form-group .btn-default::before{
	display: none;
}

.footer-copyright{
	position: relative;
	border-top: 1px solid var(--dark-divider-color);
	padding: 10px 0;
	margin-top: 0px;
	z-index: 1;
}

.footer-copyright-text p{
	color: var(--white-color);
	margin-bottom: 0;
}

.footer-privacy-policy{
	text-align: right;
}

.footer-privacy-policy ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-privacy-policy ul li{
	position: relative;
	display: inline-block;
	color: var(--white-color);
	text-transform: capitalize;
	line-height: 1.6em;
	margin-right: 30px;
	transition: all 0.3s ease-in-out;
}

.footer-privacy-policy ul li:hover{
	color: var(--accent-color);
}

.footer-privacy-policy ul li:last-child{
	margin-right: 0;
}

.footer-privacy-policy ul li:before{
	content: '/';
	position: absolute;
	top: 0;
	bottom: 0;
	right: -18px;
	color: var(--white-color);
}

.footer-privacy-policy ul li:last-child::before{
	display: none;
}

.footer-privacy-policy ul li a{
	color: inherit;
}

/************************************/
/*** 	 18. About Us Page css		***/
/************************************/

.page-header{
	position: relative;
	background: url('../images/page-header-bg.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 230px 0 120px;
}

.page-header::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(360deg, rgba(3, 34, 27, 0) 74.01%, rgba(3, 34, 27, 0.9) 100%), linear-gradient(270deg, rgba(3, 34, 27, 0) 25.1%, rgba(3, 34, 27, 0.516) 41.43%, rgba(3, 34, 27, 0.86) 58.93%);
	width: 100%;
	height: 100%;
}

.page-header-box{
	position: relative;
	text-align: center;
	z-index: 1;
}

.page-header-box h1{
	display: inline-block;
	font-size: 75px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--white-color);
	margin-bottom: 10px;
	cursor: none;
}

.page-header-box ol{
	margin: 0;
	padding: 0;
	justify-content: center;
}

.page-header-box ol li.breadcrumb-item{
	font-size: 16px;
	text-transform: capitalize;
	color: var(--white-color);
}

.page-header-box ol li.breadcrumb-item a{
	color: inherit;
}

.page-header-box ol .breadcrumb-item+.breadcrumb-item::before{
	color: var(--white-color);
}

.our-scrolling-ticker.subpages-scrolling-ticker{
	padding: 15px 0;
}

.our-scrolling-ticker.subpages-scrolling-ticker .scrolling-ticker-box{
	--gap: 15px;
}

.our-scrolling-ticker.subpages-scrolling-ticker .scrolling-content span{
	font-size: 40px;
}

.our-scrolling-ticker.subpages-scrolling-ticker .scrolling-content span img{
	width: 20px;
	margin-right: 15px;
}

.our-approach{
	background: var(--secondary-color) url('../images/section-bg-2.png') no-repeat;
	background-position: bottom	left;
	background-size: 290px auto;
	padding: 100px 0;
}

.our-approach-content{
	position: sticky;
	top: 20px;
	margin-right: 20px;
}

.our-approach-nav{
	margin-bottom: 40px;
}

.our-approach-nav .nav-tabs{
	padding: 0;
	margin: 0;
	list-style: none;
	background: var(--white-color);
	border-radius: 20px;
	display: flex;
	justify-content: center;
	border: none;
	overflow: hidden;
}

.our-approach-nav ul li{
	width: 33.33%;
}

.our-approach-nav ul li .nav-link{
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 20px;
	font-family: var(--accent-font);
	font-size: 22px;
	font-weight: 600;
	line-height: 1em;
	text-transform: capitalize;
	color: var(--primary-color);
	background: transparent;
	border-radius: 0;
	border: none;
	border-right: 1px solid var(--divider-color);
	padding: 30px;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.our-approach-nav ul li .nav-link.active,
.our-approach-nav ul li .nav-link:focus,
.our-approach-nav ul li .nav-link:hover{
	background: transparent;
	color: var(--white-color);
}

.our-approach-nav ul li:last-child .nav-link{
	border-right: none;
}

.our-approach-nav ul li .nav-link:before{
	content: "";
	position: absolute;
	top: 100%;
	bottom: 0;
		left: 0;
		right: 0;
	background: var(--accent-secondary-color);
	transition: all 0.4s ease-in-out;
	z-index: -1;
}

.our-approach-nav ul li .nav-link.active::before,
.our-approach-nav ul li .nav-link:focus::before,
.our-approach-nav ul li .nav-link:hover::before{
		top: 0;
}

.our-approach-nav ul li .nav-link span{
	background: var(--accent-secondary-color);
	border-radius: 50%;
	width: 60px;
	height: 60px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease-in-out;
}

.our-approach-nav ul li .nav-link.active span,
.our-approach-nav ul li .nav-link:focus span,
.our-approach-nav ul li .nav-link:hover span{
		background: var(--white-color);
}

.our-approach-nav ul li .nav-link span img{
	max-width: 36px;
	transition: all 0.4s ease-in-out;
}

.our-approach-nav ul li .nav-link.active span img,
.our-approach-nav ul li .nav-link:focus span img,
.our-approach-nav ul li .nav-link:hover span img{
		filter: brightness(0) invert(0);
}

.approach-tab-list-image{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 30px;
}

.approach-tab-image,
.approach-tab-list{
	width: calc(50% - 15px);
}

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

.approach-tab-list ul li{
	position: relative;
	line-height: 1.5em;
	text-transform: capitalize;
	background: url('../images/arrow-accent-secondary.svg') no-repeat;
	background-position: left center;
	background-size: 20px auto;
	padding-left: 30px;
	margin-bottom: 15px;
}

.approach-tab-list ul li:last-child{
	margin-bottom: 0;
}

.approach-tab-image figure{
	display: block;
	border-radius: 20px;
}

.approach-tab-image img{
	width: 100%;
	aspect-ratio: 1 / 0.556;
	object-fit: cover;
	border-radius: 20px;
}

.our-solutions{
	padding: 100px 0;
}

.our-solution-content{
	margin-right: 15px;
}

.our-solution-list ul{
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 20px 30px;
}

.our-solution-list ul li{
	position: relative;
	background: url('../images/arrow-accent-secondary.svg') no-repeat;
	background-position: left center;
	background-size: 20px auto;
	width: calc(50% - 15px);
	line-height: 1.5em;
	text-transform: capitalize;
	padding-left: 30px;
}

.our-solution-images{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.solution-image-box{
	width: calc(50% - 15px);
}

.solution-support-box{
	position: relative;
	background: var(--accent-color);
	border-radius: 20px;
	padding: 20px;
	margin-bottom: 30px;
	overflow: hidden;
}

.solution-support-box::before{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--primary-color);
	border-radius: 500px 500px 0 0;
	height: 0;
	width: 100%;
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.solution-support-box:hover::before{
	height: 100%;
	border-radius: 0;
}

.solution-support-title{
	position: relative;
	margin-bottom: 30px;
	z-index: 1;
}

.solution-support-title h2{
	font-size: 46px;
	color: var(--white-color);
}

.solution-support-body{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	z-index: 1;
}

.solution-support-body p{
	width: calc(100% - 50px);
	color: var(--white-color);
	margin: 0;
}

.solution-support-body a{
	display: block;
	background: var(--white-color);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.solution-support-body a img{
	max-width: 20px;
}

.solution-image-2 figure,
.solution-image-1 figure{
	display: block;
	border-radius: 20px;
}

.solution-image-2 img,
.solution-image-1 img{
	width: 100%;
	object-fit: cover;
	border-radius: 20px;
}

.solution-image-1 img{
	aspect-ratio: 1 / 0.682;
}

.solution-image-2 img{
	aspect-ratio: 1 / 1.365;
}

.our-team{
	padding: 100px 0 70px;
}

.team-item{
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	overflow: hidden;
}

.team-image{
	position: relative;
}

.team-image a{
	display: block;
	cursor: none;
}

.team-image img{
	width: 100%;
	aspect-ratio: 1 / 1.093;
	object-fit: cover;
	transition: all 0.4s ease-in-out;
}

.team-item:hover .team-image img{
	transform: scale(1.1);
}

.team-social-icon{
	position: absolute;
	right: 30px;
	bottom: 0;
	left: 30px;
	opacity: 0;
	visibility: hidden;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.team-item:hover .team-social-icon{
	bottom: 30px;
	opacity: 1;
	visibility: visible;
}

.team-social-icon ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 20px;
}

.team-social-icon ul li a{
	width: 40px;
	height: 40px;
	color: var(--white-color);
	background: var(--accent-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.4s ease-in-out;
}

.team-social-icon ul li a:hover{
	background: var(--accent-secondary-color);
}

.team-social-icon ul li a i{
	color: inherit;
	font-size: 18px;
}

.team-content{
	position: relative;
	text-align: center;
	padding: 20px;
	overflow: hidden;
}

.team-content::before{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--accent-color);
	height: 0;
	width: 100%;
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.team-item:hover .team-content::before{
	height: 100%;
}

.team-content h2{
	position: relative;
	font-size: 22px;
	text-transform: capitalize;
	margin-bottom: 5px;
	transition: all 0.3s ease-in-out;
	z-index: 1;
}

.team-content h2 a{
	color: inherit;
}

.team-content p{
	position: relative;
	text-transform: capitalize;
	margin: 0;
	transition: all 0.3s ease-in-out;
	z-index: 1;
}

.team-item:hover .team-content p,
.team-item:hover .team-content h2{
	color: var(--white-color);
}

.our-feature{
	background: url(../images/section-bg-3.png), var(--secondary-color);
	background-repeat: no-repeat;
	background-position: bottom left;
	background-size: 100% auto;
	padding: 100px 0;
}

.feature-item-box{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.feature-item{
	width: calc(50% - 15px);
}

.feature-item .icon-box{
	position: relative;
	width: 70px;
	height: 70px;
	background: var(--accent-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30px;
}

.feature-item .icon-box::before{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	left: 0;
	background: var(--primary-color);
	border-radius: 50%;
	width: 100%;
	height: 100%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
}

.feature-item:hover .icon-box::before{
	transform: scale(1);
}

.feature-item .icon-box img{
	position: relative;
	width: 100%;
	max-width: 40px;
	z-index: 1;
}

.feature-item-content h3{
	font-size: 22px;
	text-transform: capitalize;
	margin-bottom: 15px;
}

.feature-item-content p{
	margin: 0;
}

.feature-list{
	border-top: 1px solid var(--divider-color);
	margin-top: 40px;
	padding-top: 40px;
}

.feature-list ul{
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 20px 30px;
}

.feature-list ul li{
	background: url('../images/arrow-accent-secondary.svg') no-repeat;
	background-position: left center;
	background-size: 20px auto;
	width: calc(50% - 15px);
	line-height: 1.5em;
	text-transform: capitalize;
	padding-left: 30px;
}

.feature-images{
	position: relative;
	display: flex;
	margin-left: 15px;
}

.feature-image-1{
	position: relative;
	width: 100%;
	max-width: 330px;
	margin-right: -137px;
	z-index: 1;
}

.feature-image-2{
	width: 100%;
	padding-top: 100px;
}

.feature-image-1 figure,
.feature-image-2 figure{
	display: block;
	width: 100%;
	border-radius: 20px;
}

.feature-image-1 img,
.feature-image-2 img{
	width: 100%;
	object-fit: cover;
	border-radius: 20px;
}

.feature-image-1 img{
	aspect-ratio:	1 / 1.02;
}

.feature-image-2 img{
	aspect-ratio:	1 / 1.169;
}

.feature-experience-circle{
	position: absolute;
	left: 25px;
	bottom: 50px;
}

.feature-experience-circle img{
	max-width: 140px;
	border-radius: 50%;
	animation: infiniterotate 20s infinite linear;
}

/************************************/
/*** 	 19. Services Page css		***/
/************************************/

.page-services{
	padding: 100px 0;
}

.page-services .service-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.page-services .service-item{
	width: calc(25% - 22.5px);
}

/************************************/
/*** 	 20. Service Single css		***/
/************************************/

.page-service-single{
	padding: 100px 0;
}

.page-single-sidebar{
	position: sticky;
	top: 30px;
	margin-right: 20px;
}

.page-catagery-list{
	background-color: var(--secondary-color);
	border-radius: 20px;
	margin-bottom: 60px;
	overflow: hidden;
}

.page-catagery-list h3{
	font-size: 22px;
	/*text-transform: capitalize;
	border-bottom: 1px solid var(--divider-color);
	padding: 30px;
	 CB add */
	color: var(--white-color);
	text-transform: capitalize;
	background-color: var(--primary-color);
	padding: 20px;
	
	/* end add */
}

.page-catagery-list ul{
	list-style: none;
	margin: 0;
	padding: 30px;
}

.page-catagery-list ul li{
	margin-bottom: 10px;
}

.page-catagery-list ul li:last-child{
	margin: 0;
}

.page-catagery-list ul li a{
	position: relative;
	display: block;
	line-height: 1.5em;
	text-transform: capitalize;
	color: var(--text-color);
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 12px;
	padding: 12px 50px 12px 20px;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.page-catagery-list ul li:hover a{
	color: var(--white-color);
}

.page-catagery-list ul li a::before{
	content: '';
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translate(0px, -50%);
	background: url('../images/arrow-text.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	width: 20px;
	height: 20px;
	transition: all 0.3s ease-in-out;
}

.page-catagery-list ul li a:hover::before{
	filter: brightness(0) invert(1);
}

.page-catagery-list ul li a::after{
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
	background: var(--accent-color);
	transition: all 0.4s ease-in-out;
	z-index: -1;
}

.page-catagery-list ul li:hover a::after{
	top: 0;
	height: 100%;
}

.sidebar-cta-box{
	position: relative;
	background: url('../images/sidebar-cta-bg.jpg') no-repeat;
	background-position: center center;
	background-size: cover;
	text-align: center;
	border-radius: 20px;
	padding: 65px 50px;
	overflow: hidden;
}

.sidebar-cta-box:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: var(--primary-color);
	opacity: 80%;
	width: 100%;
	height: 100%;
}

.sidebar-cta-content,
.sidebar-cta-contact{
	position: relative;
	z-index: 1;
}

.sidebar-cta-content{
	margin-bottom: 30px;
}

.sidebar-cta-content img{
	width: 100%;
	max-width: 176px;
	margin-bottom: 40px;
}

.sidebar-cta-content h3{
	font-size: 22px;
	color: var(--white-color);
}

.sidebar-cta-contact ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

.sidebar-cta-contact ul li{
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}

.sidebar-cta-contact ul li:last-child{
	margin-bottom: 0;
}

.sidebar-cta-contact ul li a{
	position: relative;
	color: var(--white-color);
	line-height: normal;
	border: 1px solid var(--dark-divider-color);
	border-radius: 10px;
	padding: 9px 24px;
	overflow: hidden;
}

.sidebar-cta-contact ul li a::before{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: -15%;
	right: 0;
	width: 0;
	height: 106%;
	background: var(--accent-color);
	transform: skew(45deg);
	transition: all 0.4s ease-in-out;
	z-index: -1;
}

.sidebar-cta-contact ul li a:hover::before{
	width: 100%;
	transform: skew(0deg);
	left: 0;
}

.page-single-image{
	margin-bottom: 40px;
}

.page-single-image figure{
	display: block;
	border-radius: 20px;
}

.page-single-image img{
	width: 100%;
	aspect-ratio: 1 / 0.574;	
	object-fit: cover;
	border-radius: 20px;
}

.service-entry{
	margin-bottom: 60px;
}

.service-entry p{
	margin-bottom: 20px;
}

.service-entry p:last-child{
	margin-bottom: 0;
}

.service-entry h2{
	font-size: 36px;
	font-weight: 700;
	margin-bottom: 20px;
}

.service-entry ul{
	list-style: none;
	padding: 0;
	margin-bottom: 20px;
}

.service-entry ul li{
	line-height: 1.5em;
	background-image: url('../images/arrow-accent-secondary.svg');
	background-repeat: no-repeat;
	background-position: left top 1px;
	background-size: 20px auto;
	padding-left: 30px;
	margin-bottom: 15px;
}

.service-entry ul li:last-child{
	margin-bottom: 0;
}

.service-solutions-box,
.service-driving-box{
	margin-top: 60px;
}

.service-solutions-box ul{
	margin: 30px 0;
}

.service-solution-steps{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 40px;
}

.solution-step-item{
	position: relative;
	width: calc(50% - 15px);
	background-color: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	padding: 30px;
	overflow: hidden;
}

.solution-step-item::before{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--primary-color);
	border-radius: 500px 500px 0 0;
	height: 0;
	width: 100%;
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.solution-step-item:hover::before{
	height: 100%;
	border-radius: 0;
}

.solution-item-header,
.solution-item-content{
	position: relative;
	z-index: 1;
}

.solution-item-header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 40px;
}

.solution-step-item .icon-box{
	height: 70px;
	width: 70px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--accent-color);
	border-radius: 50%;
	transition: all 0.4s ease-in-out;
}

.solution-step-item:hover .icon-box{
	background-color: var(--white-color);
}

.solution-step-item .icon-box img{
	width: 100%;
	max-width: 40px;
	transition: all 0.4s ease-in-out;
}

.solution-step-item:hover .icon-box img{
	filter: brightness(0) invert(0);
}

.solution-step-no h2{
	font-size: 46px;
	font-weight: 700;
	opacity: 5%;
	margin-bottom: 0;
	transition: all 0.4s ease-in-out;
}

.solution-step-item:hover .solution-step-no h2{
	color: var(--white-color);
}

.solution-item-content h3{
	font-size: 22px;
	margin-bottom: 15px;
	transition: all 0.4s ease-in-out;
}

.solution-item-content p{
	margin-bottom: 0;
	transition: all 0.4s ease-in-out;
}

.solution-step-item:hover .solution-item-content h3,
.solution-step-item:hover .solution-item-content p{
	color: var(--white-color);
}

.service-driving-box{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
}

.service-driving-image-box,
.service-driving-item-list{
	width: calc(50% - 15px);
}

.service-driving-image-box figure{
	display: block;
	border-radius: 20px;
	margin-top: 40px;
}

.service-driving-image-box figure img{
	width: 100%;
	aspect-ratio: 1 / 0.683;
	object-fit: cover;
	border-radius: 20px;
}

.service-driving-item-list .environment-body-item{
	margin-bottom: 30px;
	padding-bottom: 30px;
}

.service-driving-item-list .environment-body-item:last-child{
	margin-bottom: 0;
	padding-bottom: 0;
}

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

.page-blog{
	padding: 100px 0;
}

.page-blog .post-item{
	display: block;
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.page-blog .post-item .post-featured-image,
.page-blog .post-item .post-item-body{
	width: 100%;
}

.page-blog .post-item .post-featured-image img{
	aspect-ratio: 1 / 0.673;
}

.page-pagination{
	margin-top: 30px;
	text-align: center;
}

.page-pagination ul{
	justify-content: center;
	padding: 0;
	margin: 0;
}

.page-pagination ul li a,
.page-pagination ul li span{
	display: flex;
	text-decoration: none;
	justify-content: center;
	align-items: center;
	background: var(--secondary-color);
	color: var(--primary-color);
	border-radius: 10px;
	width: 40px;
	height: 40px;
	margin: 0 5px;
	font-weight: 700;
	line-height: 1em;
	transition: all 0.3s ease-in-out;
}

.page-pagination ul li.active a,
.page-pagination ul li a:hover{
	background: var(--accent-color);
}

/************************************/
/*** 	 22. Blog Single css		***/
/************************************/

.page-single-post{
	padding: 100px 0;
}

.post-single-meta ol li{
	font-size: 18px;
	color: var(--white-color);
	margin-right: 15px;
}

.post-single-meta ol li:last-child{
	margin-right: 0;
}

.post-single-meta ol li i{
	font-size: 18px;
	color: var(--white-color);
	margin-right: 5px;
}

.post-image{
	position: relative;
	margin-bottom: 30px;
}

.post-image figure{
	display: block;	
	border-radius: 20px;
	overflow: hidden;
}

.post-image img{
	width: 100%;
	aspect-ratio: 1 / 0.50;
	object-fit: cover;
	border-radius: 20px;
}

.post-content{
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}

.post-entry{
	/*border-bottom: 1px solid var(--divider-color);
	padding-bottom: 30px;*/
	margin-bottom: 20px;
}

.post-entry:after{
	content: '';
	display: block;
	clear: both;
}

.post-entry a{
	color: var(--accent-color);
}

.post-entry h1,
.post-entry h2,
.post-entry h3,
.post-entry h4,
.post-entry h5,
.post-entry h6{
	font-weight: 700;
	line-height: 1.1em;
	margin: 0 0 0.435em;
}

.post-entry h1{
	font-size: 75px;
}

.post-entry h2{
	font-size: 46px;
}

.post-entry h3{
	font-size: 40px;
}

.post-entry h4{
	font-size: 30px;
}

.post-entry h5{
	font-size: 24px;
}

.post-entry h6{
	font-size: 20px;
}

.post-entry p{
	margin-bottom: 20px;
}

.post-entry p:last-child{
	margin-bottom: 0;
}

.post-entry p strong{
	color: var(--primary-color);
	font-size: 18px;
	font-weight: 600;
}

.post-entry ol{
	margin: 0 0 30px;
}

.post-entry ul{
	padding: 0;
	margin: 20px 0 20px;
	padding-left: 20px;
}

.post-entry ol li,
.post-entry ul li{
	position: relative;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5em;
	color: var(--text-color);
	margin-bottom: 15px;
}

.post-entry ul li:last-child{
	margin-bottom: 0;
}

.post-entry ul ul,
.post-entry ul ol,
.post-entry ol ol,
.post-entry ol ul{
	margin-top: 20px;
	margin-bottom: 0;
}

.post-entry ul ul li:last-child,
.post-entry ul ol li:last-child,
.post-entry ol ol li:last-child,
.post-entry ol ul li:last-child{
	margin-bottom: 0;
}

.post-entry blockquote{
	background: url('../images/icon-blockquote.svg'), var(--primary-color);
	background-repeat: no-repeat;
	background-position: 30px 30px;
	background-size: 45px;
	border-radius: 12px;
	padding: 30px 30px 30px 90px;
	margin-bottom: 5px;
}

.post-entry blockquote p{
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5em;
	color: var(--white-color);
}

.post-entry blockquote p:last-child{
	margin-bottom: 0;
}

.tag-links{
	font-size: 22px;
	font-weight: 600;
	text-transform: capitalize;
	color: var(--primary-color);
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
}

.post-tags .tag-links a{
	display: inline-block;
	font-size: 16px;
	font-weight: 600;
	text-transform: capitalize;
	line-height: 1em;
	background: var(--accent-color);
	color: var(--white-color);
	border-radius: 10px;
	padding: 12px 20px;
	transition: all 0.3s ease-in-out;
}

.post-tags .tag-links a:hover{
	background: var(--primary-color);
}

.post-social-sharing{
	text-align: right;
}

.post-social-sharing ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

.post-social-sharing ul li{
	display: inline-block;
	margin-right: 10px;
}

.post-social-sharing ul li:last-child{
	margin-right: 0;
}

.post-social-sharing ul li a{
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--accent-color);
	color: var(--white-color);
	border-radius: 10px;
	width: 40px;
	height: 40px;
	transition: all 0.3s ease-in-out;
}

.post-social-sharing ul li:hover a{
	background: var(--primary-color);
}

.post-social-sharing ul li a i{
	font-size: 18px;
	color: inherit;
}

/************************************/
/*** 	 23. Projects Page css		***/
/************************************/

.page-projects{
	padding: 100px 0 70px;
}

/************************************/
/*** 	 24. Project Single css		***/
/************************************/

.page-project-single{
	padding: 100px 0;
}

.project-category-list{
	background: var(--secondary-color);
	border-radius: 20px;
	margin-bottom: 60px;
	overflow: hidden;
}

.project-category-list h3{
	font-size: 22px;
	color: var(--white-color);
	text-transform: capitalize;
	background-color: var(--primary-color);
	padding: 30px;
}

.project-category-list ul{
	margin: 0;
	padding: 30px;
	list-style: none;
}

.project-category-list ul li{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	line-height: normal;
	color: var(--primary-color);
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.project-category-list ul li:last-child{
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.project-category-list ul li span{
	width: 65%;
	font-size: 16px;
	font-weight: 400;
	color: var(--text-color);
}

.project-entry{
	margin-bottom: 60px;
}

.project-entry p{
	margin-bottom: 20px;
}

.project-entry p:last-child{
	margin-bottom: 0;
}

.project-entry h2{
	font-size: 46px;
	font-weight: 700;
	margin-bottom: 20px;
}

.project-entry ul{
	list-style: none;
	padding: 0;
	margin-bottom: 20px;
}

.project-entry ul li{
	line-height: 1.5em;
	background-image: url('../images/arrow-accent-secondary.svg');
	background-repeat: no-repeat;
	background-position: left top 1px;
	background-size: 20px auto;
	padding-left: 30px;
	margin-bottom: 15px;
}

.project-entry ul li:last-child{
	margin-bottom: 0;
}

.project-innovation-box,
.project-challenge-box{
	margin-top: 60px;
}

.project-innovation-image-list{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 30px;
	margin-top: 40px;
}

.project-innovation-image-list2{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0px 10px;
	margin-top: 40px;
}

.project-innovation-image,
.project-innovation-list{
	width: calc(50% - 15px);
}

.project-innovation-image figure{
	display: block;
	border-radius: 20px;
}

.project-innovation-image img{
	width: 100%;
	/*aspect-ratio: 1 / 0.62;*/
	object-fit: cover;
	border-radius: 20px;
}

.project-innovation-image2 img{
	width: 100%;
	aspect-ratio: 1 / 0.62;
	object-fit: cover;
	border-radius: 20px;
}

.project-challenge-list{
	display: flex;
	flex-wrap: wrap;
	gap: 20px 30px;
	margin-top: 40px;
}

.project-challenge-list .environment-body-item{
	width: calc(50% - 15px);
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.project-challenge-video-box{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 40px;
}

.project-challenge-image,
.project-challenge-video{
	width: calc(50% - 15px);
}

.project-challenge-image figure{
	display: block;
	border-radius: 20px;
}

.project-challenge-image img{
	width: 100%;
	aspect-ratio: 1 / 0.881;
	object-fit: cover;
	border-radius: 20px;
}

.challenge-image-video{
	position: relative;
}

.challenge-image-video figure{
	display: block;
	border-radius: 20px;
}

.challenge-image-video img{
	width: 100%;
	aspect-ratio: 1 / 0.634;
	object-fit: cover;
	border-radius: 20px;
}

.challenge-image-video .video-play-button{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}

.video-play-button a{
	height: 85px;
	width: 85px;
	background-color: var(--accent-secondary-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: none;
	transition: all 0.4s ease-in-out;
}

.video-play-button a:hover{
	background-color: var(--primary-color);
}

.video-play-button a:before{
	content: '';
	position: absolute;
	top: -30%;
	left: -30%;
	width: 160%;
	height: 160%;
	border: 50px solid var(--white-color);
	opacity: 70%;
	border-radius: 50%;
	transform: scale(0.6);
	z-index: -1;
	animation: border-zooming 1.2s infinite linear;
}

.video-play-button a:after{
	content: '';
	position: absolute;
	top: -30%;
	left: -30%;
	width: 160%;
	height: 160%;
	border: 50px solid var(--white-color);
	opacity: 70%;
	border-radius: 50%;
	transform: scale(0.6);
	z-index: -1;
	animation: border-zooming 1.2s infinite linear;
	animation-delay: .3s;
}

@keyframes border-zooming{
	100%{
		transform: scale(1);
		opacity: 0;
	}
}

.video-play-button a i{
	font-size: 30px;
	color: var(--white-color);
	margin-left: 2px;
	transition: all 0.4s ease-in-out;
}

.video-play-button a:hover i{
	color: var(--accent-secondary-color);
}

.project-challenge-video ul{
	margin: 30px 0 0;
}

/************************************/
/*** 		 25. Team Page css		***/
/************************************/

.page-team{
	padding: 100px 0 70px;
}

/************************************/
/*** 	 26. Team Single css		***/
/************************************/

.page-team-single{
	position: relative;
	padding: 100px 0;
}

.team-about-box,
.team-expertise-experience{
	margin-bottom: 80px;
}

.team-about-box,
.team-expertise-experience,
.team-skills-form{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px 60px;
}

.team-single-image,
.team-about-content{
	width: calc(50% - 30px);
}

.team-single-image figure{
	display: block;
	border-radius: 20px;
}

.team-single-image img{
	width: 100%;
	aspect-ratio: 1 / 0.933;
	object-fit: cover;
	border-radius: 20px;
}

.team-contact-info-box{
	background-color: var(--secondary-color);
	border-radius: 20px;
	padding: 30px;
}

.team-contact-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.team-contact-box{
	width: calc(50% - 15px);
	display: flex;
	align-items: center;
}

.team-contact-box .icon-box{
	position: relative;
	width: 50px;
	height: 50px;
	background: var(--accent-secondary-color);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 15px;
	overflow: hidden;
}

.team-contact-box .icon-box::before{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	left: 0;
	background: var(--primary-color);
	border-radius: 5px;
	width: 100%;
	height: 100%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
}

.team-contact-box:hover .icon-box::before{
	transform: scale(1);
}

.team-contact-box .icon-box img{
	position: relative;
	width: 100%;
	max-width: 30px;
	z-index: 1;
}

.team-contact-content{
	width: calc(100% - 65px);
}

.team-contact-content h3{
	font-size: 22px;
	text-transform: capitalize;
	margin-bottom: 5px;
}

.team-contact-content p{
	margin: 0;
}

.member-social-list{
	display: flex;
	align-items: center;
	gap: 20px;
	border-top: 1px solid var(--divider-color);
	margin-top: 40px;
	padding-top: 40px;
}

.member-social-list h3{
	font-size: 22px;
	text-transform: capitalize;
}

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

.member-social-list ul li{
	display: inline-block;
	border-radius: 50%;
	margin-right: 10px;
}

.member-social-list ul li:last-child{
	margin-right: 0;
}

.member-social-list ul li a{
	background-color: var(--accent-secondary-color);
	color: var(--white-color);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease-in-out;
}

.member-social-list ul li:hover a{
	background-color: var(--accent-color);
}

.member-social-list ul li a i{
	color: inherit;
	font-size: 18px;
}

.team-expertise-experience{
	align-items: start;
}

.team-expertise-box,
.team-experience-box{
	width: calc(50% - 30px);
}

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

.team-expertise-list ul li{
	position: relative;
	line-height: 1.5em;
	text-transform: capitalize;
	background: url('../images/arrow-accent-secondary.svg') no-repeat;
	background-position: left top 1px;
	background-size: 20px auto;
	padding-left: 30px;
	margin-bottom: 15px;
}

.team-expertise-list ul li:last-child{
	margin-bottom: 0;
}

.team-experience-info-item{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 30px;
}

.team-experience-info-item:last-child{
	margin-bottom: 0;
}

.team-experience-content{
	width: calc(70% - 10px);
}

.team-experience-content h3{
	font-size: 22px;
	margin-bottom: 5px;
}

.team-experience-content p,
.team-experience-year p{
	margin-bottom: 0;
}

.team-experience-year{
	width: calc(30% - 10px);
	text-align: end;
}

.team-skills-box,
.team-member-form{
	width: calc(50% - 30px);
}

.skills-progress-bar{
	margin-bottom: 30px;
}

.skills-progress-bar:last-child{
	margin-bottom: 0px;
}

.skills-progress-bar .skill-data{
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.skills-progress-bar .skillbar .skill-progress{
	position: relative;
	width: 100%;
	height: 16px;
	background: var(--secondary-color);
	border-radius: 100px;
	overflow: hidden;
}

.skills-progress-bar .skillbar .skill-progress .count-bar{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	background: var(--accent-secondary-color);
	border-radius: 100px;
}

.team-member-form{
	border-radius: 20px;
}

/************************************/
/***	 27. Testimonials Page css	***/
/************************************/

.page-testimonials{
	padding: 100px 0 70px;
}

.page-testimonials .testimonial-item{
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 30px;
}

.page-testimonials .testimonial-item .testimonial-header{
	margin-bottom: 20px;
}

.page-testimonials .testimonial-item .testimonial-header .review-content ul{
	margin: 0;
}

.page-testimonials .testimonial-item .testimonial-content{
	border-color: var(--divider-color);
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.page-testimonials .testimonial-item .author-content p,
.page-testimonials .testimonial-item .testimonial-content p{
	color: var(--text-color);
}

.page-testimonials .testimonial-item .author-content h3{
	color: var(--primary-color);
}

/************************************/
/*** 	 28. Image Gallery css		***/
/************************************/

.page-gallery{
	padding: 100px 0 70px;
}

.page-gallery-box .photo-gallery{
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.page-gallery-box .photo-gallery a{
	cursor: none;
}

.page-gallery-box .photo-gallery figure{
	display: block;
	border-radius: 20px;
}

.page-gallery-box .photo-gallery img{
	width: 100%;
	aspect-ratio: 1 / 0.83;
	object-fit: cover;
	border-radius: 20px;
}

/************************************/
/*** 	 29. Video Gallery css		***/
/************************************/

.page-video-gallery{
	padding: 100px 0 70px;
}

.video-gallery-image{
	height: calc(100% - 30px);
	margin-bottom: 30px;
	overflow: hidden;
}

.video-gallery-image a{
	position: relative;
	display: block;
	cursor: none;
}

.video-gallery-image a::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--primary-color);
	border-radius: 20px;
	opacity: 0%;
	visibility: hidden;
	width: 100%;
	height: 100%;
	z-index: 1;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
}

.video-gallery-image:hover a::before{
	opacity: 40%;
	visibility: visible;
	transform: scale(1);
}

.video-gallery-image a::after{
	content: '\f04b';
	font-family: 'FontAwesome';
	position: absolute;
	top: 50%;
	left: 50%;
	right: 0;
	transform: translate(-50%, -50%);
	font-size: 20px;
	background: var(--accent-color);
	color: var(--primary-color);
	border-radius: 50%;
	height: 60px;
	width: 60px;
	cursor: none;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: all 0.5s ease-in-out;
	z-index: 1;
}

.video-gallery-image:hover a::after{
	opacity: 1;
	visibility: visible;
}

.video-gallery-image img{
	width: 100%;
	aspect-ratio: 1 / 0.83;
	object-fit: cover;
	border-radius: 20px;
}

/************************************/
/*** 		 30. FAQs Page css		***/
/************************************/

.page-faqs{
	padding: 100px 0;
}

.page-faqs-catagery .page-faq-accordion{
	margin-bottom: 60px;
}

.page-faqs-catagery .page-faq-accordion:last-child{
	margin-bottom: 0px;
}

/************************************/
/*** 	31. Contact Us Page css		***/
/************************************/

.contact-info-box{
	padding: 100px 0 20px;
}

.contact-info-item{
	position: relative;
	background-color: var(--secondary-color);
	border-radius: 20px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 30px;
	overflow: hidden;
}

.contact-info-item::before{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--accent-color);
	border-radius: 500px 500px 0 0;
	height: 0;
	width: 100%;
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.contact-info-item:hover::before{
	height: 100%;
	border-radius: 0;
}

.contact-info-item .icon-box,
.contact-info-content{
	position: relative;
	z-index: 1;
}

.contact-info-item .icon-box{
	height: 50px;
	width: 50px;
	background-color: var(--accent-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 30px;
	transition: all 0.5s ease-in-out;
}

.contact-info-item:hover .icon-box{
	background: var(--white-color);
}

.contact-info-item .icon-box img{
	width: 100%;
	max-width: 28px;
	transition: all 0.5s ease-in-out;
}

.contact-info-item:hover .icon-box img{
	filter: brightness(0) invert(0);
}

.contact-info-content h3{
	font-size: 22px;
	margin-bottom: 10px;
	transition: all 0.4s ease-in-out;
}

.contact-info-content p{
	margin: 0;
	transition: all 0.4s ease-in-out;
}

.contact-info-content p a{
	color: inherit;
}

.contact-info-item:hover .contact-info-content h3,
.contact-info-item:hover .contact-info-content p{
	color: var(--white-color);
}

.page-contact-us{
	padding: 50px 0 100px;
}

.contact-us-box{
	display: flex;
	flex-wrap: wrap;
	border-radius: 20px;
	overflow: hidden;
}

.contact-us-image,
.contact-us-box .contact-form{
	width: 50%;
}

.contact-us-image figure{
	display: block;
	height: 100%;
}

.contact-us-image img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1.11;
	object-fit: cover;
}

.contact-us-box .contact-form{
	align-content: center;
}

.contact-form{
	background-color: var(--secondary-color);
	padding: 60px;
}

.contact-form .form-control{
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5em;
	color: var(--text-color);
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	padding: 17px 20px;
	box-shadow: none;
	outline: none;
}

.contact-form .form-control::placeholder{
	color: var(--text-color);
}

.google-map .container-fluid{
	padding: 0;
}

.google-map-iframe,
.google-map-iframe iframe{
	height: 600px;
	width: 100%;
}

.google-map-iframe iframe{
	filter: grayscale(1);
	transition: all 0.4s ease-in-out;
}

.google-map-iframe iframe:hover{
	filter: grayscale(0);
}

/************************************/
/*** 	 32. Donation Page css		***/
/************************************/

.page-donation{
	padding: 100px 0;
}

.donation-box{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 30px;
	padding: 100px;
}

.donate-form.donate-form-box{
	width: 100%;
}

.donate-form-box .form-control{
	border-color: var(--divider-color);
	color:	var(--text-color);
}

.donate-form-box .form-control::placeholder{
	color: var(--text-color);
	font-weight: 400;
}

.donate-form-box .donate-value-box{
	gap: 15px;
	margin-bottom: 80px;
}

.donate-form-box .donate-value{
	width: calc(16.66% - 12.5px);
}

.donate-value-box .donate-value label{
	background: var(--secondary-color);
	color: var(--text-color);
}

.donate-payment-method{
	margin-bottom: 80px;
}

.donar-personal-info{
	background: var(--secondary-color);
	border-radius: 20px;
}

.donate-payment-method .section-title{
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 30px;
	padding-bottom: 30px;
}

.donate-payment-type{
	display: flex;
	flex-wrap: wrap;
	gap: 20px 30px;
}

.donate-payment-type .payment-method{
	display: flex;
	align-items: center;
}

.donate-payment-type .payment-method input{
	height: 24px;
	width: 24px;
}

.payment-method label{
	text-transform: capitalize;
	padding-left: 10px;
}

/************************************/
/*** 	 33. 404 Error Page css		***/
/************************************/

.error-page{
	padding: 100px 0;
}

.error-page-image{
	text-align: center;
	margin-bottom: 30px;
}

.error-page-image img{
	width: 100%;
	max-width: 50%;
}

 .error-page-content{
	text-align: center;
}

.error-page-content .section-title{
	margin-bottom: 15px;
}


.page-header-accueil-edu{
	background: url('../images/page-header-accueil-edu-bg.jpg');
	background-position: center -160px;
}

.page-header-elevage{
	background: url('../images/page-header-elevage-bg.jpg');
	background-position: center -60px;
}

.page-header-produits{
	background: url('../images/page-header-produits-cosm-bg.jpg');
	background-position: center -60px;
}

.page-header-gite{
	background: url('../images/page-header-gite-bg.jpg');
	background-position: center -60px;
}

.page-header-contact{
	background: url('../images/page-header-contact-bg.jpg');
	background-position: center -60px;
}









/************************************/
/*** 	 34. Responsive css 		***/
/************************************/

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

	.btn-default{
		padding: 15px 40px 15px 15px;
	}

	.btn-default::before{
		width: 18px;
		height: 18px;
		transform: translate(-15px, -50%);
	}

	.btn-default:hover::before{
		transform: translate(-12px, -50%);
	}

	.navbar{
		padding: 20px 0;
	}

	.slicknav_nav li,
	.slicknav_nav ul{
		display: block;
	}

	.responsive-menu,
	.navbar-toggle{
		display: block;
	}

	.header-btn{
		display: none;
	}

	.section-row{
		margin-bottom: 40px;
	}

	.section-title{
		margin-bottom: 30px;
	}

	.section-title h3{
		font-size: 14px;
		background-size: 22px auto;
		padding-left: 30px;
		margin-bottom: 10px;
	}

	.section-title h1{
		font-size: 55px;
	}

	.section-title h2{
		font-size: 36px;
	}

	.section-title p{
		margin-top: 10px;
	}

	.section-title-content{
		margin-top: 15px;
	}

	.section-btn{
		text-align: left;
		margin-top: 15px;
	}

	.section-content-btn .section-btn{
		margin-top: 15px;
	}

	.hero{
		padding: 180px 0 90px;
	}

	.hero.hero-slider-layout .hero-slide{
		padding: 180px 0 90px;
	}
	
	.hero.hero-slider-layout .hero-pagination{
		bottom: 30px;
		padding-left: 15px;
	}

	.our-scrolling-ticker{
		padding: 15px 0;
	}
	
	.scrolling-ticker-box{
		--gap: 15px;
	}

	.scrolling-content span{
		font-size: 36px;
	}

	.scrolling-content span img{
		width: 22px;
		margin-right: 15px;
	}

	.about-us{
		padding: 50px 0;
		background-size: 80% auto;
		background-position: bottom -60px right -130px;
	}

	.about-images{
		width: 100%;
		max-width: 75%;
		margin: 0 auto 30px;
	}

	.about-img-1 img,
	.about-img-2 img{
		aspect-ratio: 1 / 1.7;
	}

	.years-experience-box{
		width: 140px;
		height: 140px;
		border-width: 5px;
	}

	.years-experience-box h2{
		font-size: 36px;
	}

	.about-us-content{
		margin-left: 0;
	}

	.about-body-item{
		padding: 15px;
	}

	.about-body-item .icon-box{
		width: 50px;
		height: 50px;
	}

	.about-body-item .icon-box img{
		max-width: 30px;
	}

	.about-body-item-title{
		width: calc(100% - 60px);
	}

	.about-body-item-title h3,
	.about-author-box .author-info h3{
		font-size: 20px;
	}

	.about-us-footer{
		margin-top: 30px;
	}

	.our-services{
		background-position: bottom -20px left -20px;
		background-size: 240px auto;
		padding: 50px 0;
	}

	.service-item{
		padding: 20px;
	}

	.service-item .icon-box{
		height: 60px;
		width: 60px;
		margin-bottom: 40px;
	}

	.service-item .icon-box img{
		max-width: 36px;
	}

	.service-item-content{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.service-item-content h3{
		font-size: 20px;
	}

	.service-pagination{
		margin-top: 30px;
	}

	.why-choose-us{
		padding: 50px 0;
	}

	.why-choose-content{
		margin: 0 0 30px 0;
	}

	.why-choose-list{
		padding: 20px;
	}

	.why-choose-list ul li{
		background-size: 18px auto;
		background-position: left top 2px;
		padding-left: 25px;
		margin-bottom: 15px;
	}

	.why-choose-btn{
		margin-top: 30px;
	}

	.why-choose-images{
		width: 100%;
		max-width: 80%;
		margin: 0 auto;
	}

	.our-projects{
		padding: 50px 0;
	}

	.project-image img{
		aspect-ratio: 1 / 1.02;
	}

	.project-body{
		left: 20px;
		bottom: 20px;
		right: 20px;
	}

	.project-content h3{
		font-size: 20px;
		margin-bottom: 10px;
	}

	.section-footer-text{
		margin-top: 10px;
	}

	.section-footer-text span{
		font-size: 14px;
	}

	.our-environment{
		padding: 50px 0;
	}

	.our-environment-images{
		margin-right: 0;
		margin-bottom: 30px;
	}

	.environment-img-1 figure img{
		width: 100%;
		aspect-ratio: 1 / 1.02;
		border-radius: 20px;
	}

	.environment-img-2 figure img{
		aspect-ratio: 1 / 1.09;
	}

	.experience-circle img{
		max-width: 130px;
	}

	.environment-body-item{
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

	.environment-body-item-content h3{
		font-size: 20px;
	}

	.our-facts{
		margin-top: 0;
		padding: 50px 0 0;
	}

	.our-fact-content{
		height: auto;
		margin: 0 0 30px 0;
	}

	.fact-list ul{
		gap: 15px 20px;
	}

	.fact-list ul li{
		width: calc(50% - 10px);
		background-size: 18px auto;
		background-position: left top 2px;
		padding-left: 25px;
	}

	.fact-counter-list{
		margin-top: 30px;
		padding-top: 30px;
	}

	.fact-counter-item img{
		margin-bottom: 15px;
	}
	
	.fact-counter-item h2{
		font-size: 36px;
		margin-bottom: 5px;
	}

	.our-fact-image{
		padding: 0;
		margin: 0;
	}

	.our-fact-image img{
		max-width: 60%;
	}

	.what-we-do{
		padding: 50px 0;
	}

	.What-we-do-content{
		position: initial;
		margin: 0 0 30px 0;
	}

	.what-we-do-list ul li{
		background-position: left top 2px;
		background-size: 18px auto;
		padding-left: 25px;
		margin-bottom: 15px;
	}

	.what-we-do-btn{
		margin-top: 30px;
	}

	.what-we-do-item{
		padding: 20px;
	}

	.what-we-do-item .icon-box{
		margin-bottom: 30px;
	}

	.what-we-do-item .icon-box img{
		max-width: 50px;
	}

	.what-do-item-content h3{
		font-size: 20px;
		margin-bottom: 10px;
	}

	.what-we-do-box .section-footer-text{
		margin-top: 40px;
	}

	.how-it-work{
		padding: 50px 0 0;
		margin-bottom: 220px;
	}

	.work-step-item{
		width: calc(50% - 15px);
	}

	.work-step-image{
		margin-bottom: 15px;
	}

	.work-step-content{
		padding-top: 20px;
	}

	.work-step-content h2{
		font-size: 65px;
	}

	.work-step-content h3{
		font-size: 20px;
		margin-bottom: 10px;
	}

	.donate-box{
		padding: 40px;
		margin-top: 40px;
	}

	.donate-box .section-title,
	.donate-form{
		width: 100%;
	}

	.donate-form .form-control{
		padding: 12px 15px;
	}

	.donate-value-box .donate-value label{
		padding: 12px;
	}

	.donate-form .form-group-btn .btn-default.btn-highlighted{
		padding: 15px;
	}

	.our-faqs{
		padding: 50px 0;
	}

	.faq-image{
		margin-bottom: 30px;
	}

	.faq-image img{
		aspect-ratio: 1 / 0.56;
	}

	.client-review-content p{
		font-size: 18px;
		margin-bottom: 5px;
	}

	.faq-accordion .accordion-item{
		margin-bottom: 20px;
	}

	.faq-accordion .accordion-header .accordion-button{
		font-size: 20px;
		padding: 14px 40px 14px 15px;
	}

	.faq-accordion .accordion-item .accordion-button::after,
	.faq-accordion .accordion-item .accordion-button.collapsed::after{
		right: 15px;
		font-size: 10px;
		width: 18px;
		height: 18px;
	}

	.faq-accordion .accordion-item .accordion-body{
		padding: 14px 40px 14px 15px;
	}

	.section-video{
		padding: 30px 0;
	}

	/* CB */
	.dark-video-content{
		font-size: 28px;
		color: var(--white-color) !important;
		padding: 20px;
	}

	.review-box{
		margin-top: 15px;
		justify-content: start;
	}

	.testimonial-image{
		margin-bottom: 30px;
	}

	.testimonial-image img{
		aspect-ratio: 1 / 0.59;
	}

	.testimonial-slider{
		margin: 0;
	}

	.testimonial-header{
		margin-bottom: 30px;
	}

	.testimonial-content{
		padding-bottom: 30px;
		margin-bottom: 30px;
	}

	.author-content h3{
		font-size: 20px;
	}

	.testimonial-company-slider{
		margin-top: 40px;
		padding-top: 40px;
	}

	.our-blog{
		padding: 50px 0;
	}

	.post-item.highlighted-post-item{
		margin-bottom: 30px;
	}

	.post-featured-image img{
		aspect-ratio: 1 / 0.557;
	}

	.post-item-body{
		padding: 20px;
	}

	.post-item-content h2{
		font-size: 20px;
		margin-bottom: 10px;
	}

	.main-footer{
		padding: 50px 0 0;
	}

	.main-footer-box{
		margin-bottom: 30px;
		padding-bottom: 30px;
	}
	
	.footer-logo{
		width: 100%;
		text-align: center;
		margin-bottom: 30px;
	}

	.footer-contact-details{
		width: 100%;
		justify-content: center;
		gap: 20px;
	}

	.footer-contact-item .icon-box{
		width: 50px;
		height: 50px;
		margin-right: 10px;
	}

	.footer-contact-item .icon-box img{
		max-width: 26px;
	}

	.footer-contact-item-content{
		width: calc(100% - 60px);
	}

	.footer-contact-item-content h3{
		font-size: 20px;
	}

	.about-footer{
		padding-right: 30px;
		margin-bottom: 30px;
	}

	.footer-social-links{
		margin-top: 30px;
	}

	.footer-links{
		margin-bottom: 30px;
	}

	.footer-links h3{
		font-size: 20px;
		margin-bottom: 20px;
	}

	.footer-links ul li{
		margin-bottom: 10px;
	}

	.newsletter-form{
		padding-left: 0px;
	}

	.footer-copyright{
		padding: 30px 0;
		margin-top: 0;
	}

	.page-header{
		padding: 160px 0px 70px;
	}

	.page-header-box h1{
		font-size: 55px;
		margin-bottom: 5px;
	}

	.our-scrolling-ticker.subpages-scrolling-ticker{
		padding: 10px 0;
	}

	.our-scrolling-ticker.subpages-scrolling-ticker .scrolling-content span img{
		width: 18px;
	}

	.our-scrolling-ticker.subpages-scrolling-ticker .scrolling-content span{
		font-size: 30px;
	}

	.our-approach{
		background-size: 200px auto;
		padding: 50px 0;
	}

	.our-approach-content{
		position: initial;
		top: 0;
		margin-right: 0px;
		margin-bottom: 30px;
	}

	.our-approach-nav{
		margin-bottom: 30px;
	}

	.our-approach-nav ul li .nav-link{
		padding: 20px;
		gap: 15px;
		font-size: 20px;
	}

	.our-approach-nav ul li .nav-link span{
		width: 50px;
		height: 50px;
	}

	.our-approach-nav ul li .nav-link span img{
		max-width: 30px;
	}

	.our-solutions{
		padding: 50px 0;
	}

	.our-solution-content{
		margin-right: 0px;
		margin-bottom: 30px;
	}

	.solution-support-title{
		margin-bottom: 20px;
	}

	.solution-image-2 img{
		aspect-ratio: 1 / 1.2;
	}

	.solution-support-title h2{
		font-size: 36px;
	}

	.our-team{
		padding: 50px 0 20px;
	}

	.team-image img{
		aspect-ratio: 1 / 0.99;
	}

	.team-content h2{
		font-size: 20px;
	}

	.our-feature{
		padding: 50px 0;
	}

	.our-feature-content{
		margin-bottom: 30px;
	}

	.feature-item-content h3{
		font-size: 20px;
		margin-bottom: 10px;
	}

	.feature-item .icon-box{
		width: 60px;
		height: 60px;
		margin-bottom: 20px;
	}

	.feature-item .icon-box img{
		max-width: 34px;
	}

	.feature-list{
		margin-top: 30px;
		padding-top: 30px;
	}

	.feature-images{
		margin-left: 0;
	}

	.feature-image-2 img{
		aspect-ratio: 1 / 0.9;
	}

	.page-services{
		padding: 50px 0;
	}
	
	.page-services .service-item{
		width: calc(50% - 15px);
	}

	.page-service-single{
		padding: 50px 0;
	}

	.page-single-sidebar{
		position: initial;
		margin: 0 0 30px 0;
	}

	.page-catagery-list{
		margin-bottom: 30px;
	}

	.page-catagery-list h3{
		font-size: 20px;
		padding: 20px;
	}

	.page-catagery-list ul{
		padding: 20px;
	}

	.page-catagery-list ul li a{
		padding: 10px 40px 10px 15px;
	}

	.page-catagery-list ul li a::before{
		right: 15px;
		width: 18px;
		height: 18px;
	}

	.sidebar-cta-box{
		padding: 30px;
	}

	.sidebar-cta-content img{
		margin-bottom: 30px;
	}

	.sidebar-cta-content h3{
		font-size: 20px;
	}

	.sidebar-cta-contact ul li{
		margin-bottom: 15px;
	}

	.sidebar-cta-contact ul li a{
		padding: 6px 20px;
	}

	.page-single-image{
		margin-bottom: 30px;
	}

	.service-entry{
		margin-bottom: 40px;
	}

	.service-entry p{
		margin-bottom: 15px;
	}

	.service-entry h2{
		font-size: 36px;
		margin-bottom: 15px;
	}

	.service-entry ul li{
		background-position: left top 2px;
		background-size: 18px auto;
		padding-left: 25px;
		margin-bottom: 10px;
	}

	.service-solutions-box,
	.service-driving-box{
		margin-top: 40px;
	}

	.service-solutions-box ul{
		margin: 20px 0;
	}
	
	.service-solution-steps{
		margin-top: 30px;
	}

	.solution-step-item{
		padding: 20px;
	}

	.solution-item-header{
		margin-bottom: 30px;
	}

	.solution-step-item .icon-box{
		height: 60px;
		width: 60px;
	}

	.solution-step-item .icon-box img{
		max-width: 36px;
	}

	.solution-step-no h2{
		margin-bottom: 0;
	}

	.solution-item-content h3{
		font-size: 20px;
		margin-bottom: 10px;
	}

	.service-driving-image-box figure{
		margin-top: 30px;
	}

	.service-driving-item-list .environment-body-item{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.page-blog{
		padding: 50px 0;
	}
	
	.page-pagination{
		margin-top: 10px;
	}

	.page-single-post{
		padding: 50px 0;
	}
	
	.post-image{
		margin-bottom: 20px;
	}
	
	.post-entry h1,
	.post-entry h2,
	.post-entry h3,
	.post-entry h4,
	.post-entry h5,
	.post-entry h6{
		margin: 0 0 0.417em;
	}
	
	.post-entry h2{
		font-size: 36px;
	}
	
	.post-entry p{
		margin-bottom: 15px;
	}
	
	.post-entry ol li,
	.post-entry ul li{
		margin-bottom: 10px;
	}
	
	.post-entry blockquote{
		background-position: 20px 20px;
		background-size: 40px;
		padding: 20px 20px 20px 70px;
		margin-bottom: 20px;
	}
	
	.post-entry blockquote p{
		font-size: 18px;
	}
	
	.post-tags{
		margin-bottom: 20px;
	}

	.tag-links{
		font-size: 20px;
	}
	
	.post-tags .tag-links a{
		padding: 12px 15px;
	}
	
	.post-social-sharing ul{
		text-align: left;
	}

	.page-projects{
		padding: 50px 0 20px;
	}

	.page-project-single{
		padding: 50px 0;
	}

	.project-category-list{
		margin-bottom: 30px;
	}

	.project-category-list h3{
		font-size: 20px;
		padding: 20px;
	}

	.project-category-list ul{
		padding: 20px;
	}

	.project-category-list ul li{
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.project-entry{
		margin-bottom: 40px;
	}

	.project-entry p{
		margin-bottom: 15px;
	}

	.project-entry h2{
		font-size: 36px;
		margin-bottom: 15px;
	}

	.project-entry ul li{
		background-position: left top 2px;
		background-size: 18px auto;
		padding-left: 25px;
		margin-bottom: 10px;
	}

	.project-innovation-box,
	.project-challenge-box{
		margin-top: 40px;
	}

	.project-innovation-image-list,
	.project-challenge-list,
	.project-challenge-video-box{
		margin-top: 30px;
	}

	.video-play-button a{
		height: 70px;
		width: 70px;
	}

	.video-play-button a i{
		font-size: 26px;
	}

	.project-challenge-video ul{
		margin: 20px 0 0;
	}

	.page-team{
		padding: 50px 0 20px;
	}

	.page-team-single{
		padding: 50px 0;
	}

	.team-about-box,
	.team-expertise-experience{
		margin-bottom: 40px;
	}

	.team-single-image,
	.team-about-content{
		width: 100%;
	}

	.team-single-image img{
		aspect-ratio: 1 / 0.75;
	}

	.team-contact-info-box{
		padding: 20px;
	}

	.team-contact-content h3{
		font-size: 20px;
	}

	.member-social-list{
		margin-top: 30px;
		padding-top: 30px;
	}

	.member-social-list h3{
		font-size: 20px;
	}

	.team-expertise-box,
	.team-experience-box{
		width: 100%;
	}

	.team-expertise-list ul li{
		background-position: left top 2px;
		background-size: 18px auto;
		padding-left: 25px;
		margin-bottom: 10px;
	}

	.team-experience-info-item{
		margin-bottom: 20px;
	}

	.team-experience-content h3{
		font-size: 20px;
	}

	.team-skills-box,
	.team-member-form{
		width: 100%;
	}

	.skills-progress-bar{
		margin-bottom: 20px;
	}

	.skills-progress-bar .skill-data{
		margin-bottom: 15px;
	}

	.skills-progress-bar .skillbar .skill-progress{
		height: 14px
	}

	.page-testimonials{
		padding: 50px 0 20px;
	}

	.page-testimonials .testimonial-item{
		padding: 20px;
	}

	.page-testimonials .testimonial-item .testimonial-header {
		margin-bottom: 10px;
	}

	.page-gallery{
		padding: 50px 0 20px;
	}

	.page-video-gallery{
		padding: 50px 0 20px;
	}

	.page-faqs{
		padding: 50px 0;
	}

	.page-faqs-catagery .page-faq-accordion{
		margin-bottom: 40px;
	}

	.contact-info-box{
		padding: 50px 0 0;
	}

	.contact-info-item{
		padding: 20px;
	}

	.contact-info-item .icon-box{
		margin-bottom: 20px;
	}

	.contact-info-content h3{
		font-size: 20px;
	}

	.page-contact-us{
		padding: 20px 0 50px;
	}

	.contact-us-image,
	.contact-us-box .contact-form{
		width: 100%;
	}

	.contact-form{
		padding: 40px;
	}
	
	.contact-us-image figure,
	.contact-us-image img{
		height: auto;
	}
	
	.contact-us-image img{
		aspect-ratio: 1 / 0.8;
	}

	.contact-form .form-control{
		padding: 12px 16px;
	}
	
	.google-map-iframe, .google-map-iframe iframe{
		height: 450px;
	}

	.page-donation{
		padding: 50px 0;
	}

	.donation-box{
		padding: 60px 30px;
		border-radius: 20px;
	}

	.donate-form-box .form-control{
		padding: 12px 20px;
	}

	.donate-form-box .donate-value-box{
		margin-bottom: 40px;
	}

	.donate-form-box .donate-value label{
		padding: 12px;
	}

	.donate-payment-method{
		margin-bottom: 40px;
	}

	.donate-payment-method .section-title{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.donate-payment-type .payment-method input{
		height: 20px;
		width: 20px;
	}

	.error-page{
		padding: 50px 0;
	}
	
	.error-page-image{
		margin-bottom: 20px;
	}

	.error-page-image img{
		max-width: 80%;
	}
}

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

	.section-row{
		margin-bottom: 30px;
	}

	.section-title h1{
		font-size: 30px;
	}

	.section-title h2{
		font-size: 26px;
	}

	.section-title p{
		margin-top: 10px;
	}

	.section-title-content{
		margin-top: 10px;
	}

	.hero-review-image figure{
		width: 50px;
		height: 50px;
	}

	.scrolling-content span{
		font-size: 26px;
	}

	.scrolling-content span img{
		width: 18px;
	}

	.about-images{
		max-width: 100%;
		gap: 20px;
	}

	.about-img-1,
	.about-img-2{
		width: calc(50% - 10px);
	}

	.about-img-2{
		margin-top: 50px;
	}

	.years-experience-box{
		width: 110px;
		height: 110px;
	}

	.years-experience-box h2{
		font-size: 26px;
	}

	.years-experience-box p{
		font-size: 14px;
	}

	.about-us{
		background-position: bottom -30px right -90px;
		background-size: 130% auto;
	}

	.about-us-body{
		gap: 20px;
	}

	.about-body-item{
		width: 100%;
	}

	.service-item .icon-box{
		margin-bottom: 30px;
	}

	.why-choose-list{
		padding: 10px;
		border-radius: 10px;
	}

	.why-choose-list ul li{
		font-size: 14px;
		margin-bottom: 10px;
	}

	.why-choose-btn{
		margin-top: 20px;
	}	

	.why-choose-images{
		max-width: 100%;
		gap: 20px;
	}

	.why-choose-image-box-1{
		width: calc(48% - 10px);
		gap: 20px;
	}

	.why-choose-image-box-2{
		width: calc(52% - 10px);
		margin-top: 50px;
	}
	
	.environment-img-2{
		max-width: 180px;
		margin-left: -80px;
	}

	.environment-img-1 figure img{
		aspect-ratio: 1 / 1.3;
	}

	.experience-circle img{
		max-width: 90px;
	}

	.environment-body-item{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.environment-body-item .icon-box{
		margin-right: 10px;
	}

	.environment-body-item-content{
		width: calc(100% - 60px);
	}

	.fact-list ul{
		gap: 10px;
	}

	.fact-list ul li{
		width: 100%;
	}

	.fact-counter-list{
		gap: 30px 20px;
	}

	.fact-counter-item{
		width: calc(33.33% - 13.33px);
		text-align: center;
	}

	.fact-counter-item:after{
		right: -10px;
	}

	.fact-counter-item h2{
		font-size: 26px;
	}

	.our-fact-image img{
		max-width: 100%;
	}

	.what-we-do-list ul li{
		margin-bottom: 10px;
	}
	
	.what-we-do-item{
		width: 100%;
	}

	.what-we-do-item .icon-box{
		margin-bottom: 20px;
	}

	.work-step-item{
		width: 100%;
	}

	.work-step-content{
		padding-top: 10px;
	}

	.work-step-content h2{
		font-size: 50px;
	}

	.work-step-content h3{
		margin-bottom: 5px;
	}
	
	.donate-box{
		padding: 30px 20px;
	}

	.donate-value-box .donate-value label{
		font-size: 14px;
		padding: 10px;
	}
	
	.faq-image img{
		aspect-ratio: 1 / 0.82;
	}

	.client-review-content{
		bottom: 15px;
		right: 15px;
		left: 15px;
	}

	.client-review-content p{
		font-size: 16px;
	}

	.faq-accordion .accordion-item .accordion-body{
		padding: 14px 15px;
	}

	.review-image{
		margin-right: 15px;
		padding-right: 15px;
	}

	.review-image img{
		max-width: 120px;
	}

	.testimonial-image img{
		aspect-ratio: 1 / 0.7;
	}

	.testimonial-header{
		margin-bottom: 20px;
	}

	.testimonial-company-logo img{
		max-width: 150px;
	}

	.testimonial-quote img{
		max-width: 34px;
	}

	.testimonial-content{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}
	
	.testimonial-content p{
		font-size: 16px;
	}

	.testimonial-pagination{
		position: initial;
		margin-top: 20px;
		justify-content: center;
	}

	.testimonial-company-slider{
		margin-top: 30px;
		padding-top: 30px;
	}

	.post-item .post-featured-image,
	.post-item .post-item-body{
		width: 100%;
	}

	.post-item-content{
		margin-bottom: 15px;
	}
	
	.post-item-content h2{
		font-size: 18px;
		margin-bottom: 5px;
	}

	.footer-logo{
		text-align: left;
	}

	.footer-contact-item{
		width: 100%;
	}

	.footer-contact-item .icon-box{
		width: 45px;
		height: 45px;
	}

	.footer-contact-item-content{
		width: calc(100% - 55px);
	}

	.about-footer{
		padding-right: 0px;
	}

	.about-footer .footer-links{
		margin-bottom: 20px;
	}

	.footer-social-links{
		margin-top: 20px;
	}

	.footer-links h3{
		margin-bottom: 15px;
	}

	.newsletter-form p{
		margin-bottom: 20px;
	}

	.footer-copyright{
		padding: 15px 0;
	}

	.footer-privacy-policy,
	.footer-copyright-text{
		text-align: center;
	}

	.footer-privacy-policy{
		margin-top: 10px;
	}

	.page-header-box h1{
		font-size: 30px;
	}

	.page-header-box ol li.breadcrumb-item{
		font-size: 14px;
	}

	.our-scrolling-ticker.subpages-scrolling-ticker .scrolling-content span{
		font-size: 20px;
	}

	.our-scrolling-ticker.subpages-scrolling-ticker .scrolling-content span img{
		width: 14px;
	}

	.our-approach-nav{
		margin-bottom: 20px;
	}

	.our-approach-nav ul li .nav-link{
		padding: 15px;
		gap: 10px;
		font-size: 18px;
	}

	.our-approach-nav ul li .nav-link span img{
		max-width: 26px;
	}

	.approach-tab-image, .approach-tab-list{
		width: 100%;
	}

	.approach-tab-list ul li{
		margin-bottom: 10px;
		background-size: 18px auto;
		padding-left: 25px;
	}

	.our-solution-list ul{
		gap: 10px;
	}

	.our-solution-list ul li{
		width: 100%;
		background-size: 18px auto;
		padding-left: 25px;
	}

	.our-solution-images{
		gap: 20px;
	}

	.solution-image-box{
		width: 100%;
	}

	.solution-support-box{
		margin-bottom: 20px;
	}

	.solution-support-title{
		margin-bottom: 15px;
	}

	.solution-support-title h2{
		font-size: 26px;
	}

	.solution-image-2 img{
		aspect-ratio: 1 / 0.9;
	}

	.team-content{
		padding: 15px;
	}

	.feature-item-box{
		gap: 20px;
	}

	.feature-item{
		width: calc(50% - 10px);
	}

	.feature-item-content p{
		font-size: 14px;
	}

	.feature-list{
		margin-top: 20px;
		padding-top: 20px;
	}

	.feature-list ul{
		gap: 10px;
	}

	.feature-list ul li{
		width: 100%;
	}

	.feature-image-1{
		max-width: 200px;
		margin-right: -80px;
	}

	.feature-image-2{
		padding-top: 80px;
	}

	.feature-image-2 img{
		aspect-ratio: 1 / 1.1;
	}

	.feature-experience-circle{
		left: 10px;
		bottom: 15px;
	}

	.feature-experience-circle img{
		max-width: 90px;
	}

	.page-services .service-item{
		width: 100%;
	}

	.page-catagery-list h3{
		padding: 15px 20px;
	}

	.sidebar-cta-content img{
		margin-bottom: 20px;
	}

	.page-single-image{
		margin-bottom: 20px;
	}

	.page-single-image img{
		aspect-ratio: 1 / 0.7;
	}

	.service-entry h2{
		font-size: 26px;
	}

	.service-solutions-box ul{
		margin: 20px 0;
	}

	.solution-step-item{
		width: 100%;
	}

	.solution-step-item .solution-step-no h2{
		font-size: 36px;
	}

	.service-driving-image-box,
	.service-driving-item-list{
		width: 100%;
	}

	.service-driving-image-box figure{
		margin-top: 20px;
	}

	.service-driving-item-list .environment-body-item{
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.post-single-meta ol li{
		font-size: 16px;
	}
	
	.post-single-meta ol li i{
		font-size: 16px;
	}
	
	.post-image img{
		aspect-ratio: 1 / 0.7;
	}
	
	.post-entry blockquote{
		background-position: 15px 15px;
		padding: 60px 15px 15px 15px;
	}
	
	.post-entry blockquote p{
		font-size: 16px;
	}
	
	.post-entry h2{
		font-size: 26px;
	}
	
	.tag-links{
		font-size: 18px;
	}

	.project-category-list h3{
		padding: 15px 20px;
	}

	.project-category-list ul li{
		font-size: 18px;
	}

	.project-category-list ul li span{
		width: 68%;
	}
	
	.project-entry h2{
		font-size: 26px;
	}

	.project-innovation-image,
	.project-innovation-list{
		width: 100%;
	}

	.project-challenge-list .environment-body-item{
		width: 100%;
	}

	.project-challenge-image,
	.project-challenge-video{
		width: 100%;
	}

	.project-challenge-image img{
		aspect-ratio: 1 / 0.68;
	}

	.team-single-image img{
		aspect-ratio: 1 / 0.9;
	}

	.team-contact-list{
		gap: 20px;
	}

	.team-contact-box{
		width: 100%;
	}

	.team-contact-box .icon-box{
		width: 45px;
		height: 45px;
		margin-right: 10px;
	}

	.team-contact-box .icon-box img{
		max-width: 26px;
	}

	.team-contact-content{
		width: calc(100% - 55px);
	}

	.member-social-list{
		margin-top: 20px;
		padding-top: 20px;
	}

	.member-social-list ul li{
		margin-right: 5px;
	}

	.team-experience-info-item{
		gap: 5px;
	}

	.team-experience-content,
	.team-experience-year{
		width: 100%;
	}
		
	.team-experience-year{
		text-align: left;
	}

	.skills-progress-bar .skill-data{
		margin-bottom: 10px;
	}

	.contact-form{
		padding: 20px;
	}

	.google-map-iframe,
	.google-map-iframe iframe{
		height: 350px;
	}

	.donation-box{
		padding: 30px 20px;
	}

	.donate-form-box .form-control{
		padding: 12px 15px;
	}
	
	.donate-form-box .donate-value{
		width: calc(33.33% - 10px);
	}
	
	.donate-payment-type .payment-method input{
		height: 16px;
		width: 16px;
	}
}

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

#backToTop {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 1050;

	height: 60px;
	width: 60px;
	border-radius: 50%;
	background-color: var(--accent-secondary-color);

	display: flex;
	align-items: center;
	justify-content: center;

	border: none;
	cursor: pointer;

	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: all 0.3s ease;

	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#backToTop.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

#backToTop:hover {
	background-color: var(--primary-color);
	transform: translateY(-3px);
}

#backToTop i {
	font-size: 20px;
	color: #fff;
}

/* Mobile */
@media (max-width: 576px) {
	#backToTop {
	width: 50px;
	height: 50px;
	bottom: 15px;
	right: 15px;
	}

	#backToTop i {
	font-size: 16px;
	}
}

/* --------------------------------------------------------------------
   Ajout au panier sans rechargement
   -------------------------------------------------------------------- */

/* Vignette qui rejoint le panier. Détachée du flux, au-dessus de tout. */
.cart-fly{
	position: fixed;
	z-index: 2000;
	border-radius: 8px;
	pointer-events: none;
	box-shadow: 0 8px 24px rgba(3, 34, 27, 0.35);
}

/* Le panier accuse réception. */
@keyframes cart-bump{
	0%   { transform: scale(1); }
	35%  { transform: scale(1.35); }
	60%  { transform: scale(0.92); }
	100% { transform: scale(1); }
}

.cart-bump{
	animation: cart-bump 0.45s ease-out;
	display: inline-block;
}

/* --------------------------------------------------------------------
   Raccourci panier flottant
   Pendant du bouton « haut de page » : mêmes dimensions, même ombre,
   même transition. Ancré en haut à droite, sous l'en-tête.
   -------------------------------------------------------------------- */

#floating-cart{
	position: fixed;
	/*
	 * L'en-tête n'est pas collant : il défile avec la page. Le bouton doit
	 * donc seulement dégager sa hauteur EN HAUT de page — mesurée à
	 * 134 px sur grand écran, 114 px en mobile.
	 */
	top: 150px;
	right: 20px;
	z-index: 1050;

	height: 60px;
	width: 60px;
	border-radius: 50%;
	background-color: var(--primary-color);

	display: flex;
	align-items: center;
	justify-content: center;

	border: none;
	cursor: pointer;
	text-decoration: none;

	opacity: 0;
	visibility: hidden;
	transform: translateY(-20px);
	transition: all 0.3s ease;
}

#floating-cart.show{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

#floating-cart:hover{
	background-color: var(--accent-secondary-color);
	transform: translateY(-3px);
}

#floating-cart i{
	font-size: 20px;
	color: var(--white-color);
}

/* Pastille de quantité, accrochée au bord du cercle. */
#floating-cart-count{
	position: absolute;
	top: -4px;
	right: -4px;

	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	border-radius: 100px;

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

	font-family: var(--accent-font);
	font-size: 13px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

@media (max-width: 576px){
	#floating-cart{
		width: 50px;
		height: 50px;
		top: 128px;
		right: 15px;
	}

	#floating-cart i{ font-size: 17px; }

	#floating-cart-count{
		min-width: 20px;
		height: 20px;
		font-size: 11px;
		line-height: 16px;
	}
}

/* Panier en cours de mise à jour : on éteint sans faire sauter la page. */
.cart-busy{
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.15s ease-out;
}

/* Messages empilés, hors du flux de la page. */
.cart-toasts{
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 2100;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: min(360px, calc(100vw - 40px));
}

.cart-toast{
	padding: 12px 16px;
	border-radius: 8px;
	background: var(--primary-color);
	color: var(--white-color);
	font-family: var(--default-font);
	font-size: 15px;
	line-height: 1.35;
	box-shadow: 0 10px 30px rgba(3, 34, 27, 0.3);
	border-left: 4px solid var(--accent-color);

	/* État de départ, avant la classe .is-visible. */
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

.cart-toast.is-visible{
	opacity: 1;
	transform: translateY(0);
}

.cart-toast--error{
	border-left-color: var(--error-color);
}

/*
   Certains visiteurs demandent explicitement moins d'animations : le
   script saute déjà le vol de la vignette, on neutralise le reste.
*/
@media (prefers-reduced-motion: reduce){
	.cart-bump{ animation: none; }
	.cart-toast{ transition: none; opacity: 1; transform: none; }
}


/* --------------------------------------------------------------------
   Widget actualités : titre posé sur l'image
   Le dégradé part du vert foncé de la charte (--primary-color) et
   s'éteint vers le haut : le texte reste lisible quelle que soit la
   photo, sans masquer le sujet.
   -------------------------------------------------------------------- */

.actu-side-card{
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 8px;
}

/*
   Cadrage imposé : les photos arrivent en portrait comme en paysage, et
   des vignettes de hauteurs différentes feraient sauter le carrousel à
   chaque slide. L'image stockée n'est pas recadrée pour autant — la
   modale la montre en entier.
*/
.actu-side-card img{
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
}

.actu-side-overlay{
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	padding: 36px 15px 12px;
	background: linear-gradient(
		to top,
		rgba(3, 34, 27, 0.94) 0%,
		rgba(3, 34, 27, 0.78) 45%,
		rgba(3, 34, 27, 0) 100%
	);
	transition: background 0.3s ease-in-out;
}

.actu-side-date{
	display: block;
	margin-bottom: 2px;
	font-family: var(--accent-font);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--accent-color);
}

.actu-side-titre{
	/* Deux lignes maximum : un titre à rallonge ne doit pas avaler la photo. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: var(--accent-font);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--white-color);
}

.actu-side-card:hover .actu-side-overlay{
	background: linear-gradient(
		to top,
		rgba(3, 34, 27, 0.97) 0%,
		rgba(3, 34, 27, 0.88) 55%,
		rgba(3, 34, 27, 0.2) 100%
	);
}

.actu-side-card:hover .actu-side-titre{
	color: var(--accent-color);
}

.sideBar-Actu-pagination{
	text-align: center;
	margin-top: 10px;
}

.sideBar-Actu-pagination .swiper-pagination-bullet{
	height: 8px;
	width: 8px;
	background: var(--divider-color);
	opacity: 1;
	margin: 0 2px;
	border-radius: 100px;
	transition: all 0.3s ease-in-out;
}

.sideBar-Actu-pagination .swiper-pagination-bullet-active{
	width: 24px;
	background-color: var(--accent-secondary-color);
}


.modal-header{
	background-color: var(--primary-color);
	margin-bottom: 5px;
	overflow: hidden;
}

.modal-header h3{
	font-size: 22px;
	color: var(--white-color);
	text-transform: capitalize;
	padding: 10px;
}

.post-featured-image img {
	height: 100%;
	width: 100%;
	aspect-ratio: 1 / 0.500;
	object-fit: cover;
	transition: 0.4s ease-in-out;
}




.reservation-box, .booking-snippet {
	height: auto;
	overflow: visible;
}


.gite-booking-box{
	background: var(--primary-color);
	border-radius: 12px;
	padding: 30px;
	margin-top: 60px;
	margin-bottom: 30px;
}

.gite-booking-box h2{
	font-size: 42px;
	color: var(--white-color);
	text-transform: capitalize;
	padding: 10px;
}

.gite-booking-box p{
	color: var(--white-color);
}
.gite-booking-box i{
	color: var(--accent-color);
}


/*
|--------------------------------------------------------------------------
| Panier — lisibilité du tableau d'articles
|--------------------------------------------------------------------------
| Le thème impose line-height: 16px pour une police de 16px : les lignes se
| touchent dès qu'un libellé passe sur deux lignes. On rend la respiration
| aux cellules, et on empêche le nom du produit de déborder sur les
| colonnes voisines (un enfant de flex ne descend pas sous sa largeur
| minimale tant qu'on ne lui donne pas min-width: 0).
*/

.cart-table td,
.cart-table th{
	line-height: 1.45;
	vertical-align: middle;
}

.cart-table .cart-cell-label{
	min-width: 0;
	overflow-wrap: anywhere;
}

/* « 7,50 € » ne doit jamais se couper entre le montant et le symbole. */
.cart-table .cart-cell-amount{
	white-space: nowrap;
}

/*
| En dessous de 768px, cinq colonnes ne tiennent pas : le tableau devient
| une pile de fiches, une par article. On évite ainsi le défilement
| horizontal, qui cache les boutons de quantité et de retrait.
*/
@media only screen and (max-width: 767px){

	.cart-table thead{
		display: none;
	}

	.cart-table,
	.cart-table tbody,
	.cart-table tr,
	.cart-table td{
		display: block;
		width: 100%;
	}

	.cart-table tr{
		border: 1px solid rgba(3, 34, 27, 0.12);
		border-radius: 10px;
		padding: 15px;
		margin-bottom: 15px;
		background: var(--white-color);
	}

	.cart-table td{
		border: 0;
		padding: 6px 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 15px;
		text-align: right;
	}

	/* Libellé de colonne repris devant la valeur, faute d'en-tête. */
	.cart-table td[data-label]::before{
		content: attr(data-label);
		font-family: var(--accent-font);
		font-weight: 600;
		color: var(--primary-color);
		text-align: left;
		flex: 0 0 auto;
	}

	/* Le nom et sa vignette occupent toute la largeur, en tête de fiche. */
	.cart-table .cart-cell-name{
		display: block;
		text-align: left;
		padding-bottom: 12px;
		margin-bottom: 6px;
		border-bottom: 1px solid rgba(3, 34, 27, 0.08);
	}

	.cart-table .cart-cell-remove{
		justify-content: flex-end;
	}

	/* Le champ de quantité peut enfin s'étaler. */
	.cart-table .js-cart-form input[type="number"]{
		width: 6rem !important;
	}

	/* La pile de fiches n'a plus rien à faire défiler. */
	.table-responsive:has(> .cart-table){
		overflow-x: visible;
	}
}


/*
|--------------------------------------------------------------------------
| Carte Google Maps chargée au clic
|--------------------------------------------------------------------------
| Le bloc occupe la place exacte de la carte : le contenu ne saute pas
| quand le visiteur la fait apparaître.
*/

.map-consent{
	height: 100%;
	min-height: 600px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 30px;
	background: rgba(3, 34, 27, 0.04);
	border: 1px dashed rgba(3, 34, 27, 0.25);
	border-radius: 12px;
}

.map-consent p{
	max-width: 520px;
	color: var(--primary-color);
}

@media only screen and (max-width: 767px){
	.map-consent{
		min-height: 450px;
		padding: 20px;
	}
}


/*
|--------------------------------------------------------------------------
| Widget de réservation en iframe
|--------------------------------------------------------------------------
| Sans hauteur de départ, le cadre s'affiche à la valeur par défaut du HTML
| — 150 px — le temps que la hauteur réelle lui parvienne.
|
| Ce min-height est un garde-fou de premier affichage, pas une hauteur de
| travail : le script de le-gite.php le remet à zéro dès la première mesure
| reçue, faute de quoi il ferait plancher et une étape courte laisserait
| une bande vide.
*/

.booking-frame{
	display: block;
	width: 100%;
	min-height: 750px;
	border: 0;
}

@media only screen and (max-width: 767px){
	.booking-frame{
		min-height: 900px;
	}
}


/*
|--------------------------------------------------------------------------
| Équipements et confort du gîte
|--------------------------------------------------------------------------
| Rendu par front/includes/equipements-bloc.php depuis le catalogue du
| backoffice.
|
| Une grille en auto-fill plutôt que deux colonnes fixes : le nombre de
| catégories dépend de ce que le client saisit, et la mise en page doit
| suivre sans qu'on y revienne. 240 px est la largeur en dessous de laquelle
| un libellé comme « Réfrigérateur, lave-vaisselle » passe à la ligne.
|
| La photo est une cellule de cette grille, pas un bloc à côté : elle ne
| mesure que 414 px de large en fichier, l'étaler sur toute la largeur du
| contenu la rendrait floue.
*/

.gite-equipements{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 24px 30px;
	/* Chaque cellule à sa hauteur propre : sans cela une catégorie d'un
	   seul équipement s'étirerait sur la hauteur de la plus fournie. */
	align-items: start;
	margin-top: 40px;
}

.gite-equipements-titre{
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(3, 34, 27, 0.12);
	font-family: var(--accent-font);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--primary-color);
}

.gite-equipements-titre i{
	flex-shrink: 0;
	font-size: 18px;
	color: var(--accent-secondary-color);
}

.gite-equipements-liste{
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
| Sélecteur volontairement doublé : le gabarit pose « .project-entry ul li »
| — deux classes plus un élément — qui dessine une flèche orange en image de
| fond et réserve 25 px de marge à gauche pour elle. Une classe simple perd
| ce duel de spécificité, et chaque équipement se retrouvait avec DEUX
| puces : la flèche du thème et notre icône.
*/
.gite-equipements .gite-equipements-liste li{
	display: flex;
	/* Un libellé sur deux lignes doit rester aligné sous lui-même, pas
	   revenir sous la coche : d'où le flex plutôt qu'une puce. */
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 4px 0;
	background: none;
	line-height: 1.5;
	color: var(--text-color);
}

.gite-equipements .gite-equipements-liste li i{
	flex-shrink: 0;
	/* Aligné sur la première ligne de texte, quelle que soit sa hauteur. */
	margin-top: 4px;
	font-size: 15px;
	color: var(--accent-color);
}

.gite-equipements .gite-equipements-liste li span{
	/* Sans cela, un libellé long ne peut pas descendre sous la largeur de
	   son mot le plus long et déborde de la colonne. */
	min-width: 0;
}

/* Mêmes arrondis que les autres photos de la page. */
.gite-equipements-photo figure{
	display: block;
	margin: 0;
	border-radius: 20px;
}

.gite-equipements-photo img{
	width: 100%;
	aspect-ratio: 1 / 0.9;
	object-fit: cover;
	border-radius: 20px;
}

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

	.gite-equipements{
		gap: 20px;
		margin-top: 30px;
	}

	.gite-equipements-titre{
		font-size: 16px;
	}
}