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

html {
    font-size: 10px;
    font-family: 'Inter', sans-serif;
    color: #161616    
    
}

/* header,
section,
footer{
    text-align: center;
} */

:root {
    --kolor-przewodni: #B5B518;
}

h1{
font-size: 3rem;
}
h2{
    font-size: 3rem;
    padding-bottom: 25px;
}

h3{
    font-size: 2rem;
    padding-bottom: 8px;
}

h4{
    font-size: 1.6rem;
    font-weight: normal;
}

h5 {
font-size: 3rem;
text-align: center;
margin: 150px;
}

a:hover{
    color: var(--kolor-przewodni);

}

a {
    color: #161616;
    transition: 0,3s;
    text-decoration: none;
 }

.normal {
    color: #F5F7FA;
}

.highlight {
    color: #B5B518;
}

/* header */
/* start */
header {
    text-align: center;
    margin: 20px 0px;
}

header nav {
    display:flex;
    flex-wrap: wrap;
    justify-content:space-between;
    align-items: center;
}

header img {
    width: 240px;
    margin-left: 5%;
    
}

header nav ul {
     display: flex;
     padding-top: 12px;
     
}

header nav ul li {
    display: flex;
    list-style: none;
    padding: 0 10px;
    
}

header nav ul li a {
font-size: 1.7rem;
text-decoration: none;
display: flex;
flex-wrap: wrap;
}

header nav ul li a:hover,
header nav ul li a:focus { 
    font-weight: 500;
    color: var(--kolor-przewodni);
    }


    @media (max width: 1024px)
section { 

}

@media (max width: 768px)
section {
 
}

@media (max width: 375px)
header {
          flex-direction: column;
          align-items: center;
        }
      }
}

header nav {
    display::content;
    justify-content:space-between;
    align-items: center;
}
/* koniec */

/* sekcja tytułowa */
/* start */
section.title {
    min-height: 650 px;
    width:100%;
    background-image: url(../img/architektura\ pszczyna.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    display: flex;
    margin: 35 0;
    color: #f5f5f5;
    text-align: left;
    
}

section.title div.black0pacity {
    background-color: #00000071 ;
    min-height: 650px;
    min-width: 100%; 
}
section.title div.container {
    position: relative;
    top: 35%;
    left: 54%;
    transform: translate(-50%, -50%)
    
}
section.title div.container h1 {
font-size: 5rem;
}

section.title div.container p {
    font-size: 1.8rem;
    padding: 20px 0 40px 0;
}

section.title div.container a{
    font-size: 2rem;
    text-decoration: none;
    color: #F5F7FA;
    border: 1px solid #F5F7FA;
    border-radius: 6px;
    padding: 10px 30px;
    background-color: #939313;
}

section.title div.container a:hover,
section.title div.container a:focus {
    background-color: #161616;
    transition: 0.3s;
}
/* koniec */


/* słowem wstępu  */
/* start */

section.firstsection {
 padding: 30px 5%;
 text-align: right;
 width: 100% ;
 
}

section.firstsection h2{
    font-size: 3rem;
    
}
section.firstsection p{
    font-size: 1.7rem;
    line-height: 0px;
    padding-bottom: 5px;
}

section.icon img {
width: 60px;
}

section.icon {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    text-align: center;
    align-content: center;
    padding:30px;
    padding-bottom: 80px;
    }

    section.icon div {
        padding-left: 20px;
        padding-right: 20px;
    }

    section.icon div p {
        font-size: 1.2rem;
    }

    section.icon div p:hover {
        color: #161616;
    }

/* koniec */

/* nasze projekty */
/* start */
section.projektyprzeglad {
    text-align: center;
}

section.projektyprzeglad div.projekty {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    text-align: center;
    align-content: center;
}

section.projektyprzeglad div.projekty div img {
    max-width: 90%;
    padding-bottom: 10px;
}

section.projektyprzeglad div.projekty div p{
    font-size: 1.7rem;
    margin-bottom: 20px;
}

section.projektyprzeglad a {
    font-size: 1.7rem;
    color: #F5F7FA;
    border: 1px solid #F5F7FA;
    border-radius: 6px;
    padding: 10px 30px;
    background-color: #939313;
    margin-top: 40px;
    margin-bottom: 20px;
}

sectionprojektyprzeglad a:hover,
sectionprojektyprzeglad a:focus {
    background-color: #161616;
    transition: 0.3s;
}
      

/* koniec */

/* zaufali nam */
/* start */
section.zaufali{
    padding:80px;
    text-align: center;
    margin-bottom: -40px;
}

section.zaufali h2{
    text-align:center;
}

section.zaufali img{
padding:10px;
}

/* koniec */

/* stopka */
/* start */

section.stopka{
    padding:60px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    text-align: left;
    background-color: #4D4D4D;
    color: #F5F7FA;
    min-height: 300px;
}

/* media */
@media(max-width: 375px) {



    section.stopka{
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}}

section.stopka {
padding-left: 40px;
padding-right: 40px;
max-width: 100;
}
section.stopka img:hover{
accent-color: #00000027;
    }
section.stopka img{
    max-width: 10px;
}
    
section.stopka div img{
    padding-left: 0px;
    padding-right: 40px;
    padding-bottom: 10px;
    padding-top: 10px;
    max-width: 200px;
    }

section.stopka div a{
        color: #F5F7FA;
        font-size: 1.5rem;
        line-height: 35px;
        }
section.stopka div a:hover{
            color: var(--kolor-przewodni)
            }
        
section.stopka div p{
            color: #F5F7FA;
            font-size: 1.5rem;
    padding-bottom: 5px;
    
            }

/* koniec */

@media (max width: 1024px)

section { 

}

@media (max width: 768px)
{x}
section {
    width: 100%;
    max-width: 100vw;
}
section.icon {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

section.projektyprzeglad div.projekty  {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

section.stopka img{
padding-left: 0px;
padding-right: 40px;
padding-bottom: 30px;
max-width: 300px;
}

div.logo{
    max-height: 80px;
    max-width: 20px;
    padding:40px;
    background-color:#F5F7FA}


    div.logo img {
max-width: 250px;
background-color:  #464646;
background-size: 400px;
padding: 4px;
}


header nav {
    max-width: 100;
}


}

@media (max width: 375px) {}
section.projektyprzeglad {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    
}}

/* galeria */
.onas{
    
}
    .galeria {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      justify-content: center;
    }
    .galeria img {
      width: 180px;
      height: 120px;
      object-fit: cover;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
      transition: transform 0.2s;
      cursor: pointer;
    }
    .galeria img:hover {
      transform: scale(1.05);
    }


/* onas */

.opiszdjecie{
margin-left: 35px;
  width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding:10%;
    padding-bottom: 80px;
    flex-wrap: wrap;
    justify-content:space-between;
    align-items: center;
}

.banner {
  color: #fff;
  text-align: center;
  font-size: 2rem;
}
.banner a img {
  width: 50%;
}

.opiszdjecie h3{
    margin-top: 30px;
}

.opiszdjecie h4{
    margin-top: 10px;
margin-bottom: 20px;
}



/* inne */
.wbudowie{
    text-align: center;
    margin-top: 300px;
    margin-bottom: 300px;
}
.button{
    margin-top: 60px;
}
.button a:hover,
.button a:focus {
    background-color: #161616;
    transition: 0.3s;
}
.button a{
    font-size: 1.7rem;
    text-decoration: none;
    color: #F5F7FA;
    border: 1px solid #F5F7FA;
    border-radius: 6px;
    padding: 10px 30px;
    background-color: #939313;
    text-align: center;
    
}