@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");

:root {
  --clr-primary-400: hsl(0, 0%, 0%);
  --clr-pink-400: #f8e2db;
  --clr-grey-400: #333;

  --ff-primary: "Roboto Mono", monospace;
  --ff-body: var(--ff-primary);

  --fw-light: 300;
  --fw-regular: 400;
  --fw-semi-bold: 500;
  --fw-bold: 700;

  --fs-200: 0.8125rem;
  --fs-300: 0.875rem; /*14px*/
  --fs-400: 0.9375rem;
  --fs-500: 1rem;
  --fs-600: 1.1875rem; /*19px*/
  --fs-700: 1.4rem; /*23px*/
  --fs-800: 1.75rem; /*28px*/
  --fs-900: 2.5rem;
  --fs-1000: 3.5rem;
  --fs-1100: 4rem;

  --fs-body: var(--fs-500);
  --fs-primary-heading: var(--fs-900);
  --fs-secondary-heading: var(--fs-800);
  --fs-paragraph-heading: var(--fs-700);
  --fs-span-text: var(--fs-600);

  --fs-nav: var(--fs-400);
  --fs-btn: var(--fs-300);

  --size-100: 0.25rem;
  --size-200: 0.5rem;
  --size-300: 0.75rem;
  --size-400: 1rem;
  --size-500: 1.25rem;
  --size-600: 1.5rem;
  --size-700: 2rem;
  --size-800: 2.5rem;
  --size-900: 3rem;

  --section-padding-default: 3rem;
  --section-padding-lg: 11.7rem;
}

@media (min-width: 50em) {
  :root {
    --fs-body: var(--fs-500);
    --fs-primary-heading: var(--fs-1100);
    --fs-heading: var(--fs-1000);
    --fs-secondary-heading: var(--fs-900);

    --fs-nav: var(--fs-300);
  }
}
/* https://piccalil.li/blog/a-modern-css-reset */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
* {
  margin: 0;
  padding: 0;
  font: inherit;
  /* background-color: var(--clr-primary-400); */
}

/* Remove list styles on ul, ol*/
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
}

/* Set core body defaults */
body {
  text-rendering: optimizeSpeed;
  line-height: 1.2;
}
button {
  line-height: 1;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  -webkit-font-smoothing: antiliased;
}
a {
  text-decoration: none;
}
.body-clr-main {
  background-color: var(--clr-primary-400);
  color: #fff;
}
.body-clr-main a:not(.btn-link) {
  color: #fff;
}
.body-read {
  background-color: var(--clr-pink-400);

  color: var(--clr-primary-400);
}
.body-read a:not(.btn-link) {
  color: var(--clr-primary-400);
}
.btn-link,
.arrow-icon {
  background: transparent;
  color: var(--clr-primary-400);
}
.arrow-icon {
  padding-left: 0.25rem;
}
/*general styling*/

.logo {
  font-size: var(--fs-600);
  letter-spacing: 0ch;
  font-weight: var(--fw-semi-bold);
}
@media (min-width: 50em) {
  .logo {
    font-size: var(--fs-800);
  }
}
/*primary navigation*/
.primary-header {
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-mainPage {
  background-color: var(--clr-primary-400);
}
.nav-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-list {
  /* .primary-navigation { */
  display: flex;
  flex-direction: row;
  gap: clamp(var(--size-400), 5vw, var(--size-700));
  font-weight: var(--fw-regular);
}
.nav-list-hidden {
  columns: 2;
  position: fixed;
  top: 8rem;
  margin-right: 2rem;
}
.nav-list-hidden li {
  padding-right: 4rem;
  padding-bottom: 1rem;
}

.paragraph-btn-padding {
  padding: 2rem 0.5rem;
}
.btn-margin-top {
  margin-top: 1.5rem;
}

@media (min-width: 50em) {
  .paragraph-btn-padding {
    padding: 5rem;
  }
  .btn-margin-top {
    margin-top: 2rem;
  }
}
@media (min-width: 90em) {
  .paragraph-btn-padding {
    padding: 8rem;
  }
}

.white-btn,
.black-btn {
  border: none;
  border-radius: 22px;
  padding: 0.75rem 1rem;
  letter-spacing: 2px;
  transition: all 200ms ease-in-out;
}
.white-btn {
  color: var(--clr-primary-400);
  background-color: white;
}
.white-btn:hover,
.black-btn:hover {
  opacity: 0.6;
}

.black-btn {
  color: white;
  background-color: var(--clr-primary-400);
}
@media (max-width: 50em) {
  .reverse-order {
    grid-template-areas: "one" "two";
  }
  .reverse-one:nth-child(1) {
    grid-area: two;
  }
  .reverse-two:nth-child(2) {
    grid-area: one;
  }
}
.btn-margin-left {
  margin-left: var(--size-400);
}

.image-caption-container {
  margin-top: 1rem;
  padding-right: 1rem;
}
.grid-gap {
  gap: 3rem;
}
@media (min-width: 50em) {
  .grid-gap {
    gap: 1.5rem;
  }
}

.card-text {
  --max-width: 500px;
  --padding: 1rem;

  width: min(var(--max-width), 100% - (var(--padding)) * 2);
}
.card-padding-top {
  padding-top: var(--size-400);
}
@media (768px <= width <= 1023px) {
  .card-text {
    --max-width: 330px;
    --padding: 1rem;

    width: min(var(--max-width), 100% - (var(--padding)) * 2);
  }
  .img-caption-section img {
    width: 100vw;
  }
  /* … */
  .card {
    padding: var(--size-400);
  }
  .flex-card {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .grid-area {
    grid-template-areas: "one" "two";
  }
  .grid-area:nth-child(1) {
    grid-area: one;
  }
  .grid-area:nth-child(2) {
    grid-area: two;
  }
}
@media (min-width: 500px) {
  .btn-center {
    display: flex;
    justify-content: center;
  }
}

.footer-list li {
  display: flex;
  flex-direction: column;
  max-width: 245px;
}
.footer-link,
.newsletter-item {
  padding: 12px 17px;
}
.newsletter-item {
  padding-left: 2rem;
}
.social-icons-list {
  display: flex;
}
.social-icon {
  padding: 1.0625rem;
}

@media (min-width: 31em) {
  .footer-navigation {
    columns: 2;
  }
  .newsletter-item {
    border: 0.25px solid hsl(0, 0%, 50%);
    border-radius: 100vmax;
    max-width: fit-content;
    line-height: 1;
  }
  .footer-navigation {
    --max-width: 490px;
    --padding: 1rem;
    width: min(var(--max-width), 100% - (var(--padding)) * 2);
    /* margin-inline: auto; */ /*does not work in safari? */
  }
}
.social-icons-list {
  padding-left: 1rem;
}
@media (31em <= width <= 47em) {
  .newsletter-socialIcons-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--size-700);
    margin-right: 4rem;
  }
}
@media (48em <= width <= 64em) {
  .newsletter-socialIcons-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    align-items: flex-end;
    margin-top: -4rem;
  }
}
@media (min-width: 65em) {
  .newsletter-socialIcons-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    margin-top: -4rem;
  }
}
.footer {
  padding-bottom: var(--size-700);
}
.video-one {
  --max-width: 1450px;
  /* --padding: 2rem; */
  /* width: min(var(--max-width), 100% - (var(--padding) * 2)); */
  /* position: relative; */
  width: min(var(--max-width), 100%);

  margin-left: auto;
  margin-right: auto;
  padding-top: var(--section-padding-default);
  z-index: -100;
}
.video-wrapper {
  position: relative;
}
@media (min-width: 50em) {
  .video {
    padding: var(--size-600);
    padding-top: var(--section-padding-lg);
  }
}

.play-icon {
  background-color: none;
  display: block;

  background: transparent;
  border: 0;
  padding: 0.5em;
  position: absolute;
  top: 45%;
  left: 45%;
  cursor: pointer;
}
@media (min-width: 50em) {
  .play-icon {
    height: 5rem;
    width: 5rem;
    top: 47%;
    left: 47%;
  }
}
.hide {
  /* display: none; */
  visibility: hidden;
  opacity: 0;
}
/*utility classes*/
.icon-white {
  /* fill: white; */
  fill: #fff;
}
.icon-black {
  fill: black;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mobile-nav-toggle {
  position: relative;
  cursor: pointer;

  background: transparent;
  border: 0;
  padding: 0.5em;
}

.overlay {
  position: fixed;
  inset: 3.7rem 0 0;
}
.overlay-black {
  background-color: var(--clr-primary-400);
}
.overlay-pink {
  background-color: var(--clr-pink-400);
}
.mobile-nav-toggle .icon-close {
  display: none;
}
* {
  font-family: var(--ff-primary);
  /* color: white; */
}
@media (min-width: 50em) {
  .vh-100 {
    height: 100vh;
  }
}
.text-align-center {
  text-align: center;
}
.container {
  --max-width: 1425px;
  --padding: 1rem;

  width: min(var(--max-width), 100% - (var(--padding)) * 2);
  /* margin-inline: auto; */ /*does not work in safari? */
  margin-right: auto;
  margin-left: auto;
}
.container-padding-top {
  padding-top: var(--section-padding-default);
}
@media (min-width: 50em) {
  .container-padding-top {
    padding-top: var(--section-padding-lg);
  }
}

.text-container,
.text-container-txt-center {
  --max-width: 970px;
  padding: 0 1rem;

  width: min(var(--max-width), 100%);
  margin-right: auto;
  margin-left: auto;
}
.text-container {
  text-align: start;
}
.text-container-txt-center {
  text-align: center;
}

@media (min-width: 27em) {
  .text-container {
    text-align: center;
  }
}
.vertical-align-center {
  align-items: center;
}
.justify-self-end {
  justify-self: end; /*works with grid but not flex*/
}
.even-columns {
  display: grid;
  padding: 1rem;
}

/*50 em = 800px*/
@media (min-width: 50em) {
  .even-columns {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
  .mobile-nav-toggle {
    display: none;
  }
}
.modal-nav {
  padding-left: var(--size-800);
}
.modal li {
  padding: 0.5rem;
}
@media (max-width: 50em) {
  .primary-navigation {
    display: none;
  }
}
.fw-bold {
  font-weight: var(--fw-bold);
}
.fw-semi-bold {
  font-weight: var(--fw-semi-bold);
}
.fw-regular {
  font-weight: var(--fw-regular);
}
.fw-light {
  font-weight: var(--fw-light);
}
/*font sizes*/
.fs-btn,
.fs-small {
  font-size: var(--fs-300);
}
.fs-400 {
  font-size: var(--fs-400); /*14px*/
}
.fs-primary-heading {
  font-size: var(--fs-800);
}
.fs-secondary-heading {
  font-size: var(--fs-700);
}
.fs-paragraph-heading {
  font-size: var(--fs-600);
}
.fs-span-text {
  font-size: var(--fs-span-text);
}
@media (min-width: 50em) {
  .fs-primary-heading {
    font-size: var(--fs-1000);
  }
  .fs-secondary-heading {
    font-size: var(--fs-700);
  }
  .fs-paragraph-heading {
    font-size: var(--fs-700);
  }
}

.padding-block-400 {
  padding: var(--size-400);
}
.padding-block-900 {
  padding: var(--size-900);
}
.padding-block-700 {
  padding: var(--size-700);
}
.padding-top-900 {
  padding-top: var(--size-900);
}
.padding-top-400 {
  padding-top: var(--size-400);
}
.padding-bottom-900 {
  padding-bottom: var(--size-900);
}
@media (min-width: 65em) {
  .fs-primary-heading {
    font-size: var(--fs-1100);
  }
  .fs-heading {
    font-size: var(--fs-heading);
  }
  .fs-secondary-heading {
    font-size: var(--fs-800);
  }
}
/*hover effects*/
.before-after-effect-white::before,
.before-after-effect-black::before {
  content: "[ ";
  opacity: 0;
  transition: all 750ms ease-in-out;
}

.before-after-effect-white::after,
.before-after-effect-black::after {
  content: " ]";
  opacity: 0;
  transition: all 750ms ease-in-out;
}
.before-after-effect-white::before,
.before-after-effect-white::after {
  color: white;
}
.before-after-effect-black::before,
.before-after-effect-black::after {
  color: black;
}

.before-after-effect-white:hover::before,
.before-after-effect-white:hover::after,
.before-after-effect-black:hover::before,
.before-after-effect-black:hover::after {
  opacity: 1;
}

/* READ MORE PAGE */
.text-container-readPage,
.text-container-whatWeDo {
  --max-width: 500px;
  padding: 0 1rem;

  font-size: 30px;
  letter-spacing: 0ch;
  text-align: justify;
  text-align: start;

  width: min(var(--max-width), 100%);
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 50em) {
  .text-container-readPage,
  .text-container-whatWeDo {
    --max-width: 750px;
    padding: 0 1rem;

    font-size: 45px;
    width: min(var(--max-width), 100%);
  }
}
.header-readPage {
  background-color: var(--clr-pink-400);
}
.img-container {
  --max-width: 1425px;
  --padding: 1rem;

  width: min(var(--max-width), 100% - (var(--padding)) * 2);
  margin-right: auto;
  margin-left: auto;
  padding-top: var(--section-padding-default);
}
.full-width-img {
  width: 100%;
  padding: 2rem;
}
@media ((min-width: 50em)) {
  .full-width-img {
    padding: 4rem;
  }
}
.paragraph-text-container {
  --max-width: 640px;

  width: min(var(--max-width), 100%);
  line-height: 1.5;
  margin-right: auto;
  margin-left: auto;

  text-align: left;
}
.big-text-centered {
  --max-width: 740px;

  width: min(var(--max-width), 75%);
  line-height: 1.5;
  margin-right: auto;
  margin-left: auto;

  text-align: center;
  font-size: var(--fs-secondary-heading);
}
.quote {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  color: var(--clr-grey-400);
}
.divider-top {
  border-top: 1px solid rgb(51, 51, 51, 0.3);
  padding: var(--size-400);
}
.divider-btm {
  border-bottom: 1px solid rgb(51, 51, 51, 0.3);
  padding: var(--size-400);
}
.margin-top-btm-3 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.margin-top-btm-15 {
  margin-top: 10rem;
  margin-bottom: 10rem;
}
@media (min-width: 50em) {
  .margin-top-btm-15 {
    margin-top: 15rem;
    margin-bottom: 15rem;
  }
}
.position-relative {
  position: relative;
}
.hover--translate-Y {
  transition: all 500ms ease-in-out;
}
.hover--translate-Y:hover {
  transform: translateY(-0.5rem);
}
.hover--text::after {
  content: "READ MORE";
  position: absolute;
  color: black;
  width: 100px;
  top: 19rem;
  left: 1rem;
  opacity: 0;
  transition: all 500ms ease-in-out;
}
@media (min-width: 50em) {
  .hover--text::after {
    top: 28rem;
  }
}
.hover--text:hover::after {
  opacity: 1;
}
@media (min-width: 50em) {
  .grid-area-flip {
    display: grid;
    grid-template-areas: "one two";
  }
  .grid-area-flip :nth-child(1) {
    grid-area: two;
  }

  .grid-area-flip :nth-child(2) {
    grid-area: one;
  }
}
.margin-bottom {
  margin-bottom: 15rem;
}
@media (min-width: 50em) {
  .margin-bottom {
    margin-bottom: 22rem;
  }
}
/* cookies message */
.cookies-msg {
  --max-width: 350px;

  background-color: rgb(255, 255, 255, 0.9);
  color: var(--clr-primary-400);
  max-width: var(--max-width);
  width: 250px;
  border-radius: 2rem;
  padding: 1.25rem;
  position: sticky;
  right: 0;
  bottom: 0.5rem;
  margin: 0.5rem;
  text-align: start;
  display: flex;
}
@media (min-width: 50em) {
  .cookies-msg {
    width: var(--max-width);
  }
}
.cookies-msg-btn {
  font-size: small;
  border: none;
  background-color: var(--clr-primary-400);
  color: white;
  border-radius: 100vmax;
  padding: 0.5rem;
  height: 2rem;
  justify-content: center;
  align-self: center;
  cursor: pointer;
}

/*for revealing sections on scroll*/
.section,
.textReveal {
  transition: transform 750ms, opacity 750ms;
}
.section--hidden,
.text--hidden {
  opacity: 0;
  transform: translateY(8rem);
}

/*For the What We Do Page*/
.body-WhatWeDo {
  background-color: white;
}
.body-WhatWeDo a:not(.btn-link) {
  color: var(--clr-primary-400);
}
.header-WhatWeDo {
  background-color: white;
}
.whatWeDo-primary-text {
  font-size: 2.5rem;
}
/*SLIDER COMPONENT*/
.slider {
  max-width: 100rem;
  height: 40rem;
  margin: 5rem;
  position: relative;

  /* IN THE END */
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  width: 100%;
  height: 40rem;

  display: flex;
  align-items: center;
  justify-content: center;

  /* THIS creates the animation! */
  transition: transform 1s;
}

.slide > img {
  /* Only for images that have different size than slide */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider__btn {
  position: absolute;
  top: 45%;
  z-index: 10;

  border: none;
  background: rgba(255, 255, 255, 0.7);
  font-family: inherit;
  color: #333;
  border-radius: 50%;
  height: 5.5rem;
  width: 5.5rem;
  font-size: 3.25rem;
  cursor: pointer;
}

.slider__btn--left {
  left: 6%;
  transform: translate(-50%, -50%);
}

.slider__btn--right {
  right: 6%;
  transform: translate(50%, -50%);
}