@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?2odha9');
    src:  url('../fonts/icomoon.eot?2odha9#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?2odha9') format('truetype'),
    url('../fonts/icomoon.woff?2odha9') format('woff'),
    url('../fonts/icomoon.svg?2odha9#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display:swap;
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-carwash:before {
    content: "\e900";
}

body{font-family: 'Roboto', sans-serif;overflow-x: hidden;}
h2{font-weight:700;}
h2 > i { color: rgba(241,205,21,1);}

h3{font-weight: 300;}

img{border-radius:10px; border:3px solid #fff}

footer{background: linear-gradient(90deg, rgba(186,186,186,0) 10%, rgba(241,205,21,1) 70%, rgba(241,205,21,1) 100%); color:#000}
footer a { color:#000}

.container-fluid{overflow-x: hidden;}

.navbar{transition: all linear 0.4s}
.navbar.moved{background: rgb(186,186,186);background: linear-gradient(90deg, rgba(186,186,186,0) 10%, rgba(241,205,21,1) 70%, rgba(241,205,21,1) 100%);box-shadow: 0 0 10px rgba(0,0,0,0.4);}
.navbar .nav{justify-content: flex-end;}
.navbar .nav-link{color:#222; font-weight:600;}
.navbar-brand {white-space: normal; position:relative; top:-8px; padding-right:0; padding-left:38px; margin-right:0 !important} 
.navbar-brand > i{position: absolute; left:0; font-size:36px; top:10px; color: rgba(241,205,21,1); text-shadow:0 0 2px #000}
.navbar-brand > span{font-size:0.8rem; position:absolute; left:40px; bottom:-6px}
.navbar-toggler{display:none;} 

#start{height: 100vh; position: relative; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 95%); }

#start .carousel,#start .carousel-inner{width:100%; height: 100vh;}
#start .carousel-item{width:100%; height: 100vh; display: block; z-index: 100; background-position: center center; background-size: cover; background-repeat: no-repeat;}

#start .carousel-item > div {position: absolute; left:0; bottom:20%; padding: 15px 15px 15px 20px; font-size:1.2rem;  display: inline-block; background:rgba(0,0,0,0.8);  color:#fff; z-index: 201;}
#start .carousel-item p{margin-bottom: 0;}
#start .carousel-item p i{ color: rgba(241,205,21,1);}

#start .s1{background-image:url('../gfx/centrum-mycia-automatyczna.webp');}
#start .s2{background-image:url('../gfx/centrum-mycia.webp');}
#start .s3{background-image:url('../gfx/centrum-mycia-yello.webp');}
#start .s4{background-image:url('../gfx/centrum-mycia-samoobslugowa.webp');}

#start .container-fluid{ position: absolute; top:0;  width:100%; height: 50%; z-index: 200;}

#start h1 {font-weight: 700; color:#fff; padding-left: 100px; position: absolute; left:0; top:10%; padding-top:15px; padding-bottom:15px; padding-right:15px; display: inline-block; background:rgba(0,0,0,0.8);  }
#start h1 > span::before { content: '\A'; white-space: pre; }
#start h1 > strong{ color: rgba(241,205,21,1);  font-weight:700}
#start h1 > i{position: absolute; left:10px; font-size: 82px; top:25px; color: rgba(241,205,21,1); text-shadow:0 0 2px #000}

#oferta > .container-fluid{padding:10% 0; }

#oferta .container-fluid.sb{background:#fff; padding-top:0; position: relative;}
#oferta .container-fluid.sb:after{content:'';width:100%; height:100%; display: block; background: rgba(255,255,255,0.7); position: absolute; z-index: 0; top:0;}
#oferta .container-fluid.sb > .container{position:relative; z-index: 2; }

#oferta .container-fluid.cb{background: #bababa; clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 96%);}

#oferta .container-fluid.detail{background-size: cover; background-image: url('../gfx/centrum-mycia-karcher.webp'); background-repeat: no-repeat; position:relative; top:-50px; overflow: hidden; clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%);}

#oferta .container-fluid.detail:after{content:'';width:100%; height:100%; display: block; background: rgba(255,255,255,0.7); position: absolute; z-index: 0; top:0;}
#oferta .container-fluid.detail > .container{position:relative; z-index: 2; }

#oferta .programy li img{margin-right:10px;}
#oferta .programy li{display:flex; align-items: center;}
#oferta .programy li strong{display: block; width:100%}

#oferta .card{background: #8f8f8f;text-align: center; margin-bottom:20px }

#oferta .card i{margin: auto; font-size:8rem; color:#fff;} 
#oferta .card h3{font-weight: 500; color:rgba(241,205,21,1)}

#technologia{padding:10% 0; background:linear-gradient(45deg, rgb(255, 238, 154) 0%, rgba(241,205,21,1) 100%); clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%);} 
#technologia h2 i{text-shadow: none;}
#technologia img{border-width:0;}
@media (max-width: 991px) {
    .navbar.moved .navbar-toggler{display:block;} 
}

@media (max-width: 768px) {
    .navbar .nav{justify-content: center;}
   
    
    #start{clip-path: polygon(0 0, 100% 0, 100% 100%, 0 98%);}
    #start h1{font-size:2rem; padding-left: 100px; top:0; padding-top:5px; padding-bottom:0}
    #start h1 > i{font-size:78px; top:22px}
    #start h1 > span{font-size:1.1rem; position:relative; top:-10px}
    #start ul li{font-size:1rem}

    #start .container-fluid{ position: absolute; top:0;  width:100%; height: 100%; z-index: 200;}
    #start .carousel-item div{bottom:11%; padding: 15px 15px 15px 20px; font-size:1rem; }
    #start .carousel-item i {float: left; margin-right:5px}
    #start .carousel-item p span{display: block; width:90%; float: left;}

    #start .s1{background-position: 65% center;}
    #start .s2{background-position: 30% center;}
    #start .s3{background-position: 65% center;}
    #start .s4{background-position: 20% center;}
    
    #oferta .container-fluid.cb,
    #oferta .container-fluid.detail,
    #technologia {clip-path: polygon(0 0, 100% 1%, 100% 100%, 0 99%);}

    #oferta .programy li img{width:90px; height: 90px;}
}

@media (max-width: 345px) {
    .navbar-brand {font-size: 1rem;}
    .table-sm {font-size:0.9rem}
}