.ratings{
  margin-right:10px;
}

.ratings i{
  
  color:#cecece;
  font-size:32px;
}
.rating-color{
  color:#fbc634 !important;
}
.small-ratings i{
  color:#cecece;   
}

.ccenter
{
  text-align: center;
}

.custom-file-input{
  width: 100%;
}

label {
  color: #ffffff;
  margin-left: 15px;
  text-align: left;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  
}

.table-custom th {
  background-color: #007BFF; /* Kopfzeilenfarbe */
  color: white; /* Textfarbe */
}
.table-custom tbody tr:nth-child(odd) {
  background-color: #f8f9fa; /* Alternierende Zeilenfarbe */
}
.table-custom tbody tr:nth-child(even) {
  background-color: #e9ecef; /* Alternierende Zeilenfarbe */
}
.table-custom tbody td {
  color: #212529; /* Standard-Textfarbe */
}

button {  
  box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.5);
}
input {  
  box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.5);
}
select {  
  box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.5);
}
textarea {  
  box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.5);
}
 /* Buttonfarbe an das vorhandene Design anpassen */
.btn-custom {
  background-color: #007BFF; /* Beispiel: Blau passend zur Website */
  color: white;
}
.btn-custom:hover {
  background-color: #0056b3; /* Dunkleres Blau für Hover-Effekt */
}

        body {
            font-family: Arial, sans-serif;
            background-color: #1d1f21;
            color: #f8f9fa;
            display: flex;
        }
        .navbar {
            transition: left 0.3s;  
            background-color: #001F3F;
            height: 100vh;
            width: 250px;
            position: fixed;
            top: 0;
            left: 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            padding: 20px 0;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
        }
        .navbar-brand {
            font-size: 2rem;
            color: #ffffff;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
            width: 100%;
            background-color: #343a40;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.5);
        }
        .navbar-brand:hover {
            color: #d1e7ff;
        }
        .nav {
            margin-top: 10px;
            width: 100%;
            padding-left: 0;
        }
        .nav-item {          
            border-radius: 5px;
            width: 90%;
            background-color: #343a40;
            margin-bottom: 20px;
            box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.5);
        }
        .nav-link {
            color: #ffffff;
            padding: 10px 15px;
            text-align: left;
            width: 100%;
            display: block;
            border-left: 4px solid transparent;
            transition: all 0.3s ease;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Added shadow */
        }
        .nav-link:hover {
            background-color: rgba(255, 255, 255, 0.1);
            border-left: 4px solid #ffffff;
            color: #d1e7ff;
            box-shadow: 3px 3px 7px rgba(255, 255, 255, 0.3); /* Enhanced shadow on hover */
        }
        .main-content {
            margin-left: 250px;
            width: calc(100% - 250px);
            padding: 20px;
        }
        .dropdown-menu {          
            margin-left: +10px;
            margin-bottom: 20px;
            background-color: #7c7c7c;
            border: none;
            box-shadow: 2px 3px 5px rgba(0, 0, 0, 01); /* Match navbar shadow */
            padding: 0;
            width: 100%;
        }
        .dropdown-item {
          border-radius: 5px;
            margin-bottom: 10px;
            margin-top: 10px;
            margin-left: 10px;
            width: 90%;
            background-color: #2e394a;
            color: #ffffff;
            padding: 10px 15px;
            border-left: 4px solid transparent;
            transition: all 0.3s ease;
            box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.5);
        }
        .hero {
            background: url('https://zieten-tuning.de/wp-content/uploads/2024/07/cropped-IMG-20200421-WA0000-1-2048x1109-2.jpg') no-repeat center center/cover;
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        }
        .hero h1 {
            font-size: 3rem;
        }
        .services-section {
            padding: 50px 0;
            background-color: #2b2e33;
        }
        .services-section h2 {
            text-align: center;
            color: #ffffff;
            margin-bottom: 40px;
        }
        .service-card {
            background-color: #343a40;
            border: none;
            border-radius: 8px;
            padding: 20px;
            color: #f8f9fa;
            box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.5);
            /*text-align: center;*/
        }
        .service-card h1 {
            margin-bottom: 15px;
            color: #ffffff;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        }
        .service-card h4 {
            margin-bottom: 15px;
            color: #ffffff;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        }
        .service-card p {
          font-style: italic;
        }
        .service-card h5 {
            margin-bottom: 15px;
            color: #ffffff;
        }
        .service-card a {
            color: #6bb1f7;
            /*text-align: center;*/
        }
        .service-card a:hover {
            color: #ffffff;
            /*text-align: center;*/
        }
        footer {
            background-color: #001F3F;
            color: #ffffff;
            padding: 20px 0;
            text-align: center;
            box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.5);
            border-radius: 5px;
        }
        .mdi-icon {
            margin-right: 10px;
        }
        .build-number-overlay {
            position: fixed;
            bottom: 10px;
            right: 10px;
            background-color: rgba(83, 84, 87, 0.1);
            color: rgba(247, 247, 247, 0.3);
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 0.9rem;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
        }
        
        .toggle-btn {
          position: fixed;
          top: 30px;
          left: 245px;
          background-color: #001F3F;
          color: #ffffff;
          border: none;
          padding: 5px 10px;
          border-radius: 5px;
          cursor: pointer;
          z-index: 1000;
          transition: left 0.3s;
          box-shadow: 2px 2px 5px rgba(0, 0, 0, 1);
      }
      .toggle-btn.collapsed {
          left: 10px;
      }
      .main-content.collapsed {
          margin-left: 10px;
          width: calc(100% - 10px);
      }
      .navbar.collapsed {      
        position: fixed;         
        top: 0;        
        left: -230px;
      }