body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc; /* slate-50 */
}
html {
    scroll-behavior: smooth;
}
/* -- Scrolling Marquee for Status Bar -- */
@keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.animate-scroll {
    animation: scroll 30s linear infinite; 
}
.gradient-bg {
    /* This rule applies both a semi-transparent blue gradient AND your background image */
    background-image: 
        linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.95)), 
        url('/assets/images/background.png');
    
    /* These ensure the image covers the whole area */
    background-size: cover;

    /* This is the default desktop position */
    background-position: center center;
}
.chat-bubble-user {
    background-color: #0284c7; /* sky-600 */
    color: white;
}
.chat-bubble-ai {
    background-color: #e2e8f0; /* slate-200 */
    color: #1e293b; /* slate-800 */
}
/* Custom scrollbar for chatbox */
#chatbox::-webkit-scrollbar {
    width: 6px;
}
#chatbox::-webkit-scrollbar-track {
    background: #f1f5f9; /* slate-100 */
}
#chatbox::-webkit-scrollbar-thumb {
    background: #94a3b8; /* slate-400 */
    border-radius: 3px;
}
#chatbox::-webkit-scrollbar-thumb:hover {
    background: #6474b; /* slate-500 */
}
/* --- Interactive Service Cards --- */
.service-card {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.service-overview {
    max-height: 0;
    opacity: 0;
    transition: max-height 0.5s ease-out, opacity 0.3s ease-in, margin-top 0.5s ease-out;
}
.service-card.selected {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* shadow-lg */
    border-color: #0ea5e9; /* sky-500 */
}
.service-card.selected .service-overview {
    max-height: 200px;
    opacity: 1;
    margin-top: 1rem;
}
/* --- Navigation Dropdown --- */
#services-dropdown-menu {
    padding-top: 1rem; /* Creates an invisible bridge */
    top: 100%; /* Positions the menu right below the button */
}
/* Show the dropdown menu when hovering over its container on larger screens */
@media (min-width: 1024px) {
    #services-dropdown-container:hover #services-dropdown-menu {
        display: block;
    }
}
/* --- Mobile Specific Adjustments --- */
/* This targets screens smaller than 768px (tablets and phones) */
@media (max-width: 767px) {
    /* We reduce the vertical padding to make the hero section shorter on mobile */
    .gradient-bg > div {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
        padding-left: 0;
        padding-right: 0;
    }

    /* This shifts the image focus to the top on mobile */
    .gradient-bg {
        background-position: center top; 
    }
}