/*<!-- Custom CSS -->*/
  
        body {
            font-family: 'Inter', sans-serif;
            -webkit-tap-highlight-color: transparent;
        }




        /* style.css */
        @font-face {
            font-family: 'Archivo Black';
            /* ../ means "go out of css folder", then "into font folder" */
            src: url('font/archivo-black-v23-latin-regular.woff2') format('woff2');
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }




        h1, h2, h3, h4, .font-display {
            font-family: 'Archivo Black', sans-serif;
            font-style: italic;
        }

        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .group:hover .group-hover\:scale-110 {
            transform: scale(1.1);
        }
        
        .modal-backdrop {
            background-color: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(4px);
        }

        .jexxi-gradient {
            background: linear-gradient(to right, #ec4899, #a855f7, #ec4899);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            background-size: 200% auto;
            animation: gradientMove 3s linear infinite;
        }

        @keyframes gradientMove {
            to { background-position: 200% center; }
        }

        ::selection {
            background-color: #ef4444;
            color: white;
        }
        .dark ::selection {
            background-color: #6b8e23;
            color: black;
        }

        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: opacity, transform;
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        .img-skeleton {
            background-color: #f3f4f6;
        }
        .dark .img-skeleton {
            background-color: #18181b;
        }

        /* Active Menu Indicator */
        .active-link {
            color: #dc2626 !important;
            border-left: 4px solid #dc2626;
            padding-left: 12px;
            transform: translateX(5px);
        }
        .dark .active-link {
            color: #facc15 !important;
            border-left: 4px solid #facc15;
        }

        /* Toast Animation */
        @keyframes toast-in {
            from { transform: translateY(100%); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        .animate-toast {
            animation: toast-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }


        .logo{
            border-radius: 80%;
            margin-right: 5px;
            
        }

        .fontWeight{
            font-size: larger;
        }


         /* Specific About Page Styles */
        .text-vertical {
            writing-mode: vertical-rl;
            text-orientation: mixed;
        }

        .m_t10{
             margin-top: 10rem;
        }
        
        .m_t20{
             margin-top: 20rem;
        }

            /* Mobile First: Full color and glow always visible */
.heritage-glow {
    opacity: 1; 
}
.heritage-images-container {
    transform: scale(1.02);
}
.heritage-img {
    filter: grayscale(0%);
}

/* Desktop: Apply hover effects */
@media (min-width: 768px) {
    /* Set default desktop state to hidden/grayscale */
    .heritage-glow {
        opacity: 0;
    }
    .heritage-images-container {
        transform: scale(1);
    }
    .heritage-img {
        filter: grayscale(100%);
    }

    /* Trigger effects on hover */
    .heritage-group:hover .heritage-glow {
        opacity: 1;
    }
    .heritage-group:hover .heritage-images-container {
        transform: scale(1.02);
    }
    .heritage-group:hover .heritage-img {
        filter: grayscale(0%);
    }
}


    /* =========================================
   FOUNDER SECTION HOVER LOGIC
========================================= */

/* Mobile First: Full color, zoomed in, frame shifted */
.founder-img-wrapper {
    filter: grayscale(0%);
}
.founder-img {
    transform: scale(1.05);
}
.founder-frame {
    transform: translate(8px, 8px); 
}

/* Desktop: Interactive Hover Effect */
@media (min-width: 768px) {
    /* Set default desktop state */
    .founder-img-wrapper {
        filter: grayscale(100%);
    }
    .founder-img {
        transform: scale(1);
    }
    .founder-frame {
        transform: translate(0, 0);
    }

    /* Trigger effects on hover */
    .founder-group:hover .founder-img-wrapper {
        filter: grayscale(0%);
    }
    .founder-group:hover .founder-img {
        transform: scale(1.05);
    }
    .founder-group:hover .founder-frame {
        transform: translate(8px, 8px);
    }
}

/* =========================================
   HERITAGE GRID HOVER LOGIC
========================================= */

/* Mobile First: Full color and overlay visible */
.heritage-grid-img {
    filter: grayscale(0%);
}
.heritage-overlay {
    opacity: 1;
}

/* Desktop: Interactive Hover Effect */
@media (min-width: 768px) {
    /* Default desktop state */
    .heritage-grid-img {
        filter: grayscale(100%);
    }
    .heritage-overlay {
        opacity: 0;
    }

    /* Hover state */
    .heritage-grid-item:hover .heritage-grid-img {
        filter: grayscale(0%);
    }
    .heritage-grid-item:hover .heritage-overlay {
        opacity: 1;
    }
}