/* ----------------------------------------------------------------------------------------
* Author        : Awaiken
* Template Name : Builtup - Construction HTML Template
* File          : CSS File
* Version       : 1.0
* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. About Us css
06. Our Services css
07. Why Choose Us css
08. Our Project css
09. Our CTA css
10. Our Testimonial css
11. Our Faqs css
12. Latest News css
13. Our Contact Us css
14. Footer css
15. About us Page css
16. Services Page css
17. Service Single css
18. Blog Archive css
19. Blog Single css
20. Project Page css
21. Project Single css
22. Team Page css  
23. Contact us Page css
24.	FAQs Page css
25. 404 Page css
26. Responsive css
-------------------------------------------------------------------------------------- */

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

:root{
	--primary-color			: #12223B;
	--secondary-color		: #E9F7FE;
	--text-color			: #667282;
	--accent-color			: #FFB703;
	--white-color			: #FFFFFF;
	--divider-color			: #12223B30;
	--dark-divider-color	: #FFFFFF20;
	--overlay-color			: #00000066;
	--error-color			: rgb(230, 87, 87);
	--default-font			: "DM Sans", sans-serif;
	--accent-font			: "Manrope", sans-serif;
}

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

body{
	font-family: var(--default-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6em;
	color: var(--text-color);
	background-color: var(--white-color);
}

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

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

figure{
	margin: 0;
}

img{
	max-width: 100%;
}

a{
	text-decoration: none;
}

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

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

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

.container{
	max-width: 1300px;
	margin: 0 auto;
}

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

.image-anime{
	position: relative;
	overflow: hidden;
}

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

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

.reveal{
	position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    visibility: hidden;
    overflow: hidden;
}

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

.row{
    margin-right: -15px;
    margin-left: -15px;
}

.row > *{
	padding-right: 15px;
	padding-left: 15px;
}

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

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

.btn-default{
	display: inline-block;
	font-family: var(--accent-font);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3em;
	text-transform: capitalize;
	color: var(--white-color);
	background: var(--accent-color);
	border-radius: 12px;
	padding: 20px 60px 20px 30px;
	border: none;
	transition: 0.5s ease-in-out;
	position: relative;
	overflow: hidden;
	z-index: 1;
	white-space: nowrap;
}

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

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

.btn-default::after{ 
	content: '';
    display: block;
    position: absolute;
	top: 0;
    left: 0;
    bottom: 0;
	width: 0;
	height: 106%;
    background: var(--primary-color);
	border-radius: 12px;
    transition: 0.4s ease-in-out;
	z-index: -1;
}

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

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

.btn-default.btn-highlighted{
	background-color: transparent;
	border: 1px solid var(--white-color);
	color: var(--white-color);
	padding: 19px 60px 19px 30px;
}

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

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

.btn-large{
	font-size: 20px;
	padding: 20px 65px 20px 30px;
}

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

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

.light-bg-section{
	margin: 0 25px;
}

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

/* Override section-row margin for projects page */
.page-projects .section-row{
	margin-bottom: 40px !important;
}

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

.section-row .section-title p{
	width: 100%;
	max-width: 850px;
	margin: 0 auto;
	margin-top: 30px;
}

.section-btn{
	line-height: 0.8em;
}

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

.section-title h1{
	font-size: 70px;
	font-weight: 800;
	line-height: 1.1em;
	letter-spacing: -0.03em;
	margin-bottom: 0;
	cursor: none;
}

.section-title h2{
	font-size: 56px;
	font-weight: 800;
	line-height: 1.1em;
	letter-spacing: -0.03em;
	margin-bottom: 0;
	cursor: none;
}

.section-title h3{
	color: var(--accent-color);
	font-size: 16px;
    font-weight: 800;
	line-height: 1.1em;
	letter-spacing: 0.13em;
    text-transform: uppercase;
    margin-bottom: 15px;
}

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

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

.section-title-content p{
	margin: 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{
	background-color: transparent;
	border-bottom: 1px solid var(--dark-divider-color);
	position: relative;
	z-index: 100;
	margin: 0px 40px;
}

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

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

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

.navbar{
	padding: 20px 80px;
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	min-height: 140px;
}

.navbar-brand{
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	flex-shrink: 0;
	margin-right: 30px;
}

.navbar-brand img{
	max-width: 260px;
	max-height: 100px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* Logo text styles - altura text after logo */
.logo-text{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-left: 10px;
	margin-right: 0;
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
	align-self: center;
	height: 100%;
}

.logo-text-white{
	color: #ffffff;
	display: inline;
	line-height: inherit;
}

.logo-text-yellow{
	color: #ffc107;
	display: inline;
	line-height: inherit;
}

.navbar .container-fluid{
}

.navbar-collapse{
	display: flex !important;
	flex-basis: auto !important;
	flex-grow: 1;
	align-items: center;
	justify-content: space-between;
	min-width: 0;
}

.main-menu{
	display: flex !important;
	flex-basis: auto !important;
	flex-grow: 1;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-width: 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 5px;
	position: relative;
}

.main-menu ul li a{
	font-family: var(--accent-font);
	font-size: 18px;
	font-weight: 500;
	padding: 15px 15px !important;
	color: var(--white-color);
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}

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

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

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

.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{
	color: var(--primary-color);
	background-color: transparent;
	padding: 8px 20px 8px 23px !important;
}

.header-btn{
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.header-btn .btn-default{
	padding: 20px 30px;
	white-space: nowrap;
}

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

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

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

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

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

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

.slicknav_btn{
	background: var(--accent-color);
	padding: 6px 0 0;
	width: 38px;
	height: 38px;
	margin: 0;
	border-radius: 6px;
}

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

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

.slicknav_menu ul{
	margin: 5px 0;
}

.slicknav_menu ul ul{
	margin: 0;
}

.slicknav_nav .slicknav_row,
.slicknav_nav li a{
	position: relative;
	font-family: var(--accent-font);
	font-size: 16px;
	font-weight: 500;
	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 .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: '\f107';
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 12px;
	margin-left: 8px;
	color: var(--white-color);
	position: absolute;
	right: 15px;
    top: 15px;
	transition: all 0.3s ease-out;
}

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

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

.hero.bg-section{
	margin: 0 40px;
	overflow: hidden;
	border-radius: 40px;
	background: url("../images/navbar.jpeg") no-repeat center center;
	background-size: cover;
	padding: 300px 0 200px;
	position: relative;
	margin-top: -103px;
}

.hero.bg-section:before{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--overlay-color);
	z-index: 1;
}

.hero.bg-section.hero-slider{
	text-align: center;
	background: none;
	padding: 0;
}

.hero-slider-layout .hero-slide{
	position: relative;
    padding: 300px 0 200px;
}

.hero.hero-slider:before{
	display: none ;
}

.hero.hero-slider .hero-slider-layout{
	position: relative;
	z-index: 2;
}

.hero-slider-layout .hero-slide::before{
	content: '';
	position: absolute;
	background: linear-gradient(180deg, rgba(14, 13, 27, 0) 0%, rgba(14, 13, 27, 0.55) 40.5%);
	background-repeat: no-repeat;
	background-position: center center;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	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;
	width: 100%;
	max-width: 930px;
	margin: 0 auto;
}

.hero-slider-layout .swiper-pagination{
	z-index: 2;
    bottom: 100px;
}

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

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

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

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

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

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

.hero-content{
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0;
	text-align: center;
	z-index: 1;
	padding: 0 20px;
}

.hero-content .section-title h1{
	color: var(--white-color);
	max-width: 100%;
	line-height: 1.3em;
	word-spacing: normal;
	padding: 0;
	font-size: 56px;
}

.hero-content .section-title p{
	font-size: 18px;
	color: var(--white-color);
}

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

/************************************/
/***       05. About Us css	      ***/
/************************************/

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

.about-content{
	margin-left: 95px;
}

.about-us .section-title h2{
	font-size: 48px;
	line-height: 1.2em;
	margin-bottom: 20px;
}

.about-us .section-title p{
	font-size: 17px;
	line-height: 1.7em;
	margin-top: 20px;
	margin-bottom: 0;
}

.about-content-body{
	margin-bottom: 40px;
}

.about-content-body ul{
	background-color: var(--secondary-color);
	border-radius: 20px;
	padding: 25px;
	margin: 0;
	list-style: none;
}

.about-content-body ul li{
	position: relative;
	font-size: 18px;
	color: var(--primary-color);
	font-weight: 500;
    padding-left: 30px;
    margin-bottom: 12px;
}

.about-content-body ul li:last-child{
	margin-bottom: 0;
}

.about-content-body ul li:before{
    content: '\f058';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 20px;
    color: var(--accent-color);
    display: inline-block;
    line-height: normal;
    position: absolute;
    top: 4px;
    left: 0;
}

.about-content-footer{
	display: flex;
	align-items: center;
}

.about-footer-btn{
	line-height: 0.8em;
}

.about-contact-support{
	display: flex;
	align-items: center;
	margin-left: 30px;
}

.about-contact-support .icon-box{
	margin-right: 20px;
}

.about-contact-support .icon-box img{
	max-width: 40px;
}

.about-support-content{
	width: calc(100% - 60px);
}

.about-support-content p{
	font-family: var(--accent-font);
	font-size: 16px;
	margin-bottom: 5px;
}

.about-support-content h3{
	font-size: 22px;
}

.about-support-content p{
	font-size: 14px;
	margin-bottom: 5px;
}

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

.our-service{
	background: var(--secondary-color) url("../images/our-service-bg.png") no-repeat;
    background-position: right top;
    background-size: auto;
	padding: 100px 0 70px;
}

.service-item{
	position: relative;
    overflow: hidden;
    text-align: center;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	transition: all 0.4s ease-in-out;
}

.service-image{
	overflow: hidden;
	border-radius: 40px;
}

.service-image figure{
	position: relative;
	display: block;
	margin: 0;
}

.service-image{
	position: relative;
}

.service-item .service-image::before{
	content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
	background: linear-gradient(180deg, rgba(217, 217, 217, 0) 0%, rgba(217, 217, 217, 0) 13.02%, rgba(0, 0, 0, 0.51) 42.5%, rgba(0, 0, 0, 0.63) 70%, #000000 100%);
	border-radius: 40px;
    background-repeat: no-repeat;
    background-position: center center;
	z-index: 1;
	transition: all 0.4s ease-in-out;
}

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

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

.service-body{
    position: absolute;
    bottom: 10px;
    right: 40px;
    left: 40px;
	text-align: left;
    z-index: 2;
	transform: translateY(70%);
    transition: all 0.5s ease-in-out;
}

.service-item:hover .service-body{
	transform: translateY(0%);
	bottom: 20px;
}

.service-body-title h3{
	font-size: 24px;
	font-weight: 700;
	color: var(--white-color);
	text-transform: capitalize;
	margin-bottom: 20px;
}

.service-content{
	opacity: 0;
    overflow: hidden;
    transition: all 0.4s ease-in-out;
}

.service-item:hover .service-content{
	opacity: 1;
}

.service-content p{
	color: var(--white-color);
}

.service-content-footer .readmore-btn{
	position: relative;
	font-family: var(--accent-font);
	font-size: 18px;
	font-weight: 700;
	text-transform: capitalize;
	color: var(--accent-color);
	padding-right: 30px;
	transition: 0.4s ease-in-out;
}

.service-content-footer .readmore-btn:hover{
	color: var(--white-color);
}

.service-content-footer .readmore-btn::after{
	content: '';
    position: absolute;
    top: 1px;
    right: 0;
    bottom: 0;
    background-image: url("../images/readmore-arrow.svg");
    background-repeat: no-repeat;
    background-position: center center;
    width: 24px;
    height: 24px;
    transition: 0.4s ease-in-out;
}

.service-content-footer .readmore-btn:hover::after{
	filter: brightness(0) invert(1);
	right: -4px;
}

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

/************************************/
/***     07. Why Choose Us css    ***/
/************************************/

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

.why-choose-item{
	border: 1px solid var(--divider-color);
	border-radius: 40px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 30px;
}

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

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

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

.why-choose-content h3{
	font-size: 24px;
	font-weight: 700;
	text-transform: capitalize;
	margin-bottom: 30px;
}

.why-choose-content p{
	margin: 0;
}

.why-choose-counter h3{
	font-size: 56px;
	letter-spacing: -0.03em;
	line-height: 1.1em;
	margin-bottom: 5px;
}

.why-choose-counter p{
	text-transform: capitalize;
	margin: 0;
}

.why-choose-counter small{
	color: var(--text-color);
	opacity: 70%;
	font-size: 14px;
	display: block;
	margin-top: 8px;
	text-transform: none;
	line-height: 1.4em;
}

.why-choose-image{
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.why-choose-image figure,
.why-choose-image img{
	height: 100%;
	border-radius: 40px;
}

.why-choose-image:hover img{
	filter: grayscale(80%);
}

/************************************/
/***     08. Our Projects css     ***/
/************************************/

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

.project-item{
	position: relative;
    overflow: hidden;
    text-align: center;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	transition: all 0.4s ease-in-out;
	border-radius: 40px;
}

/* Ensure proper gaps between project items */
.our-projects .project-item,
.page-projects .project-item{
	margin-bottom: 30px;
}

.our-projects .row > [class*="col-"],
.page-projects .row > [class*="col-"]{
	margin-bottom: 30px;
}

.project-image{
	overflow: hidden;
	border-radius: 40px;
	height: 100%;
	position: relative;
}

.project-image a{
	display: block;
	height: 100%;
	border-radius: 40px;
	overflow: hidden;
}

.project-image figure{
	margin: 0;
	height: 100%;
	display: block;
	border-radius: 40px;
	overflow: hidden;
}

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

.project-item .project-image a::before{
	content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
	background: linear-gradient(180deg, rgba(217, 217, 217, 0) 0%, rgba(217, 217, 217, 0) 13.02%, rgba(0, 0, 0, 0.51) 42.5%, rgba(0, 0, 0, 0.63) 70%, #000000 100%);
	border-radius: 40px;
	border-bottom-left-radius: 40px;
	border-bottom-right-radius: 40px;
    background-repeat: no-repeat;
    background-position: center center;
	z-index: 1;
	transition: all 0.4s ease-in-out;
}

.project-image img{
	width: 100%;
	height: 100%;
	border-radius: 40px;
	aspect-ratio: 1 / 1.2;
	object-fit: cover;
    transition: all 0.4s ease-in-out;
	display: block;
	border-bottom-left-radius: 40px;
	border-bottom-right-radius: 40px;
}

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

.project-body{
    position: absolute;
    bottom: 10px;
    right: 40px;
    left: 40px;
	text-align: left;
    z-index: 2;
	transform: translateY(75%);
    transition: all 0.5s ease-in-out;
}

.project-item:hover .project-body{
	transform: translateY(0%);
	bottom: 20px;
}

.project-body-title h3{
	font-size: 24px;
	font-weight: 700;
	color: var(--white-color);
	text-transform: capitalize;
	margin-bottom: 20px;
}

.project-content{
	opacity: 0;
    overflow: hidden;
    transition: all 0.4s ease-in-out;
}

.project-item:hover .project-content{
	opacity: 1;
}

.project-content p{
	color: var(--white-color);
}

.project-content-footer .readmore-btn{
	position: relative;
	font-family: var(--accent-font);
	font-size: 18px;
	font-weight: 700;
	text-transform: capitalize;
	color: var(--accent-color);
	padding-right: 30px;
	transition: 0.4s ease-in-out;
}

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

.project-content-footer .readmore-btn::after{
	content: '';
    position: absolute;
    top: 1px;
    right: 0;
    bottom: 0;
    background-image: url("../images/readmore-arrow.svg");
    background-repeat: no-repeat;
    background-position: center center;
    width: 24px;
    height: 24px;
    transition: 0.4s ease-in-out;
}

.project-content-footer .readmore-btn:hover::after{
	filter: brightness(0) invert(1);
	right: -4px;
}

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

/************************************/
/***     09. Our Cta Box css      ***/
/************************************/

.cta-box{
	position: relative;
	background: var(--primary-color) url("../images/cta-box-bg.png") no-repeat;
	background-position: right bottom;
	background-size: auto;
	padding: 100px 0;
}

/* Reduce top padding when CTA comes after projects */
.page-projects + .cta-box,
body .page-projects + .cta-box{
	padding-top: 30px !important;
	margin-top: 0 !important;
}

.what-we-do + .cta-box{
	margin-top: 50px;
}

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

.cta-box .section-title p{
	color: var(--white-color);
}

.cta-box-image{
	position: absolute;
	bottom: 0;
	text-align: end;
}

.section-btn .btn-default{
	border: 2px solid transparent;
}

.section-btn .btn-default:hover{
	border: 2px solid var(--white-color);
}

/************************************/
/***   10. Our Testiminial css    ***/
/************************************/

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

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

.testimonial-slider .swiper-slide{
	width: 100%;
	height: auto;
}

.testimonial-item{
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 40px;
	padding: 30px;
	display: block;
	width: 100%;
}

.testimonial-header{
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 30px;
	padding-bottom: 30px;
}

.testimonial-rating{
	margin-bottom: 30px;
}

.testimonial-rating i{
	font-size: 20px;
	color: var(--accent-color);
}

.testimonial-content p{
	margin: 0;
}

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

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

.author-image img{
	width: 65px;
	height: 65px;
	border-radius: 50%;
}

.author-content{
	width: calc(100% - 85px);
}

.author-content h3{
	font-size: 24px;
	text-transform: capitalize;
	margin-bottom: 5px;
}

.author-content p{
	text-transform: capitalize;
	margin: 0;
}

.testimonial-slider .swiper-pagination{
	position: relative;
	text-align: center;
	bottom: 0px;
	margin-top: 30px;
}

.testimonial-slider .swiper-pagination .swiper-pagination-bullet{
	height: 12px;
	width: 12px;
	border-radius: 50%;
	background-color: var(--accent-color);
	opacity: 1;
	margin: 0px 6px;
}

.testimonial-slider .swiper-pagination .swiper-pagination-bullet-active{
	background-color: var(--primary-color);
	opacity: 1;
}


/************************************/
/***      11. Our FAQs  css       ***/
/************************************/

.our-faqs{
	background: var(--secondary-color) url("../images/our-faqs-bg.png") no-repeat;
	background-position: right bottom;
	background-size: auto;
	padding: 100px 0;
}

.our-faqs-images{
	position: relative;
}

.our-faqs-bulitup{
	position: absolute;
	top: 50%;
	bottom: 0;
	left: 50%;
	right: 0;
	transform: translate(-50%, -50%);
	background-color: var(--white-color);
	border-radius: 50%;
	width: 100px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.our-faqs-bulitup img{
	max-width: 50px;
}

.our-faqs-images .row:first-child{
	margin-bottom: 30px;
}

/* Remove gap from right side columns - remove padding only, no size changes */
.our-faqs-images .row .col-md-6:last-child,
.our-faqs-images .row .col-6:last-child{
	padding-left: 0;
	padding-right: 0;
}

/* Left side images - larger size - ensure both top and bottom are same size */
.faqs-img-1{
	width: 100%;
	position: relative;
	overflow: hidden;
	border-radius: 40px;
}

/* Right side images - smaller size */
.faqs-img-2{
	width: 75%;
	position: relative;
	overflow: hidden;
	border-radius: 40px;
	margin-left: 0;
}

/* Ensure left top and left bottom images are exactly the same size */
.our-faqs-images .row:first-child .faqs-img-1,
.our-faqs-images .row:last-child .faqs-img-1{
	width: 100%;
}

.faqs-img-1 figure,
.faqs-img-2 figure{
	display: block;
	width: 100%;
	position: relative;
}

.faqs-img-1 img{
	border-radius: 40px;
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 34 / 33;
	object-fit: cover;
}

.faqs-img-2 img{
	border-radius: 40px;
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 34 / 33;
	object-fit: cover;
}

.faq-accordion{
	margin-left: 30px;
}

.faq-accordion .accordion-item{
	position: relative;
	background: none;
	border-bottom: 1px solid var(--white-color);
	padding-bottom: 20px;
	margin-bottom: 20px;
}

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

.faq-accordion .accordion-item .accordion-button{
	font-size: 24px;
	font-weight: 700;
	border: none;
	box-shadow: none;
	padding: 10px 40px 10px 10px;
	position: relative;
	transition: all 0.3s ease-in-out;
}

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

.faq-accordion .accordion-item .accordion-button::after,
.faq-accordion .accordion-item .accordion-button.collapsed::after{
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	bottom: auto;
	transform: translate(0px, -50%) rotate(-90deg);
	background-image: url("../images/long-arrow.svg");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-item .accordion-button.collapsed::after{
	transform: translate(0px, -50%) rotate(0deg);
}

.faq-accordion .accordion-item .accordion-collapse .accordion-body{
	padding: 10px 40px 10px 10px;
}

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

/************************************/
/***     12. Latest News css	  ***/
/************************************/

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

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

.post-featured-image{
	overflow: hidden;
	border-radius: 40px 40px 0 0;
}

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

.post-featured-image img{
	aspect-ratio: 1/0.65;
	object-fit: cover;
	border-radius: 40px 40px 0 0;
	transition: all 0.5s ease-out;
}

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

.post-item-content{
	padding: 30px;
}

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

.post-item-body h2{
	font-size: 24px;
	font-weight: 700;
}

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

.post-item-footer .readmore-btn{
	position: relative;
    font-family: var(--accent-font);
    font-size: 18px;
    font-weight: 700;
    text-transform: capitalize;
    color: var(--accent-color);
    padding-right: 30px;
    transition: 0.3s ease-in-out;
}

.post-item-footer .readmore-btn::after{
    content: '';
    position: absolute;
    top: 1px;
    right: 0;
    bottom: 0;
    background-image: url("../images/readmore-arrow.svg");
    background-repeat: no-repeat;
    background-position: center center;
    width: 24px;
    height: 24px;
    transition: 0.3s ease-in-out;
}

.post-item-footer .readmore-btn:hover::after{
    right: -3px;
}

/************************************/
/***      13. Contact Us Css	  ***/
/************************************/

.contact-us{
	background: var(--secondary-color) url("../images/contact-us-bg.png") no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 100px 0;
}

.contact-sidebar{
	background: var(--primary-color);
	border-radius: 40px;
	text-align: center;
	padding: 40px 40px 0;
	transition: all 0.3s ease-in-out;
}

.contact-info{
	margin-bottom: 30px;
}

.contact-info .icon-box{
	margin-bottom: 20px;
}

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

.contact-info-content p{
	color: var(--white-color);
	opacity: 64%;
	text-transform: capitalize;
	margin-bottom: 5px;
}

.contact-info-content h3{
	font-size: 24px;
	font-weight: 700;
	color: var(--white-color);
}

.contact-info-image{
	width: 100%;
	max-width: 190px;
	margin: 0 auto;
}

.contact-sidebar .contact-info-image img{
    filter: grayscale(0%);
    transition: all 0.3s ease-in-out;
}

.contact-sidebar:hover .contact-info-image img{
	filter: grayscale(80%);
}

.contact-form{
	background-color: var(--white-color);
	border-radius: 40px;
	padding: 50px;
}

.contact-form .form-control{
	padding: 15px;
	background-color: transparent;
	color: var(--primary-color);
	box-shadow: none;
	border: none;
	border-bottom: 1px solid var(--divider-color);
	border-radius: 0;
}

.contact-form .form-control::placeholder{
	color: var(--primary-color);
	opacity: 20%;
	text-transform: capitalize;
}

/************************************/
/***    	14. Footer css		  ***/
/************************************/

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

/* Minimal Footer Styles */
.footer-about{
	margin-bottom: 0;
}

.footer-about p{
	color: var(--white-color);
	font-size: 18px;
	line-height: 1.6em;
	margin: 0;
}

.footer-contact-block{
	text-align: right;
}

.footer-contact-block h3{
	font-size: 24px;
	font-weight: 700;
	color: var(--accent-color);
	text-transform: capitalize;
	margin-bottom: 30px;
}

.footer-contact-item{
	margin-bottom: 15px;
	color: var(--white-color);
	font-size: 18px;
}

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

.footer-contact-item a{
	color: var(--white-color);
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}

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

.footer-contact-item span{
	color: var(--white-color);
}

/* Screen reader only class for accessibility */
.sr-only{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

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

.footer-logo a{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0;
	text-decoration: none;
	height: auto;
}

.footer-logo img{
	max-width: 200px;
	max-height: 80px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	margin: 0;
	padding: 0;
}

.footer-logo-text{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-left: 10px;
	margin-right: 0;
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	height: 100%;
}

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

.footer-links h3{
	font-size: 24px;
	font-weight: 700;
	color: var(--accent-color);
	text-transform: capitalize;
	margin-bottom: 40px;
}

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

.footer-links ul li{
	position: relative;
	text-transform: capitalize;
    padding-left: 30px;
    margin-bottom: 20px;
}

.footer-links ul li:before{
    content: '';
    position: absolute;
    top: 3px;
    left: 0;
    background-image: url("../images/readmore-arrow.svg");
    background-repeat: no-repeat;
    background-position: center center;
    width: 20px;
    height: 20px;
    transition: 0.3s ease-in-out;
}

.footer-links ul li:hover:before{
	filter: brightness(0) invert(1);
}

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

.footer-contact-box .footer-info-box{
	position: relative;
    padding-left: 40px;
    margin-bottom: 30px;
}

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

.footer-info-box .icon-box{
	position: absolute;
    top: 0;
    left: 0;
}

.footer-info-box .icon-box img{
	max-width: 26px;
}

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

.footer-copyright{
	margin-top: 80px;
	padding: 20px 0;
	border-top: 1px solid var(--dark-divider-color);
	border-bottom: 1px solid var(--dark-divider-color);
}

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

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

.footer-copyright .footer-social-links ul li{
	display: inline-block;
	margin-right: 10px;
}

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

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

.footer-copyright .footer-social-links ul li a i{
	font-size: 18px;
}

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

/************************************/
/***    15. About us Page css	  ***/
/************************************/

.page-header{
	margin: 0 20px;
	overflow: hidden;
	border-radius: 40px;
	background: url('../images/sub-header.jpeg') no-repeat center center;
	background-size: cover;
	padding: 220px 0 120px;
	position: relative;
	margin-top: -103px;
}

.page-header:before{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--primary-color);
	opacity: 60%;
	border-radius: 40px;
	z-index: 1;
}

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

.page-header-box h1{
	font-size: 56px;
	color: var(--white-color);
	margin-bottom: 30px;
	line-height: 1.1em;
	letter-spacing: -0.03em;
}

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

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

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

.page-header-box ol li.breadcrumb-item.active{
	color: var(--accent-color);
}

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

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

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

.about-us-content-body{
	margin-bottom: 50px;
}

.about-us-content-body ul{
	background-color: var(--secondary-color);
    border-radius: 20px;
    padding: 30px;
    margin: 0;
    list-style: none;
}

.about-us-content-body ul li{
	position: relative;
    font-size: 20px;
    color: var(--primary-color);
    font-weight: 500;
    padding-left: 30px;
    margin-bottom: 15px;
}

.about-us-content-body ul li:last-child{
	margin-bottom: 0;
}

.about-us-content-body ul li:before{
    content: '\f058';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 20px;
    color: var(--accent-color);
    display: inline-block;
    line-height: normal;
    position: absolute;
    top: 4px;
    left: 0;
}

.about-us-content-footer{
	display: flex;
	align-items: center;
}

.about-us-footer-btn{
	line-height: 0.8em;
}

.about-us-contact-support{
	display: flex;
	align-items: center;
	margin-left: 30px;
}

.about-us-contact-support .icon-box{
	margin-right: 20px;
}

.about-us-contact-support .icon-box img{
	max-width: 40px;
}

.about-us-support-content{
	width: calc(100% - 60px);
}

.about-us-support-content p{
	font-family: var(--accent-font);
	font-size: 16px;
	margin-bottom: 5px;
}

.about-us-support-content h3{
	font-size: 24px;
}

.our-company-history{
	padding: 100px 0;
	background: var(--secondary-color);
}

.company-history-image{
	position: relative;
}

.company-history-img{
	text-align: left;
}

.company-history-img img{
	border-radius: 40px;
}

.company-experience{
	position: absolute;
	width: 100%;
	max-width: 225px;
	text-align: center;
	bottom: 20%;
	right: 0;
	background-color: var(--white-color);
	border-radius: 40px;
	padding: 40px;
	animation: expmoveobject 3s infinite linear alternate;
}

@keyframes expmoveobject{
	50%{
		right: 50px;
	}
}

.company-experience-content h3{
	font-size: 56px;
}

.company-experience-content p{
	margin: 0;
	text-transform: capitalize;
}

.company-history-body p:last-child{
	margin-bottom: 0;
}

.our-mission-vision{
	padding: 100px 0;
}

.mission-vision-item{
	padding: 30px;
	border: 1px solid var(--divider-color);
	border-radius: 40px;
}

.mission-vision-item .icon-box{
	margin-bottom: 30px;
}

.mission-vision-item .mission-vision-content h3{
	font-size: 24px;
	text-transform: capitalize;
	margin-bottom: 30px;
}

.mission-vision-item .mission-vision-content p{
	margin: 0;
}

.intro-video .container-fluid{
	padding: 0;
}

.intro-video-box{
    position: relative;
	z-index: 1;
    overflow: hidden;
	cursor: none;
}

.intro-video-box .video-image img{
	width: 100%;
	filter: brightness(30%);
	aspect-ratio: 1/0.33;
	object-fit: cover;
	transition: all 0.5s ease-in-out;
}

.intro-video-box:hover .video-image img{
    transform: scale(1.1);
}

.intro-video-box .video-image a{
	cursor: none;
	position: relative;
	z-index: 1;
}

/* .video-play-button{
	background: var(--white-color);
	height: 110px;
	width: 110px;
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
	z-index: 2;
	transform: translate(-50%, -50%);
}

.video-play-button a{
	position: relative;
	background-color: var(--accent-color);
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
	cursor: none;
} */

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

.video-play-button a{
	position: relative;
	background-color: var(--white-color);
	border-radius: 100%;
	width: 100px;
	height: 100px;
	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(--white-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(--white-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(--accent-color);
}

.what-we-do{
	padding: 100px 0;
	padding-bottom: 150px;
	background: var(--secondary-color);
}

.what-we-do .section-title{
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
}

.what-we-do .row:last-child{
	margin-bottom: 80px;
}

.what-we-do .row{
	display: flex;
	flex-wrap: wrap;
}

.what-we-do .row > [class*="col-"]{
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.company-counter-item{
	background: var(--primary-color);
	padding: 50px 30px;
	text-align: center;
	border-radius: 40px;
	height: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	flex: 1;
}

.company-counter-item .company-counter-content{
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

.company-counter-item .company-counter-content h3{
	color: var(--white-color);
	font-size: 56px;
	letter-spacing: -0.03em;
	line-height: 1.1em;
	margin-bottom: 15px;
	white-space: nowrap;
	display: inline-block;
	text-align: center;
	width: 100%;
}

.company-counter-item .company-counter-content h3 span{
	display: inline;
}

.company-counter-item .company-counter-content p{
	color: var(--white-color);
	opacity: 64%;
	text-transform: capitalize;
	margin: 0;
}

.company-counter-item .company-counter-content small{
	color: var(--white-color);
	opacity: 50%;
	font-size: 14px;
	display: block;
	margin-top: 8px;
	text-transform: none;
	line-height: 1.4em;
}

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

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

.team-member-item .team-image img{
	border-radius: 40px 40px 0 0;
	transition: all 0.5s ease-in-out;
}

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

.team-body{
	padding: 30px;
}

.team-content{
	margin-bottom: 20px;
}

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

.team-content p{
	text-transform: capitalize;
	margin: 0;
}

.team-social-icon ul{
	padding: 0;
	margin: 0;
}

.team-social-icon ul li{
	display: inline-block;
	margin-right: 5px;
}

.team-social-icon ul li:last-child{
	margin-right: 0;
}

.team-social-icon ul li a{
	color: var(--primary-color);
	height: 36px;
	width: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--primary-color);
	border-radius: 100%;
	transition: all 0.3s ease-in-out;
}

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

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

/************************************/
/***    16. Services Page css	  ***/
/************************************/

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

/* Projects page section - matches about page structure exactly */
.our-projects-page{
	padding: 100px 0;
	background: var(--secondary-color);
}

.our-projects-page .section-row{
	margin-bottom: 60px;
}

.our-projects-page .row > [class*="col-"]{
	margin-bottom: 30px;
}

/* Reduce gap between projects page section and CTA */
.our-projects-page + .cta-box{
	margin-top: 0;
	padding-top: 50px;
}

.page-projects{
	padding: 100px 0 0 !important;
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

/* Ensure no extra spacing after projects section */
.page-projects:after{
	display: none;
	content: none;
}

/* Projects page section - matches about page structure */
.our-projects-page .section-row{
	margin-bottom: 60px;
}

.our-projects-page .row > [class*="col-"]{
	margin-bottom: 30px;
}

/* Remove bottom margin from section-row in projects page */
.page-projects .section-row{
	margin-bottom: 40px !important;
}

/* Remove bottom margin from container in projects page */
.page-projects .container{
	margin-bottom: 0;
	padding-bottom: 0;
}

/* Remove bottom margin from last row in projects page */
.page-projects .row:last-child{
	margin-bottom: 0;
}

/* Reduce gap between projects section and CTA - use more specific selector */
div.page-projects + div.cta-box,
.page-projects + .cta-box,
body .page-projects + .cta-box,
.our-projects-page + .cta-box{
	margin-top: 0 !important;
	padding-top: 30px !important;
}

/* Ensure proper spacing for project items on projects page */
.page-projects .project-item{
	margin-bottom: 0;
}

.page-projects .row{
	margin-right: -15px;
	margin-left: -15px;
	margin-bottom: 0;
}

.page-projects .row > [class*="col-"]{
	padding-right: 15px;
	padding-left: 15px;
	margin-bottom: 30px;
}

/* Ensure proper spacing for project items on homepage */
.our-projects .project-item{
	margin-bottom: 0;
}

.our-projects .row > [class*="col-"]{
	margin-bottom: 30px;
}

/************************************/
/***    17. Service Single css	  ***/
/************************************/

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

.service-sidebar{
	padding-right: 50px;
	position: sticky;
	top: 20px;
}

.service-categories-list{
	border: 1px solid var(--divider-color);
	border-radius: 40px;
	padding: 30px;
	margin-bottom: 30px;
}

.service-categories-list h3{
	font-size: 24px;
	text-transform: capitalize;
	margin-bottom: 30px;
}

.service-categories-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.service-categories-list ul li{
	margin-bottom: 20px;
	padding: 0 0 20px 30px;
	border-bottom: 1px solid var(--divider-color);
	position: relative;
}

.service-categories-list ul li:last-child{
	margin-bottom: 0px;
	padding-bottom: 0;
	border-bottom: none;
}

.service-categories-list ul li:before{
	content: '';
    position: absolute;
    top: 3px;
    left: 0;
    background: url('../images/readmore-arrow.svg') no-repeat center center;
    width: 20px;
    height: 20px;
}

.service-categories-list ul li a{
	display: block;
	color: var(--primary-color);
	text-transform: capitalize;
	transition: 0.3s ease-in-out;
}

.service-categories-list ul li a:hover{
	color: var(--accent-color);
}

.sidebar-cta-box{
	background: url('../images/service-sidebar-cta-bg.png') no-repeat top right, var(--primary-color);
	background-size: auto;
	border-radius: 40px;
	padding: 30px;
	text-align: center;
}

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

.sidebar-cta-box .cta-content h3{
	font-size: 24px;
	color: var(--white-color);
	text-transform: capitalize;
	margin-bottom: 30px;
}

.sidebar-cta-box .cta-content p{
	color: var(--white-color);
	margin: 0;
}
 
.cta-contact-info{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.cta-contact-info .cta-contact-item{
	display: flex;
	align-items: center;
	background: var(--white-color);
	padding: 8px 12px;
	border-radius: 99px;
	margin-bottom: 20px;
}

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

.cta-contact-info .cta-contact-item .icon-box{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 37px;
	min-width: 37px;
	background: var(--accent-color);
	border-radius: 50%;
	margin-right: 10px;
}
 
.cta-contact-info .cta-contact-item .cta-contact-content{
	width: calc(100% - 47px);
}

.cta-contact-info .cta-contact-item .cta-contact-content p{
	margin: 0;
}

.cta-contact-info .cta-contact-item .cta-contact-content p a{
	color: var(--primary-color);
	transition: all 0.3s ease-in-out;
}

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

.service-images-slider{
	margin-bottom: 30px;
}

.service-image-item figure,
.service-image-item img{
	border-radius: 40px;
	overflow: hidden;
	aspect-ratio: 1 / 0.7;
    object-fit: cover;
}

.service-images-slider .swiper-arrow-prev,
.service-images-slider .swiper-arrow-next{
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	z-index: 1;
	transform: translateY(-50%);
}

.service-images-slider .swiper-arrow-prev{
	left: 20px;
}

.service-images-slider .swiper-arrow-next{
	right: 20px;
}

.service-images-slider .swiper-arrow-prev:before,
.service-images-slider .swiper-arrow-next:before{
	content: '';
	background: url('../images/icon-arrow-left.svg') no-repeat center left;
	background-size: 100% auto;
	height: 33px;
	width: 33px;
}

.service-images-slider .swiper-arrow-next:before{
	background: url('../images/icon-arrow-right.svg') no-repeat center left;
	background-size: 100% auto;
	height: 33px;
	width: 33px;
}

.service-single-content p{
	margin-bottom: 30px;
}

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

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

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

.service-entry ul li{
	position: relative;
    width: calc(50% - 10px);
	color: var(--primary-color);
	font-weight: 500;
	padding-left: 30px;
	text-transform: capitalize;
}

.service-entry ul li:before{
	content: '\f058';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 18px;
    color: var(--accent-color);
    display: inline-block;
    line-height: normal;
    position: absolute;
    top: 4px;
    left: 0;
}

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


.service-sustainable .service-sustainable-img-1 img,
.service-sustainable .service-sustainable-img-2 img{
	border-radius: 40px;
}

.service-sustainable-content{
	margin-top: 30px;
}

.service-sustainable-content h3{
	font-size: 24px;
	margin-bottom: 30px;
}

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

.service-benefit::before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--primary-color);
    opacity: 70%;
    z-index: 0;
}

.service-benefit .service-benefit-item{
	background: var(--white-color);
	padding: 30px;
	border: 1px solid var(--divider-color);
	border-radius: 40px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	position: relative;
	z-index: 1;
}

.service-benefit-item .icon-box{
	margin-bottom: 30px;
}

.service-benefit-item .service-benefit-content h3{
	font-size: 24px;
	text-transform: capitalize;
	margin-bottom: 30px;
}

.service-benefit-item .service-benefit-content p{
	color: var(--text-color);
	margin: 0;
}

.working-process{
	padding: 100px 0 70px;
}

.working-process-item{
	padding: 30px;
	border: 1px solid var(--divider-color);
	border-radius: 40px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.working-process-item .step-number{
	margin-bottom: 30px;
}

.working-process-item .step-number h2{
	font-size: 40px;
	color: var(--accent-color);
}

.working-process-item .working-process-content h3{
	font-size: 24px;
	margin-bottom: 30px;
	text-transform: capitalize;
}


.working-process-item .working-process-content p{
	color: var(--text-color);
	margin: 0;
}

/************************************/
/***    18. Blog Archive css	  ***/
/************************************/

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

.page-blog .blog-item{
	height: calc(100% - 40px);
	margin-bottom: 40px;
}

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

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

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

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

/************************************/
/***     19. Blog Single css	  ***/
/************************************/

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

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

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

.post-image figure{
	display: block;
}

.post-image figure.reveal{
	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{
	font-size: 56px;
}

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

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

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

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

.post-entry h6{
	font-size: 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: 700;
}

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

.post-entry ol li{
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 700;
    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: 18px;
}

.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 40px 46px;
	background-size: 45px;
	border-radius: 16px;
	padding: 40px 40px 40px 110px;
	margin-bottom: 30px;
}

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

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

.tag-links{
	font-size: 24px;
	font-weight: 700;
	color: var(--primary-color);
	display: inline-block;
}

.post-tags .tag-links a{
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    text-transform: capitalize;
    background-color: var(--accent-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(--primary-color);
}

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

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

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

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

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

.post-social-sharing ul li:hover a{
	background-color: var(--primary-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);
}

/************************************/
/***     20. Project Page css  	  ***/
/************************************/

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

/************************************/
/***    21. Project Single css    ***/
/************************************/

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

.project-single-content{
	margin-right: 20px;
}

.project-featured-image{
	margin-bottom: 30px;
}

.project-featured-image figure{
	display: block;
}

.project-featured-image img{
	border-radius: 40px;
	aspect-ratio: 1/ 0.6;
	object-fit: cover;
}

.project-details-content{
	margin-bottom: 40px;
}

.project-details-title{
	margin-bottom: 30px;
}

.project-details-content p{
	margin-bottom: 30px;
}

.project-details-title h3{
	font-size: 24px;
	font-weight: 700;
}

.project-details-content ul{
    padding: 0;
    margin: 0;
    list-style: none;
	display: flex;
	flex-wrap: wrap;
    gap: 20px;
}

.project-details-content ul li{
    position: relative;
    font-weight: 500;
	color: var(--primary-color);
	width: calc(50% - 10px);
    padding-left: 30px;
}

.project-details-content ul li:before{
    content: '\f058';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 20px;
    color: var(--accent-color);
    display: inline-block;
    line-height: normal;
    position: absolute;
    top: 4px;
    left: 0;
}

.project-gallery-title{
	margin-bottom: 30px;
}

.project-gallery-title h2{
	font-size: 24px;
	font-weight: 700;
	text-transform: capitalize;
}

.project-gallery-items .project-gallery-item img{
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 40px;
}

.project-sidebar{
	position: sticky;
	top: 20px;
}

.project-info-box{
	border: 1px solid var(--divider-color);
	border-radius: 40px;
	padding: 30px;
}

.project-info-item{
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.project-info-item:last-child{
	margin-bottom: 0;
	padding-bottom: 0;
	border: none;
}

/* Project info content styling - ensures proper gap between label and value */
.project-info-content{
	width: 100%;
}

.project-info-content p{
	text-transform: capitalize;
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--text-color);
	line-height: 1.4em;
}

.project-info-content h3{
	font-size: 18px;
	font-weight: 700;
	line-height: 1.1em;
	text-transform: capitalize;
	color: var(--text-color);
	margin-bottom: 0;
}

.project-info-item .icon-box{
	margin-right: 10px;
}

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

.project-info-content{
	width: calc(100% - 50px);
}

.project-info-content p{
	text-transform: capitalize;
	margin-bottom: 5px;
}

.project-info-content h3{
	font-size: 18px;
	font-weight: 700;
	line-height: 1.1em;
	text-transform: capitalize;
}

/************************************/
/***     22. Team Page css  	  ***/
/************************************/

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

/************************************/
/***    23. Contact us Page css   ***/
/************************************/

.contact-information{
	padding: 100px 0 70px;
}

.contact-sidebar.page-contact-sidebar{
	transition: all 0.3s ease-in-out;
}

.contact-info-item{
	border: 1px solid var(--divider-color);
	border-radius: 40px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 30px;
}

.contact-info-item .icon-box{
	margin-bottom: 30px;
}

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

.contact-info-body h3{
	font-size: 24px;
	font-weight: 700;
	text-transform: capitalize;
	margin-bottom: 20px;
}

.contact-info-body p{
	margin-bottom: 5px;
}

.contact-info-body p:last-child{
	margin-bottom: 0;
}

.contact-us.page-contact-us{
	background: var(--secondary-color);
}

.contact-social-list{
	margin-bottom: 100px;
}

.contact-social-list h3{
	font-size: 24px;
	font-weight: 700;
	color: var(--white-color);
	text-transform: capitalize;
	margin-bottom: 30px;
}

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

.contact-social-list ul li{
	display: inline-block;
    margin-right: 10px;
	transition: all 0.3s ease-in-out;
}

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

.contact-social-list ul li a{
	background-color: transparent;
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
    height: 36px;
    width: 36px;
    border-radius: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}

.contact-sidebar.page-contact-sidebar .contact-social-list ul li:hover a{
	border-color: var(--white-color);
    color: var(--white-color);
}

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

.contact-sidebar.page-contact-sidebar .contact-info-image{
	width: 100%;
	max-width: 100%;
	text-align: center;
}

.contact-sidebar.page-contact-sidebar .contact-info-image img{
	width: 100%;
	filter: grayscale(0%);
	transition: all 0.3s ease-in-out;
}

.contact-sidebar.page-contact-sidebar:hover .contact-info-image img{
	filter: grayscale(80%);
}

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

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

/************************************/
/***      24. FAQs Page css       ***/
/************************************/

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

.faq-sidebar{
	position: sticky;
	top: 20px;
}

.faq-category-box{
	border: 1px solid var(--divider-color);
	border-radius: 40px;
	padding: 30px;
}

.faq-category-box ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.faq-category-box ul li{
	margin-bottom: 20px;
	padding: 0 0 20px 35px;
	border-bottom: 1px solid var(--divider-color);
	position: relative;
}

.faq-category-box ul li:last-child{
	margin-bottom: 0px;
	padding: 0 0 0px 35px;
	border-bottom: none;
}

.faq-category-box ul li:before{
	content: '';
    position: absolute;
    top: 3px;
    left: 0;
    background: url('../images/readmore-arrow.svg') no-repeat center center;
    width: 20px;
    height: 20px;
}

.faq-category-box ul li a{
	display: block;
	color: var(--primary-color);
	text-transform: capitalize;
	transition: 0.3s ease-in-out;
}

.faq-category-box ul li:hover a{
	color: var(--accent-color);
}

.page-faq .faq-section{
	margin-bottom: 60px;
}

.page-faq .faq-section:last-child{
	margin-bottom: 0;
}

.faq-section .faq-accordion{
	margin: 0;
}

.faq-section .faq-accordion .accordion-item{
	position: relative;
	background: none;
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 20px;
	margin-bottom: 20px;
}

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

.faq-section .faq-accordion .accordion-item .accordion-button{
	font-size: 24px;
	font-weight: 700;
	border: none;
	box-shadow: none;
	padding: 10px 40px 10px 10px;
	position: relative;
	transition: all 0.3s ease-in-out;
}

.faq-section .faq-accordion .accordion-button:not(.collapsed){
    color: var(--accent-color);
}

.faq-section  .faq-accordion .accordion-item .accordion-button::after,
.faq-section .faq-accordion .accordion-item .accordion-button.collapsed::after{
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	bottom: auto;
	transform: translate(0px, -50%) rotate(-90deg);
	background-image: url("../images/long-arrow.svg");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	transition: all 0.3s ease-in-out;
}

.faq-section .faq-accordion .accordion-item .accordion-button.collapsed::after{
	transform: translate(0px, -50%) rotate(0deg);
}

.faq-section .faq-accordion .accordion-item .accordion-collapse .accordion-body{
	padding: 10px 40px 10px 10px;
}

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

/************************************/
/***       25. 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: 56px;
}

.error-page-content-heading h2 span{
	color: var(--accent-color);
}
 
/************************************/
/***     26. responsive css       ***/
/************************************/

/* Desktop styles - reduce hero content width */
@media only screen and (min-width: 1025px){
	.hero-content{
		max-width: 90%;
		margin: 0 auto;
	}
	
	.hero-content .section-title h1{
		max-width: 95%;
		margin: 0 auto;
	}
}

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

	.navbar{
        padding: 20px 0px;
		min-height: 120px;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
    }
	
	.navbar .container-fluid{
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		width: 100%;
		justify-content: space-between;
	}
	
	.navbar-brand{
		max-height: 90px;
		display: flex;
		align-items: center;
		flex-shrink: 0;
		margin-right: 15px;
	}
	
	.navbar-brand img{
		max-width: 230px;
		max-height: 90px;
		width: auto;
		height: auto;
		object-fit: contain;
	}
	
	.navbar-collapse{
		display: flex !important;
		flex-basis: auto !important;
		flex-grow: 1;
		align-items: center;
		justify-content: space-between;
		min-width: 0;
	}
	
	.main-menu{
		display: flex !important;
		flex-basis: auto !important;
		flex-grow: 1;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-width: 0;
	}
	
	.header-btn{
		flex-shrink: 0;
		display: flex;
		align-items: center;
	}
	
	.language-switcher{
		flex-shrink: 0;
		display: flex;
		align-items: center;
	}
	
	.logo-text{
		font-size: 24px;
		margin-left: 10px;
	}
	
	.main-menu ul li{
		margin-left: 0;
	}
}

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

	#magic-cursor{
        display: none !important;
    }
	
	.navbar{
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		min-height: 90px;
		padding: 15px 20px;
	}
	
	.navbar .container-fluid{
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		width: 100%;
		padding: 0 15px;
		justify-content: space-between;
	}
	
	.navbar-brand{
		display: flex;
		align-items: center;
		flex-shrink: 0;
		margin-right: 15px;
		max-height: 75px;
	}
	
	.navbar-brand img{
		max-width: 200px;
		max-height: 75px;
		width: auto;
		height: auto;
		object-fit: contain;
	}
	
	.navbar-collapse{
		display: flex !important;
		flex-basis: auto !important;
		flex-grow: 0;
		align-items: center;
		justify-content: flex-end;
		min-width: 0;
		width: auto;
		flex-shrink: 0;
	}
	
	.main-menu{
		display: none !important;
	}
	
	.header-btn{
		flex-shrink: 0;
		display: flex;
		align-items: center;
		margin-left: 8px;
		order: 3;
	}
	
	.language-switcher:not(.mobile-language-switcher){
		display: none !important;
	}
	
	.mobile-right-group{
		display: flex;
		align-items: center;
		gap: 5px;
		flex-shrink: 0;
	}
	
	.mobile-language-switcher{
		flex-shrink: 0;
		display: flex !important;
		align-items: center;
		margin-right: 0;
	}
	
	.navbar-toggle{
		flex-shrink: 0;
		display: flex !important;
		align-items: center;
		justify-content: center;
		margin-left: 0;
	}
	
	.logo-text{
		font-size: 20px;
		margin-left: 10px;
	}

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

	.responsive-menu{
        display: block;
    }

	.light-bg-section{
		margin: 0;
		padding: 0 15px;
	}

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

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

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

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

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

	.section-row .section-title p{
		max-width: 100%;
	}

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

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

	.btn-default{
		font-size: 16px;
		padding: 18px 55px 18px 25px;
	}

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

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

	.btn-default.btn-highlighted{
		padding: 17px 55px 17px 25px;
	}

	.btn-large{
		font-size: 18px;
		padding: 18px 55px 18px 20px;
	}

	header.main-header{
		margin: 0;
		padding: 0;
	}

	.navbar{
		padding: 20px 0px;
	}

	.hero.bg-section{
		margin: 0 0px;
		margin-top: -103px;
		padding: 200px 0 100px;
		border-radius: 0;
	}

	.hero-slider-layout .hero-slide{
		padding: 200px 0 100px;
	}

	.hero-slider-layout .swiper-pagination{
		bottom: 50px;
	}

	.hero-content .section-title h1{
		font-size: 54px;
	}
	
	.hero-content .section-title p{
		font-size: 18px;
	}

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

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

	.about-image .reveal img{
		height: auto;
		width: 100%;
	}

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

	.about-content-body ul{		
		padding: 20px;
	}

	.about-content-body ul li{
		font-size: 18px;
		margin-bottom: 10px;
	}

	.about-content-body ul li:before{
		font-size: 18px;
	}

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

	.about-support-content p{
		margin-bottom: 0px;
	}

	.about-support-content h3{
		font-size: 22px;
	}

	.our-service{
		background-size: 50% auto;
		padding: 50px 0;
	}

	.service-body{
		right: 20px;
		left: 20px;
	}

	.service-body-title h3{
		font-size: 22px;
		margin-bottom: 15px;
	}

	.service-content p{
		margin-bottom: 15px;
	}

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

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

	.why-choose-item .icon-box{
		margin-bottom: 20px;
	}
	
	.why-choose-item .icon-box img{
		max-width: 60px;
	}

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

	.why-choose-content h3{
		font-size: 22px;
		margin-bottom: 20px;
	}

	.why-choose-counter h3{
		font-size: 46px;
	}

	.our-projects{
		background-size: 50% auto;
		padding: 50px 0;
	}

	.project-body{
		right: 20px;
		left: 20px;
	}

	.project-body-title h3{
		font-size: 22px;
		margin-bottom: 15px;
	}

	.project-content p{
		margin-bottom: 15px;
	}

	.cta-box{
		background-size: 80% auto;
		padding: 50px 0;
		position: relative;
	}

	/* Make the row a flex container with column direction */
	.cta-box .row{
		display: flex;
		flex-direction: column;
		position: relative;
	}

	/* Position the text column */
	.cta-box .col-lg-7,
	.cta-box .col-md-8{
		position: relative;
		order: 1;
	}

	/* Make the image column a flex container to hold button and image side by side */
	.cta-box .col-lg-5,
	.cta-box .col-md-4{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 15px;
		margin-top: 20px;
		width: 100%;
		max-width: 100%;
		flex: 0 0 100%;
		position: relative;
		order: 2;
		padding-left: 0;
		padding-right: 0;
		min-height: 60px;
	}

	/* Position button absolutely to appear at start of image column row */
	/* The button is in col-lg-7, but we position it to align with col-lg-5's flex row */
	.cta-box .col-lg-7 .section-btn,
	.cta-box .col-md-8 .section-btn{
		position: absolute;
		left: 0;
		top: calc(100% + 20px);
		display: block;
		z-index: 10;
		width: auto;
		margin-top: 0;
	}

	/* Add padding to button container */
	.cta-box .col-lg-7 .section-btn,
	.cta-box .col-md-8 .section-btn{
		padding-left: 15px;
		padding-right: 15px;
	}

	/* Reduce button size for mobile to fit properly */
	.cta-box .col-lg-7 .section-btn .btn-default,
	.cta-box .col-md-8 .section-btn .btn-default,
	.cta-box .col-lg-7 .section-btn .btn-large,
	.cta-box .col-md-8 .section-btn .btn-large{
		font-size: 12px;
		padding: 18px 50px 18px 20px;
		white-space: nowrap;
		width: 100%;
		max-width: 100%;
		position: relative;
	}

	/* Fix button arrow icon positioning to prevent overlap with text */
	.cta-box .col-lg-7 .section-btn .btn-default::before,
	.cta-box .col-md-8 .section-btn .btn-default::before,
	.cta-box .col-lg-7 .section-btn .btn-large::before,
	.cta-box .col-md-8 .section-btn .btn-large::before{
		right: 15px;
		transform: translate(0, -50%);
		width: 20px;
		height: 20px;
	}

	.cta-box .col-lg-7 .section-btn .btn-default:hover::before,
	.cta-box .col-md-8 .section-btn .btn-default:hover::before,
	.cta-box .col-lg-7 .section-btn .btn-large:hover::before,
	.cta-box .col-md-8 .section-btn .btn-large:hover::before{
		transform: translate(3px, -50%);
	}

	.cta-box-image{
		position: relative;
		text-align: center;
		margin-top: -40px;
		right: auto;
		flex-shrink: 1;
		display: flex;
		justify-content: flex-end;
		order: 2;
		margin-left: auto;
		padding-left: 15px;
		padding-right: 15px;
	}

	.cta-box-image img{
		width: 150px;
		max-width: 100%;
		height: auto;
	}

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

	.testimonial-item{
		padding: 20px;
	}

	.testimonial-rating{
		margin-bottom: 20px;
	}

	.testimonial-rating i{
		font-size: 18px;
	}

	.testimonial-header{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.author-content h3{
		font-size: 22px;
	}

	.our-faqs{
		background-size: 50% auto;
		padding: 50px 0;
	}

	.our-faqs-images{
		width: 100%;
		max-width: 565px;
		margin: 0 auto;
		margin-bottom: 30px;
	}
	
	/* Tablet view - Moderate overlap */
	.our-faqs-images .row:first-child .faqs-img-1{
		margin-right: -15px;
		margin-bottom: -15px;
	}
	
	.our-faqs-images .row:first-child .faqs-img-2{
		margin-left: -15px;
		margin-bottom: -15px;
	}
	
	.our-faqs-images .row:last-child .faqs-img-1{
		margin-right: -15px;
		margin-top: -15px;
	}
	
	.our-faqs-images .row:last-child .faqs-img-2{
		margin-left: -15px;
		margin-top: -15px;
	}
	
	.our-faqs-images .row:first-child{
		margin-bottom: 25px;
	}

	/* Tablet FAQ images - match HTML design */
	.faqs-img-1,
	.faqs-img-2{
		position: relative;
		overflow: hidden;
		border-radius: 40px;
	}

	/* Left side images - full width in tablet */
	.faqs-img-1{
		width: 100%;
	}

	/* Right side images - smaller size in tablet */
	.faqs-img-2{
		width: 75%;
		margin-left: auto;
	}

	/* Ensure left top and left bottom images are exactly the same size */
	.our-faqs-images .row:first-child .faqs-img-1,
	.our-faqs-images .row:last-child .faqs-img-1{
		width: 100%;
	}

	.faqs-img-1 figure,
	.faqs-img-2 figure{
		display: block;
		width: 100%;
		position: relative;
	}

	/* Left side images - full width */
	.faqs-img-1 img{
		border-radius: 40px;
		width: 100%;
		height: auto;
		display: block;
	}

	/* Right side images - full width of container (80%) */
	.faqs-img-2 img{
		border-radius: 40px;
		width: 100%;
		height: auto;
		display: block;
	}

	.faq-accordion{
		margin-left: 0px;
	}

	.faq-accordion .accordion-item .accordion-button{
		font-size: 22px;
		padding: 10px 40px 10px 10px;
	}

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

	.faq-accordion .accordion-item .accordion-button::after,
	.faq-accordion .accordion-item .accordion-button.collapsed::after{
		background-size: contain;
		width: 26px;
		height: 26px;
	}

	.our-blog{
		padding: 50px 0 20px;
	}

	.post-item-content{
		padding: 30px 20px;
	}

	.post-item-body h2{
		font-size: 22px;
	}

	.contact-us{
		background-size: auto;
		padding: 50px 0;
	}

	.contact-sidebar{
		padding: 30px 20px 0;
	}

	.contact-info .icon-box{
		margin-bottom: 15px;
	}

	.contact-info-content h3{
		font-size: 22px;
	}

	.contact-form{
		padding: 30px;
	}

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

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

	/* Minimal Footer Responsive */
	.footer-about{
		margin-bottom: 30px;
		text-align: center;
	}

	.footer-contact-block{
		text-align: center;
	}

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

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

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

	.footer-logo img{
		max-width: 220px;
		max-height: 90px;
	}
	
	.footer-logo-text{
		font-size: 22px;
		margin-left: 10px;
	}

	.footer-links h3{
		font-size: 22px;
		margin-bottom: 30px;
	}

	.footer-contact-box .footer-info-box{
		margin-bottom: 20px;
	}

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

	.page-header{
		margin: 0 0;
		border-radius: 0;
		padding: 170px 0 80px;
		margin-top: -90px;
	}

	.page-header:before{
		border-radius: 0px;
	}

	.page-header-box h1{
		font-size: 46px;
		margin-bottom: 20px;
	}

	.page-header-box ol li.breadcrumb-item{
		font-size: 20px;
	}

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

	.about-us-image{
		text-align: center;
		margin-bottom: 30px;
	}

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

	.about-us-content-body ul{		
		padding: 20px;
	}

	.about-us-content-body ul li{
		font-size: 18px;
        margin-bottom: 10px;
	}

	.about-us-content-body ul li:before{
		font-size: 18px;
	}

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

	.about-us-support-content h3{
		font-size: 22px;
	}
	
	.our-company-history{
		padding: 50px 0;
	}
	
	.our-projects-page{
		padding: 50px 0;
	}

	.company-history-image{
		margin-bottom: 30px;
	}

	.company-history-img{
		text-align: center;
	}

	.company-experience{
		max-width: 175px;
		padding: 30px;
	}

	.company-experience-content h3{
		font-size: 46px;
	}
	
	.our-mission-vision{
		padding: 50px 0 20px;
	}

	.mission-vision-item .icon-box{
		margin-bottom: 20px;
	}

	.mission-vision-item .icon-box img{
		max-width: 60px;
	}

	.mission-vision-item .mission-vision-content h3{
		font-size: 22px;
		margin-bottom: 20px;
	}

	.mission-vision-item{
		height: calc(100% - 30px);
		margin-bottom: 30px;
	}
	
	.intro-video-box .video-image img{
		aspect-ratio: 1/0.55;
	}

	.video-play-button a{
		width: 70px;
		height: 70px;
	}

	.video-play-button a i{
		font-size: 26px;
	}
	
	.what-we-do{
		padding: 50px 0 20px;
	}

	.what-we-do .section-title{
		max-width: 100%;
	}

	.company-counter-item{
		height: calc(100% - 30px);
		margin-bottom: 30px;
		padding: 40px 20px;
	}

	.company-counter-item .company-counter-content h3{
		font-size: 46px;
	}
	
	.our-team{
		padding: 50px 0 20px;
	}

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

	.page-service{
		padding: 50px 0 20px;
	}
	
	.page-projects{
		padding: 50px 0 20px;
	}
	
	.page-projects .row > [class*="col-"]{
		margin-bottom: 20px;
	}
	
	.our-projects .row > [class*="col-"]{
		margin-bottom: 20px;
	}
	
	.page-service-single{
		padding: 50px 0;
	}

	.service-sidebar{
		padding-right: 0;
		margin-bottom: 30px;
	}

	.service-categories-list{
		padding: 20px;
	}

	.service-categories-list h3{
		font-size: 22px;
		margin-bottom: 20px;
	}

	.service-categories-list ul li{
		margin-bottom: 15px;
		padding: 0 0 15px 25px;
	}

	.sidebar-cta-box{
		padding: 20px;
	}

	.sidebar-cta-box .cta-content h3{
		font-size: 22px;
		margin-bottom: 20px;
	}

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

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

	.service-sustainable-content h3{
		font-size: 22px;
		margin-bottom: 20px;
	}

	.service-benefit{
		padding: 50px 0 20px;
	}

	.service-benefit .service-benefit-item{
		padding: 20px;
	}

	.service-benefit-item .icon-box{
		margin-bottom: 20px;
	}

	.service-benefit-item .icon-box img{
		max-width: 60px;
	}

	.service-benefit-item .service-benefit-content h3{
		font-size: 22px;
		margin-bottom: 20px;
	}

	.working-process{
		padding: 50px 0 20px;
	}

	.working-process-item{
		padding: 20px;
	}

	.working-process-item .step-number{
		margin-bottom: 20px;
	}

	.working-process-item .step-number h2{
		font-size: 32px;
	}

	.working-process-item .working-process-content h3{
		font-size: 22px;
		margin-bottom: 20px;
	}

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

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

	.post-pagination{
		margin-top: 10px;
	}

	.post-single-meta ol li i{
		font-size: 20px;
	}

	.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 36px;
		background-size: 45px;
		padding: 30px 30px 30px 90px;
		margin-bottom: 20px;
	}

	.post-entry blockquote p{
		font-size: 18px;
	}

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

	.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-project{
		padding: 50px 0;
	}

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

	.project-single-content{
		margin-right: 0px;
		margin-bottom: 40px;
	}

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

	.project-details-title{
		margin-bottom: 20px;
	}

	.project-details-title h3{
		font-size: 22px;
	}

	.project-details-content{
		margin-bottom: 30px;
	}

	.project-gallery-title h2{
		font-size: 22px;
	}

	.project-info-box{
		padding: 20px;
	}

	.page-team{
		padding: 50px 0 20px;
	}

	.contact-information{
		padding: 50px 0 20px;
	}

	.contact-info-item{
		padding: 20px;
	}

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

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

	.contact-info-body h3{
		font-size: 22px;
		margin-bottom: 15px;
	}

	.google-map-iframe,
	.google-map-iframe iframe{
		height: 400px;
	}
	
	.page-faq{
		padding: 50px 0;
	}

	.faq-sidebar{
		margin-bottom: 30px;
	}

	.faq-category-box{
		padding: 20px;
	}

	.faq-category-box ul li{
		margin-bottom: 15px;
		padding: 0 0 15px 35px;
	}

	.page-faq .faq-section{
		margin-bottom: 40px;
	}

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

	.faq-section .faq-accordion .accordion-item .accordion-button{
        font-size: 22px;
        padding: 10px 40px 10px 10px;
    }

	.faq-section .faq-accordion .accordion-item .accordion-button::after,
	.faq-section .faq-accordion .accordion-item .accordion-button.collapsed::after{
		background-size: contain;
		width: 26px;
		height: 26px;
	}

	.error-page{
		padding: 50px 0;
	}
	
	.error-page-image{
		margin-bottom: 30px;
	}

	.error-page-content-heading{
		margin-bottom: 20px;
	}
	
	.error-page-content-heading h2{
		font-size: 46px;
	}
}

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

	body{
		font-size: 16px;
	}
	
	.navbar{
		padding: 15px 20px;
		min-height: 65px;
		display: flex;
		flex-wrap: nowrap;
	}
	
	.navbar-brand{
		max-height: 65px;
	}
	
	.navbar-brand img{
		max-width: 180px;
		max-height: 65px;
	}
	
	.logo-text{
		font-size: 18px;
		margin-left: 10px;
	}

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

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

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

	.section-title h3{
		font-size: 14px;
		margin-bottom: 10px;
	}

	.btn-default{
        padding: 16px 50px 16px 20px;
    }

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

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

	.btn-default.btn-highlighted{
        padding: 15px 50px 15px 20px;
    }

	.btn-large{
        font-size: 16px;
        padding: 18px 50px 18px 20px;
    }

	.hero.bg-section{
        padding: 160px 0 60px;
		background-image: url("../images/home-mobile.jpeg");
    }

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

	.hero-content .section-title h1{
		font-size: 36px;
	}
	
	.hero-content .section-title p{
        font-size: 14px;
    }

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

	.about-content-body ul{
        padding: 15px;
    }

	.about-content-body ul li{
        font-size: 16px;
		padding-left: 25px;
    }

	.about-content-body ul li:before{
        font-size: 16px;
    }

	.about-content-footer{
		display: block;
	}

	.about-contact-support{
		margin-left: 0px;
		margin-top: 15px;
	}

	.about-contact-support .icon-box{
		margin-right: 15px;
	}

	.about-contact-support .icon-box img{
		max-width: 35px;
	}

	.about-support-content{
		width: calc(100% - 50px);
	}

	.about-support-content h3{
        font-size: 20px;
    }

	.service-body-title h3{
		font-size: 20px;
	}

	.service-footer-btn{
		margin-top: 10px;
	}

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

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

	.why-choose-content h3{
        font-size: 20px;
        margin-bottom: 15px;
    }

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

	.why-choose-counter h3{
        font-size: 36px;
    }

	.project-body-title h3{
		font-size: 20px;
	}

	.project-footer-btn{
		margin-top: 10px;
	}

	.cta-box{
		padding-bottom: 0;
	}

	.cta-box-image{
		position: relative;
		text-align: center;
		margin-top: -20px;
		padding-left: 15px;
		padding-right: 15px;
	}
	
	.cta-box-image img{
		width: 150px;
		max-width: 100%;
		height: auto;
	}

	/* Add padding to button container */
	.cta-box .col-lg-7 .section-btn,
	.cta-box .col-md-8 .section-btn{
		padding-left: 15px;
		padding-right: 15px;
	}

	/* Set button width to 100% in mobile view */
	.cta-box .col-lg-7 .section-btn .btn-default,
	.cta-box .col-md-8 .section-btn .btn-default,
	.cta-box .col-lg-7 .section-btn .btn-large,
	.cta-box .col-md-8 .section-btn .btn-large{
		width: 100%;
		max-width: 100%;
		padding: 18px 50px 18px 20px;
		position: relative;
	}

	/* Fix button arrow icon positioning to prevent overlap with text */
	.cta-box .col-lg-7 .section-btn .btn-default::before,
	.cta-box .col-md-8 .section-btn .btn-default::before,
	.cta-box .col-lg-7 .section-btn .btn-large::before,
	.cta-box .col-md-8 .section-btn .btn-large::before{
		right: 15px;
		transform: translate(0, -50%);
		width: 20px;
		height: 20px;
	}

	.cta-box .col-lg-7 .section-btn .btn-default:hover::before,
	.cta-box .col-md-8 .section-btn .btn-default:hover::before,
	.cta-box .col-lg-7 .section-btn .btn-large:hover::before,
	.cta-box .col-md-8 .section-btn .btn-large:hover::before{
		transform: translate(3px, -50%);
	}

	.testimonial-rating i{
        font-size: 16px;
    }

	/* Mobile FAQ images - exact copy of desktop design - override 991px negative margins */
	.our-faqs-images .row:first-child{
		margin-bottom: 30px;
	}

	/* Reset all negative margins from 991px media query */
	.our-faqs-images .row:first-child .faqs-img-1,
	.our-faqs-images .row:first-child .faqs-img-2,
	.our-faqs-images .row:last-child .faqs-img-1,
	.our-faqs-images .row:last-child .faqs-img-2{
		margin-right: 0;
		margin-left: 0;
		margin-top: 0;
		margin-bottom: 0;
		width: 75%;
	}

	/* Left side images - larger size - ensure both top and bottom are same size */
	.faqs-img-1{
		width: 100%;
		position: relative;
		overflow: hidden;
		border-radius: 40px;
	}

	/* Right side images - smaller size */
	.faqs-img-2{
		width: 75%;
		position: relative;
		overflow: hidden;
		border-radius: 40px;
		margin-left: 0;
	}

	/* Ensure left top and left bottom images are exactly the same size */
	.our-faqs-images .row:first-child .faqs-img-1,
	.our-faqs-images .row:last-child .faqs-img-1{
		width: 100%;
	}

	.faqs-img-1 figure,
	.faqs-img-2 figure{
		display: block;
		width: 100%;
		position: relative;
	}

	.faqs-img-1 img{
		border-radius: 40px;
		width: 100%;
		height: auto;
		display: block;
		aspect-ratio: 34 / 33;
		object-fit: cover;
	}

	.faqs-img-2 img{
		border-radius: 40px;
		width: 100%;
		height: auto;
		display: block;
		aspect-ratio: 34 / 33;
		object-fit: cover;
	}

	.author-content h3{
        font-size: 20px;
    }

	.faq-accordion .accordion-item .accordion-button{
        font-size: 18px;
		line-height: 1.2em;
        padding: 10px 35px 10px 0px;
    }

	.faq-accordion .accordion-item .accordion-collapse .accordion-body{
		padding: 10px 35px 10px 0px;
	}

	.post-item-body h2{
		font-size: 20px;
	}

	.contact-sidebar{
		margin-bottom: 30px;
	}

	.contact-info .icon-box{
        margin-bottom: 10px;
    }

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

	.contact-info-content h3{
        font-size: 20px;
    }

	.contact-form{
        padding: 30px 20px;
    }

	.footer-logo{
        margin-bottom: 20px;
    }

	.footer-logo img{
        max-width: 180px;
		max-height: 70px;
    }
	
	.footer-logo-text{
		font-size: 20px;
		margin-left: 10px;
	}

	.footer-links{
		margin-bottom: 40px;
	}

	/* Minimal Footer Mobile Responsive */
	.footer-about{
		margin-bottom: 30px;
		text-align: center;
	}

	.footer-about p{
		font-size: 16px;
	}

	.footer-contact-block{
		text-align: center;
	}

	.footer-contact-block h3{
		font-size: 20px;
		margin-bottom: 20px;
	}

	.footer-contact-item{
		font-size: 16px;
		margin-bottom: 12px;
	}

	.main-footer .col-12:last-child .footer-links{
		margin-bottom: 0;
	}

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

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

	.footer-copyright{
        margin-top: 40px;
		text-align: center
    }

	.footer-copyright-text{
		margin-bottom: 10px;
	}

	.footer-copyright .footer-social-links ul{
		text-align: center;
	}

	.page-header{
		padding: 150px 0 60px;
	}

	.page-header-box h1{
		font-size: 36px;
	}

	.page-header-box ol li.breadcrumb-item{
		font-size: 16px;
	}

	.about-us-content-body ul{
        padding: 15px;
    }

	.about-us-content-body ul li{
        font-size: 16px;
        margin-bottom: 15px;
        padding-left: 25px;
    }

	.about-us-content-body ul li:before{
        font-size: 16px;
    }

	.about-us-content-footer{
		display: block;
	}

	.about-us-contact-support{
		margin-left: 0px;
		margin-top: 15px;
	}

	.about-us-contact-support .icon-box{
		margin-right: 15px;
	}

	.about-us-contact-support .icon-box img{
		max-width: 35px;
	}

	.about-us-support-content{
		width: calc(100% - 50px);
	}

	.about-us-support-content h3{
        font-size: 20px;
    }

	.company-history-image{
		padding-bottom: 50px;
	}
	
	.company-experience{
		padding: 15px;
		bottom: 0;
		right: 110px;
	}

	.company-experience-content h3{
		font-size: 36px;
	}
	
	.mission-vision-item{
		padding: 20px;
	}

	.mission-vision-item .icon-box{
		margin-bottom: 15px;
	}
	
	.mission-vision-item .mission-vision-content h3{
		font-size: 20px;
		margin-bottom: 15px;
	}
	
	.company-counter-item{
		padding: 30px 20px;
	}

	.company-counter-item .company-counter-content h3{
		font-size: 36px;
	}
	
	.team-body{
		padding: 20px;
	}
	
	.team-content h3{
		font-size: 20px;
	}

	.service-categories-list h3{
        font-size: 20px;
        margin-bottom: 15px;
    }

	.sidebar-cta-box .cta-content h3{
        font-size: 20px;
        margin-bottom: 15px;
    }

	.service-entry ul li{
		width: 100%;
	}

	.service-sustainable-img-1{
		margin-bottom: 30px;
	}

	.service-sustainable-content h3{
        font-size: 20px;
        margin-bottom: 15px;
    }

	.service-benefit-item .icon-box{
		margin-bottom: 15px;
	}

	.service-benefit-item .service-benefit-content h3{
		font-size: 20px;
		margin-bottom: 15px;
	}

	.working-process-item .step-number{
		margin-bottom: 15px;
	}

	.working-process-item .step-number h2{
		font-size: 24px;
	}
	
	.working-process-item .working-process-content h3{
		font-size: 20px;
		margin-bottom: 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: 30px;
	}

	.tag-links{
		font-size: 20px;
	}

	.project-single-content{
        margin-bottom: 30px;
    }

	.project-featured-image{
		margin-bottom: 20px;
	}

	.project-details-title h3{
        font-size: 20px;
    }

	.project-details-content ul{
		display: block;
	}

	.project-details-content ul li{
		width: 100%;
		margin-bottom: 15px;
		padding-left: 25px;
	}

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

	.project-details-content ul li:before{
		font-size: 18px;
	}

	.project-gallery-title h2{
        font-size: 20px;
    }

	.project-gallery-item{
		margin-bottom: 20px;
	}

	.contact-sidebar.page-contact-sidebar{
		margin-bottom: 0;
		margin-top: 30px;
	}

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

	.contact-social-list{
		margin-bottom: 30px;
	}

	.contact-info-body h3{
        font-size: 20px;
    }

	.contact-social-list h3{
		font-size: 22px;
		margin-bottom: 20px;
	}

	.google-map-iframe,
	.google-map-iframe iframe{
        height: 350px;
    }
	
	.faq-section .faq-accordion .accordion-item .accordion-button{
		font-size: 20px;
		padding: 10px 35px 10px 0px;
	}

	.faq-section .faq-accordion .accordion-item .accordion-collapse .accordion-body{
		padding: 10px 35px 10px 0px;
	}

	.error-page-content-heading h2{
		font-size: 36px;
	}
}

/* Language Switcher Styles */
/* Styles for language selection dropdown in header */
.language-switcher:not(.mobile-language-switcher) {
	/* Margin right to separate from contact button */
	margin-right: 15px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

/* Language button styles */
.language-switcher .language-btn {
	/* Remove default button styles */
	border: none !important;
	background: transparent !important;
	background-color: transparent !important;
	padding: 8px 12px;
	color: var(--white-color) !important;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.3s ease;
	box-shadow: none !important;
	outline: none !important;
}

.language-switcher .language-btn:hover,
.language-switcher .language-btn:focus,
.language-switcher .language-btn:active {
	color: var(--accent-color) !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
}

/* Language button hover effect */
.language-switcher .language-btn:hover {
	/* Change color on hover */
	color: var(--accent-color) !important;
	background: transparent !important;
}

/* Language button icon */
.language-switcher .language-btn i {
	/* Icon size */
	font-size: 18px;
	color: var(--white-color) !important;
}

/* Current language text */
.language-switcher .current-lang {
	/* Font weight for language code */
	font-weight: 600;
	text-transform: uppercase;
	color: var(--white-color) !important;
}

/* Language dropdown menu */
.language-switcher .dropdown-menu {
	/* Dropdown menu styling */
	min-width: 150px;
	border: 1px solid var(--divider-color);
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	padding: 5px 0;
}

/* Language option item */
.language-switcher .language-option {
	/* Option item styling */
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 15px;
	color: var(--text-color);
	text-decoration: none;
	transition: all 0.3s ease;
}

/* Language option hover effect */
.language-switcher .language-option:hover {
	/* Background color on hover */
	background-color: var(--secondary-color);
	color: var(--primary-color);
}

/* Active language option */
.language-switcher .language-option.active {
	/* Active option styling */
	background-color: var(--secondary-color);
	color: var(--primary-color);
	font-weight: 600;
}

/* Check icon for active language */
.language-switcher .language-option .fa-check {
	/* Check icon color */
	color: var(--accent-color);
	margin-left: 10px;
}

/* Mobile language switcher styles */
.mobile-language-switcher {
	/* Hide on desktop */
	display: none !important;
}

.mobile-right-group {
	/* Hide on desktop */
	display: none !important;
}

/* Responsive styles for language switcher */
@media (max-width: 991px) {
	/* Hide desktop language switcher on mobile */
	.language-switcher:not(.mobile-language-switcher) {
		display: none !important;
	}
	
	/* Show mobile right group */
	.mobile-right-group {
		display: flex !important;
		align-items: center;
		gap: 5px;
		flex-shrink: 0;
	}
	
	/* Show mobile language switcher */
	.mobile-language-switcher {
		display: flex !important;
		align-items: center;
		margin-right: 0;
		flex-shrink: 0;
	}
	
	/* Mobile language button */
	.mobile-language-switcher .language-btn {
		padding: 6px 10px;
		font-size: 12px;
		color: var(--white-color) !important;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		outline: none !important;
	}
	
	/* Mobile language button hover */
	.mobile-language-switcher .language-btn:hover,
	.mobile-language-switcher .language-btn:focus,
	.mobile-language-switcher .language-btn:active {
		color: var(--white-color) !important;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		outline: none !important;
	}
	
	/* Mobile language button icon */
	.mobile-language-switcher .language-btn i {
		font-size: 16px;
		color: var(--white-color) !important;
	}
	
	/* Mobile current language text */
	.mobile-language-switcher .current-lang {
		color: var(--white-color) !important;
	}
	
	/* Mobile language dropdown menu */
	.mobile-language-switcher .dropdown-menu {
		/* Dropdown menu styling */
		min-width: 150px;
		border: 1px solid var(--divider-color);
		border-radius: 4px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		padding: 5px 0;
		background: var(--white-color);
	}
	
	/* Mobile language option items */
	.mobile-language-switcher .language-option {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 15px;
		color: var(--text-color);
		text-decoration: none;
		transition: all 0.3s ease;
	}
	
	/* Mobile language option hover */
	.mobile-language-switcher .language-option:hover {
		background-color: var(--secondary-color);
		color: var(--primary-color);
	}
	
	/* Active mobile language option */
	.mobile-language-switcher .language-option.active {
		background-color: var(--secondary-color);
		color: var(--primary-color);
		font-weight: 600;
	}
}
/* Translation Page Styles */
/* Styles for dedicated translation/language selection page */
.translation-page {
	/* Padding for page section */
	padding: 100px 0;
	min-height: 70vh;
}

/* Translation page content */
.translation-page-content {
	/* Background and padding */
	background: var(--white-color);
	padding: 50px 40px;
	border-radius: 10px;
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

/* Language cards container */
.language-cards {
	/* Margin for cards */
	margin-top: 40px;
	margin-bottom: 30px;
}

/* Language card */
.language-card {
	/* Card styling */
	background: var(--white-color);
	border: 2px solid var(--divider-color);
	border-radius: 10px;
	padding: 30px;
	text-align: center;
	transition: all 0.3s ease;
	margin-bottom: 20px;
	height: 100%;
}

/* Language card hover effect */
.language-card:hover {
	/* Border color on hover */
	border-color: var(--accent-color);
	transform: translateY(-5px);
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* Active language card */
.language-card.active {
	/* Active card styling */
	border-color: var(--accent-color);
	background: var(--secondary-color);
}

/* Language card header */
.language-card-header {
	/* Header styling */
	margin-bottom: 20px;
}

/* Language icon */
.language-icon {
	/* Icon container */
	margin-bottom: 15px;
}

/* Flag icon */
.flag-icon {
	/* Flag emoji size */
	font-size: 48px;
	display: inline-block;
}

/* Language card title */
.language-card-header h3 {
	/* Title styling */
	font-size: 24px;
	font-weight: 600;
	color: var(--primary-color);
	margin: 0;
}

/* Language card body */
.language-card-body {
	/* Body styling */
	margin-top: 20px;
}

/* Language card description */
.language-card-body p {
	/* Description text */
	color: var(--text-color);
	margin-bottom: 20px;
}

/* Active language badge */
.language-active-badge {
	/* Badge styling */
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background: var(--accent-color);
	color: var(--white-color);
	border-radius: 25px;
	font-weight: 600;
}

/* Active badge icon */
.language-active-badge i {
	/* Check icon */
	font-size: 18px;
}

/* Current language info box */
.current-language-info {
	/* Info box styling */
	margin-top: 40px;
	margin-bottom: 30px;
}

/* Info box */
.current-language-info .info-box {
	/* Box styling */
	display: flex;
	align-items: flex-start;
	gap: 15px;
	padding: 20px;
	background: var(--secondary-color);
	border-radius: 8px;
	border-left: 4px solid var(--accent-color);
}

/* Info icon */
.info-icon {
	/* Icon styling */
	font-size: 24px;
	color: var(--accent-color);
	flex-shrink: 0;
}

/* Info content */
.info-content {
	/* Content styling */
	flex: 1;
}

/* Info content text */
.info-content p {
	/* Text styling */
	margin-bottom: 10px;
	color: var(--text-color);
}

/* Small text */
.small-text {
	/* Small text styling */
	font-size: 14px;
	color: var(--text-color);
	opacity: 0.8;
}

/* Translation page footer */
.translation-page-footer {
	/* Footer styling */
	margin-top: 40px;
}

/* Responsive styles for translation page */
@media (max-width: 768px) {
	/* Remove fixed height and width for about-us image on mobile */
	.about-image .reveal img {
		height: auto;
		width: 100%;
	}

	/* Adjust translation page on mobile */
	.translation-page {
		padding: 60px 0;
	}
	
	/* Smaller padding on mobile */
	.translation-page-content {
		padding: 30px 20px;
	}
	
	/* Stack cards on mobile */
	.language-cards .col-md-6 {
		margin-bottom: 20px;
	}
	
	/* Smaller card padding on mobile */
	.language-card {
		padding: 20px;
	}
	
	/* Smaller flag icon on mobile */
	.flag-icon {
		font-size: 36px;
	}
	
	/* Smaller title on mobile */
	.language-card-header h3 {
		font-size: 20px;
	}
}