@media (max-width: 1763px) {
  .tiles {
    position: relative;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .tiles::-webkit-scrollbar {
    display: none;
  }

  /* Base styles - no gradients */
  .tiles {
    -webkit-mask-image: none;
    mask-image: none;
    transition: mask-image 0.3s ease, -webkit-mask-image 0.3s ease;
  }

  /* Right gradient only */
  .tiles.can-scroll-right {
    -webkit-mask-image: linear-gradient(
      to right,
      black 0%,
      black 90%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      black 0%,
      black 90%,
      transparent 100%
    );
  }

  /* Left gradient only */
  .tiles.can-scroll-left {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 10%,
      black 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 10%,
      black 100%
    );
  }

  /* Both gradients */
  .tiles.can-scroll-left.can-scroll-right {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 10%,
      black 90%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 10%,
      black 90%,
      transparent 100%
    );
  }
  #contact {
    flex-direction: column;
  }
  #contact div {
    width: 100%;
  }
  #contact-info-div #contact-image {
    margin-top: 1rem;
  }
}

@media (max-width: 1200px) {
  .buttons {
    flex-direction: column;
    align-items: start;
  }
}
@media (max-width: 1000px) {
  .information {
    flex-direction: column;
    gap: 2rem;
  }
  .information div,
  .information-image {
    width: 100%;
  }
  .tile {
    flex-direction: column;
    padding: 3rem 5rem;
    width: 50vh;
  }
  .tile p,
  .tile h4 {
    width: 100%;
  }
  .tile p {
    text-justify: distribute;
    hyphens: none; /* Brak dzielenia wyrazów */
    word-break: keep-all; /* Nie łam słów */
    overflow-wrap: normal; /* Nie zawijaj słów sztucznie */
  }
  .tile h4 {
    text-align: center;
  }
  #text-menu {
    display: none;
  }
  #icon-menu {
    display: flex;
  }
}

@media (max-width: 800px) {
  #offer h4,
  #offer p {
    width: 100%;
  }
  footer {
    flex-direction: column;
  }
  footer .flex {
    align-items: center;
  }
  footer ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 2rem;
  }
  footer li {
    list-style-type: "" !important;
  }
  footer .submenu{
    transform: translateX(-50%) !important;
  }
  #contact-form-div .flex{
    flex-direction: column;
    gap: 2rem;
  }

  #contact-form-div button{
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

@media (max-width: 600px) {
  section {
    padding: 2.5rem 2rem;
  }
  header {
    padding: 1rem 2rem;
  }
  .welcome {
    padding: 5rem 2rem;
  }
  .shape {
    width: calc(100% - 4rem);
    padding: 5rem 2rem;
  }
  footer {
    padding: 2rem;
  }
  :root {
    --huge: 4rem;
    --big: 2.3rem;
    --medium: 1.8rem;
    --between: 1.6rem;
    --small: 1.4rem;
    --little: 1.2rem;
  }
  .carousel-slide img {
    height: 200px !important;
  }
  .contact-info{
    margin-bottom: 1rem;
  }
}

@media (max-width: 500px) {
  footer ul li {
    font-size: var(--little);
  }
  header #icon-menu img {
    width: 1.5rem;
  }
  header h2 {
    font-size: var(--between);
  }
  label p{
    font-size: var(--little) !important;
  }
  label span{
    font-size: 1rem !important;
  }
  button, .buttons a{
    width: 100% !important;
    display: flex;
    justify-content: center;
  }
  .tile{
    width: 60vh;
    padding: 3rem;
  }
  .tile img{
    width: 8rem;
  }
  #contentHeader{
    display: flex;
    justify-content: center;
  }
  #contentHeader hr{
    display: none;
  }
  .content{
    padding: 3rem 0;
  }
}

@media(max-width: 450px){
  label{
    display: flex;
    flex-direction: column-reverse;
    align-items: start !important;
    gap: .5rem !important;
  }
  #contact-form-div{
    padding: 1.5rem;
  }
  .contact-info img{
    display: none;
  }
  .contact-info{
    margin: 1rem 0 0 0;
    text-align: justify;
  }
  #contact{
    padding-top: 1rem;
  }
  #contact-image{
    height:  15rem !important;
  }
}