/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.1.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


body{
	overflow-x: clip;
	text-rendering: auto !important;
	font-variation-settings: normal !important;
	font-synthesis: none !important;
}

@media (max-width: 768px) {
body > [data-elementor-post-type="page"]{
overflow-x: clip !important;
}
/*	[data-elementor-type="header"]{
  position:absolute;
  width: 100%;
}*/
}
body.page-id-3 {
  background-color: #f0f0f0;}
body {
transition: background-color 0.5s ease;
}
/* Ortak Değişkenler */
:root {
	--megamenu-site-logo: url('https://test.five.com.tr/wp-content/uploads/2024/11/yenilique-logo-white.svg');
	--megamenu-header-bg: transparent;
	--megamenu-sticky-bg: rgba(30, 10, 47, 0.5);
	--megamenu-sticky-border: #331b53;
	--megamenu-text-color: #F1E9FB;
	--megamenu-text-color-invert: #120F16;
	--megamenu-transition: all 0.7s ease-in-out;
	--megamenu-svg-invert: invert(1);
	--megamenu-bg-number-color: rgba(38, 22, 46, 0.5);
	--submenu-bg: rgba(30, 10, 47, 0.5);
	--shiny-button-bg: transparent;
	--shiny-button-bg-subtle: #331b53;
	--shiny-button-fg: #F1E9FB;
	--shiny-button-highlight: #9747ff;
	--shiny-button-highlight-subtle: rgba(185, 155, 224, 1);
	--sticky-header-radius: 0;
	--headermenu-headerdiv-height: auto;
	--headermenu-viewport-height: 0;
}
body.site-is-light {
	--megamenu-site-logo: url('https://test.five.com.tr/wp-content/uploads/2024/11/yenilique-logo-black.svg');
	--megamenu-header-bg: transparent;
	--megamenu-sticky-bg: rgba(255, 255, 255, 0.4);
	--megamenu-sticky-border: #b99be0;
	--megamenu-text-color: #120F16;
	--megamenu-text-color-invert: #F1E9FB;
	--megamenu-svg-invert: invert(0);
	--megamenu-bg-number-color: rgba(222, 205, 231, 0.5);
	--submenu-bg: rgba(237, 227, 246, 0.5);
	--shiny-button-fg: #120F16;
	--shiny-button-highlight: #9747ff;
	--shiny-button-bg-subtle: rgba(185, 155, 224, 0.4);
}

/*STICKY HEADER*/

.header-is-sticky, .header-is-hidden{
	--sticky-header-radius: 60px;
}

.header-is-sticky.showDropdown{
	--sticky-header-radius: 15px !important;
}

.headerdiv.showDropdown{
	background: var(--megamenu-sticky-bg);
    -webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.headerdiv{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
	width: 100%;
	height: var(--headermenu-headerdiv-height);
	max-width: 100%;
	margin: 0 auto;
	background: var(--megamenu-header-bg);
    -webkit-backdrop-filter: blur(0px);
	backdrop-filter: blur(0px);
	border-radius: var(--sticky-header-radius);
	border: 0px solid transparent;
	z-index: 100;
    transition: var(--megamenu-transition);
	overflow: hidden;
}

.headerdiv.header-is-hidden{
    top:0px;
	max-width: 1200px;
    margin: 0 auto;
    background: var(--megamenu-sticky-bg);
    -webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
    border-radius: var(--sticky-header-radius);
    border: 1px solid var(--megamenu-sticky-border);
    transform: translateY(-100%);
	transition: var(--megamenu-transition);
}

.headerdiv.header-is-sticky{
    top: 15px !important;
    max-width: 1200px;
    margin: 0 auto;
    background: var(--megamenu-sticky-bg);
    -webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
    border-radius: var(--sticky-header-radius);
    border: 1px solid var(--megamenu-sticky-border);
}

.headerdiv.header-is-sticky .headermenu-button,
.headerdiv.header-is-hidden .headermenu-button {
    padding: 10px 20px;
	align-content: center;
	transition: var(--megamenu-transition);
}

.headerdiv .headermenu-button {
	transition: var(--megamenu-transition);
}

.headerdiv.header-is-sticky,
.headerdiv.header-is-hidden {
    padding: 15px 40px;
	transition: var(--megamenu-transition);
}

@media (max-width: 768px) {
	.headerdiv{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 15px 20px !important;
	}
	.headerdiv .headerlogo{
		width: 80%;
	}
	.headerdiv .mobilemenubutton{
		width: 20%;
	}
	.headerdiv.header-is-sticky,
	.headerdiv.header-is-hidden{
        top: 0 !important;
        border-radius: 10px;
		padding: 10px 30px !important;
        max-width: 100%;
		width: auto;
    }
	.headerdiv.header-is-sticky{
		margin: 10px !important;
	}
	.mobileMenuOpen.headerdiv.header-is-sticky,
	.mobileMenuOpen.headerdiv.header-is-hidden{
		border-radius: 0px;
		margin:0 !important;
	}
	/* Base styles for .headerdiv with .header-is-sticky and .header-is-hidden */
.headerdiv.header-is-sticky:before,
.headerdiv.header-is-hidden:before {
    border-radius: 0px !important;
    mask-image: 
        conic-gradient(
            from calc(var(--gradient-angle) + 45deg),
            black,
            transparent 10% 40%,
            black
        ),
        linear-gradient(
            to bottom, 
            black 0%, 
            transparent 100%
        ),
        linear-gradient(
            to bottom, 
            black 0%, 
            transparent 40%,
            transparent 60%,
            black 100%
        ),
        linear-gradient(
            to right, 
            black 0%, 
            transparent 5%,
            transparent 95%,
            black 100%
        ) !important;
    mask-composite: intersect, intersect, add !important;
}

/* Overriding styles for .headerdiv when .mobileMenuOpen is added */
.mobileMenuOpen.headerdiv:before,
.mobileMenuOpen.headerdiv.header-is-sticky:before {
    mask-image: 
        conic-gradient(
            from calc(var(--gradient-angle) + 45deg),
            black,
            transparent 10% 40%,
            black
        ),
        linear-gradient(
            to bottom, 
            black 0%, 
            transparent 10%,
            transparent 70%,
            black 100%
        ),
        linear-gradient(
            to right, 
            black 0%, 
            transparent 5%,
            transparent 95%,
            black 100%
        ) !important;
    mask-composite: intersect, add !important;
	animation: gradient-angle 3s linear infinite;
	}
}

.headerdiv.header-is-sticky .shiny-button,
.headerdiv.header-is-hidden .shiny-button{
    border-radius: 30px;
}
.headerdiv.header-is-sticky:before,
.headerdiv.header-is-hidden:before{
    border-radius: var(--sticky-header-radius);
	mask-image: 
		conic-gradient(
    from calc(var(--gradient-angle) + 45deg),
    black,
    transparent 10% 40%,
    black
  ),
		linear-gradient(
    to bottom, 
    black 0%, 
    transparent 40%,
		transparent 60%,
    black 100%
  ),
		linear-gradient(
    to right, 
    black 0%, 
    transparent 5%,
		transparent 95%,
    black 100%
  );
	mask-composite:intersect, add;
}

.transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
}

:root { 
--color-card-1: #d09df2;
--color-card-2: #9df2eb;
--color-card-3: #f5e2a4;
--color-card-4: #d09df2;
--color-card-5: #9dcaf2;
--color-card-6: #f29dcc;
--color-bg-card: rgba(255, 255, 255, 0.2);
--color-bg-card-inner: rgb(41 27 41);
}

main {
position: relative;
}

.card {
 width: 40vw;
 max-width: 400px;
min-width: 266px;
aspect-ratio: 16/9;
font-size: 9px;
text-transform: uppercase;
padding: 5px;
display: grid;
grid-template-columns: 1fr 1fr;
border-radius: 10px;
position: relative;
align-items: stretch;
outline: 1px solid var(--color-card);
background: var(--color-bg-card);
grid-template-areas: 'card-img card-img' 'card-title card-meta' 'card-subtitle card-subtitle' 'card-desc card-desc';
}


.card:nth-child(1n) {
--color-card: var(--color-card-1);
}

.card:nth-child(2n) {
--color-card: var(--color-card-2);
}

.card:nth-child(3n) {
--color-card: var(--color-card-3);
}

.card:nth-child(4n) {
--color-card: var(--color-card-4);
}

.card:nth-child(5n) {
--color-card: var(--color-card-5);
}

.card:nth-child(6n) {
--color-card: var(--color-card-6);
}

.card > * {
background-color: var(--color-bg-card-inner);
}

.card__img {
grid-area: card-img;
background-size: cover;
background-position: 50% 50%;
aspect-ratio: 16/9;
max-width: 100%;
border-radius: 6px;
}

.card--rel .card__img {
aspect-ratio: 4 / 3;
filter: contrast(0.8);
}


.wrap {
position: relative;
/* min-height: 100vh; */
}

.wrap__inner {
position: relative;
perspective: 1100px;
}

.content {
width: 100vw;
position: relative;
transform-style: preserve-3d;
display: grid;
grid-template-areas: 'card';
grid-template-columns: 100%;
place-items: center;
}

.content .card {
grid-area: card;
background: rgba(132, 128, 143, 0.36);
}

/*@media screen and (min-width: 53em) {

.content {
  min-height: 100vh;
  justify-content: center;
  align-items: center;
}
.card-wrap {
  grid-template-columns: repeat(2, 300px);
}
}*/

/*IMAGES MARQUEE*/
.imgwrapper {
  height: auto;
  position: relative;
  margin: auto;
  transform: rotate(-2.5deg);
}

.marq-img {
  width: auto;
  max-height: 24vh;
  display: inline-block;
  margin-right: 10px;
  border-radius: 10px !important;
}

@media (max-width: 768px) {
.marq-img {
max-height: 16vh;
}
}

.marq-img.card2{
  border-radius: 10px !important;
}

.marquee-images {
  position: relative;
  white-space: nowrap;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.toright {
  justify-content: flex-start;
}
.toleft {
  justify-content: flex-end;
}

/*SERVICE IMAGES*/
.service-images{
  margin-left: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.service-image{
  object-fit: cover;
  width: 75% !important;
  height: 220px !important;
  top: 50%;
  position: absolute;
  border-radius: 20px !important;
  left: 50%;
  transform: translateX(-50%) translateY(-70%);
}

/*CLIENT LOGOS BG*/
.clients-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
}

.clients-logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  width: 100%;
  height: 50%;
}

.client-logo {
  width: 100%;
  height: 100px !important;
  object-fit: contain;
  padding: 10%;
  filter: invert(4%) sepia(4%) saturate(4993%) hue-rotate(224deg) brightness(3%) contrast(94%);
  opacity: 0.3;
}

.outline-container {
  position: absolute;
  font-size: 8em;
  font-weight: 900;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.outline-text {
  position: absolute;
  -webkit-text-stroke: 0.5px #b342ed;
  color: #94fff441;
  z-index: 2;
  transform-origin: center;
  opacity: 0.1;
}

/*SLIDES SERVICE ANIMATION*/
.slides {
  position: relative;
  height: 300px;
  margin: 0 auto;
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide {
  position: absolute;
  width: 300px;
  height: auto;
  display: block;
  object-fit: cover;
  opacity: 1;
  will-change: transform;
  border-radius: 10px !important;
  transform-origin: center center;
}

.slide2 {
  position: absolute;
  width: 600px;
  height: auto;
  display: block;
  object-fit: cover;
  opacity: 1;
  will-change: transform;
  border-radius: 10px !important;
  transform-origin: center center;
}

.card2 {
  padding: 6px;
backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
  outline: 1px solid var(--color-card);
  background: var(--color-bg-card);
/*
backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  outline: 1px solid #00000078;
  background: var(--color-bg-card);
*/
}

.card2:nth-child(1n) { --color-card: var(--color-card-1); }
.card2:nth-child(2n) { --color-card: var(--color-card-2); }
.card2:nth-child(3n) { --color-card: var(--color-card-3); }
.card2:nth-child(4n) { --color-card: var(--color-card-4); }
.card2:nth-child(5n) { --color-card: var(--color-card-5); }
.card2:nth-child(6n) { --color-card: var(--color-card-6); }

.card2 > * {
  background-color: var(--color-bg-card-inner);
}

.card_img2 {
  background-size: cover;
  background-position: 50% 50%;
  aspect-ratio: 16/9;
  max-width: 100%;
  border-radius: 6px !important;
}

/*SERVICES ANNUAL REPORTS*/
.animtext-container {
  position: relative;
  font-size: 18em;
  font-weight: 900;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  top: -80px;
}

.animtext {
  position: absolute;
  -webkit-text-stroke: 1px #b342ed;
  color: #f2ff9421;
  transform-origin: bottom center;
  top: -20px;
  translate: none;
  rotate: none;
  scale: none;
  transform: translate(0px, 0px);
  opacity: 0.1;
}

/*BACKGROUND CIRCLES*/
.animcontact-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.contactround {
  width: 100px;
  height: 100px;
  border: solid 0.5px #af0bd8;
  border-radius: 100%;
  color: aliceblue;
  position: absolute;
  left: 0;
  top: 700px;
  transform: translateX(-50%) translateY(-50%);
  opacity: 0;
filter: blur(15px);
-webkit-filter: blur(15px);
}

::selection {
color: white;
background: #9747FF;
}
.gradient-text-purple{
background: rgb(164,124,216);
background: linear-gradient(30deg, rgba(164,124,216,1) 0%, rgba(243,234,255,1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.gradient-purple{
background: rgb(114,66,177);
background: linear-gradient(40deg, rgba(114,66,177,1) 0%, rgba(217,188,255,1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.gradient-turquise{
background: rgb(87,172,195);
background: linear-gradient(40deg, rgba(87,172,195,1) 0%, rgba(187,233,245,1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.gradient-blue{
background: rgb(118,121,180);
background: linear-gradient(40deg, rgba(118,121,180,1) 0%, rgba(202,205,251,1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}


.gradient-pink{
background: rgb(186,102,179);
background: linear-gradient(40deg, rgba(186,102,179,1) 0%, rgba(238,158,231,1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}


.gradient-orange{
background: rgb(192,90,92);
background: linear-gradient(40deg, rgba(192,90,92,1) 0%, rgba(233,156,158,1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}


.gradient-yellow{
background: rgb(203,158,114);
background: linear-gradient(40deg, rgba(203,158,114,1) 0%, rgba(235,196,158,1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.gradient-green{
background: rgb(145,186,113);
background: linear-gradient(40deg, rgba(145,186,113,1) 0%, rgba(207,239,181,1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.gradient-blue2{
background: rgb(78,92,249);
background: linear-gradient(40deg, rgba(78,92,249,1) 0%, rgba(179,184,244,1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.gradient-red{
background: rgb(247,77,80);
background: linear-gradient(40deg, rgba(247,77,80,1) 0%, rgba(243,152,154,1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.basicbutton {
  position: relative;
font-weight:300 !important;
}

.basicbutton2 {
  position: relative;
  font-weight:450 !important;
}

.basicbutton *, #basicbutton *{
-webkit-transition: all .5s ;
  -moz-transition: all .5s ;
  -o-transition: all .5s ;
  transition: all .5s ;
font-weight: 100;
}
#basicbuttonround *, .basicbutton2 *{
-webkit-transition: all .5s ;
  -moz-transition: all .5s ;
  -o-transition: all .5s ;
  transition: all .5s ;
font-weight: 400;
}
.basicbutton:hover *, #basicbutton:hover *, #basicbuttonround:hover span, .basicbutton2:hover{
font-weight:500 !important;
transform: translateX(5px);
}

#basicbuttonround{
  font-size: 1.2em;
  font-weight: 400 !important;
  background: transparent;
  color: var( --e-global-color-235d328 );
  border: solid 0.5px var( --e-global-color-235d328 );
  border-radius: 10px;
  padding: 20px 30px;
}
@media (max-width: 768px) {
#basicbuttonround{
padding: 15px 20px;
}
}

.elementor-field{
background: #ffffff52 !important;
}
.elementor-field:focus{
background: #ffffff90 !important;
}

.servicesbutton{
-webkit-transition: all .3s ;
  -moz-transition: all .3s ;
  -o-transition: all .3s ;
  transition: all .3s ;
}

.servicesbutton:hover{
transform: translateX(5px);
filter: brightness(1.45);
opacity: 1 !important;
}

.elementor-field-group .elementor-field-textual:focus{
font-weight:400 !important;
}
.elementor-field-group .elementor-field-textual:not(:placeholder-shown){
font-weight:450 !important;
}

.elementor-field-group .elementor-field-textual:focus{
border-bottom: 2px solid !important;
  margin-bottom: -1px !important;
box-shadow: none !important;
}

input, textarea{
  transition:  0.4s ease-in-out !important;
}

input::placeholder, textarea::placeholder{
  font-size:14px !important;
font-weight:200;
}

.marquee-xl-text{
  display:flex;
  gap:100px;
  font-size: 12em;
  font-weight: 800;
  color:var( --e-global-color-235d328 );
  position: relative;
  white-space: nowrap;
}

.marquee-xl-text p {
  display: inline-block;
}


/*MOBILE MENU CSS*/

.mobilemenucontainer{
	height: 0;
	transition: var(--megamenu-transition);
}

.mobileMenuOpen .mobilemenucontainer{
	height: var(--headermenu-viewport-height);
}

.mobileMenuOpen.headerdiv{
	background: var(--megamenu-sticky-bg);
    -webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: var(--megamenu-transition);
}

#mobile-side-menu {
	position: relative;
	display:flex;
	gap:40px;
	justify-content: center;
	left: 0;
	right: 0;
	width: 100%;
	height: calc(100vh - 80px);
	padding:0;
	opacity: 1;
	pointer-events: inherit;
	transition: var(--megamenu-transition);
}

.mobile-menu-container {
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
	overflow-y: hidden;
  gap: 0;
  width: 100%;
  margin: 0 auto;
}
  
.mobile-menu-container a{
  width: 100%;
}

.menu-list-button {
  display: block;
  padding: 0;
  overflow: hidden;
  color: #120F16;
  width: 100% !important;
}

.menu-list-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 15px 0;
}

.mobile-menu-list-element {
  font-size: 2em;
	font-weight:800;
  margin: 0;
  color:var(--megamenu-text-color);
}

.presentation-menu-inner {
position: absolute;
top: 0;
width: 100%;
}

#mobile-submenus {
	position: absolute;
  width: 100%;
  height: 100vh;
  overflow: hidden; 
  z-index: 100;
  transform: translateX(100%);
	transition: var(--megamenu-transition);
}

  #presentation-menu-inner{
      display: none;
	  height: 100%;
	  overflow-y: auto;
      padding-top: 150px !important;
	  padding-bottom: 200px;
	  scrollbar-width: none !important;
  }
	#presentation-menu-inner::-webkit-scrollbar {
  		display: none !important;
	}


.mobile-menu-elements-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 50px;
  margin: 0 auto;
  width: 100%;
}
.menu-dropdown-button {
  position: relative;
display: block;
padding: 0px;
overflow: hidden;
color:white;
border-bottom: solid 1px;
}

.menu-dropdown-inner{
display: grid;
grid-template-columns: 1fr auto;
gap: 20px;
grid-auto-rows: 100px;
align-items: baseline;
overflow: hidden;
  }

#mobile-menu-toggle-button svg{
	filter:var(--megamenu-svg-invert);
	-webkit-filter:var(--megamenu-svg-invert);
}

/*SERVICES MENU CSS*/

#services-menu-inner {
    display: none;
  height: 100%;
  overflow-y: auto; 
  padding: 150px 2% 200px 0px;
  z-index: 100;
	scrollbar-width: none !important;
}
#services-menu-inner::-webkit-scrollbar {
  		display: none !important;
	}

.menu-services-button {
  position: relative;
display: block;
padding: 0px;
overflow: hidden;
border-bottom: solid var(--megamenu-sticky-border) 1px;
}

.menu-services-inner{
      display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	grid-auto-rows: 100px;
	align-items: baseline;
  text-align: end;
  overflow: hidden;
  }
.mobile-services-element {
  padding: 5px 15px;
  font-size: 1.7em;
  font-weight: 700;
  margin: 0;
  bottom: 0;
  align-self: end;
text-align: end;
  z-index: 1;
  color: var(--megamenu-text-color);
}




/* Mega Menu Ortak Stiller */
#mega-menu-presentation,
#mega-menu-services {
  position: relative;
  left: 0;
  right: 0;
  width: 100%;
	height:auto;
	padding:0;
  opacity: 0;
  pointer-events: none;
  transition: var(--megamenu-transition);
  z-index: 1;
}

.megamenucontainer{
	height:0;
	transition: var(--megamenu-transition);
	overflow:hidden;
}

/* Services Menu */

#mega-menu-services .mmenu-dropdown-inner {
  height: 75px;
  display: flex;
  align-content: end;
  justify-content: end;
}

#mega-menu-services .mobile-dropdown-element {
  font-size: 1.7em;
  font-weight: 700;
  text-align: end;
  padding-right: 20px;
}

#mega-menu-services .mmenu-dropdown-button {
  border-bottom: solid 1px var(--megamenu-text-color);
}

#presentation-mmenu-inner, #services-mmenu-inner {
  padding: 0 30px 30px;
  width: 100%;
}

/* Grid Containers */
.mega-menu-elements-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
	row-gap:10px;
  width: 100%;
  margin: 0 auto;
}

.mega-menu-services-elements-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 30px;
  margin: 0 auto;
  width: 100%;
}

/* Dropdown Button Styles */
.mmenu-dropdown-button {
  position: relative;
  display: block;
  color: var(--megamenu-text-color);
  border-bottom: solid 1px;
  overflow: hidden;
}

.mmenu-dropdown-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  grid-auto-rows: 80px;
  align-items: baseline;
  overflow: hidden;
}

/* Background Numbers */
.services-bg-number {
	display:none;
  position: absolute;
  top: -15px;
  left: 10px;
  color: var(--megamenu-bg-number-color);
  font-size: 7em;
  font-weight: 700;
  margin: 0;
}

/* Mobile Elements */
.mobile-dropdown-element {
  padding: 5px 15px;
  font-size: 1.4em;
  margin: 0;
  align-self: end;
  z-index: 1;
  color: var(--megamenu-text-color);
  transition: var(--megamenu-transition);
}

/* Right Icon */
.right-icon {
  position: relative;
  right: 15px;
  max-width: 120px !important;
  width: auto;
  height: auto;
  border-radius: 5px !important;
  align-self: end;
  transform: translateY(20%);
  justify-self: end;
  transition: var(--megamenu-transition);
}

/* Hover Effects */
.mega-menu-elements-container > a:hover .right-icon {
  transform: translateY(10%);
}

.mega-menu-elements-container > a:hover .mobile-dropdown-element {
  font-weight: 700;
  transform: translateX(10px);
}

.mega-menu-services-elements-container > a:hover .mobile-dropdown-element {
  transform: translateX(-10px);
}

/* Header Menu */
.headermenu-buttons-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.headermenu-button {
  position: relative;
  padding: 20px 20px 25px;
}

.headermenu-button a {
  color: var(--megamenu-text-color);
  text-decoration: none;
  font-size: 15px;
  font-weight: 450;
  white-space: nowrap;
  display: block;
  transition: var(--megamenu-transition);
}

.headermenu-button:hover a {
  font-weight: 600;
}

.headermenu-button svg {
  filter: var(--megamenu-svg-invert);
  -webkit-filter: var(--megamenu-svg-invert);
}

.langtoggle {
	position: relative;
	display: flex;
	transition: var(--megamenu-transition);
	overflow:hidden;
	padding-top:3px;
}

.langtoggle-button {
  position: relative;
  padding: 5px 0;
	transition: var(--megamenu-transition);
}

.langtoggle-button-dropdown{
	transition: var(--megamenu-transition);
 	width: 0;
	overflow:hidden;
	opacity: 0;
	visibility: hidden;
}
.langtoggle-button.active + .langtoggle-button-dropdown{
	width: 80px;
	opacity: 1;
	visibility: visible;
}
.langtoggle-button.active svg {
            transform: rotate(-90deg);
        }
.langtoggle-button-dropdown a{
	padding: 0 10px 0 10px;
}
.langtoggle-button-dropdown.langtoggleactive{
	width: 100px;
}

.langtoggle-button a {
  color: var(--megamenu-text-color);
  text-decoration: none;
  font-size: 14px;
  font-weight: 300;
  white-space: nowrap;
  display: block;
}

.langtoggle-button:hover a {
  font-weight: 400;
}

.langtoggle-button svg {
  filter: var(--megamenu-svg-invert);
  -webkit-filter: var(--megamenu-svg-invert);
	transition: var(--megamenu-transition);
}

/*----SHINY BUTTON----*/

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --gradient-angle-offset {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --gradient-percent {
  syntax: "<percentage>";
  initial-value: 5%;
  inherits: false;
}

@property --gradient-shine {
  syntax: "<color>";
  initial-value: white;
  inherits: false;
}

.shiny-button {
  --animation: gradient-angle linear infinite;
  --duration: 10s;
  --shadow-size: 2px;
  isolation: isolate;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  outline-offset: 4px;
  padding: 13px 25px 10px 25px;
  	font-weight: 450;
	font-family: "FK Grotesk Neue", sans-serif;
	font-size: 14px;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: 8px;
	transition: border-radius 2s !important;
  color: var(--shiny-button-fg) !important;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--shiny-button-bg-subtle);

  &::before,
  &::after,
  span::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    translate: -50% -50%;
    z-index: -1;
  }

  &:active {
    translate: 0 1px;
  }
}

/* Dots pattern */


/* Inner shimmer */
.shiny-button::after {
  --animation: shimmer linear infinite;
  width: 150%;
  aspect-ratio: 1;
  background: linear-gradient(
    -50deg,
    transparent,
    var(--shiny-button-highlight),
    transparent
  );
  mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  opacity: 0.6;
}

.shiny-button span {
  z-index: 1;

  &::before {
    --size: calc(100% + 1rem);
    width: var(--size);
    height: var(--size);
    box-shadow: inset 0 -1ex 1rem 2px var(--shiny-button-highlight);
    opacity: 0;
  }
  &::after {
    animation: var(--animation) var(--duration);
    content:'';
    pointer-events: none;
    position: absolute;
    z-intex:100;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    translate: -50% -50%;
    --size: calc(100% + 1rem);
    width: var(--size);
    height: var(--size);
    opacity: 1;
  border-radius: inherit;
  border: 2px solid transparent;
  border-image: 
    linear-gradient(var(--shiny-button-bg), var(--shiny-button-bg)) padding-box,
    conic-gradient(
        from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
        transparent,
        var(--shiny-button-highlight) var(--gradient-percent),
        var(--gradient-shine) calc(var(--gradient-percent) * 2),
        var(--shiny-button-highlight) calc(var(--gradient-percent) * 3),
        transparent calc(var(--gradient-percent) * 4)
    ) border-box;
  
  border-image-slice: 1;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  }
}

/* Animate */
.shiny-button {
  --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);
  transition: var(--transition);
  transition-property: --gradient-angle-offset, --gradient-percent,
    --gradient-shine;

  &,
  &::before,
  &::after {
    animation: var(--animation) var(--duration),
      var(--animation) calc(var(--duration) / 0.4) reverse paused;
    animation-composition: add;
  }

  span::before {
    transition: opacity var(--transition);
    animation: calc(var(--duration) * 1.5) breathe linear infinite;
  }
}

.shiny-button:is(:hover, :focus-visible) {
  --gradient-percent: 20%;
  --gradient-angle-offset: 95deg;
  --gradient-shine: var(--shiny-button-highlight-subtle);

  &,
  &::before,
  &::after {
    animation-play-state: running;
  }

  span::before {
    opacity: 1;
  }
}

@keyframes gradient-angle {
  to {
    --gradient-angle: 360deg;
  }
}

@keyframes shimmer {
  to {
    rotate: 360deg;
  }
}

@keyframes breathe {
  from,
  to {
    scale: 1;
  }
  50% {
    scale: 1.2;
  }
}
/*------*/


.headerdiv:before {
	content:'';
  --position: 2px;
  --space: calc(var(--position) * 4);
  width: 100%;
  height: 100%;
  background: radial-gradient(
      circle at 2px 2px,
      rgba(119, 116, 241, 1) calc(2px / 4),
      transparent 1px
    )
    padding-box;
  background-size: var(--space) var(--space);
  background-repeat: space;
  mask-image:
    conic-gradient(
    from calc(var(--gradient-angle) + 45deg),
    black,
    transparent 10% 40%,
    black
  ),
		linear-gradient(
    to bottom, 
    black 0%, 
		transparent 100%
  ),
		linear-gradient(
    to bottom, 
    black 0%, 
    transparent 40%,
		transparent 60%,
    black 100%
  ),
		linear-gradient(
    to right, 
    black 0%, 
    transparent 5%,
		transparent 95%,
    black 100%
  );
	mask-composite:intersect, intersect, add;
  border-radius: 0px;
  opacity: 1;
  z-index: -1;
	animation: gradient-angle 5s linear infinite;
}

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes gradient-angle {
  to {
    --gradient-angle: 360deg;
  }
}