/*Pierwsza część sekcji o nas*/

.first-article{
    background-image: url('../images/green-background-v1.webp');
    background-size: contain;
    padding-bottom: 160px;
    margin-top: 70px;
    position: relative;
    max-width: 1863px; 
    margin-inline: auto;
}

.first-article .image-container-top{
    position: absolute;
    z-index: 1;
    top: -50px;
    left: 100px;
}

.first-article .image-container-bottom{
    position: absolute;
    z-index: 1;
    bottom: 100px;
    right: 100px;
}

.first-article .text-container{
    background-color: #1A211C;
    color: #FFFFFF;
    font-size: 25px;
    line-height: 1.5;
    position: relative;
}

.first-article .text-container::before{
    display: block;
    position: absolute;
    content: "";
    width: 305px;
    height: 15px;
    background: linear-gradient(90deg, rgba(8, 27, 15, 0.00) 15%, #49805F 100%);
    top: 80px;
}

.first-article .text-container::after{
    display: block;
    position: absolute;
    right: 0;
    content: "";
    width: 305px;
    height: 15px;
    background: linear-gradient(270deg, rgba(8, 27, 15, 0.00) 15%, #49805F 100%);
    bottom: 80px;
}

.first-article .text-container-top{
    border-radius: 0 0 30px 0;
    margin-left: 250px;
    margin-right: 100px;
    padding-left: 250px;
    padding-right: 40px;
    padding-block: 120px;
}

.first-article .text-container-bottom{
    margin-top: 35px;
    border-radius: 30px 0 0 0;
    margin-left: 100px;
    margin-right: 250px;
    padding-left: 100px;
    padding-right: 250px;
    padding-block: 100px;
}

.first-article .text-container-bottom > h3{font-size: 32px;}

.first-article .text-container-bottom > ul{padding-left: 50px;}

.first-article .text-container-bottom::after{right: 250px; bottom: 50px;}

/*Druga część sekcji o nas*/
.second-article{
    background-image: url('../images/work-background.webp');
    padding-bottom: 130px;
    max-width: 1863px; 
    margin-inline: auto;
}

.second-article h2{
    padding-top: 75px;
    font-size: 36px;
    text-align: center;
    color: #FFFFFF;
    padding-inline: 10px;
}

.second-article .grid-container{
    display: grid;
    grid-template-columns: 150px 600px 90px 820px;
    padding-top: 40px;
    margin-inline: 20px;
    gap: 50px;
    color: #FFF;
}

.second-article .icon-left{
    background-color: #1A211C;
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.second-article .short-text{
    font-size: 22px;
    padding-inline: 20px;
    display: flex;
    align-items: center;
    color: #000;
}

.second-article .short-text-1, .second-article .long-text-1{background-color: #E5BE4F;}
.second-article .short-text-2, .second-article .long-text-2{background-color: #DB944B;}
.second-article .short-text-3{background-color: #78A55A;}

.second-article .icon-arrow{
    display: flex;
    align-items: center;
    justify-content: center;
}

.second-article .long-text{
    font-size: 18px;
    padding-inline: 20px;
    display: flex;
    align-items: center;
    color: #000;
}

/*Trzecia część sekcji o nas*/
.third-article{
    background-image: url('../images/green-background-v3.webp');
    padding-bottom: 175px;
    margin-top: 100px;
    max-width: 1863px; 
    margin-inline: auto;
}

.third-article .cards-1{
    display: grid;
    grid-template-columns: 450px 50px 400px 400px 400px;
    margin-inline: 50px;
}

.third-article .cards-2{
    margin-top: 115px;
    display: grid;
    grid-template-columns: 450px 50px 1200px;
    margin-inline: 50px;
}

/*Lewa strona*/

.third-article .business h3{font-size: 36px; margin-bottom: 0; margin-top: 150px;}
.third-article .business p{font-size: 24px; margin: 0; font-weight: 600;}

.third-article .business p::after{
    content: '';
    display: block;
    width: 370px;
    height: 4px;
    margin-top: 40px;
    background-color: #D9D9D9;
}

/*wyrównanie ikony www*/
.third-article .business > div{
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.third-article .business > a{
    display: flex;
    justify-content: center;
    margin-top: 15px;
    text-decoration: none;
    color: #000;
    font-size: 22px;
    font-weight: 600;
    transition-duration: 600ms;
}

.third-article .business > a:hover{
    color: #919191;
    transform: scale(0.9);
}

/*Prawa strona - kafelki*/

.third-article .article{
    padding-top: 45px;
    color: #FFF;
    font-size: 22px;
    line-height: 1.25;
}

.third-article .article > ul{padding-inline: 50px; padding-block: 45px;}

.third-article .article > ul > li{margin-bottom: 20px;}

.third-article .article-left{background-color: #43544A;}
.third-article .article-center{background-color: #54695E;}
.third-article .article-right{background-color: #627A6D;}

/*Prawa strona - kafelki nr 2*/

.third-article .cards-2 > .right-side > .article{
    display: flex;
    justify-content: center;
    padding: 0px;
}

.third-article .cards-2 > .right-side > .article p{
    margin: 0px;
    padding-inline: 50px;
    padding-block: 20px;
    width: 80%;
}

/*wyrównanie ikonek w kafelkach*/
.third-article .article > div {display: flex; justify-content: center;}

/*opis*/
.third-article .description{
    margin-inline: 50px;
    margin-top: 50px;
    font-size: 20px;
    font-weight: 600;
}


@media only screen and (max-width: 1850px) {
    
    /*second article*/
    .second-article .grid-container{
        grid-template-columns: 100px 500px 50px 750px;
        justify-content: center;
    }
    .second-article .short-text{
        margin-left: 40px;
        height: 150px;
    }

    /*third article*/

    .third-article .cards-1{grid-template-columns: 400px 50px 400px 400px 400px; justify-content: center;}
    .third-article .cards-2{grid-template-columns: 500px 50px 1100px; justify-content: center;}
    .third-article .business p::after{width: 75%;}
}

@media only screen and (max-width: 1710px) {
    /*third-article*/
    .third-article .cards-1{grid-template-columns: 350px 50px 350px 350px 350px;}
    .third-article .cards-2{grid-template-columns: 400px 50px 1000px;}

}


@media only screen and (max-width: 1575px) {
    
    /*second article*/
    .second-article .grid-container{
        grid-template-columns: 50px 400px 50px 600px;
    }
    .second-article .short-text{
        margin-left: 80px;
        height: 150px;
    }
    .second-article .long-text{height: 150px;}

    /*third-article*/
    .third-article .cards-1{grid-template-columns: 350px 50px 300px 300px 300px;}
    .third-article .cards-2{grid-template-columns: 350px 50px 900px;}
}

@media only screen and (max-width: 1325px) {
    /*third-article*/

    .third-article .cards-1{
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 0.7fr 20px 1fr;
    }
    .third-article .cards-1 > .business{
        grid-column-start: 1;
        grid-column-end: 4;
        width: 50%;
        margin-right: auto;
        margin-left: auto;
    }
    .third-article .cards-1 > div:nth-child(2){
        grid-column-start: 1;
        grid-column-end: 4;
    }
    .third-article .description{
        text-align: center;
    }

    .third-article .cards-2{
        grid-template-columns: 1fr;
        grid-template-rows: 0.7fr 20px;
        margin-top: 0;
    }
    .third-article .cards-2 > .business{
        grid-column-start: 1;
        grid-column-end: 4;
        width: 50%;
        margin-right: auto;
        margin-left: auto;
    }
    .third-article .cards-2 > div:nth-child(2){
        grid-column-start: 1;
        grid-column-end: 4;
    }
}

@media only screen and (max-width: 1250px) {
    /*first article*/
    .first-article .text-container{font-size: 22px;}
    .first-article .text-container h2{font-size: 28px;}
    .first-article .text-container::after{width: 35%;}
    .first-article .text-container::before{width: 35%;}

    /*second article*/
    .second-article .grid-container{grid-template-columns: 50px 350px 50px 450px;}
    .second-article .short-text{font-size: 18px;}
    .second-article .long-text{font-size: 15px;}
}

@media only screen and (max-width: 1100px){
    /*first article*/
    .first-article .text-container-bottom{padding-left: 30px;}
    
    /*second article*/
    .second-article{
        background-size: cover;
        background-position: center;
    }
    .second-article .grid-container{
        display: block;
    }

    .second-article .icon-left{width: 25%; height: auto; margin-left: auto; margin-right: auto; padding-inline: 10px; padding-block: 20px;}

    .second-article .short-text{width: 75%; margin-left: auto; margin-right: auto; margin-top: 20px; font-size: 22px;}

    .second-article .icon-arrow{display: none;}

    .second-article .long-text{width: 75%; margin-left: auto; margin-right: auto; margin-block: 20px; font-size: 18px;}
}

@media only screen and (max-width: 1000px){
    /*first article*/
    .first-article{padding-bottom: 50px}
    .first-article .image-container-top, .first-article .image-container-bottom{
        position: unset;
        padding-inline: 20px;
        display: flex;
        justify-content: center;
    }
    .first-article .text-container{
        margin: 0;
        margin-inline: 20px;
        margin-block: 20px;
        padding-inline: 30px;
    }
    .first-article .text-container-bottom::after{right: 0;}
}

@media only screen and (max-width: 940px){
    /*third article*/
    .third-article .article{font-size: 16px;}
    .third-article .cards-1 > .article > div > img{width: 25%;}
    .third-article .cards-2 > .right-side > .article > div > img{width: 75%;}
}

@media only screen and (max-width: 760px){
    /*third article*/
    .third-article .cards-1{
        grid-template-rows: 0.7fr 20px 0.5fr;
    }

    .third-article .article{
        grid-column-start: 1;
        grid-column-end: 4;
    }
    .third-article .article > div > img{width: 15%;}

    .third-article .cards-1 > .business, .third-article .cards-2 > .business{
        width: 100%;
    }

    .third-article .business h3{font-size: 24px;}
    .third-article .business p{font-size: 18px;}
    .third-article .business > a{font-size: 16px;}
    .third-article .description{font-size: 16px;}
    .third-article .cards-2 > .right-side > .article p{padding-inline: 10px;}
}

@media only screen and (max-width: 660px){
    /*second article*/
    .second-article .short-text{font-size: 18px;}
    .second-article .long-text{font-size: 14px;}
}

@media only screen and (max-width: 500px){
    /*second article*/
    .second-article .grid-container{padding-top: 10px;}
    .second-article h2{font-size: 30px;}
    .second-article .short-text{width: 95%; font-size: 16px;}
    .second-article .long-text{width: 95%; font-size: 13px;}
}


@media only screen and (max-width: 330px){
    /*first article*/
    .first-article .text-container{font-size: 16px;}
    .first-article .text-container h2{font-size: 24px;}
    .first-article .text-container-bottom > ul{padding-left: 10px;}
    
    /*second article*/
    .second-article h2{font-size: 20px;}
    .second-article .short-text{font-size: 13px;}
    .second-article .long-text{font-size: 11px;}

    /*third-article*/
    .third-article .cards-1, .third-article .cards-2{margin-inline: 10px;}
    .third-article .business h3{font-size: 20px;}
    .third-article .business p{font-size: 16px;}
    .third-article .business > a{font-size: 14px;}
    .third-article .article{font-size: 14px;}
    .third-article .article > ul{padding-inline: 30px;}
    .third-article .description{font-size: 14px; margin-inline: 10px;}

}