@charset "UTF-8";
/* CSS Document */

@media (max-width: 575px) {
	.footer-box {
		width: 100%;
		font-size: .7rem;
		& a {
			font-size: .7rem;
		}
	}
	.section1 {
		width: 100vw;
		height: 100vh;
		background-image: url("IMG/BG1_phone.png");
		background-position: top;
		background-repeat: no-repeat;
		background-size: cover;
		aspect-ratio: 10/16;
	}
	.div_section1 {
		justify-content: flex-end;
    	align-items: center;
	}
	.content-animation {
		text-align: center;
		margin-bottom: 30px;
		align-items: center;
	}
	.content-animation h1 {
		font-size: 1.4rem;
		margin-bottom: 0;
	}
	.buttons {
		margin-top: 40px;
	}
	.navbar {
		justify-content: center;
	}
	.logo img{
		height: 50px;
	}
	.menu {
		display: none;
	}
	.section2 {
		display: none;
	}
	.section2-mobile {
		display: flex;
	}
	.divs2-mobile {
		margin: 30px 0;
	}
	.card-mobile h1 {
		font-size: 1.2rem;
	}
	.card-mobile p {
		width: 100%;
	}
	.card-mobile.open .card_mobile_1_img, .card-mobile.open .card_mobile_2_img, .card-mobile.open .card_mobile_3_img {
		display: none;
	}
	.divs3 {
		width: 100%;
		margin: 30px 0;
	}
	.divs3 h1 {
		margin-left: 5%;
	}
	.sectionnadpis {
		width: 100%;
		padding: 30px 5% 0 5%;
		background-color: var(--blue);
	}
	.sectionnadpis h1 {
		font-size: 2rem;
		color: white;
	}
	.sectionnadpis p {
		font-size: 1rem;
		color: white;
		margin-bottom: 0;
	}
	
	.bodi {
		padding: 0 5%;
		display: flex;
		flex-direction: row;
		overflow-x: scroll;
		overflow-y: hidden;
		flex-wrap: nowrap;
  		scroll-snap-type: x mandatory;
  		-webkit-overflow-scrolling: touch;
		width: 100vw;
	}
	.bodi::-webkit-scrollbar {
  		display: none;
		}
	.bod1 {
		min-width: 100%;
		padding: 20px;
		&:nth-child(2) {
			display: none;
		}
	}
	.bod1 h1 {
		font-size: 1.2rem;
		margin-left: 0;
	}
	.bod1 p {
		font-size: 0.9rem;
		text-align: left;
	}
	.divs5 {
		margin: 30px 0;
		width: 90%;
		grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
	}
	.red {
		font-size: 1.5rem;
	}
	.section4 {
		display: none;
	}
	#image-container {
  		height: 30%;
		border-radius: 20px;
	}
	#description-text {
  		max-width: 70%;
		left: 50px;
	}
	.headings h1 {
  		font-size: 1.5rem;
	}
	.map {
		width: 90%;
	}
	.section5 h1 {
		margin: 50px 0 20px;
	}
	.kontakty {
		line-height: 1.8;
	}
	.kontakty p {
		font-size: 0.8rem;
	}
	
	.section4_mobile {
		display: flex;
		width: 100vw;
		background-color: var(--blue);
		padding: 10% 5%;
		overflow-x: scroll;
		gap: 20px;
		flex-wrap: nowrap;
  		scroll-snap-type: x mandatory;
  		-webkit-overflow-scrolling: touch;
	}
	.section4_mobile::-webkit-scrollbar {
  		display: none;
		}
	.mobile_box {
		background-color: white;
		border-radius: 20px;
		padding: 30px;
		min-width: 100%;
	}
	.mobile_box h1 {
		color: var(--red);
		font-size: 1.5rem;
		margin-bottom: 20px;
	}
	.mobile_box ul {
		list-style: none;   /* odstraní původní puntíky */
		padding-left: 0;
		margin: 0;
		}

	.mobile_box li {
		position: relative;
		padding-left: 15px; /* mezera pro symbol */
	}

	.mobile_box li::before {
		content: "|";       /* místo puntíku se zobrazí svislá čára */
		position: absolute;
		left: 0;
		color: black;       /* barva symbolu */
		font-weight: bold;
	}

	.dots {
		display: flex;
		justify-content: center;
		background-color: var(--blue);
	  	text-align: center;
		margin-top: -1px;
		padding: 5px 0 50px 0;
		
	}
	.dots2 {
		display: flex;
		justify-content: center;
	  	text-align: center;
		margin-top: -1px;
		padding: 5px 0 50px 0;
		
	}

/* Jednotlivé tečky */
	.dot, .dot2 {
	  display: inline-block;
	  width: 12px;
	  height: 12px;
	  margin: 0 6px;
	  border-radius: 50%;
	  background-color: #7F7F7F;
	  cursor: pointer;
	  transition: background-color 0.3s;
	}

/* Aktivní tečka */
	.dot.active, .dot2.active {
	  background-color: white;
	}
	
}

@media only screen and (max-width: 940px) and (orientation: landscape) {
	.section2 {
		display: none;
	}
	.section2-mobile {
		display: flex;
	}
	.red {
		font-size: 1.5rem;
	}
	.kontakty {
		line-height: 1.6;
	}
	.divs3 {
		width: 100%;
		margin: 30px 0;
	}
	.divs3 h1 {
		margin-left: 5%;
		font-size: 2rem;
	}
	.sectionnadpis {
		width: 100%;
		padding: 30px 5%;
	}
	.sectionnadpis h1 {
		font-size: 2rem;
	}
	.bodi {
		padding: 0 5%;
		display: flex;
		flex-direction: row;
		overflow-x: scroll;
		flex-wrap: nowrap;
  		scroll-snap-type: x mandatory;
  		-webkit-overflow-scrolling: touch;
		width: 100vw;
	}
	.bod1 {
		min-width: 100%;
		padding: 20px;
	}
	.bod1 h1 {
		font-size: 1.2rem;
		margin-left: 0;
	}
	.bod1 p {
		font-size: 0.9rem;
		text-align: left;
	}
	.section4_mobile {
		display: flex;
		width: 100vw;
		background-color: var(--blue);
		padding: 10% 5%;
		overflow-x: scroll;
		gap: 20px;
		flex-wrap: nowrap;
  		scroll-snap-type: x mandatory;
  		-webkit-overflow-scrolling: touch;
	}
	.section4_mobile::-webkit-scrollbar {
  		display: none;
		}
	.mobile_box {
		background-color: white;
		border-radius: 20px;
		padding: 30px;
		min-width: 100%;
	}
	.mobile_box h1 {
		color: var(--red);
		font-size: 1.5rem;
		margin-bottom: 20px;
	}
	.mobile_box p {
		text-align: justify;
	}
	.dots {
		display: flex;
		justify-content: center;
		background-color: var(--blue);
	  	text-align: center;
		margin-top: -1px;
		padding: 10px 0;
	}

/* Jednotlivé tečky */
	.dot {
	  display: inline-block;
	  width: 12px;
	  height: 12px;
	  margin: 0 6px;
	  border-radius: 50%;
	  background-color: #7F7F7F;
	  cursor: pointer;
	  transition: background-color 0.3s;
	}

/* Aktivní tečka */
	.dot.active {
	  background-color: white;
	}
	.section4 {
		display: none;
	}
	.menu {
		display: none;
	}
	.divs3 {
		width: 90%;
	}
	.divs5 {
		width: 90%;
	}
	.content-animation h1 {
		font-size: 1.4rem;
		margin-bottom: 0;
	}
	.buttons {
		margin-top: 10px;
	}
}