@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,300;0,400;0,500;1,600&family=Ibarra+Real+Nova&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Albert Sans', sans-serif;
    text-decoration: none;
    color: #191919;
    scroll-behavior: smooth;
}
html::selection{
    background-color: #fff1ba;
}
body{
    min-height: 100vh;
    
     background-size: contain; 
     background-image: /*url(back7.png),*//*linear-gradient( to top,	rgba(219,219,219,0.8),rgba(219,219,219,0.90))*/ url(tlo2.png);
     
     background-position: 0% 14%;
    min-width: 100vw;
    text-decoration: none;
    color: #191919;
    overflow-x: hidden;
}


.navbar{
    min-height: 57px;
    font-size: 22px;
}
.nav-link {
color: #191919;
justify-content: center;
}
.navbar img, a{
    justify-content: space-between;
}

.first{
    min-height: 100vh;
}
/*ZNACZNIKI-Z-KONTAKTEM*/
.social{
    position: fixed;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    top: -10%;
    transform: translate(-250px,0);
    z-index: 1;
}
.navbar-fb{
    display: flex;
    align-items: center;
    list-style: none;
    font-size: 32px;
}
.navbar-fb ion-icon:hover{
    color: #ffbf00;
    transition: .3s ease-in-out;
}
.social a{
    color: #fff;
    text-shadow: 2px 2px 1px #000;
    background: rgba(0,0,0,0.6);
    font-size: 22px;
    text-decoration: none;
    display: block;
    margin: 5px;
    padding: 20px;
    width: 300px;
    text-align: right;
    border-radius: 10px;
    transition: 0.5s;
}
.social a:hover{
    transform: translate(155px, 0);
    text-decoration: none;
    color: #fff;
}
.social ion-icon{
    margin-left: 10px;
    font: 32px;
    width: 30px;
    height: 30px;
}
.social a:nth-child(1) ion-icon{
    color: #ffbf00;
}
.social a:nth-child(2) ion-icon{
    color: #b2b3b2;
}
/*ZNACZNIKI-Z-KONTAKTEM*/
.bg-in{
    background: linear-gradient(to bottom, rgba(255,255,255,0.5),
    rgba(255,255,255,0.0));
}
.bg-ina{
    background: linear-gradient(to bottom, rgba(208,208,208,0.9),
    rgba(208,208,208,0.7));
    border-radius: 5px;
    
}
/*.bg-red{
    /*background: #888988;
    /*border-bottom: 2px solid #aa2c30;
}*/
.nav-item a:hover{
    color: #aa2c30;
    transition: .3s ease-in-out;
    transform: translate(0px, -10px);
}

.info{
    border-radius: 5px;
   margin-bottom: 5%;
   padding: 20px 12px;
   box-sizing: border-box; 
   transition: 0.5s;
   width: 100%;
}
.text2{
    width: 100%;
    bottom: 30mm;
}


.button-arrow{
    width: 100px;
    height: 100px;
    background: #ffbf00;
    border-radius: 100px;
    font-size: 28px;
    color: #d3d3d3;
border: none;
transition: .3s ease-in-out;
    
}

.map iframe{
    width: 800px;
    height: 600px;
   
}
.map{
    top: 450mm;
}

.first{
    min-height: 100vh;
}
.contact{
    
    width: 100%;
}
.container{
    width: 500%;
}
.text p{
    font-size: 24px;
}
.text h1{
    font-size: 64px;
}
.motto h3{
    font-size: 32px;
}
.inform p{
    font-size: 24px;
}
.arrow{
    transition: .3s ease-in-out;
    display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: flex-start;
align-content: flex-end;
}
.arrow{
    height: 300px;
}
.navlink a:hover{
    color: #ffbf00;
    transform: translate(0px, -15px);
}
.button-arrow:hover{
    animation: arrow .3s ease-in-out;
    transform: translate(0px, -15px);
}
.phone{
    transition: .3s ease-in-out;
}
.phone:hover{
    transform: translate(0px, -15px);
}
.mail{
    transition: .3s ease-in-out;
}
.mail:hover{
    transform: translate(0px, -15px);
}
.logo{
    transition: .3s ease-in-out;
}
.logo:hover{
    transform: translate(0px, -15px);
}
.container{
    min-width: 300px;
}
.film{
    left: auto;
    right: auto;
    display: flex;
    top: auto;
    bottom: auto;
    width: 1200px;
    border-radius: 10px;
}


@media(max-width:575px){
    .row2
    {
        display: flex;
        flex-direction: column;
        margin-right: auto;
        margin-left: auto;
        width: 90%;
    }
    .social{
        top: 15%;
        width: 95%;
    }
    .text{
        top: 0px;
    }
    .map iframe{
        width: 350px;
        height: 200px;
       
    }
    .text h1{
        font-size: 38px;
    }
    .motto h3{
        font-size: 20px;
    }
    .inform p{
        font-size: 18px;
    }
    .arrow{
        display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: flex-start;
align-content: flex-start;
    }
    .info{
        border-radius: 5px;
   margin-bottom: 5%;
   padding: 20px 12px;
   box-sizing: border-box; 
   transition: 0.5s;
   width: 40%;
    }
    .col-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
         max-width: 50%; 
    }
    .nav-links ul li a
    {
        list-style: none;
        display: flex;
        flex-direction: row;
        font-size: 12px;
        
    }
    
    .footer-links ul li a
    {
            text-align: center;
        }
        .film{
            width: 350px;
        }
        .social{
            display: none;
        }
}
@media(max-width:650px) and (min-width:501px){
    .text2 h2{
        font-size: 30px;
    }
    .footer-links
        {
            text-align: center;
        }
        .film{
            width: 350px;
        }
        .social{
            display: none;
        }
        
}
@media(max-width: 720px){
    .film{
        width: 600px;
    }
    .info{
        border-radius: 5px;
   margin-bottom: 5%;
   padding: 20px 12px;
   box-sizing: border-box; 
   transition: 0.5s;
   width: 90%;
    }
}
@media(max-width: 820px){
    .film{
        width: 600px;
    }
    .row2
    {
        display: flex;
        flex-direction: column;
        margin-right: auto;
        margin-left: auto;
        width: 90%;
    }
}
@media(max-width:900px){
    body{
        background:  linear-gradient( to top,	rgba(84,84,84,0.4),rgba(84,84,84,0.6)),url(tło2.png);
        background-position: center;
    }
    .row2
    {
        display: flex;
        flex-direction: column;
        margin-right: auto;
        margin-left: auto;
        width: 90%;
    }
    text{
        top: 0px;
    }
    .map iframe{
        width: 350px;
        height: 200px;
       
    }
    .text h1{
        font-size: 34px;
    }
    .text h3{
        font-size: 24px;
        overflow-wrap: break-word;
    }
    .text p{
        font-size: 17px;
    }
    .footer-links
        {
            text-align: center;
        }
        .film{
            width: 800px;
        }
        .social{
            display: none;
        }
}
@media(max-width: 912px){
    body{
        background:  linear-gradient( to top,	rgba(84,84,84,0.4),rgba(84,84,84,0.6));
    }
    .footer-links
        {
            text-align: center;
        }
        .film{
            width: 700px;
        }
}
@media(max-width: 1100px) and (max-height: 700px){
    .film{
        width: 600px;
    }
}
@media(max-width: 770px){
    .film{
        width: 600px;
    }
}
@media(max-width: 540px) and (max-height: 740px){
    .film{
        width: 500px;
    }
}
@media(max-width: 420px) and (max-height: 740px){
    .film{
        width: 200px;
    }
}
@media(max-width: 420px) and (max-height: 920px){
    .film{
        width: 350px;
    }
}
@media(max-width: 390px){
    .text h1{
        font-size: 32px;
    }
    .text h3{
        font-size: 16px;
        overflow-wrap: break-word;
    }
    .text p{
        font-size: 12px;
    }
    .map iframe{
        width: 250px;
        height: 140px;
       
    }
    .phone{
        left: 0%;
        right: 0%;
    }
    .footer-links
        {
            text-align: center;
        }
        .film{
            width: 500px;
        }
        .film{
            width: 350px;
        }
        .social{
            display: none;
        }
}
@media(max-width: 360px){
    .film{
        width: 300px;
    }
}

@media(max-width: 300px){
    .text2 h2{
        font-size: 28px;
    }
    .footer-links
        {
            text-align: center;
        }
        .film{
            width: 350px;
        }
        .social{
            display: none;
        }
}
@media(max-width: 330px){
    .text h1{
        font-size: 32px;
    }
    .text h3{
        font-size: 16px;
        overflow-wrap: break-word;
    }
    .text p{
        font-size: 10px;
    }
    .text2 h2{
        font-size: 30px;
    }
    .footer-links
        {
            text-align: center;
        }
        .film{
            width: 290px;
        }
        .social{
            display: none;
        }
}
@media(max-width: 300px){
    .text2 h2{
        font-size: 24px;
    }
    .text h1{
        font-size: 28px;
    }
    .text h3{
        font-size: 14px;
        overflow-wrap: break-word;
    }
    .text p{
        font-size: 9px;
    }
    .navbar img{
        width: 120px;
        height: 100px;
    }
    .footer-links ul li a
        {
            text-align: center;
        }
        .film{
            width: 350px;
        }
        .social{
            display: none;
        }
}
.bg-tlo{
    background-image:  linear-gradient( to top,	rgba(84,84,84,0.7),rgba(84,84,84,0.2)),url(back5.png);
     background-size: contain; 
     background-repeat: no-repeat;
}
.footer-links 
{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background: /*#949494;*/linear-gradient(to top,	rgba(44,44,44,0.7),rgba(169,169,169,0.11));
    min-height: 10vh;
    list-style: none;
    scroll-snap-align: start;
    flex: 1;
}

.footer-links
{
    flex: 1;
    text-align: right;
    scroll-snap-align: start;
    
}
.footer-links ul li 
{
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;
}
.footer-links ul li a
{
    color: #fff;
    text-shadow: 2px 2px 1px #000;
    text-decoration: none;
    font-size: 18px;
}
.footer-links ul li::after
{
    content: '';
    width: 0%;
    height: 2px;
    background: 	#fff;
    display: block;
    margin: auto;
    transition: 0.5s;
}
.footer-links ul li:hover::after
{
    width: 100%;
}
@media(max-width: 290px){
    .film{
        width: 220px;
    }
}