/* General Styles - Παιχνιδιάρικο Design! */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: #2c3e50;
    overflow-x: hidden;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3);
    background-size: 400% 400%;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

.container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border-radius: 30px;
    z-index: -1;
    transform: scale(0.95);
    transition: all 0.3s ease;
}

/* Typography - Έντονα και Ζωντανά! */
h1, h2, h3, h4 {
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    transform: perspective(1px) translateZ(0);
    transition: all 0.3s ease;
}

h1 {
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
    background-size: 400% 400%;
    background-clip: text;
    animation: textGradient 3s ease infinite;
}

h2 {
    font-size: 2.5rem;
    font-weight: 600;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-clip: text;
}

h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2c3e50;
}

p {
    margin-bottom: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    color: #ff6b6b;
}

/* Buttons - Μαγικά Κουμπιά! */
.btn {
    display: inline-block;
    padding: 15px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s;
}

.btn:hover::before {
    left: 100%;
}

.btn-primary {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    color: white;
    position: relative;
    z-index: 1;
}

.btn-primary:hover {
    transform: translateY(-8px) scale(1.1) rotateZ(2deg);
    box-shadow: 0 20px 40px rgba(255, 107, 107, 0.4);
    background: linear-gradient(45deg, #ff5252, #26d0ce);
}

.btn-secondary {
    background: linear-gradient(45deg, #667eea, #764ba2);
    color: white;
    border: 3px solid transparent;
}

.btn-secondary:hover {
    transform: translateY(-8px) scale(1.1) rotateZ(-2deg);
    background: linear-gradient(45deg, #5a67d8, #6b46c1);
    box-shadow: 0 20px 40px rgba(102, 126, 234, 0.4);
}

.btn-outline {
    background: rgba(255, 255, 255, 0.95);
    color: #ff6b6b;
    border: 3px solid #ff6b6b;
    backdrop-filter: blur(10px);
}

.btn-outline:hover {
    background: #ff6b6b;
    color: white;
    transform: translateY(-8px) scale(1.1);
    box-shadow: 0 20px 40px rgba(255, 107, 107, 0.3);
}

.btn-large {
    padding: 20px 45px;
    font-size: 1.3rem;
}

.btn-full {
    width: 100%;
}

/* Header - Επαγγελματικό Header */
.site-header {
    background: linear-gradient(45deg, #2c3e50, #3498db);
    color: white;
    text-align: center;
    padding: 3rem 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.site-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264.888-.14 1.254-.874 1.454-2.278 2.016-3.62.2-.083.236-.158.432-.198 1.92.1 2.434 1.677 4.07 2.376.827.454 1.3.458 1.065-.2.955.87 1.304 1.876 2.512 2.54l-.13-.008s.272 0 .855-.454c.53-.482.755-.97 1.55-1.183.08-.243.24-.457.266-.7.636-.032 1.195-.856 1.807-1.167 1.18-.812 1.178-1.487 2.49-1.875.1 1.082.678.25 1 1.523.642.9 1.804 1.297 2.5.805.58-.08 1.148-.47 1.618-.75-.395.714-.144 1.316.427 1.92.524.5.667.68 1.18.855.665-.119 1.66-.256 2.2.292l.06.005c-.14.072-.328.2-.235.816l.07.006c.374.146.515.286.518.543-.198.427.482.817 1.068.877.073.11.208.077.277.13.623-.076 1.567-.555 2.052-.056.55-.483.758-.352 1.346-.503.306-.08.385-.317.762-.324.9-.085 1.536.3 2.427.285.398.054.762.146 1.15.205.17-.008.3-.043.446-.102l.272.778.103.003c.057 0 .11.004.166.01.287-.23.595-.036.9-.053-.02.166-.046 1.222 1.67 1.082.378-.043.76-.073 1.146-.093.065-.018.13-.033.193-.053l.736.176.066-.008c.185.044.366.098.55.14l.068.343.32-.026c.33.114.664.206 1.002.284l.045.285.66.05 1.174.368.075-.057c.324.073.65.126.975.187l.106.355.068-.033c.34.067.682.127 1.03.173l.128.256.38-.018c.33.046.64.11 1.003.143l.08.306.54.036c.335.04.67.072 1.005.1l.2.312.24-.015c.345.05.686.082 1.03.126l.04.22.352.024a12.012 12.012 0 001.121.076l.083.278.272-.015c.355.032.705.086 1.06.115l.108.32.348-.02c.336.035.674.055 1.01.084l.076.276.25-.01c.18.013.36.028.54.04.11.338.27.05.478.062a.514.514 0 00.53-.463c.03-.393-.104-.638-.293-.784l.075-.05a.498.498 0 00-.424-.485 17.408 17.408 0 01-1.08-.082l-.012-.285-.27.017a21.285 21.285 0 01-1.048-.092l-.105-.302-.337.022a21.52 21.52 0 01-1.006-.117l-.08-.205-.333.02a17.936 17.936 0 01-1.053-.158l-.107-.33-.364.025a19.906 19.906 0 01-1.006-.195l-.045-.087-.263.012a6.346 6.346 0 01-.843-.2l-.07-.21-.414.056a21.815 21.815 0 01-1.068-.27l-.187-.335-.396.047a21.758 21.758 0 01-1.023-.326l-.14-.285-.325.036c-.34-.11-.677-.23-1.008-.36l-.15-.403-.33.05c-.323-.143-.64-.295-.957-.457l-.07-.15-.295.023c-.226-.13-.45-.26-.67-.4l-.095-.177h-.32c-.145-.1-.295-.2-.443-.3a.278.278 0 00-.34-.044v.003c-.127-.09-.255-.173-.38-.264 1.56-1.143-1.602-1.032.42-2.27l-.347-.318-.1-.072c-.138-.135-.343-.276-.532-.42.895.127 1.472-.933 2.34-.95.116.362-.094.55-.14.826-.05.267.09.533.2.697l.14.003c.89-.854.71-1.653.6-2.423-.112-.758.3-.994.8-1.84.488-.824-.056-1.48.53-2.278.71-.977-.75-1.317-.06-2.283.557-.114.587.542 1.3.54.683.003 1.156-.533 1.744-.494.306-.173.317-.368-.044-.59l-.003-.18c.382-.493.79-.973 1.194-1.452l.27.008c.09-.108.175-.22.27-.324 1.348.2 2.776-.137 4.04-.6l-.004.06zM7.686 6.153c1.298 1.295 2.7.942 4.793 1.106.907.73 2.515-.496 3.584-.64-.236 1.103.215 1.156.5 1.938.217.577-.027 1.95-.414 2.033-.947.2-1.698-.947-1.698-.947-.934 1.446.3 1.52 1.147 1.947.7.354 1.055.926 1.812 1.073l.054.013c.506.143.97.273 1.476.377l.13.023c1.602.436 2.322 1.3 3.483 1.77.766.32 1.225.29 1.773-.08.202-.136.38-.3.574-.452 1.16.312 2.307.647 2.568-.212.155.025.305.058.452.096-.362 1.405.628 1.403 1.6.937l.13-.068.165-.084c.636-.34 1.233-.71 1.448-1.498-.223-.392-.57-.665-.834-.993.232-.22.682-.39.707-.876-.773-.097-1.082.22-1.57.57-1.052.21-1.854.42-2.198.77.244-1.387-2.656-1.244-3.312-2.457.26.242.502.5.62.815-.733-.647-1.624-1.72-1.797-1.937-.3-2.267-3.278-1.895-3.255-3.076l.013-.182c.09-.283.22-.528.372-.736-.798-.134-.008-.687-.03-1.11.28-.71.92-1.248.788-1.937-.455-.724-1.155-.906-1.364-1.626l.073-.014c-.286-.562-.834-.93-.753-1.734.834-.014.715.83 1.9.58-.01-.748.29-1.28.962-1.396.36.076.594.39.756.757.34.783-.1 2.436.61 3 .396.307 2.044-.328 1.65.554-.95.482-.326 1.6-.132 2.223.652-.93-.256-1.93-.256-1.93-.584-1.08-.216-2.367.296-3.112.535-.775 1.463-.826 2.08-.822.632.013.98.2 1.283.594 1.255 1.626.666 3.93 1.17 4.835.088 1.393.616 2.447.81 3.76.22 1.504-.277 2.384 1.283 4.434.344.456.516.922.874 1.375.33.414.71.772 1.17.952.558.213 1.323.43 1.834.197.35-.158.53-.432.83-.685.47-.42 1.093-.674 1.258-1.23.12-.405.05-.84-.096-1.073l-.035-.092c.542.22 1.14.348 1.663.003.118.462.243.924.244 1.395-.346.04-.672.087-.987.167-.207.05-.404.117-.607.17-.52.13-1.07.203-1.605.225l-.05.24c-.424.016-.846.076-1.252.17l-.12.238c-.748.138-1.445.398-2.142.652-.633.225-1.266.45-1.947.523-1.538.427-3.1.517-4.646.975-1.378.418-2.858.597-4.102 1.353-.672.4-1.344.8-2.015 1.2-1.18.602-2.363 1.205-3.606 1.67l-.03-.15c-1.517.622-2.952 1.39-4.358 2.182-2.14 1.01-4.355 1.903-6.43 3.052l-.186-.47c-1.66.757-3.337 1.476-4.895 2.398-.726.366-1.4.82-2.07 1.284-.49.336-.98.672-1.494.974-1.108.618-2.217 1.237-3.036 2.205l-.04-.234c-.908.843-1.86 1.644-2.684 2.57-.675.753-1.248 1.588-1.912 2.34-1.016 1.15-1.926 2.38-2.898 3.565-.732.825-1.464 1.65-2.195 2.477-.548-.205.21-2.08-.1-2.695-.08-.17-.16-.34-.253-.5-.317.22-.842.796-1.23.796-.345.015-.643-.312-.572-.61.108-.452.53-.695.82-1.024.375-.427.64-1.864.354-2.37-.732-1.31-.75-.42-.785-.155-.04.353-.146.485-.304.68-.63.07-.267-.385-.322-.47-.25-.387-.5-.773-.793-1.127.138-.38.013-.275-.172-.413l-.69.294c.056-.394.36-.664.615-.943.842-.92 1.797-1.73 2.77-2.52l.942-.9c.513-.677 1.008-1.364 1.474-2.073.16-.597.232-.915.285-1.242.09-.42.05-.844.04-1.27l.004-.08c-.056-.698-.07-1.392-.118-2.087-.096-.085-.177-.18-.272-.26.145-.32.285-.64.452-.945-.107-.455-.723-.375-1.28-.564.7-.113 1.114-.57 1.576-.993.585-.548 1.23-1.03 1.957-1.392 3.317-1.668 7.084-2.155 9.356-5.288 1.815-2.45 2.224-6.227 4.99-7.964-.27.25-.323.65-.67 1.046.334-.07 3.267-2.645 3.477-2.107-.87.11-.192.195-.31.267.35.664.436.91.817 1.35.84.97 1.517.705 2.814 1.25.378.16.503.678.66 1.084.698.06 1.333.678 1.424 1.36.05.372-.09.75-.04 1.123.466-.12.92-.13 1.355-.213-.11-.657-.103-1.32-.183-1.976-.29-2.373-.598-4.792-.41-7.19.103-1.316.237-3.11-.907-3.974l.01-.075c.358-1.132 1.2-2.165 2.064-2.683 1.277-.768 1.295-2.313 3.02-2.702z' fill='rgba(255, 255, 255, 0.05)' fill-rule='evenodd'/%3E%3C/svg%3E");
    opacity: 0.7;
}

@keyframes float {
    0% { transform: translateX(-50px) translateY(-50px); }
    100% { transform: translateX(50px) translateY(50px); }
}

.site-title.logo {
    font-weight: 900;
    margin: 0;
    position: relative;
    z-index: 2;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: white;
    display: inline-block;
    padding: 0.5rem 2rem;
    position: relative;
    font-family: 'Poppins', sans-serif;
    position: relative;
}

.site-title.logo i {
    font-size: 3.4rem;
    margin-right: 15px;
    color: #fff;
    opacity: 0.9;
    vertical-align: middle;
}

.site-title.logo::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 4px;
    background: #fff;
    border-radius: 2px;
}

.site-title.logo::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 30%;
    height: 4px;
    background: #3498db;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(52, 152, 219, 0.6);
}

/* Video Section */
.video-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.video-container {
    max-width: 800px;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.video-container video {
    width: 100%;
    height: auto;
    display: block;
}

/* Contact Form Section */
.contact-form-section {
    padding: 60px 0;
    background: white;
}

.contact-form-wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

.contact-form-static {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #2c3e50;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 15px;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #667eea;
}

/* Navigation - Remove all nav styles since we removed it */

/* Hero Section - Εντυπωσιακό Hero! */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 100px 20px 50px;
    background: radial-gradient(circle at 20% 80%, #ff6b6b 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, #4ecdc4 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, #45b7d1 0%, transparent 50%),
                linear-gradient(135deg, #96ceb4 0%, #feca57 100%);
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    animation: float 30s linear infinite;
}

.hero-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

.hero-content h1 {
    font-size: 4.5rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
    background-size: 400% 400%;
    background-clip: text;
    animation: textGradient 4s ease infinite;
    text-shadow: none;
    position: relative;
}

.hero-content h1::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background: white;
    background-clip: text;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.hero-content p {
    font-size: 1.4rem;
    margin-bottom: 2rem;
    color: #2c3e50;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

.hero-buttons {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.hero-image {
    position: relative;
}

.hero-image img {
    width: 100%;
    border-radius: 30px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.hero-image::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
    border-radius: 50px;
    z-index: -1;
    opacity: 0.7;
    animation: pulse 3s ease infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.05); opacity: 0.9; }
}

.hero-image:hover img {
    transform: scale(1.1) rotateY(15deg) rotateX(5deg);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4);
}

/* Section Headers */
.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-header h2 {
    margin-bottom: 1rem;
}

.section-header p {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* About Section - Ζωντανές Κάρτες! */
.about-section {
    padding: 120px 0;
    background: linear-gradient(45deg, #667eea, #764ba2, #f093fb, #f5576c);
    background-size: 400% 400%;
    position: relative;
}

/* Updated About Section with List Style */
.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.about-image img:hover {
    transform: scale(1.05) rotateY(5deg);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}

.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefits-list li {
    margin-bottom: 2rem;
    position: relative;
    padding-left: 0.5rem;
    transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    padding: 1.5rem;
    border-radius: 15px;
}

.benefits-list li:hover {
    transform: translateX(10px);
    background: rgba(0, 0, 0, 0.3);
}

.benefits-list h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    color: white;
}

.benefits-list h3 i {
    margin-right: 0.75rem;
    color: #fff;
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.benefits-list p {
    color: rgba(255, 255, 255, 0.9);
    margin-left: 3rem;
}

.contact-us-button {
    margin-top: 2rem;
    text-align: center;
}

@media (max-width: 768px) {
    .about-content {
        grid-template-columns: 1fr;
    }
    
    .about-image {
        margin-bottom: 2rem;
    }
}

/* Preserved card and icon styles for potential reuse */
.card-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 2rem;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: white;
    position: relative;
    transition: all 0.3s ease;
}

.card-icon::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
    border-radius: 50%;
    z-index: -1;
    animation: iconRotate 4s linear infinite;
}

@keyframes iconRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% { transform: scale(1.2) translateY(0); }
    40%, 43% { transform: scale(1.2) translateY(-30px); }
    70% { transform: scale(1.2) translateY(-15px); }
}

/* Tips Section */
.tips-section {
    padding: 100px 0;
    background: white;
}

.tips-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.tip-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem;
    transform: translateX(-50px);
    transition: all 0.3s ease;
}

.tip-item.animate {
    transform: translateX(0);
}

.tip-item i {
    font-size: 1.5rem;
    color: #667eea;
    margin-top: 0.5rem;
    min-width: 30px;
}

.tips-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Community Section */
.community-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.community-section .section-header h2,
.community-section .section-header p {
    color: white;
}

.community-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.feature-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 2.5rem;
    border-radius: 20px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    transform: translateY(50px);
}

.feature-card.animate {
    transform: translateY(0);
}

.feature-card:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-10px);
}

.feature-card i {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    color: white;
}

.feature-card h3 {
    color: white;
    margin-bottom: 1rem;
}

.feature-card p {
    color: rgba(255, 255, 255, 0.9);
}

.community-cta {
    margin-top: 1rem;
    text-align: center;
}

.community-cta .btn {
    background: white;
    color: #667eea;
}

.community-cta .btn:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

/* Contact Section */
.contact-section {
    padding: 100px 0;
    background: white;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.contact-features {
    margin-top: 2rem;
}

.feature {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.feature i {
    color: #28a745;
    font-size: 1.2rem;
}

.contact-form {
    background: #f8f9fa;
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 15px;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #667eea;
}

/* Footer */
.footer {
    background: #2c3e50;
    color: white;
    padding: 50px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h3,
.footer-section h4 {
    margin-bottom: 1.5rem;
    color: white;
}

.footer-section p {
    color: #bdc3c7;
    margin-bottom: 1.5rem;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section ul li a {
    color: #bdc3c7;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: #667eea;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #34495e;
    border-radius: 50%;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background: #667eea;
    transform: translateY(-2px);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    color: #bdc3c7;
}

.contact-item a {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #bdc3c7;
    text-decoration: none;
    transition: all 0.3s ease;
}

.contact-item a:hover {
    color: #fff;
    transform: translateX(5px);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid #34495e;
    color: #bdc3c7;
}

/* Mobile Responsive */
@media (max-width: 992px) {
    .about-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: white;
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        padding: 2rem 0;
    }

    .nav-menu.active {
        left: 0;
    }

    .hamburger {
        display: flex;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    .hero-buttons {
        justify-content: center;
    }

    .tips-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .about-grid {
        grid-template-columns: 1fr;
    }

    .community-features {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    .hero {
        padding: 80px 15px 30px;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }

    .about-card,
    .contact-form {
        padding: 1.5rem;
    }

    .section-header h2 {
        font-size: 1.8rem;
    }
}

/* Animations - Μαγικές Κινήσεις! */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(100px) rotateX(20deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotateX(0);
    }
}

@keyframes bounceIn {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes smooth-rise {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

.animate {
    animation: fadeInUp 0.8s ease forwards;
}

.smooth-hover:hover {
    animation: smooth-rise 1.5s ease-in-out;
    transition: all 0.3s ease;
}

.rainbow:hover {
    animation: rainbow 2s linear infinite;
}

.neon:hover {
    animation: neon 1.5s ease-in-out infinite alternate;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Loading states */
img {
    transition: all 0.5s ease;
    filter: saturate(1.2) contrast(1.1);
}

img:not([src]) {
    opacity: 0;
    transform: scale(0.8);
}

img:hover {
    filter: saturate(1.5) contrast(1.2) brightness(1.1);
}

/* Παιχνιδιάρικα Extra Effects */
.container:hover::before {
    transform: scale(1);
    background: rgba(255, 255, 255, 0.2);
}

/* Floating Elements */
.float-1, .float-2, .float-3 {
    position: absolute;
    opacity: 0.6;
    pointer-events: none;
}

.float-1 {
    top: 10%;
    left: 5%;
    animation: float-animation 6s ease-in-out infinite;
}

.float-2 {
    top: 60%;
    right: 10%;
    animation: float-animation 8s ease-in-out infinite reverse;
}

.float-3 {
    bottom: 20%;
    left: 20%;
    animation: float-animation 10s ease-in-out infinite;
}

@keyframes float-animation {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-20px) rotate(120deg); }
    66% { transform: translateY(-10px) rotate(240deg); }
}

/* Glowing Effects */
.glow {
    box-shadow: 0 0 20px rgba(255, 107, 107, 0.6);
    transition: box-shadow 0.3s ease;
}

.glow:hover {
    box-shadow: 0 0 40px rgba(255, 107, 107, 0.8), 0 0 60px rgba(78, 205, 196, 0.6);
}

/* Particle Effect */
.particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    border-radius: 50%;
    animation: particle-float 15s linear infinite;
}

@keyframes particle-float {
    0% {
        transform: translateY(100vh) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) translateX(100px) rotate(360deg);
        opacity: 0;
    }
}