/* ----------------------------------------------------------------------------------------
* Author        : Apps Imagica LLP
* Template Name : City Construction Group
* 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; */
	--secondary-color		: #0f1820;
	--text-color			: #667282;
	/* --accent-color			: #448c40; */
	--accent-color			: #0f1820;
	--white-color			: #0f1820;
	--divider-color			: #12223B30;
	--dark-divider-color	: #4b494920;
	--overlay-color			: #00000013;
	--black-color			: #0f1820;
	--error-color			: rgb(230, 87, 87);
	--default-font			: 'Fahkwang', sans-serif;
	--accent-font			: 'Fahkwang', sans-serif;
}

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

body{
	/* font-family: var(--default-font); */
	font-family: 'Fahkwang', sans-serif;
	font-size: 16px;
	font-weight: 200;
	line-height: 1.6em;
	color: var(--text-color);
	background-color: var(--white-color);
}

.element-hidden {
	opacity: 0;
	transform: translateY(20px);
	/* transition: opacity 0.1s ease, transform 1s ease; */
	transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out; 
}

.element-visible {
	opacity: 1;
	transform: translateY(0);
}

/* .element-hidden {
    opacity: 0;
    transform: translateX(-100px); 
    transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out; 
}

.element-visible {
    opacity: 1;
    transform: translateX(0); 
} */

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

h1,
h2,
h3,
h4,
h5,
h6{
	margin :0;
	/* font-family: 'Fahkwang', sans-serif; */
	font-family: 'Fahkwang', sans-serif;
	font-weight: 400;
	/* color: var(--accent-color); */
	color: #fff;
	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: 1920px; */
}

.container {
    /* width: 100%; */
    max-width: 1500px; /* Ideal for most screen sizes */
    /* margin: 0 auto;  */
    /* padding: 0 15px;  */
}

/* Breakpoints for responsiveness */
@media (max-width: 1200px) {
    .container {
        max-width: 960px;
    }
}

@media (max-width: 992px) {
    .container {
        max-width: 720px;
    }
}

@media (max-width: 768px) {
    .container {
        max-width: 540px;
    }
}

@media (max-width: 576px) {
    .container {
        max-width: 100%; /* Full width for small devices */
    }
}

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

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



 img.img_reveal {
	height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform-origin: left;
    transform-origin: left;
    min-height: 448px;
    max-height: 452px;
    min-width: 753px;
}

.row{
    /* margin-right: 0px;
    margin-left: 0px; */
}


@media  (max-width: 768px) {
	
	.row{
		margin-right: 0px;
		margin-left: 0px;
	}
	
}
.row > *{
	padding-right: 5px;
	padding-left: 5px;
	/* padding-bottom: 5px; */
}

.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: 'Fahkwang', sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.3em;
	text-transform: uppercase;
	color: var(--white-color);
	color: #fff;
	background: var(--accent-color);
	/* border-radius: 12px; */
	padding: 10px 20px 10px 20px;
	border: none;
	transition: 0.5s ease-in-out;
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.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(--text-color);
	border-radius: 0px;
    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 #fff transparent #fff;
	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{
	/* gunjan */
	/* margin: 0 25px; */
}

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

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

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

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

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

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

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

.section-title p{
	margin-top: 10px;
	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: #FFFFFF; */
	/* background: linear-gradient(to right, #ffffff3d, #0000006b); */
	/* background: linear-gradient(to bottom, #ffffff63, #00000063); */
	/* border-bottom: 1px solid var(--dark-divider-color); */
	position: fixed;
	z-index: 100;
	width: 100%;
	transition: all 0.3s ease-in-out;
    background: transparent; /* Transparent by default */
    top: 0;
	/* margin: 40px 40px 0px 40px; */
	/* box-shadow: 5px 5px 10px rgb(0 0 0 / 8%); */
	
}

header.main-header .header-sticky{
	position: relative;
	height: 103px;
	transition: all 0.3s ease-in-out;
}

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: #19875429; */
	border-bottom: 1px solid var(--divider-color);
	backdrop-filter: blur(10px);
}

/* Active header when scrolling */
header.main-header.active {
	/* Color of the header background on scroll */
    background: transparent; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.035);
    transform: scale(0.95); /* Scale down when scrolling */
}

header.main-header .header-sticky.active {
    /* height: 80px;  */
	/* Adjust height to scale down */
}

header.main-header.active .navbar-brand img {
    height: 50px; /* Reduced logo size on scroll */
}

header.main-header.active .navbar-nav .nav-link {
    font-size: 13px; /* Reduced font size for menu items */
}


.navbar{
	padding: 15px 10px 0px 10px;
	align-items: center;
	background: linear-gradient(135deg, rgba(14, 13, 27, 0) 0%, rgba(14, 13, 27, 0.41) 40.5%);
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0);
}

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

.main-menu .nav-menu-wrapper{
	flex: 1;
	text-align: right;
	padding-right: 150px;
}

.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: 'Fahkwang', sans-serif; */
	font-family: 'Fahkwang', sans-serif;
	font-size: 13px;
	font-weight: 400;
	padding: 10px 10px !important;
	color: #fff;
	text-transform: uppercase;
	transition: all 0.3s ease-in-out;
	text-shadow: 1px 1px 1.5px rgba(0, 0, 0);
}

.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);
	/* color: #000; */
}

.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); */
	background-color: white;
	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 .btn-default{
	padding: 20px 30px;
}

.header-btn .btn-default:hover{
	color: var(--accent-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: #fff;
	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: #fff;
}

.slicknav_menu ul{
	margin: 5px 0;
}

.slicknav_menu ul ul{
	margin: 0;
}

.slicknav_nav .slicknav_row,
.slicknav_nav li a{
	position: relative;
	font-family: 'Fahkwang', sans-serif;
	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	      ***/
/************************************/

.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    z-index: -1; 
}

.hero.bg-section{
	/* margin: 0 40px; */
	overflow: hidden;
	/* border-radius: 40px; */
	/* background: url("../images/hero-bg.jpg") 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 {
        width: 100%;
        height: auto;
        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-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: 920px;
	margin:  0 auto;
	text-align: center;
	z-index: 1;
} */

.hero-content .section-title h1{
	color: var(--white-color);
	/* font-size: 22px; */
	/* font-weight: 400; */
}

.hero-content .section-title p{
	font-size: 20px;
	color: var(--white-color);
	font-size: 14px;
	font-weight: 300;
}

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

.hero-content {
    position: absolute;
    top: 50%;
    /* left: 50%; */
    /* transform: translate(0%, -200%); */
    padding: 20px 20px 20px 10px;
    text-align: left;
	max-width: 470px;
}


.section-divider {
    border: 0;
    height: 1px; /* Thickness of the line */
    background: var(--white-color); /* Use a variable or specific color */
    width: 74%; /* Set width of the line */
    margin: 10px 0; /* Add space around the line */
	opacity: .9;
}

.section-divider-indx {
    border: 0;
    height: 1px; /* Thickness of the line */
    background: var(--white-color); /* Use a variable or specific color */
    width: 74%; /* Set width of the line */
    margin: 10px 0; /* Add space around the line */
	opacity: .9;
}

/* CTA Section */

.cta-banner {
    position: relative;
    width: 100%; /* Ensures full width */
    height: auto;
    /* background-image: url('../images/home/home_banner2.png');
    background-size: cover; */
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    margin-top: 2px;
    /* background-color: #05100a; */
	background-color: #0f1820;
}

.cta-content {
    max-width: 1200px; /* Ensures the p content stays within max width */
    text-align: center;
    padding: 20px;
    background-color: #0f1820; /* Ensure background color if needed */
}

.cta-logo {
    display: block;
    margin: 10px auto 20px auto; /* Center the logo and add spacing below */
    max-width: 120px; /* Set max-width for the logo */
    height: auto;
}

.cta-content p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.cta-button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 40px;
    border: none;
    cursor: pointer;
    font-size: 1em;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #45a049;
}

@media (max-width: 768px) {
    /* .cta-banner {
        height: 300px;
    } */

    .cta-content p {
        font-size: 1em;
    }

    /* .cta-content {
        padding: 10px;
    } */

    .cta-button {
        font-size: 0.9em;
        padding: 8px 16px;
    }
}

@media (max-width: 480px) {
    /* .cta-banner {
        height: 400px;
    } */

    .cta-content p {
        font-size: 0.9em;
    }

    .cta-button {
        font-size: 0.8em;
        padding: 6px 12px;
    }
}


@media (max-width: 991px) {
    /* .topcontent {
        display: none;
    } */

	.hero-content .section-title h1{
		font-size: 12px;
	}
	.hero-content .section-title p{
        font-size: 10px;
    }
}

/* Global styles for mobile view */
@media (max-width: 768px) {
    .cta-content {
        padding: 0px 0px 20px 0px ; /* Reducing padding for mobile view */
    }

    .cta-logo {
        max-width: 100px; 
        margin-bottom: 20px; /* Space between logo and text */
    }

    .cta-content p {
        font-size: 1em; /* Adjust the font size for readability */
        line-height: 1.5; /* Improve readability by reducing line spacing */
        margin-bottom: 20px; /* Add spacing below the paragraph */
    }

    .cta-button {
        font-size: 0.9em; /* Slightly smaller button text on mobile */
        padding: 20px 20px 20px 20px; /* Adjust padding */
        width: 100%; /* Full-width button for better alignment */
        max-width: 200px; /* Ensures it doesn't become too wide */
        margin: 0 auto; /* Center the button */
    }

    /* Adjustments for logo position relative to the banner */
    .cta-banner {
        height: auto; /* Make the height auto to avoid cropping */
        padding-top: 30px; /* Add padding above to avoid elements touching the edges */
    }
    
    /* Reduce spacing between image content below and the rest of the content */
    .cta-content img {
        margin-top: 10px; 
        
    }
}

@media (max-width: 480px) {
    .cta-content p {
        font-size: 0.9em; /* Further adjust text size for very small screens */
        padding: 0 10px; /* Reduce padding further on extra small screens */
    }

    .cta-button {
        padding: 8px 16px; /* Tweak padding for small screens */
        font-size: 0.8em;
    }

    .cta-logo {
        max-width: 100px; /* Make the logo smaller on extra small screens */
    }
}


/* CTA SECTION END */


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

.about-us{
	/* padding: 10px 0; */
}

.about-content{
	/* margin-left: 95px; */
	/* gunjan */
	padding-left: 50px;
    padding-right: 50px;
	/* margin-left: 0;
    padding-right: 51px; */
	
}

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

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

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

.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: 'Fahkwang', sans-serif;
	font-size: 16px;
	margin-bottom: 5px;
}

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

/************************************/
/***     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 a{
	position: relative;
	cursor: none;
	display: block;
}

.service-item .service-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;
    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: 400;
	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: 'Fahkwang', sans-serif;
	font-size: 18px;
	font-weight: 400;
	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;
}


/************************************/
/***     MD MESSAGE   START ***/
/************************************/


.md-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("images/home/citybg5.png"); 
	background-size: cover;
	background-position: center;
	z-index: -1;
}
.md-section {
	display: flex;
	align-items: flex-end;
}
.md-image {
	flex: 0 0 150px; /* Adjust the width of MD picture */
	margin-right: 20px;
}
.md-image img {
	width: 100%;
	height: auto;
	border-radius: 5px;
}
.md-content {
	flex: 1;
	background: rgba(0, 0, 0, 0.6); /* Optional: for text readability */
	padding: 20px;
	border-radius: 5px;
}
.md-content p {
	margin: 0;
	font-size: 18px;
}
.md-content .name {
	font-size: 20px;
	font-weight: bold;
	margin-top: 10px;
}
.md-content .designation {
	color: #98c379; /* Green color for designation */
	font-weight: bold;
}

/************************************/
/***     MD MESSAGE  END ***/
/************************************/


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

.why-choose-us{
	padding: 40px 0 40px;
	background: #efeeee;
}

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

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

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

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

.why-choose-content p{
	margin: 0;
	color: #000;
	font-size: 14px;
}

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

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

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



/* TWO SECTION INDEX PAGE */

.section-container {
    display: flex;
    justify-content: space-between;
    margin: 2px 0px 2px 0px;
}

.section {
    background-size: cover;
    background-position: center;
    width: 50%;
    padding: 70px;
    color: white;
    position: relative;
	overflow: hidden; 
align-items: center;}

.section::before {
    content: "";
    /* position: absolute; */
	justify-content: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8); /* Black shadow with 60% opacity */
    z-index: 1; /* Ensure it covers the background */
}

.content {
    position: relative;
	text-align: center;
	text-decoration: solid;
    z-index: 4; /* Ensure the content is above the shadow */
}

.section:first-child {
    background-image: url('../images/mbl/roofing.jpg'); /* Replace with actual path */
}

.section:last-child {
    background-image: url('../images/mbl/cladding.jpg'); /* Replace with actual path */
}

.section:last-child::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0); /* Black shadow with 60% opacity */
    z-index: 1; /* Ensure it covers the background */
}
.section:hover {
  transform: scale(1.05); 
  transition: transform 0.3s ease;
  filter: brightness(1.05);
}

.content h3 {
    color: var(--accent-color);
    font-size: 1.2em;
    margin-bottom: 10px;
}

.content h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
}

.content p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .section-container {
        flex-direction: column;
    }

    .section {
        width: 100%;
        margin-bottom: 20px;
    }
}



/* TWO SECTION INDEX PAGE END*/



/* MENTAL HEALTH SECTION */

.mental-health-section {
    display: flex;
    justify-content: center;
    margin: 40px 20px;
    gap: 20px;
}

.section-item {
    background-color: white;
    padding: 20px;
    width: 49%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* border-radius: 8px; */
}

.section-item h2 {
    color: var(--accent-color);
    font-size: 20px;
    margin-bottom: 15px;
}

.section-item p {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
}

.section-icon {
    width: 50px;
    height: auto;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .mental-health-section {
        flex-direction: column;
    }

    .section-item {
        width: 100%;
        margin-bottom: 20px;
    }
}


/* MENTAL HEALTH SECTION END*/


/* ABOUT US FLIP CARD SECTION */


.flip-card-container {
    display: flex;
    justify-content: space-around;
    margin: 50px 0;
}

.flip-card {
    background-color: transparent;
    width: 300px;
    height: 300px;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.flip-card-front {
    background-color: #ffffff;
    color: #333;
}

.flip-card-back {
    background-color: #4aa3e0;
    color: white;
    transform: rotateY(180deg);
}

/* SCROLLABLE CARD */

.card-section {
    display: flex;
    width: 100%;
    gap: 20px;
	padding-top: 40px;
}

.scroll-item {
    flex: 1;
    background-color: #35424f;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

.scroll-item h2{
	font-size: 24px;
}

.scroll-item p{
	font-size: 14px;
}

.scroll-item:hover {
    transform: scale(1.05);
}

.image-section img {
    width: 100%;
    height: auto;
    margin-top: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease-in-out;
}

.image-section img:hover {
    transform: scale(1.05); 
}

@media (max-width: 768px) {
    .card-section {
        flex-direction: column;
    }
}


/* INDEX PAGE CONTENTS */

.brochure1-section {
    display: flex;
    justify-content: center;
    padding: 40px 20px;
    background-color: #0f1820;
}

.brochure1-content {
    display: flex;
    width: 80%;
    align-items: center;
    gap: 50px;
}

.brochure1-left img {
    width: 250px;
    height: auto;
    /* border-radius: 8px; */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.brochure1-right h2 {
    font-size: 1.5em;
    margin-bottom: 5px;
}

.brochure1-right p {
    font-size: 14px;
    margin-bottom: 20px;
    color: #000;
    line-height: 1.6;
}

.download1-button {
    background-color: #fff;
    color: #000;
    padding: 10px 20px;
    border: none;
    /* border-radius: 5px; */
    cursor: pointer;
    font-size: 1em;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.download1-button:hover {
    background-color: #555;
}

.testimonial1-section {
    position: relative;
    height: 500px;
}

.testimonial1-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    color: white;
}

.testimonial1-text {
    z-index: 2;
    padding: 80px;
    max-width: 50%;
    background-color: rgba(0, 0, 0, 0.6);
    /* border-radius: 10px; */
}

.testimonial1-image img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-bottom: 10px;
}

.testimonial1-info h3 {
    font-size: 1.4em;
    margin-bottom: 5px;
}

.testimonial1-info p {
    font-size: 1em;
    margin-bottom: 10px;
}

blockquote {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.testimonial1-background img {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    filter: brightness(0.6);
}

@media (max-width: 768px) {
    .brochure1-content {
        flex-direction: column;
        text-align: center;
    }

    .brochure1-left img {
        margin-bottom: 20px;
    }

    .testimonial1-content {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 20px;
    }

    .testimonial1-text {
        max-width: 100%;
		padding: 20px;
    }
}


/************************************/
/***     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: 60px 0;
	/* gunjan */
	/* margin: 60px 0; */
}

.project-item{
	position: relative;
    overflow: hidden;
    text-align: center;
	height: calc(100% - 30px);
	/* gunjan */
	/* margin-bottom: 30px; */
	transition: all 0.4s ease-in-out;
	/* gunjan */
}
/* gunjan */
.page-project .project-item{
	position: relative;
    overflow: hidden;
    text-align: center;
	height: calc(100% - 30px);
	/* gunjan */
	/* margin-bottom: 30px; */
	transition: all 0.4s ease-in-out;
	max-height: 200px !important;
    /* min-height: 600px !important; */
	min-height: 400px !important;
}

.page-project .project-item .project-image img {
    width: 100%;
    aspect-ratio: 1 / 1.2;
    object-fit: cover;
    transition: all 0.4s ease-in-out;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
	height: 400px;
}

.project-image{
	overflow: hidden;
	/* gunjan */
	/* border-radius: 40px; */
}

.project-image a{
	position: relative;
	/* gunjan */
	/* 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%); */
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(217, 217, 217, 0) 13.02%, rgba(0, 0, 0, 0.544) 42.5%, rgb(0 0 0 / 0%) 70%, #000000 100%);

	/* gunjan */
	/* border-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%;
	/* gunjan */
	/* border-radius: 40px; */
	aspect-ratio: 1 / 1.2;
	object-fit: contain;
    transition: all 0.4s ease-in-out;
}

.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: 16px;
	font-weight: 100;
	color: var(--white-color);
	text-transform: capitalize;
	margin-bottom: 10px;
}

.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);
	font-size: 12px;
}

.project-content-footer .readmore-btn{
	position: relative;
	font-family: 'Fahkwang', sans-serif;
	font-size: 14px;
	font-weight: 200;
	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: 18px;
    height: 18px;
    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;
}


/* PROJECT PAGE  */
.project-image figure img {
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: grayscale(0%);
	transform: translateZ(10px) scale(1.05);
}

.project-image:hover figure img {
    transform: scale(1.2);
    filter: grayscale(0%);
}



.project-image::after {
    content: "View";
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.project-image:hover::after {
    opacity: 1;
}

/* .project-image:hover {
    transform: rotateY(180deg) rotateX(10deg);
} */

/* .project-image figure img {
    transition: transform 0.6s ease, filter 0.6s ease;
}

.project-image:hover figure img {
    transform: rotateY(15deg) rotateX(5deg);
    filter:sepia(1);
}

.project-image:hover::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.5rem;
    opacity: 0;
    animation: fadeInText 0.5s forwards;
}

@keyframes fadeInText {
    to {
        opacity: 1;
    }
} */

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

.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-item{
	border: 1px solid var(--divider-color);
	border-radius: 40px;
	padding: 30px;
}

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

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

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

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

.post-item-footer .readmore-btn{
	position: relative;
    font-family: 'Fahkwang', sans-serif;
    font-size: 18px;
    font-weight: 400;
    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: 0px;
	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: 400;
	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: 0px;
	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: 50%;
	text-transform: capitalize;
}

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

.main-footer{
    background: #fff;
    padding: 40px 0 0px;
    /* margin-top: 50px; */
    /* box-shadow: 22px 23px 14px 19px #5c58586e; */
	border-top: 1px solid #f7f7f7
}

/* .footer-logo{
	gunjan
	margin: 0px 0px 40px 40%;
	margin-bottom: 40px;
	margin-left: 160px;
} */

.footer-logo img{
	width: 30%;
    height: 100%;
	position: relative;
	margin-top: 40px;
}


.footer-content p{
	/* color: var(--white-color); */
	/* color: var(--primary-color); */
	margin: 0;
	font-size: 14px;
}

.footer-links h3{
	font-size: 18px;
	font-weight: 200;
	color: var(--accent-color);
	text-transform: capitalize;
	margin-bottom: 20px;
}

.footer-links ul{
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 14px;
}

.footer-links ul li{
	position: relative;
	text-transform: capitalize;
    padding-left: 0;
    margin-bottom: 10px;
}
/* 
.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(10) invert(5);
	/* filter: brightness(0) invert(1); */
}

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

.footer-links ul li a{
	color: var(--white-color);
	color: var(--primary-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;
	font-size: 14px;
}

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

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

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

.footer-copyright-text p{
	color: var(--white-color);
	/* color: var(--primary-color); */
	margin: 0;
	font-size: 12px;
}

.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: #fff;
	/* border: 2px solid #fff; */
    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: 20px;
}

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

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

.nav-item.social-media {
    position: absolute;
    right: 20px; /* Adjust this value as needed */
    top: 50%;    /* Vertically center in the header */
    transform: translateY(-50%); /* Adjust for centering */
}

.nav-item.social-media ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}



.nav-item.social-media ul li a {
    color: #fff; /* Change this to the desired color */
    font-size: 25px; /* Adjust size */
    text-decoration: none;
}

.nav-item.social-media ul li a:hover {
    color: var(--accent-color); /* Hover color change */
}

/* .page-header{
	overflow: hidden;
	background: url('../images/header2.png') no-repeat center center;
	background-size: cover;
	padding: 120px 0 30px;
	position: relative;
	margin-top: -103px;
	height: 600px;
} */
.page-header {
    overflow: hidden;
    position: relative;
    padding: 120px 0 30px;
    height: 600px;
    background: no-repeat center center;
    background-size: contain;
    background-attachment: fixed;
    margin-top: 0px;
}

.page-header:before{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/* background: #12223b82; */
	opacity: 100%;
	/* border-radius: 40px; */
	z-index: 1;
}

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

.page-header-box h1{
	font-size: 35px;
	font-weight: 400;
	color: var(--white-color);
	/* margin-bottom: 30px; */
	line-height: 1.1em;
	/* letter-spacing: -0.03em; */
	text-transform:uppercase;

}



.page-header-box{
	left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    text-align: center;
}



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

.page-header-box ol li.breadcrumb-item{
	color: var(--white-color);
	font-family: 'Fahkwang', sans-serif;
	font-size: 24px;
	font-weight: 400;
	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);
}


.new-background {
	background: url('/images/home/home_banner2.png') no-repeat center center;
	background-size: contain;
	max-height: 350px;
	width: 100%;
	height: auto;
}

/* Ensure responsiveness for smaller screens */
@media (max-width: 1200px) {
	.new-background {
		background-size: cover;
	}
}

@media (max-width: 768px) {
	.new-background {
		max-height: 250px;
		background-size: contain;
	}
}

@media (max-width: 576px) {
	.new-background {
		max-height: 200px;
	}
}

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

.about-us-content{
	/* gunjan */
	/* margin-left: 95px; */
	/* margin-left: 50px; */
	padding-left: 20px;
	/* padding-right: 51px; */
}

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

.about-us-content-body ul{
	background-color: var(--secondary-color);
	/* gunjan */
    /* 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); */
	color: #fff;
    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: #fff;
    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: 'Fahkwang', sans-serif;
	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;
	background: #111111;
}

.mission-vision-item{
	padding: 30px;
	/* border: 1px solid var(--divider-color); */
	border: 1px solid #fff;
	/* 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: 60px 0;
	background: var(--secondary-color);
}

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

.company-counter-item{
	background: var(--primary-color);
	padding: 50px 30px;
	text-align: center;
	border-radius: 0px;
	min-height: 235px;
}

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

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

.our-team{
	padding: 20px 0 0px;
}

.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; */
	filter: grayscale(100%);
	transition: all 0.5s ease-in-out;
}

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

.team-body{
	padding: 20px;
}

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


/* Mani */

.our-teamccg {
	padding: 10px 0 0px;
}

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

.teamccg-member-item .team-image img {
	filter: grayscale(100%);
	transition: all 0.5s ease-in-out;
	width: 100%;
	height: auto;
}

.teamccg-member-item:hover .team-image img {
	transform: scale(1.1);
	filter: grayscale(0%);
}

/* Overlay content (name and position) */
.overlay-content {
	position: absolute;
	bottom: 0px;
	left: 0;
	right: 0;
	text-align: center;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.218); /* Adds a semi-transparent background */
	/* padding: 10px; */
	transition: background-color 0.3s ease;
}

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

.overlay-content p {
	margin: 0;
	text-transform: capitalize;
	font-size: 14px;
	font-weight: 300;
}

.teamccg-member-item:hover .overlay-content {
	background-color: rgba(77, 75, 75, 0.418); /* Darkens the overlay background on hover */
}





/************************************/
/***    brochure section start	  ***/
/************************************/


.white-background-section {
    background-color: #fff; /* White background for the outer section */
    padding-bottom: 100px; /* Space to accommodate the negative margin */
    position: relative;
}

.black-background-section {
    background-color: #0f1820; /* White background for the outer section */
    padding-bottom: 100px; /* Space to accommodate the negative margin */
    position: relative;
}

.brochure-section {
    background-color: #6f6f6f; /* Background color similar to the one in your image */
    padding: 60px 20px;
    position: relative;
}

.brochure-container {
    display: flex;
	flex-wrap: wrap;
    align-items: center;
    justify-content: center; 
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.brochure-image img {
    width: 300px;
    height: auto;
    /* border-radius: 5px; */
    position: relative;
    z-index: 2;
    margin-bottom: -150px; /* Larger negative margin to overlay the next section */
	transition: transform 0.3s ease;
}

.brochure-image img:hover {
    transform: scale(0.8); /* Scale up the image by 20% */
}

.brochure-info {
    color: #fff;
    padding-left: 200px; /* Reduce padding to move it closer to the image */
    max-width: 1000px; /* Optional: You can set a max-width to control the width of the text area */
}

.brochure-info h2 {
    font-size: 1.8em;
    margin-bottom: 20px;
    color: #fff;
}

.download-button {
    display: inline-block;
    background-color: transparent;
    color: #fff;
    font-size: 1em;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid #fff;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
    margin-top: 10px; /* Optional: to add some space between the heading and the button */
}

.download-button:hover {
    background-color: #fff;
    color: #808080;
}

@media (max-width: 768px) {
    .brochure-container {
        flex-direction: column; /* Stack items vertically on mobile */
        align-items: center; /* Center the items */
    }

    .brochure-image img {
        /* width: 100%;  */
        margin-bottom: -50px; 
    }

    .brochure-info {
        padding-left: 0; /* Remove left padding for mobile */
        text-align: center; /* Center text on mobile */
        max-width: 100%; /* Allow full width for text area */
    }

    .brochure-info h2 {
        font-size: 1.5em; /* Decrease heading size for mobile */
		margin-top: 80px;
    }

    .download-button {
        margin-top: 20px; /* Adjust margin for better spacing on mobile */
    }

	.white-background-section {
        margin-bottom: -140px;
    }
}



/************************************/
/***    brochure section end	  ***/
/************************************/


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

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

/************************************/
/***    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: 0px;
	overflow: hidden;
	/* aspect-ratio: 1 / 0.7; */
    object-fit: cover;
	width: 100%;
}

.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: 400;
	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,
.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: 400;
}

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

.post-entry ol li{
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 400;
    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: 400;
	color: var(--primary-color);
	display: inline-block;
}

.post-tags .tag-links a{
    display: inline-block;
    font-size: 18px;
    font-weight: 400;
    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: 30px 0; */
}

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

.slider-container {
    position: relative;
    width: 100%;
    /* max-width: 1200px; */
	height: fit-content;
    margin: auto;
    overflow: hidden;
}

.slider-wrapper {
    display: flex;
    transition: transform 0.5s ease;
}

.nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}


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

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

.project-featured-image{
	margin-bottom: 30px;
	min-width: 100%;
}

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

.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: 400;
	text-transform: capitalize;
}

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


.project-sidebar {
    position: sticky;
    top: 20px;
	display: flex;
	justify-content: center;
}

.project-info-box {
    /* border: 1px solid var(--divider-color); */
    padding: 30px;
    display: flex; /* Make the children align horizontally */
    flex-direction: row; /* Align children in a row */
    justify-content: center; /* Add space between each item */
    flex-wrap: wrap; /* Allow wrapping if content overflows */
}

.project-info-item {
    display: flex;
    align-items: center;
    margin-right: 20px; /* Add some space between each item */
    flex: 1; /* Allow the item to grow and shrink */
    min-width: 150px; /* Set a minimum width to ensure proper layout */
}

.project-info-content {
    width: auto; /* Adjust width to fit horizontally */
}

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

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

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

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


.project-description {
    font-size: 16px;
    margin-top: 15px;
    color: #fff; /* Adjust color to fit your theme */
	font-weight: 300;
	background-color: #0000000e;
}

.additional-info {
    margin-top: 20px;
}

.additional-info h3 {
    font-size: 20px;
    font-weight: 600;
}

.additional-info ul {
    list-style: none;
    padding: 0;
}

.additional-info ul li {
    font-size: 16px;
    margin-bottom: 5px;
}



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

.project-info-box{
	border: 1px solid var(--divider-color);
	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-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: 400;
	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:60px 0px 0px;
}

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

.contact-info-item{
	border: 1px solid #f7f7f7;
	border-radius: 0px;
	height: calc(100% - 0px);
	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: 400;
	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: 400;
	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;
}


/* CONTACT FORM */

.contact-container {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 50px 300px 100px 300px;
	/* height: 120vh; */
	height: auto;
	background-image: url('../images/contact/contact_bg.jpeg'); 
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}


.form-container {
	display: flex;
	background-color: white;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	overflow: hidden;
	margin-top: 100px;
}

.form-left {
	padding: 30px;
	background-color: white;
	width: 50%;
	box-sizing: border-box;
}

.form-left h2 {
	color: var(--accent-color);
	margin-bottom: 10px;
	font-size: 24px;

}
.form-left p {
	margin-bottom: 15px;
	color: #555;
	font-size: 12px;
}

.form-left form {
	display: flex;
	flex-direction: column;
}

.form-left input, .form-left textarea {
	margin-bottom: 12px;
	padding: 15px;
	font-size: 16px;
	border: 1px solid #ccc;
	border-radius: 5px;
	width: 100%;
	box-sizing: border-box;
}

.form-left button {
	padding: 15px;
	background-color: #555;
	color: white;
	border: none;
	font-size: 16px;
	cursor: pointer;
	border-radius: 5px;
}

.form-left button:hover {
	background-color: var(--accent-color);
}

.form-right {
	background-color: #f4f4f4;
	padding: 30px;
	width: 50%;
	box-sizing: border-box;
}

.form-right h3 {
	margin-bottom: 10px;
	color: #333;
}

.form-right p {
	margin-bottom: 12px;
	color: #555;
}

.map-container {
	margin-top: 20px;
}

.map-container iframe {
	width: 100%;
	border: none;
	height: 300px;
	border-radius: 5px;
}


@media (max-width: 768px) {
	.contact-container {
		padding: 20px;
		height: 150vh;
	}

	.form-container {
		flex-direction: column;
		width: 100%;
		/* margin-top: 30vh; */
	}

	.form-left, .form-right {
		width: 100%;
		padding: 20px;
	}

	.form-left h2 {
		font-size: 1.5em;
	}

	.form-left input, .form-left textarea {
		font-size: 14px;
		padding: 10px;
	}

	.form-left button {
		padding: 10px;
		font-size: 14px;
	}

	.map-container iframe {
		height: 150px;
	}
}


.no-blue-link {
    color: inherit;
    text-decoration: none;
}
/* CONTACT FORM END */


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

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

	/* .navbar{
        padding: 20px 0px;
    }
	 */
	.main-menu ul li{
		margin-left: 0;
	}
}

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

	#magic-cursor{
        display: none !important;
    }

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

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

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

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

	.navbar{
		padding: 20px 0px;
	}

	.hero.bg-section{
		margin: 0 0px;
		margin-top: -103px;
		/* padding: 800px 0 100px !important; */
		border-radius: 0;
	}

	@media  (max-width: 991px) {
		.hero.bg-section {
			margin: 0 0px;
			/* margin-top: -103px; */
			/* padding: 1200px 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 p{
		font-size: 20px;
	} */

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

	.about-image{
		text-align: center;
		margin-bottom: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 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;
	}

	.cta-box-image{
		right: 0;
	}

	.cta-box-image img{
		width: 300px;
	}

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

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

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

	.footer-logo{
		margin-bottom: 0;
		display: flex;
		justify-content: center;
	}

	.footer-logo img{
		/* max-width: 180px; */
    	height: auto;
	}

	.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;
	} */
	
	.page-about-us .row {
		margin: 0;
	}

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

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

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

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

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

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

	/* .hero-content .section-title p{
        font-size: 18px;
    } */

	.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-image img{
		width: 150px;
	}

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

	.faqs-img-2 img{
		width: 140px;
	} 

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

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

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

/* client */

.Marquee {
	/* background: -webkit-linear-gradient(225deg, #008ed9, #8b00db);
	background: -moz-linear-gradient(225deg, #008ed9, #8b00db);
	background: -o-linear-gradient(225deg, #008ed9, #8b00db);
	background: -ms-linear-gradient(225deg, #008ed9, #8b00db); */
	background: #f7f8f7;
	/* width: 85vw; */
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 2em 1em;
	color: #fff;
	font-weight: 200;
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: box;
	display: flex;
	-webkit-box-align: center;
	-moz-box-align: center;
	-o-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	overflow: hidden;
  }
  .Marquee-content {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: box;
	display: flex;
	-webkit-animation: marquee 30s linear infinite running;
	-moz-animation: marquee 30s linear infinite running;
	-o-animation: marquee 30s linear infinite running;
	-ms-animation: marquee 30s linear infinite running;
	animation: marquee 30s linear infinite running;
  }
  .Marquee-content:hover {
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	-o-animation-play-state: paused;
	-ms-animation-play-state: paused;
	animation-play-state: paused;
  }
  .Marquee-tag {
	width: 200px;
	margin: 0 0.5em;
	padding: 0.5em;
	/* background: #fff; */
	display: -webkit-inline-box;
	display: -moz-inline-box;
	display: -webkit-inline-flex;
	display: -ms-inline-flexbox;
	display: inline-box;
	display: inline-flex;
	-webkit-box-align: center;
	-moz-box-align: center;
	-o-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-o-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	transition: all 0.2s ease;
  }
  .Marquee-tag:hover {
	background: rgba(255,255,255,0.5);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	cursor: pointer;
  }
  @-moz-keyframes marquee {
	0% {
	  -webkit-transform: translateX(0);
	  -moz-transform: translateX(0);
	  -o-transform: translateX(0);
	  -ms-transform: translateX(0);
	  transform: translateX(0);
	}
	100% {
	  -webkit-transform: translate(-50%);
	  -moz-transform: translate(-50%);
	  -o-transform: translate(-50%);
	  -ms-transform: translate(-50%);
	  transform: translate(-50%);
	}
  }
  @-webkit-keyframes marquee {
	0% {
	  -webkit-transform: translateX(0);
	  -moz-transform: translateX(0);
	  -o-transform: translateX(0);
	  -ms-transform: translateX(0);
	  transform: translateX(0);
	}
	100% {
	  -webkit-transform: translate(-50%);
	  -moz-transform: translate(-50%);
	  -o-transform: translate(-50%);
	  -ms-transform: translate(-50%);
	  transform: translate(-50%);
	}
  }
  @-o-keyframes marquee {
	0% {
	  -webkit-transform: translateX(0);
	  -moz-transform: translateX(0);
	  -o-transform: translateX(0);
	  -ms-transform: translateX(0);
	  transform: translateX(0);
	}
	100% {
	  -webkit-transform: translate(-50%);
	  -moz-transform: translate(-50%);
	  -o-transform: translate(-50%);
	  -ms-transform: translate(-50%);
	  transform: translate(-50%);
	}
  }
  @keyframes marquee {
	0% {
	  -webkit-transform: translateX(0);
	  -moz-transform: translateX(0);
	  -o-transform: translateX(0);
	  -ms-transform: translateX(0);
	  transform: translateX(0);
	}
	100% {
	  -webkit-transform: translate(-50%);
	  -moz-transform: translate(-50%);
	  -o-transform: translate(-50%);
	  -ms-transform: translate(-50%);
	  transform: translate(-50%);
	}
  }

  /* end */
  /* about us gunjan*/

  .carousel-item img  {
	max-height: 221px;
    object-fit: cover;
    position: relative;
    height: 100%;
    min-height: 729px;
  }

  
  /* client */

.section-row.team_section .card{
	padding: 50px;
    background: #ffffffab;
    box-shadow: -1px 3px 20px 2px #0000002b;
  }

  .team_partnerss img{
    width: 208px;
    /* height: 100px; */
    min-width: 200px;
    margin: 19px;	
  }

  .team_partnerss{
	margin-top: 60px;
	margin-bottom: 30px;
  }

  .partner_img {
    width: 100%;
    height: auto;
}

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

  .services_partnerss{
	margin-top: 60px;
  }

  
  #card-info{
	text-align: center;
	justify-items: center;
	/* width: 340px;; */
	height:fit-content!important;
	padding: 35px 35px 35px 35px ;
    background-color: #ffffffb5;
	/* background-image: "images/white-image.png"; */
    /* border-radius: 5px 5px 5px 5px; */
    box-shadow: 0px 6px 61px 6px rgb(0 0 0 / 40%);
	/* transition: transform ease 900ms; */
	/* transition: transform 0.9s ease, background-color 0.9s ease, box-shadow 0.6s ease; */
	transition: transform 1.5s cubic-bezier(0.9, 0.5, 0.25, 1), background-color 1.5s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
	/* overflow: hidden; */
}
#card-info:hover{
	    /* box-shadow: 0px 25px 68px 6px rgb(255 33 63 / 50%); */
		
	/* background:#ff0754; */
	/* background: #448c40; */
	background: #000000;
	/* box-shadow:0px 4px 35px 5px rgb(68 140 64); */
	box-shadow:	0px 4px 21px 2px rgb(22, 22, 22);
	transform: translate(0, -10px);
	
}



    #my-icon {
	/* color:#ff0754; */
	color: #448c40;
	font-size:56px;
	line-height: 56px;
}

#my-icon, #icon-2 {
    font-size: 56px;
    line-height: 56px;
    display: block;
    margin: 0 auto;
}

#icon-2{
   
    display: none;
}
#card-info:hover #icon-2{
    display: block;
	justify-content: center;
	text-align: center;
}
 #card-info:hover #my-icon{
     display: none;
content: "\f117";
	
}

#card-info:hover #main-title, #sub-title{
    color: white;
}
#card-info:hover #sub-title{
    color: white;
}
#main-title{
	margin: 30px 0px 25px;
	font-family: 'Fahkwang', sans-serif;
    font-weight: bold;
    line-height: 28px;
    font-weight: 400;
    font-style: normal;
    color: #000;
    font-size: 18px;

}
#sub-title{
	color: #000;
    font-size: 16px;
	font-weight: 300;
}

 /* For Tablet View */
@media screen and (max-width: 768px) {
    
    #card-info{
        padding: 15px 20px 20px 20px !important;
    height: 310px;
        overflow: hidden;
    }
}
/*  home page */

.index_img {

	position: relative;
  
	align-items: center;
  
	justify-content: center;
  
	display: flex;
  
	margin-top: 108px;
  
	/* margin-bottom: 100px; */
  
  }
  
   
  
  /*  end */
  
  /*  ============================================Watch highlights or some say section / video section============================================ */
  
  .video_sec {
  
	/* background: url(../images/video-bg.png) no-repeat; */
  
	background-size: 100% 100%;
  
	background-position: center;
  
	position: relative;
  
	width: 100%;
  
	min-height: 460px;
  
	padding: 26px 0px;
  
	align-items: center;
  
	display: flex;
  
  }
  
  h6.video-title {
  
	font-size: 32px;
  
	font-weight: 400;
  
  }
  
  p.video-para {
  
	color: #F5F5F5;
  
	font-size: 20px;
  
	font-weight: 400;
  
  }
  
  .video {
  
	display: block;
  
  }
  
  /* video {
  
	aspect-ratio: 4/3;
  
	max-height: calc(100vh - 6rem);
  
	max-width: 100%;
  
	width: fit-content;
  
	height: fit-content;
  
	display: block;
  
	background-color: black;
  
	object-fit: cover;
  
	align-self: center;
  
	width: 100%;
  
	height:456px;
  
  } */
  
  #owl-demo div video {
  
	aspect-ratio: 4/3;
  
	max-height: calc(103vh - -5rem);
  
	max-width: 100%;
  
	/* width: fit-content; */
  
	height:100%;
  
	display: block;
  
	
  
	background-color: black;
  
	
  
	object-fit:fill;
  
	align-self: center;
  
	width: 100%;
  }
	/* border-radius: 1.28rem; */
  /* filter: sepia(80%); */
	/* height: 727px; */
	/* height: 852px; */

  
	@media (max-width: 768px) {
		#owl-demo div video {
			aspect-ratio: 16/9; /* Switch to 16:9 aspect ratio for mobile landscape view */
			max-height: 100vh; /* Set maximum height to full viewport height */
			width: 100vw; /* Make video full width on smaller screens */
			object-fit: cover; /* Ensures video covers the entire screen without distortion */
		}
	}
	
	@media (max-width: 576px) {
		#owl-demo div video {
			aspect-ratio: 16/9; /* Keep 16:9 ratio for smaller mobile devices */
			max-height: 100vh; /* Limit video height to fit within viewport */
			width: 100%; /* Ensure it scales well on very small screens */
			object-fit: cover; /* Make sure video covers container without distortion */
		}
	}
	  

  /* .hero-content  {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    text-align: center;
  } */
  /*  */
  .header-social-links ul{
	list-style: none;
    margin: 0;
    padding: 0;
	display: flex;
    /* gap: 15px; */
    /* text-align: end; */
  }
.header-social-links ul li {
    display: inline-block;
    /* margin-right: 5px; */
}
.header-social-links ul li a {
    background-color: transparent;
    color: #fff;
    /* border: 2px solid #fff;
    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; */
}

/* .main-menu .header-social-links ul li a:hover,
 .main-menu .header-social-links ul li a:focus{
	color: #fff;
    border: 2px solid #fff;
} */

.navbar-brand img {
	/* width: 100%; */
    height: 70px;
    min-width: 42px;
    min-height: 74px;
}
.footer-logo {
    margin-bottom: 15px;
}
.section-row.our_projects .section-title p {
    width: 100%;
    max-width: 1155px;
    margin: 0 auto;
    margin-top: 30px;
}

.our-projects.our_team {
    /* background: var(--secondary-color) url(../images/clients-bg.jpg) no-repeat; */
	background: var(--secondary-color) url(../images/ClientDisplay/client_b2.jpg) no-repeat;
    /* padding: 60px 0; */
    /* margin: 60px 0; */
    background-size: cover;
}

.woodland_client .service-image-item {
    height: auto;
}

body.modal-open {
	overflow: hidden !important;
	position: fixed;
  }


  .modal.fade.modal_status  .carousel-control-next, .carousel-control-prev {
	position: absolute;
    top: 50%;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15%;
    padding: 0;
    color: #fff;
    text-align: center;
    background: 0 0;
    border: 1px solid #fff;
    opacity: .7;
    transition: opacity .15s ease;
    background: rgb(97 145 215 / 61%);
    width: 40px;
    height: 40px;
    align-items: center;
    border-radius: 50px;
	margin: 0 15px;
}

.modal.fade.modal_status .modal-header{
	padding: 0px;
}
.modal.fade.modal_status .modal-content{
	border-radius: 0px;
}
.modal.show.modal_status .modal-dialog {
    transform: none;
    box-shadow: 1px -2px 13px -3px #000000;
}

.modal-body.modal_body button.btn-close {
    position: absolute;
    background: #008000c2;
    z-index: 3;
    /* left: 50%; */
    right: 15px;
    top: 17px;
    width: 30px;
    height: 29px;
    border-radius: 50px;
    border: 1px solid #fff;
}
.modal-body.modal_body button.btn-close i{
	/* color: #fff;
    font-size: 25px;
    padding: 3px; */
	color: #fff;
    font-size: 28px;
    padding: 1px;

}

.modal.fade.modal_status .carousel-control-next-icon, .modal.fade.modal_status .carousel-control-prev-icon {
    display: inline-block;
    width: 29px;
    height: 32px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100% 100%;
}


/* css */

.abt-imgg img{
	/* height: auto;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform-origin: left;
    transform-origin: left;
    min-height: 500px;
    max-height: 778px; */
	height: 100%;
    width: 100%;
    object-fit: cover;
	/* filter: grayscale(80%) ; */
}

.abt-imgg img:hover{
	filter: grayscale(0%) ;
	transition: (0.5s) ease-in;
	scale: 1.02;
}



/* Ensure the container doesn't overflow and maintains padding */


/* .col-md-4.col-lg-12, .col-md-4.col-lg-6 {
    padding-bottom: 8px;
} */


.photo_gallery {
    /* padding: 60px 0 0; */
}
  
  /* For gallery images: Makes sure images are responsive, fit within their container, and maintain aspect ratio */
  .gallery-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    /* height: 270px; */
    min-height: 800px;
    max-height: 800px;	
 }

		 .row .abc{

			margin-top: 7px;
		 }

		  /* Adds spacing between the columns and rows */
.gx-4 {
	--bs-gutter-x: 20px; /* Horizontal gutter (left/right space) */
  }
  .gy-4 {
	--bs-gutter-y: 20px; /* Vertical gutter (top/bottom space) */
  }
  
  
  /* Add margin for spacing between the images */

  
  /* Mobile view (small screens) */
  @media (max-width: 767.98px) {
	.gallery-img {
		width: 100%;
		height: auto;
		object-fit: cover;
		/* height: 270px; */
		min-height: unset;
		max-height: 800px;
	}
  }
  
  /* Tablet view (medium screens) */
  @media (min-width: 768px) and (max-width: 991.98px) {
	.gallery-img {
	  width: 100%; 
	  height: auto;
	}
  }
  
  /* Large screens (desktops) */
  @media (min-width: 992px) {
	.gallery-img {
	  width: 100%; 
	  height: auto;
	}
	

  }
  

.map iframe {
    width: 100%;
    height: auto;
	min-height: 250px;
    max-height: 500px;
}

@media (max-width: 767px) {
    /* .container-fluid {
        padding-left: 1px;
        padding-right: 1px;
    } */

    .hero-content {
        padding: 20px;
    }
}

@media (max-width: 768px) {
    .project-description {
        display: none;
    }
}

@media (max-width: 767px) {
    .team_partnerss .row {
        flex-direction: column; /* Stacks the logos vertically */
    }

    .team_partnerss .col-3 {
        width: 100%; /* Make each logo take the full width of the container */
        margin-bottom: 15px; /* Adds space between the logos */
    }
}


@media (max-width: 767px) {
    .services_partnerss .row {
        flex-direction: column; /* Stack the cards vertically */
    }

    .services_partnerss .col-4 {
        width: 100%; /* Each card takes up the full width */
        margin-bottom: 20px; /* Add some space between cards */
    }

    /* Adjust image size for smaller screens */
    #my-icon, #icon-2 {
        width: 60px; /* Smaller size for icons */
    }

    #main-title {
        font-size: 16px; /* Slightly smaller font for titles */
    }

    #sub-title {
        font-size: 12px; /* Smaller font for subtitles */
    }
}

@media (max-width: 767px) {
	    .clients-page .page-header {
        padding: 170px 0 60px;
        height: auto !important;
    }
    .sectors-page .page-header {
        padding: 270px 0 60px;
        height: auto !important;
    }
}


/* MANI */
/*  PROJECT DETAILS OPTION 1 Start*/
.info-section {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px 0px 20px 0px;
	background-color: #f9f9f9;
}

.info-box {
    flex: 1;
    min-width: 150px;
    background-color: white;
    padding: 20px 0px 20px 0px;
    text-align: center;
    /* border-radius: 10px; */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-box h3 {
    color: #4CAF50;
    margin-bottom: 10px;
}

.info-box p {
    font-size: 1.1em;
    color: #555;
	margin-bottom: 0px;
}

.info-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    .info-section {
        flex-direction: column;
        align-items: center;
    }

    .info-box {
        width: 100%;
        max-width: 400px;
    }
}
/*  PROJECT DETAILS OPTION 1 End*/


/*  PROJECT DETAILS OPTION 2*/

.card-section {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px 5px 20px 5px;
}

.card {
    flex: 1;
    min-width: 150px;
    padding: 15px;
    background-color: #fff;
    /* border-radius: 12px; */
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: background-color 0.6s ease, box-shadow 0.6s ease;
    position: relative;
    overflow: hidden;
}

.card h3 {
    color: #4CAF50;
    margin-bottom: 10px;
}

.card p {
    font-size: 1.1em;
    color: #000;
}

.card:hover {
    /* background: linear-gradient(135deg, #4CAF50, #3B9B42); */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    color: white;
}

/* .card:hover h3, .card:hover p {
    color: white;
} */

.card i {
    font-size: 30px;
    margin-bottom: 15px;
    color: #4CAF50;
}

@media (max-width: 768px) {
    .card-section {
        flex-direction: column;
        align-items: center;
    }

    .card {
        width: 100%;
        max-width: 400px;
    }
}

/*  PROJECT DETAILS OPTION 2 End*/


@media (max-width: 2000px) {
    .about-footer.text-center {
        text-align: unset;
    }
}



.col-4 {
	position: relative;
	cursor: pointer;
}

.sector-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.013);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	overflow-y: auto;
}

.sector-overlay-content {
	background-color: rgba(0, 0, 0, 0.80);
	padding: 20px;
	/* border-radius: 8px; */
	text-align: left;
	max-width: auto;
	max-height: auto; 
	width: 80%;
	color: white;

	margin: 40px 0; /* Add some space at the top and bottom */

    overflow-y: auto; /* Enable scrolling inside the content area if needed */
}

#sector-close-overlay {
	position: absolute;
	top: 10px;
	right: 10px;
	color: white;
	font-size: 24px;
	cursor: pointer;
}



@media (max-width: 768px) {
    .navbar-brand {
        width: 20vw; /* Smaller width for mobile */
    }

    .navbar-toggle {
        width: 35px;
        height: 35px;
    }

	.navbar-brand img{
	/* width: 100%; */
    /* height: auto; */
    /* min-width: 42px; */
    /* min-height: 74px; */
	}
}

@media (max-width: 991px) {
    .page-header {
		background-size: none important!;
        /* background-position: bottom; */
        /* max-height: 90vh; */
		/* width: auto; */
		height: auto important!;
        background-color: #f4f4f4;
    }
}

.projects-header-img1 {
/* background-image: url(../images/woodlands/woodlands1.jpg); */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 120vh;
}

@media (max-width: 768px) {
    .projects-header-img1 {
        background-size: cover; /* Ensures the image fills the container without gaps */
        background-position: center; /* Keeps the image centered */
        background-repeat: repeat; /* Prevent any repetition */
        height: 35vh; /* Full viewport height */
        width: 100%; /* Full width */
    }
	.section-divider{
		display: none;
	}
}

.pages-header-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 70vh;
	filter: grayscale(100%);
	transition: filter 0.5s;
}

@media (max-width: 768px) {
    .pages-header-img {
        background-size: cover; 
        background-position: center; 
        background-repeat: repeat; 
        height: 35vh; 
        width: 100%; 
    }
}

.pages-header-img-about {
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    height: 70vh;
	filter: grayscale(100%);
	transition: filter 0.5s;
}

@media (max-width: 768px) {
    .pages-header-img-about {
        background-size: cover; 
        background-position: center; 
        background-repeat: repeat; 
        height: 35vh; 
        width: 100%; 
    }
}

/* ipad pro */

/* iPad Portrait (768x1024) */
@media screen and (max-width: 1024px) {

	.responsive-menu, .navbar-toggle {
        display: block;
    }
	.header-social-links{
		display: none;
	}
	.main-menu .nav-menu-wrapper{
		display: none;
	}
	.col-md-4{
		width: 100%;
	}
	.projects-header-img1{
		height: 50vh;
	}
	.pages-header-img{
		height: 35vh;
	}
	.pages-header-img-about{
		height: 35vh;
	}
	.col-lg-9{
		width: 100%;
	}
	.contact-container {
		padding: 50px 0px 50px 0px;
	}
}


@media (max-width: 991px) {
    .col-lg-9{
		width: 100%;
	}
}


/* COOKIES CONSENT */

#cookieConsent {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(51, 51, 51, 0.95); /* Slightly transparent background for overlay effect */
    color: #fff;
    text-align: center;
    padding: 20px;
    font-size: 14px;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2); /* Shadow for floating effect */
}

.cookie-banner p {
    display: inline-block;
    margin: 0;
    padding-right: 10px;
}

.cookie-banner button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 14px;
}

.cookie-banner button:hover {
    background-color: #45a049;
}




/* SYSTEMS DROPDOWN */

/* --- DESKTOP / DEFAULT --- */
.dd-wrap {
	position: relative;
	display: inline-block;
}

.has-dd {
	padding: 10px 12px;
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
}

.dd {
	position: absolute;
	top: 100%;
	margin-top: 10px;
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	min-width: 240px;
	padding: 8px;
	border: 1px solid rgba(255, 255, 255, .12);
	backdrop-filter: blur(8px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 1000;
	text-align: left;
}

.dd a {
	display: block;
	padding: 10px 12px;
	color: #eaf2ff;
	text-decoration: none;
}

.dd a:hover {
	background: rgba(247, 245, 245, .08);
	color: #fff;
}

/* show on hover (desktop) OR when JS adds .open */
.dd-wrap:hover .dd,
.dd-wrap.open .dd {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

/* --- MOBILE / TOUCH OVERRIDES --- */
@media (hover:none),
(max-width: 900px) {

	/* ignore hover on touch; rely on .open only */
	.dd-wrap:hover .dd {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: none;
	}

	/* stack inside the off-canvas; no clipping */
	.dd {
		position: static;
		margin: 6px 0 0;
		transform: none;
		border: 1px solid rgba(0, 0, 0, .08);
		backdrop-filter: none;
		background: #fff;
		color: #111;
		box-shadow: none;
		display: none;
		/* hidden by default on mobile */
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.dd a {
		color: #111;
	}

	.dd a:hover {
		background: rgba(0, 0, 0, .05);
		color: #000;
	}

	.dd-wrap.open .dd {
		display: block;
	}

	/* show on tap */
}

/* ensure header sits above page content if needed */
header,
nav {
	position: relative;
	z-index: 5;
}


/* SYSTEMS DROPDOWN ENDS */

/* work page start */

.gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 12px;
      margin-top: 2rem;
    }
.gallery img {
      width: 100%;
      height: 240px;
      object-fit: cover;
      border-radius: 0px;
      cursor: pointer;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
.gallery img:hover {
      transform: scale(1.03);
      box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    }

    /* Show more button */
.show-more {
      text-align: center;
      margin: 2rem 0;
    }
.link-btn {
      background: none;
      border: none;
      font-weight: 600;
      font-size: 1rem;
      color: #fff;
      cursor: pointer;
      transition: color 0.25s ease;
    }
.link-btn:hover {
      color: #93c5fd;
    }

    /* Lightbox overlay */
.lightbox {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.85);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      flex-direction: column;
      animation: fadeIn .3s ease;
    }
@keyframes fadeIn {
      from {opacity: 0;}
      to {opacity: 1;}
    }
.lightbox img {
      max-width: 90%;
      max-height: 80%;
      border-radius: 1px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    }
.lightbox .controls {
      position: absolute;
      top: 50%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      transform: translateY(-50%);
      padding: 0 1rem;
    }
.lightbox button {
      background: rgba(255,255,255,0.2);
      border: none;
      color: #fff;
      font-size: 2rem;
      padding: 0.5rem 1rem;
      cursor: pointer;
      border-radius: 0%;
      transition: background 0.3s;
    }
.lightbox button:hover {
      background: rgba(255,255,255,0.4);
    }
.lightbox .close {
      position: absolute;
      top: 1rem;
      right: 1.5rem;
      font-size: 2rem;
    }
.lightbox-counter {
      position: absolute;
      bottom: 1rem;
      color: #ccc;
      font-size: 0.9rem;
    }

.section1 {
    padding: clamp(56px, 8vw, 86px) 0
}

.page-title.center{ text-align:center }
.page-title{ letter-spacing:.09em; }

.container1 {
    width: min(1180px, 88vw);
    margin: 0 auto;
    padding: 0 4px
}
    /* work page end */

	/* Title */
.page-title.center{ text-align:center }
.page-title{ letter-spacing:.09em; }

/* Grid of system types */
.systems-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin: 26px 0 34px;
}
@media (min-width: 880px){
  .systems-grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 34px 28px;
  }
}

/* Individual system card */
.system-card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 1px;
  padding: 16px 16px 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.system-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 80px rgba(0,0,0,.34);
  border-color: rgba(255,255,255,.12);
}

/* Card image */
.system-card > img{
  /* width: 100%; */
  /* height: 120px; */
  object-fit: cover;
  border-radius: 0px;
  margin-bottom: 14px;
  filter: saturate(1.02) contrast(1.02);
  transition: transform .4s ease, filter .3s ease;
}
.system-card:hover > img{ transform: scale(1.02); filter: none; }

/* Headings + text blocks inside card */
.system-card h3{
  margin: 4px 0 12px;
  font-size: 0.95rem;
  letter-spacing: .22em;         /* narrow caps look from screenshot */
  text-transform: uppercase;
  color: #e9f0ff;
}
.system-card p{
  margin: 0 0 8px;
  color: #c2ccdd;
  line-height: 1.45;
  font-size: .95rem;
}
.system-card p strong{ color:#eaf1ff; font-weight:700 }

/* Partner / Systems band at bottom */
.partners{
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.partners h2{
  font-size: .9rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color:#cfd6e6;
  margin: 12px 0 10px;
}

/* Logos row */
.partner-logos{
  display:flex; flex-wrap:wrap;
  gap: 22px 34px;
  justify-content:center;
  align-items: center;
  padding: 14px 0 4px;
}
.partner-logos img{
  height: 34px; width:auto;
  filter: grayscale(100%) contrast(1) opacity(.9);
  transition: filter .2s ease, transform .2s ease;
}
.partner-logos img:hover{
  filter: none; transform: translateY(-2px);
}

/* Optional reveal animation (if your main.js adds .show) */
.reveal{ opacity:0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.reveal.show{ opacity:1; transform:none; }

/* If you prefer to always show content even if JS fails, uncomment:
.reveal{ opacity:1 !important; transform:none !important; }
*/


    /* roofing system page ends */

		/* COMING SOON CARD FOR PROJECT PAGE */
	
		.our-work {
			background-color: #0b0f16;
			color: #fff;
			text-align: center;
			padding: 80px 20px;
			font-family: "Inter", sans-serif;
		}
	
		.our-work h2 {
			font-size: 2rem;
			font-weight: 600;
			margin-bottom: 50px;
			letter-spacing: 1px;
		}
	
		/* Coming Soon Container */
		.coming-soon-container {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			gap: 30px;
			max-width: 1200px;
			margin: 0 auto;
		}
	
		/* Individual Card */
		.coming-soon-card {
			background: linear-gradient(145deg, #1b2230, #131824);
			border: 1px solid rgba(255, 255, 255, 0.08);
			border-radius: 16px;
			width: 300px;
			height: 200px;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: default;
			box-shadow: 0 0 20px rgba(255, 255, 255, 0.02);
			position: relative;
			transition: transform 0.4s ease, box-shadow 0.4s ease;
			overflow: hidden;
		}
	
		.coming-soon-card:hover {
			transform: translateY(-5px) scale(1.02);
			box-shadow: 0 0 25px rgba(251, 134, 4, 0.25);
		}
	
		/* Text animation */
		.coming-soon-text {
			font-size: 1.3rem;
			font-weight: 500;
			color: #eaeaea;
			letter-spacing: 1px;
			position: relative;
			animation: fadeGlow 3s infinite ease-in-out;
		}
	
		/* Animated glow effect */
		@keyframes fadeGlow {
	
			0%,
			100% {
				text-shadow: 0 0 10px #fb8604, 0 0 20px #fb8604, 0 0 40px #fb8604;
				color: #fff;
			}
	
			50% {
				text-shadow: 0 0 5px #fb8604;
				color: #fb8604;
			}
		}
	
		/* Subtext */
		.coming-soon-subtext {
			width: 100%;
			text-align: center;
			margin-top: 40px;
			color: #aaa;
			font-size: 0.95rem;
			letter-spacing: 0.5px;
		}
	
		/* Responsive */
		@media (max-width: 768px) {
			.coming-soon-card {
				width: 90%;
			}
	
			.coming-soon-text {
				font-size: 1.1rem;
			}
		}
		/* COMING SOON CARD FOR PROJECT PAGE END*/