/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!QUERIES FOR MAIN PAGE !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
@media (max-width: 1440px) {
  /* HEADER */
  .logo img {
    margin-left: 2rem;
    margin-top: 0.2rem;
  }

  .button {
    font-size: 1rem;
    margin-right: 2rem;
  }

  /* UVOD */
  .uvod h1 {
    font-size: 3.7rem;
    left: 2rem;
    top: 13rem;
  }

  .uvod h2 {
    font-size: 3.7rem;
    left: 2rem;
    top: 26rem;
  }

  /* MEETING */
  .meeting h3 {
    left: 4rem;
    width: 70%;
  }

  .button-nd {
    left: 4.2rem;
  }

  /* FOOTER */
  .footer-content-grid {
    grid-template-columns: repeat(2, 50%);
  }
}

@media (max-width: 1024px) {
  /* HEADER */
  header ul li a {
    font-size: 1.1rem;
  }

  /* UVOD */

  .uvod h1 {
    font-size: 4rem;
    left: 2rem;
    top: 10rem;
  }

  .uvod h2 {
    font-size: 4rem;
    left: 2rem;
    top: 23rem;
  }

  /* MEETING */

  .meeting h3 {
    left: 4.8rem;
  }
}

@media (max-width: 912px) {
  p {
    font-size: 1.3rem;
  }

  .work h2,
  .projects h2,
  .price h2,
  .spoluprace h2 {
    font-size: 2.5rem;
  }

  /* UVOD */
  .uvod {
    height: 50vh;
  }

  .uvod h1 {
    font-size: 4rem;
    left: 2rem;
    top: 13rem;
  }

  .uvod h2 {
    font-size: 4rem;
    left: 2rem;
    top: 26rem;
  }

  /* SPOLUPRACE */
  .content-item .text p {
    font-size: 1.3rem;
  }

  .content-item .text h3 {
    font-size: 1.4rem;
  }

  /* PRICE */
  .price h3 {
    font-size: 2rem;
  }

  /* PROJECTS */
  .projects p {
    width: 100%;
  }

  /* WORK */
  .work-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 0.5rem;
    width: 100%;
  }

  .review-card {
  	width: 100%;
    max-width: 100%;
  }

  /* SPOLUPRACE */
  .name {
    font-size: 1.8rem;
  }

  /* MEETING */
  .meeting {
    background-position: 40%;
  }

  .meeting h2 {
    font-size: 2.5rem;
    top: -8rem;
  }

  .meeting h3 {
    font-size: 2rem;
    text-align: left;
    width: 70%;
    left: 4rem;
    top: -6rem;
  }

  .button-nd {
    left: 4rem;
  }

  /* FOOTER */
  .footer-content-grid {
    width: 90%; /* Sekce přes celou šířku obrazovky */
    grid-template-columns: repeat(2, 50%); /* Dva sloupce vedle sebe */
  }
}

@media (max-width: 883px) {
  /* HEADER */
  .button {
    font-size: 0.7rem;
  }

  /* WORK */
  .work p {
    width: 100%;
  }

  .work-wrapper {
    gap: 0rem;
  }

  /* FOOTER */
  .footer-content-grid {
    width: 90%; /* Sekce přes celou šířku obrazovky */
    grid-template-columns: repeat(2, 35%); /* Dva sloupce vedle sebe */
  }
}

@media (max-width: 853px) {
	.review-card ul{
		width:90%;
		}
  /* HEADER */
  .logo img {
    margin-left: 1.5rem;
    margin-top: 0.2rem;
  }

  header ul a {
    font-size: 17px;
  }

  /* UVOD */
  .uvod {
    height: 50vh;
  }

  .uvod h1 {
    font-size: 3.7rem;
    left: 1.5rem;
    top: 13rem;
  }

  .uvod h2 {
    font-size: 3.7rem;
    left: 1.5rem;
    top: 26rem;
  }

  /* PROJECTS */
  .projects h2 {
    padding-top: 20px;
  }

  .projects p {
    text-align: center;
  }

  /* WORK */
  .work p {
    text-align: center;
    padding-top: 1rem;
  }

  /* MEETING */
  .meeting {
    background-position: 40%;
  }

  .meeting h2 {
    font-size: 2.5rem;
    top: -8rem;
  }

  .meeting h3 {
    font-size: 2rem;
    text-align: left;
    width: 70%;
    left: 4rem;
    top: -6rem;
  }

  .button-nd {
    left: 4rem;
  }

  /* GALLERY */
  .gallery-button {
    font-size: 1.2rem;
  }

  /* SCROLL TO TOP BUTTON */
  #myBtn {
    right: 0.1rem;
  }

  /* SPOLUPRACE */
  .content-item .text p {
    font-size: 1rem;
  }

  /* FOOTER */
  .footer-content-grid {
    width: 90%; /* Sekce přes celou šířku obrazovky */
    grid-template-columns: repeat(2, 40%); /* Dva sloupce vedle sebe */
  }
}

@media (max-width: 839px) {
  /* GALLERY */
  .gallery-button {
    font-size: 1rem;
  }
}

@media (max-width: 820px) {
  /* GALLERY */
  .gallery-button {
    font-size: 1rem;
  }

  /* HEADER */
  header ul li a {
    font-size: 1.1rem;
  }

  /* WORK */
  .work p {
    width: 90%;
  }

  /* MEETING */
  .button-nd a {
    font-size: 1.5rem;
  }

  .meeting h3 {
    width: 80%;
  }
}

@media (max-width: 780px) {
  /* HEADER */
  .button {
    font-size: 0.7rem;
  }

  /* SPOLUPRACE */
  .content-item .text h3 {
    font-size: 1.1rem;
  }

  /* MEETING */
  .meeting h2 {
    font-size: 2.4rem;
    top: -8rem;
  }

  .meeting h3 {
    font-size: 1.8rem;
    text-align: left;
    width: 70%;
    left: 3.6rem;
    top: -6rem;
  }
}

@media (max-width: 768px) {
  p {
    font-size: 1.1rem;
  }

  /* HEADER */
  .button {
    font-size: 0.7rem;
  }

  header ul li a {
    font-size: 1rem;
  }

  /* GALLERY */
  .gallery-1 {
    grid-template-columns: repeat(2, 1fr); /* Dva sloupce na tabletech */
  }

  .gallery-button {
    font-size: 1.5rem;
  }

  /* SPOLUPRACE */
  .spoluprace .content-grid {
    grid-template-columns: repeat(1, 100%); /* Jeden sloupec o šířce 100% */
    gap: 30px; /* Zvýšení mezery mezi řádky */
  }

  .spoluprace h2 {
    width: 90%;
  }

  .content-item {
    flex-direction: column; /* Ikona a text pod sebou */
    align-items: center; /* Zarovnání na střed */
  }

  .content-item i {
    font-size: 40px; /* Menší velikost ikony */
  }

  .content-item .text h3 {
    font-size: 1.5rem;
  }

  .content-item .text p {
    font-size: 1.1rem;
  }

  .text h3 {
    text-align: center;
  }

  .name {
    font-size: 1.2rem;
  }

  /* WORK */
  .work h2 {
    width: 90%;
  }

  .work p {
    width: 95%;
  }

  .review-card {
    max-width: 100%;
  }

  .work-wrapper {
    width: 90%;
  }

  /* UVOD */
  .uvod h1 {
    font-size: 3.3rem;
  }

  .uvod h2 {
    font-size: 3.3rem;
  }
}

@media (max-width: 766px) {
  /* HEADER */
  .button {
    font-size: 0.7rem;
  }

  .button a {
    padding: 0.6rem 1rem;
  }
}

@media (max-width: 758px) {
  /* HEADER */
  .button {
    font-size: 0.6rem;
  }

  .button a {
    padding: 0.6rem 1rem;
  }

  /* FOOTER */
  .footer-content-grid {
    width: 90%; /* Sekce přes celou šířku obrazovky */
    grid-template-columns: repeat(2, 50%); /* Dva sloupce vedle sebe */
  }
}

@media (min-width: 756px) {
  .main-container {
    width: 95%;
  }

  /* PROJECTS */
  .projects p {
    width: 95%;
  }
}

@media (max-width: 735px) {
  /* HEADER */
  .button {
    font-size: 0.6rem;
  }

  .button a {
    padding: 0.6rem 1rem;
  }

  header ul li {
    margin-right: 0rem;
  }
}

@media (max-width: 678px) {
  /* HEADER */
  .button {
    font-size: 0.6rem;
  }

  .button a {
    padding: 0.6rem 1rem;
  }

  header ul li {
    margin-right: 0rem;
  }

  header ul a {
    font-size: 1rem;
  }

  /* UVOD */
  .uvod h1 {
    font-size: 3rem;
  }

  .uvod h2 {
    font-size: 3rem;
    top: 20rem;
  }

  /* MEETING */
  .meeting h3 {
    left: 3.1rem;
  }
}

@media (min-width: 651px) {
  /* HEADER */
  header nav {
    display: block !important;
  }
}

/* HEADER - READY FOR JS */
@media (max-width: 650px) {
  header {
    position: fixed;
  }

  header nav {
    display: none;
    position: absolute;
    top: 70px;
    background-color: #292929;
    width: 100%;
  }

  header nav li {
    display: block;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 20px;
  }

  .menu-icon {
    display: block;
    color: white;
    font-size: 20px;
  }

  header ul a:hover {
    color: #cae81d;
  }

  .button {
    font-size: 1.2rem;
    margin: 0 auto;
  }
}

@media (max-width: 620px) {
  /* UVOD */
  .uvod h1 {
    font-size: 2.7rem;
  }

  .uvod h2 {
    font-size: 2.7rem;
  }
}

@media (max-width: 607px) {
  p {
    font-size: 1rem;
  }

  /* FOOTER */
  .footer-content-grid {
    width: 90%; /* Sekce přes celou šířku obrazovky */
    grid-template-columns: repeat(2, 55%); /* Dva sloupce vedle sebe */
  }

  /* MEETING */
  .meeting h2 {
    font-size: 2.1rem;
  }

  .meeting h3 {
    font-size: 1.6rem;
    left: 2.8rem;
    top: -6rem;
  }
}

@media (max-width: 560px) {
  p {
    font-size: 1rem;
  }

  /* UVOD */
  .uvod h1 {
    font-size: 2.5rem;
  }

  .uvod h2 {
    font-size: 2.5rem;
  }

  /* GALLERY */
  .gallery-button {
    font-size: 1.3rem;
  }

  /* SPOLUPRACE */
  .content-item .text p {
    font-size: 1rem;
  }

  /* FOOTER */
  .footer-content-grid {
    width: 90%; /* Sekce přes celou šířku obrazovky */
    grid-template-columns: repeat(1, 50%); /* Dva sloupce vedle sebe */
  }
}

@media (max-width: 540px) {
  /* UVOD */
  .uvod {
    height: 60vh;
  }

  .uvod h1 {
    font-size: 2.4rem;
    top: 10rem;
  }

  .uvod h2 {
    font-size: 2.4rem;
    top: 19rem;
  }

  /* MEETING */
  .meeting {
    height: 45vh;
  }

  .meeting h2 {
    top: -10rem;
    font-size: 2rem;
  }

  .meeting h3 {
    font-size: 1.3rem;
    left: 2.5rem;
    top: -8.2rem;
  }

  .button-nd {
    bottom: 6rem;
    left: 2.5rem;
  }

  .button-nd a {
    font-size: 1rem;
  }

  /* FOOTER */
  .footer-content-grid {
    width: 90%; /* Sekce přes celou šířku obrazovky */
    grid-template-columns: repeat(1, 100%); /* Dva sloupce vedle sebe */
  }
}

@media (max-width: 520px) {
  /* UVOD */
  .uvod {
    height: 60vh;
  }

  .uvod h1 {
    font-size: 2.2rem;
  }

  .uvod h2 {
    font-size: 2.2rem;
  }
}

@media (max-width: 480px) {
  /* GALLERY */
  .gallery-1 {
    grid-template-columns: 1fr; /* Jeden sloupec na mobilech */
  }

  /* UVOD */
  .uvod {
    height: 60vh;
  }

  .uvod h1 {
    font-size: 2.2rem;
    left: 1.5rem;
    top: 9rem;
  }

  .uvod h2 {
    font-size: 2.2rem;
    left: 1.5rem;
    top: 20rem;
  }

  .button-item {
    padding: 20px;
  }

  /* MEETING */
  .meeting {
    height: 0%;
  }
}

@media (max-width: 430px) {
  .work h2,
  .projects h2,
  .price h2,
  .spoluprace h2 {
    font-size: 1.8rem;
  }

  /* PRICE */
  .price h3 {
    font-size: 1.5rem;
  }

  /* MEETING */
  .meeting h3 {
    left: 2rem;
  }

  .button-nd {
    margin: 0 auto;
    left: 0rem;
  }
}

@media (max-width: 412px) {
  .work h2,
  .projects h2,
  .price h2,
  .spoluprace h2 {
    font-size: 1.8rem;
  }

  /* MEETING */
  .meeting h3 {
    left: 2rem;
  }

  /* PRICE */
  .price h3 {
    font-size: 1.5rem;
  }

  /* FOOTER */
  .footer-content-grid {
    width: 90%;
    grid-template-columns: repeat(1, 100%);
  }
}

@media (max-width: 390px) {
  /* MEETING */
  .meeting {
    height: 60vh;
  }
}

@media (max-width: 375px) {
  /* UVOD */
  .uvod {
    height: 70vh;
  }

  .uvod h1 {
    font-size: 2rem;
  }

  .uvod h2 {
    font-size: 2rem;
  }

  /* HEADER */
  .button a {
    font-size: 1rem;
  }

  /* MEETING */
  .meeting {
    height: 60vh;
  }

  .meeting h3 {
    width: 80%;
    left: 1.6rem;
  }

  .button-nd {
    margin: 0 auto;
    left: 0rem;
  }

  .button-nd a {
    font-size: 1rem;
  }
}

@media (max-width: 360px) {
  .work h2,
  .projects h2,
  .price h2,
  .spoluprace h2 {
    font-size: 1.8rem;
  }

  /* UVOD */
  .uvod h1 {
    font-size: 2rem;
  }

  .uvod h2 {
    font-size: 2rem;
  }

  .button a {
    font-size: 0.9rem;
  }

  /* PRICE */
  .price h3 {
    font-size: 1.5rem;
  }

  /* SPOLUPRACE */
  .content-item .text h3 {
    font-size: 1.3rem;
  }

  /* MEETING */
  .meeting h3 {
    left: 1.6rem;
  }

  .button-nd {
    margin: 0 auto;
    left: 0rem;
  }
}

@media (max-width: 344px) {
  /* UVOD */
  .uvod h1 {
    font-size: 2.2rem;
    top: 10rem;
  }

  .uvod h2 {
    font-size: 2.2rem;
    left: 1.5rem;
    top: 23rem;
  }

  /* HEADER */
  .button {
    font-size: 1rem;
  }

  /* MEETING */
  .meeting h3 {
    left: 1.6rem;
  }

  .button-nd {
    margin: 0 auto;
    left: 0rem;
  }
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!QUERIES FOR PROJECTS / GALLERY !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
@media (max-width: 1024px) {
  .uvod-projects h1 {
    font-size: 4rem;
  }
}

@media (max-width: 820px) {
  .gallery-categories {
    flex-wrap: wrap; /* Tlačítka se zalomí na další řádek */
    gap: 5px; /* Menší mezery */
    padding: 8px;
  }

  .category-link {
    font-size: 1rem; /* Menší text */
  }

  .uvod-projects h1 {
    font-size: 4rem;
  }
}

@media (max-width: 768px) {
  .gallery-categories {
    flex-wrap: wrap; /* Tlačítka se zalomí na další řádek */
    gap: 8px; /* Menší mezery */
    padding: 8px;
  }

  .category-link {
    padding: 8px 15px; /* Zmenšení velikosti tlačítek */
    font-size: 14px; /* Menší text */
  }

  .uvod-projects h1 {
    font-size: 3.6rem;
  }
}

/* Styl pro velmi malé obrazovky (mobilní telefony) */
@media (max-width: 480px) {
  .gallery-categories {
    flex-direction: column; /* Odkazy budou vertikální */
    align-items: center; /* Zarovnání na střed */
  }

  .category-link {
    width: 100%; /* Odkazy budou přes celou šířku */
    text-align: center;
    padding: 0.8rem; /* Zvýšení paddingu pro lepší použitelnost */
    font-size: 1rem;
  }
}

@media (max-width: 375px) {
  .uvod-projects h1 {
    font-size: 3rem;
    margin-top: -5rem;
  }
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!QUERIES FOR CONTACT !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
@media (max-width: 1024px) {
  .uvod-contact h1 {
    font-size: 4rem;
  }
  .contact-info {
    gap: 15px; /* Menší mezera mezi textem a fotkou */
  }

  .contact-text p {
    font-size: 16px; /* O něco menší text */
  }
}

@media (max-width: 939px) {
  .contact-buttons .btn {
    font-size: 0.9rem;
  }
}

@media (max-width: 820px) {
  .uvod-contact h1 {
    font-size: 4rem;
  }
}

@media (max-width: 768px) {
  .uvod-contact h1 {
    font-size: 3.6rem;
  }

  .contact-info {
    flex-direction: column; /* Přeskládání fotky pod text a tlačítka */
    align-items: center; /* Zarovnání na střed */
    text-align: center; /* Zarovnání textu na střed */
  }

  .contact-photo {
    margin-top: 0rem;
    margin-bottom: 1.5rem;
  }

  .contact-buttons {
    justify-content: center; /* Tlačítka na střed */
  }

  .contact-buttons .btn {
    font-size: 15px; /* Menší tlačítka */
    padding: 7px 12px; /* Menší rozměry */
  }

  .contact-text {
    padding-bottom: 1.5rem;
  }
}

@media (max-width: 480px) {
  .contact-info {
    gap: 10px; /* Úzké mezery mezi prvky */
  }

  .contact-buttons {
    flex-direction: column; /* Tlačítka pod sebe */
    gap: 8px; /* Menší mezera mezi tlačítky */
  }

  .contact-buttons .btn {
    font-size: 12px; /* Ještě menší text na tlačítkách */
    padding: 6px 10px; /* Kompaktní tlačítka */
  }

  .contact-form {
    margin-top: 15px; /* Menší mezera před formulářem */
  }

  .form-group {
    margin-bottom: 10px; /* Menší mezery mezi políčky */
  }

  textarea {
    height: 80px; /* Zmenšení výšky textového pole */
  }

  button[type="submit"] {
    padding: 8px 15px; /* Menší tlačítko pro odeslání */
    font-size: 14px; /* Menší text na tlačítku */
  }
}

@media (max-width: 375px) {
  .uvod-contact h1 {
    font-size: 3rem;
    margin-top: -5rem;
  }
}