@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap');

        body {
            font-family: 'Poppins', sans-serif;
            background-color: #f8faff;
            color: #333;
            overflow-x: hidden;
        }
		#navbar {
			background-color: transparent;
			box-shadow: none;
		}

		#navbar.scrolled {
			background-color: white !important;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		}
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: 'Poppins', sans-serif;
        }

        .container {
            max-width: 1200px;
        }

        .btn-primary {
            background-color: #007bff;
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 9999px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
        }

        .btn-primary:hover {
            background-color: #0056b3;
            box-shadow: 0 6px 16px rgba(0, 123, 255, 0.3);
            transform: translateY(-2px);
        }

        .btn-secondary {
            background-color: #6c757d;
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 9999px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(108, 117, 125, 0.2);
        }

        .btn-secondary:hover {
            background-color: #5a6268;
            box-shadow: 0 6px 16px rgba(108, 117, 125, 0.3);
            transform: translateY(-2px);
        }
		

        .fade-in-up {
            animation: fadeInUp 0.8s ease-out forwards;
            opacity: 0;
            transform: translateY(20px);
        }

        .scale-in {
            animation: scaleIn 0.6s ease-out forwards;
            opacity: 0;
            transform: scale(0.9);
        }

        .slide-in-left {
            animation: slideInLeft 0.7s ease-out forwards;
            opacity: 0;
            transform: translateX(-20px);
        }

        .slide-in-right {
            animation: slideInRight 0.7s ease-out forwards;
            opacity: 0;
            transform: translateX(20px);
        }

        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes scaleIn {
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes slideInLeft {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes slideInRight {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .nav-link-hover:hover {
            color: #007bff;
            transform: translateY(-2px);
        }

        .card-hover {
            transition: all 0.3s ease;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        }

        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
        }

        .project-card {
            overflow: hidden;
            position: relative;
        }

        .project-card img {
            transition: transform 0.5s ease-in-out;
        }

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

        .project-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 50%);
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 1.5rem;
            color: white;
        }

        .project-card:hover .project-overlay {
            opacity: 1;
        }
		.max-w-md {
		  max-width: 32rem !important;
		}

        .icon-hover-bounce:hover {
            animation: bounce 0.6s infinite alternate;
        }

        @keyframes bounce {
            from {
                transform: translateY(0);
            }

            to {
                transform: translateY(-8px);
            }
        }
		
		/* Hides the element */
.hidden {
    display: none;
}

/* Hide on large screens (≥1024px) */
@media (min-width: 1024px) {
    .lg\:hidden {
        display: none;
    }
}

/* Background color – white */
.bg-white {
    background-color: #ffffff;
}

/* Medium shadow */
.shadow-md {
    box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
}

/* Enable transform (needed for scale) */
.transform {
    transform: translateZ(0);
}

/* Transition for ALL props */
.transition-all {
    transition-property: all;
}

/* 300ms transition duration */
.duration-300 {
    transition-duration: 300ms;
}

/* Transform origin: top */
.origin-top {
    transform-origin: top;
}

/* Fully transparent */
.opacity-0 {
    opacity: 0;
}

/* Scale Y to 0 (collapsed) */
.scale-y-0 {
    transform: scaleY(0);
}

/* Expanded version (if needed) */
.opacity-100 {
    opacity: 1;
}

.scale-y-100 {
    transform: scaleY(1);
}