/* Pingen Relaunch */

/* Start: wrapper for big screens 

@media screen and (min-width: 1280px){
			
			.wrapper, .g-main-nav-container {
				max-width: 1360px;
			}
			
			.nav-menu-container{
				width: 1360px;				
			}

}

/* End: wrapper for big screens */



			html {
        font-size: 18px;       
      }

			.w-webflow-badge {
				position: fixed !important;
				display: None !important;
				visibility: hidden !important;
			}
			
			.modal-form-checkbox{
			 margin: 0 1rem 0 -20px!important;
			}	

      /* Change placeholder color */
      .input-field.dark::placeholder {
        color: #00000094;
        /* Set your desired placeholder color */
        opacity: 1;
        /* Ensure full opacity for consistent styling */
        font-size: 17px;
        font-weight: 300;
      }
      /* Optional: Adjust for older browsers */
      .input-field.dark:-ms-input-placeholder {
        /* Internet Explorer */
        color: #00000094;
        font-size: 17px;
        font-weight: 300;       
      }
      .input-field.dark::-ms-input-placeholder {
        /* Edge */
        color: #00000094;
        font-size: 17px;
        font-weight: 300;        
      }
      /* Change placeholder color */
      .input-field-test-letter-address::placeholder {
        color: #00000094;
      }
      /* Optional: Adjust for older browsers */
      .input-field-test-letter-address:-ms-input-placeholder {
        /* Internet Explorer */
        color: #00000094;
      }
      .input-field-test-letter-address::-ms-input-placeholder {
        /* Edge */
        color: #00000094;
      }
      .checkbox input[type="checkbox"] {
        appearance: none;
        /* Resets default styles */
        -webkit-appearance: none;
        /* For Safari */
        -moz-appearance: none;
        /* For Firefox */
      }
      .checkbox input[type="checkbox"] {
        background-color: #FFFFFF66;
        border: 1px solid #fff;
        /* Custom border */
        cursor: pointer;
        /* Adds a pointer cursor */
        border-radius: 5px;
      }
      .checkbox input[type="checkbox"]:checked {
        background-color: #FFFFFF;
        /* Background when checked */
        border-color: #FFFFFF;
        /* Border when checked */
      }
      
      .checkbox-input.subject-check {
			    display: none;
			}
			
			.w-form-done{
				background-color: transparent;
			}		
			
			.w-form .button{
				padding: 0 24px;
			}
			
			.w-input:focus, .w-select:focus {
				 border-color: var(--pingen-blue);
			}	
			
			.w-input, .w-select, .input-field {
				color: #000;
			}	
			
			picture{
			 width: 100%;
			}	
			
			.test-letter-anchor {
			  display: block;
			  position: relative;
			  top: -200px; /* height of header or desired offset */
			  visibility: hidden;
			}
		


      
/* Start: Font clamps responsiveness */
      /* h1 */
      h1,
      .h1-md {
        font-size: clamp(2.5rem, 5vw + 1rem, 4rem);
        line-height: clamp(2.8rem, 6vw + 1rem, 4.5rem);
        /* More compact line-height for titles */
      }
      /* .h1-lg */
      .h1-lg {
        font-size: clamp(2.5rem, 6vw + 1rem, 5rem);
        line-height: clamp(2.8rem, 7vw + 1.1rem, 5.5rem);
        /* Adjusted line-height */
      }
      /* .h2-lg */
      .h2-lg {
        font-size: clamp(1.5rem, 4vw + 1rem, 3.5rem);
				line-height: clamp(2.2rem, 5vw + 1.1rem, 3.25rem);
      }
      /* .h2 */
      h2,
      .h2-md {
        font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
        line-height: clamp(2.2rem, 5vw + 1.1rem, 3.25rem);
      }
      /* .h2-sm */
      .h2-sm {
        font-size: clamp(1.5rem, 3vw + 0.5rem, 2rem);
        line-height: clamp(1.8rem, 4vw + 0.7rem, 2.5rem);
        /* Adjusted line-height */
      }
      /* .h3-x-lg */
      .h3-x-lg{
				font-size: clamp(1.5rem, 3vw + 0.1rem, 2.25rem);
				line-height: clamp(1.8rem, 4.5vw + 0.5rem, 2.5rem);
        /* Adjusted line-height */
      }
      /* .h3-lg */
      .h3-lg {
        font-size: clamp(1.5rem, 3vw + 0.5rem, 2rem);
        line-height: clamp(2rem, 4.2vw + 0.7rem, 2.25rem);
        /* Adjusted line-height */
      }
      /* .h3 */
      h3,
      .h3-md {
			    font-size: clamp(1.2rem, 2.5vw + 0.3rem, 1.5rem);
			    line-height: clamp(1.6rem, 2.8vw + 0.35rem, 1.75rem);
			}
      /* .h3-sm */
      .h3-sm {
        font-size: clamp(0.875rem, 2vw + 0.25rem, 1.25rem);
        line-height: clamp(1.2rem, 2.4vw + 0.35rem, 1.5rem);
        /* Adjusted line-height */
      }
      /* .h3-x-sm */
      .h3-x-sm {
    		font-size: clamp(0.875rem, 2vw + 0.25rem, 1.125rem);
        line-height: clamp(1.2rem, 2.1vw + 0.35rem, 1.4rem);
        /* Adjusted line-height */
      }
      .country-tabs-link {
        font-size: clamp(1.5rem, 4vw + 1rem, 4rem);
        line-height: 1.5;
      }
      /* .quote */
      .quote {
        font-size: clamp(1.5rem, 3vw + 0.25rem, 2rem);
        line-height: clamp(2.1rem, 4.2vw + 0.35rem, 2.5rem);
        /* Adjusted line-height */
      }
      /* .lead-special */
      .lead-special {
font-size: clamp(1.3rem, 2.6vw + 0.15rem, 2rem);
line-height: clamp(1.8rem, 3.8vw + 0.25rem, 2.6rem);
      }
      /* .lead */
      .lead, .static-link-hover, .timeline-text {
        font-size: clamp(1rem, 2.5vw + 0.25rem, 1.25rem);
        line-height: clamp(1.4rem, 3vw + 0.35rem, 1.75rem);
        /* Adjusted line-height */
      }
      /* p */
      p {
			    font-size: clamp(0.9rem, 2vw + 0.25rem, 1.125rem);
			    line-height: clamp(1.2rem, 2.8vw + 0.35rem, 1.5rem);
      }
      /* .text-sm */
      .text-sm {
        font-size: clamp(0.75rem, 1vw + 0.25rem, 0.9375rem);
        /* ~12px to 15px, 14px target */
        line-height: clamp(1.2rem, 1.5vw + 0.25rem, 1.5rem);
        /* ~17px to ~24px, 21px target */
      }
      /* .link */
      .link {
			    font-size: clamp(0.9rem, 2vw + 0.25rem, 1.125rem);
			    line-height: clamp(1.2rem, 2.8vw + 0.35rem, 1.5rem);
      }

      /* .extra-lg-text */
      .extra-lg-text {
        font-size: clamp(3rem, 9vw + 1rem, 8rem);
        line-height: 1.1;
      }
      /* .extra-lg-text-1 */
      .extra-lg-text-1 {
        font-size: clamp(5rem, 9vw + 1rem, 11.5rem);
        line-height: clamp(6.5rem, 13vw + 1.4rem, 15rem);
        /* Adjusted line-height */
      }
			 /* .extra-lg-text-2 */
			.extra-lg-text-2 {
			  font-size: clamp(8rem, 12vw + 1rem, 13rem);
			  line-height: clamp(8.5rem, 13vw + 1.4rem, 13.5rem); /* Adjusted line-height */
			}      
      /* .facts-sm */
      .facts-sm {
        font-size: clamp(2.5rem, 6vw + 0.25rem, 4rem);
        line-height: clamp(3.3rem, 7vw + 0.35rem, 4.5rem);
        /* Adjusted line-height */
      }
      /* .nav-menu-content-text-small */
      .nav-menu-content-text-small {
				font-size: clamp(0.75rem, 1.1vw + 0.3rem, 0.833rem);		
        line-height: 1.3;
      }
      .nav-menu-content-text-big {
        font-size: clamp(1rem, 2vw + 0.25rem, 0.9375rem);
        line-height: 1.2;
      } 
      
      .button-text{
        font-size: clamp(0.9rem, 2vw + 0.25rem, 1.125rem);
  			line-height: clamp(1.3rem, 2.8vw + 0.35rem, 1.5rem);
      }
      
      .button-text.small{
        font-size: clamp(0.5rem, 2vw + 0.25rem, 0.8rem);
  			line-height: clamp(1.3rem, 2.8vw + 0.35rem, 1rem);
      } 
      

      .text-code-style {
    		font-size: clamp(1.2rem, 3vw + 1rem, 2.3rem);
    		line-height: clamp(1rem, 5vw + 1.1rem, 3.25rem);
      } 
      
			.icon-lg {
			    width: auto;
			    height: clamp(50px, 8.5vw, 120px); /* scales between 50px on small screens up to 80px on desktop */
			    display: inline-block;
			}
			
			.icon-md {
			    width: auto;
			    height: clamp(40px, 7.5vw, 60px); /* scales between 40px  60px */
			    display: inline-block;
			}
			
			.icon-sm {
			    width: auto;
			    height: clamp(25px, 5vw, 35px); /* scales between 25px  35px */
			}  
			
			.margin-tp-1rem {
			  margin-top: clamp(0.6rem, 0.8vw + 0.3rem, 1rem);
			}
			
			.margin-tp-2rem {
			  margin-top: clamp(1.2rem, 1.6vw + 0.6rem, 2rem);
			}
			
			.margin-tp-3rem {
			  margin-top: clamp(1.8rem, 2.4vw + 0.9rem, 3rem);
			}
			
			.margin-tp-4rem {
			  margin-top: clamp(2.4rem, 3.2vw + 1.2rem, 4rem);
			}
			
			.margin-tp-5rem {
			  margin-top: clamp(3rem, 4vw + 1.5rem, 5rem);
			}
			
			.margin-bt-1rem {
			  margin-bottom: clamp(0.6rem, 0.8vw + 0.3rem, 1rem);
			}
			
			.margin-bt-2rem {
			  margin-bottom: clamp(1.2rem, 1.6vw + 0.6rem, 2rem);
			}
			
			.margin-bt-3rem {
			  margin-bottom: clamp(1.8rem, 2.4vw + 0.9rem, 3rem);
			}
			
			.margin-bt-4rem {
			  margin-bottom: clamp(2.4rem, 3.2vw + 1.2rem, 4rem);
			}
			
			.margin-bt-5rem {
			  margin-bottom: clamp(3rem, 4vw + 1.5rem, 5rem);
			}				        
      
/* End: Font clamps responsiveness */ 
     

      .marquee_item.active {
        color: #000;
      }
      
      .marquee_item.marquee-item-dark.active {
        color: #fff;
      }
      
      .marquee_text-item.active {
        opacity: 1;
      }
      
			.glow-big{
			background: radial-gradient(62% 67.9245283018868% at 35% 41.5%, rgba(0, 81, 255, 0) 0%, rgba(0, 153, 255, 0) 36%, rgba(0, 153, 255, 0) 64%, rgba(0, 128, 255, 0.15) 73%, rgb(0, 51, 255) 100%);
			mask: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 1) 80%) add;
			}
			
			.glow-big-top{
			background: radial-gradient(50% 50% at 50% 50%, #0095ff 0%, rgba(171, 171, 171, 0) 100%);
			left: calc(50.00000000000002% - min(1800px, 1440px) / 2);
			}
      
			.glow-big .glow-inside_1{
			background: radial-gradient(50% 32% at 50% 100%, #009dffbd 0%, rgb(0 120 255 / 20%) 53%, rgba(0, 119, 255, .15) 50%, rgba(0, 178, 255, 0) 100%);
			}
			
			.glow-big .glow-inside_2{
			/*-webkit-mask: radial-gradient(73% 93% at 48.5% 40.300000000000004%, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .3) 64%, rgba(0, 0, 0, 1) 100%) add;*/
			background: linear-gradient(180deg, rgba(0, 153, 255, 0) 0%, rgb(0, 73, 255) 100%);
			/*mask: radial-gradient(73% 93% at 48.5% 40.300000000000004%, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .3) 64%, rgba(0, 0, 0, 1) 100%) add;*/
			}
			
			.glow-big .glow-inside_3{
			/*-webkit-mask: radial-gradient(50% 131% at 48.699999999999996% 31.8%, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .32556) 64%, rgba(0, 0, 0, 1) 100%) add;*/
			    background: linear-gradient(180deg, rgba(0, 85, 255, 0) 0%, rgba(8, 0, 255, .7) 100%);
			/*mask: radial-gradient(50% 131% at 48.699999999999996% 31.8%, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .32556) 64%, rgba(0, 0, 0, 1) 100%) add;*/
			}
			
			.glow-big-bottom {
			    background: radial-gradient(ellipse 140% 110% at center, #0066ff 0%, #0066ffd4 10%, rgb(0 149 255 / 0) 41% 70%, rgba(171, 171, 171, 0) 70%);
			}
			
			.gradient-center-shade {
				background-image: radial-gradient(ellipse farthest-side at 50% 50%, var(--dark-blue), var(--pingen-blue) 0%, var(--black));
			}
			
			.gradient-center-shade, .process-numbers-bulb-gradient, .bulb-gradient-center {
			
			  /* Increase blur for softer edges */
			  filter: blur(60px);
			}			

      .button,
      .button-arrow-container,
      .button-text,
      .button-icon {
        transition: all 0.2s ease, visibility 0s;
      }
      .button:hover .button-icon {
        opacity: 100%;
        transform: rotate(0deg);
      }

      .timeline-item .timeline-year::after {
        content: '';
        height: 1px;
        background: black;
        position: absolute;
        left: 0;
        width: calc(100% + 3rem);
        z-index: -1;
      }
      .timeline-item.last .timeline-year::after {
        height: 0px;
      }
      
      
      .sticky-features_item-anchor.w--current {
        z-index: 1;
        opacity: 1;
        cursor: default;
        overflow: visible;
      }
      .sticky-features_item-anchor.w--current+div {
        opacity: 1;
        z-index: 10;
      }
      .sticky-features_item-anchor+.sticky-features_item-content {
        opacity: 0.2;
      }
 
      .line strong {
        color: white;
      }
      .line {
        color: transparent;
        --line-width: 100%;
        position: relative;
        background-color: #CCCCCC;
        background-image: linear-gradient(90deg,
            hsla(0, 0%, 0%, 1),
            hsla(0, 0%, 0%, 1) var(--line-width),
            hsla(0, 0%, 0%, 0) var(--line-width));
        background-clip: text;
      }
 
 			.lg-app-graphic.shine{
				-webkit-backdrop-filter: saturate(180%) brightness(150%) blur(10px);
		    backdrop-filter: saturate(180%) brightness(150%) blur(10px);
		    background-color: #ffffff1a;
		    border-top: 1px solid #ffffff1a;
		    border-left: 1px solid #ffffff1a;
		    border-right: 1px solid #ffffff1a; 			
 			}
 		


/* override css */

.flex-coming-soon{
		display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 0;
    -webkit-flex: 0 auto;
    -ms-flex: 0 auto;
    flex: 0 auto;
	}
	
.no-margin-bottom{
	margin-bottom: 0px;
	}

.salesforce-beta {
	width: 50px;
  height: 50px;
	text-align:center;
	background-color: #DEE8FD;
}


/*---- API Footer ------*/

.api-footer .footer-v1-payment-options{
	  border-top: 1px solid rgba(208, 211, 222, 0.2);
}

.api-footer .footer-v1-payment-options .payment-option{
		background-color: #ffffff94;
    border-radius: 10px;
}

.api-footer + .section.sub-footer{
	background-color: #000;
}

.api-footer .footer-title{
	  color: #fff;
}

.api-footer .nav-link.dropup{
	  background-color: transparent;
	  color: #fff;
}



/*---- Cookie Banner ------*/

.cc-color-override-977630225.cc-window {
    background-color: #fff!important;
    color: #7a8292!important;
    font-family: Roboto, sans-serif;
    border-radius: 20px 20px 0 0;
    bottom: 0!important;
    left: 0!important;
    width: 100%!important;
    box-shadow: -4px 0 20px 0 rgb(78 84 97 / 10%);
    padding: 20px!important;
    justify-content: center;
}

.cc-banner .cc-message {
    margin-right: 30px;
    flex: inherit!important;
}

.cc-color-override-977630225 .cc-link, .cc-color-override-977630225 .cc-link:active, .cc-color-override-977630225 .cc-link:visited {
    color: #2769f0!important;
}

.cc-color-override-977630225 .cc-btn {
    border-radius: 30px;
    background-color: #2769f0!important;
    color: #fff!important;
    font-weight:500;
}

/*---- Home Animation ------*/

/*---- Open Modal Animation ----*/

      .overlay {
        transition: opacity 0s 195ms, visibility 0s 195ms, z-index 0s 195ms;
      }
      .overlay.active {
        opacity: 1;
        visibility: visible;
        z-index: 99999;
        pointer-events: auto;
        transition: opacity 0s 0s, visibility 0s 0s, z-index 0s 0s;
      }
      .overlay .overlay-wrapper {
        transform: translate3d(-50%, 100%, 0);      	
        transition: opacity 375ms cubic-bezier(0, 0, .2, 1), transform 375ms cubic-bezier(0, 0, .2, 1);
      }
      .overlay.active .overlay-wrapper {
        transform: translate3d(-50%, 0, 0);
        transition: opacity 375ms cubic-bezier(0, 0, .2, 1), transform 375ms cubic-bezier(0, 0, .2, 1);
        padding: 8rem 0;
      }
      .overlay.active .modal-container-localization {
        display: inline-block;
      }
      
      .no-scroll {
			    overflow: hidden;
			    height: 100vh;
			}

/*---- End: Open Modal Animation ----*/

/*---- Start: Integration process numbers animation colors ----*/
      .process-number-tabs-container.highlight-color-light-blue .process-numbers-tabs-link.w--current .process-mumbers-tabs-title{
        color: var(--light-blue);
      }
      .process-number-tabs-container.highlight-color-light-blue .process-numbers-tabs-link.w--current .circle-numbers {
        background-color: var(--light-blue);
      }
     
      .process-number-tabs-container.highlight-color-light-violet-blue .process-numbers-tabs-link.w--current .process-mumbers-tabs-title{
        color: var(--light-violet-blue);
      }
      .process-number-tabs-container.highlight-color-light-violet-blue .process-numbers-tabs-link.w--current .circle-numbers {
        background-color: var(--light-violet-blue);
      }
      
      .process-number-tabs-container.highlight-color-light-violet-blue .process-numbers-bulb-gradient {  
      	background-color: var(--light-violet-blue);
    		background-image: radial-gradient(circle farthest-side at 50% 50%, var(--light-violet-blue), var(--light-violet-blue) 0%, var(--black));
    	}  

      .process-number-tabs-container.highlight-color-mint-green .process-numbers-tabs-link.w--current .process-mumbers-tabs-title{
        color: var(--mint-green);
      }
      .process-number-tabs-container.highlight-color-mint-green .process-numbers-tabs-link.w--current .circle-numbers {
        background-color: var(--mint-green);
      }
      
      .process-number-tabs-container.highlight-color-mint-green .process-numbers-bulb-gradient {  
      	background-color: var(--mint-green);
    		background-image: radial-gradient(circle farthest-side at 50% 50%, var(--mint-green), var(--mint-green) 0%, var(--black));
    	}  
    	
      .process-number-tabs-container.highlight-color-light-orange .process-numbers-tabs-link.w--current .process-mumbers-tabs-title{
        color: var(--light-orange);
      }
      .process-number-tabs-container.highlight-color-light-orange .process-numbers-tabs-link.w--current .circle-numbers {
        background-color: var(--light-orange);
      }
      
      .process-number-tabs-container.highlight-color-light-orange .process-numbers-bulb-gradient {  
      	background-color: var(--light-orange);
    		background-image: radial-gradient(circle farthest-side at 50% 50%, var(--light-orange), var(--light-orange) 0%, var(--black));
    	} 

/*---- End: Integration process numbers animation colors ----*/

/*---- Start: Big Country List Animatio ----*/

.lg-list-scroll-picture-container{
	display: block;
	position: static;
}

.lg-list-scroll-picture-img{
	height: auto!important;
	opacity: 100;
	
}

.lg-list-scroll-picture{
    background-color: transparent;
    border-radius: 0;
    width: 85%;
    position: relative;
    height: 100%;
    aspect-ratio: inherit; 
}

.lg-list-scroll-picture-img{
	position: sticky;
	top: 6rem;
	max-height: 81vh;
}

.lg-list-scroll-picture-img-container{
	position: static;
}

.lg-list-scroll-picture-img > div{
  display: none; /* hide all by default */
}

.lg-list-scroll-picture-img > div > picture > img{
 	aspect-ratio: 2 / 2.6;
}

.lg-list-scroll-picture-img > div.w--current{
  display: block; /* show current info */
}

/*---- Start: Map pin hover ----*/

.map-tooltip {
		opacity: 0;
    transform: translate3d(-50%, 100%, 0);
    transition: opacity 375mscubic-bezier(0, 0, .2, 1), transform 375mscubic-bezier(0, 0, .2, 1);
}

.pin:hover .map-tooltip{
    transform: translate3d(-50%, 0, 0);
    transition: opacity 375mscubic-bezier(0, 0, .2, 1), transform 375mscubic-bezier(0, 0, .2, 1);
    visibility: visible;
		opacity: 1;
}

.pulsing-map .pin-main {
  width: 15px;
  height: 15px;
  background: #057af8; /* use your pin color or image */
  border-radius: 50%;
  position: absolute;
  opacity: 1;
}




/*---- End: Map pin hover ----*/


/*---- Start: Dark Menu ----*/

html.dark .g-nav-wrapper-position{
	border-bottom: 1px solid #ffffff25;
}

html.dark .nav-menu-overlay {
	opacity: 0.6;
}

/*---- Start: Menu scroll ----*/


.g-nav.no-scrolling{
    background-color: rgba(255, 255, 255, 0);
    backdrop-filter: blur(0px);
}

.g-nav.dark-navbar.no-scrolling{
    background-color: rgba(0, 0, 0, 0);
}

.g-nav.scrolling{
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    transition: background-color 0.3sease-in-out, backdrop-filter 0.3sease-in-out;
}

.g-nav.dark-navbar.scrolling{
    background-color: rgba(0, 0, 0, 0.75);
}

.g-nav.open{
    background-color: #fff; 
    transition: background-color 0.3sease-in-out;
}

.g-nav.dark-navbar.open{
    background-color: #000; 
    transition: background-color 0.3sease-in-out;
}

.nav-link-dropdown-toggle.w--open .nav-link-dropdown-icon {
	  transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(180deg) skew(0deg, 0deg);
	  transform-style: preserve-3d;
}

/*---- End: Menu scroll ----*/

/*---- Start: Floating Items ----*/
	.floating-container.integration-floating div{
  	width: 85px;
    height: 85px;
 }
/*---- End: Floating Items ----*/

/*---- Start: How it works process sticky -----*/

      .sticky-features_item-anchor.w--current+div .hiw-text {
        height: auto;
      }
      .sticky-features_item-anchor.w--current+div .circle-numbers.light-blue {
        background-color: var(--light-blue);
      }
      .sticky-features_item-anchor.w--current+div .circle-numbers.post-yellow {
        background-color: var(--post-yellow);
      }
      .sticky-features_item-anchor.w--current+div .circle-numbers.mint-green {
        background-color: var(--mint-green);
      }

/*---- End: How it works process sticky -----*/

/*---- Start: Floating Items About ----*/

      .floating-container.about-floating .integration-floating div {
        width: 75px;
        height: 75px;
      }
      .floating-container.about-floating .floating-item-1 {
        width: 200px;
        height: auto;
      }
      .floating-container.about-floating .floating-item-2 {
        width: 110px;
        height: auto;
      }
      .floating-container.about-floating .floating-item-3 {
        width: 170px;
        height: auto;
      }
      .floating-container.about-floating .floating-item-4 {
        width: 200px;
        height: auto;
      }

/*---- End: Floating Items About ----*/

/*--- Start: Statistic progress counter animation -----*/

		.progress-container svg {
		  width: 100%;
		  height: 100%;
		  display: block;
		  transform: rotate(-90deg); /* Rotate the circle */
		 	overflow: visible;
		}

    .progress-bg {
      fill: none;
      stroke: #707070;
      stroke-width: 4;
    }

    .progress-ring {
      fill: none;
      stroke: var(--violet);
      stroke-width: 4;
      stroke-linecap: round;
      stroke-dasharray: 753.98;
      stroke-dashoffset: 753.98;
      transition: stroke-dashoffset 0.3s ease-out;
      filter: url(#glow);      
    }
    
		.progress-text.percentage::after {
		    content: "%";
		    margin-left: 2px;
		    font-size: 0.5em;
		}    

/*--- End: Statistic progress counter animation -----*/

/*--- Start: Feature card hover zoom -----*/

.feature-card-img-zoom .feature-card-square{
	overflow: hidden;
}

.feature-card-img-zoom .feature-card-square picture{
	transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-card-img-zoom:hover .feature-card-square picture{
	transform: scale(1.05);
}

/*--- End: Feature card hover zoom -----*/

/*--- Start: Video Popup -----------*/

.stroke-dotted {
    opacity: 0;
    stroke-dasharray: 1, 3.14;
    stroke-width: .0625rem;
    transform-origin: 50% 50%;
    -webkit-animation: spin 10s linear infinite;
    animation: spin 10s linear infinite;
    transition: opacity 1s ease, stroke-width 1s ease
  }
  .stroke-solid {
    stroke-dashoffset: 0;
    stroke-dasharray: 300;
    stroke-width: .1875rem;
    transition: stroke-dashoffset 1s ease, opacity 1s ease
  }
  .icon {
    transform-origin: 50% 50%;
    transition: transform .3s ease-out
  }
  .video-popup-toggle:hover .stroke-dotted {
    stroke-width: .25rem;
    opacity: 1
  }
  .video-popup-toggle:hover .stroke-solid {
    opacity: 0;
    stroke-dashoffset: 300
  }
  .video-popup-toggle:hover .icon {
    transform: scale(1.05)
  }
  .video-popup-toggle:hover .video-thumbnail {
    opacity: .8;
    transform: scale(1.05)
  }
  @keyframes spin {
    0% {
      transform: rotate(0deg)
    }
    to {
      transform: rotate(360deg)
    }
  }

/*--- End: Video Popup -----------*/

#gdpr{
	margin-right: .5rem;
}

/*--- Start: Feature-cards slider smooth hand scroll on mobile -----------*/

.w-slider {
  touch-action: pan-y; /* erlaubt nur vertikales Scrollen auf der Seite, Swipe bleibt aktiv */
}

/*--- End: Feature-cards slider smooth hand scroll on mobile -----------*/


@media screen and (min-width: 992px) {

/*---- Start: Menu Desktop ----*/

     .nav-link-dropdown-toggle,
      .nav-link,
      .nav-menu-content-link .nav-menu-content-text-big, .nav-menu-content-title-container .nav-menu-content-title {
        background-image: linear-gradient(#000, #000);
        background-size: 0% 2px;
        background-repeat: no-repeat;
        background-position: calc(100% - 10px) 100%;
        transition: background-size .4s cubic-bezier(.4, 0, .2, 1);
      }
      .nav-menu-content-link .nav-menu-content-text-big {
        background-position: 100% 100%;
      }
      .nav-link-dropdown-toggle.w--open,
      .nav-link-dropdown-toggle:hover,
      .nav-link:hover, .nav-link.active, .nav-link-dropdown-toggle.active  {
        background-position: calc(0% + 10px) 100%;
        background-size: calc(100% - 20px) 2px;
      }
      .nav-menu-content-link:hover .nav-menu-content-text-big, .nav-menu-content-link.active .nav-menu-content-text-big, .nav-menu-content-title-container:hover .nav-menu-content-title, .nav-menu-content-title-container.active .nav-menu-content-title {
        background-position: 0% 100%;
        background-size: 100% 2px;
      }
      .nav-menu-content-link:hover .nav-menu-content-text-small {
        color: #000;
      }
			.dark-navbar .nav-link-dropdown-toggle, .dark-navbar .nav-link{
				  background-image: linear-gradient(#fff, #fff);
			}
			
			.dark-navbar .w-dropdown-btn, .dark-navbar .w-dropdown-toggle, .dark-navbar .w-dropdown-link, .dark-navbar .nav-link{
				color: var(--white);
			}

/*---- End: Menu Desktop ----*/

/*---- About floating images on mobile ------*/
.floating-container.about .floating-item-4._2 {
    left:700px;
}

.floating-container.about .floating-item-1._2.padding-1rem.turquoise {
    top: 190px;
    left:380px;
}

.floating-container.about .floating-item-3._1{
	left: 735px;
}

.floating-container.about .floating-item-2._1{
	top: 770px;
	left: 651px;
}

.floating-container.about .floating-item-3._2{
	left: 380px;
}

.floating-container.about .floating-item-3._3{
	top: 780px;
	left: 140px;
}
/*---- End: About floating images on mobile ------*/
	
}

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

.side-feature.home-scroll-animation-container{
	display:none;
}

.process-text-container{
	width:100%;
}

.scroll-animation-text-container .side-media.only-mobile{
	display:block;
}

.scroll-animation-text-container .side-media.only-mobile img{
	width:100%;
	height:auto;
}

.scroll-animation-text-container .side-info.home-auto-letter-process{
	width:50%;
  padding-left: 5%;
  padding-right: 0;
}



.scroll-animation-text-container{
    flex-direction: row;
  }	

	
}


@media screen and (max-width: 767px){
	
.process-text-container {
    width: 100%;
}

.scroll-animation-text-container {
    width: 100%;
    flex-direction: column;
    order: 1;
    padding-top: 3em;
    padding-bottom: 3em;
    padding-left: 20px;
}
	
.subtitle, .subtitle.center {
    text-align: left;
}

.scroll-animation-text-container .side-info.home-auto-letter-process {
    width: 100%;
    padding-left: 0%;
}

/*---- Start: Floating Items ----*/
	.floating-container.integration-floating div{
  	width: 50px;
    height: 50px;
 }
/*---- End: Floating Items ----*/

/*---- Start: Floating Items About ----*/

.floating-container.about-floating .floating-item-1 {
  width: 130px;
  height: auto;
}
.floating-container.about-floating .floating-item-2 {
  width: 105px;
  height: auto;
}
.floating-container.about-floating .floating-item-3 {
  width: 125px;
  height: auto;
}
.floating-container.about-floating .floating-item-4 {
  width: 150px;
  height: auto;
}

/*---- End: Floating Items About ----*/

/*---- Remove fade animation for Text sections with sticky image ------*/
.sticky-features_item-anchor+.sticky-features_item-content {
  opacity: 1;
}

/*---- End: Remove fade animation for Text sections with sticky image ------*/

/*---- About floating images on mobile ------*/
.floating-container.about div {
    transform: scale(0.7);
}
/*---- End: About floating images on mobile ------*/


/*---- 404 Lottie animation mobile ------*/
.col-50.\34 04-lottie{
	margin: -15% 0 -15% -20%;
}
/*---- End: 404 Lottie animation mobile ------*/


}

/*---- Mobile Sign Up Button ------*/


@media screen and (max-width: 991px){
	
.register-desktop{
	display: none!important;
}

.register-mobile{
	display: flex!important;
}
	
}
#fullname {
	display:none;
}

}

@media (max-width: 1200px) and (min-width: 992px) {
  .app-graphic-background {
    min-height: auto;
    max-height: 450px;
  }
}

@media (min-height: 968px) {
	.post-hint-header{
		bottom: 15%;
    z-index: 100;
    left: 50%;
    transform: translateX(-50%);
	}
}