/* Header styling */
.main-header {
    width: 100%;
    overflow: visible; /* Allow elements to overflow */
}

.header-main {
    background-color: #eef2f9; /* Light cool blue that complements the logo */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: visible; /* Allow shadows and effects to extend beyond */
}

/* Navbar links styling */
.nav-menu .nav-link {
    color: #333333;
    font-weight: 500;
    padding: 0.8rem 1rem;
    transition: all 0.3s ease;
    border-radius: 6px;
    margin: 0 2px;
}

.nav-menu .nav-link:hover {
    color: #007bff;
    background-color: rgba(0, 123, 255, 0.05);
    transform: translateY(-1px);
    text-decoration: none;
}

/* Logo styling */
.logo-link {
    display: block;
    position: relative;
    overflow: visible; /* Allow shine effect to overflow */
    z-index: 5; /* Ensure logo is above other elements */
    padding: 5px; /* Add some padding around the logo */
    margin: -5px; /* Compensate for padding to maintain layout */
}

.logo-image {
    border-radius: 50%; /* Make the logo completely round */
    overflow: hidden; /* Ensure the image doesn't overflow the rounded border */
    border: 2px solid #e1e8f5; /* Optional: subtle border */
    box-shadow: 
        0 6px 10px rgba(0, 0, 0, 0.15), /* Main shadow */
        0 0 0 1px rgba(0, 51, 102, 0.1), /* Thin border shadow */
        0 15px 20px rgba(0, 0, 0, 0.1), /* Distant shadow */
        0 3px 6px rgba(0, 51, 102, 0.2); /* Color accent shadow */
    animation: pulse 3s infinite ease-in-out; /* Subtle pulse animation */
    position: relative;
    transform: translateY(-3px); /* Slight lift for 3D effect */
    transition: all 0.3s ease;
    z-index: 2; /* Ensure proper stacking */
}

/* Enhanced 3D hover effect */
.logo-link:hover .logo-image {
    box-shadow: 
        0 8px 15px rgba(0, 0, 0, 0.2), 
        0 0 0 1px rgba(0, 51, 102, 0.15), 
        0 20px 30px rgba(0, 0, 0, 0.15), 
        0 3px 8px rgba(0, 51, 102, 0.3);
    transform: translateY(-5px); /* More lift on hover */
}

/* Logo pulse animation */
@keyframes pulse {
    0% { transform: scale(1) translateY(-3px); }
    50% { transform: scale(1.05) translateY(-3px); }
    100% { transform: scale(1) translateY(-3px); }
}

/* Logo shine effect - optimized for circular logo */
.logo-image {
    position: relative; /* Ensure position context for absolute child */
}

.logo-image::after {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 50%;
    height: 300%;
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(30deg);
    animation: shineLogo 4s infinite;
    z-index: 10; /* Ensure it's above the logo content */
    pointer-events: none; /* Doesn't interfere with clicks */
}

@keyframes shineLogo {
    0% { 
        left: -100%;
        top: -100%;
    }
    100% { 
        left: 150%;
        top: -100%;
    }
}

/* Fix for parent containers potentially clipping effects */
.col-lg-4, .col-md-5, .col-8, .d-flex.align-items-center {
    overflow: visible !important;
}

.logo-text h1 {
    color: #000000 !important;
    display: inline-block;
    transition: transform 0.3s ease;
}

.logo-text h1:hover {
    transform: translateY(-2px);
}

/* Gradient animation for the company name */
@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Mobile nav adjustments */
@media (max-width: 1199.98px) {
    .mobile-nav {
        background-color: #f8f9fa;
        border-top: 1px solid #eee;
    }
}