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

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

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

:root{
	--primary-color				: #FFFFFF;
	--secondary-color			: #1B1B1B33;
	--text-color				: #A7AABB;
	--bg-color					: #060606;
	--accent-color				: #A93E17;
	--accent-secondary-color	: #15399A;
	--divider-color				: #FFFFFF0F;
	--dark-divider-color		: #FFFFFF1A;
	--error-color				: rgb(230, 87, 87);
	--default-font				: "Sora", sans-serif;
}

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

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

::-webkit-scrollbar-track{
	background-color: var(--primary-color);
	border-left: 1px solid var(--primary-color);
}

::-webkit-scrollbar{
	width: 7px;
	background-color: var(--primary-color);
}

::-webkit-scrollbar-thumb{
	background: linear-gradient(170deg, var(--accent-color) 0.26%, var(--accent-secondary-color) 99.99%);
}

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

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

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

figure{
	margin: 0;
}

img{
	max-width: 100%;
}

a{
	text-decoration: none;
}

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

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

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

.container{
	max-width: 1300px;
}

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

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

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

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

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

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

.flowmap-effect{
    position: relative;
}

.flowmap-effect .flowmap-deformation{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	-webkit-border-radius: inherit;
	border-radius: inherit;
}

.flowmap-effect .flowmap-deformation.active canvas{
	opacity: 1;
}

.flowmap-effect .flowmap-deformation canvas{
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 100% !important;
	z-index: 1;
	opacity: 0;
	-webkit-transition: opacity 0.3s 0.3s;
	transition: opacity 0.3s 0.3s;
	-webkit-border-radius: inherit;
	border-radius: inherit;
}

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

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

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

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

.btn-default{
	position: relative;
	display: inline-block;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25em;
	text-transform: capitalize;
	background: linear-gradient(100deg, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	color: var(--primary-color);
	border-radius: 100px;
	padding: 16px 56px 16px 24px;
	border: none;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.btn-default:hover{
	background-position: right center;
}

.btn-default::before{
	content: '';
	position: absolute;
	top: 50%;
	right: 6px;
	width: 40px;
	height: 40px;
	background-color: var(--primary-color);
	background-image: url('../images/arrow-gradiant.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 24px auto;
	border-radius: 50%;
	transform: translateY(-50%);
	transition: all 0.4s ease-in-out;
}

.btn-default:hover::before{
	transform: translateY(-50%) rotate(45deg);
}

.btn-default.btn-highlighted{
	border: 1px solid var(--dark-divider-color);
	background: transparent;
	padding: 15px 56px 15px 24px;
	overflow: hidden;
}

.btn-default.btn-highlighted::after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 0;
	height: 100%;
	background: linear-gradient(100deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
	transition: all 0.4s ease-in-out;
	z-index: -1;
}

.btn-default.btn-highlighted:hover::after{
	right: auto;
	left: 0;
	width: 100%;
}

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

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

.readmore-btn:hover::before{
	filter: brightness(0) invert(1);
	transform: rotate(45deg);
}

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

.cb-cursor::before{
	background: linear-gradient(90.01deg, var(--accent-color) 0.26%, var(--accent-secondary-color) 99.99%);
}

.preloader{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background: rgba(10, 10, 12, 0.96);
	display: flex;
	align-items: center;
	justify-content: center;
}

.loading-container,
.loading{
	height: 100px;
	position: relative;
	width: 100px;
	border-radius: 100%;
}

.loading-container{
	margin: 40px auto;
}

.loading{
	border: 1px solid transparent;
	border-color: transparent var(--primary-color) transparent var(--primary-color);
	animation: rotate-loading 1.5s linear 0s infinite normal;
	transform-origin: 50% 50%;
}

.loading-container:hover .loading,
.loading-container .loading{
	transition: all 0.5s ease-in-out;
}

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

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

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

.bg-section{
	max-width: 1800px;
	border-radius: 20px;
	margin: 0 auto;
}

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

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

.section-title.section-title-center{
	width: 100%;
	max-width: 700px;
	text-align: center;
	margin: 0 auto;
}

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

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

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

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

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

.section-title h3{
	display: inline-block;
	position: relative;
	font-size: 14px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
	background-image: url('../images/icon-sparkle.svg');
	background-repeat: no-repeat;
    background-position: left center;
    background-size: 20px auto;
	padding-left: 30px;
    margin-bottom: 20px;
}

.section-title h1{
	font-size: 56px;
    letter-spacing: -0.02em;
	margin-bottom: 0;
	cursor: none;
}

.section-title h2{
    font-size: 46px;
    letter-spacing: -0.02em;
	margin-bottom: 0;
	cursor: none;
}

.section-title h1 span,
.section-title h2 span{
	background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
    background-clip: text;
    -webkit-text-fill-color: transparent;
	transition: all 0.4s ease-in-out;
}

.section-title h1:hover span,
.section-title h2:hover span{
	background-position: right center;
}

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

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

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

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

header.main-header{
	position: relative;
	background: var(--divider-color);
	margin: 40px auto;
	z-index: 100;
}

header.main-header .container-fluid{
	padding: 0;
}

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

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

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

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

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

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

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

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

.main-menu ul li a{
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	padding: 13px 10px !important;
	color: var(--primary-color);
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}

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

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

.main-menu ul li a:focus-visible{
    box-shadow: none;
}

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

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

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

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

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

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

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

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

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

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

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

.slicknav_btn{
	background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	border-radius: 8px;
	transition: all 0.4s ease-in-out;
}

.navbar-toggle a.slicknav_btn.slicknav_open{
	background-position: right center;
}

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

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

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

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

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

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

.slicknav_menu{
	position: absolute;
    width: 100%;
	padding: 0;
	background: linear-gradient(110deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
}

.slicknav_menu ul{
	margin: 5px 0;
}

.slicknav_menu ul ul{
	margin: 0;
}

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

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

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

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

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

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

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

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

.hero.hero-bg-image::before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	background: var(--bg-color);
	opacity: 0.6;
    width: 100%;
    height: 100%;
    z-index: 1;
}

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

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

.hero .container-fluid{
	padding: 0;
}

.hero.hero-bg-image .hero-content{
	width: 100%;
	max-width: 825px;
	background: transparent;
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
	border-radius: 0;
	margin: 0 auto;
	text-align: center;
	padding: 0;	
}

.hero.hero-bg-image .hero-content .hero-btn{
	justify-content: center;
}

.hero-box{
	position: relative;
	margin-bottom: 40px;
	padding: 40px;
}

.hero-content{
	position: relative;
	width: 55%;
	background: var(--secondary-color);
	backdrop-filter: blur(100px);
	-webkit-backdrop-filter: blur(100px);
	border-radius: 20px;
	padding: 120px 4.167vw;
	z-index: 2;
}

.hero-content .section-title h3{
	background-image: url('../images/icon-sparkle-white.svg');
}

.hero-btn{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin-top: 60px;
}

.hero-image-box{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	overflow: hidden;
}

.hero-image-box figure{
	display: block;
	height: 100%;
}

.hero-image-box img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 20px;
}

.hero-image-box .video-play-button{
	position: absolute;
	bottom: 0;
	right: 0;
	background: var(--bg-color);
	border-radius: 20px 0 0 0;
	padding: 20px;
	z-index: 1;
}

.video-play-button{
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.hero-image-box .video-play-button::before,
.hero-image-box .video-play-button::after{
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	background-color: var(--bg-color);
	mask-image: url('../images/hero-video-corner-shape.svg');
	-webkit-mask-image: url('../images/hero-video-corner-shape.svg');
	mask-repeat: no-repeat;
	mask-size: cover;
}

.hero-image-box .video-play-button::before{
	top: -20px;
	right: 0;
}

.hero-image-box .video-play-button::after{
	bottom: 0;
	left: -20px;
}

.video-play-button a{
	height: 50px;
	width: 50px;
	background: linear-gradient(110deg, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: none;
	transition: all 0.3s ease-in-out;
}

.video-play-button:hover a{
	background-position: right center;
}

.video-play-button a i{
	font-size: 18px;
	color: var(--primary-color);
	margin-left: 2px;
}

.video-play-button h3{
	font-size: 16px;
}

.hero-info-item{
	position: relative;
	background-color: var(--secondary-color);
	background-image: url('../images/hero-info-bg-img-1.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	border: 1px solid var(--divider-color);
	backdrop-filter: blur(180px);
	-webkit-backdrop-filter: blur(180px);
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	padding: 40px 2.083vw;
	overflow: hidden;
}
 
.hero-info-content h3{
	font-size: 20px;
}

.hero-info-content p{
	margin: 15px 0 0;
}

.hero-info-body{
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-top: 30px;
}

.hero-info-body-content ul{
	list-style: disc;
	margin: 0;
	padding-left: 20px;
}

.hero-info-body-content ul li{
	line-height: 1.5em;
	margin-bottom: 10px;
}

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

.hero-info-body-content ul li::marker{
	color: var(--accent-color);
}

.hero-info-body-content .btn-default{
	margin-top: 30px;
}

.hero-info-image{
	position: relative;
	width: 100%;
	max-width: 150px;
	align-content: end;
	margin-right: -40px;
	margin-bottom: -80px;
}

.hero-info-image figure{
	display: block;
}

.hero-info-image img{
	width: 100%;
	object-fit: cover;
}

.hero-info-box-2{
	background-image: url('../images/hero-info-bg-img-2.png');
	justify-content: center;
	text-align: center;
}

.hero-info-item .icon-box{
	position: absolute;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-icon-box-1{
	background: var(--accent-secondary-color);
	top: 40px;
	left: 40px;
	animation: movestyle1 5s infinite linear alternate;
}

.hero-icon-box-2{
	background: var(--accent-color);
	bottom: 40px;
	right: 40px;
	animation: movestyle2 5s infinite linear alternate;
}

@keyframes movestyle1{
	0%{
		transform: translate(-15px, 60px) rotate(40deg);
	}

	100%{
		transform: translate(10px, 10px) rotate(-40deg);
	}
}

@keyframes movestyle2{
	0%{
		transform: translate(15px, -70px) rotate(-40deg);
	}

	100%{
		transform: translate(0px, -20px) rotate(40deg);
	}
}

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

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

.hero-info-item .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

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

.hero-info-box-2 .hero-info-content{
	max-width: 55%;
	margin: 0 auto;
}

.hero-info-box-2 .hero-info-content h2{
	font-size: 24px;
}

.hero-info-box-2 .hero-info-content h2 span{
	background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: all 0.4s ease-in-out;
}

.hero-info-box-2 .hero-info-content h2:hover span{
	background-position: right center;
}

.hero-info-box-3 .hero-info-body{
	align-items: flex-end;
}

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

.review-image{
	position: relative;
	display: inline-block;
	margin-left: -10px;
	z-index: 1;
}

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

.review-image figure{
	display: block;
	border: 1px solid var(--bg-color);
	border-radius: 50%;
}

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

.review-image.add-more{
	width: 50px;
	height: 50px;
	background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	border: 1px solid var(--bg-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.3s ease-in-out;
}

.review-image.add-more:hover{
	background-position: right center;
}

.review-image.add-more h3{
	font-size: 14px;
}

.satisfy-client-content{
	margin-top: 20px;
}

.satisfy-client-content h3{
	font-size: 16px;
	font-weight: 700;
}

.satisfy-client-content h3 span{
	color: var(--accent-color);
}

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

.about-us{
	padding: 160px 0 80px;
}

.about-image-box{
	position: relative;
	margin-right: 15px;
}

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

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

.about-image-box .contact-us-circle{
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
}

.about-image-box .contact-us-circle::before{
	content: '';
	position: absolute;
	left: -1px;
	bottom: 0;
	width: 175px;
	height: 175px;
	background-color: var(--bg-color);
	mask-image: url('../images/contact-circle-bg-shape.svg');
	-webkit-mask-image: url('../images/contact-circle-bg-shape.svg');
	mask-repeat: no-repeat;
	mask-size: cover;
}

.contact-us-circle a{
	display: inline-block;
	border-radius: 50%;
	overflow: hidden;
}

.contact-us-circle a img{
	width: 100%;
	max-width: 130px;
	border-radius: 20px;
	animation: infiniterotate 20s infinite linear;
}

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

	to{
		transform: rotate(360deg);
	}
}

.contact-us-circle a:hover img{
	animation-play-state: paused;
}

.about-review{
	position: absolute;
	top: 0;
	right: 0;
	background: var(--bg-color);
	border: 18px solid var(--bg-color);
	border-radius: 0 0 0 20px;
	border-right: none;
	border-top: none;
	z-index: 1;
}

.about-review::before,
.about-review::after{
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	background-color: var(--bg-color);
	mask-image: url('../images/about-review-bg-shape.svg');
	-webkit-mask-image: url('../images/about-review-bg-shape.svg');
	mask-repeat: no-repeat;
	mask-size: cover;
}

.about-review::before{
	top: 0;
	left: -37px;
}

.about-review::after{
	bottom: -37px;
	right: 0;
}

.about-review-box{
	position: relative;
	width: 240px;
	background: linear-gradient(100deg, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	border-radius: 20px;
	padding: 25px;
	transition: all 0.4s ease-in-out;
	margin-left: auto;
	z-index: 1;
}

.about-review-box:hover{
	background-position: right center;
}

.about-review-box .review-image figure{
	border-color: var(--primary-color);
}

.review-info-content{
	margin: 30px 0 20px;
}

.review-rating i{
	color: var(--primary-color);
	margin-right: 2px;
}

.review-content p{
	color: var(--primary-color);
	margin: 10px 0 0;
}

.video-play-button.bg-effect{
	padding: 5px 0 5px 5px;
}

.video-play-button.bg-effect a{
	position: relative;
	width: 44px;
	height: 44px;
	background: var(--primary-color);
	cursor: none;
	margin-right: 10px;
}

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

.video-play-button.bg-effect a:after{
	animation-delay: .3s;
}

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

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

.text-effect .line{
	width: 100%;
	color: var(--dark-divider-color);
	background: linear-gradient(120deg, var(--primary-color), var(--primary-color)) no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	background-size: 0%;
}

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

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

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

.about-body-header .icon-box{
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(to right, var(--accent-secondary-color) 0%, var(--accent-color) 50%, var(--accent-secondary-color) 100%);
	background-size: 200% auto;
	border-radius: 50%;
	margin-right: 15px;
	transition: all 0.3s ease-in-out;
}

.about-body-item:hover .about-body-header .icon-box{
	background-position: right center;
}

.about-body-header .icon-box img{
	width: 100%;
	max-width: 24px;
}

.about-body-title{
	width: calc(100% - 65px);
}

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

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

.about-body-list-box{
	padding: 20px;
	border: 1px solid var(--divider-color);
	background: var(--secondary-color);
	border-radius: 20px;
	margin-top: 40px;
}

.about-body-list-box ul{
	display: flex;
	flex-wrap: wrap;
	gap: 20px 40px;
	list-style: disc;
	margin: 0;
	padding-left: 20px;
}

.about-body-list-box ul li{
	width: calc(50% - 20px);
	line-height: 1.5em;
}

.about-body-list-box ul li::marker{
	color: var(--accent-color);
}

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

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

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

.service-item{
	border: 1px solid var(--divider-color);
	background: url('../images/service-item-bg.png'), var(--secondary-color);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	backdrop-filter: blur(180px);
	-webkit-backdrop-filter: blur(180px);
	border-radius: 20px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 20px;
	transition: all 0.4s ease-in-out;
}

.service-item:hover{
	transform: translateY(-5px);
}

.service-content-box{
	padding: 20px;
	margin-bottom: 10px;
}

.service-item-header{
	display: flex;
	align-items: center;
}

.service-item-title{
	width: calc(100% - 60px);
	margin-right: 15px;
}

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

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

.service-item-header .icon-box a{
	position: relative;
	height: 45px;
	width: 45px;
	border: 1px solid var(--dark-divider-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.service-item-header .icon-box a::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(120deg, var(--accent-color), var(--accent-secondary-color));
    border-radius: 50%;
    height: 100%;
    width: 100%;
    transform: scale(0);
    transition: all 0.3s ease-in-out;
}

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

.service-item-header .icon-box a img{
	position: relative;
	width: 100%;
	max-width: 24px;
	transition: all 0.3s ease-in-out;
	z-index: 1;
}

.service-item-header .icon-box a:hover img{
	transform: rotate(45deg);
}

.service-item-content{
	border-top: 1px solid var(--divider-color);
	margin-top: 20px;
	padding-top: 20px;
}

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

.service-item-image a,
.service-item-image a figure{
	display: block;
	border-radius: 20px;
	overflow: hidden;
	cursor: none;
}

.service-item-image a img{
	width: 100%;
	aspect-ratio: 1 / 0.748;
	object-fit: cover;
}

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

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

.section-footer-text p span{
	font-size: 16px;
	font-weight: 500;
	display: inline-block;
	background: linear-gradient(to right, var(--accent-secondary-color) 0%, var(--accent-color) 50%, var(--accent-secondary-color) 100%);
	background-size: 200% auto;
	color: var(--primary-color);
	line-height: 1.2em;
	padding: 3px 12px;
	border-radius: 99px;
	margin-right: 10px;
	transition: all 0.4s ease-in-out;
}

.section-footer-text p:hover span{
	background-position: right center;
}

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

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

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

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

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

.why-choose-item{
	border: 1px solid var(--divider-color);
	background-color: var(--secondary-color);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	backdrop-filter: blur(180px);
	-webkit-backdrop-filter: blur(180px);
	border-radius: 20px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 40px;
	overflow: hidden;
}

.why-choose-box-1{
	background-image: url('../images/why-choose-bg-img-1.png');
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

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

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

.why-choose-list{
	margin: 50px -40px 0;
}

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

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

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

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

.scrolling-content span{
	border: 1px solid var(--dark-divider-color);
	background: var(--divider-color);
	color: var(--primary-color);
	padding: 14px 20px;
	border-radius: 100px;
}

.scrolling-ticker-item:hover .scrolling-content{
	animation-play-state: paused;
}

.why-choose-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.why-choose-item-list .why-choose-item{
	height: auto;
	margin: 0;
}

.why-choose-box-2{
	width: calc(40% - 20px);
	background-image: url('../images/why-choose-bg-img-2.png');
}

.why-choose-item-header{
	display: flex;
	align-items: center;
}

.why-choose-title-box{
	width: calc(100% - 100px);
	margin-right: 20px;
}

.why-choose-title-box .icon-box{
	background: var(--accent-color);
	border-radius: 50%;
	width: 50px;
	height: 50px;
	background: linear-gradient(100deg, var(--accent-secondary-color) 0%, var(--accent-color) 50%, var(--accent-secondary-color) 100%);
	background-size: 200% auto;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease-in-out;
	margin-bottom: 30px;
}

.why-choose-item:hover .why-choose-title-box .icon-box{
	background-position: right center;
}

.why-choose-title-box .icon-box img{
	max-width: 24px;
}

.why-choose-item-header .contact-us-circle a img{
	max-width: 80px;
}

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

.why-choose-counter-box-1,
.why-choose-counter-box-2{
	width: calc(30% - 20px);
	background-image: url('../images/why-choose-bg-img-3.png');
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
}

.why-choose-counter h2{
	font-size: 46px;
	color: var(--accent-color);
}

.why-choose-icon{
	position: absolute;
	top: -20px;
	right: -20px;
}

.why-choose-icon img{
	max-width: 100px;
}

.why-choose-us .section-footer-text{
	margin-top: 60px;
}

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

.our-projects{
	padding: 80px 0 50px;
}

.our-projects .container-fluid{
	max-width: 1600px;
}

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

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

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

.project-image figure:before{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(180deg, rgba(6, 6, 6, 0.00) 49.26%, rgba(6, 6, 6, 0.86) 86.32%);
	z-index: 1;
}

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

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

.project-btn{
	position: absolute;
	top: 50px;
	right: 30px;
	opacity: 0;
	visibility: hidden;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

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

.project-btn a{
	position: relative;
	display: block;
	background: linear-gradient(100deg, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease-in-out;
}

.project-btn a:hover{
	background-position: right center;
}

.project-btn a img{
	width: 100%;
	max-width: 24px;
	transition: all 0.3s ease-in-out;
}

.project-btn a:hover{
	transform: rotate(45deg);
}

.project-content{
	position: absolute;
	right: 30px;
	bottom: 30px;
	left: 30px;
	z-index: 2;
}

.project-content h3{
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 10px;
}

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

.project-content p{
	background: url('../images/icon-sparkle-white.svg') no-repeat;
	background-position: left center;
	background-size: 18px auto;
	text-transform: capitalize;
	padding-left: 25px;
	margin: 0;
}

/************************************/
/*** 	 09. What We Do css 	  ***/
/************************************/

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

.what-we-do-item{
	border: 1px solid var(--divider-color);
	background: var(--secondary-color) url('../images/what-we-do-bg-img.png') no-repeat;
	background-position: center center;
	background-size: cover;
	backdrop-filter: blur(180px);
	-webkit-backdrop-filter: blur(180px);
	border-radius: 20px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 40px 35px;
	transition: all 0.4s ease-in-out;
}

.what-we-do-item:hover{
	transform: translateY(-5px);
}

.what-we-do-item .icon-box{
	margin-bottom: 80px;
}

.what-we-do-item .icon-box img{
	max-width: 50px;
	transition: all 0.3s ease-in-out;
}

.what-we-do-item:hover .icon-box img{
	transform: rotateY(180deg);
	filter: brightness(0) invert(1);
}

.what-we-do-content h3{
	font-size: 20px;
}

.what-we-do-content p{
	margin: 20px 0 0;
}

.what-we-do-list{
	border-top: 1px solid var(--divider-color);
	margin-top: 30px;
	padding-top: 30px;
}

.what-we-do-list ul{
	list-style: disc;
	margin: 0;
	padding-left: 20px;
}

.what-we-do-list ul li{
	line-height: 1.5em;
	margin-bottom: 10px;
}

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

.what-we-do-list ul li::marker{
	color: var(--accent-color);
}

/************************************/
/*** 	 10. Our Features css	  ***/
/************************************/

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

.our-features-box{
	border: 1px solid var(--divider-color);
	background: url('../images/features-box-bg-img.png') var(--secondary-color) no-repeat;
	background-position: center center;
	background-size: cover;
	backdrop-filter: blur(180px);
	-webkit-backdrop-filter: blur(180px);
	border-radius: 20px;
	padding: 80px;
}

.features-nav{
	margin-bottom: 60px;
}

.features-nav .nav-tabs{
	padding: 0;
	margin: 0;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 20px 30px;
	border: none;
}

.features-nav ul li .nav-link{
	padding: 15px 20px;
	border-radius: 10px;
	color: inherit;
}

.features-nav ul li .nav-link.active,
.features-nav ul li .nav-link:hover{
	color: var(--primary-color);
	border-color: transparent;
	background: transparent;
}

.features-nav ul li .btn-default::before{
	display: none;
}

.features-nav ul li .btn-default.btn-highlighted.active::after,
.features-nav ul li .btn-default.btn-highlighted:hover::after{
	right: auto;
	left: 0;
	width: 100%;
}

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

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

.feature-item-content ul{
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}

.feature-item-content ul li{
	position: relative;
	line-height: 1.5em;
	padding-left: 30px;
	margin-bottom: 15px;
}

.feature-item-content ul li:last-child{
	margin-bottom: 0;
}

.feature-item-content ul li:before{
	content: '\f058';
	position: absolute;
	font-family: 'Font Awesome 6 Free';
	font-size: 18px;
	font-weight: 900;
	color: var(--accent-color);
	top: 0;
	left: 0;
}

.feature-item-content .btn-default{
	margin-top: 40px;
}

.feature-image{
	margin-left: 40px;
}

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

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

/************************************/
/*** 	 11. Our Pricing css	  ***/
/************************************/

.our-pricing{
	padding: 80px 0;
}

.pricing-item{
	border: 1px solid var(--divider-color);
	background: var(--secondary-color) url('../images/pricing-item-bg-img.png') no-repeat;
	background-position: center center;
	background-size: cover;
	backdrop-filter: blur(180px);
	-webkit-backdrop-filter: blur(180px);
	border-radius: 20px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 40px;
	overflow: hidden;
}

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

.pricing-header h3{
	font-size: 20px;
}

.pricing-header p{
	margin: 20px 0 0;
}

.pricing-header h2{
	font-size: 46px;
	display: inline-block;
	background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 40%, var(--accent-color) 100%);
	background-size: 200% auto;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: all 0.4s ease-in-out;
	margin-top: 40px;
}

.pricing-item:hover .pricing-header h2{
	background-position: right center;
}

.pricing-header h2 sub{
	bottom: 0;
	font-size: 20px;
	-webkit-text-fill-color: var(--primary-color);
}

.pricing-body{
	border: 1px solid var(--divider-color);
	background: var(--secondary-color);
	backdrop-filter: blur(180px);
	-webkit-backdrop-filter: blur(180px);
	border-radius: 20px;
	padding: 30px 25px;
}

.pricing-body h3{
	font-size: 18px;
	margin-bottom: 30px;
}

.pricing-body ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

.pricing-body ul li{
	position: relative;
	line-height: 1.5em;
	padding-left: 30px;
	margin-bottom: 15px;
}

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

.pricing-body ul li:before{
	content: '\f058';
	position: absolute;
	font-family: 'Font Awesome 6 Free';
	font-size: 18px;
	font-weight: 900;
	color: var(--accent-color);
	top: 0;
	left: 0;
}

.pricing-btn{
	margin-top: 40px;
}

.pricing-btn .btn-default{
	width: 100%;
	text-align: center;
	padding: 16px 24px;
}

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

.pricing-item.highlighted-box::after{
	content: 'most popular';
	position: absolute;
	font-size: 16px;
	font-weight: 600;
	text-transform: capitalize;
	color: var(--primary-color);
	top: 30px;
	right: -40px;
	width: 180px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(110deg, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	transform: rotate(45deg);
	transition: all 0.4s ease-in-out;
}

.pricing-item.highlighted-box .pricing-body{
	border: none;
	background: linear-gradient(110deg, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	backdrop-filter: blur(0);
	-webkit-backdrop-filter: blur(0);
	transition: all 0.4s ease-in-out;
}

.pricing-item.highlighted-box:hover::after,
.pricing-item.highlighted-box:hover .pricing-body{
	background-position: right center;
}

.pricing-item.highlighted-box .pricing-body ul li,
.pricing-item.highlighted-box .pricing-body ul li::before{
	color: var(--primary-color);
}

.pricing-benefit-list{
	margin-top: 30px;
}

.pricing-benefit-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px 40px;
}

.pricing-benefit-list ul li{
	color: var(--primary-color);
	display: inline-flex;
	align-items: center;
}

.pricing-benefit-list ul li img{
	max-width: 20px;
	margin-right: 15px;
}

/************************************/
/*** 	   12. CTA Box css		  ***/
/************************************/

.cta-box{
	padding: 80px 0;
}

.cta-box-content{
	border: 1px solid var(--divider-color);
	background: var(--secondary-color) url('../images/cta-box-bg-img.png') no-repeat;
	background-position: center center;
	background-size: cover;
	backdrop-filter: blur(240px);
	-webkit-backdrop-filter: blur(240px);
	border-radius: 20px;
	padding: 60px;
	margin-right: 15px;
}

.cta-section-shape{
	margin: 70px 0;
}

.cta-section-shape img{
	width: 100%;
	max-width: 100px;
	animation: movestyle3 10s infinite linear alternate;
}

@keyframes movestyle3{
	0%{
		transform: translate(30px, 30px) rotate(-40deg);
	}

	50%{
		transform: translate(70px, 0px) rotate(40deg);
	}

	100%{
		transform: translate(30px, -30px) rotate(-40deg);
	}
}

.cta-contact-info p{
	font-size: 18px;
	font-weight: 500;
	color: var(--primary-color);
	margin-bottom: 15px;
}

.cta-contact-info p a{
	color: inherit;
	transition: all 0.3s ease-in-out;
}

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

.cta-contact-info h3{
	font-size: 36px;
}

.cta-contact-info h3 a{
	display: inline-block;
	background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: all 0.3s ease-in-out;
}

.cta-contact-info h3 a{
	color: initial;
}

.cta-contact-info h3 a:hover{
	background-position: right center;
}

.contact-us-form{
	position: relative;
	height: 100%;
	background: var(--secondary-color) url('../images/contact-box-bg-img.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	backdrop-filter: blur(240px);
	-webkit-backdrop-filter: blur(240px);
	align-content: center;
	padding: 50px;
}

.contact-us-form .form-label{
	font-size: 18px;
	font-weight: 500;
	line-height: normal;
	text-transform: capitalize;
	color: var(--primary-color);
	margin-bottom: 20px;
}

.contact-us-form .form-control{
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4em;
	color: var(--primary-color);
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	padding: 18px 20px;
	box-shadow: none;
	outline: none;
}

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

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

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

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

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

.work-step-no{
	position: relative;
	text-align: center;
	padding-bottom: 30px;
	margin-bottom: 75px;
}

.work-step-no::before{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--dark-divider-color);
	width: calc(100% + 30px);
	height: 1px;
}

.work-step-item:nth-child(4n + 4) .work-step-no::before,
.work-step-item:last-child .work-step-no::before{
	width: 100%;
}

.work-step-no::after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	right: 0;
	transform: translate(-50%, 50%);
	background: var(--accent-color);
	border-radius: 50%;
	width: 10px;
	height: 10px;
	transition: all 0.3s ease-in-out;
}

.work-step-item.active .work-step-no::after,
.work-step-item:hover .work-step-no::after{
	background: var(--primary-color);
}

.work-step-no p{
	display: inline-block;
	font-weight: 600;
	text-transform: uppercase;
	background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 0;
	transition: all 0.4s ease-in-out;
}

.work-step-item.active .work-step-no p,
.work-step-item:hover .work-step-no p{
	background-position: right center;
}

.work-step-body{
	border: 1px solid var(--divider-color);
	background: url('../images/work-step-bg-img.png') var(--secondary-color) no-repeat;
	background-position: center center;
	background-size: cover;
	backdrop-filter: blur(180px);
	-webkit-backdrop-filter: blur(180px);
	border-radius: 20px;
	padding: 40px 35px;
}

.work-step-body::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(110deg, var(--accent-color), var(--accent-secondary-color));
	border-radius: 20px;
	height: 100%;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	transition: all 0.4s ease-in-out;
}

.work-step-item.active .work-step-body::before,
.work-step-item:hover .work-step-body::before{
	opacity: 1;
	visibility: visible;
}

.work-step-body .icon-box,
.work-step-content{
	position: relative;
	z-index: 1;
}

.work-step-body .icon-box{
	height: 60px;
	width: 60px;
	background: linear-gradient(110deg, var(--accent-color), var(--accent-secondary-color));
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: -70px auto 30px;
}

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

.work-step-item.active .work-step-body .icon-box::before,
.work-step-item:hover .work-step-body .icon-box::before{
	transform: scale(1);
}

.work-step-body .icon-box img{
	position: relative;
	max-width: 30px;
	transition: all 0.3s ease-in-out;
	z-index: 1;
}

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

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

.work-step-content p{
	margin: 20px 0 0;
	transition: all 0.4s ease-in-out;
}

.work-step-item.active .work-step-content p,
.work-step-item:hover .work-step-content p{
	color: var(--primary-color);
}

.work-step-content ul{
	list-style: disc;
	margin: 40px 0 0;
	padding-left: 20px;
}

.work-step-content ul li{
	line-height: 1.5em;
	margin-bottom: 15px;
	transition: all 0.3s ease-in-out;
}

.work-step-content ul li:last-child{
	margin-bottom: 0;
}

.work-step-content ul li::marker{
	color: var(--accent-color);
	transition: all 0.4s ease-in-out;
}

.work-step-item.active .work-step-content ul li,
.work-step-item:hover .work-step-content ul li,
.work-step-item.active .work-step-content ul li::marker,
.work-step-item:hover .work-step-content ul li::marker{
	color: var(--primary-color);
}

.how-it-work .section-footer-text{
	margin-top: 60px;
}

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

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

.our-faqs-content{
	position: sticky;
	top: 40px;
}

.faq-cta-box{
	position: relative;
	display: flex;
	border: 1px solid var(--divider-color);
	background: var(--secondary-color);
	border-radius: 20px;
	padding: 30px;
}

.faq-cta-box .icon-box{
	background: var(--accent-color);
	border-radius: 50%;
	width: 50px;
	height: 50px;
	background: linear-gradient(100deg, var(--accent-secondary-color) 0%, var(--accent-color) 50%, var(--accent-secondary-color) 100%);
	background-size: 200% auto;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease-in-out;
	margin-right: 20px;
}

.faq-cta-box:hover .icon-box{
	background-position: right center;
}

.faq-cta-box .icon-box img{
	max-width: 24px;
}

.faq-cta-content{
	width: calc(100% - 70px);
}

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

.faq-cta-content p{
	margin: 15px 0 0;
}

.faq-button{
	margin-top: 40px;
}

.faq-accordion{
	border: 1px solid var(--divider-color);
	background: url('../images/faq-bg-img.png') var(--secondary-color) no-repeat;
	background-position: center center;
	background-size: cover;
	backdrop-filter: blur(180px);
	-webkit-backdrop-filter: blur(180px);
	border-radius: 20px;
	padding: 50px;
	margin-left: 30px;
}

.faq-accordion .accordion-item{
	position: relative;
	border-radius: 0;
	margin-bottom: 40px;
	overflow: hidden;
}

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

.faq-accordion .accordion-header .accordion-button{
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4em;
	background: transparent;
	color: var(--primary-color);
	border-bottom: 1px solid var(--divider-color);
	padding: 0 25px 20px 0px;
	transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-header .accordion-button.collapsed{
	background: transparent;
}

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

.faq-accordion .accordion-item .accordion-button::after,
.faq-accordion .accordion-item .accordion-button.collapsed::after{
	content: '\2b';
	font-family: 'FontAwesome';
	position: absolute;
	right: 0;
	top: 0;
	font-size: 22px;
	background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-button:not(.collapsed)::after{
	transform: rotate(45deg);
	background-position: right center;
}

.faq-accordion .accordion-item .accordion-body{
	background: transparent;
	padding: 20px 0 0 0;
}

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

.company-supports-slider{
	margin-top: 80px;
}

.company-supports-content{
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	margin-bottom: 60px;
}

.company-supports-content hr{
	height: 1px;
	width: 40%;
	color: var(--divider-color);
	opacity: 1;
}

.company-supports-content p{
	margin-bottom: 0;
}

.company-supports-logo{
	text-align: center;
}

.company-supports-logo img{
	width: 100%;
	height: 40px;
}

/************************************/
/***   15. Our Testimonials css	  ***/
/************************************/

.our-testimonials{
	padding: 80px 0;
}

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

.testimonial-item{
	border: 1px solid var(--divider-color);
	background: url('../images/testimonial-item-bg-img.png') var(--secondary-color) no-repeat;
	background-position: center center;
	background-size: cover;
	backdrop-filter: blur(180px);
	-webkit-backdrop-filter: blur(180px);
	border-radius: 20px;
	padding: 40px;
}

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

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

.testimonial-content p{
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 0;
}

.testimonial-author{
	display: flex;
	align-items: center;
	border-top: 1px solid var(--divider-color);
	margin-top: 30px;
	padding-top: 30px;
}

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

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

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

.author-content h3{
	font-size: 18px;
	text-transform: capitalize;
}

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

.testimonial-pagination{
	text-align: center;
	margin-top: 40px;
}

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

.testimonial-pagination .swiper-pagination-bullet-active{
	width: 26px;
	background: var(--accent-color);
}

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

.our-blog{
	padding: 80px 0 130px;
}

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

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

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

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

.post-item:hover .post-featured-image figure img{
	transform: scale(1.1);
	filter: blur(5px);
}

.post-readmore-btn{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, 0);
	opacity: 0;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.post-item:hover .post-readmore-btn{
	transform: translate(-50%, -50%);
	opacity: 1;
	visibility: visible;
}

.post-readmore-btn a{
	background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease-in-out;
}

.post-readmore-btn a:hover{
	background-position: right center;
}

.post-readmore-btn a img{
	max-width: 24px;
	transition: all 0.3s ease-in-out;
}

.post-readmore-btn a:hover img{
	transform: rotate(45deg);
}

.post-meta ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.post-meta ul li{
	font-size: 14px;
	font-weight: 500;
	line-height: normal;
	text-transform: capitalize;
}

.post-meta ul li a{
	color: inherit;
}

.post-meta ul li i{
	font-size: 18px;
	color: var(--primary-color);
	margin-right: 10px;
}

.post-item-content{
	border-top: 1px solid var(--divider-color);
	margin-top: 20px;
	padding-top: 20px;
}

.post-item-content h2{
	font-size: 20px;
	line-height: 1.4em;
}

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

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

.main-footer{
	position: relative;
	border: 1px solid var(--divider-color);
	background: var(--secondary-color) url('../images/footer-bg-img.png') no-repeat;
	background-position: center center;
	background-size: cover;
	backdrop-filter: blur(180px);
	-webkit-backdrop-filter: blur(180px);
	border-radius: 20px;
	margin-bottom: 40px;
	padding: 100px 0 0;
}

.main-footer::before{
	content: '';
	position: absolute;
	top: 60px;
	left: 60px;
	background: url('../images/section-bg-shape-2.png') no-repeat;
	background-position: center center;
	background-size: cover;
	width: 92px;
	height: 90px;
	z-index: 0;
	animation: movestyle1 5s infinite linear alternate;
}

.main-footer::after{
	content: '';
	position: absolute;
	bottom: 60px;
	right: 60px;
	background: url('../images/section-bg-shape-1.png') no-repeat;
	background-position: center center;
	background-size: cover;
	width: 82px;
	height: 110px;
	animation: movestyle2 5s infinite linear alternate;
	z-index: 0;
}

.main-footer .container{
	position: relative;
	z-index: 1;
}

.footer-header{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 30px;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 60px;
	padding-bottom: 60px;
}

.footer-header .section-title{
	width: 70%;
	margin: 0;
}

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

.about-footer-content{
	margin-top: 25px;
}

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

.footer-links-box{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 30px;
	margin-left: 30px;
}

.footer-links{
	max-width: 40%;
}

.footer-links h3{
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 30px;
}

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

.footer-links ul li{
	background: url('../images/icon-sparkle-white.svg') no-repeat;
	background-position: left top 3px;
	background-size: 18px auto;
	text-transform: capitalize;
	line-height: 1.5em;
	margin-bottom: 20px;
	padding-left: 30px;
}

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

.footer-links ul li a{
	color: inherit;
	transition: all 0.3s ease-in-out;
}

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

.footer-contact-item{
	display: flex;
	margin-bottom: 30px;
}

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

.footer-contact-item .icon-box{
	height: 50px;
	width: 50px;
	background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 15px;
	transition: all 0.3s ease-in-out;
}

.footer-contact-item:hover .icon-box{
	background-position: right center;
}

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

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

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

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

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

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

.footer-copyright{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	border-top: 1px solid var(--divider-color);
	margin-top: 60px;
	padding: 40px 0 100px;
}

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

.footer-social-links{
	display: flex;
	align-items: center;
	gap: 25px;
}

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

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

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

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

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

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

.footer-social-links ul li a i{
	font-size: 18px;
	line-height: normal;
	background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

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

.page-header{
	border: 1px solid var(--divider-color);
	background: var(--secondary-color) url() no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 130px 0;
}


.page-header-box{
	text-align: center;
}

.page-header-box h1{
	display: inline-block;
	font-size: 56px;
	letter-spacing: -0.02em;
	margin-bottom: 10px;
	cursor: none;
}

.page-header-box h1 span{
	background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: all 0.4s ease-in-out;
}

.page-header-box h1:hover span{
	background-position: right center;
}

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

.page-header-box ol li.breadcrumb-item{
	color: var(--text-color);
	line-height: normal;
	text-transform: capitalize;
}

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

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

.our-approach{
	padding: 80px 0;
}

.approach-body-item{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 40px;
}

.approach-body-item:last-child{
	margin-bottom: 0px;
}

.approach-body-item-header{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: calc(50% - 15px);
	border-right: 1px solid var(--divider-color);
	margin-right: 30px;
	padding-right: 30px;
}

.approach-body-item-header .icon-box{
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	border-radius: 50%;
	margin-right: 15px;
	transition: all 0.3s ease-in-out;
}

.approach-body-item:hover .approach-body-item-header .icon-box{
	background-position: right center;
}

.approach-body-item-header .icon-box img{
	width: 100%;
	max-width: 24px;
}

.approach-body-item-title{
	width: calc(100% - 65px);
}

.approach-body-item-title h3{
	font-size: 20px;
	line-height: 1.3em;
}

.approach-body-item-content{
	width: calc(50% - 15px);
}

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

.our-approach-image{
	height: 100%;
	margin-left: 15px;
}

.our-approach-image figure{
	display: block;
	height: 100%;
	border-radius: 20px;
}

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

.approach-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 80px;
}

.approach-item{
	width: calc(33.33% - 20px);
	border: 1px solid var(--divider-color);
	background: var(--secondary-color) url('../images/approach-item-bg.png') no-repeat;
	background-position: center center;
	background-size: cover;
	backdrop-filter: blur(180px);
	-webkit-backdrop-filter: blur(180px);
	border-radius: 20px;
	padding: 40px;
}

.approach-item .icon-box{
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	border-radius: 50%;
	margin-bottom: 30px;
	transition: all 0.3s ease-in-out;
}

.approach-item:hover .icon-box{
	background-position: right center;
}

.approach-item .icon-box img{
	width: 100%;
	max-width: 24px;
}

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

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

.our-advantage{
	padding: 80px 0;
}

.advantage-image-box{
	display: flex;
	flex-direction: column;
	gap: 30px;
	margin-right: 15px;
}

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

.advantage-image-item{
	width: calc(100% - 245px);
	border: 1px solid var(--divider-color);
	background: var(--secondary-color) url('../images/advantage-image-item-bg.png') no-repeat;
	background-position: center center;
	background-size: cover;
	backdrop-filter: blur(180px);
	-webkit-backdrop-filter: blur(180px);
	border-radius: 20px;
	padding: 30px;
}

.advantage-image-item .icon-box{
	margin-bottom: 30px;
}

.advantage-image-item .icon-box img{
	max-width: 50px;
}

.advantage-image-item-content h3{
	font-size: 20px;
	margin-bottom: 10px;
}

.advantage-image-item-content p{
	margin: 0;
}

.advantage-image-item-box .advantage-image{
	width: 100%;
	max-width: 215px;
}

.advantage-image-item-box .advantage-image figure img,
.advantage-image-item-box .advantage-image figure{
	height: 100%;
}

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

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

.advantage-body{
	border: 1px solid var(--divider-color);
	background: var(--secondary-color) url('../images/advantage-body-bg.png') no-repeat;
	background-position: center center;
	background-size: cover;
	backdrop-filter: blur(180px);
	-webkit-backdrop-filter: blur(180px);
	border-radius: 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px 40px;
	padding: 40px;
}

.advantage-counter-item{
	position: relative;
	width: calc(50% - 20px);
}

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

.advantage-counter-item h2{
	font-size: 46px;
	color: var(--accent-color);
	margin-bottom: 20px;
}

.advantage-counter-item h3{
	font-size: 20px;
	margin-bottom: 10px;
}

.advantage-counter-item p{
	margin: 0;
}

.advantage-body-list{
	width: calc(50% - 20px);
}

.advantage-body-list ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

.advantage-body-list ul li{
	position: relative;
	line-height: 1.5em;
	text-transform: capitalize;
	margin-bottom: 20px;
	padding-left: 30px;
}

.advantage-body-list ul li:last-child{
	margin-bottom: 0;
}

.advantage-body-list ul li::before{
	content: '\f058';
	position: absolute;
	font-family: 'FontAwesome';
	font-weight: 900;
	left: 0;
	top: 0;
	font-size: 18px;
	color: var(--accent-color);
	transition: all 0.3s ease-in-out;
}

.our-impact{
	padding: 80px 0;
}

.impact-image-box{
	position: relative;
}

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

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

.impact-image-box .review-box{
	position: absolute;
	bottom: 20px;
	left: 20px;
	background: var(--secondary-color);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	border-radius: 10px;
	padding: 20px;
	z-index: 2;
}

.impact-content{
	margin-left: 55px;
}

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

.impact-list ul{
	list-style: disc;
	margin: 0;
	padding-left: 20px;
}

.impact-list ul li{
	line-height: 1.5em;
	margin-bottom: 20px;
}

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

.impact-list ul li::marker{
	color: var(--accent-color);
}

.our-creation{
	padding: 80px 0;
}

.creation-image-box{
	position: relative;
	margin-right: 15px;
}

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

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

.creation-counter-box{
	position: absolute;
	bottom: 20px;
	left: 20px;
	max-width: 320px;
	background: var(--secondary-color);
	backdrop-filter: blur(60px);
	-webkit-backdrop-filter: blur(60px);
	border-radius: 20px;
	padding: 30px;
	z-index: 2;
}

.creation-counter-box h2{
	font-size: 46px;
	margin-bottom: 10px;
}

.creation-counter-box h3{
	font-size: 20px;
	margin-bottom: 15px;
}

.creation-counter-box p{
	color: var(--primary-color);
	margin: 0;
}

.creation-item{
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	backdrop-filter: blur(240px);
	-webkit-backdrop-filter: blur(240px);
	border-radius: 20px;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 30px;
	padding: 30px;
}

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

.creation-item .icon-box{
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(to right, var(--accent-secondary-color) 0%, var(--accent-color) 50%, var(--accent-secondary-color) 100%);
	background-size: 200% auto;
	border-radius: 50%;
	margin-right: 15px;
	transition: all 0.3s ease-in-out;
}

.creation-item:hover .icon-box{
	background-position: right center;
}

.creation-item .icon-box img{
	width: 100%;
	max-width: 24px;
}

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

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

.creation-item-content p{
	margin: 15px 0 0 0;
}

.our-testimonials.about-our-testimonials{
	padding: 80px 0 160px;
}

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

.page-services{
	padding: 160px 0 50px;
}

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

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

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

.page-category-list{
    background: var(--secondary-color) url('../images/sidebar-catagery-list-bg.png') no-repeat;
    background-position: center center;
    background-size: cover;
	border: 1px solid var(--divider-color);
    border-radius: 20px;
    margin-bottom: 60px;
	overflow: hidden;
}

.page-category-list h3{
	font-size: 20px;
    text-transform: capitalize;
    color: var(--primary-color);
    border-bottom: 1px solid var(--divider-color);
    padding: 30px;
}

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

.page-category-list ul li{
    border-bottom: 1px solid var(--divider-color);
    line-height: 1.5em;
    padding-bottom: 20px;
    margin-bottom: 20px;
    transition: all 0.3s ease-in-out;
}

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

.page-category-list ul li a{
    position: relative;
	display: block;
    text-transform: capitalize;
    color: var(--primary-color);
	padding-right: 30px;
    transition: all 0.3s ease-in-out;
}

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

.page-category-list ul li a::before{
	content: '';
    position: absolute;
	right: 0;
	top: 0;
    background: url('../images/arrow-white.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 16px auto;
    border: 1px solid var(--divider-color);
    border-radius: 50%;
	width: 24px;
	height: 24px;
	transition: all 0.3s ease-in-out;
}

.page-category-list ul li a:hover:before{
	border-color: var(--primary-color);
	transform: rotate(45deg);
}

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

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

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

.sidebar-cta-logo{
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
    border-radius: 50%;
    margin-bottom: 30px;
}

.sidebar-cta-logo img{
    width: 100%;
    max-width: 48px;
}

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

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

.sidebar-cta-content p{
	color: var(--primary-color);
    margin: 0;
}

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

.sidebar-cta-contact ul li{
    width: 100%;
    margin-bottom: 20px;
}

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

.sidebar-cta-contact ul li a{
    display: inline-flex;
    align-items: center;
    line-height: 1.4em;
    color: var(--text-color);
    background: var(--divider-color);
    backdrop-filter: blur(10px);
    --webkit-backdrop-filter: blur(10px);
    padding: 10px 20px;
    border-radius: 100px;
    transition: all 0.4s ease-in-out;
}

.sidebar-cta-contact ul li a:hover{
    color: var(--primary-color);
}

.sidebar-cta-contact ul li a img{
    width: 100%;
    max-width: 20px;
    margin-right: 10px;
}

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

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

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

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

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

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

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

.service-entry h2 span{
    font-weight: 700;
	background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
    background-clip: text;
    -webkit-text-fill-color: transparent;
	transition: all 0.4s ease-in-out;
}

.service-entry h2:hover span{
	background-position: right center;
}

.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(33.33% - 13.33px);
    line-height: 1.25em;
    background-color: var(--secondary-color);
    border: 1px solid var(--divider-color);
    border-radius: 100px;
    padding: 10px 15px 10px 35px;
}

.service-entry ul li::before{
    content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 6 Free';
    top: 12px;
    left: 12px;
    font-size: 16px;
    font-weight: 900;
    color: var(--accent-color);
}

.service-solution-box,
.service-impact-box,
.service-innovation-box,
.building-smarter-box{
    margin-top: 60px;
}

.service-solution-steps{
    margin-top: 40px;
}

.service-solution-item{
    background: var(--secondary-color);
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    padding: 40px 35px;
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

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

.service-solution-header{
    border-right: 1px solid var(--divider-color);
    margin-right: 40px;
    padding-right: 40px;
}

.service-solution-header .icon-box{
    position: relative;
    background: var(--accent-color);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-solution-item .service-solution-header .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(120deg, var(--accent-color), var(--accent-secondary-color)) no-repeat;
    border-radius: 50%;
    height: 100%;
    width: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
}

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

.service-solution-header .icon-box img{
    position: relative;
    max-width: 30px;
    z-index: 1;
}

.service-solution-step-no{
    text-align: center;
    margin-top: 15px;
}

.service-solution-step-no p{
    color: var(--primary-color);
    text-transform: uppercase;
    margin: 0;
}

.service-solution-item-content{
    width: calc(100% - 150px);
}

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

.service-solution-item-content p{
    margin: 0;
}

.service-impact-list{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    border: 1px solid var(--divider-color);
    background: var(--secondary-color) url('../images/service-impact-list-bg.png') no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 20px;
    margin-top: 40px;
    padding: 40px;
}

.service-impact-item{
    width: calc(33.33% - 20px);
}

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

.service-impact-item .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(120deg, var(--accent-color) 0, var(--accent-secondary-color) 100%) no-repeat;
    border-radius: 50%;
    height: 100%;
    width: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
}

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

.service-impact-item .icon-box img{
    position: relative;
    max-width: 40px;
    z-index: 1;
}

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

.service-innovation-list{
    margin-top: 40px;
}

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

.building-smarter-steps,
.building-smarter-image{
    width: calc(50% - 15px);
}

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

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

.building-step-no{
    margin-right: 30px;
}

.building-step-no h2{
    margin-bottom: 0;
    transition: all 0.3s ease-in-out;
}

.building-step-item:hover .building-step-no h2{
    color: var(--accent-color);
}

.building-step-content h3{
    font-size: 20px;
    margin-bottom: 15px;
}

.building-smarter-image figure{
    display: block;
    border-radius: 20px;
    height: 100%;
}

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

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

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

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

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

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

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

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

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

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

.post-single-meta{
	margin-top: 10px;
}

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

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

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

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

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

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

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

.post-entry{
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 30px;
    margin-bottom: 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{
	font-weight: 600;
	line-height: 1.2em;
	margin: 0 0 0.437em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.post-tags .tag-links a{
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 1em;
	background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
    background-size: 200% auto;
    color: var(--white-color);
	border-radius: 100px;
    padding: 12px 20px;
	transition: all 0.3s ease-in-out;
}

.post-tags .tag-links a:hover{
	background-position: right center;
}

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

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

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

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

.post-social-sharing ul li a{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
	background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
    background-size: 200% auto;
    color: var(--primary-color);
	border-radius: 100px;
    width: 40px;
    height: 40px;
    transition: all 0.3s ease-in-out;
}

.post-social-sharing ul li:hover a{
    background-position: right center;
}

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

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

.page-projects{
    padding: 160px 0 130px;
}

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

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

.project-category{
    border: 1px solid var(--divider-color);
    background: var(--secondary-color) url('../images/sidebar-catagery-list-bg.png') no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 20px;
    margin-bottom: 60px;
    padding: 30px;
    overflow: hidden;
}

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

.project-category-list ul li{
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5em;
    text-transform: capitalize;
    color: var(--primary-color);
    border-bottom: 1px solid var(--divider-color);
    display: flex;
    gap: 25px;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.project-category-list ul li span{
    font-size: 16px;
    font-weight: 400;
}

.category-social-link{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px 20px;
}

.category-social-link h3{
	font-size: 20px;
}

.category-social-link ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.category-social-link ul li a{
	background: var(--bg-color);
    border: 1px solid var(--divider-color);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease-in-out;
}

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

.category-social-link ul li a i{
	font-size: 18px;
    line-height: normal;
    background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

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

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

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

.project-entry h2 span{
    font-weight: 700;
	background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
    background-clip: text;
    -webkit-text-fill-color: transparent;
	transition: all 0.4s ease-in-out;
}

.project-entry h2:hover span{
	background-position: right center;
}

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

.project-entry ul li{
    position: relative;
    line-height: 1.5em;
    padding-left: 30px;
    margin-bottom: 15px;
}

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

.project-entry ul li::before{
    content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 6 Free';
    top: 0;
    left: 0;
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-color);
}

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

.project-challenge-list{
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    margin-top: 40px;
    padding: 30px;
}

.project-solution-counters{
    display: flex;
    flex-wrap: wrap;
    gap: 30px 60px;
    margin-top: 40px;
}

.solution-counter-item{
    width: calc(25% - 45px);
}

.solution-counter-item h2{
    margin-bottom: 5px;
}

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

.page-team{
    padding: 160px 0 130px;
}

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

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

.team-image a,
.team-image a figure{
	display: block;
	border-radius: 12px;
	cursor: none;
}

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

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

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

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

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

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

.team-social-icon ul{
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

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

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

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

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

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

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

.page-team-single{
    padding: 160px 0;
}

.team-single-image{
    margin-bottom: 60px;
}

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

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

.team-member-info,
.team-expertise-box,
.team-guideline-box{
	margin-bottom: 60px;
}

.team-member-info{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 40px 80px;
}

.member-info-box{
	position: relative;
	width: calc(62% - 40px);
}

.member-info-box::before{
	content: '';
    position: absolute;
    top: 0;
    right: -40px;
    background-color: var(--divider-color);
    width: 1px;
    height: 100%;
}

.member-info-box .section-title h3{
    font-size: 16px;
    letter-spacing: 0;
    text-transform: capitalize;
	padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
	margin-bottom: 10px;
}

.member-info-box .section-title h3::before,
.member-info-box .section-title h3::after{
    display: none;
}

.member-contact-list{
	width: calc(38% - 40px);
}

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

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

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

.member-social-links ul li a{
	width: 36px;
	height: 36px;
    background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
    background-size: 200% auto;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--primary-color);
	transition: all 0.4s ease-in-out;
}

.member-social-links ul li:hover a{
    background-position: right center;
}

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

.member-contact-item{
	margin-bottom: 30px;
}

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

.member-contact-item h3{
	font-size: 20px;
    display: inline-block;
	text-transform: capitalize;
    background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
	margin-bottom: 10px;
}

.member-contact-item p{
	margin-bottom: 0;
}

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

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

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

.skills-progress-bar{
	width: calc(50% - 15px);
}

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

.skills-progress-bar .skill-data .skill-title,
.skills-progress-bar .skill-data .skill-no{
	font-size: 20px;
	font-weight: 700;
    color: var(--primary-color);
	text-transform: capitalize;
}

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

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

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

.team-guideline-list ul li{
    position: relative;
    width: calc(50% - 15px);
    line-height: 1.25em;
    background-color: var(--secondary-color);
    border: 1px solid var(--divider-color);
    border-radius: 100px;
    padding: 10px 15px 10px 40px;
}

.team-guideline-list ul li::before{
    content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 6 Free';
    top: 10px;
    left: 15px;
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-color);
}

/************************************/
/***     28. Pricing Page css     ***/
/************************************/

.page-pricing{
	padding: 160px 0 80px;
}

/************************************/
/***   28. Testimonials Page css  ***/
/************************************/

.page-testimonials{
    padding: 160px 0 50px;
}

.page-testimonials .testimonial-item{
	background: var(--secondary-color) url('../images/testimonial-item-bg.png') no-repeat;
	background-position: center center;
	background-size: cover;
	border: 1px solid var(--divider-color);
	backdrop-filter: blur(180px);
	-webkit-backdrop-filter: blur(180px);
	border-radius: 20px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 30px;
	overflow: hidden;
}

.our-faqs.page-faqs-section{
	padding: 80px 0 160px;
}

/************************************/
/***     29. Image Gallery css    ***/
/************************************/

.page-gallery{
	padding: 160px 0 130px;
}

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

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

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

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

/************************************/
/***    30. Video Gallery css     ***/
/************************************/

.page-video-gallery{
	padding: 160px 0 130px;
}

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

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

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

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

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

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

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

/************************************/
/***      31. FAQs Page css       ***/
/************************************/

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

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

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

.page-single-faqs .faq-accordion{
	margin: 0;
}

/************************************/
/***    32. Contact Us Page css   ***/
/************************************/

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

.contact-us-content{
	margin-right: 15px;
}

.contact-info-item{
	display: flex;
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 30px;
	margin-bottom: 30px;
}

.contact-info-item .icon-box{
	height: 50px;
	width: 50px;
	background: linear-gradient(to right, var(--accent-secondary-color) 0%, var(--accent-color) 50%, var(--accent-secondary-color) 100%);
	background-size: 200% auto;
	border-radius: 100px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin-right: 20px;
	transition: all 0.4s ease-in-out;
}

.contact-info-item:hover .icon-box{
	background-position: right center;
}

.contact-info-item .icon-box img{
	width: 100%;
	max-width: 24px;
}

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

.contact-item-content h3{
	font-size: 20px;
	margin-bottom: 10px;
}

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

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

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

.contact-social-list{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
}

.contact-social-list h3{
	font-size: 16px;
	text-transform: capitalize;
}

.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{
	border: 1px solid var(--accent-color);
	color: var(--accent-color);
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease-in-out;
}

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

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

.google-map-iframe{
	margin-top: 160px;
}

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

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

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

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

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

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

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

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

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

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

@media only screen and (max-width: 1800px){
	
	.bg-section{
		width: calc(100% - 30px);
		margin: 0 15px;
	}	

	.main-footer{
		margin-bottom: 15px;
	}
}

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

	.our-projects .container-fluid{
		max-width: 100%;
	}
}

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

	.navbar{
		padding: 20px 15px;
	}

	.main-menu .nav-menu-wrapper{
		margin: 0 10px;
	}

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

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

	.btn-default{
		padding: 12px 52px 12px 20px;
	}
	
	.btn-default::before{
		width: 32px;
		height: 32px;
		background-size: 20px auto;
	}
	
	.btn-default.btn-highlighted{
		padding: 11px 52px 11px 20px;
	}

	header.main-header{
		margin: 0;
	}

    header.main-header .container-fluid{
        padding: 0 15px;
    }

	.navbar{
		padding: 20px 0;
	}

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

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

	.bg-section{
		width: 100%;
		border-radius: 0px;
		margin: 0;
	}
	
	.section-row{
		margin-bottom: 40px;
	}

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

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

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

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

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

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

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

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

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

	.hero.hero-bg-image{
		padding: 100px 0;
	}

	.hero .container-fluid{
		padding: 0 15px;
	}

	.hero-box{
		padding: 30px;
		margin: 30px 0;
	}

	.hero-content{
		width: 70%;
		padding: 50px 20px;
	}

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

	.hero-image-box .video-play-button{
		padding: 15px;
	}

	.video-play-button h3{
		font-size: 14px;
	}

	.hero-info-item{
		height: auto;
		padding: 30px;
		margin-bottom: 30px;
	}
	
	.hero-info-body{
		margin-top: 20px;
	}

	.hero-info-image{
		margin-right: -30px;
	}

	.hero-info-item.hero-info-box-2{
		padding: 60px 30px;
	}

	.hero-icon-box-1{
		top: 30px;
		left: 30px;
	}

	.hero-icon-box-2{
		bottom: 30px;
		right: 30px;
	}

	.hero-info-box-2 .hero-info-content h2{
		font-size: 22px;
	}

	.hero-info-item.hero-info-box-3{
		margin-bottom: 0;
	}
	
	.about-us{
		padding: 80px 0 40px;
	}

	.about-image-box{
		margin: 0 0 30px;
	}

	.about-us-image img{
		aspect-ratio: 1 / 0.9;
	}

	.about-review-box{
		padding: 20px;
	}

	.about-review-box{
		padding: 20px;
		width: 215px;
	}

	.review-info-content{
		margin: 20px 0;
	}

	.about-image-box .contact-us-circle::before{
		width: 155px;
		height: 155px;
	}

	.contact-us-circle a img{
		max-width: 115px;
	}

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

	.about-body-header{
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.about-body-list-box{
		margin-top: 30px;
		padding: 20px 15px;
	}

	.about-body-list-box ul{
		gap: 15px 40px;
	}

	.about-us-button{
		margin-top: 30px;
	}
	
	.our-services{
		padding: 40px 0;
	}
	
	.service-content-box{
		padding: 0;
		margin-bottom: 20px;
	}

	.service-item-content{
		margin-top: 15px;
		padding-top: 15px;
	}

	.section-footer-text{
		margin-top: 10px;
	}

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

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

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

	.why-choose-content p{
		margin-top: 15px;
	}

	.why-choose-list{
		margin: 30px -30px 0;
	}

	.why-choose-box-2{
		width: 100%;
	}

	.why-choose-title-box .icon-box{
		margin-bottom: 20px;
	}

	.why-choose-btn{
		margin-top: 20px;
	}
	
	.why-choose-counter-box-1,
	.why-choose-counter-box-2{
		width: calc(50% - 15px);
	}

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

	.why-choose-icon{
		top: -15px;
		right: -15px;
	}

	.why-choose-icon img{
		max-width: 80px;
	}

	.why-choose-us .section-footer-text{
		margin-top: 30px;
	}
	
	.our-projects{
		padding: 40px 0 10px;
	}

	.project-image img{
		aspect-ratio: 1 / 1.1;
	}

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

	.project-btn{
		right: 20px;
	}

	.project-item:hover .project-btn{
		top: 20px;
	}

	.project-btn a{
		width: 50px;
		height: 50px;
	}

	.what-we-do{
		padding: 40px 0;
	}
	
	.what-we-do-item{
		padding: 30px;
	}

	.what-we-do-item .icon-box{
		margin-bottom: 30px;
	}
	
	.what-we-do-content p{
		margin: 15px 0 0;
	}

	.what-we-do-list{
		margin-top: 20px;
		padding-top: 20px;
	}

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

	.our-features-box{
		padding: 30px 15px;
	}

	.features-nav{
		margin-bottom: 30px;
	}

	.features-nav .nav-tabs{
		justify-content: center;
	}

	.features-nav .nav-tabs{
		gap: 10px 20px;
	}

	.features-nav ul li .nav-link{
		font-size: 14px;
		padding: 10px 15px;
	}

	.feature-item-content{
		margin-bottom: 30px;
	}

	.feature-item-content p{
		margin-top: 10px;
	}

	.feature-item-content ul{
		margin-top: 20px;
	}

	.feature-item-content ul li{
		padding-left: 25px;
		margin-bottom: 10px;
	}

	.feature-item-content ul li:before{
		font-size: 16px;
	}

	.feature-item-content .btn-default{
		margin-top: 30px;
	}

	.feature-image{
		margin: 0;
	}

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

	.our-pricing{
		padding: 40px 0;
	}
	
	.pricing-item{
		padding: 30px 20px;
	}

	.pricing-header{
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.pricing-header p{
		margin: 15px 0 0;
	}

	.pricing-header h2{
		font-size: 36px;
		margin-top: 30px;
	}

	.pricing-header h2 sub{
		font-size: 18px;
	}

	.pricing-body{
		padding: 20px;
	}

	.pricing-body h3{
		margin-bottom: 20px;
	}

	.pricing-body ul li{
		padding-left: 25px;
		margin-bottom: 10px;
	}

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

	.pricing-btn{
		margin-top: 20px;
	}

	.pricing-btn .btn-default{
		padding: 12px 15px;
	}

	.pricing-item.highlighted-box::after{
		font-size: 12px;
		top: 20px;
		right: -35px;
		width: 140px;
		height: 30px;
	}

	.pricing-item.highlighted-box .pricing-header{
		padding-right: 40px;
	}

	.pricing-benefit-list{
		margin-top: 5px;
	}

	.pricing-benefit-list ul{
		gap: 15px 30px;
	}

	.pricing-benefit-list ul li img{
		max-width: 18px;
		margin-right: 10px;
	}

	.cta-box{
		padding: 40px 0;
	}

	.cta-box-content{
		padding: 30px;
		margin: 0 0 30px;
	}

	.cta-section-shape{
		margin: 40px 0;
	}

	.cta-section-shape img{
		max-width: 80px;
	}

	.cta-contact-info p{
		font-size: 16px;
		margin-bottom: 10px;
	}

	.cta-contact-info h3{
		font-size: 28px;
	}

	.contact-us-form{
		height: auto;
		padding: 30px;
	}

	.contact-us-form .form-label{
		font-size: 16px;
		margin-bottom: 15px;
	}

	.contact-us-form .form-control{
		padding: 13px 15px;;
	}

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

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

	.work-step-no{
		padding-bottom: 20px;
		margin-bottom: 50px;
	}

	.work-step-item:nth-child(2n + 2) .work-step-no::before{
		width: 100%;
	}

	.work-step-body{
		padding: 30px;
	}

	.work-step-body .icon-box{
		width: 50px;
		height: 50px;
		margin: -55px auto 20px;
	}

	.work-step-body .icon-box img{
		max-width: 25px;
	}

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

	.work-step-content ul{
		margin-top: 30px;
	}

	.work-step-content ul li{
		margin-bottom: 10px;
	}

	.how-it-work .section-footer-text{
		margin-top: 30px;
	}

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

	.our-faqs-content{
		position: initial;
		margin: 0 0 30px;
	}

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

	.faq-cta-content p{
		margin: 10px 0 0;
	}

	.faq-button{
		margin-top: 30px;
	}

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

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

	.faq-accordion .accordion-header .accordion-button{
		padding: 0 25px 15px 0px;
	}

	.faq-accordion .accordion-item .accordion-button::after,
	.faq-accordion .accordion-item .accordion-button.collapsed::after{
		font-size: 20px;
	}

	.faq-accordion .accordion-item .accordion-body{
		padding: 15px 0 0;
	}

	.company-supports-slider{
		margin-top: 40px;
	}

	.company-supports-content{
		margin-bottom: 30px;
	}

	.company-supports-content hr{
		width: 34%;
	}

	.our-testimonials{
		padding: 40px 0;
	}

	.testimonial-item{
		padding: 30px;
	}

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

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

	.testimonial-author{
		margin-top: 20px;
		padding-top: 20px;
	}

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

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

	.post-item-content{
		margin-top: 15px;
		padding-top: 15px;
	}

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

	.main-footer::before{
		top: 30px;
		left: 30px;
		width: 72px;
		height: 70px;
		opacity: 30%;
	}

	.main-footer::after{
		bottom: 30px;
		right: 30px;
		width: 62px;
		height: 90px;
		opacity: 30%;
	}

	.footer-header{
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

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

	.about-footer-content{
		margin-top: 15px;
	}

	.footer-links-box{
		margin: 0;
	}

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

	.footer-links ul li{
		background-size: 16px auto;
		background-position: left top 4px;
		padding-left: 22px;
		margin-bottom: 15px;
	}

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

	.footer-contact-content h3{
		margin-bottom: 5px;
	}

	.footer-copyright{
		margin-top: 30px;
		padding: 20px 0 50px;
	}

	.footer-social-links{
		gap: 15px;
	}

	.footer-social-links h3{
		font-size: 18px;
	}

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

	.page-header{
		border-left: none;
		border-right: none;
		background-size: auto;
		padding: 60px 0;
	}

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

	.our-approach{
		padding: 40px 0;
	}

	.our-approach-content{
		margin-bottom: 30px;
	}

	.approach-body-item{
		margin-bottom: 30px;
	}

	.our-approach-image{
		height: auto;
		margin: 0;
	}

	.our-approach-image figure,
	.our-approach-image img{
		height: auto;
	}

	.approach-item-list{
		gap: 20px;
		margin-top: 40px;
	}

	.approach-item{
		width: calc(33.33% - 13.33px);
		padding: 20px;
	}

	.our-advantage{
		padding: 40px 0;
	}

	.advantage-image-box{
		margin: 0 0 30px;
	}

	.advantage-image-item{
		padding: 20px;
	}

	.advantage-body{
		padding: 30px;
	}

	.advantage-counter-item h2{
		font-size: 36px;
	}

	.advantage-body-list ul li{
		margin-bottom: 15px;
		padding-left: 25px;
	}

	.advantage-body-list ul li::before{
		font-size: 16px;
	}

	.our-impact{
		padding: 40px 0;
	}

	.impact-image-box{
		margin-bottom: 30px;
	}

	.impact-image figure img{
		aspect-ratio: 1 / 0.6;
	}

	.impact-content{
		margin: 0;
	}

	.impact-list ul li{
		margin-bottom: 15px;
	}

	.our-creation{
		padding: 40px 0;
	}

	.creation-image-box{
		margin: 0 0 30px;
	}

	.creation-counter-box{
		padding: 20px;
	}

	.creation-counter-box h2{
		font-size: 36px;
	}

	.creation-item{
		padding: 20px;
	}

	.our-testimonials.about-our-testimonials{
		padding: 40px 0 80px;
	}

	.page-services{
		padding: 80px 0 10px;
	}
    
	.page-service-single{
        padding: 80px 0;
    }

    .page-single-sidebar{
        position: initial;
        margin: 0 0 30px 0;
    }

    .page-category-list{
        margin-bottom: 30px;
    }

    .page-category-list h3,
    .page-category-list ul{
        padding: 20px;
    }

    .page-category-list ul li{
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

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

    .sidebar-cta-logo{
        width: 60px;
        height: 60px;
        margin-bottom: 20px;
    }

    .sidebar-cta-logo img{
        max-width: 34px;
    }

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

    .sidebar-cta-content h3
    .sidebar-cta-contact ul li{
        margin-bottom: 15px;
    }

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

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

    .service-entry h2{
        font-size: 38px;
        margin-bottom: 15px;
    }

    .service-entry ul{
        gap: 20px;
    }

    .service-entry ul li{
        width: calc(33.33% - 13.33px);
        padding: 8px 15px 8px 40px;
        font-size: 14px;
    }

    .service-entry ul li::before{
        font-size: 16px;
        top: 9px;
    }

    .service-solution-box,
    .service-impact-box,
    .service-innovation-box,
    .building-smarter-box{
        margin-top: 40px;
    }

    .service-solution-steps{
        margin-top: 30px;
    }

	.service-solution-item{
        padding: 30px;
        margin-bottom: 30px;
    }

    .service-solution-header{
        margin-right: 30px;
        padding-right: 30px;
    }

    .service-solution-item-content{
        width: calc(100% - 130px);
    }

    .service-impact-list{
        padding: 30px;
        margin-top: 30px;
    }

    .service-impact-item .icon-box{
        width: 60px;
        height: 60px;
        margin-bottom: 30px;
    }

    .service-impact-item .icon-box img{
        max-width: 30px;
    }

    .service-impact-item-content h3{
        margin-bottom: 10px;
    }

    .service-innovation-list{
        margin-top: 30px;
    }

    .building-steps-image{
        margin-top: 30px;
    }

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

    .building-step-no{
        margin-right: 20px;
    }
    
    .building-step-no h2{
        margin-bottom: 0;
    }

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

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

    .page-single-post{
        padding: 80px 0;
    }
    
    .post-image{
        margin-bottom: 20px;
    }

    .post-image figure,
    .post-image img{
        border-radius: 20px;
    }
    
    .post-entry h1,
    .post-entry h2,
    .post-entry h3,
    .post-entry h4,
    .post-entry h5,
    .post-entry h6{
        margin: 0 0 0.41em;
    }
    
    .post-entry h2{
        font-size: 36px;
    }
    
    .post-entry p{
        margin-bottom: 15px;
    }
    
    .post-entry ol li,
    .post-entry ul li{
        margin-bottom: 10px;
    }
    
    .post-entry blockquote{
        background-position: 20px 20px;
        background-size: 40px;
        padding: 20px 20px 20px 70px;
        margin-bottom: 20px;
    }
    
    .post-entry blockquote p{
        font-size: 18px;
    }
    
    .post-tags{
        margin-bottom: 20px;
    }
    
    .post-tags .tag-links a{
        padding: 12px 15px;
    }
    
    .post-social-sharing ul{
        text-align: left;
    }

    .page-projects{
        padding: 80px 0 50px;
    }

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

    .project-category{
        margin-bottom: 30px;
        padding: 20px;
    }

    .project-category-list ul li{
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

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

    .project-entry h2{
        font-size: 38px;
        margin-bottom: 15px;
    }

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

    .project-entry ul li{
        padding-left: 25px;
        margin-bottom: 10px;
    }

    .project-entry ul li::before{
        font-size: 16px;
    }

    .project-challenge-box,
    .project-solution-box{
        margin-top: 40px;
    }

    .project-challenge-list{
        margin-top: 30px;
        padding: 20px;
    }

    .project-solution-counters{
        gap: 30px 40px;
        margin-top: 30px;
    }

    .solution-counter-item{
        width: calc(25% - 30px);
    }

    .solution-counter-item h2{
        margin-bottom: 5px;
    }

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

    .page-team-single{
        padding: 80px 0;
    }

    .team-single-image{
       margin-bottom: 30px;
    }

    .team-single-image img{
        aspect-ratio: 1 / 0.8;
        object-position: top center;
    }

    .team-member-info,
    .team-expertise-box,
    .team-guideline-box{
        margin-bottom: 40px;
    }

    .team-expertise-list{
        gap: 30px;
    }

    .team-guideline-list ul{
        gap: 20px;
    }

    .team-guideline-list ul li{
        width: calc(50% - 10px);
        font-size: 14px;
        padding: 8px 15px 8px 40px;
    }

    .team-guideline-list ul li::before{
        font-size: 16px;
    }

	.page-pricing{
		padding: 80px 0 40px;
	}

	.page-testimonials{
        padding: 80px 0 10px;
    }

	.page-testimonials .testimonial-item{
		padding: 20px;
	}

	.our-faqs.page-faqs-section{
		padding: 40px 0 80px;
	}

    .page-gallery{
		padding: 80px 0 50px;
	}

	.page-video-gallery{
		padding: 80px 0 50px;
	}

	.page-faqs{
        padding: 80px 0;
    }
    
    .page-faqs .page-faq-accordion{
        margin-bottom: 40px;
    }

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

	.contact-us-content{
		margin: 0 0 30px;
	}

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

	.google-map-iframe{
		margin-top: 80px;
	}

	.google-map-iframe,
	.google-map-iframe iframe{
		height: 450px;
	}

	.error-page{
		padding: 80px 0;
	}
	
	.error-page-image{
		margin-bottom: 20px;
	}

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

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

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

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

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

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

	.hero-box{
		padding: 0;
	}
		
	.hero-content{
		width: 100%;
		background: var(--divider-color);
		padding: 30px 15px;
		margin-bottom: 30px;
	}

	.hero-btn{
		gap: 15px;
	}

	.hero-image-box{
		position: relative;
		height: 350px;
	}

	.hero-image-box img{
		aspect-ratio: 1 / 0.6;
	}

	.video-play-button{
		gap: 5px;
	}

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

	.hero-info-item{
		padding: 20px;
	}
	
	.hero-info-content h3{
		font-size: 18px;
	}
	
	.hero-info-body{
		display: block;
	}

	.hero-info-body-content .btn-default{
		margin-top: 20px;
	}

	.hero-info-image{
		max-width: 100px;
		margin: 15px 0 -55px auto;
	}

	.hero-info-item .icon-box{
		width: 40px;
		height: 40px;
	}

	.hero-info-item.hero-info-box-2{
        padding: 40px 20px;
    }

	.hero-icon-box-1{
		top: 15px;
		left: 20px;
	}

	.hero-icon-box-2{
		bottom: 15px;
		right: 20px;
	}

	.hero-info-box-2 .hero-info-content{
		max-width: 63%;
	}

	.hero-info-box-2 .hero-info-content h2{
		font-size: 20px;
	}

	.satisfy-client-content{
		margin-top: 15px;
	}

	.about-us-image img{
		aspect-ratio: 1 / 1.28;
	}

	.about-review{
		border-width: 10px;
	}

	.about-review::before{
		left: -28px;
	}

	.about-review::after{
		bottom: -28px;
	}

	.about-review-box{
		width: 175px;
		padding: 15px;
	}

	.review-info-content{
		margin: 15px 0;
	}

	.review-content p{
		font-size: 14px;
	}

	.about-image-box .contact-us-circle::before{
		width: 125px;
		height: 125px;
	}

	.contact-us-circle a img{
		max-width: 95px;
	}

	.about-body-item{
		width: 100%;
	}

	.about-body-header{
		margin-bottom: 10px;
		padding-bottom: 10px;
	}

	.about-body-title h3{
		font-size: 18px;
	}

	.about-body-list-box ul{
		gap: 10px;
	}

	.about-body-list-box ul li{
		width: 100%;
	}

	.service-item-title h3{
		font-size: 18px;
	}

	.service-item-content{
		margin-top: 10px;
		padding-top: 10px;
	}

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

	.why-choose-list{
		margin: 20px -20px 0;
	}

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

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

	.why-choose-content p{
		margin-top: 10px;
	}

	.why-choose-counter-box-1,
	.why-choose-counter-box-2{
		width: 100%;
	}

	.why-choose-counter h2{
		font-size: 26px;
	}

	.scrolling-content span{
		padding: 12px 15px;
	}

	.why-choose-icon{
		top: -10px;
		right: -10px;
	}

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

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

	.what-we-do-item{
		padding: 20px;
	}

	.what-we-do-item .icon-box img{
		max-width: 40px;
	}

	.what-we-do-item .icon-box{
		margin-bottom: 20px;
	}

	.what-we-do-content h3{
		font-size: 18px;
	}

	.what-we-do-content p{
		margin: 10px 0 0;
	}

	.what-we-do-list{
		margin-top: 15px;
		padding-top: 15px;
	}

	.features-nav ul li .nav-link{
		font-size: 12px;
	}

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

	.feature-item-content .btn-default{
		margin-top: 20px;
	}

	.pricing-item{
		padding: 20px;
	}

	.pricing-header h3{
		font-size: 18px;
	}

	.pricing-header p{
		margin: 10px 0 0;
	}

	.pricing-header h2{
		font-size: 26px;
		margin-top: 20px;
	}

	.pricing-header h2 sub{
		font-size: 16px;
	}

	.pricing-body h3{
		font-size: 16px;
	}

	.pricing-btn{
		margin-top: 20px;
	}

	.pricing-benefit-list ul{
		gap: 10px;
	}

	.pricing-benefit-list ul li{
		font-size: 14px;
	}

	.pricing-benefit-list ul li img{
		max-width: 14px;
		margin-right: 5px;
	}

	.cta-box-content,
	.contact-us-form{
		padding: 20px;
	}

	.cta-section-shape img{
		max-width: 60px;
	}

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

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

	.work-step-item{
		width: 100%;
	}

	.work-step-no{
		padding-bottom: 10px;
		margin-bottom: 40px;
	}

	.work-step-no::before{
		width: 100%;
	}

	.work-step-body{
		padding: 20px;
	}

	.work-step-body .icon-box{
		margin-top: -45px;
	}

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

	.work-step-content p{
		margin-top: 10px;
	}

	.work-step-content ul{
		margin-top: 20px;
	}

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

	.faq-cta-content p{
		margin-top: 10px;
	}

	.faq-accordion{
		padding: 20px;
	}

	.faq-accordion .accordion-header .accordion-button{
		font-size: 16px;
		padding-bottom: 10px;
	}

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

	.faq-accordion .accordion-item .accordion-body p{
		font-size: 14px;
	}

	.company-supports-content{
		display: block;
		text-align: center;
		margin-bottom: 20px;
	}

	.company-supports-content hr{
		display: none;
	}

	.testimonial-item{
		padding: 20px;
	}

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

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

	.post-featured-image{
		margin-bottom: 20px;
	}

	.post-item-content{
		margin-top: 10px;
		padding-top: 10px;
	}

	.post-item-content h2{
		font-size: 18px;
	}

	.footer-header .section-title{
		width: 100%;
	}

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

	.footer-links{
		width: 100%;
		max-width: 100%;
	}

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

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

	.footer-contact-content h3{
		margin-bottom: 5px;
	}

	.footer-copyright{
		margin-top: 30px;
		padding: 15px 0;
		display: block;
		text-align: center;
	}

	.footer-social-links{
		margin-top: 10px;
		justify-content: center;
	}

	.footer-social-links h3{
		font-size: 14px;
	}

	.footer-social-links ul li a{
		width: 34px;
		height: 34px;
	}

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

	.approach-body-item{
		display: block;
	}

	.approach-body-item-header{
		width: 100%;
		border-right: none;
		margin: 0px 0 15px 0;
		padding: 0px;
	}

	.approach-body-item-title h3{
		font-size: 18px;
	}

	.approach-body-item-content{
		width: 100%;
	}

	.approach-item{
		width: 100%;
	}

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

	.approach-item-content h3{
		font-size: 18px;
		margin-bottom: 10px;
	}

	.advantage-image-item-box{
		flex-direction: column-reverse;
	}

	.advantage-image-item{
		width: 100%;
	}

	.advantage-image-item .icon-box{
		margin-bottom: 20px;
	}

	.advantage-image-item-content h3{
		font-size: 18px;
	}

	.advantage-image-item-box .advantage-image{
		max-width: 100%;
	}

	.advantage-image figure img{
		aspect-ratio: 1 / 0.6;
	}

	.advantage-body{
		gap: 20px;
		padding: 20px;
	}

	.advantage-body-list,
	.advantage-counter-item{
		width: 100%;
	}

	.advantage-counter-item::before{
		display: none;
	}

	.advantage-counter-item h2{
		font-size: 26px;
	}

	.advantage-counter-item h3{
		font-size: 18px;
	}

	.advantage-body-list ul li{
		margin-bottom: 10px;
	}

	.impact-image figure img{
		aspect-ratio: 1 / 0.99;
	}

	.creation-counter-box{
		right: 20px;
	}

	.creation-counter-box h2{
		font-size: 26px;
	}

	.creation-counter-box h3{
		font-size: 18px;
		margin-bottom: 10px;
	}

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

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

	.creation-item-content p{
		font-size: 14px;
		margin: 10px 0 0 0;
	}

	.page-category-list h3{
        font-size: 18px;
    }

    .sidebar-cta-content h3{
        font-size: 18px;
        margin-bottom: 10px;
    }

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

    .sidebar-cta-contact ul li{
        margin-bottom: 15px;
    }

    .sidebar-cta-contact ul li a{
        padding: 6px 14px;
    }

    .sidebar-cta-contact ul li a img{
        max-width: 16px;
    }

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

    .service-entry h2{
        font-size: 26px;
    }

    .service-entry ul li{
        width: auto;
    }

	.service-solution-item{
        display: block;
        padding: 20px;
        margin-bottom: 20px;
    }

    .service-solution-header{
        border-right: none;
        border-bottom: 1px solid var(--divider-color);
        margin: 0 0 20px 0;
        padding: 0 0 20px 0;
    }

    .service-solution-step-no{
        text-align: left;
        margin-top: 10px;
    }

    .service-solution-item-content{
        width: 100%;
    }

    .service-solution-item-content h3{
        font-size: 18px;
        margin-bottom: 10px;
    }

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

    .service-impact-item{
        width: 100%;
    }
    
    .service-impact-item .icon-box{
        width: 50px;
        height: 50px;
        margin-bottom: 20px;
    }

    .service-impact-item .icon-box img{
        max-width: 26px;
    }

    .service-impact-item-content h3{
        font-size: 18px;
    }

    .building-smarter-steps,
    .building-smarter-image{
        width: 100%;
    }

    .building-step-item{
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

    .building-step-content h3{
        font-size: 18px;
        margin-bottom: 10px;
    }

    .building-smarter-image figure{
        height: auto;
    }

	.post-single-meta{
		margin-top: 5px;
	}

    .post-single-meta ol li{
        font-size: 16px;
    }
    
    .post-single-meta ol li i{
        font-size: 16px;
    }
    
    .post-image img{
        aspect-ratio: 1 / 0.7;
    }
    
    .post-entry blockquote{
        background-position: 15px 15px;
        padding: 60px 15px 15px 15px;
    }
    
    .post-entry blockquote p{
        font-size: 18px;
    }
    
    .post-entry h2{
        font-size: 26px;
    }

	.tag-links{
        font-size: 18px;
    }

    .project-category-list ul li,
    .category-social-link h3{
        font-size: 18px;
    }
    

    .project-entry h2{
        font-size: 26px;
    }

    .project-challenge-list{
        padding: 12px;
        border-radius: 12px;
    }

    .solution-counter-item{
        width: calc(50% - 20px);
    }

    .solution-counter-item h2{
        font-size: 30px;
    }

    .team-single-image img{
        aspect-ratio: 1 / 1.15;
        object-position: center center;
    }

    .member-info-box,
	.member-contact-list{
		width: 100%;
	}

	.member-info-box::before{
		width: 100%;
		height: 1px;
		top: auto;
		right: auto;
		left: 0;
		bottom: -20px;
	}

	.member-contact-item{
		margin-bottom: 20px;
	}

	.member-contact-item h3{
		font-size: 18px;
        margin-bottom: 5px;
	}

	.skills-progress-bar{
		width: 100%;
	}

	.skills-progress-bar .skill-data{
		margin-bottom: 10px;
	}

	.skills-progress-bar .skill-data .skill-title,
	.skills-progress-bar .skill-data .skill-no{
		font-size: 18px;
	}

    .team-guideline-list ul li{
        width: 100%;
        padding: 8px 10px 8px 30px;
    }

    .team-guideline-list ul li::before{
        font-size: 14px;
        left: 10px;
        top: 9px;
    }


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

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

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

	.google-map-iframe,
	.google-map-iframe iframe{
		height: 350px;
	}
}

/* --- VerrecchAI monochrome override --- */
:root{
  --accent-color: #d7d7d7;            /* silver */
  --accent-secondary-color: #d7d7d7;  /* same = no gradient */
}

/* remove gradient-fill text and make it plain silver */
.section-title h1 span,
.section-title h2 span{
  background: none !important;
  -webkit-text-fill-color: unset !important;
  color: #d7d7d7 !important;
}
/* VerrecchAI logo sizing */
.navbar-brand img {
  height: 140px !important;
  width: auto !important;
  max-height: px !important;
  display: block;
}
/* --- Darker dropdown for contrast (VerrecchAI) --- */
.main-menu ul ul,
.main-menu .sub-menu,
.main-menu li ul {
  background: rgba(10, 10, 10, 0.62) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55) !important;
}

/* Dropdown links */
.main-menu ul ul a,
.main-menu .sub-menu a,
.main-menu li ul a {
  color: rgba(255,255,255,0.90) !important;
}

/* Hover state */
.main-menu ul ul a:hover,
.main-menu .sub-menu a:hover,
.main-menu li ul a:hover {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.98) !important;
}

/* --- VerrecchAI: dark glass buttons (match navbar) --- */
.btn-default{
  background: rgba(10, 10, 10, 0.62) !important;   /* same “glass” vibe as nav */
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Hover = slightly brighter glass */
.btn-default:hover{
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

/* The little circular arrow chip */
.btn-default::before{
  background-color: rgba(255, 255, 255, 0.10) !important;
  border: 3px rgba(255, 255, 255, 0.14);
  /* optional: force the arrow graphic to look monochrome */
  filter: grayscale(1) brightness(2.2);
}

/* Optional: if text still looks slightly dim */
.btn-default:focus{
  color: rgba(255, 255, 255, 0.95) !important;
}

/* --- VerrecchAI: HERO buttons darker pre-hover, lighter on hover (keep arrows) --- */
.hero-btn .btn-default.btn-highlighted{
  background: rgba(0,0,0,0.55) !important;                 /* darker default */
  border: 3px rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.92) !important;
}

/* This is the animated fill layer on hover (do NOT touch ::before) */
.hero-btn .btn-default.btn-highlighted::after{
  background: linear-gradient(100deg,
    rgba(255,255,255,0.14) 0%,
    rgba(255,255,255,0.08) 100%
  ) !important;
}

/* About Us label sparkle -> white */
.about-us .section-title h3{
  background-image: url('../images/icon-sparkle-white.svg');
}



/* center the clickable badge inside the plate */
.about-image-box .contact-us-circle a{
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform: translate(5%, -5%);
  width: 120px;
  height: 120px;
  display: block;
  border-radius: 50%;
  overflow: visible;
  z-index: 2;

  /* add this */
  position: absolute;
}

.about-image-box .contact-us-circle a img{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  border-radius: 50% !important;
  object-fit: contain;
  display: block;

  /* keep your look */
  filter: drop-shadow(0 10px 25px rgba(0,0,0,0.45));
  opacity: 0.95;

  /* IMPORTANT: animation that includes the translate */
  animation: verrecchaiBadgeSpin 18s linear infinite;
}

@keyframes verrecchaiBadgeSpin{
  from{ transform: translate(-50%, -50%) rotate(0deg); }
  to  { transform: translate(-50%, -50%) rotate(360deg); }
}

.about-image-box .contact-us-circle a:hover img{
  animation-play-state: paused;
}

/* base: about icon sizing */
.about-body-header .icon-box{
  display: grid;
  place-items: center;
}

.about-body-header .icon-box img.about-icon{
  width: 90% !important;     /* default zoom */
  height: 90% !important;
  max-width: none !important;
  display: block;
}

.icon-box img{
  width: 75px;   /* try 44–56 */
  height: 75px;
}

.section-title h3{
  background-image: url("../images/icon-sparkle-white.svg") !important;
}

/* ===============================
   TABS: darker hover + active
   (kills the bright gradient wipe)
================================= */

/* Make the wipe color a dark glass instead of the accent gradient */
.features-nav ul li .btn-default.btn-highlighted::after{
  background: rgba(255,255,255,0.10) !important;
}

/* Slightly brighter on hover (still dark) */
.features-nav ul li .btn-default.btn-highlighted:hover::after{
  background: rgba(255,255,255,0.14) !important;
}

/* Keep text white (instead of turning orange on hover/active) */
.features-nav ul li .nav-link.active,
.features-nav ul li .nav-link:hover{
  color: #fff !important;
}

/* Optional: give tabs a subtle border so they read better */
.features-nav ul li .nav-link{
  border: 1px solid rgba(255,255,255,0.14);
}


/* ===============================
   ARROW CIRCLE: darker hover
   (removes bright gradient behavior)
================================= */

.video-play-button a{
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background-size: auto !important;      /* stop gradient animation behavior */
}

.video-play-button:hover a{
  background: rgba(255,255,255,0.14) !important;
  background-position: initial !important; /* disables the "shift" effect */
}

.video-play-button a i{
  color: #fff !important;
}

/* =========================================
   AEGIS PRODUCT LINEUP (project cards)
   Arrow circle hover: dark glass (no bright gradient)
========================================= */

.project-btn a{
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background-size: auto !important;       /* stop gradient animation */
}

.project-btn a:hover{
  background: rgba(255,255,255,0.14) !important;
  background-position: initial !important; /* kill the "shift" effect */
  /* keep your rotate effect (already in the theme), or remove if you want */
}

/* About section icon circles: darker background */
.about-body-header .icon-box{
  background: rgba(255,255,255,0.08) !important;  /* dark gray on black */
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: none !important;
}

/* ===============================
   HOW IT WORKS — VerrecchAI dark-glass highlight + darker icon chips + darker pill
================================= */

/* 1) Active/hover highlight card = DARK GLASS (not silver/white) */
.work-step-body::before{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.04) 100%
  ) !important;
}

/* Optional: make the highlighted card read slightly “stronger” */
.work-step-item.active .work-step-body,
.work-step-item:hover .work-step-body{
  border-color: rgba(255,255,255,0.18) !important;
}

/* 2) Icon circle behind the white SVGs = darker */
.work-step-body .icon-box{
  background: rgba(10, 10, 10, 0.72) !important;  /* dark chip */
  border: 1px solid rgba(255,255,255,0.14) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Kill the template’s “turn white on active/hover” pulse */
.work-step-body .icon-box::before{
  display: none !important;
}

/* Keep icons white even on active/hover */
.work-step-body .icon-box img,
.work-step-item.active .work-step-body .icon-box img,
.work-step-item:hover .work-step-body .icon-box img{
  filter: brightness(0) invert(1) !important;
}

/* 3) The little "Simple" pill = darker glass too */
.how-it-work .section-footer-text p span{
  background: rgba(10, 10, 10, 0.72) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.92) !important;
}

/* Slightly brighter on hover */
.how-it-work .section-footer-text p:hover span{
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.22) !important;
}

/* ===============================
   Restore icon "invert" behavior on hover/active
   Default: dark chip + white icon
   Hover/Active: white chip + black icon
================================= */

/* Default (idle) */
.work-step-body .icon-box{
  background: rgba(10, 10, 10, 0.72) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.work-step-body .icon-box img{
  filter: brightness(0) invert(1) !important; /* white */
  transition: filter 220ms ease, transform 220ms ease;
}

/* Hover/Active "flip" look */
.work-step-item:hover .work-step-body .icon-box,
.work-step-item.active .work-step-body .icon-box{
  background: rgba(255,255,255,0.92) !important;
  border-color: rgba(255,255,255,0.32) !important;
  transform: translateY(-2px);
}

.work-step-item:hover .work-step-body .icon-box img,
.work-step-item.active .work-step-body .icon-box img{
  filter: brightness(0) invert(0) !important; /* black */
  transform: scale(1.02);
}

/* ==========================================
   HOW IT WORKS — restore center-out bloom + icon flip + global sizing
   (place at VERY bottom of custom.css)
========================================== */

.how-it-work{
  --work-chip: 66px;  /* circle size */
  --work-icon: 46px;  /* icon size (try 40–46) */
}

/* circle */
.how-it-work .work-step-body .icon-box{
  width: var(--work-chip) !important;
  height: var(--work-chip) !important;
  background: rgba(10,10,10,0.72) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  overflow: hidden !important;
  position: relative;
}

/* re-enable the bloom layer (this is what you accidentally disabled) */
.how-it-work .work-step-body .icon-box::before{
  display: block !important;
  background: rgba(255,255,255,0.92) !important;
  transform: scale(0);
  transition: transform 500ms cubic-bezier(0.2,0.9,0.2,1) !important;
}

/* icon sizing (beats the template's max-width:30px) */
.how-it-work .work-step-body .icon-box img{
  width: var(--work-icon) !important;
  height: var(--work-icon) !important;
  max-width: none !important;
  position: relative;
  z-index: 2;
  filter: brightness(0) invert(1) !important; /* white by default */
  transition: filter 500ms ease, transform 420ms cubic-bezier(0.2,0.9,0.2,1);
}

/* bloom + flip on hover/active */
.how-it-work .work-step-item:hover .work-step-body .icon-box::before,
.how-it-work .work-step-item.active .work-step-body .icon-box::before{
  transform: scale(1);
}

.how-it-work .work-step-item:hover .work-step-body .icon-box img,
.how-it-work .work-step-item.active .work-step-body .icon-box img{
  filter: brightness(0) invert(0) !important; /* black */
  transform: scale(1.06);
}

/* =========================================================
   VERRECCHAI HOUSEKEEPING (MOBILE + HIGHLIGHT + FAQ ICON)
========================================================= */

/* 1) Mobile hamburger button is too bright -> make it dark/glass */
.navbar-toggle .slicknav_btn{
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.navbar-toggle a.slicknav_btn.slicknav_open{
  background: rgba(255,255,255,0.12) !important;
}
.slicknav_icon .slicknav_icon-bar{
  background-color: rgba(255,255,255,0.92) !important;
}

/* 2) Text highlight / selection is too bright -> make it subtle */
::selection{
  background-color: rgba(255,255,255,0.16) !important;
  color: #ffffff !important;
  filter: none !important;
}
::-moz-selection{
  background-color: rgba(255,255,255,0.16) !important;
  color: #ffffff !important;
  filter: none !important;
}

/* 3) FAQ “support” icon circle -> darker so the icon pops */
.faq-cta-box .icon-box{
  background: rgba(0,0,0,0.55) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35) !important;
}
.faq-cta-box:hover .icon-box{
  background: rgba(255,255,255,0.10) !important;
}

/* If the headphones image isn’t white, force it */
.faq-cta-box .icon-box img{
  filter: brightness(0) invert(1) !important;
}

/* =========================================================
   MOBILE DROPDOWN MENU (SlickNav) — dark glass instead of light gray
========================================================= */

/* the opened dropdown panel */
.slicknav_nav{
  background: rgba(10,10,10,0.92) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* links + spacing */
.slicknav_nav a{
  color: rgba(255,255,255,0.92) !important;
  padding: 14px 18px !important;
}

/* remove the default hover gray */
.slicknav_nav a:hover,
.slicknav_nav .slicknav_row:hover{
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
}

/* dropdown caret + row */
.slicknav_nav .slicknav_arrow{
  color: rgba(255,255,255,0.70) !important;
}
.slicknav_nav .slicknav_row{
  color: rgba(255,255,255,0.92) !important;
}

/* =========================================================
   SlickNav alignment fix (keep all items perfectly in line)
========================================================= */

/* Remove the built-in indent on dropdown rows */
.slicknav_nav .slicknav_row{
  margin: 0 !important;
  padding: 14px 18px !important; /* match your link padding */
}

/* Make top-level links match the same padding */
.slicknav_nav > li > a{
  padding: 14px 18px !important;
}

/* Keep arrows aligned and not pushing text */
.slicknav_nav .slicknav_arrow{
  float: right !important;
  margin-right: 0 !important;
}

/* If any submenu items are indented, keep them only slightly */
.slicknav_nav ul{
  margin: 0 !important;
  padding: 0 !important;
}
.slicknav_nav ul li a{
  padding: 12px 18px 12px 34px !important; /* subtle indent for subitems */
}

/* =========================================================
   SlickNav: fix dropdown parent indentation (double padding)
========================================================= */

/* Parent rows (items with dropdown arrows) */
.slicknav_nav .slicknav_row{
  padding: 0 !important;          /* remove outer padding */
  margin: 0 !important;
}

/* Inner anchor inside the row is what should hold the padding */
.slicknav_nav .slicknav_row > a{
  display: block !important;
  padding: 14px 18px !important;  /* match normal links */
  margin: 0 !important;
}

/* Normal (non-dropdown) items */
.slicknav_nav > li > a{
  padding: 14px 18px !important;
  margin: 0 !important;
}

/* Keep arrow aligned right without affecting text */
.slicknav_nav .slicknav_arrow:after{
  right: 18px !important;
}

/* Footer contact icon backgrounds -> dark "glass" */
.footer-links.footer-contact-links .footer-contact-item .icon-box{
  background: rgba(255,255,255,0.07) !important;   /* dark glass */
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Keep the icon itself crisp */
.footer-links.footer-contact-links .footer-contact-item .icon-box img{
  opacity: 0.95;
}

/* Disable the decorative moving shapes in the footer */
.main-footer::before,
.main-footer::after{
  content: none !important;
  display: none !important;
}

/* Remove the random decorative shapes/lines around the footer */
.main-footer::before,
.main-footer::after{
  content: none !important;
  display: none !important;
}

.footer-spacer{
  height: 100px;
}

/* ===== Disable Magic Cursor + restore normal cursor ===== */
html, body, * {
  cursor: auto !important;
}

/* restore expected cursor types */
a, button, .btn, [role="button"], input[type="submit"] {
  cursor: pointer !important;
}

input, textarea {
  cursor: text !important;
}

/* Vantage: darken icon circles so white SVGs pop */
.page-service-single .icon-box{
  background: rgba(255,255,255,0.06) !important; /* dark grey glass */
  border: 1px solid rgba(255,255,255,0.10) !important;
}

/* optional: make it feel tighter/cleaner */
.page-service-single .icon-box img,
.page-service-single .icon-box svg{
  filter: none !important;
  opacity: 0.95;
}

/* Vantage: darken the sidebar "Get Vantage" logo circle (keep original sizing) */
.page-service-single .sidebar-cta-logo{
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

/* Let the logo scale naturally inside the existing circle */
.page-service-single .sidebar-cta-logo img{
  width: 60%;
  height: auto;
  max-width: 36px;  /* tweak if you want it bigger/smaller */
  display: block;
}

/* VANTAGE: Glass hover for the 6 in-page icon circles (workflow + impact) */
.page-service-single .service-solution-item .icon-box,
.page-service-single .service-impact-item .icon-box{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

/* IMPORTANT: override the template's parent-hover that turns them solid light gray */
.page-service-single .service-solution-item:hover .icon-box,
.page-service-single .service-impact-item:hover .icon-box{
  background: rgba(255,255,255,0.10) !important;   /* brighter glass, not solid */
  border-color: rgba(255,255,255,0.18) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 10px 26px rgba(0,0,0,0.35) !important;
  transform: translateY(-1px);
}

/* If the theme uses a ::before overlay to force the gray, kill it */
.page-service-single .service-solution-item .icon-box::before,
.page-service-single .service-impact-item .icon-box::before{
  content: none !important;
}

/* Keep white SVGs/images crisp */
.page-service-single .service-solution-item .icon-box img,
.page-service-single .service-impact-item .icon-box img,
.page-service-single .service-solution-item .icon-box svg,
.page-service-single .service-impact-item .icon-box svg{
  opacity: 0.95;
  filter: none !important;
}

.page-header.page-header-sterling{
  background: var(--secondary-color) url('../images/page-header-bg1.png') center center / cover no-repeat !important;
}

.page-header.page-header-lyceum{
  background: var(--secondary-color) url('../images/page-header-bg2.png') center center / cover no-repeat !important;
}

.page-header.page-header-forge{
  background: var(--secondary-color) url('../images/page-header-bg3.png') center center / cover no-repeat !important;
}

.page-header.page-header-founder{
  background: var(--secondary-color) url('../images/page-header-bg4.png') center center / cover no-repeat !important;
}

/* --- Seamless scrolling pills (fix gap + overlap) --- */
.scrolling-ticker-item{
  overflow: hidden;
}

.scrolling-content{
  min-width: unset;          /* remove the forced 100% width that creates empty space */
  width: max-content;        /* shrink-wrap to the pills */
  flex-shrink: 0;
  will-change: transform;
  animation: scroll 10s linear infinite;
}

.scrolling-content span{
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Since the list is duplicated twice, scroll only half of it */
@keyframes scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--gap))); }
}

.page-header.page-header-about{
  background: var(--secondary-color) url('../images/page-header-bg5.png') center center / cover no-repeat !important;
}

/* About page: darken the light-grey icon circles ("dots") */
.our-approach .icon-box,
.approach-item-list .icon-box,
.our-creation .icon-box,
.creation-item .icon-box,
.why-choose-us .icon-box {
  background: rgba(255,255,255,0.08) !important;   /* darker glass */
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25) inset;
}

/* (Optional) if any icons look slightly off-center */
.our-approach .icon-box img,
.approach-item-list .icon-box img,
.our-creation .icon-box img,
.creation-item .icon-box img,
.why-choose-us .icon-box img {
  display: block;
}

/* FAQ: force the sidebar logo background to stay perfectly circular */
.page-single-sidebar .sidebar-cta-box .sidebar-cta-logo{
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important; /* key: no padding so it stays a square */
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* keep the logo nicely sized */
.page-single-sidebar .sidebar-cta-box .sidebar-cta-logo img{
  width: 26px;
  height: 26px;
  display: block;
}

.page-header.page-header-faq{
  background: var(--secondary-color) url('../images/page-header-bg6.png') center center / cover no-repeat !important;
}

.page-header.page-header-contact{
  background: var(--secondary-color) url('../images/page-header-bg7.png') center center / cover no-repeat !important;
}

/* Force the contact form into 2 columns on desktop (even if Bootstrap grid isn't applying) */
@media (min-width: 768px) {
  .contact-us-form form .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
  }

  .contact-us-form form .row > [class*="col-"] {
    padding-left: 15px;
    padding-right: 15px;
  }

  .contact-us-form form .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .contact-us-form form .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.page-header.page-header-vantage{
  background: var(--secondary-color) url('../images/page-header-bg.png') center center / cover no-repeat !important;
}

/* CONTACT PAGE — dark glass circles behind Email/Phone icons */
.page-contact-us .contact-info-item .icon-box{
  background: rgba(25, 25, 25, 0.72) !important;   /* darker grey "glass" */
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

/* keep the icons crisp */
.page-contact-us .contact-info-item .icon-box img{
  filter: none;
  opacity: 1;
}

.founder-signature{
  width: 180px;        /* primary size — adjust if needed */
  max-width: 100%;
  height: auto;
  margin: 10px 0 6px;
  opacity: 0.95;
margin-left: -29px;   /* move left */
  margin-top: -15px;    /* move up */
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 40px;
  padding: 16px 0;
}

.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.footer-bottom-inner a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

.footer-bottom-inner a:hover {
  color: #ffffff;
}

/* --- Footer bottom bar (copyright + privacy) --- */
.footer-bottom{
  margin-top: 0 !important;                /* kill the big gap */
  padding: 10px 0 0 !important;            /* bring it up */
  border-top: none !important;             /* remove the weird divider source */
}

.footer-bottom .container{
  padding-top: 0 !important;
}

/* Make ONE clean divider line that spans full width */
.footer-bottom-inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  margin-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* Typography + link */
.footer-bottom-inner,
.footer-bottom-inner a{
  font-size: 13px;
  color: rgba(255,255,255,0.55);
}

.footer-bottom-inner a{
  text-decoration: none;
}

.footer-bottom-inner a:hover{
  color: rgba(255,255,255,0.9);
}

.footer-bottom hr,
.footer-bottom:before,
.footer-bottom:after,
.footer-bottom-inner:before,
.footer-bottom-inner:after{
  content: none !important;
  display: none !important;
}

/* Make the footer bottom row feel integrated (not a separate box) */
.footer-copyright{
  margin-top: 30px !important;
  padding: 18px 0 24px !important;  /* was 40px 0 100px */
}

/* Style the Privacy Policy link to match */
.footer-legal a{
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  text-decoration: none;
  transition: 0.2s ease;
}

.footer-legal a:hover{
  color: rgba(255,255,255,0.9);
}

/* Footer bottom text consistency */
.footer-copyright p,
.footer-legal a{
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.55);
  line-height: 1.4;
}

/* Remove any default spacing differences */
.footer-copyright p{
  margin: 0;
}

.footer-legal a{
  text-decoration: none;
}

.footer-legal a:hover{
  color: rgba(255,255,255,0.9);
}

.footer-legal{
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-legal-sep{
  color: rgba(255,255,255,0.4);
  font-size: 13px;
  line-height: 1;
}

/* Tighten space between footer content and footer bottom bar */
.main-footer .footer-links-box{
  margin-bottom: 5px; /* reduce gap under Contact / Systems */
}

.footer-copyright{
  margin-top: 5px !important;  /* pulls divider upward */
}

.main-footer .footer-links-box{
  margin-bottom: 16px;
}

.footer-copyright{
  margin-top: 14px !important;
}

/* Tighten spacing between footer links + bottom legal bar */
.main-footer .footer-copyright{
  margin-top: 24px !important;      /* was 60px */
  padding: 18px 0 26px !important;  /* was 40px 0 100px */
}

/* Make copyright + legal links match color + size */
.main-footer .footer-copyright-text p,
.main-footer .footer-legal a{
  font-size: 13px;
  color: rgba(255,255,255,0.55);
}

/* Hover + cursor */
.main-footer .footer-legal a{
  cursor: pointer !important;
  text-decoration: none;
}

.main-footer .footer-legal a:hover{
  color: rgba(255,255,255,0.9);
}

/* Mobile footer legal alignment fix */
@media (max-width: 768px) {
  .footer-bottom-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }

  .footer-legal {
    margin-top: 4px;
  }
}

/* --- Footer bottom (copyright + legal links) --- */
.footer-copyright{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.footer-copyright-text p{
  color: var(--text-color);
  font-size: 14px;
  margin: 0;
}

.footer-legal{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  font-size: 14px;
}

.footer-legal a{
  color: var(--text-color);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
}

.footer-legal a:hover{
  color: var(--white-color);
}

.footer-legal-sep{
  color: var(--text-color);
  opacity: 0.6;
}

/* Mobile: stack + center cleanly */
@media (max-width: 767px){
  .footer-copyright{
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
  }

  .footer-legal{
    justify-content: center;
  }
}