@keyframes slideInRight {
        from { transform: translateX(400px); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }

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

    header a:hover {
        opacity: 0.8;
    }

    footer a:hover {
        opacity: 1 !important;
    }

    
    .mobile-menu-btn {
        display: none;
        flex-direction: column;
        gap: 5px;
        padding: 10px;
        background: transparent;
        border: none;
        cursor: pointer;
    }
    .mobile-menu-btn span {
        width: 25px;
        height: 3px;
        background: white;
        border-radius: 2px;
        transition: 0.3s;
    }

    
    @media (max-width: 1200px) {
        .header__container {
            padding: 15px 30px !important;
        }
    }

    @media (max-width: 992px) {
        html, body {
            max-width: 100%;
            overflow-x: hidden;
            overscroll-behavior-x: none;
        }
        .header, main, footer {
            max-width: 100%;
            overflow-x: hidden;
        }
        .header__container {
            padding: 15px 20px !important;
        }
        .header__container nav {
            position: fixed;
            top: 0;
            right: 0;
            width: min(82vw, 320px);
            max-width: 100vw;
            height: 100vh;
            background: var(--secondary-color);
            flex-direction: column;
            padding: 80px 30px 30px;
            transform: translateX(calc(100% + 2px));
            visibility: hidden;
            pointer-events: none;
            transition: transform 0.3s ease, visibility 0.3s ease;
            will-change: transform;
            z-index: 1001;
            box-shadow: -5px 0 20px rgba(0,0,0,0.3);
        }
        .header__container nav.active {
            transform: translateX(0);
            visibility: visible;
            pointer-events: auto;
        }
        .header__container nav ul {
            flex-direction: column !important;
            gap: 20px !important;
            display: flex !important;
        }
        .header__container nav ul li a {
            font-size: 18px !important;
            padding: 12px 0 !important;
            display: block;
        }
        .header__container nav > div {
            flex-direction: column !important;
            width: 100%;
            margin-top: 30px;
        }
        .header__container nav > div a {
            width: 100%;
            text-align: center;
        }
        .mobile-menu-btn {
            display: flex;
            z-index: 1002;
        }
        .mobile-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
        }
        .mobile-overlay.active {
            display: block;
        }
    }

    
    @media (max-width: 1200px) {
        .footer__container {
            padding: 0 40px !important;
        }
    }

    @media (max-width: 1024px) {
        .footer__grid {
            grid-template-columns: 1fr 1fr !important;
            gap: 40px !important;
        }
    }

    @media (max-width: 768px) {
        .footer__container {
            padding: 0 20px !important;
        }
        .footer__grid {
            grid-template-columns: 1fr !important;
            gap: 32px !important;
            text-align: center;
        }
        .footer__grid > div:first-child {
            max-width: 100% !important;
        }
        .footer__grid > div:first-child > div:last-child {
            justify-content: center;
        }
        .footer__grid > div h3 {
            font-size: 18px !important;
        }
    }

    @media (max-width: 480px) {
        .footer__container {
            padding: 0 16px !important;
        }
    }

    
    @media (max-width: 768px) {
        .container {
            padding: 0 20px !important;
        }
        section {
            padding: 60px 0 !important;
        }
        section > div {
            padding-left: 20px !important;
            padding-right: 20px !important;
        }
        h1 {
            font-size: 32px !important;
        }
        h2 {
            font-size: 28px !important;
        }
    }

    @media (max-width: 480px) {
        h1 {
            font-size: 26px !important;
        }
        h2 {
            font-size: 24px !important;
        }
        .btn {
            padding: 12px 20px !important;
            font-size: 14px !important;
        }
        .btn-large {
            padding: 14px 28px !important;
            font-size: 16px !important;
        }
    }