spline-viewer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10; /* Ensure it's behind everything */
    pointer-events: none; /* Prevent interaction */
}

body {
    /* Removed original background gradient */
    color: #e0e0e0;
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    position: relative;
    overflow-x: hidden;
} /* Close body rule */

.quick-access {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: auto;
    transition: opacity 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    z-index: 9999;
}

/* Tooltip for navigation circle */
.quick-access::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    text-align: center;
    white-space: nowrap;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.quick-access.show-tooltip::after {
    opacity: 1;
}

.quick-item {
    position: absolute;
    width: 50px;
    height: 50px;
    background: linear-gradient(
        90deg,
        #00c6ff 0%,
        #ffffff 33%,
        #a367ff 66%,
        #00c6ff 100%
    );
    background-size: 300% auto;
    animation: textGradient 8s ease infinite;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    font-size: 1.5em;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    font-weight: bold;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}

.quick-item:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    filter: brightness(1.1);
}

/* Position items around the circle */
.quick-item:nth-child(1) { transform: translateY(-80px); } /* Top - Home */
.quick-item:nth-child(2) { transform: translate(-70px, -30px); } /* Top-Left - Portfolio */
.quick-item:nth-child(3) { transform: translate(70px, -30px); } /* Top-Right - Contact */
.quick-item:nth-child(4) { transform: translateY(80px); } /* Bottom - AI Details */
.quick-item:nth-child(5) { transform: translate(-70px, 30px); } /* Bottom-Left - About */
.quick-item:nth-child(6) { transform: translate(70px, 30px); } /* Bottom-Right - Models */

/* Close the quick-access styles properly */
/* Removed the extra closing brace added previously */

/* Removed old background pseudo-elements and their animations */


#intro {
    padding: 2rem 1rem;
    margin-bottom: 1rem;
    text-align: center;
    width: 100%;
}

#intro p {
    margin: 0 auto;
    max-width: 600px;
}

@keyframes textGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* --- Spline-Style Cards Section --- */

#spline-cards-section {
    perspective: 1500px; /* Add perspective to the section for 3D effects */
    margin-bottom: 5rem; /* Ensure spacing */
}

.spline-cards-container {
    display: flex;
    justify-content: center;
    gap: 2rem; /* Space between cards */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    margin-top: 2rem;
}

.spline-card {
    background: rgba(40, 40, 60, 0.7); /* Dark semi-transparent background */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 1.5rem;
    width: 280px; /* Fixed width for cards */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    color: #e0e0e0;
    transform-style: preserve-3d;
    transform: rotateY(-10deg) rotateX(5deg); /* Initial tilt */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    position: relative; /* For pseudo-elements */
    overflow: hidden; /* Hide overflow for pseudo-elements */
    backdrop-filter: blur(5px); /* Glassmorphism effect */
    -webkit-backdrop-filter: blur(5px);
}

.spline-card::before { /* Glossy highlight */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
    transform: skewY(-5deg); /* Skew the highlight */
    transform-origin: top left;
    pointer-events: none;
    opacity: 0.7;
}

/* Common Hover Gradient Border */
.spline-card:hover,
.carousel-card-3d:hover,
.portfolio-card:hover {
    border-width: 2px; /* Adjust thickness as needed */
    border-style: solid;
    border-image-source: linear-gradient(90deg, #00c6ff, #a367ff);
    border-image-slice: 1;
}

.spline-card:hover {
    transform: rotateY(0deg) rotateX(0deg) scale(1.05); /* Straighten and scale up on hover */
    /* box-shadow removed */
}

.spline-card h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.4rem;
    background: linear-gradient(
        90deg,
        #00c6ff 0%,
        #ffffff 50%,
        #a367ff 100%
    ); /* Use existing gradient */
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textGradient 6s ease infinite; /* Slightly faster animation */
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 0.5rem;
}

.spline-card p {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.spline-card .cta-button {
    display: inline-block; /* Ensure button respects padding/margin */
    margin-top: auto; /* Push button to bottom if needed */
}

/* Responsive adjustments for spline cards */
@media (max-width: 960px) {
    .spline-cards-container {
        flex-direction: column;
        align-items: center;
    }
    .spline-card {
        transform: rotateY(0deg) rotateX(3deg); /* Less tilt on smaller screens */
        margin-bottom: 2rem;
    }
    .spline-card:last-child {
        margin-bottom: 0;
    }
}

.gradient-text {
    background: linear-gradient(
        90deg,
        #00c6ff 0%,
        #ffffff 33%,
        #a367ff 66%,
        #00c6ff 100%
    );
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textGradient 8s ease infinite;
}

#intro h1 {
    margin: 0 0 0.5rem 0;
    font-size: 2.5rem;
    border-bottom: 3px solid transparent;
    background: linear-gradient(
        90deg,
        #00c6ff 0%,
        #ffffff 33%,
        #a367ff 66%,
        #00c6ff 100%
    );
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textGradient 8s ease infinite;
    display: inline-block;
    padding-bottom: 0.5rem;
}

.scene {
    width: 250px;
    height: 350px;
    margin: 400px auto 50px auto; /* Further reduced top margin */
    perspective: 1200px;
    perspective-origin: 50% 30%;
    transform: rotateX(5deg);
    position: relative;
}

.carousel-3d::after {
    transform-origin: bottom;
    transform: scaleY(-1) rotateX(-5deg) var(--carousel-transform, rotateY(0deg));
}

.carousel-3d {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1s;
}

.carousel-card-3d {
    position: absolute;
    width: 400px;
    height: 340px;
    left: 5px;
    top: 5px;
    backface-visibility: hidden;
    background: rgba(30, 30, 30, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    padding: 1.5rem;
    box-sizing: border-box;
    overflow-y: auto;
    color: #e0e0e0;
    transition: transform 0.3s ease; /* Add transition for hover effect */
}

.carousel-card-3d:hover {
    transform: scale(1.03); /* Add slight scale effect on hover */
}

.carousel-card-3d p, .carousel-card-3d ul {
    max-height: calc(100% - 3rem);
    overflow-y: auto;
}

.carousel-3d::after {
    content: "";
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    transform: scaleY(-1);
    opacity: 0.9;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 60%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 60%);
    transform-origin: bottom;
    transform: scaleY(-1) var(--carousel-transform, rotateY(0deg));
    transition: transform 1s;
}

@keyframes float {
    0%, 100% { transform: translateX(-50%) translateY(0px) rotateX(2deg); }
    50% { transform: translateX(-50%) translateY(-8px) rotateX(-1deg); }
}

.preview-panel {
    position: absolute;
    top: 250px; /* Positioned above the scene container */
    left: 50%;
    /* transform is now handled entirely by the animation */
    width: 400px;
    min-height: 250px;
    background-color: rgba(157, 209, 241, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    padding: 20px 25px;
    box-shadow: 0 6px 20px rgba(31, 89, 130, 0.25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #d4eaff;
    transform-style: preserve-3d;
    overflow: hidden;
    z-index: 20;
    animation: float 7s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.preview-panel.visible {
    opacity: 1;
}

.preview-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.preview-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #ffffff;
}

.preview-panel-content {
    margin-top: 15px;
    font-size: 12px;
    line-height: 1.6;
    max-height: 150px;
    overflow-y: auto;
}

.carousel-card-3d h2 {
    background: linear-gradient(
        90deg,
        #00c6ff 0%,
        #ffffff 33%,
        #a367ff 66%,
        #00c6ff 100%
    );
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textGradient 8s ease infinite;
    border-bottom: 2px solid #00c6ff;
    padding-bottom: 0.5rem;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.carousel-card-3d ul {
    list-style: none;
    padding: 0;
    font-size: 0.9rem;
}

.carousel-card-3d li {
    background-color: rgba(0, 0, 0, 0.3);
    margin-bottom: 0.5rem;
    padding: 0.6rem;
    border-radius: 4px;
    border-left: 3px solid #00aaff;
}

.carousel-card-3d p {
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.cta-button {
    display: inline-block;
    background: linear-gradient(
        90deg,
        #00c6ff 0%,
        #ffffff 33%,
        #a367ff 66%,
        #00c6ff 100%
    );
    background-size: 300% auto;
    animation: textGradient 8s ease infinite;
    padding: 0.6rem 1.2rem;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: transform 0.2s ease;
    font-size: 0.9rem;
    color: #000000;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}

.cta-button:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

#portfolio-intro {
    padding: 2rem 1rem;
    margin-bottom: 2rem;
    text-align: center;
    width: 100%;
}

#portfolio-intro h1 {
    margin: 0 0 0.5rem 0;
    font-size: 2.5rem;
    background: linear-gradient(
        90deg,
        #00c6ff 0%,
        #ffffff 33%,
        #a367ff 66%,
        #00c6ff 100%
    );
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textGradient 8s ease infinite;
    display: inline-block;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid #00c6ff;
}

#portfolio-intro p {
    margin: 0 auto;
    max-width: 600px;
}

#portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding: 0 2rem;
    max-width: 1200px;
    margin: 0 auto 2rem auto;
}

.portfolio-card {
    background: rgba(30, 30, 30, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    padding: 1.5rem;
    box-sizing: border-box;
    color: #e0e0e0;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-image 0.3s ease; /* Added border-image to transition */
}

.portfolio-card:hover {
    transform: translateY(-5px);
    /* box-shadow removed, border-image added via common rule */
}

/* Ensure specific portfolio card hover styles don't conflict badly */
.portfolio-card:nth-child(2):hover .cta-button {
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.3); /* Keep specific button shadow */
}

.portfolio-card:nth-child(3):hover {
     /* Keep specific transform and shadow for wooden card */
    transform: perspective(1000px) rotateY(-3deg) rotateX(1deg) translateY(-8px);
    box-shadow:
        8px 8px 20px rgba(0, 0, 0, 0.6),
        inset 0 0 8px rgba(0, 0, 0, 0.4);
    /* Override common border for wooden card */
    border-image-source: none;
    border-image-slice: 0;
    border: 1px solid #633411; /* Re-apply original border */
}


.portfolio-card h2 {
    background: linear-gradient(
        90deg,
        #00c6ff 0%,
        #ffffff 33%,
        #a367ff 66%,
        #00c6ff 100%
    );
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textGradient 8s ease infinite;
    border-bottom: 2px solid #00c6ff;
    padding-bottom: 0.5rem;
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Quick Access Navigation Card (4th card) */
.portfolio-card:nth-child(4) img {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
}

.portfolio-card:nth-child(4) img:hover {
    transform: scale(1.02);
}

.portfolio-card:nth-child(4) h2 {
    background: linear-gradient(
        90deg,
        #00c6ff 0%,
        #ffffff 33%,
        #a367ff 66%,
        #00c6ff 100%
    );
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textGradient 8s ease infinite;
}

/* Circle Card (5th card) */
.circle-card {
    border-radius: 50% !important;
    aspect-ratio: 1/1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
    background: radial-gradient(circle, rgba(40, 40, 40, 0.9) 0%, rgba(20, 20, 20, 0.95) 100%);
}

.circle-card h2 {
    margin-top: 0;
    background: linear-gradient(
        90deg,
        #00c6ff 0%,
        #ffffff 33%,
        #a367ff 66%,
        #00c6ff 100%
    );
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textGradient 8s ease infinite;
}

.circle-card p {
    max-height: 50%;
    overflow-y: auto;
    margin-bottom: 1.5rem;
    padding: 0 1rem;
    font-size: 0.85rem;
    line-height: 1.5;
}

.circle-card .cta-button {
    margin-top: auto;
    background: linear-gradient(
        90deg,
        #00c6ff 0%,
        #ffffff 33%,
        #a367ff 66%,
        #00c6ff 100%
    );
    background-size: 300% auto;
    animation: textGradient 8s ease infinite;
}

.circle-card:hover {
    transform: translateY(-5px) rotate(2deg);
    /* Override common gradient border */
    border-image-source: none;
    border-image-slice: 0;
    border: 1px solid rgba(255, 255, 255, 0.2); /* Re-apply original border */
}

.portfolio-card p {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

/* Project 2 Custom Styles */
.portfolio-card:nth-child(2) {
    background-color: white;
    border: 2px solid #D4AF37;
    position: relative;
    overflow: hidden;
    color: #333;
    background-image: linear-gradient(
        rgba(255, 255, 255, 0.9),
        rgba(255, 255, 255, 0.9)
    ), radial-gradient(
        circle,
        rgba(212, 175, 55, 0.15) 0%,
        rgba(255, 255, 255, 0.85) 50%,
        rgba(212, 175, 55, 0.15) 100%
    );
    background-size: cover;
    background-position: center;
    backdrop-filter: blur(8px);
    position: relative;
}

.portfolio-card:nth-child(2) h2,
.portfolio-card:nth-child(2) p,
.portfolio-card:nth-child(2) .cta-button {
    position: relative;
    z-index: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.portfolio-card:nth-child(2) h2 {
    color: transparent;
    font-weight: bold;
    background: linear-gradient(
        90deg,
        #D4AF37 0%,
        #000000 33%,
        #C0C0C0 66%,
        #D4AF37 100%
    );
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textGradient 8s ease infinite;
    border-bottom: 2px solid #D4AF37;
}

.portfolio-card:nth-child(2) p {
    color: #333;
    line-height: 1.6;
    padding: 0 1rem;
}

.portfolio-card:nth-child(2) .cta-button {
    background: linear-gradient(
        90deg,
        #D4AF37 0%,
        #000000 33%,
        #C0C0C0 66%,
        #D4AF37 100%
    );
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: textGradient 8s ease infinite;
    color: transparent;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
    border: none;
    border-radius: 5px;
    padding: 0.6rem 1.2rem;
}

.portfolio-card:nth-child(2) .cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.3);
}

.portfolio-card:nth-child(2)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(
            circle,
            rgba(255,255,255,1) 0%,
            rgba(230,230,230,1) 50%,
            rgba(255,255,255,1) 100%
        ),
        linear-gradient(
            45deg,
            rgba(250,250,250,0.5) 25%,
            transparent 25%,
            transparent 75%,
            rgba(250,250,250,0.5) 75%,
            rgba(250,250,250,0.5)
        );
    background-size: 200% 200%, 20px 20px;
    opacity: 0.8;
    pointer-events: none;
    animation: marble 8s infinite;
}

@keyframes marble {
    0% { background-position: 0 0, 0 0; }
    50% { background-position: 100% 50%, 0 0; }
    100% { background-position: 0 100%, 0 0; }
}

/* Project 3 Custom Styles - Wooden Card */
.portfolio-card:nth-child(3) {
    /* Layered background for more natural wood effect */
    background-color: #8b5a2b; /* Fallback base color */
    background-image:
        /* Subtle noise/texture overlay */
        radial-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
        radial-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
        /* Wood grain lines - slightly less opaque, varied angle */
        repeating-linear-gradient(50deg, transparent, transparent 8px, rgba(0,0,0,0.06) 8px, rgba(0,0,0,0.06) 11px),
        /* Base wood color variation */
        linear-gradient(120deg, #a56a40 0%, #8b5a2b 40%, #9c6b3a 70%, #804d22 100%);
    background-size: 1px 1px, 1px 1px, 100% 100%, 100% 100%; /* Sizes for each layer */
    background-position: 0 0, 0.5px 0.5px, 0 0, 0 0; /* Offset noise slightly */
    border: 1px solid #633411; /* Darker wood border */
    color: #f5deb3; /* Wheat color for text */
    transform: perspective(1000px) rotateY(-5deg) rotateX(3deg);
    box-shadow:
        5px 5px 15px rgba(0, 0, 0, 0.5), /* Outer shadow for depth */
        inset 0 0 5px rgba(0, 0, 0, 0.3); /* Inner shadow for texture */
    position: relative; /* Needed for pseudo-elements */
    transform-style: preserve-3d; /* Enable 3D space for children */
    transition: transform 0.4s ease, box-shadow 0.4s ease; /* Smooth hover */
}

/* Add pseudo-elements for thickness */
.portfolio-card:nth-child(3)::before,
.portfolio-card:nth-child(3)::after {
    content: '';
    position: absolute;
    background: #633411; /* Darker wood color for edges */
    z-index: -1; /* Place behind the main card face */
    border-radius: 10px; /* Match parent border-radius */
}

/* Simulate top edge */
.portfolio-card:nth-child(3)::before {
    top: 0;
    left: 2px; /* Offset slightly */
    width: calc(100% - 4px); /* Adjust width */
    height: 3px; /* Thickness */
    transform: translateZ(-3px) rotateX(90deg); /* Position as top edge */
    transform-origin: top;
    background: linear-gradient(#633411, #532a0f); /* Gradient for edge */
}

/* Simulate side edge */
.portfolio-card:nth-child(3)::after {
    top: 2px; /* Offset slightly */
    left: 0;
    width: 3px; /* Thickness */
    height: calc(100% - 4px); /* Adjust height */
    transform: translateZ(-3px) rotateY(-90deg); /* Position as side edge */
    transform-origin: left;
    background: linear-gradient(to left, #633411, #532a0f); /* Gradient for edge */
}

.portfolio-card:nth-child(3):hover {
    transform: perspective(1000px) rotateY(-3deg) rotateX(1deg) translateY(-8px); /* Slightly lift on hover */
    box-shadow:
        8px 8px 20px rgba(0, 0, 0, 0.6),
        inset 0 0 8px rgba(0, 0, 0, 0.4);
}

/* Style text elements for contrast */
.portfolio-card:nth-child(3) h2 {
    background: linear-gradient(45deg, #633411, #a0522d, #f5deb3);
    background-size: 300% auto; /* Add this */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    color: transparent;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    border-bottom: 2px solid #d2b48c;
    animation: textGradient 8s ease infinite;
}

.portfolio-card:nth-child(3) p {
    color: #f5f5dc; /* Beige text */
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.portfolio-card:nth-child(3) .cta-button {
    background: linear-gradient(135deg, #633411, #a0522d, #f5deb3);
    background-size: 300% auto; /* Add this */
    border: 1px solid #633411;
    transition: transform 0.2s ease;
    animation: textGradient 8s ease infinite;
}

.portfolio-card:nth-child(3) .cta-button:hover {
    background: #7a4a21; /* Lighter wood on hover */
    color: #fff;
    transform: scale(1.03); /* Keep hover effect minimal */
    filter: none;
}


@media (max-width: 900px) {
    #portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    #intro h1, #portfolio-intro h1 {
        font-size: 2rem;
    }
    .scene {
        width: 200px;
        height: 300px;
        perspective: 800px;
    }
    .carousel-card-3d {
        width: 190px;
        height: 290px;
        padding: 1rem;
    }
    .carousel-card-3d h2 {
        font-size: 1.3rem;
    }
    .carousel-card-3d ul, .carousel-card-3d p, .cta-button {
        font-size: 0.8rem;
    }
    .cta-button {
        padding: 0.5rem 1rem;
    }
    #portfolio-grid {
        grid-template-columns: 1fr;
        padding: 0 1rem;
    }
    .portfolio-card h2 {
        font-size: 1.3rem;
    }
    .portfolio-card p {
        font-size: 0.8rem;
    }
}

/* --- Content Section Styles --- */

.content-section {
    padding: 3rem 2rem;
    position: relative;
    min-height: 400px;
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content-section h2 {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2rem;
    background: linear-gradient(
        90deg,
        #00c6ff 0%,
        #ffffff 33%,
        #a367ff 66%,
        #00c6ff 100%
    );
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textGradient 8s ease infinite;
    display: inline-block;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid #00c6ff;
}

/* Add spacing between sections */
#section1, #section2, #section3, #section4 {
    margin-bottom: 5rem;
}

/* Alternate card positioning for visual interest */
#section3 .card-container {
    transform: translateZ(40px) translateX(20px);
}

#section5 .card-container {
    transform: translateZ(40px) translateX(-20px);
}

.card-container {
    position: relative;
    width: 650px; /* Increased width */
    max-width: 90%; /* Add max-width for responsiveness */
    height: auto; /* Allow height to adjust based on content */
    min-height: 250px;
    margin: 30px auto;
    z-index: 10; /* Higher z-index to appear in front of other elements */
    transform-style: preserve-3d; /* Enable 3D space */
    transform: translateZ(40px); /* Move forward in 3D space */
    perspective: 1000px; /* Add perspective for 3D effect */
    animation: float-card 6s ease-in-out infinite; /* Add floating animation */
}

@keyframes float-card {
    0%, 100% { transform: translateZ(40px) translateY(0px); }
    50% { transform: translateZ(40px) translateY(-10px); }
}

/* Removed the pseudo-element that created the second circle */

.card {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(40, 40, 40, 0.9) 0%, rgba(20, 20, 20, 0.95) 100%); /* Match section1 card style */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Match section1 card border */
    border-radius: 15px;
    box-sizing: border-box;
    padding: 20px 20px 20px 160px; /* Reduced left padding */
    color: #e0e0e0; /* Match site text color */
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 15px rgba(0, 198, 255, 0.2); /* Enhanced shadow for floating effect */
}

/* Format description text as block text */
.card p {
    text-align: justify; /* Justify text for block appearance */
    margin-bottom: 0.8rem; /* Reduce space between paragraphs */
    line-height: 1.5; /* Improve readability */
    max-width: 100%; /* Ensure text uses full width */
    padding-right: 5px; /* Small padding on right */
}

/* Style for button container */
.card div[style*="text-align: center"] {
    margin-top: 1.2rem; /* Consistent spacing above buttons */
}

.circle-cutout {
    position: absolute;
    width: 250px; /* Match height of card */
    height: 250px; /* Match height of card */
    border-radius: 50%;
    background: radial-gradient(circle, rgba(40, 40, 40, 0.9) 0%, rgba(20, 20, 20, 0.95) 100%); /* Match section1 circle card */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Match section1 circle card border */
    left: -125px; /* Half the width to position it correctly */
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 15px rgba(0, 198, 255, 0.2); /* Enhanced shadow for floating effect */
    /* Styles for centering the header */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
}

.circle-cutout h3 {
    margin: 0;
    font-size: 1.6rem;
    background: linear-gradient(
        90deg,
        #00c6ff 0%,
        #ffffff 33%,
        #a367ff 66%,
        #00c6ff 100%
    );
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textGradient 8s ease infinite;
    text-align: center;
}

.card h2 {
    margin: 0 0 15px 0;
    font-size: 1.8rem;
    background: linear-gradient(
        90deg,
        #00c6ff 0%,
        #ffffff 33%,
        #a367ff 66%,
        #00c6ff 100%
    );
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textGradient 8s ease infinite;
    border-bottom: none;
    padding-bottom: 0;
    text-align: left;
    display: block;
}

.card p {
    margin: 0 0 10px 0;
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: left;
}

/* Animation */
.card, .circle-cutout {
    transition: all 0.3s ease;
}

.card-container:hover .card {
    background: radial-gradient(circle, rgba(50, 50, 50, 0.9) 0%, rgba(30, 30, 30, 0.95) 100%); /* Slightly lighter on hover */
    transform: translateX(5px);
    /* Updated box-shadow for gradient glow */
    box-shadow:
        0 0 10px 2px rgba(0, 198, 255, 0.6), /* Inner cyan glow */
        0 0 20px 5px rgba(163, 103, 255, 0.4), /* Outer purple glow */
        0 15px 30px rgba(0, 0, 0, 0.6); /* Base shadow */
}

.card-container:hover .circle-cutout {
    background: radial-gradient(circle, rgba(50, 50, 50, 0.9) 0%, rgba(30, 30, 30, 0.95) 100%); /* Match card hover background */
    /* Updated box-shadow for gradient glow */
     box-shadow:
        0 0 10px 2px rgba(0, 198, 255, 0.6), /* Inner cyan glow */
        0 0 20px 5px rgba(163, 103, 255, 0.4), /* Outer purple glow */
        0 15px 30px rgba(0, 0, 0, 0.6); /* Base shadow */
}

/* Responsive adjustments for section 2 card */
@media (max-width: 768px) {
    .card-container {
        width: 90%;
        max-width: 500px;
    }
    
    .card {
        padding: 20px 20px 20px 140px; /* Increased padding for smaller screens to avoid text overlap */
    }
    
    .circle-cutout h3 {
        font-size: 1.4rem;
    }

    /* --- Vertical Card Layout on Mobile --- */
    .card-container {
        display: flex; /* Use flexbox for vertical stacking */
        flex-direction: column;
        align-items: center; /* Center items horizontally */
        height: auto; /* Allow height to adjust */
        animation: none; /* Disable float animation on mobile */
        transform: none; /* Reset transform */
        perspective: none; /* Reset perspective */
        margin-bottom: 3rem; /* Add some bottom margin */
    }

    .circle-cutout {
        position: relative; /* Change from absolute */
        left: auto; /* Reset left positioning */
        top: auto; /* Reset top positioning */
        transform: none; /* Reset transform */
        width: 200px; /* Adjust size */
        height: 200px;
        margin: 0 auto 1.5rem auto; /* Center horizontally and add bottom margin */
        z-index: 1; /* Ensure it's above card if overlap occurs */
    }

    .card {
        position: relative; /* Change from absolute */
        width: 100%; /* Use full width of container */
        height: auto; /* Allow height to adjust */
        padding: 20px; /* Reset padding */
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); /* Adjust shadow for static layout */
        margin-top: 0; /* Remove potential top margin */
    }
    
    .card p {
        font-size: 0.9rem; /* Ensure text is readable */
        text-align: left; /* Keep text left-aligned for readability */
    }
    /* --- End Vertical Card Layout --- */
}

@media (max-width: 500px) {
    .circle-cutout {
        width: 200px;
        height: 200px;
        left: -100px;
    }
}

/* --- Booking Section Styles --- */

.booking-container {
    margin-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 1.5rem;
}

.booking-container p {
    text-align: left; /* Override card's justify */
    margin-bottom: 0.8rem;
}

.booking-container strong {
    color: #00c6ff; /* Highlight key terms */
}

.call-type-selector label {
    display: block;
    margin-bottom: 0.5rem;
    color: #ccc;
    font-size: 0.9rem;
}

.call-type-selector select {
    padding: 0.7rem;
    border-radius: 5px;
    border: 1px solid #555;
    background-color: rgba(51, 51, 51, 0.8);
    color: #eee;
    width: 100%;
    font-size: 0.9rem;
    box-sizing: border-box;
    appearance: none; /* Basic reset */
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ccc' d='M6 8L0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E"); /* Custom dropdown arrow */
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px; /* Space for arrow */
}

.calendar-widget h4 {
    margin-bottom: 0.8rem;
    color: #eee;
    font-size: 1.1rem;
}

#calendar-slots {
    min-height: 100px;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 15px;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#calendar-slots p { /* Style for loading/no slots message */
    color: #aaa;
    width: 100%;
    text-align: center;
    font-style: italic;
}

.time-slot {
    background-color: rgba(0, 198, 255, 0.15);
    border: 1px solid #00c6ff;
    color: #e0e0e0;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    font-size: 0.9rem;
}

.time-slot:hover {
    background-color: rgba(0, 198, 255, 0.3);
    transform: translateY(-2px);
}

.time-slot:active {
    transform: translateY(0);
}

/* --- Popup Styles (General) --- */

.popup-overlay { /* Shared overlay style */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    /* z-index is set per specific overlay */
    display: none; /* Initially hidden */
}

.popup-form { /* Shared base style for popups */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 500px;
    max-height: 90vh; /* Limit height */
    background: rgba(40, 40, 40, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 198, 255, 0.1);
    /* z-index is set per specific popup */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 30px;
    color: #eee;
    display: none; /* Initially hidden */
    overflow-y: auto; /* Enable scrolling if content overflows */
}

.popup-form h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.6rem;
    color: #00c6ff;
    text-align: center;
    border-bottom: 1px solid rgba(0, 198, 255, 0.3);
    padding-bottom: 10px;
}

.popup-form p {
    margin-bottom: 10px;
    font-size: 0.95rem;
    color: #ccc;
}

.popup-form p strong {
    color: #fff;
    font-weight: 600;
}

.popup-form form div {
    margin-bottom: 15px;
}

.popup-form label {
    display: block;
    margin-bottom: 6px;
    color: #ccc;
    font-size: 0.9rem;
    font-weight: 500;
}

.popup-form input[type="text"],
.popup-form input[type="email"],
.popup-form input[type="tel"],
.popup-form textarea {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #555;
    background-color: rgba(51, 51, 51, 0.8);
    color: #eee;
    box-sizing: border-box;
    font-size: 0.95rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.popup-form input:focus,
.popup-form textarea:focus {
    outline: none;
    border-color: #00c6ff;
    box-shadow: 0 0 8px rgba(0, 198, 255, 0.3);
}

.popup-form textarea {
    resize: vertical;
    min-height: 80px;
}

.popup-form button[type="submit"] {
    /* Use existing .cta-button styles */
    display: inline-block;
    width: auto;
    padding: 10px 25px;
    margin-top: 10px;
}

.close-popup {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    color: #ccc;
    cursor: pointer;
    line-height: 1;
    transition: color 0.3s, transform 0.2s;
}

.close-popup:hover {
    color: #00c6ff;
    transform: rotate(90deg);
}

/* --- Specific Popup Z-Indexes --- */

/* Calendar Selection Popup */
#calendar-popup-overlay {
    z-index: 1040;
}
#calendar-popup {
    z-index: 1041;
    max-width: 600px; /* Allow slightly wider for calendar */
}

/* Booking Details Form Popup */
#booking-popup-overlay {
    z-index: 1050; /* Higher z-index */
}
#booking-popup {
    z-index: 1051; /* Higher z-index */
}

/* --- Logo and Glow Effect --- */
.logo-container {
    position: absolute; /* Changed from fixed to absolute */
    top: 20px;
    left: 20px;
    z-index: 100; /* Ensure it's above most content */
    width: 100px; /* Adjust as needed */
    height: auto; /* Adjust as needed */
    /* Variables for customization */
    --glow-color-1: rgba(0, 198, 255, 0.6); /* #00c6ff with alpha */
    --glow-color-2: rgba(163, 103, 255, 0.4); /* #a367ff with alpha */
    --glow-blur: 30px;
    --glow-spread: 15px;
    --animation-speed: 4s;
    --animation-intensity-min: 0.8;
    --animation-intensity-max: 1.2;
    cursor: pointer; /* Show pointer cursor on hover */
    position: relative; /* For tooltip positioning */
}

/* Logo tooltip */
.logo-container::after {
    content: "Avatar AI Web Studios";
    position: absolute;
    top: 110%; /* Position below the logo */
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    color: transparent; /* Text is transparent to show gradient */
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
    transform: translateY(10px);
    z-index: 101;
    background-clip: text;
    -webkit-background-clip: text;
    background-image: linear-gradient(
        90deg,
        #00c6ff 0%,
        #ffffff 33%,
        #a367ff 66%,
        #00c6ff 100%
    );
    background-size: 300% auto;
    animation: textGradient 8s ease infinite;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Show tooltip on hover */
.logo-container:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.logo {
    display: block;
    width: 100%;
    height: auto;
    position: relative; /* Needed for z-index stacking within container */
    z-index: 2; /* Logo above the glow */
}

.logo-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%; /* Slightly larger than logo */
    height: 120%; /* Slightly larger than logo */
    background: radial-gradient(circle, var(--glow-color-1) 0%, var(--glow-color-2) 50%, transparent 70%);
    filter: blur(var(--glow-blur));
    z-index: 1; /* Glow behind the logo */
    border-radius: 50%; /* Make the glow circular */
    opacity: var(--animation-intensity-min); /* Start at min intensity */
    animation: pulseGlow var(--animation-speed) ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% {
        opacity: var(--animation-intensity-min);
        transform: translate(-50%, -50%) scale(0.95);
    }
    50% {
        opacity: var(--animation-intensity-max);
        transform: translate(-50%, -50%) scale(1.05);
    }
}

/* Responsive adjustments for logo */
@media (max-width: 768px) {
    .logo-container {
        top: 15px;
        left: 15px;
        width: 80px; /* Smaller logo on smaller screens */
        --glow-blur: 20px;
        --glow-spread: 10px;
    }
}

@media (max-width: 480px) {
    .logo-container {
        top: 10px;
        left: 10px;
        width: 60px; /* Even smaller */
        --glow-blur: 15px;
        --glow-spread: 8px;
    }
}