/* Modern Hero Design */
.hero-section {
    background: linear-gradient(to right, #1e40af 0%, #3b82f6 50%, #1e40af 100%);
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: 
        linear-gradient(45deg, transparent 48%, rgba(255,255,255,.03) 49%, rgba(255,255,255,.03) 51%, transparent 52%),
        linear-gradient(-45deg, transparent 48%, rgba(255,255,255,.03) 49%, rgba(255,255,255,.03) 51%, transparent 52%);
    background-size: 60px 60px;
    z-index: 1;
}

.hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    z-index: 2;
}

/* Page Transition Fade Effect */
html {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

html.fade-out {
    opacity: 0;
}

body {
    transition: background-color 0.3s ease;
}

/* Mobile adjustment for background */
@media (max-width: 768px) {
    .hero-section {
        background-attachment: scroll;
        background-position: center center;
    }
}

.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.15);
}

/* Nav Transition */
#main-nav {
    transition: background-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}

/* Active Nav Link Styling with underline */
.nav-link {
    position: relative;
    padding-bottom: 8px;
    transition: color 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: #1e40af;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link.active,
.nav-link.active-nav-link {
    color: #1e40af !important;
    font-weight: bold;
}

.nav-link.active::after,
.nav-link.active-nav-link::after {
    width: 100%;
    background-color: #1e40af;
}

/* For mobile active states in menu */
#mobile-menu .nav-link.active,
#mobile-menu .nav-link.active-nav-link {
    background-color: rgba(30, 64, 175, 0.1);
    border-left: 4px solid #1e40af;
    padding-left: calc(0.75rem - 4px);
}

#mobile-menu .nav-link.active::after,
#mobile-menu .nav-link.active-nav-link::after {
    display: none;
}

/* Hide right side of hero section on mobile */
.hero-right-section {
    display: block;
}

/* Hide all right-side content sections on mobile */
.right-content,
.right-section,
.right-side,
.content-right {
    display: block;
}

@media (max-width: 768px) {
    .hero-right-section {
        display: none !important;
    }
    
    /* Extra specificity for stubborn elements */
    div.hero-right-section {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
    
    /* Even more specific targeting */
    .hero-grid div.hero-right-section {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
    
    /* Hide card sections with absolute positioning */
    .absolute.top-8.right-8,
    .absolute.left-8.top-1\/2,
    .absolute.bottom-8.right-12 {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
    
    /* Hide all right-side content sections on mobile */
    .right-content,
    .right-section,
    .right-side,
    .content-right {
        display: none !important;
    }
    
    /* On mobile, make the left side (text) take full width */
    .hero-left-section {
        width: 100%;
        grid-column: span 2;
    }
    
    /* Ensure the grid behaves properly on mobile */
    .hero-grid {
        grid-template-columns: 1fr !important;
    }
}