/* Portfolio Popups Styles */
.portfolio-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
    background-color: #121212;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #333;
    width: 80%;
    max-width: 900px;
    color: #fff;
    border-radius: 8px;
    position: relative;
}

.close-modal {
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    z-index: 100;
}

.modal-header {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #333;
}

.modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

.project-preview {
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden;
}

.project-preview img {
    width: 100%;
    display: block;
    min-height: 300px;
    object-fit: cover;
}

/* Fallback styles for project previews */
.project-preview.chatbot-preview {
    background: linear-gradient(45deg, #2962ff, #1565c0);
    padding: 20px;
    text-align: center;
    position: relative;
}

.project-preview.trading-preview {
    background: linear-gradient(45deg, #6a1b9a, #4a148c);
    padding: 20px;
    text-align: center;
    position: relative;
}

.project-preview.whatsapp-preview {
    background: linear-gradient(45deg, #00c853, #009624);
    padding: 20px;
    text-align: center;
    position: relative;
}

.project-preview.ocr-preview {
    background: linear-gradient(135deg, #1974d2 0%, #2a52be 100%);
    padding: 20px;
    text-align: center;
    position: relative;
}

.project-preview.mobile-app-preview {
    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
    padding: 20px;
    text-align: center;
    position: relative;
}

.project-preview.ecommerce-preview {
    background: linear-gradient(45deg, #FF9800, #F57C00);
    padding: 20px;
    text-align: center;
    position: relative;
}

.project-preview.english-preview {
    background: linear-gradient(45deg, #3F51B5, #303F9F);
    padding: 20px;
    text-align: center;
    position: relative;
}

.project-preview.retailer-preview {
    background: linear-gradient(45deg, #E53935, #C62828);
    padding: 20px;
    text-align: center;
    position: relative;
}

.project-preview.iqoption-preview {
    background: linear-gradient(135deg, #008000, #006400);
    padding: 20px;
    text-align: center;
    position: relative;
}

.project-preview.gs1-preview {
    background: linear-gradient(135deg, #607D8B, #455A64);
    padding: 20px;
    text-align: center;
    position: relative;
}

.project-preview.signals-preview {
    background: linear-gradient(135deg, #795548, #5D4037);
    padding: 20px;
    text-align: center;
    position: relative;
}

.project-preview.website-preview {
    background: linear-gradient(135deg, #009688, #00796B);
    padding: 20px;
    text-align: center;
    position: relative;
}

.project-preview.video-preview {
    background: linear-gradient(135deg, #673AB7, #512DA8);
    padding: 20px;
    text-align: center;
    position: relative;
}

.project-preview.dev-acceleration-preview {
    background: linear-gradient(135deg, #0f2027, #2c5364);
    padding: 20px;
    text-align: center;
    position: relative;
}

.project-preview.instagram-preview {
    background: linear-gradient(45deg, #C13584, #E1306C, #FD1D1D);
    padding: 20px;
    text-align: center;
    position: relative;
}

.project-details {
    padding: 20px 0;
}

.project-details h3 {
    margin-bottom: 15px;
    color: #07c876;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    margin: 15px 0;
}

.project-tag {
    background: #07c876;
    color: #121212;
    padding: 5px 12px;
    margin: 0 10px 10px 0;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}