@keyframes subtleFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .trailer-content {
        padding: 0;
    }

        .trailer-content video {
            max-width: 100%;
            max-height: 100%;
            border-radius: 0;
        }

    .trailer-close {
        top: 12px;
        right: 12px;
    }
}

@media (max-width: 768px) {
    /* HERO */
    .hero-slide {
        height: 65vh;
    }

    .hero-content {
        bottom: 6%;
        right: 6%;
        left: 6%;
        max-width: none;
        text-align: center;
    }

        .hero-content h1 {
            font-size: 1.8rem;
            line-height: 1.4;
        }

        .hero-content p {
            font-size: .9rem;
            line-height: 1.7;
        }

    .hero-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 1.5rem;
    }

        .hero-actions .btn {
            width: 100%;
            justify-content: center;
        }
    /* CATEGORIES → Horizontal Scroll */
    .section .row {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 10px;
    }

    .section .col-md-4 {
        flex: 0 0 80%;
        max-width: 80%;
        scroll-snap-align: start;
    }

    .category-card {
        height: 200px;
    }
    /* FEATURED */
    .featured-card {
        margin-bottom: 10px;
    }
    /* NEWSLETTER */
    .newsletter {
        padding: 3.5rem 1rem;
    }

        .newsletter h2 {
            font-size: 1.6rem;
        }

    .newsletter-form {
        flex-direction: column;
    }

        .newsletter-form button {
            width: 100%;
        }
}

@media (max-width: 992px) {
    .company-intro-section {
        min-height: auto;
        padding: 80px 0;
    }

    .intro-header h4 {
        font-size: 2.3rem;
    }

    .intro-image {
        height: 350px;
        margin-bottom: 40px;
    }
}

@media (max-width: 768px) {
    .intro-header h4 {
        font-size: 2rem;
    }

    .intro-content p {
        font-size: 1rem;
    }

    .intro-image {
        height: 300px;
    }
}

@media (max-width: 576px) {
    .intro-header h4 {
        font-size: 1.8rem;
    }

    .company-intro-section {
        padding: 60px 0;
    }
}
