/*
Theme Name: mmmlabel
Theme URI: https://mmmlabel.tech/
Author: WELGEEN.NL
Author URI: https://welgeen.nl/
Description: Een eenvoudig WordPress-thema
Version: 1.0
*/


@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;700&display=swap');

:root {
  /* Kleuren */
  --color-primary: #e1d5a2;
  --color-secondary: #e5ab00;
  --color-tertiary: #b3dbdb;
  --color-accent1: #ff69b4;
  --color-accent2: #dc98e9;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-light: #f9f9f9;
  --color-gray-medium: #d3d3d3;
  --color-hover: lightblue;

  /* Font-sizes */
  --font-size-small: 14px;
  --font-size-medium: 16px;
  --font-size-large: 2em;
  --font-size-xlarge: 3em;

  /* Marges en padding */
  --spacing-small: 10px;
  --spacing-medium: 20px;
  --spacing-large: 40px;

  /* Schaduw en radius */
  --box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  --border-radius: 15px;

  /* Animatie */
  --animation-duration: 20s;
}

body, html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Figtree', sans-serif;
  background: var(--color-gray-light);
  scroll-behavior: smooth;
  line-height: 1.5;
}

/* A4 Wrapper */
.wrapper {
  width: 997px;
  margin: 0 auto;
  background: transparent;
  box-shadow: var(--box-shadow);
  padding: 0 var(--spacing-medium) var(--spacing-medium) var(--spacing-medium);
  overflow: hidden;
  position: relative;
}

.backgrounds {
  position: absolute;
  top: 0; 
  left: 50%; 
  transform: translateX(-50%); 
  width: 1037px;
  height: 200vh;
  margin: 0; 
  overflow: hidden;
}
.background-div {
  position: absolute;
  border: 4px solid;
  border-radius: var(--border-radius);
  background-color: transparent;
  animation: moveRandomly var(--animation-duration) linear infinite;
}
@keyframes moveRandomly {
  0% {
    transform: translate(var(--start-x), var(--start-y));
  }
  100% {
    transform: translate(var(--random-x), var(--random-y));
  }
}
/* Menu Sectie */
header.menu {
  width: 997px;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 10vh;
  padding: 0 var(--spacing-medium);
  margin-left: calc(-1 * var(--spacing-medium));
  margin-bottom: var(--spacing-medium);
  background: var(--color-white);
  box-shadow: var(--box-shadow);
  z-index: 100;
}

header .logo {
  height: 69px;
  width: 162px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-medium);
  margin: 2em 0;
}
.menu-lang span{
  padding: 4px;
}
.menu-lang span.active {
	font-weight: bold;
	text-decoration: underline;
}
.menu-items a {
  margin: 0 var(--spacing-small);
  text-decoration: none;
  color: var(--color-black);
  text-transform: uppercase;
  font-weight: bold;
  background: var(--color-white);
}

.menu-items a:hover:nth-child(1) {
  color: var(--color-primary);
}

.menu-items a:hover:nth-child(2) {
  color: var(--color-secondary);
}

.menu-items a:hover:nth-child(3) {
  color: var(--color-tertiary);
}

.menu-items a:hover:nth-child(4) {
  color: var(--color-accent1);
}

.menu-items a:hover:nth-child(5) {
  color: var(--color-accent2);
}

/* Hamburger-knop */
.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 50px;
  height: 90px;
}
.hamburger .line {
    margin-top: 6px;
    margin-bottom: 9px;
    width: 100%;
    height: 6px;
    background: black;
    transition: all 0.3s ease-in-out;
}


/* LABEL Sectie */
.label-section {
  display: flex; /* Zet alles naast elkaar */
  align-items: center;
  justify-content: space-between;
  margin-top: 114px;
  margin-bottom: var(--spacing-medium);
}

.label-section h1 {
  font-size: var(--font-size-large);
  font-weight: bold;
  flex: 1.4; /* H1 neemt meer ruimte */
  margin: var(--spacing-large) calc(var(--spacing-large) * 2) var(--spacing-small) 0;
}

.label-containers {
  display: flex;
  gap: var(--spacing-medium); /* Ruimte tussen de blokken */
  flex: 1.2; /* Flexibele breedte */
}

.label-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  align-content: flex-end;
  flex-wrap: nowrap;
}
.label-img {
  width: 120px;
  height: 120px;
  background: var(--color-black);
  border-radius: var(--border-radius);
  display: flex;
  justify-content: center;
  align-items: center;
}
.label-box .label-img img {
  width: 120px;
}

.label-text {
  padding-top: var(--spacing-small);
  font-weight: bold;
}

#download-count {
    font-size: 1em;
	color:#aa9aaa;
    text-transform: uppercase;
}

h2 {
  font-size: var(--font-size-xlarge);
  margin: 0px;
  text-transform: uppercase;
}
.container {
  padding: var(--spacing-medium);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  background: var(--color-white);
}

.container p {
  margin-top: 0px;
}
.why {
  margin-top: 70px;
}

.ampersand {
  font-size: var(--font-size-large);
}

/* MMMLABEL Sectie */
.mmmlabel {
  display: flex;
  align-items: normal;
  flex-direction: column;
  align-content: flex-end;
  flex-wrap: nowrap;
  background-color: var(--color-white);
  padding-top: var(--spacing-medium);
  padding-bottom: var(--spacing-medium);
}

/* MMMLABEL & DOWNLOAD SECTION */
.mmmlabel-content {
  display: flex;
  gap: var(--spacing-medium);
  justify-content: center;
  margin-top: var(--spacing-medium);
}

.table-container {
  flex: 1.5;
  font-weight: bold;
}
.table-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--spacing-small);
}
.table-grid .row {
  display: flex;
  background: var(--color-gray-medium);
  border-radius: var(--border-radius);
  height: 133px;
  justify-content: center;
}

.table-grid .col-1 {
  flex: 0.25;
  display: flex;
  justify-content: left;
  align-items: center;
  margin-left: 12px;
}
.table-grid .col-1 img {
  width: 65px;
}
.table-grid .col-2 {
  flex: 0.5;
  display: flex;
  justify-content: left;
  align-items: center;
  text-transform: uppercase;
}

.table-grid .col-3 {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: normal;
  font-size: 0.9em;
}
/* formulier & DOWMLOAD */
.download {
  flex: 1;
  border-radius: var(--border-radius);
  background: var(--color-black);
  color: var(--color-white);
  padding: var(--spacing-medium);
}

.input-field {
  display: block;
  width: 92%;
  margin-bottom: var(--spacing-medium);
  padding: 4%;
  background: var(--color-gray-medium);
  border: none;
  border-radius: var(--border-radius);
  height: 50px;
  font-size: var(--font-size-medium);
}

.submit-button {
  width: 100%;
  padding: 4%;
  border: 2px solid var(--color-accent1);
  background: #aa9aaa;
  margin-bottom: var(--spacing-small);
  height: 105px;
  color: var(--color-white);
  border-radius: var(--border-radius);
  cursor: pointer;
  text-transform: uppercase;
  font-weight: bold;
  font-size: var(--font-size-large);
}

.submit-button:hover {
  background: var(--color-accent1);
  color: var(--color-white);
}

/* HOW TO USE IT & ABOUT US Sectie */
.how-about {
  justify-content: center;
  align-items: flex-start;
}
.how {
  flex: 1;
}
.how-about .container {
  flex: 1;
  padding: var(--spacing-medium);
}
.how-about .examples {
  margin-top: var(--spacing-large);
}
.how-about .examples .image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-small);
}
.how-about .examples .image-grid a {
  text-decoration: none; 
  color: inherit; 
  font-weight: bold;
  text-decoration: none;
}

.how-about .examples .image {
  height: 273px;
  text-align: center;
}

.how-about .examples .image img {
  display: block; 
  margin: 0 auto var(--spacing-small) auto; 
  max-width: 100%; 
  height: auto; 
}
.how-about .examples .subscription {
  font-size: 0.8em; 
  color: #555; 
  margin-top: var(--spacing-small); 
  text-align: left;
  text-transform: uppercase;
}


.proces .image a {
  text-decoration: none; 
  color: inherit; 
  font-weight: bold;
  text-decoration: none;
}
.proces a img{
	width: 25%;
    margin-right: 13px;
}

.image-grid :nth-child(1) a:hover .subscription {
  color: var(--color-accent1);
}
.image-grid :nth-child(2) a:hover .subscription{
  color: var(--color-secondary);
}

.image-grid :nth-child(3) a:hover .subscription{
  color: var(--color-accent1);
}

.image-grid :nth-child(4) a:hover .subscription {
  color: var(--color-primary);
}

/* Standaard stijl voor alle links */
#about a {
  color: inherit;
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
}
#about a:hover  {
  color: var(--color-primary); 
}

@media (max-width: 768px) {
  body, html {
    font-size: var(--font-size-small);
  }

  .wrapper {
    width: 95%;
    padding: var(--spacing-small);
    margin: 0;
  }
  .backgrounds {
    width: 95%;
    padding: var(--spacing-small);
    margin: 0;
  }

  header.menu {
    width: 95%;
	display: flex;
	flex-direction: row;
	height: 13vh;
	background: white;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: space-between;
	align-items: center; 
	margin-top:-10px;
  }
  .menu-items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-small);
    margin-top: var(--spacing-small);
    display: none;
  }

  .hamburger {
    display: block;
    font-size: var(--font-size-xlarge);
    font-weight: bold;
  }
  
/* Actieve toestand */
.menu.active  {
	height: 60%;
}
.menu.active .menu-items {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	font-size: var(--font-size-medium);
	padding: var(--spacing-small);
}
.menu-items a {
    margin-top: 23px;
}
.menu.active .hamburger .line:nth-child(1) {
  transform: rotate(45deg) translate(10px, 5px);
}

.menu.active .hamburger .line:nth-child(2) {
  opacity: 0;
}

.menu.active .hamburger .line:nth-child(3) {
  transform: rotate(-45deg) translate(15px, -12px);
}
  .label-section {
    flex-direction: column;
    margin-top: 65px;
  }
  .label-section h1 {
    font-size: 2em;
  }

  .label-box {
    margin-bottom: 15px;
  }

  .what-why {
    flex-direction: column;
  }
.why {
  margin-top: -20px;
}
  .container {
   
    padding: var(--spacing-medium);
  }
  .mmmlabel {
    background-color: transparent;
  }
  .mmmlabel-content {
    flex-direction: column-reverse;
    align-items: center;
  }
  
  .table-grid .row {
    flex-direction: column;
    height: auto;
    padding: var(--spacing-small);
  }

  .table-grid .col-1, .table-grid .col-2, .table-grid .col-3 {
    flex: none;
    margin-bottom: var(--spacing-small);
    margin-left: 0px;
	height: 25%;
  }
  .table-grid .col-1 img {
     position: relative;
     width: 52px;
     top: 8px;
  }
  .download {
    width: 90%;
    padding: var(--spacing-medium);
  }

  .input-field {
    width: 90%;
    margin-bottom: var(--spacing-small);
  }

  .submit-button {
    width: 98%;
  }
  .how-about .examples {
    width: 89%;
    margin-top: 0px;
  }
  .how-about .examples .image {
    height: 127px;
  }
  .how-about {
    flex-direction: column-reverse;
  }

  .examples .image-grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .examples .image {
    height: auto;
    padding-bottom: 56.25%; /* 16:9 ratio */
  }
}

/*carousel */
.carousel-item {
  width: 100%;
  height: 100%;
  position: relative;
  perspective: 1000px;
  overflow: hidden; 
  text-align: left;
}
.carousel-item div {
 position: absolute;
  width: 100%;
  height: 0%;
  top: 36%;
  backface-visibility: hidden;
  opacity: 0;
  transform: rotateX(90deg);
  animation: fadeInRotate 10s forwards infinite;
}

.carousel-item div:nth-child(1) { animation-delay: 0s; }
.carousel-item div:nth-child(2) { animation-delay: 5s; }


@keyframes fadeInRotate {
  0% { opacity: 0; transform: rotateX(90deg); }
  50% { opacity: 1; transform: rotateX(0deg); }
  100% { opacity: 0; transform: rotateX(90deg); }
}