/* Mind-Blowing Projects Page Styles */

#portfolio {

    padding: 80px 0;

    color: #ababab;

    position: relative;

    overflow: hidden;

    background: linear-gradient(135deg, rgba(10, 10, 30, 0.9), rgba(20, 20, 50, 0.9));

    min-height: 100vh;

}



/* Projects Showcase Container */

.projects-showcase {

    position: relative;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}



/* Floating Background Particles */

.floating-particles {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    z-index: 1;

}



.particle {

    position: absolute;

    width: 4px;

    height: 4px;

    background: linear-gradient(45deg, #8a2be2, #6366f1);

    border-radius: 50%;

    opacity: 0.6;

    animation: float 8s infinite ease-in-out;

}



@keyframes float {

    0%, 100% { transform: translateY(0px) rotate(0deg); }

    33% { transform: translateY(-30px) rotate(120deg); }

    66% { transform: translateY(30px) rotate(240deg); }

}



/* Project Item Layout */

.project-item {

    display: grid;

    grid-template-columns: 1fr 1.5fr;

    gap: 60px;

    align-items: center;

    margin-bottom: 120px;

    opacity: 0;

    transform: translateY(50px);

    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;

    z-index: 2;

}



.project-item.animate-in {

    opacity: 1;

    transform: translateY(0);

}



.project-item:nth-child(even) {

    direction: rtl;

}



.project-item:nth-child(even) > * {

    direction: ltr;

}



/* Project Visual Section */

.project-visual {

    position: relative;

}



.image-container {

    position: relative;

    border-radius: 20px;

    overflow: hidden;

    background: linear-gradient(135deg, rgba(138, 43, 226, 0.1), rgba(99, 102, 241, 0.1));

    padding: 3px;

    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);

    cursor: pointer;

}



.image-container:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 40px rgba(138, 43, 226, 0.3);

}



.project-image {

    width: 100%;

    height: 400px;

    object-fit: cover;

    border-radius: 17px;

    transition: all 0.6s ease;

}



.image-container:hover .project-image {

    transform: scale(1.05);

    filter: brightness(1.1);

}



/* Image Overlay Effects */

.image-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(135deg, rgba(138, 43, 226, 0.8), rgba(99, 102, 241, 0.8));

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    transition: all 0.6s ease;

    border-radius: 17px;

}



.image-container:hover .image-overlay {

    opacity: 1;

}



.overlay-content {

    text-align: center;

    color: white;

    transform: translateY(20px);

    transition: all 0.6s ease;

}



.image-container:hover .overlay-content {

    transform: translateY(0);

}



.overlay-content i {

    font-size: 48px;

    margin-bottom: 20px;

    animation: pulse 2s infinite;

}



@keyframes pulse {

    0%, 100% { transform: scale(1); }

    50% { transform: scale(1.1); }

}



.overlay-content h3 {

    font-size: 24px;

    font-weight: 700;

    margin-bottom: 15px;

    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);

}



.tech-badges {

    display: flex;

    gap: 10px;

    justify-content: center;

    flex-wrap: wrap;

}



.badge {

    background: rgba(255, 255, 255, 0.2);

    padding: 6px 12px;

    border-radius: 20px;

    font-size: 12px;

    font-weight: 600;

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.3);

}



/* Glow Effects */

.glow-effect {

    position: absolute;

    top: -50%;

    left: -50%;

    width: 200%;

    height: 200%;

    background: radial-gradient(circle, rgba(138, 43, 226, 0.4) 0%, transparent 70%);

    opacity: 0;

    transition: all 0.6s ease;

    pointer-events: none;

}



.image-container:hover .glow-effect {

    opacity: 1;

    animation: glow 2s ease-in-out infinite alternate;

}



@keyframes glow {

    0% { transform: scale(0.8) rotate(0deg); }

    100% { transform: scale(1.2) rotate(180deg); }

}



/* Floating Shapes */

.floating-shapes {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

}



.shape {

    position: absolute;

    border-radius: 50%;

    background: linear-gradient(45deg, rgba(138, 43, 226, 0.6), rgba(99, 102, 241, 0.6));

    animation: float-shape 6s infinite ease-in-out;

}



.shape-1 {

    width: 20px;

    height: 20px;

    top: 20%;

    left: 10%;

    animation-delay: 0s;

}



.shape-2 {

    width: 15px;

    height: 15px;

    top: 60%;

    right: 15%;

    animation-delay: 2s;

}



.shape-3 {

    width: 25px;

    height: 25px;

    bottom: 20%;

    left: 20%;

    animation-delay: 4s;

}



@keyframes float-shape {

    0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.6; }

    50% { transform: translateY(-20px) rotate(180deg); opacity: 1; }

}



/* Project Content Section */

.project-content {

    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));

    backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 20px;

    padding: 40px;

    position: relative;

    overflow: hidden;

}



.project-content::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 2px;

    background: linear-gradient(90deg, #8a2be2, #6366f1);

    animation: shimmer 3s infinite;

}



@keyframes shimmer {

    0% { transform: translateX(-100%); }

    100% { transform: translateX(100%); }

}



.content-header h2 {

    font-size: 36px;

    font-weight: 800;

    background: linear-gradient(135deg, #8a2be2, #6366f1);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    margin-bottom: 20px;

    text-shadow: 0 0 30px rgba(138, 43, 226, 0.5);

}



.project-meta {

    display: flex;

    gap: 15px;

    flex-wrap: wrap;

    margin-bottom: 30px;

}



.project-meta span {

    padding: 8px 16px;

    border-radius: 25px;

    font-size: 14px;

    font-weight: 600;

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.2);

}



.year {

    background: linear-gradient(135deg, rgba(138, 43, 226, 0.2), rgba(99, 102, 241, 0.2));

    color: #fff;

}



.category {

    background: linear-gradient(135deg, rgba(255, 107, 107, 0.2), rgba(255, 154, 0, 0.2));

    color: #ff6b6b;

}



.status {

    background: linear-gradient(135deg, rgba(46, 213, 115, 0.2), rgba(0, 184, 148, 0.2));

    color: #2ed573;

}



.project-description p {

    font-size: 16px;

    line-height: 1.8;

    margin-bottom: 30px;

    color: rgba(255, 255, 255, 0.8);

}



.key-features {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

    gap: 20px;

    margin-bottom: 30px;

}



.feature {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 15px;

    background: rgba(255, 255, 255, 0.05);

    border-radius: 15px;

    border: 1px solid rgba(255, 255, 255, 0.1);

    transition: all 0.3s ease;

}



.feature:hover {

    transform: translateY(-5px);

    background: rgba(255, 255, 255, 0.08);

    box-shadow: 0 10px 20px rgba(138, 43, 226, 0.2);

}



.feature i {

    font-size: 20px;

    color: #8a2be2;

}



.feature span {

    font-size: 14px;

    font-weight: 600;

    color: rgba(255, 255, 255, 0.9);

}



.project-actions {

    display: flex;

    gap: 15px;

    flex-wrap: wrap;

}



.action-btn {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 15px 30px;

    border: none;

    border-radius: 30px;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    position: relative;

    overflow: hidden;

    text-decoration: none;

}



.action-btn.primary {

    background: linear-gradient(135deg, #8a2be2, #6366f1);

    color: white;

}



.action-btn.secondary {

    background: transparent;

    color: #8a2be2;

    border: 2px solid #8a2be2;

}



.action-btn:hover {

    transform: translateY(-3px);

    box-shadow: 0 15px 30px rgba(138, 43, 226, 0.4);

}



.action-btn i {

    font-size: 18px;

    transition: all 0.3s ease;

}



.action-btn:hover i {

    transform: translateX(5px);

}



/* Video Sections */

.video-section {

    margin-bottom: 120px;

    opacity: 0;

    transform: translateY(50px);

    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;

    z-index: 2;

}



.video-section.animate-in {

    opacity: 1;

    transform: translateY(0);

}



.video-container {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 40px;

    align-items: center;

    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));

    backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 20px;

    padding: 40px;

    position: relative;

    overflow: hidden;

}



.video-wrapper {

    position: relative;

    border-radius: 15px;

    overflow: hidden;

    background: #000;

    aspect-ratio: 16/9;

}



.youtube-video {

    width: 100%;

    height: 100%;

    border: none;

}



.video-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0, 0, 0, 0.7);

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.3s ease;

}



.video-overlay:hover {

    background: rgba(0, 0, 0, 0.5);

}



.play-button {

    width: 80px;

    height: 80px;

    background: linear-gradient(135deg, #8a2be2, #6366f1);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s ease;

    box-shadow: 0 10px 30px rgba(138, 43, 226, 0.5);

}



.play-button:hover {

    transform: scale(1.1);

    box-shadow: 0 15px 40px rgba(138, 43, 226, 0.7);

}



.play-button i {

    font-size: 30px;

    color: white;

    margin-left: 5px;

}



.video-info h3 {

    font-size: 24px;

    font-weight: 700;

    background: linear-gradient(135deg, #8a2be2, #6366f1);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    margin-bottom: 15px;

}



.video-info p {

    font-size: 16px;

    line-height: 1.6;

    color: rgba(255, 255, 255, 0.8);

    margin-bottom: 20px;

}



.video-stats {

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

}



.stat {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 14px;

    color: rgba(255, 255, 255, 0.7);

}



.stat i {

    color: #8a2be2;

}



/* Call to Action Section */

.cta-section {

    text-align: center;

    padding: 80px 40px;

    background: linear-gradient(135deg, rgba(138, 43, 226, 0.1), rgba(99, 102, 241, 0.1));

    backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 30px;

    margin-top: 60px;

    position: relative;

    overflow: hidden;

}



.cta-section::before {

    content: '';

    position: absolute;

    top: -50%;

    left: -50%;

    width: 200%;

    height: 200%;

    background: radial-gradient(circle, rgba(138, 43, 226, 0.2) 0%, transparent 70%);

    animation: rotate 10s linear infinite;

}



@keyframes rotate {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}



.cta-content {

    position: relative;

    z-index: 2;

}



.cta-content h2 {

    font-size: 36px;

    font-weight: 800;

    background: linear-gradient(135deg, #8a2be2, #6366f1);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    margin-bottom: 20px;

}



.cta-content p {

    font-size: 18px;

    color: rgba(255, 255, 255, 0.8);

    margin-bottom: 40px;

    max-width: 600px;

    margin-left: auto;

    margin-right: auto;

}



.cta-buttons {

    display: flex;

    gap: 20px;

    justify-content: center;

    flex-wrap: wrap;
    
    opacity: 1;

    transform: none;

}



.cta-btn {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 18px 40px;

    border: none;

    border-radius: 30px;

    font-size: 18px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    position: relative;

    overflow: hidden;

    text-decoration: none;

}



.cta-btn.primary {

    background: linear-gradient(135deg, #8a2be2, #6366f1);

    color: white;

}



.cta-btn.secondary {

    background: transparent;

    color: white;

    border: 2px solid rgba(255, 255, 255, 0.3);

}



.cta-btn:hover {

    transform: translateY(-5px);

    box-shadow: 0 20px 40px rgba(138, 43, 226, 0.4);

}



.cta-btn i {

    font-size: 20px;

    transition: all 0.3s ease;

}



.cta-btn:hover i {

    transform: scale(1.2);

}



/* Ripple Effect */

.ripple {

    position: absolute;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.6);

    transform: scale(0);

    animation: ripple-animation 0.6s ease-out;

    pointer-events: none;

}



@keyframes ripple-animation {

    to {

        transform: scale(4);

        opacity: 0;

    }

}



/* Responsive Design */

@media (max-width: 768px) {

    .project-item {

        grid-template-columns: 1fr;

        gap: 40px;

        margin-bottom: 80px;

    }

    

    .project-item:nth-child(even) {

        direction: ltr;

    }

    

    .project-content {

        padding: 30px 20px;

    }

    

    .content-header h2 {

        font-size: 28px;

    }

    

    .video-container {

        grid-template-columns: 1fr;

        gap: 30px;

        padding: 30px 20px;

    }

    

    .video-wrapper {

        order: -1;

    }

    

    .cta-section {

        padding: 60px 20px;

    }

    

    .cta-content h2 {

        font-size: 28px;

    }

    

    .project-image {

        height: 300px;

    }

}



@media (max-width: 480px) {

    #portfolio {

        padding: 60px 0;

    }

    

    .project-meta {

        flex-direction: column;

        gap: 10px;

    }

    

    .key-features {

        grid-template-columns: 1fr;

    }

    

    .project-actions {

        flex-direction: column;

    }

    

    .action-btn {

        width: 100%;

        justify-content: center;

    }

    

    .cta-buttons {

        flex-direction: column;

        align-items: center;

    }

    

    .cta-btn {

        width: 100%;

        max-width: 300px;

        justify-content: center;

    }

}