
:root {
            --primary-color: #0d6efd;
            /* Modern Tech Blue */
            --secondary-color: #0b5ed7;
            --dark-bg: #0f172a;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f9fa;
            overflow-x: hidden;
        }

        /* Hero Tech Section Background Animation */
        .faculty-hero {
            background: linear-gradient(135deg, var(--dark-bg) 0%, #1e293b 100%);
            color: white;
            padding: 80px 0;
            position: relative;
        }

        /* Computer Institutional Zoom & Shadow on Cards */
        .faculty-card {
            border: none;
            border-radius: 15px;
            overflow: hidden;
            background: #ffffff;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }

        .faculty-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 30px rgba(13, 110, 253, 0.15);
        }

        /* FIXED: Perfect Responsive Image Fitting Structure */
        .image-container {
            overflow: hidden;
            position: relative;
            background-color: #f1f5f9;
            height: 340px;
            /* Uniform height baseline across columns */
            width: 100%;
        }

        .faculty-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* Crops cleanly to fill container without distortion */
            object-position: top center;
            /* Keeps human faces safely in frame if portrait */
            transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        .faculty-card:hover .faculty-img {
            transform: scale(1.05);
        }

        /* Icon Badge Background */
        .icon-badge {
            width: 60px;
            height: 60px;
            background: rgba(13, 110, 253, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
        }

        /* Social Media Icons Styling */
        .social-links a {
            color: #64748b;
            font-size: 1.2rem;
            transition: color 0.3s ease;
        }

        .social-links a:hover {
            color: var(--primary-color);
        }