@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
html {
  scroll-behavior: smooth;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
}
.container{
display: flex;
justify-content: right;
width: 100%;

background-color: white;
flex-wrap: wrap;
}
.container-contact{
  justify-content: center;
}
.main{
min-height: 100vh;   
    background-size: cover;
    background-position: center left;
     transition: opacity 2s ease-in-out;
    }

    .main.visible {
      opacity: 1;
    }


    .logo{
      background-color: lightblue;
    }
 .main_bg1{
  background-image: url(img/9883040_4237128.webp);
 }
 .main_bg2{
  background-image: url(img/bg2.webp);
 }
.about{
    width: 41%;
    height: 25vh;
    padding:15px;
margin:4%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}

h1, h2, .btn {
  
  font-family: "Montserrat", sans-serif;;
  font-optical-sizing: auto;
  text-align: center; width: 100%;
}
h1{
  font-weight: 700;
  font-size: 2.7rem;
  font-style: normal;
  padding: 20px;
 
}
  h2{
  font-weight: 500;
  font-size: 1.8rem;
  font-style: normal;
padding: 15px}
.info{
 text-align:center; 
 padding: 20px; 
 background-color: rgb(174, 194, 212); 
 width: 70%;
 justify-self: center;
 margin-top: 10px;
 margin-bottom: 10px; 
}
.btn{
    background-color: red;
    color: white;
    padding: 20px 30px;
    border: 0;
    border-radius: 10px;
    margin:50px;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
   max-width: 45%;
   transition: 1s;
}
.btn:hover{
  background-color: rgb(134, 5, 5);
}
.left, .right{
  padding: 5%;
  width: 45%;
}
.contact-col{
  padding: 5%;
  width: 32%;
  display: flex;
  flex-wrap: wrap;
align-content:center;
}
.contact-col-center {
  text-align: center;
  width: 100%;
line-height: 27px;
}
.right-contact{
  padding: 5%;
  width: 54%;
}
p{margin-top: 20px;
}
.navigation{
  width: 100%;
  display: flex;
  background-color: #ffffff;
  justify-content: right;
}

    /* Pasek nawigacyjny */
   nav{display:flex;align-items:center;justify-content:flex-end;padding:10px 20px;background:#fff}

  /* --- ul (desktop) --- */
  nav .nav{list-style:none;display:flex;margin:0;padding:0;gap:12px}
  nav .nav li{display:flex}
  nav .nav li {
    min-width:286px;
    height:50px;
    background:#3b3b3b;
    color:#fff;
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .25s, transform .25s;
  }
  nav .nav li:hover{background:red}
  nav .nav li a{color:#fff;text-decoration:none;display:block;width:100%;height:100%;line-height:50px;font-size:1.05rem; text-align: center;}

  /* --- burger domyślnie schowany na desktop --- */
  .burger{display:none;border:0;background:transparent;cursor:pointer;padding:6px}
  .burger:focus{outline:2px solid #ddd}
  .burger div{width:25px;height:3px;background:#3b3b3b;margin:4px 0;transition:transform .3s,opacity .3s}

  .map{
      width:100%; height:500px;
    }


/* ===================================================menu========================================================== */


    .background-two{
      background-image: url(img/72809.jpg);
      background-size: cover;

    }
    .background-contact,
    .background-one{
      
    width: 100%;
  background-position: center;
height: 30vh;}



.background-one{
  background-image: url(img/3640.webp);
     background-size: cover;
     background-repeat: no-repeat;
}

.background-contact{
 background-image: url(img/fotowoltanika_wiatraki.webp);
     background-size: cover;
     background-repeat: no-repeat; 
     background-position: top center;
     height: 35vh;
}
.background-history{
 background-image: url(img/fotowoltanika_dol.webp);
     background-size: cover;
     background-repeat: no-repeat; 
     background-position: top center;
     height: 50vh;
}


     li{
      margin-bottom: 10px;
     }
     .link{
      text-decoration: none;
      font-weight: 600;
      color:white;
      background-color: red;
      padding:5px;
      margin:0px 7px;
      line-height: 30px;
     }
 
     .group{
margin-bottom:40px;

width: 100%;
     }
     .group-item{
      display: inline-block;
      margin: 5px;
     }
     .link-tbg{
      background-color: rgba(255, 255, 255, 0);
      color: black;
     }
     .bold{
      font-weight: 600;
  width: 100%;
     }
     .container-text{
      justify-content: left;
      padding:30px
     }
    .red{
      background-color: red;
      height: 2vh;
    }
    .exam li{
      margin-left: 30px;
    }
    /*----------------responsywne (<1366)  --- */
    
@media (max-width: 1367px) {
  .about{
    margin:3%;
  }
}
@media (max-width: 328px) {
 .link-group{
  padding: 5px 10px
 }
}

/* --- RESPONSYWNE (<=900px) --- */
@media (max-width: 900px) {
  nav ul.nav-m {
    display: none;              /* domyślnie ukryte */
    flex-direction: column;
    background: #ffffff;
    width: 100%;
    position: absolute;
    top: 60px;
    left: 0;
    padding: 10px 0;
  }

  nav ul.nav-m.active {
    display: flex;              /* pokaż dopiero po kliknięciu */
  }

  .burger {
    display: flex;              /* pokaż hamburgera */
    flex-direction: column;
    cursor: pointer;
  }

  .burger div {
    width: 25px;
    height: 3px;
    background: #3b3b3b;        /* widoczne na białym tle */
    margin: 4px;
    transition: 0.3s;
  }

  /* animacja X */
  .burger.open div:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  .burger.open div:nth-child(2) {
    opacity: 0;
  }
  .burger.open div:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }
  .about{
    width: 100%;
    margin:0;
    background-color: #ffffffa8;
    height: 130vh;
  }
  .btn{
    max-width: 60%;
    padding:10px
  }

  .main{
min-height: 130vh;   }

  h1{
    font-size: 2rem;
  }
  .right, .right-contact, .left{
    width: 96%;
  }
  
    .map{
      width:98%; height:30vh;
    }
    .contact-col{
      width: 100%;
    }
    .group{
display: flex;
flex-wrap: wrap;
justify-content: center;
    }
        .group-item{
width: 80%;
background-color: red;
padding:7px;
margin-top: 25px;


     }
     .info{
    margin-top: 20px;
    margin-bottom: 20px;
     }
}