/* Custom styles that extend Tailwind */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 1rem;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

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

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}
/* Icon styles */
img[alt="Digital Ruble Symbol"] {
    object-fit: contain;
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

/* Custom button styles */
.btn-primary {
    @apply bg-primary hover:bg-blue-900 text-white font-bold py-3 px-6 rounded-lg transition duration-300;
}

.btn-secondary {
    @apply bg-secondary hover:bg-yellow-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300;
}

/* Card hover effect */
.card-hover {
    @apply transition duration-300 transform hover:-translate-y-2;
}

/* Section spacing */
.section-py {
    @apply py-20;
}

/* Custom shadow */
.custom-shadow {
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
}

/* Gradient text */
.gradient-text {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(to right, #1E3A8A, #10B981);
}

/* Responsive tweaks */
@media (max-width: 768px) {
    .mobile-stack {
        flex-direction: column;
    }
}
/* Анимации для уведомлений */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.notification-enter {
    animation: slideInRight 0.3s ease-out;
}

.notification-exit {
    animation: slideOutRight 0.3s ease-in;
}