/*===== GOOGLE FONTS =====*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");

/*===== VARIABLES CSS =====*/
:root {
    --header-height: 5rem;
  /*===== Colores =====*/
  --first-color: #ff7417;
  --dark-color: #272b37;
  --dark-color-alt: #363a4e;
  --white-color: #E6E7E9;
  --white-color-alt: #b4b4b4;

  /*===== Fuente y tipografia =====*/
  --body-font: 'Poppins', sans-serif;
  --header-font-size: 2rem;
  --xxl-font-size: 1.586rem;
  --big-font-size: 1.234rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;

  /*===== z index =====*/
  --z-fixed: 100;
}

@media screen and (min-width: 768px) {
  :root {
    --header-font-size: 1.75rem;
    --xxl-font-size: 1.4rem;
    --big-font-size: 1.1rem;
    --normal-font-size: .875rem;
    --small-font-size: .75rem;
  }
}
@media screen and (min-width: 480px) {
    :root {
    --header-font-size: 1.5rem;
    --xxl-font-size: 1.25rem;
    --big-font-size: 1rem;
    --normal-font-size: .813rem;
    --small-font-size: .688rem;        
    }
  }

/*===== BASE =====*/
*, ::before, ::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* Dostosowanie paska przewijania dla WebKit */
::-webkit-scrollbar {
    width: 6px; /* Szerokość scrollbara */
    background-color: var(--white-color); /* Kolor tła scrollbara */
}

::-webkit-scrollbar-thumb {
    background-color: var(--dark-color); /* Kolor "uchwytu" scrollbara */
    border-radius: 10px; /* Zaokrąglenie uchwytu */
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--first-color); /* Kolor uchwytu po najechaniu myszką */
}

::-webkit-scrollbar-track {
    background: #f1f1f1; /* Kolor tła dla obszaru scrollbara */
}

body {
    margin: 0 auto;
    padding: 0;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    font-weight: 500;
    background-color: var(--white-color);
    color: var(--dark-color);
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}


.bd-grid {
    max-width: 1280px;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
        grid-template-columns: 100%;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }
  
  /*===== HEADER =====*/
  .header {
    width: 100%;
    height: var(--header-height);
    position: fixed;
    top: 0;
    left: 0;
    padding: 0 1.5rem;
    z-index: var(--z-fixed);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .header.scrolled {
        background-color: rgba(0, 0, 0, 0.8); /* Kolor tła, gdy przewinięto w dół */
        z-index: 10;
        color: white; /* Opcjonalnie zmień kolor tekstu */
    }
  
  .header__logo {
    color: var(--white-color);
  }
  
  .header__toggle {
    font-size: 1.5rem;
    color: var(--white-color);
    cursor: pointer;
  }
  
  /*===== NAV =====*/
  @media screen and (max-width: 900px) {
    .nav {
      position: fixed;
      top: 0;
      left: -100%;
      background-color: var(--dark-color);
      color: var(--white-color);
      width: 100%;
      height: 100vh;
      padding: 1.5rem 0;
      z-index: var(--z-fixed);
      -webkit-transition: .5s;
      transition: .5s;
    }
  }
  .login{
    padding: .5rem;
    border-radius: .1rem;
  }
  .nav__content {
    height: 100%;
    -ms-grid-rows: max-content 1fr max-content;
        grid-template-rows: -webkit-max-content 1fr -webkit-max-content;
        grid-template-rows: max-content 1fr max-content;
    row-gap: 2rem;
  }
  
  .nav__close {
    position: absolute;
    right: 1.5rem;
    font-size: 1.3rem;
    padding: .25rem;
    background-color: var(--dark-color-alt);
    border-radius: 50%;
    cursor: pointer;
  }
  
  .nav__img {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: .25rem;
    margin-bottom: .8rem;
    width: 50px;
    height: 50px;
    background-color: var(--white-color);
    border-radius: 1rem;
    overflow: hidden;
  }
  
  .nav__img img {
    width: 32px;
  }
  
  .nav__name {
    display: block;
    color: var(--white-color);
    font-size: var(--big-font-size);
    color: var(--first-color);
  }
  
  .nav__profesion {
    font-size: var(--small-font-size);
  }
  
  .nav__menu {
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
  }
  
  .nav__item {
    margin: 2.5rem 0;
  }
  
  .nav__link {
    color: var(--white-color);
  }
  
  .nav__social {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      padding-top: .9rem;
  }
  
  .nav__social-icon {
    font-size: 1.3rem;
    color: var(--white-color);
    margin-right: 1.4rem;
  }
  
  .nav__social-icon:hover {
    color: var(--first-color);
  }
  
  /*Aparecer menu*/
  .show {
    left: 0;
  }
  
  /*Active menu*/
  .active {
    color: var(--first-color);
  }
  .login{
    margin-right: 1rem;
    border: 2px solid var(--first-color);
    border-radius: 20px;
  }
  
  /*===== MEDIA QUERIES =====*/
  @media screen and (min-width: 900px) {
    body {
      margin: 0;
    }
    .nav__name{
        display: none;
    }
    .header {
      height: calc(var(--header-height) + 1rem);
    }
    .header__logo, .header__toggle {
      display: none;
    }
    .nav {
      width: 100%;
    }
    .nav__content {
      -ms-grid-columns: (max-content)[3];
          grid-template-columns: repeat(3, -webkit-max-content);
          grid-template-columns: repeat(3, max-content);
      -ms-grid-rows: 1fr;
          grid-template-rows: 1fr;
      -webkit-column-gap: 1rem;
              column-gap: 1rem;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
    }
    .nav__close, .nav__profesion {
      display: none;
    }
    .nav__perfil {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }
    .nav__img {
      width: 70px;
      height: 50px;
      margin-right: .5rem;
      margin-bottom: 0;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }
    .nav__img img {
      width: 28px;
    }
    .nav__list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
    .nav__item {
      margin: 0 .25rem;
    }
    .nav__link {
      padding: .5rem .8rem;
      border-radius: .25rem;
    }
    .nav__link:hover {
      background-color: var(--first-color);
    }
    .active {
      background-color: var(--first-color);
      color: var(--white-color);
    }
  }
  
  @media screen and (min-width: 1024px) {
    .bd-grid {
        margin-left: auto;
        margin-right: auto;
    }
    }

  @media screen and (max-width: 1024px) {
    .bd-grid {
      margin-left: auto;
      margin-right: auto;
    }
    .header {
        height: calc(var(--header-height) + 0.5rem); /* Dostosowanie wysokości nagłówka */
    }
    
    .nav__link {
        font-size: .8rem; /* Zmniejszenie rozmiaru czcionki linków */
    }
    
    .nav__social-icon {
        font-size: 1rem; /* Zmniejszenie rozmiaru ikon social media */
    }

    }
    


.hero-section {
    background-image: url('background-image.png');
    background-size: cover; /* Obraz rozciągnie się na całą sekcję */
    background-position: center; /* Wycentrowanie obrazu */
    background-repeat: no-repeat; /* Zapobiegnie powtarzaniu obrazu */
    height: 100vh; /* Sekcja zajmie całą wysokość ekranu */
    width: 100%; /* Sekcja zajmie całą szerokość */
    border-bottom-left-radius: 50px; /* Zaokrąglenie w lewym dolnym rogu */
    border-bottom-right-radius: 50px; /* Zaokrąglenie w prawym dolnym rogu */
    overflow: hidden; /* Zapobiega wychodzeniu elementów poza zaokrąglone rogi */
}
.aside{
    display: flex; /* Aktywowanie flexboxa */
    justify-content: center; /* Wyśrodkowanie w poziomie */
    align-items: center; /* Wyśrodkowanie w pionie */
    text-align: center; /* Tekst wyśrodkowany wewnątrz bloku */
    height: 100vh; /* Blok zajmuje całą wysokość okna */
    flex-direction: column;
    max-width: 900px; /* Maksymalna szerokość bloku */
    margin: 0 auto; /* Wyśrodkowanie bloku w poziomie */
    padding: 0 20px; /* Dodanie paddingu dla małych ekranów */
}
.aside__box{
  background-color: transparent;
}
.aside .aside__header{
    font-size: 4rem;
    color: var(--white-color);
    font-weight: bold;
}
.aside .aside__description{
    font-size: var(--big-font-size);
    color: var(--white-color-alt);
}
.aside__members {
    display: flex; /* Użycie Flexbox */
    justify-content: space-between; /* Rozmieszczenie elementów w poziomie */
    flex-wrap: wrap; /* Pozwolenie na zawijanie w przypadku mniejszych ekranów */
    margin: 20px 0px;
    border-right: 3px solid var(--first-color);
    border-left: 3px solid var(--first-color);
    padding: 10px;
}

.aside__members__link .link {
    flex: 1; /* Umożliwienie, aby każdy link zajmował równą ilość przestrzeni */
    text-align: center; /* Wyśrodkowanie tekstu */
    padding: 10px; /* Opcjonalne wypełnienie dla lepszego wyglądu */
    min-width: 250px; /* Minimalna szerokość, aby uniknąć zbyt małych kolumn */
    font-size: 3.5rem;
    color: var(--first-color);
    font-weight: bold;
}


/* Opcjonalne style dla lepszego wyglądu */
.aside__members__link span {
    display: block; /* Wyświetlanie span jako blok dla lepszego układu */
    font-weight: 500;
    font-size: 1.1rem;
    color: var(--white-color-alt);
}

.aside .aside__button button{
    padding: 16px 30px;
    font-size: var(--big-font-size);
    color: var(--white-color);
    background-color: var(--first-color);
    border: none;
    margin-top: 1.4rem;
    border-radius: 5px;
    font-weight: 550;
    cursor: pointer;
}
.aside .aside__button button:hover{
    background-color: var(--white-color);
    color: var(--first-color);
    transition: .5s;
}
@media screen and (max-width: 1024px) {

    .aside .aside__header {
        font-size: 2.6rem; /* Zmniejszenie rozmiaru czcionki nagłówka */
    }

    .aside .aside__description {
        font-size: .9rem; /* Dostosowanie rozmiaru tekstu opisu */
    }

    .aside__members {
        padding: 10px; /* Zachowaj padding, ale dostosuj do mniejszych ekranów */
        border-right: none; /* Usunięcie bocznych obramowań */
        border-left: none; /* Usunięcie bocznych obramowań */
    }

    .aside__members__link .link {
        font-size: 2.2rem; /* Zmniejszenie czcionki dla linków */
        min-width: 200px; /* Dostosowanie minimalnej szerokości linków */
    }

    .aside__members__link span {
        font-size: .9rem; /* Zmniejszenie rozmiaru tekstu */
    }

    .aside .aside__button button {
        font-size: 1.2rem; /* Zmniejszenie rozmiaru przycisków */
        padding: 12px 25px; /* Zmniejszenie paddingu przycisków */
    }
}

@media screen and (max-width: 900px) {
    .aside__members {
        flex-direction: column; /* Ustawienie boxów w kolumnach */
        align-items: center; /* Wyśrodkowanie boxów w poziomie */
        transform: none;
        padding: 5px;
    }
    .aside__members__link .link{
        font-size: 2rem;
        text-align: center;
        padding: 0;
    }
    .aside__members__link span{
        font-size: .8rem;
        text-align: center;
    }
    .aside .aside__header{
        font-size: 2rem;
    }
    .aside .aside__description{
        font-size: .7rem
    }
    .aside .aside__button button{
        font-size: 1.2rem; /* Zmniejszenie rozmiaru przycisków */
        padding: 6px 16px;
        font-weight: 500;
        margin-top: 10px;
    }

}

.company-section {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}


.features {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    transform: translateY(-30%); /* Przesunięcie w górę o 20% */
    transition: transform 0.3s; /* Opcjonalna animacja */
    padding: 10px;
}
.features_box{
    background-color: white; /* Dodaj tło, aby upewnić się, że sekcja jest widoczna */
    border-radius: 10px; /* Zaokrąglenie rogów, jeśli potrzebne */
    padding: 20px; /* Opcjonalne dodanie paddingu */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Dodanie lekkiego cienia */
    width: 280px;
}
  
.features_box .features__icon{
    font-size: 2.5rem;
    text-align: center;
    color: var(--dark-color);
}  
.features_box .features__title{
    margin-top: 1rem;
    font-size: var(--big-font-size);
    text-align: center;
    color: var(--first-color);
}
.features_box .features__description{
    margin-top: 1rem;
    font-size: var(--normal-font-size);
    text-align: center;
    color: var(--dark-color);
}

    @media  (max-height: 700px) {
        .features {
            flex-direction: row; /* Ustawienie kierunku na wiersz */
            justify-content: space-between; /* Równomierne rozłożenie boxów */
            transform: none;
            margin-top: 10px;
        }
      
        .features_box {
            width: 47%; /* Ustawienie szerokości boxów na 48%, aby zmieściły się dwa w linii */
            margin-bottom: 20px; /* Odstęp między wierszami */
        }
    }
  /* Dla ekranów mobilnych */
    @media (max-width: 1200px) {
        .features {
            flex-direction: row; /* Ustawienie kierunku na wiersz */
            justify-content: space-between; /* Równomierne rozłożenie boxów */
            transform: none;
            margin-top: 10px;
        }
    
        .features_box {
            width: 47%; /* Ustawienie szerokości boxów na 48%, aby zmieściły się dwa w linii */
            margin-bottom: 20px; /* Odstęp między wierszami */
        }
    }
@media (max-width: 900px) {
  .features_box .features__title{
    font-size: 1rem;
    }
    .features_box .features__description{
        font-size: .7rem;
    }
}

.partners{
    padding: 60px 20px;
    background-color: var(--white-color);
    display: flex;
    justify-content: center;
}

.partners_container{
    width: 1200px;
    margin: 0 auto; /* Wycentrowanie sekcji */
    padding: 0 20px; /* Margines wewnętrzny, aby dodać odstępy po bokach */
}
.partners__content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    width: 100%; /* Zapewnia, że zawartość zajmie całą szerokość kontenera */
}
.partners__text {
    position: relative;
    padding-left: 50px; /* Większy odstęp na linie i kwadrat */
    padding-top: 1px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}

.partners__text::before {
    content: "";
    position: absolute;
    right: 0px; /* Przesunięcie początkowe linii */
    top: 5px;
    width: 50px;
    height: 2px;
    background-color: var(--dark-color); /* Pozioma linia */
}
.partners__text::after {
    content: "";
    position: absolute;
    right: 10px;
    top: -5px;
    width: 2px;
    height: 50px;
    background-color: var(--dark-color); /* Pionowa linia */
}

.partners__text .square {
    position: absolute;
    right: 30px; /* Kwadrat po liniach */
    top: 20px;
    width: 15px;
    height: 15px;
    background-color: var(--first-color); /* Kwadrat */
}
.partners__text h2 {
    font-size: 3rem;
    margin-bottom: 10px;
    color: var(--first-color);
}
.partners__text h3 {
    font-size: .9rem;
    margin-bottom: 20px;
    color: var(--dark-color);
    font-weight: 500;
}
  
.fleet_container {
    width: 1200px;
    margin: 0 auto; /* Wycentrowanie sekcji */
    padding: 0 20px; /* Margines wewnętrzny, aby dodać odstępy po bokach */
}

.fleet {
    padding: 60px 20px;
    background-color: var(--white-color);
    display: flex;
    justify-content: center;
}

.fleet__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    width: 100%; /* Zapewnia, że zawartość zajmie całą szerokość kontenera */
}

.fleet__box {
    width: 45%; /* Ustawia szerokość każdego boxu na 50% */
    box-sizing: border-box; /* Umożliwia uwzględnienie paddingu w szerokości */
}


.fleet__text {
    position: relative;
    padding-left: 50px; /* Większy odstęp na linie i kwadrat */
    padding-top: 1px;
    font-size: 24px;
    font-weight: bold;
}

.fleet__text::before {
    content: "";
    position: absolute;
    left: 0px; /* Przesunięcie początkowe linii */
    top: 5px;
    width: 50px;
    height: 2px;
    background-color: var(--dark-color); /* Pozioma linia */
}

.fleet__text::after {
    content: "";
    position: absolute;
    left: 10px;
    top: -5px;
    width: 2px;
    height: 50px;
    background-color: var(--dark-color); /* Pionowa linia */
}

.fleet__text .square {
    position: absolute;
    left: 30px; /* Kwadrat po liniach */
    top: 20px;
    width: 15px;
    height: 15px;
    background-color: var(--first-color); /* Kwadrat */

}

.fleet__text h2 {
    font-size: 3rem;
    margin-bottom: 10px;
    color: var(--first-color);
}

.fleet__text h3 {
    border-left: 3px solid var(--first-color);
    padding-left: 20px;
    font-size: .9rem;
    margin-bottom: 20px;
    color: var(--dark-color);
    font-weight: 500;
}

.fleet__text p {
    font-size: .7rem;
    color: var(--dark-color-alt);
    max-width: 600px;
    margin-top: 20px;
    font-weight: 500;
}

@media (max-width: 900px) {
    .fleet__text h2{
        font-weight: 1.6rem;
    }
}

.fleet__images {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    width: 100%;
    height: auto; /* Możesz dostosować wysokość według potrzeb */
    border-radius: 15px;
    position: relative; /* Umożliwia użycie absolutnego pozycjonowania dla pseudo-elementów */
}

.fleet__images::after {
    content: "";
    position: absolute;
    top: 50%; /* Ustawia górną krawędź ramki na środku kontenera */
    right: -50px; /* Wysunięcie na prawo o 200px */
    width: 100px; /* Szerokość boxa */
    height: 50%; /* Wysokość boxa - 50% wysokości kontenera */
    border: 8px solid var(--dark-color);
    background-color: transparent;
    transform: translateY(-50%); /* Centruje box w pionie w stosunku do kontenera */
    z-index: 1;
}

.fleet__images img {
    width: 100%;
    height: auto; /* Umożliwia zachowanie proporcji zdjęcia */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.fleet__feature {
    display: grid; /* Umożliwia użycie grid layout */
    grid-template-columns: repeat(3, 1fr); /* 3 kolumny o równej szerokości */
    grid-template-rows: repeat(2, auto); /* 2 wiersze o automatycznej wysokości */
    gap: 20px; /* Odstęp między elementami */
    padding: 15px; /* Padding dla całej sekcji */
}

.feature__link {
    position: relative;
    cursor: pointer;
    padding: 20px; /* Padding wewnętrzny */
    text-align: center; /* Wyśrodkowanie tekstu */
    font-weight: 500;
    font-size: .8rem; /* Rozmiar czcionki */
    color: var(--dark-color); /* Kolor tekstu */
    transition: background-color 0.3s, transform 0.3s; /* Animacje przy interakcji */
}

.feature__link::before {
    content: "";
    position: absolute;
    left: 0px; /* Przesunięcie początkowe linii */
    top: 1px;
    width: 10px;
    height: 2px;
    background-color: var(--dark-color); /* Pozioma linia */
}

.feature__link::after {
    content: "";
    position: absolute;
    left: 4px;
    top: -3px;
    width: 2px;
    height: 10px;
    background-color: var(--dark-color); /* Pionowa linia */
}

.feature__link:hover {
    background-color: var(--first-color); /* Zmiana koloru tła po najechaniu */
    transform: scale(1.05); /* Powiększenie elementu przy najechaniu */
}


@media (max-width: 1275px) {
    .fleet__images::after {
        display: none; /* Ukrywa pseudo-element */
    }
}


/* Responsywność dla urządzeń mobilnych */
@media (max-width: 900px) {
    .fleet__feature{
        display: none;
    }
    .fleet_container{
        width: 100%;
        padding: 10px;
    }
    .fleet__images::after {
        display: none; /* Ukrywa pseudo-element */
    }
    .fleet__content {
        flex-direction: column; /* Ustawienie boxów w kolumnach */
        align-items: center; /* Wyśrodkowanie boxów w poziomie */
        transform: none;
        margin-top: 10px;
    }
    .fleet__box{
        width: 100%;
    }

    .fleet__images {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .fleet__images img {
        width: 50%;
    }
}

.partners {
    padding: 60px 20px;
    background-color: var(--white-color);
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: var(--dark-color);
    height: auto;
}

.partners .partners__button button{
    padding: 12px 20px;
    font-size: 1rem;
    color: var(--white-color);
    background-color: var(--first-color);
    border: none;
    margin-top: 1.2rem;
    font-weight: 600;
    cursor: pointer;
}
.partners .partners__button button:hover{
    background-color: var(--white-color);
    color: var(--first-color);
    transition: .5s;
}

.partners_container {
    max-width: 1200px;
    padding: 0 1rem;
    margin: 0 auto;
}
  
.partners_content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    width: 100%; /* Zapewnia, że zawartość zajmie całą szerokość kontenera */
}

.partners_box {
    width: 48%; /* Ustawia szerokość każdego boxu na 50% */
    box-sizing: border-box; /* Umożliwia uwzględnienie paddingu w szerokości */
    height: auto;
}

.partners_text {
    position: relative;
    padding-left: 50px; /* Większy odstęp na linie i kwadrat */
    padding-top: 1px;
    font-size: 24px;
    font-weight: bold;
}

.partners_text::before {
    content: "";
    position: absolute;
    left: 0px; /* Przesunięcie początkowe linii */
    top: 5px;
    width: 50px;
    height: 2px;
    background-color: var(--white-color); /* Pozioma linia */
}

.partners_text::after {
    content: "";
    position: absolute;
    left: 10px;
    top: -5px;
    width: 2px;
    height: 50px;
    background-color: var(--white-color); /* Pionowa linia */
}

.partners_text .square {
    position: absolute;
    left: 30px; /* Kwadrat po liniach */
    top: 20px;
    width: 15px;
    height: 15px;
    background-color: var(--first-color); /* Kwadrat */

}

.partners_text h2 {
    font-size: 3rem;
    margin-bottom: 10px;
    color: var(--first-color);
}

.partners_text h3 {
    border-left: 3px solid var(--first-color);
    padding-left: 20px;
    font-size: .7rem;
    margin-bottom: 20px;
    color: var(--white-color-alt);
    font-weight: 500;
}
.slider {
    display: flex;
    justify-content: center;   /* Wyśrodkowanie poziome */
    align-items: center;       /* Wyśrodkowanie pionowe */
    position: relative;        /* Potrzebne dla precyzyjnego pozycjonowania */
    padding: 50px;
    width: 100%;
    height: 100px;             /* Możesz dostosować wysokość w zależności od potrzeb */
    overflow: hidden;          /* Ukrywa elementy wychodzące poza slider */
}

.item {
    display: flex;
    flex-direction: column;    /* Elementy w item będą ustawione pionowo */
    justify-content: center;   /* Wyśrodkowanie zawartości w pionie */
    align-items: center;       /* Wyśrodkowanie zawartości w poziomie */
    width: 100px;
    height: 100px;
    text-align: center;
    position: absolute;
    transition: 0.5s;
}

.slide-image {
    width: 100%; /* Ustawia szerokość obrazka na 100% kontenera */
    height: auto; /* Automatyczna wysokość, aby zachować proporcje */
    border-radius: 5px; /* Opcjonalne zaokrąglenie rogów obrazka */
}

@media (max-width: 900px) {
    .partners_content {
        flex-direction: column; /* Ustawia boxy jeden pod drugim */
        align-items: center; /* Wycentruje boxy w poziomie */
    }

    .partners_box {
        width: 100%; /* Ustawia szerokość boxów na 100% */
        margin-bottom: 20px; /* Dodaje odstęp pomiędzy boxami */
    }

    .partners_text {
        padding-left: 0; /* Usuwa odstęp na linie i kwadrat */
    }


    .partners_text h2 {
        font-size: 2.6rem; /* Zmniejsza rozmiar nagłówków na mniejszych ekranach */
    }

    .partners_text h3 {
        font-size: .9rem; /* Dostosowuje rozmiar mniejszego nagłówka */
        padding-left: 0; /* Usuwa odstęp przed tekstem */
        padding-left: 15px;
    }

    .slider {
        flex-direction: column; /* Elementy slidera w kolumnie */
    }
}



.contact_container {
    width: 1200px;
    margin: 0 auto; /* Wycentrowanie sekcji */
    padding: 0 20px; /* Margines wewnętrzny, aby dodać odstępy po bokach */
}

.contact {
    padding: 60px 20px;
    background-color: var(--white-color);
    display: flex;
    justify-content: center;
}

.contact_content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    width: 100%; /* Zapewnia, że zawartość zajmie całą szerokość kontenera */
    background-color: var(--white-color);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
}
.contact_content #absolute_box{
    width: 15%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--first-color);
    z-index: 1;
}

.contact_box {
    width: 45%; /* Ustawia szerokość każdego boxu na 50% */
    box-sizing: border-box; /* Umożliwia uwzględnienie paddingu w szerokości */
    z-index: 2;
}
.contact_box .form_box{
    width: 100%;
    background-color: var(--dark-color);
    padding: 12px;
    padding-left: 24px;
    position: relative;
}
.form_box #absolute_box{
    position: absolute;
    width: 35px;
    height: 35px;
    top: -17.5px;
    left: -17.5px;
    background-color: var(--first-color);
}

.form_box h2{
    font-size: 2.3rem;
    color: var(--white-color);
}
.contact_link{
    color: var(--white-color-alt);
    font-size: 1.3rem;
    font-weight: 500;
    margin-top: 20px;
}
.contact_link i {
    color: var(--white-color);
    margin-right: 18px;
}
.form_box .socialmedia{
    color: var(--first-color);
    font-size: 2.2rem;
    margin-top: 30px;
    margin-bottom: 30px;
}
.form_box .socialmedia i{
    padding-right: 10px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.form_box .socialmedia i:hover{
    color: var(--white-color);
    cursor: pointer;
}

.contact_text {
    padding-left: 50px; /* Większy odstęp na linie i kwadrat */
}

.contact_form input[type=text], .contact_form input[type=submit], .contact_form input[type=email]{
    display: block;
    width: 100%;
    border: none;
    border-bottom: 3px solid var(--white-color-alt);
    background-color: transparent;
    padding: 24px;
    margin-top: 32px;
    font-size: 1rem;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
}
.contact_form input[type=text]:focus, .contact_form input[type=email]:focus {
    border: none;
    border-bottom: 3px solid var(--first-color);
    color: var(--dark-color);
}

.contact_form input[type=submit]{
    cursor: pointer;
    border: none;
    outline: none;
    width: 100%;
    background-color: var(--dark-color);
    color: var(--white-color);
    padding: 18px;
    font-size: 1rem;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    margin-bottom: 50px;
}
.contact_form input[type=submit]:hover{
    background-color: var(--first-color);
}


.contact_text h2 {
    font-size: 3rem;
    margin-bottom: 10px;
    color: var(--first-color);
}

.contact_text h3 {
    border-left: 3px solid var(--first-color);
    padding-left: 20px;
    font-size: .9rem;
    margin-bottom: 20px;
    color: var(--dark-color);
    font-weight: 500;
}

.contact_text p {
    font-size: .7rem;
    color: var(--dark-color-alt);
    max-width: 600px;
    margin-top: 20px;
    font-weight: 500;
}


@media (max-width: 768px) {
    .contact_container {
        width: 100%; /* Full width on mobile */
        padding: 0 10px;
    }

    .contact_content {
        display: block; /* Stack items vertically */
        text-align: center;
        box-shadow: none; /* Remove box shadow on mobile */
    }

    .contact_box {
        width: 100%; /* Full width for each box */
        margin-bottom: 20px; /* Add space between boxes */
    }

    .contact_content #absolute_box {
        display: none; /* Hide absolute box on mobile */
    }

    .contact_text {
        padding-left: 0; /* Remove left padding for mobile */
    }

    .form_box {
        width: 100%;
        background-color: var(--dark-color);
    }

    .form_box .socialmedia {
        justify-content: center; /* Center social media icons */
        gap: 15px; /* Adjust spacing */
    }
}




.footer{
    width: 100%;
    margin: 0 auto; /* Wycentrowanie sekcji */
    padding: 0 10px; /* Margines wewnętrzny, aby dodać odstępy po bokach */
    background: var(--dark-color);
}

.footer_container {
    width: 1200px;
    border-radius: 6px;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  .footer_container .footer-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    padding: 10px;
  }
  .footer-row .footer-col{
    width: 21%;
  }
  #copyrights{
    color: var(--white-color);
    text-align: center;
    opacity: .9;
    font-weight: 400;
    font-size: .8rem;
    padding: 20px;
  }
  .footer-row .footer-col h4 {
    color: var(--first-color);
    font-size: 1.1rem;
    font-weight: 400;
  }
  .footer-col .links li {
    list-style: none;
    margin-bottom: 10px;
  }
  .footer-col .links li a {
    text-decoration: none;
    color: var(--white-color-alt);
  }
  .footer-col .links li img{
    max-width: 50px;
  }
  .footer-col .links li a:hover {
    color: var(--white-color);
  }
  .footer-col p {
    margin: 15px 0;
    color: var(--white-color-alt);
    max-width: 300px;
  }
  .footer-col form {
    display: flex;
    gap: 5px;
  }
  .footer-col input {
    height: 40px;
    border-radius: 6px;
    background: none;
    width: 100%;
    outline: none;
    border: 1px solid #7489C6 ;
    caret-color: var(--white-color);
    color: var(--white-color);
    padding-left: 10px;
  }
  .footer-col input::placeholder {
    color: #ccc;
  }
   .footer-col form button {
    background: var(--white-color);
    outline: none;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: 0.2s ease;
  }
  .footer-col form button:hover {
    background: #cecccc;
  }
  .footer-col .icons {
    display: flex;
    margin-top: 30px;
    gap: 30px;
    cursor: pointer;
  }
  .footer-col .icons i {
    color: #afb6c7;
  }
  .footer-col .icons i:hover  {
    color: var(--white-color);
  }
  @media (max-width: 1200px) {
    .footer_container {
        width: 100%; /* Pełna szerokość na urządzeniach o szerokości do 1024px */
    }

    .footer-row .footer-col {
        width: 23%; /* 4 kolumny w jednej linii */
      }

    .footer-row .footer-col h4 {
        font-size: 1.5rem; /* Mniejszy rozmiar nagłówka na urządzeniach o szerokości do 1024px */
        margin-top: 0;
        padding-top: 0;
    }

    .footer-col form {
        flex-direction: column; /* Ustawienie elementów formularza w pionie */
    }

    .footer-col .icons {
        justify-content: center; /* Wyśrodkowanie ikon */
    }

    .footer-col p {
        text-align: center; /* Wyśrodkowanie tekstu w kolumnie */
    }
}

@media (max-width: 768px) {
    .footer_container {
        width: 100%; /* Pełna szerokość na urządzeniach mobilnych */
    }

    .footer-row {
        display: block; /* Układ stakowany */
        text-align: center;
    }

    .footer-row .footer-col {
        width: 100%; /* Pełna szerokość dla każdej kolumny */
        padding: 0;
        margin: 0;
    }

    .footer-row .footer-col h4 {
        font-size: 2.8rem; /* Większy rozmiar nagłówka na mobilnych */
        margin-bottom: 10px;
    }
    .footer-col .links{
        font-size: 1rem;
    }

    .footer-col form {
        display: flex; /* Włącz elastyczny model */
        flex-direction: column; /* Ustawienie elementów formularza w pionie */
        align-items: center; /* Wyśrodkowanie elementów w formularzu */
        margin: 0 auto; /* Wyśrodkowanie formularza */
        width: 100%; /* Upewnij się, że formularz zajmuje całą szerokość */
    }

    .footer-col input,
    .footer-col button {
        width: 50%; /* Szerokość input i button na 50% */
        margin-bottom: 10px; /* Dodanie odstępu między elementami */
    }

    .footer-col .icons {
        justify-content: center; /* Wyśrodkowanie ikon */
    }

    .footer-col p {
        text-align: center; /* Wyśrodkowanie tekstu w kolumnie */
        font-size: 1.6rem;
    }
}