/* ------------------------------------------------------ */
/* --------------------------- / * Universal Styles */
@font-face {
  font-family: "Carlito";
  src: url("../fonts/carlito/Carlito-Regular.ttf");
}

:root {
  /* Styling */
  --box-shadow: #64646f33 0px 0px 10px 0px;

  /* Color */
  --color-daikin-blue: #0097e0;
  --color-daikin-light-blue: #54c3f1;
  --color-daikin-white: #fff;
  --color-daikin-black: #000;
  --color-daikin-black-80: #333;
  --color-daikin-orange: #f07300;

  --color-daikin-caring-grey: #eceaea;
  --color-daikin-caring-blue-grey: #f1f4f7;
  --color-daikin-caring-light-blue: #e3f0fb;
  --color-daikin-caring-light-brown: #f6f0e9;
  --color-daikin-caring-medium-green: #ddf3dd;

  --color-daikin-accent-blue-grey: #728992;
  --color-daikin-accent-blue-grey-trans: #72899246;
  --color-daikin-accent-brown: #977362;
  --color-daikin-accent-brown-trans: #97736224;
  --color-daikin-accent-grey: #3d3233;
  --color-daikin-accent-green: #50915d;
}

/* ------------------------------------------------------ */
/* --------------------------- / * CSS Resets */
/* Global Styles */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  letter-spacing: 0.55px;
  font-family: "Carlito";
}

/* CSS Reset for pseudo-class active on mobile devices */
a:active,
button:active {
  -webkit-tap-highlight-color: #ffffff00;
  -webkit-focus-ring-color: #ffffff00;
}

/* HTML Elements */
ul {
  list-style: none;
}

a {
  all: unset;
  text-decoration: none;
}

a:hover {
  cursor: pointer;
}

button {
  background-color: var(--color-daikin-blue);
  padding: 5px 10px;
  border: none;
  box-shadow: var(--box-shadow);
  border-radius: 5px;
  cursor: pointer;
  inline-size: fit-content;
  border: 1px solid var(--color-daikin-blue);
  color: var(--color-daikin-white);
}

button:hover {
  cursor: pointer;
}

button:hover,
button:active {
  background-color: var(--color-daikin-caring-blue-grey);
  color: var(--color-daikin-blue);
}

/* ------------------------------------------------------ */
/* --------------------------- / * Page Layout */
body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* gap: 100px; */
  block-size: 100vw;
  margin: 0 auto;
  opacity: 0;
  animation: fadeIn 0.5s ease-in-out forwards;
  min-height: 100vh;
  max-inline-size: 1024px;
}

body > header {
  grid-area: 1 / 1 / 2 / 4;
  position: fixed;
  inline-size: 100%;
  z-index: 10;
  background-color: var(--color-daikin-white);
  max-inline-size: 1024px;
  /* animation-delay: 1s; */
}

body > main {
  grid-area: 2 / 1 / 3 / 4;
  margin-block-start: 100px;
  /* padding-block-end: 130px; */
}

body > footer {
  grid-area: 3 / 1 / 4 / 4;
  position: relative;
}

/* ------------------------------------------------------ */
/* --------------------------- / * Custom Classes */
/* ---- / * Anchor */
.anchor-link {
  font-weight: 700;
  color: var(--color-daikin-light-blue);
}

/* ---- / * Anchor */
/* Button */
.btn {
  background-color: var(--color-daikin-orange);
  padding: 5px 10px;
  border: none;
  box-shadow: var(--box-shadow);
  border-radius: 5px;
  cursor: pointer;
  inline-size: fit-content;
  border: 1px solid var(--color-daikin-orange);
  color: var(--color-daikin-white);
}

.btn:active {
  background-color: var(--color-daikin-white);
  color: var(--color-daikin-orange);
}

/* ---- / * Display */
/* Block */
.dis-block {
  display: block;
}

/* Inline */
.dis-inline {
  display: inline;
}

/* ---- / * Display Flex */
.dis-flex {
  display: flex;
}

.flex-between {
  justify-content: space-between;
}

.flex-around {
  justify-content: space-around;
}

.flex-align-c {
  align-items: center;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-col {
  flex-direction: column;
}

.flex-gap-20 {
  gap: 20px;
}

.flex-gap-30 {
  gap: 30px;
}

.flex-gap-40 {
  gap: 40px;
}

.flex-gap-50 {
  gap: 50px;
}

.flex-gap-60 {
  gap: 60px;
}

.flex-gap-70 {
  gap: 70px;
}

/* ---- / * Boxmodel */
/* Padding-inline */
.pi5 {
  padding-inline: 5px;
}

.pi10 {
  padding-inline: 10px;
}

.pi15 {
  padding-inline: 15px;
}

.pi20 {
  padding-inline: 20px;
}

.pi30 {
  padding-inline: 30px;
}

.pi40 {
  padding-inline: 40px;
}

.pi50 {
  padding-inline: 50px;
}

.pi60 {
  padding-inline: 60px;
}

.pi70 {
  padding-inline: 70px;
}

/* Padding-block */
.pb5 {
  padding-block: 5px;
}

.pb10 {
  padding-block: 10px;
}

.pb15 {
  padding-block: 15px;
}

.pb20 {
  padding-block: 20px;
}

.pb30 {
  padding-block: 30px;
}

.pb40 {
  padding-block: 40px;
}

.pb50 {
  padding-block: 50px;
}

.pb60 {
  padding-block: 60px;
}

.pb80 {
  padding-block: 80px;
}

.pb100 {
  padding-block: 100px;
}

.pb150 {
  padding-block: 150px;
}

.pb180 {
  padding-block: 180px;
}

.pb200 {
  padding-block: 200px;
}

/* Padding-block-start */
.pbs5 {
  padding-block-start: 5px;
}

.pbs10 {
  padding-block-start: 10px;
}

.pbs15 {
  padding-block-start: 15px;
}

.pbs20 {
  padding-block-start: 20px;
}

.pbs25 {
  padding-block-start: 25px;
}

.pbs30 {
  padding-block-start: 30px;
}

.pbs40 {
  padding-block-start: 40px;
}

.pbs50 {
  padding-block-start: 50px;
}

.pbs60 {
  padding-block-start: 60px;
}

.pbs70 {
  padding-block-start: 70px;
}

.pbs80 {
  padding-block-start: 80px;
}

.pbs100 {
  padding-block-start: 100px;
}

.pbs120 {
  padding-block-start: 120px;
}

.pbs150 {
  padding-block-start: 150px;
}

/* Padding-block-end */
.pbe5 {
  padding-block-end: 5px;
}

.pbe10 {
  padding-block-end: 10px;
}

.pbe15 {
  padding-block-end: 15px;
}

.pbe20 {
  padding-block-end: 20px;
}

.pbe30 {
  padding-block-end: 30px;
}

.pbe40 {
  padding-block-end: 40px;
}

.pbe50 {
  padding-block-end: 50px;
}

.pbe60 {
  padding-block-end: 60px;
}

.pbe70 {
  padding-block-end: 70px;
}

.pbe80 {
  padding-block-end: 80px;
}

.pbe90 {
  padding-block-end: 90px;
}

.pbe100 {
  padding-block-end: 100px;
}

.pbe150 {
  padding-block-end: 150px;
}

.pbe180 {
  padding-block-end: 180px;
}

/* ---- / * Borders */
/* Radius */
.br1 {
  border-radius: 1px;
}

.br2 {
  border-radius: 2px;
}

.br3 {
  border-radius: 3px;
}

.br4 {
  border-radius: 4px;
}

.br5 {
  border-radius: 5px;
}

.br6 {
  border-radius: 6px;
}

.br7 {
  border-radius: 7px;
}

.br8 {
  border-radius: 8px;
}

.br9 {
  border-radius: 9px;
}

.br10 {
  border-radius: 10px;
}

/* ---- / Margins */
/* Margin-block-start */
.mbs10 {
  margin-block-start: 10px;
}

/* Margin-block-end */
.mbe10 {
  margin-block-end: 10px;
}

.mbe15 {
  margin-block-end: 15px;
}

.mbe20 {
  margin-block-end: 20px;
}

.mbe40 {
  margin-block-end: 40px;
}

/* Margin-inline-start */
.mis5 {
  margin-inline-start: 5px;
}

.mis10 {
  margin-inline-start: 10px;
}

.mis15 {
  margin-inline-start: 15px;
}

.mis20 {
  margin-inline-start: 20px;
}

.mis30 {
  margin-inline-start: 30px;
}

/* ---- / * Container Sizes + center */
/* Max inline size container */
.mx-i-s {
  max-inline-size: 1208px;
  inline-size: 100%;
  margin: 0 auto;
}

/* Sizes */
.i-s-250 {
  max-inline-size: 250px;
  inline-size: 100%;
  margin: 0 auto;
}

.i-s-400 {
  max-inline-size: 400px;
  inline-size: 100%;
  margin: 0 auto;
}

.i-s-600 {
  max-inline-size: 600px;
  inline-size: 100%;
  margin: 0 auto;
}

.i-s-700 {
  max-inline-size: 700px;
  inline-size: 100%;
  margin: 0 auto;
}

.i-s-800 {
  max-inline-size: 800px;
  inline-size: 100%;
  margin: 0 auto;
}

.i-s-900 {
  max-inline-size: 900px;
  inline-size: 100%;
  margin: 0 auto;
}

.i-s-950 {
  max-inline-size: 950px;
  inline-size: 100%;
  margin: 0 auto;
}

.i-s-1025 {
  max-inline-size: 1025px;
  inline-size: 100%;
  margin: 0 auto;
}

/* ------------------------------------------------------ */
/* --------------------------- / * Scroll to top Button */
/* Stijl voor de scroll naar boven knop */
#scrollToTopBtn {
  position: fixed;
  bottom: 20px;
  right: 8px;
  box-shadow: #ffffff1f 0px -2px 3px, #ffffff3d 0px 1px 2px;
  background-color: var(--color-daikin-orange);
  color: var(--color-daikin-white);
  border: none;
  border-radius: 30%;
  inline-size: 30px;
  block-size: 30px;
  font-size: 0.9rem;
  cursor: pointer;
  display: none;
  text-align: center;
  transition: opacity 0.3s ease-in-out;
  padding: 0;
  z-index: 2;
}

#scrollToTopBtn:active {
  background-color: var(--color-daikin-white);
  color: var(--color-daikin-);
}

/* ------------------------------------------------------ */
/* --------------------------- / * Arrows */
.custom-arrow {
  border: solid var(--color-daikin-black-80);
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

/* ------------------------------------------------------ */
/* --------------------------- / * Animations */
/* CSS fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* JS appear on scroll (aos) animation */
.aos-under {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.aos-under.visible {
  opacity: 1;
  transform: translateY(0);
}