:root {
  --gold-accent: #b59433;
  --dark-bg: #1a1a1a;
  --light-text: #f5f5f5;
      --primary-color: #0056b3;
      --secondary-color: #00a0e3;
      --accent-color: #e7f5fd;
  
      --dark-text: #2c3e50;
      
      --light-bg: #f8faff; 
    --light-text-card: #6c757d;
}

body {
  font-family: 'Arial', sans-serif;
}

.header-elegant {
  background-color: var(--dark-bg);
  border-bottom: 2px solid var(--gold-accent);
  padding: 0.8rem 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.logo-container {
  position: relative;
  z-index: 2;
  padding-top: 20px;
}

.logo {
  position: absolute;
  top: 0px;
  left: 0;
  width: 160px;
  height: auto;
  background-color: #FFFFFF;
  display: inline-block;
  border: 1px solid #FFFFFF;
  border-radius: 5px;
  box-shadow: 0 4px 15px rgba(181, 148, 51, 0.3);
  transition: transform 0.3s ease;
}

.logo:hover {
  transform: translateY(-5px);
}

.nav-item {
  position: relative;
}

.nav-link {
  color: var(--light-text);
  font-weight: 500;
  padding: 0.5rem 1.2rem;
  transition: color 0.3s ease;
  letter-spacing: 0.5px;
}

.nav-link:hover {
  color: var(--gold-accent);
}

.nav-link.active {
  color: var(--gold-accent);
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -5px;
  left: 50%;
  background-color: var(--gold-accent);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.nav-link:hover::after {
  width: 70%;
}

.dropdown-toggle::after {
  border-top-color: var(--gold-accent);
}

.dropdown-menu {
  background-color: var(--dark-bg);
  border: 1px solid var(--gold-accent);
  padding: 0.5rem;
  min-width: 10rem;
}

.dropdown-item {
  color: var(--light-text);
  padding: 0.6rem 1rem;
  transition: all 0.2s ease;
}

.dropdown-item:hover {
  background-color: rgba(181, 148, 51, 0.15);
  color: var(--gold-accent);
}

.lang-selector {
    min-width: 117px;    
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--light-text);
  transition: color 0.3s ease;
}

.lang-selector:hover {
  color: var(--gold-accent);
}

.navbar-toggler {
  border: 1px solid var(--gold-accent);
  padding: 0.5rem;
  background-color: transparent;
  color: var(--light-text);
  display: none;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28181, 148, 51, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (max-width: 992px) {
  .logo-container {
    position: relative;
    z-index: 2;
    text-align: center;
    padding-top: 0;
    margin-bottom: 1rem;
  }
  
  .logo {
    position: relative;
    top: 0;
    left: 0;
    margin: 0 auto;
  }
  
  .navbar-toggler {
    display: block;
    margin-left: auto;
    margin-right: 1rem;
  }
  
  .nav-menu {
    display: none;
    width: 100%;
    margin-top: 1rem;
  }
  
  .nav-menu.show {
    display: flex;
    flex-direction: column;
  }
  
  .nav-link::after {
    bottom: 0;
  }
}
section.hero {
    position: relative;
    background-image: url('/images/biuro.webp'); 
    background-size: cover;
    background-position: center 100%;
    background-attachment: fixed; /* aby zdjęcie było wyświetlane jako tło dla całego elementu */    
    color: #fff;
    min-height: 450px;;
  }
  .hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* przyciemnienie */
    z-index: 1;
  }  
  .hero .spacer {
    height: 300px; /* wysokość spacji */
  }
  .hero h1 {
    position: relative;
    z-index: 2; /* aby tekst był nad tłem */
    font-size: 4rem;
    text-align: center;
  }

  section.wel{
    background-color: #eaebed;
  }
  section.wel .container{
    min-height: 480px;
    padding-top: 10px;;
  }
  .welimga{
    padding-left: 0px;
    padding-right: 0px;
    background-image: url('/images/turbiny_1_g.webp'); 
    background-size: cover;
    background-position: center 100%;
  }
  .welimgb{
    padding-left: 0px;
    padding-right: 0px;
    background-image: url('/images/biogaz_1_g.webp'); 
    background-size: cover;
    background-position: center 100%;
  }  
.weltxt{
  padding-left: 0px;
  padding-right: 0px;
}
/* footer{
    min-height: 300px;;
} */
/* Media query dla kontroli odstępów na mniejszych ekranach */
@media (max-width: 991.98px) {
    .row.gy-5 {
      --bs-gutter-y: 6rem; /* Zwiększamy odstęp między wierszami na mniejszych ekranach */
    }
           .welimga,.welimgb{
                display: none;
          }    
  }
.boxhome  .card {
    transition: transform 0.2s ease-in-out;
    border : 1px solid #2683c5;
  }
  
 .boxhome .card:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border: 1px solid #b59433 !important;
    z-index: 1; 
  }
      @media (max-width: 768px) {
            .info-section {
                display: none;
            }

        }
        
        .contact-section {

            padding: 50px 0;
            background-color: #f8f9fa;
        }

        .contact-info {
            margin-bottom: 30px;
        }

        .contact-info h2 {
            color: var(--dark-bg);
            margin-bottom: 20px;
            border-bottom: 2px solid var(--gold-accent);
            padding-bottom: 10px;
        }

        .contact-info p {
            color: #6c757d;
            line-height: 1.6;
        }

        .contact-form h2 {
            color: var(--dark-bg);
            margin-bottom: 20px;
            border-bottom: 2px solid var(--gold-accent);
            padding-bottom: 10px;
            
        }

        .form-control {
            margin-bottom: 15px;
        }

        .btn-primary {
            background-color: var(--gold-accent);
            border-color: var(--gold-accent);
            color: var(--light-text);
            transition: background-color 0.3s ease, border-color 0.3s ease;
        }

        .btn-primary:hover {
            background-color: #a08127;
            border-color: #a08127;
        }
        .contact-section {
            padding: 50px 0;
            background-color: #f8f9fa;
        }

        .contact-info {
            margin-bottom: 30px;
        }

        .contact-info h2 {
            color: var(--dark-bg);
            margin-bottom: 20px;
            border-bottom: 2px solid var(--gold-accent);
            padding-bottom: 10px;
        }

        .contact-info p {
            color: #6c757d;
            line-height: 1.6;
        }

        .map-container {
            position: relative;
            overflow: hidden;
            width: 100%;
        }

    

    
    .services-section {
      padding: 5rem 0;
      background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
    }
    
/*
    .section-title {
      text-align: center;
      margin-bottom: 2rem;
      position: relative;
      font-weight: 700;
      color: var(--primary-color);
    }
    
    .section-title::after {
      content: '';
      width: 80px;
      height: 4px;
      background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
      position: absolute;
      bottom: -15px;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 2px;
    }
*/
    
    .service-card {
      background: white;
      border-radius: 12px;
      padding: 1rem;
      height: 100%;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
      position: relative;
      z-index: 1;
      overflow: hidden;
        border: none;
    }
    
    .service-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }


    
    .service-card .card-body {
      padding: 1.75rem;
    }
    
    .service-icon {
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.25rem;
      color: white;
      font-size: 1.5rem;
    }
    
    .service-card .card-title {
      color: var(--primary-color);
      font-weight: 600;
      margin-bottom: 1rem;
      font-size: 1.25rem;
    }
    
    .service-card .card-text {
      color: var(--light-text-card);
      line-height: 1.6;
    }
    
    .benefits-section {
      background-color: var(--accent-color);
      padding: 4rem 0;
      border-radius: 16px;
      margin-top: 3rem;
    }
    
    .benefits-title {
      text-align: center;
      color: var(--primary-color);
      margin-bottom: 2.5rem;
      font-weight: 700;
      position: relative;
    }
    
    .benefits-title::after {
      content: '';
      width: 60px;
      height: 4px;
      background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
      position: absolute;
      bottom: -15px;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 2px;
    }
    
    .benefit-item {
      background-color: white;
      border-radius: 10px;
      padding: 1.25rem 1.5rem;
      margin-bottom: 1rem;
      box-shadow: 0 5px 15px rgba(0,0,0,0.03);
      position: relative;
      padding-left: 3.5rem;
      transition: all 0.3s ease;
    }
    
    .benefit-item:hover {
      transform: translateX(5px);
      box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    }
    
    .benefit-icon {
      position: absolute;
      left: 1rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--secondary-color);
      font-size: 1.5rem;
    }


 .about-hero {
      background: linear-gradient(135deg, rgba(0, 86, 179, 0.8), rgba(0, 160, 227, 0.8)), url('/api/placeholder/1400/500') no-repeat center center;
      background-size: cover;
      color: white;
      padding: 6rem 0;
      position: relative;
      text-align: center;
    }
    
    .about-hero h1 {
      font-size: 3rem;
      font-weight: 700;
      margin-bottom: 1.5rem;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }
    
    .about-hero p {
      font-size: 1.25rem;
      max-width: 800px;
      margin: 0 auto;
      text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    }
    
    .section-title {
      position: relative;
      margin-bottom: 2.5rem;
      font-weight: 700;
      color: var(--dark-text);
    }
    
    .section-title::after {
      content: '';
      width: 70px;
      height: 4px;
      background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
      position: absolute;
      bottom: -15px;
      left: 0;
      border-radius: 2px;
    }
    
    .text-center .section-title::after {
      left: 50%;
      transform: translateX(-50%);
    }
    
    .core-values {
      background-color: var(--light-bg);
      padding: 5rem 0;
    }
    
    .value-card {
      background: white;
      border-radius: 12px;
      padding: 2rem;
      height: 100%;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
      position: relative;
      z-index: 1;
      overflow: hidden;
    }
    
    .value-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }
    
/*
    .value-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 5px;
      height: 100%;
      background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
      z-index: -1;
      transition: all 0.3s ease;
    }
    
    .value-card:hover::before {
      width: 100%;
      opacity: 0.05;
    }
*/
    
    .value-icon {
      width: 70px;
      height: 70px;
      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.5rem;
      color: white;
      font-size: 2rem;
      box-shadow: 0 5px 15px rgba(0, 86, 179, 0.3);
    }
    
    .value-title {
      font-weight: 600;
      color: var(--primary-color);
      margin-bottom: 1rem;
      font-size: 1.5rem;
    }
    
    .team-section {
      padding: 5rem 0;
    }
    
    .team-intro {
      margin-bottom: 3rem;
    }
    
    .mission-vision {
      background-color: var(--dark-bg);
      color: white;
      padding: 5rem 0;
      position: relative;
    }
    
    .mission-vision::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('/images/o-nas-3.webp') no-repeat center center;
      background-size: cover;
      opacity: 0.3;
    }
    
    .mission-card {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      padding: 2.5rem;
      height: 100%;
      backdrop-filter: blur(10px);
      transition: all 0.3s ease;
    }
    
    .mission-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    }
    
    .mission-title {
      color: white;
      font-weight: 600;
      margin-bottom: 1.5rem;
      font-size: 1.75rem;
      position: relative;
      padding-bottom: 1rem;
    }
    
    .mission-title::after {
      content: '';
      width: 50px;
      height: 3px;
      background: var(--secondary-color);
      position: absolute;
      bottom: 0;
      left: 0;
      border-radius: 2px;
    }
    
    .what-we-do {
      padding: 5rem 0;
    }
    
    .service-item {
      display: flex;
      margin-bottom: 2rem;
      align-items: flex-start;
    }
    
    .service-icon {
      flex-shrink: 0;
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 1.5rem;
      color: white;
      font-size: 1.5rem;
      box-shadow: 0 5px 15px rgba(0, 86, 179, 0.2);
    }
    
    .service-content h4 {
      color: var(--primary-color);
      margin-bottom: 0.75rem;
      font-weight: 600;
    }
    
    .service-content p {
      color: var(--light-text-card);
      margin-bottom: 0;
    }
    
    .highlight-text {
      color: var(--secondary-color);
      font-weight: 600;
    }