@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&display=swap');

@media (max-width: 440px) {
  body {
    zoom: 0.8; /* Zoom out to 80% */
  }
}


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

button {
  border: none;
  outline: none;
}

img {
  display: block;
}


/* avoid inline-image whitespace */
h1 {
  font-family: 'Playfair Display', serif;
  font-weight: normal;
  font-size: 36px;
  line-height: 1.2;
  color: #FFDECF;
}

h2 {
  font-family: 'Arvo', sans-serif;
  font-weight: normal;
  font-size: 24px;
  line-height: 1.3;
  color: #333;
}

h3 {
  font-family: 'Arvo', sans-serif;
  font-weight: normal;
  font-size: 16px;
  line-height: 1.5;
  color: #FFDECF;
}



/* Block: page (page-level styling & decorations) */
.page {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
  background: #393959;
  justify-content: center;
}

.page__background {
  position: absolute;
  top: 40px;
  /* width: 440px; */
  height: 5538px;
  /* left: -12px;      sticks out 12px on the left */
  /* width: 461.24px;  440 + 12 + 9.24 */
  z-index: 0;
}

/* Block: navbar */
.navbar {
  display: flex;
  align-items: flex-start;
  /* menu sits lower than logo */
  gap: 250px;
  /* Figma exact spacing */
  max-width: 440px;
  margin: 0 auto;
  padding: 40px 36px 0 24px;
  /* top/right/bottom/left per Figma */
  position: relative;
  z-index: 3;
  /* above background notes */
}

.navbar__logo {
  width: 85px;
  height: 73px;
}

.navbar__menu-icon {
  width: 45px;
  height: 45px;
  margin-top: 14px;
  z-index: 2000;
   position: absolute;
}

/* 54 - 40 */
/* Block: hero */
.hero {
  margin: 115px auto;
  /* centers horizontally */
  max-width: 400px;
  height: 572px;
  text-align: center;
  position: relative;
  /*z-index: 3; */
  /* above background notes */
}

/* Block: hero */
.content {
  margin: 156px auto 0;
  /* centers horizontally */
  max-width: 400px;
  /* height: 4690px; */
  /* text-align: center; */
  position: relative;
  z-index: auto;
  /* above background notes */
}

.hero__subtitle {
  margin-top: 20px;
}

.hero__divider {
  margin-top: 140px;
  width: 400px;
}

.hero__description {
  margin-top: 16px;
  max-width: 400px;
}

.hero__cta {
  margin-top: 140px;
  width: 400px;
  height: 71px;
  border-radius: 36px;
  background-color: #E3DAC9;
  color: #333333;
  font-family: 'Arvo', sans-serif;
  font-size: 24px;
  line-height: 1.3;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.hero__cta:active {
  background-color: #D2C3A8;
}

/* Make the card the 400px column (centered in the 440px page) */
.card {
  position: relative;
  width: 400px;
  height: 475px;
  margin: 0 auto;
  /* centers the 400px card: 20px gutter on each side */
}

/* Mask aligns to the card’s left edge (== body left + 20px) */
.card__media-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 228px;
  overflow: hidden;
  border-radius: 12px;
}

/* Keep your crop */
.card__media-image {
  position: absolute;
  top: -25px;
  left: 0;
  width: 400px;
  height: auto;
}

/* Keep your crop */
.card__media-image__mtpl {
  position: absolute;
  top: -200px;
  left: 0;
  width: 400px;
  height: auto;
}


/* Center the heading within the 400px card (no translate needed) */
.card__heading {
  position: absolute;
  top: 252px;
  left: 0;
  width: 400px;
  text-align: center;
}

/* DESCRIPTION: 400px wide, left-aligned, 24px below heading, aligned to mask */
.card__description {
  position: absolute;
  top: 307px;
  /* 252 + 24 */
  left: 0;
  /* aligns with card/mask left edge */
  width: 400px;
  /* fixed width */
  text-align: left;
}

.card__cta {
  position: absolute;
  top: 403px;
  left: 50%;
  transform: translateX(-50%);
  width: 216px;
  height: 44px;
  background-color: #E3DAC9;
  color: #333333;
  font-family: 'Arvo', sans-serif;
  font-size: 16px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 36px;
}

.card__cta:active {
  background-color: #D2C3A8;
}

.card__heading,
.card__description,
.card__cta,
.card__point-group,
.card__media-mask {
  position: absolute;
  /* as you already have */
  z-index: 3;
  /* above the background */
}

.card__point-group {
  position: absolute;
  top: 451px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
}

.card__point-group img:not(:first-child) {
  margin-left: -9px;
  /* overlap left edge into previous image */
}


.underline {
  text-underline-offset: 4px;
  text-decoration: underline;
  text-decoration-thickness: 2.5%;
}

.content__decor-line {
  position: absolute;
  top: 558px;
  right: 17px;
}



.pthu {
  position: relative;
  width: 100%;
  max-width: 400px;
  height: 1893px;
  border-radius: 12px;
  z-index: 3;
  background-color: #C5C6FF;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  margin-top: 60px;
}

.pthu__header {
  position: relative;
  color: #333333;
  font-style: italic;
  font-size: 24px;
  margin: 36px 50px 0;
  line-height: 1.3;
}

.pthu__par {
  color: #333333;
  margin: 24px 24px 0;
}

.pthu__book {
  margin: 48px 24px 0;
  width: 352px;
  border-radius: 12px;
}

.pthu__carrousel {
  margin-top: 5px;
  margin-left: 181px;
  display: flex;
  flex-direction: row;
}

.pthu__carrousel img:not(:first-child) {
  margin-left: -9px;
  /* overlap left edge into previous image */
}

.pthu__cta {
  display: block;
  margin: 4px auto 0;
  width: 328px;
  height: 59px;
  background-color: #E3DAC9;
  color: #333333;
  font-family: 'Arvo', sans-serif;
  font-size: 24px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 36px;
}

.pthu__cta:active {
  background-color: #D2C3A8;
}

.pthu__snippet {
  width: 331px;
  margin: 32px auto 0;
  display: block;
}

.pricebox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 296px;
  align-items: center;
}

.smallmargin {
  margin: 16px auto 0;
}

.bigmargin {
  margin: 16px auto 0;
}

.pricebox p {
  font-size: 16px;
  color: #333333;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2.5%;
}

.price {
  width: 136px;
  height: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 36px;
  border: 1px solid #333333;
}

.price p {
  font-size: 24px;
  color: #333333;
}

.vat {
  margin-top: 8px;
  margin-left: 231px;
  color: #333333;
  font-size: 12px;
}

.wavy-line {
  margin: 4px auto 0;
  max-width: 365px;
  overflow: hidden;
  object-fit: cover;
  object-position: center;
  display: block;
}

.cta2 {
  display: block;
  margin: 44px auto 0;
  width: 282px;
  height: 51px;
  background-color: #E3DAC9;
  color: #333333;
  font-family: 'Arvo', sans-serif;
  font-size: 24px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 36px;
}

.cta2:active {
  background-color: #D2C3A8;
}


.library {
  margin-top: 60px;
}

.primary {
  display: block;
  margin: 40px auto 0;
  width: 325px;
  height: 59px;
  background-color: #E3DAC9;
  color: #333;
  border-radius: 36px;
  font-size: 24px;
  font-family: 'Arvo', sans-serif;
  justify-self: center;
}

.primary:active {
  background-color: #D2C3A8;
}

.secondary {
  display: block;
  margin: 16px auto 0;
  width: 362px;
  height: 55px;
  background-color: transparent;
  border: 1px solid #A3A3FF;
  color: #FFDECF;
  border-radius: 36px;
  font-size: 24px;
  font-family: 'Arvo', sans-serif;
  justify-self: center;
}

.secondary:active {
  background-color: #A3A3FF;
  color: #333;
}

.library {
  position: relative;
  z-index: 3;
}

.full-bleed-wrap {
  padding-top: 92px;
  /* guaranteed, no collapsing */
}

.full-bleed {
  display: block;
  width: calc(100% + 40px);
  /* 400 → 440 bleed */
  margin-left: -20px;
  margin-right: -20px;
  max-width: none;
  position: relative;
  z-index: 4;
}


.footer {
  position: relative;
  overflow: hidden;
  background-color: #242438;
  width: 100%;
  height: 325px;
}

.icons {
  /*position: relative;*/
  /*margin: 40px 36px 0;*/
  display: flex;
  flex-direction: row;
  gap: 32px;
  /*max-width: 368px;*/
  margin-top: 40px;

}

.icon-wrapper {
  display: flex;
  justify-content: center;
}


.icons img {
  width: 48px;
  height: 48px;
}

.info {
  display: flex;
  flex-direction: column;
  align-content: space-between;
  gap: 12px;
  margin-top: 42px;
  margin-left: 20px;
}

.infoitem {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  text-align: left;
}

.infoitem img {
  width: 20px;
  height: 20px;
}

.infoitem p {
  width: 100%;
  font-size: 12px;
  color: #FFDECF;
}

.links p {
  color: #FFDECF;
}

.footer__logo {
  width: 98px;
  height: 84px;
  position: absolute;
  top: 130px;
  right: 32px;
}

.links {
  display: flex;
  flex-direction: row;
  gap: 16px;
}

.footer__navbar {
  margin: 46px auto 0;
  justify-content: center;
  display: flex;
}



.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  overflow-y: auto;
  /* allow scrolling if needed */
}

.modal-content {
  position: relative;
  background: #c5c6ff;
  border-radius: 12px;
  width: 375px;
  padding-left: 10px; 
  padding-right: 10px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  max-height: 90vh;
  /* never taller than viewport */
  margin: 5vh auto;
  padding-top: 64px;
  overflow-y: auto;
  height: 100%;
}

.close {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
}

.field {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-right: 228px;
  margin-top: 20px;
  margin-left: auto;
  align-items: center;
}

.field>p {
  text-align: right;
  /* right-align label text */
  margin: 0 10px 0 0;
  /* 10px gap to the input */
  white-space: nowrap;
  /* prevent label wrapping */
  flex: 1;
  /* let label take only as much space as needed */
}

.field>div {
  flex: 0 0 355px;
  /* fixed width for inputs */
}

.field input {
  width: 100%;
  height: 40px;
  border-radius: 16px;
  border: 1px solid #333;
  outline: none;
  background: transparent;
  padding: 8px 24px;
  color: #333;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  font-family: 'Arvo', sans-serif;
  caret-color: #7070D1;
}

.field input::placeholder {
  color: #8a8a8a;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  font-family: 'Arvo', sans-serif;
}

sup {
  color: #DC0000;
}

.error {
  font-size: 12px;
  line-height: 1.5;
  font-family: 'Lora', serif;
  font-weight: 500;
  margin-top: 8px;
  margin-left: 12px;
  color: #DC0000;
}

.error.hidden {
  display: none;
}

.radiofield {
  gap: 21px;
  /* display: flex; */
  flex-direction: row;
  margin-top: 36px;

  align-items: flex-start;
}

.radio-group {
  margin-top: 12px;
  gap: 16px 24px;
  /* row gap / column gap */
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  /* space between the button and text */
  font-family: 'Arvo', sans-serif;
  font-size: 16px;
  color: #333;
}

.radio-group input[type="radio"] {
  margin: 0;
  /* remove UA stylesheet spacing */
}


/* Make sure the last item spans full width (goes to new row) */
.radio-group label:last-child {
  grid-column: 1 / -1;
}

.radio-group-large .row {
  display: flex;
  gap: 16px 24px;
  margin-top: 12px;
  margin-bottom: 16px;
    justify-content: center; /* centers items horizontally */

}

.radio-group-large label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #333;
  font-size: 16px;
  line-height: 1.5;
  font-family: 'Arvo', sans-serif;

}

.radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Arvo', sans-serif;
  font-size: 16px;
  color: #333;
  cursor: pointer;
  position: relative;
}

/* your custom circle */
.custom-radio {
  width: 12px;
  height: 12px;
  border: 1px solid #333;
  border-radius: 50%;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.radio input[type="radio"]:checked+.custom-radio {
  background: transparent url("media/spradio.svg") no-repeat center center;
  background-size: cover;
  /* or cover if you want it to stick out */
}

.hidden {
  display: none;
}


textarea {
  /*max-width: 300px; */
  width: 100%;
  margin-top: 20px;
 
  height: 92px;
  border-radius: 16px;
  border: 1px solid #333;
  outline: none;
  background: transparent;
  padding: 10px 16px;
  color: #333;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  font-family: 'Arvo', sans-serif;
  caret-color: #7070D1;
  display: block;
}

textarea::placeholder {
  color: #8a8a8a;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  font-family: 'Arvo', sans-serif;
}

.checkfield {
  margin-top: 42px;
  gap: 16px;
  display: flex;
  flex-direction: column;


}

.checkfield-row {
  margin-top: 30px;
  gap: 28px;
  display: flex;
  flex-direction: column;


}

.checkfield-row.hidden {
  display: none;
}


/* container: 2 equal-width columns, gaps */
.checkbox-group {
 
  columns: 1;

}

/* container: 2 equal-width columns, gaps */
.om-checkbox-group {
 columns: 1;
}

/* container: 2 equal-width columns, gaps */
.om-checkbox-group2 {
 columns: 1;
}




/* each checkbox line */
.checkbox {
  display: flex;
  margin-top: 5px;
  align-items: center;
  gap: 12px;
  font-family: 'Arvo', sans-serif;
  font-size: 16px;
  color: #333;
  cursor: pointer;
}

/* hide native checkbox */
.checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.custom-checkbox {
  width: 20px;
  height: 20px;
  border: 1px solid #333;
  background: transparent;
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}

/* when checked → show your SVG */
.checkbox input[type="checkbox"]:checked+.custom-checkbox {
  background-image: url("media/spcheck.svg");
}


.vertifield {
  display: flex;
  flex-direction: column;
  margin-top: 20px;

}

.radio-group-two {

  columns: 1;

}

.radio-group-four {
  columns: 1;
}

.overwrite {
  /*max-width: 300px; */
  margin: 0;
  width: 100%;
  height: 92px;
  border-radius: 16px;
  border: 1px solid #333;
  outline: none;
  background: transparent;
  padding: 10px 16px;
  color: #333;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  font-family: 'Arvo', sans-serif;
  caret-color: #7070D1;
  display: block;
}

.radio-group-vertical {
  max-width: 400px;
  display: flex;
  flex-direction: column;
    margin-top: 12px;
  gap: 16px;
  /* vertical gap between the two rows */
}

.radio-group-vertical .row {
  display: flex;
  flex-direction: row;
  gap: 24px;
  /* horizontal gap between radios */
}

.custom-radio-alt {
  width: 12px;
  height: 12px;
  border-radius: 100%;
  border: 1px solid #333;
  background: transparent;
  display: inline-block;
  position: relative;
  /* anchor for ::after */
  z-index: 0;
  /* border stays below */
}

.radio.alt input[type="radio"]:checked+.custom-radio-alt::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url("media/omradio.svg") no-repeat center;
  background-size: cover;
  /* preserve SVG aspect ratio */
  width: 11.8px;
  /* pick something close to your SVG’s natural size */
  height: 8.73px;
  z-index: 1;
  pointer-events: none;
}


.vertifieldinput {
  display: flex;
  flex-direction: column;
  margin-top: 42px;

  gap: 16px;
}

.vertifieldinput input {
    width: 100%;
  height: 40px;
  border-radius: 16px;
  border: 1px solid #333;
  outline: none;
  background: transparent;
  padding: 8px 24px;
  color: #333;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  font-family: 'Arvo', sans-serif;
  caret-color: #7070D1;
}

.vertifieldinput input::placeholder {
  color: #8a8a8a;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  font-family: 'Arvo', sans-serif;
}


.radio-group-two-alt {
  margin-top: 12px;
  columns: 1;
}

.custom-radio-alt {
  width: 12px;
  height: 12px;
  border: 1px solid #333;
  border-radius: 50%;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.radio.alt input[type="radio"]:checked+.custom-radio-alt {
  background: transparent url("media/omradio.svg") no-repeat center center;
  background-size: cover;
  /* or cover if you want it to stick out */
}


.custom-radio-alt2 {
  width: 12px;
  height: 12px;
  border: 1px solid #333;
  border-radius: 50%;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.radio.alt2 input[type="radio"]:checked+.custom-radio-alt2 {
  background: transparent url("media/collectionradio.svg") no-repeat center center;
  background-size: contain;

  /* or cover if you want it to stick out */
}

.custom-checkbox-alt {
  width: 20px;
  height: 20px;
  border: 1px solid #333;
  background: transparent;
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}

/* when checked → show your SVG */
.checkbox.alt input[type="checkbox"]:checked+.custom-checkbox-alt {
  background-image: url("media/mtplcheck.svg");
}




/*SPECIAL STYlE FOR SERVICE HTML PAGE*/

.mask {
  border-radius: 12px;
  width: 400px;
  height: 434px;
  overflow: hidden;
}

.img {
  margin-top: -22px;
  margin-bottom: -82px;
  width: 400px;
  height: 538px;
}

.mask2 {
  border-radius: 12px;
  width: 400px;
  height: 228px;
  overflow: hidden;
}

.img2 {
  margin-top: -101px;
  margin-bottom: -267px;
  width: 400px;
  height: 596px;
  object-fit: cover;
  object-position: center;
}


/*SPECIAL STYlES */

.hero__title {
 font-size: 64px;

}

.hero__description {
  font-size: 24px;  
  
}

.card__heading {
  font-size: 24px;
} 

html {
  background-color: #393959;
}

/* Center all page content and cap it at 1440px */
body {
  margin: 0 auto;
  max-width: 440px;
  background-color: transparent;
  /* background color handled by html */
  min-height: 100%;
  position: relative;
  /* in case any abspos falls back to body */
}



p {
  font-size: 16px;
  line-height: 1.5;
  color: #FFDECF;
  font-family: 'Arvo', sans-serif;
}


.menu-toogle {
    position: relative;

}

.sidebar {
  background-color: #5D5DCB;
  color: #FFDECF;
  width: 331px;
  padding: 20px;
  display: none;
    font-family: 'Arvo', sans-serif;
  font-weight: normal;
  font-size: 24px;
  z-index: 1500;
 
  overflow-y: auto;
  position: fixed;
  border-radius: 12px;
  height: 725px;
   position: absolute;       /* Position relative to parent */
  left: 90px; 
 
}

.menu {
  list-style: none;
  padding: 0;
   margin-top: 50px;
}

.menu li {
  margin: 25px 0;
  padding-bottom: 25px;
   border-bottom: 1px solid #7070D1; 
}


.submenu {
  height: 180px;
}


.submenu li {
 margin: 25px 0;

 border-bottom: none; 
}


.submenu li a {
    font-size: 16px;
    text-align: center;

}

.menu a  {
  color: #FFDECF;
  text-decoration: none;
  font-family: 'Arvo', sans-serif;
  font-weight: normal;
  font-size: 24px;
  display: block;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;

}


.submenu-toggle {
    color: #FFDECF;
  text-decoration: none;
  font-family: 'Arvo', sans-serif;
  font-weight: normal;
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
    display: inline-flex; 
  align-items: center;
}


.submenu {
  list-style: none;
  display: none; 
}

.submenuimg {
   height: 10px; 
   width: 16px; 
   vertical-align: middle; 
   margin-left: 0.5em;
}

.language-switcher {
  margin-top: 40px;
  display: flex;
  justify-content: space-around;
}

.language-switcher a {
  color: #FFDECF;
  text-decoration: none;
    font-family: 'Arvo', sans-serif;
  font-weight: normal;
  font-size: 16px;
}

/* --- Smooth horizontal carousel --- */
.card-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.card-carousel__track {
  display: flex;
  transition: transform 480ms ease; /* smooth! */
  will-change: transform;
}

.card-carousel__track.dragging {
  transition: none; /* disable transition while user drags */
}

.content .card {
  flex: 0 0 100%;
  /* Ensure cards align well inside track */
  margin: 0;
}