/* --- General Body and Typography --- */
body {
    font-family: 'Poppins', sans-serif; /* Use a modern, attractive font (requires importing in main.css or via Google Fonts) */
}

/* --- Navigation Bar (Navbar) Improvements --- */
.navbar-brand img {
    /* Subtle hover effect on the logo */
    transition: transform 0.3s ease;
}
.navbar-brand img:hover {
    transform: scale(1.05);
}

.navbar-nav .nav-item .nav-link {
    color: #000 !important; /* Ensure nav links are white against a dark background */
    font-weight: 500;
    position: relative;
    padding-bottom: 5px; /* Space for the underline */
    transition: color 0.3s ease-in-out;
}

.navbar-nav .nav-item .nav-link:hover {
    color: #FF7043 !important; /* Orange accent color on hover */
}

/* Animated Underline Effect */
.navbar-nav .nav-item .nav-link::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #FF7043; /* Orange underline */
    position: absolute;
    bottom: 0;
    left: 0;
    transition: width 0.3s ease-in-out;
}
.navbar-nav .nav-item .nav-link:hover::after {
    width: 100%;
}

/* --- Services Section Card Hover Effect --- */
#services {
    background: #f7f9fc; /* Light background for contrast */
}

.services-item {
    padding: 30px;
    border-radius: 8px;
    background: #ffffff;
    border-bottom: 4px solid #f0f0f0; /* Default subtle border */
    transition: all 0.4s ease-in-out;
}

.services-item:hover {
    transform: translateY(-8px); /* Lifts the card up */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Stronger shadow for depth */
    border-bottom-color: #4CAF50; /* Green accent on hover */
}

.services-item .icon {
    font-size: 40px;
    color: #555;
    transition: all 0.4s ease-in-out;
}

.services-item:hover .icon i {
    color: #4CAF50; /* Changes icon color to green */
    transform: scale(1.1) rotate(5deg); /* Subtle icon animation */
}

.services-content h3 a {
    transition: color 0.3s ease;
}

.services-content h3 a:hover {
    color: #4CAF50; /* Hover color for the service title */
}

/* --- Feature Section Enhancements --- */
.text-wrapper .title-hl {
    color: #333;
    border-left: 5px solid #FF7043; /* Add a strong accent line */
    padding-left: 15px;
    margin-bottom: 40px;
    font-size: 36px;
}

.features-box {
    margin-bottom: 30px;
    padding: 15px;
    transition: all 0.3s ease;
}

.features-box:hover {
    background-color: #e8f5e9; /* Light background on hover */
    border-radius: 5px;
}

.features-icon i {
    color: #4CAF50; /* Consistent icon color */
    font-size: 30px;
}

.feature-thumb {
    overflow: hidden;
}

.feature-thumb img {
    transition: transform 0.8s ease;
}

.feature-thumb:hover img {
    transform: scale(1.05); /* Zoom effect on the feature image */
}
/* --- Contact Section Buttons & Elements --- */
.contact-block h2 {
    border-bottom: 2px solid #FF7043;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.btn-common {
    background-color: #FF7043;
    border-color: #FF7043;
    transition: all 0.4s ease;
}

.btn-common:hover {
    background-color: #E65100; /* Darker orange on hover */
    border-color: #E65100;
    transform: translateY(-2px); /* Subtle lift on button hover */
}

/* --- Footer Social Icons --- */
.footer-titel {
    color: #FF7043;
}

.social-icon a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    margin-right: 10px;
    background-color: #555;
    color: #fff;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.social-icon a:hover {
    transform: scale(1.1);
}

.social-icon .facebook:hover {
    background-color: #3b5998;
}
.social-icon .twitter:hover {
    background-color: #1da1f2;
}
.social-icon .instagram:hover {
    background-color: #e1306c;
}
.social-icon .linkedin:hover {
    background-color: #0077b5;
}

/* Smooth scrolling for the whole page */
html {
    scroll-behavior: smooth;
}