/**
 * GLASSMORPHISM FIXES
 * Bhavyam Infotech - Navigation & Animation Fixes
 * Created: 2026-01-06
 *
 * Fixes for:
 * - Navigation menu/submenu not opening properly
 * - Blinking effects
 * - Mega menu display issues
 * - Smooth transitions
 */

/* ===================================
   DISABLE CONFLICTING GLASS EFFECTS ON HEADER
   =================================== */

/* Remove automatic glass header application to prevent conflicts */
.tj-header-area {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: background 0.3s ease, box-shadow 0.3s ease !important;
    overflow: visible !important;
}

/* Ensure all header containers allow overflow for mega menu */
.tj-header-area .container,
.tj-header-area .header-info-wrapper,
.tj-header-area .header-menu,
.tj-header-area .header-menu nav,
.tj-header-area .header-menu nav ul {
    overflow: visible !important;
}

.tj-header-area.sticky {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* ===================================
   FIX NAVIGATION MENU ITEMS
   =================================== */

/* Remove glass-menu-item auto-application */
.header-menu nav ul li {
    position: relative;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.header-menu nav ul li a {
    display: block;
    padding: 10px 15px;
    color: #051229;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
    background: transparent !important;
}

.header-menu nav ul li a:hover,
.header-menu nav ul li.active > a {
    color: #C47300;
}

/* ===================================
   MEGA MENU - PROFESSIONAL COMPACT DESIGN
   =================================== */

.header-menu .mega-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(12px);
    width: 680px;
    max-width: calc(100vw - 40px);
    background: #fff !important;
    border: 1px solid rgba(5, 18, 41, 0.08) !important;
    border-radius: 12px !important;
    padding: 0 !important;
    margin-top: 0 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 99999 !important;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05),
                0 10px 30px -5px rgba(0,0,0,0.1),
                0 1px 3px rgba(0,0,0,0.04) !important;
    display: block !important;
    pointer-events: none;
    overflow: hidden;
}

.header-menu nav ul li.has-dropdown:hover .mega-menu {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Prevent mega menu from overflowing viewport */
@media (max-width: 840px) {
    .header-menu .mega-menu {
        left: 20px !important;
        right: 20px !important;
        transform: translateX(0) translateY(12px);
        width: auto;
    }

    .header-menu nav ul li.has-dropdown:hover .mega-menu {
        transform: translateX(0) translateY(0);
    }
}

/* Force-hide desktop mega menu on mobile */
@media (max-width: 1199px) {
    .header-menu,
    .header-menu .mega-menu,
    .mega-menu,
    .mega-menu-inner,
    .mega-menu-grid {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}

/* Inner wrapper */
.mega-menu-inner {
    display: flex;
    flex-direction: column;
}

/* Top accent bar */
.mega-menu-inner::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, #C47300 0%, #B9B35A 50%, #C47300 100%);
    border-radius: 12px 12px 0 0;
}

/* Two-column grid */
.mega-menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

/* Column with divider */
.mega-menu-col {
    padding: 20px 12px 16px;
}

.mega-menu-col:first-child {
    border-right: 1px solid rgba(5, 18, 41, 0.06);
}

/* Reset text-transform inherited from parent nav */
.mega-menu,
.mega-menu * {
    text-transform: none !important;
}

/* Column category label - only this should be uppercase */
.mega-menu-col-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    color: #94a3b8 !important;
    padding: 0 12px 10px;
    margin-bottom: 6px;
}

/* Service link rows */
.mega-menu-link {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    margin-bottom: 4px;
    border-radius: 8px;
    text-decoration: none !important;
    transition: background 0.2s ease;
    position: relative;
}

.mega-menu-col .mega-menu-link:last-of-type {
    margin-bottom: 0;
}

.mega-menu-link:hover {
    background: rgba(196, 115, 0, 0.06);
}

/* Compact icons - inline left */
.mega-menu .mega-menu-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    background: linear-gradient(135deg, rgba(196, 115, 0, 0.1) 0%, rgba(185, 179, 90, 0.1) 100%) !important;
    border: 1px solid rgba(196, 115, 0, 0.12) !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all 0.25s ease;
}

.mega-menu-link:hover .mega-menu-icon {
    background: linear-gradient(135deg, #C47300 0%, #B9B35A 100%) !important;
    border-color: transparent !important;
    transform: scale(1.05);
}

.mega-menu .mega-menu-icon i {
    font-size: 15px !important;
    color: #C47300 !important;
    transition: color 0.25s ease;
    line-height: 1 !important;
}

.mega-menu-link:hover .mega-menu-icon i {
    color: #fff !important;
}

/* Text block - right of icon */
.mega-menu-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0;
    flex: 1 !important;
}

.mega-menu-title {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    line-height: 1.3 !important;
    transition: color 0.2s ease;
    text-transform: none !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mega-menu-link:hover .mega-menu-title {
    color: #C47300 !important;
}

.mega-menu-desc {
    font-size: 11.5px !important;
    color: #94a3b8 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Arrow indicator */
.mega-menu-arrow {
    font-size: 10px !important;
    color: #cbd5e1;
    opacity: 0;
    transform: translateX(-4px);
    transition: all 0.2s ease;
    flex-shrink: 0 !important;
    text-transform: none !important;
}

.mega-menu-link:hover .mega-menu-arrow {
    opacity: 1;
    transform: translateX(0);
    color: #C47300;
}

/* Footer "Explore all" strip */
.mega-menu-footer {
    border-top: 1px solid rgba(5, 18, 41, 0.06);
    padding: 10px 20px;
    background: rgba(248, 250, 252, 0.6);
}

.mega-menu-footer-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #C47300;
    text-decoration: none !important;
    transition: gap 0.25s ease;
}

.mega-menu-footer-link:hover {
    gap: 12px;
    color: #a36200;
}

.mega-menu-footer-link i {
    font-size: 12px;
    transition: transform 0.25s ease;
}

.mega-menu-footer-link:hover i {
    transform: translateX(2px);
}

/* ===================================
   FIX BLINKING ANIMATIONS
   =================================== */

/* Disable blinking on glass particles */
.glass-particle {
    animation: floatParticle 15s infinite ease-in-out !important;
}

/* Remove any conflicting keyframe that causes blinking */
@keyframes floatParticle {
    0% {
        transform: translateY(100vh) translateX(0) rotate(0deg);
        opacity: 0;
    }
    5% {
        opacity: 0.6;
    }
    95% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-100px) translateX(100px) rotate(360deg);
        opacity: 0;
    }
}

/* Smooth liquid blob animations without blinking */
.liquid-blob {
    animation: float 20s infinite ease-in-out;
    opacity: 0.5 !important;
    transition: opacity 0.5s ease;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.5;
    }
    25% {
        transform: translate(50px, -50px) scale(1.1);
        opacity: 0.5;
    }
    50% {
        transform: translate(-30px, 40px) scale(0.9);
        opacity: 0.5;
    }
    75% {
        transform: translate(40px, 30px) scale(1.05);
        opacity: 0.5;
    }
}

/* ===================================
   FIX CARD HOVER EFFECTS - NO BLINKING OR INVISIBILITY
   =================================== */

.service-item.glass-effect,
.choose-item.glass-effect,
.value-item.glass-effect,
.counter-card.glass-effect {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.service-item.glass-effect:hover,
.choose-item.glass-effect:hover,
.value-item.glass-effect:hover,
.counter-card.glass-effect:hover {
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(196, 115, 0, 0.3) !important;
    box-shadow: 0 12px 48px rgba(196, 115, 0, 0.2),
                inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-8px) scale(1.02) !important;
}

/* Ensure all child elements are visible */
.service-item.glass-effect *,
.choose-item.glass-effect *,
.value-item.glass-effect *,
.counter-card.glass-effect * {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Specific fixes for service items */
.service-item.glass-effect .service-icon,
.service-item.glass-effect .service-content,
.service-item.glass-effect .service-title,
.service-item.glass-effect .service-link {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Specific fixes for choose/value items */
.choose-item.glass-effect .choose-icon,
.choose-item.glass-effect .choose-title,
.value-item.glass-effect .value-icon,
.value-item.glass-effect .value-title,
.value-item.glass-effect .value-number {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Specific fixes for counter cards */
.counter-card.glass-effect .counter-card-inner,
.counter-card.glass-effect .counter-number,
.counter-card.glass-effect .counter-label,
.counter-card.glass-effect .counter-icon {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Remove shine effect that might cause blinking */
.glass-shine::after {
    animation: shine 4s infinite !important;
    animation-delay: 1s;
}

@keyframes shine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
        opacity: 0;
    }
}

/* ===================================
   FIX GLASS CARD BEFORE ELEMENT
   =================================== */

.glass-card::before {
    transition: left 0.7s ease;
    opacity: 1 !important;
}

/* ===================================
   SMOOTH SCROLL TRIGGERED ANIMATIONS
   =================================== */

.fade-in-up,
.slide-in-left,
.slide-in-right,
.scale-in,
.rotate-in {
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.fade-in-up.visible,
.slide-in-left.visible,
.slide-in-right.visible,
.scale-in.visible,
.rotate-in.visible {
    animation: none !important;
}

/* ===================================
   BUTTON STYLING FIXES
   =================================== */

/* Primary button hover */
.tj-btn-primary:hover,
.btn-primary:hover {
    color: #fff !important;
    background: linear-gradient(135deg, #B9B35A 0%, #C47300 100%) !important;
    border-color: #C47300 !important;
}

/* Secondary button hover */
.tj-btn-secondary:hover,
.btn-secondary:hover {
    color: #fff !important;
    background: #C47300 !important;
    border-color: #C47300 !important;
}

/* Ensure button icons are visible */
.tj-btn-primary i,
.tj-btn-secondary i,
.btn-primary i,
.btn-secondary i {
    opacity: 1 !important;
    color: inherit !important;
}

/* Secondary button on dark CTA backgrounds - make visible with white border */
.tj-cta-section .tj-btn-secondary,
.tj-cta-section-two .tj-btn-secondary,
.tj-contact-cta-section .tj-btn-secondary {
    background: transparent !important;
    color: #fff !important;
    border: 2px solid #fff !important;
}

.tj-cta-section .tj-btn-secondary:hover,
.tj-cta-section-two .tj-btn-secondary:hover,
.tj-contact-cta-section .tj-btn-secondary:hover {
    background: #fff !important;
    color: #371C15 !important;
    border-color: #fff !important;
}

/* ===================================
   DISABLE PROBLEMATIC MORPHING ON HOVER
   =================================== */

.morphing-gradient {
    animation: morphGradient 15s ease infinite !important;
}

@keyframes morphGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ===================================
   FIX CTA SECTION HEIGHT
   =================================== */

.tj-cta-section,
.tj-cta-section-two,
.tj-contact-cta-section {
    min-height: auto !important;
    height: auto !important;
    padding: 80px 0 !important;
    overflow: hidden !important;
}

/* Constrain liquid blobs within section */
.tj-cta-section .liquid-blob,
.tj-cta-section-two .liquid-blob,
.tj-contact-cta-section .liquid-blob {
    position: absolute !important;
    max-height: 100% !important;
    max-width: 100% !important;
}

/* Ensure container is properly sized */
.tj-cta-section .container,
.tj-cta-section-two .container,
.tj-contact-cta-section .container {
    position: relative !important;
    z-index: 2 !important;
}

/* ===================================
   FIX HEADER BLUR TRANSITION
   =================================== */

.tj-header-area {
    will-change: background, backdrop-filter;
    transform: translateZ(0);
}

/* ===================================
   FIX OVERFLOW SCROLLBARS GLOBALLY
   =================================== */

/* Contain decorative pseudo-elements within sections */
.tj-hero-section-three,
.tj-about-section,
.tj-about-section-two,
.tj-service-section,
.tj-service-section-two,
.tj-choose-us-section,
.tj-why-choose-section,
.tj-portfolio-section,
.tj-counter-section,
.tj-counter-section-new,
.tj-values-section,
.tj-mission-vision-section,
.tj-testimonial-section,
.tj-blog-section,
.tj-breadcrumb-section,
.tj-team-section,
.tj-faq-section,
.tj-contact-section {
    overflow: hidden !important;
}

/* Ensure all containers allow proper overflow */
.tj-hero-section-three .container,
.tj-about-section .container,
.tj-about-section-two .container,
.tj-service-section .container,
.tj-service-section-two .container,
.tj-choose-us-section .container,
.tj-why-choose-section .container,
.tj-portfolio-section .container,
.tj-counter-section .container,
.tj-counter-section-new .container,
.tj-values-section .container,
.tj-mission-vision-section .container,
.tj-testimonial-section .container,
.tj-blog-section .container,
.tj-breadcrumb-section .container,
.tj-team-section .container,
.tj-faq-section .container,
.tj-contact-section .container {
    overflow: visible !important;
}

/* Prevent overflow on rows */
.row {
    overflow: visible !important;
}

/* Ensure columns don't create overflow */
[class*="col-"] {
    overflow: visible !important;
}

/* Fix for choose-us items container */
.choose-us-wrapper,
.choose-item-wrapper,
.value-item-wrapper,
.service-wrapper,
.values-section-wrapper,
.counter-section-wrapper {
    overflow: hidden !important;
}

/* Ensure value items and counter cards display properly */
.value-item,
.counter-card,
.counter-card-inner,
.mission-box,
.vision-box {
    overflow: hidden !important;
}

/* Prevent glass particles from causing overflow */
.glass-particles-container {
    overflow: hidden !important;
    pointer-events: none !important;
}

/* Ensure body and html don't have unwanted overflow */
body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

html {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* Fix for specific card grids that might cause overflow */
.service-items-wrapper,
.choose-items-wrapper,
.portfolio-wrapper,
.blog-wrapper {
    overflow: visible !important;
}

/* Contain card pseudo-elements (::before/::after) within card boundaries */
.service-item,
.choose-item,
.value-item,
.counter-card,
.portfolio-item,
.blog-item {
    overflow: hidden !important;
}

/* ===================================
   RESPONSIVE MEGA MENU FIXES
   =================================== */

@media (max-width: 1199px) {
    .header-menu .mega-menu {
        width: 580px;
    }
}

@media (max-width: 991px) {
    .header-menu .mega-menu {
        width: 480px;
    }

    .mega-menu-grid {
        grid-template-columns: 1fr;
    }

    .mega-menu-col:first-child {
        border-right: none;
        border-bottom: 1px solid rgba(5, 18, 41, 0.06);
        padding-bottom: 12px;
    }

    .mega-menu-col:last-child {
        padding-top: 12px;
    }

    /* Disable glass effects on mobile for performance */
    .glass-particle,
    .liquid-blob {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .header-menu .mega-menu {
        width: calc(100vw - 40px);
        max-height: 70vh;
        overflow-y: auto;
    }
}

/* ===================================
   PERFORMANCE OPTIMIZATIONS
   =================================== */

/* GPU Acceleration for smooth transitions */
.mega-menu,
.mega-menu-link,
.glass-card {
    transform: translateZ(0);
    will-change: transform, opacity;
}

/* Prevent layout shift */
.header-menu nav ul li.has-dropdown {
    position: relative;
}

.mega-menu {
    position: absolute;
    will-change: opacity, visibility, transform;
}

/* ===================================
   ACCESSIBILITY - REDUCE MOTION
   =================================== */

@media (prefers-reduced-motion: reduce) {
    .glass-particle,
    .liquid-blob,
    .glass-shine::after,
    .morphing-gradient {
        animation: none !important;
    }

    .mega-menu,
    .mega-menu-link,
    .glass-card {
        transition-duration: 0.05s !important;
    }
}

/* ===================================
   Z-INDEX MANAGEMENT
   =================================== */

.tj-header-area {
    z-index: 9999 !important;
    position: relative !important;
}

.header-menu {
    position: static !important;
}

.header-menu nav ul li.has-dropdown {
    position: relative !important;
}

.mega-menu {
    z-index: 99999 !important;
}

.glass-particles-container {
    z-index: 1;
}

.liquid-blob {
    z-index: 0;
}

/* ===================================
   PREVENT FLICKERING ON PAGE LOAD
   =================================== */

.glass-particle,
.liquid-blob {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}

/* Prevent FOUC (Flash of Unstyled Content) */
body:not(.liquid-glass-loaded) .glass-particle,
body:not(.liquid-glass-loaded) .liquid-blob {
    opacity: 0 !important;
    transition: opacity 0.5s ease;
}

body.liquid-glass-loaded .glass-particle,
body.liquid-glass-loaded .liquid-blob {
    opacity: 0.5;
}

/* ===================================
   CRITICAL FIX: PREVENT CARD INVISIBILITY
   =================================== */

/* Override any conflicting transforms or animations */
.service-item,
.choose-item,
.value-item,
.counter-card {
    will-change: transform, opacity !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
}

/* Ensure text and content remain visible */
.service-item *,
.choose-item *,
.value-item *,
.counter-card * {
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
}

/* Fix for service item number badges */
.service-number,
.choose-number,
.value-number,
.counter-badge {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2 !important;
    position: relative !important;
}

/* Fix for icons - White color for all card icons */
.service-icon i,
.choose-icon i,
.value-icon i,
.counter-icon i,
.contact-info-icon i {
    opacity: 1 !important;
    visibility: visible !important;
    color: #fff !important;
}

/* Prevent mix-blend-mode issues that can cause invisibility */
.service-item.glass-effect,
.choose-item.glass-effect,
.value-item.glass-effect,
.counter-card.glass-effect {
    mix-blend-mode: normal !important;
    isolation: auto !important;
}

/* Ensure proper stacking context */
.service-item.glass-effect,
.choose-item.glass-effect,
.value-item.glass-effect,
.counter-card.glass-effect {
    z-index: 1 !important;
    position: relative !important;
}

/* Fix for glass-reflection class */
.glass-reflection::before {
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Override glass-reflection ::before for card types that use background images.
   These cards use ::before for bg images (z-index:-2) and ::after for gradient overlay (z-index:-1).
   The generic .glass-reflection::before rule above must not interfere with this layering. */
.service-item.glass-reflection::before,
.choose-item.glass-reflection::before,
.value-item.glass-reflection::before,
.contact-info-item.glass-reflection::before {
    z-index: -2 !important;
    opacity: 0.35 !important;
    height: 100% !important;
    border-radius: 0 !important;
    filter: brightness(0.75) saturate(0.85) !important;
}

.glass-reflection > * {
    position: relative !important;
    z-index: 2 !important;
}

/* =============================================
   COUNTER CARD - Styled like other cards
   ============================================= */

/* Ensure all parent containers allow overflow */
.tj-counter-section-new,
.tj-counter-section-new .container,
.tj-counter-section-new .row,
.tj-counter-section-new [class*="col-"] {
    overflow: visible !important;
}

.counter-card,
.counter-card.glass-effect,
.counter-card.micro-3d {
    transform-style: flat !important;
    perspective: none !important;
    overflow: visible !important;
}

.counter-card:hover,
.counter-card.glass-effect:hover,
.counter-card.micro-3d:hover {
    transform: none !important;
    background: transparent !important;
}

/* Disable the counter-decoration circle animation */
.counter-decoration {
    display: none !important;
}

.counter-card.micro-3d .counter-icon,
.counter-card.micro-3d:hover .counter-icon {
    transform: none !important;
}

/* ===================================
   DISABLE MICRO-3D-RIPPLE ON CARDS
   Removes the orbit/circle shape effect
   =================================== */
.service-item.micro-3d-ripple::after,
.choose-item.micro-3d-ripple::after,
.value-item.micro-3d-ripple::after {
    display: none !important;
    content: none !important;
}

/* Hide any dynamically created ripple circles */
.service-item .micro-ripple-circle,
.choose-item .micro-ripple-circle,
.value-item .micro-ripple-circle {
    display: none !important;
}