#header_center_section {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 50px;
}

.header_h1 {
  font-family: poppins;
  text-align: center;
  font-size: 80px;
  padding-top: 220px;
}

.contact_h1_subheader {
  font-family: meri;
  font-size: 22px;
  text-align: center;
  margin: 0;
  color: #65778c;
}

.contact_spacer-line {
  margin: 50px 0px;
  justify-content: center;
  display: flex;
  width: 100%;
}

.contact_line_80 {
  width: 80%;
  background: linear-gradient(90deg, #33333300, #d6d6d6, #33333300);
  height: 1px;
  margin: 50px auto;
}

@media only screen and (max-width: 1000px) {
  #header_center_section {
      padding: 0 12.5%;
  }

  .header_h1 {
    font-size: 60px;
  }
}

/**
* #####################################
* # ____                  _           #
* #/ ___|  ___ _ ____   _(_) ___ ___  #
* #\___ \ / _ \ '__\ \ / / |/ __/ _ \ #
* # ___) |  __/ |   \ V /| | (_|  __/ #
* #|____/ \___|_|    \_/ |_|\___\___| #
* #####################################
*/

#services_section {
  width: 100%;
  height: 900px;
  background: linear-gradient(white 0%, #f3ffd6);
  overflow: hidden;
}

.services_container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 6%;  /* horizontal space between columns */
  row-gap: 20px;     /* vertical space between rows */
  padding: 0 50px;
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box; /* ensures padding is included in max-width */
}

.services_cell {
  height: 370px;
  text-align: center;
}

.services_cell:first-child {
  padding-top: 100px;
  height: 270px;
}

.services_cell a,
.services_cell a:hover {
  text-align: center;
  text-decoration: none;
  color: inherit;
}

.services_lootie_icon{
  width: 100px;
  height: 100px;
  margin: 0 auto;
  display: block;
}

.services_nadpis {
  font-family: poppins;
  padding-top: 10px;
  letter-spacing: -.67px !important;
  font-weight: 100;
  font-size: 35px;
  line-height: 53.33px;
}

.services_popis {
  font-family: meri;
  color: #45545F !important;
  margin: 17px 0px;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -.18px;
}

.services_learn {
  width: max-content;
  text-align: center;
  opacity: 0%;
  padding-bottom: 40px;
  transition: all 0.6s;
  border-bottom: 1px solid #485700 !important;
  position: relative;
  top: 32px;
  margin: 0 auto;
}

.services_cell:hover .services_learn {
  opacity: 100%;
  color: #485700;
  top: 0px;
  padding-bottom: 10px;
}

div#obrazky_serv {
  width: 2px;
  height: 2px;
  margin: 0 auto;
  position: relative;
  bottom: 0px;
  bottom: 150px;
}

img.j {
  position: absolute;
  opacity: 0;
  z-index: 0;
}

img.sr_img_1 {
  bottom: -315px;
  left: -1200px;
}

img.sr_img_2 {
  width: 340px;
  bottom: -315px;
  left: -415px;
}

img.sr_img_3 {
  width: 380px;
  bottom: -478px;
  left: 80px;
  transform: rotate(215deg);
}

img.sr_img_4 {
  width: 530px;
  bottom: -262px;
  left: 570px;
}

#sr_real_1 {
    animation: obr1 .6s ease forwards;
}

#sr_real_2 {
    animation: obr2 .6s ease forwards;
    animation-delay: 0.2s;
}

#sr_real_3 {
    animation: obr3 .6s ease forwards;
    animation-delay: 0.4s;
}

#sr_real_4 {
    animation: obr4 .6s ease forwards;
    animation-delay: 0.8s;
}
@keyframes obr1 {
  0% {opacity: 0.5; left: -1700px; bottom: -830px; filter: blur(10px);}
  100%{opacity: 1;}
}

@keyframes obr2 {
  0% {opacity: 0.5; left: -800px; bottom: -830px; filter: blur(10px);}
  100%{opacity: 1;}
}

@keyframes obr3 {
  0% {opacity: 0.5; left: 400px; bottom: -830px; filter: blur(10px);}
  100%{opacity: 1;}
}

@keyframes obr4 {
  0% {opacity: 0.5; left: 1050px; bottom: -630px; filter: blur(10px);transform: rotate(30deg);}
  100%{opacity: 1;}
}

img.reasons_cupcake {
  position: absolute;
  opacity: 0;
  width: 250px;
  z-index: 0 !important;
}

img#cupcakean {
  animation: prich 1s ease forwards;
}

@keyframes prich {
  from {opacity:0;bottom: 540px;left: -400px; transform: rotate(0deg);}
  to {opacity: 1;bottom: 540px;left: 0px; transform: rotate(35deg);}
}

@media (hover: hover) and (max-width: 1000px) {
  #services_section {
    height: auto;
  }

  .services_container {
    grid-template-columns: repeat(2, 1fr);
    padding-bottom: 50px;
  }

  img.sr_img_1 {
    bottom: -211px;
    left: calc(-45svw - 548px);
  }

  img.sr_img_2 {
    bottom: -218px;
    left: -196px;
  }

  img.sr_img_3 {
      bottom: -373px;
      left: calc(45svw - 153px);
  }

  @keyframes obr1 {
    0% {opacity: 0.5; left: -1700px; bottom: -830px; filter: blur(10px);}
    100%{opacity: 1;}
  }

  @keyframes obr2 {
    0% {opacity: 0.5; left: -800px; bottom: -830px; filter: blur(10px);}
    100%{opacity: 1;}
  }

  @keyframes obr3 {
    0% {opacity: 0.5; left: 800px; bottom: -830px; filter: blur(10px);}
    100%{opacity: 1;}
  }
}

@media (hover: none) and (max-width: 1000px) {
  .services_learn {
    opacity: 100%;
    padding-bottom: 40px;
    top: 0px;
    margin: 0 auto;
    padding-bottom: 10px;
  }

}

@media (max-width: 600px) {
  #services_section {
    height: auto;
  }

  .services_container {
    grid-template-columns: 1fr;
    padding-bottom: 0px;
  }

  img.sr_img_2 {
    bottom: -232px;
    left: calc(-45svw - 196px);
  }

  img.sr_img_3 {
    bottom: -379px;
    left: calc(45svw - 153px);
  }

  @keyframes obr1 {
    0% {opacity: 0.5; left: -800px; bottom: -830px; filter: blur(10px);}
    100%{opacity: 1;}
  }

  @keyframes obr2 {
    0% {opacity: 0.5; left: 800px; bottom: -830px; filter: blur(10px);}
    100%{opacity: 1;}
  }

}



/**
*  ____            _   _               ____
* / ___|  ___  ___| |_(_) ___  _ __   | ___|
* \___ \ / _ \/ __| __| |/ _ \| '_ \  |___ \
*  ___) |  __/ (__| |_| | (_) | | | |  ___) |
* |____/ \___|\___|\__|_|\___/|_| |_| |____/
*/
/* SECTION 5 */

#section5 {
  background: #ffe6e8;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  object-fit: cover !important;
  padding: 100px 0;
}

.s5_container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 6%;  /* horizontal space between columns */
  row-gap: 20px;     /* vertical space between rows */
  padding: 0 50px;
  max-width: 1400px;
  margin: 0 auto; /* centers the grid */
  box-sizing: border-box; /* ensures padding is included in max-width */
}

.cell {
  text-align: center;
}

.cell:nth-child(4) {
  border-top: 1px solid #c18191;;
}

.s5_header_left {
  font-family: poppins;
  font-size: 35px;
  padding-top: 10px;
  text-align: left;
}

.s5_subheader_left {
  font-family: meri;
  color: #65778c;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -.18px;
  text-align: left;
}

.cupkake {
  aspect-ratio: 1 / 1;
  transform: rotate(30deg);
  width: 250px;
  height: 250px;
  float:left;
  background-image: url('/source/media/img/cupcakes.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.inovative {
  margin-top: 62px;
}

.s5_subheader {
  font-family: meri;
  color: #65778c;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -.18px;
}

.s5_header {
  font-family: poppins;
  font-size: 30px;
  padding-top: 10px;
}

.s5_header_left2 {
  font-family: poppins;
  font-size: 21px;
  padding-top: 10px;
  text-align: left;
}

.s5_subheader_left2 {
  font-family: meri;
  color: #65778c;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -.18px;
  text-align: left;
}

#ul-list1 {
  list-style: none;
  padding: 0;
  text-align: left;
  font-family: meri;
  color: #c18191;
  font-size: 18px;
  line-height: 22px;
}


/* Medium screens (e.g. tablets) */
@media (max-width: 900px) {
  .s5_container {
    grid-template-columns: repeat(2, 1fr);
  }

  .s5_container .cell:nth-child(1),
  .s5_container .cell:nth-child(4) {
    grid-column: 1 / -1;
  }

  .s5_header_left {
    text-align: center;
  }

  .s5_subheader_left,
  .s5_header_left2 {
    text-align: center;
  }

  #ul-list1 {
    text-align: center;``
  }

  .cell:nth-child(4) {
    order: 6;
    padding-top: 40px;
  }

  .cupkake {
    display: none;
  }

  .cell{
    margin-top: 75px;
  }
}

/* Small screens (e.g. phones) */
@media (max-width: 600px) {
  .s5_container {
    grid-template-columns: 1fr;
  }

  .inovative {
    margin-top: 0px;
  }
  .cupcake {
    display: none;
  }

}