/* ------------------------------------------------------ */
/* HOME PAGE */
/* ------------------------------------------------------ */

/* ------------------------------------------------------ */
/* --------------------------- / * Homepage EHBX Banner */
.page-banner {
  opacity: 0;
  animation: fadeIn 0.5s ease-in-out forwards;
  /* animation-delay: 1s; */
  background-repeat: no-repeat;
  display: grid;
  place-items: center;
  position: relative;
  margin: 0 auto;
  z-index: 1;
  background-color: var(--color-daikin-white);
}

.banner-img {
  object-fit: contain;
  /* max-inline-size: 860px; */
  inline-size: 100%;
}

.page-banner header,
.banner-altherma header {
  inline-size: 50%;
}

.page-banner h1,
.banner-altherma h1 {
  background-color: var(--color-daikin-white);
  color: var(--color-daikin-black-80);
  padding: 1rem;
  padding-block: 2rem;
  line-height: 1.3;
  letter-spacing: 1.2px;
  width: 100%;
  height: 100%;
}

.home-page-heading {
  text-align: center;
}

.h1-subtext {
  font-size: clamp(0.5rem, 3.75vw, 1rem);
}

/* ------------------------------------------------------ */
/* --------------------------- / * Homepage Intro */
.home-intro-section {
  background-color: var(--color-daikin-caring-light-brown);
  position: relative;
  box-shadow: #32325d33 0px 2px 3px 0px;
}

.home-intro-section-2 {
  z-index: 1;
  position: sticky;
  top: 100px;
}

.home-intro-section-2 h2 {
  font-weight: 500;
  color: var(--color-daikin-black-80);
}

.home-intro-section-2 button.active {
  background-color: var(--color-daikin-white);
  color: var(--color-daikin-blue);
  border-color: var(--color-daikin-blue);
}

.home-intro-section-2 > header {
  padding: 15px;
}

/* ------------------------------------------------------ */
/* --------------------------- / * Homepage Productgroup */
.product-categories-header {
  text-align: center;
}

.product-groups-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

.product-group {
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  border-radius: 10px;
  inline-size: 50%;
  max-inline-size: 300px;
  min-inline-size: 200px;
}

.product-group header {
  background-color: var(--color-daikin-blue);
  color: var(--color-daikin-white);
  border-radius: 10px 10px 0px 0px;
}

.product-group h4 {
  font-weight: 400;
  text-align: center;
}

.product-group-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-group-image {
  margin-inline-start: 10px;
  inline-size: 200px;
  padding: 5px;
}

.product-group-image-2 {
  margin-block-start: 18px;
}

/* ------------------------------------------------------ */
/* QUICKFIX PAGES */
/* ------------------------------------------------------ */

/* ------------------------------------------------------ */
/* --------------------------- /* Content Section */
.home-quickfix-transition-container {
  position: relative;
  z-index: 0;
  min-height: 380px;
  margin-block-start: 200px;
  padding-block-start: 20px;
}

.home-quickfix {
  background-color: var(--color-daikin-caring-blue-grey);
  transform: translateX(0%);
  transition: all 0.5s ease-in-out;
  pointer-events: auto;
  position: absolute;
  inline-size: 100%;
  /* padding-block-end also depends on p-b-e from body > main */
  padding-block: 50px 500px;
  box-shadow: inset rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.home-quickfix.hidden {
  opacity: 0;
  transform: translateX(-200%);
  transition: all 0.5s ease-in-out;
  pointer-events: none;
  grid-column: 1 / 2;
}

.home-quickfix header p {
  color: #0097e0;
  font-weight: bold;
  margin-block-start: 10px;
  margin-inline-start: 3px;
}

/* .home-quickfix-2 {
  background-color: var(--color-daikin-white);
} */

/* Reset active mobile devices */
.quickfix-menu:active {
  -webkit-tap-highlight-color: #ffffff00;
  -webkit-focus-ring-color: #ffffff00;
}

/* QuickFix menu styling */
.quickfix-menu {
  display: flex;
  justify-content: space-around;
  margin-bottom: 45px;
  cursor: pointer;
  inline-size: 100%;
  padding-block: 20px;
  border-block-end: 1px solid var(--color-daikin-caring-blue-grey);
}

.quickfix-menu p.active {
  font-weight: bold;
  border-block-end: 2px solid var(--color-daikin-blue);
}

.quickfix-header {
  border-block-end: 1px solid var(--color-daikin-caring-blue-grey);
  padding-block-end: 30px;
}

.content-section {
  display: none;
}

.content-section.active {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 5px;
}

.quickfix-tile-container {
  max-inline-size: 500px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.quickfix-tile {
  background-color: var(--color-daikin-caring-light-blue);
  padding: 10px;
  /* border-radius: 8px; */
  color: var(--color-daikin-accent-blue-grey);
  /* box-shadow: var(--box-shadow); */
  box-shadow: inset #0097e040 0px 0px 6px -2px;
  margin-block-end: 40px;
  inline-size: 150px;
  font-size: 0.8rem;
  border-radius: 10px;
}

.qf-first-word {
  font-weight: 700;
  color: var(--color-daikin-blue);
}

.quickfix-tile,
.qf-first-word {
  letter-spacing: 1.2px;
}

.quickfix-section-bottom-text {
  text-align: center;
}

/* ------------------------------------------------------ */
/* --------------------------- /* Page Globals */
/* Dropdown styling */
.dropdown-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.show-more {
  cursor: pointer;
  text-decoration: underline;
  background: inherit;
  box-shadow: none;
  outline: none;
  border: none;
  color: var(--color-daikin-accent-blue-grey);
  position: absolute;
  right: 0;
  margin-inline-end: 20px;
}

.show-more:hover,
.show-more:active {
  background: none;
  box-shadow: none;
}

/* Selecting product styling */
.home-product-card {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  inline-size: 100%;
  padding-block: 50px;
}

.home-product-card figure {
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-product-figure-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.home-product-image {
  aspect-ratio: 1 / 1;
  display: block;
  block-size: clamp(130px, 40vw, 190px);
  position: relative;
}

.home-product-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.home-product-header p {
  color: var(--color-daikin-accent-blue-grey);
  padding-block-end: 15px;
}

/* Slideshow Product Navigation */
.slideshow-container {
  position: relative;
  display: flex;
}

.home-product-card,
.quickfix-container {
  position: absolute;
  visibility: hidden;
  transition: transform 0.5s ease-in-out;
  transform: translateY(-100%);
  z-index: 0;
}

.quickfix-container {
  inline-size: 100%;
  margin: 0 auto;
  padding-block-start: 500px;
}

.home-product-card.active,
.quickfix-container.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0%);
}

.quickfix-product-groep-container {
  position: relative;
  block-size: clamp(800px, 5vw, 1200px);
}

.home-product-slideshow-btns {
  z-index: 3;
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.home-product-slideshow-btn {
  background-color: var(--color-daikin-caring-light-blue);
  border: 1px solid var(--color-daikin-accent-blue-grey);
  color: var(--color-daikin-accent-blue-grey);
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: flex;
  justify-content: space-around;
}

.home-product-slideshow-btn.active {
  background-color: var(--color-daikin-accent-blue-grey);
  /* Actieve knop krijgt een oranje achtergrond */
  color: var(--color-daikin-white);
}

.home-product-slideshow-btn:hover {
  background-color: var(--color-daikin-accent-blue-grey);
  color: var(--color-daikin-white);
}

/* .home-product-slideshow-btn.hidden {
  display: none;
} */

.scroll-for-quickfix {
  position: absolute;
  right: 10%;
  bottom: -8%;
  color: var(--color-daikin-black);
  text-align: center;

  padding: 10px;
  background: var(--color-daikin-white);
  border-radius: 5px;
}

.scroll-for-quickfix .custom-arrow {
  margin-block-start: 5px;
}

/* ------------------------------------------------------ */

/* ------------------------------------------------------ */
/* VIEWS */
/* ------------------------------------------------------ */
/* ------------------------------------------------------ */
/* --------------------------- /* Flowchart styling */
.flowchart-banner {
  background-color: var(--color-daikin-blue);
  color: var(--color-daikin-white);
}

.flowchart-banner span {
  font-weight: 400;
}

.flowchart {
  background-color: var(--color-daikin-caring-light-blue);
}

.flowchart h2 {
  padding-block-start: 50px;
  text-align: center;
}

.home-intro-section-3 {
  background-color: var(--color-daikin-white);
  top: 0;
  padding-block: 30px 40px;
}

.description-container {
  margin: 0;
}

.description-container ul {
  list-style: square;
}

/* ------------------------------------------------------ */
/* --------------------------- /* Steps styling */
.steps-container {
  padding: 20px;
  border-block-end: 1px solid var(--color-daikin-accent-blue-grey);
  gap: 0;
  padding-block-end: 50px;
}

.steps-container ul {
  list-style: square;
}

.step {
  font-weight: 700;
}

.end-step {
  background-color: var(--color-daikin-accent-green);
  border-color: var(--color-daikin-accent-green);
  margin-block-start: 100px;
  padding-block: 15px;
  border-radius: 5px;
  text-align: center;
}

.end-step p {
  color: var(--color-daikin-white);
}

.step-img-container {
  max-inline-size: 350px;
}

.step-img-container-2 {
  max-inline-size: 400px;
}

.step-img {
  width: 100%;
  height: auto;
  max-width: 400px;
}

.promo-digital-tools-container {
  inline-size: 100%;
  padding-block: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.promo-digital-tools-container iframe {
  inline-size: 90%;
  max-inline-size: 600px;
  aspect-ratio: 5 / 3;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

/* ------------------------------------------------------ */
/* --------------------------- /* TechTalk Page */
.techtalk-img-banner {
  inline-size: 100%;
  margin: 0;
  max-inline-size: 100%;
  block-size: 150px;
  display: block;
}

.techtalk-img-banner .techtalk-img {
  object-fit: cover;
  inline-size: 100vw;
  block-size: 100%;
  z-index: -1;
}

.techtalk-banner {
  background-color: var(--color-daikin-blue);
}

.techtalk-article {
  background-color: var(--color-daikin-accent-brown-trans);
  box-shadow: none;
  border-block-end: 2px solid var(--color-daikin-white);
  padding-inline-end: 80px;
}

.techtalk-download {
  display: flex;
  justify-content: space-between;
  gap: 50px;
  max-inline-size: 500px;
}

.techtalk-download .techtalk-icon-servicesheet {
  position: relative;
  top: 6px;
}

.servicesheet-heading {
  color: var(--color-daikin-orange);
  font-weight: 700;
  border-radius: 5px;
}
/* ------------------------------------------------------ */

/* ------------------------------------------------------ */
/* MEDIA QUERIES */
/* ------------------------------------------------------ */
@media only screen and (max-width: 768px) {
  .header {
    transition: transform 0.3s ease-in-out;
  }

  .header.hidden {
    transform: translateY(-100%);
  }

  .home-intro-section-2 {
    top: 0;
    transition: all 0.3s ease-in-out;
  }

  .product-group-image {
    inline-size: 180px;
  }

  .quickfix-container {
    padding-block-start: 320px;
  }
}

@media only screen and (min-width: 375px) {
  .content-section.active {
    column-gap: 10px;
  }

  .quickfix-container {
    padding-block-start: 340px;
  }
}

@media only screen and (min-width: 400px) {
  .home-quickfix-transition-container {
    margin-block-start: 250px;
  }
}

@media only screen and (min-width: 425px) {
  .content-section.active {
    column-gap: 20px;
  }
  .quickfix-container {
    padding-block-start: 350px;
  }
}

@media only screen and (min-width: 500px) {
  .content-section.active {
    column-gap: 50px;
  }

  .home-quickfix-transition-container {
    margin-block-start: 250px;
  }
}

@media only screen and (min-width: 550px) {
  .content-section.active {
    column-gap: 80px;
  }

  .quickfix-container {
    padding-block-start: 420px;
  }
}

@media only screen and (min-width: 600px) {
  .home-quickfix-transition-container {
    margin-block-start: 300px;
  }

  .quickfix-menu {
    justify-content: center;
    gap: 80px;
  }
}

@media only screen and (min-width: 650px) {
  .home-quickfix,
  .conact-section,
  .techtalk-header {
    padding-inline: 40px;
  }

  .quickfix-menu {
    gap: 100px;
  }

  .home-quickfix-transition-container {
    margin-block-start: 320px;
  }
}

@media only screen and (min-width: 768px) {
  .banner-img {
    /* padding-block-end: 3rem; */
  }

  .product-groups-wrapper {
    gap: 50px;
  }

  .quickfix-menu {
    gap: 120px;
  }

  .quickfix-container {
    padding-block-start: 460px;
  }
}

@media only screen and (min-width: 1024px) {
  #scrollToTopBtn {
    right: 25px;
  }

  .home-quickfix-transition-container {
    margin-block-start: 350px;
  }

  .flowchart-banner {
    padding-inline-start: 100px;
  }

  .description-container {
    padding-inline-start: 100px;
  }

  .home-product-image {
    top: 60px;
  }

  .quickfix-menu {
    gap: 150px;
  }
}