:root{
    --Gray-600: #C5C5C5;
    --Law-Blue: #333559;
    --padding: 80px;
    --padding-x2: calc((var(--padding) * 2));

    --padding2: 260px;
    --padding2-x2: calc((var(--padding2) * 2));

    --padding3: 160px;
    --padding3-x2: calc((var(--padding3) * 2));
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    font-family: "Inter";
    
}

a{
    text-decoration: none;
}
ion-icon{
    color: white;
}


.porady{
    display: flex;
    width: 100%;
    align-items: flex-start;
    border-radius: 4px;
    background: #FFF;

    overflow: hidden;
}
.left{
    display: flex;
    padding: 36px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
}
.header{
    display: flex;
    padding-bottom: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}


.form{
    width: calc(100% - 52px);
}

.reset{
    all: unset; 
    outline: none; 
    background: #E7E7E7;
    border: none;
    width: calc(100% + 52px);
    align-self: center;
    text-align: center;
    padding: 12px 0;
    border-radius: 4px;

    color: var(--Law-Blue, #333559);
    leading-trim: both;
    text-edge: cap;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    margin: 0 0;
    cursor: pointer;
}
.reset:hover{
    background: var(--Gray-600);
}


.right{
    width: 30%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-self: stretch;

    background-image: url(img/porady.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;


}
.header h1{
    color: var(--Law-Blue, #333559);
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;

    margin: 0 0;
}
.porady h3{
    align-self: stretch;
    color: var(--Law-Blue, #333559);
    leading-trim: both;
    text-edge: cap;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;

    margin: 0 0;
}
.porady p{
    align-self: stretch;
    color: #AFAFAF;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;

    margin: 0 0;
}
.line{
    height: 4px;
    width: 100%;
    opacity: 0.4;
    border-radius: var(--Top-ribbon-buttons-padding-stroke-inside, 2px);
    background: var(--Gray-600, #C5C5C5);
}

























.budowa{
    display: none;
}

.menu_mobile{
    display: none;
    position: -webkit-fixed; /* For Safari */
    position: fixed;
    top: 0;
    left: 0;
    background-color: #FFF;
    width: 100vw;
    height: 100svh;
    z-index: 999;
    overflow-x: hidden;
    justify-content: right;
    text-align: right;
    align-items: right;

    grid-template-columns: 1fr;
    row-gap: 20px;
    padding-top: 40px

    
}
.close{

    width: calc(100% - 4vw);
    display: block;
    position: relative;
    height: fit-content;
    align-self: right;

    padding-right: 4vw;
    padding-top: 12px;
    padding-bottom: 12px;
    cursor: pointer;

}
.mobile_menu_sekcja{
    width: 100%;
    display: block;
    position: relative;
    align-items: right;
    text-align: right;

    padding-right: 4vw;
    margin-bottom: 48px;

}
.mobile_menu_sekcja h1{
        color: var(--Gray-600, #C5C5C5);
        leading-trim: both;
        text-edge: cap;
        font-family: Inter;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        text-transform: uppercase;

    padding-right: 4vw;
}

.mobile_menu_sekcja h2{
    color: var(--Law-Blue);
    leading-trim: both;
    text-edge: cap;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}
.mobile_button{
    display: flex;
    padding: 0px 4vw 0px 0;
    justify-content: right;

    cursor: pointer;

}
.mobile_button:hover h2{

    color: var(--Gray-600);
}











.top_ribbon{
    top: 0px;
    left: 0px;
    position: absolute;
    display: flex;
    width: calc(100vw - var(--padding-x2));
    height: 160px;
    padding: 0px var(--padding);
    justify-content: space-between;
    align-items: flex-end;
    flex-shrink: 0;
    z-index: 5;



    position: -webkit-fixed; /* For Safari */
    position: fixed;
    background-color: #FFF;

}


.menu_prawo{

    top: 160px;
    left: 0px;
    position: absolute;
    width: 100vw;
    height: 160px;
    flex-shrink: 0;
    z-index: 4;

    position: -webkit-fixed; /* For Safari */
    position: fixed;
    background-color: #FFF;

    display: none;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12);
}
.underline{
    display: flex;
    height: 8px;
    padding-top: 4px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    width: 100vw;
    border-bottom: var(--Top-ribbon-buttons-padding-stroke-inside, 2px) solid var(--Gray-600, #C5C5C5);
}
.menu_options{
    display: flex;
    align-items: flex-start;
    align-self: stretch;
}
.options{
    display: flex;
    width: 200px;
    height: 150px;
    padding: 32px 16px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.options h2{
    color: var(--Gray-600, #C5C5C5);
    leading-trim: both;
    text-edge: cap;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}
.options:hover h2{
    color: var(--Law-Blue, #333559);
}
.options:hover .businesssvg{
    fill: var(--Law-Blue, #333559);
}

.options:hover .personsvg{
    fill: var(--Law-Blue, #333559);
}


/*--------------------------------------------------------------- shifting of the submenus START    --------------------------------------*/
.prawoniemieckie{
    padding-left: calc(0.24 * 100vw);
}
.prawopolskie{
    padding-left: calc(0.34 * 100vw);
}
.prawomiedzynarodowe{
    padding-left: calc(0.48 * 100vw);
}



/*--------------------------------------------------------------- shifting of the submenus  END     --------------------------------------*/












.menu{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-self: stretch;
}
.cta{
    display: flex;
    padding-bottom: 0px;
    justify-content: flex-end;
    align-items: center;
    flex: 1 0 0;
    height: 100%;

}
.logo_space{
    display: flex;
    padding: 40px 0px 16px 0px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    flex: 1 0 0;
    align-self: stretch;
    cursor: pointer;
}
.logo{
    display: flex;
    align-items: flex-end;
    gap: 16.1px;
}
.logo h1{
    color: var(--Law-Blue, #333559);
    leading-trim: both;
    text-edge: cap;
    text-shadow: -2.443px 2.443px 6.107px rgba(0, 0, 0, 0.12);
    font-family: "Noto Sans";
    font-size: 28px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}



.button{
    display: flex;
    padding: 48px 24px 0px 24px;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    gap: 6.5px;
    align-self: stretch;
    cursor: pointer;
    text-align: center;
}
.button h1{
    color: var(--Law-Blue, #333559);
    leading-trim: both;
    text-edge: cap;
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    margin: 0 0;
}
.nav:hover h1{
    color: #838383;
}
.options{
    padding-top: 8px;
}



.cta1{
    margin-top: 48px;
    display: flex;
    height: fit-content;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    align-self: center;
    border-radius: 8px;
    border: 4px solid var(--Law-Blue, #333559);
    background-color: #fff;
}
.cta1:hover{
    box-shadow: -4px 4px 16px 0px rgba(0, 0, 0, 0.24);
}




.spacer{
    display: flex;
    padding-top: 48px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}


/*----------------------------------------------------------------- TOP RIBBON END -------------------------------------------*/





.wrapper{
    top: 0px;
    left: 0px;
    position: absolute;
    overflow-x: hidden;
    width: 100vw;
    z-index: 1;
}









/*---------------------- SECTION 1 --------------------*/
.section_1{
    display: block;
    padding: 220px var(--padding2) 220px var(--padding2);
    flex-direction: column;
    align-self: stretch;
    background: var(--Law-Blue, #333559);

}
.section_header{
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    margin-bottom: 24px;
}
.section_1 h2{
    color: #E8E8E8;
    leading-trim: both;
    text-edge: cap;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
    margin: 0 0;
}
li{

    align-self: stretch;
    color: #AFAFAF;
    text-align: left;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 0 0;
}
.line1{
    background-color: #fff;
    height: 4px;
    flex-grow: 1;
}
.section_content{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}


.section_right{
    width: 647px;
    height: 669px;
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
}
.team{
    width: 80%;
    height: 500px;
    position: relative;
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    border-radius: 4px;
    box-shadow: -4px 4px 10px 0px rgba(0, 0, 0, 0.12);

    background-image: url('../img/team.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;

}
.stat{
    position: absolute;
    display: flex;
    width: calc(120px - 16px);
    height: calc(120px - 40px);
    padding: 24px 8px 16px 8px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    background: #FFF;
    box-shadow: -4px 4px 10px 0px rgba(0, 0, 0, 0.12);


    top: 80%; /* Center vertically */
    transform: translateY(-50%); /* Align the center of the element with the `top` value */
    text-align: center;
    line-height: 100px; /* Example for vertical centering of text */
}
.stat.s1{
    
  left: calc(50% - 104px - 8px - 52px - 58px); /* Center - 1 box width - 1 spacing - half of its own width */

}
.stat.s2{

  left: calc(50% - 58px); /* Center */

}
.stat.s3{

  left: calc(50% + 104px + 8px + 52px - 58px); /* Center + 1 box width + 1 spacing + half of its own width */

}


.section_right h1{
    color: #000;
    leading-trim: both;
    text-edge: cap;
    font-family: Inter;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    margin: 0 0;
    }
.section_right h3{
    align-self: stretch;
    color: #000;
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-family: Inter;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
    margin: 0 0;
}







/*---------------------- SECTION BLOG --------------------*/



.section_blog{
    display: flex;
    padding: 220px var(--padding2) 0px var(--padding2);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 120px;
    align-self: stretch;
    background: var(--Law-Blue, #333559);
}

.section{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    flex: 1 0 0;
    align-self: stretch;
    padding-bottom: 200px;
}
.section h1{
    align-self: stretch;
    color: #FFF;
    text-align: right;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 0 0;
}
.section h2{
    color: #E8E8E8;
    leading-trim: both;
    text-edge: cap;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
    margin: 0 0;
}
.section_blog{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
}
.blog_carts{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
}


/*------------------------------------------------------------------- BLOG CART ------------------------------------------------------------------------*/

.blog_cart{
    display: flex;
    width: 30%;
    height: 500px;
    flex-direction: column;
    align-items: center;
    border-radius: 4px;
    background: #FFF;
    box-shadow: -4px 4px 16px 0px rgba(0, 0, 0, 0.08);
    overflow: hidden;

    transition: all .2s ease-in-out;

}
.blog_cart:hover{
    width: 34%;
}
.cart_img{
    width: 100%;
    height: 219px;;
    display: flex;
    align-items: center;
    align-self: stretch;
    background-image: url('../img/blog_cart.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.card_content{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    flex: 1 0 0;
}
.card_top{
    display: flex;
    padding: 16px 16px 0px 16px;
    flex-direction: column;
    align-items: center;
    gap: 24px;

}





.cart_header{
    display: flex;
    flex-direction: row;
    align-items: left;
    gap: 16px;
    align-self: stretch;
    align-items: center;
}

.line2{
    flex: ;
    background-color: #000000;
    height: 4px;
    flex: 1 0 0;
    border-radius: var(--Top-ribbon-buttons-padding-stroke-inside, 2px);
    opacity: 0.4;
    background: var(--Gray-600, #C5C5C5);
}


.card_bottom_button{
     display: flex;
    padding: 16px;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 10px;
    align-self: stretch;
    height: 16px;
    cursor: pointer;
}
.card_bottom_button:hover{
    background-color: var(--Gray-600);
}
.card_bottom_button:hover h3{
    color: #ffffff;
}



/*------------------------------------------------ FONTS------------------------------------------------*/

.blog_cart h1{

    text-align: left;
    align-self: stretch;
    color: #000;
leading-trim: both;
text-edge: cap;
font-family: Inter;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: normal;
text-transform: uppercase;

margin: 0 0;
}

.blog_cart h3{
    display: flex;
padding: 16px;
justify-content: flex-end;
align-items: flex-end;
gap: 10px;
align-self: stretch;
color: var(--Law-Blue, #333559);

margin: 0 0;
}

.blog_cart h2{
    align-self: stretch;
    color: var(--Gray-600, #C5C5C5);
leading-trim: both;
text-edge: cap;
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;

margin: 0 0;
}

.blog_cart h4{
    color: var(--Gray-600, #C5C5C5);
leading-trim: both;
text-edge: cap;
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-transform: uppercase;

margin: 0 0;
}

.line2{
    flex: ;
    background-color: #000000;
    height: 4px;
    flex: 1 0 0;
    border-radius: var(--Top-ribbon-buttons-padding-stroke-inside, 2px);
    opacity: 0.4;
    background: var(--Gray-600, #C5C5C5);
}
/*------------------------------------------------ FONTS END ------------------------------------------------*/





/*----------------------------------------------------- FOOTER -----------------------------------------------------*/

.footer{
    width: 100%;
    background: #FFF;
    display: inline-flex;
    padding-top: 64px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}
.footer_content{
    display: flex;
    width: calc(100% - var(--padding3-x2));
    padding: 0px var(--padding3) 64px var(--padding3);
    justify-content: space-between;
    align-items: flex-start;
}
.footer_bottom{
    display: grid;
    width: calc(100% - var(--padding3-x2));
    padding: 48px var(--padding3) 32px var(--padding3);
    background: var(--Law-Blue, #333559);
    justify-content: center;
    align-items: center;



    position: relative;
    grid-template-columns: 1fr 0.5fr 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
a{
    cursor: pointer;
}
a:hover h3{
    color: #C5C5C5;
}

/*------------------- FOOTER BOTTOM -------------------*/


.copyright{
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-shrink: 0;
}
.footer_cta{
    display: flex;
    height: 38px;
    width: fit-content;
    padding: 8px 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;

    border-radius: 8px;
    border: 4px solid var(--Gray-600, #C5C5C5);
    cursor: pointer;
}
.socials{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
}
.socialsvg:hover{
    cursor: pointer;
    fill: #fff;
}
.footer_bottom h2{
    color: var(--Gray-600, #C5C5C5);
    leading-trim: both;
    text-edge: cap;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    text-align: center;
}
.footer_bottom h4{
    color: var(--Gray-600, #C5C5C5);
    leading-trim: both;
    text-edge: cap;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
}

.info{
    display: flex;
    width: 440px;
    padding-bottom: 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    flex-shrink: 0;
}
.branding{
    display: flex;
    width: 200px;
    align-items: flex-end;
    align-content: baseline;
    gap: 12px;
}
.info h1{

}
.info h2{
    color: var(--Gray-600, #C5C5C5);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.info h3{
    color: var(--Law-Blue, #333559);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0 0;
}
.footer_kontakt{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
}
.kontakt_section{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.footer_menu_wrapper{
    display: flex;
    width: calc(100% - 440px - 32px);
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 10px;
    flex-shrink: 0;
    align-self: stretch;
}
.footer_menu{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: flex-end;
    gap: 64px;
}
.footer_menu_section{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.footer_menu_wrapper h2{
    color: var(--Gray-600, #C5C5C5);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0 0;
}
.footer_menu_wrapper h3{
    color: var(--Law-Blue, #333559);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0 0;
}

.mobile{
    display: none;

    top: 0px;
    left: 0px;
    position: absolute;
    display: flex;
    width: calc(100vw - var(--padding-x2));
    height: 80px;
    padding: 20px var(--padding);
    justify-content: space-between;
    align-items: flex-end;
    flex-shrink: 0;
    z-index: -10;



    position: -webkit-fixed; /* For Safari */
    position: fixed;
    background-color: #FFFfff;
}





























@media (max-width: 1600px) {
    :root {

        --padding: 40px;
        --padding2: 60px;
        --padding3: 100px;
    }
    .desktop{
    }
    .mobile{
        display: none;
        z-index: -10;
    }

    .nav{

        padding: 48px 12px 0px 12px;
    }
    .button h1{
        font-size: 16px;
        font-weight: 700;
    }
    .branding{
        display: flex;
        width: 100%;
        align-items: flex-end;
        align-content: baseline;
        gap: 12px;
    }








    .logo_space{

    }
    .logo{
    }
    .hmenu{
        display: flex;
        align-items: center;
        justify-content: center;

        width: 60px;
        height: 60px;
        background-color: var(--Gray-600);
        border-radius: 2px;
        cursor: pointer;
    }

    .section_frame{
        display: block;
    }

    .section_right{
        display: none;
    }

.section_left h1{
    align-self: stretch;
    color: #FFF;
    text-align: left;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 0 0;
}
.section_left h2{
    color: #E8E8E8;
    leading-trim: both;
    text-edge: cap;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
    margin: 0 0;
}
.section_left h3{
    align-self: stretch;
    color: #AFAFAF;
    text-align: left;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 0 0;
}
.blog_carts{
    display: grid;
    row-gap: 24px;
    column-gap: 24px;

    grid-template-columns: 1fr 1fr;
}
.blog_cart{
    width: 100%;
}
.blog_cart:hover{
    width: 100%;
}
.blog_menu{
    display: none;
}
.hero{
    padding-right: 400px;
}





  }

  @media (max-width: 1320px) {
    :root {

      --padding: 40px;
      --padding2: 60px;
      --padding3: 100px;
    }
    .desktop{
        display: none;
    }
    .mobile{
        display: flex;
        z-index: 10;
    }
  }

@media (min-width: 1920px) {
    :root {
      --padding: calc((100vw - 1920px + 160px) * 0.5);
      --padding2: calc((100vw - 1920px + 520px) * 0.5);
      --padding3: calc((100vw - 1920px + 320px) * 0.5);
    }
  }






  
@media (max-width: 1000px) {
    :root {

      --padding: 40px;
      --padding2: 60px;
      --padding3: 100px;
    }
    .budowa{
        top: 0;
        bottom: 0;
        display: none;
        position: -webkit-fixed;
        position: fixed;
        z-index: 9999;
        width: 100vw;
        height: 100vh;
        background-color: #FFF;
        align-items: center;
        justify-content: center;
        text-align: center;
    }



    .porady{
        flex-direction: column-reverse;
    }
    .left{
        padding: 16px;
        gap: 16px;
    }
    .header{
        display: flex;
        padding-bottom: 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    
    .form{
        width: calc(100% - 52px);
    }
    .reset{
        font-size: 16px;
    }
    .right{
        width: 100%;
        height: 240px;
    
        background-image: url(img/porady.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center top;
    
    
    }
    .header h1{
        color: var(--Law-Blue, #333559);
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    
        margin: 0 0;
    }
    .porady h3{
        align-self: stretch;
        color: var(--Law-Blue, #333559);
        leading-trim: both;
        text-edge: cap;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    
        margin: 0 0;
    }
    .porady p{
        align-self: stretch;
        color: #AFAFAF;
        font-family: Inter;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    
        margin: 0 0;
    }
    .line{
        height: 4px;
        width: 100%;
        opacity: 0.4;
        border-radius: var(--Top-ribbon-buttons-padding-stroke-inside, 2px);
        background: var(--Gray-600, #C5C5C5);
    }
    
    

























    .footer_menu_wrapper{
        display: none;
    }
    .budowa h2{

    }


    /*----------------------------------   HERO SECTION MOBILE -------------------------------------*/


        .hero_section{
            display: flex;
            width: 100%;
            height: 100svh;

            min-height: 840px;
            max-height: 1080px;

            padding: 0px 0px 0px 0px;

            flex-direction: column;
            align-items: baseline;
            justify-content: baseline;

            background-image: url('../img/hero_pl2.jpg');
            background-position: bottom center;
            background-repeat: no-repeat;
            background-size: 3200px;

            
        }
        .hero{
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-start;
            width: fit-content;
            gap: 32px;
            padding-left: 20px;
            padding-bottom: 240px;

        }
        .header{
            display: flex;
            width: 100%;
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
        }
        .header h2{
            font-size: 16px;
        }
        .cta2 h1{
            font-size: 18px;
        }

        .cta2:hover{
            box-shadow: -4px 4px 16px 0px #00000080;
        }





    .section_header{
    }
    .section h1{
        align-self: stretch;
        color: var(--Law-Blue);
        text-align: right;
        font-family: Inter;
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin: 0 0;
    }
    .section h2{
        color: #E8E8E8;
        leading-trim: both;
        text-edge: cap;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        text-transform: uppercase;
        margin: 0 0;
    }


    .blog_carts{

        grid-template-columns: 1fr;
    }

    
.card_content{
    width: 100%;
}

.card_top{
    width: calc(100% - var(--padding));
}


















        .blog_cart h1{

            text-align: left;
            align-self: stretch;
            color: #000;
        leading-trim: both;
        text-edge: cap;
        font-family: Inter;
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        text-transform: uppercase;

        margin: 0 0;
        }

        .blog_cart h3{
            display: flex;
        padding: 16px;
        justify-content: flex-end;
        align-items: flex-end;
        gap: 10px;
        align-self: stretch;
        color: var(--Law-Blue, #333559);

        margin: 0 0;
        }

        .blog_cart h2{
            align-self: stretch;
            color: var(--Gray-600, #C5C5C5);
        leading-trim: both;
        text-edge: cap;
        font-family: Inter;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;

        margin: 0 0;
        }

        .blog_cart h4{
            color: var(--Gray-600, #C5C5C5);
        leading-trim: both;
        text-edge: cap;
        font-family: Inter;
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        text-transform: uppercase;

        margin: 0 0;
        }


        .footer_kontakt{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            align-self: stretch;
            gap: 16px;
        }
        .kontakt_section{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
        }













        .footer{
            width: 100%;
            background: #FFF;
            display: block;
            padding-top: 64px;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
        }
        .footer_content{
            display: flex;
            width: calc(100% - var(--padding3-x2));
            padding: 0px var(--padding3) 64px var(--padding3);
            justify-content: space-between;
            align-items: flex-start;
                }
                
        .info{
            display: flex;
            width: 100%;
            padding-bottom: 8px;
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
            flex-shrink: 0;
        }
        .branding{
            display: flex;
            width: 100%;
            align-items: flex-end;
            align-content: baseline;
            gap: 12px;
        }



    .footer_bottom{
        grid-template-columns: 1fr;
        grid-column-gap: 10px;
        grid-row-gap: 16px;

    }

    .copyright { 
        justify-content: center;
        grid-row: 3; }
    .copyright h4{
        text-align: center;
    }
    .footer_cta { 
        width: auto;
        justify-content: center;
        grid-row: 2; }
    .socials { 
        padding-bottom: 16px;
        justify-content: center;
        grid-row: 1; }
}





  
@media (max-width: 600px) {
    :root {

      --padding: 40px;
      --padding2: 60px;
      --padding3: 100px;
    }
.hero_section{
    display: flex;
    width: 100%;
    height: 100svh;

    min-height: 840px;
    max-height: 1080px;

    padding: 0px 0px 0px 0px;

    flex-direction: column;
    align-items: baseline;
    justify-content: baseline;

    background-image: url('../img/hero_pl2.jpg');
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: 2200px;

    
}
.hero{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    width: fit-content;
    gap: 32px;
    padding-left: 20px;
    padding-bottom: 80px;

}
}