body {
            font-family: 'Lato', sans-serif;
        }
        h1, h2, h3, h4 {
            font-family: 'Poppins', sans-serif;
        }
        
        /* Custom Ahmed-Othman Color Palette Fallbacks */
        .text-\[\#1a748e\] {
            color: #1a748e !important;
        }
        .text-\[\#55c4d7\] {
            color: #55c4d7 !important;
        }
        .text-\[\#55C4D7\] {
            color: #55C4D7 !important;
        }
        .text-\[\#d38e31\] {
            color: #d38e31 !important;
        }
        .text-\[\#f0df99\] {
            color: #f0df99 !important;
        }
        .text-\[\#0077b5\] {
            color: #0077b5 !important;
        }
        .text-\[\#0077B5\] {
            color: #0077B5 !important;
        }
        .text-\[\#25d366\] {
            color: #25d366 !important;
        }
        .text-\[\#25D366\] {
            color: #25D366 !important;
        }
        .text-\[\#0088cc\] {
            color: #0088cc !important;
        }
        .text-\[\#0088CC\] {
            color: #0088CC !important;
        }
        .text-\[\#0d2e3a\] {
            color: #0d2e3a !important;
        }
        .text-\[\#0D2E3A\] {
            color: #0D2E3A !important;
        }
        .text-\[\#123d4d\] {
            color: #123d4d !important;
        }
        .text-\[\#123D4D\] {
            color: #123D4D !important;
        }
        
        /* Background color fallbacks */
        .bg-\[\#1a748e\] {
            background-color: #1a748e !important;
        }
        .bg-\[\#d38e31\] {
            background-color: #d38e31 !important;
        }
        .bg-\[\#55c4d7\] {
            background-color: #55c4d7 !important;
        }
        .bg-\[\#f0df99\] {
            background-color: #f0df99 !important;
        }
        
        /* Hover background fallbacks */
        .hover\:bg-\[\#0077b5\]\/20:hover {
            background-color: rgba(0, 119, 181, 0.2) !important;
        }
        .hover\:bg-\[\#25d366\]\/20:hover {
            background-color: rgba(37, 211, 102, 0.2) !important;
        }
        .hover\:bg-\[\#0088cc\]\/20:hover {
            background-color: rgba(0, 136, 204, 0.2) !important;
        }
        .hover\:bg-\[\#333\]\/20:hover {
            background-color: rgba(51, 51, 51, 0.2) !important;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #0d2e3a 0%, #123d4d 100%);
        }
        .skill-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        .profile-pic {
            border: 5px solid rgba(255,255,255,0.1);
            box-shadow: 0 15px 30px rgba(0,0,0,0.2);
        }
        .nav-link {
            position: relative;
        }
        .nav-link:after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: #f0df99;
            transition: width 0.3s ease;
        }
        .nav-link:hover:after {
            width: 100%;
        }
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        @keyframes float-button {
            0% {
                transform: translateY(0) rotate(0deg) scale(1);
            }
            25% {
                transform: translateY(0px) rotate(0deg) scale(1.1 );
            }
            75% {  transform: translateY(0px) rotate(0deg) scale(1.1 );
            }
            100% {
                transform: translateY(0) rotate(0deg) scale(1);
            }
        }
        .floating {
            animation: float 6s ease-in-out infinite;
        }

        .floating-button { animation: float-button 6s ease-in-out infinite;
       }
        
        /* Skill bar animations and styling */
        .skill-bar {
            position: relative;
            overflow: hidden;
        }
        
        .skill-bar::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.2) 100%);
            transform: translateX(-100%);
            transition: transform 0.8s ease;
        }
        
        .skill-item:hover .skill-bar::after {
            transform: translateX(100%);
        }
        
        .skill-bar-container {
            position: relative;
        }
        
        @keyframes skillBarAnimation {
            from {
                width: 0%;
            }
            to {
                width: var(--target-width);
            }
        }
        
        /* Project card button color fallbacks */
        .project-card a {
            color: #1a748e !important;
            text-decoration: none !important;
        }
        .project-card a:hover {
            color: #55c4d7 !important;
        }
        .project-card a:visited {
            color: #1a748e !important;
        }
        .project-card a:visited:hover {
            color: #55c4d7 !important;
        }
        
        /* Round GitHub icon styling */
        .project-card .fab.fa-github {
            background-color: #1a748e;
            color: white !important;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            transition: all 0.3s ease;
            margin-right: 0;
        }
        .project-card a:hover .fab.fa-github {
            background-color: #55c4d7;
            transform: scale(1.1);
        }
        
        /* Allow text cursor and selection only for input elements and editable content */
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="search"],
        input[type="tel"],
        input[type="url"],
        input[type="number"],
        textarea,
        [contenteditable="true"],
        [contenteditable=""] {
            cursor: text !important;
            -webkit-user-select: text !important;
            -moz-user-select: text !important;
            -ms-user-select: text !important;
            user-select: text !important;
        }
        
        /* Pointer cursor for interactive elements */
        button,
        a,
        a *,
        [role="button"],
        .nav-link,
        .btn,
        .button,
        input[type="button"],
        input[type="submit"],
        input[type="reset"],
        [onclick],
        .cursor-pointer {
            cursor: pointer !important;
        }
        
        /* Default cursor for non-interactive text elements */
        p,
        span,
        div,
        h1, h2, h3, h4, h5, h6,
        label,
        .text,
        .heading {
            cursor: default !important;
            -webkit-user-select: none !important;
            -moz-user-select: none !important;
            -ms-user-select: none !important;
            user-select: none !important;
        }