/* ===========================================
   DESKTOP – screen and (min-width: 64em) base 16px
   =========================================== */

/* Header / Nav */
.wmw-header { }

.header-inner {
  width: 70dvw;
  height: 140px;
  margin: 3rem auto;
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 0px;
  height: 100px;
  padding: 0;
}

.site-nav { display: block; width: 100% !important; }
.site-nav .menu { }

/* Layout */
:root { --container-max: min(1200px, 88vw); }
.site-main { padding-block: calc(var(--space-4) + 1rem); 
}

/* Content typografi */
body { font-size: 1.025rem; }
.page-content { 
}

/* Footer */
.footer-inner { padding-block: 2rem; }

/* Utilities */
.only-desktop { display: initial !important; }

/* FORSIDE */
#wmw-hero-frontpage { 
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto 1fr;
	grid-template-areas: 
		"hhbox hhbox" 
		"hlsec hrsec";
	gap: 1rem;
	padding: 0;
	margin-top: -2rem;
}

#hero-headline-box {
	grid-area: hhbox;
	margin-bottom: 2rem;
}
#hero-headline-box h1 {
	font-size: 3.5rem; 
	text-align: center;
	margin-bottom: 1rem;
}
#hero-headline-box h2 {
	position: relative;
	font-size: 1.2rem;
	text-align: center;
	letter-spacing: 6px;
	color: rgba(0,0,0,0.6);
	padding-top: 0.5rem;
}
#hero-headline-box h2:before {
	position: absolute;
	content: '';
	top: 5px;
	left: calc(50% - 230px);
	width: 460px;
	height: 1.5px;
	background: linear-gradient(to right, rgba(255,255,255,0.05), rgba(255,255,255,0.35) 10%, rgba(255,255,255,0.35) 90%, rgba(255,255,255,0.05) 100%);
	box-shadow: 0 0 5px 0 rgba(0,0,0,0.45);
	border-radius: 2px;
}
#wmw-hero-frontpage .hero-left-section .wmw-laptop-wrap {
	grid-area: hlsec;
}
.hero-img-responsive-stage {
	perspective: 500px;
	perspective-origin: left right;
	padding-left: 2rem;
}
.hero-img-responsive{ 
	display: block;
	width: 450px;
	height: auto;
	margin: 0 auto;
	transform-origin: left right;
	transform: rotatey(15deg);
}

#wmw-hero-frontpage .hero-right-section {
	grid-area: hrsec;
}

#wmw-hero-frontpage p {
	font-size: 1.65rem;
	font-weight: 600;
	text-align: center;
	padding: 4rem 2rem 1.5rem;
	letter-spacing: 1px;
	line-height: 2rem;
	text-transform: uppercase;
	color: #f7f7f7;
}
.wmw-hero-cta-button-wrap { 
	text-align: center; 
	margin-top: 0 !important; 
}

.wmw-hero-cta-button {
	font-size: 1.15rem;
	color: #f7f7f7;
	line-height: 1.15rem;
	text-shadow: 0 0 5px rgba(0,0,0,0.75);
	padding: 0.6rem 1rem;
}
.wmw-hero-cta-button:hover { box-shadow: 0 0 25px rgba(255,255,255,0.35); }

#wmw-content-frontpage {
	width: 70dvw;
	margin: 2rem auto;
	padding: 0 1rem;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	gap: 1rem;
}
#wmw-content-frontpage h3 { 
	position: relative;
	font-size: 2.2rem; 
	letter-spacing: 2px; 
	padding-bottom: 0.5rem;
}
#wmw-content-frontpage h3:after {
	position: absolute;
	content: '';
	bottom: 0.9rem;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: linear-gradient(to right, rgba(255,255,255,0.15), rgba(255,255,255,0.35) 10%, rgba(255,255,255,0.35) 90%, rgba(255,255,255,0.15) 100%);
	box-shadow: 0 0 5px 0 rgba(0,0,0,0.45);
	border-radius: 2px;
}
#wmw-content-frontpage p { margin: -1rem 0 2rem;}

.card-box-ser-prods {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto;
	gap: 3rem;
	padding-bottom: 2rem;
}
#wmw-content-frontpage .card {
	position: relative;
  height: 500px;
  /*background: #14254d;*/
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0px 0px 3px 1px #00000088;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  border-radius: 8px;
	background: #55555550;
	backdrop-filter: blur(5px);
	z-index: 500 !important;
}
#wmw-content-frontpage .card .on-the-way {
	position: absolute;
	top: 6rem;
	right: -2.5rem;
	width: 170px;
	height: 30px;
	color: #4087c0;
	text-align: center;
	line-height: 25px;
	text-shadow: 0 0 5px rgba(0,0,0,0.15);
	background: rgba(255,255,255,0.75);
	backdrop-filter: blur(5px);
	transform: rotate(45deg);
	border-top: 2px solid rgba(0,0,0,0.75);
	border-bottom: 2px solid rgba(0,0,0,0.75);
	z-index: 600 !important;
}

#wmw-content-frontpage .card:hover {
	
}

#wmw-content-frontpage .card .content {
  margin: 2px auto;
  border-radius: 8px;
  /*background: #14254d;*/
  width: calc(100% - 4px);
  height: 496px;
  z-index: 1;
  padding: 0.75rem;
  color: rgba(0,0,0,0.95);
	/*background: #606060;*/
	background-color: #F3F4F6;
	backdrop-filter: blur(5px);
	box-shadow: inset 0 0 50px 0 rgba(0,0,0,0.5);
	z-index: 400 !important;
}

#wmw-content-frontpage .content::before {
  opacity: 0;
  transition: opacity 900ms;
  content: "";
  display: block;
  background: rgba(255,255,255,0.085);
  width: 100%;
  height: 85%;
  position: absolute;
  filter: blur(50px);
  border-radius: 8px;
}
#wmw-content-frontpage .card .content .content-header { 
	position: relative;
	background-color: #333333;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	width: calc(100% + 2rem + 4px);
	margin-top: calc(-1rem - 2px);
	margin-left: calc(-1rem - 2px);
	padding-top: 1rem;
	padding-bottom: 0.5rem;
	box-shadow: inset 0 0 35px 1px rgba(0,0,0,0.83);
	z-index: 800 !important;
}
#wmw-content-frontpage .card .content .content-header h5 { 
	display: block;
	color: #4087c0;
	font-weight: 500;
	text-align: center;
	font-size: 0.8rem; 
	letter-spacing: 4.5px;
	margin-top: 0;
	margin-bottom: -0.45rem;
		text-shadow: 
		1px 1px 3px #111111,
		1px -1px 3px #111111,
		-1px 1px 3px #111111,
		-1px -1px 3px #111111;
}
#wmw-content-frontpage .card .content .content-header h4 { 
	display: block;
	color: rgba(255,255,255,0.95);
	text-align: center;
	font-size: 1.25rem;
	text-shadow: 
		1px 1px 3px #111111,
		1px -1px 3px #111111,
		-1px 1px 3px #111111,
		-1px -1px 3px #111111;
	letter-spacing: 1px;
	margin-top: 0.25rem;
}
#wmw-content-frontpage .card .content .card-service-description-box {}

#wmw-content-frontpage .card .content .card-service-description-box p {
	line-height: 1.4;
	font-weight: 400;
	padding: 1.5rem 0 0;
	font-family: Arial;
}
#wmw-content-frontpage .card .content .card-service-description-box ul {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	padding: 1rem;
	list-style-type: none;
}
#wmw-content-frontpage .card .content .card-service-description-box ul li {
	font-size: 0.9rem;
	line-height: 1.25rem;
	font-family: Arial;
	letter-spacing: 0.5px;
	color: rgba(0,0,0, 0.9);
}
#wmw-content-frontpage .card .content .card-service-description-box ul li:before {
  content: "✔";
  color: #4087c0;
  text-shadow: 0.5px 1.5px 1px rgba(0,0,0,0.85);
  margin-right: 0.5rem;
  margin-left: -1rem;
}
#wmw-content-frontpage .card .content .card-service-price-box { 
	position: absolute;
	bottom: 2px;
	left: 0;
	width: calc(100% - 4px);
	height: 76px;
	margin-left: 2px;
	padding: 0.5rem;
	display: grid;
	place-items: center;
	background: #333333;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	box-shadow: inset 0 0 35px 1px rgba(0,0,0,0.83);
}
#wmw-content-frontpage .card .content .card-service-price-box .price-text{ 
	display: block;
	letter-spacing: 4px;
	text-align: center;
	text-transform: uppercase;	
	font-size: 0.6rem;
	font-weight: 600;
	color: rgba(255,255,255, 0.9);
}
#wmw-content-frontpage .card .content .card-service-price-box .price-amount { 
	display: block;
	text-align: center;
	font-weight: 600;
	font-size: 1.5rem;
	color: #4087c0;
}
.card-service-price-box sup, .card-service-price-box sub {
	font-size: 0.7rem;
	font-weight: bold;
	letter-spacing: 0.5px;
}

#wmw-content-frontpage .card:hover { box-shadow: 0 0 35px 20px rgba(255,255,255,0.1) !important; }
#wmw-content-frontpage .card:hover .content::before { opacity: 1; }
#wmw-content-frontpage .card::before {
  opacity: 0;
  content: '';
  position: absolute;
  display: block;
  width: 300px;
  height: 500px;
	background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.5),
    rgba(255,255,255,0.28),
    transparent
  );
  transition: opacity 900ms;
  animation: rotation 8s infinite linear;
  animation-play-state: paused;
  border-radius: 8px;
}

#wmw-content-frontpage .card:hover::before { 
  opacity: 1;
  animation-play-state: running;
  border-radius: 5px;
}

#wmw-content-frontpage .card::after {
  position: absolute;
  content: " ";
  display: block;
  width: 190px;
  height: 254px;
  background: #17171733;
  backdrop-filter: blur(50px);
  border-radius: 8px;
}

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

/* CASES */
#cases-box {
  margin: 2rem 0 2rem -1rem;
  width: 70dvw;
  height: 254px;
  border-radius: 4px;
  display: flex;
  gap: 0.25rem;
  padding: 0;
}
#cases-box p {
  height: 100%;
  flex: 1;
  overflow: hidden;
  cursor: pointer;
  border-radius: 5px;
  transition: all .5s;
  background: #333333;
  border: 2px solid #333333;
  display: flex;
  justify-content: center;
  align-items: center;
}
#cases-box p:hover {
	flex: 10;
}
#cases-box p span {
	min-width: 14em;
  padding: 1.5em;
  text-align: center;
  transform: rotate(-90deg);
  transition: all 750ms;
  text-transform: uppercase;
  color: #4087c0;
  letter-spacing: .1em;
}
#cases-box p:hover span {
  transform: rotate(0);
}

/* ABOUT */
#section-about-wmw{
	display: grid;
	grid-template-columns: 8fr 4fr;
	grid-template-rows: auto;
	gap: 2rem;
}
.wmw-history{
	
}

.wmw-history h2 {
	font-size: 1.5rem;
}

.wmw-history p {
	margin-top: 0.5rem;
	font-size: 0.8rem;
	color: rgba(0,0,0,0.9);
	font-family: Arial;
}
.wmw-history .mission-text {
		font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 0.82rem;
	font-style: italic;
	font-weight: 500;
	padding: 1rem;
	background: linear-gradient(to bottom, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.75) 20%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.75) 80%, rgba(255,255,255,0.8) 100%);
	border-radius: 3px;
}
.wmw-who-box {
	
}
.wmw-who {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: rgba(255,255,255,0.95);
	padding: 1rem;
	box-shadow: 0 0 20px 2px rgba(0,0,0,0.15);
	border-radius: 3px;
}
.wmw-who img {
	margin: 0 auto;
	display: block;
}
.wmw-who h4 {
	color: hsl(219, 66%, 18%);
	font-size: 1rem;
	text-align: center;
}
.wmw-who span { 
	display: block;
	color: hsl(219, 66%, 18%);
	font-size: 0.75rem;
	text-align: center;
}