@charset "UTF-8";
/* CSS Document */
/* import fontu z Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap");
/* font-family: "Hanken Grotesk", sans-serif; */
@font-face {
  font-family: gillSansCondensedBold;
  /* font-weight: bold; */
  src: url("font\GillSans Condensed Bold.otf") format("opentype");
}

/* ----------------------------------------------------------------------------------- */
/*                                 GLOBALNE SELEKTORY                                  */
/* ----------------------------------------------------------------------------------- */

* {
  /* gwiazdka odwołuje się do WSZYSTKICH elementów w pliku HTML */
  transition: 1s;

  /* zapobiega zmianie szerokosciu boxu przez padding */
  box-sizing: border-box;
}

html {
  /* font-family: "Hanken Grotesk", sans-serif; */
  font-family: "Urbanist", sans-serif;
  font-size: 10px;
  color: #27201c;
  /* font-size: 16px; --> domyślna bazowa wielkość fontu*/
  /* rem = root emphasis = wielokrotnosc bazowego rozmiaru fontu*/
  /* 1rem = 10px */

  scroll-behavior: smooth;
  /* płynne przwijanie */
}

body {
  font-size: 1.6rem; /* --> inaczej 16px */
}

h1 {
  /* font-family: "Gill Sans Ultra Bold Condensed", sans-serif; */
  font-family: "gillSansCondensedBold", sans-serif;
  /* font-size: 27.8rem; */
  font-size: 15vw;
  font-weight: 900;
  letter-spacing: 0.1rem;
  z-index: 6;
}

h2 {
  font-size: 6.4rem;
  font-style: italic;
  font-family: "Tw Cen MT Condensed";
  /* font-weight: 700;
  margin-bottom: 3rem; */

  line-height: 140%;
  /* jeśli miałoby być ciemne tło i jasne litery, to interlinia powinna być nawet większa */
  /* interlinia zależy też od fontu i rozmiaru */
  /* font-weight: 300; */

  z-index: 6;
}

h3 {
  font-size: 8rem;
  font-weight: 200;
  margin-bottom: 1rem;
}

h4 {
  font-size: 3rem;
  font-style: italic;
  font-family: "Tw Cen MT Condensed";
  font-weight: 200;
  /* margin-bottom: 3rem; */

  line-height: 140%;
  /* jeśli miałoby być ciemne tło i jasne litery, to interlinia powinna być nawet większa */
  /* interlinia zależy też od fontu i rozmiaru */
  /* font-weight: 300; */
}

h5 {
}

h6 {
}

a {
  text-decoration: none;
}

p {
  /* line-height: 140%;
  /* jeśli miałoby być ciemne tło i jasne litery, to interlinia powinna być nawet większa */
  /* interlinia zależy też od fontu i rozmiaru */
  /* font-weight: 300;
  font-size: 1.8rem;

  color: #27201c; */
}

figcaption {
  text-align: center;
  padding: 1rem 0 0 0;
}

b {
  font-weight: bold;
}

/* ----------------------------------------------------------------------------------- */
/*                                  NAWIGACJA desktop                                  */
/* ----------------------------------------------------------------------------------- */

nav {
  background-color: #27201c;
  color: #f0e7e5;
  position: fixed; /*wyjety z obiegu dokumentu*/
  width: 100%;

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

  padding: 1rem;

  z-index: 10;
}
nav ol {
  /* background-color: aqua; */
  max-width: 140rem;
  width: 100%;

  display: flex;
  justify-content: space-evenly;
}
nav ol li {
}
nav ol li a {
  /* background-color: deeppink; */
  padding: 1rem 2vw; /*vw=viewport width --> procent szerokości okna przegladarki*/

  /* display: inline; domyslnie, zeby nie przerywac ciaglasci tekstu */
  display: block;
  color: #e3d6d3;
  font-weight: 200;

  text-transform: lowercase;

  transition: 0.5s;
}
nav ol li a:hover {
  background-color: #eee;
  color: #222;
  border-radius: 1rem;
  font-weight: 400;
  transition: 0.5s;
}

.input-with-icon {
  position: relative;
  display: inline-block;
}

.input-with-icon input {
  padding-left: 3.2rem; /* Space for the icon */
  height: 3.2rem;
  font-family: "Urbanist", sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  border-radius: 1.2em;
  border: 1px solid #27201c;
}

.input-icon {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  /* color: #27201c; */
  color: #e3d7d5;
}

/* ----------------------------------------------------------------------------------- */
/*                                  WSZYSTKIE SEKCJE                                   */
/* ----------------------------------------------------------------------------------- */

section {
  min-height: 90vh;
  /* minimalna wysokość sekcji */
  /* vh --> viewport height = wysokość okna przeglądarki */

  /* FLEX CONTAINER */
  display: flex;
  flex-direction: column; /*zeby naglowek byl nad zawartoscią*/
  align-items: center; /* wyśrodkowanie w osi Y */
  justify-content: center; /* wyśrodkowanie w osi X */

  scroll-margin-top: 5.6rem;

  padding: 2rem; /*by teksty nie dotykaly krawedzi okna/ekranu*/
}

.zawartosc {
  /* background-color: red; */
  max-width: 120rem;

  /* FLEX ITEMS */
  width: 100%;
  padding: 5rem;
}

/* ----------------------------------------------------------------------------------- */
/*                                      HOMEPAGE                                       */
/* ----------------------------------------------------------------------------------- */

#homepage {
  background-color: #fff;
  text-align: center;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  /* overflow: hidden; */
  height: 450px;

  position: relative; /*wyjety z obiegu dokumentu*/
  width: 100%;
}

#homepage .zawartosc {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
  padding-top: 20vh;
  gap: 4vh;
}

#buna_title {
  transition: none;
  width: 40vw;
}

#buna_under_text {
  transition: none;
  width: 30vw;
}

#kobieta_z_Afryki {
  transition: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-370%, 0%);

  width: 10vw;
  z-index: 2;
}

#africa-map {
  transition: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(8%, -50%);

  width: 27vw;
  z-index: 1;
}

#map-pin {
  /* transition: 0.3s; */
  transition: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(760%, -150%);

  width: 3vw;
  z-index: 2;
}

#homepage a {
  color: #aaa;
  padding: 1rem 3rem;
  transition: 0.5s;
}

#homepage a:hover {
  background-color: #27201c;
  color: #eee;
  padding: 2rem 3rem;
  font-weight: 900;
  display: block;
  border-radius: 1rem;
  transition: 0.5s;
}

/* ----------------------------------------------------------------------------------- */
/*                                       O NAS                                         */
/* ----------------------------------------------------------------------------------- */

#o_nas {
  padding: 8rem 8rem 0 8rem;
}

#o_nas .zawartosc {
  /* FLEX CONTAINER */
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;

  text-align: center;
  padding: 7rem;
}

#o_nas article {
  /* FLEX ITEMS (kolumny) */
  flex: 0 1 30rem;
}

#o_nas p {
  font-size: 2.4rem;
  padding: 2rem 8rem;
  letter-spacing: 0.1px;
  line-height: 3rem;
}

#o_nas a {
  z-index: 3;
}

#witaj {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7rem;
}

#witaj_tekst {
  padding-top: 2rem;
}

#witaj_ziarenko_L {
  transition: 0.3s;
  width: 5rem;
  flex: 0 1;
  transform: rotateZ(-35deg);
}

#witaj_ziarenko_P {
  transition: 0.3s;
  width: 5rem;
  flex: 0 1;
  transform: rotateZ(35deg);
}

#o_nas_yellow {
  transition: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-80%, 60%);

  opacity: 40%;
}

#o_nas_blue {
  transition: none;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-5%, 37%);

  opacity: 40%;
}

#o_nas_pink {
  transition: none;
  position: absolute;
  left: 50%;
  top: 150%;
  transform: translate(-80%, 42%);

  opacity: 40%;
}

/* ----------------------------------------------------------------------------------- */
/*                              PROCES TWORZENIA KAWY                                  */
/* ----------------------------------------------------------------------------------- */

.circular-process {
  text-align: center;
  padding: 8rem 2rem 0 2rem;
  position: relative;
  /* overflow: hidden; */
}

.process-diagram {
  position: relative;
  width: 850px;
  height: 850px;
  margin: 0 auto;
}

#circular_process_middle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -40%);
  z-index: 2;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5rem;
}

#ziarno_kawy {
  transition: 0.4s;
  width: 13rem;
  transform: rotateZ(-20deg);
}
#ziarno_kawy:hover {
  transition: 0.4s;
  width: 13rem;
  transform: rotateZ(-5deg);
}

#ziarno_kawy_tekst {
  width: 27rem;
}

#process_middle_text {
  position: absolute;
  top: 57%;
  left: 33%;
  /* justify-content: center; */
  width: 30rem;
}

.middle_circle_base {
  display: flex;
  /* gap: 2rem;
  flex-wrap: wrap; */
  justify-content: center;

  text-align: center;
  padding: 7rem;

  transition: none;
  position: absolute;
  z-index: 9;
  top: 209%;
  left: 50%;
  transform: translate(-50%, -40%);
  /* top: 209%;
  left: 41%;
  transform: translate(-50%, -40%); */
}

.middle_circle {
  /* align-self: center; */
  width: 35rem;
  height: 35rem;
  /* border: 2px solid #27201c; */
  border-radius: 50%;
  padding: 4rem;

  display: flex;
  align-items: center;
  font-size: 1.6rem;
  background-color: white;
  text-align: center;
  line-height: 2rem;

  position: absolute;
  z-index: 9;
  display: none;

  /* left: 50%; */
  /* transform: translate(-50%, -50%); */
}

.circle {
  transition: 0.3s;

  position: absolute;
  width: 140px;
  height: 140px;
  border: 2px solid #27201c;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  /* background-color: white; */
  text-align: center;
  /* z-index: 3; */
}

.circle:hover {
  transition: 0.3s;

  position: absolute;
  width: 145px;
  height: 145px;
  background-color: rgba(255, 255, 255, 1);
  /* opacity: 0.5; */
  border: 2px solid rgba(255, 255, 255, 0);
  /* border-radius: 50%; */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  font-weight: 500;
  text-align: center;
  /* z-index: 3; */
}

.step1 {
  top: 79%;
  left: 30%;
  transform: translate(-50%, -50%);
}
.step2 {
  top: 62%;
  left: 17%;
  transform: translate(-50%, -50%);
}
.step3 {
  top: 40%;
  left: 16%;
  transform: translate(-50%, -50%);
}
.step4 {
  top: 21%;
  left: 28%;
  transform: translate(-50%, -50%);
}
.step5 {
  top: 13%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.step6 {
  top: 21%;
  left: 72%;
  transform: translate(-50%, -50%);
}
.step7 {
  top: 40%;
  left: 84%;
  transform: translate(-50%, -50%);
}
.step8 {
  top: 62%;
  left: 83%;
  transform: translate(-50%, -50%);
}
.step9 {
  top: 79%;
  left: 70%;
  transform: translate(-50%, -50%);
}

.arrow {
  position: absolute;
  display: flex;
  top: 45%;
  left: 50%;
}

#arrow1 {
  width: 3rem;
  transform: translate(-950%, 282%) rotateZ(-22deg);
}
#arrow2 {
  width: 3rem;
  transform: translate(-1177%, 20%) rotateZ(10deg);
}
#arrow3 {
  width: 3rem;
  transform: translate(-980%, -251%) rotateZ(42deg);
}
#arrow4 {
  width: 3rem;
  transform: translate(-399%, -421%) rotateZ(74deg);
}
#arrow5 {
  width: 3rem;
  transform: translate(310%, -421%) rotateZ(125deg);
}
#arrow6 {
  width: 3rem;
  transform: translate(890%, -245%) rotateZ(157deg);
}
#arrow7 {
  width: 3rem;
  transform: translate(1070%, 27%) rotateZ(189deg);
}
#arrow8 {
  width: 3rem;
  transform: translate(835%, 288%) rotateZ(221deg);
}

/* ----------------------------------------------------------------------------------- */
/*                                     NASZA KAWA                                      */
/* ----------------------------------------------------------------------------------- */

#nasza_kawa {
  background-color: #fff;
  padding-top: 13rem;
}

#nasza_kawa .zawartosc {
  padding: 0 5rem 15rem 5rem;

  display: flex;
  flex-direction: column;
  gap: 18rem;
}

#nasza_kawa .produkt {
  transition: 0.5s;
  width: 40rem;
  z-index: 2;
}
#nasza_kawa .produkt:hover {
  transition: 0.5s;
  transform: translate(0, -2%);
  width: 40rem;
  z-index: 2;
}

#nasza_kawa_tlo {
  position: absolute;
  opacity: 40%;
  width: 128rem;
  z-index: 0;
}

#nasza_kawa article {
  /* FLEX CONTAINER */
  display: flex;
  gap: 1rem;
  /* flex-wrap: wrap; */
  justify-content: space-around;
  align-items: center;

  z-index: 2;
}

#nasza_kawa a {
  /* FLEX ITEMS (kolumny) */
  flex: 0 1 30rem;

  z-index: 2;
  letter-spacing: 0.11rem;
  line-height: 2.1rem;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 3rem;

  width: 80vw;
}

.nasza_kawa_opis {
  /* FLEX ITEMS (kolumny) */
  flex: 0 1;

  width: 48rem;
}

.nasza_kawa_podsumowanie {
  /* FLEX ITEMS (kolumny) */
  flex: 0 1;

  font-weight: 700;
  width: 54rem;
}

/* ----------------------------------------------------------------------------------- */
/*                                      NASZE MOTTO                                    */
/* ----------------------------------------------------------------------------------- */

#nasze_motto {
  background-image: url("../img/kawa_w_tle.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}

#motto {
  left: 50%;
  transform: translate(40%, 0);
  background-color: rgba(9, 4, 7, 0.5);
  /* filter: drop-shadow(1rem 1rem 20rem #090407); */
  border-radius: 1rem;

  padding: 0.4rem 1rem;
  width: 60rem;
}

/* ----------------------------------------------------------------------------------- */
/*                                       STOPKA                                        */
/* ----------------------------------------------------------------------------------- */
#stopka {
  background-color: #27201c;
  color: #eee;
  font-weight: 200;
  /* background-color: #fff;
  color: #27201c; */
  /* min-height: 30%; */
  height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ----------------------------------------------------------------------------------- */
/*------------------------------------- ANIMACJE -------- -----------------------------*/
/* ----------------------------------------------------------------------------------- */

#witaj_ziarenko_L {
  /* background-color: antiquewhite; */
  animation: ziarenko_L 4s infinite;
  animation-timing-function: ease-in-out;
}
@keyframes ziarenko_L {
  0% {
  }
  5% {
    transform: rotateZ(-20deg);
  }
  10% {
    transform: rotateZ(-35deg);
  }
  15% {
    transform: rotateZ(-20deg);
  }
  20% {
    transform: rotateZ(-35deg);
  }
}

#witaj_ziarenko_P {
  /* background-color: antiquewhite; */
  animation: ziarenko_P 4s infinite;
  animation-timing-function: ease-in-out;
}
@keyframes ziarenko_P {
  0% {
  }
  5% {
    transform: rotateZ(20deg);
  }
  10% {
    transform: rotateZ(35deg);
  }
  15% {
    transform: rotateZ(20deg);
  }
  20% {
    transform: rotateZ(35deg);
  }
}

#map-pin {
  /* background-color: antiquewhite; */
  animation: map-pin 3s infinite;
  animation-timing-function: ease-in-out;
}
@keyframes map-pin {
  0% {
  }
  4% {
    transform: translate(760%, -160%);
  }
  8% {
    transform: translate(760%, -150%);
  }
  12% {
    transform: translate(760%, -160%);
  }
  16% {
    transform: translate(760%, -150%);
  }
}