@font-face {
    font-family: 'Great Vibes';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Great Vibes'),
         url('fonts/GreatVibes-Regular.woff2') format('woff2'),
         url('fonts/GreatVibes-Regular.woff') format('woff'),
         url('fonts/GreatVibes-Regular.ttf') format('truetype');
}

:root {
    --primary: #FFB5E8;    /* Málna */
    --secondary: #B8F2E6;  /* Türkiz */
    --accent: #FFA69E;     /* Korall */
    --light: #FAF3DD;      /* Vanília */
    --dark: #AED9E0;       /* Halvány kék */
}

.hero-background {
    background-image: url('Header1.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero-body {
    background-color: rgba(0, 0, 0, 0.4);
}

/* Címek stílusai */
.title {
    font-family: 'Great Vibes', cursive !important;
    font-size: 3.5rem !important;
    color: var(--primary) !important;
}

h2.title {
    font-size: 2.8rem !important;
    background: linear-gradient(45deg, var(--primary), var(--accent));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

h3.title {
    font-size: 2.2rem !important;
    color: var(--accent) !important;
}

/* Subtitle eredeti betűtípussal */
.subtitle {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    color: var(--dark) !important;
}

/* Szekciók hátterei */
.section.has-background-light {
    background-color: var(--light) !important;
}

/* Kártyák stílusa */
.card {
    background-color: white;
    border: 2px solid var(--secondary);
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(255, 181, 232, 0.3);
    border-color: var(--primary);
}

.card-content {
    padding: 1.5rem;
}

/* Footer stílusa */
.footer {
    background-color: var(--secondary);
}

/* Tartalom szekciók */
.content p {
    color: #4a4a4a;
}

/* Extra hover effektek */
.button {
    background-color: var(--primary);
    color: white;
    transition: all 0.3s ease;
}

.button:hover {
    background-color: var(--accent);
    transform: scale(1.05);
}

/* Szekció átmenetek */
.section {
    transition: background-color 0.3s ease;
}

/* Hero szekció címek */
.hero .title,
.hero .subtitle {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}