/* =========================================
   SMOOTH 3D DEPTH EFFECTS (No Shaking)
   ========================================= */

/* 3D Perspective Container for Cards */
.card {
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
}

/* Smooth 3D Hover - Lift with Depth */
.card:hover {
    transform: translateY(-15px) translateZ(50px) rotateX(2deg);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.25),
        0 15px 30px rgba(0, 86, 179, 0.15),
        0 5px 15px rgba(0, 0, 0, 0.1);
}

/* 3D Layered Content */
.card-content {
    transform: translateZ(20px);
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.card:hover .card-content {
    transform: translateZ(40px);
}

/* Welcome Card 3D Effect */
.welcome-card {
    transform-style: preserve-3d;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.welcome-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.2),
        0 20px 40px rgba(0, 86, 179, 0.1);
}

/* Button 3D Depth */
.btn-primary {
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
    box-shadow: 0 4px 15px rgba(0, 86, 179, 0.3);
}

.btn-primary:hover {
    transform: translateY(-4px) translateZ(10px);
    box-shadow:
        0 12px 30px rgba(0, 86, 179, 0.4),
        0 6px 15px rgba(0, 0, 0, 0.2);
}

.btn-primary:active {
    transform: translateY(-1px) translateZ(5px);
    box-shadow: 0 4px 15px rgba(0, 86, 179, 0.3);
}

/* Section with Parallax Depth */
.section {
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* Navbar 3D Depth */
.navbar {
    transform-style: preserve-3d;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 2px 6px rgba(0, 0, 0, 0.04);
}

/* Nav Links Depth Effect */
.nav-links a {
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
}

.nav-links a:hover {
    transform: translateY(-2px);
    text-shadow: 0 4px 8px rgba(0, 86, 179, 0.3);
}

/* Hero 3D Text with Real Depth */
.hero-3d-text {
    transform-style: preserve-3d;
    text-shadow:
        2px 2px 0px rgba(0, 0, 0, 0.1),
        4px 4px 0px rgba(0, 0, 0, 0.09),
        6px 6px 0px rgba(0, 0, 0, 0.08),
        8px 8px 10px rgba(0, 0, 0, 0.15),
        10px 10px 20px rgba(0, 0, 0, 0.1);
    animation: floatText 3s ease-in-out infinite;
}

@keyframes floatText {

    0%,
    100% {
        transform: translateZ(0) rotateX(0);
    }

    50% {
        transform: translateZ(10px) rotateX(1deg);
    }
}

/* Grid with Staggered 3D */
.grid-3 {
    perspective: 1500px;
    transform-style: preserve-3d;
}

/* Stagger animation for grid items */
.grid-3>* {
    animation: fadeInUp3D 0.8s cubic-bezier(0.23, 1, 0.32, 1) backwards;
}

.grid-3>*:nth-child(1) {
    animation-delay: 0.1s;
}

.grid-3>*:nth-child(2) {
    animation-delay: 0.2s;
}

.grid-3>*:nth-child(3) {
    animation-delay: 0.3s;
}

.grid-3>*:nth-child(4) {
    animation-delay: 0.4s;
}

@keyframes fadeInUp3D {
    from {
        opacity: 0;
        transform: translateY(40px) translateZ(-50px) rotateX(10deg);
    }

    to {
        opacity: 1;
        transform: translateY(0) translateZ(0) rotateX(0);
    }
}

/* Floating Icons with Smooth 3D */
.shape {
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Footer with Depth */
.footer {
    box-shadow:
        0 -10px 30px rgba(0, 0, 0, 0.1),
        0 -5px 15px rgba(0, 0, 0, 0.05);
}

/* Chatbot 3D */
.chatbot {
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.25),
        0 10px 30px rgba(0, 86, 179, 0.15);
}

.chatbot-toggle {
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
}

.chatbot-toggle:hover {
    transform: scale(1.15) translateZ(5px);
    box-shadow:
        0 8px 25px rgba(0, 86, 179, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.2);
}