* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@media (min-width: 601px) and (max-width: 1024px) {



body {
    font-family: 'Roboto', Montserrat;
    background-color: white;
    color: #333;
}

.container{
	
	width:90%;
	margin:0 auto;
}

/*Pasek u góry z nr.tel oraz email*/
.up_bar{
	background-color:black;
	background-size:cover;
	color: white;
	text-align:right;
	padding:10px 0px;
	font-size:12px;
}

.content_up_bar{
	width:90%;
	margin: 0 auto;	
}


.link_up_bar{	
	text-decoration:none;
	color:white;
	margin:auto;
	padding:3px 3px;	
}

.text_up_bar{
	font-weight:bold;
	color:#38b6ff;
	margin:auto;
	padding:3px 3px;	
}

/*Nagłówek z logo i navi*/

#head{
	
background-color:white;
background-size:cover;
}
.head_content{
	width:90%;
	margin: 0 auto;
	}
.logo_head{
	float:left;
	max-width:120px;
	padding:15px 0px;
}

.nav_head{
	float:right;
	#background-color:gold;
	padding:50px 0px;
	

}

.menu {
  list-style: none;
  display: flex;
}

.menu > li {
  position: relative;
}

/* Odnośniki w menu */
.menu a {
  display: block;
  padding: 0px 15px;
  color: black; /* Kolor domyślny - czarny */
  text-decoration: none;
  font-size: 20px;
  transition: background-color 0.3s, color 0.3s;
}

/* Kolor odnośników po najechaniu */
.menu a:hover {
  background-color: white;
  color: black; /* Zmiana koloru tekstu na biały po najechaniu */
}

/* Styl dla klikniętych odnośników (visited) */
.menu a:visited {
  color: black; /* Kolor dla odwiedzonych linków */
}

/* Stylowanie rozwijanego menu (submenu) */
.submenu:hover .submenu-list {
  display: block;
}

.submenu-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #e8e8e8;
  color:blue;
  list-style: none;
  padding:0;
  z-index:1;
}

.submenu-list li a {
  padding: 15px 10px;
  color: black; /* Kolor domyślny dla odnośników w submenu */
  text-decoration: none;
  background-color:white;
  transition: background-color 0.3s, color 0.1s, border 0.1s;
}

/* Kolor odnośników w rozwijanym menu po najechaniu */
.submenu-list li a:hover {
  background-color: white;
  color: #38b6ff; /* Zmiana koloru tekstu na biały w submenu po najechaniu */
}




/*BANER*/


#baner{
	 background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("img/hero_kamera2.jpg");
	  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  #position: relative;
    color: white;
    padding: 200px 0;
    text-align: center;
	margin-top:130px;
	height:auto;
	  text-shadow: 4px 4px 6px #000000;
}


/*O nas*/


#about{ 
	background-color:white;
    background-size: cover;
	    padding: 50px 0;
line-height:20px;
	}

#about h2{text-align:left;
padding:5px 0px;
    color: black;
	border-bottom: 5px solid #38b6ff;
	font-size:2em;
}

#about p{padding:15px 0px;  line-height:36px; text-align:justify;}

/*USŁUGI*/

#services{
		background-color: #f0f0f0;    
		background-size: cover;
		padding:20px 0px;
}

#services_content{
		background-color: #f0f0f0;    
		background-size: cover;
		padding:20px 0px;
		line-height:36px;
}
#services_content p{ padding:0px 10px;}
#services_content ul{ padding:0px 30px;}
#services_content ol{ padding:0px 30px;}

#services_content h1{text-align:left;
padding:5px 0px;
    color: black;
	border-bottom: 5px solid #38b6ff;}

#services h2{
	text-align:left;
padding:5px 0px;
    color: black;
	border-bottom: 5px solid #38b6ff;
	font-size:2em;
	
}

.link_services{	
	text-decoration:none;
		
}


.services_grid{
	margin:0 auto;
	max-width:810px;
flex-wrap: wrap;
padding:30px 10px;
display: flex;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(0, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;}

.service1 {
	float:center;
border: 1px solid silver;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
	background-color:white;
	text-align:center;
	padding:10px 10px;
	grid-area: 1 / 1 / 2 / 2;
	color:black;
	}

.service2 {
	border: 1px solid silver;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
	background-color:white;
	text-align:center;
	padding:10px 10px;
	grid-area: 1 / 2 / 2 / 3;
		color:black;

	}

.service3 {
border: 1px solid silver;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
	background-color:white;
	text-align:center;
	padding:10px 10px;
	grid-area: 1 / 3 / 2 / 4;
		color:black;

	}

.service4 {
		border: 1px solid silver;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
	background-color:white;
	text-align:center;
	padding:10px 10px;
	grid-area: 2 / 1 / 3 / 2;
		color:black;

	}

.service5 {
		border: 1px solid silver;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
	background-color:white;
	text-align:center;
	padding:10px 10px;
	grid-area: 2 / 2 / 3 / 3;
		color:black;

	}
	
	
/*Kontakt główna*/

#contact{
background-color:#38b6ff;
background-size:cover;

}

.contact_content{
	#display: inline-block; /* Używamy flexboxa, aby divy były obok siebie */
  justify-content: center; /* Rozdziela divy na równą odległość */
}

.box_contact1{
  width: 100%; /* Określamy szerokość dla każdego divu */
  height: 50px; /* Ustawiamy wysokość */
  #background-color: lightblue; /* Kolor tła dla lepszej widoczności */
  text-align: center; /* Wyrównanie tekstu w divie */
  line-height: 50px; /* Centrowanie tekstu pionowo */
  #border: 1px solid #000; /* Opcjonalna ramka wokół divów */
}


.box_contact2{
  width: 100%; /* Określamy szerokość dla każdego divu */
  height: 70px; /* Ustawiamy wysokość */
  #background-color: lightblue; /* Kolor tła dla lepszej widoczności */
  text-align: center; /* Wyrównanie tekstu w divie */
  line-height: 70px; /* Centrowanie tekstu pionowo */
  #border: 1px solid #000; /* Opcjonalna ramka wokół divów */
}

        

.box_contact1 h2{color:white; font-size:20px; }
.box_contact2 a{color:black; text-decoration:none; background-color:white; border-radius:10px; padding:15px 20px;}
	
/*STOPKA*/

#footer{
background-color:white;
background-size:cover;
padding:50px 0px;
}

.footer_content{
	display: flex; /* Używamy flexboxa, aby divy były obok siebie */
  justify-content: space-between; /* Rozdziela divy na równą odległość */
}

.box_footer1{
  width: 35%; /* Określamy szerokość dla każdego divu */
  #height: 100px; /* Ustawiamy wysokość */
  #background-color: lightblue; /* Kolor tła dla lepszej widoczności */
  #text-align: center; /* Wyrównanie tekstu w divie */
  line-height: 50px; /* Centrowanie tekstu pionowo */
  #border: 1px solid #000; /* Opcjonalna ramka wokół divów */
}


.box_footer2{
  width: 60%; /* Określamy szerokość dla każdego divu */
  #height: 100px; /* Ustawiamy wysokość */
  #background-color: lightblue; /* Kolor tła dla lepszej widoczności */
  #text-align: center; /* Wyrównanie tekstu w divie */
  line-height: 40px; /* Centrowanie tekstu pionowo */
  #border: 1px solid #000; /* Opcjonalna ramka wokół divów */
}

.mapa{width:100%;height:300px;}

	
#info_policy{
		background-color:black;    
		background-size: cover;
		padding:10px 0px;
}	

.link_info_policy{	
	text-decoration:none;
	color:white;
}

.copyright_text{color:white;padding:0px 50px;}

form {
    background-color: #fff;
    padding: 30px;
    border-radius: 0px;
    #box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

form label {
    display: block;
    margin-top: 10px;
}

form input, form textarea {
    width: 100%;
    padding: 15px;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

form button {
    background-color: black;
    color: #fff;
    padding: 10px 20px;
    border: none;
    margin-top: 20px;
}