/* Estilo para o fundo da página */
body {
    background-image: url('/images/fundo_azulejo.png');
    background-position: center -84px; /* Centraliza a imagem horizontalmente e a alinha ao topo */
    background-repeat: repeat-x;
    background-size: auto; /* Mantém o tamanho original da imagem */
    margin: 0; /* Remove margens padrão do body */
    padding: 0; /* Remove padding padrão do body */
}

/* Estilo para a seção com colunas */
.content-section {
    margin: 50px auto; /* Margem superior e inferior */
    max-width: 1200px; /* Largura máxima da seção */
    margin-top: 0;
}

.content-box {
    padding: 20px;
    background-color: transparent;
    border-radius: 8px;
    text-align: center; /* Centraliza o conteúdo */
}

/* Estilos para colunas */
.custom-col-2x {
    flex: 0 0 25%; /* Colunas laterais com 25% de largura */
    max-width: 25%;
}

.custom-col-3x {
    flex: 0 0 50%; /* Coluna central com 50% de largura */
    max-width: 50%;
}

/* Estilo para colunas em dispositivos móveis */
@media (max-width: 768px) {
    .custom-col-2x {
        display: none; /* Esconder colunas laterais em dispositivos móveis */
    }

    .custom-col-3x {
        flex: 0 0 100%; /* Coluna central ocupa toda a largura disponível */
        max-width: 100%;
    }
}

/* Estilo para o logo */
.content-box img {
    max-width: 80%; /* Reduzir o tamanho do logo */
    height: auto;
    opacity: 0; /* Inicialmente invisível para o efeito de fade-in */
    transition: opacity 2s ease-in; /* Transição suave para o efeito de fade-in */
}

/* Efeito de fade-in quando a página é carregada */
.content-box img.loaded {
    opacity: 1;
}

.content-box .title {
    font-family: "Handlee";
    font-weight: 800;
    margin-top: -30px;
    
}

/* Estilo para as colunas coloridas */
.column-left, .column-right {
    border-radius: 20px; /* Cantos arredondados */
}

.column-left embed, .column-right embed {
    width: 100%;
    height: 520px;
}

.rnal {
    text-align: center;
}

.orange-box {
    background-color: #FFA500; /* Laranja */
    color: #fff;
    padding: 20px;
    height: 520px;
}

    .orange-box.bg-box-jpr {
        background-image: url('/images/bg_box_jpr.png');
        background-position: bottom center;
        background-blend-mode: multiply;
    }

.teal-box {
    background-color: #008080; /* Azul esverdeado */
    color: #fff;
    padding: 20px;
    height: 520px;
}

    .teal-box.bg-box-sti {
        background-image: url('/images/bg_box_sti.png');
        background-position: bottom center;
        background-blend-mode: multiply;
    }

/* Efeito de zoom na imagem de fundo */
.colored-box {
    transition: background-size 2s ease-in-out; /* Transição suave para o efeito de zoom */
}

/* Efeito de zoom quando passar o mouse */
.colored-box:hover {
    background-size: 110%; /* Ajusta o tamanho da imagem de fundo ao passar o mouse */
}

.box-title {
    font-family: "Handlee";
    rotate: -3deg;
    font-weight: bold;
    font-size: 44px;
    padding-top: 239px;;
}

/* Estilo para colunas em dispositivos móveis */
@media (max-width: 768px) {
    .column-left, .column-right {
        border-radius: 0; /* Remover bordas arredondadas em dispositivos móveis */
        margin-bottom: 20px;
    }
}

/* Estilo para a bolha */
.bolha {
    z-index: 150;
    pointer-events: none;
    justify-content: center;
    align-items: center;
    display: flex;
    position: fixed;
    bottom: 1rem;
    left: 0%;
    right: 0%;
}

.bolha .content {
    z-index: 100;
    grid-column-gap: .64rem;
    grid-row-gap: .64rem;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    pointer-events: auto;
    cursor: auto;
    background-color: rgba(255,255,255,.6);
    border-radius: 50vw;
    justify-content: center;
    align-items: center;
    width: auto;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding: 4px;
    display: flex;
    box-shadow: 0 4px 8px rgba(0,0,0,.12),0 8px 48px rgba(0,0,0,.12);
}

.bolha .content .botao {
    font-weight: 600;
    text-decoration: none;
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    border: 1px solid #235784;
    background-color: #235784;
    text-align: center;
    border-radius: .25rem;
    justify-content: center;
    align-items: center;
    padding: 1.25rem 2.5rem;
    font-size: 1.125rem;
    line-height: 1.3;
    transition: all .6s cubic-bezier(.135,.714,.175,1);
    display: flex;
    position: relative;
    box-shadow: 0 0 rgba(0,0,0,.2);
    font-size: 14px;
}

.bolha .content .botao.btn_rounded {
    border-radius: 90px;
    color: #FFF;
}

.bolha .content .botao.first {
    background: transparent;
    border: none;
    color: #235784;
}