body::before {
    display: block;
    content: '';
    height: 60px;
}

/* Logo responsive */
    .logo {
        width: 280px;
        height: auto;
        display: block;
    }
    @media (max-width: 992px) {
        .logo { width: 200px; }
    }
    @media (max-width: 576px) {
        .logo { width: 150px; }
        .navbar { padding: 0.5rem 1rem; }
        .navbar-nav { text-align: center; }
        .navbar-nav .nav-item { margin-bottom: 0.5rem; }
    }

    /* Remove Bootstrap default toggler icon */
    .navbar-toggler-icon {
        display: none !important;
    }

    /* Custom hamburger lines */
    .navbar-toggler {
        border: none;
        padding: 0.25rem 0.5rem;
    }
    .toggler-icon {
        display: block;
        width: 25px;
        height: 3px;
        margin: 5px auto;
        background-color: #333;
        transition: all 0.3s ease-in-out;
    }

    /* Animate into X */
    .navbar-toggler.active .toggler-icon:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .navbar-toggler.active .toggler-icon:nth-child(2) {
        opacity: 0;
    }
    .navbar-toggler.active .toggler-icon:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }
	
/* Nav link hover effects */
        .nav-link {
            position: relative;
            padding: 0.5rem 1rem !important;
            font-weight: 500;
            transition: color 0.3s;
        }
        
        .nav-link:hover {
            color: #e77719 !important;
        }
        
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            background-color: #e77719;
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }
        
        .nav-link:hover::after {
            width: 70%;
        }

@media(min-width: 768px) {
    .news-input {
        width: 50%;
    }
}

.navbar-brand {
    display: flex;
    align-items: center;
}

.ball {
	border-radius: 50%;
	background-color: #e77719ff;
	offset-path: path('M 5.1 7.3 l 16.8 49.1 c 2.6 5.8 8.7 3.9 10.2 0 l 15.5 -45.4 c 1.1 -2.2 2.7 -3.6 5.2 -3.7 h 209.3');
	offset-distance: 0%;
	animation: red-ball 4s linear alternate infinite;
}
@keyframes red-ball {
  from {
	offset-distance: 0%;
  }
  to {
	offset-distance: 100%;
  }
}

.enhanced-hover {
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  border: 1px solid transparent;
  will-change: transform, box-shadow;
}
.enhanced-hover:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 0.8rem 2rem rgba(0, 123, 255, 0.3);
  border-color: rgba(0, 123, 255, 0.25);
}

/* Optional: soft image tint on hover */
.hover-img {
  transition: filter 0.3s ease, transform 0.3s ease;
}
.enhanced-hover:hover .hover-img {
  filter: brightness(1.1);
  transform: scale(1.05);
}

/* Set Bootstrap primary variable */
  :root {
    --bs-primary: #e77719;
  }

  /* Override Bootstrap utility classes using hardcoded colors */
  .btn-primary {
    background-color: #e77719 !important;
    border-color: #e77719 !important;
    color: #fff !important;
  }

  .btn-primary:hover,
  .btn-primary:focus,
  .btn-primary:active {
    background-color: #cf6816 !important; /* darker for interaction */
    border-color: #b75813 !important;
    color: #fff !important;
  }

  .bg-primary {
    background-color: #e77719 !important;
  }

  .text-primary {
    color: #e77719 !important;
  }

  .border-primary {
    border-color: #e77719 !important;
  }
  
section {
  scroll-margin-top: 112px; /* equal to navbar height */
}

#services .card {
	transition: height 0.4s ease;
	overflow: hidden;
}

#services .collapse {
	transition: opacity 0.4s ease;
	opacity: 0;
}

#services .collapse.show {
	opacity: 1;
}

/* Optional: smoother button appearance */
.read-more-btn {
	transition: all 0.2s;
}
	  
#iot-list span {
    opacity: 0;
    transition: opacity 0.6s ease;
    display: inline-block;
}