@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;500;600&display=swap');

* {
    box-sizing: border-box;
    font-family: "Karla", 'Segoe UI', Tahoma, Verdana, sans-serif;
}

body {
    font-size: 1rem;
    color: #121212;
    margin: 0;
}

nav {
    height: 100px;
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: space-between;
    background-color: #fff;
    position: sticky;
    top: 0;
    border-bottom: 2px solid #30acec;
    padding: .5rem 2rem;
}

header, main {
    min-height: calc(100vh - 150px - 100px);
    background-size: cover;
    background-position: right center;
}

header {
    background-size: cover;
    display: grid;
    grid-template-columns: 680px;
    padding-left: 2rem;
    align-items: center;
}

.header_logo {
    width: 100%;
    padding: 1.5rem;
}

main {
    display: grid;
}

/* 
.contact_main {
    background-image: url("img/3.JPG");
}

.about_main {
    background-image: url("img/maszyna2-1.png");
}

.offer_main {
    background-image: url("img/maszyna4.png");
} */

.logo {
    display: grid;
    align-items: center;
}

.logo img {
    height: 60px;
}

.nav_content {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(5, max-content);
    grid-gap: 2.75rem;
    font-size: 1.25rem;
    text-transform: uppercase;
}

.nav_content a {
    color: #595959;
    text-decoration: none;
    letter-spacing: 2px;
}

.header_content {
    font-weight: 300;
    text-align: center;
    font-size: 2rem;
    display: grid;
    align-content: center;
    background-color: #303030;
    min-height: 150px;
}

.header_content h1 {
    margin: 0;
    font-weight: 400;
    text-transform: uppercase;
    color: #30acec;
    letter-spacing: 5px;
}

.header_main{
    background-color: #108aca;
    display: grid;
    padding: 0;
    grid-template-columns: 40% 1fr;
    align-items: unset;
    min-height: calc(100vh - 100px);
}
.header_main_content{
    padding: 2rem;
    background-color: #108acacc;
    grid-gap: 2rem;
    display: grid;
    align-content: center;
    grid-auto-rows: max-content;
}
.header_main_content h1{
    font-size: 2.75rem;
    margin: 0;
    color: #fff;
}
.header_main_content h2{
    font-size: 2rem;
    color: #efefef;
    margin: 0;
}
.header_main_image{
    background-image: url('img/10.JPG');
    background-size: cover;
    background-position: center;
}
.main_btn{
    font-size: 1.5rem;
    border: 2px solid #fff;
    color: #fff;
    text-decoration: none;
    padding: 1rem 2rem;
    display: block;
    width: max-content;
}
.section_main {
    display: grid;
    padding-left: 2rem;
    grid-auto-rows: max-content;
    grid-template-columns: 550px;
    grid-gap: 4rem;
    grid-template-columns: repeat(2, 1fr);
}
.gallery_main{
    height: calc(100vh - 100px - 150px);
    overflow-y: scroll;
}
.gallery_grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.gallery_grid img{
    width: 100%;
    display: block;
}
.contact_tile {
    border: 5px solid #f7dd85;
    display: grid;
    grid-template-columns: 4rem 1fr;
    grid-gap: 2rem;
    padding: 1rem 2rem;
    font-size: 1.25rem;
    align-items: center;
    background-color: #fff;
}

.cert_header {
    background-color: #f7dd85;
    padding: 2.75rem;
}

    .cert_header h1 {
        font-size: 4rem;
        text-transform: uppercase;
        margin: 0;
        text-align: center;
        letter-spacing: 2px;
    }

.cert_container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 4rem;
    padding: 2rem 2rem;
    width: 100%;
}

.cert_container img {
    width: 100%;
}

._offer_grid{
    display: grid;
    grid-gap: 1rem;
    font-size: 1.25rem;
}

.offer_content{
    display: grid;
    align-content: center;
    grid-gap: 2.5rem;
    font-size: 2rem;
    padding: 2.5rem 0;
    grid-auto-rows: max-content;
}
.offer_content > *{
    margin: 0;
}

._offer_grid > div{
    background-color: #30acec;
    color: #fff;
    padding: .75rem;
    width: max-content;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.about_content {
    font-size: 1.5rem;
    display: grid;
    padding: 1rem 0;
    grid-gap: 1rem;
}

.about_content p {
    margin: 0;
    font-size: 2rem;
    display: grid;
    align-content: center;
    line-height: 1.5;
}

.offer_grid_outer {
    width: 60%;
    padding: 2rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 2rem;
}

.offer_grid {
    display: grid;
    grid-gap: 2rem;
}

.offer_tile p, .offer_tile h2 {
    margin: 0;
}

.offer_tile {
    background-color: #303030;
    color: #fff;
    display: grid;
    align-items: center;
    padding: 2rem;
}

    .offer_tile h2 {
        color: #f7dd85;
        margin-bottom: .5rem;
        font-size: 22px;
    }

.article_container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 350px);
    padding: 2rem;
    background-color: #eee;
    min-height: calc(100vh - 100px);
    grid-auto-rows: max-content;
    grid-gap: 2rem;
}
.rules {
    min-height: calc(100vh - 100px);
}

.article_tile {
    display: grid;
    background-color: #fff;
    grid-auto-rows: max-content;
    border-radius: 15px;
    overflow: hidden;
    height: max-content;
}

.article_container img {
    width: 100%;
}

.article_tile_content {
    padding: 1rem;
    display: grid;
    grid-gap: 1rem;
}

    .article_tile_content p, .article_tile_content h2 {
        margin: 0;
    }

    .article_tile_content a {
        background-color: #303030;
        color: #f7dd85;
        display: block;
        padding: .75rem 1rem;
        text-transform: uppercase;
        text-decoration: none;
        width: max-content;
        font-weight: 600;
        border-radius: 10px;
    }

.gallery_container {
    display: grid;
    grid-gap: 1.5rem;
    margin-top: 8rem;
    margin-bottom: 2rem;
    justify-self: center;
    grid-template-columns: repeat(3, 284px);
    max-width: 900px;
}

    .gallery_container img {
        width: 284px;
        height: 284px;
        display: block;
        box-shadow: 0 0 1rem #0004;
        border-radius: 15px;
        cursor: pointer;
        object-fit: cover;
    }

.single_article_container {
    padding: 2rem;
    display: grid;
    font-size: 1.5rem;
}

.single_article_date {
    font-weight: 600;
    text-align: center;
}

.single_article_content {
    text-align: center;
    justify-self: center;
    max-width: 900px;
}

ul, ol {
    text-align: left;
}

.modal_gallery {
    position: fixed;
    grid-template-columns: 10% 80% 10%;
    grid-template-rows: 10vh 80vh;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
    align-items: center;
    background-color: #000C;
    display: grid;
}

.owl-carousel {
    grid-column: 2/3;
    grid-row: 2/3;
}

    .owl-carousel .owl-item img.full_gallery_file {
        width: auto;
        height: auto;
        display: block;
        max-width: 100%;
        max-height: 80vh;
    }

.owl-item {
    display: grid;
    justify-content: center;
    align-content: center;
    height: 80vh;
}

.close_btn {
    z-index: 3;
    font-size: 2rem;
    color: #fff;
    display: grid;
    align-content: center;
    justify-content: center;
    text-align: center;
    font-weight: 600;
    height: 100%;
    grid-column: -1/-2;
    cursor: pointer;
}

.prev, .next {
    height: 100%;
    color: #fff;
    font-size: 2rem;
    display: grid;
    justify-content: center;
    align-content: center;
    cursor: pointer;
    font-weight: 600;
}

.modal_gallery_wrapper {
    display: none;
}

.pricing {
    text-align: center;
    font-size: 1.25rem;
    display: grid;
    padding: 2rem;
}

.pricing_grid {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(5, max-content);
    flex-direction: row;
}

.pricing_tile {
    background-color: #303030;
    border: 2px solid #fff;
    color: #fff;
    padding: 1rem 2rem;
    width: 300px;
    grid-gap: 1rem;
    align-content: center;
    display: grid;
}

.offer_price {
    font-weight: 700;
    font-size: 1.5rem;
}

.pricing h2 {
    padding-top: 1.5rem;
}

.pricing h2, .pricing h3, .pricing h4 {
    grid-column: 1/-1;
}

.hamburger {
    display: none;
}

footer {
    display: flex;
    padding: 1rem 4rem;
    gap: 2rem;
    background-color: #202020;
    justify-content: center;
}

footer a {
    color: #f7dd85;
    text-decoration: none;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

#cookieBanner {
    display: none;
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 200px;
    background-color: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
    border: 2px solid #f7dd85;
    font-size: 14px;
}

#cookieBanner button {
    background-color: #f7dd85;
    color: #303030;
    border: unset;
    font-size: 14px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 5px;
    font-family: "Karla",'Segoe UI', Tahoma, Verdana, sans-serif;
}

.about_picture{
    height: calc(100vh - 150px - 100px);
    width: 100%;
    object-fit: contain;
}

.about_section{
    display: grid;
    grid-row-gap: 2rem;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: max-content 1fr;
}
.about_section_center{
    padding: 2rem;
    display: grid;
    justify-content: center;
    grid-template-columns: 1000px;
    text-align: center;
    grid-column: 1/-1;
    grid-gap: 1.5rem;
}
.about_section_center > *{
    margin: 0;
}
.about_section_right{
    display: grid;
    padding: 2rem;
    grid-gap: 1rem;
    border-top: 1px solid #ccc;
}
.about_section_right h2{
    padding-bottom: .75rem;
    display: block;
    width: max-content;
}
.about_section_right h2::after{
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: #5c6c78;
}
.about_section_left{
    background-image: url("bgc.jpg");
    background-size: cover;
}
iframe{
    width: 100%;
    height: 100%;
}
._contact_section{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 3px;
    padding-top: 3px;
    text-align: center;
    background-color: #efefef;
}
._contact_tile{
    background-color: #fff;
    width: 100%;
    display: grid;
    justify-items: center;
    align-content: center;
    height: 100%;
    grid-gap: 1rem;
}
._contact_tile > *{
    margin: 0;
}
._contact_tile p{
    font-size: 1.25rem;
}
._contact_tile h2{
    color: #2fabeb;
}
._contact_tile a{
    color: #000;
    text-decoration: none;
}
@media screen and (max-width: 1600px) {
    .header_main_content h1{
        font-size: 2.25rem;
    }
    .about_content p, .offer_content, .header_main_content h2{
        font-size: 1.5rem;
    }
}
@media screen and (max-width: 1400px) {
    ._offer_grid > div{
        width: 100%;
    }
}
@media screen and (max-width: 1100px) {
    .nav_content{
        grid-gap: 1.5rem;
    }
    .header_main{
        grid-template-columns: 1fr 1fr;
    }
}
@media screen and (max-width: 950px){
    .logo img{
        height: 40px;
    }
    .nav_content{
        font-size: 1rem;
    }
    .section_main{
        grid-template-columns: 1fr;
        grid-gap: .5rem;
        padding: 1rem;
    }
    .about_content, .offer_content{
        order: 1;
    }
    .about_picture {
        height: 200px;
        object-fit: contain;
    }
    .about_content p, .offer_content, .header_main_content h2, ._offer_grid{
        font-size: 1rem;
    }
    .header_content {
        min-height: 100px;
    }
    header, main {
        min-height: calc(100vh - 100px - 100px);
        background-size: cover;
        background-position: right center;
    }
    .offer_content{
        padding: 0;
    }
    .about_section{
        grid-template-columns: 1fr;
        grid-gap: 0;
    }
    .about_section_center{
        grid-template-columns: 1fr;
    }
    ._contact_tile{
        padding: 1rem;
    }
    iframe{
        height: 300px;
    }
    .gallery_grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 800px){
    .header_main {
        grid-template-columns: 1fr;
    }
    .header_main_content{
        order: 1;
    }
    .header_main_image{
        height: 400px;
    }
    .nav_content{
        display: none;
        grid-template-columns: 1fr;
        background-color: #fff;
        width: 100%;
        grid-column: 1/-1;
        padding: 1rem;
        height: 250px;
    }
    nav{
        padding: 0;
        height: unset;
        position: sticky;
        top: 0;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .logo{
        padding-left: 1rem;
    }
    .hamburger{
        display: block;
        padding-right: 1rem;
    }
    header, main {
        min-height: calc(100vh - 88px - 100px);
    }
}
@media screen and (max-width: 550px){
    .header_content h1{
        font-size: 1.5rem;
    }
    ._contact_tile p{
        font-size: 1rem;
    }
    ._contact_tile h2{
        font-size: 1.25rem;
    }
    ._contact_section{
        grid-template-columns: 1fr;
    }
    .gallery_grid{
        grid-template-columns: 1fr;
    }
    .main_btn {
        font-size: 1.25rem;
    }
    .header_main_content h1{
        font-size: 1.5rem;
    }
}