/* ----------------------------------------------------------------------------------------
* Author        : Awaiken
* Template Name : Firevall - Cyber Security Services HTML Template
* File          : CSS File
* Version       : 1.0
* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. Scrolling Ticker css
06. About Us css
07. Our Services css
08. Our Specialties css
09. Our Facts css
10. Why Choose Us css
11. Case Study css
12. Our Features css
13. Our Pricing css 
14. Our Testimonial css
15. Our FAQs css
16. Our Blog css
17. Our Blog css
18. Footer css
19. About Us Page css
20. Services Page css
21. Service Single css
22. Blog Archive css
23. Blog Single css
24. Case Study Page css
25. Case Study Single css
26. Team Page css
27. Team Single css
28. Page Pricing css
29. Testimonials Page css
30. Image Gallery css
31. Video Gallery css
32. FAQs Page css
33. Contact Us Page css
34. 404 Error Page css
35. Responsive css
-------------------------------------------------------------------------------------- */

/************************************/
/*** 	 00. Custom Fonts	  ***/
/************************************/

@font-face {
  font-family: 'VarinonormalRegular';
  src: url('/webfonts/VarinonormalRegular-1GXaM.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Mulish Font - Local Font Files */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url('/webfonts/mulish-600-normal.ttf') format('truetype');
}

@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('/webfonts/mulish-700-normal.ttf') format('truetype');
}

@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: optional;
  src: url('/webfonts/mulish-800-normal.ttf') format('truetype');
}

@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 900;
  font-display: optional;
  src: url('/webfonts/mulish-900-normal.ttf') format('truetype');
}

@font-face {
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 600;
  font-display: optional;
  src: url('/webfonts/mulish-600-italic.ttf') format('truetype');
}

@font-face {
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 700;
  font-display: optional;
  src: url('/webfonts/mulish-700-italic.ttf') format('truetype');
}

@font-face {
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 800;
  font-display: optional;
  src: url('/webfonts/mulish-800-italic.ttf') format('truetype');
}

@font-face {
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 900;
  font-display: optional;
  src: url('/webfonts/mulish-900-italic.ttf') format('truetype');
}

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

:root{
	--primary-color				: #FFFFFF;
	--secondary-color			: #FFFFFF0A;
	--text-color				: #D1D1D1;
	--bg-color					: #1C1B2B;
	--accent-color				: #4185DD;
	--accent-secondary-color	: #B42FDA;
	--divider-color				: #FFFFFF0A;
	--error-color				: rgb(230, 87, 87);
	--default-font				: "Poppins", sans-serif;
	--shadow-color				: rgba(255, 255, 255, 0.1);
	--border-color				: #FFFFFF0A;
	--card-bg					: #2A2938;
	--hover-bg					: #FFFFFF0A;
}

/* Light theme variables */
.theme-light {
	--primary-color				: #1C1B2B;
	--secondary-color			: #F8F9FA;
	--text-color				: #495057;
	--bg-color					: #F7F8FA;
	--accent-color				: #4185DD;
	--accent-secondary-color	: #B42FDA;
	--divider-color				: #E9ECEF;
	--error-color				: rgb(230, 87, 87);
	--default-font				: "Poppins", sans-serif;
	--shadow-color				: rgba(0, 0, 0, 0.1);
	--border-color				: #E9ECEF;
	--card-bg					: #FFFFFF;
	--hover-bg					: #F8F9FA;
}

/* Dark theme variables */
.theme-dark {
	--primary-color				: #FFFFFF;
	--secondary-color			: #FFFFFF0A;
	--text-color				: #D1D1D1;
	--bg-color					: #1C1B2B;
	--accent-color				: #4185DD;
	--accent-secondary-color	: #B42FDA;
	--divider-color				: #FFFFFF0A;
	--error-color				: rgb(230, 87, 87);
	--default-font				: "Poppins", sans-serif;
	--shadow-color				: rgba(255, 255, 255, 0.1);
	--border-color				: #FFFFFF0A;
	--card-bg					: #2A2938;
	--hover-bg					: #FFFFFF0A;
}

/* Theme Switch Styles */
.theme-switch {
	display: flex;
	align-items: center;
}

.theme-switch button {
	background: transparent;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
	border-radius: 6px;
	padding: 8px;
}

.theme-switch button:hover {
	background: rgba(255, 255, 255, 0.1);
}

.theme-switch button.active {
	background: var(--accent-color);
	color: white;
}

/* Responsive theme switch - moved to custom-mobile.css */

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

body{
	position: relative;
	font-family: var(--default-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.1em;
	color: var(--text-color);
	background: var(--bg-color);
	background-repeat: repeat-y;
	background-position: top center;
	background-size: 100% auto;
}

/* Dark theme background pattern */
.theme-dark body {
	background: var(--bg-color);
	background-repeat: repeat-y;
	background-position: top center;
	background-size: 100% auto;
}

/* Light theme background pattern */
.theme-light body {
	background: var(--bg-color);
	background-repeat: repeat-y;
	background-position: top center;
	background-size: 100% auto;
}

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

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

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

h1,
h2,
h3,
h4,
h5,
h6{
	margin :0;
	font-weight: 500;
	line-height: 1.2em;
}

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{
	position: relative;
    padding-right: 15px;
    padding-left: 15px;
	z-index: 1;
}

.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(--primary-color);
    font-size: 16px;
    font-weight: 500;
	line-height: 1em;
    text-transform: capitalize;
    border: none;
    padding: 16px 30px;
    transition: all 0.4s ease-in-out;
	overflow: hidden;
	z-index: 0;
	font-family: var(--default-font, "Poppins", sans-serif);
}

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

.btn-default.btn-highlighted{
	background: linear-gradient(var(--bg-color), var(--bg-color)) padding-box, linear-gradient(to left, var(--accent-color), var(--accent-secondary-color)) border-box;
    border: 1px solid transparent;
}

.btn-default.btn-highlighted::before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -15%;
	right: 0;
    width: 0;
    height: 106%;
    background: linear-gradient(to left, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
    transform: skew(45deg);
    transition: all 0.4s ease-in-out;
    z-index: -1;
}

.btn-default.btn-highlighted:hover::before{
	width: 100%;
    transform: skew(0deg);
    left: 0;
}

.readmore-btn{
	position: relative;
	text-transform: capitalize;
	color: var(--primary-color);
	padding-right: 30px;
	transition: all 0.3s ease-in-out;
}

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

.readmore-btn::after{
	content: '';
    position: absolute;
	right: 0;
	top: 2px;
    transform: translateX(-3px);
    background: url('/images/arrow-white.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	width: 20px;
	height: 20px;
	transition: all 0.3s ease-in-out;
}

.readmore-btn:hover::after{
	transform: translateX(0);
}

.cb-cursor:before{
	background: linear-gradient(120deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
}

.preloader{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	background: var(--bg-color);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.5s ease-in-out;
	animation: hidePreloader 3s ease-in-out forwards;
}

@keyframes hidePreloader {
	0% {
		opacity: 1;
		visibility: visible;
	}
	90% {
		opacity: 1;
		visibility: visible;
	}
	100% {
		opacity: 0;
		visibility: hidden;
		display: none;
	}
}

.preloader.hidden{
	opacity: 0;
	pointer-events: none;
}

.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(--accent-color) transparent var(--accent-secondary-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%);
}

.preloader-icon{
	max-width: 66px !important;
	height: auto !important;
	display: block;
	width: 66px;
}

/* Small loader icon for inline loading states */
.preloader-icon[style*="max-width: 20px"] {
	max-width: 20px !important;
	width: 20px;
	height: 20px;
}

/* Prevent WOW.js from causing hydration mismatches */
.wow {
	visibility: visible !important;
}

/* Ensure WOW.js animated class doesn't conflict with SSR */
.wow.animated {
	animation-duration: 1s;
	animation-fill-mode: both;
}

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

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

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

/* Reduce spacing for services section */
.our-services .section-row {
	margin-bottom: 40px;
}

/* Reduce spacing for testimonial section */
.our-testimonial .section-row {
	margin-bottom: 20px;
}

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

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

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

.section-title h3{
	display: inline-block;
	position: relative;
	font-size: 16px;
    font-weight: 400;
	line-height: 1.5em;
    text-transform: capitalize;
    color: var(--primary-color);
	background: var(--secondary-color) url('/images/icon-sub-heading.svg') no-repeat;
    background-position: left 20px center;
    background-size: 30px auto;
	border-left: 3px solid var(--accent-color);
	border-right: 3px solid var(--accent-secondary-color);
	border-top: none;
	border-bottom: none;
	border-radius: 100px;
	padding: 8px 20px 8px 50px;
    margin-bottom: 20px;
}

/* Hero subtitle spacing */
.hero .section-title h3 {
	margin-bottom: 40px;
	color: #374151 !important;
}

.theme-dark .hero .section-title h3 {
	color: #FFFFFF !important;
}

.section-title h1{
	font-size: 52px;
	line-height: 1.1em;
	font-weight: 300;
	margin-bottom: 0;
	cursor: none;
}

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

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

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

/* Hero two-line title styling */
.section-title h1.hero-two-lines {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	width: 100%;
	gap: 25px;
	text-align: center;
	color: #374151 !important;
}

.theme-dark .section-title h1.hero-two-lines {
	color: #FFFFFF !important;
}

.section-title h1 .hero-static-line {
	display: table;
	background: none;
	-webkit-text-fill-color: inherit;
	font-weight: 700;
	font-size: 1.2em;
	text-align: center;
	line-height: 1.5;
	white-space: nowrap;
	padding: 0;
	margin: 0 auto;
	color: #374151 !important;
}

.theme-dark .section-title h1 .hero-static-line {
	color: #FFFFFF;
}

/* Hero TextType styling */
.section-title h1 .hero-typed-text {
	display: block;
	background: none;
	-webkit-text-fill-color: inherit;
	min-height: 1.2em;
	text-align: center;
	width: 100%;
	padding: 8px 0;
}

.section-title h1 .hero-typed-text .text-type__content {
	font-weight: 700;
	background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: background-position 0.4s ease-in-out;
}

.section-title:hover h1 .hero-typed-text .text-type__content {
	background-position: right center;
}

.section-title h1 .hero-typed-text .text-type__cursor {
	font-weight: 400;
	background: linear-gradient(to right, var(--accent-color), var(--accent-secondary-color));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-left: 2px;
}

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

/* Hero section specific paragraph spacing */
.hero .section-title p {
	margin-top: 40px;
	font-size: 22px;
	line-height: 1.8;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding: 0 15px;
}

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

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

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

/* Hide mobile button on desktop */
.section-btn-mobile {
	display: none !important;
}

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

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

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

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

header.main-header .header-sticky{
	position: relative;
	top: 0;
	z-index: 100;
	background: rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
}

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

/* Fixed on scroll: spacer in JS prevents content jump */
header.main-header .header-sticky.active{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: rgba(0, 0, 0, 0.55) !important;
	border-bottom: none !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
header.main-header .header-sticky.active .nav-link,
header.main-header .header-sticky.active .navbar-nav a,
header.main-header .header-sticky.active .header-right-icons a,
header.main-header .header-sticky.active .header-right-icons button {
	color: rgba(255, 255, 255, 0.95) !important;
}
header.main-header .header-sticky.active .header-right-icons a:hover {
	color: #fff !important;
}
header.main-header .header-sticky.active .main-menu .nav-link:hover,
header.main-header .header-sticky.active .main-menu .navbar-nav a:hover {
	color: #4b0082 !important;
	background: transparent !important;
}

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

/* Force navbar to display on all screen sizes */
.navbar-collapse {
	display: flex !important;
}

.navbar-collapse.main-menu {
	display: flex !important;
}

.header-btn {
	display: block !important;
}

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

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

.main-menu .nav-menu-wrapper .navbar-nav{
    background: rgba(255, 255, 255, 0.1);
	border: 1px solid var(--divider-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
	border-radius: 25px;
	padding: 0 8px;
	height: 45px;
}

.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: 400;
	line-height: 1em;
	padding: 6px 14px !important;
	margin: 3px 0;
	border-radius: 100px;
	color: #FFFFFF;
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	height: 35px;
}

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

/* Main menu hover: bold dark purple text only (no pill) - overridden by Navbar inline for specificity */
.main-menu .nav-menu-wrapper .navbar-nav .nav-link:hover,
.main-menu .nav-menu-wrapper .navbar-nav .nav-link:focus,
.main-menu .nav-menu-wrapper .navbar-nav a:hover,
.main-menu .nav-menu-wrapper .navbar-nav a:focus {
	color: #4b0082 !important;
	background: transparent !important;
	box-shadow: none !important;
}
.main-menu ul li a:hover,
.main-menu ul li a:focus{
	color: #4b0082 !important;
	background: transparent !important;
	box-shadow: none !important;
}

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

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

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

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

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

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

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

.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus{
	color: var(--bg-color);
	background-color: transparent;
	padding: 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(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	border-radius: 8px;
	transition: all 0.4s ease-in-out;
}

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

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

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

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

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

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

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

.slicknav_menu{
	position: absolute;
    width: 100%;
	padding: 0;
	background: transparent;
}

/* Hide slicknav auto-generated button - we use manual button instead */
.slicknav_menu .slicknav_btn {
	display: none !important;
}

/* Hide slicknav auto-generated button in navbar-toggle (it's an <a> tag) */
.navbar-toggle a.slicknav_btn {
	display: none !important;
}

/* Show only our manual button (which is a <button> tag) */
.navbar-toggle button.slicknav_btn {
	display: flex !important;
}

.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: 6px 20px;
	color: var(--primary-color);
	line-height: normal;
	margin: 0;
	border-radius: 0 !important;
	transition: all 0.3s ease-in-out;
}

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

.slicknav_menu ul ul li a{
    padding: 6px 20px 6px 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(--primary-color);
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.3s ease-out;
}

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

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

.hero{
	position: relative;
    background: url('/images/hero-bg-shape.png') no-repeat;
    background-position: center center;
    background-size: auto;
	padding: 250px 0 270px;
	z-index: 1;
	min-height: 800px; /* Reserve height to prevent layout shifts */
}

.grid-lines{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    --grid-line-color: var(--divider-color);
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
	z-index: 0;
}

.grid-line-5,
.grid-line-4,
.grid-line-3,
.grid-line-2,
.grid-line-1{
    position: relative;
    height: 100%
}

.grid-line-5:before,
.grid-line-4:before,
.grid-line-3:before,
.grid-line-2:before,
.grid-line-1:before{
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    right: -1px;
    background: var(--grid-line-color);
    width: 1px;
}

.grid-line-5:after,
.grid-line-4:after,
.grid-line-3:after,
.grid-line-2:after,
.grid-line-1:after{
    content: "";
    position: absolute;
    top: -80px;
    right: -1px;
	background: linear-gradient(254deg, transparent 0%, var(--accent-color) 50%, var(--accent-secondary-color) 100%);
	border-radius: 0;
	opacity: 50%;
    width: 1px;
    height: 60px;
}

.grid-lines .grid-line-1:after{
    animation: gridline 6s linear infinite
}

.grid-lines .grid-line-2:after{
    animation: gridline 10s linear infinite;
    animation-delay: 3s
}

.grid-lines .grid-line-3:after{
    animation: gridline 8s linear infinite;
    animation-delay: 6s
}

.grid-lines .grid-line-4:after{
    animation: gridline 12s linear infinite;
    animation-delay: 4s
}

.grid-lines .grid-line-5:after{
    animation: gridline 9s linear infinite;
    animation-delay: 8s
}

@keyframes gridline{
    0%{
        top: -50px
    }

    to{
        top: 100%;
    }
}

.hero.hero-bg-image{
	position: relative;
	background: none;
	background-position: center center !important;
	background-size: cover !important;
	background-attachment: scroll !important; /* Prevent parallax flashing */
	background-repeat: no-repeat !important;
	padding: 250px 0 270px;
	will-change: auto; /* Prevent unnecessary repaints */
	transform: translateZ(0); /* Enable hardware acceleration for smooth rendering */
	min-height: 800px; /* Reserve height to prevent layout shifts */
}

/* Ensure hero background image stays fixed and is not affected by other sections */
.hero.hero-bg-image {
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-attachment: scroll !important;
	opacity: 1 !important;
}

/* Protect hero video from being affected */
.hero.hero-bg-image.hero-video {
	opacity: 1 !important;
}

/* Protect hero slider from being affected */
.hero.hero-bg-image.hero-slider-layout {
	opacity: 1 !important;
}

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

.hero.hero-bg-image.hero-video::before{
	opacity: 50% !important;
}

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

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

.hero.hero-bg-image.hero-slider-layout{
	background: none;
	padding: 0;
	min-height: 800px; /* Reserve height to prevent layout shifts */
}

.hero.hero-bg-image.hero-slider-layout .hero-slide{
	position: relative;
    padding: 250px 0 270px;
	min-height: 800px; /* Reserve height to prevent layout shifts */
}

.hero.hero-bg-image.hero-slider-layout .hero-slide::before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-color);
	opacity: 50%; /* Default 50%, can be overridden by theme.css */
    width: 100%;
    height: 100%;
    z-index: 1;
}

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

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

/* Smooth transitions for hero slider */
.hero.hero-bg-image.hero-slider-layout .swiper {
	position: relative;
}

.hero.hero-bg-image.hero-slider-layout .swiper-wrapper {
	position: relative;
}

.hero.hero-bg-image.hero-slider-layout .swiper-slide.hero-slide-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1.5s ease-in-out, visibility 0s linear 1.5s;
	z-index: 1;
	pointer-events: none;
}

/* Active slide is visible and establishes height */
.hero.hero-bg-image.hero-slider-layout .swiper-slide.hero-slide-wrapper.active {
	position: relative;
	opacity: 1;
	visibility: visible;
	transition: opacity 1.5s ease-in-out, visibility 0s linear 0s;
	z-index: 2;
	pointer-events: auto;
}

/* Ensure overlay stays visible and transitions smoothly with the slide */
/* Note: Actual opacity is controlled by theme.css (50% for both light and dark modes) */
.hero.hero-bg-image.hero-slider-layout .hero-slide::before {
	transition: opacity 1.5s ease-in-out;
}

.hero.hero-bg-image.hero-slider-layout .hero-pagination{
	position: absolute;
    bottom: 50px;
	text-align: center;
	z-index: 2;
}

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

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

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

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

.hero-company-slider{
	margin-top: 160px;
	text-align: center;
}

.hero-company-slider p{
	margin-bottom: 30px;
}

.hero-company-slider .company-logo{
	text-align: center;
}

.hero-company-slider .company-logo img{
	width: 100%;
	max-height: 70px;
	height: 70px;
	object-fit: cover;
	border-radius: 50%;
}

/* Simple Clients Container */
.clients-container {
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scroll-behavior: smooth;
	cursor: grab;
	user-select: none;
	white-space: nowrap;
	width: 100%;
}

.clients-container.active {
	cursor: grabbing;
}

.clients-container::-webkit-scrollbar {
	display: none;
}

.clients-container {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.client-item {
	display: inline-flex !important;
	align-items: center;
	gap: 12px;
	min-width: 200px;
	flex-shrink: 0;
	margin-right: 20px;
}

/************************************/
/***   05. Scrolling Ticker css   ***/
/************************************/

.our-scrolling-ticker{
	position: relative;
	background: linear-gradient(
		135deg,
		#1e3a5f 0%,
		#2d4a7a 25%,
		#4a2c5f 50%,
		#5a3a7a 75%,
		#6b4a8a 100%
	);
	padding: 25px 0;
	margin-top: 0;
	margin-bottom: 0;
	z-index: 1;
	min-height: 75px; /* Maintain stable height during loading */
	display: block;
	overflow: hidden;
}

.scrolling-ticker-box{
	--gap: 20px;
	position: relative;
	display: flex;
	overflow: hidden;
	user-select: none;
	gap: var(--gap);
	align-items: center;
	min-height: 25px; /* Maintain stable height */
	height: 100%;
}

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

.scrolling-content span{
	display: inline-block;
	font-size: 30px;
	font-weight: 500;
	line-height: 1.2em;
	text-transform: capitalize;
	color: #FFFFFF;
}

.scrolling-content span img,
.scrolling-ticker-star-icon{
	display: inline-block;
	vertical-align: middle;
	width: 100%;
	max-width: 30px;
	margin-right: 20px;
	filter: brightness(0) saturate(100%) invert(15%) sepia(30%) saturate(2000%) hue-rotate(200deg) brightness(0.8);
}

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

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

/************************************/
/*** 	   06. About Us css 	  ***/
/************************************/

.about-us{
	position: relative;
	padding: 180px 0 90px;
	z-index: 1;
}

.about-counter-box{
    text-align: center;
}

.about-counter-box h2{
	font-size: 200px;
	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;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: all 0.4s ease-in-out;
    margin-bottom: 5px;
}

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

.about-counter-box p{
    display: inline-block;
	text-transform: capitalize;
	background-color: var(--secondary-color);
	border-radius: 100px;
	padding: 12px 20px;
	margin-bottom: 0;
}

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

.about-list-item{
	width: calc(50% - 20px);
}

.about-list-item img{
	width: 100%;
	max-width: 50px;
	margin-bottom: 20px;
	transition: all 0.3s ease-in-out;
}

.about-list-item:hover img{
	filter: brightness(0) saturate(100%) invert(15%) sepia(30%) saturate(2000%) hue-rotate(200deg) brightness(0.8);
	transform: rotateY(180deg);
}

.about-list-item h3{
	font-size: 20px;
	line-height: 1.4em;
	text-transform: capitalize;
	margin-bottom: 10px;
}

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

.about-us-body{
	margin-top: 60px;
}

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

/* ========================================
   REDESIGNED ABOUT US SECTION STYLES
   ======================================== */

.about-us-redesign {
  position: relative;
  padding: 80px 0 60px;
  background-color: #FFFFFF !important;
}

/* Wider container for about-us section */
.about-us-redesign .container {
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 50px;
  padding-right: 50px;
}

/* Left align section title for about-us (like services section) */
.about-us-redesign .section-title {
  max-width: 100%;
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

/* Decrease font size for about-us section title */
.about-us-redesign .section-title h2 {
  font-size: 30px;
  font-weight: 500;
}

/* Description text for about-us - left aligned in column with reduced width */
.about-us-redesign .about-description-text {
  max-width: 85%;
  margin-left: 0;
  margin-right: auto;
  text-align: left;
  margin-top: 20px;
  margin-bottom: 0;
}

/* Decrease font size for about-us description text */
.about-us-redesign .about-description-text p {
  font-size: 20px;
  color: #000000;
}

/* Responsive margins for about-us section */
@media (max-width: 1600px) {
  .about-us-redesign .container {
    max-width: 1600px;
    padding-left: 40px;
    padding-right: 40px;
  }
  
  .about-us-redesign .about-description-text {
    max-width: 100%;
  }
  
  .about-us-redesign .rectangular-image-wrapper {
    max-width: 520px;
    height: 520px;
  }
}

@media (max-width: 1400px) {
  .about-us-redesign .container {
    max-width: 1400px;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  .about-us-redesign .about-description-text {
    max-width: 100%;
  }
  
  .about-us-redesign .rectangular-image-wrapper {
    max-width: 480px;
    height: 480px;
  }
}

@media (max-width: 1200px) {
  .about-us-redesign .container {
    max-width: 1200px;
    padding-left: 25px;
    padding-right: 25px;
  }
  
  .about-us-redesign .about-description-text {
    max-width: 100%;
  }
  
  .about-us-redesign .rectangular-image-wrapper {
    max-width: 440px;
    height: 440px;
  }
}

@media (max-width: 991px) {
  .about-us-redesign .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 767px) {
  .about-us-redesign .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* About Description Text */
.about-description-text {
  max-width: 900px;
  margin: 20px auto 30px;
  text-align: center;
}

.about-description-text p {
  font-size: 24px;
  line-height: 1.9;
  color: var(--text-color);
  margin: 0;
  font-weight: 400;
}

.about-description-text .highlight-text {
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  display: inline-block;
  transition: all 0.3s ease;
}

/* Rectangular Images Row */
.about-rectangular-images-row {
  margin-top: 40px;
  margin-bottom: 0;
  justify-content: center;
}

.about-rectangular-image-item {
  text-align: center;
  margin-bottom: 0;
}

.rectangular-image-wrapper {
  width: 100%;
  max-width: 580px;
  height: 580px;
  margin: 0 auto 25px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: all 0.4s ease;
  cursor: pointer;
  border: 1px solid #D1D5DB;
}

.rectangular-image-wrapper::before {
  display: none;
}

.rectangular-image-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
  border-radius: 10px;
}

.rectangular-image-wrapper:hover::after {
  opacity: 0;
}

.rectangular-image-wrapper:hover {
  border-color: var(--accent-color);
}

.rectangular-image-wrapper:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

.rectangular-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.rectangular-image-wrapper:hover img {
  transform: scale(1.1);
}

/* Circular image for first item */
.rectangular-image-wrapper.circular-image {
  width: 450px;
  height: 450px;
  max-width: 450px;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  transform: translate(-31px, -27px);
}

.rectangular-image-wrapper.circular-image img {
  object-fit: cover;
  border-radius: 50%;
}

.rectangular-image-wrapper.circular-image .rectangular-image-overlay {
  border-radius: 50%;
}

.rectangular-image-wrapper.circular-image::after {
  border-radius: 50%;
}

/* Gradient effect around vision photo */
.about-rectangular-image-item {
  position: relative;
}

.vision-gradient {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 0 !important;
}

@media (max-width: 991px) {
  .vision-gradient {
    width: 500px !important;
    height: 500px !important;
  }
  
  .rectangular-image-wrapper.circular-image {
    width: 350px !important;
    height: 350px !important;
    max-width: 350px !important;
  }
}

@media (max-width: 767px) {
  .vision-gradient {
    width: 400px !important;
    height: 400px !important;
  }
  
  .rectangular-image-wrapper.circular-image {
    width: 280px !important;
    height: 280px !important;
    max-width: 280px !important;
  }
}

/* Mixed images container for second and third images */
.mixed-images-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  align-items: flex-start;
  justify-content: flex-start;
}

.mixed-image-item {
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

@media (min-width: 992px) {
  .mixed-images-container {
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
    justify-content: flex-start;
  }
}

.rectangular-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
  z-index: 2;
  border-radius: 10px;
}

.rectangular-image-wrapper:hover .rectangular-image-overlay,
.rectangular-image-wrapper.mobile-active .rectangular-image-overlay {
  opacity: 1;
  visibility: visible;
}

.overlay-content {
  text-align: center;
  color: #fff !important;
  transform: translateY(20px);
  transition: transform 0.4s ease 0.1s;
}

.overlay-content * {
  color: #fff !important;
}

.rectangular-image-wrapper:hover .overlay-content,
.rectangular-image-wrapper.mobile-active .overlay-content {
  transform: translateY(0);
}

.overlay-content h5 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff !important;
  display: inline-block;
  overflow: hidden;
  position: relative;
}

.typewriter-text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}

.typewriter-text {
  display: inline-block;
  position: relative;
}

.typewriter-content {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid #fff;
  width: 0;
  vertical-align: bottom;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  color: #fff !important;
}

.typewriter-cursor {
  display: inline-block;
  color: #fff !important;
  font-weight: 300;
  margin-left: 3px;
  opacity: 0;
  font-size: 36px;
  line-height: 1;
  vertical-align: middle;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
}

/* Reset when not hovering */
.rectangular-image-wrapper .typewriter-content {
  width: 0;
  border-right-color: transparent;
}

.rectangular-image-wrapper .typewriter-cursor {
  opacity: 0;
}

/* Animate on hover */
.rectangular-image-wrapper:hover .typewriter-content,
.rectangular-image-wrapper.mobile-active .typewriter-content {
  animation: typewriter 0.8s steps(25, end) 0.2s forwards, 
             hide-cursor 0.1s 1s forwards;
  border-right-color: #fff;
}

.rectangular-image-wrapper:hover .typewriter-cursor,
.rectangular-image-wrapper.mobile-active .typewriter-cursor {
  animation: show-cursor 0.1s 1s forwards, blink 0.6s step-end 1.1s infinite;
}

@keyframes typewriter {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@keyframes hide-cursor {
  to {
    border-color: transparent;
    box-shadow: none;
  }
}

@keyframes show-cursor {
  to {
    opacity: 1;
  }
}

@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

.overlay-content p {
  font-size: 18px;
  line-height: 1.7;
  color: #fff !important;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.1);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.rectangular-image-caption {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary-color);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Stats Row */
.about-stats-row {
  margin-top: 30px;
  margin-bottom: 50px;
}

.about-stat-card {
  background: var(--card-bg);
  border-radius: 10px;
  padding: 30px 20px;
  text-align: center;
  transition: all 0.4s ease;
  border: 1px solid var(--divider-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  height: 100%;
  position: relative;
  overflow: hidden;
}

.about-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, var(--accent-color), var(--accent-secondary-color));
  transform: scaleX(0);
  transition: transform 0.4s ease;
}

.about-stat-card:hover::before {
  transform: scaleX(1);
}

.about-stat-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(65, 133, 221, 0.15);
  border-color: var(--accent-color);
}

.about-stat-card .stat-icon {
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-stat-card .stat-icon img {
  max-width: 80px;
  transition: all 0.4s ease-in-out;
  filter: brightness(0) invert(1);
}

.about-stat-card:hover .stat-icon img {
  transform: rotateY(180deg);
}

/* Light theme - stat icons change from blue to purple on hover */
.theme-light .about-stat-card .stat-icon img {
  filter: brightness(0) saturate(100%) invert(35%) sepia(82%) saturate(1347%) hue-rotate(195deg) brightness(93%) contrast(88%);
}

.theme-light .about-stat-card:hover .stat-icon img {
  filter: brightness(0) saturate(100%) invert(29%) sepia(85%) saturate(3229%) hue-rotate(283deg) brightness(87%) contrast(98%);
  transform: rotateY(180deg);
}

.about-stat-card .stat-content h3 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 10px;
  background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}

.about-stat-card .stat-content p {
  font-size: 16px;
  color: var(--text-color);
  margin: 0;
  font-weight: 500;
}

/* Features Row - Kept for potential future use */
.about-features-row {
  margin-bottom: 0;
  display: none;
}

.about-feature-card {
  background: var(--card-bg);
  border-radius: 10px;
  padding: 40px 30px;
  margin-bottom: 30px;
  transition: all 0.4s ease;
  border: 1px solid var(--divider-color);
  height: calc(100% - 30px);
  position: relative;
  overflow: hidden;
}

.about-feature-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(to right, var(--accent-color), var(--accent-secondary-color));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.about-feature-card:hover::after {
  transform: scaleX(1);
}

.about-feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(65, 133, 221, 0.1);
  border-color: var(--accent-color);
}

.about-feature-card .feature-icon {
  margin-bottom: 25px;
  position: relative;
  z-index: 1;
}

.about-feature-card .feature-icon img {
  max-width: 50px;
  transition: all 0.4s ease-in-out;
}

.about-feature-card:hover .feature-icon img {
  filter: brightness(0) invert(1);
  transform: rotateY(180deg);
}

/* Light theme - icons change from blue to purple on hover */
.theme-light .about-feature-card .feature-icon img {
  filter: brightness(0) saturate(100%) invert(35%) sepia(82%) saturate(1347%) hue-rotate(195deg) brightness(93%) contrast(88%);
}

.theme-light .about-feature-card:hover .feature-icon img {
  filter: brightness(0) saturate(100%) invert(29%) sepia(85%) saturate(3229%) hue-rotate(283deg) brightness(87%) contrast(98%);
  transform: rotateY(180deg);
}

.about-feature-card .feature-content h3 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--primary-color);
}

.about-feature-card .feature-content p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-color);
  margin: 0;
}

/* CTA Section */
.about-cta-row {
  margin-top: 40px;
}

.about-cta-box {
  background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
  border-radius: 20px;
  padding: 60px 50px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.about-cta-box::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

.about-cta-box .cta-content {
  position: relative;
  z-index: 1;
  margin-bottom: 35px;
}

.about-cta-box .cta-content h3 {
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 15px;
}

.about-cta-box .cta-content p {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 auto;
  max-width: 700px;
}

.about-cta-box .cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.about-cta-box .btn-default {
  background: #fff;
  color: var(--accent-color);
  padding: 16px 40px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.3s ease;
  border: 2px solid #fff;
}

.about-cta-box .btn-default:hover {
  background: transparent;
  color: #fff;
  border-color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.about-cta-box .btn-default.btn-highlighted {
  background: var(--bg-color);
  color: #fff;
  border-color: var(--bg-color);
}

.about-cta-box .btn-default.btn-highlighted:hover {
  background: #fff;
  color: var(--accent-color);
  border-color: #fff;
}

/* Responsive Design for About Section Redesign */
@media (max-width: 991px) {
  .about-us-redesign {
    padding: 80px 0;
  }

  .about-description-text {
    margin: 15px auto 25px;
  }

  .about-description-text p {
    font-size: 20px;
  }

  .about-rectangular-images-row {
    margin-top: 30px;
    margin-bottom: 0;
  }

  .rectangular-image-wrapper {
    max-width: 500px;
    height: 500px;
  }

  .about-stats-row {
    margin-top: 50px;
    margin-bottom: 60px;
  }

  .about-stat-card {
    margin-bottom: 30px;
  }

  .about-cta-box {
    padding: 50px 35px;
  }

  .about-cta-box .cta-content h3 {
    font-size: 30px;
  }

  .about-cta-box .cta-content p {
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  .about-us-redesign {
    padding: 60px 0;
  }

  .about-description-text {
    margin: 15px auto 20px;
  }

  .about-description-text p {
    font-size: 18px;
    line-height: 1.8;
  }

  .about-rectangular-images-row {
    margin-top: 25px;
    margin-bottom: 0;
  }

  .rectangular-image-wrapper {
    max-width: 100%;
    height: 300px;
    margin-bottom: 20px;
    cursor: pointer;
  }

  /* On mobile, show overlay on tap/click */
  .rectangular-image-wrapper.mobile-active {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(65, 133, 221, 0.25);
    border-color: var(--accent-color);
  }

  .overlay-content {
    padding: 20px;
  }

  .overlay-content h5 {
    font-size: 32px;
    margin-bottom: 12px;
  }

  .overlay-content p {
    font-size: 16px;
  }

  .rectangular-image-caption {
    font-size: 18px;
  }

  .about-stats-row {
    margin-top: 40px;
    margin-bottom: 50px;
  }

  /* Ensure 2x2 grid layout for stat cards on mobile */
  .about-stats-row > [class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 10px;
  }

  .about-stat-card {
    margin-bottom: 0;
    padding: 25px 20px;
  }
  
  .about-stat-card .stat-icon img {
    max-width: 60px;
  }
  
  .about-stat-card .stat-content h3 {
    font-size: 36px;
  }
  
  .about-stat-card .stat-content p {
    font-size: 14px;
  }

  .about-stat-card .stat-content h3 {
    font-size: 40px;
  }

  .about-feature-card {
    padding: 30px 25px;
  }

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

  .about-cta-box {
    padding: 40px 25px;
  }

  .about-cta-box .cta-content h3 {
    font-size: 26px;
  }

  .about-cta-box .cta-content p {
    font-size: 15px;
  }

  .about-cta-box .cta-buttons {
    flex-direction: column;
  }

  .about-cta-box .btn-default {
    width: 100%;
  }
}

/* Light Theme Overrides for About Section */
.theme-light .about-stat-card {
  background: var(--card-bg);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.theme-light .about-stat-card:hover {
  background: var(--card-bg);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.theme-light .about-feature-card {
  background: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.theme-light .about-feature-card:hover {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

/************************************/
/*** 	  07. Our Services css 	  ***/
/************************************/

.our-services{
	position: relative;
	padding: 90px 0 80px;
	z-index: 1;
	overflow: hidden; /* Contain floating icons */
}

/* Darker background gradient for services section */
.theme-dark .our-services,
.theme-light .our-services {
	background: linear-gradient(
		135deg,
		#152a4a 0%,
		#1f3a65 25%,
		#3a1f4a 50%,
		#4a2a5a 75%,
		#5a3a6a 100%
	) !important;
}

/* Achievements section - white background */
.theme-dark .our-achievements,
.theme-light .our-achievements {
	background-color: #FFFFFF !important;
}

/* Floating Icons Watermark - Performance Optimized */
.floating-icons-watermark {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none; /* Don't interfere with interactions */
	z-index: 0; /* Behind content */
	overflow: visible; /* Allow icons to be visible */
	contain: layout style paint; /* Performance optimization */
	min-height: 600px; /* Ensure minimum height for visibility */
	/* Debug: Uncomment to see watermark container */
	/* background: rgba(255, 0, 0, 0.05); */
}

.floating-icon-item {
	position: absolute;
	opacity: 0.35; /* Visible watermark */
	will-change: transform; /* GPU acceleration hint */
	transform: translateZ(0); /* Force GPU acceleration */
	animation: floatIcon var(--animation-duration, 20s) ease-in-out infinite;
	animation-delay: var(--animation-delay, 0s);
	top: var(--start-y, 15%);
	contain: layout style paint; /* Performance optimization */
}

/* Left side icons - positioned on far left */
.floating-icon-left {
	left: 2% !important; /* Far left */
}

/* Right side icons - positioned on far right */
.floating-icon-right {
	right: 2% !important; /* Far right */
	left: auto !important;
}

/* Floating Icon Above Service Card Icon */
.floating-icon-above-service {
	position: absolute;
	top: 20px;
	left: 40px;
	z-index: 1;
	opacity: 0.35;
	will-change: transform;
	animation: floatIcon 20s ease-in-out infinite;
	pointer-events: none;
}

.floating-icon-above-service i {
	font-size: 70px;
	color: rgba(255, 255, 255, 0.2);
	-webkit-text-stroke: 2px rgba(255, 255, 255, 0.25);
	-webkit-text-fill-color: transparent;
	display: block;
	line-height: 1;
}

.floating-icon-above-service img {
	width: 70px;
	height: 70px;
	object-fit: contain;
	filter: brightness(0) saturate(100%) invert(15%) sepia(30%) saturate(2000%) hue-rotate(200deg) brightness(0.8);
	display: block;
	opacity: 0.2;
}

/* Responsive adjustments for floating icon above service */
@media (max-width: 991px) {
	.floating-icon-above-service {
		left: 30px;
	}
	
	.floating-icon-above-service i {
		font-size: 60px;
	}
	
	.floating-icon-above-service img {
		width: 60px;
		height: 60px;
	}
}

@media (max-width: 767px) {
	.floating-icon-above-service {
		left: 20px;
		top: 15px;
	}
	
	.floating-icon-above-service i {
		font-size: 50px;
	}
	
	.floating-icon-above-service img {
		width: 50px;
		height: 50px;
	}
	
	.floating-icon-above-service {
		opacity: 0.25;
	}
}

.floating-icon-item i {
	font-size: 70px; /* Smaller watermark size for better performance */
	color: rgba(255, 255, 255, 0.2);
	-webkit-text-stroke: 2px rgba(255, 255, 255, 0.25);
	-webkit-text-fill-color: transparent;
	display: block;
	transform: rotate(0deg);
	transition: none; /* Disable transitions for better performance */
	/* Removed text-shadow for better performance */
	line-height: 1;
}

.floating-icon-item img {
	width: 70px;
	height: 70px;
	object-fit: contain;
	filter: brightness(0) saturate(100%) invert(15%) sepia(30%) saturate(2000%) hue-rotate(200deg) brightness(0.8);
	display: block;
	transform: rotate(0deg);
	transition: none; /* Disable transitions for better performance */
	opacity: 0.2;
}

/* Floating animation - smooth and performant - vertical movement only */
/* Removed opacity changes for better performance - opacity stays constant */
@keyframes floatIcon {
	0% {
		transform: translateY(0) rotate(0deg) translateZ(0);
	}
	25% {
		transform: translateY(-40px) rotate(5deg) translateZ(0);
	}
	50% {
		transform: translateY(30px) rotate(-5deg) translateZ(0);
	}
	75% {
		transform: translateY(-20px) rotate(3deg) translateZ(0);
	}
	100% {
		transform: translateY(0) rotate(0deg) translateZ(0);
	}
}

/* Responsive adjustments for floating icons */
@media (max-width: 991px) {
	.floating-icon-item i {
		font-size: 60px;
	}
	
	.floating-icon-item img {
		width: 60px;
		height: 60px;
	}
	
	.floating-icon-left {
		left: 1% !important;
	}
	
	.floating-icon-right {
		right: 1% !important;
	}
}

@media (max-width: 767px) {
	.floating-icon-item i {
		font-size: 50px;
	}
	
	.floating-icon-item img {
		width: 50px;
		height: 50px;
	}
	
	/* Reduce opacity on mobile for better performance */
	.floating-icon-item {
		opacity: 0.25;
	}
	
	/* Hide half of the icons on mobile to reduce GPU load */
	.floating-icon-item:nth-child(n+5) {
		display: none;
	}
	
	.floating-icon-left {
		left: 0.5% !important;
	}
	
	.floating-icon-right {
		right: 0.5% !important;
	}
}

.our-services .row {
	gap: 0;
}

.our-services .row > [class*="col-"] {
	padding-left: 20px;
	padding-right: 20px;
}

/* Wider container for services section */
.our-services .container {
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 50px;
  padding-right: 50px;
  position: relative;
  z-index: 1; /* Above floating icons */
}

/* Wider section title for services - allow text on one line */
.our-services .section-title {
  max-width: 100%;
  width: 100%;
}

.our-services .section-title h2 {
  white-space: nowrap;
}

/* Responsive: allow wrapping on smaller screens */
@media (max-width: 1400px) {
  .our-services .section-title h2 {
    white-space: normal;
  }
}

/* White text for services section title h2 only */
.our-services .section-title h2 {
  color: #FFFFFF !important;
  font-size: 30px !important;
  font-weight: 500 !important;
}

/* Services Decorative SVG - Top Right Corner - behind content so it never blocks clicks */
.services-decorative-svg-top-right {
  position: absolute;
  top: -20px;
  right: -20px;
  z-index: 0;
  width: 600px;
  height: auto;
  opacity: 0.8;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.services-decorative-svg-top-right:hover {
  opacity: 1;
  transform: scale(1.05);
}

.services-decorative-svg-top-right .services-decorative-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive adjustments for services decorative SVG top right */
@media (max-width: 1200px) {
  .services-decorative-svg-top-right {
    width: 500px;
  }
}

@media (max-width: 991px) {
  .services-decorative-svg-top-right {
    width: 450px;
    top: -20px;
    right: -20px;
  }
}

@media (max-width: 767px) {
  .services-decorative-svg-top-right {
    width: 350px;
    top: -20px;
    right: -20px;
  }
}

/* Services Decorative SVG - Bottom Left Corner - behind content so it never blocks clicks */
.services-decorative-svg-bottom-left {
  position: absolute;
  bottom: -20px;
  left: -20px;
  z-index: 0;
  width: 600px;
  height: auto;
  opacity: 0.8;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.services-decorative-svg-bottom-left:hover {
  opacity: 1;
  transform: scale(1.05);
}

.services-decorative-svg-bottom-left .services-decorative-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive adjustments for services decorative SVG bottom left */
@media (max-width: 1200px) {
  .services-decorative-svg-bottom-left {
    width: 500px;
  }
}

@media (max-width: 991px) {
  .services-decorative-svg-bottom-left {
    width: 450px;
    bottom: -20px;
    left: -20px;
  }
}

@media (max-width: 767px) {
  .services-decorative-svg-bottom-left {
    width: 350px;
    bottom: -20px;
    left: -20px;
  }
}

/* Responsive margins for services section */
@media (max-width: 1600px) {
  .our-services .container {
    max-width: 1600px;
    padding-left: 40px;
    padding-right: 40px;
  }
  
  .our-services .section-title {
    max-width: 100%;
    width: 100%;
  }
}

@media (max-width: 1400px) {
  .our-services .container {
    max-width: 1400px;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  .our-services .section-title {
    max-width: 100%;
    width: 100%;
  }
  
  .our-services .section-title h2 {
    white-space: normal;
  }
}

@media (max-width: 1200px) {
  .our-services .container {
    max-width: 1200px;
    padding-left: 25px;
    padding-right: 25px;
  }
  
  .our-services .section-title {
    max-width: 100%;
    width: 100%;
  }
}

@media (max-width: 991px) {
  .our-services .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .our-services .section-title {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .our-services .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

.service-item{
	background-color: var(--secondary-color);
	border: 1px solid var(--divider-color);
	backdrop-filter: blur(220px);
	-webkit-backdrop-filter: blur(220px);
	border-radius: 30px;
	height: calc(100% - 30px);
	min-height: 320px;
	margin-bottom: 30px;
	padding: 40px 35px;
	transition: all 0.4s ease-in-out;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 2px 10px var(--shadow-color, rgba(0, 0, 0, 0.1));
}

.service-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(to right, var(--accent-color), var(--accent-secondary-color));
	transform: scaleX(0);
	transition: transform 0.4s ease;
}

.service-item:hover::before {
	transform: scaleX(1);
}

.service-item:hover{
	transform: translateY(-4px);
	border-color: var(--accent-color);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25) !important;
}

/* Service Overlay - Similar to Case Study Overlay */
.service-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(2px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transition: all 0.4s ease;
	z-index: 2;
	border-radius: 30px;
	overflow: hidden;
	box-sizing: border-box;
	pointer-events: none !important;
}

/* Ensure overlay content also doesn't block clicks */
.service-overlay-content {
	pointer-events: none !important;
}

/* Overlay visibility on hover */
.service-item:hover .service-overlay {
	opacity: 1;
	visibility: visible;
}

.service-overlay-content {
	text-align: center;
	color: #fff !important;
	transform: translateY(20px);
	transition: transform 0.4s ease 0.1s;
	max-width: 100%;
	width: 100%;
	padding: 0 20px;
	box-sizing: border-box;
	overflow: visible;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	max-height: 100%;
}

/* Ensure all text in overlay is white */
.service-overlay-content * {
	color: #fff !important;
}

.service-item:hover .service-overlay-content {
	transform: translateY(0);
}

/* Letter Reveal Title for Services */
.service-overlay-content .letter-reveal-title {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35em;
	position: relative;
	color: #fff !important;
	max-width: 100%;
	width: 100%;
	overflow: visible;
	text-align: center;
}

/* Word wrapper keeps letters of a word together */
.service-overlay-content .word-wrapper {
	display: inline-block;
	white-space: nowrap;
}

.service-overlay-content .letter-char {
	display: inline-block;
	opacity: 0;
	transform: translateY(20px) scale(0.8);
	color: #fff !important;
	transition: none;
}

/* Letter animation on hover/active */
.service-overlay-content .letter-char.animate {
	animation: letterReveal 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

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

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

.service-item .icon-box i{
	font-size: 50px;
	color: var(--accent-color);
	transition: all 0.4s ease-in-out;
	-webkit-text-stroke: 2px var(--accent-color);
	-webkit-text-fill-color: transparent;
}

.service-item:hover .icon-box img{
	filter: brightness(0) saturate(100%) invert(15%) sepia(30%) saturate(2000%) hue-rotate(200deg) brightness(0.8);
	transform: rotateY(180deg); 
}

.service-item:hover .icon-box i{
	-webkit-text-stroke: 2px var(--primary-color);
	-webkit-text-fill-color: transparent;
	transform: rotateY(180deg);
}

.service-item-content{
	margin-bottom: 30px;
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	position: relative;
	z-index: 1;
}

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

.service-item-content h3 a{
	color: inherit;
	transition: all 0.4s ease-in-out;
}

.service-item-content h3 a:hover{
	color: var(--accent-secondary-color);
}

.service-item-content p{
	margin-bottom: 0;
	flex: 1;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
}

/* New Service Item Design - Flat, Clean Style - Invisible Cards */
.service-item-new {
	background-color: transparent;
	border: none;
	border-radius: 0;
	padding: 50px 40px;
	transition: all 0.3s ease-in-out;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	box-shadow: none;
	margin-bottom: 30px;
	min-height: auto;
	height: auto;
}

.service-item-new:hover {
	transform: none;
	box-shadow: none;
}

/* Icon Box - Match main/services page styling */
.service-item-new .service-icon-box {
	margin-bottom: 30px;
	position: relative;
	z-index: 1;
}

.service-item-new .service-icon-box img {
	width: 100%;
	max-width: 60px;
	transition: all 0.4s ease-in-out;
	filter: brightness(0) saturate(100%) invert(15%) sepia(30%) saturate(2000%) hue-rotate(200deg) brightness(0.8);
}

.service-item-new .service-icon-box i {
	font-size: 60px;
	color: #FFFFFF;
	transition: all 0.4s ease-in-out;
	-webkit-text-stroke: 1px #FFFFFF;
	-webkit-text-fill-color: transparent;
}

.service-item-new:hover .service-icon-box img {
	filter: brightness(0) saturate(100%) invert(35%) sepia(82%) saturate(1347%) hue-rotate(195deg) brightness(93%) contrast(88%);
	transform: rotateY(180deg);
}

.service-item-new:hover .service-icon-box i {
	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-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 1px #FFFFFF;
	transform: rotateY(180deg);
	transition: all 0.4s ease-in-out, background-position 0.4s ease-in-out;
}

.service-item-new:hover .service-icon-box i:hover {
	background-position: right center;
}

/* Content Styling - Centered */
.service-item-content-new {
	text-align: center;
	width: 100%;
	margin-bottom: 0;
}

.service-item-content-new h3 {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 12px;
	color: #FFFFFF !important;
	line-height: 1.3;
	display: block;
	overflow: hidden;
	position: relative;
}

.service-item-content-new h3 a {
	color: #FFFFFF !important;
	text-decoration: none;
	transition: color 0.3s ease-in-out;
	display: block;
}

.service-item-content-new h3 a:hover {
	color: var(--accent-color) !important;
}

/* Letter Reveal Title for Services - Match Case Studies */
.service-item-content-new .letter-reveal-title {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35em;
	position: relative;
	color: #FFFFFF !important;
	overflow: visible;
	text-align: center;
}

.service-item-content-new .word-wrapper {
	display: inline-block;
	white-space: nowrap;
}

.service-item-content-new .letter-char {
	display: inline-block;
	opacity: 1;
	transform: translateY(0) scale(1);
	color: #FFFFFF !important;
	transition: none;
}

.service-item-content-new:hover .letter-char {
	opacity: 0;
	transform: translateY(20px) scale(0.8);
}

.service-item-content-new .letter-char.animate {
	animation: letterReveal 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.service-item-content-new p {
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8) !important;
	margin-bottom: 0;
	display: block;
	-webkit-line-clamp: none;
	line-clamp: none;
	-webkit-box-orient: vertical;
	overflow: visible;
	text-overflow: clip;
}

/* Ensure titles are white, but allow icons to keep their colors */
.service-item-content-new h3,
.service-item-content-new h3 a {
	color: #FFFFFF !important;
}

/* Responsive adjustments */
@media (max-width: 991px) {
	.service-item-new {
		padding: 40px 30px;
		margin-bottom: 30px;
	}
	
	.service-item-new .service-icon-box {
		margin-bottom: 25px;
	}
	
	.service-item-new .service-icon-box i {
		font-size: 55px;
	}
	
	.service-item-new .service-icon-box img {
		max-width: 55px;
	}
	
	.service-item-content-new h3 {
		font-size: 20px;
		color: #FFFFFF !important;
	}
	
	.service-item-content-new p {
		font-size: 15px;
		color: rgba(255, 255, 255, 0.8) !important;
	}
}

@media (max-width: 767px) {
	.service-item-new {
		padding: 30px 20px;
		margin-bottom: 15px;
	}
	
	.service-item-new .service-icon-box {
		margin-bottom: 15px;
	}
	
	.service-item-new .service-icon-box i {
		font-size: 50px;
	}
	
	.service-item-new .service-icon-box img {
		max-width: 50px;
	}
	
	.service-item-content-new h3 {
		font-size: 18px;
		margin-bottom: 8px;
		color: #FFFFFF !important;
	}
	
	/* Hide service description on mobile */
	.service-item-content-new p {
		display: none !important;
	}
	
	/* Reduce padding between service cards on mobile */
	.our-services .row > [class*="col-"] {
		padding-left: 10px !important;
		padding-right: 10px !important;
		margin-bottom: 0 !important;
	}
}

.service-btn{
	margin-top: auto;
	padding-top: 20px;
	flex-shrink: 0;
	text-align: left;
	position: relative;
	z-index: 1;
}

.service-btn .readmore-btn{
	display: inline-block;
	line-height: 1em;
	background: var(--secondary-color);
	padding: 12px 20px;
	border-radius: 100px;
	overflow: hidden;
}

.service-btn .readmore-btn::after{
	display: none;
}

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

.service-btn .readmore-btn::before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -15%;
	right: 0;
    width: 0;
    height: 106%;
    background: linear-gradient(to left, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
    transform: skew(45deg);
    transition: all 0.4s ease-in-out;
	z-index: -1;
}

.service-btn .readmore-btn:hover::before{
	width: 100%;
    transform: skew(0deg);
    left: 0;
}

.service-btn .readmore-btn::after{
	display: none;
}

/************************************/
/***    08. Our Specialties css   ***/
/************************************/

.our-specialties{
	position: relative;
	padding: 0 0 30px 0;
	z-index: 1;
	background-color: #FFFFFF !important;
}

/* Wider container for specialties section */
.our-specialties .container {
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 50px;
  padding-right: 50px;
}

/* Wider section title for specialties */
.our-specialties .section-title {
  max-width: 1400px;
  padding-top: 50px;
}

/* Reduce font size for specialties section h2 */
.our-specialties .section-title h2 {
  font-size: 30px !important;
  font-weight: 500 !important;
}

/* Reduce padding below description text in specialties section */
.our-specialties .section-title p {
  margin-bottom: 10px;
  font-size: 16px;
}

/* Responsive margins for specialties section */
@media (max-width: 1600px) {
  .our-specialties .container {
    max-width: 1600px;
    padding-left: 40px;
    padding-right: 40px;
  }
  
  .our-specialties .section-title {
    max-width: 1300px;
  }
}

@media (max-width: 1400px) {
  .our-specialties .container {
    max-width: 1400px;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  .our-specialties .section-title {
    max-width: 1200px;
  }
}

@media (max-width: 1200px) {
  .our-specialties .container {
    max-width: 1200px;
    padding-left: 25px;
    padding-right: 25px;
  }
  
  .our-specialties .section-title {
    max-width: 1100px;
  }
}

@media (max-width: 991px) {
  .our-specialties .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .our-specialties .section-title {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .our-specialties .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Ensure video and laptop stay grouped and scale together */
.laptop-video-unified-container {
  position: relative;
}

.laptop-video-unified-container img {
  width: 100%;
  height: auto;
  display: block;
}

/* Add padding below laptop/video group */
.laptop-video-container {
  margin-bottom: 30px;
}

.laptop-video-screen {
  position: absolute;
  /* Video position scales with container using percentages */
  top: calc(8% - 5px);
  left: calc(16% - 1px);
  right: calc(16% - 1px);
  bottom: calc(42% - 5px);
}

/* Responsive styles for laptop/video group */
@media (max-width: 991px) {
  .laptop-video-container {
    transform: translateY(-100px) !important;
  }
  
  .laptop-video-unified-container {
    width: 110% !important;
    margin-left: -5% !important;
    margin-right: -5% !important;
  }
  
  /* Ensure video scales proportionally with laptop */
  .laptop-video-screen {
    top: calc(8% - 5px) !important;
    left: calc(16% - 1px) !important;
    right: calc(16% - 1px) !important;
    bottom: calc(42% - 5px) !important;
    /* Scale transform proportionally - reduce by 10% to match container */
    transform: translate(-2px, calc(85px * 0.9)) !important;
  }
}

@media (max-width: 767px) {
  .laptop-video-container {
    transform: translateY(0) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    margin-top: 20px !important;
  }
  
  .laptop-video-unified-container {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
    visibility: visible !important;
  }
  
  /* Ensure video scales proportionally with laptop on mobile */
  .laptop-video-screen {
    top: calc(8% - 5px) !important;
    left: calc(16% - 1px) !important;
    right: calc(16% - 1px) !important;
    bottom: calc(42% - 5px) !important;
    /* Scale transform for mobile - container is 100% so use smaller value */
    transform: translate(-2px, 38px) !important;
  }
  
  .our-specialties .col-lg-6:last-child {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin-top: 20px !important;
  }
  
  .our-specialties .row {
    display: block !important;
  }
  
  .our-specialties .row > .col-lg-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    display: block !important;
  }
  
  .our-specialties {
    overflow: visible !important;
    padding-bottom: 50px !important;
  }
  
  .laptop-video-container {
    margin-bottom: 0 !important;
  }
  
  .laptop-video-screen {
    transform: translate(-2px, 38px) !important;
  }
}

/* Mobile landscape orientation - hide laptop/video */
@media (max-width: 991px) and (orientation: landscape) {
  .laptop-video-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .our-specialties .col-lg-6:last-child {
    display: none !important;
  }

  .our-specialties {
    padding-bottom: 30px !important;
  }
}

.our-specialties-content{
	margin-right: 15px;
}

.specialties-items-list{
	margin-top: 40px;
	margin-bottom: 30px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
}

.specialties-item{
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	text-align: left;
	padding: 0;
	border-radius: 10px;
	transition: all 0.3s ease;
	gap: 15px;
}

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

.specialties-item-icon{
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	margin-bottom: 0;
	flex-shrink: 0;
}

.specialties-item .icon-box{
	width: auto;
	height: auto;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	background: transparent;
	border-radius: 50%;
	margin: 0;
	padding: 0;
}

.specialties-item .icon-box img{
	max-width: 60px;
	height: auto;
	transition: all 0.4s ease-in-out;
}

.specialties-item:hover .icon-box img{
	transform: scale(1.1);
}

.specialties-item-content{
	flex: 1;
	text-align: left;
}

.specialties-item-content h3{
	font-size: 22px;
	margin-bottom: 12px;
	font-weight: 700;
	color: #4B5563 !important;
	line-height: 1.3;
}

.specialties-item-content p{
	margin: 0;
	line-height: 1.6;
	color: #4B5563;
	font-size: 16px;
}

.specialties-item-divider{
	display: none;
}

.our-specialties .row.align-items-center {
	align-items: flex-end !important;
	display: flex;
}

.our-specialties .col-lg-6:last-child {
	display: flex !important;
	align-items: flex-start;
	flex: 1;
	padding-left: 15px;
}

.intro-video-box{
	position: relative;
	margin-top: -100px !important;
	width: 100%;
	height: auto;
	display: flex;
	align-items: flex-start;
}

.intro-bg-image{
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	width: 100%;
	height: auto;
	display: flex;
	align-items: flex-end;
}

.intro-bg-image video {
	width: 100% !important;
	height: 530px !important;
	object-fit: cover !important;
	border-radius: 10px !important;
	display: block !important;
}

.intro-bg-image figure{
	display: block;
}

.intro-bg-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

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

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

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

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

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

.video-play-button a i{
	font-size: 30px;
	color: var(--primary-color);
}

/************************************/
/*** 	  09.  Our Facts css 	  ***/
/************************************/

.our-facts{
	position: relative;
	padding: 90px 0;
	z-index: 1;
}

/* Wider container for facts section */
.our-facts .container {
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 50px;
  padding-right: 50px;
}

/* Wider section title for facts */
.our-facts .section-title {
  max-width: 1400px;
}

.our-facts .section-title h2 {
  font-size: 30px !important;
  font-weight: 500 !important;
}

/* Responsive margins for facts section */
@media (max-width: 1600px) {
  .our-facts .container {
    max-width: 1600px;
    padding-left: 40px;
    padding-right: 40px;
  }
  
  .our-facts .section-title {
    max-width: 1300px;
  }
}

@media (max-width: 1400px) {
  .our-facts .container {
    max-width: 1400px;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  .our-facts .section-title {
    max-width: 1200px;
  }
}

@media (max-width: 1200px) {
  .our-facts .container {
    max-width: 1200px;
    padding-left: 25px;
    padding-right: 25px;
  }
  
  .our-facts .section-title {
    max-width: 1100px;
  }
}

@media (max-width: 991px) {
  .our-facts .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .our-facts .section-title {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .our-facts .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

.our-facts-content{
	margin-right: 15px;
}

.facts-counter-box{
	display: flex;
	flex-wrap: wrap;
	gap: 30px 80px;
	margin-top: 40px;
}

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

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

.facts-counter-item:nth-child(2n + 2):before,
.facts-counter-item:last-child:before{
	display: none;
}

.facts-counter-item h2{
	font-size: 42px;
	margin-bottom: 5px;
}

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

.facts-image-box{
	position: relative;
	padding-left: 40px;
	overflow: visible;
	display: flex;
	align-items: center;
	height: 100%;
}

.facts-image{
	overflow: visible;
	height: auto;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.facts-image figure{
	display: block;
    mask-image: url(/images/facts-image-bg-shape.png);
    background-image: url(/images/facts-image-bg-shape.png);
    mask-size: contain;
    mask-position: center center;
    mask-repeat: no-repeat;
    width: 85%;
    max-width: 500px;
    height: auto;
    overflow: visible;
	margin: 0 auto;
}

.facts-image img{
	width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
    max-width: 100%;
	max-height: 550px;
}

/* Responsive adjustments for facts image */
@media (max-width: 1400px) {
  .facts-image figure {
    width: 90%;
    max-width: 450px;
  }
  
  .facts-image img {
    max-height: 500px;
  }
  
  .facts-image-box {
    padding-left: 30px;
  }
}

@media (max-width: 1200px) {
  .facts-image figure {
    width: 95%;
    max-width: 400px;
  }
  
  .facts-image img {
    max-height: 450px;
  }
  
  .facts-image-box {
    padding-left: 20px;
  }
}

@media (max-width: 991px) {
  .facts-image-box {
    padding-left: 0;
    margin-top: 40px;
  }
  
  .facts-image figure {
    width: 100%;
    max-width: 100%;
  }
  
  .facts-image img {
    max-height: 400px;
  }
}

.award-box{
	position: absolute;
	top: 15%;
	left: 0;
	transform: translateY(-50%);
	background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
	border-radius: 16px;
	padding: 20px 25px;
	max-width: 200px;
	z-index: 1;
	text-align: center;
	box-shadow: 0 8px 25px rgba(65, 133, 221, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
	backdrop-filter: blur(10px);
	overflow: hidden;
}

.award-box::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
	animation: awardShimmer 3s ease-in-out infinite;
	pointer-events: none;
}

@keyframes awardShimmer {
	0%, 100% {
		opacity: 0.5;
		transform: rotate(0deg);
	}
	50% {
		opacity: 0.8;
		transform: rotate(180deg);
	}
}

.award-box::after {
	content: '🏆';
	position: absolute;
	top: 8px;
	right: 8px;
	font-size: 24px;
	opacity: 1;
	filter: brightness(0) saturate(100%) invert(60%) sepia(95%) saturate(1352%) hue-rotate(3deg) brightness(75%) contrast(105%);
}

.award-box h2{
	font-size: 48px;
	margin-bottom: 8px;
	color: #ffffff;
	font-weight: 700;
	line-height: 1;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	position: relative;
	z-index: 1;
	letter-spacing: -1px;
}

.award-box p{
	color: rgba(255, 255, 255, 0.95);
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1.4;
	position: relative;
	z-index: 1;
	text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}

.facts-video-content{
	position: absolute;
	right: 30px;
	bottom: 30px;
	display: flex;
	align-items: center;
	max-width: 220px;
	z-index: 1;
}

.facts-video-content .video-play-button a{
	width: 60px;
	height: 60px;
}

.facts-video-content .video-play-button a::before,
.facts-video-content .video-play-button a::after{
	display: none;
}

.facts-video-content .video-play-button i{
	font-size: 22px;
}

.facts-video-content h3{
	font-size: 20px;
	line-height: 1.3em;
	margin-left: 20px;
}

/************************************/
/*** 	10.  Why Choose Us css 	  ***/
/************************************/

.why-choose-us{
	position: relative;
	padding: 90px 0;
	z-index: 1;
	background: linear-gradient(
		135deg,
		#1e3a5f 0%,
		#2d4a7a 25%,
		#4a2c5f 50%,
		#5a3a7a 75%,
		#6b4a8a 100%
	);
	transform: translateZ(0);
	will-change: scroll-position;
	contain: layout style paint;
}

/* Wider container for why-choose-us section */
.why-choose-us .container {
	max-width: 1800px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 50px;
	padding-right: 50px;
}

/* Responsive margins for why-choose-us section */
@media (max-width: 1600px) {
	.why-choose-us .container {
		max-width: 1600px;
		padding-left: 40px;
		padding-right: 40px;
	}
}

@media (max-width: 1400px) {
	.why-choose-us .container {
		max-width: 1400px;
		padding-left: 30px;
		padding-right: 30px;
	}
}

@media (max-width: 1200px) {
	.why-choose-us .container {
		max-width: 1200px;
		padding-left: 25px;
		padding-right: 25px;
	}
}

@media (max-width: 991px) {
	.why-choose-us .container {
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media (max-width: 767px) {
	.why-choose-us .container {
		padding-left: 15px;
		padding-right: 15px;
	}
}

.why-choose-box{
	background: rgba(255, 255, 255, 0.8) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 4px solid rgba(255, 255, 255, 0.3);
	border-radius: 30px;
	padding: 80px 70px;
	display: flex;
	align-items: center;
	box-shadow: 0 10px 60px rgba(0, 0, 0, 0.2);
	position: relative;
	overflow: hidden;
	transform: translateZ(0);
	will-change: transform;
	contain: layout style paint;
}

.why-choose-image{
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 500px;
	transform: translateZ(0);
	will-change: transform;
}

.why-choose-image figure{
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	overflow: hidden;
	margin: 0;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	transform: translateZ(0);
	contain: layout style paint;
}

.why-choose-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 20px;
	transition: transform 0.4s ease;
	transform: translateZ(0);
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* Apply image-anime hover effect - diagonal shine animation */
.why-choose-image figure.image-anime {
	position: relative;
	overflow: hidden;
}

.why-choose-image figure.image-anime:after {
	content: "";
	position: absolute;
	width: 200%;
	height: 0%;
	left: 50%;
	top: 50%;
	background-color: rgba(255, 255, 255, 0.3);
	transform: translate(-50%, -50%) rotate(-45deg) translateZ(0);
	z-index: 1;
	pointer-events: none;
	will-change: height;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

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

/* Align section title with top of image */
.why-choose-box .section-title {
	margin-top: 0;
	margin-bottom: 40px;
	max-width: 100%;
	width: 100%;
}

/* Add padding below the title (h3) */
.why-choose-box .section-title h3 {
	margin-bottom: 40px;
}

/* Add padding between subtitle (h2) and info items */
.why-choose-box .section-title h2 {
	margin-bottom: 70px;
	font-size: 30px !important;
	font-weight: 500 !important;
}

/* Adjust spacing for info items list */
.why-choose-box .why-choose-item-list {
	margin-top: 0;
}

/* Responsive adjustments for why-choose-image */
@media (max-width: 1400px) {
	.why-choose-image {
		min-height: 450px;
	}
}

@media (max-width: 1200px) {
	.why-choose-image {
		min-height: 400px;
	}
}

@media (max-width: 991px) {
	.why-choose-box {
		flex-direction: column;
	}
	
	.why-choose-image {
		min-height: 350px;
		margin-bottom: 40px;
	}
}

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

.why-choose-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	margin-top: 40px;
	justify-content: space-between;
}

.why-choose-item{
	position: relative;
	width: calc(33.33% - 27px);
	flex: 1;
	min-width: 0;
}

.why-choose-item::before{
    content: '';
    position: absolute;
    right: -20px;
    top: 0;
    bottom: 0;
    border-right: 1px solid rgba(255, 255, 255, 1);
    height: 100%;
    width: 1px;
}

.why-choose-item:nth-child(3n):before,
.why-choose-item:last-child:before{
	display: none;
}

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

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

.why-choose-item:hover .icon-box img{
	filter: brightness(0) saturate(100%) invert(15%) sepia(30%) saturate(2000%) hue-rotate(200deg) brightness(0.8);
    transform: rotateY(180deg);
}

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

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

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

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

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

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

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

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

/************************************/
/*** 	  11. Case Study css 	  ***/
/************************************/

.case-study{
	position: relative;
    padding: 90px 0;
	z-index: 1;
	overflow: hidden;
	background-color: #FFFFFF !important;
}

/* Section Background SVG Styling (Reusable) */
.section-background-svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

/* Match case study h2 font size to specialties section */
.case-study .section-title h2 {
	font-size: 30px !important;
	font-weight: 500 !important;
}

/* Wider container for case study section */
.case-study .container {
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 50px;
  padding-right: 50px;
  position: relative;
  z-index: 2; /* Above background SVG */
}

/* Wider section title for case study - centered */
.case-study .section-title {
  max-width: 1400px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.case-study .section-title h3,
.case-study .section-title h2 {
  text-align: center;
}

/* Responsive margins for case study section */
@media (max-width: 1600px) {
  .case-study .container {
    max-width: 1600px;
    padding-left: 40px;
    padding-right: 40px;
  }
  
  .case-study .section-title {
    max-width: 1300px;
  }
}

@media (max-width: 1400px) {
  .case-study .container {
    max-width: 1400px;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  .case-study .section-title {
    max-width: 1200px;
  }
}

@media (max-width: 1200px) {
  .case-study .container {
    max-width: 1200px;
    padding-left: 25px;
    padding-right: 25px;
  }
  
  .case-study .section-title {
    max-width: 1100px;
  }
}

@media (max-width: 991px) {
  .case-study .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .case-study .section-title {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .case-study .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Case Study Item - Matching About Us Section */
.case-study-item{
	position: relative;
	margin-bottom: 0;
	text-align: center;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* Override theme.css background for case-study-item */
.theme-light .case-study-item,
.theme-dark .case-study-item {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* Case Study Image Wrapper - Exact copy from About Us */
.case-study-image{
	width: 100%;
	max-width: 420px;
	height: 420px;
	margin: 0 auto;
	border-radius: 16px;
	overflow: hidden;
	position: relative;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
	transition: all 0.4s ease;
	cursor: pointer;
	border: none !important;
	background: transparent !important;
}

/* Override any theme or other CSS that might add background */
.theme-light .case-study-image,
.theme-dark .case-study-image {
	background: transparent !important;
	border: none !important;
}

.case-study-image::before {
	display: none;
}

.case-study-image::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: transparent;
	opacity: 0;
	transition: opacity 0.4s ease;
	z-index: 1;
	border-radius: 16px;
}

.case-study-image:hover::after {
	opacity: 0;
}

.case-study-image:hover,
.case-study-item.mobile-active .case-study-image {
	border-color: var(--accent-color);
	transform: translateY(-8px);
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

/* When Link is used as the case-study-image container */
a.case-study-image {
	display: block;
	text-decoration: none;
	cursor: pointer;
}

/* Nested links inside case-study-image (legacy support) */
.case-study-image a,
.case-study-image Link {
	display: block;
	width: 100%;
	height: 100%;
	background: transparent;
	border: none;
	text-decoration: none;
	position: relative;
	z-index: 3;
	pointer-events: auto;
}

/* Ensure Next.js Link component (renders as <a>) works */
.case-study-image a[href] {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 3;
	pointer-events: auto;
}

.case-study-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
	background: transparent !important;
}

.case-study-image:hover img,
.case-study-item.mobile-active .case-study-image img{
	transform: scale(1.1);
}

/* Case Study Overlay - Exact copy from About Us */
.case-study-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(2px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transition: all 0.4s ease;
	z-index: 2;
	border-radius: 16px;
	overflow: hidden;
	box-sizing: border-box;
	pointer-events: none !important;
}

/* Ensure overlay content also doesn't block clicks */
.case-study-overlay-content {
	pointer-events: none !important;
}

/* Overlay visibility on hover - CSS handles this */
.case-study-image:hover .case-study-overlay,
.case-study-item.mobile-active .case-study-overlay {
	opacity: 1;
	visibility: visible;
}

.case-study-overlay-content {
	text-align: center;
	color: #fff !important;
	transform: translateY(20px);
	transition: transform 0.4s ease 0.1s;
	max-width: 100%;
	width: 100%;
	padding: 0 20px;
	box-sizing: border-box;
	overflow: visible;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	max-height: 100%;
}

/* Ensure all text in overlay is white */
.case-study-overlay-content * {
	color: #fff !important;
}

.case-study-image:hover .case-study-overlay-content,
.case-study-item.mobile-active .case-study-overlay-content {
	transform: translateY(0);
}

.case-study-overlay-content h5 {
	font-size: 26px !important;
	font-weight: 700;
	margin-bottom: 15px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #fff !important;
	display: block;
	overflow: hidden;
	position: relative;
	max-width: 100%;
	line-height: 1.3;
	word-wrap: break-word;
	word-break: break-word;
	font-family: var(--default-font, "Poppins", sans-serif);
}

/* Letter Reveal Title Styles */
.case-study-overlay-content .letter-reveal-title {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35em;
	position: relative;
	color: #fff !important;
	max-width: 100%;
	width: 100%;
	overflow: visible;
	text-align: center;
}

/* Word wrapper keeps letters of a word together */
.case-study-overlay-content .word-wrapper {
	display: inline-block;
	white-space: nowrap;
}

.case-study-overlay-content .letter-char {
	display: inline-block;
	opacity: 0;
	transform: translateY(20px) scale(0.8);
	color: #fff !important;
	transition: none;
}

/* Letter animation on hover/active */
.case-study-overlay-content .letter-char.animate {
	animation: letterReveal 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Letter Reveal Animation Keyframes */
@keyframes letterReveal {
	0% {
		opacity: 0;
		transform: translateY(20px) scale(0.8);
		filter: blur(4px);
	}
	60% {
		opacity: 1;
		filter: blur(0);
	}
	80% {
		transform: translateY(-3px) scale(1.05);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
		filter: blur(0);
	}
}

.case-study-overlay-content p {
	font-size: 15px;
	line-height: 1.5;
	color: #fff !important;
	margin: 0;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.1);
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
	max-width: 100%;
	word-wrap: break-word;
	word-break: break-word;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
}

/* Case Study Button - Hidden to match About Us section */
.case-study-btn{
	display: none;
}

/* Hide case study content below images */
.case-study-content{
    display: none;
}

.case-study .section-footer-text{
	margin-top: 30px;
}

/************************************/
/*** 	 12.  Our Features css 	  ***/
/************************************/

.our-features{
	position: relative;
	padding: 90px 0 60px;
	z-index: 1;
}

/* Wider container for features section */
.our-features .container {
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 50px;
  padding-right: 50px;
}

/* Wider section title for features */
.our-features .section-title {
  max-width: 100%;
  width: 100%;
}

.our-features .section-title h2 {
  font-size: 30px !important;
  font-weight: 500 !important;
}

/* Responsive margins for features section */
@media (max-width: 1600px) {
  .our-features .container {
    max-width: 1600px;
    padding-left: 40px;
    padding-right: 40px;
  }
  
  .our-features .section-title {
    max-width: 1300px;
  }
}

@media (max-width: 1400px) {
  .our-features .container {
    max-width: 1400px;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  .our-features .section-title {
    max-width: 1200px;
  }
}

@media (max-width: 1200px) {
  .our-features .container {
    max-width: 1200px;
    padding-left: 25px;
    padding-right: 25px;
  }
  
  .our-features .section-title {
    max-width: 1100px;
  }
}

@media (max-width: 991px) {
  .our-features .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .our-features .section-title {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .our-features .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

.features-item{
	position: relative;
	background-color: var(--secondary-color);
	border: 1px solid var(--divider-color);
	backdrop-filter: blur(220px);
	-webkit-backdrop-filter: blur(220px);
	border-radius: 30px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 30px 25px;
	overflow: hidden;
	box-shadow: 0 2px 10px var(--shadow-color, rgba(0, 0, 0, 0.1));
}

.features-item::before{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(90deg, var(--accent-color) 0.03%, var(--accent-secondary-color) 100%);
	border-radius: 500px 500px 0 0;
	width: 100%;
	height: 0;
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.features-item:hover:before{
	border-radius: 0;
	height: 100%;
}

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

.features-item .icon-box img{
	max-width: 50px;
	transition: all 0.4s ease-in-out;
}

.features-item:hover .icon-box img{
	filter: brightness(0) saturate(100%) invert(15%) sepia(30%) saturate(2000%) hue-rotate(200deg) brightness(0.8);
    transform: rotateY(180deg);
}

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

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

.features-item-content p{
	margin: 0;
	transition: all 0.3s ease-in-out;
}

.features-item:hover .features-item-content p{
	color: var(--primary-color);
}

/************************************/
/***    Our Process Section css   ***/
/************************************/

.our-process{
	position: relative;
	padding: 90px 0 60px;
	z-index: 1;
}

/* Wider container for process section */
.our-process .container {
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 50px;
  padding-right: 50px;
}

/* Wider section title for process */
.our-process .section-title {
  max-width: 100%;
  width: 100%;
}

.our-process .section-title h2 {
  font-size: 30px !important;
  font-weight: 500 !important;
}

/* Responsive margins for process section */
@media (max-width: 1600px) {
  .our-process .container {
    max-width: 1600px;
    padding-left: 40px;
    padding-right: 40px;
  }
  
  .our-process .section-title {
    max-width: 1300px;
  }
}

@media (max-width: 1400px) {
  .our-process .container {
    max-width: 1400px;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  .our-process .section-title {
    max-width: 1200px;
  }
}

@media (max-width: 1200px) {
  .our-process .container {
    max-width: 1200px;
    padding-left: 25px;
    padding-right: 25px;
  }
  
  .our-process .section-title {
    max-width: 1100px;
  }
}

@media (max-width: 991px) {
  .our-process .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .our-process .section-title {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .our-process .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  .our-process .section-title h2 {
    font-size: 22px !important;
  }
}

/************************************/
/*** 	  13. Our Pricing css 	  ***/
/************************************/

.our-pricing{
	position: relative;
	padding: 90px 0;
}

.our-pricing-swich{
	display: flex;
    justify-content: center;
    gap: 30px;
    align-items: center;
	padding: 0;
    margin-bottom: 60px;
}

.our-pricing-swich.form-switch .form-check-input{
	width: 75px;
    height: 40px;
    --bs-form-check-bg: var(--accent-secondary-color);
	--bs-form-switch-bg: url(/images/pricing-swich-circle.svg);
	background-size: 28px auto;
	background-position: left 5px center;
	border-radius: 100px;
	border: none;
	outline: none;
	box-shadow: none;
    margin: 0;
	transition: all 0.3s ease-in-out;
}

.form-switch .form-check-input:checked{
	background-color: var(--primary-color);
	background-position: right 5px center;
}

.our-pricing-swich label{
	font-size: 20px;
	font-weight: 500;
	text-transform: capitalize;
	color: var(--primary-color);
}

.our-pricing .section-title h2 {
	font-size: 30px;
	font-weight: 500;
}

.pricing-item{
	background-color: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border: 1px solid var(--divider-color);
	backdrop-filter: blur(220px);
	-webkit-backdrop-filter: blur(220px);
	border-radius: 30px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 40px;
}

.pricing-header{
	margin-bottom: 30px;
}

.pricing-header h3{
	background: var(--secondary-color);
	padding: 8px 20px;
}

.pricing-header h2{
	font-weight: 600;
}

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

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

.pricing-body ul li{
	position: relative;
	text-transform: capitalize;
	line-height: normal;
	color: var(--primary-color);
	padding-left: 30px;
	margin-bottom: 20px;
}

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

.pricing-body ul li::before{
	content: '\f058';
    font-family: 'FontAwesome';
	position: absolute;
    font-size: 20px;
    background: linear-gradient(90deg, var(--accent-color) 0.03%, var(--accent-secondary-color) 100%);
	-webkit-background-clip: text;
	background-clip: text;
    -webkit-text-fill-color: transparent;
    top: 2px;
    left: 0;
}

.pricing-btn .btn-default{
	width: 100%;
	text-align: center;
}

.pricing-item.highlighted-box{
	background-image: url('/images/pricing-item-bg-shape.png');
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: contain;
}

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

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

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

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

/************************************/
/*** 	14. Our Testimonial css   ***/
/************************************/

.our-testimonial{
	position: relative;
	padding: 90px 0 40px 0;
    z-index: 1;
	background-color: #FFFFFF !important;
	background: #FFFFFF !important;
	background-image: none !important;
	overflow: hidden;
}

.our-testimonial::before,
.our-testimonial::after {
	content: '';
	position: absolute;
	width: 200px;
	height: 200px;
	opacity: 0.15;
	z-index: 0;
	pointer-events: none;
	animation: floatQuotes 8s ease-in-out infinite;
}

.our-testimonial::before {
	top: 10%;
	left: 5%;
	background-color: #9333EA !important;
	-webkit-mask-image: url('/images/quotation mark.png');
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	-webkit-mask-position: center;
	mask-image: url('/images/quotation mark.png');
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: center;
	animation: floatQuotesRotated 8s ease-in-out infinite;
	animation-delay: 0s;
	background-image: none !important;
}

.our-testimonial::after {
	bottom: 5%;
	right: 5%;
	background-color: #9333EA !important;
	-webkit-mask-image: url('/images/quotation mark.png');
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	-webkit-mask-position: center;
	mask-image: url('/images/quotation mark.png');
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: center;
	animation: floatQuotesNormal 8s ease-in-out infinite;
	animation-delay: 4s;
	background-image: none !important;
}

@keyframes floatQuotesNormal {
	0%, 100% {
		transform: translateY(0) translateX(0);
		opacity: 0.15;
	}
	25% {
		transform: translateY(-20px) translateX(10px);
		opacity: 0.2;
	}
	50% {
		transform: translateY(-10px) translateX(-10px);
		opacity: 0.18;
	}
	75% {
		transform: translateY(-15px) translateX(5px);
		opacity: 0.2;
	}
}

@keyframes floatQuotesRotated {
	0%, 100% {
		transform: translateY(0) translateX(0) rotate(180deg);
		opacity: 0.15;
	}
	25% {
		transform: translateY(-20px) translateX(10px) rotate(185deg);
		opacity: 0.2;
	}
	50% {
		transform: translateY(-10px) translateX(-10px) rotate(175deg);
		opacity: 0.18;
	}
	75% {
		transform: translateY(-15px) translateX(5px) rotate(183deg);
		opacity: 0.2;
	}
}

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

/* Light theme only: keep white background; dark theme uses theme.css gradient (same as .our-features) */
.theme-light .our-testimonial {
	background-color: #FFFFFF !important;
	background: #FFFFFF !important;
	background-image: none !important;
}

/* Override theme.css for light theme only; dark theme uses theme.css gradient (no body selector so theme.css wins) */
.theme-light body .our-testimonial,
.theme-light html body .our-testimonial {
	background: #FFFFFF !important;
	background-color: #FFFFFF !important;
	background-image: none !important;
}

/* Average Rating - Top Right Corner */
.testimonial-rating-top-left {
	position: absolute;
	top: 0;
	right: 0;
	left: auto;
	z-index: 10;
	padding: 0;
	margin: 0;
}

.testimonial-rating-box {
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 18px 25px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	min-width: 180px;
}

.testimonial-rating-display {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}

.testimonial-rating-display .review-count-text {
	margin-bottom: 0;
}

.testimonial-rating-view-all {
	color: #9333EA !important;
	text-decoration: none;
	font-size: 16px;
	font-weight: 700;
	margin: 0;
	padding: 0;
	margin-top: 0;
	margin-bottom: 0;
	transition: all 0.3s ease;
}

.testimonial-rating-view-all:hover {
	color: #7C3AED !important;
	text-decoration: none;
	opacity: 0.8;
}

.testimonial-rating-display a.testimonial-rating-view-all {
	color: #9333EA !important;
}

.testimonial-rating-display .rating-value {
	font-size: 48px;
	font-weight: 700;
	color: var(--primary-color);
	margin: 0;
	line-height: 1;
}

.testimonial-rating-display .testimonial-rating {
	margin: 0;
}

.testimonial-rating-display .review-count-text {
	font-size: 14px;
	color: var(--primary-color);
	margin: 0;
	margin-bottom: 0;
	opacity: 0.8;
}

/* Responsive adjustments for top left rating */
@media (max-width: 1400px) {
	.testimonial-rating-top-left {
		right: 40px;
		left: auto;
	}
	
	.testimonial-rating-display .rating-value {
		font-size: 42px;
	}
}

@media (max-width: 991px) {
	.testimonial-rating-top-left {
		position: relative;
		top: 0;
		left: 0;
		margin-bottom: 30px;
		text-align: center;
	}
	
	.testimonial-rating-display {
		align-items: center;
	}
	
	.testimonial-rating-display .rating-value {
		font-size: 40px;
	}
}

/* Wider container for testimonial section */
.our-testimonial .container {
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 50px;
  padding-right: 50px;
  position: relative;
  overflow: visible;
}

/* Wider section title for testimonial */
.our-testimonial .section-title {
  max-width: 1400px;
  text-align: center;
  margin: 0 auto;
}

.our-testimonial .section-title h2 {
  font-size: 30px;
  font-weight: 500;
}

/* Responsive margins for testimonial section */
@media (max-width: 1600px) {
  .our-testimonial .container {
    max-width: 1600px;
    padding-left: 40px;
    padding-right: 40px;
  }
  
  .our-testimonial .section-title {
    max-width: 1300px;
  }
}

@media (max-width: 1400px) {
  .our-testimonial .container {
    max-width: 1400px;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  .our-testimonial .section-title {
    max-width: 1200px;
  }
}

@media (max-width: 1200px) {
  .our-testimonial .container {
    max-width: 1200px;
    padding-left: 25px;
    padding-right: 25px;
  }
  
  .our-testimonial .section-title {
    max-width: 1100px;
  }
}

@media (max-width: 991px) {
  .our-testimonial .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .our-testimonial .section-title {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .our-testimonial .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

.customer-review-box.testimonial-customer-box{
    max-width: 55%;
    margin: 0 0 0 auto;
	justify-content: end;
}

.customer-review-box{
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.customer-review-images{
    display: inline-flex;
}

.customer-image{
    margin-left: -14px;
}

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

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

/* Override reveal visibility for customer/author images - ensure visible on first load */
.customer-image figure.customer-image-figure,
.customer-image figure.image-anime,
.author-image figure.image-anime,
.testimonial-company-logo .gradient-border-circle,
.testimonial-item .gradient-border-circle {
    visibility: visible !important;
    opacity: 1 !important;
}

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

/* Gradient border container for circular images */
.gradient-border-circle {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: linear-gradient(var(--bg-color), var(--bg-color)) padding-box,
                linear-gradient(to left, var(--accent-color), var(--accent-secondary-color)) border-box;
    border: 2px solid transparent;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gradient-border-circle.size-sm {
    width: 55px;
    height: 55px;
}

.gradient-border-circle.size-md {
    width: 65px;
    height: 65px;
}

.gradient-border-circle.size-lg {
    width: 80px;
    height: 80px;
    min-width: 80px;
    min-height: 80px;
}

.gradient-border-circle img {
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* White background variant for logos */
.gradient-border-circle.bg-white {
    background: linear-gradient(white, white) padding-box,
                linear-gradient(to left, var(--accent-color), var(--accent-secondary-color)) border-box;
}

.customer-review-content{
    width: 52%;
}

/* Center customer review box when used at bottom */
.our-testimonial .customer-review-box.text-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 20px auto 15px auto;
}

.our-testimonial .customer-review-box.text-center .customer-review-images {
    justify-content: center;
}

.our-testimonial .customer-review-box.text-center .customer-review-content {
    width: auto;
    text-align: center;
}

.customer-review-content p{
    margin-bottom: 0;
}

.testimonial-review-box{
	border: 1px solid var(--divider-color);
    background: var(--secondary-color);
	backdrop-filter: blur(200px);
	-webkit-backdrop-filter: blur(200px);
	border-radius: 24px;
	text-align: center;
	padding: 50px;
}

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

.testimonial-review-header h2{
	font-size: 80px;
    margin-bottom: 5px;
}

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

.testimonial-rating i{
    color: var(--accent-secondary-color);
}

.testimonial-review-header p{
	margin: 0;
}

.testimonial-review-content{
	margin-top: 30px;
}

.testimonial-review-content h3{
	font-size: 20px;
	line-height: 1.3em;
}

.testimonial-slider{
	margin-left: 30px;
	position: relative;
	max-width: 1350px;
	margin: 10px auto 0 auto;
	min-height: 600px;
	background-color: transparent;
	background: transparent;
}

.testimonial-slider .swiper-wrapper{
	cursor: none;
	align-items: center;
	min-height: 600px;
	background-color: transparent;
	background: transparent;
}

.testimonial-slider .swiper {
	background-color: transparent;
	background: transparent;
}

.testimonial-slider .swiper-slide{
	height: auto;
	display: flex;
	margin-right: 0 !important;
	padding: 0 !important;
}

.testimonial-slider .swiper-slide-active .testimonial-card-v2 {
	height: 490px;
	width: 430px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(147, 51, 234, 0.3);
	border: 1px solid rgba(147, 51, 234, 0.5);
}

.testimonial-company-logo{
	margin-bottom: 30px;
}

.testimonial-company-logo img{
	max-width: 200px;
	max-height: 40px;
}

/* Override for circular logo with border in HomeTestimonialSection */
.testimonial-company-logo > div img{
	max-width: calc(100% - 4px) !important;
	max-height: calc(100% - 4px) !important;
	width: calc(100% - 4px) !important;
	height: calc(100% - 4px) !important;
}

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

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

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

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

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

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

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

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

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

.testimonial-btn{
	position: absolute;
	bottom: -70px;
	left: 50%;
	transform: translateX(-50%);
	display: none;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin: 0;
	padding: 0;
	z-index: 10;
	pointer-events: none;
	width: auto;
}

.testimonial-slider .testimonial-button-next,
.testimonial-slider .testimonial-button-prev{
	position: relative;
	width: 50px;
	height: 50px;
	background: var(--secondary-color);
	border-radius: 14px;
	transition: all 0.4s ease-in-out;
	pointer-events: all;
	z-index: 11;
}

.testimonial-slider .testimonial-button-prev{
	left: auto;
}

.testimonial-slider .testimonial-button-next{
	right: auto;
	left: auto;
}

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

.testimonial-slider .testimonial-button-next::before,
.testimonial-slider .testimonial-button-prev::before{
	content: '';
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url("/images/arrow-white.svg") no-repeat center center;
    background-size: 24px auto;
    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 Card Design V2 - Two-tone design */
.testimonial-card-v2 {
	background: #FFFFFF;
	border-radius: 20px;
	overflow: visible;
	height: 420px;
	width: 380px;
	display: flex;
	flex-direction: column;
	transition: all 0.4s ease;
	box-shadow: 0 6px 25px rgba(0, 0, 0, 0.25), 0 2px 10px rgba(0, 0, 0, 0.15);
	margin: 0 auto;
}

.testimonial-card-v2:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 35px rgba(0, 0, 0, 0.3), 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Upper Section - White Background */
.testimonial-card-top {
	background: #FFFFFF;
	padding: 40px;
	flex: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 20px 20px 0 0;
	min-height: 0;
	overflow: hidden;
}

.testimonial-card-text {
	font-size: 16px;
	line-height: 1.7;
	color: #000000;
	margin: 0;
	font-weight: 400;
	text-align: left;
	flex: 1;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	position: relative;
}

.testimonial-quote-mark {
	width: 36px;
	height: 36px;
	display: inline-block;
	vertical-align: baseline;
	opacity: 1;
	background-color: #F59E0B;
	-webkit-mask-image: url('/images/quotation mark.png');
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	mask-image: url('/images/quotation mark.png');
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

.testimonial-quote-mark-start {
	margin-right: 8px;
	margin-bottom: -2px;
	transform: rotate(180deg);
}

.testimonial-quote-mark-end {
	margin-left: 8px;
	margin-bottom: 0;
	margin-top: 0;
	vertical-align: top;
	transform: translateY(0);
	line-height: 1;
}

/* Large Quote Icon - Bottom Right, Overlapping */
.testimonial-card-quote-icon {
	position: absolute;
	bottom: 20px;
	right: 30px;
	color: #9333EA;
	opacity: 0.3;
	z-index: 1;
	pointer-events: none;
}

.testimonial-card-quote-icon svg {
	width: 120px;
	height: 90px;
}

/* Lower Section - Purple Background */
.testimonial-card-bottom {
	background: #2d4a6b;
	padding: 60px 30px 10px 30px;
	text-align: center;
	position: relative;
	border-radius: 0 0 20px 20px;
	height: 150px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

.testimonial-card-author-image {
	margin-bottom: 15px;
	display: flex;
	justify-content: center;
	position: absolute;
	top: -50px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	transition: all 0.4s ease;
}

.testimonial-slider .swiper-slide-active .testimonial-card-author-image {
	transform: translateX(-50%) scale(1.2);
	top: -100px;
}

.testimonial-card-author-avatar {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: #FFFFFF;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	border: 1.5px solid #FFFFFF !important;
	box-sizing: border-box;
	transition: all 0.4s ease;
}

.testimonial-slider .swiper-slide-active .testimonial-card-author-avatar {
	width: 140px;
	height: 140px;
	border: 5px solid #FFFFFF !important;
}

.testimonial-card-author-avatar img {
	width: calc(100% - 3px);
	height: calc(100% - 3px);
	border-radius: 50%;
	object-fit: cover;
	display: block;
	transition: all 0.4s ease;
}

.testimonial-slider .swiper-slide-active .testimonial-card-author-avatar img {
	transform: scale(1.05);
	filter: brightness(1.1) contrast(1.1);
}

.testimonial-card-author-name {
	font-size: 16px;
	font-weight: 700;
	color: #FFFFFF;
	margin: 0 0 8px 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.testimonial-card-author-company {
	font-size: 14px;
	color: #FFFFFF !important;
	margin: 0 0 2px 0;
	opacity: 1;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Star Rating */
.testimonial-card-rating {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
	margin-top: auto;
	padding-top: 2px;
	padding-bottom: 0;
}

.testimonial-card-rating i {
	font-size: 18px;
	color: rgba(255, 255, 255, 0.3);
	transition: color 0.2s ease;
}

.testimonial-card-rating i.filled {
	color: #FBBF24;
}

/* Responsive adjustments for testimonial cards V2 */
@media (max-width: 991px) {
	.testimonial-card-v2 {
		min-height: 380px;
		max-width: 350px;
	}
	
	.testimonial-card-top {
		padding: 30px;
	}
	
	.testimonial-card-bottom {
		padding: 50px 20px 10px 20px;
		height: 135px;
		flex-shrink: 0;
	}
	
	.testimonial-card-author-image {
		top: -42.5px;
	}
	
	.testimonial-card-author-avatar {
		width: 85px;
		height: 85px;
	}
	
	.testimonial-card-text {
		font-size: 15px;
	}
	
	.testimonial-card-quote-icon {
		bottom: 15px;
		right: 20px;
	}
	
	.testimonial-card-quote-icon svg {
		width: 100px;
		height: 75px;
	}
	
	.testimonial-card-author-name {
		font-size: 14px;
	}
	
	.testimonial-card-author-company {
		font-size: 13px;
	}
}

@media (max-width: 767px) {
	.testimonial-card-v2 {
		min-height: 360px;
		max-width: 320px;
	}
	
	.testimonial-card-top {
		padding: 25px;
	}
	
	.testimonial-card-bottom {
		padding: 45px 15px 10px 15px;
		height: 125px;
		flex-shrink: 0;
	}
	
	.testimonial-card-author-image {
		top: -37.5px;
	}
	
	.testimonial-card-author-avatar {
		width: 75px;
		height: 75px;
	}
	
	.testimonial-card-text {
		font-size: 14px;
		line-height: 1.6;
	}
	
	.testimonial-card-quote-icon {
		bottom: 10px;
		right: 15px;
	}
	
	.testimonial-card-quote-icon svg {
		width: 80px;
		height: 60px;
	}
	
	.testimonial-card-author-name {
		font-size: 13px;
	}
	
	.testimonial-card-author-company {
		font-size: 12px;
	}
}

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

.our-faqs{
	position: relative;
	padding: 90px 0;
	z-index: 1;
	font-family: var(--default-font, "Poppins", sans-serif);
	background-color: #1e3a5f !important;
}

.our-faqs .row.align-items-center {
	align-items: flex-start;
	display: flex;
	align-content: flex-start;
}

.our-faqs .col-lg-6:last-child {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: flex-start;
	align-self: flex-start;
}

.our-faqs .row.align-items-center > .col-lg-6:first-child {
	align-self: flex-start;
}

.our-faqs .col-lg-6:first-child {
	display: flex;
	flex-direction: column;
	padding-top: 0;
	margin-top: 0;
	align-self: flex-start;
	position: relative;
}

/* Wider container for FAQs section - Match About Us section margins */
.our-faqs .container {
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 50px;
  padding-right: 50px;
}

/* Wider section title for FAQs */
.our-faqs .section-title {
  max-width: 1400px;
  font-family: var(--default-font, "Poppins", sans-serif);
  margin-top: 0 !important;
}

.our-faqs .section-title h2,
.our-faqs .section-title h3 {
  font-family: var(--default-font, "Poppins", sans-serif);
}

.our-faqs .section-title h2 {
  font-size: 30px;
  font-weight: 500;
  color: #FFFFFF !important;
}

.our-faqs .section-title h2 span {
  font-weight: 700;
}

/* Responsive margins for FAQs section */
@media (max-width: 1600px) {
  .our-faqs .container {
    max-width: 1600px;
    padding-left: 40px;
    padding-right: 40px;
  }
  
  .our-faqs .section-title {
    max-width: 1300px;
  }
  
}

@media (max-width: 1400px) {
  .our-faqs .container {
    max-width: 1400px;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  .our-faqs .section-title {
    max-width: 1200px;
  }
  
}

@media (max-width: 1200px) {
  .our-faqs .container {
    max-width: 1200px;
    padding-left: 25px;
    padding-right: 25px;
  }
  
  .our-faqs .section-title {
    max-width: 1100px;
  }
  
}

@media (max-width: 991px) {
  .our-faqs .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .our-faqs .section-title {
    max-width: 100%;
  }
  
  .our-faqs .col-lg-6:first-child {
    margin-left: 0;
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .our-faqs .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  .our-faqs .col-lg-6:first-child {
    margin-left: 0;
    margin-top: 0;
  }

  .faqs-contact-box {
    flex-direction: column !important;
    padding: 15px 20px !important;
    gap: 12px;
    justify-content: center !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }

  .faqs-contact-item {
    width: 100% !important;
    justify-content: center !important;
  }

  .faqs-contact-item:first-child,
  .faqs-contact-item:last-child {
    order: unset;
  }
}

@media (max-width: 767px) {
  .faqs-contact-box {
    flex-direction: row !important;
    padding: 4px 8px !important;
    gap: 8px;
    min-height: auto !important;
    height: auto !important;
  }
  
  .faqs-contact-item {
    width: auto !important;
    flex: 0 1 auto !important;
    gap: 0 !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
  }
  
  .faqs-contact-item .icon-box {
    display: none !important;
  }
  
  .faqs-contact-item-content {
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }
  
  .faqs-contact-item-content h3 {
    font-size: 14px !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.1 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    white-space: nowrap !important;
  }
  
  .faqs-contact-item-content p {
    font-size: 12px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    white-space: nowrap !important;
  }
}

.faqs-content{
	margin-right: 0;
	font-family: var(--default-font, "Poppins", sans-serif);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}

.our-faqs .faqs-content .section-title {
	margin-top: 0 !important;
	margin-bottom: 40px !important;
	flex-shrink: 0;
	position: relative;
	top: 0 !important;
	width: 100%;
	align-self: flex-start;
	transform: translateY(0) !important;
}

.our-faqs .faqs-content .section-title h2 {
	color: #FFFFFF !important;
}

.our-faqs .faq-accordion {
	flex: 0 0 auto;
	min-height: 600px;
	width: 100%;
	align-self: flex-start;
	display: flex;
	flex-direction: column;
}

.faq-subtitle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 600;
	text-transform: capitalize;
	letter-spacing: 1px;
	color: #1F2937;
	margin-bottom: 15px;
	font-family: var(--default-font, "Poppins", sans-serif);
	background: linear-gradient(135deg, rgba(147, 197, 253, 0.8) 0%, rgba(209, 213, 219, 0.8) 50%, rgba(196, 181, 253, 0.8) 100%);
	padding: 8px 16px;
	border-radius: 8px;
}

.faq-subtitle-line {
	display: none;
}

.faqs-contact-box{
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 60px;
	margin-top: 0;
	background: rgba(255, 255, 255, 0.6);
	border-radius: 0 0 10px 10px;
	padding: 20px 30px !important;
	min-height: auto;
	clear: both;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	box-sizing: border-box;
	z-index: 10;
}

.faqs-contact-item{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex: 0 1 auto;
}

.faqs-contact-item:first-child{
	order: 1;
}

.faqs-contact-item:last-child{
	order: 2;
}

.faqs-contact-item .icon-box{
	width: 50px;
	height: 50px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.faqs-contact-item .icon-box i{
	font-size: 32px;
	color: #1e3a5f !important;
	transition: all 0.3s ease-in-out;
}

.faqs-contact-item:hover .icon-box i{
	background: linear-gradient(135deg, #4185DD 0%, #B42FDA 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.faqs-contact-item .icon-box img{
	max-width: 50px;
	height: auto;
	object-fit: contain;
	filter: brightness(0) saturate(100%) invert(15%) sepia(30%) saturate(2000%) hue-rotate(200deg) brightness(0.8);
	transition: all 0.3s ease-in-out;
}

.faqs-contact-item:hover .icon-box img{
	filter: brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(2000%) hue-rotate(220deg) brightness(1.2) contrast(1.2);
}

.faqs-contact-item-content{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

.faqs-contact-item-content h3{
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 3px;
	background: linear-gradient(135deg, #4185DD 0%, #B42FDA 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	font-family: var(--default-font, "Poppins", sans-serif);
	line-height: 1.2;
}

.faqs-contact-item-content p{
	margin: 0;
	color: #1e3a5f !important;
	font-size: 18px;
	font-weight: 400;
	font-family: var(--default-font, "Poppins", sans-serif);
	line-height: 1.3;
}

.faqs-contact-item-content p a{
	color: #1e3a5f !important;
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}

.faqs-contact-item-content p a:hover{
	color: #4185DD !important;
}

.faqs-image{
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	width: 100%;
	display: block;
	align-items: flex-start;
	align-self: flex-start;
	position: relative;
	margin-bottom: 0;
}

.faqs-image figure{
	display: block;
	border-radius: 10px;
	border: 1px solid #FFFFFF;
	overflow: hidden;
	width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	margin-bottom: 0;
	z-index: 1;
}

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

.faqs-image figure.image-anime:after {
	content: "";
	position: absolute;
	width: 200%;
	height: 0%;
	left: 50%;
	top: 50%;
	background-color: rgba(255, 255, 255, 0.3);
	transform: translate(-50%, -50%) rotate(-45deg) translateZ(0);
	z-index: 1;
	pointer-events: none;
	transition: all 0s linear;
}

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

.faqs-image img{
	width: 100%;
	height: auto;
	max-height: 830px;
	object-fit: cover;
	object-position: center 60%;
	border-radius: 10px;
	margin: 0;
	padding: 0;
	display: block;
	transition: transform 0.4s ease;
	transform: translateZ(0);
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	border: none;
}

.faq-accordion .accordion-item{
	background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #FFFFFF;
	border-radius: 10px;
	margin-bottom: 15px;
    padding: 0;
	transition: all 0.3s ease-in-out;
	overflow: hidden;
	box-shadow: none;
	width: 100%;
	flex: 1 1 auto;
	min-height: 80px;
}

.faq-accordion .accordion-item:first-child {
	background-color: rgba(255, 255, 255, 0.8);
	border-color: #FFFFFF;
}

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

.faq-accordion .accordion-header .accordion-button{
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4em;
	background: transparent;
	color: #1e3a5f !important;
	padding: 20px 50px 20px 20px;
	transition: all 0.3s ease-in-out;
	text-align: left;
	border: none;
	box-shadow: none;
	font-family: var(--default-font, "Poppins", sans-serif);
}

.faq-accordion .accordion-item:first-child .accordion-header .accordion-button {
	color: #1e3a5f !important;
}

.faq-accordion .accordion-item:first-child .accordion-header .accordion-button.collapsed {
	color: #1e3a5f !important;
}

.faq-accordion .accordion-header .accordion-button.collapsed{
	padding: 20px 50px 20px 20px;
}

.faq-accordion .accordion-item .accordion-button::after,
.faq-accordion .accordion-item .accordion-button.collapsed::after{
	content: '\f068';
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
    line-height: normal;
    color: #1e3a5f !important;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.faq-accordion .accordion-item:first-child .accordion-button::after {
	color: #1e3a5f !important;
}

.faq-accordion .accordion-item .accordion-button.collapsed::after{
	content: '\f067';
	color: #1e3a5f !important;
}

.faq-accordion .accordion-item:first-child .accordion-button.collapsed::after {
	color: #1e3a5f !important;
}

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

.faq-accordion .accordion-item:first-child .accordion-body {
	padding: 0 20px 20px 20px;
}

.faq-accordion .accordion-item .accordion-body p{
    color: #1e3a5f !important;
	margin: 0;
	line-height: 1.6;
	font-family: var(--default-font, "Poppins", sans-serif);
}

.faq-accordion .accordion-item:first-child .accordion-body p {
	color: #1e3a5f !important;
}

/* Accordion Collapse Animation */
.faq-accordion .accordion-collapse {
	transition: all 0.35s ease;
	overflow: hidden;
}

.faq-accordion .accordion-collapse.collapse {
	display: none !important;
}

.faq-accordion .accordion-collapse.show {
	display: block !important;
}

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

.our-blog{
	position: relative;
    padding: 90px 0 60px;
	z-index: 1;
	background-color: #FFFFFF !important;
}

/* Blog Posts Container Card - Transparent container */
.blog-posts-container-card {
	background-color: transparent;
	border-radius: 10px;
	box-shadow: none;
	padding: 0;
	margin-bottom: 40px;
	position: relative;
}

/* Blog Posts Grid */
.blog-posts-grid {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 20px;
}

.blog-posts-grid > [class*="col-"] {
	padding-left: 0;
	padding-right: 0;
	display: flex;
	align-items: stretch;
	flex: 1 1 calc(25% - 15px);
	min-width: 0;
}

/* Blog Post Card Item */
.blog-post-card-item {
	margin-bottom: 0;
	padding: 0;
	display: flex;
	align-items: stretch;
	height: 100%;
}

/* New Blog Post Item Style */
.post-item-new {
	background: #FFFFFF;
	border-radius: 20px;
	overflow: visible;
	height: auto;
	width: 380px;
	display: flex;
	flex-direction: column;
	transition: all 0.4s ease;
	box-shadow: 0 6px 25px rgba(0, 0, 0, 0.25), 0 2px 10px rgba(0, 0, 0, 0.15);
	margin: 150px auto 0 auto;
}

.post-item-new:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(147, 51, 234, 0.3);
	border: 1px solid rgba(147, 51, 234, 0.5);
}

.post-item-new:hover .post-featured-image-new {
	box-shadow: none;
}

/* Shadow only on top half on hover */
.post-item-new:hover .post-featured-image-new::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 300px;
	height: 150px;
	border-radius: 300px 300px 0 0;
	pointer-events: none;
	z-index: -1;
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, transparent 70%);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(147, 51, 234, 0.3);
}

/* Upper Section - White Background */
.post-item-top {
	background: #FFFFFF !important;
	background-color: #FFFFFF !important;
	padding: 40px;
	height: 120px;
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 20px 20px 0 0;
}

.post-featured-image-new {
	margin-bottom: 15px;
	display: flex;
	justify-content: center;
	position: absolute;
	top: -270px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	overflow: visible;
	border-radius: 50%;
	width: 300px;
	height: 300px;
	flex-shrink: 0;
	padding: 0;
	box-sizing: border-box;
	border: none;
	box-shadow: none;
	transition: all 0.4s ease;
}

/* Shadow on top half in regular state */
.post-featured-image-new::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 300px;
	height: 150px;
	border-radius: 300px 300px 0 0;
	pointer-events: none;
	z-index: -1;
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.05) 0%, transparent 70%);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Thick white border on bottom half only - outside the photo */
.post-featured-image-new::after {
	content: '';
	position: absolute;
	bottom: -10px;
	left: -10px;
	right: -10px;
	height: calc(50% + 10px);
	border-radius: 0 0 320px 320px;
	border: 10px solid #FFFFFF;
	border-top: none;
	pointer-events: none;
	z-index: 3;
	box-sizing: border-box;
}

.post-featured-image-avatar {
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: transparent;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: none;
	border: none;
	box-sizing: border-box;
	transition: all 0.4s ease;
	overflow: hidden;
}

.post-featured-image-avatar a {
	cursor: none;
	display: block;
	width: 100%;
	height: 100%;
}

.post-featured-image-new .blog-post-image {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	transition: all 0.4s ease;
}

/* Lower Section - Dark Purple Background */
.post-item-bottom {
	background: linear-gradient(
		to bottom,
		#1e3a5f 0%,
		#2d4a7a 25%,
		#4a2c5f 50%,
		#5a3a7a 75%,
		#6b4a8a 100%
	);
	padding: 60px 30px 15px 30px;
	text-align: center;
	position: relative;
	border-radius: 0 0 20px 20px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.post-item-content-new {
	margin-bottom: 6px;
	margin-top: -10px;
}

.post-item-content-new h2 {
	font-size: 16px;
	font-weight: 800;
	line-height: 1.4;
	margin-bottom: 0;
	color: #FFFFFF;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.post-item-content-new h2 a {
	color: #FFFFFF !important;
	text-decoration: none;
	transition: color 0.3s ease;
}

.post-item-content-new h2 a:hover {
	color: #9333EA !important;
}

/* Post Excerpt */
.post-item-excerpt {
	margin-bottom: 15px;
	flex: 1;
}

.post-item-excerpt {
	margin-top: 0;
	margin-bottom: 0;
}

.post-item-excerpt p {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9) !important;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Post Category */
.post-item-category {
	margin-top: auto;
	margin-bottom: 0;
	padding-bottom: 0;
	line-height: 1;
}

.post-item-category {
	margin-top: 8px;
	margin-bottom: 0;
	padding-bottom: 0;
	line-height: 1;
	text-align: left;
	position: relative;
	bottom: auto;
	left: auto;
}

.post-item-category span {
	font-size: 12px;
	font-weight: 500;
	color: #FFFFFF !important;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Vertical divider between blog posts - removed */
.blog-post-card-item:not(:last-child) {
	position: relative;
}

.blog-post-card-item:not(:last-child)::after {
	display: none;
}

/* Read All Blog Posts Link */
.blog-read-all-link {
	text-align: center;
	margin-top: 20px;
}

.read-all-blog-posts {
	color: #1F2937;
	text-decoration: underline;
	font-size: 16px;
	font-weight: 500;
	transition: color 0.3s ease;
}

.read-all-blog-posts:hover {
	color: var(--accent-color);
	text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 991px) {
	.blog-posts-container-card {
		padding: 0;
	}
	
	.blog-post-card-item:not(:last-child)::after {
		display: none;
	}
	
	.blog-post-card-item {
		margin-bottom: 20px;
	}
	
	.post-item-new {
		border-radius: 10px;
		overflow: hidden;
	}
	
	.post-featured-image-new a {
		border-radius: 50%;
	}
}

@media (max-width: 767px) {
	.blog-posts-container-card {
		padding: 0;
	}

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

	/* Mobile Blog Cards - Smaller, 2 per row, hide description and category */
	.blog-posts-grid {
		margin-left: 0;
		margin-right: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 0;
	}

	.blog-posts-grid > [class*="col-"] {
		width: 50%;
		flex: 0 0 50%;
		max-width: 50%;
		padding-left: 0;
		padding-right: 0;
		display: flex;
		flex-basis: 50%;
	}

	/* Add padding between first and second row */
	.blog-posts-grid > [class*="col-"]:nth-child(n+3) {
		margin-top: 40px;
	}

	.blog-post-card-item {
		padding-left: 0;
		padding-right: 0;
		margin-bottom: 0;
		width: 100%;
		flex: 0 0 100%;
		max-width: 100%;
		display: flex;
	}

	.post-item-new {
		width: 90%;
		max-width: 90%;
		margin: 0 auto;
		margin-top: 60px;
		padding-top: 0;
		border-radius: 12px;
		box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
		overflow: visible;
	}

	.post-item-top {
		padding: 10px;
		height: 40px;
		min-height: 40px;
		background: #FFFFFF;
		background-color: #FFFFFF;
		border-radius: 12px 12px 0 0;
	}

	.post-featured-image-new {
		top: -100px;
		width: 120px;
		height: 120px;
		overflow: visible;
		border-radius: 50%;
		z-index: 5;
	}

	.post-featured-image-new::before {
		width: 120px;
		height: 60px;
		border-radius: 120px 120px 0 0;
		background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.05) 0%, transparent 70%);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
		z-index: 4;
	}

	.post-featured-image-avatar {
		width: 120px;
		height: 120px;
		border-radius: 50%;
		overflow: hidden;
		position: relative;
		z-index: 6;
	}

	.post-featured-image-avatar .blog-post-image {
		border-radius: 50%;
		object-fit: cover;
		position: relative;
		z-index: 7;
	}

	.post-featured-image-new::after {
		content: '';
		position: absolute;
		bottom: -6px;
		left: -6px;
		right: -6px;
		height: calc(50% + 6px);
		border-radius: 0 0 130px 130px;
		border: 6px solid #FFFFFF;
		border-top: none;
		pointer-events: none;
		z-index: 3;
		box-sizing: border-box;
		display: block;
	}

	.post-item-bottom {
		padding: 35px 12px 12px 12px;
		border-radius: 0 0 12px 12px;
	}

	.post-item-content-new {
		margin-top: -8px;
		margin-bottom: 0;
		padding-top: 15px;
		padding-bottom: 15px;
		height: 90px;
		min-height: 90px;
		max-height: 90px;
		overflow: hidden;
	}

	.post-item-content-new h2 {
		font-size: 11px;
		line-height: 1.3;
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}

	/* Hide excerpt on mobile */
	.post-item-excerpt {
		display: none;
	}

	/* Hide category on mobile */
	.post-item-category {
		display: none;
	}

	.post-item-new:hover .post-featured-image-new::before {
		width: 120px;
		height: 60px;
	}

	.post-featured-image-new::after {
		bottom: -8px;
		left: -8px;
		right: -8px;
		border: 8px solid #FFFFFF;
	}
}

/* Wider container for blog section */
.our-blog .container {
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 50px;
  padding-right: 50px;
}

/* Wider section title for blog */
.our-blog .section-title {
  max-width: 1400px;
}

/* Blog section title h2 - match FAQs section styling */
.our-blog .section-title h2 {
  white-space: nowrap;
  font-size: 30px;
  font-weight: 500;
  font-family: var(--default-font, "Poppins", sans-serif);
  /* Colors preserved - using default section-title h2 colors */
}

.our-blog .section-title h2 span {
  font-weight: 700;
}

/* Responsive margins for blog section */
@media (max-width: 1600px) {
  .our-blog .container {
    max-width: 1600px;
    padding-left: 40px;
    padding-right: 40px;
  }
  
  .our-blog .section-title {
    max-width: 1300px;
  }
}

@media (max-width: 1400px) {
  .our-blog .container {
    max-width: 1400px;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  .our-blog .section-title {
    max-width: 1200px;
  }
}

@media (max-width: 1200px) {
  .our-blog .container {
    max-width: 1200px;
    padding-left: 25px;
    padding-right: 25px;
  }
  
  .our-blog .section-title {
    max-width: 1100px;
  }
}

@media (max-width: 991px) {
  .our-blog .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .our-blog .section-title {
    max-width: 100%;
  }
  
  /* Allow wrapping on smaller screens */
  .our-blog .section-title h2 {
    white-space: normal;
  }
}

@media (max-width: 767px) {
  .our-blog .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

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

.post-featured-image{
	margin-bottom: 20px;
}

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

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

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

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

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

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

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

/************************************/
/***        17. CTA Box css       ***/
/************************************/

.cta-box{
	position: relative;
	padding: 90px 0;
	z-index: 1;
	background-color: #FFFFFF !important;
}

.cta-box-content{
	background: transparent;
	border: 1px solid #9CA3AF !important;
	backdrop-filter: blur(200px);
    -webkit-backdrop-filter: blur(200px);
	border-radius: 10px;
	text-align: center;
	padding: 80px 9.896vw;
	position: relative;
	overflow: visible;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 4px 15px rgba(0, 0, 0, 0.1);
}

.cta-box-content::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url('/images/map.svg') no-repeat center center;
	background-size: cover;
	border-radius: 10px;
	z-index: 0;
	pointer-events: none;
}


.cta-box-content > * {
	position: relative;
	z-index: 2;
}

.cta-box-content .section-title{
	max-width: 500px;
	margin: 0 auto;
	text-align: center;
}

.cta-box-content .section-title h3{
	text-align: center;
}

.cta-box-content .section-title h2{
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-bottom: 0 !important;
	display: block;
	width: 100%;
	letter-spacing: -0.02em;
	font-size: 42px !important;
	color: #4B5563 !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
}

.cta-box-content .section-title h2 span{
	display: inline;
	color: inherit;
	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-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-transform: none !important;
}

.cta-box-content .section-title p{
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	white-space: nowrap;
}

.subscribe-form,
.cta-box-list{
	padding-top: 40px;
	text-align: center;
	margin: 0 auto;
}

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

.cta-box-list ul li{
	position: relative;
	border: 1px solid #9CA3AF !important;
	border-radius: 99px;
	line-height: 1.5em;
	padding: 6px 20px 6px 50px;
	color: #1F2937 !important;
	background: #FFFFFF !important;
	z-index: 10;
}

.cta-box-list ul li::before{
	content: '\f058';
    font-family: 'FontAwesome';
	position: absolute;
    font-size: 20px;
    background: linear-gradient(90deg, var(--accent-color) 0.03%, var(--accent-secondary-color) 100%);
	-webkit-background-clip: text;
	background-clip: text;
    -webkit-text-fill-color: transparent;
    top: 50%;
    left: 20px;
	transform: translateY(-50%);
}

.subscribe-form .form-group{
	width: 100%;
	max-width: 615px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}

.subscribe-form .form-group .form-control{
	width: calc(68% - 10px);
	font-size: 16px;
	font-weight: 500;
	line-height: 1em;
	color: #1F2937 !important;
	background: #FFFFFF !important;
	border: 1px solid #9CA3AF !important;
	border-radius: 99px;
	outline: none;
	box-shadow: none;
	padding: 12px 20px;
	position: relative;
	z-index: 10;
}

.subscribe-form .form-group .form-control::placeholder{
	font-size: 12px;
	color: #1F2937 !important;
}

.subscribe-form .form-group .btn-default{
	width: calc(32% - 10px);
}

.newsletter-status-message {
	position: absolute;
	bottom: -50px;
	left: 0;
	right: 0;
	width: 100%;
	margin: 0;
	padding: 0 !important;
	border-radius: 10px;
	text-align: center;
	z-index: 100;
}

/************************************/
/***        18. Footer css        ***/
/************************************/

.our-scrolling-ticker.footer-scrolling-ticker{
	padding: 0;
	background: #FFFFFF !important;
}

.our-scrolling-ticker.footer-scrolling-ticker .scrolling-content span{
	font-size: 9vw;
	font-weight: 700;
	line-height: 0.8em;
	text-transform: uppercase;
    background: linear-gradient(90deg, var(--accent-color) 0.03%, var(--accent-secondary-color) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.our-scrolling-ticker.footer-scrolling-ticker .scrolling-content span a{
    display: block;
    color: inherit;
}

.main-footer{
	position: relative;
	padding: 100px 0 0;
	z-index: 1;
	background-color: #1e3a5f !important;
	color: #FFFFFF !important;
}

/* Ensure all footer text elements are white (excluding icons) */
.main-footer p,
.main-footer h1,
.main-footer h2,
.main-footer h3,
.main-footer h4,
.main-footer h5,
.main-footer h6,
.main-footer a,
.main-footer li,
.main-footer span {
	color: #FFFFFF !important;
}

/* Keep icons in original color - override white text rule */
.main-footer .footer-social-links ul li a i,
.main-footer .footer-contact-item .icon-box i,
.main-footer i {
	color: var(--primary-color) !important;
}

/* Allow hover states to use accent colors for better UX */
.main-footer .footer-links ul li:hover a,
.main-footer .footer-contact-item:hover .footer-contact-content p a {
	color: var(--accent-secondary-color) !important;
}

/* Wider container for footer section - match blog section */
.main-footer .container {
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 50px;
  padding-right: 50px;
}

/* Responsive margins for footer section - match blog section */
@media (max-width: 1600px) {
  .main-footer .container {
    max-width: 1600px;
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 1400px) {
  .main-footer .container {
    max-width: 1400px;
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media (max-width: 1200px) {
  .main-footer .container {
    max-width: 1200px;
    padding-left: 25px;
    padding-right: 25px;
  }
}

@media (max-width: 991px) {
  .main-footer .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

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

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

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

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

.about-footer-content p{
	margin: 0;
	color: #FFFFFF !important;
}

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

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

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

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

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

.footer-social-links ul li a i{
	color: var(--primary-color) !important;
	font-size: 16px;
}

.footer-links h3{
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 30px;
	color: #FFFFFF !important;
}

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

.footer-links ul li{
	text-transform: capitalize;
	line-height: 1.5em;
	margin-bottom: 15px;
}

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

.footer-links ul li a{
	color: #FFFFFF !important;
	transition: all 0.3s ease-in-out;
}

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

.footer-contact-item{
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

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

.footer-contact-item .icon-box{
    width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 50%;
	margin-right: 15px;
    transition: all 0.3s ease-in-out;
}

.footer-contact-item:hover .icon-box{
    background: var(--accent-secondary-color);
}

.footer-contact-item .icon-box i{
    font-size: 16px;
    color: var(--primary-color) !important;
}

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

.footer-contact-content p{
	color: #FFFFFF !important;
	margin: 0;
}

.footer-contact-content p a{
	color: #FFFFFF !important;
	transition: all 0.3s ease-in-out;
}

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

.footer-copyright-text{
	text-align: center;
	border-top: 1px solid var(--divider-color);
	margin-top: 60px;
	padding: 40px 0;
}

.footer-copyright-text p{
	color: #FFFFFF !important;
	margin: 0;
}

/************************************/
/***     19. About Us Page css    ***/
/************************************/

.page-header{
	position: relative;
	padding: 260px 0 150px;
	z-index: 1;
}

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

.page-header-box h1,
.page-header-title {
	font-size: 52px;
	line-height: 1.2em;
	font-weight: 300;
	margin-bottom: 15px;
	cursor: none;
}

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

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

/* Letter Reveal Title for Page Header */
.page-header-title.letter-reveal-title {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35em;
	position: relative;
	color: var(--primary-color);
	max-width: 100%;
	width: 100%;
	overflow: visible;
	text-align: center;
}

/* Word wrapper keeps letters of a word together */
.page-header-title .word-wrapper {
	display: inline-block;
	white-space: nowrap;
}

/* Space between words */
.page-header-title .word-space {
	display: inline-block;
	width: 0.35em;
}

.page-header-title .letter-char {
	display: inline-block;
	opacity: 0;
	transform: translateY(20px) scale(0.8);
	color: var(--primary-color);
	transition: none;
	font-weight: 300;
	background: none !important;
	-webkit-text-fill-color: var(--primary-color) !important;
}

/* Regular letters (not highlighted) should have normal styling */
.page-header-title .word-wrapper:not(.highlight-word) .letter-char,
.page-header-title .letter-char:not(.highlight-char) {
	color: var(--primary-color) !important;
	font-weight: 300 !important;
	background: none !important;
	-webkit-text-fill-color: var(--primary-color) !important;
	background-clip: unset !important;
	-webkit-background-clip: unset !important;
}

/* Letter animation on page load */
.page-header-title .letter-char.animate {
	animation: letterReveal 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Highlight styling - only apply to letters with highlight-char class inside highlight-word */
.page-header-title .highlight-word .letter-char.highlight-char {
	font-weight: 700 !important;
	background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%) !important;
	background-size: 200% auto !important;
	background-clip: text !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}

/* Remove gradient from highlight-word wrapper itself */
.page-header-title .highlight-word {
	font-weight: inherit;
	background: none !important;
	background-clip: unset !important;
	-webkit-background-clip: unset !important;
	-webkit-text-fill-color: inherit !important;
}

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

.page-header-box ol li.breadcrumb-item{
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5em;
	text-transform: capitalize;
	color: var(--text-color);
}

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

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

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

.about-us.page-about-us::before{
    display: none;
}

.our-potential{
    position: relative;
    padding: 90px 0;
    z-index: 1;
}

.our-potential-content{
    margin-right: 20px;
}

.potential-accordion .accordion-item{
    margin-bottom: 40px;
}

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

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

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

.potential-accordion .accordion-button:not(.collapsed){
    margin-bottom: 30px;
}

.potential-accordion .accordion-item .accordion-button::after, 
.potential-accordion .accordion-item .accordion-button.collapsed::after{
    content: '\2b';
    font-family: 'FontAwesome';
    position: absolute;
    right: 0;
    top: 0;    
    font-size: 20px;
    color: var(--primary-color);
    transition: all 0.3s ease-in-out;
}

.potential-accordion .accordion-button:not(.collapsed)::after{
    content: '\f068';
}

.potential-accordion .accordion-collapse {
    transition: height 0.35s ease;
    overflow: hidden;
}

.potential-accordion .accordion-item .accordion-body{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 30px;
}

.accordion-image{
    width: calc(44% - 15px);
}

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

.accordion-item-content{
    width: calc(56% - 15px);
}

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

.accordion-item-content ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

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

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

.accordion-item-content ul li::before{
    content: "\f621";
    font-family: "FontAwesome";
    position: absolute;
    top: 0;
    left: 0;
    font-size: 18px;
    color: var(--accent-color);
}

.potential-image{
    position: relative;
    width: 100%;
    min-height: 0;
    /* Reserve space based on image aspect ratio: 848/1264 = 0.6709 */
    aspect-ratio: 848 / 1264;
}

.potential-image figure{
    display: block;
    border-radius: 30px;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    aspect-ratio: 848 / 1264;
    overflow: hidden;
    position: relative;
}

/* Override reveal visibility to prevent layout shift */
.potential-image figure.reveal{
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

.potential-image figure.image-anime{
    visibility: visible !important;
    opacity: 1 !important;
}

.potential-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    visibility: visible !important;
    opacity: 1 !important;
    /* Prevent image from causing layout shift */
    min-height: 100%;
    min-width: 100%;
}

.who-we-are{
    position: relative;
    padding: 90px 0;
    z-index: 1;
}

.who-we-are-images{
    position: relative;
    display: flex;
    gap: 30px;
}

.who-we-img-box{
    width: calc(50% - 15px);
}

.who-we-are-img figure{
    display: block;
    border-radius: 30px;
}

.who-we-are-img img{
    width: 100%;
    aspect-ratio: 1 / 1.634;
    object-fit: cover;
    border-radius: 30px;
}

.readmore-img-circle{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.readmore-img-circle a{
    display: block;
    border-radius: 50%;
}

.readmore-img-circle a img{
    width: 100%;
    max-width: 120px;
    border-radius: 50%;
    animation: infiniterotate 25s infinite linear;
}

.who-we-are-content{
    margin-left: 20px;
}

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

.who-we-counter-item:last-child{
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.who-we-counter-item h2{
    width: calc(25% - 20px);
    font-size: 42px;
    margin-right: 20px;
}

.who-we-counter-item p{
    width: 75%;
    margin-bottom: 0;
}

.our-team{
	position: relative;
	padding: 90px 0 60px;
    z-index: 1;
}

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

.team-image figure,
.team-image a{
    display: block;
}

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

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

.team-body{
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    background: var(--secondary-color);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border-radius: 14px;
    text-align: center;
    padding: 15px;
    overflow: hidden;
    z-index: 2;
}

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

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

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

.team-social-list{
    height: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

.team-item:hover .team-social-list{
    height: 36px;
    opacity: 1;
    visibility: visible;
    margin-top: 15px;
}

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

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

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

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

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

.team-social-list ul li a i{
    color: var(--primary-color);
    font-size: 16px;
}

.our-success{
    position: relative;
    padding: 90px 0;
    z-index: 1;
}

.our-success-content{
    margin-right: 20px;
}

.success-item{
    position: relative;
    display: flex;
    padding: 20px 30px;
    border: 1px solid var(--divider-color);
    background-color: var(--secondary-color);
    backdrop-filter: blur(220px);
    -webkit-backdrop-filter: blur(220px);
    border-radius: 30px;
    margin-bottom: 30px;
    overflow: hidden;
    box-shadow: 0 2px 10px var(--shadow-color, rgba(0, 0, 0, 0.1));
}

/* Core Values Section - White Background for Success Items */
.our-success .success-item {
    background-color: white !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

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

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

.success-item:hover:before{
	height: 100%;
}

.success-item .icon-box,
.success-item-content{
    position: relative;
    z-index: 1;   
}

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

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

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

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

.success-item-content h3{
    font-size: 20px;
    margin-bottom: 10px;
    transition: all 0.4s ease-in-out;
}

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

.success-item:hover .success-item-content h3,
.success-item:hover .success-item-content p{
    color: var(--primary-color);
}

.our-success-iamges{
    display: flex;
    flex-wrap: wrap;
    justify-content: right;
}

.success-img-1{
    margin-right: 125px;
}

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

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

.success-img-1 img{
    aspect-ratio: 1 / 1.135;
}

.success-img-2{
    position: relative;
    width: 100%;
    max-width: 435px;
    border: 10px solid var(--bg-color);
    border-radius: 40px;
    overflow: hidden;
    margin-top: -350px;
    z-index: 1;
}

.success-img-2 img{
    aspect-ratio: 1 / 1.172;
}

.our-partners{
    position: relative;
    padding: 90px 0;
    z-index: 1;
}

.our-partners-box{
	border: 1px solid var(--divider-color);
    background: var(--secondary-color);
	backdrop-filter: blur(200px);
	-webkit-backdrop-filter: blur(200px);
    border-radius: 30px;
    padding: 80px 0;
}

.our-partners-content{
    margin-left: 60px;
    margin-bottom: 60px;
}

.our-partners-content .section-title{
    width: 100%;
    max-width: 650px;
    margin-bottom: 0;
}

.our-partners-slider .partner-logo{
    padding: 18px;
	text-align: center;
    border: 1px solid var(--divider-color);
    background: var(--secondary-color);
    border-radius: 8px;
}

.our-partners-slider .partner-logo img{
	width: 100%;
	max-height: 70px;
}

/************************************/
/***     20. Services Page css    ***/
/************************************/

.page-services{
	position: relative;
    padding: 180px 0 60px;
	z-index: 1;
}

/************************************/
/***    21. Service Single css    ***/
/************************************/

.page-service-single{
    position: relative;
    padding: 180px 0;
    z-index: 1;
}

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

.page-catagory-list{
    background-color: var(--secondary-color);
	border: 1px solid var(--divider-color);
    border-radius: 30px;
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(100px);
    padding: 30px;
    margin-bottom: 50px;
}

.page-catagory-list h3{
	font-size: 20px;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--primary-color);
    margin-bottom: 30px;
}

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

.page-catagory-list ul li a{
    position: relative;
	display: block;
    line-height: 1.5em;
    text-transform: capitalize;
    color: var(--primary-color);
    border-bottom: 1px solid var(--divider-color);
    padding: 0 30px 15px 0;
    margin-bottom: 15px;
    transition: all 0.3s ease-in-out;
}

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

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

.page-catagory-list ul li a::before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	background: url('/images/arrow-white.svg') no-repeat;
	background-size: cover;
	width: 20px;
	height: 20px;
    transform: rotate(-45deg);
	transition: all 0.3s ease-in-out;
}

.page-catagory-list ul li a:hover:before{
	transform: rotate(0);
}

.sidebar-cta-box{
    background-color: var(--secondary-color);
    border: 1px solid var(--divider-color);
    border-radius: 30px;
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(100px);
	padding: 40px;
}

.sidebar-cta-img{
	margin-bottom: 15px;
}

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

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

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

.sidebar-cta-content p{
    margin-bottom: 0;
}

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

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

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

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

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

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

.service-entry h2{
	font-size: 42px;
    font-weight: 300;
    letter-spacing: -0.02em;
	margin-bottom: 20px;
}

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

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

.service-solution-box,
.service-trusted-expert{
    margin-top: 60px;
}

.service-solution-steps{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.service-solution-step-item{
    width: calc(33.33% - 20px);
    background-color: var(--secondary-color);
    border: 1px solid var(--divider-color);
    border-radius: 30px;
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(100px);
    overflow: hidden;
    padding: 0 20px 40px;
}

.solution-step-no{
    height: 80px;
    width: 80px;
    text-align: center;
    align-content: center;
    background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
    border-radius: 0 0 0 30px;
    margin: 0 -20px 0 auto;
    transition: all 0.3s ease-in-out;
}

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

.solution-step-no h3{
    font-size: 20px;
}

.service-solution-step-item .icon-box{
    margin-bottom: 40px;
}

.service-solution-step-item .icon-box img{
    width: 100%;
    max-width: 50px;
    transition: all 0.3s ease-in-out;
}

.service-solution-step-item:hover .icon-box img{
    filter: brightness(0) invert(1);
    transform: rotateY(180deg);
}

.solution-step-content h3{
    font-size: 20px;
    margin-bottom: 10px;
}

.service-entry-image,
.service-trusted-expert-item{
    margin-top: 40px;
}

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

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

.service-trusted-expert-item .success-item{
    background: transparent;
    padding: 40px;
}

.service-trusted-expert-item .success-item::before{
    background: var(--secondary-color);
}

.service-trusted-expert-item .success-item .icon-box{
    margin-right: 30px;
}

.service-trusted-expert-item .success-item .success-item-content{
    width: calc(100% - 80px);
}

/************************************/
/***     22. Blog Archive css     ***/
/************************************/

.page-blog{
	position: relative;
    padding: 180px 0;
	z-index: 1;
}

/* Add spacing between rows of blog cards on blog page */
.page-blog .blog-post-card-item {
	margin-bottom: 40px;
}

/* Wider container for blog page to match About Us section */
.page-blog .container {
	max-width: 1800px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 50px;
	padding-right: 50px;
}

/* Responsive margins for blog page */
@media (max-width: 1600px) {
	.page-blog .container {
		max-width: 1600px;
		padding-left: 40px;
		padding-right: 40px;
	}
}

@media (max-width: 1400px) {
	.page-blog .container {
		max-width: 1400px;
		padding-left: 30px;
		padding-right: 30px;
	}
}

@media (max-width: 1200px) {
	.page-blog .container {
		max-width: 1200px;
		padding-left: 25px;
		padding-right: 25px;
	}
}

@media (max-width: 991px) {
	.page-blog .container {
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media (max-width: 767px) {
	.page-blog .container {
		padding-left: 15px;
		padding-right: 15px;
	}
}

/* Single post: content area matches photo width (same as container) */
.page-blog .post-content {
	max-width: none;
}

.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: 100px;
    width: 40px;
    height: 40px;
    margin: 0 5px;
    font-weight: 700;
    line-height: 1em;
    transition: all 0.3s ease-in-out;
}

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

/************************************/
/***      23. Blog Single css     ***/
/************************************/

.page-single-post{
	position: relative;
	padding: 180px 0;
	z-index: 1;
}

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

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

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

.post-image{
	position: relative;
	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: 300;
	line-height: 1.1em;
	margin: 0 0 0.4em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/************************************/
/***    24. Case Study Page css   ***/
/************************************/

.page-case-study{
	position: relative;
    padding: 180px 0 150px;
	z-index: 1;
}

/************************************/
/***  25. Case Study Single css   ***/
/************************************/

.page-case-study-single{
    position: relative;
    padding: 180px 0;
    z-index: 1;
}

/* Match blog page width: same container as .page-blog */
.page-case-study-single .container {
	max-width: 1800px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 50px;
	padding-right: 50px;
}

@media (max-width: 1600px) {
	.page-case-study-single .container {
		max-width: 1600px;
		padding-left: 40px;
		padding-right: 40px;
	}
}

@media (max-width: 1400px) {
	.page-case-study-single .container {
		max-width: 1400px;
		padding-left: 30px;
		padding-right: 30px;
	}
}

@media (max-width: 1200px) {
	.page-case-study-single .container {
		max-width: 1200px;
		padding-left: 25px;
		padding-right: 25px;
	}
}

@media (max-width: 991px) {
	.page-case-study-single .container {
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media (max-width: 767px) {
	.page-case-study-single .container {
		padding-left: 15px;
		padding-right: 15px;
	}
}

.case-study-category-list{
    background: var(--secondary-color);
    border: 1px solid var(--divider-color);
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(100px);
    border-radius: 30px;
    margin-bottom: 50px;
    padding: 30px;
}

.case-study-category-item{
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.case-study-category-item:last-child{
    margin: 0;
    padding: 0;
    border-bottom: none;
}

.case-study-category-item h3{
    font-size: 20px;
    text-transform: capitalize;
    margin-bottom: 10px;
}

.case-study-category-item p{
    text-transform: capitalize;
    margin-bottom: 0;
}

.case-study-slider{
    margin-bottom: 60px;
}

.case-study-slider figure{
    border-radius: 30px;
}

.case-study-slider img{
    width: 100%;
    aspect-ratio: 1 / 0.538;
    object-fit: cover;
    border-radius: 30px;
}

.case-study-pagination{
	position: relative;
	text-align: center;
	margin-top: 25px;
}

.case-study-pagination .swiper-pagination-bullet{
    height: 10px;
    width: 10px;
    background: var(--secondary-color);
    opacity: 1;
    margin: 0 3px;
    transition: all 0.4s ease-in-out;
}

.case-study-pagination .swiper-pagination-bullet-active{
	width: 20px;
    background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
	border-radius: 10px;
}

.case-study-entry{
    margin-bottom: 60px;
}

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

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

.case-study-entry h2{
	font-size: 42px;
    font-weight: 300;
    letter-spacing: -0.02em;
	margin-bottom: 20px;
}

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

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

.case-study-entry ul{
    list-style: none;
    margin-bottom: 20px;
    padding: 0;
}

.case-study-entry ul li{
    background: url('/images/arrow-accent.svg') no-repeat center left;
    background-size: 22px auto;
    background-position: top left;
    line-height: 1.5em;
    padding-left: 30px;
    margin-bottom: 15px;
}

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

.case-study-solution-box{
    margin-top: 60px;
}

.case-study-solution-list{
    margin-top: 40px;
}

.case-study-solution-item{
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 40px;
    padding-bottom: 40px;
}

.case-study-solution-item:last-child{
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.case-study-solution-item h3{
    font-size: 20px;
    margin-bottom: 20px;
}

.case-study-solution-item ul{
    margin-bottom: 0;
}

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

.solution-item{
    position: relative;
    width: calc(50% - 15px);
    background-color: var(--secondary-color);
    border: 1px solid var(--divider-color);
    border-radius: 30px;
    padding: 20px 20px 20px 70px;
}

.solution-item::before{
    content: "\f192";
    font-family: "FontAwesome";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
    font-size: 30px;
    color: var(--accent-color);
    transition: all 0.4s ease-in-out;
}

.solution-item:hover::before{
    color: var(--accent-secondary-color);
}

.solution-item.highlighted-box{
    width: 100%;
}

/************************************/
/***       26. Team Page css      ***/
/************************************/

.page-team{
	position: relative;
    padding: 180px 0 150px;
	z-index: 1;
}

/************************************/
/***      27. Team Single css     ***/
/************************************/

.page-team-single{
    position: relative;
    padding: 180px 0;
    z-index: 1;
}

.team-single-image{
    position: relative;
}

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

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

.member-social-list{
    position: absolute;
    bottom: 30px;
    right: 30px;
    left: 30px;
    background: var(--secondary-color);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border-radius: 14px;
    padding: 20px;
    z-index: 1;
}

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

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

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

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

.member-social-list ul li:hover a{
    background-color: var(--accent-secondary-color);
}

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

.team-member-body{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 30px;
}

.team-member-body-list,
.team-contact-list{
    width: calc(50% - 15px);
}

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

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

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

.team-member-body-list ul li::before{
    content: "\f192";
    font-family: "FontAwesome";
    position: absolute;
    top: 0;
    left: 0;
    font-size: 20px;
    color: var(--accent-color);
}

.team-contact-list{
    background: var(--secondary-color);
    border: 1px solid var(--divider-color);
    border-radius: 30px;
    padding: 30px;
}

.team-member-skills,
.team-member-qualification,
.team-contact-form{
    margin-top: 60px;
}

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

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

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

.skills-progress-bar .skill-data .skill-title{
    font-size: 18px;
    font-weight: 500;
    color: var(--primary-color);
	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: 10px;
	background: var(--secondary-color);
	border-radius: 100px;
    overflow: hidden;
}

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

.team-member-list ul{
    list-style: none;
    margin-bottom: 20px;
    padding: 0;
}

.team-member-list ul li{
    background: url('/images/arrow-accent.svg') no-repeat center left;
    background-size: 22px auto;
    background-position: top left;
    line-height: 1.5em;
    padding-left: 30px;
    margin-bottom: 15px;
}

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

.contact-us-form.team-contact-form{
    padding: 0;
}

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

.page-pricing{
    position: relative;
    padding: 180px 0 90px;
    z-index: 1;
}

/************************************/
/***   29. Testimonials Page css  ***/
/************************************/

.page-testimonials{
	position: relative;
	padding: 180px 0 90px;
	z-index: 1;
}

/* Wider container for testimonials page to match About Us section */
.page-testimonials .container {
	max-width: 1800px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 50px;
	padding-right: 50px;
}

/* Responsive margins for testimonials page */
@media (max-width: 1600px) {
	.page-testimonials .container {
		max-width: 1600px;
		padding-left: 40px;
		padding-right: 40px;
	}
}

@media (max-width: 1400px) {
	.page-testimonials .container {
		max-width: 1400px;
		padding-left: 30px;
		padding-right: 30px;
	}
}

@media (max-width: 1200px) {
	.page-testimonials .container {
		max-width: 1200px;
		padding-left: 25px;
		padding-right: 25px;
	}
}

@media (max-width: 991px) {
	.page-testimonials .container {
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media (max-width: 767px) {
	.page-testimonials .container {
		padding-left: 15px;
		padding-right: 15px;
	}
}

.page-testimonials .testimonial-item{
    background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 30px;
	backdrop-filter: blur(100px);
	-webkit-backdrop-filter: blur(100px);
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 40px;
}

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

.page-testimonials .testimonial-item .testimonial-body{
	gap: 10px;
	justify-content: space-between;
}

.page-testimonials .testimonial-item .testimonial-body .testimonial-author-box{
	display: flex;
    align-items: center;
}

.page-testimonials .testimonial-item .testimonial-body .testimonial-company-logo{
	margin-bottom: 0;
}

/* Add spacing between rows of testimonial cards */
.page-testimonials .testimonial-card-v2 {
	margin-bottom: 30px;
}

/* Hover effects for testimonials page cards - border effect only */
.page-testimonials .testimonial-card-v2:hover {
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(147, 51, 234, 0.3);
	border: 1px solid rgba(147, 51, 234, 0.5);
	transform: translateY(-5px);
}

/************************************/
/***     30. Image Gallery css    ***/
/************************************/

.page-gallery{
	position: relative;
	padding: 180px 0 150px;
	z-index: 1;
}

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

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

/************************************/
/***     31. Video Gallery css    ***/
/************************************/

.page-video-gallery{
	position: relative;
	padding: 180px 0 150px;
	z-index: 1;
}

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

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

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

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

.video-gallery-image a::after{
    content: '\f04b';
	font-family: 'FontAwesome';
    position: absolute;
    top: 50%;
    left: 50%;
    right: 0;
    transform: translate(-50%, -50%);
	font-size: 20px;
	background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	color: var(--primary-color);
    border-radius: 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.893;
	object-fit: cover;
	border-radius: 30px;
}

/************************************/
/***       32. FAQs Page css      ***/
/************************************/

.page-faqs{
    position: relative;
    padding: 180px 0 90px;
    z-index: 1;
}

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

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

/************************************/
/***    33. Contact Us Page css   ***/
/************************************/

.page-contact-us{
    position: relative;
    padding: 180px 0;
    z-index: 1;
	overflow: visible;
}

.contact-us-form{
    padding-right: 15px;
	position: relative;
	overflow: visible;
}

.contact-us-form::after {
	content: '';
	position: absolute;
	top: 0px;
	left: -220px;
	width: 200px;
	height: 165px;
	background: url('/images/contact-us.svg') no-repeat top left;
	background-size: contain;
	z-index: 2;
	pointer-events: none;
	opacity: 0.7;
	filter: brightness(0.5) drop-shadow(none);
	box-shadow: none !important;
}

.contact-form .form-control{
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5em;
	color: var(--text-color);
	background-color: var(--secondary-color);
	border: 1px solid var(--divider-color);
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(100px);
	border-radius: 10px;
	padding: 14px 20px;
	box-shadow: none;
	outline: none;
}

.contact-form .form-control::placeholder{
	font-size: 14px;
	color: var(--text-color);
}

.contact-form .btn-default{
    width: 100%;
    border-radius: 10px;
}

.contact-us-content{
	border-left: 1px solid var(--divider-color);
    padding-left: 45px;
}

.contact-info-item{
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

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

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

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

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

.contact-item-content p{
    font-size: 14px;
    text-transform: capitalize;
    margin-bottom: 5px;
}

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

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

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

.google-map-iframe{
	width: 100%;
	margin-top: 180px;
}

.google-map-iframe iframe{
	width: 100%;
	height: 500px;
	border-radius: 30px;
}

/************************************/
/***    34. 404 Error Page css    ***/
/************************************/

.error-page{
	position: relative;
	padding: 180px 0;
	z-index: 1;
}

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

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

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

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

/************************************/
/***      35. Responsive css      ***/
/************************************/
/* Tablet and Mobile Styles - moved to custom-mobile.css */
/* ========================================
   MODERN NAVBAR STYLES
   ======================================== */

/* Modern Header */
.modern-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  transition: all 0.3s ease;
}

.modern-header.scrolled {
  background: transparent;
  box-shadow: none;
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

       .navbar-container {
         display: flex;
         align-items: center;
         justify-content: space-between;
         width: 100%;
         height: 100%;
         gap: 20px;
       }

/* Logo */
.navbar-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.navbar-brand:hover {
  transform: scale(1.05);
}

.logo-image {
  height: auto;
  transition: all 0.3s ease;
}

       /* Desktop Menu */
       .navbar-menu {
         display: flex;
         align-items: center;
         justify-content: center;
         flex: 1;
       }

       .navbar-nav {
         display: flex;
         align-items: center;
         justify-content: center;
         list-style: none;
         margin: 0;
         padding: 0;
         gap: 0;
         height: 100%;
       }

.nav-item {
  position: relative;
}

       .nav-link {
         display: flex;
         align-items: center;
         justify-content: center;
         padding: 12px 20px;
         color: var(--primary-color);
         text-decoration: none;
         font-size: 16px;
         font-weight: 500;
         transition: all 0.3s ease;
         border-radius: 8px;
         position: relative;
         overflow: hidden;
         height: 48px;
         min-width: fit-content;
       }

.nav-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(65, 133, 221, 0.1), transparent);
  transition: left 0.5s ease;
}

.nav-link:hover::before {
  left: 100%;
}

.nav-link:hover {
  color: var(--accent-color);
  background: rgba(65, 133, 221, 0.1);
}

/* Dropdown Toggle */
       .dropdown-toggle {
         background: none;
         border: none;
         cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 8px;
         font-family: inherit;
         height: 48px;
         padding: 12px 20px;
         color: var(--primary-color);
         text-decoration: none;
         font-size: 16px;
         font-weight: 500;
         transition: all 0.3s ease;
         border-radius: 8px;
         position: relative;
         overflow: hidden;
         min-width: fit-content;
       }

.dropdown-arrow {
  transition: transform 0.3s ease;
}

       .dropdown-arrow.rotated {
         transform: rotate(180deg);
       }

       .dropdown-toggle::before {
         content: '';
         position: absolute;
         top: 0;
         left: -100%;
         width: 100%;
         height: 100%;
         background: linear-gradient(90deg, transparent, rgba(65, 133, 221, 0.1), transparent);
         transition: left 0.5s ease;
       }

       .dropdown-toggle:hover::before {
         left: 100%;
       }

       .dropdown-toggle:hover {
         color: var(--accent-color);
         background: rgba(65, 133, 221, 0.1);
       }

/* Dropdown Menu */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 280px;
  background: rgba(28, 27, 43, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dropdown-item {
  display: block;
  padding: 12px 16px;
  color: var(--primary-color);
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.dropdown-item:hover {
  background: rgba(65, 133, 221, 0.1);
  color: var(--accent-color);
  transform: translateX(5px);
}

.dropdown-item-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dropdown-item-title {
  font-weight: 500;
  font-size: 14px;
}

.dropdown-item-description {
  font-size: 12px;
  color: var(--text-color);
  opacity: 0.8;
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
}

.btn-primary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color));
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn-primary:hover::before {
  left: 100%;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(65, 133, 221, 0.3);
}

.btn-primary svg {
  transition: transform 0.3s ease;
}

.btn-primary:hover svg {
  transform: translateX(3px);
}

/* Mobile Toggle */
.mobile-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.mobile-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.hamburger {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 24px;
  height: 20px;
  position: relative;
}

.hamburger span {
  width: 100%;
  height: 2px;
  background: var(--primary-color);
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  max-width: 400px;
  height: 100vh;
  background: rgba(28, 27, 43, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 1001;
  transition: right 0.3s ease;
  overflow-y: auto;
}

.mobile-menu.open {
  right: 0;
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-menu-close {
  background: none;
  border: none;
  color: var(--primary-color);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.mobile-menu-close:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: rotate(90deg);
}

.mobile-menu-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 80px);
}

.mobile-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.mobile-nav-item {
  position: relative;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  color: var(--primary-color);
  text-decoration: none;
  background: none;
  border: none;
  font-size: 16px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.mobile-nav-link:hover {
  background: rgba(65, 133, 221, 0.1);
  color: var(--accent-color);
}

.mobile-arrow {
  transition: transform 0.3s ease;
}

.mobile-arrow.rotated {
  transform: rotate(180deg);
}

.mobile-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  margin: 8px 0;
}

.mobile-submenu.open {
  max-height: 500px;
}

.mobile-submenu-item {
  display: block;
  padding: 12px 20px 12px 40px;
  color: var(--text-color);
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s ease;
}

.mobile-submenu-item:hover {
  color: var(--accent-color);
  background: rgba(65, 133, 221, 0.1);
}

.mobile-menu-footer {
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-full {
  width: 100%;
  justify-content: center;
}

/* Mobile Backdrop */
.mobile-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Responsive Design */

/* Animation for dropdown items */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-item {
  animation: slideIn 0.3s ease forwards;
}

.dropdown-item:nth-child(1) { animation-delay: 0.1s; }
.dropdown-item:nth-child(2) { animation-delay: 0.15s; }
.dropdown-item:nth-child(3) { animation-delay: 0.2s; }
.dropdown-item:nth-child(4) { animation-delay: 0.25s; }
.dropdown-item:nth-child(5) { animation-delay: 0.3s; }
.dropdown-item:nth-child(6) { animation-delay: 0.35s; }
.dropdown-item:nth-child(7) { animation-delay: 0.4s; }
.dropdown-item:nth-child(8) { animation-delay: 0.45s; }
.dropdown-item:nth-child(9) { animation-delay: 0.5s; }
.dropdown-item:nth-child(10) { animation-delay: 0.55s; }
.dropdown-item:nth-child(11) { animation-delay: 0.6s; }

/* ========================================
   RESPONSIVE MENU STYLES - Professional & Compact
   ======================================== */

/* Backdrop */
.responsive-menu-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.responsive-menu-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

.responsive-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 320px;
  height: 100vh;
  background: var(--bg-color);
  border-left: 1px solid var(--divider-color);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  overflow-x: hidden;
}

.responsive-menu.show {
  transform: translateX(0);
}

.responsive-menu-wrapper {
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Compact Header */
.responsive-menu-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--divider-color);
  background: var(--card-bg);
  position: sticky;
  top: 0;
  z-index: 10;
}

.responsive-menu-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.responsive-menu-logo img {
  max-height: 36px;
  width: auto;
}

.close-menu {
  background: var(--secondary-color);
  border: none;
  color: var(--primary-color);
  font-size: 18px;
  cursor: pointer;
  padding: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.close-menu:hover {
  background: var(--accent-color);
  color: #ffffff;
  transform: scale(1.05);
}

/* Navigation */
.responsive-menu-nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0;
}

.responsive-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.responsive-menu-list > li {
  margin-bottom: 4px;
  padding: 0 12px;
}

.responsive-menu-list a,
.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  color: var(--text-color);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.2s ease;
  line-height: 1.4;
}

.responsive-menu-list a {
  width: 100%;
}

.menu-toggle {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}

.menu-toggle span {
  flex: 1;
}

.responsive-menu-list a:hover,
.menu-toggle:hover {
  background: var(--secondary-color);
  color: var(--primary-color);
  transform: translateX(4px);
}

.menu-toggle i {
  font-size: 12px;
  color: var(--text-color);
  opacity: 0.6;
  transition: transform 0.3s ease, opacity 0.2s ease;
  margin-left: 8px;
  flex-shrink: 0;
}

.menu-toggle:hover i {
  opacity: 1;
}

.menu-toggle i.rotate {
  transform: rotate(180deg);
}

/* Submenu */
.responsive-menu-list .submenu {
  list-style: none;
  margin: 4px 0 0 0;
  padding: 4px 0;
  background: var(--secondary-color);
  border-radius: 8px;
  overflow: hidden;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
  }
  to {
    max-height: 500px;
    opacity: 1;
    margin-top: 4px;
  }
}

.responsive-menu-list .submenu li {
  margin: 0;
  padding: 0;
}

.responsive-menu-list .submenu li a {
  padding: 10px 16px 10px 32px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-color);
  opacity: 0.85;
}

.responsive-menu-list .submenu li a:hover {
  background: var(--hover-bg);
  color: var(--accent-color);
  opacity: 1;
  transform: translateX(0);
}

/* Footer */
.responsive-menu-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--divider-color);
  background: var(--card-bg);
  position: sticky;
  bottom: 0;
}

.btn-mobile-menu {
  width: 100%;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 8px;
  justify-content: center;
}

/* Mobile Responsive Menu - Additional Mobile Styles */

/* ========================================
   NAVBAR TOGGLE BUTTON STYLES
   ======================================== */

.navbar-toggle {
  display: none;
}

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

.slicknav_btn:hover {
  background-position: right center;
}

.slicknav_icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.slicknav_icon-bar {
  display: block;
  width: 22px;
  height: 3px;
  background-color: var(--primary-color);
  border-radius: 6px;
  margin: 2px 0;
  transition: all 0.3s ease-in-out;
}

/* ========================================
   SUBMENU STYLES
   ======================================== */

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

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

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

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

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

/* ========================================
   HEADER STICKY STYLES
   ======================================== */

.header-sticky {
  position: relative;
  top: 0;
  z-index: 100;
  transition: all 0.3s ease-in-out;
}

.header-sticky.active {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: none !important;
}

/* Force remove any border from header in all themes */
header.main-header,
header.main-header .header-sticky,
header.main-header .header-sticky.active,
.navbar,
.navbar-expand-lg {
  border-bottom: none !important;
  border: none !important;
}

/* ========================================
   NAVBAR BRAND STYLES
   ======================================== */

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

.navbar-brand img {
  height: auto;
  width: auto;
  object-fit: contain;
}

/* ========================================
   NAV MENU WRAPPER STYLES
   ======================================== */

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

.nav-menu-wrapper .navbar-nav {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--divider-color);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 25px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  list-style: none;
  margin: 0;
  height: 45px;
}

/* ========================================
   NAV LINK STYLES
   ======================================== */

.nav-link {
  font-size: 16px;
  font-weight: 400;
  line-height: 1em;
  padding: 6px 14px !important;
  margin: 3px 0;
  border-radius: 100px;
  color: #FFFFFF;
  text-transform: capitalize;
  transition: all 0.3s ease-in-out;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  text-decoration: none;
  display: flex;
  align-items: center;
  height: 35px;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--primary-color);
  background: var(--secondary-color);
  text-decoration: none;
}
/* Main menu only: hover = bold dark purple, no pill */
header.main-header .main-menu .nav-link:hover,
header.main-header .main-menu .nav-link:focus {
  color: #4b0082 !important;
  background: transparent !important;
}

/* ========================================
   SUBMENU ARROW STYLES
   ======================================== */

.nav-item.submenu > .nav-link:after {
  content: '\f107';
  font-family: 'FontAwesome';
  font-weight: 900;
  font-size: 14px;
  margin-left: 8px;
}

/* ========================================
   HEADER BUTTON STYLES
   ======================================== */

.header-btn {
  display: block !important;
}

.header-btn .btn-default {
  background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
  background-size: 200% auto;
  color: var(--primary-color);
  padding: 12px 30px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 500;
  text-transform: capitalize;
  transition: all 0.4s ease-in-out;
  border: none;
  display: inline-block;
}

.header-btn .btn-default:hover {
  background-position: right center;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Responsive Section Subtitles - Make smaller on mobile */
@media (max-width: 767px) {
  .section-title h2 {
    font-size: 24px !important;
  }
  
  .section-title h2 span {
    font-size: inherit !important;
  }
  
  /* Specific section overrides for mobile */
  .our-services .section-title h2 {
    font-size: 22px !important;
  }
  
  .our-specialties .section-title h2 {
    font-size: 22px !important;
  }
  
  .our-facts .facts-section-title h2 {
    font-size: 22px !important;
  }
  
  .why-choose-us .section-title h2,
  .why-choose-box .section-title h2 {
    font-size: 22px !important;
  }
  
  .case-study .section-title h2 {
    font-size: 22px !important;
  }
  
  .our-features .section-title h2 {
    font-size: 22px !important;
  }
  
  .our-pricing .section-title h2 {
    font-size: 22px !important;
  }
  
  .our-testimonial .section-title h2 {
    font-size: 22px !important;
  }
  
  .our-faqs .section-title h2 {
    font-size: 22px !important;
  }
  
  .our-blog .section-title h2 {
    font-size: 22px !important;
  }
  
  .cta-box .section-title h2,
  .cta-box-content .section-title h2 {
    font-size: 22px !important;
  }
  
  .about-us .section-title h2,
  .about-us-redesign .section-title h2 {
    font-size: 22px !important;
  }
}