/* ----------------------------------------------------------------------------------------
* Author        : Awaiken
* Template Name : Proshield - Cyber Security Services HTML Template
* File          : CSS File
* Version       : 1.0
* ---------------------------------------------------------------------------------------- */

/* Smooth scroll - replaces SmoothScroll.js */
html {
    scroll-behavior: smooth;
}

/* Font Awesome font-display override - swap instead of block for faster FCP */
@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(../webfonts/fa-solid-900.woff2) format("woff2"),
         url(../webfonts/fa-solid-900.ttf) format("truetype");
}
@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../webfonts/fa-regular-400.woff2) format("woff2"),
         url(../webfonts/fa-regular-400.ttf) format("truetype");
}
@font-face {
    font-family: "Font Awesome 6 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../webfonts/fa-brands-400.woff2) format("woff2"),
         url(../webfonts/fa-brands-400.ttf) format("truetype");
}

/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. About Us css
06. Our Service css
07. Our Feature css
08. Our Projects css
09. Why Choose Us css
10. What We Do css
11. Our Pricing css
12. Our Testimonial css
13. Our Team css
14. CTA Box css
15. Our FAQs 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. Pricing Page css
28. Testimonial 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				: #010535;
	--secondary-color			: #F2F2F5;
	--text-color				: #707070;
	/* --accent-color				: #4D51AB;
	--accent-secondary-color	: #55CEE3; */
	--accent-color				: #62a9e1;
	--accent-secondary-color	: #e61088;
	--white-color				: #FFFFFF;
	--divider-color				: #F5F5F5;
	--dark-divider-color		: #FFFFFF33;
	--error-color				: rgb(230, 87, 87);
	--default-font				: "Plus Jakarta Sans", sans-serif;
}

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

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

::-webkit-scrollbar-track{
	background-color: var(--secondary-color);
	border-left: 1px solid var(--secondary-color);
}
::-webkit-scrollbar{
	width: 7px;
	background-color: var(--secondary-color);
}
::-webkit-scrollbar-thumb{
	background: linear-gradient(180deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
}

p{
	line-height: 1.7em;
	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;
}

.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;
    background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
    background-size: 200% auto;
    border-radius: 100px;
    color: var(--white-color);
    font-size: 18px;
    font-weight: 600;
	line-height: 1em;
    text-transform: capitalize;
    border: none;
    padding: 17px 60px 17px 30px;
    transition: all 0.4s ease-in-out;
	overflow: hidden;
	z-index: 0;
}

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

.btn-default::before{
	content: '\f0a9';
	font-family: 'Font Awesome 6 Free';
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(-30px, -50%);
	font-size: 20px;
	color: var(--white-color);
	border-radius: 50%;
	transition: all 0.4s ease-in-out;
}

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

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

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

.btn-default.btn-highlighted::after{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    bottom: 0;
    width: 0;
    height: 100%;
	background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
    border-radius: 100px;
    transition: 0.4s ease-in-out;
    z-index: -1;
}

.btn-default.btn-highlighted:hover{
	background-color: transparent;
	color: var(--white-color);
}

.btn-default.btn-highlighted:hover::before{
	color: var(--white-color);
}

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

.cb-cursor:before{
	background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
}

.preloader{
    position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
	display: flex;
	align-items: center;
	justify-content: center;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.section-title h3{
	position: relative;
	display: inline-block;
	font-size: 15px;
	line-height: normal;
	letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--primary-color);
	padding-left: 30px;
    margin-bottom: 20px;
}

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

.section-title h1{
	font-size: 68px;
	font-weight: 700;
	color: var(--white-color);
	margin-bottom: 0;
	cursor: none;
}

.section-title h2{
	font-size: 46px;
	font-weight: 700;
	margin-bottom: 0;
	cursor: none;
}

.section-title h1 span,
.section-title h2 span{
	background: linear-gradient(90.15deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
	background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

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

.section-title.dark-section h3::before{
	filter: brightness(0) invert(1);
}

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

.topbar{
	background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
	padding: 10px 0;
}

.topbar-info-text p{
	color: var(--white-color);
	opacity: 80%;
	margin-bottom: 0;
}

.topbar-info-text p a{
	font-weight: 700;
	text-transform: capitalize;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: all 0.3s ease-in-out;
}

.topbar-info-text p a:hover{
	color: var(--primary-color)	;
}

.topbar-links{
	display: flex;
	align-items: center;
	justify-content: end;
}

.topbar-contact-info{
	border-right: 1px solid var(--dark-divider-color);
	margin-right: 25px;
	padding-right: 25px;
}

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

.topbar-contact-info ul li{
	position: relative;
    display: inline-block;
    margin-right: 20px;
	color: var(--white-color);
	opacity: 80%;
    transition: all 0.3s ease-in-out;
}

.topbar-contact-info ul li a{
    color: inherit;
}

.topbar-contact-info ul li:hover{
	color: var(--primary-color);
}

.topbar-contact-info ul li:last-child{
	margin: 0;
	padding: 0;
}

.topbar-contact-info ul li::before{
	content: '/';
	position: absolute;
	top: 0;
	right: -16px;
	bottom: 0;
	font-size: 16px;
	color: var(--white-color);
	opacity: 80%;
}

.topbar-contact-info ul li:last-child:before{
	display: none;
}

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

.topbar-social-links ul li{
	position: relative;
    display: inline-block;
    margin-right: 20px;
    transition: all 0.3s ease-in-out;
}

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

.topbar-social-links ul li a{
	display: block;
	color: var(--white-color);
	transition: all 0.3s ease-in-out;
}

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

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

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

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

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

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

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

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

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

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

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

.main-menu ul li a{
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2em;
	padding: 14px 20px !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: 900;
	font-size: 14px;
	margin-left: 8px;
}

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

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

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

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

.main-menu ul li:hover > ul{
	visibility: visible;
	opacity: 1;
	transform: scaleY(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(--white-color);
	padding: 8px 20px !important;
	transition: all 0.3s ease-in-out;
}

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

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

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

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

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

.slicknav_btn{
	background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	border-radius: 8px;
}

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

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

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

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

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

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

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

.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: 500;
	text-transform: capitalize;
	padding: 8px 20px;
	color: var(--white-color);
	line-height: normal;
	margin: 0;
	border-radius: 0 !important;
	transition: all 0.3s ease-in-out;
}

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

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

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

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

.slicknav_open > a .slicknav_arrow:after{
    transform: translateY(-52%) rotate(-180deg);
	color: var(--primary-color);
}
.navbar-brand img {
    max-width: 160px;
}
/************************************/
/***        04. Hero css	      ***/
/************************************/

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

.hero::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: linear-gradient(270deg, rgba(1, 5, 53, 0.28) 43.57%, rgba(1, 5, 53, 0.8) 100%);
	width: 100%;
	height: 100%;
	z-index: 1;
}

.hero.hero-video{
	padding: 205px 0;
}

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

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

.hero.hero-slider-layout{
	background: none;
	padding: 0;
}

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

.hero.hero-slider-layout .hero-slide::before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(270deg, rgba(1, 5, 53, 0.28) 43.57%, rgba(1, 5, 53, 0.8) 100%);
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero.hero-slider-layout .hero-slide .hero-slider-image{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
}

.hero.hero-slider-layout .hero-slide .hero-slider-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero.hero-slider-layout .hero-pagination{
	position: absolute;
    bottom: 70px;
	text-align: left;
	padding-left: calc(((100vw - 1300px) / 2) + 15px);
	z-index: 2;
}

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

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

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

.hero-content-body{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 40px;
}

.video-play-button{
	display: flex;
    align-items: center;
    justify-content: center;
}

.video-play-button a{
	height: 50px;
	width: 50px;
	background: var(--white-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: none;
	margin-right: 10px;
	transition: all 0.3s ease-in-out;
}

.video-play-button:hover a{
	background: var(--accent-color);
}

.video-play-button i{
	font-size: 18px;
	color: var(--accent-color);
	transition: all 0.3s ease-in-out;
}

.video-play-button:hover a i{
	color: var(--white-color);
}

.video-play-button h3{
	font-size: 18px;
	text-transform: capitalize;
	color: var(--white-color);
	margin: 0;
}

.hero-content-footer{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 80px;
}

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

.hero-list ul li{
	background: url('../images/icon-check-white.svg') no-repeat;
	background-position: left top;
	background-size: 24px auto;
	line-height: 1.5em;
	text-transform: capitalize;
	color: var(--white-color);
	border-bottom: 1px solid var(--dark-divider-color);
	margin-bottom: 25px;
	padding: 0 0 25px 35px;
}

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

.our-client-images{
	display: inline-flex;
    align-items: center;
    justify-content: center;
}

.client-image{
	display: inline-block;
	border: 1px solid var(--white-color);
    border-radius: 50%;
    margin-left: -14px;
    width: 62px;
    height: 62px;
    overflow: hidden;
    z-index: 1;
}

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

.client-image figure{
	display: block;
}

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

.client-image.client-counter{
	background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
    background-size: 200% auto;
	text-align: center;
	display: inline-flex;
    align-items: center;
    justify-content: center;
	transition: all 0.4s ease-in-out;
}

.client-image.client-counter:hover{
	background-position: right center;
}

.client-image.client-counter h3{
	font-size: 22px;
	color: var(--white-color);
	margin: 0;
	transition: all 0.4s ease-in-out;
}

.client-image.client-counter:hover h3{
	color: var(--primary-color);
}

.our-client-content{
	margin-top: 10px;
}

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

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

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

.about-us-image{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 30px;
	margin-right: 20px;
}

.about-image-box{
	width: calc(50% - 15px);
}

.about-img-2{
	margin-bottom: 30px;
}

.about-img-1 figure,
.about-img-2 figure,
.about-img-3 figure{
	display: block;
	border-radius: 30px;
}

.about-img-1 img,
.about-img-2 img,
.about-img-3 img{
	width: 100%;
	object-fit: cover;
	border-radius: 30px;
}

.about-img-1 img{
	aspect-ratio: 1 / 1.91;
}

.about-img-2 img,
.about-img-3 img{
	aspect-ratio: 1 / 1.07;
}

.get-free-security-circle{
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
	z-index: 1;
}

.get-free-security-circle img{
	width: 100%;
	max-width: 166px;
	animation: infiniterotate 20s infinite linear;
}

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

.about-us-body{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
	border-radius: 100px;
	margin-bottom: 50px;
	margin-left: 20px;
	padding-right: 20px;
}

.about-us-body-img{
	width: 200px;
	height: 145px;
	background-color: var(--white-color);
	clip-path: polygon(45% -70%,96% 50%,50% 155%,0 50%);
	display: flex;
	margin-right: 10px;
	margin-left: -20px;
}

.about-us-body-img figure{
	width: 180px;
	height: 145px;
	clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);
	overflow: hidden;
}

.about-us-body-img img{
	width: 180px;
	height: 145px;
}

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

.about-us-body-content h3{
	color: var(--white-color);
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 10px;
}

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

.about-us-footer{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 30px;
}

.about-footer-list,
.about-footer-content{
	width: calc(50% - 15px);
}

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

.about-footer-list ul li{
	background: url('../images/icon-check.svg') no-repeat;
	background-position: left top;
	background-size: 24px auto;
	line-height: 1.5em;
	padding-left: 35px;
	margin-bottom: 20px;
}

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

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

.about-contact-btn .icon-box{
	position: relative;
	height: 46px;
	width: 46px;
	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;
	overflow: hidden;
	margin-right: 10px;
	transition: all 0.3s ease-in-out;
	z-index: 1;
}

.about-contact-btn:hover .icon-box{
	background-position: right center;
}

.about-contact-btn .icon-box img{
	width: 100%;
	max-width: 28px;
}

.about-footer-btn-content{
	width: calc(100% - 56px);
}

.about-footer-btn-content h3{
	font-size: 20px;
	color: var(--primary-color);
	margin: 0;
}

.about-footer-btn-content h3 a{
	color: inherit;
}

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

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

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

.service-item::before{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
	height: 0;
	width: 100%;
	z-index: 0;
	transition: all 0.4s ease-in-out;
}

.service-item.active:before,
.service-item:hover:before{
	height: 100%;
}

.service-item .icon-box{
	position: relative;
	margin-bottom: 90px;
	z-index: 1;
}

.service-item .icon-box img{
	width: 100%;
	max-width: 80px;
	transition: all 0.4s ease-in-out;
}

.service-item.active .icon-box img,
.service-item:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.service-title-box{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 15px;
	z-index: 1;
}

.service-title{
	width: calc(100% - 55px);
}

.service-title h3{
	font-size: 20px;
	font-weight: 600;
	transition: all 0.4s ease-in-out;
}

.service-item.active .service-title h3,
.service-item:hover .service-title h3{
	color: var(--white-color);
}

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

.service-btn a{
	position: relative;
	height: 40px;
	width: 40px;
	border-radius: 50%;
	display: flex;
	color: var(--white-color);
	justify-content: center;
	align-items: center;
	overflow: hidden;
	margin-left: 15px;
	transition: all 0.4s ease-in-out;
}

.service-item.active .service-btn a,
.service-item:hover .service-btn a{
	background: var(--white-color);
	color: var(--accent-secondary-color);
}

.service-item .service-btn a:hover{
	color: var(--primary-color);
}

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

.service-btn a i{
	font-size: 20px;
	color: inherit;
}

.service-content{
	position: relative;
	z-index: 1;
}

.service-content p{
	margin-bottom: 0;
	transition: all 0.4s ease-in-out;
}

.service-item.active .service-content p,
.service-item:hover .service-content p{
	color: var(--white-color);
}

/************************************/
/*** 	  07. Our Feature css	  ***/
/************************************/

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

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

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

.company-experience-info{
	display: flex;
	gap: 30px;
	margin-top: 30px;
}

.company-experience-info .feature-image{
	width: calc(65% - 15px);
}

.company-experience-info .feature-image img{
	aspect-ratio: 1 / 0.652;
}

.company-experience-box{
	width: calc(35% - 15px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 50%, var(--accent-color) 98.15%);
	background-size: 200% auto;
	text-align: center;
	border-radius: 30px;
	padding: 20px;
	transition: all 0.4s ease-in-out;
}

.company-experience-box:hover{
	background-position: right center;
}

.company-experience-content{
	border-bottom: 1px solid var(--dark-divider-color);
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.company-experience-content h2{
	font-size: 60px;
	color: var(--white-color);
	margin-bottom: 10px;
}

.company-experience-content p{
	color: var(--white-color);
	opacity: 80%;
	margin-bottom: 0;
}

.company-client-images .client-image{
	width: 32px;
    height: 32px;
	margin-left: -8px;
}

.company-client-images .client-image img{
	max-width: 30px;
}

.company-client-images .client-image.client-counter h3{
	font-size: 10px;
}

.our-feature-content{
	margin-left: 15px;
}

.ferature-list-item{
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 40px;
}

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

.ferature-list-item .icon-box{
	height: 60px;
	width: 60px;
	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: 20px;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
}

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

.ferature-list-item .icon-box img{
	max-width: 30px;
}

.ferature-list-content{
	width: calc(100% - 80px);
}

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

.ferature-list-content p{
	margin-bottom: 0;
}

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

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

.projects-list{
	display: flex;
	flex-wrap: wrap;
	border: 1px solid var(--dark-divider-color);
	border-right: none;
	border-bottom: none;
	border-radius: 30px;
	overflow: hidden;
}

.project-item{
	position: relative;
	width: 25%;
	border-right: 1px solid var(--dark-divider-color);
	border-bottom: 1px solid var(--dark-divider-color);
	border-top: none;
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(100px);
    overflow: hidden;
    z-index: 1;
}

.project-item:nth-child(-4n + 4){
	border-radius: 0 30px 0 0;
}

.project-item:last-child{
	border-radius: 0 0 30px 0;
}

.project-image a,
.project-image figure{
	display: block;
	overflow: hidden;
	cursor: none;
}

.project-image figure::before{
	content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(270deg, rgba(85, 199, 224, 0.6) 0%, rgba(78, 82, 172, 0.6) 100%);
    height: 0;
    width: 100%;
    transition: all 0.4s ease-in-out;
    z-index: 1;
}

.project-item.active .project-image a figure::before,
.project-item:hover .project-image a figure::before{
    height: 100%;
}

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

.project-item.active .project-image img,
.project-item:hover .project-image img{
	transform: scale(1.05);
}

.project-content{
	position: absolute;
	right: 30px;
	left: 30px;
	bottom: 30px;
    transform: translateY(50px);
	opacity: 0;
	visibility: hidden;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.project-item.active .project-content,
.project-item:hover .project-content{
    transform: translateY(0);
	opacity: 1;
	visibility: visible;
}

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

.project-content p a{
	display: inline-block;
    line-height: 1.2em;
	text-transform: capitalize;
	color: var(--white-color);
	border: 1px solid var(--white-color);
	border-radius: 5px;
	padding: 8px 10px;
}

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

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

.section-footer-text{
	width: 100%;
	max-width: 580px;
	text-align: center;
	margin: 80px auto 0;
}

.section-footer-text p{
	margin-bottom: 0;
}

.section-footer-text p a{
	position: relative;
	font-weight: 600;
	text-transform: capitalize;
	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;
}

.section-footer-text p a::before{
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	right: 0;
	background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	height: 2px;
	width: 100%;
	transition: all 0.3s ease-in-out;
}

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

/************************************************/
/*** Our Products — Scroll Showcase: START    ***/
/************************************************/

/* Home page (index.html) section: <section class="showcase" id="showcase">
   Animation: js/products-scroll.js (everything is driven by the section's scroll progress 0 → 1).
   All rules are scoped to .showcase so they cannot leak into, or be overridden by, the rest of the site.
   Note: .sc-card / .sc-btn / .sc-counter are prefixed because Bootstrap already defines .card and .btn,
   and js/function.js runs counterUp on every .counter. */

/* ---------- Tokens + reset (neutralise bootstrap / general css inside the section) ---------- */
.showcase{
	--ink: #0d0d10;
	--mut: #6c7280;
	--faint: #a3a8b3;
	--line: rgba(13, 13, 16, .09);
	--acc: #2f5bff;
	--font: "Plus Jakarta Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-family: var(--font);
	font-size: 16px;
	line-height: normal;
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
}
.showcase *{box-sizing: border-box; margin: 0}
.showcase :is(h2, h3){color: inherit; line-height: inherit}
.showcase p{line-height: inherit}
.showcase dt{font-weight: inherit}

/* ---------- Section: tall scroll room + faint grid ---------- */
.showcase{
	position: relative;
	height: 550vh;                 /* tall = scroll room for the story */
	overflow-x: clip;
	background: #fff;
	background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
	background-size: 96px 96px;
	background-position: center top;
}
.showcase::before{
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse 70% 55% at 50% 40%, transparent 0, #fff 100%);
	opacity: .94;
}

/* ---------- Heading: absolute, scrolls with the page (not sticky) ---------- */
.showcase .heading{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 4vh 2vw 0;
	text-align: center;
	z-index: 1;
	transform-origin: 50% 0;
	will-change: transform, opacity;
}

.showcase .heading h3{
	position: relative;
	display: inline-block;
	font-size: 15px;
	font-family: 'Plus Jakarta Sans', sans-serif;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--primary-color);
	padding-left: 28px;
	margin-bottom: 2.2vh;
}

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

.showcase .heading h2{
	font-size: 70px;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 700;
	letter-spacing: -.045em;
	line-height: 1.15;
	color: var(--primary-color);
}

.showcase .heading h2 span{
	background: linear-gradient(90.15deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ---------- Stage: pinned layer that carries the cards and side info ---------- */
.showcase .stage{position: sticky; top: 0; height: 100vh; overflow: hidden; z-index: 2; pointer-events: none}
.showcase .blob{position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform}
.showcase .b1{width: 36vw; height: 36vw; left: -8vw; top: 20vh; background: rgba(47, 91, 255, .09)}
.showcase .b2{width: 30vw; height: 30vw; right: -6vw; bottom: 0; background: rgba(120, 130, 160, .10)}
.showcase .b3{width: 30vw; height: 30vw; left: -6vw; bottom: 0}   /* mirror of b2 on the left */

/* ---------- Scroll-driven brand glow (blue → pink) ---------- */
.showcase{ --glow: 98, 169, 225; }          /* start colour, JS updates it */

.showcase .glow{
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;                              /* JS fades it in with the side info */
	background:
	radial-gradient(ellipse 65% 70% at 50% 52%, rgba(var(--glow), .70) 0%, rgba(var(--glow), .35) 50%, transparent 88%), linear-gradient(180deg, rgba(var(--glow), .14) 0%, rgba(var(--glow), .28) 100%);
}
/* soft fade from the showcase into the grey Services section */
.showcase::after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 50vh;
	pointer-events: none;
	z-index: 1;   /* above the grid, below the cards and text */
	background: linear-gradient(180deg, rgba(242, 242, 245, 0) 0%, #F2F2F5 100%);
}
/* blobs pick up the same colour instead of the fixed blue/grey */
.showcase .b1{ background: rgba(var(--glow), .14) }
.showcase .b2,
.showcase .b3{ background: rgba(var(--glow), .10) }

/* card shadow tinted with the current colour so it lifts off the glow */
.showcase .sc-card{
	box-shadow: 0 40px 80px -30px rgba(var(--glow), .45), 0 2px 6px rgba(13, 13, 16, .05);
}

/* ---------- Top / bottom info strips ---------- */
.showcase .top,
.showcase .bottom{position: absolute; left: 4vw; right: 4vw; display: flex; justify-content: space-between; align-items: center; font-size: .92rem; color: var(--mut)}
.showcase .top{top: 26px}
.showcase .bottom{bottom: 24px; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; line-height: 1.6}
.showcase .bottom .sw:first-child{max-width: 9em}
.showcase .bottom .r{text-align: right; color: var(--ink)}
.showcase .sc-counter{font-variant-numeric: tabular-nums}
.showcase .sc-counter b{color: var(--ink); font-weight: 500}
.showcase .top .sw{font-style: italic; max-width: 22ch}

/* ---------- Side info (left editorial / right details) ---------- */
.showcase .side{position: absolute; top: 50%; width: min(240px, 16vw); margin-top: -60px}
.showcase .side.left{left: 4vw}
.showcase .side.right{right: 4vw; padding-left: 0}
.showcase .side p{font-size: clamp(1.15rem, .9vw + .9rem, 1.4rem); line-height: 1.35; letter-spacing: -.01em; color: var(--ink); font-weight: 500; white-space: pre-line}
.showcase .hline{display: block; width: 32px; height: 1px; background: var(--ink); margin-bottom: 16px}
.showcase .vline{position: absolute; left: -18px; top: 0; bottom: 0; width: 1px; background: linear-gradient(var(--line), var(--faint), var(--line))}
.showcase dl{display: grid; gap: 3px; font-size: .92rem}
.showcase dt{
	font-size: clamp(.78rem, .35vw + .65rem, .9rem);
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 600;
	margin-top: 12px;
	justify-self: start;
	background: linear-gradient(to right, var(--accent-secondary-color) 0%, var(--accent-color) 50%, var(--accent-secondary-color) 100%);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.showcase dt:first-child{margin-top: 0}
.showcase dd{color: var(--ink); font-weight: 500; font-size: clamp(1rem, .45vw + .8rem, 1.15rem)}
.showcase .dot{display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); margin-right: 8px; vertical-align: middle}

/* ---------- Text swap animation (only runs when the active product changes) ---------- */
.showcase .sw{display: inline-block; transition: opacity .28s ease, transform .28s ease}
.showcase .sw.out{opacity: 0; transform: translateY(8px)}
.showcase .side p.sw,
.showcase .side dd .sw,
.showcase .bottom .sw{display: block}
.showcase .side dd .sw{display: inline-block}

/* ---------- Product cards ---------- */
.showcase .cards{position: absolute; inset: 0}
.showcase .sc-card{
	position: absolute;
	left: 50%;
	top: 50%;
	width: clamp(580px, 42vw, 780px);
	height: clamp(430px, 46vh, 560px);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 22px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 30px 60px -30px rgba(13, 13, 16, .28), 0 2px 6px rgba(13, 13, 16, .05);
	will-change: transform, opacity;
	pointer-events: auto;
}
.showcase .mock{flex: 1; min-height: 0; background: #f5f6f8; margin: 8px 8px 0; border-radius: 15px; border: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden}
.showcase .mbar{display: flex; align-items: center; gap: 5px; padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--line); font-size: .62rem; color: var(--mut)}
.showcase .mbar i{width: 6px; height: 6px; border-radius: 50%; background: #d7dae1}
.showcase .mbar span{margin-left: 8px}
/* product screenshot: fills the same box the old dashboard mock used; cropped, never stretched */
.showcase .mshot{position: relative; flex: 1; min-height: 0; overflow: hidden;
	background: linear-gradient(135deg, #eef2f8 0%, #f6eef5 100%)}
.showcase .mshot::before{                 /* placeholder shown until the image file exists */
	content: attr(data-name); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	font-size: 1.1rem; font-weight: 600; letter-spacing: .02em; color: #b4bac6}
.showcase .mshot img{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block}
.showcase .mbody{flex: 1; min-height: 0; display: flex}
.showcase .mbody aside{width: 15%; background: #fff; border-right: 1px solid var(--line); padding: 10px 8px; display: grid; align-content: start; gap: 8px}
.showcase .mbody aside b{height: 6px; border-radius: 3px; background: #e6e8ee}
.showcase .mbody aside b:first-child{background: var(--acc); width: 70%}
.showcase .main{flex: 1; padding: 12px; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; min-width: 0}
.showcase .kpis{display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px}
.showcase .kpis div{background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px}
.showcase .kpis small{display: block; font-size: .54rem; color: var(--mut)}
.showcase .kpis strong{font-size: .95rem; font-weight: 600; letter-spacing: -.02em}
.showcase .chart{background: #fff; border: 1px solid var(--line); border-radius: 9px; display: flex; align-items: flex-end; gap: 5%; padding: 8px 10px 0}
.showcase .chart i{flex: 1; border-radius: 3px 3px 0 0; background: #dfe3ec}
.showcase .chart i.hi{background: var(--acc)}
.showcase .rows{display: grid; gap: 5px}
.showcase .rows b{height: 7px; border-radius: 4px; background: #e6e8ee}
.showcase .rows b:nth-child(2){width: 78%}
.showcase .rows b:nth-child(3){width: 55%}
.showcase .cfoot{display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px 22px}
.showcase .cfoot small{font-size: .75rem; color: var(--mut); letter-spacing: .06em}
.showcase .cfoot h3{font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; margin: 2px 0}
.showcase .cfoot p{font-size: .95rem; color: #4b5160; line-height: 1.5; max-width: 46ch}   /* bigger, darker grey: easier to read */
.showcase .sc-btn,
.about-us .sc-btn{
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 999px;
	background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	color: #fff;
	font-size: .8rem;
	font-weight: 600;
	text-decoration: none;
	transition: gap .2s, background-position .4s ease-in-out;
}
.showcase .sc-btn:hover,
.about-us .sc-btn:hover{gap: 12px; background-position: right center; color: #fff}
.showcase .sc-btn:focus-visible,
.about-us .sc-btn:focus-visible{outline: 2px solid var(--accent-secondary-color); outline-offset: 3px}
/* About ("Who We Are"): same button, a little larger, left-aligned under the text */
.about-us .about-us-btn{margin-top: 30px}
.about-us .sc-btn{padding: 13px 26px; font-size: .95rem}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
	.showcase .side.left,
	.showcase .top .sw,
	.showcase .bottom .sw:first-child{display: none}
	/* right info becomes a compact strip under the card */
	.showcase .side.right{left: 6vw; right: 6vw; width: auto; top: auto; bottom: 56px; margin: 0}
	.showcase .vline{display: none}
	.showcase dl{grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 0 12px}
	.showcase dl dt:nth-of-type(4),
	.showcase dl dd:nth-of-type(4){display: none}
	.showcase dt{margin-top: 0}
	.showcase dl > dt:nth-of-type(1){grid-row: 1; grid-column: 1}
	.showcase dl > dd:nth-of-type(1){grid-row: 2; grid-column: 1}
	.showcase dl > dt:nth-of-type(2){grid-row: 1; grid-column: 2}
	.showcase dl > dd:nth-of-type(2){grid-row: 2; grid-column: 2}
	.showcase dl > dt:nth-of-type(3){grid-row: 1; grid-column: 3}
	.showcase dl > dd:nth-of-type(3){grid-row: 2; grid-column: 3}
	.showcase .bottom{justify-content: center}
	.showcase .bottom .r{text-align: center}
	.showcase .sc-card{height: min(50vh, 420px)}
	.showcase .cfoot{flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 18px 18px}
	.showcase .cfoot p{display: none}
}
@media (prefers-reduced-motion: reduce){
	.showcase .sw{transition: none}
}
@media (min-width: 1600px){
	.showcase .sc-card{width: clamp(780px, 38vw, 920px); height: clamp(560px, 48vh, 640px)}
}

/************************************************/
/*** Our Products — Scroll Showcase: END      ***/
/************************************************/

/************************************/
/*** 	 09. Why Choose Us css	  ***/
/************************************/

.why-choose-us{
	padding: 100px 0;
	background: url('../images/why-choose-bg.png'), var(--primary-color);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.why-choose-image{
	margin-right: 20px;
}

.why-choose-image figure{
	display: block;
	border-radius: 30px;
}

.why-choose-image img{
	width: 100%;
	aspect-ratio: 1 / 1.25;
	object-fit: cover;
	border-radius: 30px;
}

.why-choose-item{
	position: relative;
	background-color: var(--white-color);
	border-radius: 30px;
	box-shadow: 0px 0px 100px 2px #0000000D;
	padding: 25px 30px;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 40px;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
}

.why-choose-item:before{
	content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.why-choose-item:hover:before{
	top: 0;
	bottom: auto;
    height: 100%;
}

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

.why-choose-item .icon-box{
	position: relative;
	margin-right: 30px;
	z-index: 1;
}

.why-choose-item .icon-box img{
	width: 100%;
	max-width: 80px;
	transition: all 0.4s ease-in-out;
}

.why-choose-item:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.why-choose-item-content{
	position: relative;
	width: calc(100% - 110px);
	z-index: 1;
}

.why-choose-item-content h3{
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 10px;
	transition: all 0.4s ease-in-out;
}

.why-choose-item-content p{
	margin: 0;
	transition: all 0.4s ease-in-out;
}

.why-choose-item:hover .why-choose-item-content h3,
.why-choose-item:hover .why-choose-item-content p{
	color: var(--white-color);
}

.why-choose-counter-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px 50px;
	border-top: 1px solid var(--dark-divider-color);
	margin-top: 80px;
	padding-top: 80px;
}

.why-choose-counter-item{
	position: relative;
	width: calc(25% - 37.5px);
	text-align: center;
}

.why-choose-counter-item:after{
	content: '';
    position: absolute;
    top: 50%;
    right: -25px;
    bottom: 0;
    left: auto;
    transform: translateY(-50%);
    background: var(--dark-divider-color);
    width: 1px;
    height: 85%;
}

.why-choose-counter-item:last-child:after,
.why-choose-counter-item:nth-child(4n + 4)::after{
	display: none;
}

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

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

.why-choose-counter-content h3{
	color: var(--white-color);
	font-size: 46px;
	font-weight: 800;
	margin-bottom: 10px;
}

.why-choose-counter-content p{
	color: var(--white-color);
	font-size: 18px;
	text-transform: capitalize;
	margin: 0;
}

/************************************/
/*** 	  10. What We Do css	  ***/
/************************************/

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

.security-content-item{
	margin-bottom: 40px;
}

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

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

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

.security-image{
	margin-bottom: 40px;
}

.security-image figure{
	display: block;
	border-radius: 30px;
}

.security-image img{
	width: 100%;
	aspect-ratio: 1 / 0.51;
	object-fit: cover;
	border-radius: 30px;
}

.security-list{
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	border-top: 1px solid var(--divider-color);
	margin-top: 80px;
	padding-top: 80px;
}

.security-list-item{
	width: calc(33.33% - 20px);
	background: url(../images/icon-check.svg) no-repeat;
	background-size: 26px auto;
	background-position: top left;
	padding-left: 35px;
}

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

.security-list-item p{
	margin-bottom: 0;
}

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

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

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

.pricing-header{
	position: relative;
	background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
	border-bottom: 1px solid transparent;
	padding: 30px;
}

.pricing-header h3{
	font-size: 20px;
	color: var(--white-color);
	margin-bottom: 15px;
}

.pricing-header h2{
	font-size: 46px;
	color: var(--white-color);	
	margin-bottom: 15px;
}

.pricing-header h2 sup{
    font-size: 20px;
	top: -10px;
}

.pricing-header h2 sub{
    bottom: 0;
    font-size: 16px;
    font-weight: 400;
	opacity: 80%;
}

.pricing-header p{
	color: var(--white-color);
	opacity: 80%;
	margin-bottom: 0;
}

.pricing-header .icon-box{
	position: absolute;
	top: -14px;
	right: -35px;
}

.pricing-header .icon-box img{
	width: 100%;
	max-width: 100px;
}

.pricing-body{
	padding: 30px;
}

.pricing-list{
	margin-bottom: 40px;
}

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

.pricing-list ul li{
	background-image: url('../images/icon-check.svg');
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 24px auto;
	line-height: 1.5em;
	margin-bottom: 20px;
	padding-left: 35px;
}

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

.pricing-item.highlighted-box{
	background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
}

.pricing-item.highlighted-box .pricing-header{
	background: transparent;
	border-bottom-color: var(--dark-divider-color);
}

.pricing-item.highlighted-box .pricing-list ul li{
	color: var(--white-color);
}

.pricing-item.highlighted-box .pricing-list ul li{
	background-image: url('../images/icon-check-white.svg');
}

.pricing-item.highlighted-box .btn-default.btn-highlighted:after{
    background: 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;
	align-items: center;
	gap: 15px 50px;
}

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

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

/************************************/
/*** 	12. Our Testimonial css   ***/
/************************************/

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

.testimonial-box{
	position: relative;
	background: url(../images/testimonial-bg.jpg) no-repeat;
	background-size: cover;
	background-position: center center;
	border-radius: 30px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 40px 30px;
}

.testimonial-box::before{
	content: '';
    position: absolute;
	top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--primary-color);
	border-radius: 30px;
	opacity: 60%;
    height: 100%;
    width: 100%;
    transition: all 0.4s ease-in-out;
    z-index: 1;
}

.testimonial-video-button,
.testimonial-slider-box{
	position: relative;
	width: calc(50% - 15px);
	z-index: 1;
}

.testimonial-video-button{
	text-align: center;
}

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

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

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

.testimonial-video-button a:after{
	content: '';
	position: absolute;
	top: -30%;
	left: -30%;
	width: 160%;
	height: 160%;
	border: 50px solid var(--divider-color);
	border-radius: 50%;
	transform: scale(0.6);
	z-index: -1;
	animation: border-zooming 1.2s infinite linear;
	animation-delay: .3s;
}

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

.testimonial-video-button a i{
	font-size: 30px;
	color: var(--white-color);
	margin-left: 3px;
}

.testimonial-video-button h3{
	color: var(--white-color);
	font-size: 18px;
	font-weight: 600;
	margin-top: 40px;
	text-transform: capitalize;
}

.testimonial-slider{
	background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
	border-radius: 30px 30px 0 30px;
	padding: 50px;
	overflow: hidden;
	margin-top: -135px;
}

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

.testimonial-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 40px;
}

.testimonial-company-logo img{
	width: 100%;
	max-width: 165px;
	max-height: 40px;
}

.testimonial-quote{
	text-align: end;
}

.testimonial-quote img{
	width: 100%;
	max-width: 30px;
}

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

.testimonial-content p{
	font-size: 18px;
	font-weight: 500;
	color: var(--white-color);
	opacity: 80%;
	margin-bottom: 20px;
}

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

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

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

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

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

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

.author-content h3{
	color: var(--white-color);
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 5px;
}

.author-content p{
	color: var(--white-color);
	opacity: 80%;
	text-transform: capitalize;
	margin: 0;
}

.testimonial-btn{
	position: absolute;
	bottom: 5px;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: right;
	z-index: 1;
}

.testimonial-slider .testimonial-button-next,
.testimonial-slider .testimonial-button-prev{
	position: relative;
	width: 32px;
	height: 32px;
	background: var(--white-color);
	border-radius: 50%;
	transition: all 0.4s ease-in-out;
}

.testimonial-slider .testimonial-button-next{
	margin-left: 20px;
}

.testimonial-slider .testimonial-button-next:hover,
.testimonial-slider .testimonial-button-prev:hover{
	background: var(--primary-color);
}

.testimonial-slider .testimonial-button-next::before,
.testimonial-slider .testimonial-button-prev::before{
	font-family: 'FontAwesome';
	content: '\f061';
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	font-size: 16px;
	color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease-in-out;
}

.testimonial-slider .testimonial-button-prev::before{
	transform: rotate(180deg);
}

.testimonial-slider .testimonial-button-next:hover::before,
.testimonial-slider .testimonial-button-prev:hover::before{
	color: var(--white-color);
}

.testimonial-contact-info{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
	padding: 40px 40px 40px 0;
}

.testimonial-contact-box{
	width: calc(65% - 15px);
	display: flex;
	align-items: center;
}

.testimonial-contact-box .icon-box{
	height: 60px;
	width: 60px;
	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: 20px;
	transition: all 0.4s ease-in-out;
}

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

.testimonial-contact-box .icon-box img{
	width: 100%;
	max-width: 30px;
}

.testimonial-contact-content{
	width: calc(100% - 80px);
}

.testimonial-contact-content p{
	color: var(--white-color);
	font-weight: 500;
	margin: 0;
}

.testimonial-contact-content p a{
	display: inline-block;
	color: inherit;
	text-decoration: underline;
	transition: all 0.4s ease-in-out;
}

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

.testimonial-contact-btn{
	width: calc(35% - 15px);
	text-align: end;
}

/************************************/
/*** 	   13. Our Team css  	  ***/
/************************************/

.our-team{
	background-image: url('../images/our-team-bg.png'), linear-gradient(180deg, var(--primary-color) 70%, transparent 30%); 
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	padding: 100px 0 20px;
}

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

.team-image{
	position: relative;
}

.team-image:before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	transform: scale(0);
    background: linear-gradient(180deg, rgba(85, 202, 225, 0.6) -0.01%, rgba(78, 82, 172, 0.6) 111.29%);
    border-radius: 30px;
	transition: all 0.4s ease-in-out;
    z-index: 1;
}

.team-item:hover .team-image:before{
	transform: scale(1);
}

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

.team-image figure:before{
	content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
	background: linear-gradient(180deg, rgba(85, 202, 225, 0) 63.54%, #4E52AC 110.14%);
	border-radius: 30px;
	transition: all 0.4s ease-in-out;
    z-index: 1;
}

.team-item:hover .team-image figure:before{
	opacity: 0;
}

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

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

.team-social-icon{
	position: absolute;
	top: 50%;
	transform: translateY(0%);
	left: 30px;
	right: 30px;
	opacity: 0;
	transition: all 0.4s ease-in-out;
	z-index: 2;
}

.team-item:hover .team-social-icon{
	transform: translateY(-50%);
	opacity: 1;
}

.team-social-icon ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 15px;
}

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

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

.team-social-icon ul li a i{
    color: var(--white-color);
    font-size: 18px;
}

.team-content{
	position: absolute;
	right: 30px;
	bottom: 30px;
	left: 30px;
	text-align: center;
	z-index: 2;
}

.team-content h3{
	color: var(--white-color);
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 5px;
}

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

.team-content p{
	color: var(--white-color);
	opacity: 80%;
	text-transform: capitalize;
	margin: 0;
}

/************************************/
/*** 	    14. CTA Box css  	  ***/
/************************************/

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

.cta-box{
	background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
	border-radius: 30px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px 70px;
	padding: 25px 25px 25px 60px;
}

.cta-box-content{
	width: calc(64% - 35px);
}

.cta-contact-info{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	z-index: 1;
}

.cta-contact-info:before{
    content: '';
    position: absolute;
    width: 125px;
    height: 100px;
    bottom: 10px;
    right: 0;
    transform: rotateY(180deg);
    background: url(../images/cta-box-arrow.svg) no-repeat;
	background-position: right center;
    background-size: cover;
    animation: ctamovearrow 2s infinite linear alternate;
}

@keyframes ctamovearrow{
	50%{
		right: -30px;
	}
}

.cta-contact-item{
	display: flex;
	align-items: center;
	border-right: 1px solid var(--dark-divider-color);
	margin-right: 30px;
	padding-right: 30px;
}

.cta-contact-item:last-child{
	border: none;
	margin: 0;
	padding: 0;
}

.cta-contact-item .icon-box{
	margin-right: 20px;
}

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

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

.cta-contact-content h3{
	font-size: 20px;
	color: var(--white-color);
	margin-bottom: 5px;
}

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

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

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

.cta-box-image{
	width: calc(36% - 35px);
}

.cta-box-image figure{
	display: block;
	border-radius: 30px;
}

.cta-box-image img{
	width: 100%;
	aspect-ratio: 1 / 0.705;
	object-fit: cover;
	border-radius: 30px;
}

/************************************/
/*** 	   15. Our FAQs css 	  ***/
/************************************/

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

.our-faqs.home-our-faqs{
	background: var(--secondary-color);
}

.faq-content{
	margin-right: 30px;
}

.faq-image figure{
	display: block;
	border-radius: 30px;
}

.faq-image img{
	width: 100%;
	aspect-ratio: 1 / 0.608;
	object-fit: cover;
	border-radius: 30px;
}

.faq-accordion .accordion-item{
	position: relative;
	background: var(--white-color);
    border: 1px solid var(--divider-color);
	border-radius: 20px;
	margin-bottom: 30px;
    padding: 0;
	transition: all 0.3s ease-in-out;
	overflow: hidden;
}

.faq-accordion .accordion-item::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
	border-radius: 20px;
	height: 100%;
	width: 100%;
	z-index: 0;
}

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

.faq-accordion .accordion-header .accordion-button{
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4em;
	background: transparent;
	color: var(--primary-color);
	padding: 26px 50px 26px 30px;
	transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-header .accordion-button:not(.collapsed){
	color: var(--white-color);
   	border-bottom: 1px solid var(--dark-divider-color);
}

.faq-accordion .accordion-header .accordion-button.collapsed{
	background: var(--white-color);
	color: var(--primary-color);
}

.faq-accordion .accordion-item .accordion-button::after, 
.faq-accordion .accordion-item .accordion-button.collapsed::after{
    content: '\f107';
    font-family: 'FontAwesome';
    font-size: 20px;
    font-weight: 900;
	color: var(--primary-color);
    position: absolute;
    right: 30px;
    top: 50%;
	transform: translateY(-50%);
    transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-button:not(.collapsed)::after{
	color: var(--white-color);
    transform: translateY(-50%) rotate(180deg);
}

.faq-accordion .accordion-body{
	position: relative;
	padding: 15px 50px 30px 30px;
	z-index: 1;
}

.faq-accordion .accordion-body p{
    color: var(--white-color);
	opacity: 80%;
	margin: 0;
}

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

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

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

.post-featured-image a{
	display: block;
	border-radius: 30px;
	overflow: hidden;
	cursor: none;
}

.post-featured-image figure:before{
	content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, transparent 58.63%, var(--accent-color) 110.88%);
    z-index: 1;
}

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

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

.post-item-content{
	position: absolute;
	right: 30px;
	bottom: 30px;
	left: 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	z-index: 2;
}

.post-item-body h2{
	font-size: 20px;
	line-height: 1.4em;
	color: var(--white-color);
}

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

.post-item-btn a{
	height: 42px;
	width: 42px;
	border-radius: 50%;
	display: flex;
	background-color: var(--white-color);
	color: var(--accent-color);
	justify-content: center;
	align-items: center;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
}

.post-item-btn a:hover{
	background: var(--primary-color);
	color: var(--white-color);
}

.post-item-btn a i{
	font-size: 20px;
	color: inherit;
}

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

.main-footer{
	background: url(../images/footer-bg.png), linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
	padding: 80px 0 0 0;
}

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

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

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

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

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

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

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

.footer-social-links ul li a i{
	color: var(--white-color);
	font-size: 18px;
	transition: all 0.3s ease-in-out;
}

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

.footer-newsletter-form{
    margin-right: 30px;
}

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

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

.footer-newsletter-form .form-group{
	display: flex;
}

.footer-newsletter-form .form-group .form-control{
	width: calc(100% - 70px);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4em;
	color: var(--text-color);
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 100px;
	outline: none;
	box-shadow: none;
	padding: 15px 20px;
}

.footer-newsletter-form .form-group .form-control::placeholder{
	color: var(--text-color);
}

.footer-newsletter-form .form-group .newsletter-btn{
	background-color: var(--white-color);
	color: var(--primary-color);
	width: 60px;
	height: 60px;
	border: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin-left: 10px;
	transition: all 0.3s ease-in-out;
}

.footer-newsletter-form .form-group .newsletter-btn:hover{
	background-color: var(--primary-color);
	color: var(--white-color);
	transform: rotate(25deg);
}

.footer-newsletter-form .form-group .newsletter-btn i{
	font-size: 30px;
	color: inherit;
	padding-right: 5px;
}

.footer-quick-links{
	margin-left: 30px;
}

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

.footer-links ul li{
	color: var(--white-color);
	text-transform: capitalize;
	line-height: 1.7em;
	margin-bottom: 10px;
}

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

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

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

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

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

.page-header{
	position: relative;
	background-image: url('../images/page-header-bg.jpg');
	background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 400px;
    display: flex;
    align-items: center;
}

.page-header::before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	background: linear-gradient(270deg, rgba(1, 5, 53, 0.28) 43.57%, rgba(1, 5, 53, 0.8) 100%);
    width: 100%;
    height: 100%;
    z-index: 0;
}

.page-header-box{
	position: relative;
	z-index: 1;
	margin-top: 80px;
}

.page-header-box h1{
	display: inline-block;
    color: var(--white-color);
    font-size: 40px;
    font-weight: 800;
    line-height: 1.2em;
    margin-bottom: 10px;
    cursor: none;
}

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

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

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

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

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

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

.our-approach:before{
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(242, 242, 245, 0.6) 99.12%, #F2F2F5 99.38%);
    height: 100%;
    width: 100%;
    z-index: 1;
}

.our-approach-box{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.our-approach-image{
	position: relative;
	z-index: 1;
}

.our-approach-content{
	position: relative;
	margin-right: -110px;
	z-index: 2;
}

.mission-vision-item{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	background: var(--white-color);
	border-radius: 30px;
	padding: 25px 30px;
	box-shadow: 0px 0px 100px 2px #0000000D;
	margin-bottom: 30px;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
}

.mission-vision-item:before{
	content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.mission-vision-item:hover:before{
	top: 0;
	bottom: auto;
    height: 100%;
}

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

.mission-vision-item .icon-box{
	position: relative;
	margin-right: 30px;
	z-index: 1;
}

.mission-vision-item .icon-box img{
	width: 100%;
	max-width: 80px;
	transition: all 0.4s ease-in-out;
}

.mission-vision-item:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.mission-vision-content{
	position: relative;
	width: calc(100% - 110px);
	z-index: 1;
}

.mission-vision-content h3{
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 10px;
	transition: all 0.4s ease-in-out;
}

.mission-vision-content p{
	margin: 0;
	transition: all 0.4s ease-in-out;
}

.mission-vision-item:hover .mission-vision-content h3,
.mission-vision-item:hover .mission-vision-content p{
	color: var(--white-color);
}

.our-approach-image figure{
	display: block;
	border-radius: 30px;
}

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

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

.what-we-do-image{
	position: relative;
	padding: 0 80px 117px 0;
	margin-right: 30px;
}

.what-we-do-img-1 figure,
.what-we-do-img-2 figure{
	display: block;
	border-radius: 30px;
}

.what-we-do-img-1 img,
.what-we-do-img-2 img{
	width: 100%;
	object-fit: cover;	
	border-radius: 30px;
}

.what-we-do-img-1{
	position: relative;
}

.what-we-do-img-1::before{
	content: '';
    display: block;
    position: absolute;
    top: 20px;
    right: auto;
    bottom: auto;
    left: 20px;
    background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
	border-radius: 30px;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.what-we-do-img-1 img{
	aspect-ratio: 1 / 1.01;
}

.what-we-do-img-2{
	position: absolute;
	max-width: 270px;
	right: 0;
	bottom: 0;
	z-index: 1;
}

.what-we-do-img-2 img{
	aspect-ratio: 1 / 0.68;
}

.company-experience-box.what-we-do-circle{
	position: absolute;
	top: 170px;
	right: 0;
	height: 160px;
	width: 160px;
	border-radius: 50%;
	padding: 15px;
	z-index: 1;
}

.company-experience-box.what-we-do-circle h2{
	color: var(--white-color);
	font-size: 40px;
	font-weight: 700;
	margin-bottom: 10px;
}

.company-experience-box.what-we-do-circle p{
	color: var(--white-color);
	text-transform: capitalize;
	line-height: 1.4em;
	margin: 0;
}

.what-we-do-body{
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 40px;
	padding-bottom: 40px;
}

.what-we-do-body ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.what-we-do-body ul li{
	background-image: url(../images/icon-check.svg);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 24px auto;
    line-height: 1.5em;
    margin-bottom: 20px;
    padding-left: 35px;
}

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

.what-we-list{
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
}

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

.what-we-item .icon-box{
	margin-right: 20px;
}

.what-we-item .icon-box img{
	width: 100%;
	max-width: 50px;
}

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

.what-we-item-content h3{
	font-size: 20px;
	line-height: 1.4em;
	text-transform: capitalize;
}

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

.how-it-work-content{
	margin-right: 30px;
}

.work-step-item{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 40px;
}

.work-step-item::before{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translate(30px, 55px);
    border: 1px dashed var(--accent-secondary-color);
    width: 1px;
    height: 100%;
    z-index: -1;
}

.work-step-item:last-child:before{
	display: none;
}

.work-step-item:last-child{
	margin-bottom: 0px;
}

.work-step-item .work-step-no{
	height: 60px;
	width: 60px;
	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: 20px;
	transition: all 0.4s ease-in-out;
}

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

.work-step-no h3{
	color: var(--white-color);
	font-size: 24px;
	font-weight: 700;
}

.work-step-content{
	width: calc(100% - 80px);
}

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

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

.how-it-work-image{
	position: relative;
	padding-left: 80px;
}

.how-it-work-img-1 figure,
.how-it-work-img-2 figure{
	display: block;
}

.how-it-work-img-1 img,
.how-it-work-img-2 img{
	width: 100%;
	object-fit: cover;
}

.how-it-work-img-1 figure{
	border-radius: 30px;
}

.how-it-work-img-1 img{
	aspect-ratio: 1 / 1.16;
}

.how-it-work-img-2{
	position: absolute;
	max-width: 306px;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	border: 10px solid var(--white-color);
	border-radius: 30px;
	overflow: hidden;
	z-index: 1;
}

.how-it-work-img-2 img{
	aspect-ratio: 1 / 1.02;	
}

.our-benefits{
	background-color: var(--secondary-color);
}

.our-benefits .container-fluid{
	padding: 0;
}

.our-benefit-image{
	position: relative;
	height: 100%;
	padding-right: 85px;
	margin-right: 80px;
}

.benefit-img-1,
.benefit-img-1 figure,
.benefit-img-1 img{
	height: 100%;
}

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

.benefit-img-2{
	position: absolute;
	max-width: 354px;
	right: -30px;
	bottom: 40px;
	border: 10px solid var(--white-color);
	border-radius: 30px;
	overflow: hidden;
	z-index: 1;
}

.benefit-img-2 figure{
	display: block;
}

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

.contact-us-circle{
	position: absolute;
	top: 60px;
	right: 0;
	z-index: 1;
}

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

.our-benefit-content{
	padding: 100px 0;
	padding-right: calc(((100vw - 1300px) / 2) + 5px);
}

.our-benefit-body{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-bottom: 40px;
}

.benefit-body-item{
	width: calc(50% - 15px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	background-color: var(--white-color);
	border-radius: 15px;
	padding: 15px 20px;
}

.benefit-body-item .icon-box{
	height: 60px;
    width: 60px;
    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.4s ease-in-out;
}

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

.benefit-body-item .icon-box img{
	width: 100%;
	max-width: 30px;
}

.benefit-body-item-content{
	width: calc(100% - 75px);
}

.benefit-body-item-content h3{
	font-size: 20px;
	line-height: 1.4em;
	text-transform: capitalize;
}

.our-benefit-footer{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
}

.benefit-footer-list{
	width: calc(60% - 15px);
}

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

.benefit-footer-list ul li{
	background-image: url(../images/icon-check.svg);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 24px auto;
    line-height: 1.5em;
    margin-bottom: 20px;
    padding-left: 35px;
}

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

.benefit-footer-btn{
	width: calc(40% - 15px);
}

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

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

.page-services .service-item{
	box-shadow: 0px 0px 100px 2px #0000000D;
}

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

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

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

.page-catagery-list{
	background-color: var(--secondary-color);
    border-radius: 30px;
	padding: 30px;
    margin-bottom: 60px;
	overflow: hidden;
}

.page-catagery-list h3{
    font-size: 20px;
    text-transform: capitalize;
	margin-bottom: 30px;
}

.page-catagery-list ul{
    list-style: none;
    margin: 0;
	padding: 0;
}

.page-catagery-list ul li{
    margin-bottom: 20px;
}

.page-catagery-list ul li:last-child{
    margin: 0;
}

.page-catagery-list ul li a{
	position: relative;
    display: block;
	line-height: 1.5em;
    text-transform: capitalize;
    color: var(--text-color);
	background-color: var(--white-color);
	border-radius: 10px;
	padding: 15px 50px 15px 15px;
	overflow: hidden;
    transition: all 0.4s ease-in-out;
	z-index: 1;
}

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

.page-catagery-list ul li a::before{
    font-family: 'FontAwesome';
    content: '\f0a9';
    position: absolute;
	font-size: 24px;
	color: var(--accent-color);
    top: 50%;
    right: 15px;
    width: 24px;
    height: 24px;
	transform: translateY(-50%);
    transition: all 0.4s ease-in-out;
}

.page-catagery-list ul li:hover a::before{
	color: var(--white-color);
}

.page-catagery-list ul li a::after{
	content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
    transition: all 0.4s ease-in-out;
    z-index: -1;
}

.page-catagery-list ul li:hover a::after{
	top: 0;
	height: 100%;
}

.sidebar-cta-box{
	background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
	border-radius: 30px;
	padding: 40px;
}

.sidebar-cta-logo{
	margin-bottom: 20px;
}

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

.sidebar-cta-content p{
	color: var(--white-color);
	opacity: 80%;
	margin-bottom: 0;
}

.sidebar-cta-contact{
	position: relative;
	display: flex;
	align-items: center;
	border-top: 1px solid var(--dark-divider-color);
	margin-top: 30px;
	padding-top: 30px;
	z-index: 1;
}

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

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

.sidebar-cta-contact .icon-box:before{
	content: '';
	position: absolute;
	top: -33%;
	left: -33%;
	width: 160%;
	height: 160%;
	border: 35px solid var(--divider-color);
	border-radius: 50%;
	transform: scale(0.6);
	z-index: -1;
	animation: border-zooming 1.2s infinite linear;
}

.sidebar-cta-contact .icon-box:after{
	content: '';
	position: absolute;
	top: -33%;
	left: -33%;
	width: 160%;
	height: 160%;
	border: 35px solid var(--divider-color);
	border-radius: 50%;
	transform: scale(0.6);
	z-index: -1;
	animation: border-zooming 1.2s infinite linear;
	animation-delay: .3s;
}

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

.sidebar-cta-contact-content{
	width: calc(100% - 72px);
}

.sidebar-cta-contact-content h3{
	font-size: 20px;
	color: var(--white-color);
	margin-bottom: 10px;
}

.sidebar-cta-contact-content h3 a{
	color: inherit;
	transition: all 0.4s ease-in-out;
}

.sidebar-cta-contact-content h3 a:hover{
	color: var(--primary-color);
	text-decoration-color: var(--primary-color);
}

.sidebar-cta-contact-content p{
	color: var(--white-color);
	opacity: 80%;
	margin-bottom: 0;
}

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

.page-single-slider .swiper-wrapper{
	cursor: none;
}

.page-single-slider .swiper-slide figure{
	display: block;
	overflow: hidden;
	border-radius: 30px;
}

.page-single-slider .swiper-slide figure::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(180deg, rgba(1, 5, 53, 0) 80.06%, var(--primary-color) 100%);
	width: 100%;
	height: 100%;
}

.page-single-slider .swiper-slide img{
	width: 100%;
    aspect-ratio: 1 / 0.66;
    object-fit: cover;
	border-radius: 30px;
}

.page-single-slider .page-single-pagination{
    position: absolute;
    bottom: 20px;
    text-align: center;
    z-index: 1;
}

.page-single-slider .page-single-pagination .swiper-pagination-bullet{
	position: relative;
    height: 12px;
    width: 12px;
    background: var(--white-color);
    opacity: 1;
    margin: 0 8px;
}

.page-single-slider .page-single-pagination .swiper-pagination-bullet:before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid var(--white-color);
    height: 0;
    width: 0;
    border-radius: 50%;
	transition: all 0.4s ease-in-out;
}

.page-single-slider .page-single-pagination .swiper-pagination-bullet-active:before{
	height: 24px;
	width: 24px;
}

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

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

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

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

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

.service-entry ul li{
    background: url(../images/icon-check.svg) no-repeat;
    background-position: top left;
    background-size: 24px auto;
    line-height: 1.5em;
	text-transform: capitalize;
    margin-bottom: 20px;
    padding-left: 30px;
}

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

.service-why-choose-box,
.service-entry-feature-box{
	margin-top: 60px;
}

.our-benefit-body.service-why-choose-list{
	margin: 40px 0;
}

.our-benefit-body.service-why-choose-list .benefit-body-item{
	background: var(--secondary-color);
	padding: 20px;
}

.service-feature-list{
	display: flex;
	gap: 30px 50px;
	flex-wrap: wrap;
	margin: 40px 0;
}

.service-feature-item{
	position: relative;
	width: calc(33.33% - 33.33px);
}

.service-feature-item::before{
	content: '';
    position: absolute;
    top: 50%;
    right: -25px;
    transform: translateY(-50%);
    background-color: var(--secondary-color);
    height: 85%;
    width: 1px;
}

.service-feature-item:nth-child(3n + 3):before,
.service-feature-item:last-child:before{
	display: none;
}

.service-feature-box{
	display: flex;
	align-items: center;
	margin-bottom: 15px;
}

.service-feature-box .icon-box{
	margin-right: 15px;
}

.service-feature-box .icon-box img{
	width: 100%;
	max-width: 60px;
}

.service-feature-title{
	width: calc(100% - 75px);
}

.service-feature-title h3{
	font-size: 20px;
	text-transform: capitalize;
}

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

.service-entry-image-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	align-items: center;
}

.service-entry-image{
	width: calc(52% - 15px);
}

.service-entry-list-content{
	width: calc(48% - 15px);
}

.service-entry-image figure{
	display: block;
	border-radius: 30px;
}

.service-entry-image img{
	width: 100%;
	aspect-ratio: 1 / 0.823;
	object-fit: cover;
	border-radius: 30px;
}

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

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

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

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

.page-pagination ul li a,
.page-pagination ul li span{
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    background: var(--secondary-color);
    color: var(--primary-color);
	border-radius: 10px;
    width: 40px;
    height: 40px;
    margin: 0 5px;
    font-weight: 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(--primary-color);
    color: var(--white-color);
}

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

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

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

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

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

.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: 700;
	line-height: 1.2em;
	margin: 0 0 0.435em;
}

.post-entry h1{
	font-size: 68px;
}

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

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

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

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

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

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

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

.post-entry p strong{
	color: var(--primary-color);
	font-size: 20px;
	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: 18px;
    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(--primary-color);
	background-repeat: no-repeat;
	background-position: 35px 25px;
    background-size: 55px;
	border-radius: 30px;
    padding: 30px 30px 30px 100px;
    margin-bottom: 30px;
}

.post-entry blockquote p{
	font-size: 22px;
	font-weight: 600;
	line-height: 1.4em;
	color: var(--white-color);
}

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

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

.post-tags .tag-links a{
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    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: 10px;
    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(--white-color);
	border-radius: 10px;
    width: 38px;
    height: 38px;
    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: 100px 0 70px;
}

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

.page-projects .project-item .project-image a,
.page-projects .project-item .project-image figure{
	border-radius: 30px;
	cursor: none;
}

.page-projects .project-item .project-image figure::before{
	background: linear-gradient(180deg, rgba(85, 202, 225, 0) 58.63%, var(--accent-color) 110.88%);
	height: 100%;
}

.page-projects .project-item .project-image img{
	aspect-ratio: 1 / 0.99;
}

.page-projects .project-item .project-content{
	transform: translateY(0px);
	opacity: 1;
    visibility: visible;
}

/************************************/
/*** 	 24. Project single css	  ***/
/************************************/

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

.project-detail-list{
	background: var(--secondary-color);
	border-radius: 30px;
	padding: 30px;
	margin-bottom: 60px;
}

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

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

.project-detail-item{
	display: flex;
	align-items: center;
	background: var(--white-color);
	border-radius: 10px;
	padding: 15px;
	margin-bottom: 25px;
}

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

.project-detail-item .icon-box{
	height: 60px;
	width: 60px;
	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: 20px;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
}

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

.project-detail-item .icon-box img{
	width: 100%;
	max-width: 30px;
}

.project-detail-content{
	width: calc(100% - 80px);
}

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

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

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

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

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

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

.project-entry h3{
	font-size: 20px;
	margin-bottom: 20px;
}

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

.project-entry ul li{
	width: 100%;
    background: url(../images/icon-check.svg) no-repeat;
    background-position: top left;
    background-size: 24px auto;
    line-height: 1.5em;
    padding-left: 30px;
}

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

.project-video-list-box{
	display: flex;
	flex-wrap: wrap;
	gap: 0 30px;
	align-items: center;
	margin-top: 40px;
}

.project-video-content,
.project-video-box{
	width: calc(50% - 15px);
}

.project-video-image figure{
	display: block;
	border-radius: 30px;
}

.project-video-image figure::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--primary-color);
	opacity: 30%;
	z-index: 0;
}

.project-video-image img{
	width: 100%;
	aspect-ratio: 1 / 0.856;
	object-fit: cover;
	border-radius: 30px;
}

.project-video-box{
	position: relative;
}

.project-video-box .testimonial-video-button{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.project-scope-box ul li{
	width: calc(50% - 15px);
}

.project-entry-images{
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	margin: 40px 0;
}

.project-entry-image{
	width: calc(50% - 15px);
}

.project-entry-image figure{
	display: block;
	border-radius: 30px;
}

.project-entry-image img{
	width: 100%;
	aspect-ratio: 1 / 0.7;
	object-fit: cover;
	border-radius: 30px;
}

.what-we-list.project-scope-list .what-we-item{
	align-items: start;
}

.what-we-list.project-scope-list .what-we-item .icon-box img{
	max-width: 60px;
}

.what-we-list.project-scope-list .what-we-item .what-we-item-content h3{
	margin-bottom: 10px;
}

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

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

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

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

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

.team-singe-image figure{
	display: block;
	border-radius: 30px;
}

.team-singe-image img{
	width: 100%;
	aspect-ratio: 1 / 1.236;
	object-fit: cover;
	border-radius: 30px;
}

.team-detail-box{
	background: var(--secondary-color);
	border-radius: 30px;
	padding: 30px;
}

.team-detail-content{
	margin-bottom: 30px;
}

.team-detail-content h3{
	font-size: 20px;
	margin-bottom: 20px;
}

.team-detail-content p{
	margin-bottom: 0;
}

.team-detail-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.team-detail-list li{
	position: relative;
	font-size: 20px;
	font-weight: 600;
	color: var(--primary-color);
	background: var(--white-color);
	display: flex;
	align-items: center;
	border-radius: 10px;
	margin-bottom: 25px;
	padding: 15px;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.team-detail-list li:last-child{
	margin-bottom: 0;
}

.team-detail-list li:hover{
	color: var(--white-color);
}

.team-detail-list ul li::before{
	content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
    transition: all 0.4s ease-in-out;
    z-index: -1;
}

.team-detail-list ul li:hover::before{
	top: 0;
	height: 100%;
}

.team-detail-list li a{
	width: 100%;
	color: inherit;
	display: flex;
	align-items: center;
}

.team-detail-list li img{
	width: 100%;
	max-width: 30px;
	margin-right: 20px;
	transition: all 0.4s ease-in-out;
}

.team-detail-list li:hover img{
	filter: brightness(0) invert(1);
}

.team-member-info .section-title p{
	margin: 0 0 5px;
}

.team-member-detail{
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 40px;
	padding-bottom: 40px;
}

.team-member-detail p{
	margin-bottom: 20px;
}

.team-member-detail p:last-child{
	margin-bottom: 0;
}

.member-social-list{
    display: flex;
    align-items: center;
    gap: 20px;
}

.member-social-list span{
    font-size: 20px;
    font-weight: 600;
	color: var(--primary-color);
}

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

.member-social-list ul li{
    display: inline-block;
    margin-right: 15px;
}

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

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

.member-social-list ul li a i{
    color: var(--white-color);
    font-size: 18px;
}

.team-skills-box,
.team-experience-box,
.team-single-form{
	margin-top: 60px;
}

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

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

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

.skills-progress-bar .skill-data .skill-title{
	text-transform: capitalize;
}

.skills-progress-bar .skill-data .skill-no{
	color: var(--primary-color);
}

.skills-progress-bar .skillbar .skill-progress{
	position: relative;
	width: 100%;
	height: 16px;
	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(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
	border-radius: 100px;
}

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

.team-single-list ul li{
	width: calc(50% - 15px);
    background: url(../images/icon-check.svg) no-repeat;
    background-position: top left;
    background-size: 24px auto;
    line-height: 1.5em;
    padding-left: 30px;
}

.member-contact-form .form-control{
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5em;
	color: var(--text-color);
	background: transparent;
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	padding: 17px 20px;
	box-shadow: none;
	outline: none;
}

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

/************************************/
/*** 	 27. Pricing Page css	  ***/
/************************************/

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

/************************************/
/*** 	28. Testimonial Page css  ***/
/************************************/

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

.page-testimonials .testimonial-item{
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 30px;
	padding: 40px;
	box-shadow: 0px 0px 100px 2px #0000000D;
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.page-testimonials .testimonial-header{
	margin-bottom: 30px;
}

.page-testimonials .testimonial-content p{
	color: var(--text-color);
	font-size: 16px;
}

.page-testimonials .testimonial-body .author-content h3{
	color: var(--primary-color);
}

.page-testimonials .testimonial-body .author-content p{
	color: var(--text-color);
}

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

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

.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.81;
	object-fit: cover;
	border-radius: 20px;
}

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

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

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

.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(--primary-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: 50%;
    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(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
	color: var(--white-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.81;
	object-fit: cover;
	border-radius: 20px;
}

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

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

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

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

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

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

.page-contact-us .section-row .section-title{
	max-width: 600px;
}

.page-contact-box{
	position: relative;
	padding: 0 120px 120px 120px;
	background: url('../images/contact-box-bg.jpg') no-repeat;
	background-position: center center;
	background-size: cover;
	border: 1px solid var(--divider-color);
	box-shadow: 0px 0px 100px 2px #0000000D;
	border-radius: 30px;
	margin-top: 150px;
}

.page-contact-box:before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--primary-color);
	opacity: 80%;
	border-radius: 30px;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.contact-info-list{
	position: relative;
	background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
	border-radius: 30px;
	display: flex;
	flex-wrap: wrap;
	gap: 30px 100px;
	padding: 60px;
	margin: -150px 0 80px 0;
	z-index: 1;
}

.contact-info-item{
	position: relative;
	width: calc(33.33% - 66.66px);
}

.contact-info-item:before{
	content: '';
    position: absolute;
    top: 50%;
    right: -50px;
    bottom: 0;
    left: auto;
    transform: translateY(-50%);
    background: var(--dark-divider-color);
    width: 1px;
    height: 85%;
}

.contact-info-item:last-child::before,
.contact-info-item:nth-child(3n + 3)::before{
	display: none;
}

.contact-info-item .icon-box{
	position: relative;
	height: 60px;
	width: 60px;
	background: var(--white-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30px;
}

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

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

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

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

.contact-info-content h3{
	color: var(--white-color);
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 20px;
}

.contact-info-content p{
	color: var(--white-color);
	opacity: 80%;
	margin: 0;
}

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

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

.contact-us-form{
	position: relative;
	text-align: center;
	z-index: 1;
}

.member-contact-form.contact-form .form-control{
	background: var(--white-color);
}

.member-contact-form.contact-form select.form-control{
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 20px center;
	background-size: 16px 12px;
	padding-right: 48px;
}

.member-contact-form.contact-form select.form-control:disabled{
	background-color: #e9ecef;
	border-color: #ced4da;
	color: #6c757d;
	cursor: not-allowed;
	opacity: 1;
}

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

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

.google-map-iframe iframe{
	filter: grayscale(100%);
	transition: all 0.4s ease-in-out;
}

.google-map-iframe iframe:hover{
	filter: grayscale(0%);
}

/************************************/
/*** 	  33. 404 Page css  	  ***/
/************************************/

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

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

.error-page-image img{
	width: 100%;
	max-width: 50%;
}

 .error-page-content{
	text-align: center;
}

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

/************************************/
/***      34. Responsive css      ***/
/************************************/

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

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

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

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

	.topbar-info-text p{
		font-size: 14px;
	}

	.topbar-contact-info{
		margin-right: 15px;
		padding-right: 15px;
	}

	.topbar-contact-info ul li{
		font-size: 14px;
		margin-right: 15px;
	}

	.topbar-contact-info ul li::before{
		right: -12px;
		font-size: 14px;
	}

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

	.topbar-social-links ul li a i{
		font-size: 16px;
		margin-right: 5px;
	}

	.navbar{
		padding: 15px 0;
	}

	.main-menu ul li.highlighted-menu{
		display: block;
	}
	
	.slicknav_nav li,
	.slicknav_nav ul{
        display: block;
    }

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

	.header-btn{
		display: none;
	}

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

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

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

	.section-title h3{
		position: relative;
		display: inline-block;
		font-size: 15px;
		line-height: normal;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		color: var(--primary-color);
		padding-left: 30px;
		margin-bottom: 15px;
	}

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

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

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

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

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

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

	.hero{
		padding: 100px 0;
	}

	.hero.hero-video{
		padding: 120px 0;
	}

	.hero.hero-slider-layout .hero-slide{
		padding: 120px 0;
	}
	
	.hero.hero-slider-layout .hero-pagination{
		bottom: 40px;
		padding-left: 15px;
	}

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

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

	.hero-content-footer{
		margin-top: 40px;
	}

	.hero-list ul li{
		background-size: 22px auto;
		background-position: left top 2px;
		margin-bottom: 15px;
		padding: 0 0 15px 30px;
	}

	.client-image{
		width: 50px;
		height: 50px;
	}

	.client-image img{
		max-width: 50px;
	}
	
	.client-image.client-counter h3{
		font-size: 20px;
	}

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

	.about-us-image{
		margin-right: 0;
		margin-bottom: 30px;
	}

	.about-img-1 figure,
	.about-img-2 figure,
	.about-img-3 figure,
	.about-img-1 img,
	.about-img-2 img,
	.about-img-3 img{
		border-radius: 20px;
	}

	.about-img-1 img{
        aspect-ratio: 1 / 1.58;
    }

	.about-img-2 img,
	.about-img-3 img{
		aspect-ratio: 1 / 0.92;
	}

	.get-free-security-circle img{
		max-width: 140px;
	}

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

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

	.about-footer-list ul li{
		background-size: 20px auto;
		background-position: left top 2px;
		padding-left: 25px;
		margin-bottom: 15px;
	}
	.about-contact-btn{
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.about-contact-btn .icon-box{
		height: 40px;
		width: 40px;
	}

	.about-contact-btn .icon-box img{
		max-width: 22px;
	}

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

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

	.service-item{
		border-radius: 20px;
		padding: 30px;
	}

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

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

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

	.our-feature-images{
		margin-bottom: 30px;
	}

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

	.feature-image img{
		aspect-ratio: 1 / 0.48;
		border-radius: 20px;
	}

	.company-experience-info .feature-image img{
		aspect-ratio: 1 / 0.54;
	}

	.company-experience-box{
		border-radius: 20px;
		padding: 25px 20px;
	}

	.company-experience-content{
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.company-experience-content h2{
		font-size: 45px;
		margin-bottom: 5px;
	}

	.our-feature-content{
		margin: 0;
	}

	.ferature-list-item{
		margin-bottom: 30px;
	}

	.ferature-list-item .icon-box{
		height: 50px;
    	width: 50px;
		margin-right: 15px;
	}

	.ferature-list-item .icon-box img{
		max-width: 25px;
	}

	.ferature-list-content{
		width: calc(100% - 65px);
	}

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

	.projects-list{
		border-radius: 20px;
	}

	.project-item{
		width: 50%;
	}

	.project-item:nth-child(-4n + 4){
		border-radius: 0;
	}

	.project-item:nth-child(-2n + 2){
		border-radius: 0 20px 0 0;
	}

	.project-item:last-child{
		border-radius: 0 0 20px 0;
	}

	.project-image img{
		aspect-ratio: 1 / 1.05;
	}

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

	.section-footer-text{
		max-width: 100%;
		margin: 30px auto 0;
	}

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

	.why-choose-image{
		margin-right: 0;
		margin-bottom: 30px;
	}

	.why-choose-image figure,
	.why-choose-image img{
		border-radius: 20px;
	}

	.why-choose-image img{
		aspect-ratio: 1 / 0.75;
	}

	.why-choose-item{
		padding: 20px 25px;
		border-radius: 20px;
		margin-bottom: 30px;
	}

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

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

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

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

	.why-choose-counter-list{
		margin-top: 40px;
		padding-top: 40px;
	}

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

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

	.why-choose-counter-content p{
		font-size: 16px;
	}

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

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

	.security-content-item{
		margin-bottom: 30px;
	}

	.security-content-item h3{
		margin-bottom: 10px;
	}

	.our-security-image-content{
		display: flex;
		flex-direction: column;
	}

	.security-image{
		margin: 30px 0 0 0;
	}

	.security-image figure{
		border-radius: 20px;
	}

	.security-image img{
		aspect-ratio: 1 / 0.45;
		border-radius: 20px;
	}

	.security-list{
		margin-top: 40px;
    	padding-top: 40px;
	}

	.security-list-item{
		width: calc(50% - 15px);
		background-size: 20px auto;
		background-position: top 2px left;
		padding-left: 30px;
	}

	.security-list-item h3{
		margin-bottom: 10px;
	}

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

	.pricing-item{
		border-radius: 20px;
	}

	.pricing-header{
		padding: 20px;
	}

	.pricing-header h3{
		margin-bottom: 10px;
	}
	
	.pricing-header h2{
		font-size: 36px;
		margin-bottom: 10px;
	}

	.pricing-header h2 sup{
		font-size: 18px;
		top: -7px;
	}

	.pricing-header .icon-box{
		top: -10px;
		right: -25px;
	}

	.pricing-header .icon-box img{
		max-width: 80px;
	}

	.pricing-body{
		padding: 20px;
	}

	.pricing-list{
		margin-bottom: 30px;
	}

	.pricing-list ul li{
		background-size: 20px auto;
		background-position: top 2px left;
		margin-bottom: 15px;
		padding-left: 25px;
	}

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

	.pricing-benefit-list ul{
		gap: 15px 30px;
	}

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

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

	.testimonial-box,
	.testimonial-box::before{
		border-radius: 20px;
	}

	.testimonial-box{
		padding: 60px 30px 40px;
	}

	.testimonial-video-button,
	.testimonial-slider-box{
		width: 100%;
	}

	.testimonial-video-button a{
		width: 60px;
		height: 60px;
	}

	.testimonial-video-button a:before,
	.testimonial-video-button a:after{
		top: -33%;
		left: -33%;
	}

	.testimonial-video-button a i{
		font-size: 26px;
	}

	.testimonial-slider{
		margin-top: 0;
		padding: 40px;
		border-radius: 20px;
	}

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

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

	.testimonial-content p{
		font-size: 16px;
		margin-bottom: 15px;
	}

	.testimonial-contact-info{
		margin-top: 30px;
		padding: 0;
	}

	.testimonial-contact-box .icon-box{
		height: 50px;
		width: 50px;
		margin-right: 15px;
	}

	.testimonial-contact-box .icon-box img{
		max-width: 26px;
	}

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

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

	.team-image:before,
	.team-image a,
	.team-image a figure,
	.team-image figure:before{
		border-radius: 20px;
	}

	.team-image a img{
		aspect-ratio: 1 / 1.1;
	}

	.team-social-icon{
		left: 20px;
		right: 20px;
	}

	.team-content{
		right: 20px;
		bottom: 20px;
		left: 20px;
	}

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

	.cta-box{
		border-radius: 20px;
		padding: 30px;
	}

	.cta-box-content,
	.cta-box-image{
		width: 100%;
	}

	.cta-contact-item .icon-box{
		margin-right: 15px;
	}

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

	.cta-contact-content{
		width: calc(100% - 55px);
	}

	.cta-contact-info:before{
		width: 110px;
		height: 80px;
	}

	.cta-box-image figure{
		border-radius: 20px;
	}

	.cta-box-image img{
        aspect-ratio: 1 / 0.55;
        border-radius: 20px;
    }

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

	.faq-content{
		margin-right: 0;
		margin-bottom: 30px;
	}

	.faq-image figure,
	.faq-image img{
		border-radius: 20px;
	}

	.faq-accordion .accordion-item::before,
	.faq-accordion .accordion-item{
		border-radius: 10px;
	}

	.faq-accordion .accordion-header .accordion-button{
		padding: 20px 45px 20px 20px;
	}

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

	.faq-accordion .accordion-body{
		padding: 15px 45px 20px 20px;
	}

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

	.post-featured-image a{
		border-radius: 20px;
	}

	.post-featured-image img{
		aspect-ratio: 1 / 0.85;
	}

	.post-item-content{
		right: 20px;
		bottom: 20px;
		left: 20px;
	}

	.post-item-btn a{
		height: 36px;
		width: 36px;
	}

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

	.footer-header{
		margin-bottom: 40px;
		padding-bottom: 40px;
	}

	.footer-logo img{
		max-width: 183px;
	}

	.footer-newsletter-form{
		margin: 0 0 30px 0;
	}

	.footer-quick-links,
	.footer-links{
		margin: 0 0 30px 0;
	}

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

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

	.footer-newsletter-form .form-group .form-control{
		width: calc(100% - 60px);
		padding: 10px 20px;
	}

	.footer-newsletter-form .form-group .newsletter-btn{
		width: 50px;
		height: 50px;
	}

	.footer-newsletter-form .form-group .newsletter-btn i{
		font-size: 24px;
	}

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

	.page-header{
		padding: 80px 0;
	}
	
	.page-header-box h1{
		font-size: 50px;
	}

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

	.our-approach-content{
		margin-right: 0;
		margin-bottom: 30px;
	}

	.mission-vision-item{
		padding: 20px;
		border-radius: 20px;
	}

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

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

	.mission-vision-content{
		width: calc(100% - 80px);
	}

	.mission-vision-content h3{
		margin-bottom: 5px;
	}

	.our-approach-image figure,
	.our-approach-image img{
		border-radius: 20px;
	}

	.our-approach-image img{
		aspect-ratio: 1 / 0.7;
	}

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

	.what-we-do-image{
		max-width: 80%;
		margin: 0 auto;
		padding: 0 80px 90px 0;
		margin-bottom: 30px;
	}

	.what-we-do-img-1 figure,
	.what-we-do-img-2 figure,
	.what-we-do-img-1 img,
	.what-we-do-img-2 img{
		border-radius: 20px;
	}

	.what-we-do-img-1::before{
		border-radius: 20px;
	}

	.company-experience-box.what-we-do-circle{
		width: 140px;
		height: 140px;
		top: 100px;
	}

	.company-experience-box.what-we-do-circle h2{
		font-size: 32px;
	}

	.company-experience-box.what-we-do-circle p{
		font-size: 14px;
	}

	.what-we-do-body{
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

	.what-we-list{
		gap: 20px;
	}

	.what-we-item{
		width: calc(50% - 10px);
	}

	.what-we-do-body ul li{
		background-size: 20px auto;
		background-position: left top 2px;
		padding-left: 25px;
		margin-bottom: 15px;
	}

	.what-we-item .icon-box{
		margin-right: 15px;
	}

	.what-we-item .icon-box img{
		max-width: 40px;
	}

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

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

	.how-it-work-content{
		margin-right: 0;
		margin-bottom: 30px;
	}

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

	.work-step-item .work-step-no{
		width: 50px;
		height: 50px;
		margin-right: 15px;
	}

	.work-step-no h3{
		font-size: 22px;
	}

	.work-step-item::before{
		transform: translate(25px, 45px);
	}

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

	.work-step-content h3{
		margin-bottom: 10px;
	}

	.how-it-work-img-1 img{
		aspect-ratio: 1 / 0.85;
	}

	.how-it-work-img-1 figure,
	.how-it-work-img-1 img,
	.how-it-work-img-2{
		border-radius: 20px;
	}

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

	.our-benefit-image{
		height: auto;
		margin: 0 15px;
		margin-bottom: 30px;
	}

	.benefit-img-1,
	.benefit-img-1 figure,
	.benefit-img-1 img{
		height: auto;
		border-radius: 20px;
	}
	
	.benefit-img-1 img{
		aspect-ratio: 1 / 0.98;
	}

	.benefit-img-2{
		max-width: 280px;
		border-radius: 20px;
		right: 0;
	}

	.contact-us-circle{
		top: 40px;
		right: 15px;
	}

	.contact-us-circle img{
		max-width: 140px;
	}

	.our-benefit-content{
		padding: 0 15px;
	}

	.our-benefit-body{
		gap: 20px;
		margin-bottom: 30px;
	}

	.benefit-body-item{
		width: calc(50% - 10px);
		padding: 12px 15px;
	}

	.benefit-body-item .icon-box{
		width: 50px;
		height: 50px;
		margin-right: 10px;
	}

	.benefit-body-item .icon-box img{
		max-width: 25px;
	}

	.benefit-body-item-content{
		width: calc(100% - 60px);
	}

	.benefit-footer-btn,
	.benefit-footer-list{
		width: 100%;
	}

	.benefit-footer-list ul li{
		background-size: 20px auto;
		background-position: left top 2px;
		padding-left: 25px;
		margin-bottom: 10px;
	}

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

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

	.page-single-sidebar{
		position: initial;
		margin: 0 0 30px 0;
	}

	.page-catagery-list{
		border-radius: 20px;
		margin-bottom: 30px;
	}

	.page-catagery-list h3{
		margin-bottom: 20px;
	}

	.page-catagery-list ul li a{
		padding: 12px 40px 12px 15px;
	}

	.page-catagery-list ul li a::before{
		font-size: 22px;
		width: 22px;
		height: 22px;
	}

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

	.sidebar-cta-logo{
		margin-bottom: 15px;
	}

	.sidebar-cta-logo img{
		max-width: 183px;
	}

	.sidebar-cta-contact{
		margin-top: 20px;
		padding-top: 20px;
	}

	.page-single-slider{
		margin-bottom: 30px;
	}

	.page-single-slider .swiper-slide figure{
		border-radius: 20px;
	}

	.page-single-slider .swiper-slide img{
		aspect-ratio: 1 / 0.57;
		border-radius: 20px;
	}

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

	.service-entry h2{
		font-size: 36px;
		margin-bottom: 15px;
	}

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

	.service-entry ul li{
		background-size: 20px auto;
		background-position: top 2px left;
        margin-bottom: 15px;
        padding-left: 25px;
	}

	.service-why-choose-box,
	.service-entry-feature-box{
		margin-top: 30px;
	}

	.our-benefit-body.service-why-choose-list{
		margin: 30px 0;
	}

	.our-benefit-body.service-why-choose-list .benefit-body-item{
		padding: 15px;
	}

	.service-feature-list{
		gap: 30px;
		margin: 30px 0;
	}

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

	.service-feature-item::before{
		right: -15px;
	}

	.service-feature-box .icon-box{
		margin-right: 10px;
	}

	.service-feature-box .icon-box img{
		max-width: 45px;
	}

	.service-feature-title{
		width: calc(100% - 55px);
	}

	.service-entry-image figure{
		border-radius: 20px;
	}

	.service-entry-image img{
		border-radius: 20px;
	}

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

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

	.page-single-post{
		padding: 50px 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.417em;
	}
	
	.post-entry h2{
		font-size: 36px;
	}
	
	.post-entry p{
		margin-bottom: 15px;
	}
	
	.post-entry ul li{
		font-size: 16px;
		margin-bottom: 10px;
	}
	
	.post-entry blockquote{
		background-position: 25px 25px;
		background-size: 50px;
		padding: 25px 25px 25px 85px;
		border-radius: 20px;
		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: 50px 0 20px;
	}

	.page-projects .project-item .project-image a,
	.page-projects .project-item .project-image figure{
		border-radius: 20px;
	}

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

	.project-detail-list{
		border-radius: 20px;
		margin-bottom: 30px;
	}

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

	.project-detail-item .icon-box{
		height: 50px;
		width: 50px;
		margin-right: 15px;
	}

	.project-detail-item .icon-box img{
		max-width: 25px;
	}

	.project-detail-content{
		width: calc(100% - 65px);
	}

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

	.project-entry h2{
		font-size: 36px;
		margin-bottom: 15px;
	}

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

	.project-challenge-box,
	.project-scope-box{
		margin-top: 30px;
	}

	.project-entry h3{
		margin-bottom: 15px;
	}

	.project-entry ul{
		gap: 15px 20px;
	}

	.project-entry ul li{
		background-position: top 2px left;
		background-size: 20px auto;
		padding-left: 25px;
	}

	.project-video-list-box{
		margin-top: 30px;
	}

	.project-video-image figure,
	.project-video-image img{
		border-radius: 20px;
	}

	.project-scope-box ul li{
		width: calc(50% - 10px);
	}

	.project-entry-images{
		margin: 30px 0;
	}

	.project-entry-image figure{
		border-radius: 20px;
	}

	.project-entry-image img{
		aspect-ratio: 1 / 0.65;
		border-radius: 20px;
	}

	.what-we-list.project-scope-list .what-we-item .icon-box img{
		max-width: 50px;
	}

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

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

	.team-singe-image{
		margin-bottom: 30px;
	}

	.team-singe-image figure{
		border-radius: 20px;
	}

	.team-singe-image img{
		aspect-ratio: 1 / 0.8;
		border-radius: 20px;
	}

	.team-detail-box{
		border-radius: 20px;
		padding: 20px;
	}

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

	.team-detail-content h3{
		margin-bottom: 10px;
	}

	.team-detail-list li{
		margin-bottom: 20px;
		font-size: 18px;
		padding: 10px;
	}

	.team-detail-list li img{
		max-width: 26px;
		margin-right: 15px;
	}

	.team-member-detail{
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

	.team-member-detail p{
		margin-bottom: 15px;
	}

	.team-skills-box,
	.team-experience-box,
	.team-single-form{
		margin-top: 30px;
	}

	.team-single-list ul{
		gap: 20px;
	}

	.team-single-list ul li{
		width: calc(50% - 10px);
		background-size: 22px auto;
		padding-left: 25px;
	}

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

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

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

	.page-testimonials .testimonial-item{
		border-radius: 20px;
		padding: 30px;
	}

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

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

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

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

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

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

	.page-contact-us .section-row .section-title{
		max-width: 100%;
	}

	.page-contact-box{
		padding: 0 30px 60px 30px;
		margin-top: 90px;
		border-radius: 20px;
	}

	.page-contact-box:before{
		border-radius: 20px;
	}

	.contact-info-list{
		gap: 20px;
		border-radius: 20px;
		padding: 20px;
		margin: -90px 0 30px 0;
	}

	.contact-info-item{
		width: calc(33.33% - 13.33px);
	}

	.contact-info-item:before{
		right: -10px;
	}

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

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

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

	.contact-info-content p{
		font-size: 14px;
	}

	.google-map-iframe,
	.google-map-iframe iframe{
		height: 500px;
	}

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

	.error-page-image img{
		max-width: 80%;
	}

	.error-page-content .section-title{
		margin-bottom: 15px;
	}
}

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

	.topbar-info-text{
		display: none;
	}

	.topbar-links{
		justify-content: center;
	}

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

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

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

	.hero-content-body{
		gap: 20px;
		justify-content: space-between;
	}

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

	.about-img-1{
		margin-top: 50px;
	}

	.about-img-2{
		margin-bottom: 20px;
	}

    .get-free-security-circle img{
        max-width: 100px;
    }

	.about-us-body{
		align-items: inherit;
		border-radius: 20px;
		margin-left: 0px;
		padding-right: 0px;
		overflow: hidden;
	}

	.about-us-body-img{
		display: block;
		width: auto;
		height: auto;
		clip-path: none;
		margin-right: 0px;
		margin-left: 0;
	}

	.about-us-body-img figure{
		width: 100%;
		height: 100%;
		clip-path: none;
	}

	.about-us-body-img img{
		width: 130px;
		height: 100%;
	}

	.about-us-body-content{
		width: calc(100% - 130px);
		height: 100%;
		padding: 12px;
	}

	.about-us-body-content h3{
		font-size: 16px;
	}

	.about-us-body-content p{
		font-size: 14px;
	}

	.about-footer-list,
	.about-footer-content{
		width: 100%;
	}

	.about-footer-list ul li{
        margin-bottom: 10px;
    }

	.about-footer-btn-content h3{
		font-size: 18px;
	}

	.service-item{
        padding: 20px;
    }

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

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

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

	.service-btn a{
		height: 35px;
		width: 35px;
	}

	.service-btn a i{
		font-size: 16px;
	}

	.feature-image img{
        aspect-ratio: 1 / 0.6;
    }

	.company-experience-info{
		display: block;
	}

	.company-experience-info .feature-image{
		width: 100%;
	}

	.company-experience-info .feature-image img{
        aspect-ratio: 1 / 0.58;
    }

	.company-experience-box{
		width: 100%;
		margin-top: 30px;
	}

	.company-experience-content h2{
        font-size: 30px;
    }

	.ferature-list-content h3{
		font-size: 18px;
		margin-bottom: 5px;
	}

	.project-item{
		width: 100%;
	}

	.project-item:nth-child(-2n + 2){
        border-radius: 0;
    }

	.project-item:first-child{
		border-radius: 20px 20px 0 0;
	}

	.project-item:last-child{
		border-radius: 0 0 20px 20px;
	}

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

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

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

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

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

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

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

	.why-choose-counter-list{
        margin-top: 30px;
        padding-top: 30px;
		gap: 30px;
    }

	.why-choose-counter-item{
		width: calc(50% - 15px);
	}

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

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

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

	.why-choose-counter-item:after{
		right: -15px;
	}

	.why-choose-counter-item:nth-child(2n + 2)::after{
		display: none;
	}

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

	.security-image img{
        aspect-ratio: 1 / 0.6;
    }

	.security-list{
        margin-top: 20px;
        padding-top: 20px;
    }

	.security-list-item{
        width: 100%;
    }

	.security-list-item h3{
		font-size: 18px;
		margin-bottom: 5px;
	}

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

	.pricing-header h2{
        font-size: 26px;
    }

	.pricing-header h2 sup{
        font-size: 16px;
        top: -3px;
    }

	.pricing-header h2 sub{
		font-size: 14px;
	}

	.pricing-header .icon-box{
        top: -5px;
        right: -15px;
    }

	.pricing-header .icon-box img{
        max-width: 60px;
    }

	.pricing-benefit-list ul{
		gap: 15px;
	}

	.pricing-benefit-list ul li{
		width: calc(50% - 7.5px);
		font-size: 12px;
	}

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

	.testimonial-box{
        padding: 50px 20px 30px;
    }

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

	.testimonial-slider{
        padding: 20px;
    }

	.testimonial-company-logo img{
		max-width: 130px;
	}

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

	.testimonial-content p{
		font-size: 14px;
        margin-bottom: 10px;
    }

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

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

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

	.testimonial-btn{
        position: relative;
		bottom: 0;
        justify-content: center;
        margin-top: 20px;
    }

	.testimonial-slider .testimonial-button-next{
		margin-left: 10px;
	}

	.testimonial-contact-box,
	.testimonial-contact-btn{
        width: 100%;
		text-align: start;
    }

	.testimonial-contact-content p{
		font-size: 14px;
	}

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

	.cta-box{
		padding: 20px;
    }

	.cta-contact-info:before{
		width: 80px;
		height: 70px;
		opacity: 60%;
		bottom: 0;
		right: 3px;
		transform: rotate(198deg);
	}

	@keyframes ctamovearrow{
		50%{
			right: -15px;
		}
	}
	
	.cta-contact-item{
		border-bottom: 1px solid var(--dark-divider-color);
		margin: 0 0 15px 0;
		padding: 0 0 15px 0;
		border-right: none;
	}

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

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

	.cta-contact-item .icon-box img{
        max-width: 35px;
    }

	.cta-contact-content{
        width: calc(100% - 45px);
    }

	.cta-box-image img{
        aspect-ratio: 1 / 0.65;
    }

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

	.faq-accordion .accordion-item .accordion-button::after,
	.faq-accordion .accordion-item .accordion-button.collapsed::after{
		font-size: 18px;
		right: 14px;
	}

	.faq-accordion .accordion-body{
        padding: 10px 14px 14px;
    }

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

	.footer-header{
		display: block;
		margin-bottom: 30px;
        padding-bottom: 30px;
	}

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

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

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

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

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

	.mission-vision-item .icon-box{
        margin-right: 10px;
    }

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

	.mission-vision-content{
        width: calc(100% - 50px);
    }

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

	.mission-vision-content p{
		font-size: 14px;
	}

	.our-approach-image img{
		aspect-ratio: 1 / 0.86;
	}

	.what-we-do-image{
		max-width: 100%;
		padding: 0 40px 60px 0;
	}

	.what-we-do-img-1::before{
		top: 10px;
		left: 10px;
	}

	.what-we-do-img-2{
		max-width: 170px;
	}

	.company-experience-box.what-we-do-circle{
		width: 110px;
        height: 110px;
		top: 30px;
		padding: 10px;
	}

	.company-experience-box.what-we-do-circle h2{
		font-size: 24px;
		margin-bottom: 5px;
	}

	.company-experience-box.what-we-do-circle p{
		font-size: 12px;
	}

	.what-we-item{
		width: 100%;
	}

	.what-we-item-content h3{
		font-size: 18px;
	}

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

	.work-step-item::before{
        transform: translate(22px, 45px);
    }

	.work-step-item .work-step-no{
		width: 45px;
        height: 45px;
		margin-right: 10px;
	}

	.work-step-no h3{
        font-size: 20px;
    }
	
	.work-step-content{
		width: calc(100% - 55px);
	}

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

	.work-step-content p{
		font-size: 14px;
	}

	.how-it-work-image{
		padding-left: 40px;
	}

	.how-it-work-img-1 img{
		aspect-ratio: 1 / 1.1;
	}

	.how-it-work-img-2{
		max-width: 180px;
		border-width: 5px;
	}

	.our-benefit-image{
		padding-right: 50px;
	}

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

	.benefit-img-2{
		max-width: 160px;
		border-width: 5px;
		bottom: 20px;
	}

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

	.contact-us-circle{
        top: 20px;
    }

	.contact-us-circle img{
        max-width: 80px;
    }

	.benefit-body-item{
		width: 100%;
	}	

	.benefit-body-item-content h3{
		font-size: 18px;
	}

	.page-catagery-list,
	.sidebar-cta-box{
		padding: 20px;
	}

	.page-catagery-list h3{
		font-size: 18px;
	}

	.sidebar-cta-contact-content h3{
		font-size: 18px;
		margin-bottom: 5px;
	}

	.page-single-slider{
        margin-bottom: 20px;
    }

	.page-single-slider .swiper-slide img{
        aspect-ratio: 1 / 0.79;
    }

	.service-entry h2{
        font-size: 26px;
    }

	.service-entry ul li{
        margin-bottom: 10px;
    }

	.service-feature-item{
        width: 100%;
    }

	.service-feature-item::before{
		top: auto;
		bottom: -15px;
		left: 50%;
		transform: translateX(-50%);
		height: 1px;
		width: 100%;
	}

	.service-feature-box{
		margin-bottom: 10px;
	}

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

	.service-feature-title{
        width: calc(100% - 50px);
    }

	.service-feature-title h3{
		font-size: 18px;
	}

	.service-entry-image-list{
		gap: 20px;
	}

	.service-entry-image,
	.service-entry-list-content{
		width: 100%;
	}

	.service-entry-image img{
        aspect-ratio: 1 / 0.68;
    }

	.post-image img{
		aspect-ratio: 1 / 0.7;
	}
	
	.post-entry blockquote{
		background-position: 15px 12px;
		padding: 60px 15px 15px 15px;
	}
	
	.post-entry h2{
		font-size: 26px;
	}

	.tag-links{
		font-size: 18px;
	}
	
	.project-detail-list{
		padding: 20px;
	}

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

	.project-detail-item{
		padding: 10px;
		margin-bottom: 20px;
	}

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

	.project-entry h2{
        font-size: 26px;
    }
	
	.project-video-content,
	.project-video-box{
		width: 100%;
	}

	.project-scope-box ul li{
		width: 100%;
	}
	
	.project-entry-images{
		gap: 20px;
	}

	.project-entry-image{
		width: 100%;
	}

	.what-we-list.project-scope-list .what-we-item .icon-box img{
        max-width: 40px;
    }

	.what-we-list.project-scope-list .what-we-item .what-we-item-content h3{
		font-size: 18px;
		margin-bottom: 5px;
	}

	.team-singe-image img{
        aspect-ratio: 1 / 1.03;
    }

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

	.team-member-info .section-title{
		margin-bottom: 20px;
	}
	
	.team-member-detail{
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

	.member-social-list span{
		font-size: 18px;
	}

	.member-social-list ul li{
		margin-right: 10px;
	}

	.team-skills-list{
		gap: 20px;
	}

	.skills-progress-bar{
		width: 100%;
	}

	.team-single-list ul li{
		width: 100%;
	}

	.page-testimonials .testimonial-item{
        padding: 20px;
    }

	.page-contact-box{
        padding: 0 20px 30px 20px;
        margin-top: 50px;
    }

	.contact-info-list{
		gap: 30px;
        margin: -50px 0 30px 0;
    }

	.contact-info-item{
		width: 100%;
	}

	.contact-info-item:before{
		top: auto;
		right: 0;
		bottom: -15px;
		left: 0;
		width: 100%;
		height: 1px;
	}

	.contact-info-item:nth-child(3n + 3)::before{
		display: block;
	}
	
	.contact-info-item:last-child::before{
		display: none;
	}

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

	.contact-info-content h3{
		font-size: 18px;
	}
	
	.google-map-iframe,
	.google-map-iframe iframe{
		height: 350px;
	}
}





/* Home page hero section area here */
.topbar {
    display: none;
}
header.main-header {
    border-bottom: 1px solid var(--dark-divider-color);
    background: rgba(0, 0, 0, 0.4);
    position: absolute;
    width: 100%;
    z-index: 999;
}
.main-menu ul li a {
    color: #fff;
}
/* client section */

.our-clients-slider {
    padding: 30px 0 0px;
    background: #dee1e6;
    overflow: hidden;
}
.our-clients-slider .section-title { 
	text-align: center; 
	margin-bottom: 30px; 
}
.our-clients-slider .section-title h3 {
    display: inline-block;
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var( --primary-color);
    margin-bottom: 15px;
}
.our-clients-slider .section-title h2 {
    font-size: 32px;
    font-weight: 700;
    margin: 0;
    color: #101828;
}
.clients-marquee-wrapper {
   --item-width: 220px;      /* width of each logo card */
  --item-height: 120px;     /* height of each logo card */
  --item-gap: 40px;         /* space between cards */
  --speed: 14s;             /* time for ONE full loop of the track (lower = faster) */
  --max-scale: 1.15;        /* scale of the item closest to center */
  --min-scale: 0.85;        /* scale of items farthest from center */
  --max-opacity: 1;         /* opacity of the center item */
  --min-opacity: 0.35;      /* opacity of the farthest items */
  --max-blur: 4px;          /* blur applied to the farthest items */
  --focus-radius: 420px;    /* how wide the "in focus" zone is, in px, each side of center */

  position: relative;
  width: 100%;
  max-width: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  /* Fade the far left/right edges to transparent so items don't
     just "appear/disappear" abruptly — this is the soft edge you
     see in premium carousels. */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 12%,
    black 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 12%,
    black 88%,
    transparent 100%
  );
}
.clients-marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: clients-scroll var(--speed, 28s) linear infinite;
    will-change: transform;
	gap: 15px;
}
.clients-marquee-wrapper:hover .clients-marquee-track {
    animation-play-state: paused;
}
 @keyframes clients-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * var(--loop-distance, 50%))); }
} 
.client-slide-item {
    flex: 0 0 auto;
    width: 160px;
    background: transparent;
    border-radius: 0;
    padding: 0;
    text-align: center;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.client-slide-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    position: relative;
}

.client-slide-item:hover {
    transform: scale(1.3);
    z-index: 5;
}

.client-slide-item figure {
    width: 100%;
    height: 140px;          /* taller, closer to square so faces fit */
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.3s ease-in-out;
}

.client-slide-item:hover figure {
    box-shadow: 0 18px 36px rgba(16, 24, 40, 0.28);
}

.client-slide-item figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: filter 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.client-slide-item:hover figure img {
    filter: grayscale(0);
    opacity: 1;
}

/* hide name/designation text since logo already has the name */
.client-slide-item h3,
.client-slide-item p {
    display: none;
}
/* client section end */

/* chart  */
.why-choose-chart-card{
    background:#ffffff;
    border-radius:14px;
    padding:42px 40px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.chart-title{
    font-size:1.15rem;
    letter-spacing:.5px;
    color:#161a33;
    font-weight:800;
    text-transform:uppercase;
    text-align:center;
}
.chart-subtitle{
    font-size:.9rem;
    font-weight:500;
    color:#6b7190;
    margin-top:6px;
    margin-bottom:22px;
    text-align:center;
}
.chart-caption {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    align-items: center;        /* Vertically centers the diamond and text */
    justify-content: center;    /* Centers the whole block horizontally */
}

.chart-caption .diamond {
    width: 10px;
    height: 10px;
    background: var(--accent-secondary-color);
    transform: rotate(45deg);
    flex: none;                 /* Prevents the diamond from squishing */
}

.chart-caption p {
    text-align: left;           /* Keep left or center depending on preference */
    font-style: italic;
    font-weight: 600;
    color: #2b2f4a; 
    line-height: 1.5;
    font-size: 0.95rem;
    margin: 0;                  /* Removes default paragraph margins that offset alignment */
}
svg.growth{width:100%;height:auto;overflow:visible;}
.grid-line{stroke:#e6e8f0;stroke-width:1;}
.axis-label{fill:#8b90ab;font-size:11px;}
.axis-title{fill:#6b7190;font-size:11px;}
.value-label{fill:#161a33;font-size:12px;font-weight:700;opacity:0;transition:opacity .4s ease;}
.value-label.show{opacity:1;}
.growth-line{
    fill:none;
    stroke:var(--accent-secondary-color);
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.growth-dot{fill:var(--accent-secondary-color);opacity:0;transition:opacity .3s ease;}
.growth-dot.show{opacity:1;}
/* chart end */

/* Our Journey milestone */
.our-benefit-content.journey-section-content{
	padding-right: 0;
}

.journey-layout{
	margin-top: 34px;
	row-gap: 24px;
	text-align: left;
}

.journey-layout > [class*="col-"]{
	display: flex;
}

.journey-chart-panel,
.journey-milestone-card{
	width: 100%;
	min-height: 350px;
	border: 1px solid rgba(1, 5, 53, .07);
	border-radius: 22px;
	box-shadow: 0 14px 38px rgba(1, 5, 53, .06);
}

.journey-chart-panel{
	background: var(--white-color);
	padding: 28px 24px 20px;
}

.journey-chart-bars{
	min-height: 250px !important;
}

.journey-chart-bars .col > div{
	border-radius: 5px 5px 0 0;
}

.journey-chart-bars p{
	margin: 12px 0 0;
	color: var(--primary-color);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.55;
}

.journey-chart-caption{
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid rgba(1, 5, 53, .08);
	color: var(--text-color);
	font-size: 13px;
}

.journey-milestone-card{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 350px;
	padding: 28px 34px;
	background: linear-gradient(145deg, #fff 8%, #f8f9fc 100%);
	overflow: hidden;
	isolation: isolate;
}

.journey-card-topline,
.journey-card-stat,
.journey-growth{
	position: relative;
	z-index: 1;
}

.journey-card-topline{
	display: flex;
	align-items: center;
	gap: 10px;
	color: #68708c;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.7px;
}

.journey-card-mark{
	width: 9px;
	height: 9px;
	border-radius: 2px;
	transform: rotate(45deg);
	background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
}

.journey-card-stat{
	margin: 18px 0 14px;
}

.journey-card-label{
	color: #69708a;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.8px;
}

.journey-card-number{
	margin-top: 3px;
	color: var(--primary-color);
	font-size: clamp(78px, 8vw, 112px);
	font-weight: 800;
	letter-spacing: -8px;
	line-height: 1;
}

.journey-card-number span{
	margin-left: 5px;
	color: var(--accent-secondary-color);
	font-size: .64em;
	vertical-align: 15%;
}

.journey-card-stat p{
	margin: 8px 0 0 6px;
	color: #68708c;
	font-size: 16px;
	font-weight: 600;
}

.journey-growth{
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 11px;
	padding: 11px 15px;
	border: 1px solid rgba(98, 169, 225, .17);
	border-radius: 12px;
	background: rgba(255, 255, 255, .82);
}

.journey-growth-arrow{
	color: #2489b9;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
}

.journey-growth p{
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin: 0;
	color: var(--primary-color);
	font-size: 13px;
}

.journey-growth strong{
	font-size: 17px;
}

.journey-growth p span{
	color: var(--text-color);
}

.journey-card-watermark{
	position: absolute;
	z-index: -1;
	right: -12px;
	bottom: 35px;
	color: rgba(1, 5, 53, .035);
	font-size: clamp(170px, 20vw, 270px);
	font-weight: 800;
	letter-spacing: -24px;
	line-height: .8;
	user-select: none;
}

.journey-card-orbit{
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
}

.journey-card-orbit-one{
	width: 220px;
	height: 220px;
	top: -115px;
	right: 44px;
	background: radial-gradient(circle, rgba(98, 169, 225, .17), rgba(98, 169, 225, 0) 70%);
}

.journey-card-orbit-two{
	width: 270px;
	height: 270px;
	bottom: -170px;
	left: 28%;
	background: radial-gradient(circle, rgba(230, 16, 136, .11), rgba(230, 16, 136, 0) 70%);
}

.journey-card-dots{
	position: absolute;
	top: 28px;
	right: 30px;
	display: grid;
	grid-template-columns: repeat(3, 4px);
	gap: 7px;
	opacity: .42;
}

.journey-card-dots i{
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--accent-color);
}

@media (max-width: 991.98px){
	.journey-card-number{font-size: clamp(78px, 14vw, 112px);}
}

@media (max-width: 575.98px){
	.journey-chart-panel{padding: 22px 12px 16px;}
	.journey-chart-bars{min-height: 220px !important;}
	.journey-chart-bars .col{padding-right: 5px;padding-left: 5px;}
	.journey-chart-bars p{font-size: 11px;}
	.journey-milestone-card{min-height: 320px;padding: 24px;}
	.journey-growth{padding: 10px 12px;}
	.journey-growth p{font-size: 12px;}
}

/* Home page hero section area here */
.hero_rev {
	aspect-ratio: 21/9;
    height: auto;
	min-height: 420px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    background: #000000;
}
.hero_rev video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: 0;
}

.hero-content h1 span {
    background: linear-gradient(90.15deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#homepage-hero-content .hero-action-row{
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 24px;
}

#homepage-hero-content .hero-action-row .btn-default{
	width: 175px;
	flex-shrink: 0;
}

/* Oracle Opera badge displayed beside the Talk To Us button. */
#homepage-hero-content .hero-action-row .hero-opera-badge{
	position: relative !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	width: 170px !important;
	height: auto;
	flex-shrink: 0;
	pointer-events: none;
	filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.28));
	animation: hero-opera-badge-float 4s ease-in-out infinite;
}

@keyframes hero-opera-badge-float{
	0%, 100%{
		transform: translateY(0) rotate(-1deg);
	}

	50%{
		transform: translateY(-8px) rotate(1deg);
	}
}

@media (max-width: 991px){
	.hero-opera-badge{
		display: none;
	}
}

/* scrollable wrapper for why-choose-list, matching cards-scroll behavior */
.why-choose-list-scroll{
    max-height: 420px;
    overflow-y: auto;
    padding-right: 10px;
    position: relative;
    mask-image: linear-gradient(to bottom, black calc(100% - 36px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 36px), transparent 100%);
}
.why-choose-list-scroll{
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.why-choose-list-scroll::-webkit-scrollbar,
.why-choose-list-scroll::-webkit-scrollbar-track,
.why-choose-list-scroll::-webkit-scrollbar-thumb{
    display: none;
    width: 0;
    height: 0;
    background: transparent;
}

/* keep your existing .why-choose-list gap/flex rules as-is; just remove any 
   fixed height on it since the wrapper now handles scrolling */
.why-choose-list{
    gap: 20px; /* keep whatever gap value you already have */
}
/* Why Choose Us (home): left image that follows the centre card of the drum */
.wcu-visual{
    position: relative;
    aspect-ratio: 4 / 3;
    margin-right: 20px;
}
.wcu-visual-item{
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .5s ease;
}
.wcu-visual-item.is-active{opacity: 1}
.wcu-visual-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}
/* card 1's image is the growth chart: fill the image box, the graph shrinks to fit */
.wcu-visual .why-choose-chart-card{
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 28px 32px;
}
.wcu-visual .why-choose-chart-card svg.growth{flex: 1 1 auto; min-height: 0; height: 100%}
.wcu-visual .chart-caption{margin-top: 14px}
/* card 4's image: module tiles in a 4x4 grid, each cell a slice of one image. The 3 gradient "basics" are always there;
   the other 13 modules pop in one after another each time card 4 comes to the centre (start small, then grow) */
.wcu-modules-card{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
    overflow: hidden;
}
.wcu-modules{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    height: 92%;
    aspect-ratio: 1200 / 1189;                  /* the image's shape */
}
.wcu-modules i{
    background: url('../images/why-choose/modules.jpg') no-repeat;
    background-size: 400% 400%;
    background-position: calc(var(--x) * 100% / 3) calc(var(--y) * 100% / 3);
}
.wcu-visual-item.is-active .wcu-modules i:not(.base){
    animation: wcuModIn .5s cubic-bezier(.34, 1.56, .64, 1) calc(.25s + var(--n) * .1s) both;
}
@keyframes wcuModIn{
    from{opacity: 0; transform: scale(.4)}
    to  {opacity: 1; transform: none}
}
@media (prefers-reduced-motion: reduce){
    .wcu-visual-item.is-active .wcu-modules i:not(.base){animation: none}
}

/* card 3's image: devices syncing with the cloud; dots travel along the image's lines (blue = up to the cloud, pink = back down) */
/* cards 2 and 3 share the white card and the travelling dots */
.wcu-cloud,
.wcu-calls{
    height: 100%;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
    overflow: hidden;
}
.wcu-cloud svg,
.wcu-calls svg{display: block; width: 100%; height: 100%}
.wcu-pkt,
.wcu-trail{
    fill: none;
    stroke-linecap: round;
    animation: wcuPkt var(--t, 2s) linear var(--d, 0s) infinite;
}
.wcu-pkt{stroke-width: 30; stroke-dasharray: 0 100}      /* a single round dot (each link has pathLength 100) */
.wcu-trail{stroke-width: 12; stroke-dasharray: 14 86; stroke-opacity: .55}   /* the tail behind the dot */
.wcu-trail.up{animation-name: wcuTrailUp}               /* keeps the tail behind the dot on the way up */
.wcu-cloud .up,
.wcu-calls .up{stroke: #4fb0f0}                        /* blue: data going up to the cloud / call going out */
.wcu-cloud .down,
.wcu-calls .down{stroke: #e61088; animation-direction: reverse}   /* pink: data coming back / call coming in */
/* card 2: the map pins ripple like a ringing phone */
.wcu-ring{
    fill: none;
    stroke: #e61088;
    stroke-width: 6;
    transform-box: fill-box;
    transform-origin: center;
    animation: wcuRing 1.6s ease-out var(--d, 0s) infinite;
}
@keyframes wcuRing{
    0%  {transform: scale(1);   opacity: .8}
    100%{transform: scale(3.4); opacity: 0}
}
@keyframes wcuPkt{
    0%  {stroke-dashoffset: 0;    opacity: 0}
    12% {opacity: 1}
    85% {opacity: 1}
    100%{stroke-dashoffset: -100; opacity: 0}
}
@keyframes wcuTrailUp{
    0%  {stroke-dashoffset: 14;  opacity: 0}
    12% {opacity: 1}
    85% {opacity: 1}
    100%{stroke-dashoffset: -86; opacity: 0}
}
.wcu-shield-glow{transform-box: fill-box; transform-origin: center; animation: wcuShield 2.4s ease-in-out infinite}
@keyframes wcuShield{
    0%, 100%{opacity: .35; transform: scale(.9)}
    50%     {opacity: 1;   transform: scale(1.08)}
}
/* only animate while card 3 is the one on show */
.wcu-visual-item:not(.is-active) .wcu-pkt,
.wcu-visual-item:not(.is-active) .wcu-trail,
.wcu-visual-item:not(.is-active) .wcu-shield-glow,
.wcu-visual-item:not(.is-active) .wcu-ring{animation-play-state: paused}
@media (prefers-reduced-motion: reduce){
    .wcu-pkt,
    .wcu-trail{animation: none; opacity: 0}
    .wcu-shield-glow{animation: none}
    .wcu-ring{animation: none; opacity: 0}
}
.wcu-placeholder{                               /* stand-in until the real images are added */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    padding: 20px;
    border: 2px dashed rgba(255, 255, 255, .25);
    border-radius: 20px;
    background: rgba(255, 255, 255, .04);
    color: rgba(255, 255, 255, .7);
    text-align: center;
}
.wcu-placeholder b{font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .45)}
.wcu-placeholder span{font-size: 20px; font-weight: 600}

/* Why Choose Us (home): the cards sit on a drum; js/function.js sets each card's position, tilt and fade */
.wcu-drum{
    position: relative;
    height: 360px;                              /* replaced by js/function.js to fit the cards */
    perspective: 1200px;
    outline: none;
}
.wcu-drum:focus-visible{outline: 2px solid rgba(255, 255, 255, .5); outline-offset: 8px; border-radius: 30px}
.wcu-drum .why-choose-item{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0;
    padding-top: 20px;
    padding-bottom: 20px;
    cursor: pointer;
    transition: transform .6s cubic-bezier(.22, 1, .36, 1), opacity .6s ease;
    will-change: transform, opacity;
}
/* the centre card gets the gradient look (the same one the cards used on hover) */
.wcu-drum .why-choose-item.is-center{cursor: default}
.wcu-drum .why-choose-item.is-center:before{top: 0; bottom: auto; height: 100%}
.wcu-drum .why-choose-item.is-center .why-choose-item-content h3,
.wcu-drum .why-choose-item.is-center .why-choose-item-content p{color: var(--white-color)}
.wcu-drum .why-choose-item.is-center .icon-box img{filter: brightness(0) invert(1)}
/* the faded side cards don't light up on hover, so only the centre card stands out */
.wcu-drum .why-choose-item:not(.is-center):hover:before{height: 0}
.wcu-drum .why-choose-item:not(.is-center):hover .why-choose-item-content h3{color: var(--primary-color)}
.wcu-drum .why-choose-item:not(.is-center):hover .why-choose-item-content p{color: var(--text-color)}
.wcu-drum .why-choose-item:not(.is-center):hover .icon-box img{filter: none}

/* pagination dots (js/function.js adds them), same look as the hero's slide dots */
.wcu-dots{display: flex; justify-content: center; gap: 10px; margin-top: 24px}
.wcu-dots button{
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .35);
    cursor: pointer;
    transition: width .35s cubic-bezier(.22, 1, .36, 1), background .35s ease;
}
.wcu-dots button:hover{background: rgba(255, 255, 255, .6)}
.wcu-dots button.is-active{
    width: 28px;
    background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary-color));
}
.wcu-dots-visual{margin-right: 20px}            /* centred under the image, which has the same right margin */
/* desktop: the cards' dots stand in a column on the right of the drum (the active one is a tall pill) */
@media (min-width: 992px){
    .wcu-cards-col{position: relative}
    .wcu-cards-col .wcu-drum{margin-right: 34px}
    .wcu-dots-cards{
        position: absolute;
        top: 50%;
        right: 12px;
        flex-direction: column;
        margin: 0;
        transform: translateY(-50%);
    }
    .wcu-dots-cards button{transition: height .35s cubic-bezier(.22, 1, .36, 1), background .35s ease}
    .wcu-dots-cards button.is-active{
        width: 10px;
        height: 28px;
        background: linear-gradient(180deg, var(--accent-color), var(--accent-secondary-color));
    }
}

@media (max-width: 991px){
    .wcu-visual{max-width: 520px; margin: 0 auto}   /* tablets: keep the image small enough that its card stays in view */
    .wcu-dots-visual{display: none}             /* image and cards are stacked here, so one row of dots (under the cards) is enough */
    .wcu-drum{margin-top: 30px}
}
@media (max-width: 575px){                      /* phones: a square box and one-line chart titles leave room for the graph */
    .wcu-visual{aspect-ratio: 1 / 1}
    .wcu-visual .why-choose-chart-card{padding: 20px 16px}
    .wcu-visual .chart-title{font-size: 15px}
    .wcu-visual .chart-subtitle{font-size: 12px; margin-bottom: 12px}
    .wcu-visual .chart-caption p{font-size: 13px}
}
@media (prefers-reduced-motion: reduce){
    .wcu-visual-item,
    .wcu-drum .why-choose-item{transition: none}
}


.breadcrumb-item+.breadcrumb-item::before {
	content: '/';
}

.lowercase-email {
  text-transform: lowercase;
}
a[href^="mailto:"] {
    text-transform: lowercase;
}
#team-nav-list a.active-member {
    background: #0d6efd !important;
    color: #fff !important;
    font-weight: 600;
}

.page-team-single .page-single-sidebar {
	padding: 5px 10px;
}

/************************************/
/*** Client Testimonial Slider ***/
/************************************/

.client-testimonials {
	padding-bottom: 80px;
}

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

.client-testimonial-slider .testimonial-item {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.client-testimonial-slider .testimonial-body {
	margin-top: auto;
}

.client-testimonial-btn {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 30px;
}

.client-testimonial-button-prev,
.client-testimonial-button-next {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var(--white-color);
	border-radius: 50%;
	color: var(--accent-color);
	font-size: 16px;
	transition: all 0.4s ease-in-out;
}

.client-testimonial-button-prev:hover,
.client-testimonial-button-next:hover {
	background: var(--accent-color);
	color: var(--white-color);
}#stayntouch-about {
  --stayntouch-navy: #07143d;
  --stayntouch-body: #8a8a8f;
  --stayntouch-check: #4a88a6;
  --stayntouch-orange: #ff8a1c;
  --stayntouch-blue: #62aee9;
  --stayntouch-purple: #9b69ca;
  --stayntouch-pink: #df168b;
  width: 100%;
  overflow: hidden;
  background: #fff;
  color: var(--stayntouch-navy);
  padding: clamp(48px, 7vw, 105px) clamp(24px, 6vw, 72px);
  box-sizing: border-box;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

#stayntouch-about *,
#stayntouch-about *::before,
#stayntouch-about *::after { box-sizing: inherit; }

#stayntouch-about .about-grid {
  width: min(1580px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(420px, .94fr) minmax(520px, 1.06fr);
  align-items: center;
  gap: clamp(48px, 5vw, 90px);
}

#stayntouch-about .about-visual { width: 100%; display: flex; justify-content: center; }
#stayntouch-about .about-visual img { display: block; width: 100%; max-width: 820px; height: auto; border-radius: 28px; }
#stayntouch-about .about-content { max-width: 850px; }
#stayntouch-about .eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; color: #1b2b68; font-size: 17px; font-weight: 700; letter-spacing: .20em; }
#stayntouch-about .eyebrow-icon { width: 25px; height: 25px; display: grid; place-items: center; border: 2px solid #5a63c9; border-radius: 7px; color: #5a63c9; font-size: 15px; line-height: 1; }
#stayntouch-about h1 { margin: 0 0 26px; color: var(--stayntouch-navy); font-size: clamp(40px, 4.1vw, 68px); line-height: 1.08; letter-spacing: -.035em; font-weight: 800; }
#stayntouch-about h1 span { background: linear-gradient(90deg, var(--stayntouch-blue), var(--stayntouch-purple) 52%, var(--stayntouch-pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
#stayntouch-about .intro { margin: 0; max-width: 850px; color: var(--stayntouch-body); font-size: clamp(19px, 1.5vw, 27px); line-height: 1.55; font-weight: 400; }
#stayntouch-about .benefits { list-style: none; padding: 0; margin: 42px 0 52px; display: grid; gap: 24px; }
#stayntouch-about .benefits li { display: flex; align-items: center; gap: 18px; color: var(--stayntouch-body); font-size: clamp(17px, 1.25vw, 23px); line-height: 1.35; }
#stayntouch-about .check { flex: 0 0 35px; width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; background: var(--stayntouch-check); color: #fff; font-size: 22px; font-weight: 800; }
#stayntouch-about .demo-button { display: inline-flex; min-width: 395px; min-height: 78px; padding: 0 48px; align-items: center; justify-content: center; border: 3px solid var(--stayntouch-orange); border-radius: 13px; color: var(--stayntouch-orange); background: #fff; text-decoration: none; font-size: 23px; font-weight: 700; transition: background .2s ease, color .2s ease, transform .2s ease; }
#stayntouch-about .demo-button:hover { background: var(--stayntouch-orange); color: #fff; transform: translateY(-2px); }
#stayntouch-about .elementor-invisible { opacity: 0; visibility: hidden; }
#stayntouch-about .elementor-invisible.animated { visibility: visible; }
#stayntouch-about .animated-slow { --animation-duration: 2s; }
#stayntouch-about .animated { animation-duration: var(--animation-duration, 1s); animation-fill-mode: both; animation-timing-function: ease; }
#stayntouch-about .fadeIn { animation-name: stayntouchFadeIn; }
#stayntouch-about .fadeInRight { animation-name: stayntouchFadeInRight; }
@keyframes stayntouchFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes stayntouchFadeInRight { from { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }

@media (max-width: 1100px) {
  #stayntouch-about .about-grid { grid-template-columns: 1fr; gap: 55px; }
  #stayntouch-about .about-visual, #stayntouch-about .about-content { max-width: 850px; margin-inline: auto; }
  #stayntouch-about h1 { font-size: clamp(40px, 7vw, 62px); }
}
@media (max-width: 620px) {
  #stayntouch-about { padding: 42px 20px 60px; }
  #stayntouch-about .about-grid { gap: 38px; }
  #stayntouch-about .about-visual img { border-radius: 18px; }
  #stayntouch-about .eyebrow { font-size: 14px; }
  #stayntouch-about .intro { font-size: 17px; }
  #stayntouch-about .benefits { margin: 30px 0 38px; gap: 19px; }
  #stayntouch-about .benefits li { align-items: flex-start; font-size: 16px; }
  #stayntouch-about .check { flex-basis: 30px; width: 30px; height: 30px; font-size: 18px; }
  #stayntouch-about .demo-button { width: 100%; min-width: 0; min-height: 64px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  #stayntouch-about .elementor-invisible { opacity: 1; visibility: visible; }
  #stayntouch-about .animated { animation: none !important; transform: none !important; }
}\n

/************************************/
/*** About Section Logo Canvas     ***/
/************************************/

.about-us-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 480px;
}

.about-us-image #logoCanvas {
    display: block;
    width: 100%;
    max-width: 520px;
    aspect-ratio: 1 / 1;
    touch-action: none;
}

@media (max-width: 991px) {
    .about-us-image {
        min-height: 340px;
    }

    .about-us-image #logoCanvas {
        max-width: 380px;
    }
}

/* ---------- First screen: hero fills the whole viewport, clients sit below it ---------- */
.first-screen .hero_rev{
	aspect-ratio: auto;      /* removes the 21/9 rule that caused the cut */
	height: 100vh;
	height: 100svh;          /* accounts for mobile browser bars */
	min-height: 500px;
}

/* ---------- Hero: "scroll down" mouse at the bottom centre, above every hero layer ---------- */
.hero-scroll-down{
	position: absolute;
	left: 50%;
	bottom: 16px;
	z-index: 20;
	width: 110px;
	height: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateX(-50%);
}
/* "SCROLL DOWN" curved over the top of the mouse */
.hero-scroll-ring{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	animation: heroScrollBob 1.8s ease-in-out infinite;   /* moves together with the mouse */
}
.hero-scroll-ring text{
	fill: #fff;
	font-family: var(--default-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2.5px;
}
/* soft white glow behind the text */
.hero-scroll-ring{
	filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.75)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.35));
}
/* the mouse pill */
.hero-scroll-mouse{
	position: relative;
	width: 32px;
	height: 62px;
	margin-top: 12px;                     /* leaves a gap under the curved text */
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 16px;
	background: #0b0b0b;
	border: 2px solid #fff;
	animation: heroScrollBob 1.8s ease-in-out infinite;
}
.hero-scroll-mouse svg{
	width: 12px;
	height: 32px;
	fill: none;
	stroke: #fff;
	stroke-width: 1.3;
	stroke-linecap: round;
	stroke-linejoin: round;
}
@keyframes heroScrollBob{
	0%, 100%{transform: translateY(-5px)}
	50%     {transform: translateY(5px)}
}
@media (prefers-reduced-motion: reduce){
	.hero-scroll-mouse,
	.hero-scroll-ring{animation: none}
}
@media (max-width: 767px){
	.hero-scroll-down{bottom: 10px; width: 96px; height: 96px}
	.hero-scroll-mouse{width: 28px; height: 54px}
}

/* ---------- Hero video: whole video visible, edges dissolve into the black ---------- */
.first-screen .hero_rev video{
	height: 100%;
	width: auto;              /* width follows the video's own shape, so the element = the picture */
	max-width: 100%;          /* on narrow screens it never overflows the hero */
	aspect-ratio: 1920 / 1080; /* the video's real shape, so the box is right even before it loads */
	object-fit: contain;
	background: transparent;

	/* eased fade on the left and right edges of the picture */
	-webkit-mask-image: linear-gradient(to right,
		transparent 0%, rgba(0,0,0,.12) 4%, rgba(0,0,0,.4) 9%, rgba(0,0,0,.75) 15%, #000 22%,
		#000 78%, rgba(0,0,0,.75) 85%, rgba(0,0,0,.4) 91%, rgba(0,0,0,.12) 96%, transparent 100%);
	mask-image: linear-gradient(to right,
		transparent 0%, rgba(0,0,0,.12) 4%, rgba(0,0,0,.4) 9%, rgba(0,0,0,.75) 15%, #000 22%,
		#000 78%, rgba(0,0,0,.75) 85%, rgba(0,0,0,.4) 91%, rgba(0,0,0,.12) 96%, transparent 100%);
}

/* ---------- Clients marquee: the card in the middle pops up, then moves on ---------- */
.client-slide-item{--focus: 0}

.clients-marquee-wrapper .client-slide-item:not(:hover) figure{
	transform: scale(calc(1 + 0.22 * var(--focus)));
	box-shadow: 0 calc(8px + 10px * var(--focus)) calc(24px + 12px * var(--focus)) rgba(16, 24, 40, calc(0.14 + 0.14 * var(--focus)));
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.clients-marquee-wrapper .client-slide-item:not(:hover) figure img{
	filter: grayscale(calc(1 - var(--focus)));
	opacity: calc(0.6 + 0.4 * var(--focus));
}
/* a card is hovered: every other card (including the centre one) goes back to normal */
.clients-marquee-wrapper.is-hovering .client-slide-item:not(:hover) figure{
	transform: none;
	box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14);
}
.clients-marquee-wrapper.is-hovering .client-slide-item:not(:hover) figure img{
	filter: grayscale(1);
	opacity: 0.6;
}

/* =====================================================================
   HERO ENTRANCE ANIMATION
   Runs once when the hero content appears (after the logo video ends).
   Only opacity / translate / blur are animated -> no layout shift.
   ===================================================================== */
.hero_rev{
	--intro-ease: cubic-bezier(.22, 1, .36, 1);   /* smooth "ease-out-quint", no bounce */
}

/* "Your Vision" stays, "Our Innovation" slides in on scroll (js/vision-reveal.js) */
h2 .vision-reveal{display: inline-block}
h2 .vision-reveal.is-waiting{
	opacity: 0;
	translate: -40px 0;
	filter: blur(6px);
	transition: opacity .9s cubic-bezier(.22, 1, .36, 1), translate .9s cubic-bezier(.22, 1, .36, 1), filter .9s ease;
}
h2 .vision-reveal.is-waiting.is-in{opacity: 1; translate: 0 0; filter: blur(0)}

/* italic letters lean past their box; stops the gradient words clipping their last letter */
h2.nm-heading span{padding-right: 0.08em}
/* italic letters lean past their box; a little right padding stops the gradient clipping the last letter */
#homepage-hero-content h1 .hero-line,
#homepage-hero-content h1 .hero-line span{
	padding-right: 0.08em;
}

/* --- heading: one block per line, each with its slice of the gradient --- */
#homepage-hero-content h1 .hero-line{
	display: block;
	width: fit-content;
}
/* "We Build" + "Technology" are white; the gradient starts at "Around" and runs into "Your Business" */
#homepage-hero-content h1 .hero-plain,
#homepage-hero-content h1 .hero-split{
	background: none;
	-webkit-text-fill-color: #fff;
	color: #fff;
}
#homepage-hero-content h1 .hero-grad-start,
#homepage-hero-content h1 .hero-line:nth-child(3){
	background-size: 200% 100%;          /* one blue -> pink gradient shared by the two parts */
}
#homepage-hero-content h1 .hero-grad-start{
	-webkit-text-fill-color: transparent;
	background-position: 0% 0;           /* blue -> purple */
}
#homepage-hero-content h1 .hero-line:nth-child(3){background-position: 100% 0}  /* purple -> pink */

/* --- keyframes --- */
@keyframes heroLineIn{
	from{opacity: 0; translate: -48px 0; filter: blur(6px)}
	to  {opacity: 1; translate: 0 0;     filter: blur(0)}
}
@keyframes heroRise{
	from{opacity: 0; translate: 0 16px}
	to  {opacity: 1; translate: 0 0}
}
@keyframes heroNetPulse{
	0%  {opacity: 0; scale: .85}
	35% {opacity: 1}
	100%{opacity: 0; scale: 1.15}
}

/* --- timeline (starts when .is-playing is added to the hero) --- */
.hero_rev.is-playing #homepage-hero-content .hero-line{
	animation: heroLineIn .8s var(--intro-ease) both;
}
.hero_rev.is-playing #homepage-hero-content .hero-line:nth-child(1){animation-delay: .30s}
.hero_rev.is-playing #homepage-hero-content .hero-line:nth-child(2){animation-delay: .45s}
.hero_rev.is-playing #homepage-hero-content .hero-line:nth-child(3){animation-delay: .60s}

.hero_rev.is-playing #homepage-hero-content .hero-desc{
	animation: heroRise .9s var(--intro-ease) 1.0s both;
}
.hero_rev.is-playing #homepage-hero-content .hero-action-row .btn-default{
	animation: heroRise .8s var(--intro-ease) 1.3s both;
}
/* the badge keeps its existing float; it only starts floating after it has arrived */
.hero_rev.is-playing #homepage-hero-content .hero-action-row .hero-opera-badge{
	animation:
		heroRise .8s var(--intro-ease) 1.38s both,
		hero-opera-badge-float 4s ease-in-out 2.2s infinite;
}



/* --- network response: a soft light that brightens only the existing
       particle lines behind each heading line (black stays black) --- */
.hero-net-glow{
	position: absolute;
	inset: 0;
	z-index: 3;                 /* same level as the content, but placed before it in the HTML */
	pointer-events: none;
	mix-blend-mode: color-dodge;
}
.hero-net-glow i{
	position: absolute;
	left: var(--x, 25%);
	top: var(--y, 50%);
	width: var(--w, 500px);
	height: var(--h, 160px);
	translate: -50% -50%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(var(--c), .9), rgba(var(--c), .35) 55%, transparent);
	opacity: 0;
}
.hero-net-glow i:nth-child(1){--c: 80, 125, 165}    /* muted Cubix blue   */
.hero-net-glow i:nth-child(2){--c: 120, 95, 165}    /* muted purple       */
.hero-net-glow i:nth-child(3){--c: 165, 80, 130}    /* muted Cubix pink   */

.hero_rev.is-playing .hero-net-glow i{animation: heroNetPulse 1.4s ease-out both}
.hero_rev.is-playing .hero-net-glow i:nth-child(1){animation-delay: .30s}
.hero_rev.is-playing .hero-net-glow i:nth-child(2){animation-delay: .45s}
.hero_rev.is-playing .hero-net-glow i:nth-child(3){animation-delay: .60s}

/* --- reduced motion: show everything immediately, no movement --- */
@media (prefers-reduced-motion: reduce){
	.hero_rev.is-playing #homepage-hero-content .hero-line,
	.hero_rev.is-playing #homepage-hero-content .hero-desc,
	.hero_rev.is-playing #homepage-hero-content .hero-action-row .btn-default,
	.hero_rev.is-playing #homepage-hero-content .hero-action-row .hero-opera-badge{
		animation: none !important;
	}
	.hero-net-glow{display: none}
}
/* =====================================================================
   HOME PAGE: same title size and section spacing everywhere
   (scoped with <body class="home-page"> in index.html only)
   ===================================================================== */
.home-page h2.nm-heading.nm-heading{font-size: 46px}
@media only screen and (max-width: 991px){
	.home-page h2.nm-heading.nm-heading{font-size: 36px}
}
@media only screen and (max-width: 767px){
	.home-page h2.nm-heading.nm-heading{font-size: 26px}
}

.home-page .our-clients-slider,
.home-page .about-us,
.home-page .our-services,
.home-page .our-feature,
.home-page .why-choose-us,
.home-page .our-testimonials{
	padding-top: 60px;
	padding-bottom: 60px;
}

/* Clients strip: white with a soft brand-pink wash in both bottom corners */
.home-page .our-clients-slider{
	background:
		radial-gradient(60% 120% at 0% 100%,   rgba(230, 16, 136, 0.08) 0%, transparent 70%),  /* pink, bottom-left */
		radial-gradient(60% 120% at 100% 100%, rgba(230, 16, 136, 0.08) 0%, transparent 70%),  /* pink, bottom-right */
		#ffffff;
	border-bottom: 1px solid rgba(16, 24, 40, 0.06);
}

/* clients strip: no shadow under the photos (the scale-up focus effect stays) */
.home-page .clients-marquee-wrapper .client-slide-item figure{box-shadow: none !important}
/* clients strip: no zoom at all (centre focus and hover); the grey -> colour effect stays */
.home-page .clients-marquee-wrapper .client-slide-item,
.home-page .clients-marquee-wrapper .client-slide-item figure{transform: none !important}

/* home page: 6px gap under every small sub-heading (e.g. "OUR HONOURABLE CLIENTS", "WHO WE ARE") */
.home-page .section-title h3,
.home-page .showcase .heading h3{margin-bottom: 6px !important}

/* About: the logo canvas is a square, but the logo only fills its middle ~25%.
   Let the layout use just the logo's band (30% of the canvas) and let the rest of the
   square overflow invisibly, so the section keeps the same 60px padding as every other one.
   The particle scatter/assemble animation still has the full square to move in. */
.home-page .about-us{overflow: hidden}
.home-page .about-us-image{min-height: 0; --logo-w: 520px}
.home-page .about-us-image #logoCanvas{
	margin: calc(min(100%, var(--logo-w)) * -0.35) auto;
}
@media (max-width: 991px){
	.home-page .about-us-image{--logo-w: 380px}
}
/* About: darker body copy than the site-wide #707070 so the paragraph reads more easily */
.home-page .about-us .about-us-content .section-title p{color: #4a4a4a; font-size: 18px}

/* About: key points as a small timeline (gradient ring markers joined by a blue → pink line).
   js/about-points.js adds .is-waiting / .is-in; each point waits var(--i) steps, so they come in one after another. */
.about-points{list-style: none; margin: 30px 0 0; padding: 0}
.about-points li{position: relative; padding: 0 0 24px 48px}
.about-points li:last-child{padding-bottom: 0}
.about-points li::before{                       /* ring + inner dot */
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 24px;
	height: 24px;
	box-sizing: border-box;
	padding: 4px;
	border: 2px solid transparent;
	border-radius: 50%;
	background:
		linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color)) content-box,
		linear-gradient(#fff, #fff) padding-box,
		linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color)) border-box;
	box-shadow: 0 0 0 4px rgba(98, 169, 225, .12);
	z-index: 1;
}
.about-points li::after{                        /* line down to the next marker */
	content: "";
	position: absolute;
	left: 11px;
	top: 30px;
	bottom: 2px;
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(180deg, rgba(98, 169, 225, .45), rgba(230, 16, 136, .45));
	transform-origin: 50% 0;
}
.about-points li:last-child::after{background: linear-gradient(180deg, rgba(230, 16, 136, .45), rgba(230, 16, 136, 0))}
.about-points strong{display: block; font-size: 20px; font-weight: 700; line-height: 1.4; color: var(--primary-color)}
.about-points span{display: block; margin-top: 4px; font-size: 17px; line-height: 1.5; color: #4a4a4a}

/* reveal: marker pops, text slides in, then the line draws down to the next point */
.about-points.is-waiting li{
	opacity: 0;
	translate: -24px 0;
	transition: opacity .7s cubic-bezier(.22, 1, .36, 1), translate .7s cubic-bezier(.22, 1, .36, 1);
	transition-delay: calc(var(--i) * .35s);
}
.about-points.is-waiting li::before{
	scale: 0;
	transition: scale .5s cubic-bezier(.34, 1.56, .64, 1);
	transition-delay: calc(var(--i) * .35s);
}
.about-points.is-waiting li::after{
	transform: scaleY(0);
	transition: transform .5s ease;
	transition-delay: calc(var(--i) * .35s + .3s);
}
.about-points.is-waiting.is-in li{opacity: 1; translate: 0 0}
.about-points.is-waiting.is-in li::before{scale: 1}
.about-points.is-waiting.is-in li::after{transform: scaleY(1)}
@media (max-width: 767px){
	.about-points strong{font-size: 18px}
	.about-points span{font-size: 16px}
}

/* exactly 60px under the last content of each section */
.home-page .about-us .about-us-content .section-title{margin-bottom: 0}   /* was 40px extra */
.home-page .our-services .container > .row:last-child{margin-bottom: -30px} /* cancels the cards' 30px bottom margin on the last row, at every screen size */

/* =====================================================================
   ABOUT SECTION – products floating around the Cubix logo
   Wrapper .cx-orbit goes around the existing logo element.
   ===================================================================== */
.cx-orbit{
	--cx-blue: #62a9e1;
	--cx-pink: #e61088;
	--cx-ring: rgba(98,169,225,.65);
	position: relative;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 5 / 4;
	display: grid;
	place-items: center;
}
.cx-orbit-rings{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}
.cx-orbit-rings ellipse{
	fill: none;
	stroke: var(--cx-ring);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-dasharray: 2 6;
}
/* the existing logo sits in the middle, above the rings */
.cx-orbit > :not(.cx-orbit-rings):not(.cx-chip):not(.cx-spark){
	position: relative;
	z-index: 1;
	max-width: 46%;
}

.cx-chip{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	padding: 8px 14px 8px 10px;
	border-radius: 999px;
	background: #fff;
	color: #101828;
	font: 600 clamp(11px, 1.1vw, 14px)/1 'Plus Jakarta Sans', sans-serif;
	letter-spacing: .01em;
	box-shadow: 0 6px 18px rgba(16,24,40,.08), 0 0 0 1px rgba(16,24,40,.06);
	opacity: 0;
	will-change: transform;
	transition: box-shadow .3s ease, opacity .3s ease;
}
.cx-chip i{
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex: none;
	background: linear-gradient(135deg, var(--cx-blue), var(--cx-pink));
}
.cx-chip small{font-weight: 500; color: #667085; font-size: .9em}
.cx-chip:hover{box-shadow: 0 10px 26px rgba(230,16,136,.18), 0 0 0 1.5px var(--cx-pink)}
.cx-orbit.is-dim .cx-chip:not(:hover){opacity: .55 !important}

.cx-spark{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border-radius: 50%;
	border: 1.5px solid var(--cx-pink);
	pointer-events: none;
	animation: cxSpark .7s ease-out forwards;
}
@keyframes cxSpark{
	from{transform: var(--p) scale(.4); opacity: .9}
	to  {transform: var(--p) scale(5);  opacity: 0}
}

@media (max-width: 560px){
	.cx-orbit{aspect-ratio: 1 / 1}
	.cx-orbit > :not(.cx-orbit-rings):not(.cx-chip):not(.cx-spark){max-width: 66%}
	.cx-chip{padding: 6px 11px 6px 8px}
	.cx-chip small{display: none}
}