@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");
@keyframes borderExpand {
  0% {
    border-width: 0; }
  50% {
    border-width: 10px;
    /* Pośredni efekt dla środkowego borderu */ }
  100% {
    border-width: 3px;
    /* Maksymalna szerokość dla zewnętrznego borderu */ } }
#module-group-341 {
  padding-top: 7vh;
  padding-bottom: 9vh; }

:root {
  --deg: 1;
  --x: -50%;
  --y: -50%;
  --speed: 150ms; }

@keyframes wobble {
  0% {
    filter: hue-rotate(240deg);
    transform: translate(var(--x), var(--y)) rotate(0deg); }
  50% {
    filter: hue-rotate(290deg);
    /* Pierwszy etap */
    transform: translate(var(--x), var(--y)) rotate(180deg);
    /* Obrót w połowie animacji */ }
  100% {
    filter: hue-rotate(240deg);
    /* Drugi etap */
    transform: translate(var(--x), var(--y)) rotate(360deg);
    /* Pełny obrót na końcu */ } }
.restaurants-group .container {
  max-width: 1900px; }

.restaurant-fog {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  background-image: url("/img/restaurant-fog.png");
  background-position: center;
  background-repeat: no-repeat;
  width: 70vh;
  height: 70vh;
  background-size: cover;
  pointer-events: none; }

.restaurant {
  min-height: 45.5vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: pointer;
  border-radius: 50%; }
  .restaurant:hover .magic-circle {
    font-size: 12vmin; }
  .restaurant:focus {
    outline: none !important; }
  .restaurant .front-card {
    position: absolute; }
    .restaurant .front-card img {
      width: 22vh; }
    .restaurant .front-card .text {
      position: relative; }
      .restaurant .front-card .text p {
        font-size: 22rem;
        letter-spacing: 3rem;
        text-transform: uppercase;
        color: #b77a50;
        font-weight: 400;
        text-align: center;
        font-family: "Outfit", sans-serif; }
  .restaurant .back-card {
    position: absolute; }
    .restaurant .back-card .text {
      position: relative;
      width: 33vh; }
      .restaurant .back-card .text h2 {
        text-align: center;
        font-size: 3vh;
        color: #3d4650;
        font-weight: 800;
        font-style: italic;
        font-family: "Playfair Display", sans-serif; }
      .restaurant .back-card .text p {
        font-size: 18rem;
        color: #4b4549;
        text-align: center;
        font-family: "Outfit", sans-serif;
        margin-bottom: 0; }
      .restaurant .back-card .text .buttons {
        margin-top: 0; }
      .restaurant .back-card .text .btn-magic {
        padding: calc(0.5vh + 20px) calc(4vh + 20px); }
        .restaurant .back-card .text .btn-magic:focus {
          outline: none !important; }
  .restaurant .magic-circle {
    transition: font-size 0.5s ease-in-out;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(var(--x, -50%), var(--y, -50%)) rotate(0deg);
    font-size: 11vmin;
    width: 3em;
    height: 3em;
    border-radius: 90% 95% 85% 105%;
    background: radial-gradient(circle, #fff 20%, #ffffff00 70%);
    /* Złoto na zewnątrz, białe w środku */
    mix-blend-mode: screen;
    filter: hue-rotate(240deg);
    animation: wobble calc(var(--speed) * var(--t)) linear infinite;
    box-shadow: 0 0 .5em .2em #00aa00 inset, 0 0 .15em 0 #00aa00;
    display: flex;
    align-items: center;
    justify-content: center; }
    .restaurant .magic-circle::after {
      font-size: 1em;
      white-space: nowrap; }
    .restaurant .magic-circle:nth-child(1) {
      --x: -53%;
      --y: -53%;
      --t: 37; }
    .restaurant .magic-circle:nth-child(2) {
      --x: -47%;
      --y: -52%;
      --t: 58; }
    .restaurant .magic-circle:nth-child(3) {
      --x: -45%;
      --y: -50%;
      --t: 46; }
    .restaurant .magic-circle:nth-child(4) {
      --x: -53%;
      --y: -45%;
      --t: 72; }
    .restaurant .magic-circle:nth-child(5) {
      --x: -55%;
      --y: -45%;
      --t: 62; }

@media (max-width: 575.5px) {
  .restaurant {
    min-height: 280px; }
    .restaurant:hover .magic-circle {
      font-size: 75px; }
    .restaurant .magic-circle {
      font-size: 75px; }
    .restaurant .front-card img {
      width: 150px; }
    .restaurant .front-card .text p {
      font-size: 18rem;
      letter-spacing: 2rem; }
    .restaurant .back-card .text {
      width: 200px; }
      .restaurant .back-card .text h2 {
        font-size: 20px; }

  .restaurant-fog {
    width: 420px;
    height: 400px; } }
@media (min-width: 576px) and (max-width: 767.5px) {
  #module-group-341 {
    padding-top: 0; }

  .restaurant-fog {
    max-width: 300px;
    max-height: 350px; }

  .restaurant {
    margin-top: -100px; }
    .restaurant:first-child {
      margin-top: -30px;
      flex: 0 0 100%;
      max-width: 100%; }
    .restaurant:hover .magic-circle {
      font-size: 11vmin; }
    .restaurant .front-card .photo img {
      width: 18vh;
      max-width: 150px; }
    .restaurant .front-card .text p {
      font-size: 16rem;
      letter-spacing: 1rem; }
    .restaurant .back-card {
      padding-top: 20px; }
      .restaurant .back-card .text {
        max-width: 180px; }
        .restaurant .back-card .text p {
          font-size: 16rem; }
    .restaurant .magic-circle {
      font-size: 10vmin; } }
@media (min-width: 768px) and (max-width: 991.5px) {
  .restaurant-fog {
    max-width: 510px;
    max-height: 550px; }

  .restaurant:hover .magic-circle {
    font-size: 11vmin; }
  .restaurant .magic-circle {
    font-size: 10vmin; } }
@media (min-width: 768px) and (max-width: 991.5px) and (min-height: 750px) {
  .restaurant:hover .magic-circle {
    font-size: 10vmin; }
  .restaurant .front-card .photo img {
    max-width: 160px; }
  .restaurant .front-card .text p {
    font-size: 18rem;
    letter-spacing: 1rem; }
  .restaurant .magic-circle {
    font-size: 9vmin; }
  .restaurant .back-card .text {
    max-width: 300px; } }
@media (min-width: 992px) and (max-width: 1199.5px) {
  .restaurant-fog {
    max-width: 510px;
    max-height: 550px; } }
@media (min-width: 992px) and (max-width: 1199.5px) and (min-height: 850px) {
  .restaurant:hover .magic-circle {
    font-size: 10vmin; }
  .restaurant .front-card .photo img {
    max-width: 210px; }
  .restaurant .front-card .text p {
    font-size: 20rem;
    letter-spacing: 2rem; }
  .restaurant .magic-circle {
    font-size: 9vmin; }
  .restaurant .back-card .text {
    max-width: 300px; } }
@media (min-width: 1200px) and (max-width: 1579.5px) {
  .restaurant-fog {
    max-width: 550px;
    max-height: 700px; } }
@media (min-width: 1200px) and (max-width: 1579.5px) and (min-height: 950px) {
  .restaurant:hover .magic-circle {
    font-size: 10vmin; }
  .restaurant .front-card .photo img {
    max-width: 210px; }
  .restaurant .front-card .text p {
    font-size: 20rem;
    letter-spacing: 2rem; }
  .restaurant .magic-circle {
    font-size: 9vmin; }
  .restaurant .back-card .text {
    max-width: 350px; } }

/*# sourceMappingURL=restaurants.css.map */