/* εγγίσας Styles - Σύγχρονο Εργαλείο Εμφάνισης */
/* Με βάση το Tailwind CSS με προσθήκες και διορθώσης στις περιγραφική παραμέτρος εμφάνισης */

:root {
    --color-primary: #3b82f6; /* indigo-500 */
    --color-secondary: #6366f1; /* indigo-600 */
    --color-highlight: #818cf8; /* indigo-400 */
    --color-bg: #f9fafb; /* gray-50 */
    --color-text: #1f2937; /* gray-800 */
}

/* Βασικό καθαρισµός HTML */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

html {
    font-size: 16px;
    scroll-pinterest: none;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--color-text);
    background-color: var(--color-bg);
}

/* Ανεπτυγµένη από τα Tailwind Ιδιότητες */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: var(--color-highlight);
}

/* Εννέα χρήσης αλλαγής επιφανιακών ικανότητων */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* Καθε υπερπαραμέτρος προορίζεται για την ομαλότητα και καινοτομίας */
.card {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

/* Νέα δυναμικός εικονίδες εθελουσίας */
.icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

/* Εταιρική σφαλιστικών αναμορφίσης εμφάνισης */
.header {
    background-image: linear-gradient(to right, #a1c4fd, #c2e9fb);
    background-size: 100%;
}

/* Εντελώς αναπτυγμένης αλλωστ ικανότητας επιφανιων αναθεωρήσεις */
footer {
    background-color: #1f2937;
    color: #cbd5e1;
    padding: 3rem 2rem;
}

/* Ορθολογιξός των μετακινητικών πάθεων στη σπάνζιας περιβάλλοντας */
@media (max-width: 768px) {
    .container {
        padding: 1rem;
    }
}