:root {
  --primary-color: #007bff; /* Example: Blue */
  --secondary-color: #6c757d; /* Example: Gray */
  --success-color: #28a745; /* Example: Green */
  --danger-color: #dc3545; /* Example: Red */
  --light-background: #f8f9fa; /* Example: Light gray background */
  --dark-text: #343a40; /* Example: Dark text color */
  --btn-custom-color: #ff5722; /* Example: Custom button color */
  --btn-hover-color: #e64a19; /* Example: Custom button hover color */
  --btn-gradient-start: #0000ff; /* Gradient start color */
  --btn-gradient-end: #4682b4; /* Gradient end color */
  --dark-bg: #212529; /* Dark background color */
  --light-text: #f8f9fa; /* Light text color */
}

/***** add image for main-content *****/
.main-content {
  background-image: url("../images/background.jpg");
  background-size: cover;
  background-position: center;
  color: white;
  padding: 100px 0;
  height: 400px;
}
/***** End Section *****/

.carousel-item img {
  height: calc(100vh - 80px);
  object-fit: cover;
}

.card-img-top {
  height: 250px;
  object-fit: cover;
}

.card-bottom {
  height: 200px;
  overflow: hidden;
}

.img-design {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  object-fit: cover;
}

.btn-custom {
  background-color: var(--btn-custom-color);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

navbar .nav-link {
  color: var(--light-text);
  font-weight: 600;
  transition: color 0.3s ease;
}

navbar .nav-link:hover {
  color: var(--btn-custom-color);
}

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

.nav-item.active {
  font-weight: 700;
  border-bottom: 5px solid var(--btn-custom-color);
}

.company-info {
  background-color: var(--btn-custom-color);
  color: var(--light-text);
  padding: 40px 0;
}

.company-info h1 {
  font-size: 50px;
  font-weight: bold;
}

.company-info p {
  font-weight: bold;
}

.gallery-image{
  height: 200px;
  width: 100%;
  object-fit: cover;
}

.bg-contact{
  background-image: url("../images/banner-3.jpg");
  background-size: cover;
}


.logo {
  width: 300px;
}


@media (max-width: 576px) {
  .logo {
    width: 220px;
  }

  .quality-design-img {
    text-align: center;
    margin-bottom: 20px;
  }
}