/*CSS CANAL+*/

/* Ogólny styl elementów */
* {
    box-sizing: border-box;
}

html, body {
    max-width: 100%; /* Zapobieganie przewijaniu w poziomie */
    overflow-x: hidden;
    background-color: #232323; /* Kolor tła */
}

body {
    color: #040000; /*Kolor czcionki*/
    margin: 0; /* Margines wewnętrzny*/
    padding: 0; /* Margines */
}

/* Style dotyczące rozmieszczenia i marginesów */
.layout_padding {
    padding-top: 120px; /* Margines górny */
    padding-bottom: 120px; /* Margines dolny */
}

.layout_padding2 {
    padding: 45px 0; /* Margines górny */
}

.layout_padding2-top {
    padding-top: 45px; /* Margines dolny */
}

.layout_padding2-bottom {
    padding-bottom: 45px; /* Margines dolny */
}

.layout_padding-top {
    padding-top: 120px; /* Margines górny */
}

.layout_padding-bottom {
    padding-bottom: 120px; /* Margines dolny */
}

.heading_container p {
    margin-bottom: 0;
}

h1, h2 {
    font-family: 'CanalBoldItalic', sans-serif; /*czcionka dla nagłówków (h1,h2)*/
}

a,
a:hover,
a:focus {
    text-decoration: none;
    font-family: 'CanalLightRoman', sans-serif; /*czcionka dla linków (a)*/
}

p {
    font-family: 'CanalLightRoman', sans-serif; /*czcionka dla paragrafów (p)*/
}

/*Sekcja nagłówka*/
.main_area {
    position: relative; /* Ustawia pozycjonowanie kontenera na relative */
    background-color: #232323; /* Kolor tła */
}

/* Sekcja nagłówka strony */
.header_section {
    position: fixed; /* Nagłówek jest stały podczas przewijania */
    top: 0; /* Nagłówek jest ustawiony przy górnej krawędzi strony */
    left: 0; /* Nagłówek jest ustawiony przy lewej krawędzi strony */
    right: 0; /* Nagłówek jest ustawiony przy prawej krawędzi strony */
    z-index: 1000; /* Priorytet wyświetlania nagłówka */
    width: 100%; /* Nagłówek zajmuje całą szerokość */
}

.header_section .container-fluid{
    padding-right: 25px; /* Margines prawy */
    padding-left: 25px; /* Margines lewy */
}

/* Logo i nawigacja w nagłówku */
    .header_section .header_main {
        padding: 15px 0; /* Wewnętrzne marginesy góra-dół */
        background-color: #000000; /* Kolor Tła*/
}

.header_section .header_main .logo_nav {
        display: -webkit-box; /* Ustawienie flexbox dla kontenera */
        display: -ms-flexbox;/* Ustawienie flexbox dla kontenera */
        display: flex;/* Ustawienie flexbox dla kontenera */
        -webkit-box-pack: justify; /* Rozstawienie elementów kontenera */
            -ms-flex-pack: justify;/* Rozstawienie elementów kontenera */
                justify-content: space-between;/* Rozstawienie elementów na dwie strony kontenera */
}

.header_section .header_main .logo_nav a img-box {
        width: 100%; /* Ustawia szerokość obrazka na 100% */
}

.navbar-brand {
    margin: 0; /* Brak marginesu zewnętrznego */
    color: #ffffff; /* Kolor tekstu */
    font-weight: bold; /* Pogrubienie czcionki */
    font-size: 24px; /* Rozmiar czcionki */
}

.custom_nav-container {
    padding: 10px; /* Wewnętrzne marginesy */
}

.custom_nav-container .navbar-nav .nav-item .nav-link {
  padding: 10px 25px; /* Wewnętrzne marginesy w poziomie i pionie */
  color: #ffffff; /* Kolor tekstu */
  text-align: left;
}

.custom_nav-container .navbar-nav .nav-item:hover .nav-link, .custom_nav-container .navbar-nav .nav-item.active .nav-link {
  color: #ee4a65; /* Kolor tekstu po najechaniu */
}

.custom_nav-container .form-inline .nav_search-btn {
   width: 35px; /* Szerokość przycisku */
    height: 35px; /* Wysokość przycisku */
    padding: 0; /* Brak wypełnienia wewnętrznego */
    border: none; /* Brak ramki przycisku */
    color: #000000; /* Kolor tekstu*/
}

.custom_nav-container .form-inline .nav_search-btn:hover {
  color: #ee4a65; /* Kolor tekstu po najechaniu */
}

.custom_nav-container .navbar-nav {
  margin-left: auto; /* Automatyczne marginesy lewy */
}

.custom_nav-container .navbar-toggler {
  padding: 0; /* Brak wewnętrznego marginesu */
  width: 37px; /* Szerokość przycisku */
  height: 42px; /* Wysokość przycisku */
  -webkit-transition: all .3s; /* Płynne przejście dla przestarzałych wersji przeglądarek */
  transition: all .3s; /* Płynne przejście dla właściwości CSS */
  outline: none; /* Usunięcie konturu po kliknięciu */
}

.custom_nav-container .navbar-toggler span {
  display: block; /* Ustawienie span na element blokowy */
  width: 35px; /* Szerokość linii */
  height: 4px; /* Wysokość linii */
  background-color: #ffffff; /* Kolor linii */
  margin: 7px 0; /* Odstęp pomiędzy liniami */
  -webkit-transition: all 0.3s; /* Płynne przejście */
  transition: all 0.3s; /* Płynne przejście */
  position: relative; /* Ustawienie pozycji na relative, aby elementy wewnętrzne mogły być pozycjonowane absolutnie */
  border-radius: 5px; /* Zaokrąglenie rogów linii */
}

/*Menu animacja*/
.custom_nav-container .navbar-toggler span::before, .custom_nav-container .navbar-toggler span::after {
  content: ""; /* Dodanie pustych pseudoelementów */
  position: absolute; /* Pozycjonowanie absolutne wewnątrz przycisku */
  left: 0; /* Ustawienie pozycji na lewej krawędzi */
  height: 100%; /* Wysokość na 100% dla pseudoelementu */
  width: 100%; /* Szerokość na 100% */
  background-color: #ffffff; /* Kolor białego tła dla pseudoelementów */
  top: -10px; /* Ustawienie pseudoelementu przed linią */
  border-radius: 5px; /* Zaokrąglenie rogów */
  -webkit-transition: all .3s; /* Płynne przejście */
  transition: all .3s; /* Płynne przejście */
}

.custom_nav-container .navbar-toggler span::after {
  top: 10px; /* Ustawienie pseudoelementu po linii */
}

.custom_nav-container .navbar-toggler[aria-expanded="true"] {
 -webkit-transform: rotate(360deg); /* Obrót przycisku o 360 stopni */
          transform: rotate(360deg); /* Obrót przycisku o 360 stopni */
}

.custom_nav-container .navbar-toggler[aria-expanded="true"] span {
  -webkit-transform: rotate(45deg); /* Obrót pojedynczej linii o 45 stopni */
          transform: rotate(45deg); /* Obrót pojedynczej linii o 45 stopni */
}

.custom_nav-container .navbar-toggler[aria-expanded="true"] span::before, .custom_nav-container .navbar-toggler[aria-expanded="true"] span::after {
  -webkit-transform: rotate(90deg); /* Obrót pseudoelementów o 90 stopni */
          transform: rotate(90deg); /* Obrót pseudoelementów o 90 stopni */
  top: 0; /* Ustawienie pseudoelementów na samej górze */
}

.custom_nav-container .navbar-toggler[aria-expanded="true"] .s-1 {
  -webkit-transform: rotate(45deg); /* Obrót pojedynczej linii o 45 stopni */
          transform: rotate(45deg); /* Obrót pojedynczej linii o 45 stopni */
  margin: 0;
  margin-bottom: -4px; /* Przesunięcie pierwszej linii w dół */
}

.custom_nav-container .navbar-toggler[aria-expanded="true"] .s-2 {
  display: none; /* Ukrycie środkowej linii */
}

.custom_nav-container .navbar-toggler[aria-expanded="true"] .s-3 {
  -webkit-transform: rotate(-45deg); /* Obrót trzeciej linii o -45 stopni */
          transform: rotate(-45deg); /* Obrót trzeciej linii o -45 stopni */
  margin: 0;
  margin-top: -4px; /* Przesunięcie trzeciej linii w górę */
}

.custom_nav-container .navbar-toggler[aria-expanded="false"] .s-1,
.custom_nav-container .navbar-toggler[aria-expanded="false"] .s-2,
.custom_nav-container .navbar-toggler[aria-expanded="false"] .s-3 {
  -webkit-transform: none; /* Brak obrotu */
          transform: none; /* Brak obrotu */
}
/*Menu animacja koniec*/

.quote_btn-container {
  display: -webkit-box; /* Ustawienie flexbox dla kontenera */
        display: -ms-flexbox; /* Ustawienie flexbox dla kontenera */
        display: flex; /* Ustawienie flexbox dla kontenera */
  -webkit-box-align: center; /* Wyrównanie elementów w pionie na środku */
    -ms-flex-align: center; /* Wyrównanie elementów w pionie na środku */
        align-items: center; /* Wyrównanie elementów w pionie na środku */
}

.quote_btn-container a {
  color: #ffffff; /* Kolor czcionki*/
  margin-right: 25px; /* Margines z prawej */
  text-transform: uppercase; /* Zmiana tekstu na wielkie litery */
}

.quote_btn-container a span {
  margin-left: 5px; /* Margines zewnętrzny z lewej */
}

.quote_btn-container a:hover {
  color: #ff8a1d; /* Kolor czcionki po najechaniu */
}

/*Koniec Sekcji nagłówka*/

/*Sekcja Witamy - slider*/

.slider_section {
    -webkit-box-flex: 1; /* Zajmuje całą dostępną przestrzeń */
    -ms-flex: 1; /* Zajmuje całą dostępną przestrzeń */
    flex: 1; /* Zajmuje całą dostępną przestrzeń */
    display: -webkit-box; /* Ustawienie układu flex */
    display: -ms-flexbox; /* Ustawienie układu flex */
    display: flex; /* Ustawienie układu flex */
    -webkit-box-align: center; /* Wyrównanie elementów w pionie*/
    -ms-flex-align: center; /* Wyrównanie elementów w pionie*/
    align-items: center; /* Wyrównanie elementów w pionie w kontenerze*/
    background-size: cover; /* Dopasowanie tła do rozmiarów sekcji */
    background-position: bottom; /* Ustawienie tła na dole kontenera */
    margin-top: 90px; /* Odstęp od góry strony */
    padding-top: 20px; /* Wewnętrzny margines od góry */
}

    .slider_section .row {
        -webkit-box-align: center; /* Wyrównanie elementów w pionie*/
        -ms-flex-align: center; /* Wyrównanie elementów w pionie*/
        align-items: center; /* Wyrównanie elementów w pionie w elastycznym kontenerze */
    }

.slider_section #customCarousel1 {
  width: 100%; /* Zajmuje całą dostępną przestrzeń */
  position: unset; /* Usuwa jakiekolwiek domyślne ustawienie pozycji */
}

.slider_section .detail-box {
  padding-bottom: 90px; /* Wewnętrzny margines dolny */
}

.slider_section .detail-box h1 {
    display: block; /* Ustawienie nagłówka na element blokowy */
    font-weight: bold; /* Pogrubienie czcionki nagłówka */
    margin-bottom: 25px; /* Dodanie przestrzeni poniżej nagłówka */
    color: #ffffff; /* Kolor tekstu nagłówka */
}

.slider_section .detail-box p {
  color: #ffffff; /* Kolor tekstu */
  font-size: 15px; /* Rozmiar czcionki */
}

.slider_section .detail-box ul{
  color: #ffffff; /* Kolor tekstu */
  font-size: 15px;/* Rozmiar czcionki */
  font-family: 'CanalLightRoman', sans-serif; /* Czcionka */
}

.slider_section .img-box {
  padding-top: 20px;/* Wewnętrzny margines od góry */
  position: relative;/* Pozycji kontenera na relative*/
  width: 100%; /* Szerokość kontenera ustawiona na 100% */
  height: auto; /* Wysokość jest dostosowywana automatycznie w zależności od szerokości */
  overflow: hidden; /* Ukrywanie nadmiaru zawartości */
  text-align: center;/* Wyrównanie tekstu i obrazów na środku */
}

.slider_section .img-box #mainImage {
    width: 100%; /* Szerokość obrazu ustawiona na 100% */
    height: auto; /* Wysokość obrazu dostosowana do szerokości */
    opacity: 1; /* Obraz ma pełną widoczność */
    transition: opacity 0.5s ease-in-out; /* Płynne przejście przez 0.5 sekundy dla zmiany przezroczystości obrazu */
}

.slider_section .img-box #mainImage.fade-out {
    opacity: 0; /* Ustawienie przezroczystości na 0*/
}

.slider_section .img-box #mainImage.fade-in {
    opacity: 1; /* Ustawienie przezroczystości na 1 (pełna widoczność)*/ 
}

/* Koniec Sekcji Witamy - slider*/
        /* Sekcja Oferty - feature*/

        .feature_section {
    background-color: #000000; /* Tło sekcji */
    padding: 40px; /* Wewnętrzne marginesy dla sekcji */
    scroll-margin-top: 90px; /* Przestrzeń przed sekcją przy przewijaniu */
}

.feature_section:before {
    content: ""; /* Pusty pseudoelement */
    display: block; /* Ustawienie pseudoelementu jako element blokowy */
    height: 90px; /* Wysokość pseudoelementu */
    margin-top: -90px; /* Przesunięcie pseudoelementu w górę, powodując efekt przesunięcia */
}

.feature_section h1{
    color: #ffffff; /* Kolor tekstu nagłówka */
    text-transform: uppercase; /* Tekst wielkimi literami */
    font-weight: bold; /* Pogrubienie tekstu */
}

.feature_section .feature_container{
    display: grid; /* Ustawienie układu kontenera na siatkę */
    grid-template-columns: repeat(5, 1fr); /* Tworzy siatkę z 5 równych kolumn */
    grid-gap: 20px; /* Odstęp między elementami w siatce */
    max-width: 100%; /* Kontener zajmuje pełną szerokość */
    margin: 0 auto; /* Centrowanie kontenera */
}

.feature_section .feature_container .box {
background-color: #232323; /* Tło dla każdego kontenera oferty */
    color: #ffffff; /* Kolor tekstu */
    text-align: center; /* Wyśrodkowanie tekstu wewnątrz kontenera */
    padding: 30px; /* Wewnętrzne marginesy dla kontenera */
    display: flex; /* Ustawienie kontenera jako elastyczny */
    flex-direction: column; /* Układ elementów w kolumnie */
    align-items: center; /* Wyrównanie elementów w pionie */
    transition: all 0.3s; /* Płynne przejście dla wszystkich właściwości */
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2); /* Cień wokół kontenera */
}

.feature_section .feature_container .box .img-box {
    width: 50px; /* Szerokość kontenera ikony */
    height: 50px; /* Wysokość kontenera ikony */
    margin-bottom: 10px; /* Odstęp poniżej kontenera */
}

.feature_section .feature_container .box .img-box svg {
    width: 100%; /* Obrazek SVG wypełnia całą szerokość kontenera */
    height: auto; /* Wysokość jest automatycznie dopasowywana do proporcji */
    max-height: 100%; /* Maksymalna wysokość obrazka to 100% wysokości kontenera */
    fill: #ffffff; /* Kolor wypełnienia ikony */
    transition: all 0.3s; /* Efekt przejścia dla wszystkich właściwości w czasie 0.3 sekundy */
}

.feature_section .feature_container .box .img-box svg path {
        fill: #ffffff; /* Kolor wypełnienia ścieżek SVG */
}

    .feature_section .feature_container .box .name {
        margin-top: 15px; /* Odstęp od góry */
        font-family: 'CanalLightRoman', sans-serif; /* Czcionka dla tekstu */
        font-size: 12px; /* Rozmiar czcionki */
        text-transform: uppercase; /* Tekst wielkie litery */
        letter-spacing: 1px; /* Odstępy między literami */
    }

.feature_section .feature_container .box:hover .img-box svg, .feature_section .feature_container .box.active .img-box svg {
        fill: #ffffff; /* Kolor wypełnienia ścieżek SVG po najechaniu*/
}
/*Koniec Sekcji Oferty - feature*/


/*Sekcja Promocje - promotion */
.promotion_section {
    background-color: #000000; /* Kolor tła sekcji promocji */
    padding: 40px; /* Marginesy wewnętrzne sekcji */
}


.promotion_section .heading_container h1 {
    text-transform: uppercase; /* Tekst wielkimi literami */
    font-weight: bold; /* Pogrubienie czcionki */
    color: #ffffff; /* Kolor tekstu biały */
    font-size: 36px; /* Rozmiar czcionki */
}

.promotion_section .row {
    display: grid; /* Ustawienie układu siatki */
    grid-template-columns: repeat(3, 1fr); /* 3 kolumny o równych szerokościach */
    grid-gap: 20px;  /* Odstęp między elementami siatki 20px */
    margin-top: 20px; /* Margines górny */
}

.promotion_section .img-box {
    margin: 0; /* Brak marginesu wokół kontenera */
    padding: 0; /* Brak wypełnienia kontenera */
    width: 95%; /* Szerokość kontenera obrazu wynosi 95% */
}

.promotion_section .row > div {
    padding: 0; /* Brak wypełnienia dla każdego elementu w siatce */
    margin: 0; /* Brak marginesu wokół każdego elementu */
    flex-grow: 1; /* Elementy mogą się proporcjonalnie rozszerzać */
}

.promotion_section .img-box img {
    width: 95%; /* Obrazy zajmują 95% szerokości kontenera */
    display: block; /* Blokowy sposób wyświetlania obrazów (bez odstępów) */
}
/*Koniec Sekcji Promocje - promotion */

/*Sekcja Nasze Salony - about */

.about_section {
    background-color: #000000; /*Kolor tła sekcji*/
    padding: 20px 0; /* Wewnętrzne marginesy sekcji */
}

.about_section .heading_container h1{
  text-transform: uppercase; /* Tekst wielkimi literami */
    font-weight: bold; /* Pogrubienie tekstu */
    color: #ffffff; /* Kolor tekstu */
    font-size: 36px; /* Rozmiar czcionki */
}

.about_section .row {
    display: flex; /* Ustawienie układu flex */
    flex-direction: row; /* Elementy w wierszu */
    align-items: center; /* Wyrównanie elementów w pionie */
    padding-top: 40px; /* Przestrzeń powyżej wiersza */
}

.about_section .box_salon{
    background-color: #232323; /* Tło kontenera */
    padding: 20px; /* Wewnętrzne marginesy kontenera */
    scroll-margin-top: 90px; /* Przestrzeń do przewijania */
    display: flex; /* Układ flex dla elementów w kontenerze */
    flex-direction: row; /* Rozmieszczenie elementów w wierszu */
    align-items: center; /* Wyrównanie elementów w pionie */
}

    .about_section .box_salon:before {
        content: ""; /* Dodaje pustą zawartość przed elementem */
        display: block; /* Ustawia pseudoelement jako blok, co oznacza, że zajmuje całą szerokość dostępnego miejsca */
        height: 90px; /* Określa wysokość pseudoelementu na 90px */
        margin-top: -90px; /* Przesuwa pseudoelement o 90px w górę, co powoduje, że "przykrywa" część elementu .box_salon */
    }

.about_section .detail-box {
    flex: 1; /* Zajmuje całą dostępną przestrzeń */
}

.about_section .detail-box h2 {
    text-transform: uppercase; /* Tekst wielkimi literami */
    font-weight: bold; /* Pogrubienie tekstu */
    color: #ffffff; /* Kolor tekstu */
    font-size: 20px; /* Rozmiar czcionki */
}

.about_section .detail-box span {
    margin-top: 10px; /* Odstęp górny */
    color: #ffffff; /* Kolor tekstu */
    display: inline-block; /* Wyświetlanie elementów span obok siebie */
    margin-left: 5px; /* Odstęp z lewej strony */
}

.about_section .detail-box .location span {
    padding-left: 2px; /* Lewy margines*/
}

.about_section .detail-box .mobile span{
    padding-left: 2px; /* Lewy margines*/
}

.about_section .detail-box .open svg {
    display: inline-block; /* Wyświetlanie elementów obok siebie */
    margin-left: 5px; /* Odstęp z lewej strony */
}

.about_section .detail-box .open span {
    padding-left: 8px; /* Lewy margines*/
    font-family: 'CanalLightRoman', sans-serif; /* Czcionka */
}

.about_section .detail-box .hours span {
    display: flex; /* Ustawienie układu flex */
    justify-content: space-between; /* Rozstawienie elementów z przestrzenią między nimi */
    padding-left: 25px; /* Lewy margines*/
    font-family: 'CanalLightRoman', sans-serif; /* Czcionka */
}

.about_section .detail-box a {
    margin-top: 15px; /* Odstęp górny */
        display: inline-block; /* Wyświetlanie linku obok innych elementów */
        text-transform: uppercase; /* Tekst wielkimi literami */
        padding: 10px 30px; /* Wewnętrzne marginesy przycisku */
        color: #ee4a65; /* Kolor różowy */
    }

.about_section .detail-box a:hover {
  color: #a30d2b; /* Zmiana koloru przy najechaniu */
}

.about_section .box_salon .img-box {
    flex: 0 0 300px; /* Określa szerokość obrazu na 300px */
    margin-left: 20px; /* Odstęp od lewej strony */
    margin: 12px 0 12px 0; /* Odstępy góra-dół */
}


.about_section .box_salon .img-box img{
    width: 100%; /* Obraz wypełnia całą szerokość kontenera */
    display: block; /* Blokowy sposób wyświetlania obrazu */
}

/* Koniec Sekcji Nasze Salony - about */

/*Sekcja Rezerwacje - reservation */

.reservation_section {
    background-color: #000000; /* Tło sekcji */
    padding: 40px 0; /* Pionowe marginesy wewnętrzne */
}

.reservation_section .container {
    background-color: #232323; /* Tło dla kontenera */
    padding: 30px; /* Wewnętrzne marginesy kontenera */
    margin-bottom: 20px; /* Odstęp poniżej kontenera */
    color: #ffffff; /* Kolor tekstu */
}

.reservation_section .container .content {
    display: flex; /* Ustawienie układu flex */
    justify-content: space-between; /* Rozstawienie elementów z przestrzenią między nimi */
    flex-wrap: wrap; /* Umożliwia zawijanie elementów, jeśli nie mieszczą się w jednej linii */
}

.reservation_section .container .left,
.reservation_section .container .right {
    flex: 1; /* Oba kontenery będą miały równą szerokość */
    padding: 20px; /* Wewnętrzne marginesy */
}

.reservation_section .container .left {
    max-width: 45%; /* Lewy kontener zajmuje maksymalnie 45% szerokości */
}

.reservation_section .container .right {
    max-width: 50%; /* Prawy kontener zajmuje maksymalnie 50% szerokości */
}


.input-container {
    display: flex; /* Ustawienie elementów w układzie flex */
    align-items: center; /* Wyrównanie elementów w pionie */
}

.input-container svg {
    margin-right: 10px; /* Dodaje przestrzeń między ikoną a polem tekstowym */
}

.input-container input[type="tel"] {
    flex: 1; /* Input zajmuje całą dostępną szerokość */
    padding: 10px; /* Wewnętrzne marginesy */
    border: 1px solid #fff; /* Biała ramka wokół pola tekstowego */
    background-color: #2e2e2e; /* Ciemnoszare tło dla inputa */
    color: #ffffff; /* Biały tekst w polu tekstowym */
    width: 100%; /* Szerokość pola ustawiona na 100% */
}

.reservation_section .container form {
    margin-top: 20px; /* Odstęp od góry */
}

.reservation_section .container form button {
     border: none; /* Brak ramki przycisku */
    background-color: #ee4a65; /* Kolor tła przycisku */
    color: #ffffff; /* Biały tekst na przycisku */
    margin-top: 20px; /* Odstęp od góry */
    padding: 15px 30px; /* Wewnętrzne marginesy przycisku */
    cursor: pointer; /* Kursor wskazujący na interaktywność */
}

.reservation_section .container form button:hover {
    background-color: #a30d2b; /* Zmiana koloru przycisku na ciemniejszy po najechaniu */
}

.reservation_section .container .right {
    max-height: 250px; /* Ogranicza wysokość prawego kontenera */
    overflow-y: auto; /* Dodaje przewijanie w pionie, gdy zawartość przekroczy maksymalną wysokość */
}

/* Styl dla suwaka */
.right::-webkit-scrollbar {
    width: 12px; /* Ustawia szerokość paska przewijania na 12px */
}

.right::-webkit-scrollbar-track {
    background: none; /* Usuwa tło toru paska przewijania */
}

.right::-webkit-scrollbar-thumb {
    background: #777; /* Kolor uchwytu paska */
    border-radius: 6px; /* Zaokrąglenie rogów uchwytu */
}

    .right::-webkit-scrollbar-thumb:hover {
        background: #999; /* Jaśniejszy odcień po najechaniu kursorem */
    }

/*koniec stylu suwaka*/

.reservation_section .container .right h4 {
    font-weight: bold; /* Pogrubienie tekstu */
    color: #ffffff; /* Kolor czcionki */
    margin-top: 0; /* Brak górnego marginesu */
}

.reservation_section .container .right p {
    color: #cccccc; /* Kolor tekstu */
    margin-bottom: 10px; /* Odstęp dolny między akapitami */
}

.reservation_section .container a {
    color: #ffffff; /* Kolor tekstu */
    text-decoration: underline; /* Podkreślenie linków */
}

/*Koniec Sekcji Rezerwacje - reservation */

/* Sekcja Stopki*/
.footer_section {
    background-color: #000000; /* Kolor tła*/
    padding: 20px 0; /* Wewnętrzne marginesy stopki */
}

    /* stopka paragraf*/
    .footer_section p {
        margin: 0; /* Brak zewnętrznego marginesu */
        padding: 20px 0; /* Wewnętrzny margines pionowy */
        color: #ffffff; /* Biały kolor tekstu */
        text-align: left; /* Wyrównanie tekstu do lewej */
        border-top: 1px solid #ffffff; /* Linia oddzielająca sekcję */
    }

    /* stopka link*/
    .footer_section a {
        color: inherit; /* Dziedziczenie koloru z nadrzędnego elementu */
        padding-right: 20px; /* Odstęp po prawej stronie dla równomiernego rozmieszczenia linków */
    }

/* Koniec Sekcji Stopki*/