html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
}

h1,
h2,
h3,
h4 {
    font-family: 'Merriweather', serif;
}

.hero-section {
    background-image: linear-gradient(rgba(30, 41, 59, 0.7), rgba(30, 41, 59, 0.6)), url('../img/tutoring-hero.png');
    background-size: cover;
    background-position: center;
}

.vyshyvanka-border {
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0l20 20-20 20L0 20z' fill='%23ef4444' fill-opacity='0.1'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    height: 20px;
}

.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
}