/* //////////////////////////////////  CZCIONKI  ////////////////////////////////// */

@font-face
{
  font-family: 'Garet';
  font-style: normal;
  font-weight: normal;
  src: local('fonts/Garet'), url('fonts/Garet.woff') format('woff');
} 

@font-face
{
  font-family: 'Garet Bold';
  font-style: normal;
  font-weight: bold;
  src: local('fonts/Garet-Bold'), url('fonts/Garet-Bold.woff') format('woff');
} 

@font-face
{
  font-family: 'Inter';
  font-style: normal;
  font-weight: normal;
  src: local('fonts/Inter'), url('fonts/Inter.woff') format('woff');
} 

@font-face
{
  font-family: 'Inter Bold';
  font-style: normal;
  font-weight: bold;
  src: local('fonts/Inter-Bold'), url('fonts/Inter-Bold.woff') format('woff');
} 


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

/* //////////////////////////////////  WERSJA NA KOMPTUTER  ////////////////////////////////// */

body 
{
    background-color: #f5f5f5;
}

/* //////////////////////////////////  NAGŁÓWEK  ////////////////////////////////// */

header
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #F2F2F2;
}

.header_section
{
    text-align: left;
    width: 50vw;
    display: inline-block;
}

.header_text
{
    padding: 2vw;
}

.header_logo
{
    width: 20vw;
    margin-bottom: 10vh;
}

.header_text h1 
{
    font-size: 3.4vw;
    color: #000000;
    font-family: 'Garet';
    margin-bottom: 5vh;
}

.header_text p 
{
    font-size: 2vw;
    color: #000000;
    font-family: 'Inter';
    margin-bottom: 5vh;
}

.cta-button 
{
    display: inline-block;
    font-family: 'Garet Bold';
    font-size: 1.4vw;
    margin-top: 1vw;
    padding: 1vh 2vw;
    color: #000000;
    text-decoration: none;
    outline: solid;
}

.header_photo
{
    width: 50vw;
    height: 100vh;
    display: inline-block;
    background-color: rgba(256, 256, 256, 1);
    background-image: url("images/photo1.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: inherit;
    background-size: cover;
}

/* //////////////////////////////////  SEKCJE ////////////////////////////////// */

/* //////////////////////////////////  O MNIE  ////////////////////////////////// */


#about
{
    height: 100vh;
    text-align: center;
    background-color: #fff;
}

.logo
{
    width: 12vw;
    height: auto;
    margin: 10vh 0;
}

#about h2
{
    font-size: 4.2vw;
    margin-bottom: 5vh;
    font-family: 'Garet';
}

#about p
{
    font-size: 1.9vw;
    font-family: "Inter";
    margin: 0 20vw;
}

/* //////////////////////////////////  OFERTA  ////////////////////////////////// */

#services 
{
    background-color: #6C2A2A;
    color: #fff;
    height: 200vh;
    text-align: center;
}

#services h2
{
    font-size: 4vw;
    padding-top: 5vh;
    margin-bottom: 10vh;
    font-family: 'Garet';
}

.service_grid 
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 2vh 5vw 0;
    margin: auto;
}

.service_item 
{
    width: 30vw;
    height: 90vh;
}

.service_icon
{
    position: absolute;
    top: -5vw;
    left: 50%;
    transform: translateX(-50%);
    height: 10vw;
    width: 10vw;
    background-color: #000000; 
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon
{
    margin: auto;
    height: 5vw;
    width: 5vw;
}

#magazyn
{
    height: 4vw;
}

.service_text
{
    background-color: #fff;
    padding: 5vh 3vw;
    color: #333;
    height: 77vh;
    width: 27vw;
    position: relative;
}

.service_text h3 
{
    margin-top: 3.5vw;
    font-size: 2.2vw;
    margin-bottom: 2vh;
    font-family: 'Garet Bold';
    text-align: center;
}
.service_text li 
{
    font-size: 2.4vh;
    font-family: 'Inter';
    text-align: left;
    margin: 0 0 1vh 1.5vw;
}

/* //////////////////////////////////  KONTAKT  ////////////////////////////////// */

#contact 
{
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    height: 95vh;
}

.contact_photo
  {
    margin: 7.5vh 5vw 7.5vh;
    width: 40vw;
    height: 80vh;
    display: inline-block;
    background-color: rgba(256, 256, 256, 1);
    background-image: url("images/photo2.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: inherit;
    background-size: cover;
  }

.contact_info
  {
    margin: auto;
    padding: 0;
    width: 50vw;
    display: inline-block;
    text-align: left;
  }

.contact_info h2
  {
    font-size: 4.5vw;
    font-family: 'Garet';
  }

.contact_info h3
{
    font-family: 'Garet Bold';
    font-size: 2.5vw;
    margin: 15vh 0 5vh;
}

.contact_info p 
{
    margin: 2vh 0;
    font-size: 2vw;
    font-family: 'Inter';
    text-align: left;
}
.contact_info a
{
    text-decoration: none;
    color: #000000;
    font-family: 'Inter Bold';
}

footer
  {
    font-size: 1.2vw;
    text-align: center;
    font-family: 'Inter';
    height: 5vh;
  }

/* //////////////////////////////////  WERSJA NA TELEFON  ////////////////////////////////// */
@media only screen and (max-width: 768px) 
{
    /* ///////////////////////////////  NAGŁÓWEK  /////////////////////////////// */
    header 
    {
        flex-direction: column;
        text-align: center;
    }
    .header_section
    {
        width: 100%;
        padding: 3vh 2vw;
    }
    .header_logo
    {
        width: 20vh;
    }
    .header_text h1 
    {
        font-size: 3.4vh;
    }
    .header_text p 
    {
        font-size: 2vh;
    }
    .cta-button
    {
        font-size: 1.3vh;
    }
    .header_photo
    {
        width: 100%;
        height: 50vh;
    }

    /* ///////////////////////////////  O MNIE  /////////////////////////////// */
    .logo
    {
        height: 12vh;
        height: auto;
    }
    #about h2
    {
        font-size: 5vh;
    }

    #about p
    {
        font-size: 3vh;
    }

    /* ///////////////////////////////  OFERTA  /////////////////////////////// */
    .service_grid 
    {
        grid-template-columns: 1fr;
    }
    #services 
    {
        height: 555vh;
    }
    #services h2
    {
        font-size: 5vh;
    }
    .service_item 
    {
        width: 90vw;
        height: 90vh;
    }
    .service_text
    {
        padding: 10vh 10vw;
        height: 77vh;
        width: 87vw;
    }
    .service_text h3
    {
        font-size: 4vh;
    }
    .service_text li
    {
        font-size: 2vh;
    }
    .service_icon
    {
        top: -10vh;
        height: 20vh;
        width: 20vh;
    }
    .icon
    {
        height: 10vh;
        width: 10vh;
    }
    #magazyn
    {
        height: 8vh;
    }   
    /* ///////////////////////////////  KONTAKT  /////////////////////////////// */

    #contact
    {
        flex-direction: column;
        text-align: center;
    }

    .contact_photo
    {
        width: 85vw;
        height: 50vh;
    }
    .contact_info
    {
        width: 90vw;
        height: 50vh;
        padding: 0 10vw 10vh;
    }
  
    .contact_info h2
    {
        font-size: 5vh;
    }
  
    .contact_info h3
    {

        margin: 15vh 0 5vh;
    }
    
    .contact_info p 
    {
        margin: 2vh 0;
        font-size: 3vh;
    }
    /* ///////////////////////////////  STOPKA  /////////////////////////////// */
    footer
    {
        margin-top: 5vh;
        font-size: 2vh;
    }
}