/* Body: black to dark gray diagonal gradient */
        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(45deg, #0a0a0a 0%, #1c1c1c 100%);
            color: white;
            transition: background 0.3s, color 0.3s;
        }

        /* Sections to inherit body gradient */
        #home,
        #skills,
        #contact {
            background: transparent;
        }

        html {
            scroll-behavior: smooth;
        }

        /* Image auto-resize */
        .project-img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            object-position: center;
            border-radius: 12px;
            transition: all 0.3s ease-in-out;
        }

        /* Project card container */
        .project-card {
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }

        /* Overlay with description and links */
        .project-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 1rem;
            font-size: 1rem;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
            border-radius: 12px;
        }

        /* Show overlay on hover */
        .project-card:hover .project-overlay {
            opacity: 1;
        }

        /* Blur image on hover */
        .project-card:hover .project-img {
            filter: blur(4px);
        }

        /* Links inside overlay clickable */
        .project-overlay a {
            pointer-events: auto;
            color: #fff;
            margin: 0 5px;
            font-weight: bold;
            text-decoration: underline;
            transition: color 0.2s;
        }

        .project-overlay a:hover {
            color: #ffd700;
            /* hover effect for links */
        }

        /* Swiper Arrows Color */
        .swiper-button-next,
        .swiper-button-prev {
            color: yellow !important;
        }

        /* Pagination Dots */
        .swiper-pagination-bullet {
            background: yellow !important;
            opacity: 0.5 !important;
        }

        .swiper-pagination-bullet-active {
            background: gold !important;
            opacity: 1 !important;
        }

        .cube-container {
            width: 250px;
            height: 250px;
            perspective: 800px;
        }

        .cube {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            animation: rotateCube 6s linear infinite;
        }

        .face {
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #ffcc00, #ff8800);
            border: 2px solid rgba(255, 255, 255, 0.4);
            box-shadow: 0 0 25px rgba(255, 200, 0, 0.7);
        }

        /* Positioning 6 sides */
        .front {
            transform: rotateY(0deg) translateZ(125px);
        }

        .back {
            transform: rotateY(180deg) translateZ(125px);
        }

        .right {
            transform: rotateY(90deg) translateZ(125px);
        }

        .left {
            transform: rotateY(-90deg) translateZ(125px);
        }

        .top {
            transform: rotateX(90deg) translateZ(125px);
        }

        .bottom {
            transform: rotateX(-90deg) translateZ(125px);
        }

        /* Rotation animation */
        @keyframes rotateCube {
            0% {
                transform: rotateX(0deg) rotateY(0deg);
            }

            100% {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }