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


.flower-icon{
    color:#fff;
    font-size:22px;
}



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

:root{
	--primary-color				: #010535;
	--secondary-color			: #FFFFFF;
	--bg-color					: #F3F6FC;
	--text-color				: #2E314D;
	--accent-color				: #3662CC;
	--white-color				: #FFFFFF;
	--divider-color				: #0105351A;
	--dark-divider-color		: #FFFFFF1A;
	--error-color				: rgb(230, 87, 87);
	--default-font				: "DM Sans", sans-serif;
	--accent-font				: "Apfel Grotezk";
}

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

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

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

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

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

::-webkit-scrollbar-thumb{
	background: var(--accent-color);
}

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

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

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

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

.container{
	max-width: 1300px;
}

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

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

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

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

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

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

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

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

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

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


.btn-default{
	position: relative;
    display: inline-block;
    background: var(--accent-color);
	border-radius: 100px;
	font-family: var(--accent-font);
    font-size: 16px;
    font-weight: 500;
	line-height: 1em;
	letter-spacing: -0.02em;
    text-transform: capitalize;
    color: var(--white-color);
    padding: 17px 80px 17px 24px;
    border: none;
    overflow: hidden;
	outline: none;
	transition: all 0.5s ease-in-out;
    z-index: 0;
}
.sidebar-cta-contact-btn i{
    margin-right: 4px !important;
}
.btn-default:hover{
	color: var(--white-color);
}

.btn-default::before{
	content: '';
	position: absolute;
	top: 50%;
    right: 40PX;
	width: 24px;
	height: 24px;
	background-image: url('../images/arrow-white.svg');
	background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	transform: translateY(-50%);
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

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

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

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

.btn-default.btn-light{
	background-color: var(--dark-divider-color);
	backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
}

.btn-default.btn-light:hover,
.btn-default.btn-highlighted:hover{
    color: var(--primary-color);
}

.btn-default.btn-light:hover:before,
.btn-default.btn-highlighted:hover:before{
    filter: brightness(0) invert(0);
}

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

.readmore-btn{
	position: relative;
	display: inline-block;
	font-family: var(--accent-font);
	font-weight: 500;
	line-height: normal;
	text-transform: capitalize;
	color: var(--primary-color);
	padding: 3px 36px 3px 0;
}

.readmore-btn::before{
	content: '';
    position: absolute;
    top: 50%;
    right: 0;
	width: 26px;
	height: 26px;
	transform: translateY(-50%);
	background-color: var(--accent-color);
	border-radius: 50%;
	background-image: url('../images/arrow-white.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 18px auto;
    transition: all 0.4s ease-in-out;
}

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

.cb-cursor:before{
	background: var(--accent-color);
}

.preloader{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background: var(--primary-color);
	display: flex;
	align-items: center;
	justify-content: center;
}

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

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

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

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

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

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

.light-section{
	background-color: var(--white-color);
}

.light-section .container-fluid{
	padding: 0;
}

.dark-section{
	background-color: var(--primary-color);
	background-image: url('../images/dark-section-bg-image.png');
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
}

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

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

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

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

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

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

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

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

.section-title .section-sub-title{
	position: relative;
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	text-transform: capitalize;
	line-height: normal;
	color: var(--primary-color);
	background-color: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 40px;
	padding: 7px 16px 7px 32px;
    margin-bottom: 15px;
}

.section-title .section-sub-title::before{
	content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--accent-color);
	border-radius: 50%;
    width: 6px;
    height: 6px;
}

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

.section-title h2{
	font-size: 48px;
	font-weight: 500;
    line-height: 1.2em;
	letter-spacing: -0.02em;
	margin-bottom: 0;
	cursor: none;
}

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

.light-section .section-title .section-sub-title{
	background: var(--bg-color);
}

.dark-section .section-title .section-sub-title{
	background: var(--dark-divider-color);
	border-color: var(--dark-divider-color);
	backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
	color: var(--white-color);
}

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

.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: 30px;
	left: 15px;
	right: 15px;
	z-index: 100;
}

header.main-header .header-sticky{
	position: relative;
	max-width: 1300px;
	top: 0;
	background: var(--white-color);
	border-radius: 100px;
	margin: 0 auto;
	z-index: 100;
}

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

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

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

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

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

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

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

.main-menu ul li a{
	font-size: 16px;
	font-weight: 400;
	line-height: 1.25em;
	padding: 12px 10px !important;
	color: var(--text-color);
	background: transparent;
	border-radius: 0px;
	/* text-transform: capitalize; */
	transition: all 0.3s ease-in-out;
}

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

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

.main-menu ul ul{
	position: absolute;
	left: 0;
	top: 100%;
	transform: scale(1,0.8);
	transform-origin: top;
	width: 235px;
	background: var(--accent-color);
	border-radius: 20px;
	list-style: none;
	padding: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	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(--white-color);
	padding: 8px 20px !important;
	transition: all 0.3s ease-in-out;
}

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

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

.header-btn{
	line-height: 0;
}

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

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

.slicknav_btn{
	background: var(--accent-color);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	border-radius: 6px;
}

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

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

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

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

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

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

.slicknav_menu{
	position: absolute;
    width: 100%;
	padding: 0;
	background: var(--accent-color);
}

.slicknav_menu ul{
	margin: 5px 0;
}

.slicknav_menu ul ul{
	margin: 0;
}

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

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

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

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

.slicknav_arrow:after{
	content: '\f107';
	position: absolute;
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 12px;
	margin-left: 8px;
	color: var(--white-color);
	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(--primary-color);
}

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

.hero{
	position: relative;
	background-image: url('../images/hero-bg-image.jpg');
	background-position: center center;
}

.hero::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg, rgba(1, 5, 53, 0.90) -2.45%, rgba(1, 5, 53, 0.81) 32.3%, transparent 97.72%);
	width: 100%;
	height: 100%;
	z-index: 1;
}

.hero-box{
	position: relative;
    padding: 290px 0 140px;
	z-index: 1;
}

.hero-content-box{
	margin-right: 50px;
}

.hero-sub-heading{
	display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--dark-divider-color);
    border-radius: 100px;
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    padding: 5px 16px 5px 5px;
    margin-bottom: 15px;
}

.satisfy-client-images{
	display: flex;
	align-items: center;
}

.satisfy-client-image{
	position: relative;
    display: inline-block;
    margin-left: -14px;
	border: 1px solid var(--bg-color);
	border-radius: 50%;
	overflow: hidden;
	z-index: 1;
}

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

.satisfy-client-image figure{
	display: block;
}

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

.satisfy-client-image.add-more{
	width: 50px;
	height: 50px;
	background-color: var(--accent-color);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.3s ease-in-out;
}

.satisfy-client-image.add-more img{
	width: 100%;
	max-width: 16px;
}

.satisfy-client-image.add-more i{
	font-size: 20px;
	color: var(--white-color);
}

.satisfy-client-image.add-more h3{
	font-size: 18px;
	color: var(--white-color);
}

.section-footer-text.section-satisfy-img ul{
	margin: 5px 0 0;
}

.dark-section .section-footer-text.section-satisfy-img .satisfy-client-image{
    border-color: var(--primary-color);
}

.hero-sub-heading .satisfy-client-image figure img{
	max-width: 30px;
}

.hero-satisfy-client-content p{
	font-size: 14px;
	font-weight: 600;
    color: var(--white-color);
    margin-bottom: 0;
}

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

.video-play-button a{
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: none;
	gap: 15px;
}

.video-play-button a span{
	position: relative;
	width: 50px;
	height: 50px;
	background: var(--accent-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.4s ease-in-out;
}

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

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

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

.video-play-button a span i{
	position: relative;
	font-size: 17px;
	color: var(--white-color);
	margin-left: 2px;
	transition: all 0.3s ease-in-out;
	z-index: 1;
}

.video-play-button p{
	font-weight: 600;
	color: var(--white-color);
	margin: 0;
}

.hero-content-footer{
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
	border-top: 1px solid var(--dark-divider-color);
	padding-top: 40px;
	margin-top: 100px;
}

.hero-footer-item{
	width: calc(40% - 15px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}

.hero-footer-item .icon-box{
	position: relative;
	width: 50px;
	height: 50px;
	background: var(--accent-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

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

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

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

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

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

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

.hero-client-box{
	width: calc(60% - 15px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}

.hero-client-box .satisfy-client-content{
	max-width: 172px;
}

.hero-client-box .satisfy-client-content p{
	color: var(--white-color);
	margin: 0;
}

.our-scrolling-ticker{
	position: relative;
	background: var(--dark-divider-color);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: 25px 0;
	z-index: 1;
}

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

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

.scrolling-content span{
	display: inline-flex;
	align-items: center;
	gap: var(--gap);
	font-family: var(--accent-font);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.25em;
	letter-spacing: -0.02em;
	color: var(--white-color);
	text-transform: capitalize;
}

.scrolling-content span img{
	width: 100%;
	max-width: 14px;
	animation: sparkelotate 5s infinite linear;
}

@keyframes sparkelotate{
	0%{
		transform: rotate(0) scale(1);
    }
	50%{
		transform: rotate(180deg) scale(1.5);
    }
    100%{
		transform: rotate(360deg) scale(1);
    }
}

@keyframes scroll{
	from{
		transform: translateX(0);
	}
	to{
		transform: translateX(calc(-100% - var(--gap)));
	}
}

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

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

.about-image-box{
	background: url('../images/about-image-box-bg-image.png') no-repeat;
    background-position: top 50px right 60px;
    background-size: auto;
	display: flex;
    flex-wrap: wrap;
    align-items: end;
    margin-right: 15px;
}

.about-us-image-box-1{
	width: 30%;
}

.about-us-image-box-1 .about-us-image{
	margin-right: -260px;
}

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

.about-us-image figure img{
	width: 100%;
	object-fit: cover;
	border-radius: 20px;
}

.about-us-image-box-1 .about-us-image figure img{
	aspect-ratio: 1 / 0.93;
}

.about-us-image-box-2{
	position: relative;
    width: 70%;
    z-index: 1;
}

.about-us-image-box-2 .about-us-image figure{
	border: 6px solid var(--bg-color);
}

.about-us-image-box-2 .about-us-image figure img{
	aspect-ratio: 1 / 0.91;
    border-radius: 10px;
}

.about-experience-item{
	position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    background: var(--secondary-color);
    padding: 25px;
    border-radius: 20px;
	margin: 45px -110px 45px 30px;
	animation: boxmove 3s infinite linear alternate;
	z-index: 2;
}

@keyframes boxmove{
	50%{
		transform: translateX(20px);
	}
}

.about-experience-item .icon-box{
	position: relative;
    height: 60px;
    width: 60px;
    background: var(--accent-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
	overflow: hidden;
}

.about-experience-item .icon-box:before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--primary-color);
	border-radius: 10px;
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.about-experience-item:hover .icon-box:before{
	transform: rotate(0) scale(1);
}

.about-experience-item .icon-box img{
	position: relative;
    width: 100%;
    max-width: 30px;
    z-index: 1;
}	

.about-experience-item-content{
	width: calc(100% - 80px);
}

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

.about-us-body{
	display: flex;
    flex-wrap: wrap;
	gap: 10px;
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    padding: 10px;
}

.about-us-body-image{
	width: calc(50% - 5px);
}

.about-us-body-image figure{
	height: 100%;
	display: block;
    border-radius: 10px;
}

.about-us-body-image figure img{
	width: 100%;
	height: 100%;
    aspect-ratio: 1 / 0.52;
    object-fit: cover;
    border-radius: 10px;
}

.about-us-body-list{
	width: calc(50% - 5px);
	align-content: center;
	padding: 20px;
}

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

.about-us-body-list ul li{
	position: relative;
    line-height: 1.5em;
    margin-bottom: 15px;
    padding-left: 25px;
}

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

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

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

.about-us-author-box{
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

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

.about-us-author-image figure img{
	width: 100%;
    max-width: 50px;
}

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

.about-us-author-content p{
	line-height: normal;
	margin: 5px 0 0;
}

/************************************/
/*** 	06. Our Services css      ***/
/************************************//* Content Box *//* =========================================================
   TWO WAYS WE SERVE YOU
   CLEAN / COMPACT VERSION
========================================================= */

.dfir-service-paths {
    position: relative;
    width: 100%;
    margin: 55px 0 0;
    padding: 0 0 35px;
    text-align: left;
}

.dfir-section-heading {
    max-width: 820px;
    margin: 0 0 32px;
    text-align: left;
}

.dfir-heading-eyebrow {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    margin-bottom: 12px;

    color: var(--accent-color);
    font-family: var(--default-font);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;

    text-align: left;
}

.dfir-eyebrow-line {
    width: 25px;
    height: 1px;
    background: var(--accent-color);
}

.dfir-main-title {
    margin: 0;

    color: var(--primary-color);
    font-family: var(--accent-font);

    font-size: clamp(38px, 4.5vw, 58px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -1.5px;

    text-align: left;
}

.dfir-main-title span {
    color: var(--accent-color);
}

.dfir-main-description {
    max-width: 650px;
    margin: 15px 0 0;

    color: var(--text-color);
    font-family: var(--default-font);

    font-size: 12px;
    line-height: 1.7;

    text-align: left;
}


/* =========================================================
   SERVICE GRID
========================================================= */

.dfir-service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}


/* =========================================================
   SERVICE CARD
========================================================= */

.dfir-response-card {
    position: relative;

    min-height: 540px;

    display: flex;
    flex-direction: column;

    padding: 27px;

    background: var(--secondary-color);

    border: 1px solid rgba(1, 5, 53, .10);
    border-radius: 14px;

    overflow: hidden;

    text-align: left;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


/* subtle accent */

.dfir-response-card::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;

    width: 3px;
    height: 100%;

    background: var(--accent-color);

    transform: scaleY(0);
    transform-origin: bottom;

    transition: transform .4s ease;
}

.dfir-response-card:hover::before {
    transform: scaleY(1);
}

.dfir-response-card:hover {
    transform: translateY(-4px);

    border-color: rgba(54, 98, 204, .25);

    box-shadow:
        0 18px 45px rgba(1, 5, 53, .08);
}


/* =========================================================
   NUMBER
========================================================= */

.dfir-card-number {
    position: absolute;

    top: 18px;
    right: 23px;

    color: rgba(1, 5, 53, .06);

    font-family: var(--default-font);
    font-size: 70px;
    font-weight: 800;

    line-height: 1;
}


/* =========================================================
   CARD TOP
========================================================= */

.dfir-card-top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 30px;
}


/* ICON */

.dfir-service-icon {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--bg-color);

    border: 1px solid rgba(54, 98, 204, .16);

    border-radius: 12px;

    color: var(--accent-color);

    font-size: 17px;

    transition: all .3s ease;
}

.dfir-response-card:hover .dfir-service-icon {
    background: var(--accent-color);
    color: var(--white-color);

    transform: translateY(-2px);
}

.dfir-icon-glow {
    display: none;
}


/* STATUS */

.dfir-status {
    padding: 6px 10px;

    background: var(--bg-color);

    border: 1px solid rgba(54, 98, 204, .14);

    border-radius: 30px;

    color: var(--accent-color);

    font-family: var(--default-font);

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 1.2px;
}


/* =========================================================
   CONTENT
========================================================= */

.dfir-card-content {
    text-align: left;
}

.dfir-card-content h3 {
    margin: 0 0 7px;

    color: var(--primary-color);

    font-family: var(--accent-font);

    font-size: 28px;
    font-weight: 500;

    line-height: 1.1;

    text-align: left;
}

.dfir-card-content h4 {
    margin: 0 0 14px;

    color: var(--accent-color);

    font-family: var(--default-font);

    font-size: 11px;
    font-weight: 700;

    text-align: left;
}

.dfir-card-content > p {
    margin: 0 0 20px;

    color: var(--text-color);

    font-family: var(--default-font);

    font-size: 11px;

    line-height: 1.7;

    text-align: left;
}


/* =========================================================
   FEATURES
========================================================= */

.dfir-feature-list {
    width: 100%;
}

.dfir-feature {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    padding: 8px 0;

    border-bottom: 1px solid rgba(1, 5, 53, .07);

    color: var(--text-color);

    font-family: var(--default-font);

    font-size: 10px;

    line-height: 1.5;

    text-align: left;
}

.dfir-feature:first-child {
    padding-top: 0;
}

.dfir-check {
    flex: 0 0 auto;

    width: 18px;
    height: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(54, 98, 204, .10);

    border-radius: 50%;

    color: var(--accent-color);

    font-size: 7px;
}


/* =========================================================
   BUTTON
========================================================= */

.dfir-card-footer {
    margin-top: auto;
    padding-top: 20px;
}

.dfir-service-btn {
    display: flex;

    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding: 12px 15px;

    background: var(--primary-color);

    border-radius: 7px;

    color: var(--white-color);

    font-family: var(--default-font);

    font-size: 9px;
    font-weight: 700;

    text-decoration: none;

    transition: all .3s ease;
}

.dfir-service-btn:hover {
    background: var(--accent-color);
    color: var(--white-color);
}

.dfir-service-btn i {
    transition: transform .3s ease;
}

.dfir-service-btn:hover i {
    transform: translateX(4px);
}


/* =========================================================
   WHY TRUST
   MUCH CLOSER TO ABOVE SECTION
========================================================= */

.dfir-trust-section-new {
    position: relative;

    width: 100%;

    /* IMPORTANT: small gap from previous section */
    margin: 5px 0 55px;

    padding: 0;

    background: transparent;

    text-align: left;

    overflow: visible;
}


/* =========================================================
   TRUST HEADER
========================================================= */

.dfir-trust-new-header {
    position: relative;

    max-width: 780px;

    margin: 0 0 32px;

    padding: 0;

    text-align: left;
}


/* small blue line */

.dfir-trust-new-header::before {
    content: "";

    display: block;

    width: 42px;
    height: 3px;

    margin-bottom: 14px;

    background: var(--accent-color);
}


/* EYEBROW */

.dfir-trust-new-eyebrow {
    display: block;

    margin-bottom: 10px;

    color: var(--accent-color);

    font-family: var(--default-font);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2px;

    text-align: left;
}


/* TITLE */

.dfir-trust-new-title {
    margin: 0;

    color: var(--primary-color);

    font-family: var(--accent-font);

    font-size: clamp(38px, 4.5vw, 58px);

    font-weight: 500;

    line-height: 1;

    letter-spacing: -1.5px;

    text-align: left;
}

.dfir-trust-new-title span {
    color: var(--accent-color);
}


/* DESCRIPTION */

.dfir-trust-new-description {
    max-width: 680px;

    margin: 16px 0 0;

    color: var(--text-color);

    font-family: var(--default-font);

    font-size: 12px;

    line-height: 1.75;

    text-align: left;
}


/* =========================================================
   TRUST CARDS
   HORIZONTAL PREMIUM STYLE
========================================================= */

.dfir-trust-new-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 10px;

    border: 0;
}


/* CARD */

.dfir-trust-new-card {
    position: relative;

    min-height: 245px;

    padding: 24px 21px;

    background: var(--secondary-color);

    border: 1px solid rgba(1, 5, 53, .09);

    border-radius: 12px;

    overflow: hidden;

    text-align: left;

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


/* top blue line */

.dfir-trust-new-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 2px;

    background: var(--accent-color);

    transform: scaleX(0);

    transform-origin: left;

    transition: transform .35s ease;
}

.dfir-trust-new-card:hover::before {
    transform: scaleX(1);
}

.dfir-trust-new-card:hover {
    transform: translateY(-5px);

    border-color: rgba(54, 98, 204, .22);

    box-shadow:
        0 15px 35px rgba(1, 5, 53, .08);
}


/* =========================================================
   TRUST CARD TOP
========================================================= */

.dfir-trust-new-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 38px;
}

.dfir-trust-new-number {
    color: rgba(1, 5, 53, .20);

    font-family: var(--default-font);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;
}


/* ICON */

.dfir-trust-new-icon {
    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: var(--bg-color);

    border: 1px solid rgba(54, 98, 204, .16);

    border-radius: 10px;

    color: var(--accent-color);

    font-size: 14px;

    transition: all .3s ease;
}

.dfir-trust-new-card:hover .dfir-trust-new-icon {
    background: var(--accent-color);

    color: var(--white-color);

    transform: translateY(-2px);
}


/* =========================================================
   TRUST CONTENT
========================================================= */

.dfir-trust-new-content {
    text-align: left;
}

.dfir-trust-new-label {
    display: block;

    margin-bottom: 7px;

    color: var(--accent-color);

    font-family: var(--default-font);

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1.4px;

    text-align: left;
}

.dfir-trust-new-content h3 {
    margin: 0 0 9px;

    color: var(--primary-color);

    font-family: var(--accent-font);

    font-size: 20px;

    font-weight: 500;

    line-height: 1.15;

    text-align: left;
}

.dfir-trust-new-content p {
    margin: 0;

    color: var(--text-color);

    font-family: var(--default-font);

    font-size: 10px;

    line-height: 1.7;

    text-align: left;
}


/* =========================================================
   TRUST BOTTOM STRIP
========================================================= */

.dfir-trust-new-bottom {
    display: flex;

    align-items: center;

    gap: 16px;

    margin-top: 20px;

    padding: 18px 21px;

    background: var(--primary-color);

    text-align: left;
}

.dfir-trust-new-bottom-icon {
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: var(--accent-color);

    color: var(--white-color);

    font-size: 14px;
}

.dfir-trust-new-bottom span {
    display: block;

    margin-bottom: 4px;

    color: #9BB4EF;

    font-family: var(--default-font);

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1.4px;

    text-align: left;
}

.dfir-trust-new-bottom p {
    margin: 0;

    color: rgba(255,255,255,.70);

    font-family: var(--default-font);

    font-size: 10px;

    line-height: 1.5;

    text-align: left;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .dfir-trust-new-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .dfir-service-paths {
        margin-top: 40px;
        padding-bottom: 20px;
    }

    .dfir-section-heading {
        margin-bottom: 27px;
    }

    .dfir-main-title {
        font-size: 38px;
    }

    .dfir-main-description {
        font-size: 11px;
    }

    .dfir-service-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .dfir-response-card {
        min-height: auto;
        padding: 24px 21px;
    }


    /* TRUST */

    .dfir-trust-section-new {
        margin-top: 0;
        margin-bottom: 40px;
    }

    .dfir-trust-new-header {
        margin-bottom: 25px;
    }

    .dfir-trust-new-title {
        font-size: 38px;
    }

    .dfir-trust-new-description {
        font-size: 11px;
    }

    .dfir-trust-new-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .dfir-trust-new-card {
        min-height: auto;
        padding: 22px 20px;
    }

    .dfir-trust-new-top {
        margin-bottom: 28px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .dfir-main-title,
    .dfir-trust-new-title {
        font-size: 32px;
    }

    .dfir-response-card {
        padding: 21px 18px;
    }

    .dfir-card-content h3 {
        font-size: 24px;
    }

    .dfir-card-content > p {
        font-size: 10px;
    }

    .dfir-feature {
        font-size: 9px;
    }

    .dfir-trust-new-card {
        padding: 20px 17px;
    }

    .dfir-trust-new-content h3 {
        font-size: 19px;
    }

    .dfir-trust-new-content p {
        font-size: 9px;
    }

}
.service-item-content-box-gold{
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Body */
.service-item-body-gold{
    display: flex;
    flex-direction: column;
    justify-content: center;   /* Vertical center */
    align-items: flex-start;   /* Left align */
    flex: 1;
    padding: 25px;
}

/* Content */
.service-item-content-gold{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    text-align: left;
}

/* Heading */
.service-item-content-gold h2{
    text-align: left;
    width: 100%;
    margin-bottom: 15px;
}

/* Paragraph */
.service-item-content-gold p{
    text-align: left;
    width: 100%;
    margin-bottom: 0;
}

/* Button */
.service-item-btn-gold{
    width: 100%;
    text-align: left;
    margin-top: 20px;
}
/* =====================================
   CYBER TABS UPDATED
===================================== */
/* =========================================================
   MANAGED SECURITY SERVICES - 5 BOXES ONE ROW
   ONLY MANAGED TAB
========================================================= */

#managed .row.service-item-list-gold {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    margin: 0 !important;
}


/* =========================================================
   5 EQUAL BOXES
========================================================= */

#managed .row.service-item-list-gold > div {
    width: 20% !important;
    max-width: 20% !important;
    flex: 0 0 20% !important;

    padding-left: 7px !important;
    padding-right: 7px !important;
}


/* =========================================================
   CARD - EXISTING SIZE
========================================================= */

#managed .service-item-gold {
    width: 100% !important;
    height: 100% !important;

    display: flex !important;
    flex-direction: column !important;
}


/* =========================================================
   HEADING
   SAME FONT SIZE
   ONE LINE
========================================================= */

#managed .service-item-content-gold h2 {
    font-size: 16px !important;
    line-height: 22px !important;

    height: 22px !important;
    min-height: 22px !important;

    margin: 0 0 15px 0 !important;

    white-space: nowrap !important;

    overflow: visible !important;
    text-overflow: clip !important;

    /*
       Heading font size same rahega.
       Sirf horizontal spacing compress hogi
       taaki full heading ek line mein aaye.
    */
    transform: scaleX(0.78) !important;
    transform-origin: left center !important;

    width: 128% !important;
}


/* =========================================================
   DESCRIPTION
   SAME START + SAME HEIGHT
========================================================= */

#managed .service-item-content-gold p {
    margin: 0 !important;

    font-size: 14px !important;
    line-height: 21px !important;

    height: 105px !important;
    min-height: 105px !important;
    max-height: 105px !important;

    overflow: hidden !important;
}


/* =========================================================
   LEARN MORE
   SAME POSITION
========================================================= */

#managed .service-item-body-gold {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

#managed .service-item-btn-gold {
    margin-top: auto !important;
    padding-top: 15px !important;

    white-space: nowrap !important;
}

#managed .service-item-btn-gold a {
    white-space: nowrap !important;
}


/* =========================================================
   IMAGE
   DON'T CHANGE CARD SIZE
========================================================= */

#managed .service-item-image-gold {
    width: 100% !important;
}

#managed .service-item-image-gold img {
    width: 100% !important;
    display: block !important;
    object-fit: cover !important;
}


/* =========================================================
   IMPORTANT:
   CONSULTANCY IS NOT AFFECTED
========================================================= */

#consultancy .service-item-content-gold h2,
#consultancy .service-item-content-gold p {
    transform: none !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {

    #managed .row.service-item-list-gold {
        flex-wrap: wrap !important;
    }

    #managed .row.service-item-list-gold > div {
        width: 33.333% !important;
        max-width: 33.333% !important;
        flex: 0 0 33.333% !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    #managed .row.service-item-list-gold > div {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }

}


@media (max-width: 575px) {

    #managed .row.service-item-list-gold > div {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

}/* =========================================
   MANAGED SERVICES
   EXACTLY MAX 2 LINES
========================================= */

#managed .service-item-content-gold h2 {
    font-size: 16px !important;
    line-height: 22px !important;
    font-weight: 600 !important;

    width: 100% !important;

    white-space: normal !important;

    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;

    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;

    margin: 0 0 14px 0 !important;

    transform: none !important;
}


/* DESCRIPTION HEADING KE BAAD */
#managed .service-item-content-gold p {
    margin-top: 0 !important;

    font-size: 14px !important;
    line-height: 21px !important;

    height: 105px !important;
    max-height: 105px !important;

    overflow: hidden !important;
}


/* LEARN MORE SAME LEVEL */
#managed .service-item-body-gold {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

#managed .service-item-btn-gold {
    margin-top: auto !important;
}/* =========================================
   ONLY HEADING FIX
   NO LAYOUT CHANGE
   NO CARD SIZE CHANGE
   NO LEARN MORE POSITION CHANGE
========================================= */

.consulting-five-row .service-item-content-gold h2 {
    font-size: 18px !important;
    line-height: 1.35 !important;

    /* Heading ko maximum 2 lines */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;

    overflow: hidden !important;

    /* Same heading area for every card */
    min-height: 48px !important;
    max-height: 48px !important;

    margin-bottom: 15px !important;
}


/* Description ko touch nahi karna */
.consulting-five-row .service-item-content-gold p {
    margin-bottom: 0 !important;
}


/* Learn More ko bilkul existing position par rakho */
.consulting-five-row .service-item-btn-gold {
    margin-top: 0 !important;
}


/* Existing card/layout ko bilkul change nahi karna */
.consulting-five-row .service-item-gold {
    width: 100%;
}


/* 5 boxes same row — existing layout */
.consulting-five-row {
    display: flex;
    flex-wrap: nowrap;
}

.consulting-five-row .consulting-five-col {
    width: 20%;
    max-width: 20%;
    flex: 0 0 20%;
}
.cyber-tabs{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    margin-bottom:55px;

}


.cyber-tab{

    position:relative;
    overflow:hidden;

    border:1px solid var(--accent-color);

    background:var(--white-color);

    color:var(--primary-color) !important;

    padding:16px 32px;

    border-radius:50px;

    font-family:var(--default-font);

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:all .4s ease;

    z-index:1;

    display:inline-flex;
    align-items:center;
    justify-content:center;

}

.cyber-tab img.tab-logo{
    display:none !important;
}

.cyber-ecosystem-section .icon-box{
    width:90px;
    height:90px;
    border-radius:20px;
    background:rgba(54,98,204,0.09);
    border:1px solid rgba(54,98,204,0.18);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:24px;
    transition:all .35s ease;
}

.cyber-ecosystem-section .icon-box img{
    width:78px;
    height:78px;
    object-fit:contain;
    transition:transform .35s ease;
}

.cyber-ecosystem-card:hover .icon-box{
    background:rgba(54,98,204,0.22);
    border-color:var(--accent-color);
    transform:translateY(-4px);
    box-shadow:0 12px 30px rgba(54,98,204,0.3);
}



/* Blue hover background */

.cyber-tab::before{

    content:"";

    position:absolute;

    inset:0;

    background:var(--accent-color);

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s ease;

    z-index:-1;

}





/* Hover */

.cyber-tab:hover::before{

    transform:scaleX(1);

}



.cyber-tab:hover{

    color:var(--white-color) !important;

}





/* Active Tab */

.cyber-tab.active{

    background:var(--accent-color);

    color:var(--white-color) !important;

    border-color:var(--accent-color);

}



.cyber-tab.active::before{

    transform:scaleX(1);

}



/* Text visibility fix */

.cyber-tab,
.cyber-tab:hover,
.cyber-tab.active{

    text-shadow:none;

}



/* =========================================================
   CYBERSECURITY ECOSYSTEM - RESPONSIVE FIXES ONLY
========================================================= */

/* --- Laptop & Medium Screens (max-width: 1199px) --- */
@media (max-width: 1199px) {
    .consulting-five-row,
    #managed .row.service-item-list-gold {
        flex-wrap: wrap !important;
    }

    .consulting-five-row .consulting-five-col,
    #managed .row.service-item-list-gold > div {
        width: 33.333% !important;
        max-width: 33.333% !important;
        flex: 0 0 33.333% !important;
        margin-bottom: 24px;
    }

    .consulting-five-row .service-item-content-gold h2,
    #managed .service-item-content-gold h2 {
        height: auto !important;
        min-height: 48px !important;
        max-height: none !important;
        -webkit-line-clamp: 2 !important;
    }

    .consulting-five-row .service-item-content-gold p,
    #managed .service-item-content-gold p {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .cyber-tabs {
        gap: 14px;
        margin-bottom: 45px;
    }

    .cyber-tab {
        padding: 14px 26px;
        font-size: 15px;
        width: auto;
    }
}

/* --- Tablet / iPad Portrait (max-width: 991px) --- */
@media (max-width: 991px) {
    .cyber-ecosystem-section {
        padding: 80px 0;
    }

    .consulting-five-row .consulting-five-col,
    #managed .row.service-item-list-gold > div {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
        margin-bottom: 20px;
    }

    .cyber-panel#academy .row > div {
        margin-bottom: 20px;
    }

    .consulting-five-row .service-item-content-gold h2,
    #managed .service-item-content-gold h2 {
        font-size: 17px !important;
        line-height: 1.35 !important;
        min-height: 0 !important;
        height: auto !important;
    }

    .consulting-five-row .service-item-content-gold p,
    #managed .service-item-content-gold p {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .service-item-gold {
        min-height: 350px;
        padding: 28px 24px;
    }

    .cyber-tabs {
        gap: 12px;
        margin-bottom: 40px;
    }

    .cyber-tab {
        padding: 12px 22px;
        font-size: 15px;
        width: auto;
    }
}

/* --- Mobile / Small Tablet (max-width: 767px) --- */
@media (max-width: 767px) {
    .consulting-five-row .consulting-five-col,
    #managed .row.service-item-list-gold > div {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 20px;
    }

    .cyber-panel#academy .row > div {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 20px;
    }

    .cyber-panel#platform .row > div {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .service-item-gold {
        min-height: auto;
        padding: 24px 20px;
        margin-bottom: 20px;
    }

    .cyber-tabs {
        gap: 10px;
        margin-bottom: 35px;
    }

    .cyber-tab {
        width: 100%;
        padding: 12px 18px;
        font-size: 14px;
        text-align: center;
        justify-content: center;
    }

    .consulting-five-row .service-item-content-gold h2,
    #managed .service-item-content-gold h2 {
        display: block !important;
        -webkit-line-clamp: unset !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin-bottom: 12px !important;
    }

    .consulting-five-row .service-item-content-gold p,
    #managed .service-item-content-gold p {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
}

/* --- Small Mobile (max-width: 575px) --- */
@media (max-width: 575px) {
    .cyber-ecosystem-section {
        padding: 60px 0;
    }

    .service-item-gold {
        padding: 20px 16px;
        border-radius: 16px;
    }

    .consulting-five-row .service-item-content-gold h2,
    #managed .service-item-content-gold h2,
    .service-item-content-gold h2 {
        font-size: 16px !important;
        line-height: 1.35 !important;
    }

    .consulting-five-row .service-item-content-gold p,
    #managed .service-item-content-gold p,
    .service-item-content-gold p {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
    }

    .service-item-btn-gold {
        margin-top: 15px !important;
        padding-top: 15px !important;
    }

    .cyber-tab {
        padding: 11px 14px;
        font-size: 13.5px;
    }
}

.our-services{
	background-image: url('../images/service-bg-image.png');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: auto;
	padding: 120px 0;
}

.service-item{
	position: relative;
	background-color: var(--bg-color);
    border-radius: 20px;
    min-height: 440px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 40px;
    overflow: hidden;
}

.service-item:before{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--bg-color);
    border-radius: 10px;
    width: 100%;
    height: 100%;
    transition: all 0.5s ease-in-out;
    z-index: 1;
}

.service-item.active::before,
.service-item:hover::before{
	transform: translate(100%, -100%);
}

.service-item-image{
	position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: all 0.4s ease-in-out;
}

.service-item.active .service-item-image,
.service-item:hover .service-item-image{
	opacity: 1;
}

.service-item-image::after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--primary-color);
	opacity: 50%;
}

.service-item-image figure{
	display: block;
	height: 100%;
}

.service-item-image figure img{
    width: 100%;
	height: 100%;
	object-fit: cover;
}

.service-item-content-box{
	position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    z-index: 2;
}

.service-item-header{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 30px;
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 40px;
	margin-bottom: 40px;
	transition: all 0.4s ease-in-out;
}

.service-item.active .service-item-header,
.service-item:hover .service-item-header{
	border-color: var(--dark-divider-color);
}

.service-item-title{
	width: calc(80% - 15px);
	max-width: 70%;
}

.service-item-title h2{
	font-size: 20px;
	line-height: 1.4em;
	transition: all 0.4s ease-in-out;
}

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

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

.service-item-no{
	width: calc(20% - 15px);
	text-align: right;
}

.service-item-no h3{
	font-size: 20px;
	transition: all 0.4s ease-in-out;
}

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

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

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

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

.service-item .icon-box{
    position: relative;
    height: 50px;
    width: 50px;
    background: var(--accent-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
	overflow: hidden;
}

.service-item .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--white-color);
	border-radius: 10px;
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.service-item:hover .icon-box::before,
.service-item.active .icon-box::before{
	transform: rotate(0) scale(1);
}

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

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

.section-footer-text{
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	margin-top: 30px;
	text-align: center;
}

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

.section-footer-text p span{
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	background: var(--accent-color);
	color: var(--white-color);
	line-height: 1em;
	padding: 4px 10px;
	border-radius: 20px;
	margin-right: 10px;
}

.section-footer-text p a{
	display: inline-block;
	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(--primary-color);
}

.section-footer-text ul{
	width: 100%;
	padding: 0;
	margin: 20px 0 0;
	list-style: none;
}

.section-footer-text ul li{
	display: inline-block;
	font-family: var(--accent-font);
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
	color: var(--primary-color);
	margin-right: 10px;
}

.section-footer-text ul li:last-child{
	margin: 0;
}

.section-footer-text ul li i{
	color: var(--accent-color);
}

.section-footer-text.section-footer-contact{
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 20px;
}

.section-footer-text.section-footer-contact span{
	width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    justify-content: center;
	align-items: center;
    margin-right: 10px;
}

.section-footer-text.section-footer-contact span img{
	width: 100%;
	max-width: 16px;
}

.section-footer-text.section-satisfy-img{
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.section-footer-text.section-satisfy-img .satisfy-client-image figure img{
	max-width: 30px;
}

.section-footer-text.section-satisfy-img .satisfy-client-image.add-more{
	width: 30px;
	height: 30px;
    margin-left: -10px;
}

.section-footer-text.section-satisfy-img .satisfy-client-image.add-more img{
	width: 100%;
	max-width: 14px;
}

.section-footer-text.section-satisfy-img ul{
	margin: 5px 0 0;
}

.dark-section .section-footer-text p,
.dark-section .section-footer-text ul li{
	color: var(--white-color);
}

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

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

/************************************/
/*** 	  07. What We Do css      ***/
/************************************/

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

.what-we-content{
	height: 100%;
	align-content: center;
}

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

.what-we-item{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: calc(50% - 15px);
	gap: 15px;
	background-color: var(--white-color);
	border-radius: 10px;
	padding: 20px;
	overflow: hidden;
}

.what-we-item .icon-box{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	background-color: var(--accent-color);
	border-radius: 10px;
	overflow: hidden;
}

.what-we-item .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--primary-color);
	border-radius: 10px;
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.what-we-item:hover .icon-box::before{
	transform: rotate(0) scale(1);
}

.what-we-item .icon-box img{
	position: relative;
	width: 100%;
	max-width: 30px;
	z-index: 1;
}

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

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

.what-we-footer{
	display: flex;
	flex-wrap: wrap;
	gap: 30px 40px;
	border-top: 1px solid var(--divider-color);
	margin-top: 60px;
	padding-top: 40px;
}

.what-we-image-box{
	position: relative;
	height: 100%;
	margin-left: 20px;
}

.what-we-image{
	position: relative;
	height: 100%;
	padding: 20px 20px 0 0;
}

.what-we-image::before{
	content: "";
	position: absolute;
	width: calc(100% - 40px);
	height: calc(100% - 40px);
	left: 40px;
	bottom: 40px;
	border: 2px solid var(--divider-color);
	border-radius: 20px;
}

.what-we-image figure{
	position: relative;
	display: block;
	height: 100%;
}

.what-we-image figure::before{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(180deg, transparent 60.74%, rgba(1, 5, 53, 0.80) 100%);
	border-radius: 20px;
	z-index: 1;
}

.what-we-image img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 0.932;
	object-fit: cover;
	border-radius: 20px;
}

.what-we-image-box-content{
	position: absolute;
	left: 30px;
	bottom: 30px;
	right: 30px;
	z-index: 2;
}

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

.what-we-image-box-content h3 span{
	background-color: var(--accent-color);
	border-radius: 100px;
	padding: 2px 10px;
	margin: 0 5px;
}

/************************************/
/*** 	08. Why Choose Us css     ***/
/************************************/
/* 4 cards in one row */
.how-works-item-list-gold{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:30px;
}


/* logo size increase */
.how-works-item-no-gold img{
    width:100px;
    height:100px;
    object-fit:contain;
}


/* responsive */
@media(max-width:1200px){

    .how-works-item-list-gold{
        grid-template-columns:repeat(2, 1fr);
    }

}


@media(max-width:576px){

    .how-works-item-list-gold{
        grid-template-columns:1fr;
    }

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

.why-choose-info-box{
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin-right: 20px;
}

.why-choose-image-box{
	position: relative;
	height: 100%;
}

.why-choose-image{
	height: 100%;
}

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

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

.why-choose-info-box .watch-video-circle{
	position: absolute;
	top: 30px;
	right: 30px;
}

.why-choose-info-box .watch-video-circle a{
	display: inline-block;
	border-radius: 50%;
	cursor: none;
	overflow: hidden;
}

.why-choose-info-box .watch-video-circle img{
	width: 100%;
	max-width: 140px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	animation: infiniterotate 20s infinite linear;
}

.why-choose-info-box .watch-video-circle a:hover img{
	animation-play-state: paused;
}

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

.why-choose-info-list ul{
	display: flex;
	flex-wrap: wrap;
	gap: 25px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.why-choose-info-list ul li{
	line-height: 1.25em;
	color: var(--white-color);
	background-color: var(--dark-divider-color);
	backdrop-filter: blur(15px);
	border-radius: 100px;
	padding: 10px 25px;
	transition: all 0.4s ease-in-out;
}

.why-choose-info-list ul li:hover{
	background-color: var(--accent-color);
}

.why-choose-content{
	height: 100%;
	align-content: center;
}

.why-choose-item{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 30px;
	background-color: var(--dark-divider-color);
	backdrop-filter: blur(15px);
	border-radius: 20px;
	padding: 20px 40px 20px 20px;
	margin-bottom: 30px;
}

.why-choose-item-header{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: calc(40% - 15px);
	gap: 15px;
}

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

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

.why-choose-item .icon-box{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	background-color: var(--accent-color);
	border-radius: 10px;
}

.why-choose-item .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--white-color);
	border-radius: 10px;
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.why-choose-item:hover .icon-box::before{
	transform: rotate(0) scale(1);
}

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

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

.why-choose-item-title h2{
	font-size: 48px;
	color: var(--white-color);
}

.why-choose-item-content{
	max-width: calc(60% - 15px);
}

.why-choose-item-content p{
	color: var(--white-color);
	margin-bottom: 0;
}/* Card Layout */
.intrinsic-protect-section .why-choose-item{
    display:flex !important;
    align-items:center !important;
    gap:25px !important;
    padding:16px 22px !important;
    border-radius:16px !important;
    min-height:90px !important;
}

.intrinsic-protect-section .why-choose-item-header{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    flex:0 0 240px !important;   /* Fixed width for icon + heading */
}

.intrinsic-protect-section .icon-box{
    width:46px !important;
    height:46px !important;
    flex-shrink:0;
}

.intrinsic-protect-section .icon-box img{
    width:18px !important;
}

.intrinsic-protect-section .why-choose-item-title h2{
    margin:0 !important;
    font-size:22px !important;
    white-space:nowrap !important;
}

.intrinsic-protect-section .why-choose-item-content{
    flex:1 !important;
}

.intrinsic-protect-section .why-choose-item-content p{
    margin:0 !important;
    font-size:14px !important;
    line-height:1.5 !important;
}/* ===== Intrinsic Protect Image Size ===== */

.intrinsic-protect-section .why-choose-image-box{
    height: 720px !important;   /* Increase height */
}

.intrinsic-protect-section .why-choose-image,
.intrinsic-protect-section .why-choose-image figure{
    width: 100%;
    height: 100%;
    margin: 0;
}

.intrinsic-protect-section .why-choose-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}/* =========================================================
   INTRINSIC SECURITY
   CYBER IDENTITY SECTION
   FULL RESPONSIVE VERSION
========================================================= */
/* =========================================================
   CYBER IDENTITY — TIGHT / CENTERED REDESIGN
========================================================= */

.cyber-identity-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    width: 100%;
    padding: 85px 0;

    background:
        radial-gradient(
            circle at 72% 45%,
            rgba(54, 98, 204, 0.20),
            transparent 34%
        ),
        radial-gradient(
            circle at 8% 85%,
            rgba(54, 98, 204, 0.10),
            transparent 30%
        ),
        #010535;

    color: #fff;
}


/* =========================================================
   BACKGROUND
========================================================= */

.cyber-identity-grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 48px 48px;

    opacity: .7;

    mask-image:
        radial-gradient(
            ellipse at center,
            #000 15%,
            transparent 88%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            #000 15%,
            transparent 88%
        );

    pointer-events: none;
}


.cyber-identity-noise {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    opacity: .035;
    pointer-events: none;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='.65'/%3E%3C/svg%3E");

    mix-blend-mode: screen;
}


.cyber-identity-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(100px);
    z-index: -1;
}

.cyber-identity-glow-one {
    width: 480px;
    height: 480px;

    top: -180px;
    right: -180px;

    background: rgba(54,98,204,.20);

    animation: cyberGlowFloat 12s ease-in-out infinite;
}

.cyber-identity-glow-two {
    width: 400px;
    height: 400px;

    bottom: -200px;
    left: -170px;

    background: rgba(54,98,204,.12);

    animation: cyberGlowFloat 15s ease-in-out infinite reverse;
}

.cyber-identity-glow-three {
    width: 200px;
    height: 200px;

    top: 45%;
    right: 30%;

    background: rgba(74,133,255,.12);

    filter: blur(70px);

    animation: cyberGlowPulse 5s ease-in-out infinite;
}


/* =========================================================
   DECORATIVE BACKGROUND LINES
========================================================= */

.cyber-bg-line {
    position: absolute;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(75,125,255,.30),
            transparent
        );

    pointer-events: none;
}

.cyber-bg-line-one {
    width: 600px;
    top: 18%;
    right: -180px;
    transform: rotate(-18deg);
}

.cyber-bg-line-two {
    width: 550px;
    left: -180px;
    bottom: 15%;
    transform: rotate(18deg);
}


/* =========================================================
   CONTAINER
========================================================= */

.cyber-identity-section .container {
    position: relative;
    z-index: 5;
}


/* =========================================================
   LEFT CONTENT — SMALLER / TIGHTER
========================================================= */

.cyber-identity-content {
    position: relative;

    width: 100%;
    max-width: 590px;

    z-index: 5;
}


/* =========================================================
   EYEBROW
========================================================= */

.cyber-identity-eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 18px;

    color: #8eafff;

    font-family: var(--default-font);

    font-size: 11px;
    line-height: 1.3;

    font-weight: 800;

    letter-spacing: 1.7px;
}

.cyber-identity-status {
    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    background: #42e6a4;

    border-radius: 50%;

    box-shadow:
        0 0 0 4px rgba(66,230,164,.10),
        0 0 15px rgba(66,230,164,.75);

    animation: cyberStatusPulse 2s infinite;
}

.cyber-identity-eyebrow-line {
    width: 38px;
    height: 1px;

    background: rgba(142,177,255,.40);
}


/* =========================================================
   HEADING — SMALLER
========================================================= */

.cyber-identity-heading {
    margin: 0;

    color: #fff;

    font-family:
        var(--accent-font),
        var(--default-font);

    font-size:
        clamp(40px, 4vw, 58px);

    line-height: 1.02;

    font-weight: 700;

    letter-spacing: -2.4px;
}

.cyber-identity-heading > span {
    position: relative;

    display: block;

    width: fit-content;
    max-width: 100%;

    margin-top: 2px;

    color: #6490ff;

    text-shadow:
        0 0 30px rgba(54,98,204,.25);
}

.cyber-identity-heading > span::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -6px;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #3662CC,
            #82a8ff
        );

    box-shadow:
        0 0 12px rgba(54,98,204,.55);

    transform-origin: left;

    animation:
        cyberHeadingLine 1.2s ease forwards;
}

.cyber-identity-heading strong {
    display: block;

    max-width: 520px;

    margin-top: 20px;

    color: rgba(255,255,255,.70);

    font-family: var(--default-font);

    font-size:
        clamp(17px, 1.6vw, 20px);

    line-height: 1.5;

    font-weight: 400;

    letter-spacing: -.1px;
}


/* =========================================================
   ACCENT LINE
========================================================= */

.cyber-identity-heading-line {
    position: relative;

    width: 105px;
    height: 2px;

    margin: 22px 0;

    overflow: hidden;

    background:
        rgba(255,255,255,.08);
}

.cyber-identity-heading-line span {
    position: absolute;

    top: 0;
    left: -35px;

    width: 35px;
    height: 100%;

    background: #3662CC;

    box-shadow:
        0 0 13px rgba(54,98,204,.9);

    animation:
        cyberScanLine 2.5s linear infinite;
}


/* =========================================================
   DESCRIPTION — SMALLER
========================================================= */

.cyber-identity-description {
    width: 100%;
}

.cyber-identity-description p {
    max-width: 550px;

    margin: 0 0 13px;

    color:
        rgba(255,255,255,.63);

    font-family: var(--default-font);

    font-size: 14px;

    line-height: 1.72;

    font-weight: 400;
}

.cyber-identity-description strong {
    color: #fff;
    font-weight: 700;
}


/* =========================================================
   METRICS
========================================================= */

.cyber-identity-metrics {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    width: 100%;

    margin-top: 25px;
    margin-bottom: 22px;

    padding: 17px 0;

    border-top:
        1px solid rgba(255,255,255,.09);

    border-bottom:
        1px solid rgba(255,255,255,.09);
}

.cyber-identity-metric {
    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 0;

    padding: 0 18px;

    border-right:
        1px solid rgba(255,255,255,.09);
}

.cyber-identity-metric:first-child {
    padding-left: 0;
}

.cyber-identity-metric:last-child {
    padding-right: 0;
    border-right: 0;
}

.cyber-identity-metric strong {
    color: #6e9aff;

    font-family: var(--default-font);

    font-size:
        clamp(21px, 2vw, 27px);

    line-height: 1;

    font-weight: 800;

    white-space: nowrap;

    text-shadow:
        0 0 18px rgba(54,98,204,.4);
}

.cyber-identity-metric span {
    color:
        rgba(255,255,255,.52);

    font-family: var(--default-font);

    font-size: 8px;

    line-height: 1.35;

    font-weight: 700;

    letter-spacing: .7px;

    text-transform: uppercase;
}


/* =========================================================
   GLOBAL
========================================================= */

.cyber-identity-global {
    display: flex;

    align-items: center;

    gap: 11px;

    width: 100%;
}

.cyber-identity-globe {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #79a1ff;

    background:
        rgba(54,98,204,.12);

    border:
        1px solid rgba(54,98,204,.25);

    border-radius: 50%;

    font-size: 16px;

    box-shadow:
        inset 0 0 18px rgba(54,98,204,.08);

    animation:
        cyberGlobePulse 4s ease-in-out infinite;
}

.cyber-identity-global span {
    display: block;

    color: #7099ff;

    font-family: var(--default-font);

    font-size: 8px;

    line-height: 1.3;

    font-weight: 800;

    letter-spacing: 1.2px;
}

.cyber-identity-global p {
    margin: 3px 0 0;

    color:
        rgba(255,255,255,.58);

    font-family: var(--default-font);

    font-size: 11px;

    line-height: 1.4;
}


/* =========================================================
   CTA
========================================================= */

.cyber-identity-cta {
    margin-top: 24px;
}

.cyber-identity-button {
    display: inline-flex;

    align-items: center;
    justify-content: space-between;

    gap: 16px;

    min-height: 48px;

    padding:
        6px 7px 6px 19px;

    color: #fff;

    background: #3662CC;

    border:
        1px solid rgba(255,255,255,.13);

    border-radius: 5px;

    font-family: var(--default-font);

    font-size: 11px;

    line-height: 1.3;

    font-weight: 700;

    text-decoration: none;

    box-shadow:
        0 10px 28px rgba(54,98,204,.25);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

.cyber-identity-button i {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #010535;

    background: #fff;

    border-radius: 4px;

    transition:
        transform .35s ease;
}

.cyber-identity-button:hover {
    color: #fff;

    background: #4774da;

    transform: translateY(-3px);

    box-shadow:
        0 16px 38px rgba(54,98,204,.38);
}

.cyber-identity-button:hover i {
    transform: translateX(4px);
}


/* =========================================================
   RIGHT VISUAL
   IMPORTANT:
   THIS IS THE CENTER ANCHOR
========================================================= */

.cyber-identity-visual {
    position: relative;

    width: 100%;
    height: 540px;

    margin: 0 auto;

    /* prevents Bootstrap/grid interference */
    display: block;

    transform: none !important;
}


/* =========================================================
   CENTRAL CORE
   EXACT CENTER OF VISUAL
========================================================= */

.cyber-identity-core {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 300px;
    height: 300px;

    margin: 0;

    transform:
        translate(-50%, -50%);

    transform-origin: center center;

    z-index: 4;

    pointer-events: none;
}


/* =========================================================
   CORE CENTER
========================================================= */

.cyber-identity-core-center {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 112px;
    height: 112px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 5px;

    transform:
        translate(-50%, -50%);

    color: #fff;

    background:
        radial-gradient(
            circle at 35% 25%,
            #628fff,
            #3662CC 55%,
            #1e3d93
        );

    border:
        3px solid rgba(255,255,255,.72);

    border-radius: 50%;

    box-shadow:
        0 0 0 8px rgba(54,98,204,.08),
        0 0 50px rgba(54,98,204,.34),
        inset 0 0 22px rgba(255,255,255,.12);

    z-index: 5;

    animation:
        cyberCoreFloat 5s ease-in-out infinite;
}

.cyber-core-icon {
    width: 47px;
    height: 47px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(255,255,255,.25);

    border-radius: 50%;

    background:
        rgba(255,255,255,.08);
}

.cyber-core-icon i {
    font-size: 23px;
}

.cyber-identity-core-center > span {
    font-size: 7px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 1.7px;
}


/* =========================================================
   RINGS
========================================================= */

.cyber-identity-core-ring {
    position: absolute;

    top: 50%;
    left: 50%;

    border:
        1px solid rgba(92,139,255,.25);

    border-radius: 50%;

    transform:
        translate(-50%, -50%);
}

.ring-small {
    width: 155px;
    height: 155px;

    border-color:
        rgba(92,139,255,.35);

    animation:
        cyberRotate 16s linear infinite;
}

.ring-medium {
    width: 225px;
    height: 225px;

    border-style: dashed;

    animation:
        cyberRotate 25s linear infinite reverse;
}

.ring-large {
    width: 300px;
    height: 300px;

    border-color:
        rgba(92,139,255,.11);

    animation:
        cyberRotate 38s linear infinite;
}


/* =========================================================
   PARTICLES
========================================================= */

.cyber-core-particles span {
    position: absolute;

    width: 4px;
    height: 4px;

    background: #6f9aff;

    border-radius: 50%;

    box-shadow:
        0 0 11px #3662CC;
}

.cyber-core-particles span:nth-child(1) {
    top: 18px;
    left: 125px;
}

.cyber-core-particles span:nth-child(2) {
    top: 92px;
    right: 3px;
}

.cyber-core-particles span:nth-child(3) {
    right: 97px;
    bottom: 22px;
}

.cyber-core-particles span:nth-child(4) {
    bottom: 70px;
    left: 3px;
}

.cyber-core-particles span:nth-child(5) {
    top: 42px;
    left: 31px;
}

.cyber-core-particles span:nth-child(6) {
    right: 35px;
    bottom: 12px;
}


/* =========================================================
   FOUR BOXES
   ALL BOXES ARE NOW TIGHT AROUND CENTER
========================================================= */

.cyber-identity-node {
    position: absolute;

    width: 215px;
    min-height: 92px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 13px;

    background:
        linear-gradient(
            135deg,
            rgba(12,22,75,.95),
            rgba(3,8,42,.92)
        );

    border:
        1px solid rgba(117,154,255,.17);

    border-radius: 10px;

    box-shadow:
        0 14px 35px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.04);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    z-index: 10;

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        border-color .4s ease,
        box-shadow .4s ease;
}

.cyber-identity-node::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 3px;
    height: 100%;

    background: #3662CC;

    border-radius:
        10px 0 0 10px;

    opacity: .75;
}

.cyber-identity-node:hover {
    transform:
        translateY(-6px) scale(1.025);

    border-color:
        rgba(95,141,255,.45);

    box-shadow:
        0 20px 45px rgba(0,0,0,.35),
        0 0 25px rgba(54,98,204,.12);
}


/* =========================================================
   BOX ICON
========================================================= */

.cyber-identity-node-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #78a1ff;

    background:
        rgba(54,98,204,.12);

    border:
        1px solid rgba(54,98,204,.22);

    border-radius: 8px;

    font-size: 15px;

    transition: .4s ease;
}

.cyber-identity-node:hover
.cyber-identity-node-icon {
    color: #fff;

    background: #3662CC;

    box-shadow:
        0 0 18px rgba(54,98,204,.35);

    transform:
        rotate(-5deg);
}


/* =========================================================
   BOX CONTENT
========================================================= */

.cyber-identity-node-content {
    min-width: 0;
}

.cyber-identity-node-content small {
    display: block;

    margin-bottom: 2px;

    color: #638cff;

    font-family: var(--default-font);

    font-size: 7px;

    line-height: 1.3;

    font-weight: 800;

    letter-spacing: .8px;
}

.cyber-identity-node-content h4 {
    margin: 0;

    color: #fff;

    font-family: var(--default-font);

    font-size: 14px;

    line-height: 1.25;

    font-weight: 700;
}

.cyber-identity-node-content p {
    margin: 3px 0 0;

    color:
        rgba(255,255,255,.48);

    font-family: var(--default-font);

    font-size: 9px;

    line-height: 1.35;
}

.cyber-identity-node-arrow {
    margin-left: auto;

    color:
        rgba(255,255,255,.25);

    font-size: 8px;

    transition: .3s ease;
}

.cyber-identity-node:hover
.cyber-identity-node-arrow {
    color: #78a1ff;

    transform:
        translate(2px,-2px);
}


/* =========================================================
   FOUR BOX POSITIONS
   TIGHT + BALANCED AROUND CENTER
========================================================= */

/* TOP LEFT */
.cyber-node-one {
    top: 48px;
    left: 12px;

    animation:
        cyberNodeFloat 6s ease-in-out infinite;
}

/* TOP RIGHT */
.cyber-node-two {
    top: 48px;
    right: 12px;

    animation:
        cyberNodeFloat 7s ease-in-out infinite reverse;
}

/* BOTTOM LEFT */
.cyber-node-three {
    bottom: 48px;
    left: 12px;

    animation:
        cyberNodeFloat 8s ease-in-out infinite;
}

/* BOTTOM RIGHT */
.cyber-node-four {
    right: 12px;
    bottom: 48px;

    animation:
        cyberNodeFloat 6.5s ease-in-out infinite reverse;
}


/* =========================================================
   CONNECTION LINES
   BOX -> CENTER
========================================================= */

.cyber-identity-connection {
    position: absolute;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(76,125,255,.75),
            rgba(115,155,255,.9),
            transparent
        );

    box-shadow:
        0 0 8px rgba(54,98,204,.45);

    opacity: .85;

    transform-origin: left center;

    z-index: 2;

    pointer-events: none;
}


/* top-left box -> center */
.connection-one {
    width: 125px;

    top: 135px;
    left: 205px;

    transform:
        rotate(27deg);
}


/* top-right box -> center */
.connection-two {
    width: 125px;

    top: 135px;
    right: 205px;

    transform:
        rotate(-27deg);

    transform-origin: right center;
}


/* bottom-left box -> center */
.connection-three {
    width: 125px;

    bottom: 135px;
    left: 205px;

    transform:
        rotate(-27deg);
}


/* bottom-right box -> center */
.connection-four {
    width: 125px;

    right: 205px;
    bottom: 135px;

    transform:
        rotate(27deg);

    transform-origin: right center;
}


/* =========================================================
   LIVE BADGE
========================================================= */

.cyber-identity-live {
    position: absolute;

    left: 50%;
    bottom: 0;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    width: max-content;

    padding: 7px 12px;

    color:
        rgba(255,255,255,.62);

    background:
        rgba(3,8,42,.75);

    border:
        1px solid rgba(117,154,255,.15);

    border-radius: 100px;

    font-family: var(--default-font);

    font-size: 7px;

    line-height: 1.3;

    font-weight: 800;

    letter-spacing: 1px;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    z-index: 12;
}

.cyber-live-dot {
    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    background: #42e6a4;

    border-radius: 50%;

    box-shadow:
        0 0 0 3px rgba(66,230,164,.10),
        0 0 10px rgba(66,230,164,.8);

    animation:
        cyberStatusPulse 2s infinite;
}


/* =========================================================
   1200 - 1399
========================================================= */

@media (max-width:1399px) {

    .cyber-identity-section {
        padding: 80px 0;
    }

    .cyber-identity-content {
        max-width: 560px;
    }

    .cyber-identity-visual {
        height: 520px;
    }

    .cyber-identity-node {
        width: 205px;
    }

    .cyber-node-one,
    .cyber-node-three {
        left: 0;
    }

    .cyber-node-two,
    .cyber-node-four {
        right: 0;
    }
}


/* =========================================================
   992 - 1199
========================================================= */

@media (max-width:1199px) {

    .cyber-identity-section {
        padding: 75px 0;
    }

    .cyber-identity-heading {
        font-size: 48px;
    }

    .cyber-identity-heading strong {
        font-size: 17px;
    }

    .cyber-identity-description p {
        font-size: 13px;
    }

    .cyber-identity-visual {
        height: 490px;
    }

    .cyber-identity-core {
        width: 270px;
        height: 270px;
    }

    .ring-large {
        width: 270px;
        height: 270px;
    }

    .ring-medium {
        width: 205px;
        height: 205px;
    }

    .ring-small {
        width: 140px;
        height: 140px;
    }

    .cyber-identity-node {
        width: 190px;
        min-height: 86px;
        padding: 11px;
    }

    .cyber-identity-node-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .cyber-identity-node-content h4 {
        font-size: 13px;
    }

    .cyber-identity-node-content p {
        font-size: 8px;
    }

    .connection-one {
        left: 180px;
        width: 110px;
    }

    .connection-two {
        right: 180px;
        width: 110px;
    }

    .connection-three {
        left: 180px;
        width: 110px;
    }

    .connection-four {
        right: 180px;
        width: 110px;
    }
}


/* =========================================================
   TABLET
   KEEP CENTERED
========================================================= */

@media (max-width:991px) {

    .cyber-identity-section {
        padding: 70px 0;
    }

    .cyber-identity-section .row {
        align-items: flex-start !important;
    }

    .cyber-identity-content {
        max-width: 700px;
        margin: 0 auto;
    }

    .cyber-identity-heading {
        font-size:
            clamp(42px, 6vw, 54px);
    }

    .cyber-identity-heading strong {
        font-size: 18px;
    }

    .cyber-identity-description p {
        max-width: 680px;
        font-size: 14px;
    }

    /*
       IMPORTANT:
       Visual remains a relative canvas.
       Circle stays EXACTLY in center.
    */

    .cyber-identity-visual {
        position: relative;

        display: block;

        width: 100%;
        max-width: 680px;

        height: 520px;

        margin:
            45px auto 0;

        transform: none !important;
    }

    .cyber-identity-core {
        position: absolute;

        top: 50%;
        left: 50%;

        width: 280px;
        height: 280px;

        opacity: .22;

        transform:
            translate(-50%, -50%);
    }

    .ring-large {
        width: 280px;
        height: 280px;
    }

    .ring-medium {
        width: 210px;
        height: 210px;
    }

    .ring-small {
        width: 145px;
        height: 145px;
    }

    /*
       Four cards stay around center
    */

    .cyber-identity-node {
        position: absolute;

        width: 210px;

        min-height: 95px;

        padding: 13px;

        margin: 0;

        animation: none;
    }

    .cyber-node-one {
        top: 25px !important;
        left: 10px !important;
        right: auto !important;
        bottom: auto !important;
    }

    .cyber-node-two {
        top: 25px !important;
        right: 10px !important;
        left: auto !important;
        bottom: auto !important;
    }

    .cyber-node-three {
        bottom: 45px !important;
        left: 10px !important;
        right: auto !important;
        top: auto !important;
    }

    .cyber-node-four {
        bottom: 45px !important;
        right: 10px !important;
        left: auto !important;
        top: auto !important;
    }

    .cyber-identity-connection {
        display: block;
    }

    .connection-one {
        top: 112px;
        left: 190px;
        width: 105px;
    }

    .connection-two {
        top: 112px;
        right: 190px;
        width: 105px;
    }

    .connection-three {
        bottom: 112px;
        left: 190px;
        width: 105px;
    }

    .connection-four {
        bottom: 112px;
        right: 190px;
        width: 105px;
    }

    .cyber-identity-live {
        bottom: 0;
    }
}


/* =========================================================
   LARGE MOBILE
========================================================= */

@media (max-width:767px) {

    .cyber-identity-section {
        padding: 60px 0;
    }

    .cyber-identity-heading {
        font-size:
            clamp(38px, 9vw, 48px);

        letter-spacing: -1.8px;
    }

    .cyber-identity-heading strong {
        font-size: 16px;
    }

    .cyber-identity-description p {
        font-size: 13.5px;
        line-height: 1.75;
    }

    .cyber-identity-metrics {
        margin-top: 22px;
        padding: 17px 0;
    }

    .cyber-identity-metric {
        padding: 0 11px;
        gap: 7px;
    }

    .cyber-identity-metric strong {
        font-size: 21px;
    }

    .cyber-identity-metric span {
        font-size: 7px;
    }

    /*
       Mobile visual still has center.
       Cards become smaller and move closer.
    */

    .cyber-identity-visual {
        height: 470px;

        max-width: 570px;

        margin-top: 38px;
    }

    .cyber-identity-core {
        width: 235px;
        height: 235px;

        opacity: .25;
    }

    .ring-large {
        width: 235px;
        height: 235px;
    }

    .ring-medium {
        width: 180px;
        height: 180px;
    }

    .ring-small {
        width: 125px;
        height: 125px;
    }

    .cyber-identity-core-center {
        width: 92px;
        height: 92px;
    }

    .cyber-core-icon {
        width: 39px;
        height: 39px;
    }

    .cyber-core-icon i {
        font-size: 19px;
    }

    .cyber-identity-node {
        width: 175px;
        min-height: 82px;
        padding: 10px;
        gap: 8px;
    }

    .cyber-identity-node-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        font-size: 13px;
    }

    .cyber-identity-node-content h4 {
        font-size: 12px;
    }

    .cyber-identity-node-content p {
        font-size: 7.5px;
    }

    .cyber-identity-node-content small {
        font-size: 6px;
    }

    .cyber-node-one {
        top: 35px !important;
        left: 0 !important;
    }

    .cyber-node-two {
        top: 35px !important;
        right: 0 !important;
    }

    .cyber-node-three {
        bottom: 42px !important;
        left: 0 !important;
    }

    .cyber-node-four {
        bottom: 42px !important;
        right: 0 !important;
    }

    .connection-one {
        top: 105px;
        left: 165px;
        width: 82px;
    }

    .connection-two {
        top: 105px;
        right: 165px;
        width: 82px;
    }

    .connection-three {
        bottom: 105px;
        left: 165px;
        width: 82px;
    }

    .connection-four {
        bottom: 105px;
        right: 165px;
        width: 82px;
    }
}


/* =========================================================
   MOBILE 575
========================================================= */

@media (max-width:575px) {

    .cyber-identity-section {
        padding: 55px 0;
    }

    .cyber-identity-section .container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .cyber-identity-heading {
        font-size: 37px;
    }

    .cyber-identity-heading strong {
        font-size: 15px;
        line-height: 1.55;
    }

    .cyber-identity-description p {
        font-size: 13px;
    }

    .cyber-identity-button {
        min-height: 48px;
        font-size: 11px;
    }

    /*
       Center canvas
    */

    .cyber-identity-visual {
        height: 430px;
    }

    .cyber-identity-core {
        width: 205px;
        height: 205px;
        opacity: .22;
    }

    .ring-large {
        width: 205px;
        height: 205px;
    }

    .ring-medium {
        width: 155px;
        height: 155px;
    }

    .ring-small {
        width: 110px;
        height: 110px;
    }

    .cyber-identity-core-center {
        width: 82px;
        height: 82px;
    }

    .cyber-core-icon {
        width: 35px;
        height: 35px;
    }

    .cyber-core-icon i {
        font-size: 17px;
    }

    .cyber-identity-node {
        width: 160px;
        min-height: 75px;
        padding: 9px;
    }

    .cyber-identity-node-icon {
        width: 33px;
        height: 33px;
        flex-basis: 33px;
    }

    .cyber-identity-node-content h4 {
        font-size: 11px;
    }

    .cyber-identity-node-content p {
        font-size: 7px;
    }

    .cyber-node-one {
        top: 30px !important;
        left: 0 !important;
    }

    .cyber-node-two {
        top: 30px !important;
        right: 0 !important;
    }

    .cyber-node-three {
        bottom: 40px !important;
        left: 0 !important;
    }

    .cyber-node-four {
        bottom: 40px !important;
        right: 0 !important;
    }

    .connection-one {
        top: 95px;
        left: 145px;
        width: 68px;
    }

    .connection-two {
        top: 95px;
        right: 145px;
        width: 68px;
    }

    .connection-three {
        bottom: 95px;
        left: 145px;
        width: 68px;
    }

    .connection-four {
        bottom: 95px;
        right: 145px;
        width: 68px;
    }

    .cyber-identity-live {
        font-size: 6.5px;
        padding: 7px 10px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:480px) {

    .cyber-identity-section {
        padding: 50px 0;
    }

    .cyber-identity-heading {
        font-size: 34px;
    }

    .cyber-identity-heading strong {
        font-size: 14px;
    }

    .cyber-identity-description p {
        font-size: 12.5px;
    }

    .cyber-identity-visual {
        height: 405px;
    }

    .cyber-identity-core {
        width: 185px;
        height: 185px;
    }

    .ring-large {
        width: 185px;
        height: 185px;
    }

    .ring-medium {
        width: 140px;
        height: 140px;
    }

    .ring-small {
        width: 98px;
        height: 98px;
    }

    .cyber-identity-core-center {
        width: 74px;
        height: 74px;
    }

    .cyber-core-icon {
        width: 31px;
        height: 31px;
    }

    .cyber-core-icon i {
        font-size: 15px;
    }

    .cyber-identity-node {
        width: 145px;
        min-height: 70px;
        padding: 8px;
        gap: 7px;
    }

    .cyber-identity-node-icon {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
        font-size: 11px;
    }

    .cyber-identity-node-content h4 {
        font-size: 10px;
    }

    .cyber-identity-node-content p {
        font-size: 6.5px;
    }

    .cyber-identity-node-content small {
        font-size: 5.5px;
    }

    .cyber-node-one {
        top: 27px !important;
    }

    .cyber-node-two {
        top: 27px !important;
    }

    .cyber-node-three {
        bottom: 38px !important;
    }

    .cyber-node-four {
        bottom: 38px !important;
    }

    .connection-one {
        top: 87px;
        left: 130px;
        width: 60px;
    }

    .connection-two {
        top: 87px;
        right: 130px;
        width: 60px;
    }

    .connection-three {
        bottom: 87px;
        left: 130px;
        width: 60px;
    }

    .connection-four {
        bottom: 87px;
        right: 130px;
        width: 60px;
    }

    .cyber-identity-metric strong {
        font-size: 19px;
    }

    .cyber-identity-metric span {
        font-size: 6px;
    }
}


/* =========================================================
   VERY SMALL
========================================================= */

@media (max-width:375px) {

    .cyber-identity-section {
        padding: 45px 0;
    }

    .cyber-identity-section .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .cyber-identity-heading {
        font-size: 31px;
    }

    .cyber-identity-heading strong {
        font-size: 13px;
    }

    .cyber-identity-description p {
        font-size: 12px;
    }

    .cyber-identity-visual {
        height: 385px;
    }

    .cyber-identity-core {
        width: 170px;
        height: 170px;
    }

    .ring-large {
        width: 170px;
        height: 170px;
    }

    .ring-medium {
        width: 128px;
        height: 128px;
    }

    .ring-small {
        width: 90px;
        height: 90px;
    }

    .cyber-identity-core-center {
        width: 68px;
        height: 68px;
    }

    .cyber-core-icon {
        width: 28px;
        height: 28px;
    }

    .cyber-core-icon i {
        font-size: 14px;
    }

    .cyber-identity-node {
        width: 132px;
        min-height: 66px;
        padding: 7px;
    }

    .cyber-identity-node-icon {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    .cyber-identity-node-content h4 {
        font-size: 9px;
    }

    .cyber-identity-node-content p {
        font-size: 6px;
    }

    .cyber-identity-node-content small {
        font-size: 5px;
    }

    .connection-one {
        top: 80px;
        left: 117px;
        width: 52px;
    }

    .connection-two {
        top: 80px;
        right: 117px;
        width: 52px;
    }

    .connection-three {
        bottom: 80px;
        left: 117px;
        width: 52px;
    }

    .connection-four {
        bottom: 80px;
        right: 117px;
        width: 52px;
    }
}


/* =========================================================
   LANDSCAPE MOBILE
========================================================= */

@media (max-height:500px) and (orientation:landscape) {

    .cyber-identity-section {
        padding: 55px 0;
    }

    .cyber-identity-visual {
        height: 440px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce) {

    .cyber-identity-section *,
    .cyber-identity-section *::before,
    .cyber-identity-section *::after {

        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}/* =========================================================
   CYBER IDENTITY — FINAL TIGHT / CENTERED VERSION
   Paste AFTER your existing CSS
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.cyber-identity-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    width: 100%;
    padding: 78px 0;

    background:
        radial-gradient(
            circle at 72% 45%,
            rgba(54, 98, 204, 0.20),
            transparent 32%
        ),
        radial-gradient(
            circle at 12% 80%,
            rgba(54, 98, 204, 0.11),
            transparent 28%
        ),
        #010535;

    color: #fff;
}


/* =========================================================
   CONTAINER
========================================================= */

.cyber-identity-section .container {
    position: relative;
    z-index: 5;
}

.cyber-identity-section .row {
    align-items: center !important;
}


/* =========================================================
   LEFT SIDE — SMALLER / TIGHTER
========================================================= */

.cyber-identity-content {
    width: 100%;
    max-width: 590px;

    position: relative;
    z-index: 5;
}

.cyber-identity-eyebrow {
    margin-bottom: 17px;

    font-size: 11px;
    letter-spacing: 1.6px;
}

.cyber-identity-heading {
    font-size: clamp(42px, 4.2vw, 61px);
    line-height: 1.01;

    letter-spacing: -2.4px;
}

.cyber-identity-heading > span {
    margin-top: 3px;
}

.cyber-identity-heading > span::after {
    bottom: -6px;
    height: 2px;
}

.cyber-identity-heading strong {
    max-width: 520px;

    margin-top: 20px;

    font-size: clamp(17px, 1.55vw, 20px);
    line-height: 1.48;
}

.cyber-identity-heading-line {
    width: 105px;
    height: 2px;

    margin: 22px 0;
}

.cyber-identity-description p {
    max-width: 570px;

    margin-bottom: 13px;

    font-size: 14px;
    line-height: 1.7;
}

.cyber-identity-metrics {
    margin-top: 25px;
    margin-bottom: 22px;

    padding: 17px 0;
}

.cyber-identity-metric {
    gap: 10px;
    padding: 0 18px;
}

.cyber-identity-metric strong {
    font-size: clamp(21px, 2vw, 27px);
}

.cyber-identity-metric span {
    font-size: 8px;
}

.cyber-identity-global {
    gap: 11px;
}

.cyber-identity-globe {
    width: 42px;
    height: 42px;
    flex-basis: 42px;

    font-size: 16px;
}

.cyber-identity-global span {
    font-size: 8px;
}

.cyber-identity-global p {
    margin-top: 3px;
    font-size: 11px;
}

.cyber-identity-cta {
    margin-top: 23px;
}

.cyber-identity-button {
    min-height: 49px;

    padding: 6px 7px 6px 19px;

    gap: 16px;

    font-size: 12px;
}

.cyber-identity-button i {
    width: 35px;
    height: 35px;
    flex-basis: 35px;
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.cyber-identity-visual {
    position: relative;

    width: 100%;
    height: 535px;
    min-height: 535px;

    margin-left: auto;

    transform: none !important;
}


/* =========================================================
   IMPORTANT:
   CIRCLE HAS ITS OWN TRUE CENTER
========================================================= */

.cyber-identity-core {
    position: absolute !important;

    top: 50% !important;
    left: 50% !important;

    width: 315px;
    height: 315px;

    margin: 0 !important;

    transform: translate(-50%, -50%) !important;

    z-index: 3;

    opacity: 1;

    pointer-events: none;
}


/* =========================================================
   CENTER CORE
========================================================= */

.cyber-identity-core-center {
    width: 112px;
    height: 112px;

    border-width: 3px;

    box-shadow:
        0 0 0 8px rgba(54, 98, 204, 0.08),
        0 0 50px rgba(54, 98, 204, 0.34),
        inset 0 0 25px rgba(255, 255, 255, 0.12);
}

.cyber-core-icon {
    width: 47px;
    height: 47px;
}

.cyber-core-icon i {
    font-size: 23px;
}

.cyber-identity-core-center > span {
    font-size: 7px;
}


/* =========================================================
   RINGS
========================================================= */

.ring-small {
    width: 165px;
    height: 165px;
}

.ring-medium {
    width: 235px;
    height: 235px;
}

.ring-large {
    width: 315px;
    height: 315px;
}


/* =========================================================
   PARTICLES
========================================================= */

.cyber-core-particles span {
    width: 4px;
    height: 4px;
}


/* =========================================================
   SERVICE BOXES
   ALL FOUR ARE POSITIONED RELATIVE TO VISUAL AREA
========================================================= */

.cyber-identity-node {
    position: absolute !important;

    width: 235px;
    min-height: 82px;

    padding: 13px;

    gap: 11px;

    border-radius: 10px;

    z-index: 10;

    animation-duration: 7s;
}


/* =========================================================
   BOX 01 — TOP LEFT
========================================================= */

.cyber-node-one {
    top: 67px !important;
    left: 4px !important;
}


/* =========================================================
   BOX 02 — TOP RIGHT
========================================================= */

.cyber-node-two {
    top: 67px !important;
    right: 4px !important;
}


/* =========================================================
   BOX 03 — BOTTOM LEFT
========================================================= */

.cyber-node-three {
    bottom: 67px !important;
    left: 4px !important;
}


/* =========================================================
   BOX 04 — BOTTOM RIGHT
========================================================= */

.cyber-node-four {
    bottom: 67px !important;
    right: 4px !important;
}


/* =========================================================
   NODE CONTENT
========================================================= */

.cyber-identity-node-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;

    font-size: 16px;
}

.cyber-identity-node-content small {
    margin-bottom: 2px;

    font-size: 7px;
}

.cyber-identity-node-content h4 {
    font-size: 14px;
    line-height: 1.25;
}

.cyber-identity-node-content p {
    margin-top: 3px;

    font-size: 9px;
    line-height: 1.35;
}

.cyber-identity-node-arrow {
    font-size: 9px;
}


/* =========================================================
   CONNECTION LINES
   BOXES -> CIRCLE
========================================================= */

.cyber-identity-connection {
    position: absolute;

    display: block;

    height: 1px;

    transform-origin: left center;

    z-index: 2;

    opacity: .75;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(76, 125, 255, .8),
            rgba(115, 155, 255, .25)
        );

    box-shadow:
        0 0 8px rgba(54, 98, 204, .4);

    pointer-events: none;
}


/* TOP LEFT -> CENTER */

.connection-one {
    width: 115px;

    top: 156px;
    left: 213px;

    transform: rotate(28deg);
}


/* TOP RIGHT -> CENTER */

.connection-two {
    width: 115px;

    top: 156px;
    right: 213px;

    transform:
        rotate(152deg);
}


/* BOTTOM LEFT -> CENTER */

.connection-three {
    width: 115px;

    bottom: 156px;
    left: 213px;

    transform:
        rotate(-28deg);
}


/* BOTTOM RIGHT -> CENTER */

.connection-four {
    width: 115px;

    right: 213px;
    bottom: 156px;

    transform:
        rotate(-152deg);
}


/* =========================================================
   CONNECTION GLOW DOT
========================================================= */

.cyber-identity-connection::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #75a0ff;

    box-shadow:
        0 0 10px #3662CC,
        0 0 18px rgba(54, 98, 204, .8);

    transform: translate(-50%, -50%);

    animation:
        cyberConnectionPulse 2.2s ease-in-out infinite;
}


/* =========================================================
   LIVE BADGE
========================================================= */

.cyber-identity-live {
    left: 50% !important;
    bottom: 8px !important;

    transform: translateX(-50%) !important;

    font-size: 8px;

    padding: 8px 13px;
}


/* =========================================================
   BACKGROUND GLOW
========================================================= */

.cyber-identity-glow-one {
    width: 450px;
    height: 450px;
}

.cyber-identity-glow-two {
    width: 380px;
    height: 380px;
}

.cyber-identity-glow-three {
    width: 180px;
    height: 180px;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes cyberConnectionPulse {

    0%,
    100% {
        opacity: .25;
        transform: translate(-50%, -50%) scale(.7);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.25);
    }
}

@keyframes cyberCoreFloat {

    0%,
    100% {
        margin-top: 0;
    }

    50% {
        margin-top: -7px;
    }
}


/* =========================================================
   1200px — 1399px
========================================================= */

@media (max-width: 1399px) {

    .cyber-identity-section {
        padding: 72px 0;
    }

    .cyber-identity-content {
        max-width: 560px;
    }

    .cyber-identity-visual {
        height: 510px;
        min-height: 510px;
    }

    .cyber-identity-core {
        width: 300px;
        height: 300px;
    }

    .ring-large {
        width: 300px;
        height: 300px;
    }

    .ring-medium {
        width: 225px;
        height: 225px;
    }

    .ring-small {
        width: 155px;
        height: 155px;
    }

    .cyber-identity-node {
        width: 220px;
    }

    .cyber-node-one {
        left: 0 !important;
        top: 62px !important;
    }

    .cyber-node-two {
        right: 0 !important;
        top: 62px !important;
    }

    .cyber-node-three {
        left: 0 !important;
        bottom: 62px !important;
    }

    .cyber-node-four {
        right: 0 !important;
        bottom: 62px !important;
    }

    .connection-one {
        left: 198px;
        top: 150px;
    }

    .connection-two {
        right: 198px;
        top: 150px;
    }

    .connection-three {
        left: 198px;
        bottom: 150px;
    }

    .connection-four {
        right: 198px;
        bottom: 150px;
    }
}


/* =========================================================
   992px — 1199px
========================================================= */

@media (max-width: 1199px) {

    .cyber-identity-section {
        padding: 68px 0;
    }

    .cyber-identity-heading {
        font-size: 51px;
    }

    .cyber-identity-heading strong {
        font-size: 18px;
    }

    .cyber-identity-description p {
        font-size: 13.5px;
    }

    .cyber-identity-visual {
        height: 470px;
        min-height: 470px;
    }

    .cyber-identity-core {
        width: 270px;
        height: 270px;
    }

    .ring-large {
        width: 270px;
        height: 270px;
    }

    .ring-medium {
        width: 205px;
        height: 205px;
    }

    .ring-small {
        width: 145px;
        height: 145px;
    }

    .cyber-identity-core-center {
        width: 100px;
        height: 100px;
    }

    .cyber-identity-node {
        width: 200px;
        min-height: 76px;

        padding: 11px;
    }

    .cyber-identity-node-icon {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
    }

    .cyber-identity-node-content h4 {
        font-size: 13px;
    }

    .cyber-identity-node-content p {
        font-size: 8px;
    }

    .cyber-node-one {
        top: 65px !important;
    }

    .cyber-node-two {
        top: 65px !important;
    }

    .cyber-node-three {
        bottom: 65px !important;
    }

    .cyber-node-four {
        bottom: 65px !important;
    }

    .connection-one {
        width: 90px;
        left: 180px;
        top: 137px;
    }

    .connection-two {
        width: 90px;
        right: 180px;
        top: 137px;
    }

    .connection-three {
        width: 90px;
        left: 180px;
        bottom: 137px;
    }

    .connection-four {
        width: 90px;
        right: 180px;
        bottom: 137px;
    }
}


/* =========================================================
   TABLET
   768px — 991px

   KEEP CIRCLE CENTERED
   CARDS CLOSE TO IT
========================================================= */

@media (max-width: 991px) {

    .cyber-identity-section {
        padding: 70px 0;
    }

    .cyber-identity-section .row {
        align-items: flex-start !important;
    }

    .cyber-identity-content {
        max-width: 700px;
        margin: 0 auto;
    }

    .cyber-identity-heading {
        font-size: clamp(43px, 7vw, 58px);
    }

    .cyber-identity-heading strong {
        font-size: 18px;
    }

    .cyber-identity-description p {
        font-size: 14px;
    }


    /* -------------------------
       VISUAL
    ------------------------- */

    .cyber-identity-visual {
        width: 100%;
        max-width: 700px;

        height: 520px;
        min-height: 520px;

        margin: 42px auto 0;

        display: block;
    }


    /* TRUE CENTER */

    .cyber-identity-core {
        top: 50% !important;
        left: 50% !important;

        width: 255px;
        height: 255px;

        transform: translate(-50%, -50%) !important;

        opacity: .9;
    }

    .ring-large {
        width: 255px;
        height: 255px;
    }

    .ring-medium {
        width: 195px;
        height: 195px;
    }

    .ring-small {
        width: 135px;
        height: 135px;
    }


    /* -------------------------
       BOXES
    ------------------------- */

    .cyber-identity-node {
        position: absolute !important;

        width: 205px;

        min-height: 78px;

        padding: 12px;

        margin: 0;

        animation: none;
    }

    .cyber-node-one {
        top: 58px !important;
        left: 0 !important;
    }

    .cyber-node-two {
        top: 58px !important;
        right: 0 !important;
    }

    .cyber-node-three {
        bottom: 58px !important;
        left: 0 !important;
    }

    .cyber-node-four {
        bottom: 58px !important;
        right: 0 !important;
    }


    /* -------------------------
       CONNECTIONS
    ------------------------- */

    .cyber-identity-connection {
        display: block;
    }

    .connection-one {
        width: 95px;
        left: 188px;
        top: 137px;
    }

    .connection-two {
        width: 95px;
        right: 188px;
        top: 137px;
    }

    .connection-three {
        width: 95px;
        left: 188px;
        bottom: 137px;
    }

    .connection-four {
        width: 95px;
        right: 188px;
        bottom: 137px;
    }


    .cyber-identity-live {
        bottom: 4px !important;
    }
}


/* =========================================================
   576px — 767px
========================================================= */

@media (max-width: 767px) {

    .cyber-identity-section {
        padding: 62px 0;
    }

    .cyber-identity-heading {
        font-size: clamp(39px, 9vw, 51px);
        letter-spacing: -1.8px;
    }

    .cyber-identity-heading strong {
        font-size: 17px;
    }

    .cyber-identity-description p {
        font-size: 14px;
    }

    .cyber-identity-metric strong {
        font-size: 21px;
    }

    .cyber-identity-visual {
        height: 470px;
        min-height: 470px;

        margin-top: 38px;
    }


    /* CENTER CIRCLE */

    .cyber-identity-core {
        width: 220px;
        height: 220px;

        opacity: .85;
    }

    .ring-large {
        width: 220px;
        height: 220px;
    }

    .ring-medium {
        width: 170px;
        height: 170px;
    }

    .ring-small {
        width: 120px;
        height: 120px;
    }

    .cyber-identity-core-center {
        width: 88px;
        height: 88px;
    }

    .cyber-core-icon {
        width: 39px;
        height: 39px;
    }

    .cyber-core-icon i {
        font-size: 19px;
    }


    /* BOXES */

    .cyber-identity-node {
        width: 175px;
        min-height: 72px;

        padding: 10px;

        gap: 9px;
    }

    .cyber-identity-node-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;

        font-size: 14px;
    }

    .cyber-identity-node-content small {
        font-size: 6px;
    }

    .cyber-identity-node-content h4 {
        font-size: 12px;
    }

    .cyber-identity-node-content p {
        font-size: 7.5px;
    }


    .cyber-node-one {
        top: 58px !important;
        left: 0 !important;
    }

    .cyber-node-two {
        top: 58px !important;
        right: 0 !important;
    }

    .cyber-node-three {
        bottom: 58px !important;
        left: 0 !important;
    }

    .cyber-node-four {
        bottom: 58px !important;
        right: 0 !important;
    }


    /* CONNECTIONS */

    .connection-one {
        width: 75px;
        left: 157px;
        top: 125px;
    }

    .connection-two {
        width: 75px;
        right: 157px;
        top: 125px;
    }

    .connection-three {
        width: 75px;
        left: 157px;
        bottom: 125px;
    }

    .connection-four {
        width: 75px;
        right: 157px;
        bottom: 125px;
    }
}


/* =========================================================
   481px — 575px
========================================================= */

@media (max-width: 575px) {

    .cyber-identity-section {
        padding: 58px 0;
    }

    .cyber-identity-section .container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .cyber-identity-heading {
        font-size: 38px;
    }

    .cyber-identity-heading strong {
        font-size: 16px;
    }

    .cyber-identity-description p {
        font-size: 13.5px;
    }

    .cyber-identity-visual {
        height: 450px;
        min-height: 450px;
    }


    /* CIRCLE */

    .cyber-identity-core {
        width: 195px;
        height: 195px;

        opacity: .75;
    }

    .ring-large {
        width: 195px;
        height: 195px;
    }

    .ring-medium {
        width: 150px;
        height: 150px;
    }

    .ring-small {
        width: 105px;
        height: 105px;
    }

    .cyber-identity-core-center {
        width: 78px;
        height: 78px;
    }

    .cyber-core-icon {
        width: 34px;
        height: 34px;
    }

    .cyber-core-icon i {
        font-size: 17px;
    }


    /* BOXES */

    .cyber-identity-node {
        width: 160px;

        min-height: 68px;

        padding: 9px;

        border-radius: 9px;
    }

    .cyber-identity-node-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;

        font-size: 13px;
    }

    .cyber-identity-node-content h4 {
        font-size: 11px;
    }

    .cyber-identity-node-content p {
        font-size: 7px;
    }

    .cyber-identity-node-content small {
        font-size: 5.5px;
    }


    .cyber-node-one {
        top: 57px !important;
        left: 0 !important;
    }

    .cyber-node-two {
        top: 57px !important;
        right: 0 !important;
    }

    .cyber-node-three {
        bottom: 57px !important;
        left: 0 !important;
    }

    .cyber-node-four {
        bottom: 57px !important;
        right: 0 !important;
    }


    /* CONNECTIONS */

    .connection-one {
        width: 63px;
        left: 145px;
        top: 119px;
    }

    .connection-two {
        width: 63px;
        right: 145px;
        top: 119px;
    }

    .connection-three {
        width: 63px;
        left: 145px;
        bottom: 119px;
    }

    .connection-four {
        width: 63px;
        right: 145px;
        bottom: 119px;
    }


    .cyber-identity-live {
        font-size: 7px;
        padding: 7px 11px;
    }
}


/* =========================================================
   376px — 480px
========================================================= */

@media (max-width: 480px) {

    .cyber-identity-section {
        padding: 52px 0;
    }

    .cyber-identity-heading {
        font-size: 35px;
        letter-spacing: -1.4px;
    }

    .cyber-identity-heading strong {
        font-size: 15px;
    }

    .cyber-identity-description p {
        font-size: 13px;
    }

    .cyber-identity-visual {
        height: 430px;
        min-height: 430px;
    }


    /* SMALLER CENTER */

    .cyber-identity-core {
        width: 175px;
        height: 175px;
    }

    .ring-large {
        width: 175px;
        height: 175px;
    }

    .ring-medium {
        width: 135px;
        height: 135px;
    }

    .ring-small {
        width: 95px;
        height: 95px;
    }

    .cyber-identity-core-center {
        width: 70px;
        height: 70px;
    }


    /* BOXES */

    .cyber-identity-node {
        width: 145px;
        min-height: 64px;

        padding: 8px;
    }

    .cyber-identity-node-icon {
        width: 31px;
        height: 31px;
        flex-basis: 31px;

        font-size: 12px;
    }

    .cyber-identity-node-content h4 {
        font-size: 10px;
    }

    .cyber-identity-node-content p {
        font-size: 6.5px;
    }

    .cyber-identity-node-content small {
        font-size: 5px;
    }


    .cyber-node-one {
        top: 58px !important;
    }

    .cyber-node-two {
        top: 58px !important;
    }

    .cyber-node-three {
        bottom: 58px !important;
    }

    .cyber-node-four {
        bottom: 58px !important;
    }


    /* LINES */

    .connection-one {
        width: 52px;
        left: 128px;
        top: 113px;
    }

    .connection-two {
        width: 52px;
        right: 128px;
        top: 113px;
    }

    .connection-three {
        width: 52px;
        left: 128px;
        bottom: 113px;
    }

    .connection-four {
        width: 52px;
        right: 128px;
        bottom: 113px;
    }
}


/* =========================================================
   320px — 375px
========================================================= */

@media (max-width: 375px) {

    .cyber-identity-section {
        padding: 48px 0;
    }

    .cyber-identity-section .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .cyber-identity-heading {
        font-size: 32px;
    }

    .cyber-identity-heading strong {
        font-size: 14px;
    }

    .cyber-identity-description p {
        font-size: 12.5px;
    }

    .cyber-identity-visual {
        height: 405px;
        min-height: 405px;
    }


    /* CENTER */

    .cyber-identity-core {
        width: 155px;
        height: 155px;
    }

    .ring-large {
        width: 155px;
        height: 155px;
    }

    .ring-medium {
        width: 120px;
        height: 120px;
    }

    .ring-small {
        width: 85px;
        height: 85px;
    }

    .cyber-identity-core-center {
        width: 62px;
        height: 62px;
    }

    .cyber-core-icon {
        width: 29px;
        height: 29px;
    }

    .cyber-core-icon i {
        font-size: 14px;
    }


    /* BOXES */

    .cyber-identity-node {
        width: 132px;
        min-height: 60px;

        padding: 7px;

        gap: 7px;
    }

    .cyber-identity-node-icon {
        width: 28px;
        height: 28px;
        flex-basis: 28px;

        font-size: 11px;
    }

    .cyber-identity-node-content h4 {
        font-size: 9px;
    }

    .cyber-identity-node-content p {
        font-size: 6px;
    }

    .cyber-identity-node-content small {
        font-size: 4.5px;
    }


    .cyber-node-one {
        top: 57px !important;
    }

    .cyber-node-two {
        top: 57px !important;
    }

    .cyber-node-three {
        bottom: 57px !important;
    }

    .cyber-node-four {
        bottom: 57px !important;
    }


    /* LINES */

    .connection-one {
        width: 43px;
        left: 116px;
        top: 108px;
    }

    .connection-two {
        width: 43px;
        right: 116px;
        top: 108px;
    }

    .connection-three {
        width: 43px;
        left: 116px;
        bottom: 108px;
    }

    .connection-four {
        width: 43px;
        right: 116px;
        bottom: 108px;
    }

    .cyber-identity-live {
        font-size: 6px;
        padding: 6px 9px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .cyber-identity-section *,
    .cyber-identity-section *::before,
    .cyber-identity-section *::after {

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* ================================
   Global Threat Landscape Cards
================================ */

.global-threat-icon,
.threat-icon {
    color: #fff;
}

.global-threat-icon svg {
    width: 28px;
    height: 28px;
    display: block;
}

.threat-icon svg {
    width: 24px;
    height: 24px;
    display: block;
}

.global-threat-icon svg *,
.threat-icon svg * {
    stroke: #fff;
}

.global-threat-icon svg circle[fill="currentColor"],
.threat-icon svg circle[fill="currentColor"] {
    fill: #fff;
}
/* Right Side Stat Cards */

.why-choose-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    background:rgba(255,255,255,0.08);
    backdrop-filter:blur(15px);
    border-radius:20px;
    padding:25px 40px 25px 20px;
    margin-bottom:30px;
    transition:all 0.4s ease-in-out;
}


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



/* Icon + Number */

.why-choose-item-header{
    display:flex;
    align-items:center;
    gap:20px;
    max-width:40%;
}



.why-choose-item .icon-box{
    width:52px;
    height:52px;
    min-width:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#3867e8;
    border-radius:10px;
    position:relative;
    overflow:hidden;
}



.why-choose-item .icon-box:before{

    content:"";
    position:absolute;
    inset:0;
    background:#ffffff;
    transform:scale(0) rotate(180deg);
    transition:all .4s ease-in-out;
    border-radius:10px;

}


.why-choose-item:hover .icon-box:before{
    transform:scale(1) rotate(0deg);
}



.why-choose-item .icon-box img{

    width:25px;
    position:relative;
    z-index:2;
    transition:.4s;

}



.why-choose-item:hover .icon-box img{

    filter:brightness(0);

}





/* Counter Number */

.why-choose-item-title h2{

    font-size:48px;
    line-height:1;
    font-weight:700;
    color:#ffffff;
    margin:0;

}





/* Description */

.why-choose-item-content{

    max-width:55%;
}


.why-choose-item-content p{

    color:#ffffff;
    margin:0;
    line-height:1.6;
    font-size:16px;

}




/* =================================
   Bottom Threat Cards Animation Fix
================================= */

.feature-threat-box{

    height:100%;
    min-height:260px;
    background:rgba(255,255,255,0.08);
    backdrop-filter:blur(15px);
    border-radius:20px;
    padding:35px 25px;
    text-align:center;
    transition:all 0.4s ease-in-out;
    position:relative;
    overflow:hidden;

}


/* Hover Animation */

.feature-threat-box:hover{

    transform:translateY(-10px);
    background:rgba(255,255,255,0.14);

}





/* Icon */

.feature-threat-box .box-icon{

    width:60px;
    height:60px;
    margin:0 auto 25px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--accent-color);
    border-radius:12px;
    transition:all .4s ease-in-out;

}



.feature-threat-box:hover .box-icon{

    transform:rotate(10deg) scale(1.1);

}



.feature-threat-box .box-icon img{

    width:28px !important;
    height:28px !important;
    display:block !important;
    transition:all .4s ease-in-out;

}



.feature-threat-box:hover .box-icon img{

    transform:scale(1.15);

}



.feature-threat-box p{

    color:#fff;
    margin:0;
    line-height:1.7;
    transition:all .4s ease-in-out;

}



.feature-threat-box:hover p{

    color:#ffffff;

}




/* Mobile spacing + animation fix */

.threat-row > div{

    margin-bottom:30px;

}



@media(max-width:991px){

    .threat-row{

        row-gap:30px;

    }


    .feature-threat-box{

        margin-bottom:0;

    }

}
/************************************/
/*** 	09. Our Projects css      ***/
/************************************/

.our-projects{
	padding: 120px 0;
}

.project-item{
	position: relative;
	border-radius: 20px;
	min-height: 460px;
	align-content: end;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 10px;
	overflow: hidden;
}

.project-item-image{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.project-item-image a{
	cursor: none;
}

.project-item-image figure{
	height: 100%;
	display: block;
}

.project-item-image figure img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.6s ease-in-out;
}

.project-item:hover .project-item-image figure img{
	transform: scale(1.06);
}

.project-item-content{
	position: relative;
	background-color: var(--bg-color);
	border-radius: 10px;
	padding: 30px;
	transition: all 0.4s ease-in-out;
	z-index: 2;
}

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

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

.project-item-content ul li{
	position: relative;
	line-height: normal;
	color: var(--primary-color);
	padding-left: 16px;
}

.project-item-content ul li::before{
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	height: 6px;
	width: 6px;
	background-color: var(--accent-color);
	border-radius: 50%;
}

.project-item-content ul li a{
	color: inherit;
}

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

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

.our-projects .section-footer-text{
	max-width: 600px;
}

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

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

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

.features-item{
	width: calc(33.33% - 20px);
	background-color: var(--dark-divider-color);
	backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	padding: 40px;
	min-height: 445px;
	transition: all 0.4s ease-in-out;
}

.features-item:hover{
	background-color: var(--accent-color);
	transform: translateY(-5px);
}

.features-item:nth-child(3n + 2){
	flex-direction: column-reverse;
}

.features-item-iamge figure{
	display: block;
	border-radius: 20px;
	max-width: 190px;
	margin: 20px auto;
}

.features-item-iamge img{
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 20px;
}

.features-item-content{
	text-align: center;
}

.features-item-content h2{
	color: var(--white-color);
	font-size: 20px;
}

.features-item-content p{
	color: var(--white-color);
	margin: 10px 0 0;
}

.our-features .section-footer-text{
	margin-top: 60px;
}

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

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

.pricing-item{
	background-color: var(--white-color);
	border-radius: 20px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 40px;
}

.pricing-item-header .pricing-item-title{
    display: block;
	font-family: var(--accent-font);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2em;
    color: var(--primary-color);
	margin-bottom: 30px;
}

.pricing-item-header h2{
	font-size: 48px;
}

.pricing-item-header h2 sub{
	font-family: var(--default-font);
    font-size: 16px;
	font-weight: 400;
	line-height: normal;
    bottom: 0;
}

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

.pricing-item-body{
	border-top: 1px solid var(--divider-color);
	margin-top: 30px;
	padding-top: 30px;
}

.pricing-item-list h3{
	font-size: 20px;
	margin-bottom: 25px;
}

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

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

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

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

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

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

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

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

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

/************************************/
/***   12. Our Integrations css   ***/
/************************************/

.our-integrations{
	padding: 120px 0;
}

.integrations-btn{
	margin-top: 40px;
	text-align: center;
}

.integrations-social-icon-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 30px 40px;
}

.integrations-social-icon-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 20px 40px;
}

.integrations-social-icon-list ul li a{
	position: relative;
	background-color: var(--dark-divider-color);
	border-radius: 10px;
	backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
	height: 60px;
	width: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease-in-out;
	overflow: hidden;
}

.integrations-social-icon-list ul li a::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--accent-color);
	border-radius: 10px;
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.integrations-social-icon-list ul li a:hover::before{
	transform: rotate(0) scale(1);
}

.integrations-social-icon-list ul li a i{
	position: relative;
	color: var(--white-color);
	font-size: 30px;
	z-index: 1;
}

.integrations-add-more-item{
	position: relative;
	background-color: var(--accent-color);
	border-radius: 10px;
	backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
	height: 80px;
	width: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease-in-out;
	overflow: hidden;
}

.integrations-add-more-item::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--white-color);
	border-radius: 10px;
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.integrations-add-more-item:hover::before{
	transform: rotate(0) scale(1);
}

.integrations-add-more-item i{
	position: relative;
	color: var(--white-color);
	font-size: 40px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.integrations-add-more-item:hover i{
	color: var(--accent-color);
}

.integrations-counter-item-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	border-top: 1px solid var(--dark-divider-color);
	margin-top: 80px;
	padding: 60px 6.25vw 0;
}

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

.integrations-counter-item:before{
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: -15px;
	bottom: 0;
	background-color: var(--dark-divider-color);
	width: 1px;
	height: 80%;
}

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

.integrations-counter-item h2{
	color: var(--white-color);
	font-size: 48px;
	line-height: 1em;
}

.integrations-counter-item p{
	color: var(--white-color);
	margin: 10px 0 0;
}

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

.how-it-work{
	padding: 120px 0;
	background-color: var(--white-color);
	background-image: url(../images/service-bg-image.png);
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: auto;
}

.how-work-content{
	height: 100%;
	display: flex;
	flex-direction: column;
	margin-right: 15px;
}

.how-work-image-box{
	position: relative;
	height: 100%;
}

.how-work-image{
	height: 100%;
}

.how-work-image figure{
	position: relative;
    display: block;
	height: 100%;
    border-radius: 20px;
    overflow: hidden;
}

.how-work-image figure img{
	width: 100%;
	height: 100%;
    aspect-ratio: 1 / 0.821;
    object-fit: cover;
	border-radius: 20px;
}

.how-work-rating-box{
	position: absolute;
    left: 30px;
    bottom: 30px;
    right: 30px;
	background: var(--dark-divider-color);
	backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
	border-radius: 10px;
	max-width: 300px;
	padding: 25px;
    z-index: 2;
}

.how-work-rating-header{
	display: flex;
    align-items: center;
}

.how-work-rating-star{
	line-height: normal;
	margin-right: 10px;
}

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

.how-work-rating-header h2{
	font-family: var(--default-font);
	font-size: 30px;
	font-weight: 700;
	color: var(--white-color);
}

.how-work-rating-header h2 sub{
	font-size: 16px;
}

.how-work-rating-info-content{
	margin: 20px 0 0;
}

.how-work-rating-info-content p{
	color: var(--white-color);
	margin: 0;
}

.how-work-item{
	position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    background: var(--secondary-color);
    border-radius: 20px;
	margin-bottom: 30px;
    padding: 40px;
	overflow: hidden;
    border: 1px solid rgba(1, 5, 53, 0.08);
    box-shadow: 0 10px 30px rgba(1, 5, 53, 0.05);
}

.how-work-item:before{
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
	background: var(--primary-color);
	z-index: 0;
	transition: all 0.4s ease-in-out;
}

.how-work-item:hover::before{
    height: 100%;
	top: 0;
}

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

.how-work-item-no{
	position: relative;
    height: 60px;
    width: 60px;
    background: var(--accent-color);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
	overflow: hidden;
}

.how-work-item-no::before{
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
	background: var(--white-color);
	z-index: 0;
	transition: all 0.4s ease-in-out;
}

.how-work-item:hover .how-work-item-no::before{
	height: 100%;
	top: 0;
}

.how-work-item-no h2{
	position: relative;
	font-size: 30px;
	color: var(--white-color);
	transition: all 0.4s ease-in-out;
}

.how-work-item:hover .how-work-item-no h2{
	color: var(--primary-color);
}

.how-work-item-content{
	position: relative;
	width: calc(100% - 80px);
	max-width: 74%;
	z-index: 1;
}

.how-work-item-content h3{
	font-size: 20px;
	transition: all 0.4s ease-in-out;
}

.how-work-item-content p{
	margin: 10px 0 0;
	transition: all 0.4s ease-in-out;
}

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

.how-work-item .icon-box{
	position: absolute;
	top: -20px;
	right: -20px;
}

.how-work-item .icon-box img{
	width: 100%;
	max-width: 100px;
	transition: all 0.3s ease-in-out;
}

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

/************************************/
/***  14. Our Testimonials css    ***/
/************************************/

.our-testimonials{
	position: relative;
	background-image: url('../images/our-testimonial-bg-image.jpg');
	background-position: center center;
	padding: 120px 0;
}

.our-testimonials:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--primary-color);
	opacity: 60%;
	z-index: 1;
}

.our-testimonials .container{
	position: relative;
	z-index: 2;
}

.testimonial-content{
	position: sticky;
	top: 30px;
	margin-right: 30px;
}

.testimonial-slider{
	height: 100%;
}

.testimonial-slider .swiper{
	padding-bottom: 120px;
	height: 100%;
}

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

.testimonial-item{
	height: 100%;
	background-color: var(--dark-divider-color);
	backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
	border-radius: 20px;
	min-height: 430px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	padding: 40px;
}

.testimonial-item-content h2{
	font-size: 20px;
	color: var(--white-color);
	margin-bottom: 20px;
}

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

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

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

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

.testimonial-author-content h2{
	font-size: 20px;
	color: var(--white-color);
}

.testimonial-author-content p{
	color: var(--white-color);
	margin: 5px 0 0;
}

.testimonial-btn{
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	bottom: 0px;
	width: 100%;
}

.testimonial-slider .testimonial-button-next,
.testimonial-slider .testimonial-button-prev{
	position: relative;
	width: 60px;
	height: 60px;
	background: var(--dark-divider-color);
	backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
	border-radius: 50%;
	transition: all 0.4s ease-in-out;
}

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

.testimonial-slider .testimonial-button-next::before,
.testimonial-slider .testimonial-button-prev::before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: url('../images/arrow-white.svg') no-repeat;
	background-position: center center;
	background-size: 30px auto;
	transform: rotate(45deg);
	transition: all 0.4s ease-in-out;
}

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

/************************************/
/***      15. Our Blog css	      ***/
/************************************/

.our-blog{
	padding: 120px 0 90px;
}

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

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

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

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

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

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

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

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

/************************************/
/***        16. Footer css	      ***/
/************************************/
/* Premium Footer Enhancement */

.main-footer.dark-section{
    position: relative;
    overflow: hidden;
    background: #010535;
}


.main-footer .footer-logo img{
    max-width: 135px;
    height: auto;
    object-fit: contain;
    margin-bottom: 20px;
}


.main-footer .footer-location-info-item li{
    color: rgba(255,255,255,0.75);
    line-height: 1.8;
    font-size: 15px;
    display:flex;
    gap:13px;
}


.main-footer .footer-location-info-item img{
    width:22px;
    height:22px;
    margin-top:5px;
}



/* Footer Headings */

.main-footer .footer-links h2{
    color:#ffffff;
    font-size:19px;
    font-weight:600;
    margin-bottom:25px;
    position:relative;
    line-height:1.3;
}


.main-footer .footer-links h2:after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:35px;
    height:3px;
    background:#3662CC;
    border-radius:10px;
}



/* Footer Links */

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


.main-footer .footer-links ul li a{
    color:rgba(255,255,255,0.65);
    transition:.3s ease;
    position:relative;
}


.main-footer .footer-links ul li a:hover{
    color:#ffffff;
    padding-left:8px;
}



/* Contact Section */

.main-footer .footer-working-hour-box ul li{
    color:rgba(255,255,255,0.75);
    line-height:1.7;
}


.main-footer .footer-working-hour-box a{
    color:#ffffff;
}



/* Footer Bottom */

.main-footer .footer-copyright{
    border-top:1px solid rgba(255,255,255,0.15);
    margin-top:50px;
    padding-top:25px;
}


.main-footer .footer-copyright-text p{
    color:rgba(255,255,255,0.65);
}


.main-footer .footer-copyright-text a{
    color:#ffffff;
}



/* Social Icon */

.main-footer .footer-social-links ul{
    display:flex;
    gap:12px;
}


.main-footer .footer-social-links ul li a{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(54,98,204,0.15);
    color:#ffffff;
    transition:.3s;
}


.main-footer .footer-social-links ul li a:hover{
    background:#3662CC;
    transform:translateY(-5px);
}



/* Mobile & Responsive Footer Grid */

@media(max-width:991px){

    .main-footer .footer-link-box{
        grid-template-columns: repeat(2, 1fr);
        gap:35px;
    }

    .main-footer .footer-links{
        margin-bottom:0;
    }

}

@media(max-width:576px){

    .main-footer .footer-link-box{
        grid-template-columns: 1fr;
        gap:30px;
    }

}
.main-footer{
	position: relative;
	background-image: url('../images/footer-bg-image-1.png');
	overflow: hidden;
	padding: 120px 0 0;
}

.main-footer:before{
	position: absolute;
    content: '';
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url(../images/footer-bg-image-2.png);
    background-repeat: repeat-x;
    background-position: right bottom;
    background-size: auto 100%;
    width: 100%;
    height: 200px;
}

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

.about-footer{
	max-width: 320px;
}

.footer-logo img{
	width: 100%;
    max-width: 135px;
    height: auto;
    object-fit: contain;
}

.footer-location-info-item{
	border-top: 1px solid var(--dark-divider-color);
	padding-top: 25px;
	margin-top: 25px;
}

.footer-location-info-item ul{
	list-style: none;
    padding: 0;
    margin: 0;
}

.footer-location-info-item ul li{
    line-height: 1.4em;
    color: var(--white-color);
    display: flex;
	align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.footer-location-info-item ul li:last-child{
	margin-bottom: 0;
}

.footer-location-info-item ul li img{
	width: 100%;
    max-width: 30px;
}

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

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

.footer-link-box{
	display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    align-items: flex-start;
    margin-left: 0;
}

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

.footer-links h2{
    font-size: 19px;
    font-weight: 600;
    color: var(--white-color);
    margin-bottom: 25px;
}

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

.footer-links ul li{
	line-height: 1.5em;
    color: var(--white-color);
    margin-bottom: 12px;
}

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

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

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

.footer-working-hour-box{
	width: 100%;
	max-width: 100%;
}

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

.footer-cta-box{
	background-color: var(--dark-divider-color);
    border-radius: 100px;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    margin-top: 80px;
    padding: 15px 20px;
	overflow: hidden;
}

.footer-cta-content-box{
	width: calc(49% - 15px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 40px;
}

.footer-cta-content-box .icon-box{
	margin-bottom: -35px;
}

.footer-cta-content-box .icon-box img{
	width: 100%;
	max-width: 90px;
}

.footer-cta-content{
	width: calc(100% - 130px);
}

.footer-cta-content h3{
	font-size: 20px;
	color: var(--white-color);
}

.footer-newsletter-form{
	width: calc(51% - 15px);
}

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

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

.footer-newsletter-form	.form-group .form-control::placeholder{
	color: var(--white-color);
	opacity: 50%;
}

.footer-copyright{
	padding: 60px 0;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

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

.footer-social-links ul{
	display: flex;
    flex-wrap: wrap;
	justify-content: center;
    gap: 15px;
    list-style: none;
    margin: 0;
    padding: 0;
}

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

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

.footer-social-links ul li a i{
	position: relative;
	font-size: 18px;
	color: var(--white-color);
	z-index: 1;
}

/************************************/
/*** 	17. About Us Page css     ***/
/************************************/
/* =========================================================
   BLOG PAGE HEADER
   IMG TAG AS BACKGROUND
========================================================= */

.blog-page-header {
    position: relative !important;
    overflow: hidden !important;

    /* Do not let image change section height */
    min-height: 0 !important;

    background-image: none !important;
}


/* Background image */

.blog-page-header > .page-header-bg-image {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    object-fit: cover !important;
    object-position: center center !important;

    z-index: 0 !important;
}


/* Content */

.blog-page-header > .container {
    position: relative !important;
    z-index: 2 !important;
}


/* Keep header content normal */

.blog-page-header .page-header-box {
    position: relative !important;
    z-index: 3 !important;
}


/* Remove unwanted image spacing */

.blog-page-header .page-header-bg-image {
    vertical-align: middle !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .blog-page-header > .page-header-bg-image {
        object-position: center center !important;
    }
}
.page-header{
	position: relative;
	/* background-image: url('../images/page-header-bg.jpg'); */
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 285px 0 165px;
	overflow: hidden;
}

.page-header:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg, rgba(1, 5, 53, 0.90) -2.45%, rgba(1, 5, 53, 0.81) 32.3%, transparent 78.72%);
	z-index: 1;
}

.page-header-box{
	position: relative;
	z-index: 2;
}

.page-header-box h1{
	display: inline-block;
	font-size: 56px;
	letter-spacing: -0.02em;
	color: var(--white-color);
	margin-bottom: 15px;
	cursor: none;
}

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

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

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

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

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

.approach-item{
	background-color: var(--bg-color);
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	padding: 40px;
	min-height: 445px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.approach-item-header .icon-box{
	position: relative;
	height: 60px;
	width: 60px;
	border-radius: 10px;
	background-color: var(--accent-color);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 40px;
	overflow: hidden;
}

.approach-item-header .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--primary-color);
	border-radius: 10px;
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.approach-item:hover .approach-item-header .icon-box::before{
	transform: rotate(0) scale(1);
}

.approach-item-header .icon-box img{
	position: relative;
	width: 100%;
	max-width: 30px;
	z-index: 1;
}

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

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

.approach-item-list{
	border-top: 1px solid var(--divider-color);
	padding-top: 30px;
}

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

.approach-item-list ul li{
	position: relative;
    line-height: 1.5em;
    padding-left: 25px;
    margin-bottom: 20px;
}

.approach-item-list ul li:last-child{
	margin: 0;
}

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

.approach-cta-item{
	position: relative;
	padding: 40px;
	min-height: 445px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.approach-cta-item-image{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.approach-cta-item-image figure{
	position: relative;
	display: block;
	height: 100%;
	border-radius: 20px;
	overflow: hidden;
}

.approach-cta-item-image figure:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: var(--primary-color);
	opacity: 50%;
	z-index: 1;
}

.approach-cta-item-image img{
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.approach-cta-item-body{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	height: 100%;
	z-index: 2;
}

.approach-cta-item-content h3{
	color: var(--white-color);
	font-size: 20px;
}

.approach-cta-item-content p{
	color: var(--white-color);
	margin: 10px 0 0;
}

.approach-cta-item-content ul{
	border-top: 1px solid var(--dark-divider-color);
	list-style: none;
	margin: 20px 0 0 0;
	padding: 20px 0 0 0;
}

.approach-cta-item-content ul li{
	font-family: var(--accent-font);
	font-size: 20px;
    font-weight: 500;
	line-height: 1.4em;
	color: var(--white-color);
	margin-bottom: 10px;
}

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

.approach-cta-item-content ul li a{
	color: inherit;
	transition: all 0.3s ease-in-out;
}

.approach-cta-item-content ul li a:hover{
	color: var(--accent-color);
}

.trusted-company-slider-box{
    margin-top: 30px;
}

.trusted-company-slider-content{
    display: flex;
    align-items: center;
	justify-content: space-between;
	gap: 30px;
	margin-bottom: 40px;
	text-align: center;
}

.trusted-company-slider-content hr{
    height: 1px;
	flex-grow: 1;
    color: var(--divider-color);
    opacity: 1;
    margin: 0;
}

.trusted-company-slider-content p{
	font-weight: 600;
    margin-bottom: 0;
}

.trusted-company-slider{
	max-width: 980px;
	margin: 0 auto;
} 

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

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

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

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

.intro-video-image{
	position: relative;
	overflow: hidden;
}

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

.intro-video-image figure:before{
	content: '';
	position: absolute;
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--primary-color);
    opacity: 20%;
	z-index: 1;
}

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

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

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

.intro-video .video-play-button a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 100px;
    font-size: 18px;
	font-weight: 500;
	color: var(--white-color);
	backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
	border-radius: 50%;
	cursor: none;
	transition: all 0.4s ease-in-out;
}

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

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

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

.team-item-image figure,
.team-item-image a{
	position: relative;
    display: block;
	height: 100%;
    cursor: none;
}

.team-item-image figure:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	border-radius: 14px;
	background: linear-gradient(180deg, transparent 43.5%, rgba(0, 0, 0, 0.90) 100%);
	z-index: 1;
}

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

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

.team-item-body{
	position: absolute;
	right: 10px;
	bottom: 10px;
	left: 10px;
	background: var(--dark-divider-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
	padding: 30px;
	text-align: center;
    transition: all 0.4s ease-in-out;
    z-index: 2;
}

.team-item-content h2{
    font-size: 20px;
    color: var(--white-color);
}

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

.team-item-content p{
    color: var(--white-color);
	margin: 10px 0 0;
}

.team-social-list{
	height: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
}

.team-item:hover .team-social-list{
    height: 40px;
    opacity: 1;
	margin-top: 20px;
    visibility: visible;
}

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

.team-social-list ul li a{
	width: 38px;
	height: 38px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: transparent;
	border: 1px solid var(--dark-divider-color);
	border-radius: 100px;
	transition: all 0.3s ease-in-out;
}

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

.team-social-list ul li a i{
	position: relative;
    font-size: 18px;
    color: var(--white-color);
	z-index: 1;
}

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

.faqs-iamge-box{
	position: relative;
	height: 100%;
}

.faqs-iamge{
	height: 100%;
}

.faqs-iamge figure{
	height: 100%;
	display: block;
	border-radius: 20px;
}

.faqs-iamge img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1.162;
	object-fit: cover;
	border-radius: 20px;
}

.google-rating-box{
	position: absolute;
	right: 40px;
	bottom: 40px;
	background-color: var(--dark-divider-color);
	backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
	border-radius: 20px;
	padding: 30px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
}

.google-rating-box .icon-box img{
	width: 100%;
	max-width: 50px;
}

.google-rating-info{
	width: calc(100% - 65px);
}

.google-rating-info-header{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
}

.google-rating-star i{
	color: var(--white-color);
}

.google-rating-info-content p{
	color: var(--white-color);
	line-height: normal;
	margin: 5px 0 0;
}

.google-rating-info-header h2{
	font-size: 24px;
	line-height: normal;
	color: var(--white-color);
}

.faqs-content{
	height: 100%;
	align-content: center;
	margin-left: 15px;
}

.faq-accordion .accordion-item{
	background: var(--secondary-color);
	border-radius: 10px;
	margin-bottom: 20px;
    padding: 0;
	overflow: hidden;
}

.light-section .faq-accordion .accordion-item{
	background: var(--bg-color);
}

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

.faq-accordion .accordion-header .accordion-button{
	font-size: 18px;
	font-weight: 500;
	line-height: 1.333em;
    background-color: transparent;
    color: var(--primary-color);
    padding: 22px 70px 22px 20px;
	transition: all 0.3s ease-in-out;
}

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

.faq-accordion .accordion-item .accordion-button::after, 
.faq-accordion .accordion-item .accordion-button.collapsed::after{
    content: '\2b';
    font-family: 'FontAwesome';
    position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 10px;
    height: 50px;
	width: 50px;
	background-color: var(--accent-color);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white-color);
	font-size: 24px;
    transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-button:not(.collapsed)::after{
    content: '\f068';
	color: var(--accent-color);
	background-color: var(--white-color);
}

.faq-accordion .accordion-item .accordion-body{
	background-color: var(--accent-color);
	border-top: 1px solid var(--dark-divider-color);
    padding: 22px 20px;
}

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

/************************************/
/*** 	18. Services Page css     ***/
/************************************/

.page-services{
	padding: 120px 0 90px;
}

.page-services .service-item,
.page-services .service-item:before{
	background-color: var(--white-color);
}

/************************************/
/*** 	19. Service Single css    ***/
/************************************/
/* =========================================================
   OFFENSIVE SECURITY - INTRO IMAGE
   FULL IMAGE / NO CROPPING
========================================================= */

.intro-image-wrapper {
    width: 100%;
    height: auto !important;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: transparent;

    border-radius: 16px;
}


/* Actual image */

.intro-image-wrapper .intro-image-img {
    display: block;

    width: 100% !important;
    height: auto !important;

    max-width: 100% !important;

    /*
       IMPORTANT:
       contain keeps the COMPLETE image visible
    */
    object-fit: contain !important;

    object-position: center center !important;

    /*
       Remove any fixed/cropping height
    */
    min-height: 0 !important;

    aspect-ratio: auto !important;

    transition:
        transform 0.4s ease,
        opacity 0.3s ease;
}


/* =========================================================
   HOVER
========================================================= */

.intro-image-wrapper:hover .intro-image-img {
    transform: scale(1.02);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .intro-image-wrapper {
        max-height: none !important;
    }

    .intro-image-wrapper .intro-image-img {
        max-height: none !important;
    }
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199px) {

    .intro-image-wrapper {
        width: 100%;
        height: auto !important;
    }

    .intro-image-wrapper .intro-image-img {
        width: 100% !important;
        height: auto !important;

        max-width: 100% !important;
        max-height: none !important;

        object-fit: contain !important;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .intro-image-wrapper {
        width: 100%;
        height: auto !important;

        margin-bottom: 30px;
    }

    .intro-image-wrapper .intro-image-img {
        width: 100% !important;
        height: auto !important;

        max-width: 100% !important;
        max-height: none !important;

        object-fit: contain !important;

        transform: none !important;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .intro-image-wrapper {
        width: 100%;

        height: auto !important;

        border-radius: 12px !important;

        margin-bottom: 25px;
    }

    .intro-image-wrapper .intro-image-img {
        width: 100% !important;
        height: auto !important;

        max-width: 100% !important;
        max-height: none !important;

        object-fit: contain !important;

        transform: none !important;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575px) {

    .intro-image-wrapper {
        border-radius: 10px !important;
    }

    .intro-image-wrapper .intro-image-img {
        width: 100% !important;
        height: auto !important;

        max-height: none !important;

        object-fit: contain !important;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 425px) {

    .intro-image-wrapper {
        width: 100%;

        height: auto !important;

        border-radius: 8px !important;
    }

    .intro-image-wrapper .intro-image-img {
        width: 100% !important;
        height: auto !important;

        max-width: 100% !important;

        object-fit: contain !important;
    }
}
.page-service-single{
	padding: 120px 0;
}

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

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

.page-category-list .page-category-list-title{
	font-size: 20px;
	line-height: 1.333em;
	color: var(--white-color);
	background: var(--accent-color);
	padding: 20px 30px;
}

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

.page-category-list ul li{
    font-family: var(--accent-font);
	color: var(--primary-color);
	font-weight: 500;
	line-height: 1.5em;
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

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

.page-category-list ul li a{
    position: relative;
    display: block;
    text-transform: capitalize;
	color: inherit;
    padding-right: 25px;
    transition: all 0.4s ease-in-out;
}

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

.page-category-list ul li a::before{
	content: '';
    position: absolute;
    top: 50%;
    right: 0;
	background: url('../images/arrow-accent.svg') no-repeat;
	background-position: center center;
	background-size: cover;
    width: 20px;
    height: 20px;
	transform: translateY(-50%);
    transition: all 0.4s ease-in-out;
}

.page-category-list ul li a:hover::before{
	transform:translateY(-50%) rotate(45deg);
}

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

.sidebar-cta-box{
    position: relative;
    border-radius: 20px;
    min-height: 350px;
    align-content: end;
    padding: 40px;
    overflow: hidden;
}

.sidebar-cta-box:before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, transparent 34%, rgba(1, 5, 53, 0.90) 86.8%);
    width: 100%;
    height: 100%;
    z-index: 1;
}

.sidebar-cta-image{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.sidebar-cta-image figure{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.sidebar-cta-image figure img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-cta-body{
    position: relative;
    z-index: 2;
}

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

.sidebar-cta-contact-btn{
    margin-top: 25px;
}

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

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

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

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

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

.service-offer-box,
.service-benefits-box{
    margin-top: 60px;
}

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

.service-offer-list ul{
	list-style: decimal;
    margin: 0;
    padding: 0 0 0 20px;
}

.service-offer-list ul li{
	line-height: 1.6em;
	margin-bottom: 30px;
}

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

.service-offer-list ul li::marker,
.service-offer-list ul li span{
	font-family: var(--accent-font);
	font-size: 20px;
	font-weight: 500;
	color: var(--primary-color);
}

.service-offer-images{
	display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 40px;
}

.service-offer-image{
	width: calc(50% - 15px)
}

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

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

.service-benefits-list{
	display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 40px;
}

.service-benefits-list-item{
	width: calc(50% - 15px);
    background: var(--secondary-color);
    border-radius: 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
    padding: 20px;
}

.service-benefits-list-item .icon-box{
	position: relative;
    height: 60px;
    width: 60px;
    background: var(--accent-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    overflow: hidden;
}

.service-benefits-list-item .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--primary-color);
	border-radius: 10px;
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.service-benefits-list-item:hover .icon-box::before{
	transform: rotate(0) scale(1);
}

.service-benefits-list-item .icon-box img{
	position: relative;
    width: 100%;
    max-width: 30px;
    z-index: 1;
}

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

.service-benefits-list-title h3{
	font-size: 20px;
	line-height: 1.4em;
}

/************************************/
/*** 	 20. Blog Archive css     ***/
/************************************/

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

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

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

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

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

/************************************/
/*** 	 21. Blog Single css      ***/
/************************************/

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

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

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

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

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

.post-entry:after{
    content: '';
    display: block;
    clear: both;
}

.post-entry a{
    color: var(--accent-color);
}

.post-entry h1,
.post-entry h2,
.post-entry h3,
.post-entry h4,
.post-entry h5,
.post-entry h6{
	font-family: var(--accent-font);
	font-weight: 500;
	line-height: 1.2em;
	margin: 0 0 0.42em;
}

.post-entry h1{
	font-size: 56px;
	letter-spacing: -0.02em;
}

.post-entry h2{
	font-size: 48px;
	letter-spacing: -0.02em;
}

.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:last-child,
.post-entry ul:last-child{
    margin-bottom: 0;
}

.post-entry ol li,
.post-entry ul li{
    position: relative;
	font-size: 18px;
    font-weight: 400;
    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: var(--secondary-color) url('../images/icon-blockquote.svg');
	background-repeat: no-repeat;
	background-position: 30px 30px;
    background-size: 45px;
	border-radius: 10px;
    padding: 30px 30px 30px 90px;
    margin-bottom: 30px;
}

.post-entry blockquote p{
	font-family: var(--accent-font);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.4em;
	color: var(--primary-color);
}

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

.tag-links{
	font-family: var(--accent-font);
    font-size: 20px;
	font-weight: 500;
    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-family: var(--accent-font);
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 1em;
	background: var(--accent-color);
    color: var(--white-color);
	border-radius: 100px;
    padding: 12px 20px;
	transition: all 0.4s ease-in-out;
}

.post-tags .tag-links a:hover{
	background: var(--primary-color);
}

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

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

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

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

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

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

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

/************************************/
/*** 	22. Projects Page css     ***/
/************************************/

.page-projects{
    padding: 120px 0 90px;
}

/************************************/
/*** 	23. Project Single css    ***/
/************************************/

.page-project-single{
    padding: 120px 0;
}
.project-category-list ul li{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
}

.project-category-list ul li span{
	font-family: var(--default-font);
	font-size: 16px;
	font-weight: 400;
	color: var(--text-color);
}

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

.project-entry-implemented-box,
.project-entry-process-box{
    margin-top: 60px;
}

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

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

.project-entry h3{
	font-size: 20px;
	line-height: 1.3em;
	margin-bottom: 10px;
}

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

.project-entry-implemented-image-content{
	display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 40px;
}

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

.project-entry-implemented-image figure{
    display: block;
    height: 100%;
    border-radius: 20px;
}

.project-entry-implemented-image figure img{
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 0.845;
    object-fit: cover;
    border-radius: 20px;
}

.project-entry-implemented-accordion{
    width: calc(50% - 15px);
    align-content: center;
}

.project-entry-implemented-accordion .accordion-item{
    margin-bottom: 20px;
}

.project-entry-implemented-accordion .accordion-item:last-child{
    margin-bottom: 0;
}

.project-entry-implemented-accordion .accordion-header{
    margin-bottom: 0;
}

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

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

.project-entry-implemented-accordion .accordion-button::after, 
.project-entry-implemented-accordion .accordion-button.collapsed::after{
    content: '\2b';
	font-family: 'FontAwesome';
	position: absolute;
	top: 2px;
	right: 0;
	font-size: 20px;
	line-height: normal;
	color: var(--accent-color);
	transition: all 0.3s ease-in-out;
}

.project-entry-implemented-accordion .accordion-button:not(.collapsed)::after{
	content: '\f068';
	color: var(--accent-secondary-color);
}

.project-entry-implemented-accordion .accordion-item .accordion-body{
    padding: 20px 25px 0 0;
}

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

.project-entry-process-item-list{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 40px;
}

.project-entry-process-item{
    width: calc(33.33% - 20px);
    background: var(--secondary-color);
    border-radius: 20px;
    padding: 30px;
	transition: all 0.4s ease-in-out;
}

.project-entry-process-item:hover{
	transform: translateY(-5px);
}

.project-entry-process-item-header{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}

.project-entry-process-item-header .icon-box{
    position: relative;
    height: 50px;
    width: 50px;
    background: var(--accent-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    overflow: hidden;
}

.project-entry-process-item-header .icon-box::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--primary-color);
	border-radius: 10px;
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.project-entry-process-item:hover .project-entry-process-item-header .icon-box::before{
    transform: rotate(0) scale(1);
}

.project-entry-process-item-header .icon-box img{
    position: relative;
    width: 100%;
    max-width: 24px;
    z-index: 1;
}

.project-entry-process-box .section-footer-text{
    margin-top: 40px;
}

/************************************/
/***   	   24. Team Page css      ***/
/************************************/

.page-team{
    padding: 120px 0 90px;
}

/************************************/
/***   	 25. Team Single css      ***/
/************************************/

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

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

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

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

.team-about-content,
.team-member-expertise{
	margin-bottom: 60px;
}

.team-about-content{
    background-color: var(--secondary-color);
    border-radius: 20px;
    padding: 50px;
}

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

.team-contact-list ul li{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
    align-items: center;
	gap: 10px;
	line-height: 1.5em;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 30px;
	padding-bottom: 30px;
}

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

.team-contact-list ul li span{
	font-family: var(--accent-font);
	font-size: 20px;
    font-weight: 500;
	color: var(--primary-color);
}

.team-contact-list .member-social-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: end;
	gap: 15px;
	max-width: 70%;
}

.team-contact-list .member-social-list a{
	width: 40px;
	height: 40px;
	border: 1px solid var(--divider-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--primary-color);
	transition: all 0.3s ease-in-out;
}

.team-contact-list .member-social-list a:hover{
	background-color: var(--accent-color);
	color: var(--white-color);
}

.team-contact-list .member-social-list a i{
	font-size: 20px;
	color: inherit;
}

.team-member-skill-list{
    background-color: var(--secondary-color);
    border-radius: 14px;
    padding: 50px;
} 

.skills-progress-bar{
	margin-bottom: 30px;
}

.skills-progress-bar:last-child{
	margin-bottom: 0;
}

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

.skills-progress-bar .skill-data .skill-title,
.skills-progress-bar .skill-data .skill-no{
	font-family: var(--accent-font);
	font-size: 16px;
	font-weight: 500;
    color: var(--primary-color);
}

.skills-progress-bar .skill-data .skill-no{
    font-weight: 400;
}

.skills-progress-bar .skillbar .skill-progress{
    position: relative;
    width: 100%;
    height: 6px;
    background: var(--bg-color);
    border-radius: 10px;
    overflow: hidden;
}

.skills-progress-bar .skillbar .skill-progress .count-bar{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: var(--accent-color);
    border-radius: 10px;
}

/************************************/
/*** 	 26. Pricing Page css     ***/
/************************************/

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

/************************************/
/***   27. Testimonials Page css  ***/
/************************************/

.page-testimonials{
    padding: 120px 0 90px;
}

.page-testimonials .testimonial-item{
    background-color: var(--secondary-color);
	padding: 40px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
}

.page-testimonials .testimonial-item-content h2,
.page-testimonials .testimonial-item-content p,
.page-testimonials .testimonial-author-content h2{
    color: var(--primary-color);
}

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

.page-testimonials .testimonial-item-author{
    border-color: var(--divider-color);
}

/************************************/
/*** 	 28. Image Gallery css    ***/
/************************************/

.page-gallery{
	padding: 120px 0 90px;
}

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

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

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

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

/************************************/
/*** 	29. Video Gallery css    ***/
/************************************/

.page-video-gallery{
	padding: 120px 0 90px;
}

.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(--primary-color);
	border-radius: 20px;
    opacity: 0%;
    visibility: hidden;
    width: 100%;
    height: 100%;
    z-index: 1;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
}

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

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

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

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

/************************************/
/*** 	  30. FAQ's Page css      ***/
/************************************/

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

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

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

/************************************/
/*** 	31. Contact Us Page css   ***/
/************************************/

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

.contact-us-content{
	min-height: 560px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-right: 15px;
}

.contact-us-content-body-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.contact-us-content-body-list ul li{
	position: relative;
	line-height: 1.5em;
	padding-left: 25px;
	margin-bottom: 15px;
}

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

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

.contact-us-btn{
	margin-top: 40px;
}

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

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

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

.google-map{
	padding: 60px 0 120px;
}

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

.google-map-iframe iframe{
	width: 100%;
	height: 100%;
    border-radius: 20px;
}

/************************************/
/*** 	32.	404 Error Page css    ***/
/************************************/

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

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

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

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

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

/************************************/
/***      33. Responsive css      ***/
/************************************/

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

	.hero-box{
		padding: 250px 0 100px;
	}

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

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

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

	.section-content-btn .section-btn{
		margin-top: 20px;
	}
	
	.section-title-content{
        margin-top: 10px;
    }

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

	header.main-header{
		top: 30px;
	}

	.hero-content-box{
		margin: 0;
	}

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

	.about-image-box{
		max-width: 740px;
		margin: 0 auto 30px;
	}

	.about-us-body-image figure img{
		aspect-ratio: 1 / 0.42;
	}

	.about-us-footer{
		margin-top: 30px;
	}

	.service-item{
		min-height: 360px;
		padding: 30px;
	}

	.service-item-header{
		padding-bottom: 30px;
		margin-bottom: 30px;
	}

	.what-we-content{
		height: auto;
		margin-bottom: 30px;
	}

	.what-we-footer{
		margin-top: 30px;
		padding-top: 30px;
	}

	.what-we-image-box{
		height: auto;
		margin: 0;
	}

	.what-we-image figure,
	.what-we-image img{
		height: auto;
	}

	.what-we-image img{
		aspect-ratio: 1 / 0.7;
	}

	.why-choose-info-box{
		height: auto;
		gap: 30px;
		margin: 0 0 30px;
	}

	.why-choose-image,
	.why-choose-image figure,
	.why-choose-image img{
		height: auto;
	}

	.why-choose-content{
		height: auto;
	}

	.project-item-content{
		padding: 20px;
	}

	.features-item{
		width: calc(50% - 15px);
		min-height: auto;
		padding: 30px;
	}

	.features-item:nth-child(3n + 2){
		flex-direction: column;
	}

	.features-item-iamge figure{
		margin: 10px auto 0;
	}

	.pricing-item{
		padding: 30px;
	}

	.pricing-item-btn{
		margin-top: 30px;
	}

	.integrations-counter-item-list{
		margin-top: 50px;
		padding: 30px 0 0;
	}

	.integrations-social-icon-list,
	.integrations-social-icon-list ul{
		gap: 30px; 
	}

	.how-work-content{
		height: auto;
		margin: 0 0 30px;
	}

	.how-work-image-box,
	.how-work-image,
	.how-work-image figure,
	.how-work-image img{
		height: auto;
	}

	.how-work-image figure img{
		aspect-ratio: 1 / 0.7;
	}

	.how-work-item{
        padding: 30px;
    }

	.testimonial-content{
		position: initial;
		margin: 0 0 30px;
	}

	.testimonial-item{
		padding: 30px;
		min-height: 360px;
	}

	.main-footer:before{
		height: 130px;
	}

	.about-footer{
		max-width: 100%;
		margin-bottom: 30px;
	}

	.footer-location-info-item{
		padding-top: 30px;
		margin-top: 30px;
	}

	.footer-location-info-item ul li{
		gap: 10px;
	}

	.footer-location-info-item ul li img{
		max-width: 24px;
	}

	.footer-link-box{
		margin: 0;
	}

	.footer-links h2{
		margin-bottom: 20px;
	}

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

	.footer-contact-item{
		margin-top: 20px;
		padding-top: 20px;
	}

	.footer-cta-box{
		margin-top: 30px;
	}

	.footer-copyright{
		padding: 30px 0;
		gap: 20px;
	}

	.approach-item,
	.approach-cta-item{
		min-height: auto;
		padding: 30px;
	}

	.approach-item-header .icon-box{
		margin-bottom: 30px;
	}

	.trusted-company-slider-content{
		margin-bottom: 30px;
	}
	
	.trusted-company-logo img{
		max-width: 145px;
		height: 35px;
	}

	.intro-video-image img{
        aspect-ratio: 1 / 0.6;
    }

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

	.team-item-image img{
		aspect-ratio: 1 / 1.08;
	}

	.faqs-iamge-box{
		height: auto;
		margin: 0 0 30px;
	}

	.faqs-iamge,
	.faqs-iamge figure,
	.faqs-iamge img{
		height: auto;
	}

	.faqs-iamge img{
		aspect-ratio: 1 / 0.8;
	}

	.google-rating-box{
		right: 30px;
		bottom: 30px;
		padding: 20px;
	}

	.faqs-content{
		margin: 0;
	}

	.page-single-sidebar{
		margin: 0;
	}

    .page-category-list .page-category-list-title{
		padding: 15px 20px;
	}

    .page-category-list ul{
		padding: 20px;
	}

	.page-category-list ul li{
		padding-bottom: 15px;
		margin-bottom: 15px;
	}

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

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

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

    .service-offer-box, 
    .service-benefits-box{
        margin-top: 40px;
    }

    .service-offer-list{
        margin-top: 30px;
    }

    .service-offer-list ul li{
        margin-bottom: 20px;
    }

    .service-offer-images{
        margin-top: 30px;
    }

    .service-benefits-list{
        margin-top: 30px;
    }

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

	.project-entry-implemented-box,
    .project-entry-process-box{
        margin-top: 40px;
    }

    .project-entry-implemented-image-content{
        margin-top: 30px;
    }

    .project-entry-process-item-list{
        margin-top: 30px;
        gap: 20px;
    }

    .project-entry-process-item{
        width: calc(33.33% - 13.33px);
        padding: 20px;
    }

	.project-entry-process-item-header{
		margin-bottom: 30px;
	}

    .project-entry-process-box .section-footer-text{
        margin-top: 30px;
    }

    .team-about-content{
        padding: 30px;
    }

    .team-about-content,
    .team-member-expertise{
	    margin-bottom: 40px;
    }

    .team-contact-list ul li{
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .team-member-skill-list{
        padding: 30px;
    }

	.contact-us-content{
		min-height: auto;
		margin: 0 0 30px;
	}

	.contact-us-btn{
		margin-top: 30px;
	}

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

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

	.btn-default{
        padding: 15px 44px 15px 15px;
    }

	.btn-default::before{
		right: 15px;
		width: 22px;
		height: 22px;
	}

	.readmore-btn{
		padding: 1px 28px 1px 0;
	}

	.readmore-btn::before{
		width: 22px;
		height: 22px;
		background-size: 14px auto;
	}

	header.main-header{
		top: 0px;
		right: 0px;
		left: 0px;
	}

	header.main-header .header-sticky{
		width: 100%;
		border-radius: 0;
	}

	header.main-header .header-sticky.active{
        width: 100%;
		left: 0;
		right: 0;
		transform: translateY(0);
		border-top: none;
		border-right: none;
		border-left: none;
		border-radius: 0;
	}

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

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

	.header-btn{
		display: none;
	}

	.light-section .container-fluid{
		padding: 0 15px;
	}

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

	.section-title .section-sub-title{
		padding: 5px 12px 5px 26px;
		margin-bottom: 10px;
	}

	.section-title .section-sub-title::before{
		left: 12px;
	}

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

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

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

	.hero-sub-heading{
		padding: 5px 12px 5px 5px;
	}

	.hero-content-body{
		gap: 20px 30px;
	}

	.hero-content-body .video-play-button a span{
		width: 46px;
		height: 46px;
	}

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

	.satisfy-client-image figure img{
		max-width: 40px;
	}

	.satisfy-client-image.add-more{
		height: 42px;
		width: 42px;
	}

	.satisfy-client-image.add-more h3{
		font-size: 16px;
	}

	.satisfy-client-image.add-more i{
		font-size: 16px;
	}

	.our-scrolling-ticker{
		padding: 20px 0;
	}

	.scrolling-ticker-box{
		--gap: 20px;
	}

	.scrolling-content span{
		font-size: 22px;
	}

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

	.about-experience-item{
		padding: 20px;
		margin-right: -80px;
	}

	.about-experience-item .icon-box{
		height: 50px;
		width: 50px;
	}

	.about-experience-item .icon-box img{
		max-width: 24px;
	}

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

	.about-us-body-list ul li{
		margin-bottom: 10px;
	}

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

	.about-us-author-box{
		gap: 10px;
	}

	.about-us-author-image figure img{
		max-width: 44px;
	}

	.about-us-author-content h3{
		font-size: 18px;
	}

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

	.section-footer-text{
		margin-top: 10px;
	}

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

	.what-we-item .icon-box{
		height: 50px;
		width: 50px;
	}

	.what-we-item .icon-box img{
		max-width: 24px;
	}

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

	.what-we-image-box-content{
		left: 30px;
		right: 30px;
	}

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

	.why-choose-info-box .watch-video-circle img{
		max-width: 110px;
	}

	.why-choose-info-list ul{
		gap: 15px;
	}

	.why-choose-info-list ul li{
		padding: 7px 16px;
	}

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

	.why-choose-item-title h2{
		font-size: 38px;
	}

	.our-projects{
		padding: 60px 0;
	}

	.project-item{
		min-height: 360px;
	}

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

	.features-item-iamge figure{
		max-width: 160px;
	}

	.our-features .section-footer-text{
		margin-top: 40px;
	}

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

	.pricing-item-header .pricing-item-title{
		margin-bottom: 20px;
	}

	.pricing-item-header h2{
		font-size: 38px;
	}

	.pricing-item-body{
		margin-top: 20px;
		padding-top: 20px;
	}

	.pricing-item-list h3{
		margin-bottom: 20px;
	}

	.pricing-item-list ul li{
		margin-bottom: 10px;
	}

	.pricing-item-list ul li:before{
		font-size: 16px;
	}
	
    .pricing-benefit-list{
		margin-top: 10px;
	}

	.pricing-benefit-list ul{
		gap: 15px 30px;
	}

	.our-integrations{
		padding: 60px 0;
	}

	.integrations-btn{
		margin-top: 30px;
	}

	.integrations-social-icon-list ul li a{
		height: 50px;
		width: 50px;
	}

	.integrations-add-more-item{
		height: 60px;
		width: 60px;
	}

	.integrations-social-icon-list ul li a i{
		font-size: 24px;
	}

	.integrations-add-more-item i{
		font-size: 30px;
	}

	.integrations-counter-item h2{
		font-size: 38px;
	}

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

	.how-work-rating-box{
		left: 20px;
		right: 20px;
		bottom: 20px;
		padding: 20px;
	}

	.how-work-rating-header h2{
		font-size: 26px;
	}

	.how-work-item{
		margin-bottom: 20px;
	}

	.how-work-item-no{
		height: 50px;
		width: 50px;
	}

	.how-work-item-no h2{
		font-size: 26px;
	}

	.how-work-item-content{
		width: calc(100% - 70px);
		max-width: 85%;
	}

	.how-work-item .icon-box img{
		max-width: 80px;
	}

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

	.testimonial-slider .swiper{
		padding-bottom: 80px;
	}

	.testimonial-author-image figure img{
		max-width: 50px;
	}

	.testimonial-slider .testimonial-button-next, 
	.testimonial-slider .testimonial-button-prev{
		width: 50px;
    	height: 50px;
	}

	.testimonial-slider .testimonial-button-next::before, 
	.testimonial-slider .testimonial-button-prev::before{
		background-size: 24px;
	}

	.our-blog{
		padding: 60px 0 30px;
	}

	.post-featured-image{
		margin-bottom: 20px;
	}

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

	.footer-working-hour-box{
		max-width: 40%;
	}
	
	.footer-cta-box{
		gap: 20px;
		border-radius: 20px;
	}

	.footer-cta-content-box{
		width: 100%;
		gap: 15px;
	}

	.footer-cta-content-box .icon-box{
		margin-bottom: 0;
	}

	.footer-cta-content-box .icon-box img{
		max-width: 40px;
	}

	.footer-cta-content{
		width: calc(100% - 55px);
	}

	.footer-newsletter-form{
		width: 100%;
	}

	.page-header{
		padding: 180px 0 90px;
	}

	.page-header-box h1{
		font-size: 42px;
		margin-bottom: 10px;
	}

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

	.approach-item-header .icon-box{
		height: 50px;
		width: 50px;
	}

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

	.approach-item-list ul li{
		margin-bottom: 10px;
	}

	.approach-item-list ul li:before{
		font-size: 16px;
	}

	.trusted-company-slider{
		padding: 0;
	}

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

	.team-item-body{
		padding: 20px;
	}

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

	.google-rating-info-header h2{
		font-size: 22px;
	}

	.faq-accordion .accordion-header .accordion-button{
		padding: 18px 60px 18px 18px;
	}

	.faq-accordion .accordion-item .accordion-button::after,
	.faq-accordion .accordion-item .accordion-button.collapsed::after{
		height: 40px;
		width: 40px;
		font-size: 20px;
	}

	.faq-accordion .accordion-item .accordion-body{
		padding: 18px;
	}

	.page-services{
		padding: 60px 0 30px;
	}

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

    .page-single-sidebar{
		position: initial;
        margin-bottom: 30px;
    }

    .page-category-list{
        margin-bottom: 30px;
    }

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

    .service-entry h2{
        font-size: 38px;
        margin-bottom: 15px;
    }

    .service-benefits-list-item .icon-box{
        height: 50px;
        width: 50px;
    }

    .service-benefits-list-item .icon-box img{
        max-width: 24px;
    }

    .service-benefits-list-title{
        width: calc(100% - 65px);
    }

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

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

	.page-single-post{
        padding: 60px 0;
    }
    
    .post-image{
        margin-bottom: 20px;
    }
    
    .post-entry h2{
        font-size: 38px;
    }
    
    .post-entry p{
        margin-bottom: 15px;
    }
    
    .post-entry ol li,
    .post-entry ul li{
		font-size: 16px;
        margin-bottom: 10px;
    }
    
    .post-entry blockquote{
        background-position: 20px 20px;
        background-size: 40px;
        padding: 20px 20px 20px 70px;
        margin-bottom: 20px;
    }
    
    .post-entry blockquote p{
        font-size: 18px;
    }
    
    .post-tags{
        margin-bottom: 20px;
    }
    
    .post-tags .tag-links a{
        padding: 12px 15px;
    }
    
    .post-social-sharing ul{
        text-align: left;
    }

	.page-projects{
        padding: 60px 0 30px;
    }

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

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

    .project-entry h2{
        font-size: 38px;
        margin-bottom: 15px;
    }

	.project-entry-implemented-accordion .accordion-item{
		margin-bottom: 15px;
	}

	.project-entry-implemented-accordion .accordion-header .accordion-button{
		padding: 0 20px 15px 0;
	}

	.project-entry-implemented-accordion .accordion-button::after,
	.project-entry-implemented-accordion .accordion-button.collapsed::after{
		font-size: 18px;
	}

	.project-entry-implemented-accordion .accordion-item .accordion-body{
		padding: 15px 20px 0 0;
	}

	.page-team{
        padding: 60px 0 30px;
    }

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

    .team-single-image figure img{
        aspect-ratio: 1 / 1;
    }

	.team-contact-list ul li span{
		font-size: 18px;
	}

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

	.page-testimonials{
        padding: 60px 0 30px;
    }

	.page-testimonials .testimonial-item{
		padding: 30px;
	}

	.page-gallery{
        padding: 60px 0 30px;
    }

	.page-video-gallery{
        padding: 60px 0 30px;
    }

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

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

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

	.contact-us-content-body-list ul li{
		margin-bottom: 10px;
	}

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

	.contact-form .form-control{
		padding: 13px 15px;
	}

	.google-map{
		padding: 30px 0 60px;
	}

	.google-map-iframe{
		height: 450px;
	}

	.error-page{
		padding: 60px 0px;
	}
	
	.error-page-image{
		margin-bottom: 20px;
	}
}

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

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

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

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

	.hero-box{
        padding: 150px 0 60px;
    }

	.hero-sub-heading .satisfy-client-image figure img{
		max-width: 26px;
	}

	.hero-content-body{
		gap: 20px;
	}

	.video-play-button a{
		gap: 10px;
	}

	.video-play-button p{
		font-size: 14px;
	}

	.hero-footer-item{
		width: 100%;
	}

	.hero-footer-item-content h2{
		font-size: 18px;
	}

	.hero-client-box{
		width: 100%;
		gap: 15px;
	}

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

	.our-scrolling-ticker{
        padding: 15px 0;
    }

	.scrolling-ticker-box{
        --gap: 15px;
    }

	.scrolling-content span{
        font-size: 20px;
    }

	.about-image-box{
		background-position: top 15px right 30px;
    	background-size: 45px auto;
	}

	.about-us-image-box-1 .about-us-image{
		margin-right: -140px;
	}

	.about-us-image-box-2 .about-us-image figure{
		border-width: 3px;
	}

	.about-experience-item{
		gap: 10px;
		border-radius: 14px;
		margin: 20px -120px 20px 20px;
		padding: 15px;
	}

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

	.about-experience-item-content h2{
		font-size: 18px;
	}

	.about-us-body-image{
		width: 100%;
	}

	.about-us-body-image figure,
	.about-us-body-image img{
		height: auto;
	}

	.about-us-body-list{
		width: 100%;
		padding: 10px;
	}

	.about-us-footer{
		gap: 15px;
	}

	.service-item{
		padding: 20px;
		min-height: auto;
	}

	.service-item-content-box{
		gap: 20px;
	}

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

	.service-item-title h2{
		font-size: 18px;
	}

	.what-we-item-list{
		gap: 20px;
	}

	.what-we-item{
		width: 100%;
		padding: 15px;
	}

	.what-we-item-content h3{
		font-size: 18px;
	}

	.what-we-footer{
		gap: 20px;
	}

	.what-we-image{
		padding: 10px 10px 0 0;
	}

	.what-we-image::before{
		width: calc(100% - 20px);
		height: calc(100% - 20px);
		left: 20px;
		bottom: 20px;
	}

	.what-we-image img{
        aspect-ratio: 1 / 0.9;
    }

	.what-we-image-box-content{
		left: 20px;
		bottom: 20px;
		right: 20px;
	}

	.what-we-image-box-content h3{
		font-size: 16px;
	}

	.why-choose-info-box .watch-video-circle{
		top: 20px;
		right: 20px;
	}

	.why-choose-info-box .watch-video-circle img{
		max-width: 80px;
	}

	.why-choose-info-list ul{
		gap: 10px;
	}

	.why-choose-info-list ul li{
		font-size: 14px;
		padding: 6px 12px;
	}

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

	.why-choose-item-header,
	.why-choose-item-content{
		max-width: 100%;
	}

	.why-choose-item-title h2{
		font-size: 26px;
	}

	.project-item-content h2{
		font-size: 18px;
	}
	
	.features-item{
		width: 100%;
		padding: 20px;
		gap: 20px;
	}

	.features-item-iamge figure{
        margin: 0 auto;
    }

	.features-item-iamge figure{
        max-width: 130px;
    }

	.pricing-item{
        padding: 20px;
    }

	.pricing-item-header .pricing-item-title{
		font-size: 18px;
	}

	.pricing-item-header h2{
        font-size: 26px;
    }

	.pricing-item-header h2 sub{
		font-size: 14px;
	}

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

	.pricing-item-list h3{
		font-size: 18px;
		margin-bottom: 15px;
	}

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

	.pricing-benefit-list ul{
        gap: 10px 15px;
    }

	.pricing-benefit-list ul li{
		font-size: 14px;
	}

	.pricing-benefit-list ul li img{
		margin-right: 5px;
	}

	.integrations-social-icon-list,
	.integrations-social-icon-list ul{
        gap: 10px;
    }

	.integrations-social-icon-list ul li a,
	.integrations-add-more-item{
        height: 40px;
        width: 40px;
    }

	.integrations-social-icon-list ul li a i,
	.integrations-add-more-item i{
		font-size: 20px;
	}

	.integrations-counter-item-list{
		gap: 30px 20px;
		margin-top: 30px;
		padding-top: 30px;
	}

	.integrations-counter-item{
		width: calc(50% - 10px);
	}

	.integrations-counter-item:before{
		right: -10px;
	}

	.integrations-counter-item:nth-child(4n + 4):before{
		display: block;
	}

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

	.integrations-counter-item h2{
        font-size: 26px;
    }

	.integrations-counter-item p{
		font-size: 14px;
        margin: 5px 0 0;
    }

	.how-work-image figure img{
		aspect-ratio: 1 / 1.2;
	}

	.how-work-rating-box{
		left: 15px;
    	bottom: 15px;
    	right: 15px;
		padding: 15px;
		max-width: 100%;
	}

	.how-work-rating-header h2{
		font-size: 22px;
	}

	.how-work-rating-info-content{
		margin-top: 10px;
	}

	.how-work-item{
		padding: 20px;
	}

	.how-work-item-no h2{
		font-size: 22px;
	}

	.how-work-item-content{
		max-width: 100%;
	}

	.how-work-item-content h3{
		font-size: 18px;
	}

	.how-work-item .icon-box{
		top: -15px;
    	right: -15px;
	}

	.how-work-item .icon-box img{
		max-width: 60px;
	}

	.testimonial-item{
		min-height: auto;
		gap: 20px;
		padding: 20px;
	}

	.testimonial-item-content h2{
		font-size: 18px;
		margin-bottom: 15px;
	}

	.testimonial-item-author{
		padding-top: 20px;
	}

	.testimonial-author-content h2{
		font-size: 18px;
	}

	.post-featured-image{
		margin-bottom: 15px;
	}

	.post-item-content h2{
		font-size: 18px;
	}

	.post-item-content{
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.main-footer:before{
        height: 110px;
    }

	.footer-location-info-item{
		padding-top: 20px;
		margin-top: 20px;
	}

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

	.footer-links h2{
		font-size: 18px;
		margin-bottom: 15px;
	}

	.footer-contact-item ul li{
		font-size: 18px;
	}

	.footer-cta-box{
		padding: 15px;
		margin-top: 30px;
	}

	.footer-cta-content h3{
		font-size: 18px;
	}

	.footer-newsletter-form .btn-default{
		font-size: 0;
		padding: 23px;
	}

	.footer-newsletter-form .btn-default::before{
		right: 12px;
	}

	.footer-copyright{
        padding: 30px 0 15px;
		gap: 15px;
    }

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

	.trusted-company-slider-box{
		margin-top: 10px;
	}

	.approach-item,
	.approach-cta-item{
        padding: 20px;
		gap: 20px;
    }

	.approach-cta-item-body{
		gap: 20px;
	}

	.approach-item-header .icon-box{
        margin-bottom: 20px;
    }

	.approach-item-content h3{
		font-size: 18px;
	}

	.approach-item-list{
		padding-top: 20px;
	}

	.approach-cta-item-content h3{
		font-size: 18px;
	}

	.approach-cta-item-content ul li{
		font-size: 18px;
	}

	.trusted-company-slider-content{
        margin-bottom: 20px;
		gap: 10px;
    }

	.intro-video-image img{
        aspect-ratio: 1 / 0.8;
    }

	.team-item-content h2{
		font-size: 18px;
	}

	.faqs-iamge img{
        aspect-ratio: 1 / 1;
    }

	.google-rating-box{
        right: 20px;
        bottom: 20px;
		padding: 15px;
    }

	.google-rating-box .icon-box img{
		max-width: 40px;
	}

	.google-rating-info{
		width: calc(100% - 55px);
	}

	.google-rating-info-header h2{
		font-size: 20px;
	}

	.google-rating-info-content p{
		margin-top: 5px;
	}

	.faq-accordion .accordion-header .accordion-button{
        padding: 12px 50px 12px 15px;
		font-size: 16px;
    }

	.faq-accordion .accordion-item .accordion-button::after,
	.faq-accordion .accordion-item .accordion-button.collapsed::after{
        height: 30px;
        width: 30px;
        font-size: 18px;
    }

	.faq-accordion .accordion-item .accordion-body{
        padding: 12px 15px;
    }

	.page-category-list .page-category-list-title{
        font-size: 18px;
    }

	.sidebar-cta-box{
        min-height: 280px;
    }

	.sidebar-cta-body h2{
        font-size: 18px;
    }

    .sidebar-cta-contact-btn{
        margin-top: 20px;
    }

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

	.page-single-image img{
        aspect-ratio: 1 / 0.7;
    }

    .service-entry h2{
        font-size: 26px;
    }

    .service-offer-list{
        margin-top: 20px;
    }

    .service-offer-list ul li{
        margin-bottom: 15px;
    }

    .service-offer-list ul li span{
        font-size: 18px;
    }

    .service-offer-images{
        gap: 20px;
    }

    .service-offer-image{
        width: 100%;
    }

    .service-benefits-list{
        gap: 20px;
    }

    .service-benefits-list-item{
        width: 100%;
        padding: 15px;
    }

    .service-benefits-list-title h3{
        font-size: 18px;
    }

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

	.post-image img{
		aspect-ratio: 1 / 0.7;
	}

	.post-entry blockquote{
		Background-size: 30px;
		padding: 60px 20px 20px 20px;
	}

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

	.post-entry h2{
		font-size: 26px;
	}
	
	.tag-links{
		font-size: 18px;
	}

	.project-entry h2{
        font-size: 26px;
    }

    .project-entry-implemented-image{
        width: 100%;
    }

	.project-entry-implemented-image figure,
	.project-entry-implemented-image figure img{
		height: auto;
	}

    .project-entry-implemented-accordion{
        width: 100%;
    }

    .project-entry-implemented-accordion .accordion-header .accordion-button{
        font-size: 18px;
    }

	.project-entry-implemented-accordion .accordion-item .accordion-body{
		padding: 15px 0 0;
	}

    .project-entry-process-item{
        width: 100%;
    }

	.project-entry-process-item-header{
		margin-bottom: 20px;
	}

    .project-entry h3{
        font-size: 18px;
    }

	.team-single-image figure img{
        aspect-ratio: 1 / 1.1;
    }

	.team-about-content{
        padding: 20px;
    }

    .team-contact-list ul li{
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

    .team-contact-list ul li span{
        font-size: 16px;
    }

	.team-contact-list .member-social-list{
		gap: 10px;
	}

    .team-contact-list .member-social-list a{
        height: 34px;
        width: 34px;
    }

    .team-contact-list .member-social-list a i{
        font-size: 16px;
    }

    .team-member-skill-list{
        padding: 20px;
    }

    .skills-progress-bar{
        margin-bottom: 20px;
    }

    .skills-progress-bar .skill-data{
        margin-bottom: 15px;
    }

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

	.google-map-iframe{
		height: 350px;
	}
}

/************************************/
/***  34. Home - Version 2 css    ***/
/************************************/

header.main-header.main-header-gold{
	top: 0;
	left: 0;
	right: 0;
}

header.main-header.main-header-gold .header-sticky{
	max-width: 100%;
	background: transparent;
	border-bottom: 1px solid var(--dark-divider-color);
	border-radius: 0;
}

header.main-header.main-header-gold .header-sticky.hide{
	top: 100%;
	transform: initial;
}

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

header.main-header.main-header-gold .navbar{
	padding: 30px 0;
}

header.main-header.main-header-gold .main-menu ul li a{
	color: var(--white-color);
}

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

.main-menu ul li a,
.main-menu ul li a:hover,
.main-menu ul li a:focus,
.main-menu ul li a:active,
.main-menu ul li a.active,
.navbar-nav .nav-link,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:active,
.navbar-nav .nav-link.active {
    font-size: 15px !important;
}
/* Submenu font size */
.main-menu .navbar-nav > li.submenu > ul > li > a,
.main-menu .navbar-nav > li.submenu > ul > li > a:hover {
    font-size: 13px !important;
}
header.main-header.main-header-gold .main-menu ul ul li a{
	color: var(--white-color);
}

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

.header-action-gold{
	display: flex;
	align-items: center;
	gap: 30px;
}

.header-sidebar-btn-gold .btn-popup{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	z-index: 100;
}

.header-sidebar-btn-gold .offcanvas-backdrop{
	z-index: 100;
}

.header-sidebar-btn-gold .btn-popup{
	padding: 0;
	transition: all 0.4s ease-in-out;
}

.header-sidebar-btn-gold .btn-popup img{
	width: 100%;
	max-width: 40px;
}

body:has(:not(.offcanvas)){
	padding-right: initial !important;
}

body:has(.offcanvas){
	padding-right: 0 !important;
}

.header-sidebar-btn-gold .offcanvas{
	position: fixed;
	top: 0;
	bottom: 0;
	left: auto;
	right: -15px;
	background: var(--accent-color) !important;
	border-radius: 0;
	opacity: 100%;
	width: 100% !important;
	height: 100% !important;
	max-width: 400px;
	min-height: 100vh;
	border: none;
	padding: 110px 40px 40px;
	transform: translateX(100%) !important;
	justify-content: center;
	z-index: 101;
	transition: all 0.3s ease-in-out !important;
}

.offcanvas.show:not(.hiding),
.offcanvas.showing{
    transform: translateX(0) !important;
}

.navbar-expand-lg .offcanvas .offcanvas-body{
	text-align: center;
	display: block;
}

.header-sidebar-btn-gold .offcanvas .btn-close{
	position: absolute;
	top: 35px;
	right: 35px;
	background-color: var(--white-color);
	border-radius: 50%;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 100%;
	box-shadow: none;
	padding: 0;
	transition: all 0.4s ease-in-out;
}

.header-contact-box-gold{
	text-align: center;
	border-bottom: 1px solid var(--dark-divider-color);
	padding-bottom: 30px;
	margin-bottom: 30px;
}

.header-contact-box-gold:last-child{
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

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

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

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

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

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

.header-contact-box-content-gold h3{
	font-size: 24px;
	text-transform: capitalize;
	color: var(--white-color);
	margin-bottom: 10px;
}

.header-contact-box-content-gold p{
	color: var(--white-color);
	margin: 0;
}

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

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

.header-social-links{
	border-top: 1px solid var(--dark-divider-color);
	margin-top: 30px;
	padding-top: 30px;
	text-align: center;
}

.header-social-links h2{
	font-size: 22px;
	color: var(--white-color);
	text-transform: capitalize;
	margin-bottom: 20px;
}

.header-social-links ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
}

.header-social-links ul li{
	margin: 0;
}

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

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

.header-social-links ul li a i{
	color: inherit;
}

.hero-gold{
	position: relative;
    padding: 120px 0 70px;
    z-index: 1;
}

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

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

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

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

.hero-sub-heading-gold{
	display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--dark-divider-color);
    border-radius: 100px;
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    padding: 5px 16px 5px 5px;
    margin-bottom: 15px;
}

.hero-sub-heading-gold .satisfy-client-image figure img{
	max-width: 28px;
}

.hero-satisfy-client-content-gold p{
	font-size: 16px;
    font-weight: 600;
    color: var(--white-color);
    margin-bottom: 0;
}

.hero-btn-gold{
	display: flex;
    flex-wrap: wrap;
	align-items: center;
    gap: 20px 30px;
}

.hero-info-list-gold{
	border-top: 1px solid var(--dark-divider-color);
    padding-top: 40px;
    margin-top: 140px;
}

.hero-info-list-gold ul{
	list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px 1vw;
}

.hero-info-list-gold ul li{
	font-size: 15px;
	line-height: 1.4em;
    color: var(--white-color);
    display: flex;
    align-items: center;
    gap: 15px;
}

.hero-info-list-gold ul li img{
	width: 100%;
    max-width: 34px;
}

.about-us-gold{
	padding: 120px 0;
}

.about-us-circle-gold{
	text-align: right;
}

.about-us-circle-gold a{
	display: block;
	border-radius: 50%;
}

.about-us-circle-gold a img{
    width: 100%;
    max-width: 120px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
    border-radius: 50%;
    animation: infiniterotategold 20s infinite linear;
}

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

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

.about-us-image-gold{
	height: 100%;
}

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

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

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

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

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

.about-us-item-gold .icon-box{
	position: relative;
    height: 50px;
    width: 50px;
    background-color: var(--accent-color);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 25px;
}

.about-us-item-gold .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--primary-color);
	border-radius: 10px;
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.about-us-item-gold:hover .icon-box::before{
	transform: rotate(0) scale(1);
}

.about-us-item-gold .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	z-index: 1;
}

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

.about-us-item-content-gold p{
	margin: 10px 0 0;
}

.about-us-content-body-gold{
	display: flex;
	flex-wrap: wrap;
    gap: 30px;
    border-top: 1px solid var(--divider-color);
    padding-top: 40px;
    margin-top: 40px;
}

.about-us-body-content-gold{
	width: calc(47% - 15px);
	align-content: center;
}

.about-us-body-list-gold ul{
	list-style: none;
    margin: 0;
    padding: 0;
}

.about-us-body-list-gold ul li{
	position: relative;
    line-height: 1.5em;
    padding-left: 25px;
    margin-bottom: 20px;
}

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

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

.about-us-btn-gold{
	border-top: 1px solid var(--divider-color);
	padding-top: 30px;
	margin-top: 30px;
}

.about-us-body-image-gold{
	width: calc(53% - 15px);
}

.about-us-body-image-gold figure{
	display: block;
    height: 100%;
    border-radius: 20px;
}

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

.our-services-gold{
	background-image: url('../images/service-bg-image.png');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: auto;
	padding: 120px 0;
}

.service-item-gold{
	position: relative;
    border-radius: 20px;
    min-height: 400px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 34px 30px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(12, 22, 58, 0.75) 0%, rgba(6, 12, 38, 0.92) 100%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    transition: all 0.45s cubic-bezier(.2,.8,.2,1);
}

.service-item-gold::before{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--bg-color);
    border-radius: 20px;
    width: 100%;
    height: 100%;
    transition: all 0.5s ease-in-out;
    z-index: 1;
}

.service-item-gold.active::before,
.service-item-gold:hover::before{
	transform: translate(100%, -100%);
}

.service-item-gold:hover {
    border-color: rgba(54, 98, 204, 0.65);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55), 0 0 25px rgba(40, 96, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transform: translateY(-6px);
}

.service-item-image-gold{
	position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: all 0.4s ease-in-out;
}

.service-item-gold.active .service-item-image-gold,
.service-item-gold:hover .service-item-image-gold{
	opacity: 1;
}

.service-item-image-gold::after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, rgba(6, 12, 38, 0.65) 0%, rgba(3, 7, 26, 0.94) 100%);
	opacity: 90%;
}

.service-item-image-gold figure{
	display: block;
	height: 100%;
}

.service-item-image-gold figure img{
    width: 100%;
	height: 100%;
	object-fit: cover;
}

.service-item-content-box-gold{
	position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    z-index: 2;
}

.service-item-content-box-gold .icon-box{
	position: relative;
    height: 60px;
    width: 60px;
    background: linear-gradient(135deg, rgba(40, 96, 255, 0.9) 0%, rgba(20, 50, 160, 0.9) 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(40, 96, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: all 0.4s ease-in-out;
    overflow: hidden;
}

.service-item-content-box-gold .icon-box::before{
	display: none !important;
}

.service-item-gold.active .service-item-content-box-gold .icon-box::before,
.service-item-gold:hover .service-item-content-box-gold .icon-box::before{
	display: none !important;
}

.service-item-content-box-gold .icon-box img{
	position: relative;
	width: auto;
	height: auto;
	max-width: 32px;
	max-height: 32px;
	object-fit: contain;
	transition: all 0.4s ease-in-out;
	z-index: 1;
	filter: brightness(0) invert(1) !important;
}

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

.service-item-content-gold h2{
	font-size: 21px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.2px;
	margin-bottom: 12px;
	color: var(--accent-color);
	transition: all 0.4s ease-in-out;
}

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

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

.service-item-content-gold p{
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--accent-color);
	transition: all 0.4s ease-in-out;
}

.service-item-gold.active .service-item-content-gold p,
.service-item-gold:hover .service-item-content-gold p{
	color: rgba(255, 255, 255, 0.9);
}

.service-item-btn-gold{
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: 20px;
	margin-top: 20px;
	transition: all 0.4s ease-in-out;
}

.service-item-btn-gold .readmore-btn{
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.2px;
	color: var(--accent-color);
	transition: all 0.4s ease-in-out;
}

.service-item-gold.active .service-item-btn-gold,
.service-item-gold:hover .service-item-btn-gold{
	border-color: rgba(255, 255, 255, 0.2);
}

.service-item-gold.active .service-item-btn-gold .readmore-btn,
.service-item-gold:hover .service-item-btn-gold .readmore-btn{
	color: #ffffff;
}

.why-choose-us-gold{
	padding: 80px 0;
	background: var(--primary-color);
	background-image: radial-gradient(circle at 50% 50%, rgba(54, 98, 204, 0.15) 0%, transparent 75%);
}

.why-choose-image-box-gold{
	position: relative;
	padding: 0 35px 50px;
}

.why-choose-image-gold{
	position: relative;
    z-index: 0;
}

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

.why-choose-image-gold figure:before{
	content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(243, 246, 252, 0.00) 0%, #F3F6FC 100%);
    width: 100%;
    height: 140px;
    z-index: 1;
}

.why-choose-image-gold figure img{
	width: 100%;
    aspect-ratio: 1 / 1.406;
    object-fit: cover;
    border-radius: 20px;
}

.why-choose-image-box-gold .about-us-circle-gold{
	position: absolute;
    top: 20px;
    right: 0;
	border: 6px solid var(--bg-color);
    border-radius: 50%;
}

.why-choose-cta-box-gold{
	position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    background-color: var(--white-color);
    box-shadow: 0 0 20px 0 rgba(41, 37, 36, 0.06);
    border-radius: 10px;
    gap: 15px;
    padding: 20px;
    animation: cta-box-move 3s infinite linear;
}

@keyframes cta-box-move{
	50%{
		transform: translateX(20px);
    }
}

.why-choose-cta-box-gold .icon-box{
	position: relative;
    height: 50px;
    width: 50px;
    background-color: var(--accent-color);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.why-choose-cta-box-gold .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--primary-color);
	border-radius: 10px;
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.why-choose-cta-box-gold:hover .icon-box::before{
	transform: rotate(0) scale(1);
}

.why-choose-cta-box-gold .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	z-index: 1;
}

.why-choose-cta-box-content-gold{
	width: calc(100% - 65px);
}

.why-choose-cta-box-content-gold h2{
	font-size: 20px;
}

.why-choose-cta-box-content-gold p{
	color: inherit;
	margin: 5px 0 0;
}

.why-choose-cta-box-content-gold p a{
	color: var(--text-color);
	transition: all 0.4s ease-in-out;
}

.why-choose-cta-box-content-gold p a:hover{
	color: var(--accent-color);
}

.why-choose-body-gold{
	display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.why-choose-body-item-list-gold{
	width: calc(60% - 15px);
    background: var(--secondary-color);
    border-radius: 20px;
    padding: 35px;
}

.why-choose-body-item-gold{
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 40px;
	margin-bottom: 40px;
}

.why-choose-body-item-gold:last-child{
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

.why-choose-body-item-gold h3{
	font-size: 20px;
}

.why-choose-body-item-gold p{
	margin: 10px 0 0;
}

.why-choose-review-box-gold{
	width: calc(40% - 15px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
    background: var(--secondary-color);
    border-radius: 20px;
    padding: 35px;
}

.why-choose-review-box-gold .satisfy-client-image figure img{
	max-width: 40px;
}

.why-choose-review-box-gold .satisfy-client-image.add-more{
	height: 42px;
	width: 42px;
}

.why-choose-review-content-box-gold{
	border-top: 1px solid var(--divider-color);
	padding-top: 30px;
}

.why-choose-review-header-gold{
	display: flex;
    align-items: center;
	gap: 5px;
	margin-bottom: 10px;
}

.why-choose-rating-star-gold{
	line-height: normal;
}

.why-choose-rating-star-gold i{
	font-size: 20px;
    color: var(--accent-color);
}

.why-choose-review-header-gold h2{
	font-size: 30px;
}

.why-choose-review-header-gold h2 sub{
	font-size: 16px;
}

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

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

.why-choose-slider-box-gold{
	margin-top: 80px;
}

.why-choose-slider-content-gold{
	color: rgba(255, 255, 255, 0.9);
	font-weight: 600;
	display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 40px;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 14px;
}

.why-choose-slider-content-gold hr{
	height: 1px;
	flex-grow: 1;
    background: rgba(255, 255, 255, 0.18);
    border: none;
    opacity: 1;
    margin: 0;
}

.why-choose-logo-slider-gold{
	max-width: 1100px;
    margin: 0 auto;
    padding: 20px 0;
}

.why-choose-logo-gold{
	text-align: center;
    height: 108px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    transition: transform 0.3s ease;
}

.why-choose-logo-gold:hover{
    transform: translateY(-4px);
}
/* Logo Box */
.why-choose-logo-gold{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;   /* Pehle 130px tha */
    padding: 20px;
}

/* Logo Image */
.why-choose-logo-gold img{
    width: auto;
    height: auto;

    max-width: 360px;   /* Bigger width */
    max-height: 150px;  /* Bigger height */

    object-fit: contain;

    filter: brightness(0) invert(1) opacity(0.9);

    transition: all 0.35s ease;
}

/* Hover Effect */
.why-choose-logo-gold:hover img{
    transform: scale(1.12);
    filter: brightness(0) invert(1);
}
.why-choose-logo-gold:hover img{
    filter: brightness(0) invert(1) opacity(1);
}





.why-choose-logo-slider-gold .swiper-wrapper{

    align-items:center;

}





.why-choose-logo-slider-gold .swiper-slide{

    height:auto;

    display:flex;

    align-items:center;

}





@media(max-width:1199px){

.why-choose-logo-gold{
    height:170px;
    padding:20px;
}

.why-choose-logo-gold img{
    width:auto;
    height:auto;
    max-width:280px;
    max-height:130px;
    object-fit:contain;
}

}

@media(max-width:991px){

.why-choose-logo-gold{
    height:160px;
    padding:18px;
}

.why-choose-logo-gold img{
    width:auto;
    height:auto;
    max-width:250px;
    max-height:115px;
    object-fit:contain;
}

}

@media(max-width:767px){

.why-choose-slider-box-gold{
    margin-top:50px;
}

.why-choose-logo-slider-gold{
    padding:15px 0;
}

.why-choose-logo-gold{
    height:150px;
    padding:18px;
}

.why-choose-logo-gold img{
    width:auto;
    height:auto;
    max-width:230px;
    max-height:105px;
    object-fit:contain;
}

}

@media(max-width:575px){

.why-choose-logo-gold{
    height:145px;
    padding:16px;
}

.why-choose-logo-gold img{
    max-width:210px;
    max-height:95px;
}

}

@media(max-width:425px){

.why-choose-logo-gold{
    height:135px;
    padding:14px;
}

.why-choose-logo-gold img{
    max-width:185px;
    max-height:85px;
}

}

@media(max-width:360px){

.why-choose-logo-gold{
    height:125px;
    padding:12px;
}

.why-choose-logo-gold img{
    max-width:170px;
    max-height:75px;
}

}
/* =========================================
   VENDOR LOGOS
   CARD SIZE SAME — ONLY LOGO BIGGER
   ========================================= */

.leadership-logos-grid .how-works-item-no-gold {
    /* Existing card size/layout untouched */
    height: auto !important;
    padding: 0 !important;
}


/* ONLY IMAGE SIZE */
.leadership-logos-grid .how-works-item-no-gold img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: 150px !important;

    object-fit: contain !important;

    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;

    /* Only logo gets bigger */
    transform: scale(1.18) !important;
    transform-origin: center center !important;

    -webkit-transform: scale(1.18) !important;
    -webkit-transform-origin: center center !important;
}


/* =========================================
   LAPTOP
   ========================================= */

@media (max-width: 1199px) {

    .leadership-logos-grid .how-works-item-no-gold img {
        max-height: 140px !important;
        transform: scale(1.16) !important;
        -webkit-transform: scale(1.16) !important;
    }
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 991px) {

    .leadership-logos-grid .how-works-item-no-gold img {
        max-height: 135px !important;
        transform: scale(1.15) !important;
        -webkit-transform: scale(1.15) !important;
    }
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

    .leadership-logos-grid .how-works-item-no-gold img {
        max-height: 125px !important;
        transform: scale(1.13) !important;
        -webkit-transform: scale(1.13) !important;
    }
}


/* =========================================
   SMALL MOBILE
   ========================================= */

@media (max-width: 575px) {

    .leadership-logos-grid .how-works-item-no-gold img {
        max-height: 115px !important;
        transform: scale(1.12) !important;
        -webkit-transform: scale(1.12) !important;
    }
}/* =========================================================
   CERTIFICATION LOGOS - BIGGER SIZE
   Background stays completely transparent
========================================================= */

.why-choose-logo-gold {
    height: 160px !important;
    padding: 8px !important;
}

.why-choose-logo-gold img {
    width: auto !important;
    height: auto !important;

    max-width: 300px !important;
    max-height: 145px !important;

    object-fit: contain !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    filter: none !important;
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199px) {

    .why-choose-logo-gold {
        height: 150px !important;
        padding: 6px !important;
    }

    .why-choose-logo-gold img {
        max-width: 280px !important;
        max-height: 135px !important;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .why-choose-logo-gold {
        height: 145px !important;
        padding: 5px !important;
    }

    .why-choose-logo-gold img {
        max-width: 255px !important;
        max-height: 125px !important;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .why-choose-logo-gold {
        height: 135px !important;
        padding: 4px !important;
    }

    .why-choose-logo-gold img {
        max-width: 235px !important;
        max-height: 115px !important;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575px) {

    .why-choose-logo-gold {
        height: 125px !important;
        padding: 3px !important;
    }

    .why-choose-logo-gold img {
        max-width: 215px !important;
        max-height: 105px !important;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 425px) {

    .why-choose-logo-gold {
        height: 115px !important;
        padding: 2px !important;
    }

    .why-choose-logo-gold img {
        max-width: 195px !important;
        max-height: 95px !important;
    }
}


/* =========================================================
   EXTRA SMALL
========================================================= */

@media (max-width: 360px) {

    .why-choose-logo-gold {
        height: 110px !important;
        padding: 2px !important;
    }

    .why-choose-logo-gold img {
        max-width: 180px !important;
        max-height: 88px !important;
    }
}


/* =========================================================
   Full image in cards in news and announcement home page section start
========================================================= */

.project-item-slider-gold .project-item-image-gold {
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.project-item-slider-gold .project-item-image-gold figure.image-anime {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.project-item-slider-gold .project-item-image-gold img {
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    display: block !important;
    object-fit: fill !important;
    object-position: center top !important;
}
/* =========================================================
   Full image in cards in news and announcement home page section end
========================================================= */




.our-projects-gold{
	padding: 120px 0;
}

.project-item-slider-gold{
	height: 100%;
}

.project-item-slider-gold .swiper{
	padding-bottom: 70px;
	height: 100%;
}

.project-item-gold{
	background: var(--secondary-color);
    border-radius: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 10px;
    padding: 10px;
	height: 100%;
}

.project-item-image-gold{
	position: relative;
	border-radius: 20px;
	overflow: hidden;
}

.project-item-image-gold figure{
	display: block;
}

.project-item-image-gold figure img{
	width: 100%;
    aspect-ratio: 1 / 0.731;
    object-fit: cover;
    transition: all 0.6s ease-in-out;
}

.project-item-gold:hover .project-item-image-gold figure img{
	transform: scale(1.06);
}

.project-item-btn-gold{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
    z-index: 1;
}

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

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

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

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

.project-item-btn-gold a:hover img{
	transform: rotate(45deg);
	filter: brightness(0) invert(0);
}

.Project-item-body-gold{
	padding: 20px;
}

.project-item-meta-gold{
	margin-bottom: 20px;
}

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

.project-item-meta-gold ul li a{
	display: block;
	font-size: 14px;
	font-weight: 500;
    border: 1px solid var(--divider-color);
    color: var(--primary-color);
    padding: 6px 16px 6px 16px;
    border-radius: 100px;
}

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

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

.project-item-slider-gold .project-pagination-gold{
	position: absolute;
	bottom: 0;
	text-align: center;
}

.project-item-slider-gold .project-pagination-gold .swiper-pagination-bullet{
    height: 10px;
    width: 10px;
    background: var(--divider-color);
	opacity: 1;
    margin: 0 5px;
	border-radius: 10px;
	transition: all 0.4s ease-in-out;
}

.project-item-slider-gold .project-pagination-gold .swiper-pagination-bullet-active{
	background: var(--accent-color);
	width: 34px;
}

.our-projects-gold .section-footer-text.section-satisfy-img{
	margin-top: 40px;
}

.our-features-gold{
	padding: 120px 0;
}

.features-item-gold{
	background-color: var(--bg-color);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    padding: 40px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.features-item-header-gold .icon-box{
	position: relative;
    height: 50px;
    width: 50px;
    background-color: var(--accent-color);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 25px;
}

.features-item-header-gold .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--primary-color);
	border-radius: 10px;
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.features-item-gold:hover .features-item-header-gold .icon-box::before{
	transform: rotate(0) scale(1);
}

.features-item-header-gold .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	z-index: 1;
}

.features-item-content-gold h2{
	font-size: 20px;
}

.features-item-content-gold p{
	margin: 10px 0 0;
}

.features-item-list-gold{
	border-top: 1px solid var(--divider-color);
	padding-top: 30px;
}

.features-item-list-gold ul{
	list-style: none;
    margin: 0;
    padding: 0;
}

.features-item-list-gold ul li{
	position: relative;
    line-height: 1.5em;
    padding-left: 25px;
    margin-bottom: 20px;
}

.features-item-list-gold ul li:last-child{
	margin-bottom: 0;
}

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

.features-info-box-gold{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.features-info-item-gold{
	background-color: var(--primary-color);
    border-radius: 20px;
    display: flex;
	flex-wrap: wrap;
    padding: 30px;
	overflow: hidden;
}

.features-info-content-gold{
	width: 79%;
}

.features-info-content-gold h2{
	font-size: 18px;
	line-height: 1.4em;
	color: var(--white-color);
	margin-bottom: 30px;
}

.features-info-content-gold a{
	color: var(--white-color);
	font-weight: 600;
	text-decoration: underline;
	transition: all 0.4s ease-in-out;
}

.features-info-content-gold a:hover{
	color: var(--accent-color);
}

.features-info-image-gold{
	width: 21%;
	align-content: end;
}

.features-info-image-gold figure{
	max-width: 94px;
	display: block;
    border-radius: 10px;
	margin-bottom: -60px;
	margin-left: -20px;
}

.features-info-image-gold figure img{
	width: 100%;
    aspect-ratio: 1 / 1.49;
    object-fit: cover;
    border-radius: 10px;
}

.features-client-box-gold{
	min-height: 305px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	background-color: var(--bg-color);
    border-radius: 20px;
    padding: 30px;
}

.features-awards-image-gold{
	margin-bottom: 20px;
}

.features-awards-image-gold figure{
	max-width: 100px;
	display: block;
	border-radius: 20px;
}

.features-awards-image-gold figure img{
	width: 100%;
	border-radius: 20px;
}

.features-client-box-content-gold h2{
	font-size: 20px;
}

.features-client-box-body-gold{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	border-top: 1px solid var(--divider-color);
	padding-top: 30px;
}

.features-client-box-body-gold .satisfy-client-images{
	width: calc(40% - 5px);
}

.features-client-body-content-gold{
	width: calc(60% - 5px);
	display: flex;
	align-items: center;
	gap: 10px;
}

.features-client-body-content-gold h2{
	min-width: 100px;
	font-size: 38px;
}

.features-client-body-content-gold p{
	max-width: 100px;
	line-height: normal;
	margin: 0;
}

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

.features-item-image-gold figure{
	display: block;
    border-radius: 20px;
    height: 100%;
}

.features-item-image-gold figure img{
	width: 100%;
	height: 100%;
    aspect-ratio: 1 / 1.201;
    object-fit: cover;
    border-radius: 20px;
}

.core-feature-footer-gold{
	max-width: 900px;
	margin: 30px auto 0;
}

.core-feature-footer-list-gold ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	list-style: none;
	padding: 0;
	margin: 0 auto;
}

.core-feature-footer-list-gold ul li{
	position: relative;
    background-color: var(--bg-color);
	font-weight: 500;
	line-height: 1.25em;
    color: var(--primary-color);
    border-radius: 100px;
    padding: 10px 16px 10px 32px;
	transition: all 0.4s ease-in-out;
}

.core-feature-footer-list-gold ul li:hover{
	background: var(--accent-color);
	color: var(--white-color);
}

.core-feature-footer-list-gold ul li::before{
	content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--accent-color);
    border-radius: 50%;
    width: 6px;
    height: 6px;
	transition: all 0.4s ease-in-out;
}

.core-feature-footer-list-gold ul li:hover::before{
	background: var(--white-color);
}

.our-pricing-gold{
	padding: 100px 0;
}

.pricing-item-gold{
	background-color: var(--white-color);
	border-radius: 20px;
	margin-bottom: 30px;
	padding: 10px;
}

.pricing-item-header-gold{
	padding: 25px 30px;
}

.pricing-item-header-gold h2{
	font-size: 20px;
	line-height: 1.4em;
}

.pricing-item-body-gold{
	background-color: var(--bg-color);
	border-radius: 20px;
	padding: 40px;
}

.pricing-item-contant-gold h2{
	font-size: 40px;
	letter-spacing: -0.02em;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 25px;
	padding-bottom: 25px;
}

.pricing-item-contant-gold h2 sub{
	font-size: 16px;
	bottom: 0;
}

.pricing-item-contant-gold p:last-child{
	margin: 0;
}

.pricing-item-btn-gold{
	margin-top: 25px;
}

.pricing-item-list-gold{
	margin-top: 25px;
}

.pricing-item-list-gold h3{
	font-size: 16px;
	line-height: 1.6em;
	margin-bottom: 0;
}

.pricing-item-list-gold ul{
	list-style: none;
	border-top: 1px solid var(--divider-color);
	margin: 20px 0 0 0;
	padding: 20px 0 0 0;
}

.pricing-item-list-gold ul li{
	position: relative;
	line-height: 1.5em;
	margin-bottom: 15px;
	padding-left: 25px;
}

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

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

.pricing-item-gold.highlighted-box{
	background-color: var(--accent-color);
}

.pricing-item-gold.highlighted-box .pricing-item-header-gold h2{
	color: var(--white-color);
}

.pricing-item-gold.highlighted-box .pricing-item-body-gold{
	background-color: var(--secondary-color);
}

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

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

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

.pricing-benefit-list-gold ul li img{
	width: 100%;
	max-width: 20px;
	margin-right: 10px;
}

.how-we-works-gold{
	padding: 120px 0;
}

.how-works-item-list-gold{
	display: flex;
	flex-wrap: wrap;
	gap: 30px 80px;
}

/* =====================================
   LEADERSHIP LOGOS GRID
===================================== */
.leadership-logos-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 24px 0;
}

.leadership-logos-grid .how-works-item-gold {
    width: auto;
    flex: 0 1 calc(25% - 25px);
    min-height: 145px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px 30px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    transition: all 0.4s ease;
}

.leadership-logos-grid .how-works-item-gold::before {
    display: none !important;
}

.leadership-logos-grid .how-works-item-gold:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--accent-color);
    transform: translateY(-6px);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.35), 0 0 20px rgba(40, 96, 255, 0.2);
}

.leadership-logos-grid .how-works-item-no-gold {
    transform: none !important;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.leadership-logos-grid .how-works-item-no-gold img {
    max-width: 280px;
    max-height: 95px;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: brightness(0) invert(1) opacity(0.88);
    transition: filter 0.3s ease, transform 0.3s ease;
}

.leadership-logos-grid .how-works-item-gold:hover .how-works-item-no-gold img {
    filter: brightness(0) invert(1) opacity(1);
    transform: scale(1.05);
}

@media(max-width: 991px) {
    .leadership-logos-grid .how-works-item-gold {
        flex: 0 1 calc(33.33% - 20px);
        min-height: 130px;
        padding: 20px;
    }
    .leadership-logos-grid .how-works-item-no-gold img {
        max-width: 200px;
        max-height: 75px;
    }
}

@media(max-width: 767px) {
    .leadership-logos-grid .how-works-item-gold {
        flex: 0 1 calc(50% - 15px);
        min-height: 120px;
        padding: 16px;
    }
    .leadership-logos-grid .how-works-item-no-gold img {
        max-width: 170px;
        max-height: 65px;
    }
}

.how-works-item-gold{
	position: relative;
	align-content: center;
	min-height: 340px;
	width: calc(33.33% - 53.33px);
	text-align: center;
}

.how-works-item-gold::before{
	content: "";
	position: absolute;
	width: 1px;
	height: 100%;
	top: 0;
	right: -40px;
	background-color: var(--dark-divider-color);
}

.how-works-item-gold:nth-child(3n + 3)::before,
.how-works-item-gold:last-child::before{
	display: none;
}

.how-works-item-no-gold{
	transform: translateY(20px);
	transition: all 0.5s ease-in-out;
}

.how-works-item-gold:hover .how-works-item-no-gold{
	transform: translateY(0);
}

.how-works-item-no-gold h2{
	font-size: 120px;
	line-height: 0.9em;
	letter-spacing: -0.02em;
	background: linear-gradient(0deg, var(--primary-color) 0, rgba(255, 255, 255, 0.2) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-stroke: 2px transparent;
	transition: all 0.5s ease-in-out;
}

.how-works-item-gold:hover .how-works-item-no-gold h2{
	color: transparent;
}

.how-works-item-content-gold{
	position: relative;
	z-index: 1;
}

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

.how-works-item-content-gold p{
	color: var(--white-color);
	margin: 10px 0 0;
}

.how-works-item-content-gold ul{
	list-style: none;
	border-top: 1px solid var(--dark-divider-color);
	padding: 35px 0 0 0;
	margin: 35px 0 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.how-works-item-content-gold ul li{
	display: inline-block;
	position: relative;
	line-height: 1.6em;
	color: var(--white-color);
	padding-left: 20px;
	margin-bottom: 15px;
}

.how-works-item-content-gold ul li:last-child{
	margin-bottom: 0;
}

.how-works-item-content-gold ul li::before{
	content: "";
	position: absolute;
	width: 5px;
	height: 5px;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	background-color: var(--accent-color);
	border-radius: 50%;
}

.how-we-works-gold .section-footer-text{
	margin-top: 60px;
}

.our-testimonials-gold{
	padding: 120px 0;
}

.testimonial-slider-gold,
.testimonial-slider-gold .swiper{
	height: 100%;
}

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

.testimonial-item-gold{
	background-color: var(--secondary-color);
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	padding: 40px;
	min-height: 460px;
	height: 100%;
}

.testimonial-slider-gold .swiper-slide .testimonial-item-gold{
	transform: scale(0.95);
	transition: all 0.4s ease-in-out;
}

.testimonial-slider-gold .swiper-slide.swiper-slide-next .testimonial-item-gold{
	transform: scale(1);
}

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

.testimonial-item-content-gold p{
	font-family: var(--accent-font);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.4em;
	color: var(--primary-color);
	margin-bottom: 20px;
}

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

.testimonial-author-content-gold{
	border-top: 1px solid var(--divider-color);
	padding-top: 40px;
	margin-top: 40px;
}

.testimonial-author-content-gold h2{
	font-size: 20px;
}

.testimonial-author-content-gold p{
	margin: 5px 0 0;
}

.our-testimonials-footer-gold{
	text-align: center;
	margin-top: 60px;
}

.our-testimonials-gold .section-footer-text{
	display: inline-flex;
	border: 1px solid var(--divider-color);
	padding: 10px 20px 10px 10px;
	border-radius: 100px;
	margin: 0;
}

.main-footer-gold{
	position: relative;
	background-image: url(../images/footer-bg-image-1.png);
	padding: 120px 0 0;
}

.main-footer-gold:before{
	position: absolute;
    content: '';
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url(../images/footer-bg-image-2.png);
    background-repeat: repeat-x;
    background-position: right bottom;
    background-size: auto 100%;
    width: 100%;
    height: 200px;
	z-index: 1;
}

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

.about-footer-gold{
	margin-right: 20px;
}

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

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

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

.footer-social-links-gold{
	border-top: 1px solid var(--dark-divider-color);
	padding-top: 30px;
	margin-top: 30px;
}

.footer-social-links-gold h2{
	font-size: 20px;
	color: var(--white-color);
	margin-bottom: 30px;
}

.footer-social-links-gold ul{
	display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-social-links-gold ul li a{
	display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--white-color);
    background: var(--dark-divider-color);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 5px;
    padding: 10px 15px;
    transition: all 0.4s ease-in-out;
}

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

.footer-social-links-gold ul li a i{
	font-size: 20px;
    line-height: normal;
    color: inherit;
}

.footer-newsletter-box-gold{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 30px;
	border-bottom: 1px solid var(--dark-divider-color);
	padding-bottom: 50px;
	margin-bottom: 50px;
}

.footer-newsletter-box-gold .section-title{
	width: calc(100% - 370px);
	margin: 0;
}

.footer-newsletter-box-gold .section-title h2{
	font-size: 40px;
}

.footer-newsletter-form-gold{
	width: 100%;
	max-width: 340px;
}

.footer-newsletter-form-gold .form-group{
	display: flex;
	background-color: var(--dark-divider-color);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
	border-radius: 10px;
	padding: 10px;
}

.footer-newsletter-form-gold .form-group .form-control{
	width: calc(100% - 40px);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5em;
	color: var(--white-color);
	background: transparent;
	border: none;
	border-radius: 0;
	outline: none;
	box-shadow: none;
	padding: 6px 10px;
}

.footer-newsletter-form-gold .form-control::placeholder{
	color: var(--white-color);
	opacity: 40%;
}

.footer-newsletter-form-gold .newsletter-btn-gold{
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--accent-color);
	border: none;
	border-radius: 10px;
	transition: all 0.4s ease-in-out;
}

.footer-newsletter-form-gold .newsletter-btn-gold:hover{
	background-color: var(--white-color);
}

.footer-newsletter-form-gold .newsletter-btn-gold img{
	width: 100%;
	max-width: 24px;
	transition: all 0.4s ease-in-out;
}

.footer-newsletter-form-gold .newsletter-btn-gold:hover img{
	transform: rotate(45deg);
	filter: brightness(0) invert(0);
}

.footer-links-box-gold{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
    gap: 30px;
    background: var(--dark-divider-color);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    border-radius: 20px;
    padding: 40px;
}

.footer-links-gold{
	max-width: 26%;
}

.footer-links-gold h2{
	position: relative;
	display: inline-block;
	font-size: 20px;
	color: var(--white-color);
	margin-bottom: 25px;
	padding-bottom: 25px;
}

.footer-links-gold h2::before{
	content: ''; 
	position: absolute;
	bottom: 0;
	left: 0;
	width: 50%; 
	height: 2px; 
	background-color: var(--accent-color);
	transition: all 0.4s ease-in-out;
}

.footer-links-gold:hover h2::before{
	background-color: var(--white-color);
	width: 100%;
}

.footer-links-gold ul{
	margin: 0;
    padding: 0 0 0 20px;
}

.footer-links-gold ul li{
	position: relative;
    color: var(--white-color);
    line-height: 1.5em;
    margin-bottom: 15px;
}

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

.footer-links-gold ul li::marker{
	color: var(--accent-color);
}

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

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

.footer-working-hours-box-gold{
	width: 100%;
	max-width: 40%;
}

.footer-links-gold.footer-working-hours-box-gold ul{
	list-style: none;
    padding-left: 0;
}

.footer-working-hours-box-gold ul li{
	display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.footer-copyright-text-gold{
	text-align: center;
	border-top: 1px solid var(--dark-divider-color);
	padding: 50px 0;
	margin-top: 50px;
}

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

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

	.header-action-gold{
		gap: 20px;
	}

	.header-contact-box-gold{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.header-social-links{
		margin-top: 20px;
		padding-top: 20px;
	}

	.hero-info-list-gold ul{
		gap: 15px 25px;
	}

	.hero-info-list-gold ul li{
		gap: 10px;
	}

	.hero-info-list-gold ul li img{
		max-width: 24px;
	}

	.hero-info-list-gold ul li{
		font-size: 18px;
	}

	.about-us-image-gold{
		max-width: 740px;
		height: auto;
		margin: 0 auto 30px;
	}

	.about-us-image-gold figure,
	.about-us-image-gold figure img{
		height: auto;
	}

	.about-us-image-gold figure img{
		aspect-ratio: 1 / 0.9;
	}

	.about-us-content-gold{
		margin: 0;
	}

	.about-us-content-body-gold{
		margin-top: 30px;
		padding-top: 30px;
	}

	.service-item-gold{
		padding: 30px;
		min-height: 350px;
	}

	.why-choose-image-box-gold{
		max-width: 605px;
		margin: 0 auto 30px;
	}

	.why-choose-body-item-list-gold,
	.why-choose-review-box-gold{
		padding: 30px;
	}

	.why-choose-body-item-gold{
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

	.why-choose-slider-box-gold{
		margin-top: 50px;
	}

	.why-choose-slider-content-gold{
		margin-bottom: 30px;
	}

	.features-item-gold{
		padding: 30px;
	}

	.features-info-item-gold{
		padding: 20px;
	}

	.features-client-box-gold{
		min-height: auto;
		padding: 20px;
	}

	.features-item-image-gold figure img{
		aspect-ratio: 1 / 0.6;
	}

	.how-works-item-list-gold{
		gap: 30px 40px;
	}

	.how-works-item-gold{
		width: calc(50% - 20px);
		min-height: auto;
	}

	.how-works-item-gold::before{
		right: -20px;
	}

	.how-works-item-gold:nth-child(3n + 3)::before{
		display: block;
	}

	.how-works-item-gold:nth-child(2n + 2)::before,
	.how-works-item-gold:last-child::before{
		display: none;
	}

	.testimonial-slider-gold .swiper-slide .testimonial-item-gold{
		transform: scale(1);
	}

	.testimonial-item-gold{
		min-height: 380px;
		padding: 30px;
		gap: 30px;
	}

	.testimonial-author-content-gold{
		padding-top: 30px;
		margin-top: 30px;
	}

	.about-footer-gold{
		margin: 0 0 30px;
	}

	.main-footer-gold:before{
		height: 130px;
	}

	.footer-social-links-gold h2{
		margin-bottom: 20px;
	}

	.footer-newsletter-box-gold{
		padding-bottom: 30px;
    	margin-bottom: 30px;
	}

	.footer-links-box-gold{
		padding: 30px;
	}

	.footer-copyright-text-gold{
		padding: 30px 0;
		margin-top: 30px;
	}
}

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

	header.main-header.main-header-gold .navbar{
		padding: 20px 0;
	}

	.hero-gold{
		padding: 190px 0 60px;
	}

	.hero-sub-heading-gold{
		padding: 5px 12px 5px 5px;
	}

	.hero-info-list-gold{
		padding-top: 30px;
		margin-top: 100px;
	}

	.about-us-gold{
		padding: 60px 0;
	}

	.about-us-circle-gold a img{
		max-width: 100px;
	}

	.about-us-body-list-gold ul li{
		margin-bottom: 15px;
	}

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

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

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

	.why-choose-review-header-gold h2{
		font-size: 26px;
	}

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

	.our-projects-gold{
		padding: 60px 0;
	}

	.project-item-slider-gold .swiper{
		padding-bottom: 50px;
	}

	.Project-item-body-gold{
		padding: 10px;
	}

	.project-item-meta-gold{
		margin-bottom: 15px;
	}

	.our-projects-gold .section-footer-text.section-satisfy-img{
		margin-top: 30px;
	}

	.our-features-gold{
		padding: 60px 0;
	}

	.features-item-list-gold ul li{
		margin-bottom: 10px;
	}

	.features-item-list-gold ul li::before{
		font-size: 16px;
	}

	.features-client-body-content-gold h2{
		min-width: 85px;
		font-size: 34px;
	}

	.core-feature-footer-list-gold ul{
		gap: 15px;
	}

	.core-feature-footer-list-gold ul li{
		font-size: 14px;
		padding: 8px 14px 8px 30px;
	}

	.core-feature-footer-list-gold ul li::before{
		left: 14px;
	}

	.core-feature-footer-gold{
		margin-top: 10px;
	}

	.our-pricing-gold{
		padding: 60px 0;
	}

	.pricing-item-header-gold{
		padding: 10px 20px 20px;
	}

	.pricing-item-body-gold{
		padding: 20px;
	}

	.pricing-item-contant-gold h2{
		font-size: 34px;
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.pricing-item-list-gold ul{
		margin-top: 15px;
		padding-top: 15px;
	}

	.pricing-item-list-gold ul li{
		margin-bottom: 10px;
	}

	.pricing-item-list-gold ul li:before{
		font-size: 16px;
	}

	.pricing-benefit-list-gold ul{
		gap: 15px 30px;
	}

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

	.how-we-works-gold{
		padding: 60px 0;
	}

	.how-works-item-no-gold h2{
		font-size: 100px;
	}

	.how-works-item-content-gold ul{
		margin-top: 25px;
		padding-top: 25px;
	}

	.how-we-works-gold .section-footer-text{
		margin-top: 40px;
	}

	.our-testimonials-gold{
		padding: 60px 0;
	}

	.testimonial-item-content-gold p{
		font-size: 18px;
	}

	.our-testimonials-footer-gold{
		margin-top: 40px;
	}

	.main-footer-gold{
		padding: 60px 0 0;
	}

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

	.footer-social-links-gold ul{
		gap: 10px 15px;
	}

	.footer-social-links-gold ul li a{
		gap: 5px;
		padding: 8px 12px;
	}

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

	.footer-newsletter-box-gold .section-title h2{
		font-size: 34px;
	}

	.footer-links-gold h2{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

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

	.footer-working-hours-box-gold{
		max-width: 42%;
	}

	.footer-copyright-text-gold{
		padding: 30px 0;
	}
}

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

	.hero-gold{
        padding: 150px 0 60px;
    }

	.hero-sub-heading-gold .satisfy-client-image figure img{
		max-width: 24px;
	}

	.hero-satisfy-client-content-gold p{
		font-size: 14px;
	}

	.hero-btn-gold{
		gap: 20px;
	}

	.hero-info-list-gold{
		margin-top: 30px;
	}

	.hero-info-list-gold ul{
		justify-content: start;
	}

	.hero-info-list-gold ul li{
		font-size: 16px;
	}

	.about-us-gold .about-us-circle-gold{
		display: none;
	}

	.about-us-circle-gold a img{
		max-width: 80px;
	}

	.about-us-item-gold{
		width: 100%;
	}

	.about-us-item-gold .icon-box{
		margin-bottom: 20px;
	}

	.about-us-item-content-gold h3{
		font-size: 18px;
	}

	.about-us-body-list-gold ul li{
		margin-bottom: 10px;
	}

	.about-us-body-content-gold{
		width: 100%;
	}

	.about-us-body-image-gold figure,
	.about-us-body-image-gold figure img{
		height: auto;
	}

	.about-us-body-image-gold{
		width: 100%;
	}

	.service-item-gold{
		padding: 20px;
		min-height: 300px;
	}

	.service-item-content-box-gold{
		gap: 20px;
	}

	.service-item-content-gold h2{
		font-size: 18px;
	}

	.service-item-btn-gold{
		padding-top: 20px;
		margin-top: 20px;
	}

	.why-choose-image-box-gold .about-us-circle-gold{
		top: 10px;
	}

	.why-choose-cta-box-gold{
		padding: 15px;
	}

	.why-choose-cta-box-content-gold h2{
		font-size: 18px;
	}

	.why-choose-body-item-list-gold{
		width: 100%;
		padding: 20px;
	}

	.why-choose-body-item-gold h3{
		font-size: 18px;
	}

	.why-choose-body-item-gold{
		padding-bottom: 20px;
		margin-bottom: 20px;
	}

	.why-choose-review-box-gold{
		width: 100%;
		gap: 20px;
		padding: 20px;
	}

	.why-choose-review-content-box-gold{
		padding-top: 20px;
	}

	.why-choose-review-header-gold h2{
		font-size: 22px;
	}

	.why-choose-slider-box-gold{
        margin-top: 30px;
    }

	.why-choose-slider-content-gold{
		gap: 10px;
		margin-bottom: 20px;
	}

	.why-choose-logo-gold img{
		width: auto;
		height: auto;
		max-width: 230px;
		max-height: 105px;
	}

	.project-item-content-gold h2{
		font-size: 18px;
	}

	.features-item-gold{
		padding: 20px;
		gap: 20px;
	}

	.features-item-header-gold .icon-box{
		margin-bottom: 20px;
	}

	.features-item-content-gold h2{
		font-size: 18px;
	}

	.features-item-list-gold{
		padding-top: 20px;
	}

	.features-info-image-gold figure{
		margin-bottom: -50px;
	}

	.features-client-box-gold{
		gap: 20px;
	}

	.features-client-box-content-gold h2{
		font-size: 18px;
	}

	.features-client-box-body-gold{
		padding-top: 20px;
	}

	.features-client-body-content-gold h2{
		min-width: 75px;
		font-size: 28px;
	}

	.core-feature-footer-list-gold ul{
		gap: 10px;
	}

	.core-feature-footer-list-gold ul li{
		padding: 8px 10px 8px 24px;
	}

	.core-feature-footer-list-gold ul li::before{
		left: 10px;
	}

	.pricing-item-header-gold h2{
		font-size: 18px;
	}

	.pricing-item-contant-gold h2{
		font-size: 28px;
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.pricing-item-btn-gold,
	.pricing-item-list-gold{
		margin-top: 20px;
	}

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

	.pricing-benefit-list-gold ul{
		font-size: 14px;
		gap: 10px;
	}

	.pricing-item-list-gold ul li{
		margin-bottom: 10px;
	}

	.pricing-item-list-gold ul li::before{
		font-size: 16px;
	}

	.pricing-benefit-list-gold ul li img{
		max-width: 16px;
		margin-right: 5px;
	}

	.how-works-item-list-gold{
		gap: 30px;
	}

	.how-works-item-gold{
		width: 100%;
	}

	.how-works-item-gold::before{
		display: none;
	}

	.how-works-item-no-gold h2{
		font-size: 80px;
	}

	.how-works-item-content-gold ul{
		margin-top: 15px;
		padding-top: 15px;
	}

	.testimonial-item-gold{
		min-height: auto;
		padding: 20px;
	}

	.testimonial-item-content-gold p{
		font-size: 16px;
	}

	.testimonial-author-content-gold{
		padding-top: 20px;
		margin-top: 20px;
	}

	.testimonial-author-content-gold h2{
		font-size: 18px;
	}

	.our-testimonials-gold .section-footer-text{
		border: none;
		padding: 0;
	}

	.main-footer-gold:before{
        height: 110px;
    }

	.footer-social-links-gold h2{
		font-size: 18px;
	}

	.footer-social-links-gold ul{
		gap: 10px;
	}

	.footer-social-links-gold ul li a{
		font-size: 14px;
	}

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

	.footer-newsletter-box-gold .section-title{
		width: 100%;
	}

	.footer-newsletter-box-gold .section-title h2{
		font-size: 28px;
	}

	.footer-newsletter-form-gold{
		max-width: 100%;
	}

	.footer-newsletter-form-gold .form-group{
		padding: 5px;
	}

	.footer-links-box-gold{
		padding: 20px;
	}

	.footer-links-gold{
		max-width: 100%;
	}

	.footer-links-gold h2{
		font-size: 18px;
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.footer-copyright-text-gold{
		padding: 15px 0;
	}	       
}

/************************************/
/***  35. Home - Version 3 css    ***/
/************************************/

.hero-prime{
	position: relative;
    align-content: center;
    padding: 260px 0 90px;
    overflow: hidden;
}

.hero-prime::before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(270deg, transparent 0%, var(--primary-color) 100%);
	height: 100%;
	width: 100%;
	z-index: 1;
}

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

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

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

.hero-sub-heading-prime{
	display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--dark-divider-color);
    border-radius: 100px;
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    padding: 5px 16px 5px 5px;
    margin-bottom: 15px;
}

.hero-sub-heading-prime .satisfy-client-image figure img{
	max-width: 28px;
}

.hero-satisfy-client-content-prime p{
	font-size: 14px;
    font-weight: 600;
    color: var(--white-color);
    margin-bottom: 0;
}

.hero-prime .section-title h1{
	font-size: 70px;
}

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

.video-play-button-prime a{
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: none;
	gap: 20px;
}

.video-play-button-prime a span{
	position: relative;
	width: 56px;
	height: 56px;
	background: var(--accent-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.4s ease-in-out;
}

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

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

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

.video-play-button-prime a span i{
	position: relative;
	font-size: 22px;
	color: var(--white-color);
	margin-left: 2px;
	transition: all 0.3s ease-in-out;
	z-index: 1;
}

.video-play-button-prime p{
	font-weight: 500;
	color: var(--white-color);
	margin: 0;
}

.hero-prime .company-supports-slider-prime{
	border-top: 1px solid var(--dark-divider-color);
	padding-top: 40px;
	margin-top: 150px;
} 

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

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

.about-us-prime{
	padding: 120px 0;
}

.about-us-image-box-prime{
	height: 100%;
	display: flex;
    flex-wrap: wrap;
	align-items: end;
	padding-left: 40px;
	margin-right: 15px;
}

.about-us-image-prime.image-1{
	position: relative;
	width: 91%;
	height: 100%;
	z-index: 1;
}

.about-us-image-prime.image-1:before{
	content: '';
	position: absolute;
	top: 40px;
	left: -40px;
	bottom: 0;
	width: 100%;
	height: calc(100% - 40px);
	background: var(--accent-color);
	border-radius: 20px;
}

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

.about-us-image-prime figure img{
	width: 100%;
	object-fit: cover;
	border-radius: 20px;
}

.about-us-image-prime.image-1 figure{
	height: 100%;
}

.about-us-image-prime.image-1 figure img{
	height: 100%;
	aspect-ratio: 1 / 1.175;
}

.about-us-image-prime.image-2{
	position: relative;
	bottom: 100px;
	width: 9%;
	z-index: 1;
}

.about-us-image-prime.image-2 figure{
	border: 8px solid var(--bg-color);
	border-radius: 26px;
	margin-left: -185px;
}

.about-us-image-prime.image-2 figure img{
	aspect-ratio: 1 / 1.068;
}

.about-content-prime{
	height: 100%;
	align-content: center;
}

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

.about-us-body-item-prime{
	position: relative;
    width: calc(50% - 15px);
    display: flex;
    flex-wrap: wrap;
	align-items: center;
    gap: 15px;
}

.about-us-body-item-prime .icon-box{
	position: relative;
    height: 50px;
    width: 50px;
    background: var(--accent-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    overflow: hidden;
}

.about-us-body-item-prime .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--primary-color);
	border-radius: 10px;
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.about-us-body-item-prime:hover .icon-box::before{
	transform: rotate(0) scale(1);
}

.about-us-body-item-prime .icon-box img{
	position: relative;
    width: 100%;
    max-width: 24px;
    z-index: 1;
}

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

.about-body-item-title-prime h3{
	font-size: 20px;
	line-height: 1.4em;
}

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

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

.about-us-footer-prime{
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 40px;
	border-top: 1px solid var(--divider-color);
	padding-top: 40px;
    margin-top: 40px;
}

.about-us-author-box-prime{
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

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

.about-us-author-image-prime figure img{
	width: 100%;
    max-width: 50px;
}

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

.about-us-author-content-prime p{
	line-height: normal;
	margin: 5px 0 0;
}

.our-services-prime{
	background-image: url(../images/service-bg-image.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: auto;
	padding: 120px 0;
}

.service-item-prime{
	position: relative;
	background-color: var(--bg-color);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    min-height: 200px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 40px;
	overflow: hidden;
}

.service-item-prime:before{
	content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    border-radius: 0px;
    background: var(--accent-color);
	border-radius: 999px 999px 0 0;
    transition: all 0.4s ease-in-out;
    height: 100%;
    z-index: 0;
}

.service-item-prime:hover::before{
	top: 0;
	border-radius: 0;
}

.servie-item-body-prime,
.service-item-prime .icon-box{
	position: relative;
	z-index: 1;
}

.service-item-prime .icon-box{
	position: relative;
    height: 50px;
    width: 50px;
    background: var(--accent-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    overflow: hidden;
}

.service-item-prime .icon-box:before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--white-color);
	border-radius: 10px;
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

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

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

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

.service-item-contant-prime h2{
	position: relative;
	display: inline-block;
	font-size: 17px;
	padding-bottom: 10px;
	margin-bottom: 20px;
	transition: all 0.4s ease-in-out;
}

.service-item-contant-prime h2::before{
	content: ''; 
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100px; 
	height: 2px; 
	background-color: var(--accent-color);
	transition: all 0.4s ease-in-out;
}

.service-item-prime:hover .service-item-contant-prime h2::before{
	background-color: var(--white-color);
	width: 100%;
}

.service-item-contant-prime h2 a{
	color: inherit;
}

.service-item-prime:hover .service-item-contant-prime h2{
	color: var(--white-color);
}

.service-item-contant-prime p{
	margin: 0;
	transition: all 0.4s ease-in-out;
}

.service-item-prime:hover .service-item-contant-prime p{
	color: var(--white-color);
}

.service-item-btn-prime{
	margin-top: 40px;
}

.service-item-prime .readmore-btn{
	transition: all 0.4s ease-in-out;
}

.service-item-prime:hover .readmore-btn{
	color: var(--white-color);
}

.service-item-prime:hover .readmore-btn::before{
	background-color: var(--white-color);
	background-image: url('../images/arrow-accent.svg');
}

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

.why-choose-us-image-prime{
	height: 100%;
	margin-right: 15px;
}

.why-choose-us-image-prime figure{
	height: 100%;
	display: block;
	border-radius: 20px;
}

.why-choose-us-image-prime img{
	height: 100%;
	width: 100%;
	aspect-ratio: 1 / 1.41;
	object-fit: cover;
	border-radius: 20px;
}

.why-choose-us-content-prime{
	height: 100%;
	align-content: center;
}

.why-choose-us-body-prime{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 60px;
}

.why-choose-item-list-prime{
	width: calc(100% - 200px);
}

.why-choose-item-prime{
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-bottom: 30px;
}

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

.why-choose-item-prime .icon-box{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	background-color: var(--accent-color);
	border-radius: 10px;
}

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

.why-choose-item-prime:hover .icon-box::before{
	transform: scale(1) rotate(90deg);
}

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

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

.why-choose-item-content-prime{
	width: calc(100% - 75px);
}

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

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

.get-in-touch-circle-prime a{
	display: inline-block;
	border: 5px solid var(--bg-color);
	border-radius: 50%;
	overflow: hidden;
}

.get-in-touch-circle-prime img{
	width: 100%;
	max-width: 160px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	animation: infiniterotate 20s infinite linear;
}

.get-in-touch-circle-prime a:hover img{
	animation-play-state: paused;
}

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

.why-choose-us-footer-prime{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px 50px;
	border-top: 1px solid var(--divider-color);
	padding-top: 40px;
	margin-top: 60px;
}

.our-impact-prime{
	padding: 120px 0;
}

.impact-image-box-prime{
	position: relative;
	margin-right: 20px;
}

.impact-image-prime figure{
	display: block;
}

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

.client-satisfaction-box-prime{
	position: absolute;
	background-color: var(--white-color);
	display: flex;
	gap: 15px;
	align-items: center;
	top: 0px;
	right: 0;
	padding-bottom: 11px;
	z-index: 2;
}

.client-satisfaction-box-prime::before{
	content: "";
	position: absolute;
	width: 60px;
	height: 100%;
	top: 0px;
	left: -60px;
	background-color: var(--white-color);
	mask-image: url("../images/impact-image-box-bg-shape-prime.svg");
	mask-position: center center;
	mask-repeat: no-repeat;
	mask-size: cover;
	z-index: 1;
}

.client-satisfaction-box-prime::after{
	content: '';
    position: absolute;
    width: 20px;
    height: 20px;
	right: 0;
	bottom: -20px;
    mask: url(../images/image-corner-bg-shape.svg);
    -webkit-mask: url(../images/image-corner-bg-shape.svg);
    background-color: var(--white-color);
    mask-repeat: no-repeat;
    mask-size: cover;
    z-index: 1;
}

.client-satisfaction-box-content-prime{
	position: relative;
	max-width: 170px;
	z-index: 1;
}

.client-satisfaction-box-content-prime p{
	font-weight: 500;
	line-height: 1.4em;
	margin: 0;
}

.impact-content-list-prime{
	margin-bottom: 40px;
}

.impact-content-list-prime ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.impact-content-list-prime ul li{
	position: relative;
	line-height: 1.5em;
	margin-bottom: 15px;
	padding-left: 25px;
}


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

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

.impact-item-list-prime{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.impact-item-prime{
	width: calc(50% - 15px);
	min-height: 340px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	background-color: var(--bg-color);
	border-radius: 20px;
	padding: 30px;
}

.impact-item-counter-no-prime h2{
	font-size: 48px;
}

.impact-item-content-prime{
	border-top: 1px solid var(--divider-color);
	padding-top: 30px;
}

.impact-item-content-prime h3{
	font-size: 20px;
	line-height: 1.4em;
}

.impact-item-content-prime p{
	margin: 10px 0 0;
}

.our-impact-prime .section-footer-text{
	max-width: 580px;
	margin: 60px auto 0;
}

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

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

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

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

.what-we-do-item-content-prime h3{
	font-size: 20px;
	line-height: 1.4em;
}

.what-we-do-item-prime .icon-box{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-color: var(--accent-color);
	border-radius: 50%;
}

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

.what-we-do-item-prime:hover .icon-box::before{
	transform: scale(1) rotate(90deg);
}

.what-we-do-item-prime .icon-box img{
	width: 100%;
	max-width: 20px;
	transition: all 0.4s ease-in-out;
}

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

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

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

.what-we-do-footer-list-prime ul li{
	position: relative;
	line-height: 1.6em;
	padding-left: 25px;
	margin-bottom: 15px;
}

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

.what-we-do-footer-list-prime ul li::before{
	content: '\f058';
	position: absolute;
	font-family: 'Font Awesome 7 Free';
	font-size: 18px;
	font-weight: 900;
	top: 0;
	left: 0;
	color: var(--accent-color);
}

.what-we-do-image-box-prime{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-left: 15px;
}

.what-we-do-image-prime{
	width: calc(50% - 10px);
}

.what-we-do-image-prime figure{
	display: block;
	border-radius: 20px;
}

.what-we-do-image-prime img{
	width: 100%;
	aspect-ratio: 1 / 0.951;
	object-fit: cover;
	border-radius: 20px;
}

.what-we-do-prime .get-in-touch-circle-prime{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.our-team-prime{
	padding: 120px 0;
}

.team-item-prime{
	background-color: var(--bg-color);
	border-radius: 20px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 10px;
}

.team-item-image-prime{
	position: relative;
	padding-bottom: 15px;
}

.team-item-image-prime a{
	display: block;
	cursor: none;
	border-radius: 10px;
	overflow: hidden;
}

.team-item-image-prime a figure{
	display: block;
}

.team-item-image-prime a img{
	width: 100%;
	object-fit: cover;
	aspect-ratio: 1 / 1.044;
	border-radius: 10px;
	transition: all 0.6s ease-in-out;
}

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

.team-social-list-prime{
	position: absolute;
	bottom: 0px;
	left: 30px;
	z-index: 2;
}

.team-social-link-prime{
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white-color);
	background-color: var(--accent-color);
	border: 5px solid var(--bg-color);
	border-radius: 50%;
}

.team-social-link-prime img{
	width: 100%;
	max-width: 24px;
	margin-right: 2px;
}

.team-social-icon-prime{
	position: relative;
	bottom: 0px;
	transform: scaleX(0);
	transition: all	0.4s ease-in-out;
}

.team-item-prime:hover .team-social-icon-prime{
	bottom: 20px;
	transform: scaleX(1);
}

.team-social-icon-prime ul{
	display: flex;
	flex-direction: column;
	align-items: center;
	list-style: none;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.team-social-icon-prime ul li a{
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white-color);
	background: var(--divider-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--dark-divider-color);
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.4s ease-in-out;
}

.team-social-icon-prime ul li a i{
	color: inherit;
}

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

.team-item-content-prime{
	padding: 20px;
}

.team-item-content-prime h2{
	font-size: 20px;
}

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

.team-item-content-prime p{
	margin: 5px 0 0;
}

.our-pricing-prime{
	padding: 120px 0;
}

.pricing-item-prime{
	background-color: var(--white-color);
    border-radius: 20px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 20px;
}

.pricing-item-header-prime{
	padding: 10px;
	margin-bottom: 20px;
}

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

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

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

.pricing-item-header-prime .icon-box img{
	position: relative;
    width: 100%;
    max-width: 24px;
	z-index: 1;
}

.pricing-item-content-prime .pricing-item-title-prime{
	display: inline-block;
	font-family: var(--accent-font);
	font-size: 20px;
	font-weight: 500;
	color: var(--primary-color);
	margin-bottom: 15px;
}

.pricing-item-content-prime p{
	margin-bottom: 30px;
}

.pricing-item-content-prime h2{
	font-size: 48px;
	line-height: 1em;
}

.pricing-item-content-prime h2 sup{
	font-size: 16px;
	top: -1.2em;
}

.pricing-item-content-prime h2 sub{
	font-size: 16px;
	font-weight: 400;
	bottom: 0;
}

.pricing-item-body-prime{
	background-color: var(--bg-color);
    border-radius: 14px;
    padding: 30px;
}

.pricing-item-body-prime h3{
	font-size: 20px;
	margin-bottom: 30px;
}

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

.pricing-item-body-prime ul li{
	position: relative;
    color: var(--primary-color);
    line-height: 1.5em;
    padding-left: 25px;
    margin-bottom: 15px;
}

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

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

.pricing-item-btn-prime{
	margin-top: 30px;
}

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

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

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

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

.pricing-benefit-list-prime ul li{
    display: inline-flex;
    align-items: center;	
}

.pricing-benefit-list-prime ul li img{
	width: 100%;
	max-width: 20px;
	margin-right: 10px;
}

.cta-box-prime{
	position: relative;
	padding: 120px 0;
	overflow: hidden;
}

.cta-box-image-prime{
	position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.cta-box-image-prime figure{
	position: relative;
    display: block;
    height: 100%;
}

.cta-box-image-prime figure:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(270deg, #010535 0%, rgba(1, 5, 53, 0.00) 54.43%), linear-gradient(0deg, rgba(1, 5, 53, 0.20) 0%, rgba(1, 5, 53, 0.20) 100%);
	height: 100%;
	width: 100%;
	z-index: 1;
}

.cta-box-image-prime figure img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cta-contact-form-box-prime{
	position: relative;
    width: 100%;
    max-width: 635px;
    background-color: var(--dark-divider-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 50px;
    margin-left: auto;
    z-index: 2;
}

.cta-contact-form-box-prime .contact-form .form-control{
	color: var(--white-color);
	background-color: var(--dark-divider-color);
}

.cta-contact-form-box-prime .contact-form .form-control::placeholder{
	color: var(--white-color);
}

.cta-contact-form-box-prime .contact-form-btn .btn-default{
	width: 100%;
    text-align: center;
	padding: 17px 24px;
}

.cta-contact-form-box-prime .contact-form-btn .btn-default::before{
	display: none;
}

.our-testimonial-prime{
	padding: 120px 0;
}

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

.testimonial-slider-prime,
.testimonial-slider-prime .swiper{
	height: 100%;
}

.testimonial-item-prime{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	background-color: var(--secondary-color);
	border-radius: 20px;
	min-height: 420px;
	height: 100%;
	padding: 40px;
}

.testimonial-slider-prime .swiper-wrapper .swiper-slide .testimonial-item-prime{
	transform: scale(0.95);
	transition: all 0.6s ease-in-out;
}

.testimonial-slider-prime .swiper-wrapper .swiper-slide.swiper-slide-next .testimonial-item-prime{
    transform: scale(1);
}

.testimonial-item-rating-prime{
	display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
}

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

.testimonial-item-rating-prime span{
	font-size: 20px;
	font-family: var(--accent-font);
	font-weight: 500;
	line-height: 1.25em;
	color: var(--primary-color);
	margin-left: 5px;
}

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

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

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

.testimonial-author-image-prime figure img{
	width: 100%;
	max-width: 60px;
}

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

.testimonial-author-content-prime h2{
	font-size: 20px;
}

.testimonial-author-content-prime p{
	margin: 5px 0 0;
}

.our-testimonial-prime .section-footer-text{
	margin-top: 60px;
}

.our-faqs-prime{
	padding: 120px 0;
}

.our-faq-contant-prime{
	position: sticky;
    top: 30px;
}

.faq-contact-btn-prime{
	display: inline-block;
}

.faq-contact-btn-prime a{
	font-size: 20px;
	font-weight: 500;
	color: var(--white-color);
	background-color: var(--accent-color);
	border-radius: 100px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 5px 12px 5px 5px;
	transition: all 0.4s ease-in-out;
}

.faq-contact-btn-prime a:hover{
	background-color: var(--primary-color);
}

.faq-contact-btn-prime .icon-box{
    width: 50px;
    height: 50px;
    background: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
	margin-right: 15px;
}

.faq-contact-btn-prime .icon-box img{
	width: 100%;
	max-width: 24px;
}

.faq-accordion-prime .accordion-item{
	background-color: var(--bg-color);
	border-radius: 10px;
    margin-bottom: 30px;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}

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

.faq-accordion-prime .accordion-header .accordion-button{
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3em;
    color: var(--primary-color);
	padding: 18px 50px 18px 24px;
}

.faq-accordion-prime .accordion-item .accordion-button::after,
.faq-accordion-prime .accordion-item .accordion-button.collapsed::after{
    content: '\2b';
    font-family: 'Font Awesome 7 Free';
    position: absolute;
    right: 20px;
    top: 50%;
    font-size: 20px;
    font-weight: 600;
    transform: translateY(-50%);
    color: var(--accent-color);
    transition: all 0.4s ease-in-out;
}

.faq-accordion-prime .accordion-button:not(.collapsed)::after{
    content: '\f068';
}

.faq-accordion-prime .accordion-item .accordion-body{
	border-top: 1px solid var(--divider-color);
	padding: 18px 24px;
}

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

.main-footer-prime{
	position: relative;
	padding: 120px 0 0;
}

.main-footer-prime:before{
	position: absolute;
    content: '';
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url(../images/footer-bg-image-2.png);
    background-repeat: repeat-x;
    background-position: right bottom;
    background-size: auto 100%;
    width: 100%;
    height: 200px;
}

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

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

.footer-header-prime .section-title{
	max-width: 640px;
	margin-bottom: 0;
}

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

.footer-contact-links-prime ul li{
	font-family: var(--accent-font);
	font-size: 30px;
	line-height: 1em;
    color: var(--white-color);
    margin-bottom: 15px;
}

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

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

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

.about-footer-prime{
	margin-right: 20px;
}

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

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

.about-footer-content-prime p{
	color: var(--white-color);
}

.about-footer-content-prime p:last-child{
	margin: 0;
}

.footer-social-links-prime{
	margin-top: 40px;
}

.footer-social-links-prime ul{
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	list-style: none;
	margin: 0;
	padding: 0;
}

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

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

.footer-social-links-prime ul li a i{
	position: relative;
	font-size: 18px;
	color: var(--white-color);
	z-index: 1;
}

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

.footer-links-prime{
	max-width: 27%;
}

.footer-links-prime h2{
	font-size: 20px;
	color: var(--white-color);
	margin-bottom: 30px;
}

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

.footer-links-prime ul li{
	position: relative;
	color: var(--white-color);
	line-height: 1.5em;
	margin-bottom: 15px;
}

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

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

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

.footer-newsletter-form-prime{
	max-width: 38%;
}

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

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

.footer-newsletter-form-prime .form-control{
	width: calc(100% - 50px);
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	color: var(--white-color);
	background: var(--dark-divider-color);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: none;
	border-radius: 100px;
	outline: none;
	box-shadow: none;
	padding: 14px 24px;
}

.footer-newsletter-form-prime .form-control::placeholder{
	color: var(--white-color);
	opacity: 50%;
}

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

.footer-newsletter-form-prime .newsletter-btn:hover{
	background-color: var(--white-color);
}

.footer-newsletter-form-prime .newsletter-btn img{
	font-size: 24px;
	transition: all 0.4s ease-in-out;
}

.footer-newsletter-form-prime .form-group .newsletter-btn:hover img{
	filter: brightness(0) invert(0);
	transform: rotate(45deg);
}

.footer-copyright-text-prime{
	text-align: center;
	border-top: 1px solid var(--dark-divider-color);
	padding: 60px 0;
	margin-top: 60px;
}

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

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

	.about-us-image-box-prime{
		max-width: 740px;
		margin: 0 auto 30px;
	}

	.about-us-image-box-prime,
	.about-us-image-prime.image-1,
	.about-us-image-prime.image-1 figure,
	.about-us-image-prime.image-1 figure img{
		height: auto;
	}

	.about-us-image-prime.image-1 figure img{
		aspect-ratio: 1 / 1.1;
	}

	.service-item-prime{
		min-height: 360px;
		padding: 30px;
	}

	.service-item-btn-prime{
		margin-top: 30px;
	}

	.why-choose-us-image-prime{
		max-width: 740px;
		height: auto;
		margin: 0 auto 30px;
	}

	.why-choose-us-image-prime figure,
	.why-choose-us-image-prime img{
		height: auto;
	}

	.why-choose-us-image-prime img{
		aspect-ratio: 1 / 1.02;
	}

	.impact-image-box-prime{
		max-width: 740px;
		margin: 0 auto 30px;
	}

	.impact-item-prime{
		min-height: 290px;
	}

	.what-we-do-content-prime{
		margin-bottom: 30px;
	}

	.what-we-do-footer-list-prime{
		margin-top: 30px;
		padding-top: 30px;
	}

	.what-we-do-image-box-prime{
		max-width: 740px;
		margin: 0 auto;
	}

	.cta-contact-form-box-prime{
		padding: 30px;
	}

	.testimonial-slider-prime .swiper-wrapper .swiper-slide .testimonial-item-prime{
		transform: scale(1);
	}

	.testimonial-item-prime{
		padding: 30px;
	}

	.our-faq-contant-prime{
		position: initial;
		margin-bottom: 30px;
	}

	.main-footer-prime:before{
        height: 130px;
    }

	.footer-header-prime{
		padding-bottom: 30px;
		margin-bottom: 30px;
	}

	.about-footer-prime{
		margin: 0 0 30px;
	}

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

	.footer-social-links-prime{
		margin-top: 20px;
	}

	.footer-links-prime h2{
		margin-bottom: 20px;
	}

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

	.footer-newsletter-form-prime p{
		margin-bottom: 20px;
	}

	.footer-copyright-text-prime{
		padding: 30px 0;
		margin-top: 30px;
	}
}

@media only screen and (max-width: 991px){
	
	.hero-prime{
		padding: 200px 0 30px;
	}

	.hero-prime .section-title h1{
		font-size: 48px;
	}

	.hero-content-body-prime{
		gap: 20px 30px;
	}

	.hero-content-body-prime .video-play-button-prime a span{
		width: 52px;
		height: 52px;
	}

	.hero-content-body-prime .video-play-button-prime a span.bg-effect:before,
	.hero-content-body-prime .video-play-button-prime a span.bg-effect:after{
		width: 160%;
		height: 160%;
	}

	.hero-prime .company-supports-slider-prime{
		padding-top: 30px;
		margin-top: 120px;
	}

	.company-supports-logo-prime img{
		max-width: 150px;
    	height: 35px;
	}

	.about-us-prime{
		padding: 60px 0;
	}

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

	.about-us-footer-prime{
		gap: 20px 30px;
		padding-top: 30px;
		margin-top: 30px;
	}

	.about-us-author-image-prime figure img{
		max-width: 44px;
	}
	
	.about-us-author-content-prime h3{
		font-size: 18px;
	}

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

	.service-item-contant-prime h2{
		margin-bottom: 20px;
	}

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

	.why-choose-us-body-prime{
		margin-top: 0;
	}

	.why-choose-item-list-prime{
		width: calc(100% - 170px);
	}

	.why-choose-item-prime .icon-box{
		width: 50px;
		height: 50px;
	}

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

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

	.get-in-touch-circle-prime img{
		max-width: 130px;
	}

	.why-choose-us-footer-prime{
		gap: 20px 30px;
		margin-top: 30px;
		padding-top: 30px;
	}

	.our-impact-prime{
		padding: 60px 0;
	}

	.client-satisfaction-box-prime::before{
		width: 50px;
		left: -50px;
	}

	.impact-content-list-prime{
		margin-bottom: 30px;
	}

	.impact-content-list-prime ul li{
		margin-bottom: 10px;
	}

	.impact-content-list-prime ul li:before{
		font-size: 16px;
	}

	.impact-item-counter-no-prime h2{
		font-size: 38px;
	}

	.our-impact-prime .section-footer-text{
		margin-top: 40px;
	}

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

	.what-we-do-footer-list-prime ul li{
		margin-bottom: 10px;
	}

	.what-we-do-footer-list-prime ul li:before{
		font-size: 16px;
	}

	.our-team-prime{
		padding: 60px 0;
	}

	.team-social-link-prime{
		border-width: 3px;
		height: 50px;
		width: 50px;
	}

	.team-social-link-prime img{
		max-width: 20px;
	}

	.team-social-icon-prime{
		bottom: 10px;
	}

	.our-pricing-prime{
		padding: 60px 0;
	}

	.pricing-item-prime{
		padding: 10px;
	}

	.pricing-item-content-prime .pricing-item-title-prime{
		margin-bottom: 10px;
	}

	.pricing-item-content-prime p{
		margin-bottom: 20px;
	}

	.pricing-item-content-prime h2{
		font-size: 38px;
	}

	.pricing-item-content-prime h2 sup{
		top: -0.9em;
	}

	.pricing-item-body-prime{
		padding: 20px;
	}

	.pricing-item-body-prime h3{
		margin-bottom: 20px;
	}

	.pricing-item-body-prime ul li{
		margin-bottom: 10px;
	}

	.pricing-item-body-prime ul li:before{
		font-size: 16px;
	}

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

	.pricing-benefit-list-prime ul{
		gap: 15px 30px;
	}

	.pricing-item-btn-prime .btn-default{
		padding: 15px;
	}

	.cta-box-prime{
		padding: 60px 0;
	}

	.cta-box-image-prime{
		position: initial;
		height: auto;
		margin-bottom: 30px;
	}

	.cta-box-image-prime figure::before{
		display: none;
	}

	.cta-box-image-prime figure,
	.cta-box-image-prime figure img{
		height: auto;
		border-radius: 20px;
	}

	.cta-box-image-prime figure img{
		aspect-ratio: 1 / 0.66;
	}

	.cta-contact-form-box-prime{
		max-width: 100%;
	}

	.cta-contact-form-box-prime .contact-form-btn .btn-default{
		padding: 15px;
	}

	.our-testimonial-prime{
		padding: 60px 0;
	}

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

	.testimonial-author-image-prime figure img{
		max-width: 50px;
	}

	.testimonial-author-content-prime{
		width: calc(100% - 65px);
	}

	.our-testimonial-prime .section-footer-text{
		margin-top: 40px;
	}

	.our-faqs-prime{
		padding: 60px 0;
	}

	.faq-contact-btn-prime .icon-box{
		height: 40px;
		width: 40px;
		margin-right: 10px;
	}

	.faq-contact-btn-prime .icon-box img{
		max-width: 20px;
	}

	.faq-accordion-prime .accordion-item{
		margin-bottom: 20px;
	}

	.faq-accordion-prime .accordion-header .accordion-button{
		padding: 15px 45px 15px 20px;
	}

	.faq-accordion-prime .accordion-item .accordion-button::after, 
	.faq-accordion-prime .accordion-item .accordion-button.collapsed::after{
		font-size: 18px;
        right: 20px;
	}

	.faq-accordion-prime .accordion-item .accordion-body{
		padding: 15px 20px;
	}

	.main-footer-prime{
		padding: 60px 0 0;
	}

	.footer-header-prime .section-title{
		max-width: 450px;
	}

	.footer-contact-links-prime ul li{
		font-size: 24px;
	}
}

@media only screen and (max-width: 767px){
	
	.hero-prime .section-title h1{
		font-size: 28px;
	}

	.hero-content-body-prime{
		gap: 25px 20px;
	}

	.hero-content-body-prime .video-play-button-prime{
		margin-left: 10px;
	}

	.hero-content-body-prime .video-play-button-prime p{
		font-size: 14px;
	}

	.about-us-image-box-prime{
		padding-left: 25px;
	}

	.about-us-image-prime.image-1:before{
		left: -25px;
	}

	.about-us-image-prime.image-2{
		bottom: 30px;
	}

	.about-us-image-prime.image-2 figure{
		border-width: 4px;
		border-radius: 20px;
		margin-left: -115px;
	}

	.about-us-body-prime{
		gap: 20px;
	}

	.about-us-body-item-prime{
		width: 100%;
	}

	.about-body-item-title-prime h3{
		font-size: 18px;
	}

	.about-us-footer-prime{
		gap: 20px;
	}

	.service-item-prime{
		padding: 20px;
		gap: 20px;
		min-height: auto;
	}

	.service-item-contant-prime h2{
		font-size: 18px;
	}

	.service-item-btn-prime{
		margin-top: 20px;
	}

	.why-choose-item-list-prime{
		width: 100%;
	}

	.why-choose-item-content-prime h3{
		font-size: 18px;
	}

	.why-choose-us-body-prime .get-in-touch-circle-prime{
		display: none;
	}

	.get-in-touch-circle-prime img{
		max-width: 100px;
	}

	.client-satisfaction-box-prime{
		gap: 10px;
	}

	.client-satisfaction-box-prime .satisfy-client-image figure img{
		max-width: 34px;
	}

	.client-satisfaction-box-content-prime{
		max-width: 120px;
	}

	.client-satisfaction-box-content-prime p{
		font-size: 14px;
	}

	.impact-item-prime{
		width: 100%;
		min-height: auto;
		padding: 20px;
		gap: 20px;
	}

	.impact-item-counter-no-prime h2{
		font-size: 28px;
	}

	.impact-item-content-prime{
		padding-top: 20px;
	}

	.impact-item-content-prime h3{
		font-size: 18px;
	}

	.what-we-do-item-list-prime{
		gap: 20px;
	}

	.what-we-do-item-prime{
		width: calc(50% - 10px);
		flex-direction: column;
		text-align: center;
		gap: 10px;
	}

	.what-we-do-item-content-prime{
		width: 100%;
	}

	.what-we-do-item-content-prime h3{
		font-size: 16px;
	}

	.what-we-do-image-box-prime{
		gap: 10px;
	}

	.what-we-do-image-prime{
		width: calc(50% - 5px);
	}

	.team-item-content-prime{
		padding: 10px;
	}

	.team-item-content-prime h2{
		font-size: 18px;
	}

	.pricing-item-header-prime .icon-box{
		margin-bottom: 20px;
	}

	.pricing-item-content-prime .pricing-item-title-prime{
		font-size: 18px;
	}

	.pricing-item-content-prime h2 sup{
		font-size: 14px;
		top: -0.7em;
	}

	.pricing-item-content-prime h2{
		font-size: 28px;
	}

	.pricing-item-content-prime h2 sub{
		font-size: 14px;
	}

	.pricing-item-body-prime h3{
		font-size: 18px;
		margin-bottom: 15px;
	}

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

	.pricing-benefit-list-prime ul{
		gap: 10px;
	}

	.pricing-benefit-list-prime ul li{
		font-size: 14px;
	}

	.pricing-benefit-list-prime ul li img{
		max-width: 16px;
		margin-right: 5px;
	}

	.cta-contact-form-box-prime{
		padding: 20px;
	}

	.testimonial-item-prime{
		padding: 20px;
		gap: 20px;
	}

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

	.testimonial-item-rating-prime span{
		font-size: 18px;
	}

	.testimonial-item-author-prime{
		padding-top: 20px;
	}

	.testimonial-author-content-prime h2{
		font-size: 18px;
	}

	.faq-contact-btn-prime a{
		font-size: 18px;
	}

	.faq-contact-btn-prime .icon-box{
        height: 34px;
        width: 34px;
    }

	.faq-contact-btn-prime .icon-box img{
        max-width: 18px;
    }

	.faq-accordion-prime .accordion-header .accordion-button{
		font-size: 16px;
        padding: 12px 40px 12px 15px;
	}

	.faq-accordion-prime .accordion-item .accordion-button::after, 
	.faq-accordion-prime .accordion-item .accordion-button.collapsed::after{
		right: 15px;
	}

	.faq-accordion-prime .accordion-item .accordion-body{
		padding: 12px 15px;
	}

	.main-footer-prime:before{
        height: 110px;
    }

	.footer-contact-links-prime ul{
		text-align: start;
	}

	.footer-contact-links-prime ul li{
		font-size: 18px;
		margin-bottom: 10px;
	}

	.footer-links-prime{
		max-width: 100%;
	}

	.footer-links-prime h2{
		margin-bottom: 15px;
	}
	
	.footer-copyright-text-prime{
		padding: 15px 0;
	}
}

/*=========================
    HEADER new
==========================*/

.main-header{
    position:absolute;
    top:30px;
    left:0;
    width:100%;
    z-index:999;
}

.header-sticky{
    max-width:1320px;
    margin:auto;
    background:#fff;
    border-radius:60px;
    padding:0 20px;
    box-shadow:0 12px 40px rgba(0,0,0,.08);
    transition:.35s;
}

.header-sticky.active{
    position:fixed;
    top:15px;
    left:0;
    right:0;
    animation:header .4s;
}

@keyframes header{

    from{
        transform:translateY(-80px);
    }

    to{
        transform:translateY(0);
    }

}

.navbar{
    padding:16px 0;
}

.navbar-brand img{
    height:70px;
}

/*=========================
    MENU
==========================*/

.main-menu{
    margin-left:auto;
}

.main-menu>ul{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:5px;
    margin:0;
    padding:0;
    list-style:none;
}

.main-menu ul li{
    position:relative;
    list-style:none;
}

.main-menu ul li>a{
    display:flex;
    align-items:center;
    padding:14px 18px;
    color:#1b1b1b;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    border-radius:10px;
    transition:.3s;
}

.main-menu ul li>a:hover{
    color:#0d6efd;
    background:#f5f8ff;
}

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

/*=========================
    DROPDOWN
==========================*/

.sub-menu{
    position:absolute;
    top:120%;
    left:0;
    min-width:280px;
    background:#fff;
    border-radius:16px;
    padding:12px 0;
    margin:0;
    list-style:none;
    box-shadow:0 20px 50px rgba(0,0,0,.12);

    opacity:0;
    visibility:hidden;
    transform:translateY(20px);
    transition:.35s;
}

.main-menu li:hover>.sub-menu{

    opacity:1;
    visibility:visible;
    transform:translateY(0);

}

.sub-menu li{
    width:100%;
}

.sub-menu li a{
    display:block;
    padding:12px 22px;
    color:#444;
    font-size:14px;
    font-weight:500;
    transition:.3s;
    white-space:nowrap;
}

.sub-menu li a:hover{
    background:#f4f7fc;
    color:#0d6efd;
    padding-left:28px;
}

/*=========================
    SECOND LEVEL
==========================*/

.sub-menu .sub-menu{

    top:0;
    left:100%;
    margin-left:8px;

}

/*=========================
    MOBILE
==========================*/

@media(max-width:991px){

.main-menu{
    display:none;
}

.navbar-toggle{
    display:block;
}

.header-sticky{
    border-radius:20px;
    padding:0 15px;
}

.navbar-brand img{
    height:70px;
}

}
/*=========================
 GLOBAL PRESENCE SECTION
==========================*/

.security-intro-section{

    background:#eef6ff;

    padding:100px 0;

    position:relative;

    overflow:hidden;

}


/* Soft Moving Background */

.security-intro-section:before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    top:-300px;

    left:-250px;

    background:radial-gradient(
        circle,
        color-mix(in srgb,var(--accent-color),transparent 78%),
        transparent 70%
    );

    animation:moveGlow 12s infinite alternate ease-in-out;

}


.security-intro-section:after{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    bottom:-250px;

    right:-200px;

    background:radial-gradient(
        circle,
        color-mix(in srgb,var(--accent-color),transparent 82%),
        transparent 70%
    );

    animation:moveGlow 15s infinite alternate-reverse ease-in-out;

}



@keyframes moveGlow{

    from{
        transform:translate(0,0);
    }

    to{
        transform:translate(50px,40px);
    }

}



/*=========================
 HEADING
==========================*/


.security-heading{

    text-align:center;

    max-width:700px;

    margin:0 auto 60px;

    position:relative;

    z-index:2;

}


.security-heading span{

    color:var(--accent-color);

    letter-spacing:5px;

    font-size:13px;

    font-weight:700;

}


.security-heading h2{

    color:#081b42;

    font-size:48px;

    margin:15px 0;

}


.security-heading strong{

    color:var(--accent-color);

}


.security-heading p{

    color:#607089;

    font-size:17px;

}





/*=========================
 GRID
==========================*/


.security-card-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:32px;

    position:relative;

    z-index:2;

}





/*=========================
 PREMIUM CARD
==========================*/


.security-box{


    background:

    linear-gradient(
        145deg,
        rgba(255,255,255,.95),
        rgba(255,255,255,.70)
    );


    border:1px solid rgba(76,124,255,.18);


    border-radius:26px;


    padding:40px 32px;


    min-height:230px;


    position:relative;


    overflow:hidden;


    cursor:pointer;


    transform-style:preserve-3d;


    transition:

    transform .5s cubic-bezier(.2,.8,.2,1),

    box-shadow .5s ease,

    border .4s ease;



    box-shadow:

    0 15px 40px rgba(76,124,255,.10);

}





/* Moving Light */

.security-box:before{


    content:"";


    position:absolute;


    width:160px;


    height:160px;


    top:-80px;


    right:-80px;



    background:

    radial-gradient(
        circle,
        rgba(76,124,255,.35),
        transparent 70%
    );



    transition:.6s;


}





/* Shine */


.security-box:after{


    content:"";


    position:absolute;


    top:0;


    left:-120%;


    width:80%;


    height:100%;



    background:

    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.8),
        transparent
    );



    transform:skewX(-25deg);


    transition:.9s;


}





/* HOVER */


.security-box:hover{


    transform:

    translateY(-20px)

    scale(1.04);



    border-color:

    var(--accent-color);



    box-shadow:


    0 35px 80px rgba(76,124,255,.28),


    0 0 35px rgba(76,124,255,.18);


}





.security-box:hover:after{

    left:140%;

}



.security-box:hover:before{

    transform:scale(1.5);

}





/*=========================
 TEXT
==========================*/


.security-box h3{


    color:#081b42;


    font-size:23px;


    margin-bottom:18px;



    transition:.4s;

}



.security-box:hover h3{


    color:var(--accent-color);


    transform:translateX(8px);

}





.security-box p{


    color:#586b85;


    line-height:1.8;


    margin:0;


    transition:.4s;

}



.security-box:hover p{


    transform:translateY(-5px);


}





/*=========================
 RESPONSIVE
==========================*/


@media(max-width:992px){


.security-card-grid{

    grid-template-columns:repeat(2,1fr);

}


}



@media(max-width:576px){


.security-intro-section{

    padding:70px 0;

}


.security-card-grid{

    grid-template-columns:1fr;

}


.security-heading h2{

    font-size:34px;

}



.security-box:hover{


    transform:

    translateY(-12px)

    scale(1.02);


}


}
/************************************/
/***      Slider home 4 box css     ***/
/************************************/
/*==========================================
Cybersecurity Ecosystem Section
==========================================*/
/* ===================================
   CYBERSECURITY ECOSYSTEM SECTION
=================================== */

.ecosystem-section{
    padding:100px 0;
    background-color:var(--primary-color);
    background-image:url(../images/dark-section-bg-image.png);
    position:relative;
    overflow:hidden;
}


.ecosystem-desc{
    color:#bdbdbd;
    margin-top:15px;
    font-size:17px;
}




/* ===================================
   TABS
=================================== */

.ecosystem-tabs{

    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
    margin:60px 0;

}


.eco-tab{

    background:transparent;
    border:1px solid rgba(255,255,255,.15);
    color:#fff;
    padding:14px 26px;
    border-radius:50px;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:.35s;

}



.eco-tab:hover,
.eco-tab.active{

    background:#00b4ff;
    border-color:#00b4ff;
    color:#fff;

}


.eco-tab.active{

box-shadow:0 10px 30px rgba(0,180,255,.35);

}






/* ===================================
   TAB CONTENT
=================================== */


.eco-content{

display:none;

animation:fade .4s ease;

}


.eco-content.active{

display:block;

}



@keyframes fade{

from{

opacity:0;
transform:translateY(15px);

}

to{

opacity:1;
transform:translateY(0);

}

}





/* ===================================
   SAME SIZE ALL CARDS
=================================== */


.eco-card{

    width:100%;

    height:520px;

    background:#141b23;

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    transition:.35s;

    box-shadow:
    0 15px 40px rgba(0,0,0,.15);

}



.eco-card:hover{

transform:translateY(-8px);

border-color:#00b4ff;

box-shadow:
0 18px 45px rgba(0,180,255,.15);

}







/* ===================================
   IMAGE SAME SIZE
=================================== */


.eco-image{

    width:100%;

    height:230px;

    flex-shrink:0;

    overflow:hidden;

}



.eco-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}







/* ===================================
   CONTENT SAME SIZE
=================================== */


.eco-body{

    height:290px;

    padding:28px;

    overflow:hidden;

}



.eco-body h3{

    color:#fff;

    font-size:22px;

    font-weight:700;

    line-height:1.35;

    margin-bottom:18px;

}



.eco-body p{

    color:#c8c8c8;

    font-size:15px;

    line-height:28px;

    margin:0;

}



.eco-body ul{

    margin:0;

    padding-left:18px;

}



.eco-body ul li{

    color:#c8c8c8;

    font-size:15px;

    line-height:28px;

    margin-bottom:8px;

}








/* ===================================
   IMPORTANT
   SAME WIDTH ALL TABS
=================================== */


.eco-content .row{

    align-items:stretch;

}



/* Tab 2,3,4 also same width */

.eco-content .col-lg-4,
.eco-content .col-lg-3{

    display:flex;

}



.eco-content .eco-card{

    width:100%;

}









/* ===================================
   LARGE DESKTOP
=================================== */


@media(min-width:1400px){


.eco-card{

height:540px;

}


.eco-image{

height:250px;

}


.eco-body{

height:290px;

}


}







/* ===================================
   LAPTOP
=================================== */


@media(max-width:1199px){


.eco-card{

height:500px;

}



.eco-image{

height:220px;

}



.eco-body{

height:280px;

padding:22px;

}



.eco-body h3{

font-size:20px;

}


}







/* ===================================
   TABLET
=================================== */


@media(max-width:991px){


.ecosystem-section{

padding:80px 0;

}



.eco-card{

height:500px;

}



}








/* ===================================
   MOBILE
=================================== */


@media(max-width:767px){


.ecosystem-section{

padding:60px 0;

}



.ecosystem-tabs{

flex-direction:column;

align-items:stretch;

}



.eco-tab{

width:100%;

text-align:center;

}



.eco-card{

height:auto;

min-height:480px;

}



.eco-image{

height:220px;

}



.eco-body{

height:auto;

padding:22px;

}



.eco-body h3{

font-size:19px;

}



.eco-body p{

font-size:14px;

line-height:25px;

}


}








/* ===================================
   SMALL MOBILE
=================================== */


@media(max-width:480px){


.eco-image{

height:200px;

}


.eco-body{

padding:18px;

}


.eco-body h3{

font-size:18px;

}


.ecosystem-desc{

font-size:15px;

}


}
/* ===================================
  form css
=================================== */
#subject option {
    color: #001f3f !important;
}
/* ===================================
   clients css
=================================== */
.company-supports-logo-prime img {
    max-height: 60px;
    width: auto;
    object-fit: contain;
}
/* Background Overlay */
.landing-modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.7);
    z-index:9999;
    justify-content:center;
    align-items:center;
    padding:20px;
}

/* Show Modal */
.landing-modal.show{
    display:flex;
}

/* Popup Box */
.modal-content{
    position:relative;
    width:90%;
    max-width:850px;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
}

/* Close Button */
.close-btn{
    position:absolute;
    top:12px;
    right:15px;
    font-size:32px;
    cursor:pointer;
    z-index:100;
    color:#000;
}

/* Slider */
.slider{
    position:relative;
    overflow:hidden;
}

.slide{
    display:none;
}

.slide.active{
    display:block;
}

.slide img{
    width:100%;
    display:block;
}

/* Arrows */
.arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:45px;
    height:45px;
    border:none;
    border-radius:50%;
    background:rgba(0,0,0,.6);
    color:#fff;
    font-size:24px;
    cursor:pointer;
    z-index:99;
}

.arrow.left{
    left:15px;
}

.arrow.right{
    right:15px;
}

.arrow:hover{
    background:#007bff;
}

/* Mobile */
@media(max-width:768px){

    .modal-content{
        width:95%;
    }

    .arrow{
        width:38px;
        height:38px;
        font-size:20px;
    }

    .close-btn{
        font-size:28px;
    }
}.hero-gold{
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

.hero-wrapper{
    min-height: 75vh;
    display: flex;
    align-items: center;
}

.hero-content-gold{
    padding-bottom: 50px;   /* ticker ke liye space */
}

.hero-bottom-ticker{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 10;
}

.hero-bottom-ticker .our-scrolling-ticker{
    margin: 0;
}
/* ================================
   GLOBAL THREAT SECTION
================================ */

.global-threat-section{
    padding:100px 0;
    overflow:hidden;
}

.global-threat-section .row{
    align-items:flex-start;
}

/* ================================
   LEFT SIDE
================================ */

.why-choose-content{
    height:100%;
}

.why-choose-item-list{
    margin-top:15px; /* Pehle 35px tha */
}

.why-choose-item{
    margin-bottom:25px;
}

/* Icon aur 75% / 65% ek line me */

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

.why-choose-item-header .icon-box{
    width:60px;
    height:60px;
    min-width:60px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.why-choose-item-header .icon-box img{
    width:100%;
    height:100%;
    object-fit:contain;
}

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

.why-choose-item-title h2{
    margin:0;
    display:flex;
    align-items:center;
    line-height:1;
}

/* ================================
   RIGHT SIDE 2x2 GRID
================================ */

.threat-grid-wrapper{
    position:relative;
    padding:30px;
}

.threat-grid{

    position:relative;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

    align-items:start; /* center se start */

}

/* ================================
   THREAT BOX DESIGN
================================ */

.feature-threat-box{

    background:#081b42;

    border:1px solid rgba(255,255,255,0.08);

    border-radius:22px;

    padding:35px 30px;

    min-height:230px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    transition:all .3s ease;

}

.feature-threat-box:hover{

    transform:translateY(-8px);

    border-color:#4d7cff;

}

.feature-threat-box .box-icon{

    width:55px;

    height:55px;

    margin-bottom:25px;

}

.feature-threat-box .box-icon img{

    width:100%;

    height:100%;

    object-fit:contain;

}

.feature-threat-box p{

    color:#d7def2;

    font-size:16px;

    line-height:1.7;

    margin:0;

}

/* ================================
   CENTER ROUND BADGE
================================ */

.threat-grid .get-in-touch-circle-prime{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:135px;

    height:135px;

    border-radius:50%;

    background:#4c7cff;

    padding:10px;

    z-index:5;

}

.threat-grid .get-in-touch-circle-prime img{

    width:100%;

    height:100%;

}

/* ================================
   RESPONSIVE
================================ */

@media(max-width:1199px){

    .threat-grid-wrapper{

        padding:20px;

    }

    .feature-threat-box{

        min-height:210px;

    }

}

@media(max-width:991px){

    .global-threat-section{

        padding:70px 0;

    }

    .threat-grid{

        margin-top:40px;

        grid-template-columns:1fr;
    }

}

@media(max-width:767px){

    .threat-grid{

        grid-template-columns:1fr;

    }

    .threat-grid .get-in-touch-circle-prime{

        display:none;

    }

    .feature-threat-box{

        min-height:auto;

    }

}/* ===== Percentage Card Layout Fix ===== */

.why-choose-item-header{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 18px;
}

.why-choose-item-header .icon-box{
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 60px;
    margin: 0 !important;
}

.why-choose-item-header .icon-box img{
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.why-choose-item-header .why-choose-item-title{
    display: flex !important;
    align-items: center;
    margin: 0 !important;
    width: auto !important;
}

.why-choose-item-header .why-choose-item-title h2{
    margin: 0 !important;
    line-height: 1;
    font-size: 52px;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.why-choose-item-content{
    margin-top: 18px;
}
/* section 3 */
/* =====================================================
   GLOBAL THREAT SECTION FINAL UPDATED CSS
===================================================== */


/* MAIN ROW */

.global-threat-row{
    display:flex;
    align-items:center;
}



/* LEFT RIGHT SPACING */

.global-threat-section .col-xl-5{
    padding-right:45px;
}


.global-threat-section .col-xl-7{
    padding-left:35px;
}



/* =====================================================
   LEFT SIDE 75% / 65% CARDS
===================================================== */


.global-threat-card{

    background:#151b46;

    border-radius:20px;

    padding:24px;

    margin-bottom:22px;

    transition:
    transform .4s ease,
    box-shadow .4s ease;

}



.global-threat-card:hover{

    transform:translateY(-5px);

    box-shadow:
    0 18px 40px rgba(0,0,0,.35);

}



.global-threat-card-head{

    display:flex;

    align-items:center;

    gap:18px;

}



.global-threat-icon{

    width:52px;

    height:52px;

    min-width:52px;

    border-radius:12px;

    background:
    linear-gradient(
        135deg,
        #2860ff,
        #638dff
    );


    display:flex;

    justify-content:center;

    align-items:center;

}



.global-threat-icon img{

    width:24px !important;

    height:24px !important;

    object-fit:contain !important;

}



.global-threat-card h2{

    color:#fff;

    font-size:46px;

    line-height:1;

    margin:0;

}



.global-threat-card p{

    color:#d7d9e5;

    font-size:15px;

    line-height:1.6;

    margin:0;

}





/* =====================================================
   RIGHT SIDE 4 BOX GRID
===================================================== */


.threat-image-grid{
    position:relative;
    display:grid;
    grid-template-columns:repeat(2,minmax(240px,1fr));
    gap:20px;
    width:100%;
    max-width:100%;
    margin-left:auto;
}



/* CARD */

.threat-image-card{
    position:relative;
    width:100%;
    min-height:250px;
    aspect-ratio:1 / .92;
    overflow:hidden;
    border-radius:20px;
    cursor:pointer;
    background:#08102f;
}



/* CONTINUOUS SPLIT IMAGE */
/* CONTINUOUS SPLIT IMAGE */
.threat-bg-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;

    /* Your downloaded image */
    background-image:url("../images/divideimage.png");
    background-repeat:no-repeat;

    /* One image divided into four parts */
    background-size:200% 200%;

    transition:
        transform .8s cubic-bezier(.2,.8,.2,1),
        filter .5s ease;
}

/* TOP LEFT */
.threat-quad-tl .threat-bg-img{
    background-position:0% 0%;
}

/* TOP RIGHT */
.threat-quad-tr .threat-bg-img{
    background-position:100% 0%;
}

/* BOTTOM LEFT */
.threat-quad-bl .threat-bg-img{
    background-position:0% 100%;
}

/* BOTTOM RIGHT */
.threat-quad-br .threat-bg-img{
    background-position:100% 100%;
}

.threat-image-card:hover .threat-bg-img{
    transform:scale(1.08);
    filter:brightness(.75);
}

/* QUADRANT BACKGROUND POSITIONS */
.threat-quad-tl .threat-bg-img {
    background-position: 0% 0%;
}
.threat-quad-tr .threat-bg-img {
    background-position: 100% 0%;
}
.threat-quad-bl .threat-bg-img {
    background-position: 0% 100%;
}
.threat-quad-br .threat-bg-img {
    background-position: 100% 100%;
}

.threat-image-card:hover .threat-bg-img {
    transform: scale(1.08);
    filter: brightness(.75);
}

/* OVERLAY */
.threat-overlay{
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        180deg,
        rgba(10,15,45,.25),
        rgba(5,10,35,.92)
    );
    transition:.5s ease;
}


/* CONTENT SPACING & OVERLAP FIX */
.threat-content{
    position:absolute;
    left:18px;
    right:18px;
    bottom:24px;
    z-index:2;
}

.threat-quad-tl .threat-content {
    bottom: 28px;
    padding-right: 36px;
}
.threat-quad-tr .threat-content {
    bottom: 28px;
    padding-left: 36px;
}
.threat-quad-bl .threat-content {
    bottom: 20px;
    padding-right: 36px;
}
.threat-quad-br .threat-content {
    bottom: 20px;
    padding-left: 36px;
}

/* ICON */
.threat-icon{
    width:48px;
    height:48px;
    border-radius:50%;
    background:linear-gradient(135deg, #2860ff 0%, #3662cc 50%, #79a0ff 100%);
    border:2px solid rgba(255, 255, 255, 0.35);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:12px;
    box-shadow:0 8px 20px rgba(40,96,255,.45);
    animation:threatIconFloat 3.5s ease-in-out infinite;
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.threat-icon img{
    width:24px !important;
    height:24px !important;
    object-fit:contain !important;
    filter:brightness(0) invert(1);
    transition:transform .35s ease;
}

@keyframes threatIconFloat {
    0%, 100% {
        transform: translateY(0);
        box-shadow: 0 8px 20px rgba(40, 96, 255, 0.45);
    }
    50% {
        transform: translateY(-6px);
        box-shadow: 0 14px 28px rgba(40, 96, 255, 0.65), 0 0 16px rgba(121, 160, 255, 0.45);
    }
}

/* TEXT */
.threat-content p{
    color:#fff;
    font-size:13.5px;
    line-height:1.55;
    margin:0;
}

/* =====================================================
   PREMIUM HOVER EFFECT
===================================================== */
.threat-image-card:hover{
    transform:
    translateY(-8px);
    box-shadow:
    0 25px 55px rgba(0,0,0,.45),
    0 0 30px rgba(40,96,255,.25);
}



.threat-image-card:hover > img{

    transform:scale(1.10);

    filter:brightness(.75);

}



.threat-image-card:hover .threat-overlay{

    background:

    linear-gradient(

        180deg,

        rgba(40,96,255,.25),

        rgba(5,10,35,.95)

    );

}



.threat-image-card:hover .threat-icon{

    transform:translateY(-4px) scale(1.08);

    box-shadow:

    0 0 25px rgba(40,96,255,.85),

    0 0 12px rgba(255,255,255,.5);

    border-color:rgba(255,255,255,.75);

}




/* =====================================================
   CENTER CIRCLE
===================================================== */

.threat-circle{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:10;
    width:120px;
    height:120px;
    border-radius:50%;
    background:radial-gradient(circle at 30% 30%, rgba(40, 96, 255, 0.45), rgba(1, 5, 53, 0.95)), rgba(5, 10, 35, 0.92);
    border:2px solid rgba(54, 98, 204, 0.5);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(54, 98, 204, 0.35);
    backdrop-filter:blur(8px);
    animation:centerCirclePulse 3.5s ease-in-out infinite;
    transition:transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}

.threat-circle img{
    width:82px;
    height:auto;
    max-height:82px;
    object-fit:contain;
    filter:drop-shadow(0 4px 12px rgba(0,0,0,0.45));
    transition:transform .4s ease;
}

.threat-circle:hover{
    transform:translate(-50%, -50%) scale(1.08);
    border-color:rgba(121, 160, 255, 0.85);
    box-shadow:0 15px 45px rgba(0, 0, 0, 0.7), 0 0 35px rgba(40, 96, 255, 0.65);
}

@keyframes centerCirclePulse{
    0%, 100%{
        transform:translate(-50%, -50%) scale(1);
        box-shadow:0 10px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(54, 98, 204, 0.35);
        border-color:rgba(54, 98, 204, 0.45);
    }
    50%{
        transform:translate(-50%, -50%) scale(1.04);
        box-shadow:0 14px 42px rgba(0, 0, 0, 0.75), 0 0 32px rgba(54, 98, 204, 0.65), 0 0 16px rgba(121, 160, 255, 0.45);
        border-color:rgba(121, 160, 255, 0.75);
    }
}





/* =====================================================
   RESPONSIVE
===================================================== */


@media(max-width:1199px){

    .global-threat-section .col-xl-5{

        padding-right:25px;

    }


    .threat-image-grid{

        max-width:520px;

    }

}



@media(max-width:991px){

.global-threat-row{
    row-gap:45px;
}

.global-threat-section .col-xl-5,
.global-threat-section .col-xl-7,
.global-threat-section .col-lg-5,
.global-threat-section .col-lg-7{
    width:100%;
    flex:0 0 100%;
    max-width:100%;
    padding:0 15px;
}

.global-threat-content{
    text-align:left;
}

.global-threat-cards{
    justify-content:center;
}

.threat-image-grid{
    width:100%;
    max-width:700px;
    margin:20px auto 0;
}

}



@media(max-width:767px){

.threat-image-grid{
    grid-template-columns:1fr;
    gap:18px;
}

.threat-image-card{
    min-height:280px;
}

.threat-content{
    left:20px;
    right:20px;
    bottom:22px;
    padding:0 !important;
}

.threat-content p{
    font-size:15px;
    line-height:1.6;
}

.threat-circle{
    display:none;
}

}
/* services line wise heading *//* SERVICE CARD HEADING ALIGN FIX */

.service-item-prime{
    height:100%;
}


.servie-item-body-prime{
    display:flex;
    flex-direction:column;
    height:100%;
}


.service-item-contant-prime h2{

    height:65px;

    margin-bottom:20px;

    display:flex;

    align-items:flex-start;

}


.service-item-contant-prime h2 a{

    line-height:1.25;

}



.service-item-contant-prime p{

    margin-top:0;
/* footer linkkedin */
}.footer-working-hour-box .footer-social-links{
    margin-top: 0;
}

.footer-working-hour-box .footer-social-links ul{
    justify-content: flex-start;
}

/* ==========================================================================
   Offensive Security Services Page Custom Styles (External CSS)
   - Primary Accent Color: #3662CC
   - Primary Navy Theme: #010535
   ========================================================================== */

/* Hero Header Custom Background */
.page-header-offensive-bg {
    background-image: linear-gradient(180deg, rgba(3, 11, 30, 0.82) 0%, rgba(3, 11, 30, 0.92) 100%), url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=1920&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
}

/* Page Typography & Text Contrast */
.intro-image-wrapper {
    max-width: 100%;
    border-radius: 16px;
    border: 1px solid rgba(54, 98, 204, 0.2);
    box-shadow: 0 20px 45px rgba(1, 5, 53, 0.14);
    overflow: hidden;
    margin-bottom: 28px;
}

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

.intro-lead-text {
    color: #010535 !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    line-height: 1.75 !important;
    margin-bottom: 1.25rem !important;
    border-left: 4px solid #3662CC;
    padding-left: 20px;
    background: rgba(54, 98, 204, 0.04);
    padding-top: 14px;
    padding-bottom: 14px;
    border-radius: 0 10px 10px 0;
}

.intro-body-text {
    color: #2E314D !important;
    font-size: 1.02rem !important;
    font-weight: 400 !important;
    line-height: 1.72 !important;
    margin-bottom: 2rem !important;
}

.section-title-dark {
    color: #010535 !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
}

.section-subtext {
    color: #4b5563 !important;
    font-size: 1rem !important;
    line-height: 1.65 !important;
    margin-bottom: 28px !important;
}

/* What We Offer Section Dark Cards */
.bg-dark-card {
    background: linear-gradient(145deg, #010535 0%, #060c42 100%) !important;
}

.offer-card {
    padding: 32px 28px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(54, 98, 204, 0.25) !important;
    box-shadow: 0 12px 30px rgba(1, 5, 53, 0.15) !important;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.offer-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(54, 98, 204, 0.28) !important;
    border-color: #3662CC !important;
}

.offer-icon-badge {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 14px;
    background: rgba(54, 98, 204, 0.15) !important;
    border: 1px solid rgba(54, 98, 204, 0.4);
    box-shadow: 0 0 18px rgba(54, 98, 204, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    transition: all 0.3s ease;
}

.offer-card:hover .offer-icon-badge {
    background: rgba(54, 98, 204, 0.25) !important;
    box-shadow: 0 0 22px rgba(54, 98, 204, 0.4);
    transform: scale(1.06);
}

.offer-card h3 {
    font-size: 1.18rem;
    font-weight: 600;
    color: #ffffff !important;
    margin-bottom: 12px;
    line-height: 1.4;
}

.offer-card-text {
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, 0.78) !important;
}

.hover-scale {
    transition: transform 0.5s ease;
}

.hover-scale:hover {
    transform: scale(1.025);
}

/* Dual Architecture Layout (Our Approach & What You Gain) */
.dual-architecture-wrapper {
    background: linear-gradient(135deg, #010535 0%, #081142 100%);
    border: 1px solid rgba(54, 98, 204, 0.35);
    border-radius: 24px;
    padding: 42px 32px;
    box-shadow: 0 20px 45px rgba(1, 5, 53, 0.25);
    position: relative;
    margin-top: 3rem !important;
    margin-bottom: 2rem !important;
}

.arch-card-gain,
.arch-card-approach {
    background: #040a45;
    border: 1.5px solid rgba(54, 98, 204, 0.45);
    border-radius: 18px;
    padding: 32px 26px;
    transition: all 0.35s ease;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    height: 100%;
}

.arch-card-gain:hover,
.arch-card-approach:hover {
    border-color: #3662CC;
    box-shadow: 0 14px 38px rgba(54, 98, 204, 0.35);
    transform: translateY(-4px);
}

.arch-card-header-gain,
.arch-card-header-approach {
    border-bottom: 1px solid rgba(54, 98, 204, 0.3);
    padding-bottom: 14px;
    margin-bottom: 22px;
}

.arch-icon-gain,
.arch-icon-approach,
.arch-title-gain,
.arch-title-approach {
    color: #3662CC !important;
    letter-spacing: 1.5px;
    font-weight: 700;
    font-size: 1.1rem !important;
}

.hub-badge-circle {
    width: 144px;
    height: 144px;
    border-radius: 50%;
    background: radial-gradient(circle, #081142 0%, #010535 100%);
    border: 2px solid #3662CC;
    box-shadow: 0 0 25px rgba(54, 98, 204, 0.35), inset 0 0 15px rgba(54, 98, 204, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto 28px auto;
    animation: pulseGlow 4s infinite alternate;
}

.hub-text-accent {
    color: #3662CC;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.hub-text-main {
    color: #FFFFFF;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
}

.hub-text-sub {
    color: #3662CC;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

@keyframes pulseGlow {
    0% { box-shadow: 0 0 16px rgba(54, 98, 204, 0.3); border-color: #3662CC; }
    100% { box-shadow: 0 0 32px rgba(54, 98, 204, 0.6); border-color: #3662CC; }
}

.arch-list-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
    color: #FFFFFF;
    font-size: 0.96rem;
    line-height: 1.6;
}

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

.gain-bullet,
.approach-bullet {
    width: 9px;
    height: 9px;
    min-width: 9px;
    border-radius: 50%;
    background-color: #3662CC;
    box-shadow: 0 0 9px rgba(54, 98, 204, 0.8);
    margin-top: 7px;
}

/* ==========================================================================
   Sidebar Navigation & CTA Box Styles
   ========================================================================== */

@media (min-width: 992px) {
    .page-single-sidebar {
        position: sticky;
        top: 110px;
    }
}

.page-category-list {
    background: #ffffff;
    border-radius: 18px;
    padding: 28px 24px;
    border: 1px solid rgba(1, 5, 53, 0.1);
    box-shadow: 0 10px 30px rgba(1, 5, 53, 0.06);
    margin-bottom: 30px;
}

.page-category-list-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #010535;
    margin-bottom: 22px;
    padding-bottom: 12px;
    border-bottom: 2px solid #3662CC;
}

.page-category-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-category-list ul li {
    margin: 0;
}

.page-category-list ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    border-radius: 10px;
    color: #2E314D;
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s ease;
    background: #F8FAFC;
    border: 1px solid rgba(1, 5, 53, 0.05);
}

.page-category-list ul li a:hover {
    background: rgba(54, 98, 204, 0.08);
    color: #3662CC;
    border-color: rgba(54, 98, 204, 0.2);
    transform: translateX(4px);
}

.page-category-list ul li.active a {
    background: #010535 !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(1, 5, 53, 0.22);
    border-color: #010535;
}

/* Sidebar CTA Box */
.sidebar-cta-box {
    background: linear-gradient(160deg, #010535 0%, #060d45 100%);
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(54, 98, 204, 0.3);
    box-shadow: 0 15px 35px rgba(1, 5, 53, 0.2);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.sidebar-cta-box:hover {
    box-shadow: 0 20px 45px rgba(54, 98, 204, 0.3);
}

.sidebar-cta-image figure {
    margin: 0;
    overflow: hidden;
    height: 200px;
}

.sidebar-cta-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.sidebar-cta-box:hover .sidebar-cta-image img {
    transform: scale(1.06);
}

.sidebar-cta-body {
    padding: 26px 22px;
    text-align: center;
}

.sidebar-cta-content h2 {
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.55;
    margin-bottom: 22px;
}

.sidebar-cta-contact-btn a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 22px;
    border-radius: 30px;
    background: #3662CC;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(54, 98, 204, 0.4);
    transition: all 0.3s ease;
}

.sidebar-cta-contact-btn a:hover {
    background: #274fb0;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(54, 98, 204, 0.55);
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .dual-architecture-wrapper {
        padding: 32px 20px;
    }
    
    .arch-card-gain,
    .arch-card-approach {
        padding: 26px 20px;
    }

    .page-category-list {
        margin-bottom: 35px;
    }
}

/* ==========================================================================
   Managed Security - Intrinsic Protect Specific Enhancements
   ========================================================================== */

/* Hero Section Enhancements */
.hero-managed-security {
    position: relative;
    padding: 120px 0 100px;
    background: var(--primary-color);
    overflow: hidden;
}

.hero-managed-security::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(54, 98, 204, 0.25) 0%, rgba(1, 5, 53, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

.hero-managed-security::after {
    content: '';
    position: absolute;
    bottom: -15%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(54, 98, 204, 0.15) 0%, rgba(1, 5, 53, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

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

.hero-badge-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(54, 98, 204, 0.15);
    border: 1px solid rgba(54, 98, 204, 0.35);
    color: #6a95fc;
    font-family: var(--accent-font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 18px;
    border-radius: 50px;
    margin-bottom: 24px;
}

.hero-badge-tag i {
    font-size: 12px;
    color: var(--accent-color);
}

.hero-managed-title {
    font-family: var(--accent-font);
    font-size: 54px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--white-color);
    margin-bottom: 24px;
}

.hero-managed-desc {
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 36px;
    max-width: 580px;
}

.hero-btn-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 40px;
}

.hero-stats-row {
    display: flex;
    align-items: center;
    gap: 30px;
    padding-top: 25px;
    border-top: 1px solid var(--dark-divider-color);
}

.hero-stat-item h4 {
    font-size: 26px;
    font-weight: 700;
    color: var(--white-color);
    margin-bottom: 4px;
}

.hero-stat-item p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Hero Image Box & Floating Overlay Cards */
.hero-visual-wrapper {
    position: relative;
    z-index: 2;
}

.hero-visual-image figure {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
}

.hero-visual-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 4 / 3;
    transition: transform 0.6s ease;
}

.hero-visual-image:hover img {
    transform: scale(1.03);
}

.hero-floating-card {
    position: absolute;
    background: rgba(1, 5, 53, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(54, 98, 204, 0.35);
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
    z-index: 3;
    animation: floatAnimation 4s ease-in-out infinite alternate;
}

.hero-floating-card-top {
    top: 25px;
    right: -20px;
}

.hero-floating-card-bottom {
    bottom: 25px;
    left: -20px;
    animation-delay: 2s;
}

@keyframes floatAnimation {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-10px); }
}

.hero-card-icon {
    width: 44px;
    height: 44px;
    background: rgba(54, 98, 204, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6a95fc;
    font-size: 20px;
    flex-shrink: 0;
}

.hero-card-info h5 {
    color: var(--white-color);
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 2px;
}

.hero-card-info p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    margin: 0;
}

/* Pricing Card Popular Accent */
.pricing-item.featured-plan {
    border: 2px solid var(--accent-color);
    position: relative;
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(54, 98, 204, 0.2);
}

.pricing-badge-popular {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--accent-color);
    color: var(--white-color);
    font-family: var(--accent-font);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 5px 14px;
    border-radius: 30px;
}

.pricing-item-list ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    color: var(--text-color);
    font-size: 15px;
}

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

/* Ecosystem Feature Cards (Problem 5) */
.feature-card-item {
    background: var(--secondary-color);
    border-radius: 20px;
    padding: 35px 30px;
    height: 100%;
    border: 1px solid rgba(1, 5, 53, 0.08);
    box-shadow: 0 10px 30px rgba(1, 5, 53, 0.04);
    transition: all 0.4s ease-in-out;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.dark-section .feature-card-item {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.feature-card-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease-in-out;
}

.feature-card-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(1, 5, 53, 0.12);
}

.dark-section .feature-card-item:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    background: rgba(255, 255, 255, 0.06);
}

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

.feature-card-icon {
    width: 65px;
    height: 65px;
    background: rgba(54, 98, 204, 0.1);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    transition: all 0.4s ease;
}

.feature-card-icon i {
    font-size: 28px;
    color: var(--accent-color);
}

.feature-card-item:hover .feature-card-icon {
    background: var(--accent-color);
}

.feature-card-item:hover .feature-card-icon i {
    color: var(--white-color);
}

.feature-card-item h3 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 14px;

}

.dark-section .feature-card-item h3 {
    color: var(--white-color);
}

.feature-card-item p {
    font-size: 15px;
    line-height: 1.65;
    margin: 0;
}

.dark-section .feature-card-item p {
    color: rgba(255, 255, 255, 0.75);
}

/* Integration Grid Section (Problem 6) */
.integrations-section {
    padding: 100px 0;
    background: var(--bg-color);
}

.integration-box {
    background: var(--white-color);
    border-radius: 16px;
    padding: 24px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid rgba(1, 5, 53, 0.08);
    box-shadow: 0 8px 20px rgba(1, 5, 53, 0.03);
    transition: all 0.35s ease;
    height: 100%;
}

.integration-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(54, 98, 204, 0.12);
    border-color: rgba(54, 98, 204, 0.3);
}

.integration-icon {
    width: 48px;
    height: 48px;
    background: rgba(54, 98, 204, 0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--accent-color);
    flex-shrink: 0;
}

.integration-info h5 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 2px;
}

.integration-info p {
    font-size: 13px;
    color: #666;
    margin: 0;
}

/* Call to Action Banner */
.cta-managed-banner {
    position: relative;
    background: linear-gradient(135deg, #010535 0%, #0c165a 100%);
    border-radius: 24px;
    padding: 60px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 60px rgba(1, 5, 53, 0.3);
}

.cta-managed-banner::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(54, 98, 204, 0.3) 0%, rgba(1, 5, 53, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.cta-managed-content h2 {
    color: var(--white-color);
    font-size: 38px;
    font-weight: 600;
    margin-bottom: 16px;
}

.cta-managed-content p {
    color: rgba(255, 255, 255, 0.82);
    font-size: 17px;
    margin-bottom: 30px;
    max-width: 650px;
}

/* Responsiveness for custom additions */
@media (max-width: 1199px) {
    .hero-managed-title {
        font-size: 44px;
    }
}

@media (max-width: 991px) {
    .hero-managed-security {
        padding: 90px 0 70px;
    }
    .hero-managed-title {
        font-size: 38px;
    }
    .hero-floating-card-top {
        right: 0px;
        top: 10px;
    }
    .hero-floating-card-bottom {
        left: 0px;
        bottom: 10px;
    }
    .pricing-item.featured-plan {
        transform: none;
        margin-top: 20px;
    }
    .cta-managed-banner {
        padding: 40px 30px;
    }
    .cta-managed-content h2 {
        font-size: 30px;
    }
}

@media (max-width: 767px) {
    .hero-managed-title {
        font-size: 32px;
    }
    .hero-managed-desc {
        font-size: 16px;
    }
    .hero-floating-card {
        display: none;
    }
    .hero-stats-row {
        flex-wrap: wrap;
        gap: 20px;
    }
    .cta-managed-banner {
        padding: 30px 20px;
    }
    .cta-managed-content h2 {
        font-size: 26px;
    }
}

@media (max-width: 575px) {
    .hero-managed-title {
        font-size: 28px;
    }
    .hero-btn-group {
        flex-direction: column;
        align-items: stretch;
    }
    .hero-btn-group .btn-default {
        text-align: center;
    }
}

/*==================================================
Cyber Challenge Section
==================================================*/

.security-challenges-section{
    position:relative;
    padding:120px 0;
    background:linear-gradient(180deg,#f7f9ff 0%,#ffffff 100%);
    overflow:hidden;
}

/* Grid Background */

.security-challenges-section::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(54,98,204,.05) 1px,transparent 1px),
        linear-gradient(90deg,rgba(54,98,204,.05) 1px,transparent 1px);
    background-size:40px 40px;
    animation:gridMove 15s linear infinite;
    pointer-events:none;
}

/* Glow Circle */

.security-challenges-section::after{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    background:radial-gradient(circle,
    rgba(54,98,204,.15),
    transparent 70%);
    top:-150px;
    right:-150px;
    filter:blur(20px);
    animation:floatGlow 8s ease-in-out infinite;
}

@keyframes gridMove{

0%{
transform:translateY(0);
}

100%{
transform:translateY(40px);
}

}

@keyframes floatGlow{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(40px);
}

}

/*===========================*/

.cyber-card{

position:relative;

height:100%;

padding:45px;

border-radius:24px;

background:rgba(255,255,255,.92);

border:1px solid rgba(54,98,204,.10);

overflow:hidden;

transition:.45s ease;

backdrop-filter:blur(12px);

cursor:pointer;

box-shadow:0 15px 35px rgba(1,5,53,.05);

}

/* Animated Border */

.cyber-card::before{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;

height:3px;

background:linear-gradient(90deg,
transparent,
var(--accent-color),
transparent);

transition:.8s;

}

.cyber-card:hover::before{

left:100%;

}

.cyber-card:hover{

transform:translateY(-15px);

box-shadow:0 25px 60px rgba(1,5,53,.12);

border-color:rgba(54,98,204,.35);

}

/*========================*/

.card-glow{

position:absolute;

width:250px;

height:250px;

background:radial-gradient(circle,
rgba(54,98,204,.18),
transparent 70%);

top:-120px;

right:-120px;

opacity:0;

transition:.5s;

}

.cyber-card:hover .card-glow{

opacity:1;

}

/*========================*/

.cyber-icon{

width:80px;

height:80px;

border-radius:22px;

display:flex;

align-items:center;

justify-content:center;

background:rgba(54,98,204,.08);

margin-bottom:30px;

transition:.45s;

}

.cyber-icon i{

font-size:34px;

color:var(--accent-color);

transition:.45s;

}

.cyber-card:hover .cyber-icon{

background:var(--accent-color);

transform:rotate(-8deg) scale(1.08);

}

.cyber-card:hover .cyber-icon i{

color:#fff;

}

/*========================*/

.cyber-card h3{

font-size:28px;

font-weight:700;

color:var(--primary-color);

margin-bottom:18px;

transition:.4s;

}

.cyber-card p{

font-size:16px;

line-height:1.8;

color:var(--text-color);

margin-bottom:0;

}

/*========================*/

.card-number{

position:absolute;

right:35px;

bottom:25px;

font-size:90px;

font-weight:700;

color:rgba(54,98,204,.05);

transition:.45s;

user-select:none;

}

.cyber-card:hover .card-number{

transform:scale(1.15);

color:rgba(54,98,204,.12);

}

/*========================*/

.cyber-card:hover h3{

color:var(--accent-color);

}/*====================================================
 SECURITY SLIDER SECTION
====================================================*/
/*==================================================
SECURITY SLIDER SECTION
==================================================*/

.security-slider-section{
    position:relative;
    padding:100px 0;
    overflow:hidden;
    background:var(--bg-color);
    isolation:isolate;
}

/* Animated Grid */
.security-slider-section::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(54,98,204,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(54,98,204,.04) 1px, transparent 1px);
    background-size:48px 48px;
    animation:gridMove 18s linear infinite;
    pointer-events:none;
    z-index:-2;
}

/* Aurora Glow */
.security-slider-section::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 20% 20%, rgba(54,98,204,.08), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(0,225,255,.08), transparent 35%);
    animation:aurora 12s ease-in-out infinite alternate;
    pointer-events:none;
    z-index:-1;
}

@keyframes gridMove{
    from{transform:translateY(0);}
    to{transform:translateY(48px);}
}

@keyframes aurora{

    0%{
        transform:scale(1) translate(0,0);
    }

    50%{
        transform:scale(1.08) translate(-30px,-20px);
    }

    100%{
        transform:scale(1.1) translate(20px,25px);
    }

}

.securityChallengeSlider{
    margin-top:60px;
    padding:10px 5px 35px;
}

.securityChallengeSlider .swiper-slide{
    height:auto;
    display:flex;
}

/*==================================================
PREMIUM CARD
==================================================*/

.challenge-slider-card{

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    width:100%;

    min-height:280px;

    padding:32px;

    border-radius:24px;

    background:
        linear-gradient(
        180deg,
        #ffffff 0%,
        #f8fbff 100%);

    border:1px solid rgba(54,98,204,.10);

    box-shadow:
        0 12px 35px rgba(1,5,53,.08);

    transition:
        transform .65s cubic-bezier(.22,1,.36,1),
        box-shadow .65s ease,
        border-color .45s ease,
        background .45s ease;

    transform-style:preserve-3d;

    will-change:transform;
}

/* Animated Border Glow */

.challenge-slider-card::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:inherit;

    background:
        linear-gradient(
        135deg,
        transparent,
        rgba(54,98,204,.50),
        rgba(0,225,255,.40),
        transparent);

    opacity:0;

    filter:blur(18px);

    transition:opacity .5s ease;

}

/* Aurora Circle */

.challenge-slider-card::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    top:-120px;

    right:-120px;

    border-radius:50%;

    background:
        radial-gradient(circle,
        rgba(54,98,204,.18),
        transparent 70%);

    opacity:0;

    transition:
        opacity .6s ease,
        transform .8s ease;

}

/* Hover */

.challenge-slider-card:hover{

    transform:
        perspective(1200px)
        rotateX(5deg)
        rotateY(-5deg)
        translateY(-14px)
        scale(1.03);

    border-color:
        rgba(54,98,204,.35);

    box-shadow:
        0 30px 70px rgba(1,5,53,.18),
        0 12px 35px rgba(54,98,204,.18);

}

/* .challenge-slider-card:hover::before{

    opacity:1;

}

.challenge-slider-card:hover::after{

    opacity:1;

    transform:scale(1.35);

}
========================================== 	
   FORCE CHALLENGE CARD HOVER COLOR
========================================== */	


.security-slider-section .swiper-slide .challenge-slider-card:hover{

    background:

    linear-gradient(
    135deg,
    #010535 0%,
    #3662CC 100%
    ) !important;


    border-color:#3662CC !important;


}





.security-slider-section .swiper-slide .challenge-slider-card:hover h3{


    color:#ffffff !important;


}




.security-slider-section .swiper-slide .challenge-slider-card:hover p{


    color:rgba(255,255,255,.88) !important;


}




.security-slider-section .swiper-slide .challenge-slider-card:hover .challenge-icon{


    background:#ffffff !important;


    border-color:#ffffff !important;


}





.security-slider-section .swiper-slide .challenge-slider-card:hover .challenge-icon i{


    color:#3662CC !important;


}

/* Entry Animation */

.challenge-slider-card{

    animation:
        cardReveal .9s cubic-bezier(.22,1,.36,1) both;

}

@keyframes cardReveal{

    from{

        opacity:0;

        transform:
            translateY(45px)
            scale(.96);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}/*==================================================
ICON DESIGN
==================================================*/

.challenge-icon{

    position:relative;

    width:72px;

    height:72px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:22px;

    background:
    linear-gradient(
    135deg,
    rgba(54,98,204,.12),
    rgba(0,225,255,.08));

    border:1px solid rgba(54,98,204,.15);

    overflow:hidden;

    transition:

    transform .6s cubic-bezier(.22,1,.36,1),

    background .45s ease,

    box-shadow .5s ease,

    border-color .45s ease;

    animation:

    iconFloat 4s ease-in-out infinite;

}


/* Icon Glow Layer */

.challenge-icon::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(
    circle,
    rgba(0,225,255,.35),
    transparent 70%);

    opacity:0;

    transform:scale(.5);

    transition:

    opacity .45s ease,

    transform .55s ease;

}


/* Icon */

.challenge-icon i{

    position:relative;

    z-index:2;

    font-size:28px;

    color:var(--accent-color);

    transition:

    transform .45s ease,

    color .35s ease;

}



/* Hover Icon */

.challenge-slider-card:hover .challenge-icon{

    background:

    linear-gradient(
    135deg,
    #3662CC,
    #00c6ff);

    border-color:transparent;

    transform:

    translateY(-8px)

    rotate(-10deg)

    scale(1.12);

    box-shadow:

    0 18px 40px rgba(54,98,204,.35);

}


.challenge-slider-card:hover .challenge-icon::before{

    opacity:1;

    transform:scale(1.2);

}


.challenge-slider-card:hover .challenge-icon i{

    color:#fff;

    transform:

    scale(1.15)

    rotate(10deg);

}


/*==================================================
FLOAT ANIMATION
==================================================*/

@keyframes iconFloat{

    0%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-7px);

    }


    100%{

        transform:translateY(0);

    }

}



/*==================================================
CARD HEADING
==================================================*/


.challenge-slider-card h3{

    position:relative;

    z-index:2;

    font-size:22px;

    line-height:1.35;

    font-weight:700;

    color:var(--primary-color);

    margin-bottom:14px;


    transition:

    color .35s ease,

    transform .45s cubic-bezier(.22,1,.36,1);

}



.challenge-slider-card:hover h3{

    color:var(--accent-color);

    transform:

    translateX(7px);

}



/*==================================================
CARD DESCRIPTION
==================================================*/


.challenge-slider-card p{

    position:relative;

    z-index:2;

    margin:0;

    font-size:15.5px;

    line-height:1.75;

    color:var(--text-color);


    transition:

    color .35s ease,

    transform .45s ease;

}



.challenge-slider-card:hover p{

    color:#27324a;

    transform:

    translateY(4px);

}



/*==================================================
NUMBER STYLE
==================================================*/


.challenge-count{

    position:absolute;

    top:18px;

    right:22px;

    font-size:46px;

    font-weight:800;

    line-height:1;

    color:

    rgba(54,98,204,.08);

    transition:

    transform .5s ease,

    color .4s ease;

}


.challenge-slider-card:hover .challenge-count{

    transform:

    scale(1.25)

    rotate(8deg);

    color:

    rgba(54,98,204,.18);

}



/*==================================================
CARD SHINE EFFECT
==================================================*/


.challenge-slider-card .shine{

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:

    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.7),
    transparent);

    transform:

    skewX(-25deg);

    transition:

    left .9s ease;

}



.challenge-slider-card:hover .shine{

    left:150%;

}



/*==================================================
SMOOTH SWIPER EFFECT
==================================================*/


.securityChallengeSlider .swiper-slide{

    transition:

    transform .5s ease,

    opacity .5s ease;

}


.securityChallengeSlider .swiper-slide-active{

    transform:

    translateY(-5px);

}


/*==================================================
FADE IN DELAY FOR CARDS
==================================================*/


.challenge-slider-card:nth-child(1){

    animation-delay:.1s;

}

.challenge-slider-card:nth-child(2){

    animation-delay:.2s;

}

.challenge-slider-card:nth-child(3){

    animation-delay:.3s;

}

.challenge-slider-card:nth-child(4){

    animation-delay:.4s;

}

.challenge-slider-card:nth-child(5){

    animation-delay:.5s;

}/*==================================================
 LARGE DESKTOP
==================================================*/

@media(min-width:1400px){

.security-slider-section{

    padding:120px 0;

}


.securityChallengeSlider{

    margin-top:70px;

}


.challenge-slider-card{

    min-height:300px;

    padding:38px;

}


.challenge-slider-card h3{

    font-size:24px;

}


.challenge-slider-card p{

    font-size:16px;

}

}



/*==================================================
 DESKTOP
==================================================*/

@media(max-width:1199px){


.security-slider-section{

    padding:90px 0;

}


.securityChallengeSlider{

    margin-top:55px;

}


.challenge-slider-card{

    min-height:270px;

    padding:28px;

}


.challenge-icon{

    width:66px;

    height:66px;

    border-radius:20px;

}


.challenge-icon i{

    font-size:25px;

}


.challenge-slider-card h3{

    font-size:21px;

}


.challenge-slider-card p{

    font-size:15px;

}


}





/*==================================================
 TABLET
==================================================*/

@media(max-width:991px){


.security-slider-section{

    padding:80px 0;

}



.security-slider-section::before{

    background-size:35px 35px;

}



.securityChallengeSlider{

    margin-top:45px;

    padding-bottom:25px;

}



.challenge-slider-card{

    min-height:250px;

    padding:26px 24px;

    border-radius:20px;

}



.challenge-slider-card:hover{

    transform:

    translateY(-10px)

    scale(1.02);

}



.challenge-icon{

    width:62px;

    height:62px;

    margin-bottom:18px;

}



.challenge-icon i{

    font-size:23px;

}



.challenge-slider-card h3{

    font-size:20px;

}



.challenge-slider-card p{

    font-size:14px;

    line-height:1.65;

}



.challenge-count{

    font-size:38px;

}



}





/*==================================================
 MOBILE
==================================================*/

@media(max-width:767px){


.security-slider-section{

    padding:65px 0;

}



.security-slider-section::before{

    animation-duration:25s;

}



.securityChallengeSlider{

    margin-top:35px;

    padding:

    10px 5px 25px;

}



.challenge-slider-card{

    min-height:auto;

    padding:24px 20px;

    border-radius:18px;

}



.challenge-slider-card:hover{

    transform:

    translateY(-7px)

    scale(1.01);

}



.challenge-slider-card::before{

    filter:blur(12px);

}



.challenge-icon{

    width:58px;

    height:58px;

    border-radius:16px;

    margin-bottom:16px;

}



.challenge-icon i{

    font-size:21px;

}



.challenge-slider-card h3{

    font-size:19px;

    margin-bottom:10px;

}



.challenge-slider-card p{

    font-size:14px;

    line-height:1.6;

}



.challenge-count{

    font-size:32px;

    top:15px;

    right:16px;

}



}





/*==================================================
 SMALL MOBILE
==================================================*/

@media(max-width:575px){


.security-slider-section{

    padding:55px 0;

}



.securityChallengeSlider{

    margin-top:30px;

}



.challenge-slider-card{

    padding:22px 18px;

    border-radius:16px;

}



.challenge-icon{

    width:54px;

    height:54px;

}



.challenge-icon i{

    font-size:20px;

}



.challenge-slider-card h3{

    font-size:18px;

}



.challenge-slider-card p{

    font-size:13.5px;

}



.challenge-count{

    display:none;

}



}





/*==================================================
 EXTRA SMALL DEVICES
==================================================*/

@media(max-width:380px){


.challenge-slider-card{

    padding:20px 16px;

}



.challenge-icon{

    width:50px;

    height:50px;

}



.challenge-icon i{

    font-size:18px;

}



.challenge-slider-card h3{

    font-size:17px;

}



.challenge-slider-card p{

    font-size:13px;

}


}





/*==================================================
 TOUCH DEVICES
==================================================*/

@media(hover:none){


.challenge-slider-card:hover{

    transform:none;

    box-shadow:

    0 12px 35px rgba(1,5,53,.08);

}



.challenge-slider-card:hover .challenge-icon{

    transform:none;

}



}





/*==================================================
 REDUCED MOTION
==================================================*/

@media(prefers-reduced-motion:reduce){


*{

    animation:none!important;

    transition:none!important;

    scroll-behavior:auto!important;

}


}/*==================================================
 WHAT DOES - PREMIUM MODERN SECTION
==================================================*/
.what-does-modern .feature-row{
    padding:25px 30px !important;
    margin-bottom:15px;
    display:flex;
    align-items:flex-start;
    gap:25px;
}.what-does-modern .feature-row:first-child{
    padding-left:30px !important;
}@media(max-width:767px){

    .what-does-modern .feature-row{
        flex-direction:column;
        align-items:center;
        text-align:center;
        padding:25px 20px !important;
        gap:15px;
    }


    .what-does-modern .feature-icon{
        margin:0 auto !important;
        display:flex;
        justify-content:center;
        align-items:center;
    }


    .what-does-modern .feature-row h4{
        text-align:center;
    }


    .what-does-modern .feature-row p{
        text-align:center;
    }

}

.what-does-modern{

    position:relative;

    padding:110px 0;

    background:#ffffff;

    overflow:hidden;

    isolation:isolate;

}



/* BACKGROUND GRID */

.what-does-modern::before{

    content:"";

    position:absolute;

    inset:0;


    background-image:

    linear-gradient(
    rgba(54,98,204,.045) 1px,
    transparent 1px
    ),

    linear-gradient(
    90deg,
    rgba(54,98,204,.045) 1px,
    transparent 1px
    );


    background-size:45px 45px;


    animation:

    gridMoveModern 18s linear infinite;


    opacity:.7;

}



@keyframes gridMoveModern{

    from{

        transform:translateY(0);

    }


    to{

        transform:translateY(45px);

    }

}





/* GLOW */

.what-does-modern::after{

    content:"";

    position:absolute;


    width:650px;

    height:650px;


    right:-250px;

    top:-180px;


    background:

    radial-gradient(
    circle,
    rgba(54,98,204,.16),
    transparent 70%
    );


    animation:

    glowMove 10s ease-in-out infinite alternate;


}



@keyframes glowMove{


    from{

        transform:scale(1);

    }


    to{

        transform:scale(1.15);

    }

}





/* WRAPPER */


.modern-wrapper{

    position:relative;

    z-index:2;

    margin-top:70px;

}






/*==================================================
 IMAGE
==================================================*/


.modern-image{

    position:relative;

    z-index:2;

    padding:15px;

    animation:

    imageFloat 5s ease-in-out infinite;

}



@keyframes imageFloat{


    0%,100%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-8px);

    }

}





.image-bg{


    position:absolute;


    inset:0;


    border-radius:30px;


    background:

    linear-gradient(
    135deg,
    #3662CC,
    #010535
    );


    transform:rotate(-4deg);


    transition:

    transform .7s cubic-bezier(.22,1,.36,1);


}




.modern-image img{


    width:100%;


    position:relative;

    z-index:2;


    border-radius:26px;


    display:block;


    box-shadow:

    0 25px 60px rgba(1,5,53,.18);


    transition:

    transform .7s cubic-bezier(.22,1,.36,1),

    box-shadow .5s ease;


}




.modern-image:hover img{


    transform:

    translateY(-12px)

    scale(1.03);


    box-shadow:

    0 40px 80px rgba(1,5,53,.25);


}




.modern-image:hover .image-bg{


    transform:

    rotate(-7deg)

    scale(1.05);


}







/*==================================================
 CONTENT
==================================================*/


.modern-content{

    padding-left:45px;

}





/* FEATURE ROW */


.feature-row{


    position:relative;


    display:flex;


    align-items:flex-start;


    gap:22px;


    padding:25px 0;


    border-bottom:

    1px solid rgba(1,5,53,.08);


    transition:

    transform .5s cubic-bezier(.22,1,.36,1);


    overflow:hidden;


}



/* Bottom Animated Line */


.feature-row::before{


    content:"";


    position:absolute;


    bottom:0;


    left:0;


    width:0;


    height:2px;


    background:

    linear-gradient(
    90deg,
    #3662CC,
    #00d9ff
    );


    transition:

    width .5s ease;


}



.feature-row:hover::before{


    width:100%;


}




.feature-row:hover{


    transform:

    translateX(10px);


}







/*==================================================
 ICON
==================================================*/


.feature-icon{


    width:68px;


    min-width:68px;


    height:68px;


    border-radius:20px;


    display:flex;


    align-items:center;


    justify-content:center;


    background:

    linear-gradient(
    135deg,
    #f3f6fc,
    #ffffff
    );


    border:

    1px solid rgba(54,98,204,.12);


    transition:


    transform .55s cubic-bezier(.22,1,.36,1),

    background .45s ease,

    box-shadow .45s ease;


}





.feature-icon i{


    font-size:26px;


    color:#3662CC;


    transition:


    transform .4s ease,

    color .35s ease;


}




.feature-row:hover .feature-icon{


    background:

    linear-gradient(
    135deg,
    #3662CC,
    #00c6ff
    );


    transform:


    translateY(-7px)

    scale(1.08);


    box-shadow:

    0 18px 40px rgba(54,98,204,.30);


}




.feature-row:hover .feature-icon i{


    color:#ffffff;


    transform:

    scale(1.15);


}








/*==================================================
 TEXT
==================================================*/


.feature-row h4{


    font-size:22px;


    font-weight:700;


    color:#010535;


    margin-bottom:8px;


    transition:


    color .35s ease,

    transform .4s ease;


}




.feature-row:hover h4{


    color:#3662CC;


    transform:

    translateX(5px);


}




.feature-row p{


    margin:0;


    font-size:15px;


    line-height:1.8;


    color:#5b6174;


    transition:

    transform .4s ease;


}




.feature-row:hover p{


    transform:

    translateX(3px);


}







/*==================================================
 TITLE
==================================================*/


.what-does-modern .section-title h2{


    color:#010535;

}



.what-does-modern .section-title p{


    max-width:720px;


    margin:20px auto 0;


    color:#616779;


    line-height:1.8;


}








/*==================================================
 TABLET
==================================================*/


@media(max-width:991px){


.what-does-modern{

    padding:85px 0;

}



.modern-content{

    padding-left:0;

    margin-top:50px;

}



.feature-row:hover{

    transform:

    translateX(5px);

}



.feature-row h4{

    font-size:20px;

}



}







/*==================================================
 MOBILE
==================================================*/


@media(max-width:767px){


.what-does-modern{

    padding:70px 0;

}



.modern-image{

    padding:10px;

}



.feature-row{

    gap:15px;

    padding:20px 0;

}



.feature-icon{


    width:58px;


    min-width:58px;


    height:58px;


}



.feature-icon i{

    font-size:22px;

}



.feature-row h4{

    font-size:19px;

}



.feature-row p{

    font-size:14px;

}



}







/*==================================================
 SMALL MOBILE
==================================================*/


@media(max-width:575px){


.feature-row{


    flex-direction:column;


    align-items:center;


    text-align:center;


}



.feature-row::before{

    display:none;

}



.feature-row:hover{

    transform:none;

}



.feature-icon{


    width:55px;


    min-width:55px;


    height:55px;


}



.feature-row h4{

    font-size:18px;

}



.feature-row p{

    font-size:13.5px;

}



}







/*==================================================
 TOUCH DEVICES
==================================================*/


@media(hover:none){


.modern-image:hover img{

    transform:none;

}



.modern-image:hover .image-bg{

    transform:rotate(-4deg);

}



.feature-row:hover{

    transform:none;

}



.feature-row:hover .feature-icon{

    transform:none;

}


}







/*==================================================
 REDUCED MOTION
==================================================*/


@media(prefers-reduced-motion:reduce){


*{

animation:none!important;

transition:none!important;

}


}/* ==================================================
   FEATURE ROW HOVER FIX - NO CUT VERSION
================================================== */


/* Remove clipping issue */

.what-does-modern .feature-row{

    overflow:visible !important;

    transition:

    border-color .4s ease,

    box-shadow .4s ease;

}



/* Disable old movement */

.what-does-modern .feature-row:hover{

    transform:none !important;

    border-color:rgba(54,98,204,.35);


    box-shadow:

    0 15px 35px rgba(1,5,53,.12);

}



/* Keep animated line */

.what-does-modern .feature-row::before{

    height:2px;

    background:

    linear-gradient(
    90deg,
    #010535,
    #3662CC
    );

}



/* Icon hover */

.what-does-modern .feature-row:hover .feature-icon{

    background:

    linear-gradient(
    135deg,
    #010535,
    #3662CC
    );


    transform:

    translateY(-5px)

    scale(1.05);


    box-shadow:

    0 12px 30px rgba(54,98,204,.35);

}



.what-does-modern .feature-row:hover .feature-icon i{

    color:#ffffff;

}



/* Heading */

.what-does-modern .feature-row:hover h4{

    color:#3662CC;

    transform:none !important;

}



/* Paragraph */

.what-does-modern .feature-row:hover p{

    transform:none !important;

}



/* Mobile protection */

@media(max-width:575px){


    .what-does-modern .feature-row:hover{

        transform:none !important;

    }


}/*==================================================
 CORE CAPABILITIES GRID - PREMIUM VERSION
==================================================*//* =========================================================
   MANAGED SECURITY SERVICES
   VISIBLE BULLET POINTS ONLY
   Scoped only to #core-capabilities
========================================================= */
/* =========================================================
   Managed Security Services - Animation Timing Fix
   Keeps existing design and fadeInUp animation unchanged
========================================================= */

/* Keep all capability cards on the same animation timing */
#core-capabilities .features-item {
    animation-delay: 0s !important;
    transition-delay: 0s;
}

/* Specifically prevent the DFIR card from receiving
   an unintended child-based animation delay */
#core-capabilities .features-item:last-child {
    animation-delay: 0s !important;
    transition-delay: 0s;
}

/* If WOW.js adds animated/visible classes, keep the
   existing fadeInUp animation but remove accidental delay */
#core-capabilities .features-item.wow {
    animation-delay: 0s !important;
}

/* Preserve normal WOW.js visibility behavior */
#core-capabilities .features-item.wow:not(.animated) {
    visibility: hidden;
}

#core-capabilities .features-item.wow.animated {
    visibility: visible;
}
#core-capabilities .features-item-content ul {
    display: block !important;
    list-style: none !important;
    margin: 15px 0 20px !important;
    padding: 0 !important;
}

#core-capabilities .features-item-content ul li {
    display: block !important;
    position: relative;
    list-style: none !important;

    margin: 0 0 10px !important;
    padding: 0 0 0 25px !important;

    color: rgba(255, 255, 255, 0.82) !important;
    font-family: var(--default-font);
    font-size: 15px;
    line-height: 1.65;
    font-weight: 400;

    visibility: visible !important;
    opacity: 1 !important;
}

/* Custom bullet */
#core-capabilities .features-item-content ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 2px;

    width: 17px;
    height: 17px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--accent-color);
    color: #fff;

    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

/* Heading inside cards */
#core-capabilities .features-item-content h2 {
    margin-bottom: 18px;
}

/* What it is / What's included / Technology */
#core-capabilities .features-item-content p {
    color: rgba(255, 255, 255, 0.82);
}

#core-capabilities .features-item-content p strong {
    color: #ffffff !important;
    font-weight: 700;
}

/* Technology line */
#core-capabilities .features-item-content p:last-child {
    margin-top: 18px;
    padding-top: 14px;

    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* =========================================================
   CARD SPACING
========================================================= */

#core-capabilities .features-item {
    height: 100%;
}

#core-capabilities .features-item-content {
    overflow: visible !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    #core-capabilities .features-item-content ul {
        margin-top: 14px !important;
        margin-bottom: 18px !important;
    }

    #core-capabilities .features-item-content ul li {
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 9px !important;
        padding-left: 24px !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    #core-capabilities .features-item-content ul {
        margin: 14px 0 18px !important;
    }

    #core-capabilities .features-item-content ul li {
        font-size: 15px !important;
        line-height: 1.6 !important;

        margin-bottom: 9px !important;
        padding-left: 24px !important;
    }

    #core-capabilities .features-item-content ul li::before {
        width: 16px;
        height: 16px;

        font-size: 9px;
        top: 3px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    #core-capabilities .features-item-content ul li {
        font-size: 14px !important;
        line-height: 1.6 !important;
        padding-left: 23px !important;
    }

    #core-capabilities .features-item-content ul li::before {
        width: 15px;
        height: 15px;

        font-size: 9px;
    }

}
/* ==========================================
   CORE CAPABILITIES LAST CARD CENTER FIX
========================================== */


#core-capabilities .capability-grid {

    display:flex !important;

    flex-wrap:wrap !important;

    justify-content:center !important;

}


/* Keep 3 cards per row */

#core-capabilities .capability-grid .features-item {

    flex:0 0 calc(33.333% - 30px) !important;

    max-width:calc(33.333% - 30px) !important;

}



/* Put 10th card below middle column */

@media(min-width:992px){


    #core-capabilities .capability-grid .features-item:nth-child(10){


        margin-left:33.333% !important;


        margin-right:33.333% !important;


    }


}




/* Tablet */

@media(max-width:991px){


    #core-capabilities .capability-grid .features-item {


        flex:0 0 calc(50% - 30px) !important;

        max-width:calc(50% - 30px) !important;


    }


    #core-capabilities .capability-grid .features-item:nth-child(10){


        margin-left:0 !important;

        margin-right:0 !important;


    }


}



/* Mobile */

@media(max-width:767px){


    #core-capabilities .capability-grid {


        display:block !important;


    }



    #core-capabilities .capability-grid .features-item {


        width:100% !important;

        max-width:100% !important;

        margin-left:0 !important;

        margin-right:0 !important;


    }


}

.our-features .features-item-list.capability-grid{


    display:grid !important;

    grid-template-columns:repeat(4,minmax(0,1fr)) !important;

    gap:22px !important;

    width:100% !important;

}



/*===============================
 CARD DESIGN
================================*/


.our-features .features-item-list.capability-grid 
.features-item{


    position:relative !important;

    display:flex !important;

    flex-direction:column !important;


    min-height:245px !important;


    padding:26px !important;


    width:100% !important;


    background:
    linear-gradient(
        145deg,
        #07102f,
        #101b45
    ) !important;


    border-radius:22px !important;


    overflow:hidden !important;


    border:1px solid rgba(255,255,255,.08) !important;


    transition:

    transform .55s cubic-bezier(.16,1,.3,1),
    box-shadow .55s ease,
    border-color .55s ease !important;



}



/* CARD GLOW */


.features-item::before{


    content:"";

    position:absolute;

    width:180px;

    height:180px;


    right:-80px;

    top:-80px;


    background:

    radial-gradient(
    circle,
    rgba(54,98,204,.45),
    transparent 70%
    );


    opacity:0;


    transition:.5s ease;


}



.features-item:hover::before{


    opacity:1;


}




/* HOVER EFFECT */


.our-features .features-item-list.capability-grid 
.features-item:hover{


    transform:

    translateY(-12px)
    scale(1.02) !important;


    border-color:
    rgba(54,98,204,.7) !important;


    box-shadow:

    0 25px 55px rgba(0,0,0,.4),
    0 0 35px rgba(54,98,204,.35) !important;


}




/*===============================
 ICON BOX
================================*/


.features-item-icon{


    width:68px !important;

    height:68px !important;


    display:flex !important;

    justify-content:center !important;

    align-items:center !important;


    background:

    linear-gradient(
    135deg,
    #3662cc,
    #19347f
    ) !important;


    border-radius:18px !important;


    margin-bottom:20px !important;


    position:relative !important;


    z-index:2 !important;


    transition:

    transform .5s cubic-bezier(.16,1,.3,1),
    box-shadow .5s ease !important;



}



/* ICON */


.features-item-icon i{


    font-size:30px !important;


    color:#ffffff !important;


    opacity:1 !important;


    visibility:visible !important;


    display:block !important;


    transition:.4s ease !important;


}



/* ICON HOVER */


.features-item:hover 
.features-item-icon{


    transform:

    translateY(-8px)
    rotate(8deg)
    scale(1.12) !important;


    box-shadow:

    0 15px 35px rgba(54,98,204,.55) !important;


}



.features-item:hover 
.features-item-icon i{


    transform:scale(1.18) !important;


}




/*===============================
 TEXT
================================*/


.features-item-content{


    position:relative;

    z-index:2;


}




.features-item-content h2{


    font-size:20px !important;


    line-height:1.35 !important;


    color:#ffffff !important;


    margin-bottom:12px !important;


    transition:.4s ease !important;


}



.features-item:hover 
.features-item-content h2{


    color:#6f9aff !important;


    transform:translateX(5px);


}




.features-item-content p{


    font-size:14px !important;


    line-height:1.7 !important;


    color:rgba(255,255,255,.75) !important;


    transition:.4s ease !important;


}




.features-item:hover 
.features-item-content p{


    transform:translateX(4px);


}

/*==================================================
 CORE CAPABILITIES - COMPLETE RESPONSIVE FIX
==================================================*/


/* LARGE DESKTOP 1400px+ */
@media (min-width:1400px){

    .our-features .features-item-list.capability-grid{

        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:24px !important;

    }


    .our-features .features-item-list.capability-grid .features-item{

        min-height:250px !important;
        padding:28px !important;

    }

}



/* LAPTOP 1200px - 1399px */
@media (max-width:1399px){

    .our-features .features-item-list.capability-grid{

        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:20px !important;

    }


    .our-features .features-item-list.capability-grid .features-item{

        min-height:240px !important;
        padding:24px !important;

    }


}



/* TABLET 992px - 1199px */
@media (max-width:1199px){

    .our-features .features-item-list.capability-grid{

        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:20px !important;

    }


    .our-features .features-item-list.capability-grid .features-item{

        min-height:230px !important;

    }


    .features-item-content h2{

        font-size:18px !important;

    }


    .features-item-content p{

        font-size:13.5px !important;

    }


}



/* MOBILE TABLET 768px - 991px */
@media (max-width:991px){

    .our-features .features-item-list.capability-grid{

        grid-template-columns:repeat(2,minmax(0,1fr)) !important;

        gap:18px !important;

    }



    .our-features .features-item-list.capability-grid .features-item{

        padding:22px !important;

        min-height:220px !important;

        border-radius:18px !important;

    }



    .features-item-icon{

        width:60px !important;

        height:60px !important;

        border-radius:16px !important;

    }



    .features-item-icon i{

        font-size:26px !important;

    }


}



/* MOBILE 576px - 767px */
@media (max-width:767px){


    .our-features .features-item-list.capability-grid{

        grid-template-columns:1fr !important;

        gap:18px !important;

    }



    .our-features .features-item-list.capability-grid .features-item{

        min-height:auto !important;

        padding:22px !important;

        width:100% !important;

    }



    .features-item-icon{

        width:58px !important;

        height:58px !important;

        margin-bottom:16px !important;

    }



    .features-item-icon i{

        font-size:24px !important;

    }



    .features-item-content h2{

        font-size:18px !important;

        line-height:1.3 !important;

    }



    .features-item-content p{

        font-size:14px !important;

        line-height:1.6 !important;

    }



    .our-features .features-item-list.capability-grid .features-item:hover{

        transform:translateY(-6px) scale(1.01) !important;

    }


}



/* SMALL MOBILE 320px - 575px */
@media (max-width:575px){


    .our-features .features-item-list.capability-grid{

        gap:15px !important;

    }



    .our-features .features-item-list.capability-grid .features-item{

        padding:18px !important;

        border-radius:16px !important;

    }



    .features-item-icon{

        width:52px !important;

        height:52px !important;

    }



    .features-item-icon i{

        font-size:22px !important;

    }



    .features-item-content h2{

        font-size:16px !important;

    }



    .features-item-content p{

        font-size:13px !important;

    }


}



/* EXTRA SMALL 280px - 360px */
@media (max-width:360px){


    .our-features .features-item-list.capability-grid .features-item{

        padding:16px !important;

    }



    .features-item-content h2{

        font-size:15px !important;

    }



    .features-item-content p{

        font-size:12px !important;

    }

}
/*==================================================
 CORE CAPABILITIES FINAL POLISH
 ICON + ANIMATION FIX
==================================================*/

/* ==================================================
   CORE CAPABILITIES RESPONSIVE GRID FIX
   KEEP EXISTING DESIGN
================================================== */


#core-capabilities .capability-grid {

    display:flex !important;

    flex-wrap:wrap !important;

    justify-content:center !important;

    gap:30px;

}



/* Desktop */

@media(min-width:1200px){


    #core-capabilities .capability-grid .features-item {


        width:calc(33.333% - 20px) !important;


    }


}




/* Laptop */

@media(min-width:992px) and (max-width:1199px){


    #core-capabilities .capability-grid .features-item {


        width:calc(33.333% - 20px) !important;


    }


}





/* Tablet */

@media(min-width:768px) and (max-width:991px){


    #core-capabilities .capability-grid .features-item {


        width:calc(50% - 15px) !important;


    }


}





/* Mobile */

@media(max-width:767px){


    #core-capabilities .capability-grid {


        display:flex !important;

        flex-direction:column !important;

        gap:25px;


    }



    #core-capabilities .capability-grid .features-item {


        width:100% !important;

        max-width:100% !important;


    }


}




/* Small mobile */

@media(max-width:480px){


    #core-capabilities .capability-grid {


        padding-left:10px;

        padding-right:10px;


    }


}
/* CARD */

#core-capabilities .features-item{


    background:
    linear-gradient(
        145deg,
        #0b1538,
        #111d4d
    ) !important;


    transform:translateY(0);

    transition:

    transform .45s cubic-bezier(.22,1,.36,1),
    box-shadow .45s ease,
    border-color .45s ease !important;


}



/* ICON BOX FIX */


#core-capabilities .features-item-icon{


    width:72px !important;

    height:72px !important;


    display:flex !important;

    align-items:center !important;

    justify-content:center !important;


    background:

    linear-gradient(
        135deg,
        #3d6de0,
        #1b327a
    ) !important;


    border-radius:20px !important;


    margin-bottom:22px !important;


    position:relative;

    z-index:5;


    box-shadow:

    0 10px 25px rgba(54,98,204,.35);


}



/* ICON VISIBILITY FIX */


#core-capabilities .features-item-icon i{


    display:block !important;

    visibility:visible !important;

    opacity:1 !important;


    color:#ffffff !important;


    font-size:30px !important;


    line-height:1 !important;


}






/* PREMIUM HOVER */


#core-capabilities .features-item:hover{


    transform:

    translateY(-10px)
    !important;


    border-color:

    rgba(90,140,255,.8) !important;


    box-shadow:

    0 20px 50px rgba(0,0,0,.45),

    0 0 35px rgba(54,98,204,.35) !important;


}





/* ICON FLOAT */


#core-capabilities .features-item:hover 
.features-item-icon{


    transform:

    translateY(-8px)
    rotate(6deg)
    scale(1.08);


    box-shadow:

    0 15px 35px rgba(54,98,204,.65);


}




/* HEADING FIX */


#core-capabilities .features-item-content h2{


    color:#ffffff !important;


    text-align:left !important;


    font-weight:600 !important;


    transition:.35s ease !important;


}



#core-capabilities .features-item:hover h2{


    color:#78a5ff !important;


}






/* DESCRIPTION */


#core-capabilities .features-item-content p{


    color:

    rgba(255,255,255,.78) !important;


}






/* SMALL GLOW EFFECT */


#core-capabilities .features-item::before{


    content:"";

    position:absolute;


    width:180px;

    height:180px;


    right:-80px;

    top:-80px;


    background:

    radial-gradient(

    circle,

    rgba(54,98,204,.45),

    transparent 70%

    );


    opacity:0;


    transition:.5s ease;


}



#core-capabilities .features-item:hover::before{


    opacity:1;


}






/* MOBILE */

@media(max-width:767px){


#core-capabilities .features-item-icon{


    width:60px!important;

    height:60px!important;


}



#core-capabilities .features-item-icon i{


    font-size:25px!important;


}


}/*==================================================
 LAST CARD ALIGNMENT FIX
 LAST BOX LEFT ALIGN
==================================================*/


#core-capabilities .features-item-list{
    justify-content:flex-start !important;
}


/* LAST SINGLE CARD FIX */
@media(min-width:992px){

    #core-capabilities .features-item-list 
    .features-item:last-child{

        grid-column:auto !important;
        justify-self:start !important;

    }

}


/* FORCE ALL CARD TEXT LEFT */

#core-capabilities .features-item-content{

    text-align:left !important;

}


#core-capabilities .features-item-content h2,
#core-capabilities .features-item-content p{

    text-align:left !important;

}


/* ICON ALSO LEFT */

#core-capabilities .features-item-icon{

    margin-left:0 !important;
    margin-right:auto !important;

}

/*===============================
 ENTRY ANIMATION
================================*/


.features-item{


    animation:

    capabilityReveal .8s ease both;


}




@keyframes capabilityReveal{


from{


opacity:0;

transform:
translateY(45px);


}


to{


opacity:1;

transform:
translateY(0);


}


}




/* STAGGER EFFECT */


.features-item:nth-child(1){animation-delay:.1s;}
.features-item:nth-child(2){animation-delay:.2s;}
.features-item:nth-child(3){animation-delay:.3s;}
.features-item:nth-child(4){animation-delay:.4s;}
.features-item:nth-child(5){animation-delay:.5s;}
.features-item:nth-child(6){animation-delay:.6s;}
.features-item:nth-child(7){animation-delay:.7s;}
.features-item:nth-child(8){animation-delay:.8s;}
.features-item:nth-child(9){animation-delay:.9s;}
.features-item:nth-child(10){animation-delay:1s;}




/*===============================
 RESPONSIVE
================================*/


@media(max-width:1200px){


.capability-grid{

grid-template-columns:repeat(3,1fr)!important;

}


}





@media(max-width:991px){


.capability-grid{

grid-template-columns:repeat(2,1fr)!important;

}



}





@media(max-width:767px){


.capability-grid{


grid-template-columns:1fr!important;


}



.features-item{


padding:22px !important;


}



.features-item-icon{


width:62px !important;

height:62px !important;


}


.features-item-icon i{


font-size:26px !important;


}



}/* ==========================================================
   FINAL FIX - LAST TWO CARDS
   NO OVERLAP / PERFECT CENTER
   ========================================================== */

@media (min-width: 1200px) {

    #core-capabilities .capability-grid {

        display: grid !important;

        /*
           6 columns
           Each card = 2 columns
           Therefore:
           3 cards per row
        */
        grid-template-columns:
            repeat(6, minmax(0, 1fr)) !important;

        gap: 30px !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* -----------------------------------------
       ALL NORMAL CARDS
       ----------------------------------------- */

    #core-capabilities .capability-grid
    .features-item {

        grid-column: span 2 !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        position: relative !important;

        left: auto !important;
        right: auto !important;

        transform: none !important;
    }


    /* -----------------------------------------
       CARD 10
       ----------------------------------------- */

    #core-capabilities .capability-grid
    .features-item:nth-child(10) {

        grid-column: 2 / span 2 !important;

        margin: 0 !important;

        transform: none !important;
    }


    /* -----------------------------------------
       CARD 11
       ----------------------------------------- */

    #core-capabilities .capability-grid
    .features-item:nth-child(11) {

        grid-column: 4 / span 2 !important;

        margin: 0 !important;

        transform: none !important;
    }


    /* -----------------------------------------
       STOP OLD HOVER TRANSFORM FOR LAST TWO
       ----------------------------------------- */

    #core-capabilities .capability-grid
    .features-item:nth-child(10):hover {

        transform: translateY(-10px) !important;
    }


    #core-capabilities .capability-grid
    .features-item:nth-child(11):hover {

        transform: translateY(-10px) !important;
    }

}


/* ==========================================================
   DESKTOP HEADING
   ========================================================== */

@media (min-width: 1200px) {

    #core-capabilities .features-item-content h2 {

        /*
           Don't let long headings get clipped
        */
        white-space: normal !important;

        font-size: 17px !important;

        line-height: 1.35 !important;
    }

}


/* ==========================================================
   TABLET
   ========================================================== */

@media (min-width: 768px) and (max-width: 1199px) {

    #core-capabilities .capability-grid {

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 20px !important;
    }


    #core-capabilities .capability-grid
    .features-item {

        grid-column: auto !important;

        width: 100% !important;

        margin: 0 !important;

        transform: none !important;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    #core-capabilities .capability-grid {

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 20px !important;
    }


    #core-capabilities .capability-grid
    .features-item {

        grid-column: 1 !important;

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        transform: none !important;
    }


    #core-capabilities .features-item-content h2 {

        white-space: normal !important;

        font-size: 18px !important;
    }

}/* ==========================================================
   CORE CAPABILITIES - FINAL ALIGNMENT + TEXT SIZE
   ========================================================== */


/* ==========================================================
   DESKTOP
   ========================================================== */

@media (min-width: 1200px) {

    /* 3 CARDS PER ROW */
    #core-capabilities .capability-grid {

        display: grid !important;

        grid-template-columns:
            repeat(6, minmax(0, 1fr)) !important;

        gap: 30px !important;

        width: 100% !important;

        margin: 0 !important;
    }


    /* ALL CARDS */
    #core-capabilities .capability-grid
    .features-item {

        grid-column: span 2 !important;

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        height: 100% !important;

        min-height: 285px !important;

        display: flex !important;

        flex-direction: column !important;

        overflow: visible !important;
    }


    /* LAST TWO CARDS CENTER */
    #core-capabilities .capability-grid
    .features-item:nth-child(10) {

        grid-column: 2 / span 2 !important;

        margin: 0 !important;
    }


    #core-capabilities .capability-grid
    .features-item:nth-child(11) {

        grid-column: 4 / span 2 !important;

        margin: 0 !important;
    }


    /* ======================================================
       CARD CONTENT
       ====================================================== */

    #core-capabilities .features-item-content {

        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;

        height: 100% !important;

        overflow: visible !important;
    }


    /* ======================================================
       HEADING
       ALL HEADINGS GET SAME RESERVED HEIGHT
       ====================================================== */

    #core-capabilities .features-item-content h2 {

        min-height: 54px !important;

        height: 54px !important;

        display: flex !important;

        align-items: flex-start !important;

        justify-content: flex-start !important;

        margin-top: 0 !important;

        margin-bottom: 14px !important;

        padding: 0 !important;

        width: 100% !important;

        max-width: 100% !important;

        font-size: 20px !important;

        line-height: 1.35 !important;

        font-weight: 600 !important;

        white-space: normal !important;

        overflow: visible !important;

        text-overflow: unset !important;

        letter-spacing: -0.2px !important;
    }


    /* ======================================================
       PARAGRAPH
       ====================================================== */

    #core-capabilities .features-item-content p {

        margin-top: 0 !important;

        margin-bottom: 0 !important;

        padding: 0 !important;

        font-size: 16px !important;

        line-height: 1.7 !important;

        color: rgba(255,255,255,.84) !important;
    }

}


/* ==========================================================
   LAPTOP / TABLET
   ========================================================== */

@media (min-width: 768px) and (max-width: 1199px) {

    #core-capabilities .capability-grid {

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 22px !important;
    }


    #core-capabilities .capability-grid
    .features-item {

        grid-column: auto !important;

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        height: 100% !important;

        min-height: 270px !important;

        display: flex !important;

        flex-direction: column !important;

        overflow: visible !important;
    }


    #core-capabilities .features-item-content {

        display: flex !important;

        flex-direction: column !important;

        height: 100% !important;

        overflow: visible !important;
    }


    #core-capabilities .features-item-content h2 {

        min-height: 52px !important;

        height: 52px !important;

        display: flex !important;

        align-items: flex-start !important;

        margin-bottom: 13px !important;

        font-size: 19px !important;

        line-height: 1.35 !important;

        white-space: normal !important;
    }


    #core-capabilities .features-item-content p {

        font-size: 15px !important;

        line-height: 1.65 !important;

        margin: 0 !important;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    #core-capabilities .capability-grid {

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 20px !important;
    }


    #core-capabilities .capability-grid
    .features-item {

        grid-column: 1 !important;

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        min-height: auto !important;

        height: auto !important;

        overflow: hidden !important;
    }


    #core-capabilities .features-item-content {

        display: block !important;

        height: auto !important;
    }


    #core-capabilities .features-item-content h2 {

        min-height: auto !important;

        height: auto !important;

        width: 100% !important;

        font-size: 20px !important;

        line-height: 1.4 !important;

        white-space: normal !important;

        margin-bottom: 13px !important;
    }


    #core-capabilities .features-item-content p {

        font-size: 16px !important;

        line-height: 1.65 !important;

        margin: 0 !important;
    }

}/*==================================================
   CYBER OFFERINGS SECTION - FINAL PREMIUM DESIGN
==================================================*/


.cyber-offer-section{

    position:relative;

    padding:100px 0;

    overflow:hidden;


    background:

    linear-gradient(
        135deg,
        #ffffff 0%,
        #f3f6fc 100%
    );


}



/* CYBER GRID TEXTURE */

.cyber-offer-section::before{


    content:"";


    position:absolute;

    inset:0;



    background-image:


    linear-gradient(
        rgba(54,98,204,.045) 1px,
        transparent 1px
    ),


    linear-gradient(
        90deg,
        rgba(54,98,204,.045) 1px,
        transparent 1px
    );



    background-size:

    55px 55px;



    opacity:.5;


}





/* FLOATING GLOW */

.cyber-bg-shape{


    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    z-index:0;


}



.shape-one{


    width:350px;

    height:350px;


    background:#3662cc;

    opacity:.12;


    top:-120px;

    left:-120px;


}




.shape-two{


    width:300px;

    height:300px;


    background:#07102f;

    opacity:.10;


    right:-120px;

    bottom:-100px;


}





/* CONTENT ABOVE BG */

.cyber-offer-section .container{


    position:relative;

    z-index:2;


}



/*=================================
 HEADER
=================================*/


.cyber-offer-section .section-title{


    text-align:center !important;


}



.cyber-offer-section 
.section-sub-title{


    display:inline-flex;

    align-items:center;


    padding:8px 18px;


    background:#ffffff;


    border-radius:50px;


    border:1px solid #dce5ff;


}



.cyber-offer-section 
.section-title h2{


    color:#07102f !important;


    margin-top:15px;


}




.offer-intro{


    max-width:700px;


    margin:20px auto 55px !important;


    text-align:center;


    font-size:16px;


    line-height:1.7;


    color:#667085 !important;


}





/*=================================
 CARDS GRID
=================================*/


.offer-grid{


    position:relative;

}




/* CARD */

.offer-card{


    height:100%;


    min-height:330px;


    padding:35px 32px !important;


    background:

    rgba(255,255,255,.9) !important;


    border-radius:26px !important;



    border:

    1px solid rgba(54,98,204,.15) !important;



    box-shadow:


    0 10px 30px rgba(7,16,47,.06);



    position:relative;


    overflow:hidden;



    transition:


    transform .55s cubic-bezier(.16,1,.3,1),
    box-shadow .55s ease,
    border-color .55s ease !important;



}




/* CARD TOP GLOW */


.offer-card::before{


    content:"";


    position:absolute;


    width:120px;


    height:120px;


    top:-60px;


    right:-60px;



    background:


    radial-gradient(
        circle,
        rgba(54,98,204,.35),
        transparent 70%
    );



    opacity:0;



    transition:.5s ease;


}




.offer-card:hover::before{


    opacity:1;


}





/* HOVER */

.offer-card:hover{


    transform:


    translateY(-14px);


    border-color:#3662cc !important;



    box-shadow:


    0 25px 60px rgba(54,98,204,.18);


}





/*=================================
 ICON
=================================*/


.capability-card-icon{


    width:78px;


    height:78px;



    display:flex;


    align-items:center;


    justify-content:center;



    background:


    linear-gradient(
        135deg,
        #3662cc,
        #07102f
    );



    border-radius:22px;


    margin-bottom:25px !important;


    transition:


    transform .5s cubic-bezier(.16,1,.3,1),
    box-shadow .5s ease;



}



.capability-card-icon i{


    color:#ffffff !important;


    font-size:32px !important;


}





.offer-card:hover 
.capability-card-icon{


    transform:


    rotate(8deg)
    scale(1.12);



    box-shadow:


    0 15px 35px rgba(54,98,204,.45);



}





/*=================================
 TEXT
=================================*/


.offer-card h3{


    color:#07102f !important;


    font-size:22px !important;


    font-weight:700 !important;


    line-height:1.4;


    margin-bottom:15px !important;


    opacity:1 !important;


    visibility:visible !important;



    transition:.4s ease;


}




.offer-card:hover h3{


    color:#3662cc !important;


    transform:translateX(5px);


}





.offer-card p{


    color:#667085 !important;


    font-size:15px !important;


    line-height:1.75 !important;


    margin:0 !important;


}





/*=================================
 ENTRY ANIMATION
=================================*/


.offer-card{


    animation:


    offerFade .8s ease both;


}



@keyframes offerFade{


from{


    opacity:0;


    transform:translateY(45px);


}


to{


    opacity:1;


    transform:translateY(0);


}


}





/* STAGGER */

.offer-card:nth-child(1){
animation-delay:.1s;
}


.offer-card:nth-child(2){
animation-delay:.2s;
}


.offer-card:nth-child(3){
animation-delay:.3s;
}


.offer-card:nth-child(4){
animation-delay:.4s;
}


.offer-card:nth-child(5){
animation-delay:.5s;
}


.offer-card:nth-child(6){
animation-delay:.6s;
}





/*=================================
 CTA BANNER
=================================*/


.cta-protect-banner{


    margin-top:75px;


    padding:60px 35px;


    border-radius:32px;



    background:


    linear-gradient(
        135deg,
        #07102f,
        #3662cc
    );



    text-align:center;



    box-shadow:


    0 25px 60px rgba(7,16,47,.25);



}




.cta-protect-banner h2{


    font-size:38px !important;


    color:#ffffff !important;


}




.cta-protect-banner p{


    max-width:700px;


    margin:0 auto 30px;


    color:rgba(255,255,255,.8);


    font-size:17px;


}





/*=================================
 RESPONSIVE
=================================*/



@media(max-width:1200px){


.offer-card{


    min-height:350px;


}



}




@media(max-width:991px){


.cyber-offer-section{


    padding:80px 0;


}


.offer-card{


    min-height:auto;


}



}





@media(max-width:767px){


.cyber-offer-section{


    padding:60px 0;


}



.offer-card{


    padding:28px 22px !important;


}



.capability-card-icon{


    width:65px;

    height:65px;


}



.capability-card-icon i{


    font-size:26px !important;


}



.offer-card h3{


    font-size:20px !important;


}



.cta-protect-banner{


    padding:40px 20px;


}



.cta-protect-banner h2{


    font-size:26px !important;


}


}/* ==========================================
   OFFER SECTION FINAL UI FIX
========================================== */


.cyber-offer-section{

    position:relative;
    padding:90px 0;

    background:
    linear-gradient(
        135deg,
        #ffffff 0%,
        #f4f7ff 100%
    );

    overflow:hidden;

}



/* BACKGROUND GRID */

.cyber-offer-section:before{

    content:"";

    position:absolute;

    inset:0;


    background-image:

    linear-gradient(
    rgba(54,98,204,.05) 1px,
    transparent 1px
    ),

    linear-gradient(
    90deg,
    rgba(54,98,204,.05) 1px,
    transparent 1px
    );


    background-size:50px 50px;

    opacity:.35;

}





/* HEADER FIX */

.cyber-offer-section .section-title{


    text-align:center !important;


}



.offer-intro{


    max-width:720px;

    margin:20px auto 50px !important;


    text-align:center;

    color:#667085 !important;


}





/* GRID */

.offer-grid{

    position:relative;

    z-index:2;

}





/* CARD */

.offer-card{


    min-height:340px;


    padding:35px 30px !important;


    background:#ffffff !important;


    border-radius:26px !important;


    border:1px solid #dbe4ff !important;


    box-shadow:

    0 10px 35px rgba(7,16,47,.06);


    transition:

    all .45s cubic-bezier(.16,1,.3,1) !important;



}





.offer-card:hover{


    transform:

    translateY(-12px);


    box-shadow:

    0 25px 60px rgba(54,98,204,.18);



}





/* ICON */

.capability-card-icon{


    width:75px !important;

    height:75px !important;


    margin-bottom:25px !important;


    background:

    linear-gradient(
    135deg,
    #3662cc,
    #07102f
    ) !important;


    border-radius:22px !important;


}





.capability-card-icon i{


    color:#fff !important;

    font-size:32px !important;


}





/* TITLE VISIBILITY FIX */


.offer-card h3{


    display:block !important;


    color:#07102f !important;


    opacity:1 !important;


    visibility:visible !important;


    font-size:22px !important;


    font-weight:700 !important;


    margin-bottom:15px !important;


}





/* DESCRIPTION */


.offer-card p{


    color:#667085 !important;


    opacity:1 !important;


    font-size:15px !important;


    line-height:1.7 !important;


}





/* ICON HOVER */


.offer-card:hover .capability-card-icon{


    transform:

    rotate(8deg)
    scale(1.12);


    box-shadow:

    0 15px 35px rgba(54,98,204,.35);


}





/* CTA */


.cta-protect-banner{


    margin-top:70px;


    padding:55px 30px;


    border-radius:30px;


    background:

    linear-gradient(
    135deg,
    #07102f,
    #3662cc
    );


}



/* RESPONSIVE */


@media(max-width:991px){


.offer-card{

    min-height:auto;

}


}



@media(max-width:767px){


.cyber-offer-section{

padding:60px 0;

}



.offer-card{

padding:25px !important;

}


}/* ==========================================
   OFFER SECTION RESPONSIVE FIX
   (Bootstrap Compatible)
========================================== */

/* ===== Desktop ===== */

@media (min-width:992px){

    .cyber-offer-section{
        padding:100px 0;
    }

    .offer-grid{
        display:flex !important;
        flex-wrap:wrap;
    }

    .offer-grid>[class*="col-"]{
        display:flex;
        margin-bottom:30px;
    }

    .offer-card{
        width:100%;
        min-height:330px;
        padding:32px 28px !important;
        border-radius:24px;
        display:flex;
        flex-direction:column;
    }

    .capability-card-icon{
        width:70px;
        height:70px;
        border-radius:18px;
        margin-bottom:22px;
    }

    .capability-card-icon i{
        font-size:30px;
    }

    .offer-card h3{
        font-size:22px !important;
        line-height:1.4;
        margin-bottom:14px;
    }

    .offer-card p{
        font-size:15px !important;
        line-height:1.7;
        margin-bottom:0;
    }

}

/* ===== Tablet ===== */

@media (max-width:991px) and (min-width:768px){

    .cyber-offer-section{
        padding:80px 0;
    }

    .offer-grid{
        display:flex !important;
        flex-wrap:wrap;
    }

    .offer-grid>[class*="col-"]{
        display:flex;
        margin-bottom:24px;
    }

    .offer-card{
        width:100%;
        min-height:300px;
        padding:28px 24px !important;
        border-radius:22px;
    }

    .capability-card-icon{
        width:64px;
        height:64px;
        margin-bottom:18px;
    }

    .capability-card-icon i{
        font-size:28px;
    }

    .offer-card h3{
        font-size:20px !important;
    }

    .offer-card p{
        font-size:15px !important;
        line-height:1.7;
    }

    .cta-protect-banner{
        margin-top:50px;
        padding:40px 25px;
    }

}

/* ===== Mobile ===== */

@media (max-width:767px){

    .cyber-offer-section{
        padding:60px 15px;
    }

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

    .offer-intro{
        font-size:15px;
        line-height:1.7;
        margin:15px auto 35px;
    }

    .offer-grid{
        display:flex !important;
        flex-wrap:wrap;
    }

    .offer-grid>[class*="col-"]{
        display:flex;
        margin-bottom:20px;
    }

    .offer-card{
        width:100%;
        min-height:auto;
        padding:26px 22px !important;
        text-align:center;
        border-radius:20px;
    }

    .capability-card-icon{
        width:60px;
        height:60px;
        margin:0 auto 20px;
    }

    .capability-card-icon i{
        font-size:26px;
    }

    .offer-card h3{
        font-size:20px !important;
        margin-bottom:12px;
    }

    .offer-card p{
        font-size:14px !important;
        line-height:1.7;
    }

    .cta-protect-banner{
        margin-top:40px;
        padding:35px 20px;
        text-align:center;
        border-radius:22px;
    }

}

/* ===== Small Mobile ===== */

@media (max-width:480px){

    .cyber-offer-section{
        padding:50px 12px;
    }

    .section-title h2{
        font-size:25px !important;
    }

    .offer-intro{
        font-size:14px;
    }

    .offer-card{
        padding:22px 18px !important;
    }

    .capability-card-icon{
        width:55px;
        height:55px;
    }

    .capability-card-icon i{
        font-size:22px;
    }

    .offer-card h3{
        font-size:18px !important;
    }

    .offer-card p{
        font-size:13.5px !important;
    }

}

/* ===== Extra Small ===== */

@media (max-width:360px){

    .offer-card{
        padding:20px 15px !important;
    }

    .offer-card h3{
        font-size:17px !important;
    }

    .offer-card p{
        font-size:13px !important;
    }

}/* ==========================================
   PURE WHITE BACKGROUND FIX
========================================== */

.cyber-offer-section{

    position:relative;

    padding:90px 0;

    background:#ffffff !important;

    overflow:hidden;

}



/* REMOVE BLUE GRID EFFECT */

.cyber-offer-section:before{

    content:"";

    position:absolute;

    inset:0;

    background-image:none !important;

    opacity:0 !important;

}/*========================================================
   INTRINSIC SECURITY - OFFER SECTION
   UNIQUE CLASS SYSTEM (isec)
========================================================*/


/* MAIN SECTION */

.isec-offer-section{

    width:100%;
    position:relative;
    padding:20px 0 50px;
    overflow:hidden;

}


/* HEADER */

.isec-offer-header{

    margin-bottom:45px;

}


.isec-offer-title{

    font-size:42px;
    font-weight:700;
    color:#07143f;
    margin-bottom:15px;
    position:relative;

}


.isec-offer-subtitle{

    max-width:780px;
    font-size:16px;
    line-height:1.8;
    color:#687089;
    margin:0;

}



/*========================================================
   GRID
========================================================*/


.isec-offer-section .row{

    align-items:stretch;

}



/*========================================================
   CARD DESIGN
========================================================*/


.isec-card{

    position:relative;

    height:100%;

    display:flex;

    gap:25px;

    padding:32px;

    border-radius:24px;

    background:
    linear-gradient(
        145deg,
        #020638,
        #071352
    );


    border:1px solid rgba(255,255,255,0.10);

    overflow:hidden;

    transition:
    transform .45s ease,
    box-shadow .45s ease,
    border-color .45s ease;


    box-shadow:
    0 15px 35px rgba(0,0,0,.18);

}



/* CARD HOVER */


.isec-card:hover{

    transform:translateY(-10px);

    border-color:#3662cc;


    box-shadow:

    0 25px 55px rgba(0,0,0,.25),

    0 0 35px rgba(54,98,204,.35);

}




/*========================================================
   ANIMATED LIGHT LINE
========================================================*/


.isec-hover-line{


    position:absolute;

    width:160px;

    height:2px;

    background:

    linear-gradient(
        90deg,
        transparent,
        #4b7cff,
        transparent
    );


    top:0;

    left:-200px;

    transition:1s;

}



.isec-card:hover .isec-hover-line{

    left:100%;

}




/*========================================================
   ICON AREA
========================================================*/


.isec-icon-wrap{


    position:relative;

    width:82px;

    height:82px;

    min-width:82px;

    display:flex;

    align-items:center;

    justify-content:center;


}



/* GLOW BACKGROUND */


.isec-glow-ring{


    position:absolute;

    inset:0;

    border-radius:22px;

    background:

    radial-gradient(
        circle,
        rgba(54,98,204,.45),
        transparent 70%
    );


    filter:blur(10px);

    opacity:.6;

    transition:.4s;


}



.isec-card-icon{


    width:75px;

    height:75px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:20px;


    background:

    rgba(54,98,204,.15);


    border:

    1px solid rgba(54,98,204,.45);


    position:relative;

    z-index:2;


    transition:.45s;


}



.isec-card-icon img{


    width:38px;

    height:38px;

    transition:.45s;


}




/* ICON HOVER */


.isec-card:hover .isec-card-icon{


    background:#3662cc;


    transform:

    rotate(8deg)

    scale(1.12);


    box-shadow:

    0 0 30px rgba(54,98,204,.7);


}



.isec-card:hover .isec-card-icon img{


    transform:scale(1.15);

}




.isec-card:hover .isec-glow-ring{


    opacity:1;

    transform:scale(1.25);

}



/*========================================================
   CONTENT
========================================================*/


.isec-card-body{

    flex:1;

}



.isec-card-title{


    color:#ffffff;

    font-size:22px;

    font-weight:700;

    line-height:1.4;

    margin-bottom:12px;


    transition:.35s;


}



.isec-card-text{


    color:

    rgba(255,255,255,.75);


    font-size:15px;


    line-height:1.8;


    margin:0;


}




.isec-card:hover .isec-card-title{


    color:#6fa3ff;


}



/*========================================================
   FLOATING ANIMATION
========================================================*/


.isec-card-icon{


    animation:

    isecFloating 4s ease-in-out infinite;


}



@keyframes isecFloating{


    0%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-7px);

    }


    100%{

        transform:translateY(0);

    }


}



/*========================================================
   SHINE EFFECT
========================================================*/


.isec-card::after{


    content:"";

    position:absolute;


    width:80px;

    height:250%;


    background:

    rgba(255,255,255,.08);


    top:-80%;

    left:-120px;


    transform:rotate(30deg);


    transition:1s;


}



.isec-card:hover::after{


    left:120%;


}/*========================================================
   RESPONSIVE DESIGN
========================================================*/


/* LARGE LAPTOP */

@media (max-width:1200px){


    .isec-card{

        padding:28px;

        gap:20px;

    }


    .isec-card-title{

        font-size:20px;

    }


    .isec-card-text{

        font-size:14px;

    }


}



/*========================================================
   TABLET DEVICES
========================================================*/


@media (max-width:991px){


    .isec-offer-section{

        padding-top:10px;

    }


    .isec-offer-title{

        font-size:36px;

    }



    .isec-card{


        padding:25px;

        border-radius:20px;


    }



    .isec-icon-wrap{


        width:70px;

        height:70px;

        min-width:70px;


    }



    .isec-card-icon{


        width:65px;

        height:65px;

        border-radius:16px;


    }



    .isec-card-icon img{


        width:32px;

        height:32px;


    }



}



/*========================================================
   MOBILE DEVICES
========================================================*/


@media (max-width:767px){



    .isec-offer-header{


        margin-bottom:30px;


    }



    .isec-offer-title{


        font-size:32px;

        line-height:1.3;


    }



    .isec-offer-subtitle{


        font-size:15px;

        line-height:1.7;


    }



    .isec-card{


        flex-direction:column;

        text-align:center;

        align-items:center;

        padding:28px 22px;


    }



    .isec-icon-wrap{


        margin-bottom:8px;


    }



    .isec-card-body{


        width:100%;


    }



    .isec-card-title{


        font-size:19px;


    }



    .isec-card-text{


        font-size:14px;

        line-height:1.7;


    }



}



/*========================================================
   SMALL MOBILE
========================================================*/


@media(max-width:480px){



    .isec-offer-title{


        font-size:28px;


    }



    .isec-card{


        padding:22px 18px;

        border-radius:18px;


    }



    .isec-card-icon{


        width:60px;

        height:60px;


    }



    .isec-card-icon img{


        width:30px;


    }



    .isec-card-title{


        font-size:18px;


    }



    .isec-card-text{


        font-size:13.5px;


    }



}



/*========================================================
   EXTRA SMOOTH PERFORMANCE
========================================================*/


.isec-card,
.isec-card-icon,
.isec-glow-ring,
.isec-hover-line{


    will-change:transform;


}



/*========================================================
   ACCESSIBILITY
========================================================*/


@media(prefers-reduced-motion:reduce){


    .isec-card,
    .isec-card-icon,
    .isec-glow-ring{


        animation:none !important;

        transition:none !important;


    }


}/*========================================================
   managed page start to end
========================================================*/
/* 
managed page start to end  */
        .protect-hero-section {
            position: relative;
            padding: 170px 0 90px;
            background: linear-gradient(135deg, #010535 0%, #030a4a 50%, #000424 100%);
            overflow: hidden;
        }

        .protect-hero-section::before {
            content: '';
            position: absolute;
            top: -20%;
            right: -10%;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(54, 98, 204, 0.25) 0%, rgba(1, 5, 53, 0) 70%);
            border-radius: 50%;
            pointer-events: none;
        }

        .protect-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 18px;
            border-radius: 30px;
            background: rgba(54, 98, 204, 0.15);
            border: 1px solid rgba(54, 98, 204, 0.4);
            color: #00e5ff;
            font-size: 13px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 24px;margin-top: 20px;
        }

        .protect-badge i {
            font-size: 12px;
        }

        .hero-title-protect {
            font-size: 48px;
            font-weight: 700;
            line-height: 1.2;
            color: #ffffff;
            margin-bottom: 20px;
        }

        .hero-desc-protect {
            font-size: 18px;
            line-height: 1.7;
            color: rgba(255, 255, 255, 0.85);
            margin-bottom: 35px;
        }

        .protect-hero-image {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(54, 98, 204, 0.2);
            transition: transform 0.5s ease, box-shadow 0.5s ease;
        }

        .protect-hero-image:hover {
            transform: translateY(-5px) scale(1.01);
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(54, 98, 204, 0.35);
        }

        .protect-hero-image img {
            width: 100%;
            height: auto;
            display: block;
            object-fit: cover;
        }

        /* Challenge Cards Grid */
        .challenge-section {
            padding: 100px 0;
            background: #010535;
            position: relative;
        }

        .challenge-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            padding: 32px 28px;
            height: 100%;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            position: relative;
            overflow: hidden;
        }

        .challenge-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(180deg, #3662CC 0%, #00e5ff 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .challenge-card:hover {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(54, 98, 204, 0.4);
            transform: translateY(-8px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 20px rgba(54, 98, 204, 0.2);
        }

        .challenge-card:hover::before {
            opacity: 1;
        }

        .challenge-icon-box {
            width: 58px;
            height: 58px;
            border-radius: 14px;
            background: rgba(54, 98, 204, 0.15);
            border: 1px solid rgba(54, 98, 204, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #00e5ff;
            font-size: 24px;
            margin-bottom: 22px;
            transition: all 0.3s ease;
        }

        .challenge-card:hover .challenge-icon-box {
            background: #3662CC;
            color: #ffffff;
            transform: scale(1.1) rotate(4deg);
        }

        .challenge-card p {
            color: rgba(255, 255, 255, 0.88);
            font-size: 16px;
            line-height: 1.6;
            margin: 0;
            font-weight: 400;
        }

        /* Why Intrinsic Section */
        .why-protect-section {
            padding: 100px 0;
            background: linear-gradient(180deg, #010535 0%, #020942 100%);
        }

        .check-list-custom {
            list-style: none;
            padding: 0;
            margin: 30px 0 0;
        }

        .check-list-custom li {
            position: relative;
            padding-left: 36px;
            margin-bottom: 18px;
            color: #ffffff;
            font-size: 17px;
            font-weight: 500;
            line-height: 1.5;
        }

        .check-list-custom li i {
            position: absolute;
            left: 0;
            top: 3px;
            color: #00e5ff;
            font-size: 20px;
        }

        /* Capabilities 10 Cards */
        .capabilities-section {
            padding: 100px 0;
            background: #010535;
        }

        .capability-card {
            background: rgba(255, 255, 255, 0.025);
            border: 1px solid rgba(255, 255, 255, 0.07);
            border-radius: 16px;
            padding: 32px 26px;
            height: 100%;
            transition: all 0.35s ease;
        }

        .capability-card:hover {
            background: rgba(54, 98, 204, 0.12);
            border-color: rgba(0, 229, 255, 0.4);
            transform: translateY(-6px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
        }

        .capability-card-icon {
            width: 52px;
            height: 52px;
            border-radius: 12px;
            background: rgba(0, 229, 255, 0.1);
            border: 1px solid rgba(0, 229, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #00e5ff;
            font-size: 22px;
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }

        .capability-card:hover .capability-card-icon {
            background: #00e5ff;
            color: #010535;
        }

        .capability-card h3 {
            color: #ffffff;
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 12px;
        }

        .capability-card p {
            color: rgba(255, 255, 255, 0.75);
            font-size: 15px;
            line-height: 1.6;
            margin: 0;
        }

        /* What We Offer Section */
        .offer-section {
            padding: 100px 0;
            background: linear-gradient(180deg, #020942 0%, #010535 100%);
        }

        .offer-card {
            background: rgba(1, 5, 53, 0.7);
            border: 1px solid rgba(54, 98, 204, 0.25);
            border-radius: 16px;
            padding: 34px 28px;
            height: 100%;
            transition: all 0.35s ease;
            position: relative;
            overflow: hidden;
        }

        .offer-card:hover {
            border-color: #00e5ff;
            transform: translateY(-6px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 229, 255, 0.2);
        }

        .offer-card h3 {
            color: #ffffff;
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 14px;
        }

        .offer-card p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 15.5px;
            line-height: 1.65;
            margin: 0;
        }

        /* CTA Banner */
        .cta-protect-banner {
            padding: 80px 0;
            background: linear-gradient(135deg, #3662CC 0%, #010535 100%);
            border-radius: 24px;
            margin-bottom: 90px;
            border: 1px solid rgba(255, 255, 255, 0.15);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
            position: relative;
            overflow: hidden;
        }

        .cta-protect-banner::after {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(0, 229, 255, 0.2) 0%, transparent 70%);
            pointer-events: none;
        }

        /* Responsive Fixes */
        @media (max-width: 991px) {
            .hero-title-protect {
                font-size: 36px;
            }

            .hero-desc-protect {
                font-size: 16px;
            }

            .protect-hero-section {
                padding: 100px 0 60px;
            }

            .challenge-section,
            .why-protect-section,
            .capabilities-section,
            .offer-section {
                padding: 60px 0;
            }
        }
    /*========================================================
   managedEndpoint page start to end
========================================================*/
/*========================================================
   platform starting page start to end
========================================================*/
/*==================================================
            INTRINSIC DEFENDER
        PREMIUM CYBER SECTION
==================================================*/
.idf-benefit-item {
    margin-bottom: 10px !important;
}

.idf-benefit-item p {
    margin-top: 3px !important;
    margin-bottom: 0 !important;
    line-height: 1.4 !important;
}

/* Remove horizontal line from Why It Matters */
.idf-info-block {
    border-bottom: none !important;
}

.idf-info-block::before,
.idf-info-block::after {
    display: none !important;
    content: none !important;
}
.idf-platform-section{
    position:relative;
    overflow:hidden;
    padding:180px 0 120px;
    background:
    radial-gradient(circle at 15% 20%, rgba(54,98,204,.30), transparent 32%),
    radial-gradient(circle at 90% 80%, rgba(54,98,204,.22), transparent 35%),
    linear-gradient(
        135deg,
        #010535 0%,
        #061769 45%,
        #010535 100%);
}

/*==================================
BACKGROUND GRID
==================================*/

.idf-bg-grid{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.65;

    background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);

    background-size:55px 55px;
}

.idf-platform-section::before{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    right:5%;

    top:10%;

    background-image:
    radial-gradient(rgba(255,255,255,.18) 1.5px,transparent 1.5px);

    background-size:18px 18px;

    opacity:.35;
}

.idf-platform-section::after{

    content:"";

    position:absolute;

    width:240px;

    height:240px;

    left:4%;

    bottom:6%;

    background-image:
    radial-gradient(rgba(255,255,255,.14) 1.5px,transparent 1.5px);

    background-size:18px 18px;

    opacity:.25;
}

/*==================================
GLOW EFFECTS
==================================*/

.idf-glow-left,
.idf-glow-right{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    animation:idfGlowMove 8s ease-in-out infinite alternate;

}

.idf-glow-left{

    width:450px;

    height:450px;

    background:#3662CC;

    opacity:.28;

    top:-180px;

    left:-180px;

}

.idf-glow-right{

    width:380px;

    height:380px;

    background:#5b9cff;

    opacity:.22;

    bottom:-150px;

    right:-150px;

}

@keyframes idfGlowMove{

0%{

transform:translate(0,0);

}

100%{

transform:translate(45px,-25px);

}

}

/*==================================
CONTAINER
==================================*/

.idf-platform-section .container{

    position:relative;

    z-index:10;

}

/*==================================
IMAGE WRAPPER
==================================*/

.idf-visual-wrapper{

    position:relative;

    max-width:620px;

    margin:auto;

}

/*==================================
IMAGE CARD
==================================*/

.idf-image-frame{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    background:

    linear-gradient(
    145deg,
    rgba(255,255,255,.12),
    rgba(255,255,255,.04));

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.12);

    box-shadow:

    0 30px 70px rgba(0,0,0,.35),

    0 0 60px rgba(54,98,204,.18);

    transition:.6s;

}
/* STOP IMAGE MOVEMENT */

.idf-visual-wrapper,
.idf-image-frame,
.idf-image-frame img{

    animation:none !important;

}


.idf-image-frame{

    transform:none !important;

}


.idf-image-frame:hover{

    transform:none !important;

}


.idf-image-frame:hover img{

    transform:none !important;

}
/* Hover */

.idf-image-frame:hover{

    transform:

    translateY(-12px)

    rotateX(3deg);

    box-shadow:

    0 40px 90px rgba(0,0,0,.45),

    0 0 80px rgba(54,98,204,.35);

}

/* Border */

.idf-image-frame::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:28px;

    border:1px solid rgba(255,255,255,.12);

    pointer-events:none;

}

/* Shine */

.idf-image-frame::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.35),

    transparent);

    transform:skewX(-25deg);

    transition:1s;

    z-index:3;

}

.idf-image-frame:hover::before{

    left:150%;

}

/*==================================
IMAGE
==================================*/

.idf-image-frame img{

    width:100%;

    display:block;

    transition:1.2s;

    object-fit:cover;

}

.idf-image-frame:hover img{

    transform:scale(1.05);

}

/*==================================
FLOATING BADGES
==================================*/

.idf-floating-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:15px;

    padding:15px 20px;

    background:rgba(255,255,255,.10);

    backdrop-filter:blur(15px);

    -webkit-backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.12);

    border-radius:18px;

    box-shadow:

    0 20px 50px rgba(0,0,0,.25);

    animation:idfFloat 4s ease-in-out infinite;

}

.idf-card-top{

    top:40px;

    left:-25px;

}

.idf-card-bottom{

    right:-25px;

    bottom:40px;

    animation-delay:2s;

}

.idf-icon-circle{

    width:56px;

    height:56px;

    border-radius:16px;

    background:#3662CC;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:20px;

}

.idf-floating-card h6{

    color:#fff;

    margin:0;

    font-size:17px;

}

.idf-floating-card span{

    color:rgba(255,255,255,.70);

    font-size:14px;

}

@keyframes idfFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}/*==================================================
            CONTENT AREA
==================================================*/

.idf-content-box{
    position: relative;
    z-index: 5;
    padding-left: 20px;
}

/*=========================
BADGE
=========================*/

.idf-mini-title{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 20px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(15px);
    border:1px solid rgba(255,255,255,.12);
    border-radius:50px;
    color:#7db5ff;
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:22px;
}

.idf-mini-title i{
    font-size:15px;
    color:#4ea1ff;
}

/*=========================
TITLE
=========================*/

.idf-main-title{

    font-size:58px;

    font-weight:700;

    line-height:1.1;

    color:#fff;

    margin-bottom:28px;

}

.idf-main-title span{

    color:#5fa9ff;

    background:linear-gradient(90deg,#5fa9ff,#8fd3ff);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

/*=========================
DESCRIPTION
=========================*/

.idf-main-desc{

    font-size:18px;

    color:rgba(255,255,255,.80);

    line-height:1.9;

    margin-bottom:40px;

    max-width:650px;

}

/*==================================================
FEATURE LIST
==================================================*/

.idf-feature-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

/*=========================
FEATURE CARD
=========================*/

.idf-feature-item{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:20px;

    padding:24px;

    overflow:hidden;

    border-radius:22px;

    background:

    linear-gradient(

    145deg,

    rgba(255,255,255,.08),

    rgba(255,255,255,.03));

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.10);

    transition:.45s;

}

/* Hover */

.idf-feature-item:hover{

    transform:

    translateY(-8px)

    translateX(8px);

    border-color:rgba(95,169,255,.50);

    box-shadow:

    0 25px 60px rgba(0,0,0,.30),

    0 0 40px rgba(54,98,204,.20);

}

/* Glow */

.idf-feature-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    135deg,

    rgba(95,169,255,.18),

    transparent 65%);

    opacity:0;

    transition:.5s;

}

.idf-feature-item:hover::before{

    opacity:1;

}

/*=========================
ICON
=========================*/

.idf-feature-icon{

    width:70px;

    height:70px;

    border-radius:20px;

    flex-shrink:0;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

    background:

    linear-gradient(

    135deg,

    #3662CC,

    #5fa9ff);

    color:#fff;

    transition:.45s;

}

.idf-feature-item:hover .idf-feature-icon{

    transform:

    rotate(12deg)

    scale(1.12);

}

/*=========================
TEXT
=========================*/

.idf-feature-item h5{

    color:#fff;

    font-size:22px;

    margin-bottom:8px;

    font-weight:700;

}

.idf-feature-item p{

    color:rgba(255,255,255,.70);

    margin:0;

    line-height:1.8;

    font-size:16px;

}

/*==================================================
BUTTONS
==================================================*/

.idf-button-group{

    display:flex;

    align-items:center;

    gap:18px;

    margin-top:45px;

    flex-wrap:wrap;

}

/* Primary */

.idf-button-group .btn-default{

    border-radius:60px;

    padding:16px 36px;

    transition:.45s;

}

.idf-button-group .btn-default:hover{

    transform:translateY(-5px);

    box-shadow:

    0 15px 40px rgba(54,98,204,.40);

}

/* Secondary */

.idf-outline-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:16px 36px;

    border-radius:60px;

    border:2px solid rgba(255,255,255,.18);

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.45s;

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(15px);

}

.idf-outline-btn:hover{

    background:#3662CC;

    border-color:#3662CC;

    color:#fff;

    transform:translateY(-5px);

}

/*==================================================
SMOOTH ANIMATION
==================================================*/

.idf-feature-item,
.idf-image-frame,
.idf-floating-card,
.idf-outline-btn,
.idf-button-group .btn-default{

    transition:

    transform .45s ease,

    box-shadow .45s ease,

    background .45s ease,

    border-color .45s ease;

}

/*==================================================
TEXT SELECTION
==================================================*/

.idf-platform-section ::selection{

    background:#5fa9ff;

    color:#fff;

}/*==================================================
            PREMIUM ANIMATIONS
==================================================*/

/* Floating Image */
.idf-visual-wrapper{
    animation:idfFloatingImage 6s ease-in-out infinite;
}

@keyframes idfFloatingImage{

0%,100%{
transform:translateY(0px);
}

50%{
transform:translateY(-12px);
}

}

/* Mouse Glow */

.idf-image-frame{
    position:relative;
}

.idf-image-frame::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    background:rgba(95,169,255,.18);

    filter:blur(55px);

    top:-60px;

    right:-60px;

    animation:glowMove 8s linear infinite alternate;

}

@keyframes glowMove{

0%{
transform:translate(0,0);
}

100%{
transform:translate(-60px,40px);
}

}

/*=========================================
Animated Border
=========================================*/

.idf-image-frame::after{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:30px;

    background:linear-gradient(
        135deg,
        rgba(95,169,255,.4),
        transparent,
        rgba(54,98,204,.4)
    );

    z-index:-1;

    filter:blur(8px);

}

/*=========================================
Feature Card Shine
=========================================*/

.idf-feature-item{
    overflow:hidden;
}

.idf-feature-item:after{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:60%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.18),
        transparent
    );

    transform:skewX(-25deg);

    transition:1s;

}

.idf-feature-item:hover:after{

    left:150%;

}

/*=========================================
Icon Pulse
=========================================*/

.idf-feature-icon i{

    animation:iconPulse 2.5s infinite;

}

@keyframes iconPulse{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.15);

}

}

/*=========================================
Floating Badges
=========================================*/

.idf-floating-card{

    transition:.45s;

}

.idf-floating-card:hover{

    transform:
    translateY(-8px)
    scale(1.05);

}

/*=========================================
Button Hover
=========================================*/

.idf-button-group .btn-default{

    overflow:hidden;

    position:relative;

}

.idf-button-group .btn-default:before{

    content:"";

    position:absolute;

    width:0;

    height:100%;

    left:0;

    top:0;

    background:rgba(255,255,255,.15);

    transition:.45s;

}

.idf-button-group .btn-default:hover:before{

    width:100%;

}

/*=========================================
Responsive
=========================================*/

@media (max-width:1399px){

.idf-main-title{
font-size:45px;
}

}

@media (max-width:1199px){

.idf-platform-section{
padding:160px 0 100px;
}

.idf-main-title{
font-size:46px;
}

.idf-main-desc{
font-size:17px;
}

.idf-content-box{
padding-left:0;
}

}

@media (max-width:991px){

.idf-platform-section{
padding:150px 0 90px;
}

.idf-content-box{
margin-top:50px;
text-align:center;
}

.idf-mini-title{
justify-content:center;
}

.idf-main-title{
font-size:40px;
}

.idf-main-desc{
margin:0 auto 35px;
}

.idf-feature-item{
text-align:left;
}

.idf-button-group{
justify-content:center;
}

.idf-card-top{
left:15px;
}

.idf-card-bottom{
right:15px;
}

}

@media (max-width:767px){

.idf-platform-section{
padding:130px 0 70px;
}

.idf-main-title{
font-size:32px;
line-height:1.3;
}

.idf-main-desc{
font-size:16px;
line-height:1.8;
}

.idf-feature-item{
padding:18px;
gap:15px;
}

.idf-feature-icon{
width:58px;
height:58px;
font-size:20px;
border-radius:16px;
}

.idf-feature-item h5{
font-size:18px;
}

.idf-button-group{
flex-direction:column;
}

.idf-button-group a{
width:100%;
justify-content:center;
}

.idf-floating-card{
display:none;
}

.idf-visual-wrapper{
animation:none;
}

}

@media (max-width:575px){

.idf-platform-section{
padding:120px 0 60px;
}

.idf-main-title{
font-size:28px;
}

.idf-main-desc{
font-size:15px;
}

.idf-mini-title{
font-size:12px;
padding:7px 15px;
}

.idf-feature-item{
padding:16px;
}

.idf-feature-icon{
width:50px;
height:50px;
font-size:18px;
}

}

/*=========================================
Reduce Motion
=========================================*/

@media (prefers-reduced-motion:reduce){

.idf-platform-section *,
.idf-platform-section *::before,
.idf-platform-section *::after{

animation:none !important;
transition:none !important;

}

}
.protect-hero-btns{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

    margin-top:45px;      /* <-- This moves buttons down */

}@media(max-width:767px){

.protect-hero-btns{

margin-top:35px;

justify-content:center;

}

.protect-hero-btns .btn-default{

width:100%;

margin:0 !important;

justify-content:center;

}

} 
/*==================================================
      PREMIUM WHITE CAPABILITIES SECTION
==================================================*//* =========================================
   MICROSOFT SECURITY CARDS - FINAL POLISH
========================================= */

.ms-security-services-section {
    position: relative;
    padding: 90px 0;
    overflow: hidden;
    background: var(--bg-color);
}

.ms-security-heading {
    margin-bottom: 55px;
}

.ms-security-heading h2 {
    color: var(--primary-color);
    margin: 14px 0 15px;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.15;
}

.ms-security-heading p {
    max-width: 850px;
    margin: 0 auto;
    color: var(--text-color);
    line-height: 1.7;
}


/* =========================================
   GRID
========================================= */

.ms-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    align-items: stretch;
}


/* =========================================
   CARD
========================================= */

.ms-service-card {
    position: relative;
    display: flex;
    flex-direction: column;

    height: 100%;
    padding: 30px 28px;

    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(1, 5, 53, 0.09);
    border-radius: 18px;

    box-shadow:
        0 10px 35px rgba(1, 5, 53, 0.07);

    overflow: hidden;

    transform: translateY(0);
    transition:
        transform 0.45s cubic-bezier(.22, .61, .36, 1),
        box-shadow 0.45s ease,
        border-color 0.45s ease;
}


/* animated glow */

.ms-service-card::before {
    content: "";
    position: absolute;
    top: -100px;
    right: -100px;

    width: 200px;
    height: 200px;

    background: radial-gradient(
        circle,
        rgba(54, 98, 204, 0.16),
        transparent 70%
    );

    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}


/* top line */

.ms-service-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 0;
    height: 3px;

    background: linear-gradient(
        90deg,
        var(--accent-color),
        #6d8fe8
    );

    transition: width 0.5s ease;
}


/* hover */

.ms-service-card:hover {
    transform: translateY(-10px);

    border-color: rgba(54, 98, 204, 0.25);

    box-shadow:
        0 20px 50px rgba(1, 5, 53, 0.13);
}

.ms-service-card:hover::before {
    opacity: 1;
}

.ms-service-card:hover::after {
    width: 100%;
}


/* =========================================
   ICON
========================================= */

.ms-service-icon {
    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 22px;

    border-radius: 14px;

    color: var(--white-color);

    background: linear-gradient(
        135deg,
        var(--accent-color),
        #244da8
    );

    box-shadow:
        0 8px 22px rgba(54, 98, 204, 0.22);

    transition:
        transform 0.45s ease,
        border-radius 0.45s ease;
}

.ms-service-icon i {
    font-size: 21px;
}

.ms-service-card:hover .ms-service-icon {
    transform: rotate(-5deg) scale(1.08);
    border-radius: 18px;
}


/* =========================================
   CONTENT
========================================= */

.ms-service-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ms-service-content h3 {
    margin: 0 0 10px;

    color: var(--primary-color);

    font-size: 21px;
    line-height: 1.3;

    transition: color 0.3s ease;
}

.ms-service-card:hover .ms-service-content h3 {
    color: var(--accent-color);
}


/* tagline */

.ms-service-tagline {
    margin-bottom: 15px;

    color: var(--accent-color);

    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}


/* description */

.ms-service-content > p {
    margin: 0 0 20px;

    color: var(--text-color);

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================
   SECTION LABELS
========================================= */

.ms-service-content h4 {
    margin: 8px 0 9px;

    color: var(--primary-color);

    font-size: 14px;
    font-weight: 700;

    position: relative;
    padding-left: 13px;
}

.ms-service-content h4::before {
    content: "";

    position: absolute;
    left: 0;
    top: 4px;

    width: 3px;
    height: 14px;

    border-radius: 5px;

    background: var(--accent-color);
}


/* =========================================
   TECHNOLOGIES
========================================= */

.ms-service-content .ms-tech {
    margin: 0 0 18px;

    padding: 11px 13px;

    border-radius: 9px;

    background: #f3f6fc;

    color: #4b5070;

    font-size: 12.5px;
    line-height: 1.6;
}


/* =========================================
   BULLETS — FIXED ALIGNMENT
========================================= */

.ms-service-content ul {
    list-style: none;

    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    gap: 9px;
}


/* each bullet */

.ms-service-content ul li {
    position: relative;

    display: flex;
    align-items: flex-start;

    margin: 0;
    padding: 0 0 0 21px;

    color: var(--text-color);

    font-size: 13px;
    line-height: 1.55;
}


/* bullet dot */

.ms-service-content ul li::before {
    content: "";

    position: absolute;

    left: 3px;
    top: 7px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--accent-color);

    box-shadow:
        0 0 0 4px rgba(54, 98, 204, 0.10);

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}


/* bullet hover */

.ms-service-card:hover .ms-service-content ul li::before {
    transform: scale(1.25);
}


/* =========================================
   SUBTITLE
========================================= */

.ms-security-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--accent-color);

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}

.ms-security-subtitle i {
    font-size: 13px;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1199px) {

    .ms-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ms-service-card {
        padding: 27px 25px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .ms-security-services-section {
        padding: 65px 0;
    }

    .ms-security-heading {
        margin-bottom: 38px;
    }

    .ms-security-heading h2 {
        font-size: 30px;
    }

    .ms-security-heading p {
        font-size: 14px;
        line-height: 1.6;
    }

    .ms-services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ms-service-card {
        padding: 24px 21px;
        border-radius: 15px;
    }

    .ms-service-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 18px;
    }

    .ms-service-content h3 {
        font-size: 19px;
    }

    .ms-service-content > p {
        font-size: 13.5px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .ms-security-services-section {
        padding: 55px 0;
    }

    .ms-service-card {
        padding: 22px 18px;
    }

    .ms-service-content h3 {
        font-size: 18px;
    }

    .ms-service-content ul li {
        font-size: 12.5px;
        padding-left: 19px;
    }

    .ms-service-content .ms-tech {
        font-size: 12px;
    }

}


/* =========================================
   SMOOTH ENTRY ANIMATION
========================================= */

.ms-service-card {
    animation: msCardReveal 0.7s ease both;
}

.ms-service-card:nth-child(1) {
    animation-delay: .05s;
}

.ms-service-card:nth-child(2) {
    animation-delay: .12s;
}

.ms-service-card:nth-child(3) {
    animation-delay: .19s;
}

.ms-service-card:nth-child(4) {
    animation-delay: .26s;
}

.ms-service-card:nth-child(5) {
    animation-delay: .33s;
}

.ms-service-card:nth-child(6) {
    animation-delay: .40s;
}

.ms-service-card:nth-child(7) {
    animation-delay: .47s;
}

@keyframes msCardReveal {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* accessibility */

@media (prefers-reduced-motion: reduce) {

    .ms-service-card,
    .ms-service-icon,
    .ms-service-card::before,
    .ms-service-card::after {
        animation: none;
        transition: none;
    }

}/* =========================================
   FINAL BULLET ALIGNMENT FIX
========================================= */

.ms-service-content ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.ms-service-content ul li {
    position: relative !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 0 0 20px !important;

    line-height: 1.55 !important;
    font-size: 13px;
    color: var(--text-color);
}

/* BULLET */
.ms-service-content ul li::before {
    content: "" !important;

    position: absolute !important;

    left: 3px !important;
    top: 9px !important;

    width: 5px !important;
    height: 5px !important;

    min-width: 5px !important;
    min-height: 5px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: var(--accent-color) !important;

    box-shadow: none !important;
    transform: none !important;
}

/* remove theme's default marker */
.ms-service-content ul li::marker {
    content: "" !important;
}

/* heading spacing */
.ms-service-content h4 {
    margin-top: 18px !important;
    margin-bottom: 11px !important;
}


/* MOBILE */
@media (max-width: 767px) {

    .ms-service-content ul {
        gap: 8px !important;
    }

    .ms-service-content ul li {
        padding-left: 19px !important;
        font-size: 12.5px !important;
        line-height: 1.55 !important;
    }

    .ms-service-content ul li::before {
        left: 3px !important;
        top: 8px !important;
        width: 5px !important;
        height: 5px !important;
    }
}/* =========================================
   PREMIUM BULLET ANIMATION
========================================= */

.ms-service-content ul li {
    opacity: 0;
    transform: translateX(-15px);
    animation: msBulletReveal 0.6s cubic-bezier(.22, .61, .36, 1) forwards;
}

/* Sequential animation */
.ms-service-content ul li:nth-child(1) {
    animation-delay: 0.15s;
}

.ms-service-content ul li:nth-child(2) {
    animation-delay: 0.28s;
}

.ms-service-content ul li:nth-child(3) {
    animation-delay: 0.41s;
}

.ms-service-content ul li:nth-child(4) {
    animation-delay: 0.54s;
}


/* Bullet itself */
.ms-service-content ul li::before {
    transform: scale(0);
    opacity: 0;

    animation: msBulletDot 0.45s cubic-bezier(.34, 1.56, .64, 1) forwards;
}


/* Dot timing */
.ms-service-content ul li:nth-child(1)::before {
    animation-delay: 0.25s;
}

.ms-service-content ul li:nth-child(2)::before {
    animation-delay: 0.38s;
}

.ms-service-content ul li:nth-child(3)::before {
    animation-delay: 0.51s;
}

.ms-service-content ul li:nth-child(4)::before {
    animation-delay: 0.64s;
}


/* =========================================
   KEYFRAMES
========================================= */

@keyframes msBulletReveal {

    0% {
        opacity: 0;
        transform: translateX(-15px);
    }

    70% {
        opacity: 1;
        transform: translateX(3px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}


@keyframes msBulletDot {

    0% {
        opacity: 0;
        transform: scale(0);
    }

    70% {
        opacity: 1;
        transform: scale(1.35);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}


/* =========================================
   HOVER EFFECT
========================================= */

.ms-service-content ul li {
    transition:
        color 0.3s ease,
        padding-left 0.3s ease;
}

.ms-service-content ul li:hover {
    color: var(--primary-color);
    padding-left: 25px !important;
}

.ms-service-content ul li:hover::before {
    background: var(--accent-color) !important;
    box-shadow: 0 0 0 5px rgba(54, 98, 204, 0.12) !important;
}


/* =========================================
   REDUCE MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .ms-service-content ul li,
    .ms-service-content ul li::before {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}
/* =========================================================
   MICROSOFT SECURITY SERVICES
   ISOLATED SECTION CSS
   3 CARDS PER ROW
========================================================= */

.ms-security-services-section {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    background: #f8faff;
    isolation: isolate;
}


/* BACKGROUND */

.ms-security-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background-image:
        linear-gradient(rgba(55, 105, 220, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(55, 105, 220, .045) 1px, transparent 1px);

    background-size: 48px 48px;
}


/* SECTION HEADING */

.ms-security-heading {
    margin-bottom: 60px;
}

.ms-security-subtitle {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;

    position: static !important;
    width: auto !important;
    height: auto !important;

    color: #376fe0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .8px;
    margin-bottom: 15px;
}

.ms-security-subtitle i {
    color: #376fe0;
}

.ms-security-heading h2 {
    color: #071343;
    font-size: 42px;
    line-height: 1.15;
    font-weight: 700;
    margin: 0 0 18px;
}

.ms-security-heading p {
    color: #66739a;
    font-size: 17px;
    line-height: 1.8;
    margin: 0 auto;
    max-width: 850px;
}


/* =========================================================
   GRID
========================================================= */

.ms-services-grid {
    display: grid !important;

    /* EXACTLY 3 HORIZONTAL CARDS */
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 28px !important;

    width: 100%;
    align-items: stretch;
}


/* =========================================================
   CARD
========================================================= */

.ms-service-card {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    padding: 30px !important;

    background: #ffffff !important;

    border: 1px solid #e4eaf8 !important;
    border-radius: 22px !important;

    box-shadow:
        0 12px 35px rgba(24, 55, 120, .08) !important;

    overflow: hidden !important;

    transform: none;
    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;
}


/* REMOVE ANY OLD FLOATING / ABSOLUTE ELEMENT BEHAVIOUR */

.ms-service-card *,
.ms-service-card h3,
.ms-service-card h4,
.ms-service-card p,
.ms-service-card ul,
.ms-service-card li,
.ms-service-tagline {
    position: static !important;
}


/* CARD HOVER */

.ms-service-card:hover {
    transform: translateY(-8px) !important;

    border-color: #8db2ff !important;

    box-shadow:
        0 22px 50px rgba(35, 75, 160, .15) !important;
}


/* =========================================================
   ICON
========================================================= */

.ms-service-icon {
    position: static !important;

    width: 66px !important;
    height: 66px !important;

    min-width: 66px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 0 22px 0 !important;

    border-radius: 18px !important;

    background:
        linear-gradient(
            135deg,
            #4b86ff,
            #2754c7
        ) !important;

    box-shadow:
        0 10px 25px rgba(55, 105, 220, .25);

    z-index: 2 !important;
}

.ms-service-icon i {
    display: block !important;

    color: #ffffff !important;

    font-size: 28px !important;
    line-height: 1 !important;

    visibility: visible !important;
    opacity: 1 !important;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.ms-service-content {
    position: static !important;

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
}


/* =========================================================
   CARD HEADING
========================================================= */

.ms-service-card h3 {
    position: static !important;

    color: #081447 !important;

    font-size: 21px !important;
    line-height: 1.35 !important;

    font-weight: 700 !important;

    margin: 0 0 12px 0 !important;

    text-align: left !important;
}


/* =========================================================
   TAGLINE
   THIS FIXES THE BLUE TEXT AT TOP-RIGHT
========================================================= */

.ms-service-tagline {
    position: static !important;

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;

    margin: 0 0 16px 0 !important;
    padding: 0 !important;

    color: #3975e8 !important;

    font-size: 15px !important;
    line-height: 1.55 !important;

    font-weight: 600 !important;

    text-align: left !important;

    white-space: normal !important;

    overflow: visible !important;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.ms-service-card p {
    position: static !important;

    color: #667398 !important;

    font-size: 14.5px !important;
    line-height: 1.75 !important;

    margin: 0 0 18px 0 !important;

    text-align: left !important;
}


/* =========================================================
   TECHNOLOGIES / WHAT WE DELIVER
========================================================= */

.ms-service-card h4 {
    position: static !important;

    color: #101d4e !important;

    font-size: 15px !important;
    line-height: 1.4 !important;

    font-weight: 700 !important;

    margin: 4px 0 8px 0 !important;

    text-align: left !important;
}


/* TECHNOLOGY TEXT */

.ms-service-card .ms-tech {
    color: #56658e !important;

    font-size: 13.5px !important;
    line-height: 1.65 !important;

    margin-bottom: 18px !important;
}


/* =========================================================
   LIST
========================================================= */

.ms-service-card ul {
    display: block !important;

    margin: 0 !important;
    padding: 0 0 0 18px !important;

    list-style: none !important;
}

.ms-service-card li {
    position: relative !important;

    color: #667398 !important;

    font-size: 13.5px !important;
    line-height: 1.65 !important;

    margin-bottom: 8px !important;

    padding-left: 16px !important;
}


/* BLUE BULLET */

.ms-service-card li::before {
    content: "✓";

    position: absolute !important;

    left: -2px !important;
    top: 0 !important;

    color: #3975e8 !important;

    font-weight: 700 !important;
}


/* =========================================================
   DESKTOP
   3 CARDS
========================================================= */

@media (min-width: 992px) {

    .ms-services-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

}


/* =========================================================
   TABLET
   2 CARDS
========================================================= */

@media (min-width: 576px) and (max-width: 991px) {

    .ms-security-services-section {
        padding: 80px 0;
    }

    .ms-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 22px !important;
    }

    .ms-security-heading h2 {
        font-size: 36px;
    }

}


/* =========================================================
   MOBILE
   1 CARD
========================================================= */

@media (max-width: 575px) {

    .ms-security-services-section {
        padding: 65px 0;
    }

    .ms-security-heading {
        margin-bottom: 40px;
    }

    .ms-security-heading h2 {
        font-size: 30px;
    }

    .ms-security-heading p {
        font-size: 15px;
    }

    .ms-services-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .ms-service-card {
        padding: 24px !important;
    }

    .ms-service-card h3 {
        font-size: 20px !important;
    }

    .ms-service-tagline {
        font-size: 14px !important;
    }

    .ms-service-card p {
        font-size: 14px !important;
    }

}/* =========================================================
   CENTER LAST MICROSOFT SERVICE CARD
========================================================= */

@media (min-width: 992px) {

    .ms-services-grid .ms-service-card:last-child {
        grid-column: 2 !important;
    }

}
.cyber-capability-section{
    position:relative;
    overflow:hidden;
    padding:110px 0;
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
    z-index:1;
}

/*====================================
CONTAINER
====================================*/

.cyber-capability-section .container{
    position:relative;
    z-index:5;
}

/*====================================
BACKGROUND TEXTURE
====================================*/

.cyber-grid-bg{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.45;

    background-image:
    linear-gradient(rgba(54,98,204,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(54,98,204,.04) 1px,transparent 1px);

    background-size:48px 48px;
}

/*====================================
TOP LEFT GLOW
====================================*/

.cyber-glow-left{

    position:absolute;

    width:420px;

    height:420px;

    left:-180px;

    top:-180px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(54,98,204,.18),
    transparent 70%);

    filter:blur(80px);

    animation:leftGlow 9s ease-in-out infinite alternate;

}

/*====================================
BOTTOM RIGHT GLOW
====================================*/

.cyber-glow-right{

    position:absolute;

    width:360px;

    height:360px;

    right:-140px;

    bottom:-140px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(54,98,204,.14),
    transparent 70%);

    filter:blur(90px);

    animation:rightGlow 8s ease-in-out infinite alternate;

}

@keyframes leftGlow{

0%{

transform:translate(0);

}

100%{

transform:translate(35px,-25px);

}

}

@keyframes rightGlow{

0%{

transform:translate(0);

}

100%{

transform:translate(-30px,25px);

}

}

/*====================================
DOT TEXTURE
====================================*/

.cyber-capability-section::before{

content:"";

position:absolute;

top:8%;

right:6%;

width:220px;

height:220px;

background-image:

radial-gradient(rgba(54,98,204,.14) 1.5px,transparent 1.5px);

background-size:18px 18px;

opacity:.7;

animation:dotFloat 12s linear infinite;

}

.cyber-capability-section::after{

content:"";

position:absolute;

left:4%;

bottom:8%;

width:180px;

height:180px;

background-image:

radial-gradient(rgba(54,98,204,.10) 1.5px,transparent 1.5px);

background-size:18px 18px;

opacity:.55;

animation:dotFloatReverse 14s linear infinite;

}

@keyframes dotFloat{

0%{

transform:translateY(0);

}

100%{

transform:translateY(-30px);

}

}

@keyframes dotFloatReverse{

0%{

transform:translateY(0);

}

100%{

transform:translateY(25px);

}

}

/*====================================
HEADING
====================================*/

.cyber-heading{

text-align:center;

max-width:760px;

margin:0 auto 65px;

}

.cyber-subtitle{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 22px;

background:#eef4ff;

border-radius:40px;

color:#3662CC;

font-size:13px;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

border:1px solid rgba(54,98,204,.12);

}

.cyber-subtitle i{

font-size:13px;

}

.cyber-title{

font-size:54px;

font-weight:700;

line-height:1.2;

margin:25px 0 18px;

color:#010535;

}

.cyber-heading p{

font-size:18px;

line-height:1.8;

color:#66708d;

margin:0;

max-width:700px;

margin-inline:auto;

}/*==================================================
      PREMIUM CAPABILITY GRID
==================================================*/

.cyber-capability-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
    max-width:980px;
    margin:0 auto;
}

/*==================================================
CARD DESIGN
==================================================*/

.cyber-capability-card{

    position:relative;

    overflow:hidden;

    padding:28px;

    background:rgba(255,255,255,.82);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(54,98,204,.10);

    border-radius:22px;

    box-shadow:
    0 10px 30px rgba(15,23,42,.06);

    transition:.45s cubic-bezier(.2,.8,.2,1);

}

/* Blue Top Border */

.cyber-capability-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:4px;

background:linear-gradient(
90deg,
#3662CC,
#73b8ff);

transform:scaleX(0);

transform-origin:left;

transition:.45s;

}

.cyber-capability-card:hover::before{

transform:scaleX(1);

}

/* Hover */

.cyber-capability-card:hover{

transform:translateY(-10px);

border-color:#3662CC;

box-shadow:

0 20px 45px rgba(54,98,204,.16);

}

/*==================================================
ICON BOX
==================================================*/

.cyber-card-icon{

width:64px;

height:64px;

border-radius:18px;

display:flex;

justify-content:center;

align-items:center;

margin-bottom:18px;

background:

linear-gradient(
135deg,
#3662CC,
#5d9eff);

transition:.45s;

box-shadow:

0 10px 22px rgba(54,98,204,.20);

}

.cyber-card-icon img{

width:30px;

height:30px;

filter:brightness(0) invert(1);

transition:.45s;

}

.cyber-capability-card:hover .cyber-card-icon{

transform:
rotate(8deg)
scale(1.08);

}

/*==================================================
TEXT
==================================================*/

.cyber-capability-card h4{

font-size:22px;

font-weight:700;

line-height:1.35;

color:#010535;

margin-bottom:12px;

transition:.35s;

}

.cyber-capability-card p{

font-size:15px;

line-height:1.8;

color:#66708d;

margin:0;

transition:.35s;

}

.cyber-capability-card:hover h4{

color:#3662CC;

}

.cyber-capability-card:hover p{

color:#4e5978;

}

/*==================================================
SHINE EFFECT
==================================================*/

.cyber-capability-card::after{

content:"";

position:absolute;

top:0;

left:-140%;

width:70%;

height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.65),
transparent);

transform:skewX(-22deg);

transition:1s;

}

.cyber-capability-card:hover::after{

left:150%;

}

/*==================================================
SMALL FLOATING DOT
==================================================*/

.cyber-capability-card .cyber-card-icon::before{

content:"";

position:absolute;

width:10px;

height:10px;

border-radius:50%;

background:#8bc4ff;

top:-4px;

right:-4px;

animation:dotPulse 2s infinite;

}

@keyframes dotPulse{

0%,100%{

transform:scale(1);

opacity:1;

}

50%{

transform:scale(1.5);

opacity:.4;

}

}/*==================================================
            PREMIUM ANIMATIONS
==================================================*/

.cyber-capability-card{
    will-change: transform;
}

.cyber-capability-card:hover{
    transform:translateY(-10px) scale(1.02);
}

/* Floating Icon */

.cyber-card-icon{

    animation:cyberFloat 4s ease-in-out infinite;

}

@keyframes cyberFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-6px);

}

}

/* Hover */

.cyber-capability-card:hover .cyber-card-icon{

transform:
translateY(-5px)
rotate(8deg)
scale(1.08);

animation:none;

}

/* Title */

.cyber-capability-card h4{

transition:.35s;

}

.cyber-capability-card:hover h4{

color:#3662CC;

}

/* Paragraph */

.cyber-capability-card p{

transition:.35s;

}

.cyber-capability-card:hover p{

color:#4f5d7a;

}

/*=====================================
TOP CORNER CIRCLE
=====================================*/

.cyber-capability-card span{

position:absolute;

top:-45px;

right:-45px;

width:120px;

height:120px;

border-radius:50%;

background:rgba(54,98,204,.05);

transition:.5s;

}

.cyber-capability-card:hover span{

transform:scale(1.2);

}

/*=====================================
BOTTOM LINE
=====================================*/

.cyber-capability-card .card-line{

position:absolute;

left:28px;

bottom:0;

width:0;

height:3px;

background:#3662CC;

transition:.45s;

}

.cyber-capability-card:hover .card-line{

width:70px;

}

/*==================================================
RESPONSIVE
==================================================*/

@media (min-width:1400px){

.cyber-capability-grid{

max-width:1050px;

}

.cyber-title{

font-size:58px;

}

}

/* Laptop */

@media (max-width:1199px){

.cyber-capability-section{

padding:95px 0;

}

.cyber-capability-grid{

gap:20px;

}

.cyber-capability-card{

padding:24px;

}

.cyber-title{

font-size:46px;

}

}

/* Tablet */

@media (max-width:991px){

.cyber-capability-section{

padding:80px 0;

}

.cyber-heading{

margin-bottom:45px;

}

.cyber-capability-grid{

grid-template-columns:1fr;

max-width:650px;

gap:18px;

}

.cyber-title{

font-size:40px;

}

.cyber-heading p{

font-size:16px;

}

}

/* Mobile */

@media (max-width:767px){

.cyber-capability-section{

padding:65px 0;

}

.cyber-title{

font-size:30px;

line-height:1.3;

}

.cyber-heading{

margin-bottom:35px;

}

.cyber-subtitle{

font-size:12px;

padding:8px 18px;

}

.cyber-heading p{

font-size:15px;

}

.cyber-capability-card{

padding:22px;

border-radius:18px;

}

.cyber-card-icon{

width:58px;

height:58px;

margin-bottom:16px;

}

.cyber-card-icon img{

width:28px;

height:28px;

}

.cyber-capability-card h4{

font-size:20px;

}

.cyber-capability-card p{

font-size:14px;

line-height:1.7;

}

}

/* Small Mobile */

@media (max-width:575px){

.cyber-capability-section{

padding:55px 0;

}

.cyber-title{

font-size:26px;

}

.cyber-capability-card{

padding:18px;

}

.cyber-card-icon{

width:52px;

height:52px;

border-radius:14px;

}

.cyber-card-icon img{

width:24px;

height:24px;

}

}

/*=====================================
SMOOTH TRANSITIONS
=====================================*/

.cyber-capability-card,
.cyber-card-icon,
.cyber-card-icon img,
.cyber-capability-card h4,
.cyber-capability-card p{

transition:
transform .4s ease,
box-shadow .4s ease,
background .4s ease,
color .4s ease,
border-color .4s ease;

}

/*=====================================
REDUCE MOTION
=====================================*/

@media (prefers-reduced-motion:reduce){

.cyber-capability-section *,
.cyber-capability-section *::before,
.cyber-capability-section *::after{

animation:none !important;
transition:none !important;

}

}/*==================================================
      WHY INTRINSIC DEFENDER
==================================================*/

.idf-advantage-section{
    position:relative;
    overflow:hidden;
    padding:120px 0;
    background:
    linear-gradient(
        180deg,
        #ffffff 0%,
        #f6f9ff 45%,
        #eef4ff 100%);
}

/*===================================
CONTAINER
===================================*/

.idf-advantage-section .container{
    position:relative;
    z-index:5;
}

/*===================================
BACKGROUND GRID
===================================*/

.idf-bg-pattern{

    position:absolute;

    inset:0;

    opacity:.35;

    pointer-events:none;

    background-image:

    linear-gradient(rgba(54,98,204,.05) 1px,transparent 1px),

    linear-gradient(90deg,rgba(54,98,204,.05) 1px,transparent 1px);

    background-size:42px 42px;

}

/*===================================
GLOW
===================================*/

.idf-glow-left{

position:absolute;

left:-180px;

top:-180px;

width:420px;

height:420px;

border-radius:50%;

background:radial-gradient(circle,
rgba(54,98,204,.15),
transparent 70%);

filter:blur(80px);

}

.idf-glow-right{

position:absolute;

right:-160px;

bottom:-160px;

width:380px;

height:380px;

border-radius:50%;

background:radial-gradient(circle,
rgba(54,98,204,.10),
transparent 70%);

filter:blur(80px);

}

/*===================================
HEADING
===================================*/

.idf-heading{

max-width:760px;

margin:0 auto 80px;

}

.idf-subtitle{

display:inline-flex;

align-items:center;

gap:10px;

padding:9px 20px;

border-radius:40px;

background:#edf3ff;

border:1px solid rgba(54,98,204,.12);

color:#3662CC;

font-size:13px;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

}

.idf-title{

font-size:54px;

line-height:1.2;

margin:25px 0 18px;

color:#010535;

font-weight:700;

}

.idf-title span{

color:#3662CC;

}

.idf-heading p{

font-size:18px;

line-height:1.8;

color:#697590;

max-width:720px;

margin:auto;

}

/*===================================
MAIN GRID
===================================*/

.idf-main-grid{

display:grid;

grid-template-columns:

1fr
240px
1fr;

align-items:center;

gap:35px;

}

/*===================================
CARDS
===================================*/

.idf-panel{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    height:100%;

    min-height:690px;

    padding:38px;

    border-radius:28px;

    background:#fff;

    border:1px solid rgba(54,98,204,.10);

    box-shadow:
    0 20px 50px rgba(0,0,0,.06);

    transition:transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;

    overflow:hidden;

}

/* Hover */

.idf-panel:hover{

transform:translateY(-6px);

box-shadow:

0 28px 55px rgba(54,98,204,.14);

border-color:#3662CC;

}

/* Top Border */

.idf-panel::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:4px;

background:linear-gradient(
90deg,
#3662CC,
#78b9ff);

transform:scaleX(0);

transition:.45s;

transform-origin:left;

}

.idf-panel:hover::before{

transform:scaleX(1);

}

/*===================================
HEADER
===================================*/

.idf-panel-header{

display:flex;

align-items:center;

gap:18px;

margin-bottom:35px;

}

.idf-panel-icon{

width:70px;

height:70px;

border-radius:18px;

display:flex;

justify-content:center;

align-items:center;

background:

linear-gradient(
135deg,
#3662CC,
#6eb7ff);

color:#fff;

font-size:28px;

box-shadow:

0 12px 30px rgba(54,98,204,.20);

}

.idf-panel-header span{

display:block;

font-size:13px;

text-transform:uppercase;

letter-spacing:1px;

color:#3662CC;

font-weight:700;

margin-bottom:6px;

}

.idf-panel-header h3{

font-size:30px;

color:#010535;

margin:0;

}

/*===================================
BENEFITS
===================================*/

.idf-benefit-item{

display:flex;

gap:18px;

margin-bottom:25px;

}

.idf-benefit-item:last-child{

margin-bottom:0;

}

.idf-benefit-item i{

color:#3662CC;

font-size:22px;

margin-top:5px;

}

.idf-benefit-item h5{

font-size:20px;

color:#010535;

margin-bottom:8px;

}

.idf-benefit-item p{

margin:0;

line-height:1.8;

color:#66708d;

}

/*===================================
RIGHT CONTENT
===================================*/

.idf-info-block{

padding-bottom:28px;

margin-bottom:28px;

border-bottom:1px solid rgba(54,98,204,.10);

}

.idf-info-block:last-child{

border:none;

padding-bottom:0;

margin-bottom:0;

}

.idf-info-block h5{

font-size:22px;

color:#010535;

margin-bottom:14px;

}

.idf-info-block p{

margin:0;

line-height:1.9;

color:#66708d;

}

/*===================================
CENTER
===================================*/

.idf-center{

display:flex;

justify-content:center;

align-items:center;

position:relative;

height:280px;

}

.idf-core-circle{

    width:220px;
    height:220px;

    border-radius:50%;

    background:linear-gradient(145deg,#3662CC,#6fb8ff);

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    padding:20px;

    box-sizing:border-box;

    color:#fff;

    position:relative;

    box-shadow:0 25px 60px rgba(54,98,204,.28);

}

.idf-core-icon{

width:62px;

height:62px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

background:rgba(255,255,255,.18);

font-size:28px;

margin-bottom:14px;

}

.idf-core-circle h4{

    font-size:20px;

line-height:1.2;

margin-top:12px;
    font-weight:700;

    margin:10px 0 6px;

    max-width:160px;

    white-space:normal;

    word-break:break-word;

}

.idf-core-circle span{

    font-size:13px;

    line-height:1.4;

    max-width:150px;

    color:rgba(255,255,255,.92);

}/*==================================================
            CENTER ANIMATION
==================================================*/

.idf-orbit-ring{
    position:absolute;
    border-radius:50%;
    border:2px dashed rgba(54,98,204,.18);
    animation:rotateRing 20s linear infinite;
    pointer-events:none;
}

.ring-one{
    width:240px;
    height:240px;
}

.ring-two{
    width:290px;
    height:290px;
    animation-direction:reverse;
    animation-duration:28s;
    border-color:rgba(54,98,204,.10);
}

@keyframes rotateRing{

0%{
transform:rotate(0deg);
}

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

}

/*==================================================
FLOATING DOTS
==================================================*/

.ring-one::before,
.ring-two::before{

content:"";

position:absolute;

width:14px;

height:14px;

border-radius:50%;

background:#3662CC;

top:50%;

left:-7px;

box-shadow:
0 0 20px rgba(54,98,204,.4);

}

.ring-two::after{

content:"";

position:absolute;

width:12px;

height:12px;

border-radius:50%;

background:#6eb7ff;

top:-6px;

left:50%;

transform:translateX(-50%);

}

/*==================================================
CENTER CIRCLE
==================================================*/

.idf-core-circle{

animation:centerFloat 5s ease-in-out infinite;

transition:.45s;

}

@keyframes centerFloat{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(-10px);
}

}

.idf-center:hover .idf-core-circle{

transform:scale(1.05);

box-shadow:
0 35px 80px rgba(54,98,204,.35);

}

/*==================================================
CARD SHINE
==================================================*/

.idf-panel::after{

content:"";

position:absolute;

left:-120%;

top:0;

width:60%;

height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.8),
transparent);

transform:skewX(-25deg);

transition:1s;

pointer-events:none;

}

.idf-panel:hover::after{

left:150%;

}

/*==================================================
ICON ANIMATION
==================================================*/

.idf-panel-icon{

transition:.45s;

}

.idf-panel:hover .idf-panel-icon{

transform:
rotate(8deg)
scale(1.08);

}

/*==================================================
BENEFIT ITEM
==================================================*/

.idf-benefit-item{

transition:.35s;

padding:10px 0;

border-radius:12px;

}

.idf-benefit-item:hover{

transform:translateX(6px);

}

.idf-benefit-item:hover h5{

color:#3662CC;

}

.idf-benefit-item h5{

transition:.35s;

}

.idf-benefit-item p{

transition:.35s;

}

.idf-benefit-item:hover p{

color:#4d5978;

}

/*==================================================
RIGHT BLOCK
==================================================*/

.idf-info-block{

transition:.35s;

}

.idf-info-block:hover{

transform:translateX(6px);

}

.idf-info-block:hover h5{

color:#3662CC;

}

.idf-info-block h5{

transition:.35s;

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1199px){

.idf-title{
font-size:46px;
}

.idf-main-grid{

grid-template-columns:
1fr
190px
1fr;

gap:24px;

}

.idf-panel{

padding:28px;

}

.idf-core-circle{

width:170px;
height:170px;

}

.ring-one{

width:210px;
height:210px;

}

.ring-two{

width:250px;
height:250px;

}

.idf-line{
width:30px;
}

.idf-line-left{
right:calc(50% + 85px);
}

.idf-line-right{
left:calc(50% + 85px);
}

}

@media(max-width:991px){

.idf-advantage-section{

padding:90px 0;

}

.idf-main-grid{

grid-template-columns:1fr;

gap:40px;

}

.idf-center{

order:2;

height:220px;

}

.idf-panel-left{

order:1;

}

.idf-panel-right{

order:3;

}

.idf-heading{

margin-bottom:50px;

}

}

@media(max-width:767px){

.idf-advantage-section{

padding:70px 0;

}

.idf-title{

font-size:32px;

}

.idf-heading p{

font-size:15px;

}

.idf-panel{

padding:22px;

border-radius:18px;

}

.idf-panel-header{

gap:14px;

margin-bottom:24px;

}

.idf-panel-icon{

width:56px;
height:56px;
font-size:22px;

}

.idf-panel-header h3{

font-size:24px;

}

.idf-benefit-item{

gap:14px;

}

.idf-benefit-item h5{

font-size:17px;

}

.idf-benefit-item p{

font-size:14px;

}

.idf-info-block h5{

font-size:19px;

}

.idf-info-block p{

font-size:14px;

}

@media(max-width:767px){

.idf-core-circle{

    width:170px;
    height:170px;

    padding:15px;

}

.idf-core-circle h4{

    font-size:20px;

    max-width:120px;

}

.idf-core-circle span{

    font-size:12px;

    max-width:110px;

}

}

.ring-one{

width:190px;
height:190px;

}

.ring-two{

width:225px;
height:225px;

}

}

@media(max-width:575px){

.idf-title{

font-size:28px;

}

.idf-subtitle{

font-size:11px;

padding:8px 16px;

}

.idf-panel{

padding:18px;

}

.idf-panel-header{

flex-direction:column;
text-align:center;

}

.idf-benefit-item{

align-items:flex-start;

}

}

/*==================================================
REDUCED MOTION
==================================================*/

@media(prefers-reduced-motion:reduce){

.idf-advantage-section *,
.idf-advantage-section *::before,
.idf-advantage-section *::after{

animation:none !important;
transition:none !important;

}

}/*==================================
CENTER CONNECTOR
==================================*/

.idf-center{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    height:300px;

}

/* Lines */

.idf-line{

    position:absolute;

    top:50%;

    width:60px;

    height:2px;

    overflow:hidden;

    background:rgba(54,98,204,.15);

    pointer-events:none;

    z-index:1;

}

.idf-line-left{

    right:calc(50% + 110px);

}

.idf-line-right{

    left:calc(50% + 110px);

}

/* Moving Glow */

.idf-line span{

    position:absolute;

    left:-35%;

    top:0;

    width:35%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        #3662CC,
        #8ec7ff,
        transparent
    );

    animation:lineMove 2.8s linear infinite;

}

.idf-line-right span{

    animation-delay:1.4s;

}

@keyframes lineMove{

0%{

left:-40%;

}

100%{

left:120%;

}

}

/* Circle Glow */

.idf-core-circle{

position:relative;

z-index:5;

}

/* Pulse Ring */

.idf-core-circle::before{

content:"";

position:absolute;

inset:-14px;

border-radius:50%;

border:2px solid rgba(54,98,204,.18);

animation:pulseRing 3s infinite;

}

@keyframes pulseRing{

0%{

transform:scale(.9);

opacity:1;

}

100%{

transform:scale(1.25);

opacity:0;

}

}

/* Floating Shadow */

.idf-core-circle::after{

content:"";

position:absolute;

width:130px;

height:30px;

left:50%;

bottom:-24px;

transform:translateX(-50%);

background:rgba(54,98,204,.18);

filter:blur(18px);

border-radius:50%;

z-index:-1;

}@media(max-width:991px){

.idf-line{

display:none;

}

.idf-center{

height:220px;

}

}
/*========================================================
   platform Endpoint page start to end
========================================================*/

/* =================================
   DeepHunt 5 CARDS CENTER ALIGN
================================= */

.DeepHunt-capability-grid{

    display:grid;

    grid-template-columns:repeat(6, 1fr);

    gap:30px;

}



/* First 3 cards */

.DeepHunt-capability-grid .cyber-capability-card:nth-child(1){

    grid-column:1 / 3;

}


.DeepHunt-capability-grid .cyber-capability-card:nth-child(2){

    grid-column:3 / 5;

}


.DeepHunt-capability-grid .cyber-capability-card:nth-child(3){

    grid-column:5 / 7;

}



/* Bottom 2 centered cards */

.DeepHunt-capability-grid .cyber-capability-card:nth-child(4){

    grid-column:2 / 4;

}



.DeepHunt-capability-grid .cyber-capability-card:nth-child(5){

    grid-column:4 / 6;

}





/* Tablet */

@media(max-width:991px){

    .DeepHunt-capability-grid{

        grid-template-columns:repeat(2,1fr);

    }


    .DeepHunt-capability-grid .cyber-capability-card{

        grid-column:auto !important;

    }

}



/* Mobile */

@media(max-width:575px){

    .DeepHunt-capability-grid{

        grid-template-columns:1fr;

    }

}
/*=====================================================
iAcademy CONNECT SECTION - UPDATED CSS
PART 1/4
=====================================================*/


.iAcademy-connect-section{
    position:relative;
    padding:120px 0;
    overflow:hidden;
    background:linear-gradient(
        135deg,
        #010535 0%,
        #07124d 55%,
        #010535 100%
    );
}


/*======================
BACKGROUND
=======================*/

.iAcademy-bg-grid{
    position:absolute;
    inset:0;

    background-image:
    linear-gradient(
        rgba(255,255,255,.04) 1px,
        transparent 1px
    ),
    linear-gradient(
        90deg,
        rgba(255,255,255,.04) 1px,
        transparent 1px
    );

    background-size:50px 50px;
    opacity:.35;
    pointer-events:none;
}


.iAcademy-bg-glow{

    position:absolute;

    left:50%;
    top:50%;

    width:600px;
    height:600px;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(54,98,204,.35),
        rgba(54,98,204,.15) 40%,
        transparent 75%
    );

    filter:blur(50px);

    pointer-events:none;
}



/*======================
SECTION TITLE
=======================*/

.iAcademy-connect-section .section-title{

    position:relative;
    z-index:5;

}


.iAcademy-connect-section .section-title h2{

    color:#fff;

    font-size:48px;

    font-weight:700;

    margin-bottom:20px;

}


.iAcademy-connect-section .section-title h2 span{

    color:var(--accent-color);

}


.iAcademy-connect-section .section-title p{

    color:#fff;

    opacity:.85;

    max-width:760px;

    margin:auto;

    line-height:1.8;

}



/*======================
MAIN WRAPPER
=======================*/


.iAcademy-wrapper{

    position:relative;

    display:flex;

    align-items:stretch;

    justify-content:center;

    gap:90px;

    z-index:2;

}



/*======================
CARDS
=======================*/


.iAcademy-card{

    position:relative;

    flex:1;

    max-width:430px;

    display:flex;

    flex-direction:column;


    min-height:600px;


    padding:35px;


    background:
    rgba(255,255,255,.07);


    backdrop-filter:blur(18px);


    border:

    1px solid rgba(255,255,255,.12);


    border-radius:28px;


    overflow:hidden;


    box-shadow:

    0 25px 60px rgba(0,0,0,.35);


    transition:

    .55s cubic-bezier(.22,.61,.36,1);

}



.iAcademy-card:hover{


    transform:translateY(-12px);


    border-color:

    rgba(54,98,204,.7);


    box-shadow:


    0 35px 80px rgba(0,0,0,.45),

    0 0 45px rgba(54,98,204,.35);


}



.card-glow{


    position:absolute;


    inset:0;


    background:

    radial-gradient(
        circle at top right,
        rgba(54,98,204,.28),
        transparent 65%
    );


    opacity:0;


    transition:.5s;

}



.iAcademy-card:hover .card-glow{

    opacity:1;

}



/*======================
ALL TEXT WHITE FIX
=======================*/


.iAcademy-card h3,
.iAcademy-card p,
.metric-item p,
.metric-item h5,
.intro-text p,
.core h3,
.core p{

    color:#fff !important;

}



.iAcademy-card p,
.metric-item p,
.intro-text p,
.core p{

    opacity:.88;

}



/*======================
CARD HEADER
=======================*/


.card-header{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:30px;

}



.card-header h3{

    font-size:26px;

    font-weight:700;

    margin:0;

    line-height:1.3;

}



.card-icon{


    width:65px;

    height:65px;


    flex-shrink:0;


    border-radius:20px;


    display:flex;

    align-items:center;

    justify-content:center;


    background:

    linear-gradient(
        135deg,
        var(--accent-color),
        #4d8cff
    );


    color:#fff;


    font-size:24px;


    box-shadow:

    0 15px 35px rgba(54,98,204,.45);


}




/*======================
LEFT METRICS
=======================*/


.metric-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}



.metric-item{


    display:flex;

    align-items:flex-start;


    gap:18px;


    padding:16px;


    border-radius:18px;


    border:

    1px solid transparent;


    transition:.45s;

}



.metric-item:hover{


    background:

    rgba(255,255,255,.05);


    border-color:

    rgba(54,98,204,.45);


    transform:translateX(8px);

}




.metric-icon{


    width:52px;

    height:52px;


    flex-shrink:0;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


    background:

    rgba(54,98,204,.18);


    color:#7fb0ff;


    font-size:18px;


}



.metric-item p{


    margin:0;


    line-height:1.7;


}
/*=====================================================
 iAcademy CYBER CONNECT SECTION
 PREMIUM REDESIGN CSS
=====================================================*/


.cyber-connect-section{

    position:relative;
    padding:120px 0;

    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        #020535,
        #08165c,
        #020535
    );

    color:#fff;

}


/*=========================
BACKGROUND
=========================*/


.cyber-grid{

    position:absolute;
    inset:0;

    background-image:

    linear-gradient(
        rgba(255,255,255,.04) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(255,255,255,.04) 1px,
        transparent 1px
    );


    background-size:50px 50px;

    opacity:.4;

}



.cyber-glow{

    position:absolute;

    width:700px;
    height:700px;

    left:50%;
    top:50%;

    transform:
    translate(-50%,-50%);


    border-radius:50%;


    background:

    radial-gradient(
        circle,
        rgba(45,110,255,.45),
        transparent 70%
    );


    filter:blur(50px);

}





/*=========================
HEADING
=========================*/


.cyber-heading{

    text-align:center;

    position:relative;

    z-index:5;

    margin-bottom:70px;

}



.cyber-heading span{

    color:#8ab4ff;

    font-size:15px;

    letter-spacing:2px;

    text-transform:uppercase;

}



.cyber-heading h2{

    margin:15px 0;

    font-size:48px;

    font-weight:800;

    color:var(--primary-color);

}



.cyber-heading strong{

    color:#4f8cff;

}



.cyber-heading p{

    max-width:750px;

    margin:auto;

    color:#000;

    opacity:.85;

    line-height:1.8;

}






/*=========================
MAIN GRID
=========================*/


.cyber-wrapper{


    position:relative;


    z-index:3;


    display:grid;


    grid-template-columns:

    minmax(320px,430px)

    320px

    minmax(320px,430px);


    justify-content:center;


    align-items:center;


    gap:70px;


}




/*=========================
CARDS
=========================*/


.cyber-card{


    position:relative;


    overflow:hidden;


    padding:35px;


    min-height:600px;


    display:flex;

    flex-direction:column;



    background:

    rgba(255,255,255,.08);



    backdrop-filter:

    blur(20px);



    border:

    1px solid rgba(255,255,255,.15);



    border-radius:30px;



    box-shadow:


    0 30px 70px rgba(0,0,0,.35);



    transition:.6s cubic-bezier(.2,.8,.2,1);



}



.cyber-card:hover{


    transform:

    translateY(-15px);



    border-color:

    rgba(90,150,255,.8);



    box-shadow:


    0 40px 90px rgba(0,0,0,.5),


    0 0 50px rgba(60,120,255,.3);


}




/* SHINE */


.cyber-shine{


    position:absolute;


    top:0;

    left:-120%;


    width:80px;


    height:100%;


    background:


    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.25),

    transparent

    );


    transform:skewX(-25deg);


    transition:.8s;


}



.cyber-card:hover .cyber-shine{

    left:130%;

}




/*=========================
CARD HEADER
=========================*/


.cyber-card-header{


    display:flex;


    align-items:center;


    gap:20px;


    margin-bottom:35px;


}



.cyber-card-header h3{


    margin:0;


    color:#fff;


    font-size:25px;


    line-height:1.3;


}




.cyber-card-icon{


    width:65px;


    height:65px;


    flex-shrink:0;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:20px;



    background:

    linear-gradient(

    135deg,

    #3976ff,

    #75a6ff

    );



    font-size:25px;



    box-shadow:


    0 20px 40px rgba(50,110,255,.5);



    transition:.5s;


}



.cyber-card:hover .cyber-card-icon{


    transform:

    rotate(360deg);


}




/*=========================
LEFT METRICS
=========================*/


.cyber-metrics{


    display:flex;


    flex-direction:column;


    gap:20px;


}



.cyber-metric{


    display:flex;


    align-items:flex-start;


    gap:18px;


    padding:15px;


    border-radius:18px;


    transition:.4s;


}



.cyber-metric:hover{


    background:

    rgba(255,255,255,.08);



    transform:

    translateX(10px);


}



.cyber-small-icon{


    width:45px;


    height:45px;


    border-radius:50%;


    flex-shrink:0;


    display:flex;


    align-items:center;


    justify-content:center;


    background:

    rgba(80,140,255,.25);



    color:#fff;


}



.cyber-metric p{


    margin:0;


    color:#fff;


    line-height:1.7;


    opacity:.9;


}
/*=====================================================
CENTER SYSTEM
=====================================================*/


.cyber-center{

    position:relative;

    width:320px;

    height:320px;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:5;

}



.cyber-orb{

    position:relative;


    width:270px;

    height:270px;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


    background:

    rgba(255,255,255,.06);


    backdrop-filter:

    blur(18px);



    box-shadow:


    0 0 80px rgba(60,120,255,.5),


    inset 0 0 40px rgba(255,255,255,.12);



    animation:

    orbFloat 5s ease-in-out infinite;



}





/*=========================
CENTER GLOW
=========================*/


.cyber-orb::before{


    content:"";


    position:absolute;


    inset:-20px;


    border-radius:50%;


    background:


    radial-gradient(

        circle,

        rgba(60,130,255,.45),

        transparent 70%

    );


    z-index:-1;


    animation:

    pulseGlow 4s infinite;


}





/*=========================
RINGS
=========================*/


.cyber-ring{


    position:absolute;


    border-radius:50%;


    border:

    1px solid rgba(100,160,255,.6);


}



.ring-one{


    width:270px;

    height:270px;


    animation:

    rotateRing 18s linear infinite;


}



.ring-two{


    width:220px;

    height:220px;


    border-style:dashed;


    animation:

    rotateReverse 12s linear infinite;


}



.ring-three{


    width:170px;

    height:170px;


    animation:

    ringScale 5s ease-in-out infinite;


}





/*=========================
CORE
=========================*/


.cyber-core{


    position:relative;


    z-index:10;


    text-align:center;


}



.cyber-logo{


    width:75px;


    height:75px;


    margin:auto;


    margin-bottom:15px;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;



    background:


    linear-gradient(

    135deg,

    #3976ff,

    #7daeff

    );



    color:#fff;


    font-size:30px;



    box-shadow:


    0 15px 40px rgba(60,120,255,.6);



    animation:

    logoFloat 3s ease-in-out infinite;


}



.cyber-core h3{


    margin:0 0 8px;


    color:#fff;


    font-size:30px;


    font-weight:800;


}



.cyber-core p{


    margin:0;


    color:#fff;


    opacity:.9;


    font-size:15px;


}





/*=========================
CONNECT LINES
=========================*/


.cyber-line{


    position:absolute;


    width:100px;


    height:3px;


    background:

    rgba(255,255,255,.2);


    overflow:hidden;


    top:50%;


}



.cyber-line-left{


    right:100%;


}



.cyber-line-right{


    left:100%;


}



.cyber-line span{


    position:absolute;


    width:50%;


    height:100%;


    left:-50%;


    background:


    linear-gradient(

    90deg,

    transparent,

    #fff,

    #4d8cff,

    transparent

    );


    animation:

    lineMove 2s linear infinite;


}





/*=========================
RIGHT CONTENT
=========================*/


.cyber-description p{


    color:#fff;


    opacity:.9;


    line-height:1.9;


    font-size:16px;


}





.cyber-tags{


    display:grid;


    grid-template-columns:repeat(2,1fr);


    gap:15px;


    margin-top:30px;


}



.cyber-tags div{


    padding:15px;


    border-radius:15px;


    background:

    rgba(255,255,255,.07);



    color:#fff;


    transition:.4s;


}



.cyber-tags i{


    color:#7eb0ff;


    margin-right:8px;


}



.cyber-tags div:hover{


    background:

    rgba(70,130,255,.25);


    transform:

    translateY(-5px);


}





/*=====================================================
ANIMATIONS
=====================================================*/


@keyframes rotateRing{

from{

transform:rotate(0);

}

to{

transform:rotate(360deg);

}

}



@keyframes rotateReverse{

from{

transform:rotate(360deg);

}

to{

transform:rotate(0);

}

}



@keyframes ringScale{


0%,100%{

transform:scale(1);

}


50%{

transform:scale(1.08);

}


}



@keyframes orbFloat{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-12px);

}


}



@keyframes logoFloat{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-10px);

}


}



@keyframes pulseGlow{


0%,100%{

opacity:.5;

transform:scale(.9);

}


50%{

opacity:1;

transform:scale(1.15);

}


}



@keyframes lineMove{


0%{

left:-50%;

}


100%{

left:120%;

}


}





/*=====================================================
RESPONSIVE
=====================================================*/


@media(max-width:1200px){


.cyber-wrapper{


    gap:35px;


    grid-template-columns:

    1fr 260px 1fr;


}



.cyber-card{


    min-height:560px;


}


}





@media(max-width:991px){


.cyber-wrapper{


    display:flex;


    flex-direction:column;


    gap:60px;


}



.cyber-card{


    width:100%;


    min-height:auto;


}



.cyber-center{


    order:2;


}



.cyber-left-card{

order:1;

}



.cyber-right-card{

order:3;

}



.cyber-line{


    width:3px;


    height:60px;


}



.cyber-line-left{


    top:-60px;


    right:auto;


    left:50%;


}



.cyber-line-right{


    top:100%;


    left:50%;


}




}




@media(max-width:767px){


.cyber-connect-section{


padding:80px 0;


}



.cyber-heading h2{


font-size:34px;


}



.cyber-card{


padding:25px;


}



.cyber-card-header{


flex-direction:column;

text-align:center;


}



.cyber-card-header h3{


font-size:22px;


}



.cyber-orb{


width:210px;

height:210px;


}



.ring-one{


width:210px;

height:210px;


}



.ring-two{


width:170px;

height:170px;


}



.ring-three{


width:130px;

height:130px;


}



.cyber-logo{


width:55px;

height:55px;


font-size:22px;


}



.cyber-core h3{


font-size:23px;


}



.cyber-tags{


grid-template-columns:1fr;


}



}





@media(max-width:480px){


.cyber-heading h2{


font-size:28px;


}



.cyber-card{


padding:20px;


}



.cyber-orb{


width:180px;

height:180px;


}



.ring-one{


width:180px;

height:180px;


}



.ring-two{


width:145px;

height:145px;


}



.ring-three{


width:115px;

height:115px;


}



.cyber-core h3{


font-size:20px;


}



.cyber-core p{


font-size:12px;


}


}
/*=========================
iAcademy start page
=========================*//* ================================
   Premium Cyber Card Animation
================================ */

.iac-ent-overview-card {

    position: relative;
    overflow: hidden;

    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(15px);

    border-radius: 22px;

    padding: 35px 25px;

    opacity: 0;

    transform:
        translateY(80px)
        rotateX(15deg)
        scale(.92);

    animation: cyberCardReveal 1s cubic-bezier(.16,1,.3,1) forwards;

    transition:
        transform .6s cubic-bezier(.16,1,.3,1),
        box-shadow .6s ease,
        border-color .4s ease;

    border:1px solid rgba(255,255,255,.4);

    perspective:1000px;

}


/* Stagger effect */

.iac-ent-overview-card:nth-child(1){
    animation-delay:.1s;
}

.iac-ent-overview-card:nth-child(2){
    animation-delay:.25s;
}

.iac-ent-overview-card:nth-child(3){
    animation-delay:.4s;
}

.iac-ent-overview-card:nth-child(4){
    animation-delay:.55s;
}



/* Reveal */

@keyframes cyberCardReveal {

    0%{

        opacity:0;

        transform:
        translateY(80px)
        rotateX(25deg)
        scale(.85);

    }


    100%{

        opacity:1;

        transform:
        translateY(0)
        rotateX(0)
        scale(1);

    }

}



/* Animated glow layer */

.iac-ent-overview-card::before {

    content:"";

    position:absolute;

    width:150%;
    height:150%;

    background:
    linear-gradient(
        120deg,
        transparent,
        rgba(13,110,253,.25),
        transparent
    );

    top:-100%;
    left:-100%;

    transition:.8s ease;

}


/* Hover */

.iac-ent-overview-card:hover::before {

    top:100%;
    left:100%;

}



.iac-ent-overview-card:hover {


    transform:

    translateY(-18px)
    rotateX(5deg)
    rotateY(-5deg)
    scale(1.04);


    box-shadow:

    0 25px 60px rgba(0,0,0,.15),
    0 0 40px rgba(13,110,253,.15);


    border-color:#0d6efd;

}



/* Icon futuristic animation */

.iac-ent-overview-icon {


    width:75px;
    height:75px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;


    background:
    linear-gradient(
        135deg,
        #0d6efd,
        #6610f2
    );


    color:white;


    transition:
    transform .6s cubic-bezier(.16,1,.3,1),
    box-shadow .4s ease;


}



/* Icon hover */

.iac-ent-overview-card:hover 
.iac-ent-overview-icon {


    transform:

    rotate(360deg)
    scale(1.15);


    box-shadow:

    0 0 30px rgba(13,110,253,.6);

}




/* Title animation */

.iac-ent-overview-card-title {

    transition:
    transform .4s ease,
    color .4s ease;

}


.iac-ent-overview-card:hover 
.iac-ent-overview-card-title {


    transform:translateX(8px);

    color:#0d6efd;

}



/* Paragraph */

.iac-ent-overview-card-text {

    transition:.4s ease;

}


.iac-ent-overview-card:hover 
.iac-ent-overview-card-text {

    transform:translateY(-5px);

}.iac-ent-section {
    position:relative;
    overflow:hidden;
}


.iac-ent-section::after {

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    background:
    radial-gradient(
        circle,
        rgba(13,110,253,.15),
        transparent 70%
    );


    top:-200px;
    right:-200px;


    animation:
    floatingGlow 8s infinite alternate ease-in-out;

}



@keyframes floatingGlow {

    from{
        transform:translate(0,0);
    }

    to{
        transform:translate(-80px,80px);
    }

}/* ==========================================
   CYBER BLUE SECTION BACKGROUND
========================================== */

.iac-ent-blue-bg {

    position: relative;
    overflow: hidden;

    background:

    radial-gradient(
        circle at 15% 20%,
        rgba(54,98,204,.35),
        transparent 35%
    ),

    radial-gradient(
        circle at 85% 75%,
        rgba(54,98,204,.25),
        transparent 40%
    ),

    linear-gradient(
        135deg,
        #010535 0%,
        #07105c 50%,
        #010535 100%
    );

}


/* Cyber dot texture */

.iac-ent-blue-bg::before {

    content:"";

    position:absolute;

    inset:0;


    background-image:

    radial-gradient(
        rgba(255,255,255,.12) 1px,
        transparent 1px
    );


    background-size:35px 35px;

    opacity:.25;

    pointer-events:none;

}


/* Floating blue light */

.iac-ent-blue-bg::after {

    content:"";

    position:absolute;


    width:500px;

    height:500px;


    right:-180px;

    top:-180px;


    background:

    radial-gradient(
        circle,
        rgba(54,98,204,.45),
        transparent 70%
    );


    filter:blur(10px);


    animation:

    blueMove 8s infinite alternate ease-in-out;


}


@keyframes blueMove {


    from {

        transform:translate(0,0);

    }


    to {

        transform:translate(-80px,80px);

    }

}



/* Container above effects */

.iac-ent-blue-bg .container {

    position:relative;

    z-index:2;

}



/* ==========================================
   IMAGE LIGHT BLUE GLASS EFFECT
========================================== */


.iac-ent-blue-bg .col-lg-6:first-child {

    position:relative;

}



/* blue glow behind image */

.iac-ent-blue-bg .col-lg-6:first-child::before {


    content:"";


    position:absolute;


    width:380px;

    height:380px;


    left:50%;

    top:50%;


    transform:translate(-50%,-50%);


    background:

    radial-gradient(
        circle,
        rgba(54,98,204,.45),
        transparent 70%
    );


    filter:blur(40px);


    z-index:0;


}



/* Image */

.iac-ent-blue-bg img {


    position:relative;

    z-index:2;


    width:100%;


    border-radius:28px !important;


    padding:10px;



    background:

    linear-gradient(
        145deg,
        rgba(54,98,204,.35),
        rgba(255,255,255,.25)
    );



    border:

    1px solid rgba(255,255,255,.25);



    box-shadow:


    0 25px 70px rgba(0,0,0,.45),


    0 0 50px rgba(54,98,204,.25);



    transition:

    transform .6s cubic-bezier(.16,1,.3,1),

    box-shadow .6s ease;

}



/* Image hover */


.iac-ent-blue-bg img:hover {


    transform:


    translateY(-12px)

    scale(1.03);



    box-shadow:


    0 40px 90px rgba(0,0,0,.55),


    0 0 60px rgba(54,98,204,.45);


}



/* ==========================================
   TEXT COLORS
========================================== */


.iac-ent-blue-bg .iac-ent-title {


    color:#ffffff;

}



.iac-ent-blue-bg .iac-ent-subtitle {


    color:

    rgba(255,255,255,.82);


}



.iac-ent-blue-bg .iac-ent-badge {


    color:#ffffff;


    background:

    rgba(255,255,255,.12);



    border:

    1px solid rgba(255,255,255,.18);



    backdrop-filter:blur(10px);


}



/* Button glow */

.iac-ent-blue-bg .btn-default {


    transition:.4s ease;


}



.iac-ent-blue-bg .btn-default:hover {


    transform:translateY(-5px);


    box-shadow:

    0 15px 35px rgba(54,98,204,.45);


}



/* ==========================================
   TABLET RESPONSIVE
========================================== */


@media(max-width:991px){


    .iac-ent-blue-bg {


        padding-top:70px;

        padding-bottom:70px;


    }



    .iac-ent-blue-bg img {


        width:90%;

        display:block;

        margin:auto;


    }



    .iac-ent-blue-bg .iac-ent-title,

    .iac-ent-blue-bg .iac-ent-subtitle {


        text-align:center !important;


    }



    .iac-ent-blue-bg .iac-ent-badge {


        display:table;

        margin:auto;


    }



}



/* ==========================================
   MOBILE RESPONSIVE
========================================== */


@media(max-width:767px){


    .iac-ent-blue-bg {


        padding-top:50px;

        padding-bottom:50px;


    }



    .iac-ent-blue-bg::after {


        width:280px;

        height:280px;


    }



    .iac-ent-blue-bg .col-lg-6:first-child::before {


        width:230px;

        height:230px;


    }



    .iac-ent-blue-bg img {


        width:100%;


        padding:7px;


        border-radius:20px !important;


    }



    .iac-ent-blue-bg .iac-ent-title {


        font-size:28px;

        line-height:1.3;


    }



    .iac-ent-blue-bg .iac-ent-subtitle {


        font-size:15px;

        line-height:1.7;


    }


}



/* ==========================================
   SMALL MOBILE
========================================== */


@media(max-width:480px){


    .iac-ent-blue-bg img {


        border-radius:16px !important;


    }



    .iac-ent-blue-bg .iac-ent-title {

		padding-top: 20px;
        font-size:24px;


    }



    .iac-ent-blue-bg .iac-ent-badge {


        font-size:13px;

        padding:8px 14px;


    }


}/* ==========================================
   ENTERPRISE CAPABILITY SECTION
========================================== */


.iac-cap-section{

    padding:100px 0;

    background:#f3f6fc;

    overflow:hidden;

}



/* Heading */


.iac-cap-heading{

    max-width:800px;

    margin:auto;

    text-align:center;

    margin-bottom:55px;

}



.iac-cap-badge{


    display:inline-flex;

    align-items:center;

    gap:8px;


    padding:10px 20px;


    border-radius:50px;


    background:#ffffff;


    color:#3662cc;


    font-weight:600;


    box-shadow:
    0 10px 30px rgba(1,5,53,.08);


}



.iac-cap-title{


    margin-top:22px;


    color:#010535;


    font-size:42px;


    font-weight:700;


}



.iac-cap-subtitle{


    color:#2e314d;


    font-size:17px;


    line-height:1.7;


}




/* ==========================================
   CARD
========================================== */


.iac-cap-row{

    align-items:stretch;

}



.iac-cap-card{


    height:100%;


    min-height:360px;


    padding:35px 30px;


    background:#ffffff;


    border-radius:28px;


    position:relative;


    overflow:hidden;



    border:1px solid rgba(54,98,204,.10);



    display:flex;

    flex-direction:column;



    opacity:0;


    transform:

    translateY(50px);



    animation:

    capShow .8s ease forwards;



    transition:

    transform .5s cubic-bezier(.16,1,.3,1),

    box-shadow .5s ease;

}




/* Animation delay */


.iac-cap-card:nth-child(1){

animation-delay:.1s;

}

.iac-cap-card:nth-child(2){

animation-delay:.25s;

}

.iac-cap-card:nth-child(3){

animation-delay:.4s;

}

.iac-cap-card:nth-child(4){

animation-delay:.55s;

}




@keyframes capShow{


from{

opacity:0;

transform:
translateY(60px)
scale(.95);

}


to{

opacity:1;

transform:
translateY(0)
scale(1);

}


}





/* Gradient shine */


.iac-cap-card::before{


content:"";


position:absolute;


width:180px;

height:180px;


right:-90px;

top:-90px;


background:

radial-gradient(

circle,

rgba(54,98,204,.25),

transparent 70%

);



transition:.6s;


}



.iac-cap-card:hover::before{


transform:scale(2);


}



/* Hover */


.iac-cap-card:hover{


transform:

translateY(-15px);



box-shadow:

0 25px 70px rgba(1,5,53,.15);



}





/* ==========================================
   ICON
========================================== */


.iac-cap-icon{


width:78px;

height:78px;


display:flex;

align-items:center;

justify-content:center;



border-radius:22px;


background:

linear-gradient(

135deg,

#3662cc,

#010535

);



color:#fff;


font-size:30px;



margin-bottom:25px;



transition:.5s ease;



}




.iac-cap-card:hover 
.iac-cap-icon{


transform:

rotateY(360deg)
scale(1.1);



box-shadow:

0 0 35px rgba(54,98,204,.5);



}





/* Title */


.iac-cap-card h3{


font-size:21px;


line-height:1.4;


color:#010535;


margin-bottom:20px;


font-weight:700;


}




/* List */


.iac-cap-card ul{


padding:0;

margin:0;


list-style:none;


}



.iac-cap-card li{


position:relative;


padding-left:25px;


margin-bottom:13px;


font-size:15px;


color:#2e314d;


}



.iac-cap-card li::before{


content:"";


position:absolute;


left:0;


top:8px;


width:8px;

height:8px;


background:#3662cc;


border-radius:50%;


}





/* ==========================================
   TABLET
========================================== */


@media(max-width:991px){


.iac-cap-section{

padding:80px 0;

}


.iac-cap-title{

font-size:34px;

}



.iac-cap-card{

min-height:350px;

}



}





/* ==========================================
   MOBILE
========================================== */


@media(max-width:767px){


.iac-cap-section{

padding:60px 0;

}



.iac-cap-title{

font-size:28px;

}



.iac-cap-subtitle{

font-size:15px;

}



.iac-cap-card{


min-height:auto;


padding:28px 22px;


}



.iac-cap-icon{


width:65px;

height:65px;


font-size:25px;


}



.iac-cap-card h3{


font-size:19px;


}



}




/* SMALL MOBILE */


@media(max-width:480px){


.iac-cap-title{

font-size:24px;

}


.iac-cap-badge{

font-size:13px;

padding:8px 15px;

}


}
/* ==========================================================
   iAcademy ENTERPRISE 2026 PREMIUM UI SYSTEM
   UPDATED RESPONSIVE + ADVANCED ANIMATION
   PART 1/2
========================================================== */
/* =====================================================
   IA C A D E M Y HEADER
   UNIQUE CSS - NO CONFLICT
===================================================== */


.academy-heading{

    position:relative;

    z-index:5;

    text-align:center;

    margin-bottom:65px;

}



/* Badge */

.academy-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;


    padding:11px 26px;


    border-radius:50px;


    color:#ffffff;


    background:

    rgba(255,255,255,.12);


    border:

    1px solid rgba(255,255,255,.30);


    font-size:13px;

    font-weight:700;


    letter-spacing:.6px;


    text-transform:uppercase;


    backdrop-filter:blur(15px);


    margin-bottom:25px;


}





/* Heading */

.academy-title{


    margin:0 auto 20px;


    font-size:48px;


    line-height:1.15;


    font-weight:800;


    color:#ffffff !important;


}



.academy-title strong{


    color:#75adff !important;


}





/* Description */


.academy-description{


    max-width:760px;


    margin:auto;


    color:

    rgba(255,255,255,.82) !important;


    font-size:17px;


    line-height:1.8;


}





/* Glow */

.academy-heading::before{


    content:"";


    position:absolute;


    width:400px;


    height:400px;


    left:50%;


    top:-150px;


    transform:translateX(-50%);


    background:


    radial-gradient(
        circle,
        rgba(80,150,255,.25),
        transparent 70%
    );


    filter:blur(35px);


    z-index:-1;


}




/* Tablet */

@media(max-width:991px){


.academy-title{

    font-size:38px;

}


.academy-description{

    font-size:16px;

}


}




/* Mobile */

@media(max-width:767px){


.academy-heading{

    margin-bottom:45px;

}


.academy-title{

    font-size:30px;

}


.academy-description{

    font-size:15px;

}


.academy-badge{

    font-size:11px;

    padding:8px 16px;

}


}




/* Small Mobile */

@media(max-width:480px){


.academy-title{

    font-size:26px;

}


}

/* ==========================
   GLOBAL FOUNDATION
========================== */

.iac-ent-section{
    position:relative;
    overflow:hidden;
    isolation:isolate;
}


.iac-ent-py-100{
    padding:120px 0;
}


.iac-ent-bg-light{
    background:#f6f8ff;
}


.iac-ent-bg-white{
    background:#ffffff;
}


.iac-ent-bg-dark{
    background:
    linear-gradient(
        135deg,
        #010535 0%,
        #071b68 50%,
        #010535 100%
    );
    color:#fff;
}


/* Header spacing fix */

.iac-ent-hero-section{
    margin-top:0px;
}

/* Desktop */
.iac-ent-hero-section{
    padding: 170px 0 80px !important;
}

/* Laptop */
@media (max-width: 1199px){
    .iac-ent-hero-section{
        padding-top: 150px !important;
    }
}

/* Tablet */
@media (max-width: 991px){
    .iac-ent-hero-section{
        padding-top: 140px !important;
    }
}

/* Mobile */
@media (max-width: 767px){
    .iac-ent-hero-section{
        padding-top: 135px !important;
    }
}

/* Small Mobile */
@media (max-width: 575px){
    .iac-ent-hero-section{
        padding-top: 130px !important;
    }
}
/* Container animation layer */

.iac-ent-section .container{
    position:relative;
    z-index:3;
}


/* ==========================
   PREMIUM BACKGROUND GLOW
========================== */


.iac-ent-section::before{

content:"";

position:absolute;

width:500px;
height:500px;

background:
radial-gradient(
circle,
rgba(54,98,204,.22),
transparent 70%
);

right:-200px;
top:-200px;

filter:blur(20px);

animation:
iacFloatGlow 12s infinite ease-in-out;

z-index:-1;

}



@keyframes iacFloatGlow{

0%,100%{
transform:translate(0,0) scale(1);
}

50%{
transform:
translate(-50px,60px)
scale(1.2);
}

}



/* ==========================
   BADGE
========================== */


.iac-ent-badge{

position:relative;

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 24px;

border-radius:100px;

background:
rgba(54,98,204,.12);

border:
1px solid rgba(54,98,204,.25);

color:#3662cc;

font-size:12px;

font-weight:700;

letter-spacing:.8px;

text-transform:uppercase;

overflow:hidden;

transition:
all .5s cubic-bezier(.2,.8,.2,1);

}



.iac-ent-badge::after{

content:"";

position:absolute;

height:100%;
width:50%;

top:0;
left:-70%;


background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.8),
transparent
);


transition:.8s;

}



.iac-ent-badge:hover::after{

left:120%;

}



.iac-ent-badge:hover{

transform:
translateY(-5px);

box-shadow:

0 15px 40px rgba(54,98,204,.2);

}



.iac-ent-badge i{

font-size:15px;

}



.iac-ent-badge-dark{

background:
rgba(255,255,255,.1);

color:white;

border-color:
rgba(255,255,255,.25);

}



/* ==========================
   TITLES
========================== */


.iac-ent-title{

font-size:44px;

line-height:1.2;

font-weight:800;

letter-spacing:-1px;

color:#010535;

margin-bottom:20px;

}



.iac-ent-title-light{

color:#fff;

}



.iac-ent-subtitle{

font-size:17px;

line-height:1.8;

color:#667085;

}



.iac-ent-subtitle-light{

color:
rgba(255,255,255,.75);

}



/* ==========================
 HERO SECTION
========================== */
/* =====================================================
   iAcademy HERO SECTION
   UPDATED CSS
   IMAGE STATIC + SMALLER + RESPONSIVE
===================================================== */


.iac-ent-hero-section{

    padding:110px 0 100px;

    background:

    radial-gradient(
        circle at 80% 20%,
        rgba(54,98,204,.35),
        transparent 35%
    ),

    linear-gradient(
        135deg,
        #010535,
        #07165d
    );


    position:relative;

    overflow:hidden;

}





/* rotating circle same */

.iac-ent-hero-section::after{


    content:"";


    position:absolute;


    width:750px;


    height:750px;


    border-radius:50%;



    border:

    1px solid rgba(255,255,255,.08);



    right:-300px;


    top:-300px;



    animation:

    iacRotateCircle 25s linear infinite;


}





@keyframes iacRotateCircle{


    from{

        transform:rotate(0deg);

    }


    to{

        transform:rotate(360deg);

    }


}







/* ===============================
   CONTENT
================================ */


.iac-ent-hero-title{


    font-size:54px;


    line-height:1.12;


    font-weight:850;


    color:#fff;


    margin-bottom:25px;


}




.iac-ent-hero-desc{


    font-size:17px;


    line-height:1.8;


    color:

    rgba(255,255,255,.82);


}




.iac-ent-hero-actions{


    display:flex;


    gap:18px;


    flex-wrap:wrap;


    margin-top:35px;


}






/* ===============================
   HERO IMAGE
================================ */


.iac-ent-hero-media{


    position:relative;


    width:90%;


    margin-left:auto;



    border-radius:32px;



    overflow:hidden;



    border:

    1px solid rgba(255,255,255,.18);




    box-shadow:


    0 40px 100px rgba(0,0,0,.45);



    /* FLOATING REMOVED */

    animation:none;



}





/* image size */


.iac-ent-hero-media img{


    width:100%;


    max-height:520px;


    object-fit:contain;


    display:block;



    transition:

    transform .9s cubic-bezier(.2,.8,.2,1);


}




/* hover zoom same */


.iac-ent-hero-media:hover img{


    transform:

    scale(1.06);


}







/* ===============================
   FLOATING CARD
================================ */


.iac-ent-hero-badge-float{


    position:absolute;


    left:25px;


    bottom:25px;


    padding:18px 24px;


    border-radius:20px;




    display:flex;


    align-items:center;


    gap:15px;



    background:

    rgba(1,5,53,.75);



    backdrop-filter:

    blur(20px);



    border:

    1px solid rgba(255,255,255,.2);



    animation:

    iacBadgeMove 5s infinite ease-in-out;


}




@keyframes iacBadgeMove{


    0%,100%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-10px);

    }


}




.iac-ent-hero-icon-box{


    width:52px;


    height:52px;


    border-radius:16px;



    display:flex;


    align-items:center;


    justify-content:center;




    background:


    linear-gradient(
        135deg,
        #3662cc,
        #78a6ff
    );



    color:white;


    font-size:22px;



    box-shadow:


    0 15px 40px rgba(54,98,204,.5);


}






/* =====================================================
   RESPONSIVE
===================================================== */



@media(max-width:1199px){


    .iac-ent-hero-title{


        font-size:46px;

    }



    .iac-ent-hero-media{


        width:95%;

    }



    .iac-ent-hero-media img{


        max-height:450px;

    }


}







@media(max-width:991px){


    .iac-ent-hero-section{


        padding:90px 0;

    }



    .iac-ent-hero-title{


        font-size:38px;

    }



    .iac-ent-hero-desc{


        font-size:16px;

    }



    .iac-ent-hero-media{


        width:85%;

        margin:40px auto 0;

    }



    .iac-ent-hero-media img{


        max-height:400px;

    }


}







@media(max-width:767px){


    .iac-ent-hero-section{


        padding:70px 0;

    }




    .iac-ent-hero-title{


        font-size:32px;


    }




    .iac-ent-hero-desc{


        font-size:15px;


    }




    .iac-ent-hero-actions{


        margin-top:25px;

    }




    .iac-ent-hero-media{


        width:100%;


        border-radius:24px;

    }



    .iac-ent-hero-media img{


        max-height:330px;

    }



}







@media(max-width:480px){


    .iac-ent-hero-title{


        font-size:27px;


    }




    .iac-ent-hero-media{


        border-radius:20px;

    }




    .iac-ent-hero-media img{


        max-height:260px;

    }


}
/* ==========================================================
   PREMIUM CARD SYSTEM
========================================================== */


.iac-ent-grid-stretch > [class*="col-"]{
    display:flex;
}



/* ==========================
   COMMON CARD STYLE
========================== */


.iac-ent-overview-card,
.iac-ent-cap-card,
.iac-ent-value-card{

position:relative;

height:100%;

background:#fff;

border-radius:28px;

padding:38px;

border:

1px solid rgba(1,5,53,.08);


overflow:hidden;


transition:

all .6s cubic-bezier(.2,.8,.2,1);


}



.iac-ent-overview-card::before,
.iac-ent-cap-card::before,
.iac-ent-value-card::before{


content:"";

position:absolute;

inset:0;


background:

linear-gradient(
135deg,
rgba(54,98,204,.18),
transparent 55%
);


opacity:0;


transition:.5s;


}



.iac-ent-overview-card:hover::before,
.iac-ent-cap-card:hover::before,
.iac-ent-value-card:hover::before{


opacity:1;

}



.iac-ent-overview-card:hover,
.iac-ent-cap-card:hover,
.iac-ent-value-card:hover{


transform:

translateY(-15px)
scale(1.02);


box-shadow:


0 35px 90px rgba(1,5,53,.16);


border-color:

rgba(54,98,204,.5);


}





/* ==========================
   CARD ICON
========================== */


.iac-ent-overview-icon,
.iac-ent-cap-icon,
.iac-ent-value-icon{


width:70px;

height:70px;


border-radius:22px;


background:

rgba(54,98,204,.12);


color:#3662cc;


display:flex;


align-items:center;


justify-content:center;


font-size:28px;


margin-bottom:25px;


transition:

all .6s cubic-bezier(.2,.8,.2,1);


position:relative;


z-index:2;

}



.iac-ent-overview-card:hover 
.iac-ent-overview-icon,

.iac-ent-cap-card:hover 
.iac-ent-cap-icon,

.iac-ent-value-card:hover 
.iac-ent-value-icon{


background:#3662cc;


color:#fff;


transform:

rotateY(360deg)
scale(1.1);


box-shadow:

0 20px 45px rgba(54,98,204,.45);


}





/* ==========================
   CARD TEXT
========================== */


.iac-ent-overview-card-title,
.iac-ent-cap-title,
.iac-ent-value-title{


position:relative;

z-index:2;


font-size:22px;

font-weight:750;


color:#010535;


margin-bottom:15px;


}



.iac-ent-overview-card-text,
.iac-ent-value-desc{


position:relative;

z-index:2;


font-size:15px;

line-height:1.8;

color:#667085;


}





/* ==========================
   CAPABILITY LIST
========================== */


.iac-ent-cap-list{

padding:0;

margin:20px 0 0;

list-style:none;

position:relative;

z-index:2;

}



.iac-ent-cap-list li{


position:relative;


padding-left:30px;


margin-bottom:13px;


font-size:15px;


color:#667085;


line-height:1.7;


}



.iac-ent-cap-list li::before{


content:"✓";


position:absolute;


left:0;


top:0;


font-weight:800;


color:#3662cc;


}





/* ==========================================================
 BENEFIT CARDS
========================================================== */


.iac-ent-benefit-card{


position:relative;


display:flex;


gap:18px;


padding:24px;


background:#fff;


border-radius:22px;


border:

1px solid rgba(1,5,53,.08);


margin-bottom:20px;


overflow:hidden;


transition:

all .5s cubic-bezier(.2,.8,.2,1);


}



.iac-ent-benefit-card::before{


content:"";


position:absolute;


left:0;


top:0;


height:100%;


width:5px;


background:#3662cc;


transform:scaleY(0);


transform-origin:top;


transition:.5s;


}



.iac-ent-benefit-card:hover::before{


transform:scaleY(1);


}



.iac-ent-benefit-card:hover{


transform:

translateX(12px);


box-shadow:

0 25px 60px rgba(1,5,53,.12);


}




.iac-ent-benefit-icon{


width:52px;


height:52px;


flex-shrink:0;


border-radius:16px;


background:

rgba(54,98,204,.12);


color:#3662cc;


display:flex;


align-items:center;


justify-content:center;


font-size:22px;


transition:.5s;


}



.iac-ent-benefit-card:hover 
.iac-ent-benefit-icon{


background:#3662cc;


color:#fff;


transform:

rotate(360deg);


}



.iac-ent-benefit-content h5{


font-size:19px;

font-weight:750;

color:#010535;

margin-bottom:8px;


}



.iac-ent-benefit-content p{


font-size:15px;

line-height:1.7;

color:#667085;

margin:0;


}





/* ==========================================================
 GLASS AI CARDS
========================================================== */


.iac-ent-glass-card{


position:relative;


height:100%;


padding:40px;


border-radius:30px;


background:

linear-gradient(
145deg,
rgba(255,255,255,.15),
rgba(255,255,255,.04)
);


border:

1px solid rgba(255,255,255,.15);


backdrop-filter:blur(25px);


overflow:hidden;


transition:

all .6s cubic-bezier(.2,.8,.2,1);


}



.iac-ent-glass-card:hover{


transform:

translateY(-18px);


box-shadow:

0 40px 90px rgba(0,0,0,.4);


border-color:

rgba(120,166,255,.8);


}



.iac-ent-glass-icon{


width:70px;

height:70px;


border-radius:22px;


background:

rgba(255,255,255,.12);


color:white;


display:flex;


align-items:center;


justify-content:center;


font-size:28px;


margin-bottom:25px;


transition:.6s;


}



.iac-ent-glass-card:hover 
.iac-ent-glass-icon{


background:#3662cc;


transform:

rotateY(360deg);


}




.iac-ent-glass-title{


font-size:22px;

font-weight:750;

color:#fff;

margin-bottom:15px;


}



.iac-ent-glass-desc{


font-size:15px;

line-height:1.8;

color:

rgba(255,255,255,.75);


}




/* ==========================================================
 SCROLL REVEAL SUPPORT
========================================================== */


.wow{


visibility:hidden;

}



.animated{


visibility:visible;

}




/* ==========================================================
 IMAGE PREMIUM MOTION
========================================================== */


.iac-ent-section img{

padding-bottom: 30px;
transition:

transform .8s cubic-bezier(.2,.8,.2,1);


}



.iac-ent-section img:hover{


transform:

scale(1.05)
translateY(-8px);


}/* ==========================================================
   MATRIX SECTION
========================================================== */

.iac-ent-matrix-wrapper{
    background:#fff;
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 30px 80px rgba(1,5,53,.10);
    border:1px solid rgba(54,98,204,.08);
}

.iac-ent-matrix-item{
    display:grid;
    grid-template-columns:1fr 1.4fr .8fr;
    gap:30px;
    align-items:center;
    padding:32px;
    border-bottom:1px solid rgba(1,5,53,.08);
    transition:.45s cubic-bezier(.2,.8,.2,1);
    position:relative;
}

.iac-ent-matrix-item:last-child{
    border-bottom:none;
}

.iac-ent-matrix-item::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:5px;
    height:100%;
    background:#3662cc;
    transform:scaleY(0);
    transition:.45s;
}

.iac-ent-matrix-item:hover::before{
    transform:scaleY(1);
}

.iac-ent-matrix-item:hover{
    background:#f7f9ff;
    transform:translateX(10px);
}

.iac-ent-matrix-feature{
    font-size:18px;
    font-weight:700;
    color:#010535;
}

.iac-ent-matrix-desc{
    font-size:15px;
    color:#667085;
    line-height:1.8;
}

.iac-ent-impact-badge{
    display:inline-block;
    padding:10px 18px;
    border-radius:50px;
    background:rgba(54,98,204,.12);
    color:#3662cc;
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

/* Large Desktop */

@media(max-width:1400px){

.iac-ent-title{
    font-size:40px;
}

.iac-ent-hero-title{
    font-size:50px;
}

}

/* Laptop */

@media(max-width:1200px){

.iac-ent-py-100{
    padding:95px 0;
}

.iac-ent-title{
    font-size:36px;
}

.iac-ent-hero-title{
    font-size:44px;
}

.iac-ent-overview-card,
.iac-ent-cap-card,
.iac-ent-value-card,
.iac-ent-glass-card{
    padding:32px;
}

}

/* Tablet */

@media(max-width:991px){

.iac-ent-hero-section{
    
    padding:90px 0 70px;
}

.iac-ent-py-100{
    padding:75px 0;
}

.iac-ent-title{
    font-size:32px;
}

.iac-ent-hero-title{
    font-size:38px;
}

.iac-ent-hero-media{
    margin-top:45px;
}

.iac-ent-matrix-item{
    grid-template-columns:1fr;
    gap:18px;
}

.iac-ent-impact-badge{
    white-space:normal;
}

}

/* Mobile */

@media(max-width:767px){

.iac-ent-section{
    overflow:hidden;
}

.iac-ent-py-100{
    padding:60px 0;
}

.iac-ent-hero-section{
    
    padding:75px 0 60px;
}

.iac-ent-hero-title{
    font-size:30px;
    line-height:1.25;
}

.iac-ent-title{
    font-size:28px;
}

.iac-ent-subtitle,
.iac-ent-hero-desc{
    font-size:15px;
    line-height:1.8;
}

.iac-ent-hero-actions{
    flex-direction:column;
}

.iac-ent-hero-actions a{
    width:100%;
    justify-content:center;
}

.iac-ent-overview-card,
.iac-ent-cap-card,
.iac-ent-value-card,
.iac-ent-glass-card{
    padding:26px;
}

.iac-ent-benefit-card{
    flex-direction:column;
}

.iac-ent-benefit-icon{
    margin-bottom:5px;
}

.iac-ent-hero-badge-float{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    margin:20px;
}

.iac-ent-matrix-item{
    padding:24px;
}

}

/* Small Mobile */

@media(max-width:575px){

.iac-ent-title{
    font-size:24px;padding-top: 20px;
}

.iac-ent-hero-title{
    font-size:26px;padding-top: 20px;
}

.iac-ent-badge{
    font-size:9px;
    padding:8px 14px;
}

.iac-ent-overview-icon,
.iac-ent-cap-icon,
.iac-ent-value-icon,
.iac-ent-glass-icon{
    width:58px;
    height:58px;
    font-size:22px;
}

}

/* Extra Small */

@media(max-width:360px){

.iac-ent-title{
    font-size:22px;
}

.iac-ent-hero-title{
    font-size:22px;padding-top: 15px;
}

.iac-ent-overview-card,
.iac-ent-cap-card,
.iac-ent-value-card,
.iac-ent-glass-card{
    padding:22px;
}

.iac-ent-matrix-item{
    padding:18px;
}

}

/* ==========================================================
   TOUCH DEVICES
========================================================== */

@media (hover:none){

.iac-ent-overview-card:hover,
.iac-ent-cap-card:hover,
.iac-ent-value-card:hover,
.iac-ent-glass-card:hover,
.iac-ent-benefit-card:hover,
.iac-ent-matrix-item:hover{
    transform:none;
}

}

/* ==========================================================
   REDUCED MOTION
========================================================== */

@media(prefers-reduced-motion:reduce){

*,
*::before,
*::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
}

}/* ==========================================================
   iAcademy ENTERPRISE 2026 PREMIUM UI SYSTEM
   PART 2/2
   FINAL ANIMATION + CTA + POLISH
========================================================== */


/* ==========================================================
   PREMIUM BUTTON SYSTEM
========================================================== */

/* 
.btn-default{

position:relative;

overflow:hidden;

border-radius:50px !important;

transition:
all .45s cubic-bezier(.2,.8,.2,1);

z-index:1;

}



.btn-default::before{

content:"";

position:absolute;

width:0;

height:0;

border-radius:50%;

background:

rgba(255,255,255,.25);

top:50%;

left:50%;

transform:
translate(-50%,-50%);

transition:.6s;

z-index:-1;

}



.btn-default:hover::before{

width:300px;

height:300px;

}



.btn-default:hover{

transform:
translateY(-6px);

box-shadow:

0 20px 50px rgba(54,98,204,.35);

}



/* highlighted button */

.btn-highlighted{

background:

linear-gradient(
135deg,
#3662cc,
#78a6ff
) !important;

box-shadow:

0 15px 40px rgba(54,98,204,.45);

}
 */


/* ==========================================================
   CARD SHINE EFFECT
========================================================== */


.iac-ent-overview-card::after,
.iac-ent-cap-card::after,
.iac-ent-value-card::after,
.iac-ent-glass-card::after{


content:"";

position:absolute;

top:-120%;

left:-80%;

width:60%;

height:300%;


background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.35),
transparent
);


transform:
rotate(25deg);


transition:.9s;


}



.iac-ent-overview-card:hover::after,
.iac-ent-cap-card:hover::after,
.iac-ent-value-card:hover::after,
.iac-ent-glass-card:hover::after{

left:140%;

}



/* ==========================================================
   IMAGE PREMIUM GLOW
========================================================== */


.iac-ent-section img{

border-radius:25px;

}



.iac-ent-hero-media::before{

content:"";

position:absolute;

inset:-2px;

border-radius:32px;

background:

linear-gradient(
45deg,
#3662cc,
transparent,
#78a6ff
);


z-index:-1;

opacity:.7;


animation:

iacImageGlow 6s infinite linear;


}



@keyframes iacImageGlow{

0%{
filter:hue-rotate(0deg);
}

100%{
filter:hue-rotate(360deg);
}

}



/* ==========================================================
   CTA PREMIUM SECTION
========================================================== */


.iac-cta-section{


background:#fff;

padding:120px 0;

overflow:hidden;

position:relative;


}



.iac-cta-section::before{


content:"";

position:absolute;

width:450px;

height:450px;

border-radius:50%;


background:

radial-gradient(
circle,
rgba(54,98,204,.18),
transparent 70%
);


left:-150px;

bottom:-150px;


animation:

ctaBlobMove 10s infinite ease-in-out;


}



@keyframes ctaBlobMove{

50%{

transform:
translate(80px,-50px)
scale(1.2);

}

}





.iac-cta-box{


position:relative;


padding:90px 50px;


border-radius:35px;


overflow:hidden;


background:


linear-gradient(
135deg,
#010535,
#071b68
);


box-shadow:


0 40px 100px rgba(1,5,53,.22);


animation:


ctaFloating 7s infinite ease-in-out;


}



@keyframes ctaFloating{

50%{

transform:
translateY(-12px);

}

}




.iac-cta-box::before{


content:"";

position:absolute;

width:500px;

height:500px;

border-radius:50%;


background:

radial-gradient(
circle,
rgba(120,166,255,.45),
transparent
);


right:-200px;

top:-200px;


animation:

ctaGlow 8s infinite ease-in-out;


}



@keyframes ctaGlow{


50%{

transform:
scale(1.35);

opacity:.7;

}


}




.iac-cta-content{


position:relative;

z-index:2;

text-align:center;

}



.iac-cta-content h2{


font-size:46px;

font-weight:850;

color:#fff;

line-height:1.2;


}



.iac-cta-content p{


max-width:760px;

margin:20px auto 35px;


font-size:17px;

line-height:1.8;


color:

rgba(255,255,255,.75);


}




.iac-cta-btn{


display:inline-flex;


align-items:center;


gap:12px;


padding:16px 40px;


border-radius:50px;


background:

linear-gradient(
135deg,
#3662cc,
#78a6ff
);


color:#fff;


font-weight:700;


text-decoration:none;


transition:.5s;


box-shadow:


0 20px 50px rgba(54,98,204,.45);


}



.iac-cta-btn:hover{


transform:

translateY(-8px)
scale(1.04);


color:#fff;


box-shadow:


0 30px 70px rgba(54,98,204,.65);


}



.iac-cta-btn i{

transition:.4s;

}


.iac-cta-btn:hover i{

transform:
translateX(8px);

}





/* ==========================================================
   WOW / SCROLL ANIMATION SUPPORT
========================================================== */


.wow{

animation-duration:1s;

}



.fadeInUp{

animation-name:

premiumFadeUp;

}



@keyframes premiumFadeUp{

from{

opacity:0;

transform:
translateY(40px);

}


to{

opacity:1;

transform:
translateY(0);

}

}




/* ==========================================================
   FINAL MOBILE CTA RESPONSIVE
========================================================== */


@media(max-width:991px){


.iac-cta-section{

padding:80px 0;

}


.iac-cta-box{

padding:60px 35px;

}


.iac-cta-content h2{

font-size:36px;

}


}



@media(max-width:767px){


.iac-cta-section{

padding:60px 0;

}


.iac-cta-box{

padding:45px 22px;

border-radius:25px;

}


.iac-cta-content h2{

font-size:28px;

}


.iac-cta-content p{

font-size:15px;

}


.iac-cta-btn{

width:100%;

justify-content:center;

}


}



@media(max-width:480px){


.iac-cta-content h2{

font-size:24px;

}


.iac-cta-box{

padding:35px 18px;

}

}


/* ==========================================================
   PERFORMANCE OPTIMIZATION
========================================================== */


.iac-ent-overview-card,
.iac-ent-cap-card,
.iac-ent-value-card,
.iac-ent-glass-card,
.iac-ent-benefit-card,
.iac-cta-box{


will-change:transform;

}
/* =========================================
   PREMIUM CYBER CTA SECTION
   2026 ANIMATION SYSTEM
========================================= */


.cyber-cta-section{

background:#ffffff;

padding:110px 0;

position:relative;

overflow:hidden;

}



/* wrapper */


.cyber-cta-wrapper{

position:relative;

overflow:hidden;

border-radius:35px;

padding:90px 60px;

background:

linear-gradient(
135deg,
#010535,
#07165d
);


box-shadow:

0 40px 100px rgba(1,5,53,.18);


isolation:isolate;

animation:

cyberCtaFloat 7s ease-in-out infinite;

}




@keyframes cyberCtaFloat{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-12px);

}

}




/* animated glow */


.cyber-cta-glow{


position:absolute;

width:550px;

height:550px;

border-radius:50%;


background:

radial-gradient(
circle,
rgba(54,98,204,.55),
transparent 70%
);


right:-250px;

top:-250px;


filter:blur(20px);


animation:

cyberGlowMove 8s ease-in-out infinite;


z-index:-1;

}



@keyframes cyberGlowMove{


0%,100%{

transform:scale(1);

opacity:.7;

}


50%{

transform:scale(1.35);

opacity:1;

}


}



/* grid effect */


.cyber-cta-grid{


position:absolute;

inset:0;


background-image:

linear-gradient(
rgba(255,255,255,.05) 1px,
transparent 1px
),

linear-gradient(
90deg,
rgba(255,255,255,.05) 1px,
transparent 1px
);


background-size:

45px 45px;


opacity:.15;


animation:

gridMove 15s linear infinite;


}



@keyframes gridMove{


from{

transform:translate(0,0);

}


to{

transform:translate(45px,45px);

}

}



/* content */


.cyber-cta-content{

position:relative;

z-index:5;

text-align:center;

max-width:850px;

margin:auto;

}



/* badge */


.cyber-cta-badge{


display:inline-flex;

align-items:center;

gap:10px;


padding:10px 25px;


border-radius:50px;


color:#fff;


background:

rgba(255,255,255,.12);


border:

1px solid rgba(255,255,255,.25);


font-size:13px;

font-weight:700;


letter-spacing:.7px;


text-transform:uppercase;


backdrop-filter:blur(15px);


margin-bottom:25px;


transition:.5s ease;


}



.cyber-cta-badge:hover{


transform:

translateY(-6px)
scale(1.05);


background:

rgba(255,255,255,.2);


}




/* heading */


.cyber-cta-content h2{


font-size:46px;


line-height:1.15;


font-weight:800;


color:#ffffff;


margin-bottom:22px;


letter-spacing:-1px;


}




/* paragraph */


.cyber-cta-content p{


font-size:17px;


line-height:1.8;


color:

rgba(255,255,255,.78);


max-width:750px;


margin:

0 auto 35px;


}




/* button */


.cyber-cta-button{


display:inline-flex;


align-items:center;


justify-content:center;


gap:14px;


padding:17px 40px;


border-radius:50px;


background:

linear-gradient(
135deg,
#3662cc,
#78a6ff
);


color:#fff;


font-size:16px;


font-weight:700;


text-decoration:none;


box-shadow:


0 20px 45px rgba(54,98,204,.45);


transition:

all .45s cubic-bezier(.2,.8,.2,1);


}



.cyber-cta-button:hover{


transform:

translateY(-8px)
scale(1.05);


box-shadow:

0 35px 70px rgba(54,98,204,.65);


color:#fff;


}



.cyber-cta-button i{


transition:.4s ease;


}



.cyber-cta-button:hover i{


transform:

translateX(8px);


}




/* floating circles */


.cyber-floating-circle{


position:absolute;

border-radius:50%;


border:

1px solid rgba(255,255,255,.15);


animation:

circleFloat 8s ease-in-out infinite;


}



.circle-one{


width:180px;

height:180px;

left:-60px;

bottom:-60px;


}



.circle-two{


width:90px;

height:90px;

right:120px;

bottom:40px;


animation-delay:2s;

}



@keyframes circleFloat{


0%,100%{

transform:

translateY(0)
rotate(0deg);

}


50%{

transform:

translateY(-25px)
rotate(180deg);

}

}





/* =========================================
RESPONSIVE
========================================= */


@media(max-width:1200px){


.cyber-cta-wrapper{

padding:80px 45px;

}


.cyber-cta-content h2{

font-size:40px;

}


}



@media(max-width:991px){


.cyber-cta-section{

padding:80px 0;

}



.cyber-cta-wrapper{

border-radius:28px;

padding:70px 35px;

}



.cyber-cta-content h2{

font-size:34px;

}


.cyber-cta-content p{

font-size:16px;

}



}



@media(max-width:767px){


.cyber-cta-section{

padding:60px 0;

}



.cyber-cta-wrapper{

padding:55px 22px;

border-radius:22px;

}



.cyber-cta-content h2{

font-size:28px;

line-height:1.25;

}



.cyber-cta-content p{

font-size:15px;

line-height:1.7;

}



.cyber-cta-badge{

font-size:11px;

padding:8px 16px;

}



.cyber-cta-button{

width:100%;

padding:15px 20px;

}



.cyber-cta-glow{

width:300px;

height:300px;

}



}



@media(max-width:480px){


.cyber-cta-wrapper{

padding:45px 18px;

}



.cyber-cta-content h2{

font-size:24px;

}



.cyber-cta-content p{

font-size:14px;

}



.circle-two{

display:none;

}


}



/* reduce motion */


@media(prefers-reduced-motion:reduce){


.cyber-cta-wrapper,
.cyber-cta-glow,
.cyber-cta-grid,
.cyber-floating-circle{

animation:none!important;

}


}





/*=========================
iAcademy end page
=========================*/
/* ==========================================
WHY INTRINSIC PREMIUM DESIGN
========================================== */


.ins-why-section{

position:relative;

padding:170px 0;

overflow:hidden;

background:

linear-gradient(
135deg,
#02063b,
#071d68
);

color:white;

}



.ins-bg-circle{

position:absolute;

width:600px;
height:600px;

right:-200px;
top:-200px;

border-radius:50%;


background:

radial-gradient(
circle,
rgba(80,140,255,.45),
transparent 70%
);


animation:
insFloat 8s infinite ease-in-out;

}



@keyframes insFloat{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(40px);

}


}



.ins-tag{


display:inline-flex;

align-items:center;

gap:10px;


padding:10px 22px;


border-radius:50px;


background:
rgba(255,255,255,.12);


border:
1px solid rgba(255,255,255,.25);


font-size:13px;

font-weight:700;

text-transform:uppercase;

letter-spacing:.7px;


backdrop-filter:blur(15px);


margin-bottom:25px;


}



.ins-main-title{


font-size:48px;

line-height:1.15;

font-weight:800;

margin-bottom:25px;


color:white;


}



.ins-text{


font-size:17px;

line-height:1.8;

color:

rgba(255,255,255,.78);


margin-bottom:18px;


}



.ins-location{


margin-top:30px;


padding:18px 25px;


border-radius:18px;


background:

rgba(255,255,255,.08);


border:

1px solid rgba(255,255,255,.18);


display:flex;

gap:12px;

align-items:center;


font-size:16px;


}





/* RIGHT SERVICE CARDS */


.ins-service-wrapper{


display:flex;

flex-direction:column;

gap:20px;


}



.ins-service-card{


display:flex;

gap:20px;

align-items:center;


padding:25px;


border-radius:25px;


background:

rgba(255,255,255,.10);


border:

1px solid rgba(255,255,255,.18);


backdrop-filter:blur(20px);


transition:

all .5s cubic-bezier(.2,.8,.2,1);


position:relative;

overflow:hidden;


}



.ins-service-card::before{


content:"";

position:absolute;

inset:0;


background:

linear-gradient(
120deg,
rgba(120,170,255,.35),
transparent
);


opacity:0;

transition:.5s;


}



.ins-service-card:hover::before{

opacity:1;

}



.ins-service-card:hover{


transform:

translateX(-15px)
translateY(-5px);


box-shadow:

0 25px 60px rgba(0,0,0,.35);


}



.ins-icon{


width:60px;

height:60px;

flex-shrink:0;


border-radius:20px;


display:flex;

align-items:center;

justify-content:center;


font-size:25px;


background:

linear-gradient(
135deg,
#4385ff,
#7db4ff
);


color:white;


transition:.5s;


}


.ins-service-card:hover .ins-icon{


transform:

rotateY(360deg)
scale(1.1);


}



.ins-service-card h4{


font-size:22px;

font-weight:700;

margin-bottom:8px;

color:white;


}



.ins-service-card p{


margin:0;

font-size:15px;

line-height:1.6;

color:

rgba(255,255,255,.75);


}



/* ===============================
RESPONSIVE
================================ */


@media(max-width:1200px){

.ins-why-section{

padding:140px 0;

}
.ins-main-title{

font-size:40px;

}


}



@media(max-width:991px){


.ins-why-section{

padding:120px 0;

}


.ins-main-title{

font-size:36px;

}


.ins-service-wrapper{

margin-top:30px;

}


}



@media(max-width:767px){


.ins-why-section{

padding:120px 0;

}



.ins-main-title{

font-size:30px;

}


.ins-text{

font-size:15px;

}



.ins-location{

flex-direction:column;

align-items:flex-start;

font-size:14px;

}



.ins-service-card{


padding:20px;

}



.ins-service-card:hover{


transform:

translateY(-8px);


}


.ins-icon{


width:52px;

height:52px;

font-size:20px;


}


.ins-service-card h4{


font-size:18px;

}


}



@media(max-width:480px){


.ins-main-title{

font-size:26px;

}


.ins-tag{

font-size:11px;

padding:8px 15px;

}


}/* ==========================================
   INTRINSIC FEATURE SECTION
   PREMIUM 2026 DESIGN
========================================== */


.ins-feature-zone{

position:relative;

padding:120px 0;

background:
linear-gradient(
180deg,
#ffffff,
#f4f7ff
);

overflow:hidden;

}



/* background texture */


.ins-feature-zone::before{

content:"";

position:absolute;

width:600px;
height:600px;

right:-200px;
top:-200px;

border-radius:50%;


background:

radial-gradient(
circle,
rgba(54,98,204,.25),
transparent 70%
);


filter:blur(20px);

animation:
insFloatGlow 10s infinite ease-in-out;

}



.ins-feature-bg-shape{

position:absolute;

width:350px;
height:350px;

bottom:-150px;
left:-100px;

background:

radial-gradient(
circle,
rgba(1,5,53,.15),
transparent 70%
);

filter:blur(30px);

}




@keyframes insFloatGlow{


0%,100%{

transform:
translate(0,0);

}


50%{

transform:
translate(-40px,50px);

}


}





/* heading */


.ins-feature-heading{

position:relative;

margin-bottom:60px;

}



.ins-feature-tag{


display:inline-flex;

align-items:center;

gap:10px;

padding:10px 25px;

border-radius:50px;


background:

rgba(54,98,204,.1);


border:

1px solid rgba(54,98,204,.2);


color:#3662cc;


font-size:13px;

font-weight:700;

letter-spacing:.5px;

margin-bottom:20px;


}



.ins-feature-heading h2{


font-size:44px;

font-weight:800;

color:#010535;

margin-bottom:15px;


}



.ins-feature-heading p{


max-width:700px;

margin:auto;

font-size:17px;

line-height:1.8;

color:#667085;


}




/* CARD */


.ins-feature-card{


position:relative;

height:100%;


padding:38px 32px;


background:

rgba(255,255,255,.8);


border-radius:28px;


border:

1px solid rgba(1,5,53,.08);


overflow:hidden;


transition:

all .55s cubic-bezier(.2,.8,.2,1);


backdrop-filter:blur(15px);


}




.ins-feature-card::before{


content:"";


position:absolute;


inset:0;


background:

linear-gradient(
135deg,
rgba(54,98,204,.15),
transparent
);


opacity:0;


transition:.5s;


}



.ins-feature-card:hover::before{

opacity:1;

}




.ins-feature-card:hover{


transform:

translateY(-15px);


box-shadow:

0 35px 80px rgba(1,5,53,.15);


border-color:#3662cc;


}





/* number */


.ins-feature-number{


position:absolute;


right:25px;

top:20px;


font-size:70px;

font-weight:900;


color:

rgba(54,98,204,.08);


}





/* icon */


.ins-feature-icon{


width:70px;

height:70px;


border-radius:22px;


display:flex;

align-items:center;

justify-content:center;


background:

rgba(54,98,204,.12);


margin-bottom:25px;


transition:.6s;


}




.ins-feature-icon img{

width:38px;

height:38px;

}



.ins-feature-icon i{

font-size:30px;

color:#3662cc;

}




.ins-feature-card:hover 
.ins-feature-icon{


background:#3662cc;


transform:

rotateY(360deg)
scale(1.1);


box-shadow:

0 15px 35px rgba(54,98,204,.4);


}



.ins-feature-card:hover 
.ins-feature-icon i{

color:white;

}




.ins-feature-card h4{


position:relative;


font-size:22px;

font-weight:750;

color:#010535;


margin-bottom:15px;


}



.ins-feature-card p{


position:relative;


font-size:15px;

line-height:1.8;


color:#667085;


}



/* ==========================================
 RESPONSIVE
========================================== */


@media(max-width:1200px){


.ins-feature-zone{

padding:100px 0;

}


.ins-feature-heading h2{

font-size:38px;

}


}





@media(max-width:991px){


.ins-feature-card{

padding:32px 25px;

}


.ins-feature-heading h2{

font-size:34px;

}


}





@media(max-width:767px){


.ins-feature-zone{

padding:75px 0;

}


.ins-feature-heading{

margin-bottom:40px;

}


.ins-feature-heading h2{

font-size:28px;

}


.ins-feature-heading p{

font-size:15px;

}


.ins-feature-card{


padding:28px 22px;


border-radius:22px;


}


.ins-feature-card:hover{


transform:

translateY(-8px);


}



.ins-feature-number{

font-size:55px;

}


}





@media(max-width:480px){


.ins-feature-tag{

font-size:11px;

padding:8px 16px;

}


.ins-feature-heading h2{

font-size:25px;

}


.ins-feature-card h4{

font-size:19px;

}


.ins-feature-icon{

width:60px;

height:60px;

}


}/* ================================================
   VENDOR PARTNERS SECTION
   BLUE + WHITE TEXTURE DESIGN
================================================ */
/* =====================================================
   TECHNOLOGY PARTNERS
   PREMIUM CYBER SECURITY VENDOR SECTION
===================================================== */


/* ===============================
   SECTION BACKGROUND
================================ */
.ins-feature-card:hover .ins-feature-icon {
    color: #fff;
}

.ins-feature-card:hover .ins-feature-icon svg {
    color: #fff;
}

.ins-vendor-zone{

    position:relative;

    padding:120px 0;

    overflow:hidden;


    background:

    radial-gradient(
        circle at 10% 20%,
        rgba(54,98,204,.22),
        transparent 35%
    ),

    radial-gradient(
        circle at 90% 80%,
        rgba(1,5,53,.18),
        transparent 35%
    ),

    linear-gradient(
        135deg,
        #ffffff,
        #eef4ff
    );

}




/* premium grid texture */


.ins-vendor-zone::after{


    content:"";

    position:absolute;

    inset:0;


    background-image:


    linear-gradient(
        rgba(54,98,204,.05) 1px,
        transparent 1px
    ),


    linear-gradient(
        90deg,
        rgba(54,98,204,.05) 1px,
        transparent 1px
    );


    background-size:55px 55px;


    opacity:.5;


}





/* background glow */


.ins-vendor-zone::before{


    content:"";


    position:absolute;


    width:650px;


    height:650px;



    right:-250px;


    top:-250px;



    border-radius:50%;



    background:


    radial-gradient(

        circle,

        rgba(54,98,204,.30),

        transparent 70%

    );



    filter:blur(35px);



    animation:

    vendorGlow 14s ease-in-out infinite alternate;


}




@keyframes vendorGlow{


from{

transform:translate(0,0);

}


to{

transform:translate(-50px,40px);

}


}





.ins-vendor-zone .container{


    position:relative;

    z-index:2;

}









/* ===============================
 HEADER
================================ */


.ins-vendor-header{


    margin-bottom:60px;

}



.ins-vendor-badge{


    display:inline-flex;


    align-items:center;


    gap:10px;


    padding:10px 25px;



    border-radius:50px;



    background:


    rgba(54,98,204,.10);



    border:


    1px solid rgba(54,98,204,.25);



    color:#010535;



    font-size:12px;


    font-weight:700;


}





.ins-vendor-header h2{


    color:#010535;


    font-size:46px;


    font-weight:800;


    margin-top:25px;


}





.ins-vendor-header p{


    max-width:750px;


    margin:auto;


    color:#667085;


}









/* ===============================
 CARD
================================ */


.ins-vendor-card{


    position:relative;


    height:100%;


    padding:30px 25px;



    border-radius:28px;



    overflow:hidden;



    background:


    linear-gradient(

        145deg,

        #092476,

        #010535

    );



    border:


    1px solid rgba(255,255,255,.20);



    box-shadow:


    0 20px 60px rgba(1,5,53,.25);



    transition:

    .5s cubic-bezier(.2,.8,.2,1);


}







/* glow corner */


.ins-vendor-card::before{


    content:"";


    position:absolute;


    width:220px;


    height:220px;


    right:-110px;


    top:-110px;



    border-radius:50%;



    background:


    radial-gradient(

        circle,

        rgba(110,168,255,.45),

        transparent 70%

    );



    opacity:0;


    transition:.6s;


}



.ins-vendor-card:hover::before{


    opacity:1;


    transform:scale(1.2);


}









/* shine effect */


.ins-vendor-card::after{


    content:"";


    position:absolute;


    width:80px;


    height:160%;



    top:-30%;


    left:-120px;



    background:


    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.25),

        transparent

    );



    transform:rotate(25deg);



    transition:.9s;


}




.ins-vendor-card:hover::after{


    left:140%;


}








/* hover */


.ins-vendor-card:hover{


    transform:


    translateY(-12px);



    box-shadow:


    0 35px 85px rgba(1,5,53,.45);


}










/* ===============================
 LOGO
================================ */


.ins-vendor-logo{


    height:150px;


    display:flex;


    align-items:center;


    justify-content:center;



    position:relative;



    overflow:hidden;


}







/* logo glow */


.ins-vendor-logo::before{


    content:"";


    position:absolute;


    width:220px;


    height:220px;



    border-radius:50%;



    background:


    radial-gradient(

        circle,

        rgba(110,168,255,.45),

        transparent 70%

    );



    animation:


    logoGlow 5s ease-in-out infinite;


}





@keyframes logoGlow{


0%,100%{

opacity:.35;

transform:scale(.9);

}


50%{

opacity:.8;

transform:scale(1.15);

}


}







/* LOGO SIZE */


.ins-vendor-logo img{


    position:relative;


    z-index:2;



    width:290px !important;


    height:135px !important;



    max-width:none !important;


    max-height:none !important;



    object-fit:contain;



    transition:

    transform .5s ease,

    filter .5s ease;


}




.ins-vendor-card:hover 
.ins-vendor-logo img{


    transform:


    scale(1.12);



    filter:


    drop-shadow(

    0 18px 35px rgba(110,168,255,.55)

    );


}









/* TITLE */


.ins-vendor-card h5{


    position:relative;


    z-index:2;



    margin-top:20px;



    color:#fff !important;



    font-size:18px;


    font-weight:700;


}









/* ===============================
 TABLET
================================ */


@media(max-width:991px){


.ins-vendor-zone{


padding:90px 0;


}



.ins-vendor-header h2{


font-size:36px;


}



.ins-vendor-logo{


height:140px;


}



.ins-vendor-logo img{


width:260px !important;


height:120px !important;


}


}










/* ===============================
 MOBILE
================================ */


@media(max-width:767px){


.ins-vendor-zone{


padding:70px 0;


}




.ins-vendor-card{


padding:25px 18px;


border-radius:22px;


}



.ins-vendor-card:hover{


transform:


translateY(-8px);


}




.ins-vendor-logo{


height:140px;


}




.ins-vendor-logo img{


width:260px !important;


height:120px !important;



transform:scale(1.12);


}



.ins-vendor-card:hover 
.ins-vendor-logo img{


transform:scale(1.22);


}



.ins-vendor-header h2{


font-size:28px;


}



.ins-vendor-header p{


font-size:15px;


}


}









/* ===============================
 SMALL MOBILE
================================ */


@media(max-width:480px){


.ins-vendor-logo{


height:130px;


}



.ins-vendor-logo img{


width:240px !important;


height:110px !important;


transform:scale(1.15);


}




.ins-vendor-card h5{


font-size:16px;


}


}/* =====================================================
   CERTIFICATION SECTION
   PREMIUM DARK GLASS DESIGN
===================================================== */


.ins-cert-zone{


position:relative;

padding:120px 0;


overflow:hidden;


background:


linear-gradient(
135deg,
#010535,
#061b68
);


}




/* background effects */


.ins-cert-zone::before{


content:"";


position:absolute;


width:600px;

height:600px;


left:-250px;

bottom:-200px;


border-radius:50%;


background:


radial-gradient(
circle,
rgba(54,98,204,.45),
transparent 70%
);



filter:blur(25px);


animation:

certGlow 10s ease-in-out infinite;


}



.ins-cert-bg{


position:absolute;


inset:0;


background-image:


linear-gradient(
45deg,
rgba(255,255,255,.03) 25%,
transparent 25%
);


background-size:

70px 70px;


opacity:.4;


}




@keyframes certGlow{


0%,100%{

transform:
translate(0,0);

}



50%{

transform:
translate(70px,-50px);

}


}




/* heading */


.ins-cert-header{


position:relative;


z-index:2;


margin-bottom:60px;


}



.ins-cert-badge{


display:inline-flex;


align-items:center;


gap:10px;


padding:10px 25px;


border-radius:50px;


background:

rgba(255,255,255,.12);


border:

1px solid rgba(255,255,255,.25);



color:#fff;


font-size:12px;


font-weight:700;


text-transform:uppercase;


margin-bottom:22px;


backdrop-filter:

blur(15px);


}



.ins-cert-header h2{


font-size:44px;


font-weight:800;


color:#fff;


margin-bottom:15px;


}



.ins-cert-header p{


max-width:700px;


margin:auto;


font-size:17px;


line-height:1.8;


color:

rgba(255,255,255,.75);


}




/* cards */


.ins-cert-card{


height:180px;


display:flex;


align-items:center;


justify-content:center;


background:


rgba(255,255,255,.95);



border-radius:30px;


position:relative;


overflow:hidden;



border:

1px solid rgba(255,255,255,.4);



transition:

all .55s cubic-bezier(.2,.8,.2,1);


}





.ins-cert-card::before{


content:"";


position:absolute;


inset:0;


background:


linear-gradient(
135deg,
rgba(54,98,204,.25),
transparent
);


opacity:0;


transition:.5s;


}





.ins-cert-card:hover::before{


opacity:1;


}




.ins-cert-card:hover{


transform:


translateY(-15px)
scale(1.03);



box-shadow:


0 35px 90px rgba(0,0,0,.35);



}




/* logo */


.ins-cert-logo{


position:relative;


z-index:2;


padding:25px;


}



.ins-cert-logo img{


max-width:160px;


max-height:90px;


object-fit:contain;



filter:

grayscale(100%);



transition:

.5s;


}



.ins-cert-card:hover img{


filter:

grayscale(0);



transform:

scale(1.15);


}





/* =====================================================
 RESPONSIVE
===================================================== */


@media(max-width:1200px){


.ins-cert-zone{

padding:100px 0;

}



.ins-cert-header h2{

font-size:38px;

}



}





@media(max-width:991px){


.ins-cert-header h2{

font-size:34px;

}



.ins-cert-card{

height:160px;

}


}




@media(max-width:767px){


.ins-cert-zone{

padding:75px 0;

}



.ins-cert-header{

margin-bottom:40px;

}



.ins-cert-header h2{

font-size:28px;

}



.ins-cert-header p{

font-size:15px;

}



.ins-cert-card{

height:140px;

border-radius:22px;

}



.ins-cert-card:hover{

transform:

translateY(-8px);

}


.ins-cert-logo img{

max-width:120px;

}



}





@media(max-width:480px){


.ins-cert-badge{

font-size:11px;

padding:8px 15px;

}



.ins-cert-header h2{

font-size:25px;

}



.ins-cert-card{

height:120px;

}



}
/* =====================================================
   FINAL VENDOR + CERTIFICATION DESIGN
   WHITE TEXTURE BG + BLUE CARDS
===================================================== */


/* ===============================
   SECTION BACKGROUND
================================ */


.ins-vendor-zone,
.ins-cert-zone{

    position:relative;

    overflow:hidden;

    background:

    linear-gradient(
        180deg,
        #ffffff 0%,
        #f7f9ff 50%,
        #eef3ff 100%
    ) !important;

}



/* premium texture */

.ins-vendor-zone::after,
.ins-cert-zone::after{

    content:"";

    position:absolute;

    inset:0;


    background-image:

    radial-gradient(
        rgba(1,5,53,.10) 1px,
        transparent 1px
    );


    background-size:

    35px 35px;


    opacity:.45;


    pointer-events:none;

}



/* floating glow */

.ins-vendor-zone::before,
.ins-cert-zone::before{

    content:"";

    position:absolute;


    width:600px;

    height:600px;


    right:-250px;

    top:-250px;


    border-radius:50%;


    background:

    radial-gradient(
        circle,
        rgba(54,98,204,.20),
        transparent 70%
    );


    filter:blur(25px);


    animation:

    premiumGlow 10s infinite ease-in-out;

}



@keyframes premiumGlow{


    0%,100%{

        transform:translate(0,0);

    }


    50%{

        transform:translate(-50px,40px);

    }


}




.ins-vendor-zone .container,
.ins-cert-zone .container{

    position:relative;

    z-index:2;

}





/* ===============================
   HEADINGS
================================ */


.ins-vendor-header h2,
.ins-cert-header h2{

    color:#010535 !important;

}



.ins-vendor-header p,
.ins-cert-header p{

    color:#667085 !important;

}



.ins-vendor-badge,
.ins-cert-badge{

    background:

    rgba(54,98,204,.10);


    color:#010535 !important;


    border:

    1px solid rgba(54,98,204,.20);

}






/* ===============================
   BLUE CARDS
================================ */



.ins-vendor-card,
.ins-cert-card{


    background:

    linear-gradient(
        145deg,
        #071d68,
        #010535
    ) !important;



    border:

    1px solid rgba(255,255,255,.18);



    position:relative;

    overflow:hidden;


    box-shadow:


    0 20px 60px rgba(1,5,53,.25);


    transition:

    all .55s cubic-bezier(.2,.8,.2,1);


}




/* glass shine */

.ins-vendor-card::after,
.ins-cert-card::after{


    content:"";


    position:absolute;


    width:120%;

    height:120%;


    top:-140%;

    left:-20%;


    background:

    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.18),
        transparent
    );


    transform:rotate(25deg);


    transition:.8s;


}



.ins-vendor-card:hover::after,
.ins-cert-card:hover::after{

    top:120%;

}





/* hover */

.ins-vendor-card:hover,
.ins-cert-card:hover{


    transform:

    translateY(-15px)
    scale(1.03);


    box-shadow:


    0 35px 90px rgba(1,5,53,.45);


}







/* ===============================
   LOGOS
================================ */



/* ===============================
   BIGGER LOGOS ONLY
================================ */


.ins-vendor-logo img,
.ins-cert-logo img{


    max-width:220px;

    max-height:130px;


    width:auto;

    height:auto;


    object-fit:contain;


    filter:

    brightness(0)
    invert(1);


    opacity:.95;


    transition:.6s;


}
/* =====================================================
   CERTIFICATION RESPONSIVE FIX
   ONLY CARD WIDTH + LOGO SIZE
===================================================== */


/* Desktop - 4 cards in one row */
@media(min-width:1200px){

    .ins-cert-card{

        width:85%;

        margin:auto;

        height:170px;

    }


    .ins-cert-logo img{

        max-width:220px;

        max-height:130px;

    }

}



/* Laptop */
@media(max-width:1199px){


    .ins-cert-card{

        width:88%;

        height:160px;

    }


    .ins-cert-logo img{

        max-width:200px;

        max-height:120px;

    }

}




/* Tablet */
@media(max-width:991px){


    .ins-cert-card{

        width:92%;

        height:150px;

    }


    .ins-cert-logo img{

        max-width:180px;

        max-height:110px;

    }

}





/* Mobile */
@media(max-width:767px){


    .ins-cert-card{

        width:95%;

        height:130px;

        margin:auto;

    }


    .ins-cert-logo img{

        max-width:160px;

        max-height:95px;

    }

}





/* Small Mobile */
@media(max-width:480px){


    .ins-cert-card{

        width:100%;

        height:115px;

    }


    .ins-cert-logo img{

        max-width:135px;

        max-height:80px;

    }

}/* ===============================
   MOBILE ONLY CARD WIDTH REDUCE
================================ */


@media(max-width:767px){

    .ins-cert-card{

        width:82%;

        margin-left:auto;

        margin-right:auto;

    }

}



@media(max-width:480px){

    .ins-cert-card{

        width:88%;

    }

}


.ins-vendor-card:hover img,
.ins-cert-card:hover img{


    transform:

    scale(1.15)
    rotateY(360deg);


    opacity:1;


}






/* ===============================
   TITLES
================================ */


.ins-vendor-card h5{


    color:white !important;


    position:relative;

    z-index:3;


    font-weight:700;


}






/* ===============================
   CERTIFICATION CARD HEIGHT
================================ */


.ins-cert-card{

    height:180px;

}







/* ===============================
   TABLET
================================ */


@media(max-width:991px){


.ins-vendor-card:hover,
.ins-cert-card:hover{


    transform:

    translateY(-10px)
    scale(1.02);

}



.ins-cert-card{

    height:160px;

}


}






/* ===============================
   MOBILE
================================ */


@media(max-width:767px){


.ins-vendor-zone,
.ins-cert-zone{

    padding:75px 0;

}



.ins-vendor-card,
.ins-cert-card{

    border-radius:22px;

}



.ins-cert-card{

    height:140px;

}



.ins-vendor-logo img,
.ins-cert-logo img{

    max-width:110px;

}



.ins-vendor-card:hover,
.ins-cert-card:hover{


    transform:

    translateY(-8px);

}


}






@media(max-width:480px){


.ins-cert-card{

    height:120px;

}


.ins-vendor-card h5{

    font-size:16px;

}


}
/* =========================================================
   KEEP SECTION HEADINGS
   REMOVE ONLY VENDOR CARD TITLES
   ========================================================= */

/* Bring vendor section heading back */
.ins-vendor-header {
    display: block !important;
}

/* Bring certification section heading back */
.ins-cert-header {
    display: block !important;
}


/* Remove ONLY these card titles */
.ins-vendor-card h5 {
    display: none !important;
}


/* =========================================================
   KEEP THE CORRECT LOGO FIX
   ========================================================= */

.ins-vendor-logo img,
.ins-cert-logo img {
    filter: none !important;

    transform: none !important;
    -webkit-transform: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
}


/* Keep normal hover — NO FLIP */
.ins-vendor-card:hover .ins-vendor-logo img,
.ins-cert-card:hover .ins-cert-logo img {
    filter: none !important;

    transform: scale(1.08) !important;
    -webkit-transform: scale(1.08) !important;
}


/*==================================================
 contact us page start
==================================================*/
/* =====================================================
   SECURE CONTACT HERO SECTION
===================================================== */


.secure-contact-banner{

    position:relative;

    min-height:650px;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:#020617;

    isolation:isolate;

    padding-top:120px;

}



/* BACKGROUND IMAGE */

.secure-contact-overlay{

    position:absolute;

    inset:0;


    background:

    linear-gradient(
        135deg,
        rgba(2,6,23,.82) 0%,
        rgba(30,58,138,.68) 50%,
        rgba(2,6,23,.85) 100%
    ),

    url("../images/cyber_network_security.png");


    background-size:cover;

    background-position:center;


    animation:
    secureBannerZoom 18s ease-in-out infinite alternate;


    z-index:-3;

}



@keyframes secureBannerZoom{

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.12);
    }

}




/* ANIMATED GRID */

.secure-contact-grid{

    position:absolute;

    inset:0;


    background-image:


    linear-gradient(
        rgba(96,165,250,.08) 1px,
        transparent 1px
    ),


    linear-gradient(
        90deg,
        rgba(96,165,250,.08) 1px,
        transparent 1px
    );


    background-size:50px 50px;


    animation:
    secureGridMove 15s linear infinite;


    z-index:-2;

}



@keyframes secureGridMove{

    from{
        transform:translateY(0);
    }


    to{
        transform:translateY(50px);
    }

}





/* BLUE GLOW */

.secure-contact-banner::after{

    content:"";

    position:absolute;


    width:650px;

    height:650px;


    right:-250px;

    top:-200px;


    background:

    radial-gradient(
        circle,
        rgba(37,99,235,.35),
        transparent 70%
    );


    animation:
    secureGlowMove 8s ease-in-out infinite alternate;


    z-index:-1;

}



@keyframes secureGlowMove{

    from{
        transform:scale(1);
    }


    to{
        transform:scale(1.25);
    }

}




/* CONTAINER */

.secure-contact-banner .container{

    position:relative;

    z-index:5;

}




/* CONTENT */

.secure-contact-inner{

    max-width:900px;


    opacity:0;

    transform:translateY(50px);


    animation:

    secureContentAnimation 1s ease forwards;

}



@keyframes secureContentAnimation{

    to{

        opacity:1;

        transform:translateY(0);

    }

}





/* LABEL */

.secure-contact-label{

    display:inline-flex;

    align-items:center;


    padding:10px 24px;


    border-radius:50px;


    color:#93c5fd;


    background:

    rgba(37,99,235,.18);


    border:

    1px solid rgba(96,165,250,.45);


    font-size:14px;


    margin-bottom:28px;


    backdrop-filter:blur(10px);

}





/* HEADING */

.secure-contact-inner h1{


    color:#ffffff;


    font-size:68px;


    line-height:1.08;


    font-weight:700;


    max-width:900px;


    margin-bottom:25px;


}





/* DESCRIPTION */

.secure-contact-inner p{


    color:

    rgba(255,255,255,.78);


    font-size:18px;


    line-height:1.8;


    max-width:700px;


}





/* BREADCRUMB */

.secure-contact-path{


    display:flex;


    align-items:center;


    gap:14px;


    margin-top:35px;


}



.secure-contact-path a{


    color:#60a5fa;

    text-decoration:none;

}



.secure-contact-path span{

    color:rgba(255,255,255,.4);

}



.secure-contact-path strong{


    color:white;

}





/* SCAN LINE */

.secure-contact-scanner{

    display:none;

}



@keyframes secureScanAnimation{


    from{

        top:0;

    }


    to{

        top:100%;

    }

}





/* =====================================================
   LARGE DESKTOP
===================================================== */

@media(max-width:1399px){


.secure-contact-banner{

    min-height:600px;

}


.secure-contact-inner h1{

    font-size:60px;

}


}





/* =====================================================
   LAPTOP
===================================================== */

@media(max-width:1199px){


.secure-contact-banner{

    padding-top:130px;

}


.secure-contact-inner h1{

    font-size:52px;

}


}





/* =====================================================
   TABLET
===================================================== */

@media(max-width:991px){


.secure-contact-banner{


    min-height:520px;


    padding-top:140px;


    text-align:center;


}



.secure-contact-inner{


    margin:auto;

}



.secure-contact-inner h1{


    font-size:44px;

}



.secure-contact-inner p{


    margin:auto;


}



.secure-contact-path{


    justify-content:center;

}



.secure-contact-overlay{


    background-position:center;

}



}





/* =====================================================
   MOBILE
===================================================== */

@media(max-width:575px){



.secure-contact-banner{


    min-height:500px;


    padding-top:130px;


}



.secure-contact-inner h1{


    font-size:32px;


    line-height:1.25;


}



.secure-contact-inner p{


    font-size:15px;


}



.secure-contact-label{


    font-size:12px;


    padding:8px 18px;


}



.secure-contact-path{


    margin-top:25px;


    font-size:14px;


}



.secure-contact-grid{


    background-size:35px 35px;


}



}/* =====================================================
   GLOBAL CYBER LOCATION NETWORK
===================================================== */
/* Equal card size only — existing design/styles remain unchanged */
.con-ops-cards-grid > [data-card-loc] {
    display: flex;
}

.con-ops-card {
    width: 100%;
    height: 260px;
    min-height: 200px;
    max-height: 200px;
    box-sizing: border-box;
}

.con-map-info {
    min-height: 0;
    overflow: hidden;
}

.con-map-info p {
    overflow: hidden;
}

.con-map{

    position:relative;

    padding:130px 0;

    overflow:hidden;

    background:

    radial-gradient(
        circle at top left,
        rgba(54,98,204,.30),
        transparent 35%
    ),

    radial-gradient(
        circle at bottom right,
        rgba(96,165,250,.18),
        transparent 40%
    ),

    linear-gradient(
        135deg,
        #010535,
        #020617
    );

    isolation:isolate;

}



/* GRID BACKGROUND */

.con-map:before{

    content:"";

    position:absolute;

    inset:0;


    background-image:


    linear-gradient(
        rgba(96,165,250,.07) 1px,
        transparent 1px
    ),


    linear-gradient(
        90deg,
        rgba(96,165,250,.07) 1px,
        transparent 1px
    );


    background-size:60px 60px;


    animation:

    conMapGrid 20s linear infinite;


}



@keyframes conMapGrid{

    from{

        transform:translateY(0);

    }


    to{

        transform:translateY(60px);

    }

}




/* SECTION GLOW */

.con-map:after{


    content:"";


    position:absolute;


    width:700px;

    height:700px;


    right:-300px;

    top:-250px;



    background:

    radial-gradient(
        circle,
        rgba(54,98,204,.45),
        transparent 70%
    );


    animation:

    conMapGlow 10s infinite alternate;


}



@keyframes conMapGlow{

    from{

        transform:scale(1);

    }


    to{

        transform:scale(1.4);

    }

}





/* HEADER */

.con-map-title{

    position:relative;

    z-index:2;

    text-align:center;

}



.con-map-title span{


    display:inline-flex;


    padding:10px 25px;


    border-radius:50px;


    background:

    rgba(54,98,204,.2);



    border:

    1px solid rgba(96,165,250,.4);


    color:#93c5fd;


    letter-spacing:2px;


}



.con-map-title h2{


    margin-top:25px;


    color:white;


    font-size:52px;


}



.con-map-title p{


    color:rgba(255,255,255,.7);


    max-width:750px;


    margin:auto;


    font-size:18px;


}





/* CARD GRID */

.con-map-grid{


    position:relative;


    z-index:3;


    margin-top:75px;


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:35px;


}





/* =============================
   ADVANCED CARD
============================= */


.con-map-card{


    position:relative;


    display:flex;


    align-items:center;


    gap:25px;


    padding:35px;


    min-height:190px;



    background:


    linear-gradient(

        145deg,

        rgba(255,255,255,.15),

        rgba(255,255,255,.04)

    );



    border-radius:30px;


    border:

    1px solid rgba(255,255,255,.18);



    backdrop-filter:blur(18px);



    overflow:hidden;



    text-decoration:none;



    transform-style:preserve-3d;


    transition:

    transform .6s cubic-bezier(.2,.8,.2,1),

    box-shadow .6s,

    border-color .5s;


}





/* moving light */

.con-map-card:before{


    content:"";


    position:absolute;


    width:150%;


    height:3px;


    top:0;


    left:-150%;


    background:

    linear-gradient(

        90deg,

        transparent,

        #60a5fa,

        transparent

    );



    transition:.8s;


}



.con-map-card:hover:before{


    left:150%;


}





/* animated scanner */

.con-map-card:after{


    content:"";


    position:absolute;


    left:0;


    right:0;


    height:100%;


    background:

    linear-gradient(

        transparent,

        rgba(96,165,250,.12),

        transparent

    );


    top:-120%;


    transition:1s;


}



.con-map-card:hover:after{


    top:120%;


}






.con-map-card:hover{


    transform:


    translateY(-18px)

    rotateX(5deg);


    border-color:#60a5fa;


    box-shadow:


    0 30px 80px

    rgba(54,98,204,.5);


}





/* ICON */

.con-map-icon{


    position:relative;


    width:80px;


    height:80px;


    min-width:80px;



    display:flex;


    align-items:center;


    justify-content:center;



    border-radius:50%;



    background:


    linear-gradient(

        135deg,

        #3662CC,

        #60a5fa

    );



    color:white;


    font-size:30px;



    box-shadow:


    0 0 35px

    rgba(54,98,204,.7);



}





/* icon rotating ring */

.con-map-icon:before{


    content:"";


    position:absolute;


    inset:-8px;


    border-radius:50%;


    border:

    1px dashed rgba(96,165,250,.8);


    animation:

    iconRotate 8s linear infinite;


}




@keyframes iconRotate{


    to{

        transform:rotate(360deg);

    }

}





/* TEXT */

.con-map-info{


    position:relative;

    z-index:2;


}



.con-map-info h4{


    color:white;


    font-size:26px;


    margin-bottom:10px;


}



.con-map-info p{


    color:rgba(255,255,255,.7);


    line-height:1.7;


}



.con-map-info span{


    display:inline-block;


    margin-top:10px;


    color:#60a5fa;


    transition:.4s;


}



.con-map-card:hover span{


    color:white;


    transform:translateX(8px);


}





/* =============================
 RESPONSIVE
============================= */


@media(max-width:1199px){


.con-map-grid{


grid-template-columns:

repeat(2,1fr);


}



.con-map-title h2{

font-size:42px;

}



}





@media(max-width:767px){


.con-map{

padding:90px 0;

}



.con-map-grid{


grid-template-columns:1fr;


}



.con-map-title h2{

font-size:32px;

}



.con-map-title p{

font-size:15px;

}



.con-map-card{


padding:28px;


min-height:160px;


}



.con-map-icon{


width:65px;

height:65px;

min-width:65px;


font-size:24px;


}



.con-map-info h4{


font-size:22px;


}


}




@media(max-width:420px){


.con-map-card{


flex-direction:column;


align-items:flex-start;


}


}
/*==================================================
 contact us page end 
==================================================*/

/* =====================================================
   HEADER VISUAL FRAME & BADGES
===================================================== */
.secure-contact-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 25px;
    margin-bottom: 25px;
}

.sc-badge-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(96, 165, 250, 0.25);
    border-radius: 30px;
    color: #93c5fd;
    font-size: 13px;
    font-weight: 500;
    backdrop-filter: blur(10px);
}

.sc-badge-item i {
    color: #38bdf8;
}

.secure-contact-visual-frame {
    position: relative;
    padding: 15px;
}

.sc-glow-backdrop {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(54, 98, 204, 0.45), transparent 70%);
    filter: blur(40px);
    z-index: 1;
    pointer-events: none;
}

.sc-image-container {
    position: relative;
    z-index: 2;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(96, 165, 250, 0.3);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
    background: #020617;
}

.sc-hero-img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
    filter: brightness(0.92) contrast(1.05);
    transition: transform 0.5s ease;
}

.secure-contact-visual-frame:hover .sc-hero-img {
    transform: scale(1.03);
}

.sc-floating-badge {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: rgba(2, 6, 23, 0.85);
    border: 1px solid rgba(96, 165, 250, 0.35);
    border-radius: 16px;
    backdrop-filter: blur(14px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    z-index: 3;
}

.sc-badge-top {
    top: 20px;
    right: 20px;
}

.sc-badge-bottom {
    bottom: 20px;
    left: 20px;
}

.sc-status-dot {
    width: 10px;
    height: 10px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 10px #10b981;
    animation: statusPulse 2s infinite;
}

@keyframes statusPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

.sc-floating-badge i {
    font-size: 22px;
    color: #38bdf8;
}

.sc-floating-badge h6 {
    margin: 0;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.sc-floating-badge span {
    font-size: 11px;
    color: #94a3b8;
}

/* =====================================================
   GLOBAL SECURITY OPERATIONS - INTERACTIVE DASHBOARD
===================================================== */
.con-map .con-map-location-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}

.con-map .con-ops-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
    flex: 1 1 0px;
    min-height: 145px;
    width: 100%;
    box-sizing: border-box;
}

.con-map .con-ops-card .con-map-info {
    flex: 1;
    min-width: 0;
}

.con-map .con-ops-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(96, 165, 250, 0.45);
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.con-map .con-ops-card:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 3px;
}

.con-map .con-ops-card.active {
    background: linear-gradient(135deg, rgba(54, 98, 204, 0.32), rgba(2, 6, 23, 0.75));
    border-color: #3662CC;
    box-shadow: 0 12px 32px rgba(54, 98, 204, 0.3);
    transform: translateY(-4px);
}

.con-map .con-ops-card-badge {
    position: absolute;
    top: 14px;
    right: 50px;
    padding: 3px 10px;
    background: rgba(54, 98, 204, 0.25);
    border: 1px solid rgba(96, 165, 250, 0.3);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    color: #93c5fd;
    text-transform: uppercase;
}

.con-map .con-ops-card.active .con-ops-card-badge {
    background: #3662CC;
    color: #ffffff;
    border-color: #60a5fa;
}

.con-map .con-ops-card .con-map-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(54, 98, 204, 0.2);
    color: #60a5fa;
    font-size: 20px;
    transition: all 0.35s ease;
    flex-shrink: 0;
}

.con-map .con-ops-card.active .con-map-icon {
    background: #3662CC;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(54, 98, 204, 0.6);
}

.con-map .con-ops-card .con-map-info h4 {
    margin: 0 0 4px 0;
    font-size: 17px;
    color: #ffffff;
    font-weight: 700;
}

.con-map .con-ops-card .con-map-info p {
    margin: 0 0 6px 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.4;
}

.con-map .con-ops-status {
    font-size: 12px;
    color: #38bdf8;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.con-map .con-ops-status i {
    font-size: 8px;
    color: #10b981;
}

.con-map .con-ops-link {
    margin-left: auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.con-map .con-ops-card:hover .con-ops-link,
.con-map .con-ops-card.active .con-ops-link {
    background: rgba(96, 165, 250, 0.2);
    color: #ffffff;
}

/* HIGH-VISIBILITY REAL MAP CONTAINER */
.con-map .con-ops-map-wrapper {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(96, 165, 250, 0.45);
    background: #08142c;
    box-shadow: 0 25px 60px rgba(54, 98, 204, 0.35);
    height: 560px;
    width: 100%;
}

.con-map .con-ops-real-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #08142c;
    z-index: 1;
}

/* High-Contrast Clear Tile Styling for Exceptional Visibility */
.con-map .leaflet-container {
    background-color: #08142c !important;
    font-family: inherit;
}

.con-map .leaflet-tile-pane {
    filter: brightness(1.05) contrast(1.18) saturate(1.2) hue-rotate(180deg);
    opacity: 0.96;
}

.con-map .leaflet-control-container {
    display: none !important;
}

.custom-ops-marker-wrapper {
    background: none !important;
    border: none !important;
}

/* SLEEK LOCATION TABS BAR (EASY ACCESS & BEST UI/UX) */
.con-ops-tabs-container {
    width: 100%;
}

.con-ops-tabs-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    padding: 8px 4px 14px 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(96, 165, 250, 0.3) transparent;
}

.con-ops-tabs-wrapper::-webkit-scrollbar {
    height: 4px;
}

.con-ops-tabs-wrapper::-webkit-scrollbar-thumb {
    background: rgba(96, 165, 250, 0.3);
    border-radius: 4px;
}

.ops-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(2, 6, 23, 0.85);
    border: 1px solid rgba(96, 165, 250, 0.25);
    border-radius: 30px;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    backdrop-filter: blur(12px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ops-tab-btn:hover {
    background: rgba(15, 43, 107, 0.6);
    border-color: rgba(96, 165, 250, 0.5);
    color: #ffffff;
    transform: translateY(-2px);
}

.ops-tab-btn.active {
    background: linear-gradient(135deg, #2563eb 0%, #3662CC 100%);
    border-color: #38bdf8;
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(54, 98, 204, 0.5);
    transform: translateY(-2px);
}

.ops-tab-count {
    padding: 2px 7px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
}

.ops-flag {
    font-size: 15px;
    line-height: 1;
}

.ops-tab-tag {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.ops-tab-tag.hq { background: rgba(239, 68, 68, 0.25); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.3); }
.ops-tab-tag.apac { background: rgba(16, 185, 129, 0.25); color: #6ee7b7; border: 1px solid rgba(16, 185, 129, 0.3); }
.ops-tab-tag.gcc { background: rgba(56, 189, 248, 0.25); color: #7dd3fc; border: 1px solid rgba(56, 189, 248, 0.3); }
.ops-tab-tag.mea { background: rgba(168, 85, 247, 0.25); color: #d8b4fe; border: 1px solid rgba(168, 85, 247, 0.3); }

.ops-tab-btn.active .ops-tab-tag {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    border-color: transparent;
}

/* Custom Controls Bar Floating Over Map */
.con-map .con-ops-map-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: auto;
}

.con-map .map-ctrl-btn {
    background: rgba(2, 6, 23, 0.88);
    border: 1px solid rgba(96, 165, 250, 0.4);
    color: #38bdf8;
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(12px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.con-map .map-ctrl-btn:hover {
    background: #3662CC;
    color: #ffffff;
    border-color: #60a5fa;
    box-shadow: 0 0 20px rgba(54, 98, 204, 0.6);
    transform: translateY(-2px);
}

.con-map .map-zoom-group {
    display: flex;
    gap: 6px;
}

.con-map .map-zoom-group .map-ctrl-btn {
    padding: 8px 12px;
    border-radius: 10px;
}

.con-map .con-ops-map-background {
    position: relative;
    width: 100%;
    height: 100%;
}

.con-map .con-ops-map-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.92;
    filter: brightness(1.25) contrast(1.18) saturate(1.3);
}

.con-map .con-ops-map-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(56, 189, 248, 0.08) 0%, rgba(11, 25, 60, 0.45) 100%);
    pointer-events: none;
    z-index: 2;
}

/* ENHANCED MAP MARKERS */
.con-map .ops-marker {
    position: absolute;
    cursor: pointer;
    z-index: 5;
    transform: translate(-50%, -50%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.con-map .ops-marker:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 4px;
    border-radius: 50%;
}

.con-map .ops-marker:hover {
    transform: translate(-50%, -50%) scale(1.18);
    z-index: 9;
}

.con-map .ops-marker.active {
    transform: translate(-50%, -50%) scale(1.28);
    z-index: 10;
}

.con-map .marker-ping {
    position: absolute;
    width: 44px;
    height: 44px;
    top: -3px;
    left: -3px;
    border-radius: 50%;
    border: 2px solid #38bdf8;
    opacity: 0;
    pointer-events: none;
}

.con-map .ops-marker.active .marker-ping {
    animation: markerPing 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes markerPing {
    0% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(2.0); opacity: 0; }
}

.con-map .marker-halo {
    position: absolute;
    width: 60px;
    height: 60px;
    top: -11px;
    left: -11px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.45) 0%, rgba(54, 98, 204, 0) 70%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.con-map .ops-marker.active .marker-halo {
    opacity: 1;
    animation: markerHaloPulse 1.8s ease-in-out infinite alternate;
}

@keyframes markerHaloPulse {
    0% { transform: scale(0.85); opacity: 0.4; }
    100% { transform: scale(1.35); opacity: 0.95; }
}

.con-map .marker-pin {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(2, 6, 23, 0.88);
    border: 2px solid rgba(96, 165, 250, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
    font-size: 16px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.con-map .ops-marker:hover .marker-pin {
    border-color: #38bdf8;
    color: #38bdf8;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.6);
}

.con-map .ops-marker.active .marker-pin {
    background: linear-gradient(135deg, #2563eb, #3662CC);
    border-color: #38bdf8;
    color: #ffffff;
    box-shadow: 0 0 30px rgba(56, 189, 248, 0.9), 0 0 50px rgba(54, 98, 204, 0.6);
}

.con-map .marker-label {
    position: absolute;
    top: 44px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 3px 10px;
    background: rgba(2, 6, 23, 0.92);
    border: 1px solid rgba(96, 165, 250, 0.35);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    color: #e2e8f0;
    transition: all 0.3s ease;
}

.con-map .ops-marker.active .marker-label {
    background: #3662CC;
    border-color: #60a5fa;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(54, 98, 204, 0.5);
}

/* Marker Coordinates on World Map image */
.con-map .marker-uk { top: 32%; left: 47%; }
.con-map .marker-usa { top: 38%; left: 24%; }
.con-map .marker-uae { top: 49.2%; left: 64%; }
.con-map .marker-qatar { top: 47.8%; left: 61.6%; }
.con-map .marker-ksa { top: 49.5%; left: 58.5%; }
.con-map .marker-kuwait { top: 45.8%; left: 59.8%; }
.con-map .marker-india { top: 48.5%; left: 72.8%; }

/* NODE POPUP */
.con-map .con-ops-node-popup {
    position: absolute;
    bottom: 24px;
    left: 24px;
    max-width: 500px;
    padding: 20px 24px;
    background: rgba(2, 6, 23, 0.92);
    border: 1px solid rgba(96, 165, 250, 0.4);
    border-radius: 20px;
    backdrop-filter: blur(16px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    z-index: 12;
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.con-map .con-ops-node-popup.popup-animate {
    animation: popupFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes popupFadeIn {
    0% { opacity: 0; transform: translateY(12px) scale(0.97); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.con-map .node-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.con-map .node-pill {
    padding: 4px 12px;
    background: rgba(54, 98, 204, 0.3);
    border: 1px solid rgba(96, 165, 250, 0.35);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: #93c5fd;
}

.con-map .node-live {
    font-size: 12px;
    color: #38bdf8;
    display: flex;
    align-items: center;
    gap: 6px;
}

.con-map .node-live i {
    font-size: 8px;
    color: #10b981;
    animation: statusPulse 2s infinite;
}

.con-map .con-ops-node-popup h3 {
    margin: 0 0 4px 0;
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
}

.con-map .con-ops-node-popup p {
    margin: 0 0 14px 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    line-height: 1.45;
}

.con-map .node-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.con-map .node-stat span {
    display: block;
    font-size: 11px;
    color: #94a3b8;
}

.con-map .node-stat strong {
    font-size: 13px;
    color: #38bdf8;
}

.con-map .node-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #3662CC;
    color: #ffffff;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.con-map .node-btn:hover {
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 0 15px rgba(54, 98, 204, 0.6);
}

/* RESPONSIVE BREAKPOINTS FOR GLOBAL SECURITY OPERATIONS */
@media(max-width: 991px) {
    .con-map .con-ops-map-wrapper,
    .con-map .con-ops-map-background,
    .con-map .con-ops-map-img {
        height: 440px;
    }
    .con-map .con-ops-map-controls {
        top: 14px;
        right: 14px;
    }
    .con-map .map-ctrl-btn {
        padding: 6px 10px;
        font-size: 12px;
    }
    .con-map .con-ops-node-popup {
        bottom: 16px;
        left: 16px;
        right: 16px;
        max-width: none;
        padding: 16px;
    }
    .con-map .con-ops-node-popup h3 {
        font-size: 18px;
    }
    .ops-tab-btn {
        padding: 8px 14px;
        font-size: 12px;
    }
}

@media(max-width: 575px) {
    .con-map .con-ops-map-wrapper,
    .con-map .con-ops-map-background,
    .con-map .con-ops-map-img {
        height: 380px;
    }
    .ops-tab-btn {
        padding: 7px 12px;
        font-size: 11px;
    }
    .con-ops-tabs-wrapper {
        gap: 6px;
    }
    .con-map .con-ops-node-popup {
        bottom: 12px;
        left: 12px;
        right: 12px;
        padding: 14px;
        border-radius: 16px;
    }
    .con-map .con-ops-node-popup h3 {
        font-size: 16px;
    }
    .con-map .con-ops-node-popup p {
        font-size: 12px;
        margin-bottom: 10px;
    }
    .con-map .ops-marker .marker-pin {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    .con-map .ops-marker .marker-label {
        font-size: 10px;
        top: 36px;
        padding: 2px 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .con-map .ops-marker.active .marker-ping,
    .con-map .ops-marker.active .marker-halo,
    .con-map .con-ops-node-popup.popup-animate {
        animation: none !important;
        transition: none !important;
    }
}

@media(max-width: 575px) {
    .sc-hero-img {
        height: 240px;
    }
    .sc-floating-badge {
        padding: 8px 12px;
    }
    .sc-floating-badge h6 {
        font-size: 12px;
    }
    .marker-label {
        display: none;
    }
    .con-ops-card {
        padding: 16px;
    }
    .con-ops-card-badge {
        right: 40px;
    }
}

/* =========================================================
  Blog page detail start
   ========================================================= */
/* =========================================================
   BLOG PAGE HEADER
   Background moved from inline HTML
========================================================= */
/* =========================================================
   BLOG DETAIL PAGE HEADER
========================================================= */

/* =========================================================
   INC ARTICLE EVIDENCE IMAGES
   Keeps screenshots responsive without changing the site theme.
   ========================================================= */
.inc-evidence-image {
    width: 100%;
    margin: 42px 0 48px;
    padding: 0;
    clear: both;
}

.inc-evidence-image figure {
    margin: 0;
    width: 100%;
    overflow: hidden;
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.10);
}

.inc-evidence-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: contain;
    margin: 0 auto;
}

.inc-evidence-image figcaption {
    padding: 11px 16px;
    font-size: 13px;
    line-height: 1.5;
    opacity: .72;
    text-align: center;
}

@media (max-width: 767px) {
    .inc-evidence-image {
        margin: 28px 0 34px;
    }

    .inc-evidence-image figure {
        border-radius: 10px;
    }

    .inc-evidence-image img {
        max-height: 360px;
    }

    .inc-evidence-image figcaption {
        padding: 9px 12px;
        font-size: 12px;
    }
}


/* =========================================================
  Blog page detail end
   ========================================================= */
/* =========================================================
   INTRINSIC SECURITY FOOTER
   FINAL FOOTER CSS
========================================================= */


/* =========================================================
   MAIN FOOTER
========================================================= */

.main-footer {
    position: relative;

    width: 100%;

    margin: 0;
    padding: 0 !important;
	padding-top: 25px !important;
    background: var(--primary-color);
    color: var(--secondary-color);

    overflow: hidden;
}

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

.main-footer .row {
    margin-left: 0;
    margin-right: 0;
}


/* =========================================================
   FOOTER TOP
========================================================= */

.footer-top {
    display: grid;

    /*
       Logo | Links | Contact
    */
    grid-template-columns:
        210px
        minmax(0, 1fr)
        255px;

    align-items: start;

    column-gap: 40px;

    margin: 0;
    padding: 32px 0 36px;
}


/* =========================================================
   BRAND / LOGO
========================================================= */

.footer-brand {
    min-width: 0;

    margin: 0;
    padding: 0;
}

.footer-logo {
    margin: 0 0 8px;
    padding: 0;
}

.footer-logo a {
    display: inline-block;

    line-height: 0;
}

.footer-logo img {
    display: block;

    width: 115px;
    max-width: 115px;
    height: auto;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

.footer-logo a:hover img {
    opacity: 0.9;

    transform: translateY(-2px);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.footer-description {
    max-width: 215px;

    margin: 0;
    padding: 0;
}

.footer-description p {
    margin: 0;

    color: rgba(255, 255, 255, 0.70);

    font-family: var(--default-font);
    font-size: 13px;
    font-weight: 400;

    line-height: 1.6;
}


/* =========================================================
   FOOTER LINK BOX
========================================================= */

.footer-link-box {
    display: grid;

    /*
       Four link columns
    */
    grid-template-columns:
        minmax(85px, 0.8fr)
        minmax(170px, 1.45fr)
        minmax(130px, 1fr)
        minmax(115px, 0.9fr);

    align-items: start;

    column-gap: 26px;

    min-width: 0;

    margin: 0;
    padding: 0;
}

.footer-links {
    min-width: 0;

    margin: 0;
    padding: 0;
}


/* =========================================================
   LINK HEADINGS
========================================================= */

.footer-links h2 {
    position: relative;

    /*
       IMPORTANT:
       Prevent Managed Services from breaking
    */
    white-space: nowrap;

    margin: 0 0 18px;
    padding: 0;

    color: var(--secondary-color);

    font-family: var(--default-font);
    font-size: 16px;
    font-weight: 600;

    line-height: 1.25;
}


/* Underline */

.footer-links h2::after {
    content: "";

    display: block;

    width: 30px;
    height: 2px;

    margin-top: 8px;

    background: var(--accent-color);

    border-radius: 2px;

    transition:
        width 0.3s ease,
        background-color 0.3s ease;
}

.footer-links:hover h2::after {
    width: 45px;
}


/* =========================================================
   LINK LIST
========================================================= */

.footer-links ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.footer-links ul li {
    margin: 0 0 9px;
    padding: 0;
}

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


/* =========================================================
   LINKS
========================================================= */

.footer-links ul li a {
    display: inline-block;

    color: rgba(255, 255, 255, 0.68);

    font-family: var(--default-font);
    font-size: 13px;
    font-weight: 400;

    line-height: 1.45;

    text-decoration: none;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

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

    transform: translateX(5px);
}


/* =========================================================
   CONTACT AREA
========================================================= */

.footer-contact {
    min-width: 0;

    margin: 0;
    padding: 0;

    /*
       Align contact block with link headings
    */
    padding-top: 1px;
}


/* =========================================================
   CONTACT ITEM
========================================================= */

.footer-contact-item {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin: 0 0 11px;
    padding: 0;

    color: rgba(255, 255, 255, 0.72);

    font-family: var(--default-font);
    font-size: 13px;
    font-weight: 400;

    line-height: 1.5;
}

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


/* =========================================================
   CONTACT ICON
========================================================= */

.footer-contact-item > i {
    /*
       Fixed size prevents jumping
    */
    flex: 0 0 30px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    /*
       IMPORTANT:
       Address icon starts at first line
    */
    margin-top: 0;

    color: var(--accent-color);

    background: rgba(54, 98, 204, 0.12);

    border: 1px solid rgba(54, 98, 204, 0.30);

    border-radius: 50%;

    font-size: 12px;

    text-align: center;

    box-sizing: border-box;

    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* =========================================================
   CONTACT ICON HOVER
========================================================= */

.footer-contact-item:hover > i {
    color: var(--secondary-color);

    background: var(--accent-color);

    border-color: var(--accent-color);

    transform: translateY(-2px);

    box-shadow:
        0 6px 18px rgba(54, 98, 204, 0.30);
}


/* =========================================================
   ADDRESS TEXT
========================================================= */

.footer-contact-item > span {
    display: block;

    min-width: 0;

    margin: 0;
    padding: 0;

    color: rgba(255, 255, 255, 0.72);

    line-height: 1.55;
}


/* =========================================================
   EMAIL / PHONE
========================================================= */

.footer-contact-item a {
    display: block;

    min-width: 0;

    margin: 0;
    padding: 0;

    color: rgba(255, 255, 255, 0.72);

    font-family: var(--default-font);
    font-size: 13px;

    line-height: 30px;

    text-decoration: none;

    white-space: nowrap;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

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

    transform: translateX(3px);
}

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


/* =========================================================
   COPYRIGHT
========================================================= */

.footer-copyright {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin: 0;
    padding: 18px 0 20px;

    border-top: 1px solid var(--dark-divider-color);
}


/* =========================================================
   COPYRIGHT TEXT
========================================================= */

.footer-copyright-text {
    margin: 0;
    padding: 0;
}

.footer-copyright-text p {
    margin: 0;

    color: rgba(255, 255, 255, 0.55);

    font-family: var(--default-font);
    font-size: 12px;

    line-height: 1.5;
}

.footer-copyright-text p a {
    color: var(--secondary-color);

    text-decoration: none;

    transition: color 0.3s ease;
}

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


/* =========================================================
   SOCIAL / LINKEDIN
========================================================= */

.footer-social-links {
    margin: 0;
    padding: 0;
}

.footer-social-links ul {
    display: flex;

    align-items: center;

    gap: 10px;

    margin: 0;
    padding: 0;

    list-style: none;
}

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

.footer-social-links ul li a {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    color: var(--secondary-color);

    background: rgba(255, 255, 255, 0.03);

    border: 1px solid var(--dark-divider-color);

    border-radius: 50%;

    font-size: 14px;

    text-decoration: none;

    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

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

    background: var(--accent-color);

    border-color: var(--accent-color);

    transform: translateY(-4px);

    box-shadow:
        0 8px 22px rgba(54, 98, 204, 0.30);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .footer-top {
        grid-template-columns:
            210px
            minmax(0, 1fr)
            255px;

        column-gap: 40px;

        padding-top: 32px;
        padding-bottom: 36px;
    }

    /*
       Keep all headings on one line
    */
    .footer-links h2 {
        white-space: nowrap;
    }
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199px) and (min-width: 992px) {

    .footer-top {
        grid-template-columns:
            170px
            minmax(0, 1fr)
            215px;

        column-gap: 22px;

        padding-top: 30px;
        padding-bottom: 34px;
    }


    .footer-logo img {
        width: 110px;
        max-width: 110px;
    }


    .footer-link-box {
        grid-template-columns:
            minmax(70px, 0.8fr)
            minmax(145px, 1.45fr)
            minmax(120px, 1fr)
            minmax(100px, 0.9fr);

        column-gap: 17px;
    }


    .footer-links h2 {
        font-size: 14px;

        white-space: nowrap;
    }


    .footer-links ul li a {
        font-size: 12px;
    }


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

    .footer-contact-item a {
        font-size: 12px;
    }

    .footer-contact-item > i {
        flex-basis: 28px;

        width: 28px;
        height: 28px;
    }

    .footer-contact-item a {
        line-height: 28px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .footer-top {
        grid-template-columns: 1fr 1fr;

        gap: 35px 30px;

        padding-top: 38px;
        padding-bottom: 36px;
    }


    /* Brand full width */

    .footer-brand {
        grid-column: 1 / -1;
    }


    .footer-logo img {
        width: 115px;
        max-width: 115px;
    }


    .footer-description {
        max-width: 430px;
    }


    /* Links */

    .footer-link-box {
        grid-template-columns: 1fr 1fr;

        gap: 28px 22px;
    }


    /*
       Tablet can still keep headings on one line
       where enough width exists
    */

    .footer-links h2 {
        font-size: 15px;
        white-space: nowrap;
    }


    /* Contact */

    .footer-contact {
        padding-top: 0;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .footer-top {
        display: block;

        padding-top: 32px;
        padding-bottom: 32px;
    }


    /* =====================================================
       BRAND
    ===================================================== */

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

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

    .footer-logo img {
        width: 115px;
        max-width: 115px;
    }

    .footer-description {
        max-width: 100%;
    }


    /* =====================================================
       LINK BOX
    ===================================================== */

    .footer-link-box {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 28px 20px;

        margin-bottom: 32px;
    }


    .footer-links h2 {
        margin-bottom: 16px;

        font-size: 14px;

        /*
           On mobile each column has less space,
           so heading can wrap if absolutely needed.
        */
        white-space: normal;
    }

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

    .footer-links ul li a {
        font-size: 12px;
    }


    /* =====================================================
       CONTACT
    ===================================================== */

    .footer-contact {
        padding-top: 0;
    }

    .footer-contact-item {
        gap: 10px;

        margin-bottom: 12px;

        font-size: 13px;
    }

    .footer-contact-item > i {
        flex: 0 0 30px;

        width: 30px;
        height: 30px;

        font-size: 12px;
    }

    .footer-contact-item a {
        font-size: 13px;

        line-height: 30px;

        white-space: normal;
    }


    /* =====================================================
       COPYRIGHT
    ===================================================== */

    .footer-copyright {
        flex-direction: column;

        align-items: flex-start;

        gap: 15px;

        padding-top: 18px;
        padding-bottom: 18px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .footer-top {
        padding-top: 28px;
        padding-bottom: 30px;
    }


    /* One column links */

    .footer-link-box {
        grid-template-columns: 1fr;

        gap: 24px;

        margin-bottom: 30px;
    }


    .footer-links h2 {
        white-space: normal;

        font-size: 15px;
    }


    .footer-links ul li a {
        font-size: 13px;
    }


    /* Contact */

    .footer-contact-item {
        gap: 9px;

        font-size: 12px;
    }

    .footer-contact-item > i {
        flex: 0 0 28px;

        width: 28px;
        height: 28px;

        font-size: 11px;
    }

    .footer-contact-item a {
        font-size: 12px;

        line-height: 28px;
    }


    /* Copyright */

    .footer-copyright-text p {
        font-size: 11px;
    }

    .footer-social-links ul li a {
        width: 36px;
        height: 36px;
    }
}


/* =========================================================
   EXTRA SMALL
========================================================= */

@media (max-width: 360px) {

    .footer-logo img {
        width: 105px;
        max-width: 105px;
    }

    .footer-description p {
        font-size: 12px;
    }

    .footer-contact-item > i {
        flex-basis: 26px;

        width: 26px;
        height: 26px;
    }

    .footer-contact-item a {
        font-size: 11px;
    }
}
/* =========================================
   FAST & SMOOTH WOW ANIMATION
========================================= */

.post-entry .wow {
    animation-duration: 0.45s !important;
    animation-delay: 0s !important;
    transition-duration: 0.45s !important;
}

/* Fade Up - fast and smooth */
.post-entry .fadeInUp {
    animation-duration: 0.45s !important;
    animation-timing-function: ease-out !important;
}

/* =========================================
   MOBILE - EVEN FASTER
========================================= */

@media (max-width: 767px) {

    .post-entry .wow {
        animation-duration: 0.35s !important;
        animation-delay: 0s !important;
    }

    .post-entry .fadeInUp {
        animation-duration: 0.35s !important;
    }
}
 /* =========================================
   managed start 
========================================= */
/* =====================================================
   MODERN SECURITY SERVICES
===================================================== */

.ms-modern-section {
    position: relative;
    padding: 85px 0;
    background: var(--bg-color);
    overflow: hidden;
}


/* Background decorative circles */

.ms-modern-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    top: -220px;
    left: -180px;
    border-radius: 50%;
    background: rgba(54, 98, 204, 0.07);
    filter: blur(70px);
    pointer-events: none;
}

.ms-modern-section::after {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    right: -180px;
    bottom: -200px;
    border-radius: 50%;
    background: rgba(1, 5, 53, 0.06);
    filter: blur(70px);
    pointer-events: none;
}


/* =====================================================
   HEADING
===================================================== */

.ms-modern-heading {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: 0 auto 48px;
    text-align: center;
}

.ms-modern-subtitle {
    display: inline-block;
    margin-bottom: 9px;
    color: var(--accent-color);
    font-family: var(--default-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.ms-modern-heading h2 {
    margin: 0 0 12px;
    color: var(--primary-color);
    font-family: var(--accent-font);
    font-size: 40px;
    line-height: 1.15;
    font-weight: 700;
}

.ms-modern-heading p {
    max-width: 620px;
    margin: auto;
    color: var(--text-color);
    font-family: var(--default-font);
    font-size: 15px;
    line-height: 1.65;
}


/* =====================================================
   GRID
===================================================== */

.ms-modern-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 20px;
}


/* =====================================================
   CARD
===================================================== */

.ms-modern-card {
    position: relative;

    min-height: 225px;
    padding: 27px 24px 24px;

    background: rgba(255, 255, 255, 0.94);

    border: 1px solid rgba(1, 5, 53, 0.08);
    border-radius: 17px;

    overflow: hidden;

    box-shadow:
        0 8px 25px rgba(1, 5, 53, 0.055);

    transform: translateY(0);

    transition:
        transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.45s ease,
        border-color 0.4s ease;
}


/* Animated blue line */

.ms-modern-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 3px;

    background: linear-gradient(
        90deg,
        var(--accent-color),
        #6d91ed
    );

    transition: width 0.45s ease;
}


/* Glow */

.ms-modern-card::after {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    right: -75px;
    bottom: -75px;

    border-radius: 50%;

    background: rgba(54, 98, 204, 0.10);

    opacity: 0;
    transform: scale(0.7);

    transition:
        opacity 0.45s ease,
        transform 0.5s ease;
}


/* =====================================================
   HOVER
===================================================== */

.ms-modern-card:hover {
    transform: translateY(-9px);

    border-color:
        rgba(54, 98, 204, 0.25);

    box-shadow:
        0 20px 40px rgba(1, 5, 53, 0.11),
        0 0 25px rgba(54, 98, 204, 0.07);
}

.ms-modern-card:hover::before {
    width: 100%;
}

.ms-modern-card:hover::after {
    opacity: 1;
    transform: scale(1.6);
}


/* =====================================================
   NUMBER
===================================================== */

.ms-modern-number {
    position: absolute;

    top: 16px;
    right: 18px;

    color: rgba(1, 5, 53, 0.10);

    font-family: var(--default-font);
    font-size: 12px;
    font-weight: 700;

    transition:
        color 0.35s ease,
        transform 0.35s ease;
}

.ms-modern-card:hover .ms-modern-number {
    color: rgba(54, 98, 204, 0.45);
    transform: translateY(-2px);
}


/* =====================================================
   ICON
===================================================== */

.ms-modern-icon {
    position: relative;
    z-index: 2;

    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 18px;

    border-radius: 13px;

    color: var(--accent-color);

    background: rgba(54, 98, 204, 0.09);

    font-size: 20px;

    transition:
        transform 0.5s cubic-bezier(.2,.8,.2,1),
        color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}

.ms-modern-card:hover .ms-modern-icon {
    color: var(--white-color);

    background: var(--accent-color);

    transform:
        scale(1.1)
        rotate(-5deg);

    box-shadow:
        0 8px 20px rgba(54, 98, 204, 0.25);
}


/* =====================================================
   TITLE
===================================================== */

.ms-modern-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 9px;

    color: var(--primary-color);

    font-family: var(--default-font);
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;

    transition:
        color 0.35s ease,
        transform 0.35s ease;
}

.ms-modern-card:hover h3 {
    color: var(--accent-color);
    transform: translateX(3px);
}


/* =====================================================
   TEXT
===================================================== */

.ms-modern-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: var(--text-color);

    font-family: var(--default-font);
    font-size: 13.5px;
    line-height: 1.6;
}


/* =====================================================
   CARD ENTRANCE ANIMATION
===================================================== */

.ms-modern-card {
    opacity: 0;
    animation: msCardShow 0.7s ease forwards;
}

.ms-modern-card:nth-child(1)  { animation-delay: .05s; }
.ms-modern-card:nth-child(2)  { animation-delay: .10s; }
.ms-modern-card:nth-child(3)  { animation-delay: .15s; }
.ms-modern-card:nth-child(4)  { animation-delay: .20s; }
.ms-modern-card:nth-child(5)  { animation-delay: .25s; }
.ms-modern-card:nth-child(6)  { animation-delay: .30s; }
.ms-modern-card:nth-child(7)  { animation-delay: .35s; }
.ms-modern-card:nth-child(8)  { animation-delay: .40s; }
.ms-modern-card:nth-child(9)  { animation-delay: .45s; }
.ms-modern-card:nth-child(10) { animation-delay: .50s; }
.ms-modern-card:nth-child(11) { animation-delay: .55s; }
.ms-modern-card:nth-child(12) { animation-delay: .60s; }


@keyframes msCardShow {

    from {
        opacity: 0;
        transform:
            translateY(30px)
            scale(0.96);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }

}


/* =====================================================
   LARGE TABLET
===================================================== */

@media (max-width: 1199px) {

    .ms-modern-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 991px) {

    .ms-modern-section {
        padding: 70px 0;
    }

    .ms-modern-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 17px;
    }

    .ms-modern-heading h2 {
        font-size: 34px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 575px) {

    .ms-modern-section {
        padding: 55px 0;
    }

    .ms-modern-heading {
        margin-bottom: 35px;
    }

    .ms-modern-heading h2 {
        font-size: 28px;
    }

    .ms-modern-heading p {
        font-size: 14px;
    }

    .ms-modern-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .ms-modern-card {
        min-height: auto;
        padding: 23px 20px;
    }

    .ms-modern-icon {
        width: 47px;
        height: 47px;
        margin-bottom: 15px;
    }

    .ms-modern-card h3 {
        font-size: 17px;
    }

    .ms-modern-card p {
        font-size: 13px;
    }

}


/* =====================================================
   REDUCE MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .ms-modern-card {
        animation: none;
        opacity: 1;
    }

    .ms-modern-card,
    .ms-modern-card::before,
    .ms-modern-card::after,
    .ms-modern-icon,
    .ms-modern-number,
    .ms-modern-card h3 {
        transition: none;
    }

}

/* =========================================
   managed end
========================================= */
/* =========================================
   managed drop down start
========================================= */
/* =========================================================
   MANAGED XDR
   COMPLETE RESPONSIVE DESIGN
========================================================= */

:root {
    --mxdr-primary: #010535;
    --mxdr-secondary: #ffffff;
    --mxdr-bg: #f3f6fc;
    --mxdr-text: #2e314d;
    --mxdr-accent: #3662cc;
    --mxdr-light-blue: #eef4ff;
    --mxdr-border: rgba(1, 5, 53, 0.10);
    --mxdr-white-border: rgba(255, 255, 255, 0.16);
    --mxdr-shadow: 0 20px 55px rgba(1, 5, 53, 0.10);
    --mxdr-font: "DM Sans", sans-serif;
    --mxdr-heading: "Apfel Grotezk", sans-serif;
}


/* =========================================================
   GLOBAL
========================================================= */

.mxdr-hero,
.mxdr-challenge,
.mxdr-methodology,
.mxdr-components,
.mxdr-integration,
.mxdr-get-started {
    position: relative;
    overflow: hidden;
}

.mxdr-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.mxdr-section-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--mxdr-accent);
    font-family: var(--mxdr-font);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.mxdr-label-light {
    color: #ffffff;
}

.mxdr-section-heading {
    max-width: 760px;
    margin-bottom: 55px;
}

.mxdr-heading-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.mxdr-section-heading h2 {
    margin: 13px 0 18px;
    color: var(--mxdr-primary);
    font-family: var(--mxdr-heading);
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.08;
    font-weight: 600;
}

.mxdr-section-heading h2 em {
    color: var(--mxdr-accent);
    font-style: normal;
}

.mxdr-section-heading p {
    margin: 0;
    color: var(--mxdr-text);
    font-size: 16px;
    line-height: 1.75;
}


/* =========================================================
   HERO
========================================================= */

.mxdr-hero {
    min-height: 720px;
    padding: 140px 0 95px;
    background:
        radial-gradient(circle at 82% 45%, rgba(54, 98, 204, 0.35), transparent 28%),
        radial-gradient(circle at 10% 80%, rgba(54, 98, 204, 0.16), transparent 30%),
        var(--mxdr-primary);
    color: #ffffff;
}

.mxdr-hero-grid {
    min-height: 510px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 50px;
}

.mxdr-hero-content {
    position: relative;
    z-index: 5;
    animation: mxdrHeroText 1s ease both;
}

.mxdr-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    padding: 9px 15px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50px;
    background: rgba(255,255,255,.06);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.mxdr-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6f9aff;
    box-shadow: 0 0 0 5px rgba(111,154,255,.13);
    animation: mxdrPulse 2s infinite;
}

.mxdr-hero h1 {
    margin: 0;
    color: #ffffff;
    font-family: var(--mxdr-heading);
    font-size: clamp(54px, 7vw, 92px);
    font-weight: 600;
    letter-spacing: -3px;
    line-height: .95;
}

.mxdr-hero h1 span {
    color: #6f9aff;
}

.mxdr-hero-line {
    width: 80px;
    height: 3px;
    margin: 25px 0 22px;
    background: #6f9aff;
    border-radius: 20px;
}

.mxdr-hero h2 {
    max-width: 650px;
    margin: 0 0 20px;
    color: #ffffff;
    font-size: clamp(20px, 2.4vw, 29px);
    line-height: 1.35;
    font-weight: 500;
}

.mxdr-hero p {
    max-width: 650px;
    margin: 0 0 32px;
    color: rgba(255,255,255,.74);
    font-size: 15px;
    line-height: 1.8;
}

.mxdr-primary-btn,
.mxdr-outline-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 54px;
    padding: 0 24px;
    border-radius: 5px;
    text-decoration: none;
    font-family: var(--mxdr-font);
    font-size: 13px;
    font-weight: 800;
    transition: all .35s ease;
    overflow: hidden;
}

.mxdr-primary-btn {
    background: #ffffff;
    color: var(--mxdr-primary);
}

.mxdr-primary-btn::before,
.mxdr-outline-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-105%);
    background: var(--mxdr-accent);
    transition: transform .4s ease;
}

.mxdr-primary-btn:hover::before,
.mxdr-outline-btn:hover::before {
    transform: translateX(0);
}

.mxdr-primary-btn span,
.mxdr-primary-btn i,
.mxdr-outline-btn span,
.mxdr-outline-btn i {
    position: relative;
    z-index: 2;
}

.mxdr-primary-btn:hover {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(54,98,204,.30);
}

.mxdr-primary-btn i,
.mxdr-outline-btn i {
    transition: transform .3s ease;
}

.mxdr-primary-btn:hover i,
.mxdr-outline-btn:hover i {
    transform: translateX(5px);
}


/* HERO VISUAL */

.mxdr-hero-visual {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mxdr-security-core {
    position: relative;
    z-index: 5;
    width: 220px;
    height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(54,98,204,.55),
        rgba(1,5,53,.8) 65%
    );
    box-shadow:
        0 0 70px rgba(54,98,204,.35),
        inset 0 0 50px rgba(54,98,204,.15);
    animation: mxdrFloat 5s ease-in-out infinite;
}

.mxdr-core-ring {
    width: 62px;
    height: 62px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 50%;
    color: #ffffff;
    font-size: 23px;
}

.mxdr-security-core > span {
    color: #ffffff;
    font-size: 30px;
    font-weight: 800;
}

.mxdr-security-core small {
    color: rgba(255,255,255,.65);
    font-size: 9px;
    letter-spacing: 2px;
}

.mxdr-orbit {
    position: absolute;
    border: 1px solid rgba(111,154,255,.23);
    border-radius: 50%;
}

.orbit-one {
    width: 300px;
    height: 300px;
    animation: mxdrRotate 15s linear infinite;
}

.orbit-two {
    width: 410px;
    height: 410px;
    animation: mxdrRotateReverse 20s linear infinite;
}

.orbit-three {
    width: 490px;
    height: 490px;
    border-style: dashed;
    animation: mxdrRotate 25s linear infinite;
}

.mxdr-floating-card {
    position: absolute;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 215px;
    padding: 15px 17px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 10px;
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(15px);
    box-shadow: 0 15px 40px rgba(0,0,0,.20);
    animation: mxdrFloat 4s ease-in-out infinite;
}

.mxdr-floating-card i {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(54,98,204,.35);
    color: #ffffff;
}

.mxdr-floating-card strong,
.mxdr-floating-card span {
    display: block;
}

.mxdr-floating-card strong {
    color: #ffffff;
    font-size: 12px;
}

.mxdr-floating-card span {
    margin-top: 4px;
    color: rgba(255,255,255,.55);
    font-size: 10px;
}

.mxdr-card-top {
    top: 35px;
    right: 5px;
}

.mxdr-card-bottom {
    bottom: 40px;
    left: 0;
    animation-delay: -2s;
}


/* =========================================================
   CHALLENGE — WHITE
========================================================= */

.mxdr-challenge {
    padding: 100px 0;
    background: #ffffff;
}

.mxdr-challenge-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.mxdr-challenge-card {
    position: relative;
    display: flex;
    gap: 18px;
    padding: 28px;
    border: 1px solid var(--mxdr-border);
    border-radius: 14px;
    background: #ffffff;
    transition: all .4s ease;
}

.mxdr-challenge-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 3px;
    border-radius: 10px;
    background: var(--mxdr-accent);
    transition: width .4s ease;
}

.mxdr-challenge-card:hover {
    transform: translateY(-8px);
    border-color: rgba(54,98,204,.3);
    box-shadow: var(--mxdr-shadow);
}

.mxdr-challenge-card:hover::after {
    width: 100%;
}

.mxdr-challenge-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--mxdr-light-blue);
    color: var(--mxdr-accent);
    font-size: 19px;
    transition: all .35s ease;
}

.mxdr-challenge-card:hover .mxdr-challenge-icon {
    background: var(--mxdr-accent);
    color: #ffffff;
    transform: rotate(-5deg) scale(1.08);
}

.mxdr-challenge-card span {
    color: var(--mxdr-accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.mxdr-challenge-card h3 {
    margin: 7px 0 8px;
    color: var(--mxdr-primary);
    font-size: 19px;
}

.mxdr-challenge-card p {
    margin: 0;
    color: var(--mxdr-text);
    font-size: 13px;
    line-height: 1.7;
}


/* =========================================================
   METHODOLOGY — BLUE
========================================================= */

.mxdr-methodology {
    padding: 100px 0;
    background:
        radial-gradient(circle at 90% 10%, rgba(54,98,204,.35), transparent 25%),
        var(--mxdr-primary);
}

.mxdr-method-bg {
    position: absolute;
    width: 500px;
    height: 500px;
    right: -220px;
    top: 30%;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 50%;
}

.mxdr-method-header {
    display: grid;
    grid-template-columns: .95fr 1fr;
    align-items: center;
    gap: 45px;
    margin-bottom: 55px;
}

.mxdr-method-title h2 {
    margin: 13px 0 0;
    color: #ffffff;
    font-family: var(--mxdr-heading);
    font-size: clamp(32px, 4vw, 51px);
    line-height: 1.08;
    font-weight: 600;
}

.mxdr-method-title h2 em {
    color: #6f9aff;
    font-style: normal;
}

.mxdr-method-description {
    padding-left: 30px;
    border-left: 1px solid rgba(255,255,255,.16);
}

.mxdr-method-description p {
    margin: 0;
    color: rgba(255,255,255,.72);
    font-size: 15px;
    line-height: 1.8;
}

.mxdr-method-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}

.mxdr-method-card {
    position: relative;
    min-height: 280px;
    padding: 27px 23px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 13px;
    background: rgba(255,255,255,.045);
    backdrop-filter: blur(8px);
    transition: all .4s ease;
}

.mxdr-method-card:nth-child(1),
.mxdr-method-card:nth-child(2),
.mxdr-method-card:nth-child(3) {
    grid-column: span 2;
}

.mxdr-method-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.mxdr-method-card:nth-child(5) {
    grid-column: 4 / span 2;
}

.mxdr-method-card:hover {
    transform: translateY(-9px);
    border-color: rgba(111,154,255,.55);
    background: rgba(54,98,204,.16);
    box-shadow: 0 20px 50px rgba(0,0,0,.18);
}

.mxdr-method-number {
    position: absolute;
    top: 18px;
    right: 20px;
    color: rgba(255,255,255,.20);
    font-size: 12px;
    font-weight: 800;
}

.mxdr-method-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(54,98,204,.35);
    color: #ffffff;
    font-size: 19px;
    transition: all .35s ease;
}

.mxdr-method-card:hover .mxdr-method-icon {
    background: #ffffff;
    color: var(--mxdr-accent);
    transform: scale(1.08);
}

.mxdr-method-card h3 {
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 17px;
    line-height: 1.35;
}

.mxdr-method-card p {
    margin: 0;
    color: rgba(255,255,255,.64);
    font-size: 12px;
    line-height: 1.7;
}


/* =========================================================
   COMPONENTS — WHITE
========================================================= */

.mxdr-components {
    padding: 100px 0;
    background: #ffffff;
}

.mxdr-components-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.mxdr-component-card {
    position: relative;
    padding: 28px;
    border: 1px solid var(--mxdr-border);
    border-radius: 13px;
    background: #ffffff;
    overflow: hidden;
    transition: all .4s ease;
}

.mxdr-component-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--mxdr-accent),
        transparent
    );
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s ease;
}

.mxdr-component-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--mxdr-shadow);
    border-color: rgba(54,98,204,.25);
}

.mxdr-component-card:hover::before {
    transform: scaleX(1);
}

.mxdr-component-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}

.mxdr-component-top span {
    color: rgba(1,5,53,.3);
    font-size: 11px;
    font-weight: 800;
}

.mxdr-component-top i {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--mxdr-light-blue);
    color: var(--mxdr-accent);
    transition: all .35s ease;
}

.mxdr-component-card:hover .mxdr-component-top i {
    color: #ffffff;
    background: var(--mxdr-accent);
    transform: rotate(5deg);
}

.mxdr-component-card h3 {
    margin: 0 0 11px;
    color: var(--mxdr-primary);
    font-size: 18px;
    line-height: 1.35;
}

.mxdr-component-card p {
    margin: 0;
    color: var(--mxdr-text);
    font-size: 13px;
    line-height: 1.75;
}


/* =========================================================
   INTEGRATION — BLUE FULL SECTION
========================================================= */

.mxdr-integration {
    padding: 105px 0;
    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(54,98,204,.32),
            transparent 35%
        ),
        var(--mxdr-primary);
}

.mxdr-integration-content {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 70px;
}

.mxdr-integration-copy {
    max-width: 650px;
}

.mxdr-integration-copy h2 {
    margin: 15px 0 22px;
    color: #ffffff;
    font-family: var(--mxdr-heading);
    font-size: clamp(36px, 4.5vw, 58px);
    line-height: 1.05;
    font-weight: 600;
}

.mxdr-integration-copy h2 span {
    color: #6f9aff;
}

.mxdr-integration-copy p {
    margin: 0 0 17px;
    color: rgba(255,255,255,.70);
    font-size: 15px;
    line-height: 1.8;
}

.mxdr-outline-btn {
    margin-top: 18px;
    border: 1px solid rgba(255,255,255,.25);
    color: #ffffff;
    background: rgba(255,255,255,.06);
}

.mxdr-outline-btn:hover {
    color: #ffffff;
    border-color: var(--mxdr-accent);
}


/* INTEGRATION VISUAL */

.mxdr-integration-visual {
    position: relative;
    height: 390px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mxdr-integration-circle {
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(54,98,204,.45),
        transparent 68%
    );
    box-shadow: 0 0 90px rgba(54,98,204,.22);
    animation: mxdrFloat 5s ease-in-out infinite;
}

.mxdr-integration-circle > div {
    width: 140px;
    height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffffff;
    color: var(--mxdr-primary);
}

.mxdr-integration-circle i {
    margin-bottom: 8px;
    color: var(--mxdr-accent);
    font-size: 27px;
}

.mxdr-integration-circle strong {
    font-size: 13px;
    letter-spacing: 1px;
}

.mxdr-integration-circle small {
    margin-top: 3px;
    color: var(--mxdr-accent);
    font-size: 8px;
    letter-spacing: 2px;
}

.mxdr-connection {
    position: absolute;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    color: #ffffff;
    animation: mxdrFloat 4s ease-in-out infinite;
}

.connection-one {
    top: 35px;
    left: 20%;
}

.connection-two {
    top: 50%;
    right: 4%;
    animation-delay: -1s;
}

.connection-three {
    bottom: 35px;
    left: 22%;
    animation-delay: -2s;
}


/* =========================================================
   GET STARTED — WHITE
========================================================= */

.mxdr-get-started {
    padding: 100px 0;
    background: #ffffff;
}

.mxdr-get-card {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    align-items: stretch;
    min-height: 390px;
    overflow: hidden;
    border-radius: 20px;
    background: var(--mxdr-primary);
    box-shadow: 0 25px 70px rgba(1,5,53,.18);
}

.mxdr-get-decoration {
    position: absolute;
    width: 450px;
    height: 450px;
    right: 25%;
    top: -230px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 50%;
}

.mxdr-get-decoration::after {
    content: "";
    position: absolute;
    inset: 60px;
    border: 1px solid rgba(111,154,255,.10);
    border-radius: 50%;
}

.mxdr-get-content {
    position: relative;
    z-index: 2;
    padding: 58px 55px;
}

.mxdr-get-content .mxdr-section-label {
    color: #6f9aff;
}

.mxdr-get-content h2 {
    max-width: 620px;
    margin: 15px 0 20px;
    color: #ffffff;
    font-family: var(--mxdr-heading);
    font-size: clamp(34px, 4vw, 53px);
    line-height: 1.05;
    font-weight: 600;
}

.mxdr-get-content h2 span {
    color: #6f9aff;
}

.mxdr-get-content p {
    max-width: 620px;
    margin: 0;
    color: rgba(255,255,255,.70);
    font-size: 14px;
    line-height: 1.8;
}


/* CONTACT BOX */

.mxdr-contact-box {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 13px;
    padding: 45px;
    border-left: 1px solid rgba(255,255,255,.10);
    background: rgba(54,98,204,.12);
}

.mxdr-contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 10px;
    text-decoration: none;
    background: rgba(255,255,255,.045);
    transition: all .35s ease;
}

.mxdr-contact-item:hover {
    transform: translateX(7px);
    border-color: rgba(111,154,255,.45);
    background: rgba(54,98,204,.22);
}

.mxdr-contact-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(54,98,204,.38);
    color: #ffffff;
    transition: all .3s ease;
}

.mxdr-contact-item:hover .mxdr-contact-icon {
    background: #ffffff;
    color: var(--mxdr-accent);
}

.mxdr-contact-item small,
.mxdr-contact-item strong {
    display: block;
}

.mxdr-contact-item small {
    margin-bottom: 3px;
    color: rgba(255,255,255,.42);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.mxdr-contact-item strong {
    color: #ffffff;
    font-size: 12px;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes mxdrHeroText {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mxdrFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes mxdrPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(111,154,255,.45);
    }

    70% {
        box-shadow: 0 0 0 9px rgba(111,154,255,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(111,154,255,0);
    }
}

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

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

@keyframes mxdrRotateReverse {
    from {
        transform: rotate(360deg);
    }

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


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .mxdr-container {
        width: min(100% - 34px, 760px);
    }

    .mxdr-hero {
        min-height: auto;
        padding: 120px 0 75px;
    }

    .mxdr-hero-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .mxdr-hero-content {
        text-align: center;
    }

    .mxdr-eyebrow {
        margin-left: auto;
        margin-right: auto;
    }

    .mxdr-hero-line {
        margin-left: auto;
        margin-right: auto;
    }

    .mxdr-hero h2,
    .mxdr-hero p {
        margin-left: auto;
        margin-right: auto;
    }

    .mxdr-hero-visual {
        height: 410px;
    }

    .mxdr-challenge-grid {
        grid-template-columns: 1fr;
    }

    .mxdr-method-header {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .mxdr-method-description {
        padding-left: 0;
        padding-top: 20px;
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.14);
    }

    .mxdr-method-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mxdr-method-card:nth-child(1),
    .mxdr-method-card:nth-child(2),
    .mxdr-method-card:nth-child(3),
    .mxdr-method-card:nth-child(4),
    .mxdr-method-card:nth-child(5) {
        grid-column: auto;
    }

    .mxdr-method-card:last-child {
        grid-column: 1 / -1;
    }

    .mxdr-components-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mxdr-integration-content {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .mxdr-integration-copy {
        max-width: 100%;
    }

    .mxdr-integration-visual {
        height: 330px;
    }

    .mxdr-get-card {
        grid-template-columns: 1fr;
    }

    .mxdr-contact-box {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.10);
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .mxdr-container {
        width: calc(100% - 28px);
    }

    .mxdr-hero {
        padding: 120px 0 60px;
    }

    .mxdr-hero h1 {
        font-size: 56px;
        letter-spacing: -2px;
    }

    .mxdr-hero h2 {
        font-size: 19px;
    }

    .mxdr-hero p {
        font-size: 13px;
        line-height: 1.7;
    }

    .mxdr-hero-visual {
        height: 340px;
        transform: scale(.82);
    }

    .orbit-one {
        width: 250px;
        height: 250px;
    }

    .orbit-two {
        width: 330px;
        height: 330px;
    }

    .orbit-three {
        width: 390px;
        height: 390px;
    }

    .mxdr-security-core {
        width: 175px;
        height: 175px;
    }

    .mxdr-floating-card {
        min-width: 180px;
        padding: 11px;
    }

    .mxdr-card-top {
        right: -10px;
    }

    .mxdr-card-bottom {
        left: -10px;
    }

    .mxdr-challenge,
    .mxdr-methodology,
    .mxdr-components,
    .mxdr-integration,
    .mxdr-get-started {
        padding: 70px 0;
    }

    .mxdr-section-heading {
        margin-bottom: 38px;
    }

    .mxdr-section-heading h2 {
        font-size: 34px;
    }

    .mxdr-section-heading p {
        font-size: 13px;
    }

    .mxdr-challenge-card {
        padding: 22px;
    }

    .mxdr-method-title h2 {
        font-size: 35px;
    }

    .mxdr-method-grid {
        grid-template-columns: 1fr;
    }

    .mxdr-method-card:last-child {
        grid-column: auto;
    }

    .mxdr-method-card {
        min-height: auto;
    }

    .mxdr-components-grid {
        grid-template-columns: 1fr;
    }

    .mxdr-component-card {
        padding: 23px;
    }

    .mxdr-integration-copy h2 {
        font-size: 37px;
    }

    .mxdr-integration-copy p {
        font-size: 13px;
    }

    .mxdr-integration-visual {
        height: 280px;
        transform: scale(.85);
    }

    .mxdr-get-card {
        border-radius: 14px;
    }

    .mxdr-get-content {
        padding: 38px 25px;
    }

    .mxdr-get-content h2 {
        font-size: 36px;
    }

    .mxdr-get-content p {
        font-size: 13px;
    }

    .mxdr-contact-box {
        padding: 25px;
    }

    .mxdr-contact-item {
        padding: 13px;
    }

    .mxdr-contact-item strong {
        font-size: 11px;
        word-break: break-word;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .mxdr-hero h1 {
        font-size: 48px;
    }

    .mxdr-hero h2 {
        font-size: 17px;
    }

    .mxdr-eyebrow {
        font-size: 9px;
        letter-spacing: 1.2px;
    }

    .mxdr-primary-btn,
    .mxdr-outline-btn {
        width: 100%;
        font-size: 11px;
    }

    .mxdr-hero-visual {
        transform: scale(.70);
        margin: -20px 0;
    }

    .mxdr-section-heading h2,
    .mxdr-method-title h2,
    .mxdr-integration-copy h2,
    .mxdr-get-content h2 {
        font-size: 31px;
    }

    .mxdr-challenge-card {
        gap: 13px;
        padding: 19px;
    }

    .mxdr-challenge-icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        font-size: 16px;
    }

    .mxdr-challenge-card h3 {
        font-size: 16px;
    }

    .mxdr-challenge-card p,
    .mxdr-component-card p,
    .mxdr-method-card p {
        font-size: 12px;
    }

    .mxdr-contact-box {
        padding: 20px;
    }

    .mxdr-contact-item {
        gap: 10px;
    }
}




/* =========================================
   managed drop down end
========================================= */

/* =========================================
   MDR Diagram start 
========================================= */


/* =========================================================
   NEW MDR SECURITY FLOW DIAGRAM
========================================================= */

.mxdr-new-diagram {
    position: relative;
    min-height: 560px;
    width: 100%;
    overflow: hidden;
}

/* Background Grid */
.mxdr-diagram-grid {
    position: absolute;
    inset: 30px;
    background-image:
        linear-gradient(rgba(0, 150, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 150, 255, 0.07) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: radial-gradient(circle, black 25%, transparent 78%);
    -webkit-mask-image: radial-gradient(circle, black 25%, transparent 78%);
}

/* =========================================================
   CONNECTION LINES
========================================================= */

.mxdr-connection {
    position: absolute;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 174, 255, 0.8),
        rgba(0, 174, 255, 0.2),
        transparent
    );
    transform-origin: left center;
    animation: mxdrLinePulse 2.5s ease-in-out infinite;
}

.connection-one {
    width: 210px;
    left: 23%;
    top: 31%;
    transform: rotate(24deg);
}

.connection-two {
    width: 210px;
    left: 23%;
    top: 69%;
    transform: rotate(-24deg);
}

.connection-three {
    width: 210px;
    right: 23%;
    top: 31%;
    transform: rotate(156deg);
}

.connection-four {
    width: 210px;
    right: 23%;
    top: 69%;
    transform: rotate(-156deg);
}

@keyframes mxdrLinePulse {
    0%, 100% {
        opacity: .35;
    }

    50% {
        opacity: 1;
    }
}

/* =========================================================
   NODE CARDS
========================================================= */

.mxdr-node {
    position: absolute;
    width: 175px;
    min-height: 70px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 11px;

    background: rgba(7, 17, 31, 0.88);
    border: 1px solid rgba(0, 174, 255, 0.35);
    border-radius: 12px;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        0 0 25px rgba(0, 140, 255, 0.08),
        inset 0 0 20px rgba(0, 140, 255, 0.03);

    z-index: 4;
}

/* Node Positions */

.mxdr-endpoint-node {
    left: 2%;
    top: 20%;
}

.mxdr-network-node {
    left: 2%;
    bottom: 20%;
}

.mxdr-identity-node {
    right: 2%;
    top: 20%;
}

.mxdr-cloud-node {
    right: 2%;
    bottom: 20%;
}

/* Node Icon */

.mxdr-node-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: rgba(0, 150, 255, 0.10);
    border: 1px solid rgba(0, 174, 255, 0.25);

    font-size: 16px;
}

/* Node Text */

.mxdr-node-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mxdr-node-text strong {
    font-size: 11px;
    letter-spacing: 1px;
    font-weight: 700;
}

.mxdr-node-text span {
    font-size: 9px;
    opacity: .55;
    white-space: nowrap;
}

/* Status */

.mxdr-node-status {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    right: 10px;
    top: 10px;

    box-shadow: 0 0 10px currentColor;
    animation: mxdrStatusBlink 1.8s infinite;
}

@keyframes mxdrStatusBlink {
    0%, 100% {
        opacity: .4;
    }

    50% {
        opacity: 1;
    }
}

/* =========================================================
   CENTRAL MDR CORE
========================================================= */

.mxdr-mdr-core {
    position: absolute;
    width: 190px;
    height: 190px;

    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 5;
}

/* Outer Ring */

.mxdr-core-outer-ring {
    position: absolute;
    width: 190px;
    height: 190px;

    border: 1px dashed rgba(0, 174, 255, 0.25);
    border-radius: 50%;

    animation: mxdrRotate 18s linear infinite;
}

/* Middle Ring */

.mxdr-core-middle-ring {
    position: absolute;
    width: 145px;
    height: 145px;

    border: 1px solid rgba(0, 174, 255, 0.22);
    border-top-color: rgba(0, 174, 255, 0.9);
    border-radius: 50%;

    animation: mxdrRotateReverse 8s linear infinite;
}

@keyframes mxdrRotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes mxdrRotateReverse {
    to {
        transform: rotate(-360deg);
    }
}

/* Core */

.mxdr-core-inner {
    width: 92px;
    height: 92px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle,
            rgba(0, 174, 255, 0.22),
            rgba(5, 15, 28, 0.96) 65%
        );

    border: 1px solid rgba(0, 174, 255, 0.65);

    box-shadow:
        0 0 30px rgba(0, 174, 255, 0.25),
        inset 0 0 25px rgba(0, 174, 255, 0.12);
}

.mxdr-core-inner i {
    font-size: 32px;
}

/* Core Label */

.mxdr-core-label {
    position: absolute;
    bottom: -30px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.mxdr-core-label strong {
    font-size: 12px;
    letter-spacing: 3px;
}

.mxdr-core-label span {
    font-size: 9px;
    letter-spacing: 1.5px;
    opacity: .5;
}

/* =========================================================
   RESPONSE CARD
========================================================= */

.mxdr-response-node {
    position: absolute;

    left: 50%;
    bottom: 3%;

    transform: translateX(-50%);

    width: 220px;

    padding: 13px 16px;

    display: flex;
    align-items: center;
    gap: 12px;

    background: rgba(7, 17, 31, 0.92);
    border: 1px solid rgba(0, 174, 255, 0.35);

    border-radius: 12px;

    z-index: 6;

    box-shadow: 0 0 25px rgba(0, 140, 255, 0.08);
}

.mxdr-response-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: rgba(0, 174, 255, 0.1);
    border: 1px solid rgba(0, 174, 255, 0.3);
}

.mxdr-response-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mxdr-response-text strong {
    font-size: 10px;
    letter-spacing: 1px;
}

.mxdr-response-text span {
    font-size: 8px;
    opacity: .5;
}

/* Response Progress */

.mxdr-response-bar {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 5px;

    height: 2px;

    background: rgba(255,255,255,.06);
    overflow: hidden;
}

.mxdr-response-bar span {
    display: block;
    width: 45%;
    height: 100%;

    background: currentColor;

    animation: mxdrResponseProgress 2s infinite;
}

@keyframes mxdrResponseProgress {
    0% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(300%);
    }
}

/* =========================================================
   LIVE STATUS
========================================================= */

.mxdr-live-status {
    position: absolute;
    top: 5%;
    left: 50%;

    transform: translateX(-50%);

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 8px 14px;

    border: 1px solid rgba(0, 174, 255, 0.2);
    border-radius: 30px;

    background: rgba(7, 17, 31, 0.7);

    z-index: 7;
}

.mxdr-live-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;

    background: currentColor;

    box-shadow: 0 0 12px currentColor;

    animation: mxdrLivePulse 1.5s infinite;
}

@keyframes mxdrLivePulse {
    0%, 100% {
        transform: scale(.8);
        opacity: .5;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

.mxdr-live-status div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mxdr-live-status strong {
    font-size: 9px;
    letter-spacing: 1.5px;
}

.mxdr-live-status small {
    font-size: 8px;
    opacity: .5;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991px) {

    .mxdr-new-diagram {
        min-height: 500px;
        transform: scale(.92);
    }

    .mxdr-node {
        width: 155px;
    }

    .connection-one,
    .connection-two,
    .connection-three,
    .connection-four {
        width: 170px;
    }

}

@media (max-width: 600px) {

    .mxdr-new-diagram {
        min-height: 460px;
        transform: scale(.82);
        transform-origin: center;
    }

    .mxdr-node {
        width: 140px;
        padding: 10px;
    }

    .mxdr-node-text span {
        font-size: 8px;
    }

    .mxdr-mdr-core {
        width: 160px;
        height: 160px;
    }

    .mxdr-core-outer-ring {
        width: 160px;
        height: 160px;
    }

    .mxdr-core-middle-ring {
        width: 125px;
        height: 125px;
    }

    .mxdr-core-inner {
        width: 78px;
        height: 78px;
    }

    .mxdr-response-node {
        width: 200px;
    }

}/* =========================================================
   MDR HERO HEADING — SLIGHTLY SMALLER
========================================================= */

.mxdr-hero-content h1 {
    font-size: 48px;
    line-height: 1.12;
}

/* Tablet */
@media (max-width: 991px) {
    .mxdr-hero-content h1 {
        font-size: 40px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .mxdr-hero-content h1 {
        font-size: 32px;
        line-height: 1.15;
    }
}

/* =========================================
   MDR Diagram end 
========================================= */

/* =========================================
   SOC start 
========================================= */
/* =========================================================
   MANAGED iSOC — PROBLEM / CHALLENGE
========================================================= */

.isoc-problem-section {
    position: relative;
    padding: 125px 0;
    background: var(--white-color);
    overflow: hidden;
}

.isoc-problem-container {
    width: min(1180px, calc(100% - 40px));
    margin: auto;
}


/* KICKER */

.isoc-problem-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 55px;

    font-family: var(--default-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--accent-color);
}

.isoc-problem-kicker-line {
    width: 30px;
    height: 1px;
    background: var(--accent-color);
}


/* TOP */

.isoc-problem-top-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 100px;
    align-items: end;
}

.isoc-problem-title h2 { 
    max-width: 720px; 
    margin: 0; 
    font-family: var(--accent-font); 
    font-size: clamp(30px, 3.5vw, 48px); 
    line-height: 1.1; 
    font-weight: 500; 
    letter-spacing: -1.5px; 
    color: var(--primary-color); 
}

.isoc-problem-title h2 span {
    display: block;
    color: var(--accent-color);
}

.isoc-problem-copy {
    padding-bottom: 5px;
}

.isoc-problem-copy p {
    margin: 0 0 20px;

    font-family: var(--default-font);
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-color);
}

.isoc-problem-copy p:last-child {
    margin-bottom: 0;
}


/* MAIN */

.isoc-problem-main {
    display: grid;
    grid-template-columns: 330px 1fr;
    gap: 20px;
    margin-top: 85px;
}


/* STATEMENT */

.isoc-problem-statement {
    padding: 40px;
    background: var(--primary-color);
    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.isoc-problem-statement::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    right: -190px;
    top: -130px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 50%;
}

.isoc-problem-statement::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -90px;
    top: -50px;
    border: 1px solid rgba(111,145,228,.2);
    border-radius: 50%;
}

.isoc-problem-statement-number {
    position: relative;
    z-index: 2;

    font-family: var(--accent-font);
    font-size: 76px;
    line-height: .9;
    letter-spacing: -4px;
    color: var(--white-color);
}

.isoc-problem-statement-number small {
    margin-left: 5px;
    font-family: var(--default-font);
    font-size: 13px;
    letter-spacing: 1px;
    color: #6f91e4;
}

.isoc-problem-statement-rule {
    width: 45px;
    height: 1px;
    margin: 35px 0 25px;
    background: #6f91e4;
}

.isoc-problem-statement h3 {
    position: relative;
    z-index: 2;

    max-width: 250px;
    margin: 0 0 18px;

    font-family: var(--accent-font);
    font-size: 28px;
    line-height: 1.15;
    font-weight: 500;
    color: var(--white-color);
}

.isoc-problem-statement p {
    position: relative;
    z-index: 2;

    margin: 0;

    font-family: var(--default-font);
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255,255,255,.58);
}


/* MATRIX */

.isoc-problem-matrix {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;

    background: var(--divider-color);
    border: 1px solid var(--divider-color);
}

.isoc-problem-item {
    min-height: 255px;
    padding: 30px;

    background: var(--bg-color);

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    transition: .35s ease;
}

.isoc-problem-item:hover {
    background: var(--primary-color);
}

.isoc-problem-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.isoc-problem-item-top span {
    font-family: var(--default-font);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba(1,5,53,.35);
    transition: .35s ease;
}

.isoc-problem-item-top i {
    font-size: 17px;
    color: var(--accent-color);
}

.isoc-problem-item small {
    display: block;
    margin-bottom: 8px;

    font-family: var(--default-font);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--accent-color);
}

.isoc-problem-item h3 {
    margin: 0 0 12px;

    font-family: var(--accent-font);
    font-size: 25px;
    font-weight: 500;
    color: var(--primary-color);

    transition: .35s ease;
}

.isoc-problem-item p {
    max-width: 360px;
    margin: 0;

    font-family: var(--default-font);
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-color);

    transition: .35s ease;
}

.isoc-problem-item:hover .isoc-problem-item-top span {
    color: rgba(255,255,255,.35);
}

.isoc-problem-item:hover h3 {
    color: var(--white-color);
}

.isoc-problem-item:hover p {
    color: rgba(255,255,255,.58);
}


/* FOOTER */

.isoc-problem-footer {
    display: flex;
    align-items: center;
    gap: 22px;

    max-width: 850px;
    margin: 65px auto 0;
    padding-top: 30px;

    border-top: 1px solid var(--divider-color);
}

.isoc-problem-footer-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--divider-color);
    color: var(--accent-color);
}

.isoc-problem-footer strong {
    display: block;
    margin-bottom: 7px;

    font-family: var(--default-font);
    font-size: 14px;
    color: var(--primary-color);
}

.isoc-problem-footer p {
    margin: 0;

    font-family: var(--default-font);
    font-size: 12px;
    line-height: 1.65;
    color: var(--text-color);
}


/* RESPONSIVE */

@media (max-width: 991px) {

    .isoc-problem-top-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .isoc-problem-main {
        grid-template-columns: 1fr;
    }

    .isoc-problem-statement {
        min-height: 330px;
    }

}

@media (max-width: 650px) {

    .isoc-problem-section {
        padding: 85px 0;
    }

    .isoc-problem-title h2 {
        font-size: 43px;
        letter-spacing: -1.5px;
    }

    .isoc-problem-main {
        margin-top: 55px;
    }

    .isoc-problem-matrix {
        grid-template-columns: 1fr;
    }

    .isoc-problem-item {
        min-height: 225px;
    }

}











/* =========================================================
   MANAGED iSOC — ENGINE PART 02 / PLATFORM
========================================================= */

.isoc-platform-section {
    padding: 120px 0;
    background: var(--bg-color);
    overflow: hidden;
}

.isoc-platform-container {
    width: min(1180px, calc(100% - 40px));
    margin: auto;
}


/* HEADER */
/* Dropdown hover fix - only header dropdown items */
/* =========================================================
   HEADER DROPDOWN
   White background + Blue text
   Desktop / Tablet / Mobile
   ========================================================= */

.main-header-gold .main-menu ul li ul li:hover > a,
.main-header-gold .main-menu ul li ul li a:hover,
.main-header-gold .main-menu ul li ul li.active > a,
.main-header-gold .main-menu ul li ul li.active > a:hover,
.main-header-gold .responsive-menu ul li ul li:hover > a,
.main-header-gold .responsive-menu ul li ul li a:hover,
.main-header-gold .responsive-menu ul li ul li.active > a {
    background-color: #ffffff !important;
    color: #1e4f9a !important;
}
.isoc-platform-header {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 90px;
    align-items: end;
    margin-bottom: 75px;
}

.isoc-platform-label {
    display: block;
    margin-bottom: 20px;

    font-family: var(--default-font);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--accent-color);
}

.isoc-platform-header h2 {
    max-width: 700px;
    margin: 0;

    font-family: var(--accent-font);
    font-size: clamp(42px, 5vw, 65px);
    line-height: 1.03;
    font-weight: 500;
    letter-spacing: -2px;
    color: var(--primary-color);
}

.isoc-platform-header h2 em {
    color: var(--accent-color);
    font-style: normal;
}

.isoc-platform-header > p {
    margin: 0;

    font-family: var(--default-font);
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-color);
}


/* FLOW */

.isoc-platform-flow {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 20px;
}


/* FOUNDATION */

.isoc-platform-foundation {
    padding: 45px;
    background: var(--primary-color);
    color: var(--white-color);

    display: flex;
    flex-direction: column;
    justify-content: center;

    position: relative;
    overflow: hidden;
}

.isoc-platform-foundation::after {
    content: "";
    position: absolute;

    width: 350px;
    height: 350px;

    right: -230px;
    bottom: -200px;

    border-radius: 50%;
    border: 1px solid rgba(111,145,228,.25);
}

.isoc-platform-foundation-icon {
    width: 55px;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 45px;

    border: 1px solid rgba(111,145,228,.4);
    color: #6f91e4;
    font-size: 20px;
}

.isoc-platform-foundation small {
    position: relative;
    z-index: 2;

    margin-bottom: 8px;

    font-family: var(--default-font);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;

    color: #6f91e4;
}

.isoc-platform-foundation h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 15px;

    font-family: var(--accent-font);
    font-size: 34px;
    font-weight: 500;
}

.isoc-platform-foundation p {
    position: relative;
    z-index: 2;

    max-width: 270px;
    margin: 0;

    font-family: var(--default-font);
    font-size: 13px;
    line-height: 1.7;

    color: rgba(255,255,255,.55);
}

.isoc-platform-foundation-status {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    width: fit-content;

    margin-top: 40px;
    padding: 8px 12px;

    border: 1px solid rgba(255,255,255,.12);

    font-family: var(--default-font);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;

    color: rgba(255,255,255,.55);
}

.isoc-platform-foundation-status span {
    width: 5px;
    height: 5px;
    border-radius: 50%;

    background: #6f91e4;
}


/* SERVICES */

.isoc-platform-services {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;

    background: var(--divider-color);
    border: 1px solid var(--divider-color);
}

.isoc-platform-service {
    min-height: 225px;
    padding: 30px;

    background: var(--white-color);

    position: relative;

    transition: .35s ease;
}

.isoc-platform-service:hover {
    background: var(--primary-color);
}

.isoc-platform-service-number {
    position: absolute;
    top: 25px;
    right: 28px;

    font-family: var(--default-font);
    font-size: 10px;
    font-weight: 700;

    color: rgba(1,5,53,.25);

    transition: .35s ease;
}

.isoc-platform-service-icon {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 28px;

    border: 1px solid var(--divider-color);

    color: var(--accent-color);

    transition: .35s ease;
}

.isoc-platform-service small {
    display: block;
    margin-bottom: 7px;

    font-family: var(--default-font);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;

    color: var(--accent-color);
}

.isoc-platform-service h3 {
    margin: 0 0 10px;

    font-family: var(--accent-font);
    font-size: 22px;
    font-weight: 500;

    color: var(--primary-color);

    transition: .35s ease;
}

.isoc-platform-service p {
    max-width: 300px;
    margin: 0;

    font-family: var(--default-font);
    font-size: 12px;
    line-height: 1.65;

    color: var(--text-color);

    transition: .35s ease;
}

.isoc-platform-service:hover .isoc-platform-service-number {
    color: rgba(255,255,255,.3);
}

.isoc-platform-service:hover .isoc-platform-service-icon {
    border-color: rgba(255,255,255,.15);
}

.isoc-platform-service:hover h3 {
    color: var(--white-color);
}

.isoc-platform-service:hover p {
    color: rgba(255,255,255,.55);
}


/* CTA */

.isoc-platform-cta {
    margin-top: 25px;
    padding: 28px 30px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    background: var(--white-color);
    border: 1px solid var(--divider-color);
}

.isoc-platform-cta > div span {
    display: block;
    margin-bottom: 7px;

    font-family: var(--default-font);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;

    color: var(--accent-color);
}

.isoc-platform-cta strong {
    font-family: var(--default-font);
    font-size: 14px;
    font-weight: 600;

    color: var(--primary-color);
}

.isoc-platform-cta a {
    display: inline-flex;
    align-items: center;
    gap: 13px;

    padding: 14px 20px;

    text-decoration: none;

    background: var(--primary-color);
    color: var(--white-color);

    font-family: var(--default-font);
    font-size: 11px;
    font-weight: 600;

    white-space: nowrap;

    transition: .3s ease;
}

.isoc-platform-cta a i {
    color: #6f91e4;
    transition: .3s ease;
}

.isoc-platform-cta a:hover {
    background: var(--accent-color);
}

.isoc-platform-cta a:hover i {
    transform: translateX(4px);
}


/* RESPONSIVE */

@media (max-width: 991px) {

    .isoc-platform-header {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .isoc-platform-flow {
        grid-template-columns: 1fr;
    }

    .isoc-platform-foundation {
        min-height: 350px;
    }

}

@media (max-width: 650px) {

    .isoc-platform-section {
        padding: 85px 0;
    }

    .isoc-platform-header h2 {
        font-size: 42px;
        letter-spacing: -1px;
    }

    .isoc-platform-services {
        grid-template-columns: 1fr;
    }

    .isoc-platform-service {
        min-height: 210px;
    }

    .isoc-platform-cta {
        align-items: flex-start;
        flex-direction: column;
    }

    .isoc-platform-cta a {
        width: 100%;
        justify-content: center;
    }

}

/* ==========================================
   CHALLENGE TOP — EQUAL COLUMNS
========================================== */

.isoc-problem-top-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 80px;
    align-items: center;
}


/* LEFT TITLE */
.isoc-problem-title {
    width: 100%;
}

.isoc-problem-title h2 {
    max-width: 100%;
    margin: 0;
}


/* RIGHT CONTENT */
.isoc-problem-copy {
    width: 100%;
    max-width: none;
}

.isoc-problem-copy p {
    max-width: 100%;
    font-size: 18px;
    line-height: 1.7;
    margin: 0 0 22px;
}

.isoc-problem-copy p:last-child {
    margin-bottom: 0;
}


/* TABLET */
@media (max-width: 1024px) {

    .isoc-problem-top-grid {
        gap: 50px;
    }

    .isoc-problem-copy p {
        font-size: 17px;
    }

}


/* MOBILE */
@media (max-width: 768px) {

    .isoc-problem-top-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .isoc-problem-copy p {
        font-size: 16px;
        line-height: 1.65;
    }

}
/* =========================================
   SOC end 
========================================= */

/* =========================================
   Privacy Policy Styles & Utility Classes
========================================= */
.page-header-privacy-bg {
    background-image: url('../intrinsic-wallpaper/Image/cyber-security-concept-digital-art.jpg');
}

#resetSearchBtn {
    display: none;
}

/* Scoped Container for Privacy Policy Page */
.privacy-page-wrapper {
    background-color: var(--bg-color, #F3F6FC);
    color: var(--text-color, #2E314D);
    padding-bottom: 100px;
}

/* Hero Sub-badge */
.privacy-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(54, 98, 204, 0.15);
    border: 1px solid rgba(54, 98, 204, 0.3);
    color: #618eff;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
}

.privacy-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
}

.privacy-hero-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.privacy-hero-meta-item i {
    color: var(--accent-color, #3662CC);
}

/* Disclaimer Banner */
.privacy-disclaimer-banner {
    background: #fff;
    border-left: 4px solid var(--accent-color, #3662CC);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 40px;
    box-shadow: 0 4px 20px rgba(1, 5, 53, 0.05);
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.privacy-disclaimer-icon {
    font-size: 24px;
    color: var(--accent-color, #3662CC);
    margin-top: 2px;
    flex-shrink: 0;
}

.privacy-disclaimer-text p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-color, #2E314D);
}

/* Key Highlights Grid */
.privacy-highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.privacy-highlight-card {
    background: #ffffff;
    border: 1px solid rgba(1, 5, 53, 0.08);
    border-radius: 16px;
    padding: 24px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(1, 5, 53, 0.03);
}

.privacy-highlight-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(54, 98, 204, 0.12);
    border-color: rgba(54, 98, 204, 0.3);
}

.privacy-highlight-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(54, 98, 204, 0.1);
    color: var(--accent-color, #3662CC);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 16px;
}

.privacy-highlight-card h4 {
    font-family: var(--accent-font, "Apfel Grotezk", sans-serif);
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color, #010535);
    margin-bottom: 8px;
}

.privacy-highlight-card p {
    font-size: 14px;
    line-height: 1.5;
    color: #5d6380;
    margin: 0;
}

/* Controls & Filter Bar */
.privacy-controls-bar {
    background: #ffffff;
    border: 1px solid rgba(1, 5, 53, 0.08);
    border-radius: 16px;
    padding: 16px 24px;
    margin-bottom: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 4px 15px rgba(1, 5, 53, 0.03);
}

.privacy-search-box {
    position: relative;
    flex: 1;
    min-width: 260px;
}

.privacy-search-box input {
    width: 100%;
    padding: 10px 16px 10px 42px;
    border: 1px solid #e2e7f3;
    border-radius: 10px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease;
}

.privacy-search-box input:focus {
    border-color: var(--accent-color, #3662CC);
    box-shadow: 0 0 0 3px rgba(54, 98, 204, 0.15);
}

.privacy-search-box i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #8b92b3;
    font-size: 15px;
}

.privacy-action-btns {
    display: flex;
    align-items: center;
    gap: 12px;
}

.privacy-btn-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f0f4fd;
    color: var(--accent-color, #3662CC);
    border: none;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.privacy-btn-action:hover {
    background: var(--accent-color, #3662CC);
    color: #ffffff;
}

/* Sticky Table of Contents (Desktop) */
.privacy-toc-wrapper {
    position: sticky;
    top: 100px;
    background: #ffffff;
    border: 1px solid rgba(1, 5, 53, 0.08);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(1, 5, 53, 0.04);
    max-height: calc(100vh - 130px);
    overflow-y: auto;
}

.privacy-toc-title {
    font-family: var(--accent-font, "Apfel Grotezk", sans-serif);
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color, #010535);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--divider-color, rgba(1, 5, 53, 0.1));
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.privacy-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.privacy-toc-item a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    color: #5d6380;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    line-height: 1.3;
}

.privacy-toc-item a:hover {
    color: var(--accent-color, #3662CC);
    background: rgba(54, 98, 204, 0.06);
    padding-left: 16px;
}

.privacy-toc-item.active a {
    color: var(--accent-color, #3662CC);
    background: rgba(54, 98, 204, 0.1);
    font-weight: 700;
    border-left: 3px solid var(--accent-color, #3662CC);
    padding-left: 12px;
}

.privacy-toc-num {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    opacity: 0.7;
    min-width: 20px;
}

/* Mobile Collapsible TOC */
.privacy-mobile-toc-toggle {
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(1, 5, 53, 0.1);
    border-radius: 12px;
    padding: 14px 20px;
    font-family: var(--accent-font, "Apfel Grotezk", sans-serif);
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-color, #010535);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    margin-bottom: 24px;
    box-shadow: 0 4px 15px rgba(1, 5, 53, 0.04);
}

/* Main Content Section Cards */
.privacy-section-card {
    background: #ffffff;
    border: 1px solid rgba(1, 5, 53, 0.08);
    border-radius: 20px;
    padding: 36px;
    margin-bottom: 32px;
    box-shadow: 0 4px 20px rgba(1, 5, 53, 0.03);
    scroll-margin-top: 110px;
    transition: border-color 0.3s ease;
}

.privacy-section-card:hover {
    border-color: rgba(54, 98, 204, 0.2);
}

.privacy-section-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--divider-color, rgba(1, 5, 53, 0.08));
}

.privacy-section-number {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--primary-color, #010535);
    color: #ffffff;
    font-family: var(--accent-font, "Apfel Grotezk", sans-serif);
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.privacy-section-title-wrap h2 {
    font-family: var(--accent-font, "Apfel Grotezk", sans-serif);
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color, #010535);
    margin: 0;
    line-height: 1.25;
}

.privacy-section-body {
    font-size: 15px;
    line-height: 1.7;
    color: #3b3f5c;
}

.privacy-section-body p {
    margin-bottom: 16px;
    line-height: 1.7;
}

.privacy-section-body p:last-child {
    margin-bottom: 0;
}

.privacy-section-body h3 {
    font-family: var(--accent-font, "Apfel Grotezk", sans-serif);
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color, #010535);
    margin: 24px 0 12px 0;
}

.privacy-section-body ul,
.privacy-section-body ol {
    padding-left: 20px;
    margin-bottom: 20px;
}

.privacy-section-body li {
    margin-bottom: 8px;
    line-height: 1.6;
}

/* Styled Tables inside Content */
.privacy-table-responsive {
    overflow-x: auto;
    margin: 20px 0;
    border-radius: 12px;
    border: 1px solid rgba(1, 5, 53, 0.08);
}

.privacy-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    text-align: left;
}

.privacy-data-table th {
    background: var(--primary-color, #010535);
    color: #ffffff;
    padding: 14px 18px;
    font-family: var(--accent-font, "Apfel Grotezk", sans-serif);
    font-weight: 600;
}

.privacy-data-table td {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(1, 5, 53, 0.06);
    background: #ffffff;
    vertical-align: top;
}

.privacy-data-table tr:last-child td {
    border-bottom: none;
}

.privacy-data-table tr:nth-child(even) td {
    background: #fafcff;
}

/* Callout Box inside Section */
.privacy-callout-box {
    background: rgba(54, 98, 204, 0.05);
    border-left: 3px solid var(--accent-color, #3662CC);
    border-radius: 10px;
    padding: 16px 20px;
    margin: 20px 0;
    font-size: 14px;
    color: #2b335c;
}

/* Contact Box inside Section 17 */
.privacy-contact-card {
    background: linear-gradient(135deg, #010535 0%, #0c1660 100%);
    border-radius: 16px;
    padding: 30px;
    color: #ffffff;
    margin-top: 20px;
}

.privacy-contact-card h3 {
    color: #ffffff !important;
    margin-top: 0 !important;
}

.privacy-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.privacy-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.privacy-contact-item i {
    font-size: 20px;
    color: #618eff;
    margin-top: 3px;
}

.privacy-contact-item div h5 {
    font-size: 15px;
    color: #ffffff;
    margin-bottom: 4px;
    font-weight: 600;
}

.privacy-contact-item div p,
.privacy-contact-item div a {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    text-decoration: none;
    margin: 0;
}

.privacy-contact-item div a:hover {
    color: #618eff;
}

/* Hidden search elements */
.privacy-section-card.is-hidden {
    display: none !important;
}

/* Back to top float button */
.privacy-backtop-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-color, #3662CC);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(54, 98, 204, 0.4);
    border: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 99;
}

.privacy-backtop-btn.show {
    opacity: 1;
    visibility: visible;
}

.privacy-backtop-btn:hover {
    transform: translateY(-4px);
    background: var(--primary-color, #010535);
}

/* Responsive Breakpoints */
@media (max-width: 991px) {
    .privacy-section-card {
        padding: 24px;
    }

    .privacy-section-title-wrap h2 {
        font-size: 20px;
    }

    .privacy-highlights-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575px) {
    .privacy-highlights-grid {
        grid-template-columns: 1fr;
    }

    .privacy-controls-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .privacy-search-box {
        min-width: 100%;
    }

    .privacy-action-btns {
        justify-content: space-between;
    }

    .privacy-section-card {
        padding: 20px 16px;
        border-radius: 16px;
    }

    .privacy-disclaimer-banner {
        flex-direction: column;
        gap: 10px;
        padding: 16px;
    }
}

/* Print Media Styles */
@media print {

    .main-header,
    .preloader,
    .privacy-controls-bar,
    .privacy-toc-wrapper,
    .privacy-mobile-toc-toggle,
    .privacy-backtop-btn,
    .footer-gold,
    .breadcrumb {
        display: none !important;
    }

    .privacy-page-wrapper {
        background: #ffffff !important;
        padding: 0 !important;
    }

    .privacy-section-card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {

    .privacy-highlight-card,
    .privacy-toc-item a,
    .privacy-backtop-btn,
    .privacy-btn-action {
        transition: none !important;
        transform: none !important;
    }
}