@font-face {
    font-family: 'Fredoka';
    src: url('../font/FredokaOne_CZ-Regular.eot');
    src: url('../font/FredokaOne_CZ-Regular.eot?#iefix') format('embedded-opentype'),
        url('../font/FredokaOne_CZ-Regular.woff2') format('woff2'),
        url('../font/FredokaOne_CZ-Regular.woff') format('woff'),
        url('../font/FredokaOne_CZ-Regular.svg#FredokaOne_CZ-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



html {
  scroll-behavior: smooth;
}


body {
  color: #2F2F2F;
  padding: 0;
  margin: 0;
  font-family: 'Quicksand', sans-serif;
  font-style: normal;
  font-weight: 500;
}

img {
  max-width: 100%;
}

a {
  color: #000;
  text-decoration: underline;
  transition: 0.4s;
}

p {
    padding: 0;
    margin: 0;
    font-size: 18px;
    color: #2F2F2F;
    font-weight: 500;
    font-family: Quicksand;
}

h1 {
    font-size: 50px;
    margin: 100px 0 0;
    font-weight: normal;
    font-family: 'Fredoka', sans-serif;

}

h2 {
    text-align: center;
    font-size: 55px;
    font-style: normal;
    font-weight: normal;
    font-family: 'Fredoka', sans-serif;
}

h3 {
    text-align: center;
    font-size: 34px;
    font-style: normal;
    font-weight: normal;
    font-family: 'Fredoka', sans-serif;
}

h4 {
    text-align: center;
    font-size: 25px;
    font-style: normal;
    margin: 0;
    padding: 0;
}

.logo {
  margin: 30px auto;
  text-align: center;
  display: block;

}

a.button-t {
    border-radius: 70px;
    font-size: 30px;
    text-decoration: none;
    display: block;
    border: 4px solid #A2E2C7;
    color: #A2E2C7;
    padding: 10px 40px;
    max-width: 140px;
    text-align: center;
    margin: 20px 0;
    font-weight: 700
}

a.button-t:hover {
    border-radius: 70px;
    font-size: 30px;
    text-decoration: none;
    display: block;
    border: 4px solid #A2E2C7;
    color: #fff;
    background: #A2E2C7;
    padding: 10px 40px;
    max-width: 140px;
    text-align: center;
    margin: 20px 0;
    font-weight: 700
}

.box:hover span {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  flex-direction: column;
  text-align: center;
  padding: 5%;
  align-items: center;
  justify-content: center;
  width: 85%;
  margin: auto;
  height: 85%;
  color: #fff;
}

.box span {
  position: absolute;
}

a.button-p {
    border-radius: 70px;
    font-size: 30px;
    text-decoration: none;
    display: block;
    border: 4px solid #EC5BA6;
    color: #EC5BA6;
    padding: 10px 40px;
    max-width: 140px;
    text-align: center;
    margin: 20px 0;
    font-weight: 700
}

a.button-p:hover {
    border-radius: 70px;
    font-size: 30px;
    text-decoration: none;
    display: block;
    border: 4px solid #EC5BA6;
    color: #fff;
    background: #EC5BA6;
    padding: 10px 40px;
    max-width: 140px;
    text-align: center;
    margin: 20px 0;
    font-weight: 700
}


a.button {
    border-radius: 70px;
    font-size: 30px;
    text-decoration: none;
    display: block;
    border: 4px solid #3B8700;
    color: #3B8700;
    padding: 10px 40px;
    max-width: 140px;
    text-align: center;
    margin: 20px 0;
    font-weight: 700
}

a.button:hover {
    border-radius: 70px;
    font-size: 30px;
    text-decoration: none;
    display: block;
    border: 4px solid #3B8700;
    color: #fff;
    background: #3B8700;
    padding: 10px 40px;
    max-width: 140px;
    text-align: center;
    margin: 20px 0;
    font-weight: 700
}

a.button-small {
    border-radius: 70px;
    font-size: 21px;
    text-decoration: none;
    display: block;
    border: 4px solid #3B8700;
    color: #3B8700;
    padding: 8px 57px;
    max-width: 140px;
    text-align: center;
    margin: 20px 0;
    font-weight: 700;
}

a.button-small:hover {
    border-radius: 70px;
    font-size: 21px;
    text-decoration: none;
    display: block;
    border: 4px solid #3B8700;
    color: #fff;
    background: #3B8700;
    padding: 8px 57px;
    max-width: 140px;
    text-align: center;
    margin: 20px 0;
    font-weight: 700;
}

.pink a.button-small.green {
    background: #fff;
    padding: 10px 20px;
}


.pink a.button-small.green:hover {
    background: #fff;
    padding: 10px 20px;
    background: #3B8700;
}

.pink-button {
    border-radius: 70px;
    font-size: 20px;
    text-decoration: none;
    display: block;
    border: 4px solid #EC5BA6;
    color: #EC5BA6;
    padding: 8px 0px;
    max-width: 140px;
    text-align: center;
    margin: 20px 0;
    font-weight: 700;
}

.pink-button:hover {
    border-radius: 70px;
    font-size: 20px;
    text-decoration: none;
    display: block;
    border: 4px solid #EC5BA6;
    color: #fff;
    background: #EC5BA6;
    padding: 8px 0px;
    max-width: 140px;
    text-align: center;
    margin: 20px 0;
    font-weight: 700;
}

header {
  display: flex;
  padding: 24px 0;
  align-items: center;
  justify-content: space-between;
}

.container {
  max-width: 90%;
  margin: auto;
}

.bg-head {
    position: absolute;
    z-index: -2;
    top: 0px;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%!important
}

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



.box span:hover {
  transition: 0.3s;
}

.box {
  transition: 1s;
  -moz-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  -webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
}


.first-section .flex.cover div {
    width: 50%;
}

.first-section .slider .flex.cover img.cover-image {
    width: 35%;
    position: relative;
    right: 150px;
    margin-bottom: 90px;
}

.first-section .slider .flex.cover img.cover-image-pink {
    width: 48%;
    position: relative;
    right: 70px;
    margin-top: 30px;
    margin-bottom: 90px;
}

.slider .flex {
  display: flex!important;
}

.flex.cover p {
  font-size: 30px;
  margin: 34px 0;

}

.yellow {
    background: #FFF0CA;
    padding: 80px;
}

.usp {
    display: flex;
    justify-content: center;
    gap: 85px;
    text-align: center;
}

.boxes {
  padding: 40px 20px 80px;
}


.yellow p {
  max-width: 900px;
  line-height: 1.4;
  text-align: center;
  padding: 30px;
  margin: auto;
}

ul.menu {
    margin-right: 100px;
    list-style: none;
    display: flex;
    gap: 50px;
}

ul.menu li a {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    color: #000;
}

ul.menu li a:hover {
    color: #000;
}

.pink {
  background: #FFBBDE;
}

.pink img {
    position: relative;
    top: 70px;
    width: 50%;
}

.pink h2 {
    text-align: left;
    padding: 20px 0;
    margin: 0;
}

.about {
    max-width: 900px;
    margin: auto;
    gap: 40px;
    padding: 80px 20px;
    display: flex;
    align-items: center;
    text-align: right;
}

.pink .flex {
    align-items: center;
    gap: 130px;
    line-height: 1.5;
}

.pink .button {
  background: #fff;
}


.pink .container {
  position: relative;
}


.pink .fleck-right {
    position: absolute;
    right: -30px;
    width: 197px;
  }

.pink .fleck-bottom {
    position: absolute;
    width: 57px;
    height: 59px;
    bottom: -440px;
    left: 140px;
    right: 0;
    margin: auto;
}

.vege-info {
    width: 50%;
}

.bibi-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-self: center;
    align-items: flex-end;
}

.about p {
    padding: 0;
    margin: 0;
    line-height: 1.4;
    font-size: 18px;
    color: #2F2F2F;
    font-weight: 400;
}

.product-main,
.products {
  display: flex;
  flex-wrap: wrap;

}

.product-main .box,
.products .box {
    width: 24%;
    padding: 0.5%;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
}

.fruit-left {
  position: absolute;
  left: 30px;
  bottom: 40px;
}

.fruit-right {
  position: absolute;
  left: 30px;
  bottom: 40px;
}

.product-main .box h3 {
    text-align: left;
    padding: 15px 0;
    margin: 0;
}




.box span {
  opacity: 0;

}

.box span:hover {
    opacity: 1;
}


.box span a {
  font-size: 20px;
  font-weight: 700;
}


.box:nth-child(1) span {
  background: #d8b82be3;
}

.box:nth-child(2) span {
  background: #f72a33cf;
}

.box:nth-child(3) span {
  background: #fd881ecf;
}

.box:nth-child(4) span {
  background: #ca4e70d4;
}





.box:nth-child(5) span {
  background: #2ba0c0d6;
}

.box:nth-child(6) span {
  background: #f33497d6;
}

.box:nth-child(7) span {
  background: #027540c9;
}

.box:nth-child(8) span {
  background: #c89d5bd9;
}





.box:nth-child(9) span {
  background: #c89d5bd9;
}

.box:nth-child(10) span {
  background: #c89d5bd9;
}

.box:nth-child(11) span {
  background: #59a5d1d9;
}

.box:nth-child(12) span {
  background: #f68400d6;
}


.box:hover span p {
  padding: 20px 0;
  font-size: 17px;
}

.box:hover span p,
.box:hover span a {
    color: #fff;
}


footer {
    border-top: 9px solid #ffd25e;
    padding: 40px;
    font-weight: 600;
    text-align: center;
    line-height: 2;
}


@media screen and (min-width: 1900px) {

  .container {
      max-width: 1800px;
      margin: auto;
  }

  h1 {
    font-size: 60px;
    margin: 160px 0 0;
    font-weight: normal;
    font-family: 'Fredoka', sans-serif;
}

ul.menu li a {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 20px;
    color: #000;
}

a.button {
    padding: 16px 40px;
  }


  h2 {
      text-align: center;
      font-size: 60px;
  }

  h3 {
    text-align: center;
    font-size: 42px;
  }

  .yellow p {
    max-width: 1260px;
    line-height: 1.4;
    text-align: center;
    padding: 30px;
    margin: auto;
    font-size: 22px;
}

p {

    font-size: 21px;
  }

}


@media screen and (max-width: 768px) {

  .flex {
      flex-direction: column;
  }

  .first-section .flex.cover div {
      width: 100%;
  }


  ul.menu {
    display: none;
}

h1 {
    font-size: 36px;
    margin: 0px 0 0;
    text-align: center;
    font-weight: normal;
    font-family: 'Fredoka', sans-serif;
}




header {
    flex-direction: column;
        padding: 0px 0 60px;

}

header a:first-child {
    padding: 40px;
}

.first-section .slider .flex.cover img.cover-image {
    width: 90%;
    margin: auto;
    right: 0;
}

.first-section .slider .flex.cover img.cover-image-pink {
    width: 100%;
    right: 0;
    margin: 30px auto 0;
}

a.button-p,
a.button-t {
 margin: auto;
}

.first-section .slider .bg-head {
  display: none;
}

.flex.cover p {
    font-size: 25px;
    margin: 24px 0;
    text-align: center;
}


a.button {
    margin: 0 auto 40px;
}


.usp {
    display: flex;
    justify-content: center;
    gap: 45px;
    flex-direction: column;
    text-align: center;
}

.product-main .box, .products .box {
    width: 100%;
    padding: 0.5%;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
}


.about p {
    padding: 0;
    margin: 0;
    line-height: 1.4;
    font-size: 18px;
    color: #2F2F2F;
    text-align: center;
    font-weight: 400;
}

.bibi-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-self: center;
    align-items: center;
}

.product-main p {
    text-align: center;
}

.product-main .box h3 {
    text-align: center;margin: auto;
}

.product-main .box .pink-button {
    margin: 20px auto;
    width: 210px;
}

.pink .fleck-right {
  display: none
}


.pink img {
    position: relative;
    top: 70px;
    width: 90%;
}

.vege-info {
    width: 100%;
    text-align: center;
}

.vege-info .button {
    margin: auto;
}

.pink h2 {
    text-align: center;
    padding: 20px 0;
    margin: 0;
}

.pink .fleck-bottom {
  display: none;
}

.pink a.button-small.green {
  margin: 20px auto 60px;;

}

.container {

  width: 100%;
  padding: 20px;
}


.fruit-left,
.fruit-right {
  display: none;
}

.yellow {
    background: #FFF0CA;
    padding: 20px;
}


}

@media screen and (min-width: 768px) and (max-width: 900px) {


  h1 {
      font-size: 27px;
      margin: 40px 0 0;
      font-weight: normal;
      font-family: 'Fredoka', sans-serif;
  }

  .flex.cover p {
    font-size: 21px;
    margin: 14px 0;
}


h3 {
    font-size: 22px!important;
}

ul.menu {
    display: none!important;

}

.container {
    max-width: 90%;
    padding: 5%;
    margin: auto;
}

.fruit-left,
.fruit-right {
  display: none;
}

.product-main {
  gap: 30px;
}

.product-main .box:first-child,
.product-main .box:last-child  {
  display: none;
}

.product-main .box {
  width: 40%;
}

.pink .flex {
    flex-direction: column-reverse;

}

.pink .fleck-right {
    position: absolute;
    right: 30px;
    width: 127px;
}

.pink .flex {
    align-items: center;
    gap: 0px;
    line-height: 1.5;
}

.vege-info {
    width: 77%;
}

.usp {
    display: flex;
    justify-content: center;
    gap: 15px;
    text-align: center;
}


}


@media screen and (min-width: 900px) and (max-width: 1200px) {


  h1 {
      margin: 60px 0 0;
      font-size: 35px;
  }

  .flex.cover p {
    font-size: 22px;
    margin: 22px 0;
}

a.button {
    font-size: 24px;
    padding: 10px 40px;
    max-width: 100px;

}





ul.menu {
    display: none!important;

}

.container {
    max-width: 90%;
    padding: 5%;
    margin: auto;
}

.fruit-left,
.fruit-right {
  display: none;
}

.product-main {
  gap: 30px;
}

.product-main .box:first-child,
.product-main .box:last-child  {
  display: none;
}

.product-main .box {
  width: 40%;
}

.pink .flex {
    flex-direction: column-reverse;

}

.pink .fleck-right {
    position: absolute;
    right: 30px;
    width: 127px;
}

.pink .flex {
    align-items: center;
    gap: 0px;
    line-height: 1.5;
}

.vege-info {
    width: 77%;
}

.usp {
    display: flex;
    justify-content: center;
    gap: 15px;
    text-align: center;
}



}


@media screen and (min-width: 1200px) and (max-width: 1520px) {

  h1 {
    font-size: 40px;
  }

  h2 {
    font-size: 50px;
  }

  h3 {
    font-size: 28px;
  }

  h4 {
    font-size: 22px;

}

  p {
    font-size: 16px;
  }

.flex.cover p {
        font-size: 26px;
        margin: 22px 0;
    }

    .fruit-left {

        left: -40px;

    }

    .fruit-right {

    right: -60px;

}

.box:hover span p {

    font-size: 14px;
}

.pink .fleck-right {
    position: absolute;
    right: -50px;
    width: 107px;
}


}