@media screen and (max-width: 1100px) { /* Momento em que o menu se quebra */
    header .Menu-Desktop, header .btn-contato{
        display: none; /*Escondendo menu*/
    }

    header .btn-menu-mob {
        display: block;
    }
    
}
    
@media screen and (max-width: 900px) { 

    .programacoes {
        scroll-margin-top: 400px;
    }

    /* Responsivo da Hero */
    .hero-site .txt-BemVindo h1 {
       margin-left: 17px;
    }

    .hero-site .txt-BemVindo h1{
        font-size: 2.5em;
        line-height: 40px;
        font-weight: 200;
    }

    /* Jogar o 'Seara' pra baixo  */
    .hero-site .txt-BemVindo h1 span{
        display: block;
        font-weight: 700;
        color: bisque;
    }

    .hero-site .txt-BemVindo p {
        font-size: 18x;
        font-weight: 300;
        margin: 20px 17px;
    }

    /* Responsivo sobre nós */

    .Sobre-Nos h3{
        font-size: 2.5em;
        line-height: 40px;
    }

    .Sobre-Nos p {
        margin: 20px 17px;
        font-size: 16px;
        font-weight: 300px;
    }

    .Sobre-Nos > .overlay { /* '>' para dizer que quer editar a classe overlay */
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.575);
        width: 100%;
        height: 100%;
        z-index: 1; /* O position dos Z-INDEX precisam ser diferentes nas classes */
    }
    

    /* Responsivo da Agenda */

    .AgendaSemanal .txt-Agenda {
        margin-bottom: 30px;
    }
    
    .AgendaSemanal .txt-Agenda h3 {
        line-height: 45px;
        margin-bottom: 30px;
        text-align: center;
        font-size: 3em;
        color: rgb(37, 94, 158);
    }

    .AgendaSemanal .txt-Agenda span {
       display: block;
    }


    .AgendaSemanal .itens-container {
        flex-direction: column;
    }

    .AgendaSemanal .itens-container .img-itens img {
        width: 260px;
        max-height: 183px;
        border-radius: 40px;
    }

    .AgendaSemanal .itens-container .txt-itens p {
        margin-bottom: 30px;
    }

    .AgendaSemanal .itens-container .txt-itens {
      text-align: center;
    }

    .img-itens {
        height: 183px;
    }

    .AgendaSemanal .itens-container .item-1 {
        order: 1;
    }
    .AgendaSemanal .itens-container .item-2 {
        order: 0
    }

    .AgendaSemanal .itens-container .txt-itens span1 {
        display: block;
    }

    /* Responsivo células */

    section.Celulas {
        padding: 80px;
        background-color: #01121F;
    }

    .Celulas .nossas-celulas h3 {
        color: #fff;
        padding-top: 30px;
        font-size: 3.5em;
        font-weight: 600;
        line-height: 50px;
        margin-bottom: 40px;
        text-align: center;
    }

    .instrucoes2 {
        padding-right: 0px;
    }

    .instrucoes {
        padding-left: 0px;
    }

    .instrucoes2, .instrucoes {
        display: block;
        width: 100%;
        margin-right: -4px;
    }

    .instrucoes2 .instru-box, .instrucoes .instru-box {
        background-color: #ffffffbe;
        display: block;  
        align-items: center;
        text-align: center;    
        gap: 20px;

        margin-bottom: 40px;
        border: 2px solid rgb(255, 255, 255);
        padding: 10px;

        box-shadow: rgba(255, 255, 255, 0.4) -5px 5px, 
        rgba(255, 255, 255, 0.3) -10px 10px, 
        rgba(255, 255, 255, 0.2) -15px 15px, 
        rgba(2255, 255, 255, 0.1) -20px 20px, 
        rgba(255, 255, 255, 0.05) -25px 25px;
        
    }

    .instrucoes2 .instru-box img, .instrucoes .instru-box img {
        max-width: 50px;
    }

     /* Responsivo das programações */

    /* Programacoes */
    /* Texto */
    .txt-prog .texto {
        text-align: center;
        padding-top: 60px;
    }

    .txt-prog .texto h3 {
        font-size: 2em;
        font-weight: 600;
        line-height: 30px;
    }
    .txt-prog .texto h3 span {
        display: block;
        padding-bottom: 16px;
    }

    .txt-prog .texto p {
        margin: 20px 17px;
        font-size: 16px;
    } 

    .programacoes {
        width: 100%; /* O contêiner ocupa toda a largura */
        display: inline-block; /* Alinha os itens verticalmente */
        padding: 5%;
        opacity: 0; /* Inicialmente invisível */
        transform: translateY(50px); /* Move para baixo inicialmente */
        transition: all 4.5s ease-out;
    }

    .programacoes.show {
        opacity: 1; /* Torna visível */
        transform: translateY(0); /* Retorna à posição original */
    }

    .box-programacoes {
        width: 80%; /* Cada caixa 80% a largura */
        margin: 0 auto 50px auto; /* Adiciona espaçamento vertical entre as caixas */
        box-shadow: 0 5px 15px rgba(0, 0, 0, .1);  
        opacity: 0; /* Invisível inicialmente */
        animation: fadeInMobile 0.5s ease-out forwards;
    }

    .box-programacoes > img {
        width: 100%; /* Imagem ajustada ao novo tamanho da caixa */
        height: auto; /* Altura automática para manter a proporção */
        transition: transform 0.5s;
    }

    .box-programacoes > span {
        font-size: 16px; /* Fonte ajustada para telas menores */
        height: auto; /* Remove restrições de altura */
        line-height: normal; /* Ajusta o espaçamento de linha */
    }

    .box-programacoes:hover > img {
        transform: scale(1.3); /* Zoom na imagem ao passar o mouse */
        transition: .5s;
    }

    @keyframes fadeInMobile {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Responsivo devocional */
    section.devocional {
        margin-top: 45px;
        padding: 0 18px;
        text-align: center;
        height: auto; /* Altura dinâmica para conteúdo maior */
        box-shadow: none;
        padding-bottom: 30px;
    }

    .devocional .txt-devocional h3 {
        font-size: 2.5em;
    }

    .devocional .txt-devocional h2 {
        font-size: 18px; /* Reduzir o tamanho do subtítulo */
    }

    .devocional .txt-devocional span {
        font-size: 18px;
        font-weight: normal;
    }
    
    .devocional .txt-devocional h1 {
        font-size: 16px;
        font-weight: normal;
        padding-bottom: 5px;
    }

    .devocional .txt-devocional {
        max-width: 95%; /* Usar a maior parte da largura da tela */
    }

    .devocional .txt-devocional p {
        font-size: 14px; /* Reduzir o tamanho do texto */
        text-align: center; /* Alinhar texto ao centro */
    }

    /* Midia e Líve */
    .midia {
        margin-top: 0px;
        width: 100%;
        padding: 40px 20px; /* Espaçamento interno da seção */
        display: block;
        justify-content: center;
        background-color: #01121F; /* Cor de fundo para a seção */
    }

    .midia .txt-multimidia {
        padding: 30px;
        color: bisque;
        text-align: center;
        font-size: 2.5em;
        margin-bottom: 20px;
    }

    .opcoes-midia {
        display: block;
        gap: 40px; /* Espaçamento horizontal entre as divs */
        width: 100%;
        padding: 0 15px;
    }

    .fotos, .live {
        flex: 1; /* Espaço proporcional */
        padding: 20px; /* Espaçamento interno */
        box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
        border-radius: 8px; /* Cantos arredondados */
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }


    /* Responsivo dos botões de contato */
    section.contato {
        background-color: #fff;
        padding: 50px 0;
        padding-bottom: 8;
    }

    .txt-contato, .icons-contato {
        display: block; /*Botão e texto lado a lado*/
        width: 100%;
        padding-bottom: 30px;
        text-align: center;
    } 

    .contato .txt-contato h3{
        font-size: 2.5em;
        line-height: 40px;
    }

    .contato .txt-contato span {
        display: block;
    }

    .contato .icons-contato button p {
        font-size: 15px;
        color: black;
        text-decoration: none;
    }

    .contato .icons-contato button {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 60px;
        text-decoration: none;
        color: black;
        
        width: 90%;
        height: 60px;
        margin: 0 auto 20px auto;
        border: 2px solid black;
        border-radius: 4px;
        
        background-color: transparent;
        cursor: pointer;

        transition: 0.3s;
    }

    .contato .icons-contato button:hover {
        background-color: rgba(0, 0, 0, 0.87);
        text-decoration: none;
    }

    /* Responsivo do Rodapé (Footer) */

    footer {
        padding: 40px;
    }    

    footer .top-footer button {
        text-decoration: none;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        border: 2px solid #fff;
        background-color: transparent;
        color: #fff;
        font-size: 22px;
        cursor: pointer;
        margin: 0 8px;
        transition: .5s;
        margin: 10px;
    }

    footer .bottom-footer p {
        color: #fff;
        margin-top: 6px;
        font-size: 12px;
    }
}