@charset "UTF-8";
/* responsive */ 
/* nemenit poradi @media prvku! */
@media (min-width: 1921px){ 
	header .logo{margin-left:10%}
	header .logo a img{margin-left:0;}
	header .button{margin-right:10%}
	header ul a{font-size:1.5rem;}
	.footer-content-item p{font-size:1.2rem}
	main{font-size:1.2rem}
	.category-link{font-size:1.4rem}
	.meeting h2,.meeting h3{padding-left:20%;}
	.meeting .button-nd{margin-left:20%;}
	.spoluprace{background-color:#ffffff;}
	main .spoluprace{max-width:1920px;margin:0 auto;}
	.content-item .text p{font-size:1.2rem}
	.gallery-1{grid-template-columns:repeat(6,1fr);}
}
@media (min-width: 2561px){
	header .logo{margin-left:20%}
	header .logo a img{margin-left:0;}
	header .button{margin-right:20%}
	header ul a{font-size:2rem;}
}
@media (min-width: 3000px){
	.gallery-1{grid-template-columns:repeat(8,1fr);}
}
@media (max-width: 1440px){
  /* HEADER */
  .logo img{margin-left: 2rem;margin-top: 0.2rem;}
  .button{font-size: 1rem;margin-right: 2rem;}
  /* MEETING */
  .meeting h2{left: 4rem;}
  .meeting h3{left: 4rem;width: 70%;}
  .button-nd{left: 4.2rem;}
  /* FOOTER */
  .footer-content-grid{grid-template-columns: repeat(2,50%);}
}
@media (max-width: 1200px){
	.gallery-1{grid-template-columns:repeat(3,1fr);}
}
@media (max-width: 1024px){
  /* HEADER */
  header ul li a{font-size: 1.1rem;}
  .logo a img{margin-left: 2rem;}
  /* UVOD */
	.uvod-projects h1{font-size: 4rem;}
  .uvod h1{left: 2rem;}
  .uvod h2{left: 2rem;}
  .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: 912px){
  p{font-size: 1.3rem;}
	.work h2,.projects h2,.price h2,.spoluprace h2{font-size: 2.5rem;}
  /* UVOD */
  .uvod h1{top: 8rem;}
  .uvod h2{top: 15rem;}
  /* SPOLUPRACE */
  .content-item .text p{font-size: 1.3rem;}
  .content-item .text h3{font-size: 1.4rem;}
  .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 */
  header ul li{margin-right: 2px;  margin-left: 2px;}  
  .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 h1{left: 1.5rem;top: 7rem;}
  .uvod h2{left: 1.5rem;top: 15rem;}
  /* 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;left: 4rem;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%;}
  .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;}
  .uvod-contact h1{font-size: 4rem;}
}

@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%;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;left: 1rem;}
  .uvod h2{font-size: 3.3rem;left: 1rem;}
  .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: 16px; /* Menší text */}
  .uvod-projects h1{font-size: 3.6rem;}
  .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: 766px){
  /* HEADER */
  .button{font-size: 0.7rem;}
  .button a{padding: 0.6rem 1rem;}
}

@media (max-width: 758px){
  /* HEADER */
  .button{margin-right:1rem;}
  .logo a img{margin-left: 1rem;}
  .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: 14rem;}
}
@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: 95px;
    background-color: #292929;
    width: 100%;
    border-bottom: 2px solid var(--secondary-color);
  }
	header nav ul{
		padding-top: 20px;
		padding-bottom: 10px;
	}
  header nav li{
    display: block;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 20px;
    margin-right: 0rem;
    margin-left: 0rem;
    padding-left: 0;
  }
  .menu-icon{
    display: block;
    color: white;
    font-size: 20px;
    min-width: 17px;
    text-align: center;
  }
  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;   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 h1{font-size: 2.4rem;top: 10rem;}
  .uvod h2{font-size: 2.4rem;top: 17rem;}
  /* MEETING */
  .meeting h2{top: -10rem;font-size: 2rem;left: 2.5rem;}
  .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 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 h1{font-size: 2.2rem;top: 8rem;}
  .uvod h2{font-size: 2.2rem;top: 17rem;}
  .button-item{padding: 20px;}
	.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: 1px;font-size: 1rem;}
  .uvod-projects h1{font-size: 3rem;margin-top: -6rem;}
  .uvod-projects{height: 350px;}   
	.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 */}
  .uvod-contact h1{font-size: 3rem;margin-top: -5rem;}
  .uvod-contact{height: 350px;}
}
@media (max-width: 430px){
	.work h2,.projects h2,.price h2,.spoluprace h2{font-size: 1.8rem;}
  .price h3{font-size: 1.5rem;}
  .button-nd{margin: 0 auto;left: 0rem;}
}
@media (max-width: 412px){
  .uvod h1{font-size: 2.0rem;}
  .uvod h2{font-size: 2.0rem;} 
	.work h2,.projects h2,.price h2,.spoluprace h2{font-size: 1.8rem;}
  .price h3{font-size: 1.5rem;}
  /* FOOTER */
  .footer-content-grid{width: 90%;grid-template-columns: repeat(1,100%);}
}
@media (max-width: 375px){
  /* HEADER */
  .button a{font-size: 1rem;}
  /* MEETING */
  .meeting h3{width: 80%;}
  .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;}
  .button a{font-size: 0.9rem;}
  .price h3{font-size: 1.5rem;}
  .content-item .text h3{font-size: 1.3rem;}
  .button-nd{margin: 0 auto;left: 0rem;}
}
@media (max-width: 344px){
  /* HEADER */
  .button{font-size: 1rem;}
  .button-nd{margin: 0 auto;left: 0rem;}
}