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

* Author        : Awaiken

* Template Name : Florax - Gardening and Landscape HTML Template

* File          : CSS File

* Version       : 1.0

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

/* INDEX

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

01. Global Variables

02. General css

03. Header css

04. Hero css

05. Customer Review css

06. About Us css

07. Our Services css

08. Our Expertise css

09. Intro Video css

10. Why choose Us css

11. How It Work css

12. Our Project css

13. Our Testimonials css

14. Our FAQs css

15. Our Pricing css

16. Our Blog Post 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. Page Project css

24. Project Single css

25. Page Pricing css

26. Page Team css

27. Page FAQs css

28. Contact us Page css

29. 404 Page css

30. responsive css

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









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

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

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



:root {

	--primary-color: #0B3D2C;

	--secondary-color: #F0FFF0;

	--text-color: #555555;

	--accent-color: #2A7D2E;

	--white-color: #FFFFFF;

	--divider-color: #E7ECEA;

	--dark-divider-color: #FFFFFF33;

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

	--default-font: "Plus Jakarta Sans", sans-serif;

}



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

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

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



body {

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

	font-size: 16px;

	font-weight: 400;

	line-height: 1.6em;

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

	color: var(--text-color);

}



p {

	line-height: 1.8em;

	margin-bottom: 1.6em;

}



h1,

h2,

h3,

h4,

h5,

h6 {

	margin: 0;

	font-weight: 700;

	line-height: 1.2em;

	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;

}



/* Visible focus ring for keyboard navigation (WCAG 2.4.7) */

a:focus-visible,

button:focus-visible,

input:focus-visible,

textarea:focus-visible,

select:focus-visible,

[tabindex]:focus-visible {

	outline: 3px solid #f9a825;

	outline-offset: 3px;

	border-radius: 3px;

}



html,

body {

	width: 100%;

	overflow-x: clip;

}



.container {

	max-width: 1300px;

}



.container,

.container-fluid,

.container-lg,

.container-md,

.container-sm,

.container-xl,

.container-xxl,

.mfp-container {

	padding-right: 15px;

	padding-left: 15px;

}



.image-anime {

	position: relative;

	overflow: hidden;

}



.image-anime:after {

	content: "";

	position: absolute;

	width: 200%;

	height: 0%;

	left: 50%;

	top: 50%;

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

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

	z-index: 1;

}



.image-anime:hover:after {

	height: 250%;

	transition: all 600ms linear;

	background-color: transparent;

}



.reveal {

	position: relative;

	display: -webkit-inline-box;

	display: -ms-inline-flexbox;

	display: inline-flex;

	visibility: hidden;

	overflow: hidden;

}



.reveal img {

	height: 100%;

	width: 100%;

	-o-object-fit: cover;

	object-fit: cover;

	-webkit-transform-origin: left;

	transform-origin: left;

}



.row {

	margin-right: -15px;

	margin-left: -15px;

}



.row>* {

	padding-right: 15px;

	padding-left: 15px;

}



.row.no-gutters {

	margin-right: 0px;

	margin-left: 0px;

}



.row.no-gutters>* {

	padding-right: 0px;

	padding-left: 0px;

}



.btn-default {

	display: inline-block;

	font-size: 16px;

	font-weight: 700;

	line-height: 1.2em;

	text-transform: capitalize;

	background: var(--accent-color);

	color: var(--white-color);

	border-radius: 100px;

	padding: 14px 35px 14px 25px;

	margin-right: 15px;

	border: none;

	transition: all 0.5s ease-in-out;

	position: relative;

	z-index: 1;

}



.btn-default::before {

	content: '';

	position: absolute;

	top: 50%;

	right: 0;

	width: 36px;

	height: 36px;

	border-radius: 50%;

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

	background-image: url('../images/arrow-green.svg');

	background-repeat: no-repeat;

	background-position: center center;

	background-size: 24px auto;

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

	transition: all 0.3s ease-in-out;

}



.btn-default:hover::before {

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

	right: -3px;

}



.btn-default.btn-highlighted {

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

	color: var(--primary-color);

}



.btn-default.btn-highlighted:before {

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

	background-image: url('../images/arrow-white.svg');

}



.btn-default.btn-highlighted:hover::before {

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

}



/* Partnership footer button: make inner <a> fill the full clickable area */

p.btn-default > a {

	display: block;

	color: inherit;

	text-decoration: none;

}



#magic-cursor {

	position: absolute;

	width: 10px !important;

	height: 10px !important;

	pointer-events: none;

	z-index: 1000000;

}



#ball {

	position: fixed;

	display: block;

	left: 0;

	top: 0;

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

	width: 8px !important;

	height: 8px !important;

	background: var(--accent-color);

	margin: 0;

	border-radius: 50%;

	pointer-events: none;

	opacity: 1 !important;

}



.preloader {

	position: fixed;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	z-index: 1000;

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

	display: flex;

	align-items: center;

	justify-content: center;

	animation: preloader-timeout 0.2s ease forwards 0.3s;

}



@keyframes preloader-timeout {

	to {

		opacity: 0;

		pointer-events: none;

		visibility: hidden;

	}

}



.loading-container,

.loading {

	height: 100px;

	position: relative;

	width: 100px;

	border-radius: 100%;

}



.loading-container {

	margin: 40px auto;

}



.loading {

	border: 1px solid transparent;

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

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

	transform-origin: 50% 50%;

}



.loading-container:hover .loading,

.loading-container .loading {

	transition: all 0.5s ease-in-out;

}



#loading-icon {

	position: absolute;

	top: 50%;

	left: 50%;

	max-width: 66px;

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

}



@keyframes rotate-loading {

	0% {

		transform: rotate(0deg);

	}



	100% {

		transform: rotate(360deg);

	}

}



.section-row {

	margin-bottom: 60px;

}



.section-row .section-title {

	margin-bottom: 0;

}



.section-title-content p {

	margin: 0;

}



.section-btn {

	text-align: end;

}



.section-title {

	position: relative;

	margin-bottom: 40px;

}



.section-bg-title {

	position: absolute;

	top: -40px;

	z-index: -1;

	pointer-events: none;

}



.section-title {

	isolation: isolate;

}



.section-bg-title span {

	display: inline-flex;

	align-items: center;

	text-transform: capitalize;

	font-size: 100px;

	line-height: 1em;

	font-weight: 800;

	color: var(--white-color);

	background: -webkit-linear-gradient(270deg, rgba(11, 61, 44, 0.1) 68.79%, rgba(11, 61, 44, 0.02) 91%);

	-webkit-background-clip: text;

	-webkit-text-stroke: 2px transparent;

}



.section-bg-title.dark-bg-1 span {

	color: var(--secondary-color);

	background: -webkit-linear-gradient(270deg, rgba(11, 61, 44, 0.08) 68.79%, rgba(11, 61, 44, 0.016) 91%);

	-webkit-background-clip: text;

}



.section-bg-title.dark-bg-2 span {

	color: var(--primary-color);

	background: -webkit-linear-gradient(270deg, rgba(255, 255, 255, 0.08) 68.79%, rgba(11, 61, 44, 0.016) 91%);

	-webkit-background-clip: text;

}



.section-title h3 {

	display: inline-block;

	position: relative;

	font-size: 16px;

	font-weight: 500;

	line-height: 1.2em;

	text-transform: capitalize;

	color: var(--accent-color);

	padding-left: 45px;

	margin-bottom: 20px;

}



.section-title h3::before {

	content: '';

	position: absolute;

	top: 50%;

	bottom: 0;

	left: 0;

	transform: translateY(-50%);

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

	background-position: left center;

	background-size: cover;

	width: 34px;

	height: 34px;

}



.section-title h1 {

	font-size: 60px;

	font-weight: 700;

	margin-bottom: 0;

}



.section-title h2 {

	font-size: 50px;

	font-weight: 700;

	margin-bottom: 0;

}



.section-title h1 span,

.section-title h2 span {

	font-weight: 400;

}



.section-title p {

	margin-top: 25px;

	margin-bottom: 0;

}



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

	z-index: 100;

}



header.main-header .header-sticky {

	position: relative;

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

	backdrop-filter: blur(3px);

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

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

}



.navbar {

	padding: 20px 0;

	align-items: center;

}



.navbar-brand {

	padding: 0;

	margin: 0;

}



.main-menu .nav-menu-wrapper {

	flex: 1;

	text-align: center;

}



.main-menu .nav-menu-wrapper>ul {

	align-items: center;

	display: inline-flex;

}



.main-menu ul li {

	margin: 0 4px;

	position: relative;

}



.main-menu ul li a {

	font-size: 16px;

	font-weight: 600;

	padding: 14px !important;

	color: var(--white-color);

	text-transform: capitalize;

	transition: all 0.3s ease-in-out;

}



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

	content: '';

	display: inline-block;

	width: 0;

	height: 0;

	border-left: 4px solid transparent;

	border-right: 4px solid transparent;

	border-top: 5px solid currentColor;

	margin-left: 8px;

	vertical-align: middle;

	transition: transform 0.2s ease;

}



.main-menu ul li a:hover,

.main-menu ul li a:focus,

.main-menu ul li a.active,

.main-menu .nav-link.active {

	color: var(--white-color);

}



.main-menu ul ul {

	visibility: hidden;

	opacity: 0;

	transform: scaleY(0.8);

	transform-origin: top;

	padding: 0;

	margin: 0;

	list-style: none;

	width: 220px;

	border-radius: 20px;

	position: absolute;

	left: 0;

	top: 100%;

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

	transition: all 0.3s ease-in-out;

	text-align: left;

}



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

	content: '';

	display: inline-block;

	width: 0;

	height: 0;

	border-top: 4px solid transparent;

	border-bottom: 4px solid transparent;

	border-left: 5px solid currentColor;

	float: right;

	margin-top: 6px;

}



.main-menu ul li.submenu:first-child ul ul {

	width: 250px;

}



.main-menu ul ul ul {

	left: 100%;

	top: 0;

	text-align: left;

}



.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 li:hover>ul {

	visibility: visible;

	opacity: 1;

	transform: scaleY(1);

	padding: 5px 0;

}



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

}



.contact-now-box {

	display: flex;

	align-items: center;

}



.contact-now-box .icon-box {

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

	border-radius: 16px;

	width: 50px;

	height: 50px;

	display: flex;

	align-items: center;

	justify-content: center;

	margin-right: 20px;

	transition: all 0.3s ease-in-out;

}



.contact-now-box:hover .icon-box {

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

}



.contact-now-box .icon-box img {

	max-width: 25px;

}



.contact-now-box-content {

	width: calc(100% - 70px);

}



.contact-now-box-content p {

	color: var(--white-color);

	text-transform: capitalize;

	margin-bottom: 5px;

}



.contact-now-box-content h3 {

	font-size: 18px;

	color: var(--white-color);

}



.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: 10px;

}



.slicknav_icon .slicknav_icon-bar {

	display: block;

	width: 100%;

	height: 3px;

	width: 22px;

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

}



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

}



.slicknav_menu {

	position: absolute;

	width: 100%;

	padding: 0;

	background: var(--accent-color);

	border-radius: 0;

}



.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: 10px 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: 10px 20px 10px 30px;

}



.slicknav_arrow {

	font-size: 0 !important;

}



.slicknav_arrow:after {

	content: '';

	display: inline-block;

	width: 0;

	height: 0;

	border-left: 4px solid transparent;

	border-right: 4px solid transparent;

	border-top: 5px solid var(--white-color);

	margin-left: 8px;

	position: absolute;

	right: 18px;

	top: 18px;

	transition: all 0.3s ease-out;

}



.slicknav_open>a .slicknav_arrow:after {

	transform: rotate(-180deg);

	color: var(--primary-color);

}



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

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

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



.hero {

	position: relative;

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

	/* Keeps the green background if image fails */

	background-repeat: no-repeat;

	background-position: center center;

	background-size: cover;

	padding: 250px 0 150px;

	margin-top: -100px;

}



.hero::before {

	content: '';

	position: absolute;

	top: 0;

	right: 0;

	bottom: 0;

	left: 0;

	background: linear-gradient(270.08deg, rgba(11, 61, 44, 0) 30.53%, rgba(11, 61, 44, 0.8) 76.6%);

	width: 100%;

	height: 100%;

}



.hero-video .hero-bg-video {

	position: absolute;

	top: 0;

	right: 0;

	left: 0;

	bottom: 0;

	width: 100%;

	height: 100%;

}



.hero-video .hero-bg-video::before {

	content: '';

	position: absolute;

	top: 0;

	right: 0;

	bottom: 0;

	left: 0;

	background: linear-gradient(270.08deg, rgba(11, 61, 44, 0) 30.53%, rgba(11, 61, 44, 0.8) 76.6%);

	width: 100%;

	height: 100%;

	z-index: 1;

}



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

	width: 100%;

	height: 100%;

	object-fit: cover;

}



.hero.hero-slider {

	background: none;

	padding: 0;

}



.hero-slider-layout .hero-slide {

	position: relative;

	padding: 250px 0 150px;

}



.hero.hero-slider:before {

	display: none;

}



.hero.hero-slider .hero-slider-layout {

	position: relative;

	z-index: 1;

}



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

	content: '';

	position: absolute;

	top: 0;

	bottom: 0;

	right: 0;

	left: 0;

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

	opacity: 60%;

	width: 100%;

	height: 100%;

	z-index: 1;

}



.hero.hero-slider .hero-slider-layout .hero-slide .hero-slider-image {

	position: absolute;

	top: 0;

	right: 0;

	left: 0;

	bottom: 0;

}



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

	width: 100%;

	height: 100%;

	object-fit: cover;

}



.hero.hero-slider .hero-slider-layout .hero-slide .hero-content {

	position: relative;

	z-index: 2;

	margin: 0 auto;

}



.hero-slider-layout .hero-pagination {

	position: absolute;

	z-index: 5;

	bottom: 50px;

	padding-left: calc(((100vw - 1300px) / 2));

}



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

	width: 12px;

	height: 12px;

	background: var(--white-color);

	opacity: 1;

	transition: all 0.3s ease-in-out;

	margin: 0 5px;

}



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

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

}



.hero-content {

	position: relative;

	z-index: 1;

	padding-right: 85px;

}



.hero-content .section-title h3::before {

	filter: brightness(0) invert(1);

}



.hero-content .section-title p,

.hero-content .section-title h1 span,

.hero-content .section-title h1,

.hero-content .section-title h3 {

	color: var(--white-color);

}



.hero-content .section-title p {

	font-size: 18px;

}



.hero-content-body .btn-default.btn-highlighted {

	margin-left: 40px;

}



/* Hero trust bar */

.hero-trust-bar {

	display: flex;

	align-items: center;

	gap: 10px;

	margin-top: 24px;

	margin-bottom: 0;

}



.hero-trust-stars {

	color: #f9a825;

	font-size: 16px;

	letter-spacing: 2px;

}



.hero-trust-text {

	color: rgba(255,255,255,0.90);

	font-size: 14px;

	font-weight: 600;

}



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

/***    05. Customer Review css	  ***/

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



.customer-review {

	position: relative;

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

	padding: 50px 0;

}



.happy-customer-counter {

	display: flex;

	flex-wrap: wrap;

	gap: 40px;

	align-items: center;

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

	padding-right: 15px;

}



.happy-customer-counter h2 {

	width: calc(60% - 20px);

	font-size: 70px;

}



.happy-customer-counter p {

	width: calc(40% - 20px);

	font-size: 18px;

	font-weight: 500;

	text-transform: capitalize;

	color: var(--primary-color);

	margin-bottom: 0;

}



.customer-review-content p {

	margin: 0;

}



.customer-consultation-box {

	position: absolute;

	bottom: 0;

	width: 400px;

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

	border-radius: 40px 40px 0 0;

	padding: 40px;

	z-index: 2;

}



.customer-consultation-title {

	margin-bottom: 30px;

}



.customer-consultation-title h3 {

	font-size: 22px;

	text-transform: capitalize;

	color: var(--white-color);

}



.customer-consultation-image {

	margin-bottom: 30px;

}



.customer-consultation-body {

	margin-bottom: 30px;

}



.customer-consultation-body p {

	color: var(--white-color);

	margin: 0;

}



.learn-more-btn {

	position: relative;

	font-weight: 700;

	text-transform: capitalize;

	color: var(--white-color);

	padding-right: 35px;

	transition: all 0.3s ease-in-out;

}



.learn-more-btn:hover {

	color: var(--accent-color);

}



.learn-more-btn::after {

	content: '';

	position: absolute;

	top: 0;

	bottom: 0;

	right: 0;

	background: var(--white-color) url('../images/arrow-green.svg') no-repeat;

	background-position: center center;

	background-size: 16px auto;

	border-radius: 50%;

	width: 22px;

	height: 22px;

	transition: all 0.3s ease-in-out;

}



.learn-more-btn:hover::after {

	background: var(--accent-color) url('../images/arrow-green.svg') no-repeat;

	background-position: center center;

	background-size: 16px auto;

	right: -2px;

}



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

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

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



.about-us {

	padding: 100px 0;

}



.about-image {

	position: relative;

	background: url('../images/about-image-bg.svg') no-repeat;

	background-position: left bottom 90px;

	background-size: auto;

	display: flex;

	justify-content: end;

	padding-top: 90px;

}



.about-img-1 {

	position: relative;

	width: 100%;

	max-width: 390px;

	text-align: right;

	z-index: 1;

}



.about-img-1 figure {

	border-radius: 400px;

}



.about-img-1 img {

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

	aspect-ratio: 1 / 1.49;

	object-fit: cover;

	border-radius: 400px;

}



.about-img-2 {

	position: absolute;

	top: 0;

	left: 0;

	z-index: 0;

}



.about-img-2 figure,

.about-img-2 img {

	border-radius: 200px;

}



.company-experience {

	position: absolute;

	top: 0;

	right: 0;

	display: flex;

	align-items: center;

}



.company-experience-counter {

	width: 45%;

}



.company-experience-counter h2 {

	font-size: 50px;

}



.company-experience-content {

	width: 55%;

}



.company-experience-content p {

	font-weight: 500;

	line-height: 1.2em;

	text-transform: capitalize;

	color: var(--primary-color);

	margin: 0;

}



.about-us-content {



	margin-left: 25px;

}



.about-us-body {

	margin-bottom: 40px;

}



.about-us-body ul {

	list-style: none;

	padding: 0;

	margin: 0;

	display: flex;

	flex-wrap: wrap;

	gap: 20px;

}



.about-us-body ul li {

	position: relative;

	width: calc(50% - 10px);

	font-weight: 600;

	color: var(--primary-color);

	text-transform: capitalize;

	padding-left: 30px;

}



.about-us-body ul li:before {

	content: '\f058';

	font-family: 'Font Awesome 6 Free';

	font-weight: 900;

	font-size: 20px;

	color: var(--accent-color);

	display: inline-block;

	line-height: normal;

	position: absolute;

	top: 3px;

	left: 0;

}



.about-us-footer {

	display: flex;

	align-items: center;

	flex-wrap: wrap;

	gap: 30px;

}



.about-company-founder {

	width: calc(50% - 15px);

	display: flex;

	align-items: center;

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

	padding-right: 15px;

}



.company-founder-image {

	margin-right: 15px;

}



.company-founder-image img {

	max-width: 60px;

	border-radius: 15px;

}



.company-founder-content {

	width: calc(100% - 75px);

}



.company-founder-content h3 {

	font-size: 20px;

	font-weight: 600;

	text-transform: capitalize;

	margin-bottom: 5px;

}



.company-founder-content p {

	text-transform: capitalize;

	margin: 0;

}



.contact-now-box.about-contact-box {

	width: calc(50% - 15px);

}



.contact-now-box.contact-now-box .icon-box {

	width: 60px;

	height: 60px;

}



.contact-now-box.contact-now-box .icon-box img {

	max-width: 30px;

}



.contact-now-box.about-contact-box .contact-now-box-content p {

	color: var(--text-color);

}



.contact-now-box.about-contact-box .contact-now-box-content h3 {

	color: var(--primary-color);

}



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

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

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



.our-services {

	position: relative;

	background: var(--secondary-color);

	padding: 100px 0 120px;

	margin-top: 130px;

}



.our-services::before {

	content: '';

	position: absolute;

	top: -130px;

	right: 0;

	left: 0;

	background: url('../images/service-top-bg.svg') no-repeat;

	background-position: top center;

	background-size: cover;

	width: 100%;

	height: 132px;

}



.our-services::after {

	content: '';

	position: absolute;

	bottom: -4px;

	right: 0;

	left: 0;

	background: url('../images/service-bottom-bg.svg') no-repeat;

	background-position: bottom center;

	background-size: cover;

	width: 100%;

	height: 132px;

}



.service-item {

	position: relative;

	height: calc(100% - 30px);

	margin-bottom: 30px;

	overflow: hidden;

}



.service-image {

	border-radius: 40px;

	overflow: hidden;

}



.service-image a {

	position: relative;

	display: block;

}



.service-image a::after {

	content: '';

	position: absolute;

	top: 0;

	bottom: 0;

	right: 0;

	left: 0;

	background: linear-gradient(0deg, rgba(0, 0, 0, 0) 67.85%, rgba(0, 0, 0, 0.6) 100%);

	width: 100%;

	height: 100%;

	border-radius: 40px;

	z-index: 2;

	transition: all 0.3s ease-in-out;

}



.service-item:hover .service-image a::after {

	background: var(--primary-color);

	opacity: 80%;

}



.service-image img {

	aspect-ratio: 1 / 1.19;

	object-fit: cover;

	border-radius: 40px;

	transition: all 0.5s ease-in-out;

}



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

	transform: scale(1.1);

}



.service-title {

	position: absolute;

	top: 30px;

	left: 30px;

	right: 10px;

	z-index: 4;

}



.service-title h3 {

	font-size: 20px;

	font-weight: 500;

	text-transform: capitalize;

	color: var(--white-color);

}



.service-body {

	position: absolute;

	bottom: 30px;

	left: 30px;

	right: 10px;

	transform: translateY(100%);

	opacity: 0;

	z-index: 4;

	transition: all 0.5s ease-in-out;

}



.service-item:hover .service-body {

	bottom: 30px;

	transform: translateY(0%);

	opacity: 1;

}



.service-content {

	margin-bottom: 20px;

}



.service-content p {

	color: var(--white-color);

	margin: 0;

}



.readmore-btn {

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

	border-radius: 50%;

	width: 50px;

	height: 50px;

	display: flex;

	align-items: center;

	justify-content: center;

	transition: all 0.3s ease-in-out;

}



.readmore-btn:hover {

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

}



.readmore-btn img {

	max-width: 30px;

	transition: all 0.3s ease-in-out;

}



.readmore-btn:hover img {

	filter: brightness(0) invert(1);

}



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

/***     08. Our Expertise css	  ***/

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



.our-expertise {

	padding: 100px 0;

}



.expertise-content .section-title {

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

	padding-bottom: 40px;

}



.expertise-body {

	display: flex;

	flex-wrap: wrap;

	align-items: center;

	gap: 20px;

}



.expertise-item {

	width: calc(33.33% - 13.33px);

	display: flex;

	align-items: center;

}



.expertise-item .icon-box {

	position: relative;

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

	border-radius: 10px;

	width: 60px;

	height: 60px;

	display: flex;

	align-items: center;

	justify-content: center;

	overflow: hidden;

	margin-right: 10px;

}



.expertise-item .icon-box::before {

	content: '';

	display: block;

	position: absolute;

	top: 0;

	left: 0;

	background: var(--accent-color);

	border-radius: 10px;

	width: 100%;

	height: 100%;

	transform: scale(0);

	transition: all 0.4s ease-in-out;

}



.expertise-item:hover .icon-box:before {

	transform: scale(1);

}



.expertise-item .icon-box img {

	position: relative;

	max-width: 34px;

	z-index: 1;

	transition: all 0.4s ease-in-out;

}



.expertise-item:hover .icon-box img {

	filter: brightness(0) invert(1);

}



.expertise-item-content {

	width: calc(100% - 70px);

}



.expertise-item-content h3 {

	font-size: 24px;

	margin-bottom: 5px;

}



.expertise-item-content p {

	text-transform: capitalize;

	font-weight: 500;

	color: var(--primary-color);

	margin: 0;

}



.expertise-images {

	display: flex;

	flex-wrap: wrap;

	align-items: start;

	gap: 30px;

}



.expertise-image-box-2,

.expertise-image-box-1 {

	width: calc(50% - 15px);

	display: flex;

	flex-wrap: wrap;

	gap: 30px;

}



.expertise-image-box-1 {

	background: url('../images/expertise-image-bg-1.svg') no-repeat;

	background-position: top left;

	background-size: auto;

	padding-top: 65px;

}



.expertise-image-box-2 {

	background: url('../images/expertise-image-bg-2.svg') no-repeat;

	background-position: bottom right;

	background-size: auto;

	padding-bottom: 65px;

}



.expertise-img-4,

.expertise-img-3,

.expertise-img-2,

.expertise-img-1 {

	width: 100%;

}



.expertise-img-4 figure,

.expertise-img-3 figure,

.expertise-img-2 figure,

.expertise-img-1 figure {

	width: 100%;

}



.expertise-img-4 img,

.expertise-img-3 img,

.expertise-img-2 img,

.expertise-img-1 img {

	width: 100%;

	border-radius: 40px;

}



.expertise-img-1 img {

	aspect-ratio: 1 / 0.98;

	object-fit: cover;

}



.expertise-img-2 img {

	aspect-ratio: 1 / 0.68;

	object-fit: cover;

}



.expertise-img-3 img {

	aspect-ratio: 1 / 1;

	object-fit: cover;

}



.expertise-img-4 img {

	aspect-ratio: 1 / 1.33;

	object-fit: cover;

}



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

/***     09. Intro Video css      ***/

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



.intro-video {

	position: relative;

	background: url('../images/intro-video-bg.jpg') no-repeat;

	background-position: center center;

	background-size: cover;

	padding: 100px 0;

}



.intro-video::before {

	content: '';

	position: absolute;

	top: 0;

	bottom: 0;

	left: 0;

	right: 0;

	width: 100%;

	height: 100%;

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

	opacity: 50%;

	z-index: 0;

}



.intro-video-box {

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

	padding-bottom: 80px;

	margin-bottom: 80px;

}



.intro-video .section-title {

	margin-bottom: 0;

}



.intro-video .section-title h2 {

	color: var(--white-color);

}



.video-play-box {

	display: flex;

	justify-content: end;

}



.video-play-content {

	position: relative;

	text-align: right;

	display: inline-block;

	z-index: 1;

}



.video-play-button {

	position: relative;

	margin-bottom: 30px;

	z-index: 1;

}



.video-play-button a {

	position: relative;

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

	border-radius: 100%;

	width: 74px;

	height: 74px;

	margin: 0 auto;

	display: flex;

	align-items: center;

	justify-content: center;

	cursor: none;

}



.video-play-button a:before {

	content: '';

	position: absolute;

	top: -30%;

	left: -30%;

	width: 160%;

	height: 160%;

	border: 50px solid var(--divider-color);

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

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

}



.specialize-item {

	position: relative;

	display: flex;

	align-items: center;

	z-index: 1;

}



.specialize-item .icon-box {

	margin-right: 25px;

}



.specialize-item .icon-box img {

	max-width: 74px;

}



.specialize-content {

	width: calc(100% - 99px);

}



.specialize-content p {

	color: var(--white-color);

	margin: 0;

}



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

/***    10. Why choose Us css     ***/

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



.why-choose-us {

	position: relative;

	background: url('../images/section-bg-leaf.svg') no-repeat;

	background-position: right bottom;

	background-size: auto;

	padding: 100px 0;

	max-width: 100%;

	height: auto;

}



.why-choose-us::before {

	content: '';

	position: absolute;

	bottom: 0;

	left: 0;

	top: -6px;

	transform: translateY(50%);

	background: var(--secondary-color) url('../images/why-choose-image-bg.svg') no-repeat;

	background-position: left -130px top -80px;

	background-size: contain;

	border-radius: 0 999px 999px 0;

	width: 50%;

	height: 514px;

}



.why-choose-image {

	position: relative;

	text-align: left;

}



.why-choose-image img {

	position: relative;

	z-index: 2;

}



.why-choose-content {

	margin-left: 20px;

}



.why-choose-body {

	display: flex;

	flex-wrap: wrap;

	gap: 30px;

}



.why-choose-item {

	width: calc(50% - 15px);

}



.why-choose-item .icon-box {

	position: relative;

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

	border-radius: 10px;

	width: 60px;

	height: 60px;

	display: flex;

	align-items: center;

	justify-content: center;

	overflow: hidden;

	margin-bottom: 25px;

}



.why-choose-item .icon-box::before {

	content: '';

	display: block;

	position: absolute;

	top: 0;

	left: 0;

	background: var(--accent-color);

	border-radius: 10px;

	width: 100%;

	height: 100%;

	transform: scale(0);

	transition: all 0.4s ease-in-out;

}



.why-choose-item:hover .icon-box:before {

	transform: scale(1);

}



.why-choose-item .icon-box img {

	position: relative;

	max-width: 34px;

	z-index: 1;

	transition: all 0.4s ease-in-out;

}



.why-choose-item:hover .icon-box img {

	filter: brightness(0) invert(1);

}



.why-choose-item-content h3 {

	font-size: 20px;

	font-weight: 600;

	text-transform: capitalize;

	margin-bottom: 15px;

}



.why-choose-item-content p {

	margin: 0;

}



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

/***     11. How It Work css      ***/

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



.how-it-work {

	position: relative;

	background: var(--primary-color) url('../images/how-it-work-bg-1.svg') no-repeat;

	background-position: left top;

	background-size: contain;

	padding: 100px 0;

}



.how-it-work::before {

	content: '';

	position: absolute;

	top: 0;

	bottom: 0;

	left: 0;

	right: 0;

	background: url('../images/how-it-work-bg-2.svg') no-repeat;

	background-position: right bottom;

	background-size: contain;

}



.how-it-work .section-title p,

.how-it-work .section-title h2 span,

.how-it-work .section-title h2 {

	color: var(--white-color);

}



.how-work-circle-img {

	text-align: right;

}



.how-work-circle-img img {

	animation: workrotate 30s infinite linear;

}



@keyframes workrotate {

	from {

		transform: rotate(0deg);

	}



	to {

		transform: rotate(360deg);

	}

}



.how-work-process-box {

	position: relative;

	display: flex;

	flex-wrap: wrap;

	gap: 30px;

	z-index: 1;

}



.how-work-item {

	width: calc(25% - 22.5px);

}



.work-process-no {

	position: relative;

	margin-bottom: 30px;

}



.work-process-no::before {

	content: '';

	position: absolute;

	top: 50%;

	bottom: 0;

	left: 50px;

	right: 0;

	transform: translateY(-50%);

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

	width: 255px;

	height: 2px;

}



.how-work-item:last-child .work-process-no::before {

	display: none;

}



.work-process-no h3 {

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

	border-radius: 50%;

	font-size: 18px;

	color: var(--white-color);

	width: 34px;

	height: 34px;

	display: flex;

	align-items: center;

	justify-content: center;

	transition: all 0.3s ease-in-out;

}



.how-work-item:hover .work-process-no h3 {

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

	color: var(--accent-color);

}



.work-process-content h3 {

	font-size: 20px;

	font-weight: 600;

	text-transform: capitalize;

	color: var(--white-color);

	margin-bottom: 20px;

}



.work-process-content p {

	color: var(--white-color);

	margin: 0;

}



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

/***      12. Our Project css	  ***/

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



.our-work {

	position: relative;

	background: url('../images/section-bg-leaf.svg') no-repeat;

	background-position: right bottom;

	background-size: auto;

	padding: 100px 0 70px;

}



.our-work::before {

	content: '';

	position: absolute;

	top: 0;

	bottom: 0;

	right: 0;

	left: 0;

	background-position: left top;

	background-size: auto;

	width: 320px;

	height: 320px;

}



.our-work-nav {

	margin-bottom: 60px;

}



.our-work-nav ul {

	list-style: none;

	text-align: center;

	padding: 0;

	margin: 0;

}



.our-work-nav ul li {

	display: inline-block;

}



.our-work-nav ul li:last-child {

	margin-right: 0;

}



.our-work-nav ul li a {

	position: relative;

	display: inline-block;

	background-color: transparent;

	color: var(--text-color);

	font-weight: 600;

	text-transform: capitalize;

	transition: all 0.3s ease-in-out;

	padding: 0 30px;

	overflow: hidden;

}



.our-work-nav ul li a::before {

	content: '/';

	position: absolute;

	right: 0;

	top: 0;

	transition: all 0.3s ease-in-out;

	height: 100%;

	z-index: 0;

	color: var(--divider-color);

}



.our-work-nav ul li:last-child a::before {

	display: none;

}



.our-work-nav ul li a.active-btn,

.our-work-nav ul li a:hover {

	color: var(--accent-color);

}



.work-item-box .work-item {

	height: calc(100% - 30px);

	margin-bottom: 30px;

}



.work-item {

	position: relative;

	overflow: hidden;

	cursor: none;

}



.work-image {

	overflow: hidden;

}



.work-image a {

	position: relative;

	cursor: none;

	display: block;

}



.work-image a::before {

	content: '';

	position: absolute;

	top: 0;

	bottom: 0;

	right: 0;

	left: 0;

	background: var(--primary-color);

	opacity: 0;

	visibility: hidden;

	width: 100%;

	height: 100%;

	border-radius: 40px;

	z-index: 1;

	transition: all 0.5s ease-in-out;

}



.work-item:hover .work-image a::before {

	opacity: 80%;

	visibility: visible;

}



.work-image img {

	width: 100%;

	border-radius: 40px;

	aspect-ratio: 1 / 0.87;

	object-fit: cover;

	box-shadow: 0px 0px 100px 0px #0000000D;

}



.work-body {

	position: absolute;

	bottom: 50%;

	right: 40px;

	left: 40px;

	text-align: center;

	border-radius: 10px;

	transform: translateY(100%);

	opacity: 0;

	visibility: hidden;

	z-index: 1;

	transition: all 0.5s ease-in-out;

}



.work-item:hover .work-body {

	transform: translateY(50%);

	opacity: 1;

	visibility: visible;

}



.work-content {

	text-align: center;

	margin-bottom: 20px;

}



.work-content h3 {

	font-size: 20px;

	font-weight: 600;

	color: var(--white-color);

	text-transform: capitalize;

	margin-bottom: 20px;

}



.work-content p {

	color: var(--white-color);

	text-transform: capitalize;

	margin: 0;

}



.work-readmore-btn a {

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

	width: 40px;

	height: 40px;

	margin: 0 auto;

	border-radius: 50%;

	display: flex;

	align-items: center;

	justify-content: center;

}



.work-readmore-btn a img {

	max-width: 24px;

}



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

/***   13. Our Testimonials css	  ***/

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



.our-testimonials {

	background: linear-gradient(270deg, var(--primary-color)34%, transparent 34%), url('../images/testimonials-bg.webp');

	background-repeat: no-repeat;

	background-position: left center;

	background-size: cover;

	padding: 0px 0 200px;

}



.our-testimonials .row {

	justify-content: end;

}



.testimonial-slider .swiper-wrapper {

	cursor: none;

}



.testimonial-box {

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

	border-radius: 0 0 40px 40px;

	padding: 70px 50px 50px;

}



.testimonial-header {

	background: url('../images/icon-blockquote.svg') no-repeat;

	background-position: right center;

	background-size: auto;

	display: flex;

	align-items: center;

	margin-bottom: 20px;

}



.author-image {

	margin-right: 15px;

}



.author-image figure,

.author-image img {

	width: 60px;

	height: 60px;

	border-radius: 15px;

}



.author-content {

	width: calc(100% - 75px);

}



.author-content h3 {

	font-size: 20px;

	font-weight: 600;

	text-transform: capitalize;

}



.author-content p {

	text-transform: capitalize;

	margin: 0;

}



.testimonial-content p {

	margin: 0;

}



.testimonial-btn {

	display: flex;

	align-items: center;

	justify-content: left;

	margin-top: 40px;

}



.testimonial-btn .testimonial-button-next,

.testimonial-btn .testimonial-button-prev {

	position: relative;

	width: 40px;

	height: 40px;

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

	border-radius: 10px;

	transition: all 0.4s ease-in-out;

}



.testimonial-btn .testimonial-button-next {

	margin-left: 20px;

}





.testimonial-btn .testimonial-button-next:hover,

.testimonial-btn .testimonial-button-prev:hover {

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

}



.testimonial-btn .testimonial-button-next::before,

.testimonial-btn .testimonial-button-prev::before {

	content: '';

	position: absolute;

	top: 0;

	bottom: 0;

	left: 0;

	right: 0;

	background: url("../images/arrow-white.svg") no-repeat center center;

	background-size: 24px auto;

	display: flex;

	align-items: center;

	justify-content: center;

	transition: all 0.4s ease-in-out;

}



.testimonial-btn .testimonial-button-prev::before {

	transform: rotate(180deg);

}



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

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

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



.our-faqs {

	background: url('../images/section-bg-leaf-3.svg') no-repeat;

	background-position: left top;

	background-size: auto;

	padding: 100px 0;

}



.our-faqs-content {

	margin-right: 20px;

}



.our-faqs-cta {

	display: inline-block;

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

	border-radius: 40px;

	max-width: 500px;

	padding: 30px 50px;

}



.faqs-cta-box {

	display: flex;

	align-items: center;

	margin-bottom: 40px;

}



.faqs-cta-box .icon-box {

	position: relative;

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

	border-radius: 50%;

	width: 66px;

	height: 66px;

	display: flex;

	align-items: center;

	justify-content: center;

	overflow: hidden;

	margin-right: 14px;

	transition: all 0.3s ease-in-out;

}



.faqs-cta-box .icon-box::before {

	content: '';

	display: block;

	position: absolute;

	width: 100%;

	height: 100%;

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

	top: 0;

	left: 0;

	transform: scale(0);

	transition: all 0.4s ease-in-out;

	border-radius: 50%;

}



.our-faqs-cta:hover .faqs-cta-box .icon-box:before {

	transform: scale(1);

}



.faqs-cta-box .icon-box img {

	position: relative;

	max-width: 34px;

	z-index: 1;

}



.faqs-cta-content {

	width: calc(100% - 80px);

}



.faqs-cta-content h3 {

	font-size: 20px;

	font-weight: 600;

	text-transform: capitalize;

	margin-bottom: 10px;

}



.faqs-cta-content p {

	margin: 0;

}



.faqs-cta-btn .btn-default {

	width: 100%;

	text-align: center;

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

	padding: 17px 24px 17px 24px;

	margin-right: 0;

}



.faqs-cta-btn .btn-default:hover {

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

}



.faqs-cta-btn .btn-default::before {

	display: none;

}



.our-faq-section .accordion-item {

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

	border-radius: 20px;

	margin-bottom: 30px;

	padding: 0;

	transition: all 0.3s ease-in-out;

	overflow: hidden;

}



.our-faq-section .accordion-item:last-child {

	margin-bottom: 0;

}



.our-faq-section .accordion-header .accordion-button {

	font-size: 20px;

	font-weight: 600;

	line-height: 1.2em;

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

	color: var(--white-color);

	padding: 20px 50px 20px 20px;

	transition: all 0.3s ease-in-out;

}



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

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

	color: var(--white-color);

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

}



.our-faq-section .accordion-header .accordion-button.collapsed {

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

	color: var(--primary-color);

}



.our-faq-section .accordion-item .accordion-button::after,

.our-faq-section .accordion-item .accordion-button.collapsed::after {

	content: '\f068';

	font-family: "Font Awesome 6 Free";

	position: absolute;

	right: 20px;

	top: 50%;

	bottom: auto;

	transform: translate(0px, -10px);

	display: flex;

	align-items: center;

	justify-content: center;

	font-weight: 900;

	font-size: 20px;

	width: 20px;

	height: 20px;

	padding: 5px;

	color: var(--white-color);

}



.our-faq-section .accordion-item .accordion-button.collapsed::after {

	content: '\f067';

	color: var(--primary-color);

}



.our-faq-section .accordion-item .accordion-body {

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

	padding: 20px 50px 20px 20px;

}



.our-faq-section .accordion-item .accordion-body p {

	color: var(--white-color);

	margin: 0;

}



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

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

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



.our-pricing {

	position: relative;

	background: var(--secondary-color);

	padding: 100px 0 150px;

	margin-top: 130px;

}



.our-pricing::before {

	content: '';

	position: absolute;

	top: -130px;

	right: 0;

	left: 0;

	background: url(../images/pricing-top-bg.svg) no-repeat;

	background-position: top center;

	background-size: cover;

	width: 100%;

	height: 132px;

}



.our-pricing::after {

	content: '';

	position: absolute;

	bottom: -4px;

	right: 0;

	left: 0;

	background: url(../images/pricing-bottom-bg.svg) no-repeat;

	background-position: bottom center;

	background-size: cover;

	width: 100%;

	height: 132px;

}



.pricing-item {

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

	border-radius: 40px;

	height: calc(100% - 30px);

	margin-bottom: 30px;

	padding: 40px;

}



.pricing-header {

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

	padding-bottom: 30px;

	margin-bottom: 30px;

}



.pricing-header h3 {

	font-size: 16px;

	font-weight: 600;

	text-transform: capitalize;

	margin-bottom: 20px;

}



.pricing-header h2 {

	font-size: 50px;

	color: var(--accent-color);

}



.pricing-header h2 sub {

	font-size: 16px;

	font-weight: 400;

	color: var(--text-color);

	text-transform: capitalize;

	bottom: 0;

}



.pricing-body {

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

	padding-bottom: 30px;

	margin-bottom: 30px;

}



.pricing-body ul {

	list-style: none;

	padding: 0;

	margin: 0;

}



.pricing-body ul li {

	position: relative;

	margin-bottom: 15px;

	padding-left: 40px;

}



.pricing-body ul li::before {

	content: '';

	position: absolute;

	top: 0;

	left: 0;

	background: url('../images/icon-pricing-list.svg') no-repeat;

	background-position: left center;

	background-size: 24px auto;

	width: 24px;

	height: 24px;

}



.pricing-body ul li:last-child {

	margin-bottom: 0;

}



.pricing-footer .btn-default::before {

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

	background-image: url('../images/arrow-white.svg');

}



.pricing-item.highlighted-box {

	background: var(--primary-color) url('../images/pricing.highlighted-box-bg.svg') no-repeat;

	background-position: center center;

	background-size: auto;

	overflow: hidden;

}



.pricing-item.highlighted-box .pricing-body ul li,

.pricing-item.highlighted-box .pricing-header h2 sub,

.pricing-item.highlighted-box .pricing-header h2,

.pricing-item.highlighted-box .pricing-header h3 {

	color: var(--white-color);

}



.pricing-item.highlighted-box .pricing-body,

.pricing-item.highlighted-box .pricing-header {

	border-color: var(--dark-divider-color);

}



.pricing-item.highlighted-box .pricing-body ul li::before {

	filter: brightness(0) invert(1);

}



.pricing-footer .btn-default.btn-highlighted::before {

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

}



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

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

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



.our-blog {

	padding: 100px 0;

}



.highlighted-article-featured-img {

	position: relative;

	border-radius: 40px;

	overflow: hidden;

	margin-bottom: 40px;

}



.highlighted-article-featured-img a {

	display: block;

	cursor: none;

}



.highlighted-article-featured-img img {

	width: 100%;

	aspect-ratio: 1/ 0.74;

	object-fit: cover;

	border-radius: 40px;

	transition: all 0.5s ease-in-out;

}



.highlighted-article-post:hover .highlighted-article-featured-img img {

	transform: scale(1.1);

}



.highlighted-article-tag {

	position: absolute;

	top: 30px;

	left: 30px;

	z-index: 1;

}



.highlighted-article-tag a {

	display: inline-block;

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

	color: var(--primary-color);

	border-radius: 5px;

	font-weight: 600;

	padding: 10px 20px;

	transition: all 0.3s ease-in-out;

	text-transform: capitalize;

	cursor: pointer;

}



.highlighted-article-tag:hover a {

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

	color: var(--white-color);

}



.article-meta {

	margin-bottom: 20px;

}



.article-meta ul {

	list-style: none;

	padding: 0;

	margin: 0;

}



.article-meta ul li {

	display: inline-block;

	color: var(--text-color);

	text-transform: capitalize;

	margin-right: 15px;

}



.article-meta ul li:last-child {

	margin-right: 0;

}



.article-meta ul li a {

	color: inherit;

}



.article-meta ul li i {

	font-size: 16px;

	color: var(--text-color);

	margin-right: 10px;

}



.article-meta ul li i.fa-tag {

	transform: rotate(90deg);

}



.article-content {

	margin-bottom: 40px;

}



.article-content h2 {

	font-size: 20px;

	font-weight: 600;

	margin-bottom: 20px;

}



.article-content h2 a {

	color: inherit;

}



.article-content p {

	margin: 0;

}



.article-btn .btn-default::before {

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

	background-image: url(../images/arrow-white.svg);

}



.article-post {

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

	margin-bottom: 30px;

	padding-bottom: 30px;

}



.article-post:last-child {

	border: none;

	padding-bottom: 0;

	margin-bottom: 0;

}



.article-post .article-tag {

	margin-bottom: 25px;

}



.article-post .article-tag a {

	display: inline-block;

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

	color: var(--white-color);

	border-radius: 5px;

	font-weight: 600;

	padding: 10px 20px;

	transition: all 0.3s ease-in-out;

	text-transform: capitalize;

	cursor: pointer;

}



.article-post:hover .article-tag a {

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

}



.article-post .article-content {

	margin-bottom: 0;

}



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

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

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



.main-footer {

	position: relative;

	background-repeat: no-repeat;

	background-position: center center;

	background-size: cover;

	padding: 100px 0 0;

	margin-top: 130px;

}



.main-footer::after {

	content: '';

	position: absolute;

	top: -130px;

	right: 0;

	left: 0;

	background: url(../images/footer-top-bg.svg) no-repeat;

	background-position: top center;

	background-size: cover;

	width: 100%;

	height: 132px;

}



.footer-logo {

	margin-bottom: 25px;

}



.footer-logo img {

	max-width: 180px;

	height: auto;

}



.about-footer-content {

	margin-bottom: 25px;

}



.about-footer-content p {

	color: var(--white-color);

	margin: 0;

}



.footer-social-links ul {

	list-style: none;

	padding: 0;

	margin: 0;

}



.footer-social-links ul li {

	display: inline-flex;

	margin-right: 20px;

}



.footer-social-links ul li:last-child {

	margin-right: 0;

}



.footer-social-links ul li a {

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

	border-radius: 10px;

	width: 34px;

	height: 34px;

	display: flex;

	align-items: center;

	justify-content: center;

	transition: all 0.3s ease-in-out;

}



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

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

}



.footer-social-links ul li a i {

	color: var(--accent-color);

	font-size: 18px;

	transition: all 0.3s ease-in-out;

}



.footer-social-links ul li:hover a i {

	color: var(--white-color);

}



.footer-links h3,

.working-hour h3 {

	font-size: 20px;

	text-transform: capitalize;

	color: var(--white-color);

	margin-bottom: 25px;

}



.footer-links {

	margin-left: 30px;

}



.footer-links ul {

	list-style: none;

	margin: 0;

	padding: 0;

}



.footer-links ul li {

	text-transform: capitalize;

	margin-bottom: 10px;

}



.footer-links ul li:last-child {

	margin-bottom: 0;

}



.footer-links ul li a {

	color: var(--white-color);

	transition: all 0.3s ease-in-out;

}



.footer-links ul li:hover a {

	color: var(--accent-color);

}



.working-hour-box {

	margin-bottom: 10px;

}



.working-hour-box:last-child {

	margin-bottom: 0;

}



.working-hour-box p {

	text-transform: capitalize;

	color: var(--white-color);

	margin: 0;

}



.footer-info-box {

	margin-bottom: 25px;

}



.footer-info-box:last-child {

	margin-bottom: 0;

}



.footer-info-box h3 {

	font-size: 20px;

	font-weight: 600;

	text-transform: capitalize;

	color: var(--white-color);

	margin-bottom: 25px;

}



.footer-info-box p {

	color: var(--white-color);

	margin: 0;

}



.footer-copyright {

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

	padding: 40px 0;

	margin-top: 60px;

}



.footer-copyright-text p {

	color: var(--white-color);

	margin: 0;

}



.footer-copyright .footer-links p {

	margin-top: 12px;

	text-align: right;

}



@media (max-width: 767px) {

	.hero-desc {

		display: none;

	}

	.footer-copyright .footer-links p {

		text-align: center;

	}

	.footer-copyright .footer-links {

		text-align: center;

	}

}



.footer-privacy-policy ul {

	list-style: none;

	margin: 0;

	padding: 0;

	text-align: end;

}



.footer-privacy-policy ul li {

	display: inline-block;

	margin-right: 40px;

}



.footer-privacy-policy ul li:last-child {

	margin-right: 0;

}



.footer-privacy-policy ul li a {

	color: var(--white-color);

	text-transform: capitalize;

	transition: all 0.3s ease-in-out;

}



.footer-privacy-policy ul li:hover a {

	color: var(--accent-color);

}



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

/***     18. About us Page css	  ***/

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



.page-header {

	position: relative;

	background: url('../images/page-header-bg.jpg') no-repeat;

	background-position: center center;

	background-size: cover;

	padding: 225px 0 125px;

	margin-top: -100px;

}



.page-header.about-banner {

	background: url('../images/handshake.avif') no-repeat;

	background-position: center center;

	background-size: cover;

}



.page-header::before {

	content: '';

	position: absolute;

	top: 0;

	right: 0;

	bottom: 0;

	left: 0;

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

	opacity: 20%;

	width: 100%;

	height: 100%;

}



.page-header-box {

	position: relative;

	text-align: left;

	z-index: 1;

}



.page-header-box h1 {

	display: inline-block;

	font-size: 60px;

	font-weight: 700;

	color: var(--white-color);

	margin-bottom: 5px;

}



.page-header-box h1 span {

	font-weight: 400;

}



.page-header-box ol {

	margin: 0;

	padding: 0;

}



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

	font-size: 16px;

	font-weight: 500;

	color: var(--white-color);

	text-transform: capitalize;

}



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

	color: var(--secondary-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-vision-mission {

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

	padding: 100px 0;

}



.vision-mission-box {

	margin-bottom: 80px;

}



.vision-mission-box:nth-child(even) {

	flex-direction: row-reverse;

}



.vision-mission-box:last-child {

	margin-bottom: 0;

}



.our-mission-image figure,

.our-vision-image figure {

	display: block;

}



.our-mission-image img,

.our-vision-image img {

	aspect-ratio: 1 / 0.72;

	object-fit: cover;

	border-radius: 40px;

}



.our-mission-content .section-title,

.our-vision-content .section-title {

	margin-bottom: 0;

}



.our-counter {

	padding: 100px 0;

}



.our-counter .container-fluid {

	padding: 0;

}



.our-counter-box {

	display: flex;

	align-items: center;

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

	margin-left: calc(((100vw - 1300px) / 2));

	border-radius: 180px 0 0 180px;

	height: 100%;

}



.counter-content-box {

	width: 60%;

	height: 100%;

	display: flex;

	flex-wrap: wrap;

	gap: 80px;

	padding: 65px 115px;

}



.counter-item {

	position: relative;

	width: calc(33.33% - 53.33px);

}



.counter-item::before {

	content: '';

	position: absolute;

	right: 0;

	top: 50%;

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

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

	width: 1px;

	height: 147px;

}



.counter-item:nth-child(3n + 3):before {

	border: none;

}



.counter-item .icon-box {

	position: relative;

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

	border-radius: 10px;

	width: 60px;

	height: 60px;

	display: flex;

	align-items: center;

	justify-content: center;

	overflow: hidden;

	margin-bottom: 25px;

	transition: all 0.5s ease-in-out;

}



.counter-item:hover .icon-box {

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

}



.counter-item .icon-box::before {

	content: '';

	display: block;

	position: absolute;

	top: 0;

	left: 0;

	background: var(--accent-color);

	border-radius: 10px;

	width: 100%;

	height: 100%;

	transform: scale(0);

	transition: all 0.4s ease-in-out;

}



.counter-item:hover .icon-box:before {

	transform: scale(1);

}



.counter-item .icon-box img {

	position: relative;

	max-width: 34px;

	z-index: 1;

	transition: all 0.4s ease-in-out;

}



.counter-item:hover .icon-box img {

	filter: brightness(0) invert(1);

}



.counter-item-content h2 {

	font-size: 44px;

	color: var(--white-color);

	margin-bottom: 10px;

}



.counter-item-content p {

	color: var(--white-color);

	text-transform: capitalize;

	margin: 0;

}



.counter-image {

	width: 40%;

	height: 100%;

	text-align: right;

}



.counter-image figure,

.counter-image img {

	height: 100%;

	object-fit: cover;

	border-radius: 180px 0 0 180px;

}



.our-team {

	background: linear-gradient(180deg, var(--primary-color) 60%, var(--white-color) 40%);

	padding: 100px 0 20px;

}



.our-team .section-row .section-title-content p,

.our-team .section-row .section-title h2 {

	color: var(--white-color);

}



.team-member-item {

	position: relative;

	height: calc(100% - 30px);

	margin-bottom: 30px;

	overflow: hidden;

	z-index: 1;

}



.team-image {

	border-radius: 40px;

	overflow: hidden;

}



.team-image figure::before {

	content: '';

	position: absolute;

	top: 0;

	bottom: 0;

	left: 0;

	right: 0;

	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 52.88%, #000000 100%);

	width: 100%;

	height: 100%;

	z-index: 1;

}



.team-image img {

	width: 100%;

	aspect-ratio: 1 / 1.4;

	object-fit: cover;

	border-radius: 40px;

	transition: all 0.5s ease-in-out;

}



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

	transform: scale(1.1);

}



.team-body {

	position: absolute;

	bottom: 50px;

	left: 30px;

	transform: translateY(100%);

	z-index: 2;

	transition: all 0.5s ease-in-out;

}



.team-member-item:hover .team-body {

	bottom: 30px;

	transform: translateY(0);

}



.team-body-title {

	margin-bottom: 10px;

}



.team-body-title h3 {

	font-size: 20px;

	font-weight: 600;

	text-transform: capitalize;

	color: var(--white-color);

}



.team-body-content {

	opacity: 0;

	visibility: hidden;

	transition: all 0.5s ease-in-out;

}



.team-member-item:hover .team-body-content {

	opacity: 1;

	visibility: visible;

}



.team-body-content p {

	color: var(--white-color);

	text-transform: capitalize;

	margin-bottom: 15px;

}



.team-social-icon ul {

	list-style: none;

	padding: 0;

	margin: 0;

}



.team-social-icon ul li {

	display: inline-block;

	text-align: center;

	margin-right: 10px;

}



.team-social-icon ul li:last-child {

	margin-right: 0;

}



.team-social-icon ul li a {

	display: block;

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

	border-radius: 10px;

	width: 34px;

	height: 34px;

	display: flex;

	align-items: center;

	justify-content: center;

	transition: all 0.3s ease-in-out;

}



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

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

}



.team-social-icon ul li a i {

	color: var(--accent-color);

	font-size: 18px;

	transition: all 0.3s ease-in-out;

}



.team-social-icon ul li a:hover i {

	color: var(--white-color);

}



.why-choose-us.about-why-choose {

	padding: 50px 0 100px;

}



.why-choose-us.about-why-choose .why-choose-image {

	margin-top: 50px;

}



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

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

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



.page-services {

	padding: 100px 0 20px;

}



.our-counter.page-service-counter {

	padding: 50px 0;

}



.our-faqs.page-service-faqs {

	padding: 50px 0 100px;

}



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

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

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



.page-service-single {

	padding: 100px 0;

}



.service-sidebar {

	position: sticky;

	top: 20px;

	margin-right: 30px;

}



.service-catagery-list {

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

	border-radius: 30px;

	padding: 30px;

	margin-bottom: 50px;

}



.service-catagery-list h3 {

	font-size: 20px;

	font-weight: 600;

	text-transform: capitalize;

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

	color: var(--white-color);

	border-radius: 15px;

	padding: 15px;

	margin-bottom: 25px;

}



.service-catagery-list ul {

	list-style: none;

	margin: 0;

	padding: 0;

}



.service-catagery-list ul li {

	margin-bottom: 20px;

}



.service-catagery-list ul li:last-child {

	border: none;

	margin-bottom: 0;

	padding-bottom: 0;

}



.service-catagery-list ul li a {

	display: block;

	position: relative;

	font-weight: 500;

	text-transform: capitalize;

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

	color: var(--text-color);

	border-radius: 15px;

	padding: 15px;

	transition: all 0.3s ease-in-out;

}



.service-catagery-list ul li:hover a {

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

	color: var(--white-color);

}



.service-catagery-list ul li a::after {

	content: '';

	display: block;

	position: absolute;

	top: 50%;

	right: 0px;

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

	background-image: url('../images/arrow-green.svg');

	background-repeat: no-repeat;

	background-position: center center;

	background-size: 30px auto;

	width: 30px;

	height: 30px;

	transition: all 0.3s ease-in-out;

}



.service-catagery-list ul li:hover a::after {

	filter: brightness(0) invert(1);

}



.sidebar-cta-box {

	position: relative;

	padding: 0 10px 10px 0;

}



.cta-contact-image {

	border-radius: 30px 30px 0 0;

	overflow: hidden;

}



.cta-contact-image img {

	width: 100%;

	aspect-ratio: 1 / 0.87;

	object-fit: cover;

	border-radius: 30px 30px 0 0;

	transition: all 0.4s ease-in-out;

}



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

	transform: scale(1.1);

}



.cta-contact-body {

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

	border-radius: 0 0 30px 30px;

	padding: 30px;

}



.cta-contact-content {

	width: 100%;

	max-width: 246px;

}



.cta-contact-content h2 {

	font-size: 28px;

	color: var(--white-color);

}



.cta-contact-content h2 span {

	font-weight: 400;

}



.cta-icon-box {

	position: absolute;

	bottom: 0;

	right: 0;

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

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

	border-radius: 50%;

	width: 78px;

	height: 78px;

	display: flex;

	align-items: center;

	justify-content: center;

}



.cta-icon-box img {

	max-width: 34px;

}



.service-single-slider {

	margin-bottom: 40px;

}



.service-slider-image {

	border-radius: 30px;

	overflow: hidden;

}



.service-slider-image img {

	border-radius: 30px;

	overflow: hidden;

	aspect-ratio: 1 / 0.6;

	object-fit: cover;

}



.service-single-btn {

	position: absolute;

	bottom: 0;

	top: 0;

	left: 40px;

	right: 40px;

	display: flex;

	align-items: center;

	justify-content: space-between;

	z-index: 1;

}



.service-single-btn .service-single-button-next,

.service-single-btn .service-single-button-prev {

	position: relative;

	width: 40px;

	height: 40px;

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

	border-radius: 50%;

	transition: all 0.4s ease-in-out;

}



.service-single-btn .service-single-button-next:hover,

.service-single-btn .service-single-button-prev:hover {

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

}



.service-single-btn .service-single-button-next::before,

.service-single-btn .service-single-button-prev::before {

	content: '';

	position: absolute;

	top: 0;

	bottom: 0;

	left: 0;

	right: 0;

	background: url("../images/arrow-white.svg") no-repeat center center;

	background-size: 24px auto;

	display: flex;

	align-items: center;

	justify-content: center;

	transition: all 0.4s ease-in-out;

}



.service-single-btn .service-single-button-prev::before {

	transform: rotate(180deg);

}



.service-entry {

	margin-bottom: 80px;

}



.service-entry h2 {

	font-size: 36px;

	margin-bottom: 25px;

}



.service-entry h3 {

	font-size: 20px;

	margin-bottom: 25px;

}



.service-entry p {

	margin-bottom: 25px;

}



.service-entry p:last-child {

	margin-bottom: 0px;

}



.service-entry ul {

	list-style: none;

	margin: 0;

	padding: 0;

	display: flex;

	flex-wrap: wrap;

	gap: 20px;

	margin-bottom: 30px;

}



.service-entry ul li {

	position: relative;

	width: calc(50% - 10px);

	color: var(--primary-color);

	font-size: 18px;

	font-weight: 500;

	text-transform: capitalize;

	padding-left: 35px;

}



.service-entry ul li:before {

	content: '';

	position: absolute;

	top: 0;

	left: 0;

	background: url(../images/icon-pricing-list.svg) no-repeat;

	background-position: left center;

	background-size: 24px auto;

	width: 24px;

	height: 24px;

}



.service-entry-img-1 figure,

.service-entry-img-2 figure {

	display: block;

}



.service-entry-img-1 img,

.service-entry-img-2 img {

	aspect-ratio: 1 / 0.71;

	object-fit: cover;

	border-radius: 30px;

}



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

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

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



.page-blog {

	padding: 100px 0 60px;

}



.post-item {

	height: calc(100% - 50px);

	margin-bottom: 50px;

}



.post-featured-image {

	position: relative;

	border-radius: 40px;

	overflow: hidden;

	margin-bottom: 30px;

}



.post-featured-image a {

	display: block;

	cursor: none;

}



.post-featured-image img {

	width: 100%;

	aspect-ratio: 1 / 0.7;

	object-fit: cover;

	border-radius: 40px;

	transition: all 0.5s ease-in-out;

}



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

	transform: scale(1.1);

}



.post-item .article-content h2 {

	margin: 0;

}



.post-item .article-meta {

	margin-bottom: 20px;

}



.post-item .article-content {

	margin-bottom: 20px;

}



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

	color: var(--white-color);

}



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

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

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



.page-single-post {

	padding: 100px 0;

}



.post-single-meta {

	margin-top: 10px;

}



.post-single-meta ol li.breadcrumb-item {

	font-size: 18px;

}



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

}



.post-image figure,

.post-image img {

	aspect-ratio: 1 / 0.50;

	object-fit: cover;

	border-radius: 40px;

}



.post-content {

	width: 100%;

	max-width: 1100px;

	margin: 0 auto;

}



.post-entry {

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

	padding-bottom: 30px;

	margin-bottom: 30px;

}



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

	margin: 0 0 0.6em;

}



.post-entry h1 span,

.post-entry h2 span {

	font-weight: 400;

}



.post-entry h1 {

	font-size: 60px;

}



.post-entry h2 {

	font-size: 36px;

}



.post-entry h3 {

	font-size: 40px;

}



.post-entry h4 {

	font-size: 30px;

}



.post-entry h5 {

	font-size: 24px;

}



.post-entry h6 {

	font-size: 18px;

}



.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 ol li {

	margin-bottom: 20px;

	font-size: 18px;

	font-weight: 600;

	color: var(--text-color);

}



.post-entry ul {

	padding: 0;

	margin: 20px 0 20px;

	padding-left: 20px;

}



.post-entry ul li {

	font-size: 18px;

	font-weight: 500;

	color: var(--primary-color);

	position: relative;

	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: var(--secondary-color) url(../images/icon-blockquote.svg) no-repeat 35px 40px;

	background-size: 45px;

	border-radius: 40px;

	padding: 30px 30px 30px 100px;

	margin-bottom: 30px;

}



.post-entry blockquote p {

	color: var(--primary-color);

	font-size: 20px;

	font-weight: 600;

	line-height: 1.4em;

}



.post-entry blockquote p:last-child {

	margin-bottom: 0;

}



.tag-links {

	font-size: 22px;

	font-weight: 600;

	color: var(--primary-color);

	display: inline-block;

}



.post-tags .tag-links a {

	display: inline-block;

	font-size: 16px;

	font-weight: 500;

	text-transform: capitalize;

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

	color: var(--white-color);

	border-radius: 10px;

	padding: 8px 20px;

	margin-left: 10px;

	margin-bottom: 10px;

	transition: all 0.3s ease-in-out;

}



.post-tags .tag-links a:hover {

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

	color: var(--white-color);

	border-radius: 10px;

	width: 38px;

	height: 38px;

	transition: all 0.3s ease-in-out;

}



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

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

}



.post-social-sharing ul li a i {

	font-size: 18px;

	color: inherit;

	transition: all 0.3s ease-in-out;

}



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

	color: var(--secondry-color);

}



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

/***     23. Page Project css	  ***/

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



.page-work {

	padding: 100px 0 70px;

}



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

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

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



.page-project-single {

	padding: 100px 0;

}



.project-sidebar {

	position: sticky;

	top: 20px;

	margin-right: 30px;

}



.project-sidebar-details {

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

	border-radius: 30px;

	padding: 30px;

	margin-bottom: 50px;

}



.project-details-item {

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

	margin-bottom: 20px;

	padding-bottom: 20px;

}



.project-details-item h3 {

	font-size: 20px;

	font-weight: 600;

	text-transform: capitalize;

	margin-bottom: 5px;

}



.project-details-item p {

	text-transform: capitalize;

	margin: 0;

}



.project-social-list h3 {

	font-size: 20px;

	font-weight: 600;

	text-transform: capitalize;

	margin-bottom: 10px;

}



.project-social-list ul {

	list-style: none;

	padding: 0;

	margin: 0;

}



.project-social-list ul li {

	display: inline-flex;

	margin-right: 15px;

}



.project-social-list ul li:last-child {

	margin-right: 0;

}



.project-social-list ul li a {

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

	border-radius: 10px;

	width: 34px;

	height: 34px;

	display: flex;

	align-items: center;

	justify-content: center;

	transition: all 0.3s ease-in-out;

}



.project-social-list ul li:hover a {

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

}



.project-social-list ul li a i {

	color: var(--white-color);

	font-size: 18px;

	transition: all 0.3s ease-in-out;

}



.project-single-image {

	margin-bottom: 40px;

}



.project-single-image figure {

	display: block;

}



.project-single-image img {

	border-radius: 40px;

}



.project-entry {

	margin-bottom: 80px;

}



.project-entry h2 {

	font-size: 36px;

	margin-bottom: 25px;

}



.project-entry h3 {

	font-size: 20px;

	margin-bottom: 25px;

}



.project-entry p {

	margin-bottom: 25px;

}



.project-entry p:last-child {

	margin-bottom: 0px;

}



.project-entry ul {

	list-style: none;

	margin: 0;

	padding: 0;

	display: flex;

	flex-wrap: wrap;

	gap: 20px;

	margin-bottom: 30px;

}



.project-entry ul li {

	position: relative;

	width: calc(50% - 10px);

	color: var(--primary-color);

	font-size: 18px;

	font-weight: 500;

	text-transform: capitalize;

	padding-left: 35px;

}



.project-entry ul li:before {

	content: '';

	position: absolute;

	top: 0;

	left: 0;

	background: url(../images/icon-pricing-list.svg) no-repeat;

	background-position: left center;

	background-size: 24px auto;

	width: 24px;

	height: 24px;

}



.project-gallery a {

	cursor: none;

}



.project-gallery figure {

	border-radius: 10px;

}



.project-gallery img {

	aspect-ratio: 1 / 1;

	object-fit: cover;

	border-radius: 10px;

}



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

/***     25. Page Pricing css	  ***/

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



.page-pricing {

	padding: 100px 0 70px;

}



.page-pricing .pricing-item {

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

}



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

/***      26. Page Team css 	  ***/

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



.page-team {

	padding: 100px 0 70px;

}



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

/***       27. Page FAQs css	  ***/

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



.page-faqs {

	padding: 100px 0;

}



.faq-sidebar {

	position: sticky;

	top: 20px;

	margin-right: 30px;

}



.faq-catagery-list {

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

	border-radius: 30px;

	padding: 30px;

}



.faq-catagery-list ul {

	list-style: none;

	margin: 0;

	padding: 0;

}



.faq-catagery-list ul li {

	margin-bottom: 15px;

}



.faq-catagery-list ul li:last-child {

	margin-bottom: 0;

}



.faq-catagery-list ul li a {

	display: block;

	position: relative;

	font-weight: 500;

	text-transform: capitalize;

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

	color: var(--text-color);

	border-radius: 15px;

	padding: 15px;

	transition: all 0.3s ease-in-out;

}



.faq-catagery-list ul li:hover a {

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

	color: var(--white-color);

}



.faq-catagery-list ul li a::after {

	content: '';

	display: block;

	position: absolute;

	top: 50%;

	right: 0px;

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

	background-image: url('../images/arrow-green.svg');

	background-repeat: no-repeat;

	background-position: center center;

	background-size: 30px auto;

	width: 30px;

	height: 30px;

	transition: all 0.3s ease-in-out;

}



.faq-catagery-list ul li:hover a::after {

	filter: brightness(0) invert(1);

}



.page-faqs .our-faq-section {

	margin-bottom: 60px;

}



.page-faqs .our-faq-section:last-child {

	margin-bottom: 0;

}



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

/***    28. Contact us Page css	  ***/

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



.page-contact-us {

	padding: 100px 0 50px;

}



.contact-us-form {

	background: var(--primary-color) url('../images/contact-form-bg.svg');

	background-repeat: no-repeat;

	background-position: bottom center;

	background-size: contain;

	border-radius: 40px;

	height: 100%;

	padding: 70px 40px;

}



.contact-us-form .section-title p,

.contact-us-form .section-title h2 {

	color: var(--white-color);

}



.contact-us-form .form-control {

	padding: 15px;

	font-size: 16px;

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

	border: none;

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

	border-radius: 15px;

	color: var(--primary-color);

	box-shadow: none;

	outline: none;

}



.contact-us-form .form-control::placeholder {

	color: var(--primary-color);

	text-transform: capitalize;

}



.contact-form-btn .btn-default.btn-highlighted {

	width: 100%;

	margin-right: 0;

}



.contact-form-btn .btn-default.btn-highlighted:hover {

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

	color: var(--white-color);

}



.contact-form-btn .btn-default.btn-highlighted:before {

	display: none;

}



.contact-info-image {

	margin-bottom: 30px;

}



.contact-info-image figure {

	display: block;

}



.contact-info-image img {

	aspect-ratio: 1 / 0.7;

	object-fit: cover;

	border-radius: 40px;

}



.contact-info-list {

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

	border-radius: 40px;

	padding: 40px;

}



.contact-info-item {

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

	border-radius: 20px;

	display: flex;

	align-items: center;

	margin-bottom: 25px;

	padding: 20px;

}



.contact-info-item:last-child {

	margin-bottom: 0;

}



.contact-info-item .icon-box {

	margin-right: 20px;

}



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

	max-width: 34px;

}



.contact-info-content {

	width: calc(100% - 54px);

}



.contact-info-content p {

	text-transform: capitalize;

	margin-bottom: 5px;

}



.contact-info-content h3 {

	font-size: 20px;

	font-weight: 600;

}



.google-map {

	padding: 50px 0 100px;

}



.google-map-iframe {

	width: 100%;

	height: 700px;

	border-radius: 40px;

	overflow: hidden;

}



.google-map-iframe iframe {

	width: 100%;

	height: 700px;

	border-radius: 40px;

	filter: grayscale(100%);

	transition: all 0.3s ease-in-out;

}



.google-map-iframe iframe:hover {

	filter: grayscale(0);

}



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

/***       29. 404 Page css       ***/

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



.error-page {

	padding: 100px 0;

}



.error-page-image {

	text-align: center;

	margin-bottom: 60px;

}



.error-page .error-page-content {

	text-align: center;

}



.error-page-content-heading {

	margin-bottom: 30px;

}



.error-page-content-heading h2 {

	font-size: 50px;

}



.error-page-content-heading h2 span {

	font-weight: 400;

}



.error-page-content-body .btn-default::before {

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

	background-image: url('../images/arrow-white.svg');

}



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

/***     30. responsive css       ***/

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

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

/*** 30. responsive css      ***/

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



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



	/* Hide the desktop navigation */

	.nav-menu-wrapper,

	.contact-now-box {

		display: none !important;

	}



	/* Show the mobile menu toggle */

	.navbar-toggle {

		display: block !important;

	}



	/* Adjust header padding for mobile */

	.navbar {

		padding: 15px 0;

	}



	/* Reset section titles and font sizes for mobile */

	.section-title h1 {

		font-size: 36px;

	}



	.section-title h2 {

		font-size: 30px;

	}



	/* Ensure the mobile menu container is visible */

	.responsive-menu {

		display: block !important;

	}

}



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



	.our-counter {

		padding-left: 15px;

	}

}



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



	.navbar {

		padding: 20px 0px;

	}



	.main-menu ul li {

		margin: 0;

	}



	.our-counter-box {

		margin-left: 0;

	}

}



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



	.slicknav_nav li,

	.slicknav_nav ul {

		display: block;

	}



	.responsive-menu,

	.navbar-toggle {

		display: block;

	}



	.section-row {

		margin-bottom: 40px;

	}



	.section-btn {

		margin-top: 15px;

		text-align: left;

	}



	.section-title-content p {

		margin: 0;

		margin-top: 15px;

	}



	.section-title {

		margin-bottom: 30px;

	}



	.section-bg-title {

		top: -10px;

	}



	.section-bg-title span {

		font-size: 80px;

	}



	.section-title h3 {

		padding-left: 30px;

		margin-bottom: 10px;

	}



	.section-title h3::before {

		background-size: contain;

		width: 26px;

		height: 26px;

	}



	.section-title h1 {

		font-size: 46px;

	}



	.section-title h2 {

		font-size: 40px;

	}



	.section-title p {

		margin-top: 15px;

		margin-bottom: 0;

	}



	.hero {

		padding: 150px 0;

	}



	.hero-slider-layout .hero-slide {

		padding: 150px 0;

	}



	.hero-slider-layout .hero-pagination {

		text-align: left;

		left: 15px;

	}



	.hero-content {

		padding-right: 0px;

	}



	.hero-content .section-title p {

		font-size: 16px;

	}



	.customer-review {

		padding: 25px 0;

	}



	.happy-customer-counter {

		margin-bottom: 30px;

		border-right: none;

	}



	.happy-customer-counter h2 {

		width: calc(50% - 20px);

		font-size: 50px;

	}



	.happy-customer-counter p {

		width: calc(50% - 20px);

	}



	.customer-consultation-box {

		right: 0;

		padding: 30px;

	}



	.customer-consultation-body,

	.customer-consultation-image,

	.customer-consultation-title {

		margin-bottom: 20px;

	}



	.customer-consultation-title h3 {

		font-size: 20px;

	}



	.about-us {

		padding: 50px 0;

	}



	.about-image {

		max-width: 600px;

		margin: 0 auto;

		margin-bottom: 30px;

	}



	.about-us-content {

		margin-left: 0px;

	}



	.about-us-body {

		margin-bottom: 30px;

	}



	.our-services {

		padding: 50px 0 100px;

		margin-top: 100px;

	}



	.our-services::before {

		top: -98px;

		height: 100px;

	}



	.our-services::after {

		height: 100px;

	}



	.readmore-btn {

		width: 40px;

		height: 40px;

	}



	.readmore-btn img {

		max-width: 25px;

	}



	.our-expertise {

		padding: 50px 0;

	}



	.expertise-content {

		margin-bottom: 30px;

	}



	.expertise-content .section-title {

		padding-bottom: 30px;

	}



	.expertise-item-content h3 {

		font-size: 22px;

		margin-bottom: 5px;

	}



	.intro-video {

		padding: 50px 0;

	}



	.intro-video-box {

		padding-bottom: 50px;

		margin-bottom: 50px;

	}



	.intro-video .section-title {

		margin-bottom: 30px;

	}



	.video-play-box {

		display: flex;

		justify-content: center;

	}



	.why-choose-us {

		padding: 50px 0;

	}



	.why-choose-image {

		text-align: center;

	}



	.why-choose-image img {

		max-width: 55%;

	}



	.why-choose-us::before {

		top: auto;

		transform: translateY(-50px);

		background-position: left -100px top -60px;

		width: 100%;

		height: 450px;

	}



	.why-choose-content {

		margin-left: 0px;

		margin-bottom: 30px;

	}



	.how-it-work {

		padding: 50px 0;

	}



	.work-process-no {

		margin-bottom: 20px;

	}



	.work-process-no::before {

		width: 140px;

	}



	.work-process-content h3 {

		font-size: 18px;

		margin-bottom: 15px;

	}



	.work-process-content p {

		font-size: 14px;

	}



	.our-work {

		padding: 50px 0 20px;

	}



	.our-work-nav {

		margin-bottom: 40px;

	}



	.our-work-nav ul li a {

		padding: 0 20px;

	}



	.work-body {

		right: 20px;

		left: 20px;

	}



	.work-content h3 {

		font-size: 18px;

		margin-bottom: 15px;

	}



	.work-content {

		margin-bottom: 15px;

	}



	/* Default (Mobile First): No image, just the base colors/gradient */

	.our-testimonials {

		background: linear-gradient(0deg, var(--primary-color) 55%, transparent 55%);

		background-color: #f8f9fa;

		/* Added a light fallback color for the top transparent section just in case */

		padding: 0px 0 50px;

	}



	/* Desktop: Adds the high-quality image on screens wider than 768px */

	@media (min-width: 768px) {

		.our-testimonials {

			background: linear-gradient(0deg, var(--primary-color) 55%, transparent 55%), url(../images/testimonials-bg.webp);

		}

	}



	.our-testimonials .row {

		justify-content: center;

	}



	.testimonial-box {

		padding: 50px 30px 30px;

	}



	.testimonial-btn {

		margin-top: 30px;

	}



	.our-faqs {

		padding: 50px 0;

	}



	.our-faqs-content {

		margin-right: 0px;

		margin-bottom: 30px;

	}



	.our-faqs-cta {

		padding: 20px 30px;

		margin: 0 auto;

	}



	.faqs-cta-box {

		margin-bottom: 30px;

	}



	.our-faq-section .accordion-header .accordion-button {

		padding: 15px 45px 15px 15px;

	}



	.our-faq-section .accordion-item .accordion-body {

		padding: 15px 45px 15px 15px;

	}



	.our-faq-section .accordion-item .accordion-button::after,

	.our-faq-section .accordion-item .accordion-button.collapsed::after {

		right: 15px;

	}



	.our-pricing {

		padding: 50px 0 100px;

		margin-top: 100px;

	}



	.our-pricing::before {

		top: -98px;

		height: 100px;

	}



	.our-pricing::after {

		height: 100px;

	}



	.pricing-item {

		padding: 30px;

	}



	.pricing-header {

		padding-bottom: 20px;

		margin-bottom: 20px;

	}



	.pricing-header h3 {

		margin-bottom: 15px;

	}



	.pricing-header h2 {

		font-size: 40px;

	}



	.pricing-body {

		padding-bottom: 20px;

		margin-bottom: 20px;

	}



	.our-blog {

		padding: 50px 0;

	}



	.highlighted-article-post {

		margin-bottom: 40px;

	}



	.highlighted-article-featured-img {

		margin-bottom: 30px;

	}



	.highlighted-article-featured-img img {

		aspect-ratio: 1 / 0.64;

	}



	.highlighted-article-tag a {

		padding: 8px 15px;

	}



	.article-meta {

		margin-bottom: 15px;

	}



	.article-content {

		margin-bottom: 30px;

	}



	.article-content h2 {

		margin-bottom: 15px;

	}



	.article-post {

		margin-bottom: 20px;

		padding-bottom: 20px;

	}



	.article-post .article-tag a {

		padding: 8px 15px;

	}



	.article-post .article-tag {

		margin-bottom: 20px;

	}



	.main-footer {

		padding: 50px 0 0;

		margin-top: 100px;

	}



	.main-footer::after {

		top: -98px;

		height: 100px;

	}



	.about-footer {

		margin-bottom: 40px;

	}



	.about-footer-content,

	.footer-logo {

		margin-bottom: 20px;

	}



	.footer-links {

		margin-left: 0px;

	}



	.footer-info-box h3,

	.footer-links h3,

	.working-hour h3 {

		margin-bottom: 20px;

	}



	.footer-copyright {

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

		padding: 20px 0;

		margin-top: 40px;

	}



	.page-header {

		padding: 180px 0 80px;

	}



	.page-header-box h1 {

		font-size: 46px;

	}



	.our-vision-mission {

		padding: 50px 0;

	}



	.vision-mission-box {

		margin-bottom: 50px;

	}



	.our-mission-image,

	.our-vision-image {

		margin-bottom: 30px;

	}



	.our-mission-image img,

	.our-vision-image img {

		aspect-ratio: 1 / 0.62;

	}



	.our-counter {

		padding: 50px 0 50px 15px;

	}



	.counter-content-box {

		gap: 20px;

		padding: 40px 20px 40px 40px;

	}



	.counter-item {

		width: calc(33.33% - 13.33px);

		text-align: center;

	}



	.counter-item::before {

		display: none;

	}



	.counter-item .icon-box {

		width: 50px;

		height: 50px;

		margin: 0 auto;

		margin-bottom: 20px;

	}



	.counter-item .icon-box img {

		max-width: 30px;

	}



	.counter-item-content h2 {

		font-size: 34px;

		color: var(--white-color);

		margin-bottom: 10px;

	}



	.counter-item-content p {

		font-size: 12px;

	}



	.our-team {

		background: linear-gradient(180deg, var(--primary-color) 50%, var(--white-color) 50%);

		padding: 50px 0 0px;

	}



	.team-image img {

		aspect-ratio: 1 / 1.3;

	}



	.why-choose-us.about-why-choose {

		padding: 25px 0 50px;

	}



	.why-choose-us.about-why-choose .why-choose-image {

		margin-top: 0px;

	}



	.page-services {

		padding: 50px 0 0px;

	}



	.our-counter.page-service-counter {

		padding: 25px 0;

	}



	.our-faqs.page-service-faqs {

		padding: 25px 0 50px;

	}



	.page-service-single {

		padding: 50px 0;

	}



	.service-sidebar {

		margin-right: 0px;

		margin-bottom: 30px;

	}



	.service-catagery-list {

		padding: 20px;

		margin-bottom: 30px;

	}



	.service-catagery-list h3 {

		margin-bottom: 20px;

	}



	.service-catagery-list ul li {

		margin-bottom: 15px;

	}



	.service-catagery-list ul li a {

		padding: 10px 15px;

	}



	.service-catagery-list ul li a::after {

		background-size: 26px auto;

		width: 26px;

		height: 26px;

	}



	.cta-contact-image img {

		aspect-ratio: 1 / 0.60;

	}



	.cta-contact-body {

		padding: 20px;

	}



	.cta-contact-content h2 {

		font-size: 24px;

	}



	.service-single-slider {

		margin-bottom: 30px;

	}



	.service-entry {

		margin-bottom: 50px;

	}



	.service-entry p {

		margin-bottom: 20px;

	}



	.service-entry h2 {

		font-size: 32px;

		margin-bottom: 20px;

	}



	.page-blog {

		padding: 50px 0 20px;

	}



	.post-item {

		height: calc(100% - 40px);

		margin-bottom: 40px;

	}



	.post-featured-image {

		margin-bottom: 20px;

	}



	.post-item .article-meta {

		margin-bottom: 15px;

	}



	.page-pagination {

		margin-top: 10px;

	}



	.page-single-post {

		padding: 50px 0;

	}



	.post-image {

		margin-bottom: 20px;

	}



	.post-entry blockquote {

		background: var(--secondary-color) url('../images/icon-blockquote.svg') no-repeat 30px 35px;

		background-size: 45px;

		padding: 25px 25px 25px 90px;

		margin-bottom: 20px;

	}



	.post-entry blockquote p {

		font-size: 18px;

	}



	.post-entry h2 {

		font-size: 32px;

	}



	.post-entry ul li {

		font-size: 16px;

	}



	.post-tag-links {

		padding: 0 0px;

	}



	.post-tags {

		margin-bottom: 10px;

	}



	.post-social-sharing ul {

		text-align: left;

	}



	.post-tags .tag-links a {

		font-size: 16px;

		padding: 8px 15px;

	}



	.page-work {

		padding: 50px 0 20px;

	}



	.page-project-single {

		padding: 50px 0;

	}



	.project-sidebar {

		margin-right: 0px;

		margin-bottom: 30px;

	}



	.project-sidebar-details {

		padding: 20px;

		margin-bottom: 30px;

	}



	.project-details-item {

		margin-bottom: 15px;

		padding-bottom: 15px;

	}



	.project-single-image {

		margin-bottom: 30px;

	}



	.project-entry {

		margin-bottom: 20px;

	}



	.project-entry p {

		margin-bottom: 20px;

	}



	.project-entry h2 {

		font-size: 32px;

		margin-bottom: 20px;

	}



	.project-gallery {

		margin-bottom: 30px;

	}



	.project-gallery img {

		aspect-ratio: 1 / 0.8;

	}



	.page-team {

		padding: 50px 0 20px;

	}



	.page-pricing {

		padding: 50px 0 20px;

	}



	.page-faqs {

		padding: 50px 0;

	}



	.faq-sidebar {

		margin-right: 0;

		margin-bottom: 30px;

	}



	.faq-catagery-list {

		padding: 20px;

	}



	.page-faqs .our-faq-section {

		margin-bottom: 40px;

	}



	.page-contact-us {

		padding: 50px 0 25px;

	}



	.contact-us-form {

		height: auto;

		padding: 50px 30px;

		margin-bottom: 30px;

	}



	.contact-info-list {

		padding: 30px;

	}



	.contact-info-item {

		margin-bottom: 20px;

		padding: 15px;

	}



	.google-map {

		padding: 25px 0 50px;

	}



	.google-map-iframe iframe,

	.google-map-iframe {

		height: 500px;

	}



	.error-page {

		padding: 50px 0;

	}



	.error-page-image {

		margin-bottom: 30px;

	}



	.error-page-image img {

		max-width: 70%;

	}



	.error-page-content-heading {

		margin-bottom: 20px;

	}



	.error-page-content-heading h2 {

		font-size: 40px;

	}

}



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



	.section-row {

		margin-bottom: 30px;

	}



	.section-bg-title span {

		font-size: 60px;

	}



	.section-title h1 {

		font-size: 32px;

	}



	.section-title h2 {

		font-size: 30px;

	}



	.hero {

		padding: 0;

		min-height: 88vh;

		display: block;

	}



	.hero-video {

		height: auto !important;

		min-height: 88vh;

	}



	.hero.hero-video::before {

		background: linear-gradient(to top, rgba(4,34,4,0.85) 0%, rgba(4,34,4,0.40) 50%, rgba(4,34,4,0.15) 100%);

	}



	.hero-content {

		padding-right: 0;

		padding-left: 0;

		padding-top: 22vh;

		padding-bottom: 0;

		text-align: center;

	}



	.hero-content .section-title h1 {

		font-size: 28px;

		margin-bottom: 0;

	}



	.hero-trust-bar {

		justify-content: center;

		margin-top: 0;

		margin-bottom: 0;

	}



	.hero-content-body {

		display: inline-flex;

		flex-direction: column;

		align-items: flex-start;

		gap: 36px;

		margin-top: 45px;

	}



	.hero-content-body .btn-default {

		margin-right: 0;

	}



	.hero-content-body .btn-default.btn-highlighted {

		margin-left: 0;

		margin-top: 0;

	}



	#promo-bar {

		font-size: 13px !important;

		padding: 7px 44px 7px 12px !important;

		gap: 6px !important;

	}



	#promo-bar span:first-child {

		display: none;

	}



	.customer-review {

		padding: 25px 0 0;

	}



	.happy-customer-counter h2 {

		width: calc(50% - 20px);

		font-size: 40px;

	}



	.happy-customer-counter p {

		width: calc(50% - 20px);

	}



	.customer-review-content {

		margin-bottom: 30px;

	}



	.customer-consultation-box {

		position: initial;

		width: 100%;

		padding: 20px;

	}



	.customer-consultation-title h3 {

		font-size: 18px;

	}



	.about-image {

		background-size: 50% auto;

		padding-top: 70px;

	}



	.about-img-1 {

		max-width: 250px;

	}



	.about-img-2 {

		max-width: 200px;

	}



	.company-experience {

		position: absolute;

		top: 0;

		right: 0;

		display: block;

		align-items: center;

	}



	.company-experience-counter {

		margin-bottom: 5px;

	}



	.company-experience-counter h2 {

		font-size: 30px;

	}



	.company-experience-content {

		width: 100%;

	}



	.company-experience-content p {

		font-size: 14px;

	}



	.about-us-body ul li {

		width: 100%;

	}



	.about-company-founder {

		width: 100%;

		border-right: none;

		padding-right: 0px;

	}



	.company-founder-content h3 {

		font-size: 18px;

	}



	.contact-now-box.about-contact-box {

		width: 100%;

	}



	.service-title h3 {

		font-size: 18px;

	}



	.expertise-body {

		gap: 20px 10px;

	}



	.expertise-item {

		width: calc(50% - 5px);

	}



	.expertise-item .icon-box {

		width: 50px;

		height: 50px;

	}



	.expertise-item .icon-box img {

		max-width: 28px;

	}



	.expertise-item-content {

		width: calc(100% - 60px);

	}



	.expertise-item-content h3 {

		font-size: 20px;

		margin-bottom: 5px;

	}



	.expertise-images {

		gap: 20px;

	}



	.expertise-image-box-2,

	.expertise-image-box-1 {

		background-size: contain;

		width: calc(50% - 10px);

		gap: 20px;

	}



	.expertise-image-box-1 {

		padding-top: 40px;

	}



	.expertise-image-box-2 {

		padding-bottom: 40px;

	}



	.expertise-img-4 img,

	.expertise-img-3 img,

	.expertise-img-2 img,

	.expertise-img-1 img {

		border-radius: 20px;

	}



	.expertise-img-2 img {

		aspect-ratio: 1 / 0.78;

	}



	.intro-video-box {

		padding-bottom: 30px;

		margin-bottom: 30px;

	}



	.video-play-button a {

		width: 64px;

		height: 64px;

	}



	.video-play-button a i {

		font-size: 26px;

	}



	.specialize-item .icon-box {

		margin-right: 15px;

	}



	.specialize-item .icon-box img {

		max-width: 64px;

	}



	.specialize-content {

		width: calc(100% - 79px);

	}



	.specialize-content p {

		font-size: 14px;

	}



	.why-choose-us::before {

		background-position: left -50px top -20px;

		width: 100%;

		height: 280px;

	}



	.why-choose-image img {

		max-width: 65%;

	}



	.why-choose-item {

		width: 100%;

	}



	.why-choose-item .icon-box {

		width: 50px;

		height: 50px;

		margin-bottom: 15px;

	}



	.why-choose-item .icon-box img {

		max-width: 28px;

	}



	.why-choose-item-content h3 {

		font-size: 18px;

		margin-bottom: 10px;

	}



	.how-work-circle-img {

		text-align: center;

		margin-top: 15px;

	}



	.how-work-circle-img {

		display: none;

	}



	.how-work-item {

		width: calc(50% - 15px);

	}



	.work-process-no::before {

		display: none;

	}



	.work-process-content h3 {

		font-size: 16px;

	}



	.author-image figure,

	.author-image img {

		width: 50px;

		height: 50px;

	}



	.author-content {

		width: calc(100% - 65px);

	}



	.author-content h3 {

		font-size: 18px;

	}



	.our-faqs-cta {

		padding: 20px;

	}



	.faqs-cta-box .icon-box {

		width: 56px;

		height: 56px;

	}



	.faqs-cta-box .icon-box img {

		max-width: 30px;

	}



	.faqs-cta-content {

		width: calc(100% - 70px);

	}



	.faqs-cta-content h3 {

		font-size: 18px;

		margin-bottom: 5px;

	}



	.faqs-cta-btn .btn-default {

		padding: 15px 20px;

	}



	.our-faq-section .accordion-header .accordion-button {

		font-size: 18px;

	}



	.pricing-header h2 {

		font-size: 30px;

	}



	.pricing-body ul li {

		padding-left: 30px;

	}



	.pricing-body ul li::before {

		top: 3px;

		background-size: 20px auto;

		width: 20px;

		height: 20px;

	}



	.highlighted-article-tag {

		top: 20px;

		left: 20px;

	}



	.highlighted-article-tag a {

		padding: 6px 10px;

		font-size: 14px;

	}



	.article-post .article-tag a {

		padding: 6px 10px;

		font-size: 14px;

	}



	.article-meta ul li {

		font-size: 14px;

		margin-right: 5px;

	}



	.article-meta ul li i {

		font-size: 14px;

		margin-right: 5px;

	}



	.article-content h2 {

		font-size: 18px;

	}



	.article-content {

		margin-bottom: 20px;

	}



	.working-hour,

	.footer-links {

		margin-bottom: 40px;

	}



	.footer-info-box h3,

	.footer-links h3,

	.working-hour h3 {

		font-size: 18px;

		margin-bottom: 15px;

	}



	.footer-info-box {

		margin-bottom: 20px;

	}



	.footer-privacy-policy ul,

	.footer-copyright-text {

		text-align: center;

	}



	.footer-privacy-policy ul li {

		margin-right: 20px;

	}



	.page-header-box h1 {

		font-size: 32px;

	}



	.our-counter {

		padding-left: 0;

	}



	.our-counter-box {

		display: block;

		height: auto;

		border-radius: 0;

	}



	.counter-content-box {

		width: 100%;

		padding: 30px 15px;

	}



	.counter-item-content h2 {

		font-size: 26px;

		margin-bottom: 10px;

	}



	.counter-item-content p {

		font-size: 10px;

	}



	.counter-image {

		width: 100%;

	}



	.counter-image figure,

	.counter-image img {

		border-radius: 0;

	}



	.our-team {

		background: linear-gradient(180deg, var(--primary-color) 30%, var(--white-color) 30%);

	}



	.team-image img {

		aspect-ratio: 1 / 1.2;

	}



	.team-body-title h3 {

		font-size: 18px;

	}



	.service-catagery-list h3 {

		font-size: 18px;

	}



	.service-single-btn {

		left: 20px;

		right: 20px;

	}



	.service-slider-image img {

		aspect-ratio: 1 / 0.8;

	}



	.service-single-btn .service-single-button-next,

	.service-single-btn .service-single-button-prev {

		width: 30px;

		height: 30px;

	}



	.service-single-btn .service-single-button-next::before,

	.service-single-btn .service-single-button-prev::before {

		background-size: 20px auto;

	}



	.service-entry {

		margin-bottom: 40px;

	}



	.service-entry h2 {

		font-size: 28px;

	}



	.service-entry ul li {

		width: 100%;

		font-size: 16px;

		padding-left: 30px;

	}



	.service-entry ul li:before {

		top: 2px;

		background-size: 20px auto;

		width: 20px;

		height: 20px;

	}



	.service-entry-img-1 {

		margin-bottom: 20px;

	}



	.service-entry-img-1 img,

	.service-entry-img-2 img {

		border-radius: 15px;

	}



	.post-single-meta ol li i {

		font-size: 18px;

	}



	.post-image figure,

	.post-image img {

		aspect-ratio: 1 / 0.70;

	}



	.post-entry blockquote {

		background: var(--secondary-color) url(../images/icon-blockquote.svg) no-repeat 20px 20px;

		background-size: 35px;

		padding: 55px 20px 20px 20px;

	}



	.post-entry h2 {

		font-size: 28px;

	}



	.tag-links {

		font-size: 20px;

	}



	.project-details-item h3 {

		font-size: 18px;

	}



	.project-social-list h3 {

		font-size: 18px;

	}



	.project-entry {

		margin-bottom: 10px;

	}



	.project-entry h2 {

		font-size: 28px;

	}



	.project-entry ul li {

		width: 100%;

		font-size: 16px;

		padding-left: 30px;

	}



	.project-entry ul li:before {

		top: 2px;

		background-size: 20px auto;

		width: 20px;

		height: 20px;

	}



	.contact-us-form {

		padding: 40px 20px;

	}



	.contact-us-form .form-control {

		padding: 10px 15px;

	}



	.contact-info-list {

		padding: 20px;

	}



	.contact-info-content h3 {

		font-size: 18px;

	}



	.google-map-iframe iframe,

	.google-map-iframe {

		height: 400px;

	}



	.error-page-image img {

		max-width: 100%;

	}



	.error-page-content-heading h2 {

		font-size: 30px;

	}

}







/* Force-style Premium Services heading */

h3.premium-services-heading {

	color: #1b5e3a !important;

	font-weight: 600;

	margin-bottom: 14px;

	position: relative;

}



h3.premium-services-heading::after {

	content: "";

	display: block;

	width: 36px;

	height: 3px;

	background-color: #2f7d32;

	margin-top: 6px;

}



/* Force-style Ultimate Care heading */

h3.ultimate-care-heading {

	color: #1b5e3a !important;

	font-weight: 600;

	margin-bottom: 14px;

	position: relative;

}



h3.ultimate-care-heading::after {

	content: "";

	display: block;

	width: 36px;

	height: 3px;

	background-color: #2f7d32;

	margin-top: 6px;

}







.ultimate-care-list {

	list-style: none;

	padding-left: 0;

	margin-top: 0.75rem;

}



.ultimate-care-list li {

	position: relative;

	padding-left: 1.4rem;

	margin-bottom: 8px;

	color: #555;

	line-height: 1.6;

}



.ultimate-care-list li::before {

	content: "?";

	position: absolute;

	left: 0;

	color: #2f7d32;

	font-weight: 600;

}







/* Premium Services bullet points */

.premium-service-points {

	list-style: none;

	padding-left: 0;

	margin-top: 0.75rem;

}



.premium-service-points li {

	position: relative;

	padding-left: 1.5rem;

	margin-bottom: 10px;

	color: #555;

	line-height: 1.6;

}



.premium-service-points li::before {

	content: "?";

	position: absolute;

	left: 0;

	top: 2px;

	color: #2f7d32;

	font-weight: 600;

}



/* Mobile image cleanup */

@media (max-width: 768px) {

	.why-choose-image figure {

		margin: 0;

	}



	.why-choose-image img {

		width: 100%;

		height: auto;

		border-radius: 14px;

		object-fit: cover;

	}



	.why-choose-image {

		padding: 1rem 0;

	}

}



/* Desktop-only image rounding for Premium section */

@media (min-width: 992px) {

	.why-choose-image {

		border-radius: 26px;

		overflow: hidden;

	}



	.why-choose-image figure {

		margin: 0;

		border-radius: 26px;

		overflow: hidden;

	}



	.why-choose-image img {

		width: 100%;

		height: auto;

		display: block;

	}

}





.why-choose-image {

	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);

}









/* --- Winter Header Upgrade --- */



.winter-banner {

	/* Replace 'your-new-image.jpg' with the actual filename of the image I generated */

	background: linear-gradient(rgba(0, 30, 0, 0.6), rgba(0, 20, 0, 0.4)),

		url('../images/winter-banner.webp') no-repeat center center !important;

	background-size: cover !important;

	position: relative;

	overflow: hidden;

	/* Keeps the flakes inside the banner */

	border-bottom: 2px solid #2e7d32;

	/* Keeps your No-BS green brand identity */

}





/* --- Final Surgical Fix for Snowflake Alignment --- */

#snow-plan-section .section-title h3::before {

	background: none !important;

	/* Deletes the leaf image */

	content: "\f2dc" !important;

	/* Adds the Snowflake */

	font-family: "Font Awesome 6 Free" !important;

	font-weight: 900 !important;

	color: #2e7d32 !important;

	/* No-BS Brand Green */

	font-size: 25px !important;

	display: inline-block !important;

	margin-right: 15px !important;

	/* Spacing between icon and text */



	/* 1. ANIMATION: Does 1 rotation and STAYS at the end (360deg) */

	animation: fa-spin 4s linear forwards !important;



	/* 2. ALIGNMENT: Pulls it up further to be perfectly inline */

	vertical-align: middle !important;

	position: relative !important;

	top: -4px !important;

	/* Increased from -2px to sit higher */

	line-height: 1 !important;

	/* Prevents the icon box from pushing text down */

}





why-choose-image12 .why-choose-image {

	background: #eef3f8;

	padding: 24px;

	border-radius: 16px #1e90ff;

}



.why-choose-image img {

	max-width: 100%;

	height: auto;

}









.Grass-banner {

	background: linear-gradient(rgba(0, 40, 0, 0.6), rgba(0, 25, 0, 0.4)),

		url('../images/Grass-banner.jpeg') no-repeat center center !important;

	background-size: cover !important;

	position: relative;

	overflow: hidden;

	/* Keeps the effect inside the banner */

	border-bottom: 2px solid #2e7d32;

	/* No-BS green brand */

}



/* --- Subtle Lawn / Air Movement Effect --- */

.Grass-banner::before {

	content: "";

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;



	/* Soft floating dust / pollen / sunlight specks */

	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.8) 1px, transparent 1px);

	background-size: 60px 60px;



	animation: lawnDrift 14s linear infinite;

	opacity: 0.15;

	pointer-events: none;

}



/* Gentle sideways + upward movement (summer breeze feel) */

@keyframes lawnDrift {

	from {

		background-position: 0 0;

	}



	to {

		background-position: 120px -120px;

	}

}



/* --- About Us Banner --- */

.about-banner {

	background: linear-gradient(rgba(0, 40, 0, 0.6), rgba(0, 25, 0, 0.4)),

		url('../images/handshake.webp') no-repeat center center !important;

	background-size: cover !important;

	position: relative;

	overflow: hidden;

	border-bottom: 2px solid #2e7d32;

}



/* --- Contact Banner --- */

.contact-page-banner {

	background: linear-gradient(rgba(0, 40, 0, 0.6), rgba(0, 25, 0, 0.4)),

		url('../images/contact-banner.webp') no-repeat center center !important;

	background-size: cover !important;

	position: relative;

	overflow: hidden;

	border-bottom: 2px solid #2e7d32;

}



/* --- Spring/Fall Cleanup Banner --- */

.spring-banner {

	background: linear-gradient(135deg, #071a0d 0%, #0f3d1e 35%, #1e6b35 65%, #0a2e14 100%);

	position: relative;

	overflow: hidden;

	border-bottom: 2px solid #2e7d32;

}



.spring-banner::before {

	content: "";

	position: absolute;

	inset: 0;

	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='260'%3E%3Cellipse cx='35' cy='55' rx='20' ry='9' fill='rgba(255%2C255%2C255%2C0.07)' transform='rotate(-45%2C35%2C55)'/%3E%3Cellipse cx='130' cy='25' rx='15' ry='7' fill='rgba(255%2C255%2C255%2C0.05)' transform='rotate(25%2C130%2C25)'/%3E%3Cellipse cx='240' cy='80' rx='18' ry='8' fill='rgba(255%2C255%2C255%2C0.06)' transform='rotate(-60%2C240%2C80)'/%3E%3Cellipse cx='370' cy='35' rx='13' ry='6' fill='rgba(255%2C255%2C255%2C0.04)' transform='rotate(15%2C370%2C35)'/%3E%3Cellipse cx='80' cy='160' rx='16' ry='7' fill='rgba(255%2C255%2C255%2C0.06)' transform='rotate(40%2C80%2C160)'/%3E%3Cellipse cx='200' cy='190' rx='12' ry='5' fill='rgba(255%2C255%2C255%2C0.05)' transform='rotate(-30%2C200%2C190)'/%3E%3Cellipse cx='320' cy='150' rx='17' ry='8' fill='rgba(255%2C255%2C255%2C0.07)' transform='rotate(55%2C320%2C150)'/%3E%3Cellipse cx='55' cy='230' rx='14' ry='6' fill='rgba(255%2C255%2C255%2C0.04)' transform='rotate(-70%2C55%2C230)'/%3E%3Cellipse cx='290' cy='230' rx='11' ry='5' fill='rgba(255%2C255%2C255%2C0.06)' transform='rotate(20%2C290%2C230)'/%3E%3Cellipse cx='170' cy='110' rx='19' ry='9' fill='rgba(255%2C255%2C255%2C0.05)' transform='rotate(-50%2C170%2C110)'/%3E%3Cellipse cx='380' cy='200' rx='14' ry='6' fill='rgba(255%2C255%2C255%2C0.04)' transform='rotate(35%2C380%2C200)'/%3E%3C/svg%3E");

	background-repeat: repeat;

	pointer-events: none;

}



/* --- Services Banner --- */

.services-banner {

	background: linear-gradient(135deg, #071f12 0%, #0B3D2C 40%, #1a5c35 70%, #0d3d22 100%);

	position: relative;

	overflow: hidden;

	border-bottom: 2px solid #2e7d32;

}



.services-banner::before {

	content: "";

	position: absolute;

	inset: 0;

	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='120'%3E%3Ctext x='170' y='65' font-family='Arial%2C sans-serif' font-size='22' font-weight='700' letter-spacing='6' fill='rgba(255%2C255%2C255%2C0.05)' text-anchor='middle' dominant-baseline='middle' transform='rotate(-20%2C170%2C65)'%3ELAWN CARE %26bull%3B FENCING %26bull%3B WINNIPEG%3C/text%3E%3C/svg%3E");

	background-repeat: repeat;

	pointer-events: none;

}



/* --- Projects Banner --- */

.projects-banner {

	background: linear-gradient(135deg, #071f12 0%, #0B3D2C 40%, #1a5c35 70%, #0d3d22 100%);

	position: relative;

	overflow: hidden;

	border-bottom: 2px solid #2e7d32;

}



.projects-banner::before {

	content: "";

	position: absolute;

	inset: 0;

	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='120'%3E%3Ctext x='170' y='65' font-family='Arial%2C sans-serif' font-size='22' font-weight='700' letter-spacing='6' fill='rgba(255%2C255%2C255%2C0.05)' text-anchor='middle' dominant-baseline='middle' transform='rotate(-20%2C170%2C65)'%3ENO-BS YARDWORK %26bull%3B WINNIPEG%3C/text%3E%3C/svg%3E");

	background-repeat: repeat;

	pointer-events: none;

}



/* --- STRICTLY MOBILE ONLY FIX --- */

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

	#snow-image-bubble {

		margin-top: 45px !important;

		margin-bottom: 45px !important;

		background-color: #0B3D2C !important;

		/* Brand Green */



		/* Padding: Top(15px) Sides(15px) Bottom(30px) */

		padding: 15px 15px 30px 15px !important;



		border-radius: 25px !important;

		display: block !important;

		overflow: hidden !important;

		box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.2) !important;

	}



	#snow-image-bubble img {

		width: 100% !important;

		height: auto !important;

		border-radius: 15px !important;

		/* Bubbles the photo inside the green */

		object-fit: cover !important;

	}

}



/* --- UNIVERSAL ICON FIX --- */



/* 1. Target the specific lists on your Premium Packages page */

.premium-service-points,

.ultimate-care-list {

	list-style: none !important;

	padding: 0 !important;

}



.premium-service-points li,

.ultimate-care-list li {

	position: relative;

	padding-left: 35px !important;

	margin-bottom: 12px;

	line-height: 1.5;

	display: block;

}



/* 2. Clear any existing "?" and add the new green checkmark */

.premium-service-points li::before,

.ultimate-care-list li::before {

	content: "" !important;

	/* This removes the question mark */

	position: absolute;

	left: 0;

	top: 2px;

	width: 22px;

	height: 22px;

	/* This is a direct image code that cannot turn into a question mark */

	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232A7D2E'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E") !important;

	background-repeat: no-repeat;

	background-size: contain;

}



/* --- Global Hero Photo Settings --- */



/* 1. Set the photo on the main container */

.hero-video {

	background-image: url("/images/lawn7.webp") !important;

	background-size: cover !important;

	background-position: center !important;

	background-repeat: no-repeat !important;

	height: 100vh;

	/* This ensures the photo fills the screen height */

	position: relative;

	z-index: 0;

}



/* 2. Create the dark/green tint overlay */

.hero-video::before {

	content: "" !important;

	position: absolute !important;

	inset: 0 !important;

	background: rgba(4, 34, 4, 0.45) !important;

	/* The 0.45 is the darkness level */

	z-index: 1 !important;

}



/* 3. Hide the inner video wrapper so it doesn't take up space */

.hero-bg-video {

	display: none !important;

}



/* 4. Make sure your text/buttons appear ABOVE the dark tint */

.hero-video .container,

.hero-video .hero-content {

	position: relative !important;

	z-index: 2 !important;

}



/* --- CLEAN GREEN FOOTER --- */

.main-footer {

	/* Solid Green - matching your grass brand */

	background-color: #1b3d2f !important;



	/* This padding restores the height seen in your screenshot */

	padding: 100px 0 60px !important;

	position: relative;

	z-index: 1;

	color: #ffffff !important;

}



/* Remove any dark boxes/overlays */

.main-footer::before {

	display: none !important;

	content: none !important;

}



/* Ensure footer text is white and clean */

.main-footer h3,

.main-footer p,

.main-footer a {

	color: #ffffff !important;

}



/* --- THE ULTIMATE SPACING LOCK --- */



.slicknav_btn {

	/* 1. Reset the Box */

	display: flex !important;

	/* Forces centering */

	align-items: center !important;

	/* Vertical alignment */

	justify-content: center !important;

	/* Horizontal alignment */

	width: 44px !important;

	/* Fixed width for a perfect square */

	height: 44px !important;

	/* Fixed height for a perfect square */

	padding: 0 !important;

	/* Remove padding to let Flex do the math */



	/* 2. Positioning */

	float: right !important;

	margin: 8px 10px 0 0 !important;

	border-radius: 12px !important;

	/* The curved edges */

	box-sizing: border-box !important;

}



/* Ensure the wrapper doesn't have secret padding */

.slicknav_menu .slicknav_icon {

	width: 24px !important;

	height: 18px !important;

	margin: 0 !important;

	/* Removes the drifting margin */

	float: none !important;

	/* Kills the left-hand float */

}



/* Make the 3 bars symmetrical */

.slicknav_menu .slicknav_icon-bar {

	display: block !important;

	width: 100% !important;

	height: 3px !important;

	margin: 4px 0 !important;

	/* Even gaps between lines */

	border-radius: 2px !important;

}



/* --- ULTIMATE MOBILE NAV & HEADER LOCKDOWN --- */

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



	/* 1. HEADER TEXT: Force White and Darker Green on Hover */

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

		color: #ffffff !important;

		transition: color 0.3s ease;

	}



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

		color: #0B3D2C !important;

		/* Darker green highlight */

	}



	/* 2. THE BUTTON: Perfectly curved square with the lighter brand green */

	.slicknav_btn {

		background-color: #2A7D2E !important;

		/* Lighter brand green */

		border-radius: 12px !important;

		width: 44px !important;

		height: 44px !important;

		margin: 8px 10px 0 0 !important;

		display: flex !important;

		/* Mathematical centering */

		align-items: center !important;

		/* Vertical center */

		justify-content: center !important;

		/* Horizontal center */

		float: right !important;

		padding: 0 !important;

		/* Removes padding that causes drifting */

		box-sizing: border-box !important;

	}



	/* 3. THE ICON: Neutralized for center alignment */

	.slicknav_menu .slicknav_icon {

		width: 24px !important;

		height: 18px !important;

		margin: 0 !important;

		/* Removes Slicknav drift */

		float: none !important;

		/* Kills left-hand bias */

		display: block !important;

		position: relative !important;

	}



	/* 4. DROPDOWN BACKGROUND: Entire section set to lighter green */

	.slicknav_menu {

		background: transparent !important;

		/* Keep bar transparent on Home */

	}



	.slicknav_nav {

		background-color: #2A7D2E !important;

		/* Nav background */

		padding: 10px 0 !important;

	}



	.slicknav_nav a {

		color: #ffffff !important;

		/* Link text to white */

	}



	.slicknav_nav a:hover {

		background-color: #1b3d2f !important;

		/* Darker green on item highlight */

		color: #ffffff !important;

	}



	/* 5. CLEANUP: Hide "MENU" text */

	.slicknav_menu .slicknav_menutxt {

		display: none !important;

	}

}



/* --- EMERGENCY SWIPER LAYOUT FIX --- */



/* 1. The Window: Hides everything that is off-screen */

.testimonial-slider .swiper {

	overflow: hidden !important;

	width: 100% !important;

	position: relative !important;

}



/* 2. The Track: Forces the reviews to line up side-by-side horizontally */

.testimonial-slider .swiper-wrapper {

	display: flex !important;

	width: 100% !important;

	box-sizing: content-box !important;

	align-items: stretch !important;

}



/* 3. The Reviews: Forces each individual review to take up exactly 100% of the window */

.testimonial-slider .swiper-slide {

	flex-shrink: 0 !important;

	width: 100% !important;

	display: block !important;

	height: auto !important;

}



/* Forces the normal mouse cursor to stay visible in the testimonials section */

.our-testimonials,

.our-testimonials * {

	cursor: default !important;

}



/* FORCE CURSOR VISIBLE ON THE ENTIRE WORK SECTION */

/* This forces the normal arrow cursor on all text, titles, and background */

.our-work,

.our-work * {

	cursor: default !important;

}



/* This brings back the "clicking hand" cursor for links and images */

.our-work a,

.our-work a *,

.our-work .work-image,

.our-work .work-readmore-btn {

	cursor: pointer !important;

}



/* =========================================

   GLOBAL MOUSE CURSOR OVERRIDE 

   ========================================= */



/* 1. Force the normal arrow cursor on ALL elements on EVERY page */

body,

body * {

	cursor: default !important;

}



/* 2. Bring back the "clicking hand" for anything you can actually click (links, buttons, arrows) */

a,

a *,

button,

button *,

.btn-default,

.slicknav_btn {

	cursor: pointer !important;

}



/* 3. Bring back the normal "text select" cursor for reading words */

p,

h1,

h2,

h3,

h4,

h5,

h6,

span {

	cursor: text !important;

}



/* Container for the new content */

.cta-extra-content {

	margin-top: 40px;

	/* Adjust this to create breathing room under the button */

	color: #ffffff;

	font-family: inherit;

	/* Matches your existing site font */

	z-index: 2;

	/* Ensures it stays above the wavy background graphic */

	position: relative;

}



/* Services List Styling */

.services-included .section-title {

	font-size: 0.9rem;

	font-weight: 600;

	margin-bottom: 12px;

	text-transform: uppercase;

	letter-spacing: 0.5px;

	opacity: 0.9;

}



.services-included ul {

	list-style-type: none;

	padding: 0;

	margin: 0 0 25px 0;

	display: grid;

	grid-template-columns: 1fr 1fr;

	/* Creates the neat two-column look */

	gap: 12px 10px;

}



.services-included li {

	font-size: 0.9rem;

	display: flex;

	align-items: center;

	opacity: 0.85;

}



.leaf-icon {

	margin-right: 8px;

	font-size: 1rem;

}



/* Trust Badge / Review Styling */

.trust-badge {

	border-top: 1px solid rgba(255, 255, 255, 0.2);

	/* Subtle divider line */

	padding-top: 20px;

}



.trust-badge .stars {

	color: #FFD700;

	/* Gold color for the stars */

	font-size: 1.2rem;

	letter-spacing: 2px;

	margin-bottom: 8px;

}



.trust-badge p {

	font-size: 0.85rem;

	font-style: italic;

	margin: 0;

	opacity: 0.8;

	line-height: 1.4;

}



/* Mobile adjustments */

@media (max-width: 768px) {

	.services-included ul {

		grid-template-columns: 1fr;

		/* Changes to a single column on mobile */

	}



	.cta-extra-content {

		margin-top: 20px;

		/* Reduces the gap under the button for smaller screens */

	}

}



/* Expand extra content for PC only */

@media (min-width: 769px) {

	.cta-extra-content {

		margin-top: 55px;

		/* Pushes it further down from the button */

	}



	.services-included .section-title {

		font-size: 1.05rem;

		/* Larger title */

		margin-bottom: 20px;

		/* More space under title */

		letter-spacing: 1px;

	}



	.services-included ul {

		gap: 20px 25px;

		/* Increases space between the columns and rows */

		margin-bottom: 40px;

		/* Pushes the review further down */

	}



	.services-included li {

		font-size: 1rem;

		/* Slightly larger list text */

	}



	.leaf-icon {

		font-size: 1.15rem;

		/* Slightly larger icon */

		margin-right: 12px;

	}



	.trust-badge {

		padding-top: 30px;

		/* More space above the review */

	}



	.trust-badge .stars {

		font-size: 1.4rem;

		/* Larger stars */

		margin-bottom: 12px;

	}



	.trust-badge p {

		font-size: 1rem;

		/* Larger review text */

		line-height: 1.5;

	}

}



/* Find the container that holds your animation/slider */

.hero-section,

.swiper-container {

	min-height: 100vh;

	/* Or 600px, whatever your design uses */

	aspect-ratio: 16 / 9;

	/* This tells the browser the shape before the content loads */

	background: #1b3d2f;

	/* Match your brand color so it doesn't look empty */

}



/* Forces the 'hand' pointer and stops the text-selection cursor */

.slicknav_btn,

.slicknav_icon,

.slicknav_icon-bar {

	cursor: pointer !important;

	user-select: none !important;

	-webkit-user-select: none;

	/* Safari support */

}



/* Makes the bars inside the icon "transparent" to clicks 

   so they don't trigger the text cursor */

.slicknav_icon-bar {

	pointer-events: none;

}



/* Add this to sections below the fold */

.services-section,

.footer-section {

	content-visibility: auto;

	contain-intrinsic-size: 500px;

	/* An estimate of the section height */

}



/* Container alignment */

.services-included {

	text-align: center;

	padding: 20px;

}



/* 1. Center the list block while keeping text left-aligned */

.centered-list {

	display: inline-block;

	text-align: left;

	/* Overriding all.css default 2.5em margin to center it */

	margin-left: 0 !important;

	/* Padding provides space so icons aren't cut off */

	padding-left: 1.5em !important;

	list-style-type: none;

}



.centered-list li {

	margin-bottom: 12px;

	font-size: 1.1rem;

	position: relative;

}



/* 2. Icon & Star Styling */

.fa-li {

	/* Precise placement for the leaf icon */

	left: -1.5em !important;

	color: #ffffff;

}



.stars {

	color: #ffcc00;

	/* Standard gold star color */

	font-size: 1.2rem;

	margin: 20px 0 10px;

}



.card-divider {

	border: 0;

	border-top: 1px solid rgba(255, 255, 255, 0.2);

	width: 80%;

	margin: 20px auto;

}



.testimonial {

	font-style: italic;

	font-size: 0.95rem;

	opacity: 0.9;

}



/* 1. Push the text to the right */

.centered-list li {

	padding-left: 15px;

	/* Increase this number for more space */

	margin-bottom: 12px;

	font-size: 1.1rem;

	display: flex;

	align-items: center;

}



/* 2. Adjust the icon's relative position */

.centered-list .fa-li {

	/* Keeps the icon pinned to the left of the new padding */

	left: -1.5em !important;

	color: #ffffff;

}



/* Force the logo/brand to always align left */

.navbar-brand {

	text-align: left !important;

	display: flex !important;

	justify-content: flex-start !important;

}



/* Ensure the container doesn't center the brand on mobile */

@media (max-width: 991px) {

	.navbar {

		justify-content: space-between !important;

	}

}





/* ============================

   Facebook Feed Section

   ============================ */

.facebook-feed-section {

	padding: 80px 0;

	background: #f4f9f4;

}



.facebook-feed-section .section-title {

	text-align: center;

	margin-bottom: 40px;

}



.facebook-feed-section .fb-page-wrap {

	display: flex;

	justify-content: center;

	flex-wrap: wrap;

}



.facebook-feed-section .fb-follow-btn {

	display: inline-block;

	margin-top: 24px;

	background: #1877F2;

	color: #fff;

	font-family: 'Plus Jakarta Sans', sans-serif;

	font-weight: 700;

	font-size: 15px;

	padding: 12px 28px;

	border-radius: 8px;

	text-decoration: none;

	transition: background 0.2s;

}



.facebook-feed-section .fb-follow-btn:hover {

	background: #145dbf;

	color: #fff;

}



/* ============================

   Service Areas Page Banner

   ============================ */

.service-areas-banner {

	background:

		linear-gradient(135deg, rgba(11, 61, 44, 0.88) 0%, rgba(46, 125, 50, 0.72) 60%, rgba(249, 168, 37, 0.45) 100%),

		url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><circle cx="30" cy="30" r="20" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="1"/><line x1="0" y1="30" x2="60" y2="30" stroke="rgba(255,255,255,0.04)" stroke-width="1"/><line x1="30" y1="0" x2="30" y2="60" stroke="rgba(255,255,255,0.04)" stroke-width="1"/></svg>') repeat,

		#1b3d2f;

}



/* ============================

   Before / After Slider Section

   ============================ */

.before-after-section {

	padding: 80px 0 60px;

	background: #f4f9f4;

}



.before-after-section .section-subheading {

	text-align: center;

	color: #4a7c59;

	font-size: 14px;

	font-weight: 700;

	letter-spacing: 0.12em;

	text-transform: uppercase;

	margin-bottom: 8px;

}



.before-after-section h2 {

	text-align: center;

	font-size: clamp(1.6rem, 3vw, 2.2rem);

	color: #1b3d2f;

	margin-bottom: 8px;

}



.before-after-section .ba-intro {

	text-align: center;

	color: #555;

	font-size: 15px;

	margin-bottom: 48px;

}



.ba-slider-card {

	border-radius: 14px;

	overflow: hidden;

	box-shadow: 0 6px 28px rgba(0, 0, 0, 0.13);

	margin-bottom: 24px;

}



.ba-container {

	position: relative;

	width: 100%;

	aspect-ratio: 4/3;

	overflow: hidden;

	cursor: ew-resize;

	--pos: 50%;

}



.ba-container .ba-before,

.ba-container .ba-after {

	position: absolute;

	inset: 0;

}



.ba-container img {

	width: 100%;

	height: 100%;

	object-fit: cover;

	display: block;

	pointer-events: none;

	user-select: none;

}



.ba-container .ba-after {

	clip-path: inset(0 0 0 var(--pos));

}



.ba-container .ba-after img {

	width: 100%;

	height: 100%;

}



.ba-divider {

	position: absolute;

	top: 0;

	bottom: 0;

	left: var(--pos);

	width: 3px;

	background: #fff;

	transform: translateX(-50%);

	pointer-events: none;

	box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);

}



.ba-btn {

	position: absolute;

	top: 50%;

	left: 50%;

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

	width: 46px;

	height: 46px;

	background: #f9a825;

	border-radius: 50%;

	display: flex;

	align-items: center;

	justify-content: center;

	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);

	pointer-events: none;

}



.ba-btn svg {

	width: 22px;

	height: 22px;

	fill: #1b3d2f;

}



.ba-label {

	position: absolute;

	top: 14px;

	padding: 5px 13px;

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

	color: #fff;

	font-size: 12px;

	font-weight: 700;

	letter-spacing: 0.1em;

	text-transform: uppercase;

	border-radius: 4px;

	pointer-events: none;

}



.ba-before .ba-label {

	left: 14px;

}



.ba-after .ba-label {

	right: 14px;

}



.ba-range {

	position: absolute;

	inset: 0;

	width: 100%;

	height: 100%;

	opacity: 0;

	cursor: ew-resize;

	margin: 0;

	padding: 0;

	-webkit-appearance: none;

	z-index: 10;

}



.ba-caption {

	padding: 14px 18px;

	background: #1b3d2f;

	color: #fff;

	font-size: 14px;

	font-weight: 600;

	text-align: center;

	letter-spacing: 0.02em;

}



.before-after-section .cta-row {

	text-align: center;

	margin-top: 36px;

}



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

 * Latest Blog Section (homepage)

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

.our-blog {

	padding: 80px 0;

	background: #F0FFF0;

}



.blog-card-item {

	background: #fff;

	border-radius: 12px;

	overflow: hidden;

	margin-bottom: 30px;

	box-shadow: 0 2px 20px rgba(0,0,0,0.06);

	transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.blog-card-item:hover {

	transform: translateY(-4px);

	box-shadow: 0 8px 30px rgba(0,0,0,0.10);

}



.blog-card-image img {

	width: 100%;

	height: 220px;

	object-fit: cover;

	display: block;

	transition: transform 0.4s ease;

}



.blog-card-item:hover .blog-card-image img {

	transform: scale(1.04);

}



.blog-card-content {

	padding: 24px;

}



.blog-card-content h3 {

	font-size: 1.05rem;

	line-height: 1.4;

	margin-bottom: 10px;

}



.blog-card-content h3 a {

	color: #0B3D2C;

	text-decoration: none;

}



.blog-card-content h3 a:hover {

	color: #2A7D2E;

}



.blog-card-content p {

	color: #555;

	font-size: 0.95rem;

	line-height: 1.6;

	margin-bottom: 16px;

}



.blog-read-more {

	color: #2A7D2E;

	font-weight: 600;

	font-size: 0.9rem;

	text-decoration: none;

}



.blog-read-more:hover {

	color: #0B3D2C;

}



/* ===================================================

   BLOG LISTING PAGE — blog.html

   =================================================== */



/* Loading spinner */

.blog-loading {

  text-align: center;

  padding: 80px 20px;

  color: #888;

}

.blog-loading-spinner {

  width: 40px;

  height: 40px;

  border: 3px solid #e0ede7;

  border-top-color: #0B3D2C;

  border-radius: 50%;

  animation: blog-spin 0.7s linear infinite;

  margin: 0 auto 16px;

}

@keyframes blog-spin { to { transform: rotate(360deg); } }



/* Section wrapper */

.blog-listing-section {

  padding: 70px 0 80px;

  background: #fff;

}



/* Filter pills */

.blog-filter-pills {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-bottom: 50px;

}

.blog-pill {

  background: #f4f9f4;

  color: #0B3D2C;

  border: 2px solid #0B3D2C;

  padding: 8px 22px;

  border-radius: 100px;

  font-size: 14px;

  font-weight: 600;

  cursor: pointer;

  transition: background 0.2s, color 0.2s;

  font-family: "Plus Jakarta Sans", sans-serif;

}

.blog-pill:hover,

.blog-pill.active {

  background: #0B3D2C;

  color: #fff;

}



/* ── Featured hero post ── */

.blog-featured {

  margin-bottom: 60px;

  border-radius: 16px;

  overflow: hidden;

  opacity: 0;

  transform: translateY(20px);

  transition: opacity 0.65s ease, transform 0.65s ease;

}

.blog-featured.blog-visible {

  opacity: 1;

  transform: none;

}

.blog-featured-img {

  background-size: cover;

  background-position: center;

  min-height: 500px;

  position: relative;

}

.blog-featured-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(to top, rgba(11,61,44,0.92) 0%, rgba(11,61,44,0.55) 55%, rgba(0,0,0,0.08) 100%);

  display: flex;

  align-items: flex-end;

  padding: 50px 56px;

}

.blog-featured-content {

  max-width: 700px;

}

.blog-featured-meta {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 14px;

  flex-wrap: wrap;

}

.blog-featured-content h2 {

  color: #fff;

  font-size: 2rem;

  font-weight: 700;

  margin: 0 0 10px;

  line-height: 1.3;

}

.blog-featured-date {

  color: rgba(255,255,255,0.65);

  font-size: 14px;

  margin-bottom: 14px;

}

.blog-featured-excerpt {

  color: rgba(255,255,255,0.88);

  font-size: 15px;

  line-height: 1.75;

  margin-bottom: 26px;

}

.blog-cat-badge {

  display: inline-block;

  background: rgba(255,255,255,0.15);

  color: #fff;

  border: 1px solid rgba(255,255,255,0.45);

  font-size: 11px;

  font-weight: 700;

  padding: 4px 14px;

  border-radius: 100px;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}

.blog-badge-latest {

  display: inline-block;

  background: #f9a825;

  color: #1b3d2f;

  font-size: 11px;

  font-weight: 700;

  padding: 4px 12px;

  border-radius: 100px;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}

.blog-read-more-btn {

  display: inline-block;

  background: #f9a825;

  color: #1b3d2f;

  font-weight: 700;

  padding: 13px 32px;

  border-radius: 100px;

  text-decoration: none;

  font-size: 15px;

  transition: background 0.2s, color 0.2s, transform 0.2s;

}

.blog-read-more-btn:hover {

  background: #fff;

  color: #0B3D2C;

  transform: translateY(-2px);

}



/* ── Alternating post rows ── */

.blog-post-row {

  display: flex;

  align-items: center;

  gap: 54px;

  margin-bottom: 64px;

  opacity: 0;

  transform: translateY(24px);

  transition: opacity 0.65s ease, transform 0.65s ease;

}

.blog-post-row.blog-visible {

  opacity: 1;

  transform: none;

}

.blog-post-row.reverse {

  flex-direction: row-reverse;

}

.blog-post-img {

  flex: 0 0 48%;

  overflow: hidden;

  border-radius: 14px;

}

.blog-post-img img {

  width: 100%;

  height: 310px;

  object-fit: cover;

  display: block;

  border-radius: 14px;

  transition: transform 0.45s ease;

}

.blog-post-img:hover img {

  transform: scale(1.04);

}

.blog-post-text {

  flex: 1;

  min-width: 0;

}

.blog-post-meta {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 14px;

  flex-wrap: wrap;

}

.blog-cat-label {

  background: #e8f5e9;

  color: #0B3D2C;

  font-size: 11px;

  font-weight: 700;

  padding: 4px 12px;

  border-radius: 100px;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}

.blog-date-label,

.blog-readtime-label {

  color: #999;

  font-size: 13px;

}

.blog-readtime-label::before {

  content: "·";

  margin-right: 10px;

  color: #ccc;

}

.blog-post-text h2 {

  font-size: 1.5rem;

  font-weight: 700;

  color: #0B3D2C;

  margin: 0 0 14px;

  line-height: 1.35;

}

.blog-post-text h2 a {

  color: inherit;

  text-decoration: none;

  transition: color 0.2s;

}

.blog-post-text h2 a:hover {

  color: #2A7D2E;

}

.blog-post-text p {

  color: #555;

  font-size: 15px;

  line-height: 1.78;

  margin-bottom: 22px;

}

.blog-read-more-link {

  color: #2A7D2E;

  font-weight: 700;

  text-decoration: none;

  font-size: 15px;

  transition: color 0.2s;

}

.blog-read-more-link:hover {

  color: #0B3D2C;

}



/* ── CTA strip ── */

.blog-cta-section {

  background: linear-gradient(135deg, #0B3D2C 0%, #2e7d32 100%);

  padding: 72px 0;

  text-align: center;

}

.blog-cta-section h2 {

  color: #f9a825;

  font-size: 2rem;

  font-weight: 700;

  margin-bottom: 16px;

}

.blog-cta-section p {

  color: rgba(255,255,255,0.88);

  font-size: 16px;

  line-height: 1.7;

  margin-bottom: 32px;

}



/* ── Mobile ── */

@media (max-width: 991px) {

  .blog-post-row,

  .blog-post-row.reverse {

    flex-direction: column;

    gap: 24px;

  }

  .blog-post-img {

    flex: none;

    width: 100%;

  }

}

@media (max-width: 767px) {

  .blog-listing-section { padding: 40px 0 60px; }

  .blog-featured-img { min-height: 360px; }

  .blog-featured-overlay { padding: 24px 22px; }

  .blog-featured-content h2 { font-size: 1.35rem; }

  .blog-featured-excerpt { display: none; }

  .blog-post-img img { height: 220px; }

  .blog-post-text h2 { font-size: 1.25rem; }

  .blog-cta-section h2 { font-size: 1.5rem; }

  .blog-cta-section { padding: 50px 0; }

}