/* =========================================
   AANBOD PAGE
========================================= */

.page-aanbod {
  background: #ffffff;
}


/* =========================================
   HEADER
========================================= */

.page-aanbod .aanbod-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;

  width: 100%;

  background: transparent;

  transition:
    background 0.25s ease,
    box-shadow 0.25s ease;
}


.page-aanbod .aanbod-header.scrolled {
  background: rgba(255, 255, 255, 0.97);

  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
}


.page-aanbod .aanbod-header .main-nav-left a {
  color: #000000;
}


.page-aanbod .aanbod-header .button-nav {
  color: #000000;

  border-color: #000000;
}


/* =========================================
   LOGO
========================================= */

/*
  Niet met transform werken op .logo,
  want style-v5.css gebruikt dat element
  al voor de horizontale centrering.

  We verplaatsen de volledige container
  omhoog via margin-top.
*/

.page-aanbod .aanbod-header .logo {
  margin-top: -22px;
}


/*
  Eventuele eerdere img-transform
  volledig neutraliseren.
*/

.page-aanbod .aanbod-header .logo img {
  transform: none;
  margin: 0;
}


/* =========================================
   HERO
========================================= */

.aanbod-hero {
  position: relative;

  width: 100%;

  height: min(83vh, 760px);

  min-height: 620px;

  overflow: hidden;

  background: #eee9dc;
}


.aanbod-hero-image {
  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center center;
}


/* =========================================
   INTRO
========================================= */

.aanbod-intro {
  width: 100%;

  padding: 42px 30px 74px;

  background: #ffffff;
}


.aanbod-intro-inner {
  width: min(1120px, 100%);

  margin: 0 auto;

  text-align: center;
}


.aanbod-intro h1 {
  margin: 0 0 42px;

  font-family: "Altrincham", sans-serif;

  font-size: clamp(48px, 5vw, 74px);

  font-weight: 700;

  line-height: 1;

  letter-spacing: 1px;
}


.aanbod-intro-copy {
  color: #858585;
}


.aanbod-intro-copy p {
  margin: 0 auto 36px;

  font-family: "Montserrat", sans-serif;

  font-size: 15px;

  font-weight: 400;

  line-height: 1.55;

  letter-spacing: 0.06em;
}


.aanbod-intro-copy p:last-child {
  margin-bottom: 52px;
}


/* =========================================
   SWITCH
========================================= */

.aanbod-switch {
  width: min(540px, 100%);

  height: 78px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 1fr 1fr;

  border: 1.5px solid #777777;

  border-radius: 999px;

  overflow: hidden;

  background: #ffffff;
}


.aanbod-switch-button {
  border: 0;

  border-radius: 999px;

  background: transparent;

  color: #777777;

  font-family: "Montserrat", sans-serif;

  font-size: 20px;

  font-weight: 400;

  cursor: pointer;

  transition:
    background 0.25s ease,
    color 0.25s ease;
}


.aanbod-switch-button.active {
  background: #d1a296;

  color: #ffffff;
}


.aanbod-switch-button[data-target="a-la-carte"].active {
  background: #95bdb0;
}


/* =========================================
   TAB PANELS
========================================= */

.aanbod-tab-panel {
  display: none;
}


.aanbod-tab-panel.active {
  display: block;
}


/* =========================================
   ALL-IN-ONE INTRO
========================================= */

.allin-intro {
  width: 100%;

  padding: 40px 40px 52px;

  background: #d1a296;

  color: #ffffff;
}


.allin-intro-inner {
  width: min(1320px, 100%);

  margin: 0 auto;

  text-align: center;
}


.allin-intro h2 {
  margin: 0 0 46px;

  font-family: "Altrincham", sans-serif;

  font-size: clamp(34px, 3vw, 46px);

  line-height: 1.1;
}


.allin-intro p {
  margin: 0 auto 39px;

  max-width: 1250px;

  font-family: "Montserrat", sans-serif;

  font-size: 15px;

  font-weight: 400;

  line-height: 1.55;
}


.allin-intro p:last-child {
  margin-bottom: 0;
}


/* =========================================
   ALL-IN-ONE INCLUDED
========================================= */

.included-section {
  position: relative;

  width: 100%;

  padding: 92px 6vw 125px;

  overflow: hidden;

  background: #ffffff;
}


.included-inner {
  position: relative;

  z-index: 2;

  width: min(1500px, 100%);

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    0.65fr
    1.15fr
    1.15fr;

  gap: clamp(55px, 6vw, 110px);
}


.included-heading h2 {
  margin: 0;

  font-family: "Altrincham", sans-serif;

  font-size: clamp(30px, 2.6vw, 42px);

  line-height: 1.08;
}


.included-column {
  display: flex;

  flex-direction: column;

  gap: 40px;
}


.included-item {
  position: relative;
}


.included-item h3 {
  position: relative;

  margin: 0 0 25px;

  padding-left: 21px;

  font-family: "Altrincham", sans-serif;

  font-size: 20px;

  line-height: 1.25;
}


.included-item h3::before {
  content: "";

  position: absolute;

  top: 9px;

  left: 0;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: #d1a296;
}


.included-item p {
  margin: 0;

  padding-left: 21px;

  color: #555555;

  font-family: "Montserrat", sans-serif;

  font-size: 15px;

  line-height: 1.55;
}


/* =========================================
   ALL-IN-ONE SHAPES
========================================= */

.included-background-circle {
  position: absolute;

  z-index: 1;

  width: 620px;

  height: 620px;

  box-sizing: border-box;

  border-radius: 50%;

  pointer-events: none;
}


/* LINKS = GEVULDE TRANSPARANTE ROZE BOL */

.circle-left {
  top: 65px;

  left: 1.5%;

  background: rgba(209, 162, 150, 0.13);

  border: 0;
}


/* RECHTS = TRANSPARANTE ROZE RING */

.circle-right {
  top: 75px;

  right: 1.5%;

  background: transparent;

  border: 120px solid rgba(209, 162, 150, 0.13);
}


/* =========================================
   ALL-IN-ONE CTA
========================================= */

.included-cta {
  position: relative;

  z-index: 3;

  margin-top: 78px;

  text-align: center;
}


.included-cta a {
  display: inline-block;

  padding: 0 0 8px;

  border-bottom: 2px solid #d1a296;

  color: #000000;

  font-family: "Montserrat", sans-serif;

  font-size: 15px;

  font-weight: 700;

  letter-spacing: 0.32em;

  text-transform: uppercase;
}


/* =========================================
   À LA CARTE INTRO
========================================= */

.alacarte-intro {
  width: 100%;

  padding: 38px 30px 48px;

  background: #95bdb0;

  color: #ffffff;
}


.alacarte-intro-inner {
  width: min(1200px, 100%);

  margin: 0 auto;

  text-align: center;
}


.alacarte-intro h2 {
  margin: 0 0 44px;

  font-family: "Altrincham", sans-serif;

  font-size: clamp(36px, 3vw, 48px);

  font-weight: 700;

  line-height: 1.1;
}


.alacarte-intro p {
  margin: 0;

  font-family: "Montserrat", sans-serif;

  font-size: 15px;

  line-height: 1.6;

  letter-spacing: 0.02em;
}


/* =========================================
   À LA CARTE SERVICES
========================================= */

.alacarte-services {
  position: relative;

  width: 100%;

  padding: 92px 6vw 125px;

  overflow: hidden;

  background: #ffffff;
}


.alacarte-services-inner {
  position: relative;

  z-index: 2;

  width: min(1500px, 100%);

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: clamp(80px, 8vw, 140px);
}


.alacarte-column {
  display: flex;

  flex-direction: column;

  gap: 48px;
}


.alacarte-item {
  position: relative;

  width: 100%;

  max-width: 570px;
}


.alacarte-column:first-child .alacarte-item {
  margin-left: auto;
}


.alacarte-column:last-child .alacarte-item {
  margin-right: auto;
}


.alacarte-item h3 {
  position: relative;

  margin: 0 0 25px;

  padding-left: 21px;

  font-family: "Altrincham", sans-serif;

  font-size: 20px;

  font-weight: 700;

  line-height: 1.25;
}


.alacarte-item h3::before {
  content: "";

  position: absolute;

  top: 9px;

  left: 0;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: #95bdb0;
}


.alacarte-item p {
  margin: 0;

  padding-left: 21px;

  color: #555555;

  font-family: "Montserrat", sans-serif;

  font-size: 15px;

  line-height: 1.55;
}


/* =========================================
   À LA CARTE SHAPES
========================================= */

.alacarte-circle {
  position: absolute;

  z-index: 1;

  width: 620px;

  height: 620px;

  box-sizing: border-box;

  border-radius: 50%;

  pointer-events: none;
}


/* LINKS = GEVULDE TRANSPARANTE GROENE BOL */

.alacarte-circle-left {
  top: 65px;

  left: 1.5%;

  background: rgba(149, 189, 176, 0.18);

  border: 0;
}


/* RECHTS = TRANSPARANTE GROENE RING */

.alacarte-circle-right {
  top: 75px;

  right: 1.5%;

  background: transparent;

  border: 120px solid rgba(149, 189, 176, 0.18);
}


/* =========================================
   À LA CARTE CTA
========================================= */

.alacarte-bottom-cta {
  position: relative;

  z-index: 3;

  margin-top: 90px;

  text-align: center;
}


.alacarte-bottom-cta a {
  display: inline-block;

  padding-bottom: 8px;

  border-bottom: 2px solid #95bdb0;

  color: #000000;

  font-family: "Montserrat", sans-serif;

  font-size: 15px;

  font-weight: 700;

  letter-spacing: 0.32em;

  text-transform: uppercase;
}


/* =========================================
   FOOTER IMAGE
========================================= */

.aanbod-footer-image {
  width: 100%;

  height: clamp(330px, 37vw, 520px);

  background-image:
    url("/assets/images/aanbod-footer-image.png");

  background-size: cover;

  background-position: center center;

  background-repeat: no-repeat;

  background-attachment: fixed;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 800px) {


  /* HEADER */

  .page-aanbod .aanbod-header {
    position: relative;

    height: 88px;

    background: #ffffff;
  }


  .page-aanbod .aanbod-header.scrolled {
    box-shadow: none;
  }


  /* LOGO MOBILE */

  .page-aanbod .aanbod-header .logo {
    margin-top: 0;
  }


  .page-aanbod .aanbod-header .logo img {
    transform: none;

    margin: 0;
  }


  /* HERO */

  .aanbod-hero {
    height: 440px;

    min-height: 0;
  }


  .aanbod-hero-image {
    object-position: center center;
  }


  /* INTRO */

  .aanbod-intro {
    padding: 45px 25px 55px;
  }


  .aanbod-intro h1 {
    margin-bottom: 32px;

    font-size: 43px;
  }


  .aanbod-intro-copy p {
    margin-bottom: 27px;

    font-size: 13px;

    line-height: 1.6;

    letter-spacing: 0.02em;
  }


  .aanbod-intro-copy p br {
    display: none;
  }


  /* SWITCH */

  .aanbod-switch {
    height: 58px;
  }


  .aanbod-switch-button {
    font-size: 14px;
  }


  /* ALL-IN-ONE INTRO */

  .allin-intro {
    padding: 45px 25px 50px;
  }


  .allin-intro h2 {
    margin-bottom: 30px;

    font-size: 29px;
  }


  .allin-intro p {
    margin-bottom: 28px;

    font-size: 13px;

    line-height: 1.6;
  }


  .allin-intro p br {
    display: none;
  }


  /* ALL-IN-ONE */

  .included-section {
    padding: 58px 27px 78px;
  }


  .included-inner {
    display: block;
  }


  .included-heading {
    margin-bottom: 45px;
  }


  .included-heading h2 {
    font-size: 31px;
  }


  .included-column {
    gap: 36px;
  }


  .included-column + .included-column {
    margin-top: 36px;
  }


  .included-item h3 {
    margin-bottom: 17px;

    font-size: 18px;
  }


  .included-item p {
    font-size: 13px;

    line-height: 1.6;
  }


  /* ROZE SHAPES MOBILE */

  .included-background-circle {
    width: 470px;

    height: 470px;
  }


  .circle-left {
    top: 115px;

    left: -210px;

    background: rgba(209, 162, 150, 0.13);

    border: 0;
  }


  .circle-right {
    top: 900px;

    right: -235px;

    background: transparent;

    border: 85px solid rgba(209, 162, 150, 0.13);
  }


  /* ALL-IN-ONE CTA */

  .included-cta {
    margin-top: 60px;
  }


  .included-cta a {
    font-size: 11px;

    letter-spacing: 0.25em;
  }


  /* À LA CARTE INTRO */

  .alacarte-intro {
    padding: 42px 25px 46px;
  }


  .alacarte-intro h2 {
    margin-bottom: 27px;

    font-size: 29px;
  }


  .alacarte-intro p {
    font-size: 13px;

    line-height: 1.6;
  }


  .alacarte-intro p br {
    display: none;
  }


  /* À LA CARTE SERVICES */

  .alacarte-services {
    padding: 58px 28px 78px;
  }


  .alacarte-services-inner {
    display: block;
  }


  .alacarte-column {
    gap: 38px;
  }


  .alacarte-column + .alacarte-column {
    margin-top: 38px;
  }


  .alacarte-item,
  .alacarte-column:first-child .alacarte-item,
  .alacarte-column:last-child .alacarte-item {
    width: 100%;

    max-width: none;

    margin: 0;
  }


  .alacarte-item h3 {
    margin-bottom: 17px;

    padding-left: 20px;

    font-size: 18px;
  }


  .alacarte-item h3::before {
    top: 7px;

    width: 7px;

    height: 7px;
  }


  .alacarte-item p {
    padding-left: 20px;

    font-size: 13px;

    line-height: 1.6;
  }


  /* GROENE SHAPES MOBILE */

  .alacarte-circle {
    width: 470px;

    height: 470px;
  }


  .alacarte-circle-left {
    top: 115px;

    left: -210px;

    background: rgba(149, 189, 176, 0.18);

    border: 0;
  }


  .alacarte-circle-right {
    top: 900px;

    right: -235px;

    background: transparent;

    border: 85px solid rgba(149, 189, 176, 0.18);
  }


  /* À LA CARTE CTA */

  .alacarte-bottom-cta {
    margin-top: 60px;
  }


  .alacarte-bottom-cta a {
    font-size: 11px;

    letter-spacing: 0.25em;
  }


  /* FOOTER IMAGE */

  .aanbod-footer-image {
    height: 260px;

    background-attachment: scroll;

    background-position: center center;
  }

}