/* ===== resources/views/site/about-us/index.blade.php ===== */
/* ====== PÁGINA SOBRE NÓS (ABOUT US) ====== */

        /* Arredondamento padrão para imagens na página */
        .about-us-page .rounded {
            border-radius: 0px;
        }

        .container-narrow-about-us {
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            padding-right: var(--bs-gutter-x, 0.75rem);
            padding-left: var(--bs-gutter-x, 0.75rem);
        }

        .about-title {
            font-family: 'Oswald', sans-serif;
            font-weight: 700;
            font-size: 3rem;
            color: var(--sulsul-purple);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 1.5rem;
        }

        .about-text p {
            font-family: 'Montserrat', sans-serif;
            color: var(--sulsul-light-gray);
            font-size: 1rem;
            line-height: 1.7;
        }

        /* Estilo para os 3 cartões na parte inferior */
        .about-card {
            border-radius: 0px;
            overflow: hidden; /* Garante que a imagem respeite as bordas arredondadas */
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .about-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
        }

        /* Estilo para a seção hero */
        .producer-hero-image {
            width: 100%;
            height: 400px; /* Defina a altura fixa que desejar aqui (ex: 450px) */
            position: relative; /* Mantido para os elementos flutuantes */
            overflow: hidden; /* Esconde qualquer parte da imagem que exceda a altura fixa */
        }

        /* Estilo para a imagem dentro da seção hero */
        .producer-hero-image > img {
            width: 100%;
            height: 100%;

            /* A MÁGICA ACONTECE AQUI */
            object-fit: cover; /* Garante que a imagem cubra toda a área sem distorcer */

            /* Opcional: Centraliza a imagem dentro do quadro. Você pode usar 'top', 'bottom', etc. */
            object-position: center;
        }