/*
MIT License

Copyright (c) 2020 Web Cifar

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;700&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html {
    font-size: 10px;
    font-family: 'Ubuntu', sans-serif;
    scroll-behavior: smooth;
}
a {
    text-decoration: none;
}
.container {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
p {
    color: black;
    font-size: 1.4rem;
    margin-top: 5px;
    line-height: 2.5rem;
    font-weight: 300;
    letter-spacing: .05rem;
}
.section-title {
    font-size: 4rem;
    font-weight: 300;
    color: black;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    text-align: center;
}
.section-title span {
    color: #FF1600;
}
.brand h1 {
    font-size: 3rem;
    color: white;
}
.brand h1 span {
    color: #FF1600;
}

/* Header section */
#header {
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100vw;
	height: auto;
}
#header .header {
	min-height: 8vh;

}
#header .nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	max-width: 1300px;
	padding: 0 10px;
}
#header .nav-list ul {
	list-style: none;
	position: absolute;
	background-color: rgb(31, 30, 30);
	width: 100vw;
	height: 100vh;
	left: 100%;
	top: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 1;
	overflow-x: hidden;
	transition: 0.5s ease left;
}
#header .nav-list ul.active {
	left: 0%;
}
#header .nav-list ul a {
	font-size: 2.5rem;
	font-weight: 500;
	letter-spacing: .2rem;
	text-decoration: none;
	color: white;
	text-transform: uppercase;
	padding: 10px;
	display: block;
}
#header .nav-list ul a::after {
	content: attr(data-after);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0);
	color: rgba(240, 248, 255, 0.021);
	font-size: 13rem;
	letter-spacing: 50px;
	z-index: -1;
	transition: 0.3s ease letter-spacing;
}
#header .nav-list ul li:hover a::after {
	transform: translate(-50%, -50%) scale(1);
	letter-spacing: initial;
}
#header .nav-list ul li:hover a {
	color: #FF1600;
}
#header .hamburger {
	height: 60px;
	width: 60px;
	display: inline-block;
	border: 3px solid white;
	border-radius: 50%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100;
	cursor: pointer;
	transform: scale(0.8);
	margin-right: 20px;
}
#header .hamburger:after {
	position: absolute;
	content: '';
	height: 100%;
	width: 100%;
	border-radius: 50%;
	border: 3px solid white;
	animation: hamburger_puls 1s ease infinite;
}
#header .hamburger .bar {
	height: 2px;
	width: 30px;
	position: relative;
	background-color: white;
	z-index: -1;
}
#header .hamburger .bar::after,
#header .hamburger .bar::before {
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	background-color: white;
	transition: 0.3s ease;
	transition-property: top, bottom;
}
#header .hamburger .bar::after {
	top: 8px;
}
#header .hamburger .bar::before {
	bottom: 8px;
}
#header .hamburger.active .bar::before {
	bottom: 0;
}
#header .hamburger.active .bar::after {
	top: 0;
}
/* End Header section */

/* Home Section */
#home {
    background-image: url(./img/budynek.jpg);
    background-size: cover;
    background-position: top center;
    position: relative;
    z-index: 1;
}
#home::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: .7;
    z-index: -1;
}
#home .home {
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 50px;
}
#home .home-left {
    min-width: 55%;
    margin-top: 30px;
}
#home .home-right {
    margin-top: 20px;
    animation: box_reveal 0.5s ease forwards;
    animation-delay: 3s;

}
#home .home-right p {
    line-height: 30px;
    margin-left: 20px;
    margin-top: 20px;
    display: inline;
    font-size: 2rem;
    position: inherit;
    color: transparent;
    text-align: left;
    margin-bottom: 10px;
    float: left;
    animation: text_reveal 0.5s ease forwards;
    animation-delay: 3s;
}
#home h1 {
    display: block;
    width: fit-content;
    font-size: 4rem;
    position: relative;
    color: transparent;
    animation: text_reveal 0.5s ease forwards;
    animation-delay: 1s;
}
#home h1 a{
    color: transparent;
    font-weight: 500;
    animation: text_reveal2 3s ease forwards;
}
#home h1:nth-child(1) {
    animation-delay: 1s;
}
#home h1:nth-child(2) {
    animation-delay: 2s;
}
#home h1:nth-child(2) a{
    animation-delay: 2s;
}
#home h1 span {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background-color: #FF1600;
    animation: text_reveal_box 1s ease;
    animation-delay: .5s;
    color: transparent;
}
#home h1:nth-child(1) span {
    animation-delay: .5s;
}
#home h1:nth-child(2) span {
    animation-delay: 1.5s;
}
#home .button {
    margin-top: 10px;
    display: block;
    width: fit-content;
    font-size: 3rem;
    padding: 10px;
    background: rgba(0,0,0,0.6);
    border: 2px solid #FF1600;
    border-radius: 15px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-weight: 600;
    min-height: 60px;
    padding: 16px 24px;
    text-align: center;
    transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
    box-shadow: black 0 8px 15px;
}
#home .button:disabled {
  pointer-events: none;
}
#home .button:hover {
  color: #FF1600;
  background-color: #1A1A1A;
  box-shadow: white 0 8px 15px;
  transform: translateY(-2px);
}
#home .button:active {
  box-shadow: black 0 8px 15px;
  transform: translateY(0);
}
/* End Home Section */

/* Prices section */
#opony .opony {
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 0;
}
#opony .opony-header h1 {
    margin-bottom: 50px;
}
#opony .wszystkie-opony {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#opony .opony-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 80%;
    margin: 20px auto;
    overflow: hidden;
    border-radius: 10px;
}
#opony .opony-info {
    padding: 30px;
    flex-basis: 50%;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
    color: white;
}
#opony .opony-info h1 {
    font-size: 4rem;
    font-weight: 500;
}
#opony .opony-info h2 {
    font-size: 1.8rem;
    font-weight: 300;
    margin-top: 10px;
}
#opony .opony-info p {
    color: white;
}
#opony .towar {
    display: flex;
    flex-basis: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px;
    margin: 0px;
}
#opony .opis-towaru {
    width: 80%;
}
#opony .cena-towaru {
    width: 20%;
}
#opony .opony-img {
    flex-basis: 50%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
#opony .opony-img:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
    opacity: .2;
}
#opony .opony-img img {
    transition: 0.3s ease transform;
}
#opony .opony-item:hover .opony-img img {
    transform: scale(1.1);
}
/* End Opony section */

/* Services Section */
#services .services {
    flex-direction: column;
    text-align: center;
    max-width: 1500px;
    margin: 0 auto;
    padding: 100px 0;
}
#services .service-top {
    max-width: 500px;
    margin: 0 auto;
}
#services .service-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 50px;
}
#services .service-item {
    flex-basis: 80%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding: 30px;
    border-radius: 10px;
    background-image: url(./img/stos.png);
    background-size: cover;
    margin: 10px 5%;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
#services .service-item::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
    opacity: 0.9;
    z-index: -1;
}
#services .service-bottom .icon {
    height: 80px;
    width: 80px;
    margin-bottom: 20px;
}
#services .service-item h2 {
    font-size: 2rem;
    color: white;
    margin-bottom: 10px;
    text-transform: uppercase;
}
#services .service-item p {
    color: white;
    font-weight: 1000;
}
/* End Services Section */

/* Hours Section */
#hours .hours {
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto;
    width: 90%;
}
#hours .hours-items {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 30px;
}
#hours .hours-item {
    width: 70%;
    text-align: center;
    border-radius: 10px;
    padding: 7px;
    margin: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 0px 0px 18px 0 #0000002c;
    transition: 0.3s ease box-shadow;
}
#hours .hours-item h1 span {
    color: #FF1600;
}
/* End Hours Section */

/* Contact Section */
#contact .contact {
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto;
    width: 90%;
    margin-top: 100px;
}
#contact .contact-items {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}
#contact .contact-item {
    width: 80%;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    padding: 30px;
    margin: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 0px 0px 18px 0 #0000002c;
    transition: 0.3s ease box-shadow;
}
#contact .contact-item:hover {
    box-shadow: 0px 0px 5px 0 #0000002c;
}
#contact .icon {
    width: 70px;
    margin: 0 auto;
    margin-bottom: 10px;
}
#contact .contact-info h1 {
    font-size: 2.5rem;
    font-weight: 500;
    margin-bottom: 5px;
}
#contact .contact-info h2 {
    font-size: 1.3rem;
    line-height: 2rem;
    font-weight: 1000;
}
/* End Contact Section */

/* About Section */
#about .about {
    flex-direction: column-reverse;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 20px;
}
#about .col-left {
    width: 250px;
    height: 360px;
}
#about .col-right {
    width: 100%;
}
#about .col-right h2 {
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: 0.2rem;
    margin-bottom: 10px;
}
#about .col-right p {
    margin-bottom: 20px;
}
#about .col-left .about-img {
    height: 100%;
    width: 100%;
    position: relative;
    border: 10px solid white;
}
#about .col-left .about-img::after {
    content: '';
    position: absolute;
    left: -33px;
    top: 19px;
    height: 98%;
    width: 98%;
    border: 7px solid #FF1600;
    z-index: -1;
}
/* End About Section */

/* Drive Section */
#dojazd .dojazd {
    flex-direction: column;
    margin: 0 auto;
}
.mapa-mala {
    display: block;
}
.mapa-srednia {
    display: none;
}
.mapa-duza {
    display: none;
}
/* End Dojazd Section */

/* Footer Section */
#footer {
    background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
}
#footer .footer {
    min-height: 200px;
    flex-direction: column;
    padding-top: 10px;
    padding-bottom: 10px;
}
#footer h1 span {
    font-weight: 500;
}
#footer h2 {
    color: white;
    font-weight: 500;
    font-size: 1.8rem;
    letter-spacing: .1rem;
    margin-top: 10px;
    margin-bottom: 10px;
}
/* End Footer Section */

/* Keyframes */
@keyframes text_reveal_box {
    50% {
        width: 100%;
        left: 0;
    }

    100% {
        width: 0;
        left: 100%;
    }
}
@keyframes text_reveal {
    100% {
        color: white;
    }
}
@keyframes text_reveal2 {
    100% {
        color: #FF1600;
    }
}
@keyframes box_reveal {
    100% {
        border-radius: 15px;
        display: inline-block;
        padding-bottom: 20px;
        transition: all 3000ms cubic-bezier(.23, 1, 0.32, 1);
        box-shadow: black 0 8px 15px;
        background: rgba(0,0,0,0.6);
        
    }
}
/* End Keyframes */

/* Media Query For Tablet */
@media only screen and (min-width: 768px) {
    h1.section-title {
        font-size: 6rem;
    }
    /* Home */
    #home h1 {
        font-size: 6rem;
    }
    #home .button {
        font-size: 4rem;
        margin-top: 70px;
    }
    #home .home {
        flex-direction: row;
    }
    #home .home-right p {
        font-size: 2rem;
        line-height: 50px;
    }
    /* End Home */

    /* Opony */
    #opony .opony-item {
        flex-direction: row;
    }
    #opony .opony-item:nth-child(even) {
        flex-direction: row-reverse;
    }
    #opony .opony-item {
        height: 400px;
        margin: 0;
        width: 100%;
        border-radius: 0;
    }
    #opony .wszystkie-opony .opony-info {
        height: 100%;
    }
    #opony .opony-info h2 {
        margin-left: 20px;
    }
    #opony .opony-info p {
        margin-left: 40px;
        text-align: left;
    }
    #opony .opis-towaru {
        width: 70%;
    }
    #opony .cena-towaru {
        width: 30%;
    }
    #opony .wszystkie-opony .opony-img {
        height: 100%;
    }
    /* End opony */

    /* Services Section */
    #services .service-bottom .service-item {
        flex-basis: 45%;
        margin: 2.5%;
        min-height: 250px;
    }
    /* End Services Section */

    /* About */
    #about .about {
        flex-direction: row;
    }
    #about .col-left {
        width: 600px;
        height: 400px;
        padding-left: 60px;
    }
    #about .about .col-left .about-img::after {
        left: -45px;
        top: 34px;
        height: 98%;
        width: 98%;
        border: 10px solid #FF1600;
    }
    #about .col-right {
        text-align: left;
        padding: 30px;
    }
    #about .col-right h1 {
        text-align: left;
    }
    /* End About */

    /* hours */
    #hours .hours {
        flex-direction: column;
        padding: 100px 0;
        align-items: center;
        justify-content: center;
        min-width: 20vh;
    }
    #hours .hours-items {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        margin: 0;
        margin-top: 100px;
    }
    #hours .hours-item {
        width: 70%;
        margin: 0;
        margin-top: 10px;
        flex-direction: row;
    }
    /* End hours */

    /* contact  */
    #contact .contact {
        flex-direction: column;
        padding: 100px 0;
        align-items: center;
        justify-content: center;
        min-width: 20vh;
    }
    #contact .contact-items {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        margin: 0;
        margin-top: 100px;
    }
    #contact .contact-item {
        width: 30%;
        margin: 0;
        flex-direction: row;
        min-width: 300px;
    }
    #contact .contact-item .icon {
        height: 100px;
        width: 100px;
    }
    #contact .contact-item .icon img {
        object-fit: contain;
    }
    #contact .contact-item .contact-info {
        width: 100%;
        text-align: left;
        padding-left: 20px;
    }
    /* End contact  */

    /* Drive Section */
    .mapa-mala {
        display: none;
    }
    .mapa-srednia {
        display: block;
    }
    .mapa-duza {
        display: none;
    }
    /* End Dojazd Section */
}  
/* End Media Query For Tablet */

/* Media Query For Desktop */
@media only screen and (min-width: 1200px) {
    /* header */
    #header .hamburger {
        display: none;
    }
    #header .nav-list ul {
        position: initial;
        display: block;
        height: auto;
        width: fit-content;
        background-color: transparent;
    }
    #header .nav-list ul li {
        display: inline-block;
    }
    #header .nav-list ul li a {
        font-size: 1.8rem;
    }
    #header .nav-list ul a:after {
        display: none;
    }
    /* End header */

    /* Home */
    #home .home {
        flex-direction: row;
    }
    #home .home-right p {
        font-size: 3rem;
    }
    /* End Home*/
    
    /* Services */
    #services .service-bottom .service-item {
        flex-basis: 22%;
        margin: 1.5%;
    }
    /* End Services */

    /* hours */
    #hours .hours-item {
        width: 50%;
    }
    /* End hours */

    /* Contact */
    #contact .contact {
        margin-top: 10px;
    }
    /* End Contact */

    /* Drive Section */
    .mapa-mala {
        display: none;
    }
    .mapa-srednia {
        display: none;
    }
    .mapa-duza {
        display: block;
    }
    /* End Dojazd Section */
}
/* End  Media Query For Desktop */