/********** Szablon CSS **********/
:root {
    --primary: #0da165; /* główny kolor */
    --secondary: #FAF3EB; /* kolor drugorzędny */
    --light: #FFFFFF; /* kolor jasny */
    --dark: #2B2825; /* kolor ciemny */
    --background-dark: #333; /* kolor tła ciemnego */
}

.font-secondary {
    font-family: 'Pacifico', cursive; /* rodzina fontów 'Pacifico' kursywa */
}

h1,
h2,
.font-weight-bold {
    font-weight: 700 !important; /* grubość czcionki 700 */
}

h3,
h4,
.font-weight-semi-bold {
    font-weight: 600 !important; /* grubość czcionki 600 */
}

h5,
h6,
.font-weight-medium {
    font-weight: 500 !important; /* grubość czcionki 500 */
}

.btn {
    font-family: 'Oswald', sans-serif; /* rodzina fontów 'Oswald' bezszeryfowa */
    font-weight: 600; /* grubość czcionki 600 */
    transition: .5s; /* czas przejścia 0.5 sekundy */
}

.btn-primary {
    color: #FFFFFF; /* kolor tekstu biały */
}

.border-inner {
    position: relative; /* pozycja względna */
}

.border-inner * {
    position: relative; /* pozycja względna */
    z-index: 1; /* z-index 1 */
}

.border-inner::before {
    position: absolute; /* pozycja absolutna */
    content: ""; /* brak treści */
    top: 10px; /* odstęp od góry 10px */
    right: 10px; /* odstęp od prawej 10px */
    bottom: 10px; /* odstęp od dołu 10px */
    left: 10px; /* odstęp od lewej 10px */
    background: none; /* brak tła */
    border: 1px solid var(--light); /* obramowanie 1px koloru jasnego */
    z-index: 0; /* z-index 0 */
}

.btn-square {
    width: 40px; /* szerokość 40px */
    height: 40px; /* wysokość 40px */
}

.btn-sm-square {
    width: 30px; /* szerokość 30px */
    height: 30px; /* wysokość 30px */
}

.btn-lg-square {
    width: 50px; /* szerokość 50px */
    height: 50px; /* wysokość 50px */
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding-left: 0; /* odstęp wewnętrzny z lewej 0 */
    padding-right: 0; /* odstęp wewnętrzny z prawej 0 */
    text-align: center; /* wyrównanie tekstu do środka */
}

.back-to-top {
    position: fixed; /* pozycja stała */
    display: none; /* brak wyświetlania */
    right: 30px; /* odstęp od prawej 30px */
    bottom: 0; /* odstęp od dołu 0 */
    border-radius: 0; /* brak zaokrąglenia */
    z-index: 99; /* z-index 99 */
}

.navbar-dark .navbar-nav .nav-link {
    font-family: 'Oswald', sans-serif; /* rodzina fontów 'Oswald' bezszeryfowa */
    padding: 30px 15px; /* odstęp wewnętrzny 30px od góry i dołu, 15px od lewej i prawej */
    font-size: 18px; /* rozmiar czcionki 18px */
    font-weight: 500; /* grubość czcionki 500 */
    text-transform: uppercase; /* tekst wielkimi literami */
    color: var(--light); /* kolor tekstu jasny */
    outline: none; /* brak obramowania */
    transition: .5s; /* czas przejścia 0.5 sekundy */
}

.sticky-top.navbar-dark .navbar-nav .nav-link {
    padding: 20px 15px; /* odstęp wewnętrzny 20px od góry i dołu, 15px od lewej i prawej */
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--primary); /* kolor tekstu główny przy najechaniu lub aktywacji */
}

@media (max-width: 991.98px) {
    .navbar-dark .navbar-nav .nav-link  {
        padding: 10px 0; /* odstęp wewnętrzny 10px od góry i dołu, 0 od lewej i prawej */
    }
}

.hero-header {
    background: url(../img/hero.jpg) top right no-repeat; /* tło z obrazem hero.jpg, wyrównane do góry prawej, bez powtarzania */
    background-size: cover; /* tło pokrywające cały element */
}

.btn-play {
    position: relative; /* pozycja względna */
    display: block; /* wyświetlanie jako blok */
    box-sizing: content-box; /* rozmiar ramki zależny od zawartości */
    width: 16px; /* szerokość 16px */
    height: 26px; /* wysokość 26px */
    border-radius: 100%; /* zaokrąglenie do 100% */
    border: none; /* brak obramowania */
    outline: none !important; /* brak obramowania */
    padding: 18px 20px 20px 28px; /* odstęp wewnętrzny */
    background: #FFFFFF; /* kolor tła biały */
}

.btn-play:before {
    content: ""; /* brak treści */
    position: absolute; /* pozycja absolutna */
    z-index: 0; /* z-index 0 */
    left: 50%; /* pozycja od lewej 50% */
    top: 50%; /* pozycja od góry 50% */
    transform: translateX(-50%) translateY(-50%); /* przesunięcie o 50% w osi X i Y */
    display: block; /* wyświetlanie jako blok */
    width: 60px; /* szerokość 60px */
    height: 60px; /* wysokość 60px */
    background: #FFFFFF; /* kolor tła biały */
    border-radius: 100%; /* zaokrąglenie do 100% */
    animation: pulse-border 1500ms ease-out infinite; /* animacja pulsująca */
}

.btn-play:after {
    content: ""; /* brak treści */
    position: absolute; /* pozycja absolutna */
    z-index: 1; /* z-index 1 */
    left: 50%; /* pozycja od lewej 50% */
    top: 50%; /* pozycja od góry 50% */
    transform: translateX(-50%) translateY(-50%); /* przesunięcie o 50% w osi X i Y */
    display: block; /* wyświetlanie jako blok */
    width: 60px; /* szerokość 60px */
    height: 60px; /* wysokość 60px */
    background: #FFFFFF; /* kolor tła biały */
    border-radius: 100%; /* zaokrąglenie do 100% */
    transition: all 200ms; /* czas przejścia 200ms */
}

.btn-play span {
    display: block; /* wyświetlanie jako blok */
    position: relative; /* pozycja względna */
    z-index: 3; /* z-index 3 */
    width: 0; /* szerokość 0 */
    height: 0; /* wysokość 0 */
    left: -1px; /* pozycja od lewej -1px */
    border-left: 16px solid var(--primary); /* lewy brzeg jako 16px solid główny kolor */
    border-top: 11px solid transparent; /* górny brzeg jako 11px solid przezroczysty */
    border-bottom: 11px solid transparent; /* dolny brzeg jako 11px solid przezroczysty */
}

@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); /* początkowe przesunięcie i skalowanie */
        opacity: 1; /* przezroczystość 1 */
    }

    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(2); /* końcowe przesunięcie i skalowanie */
        opacity: 0; /* przezroczystość 0 */
    }
}

#videoModal .modal-dialog {
    position: relative; /* pozycja względna */
    max-width: 800px; /* maksymalna szerokość 800px */
    margin: 60px auto 0 auto; /* marginesy 60px od góry, auto po bokach, 0 od dołu */
}

#videoModal .modal-body {
    position: relative; /* pozycja względna */
    padding: 0px; /* brak odstępu wewnętrznego */
}

#videoModal .close {
    position: absolute; /* pozycja absolutna */
    width: 30px; /* szerokość 30px */
    height: 30px; /* wysokość 30px */
    right: 0px; /* odstęp od prawej 0px */
    top: -30px; /* odstęp od góry -30px */
    z-index: 999; /* z-index 999 */
    font-size: 30px; /* rozmiar czcionki 30px */
    font-weight: normal; /* normalna grubość czcionki */
    color: #FFFFFF; /* kolor tekstu biały */
    background: #000000; /* kolor tła czarny */
    opacity: 1; /* przezroczystość 1 */
}

.section-title::before {
    position: absolute; /* pozycja absolutna */
    content: ""; /* brak treści */
    width: 60px; /* szerokość 60px */
    height: 10px; /* wysokość 10px */
    left: 50%; /* pozycja od lewej 50% */
    bottom: 0; /* pozycja od dołu 0 */
    margin-left: -30px; /* margines z lewej -30px */
    background: var(--primary); /* kolor tła główny */
}

.section-title::after {
    position: absolute; /* pozycja absolutna */
    content: ""; /* brak treści */
    width: 180px; /* szerokość 180px */
    height: 2px; /* wysokość 2px */
    left: 50%; /* pozycja od lewej 50% */
    bottom: 4px; /* pozycja od dołu 4px */
    margin-left: -90px; /* margines z lewej -90px */
    background: var(--primary); /* kolor tła główny */
}

.service::after,
.contact::after {
    position: absolute; /* pozycja absolutna */
    content: ""; /* brak treści */
    width: 100%; /* szerokość 100% */
    height: calc(100% - 45px); /* wysokość 100% minus 45px */
    top: 135px; /* pozycja od góry 135px */
    left: 0; /* pozycja od lewej 0 */
    background: linear-gradient(rgba(43, 40, 37, .9), rgba(43, 40, 37, .9)), url(../img/service.jpg) center center no-repeat; /* gradient liniowy i obraz tła */
    background-size: cover; /* tło pokrywające cały element */
    z-index: -1; /* z-index -1 */
}

.contact::after {
    background: linear-gradient(rgba(43, 40, 37, .5), rgba(43, 40, 37, .5)), url(../img/bg.jpg) center center no-repeat; /* gradient liniowy i obraz tła */
    background-size: cover; /* tło pokrywające cały element */
}

.bg-offer {
    background: linear-gradient(rgba(43, 40, 37, .9), rgba(43, 40, 37, .9)), url(../img/offer.jpg) center center no-repeat; /* gradient liniowy i obraz tła */
    background-size: cover; /* tło pokrywające cały element */
}

.team-item img {
    transition: .5s; /* czas przejścia 0.5 sekundy */
}

.team-item:hover img {
    transform: scale(1.1); /* skalowanie 1.1 */
    filter: blur(5px); /* rozmycie 5px */
}

.team-item .team-overlay {
    transition: .5s; /* czas przejścia 0.5 sekundy */
    opacity: 0; /* przezroczystość 0 */
}

.team-item:hover .team-overlay {
    opacity: 1; /* przezroczystość 1 */
}

.testimonial-carousel .owl-dots {
    height: 45px; /* wysokość 45px */
    margin-top: 30px; /* margines od góry 30px */
    display: flex; /* wyświetlanie jako flex */
    align-items: flex-end; /* wyrównanie elementów do końca */
    justify-content: center; /* wyrównanie do środka */
}

.testimonial-carousel .owl-dot {
    position: relative; /* pozycja względna */
    display: inline-block; /* wyświetlanie jako inline-block */
    margin: 0 2px; /* marginesy 0 od góry i dołu, 2px od lewej i prawej */
    width: 10px; /* szerokość 10px */
    height: 25px; /* wysokość 25px */
    background: #DDDDDD; /* kolor tła szary */
    transition: .5s; /* czas przejścia 0.5 sekundy */
}

.testimonial-carousel .owl-dot.active {
    height: 45px; /* wysokość 45px */
    background: var(--primary); /* kolor tła główny */
}

.testimonial-carousel .owl-item .testimonial-item {
    opacity: .1; /* przezroczystość 0.1 */
    transition: .5s; /* czas przejścia 0.5 sekundy */
}

.testimonial-carousel .owl-item.center .testimonial-item {
    opacity: 1; /* przezroczystość 1 */
}

.bg-img {
    background: linear-gradient(rgba(43, 40, 37, .5), rgba(43, 40, 37, .5)), url(../img/bg.jpg) center center no-repeat; /* gradient liniowy i obraz tła */
    background-size: cover; /* tło pokrywające cały element */
}

/* Dodanie ciemnego tła */
body {
    background-color: var(--background-dark); /* kolor tła ciemny */
}
/* Tło okna modalnego i styl przycisku zamknięcia */
.modal-content {
    background-color: #000; /* Czarny kolor tła */
}

.modal-header {
    border-bottom: 1px solid #444; /* Ciemnoszary pasek oddzielający nagłówek */
}

.modal-title {
    color: #fff; /* Biały kolor tytułu */
}

.btn-close-white {
    filter: invert(1); /* Biały przycisk zamknięcia */
}

/* Wyśrodkowanie zawartości */
.text-center {
    text-align: center;
}