@font-face {
  font-family: 'Red Hat Display'; font-weight: 400; font-display: swap;
  src: url('/fonts/RedHatDisplay-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Red Hat Display'; font-weight: 500; font-display: swap;
  src: url('/fonts/RedHatDisplay-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Red Hat Display'; font-weight: 600; font-display: swap;
  src: url('/fonts/RedHatDisplay-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Red Hat Display'; font-weight: 800; font-display: swap;
  src: url('/fonts/RedHatDisplay-ExtraBold.woff2') format('woff2');  
}
@font-face {
  font-family: 'DM Sans'; font-weight: 400; font-display: swap;
  src: url('/fonts/DMSans-9ptRegular.woff2') format('woff2');
}

:root {
	/* Font Family */  
	--font-title: "Red Hat Display", sans-serif;
	--font-text: "DM Sans", sans-serif;
	--font-instrument: "Instrument Serif", serif;

	/* Color */
	--bg-black: #040311;
	--bg-white-weak: rgba(255, 248, 242, 0.4); /* #FFF8F2 40% */
	--bg-white-inactive: rgba(255, 248, 242, 0.5); /* #FFF8F2 50% */
	--bg-black-service-ovarlay: rgba(4, 3, 17, 0.7);
	--bg-mission: #F3EAFF;

	--text-white: rgba(255, 248, 242, 0.9); /* #FFF8F2 90% */
	--text-white-strong: #FFF8F2; /* #FFF8F2 100% */
	--text-white-fff: #FFFFFF;
	--text-pink: #E0437D;
	--text-mission: #250258;

	--cta-pink: #b60f60;
	--cta-hover: #6C0939;
	--button-dark-purple: #250258;  
	--button-dark-purple-hover: #a66bff;
	--button-dark-purple-active: #7000FF;
	--stroke: rgba(255, 248, 242, 0.2); /* #FFF8F2 20% */
	--transparent: transparent;
	--link-case: #FF89B4;

	/* Font Size */
	--font-size-body: 18px;
	--font-size-body-mobile: 0.89rem; /* 16px */
	--font-size-mini: 0.89rem; /* 16px */
	--font-size-h1: 3.56rem; /* 64px */
	--font-size-h1-sm: 2.67rem; /* 48px */
	--font-size-h1-mobile: 1.78rem; /* 32px */
	--font-size-h2: 2.22rem; /* 40px */
	--font-size-h2-mobile: 1.33rem; /* 24px */
	--font-size-h3: 1.78rem; /* 32px */
	--font-size-h3-mobile: 1.33rem; /* 24px */
	--font-size-h4: 1.33rem; /* 24px */
	--font-size-h4-mobile: 1.11rem; /* 20px */
	--font-size-menu: var(--font-size-body);
	--font-size-footer-menu: 1.11rem; /* 20px */

	--font-size-cta-2-extra-large: 1.33rem; /* 24px */
	--font-size-cta-extra-large: 1.11rem; /* 20px */
	--font-size-cta-extra-large-mobile: 0.89rem; /* 16px */
	--font-size-cta-medium: var(--font-size-body);
	--font-size-cta-small: 0.89rem; /* 16px */
	--font-size-cta-mini: 0.78rem; /* 14px */

	/* Line Height */
	--body-line-height: 1.44; /* 26px */
	--h1-line-height: 1.17; /* 75px */ 
	--h2-line-height: 1.25; /* 50px */
	--h4-line-height: 1.17; /* 28px */

	/* Font Weight*/
	--weight-normal: 400;
	--weight-medium: 500;
	--weight-semibold: 600;  

	/* Letter Spacing */
	--letter-spacing-body: 0em;
	--letter-spacing-h1: -0.01em;

	/* Page Size */
	--container-width: 1440px;

	/* Padding */
	--padding-bottom-section: 10.75rem; /* 172px */
	--padding-bottom-section-mobile: 5rem; /* 80px */ 
	--padding-container: 100px;
	--padding-container-extra: 50px;
	--padding-container-mobile: 30px;
	--padding-cta-extra-large: 16px 30px;
	--padding-cta-large: 12px 22px;
	--padding-cta-medium: 13px 20px;
	--padding-cta-small: 10px 20px;
	--padding-cta-mini: 6px 12px;
	--padding-cta-menu: 10px 24px;

	/* Margin */
	--margin-top-main: 155px;
	--margin-top-main-mobile: 120px;
	--margin-bottom-h1: 3.9rem; /* 62px */
	--margin-bottom-h1-mobile: 2rem; /* 32px */
	--margin-bottom-h2: 2rem; /* 42px */

	/* gap */
	--gap-mobile: 2rem;

	/* Rounded Corder */
	--border-radius-button: 50px;
	--border-radius-div: 25px;
	--border-radius-div-mini: 20px;
}

/* General Styles */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
	background: var(--bg-black);
	color: var(--text-white);
	font-family: var(--font-text);
	font-size: var(--font-size-body);
	line-height: var(--body-line-height);
	font-weight: var(--weight-normal);
	letter-spacing: var(--letter-spacing-body);
	scroll-behavior: smooth;
	overflow-wrap: normal;
	-webkit-text-fill-color: inherit;
	background-clip: border-box;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
	color: var(--text-white-strong);
	font-weight: var(--weight-semibold);
}
h1 {
  font-size: var(--font-size-h1);
	line-height: var(--h1-line-height);
	letter-spacing: var(--letter-spacing-h1);
	margin: 0 0 var(--margin-bottom-h1) 0;
	font-weight: var(--weight-medium);
}
h2 {
  font-size: var(--font-size-h2);
	line-height: var(--h2-line-height);
	margin: 0 0 var(--margin-bottom-h2) 0;
}
h3 { font-size: var(--font-size-h3); }
h4, .project-title, .testimonials h3 {
  font-size: var(--font-size-h4);
	line-height: var(--h4-line-height);
}
a { color: inherit; text-decoration: none; }
:where(a, button, [role="tab"]):focus-visible {
  outline: 2px solid yellow;
  outline-offset: 2px;
}
ul, li { list-style: none; }
header, section, footer, aside, nav, main, article {
	display: block;
}
button, input, optgroup, select, textarea {
	color: inherit; font: inherit; margin: 0;
}
button, .button, .button-primary {
	cursor: pointer;
	border-radius: var(--border-radius-button);
	background: var(--cta-pink);
	border: 2px solid var(--cta-pink);
	color: var(--text-white-strong);
	font-family: var(--font-title);
	font-size: var(--font-size-cta-medium);
	padding: var(--padding-cta-medium);
	transition: background-color 1s ease, border-color 1s ease, color 1s ease;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2.5px 9.5px 0 rgba(0, 0, 0, 0.25);
}
:is(button, .button, .button-primary):hover, :is(button, .button, .button-primary):focus-visible {
	background: var(--cta-hover);
	border-color: var(--cta-hover);
}
.button-secondary {
	background: var(--transparent);
	border-color: var(--text-white-strong);
}
.button-secondary:hover, .button-secondary:focus-visible {
	background: var(--text-white-strong);
	border-color: var(--text-white-strong);
	color: var(--bg-black)
}
.button-large, .button-extra-large {
	font-family: var(--font-title);
	padding: var(--padding-cta-large);
	font-weight: var(--weight-medium);
	border-width: 2px;
}
.button-extra-large.button-secondary {
	background-color: var(--transparent);
	border-color: var(--cta-pink);
}
.button-extra-large.button-secondary:hover, .button-extra-large.button-secondary:focus-visible {
	background-color: var(--cta-pink);
	color: var(--text-white);
}
.button-extra-large {
	font-size: var(--font-size-cta-extra-large);
	padding: var(--padding-cta-extra-large);
}
.button-small {
	font-size: var(--font-size-cta-small);
}
.button-mini {
	font-size: var(--font-size-cta-mini);
}
.button-purple {
	background: var(--button-dark-purple);
	border-color: var(--button-dark-purple);
}
.button-purple:hover, .button-purple:focus-visible {
	background: var(--button-dark-purple-hover);
	border-color: var(--button-dark-purple-hover);
}
header, section, footer{
	width: 100%;
	display: block;
	padding-bottom: var(--padding-bottom-section);
}
.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 var(--padding-container);
	box-sizing: border-box;
	display: block;
}
.only-mobile { display: none; }
.sr-only {
	position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Header Styles */
header {
	z-index: 999;
	width: 100%;
	position: fixed;
	top: 0;
	padding:0;
	padding-bottom: 10px;
	transition: background-color 0.3s ease;
	transition: transform 0.3s ease-in-out;
}
header .container { padding: 0 var(--padding-container-extra); }
#logo { margin-top: 10px;}
header.hidden { transform: translateY(-100%); }
header.hidden .dropdown { top: -999px}
header.scrolled, header.scrolled .dropdown  { background-color: var(--bg-black); }
.header-wrapper {
	justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}
#logo {width: 73px; height: 53px}
.no-scroll {
  overflow: hidden;
}
.nav-menu {
	float: right;
  position: relative;
}
.nav-menu-ul {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  display: flex;
}
.nav-item, .lang-current {
  padding: 0;
	position: relative;
	display: inline-block;
	height: 30px;
	overflow: hidden;
	position: relative;
	margin: 36px 14px 37px 14px;
}
.nav-item a { top: 0; left: 0; }
.nav-item span, .lang-current {
	display:block;
  padding: 4px;
}
.nav-item b {
	display:inline-block;
	transition: transform 0.4s ease;
	font-weight: var(--weight-medium);
}
.nav-item a:hover span:first-child b {
	transform: translateY(-32px);
}
.nav-item a:hover span:last-child b {
	transform: translateY(-32px);
}
.nav-link {
	font-family: var(--font-title);
	font-size: var(--font-size-menu);
	font-weight: var(--weight-semibold);
	color: var(--text-white-strong);
	margin-left: 0;
	margin-right: 0;
	padding: 5px 0; 
	text-decoration: none;
}
.current-page, .current-page b, .dropdown .current-page b,  #case-dropdown.current-page  {
	font-weight: 800;
}
.langs {
	margin-left:10px;
	position:relative
}
.langs span {
	font-size: 16px;
	font-family: var(--font-title);
	font-weight: var(--weight-semibold);
	margin-right: 6px;
	margin-left: 6px; 
}
.lang-current {
	color: #FF5E99;
	display:inline-block;
	padding-top: 6px
}
.lang-divider {
	background-color: var(--text-white);
	width: 1px;
	height: 31px;
	position: absolute;
	top: 38px;
	left: 39px;
}
.div-en {
	left: 44px
}
.lang-l-a, .lang-r-a {
	padding-top: 14px
}

/*Dropdown start*/
.has-dropdown {
  position: relative;
}
.nav-item {
  position: relative;
  margin: 24px 14px 36px;
	overflow:visible
}
.nav-item a {
  display: block;
  height: 36px;
  overflow: hidden;
}
.dropdown {
  position: absolute;
  top: 100%;
  left: -20px;
  display: block;
  padding: 10px 20px;
  list-style: none;
  min-width: 180px;
	opacity: 0;
	transform: translateY(-40px);
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
	z-index: 9999;
}
#case-dropdown, #case-dropdown:hover, #case-dropdown:focus-visible {
	background: none;
	border: none;
}
#menu-case:hover .dropdown {
	opacity:1;
	transform: translateY(0);
  pointer-events: auto;
}
.dropdown li {
	padding: 2px 0;
}
.dropdown li a {
  display: block;
  padding: 0;
  white-space: nowrap;
	margin: 4px 0;
}
.nav-link-dropdown:hover {font-weight: 800;}
.has-dropdown:hover .dropdown {
  display: block;
}
#menu-case {
	padding-right: 5px;
}
#case-dropdown {
	margin-top: -4px;
	padding-left: 4px;
	padding-right: 22px;
	font-weight: var(--weight-medium);
}
#case-dropdown::after {
	position: absolute;
	content: "";
	width: 10px;
	height: 10px;
	top: 18px;
	right: 4px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
	transition: transform 0.3s ease;
}
#case-dropdown:hover::after, #menu-case:hover #case-dropdown::after, 
.dropdown-open #case-dropdown::after, #case-dropdown .dropdown-open #case-dropdown::after {
	transform: translateY(-50%) rotate(-135deg);
	top: 86%;
}
.langs {
	display:flex
}
#to-en, #to-sv {padding: 0}
body:not([data-current-page="home"]) .dropdown
{
	background-color: var(--bg-black);
}

/* Dev code to show the dropdown always 
.dropdown {opacity: 1; transform: translateY(0); pointer-events: auto;}
*/
/*Dropdown end*/


/* Hamburger Menu */
.hamburger-menu {
	display: none;
	flex-direction: column;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 10px;
	z-index: 1000;
	transition: all 0.3s ease;
}
.hamburger-menu:hover {
	background-color: transparent;
}
.hamburger-menu.active {
	transform: translateY(2px);
}
.hamburger-line {
	width: 28px;
	height: 2px;
	background-color: var(--text-white);
	margin: 4px 0;
	transition: all 0.3s ease;
}
.hamburger-menu.active .hamburger-line:nth-child(1) {
	transform: rotate(45deg) translate(8px, 8px);
}
.hamburger-menu.active .hamburger-line:nth-child(2) {
	opacity: 0;
}
.hamburger-menu.active .hamburger-line:nth-child(3) {
	transform: rotate(-45deg) translate(6px, -6px);
}
.nav-menu {
	position: relative;
}
/* main */
main {
	margin-top: var(--margin-top-main);
}
main.no-margin-top {
	margin-top: 0;
}

/* Footer Section */
footer {
	padding-bottom: var(--padding-container);
	color: var(--text-white-strong)
}
.go-top {
	position: fixed;
	bottom: var(--padding-container-extra);
	right: var(--padding-container-extra);
	z-index: 99;
	padding: 15px 14px 13px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 2s ease; 
}
.go-top img {width: 20px; height:20px}
.go-top.show {
	opacity: 1;
	visibility: visible;
}
footer .container {
	padding: 0 var(--padding-container-extra);
}
.footer-top {
	padding: 0 0 64px 0;
	border-bottom: 1px solid var(--stroke);
}
.footer-top img {
	width: 100%;
	height: auto;
}
.footer-top p {
	float: right;
	font-family: var(--font-title);
	color: var(--text-white-strong)
}
.footer-top span {
	display: inline-block;
	width: 10px;
	height: 10px;
	background-color: var(--cta-pink);
	border-radius: 50%;
	margin: 0 8px;
	animation: blink 3s infinite;
}
@keyframes blink {
  0% { opacity: 1 }
  50% { opacity: 0 }
  100% { opacity: 1 }
}
.footer-bottom {
	padding: 40px 0 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 110px;
}	
footer li a {
	border-bottom: 1.5px solid var(--transparent);
}
footer li a:hover {
	border-bottom: 1.5px solid var(--text-white);
}	
.footer_left {
	flex: 1;
	padding-top: 26px;
}
address { font-style: normal; }
address p:last-child { opacity: 0.8 }
.footer_left p { padding-bottom: 10px; }		
.footer_left a { font-weight: var(--weight-medium); }
.footer_right {
	display: flex;
	gap: 110px;
	font-size: var(--font-size-footer-menu);
	font-weight: var(--weight-medium);
	font-family: var(--font-title);
}
.footer_right li { opacity: 0.8; }
.footer_title { color: var(--text-pink);}
.footer_right li a {
	padding-top: 34px;
	display: inline-block;
}
.copyright {
	font-size: var(--font-size-mini);
	opacity:0.5;
}

/* Hero Section */
.hero {
	height: 100vh;
	position: relative;
	padding: 0;
}
.video-container{
	width: 100%;
	margin: 0 auto;
	height: 100vh;
	padding: 0;
}
.video-container video{
	width: 100%;
	height: 100vh;
	object-fit: cover;
} 

/* Hide video play icon in iPhone */
video::-webkit-media-controls {
  display: none !important; opacity: 0; 
}
video::-webkit-media-controls-start-playback-button {
  display: none !important;
}
.video-container video {z-index: 0;}
.hero-video-overlay {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100vh;
	background: rgba(0, 0, 0, 0.6);
	z-index: 1;
}
.hero h1 {
	text-shadow: 
		0px 0px 40px var(--bg-black), 
		0px 0px 40px var(--bg-black), 
		0px 0px 40px var(--bg-black);
}

@media screen and (max-width: 1400px) and (min-width: 991px){
	.hero h1 {font-size: 2.5rem}
	.hero-texts {max-width: 700px !important}
}

.hero-content {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	padding: var(--padding-container);
	width: 100%;
	max-width: var(--container-width);
	height: 100vh;
	z-index:2;
}
.hero-wrapper {
	position:relative;
	height: 100%; width: 100%;
}
.hero-texts {
	max-width: 956px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	height:100%
}
.hero-buttons {
	display: flex;
	gap: 14px;
}	
.hero-button1 {
	padding: 0 14px 0 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}
.hero-buttons .button-extra-large.button-secondary {
	background-color: var(--bg-black-service-ovarlay);
}
.hero-buttons .button-extra-large.button-secondary:hover {
	background-color: var(--cta-pink);
}
.text-vertical {
	color: var(--text-white-strong);
	writing-mode: vertical-rl;
	text-orientation: upright;
	position:absolute;
	bottom: 124px;
	right: -40px;
}
.hero-button1 img {width: 60px; height: 35px}
/* Logo Scroll */
.logo-scroll .container { padding: 0 var(--padding-container-extra); }
.logo-scroll {
	padding: var(--padding-container-extra) 0 var(--padding-container) 0;
	width: 100%;
}
.slider-container {
	width:100%;
	overflow: hidden;
}
.logo-slider {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 60px;
	flex-wrap: nowrap;
	scroll-behavior: smooth;
	animation: slideLogos linear infinite;
	width: max-content;
}
@keyframes slideLogos {
	0% {transform: translateX(0);}
	100% {transform: translateX(-50%);}
}
.logo-slider img {
	flex-shrink: 0;
	min-width: auto;
	max-width: 150px;
	max-height: 150px;
	height: auto;
}
.logo-slider.paused {
	animation-play-state: paused;
}

/* Slogan  */
.slogan {
	padding-bottom: 70px;
	color: var(--text-white-strong);
}
.slogan .container {
	display: flex;
	flex-direction: row;
	align-items: start; 
	gap: 24px;
	justify-content: space-between;
}
.slogan-content { min-width: 300px }
.slogan-content h2 {
	font-size: var(--font-size-mini);
	font-weight: var(--weight-medium);
	margin-bottom: 0
}
.image_owner { 
	margin: 0 0 6px -2px; 
	width: 122px;
	height: 70px
}
.slogan-text-right { max-width: 690px; }
.slogan-text-right p {
	font-family: var(--font-title);
	font-size: 32px;
	font-weight: var(--weight-medium);
	max-width: 100%;
	padding-bottom: 50px;
}
.slogan_word {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transition: opacity 0.4s ease, filter 0.4s ease;
}
.slogan_word.active {
  opacity: 1; filter: blur(0);
}
.slogan_word.inactive {
  opacity: 0;
  filter: blur(6px);
}
.text-int {color: rgb(255, 248, 242, 0.5);}
.slogan .button { float: right; }
/* fade-in-blur-slogan */
.slogan-text-right .fade-in-blur-slogan {
	display: inline-block;
	white-space: normal;
	overflow: hidden;
	max-width: 0;  
	max-height: 280px;    
	filter: blur(8px);
	opacity: 0;
	transition: max-width 1s ease, opacity 1s ease, filter 1s ease;
}
.fade-in-blur-slogan.animate {
	max-width: 100%;      
	filter: blur(0);
	opacity: 1;
}

/* services_cards Section (Home) */
.three-cards-services_cards {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	gap: 30px;
}
.card-services_cards {
	border-radius: var(--border-radius-div);
	padding: 20px 20px;
	width: 33.3%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	box-sizing: border-box;
	height: 403px;
	background-size: cover;
	overflow: hidden;
	cursor: pointer;
	transition: .6s ease;
	position: relative;
}
.card-services_cards h3 { z-index: 1 }
.services_cards_overlay { opacity: 0}
.card-services_cards:hover .services_cards_overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: var(--bg-black-service-ovarlay);
	z-index: 0;
	opacity: 1;
}
.card-wrapper-services_cards {
	display: flex;
	flex-direction: column;
}
.card-detail-services_cards {
	display: flex;
	flex-direction: column;
	gap:26px;
	height: 0;
	opacity: 0;
	transition: all 1s;
}
.card-services_cards:hover { width: 500px; }
.card-services_cards:hover .card-detail-services_cards {
	opacity: 1;
	transform: translateY(0);
	height: auto;
}
.card-detail-services_cards .button { width: fit-content; }
.card-services_cards p { padding-top: 16px; }	

/* Service Cards Config */
.card-web-services_cards { background-image: url(../img/laptop.webp)}
.card-ux-services_cards { background-image: url(../img/man.webp)}	
.card-ui-services_cards { background-image: url(../img/aurola.webp)}
.services_cards_overlay {	transition: opacity 1s ease-out} /* Dark Background Speed */
.card-detail-services_cards { transition: all 1s} /* Content Speed */
.card-services_cards { transition: .6s ease;} /* Card Opening Speed */

/* Projects Section */
.projects .container{
	display: flex;
	justify-content: space-between;
	position: relative;
	gap:40px;
	color: var(--text-white-strong);
}
.project-left {
	max-width: 316px;
	position: relative;
}
.project-right { max-width: 702px; }
.projects-container { 
	position: sticky;
	top: 50px
}
.project-texts {
	display: flex;
	flex-direction: column;
	padding: 28px 0;
	border-bottom: 1px solid var(--stroke);
}
.project-texts:first-child { padding-top: 0; }
.project-texts:last-child { border-bottom: none; }
.project-title { cursor: pointer; }
.project-link {
	color: var(--text-pink);
	cursor: pointer;
	font-weight: var(--weight-semibold);
}
.project-link:hover {
	color: var(--text-pink);
	text-decoration: underline;
}
.project-detail {
	display: flex;
	flex-direction: column;
	gap: 16px;
	overflow: hidden;
	transition:
		max-height 1s ease, /* Speed to open the accordion */
		opacity 1s ease,
		transform 1s ease;
	max-height: 0;
	opacity: 0;
	transform: translateY(-4px);
}
.project-title {
	color: var(--text-white-strong);
	opacity: 0.5
}
.project-texts.active .project-title { opacity: 1 }
.project-detail p {
	padding-top: 16px;
	font-family: var(--font-title);
}
.project-texts.active .project-detail {
  max-height: 500px; 
  opacity: 1;
  transform: translateY(0);
}
.project-right img {
	width: 100%;
	height: auto;
	border-radius: var(--border-radius-div-mini);
	max-width: 680px;
}
.project-image-wrapper {
  display: none;
  position: relative;
}
.zoom-button {
  position: absolute;
  background: var(--bg-black);
  border: none;
  cursor: pointer;
  right: 10px;
  top: 15px;
	width: 70px;
	height: 56px;
}
.zoom-button img {
	width: 30px;min-width: 30px;max-width: 30px;
	height: 30px;min-height: 30px;max-height: 30px;
}
.play-button:hover img { transform: scale(1.2);}    
.project-image-wrapper.active { display: block; }
.modal { 
	display:none;
  position: fixed;
  width: 100%; height: 100vh;
  top: 0; left: 0;
  z-index:9999;
  background: var(--bg-black);
  justify-content: center;
  align-items: center;
}
.modal img, .case-image .modal img {
	max-width: 100%
}
.modal.is-open { display:block }
.modal-content {
	width:100%;
	height: 100%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow-y: auto;
}
.modal-content .close-button {
	float: right;
	background-color: var(--bg-black);
	border: none;
	color: var(--text-white);
	font-size: var(--font-size-h4);
	font-family: var(--font-title);
	cursor: pointer;
	padding: 10px 20px;	
	position:absolute;
	top: 70px;
	right: 70px;
	font-weight: var(--weight-medium)
}
.modal-image {
	position: relative;
	width: 100%;
	max-width: var(--container-width);
	max-height: 100%;
	border-radius: var(--border-radius-div);
	padding: var(--padding-container-extra);
}
.modal-image img {
	width: 100%;
	height: auto;
	max-width:100%;
	max-height: 100%;
	margin: 0 auto;
	border-radius: var(--border-radius-div);
}

/* Testimonials Section */
.testimonials .container {
	display: flex;
	gap: 52px;
	justify-content: space-between;
}
.testimonials-texts {
	width: 33.3%;
	max-width: 314px;
	display: flex;
	flex-direction: column;
}
.testimonials-center {
	width: 33.33%;
	max-width: 406px;
	background-image: url(../img/testimonial_anna.webp);
	min-height: 210px;
	background-position: center top;
	background-size: cover;
	border-radius: var(--border-radius-div-mini);
	display: flex;
	align-items: flex-end;
	padding:20px;
}
.testimonials-pink {
	color: var(--text-pink);
	font-weight: var(--weight-medium);
	font-size: 20px;
	font-family: var(--font-title);
	padding-bottom: 12px
}
.testimonials-right {
	width: 33.33%;
	display: flex;
	flex-direction: column;
	gap: 30px;
	color: var(--text-white-strong)
}
.testimonial {
	background-color: var(--button-dark-purple);
	border: 2px solid var(--button-dark-purple);
	border-radius: var(--border-radius-div-mini);
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.testimonial p { font-family: var(--font-title);}
.testimonial:hover {
	border-color: var(--button-dark-purple-hover)
}
.img_name {
	display: flex;
	gap: 20px
}
.img_name img {width:40px; height:40px;}
.testimonial-names{
	display: flex;
	flex-direction: column;
	font-size: var(--font-size-mini);
	 margin-top:-5px
}
.testimonial-title	{font-family: var(--font-title);}
.testimonial-text {
	color: var(--text-white-fff);
	opacity: 0.7
}

/* Booking */ 
.booking {
	text-align: center;
	padding-bottom: calc(var(--padding-bottom-section) - 3rem);
}
.booking h2 {
	font-size: var(--font-size-h3);
	margin: 0
}
.booking .secondary-text {
	padding: 1rem 0 3.9rem
}
.booking .secondary-text a{
	color: var(--text-white);
	font-weight: var(--weight-semibold);
}
.span-booking { color: var(--text-pink); }
#my-cal-inline-30min { height: auto !important; }

/* Values (About) */
.values { padding-top: 65px; }
.values-texts {
	width: 100%;
	display: flex;
	justify-content: center;
	flex-direction: row;
	justify-content: space-between;
}
.values-heading h1 { max-width: 649px; }
.highlight { color: var(--text-pink); }
.values-paragraph { max-width: 455px }
.image-slider {
	display: flex;
	justify-content: space-between;
	flex-direction: row;	
	align-items: stretch;
	gap: 35px;
}
.three-cards-values {
	width: 100%;
	overflow: hidden;
}
.three-cards-values img {
	border-radius: var(--border-radius-div-mini);
	width: calc(100% / 3 - 23.33px);
	height: auto;
}

/* Mission Section */
.animation-gradient-opacity{width:100%}
.mission {
	padding: var(--padding-bottom-section) 0 6.11rem 0; 
	color: var(--text-mission);
}
body.bg-mission,  body.bg-default  {
	transition: background-color 2s ease
}
body.bg-mission {
	background-color: var(--bg-mission);
}
body.bg-default {
	background-color: var(--bg-black);
}
.mission-texts {
	display: flex;
	gap: 20px;
	margin-bottom: var(--margin-bottom-h1);
	justify-content: space-between;
}
.mission-texts .about-us::before {
	content: '•';
	margin-right: 6px;
	color: var(--text-pink);
}
.mission-texts .about-us {
	font-size: var(--font-size-body);
	color: var(--text-pink);
	padding-top: 8px;
	min-width: 160px;
	font-family: var(--font-title);
	font-weight: var(--weight-medium);
}
.mission-texts p {
	max-width: 1066px;
	font-size: var(--font-size-h3);
	font-weight: var(--weight-medium);
	font-family: var(--font-title);
}
.mission-results {
	display: flex;
	flex-direction: row;
	gap: 0;
	padding-left: calc(160px + var(--gap-mobile));
}
.mission-result {
	border-left: 1px solid #E2DADA;
	padding: 0 45px;
}
.mission-result:first-child {
	border-left: none;
	padding-left: 0;
}
.mission-result:last-child { padding-right: 0; }
.mission-result p {
	width: 207px;
	color: 	rgb(10, 1, 22, 0.8);
}	
.mission-results h3{
	color: var(--text-pink);
	font-size: var(--font-size-h2);
}

/* Team Section */
.team { padding: 6.77rem 0 13.9rem 0; }
.team h2, .team p {color: var(--text-mission)}
.team .container {
	display: flex;
	gap: var(--gap-mobile);
	justify-content: space-between;
}
.team-texts {
	margin-left: 180px
}
.team-texts p {
	max-width: 456px;
	padding-bottom: var(--gap-mobile);
}
.team-texts .button { display: inline-block; }
.team-image img{
	max-width: 100%;
	height:auto;
}


@media screen and (max-width: 1270px) {
	.values-texts {
		flex-direction: column;
		max-width: 800px;
		margin-bottom: var(--margin-bottom-h1-mobile)
	}
	.values-paragraph { max-width: 100%; }
	.values-heading h1{
		max-width: 100%;
		margin-bottom: var(--gap-mobile);
	}
}
@media screen and (max-width: 1190px) {
	.mission-result p {
		width: auto	;
	}
}

/* Services Section (Not Home) */
.services h1 {
	font-weight: var(--weight-semibold);
	margin-bottom: 5rem;
}
.services h2 { font-size: 2.22rem; }
.service-cards {
	display: flex;
	flex-direction: column;
	gap: 30px;
	cursor: pointer;
}
.service-card {
	display: flex;
	gap: 16px;
	background-color: var(--button-dark-purple);
	padding: 20px;
}
.service-card.active {
	background-color: transparent;
	padding:0
}
.service-card, .service-card-left, .service-card-right {
	border-radius: var(--border-radius-div-mini);
}
.service-card-left, .service-card-right {
	width:50%;
	padding: 52px 62px;
}
.service-card-left {
	padding: 52px 62px;
	background-color: var(--bg-mission);
}
.service-left-detail { margin-top: 1.11rem }
.service-left-detail .button {
	display: inline-block;
	font-size: var(--font-size-mini);
	font-family: var(--font-text);
}
.service-card-left ul { margin: 2.22rem 0 3.78rem }
.service-card-left li {
	display: flex;
	align-items: center;
	font-family: var(--font-title);
	font-size: var(--font-size-body-mobile);
	font-weight: var(--weight-medium);
	padding-bottom: 8px
}
.service-card-left li:before {
  content: url(/img/service_check.svg);
  margin: 6px 8px 0 0;
}
#processesContentUx, #processesContentUi{
	display:none
}
.service_overlay-dt, .inactive .service_overlay-mb {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: var(--bg-black-service-ovarlay);
	border-radius: var(--border-radius-div-mini);
}
.service_overlay-mb { display: none }
.inactive .service-card-left h2{
	margin: 10px 0 0; 
}
.inactive .service_overlay-dt { display: none }
.inactive .service-card-right {
	background-position: center;
}
/* Service Card Right Background */
.service-card-right {
	background-image: url(/img/service_webdesign.webp);
	background-size: cover;	
	background-position: center;
	position: relative;
}
.inactive.service-ux .service-card-right,
.active.service-ux .service-card-right {
	background-image: url(/img/service_ux.webp);
}
.inactive.service-ui .service-card-right, 
.active.service-ui .service-card-right  {
	background-image: url(/img/service_ui.webp);
}
.service-card-right { width: 60%; }
.active .service-card-left, .active .service-card-left h2 {
	color: var(--text-mission)
}
.active .service-card-left { min-width: 500px }
.service-card-right h4 {
	font-family: var(--font-instrument);
	font-weight: 400;
	font-style: italic;
	font-size: 2.22rem;
}
.service-card.inactive .service-card-left{
	background-color: transparent;
	padding: 10px 10px 10px 86px;
	position: relative;
}
.service-card.inactive .service-card-left:after {
	position: absolute;
	content: "";
	width: 14px;
	height: 14px;
	top: 42%;
	left: 40px;
	border-right: 3px solid currentColor;
	border-bottom: 3px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
	transition: transform 0.3s ease;
}
.service-card,
.service-left-detail, 
.service-card-right h4, 
.service-card-right .processes {
	overflow: hidden;
  transition: max-height 0.4s ease-out;
}
.service-card.active, 
.service-card.active .service-left-detail, 
.service-card.active .service-card-right h4, 
.service-card.active .service-card-right .processes {
	max-height: 1200px; 
	overflow: visible;
}
.service-card.inactive .service-left-detail, 
.service-card.inactive .service-card-right h4, 
.service-card.inactive .service-card-right .processes {
	max-height: 0;
}
.service-card.inactive, .services .inactive  {
	max-height: 150px;
}
.services .inactive h3 { margin-top: 20px }
.service-card.inactive img { border-radius: 10px;}
.service-card.inactive .service-card-right {
	padding: 0;
	border-radius: 10px;
}
.processes {
	margin: 1.67rem 0 0 -10px;
	position: relative;
	--process-height: 146px;
	--process-icon-width: 58px;
	--process-icon-height: 57px;
	--process-bar-height: calc(var(--process-height) - var(--process-icon-height));
	--process-bar-left: calc(var(--process-icon-width) / 2);
}
/* "display: block", if you want to show process bar in desktop  */
.service_overlay-dt, #processes-content-dt { display: none }

#processes-content-dt, #processesContentUx, #processesContentUi {
	position: relative;
	z-index: 1;
}
#processes-content-dt h3, #processes-content-mb h3{
	font-family: var(--font-instrument);
	font-weight: var(--weight-normal);
	font-style: italic;
}
.process {
	display: grid;
	grid-template-columns: 60px 1fr;
	opacity: 0.4;
	height: var(--process-height);
	transition: opacity 0.6s ease;
}
.process.active { opacity: 1; }
.process p {
	font-size: 24px;
	font-weight: var(--weight-medium);
	margin: 10px 20px 
}
.process .timeline{
	display: flex;
	flex-direction: column;
}
.process.last-item { height: auto; }
.timeline {position:relative}
.timeline-icon {
	border: 1px solid var(--text-white);
	border-radius: 100%;
	width: var(--process-icon-width);
	height: var(--process-icon-height);
	display: flex;
	align-items: center;
	justify-content: center;
}
.timeline span {
	width: 1px;
	height: var(--process-bar-height);
	margin-left: 50%;
	position: relative 
}
#processes-content-mb { display: none; }
.process span { opacity:0 }
.process_bars {
	width: 1px;
	height: 100%;
	top: 0;
	left: var(--process-bar-left);
	display: flex;
	flex-direction: column;
	position: absolute;
}
.process_bar {
	position: relative;
	margin-top: var(--process-icon-height);
	height: var(--process-bar-height);
	width:100%;
	background-color: var(--bg-white-weak);
}
.process_bar span {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: var(--bg-white-inactive);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.1s linear;
}

/* Contact form */
.contact {
	padding-left: 50px;
	padding-right: 50px
}
.contact .container {
	padding: 85px 90px;
	background: #250258;
	background: linear-gradient(210deg,rgba(4, 3, 17, 0.8) 0%,rgba(19, 3, 50, 0.8) 55%,rgba(37, 2, 88, 0.8) 90%);
	border: 1px solid var(--button-dark-purple);
	border-radius: var(--border-radius-div-mini);
}
.contact h1 { margin-bottom: 3.11rem; }
.honeypot	{
	position:absolute;
	left:-9999px;
}
.contact-boxes {
	display: flex;
	gap: var(--gap-mobile);
}
.contact-list { min-width: 330px; }
.contact-form{ width:510px; }
.contact-list ul {
	display: flex;
	flex-direction: column;
	gap: 25px;
}
@media screen and (max-width: 1160px) {
	.contact-boxes {
		justify-content: space-between;
		gap: var(--gap-mobile);
	}
	.contact-list { min-width: 240px; }	
}
.contact-list li {
	display: flex;
	align-items: center;
	font-family: var(--font-title);
	font-weight: var(--weight-medium);
	font-size: 1.11rem;
}  
.contact-list li::before{
	content: url(/img/contact_checksvg.svg);
	margin-right: 8px;
	width:24px;
	height: 24px;
}
.breadcrumb-container{
	display:flex;
	align-items: center;
	font-size: 0.78rem;
	margin-bottom: 2.22rem;
}
#contact-back {
	padding: 0 0 0 24px ;
	background-image: url(/img/arrow_left.svg);
	background-repeat: no-repeat;
	background-position: left center;
	color: var(--text-white-fff);
	opacity: 0.7;
	display: inline-block;
	cursor: pointer;
	background-color: transparent;
	border: none;
	font-family: var(--font-text);
	font-size: 0.78rem;
}
#contact-back:hover { text-decoration: underline; }
.contact-divider {
	margin: 0 10px;
	width: 1px;
	height: 20px;
	background: var(--text-white-fff);
	opacity: 0.7;
	display: inline-block;
}
#contact-current { color: var(--text-pink) }
.contact form  {
	display: inline-block;
	width: 100%;
}
.first-buttons, .project-buttons {
	display: flex;
	gap: 1.11rem;
	margin: 1.67rem 0;
	flex-wrap: wrap;
}
.first-buttons .button {
	background-color: var(--transparent);
	opacity: 1
} 
.first-buttons .button:hover {
	background-color: var(--cta-hover);
}
.project-buttons {
	gap: 12px;
	margin: 15px 0 19px
}
.project-buttons .button {
	background-color: var(--transparent);
	opacity: 1;
	border-color: #756D86;
	padding: var(--padding-cta-mini);
} 
.project-buttons .button:hover {
	background-color: var(--cta-hover);
	border-color: var(--cta-hover);
}
#contact-project1 {
	padding-bottom: 12px;
}
.form-container {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
input[type="radio"],
input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
input[type="radio"]:focus-visible + label,
input[type="checkbox"]:focus-visible + label {
  outline: 2px solid yellow;
  outline-offset: 2px;
}
label.button-mini {
	font-size: 0.89rem;
	color: var(--text-white);
	opacity: 0.7;
}
input[type="radio"]:checked + label, input[type="checkbox"]:checked + label  {
  background-color: var(--cta-hover);
	border-color: var(--cta-hover);
}
.project-buttons input[type="radio"]:checked + label, .project-buttons input[type="checkbox"]:checked + label {
  background-color: var(--transparent);
	border-color: var(--cta-pink);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
input:-internal-autofill-selected {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: inherit !important;
  transition: background-color 9999s ease-out 0s;
	background-color: transparent !important;
}
.field {
	width: 100%;
	border: 2px solid rgba(145, 145, 145, 0.6);
	background: transparent;
	color: #919191;
	padding: 10px 20px;
	border-radius: 10px;
	font-size: var(--font-size-mini);
}
.field:hover, .field:focus {
	border-color: var(--text-white);
	color: var(--text-white);
}
.field.success, #drop-area.success, 
#contact-form .field.success:-internal-autofill-selected {
	border-color: var(--button-dark-purple-active);
	color: var(--text-white-strong) !important;
	-webkit-text-fill-color: var(--text-white-strong) !important;
	background-color: transparent !important;
}
textarea {
	resize: vertical;
	min-height: 97px;
}
input[type="date"],
input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--transparent);
	color: #919191;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
	filter: invert(1) brightness(0.55) sepia(0) saturate(0);
	-webkit-filter: invert(1) brightness(0.55) sepia(0) saturate(0);
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}
fieldset { border:none }
.done .field {
	color: var(--text-white);
	border-color: var(--button-dark-purple-active);
}	
#contact-info input { text-align: center; }
#drop-area{
	border: 2px dashed #757575;
	border-radius: 10px;
	height: 106px;text-align: center;
	cursor: pointer;
	color: rgba(145, 145, 145, 0.44);
	display: flex;
	align-items: center;
	justify-content: center;
}
#drop-area.dragover {
	border-style: solid;
	color: var(--text-white);
}
#drop-area p {
	font-size: var(--font-size-mini);
	padding: 20px
}
#file-upload { display: none; }
.form-container .contact_buttons { margin-top: 2.22rem }
.contact_buttons {
	display: flex;
	gap:20px
}
.contact_buttons .button {
	width: 150px;
	height: 53px;
	font-weight: var(--weight-medium);
}
.contact_buttons .button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.error-message {
	color: #F02222;
	font-size: var(--font-size-mini);
	margin-top: -8px;
}
.error-border, #drop-area.error-border {
	border-color: rgba(240, 34, 34, 0.6);	
}
#drop-area.error-border p { color: #F02222; }	
#form-error, #form-success { display: none; }
#form-error h3, #form-success h3 {
	margin-bottom: 10px;
	color: var(--cta-pink);
}
#contact-form { width: 100% }
.contact-info-container, .booking-details-container {
	display: flex;
	flex-wrap: wrap;
	gap: 1.78rem;
	margin-top: 20px;
}
.contact-info-container .form-container, .booking-details-container .form-container{
	flex: 1 1 calc(50% - (1.78rem) / 2);
}
#contact-message, #contact-project2, #booking-details {
	margin-top: 1.78rem
}
.contact-project2-container {
	width:100%;
	display: flex;
	flex-direction: column;
	gap: 32px
}
.contact-contact { margin-top: 8.87rem }
.contact-social {
	display: flex;
	margin-top: 25px;
	gap: 14px
}
.contact-mail:hover, .forward-link:hover { text-decoration: underline; }
.forward-link {
	display: flex;
	align-items: center;
	justify-items: center;
	background-image: url(/img/arrow_right.svg);
	background-repeat: no-repeat;
    background-position: right top 50%;
	background-size: 30px;
	width: 120px;
}
#contact-project, #contact-info, #contact-confirm, #contact-message, #contact-breadcrumb, #contact-project1, #contact-project2, #booking-details, .error-message
{ display:none }
#first-question legend { font-size: 1.11rem; }

/* Case page */
.case .container {
	padding: 0 var(--padding-container-extra)
}
.case h1 { margin-bottom: 1rem; }
.case img, .case .button {
	border-radius: var(--border-radius-div-mini);
}
.pink-link {
	color: var(--link-case);
	font-family: var(--font-title);
	font-weight: var(--weight-medium);
	padding-right: 30px;
	background-image: url(/img/arrow_up_right.svg);
	background-repeat: no-repeat;
	background-position: right center;
	cursor: pointer;
}
.pink-link:hover { text-decoration: underline; }
.case section {
	margin: 0;
	padding: 0
}
.case .case-three-blocks {
	margin: 6.66rem 0 8.33rem
}
.case-block {
	display: flex;
	gap: 56px;
}
.case-buttons{
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: var(--gap-mobile);
}
.case-three-blocks .button {
	padding: 26px 110px 26px 34px;
	text-align: left;
	font-weight: var(--weight-semibold);
	font-size: var(--font-size-cta-2-extra-large);
	place-content: flex-start;
	margin: 0;
}
.case-three-blocks .button:hover, .case-buttons .active {
	background-image: url(/img/arrow_right.svg);
	background-repeat: no-repeat;
	background-position: right 56px top 50%;
}
.case-buttons .active{
	background-color: var(--button-dark-purple-active);
}
.case-content {
	display:none
}
.case-content.active {
	display: flex;
	gap: 56px;
}
.case-image {
	max-width: 490px;
}
.case-image img {
	max-width: 490px;
	width: 100%;
	height: auto;
	min-width:300px
}
.active .case-image {
	opacity: 1;
	transition: opacity 1s ease;
}
.case-texts h3 { margin-bottom: 1.33rem }
.case-texts {
	display: flex;
	max-width: 390px;
	min-width: 390px;
	flex-direction: column;
	gap: 3.22rem;
	margin-top: 14px
}
.case-texts.active {
	display: flex;
	transition-delay: 0.4s; 
}
.case .project-image-wrapper {display:inline-block;}
/* Case Tab Animation Start */
.case-content { 
	display: flex; 
	opacity: 0; 
	position: absolute; 
	top: 0; left: -9999px; 
} 
.case-content.active { 
	opacity: 1; 
	left: 0; 
	position: relative; 
} 
.case-content .case-image img { 
	opacity: 0; 
	transform: translateY(20px); 
	transition: opacity 0.6s ease, transform 0.6s ease; 
} 
.case-content.active .case-image img { 
	opacity: 1; 
	transform: translateY(0); 
} 
.case-content .case-texts { 
	opacity: 0; 
	transform: translateY(20px); 
	transition: opacity 1s ease 0.2s, transform 1s ease 0.2s; 
} 
.case-content.active .case-texts { 
	opacity: 1; transform: translateY(0); 
}
/* Case Tab Animation End */

@media screen and (max-width: 1300px) {
	.case-block {
		align-items: flex-start;
	}
	.case-three-blocks .button {
		font-size: 1.11rem;
		padding: 26px 34px;
		background-image: none;
	}
	.case-three-blocks .button:hover{
		background-image: none;
	}
	.case-texts {
		min-width: 200px;
	}
}
.carousel {
	display: flex;
	align-items: center;
	gap: 20px
}
.go-left, .go-right {
	background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
	padding: 0
}
.go-left:hover, .go-right:hover {
	background:none
}
.go-left {order: 1;}
.go-left img {transform: rotate(180deg)}
.go-right {order: 3}
.case-other-projects h3 {
	font-size: var(--font-size-h3);
	margin-bottom: 3.78rem;
}
.other-projects {
	order: 2;
	flex: 1;
	display: flex;
	gap: 38px;
	overflow: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}
.other-projects li {
	padding: 30px 34px 40px 26px;
	min-width: 350px;
	height: 359px;
	border-radius: var(--border-radius-div-mini);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	transition: all 0.4s ease;
	position: relative;
	scroll-snap-align: end;
}
.other-projects li::before {
	content: "";
	position: absolute;
	inset: 0;
	background: transparent;
	transition: 0.3s;
}
.other-projects li:hover::before {
	background: rgba(0,0,0,0.8);
}
.other-projects li:hover {
	height: 359px;
	width: 518px;
	min-width: 518px;
}
#thumbnail_smart_logiq {background-image: url(/img/projects/smart-logiq_thumbnail.webp)}
#thumbnail_livid_arts {background-image: url(/img/projects/livid-arts_thumbnail.webp)}
#thumbnail_drive_sthlm {background-image: url(/img/projects/drive-sthlm_thumbnail.webp)}
#thumbnail_liv_halsa {background-image: url(/img/projects/liv-och-halsa_thumbnail.webp)}
#thumbnail_igel_webbshop {background-image: url(/img/projects/igel-webbshop_thumbnail.webp)}
.thumbnail_box {
	display: flex;
	flex-direction: row-reverse;
	height: 100%;
}
.other-projects li:hover .thumbnail_box{
	display: flex;
}
.thumbnail_box a.button {
	align-self: flex-end;
  width: 59px;
  height: 59px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
	padding: 0;
	border: none;
	flex-shrink: 0;
} 
.thumbnail_box a.button img {
	width: 15px; height:16px; border-radius: 0;
}
.thumbnail_texts {
	margin-top: auto;
	margin-right: 20px;
	width:100%
}
.thumbnail_texts h4 {
	font-size: 24px;
	margin-bottom: 12px;
}
.thumbnail_texts p {
	font-size: 16px
}
.thumbnail_box {
	opacity: 0;              
	transform: translateY(10px);    
	transition: opacity 1s ease 0.2s, transform 0.6s ease 0.2s;
}
.other-projects li:hover .thumbnail_box {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
/* 404 */
.p404 {
	text-align: center;
}
.box404 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100vh;
	padding-bottom:150px
}
.box404 img {
	margin: 3.44rem 0 2.22rem 0;
	max-width:100%;
	height:auto;
}
#text2-404 {
	font-size: 20px;
	margin-bottom: 1rem;
	max-width: 400px;
}
#b404 {
	display: inline-block;
	margin-top: var(--gap-mobile);
}
.footer404 {
	padding-top:120px
}
/* Media Queries for Responsive Design */
/* Smaller Desktop */
@media screen and (max-width: 1400px) {
	h1 {font-size: var(--font-size-h1-sm)}
	.services h1 { margin-bottom: 1.67rem }
	.service-card {gap: 38px}
	.service-cards {gap: 24px} 
	.service-card-left {padding: 42px 52px}
	.services h2 { font-size:1.78rem; margin-bottom: 1.11rem }
	.services ul { margin: 1.11rem 0 1.44rem}
	.service-card-left { padding-bottom: 1.78rem}
	
}
/* Tablet */
@media screen and (max-width: 991px) {
	.only-mobile { display:block; }
	.only-desktop { display: none; }
	h1 {
		margin-bottom: var(--margin-bottom-h1-mobile);
		font-size: var(--font-size-h1-mobile);
	}
	.container, footer .container, .logo-scroll .container, .hero-content, .contact .container, .case .container {
		padding: 0 var(--padding-container-mobile) 0 var(--padding-container-mobile);
	}
	header .container {
		padding: 0 var(--padding-container-mobile);
	}
	section, footer{
		padding-bottom: var(--padding-bottom-section-mobile);
	}
	.header-wrapper {
		padding: 0;
		height: 105px
	}
	.logo img {
		width: 70px;
		height: auto;
		margin-top: 10px
	}
	.hamburger-menu { display: flex; }
	.nav-menu {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: var(--bg-black);
		width: 100%;
		height: 100vh;
		flex-direction: column;
		display: flex;
		transform: translateY(-100%);
		transition: transform 0.4s ease;
		padding: 80px 0 20px 0;
		z-index: 999;
		overflow-y: auto;
	}
	.nav-menu.active {
		transform: translateY(0);
		justify-content: center;
		align-items: center;
	}
	.nav-menu-ul {
		flex-direction: column;
		width: 100%;
	}
	.nav-item {
		margin: 0 0 40px 0;
		padding: 2px 0;
	}
/* Dropdown*/
	.dropdown {
		top: 40px;
		left: -74%;
		text-align: center;
		transform: translateY(40px);
		opacity: 0;
		pointer-events: none;
		background: var(--bg-black);
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease;
	}
	.nav-link.only-desktop{ display: none; }
	#menu-case::after { display: none; }
	#case-dropdown::after { top: 20px }
	.dropdown-open .dropdown{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
		max-height: 500px;
	}			
	#case-dropdown {
		font-weight: 600;
		font-size:18px;
	}

	.nav-item.lang-r-a {
		margin-top: 34px
	}
	.dropdown li {padding: 0}
	.dropdown-open #case-dropdown::after {top: 26px}

	.langs {margin-left: -4px;}
	.lang-current {
		padding-top: 3px
	}
	.lang-divider {
		top: 34px
	}
	.lang-r-a{padding-top:0px}
	#to-sv {margin-top:33px;margin-left:-16px}
	.div-en {left: 28px}

	/* Footer */
	.go-top {
		bottom: var(--padding-container-mobile);
		right: var(--padding-container-mobile);
	}	
	.footer_right li a {
		padding-top: 25px;
		font-size: var(--font-size-body)
	}
	.footer_title {
		font-size: var(--font-size-body)
	}
	/* main */
	main {
		margin-top: var(--margin-top-main-mobile);
	}

	/* Hero */
	.hero-content {
		width:100%;
		padding-bottom: var(--padding-bottom-section-mobile);
	}
	.hero-texts {
		padding-left: 0;
		max-width: 100%;
	}

	/* Logo-scroll */
	.logo-scroll{
		padding-bottom: 4rem
	}
	/* Slogan  */
	.slogan {
		padding: 0 0 var(--padding-bottom-section-mobile) 0;
	}	
	.slogan .container {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--padding-container-mobile);
		width:100%;
		padding-bottom: 0;
	}
	.slogan-text-right p{
		font-size: var(--font-size-h4-mobile);
		padding-bottom: var(--gap-mobile);
	}
	.slogan .button { float: left; }
	.slogan-content h2{
		font-size: 14px;
		font-family: var(--font-text); 
	}
	/* Services_cards Section (Home) */
	.three-cards-services_cards {
		flex-direction: column;
		gap: 25px;
	}
	.card-services_cards {
		width: 100%;
		height:auto;		
		min-height: 135px;
	}
	.card-services_cards:hover { width: 100%; }
	.service-cards {gap: 13px} 

	/* Projects Section */
	.projects .container{
		flex-direction: column;
		gap: 20px
	}
	.project-left {
		max-width: 100%;
	}
	.project-right, .project-right img {
		max-width: 100%;
	}	
	.project-right .project-dtmb {
		height: 300px;     
		object-fit: cover;
		object-position: top;
	}
	.modal-image {
		padding: var(--padding-container-mobile);
	}	
	.modal-content .close-button {
		top:40px;
		right:40px
	}

	/* Testimonials Section */
	.testimonials .container {
		flex-direction: column;
		gap: var(--gap-mobile)
	}
	.testimonials-texts, .testimonials-right, .testimonials-center	{
		width: 100%;
		max-width: 100%;
		background-position: center 25%;
	}
	.testimonials-pink { text-shadow: none; }
	.testimonials-right { min-height: 209px; }
	/* Booking Section */
	.booking h2 {font-size: 1.11rem;}
	.booking {
		padding-bottom: 4.45rem;
	}
	.booking .container { padding-bottom: 0 }
	.booking { text-align: left; }
	.booking .secondary-text {
		padding-bottom: var(--gap-mobile);
	}

	/* values (About) */
	.values { padding-top: 1rem; }
	.values-texts { flex-direction: column; }
	/* Image Slider */
	.image-slider {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 35px;
		flex-wrap: nowrap;
		scroll-behavior: smooth;
		animation: slideLogos linear infinite;
		width: max-content;
	}
	.image-slider.paused {
		animation-play-state: paused;
	}
	.three-cards-values img {
		flex-shrink: 0;
		max-height: 360px;
		min-width: auto;
		width: auto;
	}

	/* Mission Section */
	.mission {
		padding: var(--padding-bottom-section-mobile) 0;  
	}
	.mission-texts {
		margin-bottom: var(--margin-bottom-h1-mobile);
		flex-direction: column;
		gap:10px
	}
	.mission-results h3{
		font-size: var(--font-size-h1-mobile);
	}
	.mission-texts .about-us::before {
		display: none;
	}
	.mission-texts .about-us {
		padding: 0;
		margin: 0; 
		font-size: var(--font-size-h2-mobile);
	}
	.mission-texts p {
		font-size: var(--font-size-body-mobile);
	}	
	.mission-results {
		padding-left: 0;
		flex-direction: column;
		gap: calc(var(--gap-mobile) / 2);
	}
	.mission-result {
		border-left: none;
		padding: 0;
	}
	.team-image {
		margin-bottom: 1.78rem
	}
	.team-texts {
		margin: 0;
	}

	.team-texts p{
		max-width: 100%
	}

	/* Team Section */
	.team {
		padding: var(--padding-bottom-section-mobile) 0;
	}
	.team .container {
		flex-direction: column;
		gap: 0;
		justify-content: flex-start;
	}
	.team-images {
		max-width: 100%;
	}
	.team-images div {
		max-width: 261px;
	}
	.team-images img {
		max-width: 100%;
		height: auto;
	}
	.team-images-right {
		padding-top: 0;
	}
	.team-texts .button.only-desktop{
		display:none
	}

	/* Services */
	.services h1 {
		font-size: var(--font-size-h1-mobile);
		margin-bottom: 2.67rem;
	}
	.service-card, .service-card-left, .service-card-right, .service_overlay-dt, .inactive .service_overlay-mb {
		border-radius: 10px;
	}
	.service-card-left{
		padding: 40px 20px;
		z-index: 5;
		width: 100%;
	}
	.service-card.inactive .service-card-left {
		padding-left:0
	}
	.service-card.inactive .service-card-left:after {
		right: 25px;
		left:auto;
	}
	
	.service-card-left h2 {
		font-size: 1.78rem;
		font-weight: var(--weight-medium);
	}
	.inactive .service-card-left h2 { 
		margin:0;
		position: relative
	}
	.active .service-card-left h2::after {
		position: absolute;
    content: "";
    width: 14px;
    height: 14px;
    top: 65px;
    right: 40px;
    border-right: 3px solid var(--cta-pink);
    border-bottom: 3px solid var(--cta-pink);
    transform: translateY(-50%) rotate(-135deg);
    transition: transform 0.3s ease;
	}
	.active .service-card-left h2 { color: var(--cta-pink) }
	.service-card-left ul { margin-bottom: 42px; }
	.service-card-left button {
		margin: 0 auto;
		display: block;
	} 
	.active .service-card-right { display: none; }
	.active .service-card-left {
		width:100%;
		min-width: auto;
	}
	#processes-content-mb {
		display: block;
		background: var(--bg-black);
		background: linear-gradient(135deg,#250454 0%, var(--bg-black) 100%);
		padding: 30px;
		border-radius: var(--border-radius-div-mini);
		margin-top: var(--padding-bottom-section-mobile);
		position: relative;
	}
	#processes-content-mb h3 { font-size: var(--font-size-h1-mobile); }
	#processes-content-mb .process p {
		font-size: 20px;
		margin: 10px 12px;    
	}
	.process {
		--process-height: 146px;
		--process-icon-width: 58px;
		--process-icon-height: 57px;
	}
	.process img {
		width: 25px;
		height: 25px;
	}

	.service-card.inactive .service-card-right {
		background-image: none;
		display:none
	}
	.service-card { position: relative }
	.inactive .service_overlay-mb { display: block; }
	.services .inactive h3 { margin-top: 0px }
	/* Service Card Right Background */
	.service-card.inactive {
		background-image: url(/img/service_webdesign.webp);
		background-position: center;
		background-size:cover;
		height: 80px;
		padding: 10px 20px;
	}
	.service-card.inactive.service-ux{
		background-image: url(/img/service_ux.webp)
	}
	.service-card.inactive.service-ui{
		background-image: url(/img/service_ui.webp)
	} 

	/* Case Page */
	.case-three-blocks {
		margin: var(--padding-bottom-section-mobile) 0;
		flex-wrap: wrap;
	}
	.case .case-three-blocks {
		margin: 2.33rem 0
	}

	.case-block {
		flex-direction: column;
		gap: 18px;
	}
	.case-image, .case-texts article {
		display: none
	}
	.active .case-image, .active .case-texts article {
		display: block;
	}
	.active .case-image {
		margin-bottom: -7px;
		padding: 0 12px
	}
	.case-three-blocks .button {
		position: relative;
		padding: 14px 60px 14px 22px;
		font-size: 1.11rem;
		z-index: 2;
	}
	.case-three-blocks .button::after {
		position: absolute;
		content:"";
		width: 14px;
		height: 14px;
		top: 45%;
		right: 34px;
		border-right:2px solid currentColor;
		border-bottom:2px solid currentColor;
		transform: translateY(-50%) rotate(45deg);
  	transition: transform 0.3s ease;
	}
	.active .case-texts .button::after{
		transform: translateY(-50%) rotate(-135deg);
		top: 55%
	}
	.case-content, .case-content.active {
		flex-direction: column-reverse;
		width: 100%;
		display: flex;
	}
	.case-content.active {
		background:#0E0121;
		border-radius: 20px;
		margin-bottom: 20px
	}
	.case-image, .case-texts-blocks { 
		width: 100%; 
		max-width: 100%
	}
	.case-texts { 
		max-width: 100%;
		min-width: auto;
		margin-top:0;
		gap: 32px
	}
	.case-texts article {
		padding: 0 22px;
	}
	.active .case-texts .button {
		background-color: var(--button-dark-purple-active);
		border-color: var(--button-dark-purple-active);
	}
	.case-texts article h3 {
		font-size: 1.11rem;
	}
	.case-other-projects h3 {
		font-size: var(--font-size-h3-mobile);
		margin-bottom: var(--margin-bottom-h1-mobile);
	}
	/* Remove Desktio Animation Start */
	.case-content {
    opacity: 1;
    position: relative;
    top: inherit;
    left: inherit;
  }
	.case-content .case-texts{
		opacity: 1;
		transform: translate(0);
	}
  .case-texts {
    max-width: 100%;
    min-width: auto;
  }
	.case-content .case-image, .case-content article {
		display: block;
		opacity: 0;
		position: absolute;
		top: 0;
		left:0;
		transform: translateY(20px);
	}
	.case-content.active .case-image, .case-content.active article {
		opacity: 1;
    position: relative;
    top: inherit;
    left: inherit;
		transform: translateY(0);
	}
	.carousel .go-left, .carousel .go-right {display:none}
	.other-projects{
		flex-direction: column;
	}
	.other-projects li {min-width:auto;}
	.thumbnail_box {
		flex-direction: column;
	}
	.thumbnail_box a.button {
		width:50px;
		height:50px;
	}
	.other-projects li {
		height: 140px;
		border: none;
		padding: 16px 22px 20px 20px;
	}
	.other-projects li:hover {
		width: 100%;
		min-width: 100%;
		height: 214px
	}
	.thumbnail_texts h4 {
    font-size: 20px;
    margin-bottom: 14px;
	}
	.thumbnail_texts p {font-size:14px}

	/* Contact Page */
	.contact {
		padding: var(--padding-container-mobile) var(--padding-container-mobile) var(--padding-bottom-section-mobile) var(--padding-container-mobile);
	}
	.contact .container {
		padding: var(--padding-container-mobile);
	}	
	.contact-boxes {
		flex-direction: column;
		gap: var(--gap-mobile);
	}
	.contact-contact {
		margin-top: var(--gap-mobile);
	}
	.contact-list ul {
		gap: 10px;
		margin-bottom: 20px;
	}
	/* 404 */
	.box404 {
		margin-top:80px
	}
	.box404 img {
		margin: 2.22rem 0 2.26rem
	}
	.cover404btn, #b404{
		width: 100%
	}
	#text1-404{font-size: 14px;}
	#text2-404{font-size: 16px;}

}

/* Mobile */
@media screen and (max-width: 767px) {
	body {font-size: var(--font-size-body-mobile)}
	h1 {font-size: var(--font-size-h1-mobile)}
	h2 {font-size: var(--font-size-h2-mobile)}
	h3 {font-size: var(--font-size-h3-mobile)}
	h4, .project-title, .testimonials h3 {font-size: var(--font-size-h4-mobile)}

	.button-extra-large {
		font-size: var(--font-size-cta-extra-large-mobile);
	}
	.no-mobile {display: none;}
	.hero h1 {
		text-shadow: 
			0px 0px 10px var(--bg-black), 
			0px 0px 10px var(--bg-black), 
			0px 0px 10px var(--bg-black);
	}

	/* Logo Slider */ 
	.logo-scroll {padding-bottom: var(--padding-container-mobile)}
	.logo-slider {
		gap: 20px;
	}
	.logo-slider img {
		max-width: 70px;
		max-height: 70px;
	}	
	/* Slogan */
	.slogan-content img {width: 58px; height:auto}
	.slogan-content p {font-size: 0.78rem}
	/* Footer */
	.footer-bottom, .footer_right {gap: 40px;}
	/* Hero */
	.hero-buttons {
		flex-direction: column;
		gap: 20px;
		width:100%
	}
	.hero-buttons .button { height: 52px }
	.hero-buttons img { width: 40px; height: auto }

	/* values (About) */
	.three-cards-values img {
		max-height: 232px;
	}
	/* Case Page */
	.case-image, .case-buttons, .case-texts-blocks {
		width: 100%; max-width: 100%
	}
	.other-projects-images li {
		height: 150px
	}
	/* Contact Page */
	.contact-form {
		width: 100%;
	}
	.contact-info-container .form-container, .booking-details-container .form-container {
		flex: 1 1 100%;
	}
	.contact_buttons .button { width: 100%; }
	.copyright { margin-top: 3rem }
}

@media screen and (max-width: 540px) {
	.footer-bottom {
		flex-direction: column;
		gap: 30px;
	}
	.footer_right {
		justify-content: space-between;
		margin-right: 20px
	}
	.case-image img {
		min-width: auto;
	}
}
/* Small Mobile */
@media screen and (max-width: 479px) {
	.no-mobile { display: none; }
	.contact-list { min-width: 100%; }
	.other-projects-images li { height: 100px }
		.thumbnail_texts {
		margin-right: 0;
	}
}	

@media screen and (max-width: 370px) {
	.breadcrumb-container { flex-direction: column; }
	.contact-divider {
		opacity: 0;
		height:10px
	}
}