:root {
    --bodyFontSize: 16px;
    --menuPaddingLeft: 2rem;
    --menuPaddingRight: 2rem;
    --menuPaddingTop: 0.8rem;
    --menuPaddingBottom: 0.8rem;
    --menuFontSize: 1rem;
    --menuItemsMarginLeft: 0.8rem;
    --menuItemsMarginRight: 0.8rem;
    --borderRadiusHeader: 100px;
    --sectionPadding: 2rem;
    --borderRadius: 2rem;
}


* {
    font-size: var(--bodyFontSize);
    font-family: "Barlow Condensed", serif;
    margin: 0;
    padding: 0;
    color: #4F4F4F;
}

body {
    background: #fff;
    overflow-x: hidden;
}

a:hover,
input[type=submit]:hover,
button:hover {
    opacity: 0.3
}

#gallery { margin: 2rem;  display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(150px, 1fr)); grid-auto-rows: minmax(150px, 50vh);}
#gallery  img { width: 100%; height: 100%; object-fit: cover;}

header {
    background-color: rgba(255, 255, 255, 1);
    display: grid;
    grid-template-columns: minmax(50px, 25%) minmax(150px, 50%) minmax(50px, 25%);
    grid-template-rows: minmax(90px, 20vh);
    position:absolute;
    z-index:2;
    margin: 4rem;
    width: calc(100% - 8rem);
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    border-radius: 1rem;
    -webkit-box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.44);
    -moz-box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.44);
    box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.44);        
}

header * {
    font-size: var(--menuFontSize);
    text-decoration: none;
    text-transform: uppercase;
}

header .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin:0.5rem auto;
}

header .logo img {
    width: calc(100% - 2rem);
    height: auto;
    max-width: 350px;
}

header .phone {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2476BA;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    border-radius: 1rem;     
}

header .phone div {
    width: 100%;
    text-align: center;
    padding-bottom: var(--menuPaddingBottom);
    padding-top: var(--menuPaddingTop);
    padding-right: var(--menuPaddingRight);
    padding-left: var(--menuPaddingLeft);
}

header .phone * {
    color: #fff;
    font-size:1.8rem;
}

header .phone a {
    margin-left: var(--menuItemsMarginLeft);
    margin-right: var(--menuItemsMarginRight);
}

header .phone a:nth-child(1) {
    background-image: url(../images/phone.svg);
    background-repeat: no-repeat;
    background-size: 2rem auto;
    padding-left: 2.5rem;
    background-position: left center;
}

header nav {
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
}

header nav ul {
    transition: 0.5s !important;
    display: flex;
    width: 70%;
    justify-content: space-between;
    padding-bottom: var(--menuPaddingBottom);
    padding-top: var(--menuPaddingTop);
    padding-right: var(--menuPaddingRight);
    padding-left: var(--menuPaddingLeft);
    -webkit-border-radius: var(--borderRadiusHeader);
    -moz-border-radius: var(--borderRadiusHeader);
    border-radius: var(--borderRadiusHeader);
}

header nav li {
    display: block;
    margin-left: var(--menuItemsMarginLeft);
    margin-right: var(--menuItemsMarginRight);
}

header nav li a {
    font-size: 1.6rem;
    color: #214461;
}

header nav button {
    display: none;
}

.fly {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    position: fixed !important;
    background-color: #2476BA !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100vh;
    z-index: 9999;
}

.fly a {
    background: none !important;
    font-size: 2rem;
    padding: 0 !important;
    color: #fff;
}

.fly li {
    padding: 1rem;
}

.fly button {
    position: absolute;
    top: 0rem;
    left: 0rem;
    text-indent: -100rem;
    cursor: pointer;
    width: 4rem;
    height: 4rem;
    background-color: #2476BA;
    border: 0;
    display: block;
    background-image: url(../images/menu.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 3rem auto;
}

.close {
    width: 4rem;
    height: 4rem;
    left: 2rem;
    top: 3.5rem;
    overflow: hidden;
    -webkit-border-radius: var(--borderRadiusHeader);
    -moz-border-radius: var(--borderRadiusHeader);
    border-radius: var(--borderRadiusHeader);
}

.close li {
    display: none;
}

.swiper {
    width: 100%;
    height: 100vh;
    min-height: 600px;
    position: relative;
}

.swiper .label {
    position: absolute;
    width: 50%;
    left: 15%;
    top: 50%;
    transform: translate(-15%, -50%);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top:25vh;
}

.swiper .label h1 {
    text-align: center;
    color: #fff;
    font-size: 6rem;
    text-transform: uppercase;
    font-weight: 400;
    margin:0 auto;    
}

.swiper .label h3 {
    text-align: center;
    color: #fff;
    font-size: 2.2rem;
    text-transform: uppercase;
    font-weight: 400;
    margin: 0 auto 1.5rem auto;
}



.swiper .label p {
    text-align: center;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 400;
    text-transform: uppercase;
    color: #B9B9B9;
    margin: 0 12rem;
}

.swiper .label span {
    display: block;
    font-size: 1.2rem;
    color: #ffffff;
    margin-top: 1rem;
}

.swiper .label a {
    background-size: 0.8rem auto;
    background-repeat: no-repeat;
    background-position: right 1.5rem center;
    background-color: #2476BA;
    text-decoration: none;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 1.3rem;
    padding: 1rem 4rem 1rem 4rem;
    margin-top: 2rem;
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    border-radius: 0.25rem;
}

.swiper-pagination { text-align: right !important; width: calc(100% - 4rem) !important; bottom: 2rem !important;}



.swiper-pagination-bullet {
    background: #fff !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    border-radius: 0.25rem !important;
}

.swiper-pagination-bullet-active {
    background: #2476BA !important;
}

.swiper-button-next,
.swiper-button-prev {

    right: 4rem !important;
    padding: 30px;
    color: rgb(255, 255, 255) !important;
    fill: rgb(255, 255, 255) !important;
    stroke: rgb(255, 255, 255) !important;
    font-size: 10px;
    padding-top:15vh;
}

.swiper-button-prev  {  left: 4rem !important; }

.swiper-slide>div {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    background: rgba(0, 41, 75, 0.8);
    width: 70%;
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);    
}

.swiper .s1 {
    background-image: url(../images/s1.jpg);
    background-size: cover;
    background-position: center center;
}

.swiper .s2 {
    background-image: url(../images/s2.jpg);
    background-size: cover;
    background-position: center center;
}

.swiper .s3 {
    background-image: url(../images/s3.jpg);
    background-size: cover;
    background-position: center center;
}

.panels {
    background: #fff;
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr);
    grid-auto-rows: minmax(200px, 40vh);
    padding: calc(4rem + 10vh) 4rem 4rem 4rem;
}

.panels * {
    text-transform: uppercase;
    font-size: 1.2rem;
    color:#fff;
}

.panels>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #214461;
    font-size: 1.5rem;
}

.panels>div:nth-child(2) {
    background-color: #2476BA;
    height: 50vh;
    margin-top: -10vh; 
}

.panels>div img {
    width: auto;
    height: 5rem;
    margin-bottom: 1rem;
}

.panels>div strong {
    font-weight: 400;
    font-size: 2rem;
}

section h2 {
    text-align: left;
    display: table;
    font-size: 3rem;
    font-weight: 400;
    text-transform: uppercase;
    color:#fff;
    margin: 2rem auto 4rem auto;
    padding-left: 5rem;
    background-image: url(../images/h2w.png);
    background-size: 4.5rem auto;
    background-repeat: no-repeat;
    background-position: left center;
}
#onas p, #onas li, #onas strong  { color:#fff; font-size:1.2rem; }
#onas {
    padding: 0;
    background-position: bottom;
    background-attachment: fixed;
    background-image: url(../images/s3.jpg);
    color: #fff;
    background-size: cover;
    min-height: 100vh;
    display: flex;   
}
#onas > div { background:  rgba(0, 41, 75, 0.8); padding: 4rem; display: flex; flex-direction: column; justify-content: center;}

  
#onas p { margin-bottom:2rem; font-size: 1.5rem; }

#onas > div::after { content: ''; border-radius: 100rem; display: table; background-color: #fff; height: 0.25rem; width: 30%; margin: 2rem auto 0 auto;}





#oferta {
    min-height: 100vh;
    height: auto;
    padding-top: 2rem;
}

#oferta * { color:#214461;}

#oferta .wrap { gap: 1rem;  display: grid; grid-template-columns: 50% 50%; margin: 4rem;}
#oferta .wrap > div:nth-child(2) { position: relative;}
#oferta .wrap > div:nth-child(2) img { width: 100%; height: auto; position: absolute; top: 0; left: 0;}
#oferta .wrap > div:nth-child(2) img:nth-child(2) { border-left: 1rem solid #fff; border-top: 1rem solid #fff; width: 80%; height: auto; position: absolute; top: auto; bottom: 0; left: auto; right: 0;}
#oferta p, #oferta strong, #oferta li { font-size: 1.7rem; margin-bottom: 1.5rem;}
#oferta strong { font-weight: 600;}
#oferta ul { margin-left: 3rem;}

.kafle { margin: 1rem 4rem 4rem 4rem; display: grid; gap: 1rem; grid-template-columns: 1fr 1fr 1fr;  grid-auto-rows: minmax(50px, 20vh);}
.kafle > div { font-size: 1.3rem; display: flex; justify-content: center; align-items: center; background-color: #214461; color: #fff !important; text-align: center; text-transform: uppercase;}
.kafle > div:nth-child(odd) { background-color: #2476BA;}

#oferta  h2 {
    background-image: url(../images/h2.png); 
}



#kontakt * {
    text-transform: uppercase;
    font-size: 1.5rem;
    text-decoration: none;
    color: #fff !important;
}

#kontakt {
    min-height: 50vh;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    grid-template-rows: minmax(50vh, auto);
    padding: 4rem;
    background-color: #214461;
}

#kontakt > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
}
#kontakt > div:nth-child(1) img { margin: 1rem auto; width: 50%; height: auto; max-width: 400px; min-width: 150px; filter: grayscale(100%) invert(1);}






#kontakt strong {
    margin-left: 1rem;
}

footer * {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.3rem;
}

footer {
    padding: 2rem;
    background-color: #152D40;
    text-align: center;
    height: auto;
}

footer p {  margin:0; padding-top:0.2rem;}

.map { border:0; width:100%; height:50vh; min-height:150px; margin:0;}



@media only screen and (max-width: 1366px) {
    :root {
        --bodyFontSize: 15px;
    }
}

@media only screen and (max-width: 1280px) {
    :root {
        --bodyFontSize: 14px;
    }
}

@media only screen and (max-width: 1152px) {
    :root {
        --bodyFontSize: 13px;
    }
}

@media only screen and (max-width: 1024px) {
    :root {
        --bodyFontSize: 12px;
    }

    header .phone {
        display: none;
    }
    
header {

    grid-template-columns: 1fr ;
    grid-template-rows: minmax(130px, 25vh);
}  


.swiper .label {
    position: absolute;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top:25vh;
}

.swiper-slide>div {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    background: rgba(0, 41, 75, 0.8);
    width: 100%;
    clip-path: none;    
}

.swiper-pagination { text-align: center !important; width: 100% !important; bottom: 2rem !important;}

#gallery { grid-template-columns: repeat(1, minmax(150px, 1fr)); grid-auto-rows: minmax(150px, 50vh);}

.swiper .label img {  width:3rem; height:auto;}

.swiper .label h3 {
    font-size: 1.8rem;
}

.swiper .label p:nth-child(4) {
    font-size: 1.3rem; 
    } 


    




    #kontakt {
        min-height: 100vh;
        height: auto;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    
    .panels {
        background: #fff;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(200px, 40vh);
        grid-auto-rows: minmax(200px, 40vh);       
        padding: 4rem;
    }
    
    
    .panels>div:nth-child(2) {
        height: auto !important;
        margin: 0 !important; 
    }

    .kafle, #oferta .wrap {
        grid-template-columns: 1fr;
    }

    #oferta .wrap > div:nth-child(2) { display: none;}
    
    .swiper-button-next,
.swiper-button-prev { display:none !important;}


.swiper .label p {
    text-align: center;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 400;
    text-transform: uppercase;
    color: #B9B9B9;
    margin: 0 1rem;
}


}