.info-banner {
  background-color: #EC0000;
  color: white;
  padding: 10px;
  text-align: center;
  font-weight: bold;
}

.info-banner a {
  color: white;
  text-decoration: underline;
}
.hidden {
    display: none;
  }

  *{
    font-family: 'Montserrat', sans-serif!important;
  }

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #ffffff; /* Ensure the background color covers the entire page */
    scroll-behavior: smooth;
    font-family: 'Montserrat', sans-serif!important;
    font-size:14px;
}

.allwebsite {
    width: 100%; /* Rozmiar na szerokość 100% */
    height: 100%; /* Rozmiar na wysokość 100% */
    overflow-x: hidden;
  }
  .leftright {
    width: 1400px;
    height: auto;
    margin: 0 auto;
    display: flex;
    padding-top:4rem;
}
  .left-side {
    margin-top: -62rem;
    display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  /* margin: 0 auto; */
  transform: scale(0.85);
  }
  .right-side {
    
    margin: 0 auto;
    transform: scale(0.85);
  margin-top: -8rem;
  }

  .mobile-show{
    display: none !important;;
  }
  

.header-content {
    max-width: 1920px;
    height: 70px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Zapewnia, że logo i nawigacja będą na przeciwnych końcach nagłówka */
    position: relative; /* Pozwala na absolutne pozycjonowanie logo */
    padding: 11px 317px; /* Odpowiedni odstęp zgodnie z wymiarami */
}

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.fixed-mobile-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.logo-link {
    position: absolute; /* Absolutne pozycjonowanie dla logotypu */
    left: 0; /* Ustawienie logotypu na samym lewym brzegu */
    top: 11px; /* Odstęp od górnej krawędzi nagłówka */
}

.logo-link img {
    width: 149px; /* Szerokość logotypu */
    height: 48px; /* Wysokość logotypu */
}
.welcome-section {
    background-color: #EC0000; /* The red color from your specifications */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center; /* Center content horizontally */
    padding: 20px;
    width: 100%; /* Ensure the section extends to full width */
    height: 454px;
}

.welcome-text {
    text-align: left;
    max-width: 31rem; /* Max width of the text */
  margin-right: 3rem; /*margin of the text*/
}

.welcome-text h1 {
    font-weight: 800; /* Boldness from your specifications */
    font-size: 24px; /* Font size from your specifications */
    line-height: 29.26px; /* Line height from your specifications */
    margin: 0; /* Adjust as needed */
    color:white; /* Change color of the text */
    margin-bottom: -0.5rem;
}
.welcome-text h2 {
color: white;
    font-size: 19px !important;
    margin: 1rem 0px 0px 0px !important;
}

.welcome-text a{
  color: white;
  text-decoration: underline;
}

.welcome-text p {
    font-weight: 400; /* Regular weight for the paragraph */
    font-size: 14px; /* Font size from your specifications */
    line-height: 19.5px; /* Line height from your specifications */
    margin-top: 10px; /* Space between title and paragraph */
    margin-bottom: 0; /* Adjust as needed */
}

.welcome-image {
  max-width: 36rem; /* Width of the image from your specifications */
    height:auto; /* Height of the image from your specifications */
    object-fit: contain; /* Ensure the image fits within the dimensions without stretching */
}

.procedury-image {
  max-width: 24rem; /* Width of the image from your specifications */
    height:auto; /* Height of the image from your specifications */
    object-fit: contain; /* Ensure the image fits within the dimensions without stretching */
}


.satisfaction-survey-section {
    display: flex;
    align-items: center;
    justify-content: center; /* Center the content horizontally */
    padding: 0 457px; /* Horizontal padding, no vertical padding as per your specs */
    gap: 51px; /* Space between the image and the text column */
    max-width: 1918px; /* Max width of the section */
    height: 495px; /* Height of the section */
    margin: auto; /* Center the section on the page */
    background-color: #ffffff; /* Set background color to white */
}

.survey-image {
    width: 537px; /* Width of the image */
    height: 495px; /* Height of the image, assume this should be auto to maintain aspect ratio unless otherwise specified */
    object-fit: contain; /* This will ensure that your image is fully visible and contained within the element */
}

.survey-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align text to the start (left) */
}

.survey-text h2 {
    font-weight: 800; /* Bold weight for the header */
    font-size: 18px; /* Font size for the header */
    line-height: 21.94px; /* Line height for the header */
    color: #231F20; /* Text color */
    width: 416px; /* Width of the header */
    height: 22px; /* Height of the header */
    margin: 0 0 10px 0; /* Adjust the bottom margin to space out the header from the paragraph */
}

.survey-text p {
    font-weight: 500; /* Medium weight for the paragraph */
    font-size: 16px; /* Font size for the paragraph */
    line-height: 19.5px; /* Line height for the paragraph */
    color: #231F20; /* Text color */
    width: 414px; /* Width of the paragraph */
    height: 40px; /* Height of the paragraph */
    margin: 0; /* No margin if you want the elements to be close together */
}
.survey-link {
    display: inline-flex; /* Use inline-flex to keep the link inline but also apply flexbox properties */
    align-items: center; /* Center the text vertically */
    justify-content: center; /* Center the text horizontally */
    font-weight: 400; /* Normal weight for the text */
    font-size: 16px; /* Font size for the text */
    line-height: 19.5px; /* Line height for the text */
    text-decoration: none; /* Remove underline from links */
    color: #231F20; /* Text color */
    background-color: #ffffff; /* Background color */
    border: 1px solid #EC0000; /* Border color and width */
    border-radius: 42px; /* Rounded corners for the buttons */
    padding: 21px; /* Vertical padding; horizontal padding is removed to allow text to center */
    margin-top: 10px; /* Margin between the buttons */
    width: 387px; /* Width of the buttons */
    height: 62px; /* Height of the buttons */
    box-sizing: border-box; /* Include padding and border in the width and height */
    transition: background-color 0.3s, border-color 0.3s, color 0.3s; /* Transition for hover effects */
    overflow: hidden; /* Prevents content from spilling out */
}

.survey-link:hover {
    background-color: #D12229; /* Background color on hover */
    color: #ffffff; /* Text color on hover */
    border-color: #D12229; /* Border color on hover */
}

.survey-link:hover {
    color: #CE2028; /* Change color to red on hover */
}

/* Responsiveness: Adjust layout for smaller screens if needed */

.emotion-section {
        /* width: 1290px;
        height: 398px; */
        text-align: center;
        background-color: #ffffff;
        padding-bottom: 5rem;
        width: 50rem;
        display: flex;
        flex-direction: column;
        
}

.icons{
  filter: hue-rotate(320deg) brightness(0.67) contrast(180%);
}

.icon-heart, .icon-like, .icon-star{
    position: relative;
    float: left;
    

  }

  
  .icon-heart1 {
    left: -3rem;
    top: -2rem;
    width: 3rem;
  
  }

  .icon-heart2 {
    width: 2rem;
    rotate: -20deg;
    left: -3rem;
    top: 2rem;
  }

  .icon-heart3 {
    width: 1.6rem;
    top: -1rem;
    left: 46rem;
  }

  .icon-like1 {
    width: 4rem;
    rotate: 160deg;
    left: 39rem;
    top: 2rem;
  }

  .icon-star1 {
    left: -15rem;
    width: 1rem;
    top: 14rem;
  }

  .icon-like2 {
    top: 16rem;
    width: 6rem;
    rotate: 20deg;
    left: -15rem;
  }

  .icon-star2 {
    top: 14rem;
    width: 1.5rem;
    left: 32rem;
  }

  .icon-star3 {
    top: 17rem;
    width: 2.5rem;
    left: 33rem;
  }

.emotion-text-container {
    margin-bottom: 20px; /* dodatkowa przestrzeń pomiędzy tekstem a emotikonami */
    width: 30rem;
        margin: 0 auto;
}

/* Stylizacja dla tytułu sekcji 'emotion' */
.emotion-title {
    font-weight: 800; /* Pogrubienie tytułu */
    font-size: 18px; /* Rozmiar czcionki dla tytułu */
    line-height: 21.94px; /* Wysokość linii dla tytułu */
    margin-bottom: 10px; /* Margines na dole tytułu */
}

/* Stylizacja dla tekstu pod tytułem w sekcji 'emotion' */
.emotion-text {
    font-weight: 500; /* Średnia grubość czcionki dla tekstu */
    font-size: 16px; /* Rozmiar czcionki dla tekstu */
    line-height: 19.5px; /* Wysokość linii dla tekstu */
    color: black;
}

/* Stylizacja kontenera na ikony/emotikony */

/* Stylizacja kontenera na ikony/emotikony */
.emotion-button {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    margin-top: 39px; /* odstęp od góry */
    width: 615px; /* szerokość przycisku */
    height: 108px; /* wysokość przycisku */
    border: 1.5px solid #EC0000; /* obramowanie przycisku */
    border-radius: 85px; /* zaokrąglenie rogów przycisku */
    box-sizing: border-box; /* aby szerokość i wysokość uwzględniały padding i border */
}

/* Stylizacja emotikon */
.emotion {
    width: 69px; /* Szerokość obrazka */
    height: 69px; /* Wysokość obrazka */
    cursor: pointer;
    margin:20px;
    /* Możesz dodać inne style, takie jak marginesy, jeśli to konieczne */
}

.emotion-button > .emotion:hover{
    width: 74px;
    height: 74px;
    cursor: pointer;
    transition-delay: 0s;
    transition-duration: 0.1s;
    transition-property: all;
    transition-timing-function: ease;
}
/* Stylizacja działow po wyborze*/
#departments-container {
    position: relative;
    width: 50rem;
    margin-top:-1rem;
}
.department-title {
    font-weight: 800;
    font-size: 18px;
    line-height: 21.94px;
    text-align: center;
    margin: 10px 0; /* Dostosuj margines, jeśli to konieczne */
}

.department-subtitle {
    font-weight: 500;
    font-size: 16px;
    line-height: 19.5px;
    text-align: center;
    margin-bottom: 20px; /* Dostosuj margines, jeśli to konieczne */
}   
.departments {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}
.department-row {

    display: flex;
  justify-content: center; /* Rozłoży przyciski równomiernie */
  margin: 0 auto 20px auto; /* Wyśrodkowanie kontenera i dodanie odstępu od dolnego rzędu */
  flex-wrap: wrap; /* Umożliwia zawijanie do nowej linii */
}

.department-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Wyśrodkowanie przycisków */
    gap: 10px; /* Odstęp pomiędzy przyciskami */
}

/* Style dla pojedynczego przycisku */
.department-button, .department-row1 a {
    height: 60px; /* Wysokość przycisku */
    border-radius: 81px; /* Zaokrąglenie rogów */
    border: 1px solid #EC0000; /* Obramowanie przycisku */
    font-weight: 500;
    font-size: 15px;
    line-height: 18.29px;
    color: black; /* Kolor tekstu */
    cursor: pointer;
    text-align: center; /* Tekst wyśrodkowany w przycisku */
    background-color: transparent; /* Tło przycisku */
     box-sizing: border-box; /* Box-sizing border-box, aby padding i border nie zwiększały rozmiaru */
    margin: 8px; /* Mały margines dookoła przycisku */
padding:0 3rem;
align-items: center;
  display: flex;
  justify-content: center;
}

.department-button:hover, .department-row1 a:hover{
    background-color: #EC0000;
    color: white !important;
    transition: 0.2s ease-in-out;
}


/* Dodatkowe style, aby poprawić układ przycisków */
.department-buttons::after {
    content: "";
    flex: auto;
}


/* Komunikat sukcesu */
.success-message, .meh-message, .sad-message {
    /* width: 616.16px; */
    height: 211px;
    border-radius: 39px;
    padding: 48.93px 42px; /* Aby wyrównać tekst wewnątrz */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #231F20;
    margin: 0 5rem;;
    /* top: 50%;
    left: 50%; */
    /* transform: translate(70%, 0%); */
}

.success-title, .meh-title, .sad-title {
    font-weight: 800;
    font-size: 18px;
    line-height: 21.94px;
    margin-bottom: 2rem;
}

.success-text, .meh-text, .sad-text {
    font-weight: 300; /* Waga 300 dla tekstu */
    font-size: 16px;
    line-height: 25px;
    text-align: left;
    margin: 0;
    /*width: 530px;  Szerokość dla tekstu */
}

.success-message a, .meh-message a, .sad-message a{
    text-decoration: underline;
    font-weight: 800;
}

.success-message {
    border: 1.5px solid #26991C;
    background-color: #ECF1EB;
}


.success-title, .success-message a{
    color: #26991C;
}


/* Komunikat meh */
.meh-message {
    border: 1.5px solid #E8C716;
    background-color: rgba(252, 249, 238, 0.43);
}

.meh-title, .meh-message a {
    color: #E8C716;
}

/* Komunikat sad */
.sad-message {
    border: 1.5px solid #EC0000;
    background-color: rgba(209, 18, 41, 0.04);
}

.sad-title, .sad-message a {
    color: #EC0000;
}

/* KUDOSY Ocen pracownika */
.appreciate-div {
    display: flex;
    justify-content: space-between;
    margin: 3rem auto;
    position: relative;
}

.appreciate-image {
    width: 20rem;
    height: auto;
    position: relative;
}

.stars-image {
  width: 16rem;
  height: auto;
  position: relative;
  top: 33.79px;
  left: 37.29px;
}

/*.appreciate-content {
    width: 594px;
    height: 578px;
    padding-left: 40px;  Odstęp od lewej krawędzi 
}*/

.appreciate-content h2 {
    font-size: 18px;
    font-weight: 800;
    line-height: 21.94px;
    color: #231F20;
    width: 416px;
    text-align: left;
}

.appreciate-content p {
    font-size: 16px;
    font-weight: 500;
    line-height: 19.5px;
    color: #231F20;
    width: 594px;
    margin-top: 25px;
}
.category-container {
    width: 611.47px; /* Szerokość kontenera pozostaje bez zmian */
    height: auto; /* Wysokość dostosuje się do zawartości */
    display: flex;
    flex-direction: column; /* Elementy będą ułożone w kolumnie */
    justify-content: space-around; /* Odstępy między rzędami */
    align-items: center; /* Wyśrodkowanie w poziomie */
    gap: 1.5rem; /* Odstęp pomiędzy rzędami */
}

.category-row {
    display: flex;
    justify-content: space-between; /* Odstępy między elementami w rzędzie */
    width: 100%; /* Szerokość rzędu na 100% kontenera */
    gap: 1.5rem; /* Odstęp między kategoriami */
}

.category {
    border-radius: 13px; /* Zaokrąglone rogi */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Lekki cień dla głębi */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor:pointer;
}

.category:hover{
  filter: brightness(1.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: 0.2s all ease-in-out;
}

.category img {
    width: 100%; /* Obrazek będzie wypełniał szerokość kontenera */
    height: auto; /* Wysokość obrazka będzie automatycznie dostosowana */
    border-radius: 13px; /* Zaokrąglone rogi tylko u góry */;
}

.category span {
    font-weight: 600; /* Pogrubienie tekstu */
    font-size: 16px; /* Rozmiar czcionki */
    line-height: 19.5px; /* Wysokość linii */
    color: #000; /* Kolor tekstu */
    text-align: center;
    position: absolute;
    width: 100%; /* Szerokość tekstu na całą szerokość kontenera */
}
#appreciation-form label {
    display: block;
    font-weight: 600;
    font-size: 15px;
    line-height: 18.29px;
    color: #000000;
    margin:0.5rem 0;
}

.image-text{
  position: relative;
  top: -5rem;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  line-height: 18.29px;
  color: #000000;
  filter: drop-shadow(0px 0px 4px white);
  text-shadow: 0px 1px 16px white;

}

#appreciation-form input,
#appreciation-form textarea {
    width: 611px;
    padding: 10px;
    border-radius: 42px; /* Dla input */
    border: 1px solid #D7D7D7;
    margin-bottom: 10px;
}

#appreciation-form textarea {
    height: 135px;
    border-radius: 9px; /* Dla textarea */
}
.appreciation-image {
    width: 611px; /* Szerokość obrazka */
    height: 144px; /* Wysokość obrazka */
    margin-top: 10px; /* Odstęp od góry */
    background-size: cover;
    object-fit: contain;
}

.appreciation-buttons{
  display: flex;
  justify-content: space-around;
  margin-top: 2rem;
}

.submit-button {
    height: 60px;
    border-radius: 42px;
    padding: 21px 120px;
    background-color: #D12229;
    color: white;
    font-weight: 600;
    font-size: 15px;
    line-height: 18.29px;
    border: none;
    cursor: pointer;
    display: block; /* Pełna szerokość w kontenerze */
}

.submit-button:hover{
  margin-top: -5px;
  margin-left: -5px;
  transition: 0.1s all ease-in-out;
  box-shadow: 6px 3px 10px 0px rgba(0, 0, 0, 0.5);
}

.return{
  text-decoration: underline;
  font-weight: 600;
}

.return:hover{
  color:#CE2028;
}

#success-alert {
    width: 594px;
    padding: 0 0 28px 0;
    gap: 55px;
    /* Dodaj wszystkie potrzebne style */
}
#appreciation-success-info {
    width:38rem;
}
#appreciation-success-info p {
  font-size: 16px;
  font-weight: 500;
  line-height: 19.5px;
  margin: 2rem 0;
}

#appreciation-success-info a {
  color:#EC0000;
  text-decoration: underline;
}


.replay-icon-container {
    display: inline-block; /* Umożliwienie wyświetlania obok tekstu */
    vertical-align: middle; /* Wyśrodkowanie w pionie w stosunku do tekstu */
    width: 45.17px;
    height: 58.07px;
    margin-right: 27px; /* Odstęp między ikoną a tekstem */
    border: 6px solid #D7D7D7;
}

.replay-icon {
    width: 100%;
    height: auto; /* Zachowanie proporcji obrazka */
}

.submit-button1 {
    display: inline-block; /* Pozwala na użycie padding i wyśrodkowanie tekstu */
    width: 281px;
    height: 181.07px;
    border-radius: 13px;
    border: 1px solid #D7D7D7;
    padding: 38px 22px;
    font-weight: 500;
    font-size: 16px;
    line-height: 19.5px;
    background-color: #D7D7D7;
    color: #231F20;
    cursor: pointer; /* Pokazuje, że przycisk jest klikalny */
    outline: none; /* Usuwa obramowanie po kliknięciu */
}

.submit-button1:focus {
    outline: none; /* Usuwa obramowanie po kliknięciu */
}

.submit-button1:hover {
    background-color: #E7E7E7; /* Lekka zmiana koloru tła przy najechaniu */
}
.appreciation-image-container {
    position: relative;
}
/* SEKCJA PYTAŃ FAQ*/

.faq-section {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 74px 0;
}

.faq-title {
    top: 42px;
    left: 16px;
    font-weight: 800;
    font-size: 18px;
    line-height: 21.94px;
    color: #231F20;
}

.faq-content {
  width: 32rem;
}

.faq-image {
    width: 358.04px;
    height: auto;
    margin-left: 11rem;
    position: relative;
}

/* Styl dla pytania i odpowiedzi */
.faq-item {
  max-width: 28rem;
  margin: 15px 0;
}

.faq-question {
  border-bottom: 1px solid #919191;
  padding: 8px 0px;
  gap: 10px;
  font-weight: 500;
  font-size: 16px;
  line-height: 21.94px;
  color: black;
  width: 120%;
  padding-left: 1rem;
}
.faq-icon {
  display: inline-block;
  transition: transform 0.3s ease;
  cursor: pointer;
  float: right; /* Umieszcza ikone po prawej stronie pytania */
}

.faq-icon .icon {
height: 1rem;
  width: auto;
  /* color: gray; */
  transform: rotate(90deg);
  filter: contrast(0.1);
  margin-left: -1rem;
}
.rotate {
  transform: rotate(270deg)!important;
}

.faq-image {
    width: 358.04px; /* Szerokość obrazka */
    height: auto; /* Wysokość auto, aby zachować proporcje */
    /* Ustaw ścieżkę do obrazka */
}
.faq-answer {
  font-weight: 500;
  font-size: 16px;
  line-height: 19.5px;
  width: 120%;
  word-wrap: break-word;
  overflow: auto;
  color: black;
  margin-top: 10px;
  margin-bottom: 2rem;
}

.faq-answer a{
 color:#CE2028;
 text-decoration: underline;
}
.faq-question:hover {
    cursor: pointer; /* Zmień kursor na efekt wskazywania po najechaniu na pytanie */
}
  /* SEKCJA PYTANIA DO HR*/
  .custom-section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: -4rem 0 6rem 0;
  }
  
  .custom-container {
    box-shadow: 0 4px 32.3px -8px rgba(0, 0, 0, 0.25);
    border-radius: 13px;
    padding: 66px 112px;
  }
  
  .custom-subsection {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  
  .custom-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  
  .custom-title p {
    font-weight: 800;
    font-size: 18px;
    line-height: 21.94px;
    color: #231F20;
  }
  
  .custom-text p {
    font-weight: 500;
  font-size: 16px;
    line-height: 19.5px;
    color: #000000;
  }
  
  .custom-button {
    background-color:#EC0000;
    border-radius: 100px;
    padding: 1.5rem 6rem;
    font-size: 15px;
    color:white;
  }

  .custom-button:hover{
    box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.5);
    margin: 0 -2px 0 -2px;
    color:white;
    }
  
  .custom-link {
    font-weight: 700;
    font-size: 15px;
    line-height: 18.29px;
    color: #FFFFFF;
    text-decoration: none;
  }
  /*PRAWA STRONA SRONY */
  .side-bar {
    display: flex;
    flex-direction: column;
    gap: 21px;
  }
  
  .side-bar > div{
  width: 391px;
  background-color: #FFFFFF;
  box-shadow: 0 4px 32.3px -8px rgba(0, 0, 0, 0.25);
  padding: 4rem 3rem;
  margin-bottom: 21px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.side-bar > div img {
    width: 100%; /* Zdjęcie wypełnia całą szerokość diva */
    height: auto; /* Dostosowanie wysokości do proporcji */
    margin-bottom: 10px; /* Dodaj odstęp od tekstu poniżej zdjęcia */
}
  
  .coffee-break, .value-of-the-week, .satisfaction-survey,.promo-gowork {
    margin: 0 auto;
  }
  .common-style .coffee-break-title,
  .common-style .promo-gowork-title {
      font-weight: 800;
      font-size: 18px;
      line-height: 21.94px;
      color: black;
  }
  
  .common-style .coffee-break-description,
  .common-style .promo-gowork-description {
      font-weight: 500;
      font-size: 16px;
      line-height: 19.5px;
      color: #231F20;
  }
  
  /* Dla obrazków */
  .common-style .coffee-break-image,
  .common-style .promo-gowork-image {
    width: 391px;
    height: auto;
    margin-left: -3rem;
  }
  
  /* Dla linków */
  .common-style .coffee-break-link,
  .common-style .promo-gowork-link {
      font-weight: 700;
      font-size: 18px;
      text-align: center;
      color: #EC0000;
      text-decoration: underline;
      text-decoration-color: #EC0000;
      margin-top: 10px; /* Dodaj odstęp od góry linku */
    }


  /* SEKCJA CO 7 DNI*/

  .week-title, .questionnaire-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 18px;
    line-height: 18.29px;
    color: #231F20;
    margin-bottom: 2.5rem;

}

.week-subtitle, .week-value-button, .description-form label, .questionnaire-subtitle{
    font-weight: 500;
    font-size: 16px;
    line-height: 20.63px;
    color: #231F20;
    margin-bottom: 2.5rem;
}

.week-value-button, #selected-value {
    font-weight: 700;
    color: #D12229;
    cursor: pointer;
    text-align: left;
    width: 100%; /* Szerokość przycisku */
}

#selected-value{
  text-align:center;
  font-size: 16px;
  margin-bottom: 2.5rem;
}

.week-value-button:hover{
  text-decoration: underline;
}

.description-form {
  display: none; /* Ukrycie domyślnie formularza */
  flex-direction: column;
  align-items: center; /* Wyśrodkowanie elementów */
}
.description-form.active {
  display: flex; /* Pokazanie formularza po aktywacji */
}

.description-form textarea {
  font-size: 15px;
  border: 1px solid #E5E7EB; /* Szary obramowanie */
  border-radius: 9px; /* Zaokrąglenie rogów */
  padding: 0.5rem; /* Wewnętrzny odstęp */
  margin-bottom: 2.5rem; /* Odstęp pod polem tekstowym */
  resize: none; /* Wyłączenie możliwości zmiany rozmiaru */
  width: 316px; /* Fixed width to match the screenshot */
  height: 104px; /* Fixed height to match the screenshot */
}

.description-form button[type="submit"] {
  font-weight: 700;
  font-size: 14.5px;
  color: #FFFFFF;
  background-color: #EC0000;
  border: none;
  padding: 21px 70px;
  border-radius: 42px; /* Zaokrąglenie rogów */
  margin-bottom: 10px; /* Odstęp pod przyciskiem */
  cursor: pointer;
}

.description-form button[type="button"] {
  font-weight: 700;
  font-size: 14.5px;
  color: #000000; /* Czarny tekst */
  background: none;
  border: none;
  cursor: pointer;
  margin-top: 10px; /* Odstęp nad przyciskiem */
  text-decoration: underline;
  margin-left: 45px;
}

.questionnaire-design{
  display: flex;
  font-size: 15px;
  color: black;
  border: 1.5px #EC0000 solid;
  justify-items: center;
  justify-content: center;
  padding: 1.2rem 0;
  border-radius: 146px;
  margin: -1rem 0 1rem 0;
  font-weight: 500;
  width: 100%;
}

.questionnaire-design:hover{
  color: white;
  background-color: #EC0000;
  border: 1.5px #EC0000 solid;
  transition: 0.2s ease-in-out;
}


.footer{
  height: 13rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.footer-sciana{
  width:13rem;
}

.footer-menu{
  background: linear-gradient(90deg, rgba(230,231,232,1) 0%, rgba(243,243,243,1) 100%);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-menu > ul > li{
  display: inline-flex;
  padding: 0 2vw;
  flex-direction: column;
  gap:1rem;
  justify-content: center;
  text-align: center;
  font-weight: 500;
}
.footer-menu > ul{
align-items: center;
  display: flex;
}



.footer-img{
  width:8rem;
}

.footer-icons{
  width:100%;
  gap: 1.3rem;
  display: flex;
}

.footer-icons img{
  height:1rem;
}

/* Center the contents as a whole on larger screens */
@media (min-width: 1938px) {
    .welcome-section {
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
}

@media screen and (max-width:1400px){
  .left-side{
    width:68vw;
  }

  .right-side{
    margin:-8rem 0 0 0;
  }

  .appreciate-div{
  margin: 3rem 0;
  }
}


@media screen and (max-width:1200px){
    .welcome-image {
        max-width: 400px;
        height: auto;
        object-fit: contain;
}

.emotion-section{
  padding: 4rem 0 7rem 0;
    background-color: #F3F3F3;
    width: 100%;
    margin-top: -5rem;
    justify-items: center;
    display: grid;
}

.icons{
  margin-left: -34vw;
}

.icon-star1 {
  top: 17rem;
}
.icon-like2 {
  top: 19rem;
}

.icon-star2 {
  top: 17rem;
}

.icon-star3 {
  top: 20rem;
}

.success-message, .meh-message, .sad-message{
  width:46rem;
  margin:0 auto;
}

.emotion-button{
  border:0
}

#feedback-form{
justify-content: center;
  justify-items: center;
  display: flex;
}


.appreciate-image h2{
  font-weight: 800;
  font-size: 18px;
  line-height: 21.94px;
  margin-bottom: 10px;
}

#appreciation-form textarea {
  height: 7rem;
  border-radius: 9px;
}

#appreciation-form input, #appreciation-form textarea {
  width: 100%;
}

.appreciation-image{
  width:100%;
  margin-top: 3rem;
}

.appreciate-image {
  width: 100%;
  height: auto;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.appreciate-content{
  width:45rem;
}

.appreciate-content p{
  width:auto;
}

.category-container{
  width:100%;
  margin-top:1.5rem;
}

.category-row{
  gap: 1.5rem;
}

.category{
  width:auto;
  height: auto;
}

.stars-image {
  width: 16rem;
  height: auto;
  top:0;
  margin-right: -5rem;
}


.footer-logo{
  display: flex!important;
  gap:1rem;
  flex-direction: column;
  margin-right: 3rem;
}

.mobile-hide{
  display: none !important;;
}

.appreciate-div{
  flex-direction: column;
  margin: 0;
    padding-top: 3rem;
}


.leftright{
flex-direction: column;
width: 100%;
}

.left-side{
  transform: scale(1);
  margin-top: 0;
  width: 100%;
}

.right-side{
  justify-items: center;
    display: grid;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0;
    transform: scale(1);
}

.side-bar{
  display: grid;
  flex-direction: column;
  gap: 21px;
  justify-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}

.welcome-text h1 {
    font-size: 22px; /* Font size from your specifications */
}
.welcome-text p {
    font-size: 14px; /* Font size from your specifications */
}

#appreciation-success-info {
  width: auto;
}

.faq-section{
  flex-direction: column-reverse;
  width:100%;
  align-items: center;
  padding: 1rem 0 4rem 0!important;
  width: 100%;
  background-color: #F3F3F3;
  margin-top: 5rem;
}

#promo-gowork{
   background-color: #F3F3F3;
    margin: 0;
    padding: 5rem 18rem;
    border-radius: 0;
    width: 100%;
}
 
#questionnaire-container{
  background-color: #F3F3F3;
  margin-top: -3rem;
  padding: 5rem 22rem;
  width: 100%;
}

#questionnaire-container a{
  width: 100%;
}

.custom-container{
  margin: 9rem 1rem 0 1rem;
}

.faq-image img{
  width: 15rem;
}

.faq-image{
display: flex;
flex-direction: row;
    align-items: center;
    margin: 0;
    padding: 2rem 0;
}

.faq-title{
  margin-top: 9rem;
}

.mobile-show{
  display: flex !important;
}

.side-bar > div{
  width: 53rem;
  box-shadow: none;
  display: grid;
  justify-content: center;
  justify-items: center;
  text-align: center;
  margin-bottom: 0;
}

.common-style .promo-gowork-image, .common-style .coffee-break-image{
  width: 429px;
    height: auto;
    margin:0
}
.week-value-button, #selected-value{
  text-align: center;
}

.description-form textarea{
  width: 100%;
}
.week-subtitle, .common-style .coffee-break-description, .common-style .promo-gowork-description, .faq-answer, .faq-question, .coffee-break-link, .success-text, .meh-text, .sad-text, .promo-gowork-link, .week-value-button, .description-form label,.custom-text p, #questionnaire-container .questionnaire-subtitle, .questionnaire-subtitle, .appreciate-content p, .emotion-text, .department-button{
  font-size: 14px!important;
  font-weight: 500;
}

.week-value-button{
  font-weight: 800;
}

}


@media screen and (max-width:989px){
    .welcome-section{
        flex-direction: column;
    }

    .emotion-section{
      width: 100%;
      padding-top: 5rem;
      margin-bottom: 4rem;
      padding-bottom: 10rem;
    }

    #departments-container{
      margin: 0 auto;
    margin-top: 0px;
    padding: 0 4rem;
    margin-top: -4rem;
    }

    .leftright{
      padding-top:0;
    }

    .welcome-text {
        max-width: 35rem;
        margin: 0 4rem 3rem 4rem;
      }

      .icons{
        position: relative;
        margin-top: 66px;
        margin-left: -64vw;
      }
      
   .icon-heart1 {
    left: 13rem;
    top: -4rem;
      }

      .icon-heart2 {
        left: 13rem;
    top: 0;
      }

      .icon-heart3 {
        left: 45rem;
    top: -4rem;
      }
      .icon-like1 {
        left: 39rem;
        top: -1rem;
      }

    .icon-like2 {
      top: 23rem;
    left: 2rem;
}
    .icon-star1 {
      left: 2rem;
    top: 21rem;
      }

      .icon-star2 {
        top: 23rem;
        left: 31rem;
      }

      .icon-star3 {
        top: 25rem;
    left: 31rem;
      } 
      .logo_img {
        width: 5rem!important;
      }

      .side-bar > div{
    width: 43rem;
}
#promo-gowork{
  padding: 5rem 14rem;
}
#questionnaire-container{
  padding: 5rem 15rem;
}


      
}

@media (max-width: 960px) {
  .success-message, .meh-message, .sad-message{
    width:40rem;
    margin:0 auto;
  }
  .appreciate-content {
    width: 35rem;
  }
    .satisfaction-survey-section {
        flex-direction: column;
        padding: 20px; /* Adjust padding for smaller screens */
    }

    .survey-image {
        width: auto; /* Allow image to scale with the container */
        height: auto; /* Maintain aspect ratio */
        max-width: 100%; /* Make sure image does not overflow the container */
    }

    .survey-text {
        align-items: center; /* Center the text block on smaller screens */
    }

    .survey-link {
        margin-top: 10px; /* Reduce space between links on smaller screens */
    }


}

@media screen and (max-width:860px){
  .icons{
    margin-left: -73vw;
    margin-bottom: -1rem;
}
}

@media screen and (max-width:820px){
.footer-menu > ul{
  justify-content: flex-start;
width: 71%;

flex-direction: column;
}

.footer-menu > ul > li{
display: flex;
text-align: left;
width: 100%;
}
}

@media screen and (max-width:800px){
    .emotion-section {
        width: 100%;
        height: auto;
        padding: 6rem 0 11rem 0;
        background-color: #F3F3F3;
      }
      
  .left-side{
    width: 100%;
    }
      
      .success-message, .meh-message, .sad-message{
      width: 30rem;
    border-radius: 13px;
      }
      
      .emotion-text-container {
        margin-bottom: 20px;
        width: 30rem;
        margin: 0 auto;
      }
      .emotion-button{
        width: 515px;
        border:0;
        margin-top: 1.5rem;
       }
      .icon-heart1 {
        left: 20rem;
        top: -4rem;
        width: 2rem;
      }
      .icon-heart2 {
        width: 1.5rem;
    left: 20rem;
    top: -1rem;
      }
      .icon-heart3 {
        width: 1.3rem;
    left: 49rem;
      }
      .icon-like1 {
        width: 3rem;
        left: 45rem;
      }
      .icon-star1 {
        width: 1rem;
  top: 20rem;
  left: 13rem;
      }
      .icon-like2 {
        width: 4rem;
    top: 22rem;
    left: 13rem;
      }
      .icon-star2 {
        width: 1.2rem;
        top: 20rem;
        left: 37rem;
      }
      .icon-star3 {
        width: 2.2rem;
        top: 23rem;
        left: 37rem;
      }

      .icons{
        left: -14vw;
  }

  #questionnaire-container {
    padding: 5rem 11rem;
  }
      
  .category-row{
    flex-direction: column;
  }

  .category {
    width: auto;
    height: 13rem;
    margin-top: 2rem;
  }

  .category img {
    height:100%;
    object-fit: cover;
  }
  .faq-section{
    background-color: #F3F3F3;
    margin: 4rem 0 5rem 0;
    padding: 0;
  }

  #promo-gowork{
    background-color: #F3F3F3;
    width: 100%;
    padding: 5rem 5rem;
  }
  .side-bar{
    width:100%;
  }

  .side-bar > div{
    text-align: center;
    width:100%!important;
    padding: 3rem 5rem;
  }
  .week-value-button, #selected-value{
    text-align: center;
  }

  .side-bar > div{
      width: 91vw;
    }
    .faq-title, .category span, .questionnaire-title, .appreciate-image h2, .emotion-title, .welcome-text h1, .week-title, .common-style .coffee-break-title, .common-style .promo-gowork-title, .department-title, .success-title, .meh-title, .sad-title, .common-style .coffee-break-link, .common-style .promo-gowork-link, .submit-button, #appreciation-form label, .return, .image-text{
      font-size:16px
    }
    }


/* Adjust layout for smaller screens */
@media (max-width: 768px) {
  #departments-container{
    margin: 0 auto;
    margin-top: 0.5rem;
    padding:0;
    width:30rem;
  }


    .welcome-section {
        flex-direction: column;
    }

    .welcome-text {
        max-width: 100%; /* Allow the content to fill the space on smaller screens */
    }

    .welcome-image {
        margin-top: 20px; /* Add some space above the image on smaller screens */
    }
    .mood-selector {
        text-align: center;
        /* Add additional styling */
    }
    
    .mood-options {
        border: 2px solid #EC0000;
        border-radius: 42px;
        padding: 20px;
        display: inline-flex;
        justify-content: center;
        gap: 20px;
        /* Add additional styling */
    }
    
    .mood-option {
        background: none;
        border: none;
        cursor: pointer;
        transition: transform 0.3s ease;
    }
    
    .mood-option img {
        height: 50px; /* Adjust as needed */
        width: auto;
    }
    
    .mood-option:hover {
        transform: scale(1.1); /* Example hover effect */
    }

    .login-container{
      flex-direction: column;
      gap: 3rem;
      margin-top: 1rem;
    }
    
}
@media screen and (max-width:687px){
.icons{
  left: -25vw;
}
.common-style .promo-gowork-image, .common-style .coffee-break-image{
  width: 350px;
}
#questionnaire-container {
  padding: 5rem 7rem;
}
}

@media screen and (max-width:600px){
  
  .appreciate-content {
    width: 27rem;
  }
  .appreciation-buttons {
    flex-direction: column-reverse;
    gap: 2rem;
  }
  
  .icons{
    left: -32vw;
  }

  .custom-container{
    padding: 4rem 3rem;
  }
  #questionnaire-container {
    padding: 5rem 5rem;
  }
}

@media screen and (max-width:570px){
.footer-menu{
  align-items: flex-start;
flex-direction: column-reverse;
gap: 1rem;
}
.footer-menu > ul > li{
    padding: 0;
  }
.footer-img{
  width: 6rem;
}

.icons{
  left: -39vw;
}

}

@media screen and (max-width:526px){
  #departments-container{
    margin-top: -3.5rem;
  }
    .welcome-text{
        margin: 0 1rem 2rem 1rem;
    }
    .welcome-image {
        max-width: 60vw;
      }
      .emotion-button {
        width: 415px;
       
        margin-top: 1.5rem;
      }
      .emotion-text-container {
        width: 20rem;
        margin-top: 3rem;
      }
      .icon-heart1 {
        left: 20rem;
      }
      .icon-heart2 {
    left: 20rem;
      }
      .icon-heart3 {
    left: 40rem;
      }
      .icon-like1 {
        left:36rem;
      }
      .icon-star1 {
        left: 13rem;
        top: 26rem;
      }
      .icon-like2 {
        left: 14rem;
        top: 27rem;
      }
      .icon-star2 {
        left:28rem;
        top:26rem;
      }
      .icon-star3 {
        left:29rem;
        top:27rem;
      }

      .icons{
        left: -34vw;
      }

      .faq-content {
        width: 22rem;
        justify-content: center;
        justify-items: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

      .success-message, .meh-message, .sad-message {
        width: 25rem;
        border-radius: 13px;
        margin-top: 3.5rem;
        padding: 2rem;
        height:auto;
      }

      .side-bar > div{
          width: 91vw;
        }

        .faq-answer, .faq-question{
          width: 25rem;
        }

}

@media screen and (max-width: 470px){
  .icons{
    left: -42vw;
}
.appreciate-div, .appreciate-content {
  width: 22rem;
}
.custom-button{
  padding: 1.5rem 3rem;
}
 
}

@media screen and (max-width: 430px){
  .icons{
    left: -52vw;
}
 
}


@media screen and (max-width: 400px) {
    .emotion-button {
      width: 275px;
    }
    .department-button{
     width: 100%; /*Pełna szerokość dla jednego przycisku na rząd na bardzo małych ekranach  */
     padding: 0;
 }
 .emotion-section {
  padding: 6rem 0;
}

#appreciation-success-info {
  width: 19rem;
}

.success-message, .meh-message, .sad-message {
  width: 22rem;
  margin-top: 0;
  padding: 1rem;
  height: auto;
}
    #departments-container {
      width: 20rem;
    }

    .icon-heart1 {
      display:none;
    }
    .icon-heart2 {
      display:none;
    }
    .icon-heart3 {
      display:none;
    }
    .icon-like1 {
      display:none;
    }
    .icon-star1 {
      display:none;
    }
    .icon-like2 {
      display:none;
    }
    .icon-star2 {
      display:none;
    }
    .icon-star3 {
      display:none;
    }

    

    .stars-image {
      width: 10rem;
      margin-left: -4rem;
    }

    .appreciate-image h2{
      margin-left:3rem;
    }

    .category {
      height: 10rem;
      margin-top: 1rem;
    }

    .category img {
      border-radius: 5px;
    }

    .faq-image img{
    width: 11rem;
  }

  .faq-image{
    justify-content: center;
    width: 22rem;
  }

  .faq-title{
      margin-top: 5rem;
      margin-left: -1rem;
    }
    .faq-answer, .faq-question{
      width: 22rem;
    }

    .common-style .promo-gowork-image, .common-style .coffee-break-image{
      width:300px;
    }

    .side-bar > div{
      width: 300px;
      margin: 0 0.5rem 5rem 0.5rem;
      padding: 0;
    }
    .week-title{
      margin-top:5rem;
    }
    #coffee-break, #week-value-container{
      width: 300px !important;
    }
    #questionnaire-container {
      padding: 5rem 4rem;
    }
    .custom-section {
      margin: -9rem 0 6rem 0;
    }

    
  }
  .contacts-section {
    background-color: #fff;
    padding: 40px 20px;
    margin-top: 40px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    font-family: 'Montserrat', sans-serif;
}

.contacts-container {
    max-width: 800px;
    margin: 0 auto;
}

.contacts-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 25px;
    color: #1a1a1a;
}

.contact-subtitle {
    font-size: 20px;
    font-weight: 600;
    margin-top: 30px;
    margin-bottom: 10px;
    color: #EC0000;
}

.contact-group p {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.6;
}

.contact-group a {
    color: #333;
    text-decoration: underline;
    transition: color 0.3s;
}

.contact-group a:hover {
    color: #EC0000;
}