@font-face {
    font-family: 'Brasika';
    src: url('../fonte/brasika-display-trial.woff2') format('woff2'), /* Preferencial */
         url('../fonte/brasika-display-trial.woff') format('woff'),   /* Fallback */
         url('../fonte/brasika-display-trial.otf') format('opentype'); /* Outro fallback */
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* E então usar font-family: 'Brasika', sans-serif; nas classes CSS */


        body {
            font-family: 'Raleway', sans-serif; /* Usando Raleway para o corpo do texto */
            background-color: #f7f7f7; /* Fundo claro */
            color: #333;
            margin: 0;
            overflow-x: hidden; /* Previne rolagem horizontal */
            position: relative; /* Para posicionamento absoluto do texto rotacionado */
            min-height: 100vh;
        }

        .main-content-grid {
            display: grid;
            grid-template-columns: 1fr 1fr; /* Duas colunas principais para desktop */
            min-height: 100vh;
        }
        @media (max-width: 768px) {
            .main-content-grid {
                grid-template-columns: 1fr; /* Coluna única em telas menores */
                grid-template-rows: auto auto; /* Empilha o conteúdo verticalmente */
            }
        }

        /* Estilização para o texto "PROJETOS" rotacionado */
        .rotated-title-wrapper {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-90deg); /* Centraliza e rotaciona */
            white-space: nowrap;
            font-family: 'Brasika', sans-serif; /* Usando Bebas Neue para o título rotacionado */
            font-size: clamp(3rem, 15vw, 12rem); /* Tamanho de fonte responsivo e grande */
            font-weight: 400; /* Bebas Neue geralmente tem um único peso */
            color: #333;
            opacity: 0.1; /* Levemente transparente */
            z-index: 1; /* Abaixo do conteúdo principal */
            pointer-events: none; /* Permite cliques através */
        }
        @media (max-width: 768px) {
            .rotated-title-wrapper {
                position: static; /* Redefine o posicionamento */
                transform: none; /* Remove a rotação */
                font-size: clamp(2.5rem, 10vw, 5rem);
                text-align: center;
                opacity: 0.2;
                margin-top: 2rem;
                margin-bottom: 2rem;
                grid-column: 1 / -1; /* Ocupa a largura total se estiver no fluxo do grid */
                order: 2; /* Posição entre as colunas esquerda e direita quando empilhado */
            }
        }

        .left-column {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 2rem;
            text-align: center;
            z-index: 2; /* Acima do texto rotacionado */
        }
        @media (min-width: 769px) {
            .left-column {
                align-items: flex-start;
                text-align: left;
                padding-left: 6rem; /* Mais espaçamento para desktop */
                padding-right: 2rem;
            }
        }

        .profile-pic {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 1.5rem;
            border: 2px solid #ccc;
        }
        .name {
            font-family: 'Brasika', sans-serif; /* Usando Bebas Neue para o nome */
            font-size: 2.5rem;
            font-weight: 400;
            margin-bottom: 0.5rem;
            line-height: 1;
        }
        .role {
            font-family: 'Raleway', sans-serif; /* Usando Raleway para o cargo */
            font-size: 1.125rem;
            font-weight: 400;
            margin-bottom: 1rem;
            max-width: 300px;
        }
        .description {
            font-family: 'Raleway', sans-serif; /* Usando Raleway para a descrição */
            font-size: 0.95rem;
            line-height: 1.5;
            margin-bottom: 1.5rem;
            max-width: 300px;
        }
        .social-icons {
            display: flex;
            gap: 1rem;
            font-size: 1.5rem;
            color: #555;
        }

        .right-column {
            display: flex;
            flex-direction: column;
            z-index: 2; /* Acima do texto rotacionado */
        }
        @media (max-width: 768px) {
            .right-column {
                order: 3; /* Posição após o texto rotacionado */
            }
        }

        .mabo-studio-section {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 2rem;
            text-align: center;
            flex-grow: 1;
        }
        @media (min-width: 769px) {
            .mabo-studio-section {
                align-items: flex-end;
                text-align: right;
                padding-right: 6rem; /* Mais espaçamento para desktop */
                padding-left: 2rem;
            }
        }

        .mabo-logo {
            width: 80px;
            height: auto;
            margin-bottom: 1rem;
        }
        .mabo-title {
            font-family: 'Brasika', sans-serif; /* Usando Bebas Neue para o título MABO */
            font-size: 2rem;
            font-weight: 400;
            margin-bottom: 0.25rem;
        }
        .mabo-tagline {
            font-family: 'Brasika', sans-serif; /* Usando Bebas Neue para o tagline MABO */
            font-size: 1.1rem;
            font-weight: 400;
        }

        .studies-blog-section {
            background-color: #FFA500; /* Fundo laranja */
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            padding: 2rem;
            position: relative;
            overflow: hidden;
            min-height: 200px;
            
            
        }

        
        @media (min-width: 769px) {
            .studies-blog-section {
                flex-grow: 0;
                min-height: 300px;
                padding: 4rem;
            }
        }

        .studies-text {
            font-family: 'Brasika', sans-serif; /* Usando Bebas Neue para o texto Estudos */
            font-size: clamp(1.5rem, 5vw, 3rem);
            font-weight: 400;
            color: black;
            text-align: center;
            line-height: 1.2;
            z-index: 2;
            position: relative;
        }
        @media (min-width: 769px) {
            .studies-text {
                position: absolute;
                left: 20%; /* Posição relativa à seção */
                top: 50%;
                transform: translateY(-50%);
                text-align: left;
            }
        }

        .triangle-icon {
            position: absolute;
            right: 0%; /* Posição dentro do bloco laranja */
            width: clamp(100px, 30vw, 250px);
            height: auto;
            z-index: 1;
        }
        .triangle-icon circle {
            fill: black; /* Círculo preto */
        }
        .triangle-icon polygon {
            fill: white; /* Triângulo branco */
        }

        @media (min-width: 769px) {
            .triangle-icon {
                right: 15%; /* Posição relativa à seção */
                width: clamp(150px, 15vw, 300px);
                top: 50%;
                transform: translateY(-50%);
            }
        }