/* Navbar Item Hover Effects */
.navigation .navbar .navbar-nav .nav-item a {
    position: relative;
    transition: color 0.3s ease;
    /* padding: 10px 15px; */
}

.navigation .navbar .navbar-nav .nav-item a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background: #000;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.navigation .navbar .navbar-nav .nav-item a:hover {
    color: #000 !important;
}

.navigation .navbar .navbar-nav .nav-item a:hover::after {
    width: 100%;
}

/* Active State for Current Page */
.navigation .navbar .navbar-nav .nav-item a.active {
    color: #000 !important;
}

.navigation .navbar .navbar-nav .nav-item a.active::after {
    width: 100%;
}

/* Additional Navbar Styling */
/* .navigation {
    padding: 10px 0 !important;
} */

.navigation .navbar {
    padding: 0;
}

/* .navigation .navbar-brand img {
    max-height: 50px;
    width: auto;
} */

.navigation .navbar .navbar-nav .nav-item {
    margin: 0 5px;
}

/* Mobile Responsive Adjustments */
@media (max-width: 991px) {
    /* .navigation .navbar .navbar-nav .nav-item a {
        padding: 8px 15px;
    } */
    
    /* .navigation .navbar .navbar-nav .nav-item a::after {
        bottom: 5px;
    } */
}
.footer-title {
    color: white; /* Title color */
    border-bottom: 2px solid #17a2b7; /* Given border color */
    padding-bottom: 10px;
    margin-bottom: 15px;
    display: inline-block;
}

.footer-list li {
    /* color: gray; */
    transition: color 0.3s ease;
    cursor: pointer;
}

.footer-list li:hover {
    color: #17a2b7;
}

.project-thumb img {
    border: 3px solid #17a2b7; /* Choose your color */
    border-radius: 10px;       /* Optional: rounded corners */
    padding: 5px;              /* Optional: spacing inside border */
}

.project-thumb:hover {
    box-shadow: 0 0 15px rgba(23, 162, 183, 0.5); /* light glow */
    transform: scale(1.02);
    transition: all 0.3s ease;
}

/* Title Border Animation - Only for main section titles */
.section-title .title {
    position: relative;
    display: inline-block;
    padding-bottom: 5px;
}

.section-title .title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 3px;
    background: #007bff; /* Your theme color */
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

/* Hover effect for section titles only */
.section-title .title:hover::after {
    width: 100%;
}

/* Rotate icon animation for services cards */
.single-services {
    transition: all 0.3s ease;
}

.single-services i {
    transition: transform 0.5s ease;
    display: inline-block;
}

.single-services:hover i {
    transform: rotate(360deg);
}

/* Optional: Add a slight bounce effect */
@keyframes iconRotate {
    0% {
        transform: rotate(0deg);
    }
    80% {
        transform: rotate(385deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.single-services:hover i {
    animation: iconRotate 0.8s ease-out;
}

/* Keep other hover effects on the card */
.single-services:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Specific styles for different section titles */
.banner-area .section-title .title::after {
    background: #007bff;
}

.services-area .section-title .title::after {
    background: #007bff;
}

.team-area .section-title .title::after {
    background: #007bff;
}

.projects-area .section-title .title::after {
    background: #007bff;
}

.contact-area .section-title .title::after {
    background: #007bff;
}

/* Left aligned titles (if needed) */
.left-aligned.title::after {
    left: 0;
    transform: none;
}

/* Center aligned titles */
.text-center .title::after {
    left: 50%;
    transform: translateX(-50%);
}

/* Animation duration adjustment */
.title::after {
    transition-duration: 0.4s;
}

/* Make border more visible on light backgrounds */
.light-bg .title::after {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Example with a different theme color */
.title::after {
    background: #041436; /* Replace with your color code */
}

/* Social Media Icon Rotation Animation */
.team-overlay ul li a i,
.footer-social ul li a i {
    transition: transform 0.5s ease;
    display: inline-block;
}

.team-overlay ul li a:hover i,
.footer-social ul li a:hover i {
    transform: rotate(360deg);
}

/* Contact Form Input Animations */
.contact-form-area .input-box input,
.contact-form-area .input-box textarea {
    transition: all 0.3s ease;
    border: 1px solid #e5e5e5;
    position: relative;
    background: transparent;
}

/* Hover effect */
.contact-form-area .input-box input:hover,
.contact-form-area .input-box textarea:hover {
    border-color: #007bff;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.1);
}

/* Focus effect when typing */
.contact-form-area .input-box input:focus,
.contact-form-area .input-box textarea:focus {
    border-color: #007bff;
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.2);
    transform: translateY(-2px);
    outline: none;
}

/* Label animation */
.contact-form-area .input-box {
    position: relative;
    margin-bottom: 20px;
}

/* Placeholder animation */
.contact-form-area .input-box input::placeholder,
.contact-form-area .input-box textarea::placeholder {
    transition: all 0.3s ease;
}

.contact-form-area .input-box input:focus::placeholder,
.contact-form-area .input-box textarea:focus::placeholder {
    opacity: 0.7;
    transform: translateX(10px);
}

/* Add subtle background effect */
.contact-form-area .input-box input:focus,
.contact-form-area .input-box textarea:focus {
    background: rgba(255, 255, 255, 0.9);
}

/* Submit button hover effect */
.contact-form-area .input-box button {
    transition: all 0.3s ease;
}

.contact-form-area .input-box button:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
}