div{
            border: 0px solid red;
        }
        /* ==================== ANIMATIONS ==================== */

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-20px);
            }
        }

        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slideInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        /* ==================== LANGUAGE DROPDOWN STYLES ==================== */

        .language-dropdown {
            position: relative;
        }

        .language-menu {
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 0.5rem;
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: 0.5rem;
            padding: 0.5rem;
            min-width: 180px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            animation: slideInDown 0.3s ease-out;
        }

        .language-menu.active {
            display: block;
        }

        .language-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.5rem 0.75rem;
            color: #4b5563;
            border-radius: 0.375rem;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
        }

        .language-item:hover {
            background: #eff6ff;
            color: #2563eb;
        }

        .language-item.active {
            background: #dbeafe;
            color: #2563eb;
            font-weight: 600;
        }

        .language-flag {
            font-size: 1.25rem;
            display: inline-block;
        }

        /* ==================== LOADING OVERLAY ==================== */

        .translate-loading {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.3);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }

        .translate-loading.active {
            display: flex;
        }

        .spinner {
            border: 4px solid rgba(37, 99, 235, 0.2);
            border-top: 4px solid #2563eb;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }

        /* ==================== GLASS EFFECT & ANIMATIONS ==================== */

        .glass-effect {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }

        .glass-effect:hover {
            background: rgba(255, 255, 255, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
        }

        .float-animation {
            animation: float 4s ease-in-out infinite;
        }

        .section-enter {
            animation: slideInUp 0.8s ease-out;
        }


        .section-image {
            animation: fadeIn 0.8s ease-out;
            transition: transform 0.3s ease;
            object-fit: cover;        /* ensures portrait crop is maintained */
            object-position: top;     /* keeps face/upper body in frame */
        }
        .section-image:hover {
            transform: scale(1.02);
        }
                /* ==================== STAT NUMBERS ==================== */

        .stat-number {
            font-size: 2.5rem;
            font-weight: 900;
            line-height: 1;
            margin-bottom: 0.5rem;
            color: white;
        }

        /* ==================== PROJECT & BLOG CARDS ==================== */

        .project-card,
        .blog-card {
            transition: all 0.3s ease;
        }

        .project-card:hover,
        .blog-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .hover-lift {
            transition: all 0.3s ease;
        }

        .hover-lift:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .project-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(0, 55, 184, 0.7) 0%, rgba(0, 112, 237, 0.7) 100%);
            display: flex;
            align-items: flex-end;
            padding: 1.5rem;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .project-card:hover .project-overlay {
            opacity: 1;
        }

        /* ==================== NAVIGATION LINKS ==================== */

        .nav-link {
            position: relative;
            transition: color 0.3s ease;
            text-decoration: none;
        }

        .nav-link:after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: #2563eb;
            transition: width 0.3s ease;
        }

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

        /* ==================== UTILITY CLASSES ==================== */

        .hidden {
            display: none !important;
        }

        .error-message {
            transition: all 0.3s ease;
            display: none;
        }

        .error-message:not(.hidden) {
            display: block;
        }

        /* ==================== FORM STYLES ==================== */

        input, textarea, select {
            transition: all 0.3s ease;
        }

        input:focus, textarea:focus, select:focus {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(37, 99, 235, 0.2);
        }

        .form-control {
            border: 2px solid transparent;
            transition: all 0.3s ease;
        }

        .form-control:focus {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

        /* ==================== RESPONSIVE DESKTOP MENU FIX ==================== */

            .desktop-menu {
                display: none;
            }

            @media (min-width: 1024px) {
                .desktop-menu {
                    display: flex !important;
                }
            }

            @media (max-width: 1023px) {
                .desktop-menu {
                    display: none !important;
                }
            }

            #mobileMenuBtn {
                display: block;
            }

            @media (min-width: 1024px) {
                #mobileMenuBtn {
                    display: none !important;
                }
            }

            /* ==================== DESKTOP MENU BOLD TEXT ==================== */

.desktop-menu .nav-link {
    font-weight: 700;
    letter-spacing: 0.5px;
}

#mobileMenu .mbm .block {
    font-weight: 700;
    letter-spacing: 0.5px;
}



/*For image display in the main page*/