﻿/* =========================
   LIGHT MENU
========================= */
.sub-menu.light-menu,
.sub-menu.light-menu * {color: #000 !important;}
.sub-menu.light-menu {background-color: #fff !important;}

/* =========================
   DARK MENU
========================= */
.sub-menu.dark-menu,
.sub-menu.dark-menu * {color: #fff !important;}
.sub-menu.dark-menu {background-color: var(--menu-bg) !important;}


.header[style*="color:#ffffff"] .logo img,
.header[style*="color:#ffffff"] .menu > ul > li > a .icon-anim img,
.sub-menu[style*="color:#ffffff"] .nav-card a .icon-with-bg img{ filter:invert(100%) sepia(0%) saturate(0%) hue-rotate(209deg) brightness(255%) }
.header[style*="color:#ffffff"] .menu > ul > li > a.active{color: inherit !important;}
.sub-menu[style*="color:#ffffff"] .nav-card a p,
.sub-menu[style*="color:#ffffff"] .nav-card a span{color: var(--WhiteClr);}

.header{background:#ffffff;}

header.hide-header {transform: translateY(-100%);}
.transparent-nav{background:transparent!important;}
.transparent-nav .header-top {background:#0d07387d;}
.transparent-nav.header.position-fixed .logo img{ filter:invert(100%) sepia(0%) saturate(0%) hue-rotate(209deg) brightness(102%) }

.blue-header{background:#19039e!important;}
.blue-header .header-top{background:#0c0735;}
.blue-header.header.position-sticky .logo img,
.blue-header.header.position-sticky .icon-anim img{ filter:invert(100%) sepia(0%) saturate(0%) hue-rotate(209deg) brightness(102%) }


@media all and (min-width:1025px){
	.transparent-nav .icon-anim img{filter:invert(100%) sepia(0%) saturate(0%) hue-rotate(209deg) brightness(255%)}
	.transparent-nav.header .menu > ul > li > a{color:var(--WhiteClr); opacity:0.85;}
	.transparent-nav.header .menu > ul > li:hover > a::before {content:''; position:absolute; width:130%; height:32px; background:#ffffff60; left:-15%; top:-6px; z-index:-1; border-radius:20px;}
	.transparent-nav.header .menu > ul > li > a.active,
	.transparent-nav.header .menu > ul > li > a:hover{color:var(--WhiteClr)!important; opacity:1;}
	.transparent-nav .login-btn {border-color:#ffffff !important; color:var(--WhiteClr);}
	.transparent-nav .login-btn:hover{    border-color:#1C02A5 !important;}

	.blue-header.header .menu > ul > li > a{color:var(--WhiteClr);}
	.blue-header.header .menu > ul > li > a.active,
	.blue-header.header .menu > ul > li > a:hover{color:var(--WhiteClr)!important;} 
	.blue-header.header .menu > ul > li:hover > a::before {content:''; position:absolute; width:130%; height:32px; background:#ffffff20; left:-15%; top:-6px; z-index:-1; border-radius:20px;}

	.blue-header .btn-white-blue-border{border-color:#ffffff !important; color:var(--WhiteClr)!important; background-color: transparent !important;}
	.blue-header .btn-white-blue-border:hover{background-color:#ffffff!important; color:var(--BlackClr)!important;}

	.blue-header .btn-blue-blue-border{border-color:#ffffff !important; color:var(--BlackClr)!important; background-color:#ffffff!important;}
	.blue-header .btn-blue-blue-border:hover{background-color:transparent!important;  color:var(--WhiteClr)!important;}
}

/* header */
.header{transition:all 0.7s ease;}
.scrolled{top: -29px!important;}
.header{z-index: 9999;}
.header-top{background: #0D0738;}
.top-nav a{font-size: 13px; --bs-text-opacity: 0.62 !important; padding: 4px 0px 3px 0px; vertical-align: text-bottom;}
.top-nav a:hover{--bs-text-opacity: 1!important;}

.top-nav .dropdown-menu{border-color: #A8B9FF!important; box-shadow: 0px 8px 6.3px rgba(0, 0, 0, 0.1); border-radius: 0px 0px 9px 9px;}
.top-nav .dropdown-menu li a:hover{background: var(--PrimaryClr); color: var(--WhiteClr);}
.login-bucket{min-width: 100px;}
.language-bucket{min-width:80px;}

.top-nav .dropdown-menu {top: 100% !important; transform: translateY(10px)!important; transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1); opacity: 0; visibility: hidden;}
.top-nav .dropdown-menu.show {transform: translateY(0px)!important; opacity: 1; visibility: visible;}
.top-nav .dropdown-toggle::after{background: url('../images/down-angle.svg') no-repeat center; border: 0px; width: 9px; height: 8px; background-size: contain; top: 4px; position: relative; margin-left: 4px;}
.top-nav .dropdown-toggle:hover:after{filter: invert(100%) sepia(0%) saturate(7490%) hue-rotate(181deg) brightness(255%) contrast(255%);}

/* Main menu start */
.menu-main{column-gap: 18px;}
.header .menu > ul > li{padding:25px 0px;}
.header .menu > ul > li > a{font-size:14px; color:inherit; transition:color 0.3s ease;}
.header .menu > ul > li > a:hover{color:#3F59F5;}
.header .menu > ul > li > a.active{color:#3F59F5!important; font-weight: 700!important;}
.header .menu > ul > li > a i img{margin-left:4px; max-height:7px; margin-top:-3px; transition:all 0.5s ease;}
.header .menu > ul > li:hover > a i img{transform:rotate(-180deg);}

.header .menu > ul > li .sub-menu{z-index:500; padding: clamp(15px, 2.5vw, 30px); top:79px; left: 0px; margin-top:25px; opacity:0; visibility:hidden; background: #ffffff; box-shadow: 0px 8px 6.3px rgba(0, 0, 0, 0.22); border-radius: 0px 0px 9px 9px; transition:all 0.5s ease;
}

.genie-sub-nav-list, .platform-left-nav, .solutions-left-nav, .resources-left-nav{row-gap: 15px;}

.icon-with-bg{ --size:24px; width:var(--size); height:var(--size);  margin-top: 2px;}/*  background: #EFF3FF; */
.icon-with-bg img{max-height:27px; min-height:22px;}

.nav-card a{align-items:flex-start!important;}
.nav-card p{color:var(--navlink-color); font-size:13px; color:#14141E; font-size: 14px; letter-spacing:0.2px; display: flex; align-items: center;}
.nav-card span{font-size: 12px; color:#2b2d31; opacity: 0.8; letter-spacing: 0.3px;}
.nav-card{transition:all 0.5s ease;}
.nav-card p:after{content:''; position:relative; top:1px;; background: url('../images/right-arrow.svg') center / contain no-repeat;width: 0px;opacity: 0;display: inline-block;height: 10px;transition: all 0.7s ease;margin-left: -5px;}
.nav-card:hover p:after{width: 20px;opacity: 1;margin-left:0px;}
.nav-card:hover p{color:var(--navlink-color);}

.platform-sml-title{font-size: 14px!important;  color:var(--navlink-color); margin-bottom:20px;}
.platform-sml-title a{font-size: 14px!important;}
.platform-right-nav a{font-size: 14px; color: #42548E; line-height: normal;}
.platform-right-nav a:hover{color: var(--navlink-color);}
/* .platform-right-nav .icon-with-bg{background:#F6F8FF; width: 22px; height: 22px;} */
.platform-right-nav .icon-with-bg{--size:20px; width:var(--size); height:var(--size);}
.platform-right-nav .icon-with-bg img{min-height:14px; width:80%;}


.channel-gap{row-gap:13px;}

.and-more-link{padding-left: 2.4rem;}
.and-more-link a{color:#96A4D0}

.btn-secondary-bg span.request-meeting-btn{padding: 0.4rem 1rem 0.53rem 1rem; font-size: 14px;}
.login-btn{border-color: #1C02A5!important;padding: 0.55rem 1.5rem 0.63rem 1.5rem;font-size: 14px;}
.login-btn:hover{background: #1C02A5; color: var(--WhiteClr);}

/* .platrom-suport{background: url('../images/header/platform-suport-bg.svg') no-repeat center, radial-gradient(116.22% 575.63% at 94.59% 15.79%, #3A65F6 0%, #3451B3 100%); background-size: cover; border-radius: var(--BorderRadius);} */
.platrom-suport{background:url('../images/header/platform-suport-bg.svg') no-repeat center; background-size:cover;   max-width: 290px;}
.platrom-suport::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px; /* border thickness */
	border-radius: inherit;
	background: linear-gradient(80.81deg, #575CEE, #818CD7, #60ADBC);
	-webkit-mask: 
	linear-gradient(#fff 0 0) content-box, 
	linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	z-index: -1;
}
.platrom-suport .nav-card{padding:1rem 1.4rem; border-color:rgba(192, 206, 255, 0.2)!important;}
.platrom-suport .nav-card span{color: #DCE9FF;}


@media (min-width: 1300px) {
  .genie-sub-nav-list, .platform-left-nav, .solutions-left-nav, .resources-left-nav{row-gap:22px;}
}

@media (min-width: 1024px) and (max-width: 1300px) {
	.icon-with-bg{--size:30px}
	.icon-with-bg img{max-width: 20px; max-height: 20px; width:auto;}
	.header .menu > ul > li .sub-menu {padding: clamp(15px, 2.5vw, 20px);}
	.genie-sub-nav-list, .platform-left-nav, .solutions-left-nav, .resources-left-nav{row-gap:18px;}
}

@media (min-width: 1025px) {
  .desk-flex{display: flex;}
  .desk-position{position: relative;}
  .genie-sub-nav{width: 290px!important; transform: unset!important;}
  .hide-wap{display: none;}
  .header .menu > ul > li.menu-item-has-children:hover .sub-menu{margin-top:0; visibility:visible; opacity:1;}

  .platform-bucket{top: 115px!important; max-width:650px;}
  .solutions-bucket{width:290px!important; transform: unset!important;}
  /* .resources-bucket{top: 115px!important; max-width: 578px;} */
   .resources-bucket{width:290px!important;}
}

@media (max-width: 1025px) {
  .header-btn-group{margin-inline-start: auto;}
}

.header .menu > ul > li .sub-menu.mega-menu{left:50%; transform:translateX(-50%);}
.mobile-menu-head, .mobile-menu-trigger{display:none;}

/*responsive*/
@media(max-width:1025px){
	.header .mobile-menu-trigger{
		display:flex;
		height:30px;
		width:30px;
		margin-left:15px;
		cursor:pointer;
		align-items:center;
		justify-content:center;
	}
	.header .mobile-menu-trigger span{
		display:block;
		height:2px;
		background-color:#000000;
		width:24px;
		position:relative;
	}
	.header .mobile-menu-trigger span:before,
	.header .mobile-menu-trigger span:after{
		content:'';
		position:absolute;
		left:0;
		width:100%;
		height:100%;
		background-color:#000000;
	}
	.header .mobile-menu-trigger span:before{
		top:-6px;
	}
	.header .mobile-menu-trigger span:after{
		top:6px;
	}
	.header .item-right{
		align-items:center;
	}

	.header .menu{
		position:fixed;
		width:320px;
		background-color:#ffffff;
		left:0;
		top:0;
		height:100%;
		overflow:hidden;
		transform:translate(-100%);
		transition:all 0.5s ease;
		z-index:1099;
	}
	.header .menu.active{
	   transform:translate(0%);	
	}
	.header .menu > ul > li{
		line-height:1;
		margin:0;
		display:block;
    padding:0px;
	}
	.header .menu > ul > li > a{
		line-height:50px;
		height:50px;
		padding:0 50px 0 15px;
		display:block;
		border-bottom:1px solid rgba(0,0,0,0.1);
    color:var(--BlackClr);
	}
  .header .menu > ul > li > a i img{
    max-height:unset;
  }
	.header .menu > ul > li > a i{
		position:absolute;
		height:50px;
		width:50px;
		top:0;
		right:0;
		text-align:center;
		line-height:50px;
		transform:rotate(0deg);
	}
	.header .menu .mobile-menu-head{
		display:flex;
		height:50px;
		border-bottom:1px solid rgba(0,0,0,0.1);
		justify-content:space-between;
		align-items:center;
		position:relative;
		z-index:501;
		position:sticky;
		background-color:#ffffff;
		top:0;
	}
	.header .menu .mobile-menu-head .go-back{
		height:50px;
		width:50px;
		border-right:1px solid rgba(0,0,0,0.1);
		cursor:pointer;
		line-height:45px;
		text-align:center;
		display:none;
	}
  .header .menu .mobile-menu-head .go-back img{
    height:15px;
  }
	.header .menu .mobile-menu-head.active .go-back{
		display:block;
	}
	.header .menu .mobile-menu-head .current-menu-title{
		color:var(--PrimaryClr);
	}
	.header .menu .mobile-menu-head .mobile-menu-close{
	    height:50px;
		width:50px;
		border-left:1px solid rgba(0,0,0,0.1);
		cursor:pointer;
		line-height:50px;
		text-align:center;
		color:#000000;	
		font-size:25px;
	}
	.header .menu .menu-main{
		height:100%;
		overflow-x:hidden;
		overflow-y:auto;
	}
	.header .menu > ul > li .sub-menu.mega-menu,
	.header .menu > ul > li .sub-menu{
		visibility:visible;
		opacity:1;
		position:absolute;
		box-shadow:none;
		margin:0;
		padding:15px;
		top:0;
		left:0;
		width:100%;
		height:100%;
		padding-top:65px;
		max-width:none;
		min-width:auto;
		display:none;
		transform:translateX(0%);
		overflow-y:auto;
		border: 0px!important;
	}

.header .menu > ul > li .sub-menu.active{
	display:block;
}
	@keyframes slideLeft{
		0%{
			opacity:0;
			transform:translateX(100%);
		}
		100%{
			opacity:1;
			transform:translateX(0%);	
		}
	}
	@keyframes slideRight{
		0%{
			opacity:1;
			transform:translateX(0%);
		}
		100%{
			opacity:0;
			transform:translateX(100%);	
		}
	}

	.header .menu > ul > li .sub-menu > ul > li > a,
	.header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a{
		display:block;
	}
	.header .menu > ul > li .sub-menu.mega-menu > .list-item > ul {
		margin-bottom:15px;
	}
	.menu-overlay{
		position:fixed;
		background-color:rgba(0,0,0,0.5);
		left:0;
		top:0;
		width:100%;
		height:100%;
		z-index:1098;
		visibility:hidden;
		opacity:0;
		transition:all 0.5s ease;
	}
	.menu-overlay.active{
	  visibility:visible;
	  opacity:1;	
	}

}

@media(max-width:600px){
	.btn-secondary-bg span.request-meeting-btn{padding: 0.4rem 1rem 0.53rem 1rem; font-size:12px;}
	.login-btn{border-color: #1C02A5!important;padding: 0.55rem 1rem 0.63rem 1rem;font-size:12px;}
}

/* .desktop-backdrop {z-index: 99; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; pointer-events: none; background: rgba(23, 10, 93, 0.26);}
.desktop-backdrop.active {opacity: 1; visibility: visible; pointer-events: all;}

@media (min-width: 992px) {
    .desktop-backdrop {display: block;}
} */

.icon-anim {
  animation: fullAnim 5s ease-in-out infinite;

  transform-origin: center;
  will-change: transform, opacity, filter;
}

@keyframes fullAnim {
  0% {
    transform: rotate(0deg) scale(0.6);
    opacity: 0.6;
    filter: drop-shadow(0 0 0 rgba(76, 59, 244, 0));
  }

  50% {
    transform: rotate(180deg) scale(1.1);
    opacity: 1;
    filter: drop-shadow(0 0 12px rgba(76, 59, 244, 0.6));
  }

  100% {
    transform: rotate(360deg) scale(0.6);
    opacity: 0.6;
    filter: drop-shadow(0 0 0 rgba(76, 59, 244, 0));
  }
}