/* ----------------------------------------------------------------------------------------
* Project       : JB Roofing & Property Maintenance
* File          : Site stylesheet
* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. Scrolling Ticker css
06. About Us css
07. Our Services css
08. Our Project css
09. Why Choose Us css
10. How It Work css
11. Intro Video css
12. Our Testimonial css
13. Our Features css
14. Our Blog css
15. Footer css
16. About Us Page css
17. Services Page css
18. Service Single css
19. Projects Page css
20. Project Single css
21. Blog Archive css
22. Blog Single css
23. Team Page css
24. Team Single css
25. Pricing Page css
26. Testimonial Page css
27. Image Gallery css
28. Video Gallery css
29. FAQs Page css
30. Contact Us Page css
31. 404 Page css
32. Responsive css
-------------------------------------------------------------------------------------- */

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

html{
	scroll-behavior: smooth;
}

#about-us,
#services,
#our-work,
#faq,
#contact{
	scroll-margin-top: 110px;
}

:root{
	--primary-color			: #1E1E1E;
	--secondary-color		: #FFFFFFCC;
	--text-color			: #898989;
	--accent-color			: #2A55B0;
	--accent-gradient		: linear-gradient(135deg, #3E72D8 0%, #12266B 100%);
	--white-color			: #FFFFFF;
	--divider-color			: #EAEAEA;
	--dark-divider-color	: #FFFFFF1A;
	--error-color			: rgb(230, 87, 87);
	--default-font			: "Inter", sans-serif;
	--accent-font			: "Onest", sans-serif;
}

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

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

body{
	font: 400 16px/1.6em var(--default-font);
	background: var(--white-color);
	color: var(--text-color);
}

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

p{
	line-height: 1.8em;
	margin: 0 0 1.6em;
}

figure{ margin: 0; }
img{ max-width: 100%; }

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

/* container gutters */
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl{
	padding-left: 15px;
	padding-right: 15px;
}

.container{ max-width: 1300px; }

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

/* diagonal shine sweep used on hover-image cards */
.image-anime{
	position: relative;
	overflow: hidden;
}

.image-anime::after{
	content: '';
	position: absolute;
	inset: 50% auto auto 50%;
	width: 200%;
	height: 0;
	background: rgba(255, 255, 255, .3);
	transform: translate(-50%, -50%) rotate(-45deg);
	z-index: 1;
}

.image-anime:hover::after{
	height: 250%;
	background: transparent;
	transition: height 600ms linear, background-color 600ms linear;
}

/* GSAP-driven reveal wrapper for slide-in images */
.reveal{
	position: relative;
	display: inline-flex;
	visibility: hidden;
	overflow: hidden;
}

.reveal img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: left;
}

/* primary pill/box button: solid body + detached accent square carrying the arrow icon */
.btn-default{
	position: relative;
	z-index: 1;
	display: inline-block;
	font: 600 16px/1em var(--accent-font);
	text-transform: capitalize;
	color: var(--white-color);
	background: var(--primary-color);
	border: none;
	padding: 17px 16px;
	margin-right: 50px;
	transition: background-color .5s ease-in-out;
}

.btn-default:hover{
	background-color: transparent;
}

.btn-default::after{
	content: '';
	position: absolute;
	inset: 0 auto 0 0;
	z-index: -1;
	width: 0;
	background: var(--accent-gradient);
	transition: width .4s ease-in-out;
}

.btn-default:hover::after{
	width: 100%;
}

.btn-default::before{
	content: '';
	position: absolute;
	top: 0;
	right: -50px;
	width: 50px;
	height: 50px;
	display: flex;
	background: var(--accent-color) url('../images/arrow-btn.svg') no-repeat center / 24px auto;
	transition: background-color .4s ease-in-out;
}

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

.btn-default.btn-highlighted{
	background: transparent;
	color: var(--white-color);
	border: 1px solid var(--dark-divider-color);
	border-right: none;
	padding: 16px;
}

.btn-default.btn-highlighted::before{
	top: -1px;
	background-image: url('../images/arrow-highlighted-btn-.svg');
	background-size: 16px auto;
}

/* boot splash */
.preloader{
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--accent-gradient);
}

.loading-container{
	position: relative;
	width: 340px;
	height: 340px;
	margin: 40px auto;
}

.loading{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 1px solid transparent;
	border-color: transparent var(--white-color) transparent var(--white-color);
	transform-origin: center;
	animation: spin 1.5s linear infinite;
}

#loading-icon{
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 270px;
	transform: translate(-50%, -50%);
}

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

/* shared section heading block */
.section-row{
	text-align: center;
	margin-bottom: 60px;
}

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

.section-row .section-title p,
.section-row .section-title.dark-section p{
	width: 100%;
	max-width: 800px;
	margin: 20px auto 0;
}

.section-row .section-title.dark-section p{
	color: var(--secondary-color);
}

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

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

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

.section-title h3{
	position: relative;
	display: inline-block;
	font: 500 14px/1.2em var(--default-font);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--accent-color);
	padding-left: 25px;
	margin-bottom: 20px;
}

.section-title h3::before{
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	background: url(../images/icon-sub-heading-primary.svg) no-repeat center / cover;
}

.section-title h1,
.section-title h2{
	margin-bottom: 0;
	cursor: none;
}

.section-title h1{ font-size: 56px; }
.section-title h2{ font-size: 46px; }

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

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

.section-title.dark-section p{
	color: var(--secondary-color);
}

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

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

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

header.main-header{
	position: relative;
	z-index: 100;
	padding: 14px 0;
	border-bottom: 1px solid var(--dark-divider-color);
}

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

.header-sticky.hide{
	transform: translateY(-100%);
	transition: transform .3s ease-in-out;
}

.header-sticky.active{
	position: fixed;
	inset: 0 0 auto;
	transform: translateY(0);
	background: rgba(30, 30, 30, .72);
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	box-shadow: 0 8px 30px -10px rgba(0, 0, 0, .3);
}

.navbar{
	align-items: center;
}

.navbar-brand{
	position: relative;
	display: inline-block;
	margin: 0;
}

.navbar-brand img{
	width: 170px;
	height: auto;
	transition: opacity .3s ease-in-out, visibility .3s ease-in-out;
}

.navbar-brand .logo-sticky{
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	visibility: hidden;
}

.header-sticky.active .navbar-brand .logo-default{
	opacity: 0;
	visibility: hidden;
}

.header-sticky.active .navbar-brand .logo-sticky{
	opacity: 1;
	visibility: visible;
}

/* primary nav */
.main-menu .nav-menu-wrapper{
	flex: 1;
	margin-right: 80px;
	text-align: right;
}

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

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

.main-menu ul li a{
	display: inline-block;
	font: 400 16px var(--accent-font);
	text-transform: capitalize;
	color: #6c7890;
	padding: 15px 14px;
	transition: color .3s ease-in-out;
}

.header-sticky.active .main-menu ul li a{
	color: var(--white-color);
}

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

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

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

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

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

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

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

.main-menu ul ul li a{
	display: block;
	color: var(--white-color);
	padding: 6px 20px;
	transition: all .3s ease-in-out;
}

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

/* phone + hamburger cluster */
.header-btn{
	display: flex;
	align-items: center;
}

.header-contact-btn a{
	display: flex;
	align-items: center;
	font: 600 20px var(--accent-font);
	color: var(--accent-color);
}

.header-sticky.active .header-contact-btn a{
	color: var(--white-color);
}

.header-contact-btn a img{
	max-width: 24px;
	margin-right: 10px;
}

.header-btn .btn-popup{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-left: 40px;
	background: var(--white-color);
	border: none;
	border-radius: 50%;
	box-shadow: 5px 18px 20px rgba(0, 0, 0, .15);
	transition: background-color .3s ease-in-out;
}

.header-sticky.active .header-btn .btn-popup{
	background: var(--dark-divider-color);
}

.header-btn .btn-popup:hover{
	background: var(--primary-color);
}

.header-btn .btn-popup img{
	max-width: 14px;
}

.offcanvas-backdrop{
	z-index: 100;
}

/* keep Bootstrap from padding the body out when the drawer opens */
body:has(:not(.offcanvas)){
	padding-right: initial !important;
}

body:has(.offcanvas){
	padding-right: 0 !important;
}

/* right-hand contact drawer */
.offcanvas{
	position: fixed;
	inset: 0 -15px 0 auto;
	z-index: 1050;
	width: 100% !important;
	height: 100% !important;
	max-width: 375px;
	padding: 0;
	background: var(--primary-color) !important;
	border: none;
	border-radius: 0;
	transform: translateX(100%) !important;
	transition: transform .3s ease-in-out !important;
}

.offcanvas.show:not(.hiding),
.offcanvas.showing{
	transform: translateX(0) !important;
}

.offcanvas .offcanvas-body{
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 90px 34px 40px;
	overflow-y: auto;
}

.offcanvas .btn-close{
	position: absolute;
	top: 30px;
	right: 37px;
	z-index: 1;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background-color: transparent;
	background-size: 14px auto;
	border: 1px solid var(--white-color);
	border-radius: 50%;
	filter: brightness(0) invert(1);
	box-shadow: none;
	opacity: 1;
}

.offcanvas-header-brand{
	text-align: center;
	margin-bottom: 34px;
}

.offcanvas-header-brand h3{
	font-size: 24px;
	color: var(--white-color);
	margin-bottom: 10px;
}

.offcanvas-header-brand p{
	font-size: 14px;
	line-height: 1.6em;
	color: var(--secondary-color);
	margin: 0;
}

.offcanvas-contact-list{
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 34px;
}

.offcanvas-contact-item{
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 14px;
	transition: all .3s ease-in-out;
}

.offcanvas-contact-item:hover{
	background: rgba(255, 255, 255, .09);
	border-color: rgba(255, 255, 255, .25);
	transform: translateX(6px);
}

.offcanvas-contact-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	font-size: 16px;
	color: var(--white-color);
	background: var(--accent-gradient);
	border-radius: 50%;
}

.offcanvas-contact-text{
	display: flex;
	flex-direction: column;
	font: 600 15px var(--accent-font);
	color: var(--white-color);
}

.offcanvas-contact-text small{
	font: 400 11px var(--default-font);
	text-transform: uppercase;
	letter-spacing: .5px;
	color: rgba(255, 255, 255, .5);
	margin-bottom: 3px;
}

.offcanvas-social{
	text-align: center;
	padding-top: 30px;
	border-top: 1px solid var(--dark-divider-color);
}

.offcanvas-social p{
	font: 600 13px var(--accent-font);
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--white-color);
	margin-bottom: 18px;
}

.offcanvas-social ul{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.offcanvas-social ul li a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: transparent;
	border: 1px solid var(--dark-divider-color);
	border-radius: 50%;
	transition: all .3s ease-in-out;
}

.offcanvas-social ul li a:hover{
	background: var(--accent-gradient);
	border-color: var(--accent-color);
}

.offcanvas-social ul li a i{
	font-size: 16px;
	color: var(--accent-color);
	transition: color .3s ease-in-out;
}

.offcanvas-social ul li a:hover i{
	color: var(--white-color);
}

/* mobile slide-down menu (SlickNav) */
.responsive-menu,
.navbar-toggle{
	display: none;
}

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

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

.slicknav_icon .slicknav_icon-bar{
	display: block;
	width: 22px;
	height: 3px;
	background: var(--white-color);
	border-radius: 6px;
	margin: 4px auto !important;
	transition: transform .1s ease-in-out, opacity .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; }

.slicknav_btn.slicknav_open .slicknav_icon-bar:nth-child(1){
	transform: rotate(-45deg) translate(-5px, 5px);
}

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

.slicknav_btn.slicknav_open .slicknav_icon-bar:nth-child(3){
	transform: rotate(45deg) translate(-5px, -5px);
}

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

.slicknav_menu ul{
	margin: 5px 0;
}

.slicknav_menu ul ul{
	margin: 0;
}

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

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

.slicknav_menu ul ul li a{
	padding-left: 30px;
}

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

.slicknav_arrow::after{
	content: '\f107';
	font: 900 12px 'FontAwesome';
	position: absolute;
	top: 15px;
	right: 15px;
	color: var(--white-color);
	transition: transform .3s ease-out, color .3s ease-out;
}

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

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

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

/* left-to-right dark scrim so white nav/text reads over the photo */
.hero::before{
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(270deg, rgba(30, 30, 30, 0) 0%, rgba(30, 30, 30, .9) 100%),
		linear-gradient(0deg, rgba(0, 0, 0, 0) 88%, rgba(30, 30, 30, .6) 100%);
}

/* soft white fade at the very top so the header sits on a light strip */
.hero::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 270px;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .84) 30%, rgba(255, 255, 255, .65) 60%, rgba(255, 255, 255, 0) 100%);
}

.hero.hero-video .hero-bg-video{
	position: absolute;
	inset: 0;
}

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

.hero-content{
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 800px;
}

.hero-content .section-title{
	position: relative;
	z-index: 1;
	margin-bottom: 50px;
}

.hero-content .section-title h3{
	color: var(--white-color);
}

.hero-content .section-title p{
	max-width: 600px;
}

.hero-btn{
	margin-bottom: 50px;
}

.hero-btn .btn-default{
	min-width: 210px;
	text-align: center;
	background: var(--white-color);
	color: var(--primary-color);
}

.hero-btn .btn-default.btn-highlighted{
	margin-left: 40px;
	background: transparent;
	color: var(--white-color);
}

.hero-content-body{
	display: flex;
	align-items: center;
}

/* glass pill badges under the CTA buttons */
.hero-trust-badges{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 20px;
}

.hero-trust-badge{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 24px 8px 8px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 50px;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: background-color .3s ease-in-out, border-color .3s ease-in-out;
}

.hero-trust-badge:hover{
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .35);
}

.hero-trust-badge-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	font-size: 12px;
	color: var(--white-color);
	background: var(--accent-gradient);
	border-radius: 50%;
	box-shadow: 0 6px 16px -4px rgba(20, 45, 120, .6);
}

.hero-trust-badge-text{
	font: 600 15px var(--accent-font);
	letter-spacing: .2px;
	color: var(--white-color);
	white-space: nowrap;
}
/************************************/
/***   05. Scrolling Ticker css   ***/
/************************************/

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

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

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

.scrolling-content span{
	display: inline-block;
	vertical-align: middle;
	font: 700 40px var(--accent-font);
	color: var(--white-color);
}

.scrolling-content span img{
	width: 100%;
	max-width: 24px;
	margin-right: 40px;
}

@keyframes ticker-scroll{
	to{ transform: translateX(calc(-100% - var(--gap))); }
}
/************************************/
/***    	06. About Us css      ***/
/************************************/

.about-us{
	padding: 100px 0;
}

.about-us-images{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 30px;
	margin-right: 20px;
	padding-right: 30px;
	background: url('../images/about-bg-dot-shape-1.svg') no-repeat top 45px right;
}

.about-us-images::before{
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 80px;
	height: 60px;
	transform: translateX(-50%);
	background: url('../images/about-bg-dot-shape-2.svg') no-repeat bottom center;
}

.about-image-box-1,
.about-image-box-2{
	width: calc(50% - 15px);
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.about-image-box-2{
	margin-top: 75px;
}

.about-img-1, .about-img-2, .about-img-3, .about-img-4{
	width: 100%;
}

.about-img-1 figure, .about-img-2 figure, .about-img-3 figure, .about-img-4 figure{
	display: block;
	overflow: hidden;
}

.about-img-1 img{ aspect-ratio: 1 / 1.41; object-fit: cover; }
.about-img-2 img{ aspect-ratio: 1 / 0.99; object-fit: cover; }
.about-img-3 img{ aspect-ratio: 1 / 0.91; object-fit: cover; }
.about-img-4 img{ aspect-ratio: 1 / 1.41; object-fit: cover; }

.about-us-content-body{
	margin-bottom: 30px;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--divider-color);
}

.about-us-item{
	display: flex;
	align-items: center;
	margin-bottom: 30px;
}

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

.about-us-item .icon-box{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	flex-shrink: 0;
	margin-right: 30px;
	font-size: 30px;
	color: var(--white-color);
	background: var(--accent-gradient);
	border-radius: 16px;
}

.about-item-content{
	width: calc(100% - 110px);
}

.about-item-content h3{
	width: 100%;
	max-width: 400px;
	font-size: 20px;
}

.about-us-content-list{
	margin-bottom: 30px;
}

.about-us-content-list ul{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.about-us-content-list ul li{
	position: relative;
	width: calc(50% - 10px);
	padding-left: 25px;
	color: var(--primary-color);
}

.about-us-content-list ul li::before{
	content: '\f00c';
	position: absolute;
	top: 0;
	left: 0;
	font: 900 18px 'FontAwesome';
	color: var(--accent-color);
}
/************************************/
/***     07. Our Services css     ***/
/************************************/

.our-services{
	position: relative;
	padding: 100px 0;
	background: url('../images/service-bg.png') no-repeat center / cover;
}

.our-services::before{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0) -73%, rgba(22, 22, 22, .8) 2%, #1e1e1e 100%);
}

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

/* auto-scrolling service card marquee */
.service-cards-marquee{
	--gap: 24px;
	--fade: 220px;
	display: flex;
	gap: var(--gap);
	overflow: hidden;
	padding: 30px max(24px, calc((100vw - 1320px) / 2 + 24px)) 40px;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
}

.service-cards-content{
	flex-shrink: 0;
	display: flex;
	gap: var(--gap);
	min-width: 100%;
	animation: service-marquee 50s linear infinite;
}

.service-cards-marquee:hover .service-cards-content{
	animation-play-state: paused;
}

@keyframes service-marquee{
	to{ transform: translateX(calc(-100% - var(--gap))); }
}

.service-card{
	flex-shrink: 0;
	width: 320px;
	padding: 40px 30px 30px;
	background: var(--white-color);
	border-radius: 16px;
	transition: transform .4s ease-in-out, box-shadow .4s ease-in-out;
}

.service-card:hover{
	transform: translateY(-10px);
	box-shadow: 0 25px 40px -15px rgba(0, 0, 0, .35);
}

.service-card-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 25px;
	font-size: 24px;
	color: var(--white-color);
	background: var(--accent-gradient);
	border-radius: 12px;
}

.service-card h3{
	font-size: 21px;
	margin-bottom: 12px;
}

.service-card p{
	min-height: 78px;
	margin-bottom: 25px;
	font-size: 15px;
	line-height: 1.7em;
	color: var(--text-color);
}

.service-card-link{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 20px;
	font: 600 15px var(--accent-font);
	text-transform: capitalize;
	color: var(--primary-color);
	border-top: 1px solid var(--divider-color);
}

.service-card-link i{
	font-size: 13px;
	color: var(--accent-color);
	transition: transform .3s ease-in-out;
}

.service-card:hover .service-card-link i{
	transform: translateX(5px);
}
/************************************/
/***     08. Our Project css      ***/
/************************************/

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

.project-masonry-grid{
	position: relative;
	margin: 0 -12px;
}

.project-item-box{
	box-sizing: border-box;
	width: 33.3333%;
	padding: 0 12px 24px;
}

.project-item{
	position: relative;
	text-align: center;
	overflow: hidden;
	border-radius: 12px;
}

.project-image{
	position: relative;
}

.project-image::before{
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 53%, rgba(0, 0, 0, .8) 100%);
}

.project-image a{
	display: block;
	overflow: hidden;
	cursor: pointer;
}

.project-image img{
	display: block;
	width: 100%;
	object-fit: cover;
	transition: transform .4s ease-in-out;
}

.project-item-box:nth-child(6n+1) .project-image img{ aspect-ratio: 3 / 4; }
.project-item-box:nth-child(6n+2) .project-image img{ aspect-ratio: 4 / 5; }
.project-item-box:nth-child(6n+3) .project-image img{ aspect-ratio: 1 / 1; }
.project-item-box:nth-child(6n+4) .project-image img{ aspect-ratio: 4 / 3; }
.project-item-box:nth-child(6n+5) .project-image img{ aspect-ratio: 3 / 4; }
.project-item-box:nth-child(6n+0) .project-image img{ aspect-ratio: 1 / 1; }

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

.project-tag{
	position: absolute;
	top: 25px;
	left: 25px;
	z-index: 2;
	pointer-events: none;
}

.project-tag span{
	position: relative;
	display: block;
	padding: 6px 15px;
	font-size: 14px;
	font-weight: 500;
	text-transform: capitalize;
	color: var(--white-color);
	backdrop-filter: blur(80px);
	-webkit-backdrop-filter: blur(80px);
}

.project-tag span::before{
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--primary-color);
	opacity: .5;
}

.project-content{
	position: absolute;
	left: 25px;
	right: 25px;
	bottom: 25px;
	z-index: 2;
	text-align: left;
	pointer-events: none;
}

.project-content h3{
	font-size: 20px;
	color: var(--white-color);
}

.project-load-more{
	margin-top: 16px;
	text-align: center;
}
/************************************/
/***     09. Why Choose Us css    ***/
/************************************/

.why-choose-us{
	position: relative;
	overflow: hidden;
	background-color: var(--primary-color);
}

.why-choose-us .container-fluid{
	padding: 0;
}

.why-choose-us::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 40%;
	height: 100%;
	opacity: .2;
	background: linear-gradient(89.96deg, rgba(0, 0, 0, 0) 63%, #1e1e1e 100%), url('../images/why-choose-bg.png') no-repeat center / cover;
}

.why-choose-content{
	position: relative;
	z-index: 1;
	margin: 100px 0;
	padding-left: calc((100vw - 1300px) / 2);
}

.why-choose-item{
	display: flex;
	align-items: center;
	margin-bottom: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--dark-divider-color);
}

.why-choose-item .icon-box{
	margin-right: 30px;
}

.why-choose-item .icon-box img{
	max-width: 50px;
}

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

.why-choose-item-content h3{
	margin-bottom: 10px;
	font-size: 20px;
	text-transform: capitalize;
	color: var(--white-color);
}

.why-choose-item-content p{
	margin: 0;
	color: var(--secondary-color);
}

.why-choose-list ul{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.why-choose-list ul li{
	display: inline-block;
	width: calc(50% - 10px);
	font-size: 18px;
	color: var(--white-color);
}

.why-choose-list ul li img{
	max-width: 30px;
	margin-right: 10px;
}

.why-choose-images{
	position: relative;
	z-index: 1;
}

.why-choose-images,
.why-choose-images img,
.why-choose-images figure{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
}
/************************************/
/***     10. How It Work css      ***/
/************************************/

.how-it-work{
	padding: 100px 0;
}

.how-work-images{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
}

.how-work-img{
	width: calc(50% - 15px);
}

.how-work-img figure{
	display: block;
}

.how-work-img img{
	width: 100%;
	aspect-ratio: 1 / 1.04;
	object-fit: cover;
}

.how-work-icon-box{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.how-work-icon-box figure{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 106px;
	height: 106px;
	background: var(--accent-gradient);
	border: 6px solid var(--white-color);
	border-radius: 50%;
}

.how-work-icon-box figure img{
	max-width: 48px;
}

.how-work-step-box{
	margin-left: 30px;
}

.how-work-step-item{
	display: flex;
	margin-bottom: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--divider-color);
}

.how-work-step-item:last-child{
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.how-work-step-no{
	margin-right: 15px;
}

.how-work-step-no h3{
	font-size: 20px;
	color: var(--accent-color);
}

.how-work-step-content h3{
	margin-bottom: 20px;
	font-size: 20px;
}

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

.how-work-benefit-box{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 120px;
	margin-top: 80px;
	padding-top: 80px;
	border-top: 1px solid var(--divider-color);
}

.work-benefit-item{
	display: flex;
	align-items: center;
	width: calc(25% - 90px);
}

.work-benefit-item .icon-box{
	margin-right: 15px;
}

.work-benefit-item .icon-box img{
	max-width: 50px;
}

.work-benefits-item-content{
	width: calc(100% - 65px);
}

.work-benefits-item-content h3{
	font-size: 20px;
}
/************************************/
/***     11. Intro Video css      ***/
/************************************/

.intro-video{
	position: relative;
	overflow: hidden;
	padding: 100px 0;
	background: url('../images/intro-video-bg.jpg') no-repeat center / cover;
}

/* bottom-weighted scrim so the checklist text stays readable over the photo */
.intro-video::after{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 20, 20, .25) 0%, rgba(20, 20, 20, .35) 40%, rgba(20, 20, 20, .55) 65%, rgba(10, 10, 10, .94) 100%);
}

.intro-video .container{
	position: relative;
	z-index: 1;
}

.intro-video-box{
	margin-bottom: 150px;
}

.intro-video-box .video-play-button{
	margin-bottom: 30px;
	text-align: center;
}

.intro-video-box .video-play-button a{
	position: relative;
	display: block;
	max-width: 150px;
	margin: 0 auto;
	cursor: none;
}

.intro-video-box .video-play-button a::before{
	content: '\f04b';
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	transform: translate(-50%, -50%);
	font: 35px 'FontAwesome';
	color: var(--accent-color);
}

.intro-video-box .video-play-button img{
	max-width: 150px;
	animation: spin-slow 20s infinite linear;
}

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

.intro-video-box .section-title{
	max-width: 610px;
	margin: 0 auto;
	text-align: center;
}

.intro-video-box .section-title h2{
	color: var(--white-color);
}

.intro-video-list{
	padding-top: 50px;
	border-top: 1px solid var(--dark-divider-color);
}

.intro-video-list ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px 60px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.intro-video-list ul li{
	position: relative;
	padding-left: 25px;
	color: var(--white-color);
}

.intro-video-list ul li::after{
	content: '\f00c';
	position: absolute;
	top: 0;
	left: 0;
	font: 900 18px 'FontAwesome';
	color: var(--accent-color);
}
/************************************/
/***   12. Our Testimonial css    ***/
/************************************/

.our-testimonial{
	overflow: hidden;
	padding: 100px 0 110px;
	background-color: var(--white-color);
}

.our-testimonial .container{
	position: relative;
}

.testimonial-slider{
	position: relative;
}

.testimonial-slider .swiper{
	overflow: hidden;
	padding: 10px 4px;
}

.testimonial-slider .swiper-slide{
	width: 400px;
	height: auto;
}

.testimonial-item{
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 40px;
	text-align: left;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	box-shadow: 0 20px 45px -30px rgba(20, 40, 90, .2);
	transition: all .3s ease-in-out;
}

.testimonial-slider .swiper-slide-active .testimonial-item{
	border-color: transparent;
	box-shadow: 0 25px 55px -25px rgba(20, 40, 90, .3);
}

.testimonial-item-stars{
	margin-bottom: 18px;
	font-size: 15px;
	letter-spacing: 3px;
	color: #f4b740;
}

.testimonial-item-stars .fa-regular{
	color: var(--divider-color);
}

.testimonial-item > p{
	flex: 1;
	margin-bottom: 30px;
	font: 500 18px/1.7em var(--accent-font);
	color: var(--primary-color);
}

.testimonial-item-footer{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-top: 24px;
	border-top: 1px solid var(--divider-color);
}

.testimonial-item-footer h3{
	margin: 0;
	font-size: 17px;
}

.testimonial-item-date{
	font-size: 13px;
	color: var(--text-color);
	white-space: nowrap;
}

.testimonial-more-wrap{
	display: flex;
	justify-content: center;
	margin-top: 45px;
}

.testimonial-pagination{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 50px;
}

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

.testimonial-pagination .swiper-pagination-bullet-active{
	width: 26px;
	background: var(--accent-gradient);
	border-radius: 4px;
}
/************************************/
/***     13. Our Features css     ***/
/************************************/

.our-features{
	position: relative;
	padding: 100px 0;
	background: linear-gradient(270deg, rgba(0, 0, 0, 0) -72%, rgba(18, 18, 18, .94) 3%, #1e1e1e 106%), url('../images/features-bg.jpg') no-repeat center / cover;
}

/* rotating badge that straddles this section and the contact block below */
.contact-now-circle{
	position: absolute;
	bottom: 0;
	right: 8%;
	z-index: 99;
	transform: translateY(50%);
}

.contact-now-circle img{
	max-width: 176px;
	animation: spin-slow 20s infinite linear;
}

.our-features-images{
	margin-right: 20px;
}

.features-img-1 figure, .features-img-2 figure{
	display: block;
}

.features-img-1 img{
	width: 100%;
	aspect-ratio: 1 / 2.05;
	object-fit: cover;
}

.features-img-2 img{
	width: 100%;
	aspect-ratio: 1 / 1.42;
	object-fit: cover;
}

.features-counter{
	margin-bottom: 20px;
	text-align: center;
}

.features-counter h2{
	font-size: 150px;
	line-height: 1em;
	color: var(--accent-color);
}

.features-counter p{
	margin: 0;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--white-color);
}

/* FAQ accordion */
.faq-accordion .accordion-item{
	margin-bottom: 30px;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--dark-divider-color);
}

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

.faq-accordion .accordion-header .accordion-button{
	padding-right: 35px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2em;
	color: var(--white-color);
	transition: all .3s ease-in-out;
}

.faq-accordion .accordion-button:not(.collapsed){
	padding-bottom: 16px;
	color: var(--accent-color);
}

.faq-accordion .accordion-item .accordion-button::after,
.faq-accordion .accordion-item .accordion-button.collapsed::after{
	content: '\f054';
	position: absolute;
	top: 0;
	right: 20px;
	font: 16px 'FontAwesome';
	color: var(--white-color);
	transition: all .3s ease-in-out;
}

.faq-accordion .accordion-button:not(.collapsed)::after{
	color: var(--accent-color);
	transform: rotate(90deg);
}

.faq-accordion .accordion-item .accordion-body{
	padding-right: 35px;
}

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

.faq-accordion .accordion-item .accordion-body p{
	margin-bottom: 15px;
	color: var(--text-color);
}

.faq-accordion .accordion-item .accordion-body p:last-child{
	margin-bottom: 0;
}
/************************************/
/***     14. Contact Section css  ***/
/************************************/

.contact-section{
	position: relative;
	background-color: #F6F8FC;
	padding: 110px 0;
	overflow: hidden;
}

.contact-section-bg{
	position: absolute;
	top: -25%;
	right: -12%;
	width: 65%;
	height: 150%;
	background: radial-gradient(circle, rgba(62, 114, 216, 0.14) 0%, rgba(62, 114, 216, 0) 70%);
	z-index: 0;
	pointer-events: none;
}

.contact-section .container{
	position: relative;
	z-index: 1;
}

.contact-section .row.align-items-center{
	align-items: stretch;
}

.contact-details-col{
	display: flex;
	flex-direction: column;
	height: 100%;
}

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

.contact-details-list{
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
}

.contact-details-item{
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 16px 22px;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 14px;
	box-shadow: 0 15px 35px -20px rgba(20, 40, 90, 0.15);
	transition: all 0.3s ease-in-out;
}

.contact-details-item:hover{
	border-color: transparent;
	box-shadow: 0 20px 40px -18px rgba(20, 40, 90, 0.25);
	transform: translateX(8px);
}

.contact-details-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--accent-gradient);
	color: var(--white-color);
	font-size: 18px;
	flex-shrink: 0;
}

.contact-details-text{
	display: flex;
	flex-direction: column;
	color: var(--primary-color);
	font-family: var(--accent-font);
	font-size: 18px;
	font-weight: 600;
}

.contact-details-text small{
	font-family: var(--default-font);
	font-size: 12px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--text-color);
	margin-bottom: 3px;
}

.contact-section .hero-trust-badge{
	background: var(--white-color);
	border-color: var(--divider-color);
	box-shadow: 0 15px 35px -22px rgba(20, 40, 90, 0.18);
}

.contact-section .hero-trust-badge:hover{
	background: var(--white-color);
	border-color: var(--accent-color);
}

.contact-section .hero-trust-badge-text{
	color: var(--primary-color);
}

.contact-form-card{
	position: relative;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	padding: 50px;
	box-shadow: 0 40px 80px -35px rgba(20, 40, 90, 0.25);
}

.contact-form-card h3{
	font-size: 26px;
	margin-bottom: 10px;
}

.contact-form-card > p{
	margin-bottom: 30px;
}

.contact-form-card .form-group{
	margin-bottom: 20px;
}

.contact-form-card .form-control{
	width: 100%;
	font-family: var(--default-font);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.6em;
	color: var(--primary-color);
	background: #F7F8FA;
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	padding: 15px 20px;
	outline: none;
	box-shadow: none;
	transition: all 0.3s ease-in-out;
}

.contact-form-card select.form-control{
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23898989' d='M4 6l4 4 4-4H4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	padding-right: 44px;
}

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

.contact-form-card .form-control:focus{
	border-color: var(--accent-color);
	background: var(--white-color);
	box-shadow: 0 0 0 4px rgba(42, 85, 176, 0.1);
}

.contact-form-card textarea.form-control{
	resize: none;
}

.contact-form-card .form-group-btn{
	margin-top: 10px;
}

/************************************/
/***     14b. Pre Footer CTA css  ***/
/************************************/

.pre-footer-cta{
	padding: 60px 0 0;
	margin: 0 0 60px 0;
}

.pre-footer-cta-inner{
	position: relative;
	display: flex;
	align-items: center;
	padding: 70px 60px;
	border-radius: 28px;
	overflow: hidden;
	background:
		linear-gradient(90deg, var(--primary-color) 0%, var(--primary-color) 42%, rgba(30, 30, 30, 0.7) 62%, rgba(30, 30, 30, 0.25) 100%),
		url('../images/project-1.jpg') no-repeat;
	background-position: right center;
	background-size: cover;
}

.pre-footer-cta-content{
	position: relative;
	z-index: 1;
	max-width: 600px;
}

.pre-footer-cta-content h2{
	color: var(--white-color);
	font-size: 42px;
	line-height: 1.25em;
	margin-bottom: 24px;
}

.pre-footer-cta-price{
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 24px;
}

.pre-footer-cta-price span{
	color: var(--secondary-color);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 600;
}

.pre-footer-cta-price strong{
	font-family: var(--accent-font);
	font-size: 48px;
	font-weight: 800;
	line-height: 1em;
	background: var(--accent-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.pre-footer-cta-content p{
	color: var(--secondary-color);
	font-size: 17px;
	line-height: 1.7em;
	max-width: 480px;
	margin-bottom: 36px;
}

.pre-footer-cta-btn{
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 24px;
	background: var(--accent-gradient);
	color: var(--white-color);
	font-family: var(--accent-font);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 14px;
	padding: 8px 8px 8px 32px;
	border-radius: 50px;
	transition: all 0.3s ease-in-out;
}

.pre-footer-cta-btn:hover{
	filter: brightness(1.12);
	transform: translateY(-3px);
}

.pre-footer-cta-btn-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--white-color);
	color: var(--primary-color);
	font-size: 15px;
	flex-shrink: 0;
	transform: rotate(-45deg);
}

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

.main-footer{
	position: relative;
	padding: 100px 0 50px;
	background: var(--primary-color);
}

.main-footer::before{
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	opacity: .05;
	background: url('../images/footer-bg.png') no-repeat left bottom;
}

.main-footer::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	height: 3px;
	background: var(--accent-gradient);
}

.about-footer{
	position: relative;
	z-index: 1;
	margin-bottom: 60px;
	text-align: center;
}

.footer-logo img{
	width: 220px;
	height: auto;
	filter: drop-shadow(0 8px 24px rgba(62, 114, 216, .25));
}

.footer-links{
	position: relative;
	z-index: 1;
	height: 100%;
	margin-right: 15px;
	padding-right: 15px;
}

.main-footer .col-lg-4:last-child .footer-links{
	margin-right: 0;
	padding-right: 0;
}

.footer-links::before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	border: 1px solid var(--dark-divider-color);
}

.main-footer .col-lg-4:last-child .footer-links::before{
	display: none;
}

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

.footer-links p{
	margin-bottom: 30px;
	color: var(--secondary-color);
}

/* contact rows: glass icon that fills solid blue on hover */
.footer-contact-item{
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	transition: transform .3s ease-in-out;
}

.footer-contact-item:hover{
	transform: translateX(6px);
}

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

.footer-contact-item .icon-box{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	margin-right: 20px;
	background: var(--accent-gradient);
	border: 1px solid transparent;
	border-radius: 50%;
	transition: all .3s ease-in-out;
}

.footer-contact-item .icon-box img{
	max-width: 20px;
	filter: brightness(0) invert(1);
	transition: filter .3s ease-in-out;
}

.footer-contact-content{
	flex: 1;
}

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

.footer-contact-content p a{
	color: var(--white-color);
	transition: color .3s ease-in-out;
}

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

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

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

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

.footer-social-links ul li a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, .04);
	border: 1px solid var(--dark-divider-color);
	border-radius: 50%;
	transition: all .3s ease-in-out;
}

.footer-social-links ul li:hover a{
	background: var(--accent-gradient);
	border-color: transparent;
	transform: translateY(-4px);
}

.footer-social-links ul li a i{
	font-size: 16px;
	color: var(--accent-color);
	transition: color .3s ease-in-out;
}

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

/* quick-links column */
.footer-quicklinks ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-quicklinks ul li{
	margin-bottom: 14px;
}

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

.footer-quicklinks ul li a{
	position: relative;
	display: inline-block;
	color: var(--secondary-color);
	transition: all .3s ease-in-out;
}

.footer-quicklinks ul li:hover a{
	color: var(--white-color);
	transform: translateX(6px);
}

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

.footer-copyright-text{
	text-align: end;
}

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

.footer-copyright-text-left{
	text-align: left;
}

.footer-credit a{
	font-weight: 600;
	color: var(--white-color);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color .3s ease-in-out;
}

.footer-credit a:hover{
	color: var(--accent-color);
}

/************************************/
/***     16. Page Banner css      ***/
/************************************/

.page-banner{
	position: relative;
	margin-top: -98px;
	padding: 220px 0 90px;
	text-align: center;
	background: var(--primary-color) url('../images/hero-bg.jpg') no-repeat center / cover;
}

.page-banner::before{
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(20, 20, 20, .2) 0%, rgba(20, 20, 20, .45) 22%, rgba(20, 20, 20, .72) 45%, rgba(20, 20, 20, .88) 70%, rgba(20, 20, 20, .92) 100%);
}

/* soft white fade at the very top so the header sits on a light strip, matching the home page hero — eased with extra stops so it melts into the dark overlay instead of cutting off */
.page-banner::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 320px;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(180deg,
		#fff 0%,
		rgba(255, 255, 255, .92) 12%,
		rgba(255, 255, 255, .74) 28%,
		rgba(255, 255, 255, .5) 45%,
		rgba(255, 255, 255, .28) 62%,
		rgba(255, 255, 255, .12) 80%,
		rgba(255, 255, 255, 0) 100%);
}

.page-banner .container{
	position: relative;
	z-index: 1;
}

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

.page-banner .section-title h1{
	font-size: 48px;
}

.page-banner-compact{
	padding: 190px 0 70px;
}

.page-banner-compact::after{
	height: 260px;
}

.page-banner-btn{
	margin: 0;
}

/************************************/
/***     17. Reviews Page css     ***/
/************************************/

.reviews-section{
	padding: 100px 0;
}
.reviews-section .row {
    row-gap: 30px;
}
.review-card{
	display: flex;
	flex-direction: column;
	height: 100%;
	margin-bottom: 30px;
	padding: 36px;
	text-align: left;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	box-shadow: 0 20px 45px -30px rgba(20, 40, 90, .2);
	transition: all .3s ease-in-out;
}

.review-card:hover{
	border-color: transparent;
	box-shadow: 0 25px 55px -25px rgba(20, 40, 90, .3);
}

.review-card-stars{
	margin-bottom: 16px;
	font-size: 15px;
	letter-spacing: 3px;
	color: #f4b740;
}

.review-card-stars .fa-regular{
	color: var(--divider-color);
}

.review-card > p{
	flex: 1;
	margin-bottom: 24px;
	font: 500 16px/1.7em var(--accent-font);
	color: var(--primary-color);
}

.review-card-footer{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-top: 20px;
	border-top: 1px solid var(--divider-color);
}

.review-card-name{
	font-weight: 700;
	color: var(--primary-color);
}

.review-card-date{
	font-size: 13px;
	color: var(--text-color);
	white-space: nowrap;
}

.reviews-empty{
	max-width: 480px;
	margin: 0 auto;
	padding: 60px 20px;
	text-align: center;
}

.reviews-empty i{
	font-size: 46px;
	color: var(--accent-color);
	margin-bottom: 20px;
}

.reviews-empty h3{
	margin-bottom: 12px;
	font-size: 24px;
}

.reviews-empty p{
	margin-bottom: 26px;
	color: var(--text-color);
}

/************************************/
/***   18. Review Form/Admin css  ***/
/************************************/

.review-form-section{
	padding: 100px 0;
	background: #F6F8FC;
}

.review-form-card{
	max-width: 100%;
}

.review-form-honeypot{
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.review-form-errors{
	margin-bottom: 24px;
	padding: 16px 20px;
	background: #FDECEC;
	border: 1px solid #F3C4C4;
	border-radius: 10px;
}

.review-form-errors ul{
	margin: 0;
	padding-left: 18px;
	color: #B42318;
}

.review-form-success{
	padding: 20px 0 10px;
	text-align: center;
}

.review-form-success i{
	font-size: 50px;
	color: #1f9d55;
	margin-bottom: 16px;
}

.review-form-success h3{
	margin-bottom: 10px;
	font-size: 26px;
}

.review-form-success p{
	max-width: 420px;
	margin: 0 auto 26px;
	color: var(--text-color);
}

.review-star-select{
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	height: 100%;
	min-height: 55px;
	padding: 0 20px;
	background: #F7F8FA;
	border: 1px solid var(--divider-color);
	border-radius: 10px;
}

.review-star{
	padding: 0;
	font-size: 20px;
	color: var(--divider-color);
	background: none;
	border: none;
	cursor: pointer;
	transition: color .2s ease-in-out, transform .2s ease-in-out;
}

.review-star.is-active{
	color: #f4b740;
	transform: scale(1.08);
}

.review-star-label{
	margin-left: 8px;
	font-size: 13px;
	color: var(--text-color);
}

/* Admin dashboard */
.admin-section{
	padding: 80px 0 100px;
}

.admin-flash{
	margin-bottom: 30px;
	padding: 14px 20px;
	font-weight: 600;
	color: #14532d;
	background: #E7F7EE;
	border: 1px solid #BFE8CE;
	border-radius: 10px;
}

.admin-section-title{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 24px;
	font-size: 24px;
}

.admin-section-title-spaced{
	margin-top: 60px;
}

.admin-section-title span{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 8px;
	font-size: 14px;
	color: var(--white-color);
	background: var(--accent-gradient);
	border-radius: 50px;
}

.admin-empty{
	padding: 20px 0;
	color: var(--text-color);
}

.admin-review-list{
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.admin-review-row{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	padding: 24px;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 14px;
}

.admin-review-stars{
	flex-shrink: 0;
	font-size: 14px;
	letter-spacing: 2px;
	color: #f4b740;
}

.admin-review-stars .fa-regular{
	color: var(--divider-color);
}

.admin-review-body{
	flex: 1;
	min-width: 240px;
}

.admin-review-body p{
	margin-bottom: 8px;
	color: var(--primary-color);
}

.admin-review-meta{
	font-size: 13px;
	color: var(--text-color);
}

.admin-review-actions{
	display: flex;
	flex-shrink: 0;
	gap: 10px;
}

.admin-btn{
	padding: 10px 18px;
	font: 600 13px var(--accent-font);
	text-transform: uppercase;
	letter-spacing: .3px;
	color: var(--white-color);
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: filter .2s ease-in-out;
}

.admin-btn:hover{
	filter: brightness(1.1);
}

.admin-btn-approve{
	background: #1f9d55;
}

.admin-btn-unapprove{
	background: #b98900;
}

.admin-btn-delete{
	background: #d64545;
}

/************************************/
/***       32. Responsive Css     ***/
/************************************/

@media only screen and (max-width: 1024px){
	
	.main-menu ul li{
		margin: 0;
	}
}

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

	.contact-details-col{
	margin-bottom: 40px;
	}

	.pre-footer-cta-inner{
	min-height: unset;
	padding: 50px 40px;
	background:
	linear-gradient(90deg, var(--primary-color) 0%, var(--primary-color) 60%, rgba(30, 30, 30, 0.75) 85%, rgba(30, 30, 30, 0.35) 100%),
	url('../images/project-1.jpg') no-repeat;
	background-position: right center;
	background-size: cover;
	}

	.pre-footer-cta-content h2{
	font-size: 32px;
	}

	.pre-footer-cta-price strong{
	font-size: 38px;
	}

	.service-cards-marquee{
	--fade: 100px;
	}

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

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

	.header-btn{
	display: none;
	}

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

	.section-row .section-title{
	margin-right: 0px;
	}

	.section-row .section-title p{
	max-width: 100%;
	margin-top: 15px;
	}

	.section-row .section-title.dark-section p{
	max-width: 100%;
	margin-top: 15px;
	}

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

	.section-title h3{
	margin-bottom: 15px;
	}

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

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

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

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

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

	.hero{
	padding: 150px 0 80px;
	margin-top: -80px;
	}

	.hero.hero-slider-layout .hero-slide{
	padding: 230px 0 160px;
	}

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

	.hero-content{
	max-width: 700px;
	}

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

	.hero-btn{
	margin-bottom: 30px;
	}

	.hero-btn .btn-default.btn-highlighted{
	margin-left: 30px;
	}

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

	.scrolling-ticker-box{
	--gap: 20px;
	}

	.scrolling-content{
	padding: 8px 0;
	}

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

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

	.about-us{
	padding: 50px 0;
	}

	.about-us-images{
	max-width: 80%;
	margin: 0 auto;
	margin-bottom: 30px;
	}

	.about-image-box-2{
	margin-top: 50px;
	}

	.about-us-item .icon-box{
	width: 70px;
	height: 70px;
	margin-right: 20px;
	font-size: 26px;
	}

	.about-item-content{
	width: calc(100% - 90px);
	}

	.our-services{
	padding: 50px 0;
	}

	.our-service-nav ul li .nav-link{
	font-size: 16px;
	}

	.our-service-nav ul li .nav-link::before{
	bottom: -22px;
	left: -2px;
	}

	.our-service-nav ul li .nav-link.active:before,
	.our-service-nav ul li .nav-link:hover:before{
	width: 110%;
	}

	.our-service-nav ul li:last-child .nav-link:before{
	width: 102%;
	}

	.our-service-nav ul li .nav-link img{
	max-width: 22px;
	margin-right: 2px;
	}

	.our-project{
	padding: 50px 0;
	}

	.project-item-box{
	width: 50%;
	}

	.project-tag{
	top: 15px;
	left: 15px;
	}

	.project-tag span{
	padding: 4px 10px;
	}

	.project-content{
	bottom: 15px;
	left: 15px;
	right: 15px;
	}

	.why-choose-us{
	padding: 50px 0 0;
	}

	.why-choose-content{
	padding: 0 15px;
	margin: 0 0 30px 0;
	}

	.why-choose-item{
	margin-bottom: 30px;
	padding-bottom: 30px;
	}

	.how-it-work{
	padding: 50px 0;
	}

	.how-work-images{
	margin-bottom: 30px;
	}

	.how-work-icon-box figure{
	width: 86px;
	height: 86px;
	}

	.how-work-icon-box figure img{
	max-width: 38px;
	}

	.how-work-step-box{
	margin-left: 0px;
	}

	.how-work-step-item{
	margin-bottom: 30px;
	padding-bottom: 30px;
	}

	.how-work-benefit-box{
	margin-top: 40px;
	padding-top: 40px;
	gap: 20px 30px;
	}

	.work-benefit-item{
	width: calc(50% - 15px);
	display: flex;
	align-items: center;
	}

	.work-benefit-item .icon-box img{
	max-width: 40px;
	}

	.work-benefits-item-content{
	width: calc(100% - 55px);
	}

	.work-benefits-item-content h3{
	font-size: 18px;
	}

	.intro-video{
	padding: 50px 0;
	}

	.intro-video-box{
	margin-bottom: 100px;
	}

	.intro-video-box .video-play-button img{
	max-width: 130px;
	}

	.intro-video-box .video-play-button a::before{
	font-size: 30px;
	}

	.intro-video-box .section-title{
	max-width: 510px;
	}

	.intro-video-list{
	padding-top: 30px;
	}

	.intro-video-list ul{
	gap: 30px;
	}

	.our-testimonial{
	padding: 60px 0 70px;
	}

	.testimonial-slider .swiper-slide{
	width: 340px;
	}

	.testimonial-item{
	padding: 30px 24px;
	}

	.our-features{
	padding: 50px 0;
	}

	.contact-now-circle img{
	max-width: 100px;
	}

	.our-features-images{
	margin-right: 0;
	margin-bottom: 30px;
	}

	.features-img-1 img{
	aspect-ratio: 1 / 1.55;
	}

	.features-img-2 img{
	aspect-ratio: 1 / 1.1;
	}

	.features-counter h2{
	font-size: 100px;
	}

	.faq-accordion .accordion-item{
	margin-bottom: 20px;
	padding-bottom: 20px;
	}

	.faq-accordion .accordion-header .accordion-button{
	padding-right: 30px;
	}

	.faq-accordion .accordion-button:not(.collapsed){
	padding-bottom: 10px;
	}

	.faq-accordion .accordion-item .accordion-button::after,
	.faq-accordion .accordion-item .accordion-button.collapsed::after{
	right: 10px;
	}

	.faq-accordion .accordion-item .accordion-body{
	padding-right: 30px;
	}

	.main-footer{
	padding: 50px 0 25px;
	}

	.main-footer::before{
	background-size: 50% auto;
	}

	.about-footer{
	margin-bottom: 30px;
	}

	.footer-links{
	height: auto;
	padding-right: 0px;
	margin-right: 0px;
	margin-bottom: 30px;
	}

	.footer-links::before{
	right: -15px;
	}

	.footer-links h3{
	margin-bottom: 20px;
	}

	.footer-links p{
	margin-bottom: 20px;
	}

	.footer-contact-item{
	margin-bottom: 10px;
	}

	.footer-contact-item .icon-box{
	margin-right: 10px;
	}

	.footer-contact-item .icon-box img{
	max-width: 24px;
	}

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

	.footer-copyright{
	padding: 25px 0 0;
	margin-top: 0px;
	}

	.skill-counter-item .icon-box{
	margin-right: 10px;
	}

	.skill-counter-item .icon-box img{
	max-width: 40px;
	}

	.service-entry-item .icon-box img{
	max-width: 40px;
	}

	.project-goal-item .icon-box img{
	max-width: 40px;
	}

	.contact-info-item .icon-box{
	width: 60px;
	height: 60px;
	margin-bottom: 20px;
	}

	.contact-info-item .icon-box img{
	max-width: 30px;
	}

	.contact-form-content form .form-control{
	padding: 14px 16px;
	}

}

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

	.page-banner{
	padding: 150px 0 60px;
	margin-top: -80px;
	}

	.page-banner-compact{
	padding: 140px 0 50px;
	}

	.page-banner .section-title h1{
	font-size: 32px;
	}

	.reviews-section{
	padding: 50px 0;
	}

	.review-form-section{
	padding: 50px 0;
	}

	.review-card{
	padding: 28px;
	}

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

	.admin-review-row{
	flex-direction: column;
	align-items: flex-start;
	}

	.admin-review-actions{
	width: 100%;
	}

	.admin-review-actions form{
	flex: 1;
	}

	.admin-btn{
	width: 100%;
	}

	.pre-footer-cta{
	padding: 40px 0 0;
	}

	.pre-footer-cta-inner{
	padding: 40px 24px;
	border-radius: 20px;
	background:
	linear-gradient(180deg, var(--primary-color) 45%, rgba(30, 30, 30, 0.55) 100%),
	url('../images/project-1.jpg') no-repeat;
	background-position: center center;
	background-size: cover;
	}

	.pre-footer-cta-content h2{
	font-size: 26px;
	}

	.pre-footer-cta-price strong{
	font-size: 32px;
	}

	.pre-footer-cta-content p{
	font-size: 15px;
	}

	.pre-footer-cta-btn{
	font-size: 12px;
	padding: 6px 6px 6px 24px;
	gap: 16px;
	}

	.pre-footer-cta-btn-icon{
	width: 36px;
	height: 36px;
	font-size: 13px;
	}

	.service-cards-marquee{
	--fade: 30px;
	--gap: 16px;
	padding: 20px 30px 30px;
	}

	.service-card{
	width: 78vw;
	max-width: 280px;
	padding: 28px 24px 24px;
	}

	.service-card-icon{
	width: 52px;
	height: 52px;
	font-size: 20px;
	margin-bottom: 18px;
	}

	.service-card h3{
	font-size: 18px;
	margin-bottom: 10px;
	}

	.service-card p{
	font-size: 14px;
	line-height: 1.6em;
	margin-bottom: 18px;
	min-height: 0;
	}

	.service-card-link{
	padding-top: 14px;
	}

	.offcanvas .offcanvas-body{
	padding: 70px 28px 30px;
	}

	.offcanvas-header-brand{
	margin-bottom: 24px;
	}

	.offcanvas-header-brand h3{
	font-size: 21px;
	}

	.offcanvas-contact-list{
	gap: 10px;
	margin-bottom: 24px;
	}

	.offcanvas-contact-item{
	padding: 11px 16px;
	}

	.offcanvas-social{
	padding-top: 20px;
	}

	.main-header .navbar-brand img{
	max-width: 80%;
	}

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

	.section-title h3{
	font-size: 12px;
	padding-left: 23px;
	}

	.section-title h3::before{
	width: 14px;
	height: 14px;
	}

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

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

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

	.hero{
	padding: 115px 0 40px;
	margin-top: -70px;
	}

	.hero-content{
	max-width: 100%;
	}

	.hero-content .section-title{
	margin-bottom: 20px;
	}

	.hero-content .section-title p{
	font-size: 14px;
	line-height: 1.6em;
	margin-top: 12px;
	}

	.hero-btn{
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
	}

	.hero-btn .btn-default{
	flex: 1;
	min-width: 0;
	margin-right: 0;
	padding: 14px 10px;
	font-size: 13px;
	white-space: nowrap;
	}

	.hero-btn .btn-default::before{
	display: none;
	}

	.hero-btn .btn-default.btn-highlighted{
	margin-top: 0;
	margin-left: 0px;
	}

	.hero-trust-badges{
	gap: 10px;
	}

	.hero-trust-badge{
	padding: 6px 16px 6px 6px;
	gap: 8px;
	}

	.hero-trust-badge-icon{
	width: 24px;
	height: 24px;
	font-size: 10px;
	}

	.hero-trust-badge-text{
	font-size: 12.5px;
	}

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

	.scrolling-content{
	padding: 3px 0;
	}

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

	.about-us-images{
	max-width: 100%;
	margin-bottom: 30px;
	padding-right: 20px;
	gap: 20px;
	}

	.about-image-box-1,
	.about-image-box-2{
	width: calc(50% - 10px);
	gap: 20px;
	}

	.about-us-item{
	margin-bottom: 20px;
	}

	.about-item-content h3{
	max-width: 100%;
	font-size: 18px;
	}

	.about-us-content-list ul{
	gap: 10px;
	}

	.about-us-content-list ul li{
	width: 100%;
	}

	.our-service-nav ul li .nav-link{
	font-size: 14px;
	}

	.our-service-nav ul li .nav-link::before{
	display: none;
	}

	.project-masonry-grid{
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	gap: 14px;
	margin: 0;
	padding: 4px 24px 20px;
	scrollbar-width: none;
	}

	.project-masonry-grid::-webkit-scrollbar{
	display: none;
	}

	.project-item-box{
	width: 76vw;
	max-width: 300px;
	flex: 0 0 auto;
	padding: 0;
	scroll-snap-align: start;
	}

	.project-item-box .project-image img{
	aspect-ratio: 4 / 5 !important;
	}

	.project-load-more{
	display: none;
	}

	.project-content h3{
	font-size: 18px;
	}

	.why-choose-item{
	margin-bottom: 20px;
	padding-bottom: 20px;
	}

	.why-choose-item .icon-box img{
	max-width: 40px;
	}

	.why-choose-item .icon-box{
	margin-right: 15px;
	}

	.why-choose-item-content{
	width: calc(100% - 55px);
	}

	.why-choose-item-content h3{
	font-size: 18px;
	margin-bottom: 5px;
	}

	.why-choose-list ul li{
	width: 100%;
	font-size: 16px;
	}

	.why-choose-list ul li img{
	max-width: 24px;
	}

	.how-work-images{
	gap: 20px;
	}

	.how-work-img{
	width: calc(50% - 10px);
	}

	.how-work-icon-box figure{
	width: 66px;
	height: 66px;
	}

	.how-work-icon-box figure img{
	max-width: 28px;
	}

	.how-work-step-item{
	margin-bottom: 20px;
	padding-bottom: 20px;
	}

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

	.how-work-benefit-box{
	margin-top: 30px;
	padding-top: 30px;
	gap: 20px 20px;
	}

	.work-benefit-item{
	width: calc(50% - 10px);
	}

	.work-benefit-item .icon-box{
	margin-right: 10px;
	}

	.work-benefit-item .icon-box img{
	max-width: 34px;
	}

	.work-benefits-item-content{
	width: calc(100% - 34px);
	}

	.work-benefits-item-content h3{
	font-size: 14px;
	}

	.intro-video{
	padding: 40px 0;
	}

	.intro-video-box{
	margin-bottom: 40px;
	}

	.intro-video-box .video-play-button{
	margin-bottom: 20px;
	}

	.intro-video-box .video-play-button img{
	max-width: 100px;
	}

	.intro-video-box .video-play-button a::before{
	font-size: 24px;
	}

	.intro-video-list{
	padding-top: 20px;
	}

	.intro-video-list ul{
	justify-content: left;
	}

	.intro-video-list ul{
	gap: 10px;
	}

	.testimonial-slider .swiper-slide{
	width: 82vw;
	max-width: 320px;
	}

	.our-testimonial{
	padding: 50px 0 60px;
	}

	.testimonial-item{
	padding: 24px 22px;
	}

	.testimonial-item-stars{
	margin-bottom: 12px;
	font-size: 13px;
	}

	.testimonial-item > p{
	font-size: 15px;
	line-height: 1.6em;
	margin-bottom: 18px;
	}

	.testimonial-item-footer{
	padding-top: 16px;
	}

	.testimonial-item-footer h3{
	font-size: 16px;
	}

	.testimonial-pagination{
	margin-top: 30px;
	}

	.testimonial-more-wrap{
	margin-top: 30px;
	}

	.features-img-1 img{
	aspect-ratio: 1 / 2.05;
	}

	.features-img-2 img{
	aspect-ratio: 1 / 1.29;
	}

	.features-counter h2{
	font-size: 50px;
	}

	.features-counter p{
	font-size: 14px;
	}

	.faq-accordion .accordion-header .accordion-button{
	font-size: 18px;
	}

	.contact-now-circle{
	display: none;
	}

	.about-footer{
	text-align: left;
	}

	.footer-links h3{
	font-size: 18px;
	margin-bottom: 15px;
	}

	.footer-links p{
	margin-bottom: 15px;
	}

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

	.footer-social-links ul li{
	margin-right: 10px;
	}

	.footer-copyright-text{
	text-align: center;
	}

	.our-approach-item .icon-box{
	margin-right: 20px;
	}

	.our-approach-item .icon-box img{
	max-width: 40px;
	}

	.service-single-slider .swiper-slide img{
	aspect-ratio: 1 / 0.75;
	}

	.service-entry-item .icon-box{
	margin-bottom: 10px;
	}

	.service-entry-item .icon-box img{
	max-width: 34px;
	}

	.project-single-slider .swiper-slide img{
	aspect-ratio: 1 / 0.75;
	}

	.pricing-btn .btn-default{
	padding: 14px;
	}

	.contact-form-content form .form-control{
	padding: 12px 14px;
	}

}