@charset "utf-8";
/* Sections */
.section {min-height: 90vh;position: relative;display: flex;align-items: center;justify-content: center;}

/* Header Styles */
.header {position: fixed;top: 0;left: 0;right: 0;height: 10px;background: rgba(0, 0, 0, 0.8);backdrop-filter: blur(10px);border-bottom: 1px solid rgba(255, 255, 255, 0.1);z-index: 1000;display: flex;align-items: center;justify-content: space-between;padding: 0 40px;transition: all 0.3s ease;}
.header.scrolled {background: rgba(0, 0, 0, 0.95);height: 70px;}

/* Mobile menu toggle */
.menu-toggle {display: none;flex-direction: column;cursor: pointer;padding: 4px;}

/* Home Section with Coverflow */
.coverflow-wrapper {width: 100%;height: 0vh;display: flex;align-items: center;justify-content: center;padding-top: 40px;}

.coverflow-container {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;perspective: 1200px;position: relative;}
.coverflow {display: flex;align-items: center;justify-content: center;transform-style: preserve-3d;position: relative;width: 100%;height: 400px;}
.coverflow-item {position: absolute;width: 300px;height: 300px;transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);cursor: pointer;user-select: none;}
.coverflow-item .cover {width: 100%;height: 100%;border-radius: 10px;box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);position: relative;overflow: hidden;transform-style: preserve-3d;background: #333;}
.coverflow-item .cover img {width: 100%;height: 100%;object-fit: cover;border-radius: 10px;}

/* Reflection */
.coverflow-item .reflection {position: absolute;top: 100%;left: 0;width: 100%;height: 100%;border-radius: 10px;transform: scaleY(-1);opacity: 0.2;filter: blur(2px);background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 1) 100%);overflow: hidden;}

/* Active item (center) */
.coverflow-item.active {z-index: 100;transform: translateX(0) translateZ(0) rotateY(0deg);}
.coverflow-item.active .cover {box-shadow: 0 30px 60px rgba(0, 0, 0, 0.9);}

/* Navigation */
.nav-button {position: absolute;top: 50%;transform: translateY(-50%);background: rgba(255, 255, 255, 0.1);border: 2px solid rgba(255, 255, 255, 0.2);color: white;width: 60px;height: 60px;border-radius: 50%;cursor: pointer;font-size: 24px;display: flex;align-items: center;justify-content: center;transition: all 0.3s ease;backdrop-filter: blur(10px);z-index: 200;}
.nav-button:hover {background: rgba(255, 255, 255, 0.2);transform: translateY(-50%) scale(1.1);}
.nav-button.prev {left: 10px;}
.nav-button.next {right: 10px;}

/* Dots indicator */
.dots-container {position: absolute;bottom: 60px;left: 50%;transform: translateX(-50%);display: flex;gap: 10px;z-index: 200;}
.dot {width: 10px;height: 10px;border-radius: 50%;background: rgba(255, 255, 255, 0.3);cursor: pointer;transition: all 0.3s ease;}
.dot.active {background: rgba(255, 255, 255, 0.8);transform: scale(1.3);}

/* Info display */
.info {position: absolute;top: 120px;left: 50%;transform: translateX(-50%);color: white;text-align: center;z-index: 200;}
.info h2 {font-size: 32px;margin-bottom: 10px;opacity: 0;animation: fadeIn 0.6s forwards;}
.info p {font-size: 16px;opacity: 0.7;}
@keyframes fadeIn {to {opacity: 1;}}

/* Play/Pause Button */
.play-pause-button {position: absolute;bottom: 120px;left: 50%;transform: translateX(-50%);background: rgba(255, 255, 255, 0.1);border: 2px solid rgba(255, 255, 255, 0.2);color: white;width: 50px;height: 50px;border-radius: 50%;cursor: pointer;font-size: 20px;display: flex;align-items: center;justify-content: center;transition: all 0.3s ease;backdrop-filter: blur(10px);z-index: 200;}
.play-pause-button:hover {background: rgba(255, 255, 255, 0.2);transform: translateX(-50%) scale(1.1);}
.play-pause-button .pause-icon {font-size: 16px;letter-spacing: 2px;}

/* About Section */
.about-content {max-width: 1400px;margin: 0 auto;padding: 40px;color: white;}
.about-header {text-align: center;margin-bottom: 80px;}
.about-header h2 {font-size: 48px;margin-top: 60px;margin-bottom: 20px;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;}
.about-header p {font-size: 20px;color: rgba(255, 255, 255, 0.8);max-width: 600px;margin: 0 auto;line-height: 1.8;}
.about-main {display: grid;grid-template-columns: 1fr 1fr;gap: 80px;align-items: center;margin-bottom: 80px;}
.about-visual {position: relative;height: 600px;display: flex;align-items: center;justify-content: center;}
.showcase-display {position: relative;width: 100%;max-width: 500px;height: 500px;display: flex;align-items: center;justify-content: center;}
.showcase-main {position: relative;width: 350px;height: 400px;background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);border-radius: 30px;border: 2px solid rgba(255, 255, 255, 0.1);padding: 40px;display: flex;flex-direction: column;align-items: center;justify-content: center;backdrop-filter: blur(10px);box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);}
.showcase-logo {width: 120px;height: 120px;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);border-radius: 30px;display: flex;align-items: center;justify-content: center;margin-bottom: 30px;box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);}
.showcase-logo svg {width: 70%;height: 70%;}

.showcase-title {font-size: 32px;font-weight: 700;color: white;margin-bottom: 15px;text-align: center;}
.showcase-subtitle {font-size: 16px;color: rgba(255, 255, 255, 0.7);text-align: center;margin-bottom: 40px;line-height: 1.6;}
.showcase-badges {display: flex;gap: 15px;flex-wrap: wrap;justify-content: center;}
.badge {background: rgba(255, 255, 255, 0.05);border: 1px solid rgba(255, 255, 255, 0.2);border-radius: 20px;padding: 8px 16px;font-size: 14px;color: rgba(255, 255, 255, 0.8);backdrop-filter: blur(10px);transition: all 0.3s ease;cursor: pointer;text-decoration: none;display: inline-block;}
.badge:hover {background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);border-color: transparent;color: white;transform: translateY(-2px);box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);}
.badge:active {transform: translateY(0);box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);}

/* Decorative corner elements */
.corner-decoration {position: absolute;width: 80px;height: 80px;border: 2px solid rgba(102, 126, 234, 0.3);}
.corner-decoration.top-left {top: -20px;left: -20px;border-right: none;border-bottom: none;border-radius: 20px 0 0 0;}
.corner-decoration.bottom-right {bottom: -20px;right: -20px;border-left: none;border-top: none;border-radius: 0 0 20px 0;}
.about-info {padding-left: 40px;}
.about-info h3 {font-size: 36px;margin-bottom: 30px;line-height: 1.3;}
.about-info p {font-size: 18px;color: rgba(255, 255, 255, 0.8);line-height: 1.8;margin-bottom: 30px;}
.feature-list {list-style: none;margin-bottom: 40px;}
.feature-list li {display: flex;align-items: center;gap: 15px;margin-bottom: 20px;font-size: 16px;color: rgba(255, 255, 255, 0.9);}
.feature-list li::before {content: '✓';display: flex;align-items: center;justify-content: center;width: 30px;height: 30px;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);border-radius: 50%;flex-shrink: 0;}
.cta-button {display: inline-flex;align-items: center;gap: 10px;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);color: white;text-decoration: none;padding: 15px 30px;border-radius: 30px;font-weight: 600;transition: all 0.3s ease;}
.cta-button:hover {transform: translateY(-2px);box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5);}
.cta-button svg {width: 20px;height: 20px;transition: transform 0.3s ease;}
.cta-button:hover svg {transform: translateX(5px);}
.stats-section {display: grid;grid-template-columns: repeat(4, 1fr);gap: 40px;padding: 60px;background: rgba(255, 255, 255, 0.03);backdrop-filter: blur(10px);border-radius: 30px;border: 1px solid rgba(255, 255, 255, 0.1);}
.stat-item {text-align: center;}
.stat-number {font-size: 48px;font-weight: 700;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;margin-bottom: 10px;}
.stat-label {font-size: 16px;color: rgba(255, 255, 255, 0.7);}

/* Smooth image loading */
.image-loading {background: linear-gradient(45deg, #333, #555);position: relative;}

.image-loading::after {content: '📷';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 48px;opacity: 0.5;}
			
@media (max-width: 768px) {.header {padding: 0 20px;}}
@media (max-width: 480px) {.header {height: 70px;padding: 0 15px;}}